/* Layout: a showroom desk. Sticky bar, tabbed workspace, dense tables, slide-over deal jacket. Plate blue + tail-light red. */
:root{
  --ground:#eef0f4; --panel:#ffffff; --panel-2:#f5f6f9; --ink:#151a24; --ink-2:#3c4556; --muted:#667085;
  --rule:#d6dae3; --rule-2:#e7e9ef;
  --plate:#1f3f93; --plate-2:#2c52b5; --plate-soft:#e5ebfa;
  --tail:#b8232f; --tail-soft:#fbe6e8;
  --amber:#946200; --amber-soft:#fbf0d6; --ok:#1f7a4f; --ok-soft:#dff2e8; --cool:#5b6474; --cool-soft:#eceef2;
  --shadow:0 1px 2px rgba(15,22,36,.06),0 14px 34px rgba(15,22,36,.14);
  --f-display:"Saira Semi Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ground:#0d1017; --panel:#151a23; --panel-2:#1a2029; --ink:#e6e9ef; --ink-2:#b8c0cd; --muted:#8a93a3; --rule:#2a313d; --rule-2:#222833;
  --plate:#9db6f5; --plate-2:#b9ccfa; --plate-soft:#1c2744; --tail:#f07c86; --tail-soft:#3a1a1e;
  --amber:#e8b64c; --amber-soft:#33280f; --ok:#6cc79a; --ok-soft:#14302a; --cool:#9aa3b2; --cool-soft:#232933;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.5); color-scheme:dark}}
:root[data-theme="dark"]{
  --ground:#0d1017; --panel:#151a23; --panel-2:#1a2029; --ink:#e6e9ef; --ink-2:#b8c0cd; --muted:#8a93a3; --rule:#2a313d; --rule-2:#222833;
  --plate:#9db6f5; --plate-2:#b9ccfa; --plate-soft:#1c2744; --tail:#f07c86; --tail-soft:#3a1a1e;
  --amber:#e8b64c; --amber-soft:#33280f; --ok:#6cc79a; --ok-soft:#14302a; --cool:#9aa3b2; --cool-soft:#232933;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.5); color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font:14px/1.45 var(--f-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--plate)}
:focus-visible{outline:2px solid var(--plate-2);outline-offset:2px}
.muted{color:var(--muted)} .mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.02em}

.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;align-items:center;gap:18px;padding:10px 20px;background:var(--panel);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:10px;flex:none;color:var(--plate);text-decoration:none}
.brand .logo{height:44px;width:auto;display:block}
.signin .brand .logo{height:52px}
.logo-d{display:none!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-l{display:none!important}:root:not([data-theme="light"]) .logo-d{display:block!important}}
:root[data-theme="dark"] .logo-l{display:none!important}:root[data-theme="dark"] .logo-d{display:block!important}
.radar-tag{font:700 11px/1 var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:var(--plate);border-left:1px solid var(--rule);padding:6px 0 6px 10px}
@media (max-width:640px){.brand .logo{height:34px}.radar-tag{display:none}}
.wm{display:flex;flex-direction:column;line-height:1}
.wm b{font:700 20px/1 var(--f-display);letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.wm span{font:600 11px/1.2 var(--f-display);letter-spacing:.22em;text-transform:uppercase;color:var(--tail);margin-top:3px}
.tabs{display:flex;gap:2px;overflow-x:auto;flex:1;min-width:0}
.tabs button{border:0;background:none;padding:8px 12px;border-radius:6px;color:var(--ink-2);cursor:pointer;white-space:nowrap;font-weight:500}
.tabs button:hover{background:var(--panel-2)}
.navsep{flex:none;width:1px;background:var(--rule);margin:6px 6px}
.tabs button.on{background:var(--plate-soft);color:var(--plate)}
.pill{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:var(--tail);color:var(--panel);font-size:11px;line-height:18px;text-align:center;font-weight:600}
.pill:empty{display:none}
.conn{font-size:12px;color:var(--muted);white-space:nowrap}

main{padding-block:18px 64px;padding-inline:20px;max-width:1440px;margin:0 auto}
.tab{display:none}.tab.on{display:block}
.head{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;justify-content:space-between;margin-bottom:12px}
.head h2{margin:0;font:700 24px/1.1 var(--f-display);letter-spacing:.01em;color:var(--ink)}
.head p{margin:4px 0 0;color:var(--muted);max-width:72ch}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.filters input,.filters select{height:36px;border:1px solid var(--rule);border-radius:6px;background:var(--panel);padding:0 10px;min-width:0;max-width:100%}
.filters input[type=search]{flex:1 1 240px}
.btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:1px solid var(--rule);border-radius:6px;background:var(--panel);cursor:pointer;font-weight:500;white-space:nowrap;color:var(--ink)}
.btn:hover{border-color:var(--plate-2)}
.btn.primary{background:var(--plate);border-color:var(--plate);color:var(--panel)}
.btn.primary:hover{background:var(--plate-2)}
.btn.sm{height:30px;padding:0 10px;font-size:13px}
.btn.danger{color:var(--tail)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:16px}
.stat{background:var(--panel);border:1px solid var(--rule-2);border-radius:8px;padding:11px 13px}
.stat .v{font:700 28px/1.05 var(--f-display);font-variant-numeric:tabular-nums}
.stat .l{font-size:12px;color:var(--muted);margin-top:2px}
.stat.alert .v{color:var(--tail)}

.strip{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding:10px 14px;border:1px dashed var(--rule);border-radius:8px;font-size:13px;color:var(--ink-2)}
.strip b{font-variant-numeric:tabular-nums}
.strip .lbl{font:700 12px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
.card{background:var(--panel);border:1px solid var(--rule-2);border-radius:10px;padding:14px 16px;min-width:0}
.card h3{margin:0 0 10px;font:700 17px/1.2 var(--f-display);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2)}

.tablewrap{background:var(--panel);border:1px solid var(--rule-2);border-radius:10px;overflow:auto}
.grid{width:100%;border-collapse:collapse}
.grid th{position:sticky;top:0;background:var(--panel-2);text-align:left;font:600 11.5px/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:9px 10px;border-bottom:1px solid var(--rule);white-space:nowrap}
.grid td{padding:9px 10px;border-bottom:1px solid var(--rule-2);vertical-align:top}
.grid tbody tr.click{cursor:pointer}
.grid tbody tr.click:hover{background:var(--panel-2)}
.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.b{font-weight:600}
.sub{font-size:12px;color:var(--muted)}
.nowrap{white-space:nowrap}
.empty{padding:28px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.more{text-align:center;margin:14px 0}

.chip{display:inline-block;padding:1px 7px;border-radius:4px;font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--cool-soft);color:var(--cool)}
.c-new{background:var(--plate-soft);color:var(--plate)} .c-used{background:var(--amber-soft);color:var(--amber)} .c-lease{background:var(--ok-soft);color:var(--ok)} .c-cpo{background:var(--plate-soft);color:var(--plate-2)}
.s-Notworked,.s-Notafit{background:var(--cool-soft);color:var(--cool)} .s-Received{background:var(--cool-soft);color:var(--cool)} .s-Contacted{background:var(--plate-soft);color:var(--plate)} .s-Quoted{background:var(--amber-soft);color:var(--amber)} .s-Bound{background:var(--ok-soft);color:var(--ok)} .s-Lost{background:var(--tail-soft);color:var(--tail)}
.g-Owed{background:var(--tail-soft);color:var(--tail)} .g-Paid{background:var(--ok-soft);color:var(--ok)} .g-Waived,.g-Notearned{background:var(--cool-soft);color:var(--cool)}
/* the vehicle's VIN as it reads through the windshield */
.vin{display:inline-block;font:500 11px/1 var(--f-mono);letter-spacing:.06em;padding:3px 5px;border:1px solid var(--rule);border-radius:3px;background:var(--panel-2);color:var(--ink-2);margin-top:3px}
.vin.bad{border-color:var(--tail);color:var(--tail)}

.bars{display:grid;gap:8px}
.barrow{display:grid;grid-template-columns:130px minmax(0,1fr) 44px;gap:10px;align-items:center;font-size:13px}
.track{height:12px;background:var(--panel-2);border-radius:3px;overflow:hidden}
.fill{height:100%;background:var(--plate);border-radius:3px}
.fill.lease{background:var(--ok)} .fill.used{background:var(--amber)}

.lead{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--rule-2);cursor:pointer}
.lead:last-child{border:0}
.rank{font:700 18px/1 var(--f-display);color:var(--muted);width:22px;text-align:right;font-variant-numeric:tabular-nums}
.lead .who{flex:1;min-width:0}
.lead .num{font:700 18px/1 var(--f-display);font-variant-numeric:tabular-nums}

.drawer{position:fixed;top:0;right:0;bottom:0;width:min(680px,100vw);background:var(--panel);box-shadow:var(--shadow);z-index:20;display:flex;flex-direction:column;border-left:1px solid var(--rule);padding-top:env(safe-area-inset-top,0px)}
.dhead{padding:16px 18px 10px;border-bottom:1px solid var(--rule-2);position:relative}
.dhead .x{position:absolute;right:10px;top:8px;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--muted)}
.dhead h3{margin:0 30px 3px 0;font:700 24px/1.15 var(--f-display);color:var(--ink)}
.dbody{padding:12px 18px calc(40px + env(safe-area-inset-bottom,0px));overflow:auto}
.scrim{position:fixed;inset:0;background:rgba(10,14,22,.35);z-index:19}
fieldset{border:1px solid var(--rule-2);border-radius:8px;padding:10px 12px 12px;margin:0 0 12px;min-width:0}
legend{font:700 12px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--plate);padding:0 6px}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.fgrid .full{grid-column:1/-1}
.f label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
.f input,.f select,.f textarea{width:100%;height:34px;border:1px solid var(--rule);border-radius:6px;background:var(--panel);padding:0 9px}
.f textarea{height:auto;min-height:70px;padding:7px 9px;resize:vertical}
.f .hint{font-size:11.5px;color:var(--muted);margin-top:3px}
.f .hint.bad{color:var(--tail)}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:13px;padding-top:6px}
.chk input{width:auto;height:auto;margin-top:2px}
.kv{display:grid;grid-template-columns:130px minmax(0,1fr);gap:5px 12px;font-size:13px;margin:0 0 10px}
.kv dt{color:var(--muted)}.kv dd{margin:0;overflow-wrap:anywhere}
.box{border:1px solid var(--rule-2);border-radius:8px;padding:10px 12px;margin:12px 0}
.box h4{margin:0 0 8px;font:700 12px/1 var(--f-display);text-transform:uppercase;letter-spacing:.14em;color:var(--plate)}
.warn{background:var(--amber-soft);border-left:3px solid var(--amber);padding:10px 12px;border-radius:0 6px 6px 0;font-size:13px}
.formbar{display:flex;gap:8px;flex-wrap:wrap;position:sticky;bottom:0;background:var(--panel);padding:10px 0 4px;border-top:1px solid var(--rule-2)}
.mini{border-collapse:collapse;width:100%;font-size:12.5px}
.mini th{position:sticky;top:0;background:var(--panel);text-align:left;color:var(--muted);font-weight:500;padding:4px 6px;border-bottom:1px solid var(--rule)}
.mini td{padding:5px 6px;border-bottom:1px solid var(--rule-2)}
.mini tr.click{cursor:pointer}.mini tr.click:hover{background:var(--panel-2)}
.hscroll{overflow-x:auto}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--panel);padding:10px 16px;border-radius:8px;box-shadow:var(--shadow);z-index:40;max-width:90vw}
.about{max-width:780px}
.about h3{font:700 19px/1.2 var(--f-display);margin:22px 0 6px}
.about p,.about li{max-width:70ch}
.about table{border-collapse:collapse;width:100%;background:var(--panel);border:1px solid var(--rule-2)}
.about td,.about th{padding:8px 10px;border-bottom:1px solid var(--rule-2);text-align:left;font-size:13px;vertical-align:top}
.gifthead{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.gifthead b{font:700 17px/1.2 var(--f-display)}
.owe{font:700 20px/1 var(--f-display);color:var(--tail);font-variant-numeric:tabular-nums}
@media (max-width:900px){.cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .top{flex-wrap:wrap;gap:8px;padding:10px 16px 8px}.tabs{order:3;flex-basis:100%}.conn{display:none}
  main{padding-inline:16px}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .kv{grid-template-columns:100px minmax(0,1fr)}
  .hide-m{display:none}
  .barrow{grid-template-columns:100px minmax(0,1fr) 36px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.signin{position:fixed;inset:0;z-index:50;background:var(--ground);display:flex;align-items:center;justify-content:center;padding-inline:16px}
.signin-card{width:min(420px,100%);background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:22px;box-shadow:var(--shadow)}
.signin-card h2{margin:6px 0 2px;font:700 24px/1.1 var(--f-display)}
.signin-card .f{margin-top:10px}
.conn a{color:var(--muted)}