/* Faulkner Curbside — palette and type mined from Faulkner's own brand
   (tobesure.com): navy #0b2154, slate #263345, cyan #2dc7ff, Titillium Web.
   Data (VIN/price/miles) stays mono, set like an odometer. */
:root {
  --bg: #EEF1F5;
  --surface: #FFFFFF;
  --surface-2: #E2E7EE;
  --chrome: #0B2154;          /* Faulkner navy — the brand bar, both themes */
  --chrome-ink: #FFFFFF;
  --chrome-sub: #9FB0CE;
  --ink: #16202E;
  --ink-2: #3A4757;
  --muted: #66748A;
  --line: #D3DAE4;
  --line-2: #BFC9D7;
  --accent: #17789B;          /* Faulkner cyan, text-safe weight */
  --accent-bright: #2DC7FF;   /* Faulkner cyan, full brightness */
  --accent-soft: #DDF3FC;
  --on-accent: #FFFFFF;       /* on --accent fills */
  --good: #1C8F50;
  --good-ink: #157A43;
  --good-soft: #DFF1E6;
  --warn: #B07A16;
  --warn-ink: #8F620F;
  --warn-soft: #F6EBD2;
  --gone: #93A0B2;
  --cl: #C24E2A;              /* source: craigslist */
  --cc: #6D4AA8;              /* source: cars.com */
  --fb: #4A5B8C;              /* source: facebook (sample) */
  --fb-ink: #2F3F69;
  --shadow: 0 1px 2px rgba(11,33,84,.07), 0 8px 24px rgba(11,33,84,.06);
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D131E;
    --surface: #141B28;
    --surface-2: #1D2636;
    --chrome: #061229;
    --chrome-ink: #EAF1FA;
    --chrome-sub: #8FA3C4;
    --ink: #E6ECF3;
    --ink-2: #BFCBDA;
    --muted: #8B98A8;
    --line: #26303F;
    --line-2: #354153;
    --accent: #2DC7FF;
    --accent-bright: #6FDBFF;
    --accent-soft: #0A2C3C;
    --on-accent: #08182F;
    --good: #47C07C;
    --good-ink: #47C07C;
    --good-soft: #14301F;
    --warn: #E0A63F;
    --warn-ink: #E0A63F;
    --warn-soft: #33280F;
    --gone: #5D6A7C;
    --cl: #E4744E;
    --cc: #A98AD9;
    --fb: #8296C4;
    --fb-ink: #A9BBE4;
    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.055);
  }
}
:root[data-theme="dark"] {
  --bg: #0D131E; --surface: #141B28; --surface-2: #1D2636; --chrome: #061229; --chrome-ink: #EAF1FA; --chrome-sub: #8FA3C4; --ink: #E6ECF3; --ink-2: #BFCBDA; --muted: #8B98A8; --line: #26303F; --line-2: #354153; --accent: #2DC7FF; --accent-bright: #6FDBFF; --accent-soft: #0A2C3C; --on-accent: #08182F; --good: #47C07C; --good-ink: #47C07C; --good-soft: #14301F; --warn: #E0A63F; --warn-ink: #E0A63F; --warn-soft: #33280F; --gone: #5D6A7C; --cl: #E4744E; --cc: #A98AD9; --fb: #8296C4; --fb-ink: #A9BBE4;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.055);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Titillium Web", system-ui, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.mono { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
button { font-family: inherit; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--chrome); color: var(--chrome-ink);
  padding: .7rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.wordmark { display: flex; flex-direction: column; gap: 1px; margin: 0; line-height: 1; }
.wordmark .wm-name {
  font-family: "Playfair Display", Georgia, serif; font-weight: 700;
  font-size: 1.16rem; letter-spacing: .005em; color: var(--chrome-ink);
}
/* echoes the Faulkner lockup: letterspaced caps between two rules */
.wordmark .wm-sub {
  display: flex; align-items: center; gap: .35rem;
  font-family: "Titillium Web", sans-serif; font-weight: 600;
  font-size: .53rem; letter-spacing: .22em; color: var(--chrome-sub); text-transform: uppercase;
}
.wordmark .wm-sub::before, .wordmark .wm-sub::after {
  content: ""; height: 1px; flex: 1 1 8px; min-width: 8px; background: currentColor; opacity: .5;
}
.brand-sub { color: var(--chrome-sub); font-size: .82rem; border-left: 1px solid rgba(255,255,255,.14); padding-left: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 rgba(40,190,110,.6); animation: pulse 2.2s infinite; flex: none; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(40,190,110,.55);} 70%{box-shadow:0 0 0 7px rgba(40,190,110,0);} 100%{box-shadow:0 0 0 0 rgba(40,190,110,0);} }
.topbar-right { display: flex; align-items: center; gap: .6rem; }
.refresh-status { text-align: right; line-height: 1.15; margin-right: .1rem; }
.rs-label { display: block; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--chrome-sub); }
.rs-time { font-size: .82rem; color: var(--chrome-ink); }
.rs-time.pulling { color: var(--accent-bright); }

.btn {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  border: 1px solid transparent; border-radius: 8px; padding: .5rem .8rem;
  font-size: .85rem; font-weight: 600; line-height: 1; transition: background .15s, border-color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: transparent; color: var(--chrome-ink); border-color: rgba(255,255,255,.35); }
.btn-primary:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); }
.btn-ghost { background: rgba(255,255,255,.06); color: var(--chrome-ink); border-color: rgba(255,255,255,.12); }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.icon-only { padding: .5rem .6rem; }
.btn-ico { font-size: 1rem; }
.btn.spin .btn-ico { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- stat strip ---------- */
.stripwrap { background: var(--surface); border-bottom: 1px solid var(--line); }
.strip { max-width: 1320px; margin: 0 auto; display: flex; gap: 0; padding: 0 1.25rem; flex-wrap: wrap; }
.stat { padding: .85rem 1.3rem .85rem 0; margin-right: 1.3rem; border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat-n { font-family: "Titillium Web", sans-serif; font-weight: 700; font-size: 1.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-l { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: .25rem; }
.stat.hero .stat-n { color: var(--good-ink); font-size: 1.65rem; }
.stat-n.zero { color: var(--gone); }

/* ---------- toolbar ---------- */
.toolwrap {
  position: sticky; top: 49px; z-index: 20; background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 16px -12px rgba(20,24,31,.25);
}
.toolbar {
  max-width: 1320px; margin: 0 auto; padding: .7rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.tabs { display: flex; gap: .3rem; background: var(--surface-2); padding: .25rem; border-radius: 10px; min-width: 0; flex-wrap: wrap; }
.tab {
  border: none; background: transparent; color: var(--ink-2); cursor: pointer;
  padding: .42rem .8rem; border-radius: 7px; font-size: .85rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .4rem;
}
.tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.dot-live.cc { background: var(--good); }
.tag-sample { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; background: var(--surface); color: var(--muted); border: 1px solid var(--line); padding: .05rem .3rem; border-radius: 4px; }
.tab.active .tag-sample { background: var(--surface-2); }
.filters { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.search, .select {
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink);
  border-radius: 8px; padding: .5rem .7rem; font-size: .85rem; font-family: inherit;
}
.search { min-width: 220px; }
.search::placeholder, .select::placeholder, input::placeholder { color: var(--ink-2); opacity: .9; }
.search:focus-visible, .select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
/* Visible keyboard focus on every interactive element (WCAG 2.4.7). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
.chk { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--ink-2); cursor: pointer; }
.chk input { accent-color: var(--accent); }

/* ---------- grid + cards ---------- */
.grid {
  max-width: 1320px; margin: .2rem auto 0; padding: .4rem 1.25rem 2rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem;
}
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform .12s, box-shadow .12s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,24,31,.08), 0 16px 40px rgba(20,24,31,.12); }
.card.fresh { outline: 2px solid var(--good); outline-offset: -2px; }

.thumb { position: relative; aspect-ratio: 16/10; background: var(--surface-2); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.no-photo { display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 12px, color-mix(in srgb, var(--surface-2) 60%, var(--bg)) 12px, color-mix(in srgb, var(--surface-2) 60%, var(--bg)) 24px); }
.no-photo .np { display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--ink-2); }
.no-photo .np svg { width: 74px; height: 49px; opacity: .8; }
.no-photo .np span { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.src-badge {
  position: absolute; top: .55rem; left: .55rem; font-size: .64rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: .2rem .45rem; border-radius: 5px;
  color: #fff; display: inline-flex; align-items: center; gap: .3rem;
}
.src-badge.craigslist { background: var(--cl); }
.src-badge.facebook { background: var(--fb); }
.src-badge.carscom { background: var(--cc); }
.src-badge .s { background: rgba(255,255,255,.25); padding: 0 .25rem; border-radius: 3px; font-size: .58rem; }
.price {
  position: absolute; bottom: 0; right: 0; background: var(--chrome); color: #fff;
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 1.02rem;
  padding: .3rem .6rem; border-top-left-radius: 8px; font-variant-numeric: tabular-nums;
}
.body { padding: .8rem .85rem .9rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.title { font-size: .98rem; font-weight: 600; line-height: 1.25; margin: 0; min-height: 2.5em; }
.meta { display: flex; flex-wrap: wrap; gap: .35rem .8rem; font-size: .78rem; color: var(--muted); }
.meta .mono { color: var(--ink-2); }
.meta .fresh-tag { color: var(--good-ink); font-weight: 600; }
.meta .tracked-tag { color: var(--muted); font-style: italic; border-bottom: 1px dotted var(--line-2); cursor: help; }

.vinrow { margin-top: auto; }
.vin-chip {
  display: flex; align-items: center; gap: .5rem; background: var(--good-soft);
  border: 1px solid color-mix(in srgb, var(--good) 30%, transparent);
  border-radius: 8px; padding: .45rem .55rem;
}
.vin-chip .tick { color: var(--good-ink); font-weight: 700; flex: none; }
.vin-chip .vin { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: .82rem; letter-spacing: .02em; color: var(--ink); word-break: break-all; }
.vin-decode { font-size: .75rem; color: var(--muted); margin-top: .1rem; }
.vin-decode .trim {
  display: inline-block; font-family: "Titillium Web", sans-serif; font-weight: 600;
  font-size: .68rem; letter-spacing: .02em; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-2);
  padding: .02em .4em; border-radius: 5px; margin-left: .1rem; vertical-align: .02em;
}
.vin-decode .trim.none { color: var(--muted); font-weight: 500; font-style: italic; }
.vin-missing { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted);
  border: 1px dashed var(--line-2); background: var(--surface-2); border-radius: 8px; padding: .45rem .55rem; }
.vin-note { font-size: .74rem; color: var(--warn-ink); background: var(--warn-soft); border-radius: 7px; padding: .4rem .5rem; }

.actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.act {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  border-radius: 7px; padding: .42rem .6rem; font-size: .78rem; font-weight: 600; text-decoration: none;
  transition: background .12s, border-color .12s;
}
.act:hover { border-color: var(--accent); }
.act.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.act.primary:hover { background: var(--accent-bright); }
.act.finding { opacity: .7; pointer-events: none; }
.act .mini-spin { display: inline-block; width: 11px; height: 11px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }

.empty { grid-column: 1/-1; text-align: center; color: var(--muted); padding: 3rem 1rem; }

/* ---------- footer + toast ---------- */
.foot { max-width: 1320px; margin: 0 auto; padding: 1rem 1.25rem 3rem; color: var(--muted); font-size: .8rem; }
.foot p { max-width: 75ch; }
.foot strong { color: var(--ink-2); }
.toast {
  position: fixed; bottom: 1.3rem; left: 50%; transform: translateX(-50%) translateY(200%);
  background: var(--chrome); color: #fff; padding: .65rem 1.1rem; border-radius: 9px;
  font-size: .85rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.3); z-index: 50;
  transition: transform .28s cubic-bezier(.2,.8,.2,1); display: flex; align-items: center; gap: .5rem;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast .tick { color: var(--good); }

@media (max-width: 640px) {
  .brand-sub { display: none; }
  .topbar { position: static; }
  .toolwrap { position: sticky; top: 0; }
  .refresh-status { display: none; }
  .grid { grid-template-columns: 1fr; }
  .search, .select { font-size: 16px; }   /* prevents iOS zoom-on-focus */
  .toolbar, .filters { width: 100%; min-width: 0; }
  .search { min-width: 0; flex: 1 1 100%; }
  .tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; padding-left: .6rem; padding-right: .6rem; }
  .act, .tab, .btn { min-height: 44px; }
  .chk { padding: .3rem 0; }
  .chk input { width: 18px; height: 18px; }
}

/* Dark theme: badges keep their saturated light-theme grounds (they sit on the
   photo/thumb, not the page), so white text stays >=4.5:1 in both themes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .src-badge.craigslist { background: #C24E2A; }
  :root:not([data-theme="light"]) .src-badge.facebook { background: #2D6AE0; }
  :root:not([data-theme="light"]) .src-badge.carscom { background: #147A8B; }
  :root:not([data-theme="light"]) .src-badge .s { background: rgba(0,0,0,.28); }
}
:root[data-theme="dark"] .src-badge.craigslist { background: #C24E2A; }
:root[data-theme="dark"] .src-badge.facebook { background: #2D6AE0; }
:root[data-theme="dark"] .src-badge.carscom { background: #147A8B; }
:root[data-theme="dark"] .src-badge .s { background: rgba(0,0,0,.28); }

/* ---------- view tabs (topbar) ---------- */
.views { display: flex; gap: .25rem; background: rgba(255,255,255,.07); padding: .22rem; border-radius: 9px; }
.view-tab { border: none; background: transparent; color: var(--chrome-sub); cursor: pointer;
  padding: .4rem .85rem; border-radius: 7px; font-size: .85rem; font-weight: 600; }
.view-tab.active { background: rgba(255,255,255,.14); color: var(--chrome-ink); box-shadow: inset 0 -2px 0 var(--accent-bright); }
.view-tab:not(.active):hover { color: var(--chrome-ink); }

/* ---------- hot / phone / status chips on cards ---------- */
.hot-badge { position: absolute; top: .55rem; right: .55rem; background: #C22F2F; color: #fff;
  font-family: "Titillium Web", sans-serif; font-weight: 700;
  font-size: .66rem; letter-spacing: .06em; padding: .22rem .5rem; border-radius: 5px; }
.price s { opacity: .6; font-weight: 400; font-size: .8em; margin-right: .3em; }
.phone-chip { color: var(--good-ink); font-size: .78rem; text-decoration: none; font-weight: 600;  display: inline-flex; align-items: center; min-height: 24px; }
.phone-chip:hover { text-decoration: underline; }
.st { font-family: "Titillium Web", sans-serif; font-weight: 700;
  font-size: .64rem; letter-spacing: .07em; text-transform: uppercase;
  padding: .12em .5em; border-radius: 4px; background: var(--surface-2); color: var(--ink-2); }
.st-contacted { background: var(--accent-soft); color: var(--warn-ink); }
.st-negotiating { background: var(--warn-soft); color: var(--warn-ink); }
.st-appointment { background: color-mix(in srgb, var(--fb) 16%, var(--surface)); color: var(--fb-ink); }
.st-purchased { background: var(--good-soft); color: var(--good-ink); }
.st-passed { background: var(--surface-2); color: var(--muted); }
.status-sel { font-size: .76rem; padding: .35rem .4rem; margin-left: auto; }
.select.sm { font-size: .74rem; padding: .3rem .4rem; }

/* ---------- pipeline view ---------- */
.pipeline { max-width: 1320px; margin: 0 auto; padding: 1.2rem 1.25rem 3rem; display: flex; flex-direction: column; gap: 1.4rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .8rem; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem; box-shadow: var(--shadow); }
.kpi-n { font-family: "Titillium Web", sans-serif; font-weight: 700; font-size: 1.55rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi.good .kpi-n { color: var(--good-ink); }
.kpi-l { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }
.kpi-s { font-size: .72rem; color: var(--ink-2); margin-top: .15rem; }
.lanes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.4rem; }
@media (max-width: 1100px) { .lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .lanes { grid-template-columns: 1fr; } }
.lane { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;  display: flex; flex-direction: column; }
.lane-h { display: flex; justify-content: space-between; align-items: center; padding: .55rem .75rem;
  font-family: "Titillium Web", sans-serif; font-weight: 700; font-size: .8rem;
  letter-spacing: .05em; text-transform: uppercase; }
.lane-n { font-family: "IBM Plex Mono", monospace; font-size: .8rem; }
.lane-body { display: flex; flex-direction: column; gap: .5rem; padding: .55rem; min-height: 3rem;  flex: 1; min-height: 120px; }
.lane-empty { color: var(--muted); text-align: center; padding: .8rem 0; font-size: .85rem; }
.lane-row { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .6rem; display: flex; flex-direction: column; gap: .4rem; box-shadow: var(--shadow); }
.lr-top { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.lr-src { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.lr-src.src-craigslist { background: var(--cl); }
.lr-src.src-carscom { background: var(--cc); }
.lr-src.src-facebook { background: var(--fb); }
.lr-title { font-size: .84rem; font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; border-bottom: none;  padding-block: .2rem; min-height: 24px; }
.lr-title:hover { color: var(--accent-ink, var(--accent)); }
.lr-money { font-size: .8rem; font-weight: 600; flex: none; }
.lr-mid { display: flex; gap: .7rem; font-size: .72rem; color: var(--muted); flex-wrap: wrap; }
.lr-vin { letter-spacing: .02em; }
.lr-ctl { display: flex; gap: .35rem; flex-wrap: wrap; }
.lr-price { max-width: 90px; }
.lr-note { width: 100%; }
.board h2 { font-family: "Titillium Web", sans-serif; font-size: 1.05rem; margin: 0 0 .5rem; }
.board table { border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-width: 320px; }
.board th { text-align: left; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: .5rem .8rem; background: var(--surface-2); }
.board td { padding: .5rem .8rem; border-top: 1px solid var(--line); font-size: .85rem; }
@media (max-width: 900px) { .views { order: 3; width: 100%; justify-content: center; } .topbar { flex-wrap: wrap; } }

/* manual VIN entry */
.vin-entry { display: flex; gap: .35rem; margin-top: .4rem; }
.vin-entry input { flex: 1; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.sm-save { flex: none; }

/* JIG: raised surfaces read as lit material, not flat fills — a top inset
   light-edge on every elevated dark plane. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .tabs,
  :root:not([data-theme="light"]) .kpi,
  :root:not([data-theme="light"]) .lane,
  :root:not([data-theme="light"]) .vin-chip,
  :root:not([data-theme="light"]) .act,
  :root:not([data-theme="light"]) .search,
  :root:not([data-theme="light"]) .select,
  :root:not([data-theme="light"]) .lane-row {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), var(--shadow, none);
  }
}
:root[data-theme="dark"] .card, :root[data-theme="dark"] .tabs,
:root[data-theme="dark"] .kpi, :root[data-theme="dark"] .lane,
:root[data-theme="dark"] .vin-chip, :root[data-theme="dark"] .act,
:root[data-theme="dark"] .search, :root[data-theme="dark"] .select,
:root[data-theme="dark"] .lane-row {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), var(--shadow, none);
}

/* Mobile: every text control at 16px so iOS never zooms on focus, and every
   control tall enough to hit (WCAG 2.5.8). Declared last so it wins. */
@media (max-width: 640px) {
  .status-sel, .select.sm, .vin-entry input, .lr-note, .lr-stage, .lr-buyer,
  .search, .select, input, select, textarea { font-size: 16px; }
  .status-sel, .select.sm, .vin-entry input, .lr-note, .lr-stage, .lr-buyer { min-height: 44px; }
  /* the source-tab row scrolls: fade the cut edge so it reads as scrollable */
  .tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
          scroll-snap-type: x proximity; }
  .tab { scroll-snap-align: start; }
  /* stat strip: a real grid, not a ragged wrap with orphans */
  .strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 .5rem; }
  .stat { border-right: none; margin-right: 0; padding-right: .5rem; }
}

/* A VIN that disagrees with its listing: warn, never quietly approve. */
.vin-chip.suspect { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.vin-chip.suspect .tick { color: var(--warn-ink); }

/* ---------- who's signed in ---------- */
.whoami { display: flex; align-items: center; gap: .45rem; padding-right: .2rem; }
.who-name { font-size: .82rem; color: var(--chrome-ink); font-weight: 600; }
.who-out {
  background: none; border: none; color: var(--chrome-sub); font-size: .72rem; cursor: pointer;
  text-decoration: underline; padding: .35rem .1rem; min-height: 32px;
}
.who-out:hover { color: var(--chrome-ink); }

/* ---------- saved searches row ---------- */
.saved { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; width: 100%; margin-top: .55rem;
         padding-top: .55rem; border-top: 1px solid var(--line); }
.act.sm { padding: .32rem .55rem; font-size: .74rem; }
.select.narrow { max-width: 118px; }
@media (max-width: 640px) {
  .saved { gap: .4rem; }
  .select.narrow { max-width: none; flex: 1 1 44%; }
  .whoami { display: none; }
}

/* ---------- sign-in ------------------------------------------------------
   Faulkner navy field with a faint ledger grid (the desk this tool sits on),
   a card edged in their cyan, and their own "to be sure" line as the signature. */
.auth-gate {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: 1.5rem; background: var(--chrome);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(45,199,255,.16), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 34px);
}
.auth-card {
  width: min(392px, 100%);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-top: 3px solid var(--accent-bright);
  border-radius: 14px; padding: 2rem 1.9rem 1.5rem;
  box-shadow: 0 24px 60px -20px rgba(4, 14, 38, .55), 0 2px 6px rgba(4, 14, 38, .2);
  display: flex; flex-direction: column;
}

/* the Faulkner lockup, balanced: short rules that hug the word */
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin: 0; }
.auth-brand .wm-name {
  font-family: "Playfair Display", Georgia, serif; font-weight: 700;
  font-size: 2rem; line-height: 1; letter-spacing: -.005em; color: var(--ink);
}
.auth-brand .wm-sub {
  display: flex; align-items: center; gap: .55rem;
  font-family: "Titillium Web", sans-serif; font-weight: 600;
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted); padding-left: .3em;   /* optical: balance the tracking */
}
.auth-brand .wm-sub::before, .auth-brand .wm-sub::after {
  content: ""; height: 1px; width: 26px; background: currentColor; opacity: .55;
}

.auth-lede {
  margin: 1.15rem 0 1.3rem; text-align: center;
  color: var(--ink-2); font-size: .93rem; line-height: 1.45;
}
.auth-f { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; }
.auth-f > span {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.auth-f input {
  font: inherit; font-size: 16px; padding: .7rem .8rem; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  min-height: 46px; width: 100%; transition: border-color .14s, box-shadow .14s;
}
.auth-f input:hover { border-color: var(--line-2); }
.auth-f input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-f.has-toggle { position: relative; }
.auth-f.has-toggle input { padding-right: 3.4rem; }
.pw-toggle {
  position: absolute; right: .45rem; bottom: .45rem; height: 36px; min-width: 44px;
  background: none; border: none; cursor: pointer; border-radius: 7px;
  font: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.pw-toggle:hover { color: var(--accent); background: var(--surface-2); }

.auth-err {
  margin: 0 0 .85rem; color: #8C1D18; background: #FCEEEC;
  border: 1px solid #F3C9C4; border-radius: 8px; padding: .6rem .7rem; font-size: .84rem;
}
/* The dark variant must sit INSIDE the media query, otherwise
   :not([data-theme="light"]) also matches the un-stamped light default. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth-err {
    color: #FFB4AB; background: #33201E; border-color: #5A2E2A;
  }
}
:root[data-theme="dark"] .auth-err {
  color: #FFB4AB; background: #33201E; border-color: #5A2E2A;
}

.btn-go {
  background: var(--accent); color: var(--on-accent); justify-content: center;
  min-height: 48px; font-size: .96rem; font-weight: 700; letter-spacing: .01em;
  border-radius: 9px; width: 100%; margin-top: .15rem;
}
.btn-go:hover { background: var(--accent-bright); color: var(--on-accent); }
.btn-quiet { background: transparent; color: var(--muted); justify-content: center; width: 100%; margin-top: .4rem; }

/* their own tagline, quietly, as the signature line */
.auth-foot {
  margin: 1.35rem -1.9rem -1.5rem; padding: .8rem 1.9rem .9rem;
  border-top: 1px solid var(--line); background: var(--surface-2);
  border-radius: 0 0 12px 12px; text-align: center;
}
.auth-sig {
  margin: 0; font-family: "Playfair Display", Georgia, serif; font-style: italic;
  font-size: .82rem; color: var(--muted);
}
.auth-hint { margin: .35rem 0 0; font-size: .72rem; color: var(--muted); line-height: 1.5; }
.auth-hint code { background: var(--surface); border: 1px solid var(--line); padding: .05em .35em; border-radius: 4px; }

@media (max-width: 480px) {
  .auth-card { padding: 1.6rem 1.25rem 1.1rem; border-radius: 12px; }
  .auth-foot { margin: 1.2rem -1.25rem -1.1rem; padding: .75rem 1.25rem .8rem; }
  .auth-brand .wm-name { font-size: 1.7rem; }
}