/* ============================================================================
   SunMat ONE Theme — the shared Suntec app theme (from Suntec Dispatch)
   plus the pieces this app adds: the customer sign-in card, the mix picker,
   and the integration outbox grid. Sunmat additions are at the bottom under
   "SUNMAT ADDITIONS" — keep the shared block above in sync with the kit.
   ----------------------------------------------------------------------------
   Component inventory:
     header/.brand/.user/.avatar · .roleswitch (admin view-as)
     .hero (+.filters pills) · .viewnav (.nav-btn/.nbadge)
     .section-label · .grp/.stat (KPI cards) · .tabs/.tab/.badge
     .req-card family (queue cards) · .chip (status chips) · .chgtype (toggle chips)
     .form-card/.fgrid/.field (forms) · .wsteps (wizard) · .svcgrid/.svcpick
     .overlay/.modal (detail/edit sheets) · .diff (label/value + old→new tables)
     .bnav/.bcard (schedule cards) · .cal-* (week/month calendar grids)
     .tl (timeline) · .chg-card (change queue) · .sc-table/.grade (report grids)
     .evt-card (event log) · .btn-* (actions) · .banner/.empty/.loading
   ============================================================================ */

/* ============================================================================
   TOKENS — "Obsidian" (design handoff v2, 2026-09-21; docs/DESIGN-4A.md).
   Dark is the default; light is the same markup with data-theme="light" on
   <html>. Every colour in this file resolves through a semantic token below,
   values verbatim from the handoff table. Tokens the handoff does not name but
   this codebase already uses (--danger*, --idle-*, --banner-*, --notice-card*,
   --json-line, --chev, --accent-solid, --shadow) are DERIVED from the named
   ones right after each block, so a palette change stays a one-table edit.
   The old alias names (--brand, --steel, --form-line, --slab-bg …) are kept as
   REMAPS so the shared component rules further down follow the theme.
   ============================================================================ */
:root, [data-theme="dark"] {
  --bg:#08090B; --bg-sunk:#0B0D10; --surface:#101215; --surface-2:#16181C; --rail:#08090B;
  --line:#1D2025; --line-soft:#16181C; --grid:#131619; --road:#2A2E35;
  --ink:#FAFAFA; --ink-2:#E8EAED; --muted:#989EA6; --muted-2:#A9AEB5; --faint:#2C2F35;
  --accent:#FF7A33; --accent-ink:#14161A; --accent-bg:#2B1A10; --accent-fg:#FF9A5F;
  --notice-bg:#14100D; --notice-line:#2B1A10; --notice-sub:#C4AC99; --notice-ghost:#4A3526; --notice-ghost-ink:#E8D5C6;
  --info:#5C9BDD; --ok-bg:#11291D; --ok-fg:#4FCF8C; --neutral-bg:#1B1E23; --neutral-fg:#A9AEB5;
  --btn-primary:#FAFAFA; --btn-primary-ink:#08090B; --btn-ghost-line:#2C2F35; --btn-ghost-ink:#D6DAE0;
  --chip-on:#FAFAFA; --chip-on-ink:#08090B; --chip-off:#16181C; --chip-off-ink:#A9AEB5;
  --json-bg:#07090C; --json-key:#93ABC4; --json-str:#E8A87C; --json-num:#7FB6E8; --json-punc:#A6BBD2;
  --logo-light:1; --logo-dark:0;
  /* derived */
  --danger-bg:#2B1214; --danger-fg:#F08A8A; --danger:#E24B4A;
  --shadow:none;
  color-scheme:dark;
}
[data-theme="light"] {
  --bg:#F5F7F9; --bg-sunk:#E9EDF2; --surface:#FFFFFF; --surface-2:#F0F3F7; --rail:#FFFFFF;
  --line:#E3E8EE; --line-soft:#EDF0F4; --grid:#DEE4EB; --road:#C7D1DC;
  --ink:#0B0D10; --ink-2:#2A2E35; --muted:#566373; --muted-2:#4E5C6C; --faint:#D3DAE2;
  --accent:#C05020; --accent-ink:#FFFFFF; --accent-bg:#FBEDE6; --accent-fg:#8C3A14;
  --notice-bg:#FFF8F4; --notice-line:#EFD9CB; --notice-sub:#566373; --notice-ghost:#C9AF9C; --notice-ghost-ink:#6B4227;
  --info:#0F5390; --ok-bg:#E4F1EA; --ok-fg:#1F6B46; --neutral-bg:#EDF1F5; --neutral-fg:#4E5C6C;
  --btn-primary:#0B0D10; --btn-primary-ink:#FFFFFF; --btn-ghost-line:#D3DAE2; --btn-ghost-ink:#2A2E35;
  --chip-on:#0B0D10; --chip-on-ink:#FFFFFF; --chip-off:#EDF1F5; --chip-off-ink:#4E5C6C;
  --json-bg:#FFFFFF; --json-key:#566373; --json-str:#A8441A; --json-num:#0F5390; --json-punc:#2A2E35;
  --logo-light:0; --logo-dark:1;
  /* derived */
  --danger-bg:#FBEAEA; --danger-fg:#8C1A17; --danger:#B3231F;
  --shadow:0 1px 2px rgba(11,13,16,.08);
  color-scheme:light;
}
:root{
  /* derived from the named tokens — both themes */
  --accent-solid:var(--accent); --chev:var(--faint);
  --idle-bg:var(--neutral-bg); --idle-fg:var(--neutral-fg);
  --banner-bg:var(--bg); --banner-line:var(--line); --banner-fg:var(--muted);
  --notice-card:var(--notice-bg); --notice-card-line:var(--notice-line); --notice-title:var(--accent-fg);
  --json-line:var(--line);
}
:root{
  /* brand constants — never themed; solid fills only */
  --sunmat-navy:#103058; --sunmat-blue:#105898; --sunmat-orange:#C05020;
  --sunmat-navy-deep:var(--rail);
  /* type */
  --fb:'Instrument Sans',system-ui,-apple-system,sans-serif;  /* everything a person reads */
  --fh:var(--fb);                                              /* titles — same face, tracked tight */
  --fn:var(--fb);                                              /* uppercase micro-labels (same face, wide tracking) */
  --fm:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace; /* every compared number */
  --radius:8px;
  /* ---- remaps: the old alias vocabulary → the new tokens ---- */
  --brand:var(--info); --brand-dark:var(--info); --brand-tint:var(--surface-2);
  --accent-dark:var(--accent-solid);
  --danger-dark:var(--danger-fg);
  --charcoal:var(--surface-2); --steel:var(--muted);
  --form-line:var(--line); --slab-bg:var(--bg-sunk);
  --good:var(--ok-fg); --good-bg:var(--ok-bg);
}
*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none !important;}
body{font-family:var(--fb);background:var(--bg);color:var(--ink-2);font-size:14px;line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased;transition:background .18s ease,color .18s ease;}

/* ============================================================================
   SHELL — persistent 238px sidebar + content column (handoff §1). Same DOM for
   both audiences; role changes the nav contents only. No hover-expand.
   ============================================================================ */
.shell{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh;}
.shell.noauth{grid-template-columns:minmax(0,1fr);}
.shell.noauth .rail{display:none;}
.stage{min-width:0;display:flex;flex-direction:column;}

.rail{background:var(--rail);border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;gap:26px;
  position:sticky;top:0;height:100vh;overflow-y:auto;}
.rail .logo{position:relative;height:19px;margin:2px 8px 0;display:block;}
.rail .logo img{position:absolute;top:0;left:0;width:128px;height:auto;transition:opacity .18s ease;}
.rail .logo .lg-light{opacity:var(--logo-light);}
.rail .logo .lg-dark{opacity:var(--logo-dark);}
/* command bar — opens the ⌘K palette over orders, jobs and tickets */
.cmdbar{height:36px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:10px;border:1px solid var(--line);background:var(--surface);cursor:pointer;width:100%;text-align:left;font:400 13px/1 var(--fb);color:var(--muted);transition:background .18s ease,color .18s ease;}
.cmdbar:hover{background:var(--surface-2);color:var(--ink);}
.cmdbar kbd{font:500 11px/1 var(--fm);color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:3px 5px;}
.rail-nav{display:flex;flex-direction:column;gap:1px;}
.rail-grp{font:500 10px/1 var(--fn);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:0 12px 10px;}
.rail-grp:not(:first-child){padding-top:20px;}
.rail-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;
  background:none;border:none;border-radius:9px;padding:10px 12px;cursor:pointer;
  font:500 14px/1 var(--fb);color:var(--muted-2);transition:background .18s ease,color .18s ease;}
.rail-btn .el{display:flex;align-items:center;gap:10px;min-width:0;}
.rail-btn .el::before{content:"";width:5px;height:5px;border-radius:3px;background:var(--faint);flex:0 0 5px;transition:background .18s ease;}
.rail-btn.compact{padding:9px 12px;}
.rail-btn:hover{background:var(--surface-2);color:var(--ink);}
.rail-btn.on{background:var(--surface-2);color:var(--ink);font-weight:600;}
.rail-btn.on .el::before{background:var(--accent);}
.rail-btn .eb{background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:2px 7px;font:700 11px/1 var(--fb);}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:24px;}
.rail-user{display:flex;align-items:center;gap:9px;padding:0 4px;font-size:12.5px;color:var(--muted);min-width:0;}
.rail-user .who{min-width:0;flex:1;}
.rail-user .who b{display:block;color:var(--ink-2);font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rail-user .who span{display:block;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rail-user a{color:var(--info);text-decoration:none;font-weight:600;font-size:12px;white-space:nowrap;cursor:pointer;}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--sunmat-navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:700 11px/1 var(--fb);letter-spacing:.04em;flex:0 0 30px;}
.rail-lbl{font:500 10px/1 var(--fn);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:0 6px;}
/* theme toggle: a two-segment pill in a 99px track, sits directly above "View as" */
.theme-seg{display:flex;align-items:center;gap:6px;padding:4px;border-radius:99px;border:1px solid var(--line);background:var(--surface);align-self:flex-start;}
.theme-seg button{height:32px;padding:0 15px;display:flex;align-items:center;border-radius:99px;border:none;background:transparent;color:var(--muted);font:600 13px/1 var(--fb);cursor:pointer;transition:background .18s ease,color .18s ease;}
.theme-seg button.on{background:var(--btn-primary);color:var(--btn-primary-ink);}
.seg{display:flex;gap:5px;flex-wrap:wrap;}
.seg button,.seg a{padding:6px 10px;border-radius:99px;border:none;cursor:pointer;font:500 11px/1 var(--fb);background:var(--chip-off);color:var(--chip-off-ink);text-decoration:none;transition:background .18s ease,color .18s ease;}
.seg .on{background:var(--chip-on);color:var(--chip-on-ink);font-weight:600;}
.demo-badge,.pv-badge{display:inline-block;background:var(--accent-bg);color:var(--accent-fg);border-radius:99px;padding:4px 10px;font:600 10.5px/1 var(--fn);letter-spacing:.08em;text-transform:uppercase;}

/* sample-data banner: full width above the content column, driven by sampleGate */
.sample-banner{background:var(--bg);border-bottom:1px solid var(--line);padding:11px 32px;display:flex;align-items:center;gap:10px;font:400 12px/1.4 var(--fb);color:var(--muted);}
.sample-banner::before{content:"";width:6px;height:6px;border-radius:3px;background:var(--accent);flex:0 0 6px;}
.sample-banner .mono{font-family:var(--fm);font-size:11px;color:var(--ink-2);}

/* page header (was .hero): eyebrow · title · sub, actions right */
.hero{padding:22px 28px;border-bottom:1px solid var(--line);background:var(--bg);}
.hero.big{padding:34px 32px 30px;border-bottom:none;}
.hero.big h1{font:600 42px/1.05 var(--fh);letter-spacing:-.035em;}
.hero.big .eyebrow{font:500 12px/1 var(--fn);letter-spacing:.1em;margin-bottom:12px;}
.hero.big p{font-size:14px;margin-top:10px;}
@media(max-width:700px){.hero.big h1{font-size:30px;}.hero.big{padding:26px 16px 22px;}}
.hero-inner{max-width:none;margin:0;padding:0;}
.hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.hero .eyebrow{font:500 11px/1 var(--fn);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
.hero h1{font:600 24px/1.15 var(--fh);letter-spacing:-.028em;color:var(--ink);text-transform:none;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero p{font:400 13px/1.5 var(--fb);color:var(--muted);margin-top:7px;max-width:720px;}
#heroAction{display:flex;gap:10px;align-items:center;flex:none;flex-wrap:wrap;}
.filters{margin-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.filters .lbl{font:600 11px/1 var(--fn);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:2px;}
.pill{font:500 12px/1 var(--fb);color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:8px 14px;cursor:pointer;transition:background .18s ease,color .18s ease;}
.pill:hover{color:var(--ink);background:var(--surface-2);}
.pill.on{background:var(--chip-on);border-color:var(--chip-on);color:var(--chip-on-ink);}
/* the header's primary action */
.cal-jump{height:42px;padding:0 22px;display:inline-flex;align-items:center;border-radius:99px;border:none;background:var(--btn-primary);color:var(--btn-primary-ink);font:600 14px/1 var(--fb);cursor:pointer;white-space:nowrap;transition:filter .18s ease;}
.cal-jump:hover{filter:brightness(.94);}
.cal-jump.ghost{background:transparent;border:1px solid var(--btn-ghost-line);color:var(--btn-ghost-ink);font-weight:500;padding:0 18px;}
.cal-jump.ghost:hover{filter:none;background:var(--surface-2);}

main{flex:1;width:100%;max-width:none;margin:0;padding:22px 28px 40px;min-width:0;}
footer{border-top:1px solid var(--line);background:var(--bg);}
.foot-inner{max-width:none;margin:0;padding:14px 28px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.foot-inner a{color:var(--info);}

.section-label{font:500 11px/1 var(--fn);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:26px 0 10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.section-label:first-child{margin-top:4px;}
.section-label::before{content:none;}
.section-label .note{font:500 12px/1.3 var(--fb);color:var(--muted);letter-spacing:0;text-transform:none;}

/* mobile: the rail becomes an overlay drawer below 1024px */
.railbar{display:none;}
@media(max-width:1024px){
  .shell{grid-template-columns:minmax(0,1fr);}
  .rail{position:fixed;left:0;top:0;bottom:0;width:268px;z-index:60;transform:translateX(-100%);transition:transform .18s ease;border-right:1px solid var(--line);}
  .shell.drawer .rail{transform:none;}
  .railbar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--rail);}
  .railbar button{background:none;border:1px solid var(--btn-ghost-line);color:var(--btn-ghost-ink);border-radius:99px;width:44px;height:44px;font-size:18px;cursor:pointer;}
  .railbar .logo{position:relative;height:20px;display:block;}
  .railbar .logo img{position:absolute;left:0;top:0;width:128px;height:auto;}
  .railbar .lg-light{opacity:var(--logo-light);}
  .railbar .lg-dark{opacity:var(--logo-dark);}
  .hero,main,.foot-inner,.sample-banner{padding-left:16px;padding-right:16px;}
}



/* ---------- KPI stat cards (restyled in the 4a overrides at the end) ---------- */
.grp{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;margin-bottom:6px;}
.grp-head{font-family:var(--fh);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal);margin:14px 0 7px;}
.grp-head .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:middle;}
.stat{background:var(--surface);border:1px solid var(--form-line);border-left:4px solid var(--form-line);border-radius:var(--radius);padding:12px 14px;cursor:pointer;transition:.12s;text-align:left;}
.stat:hover{border-color:var(--brand);border-left-color:var(--brand);transform:translateY(-1px);}
.stat .n{font-family:var(--fh);font-weight:700;font-size:30px;line-height:1;color:var(--steel);font-variant-numeric:tabular-nums;}
.stat.hot .n{color:var(--accent-dark);}
.stat.hot{border-left-color:var(--accent);}
.stat .k{font-family:var(--fh);font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel);margin-top:5px;line-height:1.25;}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--form-line);}
.tab{font-family:var(--fh);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);background:none;border:none;border-bottom:3px solid transparent;padding:11px 16px;margin-bottom:-2px;cursor:pointer;}
.tab:hover{color:var(--ink);}
.tab.on{color:var(--brand);border-bottom-color:var(--brand);}
.tab .badge{display:inline-block;background:var(--slab-bg);color:var(--steel);font-size:11px;border-radius:999px;padding:1px 8px;margin-left:6px;font-family:var(--fb);font-weight:700;}
.tab.on .badge{background:var(--brand);color:#fff;}

/* ---------- tables (report/admin grids) ---------- */
table{border-collapse:collapse;width:100%;font-size:14px;}
.tbl-wrap{background:var(--surface);border:1px solid var(--form-line);border-radius:var(--radius);overflow-x:auto;}
.tbl-wrap table{min-width:820px;} /* wide-scroll grids only — NOT modal detail tables */
thead th{font-family:var(--fh);font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--steel);text-align:left;padding:11px 14px;border-bottom:1px solid var(--form-line);white-space:nowrap;}
tbody td{padding:11px 14px;border-bottom:1px solid #F0EEE9;vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
.sc-table th{padding:9px 12px;}
.sc-table td{padding:10px 12px;}
.sc-table tbody tr{cursor:pointer;}
.sc-table tbody tr:hover{background:var(--brand-tint);}
.sc-table tbody tr.bad{border-left:3px solid #E24B4A;}
.grade{font-size:12px;padding:2px 9px;border-radius:10px;font-weight:700;white-space:nowrap;}
.grade-a{background:#EAF3DE;color:#27500A;}
.grade-b{background:#FAEEDA;color:#633806;}
.grade-c{background:#FAEEDA;color:#8a5a10;}
.grade-d{background:#FCEBEB;color:#791F1F;}

/* label/value + old→new diff table (modal detail, review summaries) */
.diff{width:100%;border-collapse:collapse;font-size:13px;margin:4px 0 12px;}
.diff th{text-align:left;font-family:var(--fh);font-weight:600;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);padding:4px 10px;border-bottom:1px solid var(--form-line);}
.diff td{padding:6px 10px;border-bottom:1px solid #f0eee9;vertical-align:top;}
.diff .fld{font-weight:600;}
.diff .from{color:var(--steel);text-decoration:line-through;}
.diff .to{color:var(--good);font-weight:700;}

/* ---------- queue cards ---------- */
.req-list{display:flex;flex-direction:column;gap:10px;}
.req-card{background:var(--surface);border:1px solid var(--form-line);border-left:4px solid var(--steel);border-radius:var(--radius);padding:14px 16px;display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;}
.req-card.new{border-left-color:var(--brand);}
.req-main{flex:1;min-width:260px;}
.req-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.req-id{font-family:var(--fh);font-weight:700;font-size:12px;letter-spacing:.05em;color:var(--steel);}
.req-job{font-family:var(--fh);font-weight:700;font-size:17px;letter-spacing:.02em;}
.req-sub{color:var(--steel);font-size:13px;margin-top:2px;}
.req-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;}
.req-actions{display:flex;gap:8px;align-items:center;}
.reg{font-family:var(--fh);font-weight:700;font-size:11px;letter-spacing:.05em;padding:2px 7px;border-radius:4px;background:var(--slab-bg);color:var(--charcoal);}

/* status chips: gray draft · blue submitted · amber review · red urgent · green done */
.chip{display:inline-block;font-family:var(--fh);font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;border-radius:10px;padding:3px 10px;}
.chip-gray{background:#efedea;color:var(--steel);}
.chip-blue{background:#e3edf6;color:#1f4e79;}
.chip-amber{background:#FAEEDA;color:#633806;}
.chip-red{background:#FCEBEB;color:#791F1F;}
.chip-green{background:#EAF3DE;color:#27500A;}

/* selectable toggle chips (what's-changing, issue flags) */
.chgtype{display:inline-block;font-family:var(--fh);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--form-line);border-radius:12px;padding:5px 13px;cursor:pointer;background:#fff;color:var(--steel);}
.chgtype.on{background:var(--brand);border-color:var(--brand);color:#fff;}

/* ---------- buttons ---------- */
.btn-create{font-family:var(--fh);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;background:var(--brand);color:#fff;border:none;border-radius:6px;padding:9px 15px;cursor:pointer;}
.btn-create:hover{background:var(--brand-dark);}
.btn-del{font-family:var(--fh);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;background:#fff;color:var(--steel);border:1px solid var(--form-line);border-radius:6px;padding:9px 13px;cursor:pointer;}
.btn-del:hover{border-color:var(--brand);color:var(--brand);}
.btn-submit{font-family:var(--fh);font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;background:var(--brand);color:#fff;border:none;border-radius:6px;padding:12px 24px;cursor:pointer;}
.btn-submit:hover{background:var(--brand-dark);}
.btn-ghost{font-family:var(--fh);font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;background:#fff;color:var(--charcoal);border:1px solid var(--form-line);border-radius:6px;padding:12px 20px;cursor:pointer;}
.btn-approve{font-family:var(--fh);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;background:var(--good);color:#fff;border:none;border-radius:6px;padding:9px 15px;cursor:pointer;}
.btn-approve:hover{background:#155f33;}

/* ---------- forms ---------- */
.form-card{background:var(--surface);border:1px solid var(--form-line);border-radius:var(--radius);padding:22px 24px;max-width:760px;}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;}
.field{display:flex;flex-direction:column;gap:5px;}
.field.full{grid-column:1/-1;}
.field label{font-family:var(--fh);font-weight:600;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--steel);}
.field label .req{color:var(--brand);}
.field input,.field select,.field textarea{font-family:var(--fb);font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--form-line);border-radius:6px;padding:9px 11px;width:100%;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);}
.field textarea{resize:vertical;min-height:60px;}
.form-section{border-top:1px solid var(--form-line);margin-top:20px;padding-top:16px;}
.form-section h3{font-family:var(--fh);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;}
.form-foot{display:flex;gap:10px;margin-top:22px;}
.form-ok{background:var(--good-bg);border:1px solid #bfe0cc;color:var(--good);border-radius:6px;padding:12px 14px;margin-bottom:16px;font-weight:600;font-size:14px;}

/* wizard step bar */
.wsteps{display:flex;gap:6px;margin-bottom:8px;}
.wstep{flex:1;height:4px;border-radius:2px;background:var(--form-line);}
.wstep.on{background:var(--brand);}
.wstep-label{font-size:12px;color:var(--steel);margin-bottom:16px;}

/* service/type picker cards */
.svcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;}
.svcpick{background:var(--surface);border:1px solid var(--form-line);border-radius:8px;padding:14px 12px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:4px;transition:.12s;}
.svcpick:hover{border-color:var(--brand);}
.svcpick.on{border-color:var(--brand);background:var(--brand-tint);box-shadow:inset 0 0 0 1px var(--brand);}
.svcpick .svcname{font-family:var(--fh);font-weight:700;font-size:15px;letter-spacing:.03em;text-transform:uppercase;}
.svcpick.on .svcname{color:var(--brand-dark);}
.svcpick .svclead{font-size:11px;color:var(--steel);}

/* current → requested rows (change sheets) */
.chg-arrow{display:flex;gap:10px;align-items:center;}
.chg-arrow .field{flex:1;}

/* ---------- modal overlay ---------- */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(22,22,22,.55);display:flex;align-items:flex-start;justify-content:center;padding:34px 18px;overflow-y:auto;}
.overlay[hidden]{display:none;}
.modal{background:#fff;border-radius:12px;width:640px;max-width:100%;box-shadow:0 18px 60px rgba(0,0,0,.35);}
.mhead{background:var(--ink);color:#fff;padding:15px 20px;border-bottom:3px solid var(--brand);border-radius:12px 12px 0 0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.mhead .mt{font-family:var(--fh);font-weight:700;font-size:20px;letter-spacing:.04em;text-transform:uppercase;}
.mhead .ms{color:#b9b8b4;font-size:13px;margin-top:3px;}
.mhead button{background:none;border:none;color:#fff;font-size:24px;line-height:1;cursor:pointer;}
.mbody{padding:18px 20px;}

/* ---------- schedule: nav + day cards ---------- */
.bnav{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap;}
.bnav input[type=date]{border:1px solid var(--form-line);border-radius:6px;padding:7px 10px;font-family:var(--fb);font-size:14px;}
.bwin{font-size:12px;color:var(--steel);font-family:var(--fh);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:14px 0 8px;}
.bwin:first-child{margin-top:0;}
.bcard{border:1px solid var(--form-line);border-left:3px solid #EF9F27;background:var(--surface);padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:.12s;}
.bcard:hover{border-color:var(--brand);}
.bcard.sel{box-shadow:inset 0 0 0 1px var(--brand);}
.bcard.conf{border-left-color:#97C459;}     /* confirmed */
.bcard.done{border-left-color:#c9c6c0;opacity:.65;}
.bcard.cxl{border-left-color:var(--charcoal);opacity:.6;}
.bcard.chg{border-left-color:#E24B4A;}      /* change requested/applied */
.bcard-t{display:flex;justify-content:space-between;font-size:13px;font-weight:600;}
.bcard-s{font-size:12px;color:var(--steel);}
.board-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;align-items:start;}
@media(max-width:820px){.board-grid{grid-template-columns:1fr;}}
.convert-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:18px;align-items:start;}
@media(max-width:820px){.convert-grid{grid-template-columns:1fr;}}
.ordcard{border:1px solid var(--form-line);border-radius:8px;padding:14px 16px;margin-bottom:12px;background:var(--surface);}
.ordcard.off{opacity:.45;}
.ordcard-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.ordcard-h .name{font-family:var(--fh);font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;}
.was{font-size:11px;color:var(--steel);margin-left:6px;}
.edited-badge{font-size:11px;padding:2px 8px;border-radius:10px;background:#FAEEDA;color:#633806;font-weight:700;}

/* ---------- calendar grids (week/month) ---------- */
.cal-btn{font-family:var(--fh);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;background:#fff;border:1px solid var(--form-line);border-radius:6px;padding:6px 12px;cursor:pointer;color:var(--charcoal);}
.cal-btn:hover{border-color:var(--brand);color:var(--brand);}
.cal-btn.on{background:var(--brand);border-color:var(--brand);color:#fff;}
.cal-btn.on:hover{color:#fff;}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--form-line);border:1px solid var(--form-line);}
.cal-dow{background:var(--charcoal);color:#e7e6e3;font-family:var(--fh);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:6px 0;}
.cal-cell{background:#fff;min-height:104px;min-width:0;padding:5px 5px 6px;display:flex;flex-direction:column;gap:3px;overflow:hidden;}
.sched-week .cal-cell{min-height:200px;}
.cal-out{background:#faf9f7;}
.cal-out .cal-date{color:#c7c4bd;}
.cal-today{background:var(--brand-tint);box-shadow:inset 0 0 0 2px var(--brand);}
.cal-date{font-family:var(--fh);font-weight:700;font-size:13px;color:var(--charcoal);display:flex;align-items:center;justify-content:space-between;}
.cal-datebtn{background:none;border:none;font-family:var(--fh);font-weight:700;font-size:13px;color:var(--charcoal);cursor:pointer;padding:0;}
.cal-datebtn:hover{color:var(--brand);}
.cal-out .cal-datebtn{color:#c7c4bd;}
.cal-count{font-family:var(--fb);font-weight:700;font-size:10px;background:var(--slab-bg);color:var(--steel);border-radius:999px;padding:0 6px;}
.cal-pour{display:block;width:100%;min-width:0;max-width:100%;text-align:left;border:none;border-left:3px solid #888;background:var(--slab-bg);border-radius:3px;padding:2px 5px;font-size:11px;line-height:1.3;color:var(--ink);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-pour:hover{background:#efece7;}
.cal-pour .cp-t{font-variant-numeric:tabular-nums;color:var(--steel);font-weight:600;}
.cal-more{font-size:10px;font-weight:700;color:var(--brand);cursor:pointer;font-family:var(--fh);letter-spacing:.03em;text-transform:uppercase;padding-left:2px;}
.cal-more:hover{text-decoration:underline;}

/* ---------- timeline ---------- */
.tl{display:flex;gap:10px;font-size:12px;}
.tl .rail{display:flex;flex-direction:column;align-items:center;}
.tl .dot{width:8px;height:8px;border-radius:50%;background:#c9c6c0;margin-top:4px;flex:0 0 auto;}
.tl:first-of-type .dot{background:var(--brand);}
.tl .line{width:1px;flex:1;background:var(--form-line);}
.tl .body{padding-bottom:12px;}
.tl .body b{display:block;font-weight:600;}
.tl .body span{color:var(--steel);}

/* ---------- change-request queue cards ---------- */
.chg-card{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--form-line);border-radius:8px;padding:11px 13px;margin-bottom:8px;background:var(--surface);flex-wrap:wrap;}
.chg-card.dayof{border-color:#e6b9ba;background:#fdf4f4;}
.chg-main{font-size:13px;flex:1;min-width:240px;}
.chg-dayof{font-family:var(--fh);font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--danger);border-radius:4px;padding:2px 7px;margin-right:6px;}
.chg-sub{font-size:12px;color:var(--steel);margin-top:3px;}
.chg-actions{display:flex;gap:6px;}

/* ---------- event log cards ---------- */
.evt-card{border:1px solid var(--form-line);border-radius:8px;padding:10px 12px;margin-bottom:8px;background:var(--surface);}
.evt-t{display:flex;justify-content:space-between;font-size:13px;font-weight:600;}
.evt-sev{font-size:11px;font-weight:700;}
.evt-sev.s3{color:#791F1F;}
.evt-sev.s2{color:#8a5a10;}
.evt-sev.s1{color:#27500A;}
.evt-s{font-size:12px;color:var(--steel);margin-top:2px;}

/* ---------- misc ---------- */
.empty,.loading{text-align:center;color:var(--steel);padding:44px 20px;}
.banner{background:#fbeaea;border:1px solid #e6b9ba;color:var(--danger-dark);border-radius:var(--radius);padding:10px 14px;font-size:13px;margin-bottom:14px;}
@media(max-width:640px){
  .hero h1{font-size:27px;}
  .brand .app{display:none;}
  .brand .logo-img{height:26px;}      /* 264px is too wide for a phone header */
  .brand .logo-fallback{font-size:22px;}
  .fgrid{grid-template-columns:1fr;}
  .cal-cell{min-height:72px;}
  .cal-pour{font-size:10px;}
  .cal-jump{font-size:12px;padding:8px 11px;}
}

/* ============================================================================
   SUNMAT ADDITIONS
   ============================================================================ */

/* ---------- sign-in / invite / reset cards (customers only) ---------- */
.authwrap{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:56px 20px 80px;}
.authcard{background:var(--surface);border:1px solid var(--form-line);border-radius:12px;padding:30px 32px;width:430px;max-width:100%;box-shadow:0 8px 34px rgba(0,0,0,.07);}
.authcard .authlogo{height:30px;width:auto;display:block;margin:0 0 20px;}
.authcard h2{font-family:var(--fh);font-weight:700;font-size:24px;letter-spacing:.03em;text-transform:uppercase;margin-bottom:4px;}
.authcard .sub{color:var(--steel);font-size:13.5px;margin-bottom:20px;}
.authcard .field{margin-bottom:14px;}
.authcard .btn-submit{width:100%;}
.authlinks{display:flex;justify-content:space-between;gap:12px;margin-top:16px;font-size:13px;}
.authlinks a{color:var(--brand-dark);text-decoration:none;font-weight:600;cursor:pointer;}
.authlinks a:hover{text-decoration:underline;}
.autherr{background:#fbeaea;border:1px solid #e6b9ba;color:var(--danger-dark);border-radius:6px;padding:10px 12px;font-size:13px;margin-bottom:14px;}
.authok{background:var(--good-bg);border:1px solid #bfe0cc;color:var(--good);border-radius:6px;padding:10px 12px;font-size:13px;margin-bottom:14px;}
.pwhint{font-size:11.5px;color:var(--steel);margin-top:4px;}
.staffnote{text-align:center;margin-top:22px;font-size:12.5px;color:var(--steel);}
.staffnote a{color:var(--brand-dark);font-weight:600;}

/* ---------- mix picker (order wizard) ---------- */
.mixline{border:1px solid var(--form-line);border-radius:8px;padding:13px 14px;margin-bottom:10px;background:var(--surface);}
.mixline-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;}
.mixline-h .n{font-family:var(--fh);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);}
.mixline-rm{background:none;border:none;color:var(--steel);font-size:12px;cursor:pointer;font-weight:600;}
.mixline-rm:hover{color:var(--brand);}
.mixmeta{font-size:12px;color:var(--steel);margin-top:6px;}
.admixrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.addline{background:#fff;border:1px dashed var(--form-line);border-radius:8px;padding:11px;width:100%;font-family:var(--fh);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel);cursor:pointer;}
.addline:hover{border-color:var(--brand);color:var(--brand);}

/* ---------- capacity meter (plant confirm) ---------- */
.cap{margin:10px 0 4px;}
.cap-bar{height:7px;border-radius:4px;background:var(--form-line);overflow:hidden;}
.cap-fill{height:100%;background:var(--good);}
.cap-fill.warn{background:#EF9F27;}
.cap-fill.over{background:var(--danger);}
.cap-lbl{font-size:11.5px;color:var(--steel);margin-top:4px;}

/* ---------- integration outbox ---------- */
.mono{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:12px;}
.pillstat{display:inline-block;font-family:var(--fh);font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;border-radius:10px;padding:2px 9px;}
.pillstat.queued{background:#e3edf6;color:#1f4e79;}
.pillstat.sending{background:#FAEEDA;color:#633806;}
.pillstat.sent,.pillstat.acked{background:#EAF3DE;color:#27500A;}
.pillstat.failed{background:#FCEBEB;color:#791F1F;}
.pillstat.skipped{background:#efedea;color:var(--steel);}
pre.payload{background:#1d1d1d;color:#e6e5e2;border-radius:8px;padding:14px;overflow:auto;max-height:420px;font-size:11.5px;line-height:1.45;}

/* ---------- money: quote block, aging, KPI currency ---------- */
.stat .n.money{font-size:23px;letter-spacing:-.01em;}
.right{text-align:right;}
td.right,th.right{text-align:right;font-variant-numeric:tabular-nums;}
.owed{color:var(--danger);font-weight:700;}

.quote{border:1px solid var(--form-line);border-radius:8px;background:var(--surface);
  padding:14px 16px;margin:16px 0;}
.quote-h{font-family:var(--fh);font-weight:700;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--steel);margin-bottom:8px;}
.quote-t{margin:0;}
.quote-t td{padding:5px 0;border-bottom:1px solid #f3f1ed;}
.quote-t .muted{font-weight:400;margin-left:6px;font-size:12px;}
.quote-t tr.quote-total td{border-bottom:none;border-top:2px solid var(--sunmat-navy);
  padding-top:9px;font-size:17px;}
.quote-note{font-size:12px;color:var(--steel);margin-top:9px;line-height:1.45;}

.agewrap{margin-top:18px;}
.agebar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--form-line);}
.ageseg{height:100%;}
.ageseg.good{background:var(--good);}
.ageseg.warn{background:#EF9F27;}
.ageseg.bad{background:var(--danger);}
.agekeys{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;font-size:12.5px;color:var(--steel);}
.agekey .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;}
.agekey .dot.good{background:var(--good);}
.agekey .dot.warn{background:#EF9F27;}
.agekey .dot.bad{background:var(--danger);}

/* ---------- misc ---------- */
.muted{color:var(--steel);}
.right{text-align:right;}
.nowrap{white-space:nowrap;}
.stack{display:flex;flex-direction:column;gap:10px;}
.rowbtns{display:flex;gap:8px;flex-wrap:wrap;}
.banner.info{background:#eef3f8;border-color:#c6d7e6;color:#1f4e79;}
.banner.warn{background:#FAEEDA;border-color:#e6cfa5;color:#633806;}
.demo-badge{background:#FAEEDA;color:#633806;border-radius:999px;padding:2px 10px;font-family:var(--fh);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;}

/* ============================================================================
   REDESIGN — EDGE BAR, DASHBOARD, ORDER CALENDAR, MULTI-DAY, CONTRACTS, TRACKING
   ----------------------------------------------------------------------------
   The top .viewnav strip is retired in favour of a left edge bar. Its rules are
   kept in the sheet above: the shared Suntec kit still uses the .nav-btn
   vocabulary, and deleting a component the other apps share would make the next
   sync painful.
   ========================================================================== */

/* ---------- dashboard ---------- */
.dash-hi{font-family:var(--fh);font-weight:700;font-size:22px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);margin-bottom:2px;}
.dash-sub{color:var(--steel);font-size:13.5px;margin-bottom:20px;}

.modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px;}
.modtile{position:relative;text-align:left;background:var(--surface);border:1px solid var(--form-line);
  border-top:4px solid var(--sunmat-navy);border-radius:var(--radius);padding:16px 16px 15px;
  cursor:pointer;transition:.13s;display:flex;flex-direction:column;gap:5px;}
.modtile:hover{border-color:var(--brand);border-top-color:var(--brand);transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.07);}
.modtile.accent{border-top-color:var(--accent);}
.modtile .mi{width:30px;height:30px;margin-bottom:5px;color:var(--brand);}
.modtile .mi svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.modtile.accent .mi{color:var(--accent);}
.modtile .mt{font-family:var(--fh);font-weight:700;font-size:17px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);}
.modtile .md{font-size:12.5px;color:var(--steel);line-height:1.45;}
.modtile .mc{position:absolute;top:13px;right:14px;font-family:var(--fh);font-weight:700;
  font-size:12px;letter-spacing:.04em;background:var(--brand);color:#fff;border-radius:999px;padding:2px 10px;}
.modtile .mc.quiet{background:var(--slab-bg);color:var(--steel);}
.modtile .mc.hot{background:var(--accent);}

/* "Needs your attention" — the one list that should never be a tile. */
.att{background:var(--surface);border:1px solid #e6cfa5;border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:13px 16px;margin-bottom:10px;display:flex;gap:14px;
  align-items:flex-start;justify-content:space-between;flex-wrap:wrap;cursor:pointer;}
.att:hover{border-color:var(--accent);}
.att-h{font-family:var(--fh);font-weight:700;font-size:15px;letter-spacing:.03em;}
.att-s{font-size:13px;color:var(--steel);margin-top:3px;}
.att-why{font-size:13px;color:#633806;background:#FAEEDA;border-radius:6px;padding:7px 10px;margin-top:8px;}

/* ---------- order view switcher ---------- */
.viewbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:14px;}
.segs{display:inline-flex;border:1px solid var(--form-line);border-radius:8px;overflow:hidden;background:#fff;}
.segs button{font-family:var(--fh);font-weight:700;font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;background:#fff;border:none;border-right:1px solid var(--form-line);
  padding:8px 15px;cursor:pointer;color:var(--steel);}
.segs button:last-child{border-right:none;}
.segs button:hover{color:var(--brand);}
.segs button.on{background:var(--brand);color:#fff;}
.calnav{display:flex;align-items:center;gap:8px;}
.calnav .rng{font-family:var(--fh);font-weight:700;font-size:15px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink);min-width:172px;text-align:center;}

/* ---------- 8-day strip (prior day + the coming week) ---------- */
.wk8{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1px;background:var(--form-line);
  border:1px solid var(--form-line);border-radius:var(--radius);overflow:hidden;}
.wk8-col{background:#fff;min-width:0;display:flex;flex-direction:column;}
.wk8-h{background:var(--charcoal);color:#e7e6e3;padding:7px 6px 8px;text-align:center;}
.wk8-h .dw{font-family:var(--fh);font-weight:600;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#a8b4c2;}
.wk8-h .dd{font-family:var(--fh);font-weight:700;font-size:19px;line-height:1.1;}
.wk8-h .dq{font-size:10.5px;color:#a8b4c2;font-variant-numeric:tabular-nums;}
.wk8-col.past .wk8-h{background:#4a5765;}
.wk8-col.today .wk8-h{background:var(--brand);}
.wk8-col.today .wk8-h .dw,.wk8-col.today .wk8-h .dq{color:#d5e6f4;}
.wk8-b{flex:1;min-height:150px;padding:6px 5px;display:flex;flex-direction:column;gap:5px;}
.wk8-col.past .wk8-b{background:#faf9f7;}
.wk8-add{margin:0 5px 6px;border:1px dashed var(--form-line);background:none;border-radius:5px;
  color:var(--steel);font-family:var(--fh);font-weight:700;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 0;cursor:pointer;}
.wk8-add:hover{border-color:var(--brand);color:var(--brand);}

/* An order inside a calendar cell — small, scannable, carrying its own status
   colour on the left edge. */
.opill{display:block;width:100%;min-width:0;text-align:left;background:var(--slab-bg);
  border:1px solid transparent;border-left:3px solid var(--steel);border-radius:4px;
  padding:5px 6px;cursor:pointer;overflow:hidden;}
.opill:hover{border-color:var(--brand);background:#fff;}
.opill .o1{display:flex;justify-content:space-between;gap:6px;font-size:11.5px;font-weight:700;
  color:var(--ink);white-space:nowrap;}
.opill .o1 .t{font-variant-numeric:tabular-nums;color:var(--steel);font-weight:600;}
.opill .o2{font-size:10.5px;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.opill .o3{margin-top:3px;display:flex;gap:4px;flex-wrap:wrap;}
.opill.s-submitted{border-left-color:var(--brand);}
.opill.s-under_review{border-left-color:var(--accent);background:#FDF4E8;}
.opill.s-confirmed{border-left-color:var(--good);}
.opill.s-sent_to_plant,.opill.s-in_progress{border-left-color:#5B8DBE;}
.opill.s-complete{border-left-color:#c9c6c0;}
.opill.s-cancelled,.opill.s-rejected{border-left-color:var(--danger);opacity:.7;}
.opill .flag{display:inline-flex;align-items:center;gap:3px;font-family:var(--fh);font-weight:700;
  font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;background:var(--accent);color:#fff;
  border-radius:3px;padding:1px 5px;}

/* Month grid reuses .cal-* from the shared kit; these are the additions. */
.cal-cell.sel{box-shadow:inset 0 0 0 2px var(--accent);}
.cal-cell .cal-cy{font-family:var(--fb);font-weight:700;font-size:10px;color:var(--steel);}
.daypanel{background:var(--surface);border:1px solid var(--form-line);border-top:3px solid var(--brand);
  border-radius:var(--radius);padding:16px 18px;margin-top:14px;}
.daypanel-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:12px;}
.daypanel-h .dt{font-family:var(--fh);font-weight:700;font-size:20px;letter-spacing:.04em;text-transform:uppercase;}
.daypanel-h .ds{font-size:13px;color:var(--steel);}

/* ---------- multi-day order builder ---------- */
.mday{background:var(--surface);border:1px solid var(--form-line);border-left:4px solid var(--brand);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;}
.mday-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.mday-h .md-d{font-family:var(--fh);font-weight:700;font-size:17px;letter-spacing:.03em;text-transform:uppercase;}
.mday-h .md-s{font-size:12.5px;color:var(--steel);}
.mday.bad{border-left-color:var(--danger);}
.mday-err{font-size:12.5px;color:var(--danger-dark);background:#fbeaea;border-radius:6px;
  padding:6px 10px;margin-top:8px;}
.mpick{font-size:13px;color:var(--steel);margin-bottom:10px;}
.mtotal{display:flex;gap:22px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--form-line);
  border-radius:var(--radius);padding:13px 16px;margin-bottom:14px;}
.mtotal .mt-n{font-family:var(--fh);font-weight:700;font-size:23px;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;}
.mtotal .mt-k{font-family:var(--fh);font-weight:600;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--steel);margin-top:3px;}

/* ---------- value added + application on the order line ---------- */
.valine{border-top:1px dashed var(--form-line);margin-top:11px;padding-top:11px;}
.valhead{font-family:var(--fh);font-weight:700;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel);margin-bottom:8px;}
.field.locked input,.field.locked select{background:var(--slab-bg);color:#a5a39e;cursor:not-allowed;}
.field .hint{font-size:11.5px;color:var(--steel);margin-top:4px;line-height:1.35;}
.field .hint.on{color:var(--accent-dark);font-weight:600;}
.vaopt{font-size:11.5px;color:var(--steel);margin-top:3px;}

/* ---------- tracking ---------- */
.trk{background:var(--surface);border:1px solid var(--form-line);border-radius:var(--radius);
  padding:15px 17px;margin-bottom:12px;}
.trk-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.trk-h .th{font-family:var(--fh);font-weight:700;font-size:17px;letter-spacing:.02em;}
.trk-h .ts{font-size:12.5px;color:var(--steel);}
.prog{margin-top:11px;}
.prog-bar{height:14px;border-radius:7px;background:var(--form-line);overflow:hidden;display:flex;}
.prog-fill{background:var(--good);height:100%;}
.prog-fill.part{background:var(--brand);}
.prog-lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--steel);margin-top:5px;
  font-variant-numeric:tabular-nums;}
.trucks{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
.truck{border:1px solid var(--form-line);border-left:3px solid var(--steel);border-radius:5px;
  padding:6px 9px;font-size:12px;min-width:112px;background:var(--slab-bg);}
.truck .tn{font-family:var(--fh);font-weight:700;font-size:12.5px;color:var(--ink);}
.truck .tt{color:var(--steel);font-size:11px;font-variant-numeric:tabular-nums;}
.truck.onsite{border-left-color:var(--good);background:var(--good-bg);}
.truck.enroute{border-left-color:var(--brand);background:var(--brand-tint);}
.truck.batching{border-left-color:#EF9F27;background:#FDF4E8;}
.truck.done{border-left-color:#c9c6c0;opacity:.72;}
.truck.rejected{border-left-color:var(--danger);background:#fbeaea;}

/* ---------- contracts ---------- */
.ctcard{background:var(--surface);border:1px solid var(--form-line);border-left:4px solid var(--sunmat-navy);
  border-radius:var(--radius);padding:15px 17px;margin-bottom:12px;cursor:pointer;transition:.12s;}
.ctcard:hover{border-color:var(--brand);border-left-color:var(--brand);}
.ctcard.active{border-left-color:var(--good);}
.ctcard.expiring{border-left-color:var(--accent);}
.ctcard.ended{border-left-color:#c9c6c0;opacity:.75;}
.ctcard-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.ctcard-h .cn{font-family:var(--fh);font-weight:700;font-size:18px;letter-spacing:.02em;}
.ctcard-h .cid{font-family:var(--fh);font-weight:700;font-size:12px;letter-spacing:.05em;color:var(--steel);}
.ctmeta{display:flex;gap:24px;flex-wrap:wrap;margin-top:11px;}
.ctmeta .cm-n{font-family:var(--fh);font-weight:700;font-size:19px;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;}
.ctmeta .cm-k{font-family:var(--fh);font-weight:600;font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--steel);margin-top:3px;}

/* The edge bar's open/closed state is LAYOUT, not decoration — the labels are
   only readable in the wide state. Never let it depend on an animation running:
   with motion reduced it snaps between the two states instead. */
@media(prefers-reduced-motion:reduce){
  .edge-nav,.edge-btn,.edge-btn .el,.edge-btn .eb,.edge-grp,.edge-pin .el,
  .modtile,.stat,.opill{transition:none !important;}
  .modtile:hover,.stat:hover{transform:none;}
}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .modgrid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}
  .wk8{grid-template-columns:repeat(4,minmax(0,1fr));}
  .wk8-b{min-height:104px;}
}
@media(max-width:640px){
  /* The rail keeps its icons on a phone; the panel overlays rather than pushing,
     so the content column never gets squeezed to nothing. */
  .edge{flex:0 0 50px;width:50px;}
  .edge-nav{width:50px;}
  .edge-btn .ei,.edge-pin .ei{flex-basis:47px;}
  .shell.pinned .edge{flex-basis:50px;width:50px;}
  .shell.pinned .edge-nav{width:226px;box-shadow:6px 0 26px rgba(0,0,0,.28);}
  .wk8{grid-template-columns:repeat(2,minmax(0,1fr));}
  .modgrid{grid-template-columns:1fr;}
  .calnav .rng{min-width:120px;font-size:13px;}

  /* Pre-existing: the user bar (badge + avatar + "Name · Company" + Sign out)
     is wider than a phone and pushed the whole page 64px sideways. Let it
     shrink and drop the company — the avatar and name are the identity, and
     the company is on every other screen already. */
  .header-inner{gap:10px;}
  .user{min-width:0;flex:1 1 auto;gap:8px;}
  /* Only the name may shrink. The avatar and Sign out keep their size — a
     15px avatar and a clipped "Sign ou" is worse than a truncated name. */
  .user .avatar,.user a,.user .demo-badge{flex:0 0 auto;}
  .user>span:not(.avatar):not(.demo-badge){flex:1 1 auto;min-width:0;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;}
  .user .demo-badge{font-size:0;padding:6px;}      /* dot, not a sentence */
  .user .demo-badge::before{content:'●';font-size:11px;}
}


/* ============================================================================
   OBSIDIAN OVERRIDES — the shared component vocabulary above, restyled onto the
   token system. Later rules win at equal specificity, so this block stays at
   the END of the file. The handoff's five rules: (1) hairline seams, not drop
   shadows — grouped cards are ONE container with background:var(--line) and
   gap:1px; (2) pills (99px) for anything interactive, 10–20px rounded rects for
   anything structural; (3) one focal point per screen; (4) accent is a
   spotlight — the primary button is --btn-primary, not orange; (5) every number
   a person compares is IBM Plex Mono tracked -.03em.
   ============================================================================ */
*:focus-visible{outline:2px solid var(--info);outline-offset:2px;}
a{color:var(--info);}
.muted{color:var(--muted);}
.mono{font-family:var(--fm);}
.nowrap{white-space:nowrap;}

/* KPI strip: one seam-gap container, cells divided by the 1px --line gap (rule 1) */
.grp{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:20px;}
.stat{flex:1 1 160px;min-width:0;background:var(--surface);border:none;border-radius:0;padding:19px 22px;display:flex;flex-direction:column-reverse;gap:11px;transition:background .18s ease;box-shadow:none;}
.stat:hover{background:var(--surface);transform:none;}
.stat .n{font:600 30px/1 var(--fm);letter-spacing:-.03em;color:var(--ink);}
.stat.hot .n{color:var(--accent);}
.stat.hot .k{color:var(--accent-fg);}
.stat .k{font:500 11px/1.3 var(--fn);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:0;}
.grp-head{font:500 10px/1 var(--fn);letter-spacing:.16em;color:var(--muted);}

/* status chips: one lookup, keyed on the status code's colour */
.chip{font:500 11px/1 var(--fb);letter-spacing:0;text-transform:none;border-radius:99px;padding:0 10px;display:inline-flex;align-items:center;height:23px;white-space:nowrap;}
.chip-gray,.chip-blue{background:var(--neutral-bg);color:var(--neutral-fg);}
.chip-amber{background:var(--accent-bg);color:var(--accent-fg);}
.chip-red{background:var(--danger-bg);color:var(--danger-fg);}   /* red = rejected / sent back / short lead — never amber */
.chip-green{background:var(--ok-bg);color:var(--ok-fg);}
.chip-solid{background:var(--accent);color:var(--accent-ink);font-weight:600;}
.chip-idle{background:var(--idle-bg);color:var(--idle-fg);}
.chip.lg{height:25px;padding:0 12px;font-size:12px;}
.pillstat{font:500 11px/1 var(--fb);letter-spacing:0;text-transform:none;border-radius:99px;padding:5px 10px;}
.pillstat.queued,.pillstat.skipped{background:var(--neutral-bg);color:var(--neutral-fg);}
.pillstat.sending{background:var(--accent-bg);color:var(--accent-fg);}
.pillstat.sent,.pillstat.acked{background:var(--ok-bg);color:var(--ok-fg);}
.pillstat.failed{background:var(--accent-bg);color:var(--accent-fg);}
.reg{font-family:var(--fm);font-size:11.5px;color:var(--muted);}
.chgtype{font:500 12px/1 var(--fb);letter-spacing:0;text-transform:none;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:99px;padding:7px 12px;cursor:pointer;}
.chgtype.on{background:var(--chip-on);border-color:var(--chip-on);color:var(--chip-on-ink);}

/* buttons: pills. Primary = --btn-primary (near-white on dark, near-black on light), ghost otherwise.
   The ONE accent action in the product is "Release to Command" (.dh-actions .btn-submit). */
.btn-create,.btn-submit,.btn-approve{font:600 13px/1 var(--fb);letter-spacing:0;text-transform:none;background:var(--btn-primary);color:var(--btn-primary-ink);border:none;border-radius:99px;padding:0 18px;height:38px;cursor:pointer;transition:filter .18s ease;white-space:nowrap;}
.btn-submit{height:42px;padding:0 22px;font-size:14px;}
.btn-create:hover,.btn-submit:hover,.btn-approve:hover{filter:brightness(.94);}
.btn-del,.btn-ghost{font:500 13px/1 var(--fb);letter-spacing:0;text-transform:none;background:transparent;color:var(--btn-ghost-ink);border:1px solid var(--btn-ghost-line);border-radius:99px;padding:0 16px;height:38px;cursor:pointer;transition:background .18s ease,color .18s ease;white-space:nowrap;}
.btn-ghost{height:42px;padding:0 18px;font-size:14px;}
.btn-del:hover,.btn-ghost:hover{background:var(--surface-2);color:var(--ink);border-color:var(--btn-ghost-line);}
button:disabled,.btn-submit:disabled,.btn-approve:disabled{opacity:.45;cursor:not-allowed;filter:none;}
.addline{background:none;border:1px dashed var(--btn-ghost-line);color:var(--info);border-radius:10px;padding:10px 14px;font:500 13px/1 var(--fb);cursor:pointer;width:100%;}

/* banners */
.banner{background:var(--danger-bg);border:1px solid var(--danger);color:var(--danger-fg);border-radius:10px;padding:11px 14px;font-size:13px;line-height:1.45;}
.banner.info{background:var(--surface-2);border-color:var(--line);color:var(--ink-2);}
.banner.warn{background:var(--accent-bg);border-color:var(--notice-line);color:var(--accent-fg);}
.banner .mono{font-family:var(--fm);font-size:12px;}
.empty,.loading{color:var(--muted);}

/* forms */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:none;}
.field label{color:var(--muted);font:600 11px/1.3 var(--fn);letter-spacing:.12em;text-transform:uppercase;}
.field input,.field select,.field textarea,input,select,textarea{font-family:var(--fb);font-size:14px;color:var(--ink-2);background:var(--bg-sunk);border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--info);outline-offset:0;border-color:var(--info);}
.field .req{color:var(--accent);}
.vaopt{color:var(--muted);font-size:12px;}
.wstep{background:var(--line);}
.wstep.on{background:var(--accent);}
.wstep-label{color:var(--muted);}
.svcpick{background:var(--surface);border:1px solid var(--line);border-radius:9px;}
.svcpick:hover{border-color:var(--info);}
.svcpick.on{border-color:var(--accent);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--accent);}
.svcpick .svcname{font:700 14px/1.2 var(--fb);letter-spacing:0;text-transform:none;color:var(--ink);}
.svcpick.on .svcname{color:var(--ink);}
.svcpick .svclead{color:var(--muted);}
.mixline{border:1px solid var(--line);border-radius:9px;background:var(--surface);}
.mixline-h .n{font-family:var(--fm);}

/* tables */
.tbl-wrap{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:none;}
.sc-table th{font:500 10px/1 var(--fn);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:var(--surface);border-bottom:1px solid var(--line);}
.sc-table td{border-bottom:1px solid var(--line-soft);color:var(--ink-2);font-size:13px;}
.sc-table tbody tr:hover{background:var(--surface-2);}
.sc-table tbody tr.bad{border-left:3px solid var(--danger);}
.diff th{font:600 10px/1 var(--fn);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);}
.diff td{border-bottom:1px solid var(--line-soft);color:var(--ink-2);}
.diff .fld{color:var(--ink);}
.diff .to{color:var(--ok-fg);}
.diff .from{color:var(--muted);}

/* queue cards */
.req-card{background:var(--surface);border:1px solid var(--line);border-left:1px solid var(--line);border-radius:14px;box-shadow:none;}
.req-card.new{border-left:3px solid var(--accent);}
.req-id{font:600 13px/1 var(--fm);color:var(--ink);}
.req-job{font:600 14px/1.3 var(--fb);color:var(--ink-2);}
.req-sub{color:var(--muted);font-size:12.5px;}
.req-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.req-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.ordcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:none;}
.ordcard-h .name{font:600 15px/1.2 var(--fb);letter-spacing:-.01em;text-transform:none;color:var(--ink);}
.bcard{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--neutral-fg);}
.bcard.conf{border-left-color:var(--ok-fg);}
.bcard.chg{border-left-color:var(--accent);}
.bcard.done{border-left-color:var(--line);}
.bcard-s{color:var(--muted);}
.bwin{font:600 10px/1 var(--fn);letter-spacing:.16em;color:var(--muted);}
.cap-bar{background:var(--bg-sunk);}
.cap-fill{background:var(--info);}
.cap-fill.warn{background:var(--accent);}
.cap-fill.over{background:var(--danger);}
.cap-lbl{color:var(--muted);}
.tl .dot{background:var(--neutral-fg);}
.tl:first-of-type .dot{background:var(--accent);}
.tl .line{background:var(--line);}
.tl .body span{color:var(--muted);}

/* modal / sheets */
.overlay{background:rgba(8,9,11,.72);}
.modal{background:var(--surface);border:1px solid var(--line);box-shadow:0 24px 80px rgba(0,0,0,.5);color:var(--ink-2);border-radius:16px;}
[data-theme="light"] .modal{box-shadow:0 18px 60px rgba(11,13,16,.18);}
.mhead{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line);}
.mhead .mt{font:600 17px/1.2 var(--fb);letter-spacing:-.018em;text-transform:none;}
.mhead .ms{color:var(--muted);}
.mhead button{color:var(--muted);}
.mhead button:hover{color:var(--ink);}
.was{color:var(--muted);text-decoration:line-through;margin-left:6px;font-size:12px;}

/* dashboard leftovers */
.modtile{background:var(--surface);border:1px solid var(--line);border-top:1px solid var(--line);color:var(--ink-2);border-radius:14px;box-shadow:none;}
.modtile:hover{border-color:var(--line);background:var(--surface-2);transform:none;}
.modtile.accent{border-top-color:var(--accent);}
.modtile .mi{color:var(--info);}
.modtile .mt{font:600 15px/1.2 var(--fb);letter-spacing:-.01em;text-transform:none;color:var(--ink);}
.modtile .md{color:var(--muted);}
.modtile .mc{font-family:var(--fm);background:var(--neutral-bg);color:var(--neutral-fg);}
.modtile .mc.quiet{background:var(--neutral-bg);color:var(--neutral-fg);}
.modtile .mc.hot{background:var(--accent);color:var(--accent-ink);}
.att{background:var(--notice-card);border:1px solid var(--notice-card-line);border-left:1px solid var(--notice-card-line);border-radius:14px;}
.att:hover{border-color:var(--notice-line);}
.att-h{font:600 13px/1.3 var(--fb);letter-spacing:0;color:var(--ink);}
.att-s{color:var(--notice-sub);font-size:12px;}
.att-why{color:var(--notice-sub);background:transparent;padding:0;margin-top:4px;font-size:12px;}
.quote{border:1px solid var(--line);background:var(--surface);}
.quote-h{font:600 10px/1 var(--fn);letter-spacing:.16em;color:var(--muted);}
.quote-t td{border-bottom:1px solid var(--line-soft);}
.quote-t tr.quote-total td{border-top:2px solid var(--line);}
.quote-note{color:var(--muted);}

/* auth screens */
.authwrap{background:var(--bg);}
.authcard{background:var(--surface);border:1px solid var(--line);box-shadow:none;border-radius:16px;}
.authcard h2{font:600 24px/1.15 var(--fb);letter-spacing:-.028em;text-transform:none;color:var(--ink);}
.authcard .sub{color:var(--muted);}
.authcard .authlogo{height:22px;}
.authcard .autherr{background:var(--danger-bg);color:var(--danger-fg);border-radius:7px;padding:9px 12px;font-size:13px;margin-bottom:12px;}
.authlinks a,.staffnote a{color:var(--info);}
.staffnote{color:var(--muted);}

/* numbers people compare */
.money,.qty,.num{font-family:var(--fm);}
.tabs{border-bottom:1px solid var(--line);}
.tab{font:500 13px/1 var(--fb);letter-spacing:0;text-transform:none;color:var(--muted);}
.tab.on{color:var(--ink);border-bottom-color:var(--accent);}
.tab .badge{background:var(--neutral-bg);color:var(--neutral-fg);font-family:var(--fm);}
.tab.on .badge{background:var(--accent);color:var(--accent-ink);}
.demo-badge{background:var(--accent-bg);color:var(--accent-fg);}

/* sent back: must never read as scheduled */
.opill.back{border:1px dashed var(--danger);border-left:3px solid var(--danger);background:var(--danger-bg);}
.opill.back .o1>span:first-child{color:var(--danger-fg);}
.opill .t.struck{text-decoration:line-through;opacity:.7;}
.opill .flag.red{background:var(--danger);color:#fff;}
.req-card.back{border-left:3px dashed var(--danger);}
.dash-today.back .tm{text-decoration:line-through;color:var(--muted);}
/* order history: compact rows */
.hist{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:12.5px}
.hist-row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;padding:7px 12px;background:var(--surface);align-items:baseline}
.hist-row.hist-hot b{color:var(--accent-fg)}
.hist-when{font-size:11.5px;color:var(--muted);white-space:nowrap}
.hist-what b{font-weight:600;color:var(--ink)}
.hist-toggle{background:var(--surface);border:none;padding:8px 12px;text-align:left;font:500 12px/1 var(--fb);color:var(--info);cursor:pointer}
@media(max-width:600px){.hist-row{grid-template-columns:1fr}}
/* numerals people compare (rule 5) */
.stat .n,.dash-kpi .v,.dh-tile .v,.dash-ovl .v{letter-spacing:-.03em;}
/* skeletons, not spinners */
.skel{background:var(--surface-2);border-radius:10px;}
/* the ⌘K palette */
.pal{display:flex;flex-direction:column;gap:12px;}
.pal input{width:100%;height:44px;font-size:15px;}
.pal-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;max-height:min(52vh,420px);overflow-y:auto;}
.pal-grp{background:var(--surface);padding:9px 14px 6px;font:500 10px/1 var(--fn);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.pal-row{background:var(--surface);padding:11px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;cursor:pointer;border:none;width:100%;text-align:left;font:500 13px/1.3 var(--fb);color:var(--ink-2);transition:background .18s ease;}
.pal-row:hover,.pal-row.on{background:var(--surface-2);color:var(--ink);}
.pal-row .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pal-row .t b{color:var(--ink);font-weight:600;}
.pal-row .s{font:400 12px/1.3 var(--fb);color:var(--muted);margin-top:2px;}
.pal-row .k{font:500 12px/1 var(--fm);color:var(--muted);}
.pal-hint{font:400 12px/1.4 var(--fb);color:var(--muted);}