/* App frame: viewport = fixed navigation + minmax(0, 1fr) canvas.
   At 1440: 228 sidebar + 1212 canvas; 2x24 padding + 2x570 columns +24 gap =1212. */
:root {
  --font: "Geist", system-ui, sans-serif; --mono: var(--font); --mark: "Jost", sans-serif;
  --paper: #f4f3f1; --sheet: #ffffff; --ink: #0a0a0a; --ink-2: #6b6b6b; --ink-3: #6b6b6b;
  --rule: #e6e6e6; --hair: #f0f0f0; --fill: #eeeeee; --fill-2: #d4d4d4;
  --accent: #1b6c80; --accent-ink: #ffffff; --positive: #2e7d32; --pos: #2e7d32; --negative: #c4242a; --neg: #c4242a;
  --primary: #1b6c80; --on-primary: #fff; --control-border: #d4d4d4;
  --radius-card: 8px; --radius-control: 6px;
  --side: 256px; --pad: 24px; --gut: 12px; --appbar: 48px;
  --fs-title: 24px; --fs-kpi: 30px; --fs-section:16px; --fs-body:14px; --fs-small:12px;
  --chart-1: #1b6c80; --chart-2: #0a0a0a; --chart-3: #6b6b6b; --chart-4: #0a0a0a;
  --surface: var(--sheet); --raised: var(--fill); --muted: var(--ink-2); --grid: #e6e6e6;
  --chart-muted: #d4d4d4; --chart-neutral: #6b6b6b; --chart-mark: #0a0a0a; --chart-track: #eeeeee; --axis-ink: #6b6b6b;
  color-scheme: light;
}
body { font-size:14px; line-height:1.5; }
button, input, select, textarea { font-family:var(--font); }
input::placeholder, textarea::placeholder { color:var(--ink-3); opacity:1; }
[hidden] { display:none !important; }
.appbar { border-bottom:1px solid var(--rule); background:var(--paper); align-items:center; }
.brand { padding:0 24px; }
.wm { font-size:22px; }
.wm-sub { font-size:11px; }
.whoami { border:0; min-width:112px; padding:0 24px; }
.whoami-name { font-size:13px; font-weight:500; }
.whoami-role { font:400 12px/18px var(--font); }
.modes { height:100%; padding:0; }
.mode[data-mode="settings"] { font-weight:400; padding:0 12px; }
.mode[data-mode="settings"][aria-current="page"] { box-shadow:none; text-decoration:underline; }
.sidebar { border-right:1px solid var(--rule); }
.nav { padding:16px 10px; }
.nav-group + .nav-group { border:0; padding-top:14px; margin-top:10px; }
.nav-label { font:400 12px/18px var(--font); text-transform:none; letter-spacing:0; padding:6px 12px 10px; color:var(--ink-2); }
.nav-item, .nav-item.sub { height:36px; border:0; padding:0 12px; border-radius:6px; font:400 14px/20px var(--font); gap:10px; }
.nav-item.sub { padding-left:38px; font-size:13px; }
.nav-item[aria-current="page"] { background:var(--fill); color:var(--ink); }
.nav-item[aria-current="page"] .ic { color:var(--ink); }
.side-foot { padding:16px 22px; gap:10px; border-color:var(--rule); }
.side-status { font:400 12px/18px var(--font); }
.side-status b { width:6px; height:6px; margin-top:6px; background:var(--ink-3); border-radius:50%; }
.side-link { font-size:13px; font-weight:400; text-decoration:none; }
.preview-note { font-size:12px; color:var(--ink-2); }
.preview-links { display:flex; gap:10px; flex-wrap:wrap; font-size:12px; }
.preview-links a { text-decoration:underline; text-underline-offset:3px; }
.work-nav { display:flex; align-items:center; gap:24px; margin-left:40px; font-size:13px; color:var(--ink-2); }
.work-nav a:hover { color:var(--ink); }
.sheet { border:0; margin:0; background:var(--paper); }
.view { padding:28px var(--pad) 32px; }
.title-row { border:0; padding-bottom:0; align-items:center; gap:16px; }
.title-row h1 { font-size:var(--fs-title); line-height:1.25; margin:0; font-weight:600; letter-spacing:-.025em; }
.title-row .sub { font-size:14px; line-height:21px; max-width:68ch; margin-top:6px; }
.display { font-weight:600; line-height:1.2; letter-spacing:-.02em; }
.section-kicker, .kpi-label, .field>span, .flow dt { font:500 13px/18px var(--font); letter-spacing:0; text-transform:none; }
.queue-bar { padding-top:14px; font:400 13px/20px var(--font); }
.queue-bar b { font-weight:600; }
.btn, .icon-btn, .mode { border:1px solid var(--control-border); border-radius:var(--radius-control); font-weight:500; font-size:13px; height:36px; background:var(--sheet); }
.btn.sm { height:32px; padding:0 12px; font-size:13px; }
.btn.primary, .btn.ink { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.btn.primary:hover, .btn.ink:hover { background:var(--primary); color:var(--on-primary); opacity:.88; }
.btn:hover, .icon-btn:hover { background:var(--fill); color:var(--ink); }
.btn.quiet { color:var(--ink-2); border-color:var(--control-border); font-weight:400; }
.link { font-size:13px; font-weight:500; text-decoration:none; }
.link:hover { background:none; color:var(--ink); text-decoration:underline; }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.input, .select { height:40px; border:1px solid var(--control-border); border-radius:var(--radius-control); font-size:14px; background-color:var(--sheet); color:var(--ink); }
.input:focus, .select:focus { outline:2px solid var(--ink); outline-offset:1px; }
.field { gap:8px; }
.select { appearance:auto; background-image:none; padding-right:10px; }
.panel, .prod-card, .line { border:1px solid var(--rule); border-radius:var(--radius-card); background:var(--sheet); overflow:visible; }
.panel>header, .prod-card>header { padding:16px 20px; border-bottom:1px solid var(--hair); align-items:center; min-height:56px; }
.panel>header h2 { font:500 16px/22px var(--font); }
.panel-body { padding:20px; }
.panel>header .note, .band-head .note, .side-block .note { font:400 12px/18px var(--font); }
.table-wrap { border-width:1px; border-color:var(--rule); border-radius:0 0 var(--radius-card) var(--radius-card); }
table.t { font-size:14px; }
table.t th { font:400 12px/18px var(--font); height:40px; letter-spacing:0; text-transform:none; border-color:var(--hair); }
table.t td { min-height:48px; border-color:var(--hair); }
table.t tbody tr:hover td { background:var(--paper); }
table.t tfoot td { border-width:1px; border-color:var(--rule); }
table.t .id, table.t .sub, .prod-card .sku { font:400 12px/18px var(--font); }
.prod-card h3 { font-size:16px; font-weight:500; }
.prod-card .var-row { border:0; padding:7px 20px; gap:12px; }
.prod-card .var-row:last-child { padding:12px 20px 16px; }
.prod-card .var-row .price { font:500 13px/20px var(--font); white-space:nowrap; }
.prod-card .var-row .faint { font-family:var(--font) !important; }
.prod-grid { gap:var(--gut); grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); }
.search, .seg { border:1px solid var(--control-border); border-radius:var(--radius-control); height:36px; }
.seg button { border:0; background:none; font-size:13px; font-weight:400; border-radius:var(--radius-control); }
.seg button[aria-pressed="true"] { background:var(--fill); color:var(--ink); }
.search input { font-size:14px; color:var(--ink); }
.toolbar { gap:12px; }
.tabs { border-width:1px; border-color:var(--rule); }
.tabs a { border:0; font-weight:400; padding:12px; }
.tabs a[aria-selected="true"] { background:none; color:var(--ink); box-shadow:inset 0 -2px var(--ink); }
.variant-group { border:0; background:var(--paper); padding:16px; border-radius:var(--radius-card); gap:16px; }
.variant-group-head { border:0; padding:0; }
.variant-groups { gap:16px; }
.variant-group-head .icon-btn, .v-row .icon-btn { width:32px; height:32px; font-size:16px; border-color:var(--rule); }
.v-row { gap:12px; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 32px; }
.variant-items { gap:14px; }
.switch { width:36px; height:22px; border:0; border-radius:999px; background:var(--fill-2); }
.switch:after { width:16px; height:16px; top:3px; left:3px; border:0; border-radius:50%; background:var(--sheet); }
.switch:checked, .switch:checked:hover { background:var(--primary); }
.switch:checked:after { transform:translateX(14px); border:0; background:var(--on-primary); }
.switch-row { font-size:14px; font-weight:500; }
.chk { border-width:1px; border-color:var(--hair); padding:10px 12px; font-size:14px; }
.chk input { border-width:1px; border-radius:4px; border-color:var(--control-border); }
.chk input:checked { background:var(--primary); border-color:var(--primary); }
.chk input:checked:after { color:var(--on-primary); font-family:var(--font); }
.chk-name { font-weight:400; }
.chk-price { font:400 13px/20px var(--font); }
.addon-list, .line-addons { border:1px solid var(--rule); border-radius:var(--radius-card); }
.pill { background:var(--fill); border:0; border-radius:4px; font:400 12px/20px var(--font); padding:0 8px; color:var(--ink-2); }
.pill.acc, .pill.ink { background:var(--fill); color:var(--ink); }
.lead { border:1px solid var(--rule); border-radius:var(--radius-card); overflow:hidden; }
.lead-main { padding:20px; }
.lead-value .big { font-size:36px; font-weight:600; letter-spacing:-.025em; }
.lead-label, .lead-caption, .lead-head .date { font-family:var(--font); }
.lead-chart, .lead-strip, .lead-side { border-width:1px; border-color:var(--rule); }
.lead-strip dt { font-size:12px; }
.lead-strip dd { font-size:18px; font-weight:500; }
.lead-strip dd small, .tickline, .pay-row .val, .shift-row .span, .shift-axis { font-family:var(--font); }
.walkin-big { font-size:30px; font-weight:500; }
.kpis { border:1px solid var(--rule); border-radius:var(--radius-card); }
.kpi + .kpi { border-width:1px; border-color:var(--rule); }
.kpi-value { font-size:var(--fs-kpi); font-weight:500; line-height:1.25; }
.kpi .delta { font:400 12px/18px var(--font); }
.flow { border:1px solid var(--rule); border-radius:var(--radius-card); overflow:hidden; background:var(--rule); }
.flow dd { font-size:24px; font-weight:500; }
.rank-row .qty, .bar-row .vl, .hc b { font-family:var(--font); }
.rank-row .nm .bar { height:2px; }
#rank-top { gap:0; }
#rank-top .rank-row { height:40px; padding:0; }
.stock-preview { margin-top:16px; padding-top:16px; border-top:1px solid var(--rule); }
.stock-preview h3 { font-size:14px; font-weight:500; margin-bottom:8px; }
.stock-preview p { display:flex; justify-content:space-between; gap:16px; font-size:13px; line-height:24px; color:var(--ink-2); }
.stock-preview span { color:var(--ink); font-variant-numeric:tabular-nums; }
.band-head h2 { font-size:16px; font-weight:500; }
.side-block + .side-block { border-width:1px; border-color:var(--rule); }
.setting { border-width:1px; border-color:var(--rule); padding:24px 0; }
.setting h3 { font-size:16px; font-weight:500; }
.setting-panel { gap:16px; }
.drawer-panel { border-width:1px; border-color:var(--rule); }
.drawer-head { border-width:1px; border-color:var(--rule); }
.drawer-head h2 { font-size:18px; font-weight:500; }
.receipt { border:1px solid var(--rule); border-radius:var(--radius-card); }
.receipt .rh { border-width:1px; border-color:var(--rule); }
.receipt .rh span, .receipt .rl>em, .receipt .row2 { font-family:var(--font); }
.toast { border:0; box-shadow:none; border-radius:var(--radius-card); background:var(--primary); color:var(--on-primary); font-weight:400; }
.toast b { font-family:var(--font); color:var(--on-primary); }
.pager { border-width:1px; border-color:var(--rule); font-family:var(--font); }
.pager .pages button { border:1px solid var(--rule); border-radius:var(--radius-control); font-family:var(--font); }
.pick-list { border:1px solid var(--control-border); border-radius:var(--radius-card); }
.pick-list li { font-weight:400; }
.empty { font-size:14px; }
#pf { max-width:none !important; margin-left:auto; margin-right:auto; }
#pf > div:last-child { justify-content:flex-end; position:sticky; bottom:-1px; background:var(--paper); padding:16px 0; z-index:4; border-top:1px solid var(--rule); }
@media(max-width:1180px) { .lead-side { border-top:1px solid var(--rule); } }
@media(max-width:960px) {
  :root { --pad:20px; --appbar:56px; }
  .work-nav { display:none; }
  .modes { padding-right:24px; }
  .sidebar { border-right:1px solid var(--rule); }
  .sheet { margin:0 !important; border-radius:0 !important; }
  .menu-btn { border:0; min-height:44px; width:48px; }
  .side-close { border:1px solid var(--control-border); border-radius:6px; width:44px; height:44px; }
  .side-head { border-color:var(--rule); }
  .brand { padding:0 12px; }
  .title-row h1 { font-size:24px; }
  .view { padding:24px var(--pad) 24px; }
  .lead-side { border-left:0; }
}
@media(max-width:640px) {
  .btn, .input, .select, .nav-item, .nav-item.sub { min-height:44px; }
  .btn.sm, .icon-btn { min-height:44px; height:44px; }
  .v-row { grid-template-columns:minmax(0,1fr) 44px; }
  .v-row .field:nth-child(2) { grid-column:1; }
  .v-row .icon-btn { grid-column:2; grid-row:1; width:44px; height:44px; }
  .variant-group-head .icon-btn { width:44px; height:44px; flex:none; }
  .title-actions { gap:8px; }
  .kpi:nth-child(2n), .kpi:nth-child(n+3) { border-width:1px; border-color:var(--rule); }
  .seg { height:auto; min-height:44px; flex-wrap:wrap; }
  .seg button { min-height:44px; }
  .toolbar .field { flex-basis:100%; }
  .side-block + .side-block { border-left:0; }
  .panel-body, .lead-main { padding:16px; }
  .panel>header { padding:16px; }
  #pf { display:flex !important; flex-direction:column; }
  #pf>.panel { display:flex; flex-direction:column; }
  #pf>.panel>header { flex-direction:row; }
  #pf>div:last-child { bottom:0; }
}
@media(prefers-reduced-motion:reduce) { *, *:before, *:after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

@media(min-width:961px) {
  .appbar { display:none; }
  .sidebar>.brand { display:flex; min-height:100px; padding:24px 22px; }
  .sidebar { border:0; }
  .view { padding:40px; }
  #pf>.panel { display:grid; grid-template-columns:160px minmax(0,1fr); gap:24px; border:0; padding:24px 0; border-top:1px solid var(--rule); border-radius:0; background:none; }
  #pf>.panel>header { border:0; padding:0; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:12px; }
  #pf>.panel>.panel-body { padding:0; }
}
.sheet { background:var(--sheet); }
.view { max-width:1360px; margin-inline:auto; }
.variant-group { background:var(--paper); border-radius:8px; }
.mobile-wordmark { font-family:var(--mark); font-size:20px; }
@media(max-width:960px) { .sidebar>.brand { display:none; } }

/* Ledger is the main design; turquoise is the user's chosen accent from Framed Sheet. */
.sidebar-identity { flex:none; padding:26px 22px 16px; display:grid; gap:18px; }
.sidebar-identity .brand { display:flex; padding:0; min-height:0; }
.theme-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:40px; padding:8px 10px; border:1px solid var(--control-border); border-radius:6px; background:var(--sheet); color:var(--ink); font-size:13px; text-align:left; }
.theme-toggle:hover { background:var(--fill); }
.theme-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.theme-toggle { justify-content:center; }
.nav-parent { width:100%; text-align:left; background:transparent; cursor:pointer; }
.nav-chevron { margin-left:auto; transition:transform 160ms ease; }
.nav-parent[aria-expanded="true"] .nav-chevron { transform:rotate(180deg); }
.variant-required { gap:16px; font-size:13px; }
.variant-total { font-size:13px; font-weight:500; color:var(--accent); line-height:1.4; }
.nav-item[aria-current="page"], .nav-item[aria-current="page"] .ic { color:var(--accent); }
:focus-visible { outline-color:var(--accent); }
.input:focus, .select:focus { outline-color:var(--accent); }
:root[data-theme="dark"] {
 --paper:#111111; --sheet:#191919; --ink:#f5f5f5; --ink-2:#b8b8b8; --ink-3:#a5a5a5;
 --rule:#303333; --hair:#292c2c; --fill:#252929; --fill-2:#4a5353;
 --accent:#6ac5cf; --accent-ink:#102324; --primary:#6ac5cf; --on-primary:#102324; --control-border:#4a5353;
 --positive:#7bc6a1; --pos:#7bc6a1; --negative:#f18d92; --neg:#f18d92;
 --chart-1:#6ac5cf; --chart-2:#f5f5f5; --chart-3:#b8b8b8; --chart-4:#f5f5f5;
 --grid:#303333; --chart-muted:#6b7777; --chart-neutral:#b8b8b8; --chart-mark:#f5f5f5; --chart-track:#252929; --axis-ink:#b8b8b8;
 color-scheme:dark;
}
@media(max-width:960px) {
 .sidebar-identity { padding:20px 22px 16px; gap:16px; }
 .sidebar-identity .brand { display:flex; }
 .theme-toggle { min-height:44px; }
}