/* Merch Queue. Phone = one column of stacked cards; desktop (>=960px) = dense rows, fluid to 1800px. */

/* ===== SHARED TOKENS: verbatim copy of _Dashboards/_design/design-tokens.css (rules in DESIGN.md there).
   Change it there first, then paste it here. Project-specific tokens follow the copy. ===== */
/* Canada One Auto dashboards: shared design tokens (dark is the default; light values are kept but unused).
   Source of truth for every dashboard under _Dashboards/. Projects that cannot link across folders (Cloudflare
   Pages builds from one folder) carry a copy of this block at the top of their stylesheet and say so in a comment.
   Reference implementation: _Dashboards/Salesperson-Dashboard-Web/web/index.html. Rules: DESIGN.md beside this file.
   Updated 2026-10-27: surface/inset/raised stepped up one notch so cards lift off the body. */
:root{
  /* surfaces: body (with a radial glow), sticky bars + cards, inset controls, raised/hover */
  --bg:#08090d; --bg-glow:#12151f; --surface:#181b24; --inset:#1c1f2a; --raised:#22262f; --row-hover:#22262f;
  /* text: body, headings/keys, secondary, uppercase labels, least important */
  --fg:#e0e0e0; --heading:#ffffff; --muted:#9ca3af; --label:#94a3b8; --faint:#6b7280;
  /* borders: containers, cards, buttons/inputs, button hover */
  --line:#1f2937; --line-card:#1e293b; --line-btn:#374151; --line-btn-hover:#4b5563;
  /* the one accent (primary action), with dark text on it */
  --accent:#fbbf24; --accent-fg:#111827; --accent-soft:rgba(251,191,36,.14);
  /* status / category accents, identical in both themes; soft = 14% tint for pill backgrounds. Slate = neutral/waiting.
     Red is reserved for urgency (age escalation, errors), never for a category. */
  --red:#f87171; --purple:#c084fc; --amber:#f59e0b; --cyan:#22d3d3; --blue:#60a5fa; --gold:#fbbf24; --green:#4ade80; --slate:#94a3b8;
  --red-soft:rgba(248,113,113,.14); --purple-soft:rgba(192,132,252,.14); --amber-soft:rgba(245,158,11,.14); --cyan-soft:rgba(34,211,211,.14);
  --blue-soft:rgba(96,165,250,.14); --gold-soft:rgba(251,191,36,.14); --green-soft:rgba(74,222,128,.14); --slate-soft:rgba(148,163,184,.14);
  --shadow:rgba(0,0,0,.5);
  /* type: DM Sans for text, Oswald for numerals and short display strings (stock numbers, counts, ages, PINs) */
  --sans:"DM Sans","Segoe UI",system-ui,sans-serif;
  --num:"Oswald","DM Sans",sans-serif;
  --mono:ui-monospace,Consolas,monospace;
  /* shape: container 14, card 12, item/input 8, button/pill 6; avatars and picker pills are round */
  --r-container:14px; --r-card:12px; --r-item:8px; --r-btn:6px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f0f4f8; --bg-glow:#f0f4f8; --surface:#ffffff; --inset:#f8fafc; --raised:#f3f4f6; --row-hover:#e5e7eb;
  --fg:#1f2937; --heading:#111827; --muted:#6b7280; --label:#64748b; --faint:#9ca3af;
  --line:#e5e7eb; --line-card:#e2e8f0; --line-btn:#d1d5db; --line-btn-hover:#9ca3af;
  --accent:#f59e0b; --accent-fg:#111827; --accent-soft:#fff3bf;
  --shadow:rgba(0,0,0,.1); color-scheme:light}
/* ===== end of shared copy ===== */

/* Project tokens: the merch steps mapped onto the shared accents. */
:root{
  --shoot:var(--cyan); --reshoot:var(--purple); --edit:var(--amber); --upload:var(--blue); --describe:var(--slate); --price:var(--gold); --review:var(--green);
  --shoot-soft:var(--cyan-soft); --reshoot-soft:var(--purple-soft); --edit-soft:var(--amber-soft); --upload-soft:var(--blue-soft);
  --describe-soft:var(--slate-soft); --price-soft:var(--gold-soft); --review-soft:var(--green-soft);
  /* age escalation (logic.js AGE_LIMITS): amber then red; red is never a step colour */
  --warn:var(--amber); --warn-soft:var(--amber-soft); --urgent:var(--red); --urgent-soft:var(--red-soft);
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:radial-gradient(ellipse at 50% 0%,var(--bg-glow) 0%,var(--bg) 60%) var(--bg);color:var(--fg);font-family:var(--sans);font-size:15px;line-height:1.4;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
button{font:inherit;color:inherit;cursor:pointer}
/* Label voice: small caps-style uppercase, letter-spaced, label grey. */
.lbl,.badge,.tag,.hd,.kv dt,.stats span,.gate__card label,.addform label,.brand em,.veh::before{font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--label)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* native pickers: the overlaid selects are invisible, but their popup list takes these colours */
select{color-scheme:dark;color:var(--fg);background-color:var(--inset)}
option,optgroup{background:var(--inset);color:var(--fg);font-family:var(--sans);font-size:14px}
optgroup{color:var(--label);font-weight:600}
[hidden]{display:none!important}

.wrap{max-width:720px;margin:0 auto;padding-block:0 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---------- PIN gate */
.gate{min-height:100vh;display:grid;place-items:center;padding:16px}
.gate__card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;width:min(100%,360px);display:grid;gap:10px;box-shadow:0 8px 32px var(--shadow)}
.gate__card h1{margin:0 0 6px;font-size:18px;color:var(--heading);letter-spacing:-.01em}
.gate__card h1 em,.brand em{font-style:normal;font-weight:500;font-size:11px;letter-spacing:.09em;vertical-align:2px;margin-left:2px}
.gate__card label{font-size:11px;font-weight:600}
.gate__card input{font:inherit;font-family:var(--num);font-size:24px;letter-spacing:.25em;padding:10px 12px;border:1px solid var(--line-btn);border-radius:var(--r-item);background:var(--inset);color:var(--heading)}
.gate__err{margin:0;min-height:1.2em;color:var(--red);font-size:13px}

/* ---------- sticky bar */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);margin:0 -16px;padding:10px 16px 8px;border-bottom:1px solid var(--line);display:grid;gap:8px}
@media (max-width:959px){.bar.is-hidden{transform:translateY(calc(-100% - 1px))}}
@media (prefers-reduced-motion:no-preference){.bar{transition:transform .22s ease}}
.bar__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand{font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--heading);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Who am I: initials bubble + chevron; the native select sits invisibly on top so a tap anywhere opens the picker. */
.who{position:relative;display:inline-flex;align-items:center;gap:1px;flex:none;border:1px solid var(--line-btn);border-radius:999px;background:var(--inset);padding:3px 6px 3px 3px;transition:border-color .2s ease,background .2s ease}
.who .av{width:30px;height:30px;font-size:12px;letter-spacing:.03em}
.who__chev{width:15px;height:15px;color:var(--muted);flex:none;transition:transform .15s}
.who:hover{border-color:var(--line-btn-hover);background:var(--raised)}
.who:active .who__chev{transform:translateY(1px)}
.who:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.who select{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none;font:inherit;border:0}
.who select:focus-visible{outline:0}
.seg{display:flex;gap:4px;background:var(--inset);padding:3px;border-radius:var(--r-item);border:1px solid var(--line)}
.seg button{flex:1;border:0;background:transparent;border-radius:var(--r-btn);padding:7px 6px;font-weight:600;font-size:13.5px;display:flex;justify-content:center;align-items:center;gap:6px;color:var(--muted);transition:background .2s ease,color .2s ease}
.seg button:hover{color:var(--fg)}
.seg button.is-on{background:var(--line-btn);color:var(--heading)}
.seg .n{font-family:var(--num);font-size:12.5px;font-weight:500;letter-spacing:.02em;background:rgba(255,255,255,.06);padding:0 6px;border-radius:10px;line-height:1.5}
.seg button.is-on .n{background:rgba(255,255,255,.12)}
.row2{display:grid;grid-template-columns:1fr;gap:8px;align-items:center}
.row3{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:stretch}
.seg--type{min-width:0}
.seg--type button{padding:5px 8px;font-size:12.5px;flex:none}
.search{display:flex;align-items:center;gap:6px;border:1px solid var(--line-btn);border-radius:var(--r-item);background:var(--inset);padding:0 8px;min-width:0;transition:border-color .2s ease}
.search:focus-within{border-color:var(--line-btn-hover)}
.search svg{width:14px;height:14px;color:var(--muted);flex:none}
.search input{border:0;background:transparent;font:inherit;font-family:var(--num);font-size:14px;letter-spacing:.04em;padding:7px 0;width:100%;min-width:0;color:var(--heading);text-transform:uppercase}
.search input::placeholder{font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;color:var(--faint)}
.search input:focus-visible{outline:0}
.btn--add{background:transparent;font-weight:600;padding:7px 12px;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.btn--add svg{width:14px;height:14px}
@media (max-width:639px){.btn--add{padding:7px 10px}.btn--add .btn__txt{display:none}.btn--add svg{width:16px;height:16px}}

.toast{margin:10px 0 0;padding:8px 12px;border-radius:var(--r-item);font-size:13px;background:var(--red-soft);color:var(--red);border:1px solid var(--red)}
.toast.is-ok{background:var(--review-soft);color:var(--review);border-color:var(--review)}

/* ---------- summary */
.summary{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 4px;font-size:12.5px;align-items:center}
.summary .pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r-btn);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.summary .pill .n{font-family:var(--num);font-size:13px;font-weight:500;letter-spacing:.02em}
.summary .sep{width:1px;height:16px;background:var(--line);margin:0 4px}
/* per-person load: tap a bubble to see only that person's units, tap again to clear */
.summary .person{border:0;background:transparent;padding:2px 8px 2px 2px;border-radius:999px;cursor:pointer;font:inherit;font-weight:600;color:var(--heading);transition:background .2s ease,opacity .2s ease}
.summary .person:hover{background:var(--raised)}
.summary .person.is-on{background:var(--inset);box-shadow:inset 0 0 0 1px var(--line-btn)}
.summary .person.is-on .av{box-shadow:0 0 0 2px var(--heading)}
.summary:has(.person.is-on) .person:not(.is-on){opacity:.5}
.summary .person b{font-family:var(--num);font-weight:500;font-size:13px;letter-spacing:.02em}

/* ---------- cards */
.list{display:grid;gap:8px;margin-top:8px}
.card{background:var(--surface);border:1px solid var(--line-card);border-radius:var(--r-card);overflow:hidden}
.card__main{display:grid;grid-template-columns:5px 1fr auto;gap:0;width:100%}
.stripe{background:transparent}
.card.is-alarm .stripe{background:var(--urgent)}   /* logic.isAlarm: urgent and not a Reshoot */
.card__body{padding:10px 10px 10px 12px;min-width:0;display:grid;gap:4px;cursor:pointer}
.line1{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.stock{font-family:var(--num);font-weight:500;font-size:17px;letter-spacing:.05em;line-height:1.2;border:0;background:transparent;padding:0 4px;margin-left:-4px;border-radius:4px;position:relative;color:var(--heading)}
.stock:hover{background:var(--accent-soft)}
.stock.is-copied::after{content:"copied";position:absolute;left:0;top:-18px;font:600 10px var(--sans);letter-spacing:.06em;text-transform:uppercase;background:var(--heading);color:var(--bg);padding:1px 6px;border-radius:3px;white-space:nowrap}
.badge{font-size:11px;font-weight:700;line-height:1;padding:4px 0;min-width:20px;text-align:center;border-radius:4px;border:1px solid var(--line-btn);align-self:center}
.badge--New{color:var(--blue);border-color:var(--blue)}
.veh{font-size:14px;font-weight:500;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.veh small{color:var(--muted);font-size:12.5px;font-weight:400}
.tag{font-size:10.5px;font-weight:700;border:1px dashed var(--line-btn);border-radius:4px;padding:1px 5px;white-space:nowrap;vertical-align:1px}
.tag--sheet{border-style:solid;color:var(--review);border-color:var(--review);text-transform:none;letter-spacing:.02em}
.line2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.step{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--step);background:var(--step-soft);padding:3px 8px;border-radius:var(--r-btn);white-space:nowrap}
.step::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--step)}
.chips{display:inline-flex;gap:4px;flex-wrap:wrap}
.chip{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--line-btn);border-radius:4px;padding:0 5px}
.age{font-family:var(--num);font-weight:500;font-size:14px;letter-spacing:.03em;color:var(--fg)}
.age.is-warn{color:var(--warn);font-weight:600}
.age.is-urgent{color:var(--urgent);font-weight:600}
.where{display:inline-flex;align-items:center;gap:4px;min-width:0}
.where svg{width:12px;height:12px;flex:none}
.where--live{color:var(--heading);font-weight:600}
.where--aging{color:var(--muted)}
.stats{display:none}
.person{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--heading);white-space:nowrap}
.av{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:#fff;background:var(--pc,var(--faint));flex:none}
.person.is-done .av{background:var(--review)}
.person small{font-weight:500;color:var(--muted)}
.person--none .av{background:var(--line-btn);color:var(--muted)}
.person--none .nm{color:var(--muted)}
/* who-pill: the person line; with .is-pick it is also the assign control (native select overlaid, chevron shown) */
.pick{position:relative;display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%}
.pick .person{min-width:0}
.pick .person .nm,.pick .person .nm-short{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick.is-pick{border:1px solid var(--line-btn);border-radius:999px;background:var(--inset);padding:3px 6px 3px 3px;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.pick.is-pick:hover{border-color:var(--line-btn-hover);background:var(--raised)}
.pick.is-pick:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.pick__chev{width:14px;height:14px;color:var(--muted);flex:none}
.pick__sel{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none;font:inherit;border:0}
.pick__sel:focus-visible{outline:0}
.act__who{display:flex;align-items:center;gap:8px;min-width:0;margin-right:auto}
.where__short{display:none}
.nm-full{display:none}
.card__act{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:4px;padding:8px 10px 8px 0}
@media (max-width:959px){
  .list{gap:10px}
  .card__main{grid-template-columns:5px 1fr}
  .stripe{grid-row:1 / span 2}
  /* Two rows: [badge stock step ...... where] / [vehicle ................ age]. DOM order stays as desktop needs it. */
  .card__body{display:grid;grid-template-columns:auto auto 1fr auto;grid-template-areas:"badge stock step where" "veh veh veh age";gap:6px 8px;align-items:center;padding:12px 12px 6px 14px}
  .line1,.line2{display:contents}
  .badge{grid-area:badge}
  .stock{grid-area:stock;font-size:19px}
  .step{grid-area:step;justify-self:start}
  .where{grid-area:where;justify-self:stretch;justify-content:flex-end;min-width:0;overflow:hidden;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--label)}
  .where--live{color:var(--heading)}
  .where svg{color:var(--faint)}
  .where__long{display:none}
  .where__short{display:inline;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* vehicle on one line, colour on its own line under it (trim stays in the panel); each line ellipsises on its own */
  .veh{grid-area:veh;width:0;min-width:100%;font-size:14.5px;display:grid;gap:3px;white-space:normal}   /* width:0 + min-width:100%: contributes nothing to column sizing */
  .veh__nm,.veh small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .veh small{font-size:12.5px;color:var(--muted);margin:0}
  .age{grid-area:age;justify-self:end;align-self:start;font-size:15px;color:var(--muted)}
  .chips,.tag,.line2 .pick{display:none}   /* gaps, source and the who-pill: in the detail panel / action row */
  .summary .person .nm-short,.summary .person .nm-full{display:none}   /* phones: bubble + count only; the bubble is the name */
  .summary .person{gap:4px;padding:2px 6px 2px 2px}
  .summary{gap:4px}
  .summary .sep{margin:0 1px}
  .veh .trim{display:none}
  .yr__c{display:none}   /* model year reads as YY on phones; delete this line to show YYYY everywhere */
  .card__act{grid-column:2;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:8px;padding:4px 12px 12px 14px}
  .card__act .btn{min-height:38px}
  .card__act .btn--claim,.card__act .btn--done,.card__act .btn--check{min-width:112px;padding:8px 18px}
  .card__act .btn--ghost{min-height:36px;padding:4px 10px}
  .act__who .pick.is-pick{padding:3px 8px 3px 3px}
  .act__who .pick .av{width:26px;height:26px}
}
@media (max-width:399px){
  .card__act .btn--claim,.card__act .btn--done,.card__act .btn--check{min-width:96px;padding:8px 12px}
  .seg--type button{padding:5px 7px;font-size:12px}
  .btn--add{padding:7px 8px}
}
.btn{border:1px solid var(--line-btn);background:transparent;color:var(--fg);border-radius:var(--r-btn);padding:8px 12px;font-weight:600;font-size:13px;min-width:84px;white-space:nowrap;transition:background .2s ease,border-color .2s ease,color .2s ease,filter .2s ease}
.btn:hover{background:var(--raised);border-color:var(--line-btn-hover);color:var(--heading)}
.btn:disabled{cursor:default;opacity:.7}
.btn--claim{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:700}
.btn--done{background:var(--review);border-color:var(--review);color:#052e16;font-weight:700}
.btn--check{background:var(--blue);border-color:var(--blue);color:#0b1a3a;font-weight:700}
.btn--claim:hover,.btn--done:hover,.btn--check:hover{filter:brightness(1.08);color:inherit}
.btn--claim:hover{color:var(--accent-fg)}.btn--done:hover{color:#052e16}.btn--check:hover{color:#0b1a3a}
.btn--ghost{background:transparent;border-color:transparent;color:var(--muted);font-weight:500;font-size:12px;padding:3px 6px;min-width:0}
.btn--ghost:hover{background:transparent;border-color:transparent;color:var(--heading)}
.detail{display:none;border-top:1px solid var(--line);padding:10px 12px 12px 17px;background:var(--inset);font-size:13px}
.card.is-open .detail{display:grid;gap:8px}
.kv{display:grid;grid-template-columns:110px 1fr;gap:4px 10px;margin:0}
.kv dt{font-size:11px;font-weight:600;padding-top:2px}
.kv dd{margin:0;font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.kv dd.mono{font-family:var(--mono);font-size:12px}
.flink{display:inline-flex;align-items:center;gap:4px;color:var(--blue);font-weight:600;text-decoration:none;white-space:nowrap}
.flink:hover{text-decoration:underline}
.flink svg{width:13px;height:13px}
.notes{width:100%;border:1px solid var(--line-btn);border-radius:var(--r-item);padding:7px 9px;font:inherit;font-size:13px;background:var(--surface);color:var(--fg);resize:vertical;min-height:38px}
.empty{padding:28px 12px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line-btn);border-radius:var(--r-card)}
.empty .btn{margin-top:10px}
.foot{margin-top:18px;font-size:12.5px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.foot .is-stale{color:var(--red);font-weight:600}
.foot .linkish{margin-left:auto}
.linkish{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline}
/* per-user sign-in: pick a name once per device, then only the PIN; the header is fixed unless you are an admin */
.gate__msg{margin:0;min-height:1.2em;color:var(--red);font-size:13px}
.gate__form{display:grid;gap:10px}
.gate__names{display:grid;gap:8px}
.gate__name{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line-btn);border-radius:var(--r-item);background:var(--inset);color:var(--heading);font:inherit;font-weight:600;cursor:pointer;text-align:left}
.gate__name:hover{border-color:var(--line-btn-hover);background:var(--raised)}
.gate__who{margin:0;font-size:13px;color:var(--muted)}
.who.is-fixed .who__chev{display:none}
.who.is-fixed{padding-right:3px}
.who.is-fixed select{pointer-events:none}
.hd{display:none}

/* ---------- add dialog */
.scrim{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-left,0px));padding-top:max(16px,env(safe-area-inset-top,0px))}
.addform{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:12px;width:min(100%,640px);box-shadow:0 20px 50px var(--shadow)}
.addform h3{margin:0;font-size:14px;font-weight:700;color:var(--heading)}
.addform .fields{display:grid;grid-template-columns:1fr;gap:8px}
.addform label{display:grid;gap:3px;font-size:11px;font-weight:600}
.addform input{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line-btn);border-radius:var(--r-item);background:var(--inset);color:var(--heading);min-width:0}
.addform input.mono{font-family:var(--num);font-size:16px;letter-spacing:.05em;text-transform:uppercase}
.addform .seg{align-self:end}
.addform .acts{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.addform .err{color:var(--red);font-size:12.5px;margin-right:auto}
.addform .hint{font-size:12.5px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500;min-height:1.2em}
.addform .hint.is-dupe{color:var(--red)}
.addform .hint.is-homenet{color:var(--accent)}
@media (max-width:639px){.scrim{align-items:end}.addform{border-radius:14px 14px 0 0;margin:0 -16px -16px;width:calc(100% + 32px);padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}}
@media (min-width:640px){.addform .fields{grid-template-columns:150px 170px 1fr}}

@media (max-width:420px){
  .seg button{font-size:13px}
}

/* ---------- desktop: dense rows */
@media (min-width:960px){
  .wrap{max-width:1800px}
  .bar{grid-template-columns:auto auto auto 1fr auto auto;align-items:center;gap:16px}
  .bar__top,.row2,.row3{display:contents}
  .seg{min-width:0}
  .seg button{padding:6px 14px}
  .search{order:7;justify-self:end;width:260px}
  .btn--add{order:8}
  .who{order:9}
  .nm-short{display:none}
  .nm-full{display:inline}
  .list{gap:0;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);overflow:hidden;margin-top:10px;overflow-x:auto;box-shadow:0 8px 32px var(--shadow)}
  .hd,.card{min-width:1180px}
  .hd{display:grid;grid-template-columns:5px 100px minmax(160px,1.4fr) 108px 52px minmax(130px,1fr) minmax(250px,1.3fr) minmax(120px,.8fr) 200px;gap:0 10px;padding:8px 0;font-size:11px;font-weight:700;border-bottom:1px solid var(--line);background:var(--inset)}
  .hd span:nth-child(5){text-align:right}
  .card{border:0;border-radius:0;border-bottom:1px solid var(--line)}
  .card:last-child{border-bottom:0}
  .card:hover .card__main{background:var(--row-hover)}
  .card__main{grid-template-columns:5px 100px minmax(160px,1.4fr) 108px 52px minmax(130px,1fr) minmax(250px,1.3fr) minmax(120px,.8fr) 200px;gap:0 10px;align-items:center}
  .card__body{display:contents}
  .card__body > *{padding-block:9px}
  .line1{display:contents}
  .line1 .stock{display:block;padding-left:0}
  .line1 .badge{display:none}
  .veh{display:block}
  .veh::before{content:attr(data-type);font-size:10px;font-weight:700;margin-right:6px;border:1px solid var(--line-btn);border-radius:3px;padding:0 4px;vertical-align:1px}
  .veh[data-type="New"]::before{color:var(--blue);border-color:var(--blue)}
  .line2{display:contents}
  .line2 .chips{display:none}
  .line2 .age{text-align:right;display:block}
  .where{flex-direction:column;align-items:flex-start;gap:0;line-height:1.25}
  .where svg{display:none}
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;font-size:12px;line-height:1.2;font-variant-numeric:tabular-nums}
  .stats b{display:block;font-weight:600;color:var(--heading)}
  .stats span{font-size:10px}
  .stats .is-gap b{color:var(--step)}
  .stats .flink{font-size:11px}
  .card__act{flex-direction:row;justify-content:flex-end;padding:6px 12px 6px 0;align-items:center}
  .act__who{display:contents}
  .act__who .pick{display:none}
  .line2 .pick{justify-self:start;max-width:100%;overflow:hidden}
  .pick .person{max-width:100%;overflow:hidden}
  .pick .person small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .btn{padding:6px 12px;min-width:0}
  .detail{padding-left:115px;grid-template-columns:1fr 1fr;gap:8px 24px}
  .kv{grid-template-columns:120px 1fr}
}
@media (prefers-reduced-motion:no-preference){.card{transition:box-shadow .2s ease,border-color .2s ease}}