/* Local copies of approved current-app patch primitives; no network fonts. */
:root{
  --ivory:#FAF8F4; --canvas:#FFFDF9; --card:#FFFFFF; --ink:#203339; --muted:#53686D; --line:#E4D7C4; --line-soft:#EFE7DA;
  --limpet:#98DDDE; --limpet-deep:#0C6566; --limpet-900:#034748; --brass:#AD8A54; --brass-faint:#E7D5B7;
  --red:#b3261e; --red-bg:#fde3e0; --red-ink:#3a0d0a; --straw:#c25a74; --straw-deep:#a03f58; --straw-bg:#fbe6ec; --straw-ink:#4a1626;
  /* REV2: environment (STAGING) chrome = Lagoon Strawberry deep (owner 2026-10-10). White on #a03f58 is 6.27:1 (AA small text); #a03f58 on ivory 5.92:1. Red (#b3261e) is reserved for CRITICAL rows. */
  --strawberry-deep:#a03f58; --env:var(--strawberry-deep); --env-ink:#ffffff;
  --brass-text:#7d6134; /* REV2 PD13: small brass captions need a darker brass: 5.78:1 on white, 5.45:1 on ivory (brass #AD8A54 is 3.2:1) */
  --on-deep:#ffffff; /* text on --limpet-deep fills (white 6.84:1 on #0C6566) */
  --green:#1f7a4f; --green-bg:#dcf2e5; --amber-bg:#fff6e0; --amber-line:#e9c66b; --amber-ink:#5c3d00;
  --chip:#F3EEE4; --pill:#FFFFFF; --focus:#0C6566; --shadow:0 4px 18px rgba(29,59,58,.08);
  --font-display:'Newsreader',Georgia,serif; --font-body:'Public Sans',-apple-system,'Segoe UI',sans-serif;
}
:root[data-theme='dark']{
  --ivory:#14282B; --canvas:#182E32; --card:#203A3E; --ink:#F4F7F5; --muted:#CEDEDC; --line:#607A77; --line-soft:#2C4549;
  --limpet:#0C6566; --limpet-deep:#D5F6F7; --limpet-900:#E8FBFB; --brass:#D3B580; --brass-faint:#7C6A4C; --brass-text:#D3B580;
  --red:#c43b31; --red-bg:#4a1a16; --red-ink:#fde3e0; --straw:#e08aa3; --straw-deep:#c25a74; --straw-bg:#4a1626; --straw-ink:#fbe6ec;
  --env:#e48aa1; --env-ink:#4a1626; /* dark: light strawberry fill, strawberry ink 5.89:1 */
  --on-deep:#14282B; /* dark --limpet-deep is pale: ink on it, never white (PD13) */
  --green:#5fc48f; --green-bg:#17402b; --amber-bg:#4a3a10; --amber-line:#b58e2b; --amber-ink:#ffe9a8;
  --chip:#2A4347; --pill:#0C6566; --focus:#ACE8E8; --shadow:0 6px 22px rgba(0,0,0,.24);
}
.phone .env-strip{background:var(--env);color:var(--env-ink);font:600 12px/1.4 var(--font-body);text-align:center;padding:3px 12px;letter-spacing:.06em}
.phone .env-strip small{font-weight:400;opacity:.92;letter-spacing:0}
.phone .topbar{height:48px;background:var(--limpet);color:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 14px;border-bottom:1px solid rgba(0,0,0,.06)}
.phone .topbar h2{font-size:22px;font-weight:500}
:root[data-theme='dark'] .topbar{color:#F4F7F5}
.phone .topbar .bell{display:flex;align-items:center;gap:6px;font:600 13px var(--font-body);background:var(--pill);border-radius:999px;padding:5px 12px;min-height:44px;color:var(--limpet-deep)}
:root[data-theme='dark'] .topbar .bell{color:#F4F7F5}
.phone .topbar .guest{font:600 12px var(--font-body);color:var(--muted)}
.phone .bottombar{position:absolute;left:0;right:0;bottom:0;background:var(--limpet);padding:8px 8px 22px;border-top:1px solid rgba(0,0,0,.08)}
.phone .bottombar ul{list-style:none;margin:0;padding:0;display:flex;justify-content:space-around;border:1px solid rgba(0,0,0,.15);border-radius:999px;padding:4px}
.phone .bottombar li{font:600 12px var(--font-body);text-align:center;padding:6px 10px;border-radius:999px;color:var(--limpet-900);min-width:62px}
:root[data-theme='dark'] .bottombar li{color:#F4F7F5}
.phone .bottombar li.on{background:var(--pill)}
.phone .bottombar li i{display:block;font-style:normal;font-size:18px;line-height:1.1}
:root[data-theme='dark'] .beam .brand,:root[data-theme='dark'] .beam .ctx{color:#F4F7F5}
:root[data-theme='dark'] .beam .bell{background:#D5F6F7;color:#14282B}
:root[data-theme='dark'] .rail a .n{color:#14282B}
.phone .h1{font-size:28px;margin:0 0 4px}
.phone .sub{color:var(--muted);font-size:14px;margin:0 0 14px}
.phone .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.phone .card h3{font-size:19px;margin-bottom:6px}
.phone .card .meta{color:var(--muted);font-size:13px}
.phone .sec{font:600 12px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px;display:flex;align-items:center;gap:8px}
.phone .sec::after{content:'';flex:1;height:1px;background:var(--brass-faint)}
.phone .row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.phone .row:last-child{border-bottom:0}
.phone .row .t{flex:1;min-width:0}
.phone .row .t b{display:block;font-weight:600}
.phone .row .t small{color:var(--muted);display:block}
.phone .row.done .t b{color:var(--muted);text-decoration:line-through}
.phone .tick{width:26px;height:26px;border-radius:8px;border:2px solid var(--limpet-deep);display:grid;place-items:center;color:#fff;font-weight:700;flex:none}
.phone .tick.on{background:var(--green);border-color:var(--green)}
.phone .tag{display:inline-block;font:600 11px var(--font-body);padding:2px 8px;border-radius:999px;background:var(--chip);color:var(--ink);white-space:nowrap}
.phone .tag.red{background:var(--red);color:#fff}
.phone .tag.straw{background:var(--straw-deep);color:#fff}
.phone .tag.green{background:var(--green-bg);color:var(--green)}
.phone .tag.amber{background:var(--amber-bg);color:var(--amber-ink);border:1px solid var(--amber-line)}
.phone .tag.teal{background:var(--limpet-deep);color:var(--on-deep)}
.phone .tag.outline{background:transparent;border:1px solid var(--line)}
.phone .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:9px 14px;font:600 14px var(--font-body);min-height:44px;cursor:pointer}
.phone .btn.primary{background:var(--limpet-deep);border-color:var(--limpet-deep);color:var(--on-deep)}
.phone .btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.phone .btn.sm{min-height:44px;padding:8px 12px;font-size:13px}
.phone .btn.block{width:100%}
.phone .btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.phone .field{margin:10px 0}
.phone .field label{display:block;font:600 13px var(--font-body);margin-bottom:4px}
.phone .field .hint{font-size:12px;color:var(--muted);margin-top:3px}
.phone .input{width:100%;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:10px 12px;font:15px var(--font-body);color:var(--ink);min-height:44px;display:flex;align-items:center;gap:8px}
.phone .input.ph{color:var(--muted)}
.phone .login{max-width:360px;margin:30px auto;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.phone .login h2{font-size:26px;margin-bottom:2px}
.phone .login .os{font:600 11px var(--font-body);letter-spacing:.14em;color:var(--brass-text);text-transform:uppercase}
.phone .btn.off{opacity:.55;border-style:dashed;cursor:not-allowed}
.phone .callout{font-size:12px;color:var(--muted);border-left:3px solid var(--brass);padding:2px 8px;margin:8px 0}
.phone .disc{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font:600 13px var(--font-body);text-transform:none;letter-spacing:0;color:var(--limpet-deep);border:1px solid var(--line);border-radius:10px;background:var(--card)}
.phone .staff-bar li{min-width:58px}
/* theme.css — copied token blocks */
:root {
  --blue: #89d2e2;
  --blue-deep: #0c6566; 
  --blue-pale: #e9f8fc;
  --ink: #203339;
  --ink-soft: #3e5359;
  --muted: #6b8085;
  --muted-strong: #566a6f; 
  --positive-strong: #1f6e50; 
  --line: #e9e1d3; 
  --line-strong: #e4d7c4;
  --paper: #f7f3ec;
  --card: #ffffff;
  --positive: #2f8f6c;
  --positive-bg: #e7f5ef;
  --negative: #b14b43;
  --negative-bg: #fbebe9;
  
  
  --tone-red-fill: #b3261e; --tone-red-onfill: #fde3e0; --tone-orange-fill: #a03f58; --tone-orange-onfill: #ffffff; --tone-green-fill: #1f7a4f; --tone-green-onfill: #dcf2e5;
  --tone-red-edge: #b3261e; --tone-red-bg: #fde3e0; --tone-red-ink: #3a0d0a; --tone-red-ink-soft: #5c1a15;
  --tone-orange-edge: #c25a74; --tone-orange-bg: #fbe6ec; --tone-orange-ink: #4a1626; --tone-orange-ink-soft: #6b2338;
  --tone-green-edge: #1f7a4f; --tone-green-bg: #dcf2e5; --tone-green-ink: #0b2e1d; --tone-green-ink-soft: #174a31;
  --warning-bg: #fff6e0;
  --warning-border: #e9c66b;
  
  --bot-mark: var(--negative);
  
  --bot-steel: #6b7c85; --bot-steel-l: #e3eaed; --bot-panel: var(--blue-deep); --bot-dial: #ffffff; --bot-glow: #fff7ea; --bot-mark-glass: var(--negative);
  --card-pad: 16px; 
  
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --r-card: 14px; --target: 44px;
  --shadow: 0 12px 32px rgba(29, 59, 58, 0.08);
  --bubble-green: #187a43; 
  --shadow-lg: 0 24px 64px rgba(15, 60, 72, 0.2);
  
  --lagoon-navy: #0f4c5c;
  --pistachio: #6b8a3a;
  --strawberry: #c25a74;
  --strawberry-deep: #a03f58; 
  --tiramisu: #9c7653;
  --chocolate: #7a4a3a;
  --slate: #3f6672;
  --caramel: #b97a35;
  
  --harleys-blue-50: #e8fbfb;
  --harleys-blue-100: #d5f6f7;
  --harleys-blue-200: #bff0f0;
  --harleys-blue-300: #ace8e8;
  --harleys-blue-400: #a1e2e3;
  --harleys-blue-500: #98ddde;
  --harleys-blue-600: #5db5b7;
  --harleys-blue-700: #2c8a8c;
  --harleys-blue-800: #0c6566;
  --harleys-blue-900: #034748;
  --harleys-blue: var(--harleys-blue-500);
  
  --brand-chrome-bg: var(--harleys-blue-500);
  --brand-chrome-line: var(--harleys-blue-600);
  --brand-chrome-ink: var(--ink); 
  --brand-chrome-ink-soft: var(--harleys-blue-900); 
  
  --page-bg: #faf8f4; 
  --dock-bg: #f4f9fa;
  --dock-line: var(--brand-chrome-bg); 
  --bar-bg: var(--brand-chrome-bg);
  --bar-line: var(--brand-chrome-line);
  --bar-pill-bg: #ffffff; 
  --chrome-backing: var(--brand-chrome-bg);
  --bar-shadow: 0 -6px 18px rgba(3, 71, 72, 0.12);
  
  --nav-sales: #0b5e73;
  --nav-outlets: #6e4b2a;
  --nav-soldout: #8a2f49;
  --nav-alerts: #7f4a0f;
  --nav-more: #2f4f5a;
  --nav-sales-deep: var(--nav-sales);
  --nav-outlets-deep: var(--nav-outlets);
  --nav-soldout-deep: var(--nav-soldout);
  --nav-alerts-deep: var(--nav-alerts);
  --nav-more-deep: var(--nav-more);
  
  --hdr-tone-sales: #0b5e73;
  --hdr-tone-growth: #4f6b22;
  --hdr-tone-outlets: #6e4b2a;
  --hdr-tone-soldout: #8a2f49;
  --hdr-tone-stock: var(--chocolate);
  --hdr-tone-entry: var(--lagoon-navy);
  --hdr-tone-alerts: #7f4a0f;
  --hdr-tone-config: var(--slate);
  --hdr-tone-feedback: #0b5e73;
  --hdr-tone-admin: #3e5359;
  --selected-bg: var(--blue-deep);
  --selected-fg: #fff;
  --deck-on-tone: #ffffff; 
  --selected-shadow: 0 4px 10px rgba(22, 117, 141, 0.28);
  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  --area-accent: var(--blue-deep); --area-tint: var(--blue-pale); --area-ink: var(--ink);
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 28px;
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
}
:root[data-theme='dark'] { --page-bg: #14282b; --dock-bg: #16282f; --bar-bg: #034748; --bar-line: #2c8a8c; --bar-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --nav-sales: #8ad6ea; --nav-outlets: #e0b98f; --nav-soldout: #f4a7ba; --nav-alerts: #efb66f; --nav-more: #a9cad3;
  --nav-sales-deep: #16758d; --nav-outlets-deep: #8f6a47; --nav-soldout-deep: #a03f58; --nav-alerts-deep: #a3621c; --nav-more-deep: #3f6672; --bar-pill-bg: #98ddde;
  
  --brand-chrome-bg: var(--harleys-blue-900); --brand-chrome-line: var(--harleys-blue-700); --brand-chrome-ink: #ffffff; --brand-chrome-ink-soft: var(--harleys-blue-100); --dock-line: #2c8a8c; --chrome-backing: #034748;
  
  --bot-mark: #e8766b;
  
  --bot-steel: #aebcc3; --bot-steel-l: #2b4650; --bot-panel: #2f9bb5; --bot-glow: #fff0d6; --bot-mark-glass: #c0392b; }
:root[data-theme='dark'] {
  --tone-red-edge: #ff8a80; --tone-red-bg: #55201c; --tone-red-ink: #fff1ef; --tone-red-ink-soft: #f5c9c4;
  --tone-orange-edge: #e98aa1; --tone-orange-bg: #5e2638; --tone-orange-ink: #ffeef2; --tone-orange-ink-soft: #f3c3cf;
  --tone-red-fill: #ff8a80; --tone-red-onfill: #55201c; --tone-orange-fill: #e98aa1; --tone-orange-onfill: #3a1420; --tone-green-fill: #5fd39b; --tone-green-onfill: #12351f;
  --tone-green-edge: #5fd39b; --tone-green-bg: #12351f; --tone-green-ink: #eafaf1; --tone-green-ink-soft: #bfe6d0;
}
:root[data-theme='dark'] { --area-accent: #6cc3d8; --area-tint: #12292f; --area-ink: #e8f3f5; }
:root[data-theme='dark'] .cd { --card: #12292f; --ink: #e8f3f5; --muted-strong: #a9c0c5; --line: #24464f; --line-strong: #35606b; --blue-deep: #6cc3d8; --deck-on-tone: #0b1519; --shadow: 0 12px 32px rgba(0, 0, 0, 0.45); }
:root[data-theme='dark'] .cd-card.tone-blue { --tone: #6cc3d8; }
:root[data-theme='dark'] .cd-card.tone-lagoon { --tone: #5fa8bc; }
:root[data-theme='dark'] .cd-card.tone-pistachio { --tone: #a3c26b; }
:root[data-theme='dark'] .cd-card.tone-tiramisu { --tone: #c9a27c; }
:root[data-theme='dark'] .cd-card.tone-strawberry { --tone: #e48aa1; }
:root[data-theme='dark'] .cd-card.tone-chocolate { --tone: #c28a78; }
:root[data-theme='dark'] .cd-card.tone-caramel { --tone: #e2a666; }
:root[data-theme='dark'] .cd-card.tone-slate { --tone: #7fa9b6; }
:root[data-env='staging']:not([data-theme='dark']) { --page-bg: #f6dcd6; }
:root[data-env='staging'][data-theme='dark'] { --page-bg: #22100e; }
:root[data-env='local']:not([data-theme='dark']) { --page-bg: #d8e4f6; }
:root[data-env='local'][data-theme='dark'] { --page-bg: #0d1626; }
:root {
  --login-on-fill: #ffffff;
  --login-g-red: #EA4335; --login-g-blue: #4285F4; --login-g-yellow: #FBBC05; --login-g-green: #34A853; 
  --login-font-display: 'Newsreader', Georgia, serif;
  --login-font-body: 'Public Sans', Arial, sans-serif;
  --login-bg: var(--paper);
  --login-stage-bg: #fbeeea;
  --login-local-bg: #eaf4ff;
  --login-card-bg: var(--card);
  --login-ink: var(--ink);
  --login-soft: var(--muted-strong);
  --login-edge: var(--line-strong);
  --login-input-bg: var(--card);
  --login-rail-bg: var(--harleys-blue-100);
  --login-pillar: #ffffff;
  --login-stage-fill: var(--tone-red-fill);
  --login-local-fill: #1d55b7;
  --login-focus: var(--harleys-blue-800);
}
:root[data-theme='dark'] {
  --login-bg: #102024;
  --login-stage-bg: #2e2224;
  --login-local-bg: #172a3f;
  --login-card-bg: #1b3035;
  --login-ink: #f5fafb;
  --login-soft: #c4d7da;
  --login-edge: #617d82;
  --login-input-bg: #20383d;
  --login-rail-bg: #17494c;
  --login-pillar: #365a5e;
  --login-stage-fill: #aa261e;
  --login-local-fill: #194da9;
  --login-focus: var(--harleys-blue-400);
}
:root {
  --os-ivory: #FAF8F4;
  --os-canvas: #FFFDF9;
  --os-card: #FFFFFF;
  --os-ink: #203339;
  --os-muted: #53686D;
  --os-limpet: var(--harleys-blue-500, #98DDDE);
  --os-limpet-deep: var(--harleys-blue-800, #0C6566);
  --os-pillar: #FFFEFC;
  --os-pillar-edge: #E4D7C4;
  --os-brass: #AD8A54;
  --os-brass-faint: #E7D5B7;
  --os-surface-shadow: 0 4px 18px rgba(29, 59, 58, .08);
  --os-focus: var(--harleys-blue-800, #0C6566);
  --os-heading-font: var(--font-display, 'Newsreader', Georgia, serif);
  --os-body-font: var(--font-body, 'Public Sans', Arial, sans-serif);
}
:root[data-theme='dark'], :root.dark, :root[data-color-mode='dark'] {
  --os-ivory: #14282B;
  --os-canvas: #182E32;
  --os-card: #203A3E;
  --os-ink: #F4F7F5;
  --os-muted: #CEDEDC;
  --os-limpet: var(--harleys-blue-800, #0C6566);
  --os-limpet-deep: var(--harleys-blue-100, #D5F6F7);
  --os-pillar: #1D3539;
  --os-pillar-edge: #607A77;
  --os-brass: #D3B580;
  --os-brass-faint: #7C6A4C;
  --os-surface-shadow: 0 6px 22px rgba(0,0,0,.24);
  --os-focus: var(--harleys-blue-300, #ACE8E8);
}
:root { --os-on-fill: #ffffff; --os-brass-wash: rgba(173, 138, 84, .13); }
/* theme-tokens.css — copied token blocks */
:root {
  --shell-pillar-bg: var(--card);
  --shell-pillar-ink: var(--ink);
  --shell-pillar-cap: var(--brand-chrome-bg);
  --shell-pillar-edge: var(--line-strong);
  --shell-pillar-radius: var(--r-card);
  --shell-beam-bg: var(--brand-chrome-bg);
  --shell-beam-ink: var(--brand-chrome-ink);
  --shell-beam-edge: var(--brand-chrome-line);
  --shell-brass-rule: var(--warning-border);
  --shell-count-bg: var(--harleys-blue-800);
  --shell-count-ink: var(--card);
  --shell-link-ink: var(--harleys-blue-800);
  --shell-muted-ink: var(--muted-strong);
  --shell-focus: var(--harleys-blue-800);
}
:root[data-theme='dark'] {
  --shell-pillar-bg: var(--harleys-blue-900);
  --shell-pillar-ink: var(--harleys-blue-50);
  --shell-pillar-cap: var(--harleys-blue-800);
  --shell-pillar-edge: var(--harleys-blue-700);
  --shell-pillar-radius: var(--r-card);
  --shell-beam-bg: var(--harleys-blue-800);
  --shell-beam-ink: var(--harleys-blue-50);
  --shell-beam-edge: var(--harleys-blue-700);
  --shell-brass-rule: var(--caramel);
  --shell-count-bg: var(--harleys-blue-100);
  --shell-count-ink: var(--harleys-blue-900);
  --shell-link-ink: var(--harleys-blue-50);
  --shell-muted-ink: var(--harleys-blue-100);
  --shell-focus: var(--harleys-blue-300);
}
/* Copied from current app: os-components.css */
/* OS-CHANGE 7: Optional, composable app-wide primitives.
   Import after os-tokens.append.css. Add these classes only when touching a module;
   avoid restyling every existing .card or .button by selector alone.
   The existing app's auth, selectors, charts and routes remain the source of truth. */
.app-shell[data-storefront] .os-card {
  background: var(--os-card);
  color: var(--os-ink);
  border: 1px solid var(--os-pillar-edge);
  border-radius: 14px;
  box-shadow: var(--os-surface-shadow);
  min-width: 0;
}
.app-shell[data-storefront] .os-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--os-pillar-edge);
}
.app-shell[data-storefront] .os-card__body { padding: 16px; }
.app-shell[data-storefront] .os-heading {
  font: 500 clamp(22px, 2vw, 29px)/1.13 var(--os-heading-font);
  color: var(--os-ink);
  margin: 0;
}
.app-shell[data-storefront] .os-subtitle {
  font: 400 13px/1.55 var(--os-body-font);
  color: var(--os-muted);
}
.app-shell[data-storefront] .os-eyebrow {
  font: 700 11px/1.4 var(--os-body-font);
  color: var(--os-limpet-deep);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.app-shell[data-storefront] .os-button {
  appearance: none;
  border: 1px solid var(--os-pillar-edge);
  background: var(--os-card);
  color: var(--os-ink);
  min-height: 44px;
  border-radius: 11px;
  padding: 9px 15px;
  font: 650 13px/1.35 var(--os-body-font);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  text-decoration: none;
}
.app-shell[data-storefront] .os-button--primary {
  color: var(--os-on-fill);
  background: var(--harleys-blue-800);
  border-color: var(--harleys-blue-800);
}
.app-shell[data-storefront] .os-chip {
  min-height: 28px;
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 11px;
  display: inline-flex;
  align-items: center;
  font: 600 12px/1.35 var(--os-body-font);
  color: var(--os-ink);
  background: var(--os-ivory);
  border: 1px solid var(--os-pillar-edge);
}
.app-shell[data-storefront] .os-field {
  min-height: 44px;
  min-width: 0;
  border: 1px solid var(--os-pillar-edge);
  background: var(--os-card);
  color: var(--os-ink);
  border-radius: 10px;
  padding: 10px 12px;
  font: 400 14px/1.4 var(--os-body-font);
}
.app-shell[data-storefront] .os-divider {
  height: 1px;
  width: 100%;
  background: var(--os-pillar-edge);
}
/* Optional palace detail for decorative/overview cards, not dense task rows. */
.app-shell[data-storefront] .os-arch {
  background: var(--os-card);
  border: 1px solid var(--os-brass-faint);
  border-radius: 110px 110px 12px 12px;
  overflow: hidden;
}
/* Chart colours are the existing Lagoon palette; icons/charts should consume
   these semantic vars instead of hard-coded pink or gold from a photograph. */
.app-shell[data-storefront] .os-chart {
  --os-chart-teal: var(--harleys-blue-500);
  --os-chart-pink: var(--strawberry);
  --os-chart-gold: var(--caramel);
  --os-chart-green: var(--pistachio);
  --os-chart-grid: var(--os-pillar-edge);
}
.app-shell[data-storefront] .os-card :is(a,button,input,select,textarea):focus-visible,
.app-shell[data-storefront] :is(.os-button,.os-field):focus-visible {
  outline: 3px solid var(--os-focus);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .app-shell[data-storefront] :is(.os-button,.os-card,.os-chip) {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Copied from current app: os-shell-skin.css */
/* OS-CHANGE 4 — import AFTER existing shell.css. Uses approved storefront 3-column layout; NO grid, route or state replacements. */
@media (min-width: 1024px) {
  .app-shell[data-rail][data-storefront] { background: var(--page-bg); } /* R5: no blanket foreground, so existing white panels keep the app ink; the chrome sets --os-ink itself below */
  .app-shell[data-rail][data-storefront] > .app-header,
  .app-shell[data-rail][data-storefront] > .app-header .topbar {
    background: var(--os-limpet);
    color: var(--os-ink);
  }
  .app-shell[data-rail][data-storefront] .shell-beam-brand {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: auto;
    max-width: 178px;
    min-height: 48px;
    padding: 0 12px;
    gap: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    border-inline-end: 1px solid var(--os-brass);
  }
  .app-shell[data-rail][data-storefront] .shell-os-name {
    display: inline;
    white-space: nowrap;
    font: 700 13px/1.25 var(--os-body-font);
    letter-spacing: .09em;
    color: var(--os-ink);
  }
  .app-shell[data-rail][data-storefront] > main {
    background: var(--page-bg);
    min-width: 0;
  }
  /* Both rails are structurally already matched by shell-grid.css.
     This layer styles pilasters and cornices without repurposing the interaction/scroll elements. */
  .app-shell[data-rail][data-storefront] > .rail,
  .app-shell[data-rail][data-storefront] > .right-rail {
    background-color: var(--os-pillar);
    color: var(--os-ink);
    border-color: var(--os-pillar-edge);
    border-radius: 0;
    box-shadow: inset 3px 0 0 var(--os-brass-wash), inset -3px 0 0 var(--os-brass-wash);
  }
  .app-shell[data-rail][data-storefront] > .rail::before,
  .app-shell[data-rail][data-storefront] > .right-rail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 10px;
    pointer-events: none;
    border-top: 2px solid var(--os-brass-faint);
    border-bottom: 1px solid var(--os-pillar-edge);
  }
  .app-shell[data-rail][data-storefront] > .right-rail .right-rail-head {
    background: var(--os-limpet);
    color: var(--os-ink);
    border-bottom-color: var(--os-brass-faint);
  }
  .app-shell[data-rail][data-storefront] .right-rail-mark {
    background: var(--os-card);
    border-color: var(--os-brass-faint);
  }
  .app-shell[data-rail][data-storefront] .right-rail-mid {
    background: var(--os-pillar);
  }
  .app-shell[data-rail][data-storefront] .right-rail-foot {
    background: var(--os-pillar);
  }
  .app-shell[data-rail][data-storefront] .right-rail-title {
    color: var(--os-ink);
    font-family: var(--os-heading-font);
  }
  .app-shell[data-rail][data-storefront] .right-rail-count {
    background: var(--harleys-blue-800);
    color: var(--os-on-fill);
  }
  /* Ring the existing action controls; leave user-specific theme icons and charts alone. */
  .app-shell[data-rail][data-storefront] .right-rail-link,
  .app-shell[data-rail][data-storefront] .right-rail-toggle,
  .app-shell[data-rail][data-storefront] .right-rail-compact { min-height: 44px; }
}
/* OS-CHANGE 5 — ensure the OS name does not force horizontal scroll in a dense 1024px beam. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .app-shell[data-rail][data-storefront] .shell-beam-brand { padding-inline: 8px; max-width: 140px; gap: 5px; }
  .app-shell[data-rail][data-storefront] .shell-os-name { font-size: 11px; letter-spacing: .03em; }
}
@media (max-width: 1023px) {
  /* The existing phone & tablet shell is a protected path. Brand label below does not mount there. */
  .shell-os-name { display: none; }
}
@media (min-width: 1024px) {
  /* R5: the OS ring only on the OS-themed chrome (beam, both rails); page content keeps each component's own ring */
  .app-shell[data-rail][data-storefront] > .app-header button:focus-visible,
  .app-shell[data-rail][data-storefront] > .app-header a:focus-visible,
  .app-shell[data-rail][data-storefront] > .rail button:focus-visible,
  .app-shell[data-rail][data-storefront] > .rail a:focus-visible,
  .app-shell[data-rail][data-storefront] > .right-rail button:focus-visible,
  .app-shell[data-rail][data-storefront] > .right-rail a:focus-visible {
    outline: 3px solid var(--os-focus);
    outline-offset: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell[data-rail][data-storefront] *, .app-shell[data-rail][data-storefront] *::before, .app-shell[data-rail][data-storefront] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Copied from current app: acct-staff.css */
/* ACCT-S3-L3: the Accountability Engine staff screens (journey, step, PIN sheet, Cannot, verify, handover, summary, Kiosk board, roll-up).
   WhatsApp-familiar and ground-level: 18px body, 56px primary buttons, one state line in words, full-width cards; tokens only (theme.css), both
   themes. Built for 320 / 360 / 390 px first (no horizontal scroll: every text wraps, every row stacks under 360px). No new colours: severity
   tones reuse the theme's red / strawberry / positive tokens. */
.acct { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin: 0 auto; padding: 12px; font: 400 18px/1.4 var(--font-body); color: var(--ink); }
.acct h1, .acct h2 { margin: 0; font: 800 22px/1.2 var(--font-display, var(--font-body)); overflow-wrap: anywhere; }
.acct h3 { margin: 0; font: 700 18px/1.3 var(--font-body); overflow-wrap: anywhere; }
.acct .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.acct small, .acct-small { font-size: 14px; color: var(--muted-strong); }
.acct-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: 14px; }
.acct-card[data-state='available'], .acct-card[data-state='claimed'], .acct-card[data-state='in_progress'] { border-left-color: var(--strawberry); }
.acct-card[data-state='submitted'] { border-left-color: var(--blue-deep); }
.acct-card[data-state='complete'] { border-left-color: var(--positive); }
.acct-card[data-state='cannot'] { border-left-color: var(--tone-red-edge); }
.acct-card[data-late='true'] { border-left-color: var(--tone-red-edge); }
.acct-state { margin: 0; font-weight: 700; }
.acct-due { margin: 0; font-size: 14px; color: var(--muted-strong); }
.acct-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--strong, var(--line)); background: var(--card); color: var(--ink); font: 700 18px var(--font-body); cursor: pointer; text-align: center; }
.acct-btn.primary { background: var(--strawberry-deep); border-color: var(--strawberry-deep); color: #fff; }
.acct-btn.quiet { border-color: transparent; background: var(--blue-pale); }
.acct-btn.danger { border-color: var(--tone-red-edge); color: var(--tone-red-edge); }
.acct-btn:disabled { opacity: .6; cursor: default; }
.acct-btn:focus-visible, .acct-input:focus-visible, .acct-choice:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.acct-row { display: flex; gap: 8px; flex-wrap: wrap; }
.acct-row > .acct-btn { flex: 1 1 140px; }
.acct-field { display: flex; flex-direction: column; gap: 4px; }
.acct-field label { font-weight: 700; }
.acct-input { min-height: 56px; padding: 0 12px; border: 1px solid var(--strong, var(--line)); border-radius: 12px; background: var(--card); color: var(--ink); font: 600 22px var(--font-body); width: 100%; box-sizing: border-box; }
.acct-input.note { font-size: 18px; font-weight: 400; }
.acct-flag { display: flex; gap: 10px; align-items: center; min-height: 56px; padding: 0 4px; font-weight: 700; }
.acct-flag input { width: 28px; height: 28px; flex: none; }
.acct-choices { display: flex; flex-direction: column; gap: 8px; }
.acct-choice { display: flex; align-items: center; min-height: 56px; padding: 0 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--card); font: 700 18px var(--font-body); text-align: left; cursor: pointer; color: var(--ink); }
.acct-choice[aria-pressed='true'], .acct-choice[aria-checked='true'] { border-color: var(--blue-deep); background: var(--blue-pale); }
.acct-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--tone-red-bg, #fdecec); color: var(--tone-red-edge); font-weight: 700; }
.acct-ok { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--blue-pale); font-weight: 700; }
.acct-draft-chip { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--muted-strong); font: 800 10px/1.4 var(--font-body); letter-spacing: .06em; color: var(--muted-strong); vertical-align: middle; }
.acct-saved { margin: 0; padding: 10px 12px; border: 1px dashed var(--strong, var(--line)); border-radius: 10px; font-weight: 700; }
/* PIN sheet: a bottom sheet over the page, the digits and the sentence over them */
.acct-sheet-back { position: fixed; inset: 0; z-index: var(--z-popover, 62); background: rgba(0, 0, 0, .45); display: flex; align-items: flex-end; justify-content: center; }
.acct-sheet { width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; padding: 16px; background: var(--card); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; }
.acct-sheet .sentence { margin: 0; font-weight: 800; font-size: 20px; overflow-wrap: anywhere; }
.acct-pin-dots { display: flex; gap: 10px; justify-content: center; min-height: 28px; }
.acct-pin-dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink); }
.acct-pin-dots i[data-on='true'] { background: var(--ink); }
.acct-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.acct-pad button { min-height: 56px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); font: 800 24px var(--font-body); color: var(--ink); cursor: pointer; }
.acct-pad button:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }
/* summary and roll-up tables */
.acct-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.acct-totals li { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.acct-totals b { display: block; font-size: 26px; line-height: 1.1; }
.acct-totals span { font-size: 14px; color: var(--muted-strong); overflow-wrap: anywhere; }
.acct-table-wrap { overflow-x: auto; }
.acct-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.acct-table th, .acct-table td { padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--line); }
.acct-table td.n, .acct-table th.n { text-align: right; font-variant-numeric: tabular-nums; }
.acct-banner { padding: 12px; border-radius: 12px; background: var(--blue-pale); font-weight: 700; }
.acct-banner[data-tone='warn'] { background: var(--tone-red-bg, #fdecec); color: var(--tone-red-edge); }
/* Kiosk board: wall screen, large type, names as big tap targets */
.acct-board { max-width: 960px; font-size: 22px; }
.acct-board h1 { font-size: 32px; }
.acct-board-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.acct-board-counts li { padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); text-align: center; }
.acct-board-counts b { display: block; font-size: 40px; line-height: 1.1; }
.acct-names { display: flex; flex-wrap: wrap; gap: 10px; }
.acct-names .acct-btn { width: auto; flex: 1 1 160px; min-height: 72px; font-size: 24px; }
/* Needs-you tile */
.acct-tile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-left: 5px solid var(--strawberry); border-radius: 12px; background: var(--card); }
.acct-tile[data-clear='true'] { border-left-color: var(--positive); }
.acct-tile .text { flex: 1 1 180px; min-width: 0; }
.acct-tile .text b { display: block; font-size: 16px; overflow-wrap: anywhere; }
.acct-tile .acct-btn { width: auto; min-height: 44px; font-size: 16px; flex: none; }
@media (max-width: 360px) {
  .acct { padding: 8px; font-size: 17px; }
  .acct-board-counts { grid-template-columns: repeat(2, 1fr); }
  .acct-tile .acct-btn { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) { .acct-sheet { animation: acct-up .15s ease-out; } }
@keyframes acct-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }

/* Walkthrough framing; app content above retains its own real classes. */
:root{--bg:var(--os-ivory);--brand:var(--blue-deep);--onbrand:var(--card);--sand:var(--warning-bg);--amber:var(--ink-soft)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--os-ivory);color:var(--ink);font:16px/1.5 var(--font-body);overflow-wrap:anywhere}a{color:var(--blue-deep)}
.ribbon{padding:7px 12px;background:var(--warning-bg);border-bottom:1px solid var(--warning-border);text-align:center;font-size:12px;font-weight:700}
.top,.wrap{width:100%;max-width:422px;margin:auto;padding:12px 16px}.wrap{padding-bottom:36px}.brand{font:700 14px var(--font-body);letter-spacing:.08em}.top h1{font:600 26px/1.15 var(--font-display);margin:8px 0}.top p{margin:0;color:var(--muted-strong);font-size:14px}
.phone{width:100%;max-width:390px;margin:auto;min-height:540px;position:relative;display:flex;flex-direction:column;background:var(--os-ivory);border:1px solid var(--os-pillar-edge);border-radius:18px;overflow:hidden;box-shadow:var(--os-surface-shadow)}
.phone .topbar{height:auto;min-height:56px;flex:none;background:var(--os-limpet);color:var(--os-ink);padding:10px 12px;gap:8px}.phone .topbar h2{font:500 22px/1.15 var(--font-display);margin:0}.phone .topbar small{font:12px var(--font-body)}.phone .topbar .bell{padding:5px 9px;white-space:nowrap;font-size:11px}
.phone .env-strip{background:var(--strawberry-deep);color:white;font-size:10px;letter-spacing:.05em}.phone .screen{flex:1;width:100%;min-width:0;padding:12px;display:flex;flex-direction:column;gap:12px}.phone .screen>h1{font-size:24px}.phone p{margin:0}.phone .legacy{font-size:15px}.phone .legacy .card{margin:0 0 12px}.phone .legacy h3{margin:0 0 8px;font:600 21px var(--font-display)}
.phone .bottombar{position:static;padding:8px 6px 12px;flex:none;background:var(--os-limpet)}.phone .bottombar ul{padding:4px;gap:0}.phone .bottombar li{min-width:0;flex:1;padding:6px 2px;font-size:11px}.phone .bottombar li i{font-size:18px}.phone .bottombar li.on{background:var(--os-card);color:var(--os-limpet-deep)}
.phone .row:not(.legacy .row){display:block}.phone .row b,.phone .row small{display:block}.phone .row small{font-size:14px;color:var(--muted-strong)}.phone .badge{display:block;font-weight:700;font-size:16px}.phone .msg{padding:12px;border-radius:10px;background:var(--blue-pale)}.phone .msg.warn{background:var(--warning-bg)}.phone .msg.bad{background:var(--tone-red-bg);color:var(--tone-red-ink)}
.sample{font-size:11px;color:var(--muted-strong);padding:6px 8px;border:1px dashed var(--line-strong);border-radius:6px;background:var(--card)}
.phone .field{min-height:56px;border:1px solid var(--line);padding:12px;border-radius:12px;background:var(--card)}.phone .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.phone .num{font-size:26px;font-weight:800}.phone .pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.phone .pad span{border:1px solid var(--line);padding:10px;text-align:center;border-radius:14px;background:var(--card);font-size:24px}.phone .dots{text-align:center;letter-spacing:8px}
.phone .acct-sheet-back{position:relative;inset:auto;display:block;padding-top:40px;margin:-12px;background:rgba(0,0,0,.25)}.phone .acct-sheet{max-height:none;overflow:visible}.phone .acct-sheet h2{margin:0}.phone .acct-totals{grid-template-columns:repeat(2,minmax(0,1fr))}.phone .acct-btn{height:auto;padding:12px;font-size:18px}.phone .acct-card{margin:0}.phone .acct-state{border-radius:0;padding:0;background:none;color:var(--ink)}
.phone .actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.phone .legacy button{min-height:48px;border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:var(--card);color:var(--ink);font:600 15px var(--font-body)}.phone .legacy button.primary{background:var(--blue-deep);color:var(--card)}.phone .legacy .big{width:100%;min-height:56px}.phone .legacy .waiting{background:var(--warning-bg)}.phone .legacy .receipt{padding:12px;background:var(--positive-bg);border-radius:10px}.phone .legacy .mask{text-align:center;font-size:28px;letter-spacing:10px}.phone .legacy .login{padding:16px;margin:8px 0}.phone .legacy .chain{padding-left:20px}.phone .legacy button:disabled{opacity:.55}
.s{margin-bottom:24px}.cap{padding:16px 2px 0}.cap h2{font-size:18px;line-height:1.3;margin:0 0 8px}.cap p{margin:7px 0}.cap .k{font-weight:700;color:var(--blue-deep)}.nav,.dotrow{display:none}.js .s{display:none}.js .s.on{display:block}.js .nav{display:flex;gap:10px}.nav button{flex:1;min-height:52px;border:1px solid var(--blue-deep);border-radius:12px;background:var(--blue-deep);color:var(--card);font:700 17px var(--font-body)}.nav .back{background:var(--card);color:var(--blue-deep)}.nav button:disabled{opacity:.4}.js .dotrow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px 0}.dotrow i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}.dotrow i.on{background:var(--blue-deep)}.home{display:block;text-align:center;margin:20px 0}.try{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card)}.bigbtn{display:block;text-align:center;text-decoration:none;padding:16px 12px;background:var(--blue-deep);color:var(--card);border-radius:12px;margin:12px 0;font-weight:700}.bigbtn small{display:block;font-weight:400}a.bigbtn:visited{color:var(--card)}a:focus-visible,button:focus-visible{outline:3px solid var(--blue-deep);outline-offset:3px}.theme-toggle{margin-top:10px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
@media(max-width:360px){.top,.wrap{padding-left:8px;padding-right:8px}.phone .screen{padding:8px}.phone .topbar h2{font-size:20px}}

/* Narrow phone containment and the board's real two-column phone layout. */
.phone .acct-board-counts{grid-template-columns:repeat(2,minmax(0,1fr));font-size:14px}.phone .acct-board-counts b{font-size:32px}.phone .acct-field,.phone .acct-card,.phone .acct-row{min-width:0}.phone .acct-pad{grid-template-columns:repeat(3,minmax(0,1fr))}.phone .acct-pad button{min-width:0}.phone .acct-state.badge{font-size:18px}.phone .legacy .row{display:flex}.phone .legacy .row .t{min-width:0}.phone .legacy .tag{white-space:normal}.phone .legacy .sec{flex-wrap:wrap}.phone .acct-input{min-width:0;max-width:100%}.phone .acct-card h3{margin:0}.phone .acct-state.badge.ok,.phone .acct-state.badge.late,.phone .acct-state.badge.bad{background:none;color:var(--ink)}