/* OEM Purist — dark blueprint. Blue and white brand, amber accent from the hero. */

:root{
  --ink:#040c1b;
  --ink-2:#071431;
  --panel:#0b1c3d;
  --panel-2:#0e2350;
  --line:rgba(126,178,255,.20);
  --line-strong:rgba(126,178,255,.42);
  --blue:#1668e3;
  --blue-bright:#3f9bff;
  --blue-glow:rgba(63,155,255,.25);
  --white:#eef5ff;
  --dim:#9db6dd;
  --dimmer:#6f89b4;
  --amber:#ffb020;
  --amber-soft:rgba(255,176,32,.14);
  --good:#31d68a;
  --thin:#f5a524;
  --bad:#ff5d73;
  --radius:14px;
  --display:"Avenir Next Condensed","Helvetica Neue Condensed Bold","HelveticaNeue-CondensedBold","Arial Narrow",system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--body);
  background-color:#040c1b;
  background-image:
    linear-gradient(rgba(126,178,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,178,255,.045) 1px,transparent 1px),
    radial-gradient(1100px 620px at 76% 0%,rgba(28,84,168,.55) 0%,transparent 62%),
    linear-gradient(180deg,#0a1f45 0%,#050f26 420px,#040c1b 900px);
  background-repeat:repeat,repeat,no-repeat,no-repeat;
  background-size:44px 44px,44px 44px,auto,auto;
  color:var(--white);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  min-height:100vh;
  min-height:100dvh;              /* iOS: dvh excludes the collapsing address bar */
  overflow-x:hidden;
  -webkit-tap-highlight-color:rgba(255,176,32,.22);
  -webkit-font-smoothing:antialiased;
}
/* notch and home indicator on iPhone */
.wrap{padding-left:max(18px,env(safe-area-inset-left));
      padding-right:max(18px,env(safe-area-inset-right))}
.topbar{padding-left:max(18px,env(safe-area-inset-left));
        padding-right:max(18px,env(safe-area-inset-right))}
html{background:#040c1b}

a{color:inherit;text-decoration:none;touch-action:manipulation}
button,.btn,input,select,textarea{touch-action:manipulation}
:focus{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}

/* ------------------------------------------------------------ chrome */
.wrap{max-width:1180px;margin:0 auto;padding:0 18px 96px}

header.top{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,rgba(4,12,27,.96),rgba(4,12,27,.82));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
/* faint hazard striping in the header */
header.top::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.055;
  background:repeating-linear-gradient(135deg,var(--amber) 0 14px,transparent 14px 28px);
}
.topbar{max-width:1180px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:14px;position:relative}
.logo{font-family:var(--display);font-size:23px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.logo b{color:var(--amber);font-weight:700}
.logo span{color:var(--white)}
.tagline{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dimmer);margin-left:auto;white-space:nowrap}
.toplinks{display:flex;gap:8px;margin-left:auto}
.toplinks a{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:7px 13px;
  display:inline-flex;align-items:center;min-height:34px;
}
.toplinks a:hover,.toplinks a.on{color:var(--ink);background:var(--amber);border-color:var(--amber);font-weight:700}

nav.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:16px 0 22px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer)}
nav.crumbs a{color:var(--dim);border-bottom:1px solid transparent;padding-bottom:2px}
nav.crumbs a:hover{color:var(--amber);border-color:var(--amber)}
nav.crumbs .sep{color:var(--line-strong)}
nav.crumbs .here{color:var(--white)}

h1{font-family:var(--display);font-size:clamp(30px,5.2vw,52px);letter-spacing:.03em;line-height:1.02;margin:0 0 8px;text-transform:uppercase}
h2{font-family:var(--display);font-size:22px;letter-spacing:.1em;text-transform:uppercase;margin:36px 0 14px;color:var(--white)}
h2.region{display:flex;align-items:baseline;gap:14px;font-size:26px;
  border-bottom:1px solid var(--line);padding-bottom:10px;margin:42px 0 18px}
h2.region::before{content:"";width:5px;height:22px;background:var(--amber);border-radius:2px;flex:none}
h2.region span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dimmer);
  text-transform:uppercase;margin-left:auto;font-variant-numeric:tabular-nums}
.sub{color:var(--dim);font-size:15px;margin:0 0 26px;max-width:62ch;line-height:1.55}
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--amber);margin:0 0 10px;font-weight:700}

/* ------------------------------------------------------------ hero */
/* Edge to edge, sitting directly under the header and outside the centred
   column. Copy is banded at the top and bottom so the middle of the frame,
   where the cars are, is never covered. */
.hero{position:relative;width:100%;overflow:hidden;background:#061530;
  border-bottom:1px solid var(--line);display:flex;flex-direction:column}
.hero img{width:100%;display:block;max-height:74vh;object-fit:cover;
  object-position:50% 46%;opacity:.95}
.hero .band{position:absolute;left:0;right:0;display:flex;flex-direction:column;
  align-items:center;text-align:center;padding:clamp(20px,3.2vw,44px) clamp(18px,5vw,64px);
  pointer-events:none}
.hero .band.top{top:0;background:linear-gradient(180deg,rgba(4,12,27,.92) 0%,rgba(4,12,27,.66) 46%,transparent 100%)}
.hero .band.bottom{bottom:0;background:linear-gradient(0deg,rgba(4,12,27,.94) 0%,rgba(4,12,27,.72) 48%,transparent 100%)}
.hero h1{margin:0;text-shadow:0 2px 34px rgba(0,0,0,.75);
  font-size:clamp(34px,5.2vw,74px);letter-spacing:.02em;line-height:1}
.hero .band.bottom p{margin:0;max-width:74ch;color:#d9e8ff;
  font-size:clamp(13.5px,1.25vw,18px);line-height:1.6;
  text-shadow:0 2px 20px rgba(0,0,0,.85)}
.hero .band.bottom b{color:var(--amber);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap}
/* the hero supplies the gap to the first heading */
h2.firsth2{margin-top:30px}

/* On a phone the frame is too short to hold copy at both ends without sitting
   on the cars, so the description drops below the image instead of over it. */
@media(max-width:700px){
  .hero img{height:300px;max-height:none;object-position:30% 50%}
  .hero .band{padding:18px 16px}
  .hero .band.top{background:linear-gradient(180deg,rgba(4,12,27,.96) 0%,rgba(4,12,27,.66) 58%,transparent 100%)}
  .hero .band.bottom{position:static;background:rgba(4,12,27,.55);
    border-top:1px solid var(--line);padding:20px 18px 24px}
  .hero .band.bottom p{text-shadow:none}
}

/* ------------------------------------------------------------ cards */
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.brands{grid-template-columns:repeat(3,1fr)}
.grid.cars{grid-template-columns:repeat(2,1fr)}
@media(max-width:1100px){.grid.brands{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.grid.cars{grid-template-columns:1fr}}
@media(max-width:600px){.grid.brands{grid-template-columns:1fr}}
/* tablet portrait: two cards fit, but the tag needs a narrower row rail */
@media(min-width:701px) and (max-width:900px){
  .tag{grid-template-columns:96px 1fr}
  .tag .rownum b{font-size:46px}
  .tag .ymm{font-size:22px}
  .tag .money{font-size:24px}
  .tag .toplist{font-size:11.5px}
}

.card{
  position:relative;display:block;background:linear-gradient(160deg,var(--panel) 0%,var(--ink-2) 100%);
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
  overflow:hidden;
}
.card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 0 1px var(--blue-glow)}
.card h3{font-family:var(--display);font-size:24px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px}
.card .meta{font-size:13px;color:var(--dim);line-height:1.5}
.card .meta b{color:var(--white);font-weight:600}

/* yard cards */
.yardcard{padding:24px}
.yardcard .fee{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap}
.stat{font-family:var(--mono);font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
.stat b{display:block;font-family:var(--display);font-size:26px;color:var(--white);letter-spacing:.04em}

/* brand tiles */
.brand{display:flex;flex-direction:column;justify-content:space-between;min-height:172px;padding:26px 26px 22px}
.brand .name{font-family:var(--display);font-size:34px;letter-spacing:.04em;text-transform:uppercase;line-height:1.02}
.brand .count{font-family:var(--mono);font-size:13.5px;color:var(--dim);font-variant-numeric:tabular-nums;margin-top:14px}
.brand .tier{position:absolute;top:18px;right:20px;font-family:var(--mono);font-size:13px;color:var(--amber);opacity:.9}
.brand .bar{height:4px;border-radius:2px;background:var(--line);margin-top:14px;overflow:hidden}
.brand .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-bright))}

/* ------------------------------------------------------------ vehicle card = yard tag */
.tag{display:grid;grid-template-columns:118px 1fr;gap:0;padding:0;align-items:stretch}
.tag .rownum{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(255,176,32,.13),rgba(255,176,32,.04));
  border-right:1px dashed rgba(255,176,32,.42);
}
.tag .rownum span{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);opacity:.8}
.tag .rownum b{
  font-family:var(--display);font-size:58px;line-height:.95;color:var(--amber);
  font-variant-numeric:tabular-nums;text-shadow:0 0 26px rgba(255,176,32,.35);
}
.tag .body{padding:20px 22px}
.tag .ymm{font-family:var(--display);font-size:26px;letter-spacing:.04em;text-transform:uppercase;line-height:1.1}
.tag .ymm i{color:var(--dim);font-style:normal}
.tag .line{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.tag .money{font-family:var(--mono);font-size:28px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--good)}
.tag .money.thin{color:var(--thin)}
.tag .money.bad{color:var(--bad)}
.tag .money small{font-size:11px;color:var(--dimmer);font-weight:400;letter-spacing:.1em;text-transform:uppercase}
.tag .toplist{margin-top:10px;font-size:12px;color:var(--dim);line-height:1.6}
.tag .silhouette{position:absolute;right:-6px;bottom:-16px;width:190px;opacity:.075;pointer-events:none}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.chip{font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--line);color:var(--dim)}
.chip.fresh{color:var(--good);border-color:rgba(49,214,138,.4);background:rgba(49,214,138,.08)}
.chip.mid{color:var(--dim)}
.chip.stale{color:var(--thin);border-color:rgba(245,165,36,.42);background:rgba(245,165,36,.09)}
.chip.warn{color:var(--amber);border-color:rgba(255,176,32,.45);background:var(--amber-soft)}
.chip.est{color:var(--blue-bright);border-color:rgba(63,155,255,.4);background:rgba(63,155,255,.09)}
.chip.ver{color:var(--good);border-color:rgba(49,214,138,.45);background:rgba(49,214,138,.1);font-weight:700}

/* ------------------------------------------------------------ notices */
.notice{
  display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:14px 16px;margin:0 0 18px;
  border:1px solid rgba(255,176,32,.34);background:linear-gradient(180deg,rgba(255,176,32,.12),rgba(255,176,32,.05));
  font-size:13.5px;line-height:1.55;color:#ffe4b0;
}
.notice.blue{border-color:rgba(63,155,255,.32);background:rgba(63,155,255,.08);color:#cfe4ff}
.notice .mark{font-family:var(--display);font-size:18px;color:var(--amber);letter-spacing:.1em;flex:none}
.notice.blue .mark{color:var(--blue-bright)}

/* ------------------------------------------------------------ parts table */
.toolbar{
  display:flex;gap:20px;flex-wrap:wrap;align-items:center;
  background:linear-gradient(160deg,var(--panel),var(--ink-2));
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:18px;
  position:sticky;top:57px;z-index:30;
}
.toolbar label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:10px}
.toolbar input[type=range]{width:170px;accent-color:var(--amber);height:32px;
  background:transparent;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.toolbar input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;
  background:var(--line-strong)}
.toolbar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:50%;background:var(--amber);margin-top:-10px;
  border:none;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.toolbar input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:var(--line-strong)}
.toolbar input[type=range]::-moz-range-thumb{width:26px;height:26px;border:none;
  border-radius:50%;background:var(--amber)}
.toolbar input[type=checkbox]{width:26px;height:26px;accent-color:var(--amber);flex:none}
.toolbar label{min-height:44px}
.toolbar .val{font-family:var(--mono);color:var(--amber);font-size:14px;font-variant-numeric:tabular-nums;min-width:44px}
.shown{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dimmer);font-variant-numeric:tabular-nums;display:flex;gap:10px;align-items:center}
.shown a{color:var(--amber);border-bottom:1px solid rgba(255,176,32,.45);padding-bottom:1px}
.shown a[hidden]{display:none}
.total{margin-left:auto;text-align:right}
.total span{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer)}
.total b{font-family:var(--mono);font-size:27px;color:var(--good);font-variant-numeric:tabular-nums;font-weight:600}

.tablewrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:linear-gradient(180deg,rgba(11,28,61,.85),rgba(7,20,49,.85))}
table.parts{width:100%;border-collapse:collapse;font-size:14px}
table.parts thead th{
  text-align:left;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer);
  padding:12px 14px;border-bottom:1px solid var(--line);background:rgba(4,12,27,.6);white-space:nowrap;font-weight:600;
}
table.parts td{padding:13px 14px;border-bottom:1px solid rgba(126,178,255,.09);vertical-align:top}
table.parts tbody tr:hover{background:rgba(63,155,255,.06)}
table.parts tbody tr.loss{background:rgba(255,93,115,.035)}
table.parts tbody tr:last-child td{border-bottom:none}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.pname{font-weight:600;color:var(--white)}
.pcat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);margin-top:3px}
.pwarn{font-size:12px;color:var(--amber);margin-top:6px;line-height:1.45;max-width:44ch}
.profit{font-family:var(--mono);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.profit.good{color:var(--good)} .profit.thin{color:var(--thin)} .profit.bad{color:var(--bad)}
.range{font-family:var(--mono);font-size:11px;color:var(--dimmer);text-align:right;font-variant-numeric:tabular-nums;margin-top:3px}
.rowhide{display:none !important}

/* The parts table is the one you read standing at a car, so it becomes cards
   early, on tablet portrait as well as phones. The priority list is a wide
   comparison table: it keeps its columns and scrolls sideways until a phone,
   where columns stop being readable at all. */
@media(max-width:860px){
  table.parts:not(.walk) thead{display:none}
  table.parts:not(.walk),table.parts:not(.walk) tbody,
  table.parts:not(.walk) tr,table.parts:not(.walk) td{display:block;width:100%}
  table.parts:not(.walk) tr{border-bottom:1px solid var(--line);padding:12px 4px;position:relative}
  table.parts:not(.walk) td{border:none;padding:3px 12px}
  table.parts:not(.walk) td.num,table.parts:not(.walk) td.profit{text-align:left}
  table.parts:not(.walk) td[data-l]::before{content:attr(data-l);display:inline-block;
    min-width:104px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--dimmer)}
  table.parts:not(.walk) .range{text-align:left;padding-left:104px}
  table.parts:not(.walk) td.num[data-l]{display:flex;align-items:baseline;flex-wrap:wrap}
  table.parts:not(.walk) td.num[data-l] .range{padding-left:8px}
  .profit{font-size:22px}
  .toolbar{position:static}
  .titlerow{display:block}
  .viewtoggle{margin:14px 0 0}
  .total{margin-left:0;text-align:left;width:100%}
}

/* ------------------------------------------------------------ view toggle + walk list */
.titlerow{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.viewtoggle{display:flex;gap:6px;margin-left:auto;margin-bottom:6px}
.viewtoggle a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px}
.viewtoggle a:hover{border-color:var(--line-strong);color:var(--white)}
.viewtoggle a.on{background:var(--amber);border-color:var(--amber);color:#1a1000;font-weight:700}

table.parts.walk td{vertical-align:middle}
table.parts.walk th:nth-child(2),table.parts.walk td:nth-child(2){width:24%;min-width:186px}
table.parts.walk th:nth-child(4),table.parts.walk td:nth-child(4){width:20%;min-width:148px}
table.parts.walk th,table.parts.walk td{padding-left:11px;padding-right:11px}
table.parts.walk .vlink{white-space:nowrap}
table.parts.walk .pcat{white-space:nowrap}
table.parts.walk .pri{font-family:var(--display);font-size:26px;color:var(--dimmer);
  width:78px;line-height:1}
table.parts.walk tbody tr:nth-child(-n+3) .pri{color:var(--amber)}
table.parts.walk .vlink{font-family:var(--display);font-size:19px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--white)}
table.parts.walk .vlink:hover{color:var(--amber)}
table.parts.walk .rownum-cell{font-family:var(--display);font-size:32px;color:var(--amber);
  font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(255,176,32,.3)}
table.parts.walk .margin{color:var(--good);font-weight:600}
table.parts.walk .sec{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dimmer);margin-top:2px}
table.parts.walk td.num{font-size:13.5px}

/* ------------------------------------------------------------ forms / admin */
form.stack{display:grid;gap:14px;max-width:760px}
.field{display:grid;gap:6px}
.field label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
input[type=text],input[type=number],input[type=date],input[type=password],select,textarea{
  background:rgba(4,12,27,.65);border:1px solid var(--line);color:var(--white);
  border-radius:10px;padding:12px 13px;font-size:16px;font-family:var(--body);width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue-bright);outline:none;box-shadow:0 0 0 3px var(--blue-glow)}
textarea{font-family:var(--mono);font-size:16px;min-height:190px;line-height:1.5}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  background:var(--amber);color:#1a1000;border:none;border-radius:10px;padding:13px 20px;
  font-family:var(--display);font-size:15px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--white);border:1px solid var(--line-strong)}
.btn.ghost:hover{border-color:var(--amber);color:var(--amber);filter:none}
.btn.blue{background:var(--blue);color:#fff}
.btn.wide{width:100%}
.btn.big{padding:20px;font-size:19px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

table.admin{width:100%;border-collapse:collapse;font-size:13.5px}
table.admin th{text-align:left;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);
  padding:10px;border-bottom:1px solid var(--line)}
table.admin td{padding:7px 10px;border-bottom:1px solid rgba(126,178,255,.08)}
table.admin input{padding:8px 10px;font-size:16px}   /* 16px stops iOS zooming on focus */
table.admin input.s{max-width:96px}
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}

ol.steps{color:var(--dim);font-size:14px;line-height:1.7;max-width:70ch;padding-left:22px}
ol.steps b{color:var(--white)}
ol.steps a{color:var(--amber);border-bottom:1px solid rgba(255,176,32,.4)}
pre.snippet{margin:0;padding:16px 18px;font-family:var(--mono);font-size:11.5px;
  line-height:1.55;color:#cfe4ff;white-space:pre;overflow-x:auto}

.flash{border-radius:10px;padding:13px 16px;margin-bottom:18px;font-size:14px;line-height:1.5;
  border:1px solid rgba(49,214,138,.4);background:rgba(49,214,138,.1);color:#bff5dc}
.flash.err{border-color:rgba(255,93,115,.45);background:rgba(255,93,115,.1);color:#ffd0d7}

/* ------------------------------------------------------------ yard mode */
body.yardmode{--radius:16px}
.yardmode .wrap{max-width:640px}
.big-target{
  display:block;padding:22px;margin-bottom:12px;border-radius:16px;
  background:linear-gradient(160deg,var(--panel),var(--ink-2));border:1px solid var(--line-strong);
}
.big-target:active{background:var(--panel-2)}
.big-target .ymm{font-family:var(--display);font-size:26px;letter-spacing:.04em;text-transform:uppercase}
.big-target .rn{font-family:var(--display);font-size:34px;color:var(--amber);float:right;line-height:1}
.pullrow{display:flex;gap:10px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.pullrow .g{flex:1;min-width:0}
.pullrow .n{font-weight:600}
.pullrow .s{font-size:12px;color:var(--dim);margin-top:3px}
.loginbox{max-width:420px;margin:14vh auto 0;background:linear-gradient(160deg,var(--panel),var(--ink-2));
  border:1px solid var(--line);border-radius:var(--radius);padding:34px}
.loginbox h1{font-size:34px;margin-bottom:6px}
.loginbox .sub{margin-bottom:20px}

.footnote{color:var(--dimmer);font-size:12px;line-height:1.6;margin-top:34px;border-top:1px solid var(--line);padding-top:16px}

/* narrow phones: keep the header on one line */
@media(max-width:560px){
  .wrap{padding:0 14px 88px}
  .topbar{padding:10px 14px;gap:10px}
  .logo{font-size:18px;letter-spacing:.1em}
  .toplinks{gap:6px}
  .toplinks a{padding:7px 10px;font-size:10px;letter-spacing:.08em;white-space:nowrap}
  nav.crumbs{padding:12px 0 16px;font-size:11px}
  h2{margin:28px 0 12px}
  .tag{grid-template-columns:84px 1fr}
  .tag .rownum b{font-size:42px}
  .tag .ymm{font-size:22px}
  .tag .money{font-size:24px}
  .brand{min-height:0;padding:20px}
  .brand .name{font-size:28px}
  h2.region{font-size:21px;margin:32px 0 14px}
  h2.region span{font-size:10px}
}
@media(max-width:380px){
  .logo{font-size:16px}
  .toplinks a{padding:6px 8px;font-size:9px}
}

/* phone: the priority list stacks, led by the priority number and the row */
@media(max-width:620px){
  table.parts.walk thead{display:none}
  table.parts.walk,table.parts.walk tbody,table.parts.walk tr,
  table.parts.walk td{display:block;width:100%}
  table.parts.walk tr{position:relative;padding:14px 14px 14px 62px;
    border-bottom:1px solid var(--line)}
  table.parts.walk td{border:none;padding:2px 0;text-align:left}
  table.parts.walk td:nth-child(2),table.parts.walk td:nth-child(4){width:auto;min-width:0}
  table.parts.walk .pri{position:absolute;left:12px;top:14px;width:auto;font-size:30px;
    color:var(--amber)}
  table.parts.walk .rownum-cell{font-size:20px;display:flex;align-items:baseline;gap:8px}
  table.parts.walk .rownum-cell::before{content:"Row";font-family:var(--body);font-size:10px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer)}
  table.parts.walk .sec{margin-top:0}
  table.parts.walk td[data-l]:not(.rownum-cell):not(.pri)::before{content:attr(data-l);
    display:inline-block;min-width:118px;padding-right:10px;font-size:10px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);
    vertical-align:baseline}
  /* the car name is the heading of the card, it needs no label */
  table.parts.walk td[data-l="Vehicle"]:not(.pri):not(.rownum-cell)::before{display:none}
  table.parts.walk td:nth-child(2){margin-bottom:6px}
  table.parts.walk .vlink{white-space:normal;font-size:21px;display:block;line-height:1.1}
  table.parts.walk td:nth-child(2) .pcat{margin-top:4px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}
.fade{animation:fade .22s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* bright sun: bump contrast, kill the soft glows */
@media (prefers-contrast:more){
  :root{--dim:#cfe0f8;--dimmer:#aabfe0;--line:rgba(150,195,255,.4)}
  .card,.tablewrap,.toolbar{background:#040c1b}
}