/* Truck Search demo. STYLE.md, Tools column: warm paper, ink, one green primary, one poppy accent.
   Layout: header, a sticky filter bar, one brochure-band section per model with a grid of cards, and a window-sticker dialog. */
:root{
  --bg:#F1EADA; --surface:#FBF7EE; --ink:#2B2620; --muted:#6F6453; --line:#D9CCB0; --line2:#C4B08A;
  --accent:#4F7A3A; --accent-ink:#FBF7EE; --poppy:#B5452B; --ochre:#8A5E0F; --chip:#E6DCC6;
  /* truck plates: real paint colours, the same in both themes */
  --pk-white:#E8E6E1; --pk-silver:#B4B8BB; --pk-grey:#6B7074; --pk-black:#2E3135; --pk-red:#A3302A; --pk-blue:#2F5277; --pk-green:#5E6448; --pk-sand:#B9A580;
  --pk-line:#1C1A18; --pk-glass:#39434B; --pk-trim:#2A2B2C; --pk-tyre:#1F1F1F; --pk-tread:#3A3A3A; --pk-rim:#C9CCCE; --pk-rim-dark:#45484B;
  --pk-lamp:#EEF0EC; --pk-amber:#D98A2B; --pk-hook:#C8352B; --pk-shade:rgb(0 0 0 / .12); --pk-glint:rgb(255 255 255 / .14); --pk-halo:transparent; --pk-hi:rgb(255 255 255 / .28); --pk-shadow:rgb(0 0 0 / .14);
  --f-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --topo:url(../img/contours.svg);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1C1915; --surface:#26221C; --ink:#EDE6D6; --muted:#A39883; --line:#3A342A; --line2:#524A3B;
  --accent:#8DB378; --accent-ink:#17140F; --poppy:#E0765C; --ochre:#D9A848; --chip:#322D24;
  --pk-shadow:rgb(0 0 0 / .4); --pk-halo:rgb(237 230 214 / .22);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1C1915; --surface:#26221C; --ink:#EDE6D6; --muted:#A39883; --line:#3A342A; --line2:#524A3B;
  --accent:#8DB378; --accent-ink:#17140F; --poppy:#E0765C; --ochre:#D9A848; --chip:#322D24;
  --pk-shadow:rgb(0 0 0 / .4); --pk-halo:rgb(237 230 214 / .22);
  color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button,select,.tog,.chip{user-select:none;-webkit-user-select:none}

/* ---------- header: a neatline over the page ---------- */
.top{padding-top:20px;padding-bottom:18px}
.stamp{display:inline-block;margin:0 0 10px;padding:3px 8px 2px;border:1.5px solid var(--poppy);border-radius:2px;color:var(--poppy);
  font:600 14px/1.3 var(--f-display);letter-spacing:.14em;text-transform:uppercase}
h1{margin:0;font:700 clamp(36px,7vw,56px)/1 var(--f-display);letter-spacing:.04em;text-transform:uppercase}
.lede{margin:10px 0 0;max-width:66ch;color:var(--muted);font-size:17px}
.legend{display:flex;flex-wrap:wrap;gap:8px 12px;margin:16px 0 0;padding:0;list-style:none}

/* ---------- filter bar: sticky, scrolls sideways inside itself on phones ---------- */
.bar{position:sticky;top:0;z-index:5;background:var(--bg);border-top:3px double var(--line2);border-bottom:3px double var(--line2);padding-top:env(safe-area-inset-top,0px)}
.bar-in{display:flex;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none;padding-block:8px}
.bar-in::-webkit-scrollbar{display:none}
.chips{display:flex;gap:6px;flex:none}
.chip,.sel select,.tog{min-height:44px;border:1.5px solid var(--line2);border-radius:2px;background:var(--surface);color:var(--ink);cursor:pointer}
.chip{display:inline-flex;align-items:center;gap:7px;flex:none;padding:0 12px;font:600 16px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.chip b{font:500 14px/1 var(--f-mono);letter-spacing:0;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip[aria-pressed="true"] b{color:inherit}
.sel{flex:none;position:relative}
.sel select{appearance:none;-webkit-appearance:none;padding:0 34px 0 12px;font:600 16px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.sel::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;margin-top:-6px;border:solid var(--ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);pointer-events:none}
.tog{display:inline-flex;align-items:center;gap:8px;flex:none;padding:0 12px;font:600 16px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tog input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.tog:has(input:checked){border-color:var(--ink)}
.tog:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.tog input:focus-visible{outline:none}

/* ---------- model sections: NPS brochure bands ---------- */
main{padding-bottom:8px}
section{margin-top:28px;scroll-margin-top:72px}
.band{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px;padding:7px 12px 6px;background:var(--ink);color:var(--bg);border-radius:2px}
.band h2{margin:0;font:700 26px/1.1 var(--f-display);letter-spacing:.1em;text-transform:uppercase}
.band span{font:500 14px/1 var(--f-mono)}
.empty{margin:0;color:var(--muted);font-style:italic}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.card{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:2px;color:inherit;text-decoration:none}
.card:hover{border-color:var(--line2)}
.card:hover .name{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.art{position:relative;padding:12px 10px 4px;border-bottom:1.5px solid var(--line);overflow:hidden}
.art::before{content:"";position:absolute;inset:0;background:var(--accent);opacity:.2;pointer-events:none;
  -webkit-mask:var(--topo) var(--tp,0 0)/900px auto repeat;mask:var(--topo) var(--tp,0 0)/900px auto repeat}
.art svg{position:relative}
.body{display:flex;flex-direction:column;gap:9px;flex:1;padding:12px 14px 14px}
.name{margin:0;font:700 23px/1.1 var(--f-display);letter-spacing:.02em}
.name .trim{font-weight:600;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:2px 18px;margin:0}
.stats dt{font:600 13px/1.2 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stats dd{margin:0;font:500 17px/1.3 var(--f-mono)}
.loc{margin:0}
.notes{margin:0;color:var(--muted)}

/* ---------- the truck plates (drawn per truck by js/pickup.js) ---------- */
.pk{display:block;width:100%;height:auto}

/* ---------- status tags: green outline for ok, ochre outline for warn, solid poppy for bad; the mark's shape carries the meaning too ---------- */
.tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:4px 9px 3px;border:1.5px solid currentColor;border-radius:2px;
  font:600 15px/1.2 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.tag::before{content:"";flex:none;width:9px;height:9px;box-sizing:border-box}
.tag.ok{color:var(--accent)} .tag.ok::before{border-radius:50%;background:currentColor}
.tag.warn{color:var(--ochre)} .tag.warn::before{border-radius:50%;border:2px solid currentColor}
.tag.bad{color:var(--accent-ink);background:var(--poppy);border-color:var(--poppy)} .tag.bad::before{background:currentColor}
.tag.store{color:var(--muted)} .tag.store::before{border-radius:50%;background:currentColor}

/* ---------- footer ---------- */
.foot{margin-top:40px;margin-bottom:40px}
.foot-in{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-top:16px;border-top:3px double var(--line2);color:var(--muted)}
.foot p{margin:0 0 8px;max-width:72ch}
.foot a{display:inline-block;padding-block:10px;font:500 15px/1.2 var(--f-mono)}
/* light/dark follows the device; this half-filled dot is a quiet override */
.theme{flex:none;width:44px;height:44px;margin:-12px -12px 0 0;padding:0;border:0;background:none;cursor:pointer;opacity:.4}
.theme::before{content:"";display:block;width:16px;height:16px;margin:auto;border:1.5px solid var(--muted);border-radius:50%;background:linear-gradient(90deg,var(--muted) 50%,transparent 50%)}
.theme:hover,.theme:focus-visible{opacity:1}

/* ---------- window sticker ---------- */
.sticker{width:calc(100% - 32px);max-width:640px;max-height:calc(100dvh - 32px);padding:0;border:0;background:transparent;color:var(--ink)}
.sticker::backdrop{background:rgb(0 0 0 / .5)}
.st-frame{display:flex;flex-direction:column;max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;background:var(--surface);border:5px double var(--ink);border-radius:2px}
.st-band{position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;gap:12px;padding:10px 6px 10px 16px;background:var(--ink);color:var(--surface)}
.st-band div{flex:1;min-width:0}
.st-id{margin:0 0 2px;font:500 13px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.st-band h2{margin:0;font:700 28px/1.05 var(--f-display);letter-spacing:.04em;text-transform:uppercase}
.st-x{flex:none;width:44px;height:44px;border:0;background:none;color:inherit;font:400 32px/1 var(--f-body);cursor:pointer}
.st-x:focus-visible{outline-color:var(--surface);outline-offset:-4px}
.st-art{position:relative;padding:18px 28px 6px;border-bottom:1.5px solid var(--line);overflow:hidden}
.st-art::before{content:"";position:absolute;inset:0;background:var(--accent);opacity:.2;pointer-events:none;
  -webkit-mask:var(--topo) var(--tp,0 0)/900px auto repeat;mask:var(--topo) var(--tp,0 0)/900px auto repeat}
.st-art svg{position:relative;max-width:520px;margin:0 auto}
.st-main{display:grid;gap:18px;padding:16px}
.st-price{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding-bottom:12px;border-bottom:3px double var(--line2)}
.lbl{font:600 14px/1.2 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.st-price b{font:500 34px/1 var(--f-mono)}
.spec{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px 18px;margin:0}
.spec dd{margin:2px 0 0;font:500 17px/1.3 var(--f-mono)}
.st-main h3{margin:0 0 8px;font:700 18px/1.2 var(--f-display);letter-spacing:.12em;text-transform:uppercase;border-bottom:1.5px solid var(--line);padding-bottom:4px}
.st-main p{margin:8px 0 0}
.st-main ul{margin:0;padding-left:20px}
.st-demo{padding:12px 14px;border:1.5px solid var(--line2);border-radius:2px;background:var(--bg)}
.st-demo p{margin:0}
.st-nav{position:sticky;bottom:0;background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px 14px;border-top:1.5px solid var(--line)}
.st-nav span{font:500 14px/1 var(--f-mono);color:var(--muted)}
.btn{min-height:44px;padding:0 14px;border:1.5px solid var(--line2);border-radius:2px;background:var(--surface);color:var(--ink);cursor:pointer;
  font:600 16px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.btn:hover:not(:disabled){border-color:var(--ink)}
.btn:disabled{opacity:.4;cursor:default}

@media (max-width:600px){
  .sticker{width:100%;max-width:100%;height:calc(100dvh - 24px);max-height:none;margin:auto 0 0}
  .st-frame{height:100%;max-height:none;border-bottom:0;border-radius:2px 2px 0 0}
  .st-nav{margin-top:auto;padding-bottom:max(14px,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:no-preference){
  .sticker[open]{animation:fade .18s ease-out}
  .sticker[open]::backdrop{animation:fade .18s ease-out}
}
@keyframes fade{from{opacity:0}}