/* ── The Circle — client portal stylesheet.
   A customer-facing surface with its own look (dark rail, soft white cards,
   Plus Jakarta Sans; Montserrat Bold for the wordmark), deliberately separate
   from the operator app.css. One palette, taken from the brand guide:
   anthracite #222B34 and ice blue #73C2FB. Light and dark are full token sets;
   the theme is on html[data-theme] (set before paint by /js/boot.js, toggled by
   /js/theme.js), with a prefers-color-scheme fallback for the no-JS case. ── */
:root{
  color-scheme:light;
  --dark-900:#222B34; --dark-800:#2B3542; --dark-700:#384456; --ink-side:#9AA6B4; --accent-on-dark:#73C2FB;
  --ground:#F2F5F7; --card:#FFFFFF; --line:#E1E7EC; --line-dark:rgba(255,255,255,.1);
  --ink:#14191E; --ink-muted:#64707A; --field-bg:#FFFFFF; --card-border:transparent;
  --accent:#73C2FB; --accent-hover:#86CBFC; --accent-soft:rgba(115,194,251,.2); --on-accent:#0B2130; --accent-ink:#1C6B99;
  --inverse-bg:#222B34; --inverse-ink:#FFFFFF;
  --good:#22C55E; --good-bg:#DCFCE7; --good-ink:#166534;
  --warn:#F97316; --warn-bg:#FFEDD5; --warn-ink:#9A3412;
  --bad:#EF4444;  --bad-bg:#FEE2E2;  --bad-ink:#991B1B;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-xxl:24px;
  --sh-sm:0 2px 8px rgba(11,19,15,.02); --sh-md:0 10px 30px rgba(11,19,15,.04); --sh-lg:0 20px 50px rgba(11,19,15,.08);
  --sidebar-open:280px; --sidebar:var(--sidebar-open);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#12181F; --card:#1B232C; --line:#2A3441; --ink:#E8ECEF; --ink-muted:#9AA6B4; --field-bg:#151C24; --card-border:#2A3441;
    --accent:#8FCFFB; --accent-hover:#A3D8FC; --accent-soft:rgba(143,207,251,.14); --on-accent:#0B2130; --accent-ink:#8FCFFB;
    --inverse-bg:#384456; --inverse-ink:#FFFFFF;
    --good-bg:rgba(34,197,94,.16); --good-ink:#86EFAC; --warn-bg:rgba(249,115,22,.18); --warn-ink:#FDBA74; --bad-bg:rgba(239,68,68,.16); --bad-ink:#FCA5A5;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#12181F; --card:#1B232C; --line:#2A3441; --ink:#E8ECEF; --ink-muted:#9AA6B4; --field-bg:#151C24; --card-border:#2A3441;
  --accent:#8FCFFB; --accent-hover:#A3D8FC; --accent-soft:rgba(143,207,251,.14); --on-accent:#0B2130; --accent-ink:#8FCFFB;
  --inverse-bg:#384456; --inverse-ink:#FFFFFF;
  --good-bg:rgba(34,197,94,.16); --good-ink:#86EFAC; --warn-bg:rgba(249,115,22,.18); --warn-ink:#FDBA74; --bad-bg:rgba(239,68,68,.16); --bad-ink:#FCA5A5;
}

*{box-sizing:border-box}
html{background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
h1{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.15;text-wrap:balance}
h2.sec{font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0 0 12px;color:var(--ink-muted)}
img{max-width:100%}
svg.lucide{width:18px;height:18px;stroke-width:1.9;flex:0 0 auto}
/* Lucide swaps each <i data-lucide> for its <svg> only after the page has
   painted (the script is deferred), and until then the <i> is empty and zero
   wide. Every label beside an icon painted 18px to the left and jumped when its
   icon arrived — the sidebar links shook on every page change. The placeholder
   takes the icon's box, so the swap lands in place; every icon size rule below
   names both the svg and the placeholder. */
i[data-lucide]{display:inline-block;width:18px;height:18px;flex:0 0 auto}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-sm)}
.sidebar :focus-visible{outline-color:var(--accent-on-dark)}
.muted{color:var(--ink-muted)}
.mono{font-family:var(--mono);font-size:12.5px}
.num{font-variant-numeric:tabular-nums}
.small{font-size:12.5px}
[hidden]{display:none!important}


/* ── Shell ── */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);background:var(--dark-900);position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;padding:28px 24px 22px;border-right:1px solid var(--line-dark);z-index:40;overflow-y:auto;overflow-x:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1),width .25s ease,padding .25s ease}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;padding-left:4px;margin-bottom:30px}
/* The mark is inlined (partials/mark.ejs) and takes currentColor: ice blue on
   the dark rail, ice blue on the light standalone pages too (brand guide). */
.brand svg.mark{width:36px;height:36px;flex:0 0 auto;color:var(--accent-on-dark)}
.brand .wm{display:block;min-width:0;white-space:nowrap;transition:opacity .2s ease}
.brand b{display:block;font-family:'Montserrat',var(--font);font-size:20px;font-weight:700;letter-spacing:-.03em;line-height:1.1;color:#fff}
.brand small{display:block;font-size:11.5px;color:var(--ink-side);font-weight:500;letter-spacing:.02em}
.navsec{margin-bottom:22px}
.navsec h4{position:relative;margin:0 0 8px;padding-left:12px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-side);opacity:.65;white-space:nowrap;transition:color .2s ease}
.navsec h4::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.4);opacity:0;transition:opacity .2s ease}
.navsec ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.navlink{display:flex;align-items:center;gap:13px;padding:10px 13px;border-radius:var(--r-md);color:var(--ink-side);font-weight:500;font-size:14.5px;text-decoration:none;position:relative;transition:color .2s,background .2s}
.navlink:hover{color:#fff;background:rgba(255,255,255,.03)}
.navlink[aria-current="page"]{color:#fff;background:rgba(255,255,255,.05);font-weight:600}
.navlink[aria-current="page"]::before{content:"";position:absolute;left:-24px;top:15%;height:70%;width:4px;background:var(--accent-on-dark);border-radius:0 4px 4px 0}
.navlink[aria-current="page"] svg{color:var(--accent-on-dark)}
.navtext{white-space:nowrap;transition:opacity .2s ease}
.navbadge{margin-left:auto;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;line-height:1.6;transition:opacity .2s ease}
/* On the rail the count pill is clipped away; this dot on the icon stands in for it. */
.navlink:has(.navbadge:not([hidden]))::after{content:"";position:absolute;top:6px;left:25px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--dark-900);opacity:0;transition:opacity .2s ease;pointer-events:none}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:12px}
.dealer-plate{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.03);border:1px solid var(--line-dark);color:#fff;padding:11px 12px;border-radius:var(--r-xl);overflow:hidden;transition:padding .25s ease,background-color .2s ease,border-color .2s ease}
.dealer-logo{width:38px;height:38px;border-radius:var(--r-lg);background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:800;font-size:13px;letter-spacing:-.02em;flex:0 0 auto}
.dealer-logo-img{width:38px;height:38px;border-radius:var(--r-lg);object-fit:contain;background:#fff;padding:3px;flex:0 0 auto}
.dealer-meta{flex:0 0 auto;width:calc(var(--sidebar-open) - 123px);transition:opacity .2s ease}
.dealer-meta em{display:block;font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-side);font-weight:700}
.dealer-meta b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dealer-meta small{display:block;font-size:11.5px;color:var(--ink-side);font-weight:500}
.avatar{width:38px;height:38px;border-radius:var(--r-lg);background:var(--dark-700);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:0 0 auto}
.avatar.sm{width:34px;height:34px;font-size:12px}

.main{flex:1;margin-left:var(--sidebar);min-width:0;padding:0 40px 56px;transition:margin-left .25s ease}
.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--ground) 85%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);margin:0 -40px 28px;padding:18px 40px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}
.tb-left{display:flex;align-items:center;gap:10px;min-width:0}
.tb-left h2{font-size:19px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.crumb{font-size:12.5px;color:var(--ink-muted);font-weight:500;white-space:nowrap}
.tb-right{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.iconbtn{width:42px;height:42px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;position:relative;box-shadow:var(--sh-sm);cursor:pointer;transition:background .2s;text-decoration:none}
.iconbtn:hover{background:var(--line);color:var(--ink)}
.iconbtn .dot{position:absolute;top:-2px;right:-2px;width:11px;height:11px;border-radius:50%;background:var(--good);border:2px solid var(--card);box-shadow:0 0 8px rgba(34,197,94,.6)}

/* ── Page head / flash ── */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.head p{color:var(--ink-muted);margin-top:4px;max-width:60ch}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.flash{display:flex;align-items:center;gap:10px;background:var(--good-bg);color:var(--good-ink);padding:12px 16px;border-radius:var(--r-lg);font-weight:600;font-size:13.5px;margin-bottom:20px}
.flash.error{background:var(--bad-bg);color:var(--bad-ink)}

/* ── Cards & grids ── */
.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--r-xxl);padding:26px 28px;box-shadow:var(--sh-md);position:relative;min-width:0;text-decoration:none;color:inherit}
.card.tight{padding:18px 20px}
a.card:hover{box-shadow:var(--sh-lg)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.card-title{font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.card-title small{display:block;font-size:12.5px;color:var(--ink-muted);font-weight:500;margin-top:2px}
.grid{display:grid;gap:20px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g21{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.stack{display:flex;flex-direction:column;gap:20px}
.empty{display:flex;align-items:center;gap:10px;color:var(--ink-muted);font-size:13.5px;padding:8px 0}
.empty.small{padding:14px 18px;font-size:12.5px}

/* stat tile */
.stat{display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.stat .row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.stat .lbl{font-size:13.5px;color:var(--ink-muted);font-weight:500}
.stat .val{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;margin-top:8px}
.stat .sub{font-size:12.5px;color:var(--ink-muted);font-weight:500;display:flex;align-items:center;gap:6px}
.stat .sub svg,.stat .sub i[data-lucide]{width:14px;height:14px}
.plate{width:42px;height:42px;border-radius:13px;background:var(--dark-700);color:var(--accent-on-dark);display:grid;place-items:center;flex:0 0 auto}
.plate.warn{background:var(--warn-bg);color:var(--warn)}
.plate.good{background:var(--good-bg);color:var(--good-ink)}
.plate.soft{background:var(--accent-soft);color:var(--accent-ink)}
.plate.neutral{background:var(--ground);color:var(--ink-muted)}
.plate svg,.plate i[data-lucide]{width:20px;height:20px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-md);font-weight:600;font-size:13.5px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;box-shadow:var(--sh-sm);transition:background .2s,border-color .2s,transform .1s;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--ground)}
.btn:active{transform:translateY(1px)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.accent:hover{background:var(--accent-hover)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-muted)}
.btn.ghost:hover{background:var(--ground);color:var(--ink)}
.btn.sm{padding:7px 12px;font-size:12.5px;border-radius:9px}
.btn.sm svg,.btn.sm i[data-lucide]{width:15px;height:15px}
.btn.block{width:100%;justify-content:center}
.btn.danger{background:var(--bad-bg);border-color:transparent;color:var(--bad-ink);box-shadow:none}
.btn.danger:hover{background:color-mix(in srgb,var(--bad) 22%,transparent)}

/* pills / chips */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--ground);color:var(--ink-muted)}
.pill .pd{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.pill.good{background:var(--good-bg);color:var(--good-ink)}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink)}
.pill.bad{background:var(--bad-bg);color:var(--bad-ink)}
.pill.progress{background:var(--accent-soft);color:var(--accent-ink)}
.pill.neutral{background:var(--ground);color:var(--ink-muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none}
a.chip:hover{background:var(--ground)}
.chip svg,.chip i[data-lucide]{width:13px;height:13px}

/* table */
.tablewrap{overflow-x:auto;margin:0 -8px}
.table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.table th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.table td{padding:13px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table .r{text-align:right}
.table b{font-weight:600}
.table .sub{display:block;font-size:12px;color:var(--ink-muted);font-weight:500}

/* lists */
.list{display:flex;flex-direction:column}
.item{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0;padding-bottom:0}
.item:first-child{padding-top:0}
.item .t{flex:1;min-width:0}
.item .t b{display:block;font-weight:600;font-size:13.5px}
.item .t span{display:block;font-size:12.5px;color:var(--ink-muted)}
.item .amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* activity timeline */
.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tl li{position:relative;padding:0 0 18px 26px}
.tl li::before{content:"";position:absolute;left:6px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tl li::after{content:"";position:absolute;left:9.5px;top:19px;bottom:-2px;width:1px;background:var(--line)}
.tl li:last-child{padding-bottom:0}.tl li:last-child::after{display:none}
.tl li.quiet::before{background:var(--line);box-shadow:none}
.tl b{font-weight:600}
.tl span{display:block;font-size:12px;color:var(--ink-muted);margin-top:1px}
.tl.compact li{padding-bottom:12px}

/* repair pipeline */
.steps{display:flex;overflow-x:auto;padding:6px 0 2px;margin:4px 0 20px}
.step{flex:1;min-width:92px;position:relative;text-align:center;font-size:11.5px;font-weight:600;color:var(--ink-muted)}
/* The step's circle is its own <i>. The check inside it is a second <i> until
   Lucide swaps it, so these rules take the direct child only. */
.step > i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;margin:0 auto 8px;background:var(--ground);border:2px solid var(--line);position:relative;z-index:1;font-style:normal}
.step > i > svg,.step > i > i[data-lucide]{width:13px;height:13px}
.step::before{content:"";position:absolute;top:11px;left:-50%;right:50%;height:2px;background:var(--line)}
.step:first-child::before{display:none}
.step.done > i{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.step.done::before{background:var(--accent)}
.step.done{color:var(--ink)}
.step.now > i{background:var(--card);border-color:var(--ink);box-shadow:0 0 0 4px var(--accent-soft)}
.step.now::before{background:var(--accent)}
.step.now{color:var(--ink)}
.quote{background:var(--ground);border-radius:var(--r-xl);padding:18px 20px}
.quote-amt{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.quote-amt b{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.note{background:var(--card);border-left:3px solid var(--accent);border-radius:var(--r-md);padding:12px 14px;font-size:13px;margin:0 0 14px;white-space:pre-line}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.thumbs img{width:72px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}

/* pieces */
.pieces{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.piece{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--r-xl);background:var(--card);border:1px solid var(--card-border);box-shadow:var(--sh-md);min-width:0}
.piece .media{aspect-ratio:4/3;max-width:100%;border-radius:var(--r-lg);display:grid;place-items:center;position:relative;color:var(--accent-on-dark);background:linear-gradient(135deg,var(--dark-800),var(--dark-700));overflow:hidden}
.piece .media img{width:100%;height:100%;object-fit:cover}
.piece .media svg,.piece .media i[data-lucide]{width:46px;height:46px;stroke-width:1.4;opacity:.95}
.piece .media .pill{position:absolute;left:10px;top:10px}
.piece .media .ref{position:absolute;right:10px;bottom:8px;color:rgba(255,255,255,.8);font-size:11px;font-family:var(--mono);background:rgba(0,0,0,.35);padding:2px 6px;border-radius:6px}
.piece .name{font-weight:700;font-size:13.5px;line-height:1.3}
.piece .meta{font-size:12.5px;color:var(--ink-muted)}
.piece .meta b{color:var(--ink);font-weight:600}
.piece .row{display:flex;gap:4px;margin-top:auto;padding-top:4px}
.piece .row .btn{flex:1;justify-content:center;padding:7px 6px}
.piece.mini{padding:0;box-shadow:none;background:transparent;border:0}

/* consignment card */
.cons{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;padding:18px 20px}
.cons-media{aspect-ratio:1;border-radius:var(--r-lg);display:grid;place-items:center;color:var(--accent-on-dark);background:linear-gradient(135deg,var(--dark-800),var(--dark-700));overflow:hidden}
.cons-media img{width:100%;height:100%;object-fit:cover}
.cons-media svg,.cons-media i[data-lucide]{width:40px;height:40px;stroke-width:1.4}
.cons-body{min-width:0}

/* trade-in card — the two sides of one counter deal, side by side */
.trade{padding:18px 20px}
.trade-sides{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;margin:4px 0 18px}
.trade-side{min-width:0}
.trade-side-hd{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;text-transform:uppercase;
               letter-spacing:.08em;color:var(--ink-muted);margin:0 0 6px}
.trade-side-hd svg,.trade-side-hd i[data-lucide]{width:13px;height:13px}
.trade-swap{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
            background:var(--ground);color:var(--ink-muted)}
.trade-swap svg,.trade-swap i[data-lucide]{width:16px;height:16px}
.trade-thumb{width:44px;height:44px;border-radius:11px;flex:0 0 auto;overflow:hidden;display:grid;place-items:center;
             background:linear-gradient(135deg,var(--dark-800),var(--dark-700));color:var(--accent-on-dark)}
.trade-thumb img{width:100%;height:100%;object-fit:cover}
.trade-thumb svg,.trade-thumb i[data-lucide]{width:18px;height:18px;stroke-width:1.5}
.trade-kv{border-top:1px solid var(--line);padding-top:16px}
.trade-foot{margin-top:16px;display:flex;justify-content:flex-end}
.empty.small{padding:14px 0;font-size:12.5px}
/* On a phone the two sides stack, and the swap mark turns a quarter so it still
   points from what you gave to what you got. */
@media (max-width:900px){
  .trade-sides{grid-template-columns:minmax(0,1fr);gap:14px}
  .trade-swap{transform:rotate(90deg);justify-self:center}
}

/* attention */
.att{display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--r-xl);border:1px solid var(--line)}
.att + .att{margin-top:10px}
.att .t{flex:1;min-width:0}
.att .t b{display:block;font-weight:600}
.att .t span{font-size:12.5px;color:var(--ink-muted)}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.field .lbl{color:var(--ink);font-size:12.5px}
.field .hint{font-size:12.5px;font-weight:500;color:var(--ink-muted);line-height:1.45}
.readonly{padding:10px 12px;border:1px dashed var(--line);border-radius:var(--r-md);background:var(--ground);font-size:13.5px;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.card.narrow{max-width:680px}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.facts li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.5;max-width:62ch}
.facts li svg,.facts li i[data-lucide]{color:var(--ink-muted);margin-top:1px}
.input,select.input,textarea.input{width:100%;font:inherit;font-size:13.5px;font-weight:500;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--field-bg);color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.input:focus{border-color:color-mix(in srgb,var(--ink) 35%,transparent);box-shadow:0 0 0 3px var(--accent-soft)}
.input:disabled{opacity:.7}
textarea.input{min-height:84px;resize:vertical}
.check{display:flex;align-items:flex-start;gap:9px;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;line-height:1.45}
.check input{accent-color:var(--accent);width:16px;height:16px;margin-top:2px;flex:0 0 auto}
.kv{display:grid;grid-template-columns:130px 1fr;gap:10px 16px;font-size:13.5px;margin:0}
.kv dt{color:var(--ink-muted);font-weight:500;margin:0}
.kv dd{margin:0;font-weight:600}

/* messages */
.msgs{display:grid;grid-template-columns:290px minmax(0,1fr);padding:0;overflow:hidden;min-height:560px}
.threads{border-right:1px solid var(--line);display:flex;flex-direction:column}
.threads .hd{padding:18px 18px 10px;display:flex;align-items:center;justify-content:space-between}
.thread{display:flex;gap:12px;padding:13px 18px;text-decoration:none;color:inherit;border-left:3px solid transparent}
.thread:hover{background:var(--ground)}
.thread.on{background:var(--ground);border-left-color:var(--accent)}
.thread .t{flex:1;min-width:0}
.thread .t b{display:flex;justify-content:space-between;gap:8px;font-size:13.5px;font-weight:600}
.thread .t b small{font-size:11.5px;color:var(--ink-muted);font-weight:500;white-space:nowrap}
.thread .t span{display:block;font-size:12.5px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread .unread b{color:var(--ink)}
.thread .unread span{color:var(--ink);font-weight:500}
.chat{display:flex;flex-direction:column;min-width:0}
.chat .hd{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
/* Scoped to the title block: a bare `.chat .hd span` also matched the avatar and
   the plate beside it and knocked their icon/initials out of centre. */
.chat .hd > div > b{display:block;font-size:14.5px;font-weight:700}
.chat .hd > div > span{display:block;font-size:12.5px;color:var(--ink-muted)}
.chat .body{flex:1;padding:20px 22px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;max-height:60vh}
.chat .body.compose{max-height:none;gap:14px}
.bubble{max-width:72%;padding:11px 14px;border-radius:16px;font-size:13.5px;line-height:1.5;position:relative;white-space:pre-line;overflow-wrap:anywhere}
.bubble.in{align-self:flex-start;background:var(--ground);border-bottom-left-radius:6px}
.bubble.out{align-self:flex-end;background:var(--inverse-bg);color:var(--inverse-ink);border-bottom-right-radius:6px}
.bubble time{display:block;font-size:11px;margin-top:5px;opacity:.65;font-weight:500}
.composer{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line);align-items:flex-end;margin:0}
.composer textarea{flex:1;min-height:44px;max-height:140px;resize:none}
.composer .iconbtn{width:44px;height:44px}

/* standalone (sign-in / invite) */
body.standalone{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px 16px}
.auth{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;gap:18px}
.brand-dark{margin:0;padding:0}
.brand-dark b{color:var(--ink)}
.brand-dark small{color:var(--ink-muted)}
.brand-dark svg.mark{color:#73C2FB}
.auth-card{width:100%;padding:30px 30px 26px}
.auth-card h1{font-size:22px;margin-bottom:8px}
.auth-card .muted{margin-bottom:18px}
.auth-card .stack{gap:14px}
.auth-plate{margin-bottom:14px}
.auth-foot{font-size:12px;color:var(--ink-muted);text-align:center;margin:0}

.foot{margin-top:40px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink-muted);font-weight:500}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}
.scrim{position:fixed;inset:0;background:color-mix(in srgb,var(--dark-900) 45%,transparent);z-index:35;display:none}
.scrim.on{display:block}

/* ── Account menu (top-right). The member's initials open it: who is signed in,
   Profile, the dark-mode switch and Sign out — the operator app's user menu, in
   the portal's tokens. /js/theme.js wires the [data-theme-toggle] checkbox; the
   open/close behaviour is in /circle/circle.js. ── */
.acct{position:relative;display:inline-flex}
.acct-btn{width:42px;height:42px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font:inherit;font-weight:700;font-size:13px;letter-spacing:.02em;cursor:pointer;box-shadow:var(--sh-sm);transition:background .2s,box-shadow .2s}
.acct-btn:hover{background:color-mix(in srgb,var(--accent) 32%,transparent)}
.acct-btn[aria-expanded="true"]{box-shadow:0 0 0 3px var(--accent-soft)}
.acct-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:248px;max-width:calc(100vw - 32px);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:6px;z-index:50}
.acct-id{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;min-width:0}
.acct-id b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-id span{display:block;font-size:12px;color:var(--ink-muted);margin-top:2px;overflow-wrap:anywhere}
.acct-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;border-radius:9px;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink);text-decoration:none;text-align:left;cursor:pointer}
.acct-item:hover{background:var(--ground)}
.acct-item svg,.acct-item i[data-lucide]{width:16px;height:16px;color:var(--ink-muted)}
.acct-label{flex:1 1 auto;min-width:0;white-space:nowrap}
.acct-sep{height:1px;margin:4px 6px;background:var(--line)}
.acct-form{margin:0}
.acct-signout,.acct-item.acct-signout svg{color:var(--bad-ink)}
/* The switch: the checkbox stays focusable but invisible; the track shows state. */
.acct-toggle{position:relative;user-select:none}
.acct-toggle-input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.acct-switch{position:relative;flex:0 0 auto;width:36px;height:20px;border-radius:999px;background:var(--line);transition:background .2s}
.acct-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.acct-toggle-input:checked ~ .acct-switch{background:var(--accent)}
.acct-toggle-input:checked ~ .acct-switch::after{transform:translateX(16px)}
.acct-toggle-input:focus-visible ~ .acct-switch{outline:2px solid var(--ink);outline-offset:2px}

/* ── Tooltip bubble (/js/tooltip.js, data-tip) in the portal's own tokens ── */
.tip{position:fixed;z-index:9800;display:none;max-width:260px;padding:5px 9px;border-radius:8px;background:var(--inverse-bg);color:var(--inverse-ink);font-family:var(--font);font-size:12px;font-weight:600;line-height:1.35;box-shadow:var(--sh-lg);pointer-events:none;white-space:pre-line}
.tip.open{display:block}

/* ── Collapsed sidebar: an icon rail (desktop only). The menu button toggles
   html[data-sidebar="collapsed"]; /circle/boot.js restores it before paint.
   ONLY the width animates. The rail is exactly one link wide (24 + 13 + 18 + 13
   + 24 = 92px), so every icon, the mark and the dealer logo keep their position,
   and the words beside them — one line each, clipped by the sidebar — just fade.
   Moving labels in and out of the layout, or letting them wrap in the narrow
   column while the width grew, is what made the text jump. Labels stay in the
   accessibility tree (opacity, not display or clip); circle.js adds a tooltip
   per link while collapsed. Phones and tablets ignore this and keep the drawer. ── */
@media (min-width:1025px){
  html[data-sidebar="collapsed"]{--sidebar:92px}
  html[data-sidebar="collapsed"] .sidebar .brand .wm,
  html[data-sidebar="collapsed"] .sidebar .navtext,
  html[data-sidebar="collapsed"] .sidebar .navbadge,
  html[data-sidebar="collapsed"] .sidebar .dealer-meta{opacity:0}
  html[data-sidebar="collapsed"] .sidebar .navsec h4{color:transparent}
  html[data-sidebar="collapsed"] .sidebar .navsec h4::after,
  html[data-sidebar="collapsed"] .sidebar .navlink:has(.navbadge:not([hidden]))::after{opacity:1}
  html[data-sidebar="collapsed"] .sidebar .dealer-plate{padding-left:2px;padding-right:2px;background-color:transparent;border-color:transparent}
}

/* ── Responsive ── */
@media (max-width:1180px){.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Five tiles need the break one step earlier than four do. */
@media (max-width:1420px) and (min-width:1181px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1024px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none}
  .main{margin-left:0;padding:0 16px 40px}
  .topbar{margin:0 -16px 20px;padding:12px 16px;gap:12px}
  .crumb{display:none}
}
@media (max-width:760px){
  .g4,.g5,.g2,.g21{grid-template-columns:minmax(0,1fr)}
  .msgs{grid-template-columns:minmax(0,1fr);min-height:0}
  .threads{border-right:0;border-bottom:1px solid var(--line)}
  .kv{grid-template-columns:1fr}
  .card{padding:20px 18px}
  .cons{grid-template-columns:90px minmax(0,1fr);gap:12px}
  .head .actions{width:100%}.head .actions .btn{flex:1;justify-content:center}
  .bubble{max-width:88%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}