/* Extracted from project-syed-prototype.html: every <style> block, unchanged. Reference only. */
*,*::before,*::after{box-sizing:border-box}html,body{margin:0;padding:0}


/* ══════════════════════════════════════════════════════════════
   PROJECT-SYED, in-house CRM & stock system for Project-Syed

   THE PLATE RULE governs the accent: anything yellow is a fill with
   ink text and an ink border, exactly how a UK number plate is built.
   Yellow is never a text colour. Neutrals are biased toward slate-blue
 , the complement of plate yellow, so nothing reads as default grey.

   The age ramp is a validated single-hue ordinal scale (light = fresh
   stock, dark = old stock). Status colours (good / alert) are reserved
   and always ship with a glyph and a word.
   ══════════════════════════════════════════════════════════════ */
:root {
  --ground:#E6EAEA; --surface:#FFFFFF; --surface-2:#F1F4F4; --surface-sunk:#DCE2E3;
  --line:#CFD7D9; --line-strong:#AEB9BD; --ink:#101820; --ink-2:#3E4A55; --muted:#62707C;
  --plate:#FFD400; --plate-hi:#FFDE3D; --plate-edge:#14110C; --band:#003399;
  --good:#0B6B4F; --good-bg:#E2F0EA; --alert:#C8321C; --alert-bg:#FBE7E2; --wait-bg:#E5EAEC;
  --bar:#7A8894; --grid:#E1E7E8; --scrim:rgba(16,24,32.55);
  /* ordinal age ramp, validated light→dark, single hue */
  /* Days on the forecourt, a semantic heat scale, validated for
     colour-blind separation. Fresh is green, stale is red, and the
     count printed in each band is the label that carries it. */
  --age1:#127A5C; --age2:#E8C33A; --age3:#DE5A0A; --age4:#9B2150;
  --ageT1:#FFFFFF; --ageT2:#14110C; --ageT3:#FFFFFF; --ageT4:#FFFFFF;
  /* Cost breakdown, a validated categorical set (Okabe-Ito derived).
     Four separate hues, not four shades of one, so "where the money went"
     is readable at a glance and survives colour blindness. */
  --c-veh:#0072B2; --c-prep:#009E73; --c-vat:#D55E00; --c-hold:#CC79A7; --c-ink:#FFFFFF;
  --slab:#12181E; --slab-ink:#EDF1F3;
  --shadow:      0 1px 2px rgba(16,24,32.06), 0 8px 24px -12px rgba(16,24,32.18);
  --shadow-lift: 0 3px 6px rgba(16,24,32.09), 0 20px 44px -20px rgba(16,24,32.30);
  --shadow-pop:  0 8px 16px rgba(16,24,32.10), 0 32px 64px -24px rgba(16,24,32.42);
  /* Candara / Gill Sans / Optima, a humanist face with real character,
     shipped on Windows and macOS respectively. Carries every heading,
     figure and brand name; the neutral UI face handles dense text. */
  --display:Candara,"Gill Sans Nova","Gill Sans MT","Gill Sans",Optima,"Avenir Next","Segoe UI",system-ui,sans-serif;
  --sans:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --serif:"Iowan Old Style","Charter",Georgia,"Times New Roman",serif;
  --plate-face:"Arial Black","Helvetica Neue",Helvetica,Arial,sans-serif;
  --r:5px; --rail:250px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground:#0D1319; --surface:#161D24; --surface-2:#1D262F; --surface-sunk:#111820;
    --line:#2A353F; --line-strong:#3C4A56; --ink:#E4EAEE; --ink-2:#B4C0CA; --muted:#8593A0;
    --good:#3FBE8C; --good-bg:#12281F; --alert:#FF7A66; --alert-bg:#2E1913; --wait-bg:#1E272F;
    --bar:#6C7B88; --grid:#222D36; --scrim:rgba(4,8,12.72);
    --age1:#3CBB8D; --age2:#F2DA5E; --age3:#E9682A; --age4:#B23A78;
  --ageT1:#0B1116; --ageT2:#0B1116; --ageT3:#0B1116; --ageT4:#FFFFFF;
    --c-veh:#4C9BD6; --c-prep:#1FAE86; --c-vat:#E08234; --c-hold:#B84A96; --c-ink:#0B1116;
    --shadow:      0 1px 2px rgba(0,0,0.4), 0 8px 24px -12px rgba(0,0,0.7);
    --shadow-lift: 0 3px 6px rgba(0,0,0.5), 0 20px 44px -20px rgba(0,0,0.9);
    --shadow-pop:  0 8px 16px rgba(0,0,0.5), 0 32px 64px -24px rgba(0,0,0.95);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:#0D1319; --surface:#161D24; --surface-2:#1D262F; --surface-sunk:#111820;
  --line:#2A353F; --line-strong:#3C4A56; --ink:#E4EAEE; --ink-2:#B4C0CA; --muted:#8593A0;
  --good:#3FBE8C; --good-bg:#12281F; --alert:#FF7A66; --alert-bg:#2E1913; --wait-bg:#1E272F;
  --bar:#6C7B88; --grid:#222D36; --scrim:rgba(4,8,12.72);
  --age1:#3CBB8D; --age2:#F2DA5E; --age3:#E9682A; --age4:#B23A78;
  --ageT1:#0B1116; --ageT2:#0B1116; --ageT3:#0B1116; --ageT4:#FFFFFF;
  --c-veh:#4C9BD6; --c-prep:#1FAE86; --c-vat:#E08234; --c-hold:#B84A96; --c-ink:#0B1116;
  --shadow:      0 1px 2px rgba(0,0,0.4), 0 8px 24px -12px rgba(0,0,0.7);
  --shadow-lift: 0 3px 6px rgba(0,0,0.5), 0 20px 44px -20px rgba(0,0,0.9);
  --shadow-pop:  0 8px 16px rgba(0,0,0.5), 0 32px 64px -24px rgba(0,0,0.95);
}
:root[data-theme="light"] {
  color-scheme: light;
  --ground:#E6EAEA; --surface:#FFFFFF; --surface-2:#F1F4F4; --surface-sunk:#DCE2E3;
  --line:#CFD7D9; --line-strong:#AEB9BD; --ink:#101820; --ink-2:#3E4A55; --muted:#62707C;
  --good:#0B6B4F; --good-bg:#E2F0EA; --alert:#C8321C; --alert-bg:#FBE7E2; --wait-bg:#E5EAEC;
  --bar:#7A8894; --grid:#E1E7E8; --scrim:rgba(16,24,32.55);
  /* Days on the forecourt, a semantic heat scale, validated for
     colour-blind separation. Fresh is green, stale is red, and the
     count printed in each band is the label that carries it. */
  --age1:#127A5C; --age2:#E8C33A; --age3:#DE5A0A; --age4:#9B2150;
  --ageT1:#FFFFFF; --ageT2:#14110C; --ageT3:#FFFFFF; --ageT4:#FFFFFF;
  /* Cost breakdown, a validated categorical set (Okabe-Ito derived).
     Four separate hues, not four shades of one, so "where the money went"
     is readable at a glance and survives colour blindness. */
  --c-veh:#0072B2; --c-prep:#009E73; --c-vat:#D55E00; --c-hold:#CC79A7; --c-ink:#FFFFFF;
  --shadow:      0 1px 2px rgba(16,24,32.06), 0 8px 24px -12px rgba(16,24,32.18);
  --shadow-lift: 0 3px 6px rgba(16,24,32.09), 0 20px 44px -20px rgba(16,24,32.30);
  --shadow-pop:  0 8px 16px rgba(16,24,32.10), 0 32px 64px -24px rgba(16,24,32.42);
}

* { box-sizing: border-box; }
.app { font-family: var(--sans); color: var(--ink); background: var(--ground); min-height: 100vh; font-size: 15px; line-height: 1.52; -webkit-font-smoothing: antialiased; }
:where(.app) h1,:where(.app) h2,:where(.app) h3,:where(.app) h4,:where(.app) p,
:where(.app) ul,:where(.app) ol,:where(.app) dl,:where(.app) figure,:where(.app) table { margin: 0; }
:where(.app) ul,:where(.app) ol { padding: 0; list-style: none; }
:where(.app) button,:where(.app) input,:where(.app) select,:where(.app) textarea { font: inherit; color: inherit; }
:where(.app) :focus-visible { outline: 2px solid var(--band); outline-offset: 2px; border-radius: 2px; }
:root[data-theme="dark"] :where(.app) :focus-visible { outline-color: var(--plate); }
@media (prefers-color-scheme: dark) { :where(.app) :focus-visible { outline-color: var(--plate); } }

.skip { position: absolute; left: 8px; top: -60px; z-index: 90; background: var(--plate); color: var(--plate-edge); border: 1px solid var(--plate-edge); padding: 9px 14px; border-radius: var(--r); font-weight: 700; font-size: 13px; text-decoration: none; transition: top .15s; }
.skip:focus { top: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.data { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.h-view { font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; line-height: 1.15; }
.h-card { font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: -.008em; }
.pos { color: var(--good); }
.neg { color: var(--alert); }

/* ══════════════ SHELL ══════════════ */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0,1fr); min-height: 100vh; }
.rail { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; padding: 20px 0 16px; position: sticky; top: 0; height: 100vh; z-index: 20; overflow-y: auto; }
.brand { padding: 0 18px; display: flex; flex-direction: column; gap: 8px; }
.brand-mark { display: flex; align-items: center; gap: 9px; }
.brand-chip { width: 26px; height: 18px; border-radius: 2px; overflow: hidden; flex: none; background: var(--plate); border: 1.5px solid var(--plate-edge); display: flex; }
.brand-chip i { width: 6px; background: var(--band); flex: none; }
.brand-name { font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: .12em; }
.brand-sub { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.nav-sec { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 12px 12px 5px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 12px; background: none; border: 0; border-radius: var(--r); text-align: left; cursor: pointer; color: var(--ink-2); font-size: 14px; font-weight: 600; position: relative; width: 100%; text-decoration: none; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item[aria-current="page"] { background: var(--surface-2); color: var(--ink); font-weight: 650; }
.nav-item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--plate); border-radius: 0 2px 2px 0; }
.nav-count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nav-count.warn { color: var(--alert); font-weight: 700; }
.nav-ico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; }

.rail-foot { margin-top: auto; padding: 12px 10px 0; display: flex; flex-direction: column; gap: 9px; }
.whoami { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); padding: 9px 10px; display: flex; flex-direction: column; gap: 8px; }
.whoami-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.avatar { width: 29px; height: 29px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--display); font-size: 13px; font-weight: 700; background: var(--plate); color: var(--plate-edge); border: 1px solid var(--plate-edge); }
.avatar-q { background: var(--surface-sunk); color: var(--ink-2); border-color: var(--line); }
.whoami-name { font-size: 14px; font-weight: 650; line-height: 1.25; min-width: 0; }
.whoami-role { font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 400; }
.demo-note { font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--muted); padding: 0 3px; }
.demo-note b { color: var(--ink-2); font-weight: 400; }

.topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 12px; padding: 10px 28px; background: var(--surface); border-bottom: 1px solid var(--line); }
.search { position: relative; flex: 1; max-width: 400px; }
.search > svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; stroke: var(--muted); fill: none; stroke-width: 1.8; pointer-events: none; }
.search input { width: 100%; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r); padding: 8px 60px 8px 34px; font-size: 14px; }
.search input:focus { background: var(--surface); border-color: var(--line-strong); }
.search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; background: var(--surface); }
.results { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 30; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow-pop); overflow: hidden; max-height: 330px; overflow-y: auto; }
.result { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; }
.result:last-child { border-bottom: 0; }
.result:hover, .result:focus-visible { background: var(--surface-2); }
.result-t { font-family: var(--display); font-size: 14px; font-weight: 700; }
.result-s { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.result-k { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); cursor: pointer; position: relative; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 17px; height: 17px; stroke: var(--ink-2); fill: none; stroke-width: 1.7; }
.icon-btn .dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--alert); border: 1.5px solid var(--surface); }
/* a plain switch: left is day, right is night */
.switch { border: 0; background: none; padding: 0; cursor: pointer; display: flex; align-items: center; }
.switch-track { width: 54px; height: 30px; border-radius: 15px; background: var(--surface-sunk);
  border: 1px solid var(--line); position: relative; display: block; transition: background var(--micro); }
.switch-knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center;
  transition: transform .26s var(--ease); }
.switch-knob svg { width: 14px; height: 14px; stroke: var(--ink-2); fill: none; stroke-width: 1.9; grid-area: 1/1; }
.sw-moon { opacity: 0; }
.switch[aria-checked="true"] .switch-track { background: var(--band); border-color: var(--band); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(24px); }
.switch[aria-checked="true"] .sw-sun { opacity: 0; }
.switch[aria-checked="true"] .sw-moon { opacity: 1; }

.canvas { padding: 22px 28px 64px; max-width: 1380px; }
.view-head { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.view-head-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.view-head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.view { display: none; }
.view.is-on { display: block; }
.crumbs { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); flex-wrap: wrap; }
.crumbs button { border: 0; background: none; cursor: pointer; color: var(--muted); font: inherit; padding: 0; }
.crumbs button:hover { color: var(--ink); text-decoration: underline; }

/* ══════════════ PRIMITIVES ══════════════ */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.card-head .h-card { margin-right: auto; }
.card-body { padding: 16px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.scroll-x { overflow-x: auto; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--r); cursor: pointer; font-size: 13px; font-weight: 650; letter-spacing: -.005em; white-space: nowrap; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--plate); color: var(--plate-edge); border-color: var(--plate-edge); font-weight: 700; }
.btn-primary:hover:not(:disabled) { background: var(--plate-hi); }
.btn-primary:disabled { background: var(--plate); }
.btn-ghost { border-color: transparent; background: none; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-danger { color: var(--alert); border-color: var(--alert); background: none; }
.btn-danger:hover { background: var(--alert-bg); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; }
.btn-sm svg { width: 14px; height: 14px; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 3px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; background: var(--wait-bg); color: var(--ink-2); }
.pill svg { width: 12px; height: 12px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; }
.pill-good { background: var(--good-bg); color: var(--good); }
.pill-alert { background: var(--alert-bg); color: var(--alert); }
.pill-plate { background: var(--plate); color: var(--plate-edge); border: 1px solid var(--plate-edge); }
.tag { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 3px 8px; white-space: nowrap; }

.plate-tag { display: inline-flex; align-items: stretch; overflow: hidden; background: var(--plate); border: 1.5px solid var(--plate-edge); border-radius: 3px; line-height: 1; flex: none; }
.plate-tag .band { background: var(--band); color: #fff; display: flex; align-items: flex-end; justify-content: center; padding: 3px 4px; font-family: var(--sans); font-size: 8px; font-weight: 700; }
.plate-tag .reg { font-family: var(--plate-face); color: var(--plate-edge); padding: 3px 8px 3px 6px; font-size: 13.5px; letter-spacing: .045em; }
.plate-md .band { font-size: 10px; padding: 4px 5px; }
.plate-md .reg { font-size: 19px; padding: 6px 11px 7px 9px; }

.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: 9px 13px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl th { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 400; white-space: nowrap; }
.tbl td { font-size: 13.5px; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tfoot td { font-weight: 700; border-top: 2px solid var(--line-strong); border-bottom: 0; background: var(--surface-2); }
.tbl-rows tbody tr:hover { background: var(--surface-2); cursor: pointer; }
.th-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; letter-spacing: inherit; text-transform: inherit; }
.th-sort:hover { color: var(--ink); }
.th-sort svg { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 2.4; opacity: 0; }
[aria-sort="ascending"] .th-sort svg, [aria-sort="descending"] .th-sort svg { opacity: 1; }
[aria-sort="descending"] .th-sort svg { transform: rotate(180deg); }
[aria-sort] .th-sort { color: var(--ink); }

.seg { display: flex; gap: 2px; background: var(--surface-sunk); padding: 2px; border-radius: var(--r); flex-wrap: wrap; }
.seg button { border: 0; background: none; cursor: pointer; padding: 5px 10px; border-radius: 3px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.chip { border: 1px solid var(--line); background: var(--surface); cursor: pointer; padding: 6px 12px; border-radius: 20px; font-size: 12.5px; color: var(--ink-2); }
.chip:hover { border-color: var(--line-strong); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); font-weight: 600; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }

.empty { padding: 48px 18px; text-align: center; color: var(--muted); font-size: 14.5px; }
.empty b { display: block; font-family: var(--display); color: var(--ink); font-size: 16px; margin-bottom: 6px; }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field label, .field .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: var(--r); padding: 8px 11px; font-size: 14px; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--surface); border-color: var(--line-strong); }
.field textarea { resize: vertical; min-height: 68px; font-family: inherit; }
.field .hint { font-size: 12.5px; color: var(--muted); }
.field .err { font-size: 12.5px; color: var(--alert); display: none; }
.field.invalid input { border-color: var(--alert); }
.field.invalid .err { display: block; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }

.callout { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; line-height: 1.58; color: var(--ink-2); }
.callout svg { width: 16px; height: 16px; flex: none; margin-top: 1px; stroke: var(--muted); fill: none; stroke-width: 1.7; }
.callout b { color: var(--ink); font-weight: 620; }
.callout-alert { background: var(--alert-bg); border-color: var(--alert); color: var(--ink); }
.callout-alert svg { stroke: var(--alert); }
.callout-good { background: var(--good-bg); border-color: var(--good); color: var(--ink); }
.callout-good svg { stroke: var(--good); }
.side-note { padding: 13px 14px; display: flex; flex-direction: column; gap: 9px; }
.side-note p { font-size: 12.5px; line-height: 1.62; color: var(--ink-2); }
.side-note dl { display: flex; flex-direction: column; gap: 7px; }
.side-note dt { font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.side-note dd { margin: 3px 0 0; font-size: 12.5px; color: var(--ink); }

.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; background: var(--surface); border: 1px solid var(--line-strong); border-left: 3px solid var(--good); border-radius: var(--r); box-shadow: var(--shadow-pop); animation: slidein .3s cubic-bezier(.22,1.36,1) both; }
.toast.is-out { animation: slideout .25s ease both; }
.toast-alert { border-left-color: var(--alert); }
.toast > svg { width: 15px; height: 15px; flex: none; margin-top: 1px; stroke: var(--good); fill: none; stroke-width: 2.2; }
.toast-alert > svg { stroke: var(--alert); }
.toast-txt { font-size: 13px; line-height: 1.48; }
.toast-txt b { display: block; font-weight: 650; margin-bottom: 1px; }
.toast-txt span { color: var(--muted); font-size: 12.5px; }
@keyframes slidein { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes slideout { to { opacity: 0; transform: translateX(20px); } }

/* ══════════════ SIGN IN ══════════════ */
.gate { position: fixed; inset: 0; z-index: 80; background: var(--ground); display: grid; place-items: center; padding: 24px; overflow-y: auto; }
.gate[hidden] { display: none; }
[hidden] { display: none !important; }
.gate-card { display: grid; grid-template-columns: 300px minmax(0,380px); max-width: 700px; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop); overflow: hidden; }
.gate-side { background: var(--surface-2); border-right: 1px solid var(--line); padding: 26px 22px; display: flex; flex-direction: column; gap: 16px; }
.gate-side h2 { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.gate-side p { font-size: 13px; line-height: 1.62; color: var(--ink-2); }
.gate-facts { display: flex; flex-direction: column; gap: 7px; margin-top: auto; }
.gate-fact { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.45; }
.gate-fact svg { width: 13px; height: 13px; flex: none; margin-top: 2px; stroke: var(--good); fill: none; stroke-width: 2; }
.gate-main { padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.gate-step { display: none; flex-direction: column; gap: 14px; }
.gate-step.is-on { display: flex; }
.otp { display: flex; gap: 7px; }
.otp input { width: 100%; text-align: center; font-family: var(--mono); font-size: 19px; padding: 9px 0; }
.gate-accounts { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 13px; }
.gate-acct { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); cursor: pointer; text-align: left; width: 100%; }
.gate-acct:hover { border-color: var(--line-strong); background: var(--surface); }
.gate-acct .t { font-family: var(--display); font-size: 14px; font-weight: 700; }
.gate-acct .s { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.gate-acct .k { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.form-error { color: var(--alert); font-size: 13px; font-weight: 600; margin: 0; }



/* ══════════════ TILES & DASHBOARD ══════════════ */
.tiles { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 12px; align-items: stretch; }
.tile { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-height: 130px; }
.tile-label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tile-val { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: -.028em; line-height: 1; margin-top: 8px; }
.tile-foot { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.delta { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.delta-good { color: var(--good); }
.delta-bad { color: var(--alert); }
.tile-note, .tile-target { font-size: 12.5px; color: var(--muted); }
.tile-target { font-family: var(--mono); font-size: 11.5px; }
.tile-locked .tile-val { font-size: 21px; font-weight: 650; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.tile-locked svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.minis { display: grid; grid-template-columns: repeat(4,1fr); }
.mini { padding: 15px 18px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.mini:last-child { border-right: 0; }
.mini-v { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.mini-l { font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.ov-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 12px; align-items: start; }

/* the screen that asks the owner to go and look at the stock */
.hail { display: flex; gap: 13px; align-items: center; padding: 11px 14px; border-radius: var(--r); border: 1px solid var(--alert); background: var(--alert-bg); margin-bottom: 12px; flex-wrap: wrap; }
.hail-ico { width: 30px; height: 30px; border-radius: 50%; background: var(--alert); display: grid; place-items: center; flex: none; }
.hail-ico svg { width: 17px; height: 17px; stroke: var(--surface); fill: none; stroke-width: 2.4; }
.hail-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hail-h { font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.hail-s { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.hail-end { margin-left: auto; display: flex; gap: 8px; flex: none; }
.hail-good { border-color: var(--good); background: var(--good-bg); }
.hail-good .hail-ico { background: var(--good); }

.chart-body { padding: 4px 15px 14px; }
.plot { position: relative; height: 176px; margin: 20px 0 0 32px; }
.gridline { position: absolute; left: 0; right: 0; height: 1px; background: var(--grid); }
.gridline span { position: absolute; right: calc(100% + 9px); top: -9px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 10px; }
.bar-slot { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; background: none; border: 0; padding: 0; }
.bar { width: 100%; max-width: 46px; background: var(--bar); border-radius: 4px 4px 0 0; height: 0; }
.bar-slot[data-emph="1"] .bar { background: var(--plate); border: 1.5px solid var(--plate-edge); border-bottom: 0; }
.bar-slot:hover .bar { filter: brightness(1.09); }
.bar-val { position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); opacity: 0; transition: opacity .18s; white-space: nowrap; }
.bar-slot[data-emph="1"] .bar-val, .bar-slot:hover .bar-val, .bar-slot:focus-visible .bar-val { opacity: 1; }
.xaxis { display: flex; gap: 10px; border-top: 1px solid var(--line-strong); padding-top: 8px; margin-left: 32px; }
.xaxis span { flex: 1; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.xaxis span[data-emph="1"] { color: var(--ink); font-weight: 600; }

.row-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.row-item:last-child { border-bottom: 0; }
.row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-title { font-family: var(--display); font-size: 13.5px; font-weight: 700; }
.row-sub { font-size: 12px; color: var(--muted); }
.row-end { margin-left: auto; display: flex; align-items: center; gap: 9px; flex: none; }
.feed-item { display: flex; gap: 12px; padding: 11px 18px; }
.feed-time { font-family: var(--mono); font-size: 11.5px; color: var(--muted); width: 88px; flex: none; padding-top: 2px; font-variant-numeric: tabular-nums; }
.feed-txt { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.feed-txt b { color: var(--ink); font-weight: 620; }

/* ══════════════ VEHICLE IMAGERY ══════════════ */
.shot { position: relative; background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-sunk) 100%); border-radius: var(--r); overflow: hidden; display: block; width: 100%; }
/* direct children only, otherwise this swallows the pill icons
   sitting in the badge overlays on top of the picture */
.shot > svg, .shot > img { display: block; width: 100%; height: auto; }
.shot > img { aspect-ratio: 420 / 268; object-fit: cover; }
.shot-badge { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; z-index: 2; }
.shot-ph { position: absolute; right: 10px; bottom: 44px; z-index: 2; font-family: var(--mono); font-size: 9px;
  letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255.72);
  background: rgba(8,12,16.5); border-radius: 3px; padding: 3px 7px; }
/* a thumbnail that is still a drawing has to say so */
.gal-thumb .shot-ph { right: 5px; bottom: 5px; font-size: 8px; padding: 2px 5px; }
.shot-age { position: absolute; right: 10px; top: 10px; z-index: 2; }
/* The make and the year, on every picture of a car, everywhere.
   They are the two things a buyer and a salesperson both read first. */
.shot-id {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: baseline; gap: 12px; padding: 30px 15px 12px;
  background: linear-gradient(transparent, rgba(8,12,16.86) 62%);
  pointer-events: none;
}
.shot-make {
  font-family: var(--display); font-size: 21px; font-weight: 700;
  letter-spacing: .045em; text-transform: uppercase; color: #fff; line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0.7);
}
.shot-year {
  font-family: var(--mono); font-size: 14.5px; font-weight: 700; color: var(--plate);
  letter-spacing: .04em; line-height: 1; margin-left: auto;
  text-shadow: 0 2px 10px rgba(0,0,0.8);
}
.shot-sm .shot-id { padding: 20px 10px 8px; gap: 8px; }
.gal-thumb .shot-id { display: none; }
.shot-sm .shot-make { font-size: 13px; }
.shot-sm .shot-year { font-size: 11.5px; }
.shot-lg .shot-id { padding: 52px 22px 18px; }
.shot-lg .shot-make { font-size: 32px; }
.shot-lg .shot-year { font-size: 19px; }
.gallery { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.gal-thumb { padding: 0; border: 1px solid var(--line); background: none; border-radius: var(--r); cursor: pointer; overflow: hidden; display: block; }
.gal-thumb[aria-current="true"] { border-color: var(--plate-edge); box-shadow: 0 0 0 2px var(--plate); }
.hero-shot { border: 1px solid var(--line); }
/* ── one chip system, used everywhere, so a colour always means the
      same thing. Every chip carries its word as well as its colour. ── */
.ck { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 20px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid transparent; }
.ck svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; flex: none; }
.ck-ok    { background: var(--good-bg);  color: var(--good);   border-color: var(--good); }
.ck-no    { background: var(--alert-bg); color: var(--alert);  border-color: var(--alert); }
.ck-wait  { background: var(--wait-bg);  color: var(--ink-2);  border-color: var(--line-strong); }
.ck-veh   { background: color-mix(in srgb, var(--c-veh) 16%, transparent);  color: var(--c-veh);  border-color: var(--c-veh); }
.ck-prep  { background: color-mix(in srgb, var(--c-prep) 16%, transparent); color: var(--c-prep); border-color: var(--c-prep); }
.ck-vat   { background: color-mix(in srgb, var(--c-vat) 16%, transparent);  color: var(--c-vat);  border-color: var(--c-vat); }
.ck-hold  { background: color-mix(in srgb, var(--c-hold) 16%, transparent); color: var(--c-hold); border-color: var(--c-hold); }
.ck-plate { background: var(--plate); color: var(--plate-edge); border-color: var(--plate-edge); font-weight: 700; }

/* How the deal is paid. Three routes that are not interchangeable, and
   the choice underneath drives both the figures and the paperwork. */
.paypick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.payopt { display: flex; flex-direction: column; gap: 5px; padding: 12px 13px 13px; text-align: left;
  border: 1.5px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer;
  transition: border-color var(--micro), background var(--micro), transform .1s; }
.payopt:hover { border-color: var(--line-strong); }
.payopt:active { transform: translateY(1px); }
.payopt-h { display: flex; align-items: center; gap: 8px; }
.payopt b { font-family: var(--display); font-size: 15.5px; color: var(--ink); }
.payopt em { font-style: normal; font-size: 12px; color: var(--muted); line-height: 1.45; }
.payopt .pip { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: none; }
.payopt[aria-pressed="true"] { border-color: var(--plate-edge); background: var(--plate); }
.payopt[aria-pressed="true"] b, .payopt[aria-pressed="true"] em { color: var(--plate-edge); }
.payopt .pay-flag { align-self: flex-start; margin-top: 3px; padding: 2px 7px; border-radius: 20px;
  border: 1px solid currentColor; color: var(--muted); font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; }
.payopt[aria-pressed="true"] .pay-flag { color: var(--plate-edge); }
.payopt[aria-pressed="true"] .pip { border-color: var(--plate-edge); background: var(--plate-edge); box-shadow: inset 0 0 0 2.5px var(--plate); }

/* Two columns that always reconcile: what is owed, and where it comes from. */
.pay-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.pay-col + .pay-col { border-left: 1px solid var(--line); }
.pay-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 15px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.pay-h b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.pay-r { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 15px; font-size: 13.5px; color: var(--ink-2); }
.pay-r em { font-style: normal; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.pay-r.sub { padding-top: 2px; padding-bottom: 8px; font-size: 12px; color: var(--muted); }
.pay-r.sub em { color: var(--muted); font-size: 12px; }
.pay-r.tot { border-top: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); font-weight: 700; }
.pay-r.tot em { font-weight: 700; }
.pay-r.plus em { color: var(--good); } .pay-r.minus em { color: var(--muted); }
.pay-note { padding: 10px 15px; font-size: 12px; color: var(--muted); line-height: 1.55; border-top: 1px solid var(--line); }

/* The paperwork this payment route generates. Rows switch on and off. */
.docplan { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.docplan-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 15px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.docplan-h b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.docplan-r { display: flex; align-items: flex-start; gap: 11px; padding: 10px 15px; border-bottom: 1px solid var(--line); }
.docplan-r:last-child { border-bottom: 0; }
.docplan-r .dp-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.docplan-r .dp-t b { font-size: 13.5px; color: var(--ink); }
.docplan-r .dp-t span { font-size: 12px; color: var(--muted); line-height: 1.5; }
.docplan-r.gone { background: repeating-linear-gradient(135deg, transparent 0 7px, var(--surface-2) 7px 14px); }
.docplan-r.gone .dp-t b { color: var(--muted); text-decoration: line-through; }

/* completeness meter used by both checklists */
.done-bar { display: flex; align-items: center; gap: 10px; }
.done-bar i { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-sunk); overflow: hidden; }
.done-bar i b { display: block; height: 100%; border-radius: 3px; background: var(--good); transition: width .8s var(--ease); }
.done-bar i b.short { background: var(--alert); }
.done-bar span { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }

.ck-group { padding: 11px 16px 4px; display: flex; align-items: center; gap: 9px; }
.ck-group h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.ck-row { display: flex; align-items: center; gap: 11px; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.ck-row:last-child { border-bottom: 0; }
.ck-row:hover { background: var(--surface-2); }
.ck-name { font-size: 13.5px; font-weight: 600; }
.ck-sub { font-size: 12px; color: var(--muted); }
.ck-end { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.ck-blocked { border-left: 3px solid var(--alert); }

/* the shot list */
/* compact document rows */
.doc-head { padding: 11px 16px 4px; }
.doc-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.doc-row:last-of-type { border-bottom: 0; }
.doc-row:hover { background: var(--surface-2); }
.doc-n { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.doc-n b { font-size: 13.5px; font-weight: 620; }
.doc-n span { font-size: 11.5px; color: var(--muted); }
.set-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-row:hover { background: var(--surface-2); }
.set-in { display: flex; align-items: center; gap: 8px; flex: none; }
.set-u { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.set-in input { width: 92px; text-align: right; border: 1px solid var(--line-strong); background: var(--surface);
  border-radius: var(--r); padding: 7px 10px; font-family: var(--mono); font-size: 14px; }
.doc-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
.shot-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 12px; }
.shot-chips .ck { font-size: 10px; }
.shots-needed { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding: 14px 16px; }
.shot-slot { border: 1.5px dashed var(--line-strong); border-radius: var(--r); padding: 10px 8px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; background: var(--surface-2); }
.shot-slot:hover { border-color: var(--plate-edge); background: var(--surface); }
.shot-slot.have { border-style: solid; border-color: var(--good); background: var(--good-bg); cursor: default; }
.shot-slot svg { width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 1.7; }
.shot-slot.have svg { stroke: var(--good); }
.shot-slot b { font-size: 12px; font-weight: 620; }
.shot-slot span { font-family: var(--mono); font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 12px 16px; }
.legend span { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); }

.dropzone { border: 1.5px dashed var(--line-strong); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; cursor: pointer; background: var(--surface-2); }
.dropzone:hover, .dropzone.over { border-color: var(--plate-edge); background: var(--surface); }
.dropzone svg { width: 24px; height: 24px; stroke: var(--muted); fill: none; stroke-width: 1.6; }
.dropzone b { font-family: var(--display); font-size: 14px; font-weight: 700; }
.dropzone span { font-size: 13px; color: var(--muted); line-height: 1.55; }

/* ══════════════ STOCK ══════════════ */
.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(286px, 1fr)); gap: 12px; align-items: stretch; }
.stock-card { display: flex; flex-direction: column; overflow: hidden; cursor: pointer; text-align: left; padding: 0; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); }
/* A fixed row rhythm, so the title, the spec line, the chips and the
   price sit at the same height on every card regardless of how long
   the model name happens to be. */
.stock-body { padding: 14px 15px 13px; display: grid; grid-template-rows: auto auto auto auto; gap: 8px; flex: 1; align-content: start; }
.stock-title { font-family: var(--display); font-size: 15.5px; font-weight: 700; letter-spacing: -.014em; line-height: 1.28;
  min-height: 2.56em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stock-sub { font-family: var(--mono); font-size: 11.5px; color: var(--muted); line-height: 1.45; min-height: 2.9em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stock-price { display: flex; align-items: baseline; gap: 8px; padding-top: 9px; border-top: 1px solid var(--line); }
.stock-ask { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -.024em; font-variant-numeric: tabular-nums; }
.stock-marg { margin-left: auto; font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.stock-meta { display: flex; gap: 5px; flex-wrap: wrap; align-content: flex-start; min-height: 3.4em; }

/* the ageing bar, ordered bins on a validated single-hue ramp */
.age-bar { display: flex; gap: 2px; height: 30px; border-radius: 3px; overflow: hidden; }
.age-seg { display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 700; min-width: 28px; }
.age-1 { background: var(--age1); color: var(--ageT1); }
.age-2 { background: var(--age2); color: var(--ageT2); }
.age-3 { background: var(--age3); color: var(--ageT3); }
.age-4 { background: var(--age4); color: var(--ageT4); }
/* One cell per band: swatch and name on top, the numbers beneath, so
   the eye can compare down a column instead of reading a sentence. */
.key-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: 8px; margin-top: 12px; }
.key-item { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; display: flex; flex-direction: column; gap: 5px; }
.key-top { display: flex; align-items: center; gap: 7px; }
.key-top i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.key-top b { font-size: 12.5px; font-weight: 650; }
.key-nums { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.key-nums span { color: var(--muted); font-size: 11.5px; }
.age-dot { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; }
.age-dot i { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* ══════════════ COST / MARGIN ══════════════ */
.money-bar { display: flex; gap: 2px; height: 34px; border-radius: 3px; overflow: hidden; }
.money-seg { display: grid; place-items: center; font-family: var(--mono); font-size: 12.5px; font-weight: 700; overflow: hidden; white-space: nowrap; min-width: 4px; }
.ms-cost   { background: var(--c-veh);  color: var(--c-ink); }
.ms-recon  { background: var(--c-prep); color: var(--c-ink); }
.ms-vat    { background: var(--c-vat);  color: var(--c-ink); }
.ms-hold   { background: var(--c-hold); color: var(--c-ink); }
.ms-profit { background: var(--plate); color: var(--plate-edge); border: 1.5px solid var(--plate-edge); }
.ms-loss   { background: var(--alert); color: #fff; }
/* the amount inside a segment is a convenience, the key below is the
   authoritative label, which is what makes the 6–8 CVD band legal */
.money-seg { text-shadow: 0 1px 2px rgba(0,0,0.35); }
.ms-profit, .ms-hold { text-shadow: none; }


.money-tbl td { padding: 9px 16px; font-size: 14px; }
.col-split { border-left: 1px solid var(--line); }
@media (max-width: 1120px) { .col-split { border-left: 0; border-top: 1px solid var(--line); } }
.money-tbl td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.money-tbl tr.grp td { background: var(--surface-2); font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 10px 16px; }
.money-tbl tr.tot td { font-weight: 700; border-top: 2px solid var(--line-strong); background: var(--surface-sunk); }
.money-tbl tr.tot.good td { background: var(--good-bg); border-top-color: var(--good); }
.money-tbl tr.tot.bad td { background: var(--alert-bg); border-top-color: var(--alert); }
.money-tbl tr.tot td.num { font-family: var(--display); font-size: 18px; }
.money-tbl tr.good td.num, .money-tbl tr.bad td.num { font-weight: 650; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 12px; padding: 15px 16px; align-content: start; }
.kv dt { font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.kv dd { font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.kv .rule { grid-column: 1/-1; height: 1px; background: var(--line); margin: 2px 0; }
.kv .total { font-family: var(--display); font-weight: 700; font-size: 16.5px; }
.kv dt.total { font-family: var(--mono); font-size: 11px; padding-top: 6px; }

.advisor { padding: 14px 15px; display: flex; flex-direction: column; gap: 10px; }
.advisor-row { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); }
.advisor-row.floor { border-color: var(--alert); background: var(--alert-bg); }
.advisor-row.aim { border-color: var(--good); background: var(--good-bg); }
.advisor-l { font-size: 13px; line-height: 1.5; }
.advisor-l b { font-weight: 650; }
.advisor-v { margin-left: auto; font-family: var(--mono); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }

/* ══════════════ SPEC GRID ══════════════ */
.spec { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); }
.spec > div { background: var(--surface); padding: 13px 15px; display: flex; flex-direction: column; gap: 4px; }
.spec dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.spec dd { margin: 0; font-family: var(--display); font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.spec dd.data { font-family: var(--mono); font-weight: 550; font-size: 13.5px; }
.reveal-in { animation: pop .32s cubic-bezier(.22,1.36,1) both; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ══════════════ TIMELINE / LOG ══════════════ */
.tl { display: flex; flex-direction: column; padding: 6px 0; }
.tl-item { display: flex; gap: 11px; padding: 7px 15px; position: relative; }
.tl-item::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.tl-item:first-child::before { top: 14px; }
.tl-item:last-child::before { bottom: calc(100% - 14px); }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 5px; background: var(--line-strong); box-shadow: 0 0 0 2px var(--surface); position: relative; z-index: 1; }
.tl-dot.good { background: var(--good); } .tl-dot.alert { background: var(--alert); } .tl-dot.money { background: var(--plate); }
.tl-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tl-t { font-size: 13.5px; }
.tl-t b { font-weight: 620; }
.tl-s { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.tl-amt { margin-left: auto; font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; flex: none; padding-left: 12px; }

/* ══════════════ WIZARD ══════════════ */
.stepper { display: flex; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 18px; }
.step { flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-right: 1px solid var(--line); background: none; text-align: left; min-width: 0; }
.step:last-child { border-right: 0; }
.step-num { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--mono); font-size: 12.5px; font-weight: 700; background: var(--surface-sunk); color: var(--muted); border: 1px solid transparent; }
.step-num svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 3; }
.step-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.step-name { font-family: var(--display); font-size: 13.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.step-hint { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.step[data-state="now"] { background: var(--surface-2); }
.step[data-state="now"] .step-num { background: var(--plate); color: var(--plate-edge); border-color: var(--plate-edge); }
.step[data-state="now"] .step-name { color: var(--ink); }
.step[data-state="done"] .step-num { background: var(--good-bg); color: var(--good); }
.step[data-state="done"] .step-name { color: var(--ink-2); }
.wiz-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 12px; align-items: start; }
.pane { display: none; }
.pane.is-on { display: block; }
.wiz-foot { display: flex; gap: 9px; margin-top: 16px; align-items: center; flex-wrap: wrap; }
.autosave { font-family: var(--mono); font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.autosave svg { width: 12px; height: 12px; stroke: var(--good); fill: none; stroke-width: 2.4; }
.consents { display: flex; flex-direction: column; gap: 2px; }
.consent { display: flex; gap: 13px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); cursor: pointer; align-items: flex-start; }
.consent:hover { border-color: var(--line-strong); }
.consent input { margin: 2px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--plate); }
.consent-txt { display: flex; flex-direction: column; gap: 3px; }
.consent-lead { font-size: 13.5px; font-weight: 550; line-height: 1.48; }
.consent-basis { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.consent-req { color: var(--alert); }

.lookup { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 26px 15px 22px; }
.plate-input-shell { display: flex; align-items: stretch; background: var(--plate); border: 3px solid var(--plate-edge); border-radius: 7px; overflow: hidden; box-shadow: var(--shadow-lift); }
.plate-input-shell .band { background: var(--band); color: #fff; width: 40px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 8px; font-size: 12.5px; font-weight: 700; }
.plate-input-shell .band em { font-style: normal; margin-bottom: auto; margin-top: 10px; width: 20px; height: 13px; border-radius: 1px;
  background: linear-gradient(#C8102E,#C8102E) 50% 50%/100% 3px no-repeat, linear-gradient(#C8102E,#C8102E) 50% 50%/3px 100% no-repeat,
              linear-gradient(#fff,#fff) 50% 50%/100% 6px no-repeat, linear-gradient(#fff,#fff) 50% 50%/6px 100% no-repeat, var(--band); }
#plateInput { border: 0; background: none; outline: none; font-family: var(--plate-face); font-size: 42px; letter-spacing: .05em; color: var(--plate-edge); text-transform: uppercase; padding: 7px 16px 11px 12px; width: 288px; text-align: center; }
#plateInput::placeholder { color: rgba(20,17,12.26); }
.plate-input-shell:focus-within { box-shadow: var(--shadow-lift), 0 0 0 3px rgba(0,51,153.4); }
.plate-input-shell.shake { animation: shake .4s; }
@keyframes shake { 10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(4px)} 50%{transform:translateX(-4px)} }
.suggests { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.suggests button { border: 1px dashed var(--line-strong); background: none; cursor: pointer; border-radius: 3px; padding: 5px 10px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.suggests button:hover { color: var(--ink); border-color: var(--ink); border-style: solid; }
.wire { font-family: var(--mono); font-size: 12px; line-height: 1.85; color: var(--muted); background: var(--surface-sunk); border-radius: var(--r); padding: 9px 12px; width: 100%; max-width: 480px; }
.wire div { opacity: 0; transition: opacity .2s; }
.wire div.on { opacity: 1; }
.wire b { color: var(--good); font-weight: 400; }
.wire b.bad { color: var(--alert); }

.pick-list { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; }
.pick { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; }
.pick:last-child { border-bottom: 0; }
.pick:hover { background: var(--surface-2); }
.pick .shot { width: 108px; flex: none; }
.pick-t { font-family: var(--display); font-size: 14px; font-weight: 700; }
.pick-s { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.docs { display: flex; flex-direction: column; gap: 12px; align-self: start; }
.doc { display: flex; gap: 13px; padding: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.doc-page { width: 70px; height: 96px; flex: none; background: #fff; border: 1px solid var(--line-strong); border-radius: 1px; padding: 7px 6px; overflow: hidden; font-family: var(--serif); color: #1a1a1a; box-shadow: 0 2px 6px rgba(0,0,0.16); }
.doc-page .t { font-size: 4.5px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.doc-page .l { height: 1.5px; background: #c9ccd0; border-radius: 1px; margin-bottom: 3px; }
.doc-page .l.s { width: 55%; } .doc-page .l.m { width: 78%; }
.doc-page .sigbox { margin-top: 6px; height: 14px; border: 1px dashed var(--plate-edge); background: rgba(255,212,0.32); border-radius: 1px; display: grid; place-items: center; font-family: var(--sans); font-size: 4px; font-weight: 700; }
.doc-meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.doc-title { font-family: var(--display); font-size: 14.5px; font-weight: 700; }
.doc-desc { font-size: 13px; color: var(--muted); line-height: 1.55; }
.doc-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.sign-grid { display: grid; grid-template-columns: minmax(0,1fr) 32px minmax(0,344px); align-items: center; }
.brace { align-self: stretch; position: relative; }
.brace::before { content: ""; position: absolute; left: 5px; top: 22%; bottom: 22%; width: 13px; border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 12px 12px 0; }
.brace::after { content: ""; position: absolute; right: -1px; top: 50%; width: 14px; height: 1px; background: var(--line-strong); }
.envelope { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.env-head { display: flex; align-items: center; gap: 9px; }
.env-vendor { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.env-id { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.recipient { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.audit-step { display: flex; gap: 9px; align-items: flex-start; padding: 4px 0; opacity: .32; transition: opacity .3s; }
.audit-step.on { opacity: 1; }
.audit-dot { width: 13px; height: 13px; border-radius: 50%; flex: none; margin-top: 2px; border: 1.5px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; }
.audit-step.on .audit-dot { border-color: var(--good); background: var(--good); }
.audit-step.on .audit-dot svg { display: block; }
.audit-dot svg { display: none; width: 8px; height: 8px; stroke: var(--surface); fill: none; stroke-width: 2.8; }
.audit-txt { font-size: 12.5px; line-height: 1.45; }
.audit-time { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-left: auto; flex: none; padding-top: 2px; }
/* the wet-signature ceremony */
.wet-bar { display: flex; align-items: center; gap: 10px; }
.wet-bar > i { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-sunk); overflow: hidden; display: block; }
.wet-bar > i > b { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--good); transition: width .5s var(--ease); }
.wet-bar > span { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.wet-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--line); transition: opacity var(--micro); }
.wet-row:last-child { border-bottom: 0; }
.wet-dot { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; background: var(--surface-sunk); color: var(--muted);
  border: 1px solid var(--line); transition: background var(--micro), color var(--micro), border-color var(--micro); }
.wet-dot svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 3; animation: tickIn .34s var(--ease) both; }
.wet-row.is-done .wet-dot { background: var(--good); color: #fff; border-color: var(--good); }
.wet-row.is-next .wet-dot { background: var(--plate); color: var(--plate-edge); border-color: var(--plate-edge); }
.wet-row.is-wait { opacity: .45; }
.wet-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wet-n { font-size: 13px; font-weight: 620; }
.wet-s { font-size: 11.5px; color: var(--muted); }
.wet-row.is-done .wet-s { color: var(--good); }
.wet-end { margin-left: auto; flex: none; }
.env-actions { display: flex; gap: 6px; }
.env-actions .btn { flex: 1; }

/* signature pad, the free, built-in signing route */
.sigpad-wrap { border: 1px solid var(--line-strong); border-radius: var(--r); background: #fff; position: relative; }
.sigpad-wrap canvas { display: block; width: 100%; height: 130px; touch-action: none; cursor: crosshair; border-radius: var(--r); }
.sigpad-line { position: absolute; left: 16px; right: 16px; bottom: 26px; border-top: 1px dashed #b9bec4; pointer-events: none; }
.sigpad-hint { position: absolute; left: 18px; bottom: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #9aa0a6; pointer-events: none; }

.filed-banner { display: flex; align-items: center; gap: 13px; padding: 15px 17px; background: var(--good-bg); border: 1px solid var(--good); border-radius: var(--r); flex-wrap: wrap; }
.filed-banner .ico { width: 32px; height: 32px; border-radius: 50%; background: var(--good); flex: none; display: grid; place-items: center; }
.filed-banner .ico svg { width: 17px; height: 17px; stroke: var(--surface); fill: none; stroke-width: 2.8; }
.filed-h { font-family: var(--display); font-size: 17px; font-weight: 700; }
.filed-s { font-size: 14.5px; color: var(--ink-2); }
.bundle { display: flex; gap: 16px; padding: 15px; align-items: flex-start; }
.bundle-doc { width: 110px; flex: none; background: #fff; border: 1px solid var(--line-strong); border-radius: 2px; padding: 11px 10px; font-family: var(--serif); color: #1a1a1a; box-shadow: 0 3px 10px rgba(0,0,0.2); position: relative; z-index: 0; }
.bundle-doc::after { content: ""; position: absolute; inset: 5px -5px -5px 5px; z-index: -1; background: #fff; border: 1px solid var(--line-strong); border-radius: 2px; }
.bundle-doc .t { font-size: 6.5px; font-weight: 700; line-height: 1.25; }
.bundle-doc .r { height: 1px; background: #1a1a1a; margin: 5px 0 7px; }
.bundle-doc .l { height: 2px; background: #cfd2d6; border-radius: 1px; margin-bottom: 4px; }
.bundle-doc .pg { margin-top: 9px; font-family: var(--mono); font-size: 5.5px; color: #888; }
.toc { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.toc-item { display: flex; align-items: baseline; gap: 9px; padding: 6px 0; border-bottom: 1px dotted var(--line); }
.toc-item:last-child { border-bottom: 0; }
.toc-n { font-family: var(--mono); font-size: 11.5px; color: var(--muted); width: 20px; flex: none; }
.toc-t { font-size: 13.5px; }
.toc-p { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.fingerprint { font-family: var(--mono); font-size: 11.5px; color: var(--muted); word-break: break-all; line-height: 1.6; }



/* ══════════════ CUSTOMERS / FOLLOW-UPS ══════════════ */
.cust-grid { display: grid; grid-template-columns: 290px minmax(0,1fr); gap: 12px; align-items: start; }
.cust-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; }
.cust-item:last-child { border-bottom: 0; }
.cust-item:hover, .cust-item[aria-selected="true"] { background: var(--surface-2); }
.cust-item[aria-selected="true"] .cust-name { font-weight: 700; }
.cust-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cust-name { font-family: var(--display); font-size: 13.5px; font-weight: 650; }
.cust-sub { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.cust-flag { margin-left: auto; flex: none; }
.detail-head { padding: 15px; display: flex; gap: 14px; align-items: flex-start; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.detail-head .avatar { width: 44px; height: 44px; font-size: 16px; }
.detail-name { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -.022em; }
.detail-contact { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.detail-contact span { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.consent-row { display: flex; align-items: center; gap: 11px; padding: 10px 15px; border-bottom: 1px solid var(--line); }
.consent-row:last-child { border-bottom: 0; }
.consent-row .row-main { flex: 1; }
.consent-lock { font-family: var(--mono); font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.note { display: flex; gap: 12px; padding: 11px 15px; border-bottom: 1px solid var(--line); }
.note:last-child { border-bottom: 0; }
.note-rail { width: 70px; flex: none; display: flex; flex-direction: column; gap: 2px; }
.note-date { font-family: var(--mono); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.note-by { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.note-body { font-size: 13.5px; line-height: 1.58; color: var(--ink-2); }
.note-followup { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-family: var(--mono); font-size: 11.5px; padding: 3px 8px; border-radius: 2px; background: var(--wait-bg); color: var(--ink-2); }
.note-followup.due { background: var(--alert-bg); color: var(--alert); }
.note-followup svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
.composer { padding: 13px 15px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.composer-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.composer-row .field { flex: none; width: 160px; }

.fu-cols { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; align-items: start; }
.fu-head { min-height: 46px; }
.fu-col { display: flex; flex-direction: column; overflow: hidden; }
.fu-head { padding: 11px 13px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.fu-head b { font-family: var(--display); font-size: 14.5px; font-weight: 700; }
.fu-count { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fu-col.late { border-color: var(--alert); }
.fu-col.late .fu-head { background: var(--alert-bg); border-bottom-color: var(--alert); }
.fu-col.late .fu-count { color: var(--alert); font-weight: 700; }
.fu-col.today { border-color: var(--plate-edge); }
.fu-col.today .fu-head { background: rgba(255,212,0.18); }
/* Every row has a reserved height, so four columns of cards read across
   as neat bands instead of a ragged stack. */
.fu-item { padding: 13px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.fu-top { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.fu-top .ck { margin-left: auto; flex: none; }
.fu-who { font-family: var(--display); font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu-car { display: flex; align-items: center; gap: 8px; min-height: 24px; min-width: 0; }
.fu-car > span { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu-what { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; min-height: 3.75em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fu-meta { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.fu-phone { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.fu-acts { display: grid; grid-template-columns: 1fr 1fr auto; gap: 5px; }
.fu-acts .btn { padding: 5px 8px; font-size: 12px; }
.fu-item:last-child { border-bottom: 0; }


.fu-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }


/* ══════════════ P&L / REPORTS ══════════════ */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tab { border: 0; background: none; cursor: pointer; padding: 10px 14px; font-family: var(--display); font-size: 14px; font-weight: 650; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--plate); }
.tabpanel { display: none; }
.tabpanel.is-on { display: block; }

/* every control on one baseline, same height, whatever is showing */
.period { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); margin-bottom: 12px; }
.period .field { width: 168px; flex: none; flex-direction: row; align-items: center; gap: 8px; }
.period .field label { flex: none; }
.period .field input { height: 34px; padding: 0 10px; }
.period .seg { align-self: center; }
.period .seg button { height: 28px; display: flex; align-items: center; }
.period-end { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.period-end .btn { height: 34px; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .75; cursor: pointer; }
input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

.pnl-hero { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; }
.pnl-cell { padding: 17px 19px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.pnl-cell:last-child { border-right: 0; }
.pnl-l { font-family: var(--mono); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.pnl-v { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: -.028em; line-height: 1; margin-top: 6px; }
.pnl-s { font-size: 13px; color: var(--muted); margin-top: 5px; }
.inline-bar { height: 4px; border-radius: 2px; background: var(--surface-sunk); overflow: hidden; min-width: 46px; }
.inline-bar i { display: block; height: 100%; border-radius: 2px; background: var(--bar); }
.inline-bar i.pos { background: var(--good); } .inline-bar i.neg { background: var(--alert); }
.bar-cell { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }

/* ══════════════ ADMIN ══════════════ */
.matrix th:first-child { width: 42%; }
.matrix td.mark { text-align: center; }
.matrix td.mark svg { width: 15px; height: 15px; stroke-width: 2.2; fill: none; }
.matrix .yes { stroke: var(--good); } .matrix .no { stroke: var(--line-strong); }
.matrix .scope { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.matrix tr.grp td { background: var(--surface-2); padding: 7px 14px; border-bottom: 1px solid var(--line); }
.matrix td.mark { text-align: center; white-space: nowrap; }
.matrix tbody tr:not(.grp):hover { background: var(--surface-2); }
.sec-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; align-items: stretch; }
.sec-card { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.sec-top { display: flex; align-items: center; gap: 9px; }
.sec-top svg { width: 19px; height: 19px; stroke: var(--good); fill: none; stroke-width: 1.8; flex: none; }
.sec-title { font-family: var(--display); font-size: 14px; font-weight: 700; }
.sec-body { font-size: 12.5px; line-height: 1.62; color: var(--ink-2); }
.sec-body code { font-family: var(--mono); font-size: 12px; background: var(--surface-sunk); padding: 1px 5px; border-radius: 2px; color: var(--ink); }
.ownership { display: flex; gap: 14px; padding: 15px 17px; border-left: 3px solid var(--plate); }
.ownership .body { font-size: 13px; line-height: 1.65; color: var(--ink-2); }
.ownership ul { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.ownership li { font-size: 12.5px; color: var(--ink-2); padding-left: 17px; position: relative; }
.ownership li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 1px; background: var(--line-strong); }

/* The one we build first is the only one in full colour. The other two
   are real options, shown greyed so nobody mistakes them for the plan. */
.opt-card { position: relative; padding: 16px; display: flex; flex-direction: column; gap: 11px; height: 100%;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
  cursor: pointer; text-align: left; transition: opacity var(--micro), transform var(--micro) var(--ease), box-shadow var(--micro); }
.opt-card.is-off { opacity: .5; filter: grayscale(.9); background: var(--surface-2); }
.opt-card.is-off:hover { opacity: .78; filter: grayscale(.5); }
.opt-card.is-free { border-color: var(--plate-edge); border-width: 2px; padding: 15px; background: var(--surface); }
.opt-card.is-free.is-on { box-shadow: var(--shadow-lift), 0 0 0 3px var(--plate); transform: translateY(-2px); }
.opt-flag { position: absolute; top: -1px; right: 14px; background: var(--plate); color: var(--plate-edge);
  border: 1px solid var(--plate-edge); border-top: 0; border-radius: 0 0 4px 4px; padding: 3px 9px 4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; }
.opt-foot { margin-top: auto; display: flex; gap: 7px; align-items: center; }
.opt-top { display: flex; align-items: center; gap: 9px; }
.opt-name { font-family: var(--display); font-size: 15px; font-weight: 700; }
.opt-cost { margin-left: auto; font-family: var(--mono); font-size: 12.5px; }
.opt-body { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.opt-rate { display: flex; align-items: center; gap: 7px; }
.opt-rate i { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-sunk); overflow: hidden; }
.opt-rate i b { display: block; height: 100%; background: var(--age3); border-radius: 2px; }
.opt-rate span { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ══════════════ RESPONSIVE / PRINT ══════════════ */
@media (max-width: 1240px) { .fu-cols { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 1120px) {
  .tiles, .grid-4, .minis { grid-template-columns: repeat(2,1fr); }
  .ov-grid, .wiz-grid, .cust-grid, .sec-grid, .rec-grid { grid-template-columns: minmax(0,1fr); }
  .sign-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .brace { display: none; }
  .spec, .gallery { grid-template-columns: repeat(2,1fr); }
  .pnl-hero { grid-template-columns: minmax(0,1fr); }
  .pnl-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .gate-card { grid-template-columns: minmax(0,1fr); max-width: 380px; }
  .gate-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px; }
  .minis .mini:nth-child(2n) { border-right: 0; }
}
@media (max-width: 880px) {
  .shell { grid-template-columns: minmax(0,1fr); grid-template-rows: auto 1fr; }
  .rail { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; padding: 10px 8px; gap: 8px; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav-sec { display: none; }
  .nav-item { width: auto; }
  .nav-item[aria-current="page"]::before { top: auto; bottom: 0; left: 8px; right: 8px; width: auto; height: 2px; border-radius: 2px 2px 0 0; }
  .topbar { padding: 10px 16px; }
  .canvas { padding: 18px 16px 48px; }
  .grid-2, .grid-3, .grid-4, .tiles, .minis, .fu-cols { grid-template-columns: minmax(0,1fr); }
  .minis .mini { border-right: 0; border-bottom: 1px solid var(--line); }
  .stepper { flex-wrap: wrap; }
  .step { flex: 1 1 45%; }
  #plateInput { width: 186px; font-size: 29px; }
  .toasts { left: 12px; right: 12px; max-width: none; }
  .brand-sub { display: none; }
  .rail-foot { margin-top: 0; }
}
@media print {
  .rail, .topbar, .toasts, .view-head-actions, .wiz-foot, .composer, .skip, .period-end, .fu-acts { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  .card { box-shadow: none; break-inside: avoid; }
  .app { background: #fff; color: #000; }
}



/* ══════════════════════════════════════════════════════════════
   MOTION, "instrument cluster"
   Three devices, and no others:
     1. odometer   a figure that changed turns to its new value
     2. assemble   cards rise 10px in document order
     3. respond    hover and press answer within 300ms
   Everything settles inside ~1.2s and then the screen holds still.
   Exactly one element is allowed to keep moving: the thing that
   needs chasing.
   ══════════════════════════════════════════════════════════════ */
:root { --ease: cubic-bezier(.16,1.3,1); --micro: .28s; --enter: .55s; --roll: 1.05s; }

.odo { display: inline-flex; align-items: flex-start; }
.odo .d { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.odo .d i { display: block; font-style: normal; transition: transform var(--roll) var(--ease); }
.odo .d i b { display: block; height: 1em; line-height: 1; font-weight: inherit; }
.odo .sep { display: inline-block; height: 1em; line-height: 1; }
.tile-val, .mini-v, .rec-val, .pnl-v, .stock-ask { line-height: 1; }

.view.is-on, .pane.is-on, .tabpanel.is-on { animation: viewIn .22s ease both; }
@keyframes viewIn { from { opacity: 0; } to { opacity: 1; } }
.rv { opacity: 0; transform: translateY(10px); }
.rv.in { opacity: 1; transform: none; transition: opacity var(--enter) var(--ease), transform var(--enter) var(--ease); transition-delay: var(--rv-d, 0ms); }

.btn:active:not(:disabled), .chip:active, .icon-btn:active { transform: translateY(1px); }
.btn, .chip, .icon-btn { transition: background var(--micro), border-color var(--micro), transform .1s; }
.tile, .stock-card, .doc { position: relative; overflow: hidden; transition: transform var(--micro) var(--ease), box-shadow var(--micro); }
.tile::before, .stock-card::before { content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 100%; background: var(--plate); transform: scaleX(0); transform-origin: left; transition: transform .42s var(--ease); z-index: 2; }
.tile:hover, .stock-card:hover, .doc:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.tile:hover::before, .tile:focus-within::before, .stock-card:hover::before, .stock-card:focus-visible::before { transform: scaleX(1); }
.tile-meter { height: 3px; border-radius: 2px; background: var(--surface-sunk); overflow: hidden; }
.tile-meter i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--ink-2); transition: width var(--roll) var(--ease) .25s; }
.tile-meter.hit i { background: var(--good); }
.tile-meter.miss i { background: var(--alert); }
.tbl-rows tbody tr { transition: background var(--micro); }
.tbl-rows tbody td:first-child, .cust-item, .row-item, .fu-item { position: relative; }
.tbl-rows tbody td:first-child::before, .cust-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--plate); transform: scaleY(0); transition: transform .24s var(--ease); }
.tbl-rows tbody tr:hover td:first-child::before, .cust-item:hover::before, .cust-item[aria-selected="true"]::before { transform: scaleY(1); }
.cust-item, .row-item { transition: background var(--micro); }
.nav-item[aria-current="page"]::before { animation: navIn .3s var(--ease) both; }
@keyframes navIn { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.step[data-state="done"] .step-num svg { animation: tickIn .32s var(--ease) both; }
@keyframes tickIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.track { display: flex; gap: 3px; width: 96px; }
.track i { height: 3px; flex: 1; border-radius: 2px; background: var(--surface-sunk); transform-origin: left; animation: trackIn .42s var(--ease) both; }
.track i.on { background: var(--ink-2); } .track i.done { background: var(--good); }
.track-lg { width: 100%; gap: 4px; } .track-lg i { height: 4px; }
.track i:nth-child(1){animation-delay:.04s} .track i:nth-child(2){animation-delay:.10s}
.track i:nth-child(3){animation-delay:.16s} .track i:nth-child(4){animation-delay:.22s}
@keyframes trackIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.age-seg, .money-seg, .inline-bar i { transition: width var(--roll) var(--ease); }

.live { position: relative; padding-left: 14px; }
.live::before, .live::after { content: ""; position: absolute; left: 0; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--alert); }
.live::after { animation: ping 2.4s cubic-bezier(0,0.2,1) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .6; } 70%,100% { transform: scale(2.7); opacity: 0; } }
.icon-btn .dot { animation: ping 2.4s cubic-bezier(0,0.2,1) infinite; }

/* Everything above is decoration. This is not optional. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .rv { opacity: 1 !important; transform: none !important; }
  .icon-btn .dot, .live::after { animation: none !important; }
}


td,th{border:1px solid #ccc;padding:4px;font-family:Calibri,sans-serif;font-size:11pt}
    th{background:#FFD400;font-weight:bold}caption{font-weight:bold;text-align:left;padding:6px 0}