/* ============================================================================
   KYROS UI — design tokens
   ----------------------------------------------------------------------------
   Loaded AFTER the inline <style> in index.html, so anything here wins.
   Stage 1 of the UI reset (Sept 2026): tokens only. The kit and shell follow.

   Rules:
   • Light is the default. Dark is `[data-theme^="black"]`; blue brands are
     `[data-theme="blue"]` and `[data-theme="black-blue"]`.
   • New CSS uses the SEMANTIC names (--text, --surface, --accent …).
   • The LEGACY ALIASES block at the end keeps the ~2,100 inline styles in
     index.html working unchanged. Remove an alias only when grep shows zero uses.
   • Values here reproduce what the app rendered before this file existed, so
     adding it changes nothing visible. The one deliberate change: dark mode now
     has real purple / teal / grey values instead of inheriting the light ones.
   ============================================================================ */

:root{
  /* ── Primitive scales ──────────────────────────────────────────────────── */
  --gray-50:#f8f9fa;  --gray-100:#f4f5f7; --gray-150:#eef0f3; --gray-200:#e3e6ea;
  /* gray-500 was #6b7280, which is 4.23:1 on --bg-subtle — just under the
   * 4.5:1 a 12px caption needs, and --text-3 (the colour of every caption,
   * every keyboard hint and every "nothing here" line) is built on it. Two
   * shades darker clears it at 4.77:1 and is not a visible change. */
  --gray-300:#cdd2d9; --gray-400:#9aa3ad; --gray-500:#636a77; --gray-600:#4d545e;
  --gray-700:#333a45; --gray-800:#242932; --gray-850:#171b21; --gray-900:#12151a;
  --gray-950:#0b0d10; --ink:#161a20;

  --green-50:#f1f8f3; --green-100:#d8ebdf; --green-300:#8fc7a5; --green-400:#4caf72;
  --green-500:#3d9a5f; --green-600:#2f6b45; --green-700:#245437; --green-800:#1f5133;
  --green-900:#1d4a2f;

  --blue-50:#eef3fd;  --blue-100:#d6e2fa; --blue-400:#5a8fd8; --blue-500:#1d4ed8;
  --blue-600:#1740a8; --blue-700:#1a4a8a; --blue-800:#17376f;

  --red-400:#e06c60;  --red-600:#b3261e;
  --amber-400:#d99a3c; --amber-700:#8a5a00;
  --purple-300:#b388e0; --purple-700:#6a1a8a;
  --teal-300:#4db6ac;  --teal-700:#12645f;
  --gold-500:#c8a830;

  /* ── Semantic: surfaces & text (light) ─────────────────────────────────── */
  --bg:var(--gray-100);
  --bg-subtle:var(--gray-150);
  --surface:#ffffff;
  --surface-raised:#ffffff;
  --surface-sunken:#f6f7f9;
  --border:var(--gray-200);
  --border-strong:var(--gray-300);
  --text:var(--ink);
  --text-2:var(--gray-600);
  --text-3:var(--gray-500);
  --text-inverse:#ffffff;
  --scrim:rgba(16,24,40,0.45);

  /* ── Semantic: accent (the dealership colour) ──────────────────────────── */
  --accent:var(--green-600);
  --accent-strong:var(--green-700);
  --accent-text:var(--green-800);
  --accent-fg:#ffffff;
  --accent-faint:rgba(47,107,69,0.07);
  --accent-soft:rgba(47,107,69,0.10);
  --accent-border:rgba(47,107,69,0.30);
  --accent-ring:rgba(47,107,69,0.12);
  --wordmark:linear-gradient(160deg,#2f6b45 0%,#1d4a2f 45%,#2f6b45 100%);

  /* ── Semantic: status tones ────────────────────────────────────────────── */
  --ok:#1f6b34;        --ok-soft:rgba(31,107,52,0.10);
  --warn:var(--amber-700); --warn-soft:rgba(138,90,0,0.12);
  --danger:var(--red-600); --danger-soft:rgba(179,38,30,0.10);
  --info:var(--blue-700);  --info-soft:rgba(26,74,138,0.10);
  --purple:var(--purple-700); --purple-soft:rgba(106,26,138,0.10);
  --teal:var(--teal-700);  --teal-soft:rgba(18,100,95,0.10);
  --neutral:var(--gray-500); --neutral-soft:rgba(107,114,128,0.10);
  --gold:var(--gold-500);

  /* ── Spacing (4px base) ────────────────────────────────────────────────── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* ── Radius ────────────────────────────────────────────────────────────── */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-2xl:24px; --r-pill:999px;

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --sh-1:0 1px 2px rgba(16,24,40,0.04),0 1px 3px rgba(16,24,40,0.06);
  --sh-2:0 4px 14px rgba(16,24,40,0.10);
  --sh-3:0 12px 40px rgba(16,24,40,0.18);
  --sh-4:0 24px 64px rgba(16,24,40,0.22);
  --focus-ring:0 0 0 3px var(--accent-ring);

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --dur-fast:120ms; --dur:200ms; --dur-slow:320ms;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-std:cubic-bezier(0.4,0,0.2,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);

  /* ── Type ──────────────────────────────────────────────────────────────── */
  --font-ui:'Barlow',system-ui,-apple-system,sans-serif;
  --font-display:'Barlow Condensed','Barlow',system-ui,sans-serif;
  /* THE type scale. Eight steps, and the app uses no other size.
   *
   * It was thirty sizes on 25 Sep 2026 — 6px through 48px, including 10.5,
   * 12.5 and 14.5 — because every inline style picked its own. Nothing looks
   * more home-made than type that is almost the same size twice. These eight
   * are what everything was rounded to; the scale below IS the app, not an
   * aspiration (the previous values here were referenced zero times).
   *
   * Adding a ninth step is a design decision, not a convenience. If a thing
   * needs to be bigger, it usually needs to be bolder or further from its
   * neighbour instead. */
  --fs-2xs:9px;    /* uppercase micro-labels only, always letterspaced */
  --fs-xs:10px;    /* chips, pill text, table meta */
  --fs-sm:11px;    /* secondary lines under a title */
  --fs-md:12px;    /* dense body: list rows, form help */
  --fs-base:13px;  /* body */
  --fs-lg:15px;    /* card titles, emphasised body */
  --fs-xl:18px;    /* section and page headings */
  --fs-2xl:22px;   /* stat numbers in a card */
  /* Display tier — two sizes, one job each. */
  --fs-icon:32px;  /* the icon in an empty state */
  --fs-hero:34px;  /* a hero number */
  --lh-tight:1.15; --lh:1.45;
  --track-caps:0.12em;

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --sidebar-w:190px; --topbar-h:46px; --tabbar-h:58px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

/* ── Blue brand, light ─────────────────────────────────────────────────────── */
:root[data-theme="blue"]{
  --accent:var(--blue-500);
  --accent-strong:var(--blue-600);
  --accent-text:var(--blue-800);
  --accent-faint:rgba(29,78,216,0.07);
  --accent-soft:rgba(29,78,216,0.10);
  --accent-border:rgba(29,78,216,0.30);
  --accent-ring:rgba(29,78,216,0.12);
  --wordmark:linear-gradient(160deg,#1d4ed8 0%,#12307f 45%,#1d4ed8 100%);
}

/* ── Dark (green brand) ────────────────────────────────────────────────────── */
:root[data-theme^="black"]{
  --bg:var(--gray-950);
  --bg-subtle:#14171c;
  --surface:var(--gray-900);
  --surface-raised:var(--gray-850);
  --surface-sunken:#0e1115;
  --border:var(--gray-800);
  --border-strong:var(--gray-700);
  --text:#e8eaed;
  --text-2:#a8aeb8;
  /* was --gray-500, which is 3.78:1 on a dark card — under 4.5:1, and this is
   * the colour of every caption and every "nothing here" line in the app. */
  --text-3:var(--gray-400);
  --text-inverse:var(--gray-900);
  --scrim:rgba(0,0,0,0.6);

  --accent:var(--green-500);
  /* Hover BRIGHTENS on a dark page. It used to darken to #2a6e42, which is the
   * light-mode instinct and is wrong here: with dark ink on the fill the label
   * would vanish on hover, and a button that dims when you reach for it reads
   * as disabled. */
  --accent-strong:var(--green-400);
  --accent-text:#a8e0bb;
  /* White on this green is 3.5:1 — below the 4.5:1 a 13px label needs, on the
   * most-pressed button in the app. Darkening the fill would make the primary
   * action dull on a near-black page, which is the one thing it must not be,
   * so the ink goes dark instead: 8.9:1, and the button gets brighter rather
   * than quieter. Light mode keeps white on a deep green (6.3:1). */
  --accent-fg:var(--gray-950);
  --accent-faint:rgba(61,154,95,0.10);
  --accent-soft:rgba(61,154,95,0.16);
  --accent-border:rgba(61,154,95,0.40);
  --accent-ring:rgba(61,154,95,0.18);
  --wordmark:linear-gradient(160deg,#ffffff 0%,#cfe6d8 45%,#8fc7a5 100%);

  --ok:var(--green-400);   --ok-soft:rgba(76,175,114,0.15);
  --warn:var(--amber-400); --warn-soft:rgba(217,154,60,0.15);
  --danger:var(--red-400); --danger-soft:rgba(224,108,96,0.15);
  --info:var(--blue-400);  --info-soft:rgba(90,143,216,0.15);
  --purple:var(--purple-300); --purple-soft:rgba(179,136,224,0.15);
  --teal:var(--teal-300);  --teal-soft:rgba(77,182,172,0.15);
  --neutral:var(--gray-400); --neutral-soft:rgba(154,163,173,0.12);

  --sh-1:0 1px 2px rgba(0,0,0,0.30);
  --sh-2:0 4px 14px rgba(0,0,0,0.40);
  --sh-3:0 12px 40px rgba(0,0,0,0.55);
  --sh-4:0 24px 64px rgba(0,0,0,0.65);
}

/* ── Dark, blue brand ──────────────────────────────────────────────────────── */
:root[data-theme="black-blue"]{
  --accent:var(--blue-400);
  --accent-strong:#82afe5;   /* brightens on hover — see the dark green block */
  --accent-text:#bcd4f5;
  --accent-fg:var(--gray-950);   /* see the note in the dark green block */
  --accent-faint:rgba(90,143,216,0.10);
  --accent-soft:rgba(90,143,216,0.16);
  --accent-border:rgba(90,143,216,0.40);
  --accent-ring:rgba(90,143,216,0.18);
  --wordmark:linear-gradient(160deg,#ffffff 0%,#cfdcf0 45%,#8fb0e0 100%);
}

/* ── Reduced motion: everything becomes instant ────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  :root{ --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; }
}

/* ============================================================================
   LEGACY ALIASES — the names index.html was written against.
   Every one resolves to a semantic token above, so a theme only has to set the
   semantic value. Declared on the same selectors as the semantic tokens so the
   per-theme overrides in index.html (which set these names directly) still win
   by specificity until they are deleted in the cleanup stage.
   ============================================================================ */
:root, :root[data-theme]{
  --bg2:var(--bg-subtle);
  --card:var(--surface-raised);   /* dark mode lifts cards one step above the surface */
  --surface2:var(--bg-subtle);
  --surface-2:var(--bg-subtle);
  --border2:var(--border-strong);
  --chrome:var(--text);
  --chrome2:var(--text-2);
  --dim:var(--text-3);

  --brand:var(--accent);
  --brand-mid:var(--accent-strong);
  --brand-dim:var(--accent-faint);
  --brand-t:var(--accent-soft);
  --brand-border:var(--accent-border);
  --brand-glow:0 0 0 3px var(--accent-ring);
  --brand-text:var(--accent-text);
  --brand-num:var(--accent);
  --silver:var(--wordmark);

  --red:var(--danger);     --red-t:var(--danger-soft);
  --green:var(--ok);       --green-t:var(--ok-soft);
  --amber:var(--warn);     --amber-t:var(--warn-soft);
  --blue:var(--info);      --blue-t:var(--info-soft);
  --purple-t:var(--purple-soft);
  --teal-t:var(--teal-soft);
  --grey:var(--neutral);   --grey-t:var(--neutral-soft);

  /* base.css declares these two as fixed near-white values and no theme ever
   * overrides them, so every inset panel drawn by an inline style stayed a
   * white box on the dark themes — with the app's light text on it. The
   * private-stock widget's "SOR sold" number measured 2.08:1 that way.
   * Aliased here like every other legacy name, so the theme carries them. */
  --panel-inset:var(--bg-subtle);
  --panel-strong:var(--bg-subtle);

  --r-card:var(--r-lg);
  --r-ctl:var(--r-md);
}

/* ============================================================================
   SHELL — sidebar, topbar, page transitions, command palette  (stage 2)
   ============================================================================ */

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
@media(min-width:769px){ .shell{grid-template-columns:var(--sidebar-w) 1fr;transition:grid-template-columns var(--dur) var(--ease-out)} }
.sidebar{background:var(--surface);border-right:1px solid var(--border);scrollbar-width:none}
.sidebar::-webkit-scrollbar{display:none}
.sb-logo{padding:18px 16px 10px}
.sb-logo-main{font-size:18px;letter-spacing:0.16em}
.sb-logo-sub{font-size:9px;letter-spacing:0.26em}
.sb-user{padding:10px 12px 12px 16px;border-bottom:1px solid var(--border)}
.sb-user-avatar{width:30px;height:30px;font-size:11px;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--border)}
.sb-user-name{font-size:12px;font-weight:600;color:var(--text)}
.sb-user-role{font-size:9px;color:var(--text-3)}
.sb-icon-btn{width:30px;height:30px;border-radius:var(--r-xs);display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--text-3);transition:background var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std)}
.sb-icon-btn:hover{background:var(--bg-subtle);color:var(--text)}
.sb-nav{padding:6px 8px 8px;flex:1}
.sb-section{padding:14px 10px 5px;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-3);opacity:1}
.sb-link{
  margin:1px 0;padding:8px 10px;border-radius:var(--r-sm);border-left:0;margin-right:0;
  color:var(--text-2);font-size:13px;font-weight:500;gap:10px;position:relative;
  transition:background var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std);
}
.sb-link i{font-size:15px;color:var(--text-3);transition:color var(--dur-fast) var(--ease-std)}
.sb-link:hover{background:var(--bg-subtle);color:var(--text)}
.sb-link:hover i{color:var(--text-2)}
.sb-link.active{background:var(--accent-soft);color:var(--accent-text);font-weight:600;border-left:0}
.sb-link.active i{color:var(--accent)}
.sb-link.active::before{content:"";position:absolute;left:-8px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
:root[data-theme^="black"] .sb-link:hover{background:var(--bg-subtle)}
:root[data-theme^="black"] .sb-link.active{background:var(--accent-soft)}
.sb-badge{width:7px;height:7px;background:var(--danger);box-shadow:0 0 0 2px var(--surface)}
.sb-collapse{
  display:flex;align-items:center;gap:8px;margin:0 8px 8px;padding:8px 10px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--text-3);font-family:var(--font-ui);font-size:12px;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std);
}
.sb-collapse i{font-size:15px}
.sb-collapse:hover{background:var(--bg-subtle);color:var(--text)}

/* Collapsed rail (desktop only — the phone has the drawer) */
@media(min-width:769px){
  .shell.sb-collapsed{grid-template-columns:64px 1fr}
  .shell.sb-collapsed .sb-logo{padding:16px 0 8px;text-align:center}
  .shell.sb-collapsed .sb-logo-main{font-size:13px;letter-spacing:0.06em}
  .shell.sb-collapsed .sb-logo-sub{display:none}
  .shell.sb-collapsed .sb-user{flex-direction:column;gap:6px;padding:10px 0 12px}
  .shell.sb-collapsed .sb-user > div:nth-child(2){display:none}
  .shell.sb-collapsed .sb-icon-btn{margin:0}
  .shell.sb-collapsed .sb-nav{padding:6px 6px 8px}
  .shell.sb-collapsed .sb-section{font-size:0;padding:0;margin:8px 8px 4px;border-top:1px solid var(--border)}
  .shell.sb-collapsed .sb-link{font-size:0;justify-content:center;padding:10px 0;gap:0}
  .shell.sb-collapsed .sb-link i{font-size:18px}
  .shell.sb-collapsed .sb-link .sb-badge{position:absolute;top:8px;right:10px;margin:0}
  .shell.sb-collapsed .sb-link.active::before{left:-6px}
  .shell.sb-collapsed .sb-link:hover::after{
    content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
    background:var(--text);color:var(--surface);font-size:12px;font-weight:500;padding:5px 9px;border-radius:var(--r-xs);
    white-space:nowrap;box-shadow:var(--sh-2);z-index:700;pointer-events:none;
  }
  .shell.sb-collapsed .sb-collapse{justify-content:center;margin:0 6px 8px;padding:10px 0}
  .shell.sb-collapsed .sb-collapse span{display:none}
}

/* ── Topbar ────────────────────────────────────────────────────────────────── */
.topbar{
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--border);box-shadow:none;
  height:calc(var(--topbar-h) + var(--safe-top));padding:var(--safe-top) 18px 0;
}
.tb-title{font-family:var(--font-ui);font-size:15px;font-weight:700;letter-spacing:-0.01em;text-transform:none;color:var(--text)}
.tb-right{gap:4px}
.tb-date{font-size:11px;color:var(--text-3);margin-right:6px;font-variant-numeric:tabular-nums}
.tb-icon-btn{width:36px;height:36px;border-radius:var(--r-sm);color:var(--text-2);transition:background var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std),transform .1s ease}
.tb-icon-btn:hover{background:var(--bg-subtle);color:var(--text)}
.tb-search{
  width:auto;height:32px;padding:0 8px 0 9px;gap:8px;margin-right:6px;
  border:1px solid var(--border);background:var(--surface);color:var(--text-3);font-size:12px;font-family:var(--font-ui);
}
.tb-search:hover{border-color:var(--border-strong);color:var(--text-2);background:var(--surface)}
.tb-search i{font-size:15px}
/* --text-2, not --text-3: this is the label on a control people press, not a
 * caption. (It was changed on the strength of a 4.47:1 reading that turned out
 * to be an artefact of measuring mid-transition — the reading was wrong, the
 * change stands on its own.) */
.tb-search .tb-search-label{color:var(--text-2)}
.tb-kbd{font-size:10px;font-weight:600;line-height:1;padding:3px 5px;border-radius:4px;border:1px solid var(--border);background:var(--bg-subtle);color:var(--text-3)}
@media(max-width:768px){
  .tb-search{width:44px;height:44px;padding:0;margin:0;border:0;background:transparent;justify-content:center}
  .tb-search .tb-kbd,.tb-search .tb-search-label{display:none}
  .tb-search i{font-size:18px}
}

/* ── Page enter ────────────────────────────────────────────────────────────── */
@keyframes kPageIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.page{animation:none}
.page.active{animation:kPageIn var(--dur) var(--ease-out) both}
.page-fade{animation:none}

/* ── Command palette ───────────────────────────────────────────────────────── */
@keyframes kFade{from{opacity:0}to{opacity:1}}
@keyframes kPop{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}
.k-palette-backdrop{
  position:fixed;inset:0;z-index:900;background:var(--scrim);display:none;
  align-items:flex-start;justify-content:center;padding:12vh 16px 16px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.k-palette-backdrop.open{display:flex;animation:kFade var(--dur-fast) var(--ease-std) both}
.k-palette{
  width:100%;max-width:620px;background:var(--surface-raised);border:1px solid var(--border);
  border-radius:var(--r-xl);box-shadow:var(--sh-4);overflow:hidden;
  animation:kPop var(--dur) var(--ease-out) both;
}
.k-palette-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border)}
.k-palette-head > i{font-size:18px;color:var(--text-3)}
.k-palette-head input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;box-shadow:none;padding:0;
  font-family:var(--font-ui);font-size:15px;font-weight:500;color:var(--text);
}
.k-palette-head input::placeholder{color:var(--text-3)}
.k-palette-list{max-height:min(54vh,480px);overflow-y:auto;padding:6px;overscroll-behavior:contain}
.k-group{padding:10px 10px 4px;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-3)}
.k-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;color:var(--text);min-height:40px}
.k-item i{width:28px;height:28px;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;background:var(--bg-subtle);color:var(--text-2);font-size:15px;flex-shrink:0}
.k-item-label{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-item-sub{font-size:12px;color:var(--text-3);margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.k-item-hint{font-size:11px;color:var(--text-3);margin-left:auto;opacity:0}
.k-item.sel{background:var(--accent-soft);color:var(--accent-text)}
.k-item.sel i{background:var(--accent);color:var(--accent-fg)}
.k-item.sel .k-item-hint{opacity:1}
.k-empty{padding:32px 16px;text-align:center;color:var(--text-3);font-size:13px}
.k-palette-foot{display:flex;flex-wrap:wrap;gap:14px;padding:8px 14px;border-top:1px solid var(--border);font-size:11px;color:var(--text-3);background:var(--bg-subtle)}
.k-kbd{
  display:inline-block;font-family:var(--font-ui);font-size:10px;font-weight:600;line-height:1;padding:3px 5px;margin-right:2px;
  border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:4px;background:var(--surface);color:var(--text-2);
}
@media(max-width:768px){
  .k-palette-backdrop{padding:calc(var(--safe-top) + 8px) 8px 8px;align-items:flex-start}
  .k-palette{border-radius:var(--r-lg)}
  .k-palette-list{max-height:calc(100dvh - var(--safe-top) - 140px)}
  .k-palette-foot{display:none}
}

/* ============================================================================
   COMPONENT KIT  (stage 3) — one family each for buttons, fields, cards,
   tables, badges, modals, toasts, skeletons, empty states. Legacy class names
   are kept; these rules simply win over the older layers above.
   ============================================================================ */

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn{
  font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;line-height:1;
  min-height:34px;padding:7px 14px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-std),border-color var(--dur-fast) var(--ease-std),
             color var(--dur-fast) var(--ease-std),box-shadow var(--dur-fast) var(--ease-std),transform .1s ease;
}
.btn i{font-size:15px;line-height:1}
.btn-sm{min-height:28px;padding:4px 10px;font-size:10px}
.btn-sm i{font-size:13px}
.btn-xs{min-height:24px;padding:3px 8px;font-size:10px;border-radius:var(--r-xs)}
.btn-xs i{font-size:12px}
.btn:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.btn:active{transform:scale(.97)!important;filter:none}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

:root[data-theme] .btn-primary,.btn-primary{
  background:var(--accent);color:var(--accent-fg);border-color:var(--accent);box-shadow:var(--sh-1);
}
:root[data-theme] .btn-primary:hover,.btn-primary:hover{
  background:var(--accent-strong);border-color:var(--accent-strong);color:var(--accent-fg);box-shadow:var(--sh-2);transform:none;
}
:root[data-theme] .btn-ghost,.btn-ghost{background:var(--surface);color:var(--text-2);border-color:var(--border-strong)}
:root[data-theme] .btn-ghost:hover,.btn-ghost:hover{background:var(--bg-subtle);color:var(--text);border-color:var(--border-strong);transform:none}
.btn-danger{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 28%,transparent)}
.btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-green{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
.btn-green:hover{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn-amber{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.btn-amber:hover{background:var(--warn);color:#fff;border-color:var(--warn)}
.btn-blue{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 28%,transparent)}
.btn-blue:hover{background:var(--info);color:#fff;border-color:var(--info)}
.btn-purple{background:var(--purple-soft);color:var(--purple);border-color:color-mix(in srgb,var(--purple) 28%,transparent)}
.btn-purple:hover{background:var(--purple);color:#fff;border-color:var(--purple)}
.btn-grey{background:var(--neutral-soft);color:var(--text-2);border-color:var(--border-strong)}
.btn-grey:hover{background:var(--bg-subtle);color:var(--text)}
.btn-icon{width:34px;padding:0}
.btn-sm.btn-icon{width:28px}

/* ── Fields ────────────────────────────────────────────────────────────────── */
.field{gap:5px;margin-bottom:10px}
.field label{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-3)}
:root[data-theme] .field input,:root[data-theme] .field select,:root[data-theme] .field textarea,
.field input,.field select,.field textarea,.search-box input,.k-input,.k-select{
  background:var(--surface);border:1px solid var(--border-strong);color:var(--text);
  font-family:var(--font-ui);font-size:13px;padding:9px 11px;border-radius:var(--r-sm);outline:none;
  transition:border-color var(--dur-fast) var(--ease-std),box-shadow var(--dur-fast) var(--ease-std);
}
.field input::placeholder,.field textarea::placeholder,.search-box input::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus,.field textarea:focus,.search-box input:focus,.k-input:focus,.k-select:focus{
  border-color:var(--accent)!important;box-shadow:var(--focus-ring)!important;
}
.search-box input{padding-left:38px;border-radius:var(--r-md);min-height:40px}
.search-box i{left:13px;color:var(--text-3)}
:root[data-theme] .search-box,.search-box{background:transparent;border:0}

/* ── Filter pills / segmented ──────────────────────────────────────────────── */
.filter-pill{
  font-size:11px;letter-spacing:0.07em;padding:6px 13px;border-radius:var(--r-pill);
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);
  transition:background var(--dur-fast) var(--ease-std),border-color var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std);
}
.filter-pill:hover{border-color:var(--text-3);color:var(--text)}
.filter-pill.on{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent-border);box-shadow:none}
.k-seg{display:inline-flex;padding:3px;border-radius:var(--r-md);background:var(--bg-subtle);border:1px solid var(--border);gap:2px}
.k-seg > *{padding:6px 12px;border-radius:calc(var(--r-md) - 3px);font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-2);cursor:pointer;border:0;background:transparent}
.k-seg > .on{background:var(--surface-raised);color:var(--text);box-shadow:var(--sh-1)}

/* ── Cards & stat tiles ────────────────────────────────────────────────────── */
.card,.crm-card{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:none}
.card:hover{border-color:var(--border);box-shadow:var(--sh-1)}
.card-head{padding:12px 16px 10px;border-bottom:1px solid var(--border)}
.card-title{font-size:13px;letter-spacing:0.09em;color:var(--text)}
.card-body{padding:14px 16px}
.stat-card{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-1);transition:none}
.stat-card:hover{transform:none;box-shadow:var(--sh-1);border-color:var(--border)}
:root[data-theme^="black"] .card,:root[data-theme^="black"] .stat-card{box-shadow:none}

/* ── Tables ────────────────────────────────────────────────────────────────── */
.tbl th{
  font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--text-3);padding:8px 10px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--surface-raised);z-index:1;
}
.tbl td{padding:9px 10px;font-size:12px;color:var(--text-2);border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.tbl tr:hover td{background:var(--bg-subtle)}
.tbl-make{color:var(--text);font-size:13px}
.tbl.is-dense td{padding:6px 10px;font-size:12px}

/* ── Badges (one family; tone by class or data-tone) ───────────────────────── */
.badge{font-size:10px;letter-spacing:0.08em;padding:3px 8px;border-radius:var(--r-xs);border:1px solid transparent;line-height:1.3}
.badge-green,.badge[data-tone="ok"]{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.badge-red,.badge[data-tone="danger"]{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 25%,transparent)}
.badge-amber,.badge[data-tone="warn"]{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.badge-blue,.badge[data-tone="info"]{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 25%,transparent)}
.badge-purple{background:var(--purple-soft);color:var(--purple);border-color:color-mix(in srgb,var(--purple) 25%,transparent)}
.badge-grey,.badge[data-tone="neutral"]{background:var(--neutral-soft);color:var(--text-2);border-color:var(--border-strong)}

/* ── Modals / dialogs ──────────────────────────────────────────────────────── */
@keyframes kFadeOut{from{opacity:1}to{opacity:0}}
@keyframes kPopOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(6px) scale(.985)}}
@keyframes kSheetIn{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes kSheetOut{from{transform:none;opacity:1}to{transform:translateY(24px);opacity:0}}
.modal-overlay{background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:20px}
.modal-overlay.open{animation:kFade var(--dur-fast) var(--ease-std) both}
.modal-overlay.closing{display:flex;pointer-events:none;animation:kFadeOut var(--dur-fast) var(--ease-std) both}
.modal{
  background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-4);
  max-height:88vh;display:flex;flex-direction:column;
}
.modal-overlay.open .modal{animation:kPop var(--dur) var(--ease-out) both}
.modal-overlay.closing .modal{animation:kPopOut var(--dur-fast) var(--ease-std) both}
.modal-head{padding:14px 18px 12px;border-bottom:1px solid var(--border);flex:0 0 auto}
.modal-title{font-size:13px;letter-spacing:0.08em;color:var(--text)}
.modal-close{width:36px;height:36px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--text-3);font-size:18px;transition:background var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std)}
.modal-close:hover{background:var(--bg-subtle);color:var(--text)}
.modal-body{padding:16px 18px;overflow-y:auto;flex:1 1 auto;min-height:0}
.modal-foot{padding:12px 18px;border-top:1px solid var(--border);gap:8px;background:var(--surface-raised);flex:0 0 auto}
.k-confirm .modal{width:420px}
.k-confirm-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--accent-soft);color:var(--accent);flex-shrink:0}
.k-confirm.is-danger .k-confirm-icon{background:var(--danger-soft);color:var(--danger)}
.k-confirm-body{display:flex;gap:14px;align-items:flex-start}
.k-confirm-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px;font-family:var(--font-ui)}
.k-confirm-text{font-size:13px;color:var(--text-2);line-height:1.5;white-space:pre-line}
@media(max-width:768px){
  .modal-overlay{align-items:flex-end;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .modal{
    width:100%!important;max-width:100%!important;border-radius:var(--r-2xl) var(--r-2xl) 0 0;
    border-bottom:0;max-height:calc(100dvh - var(--safe-top) - 16px);
  }
  .modal-overlay.open .modal{animation:kSheetIn var(--dur-slow) var(--ease-out) both}
  .modal-overlay.closing .modal{animation:kSheetOut var(--dur-fast) var(--ease-std) both}
  .modal-head{padding-top:16px}
  .modal-foot{padding-bottom:calc(12px + var(--safe-bottom));position:sticky;bottom:0}
  .modal-foot .btn{flex:1}
  .k-confirm .modal{width:100%}
}

/* ── Toasts ────────────────────────────────────────────────────────────────── */
@keyframes kToastIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes kToastOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(6px)}}
#toast-container{bottom:calc(20px + var(--safe-bottom));right:20px;max-width:380px;gap:8px}
.toast2,.toast2.success,.toast2.error,.toast2.info,.toast2.warn{
  background:var(--text);color:var(--surface);border:0;border-left:0;border-radius:var(--r-md);
  padding:11px 14px;font-size:13px;font-family:var(--font-ui);box-shadow:var(--sh-3);pointer-events:auto;
  animation:kToastIn var(--dur) var(--ease-out) both;
}
.toast2 > i{font-size:15px;flex-shrink:0}
.toast2.success > i{color:var(--green-400)}
.toast2.error > i{color:var(--red-400)}
.toast2.warn > i{color:var(--amber-400)}
.toast2.info > i{color:var(--blue-400)}
.toast2 .k-toast-action{
  margin-left:auto;background:color-mix(in srgb,var(--surface) 16%,transparent);color:inherit;border:0;
  border-radius:var(--r-xs);padding:5px 10px;font-family:var(--font-ui);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.toast2 .k-toast-action:hover{background:color-mix(in srgb,var(--surface) 26%,transparent)}
.toast2.leaving{animation:kToastOut var(--dur-fast) var(--ease-std) both}
@media(max-width:768px){
  #toast-container{left:12px;right:12px;max-width:none;bottom:calc(var(--tabbar-h) + 12px + var(--safe-bottom))}
}

/* ── Skeletons, spinners, empty states ─────────────────────────────────────── */
@keyframes kShimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.k-skeleton{position:relative;overflow:hidden;background:var(--bg-subtle);border-radius:var(--r-sm)}
.k-skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface-raised) 70%,transparent),transparent);animation:kShimmer 1.3s var(--ease-std) infinite}
.k-skel-page{padding:2px 0 8px}
.k-skel-row{height:14px;margin:12px 0}
.k-skel-row.w60{width:60%} .k-skel-row.w40{width:40%} .k-skel-row.w80{width:80%}
.k-skel-card{height:110px;margin-bottom:12px;border-radius:var(--r-lg)}
.k-skel-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:14px}
.k-skel-tiles .k-skeleton{height:72px;border-radius:var(--r-md)}
.db-spinner{border-color:var(--border-strong);border-top-color:var(--accent)}
.empty-state,.k-empty{padding:44px 20px;text-align:center;color:var(--text-3)}
.empty-state i,.k-empty i{font-size:32px;display:block;margin-bottom:10px;color:var(--text-3);opacity:.8}
.empty-state h3,.k-empty h3{font-size:13px;color:var(--text-2);font-weight:600;margin-bottom:4px}
.k-empty p{font-size:12px;max-width:360px;margin:0 auto}
.k-empty .btn{margin-top:14px}

/* ── Phone: thumb-sized drawer links and toast actions ─────────────────────── */
@media(max-width:768px){
  .sb-link{min-height:44px;padding:10px 12px;font-size:13px}
  .sb-section{padding-top:16px}
  .toast2 .k-toast-action{min-height:32px;padding:6px 12px}
}

/* ============================================================================
   PAGE PASS 5a — Dashboard + Stock
   ============================================================================ */

/* ── Dashboard: hero tiles ─────────────────────────────────────────────────── */
.db-hero{gap:12px;margin-bottom:18px}
.db-hero-tile{
  background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:16px 12px 14px;box-shadow:var(--sh-1);cursor:default;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-std);
}
.db-hero-tile::after{display:none}
.db-hero-tile:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.db-tile-icon{
  width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;margin-bottom:10px;
}
.db-tile-num{font-family:var(--font-display);font-size:34px;font-weight:800;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;margin-bottom:4px}
.db-tile-lbl{font-family:var(--font-display);font-size:10px;letter-spacing:0.14em;color:var(--text-3)}
:root[data-theme] .db-tile-red,.db-tile-red{background:color-mix(in srgb,var(--danger) 7%,var(--surface-raised));border-color:color-mix(in srgb,var(--danger) 22%,var(--border))}
:root[data-theme] .db-tile-amber,.db-tile-amber{background:color-mix(in srgb,var(--warn) 8%,var(--surface-raised));border-color:color-mix(in srgb,var(--warn) 22%,var(--border))}
:root[data-theme] .db-tile-green,.db-tile-green{background:color-mix(in srgb,var(--ok) 7%,var(--surface-raised));border-color:color-mix(in srgb,var(--ok) 22%,var(--border))}
:root[data-theme] .db-tile-red .db-tile-icon,.db-tile-red .db-tile-icon{background:var(--danger-soft);color:var(--danger)}
:root[data-theme] .db-tile-amber .db-tile-icon,.db-tile-amber .db-tile-icon{background:var(--warn-soft);color:var(--warn)}
:root[data-theme] .db-tile-green .db-tile-icon,.db-tile-green .db-tile-icon{background:var(--ok-soft);color:var(--ok)}
:root[data-theme] .db-tile-red .db-tile-num,.db-tile-red .db-tile-num{color:var(--danger)}
:root[data-theme] .db-tile-amber .db-tile-num,.db-tile-amber .db-tile-num{color:var(--warn)}
:root[data-theme] .db-tile-green .db-tile-num,.db-tile-green .db-tile-num{color:var(--ok)}

/* ── Dashboard: section labels, car cards, chips ───────────────────────────── */
.db-section-label{font-family:var(--font-display);font-size:10px;letter-spacing:0.14em;color:var(--text-3);margin:4px 0 10px 2px}
.db-section-label::after{background:var(--border)}
.db-car-card{
  background:var(--surface-raised);border:1px solid var(--border);border-left-width:3px;border-radius:var(--r-md);
  margin-bottom:8px;box-shadow:var(--sh-1);transition:box-shadow var(--dur-fast) var(--ease-std);
}
.db-car-card:hover{box-shadow:var(--sh-2)}
.db-car-card.urgent{border-left-color:var(--danger)}
.db-car-card:not(.urgent){border-left-color:var(--warn)}
.db-car-head{padding:11px 14px 10px;gap:10px}
.db-car-name{font-size:13px;font-weight:600;color:var(--text)}
.db-task-pill{font-size:10px;color:var(--text-3);background:var(--bg-subtle);border-color:var(--border);border-radius:var(--r-pill);padding:2px 8px}
.db-task-row{padding:8px 14px;border-top:1px solid var(--border);gap:10px;min-height:36px}
.db-task-text{font-size:12px;color:var(--text-2)}
.db-dept-badge{font-size:10px;border-radius:var(--r-xs);padding:2px 7px}
.db-pl-chip{border:1px solid var(--border);background:var(--surface-raised);border-radius:var(--r-md);padding:10px 14px;box-shadow:var(--sh-1);transition:box-shadow var(--dur-fast) var(--ease-std),border-color var(--dur-fast) var(--ease-std)}
.db-pl-chip:hover{border-color:var(--accent-border);box-shadow:var(--sh-2)}
.db-pl-n{font-family:var(--font-display);font-size:22px;font-weight:800}
.db-pl-stage{font-size:10px;color:var(--text-3)}
.db-vs-booking,.db-vs-ready,.db-vs-clean{background:var(--surface-raised);border:1px solid var(--border);border-left-width:3px;border-radius:var(--r-md);padding:10px 14px;box-shadow:var(--sh-1)}
.db-vs-booking{border-left-color:var(--info)}
.db-vs-ready{border-left-color:var(--ok)}
.db-vs-clean{border-left-color:var(--warn)}

/* ── Onboarding card ───────────────────────────────────────────────────────── */
.onb{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.onb-title{font-family:var(--font-ui);font-size:15px;font-weight:700;letter-spacing:-0.01em;text-transform:none;color:var(--text)}
.onb-sub{color:var(--text-3)}
.onb-track{background:var(--bg-subtle)}
.onb-fill{background:var(--accent)}
.onb-hide{color:var(--text-3);font-family:var(--font-display);font-size:10px}
.onb-hide:hover{color:var(--text)}
.onb-step{border-radius:var(--r-sm);transition:background var(--dur-fast) var(--ease-std)}
.onb-step:hover{background:var(--bg-subtle)}

/* ── Stock: rows ───────────────────────────────────────────────────────────── */
.stock-split-grid{gap:16px}
.stock-row{
  padding:12px 14px;border-bottom:1px solid var(--border);
  transition:background var(--dur-fast) var(--ease-std);
}
:root[data-theme] .stock-row:hover,.stock-row:hover{background:var(--bg-subtle)}
.stock-row.sold-row{opacity:.6}
.sr-thumb img{border-radius:var(--r-sm)}
.sr-thumb > div{background:var(--bg-subtle)!important;border:1px solid var(--border)!important;border-radius:var(--r-sm)!important}
.sr-title{margin-bottom:5px}
.sr-meta{font-size:12px;color:var(--text-2);line-height:1.6}
.sr-actions .btn{min-height:34px;width:34px!important;border-radius:var(--r-sm)}
.tbl-make{font-size:13px;font-weight:600;color:var(--text)}
.tbl-reg{
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:0.08em;
  background:#f5c518;border:1px solid #d3a800;color:#1a1a1a;padding:2px 8px;border-radius:5px;line-height:1.35;
}

/* ── Stock: status pills and dots (tokens, so dark mode is correct) ───────── */
.status-pill{font-size:10px;letter-spacing:0.07em;padding:5px 11px;border-radius:var(--r-pill);border:1px solid transparent;line-height:1.2}
.status-pill i{font-size:13px}
.pill-inspection{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 30%,transparent)}
.pill-mechanic{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.pill-bodywork{background:var(--purple-soft);color:var(--purple);border-color:color-mix(in srgb,var(--purple) 30%,transparent)}
.pill-valet{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.pill-photos{background:var(--teal-soft);color:var(--teal);border-color:color-mix(in srgb,var(--teal) 30%,transparent)}
.pill-ready{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.pill-sold{background:var(--neutral-soft);color:var(--text-2);border-color:var(--border-strong)}
.pill-deposit{background:color-mix(in srgb,var(--gold) 14%,transparent);color:color-mix(in srgb,var(--gold) 70%,var(--text));border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
.status-dot{width:9px;height:9px;box-shadow:0 0 0 2px color-mix(in srgb,currentColor 18%,transparent)}
.dot-mechanic{background:var(--danger);color:var(--danger)}
.dot-valet{background:var(--warn);color:var(--warn)}
.dot-bodywork{background:var(--purple);color:var(--purple)}
.dot-inspection{background:var(--info);color:var(--info)}
.dot-photos{background:var(--teal);color:var(--teal)}
.dot-ready{background:var(--ok);color:var(--ok)}
.dot-sold{background:var(--neutral);color:var(--neutral)}
.dot-draft{background:var(--warn)} .dot-final{background:var(--info)} .dot-paid{background:var(--ok)}

/* ── Notes / tasks inside cards ────────────────────────────────────────────── */
.note-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px}
.note-text{color:var(--text);font-size:13px}
.note-meta{color:var(--text-3);font-size:10px}
.tdi-text{color:var(--text-2);font-size:12px}
.tdi-text strong{color:var(--text)}
.tdi-time{color:var(--text-3)}

/* ============================================================================
   PAGE PASS 5b — Car file + CRM
   ============================================================================ */

/* ── Car file: spec grid, section cards ────────────────────────────────────── */
#page-car-detail .three-col{gap:14px 18px}
#page-car-detail .three-col > div > div:first-child{
  font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-3)!important;margin-bottom:3px;
}
#page-car-detail .three-col > div > div:nth-child(2){font-size:13px!important;color:var(--text)!important;font-weight:500;font-variant-numeric:tabular-nums}
#page-car-detail .card-title{font-size:13px}
#page-car-detail .card-head{padding:13px 16px 11px}
#page-car-detail .card-head > div{gap:6px}
#page-car-detail .note-item{margin-bottom:8px}
@media(max-width:768px){
  #page-car-detail .three-col{grid-template-columns:1fr 1fr;gap:12px 14px}
}

/* ── CRM: customer list ────────────────────────────────────────────────────── */
.crm-card{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
:root[data-theme^="black"] .crm-card{box-shadow:none}
.crm-customer-row{padding:12px 16px;gap:14px;transition:background var(--dur-fast) var(--ease-std)}
:root[data-theme] .crm-customer-row:hover,.crm-customer-row:hover{background:var(--bg-subtle)}
.crm-avatar{width:38px;height:38px;font-size:13px;box-shadow:0 0 0 2px var(--surface-raised),0 0 0 3px var(--border)}
.crm-source-badge{font-size:10px;letter-spacing:0.07em;padding:2px 8px;border-radius:var(--r-pill)}
.src-autotrader{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 28%,transparent)}
.src-whatsapp{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
.src-phone{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 28%,transparent)}
.src-email{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.src-walk-in{background:var(--purple-soft);color:var(--purple);border-color:color-mix(in srgb,var(--purple) 28%,transparent)}
.src-manual{background:var(--neutral-soft);color:var(--text-2);border-color:var(--border-strong)}
.crm-tl-item{padding:11px 16px}
.crm-tl-type{font-family:var(--font-display);font-size:10px;letter-spacing:0.1em;color:var(--text-3)}
.crm-tl-note{color:var(--text);font-size:12px}
.crm-tl-meta{color:var(--text-3)}
.fu-overdue{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 28%,transparent)}
.fu-today{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.fu-soon{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 28%,transparent)}
.fu-future{background:var(--neutral-soft);color:var(--text-2);border-color:var(--border-strong)}

/* ── CRM: tabs + pipeline board ────────────────────────────────────────────── */
.k-seg.crm-tabs{display:flex;width:100%;margin-bottom:14px}
.k-seg.crm-tabs > button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px}
.k-pipe-board{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 12px;align-items:flex-start;scroll-snap-type:x proximity}
.k-pipe-col{
  min-width:230px;max-width:250px;flex:0 0 auto;background:var(--bg-subtle);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:10px;display:flex;flex-direction:column;gap:8px;scroll-snap-align:start;
  transition:background var(--dur-fast) var(--ease-std),border-color var(--dur-fast) var(--ease-std);
}
.k-pipe-col.is-over{background:var(--accent-soft);border-color:var(--accent-border)}
.k-pipe-head{display:flex;align-items:center;gap:6px;margin-bottom:4px;padding:2px 2px 8px;border-bottom:2px solid color-mix(in srgb,var(--stage,var(--border)) 25%,transparent)}
.k-pipe-head .k-pipe-dot{width:8px;height:8px;border-radius:50%;background:var(--stage,var(--text-3));flex-shrink:0}
.k-pipe-head .k-pipe-label{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text)}
.k-pipe-head .k-pipe-count{margin-left:auto;font-size:10px;font-weight:600;background:color-mix(in srgb,var(--stage,var(--text-3)) 14%,transparent);color:var(--stage,var(--text-2));border-radius:var(--r-pill);padding:1px 8px;font-variant-numeric:tabular-nums}
.k-pipe-empty{font-size:11px;color:var(--text-3);text-align:center;padding:14px 0}
.k-pipe-card{
  background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 11px;cursor:grab;
  box-shadow:var(--sh-1);transition:border-color var(--dur-fast) var(--ease-std),box-shadow var(--dur-fast) var(--ease-std),opacity var(--dur-fast) var(--ease-std),transform var(--dur-fast) var(--ease-out);
}
.k-pipe-card:hover{border-color:var(--stage,var(--accent));box-shadow:var(--sh-2);transform:translateY(-1px)}
.k-pipe-card.is-dragging{opacity:.5;cursor:grabbing}
.k-pipe-card .k-pipe-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px}
.k-pipe-card .k-pipe-line{font-size:11px;color:var(--text-3);margin-bottom:3px;display:flex;align-items:center;gap:4px}
.k-pipe-card .k-pipe-line i{font-size:11px}
.k-pipe-card .k-pipe-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.k-pipe-chip{font-size:10px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--r-pill);padding:2px 8px;display:inline-flex;align-items:center;gap:4px;color:var(--text-2)}
.k-pipe-chip.staff{background:color-mix(in srgb,var(--who,var(--accent)) 14%,transparent);color:var(--who,var(--accent));border-color:color-mix(in srgb,var(--who,var(--accent)) 30%,transparent)}
#pipeline-board{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 12px;align-items:flex-start;scroll-snap-type:x proximity}

/* ============================================================================
   PAGE PASS 5c — Calendar, Comebacks, Invoices
   ============================================================================ */

/* ── Calendar: chrome ──────────────────────────────────────────────────────── */
.cal-topbar{gap:10px;margin-bottom:14px}
.cal-period-label{font-family:var(--font-ui);font-size:15px;font-weight:700;letter-spacing:-0.01em;text-transform:none;color:var(--text)}
.cal-view-btn{
  background:var(--surface);border:1px solid var(--border-strong);color:var(--text-2);font-family:var(--font-display);
  font-size:11px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;padding:6px 14px;border-radius:var(--r-pill);
  transition:background var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std),border-color var(--dur-fast) var(--ease-std);
}
.cal-view-btn:hover{border-color:var(--text-3);color:var(--text)}
.cal-view-btn.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.cal-month-wrap{gap:16px}
.cal-month-outer,.cal-dpanel,.cal-week-outer,.cal-day-outer{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
:root[data-theme^="black"] .cal-month-outer,:root[data-theme^="black"] .cal-dpanel,:root[data-theme^="black"] .cal-week-outer,:root[data-theme^="black"] .cal-day-outer{box-shadow:none}
.cal-dh{background:var(--bg-subtle);border-bottom:1px solid var(--border)}
.cal-dh span{font-family:var(--font-display);font-size:10px;letter-spacing:0.12em;color:var(--text-3);padding:9px 0}
.cal-cell{border-right:1px solid var(--border);border-bottom:1px solid var(--border);min-height:96px;padding:6px 5px;transition:background var(--dur-fast) var(--ease-std)}
.cal-cell:hover{background:var(--bg-subtle)}
.cal-cell.c-other{opacity:.35}
.cal-cell.c-today{background:var(--accent-faint)}
.cal-cell.c-sel{background:var(--accent-soft)!important;box-shadow:inset 0 0 0 2px var(--accent)}
.cal-dn{font-size:12px;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums}
.cal-cell.c-today .cal-dn{background:var(--accent);color:var(--accent-fg)}
.cal-more{color:var(--accent-text);font-size:10px;font-weight:600}
.cal-chip,.cal-week-chip{border-radius:var(--r-xs);font-weight:500;line-height:1.35}
.cal-chip{padding:3px 5px 3px 7px;margin-bottom:3px}
.cal-week-chip{padding:5px 7px;margin-bottom:5px;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-std)}
.cal-week-chip:hover{filter:none;transform:translateY(-1px);box-shadow:var(--sh-1)}
.cal-chip.ev-viewing,.cal-week-chip.ev-viewing{background:var(--info-soft);color:var(--info);border-left-color:var(--info)}
.cal-chip.ev-collection,.cal-week-chip.ev-collection{background:var(--ok-soft);color:var(--ok);border-left-color:var(--ok)}
.cal-chip.ev-sale,.cal-week-chip.ev-sale{background:var(--teal-soft);color:var(--teal);border-left-color:var(--teal)}
.cal-chip.ev-delivery,.cal-week-chip.ev-delivery{background:var(--warn-soft);color:var(--warn);border-left-color:var(--warn)}
.cal-chip.ev-other,.cal-week-chip.ev-other{background:var(--purple-soft);color:var(--purple);border-left-color:var(--purple)}
.cal-chip.cal-done,.cal-week-chip.cal-done{opacity:.4}
.cal-dpanel-head{background:var(--bg-subtle);border-bottom:1px solid var(--border);padding:12px 14px}
.cal-dpanel-ev{border-bottom:1px solid var(--border);padding:11px 14px;transition:opacity var(--dur-slow) var(--ease-std)}
.cal-dpanel-ev.cal-fade-out{opacity:0;pointer-events:none}
.cal-week-col{border-right:1px solid var(--border)}
.cal-week-head{background:var(--bg-subtle);border-bottom:1px solid var(--border)}
.cal-week-head:hover{background:var(--accent-faint)}
.cal-week-head.wh-today{background:var(--accent-faint)}
.cal-wdn{font-family:var(--font-display);font-size:10px;letter-spacing:0.12em;color:var(--text-3)}
.cal-wdd{font-size:18px;font-weight:700;color:var(--text)}
.cal-week-head.wh-today .cal-wdd{background:var(--accent);color:var(--accent-fg)}
.cal-day-head{background:var(--bg-subtle);border-bottom:1px solid var(--border)}
.cal-day-ev{border-bottom:1px solid var(--border);transition:opacity var(--dur-slow) var(--ease-std)}
.cal-day-ev:hover{background:var(--bg-subtle)}
.cal-day-ev.cal-fade-out{opacity:0;pointer-events:none}
.cal-popup{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-4)}
.cal-popup-overlay{background:var(--scrim)}
/* Week view on a phone: seven real columns that scroll sideways, instead of clipping */
@media(max-width:768px){
  .cal-month-wrap{grid-template-columns:1fr}
  .cal-week-outer{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cal-week-cols{min-width:700px}
  .cal-cell{min-height:68px;padding:4px 3px}
  .cal-chip{font-size:9px;padding:2px 3px 2px 5px}
}

/* ── Comebacks & invoices: lists inherit the card kit; tidy the pieces ────── */
#page-comebacks .card,#page-invoices .card{margin-bottom:12px}
#page-invoices .tbl td{padding:10px}
.inv-item,.comeback-item{transition:background var(--dur-fast) var(--ease-std)}
.inv-item:hover,.comeback-item:hover{background:var(--bg-subtle)}

/* ============================================================================
   PAGE PASS 5d/5e — Finance, Pay & Shifts, Staff, Settings, Purchases,
   Reservations, Chat, and the phone shell
   ============================================================================ */

/* ── Finance accordions ────────────────────────────────────────────────────── */
.fin-accordion-section{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-raised);box-shadow:var(--sh-1);margin-bottom:12px}
:root[data-theme^="black"] .fin-accordion-section{box-shadow:none}
.fin-acc-head{background:var(--surface-raised);padding:13px 16px;transition:background var(--dur-fast) var(--ease-std)}
.fin-acc-head:hover{background:var(--bg-subtle)}
.fin-acc-title{font-family:var(--font-display);font-size:11px;letter-spacing:0.1em;color:var(--text)}
.fin-acc-chevron{color:var(--text-3);transition:transform var(--dur) var(--ease-out)}
.fin-acc-body{padding:14px 16px;border-top:1px solid var(--border)}
.pl-row{padding:8px 0;font-size:12px;color:var(--text-2)}
.pl-bar{background:var(--bg-subtle);height:6px}
.pl-expense-row{font-size:12px;color:var(--text-2)}

/* ── Staff ─────────────────────────────────────────────────────────────────── */
.staff-row{padding:10px 0}
.staff-stats{color:var(--text-3);font-size:11px}
.staff-stats span{color:var(--text)}

/* ── Settings ──────────────────────────────────────────────────────────────── */
.set-card .card-sub{color:var(--text-3)}
.set-name{color:var(--text)}
.set-sub{color:var(--text-3)}
.set-row{padding:12px 4px;border-radius:var(--r-sm);transition:background var(--dur-fast) var(--ease-std),padding-left var(--dur-fast) var(--ease-out)}
.set-row:hover{background:var(--bg-subtle);padding-left:8px}
.set-row > .ti:first-child{color:var(--text-2)}
.set-row-t{color:var(--text)}
.set-row-s,.set-chev{color:var(--text-3)}
.set-row-danger .set-row-t,.set-row-danger > .ti:first-child{color:var(--danger)}
.set-theme{border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);transition:border-color var(--dur-fast) var(--ease-std),box-shadow var(--dur-fast) var(--ease-std)}
.set-theme:hover{border-color:var(--text-3)}
.set-theme.on{border-color:var(--accent);box-shadow:var(--focus-ring)}
.set-theme-name{color:var(--text)}
.set-theme .ti{color:var(--accent)}
.set-theme-label{color:var(--text-3);font-family:var(--font-display);font-size:10px}
.set-access-chip{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--r-pill);color:var(--text-2)}

/* ── Purchases / auction rows ──────────────────────────────────────────────── */
.auc-row{border-bottom:1px solid var(--border);transition:background var(--dur-fast) var(--ease-std)}
:root[data-theme] .auc-row:hover,.auc-row:hover{background:var(--bg-subtle)}
.auc-picked{box-shadow:inset 3px 0 0 var(--accent)}
.auc-thumb{border-radius:var(--r-sm);background:var(--bg-subtle)}
.auc-thumb-none{color:var(--text-3);border:1px solid var(--border)}
.auc-lotno{font-family:var(--font-display);color:var(--text)}
.auc-lane,.auc-meta{color:var(--text-3)}
.auc-title{color:var(--text)}

/* ── Team chat ─────────────────────────────────────────────────────────────── */
.chat-bubble{border-radius:var(--r-lg);box-shadow:var(--sh-1)}
#chat-messages > .chat-theirs{background:var(--surface-raised);border:1px solid var(--border)}
#chat-messages > .chat-mine{background:var(--accent-soft);border:1px solid var(--accent-border)}
.chat-bubble-text{color:var(--text)}
.chat-bubble-time{color:var(--text-3)}
#chat-input{border-radius:var(--r-pill)!important}

/* ── Phone shell: tab bar and the More sheet ───────────────────────────────── */
.mobile-tab-bar,:root[data-theme] .mobile-tab-bar{
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
  border-top:1px solid var(--border);box-shadow:none;
}
.mobile-tab-bar-inner{height:var(--tabbar-h)}
.mob-tab{font-size:9px;letter-spacing:0.1em;color:var(--text-3);gap:4px;transition:color var(--dur-fast) var(--ease-std),transform .1s ease}
.mob-tab .ti{font-size:22px;transition:transform var(--dur-fast) var(--ease-spring)}
.mob-tab.active,.mob-tab.active .ti{color:var(--accent)}
.mob-tab.active .ti{transform:translateY(-1px)}
/* The tab badges never carry a number — nothing writes text into them — so the
 * inherited pill geometry (min-width:14px, padding:1px 5px) drew an empty red
 * bar floating above and to the left of each icon. It read as a rendering
 * fault, not a notification. A dot is what an empty badge should be: small,
 * round, and touching the corner of the glyph it belongs to. */
.mob-tab .mob-badge{background:var(--danger);top:7px;right:calc(50% - 15px);
  width:7px;height:7px;min-width:0;padding:0;border-radius:50%;
  box-shadow:0 0 0 2px var(--surface,var(--card));font-size:0;line-height:0}
.mob-more-sheet{background:var(--surface-raised);border:1px solid var(--border);border-bottom:0;border-radius:var(--r-2xl) var(--r-2xl) 0 0;box-shadow:var(--sh-4);transition:transform var(--dur-slow) var(--ease-out)}
.mob-more-pill{background:var(--border-strong)}
.mob-more-grid{background:var(--border);gap:1px}
.mob-more-item{background:var(--surface-raised);color:var(--text-2);font-size:10px;letter-spacing:0.08em;border-radius:0}
.mob-more-item:active{background:var(--bg-subtle)}
.mob-more-item .ti{color:var(--text-2)}
.mob-more-item.active,.mob-more-item.active .ti{color:var(--accent)}
.mob-more-footer{background:var(--border)}
.mob-more-action{background:var(--surface-raised);color:var(--text-2);min-height:48px}
.mob-overlay,.nav-overlay{background:var(--scrim)}
.sidebar.mob-open{box-shadow:var(--sh-4)}

/* ============================================================================
   OFFICIAL PASS — calm typography, fewer controls, less decoration
   ----------------------------------------------------------------------------
   Inter for the interface; Barlow Condensed survives only where it means
   something (the wordmark and number plates). Sentence case everywhere: the
   uppercase-and-tracked labels were the single biggest reason it read as a
   template rather than a product.
   ============================================================================ */
:root{
  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-plate:'Barlow Condensed','Barlow',system-ui,sans-serif;
}
body,input,select,textarea,button,.btn{font-family:var(--font-ui)}
body{font-size:13px;letter-spacing:-0.003em;-webkit-font-smoothing:antialiased}

/* Buttons */
.btn{text-transform:none;letter-spacing:-0.005em;font-size:13px;font-weight:600;border-radius:var(--r-sm)}
.btn-sm{font-size:12px}
.btn-xs{font-size:12px;font-weight:500}
.btn-primary,:root[data-theme] .btn-primary{box-shadow:none}
.btn-ghost,:root[data-theme] .btn-ghost{border-color:var(--border)}
.btn-ghost:hover,:root[data-theme] .btn-ghost:hover{border-color:var(--border-strong)}

/* Headings and labels */
.tb-title{font-size:15px;font-weight:600;letter-spacing:-0.015em}
.card-title,.modal-title,.fin-acc-title{font-family:var(--font-ui);text-transform:none;letter-spacing:-0.01em;font-weight:600;font-size:13px;color:var(--text)}
.sb-section,.db-section-label,.k-group,.set-theme-label,.set-card .card-sub,.k-palette-foot,.crm-tl-type,.cal-dh span,.cal-wdn,.auc-lane{
  font-family:var(--font-ui);text-transform:none;letter-spacing:0;font-weight:500;
}
.sb-section{font-size:11px;color:var(--text-3);padding:16px 10px 4px}
.db-section-label{font-size:12px;color:var(--text-3);margin:6px 0 8px 2px}
.db-section-label::after{display:none}
.k-group{font-size:11px}
.field label{font-family:var(--font-ui);text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;color:var(--text-2)}
.tbl th{font-family:var(--font-ui);text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;color:var(--text-3)}
.cal-dh span,.cal-wdn{font-size:11px;color:var(--text-3)}
.crm-tl-type{font-size:11px}
.sb-user-role,.onb-hide,.set-sub,.staff-stats{text-transform:none;letter-spacing:0}
.sb-user-role{font-size:11px}
.onb-hide{font-size:12px;font-family:var(--font-ui)}

/* Chips, badges and pills: sentence case, one weight */
.badge,.status-pill,.crm-source-badge,.filter-pill,.cal-view-btn,.mob-tab,.mob-more-item,.mob-more-action,.k-pipe-label,.db-tile-lbl,.db-dept-badge,.k-seg > *,.k-pipe-chip,.db-task-pill,.set-access-chip{
  font-family:var(--font-ui);text-transform:none;letter-spacing:0;
}
.badge{font-size:11px;font-weight:600;padding:2px 7px}
.status-pill{font-size:12px;font-weight:600;padding:4px 10px}
.filter-pill{font-size:12px;font-weight:500;padding:6px 12px}
.cal-view-btn,.k-seg > *{font-size:12px;font-weight:500}
.db-tile-lbl{font-size:12px;font-weight:500;color:var(--text-2);text-transform:none}
.db-dept-badge{font-size:11px;font-weight:600;text-transform:none}
.k-pipe-label{font-size:12px;font-weight:600;text-transform:none}
.mob-tab{font-size:10px;font-weight:600}
.mob-more-item{font-size:11px;font-weight:500}
.mob-more-action{font-size:12px;font-weight:600}
.crm-source-badge{font-size:11px;font-weight:500}

/* Numbers: Inter with tight tracking; plates keep the plate face */
.db-tile-num,.db-pl-n,.cal-wdd,.k-pipe-count,.auc-lotno{font-family:var(--font-ui);font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.db-tile-num{font-size:34px}
.tbl-reg,.sb-logo-main{font-family:var(--font-plate)}
.tbl-reg{letter-spacing:0.06em}

/* Fewer controls */
@media(min-width:769px){
  #refresh-btn,#tb-chat-btn,.tb-date{display:none!important}   /* chat is in the sidebar; refresh is ⌘K → "Refresh data" */
}
.sb-user .sb-icon-btn{display:none}                              /* Sign out lives in Settings */
.stock-row .btn[title$="website"]{display:none}                  /* website toggle is in the car file and the ⋯ menu */
.sr-actions .btn{width:34px!important}
.badge-amber[title^="Missing"]{background:var(--bg-subtle);color:var(--text-3);border-color:var(--border)}  /* an FYI, not a warning */

/* Less decoration */
.sb-logo-main{background:none;-webkit-text-fill-color:currentColor;color:var(--text);font-size:15px;letter-spacing:0.12em}
.sb-logo-sub{display:none}
.sb-user-avatar{box-shadow:none}
.crm-avatar{box-shadow:none}
.status-dot{box-shadow:none}
.card,.crm-card,.stat-card,.db-hero-tile,.db-car-card,.fin-accordion-section,.onb,.cal-month-outer,.cal-dpanel,.cal-week-outer,.cal-day-outer{box-shadow:none}
.db-hero-tile:hover,.db-car-card:hover,.db-pl-chip{box-shadow:none;transform:none}
.k-pipe-card{box-shadow:none}
.k-pipe-card:hover{box-shadow:none;transform:none}
.card-head{border-bottom-color:var(--border)}

/* Popover menu */
.k-menu{
  position:fixed;z-index:950;min-width:190px;padding:5px;background:var(--surface-raised);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--sh-3);animation:kPop var(--dur-fast) var(--ease-out) both;
}
.k-menu.closing{animation:kFadeOut var(--dur-fast) var(--ease-std) both;pointer-events:none}
.k-menu-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-xs);font-size:13px;font-weight:500;color:var(--text);cursor:pointer;min-height:36px}
.k-menu-item i{font-size:15px;color:var(--text-3);width:18px;text-align:center}
.k-menu-item:hover,.k-menu-item.sel{background:var(--bg-subtle)}
.k-menu-item.danger,.k-menu-item.danger i{color:var(--danger)}
.k-menu-item.danger:hover{background:var(--danger-soft)}
.k-menu-item.disabled{opacity:.45;cursor:default}
.k-menu-item .k-kbd{margin-left:auto}
.k-menu-sep{height:1px;background:var(--border);margin:5px 4px}
@media(max-width:768px){ .k-menu{min-width:220px} .k-menu-item{min-height:44px;font-size:13px} }
.stock-legend{display:none!important}   /* the status pill on each row already says it */

/* ============================================================================
   NAVIGATION RESET — five hubs, tabs inside each, chat as a slide-over,
   settings under your name
   ============================================================================ */
.sb-nav-legacy{display:none!important}
#sb-hubs{padding:8px 8px 6px;flex:1}
.hub-link{
  display:flex;align-items:center;gap:11px;padding:10px 10px;border-radius:var(--r-sm);margin:2px 0;
  color:var(--text-2);font-size:13px;font-weight:500;cursor:pointer;position:relative;
  transition:background var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std);
}
.hub-link i{font-size:18px;color:var(--text-3);transition:color var(--dur-fast) var(--ease-std)}
.hub-link:hover{background:var(--bg-subtle);color:var(--text)}
.hub-link:hover i{color:var(--text-2)}
.hub-link.active{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.hub-link.active i{color:var(--accent)}
.hub-link .sb-badge{margin-left:auto}
.hub-link.hub-chat{margin-top:10px;border-top:1px solid var(--border);border-radius:0 0 var(--r-sm) var(--r-sm);padding-top:14px}
@media(min-width:769px){
  .shell.sb-collapsed .hub-link{font-size:0;justify-content:center;padding:11px 0;gap:0}
  .shell.sb-collapsed .hub-link i{font-size:18px}
  .shell.sb-collapsed .hub-link .sb-badge{position:absolute;top:8px;right:10px;margin:0}
  .shell.sb-collapsed .hub-link:hover::after{
    content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
    background:var(--text);color:var(--surface);font-size:12px;font-weight:500;padding:5px 9px;border-radius:var(--r-xs);
    white-space:nowrap;box-shadow:var(--sh-2);z-index:700;pointer-events:none;
  }
}

/* The user block at the top becomes the account menu */
.sb-user{cursor:pointer;border-radius:var(--r-sm);margin:0 8px 4px;padding:10px 8px;border-bottom:0;transition:background var(--dur-fast) var(--ease-std)}
.sb-user:hover{background:var(--bg-subtle)}
.sb-user::after{content:"\eb0e";font-family:'tabler-icons';font-size:13px;color:var(--text-3);margin-left:auto}
.sb-user-tasks{display:none}
.shell.sb-collapsed .sb-user::after{display:none}

/* Tabs inside a hub: sit in the topbar next to the title */
.hub-tabs{display:flex;align-items:center;gap:2px;margin-left:16px;min-width:0;overflow-x:auto;scrollbar-width:none}
.hub-tabs::-webkit-scrollbar{display:none}
.hub-tabs:empty{display:none}
.hub-tab{
  padding:6px 11px;border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--text-2);cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std);
}
.hub-tab:hover{background:var(--bg-subtle);color:var(--text)}
.hub-tab.on{background:var(--bg-subtle);color:var(--text);font-weight:600}
.hub-tab .sb-badge{display:inline-block;margin-left:6px;vertical-align:middle}
.topbar .tb-title{flex-shrink:0}
@media(max-width:768px){
  .hub-tabs{order:10;flex-basis:100%;margin:0 -12px -7px;padding:0 12px 8px;gap:4px}
  .hub-tab{font-size:13px;padding:7px 12px;background:var(--bg-subtle)}
  .hub-tab.on{background:var(--accent);color:var(--accent-fg)}
}
.crm-tabs{display:none!important}          /* Customers / Pipeline are hub tabs now */

/* Slide-over drawer */
.k-drawer-backdrop{position:fixed;inset:0;z-index:850;background:transparent;transition:background var(--dur) var(--ease-std)}
.k-drawer-backdrop.open{background:var(--scrim)}
.k-drawer{
  position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--surface-raised);border-left:1px solid var(--border);
  box-shadow:var(--sh-4);display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-out);
}
.k-drawer-backdrop.open .k-drawer{transform:none}
.k-drawer-backdrop.closing .k-drawer{transform:translateX(100%);transition-duration:var(--dur)}
.k-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:calc(12px + var(--safe-top)) 14px 10px 18px;border-bottom:1px solid var(--border);flex:0 0 auto}
.k-drawer-title{font-size:15px;font-weight:600;color:var(--text)}
.k-drawer-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.k-drawer-body .page{display:flex!important;flex-direction:column;padding:0;flex:1 1 auto;min-height:0;animation:none}
.k-drawer-body #page-chat .card{height:100%!important;min-height:0!important;border:0;border-radius:0;box-shadow:none}
.k-drawer-body #page-chat.active{height:auto}
@media(max-width:768px){ .k-drawer{width:100%;border-left:0} }

/* ── One primary action per page; the rest live in ⋯ ──────────────────────── */
#topbar-actions{display:flex;align-items:center;gap:6px}
.k-prompt .modal{width:440px}
.k-prompt .field{margin-bottom:0}
.k-prompt-hint{font-size:12px;color:var(--text-3);margin-top:8px;line-height:1.5}
/* Sell-car form: the Generate button stays reachable while the long form scrolls */
#sell-generate-btn{position:sticky;bottom:-16px;margin:14px -18px -16px;width:calc(100% + 36px)!important;border-radius:0;min-height:46px;box-shadow:0 -8px 20px color-mix(in srgb,var(--surface-raised) 90%,transparent)}

/* ============================================================================
   PHONE FIXES 7 Sep 2026 — the topbar must grow with its second row (hub
   tabs) instead of letting it spill over the page; tiles are tappable.
   ============================================================================ */
@media(max-width:768px){
  .topbar{
    height:auto!important;min-height:calc(50px + var(--safe-top));
    padding:calc(var(--safe-top) + 6px) 12px 6px;flex-wrap:wrap;row-gap:6px;align-items:center;
  }
  .tb-title{flex:1 1 auto;min-width:0;font-size:18px;line-height:1.2;padding-right:8px}
  .tb-right{margin-left:auto;flex-wrap:nowrap}
  #topbar-actions .btn{padding:8px 11px;min-height:38px;white-space:nowrap}
  .hub-tabs{
    order:10;flex-basis:100%;margin:2px 0 0;padding:0 0 4px;gap:6px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .hub-tabs::after{content:"";flex:0 0 12px}          /* room to scroll the last tab fully in */
  .hub-tab{flex:0 0 auto;font-size:13px;padding:8px 14px;background:var(--bg-subtle);min-height:38px;display:inline-flex;align-items:center}
  .hub-tab.on{background:var(--accent);color:var(--accent-fg)}
  .hub-tab .sb-badge{background:currentColor;opacity:.9}
  .page{padding-top:12px}
}
.db-hero-tile[role="button"]{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s ease,background var(--dur-fast) var(--ease-std)}
.db-hero-tile[role="button"]:active{transform:scale(.97)}

/* ── Home: insights strip ────────────────────────────────────────────────── */
.ins{margin:-4px 0 18px}
.ins-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ins-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;font-family:var(--font-ui);
  background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px 11px;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-std),transform var(--dur-fast) var(--ease-out);color:var(--text)}
.ins-tile:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.ins-tile .ti{font-size:15px;color:var(--text-3);margin-bottom:4px}
.ins-num{font-family:var(--font-display);font-size:22px;font-weight:800;line-height:1;letter-spacing:-.01em}
.ins-lbl{font-size:12px;font-weight:500;color:var(--text-2)}
.ins-sub{font-size:11px;color:var(--text-3)}
.ins-ok .ins-num,.ins-ok .ti{color:var(--ok)}
.ins-warn .ins-num,.ins-warn .ti{color:var(--warn)}
.ins-info .ins-num,.ins-info .ti{color:var(--info)}
@media(max-width:768px){.ins-grid{grid-template-columns:repeat(2,1fr);gap:8px}.ins-tile{padding:10px 12px}.ins-num{font-size:22px}}

/* ── AutoTrader messages (lead card) ─────────────────────────────────────── */
.atm{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-sunken);margin:14px 0 4px;overflow:hidden}
.atm-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);font-size:12px;font-weight:600;color:var(--text)}
.atm-head .muted{font-weight:400;color:var(--text-3);margin-left:auto;font-size:11px}
.atm-thread{max-height:280px;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.atm-msg{max-width:82%;padding:8px 11px;border-radius:12px;font-size:13px;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.atm-msg.them{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}
.atm-msg.us{align-self:flex-end;background:var(--accent);color:var(--accent-fg);border-bottom-right-radius:4px}
.atm-meta{font-size:10px;color:var(--text-3);margin-top:3px}
.atm-msg.us .atm-meta{color:rgba(255,255,255,.75);text-align:right}
.atm-empty{font-size:12px;color:var(--text-3);text-align:center;padding:18px 8px}
.atm-reply{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-top:1px solid var(--border);background:var(--surface)}
.atm-reply textarea{font-family:var(--font-ui);font-size:13px;min-height:64px;resize:vertical;border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:9px 10px;background:var(--surface);color:var(--text)}
.atm-reply textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
.atm-reply-row{display:flex;align-items:center;gap:10px}
.atm-count{font-size:11px;color:var(--text-3)}
.atm-count.over{color:var(--danger);font-weight:600}
.k-pipe-unread{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--danger);background:var(--danger-soft);border-radius:999px;padding:2px 7px}
.k-pipe-unread::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--danger)}

/* ── Vehicle check + retail check cards (car page) ───────────────────────── */
.vc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.vc-item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);font-size:12px}
.vc-item .ti{font-size:15px}
.vc-item b{font-weight:600}
.vc-item.ok{border-color:rgba(31,107,52,.25);background:var(--ok-soft)}.vc-item.ok .ti{color:var(--ok)}
.vc-item.bad{border-color:rgba(179,38,30,.3);background:var(--danger-soft)}.vc-item.bad .ti,.vc-item.bad b{color:var(--danger)}
.vc-item.warn{border-color:rgba(138,90,0,.3);background:var(--warn-soft)}.vc-item.warn .ti{color:var(--warn)}
.vc-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-sm);margin-bottom:12px;font-size:12px;font-weight:600;line-height:1.5}
/* The icon is the only thing that should be its own column. Any <b> in the
 * message was becoming a third flex item, so "Mileage is 24,500 BELOW the
 * last reading" broke into three stacked columns on a phone. The icon holds
 * its size and everything else is one flowing block. */
.vc-banner > .ti{flex:0 0 auto;font-size:15px}
.vc-banner > *:not(.ti){flex:1 1 auto;min-width:0}
.vc-banner.bad{background:var(--danger-soft);color:var(--danger);border:1px solid rgba(179,38,30,.3)}
.vc-banner.ok{background:var(--ok-soft);color:var(--ok);border:1px solid rgba(31,107,52,.25)}
.vc-banner .ti{font-size:18px}
.vc-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:var(--text-3)}
.rc-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:10px}
.rc-num{padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface)}
.rc-num b{display:block;font-family:var(--font-display);font-size:22px;font-weight:800;line-height:1.1}
.rc-num span{font-size:11px;color:var(--text-3)}
.rc-num.good b{color:var(--ok)}.rc-num.poor b{color:var(--danger)}.rc-num.mid b{color:var(--warn)}
@media(max-width:768px){.atm-thread{max-height:220px}.atm-msg{max-width:90%}}

/* ── Assistant: office + queue ─────────────────────────────────────────────── */
.as-office{padding:14px 16px 10px;margin-bottom:14px}
.as-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.as-floor{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:12px 6px 4px;border-radius:var(--r-md);background:
  repeating-linear-gradient(90deg,transparent 0 58px,rgba(0,0,0,.035) 58px 60px),linear-gradient(180deg,#f3efe7,#ebe5da)}
:root[data-theme^="black"] .as-floor{background:repeating-linear-gradient(90deg,transparent 0 58px,rgba(255,255,255,.04) 58px 60px),linear-gradient(180deg,#22262c,#1a1d22)}
.as-desk{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:1px solid transparent;border-radius:var(--r-md);padding:6px 4px;cursor:pointer;font-family:var(--font-ui);color:var(--text);transition:background var(--dur-fast),border-color var(--dur-fast)}
.as-desk:hover{background:rgba(255,255,255,.45)}
:root[data-theme^="black"] .as-desk:hover{background:rgba(255,255,255,.05)}
.as-desk.on{border-color:var(--accent);background:rgba(255,255,255,.6)}
.as-desk.soon{opacity:.55}
.as-fig{width:100%;max-width:120px;height:auto;overflow:visible}
.as-screen{fill:#9fd3ff}
.as-idle .as-screen{fill:#4b6a85}.as-soon .as-screen{fill:#6b7280}
.as-working .as-body{animation:as-bob 1.1s ease-in-out infinite}
@keyframes as-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.as-dot{fill:#0d1f12;animation:as-blink 1.2s infinite}.as-dot:nth-child(2){animation-delay:.2s}.as-dot:nth-child(3){animation-delay:.4s}
@keyframes as-blink{0%,80%,100%{opacity:.2}40%{opacity:1}}
.as-bubble{animation:as-pop .5s var(--ease-spring) both}
@keyframes as-pop{from{transform:scale(.6);transform-origin:70px 30px;opacity:0}to{transform:scale(1);opacity:1}}
.as-zz{animation:as-zz 2.4s ease-in-out infinite}
@keyframes as-zz{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:.9;transform:translateY(-3px)}}
.as-name{font-size:12px;font-weight:600;margin-top:2px}
.as-status{font-size:10px;color:var(--text-3);text-align:center;line-height:1.2}
.as-s-needs{color:var(--danger);font-weight:600}.as-s-working{color:var(--info)}.as-s-failed{color:var(--danger)}
.as-job{margin-bottom:10px}
.as-draft{border:1px solid var(--border);border-radius:var(--r-sm);padding:10px;margin-bottom:8px;background:var(--surface-sunken)}
.as-draft-h{font-size:13px;margin-bottom:4px}
.as-asked{font-size:12px;color:var(--text-2);font-style:italic;margin-bottom:6px}
.as-draft textarea{width:100%;font-family:var(--font-ui);font-size:13px;line-height:1.45;min-height:84px;resize:vertical;border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:8px 10px;background:var(--surface);color:var(--text)}
.as-draft textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
.as-brief .card-body{padding:14px 16px}
.as-brief-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
.as-headline{font-size:15px;font-weight:600;margin:4px 0 10px;color:var(--text)}
.as-sec{margin-top:10px}
.as-sec-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.as-item{font-size:13px;color:var(--text-2);padding:4px 0;border-top:1px solid var(--border);display:flex;gap:8px;align-items:baseline}
.as-item:first-of-type{border-top:0}
.as-item.urgent{color:var(--text)}
.as-item.urgent::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--danger);flex:none;margin-top:6px}
.as-who{font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-faint);border-radius:999px;padding:1px 7px;flex:none}
.as-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border)}
.as-row:first-child{border-top:0}
.as-needs-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--danger);background:var(--danger-soft);border-radius:999px;padding:5px 11px;margin-bottom:8px;cursor:pointer}
.badge-ok{background:var(--ok-soft);color:var(--ok)}.badge-bad{background:var(--danger-soft);color:var(--danger)}.badge-info{background:var(--info-soft);color:var(--info)}.badge-grey{background:var(--neutral-soft);color:var(--neutral)}
@media(max-width:768px){.as-floor{grid-template-columns:repeat(3,1fr)}.as-fig{max-width:96px}}

/* ── Warranty answer pills (Confirm Collection) ─────────────────────────── */
.wpill{border:1px solid var(--border2);border-radius:6px;padding:8px 6px;text-align:center;font-size:11px;font-weight:700;cursor:pointer;color:var(--text);transition:all .15s;user-select:none}
.wpill:hover{border-color:rgba(80,180,120,0.4)}
.wpill.on{background:rgba(80,180,120,0.15);border-color:rgba(80,180,120,0.6);box-shadow:0 0 0 1px rgba(80,180,120,0.3)}

/* ============================================================================
   STAGE 7 — CALM (16 Sep 2026)
   Lijth: "the dash is overflown with info and colours". One accent (green) for
   the primary action, red only for a real problem, everything else grey. One
   typeface, three sizes, no tiny capitals. Loaded last, so it wins. The
   attribute selectors below are deliberate: index.html still carries ~2,000
   inline styles and this layer retunes them in one place instead of editing
   each one. Delete this block to get the old look back.
   ============================================================================ */
:root, :root[data-theme]{
  /* The old amber / blue / purple / teal tones are now the same quiet grey.
     Only --ok (green) and --danger (red) keep a colour.

     SEMANTIC tokens, not primitives. This block used to reach straight for
     --gray-150 and --gray-600, which are fixed light values with no dark
     counterpart, and it applies to `:root[data-theme]` — every theme. The
     result, found 25 Sep 2026: in both dark themes every neutral badge, status
     pill and department chip drew light-grey text on a LIGHT-GREY background,
     1.95:1. "Deposit Taken", "Inspection", "AutoTrader", "sold" — invisible.
     --bg-subtle and --text-2 carry the right value per theme; the primitives
     never can. */
  --warn:var(--text-2);       --warn-soft:var(--bg-subtle);
  --info:var(--text-2);       --info-soft:var(--bg-subtle);
  --purple:var(--text-2);     --purple-soft:var(--bg-subtle);
  --teal:var(--text-2);       --teal-soft:var(--bg-subtle);
  --gold:var(--text-3);
  --neutral:var(--text-2);    --neutral-soft:var(--bg-subtle);
  --ok:#1f6b34;               --ok-soft:rgba(31,107,52,0.10);
  --danger:#c0392b;           --danger-soft:rgba(192,57,43,0.09);
  /* Green and red are the only two colours left, so they carry all the meaning
   * in the app: "done" and "a real problem". The two values above are chosen
   * against a white card and are far too dark to read on a black one — the
   * dark override sits at the end of this block, after the rules, so nothing
   * in between can shadow it. */

  /* One typeface, bigger and calmer. */
  --font-ui:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',system-ui,sans-serif;
  --font-display:var(--font-ui);
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:15px; --fs-lg:17px; --fs-xl:22px; --fs-2xl:26px; --fs-3xl:32px;
  --track-caps:0;
  --r-xs:8px; --r-sm:10px; --r-md:12px; --r-lg:14px;
  --sh-1:none; --sh-2:0 4px 14px rgba(16,24,40,0.08);
}
body, input, select, textarea, button{font-family:var(--font-ui)}
body{font-size:15px;color:var(--text)}

/* ── Type: no tiny capitals anywhere ─────────────────────────────────────── */
[style*="text-transform:uppercase"],[style*="text-transform: uppercase"]{text-transform:none!important;letter-spacing:0!important;font-weight:600!important}
[style*="letter-spacing:0.1"],[style*="letter-spacing:0.2"],[style*="letter-spacing:0.3"],[style*="letter-spacing:.1"]{letter-spacing:0!important}
[style*="font-size:9px"],[style*="font-size:9px"],[style*="font-size:10px"],[style*="font-size:10px"],[style*="font-size:10px"]{font-size:12px!important}
[style*="font-size:11px"]{font-size:13px!important}
[style*="font-size:12px"]{font-size:13px!important}
[style*="font-size:13px"]{font-size:15px!important}
[style*="Barlow Condensed"]{font-family:var(--font-ui)!important;letter-spacing:0!important}
.card-title,.db-section-label,.modal-title,.pin-title,.onb-title{font-family:var(--font-ui);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text)}
.db-section-label{font-size:13px;font-weight:600;color:var(--text-2);margin:18px 0 8px 2px}
.db-section-label::after{display:none}
.modal-title{font-size:15px}
#page-title,.topbar-title{font-family:var(--font-ui)!important;font-size:22px!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important}
.tbl-make{font-size:15px;font-weight:600}
.tbl-reg{font-family:'SF Mono','Menlo',monospace;font-size:12px;letter-spacing:0.04em;font-weight:700}   /* a number plate stays a number plate */
.note-text{font-size:15px}.note-meta,.tdi-time{font-size:12px}.db-task-text,.tdi-text{font-size:13px}
.ins-num{font-size:22px;font-weight:700}.ins-lbl{font-size:13px}.ins-sub{font-size:12px}

/* ── Colour: inline hex and rgba values retuned in one place ─────────────── */
/* amber / orange / blue / purple / gold text → quiet grey */
[style*="color:#d09030"],[style*="color:#d4943a"],[style*="color:#f97316"],[style*="color:#e0b040"],[style*="color:#c8b43c"],[style*="color:#6090e0"],[style*="color:#50a0e0"],[style*="color:#a080e0"],[style*="color:#9a6ae0"],[style*="color:#a060e0"],[style*="color:#8d948a"],[style*="color:#6d7468"]{color:var(--text-2)!important}
/* the many greens → the one green */
[style*="color:#50b478"],[style*="color:#5aaa5a"],[style*="color:#3d7a52"],[style*="color:#2e7d4f"],[style*="color:#35855a"],[style*="color:#2f5d43"],[style*="color:#25d366"]{color:var(--ok)!important}
/* the many reds → the one red */
[style*="color:#e06060"],[style*="color:#e07060"],[style*="color:#c05050"],[style*="color:#c02020"],[style*="color:#c03030"],[style*="color:#e53e3e"]{color:var(--danger)!important}
/* tinted backgrounds: amber/blue/purple/gold → grey; green → green-soft; red → red-soft */
[style*="background:rgba(249,115,22"],[style*="background:rgba(160,96,16"],[style*="background:rgba(210,150,40"],[style*="background:rgba(208,144,48"],[style*="background:rgba(208,150,30"],[style*="background:rgba(200,180,60"],[style*="background:rgba(80,160,224"],[style*="background:rgba(96,144,224"],[style*="background:rgba(160,128,224"],[style*="background:rgba(80,100,220"],[style*="background:rgba(26,74,138"],[style*="background:rgba(90,90,120"],[style*="background:rgba(120,120,120"]{background:var(--bg-subtle)!important;border-color:var(--border)!important}
[style*="background:rgba(80,180,120"],[style*="background:rgba(42,122,42"],[style*="background:rgba(61,122,82"],[style*="background:rgba(90,170,90"],[style*="background:rgba(46,125,79"]{background:var(--ok-soft)!important;border-color:color-mix(in srgb,var(--ok) 22%,transparent)!important}
[style*="background:rgba(224,96,96"],[style*="background:rgba(192,48,48"],[style*="background:rgba(192,80,80"],[style*="background:rgba(220,80,60"],[style*="background:rgba(208,56,56"]{background:var(--danger-soft)!important;border-color:color-mix(in srgb,var(--danger) 22%,transparent)!important}
[style*="border:1px solid rgba(249,115,22"],[style*="border:1px solid rgba(160,96,16"],[style*="border:1px solid rgba(208,150,30"],[style*="border:1px solid rgba(96,144,224"],[style*="border:1px solid rgba(80,160,224"]{border-color:var(--border)!important}
/* inline department tints (DEPT_COLORS + '18' / '22' / '44') are neutral now that DEPT_COLORS is one grey */

/* ── Badges: one quiet family ────────────────────────────────────────────── */
.badge{font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;padding:3px 9px;border-radius:999px;border:1px solid transparent}
.badge-amber,.badge-blue,.badge-purple,.badge-info,.badge[data-tone="warn"],.badge[data-tone="info"],.badge-grey,.badge[data-tone="neutral"]{background:var(--bg-subtle);color:var(--text-2);border-color:var(--border)}
.badge-green,.badge-ok,.badge[data-tone="ok"]{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.badge-red,.badge-bad,.badge[data-tone="danger"]{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.status-pill{font-size:12px;letter-spacing:0;font-weight:600;text-transform:none}
.pill-inspection,.pill-mechanic,.pill-bodywork,.pill-valet,.pill-photos,.pill-sold,.pill-deposit{background:var(--bg-subtle);color:var(--text-2);border-color:var(--border)}
.pill-ready{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.dot-mechanic,.dot-valet,.dot-bodywork,.dot-inspection,.dot-photos,.dot-sold,.dot-draft,.dot-final{background:var(--text-3);color:var(--text-3)}
.dot-ready,.dot-paid{background:var(--ok);color:var(--ok)}
.db-dept-badge{font-size:12px;font-weight:500;background:var(--bg-subtle)!important;color:var(--text-2)!important;border:1px solid var(--border)!important;border-radius:999px}
.db-task-pill{font-size:12px}

/* ── Surfaces: flatter, fewer boxes ──────────────────────────────────────── */
.card{box-shadow:none;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.card .card{border:0;border-top:1px solid var(--border);border-radius:0;margin-bottom:0}
.card-head{padding:14px 16px 12px}
.card-body{padding:14px 16px}
.db-hero-tile,.db-car-card,.db-pl-chip,.db-vs-booking,.db-vs-ready,.db-vs-clean,.onb,.note-item,.ins-tile{box-shadow:none}
.db-car-card,.db-vs-booking,.db-vs-ready,.db-vs-clean{border-left-width:1px;border-left-color:var(--border)}
.db-car-card.urgent{border-left-width:3px;border-left-color:var(--danger)}
.db-tile-amber,.db-tile-green,.db-tile-red{background:var(--surface);border-color:var(--border)}
.db-tile-amber .db-tile-icon,.db-tile-green .db-tile-icon,.db-tile-amber .db-tile-num,.db-tile-green .db-tile-num{color:var(--text-2);background:var(--bg-subtle)}
.db-tile-red .db-tile-num,.db-tile-red .db-tile-icon{color:var(--danger)}
.ins-ok .ins-num,.ins-ok .ti,.ins-info .ins-num,.ins-info .ti{color:var(--text)}
.ins-warn .ins-num,.ins-warn .ti{color:var(--danger)}
.mot-warning{background:var(--danger-soft);border:1px solid color-mix(in srgb,var(--danger) 25%,transparent);color:var(--danger);border-radius:var(--r-md);font-size:13px}

/* ── Buttons: green means "the thing to do", red means "careful", the rest is quiet ── */
.btn{font-family:var(--font-ui);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;border-radius:var(--r-sm);min-height:38px}
.btn-sm{font-size:13px;min-height:34px}.btn-xs{font-size:12px;min-height:28px}
/* --accent-fg, not #fff. On the dark themes the accent is a BRIGHT green or
 * blue so the primary action still reads as the primary action against a
 * near-black page, and white on it measured 3.5:1 and 3.3:1 — under the 4.5:1
 * a 13px label needs. The token carries white in light mode and dark ink in
 * dark mode. Hard-coding it here silently beat the token, because this rule
 * sits 900 lines below the one that sets it. */
:root[data-theme] .btn-primary,.btn-primary,:root[data-theme] .btn-green,.btn-green{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
:root[data-theme] .btn-primary:hover,.btn-primary:hover,.btn-green:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--accent-fg)}
.btn-amber,.btn-blue,.btn-purple{background:var(--surface);color:var(--text);border:1px solid var(--border-strong)}
.btn-danger{background:var(--surface);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 40%,transparent)}
.btn-danger:hover{background:var(--danger-soft)}

/* ── Home: "Needs a person" ──────────────────────────────────────────────── */
.db-hero,#mot-warnings-area{display:none!important}   /* both live in the Needs list now */
.needs{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:18px;overflow:hidden}
.needs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 10px}
.needs-title{font-size:15px;font-weight:700;color:var(--text)}
.needs-sub{font-size:13px;color:var(--text-3)}
.needs-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--border);cursor:pointer;min-height:56px}
.needs-row:hover{background:var(--bg-subtle)}
.needs-dot{width:10px;height:10px;border-radius:50%;background:var(--text-3);flex:none}
.needs-row.red .needs-dot{background:var(--danger)}
.needs-main{flex:1;min-width:0}
.needs-what{font-size:15px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.needs-row.red .needs-what{color:var(--danger)}
.needs-who{font-size:13px;color:var(--text-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.needs-act{flex:none}
.needs-empty{padding:22px 16px;text-align:center;color:var(--text-3);font-size:13px}
.needs-more{padding:10px 16px;border-top:1px solid var(--border);font-size:13px;color:var(--text-2);text-align:center;cursor:pointer}
.ins{margin:0 0 18px}
@media (max-width:640px){ .ins-grid{grid-template-columns:repeat(2,1fr)} .needs-act .btn{min-height:34px;padding:0 10px} }
.stock-legend{display:none}   /* every department is the same grey now, so the dot key says nothing */
/* ── "More" folds: one quiet line that opens the rest ────────────────────── */
details.calm-more{margin:6px 0 14px}
details.calm-more > summary{list-style:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-2);padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);display:flex;align-items:center;gap:8px}
details.calm-more > summary::-webkit-details-marker{display:none}
details.calm-more > summary::before{content:'';width:8px;height:8px;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:rotate(-45deg);margin-right:4px;transition:transform .15s}
details.calm-more[open] > summary::before{transform:rotate(45deg)}
details.calm-more[open] > summary{border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0}
details.calm-more > :not(summary){margin-top:12px}
/* ── Stage 4/5: Sales, Money, Team tidy ──────────────────────────────────── */
.stat-card,.stat-card.green,.stat-card.red,.stat-card.amber,.stat-card.blue,.stat-card.purple{border-color:var(--border);border-radius:var(--r-lg);box-shadow:none}
.stat-val{font-family:var(--font-ui);font-size:22px;font-weight:700;color:var(--text)}
.stat-label{font-size:12px;letter-spacing:0;text-transform:none;color:var(--text-2);margin-top:4px}
.k-pipe-head .k-pipe-label{font-family:var(--font-ui);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none}
.crm-source-badge{background:var(--bg-subtle);color:var(--text-2);border-color:var(--border)}

/* ══════════════════════════════════════════════════════════════════════════
   PHONE / APP PERFORMANCE — 24 Sep 2026

   The iPhone app was "extremely slow and non-responsive". The cause was not
   the amount of data: it was two blurred glass layers pinned over the
   scrolling page.

   .topbar is position:sticky at the top and .mobile-tab-bar is position:fixed
   at the bottom, and BOTH carried backdrop-filter. A backdrop-filter on a
   pinned layer makes WKWebView re-sample and re-blur everything behind it on
   every single scroll frame. On a 1.2MB document that is far more work than
   the phone can do in 16ms, so scrolling stutters and taps queue up behind
   the compositor — which reads exactly as "the app has frozen".

   Both bars are opaque on phones instead. The blur was never visible anyway:
   it only showed through at 88-92% opacity.

   To get the glass back on the phone, delete this block.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .topbar,
  :root[data-theme] .topbar,
  .mobile-tab-bar,
  :root[data-theme] .mobile-tab-bar,
  .modal-overlay,
  .k-palette-backdrop{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  .topbar,
  :root[data-theme] .topbar{ background:var(--surface) !important; }
  .mobile-tab-bar,
  :root[data-theme] .mobile-tab-bar{ background:var(--surface) !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RETAIL INSIGHT CARD — 24 Sep 2026
   Built to read like AutoTrader's own "Autotrader insight" panel, because that
   is the shape Lijth already reads every day. The slots that need Current
   Valuations and Vehicle Metrics are drawn in their real positions and marked
   as not yet switched on, rather than hidden — so the card fills itself the
   day AutoTrader add those capabilities to the integration, with no work here.
   ══════════════════════════════════════════════════════════════════════════ */
.ri-vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-bottom:4px}
.ri-val .ri-k{font-size:11px;color:var(--text-3);font-weight:600;margin-bottom:3px}
.ri-val .ri-v{font-size:22px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.15}
.ri-val.is-locked .ri-v{color:var(--text-3);font-weight:600;font-size:15px}
.ri-val .ri-sub{font-size:11px;color:var(--text-3);margin-top:2px}

.ri-rating{border:1px solid var(--border);border-radius:var(--r-md,10px);padding:13px 14px;margin-top:14px;background:var(--surface-raised,var(--surface))}
.ri-rating-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.ri-score{font-size:18px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.ri-score span{font-size:12px;font-weight:500;color:var(--text-3);margin-left:3px}
.ri-bar{display:flex;gap:4px}
.ri-seg{height:9px;flex:1;border-radius:3px;background:var(--neutral-soft,#e6e6ea)}
.ri-seg.on{background:var(--accent)}
.ri-seg.part{background:linear-gradient(to right,var(--accent) var(--fill,50%),var(--neutral-soft,#e6e6ea) var(--fill,50%))}

.ri-rows{margin-top:11px;border-top:1px solid var(--border)}
.ri-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:12px}
.ri-row:last-child{border-bottom:none}
.ri-row .ri-k{color:var(--text-2)}
.ri-row b{color:var(--text);font-variant-numeric:tabular-nums}
.ri-cond{flex:1;max-width:190px;height:6px;border-radius:3px;background:var(--neutral-soft,#e6e6ea);position:relative}
.ri-cond i{position:absolute;top:-4px;width:2px;height:14px;background:var(--text);border-radius:1px}
.ri-note{font-size:11px;color:var(--text-3);margin-top:11px;line-height:1.55}
@media(max-width:768px){ .ri-val .ri-v{font-size:18px} }

/* ══════════════════════════════════════════════════════════════════════════
   NEEDS A PERSON — readability, 25 Sep 2026
   The list is the first thing anyone sees, and on a phone it was losing the
   information it exists to give: one line of nowrap text next to a button of
   whatever width its label happened to be, so rows read "Kia S…" and
   "Audi A3 · 22/09/2…". A truncated registration or a truncated date is worse
   than no second line at all.
   ══════════════════════════════════════════════════════════════════════════ */
.needs-who{
  white-space:normal;                 /* was nowrap — it cut mid-word */
  display:-webkit-box;
  -webkit-line-clamp:2;               /* two lines, then ellipsis on a word */
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.45;
}
/* One width for every action, so the text column is the same size on every row
   and the right edge lines up instead of stepping in and out. */
/* One width for every action, so the text column is the same size on every
   row and the right edge lines up instead of stepping in and out. Capped
   as well as floored: one long label used to eat half the row. */
.needs-act .btn{min-width:92px;max-width:118px;justify-content:center;white-space:nowrap}
@media(max-width:768px){
  .needs-row{gap:10px;padding:12px 14px}
  .needs-act .btn{min-width:82px;max-width:104px;padding-left:10px;padding-right:10px}
  .needs-what{font-size:13px}
  .needs-who{font-size:12px}
}

/* ══════════════════════════════════════════════════════════════════════════
   TOUCH TARGETS — 25 Sep 2026
   --------------------------------------------------------------------------
   On a phone the small buttons measure 34px high and the avatar 31px, against
   a 44px minimum. The answer is NOT to make them look bigger: this is a dense
   trade screen and a 44px "Invoice" button would push the row it belongs to
   off the card. The answer is to separate the target from the drawing, which
   is what ::after is for.

   Vertical only, deliberately. Expanding sideways would push each button's
   target across the 6–10px gap into its neighbour's, and someone aiming at the
   left edge of "Mark registered" would fire "Invoice" instead. A miss is
   annoying; the wrong button is a phone call to a customer. There is almost
   always empty space above and below a row, and almost never beside a button.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:768px) and (pointer:coarse){
  .btn-sm,.btn-xs,.filter-pill,.hub-tab,.cal-view-btn{position:relative}
  .btn-sm::after,.btn-xs::after,.filter-pill::after,.hub-tab::after,.cal-view-btn::after{
    content:"";position:absolute;left:0;right:0;top:50%;height:44px;
    transform:translateY(-50%);z-index:0;
  }
  /* The label has to stay above its own hit area or the text stops being the
     thing you are pressing — and on Safari a z-index:0 overlay over a child
     with no stacking context swallows the tap. */
  .btn-sm > *,.btn-xs > *,.filter-pill > *,.hub-tab > *,.cal-view-btn > *{position:relative;z-index:1}

  /* These two sit alone in the top bar with room on every side, so they get a
     real square target rather than a strip. */
  .tb-icon-btn,.tb-avatar{position:relative}
  .tb-icon-btn::after,.tb-avatar::after{
    content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
    transform:translate(-50%,-50%);z-index:0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   A CAR WITH NO PHOTO — 25 Sep 2026
   --------------------------------------------------------------------------
   Was a bare grey rectangle, and not on purpose: the placeholder's icon was
   written with &quot; instead of " inside a JS string, so the parser read the
   quote as part of the value and the <i> came out as class='"ti' with a junk
   attribute trailing it. No icon ever drew, in either place it was used.

   Now one class for both, sized by the caller, so the thumbnail column is the
   same width whether or not the car has been photographed. A stock list that
   steps in and out as you scroll is the clearest possible tell that nobody
   looked at the screen.
   ══════════════════════════════════════════════════════════════════════════ */
.sr-noimg{
  border-radius:6px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  color:var(--text-3);
}
.sr-noimg .ti{font-size:18px;opacity:.55}

/* ══════════════════════════════════════════════════════════════════════════
   "THERE IS NOTHING HERE" — 25 Sep 2026
   --------------------------------------------------------------------------
   There were forty-one of these, each written where it was needed with its own
   padding, size and alignment: 8px here, 14px there, 30px somewhere else, in
   11px or 12px, centred or not. Emptiness is the state a new dealership sees
   most, so it is the worst possible place for the app to look assembled by
   different people.

   Two shapes, and they are chosen by where the message sits, not by how
   important it feels:
     .k-empty-panel  a whole card or column has nothing in it
     .k-empty-line   a quiet line inside something small — a dropdown, a field,
                     a sub-section that is part of a bigger populated card
   The richer .k-empty (icon, heading, action) stays for the handful of places
   worth explaining rather than just stating.
   ══════════════════════════════════════════════════════════════════════════ */
.k-empty-panel{
  padding:28px 16px;text-align:center;
  color:var(--text-3);font-size:var(--fs-md);line-height:1.55;
}
.k-empty-line{
  padding:8px 0;color:var(--text-3);font-size:var(--fs-sm);line-height:1.5;
}
/* Inside a padded container the line should not add a second gutter. */
.k-pad .k-empty-line,.card .k-empty-line{padding-left:0;padding-right:0}

/* ══════════════════════════════════════════════════════════════════════════
   GREEN AND RED ON A BLACK PAGE — 25 Sep 2026
   --------------------------------------------------------------------------
   The calm layer flattened every other colour to grey, which leaves these two
   carrying all the meaning in the app: green is "done", red is "a real
   problem". Its values were picked against a white card (#1f6b34 and #c0392b)
   and applied to `:root[data-theme]` — every theme, including both dark ones,
   where a deep forest green on near-black is barely a colour at all.

   Lighter for dark, same hue. Measured on the dark card (#12151a): green
   6.0:1, red 5.2:1, both above the 4.5:1 a 12px badge needs.

   This sits at the very end of the file on purpose. The calm layer redefines
   these in a :root block a thousand lines up, and a rule that loses to it is
   worse than no rule at all — it looks fixed and is not.
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-theme^="black"]{
  --ok:#57b877;      --ok-soft:rgba(87,184,119,0.14);
  --danger:#ef6f62;  --danger-soft:rgba(239,111,98,0.14);
}

/* ══════════════════════════════════════════════════════════════════════════
   THE HARD-CODED COLOURS THE CALM LAYER MISSED — 25 Sep 2026
   --------------------------------------------------------------------------
   The sweep above retunes inline colours by matching on the exact value, which
   works until someone writes a value that is not on the list. These are the
   ones that were not: plain CSS greys (#888, #666, #111), near-white panel
   backgrounds (#fafafa, #f9f9f9), and the green "done" button (#50b478).

   A fixed hex is a light-mode assumption wearing a disguise. #fafafa is a
   white card on a black page; #111 is black text on a black page. They look
   fine in the only theme the author had open.

   Matching on [style*=...] rather than editing 2,300 inline styles is the same
   bargain the block above struck: one place to read, one place to undo, and no
   risk of a find-and-replace catching a substring it should not. When an
   inline style is rewritten in the source, delete its line here.
   ══════════════════════════════════════════════════════════════════════════ */

/* Ink on the one green and the one red. Light mode puts white on a deep
   colour; dark mode puts dark on a bright one. */
:root, :root[data-theme]{ --ok-fg:#ffffff; --danger-fg:#ffffff; }
:root[data-theme^="black"]{ --ok-fg:var(--gray-950); --danger-fg:var(--gray-950); }

/* Body and secondary text */
[style*="color:#111"],[style*="color:#0d1f12"],[style*="color:#1a1a1a"]{color:var(--text)!important}
[style*="color:#444"],[style*="color:#555"],[style*="color:#666"]{color:var(--text-2)!important}
[style*="color:#777"],[style*="color:#888"],[style*="color:#999"],[style*="color:#aaa"],[style*="color:#ccc"]{color:var(--text-3)!important}

/* Panels that assumed a white page */
[style*="background:#fafafa"],[style*="background:#f9f9f9"],[style*="background:#f8f8f8"],
[style*="background:#f0f5f1"],[style*="background:#e8e8e8"],[style*="background:#eee"],
[style*="background:#fffdf0"]{background:var(--bg-subtle)!important;border-color:var(--border)!important}

/* The green "done" button: white on #50b478 measures 2.58:1 in every theme,
   which is the worst number in the app and sits on the button that confirms
   a customer has paid. */
[style*="background:#50b478"]{background:var(--ok)!important;color:var(--ok-fg)!important;border-color:transparent!important}
[style*="background:#c05050"],[style*="background:#c03030"]{background:var(--danger)!important;color:var(--danger-fg)!important;border-color:transparent!important}

/* A UK number plate is black on yellow in every theme, which is the one place
   in this app where a fixed colour is the correct answer — so it has to be
   pulled back out of the sweep above. Without this the plate keeps its yellow
   and loses its black, and the registration reads at 1.26:1 on the dark
   themes. */
.plate[style*="color:#111"],.tbl-reg[style*="color:#111"]{color:#111!important}

/* The stragglers the two lists above still missed. Kept as their own block so
   it is obvious these are additions and not part of the original sweep. */
[style*="color:#c2410c"],[style*="color:#ea580c"],[style*="color:#b45309"]{color:var(--text-2)!important}
[style*="color:#14170f"],[style*="color:#3f463c"]{color:var(--text)!important}
[style*="color:#6d7468"],[style*="color:#8d948a"],[style*="color:#c8dfd0"]{color:var(--text-2)!important}
/* The department tint (DEPT_COLORS + an alpha pair) and the last two greens. */
[style*="color:#6b7280"],[style*="color:#a06010"]{color:var(--text-2)!important}
[style*="background:#6b728022"],[style*="background:#6b728018"],[style*="background:#6b728044"]{background:var(--bg-subtle)!important;border-color:var(--border)!important}
[style*="color:#2e8b57"],[style*="color:#2f8b57"]{color:var(--ok)!important}

/* ══════════════════════════════════════════════════════════════════════════
   A BUTTON THAT IS WORKING — 25 Sep 2026
   --------------------------------------------------------------------------
   Paired with the in-flight guard in index.html. The old approach swapped the
   button's innerHTML for a spinner and a "Saving…" label, which loses the icon,
   changes the button's width mid-press, and leaves the label wrong if the
   handler navigates away before it can be put back.

   This keeps the label exactly where it was, fades it, and lays a spinner over
   the middle. The button cannot be pressed again — that is the guard's job,
   not this layer's — so this only has to say "it heard you".
   ══════════════════════════════════════════════════════════════════════════ */
.btn.is-busy{position:relative;cursor:progress}
.btn.is-busy > *{opacity:.25}
.btn.is-busy{color:transparent!important}
.btn.is-busy::after{
  content:"";position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  /* currentColor is transparent above, so the ring needs its own colour. On a
     primary button that is the ink the label was using. */
  border-color:var(--accent-fg) transparent var(--accent-fg) var(--accent-fg);
  animation:spin .6s linear infinite;
}
.btn-ghost.is-busy::after,.btn-sm.btn-ghost.is-busy::after,.btn-danger.is-busy::after{
  border-color:var(--text-2) transparent var(--text-2) var(--text-2);
}
@media (prefers-reduced-motion:reduce){
  .btn.is-busy::after{animation-duration:1.6s}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE PANEL A FAILED PAGE SHOWS — 25 Sep 2026
   --------------------------------------------------------------------------
   Deliberately not red. Red in this app means "a car has a real problem" and
   spending it on "the screen didn't draw" devalues it everywhere else. This is
   an apology and a button, so it is quiet, and it sits above whatever did
   manage to render rather than replacing it.
   ══════════════════════════════════════════════════════════════════════════ */
.page-error{
  border:1px solid var(--border-strong);border-radius:var(--r-lg);
  background:var(--bg-subtle);padding:16px 18px;margin-bottom:16px;
}
.page-error-head{display:flex;align-items:center;gap:8px;color:var(--text);
  font-size:var(--fs-lg);font-weight:600}
.page-error-head .ti{font-size:18px;color:var(--warn)}
.page-error-body{color:var(--text-2);font-size:var(--fs-base);margin-top:6px;line-height:1.5}
.page-error-detail{
  margin-top:10px;padding:8px 10px;border-radius:var(--r-xs);
  background:var(--surface);border:1px solid var(--border);
  color:var(--text-3);font-family:'SF Mono',Menlo,monospace;font-size:var(--fs-sm);
  word-break:break-word;
}
.page-error-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* ══════════════════════════════════════════════════════════════════════════
   THE WAY IN — 25 Sep 2026
   --------------------------------------------------------------------------
   The sign-in screen never got the calm-layer pass the rest of the app got, so
   it was still the only place left with small capitals and 0.1em tracking on
   its buttons and 0.3em on its strapline. It is the first screen a new
   dealership sees and the one every member of staff sees a dozen times a day,
   and it did not look like it belonged to the same product as the page behind
   it.

   Same type as everywhere else, a card with the same radius and border as the
   cards inside, and a primary button that is the primary button. The wordmark
   keeps its tracking: that is a logo, not a label.
   ══════════════════════════════════════════════════════════════════════════ */
.pin-card{
  width:330px;padding:28px;border-radius:var(--r-xl);
  border:1px solid var(--border);background:var(--surface);box-shadow:var(--sh-2);
}
.pin-btn{
  font-family:var(--font-ui);font-size:var(--fs-base);font-weight:600;
  letter-spacing:0;text-transform:none;
  border-radius:var(--r-sm);padding:12px 14px;min-height:42px;margin-top:6px;
}
.pin-btn-primary{background:var(--accent);color:var(--accent-fg)}
.pin-btn-primary:hover{background:var(--accent-strong);opacity:1}
.pin-btn-ghost{background:var(--surface);border:1px solid var(--border-strong);color:var(--text-2)}
.pin-btn-ghost:hover{border-color:var(--text-3);color:var(--text)}
.pin-input{
  font-size:var(--fs-base);border-radius:var(--r-sm);border-color:var(--border-strong);
  padding:11px 12px;
}
.pin-input::placeholder{color:var(--text-3)}
/* The dealership code is typed in capitals because that is what it is; the
   rest of the form is not shouting. */
.pin-code{letter-spacing:.12em}
.pin-sub{
  font-size:var(--fs-md);letter-spacing:0;text-transform:none;
  color:var(--text-3);margin-bottom:30px;
}
.pin-help{font-size:var(--fs-md);color:var(--text-2)}
@media(max-width:768px){ .pin-card{width:min(92vw,340px);padding:22px} }

/* ══════════════════════════════════════════════════════════════════════════
   DELIVERIES — 25 Sep 2026
   --------------------------------------------------------------------------
   The Deliver button on a sold car, the panel it opens, and the "which map?"
   sheet. Sized for a thumb: this is the one screen in the app that gets used
   standing next to a car holding a set of keys.
   ══════════════════════════════════════════════════════════════════════════ */

/* The row of actions under a sold car. Wraps rather than squeezing, because on
   a phone three buttons on one line means three buttons nobody can hit. */
.sold-prep-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sold-prep-acts .btn{flex:0 1 auto}

/* Who and what, at the top of the panel, so the address below has something to
   belong to. */
.dlv-car{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 12px;margin-bottom:14px;
  background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--r-md);
}
.dlv-car-name{font-size:var(--fs-lg);font-weight:600;color:var(--text)}
.dlv-car-who{font-size:var(--fs-md);color:var(--text-2);width:100%}

.dlv-results{
  margin-top:6px;max-height:210px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
}
.dlv-result{
  padding:10px 12px;font-size:var(--fs-md);color:var(--text-2);cursor:pointer;
  border-bottom:1px solid var(--border);line-height:1.4;
}
.dlv-result:last-child{border-bottom:0}
.dlv-result:hover,.dlv-result:focus{background:var(--bg-subtle);color:var(--text)}

/* Three buttons in the footer, and on a phone the Cancel is the one that can
   afford to be small. */
.dlv-foot{display:flex;gap:8px;flex-wrap:wrap}
.dlv-foot .btn{flex:1 1 auto;min-width:120px;justify-content:center}
@media(max-width:480px){
  .dlv-foot .btn:first-child{flex:0 0 auto;min-width:0}
}

/* ── Which map? ─────────────────────────────────────────────────────────── */
.navpick-addr{
  font-size:var(--fs-base);color:var(--text-2);line-height:1.5;
  padding:10px 12px;margin-bottom:12px;
  background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--r-md);
}
.navpick-apps{display:flex;flex-direction:column;gap:8px}
.navpick-app{
  display:flex;align-items:center;gap:12px;
  padding:14px 14px;min-height:52px;          /* a driving-gloves target */
  border:1px solid var(--border-strong);border-radius:var(--r-md);
  background:var(--surface);color:var(--text);
  font-size:var(--fs-lg);font-weight:600;text-decoration:none;
  transition:background var(--dur-fast) var(--ease-std),border-color var(--dur-fast) var(--ease-std);
}
.navpick-app:hover{background:var(--bg-subtle);border-color:var(--text-3)}
.navpick-app > .ti:first-child{font-size:18px;color:var(--accent)}
.navpick-go{margin-left:auto;font-size:15px;color:var(--text-3)}
.navpick-copy{width:100%;margin-top:12px;justify-content:center}

/* The delivery address, where a day actually gets planned. Two sizes: the
   roomy one in the event popup, the tight one in the side panel's rows. */
.cal-dlv-addr{
  display:flex;align-items:flex-start;gap:6px;
  font-size:var(--fs-md);color:var(--text-2);line-height:1.45;
  background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:8px 10px;margin:8px 0;
}
.cal-dlv-addr .ti{font-size:13px;color:var(--accent);margin-top:2px;flex-shrink:0}
.cal-dpanel-addr{
  display:flex;align-items:flex-start;gap:5px;
  font-size:var(--fs-sm);color:var(--text-2);line-height:1.4;margin-top:3px;
}
.cal-dpanel-addr .ti{font-size:12px;color:var(--accent);margin-top:1px;flex-shrink:0}

/* ══════════════════════════════════════════════════════════════════════════
   THE CALENDAR'S OWN COLOURS — 25 Sep 2026
   --------------------------------------------------------------------------
   CAL_COLORS is a JS constant that builds inline styles: a 3px bar down the
   side of a row gets the full colour, and the type chip in the event popup
   gets `background:<col>22; color:<col>` — the colour at 13% with the same
   colour as text on it. That measures 2.95:1 for Delivery (#c87800) in light
   mode and 4.29:1 in dark, against the 4.5:1 a 12px chip needs. None of the
   five were in the sweep above, which only ever listed the hexes that existed
   when it was written.

   The BAR keeps its colour — it is a 3px block, not text, and it is the thing
   that tells a viewing from a delivery at a glance. Only the chip's text and
   tint are brought back to the calm layer's grey, which is what every other
   badge in the app already does.
   ══════════════════════════════════════════════════════════════════════════ */
[style*="color:#4a7fc1"],[style*="color:#2e9e6e"],[style*="color:#c87800"],
[style*="color:#7b5ea7"],[style*="color:#22c55e"]{color:var(--text-2)!important}
[style*="background:#4a7fc122"],[style*="background:#2e9e6e22"],[style*="background:#c8780022"],
[style*="background:#7b5ea722"],[style*="background:#22c55e22"]{
  background:var(--bg-subtle)!important;border-color:var(--border)!important;
}
/* The bar is set with `background:<col>` and nothing else, so it is untouched
   by the rules above — they only match the 22-suffixed tints. */

/* ── Settings tabs ──────────────────────────────────────────────────────────
 * The Settings strip borrows .hub-tab pills so it matches the rest of the app,
 * but .hub-tabs is written for the TOPBAR: on a phone it takes order:10 and
 * negative margins so it drops below the page title. Inside the settings
 * column that pushed the strip to the very bottom of the page, under every
 * card. Two classes so this wins wherever the topbar rules move to.
 */
.hub-tabs.set-tabs{order:-1;flex-basis:auto;margin:0 0 4px;padding:0;overflow-x:auto}
.hub-tabs.set-tabs::after{content:none}
/* The brief's closing line. It is the one bit of the dashboard that talks to
   you like a person, so it gets to breathe rather than being another row. */
.as-signoff{margin-top:12px;font-size:var(--fs-base);color:var(--text-2);font-style:italic}
/* AutoTrader require a link to their explainer wherever a price indicator
   label is shown. It has to be visible and clickable, not a footnote. */
.ri-explain{color:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;opacity:.85}
.ri-explain:hover{opacity:1}


/* ═══════════════════════════════════════════════════════════════════════════
   THE COLOUR RULE
   ═══════════════════════════════════════════════════════════════════════════

   Before this block the dashboard used four greens, three ambers and two reds,
   all hard-coded, and green meant six different things at once: the brand, the
   primary button, a secondary button, success, money, and the selected nav
   item. A colour that means everything points at nothing, which is why a page
   with very little on it still felt crowded — the eye had no way to rank it.

   From here there are SIX tones and each one has exactly ONE meaning. If a new
   state does not fit one of these, it is not a new colour, it is one of these
   six. Adding a seventh tone is how we got here.

     GREEN   settled. Done, paid, ready, in profit. Nothing is needed.
     AMBER   needs a person this week. Due, waiting on someone, expiring.
     RED     needs a person today. Overdue, failed, blocking, losing money.
     PURPLE  not our money. SOR, investor cars, finance-owned stock.
     BLUE    fact from elsewhere. AutoTrader, the website, the system talking.
     GREY    inactive. Zero, archived, not applicable, switched off.

   Two rules that matter more than the list:

   1. The brand green (--accent) is for navigation chrome and for exactly ONE
      primary action per screen. It is NOT a status. A "Deliver" button must
      never be green — if two green buttons sit together neither one reads as
      the thing to press.

   2. Zero is grey, never green. "0 SOR cars" is not good news, it is no news,
      and drawing it in green makes an empty number compete with a real one.

   Each tone below provides four tokens, so a tone is applied as a set and
   never as a stray hex:
       --t-fg       text and icons on a plain surface (passes 4.5:1)
       --t-bg       the soft fill behind a pill or row
       --t-br       the border of that pill, or a left edge bar
       --t-solid    a filled badge, with --t-on for its text
   ═══════════════════════════════════════════════════════════════════════════ */

/* Stage 7 (CALM, 16 Sep) flattened --warn, --info and --purple to grey on
   purpose, because colour had stopped meaning anything. That stays exactly as
   it is: every badge in the 2,000 inline styles keeps its quiet grey. The six
   tones below use their OWN tokens instead, so a colour appears only where
   someone has deliberately asked for one. Calm by default, colour on purpose. */
:root, :root[data-theme]{
  --tone-amber:#8a5a00;  --tone-amber-soft:rgba(138,90,0,0.12);
  --tone-purple:#6a1a8a; --tone-purple-soft:rgba(106,26,138,0.10);
  --tone-blue:#1a4a8a;   --tone-blue-soft:rgba(26,74,138,0.10);
}
/* Both dark themes need the light end of each ramp. Stage 7 was shipped with
   fixed light greys here and drew invisible badges for nine days; these are
   declared per theme so that cannot happen again. */
:root[data-theme^="black"]{
  --tone-amber:#d99a3c;  --tone-amber-soft:rgba(217,154,60,0.15);
  --tone-purple:#b388e0; --tone-purple-soft:rgba(179,136,224,0.15);
  /* --blue-400 (#5a8fd8) measured 4.26:1 on a dark calendar chip — under the
     4.5 a 12px label needs. Two steps lighter clears it and is not a visible
     change. Measured, not guessed. */
  --tone-blue:#7ba6e8;   --tone-blue-soft:rgba(123,166,232,0.15);
}

.tone-ok      { --t-fg:var(--ok);           --t-bg:var(--ok-soft);           --t-br:color-mix(in srgb,var(--ok) 32%,transparent);           --t-solid:var(--ok);           --t-on:#fff; }
.tone-warn    { --t-fg:var(--tone-amber);   --t-bg:var(--tone-amber-soft);   --t-br:color-mix(in srgb,var(--tone-amber) 32%,transparent);   --t-solid:var(--tone-amber);   --t-on:#fff; }
.tone-danger  { --t-fg:var(--danger);       --t-bg:var(--danger-soft);       --t-br:color-mix(in srgb,var(--danger) 32%,transparent);       --t-solid:var(--danger);       --t-on:#fff; }
.tone-own     { --t-fg:var(--tone-purple);  --t-bg:var(--tone-purple-soft);  --t-br:color-mix(in srgb,var(--tone-purple) 32%,transparent);  --t-solid:var(--tone-purple);  --t-on:#fff; }
.tone-info    { --t-fg:var(--tone-blue);    --t-bg:var(--tone-blue-soft);    --t-br:color-mix(in srgb,var(--tone-blue) 32%,transparent);    --t-solid:var(--tone-blue);    --t-on:#fff; }
.tone-off     { --t-fg:var(--text-3);       --t-bg:var(--bg-subtle);         --t-br:var(--border);                                          --t-solid:var(--text-3);       --t-on:#fff; }

/* color-mix is in every browser the dashboard supports, but the phone app's
   webview is the one place a surprise costs a sale, so the border falls back
   to the ordinary border colour if it is ever unsupported. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .tone-ok,.tone-warn,.tone-danger,.tone-own,.tone-info,.tone-off { --t-br:var(--border); }
}

/* ── Wearing a tone ──────────────────────────────────────────────────────── */

.pill{                                   /* the default badge: soft, readable  */
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:600; line-height:1.5;
  color:var(--t-fg); background:var(--t-bg); border:1px solid var(--t-br);
  white-space:nowrap;
}
.pill-solid{ color:var(--t-on); background:var(--t-solid); border-color:transparent }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--t-solid); flex:none }
.tone-text{ color:var(--t-fg) }

/* A left edge bar is how a row says "this one" without shouting. Four pixels
   of colour reads faster than a badge and costs no horizontal space — which
   is the whole argument on a phone. */
.edge{ position:relative; padding-left:calc(var(--sp-4) + 4px) }
.edge::before{
  content:''; position:absolute; left:0; top:6px; bottom:6px; width:4px;
  border-radius:0 2px 2px 0; background:var(--t-solid);
}

/* ── The key ─────────────────────────────────────────────────────────────── */
/* People cannot learn a colour system they are never shown. This renders the
   six meanings as the actual swatches, so the legend can never drift from the
   code — both read the same tokens. */
.ckey{ display:grid; gap:var(--sp-3) }
.ckey-row{ display:flex; align-items:baseline; gap:var(--sp-3) }
.ckey-row .pill{ flex:none; min-width:84px; justify-content:center }
.ckey-what{ font-size:var(--fs-sm); color:var(--text-2) }


/* ═══════════════════════════════════════════════════════════════════════════
   SECTIONS — the grouped list
   ═══════════════════════════════════════════════════════════════════════════
   The iOS settings pattern, because it solves exactly the problem we have: a
   quiet label outside the card tells you what the group is, the card holds the
   rows, and a hairline between rows does the separating so nothing needs a
   border, a shadow or a heading of its own. Related things look related; the
   page stops being a pile of cards.
   ═══════════════════════════════════════════════════════════════════════════ */

.sec{ margin:0 0 var(--sp-6) }
.sec-label{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:0 var(--sp-4) var(--sp-2);
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-3);
}
.sec-box{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-card); overflow:hidden;
}
.sec-row{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4); position:relative }
/* ── Quick actions ─────────────────────────────────────────────────────────
   The row at the top of Home, and the picker in Settings. Deliberately quiet:
   these sit above "Needs a person", which is the part that is allowed to shout.
   Scrolls sideways on a phone rather than wrapping into a second row that
   pushes the real work off the screen. */
.qa-row{
  display:flex; gap:var(--sp-2); margin:0 0 var(--sp-4);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.qa-row::-webkit-scrollbar{ display:none }
.qa-btn{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:var(--r-pill, 999px);
  background:var(--surface); border:1px solid var(--border);
  color:var(--text); font-size:var(--fs-sm); font-weight:500;
  cursor:pointer; white-space:nowrap;
  /* 40px is the smallest a thumb reliably hits on a phone. */
  min-height:40px;
}
.qa-btn:hover{ background:var(--bg-subtle) }
.qa-btn i{ font-size:var(--fs-lg); color:var(--text-2) }

.qa-pick{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 12px; margin:0; background:none; border:0;
  border-top:1px solid var(--border); color:var(--text);
  font-size:var(--fs-sm); text-align:left; cursor:pointer;
}
.qa-pick:first-child{ border-top:0 }
.qa-pick span{ flex:1 }
.qa-pick i{ font-size:var(--fs-lg); color:var(--text-3) }
.qa-pick.on i{ color:var(--accent) }
.qa-pick-mark{ margin-left:auto }
.set-quick-note{ font-size:var(--fs-xs); color:var(--text-3); padding:10px 2px 0; line-height:1.5 }


/* The hairline is inset from the left, like iOS, so it reads as "these rows
   belong to each other" rather than "here are some separate strips". It is
   drawn on the row rather than as a border so the last row needs no override
   and a row can be hidden without leaving a stray line behind. */
.sec-row + .sec-row::after{
  content:''; position:absolute; left:var(--sp-4); right:0; top:0; height:1px;
  background:var(--border);
}
.sec-row.edge + .sec-row.edge::after{ left:calc(var(--sp-4) + 4px) }
.sec-row:hover{ background:var(--surface-sunken) }
.sec-row-main{ min-width:0; flex:1 }
.sec-row-title{ font-size:var(--fs-base); color:var(--text); font-weight:500 }
.sec-row-sub{ font-size:var(--fs-sm); color:var(--text-3); margin-top:2px }
.sec-row-end{ flex:none; display:flex; align-items:center; gap:var(--sp-2); color:var(--text-3) }
.sec-foot{ padding:var(--sp-2) var(--sp-4) 0; font-size:var(--fs-sm); color:var(--text-3) }

/* ── Concentric corners ──────────────────────────────────────────────────── */
/* Apple's rule, and the reason nested boxes look subtly wrong everywhere else:
   an inner radius must be the outer radius MINUS the gap between them, so both
   curves share a centre. Hard-code them separately and the inner corner is
   always too round or too tight. Use --r-in inside a .sec-box or .card. */
:root{
  --r-card:var(--r-lg);                              /* 14 — the outer box    */
  --r-in:calc(var(--r-card) - var(--sp-2));          /* 6  — inset by 8       */
  --r-in-tight:calc(var(--r-card) - var(--sp-1));    /* 10 — inset by 4       */
}
.sec-box .card, .sec-box .pill-box, .card .inner-box{ border-radius:var(--r-in) }


/* ═══════════════════════════════════════════════════════════════════════════
   CALENDAR TONES  (3 Oct 2026)
   ═══════════════════════════════════════════════════════════════════════════
   There were FOUR sets of calendar colours: base.css, ui.css, a third .ev-*
   block and the CAL_COLORS object in the page. A chip and the bar next to it
   were drawn from different ones, so they did not match — and because the
   ui.css set was built on --info / --warn / --purple, Stage 7 flattened it to
   grey and viewings, deliveries and tasks all came out identical.

   One set now. The kind sets the tone variables; chips, bars and pills all
   read the same four variables, so a thing can never be two colours again.

     viewing     blue    someone is coming to us
     collection  green   settled — the money is in
     delivery    amber   work still to do
     sale        green   done
     task        grey    until it needs you (below)

   State beats kind, because a missed job matters more than its category:
     due today   amber   tasks only — a viewing today is not a problem
     missed      red     in the past and still not ticked
     done        muted   history, struck through

   The selectors carry two classes to match the blocks they replace, and sit at
   the end of the file so the cascade lands on these.
   ═══════════════════════════════════════════════════════════════════════════ */

.ev-viewing    { --t-fg:var(--tone-blue);   --t-bg:var(--tone-blue-soft);   --t-br:var(--tone-blue);   --t-solid:var(--tone-blue);   --t-on:#fff }
.ev-collection { --t-fg:var(--ok);          --t-bg:var(--ok-soft);          --t-br:var(--ok);          --t-solid:var(--ok);          --t-on:#fff }
.ev-delivery   { --t-fg:var(--tone-amber);  --t-bg:var(--tone-amber-soft);  --t-br:var(--tone-amber);  --t-solid:var(--tone-amber);  --t-on:#fff }
.ev-sale       { --t-fg:var(--ok);          --t-bg:var(--ok-soft);          --t-br:var(--ok);          --t-solid:var(--ok);          --t-on:#fff }
.ev-other      { --t-fg:var(--text-3);      --t-bg:var(--bg-subtle);        --t-br:var(--border);      --t-solid:var(--text-3);      --t-on:#fff }

/* State. Declared after kind, so it overrides at equal specificity. */
.cal-due       { --t-fg:var(--tone-amber);  --t-bg:var(--tone-amber-soft);  --t-br:var(--tone-amber);  --t-solid:var(--tone-amber) }
.cal-late      { --t-fg:var(--danger);      --t-bg:var(--danger-soft);      --t-br:var(--danger);      --t-solid:var(--danger) }
.cal-done      { --t-fg:var(--text-3);      --t-bg:var(--bg-subtle);        --t-br:var(--border);      --t-solid:var(--border-strong) }

/* The paint. [class*="ev-"] is two-class specificity, the same as the
   .cal-chip.ev-viewing rules above it, so being last is what decides it. */
.cal-chip[class*="ev-"], .cal-week-chip[class*="ev-"]{
  background:var(--t-bg); color:var(--t-fg);
  border-left:3px solid var(--t-solid);
  border-radius:var(--r-xs);
}
/* Opacity only — NO strikethrough. Jobs #805/#811/#816 deliberately replaced
   the line-through with a fade (he asked for it twice), and the fade pairs with
   the hiding rather than competing: it dims, then it goes. Putting the
   strikethrough back here would quietly undo an approved fix. */
.cal-chip.cal-done, .cal-week-chip.cal-done{ opacity:.4 }
.cal-chip.cal-late, .cal-week-chip.cal-late{ font-weight:600 }

.cal-dpanel-bar[class*="ev-"], .cal-day-bar[class*="ev-"]{ background:var(--t-solid) }
.pill.cal-kind{ font-size:10px; padding:1px 8px }
.cal-legend-item{ font-size:10px; color:var(--text-3); display:inline-flex; align-items:center; gap:5px }
.cal-legend-dot[class*="ev-"], .cal-legend-dot.cal-due, .cal-legend-dot.cal-late{ background:var(--t-solid) }
.cal-legend-sep{ width:1px; height:12px; background:var(--border); display:inline-block }


/* ── Stock: the folded filters ───────────────────────────────────────────── */
/* Hick's law. The search box and the five status pills are the filters people
   actually touch; make and model are occasional, so they fold. */
.stock-morefilters{ margin-bottom:10px }
.stock-morefilters > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-3); padding:6px 0;
}
.stock-morefilters > summary::-webkit-details-marker{ display:none }
.stock-morefilters > summary:hover{ color:var(--text-2) }
.stock-morefilters[open] > summary .note-fold-chev{ transform:rotate(90deg) }
.stock-morefilters .note-fold-chev{ transition:transform var(--dur-fast) var(--ease-std) }
/* An active filter is never a quiet grey label — it is the reason the list is
   short, so it says so in the accent colour. */
#stock-filter-summary.is-on{ color:var(--accent-text); text-transform:none; letter-spacing:0 }

/* Row badges sit on one line with the reg; the pill's own padding is enough,
   so the old per-badge margin-left hacks are gone. */
.sr-title .pill{ flex:none }


/* ═══════════════════════════════════════════════════════════════════════════
   STOCK ROW — rank it, don't cram it  (7 Oct 2026)
   ═══════════════════════════════════════════════════════════════════════════
   Six facts at one size in one middot run meant the eye had to READ the row to
   find the price. Nothing has been removed; the order of importance is now
   visible instead of implied. The asking price is what anyone scans a stock
   list for, so it is the one big number, right-aligned where the eye lands at
   the end of a row, with the buy price beneath it — the two relate, and that
   pairing is the margin at a glance.

   The old grid was `10px 82px 1fr auto auto` with the status pill in its own
   column. The pill has moved up beside the reg, where it belongs: it is a
   label about the car, like COMEBACK and SOR, not a separate axis. Its column
   is now the money.
   ═══════════════════════════════════════════════════════════════════════════ */

.stock-row{
  grid-template-columns:8px 72px 1fr auto auto;
  gap:16px;
  padding:16px 14px;          /* 13 → 16: the single cheapest way to look calmer */
  align-items:center;
}

.sr-title{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:4px; min-width:0;
}
.sr-title .tbl-make{ font-size:var(--fs-lg); font-weight:600; letter-spacing:-.01em; color:var(--text) }

/* Two short lines beating one long one: what the car IS, then what it OWES. */
.sr-meta{ font-size:var(--fs-sm); color:var(--text-3); line-height:1.5 }
.sr-meta-2{ margin-top:1px }

/* The number. 20px against a 13px label is the contrast that makes a list
   scannable — the old row had everything within 1px of everything else. */
.sr-money{ text-align:right; flex:none; min-width:84px }
.sr-ask{
  font-size:18px; font-weight:600; letter-spacing:-.015em;
  color:var(--text); line-height:1.15; font-variant-numeric:tabular-nums;
}
.sr-ask-sub{ font-size:var(--fs-xs); color:var(--text-3); margin-top:2px; font-variant-numeric:tabular-nums }

/* On a phone the row stacks, and a 20px price shouting beside a wrapped car
   name is worse than no hierarchy at all — so there it sits inline, quieter. */
/* The phone. base.css:1060 already lays this out with grid-template-AREAS and
   an !important, and it has no slot for a price — which is why two earlier
   attempts here lost: one let the price wrap under the THUMBNAIL (reading as a
   caption for the photo), the other gave the buttons a column and squeezed the
   text to ~87px, breaking "Volkswagen Polo" across two lines.

   So this uses areas too, rather than fighting them. Naming dot, thumb and
   actions on BOTH rows makes them span, which is what puts the price directly
   under the car's name instead of under its photo, and leaves the buttons
   centred down the right with nothing to collide with. */
@media (max-width:768px){
  .stock-row{
    grid-template-columns:10px 48px 1fr auto !important;
    grid-template-areas:
      "dot thumb info  actions"
      "dot thumb money actions" !important;
    gap:2px 10px !important;
    align-items:start !important;
    padding:14px 12px !important;
  }
  .stock-row > .status-dot{ grid-area:dot; margin-top:7px }
  .stock-row > .sr-thumb  { grid-area:thumb }
  .stock-row > .sr-info   { grid-area:info; min-width:0 }
  .stock-row > .sr-money  {
    grid-area:money; text-align:left;
    display:flex; align-items:baseline; gap:8px; margin-top:5px;
  }
  .stock-row > .sr-actions{ grid-area:actions; align-self:center }

  /* The name takes its own full line. Sharing a flex row with the plate is
     what broke it in half. */
  .sr-title .tbl-make{ flex:1 0 100%; font-size:var(--fs-base) }
  .sr-thumb img, .sr-thumb > div{ width:48px!important; height:40px!important }

  /* Two buttons took 94px of a 375px screen and left 113px for the text, which
     is what kept breaking the car's name in half. The website toggle already
     lives in the car file and in the ⋯ menu — ui.css says so a thousand lines
     up — so on a phone it goes, and the name gets the room back. */
  .stock-row .sr-actions .btn[title$="website"]{ display:none !important }
  .sr-ask{ font-size:18px }
  .sr-ask-sub{ margin-top:0 }

  /* Progressive disclosure, and the only way a phone list stays a list. With
     everything on a row was 311px — under three cars on an 812px screen, so
     finding a car meant scrolling past cars. The car's own page has all of it.
       · the status pill goes — the coloured dot already says it
       · MOT and tax go — detail you check on a car, not while scanning
       · AutoTrader goes — provenance, not something you act on
     What stays is what makes you stop scrolling: the car, the plate, anything
     wrong with it, and the price. */
  .stock-row .sr-meta-2{ display:none }
  .stock-row .sr-title .status-pill{ display:none }
  .stock-row .sr-title .pill.tone-info{ display:none }
}


/* ── Hick's law pass, 10 Oct 2026 ───────────────────────────────────────────
   Stock is one column. base.css splits it 1fr 1fr with the money widgets on
   the right, which halved the list and broke every car's name in two at
   laptop width. The widgets now sit in one fold under the list. */
.stock-split-grid{grid-template-columns:1fr}
.stock-money-fold{margin-top:4px}

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE 8 — ELEVATE (10 Oct 2026)
   The calm layer made it quiet. This makes it feel built: depth that is felt
   rather than seen, numbers that line up, one focus ring, a hello, and every
   number on Home saying which way it moved. Nothing here adds a colour or a
   size outside the system. Delete the block to revert.
   ═══════════════════════════════════════════════════════════════════════════ */
body{font-variant-numeric:tabular-nums}
.card,.needs,.ins-tile,.crm-card,.stat-card{box-shadow:0 1px 2px rgba(16,24,40,.04),0 14px 36px -28px rgba(16,24,40,.22)}
:root[data-theme="black"] .card,:root[data-theme="black"] .needs,:root[data-theme="black"] .ins-tile,:root[data-theme="black"] .crm-card,:root[data-theme="black"] .stat-card,
:root[data-theme="black-blue"] .card,:root[data-theme="black-blue"] .needs,:root[data-theme="black-blue"] .ins-tile,:root[data-theme="black-blue"] .crm-card,:root[data-theme="black-blue"] .stat-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 36px -28px rgba(0,0,0,.7)}
.btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(16,24,40,.14),0 8px 18px -10px var(--accent)}
.btn:active{transform:scale(.985)}
.btn:focus-visible,.hub-tab:focus-visible,.mob-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.modal{border-radius:16px;box-shadow:0 1px 2px rgba(16,24,40,.08),0 28px 72px -28px rgba(16,24,40,.4)}
@keyframes kPageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.stock-row:hover,.needs-row:hover,.set-row:hover,.tasks-done-item:hover{background:var(--bg-subtle)}
/* Home: hello */
.dash-greet{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:2px 0 14px;flex-wrap:wrap}
.dash-greet h2{font-family:var(--font-ui);font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0;color:var(--text)}
.dash-greet .muted{font-size:13px;color:var(--text-3)}
/* Home: which way each number moved */
.ins-delta{font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:3px;margin-top:3px}
.ins-delta .ti{font-size:11px;margin:0;color:inherit}
.ins-delta.up{color:var(--ok)}.ins-delta.down{color:var(--danger)}.ins-delta.flat{color:var(--text-3)}
/* Home: the urgent dot breathes, once every couple of seconds, so red means now */
.needs-row.red .needs-dot{animation:kPulse 2.6s ease-out infinite}
@keyframes kPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--danger) 45%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
/* Finance: the four numbers carry the weight */
.stat-card .stat-val{font-size:22px;font-weight:800;letter-spacing:-.02em}
/* Phone: a thumb needs 44px, and the brief is one line until you ask for it */
@media (max-width:768px){
  .hub-tab{min-height:44px}
  .btn-sm{min-height:42px}
  .btn-xs{min-height:36px}
  .as-needs-pill{min-height:36px;padding:8px 14px}
  .tb-avatar{width:36px;height:36px}
  .mob-tab{min-height:50px}
  #dash-brief .as-sec,#dash-brief .as-signoff{display:none}
  #dash-brief .as-headline{font-size:13px;margin-bottom:0}
  .dash-greet h2{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.needs-row.red .needs-dot{animation:none}.btn:active{transform:none}}


/* ═══════════════════════════════════════════════════════════════════════════
   STAGE 9 — APPLE (10 Oct 2026)
   Asked for by name: "an apple look design on the dash". iOS 17 / macOS Sonoma
   grammar on top of the system that is already here — the same eight sizes,
   the same six tones, the dealership's own green. What changes is the
   material: #F2F2F7 ground, white grouped cards with no border and no shadow,
   hairlines at 12% black, filled grey fields, a segmented control for the
   tabs, pill chips, 10px corners on controls and 14px on cards, SF on Apple
   devices (the font token already asks for -apple-system first). Dark is
   true black with #1C1C1E cards, as iOS does it. Delete the block to revert.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#F2F2F7; --bg-subtle:#E5E5EA; --surface:#FFFFFF; --surface-raised:#FFFFFF; --surface-sunken:#F2F2F7;
  --border:rgba(60,60,67,.12); --border-strong:rgba(60,60,67,.24);
  --text:#000000; --text-2:#48484A; --text-3:#6E6E73;
  --fill:rgba(120,120,128,.12); --fill-2:rgba(120,120,128,.18);
  --r-sm:10px; --r-md:12px; --r-lg:14px; --r-xl:16px; --r-2xl:20px;
}
:root[data-theme="black"],:root[data-theme="black-blue"]{
  --bg:#000000; --bg-subtle:#1C1C1E; --surface:#1C1C1E; --surface-raised:#2C2C2E; --surface-sunken:#000000;
  --border:rgba(84,84,88,.55); --border-strong:rgba(84,84,88,.9);
  --text:#FFFFFF; --text-2:#C7C7CC; --text-3:#98989D;
  --fill:rgba(120,120,128,.24); --fill-2:rgba(120,120,128,.32);
}
body{background:var(--bg)}
/* ground + grouped cards */
.main{background:var(--bg)}
.card,.needs,.ins-tile,.crm-card,.stat-card,.k-pipe-col,.staff-row,.sec-box{border:0;box-shadow:none;border-radius:var(--r-lg);background:var(--surface)}
.card-head{border-bottom:1px solid var(--border)}
.card-title{font-size:15px;font-weight:600;letter-spacing:-.01em}
.db-section-label,.needs-sub,.card-sub{color:var(--text-3)}
/* hairline rows, inset like a grouped list */
.stock-row,.needs-row,.set-row,.staff-row,.expense-row,.tbl tr>td{border-color:var(--border)}
/* the sidebar is a macOS source list */
.sidebar{background:var(--bg);border-right:1px solid var(--border)}
.hub-link{border-radius:8px;padding:7px 10px;font-size:13px;font-weight:500;color:var(--text)}
.hub-link.active{background:var(--fill);color:var(--text);font-weight:600}
.hub-link.active i{color:var(--accent)}
/* topbar: one hairline, no blur on the phone (it costs frames) */
.topbar{background:var(--bg);border-bottom:1px solid var(--border);box-shadow:none}
.tb-title{font-size:18px;font-weight:700;letter-spacing:-.02em}
/* hub tabs → a segmented control */
.hub-tabs{display:inline-flex;background:var(--fill);border-radius:10px;padding:2px;gap:0}
.hub-tab{border-radius:8px;padding:5px 14px;font-size:13px;font-weight:500;color:var(--text);background:transparent;min-height:30px;display:inline-flex;align-items:center;transition:background var(--dur-fast) var(--ease-std),box-shadow var(--dur-fast) var(--ease-std)}
.hub-tab:hover{background:transparent;color:var(--text)}
.hub-tab.on{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04)}
:root[data-theme="black"] .hub-tab.on,:root[data-theme="black-blue"] .hub-tab.on{background:#636366;color:#fff}
/* chips */
.filter-pill{border:0;background:var(--fill);color:var(--text);border-radius:999px;font-weight:500;font-size:13px;padding:7px 14px;letter-spacing:0;text-transform:none;font-family:var(--font-ui)}
.filter-pill.on{background:var(--accent);color:var(--accent-fg);border:0}
/* fields: filled, no border, 10px */
.search-box input,.field input,.field select,.field textarea,input.k-input,select.k-input,textarea.k-input{background:var(--fill)!important;border:1px solid transparent!important;border-radius:10px!important;color:var(--text)!important;box-shadow:none}
.search-box input::placeholder,.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus,.field textarea:focus,.search-box input:focus{border-color:var(--accent)!important;background:var(--surface)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.field label{color:var(--text-3);font-size:12px;font-weight:500}
/* buttons: 10px corners; secondary is a grey fill, not an outline */
.btn{border-radius:10px;font-weight:600}
.btn-ghost{background:var(--fill);border-color:transparent;color:var(--text)}
.btn-ghost:hover{background:var(--fill-2);border-color:transparent}
.btn-primary{box-shadow:none}
.btn-primary:hover{box-shadow:none}
/* modals: a sheet with a grabber on the phone */
.modal{border:0;border-radius:var(--r-xl)}
.modal-head{border-bottom:1px solid var(--border)}
.modal-foot{border-top:1px solid var(--border);background:var(--surface)}
/* folds and menus */
details.calm-more > summary{background:var(--surface);border:0;border-radius:var(--r-lg)}
.k-menu,.ui-menu{border:0;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 16px 48px -16px rgba(0,0,0,.3)}
/* toggles inside forms become switches */
.modal .field input[type="checkbox"],.modal label>input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:44px!important;height:26px!important;border-radius:13px!important;background:var(--fill-2)!important;border:0!important;position:relative;cursor:pointer;flex-shrink:0;transition:background .2s ease;margin:0;padding:0;accent-color:auto;vertical-align:middle}
.modal .field input[type="checkbox"]::after,.modal label>input[type="checkbox"]::after{content:'';position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.1);transition:transform .2s ease}
.modal .field input[type="checkbox"]:checked,.modal label>input[type="checkbox"]:checked{background:var(--accent)!important}
.modal .field input[type="checkbox"]:checked::after,.modal label>input[type="checkbox"]:checked::after{transform:translateX(18px)}
/* bottom tab bar */
.mob-tabs{background:color-mix(in srgb,var(--surface) 94%,transparent);border-top:1px solid var(--border)}
.mob-tab{font-size:10px;font-weight:500;letter-spacing:0}
.mob-tab.active{color:var(--accent)}
/* the stock grid */
.stock-view-seg{display:inline-flex;background:var(--fill);border-radius:9px;padding:2px}
.stock-view-seg button{border:0;background:transparent;color:var(--text);font:inherit;font-size:12px;font-weight:500;padding:4px 12px;border-radius:7px;cursor:pointer;min-height:28px;display:inline-flex;align-items:center;gap:5px}
.stock-view-seg button.on{background:var(--surface);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}
:root[data-theme="black"] .stock-view-seg button.on,:root[data-theme="black-blue"] .stock-view-seg button.on{background:#636366}
.stock-grid{display:grid;gap:12px;padding:12px;grid-template-columns:repeat(auto-fill,minmax(var(--cube),1fr))}
.stock-grid.n-l{--cube:220px}.stock-grid.n-m{--cube:176px}.stock-grid.n-s{--cube:140px}
.stock-cube{position:relative;background:var(--surface);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--border);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-std)}
.stock-cube:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--border-strong),0 12px 28px -16px rgba(0,0,0,.25)}
.stock-cube:active{transform:scale(.985)}
.sc-img{position:relative;aspect-ratio:4/3;background:var(--bg-subtle);display:flex;align-items:center;justify-content:center;color:var(--text-3);overflow:hidden}
.sc-img img{width:100%;height:100%;object-fit:cover;display:block}
.sc-img .ti{font-size:22px}
.sc-img .status-dot{position:absolute;top:10px;left:10px;width:10px;height:10px;box-shadow:0 0 0 2px var(--surface)}
.sc-flags{position:absolute;left:8px;bottom:8px;display:flex;gap:4px;flex-wrap:wrap}
.sc-flags .pill{font-size:10px;padding:2px 7px;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.sc-menu{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:999px;border:0;background:color-mix(in srgb,var(--surface) 85%,transparent);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.sc-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.sc-name{font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.sc-row{display:flex;align-items:center;gap:8px;min-width:0}
.sc-row .tbl-reg{font-size:11px;padding:1px 6px}
.sc-meta{font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-price{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--text);display:flex;align-items:baseline;gap:6px;margin-top:2px}
.sc-buy{font-size:11px;font-weight:500;color:var(--text-3)}
.stock-grid.n-s .sc-body{padding:8px 10px 10px}
.stock-grid.n-s .sc-price{font-size:13px}
.stock-grid.n-s .sc-meta,.stock-grid.n-s .sc-buy{display:none}
@media (max-width:768px){
  .stock-grid{gap:10px;padding:10px}
  .stock-grid.n-l{--cube:150px}.stock-grid.n-m{--cube:140px}.stock-grid.n-s{--cube:105px}
  .stock-grid.n-s .sc-row .tbl-reg{display:none}
  .hub-tabs{display:inline-flex;margin:0 0 2px;padding:2px}
  .hub-tab.on{background:var(--surface);color:var(--text)}
  .hub-tab{min-height:36px;padding:6px 14px}
  .modal::before{content:'';display:block;width:36px;height:5px;border-radius:3px;background:rgba(120,120,128,.35);margin:8px auto -4px}
  .field input,.field select,.field textarea,.search-box input{min-height:44px;font-size:15px}
  .topbar{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
}