/* ===========================================================================
   FITSPEC — the whole visual system. Every page links this file and nothing else.

   Identity: expedition instrument panel. Olive-black ground, bone text, one
   hazard-orange accent, monospace for anything measured (counts, prices, labels)
   and sans for anything read. Nothing is rounded much; nothing glows.

   Structure of this file:
     1. tokens          6. product cards + image wells
     2. base + masthead 7. search app (index.html)
     3. prose pages     8. vehicle landing pages
     4. buttons/badges  9. footer
     5. notices        10. motion + print
   =========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */
:root{
  --ground:#14170f; --panel:#1b1f16; --panel-2:#222719; --edge:#2f3626; --edge-2:#414a33;
  --bone:#e9e5d8; --bone-2:#b3b3a1; --bone-3:#8b907d;
  --hazard:#e4622e; --hazard-ink:#ff7a45;
  --hazard-fill:#e4622e;  /* hazard as a SOLID fill behind dark text. Fixed across both
                             themes: the light-theme --hazard darkens to #c14a1c, which
                             drops that pairing to 3.77:1 — under AA on a button and on
                             the one banner that must always be readable. */
  --ok:#7fae56; --maybe:#d3a03c; --unk:#8b907d;

  /* Product photography sits on a WHITE ground in both themes. Merchant feed
     images are overwhelmingly white-background JPEGs, so anything other than
     white leaves a visible rectangle inside the well. White lets the subject
     float and is what the photos were shot for. */
  --shot:#ffffff; --shot-edge:#e2e0d6; --shot-ink:#8a8f7d;

  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --r:3px;
  --pad:clamp(14px,3vw,28px);
}
@media (prefers-color-scheme:light){:root{
  --ground:#e6e4da; --panel:#f3f1e9; --panel-2:#eae7dc; --edge:#cfcbba; --edge-2:#b3ae99;
  --bone:#1a1d14; --bone-2:#4c5142; --bone-3:#616655;
  --hazard:#c14a1c; --hazard-ink:#a83f16;
  /* --hazard-fill deliberately NOT overridden here — see the note above. */
  --ok:#4b7a2c; --maybe:#8a651a; --unk:#616655;
  --shot:#ffffff; --shot-edge:#d9d5c8; --shot-ink:#8a8f7d;
}}

/* ------------------------------------------------------ 2. base + masthead */
*{box-sizing:border-box}
/* `display` on a component silently beats the hidden attribute, which is a
   long-standing trap — .wrap sets display:grid, so [hidden] did nothing. */
[hidden]{display:none!important}
body{margin:0;background:var(--ground);color:var(--bone);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;min-height:100vh;
  background-image:repeating-linear-gradient(115deg,transparent 0 38px,rgba(127,132,113,.045) 38px 39px)}
a{color:var(--hazard-ink)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--hazard);outline-offset:2px}

.mast{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px var(--pad);
  border-bottom:1px solid var(--edge);background:var(--panel)}
.brand{font-size:1.2rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;display:flex;
  align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand .mk{width:13px;height:13px;background:var(--hazard);transform:skewX(-14deg)}
.navlinks{margin-left:auto;display:flex;gap:18px;font-size:.83rem;flex-wrap:wrap}
.navlinks a{color:var(--bone-2);text-decoration:none}
.navlinks a:hover{color:var(--hazard-ink)}

/* glyphs — inherit currentColor and size from the box they sit in */
.gly{width:1em;height:1em;flex:none;color:inherit}

/* ------------------------------------------------------------ 3. prose pages */
.page{max-width:900px;margin:0 auto;padding:clamp(22px,4vw,44px) var(--pad) 60px}
.page h1{font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 10px;text-wrap:balance}
.page h2{font-size:clamp(1.05rem,2.2vw,1.35rem);margin:38px 0 12px;letter-spacing:-.01em;text-wrap:balance;
  padding-top:16px;border-top:1px solid var(--edge)}
.page h3{font-size:1rem;margin:22px 0 8px}
.page p,.page li{line-height:1.65;color:var(--bone-2);max-width:70ch}
.page strong{color:var(--bone)}
.page ol,.page ul{padding-left:20px}
.page li{margin-bottom:7px}
.lede{font-size:1.04rem;color:var(--bone-2)}
.crumbs{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--bone-3);margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--bone-3);text-decoration:none}
.crumbs a:hover{color:var(--hazard-ink)}
.updated{margin-top:40px;padding-top:16px;border-top:1px solid var(--edge);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bone-3)}

/* stat strip on landing pages */
.pstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px;margin:20px 0 8px}
.pstats div{border:1px solid var(--edge);border-left:3px solid var(--hazard);border-radius:var(--r);
  padding:11px 13px;background:var(--panel)}
.pstats b{display:block;font-family:var(--mono);font-size:1.35rem;font-variant-numeric:tabular-nums;color:var(--bone)}
.pstats span{font-family:var(--mono);font-size:.65rem;letter-spacing:.11em;text-transform:uppercase;color:var(--bone-3)}

/* ------------------------------------------------------- 4. buttons/badges */
.cta-line{margin:18px 0 6px}
.cta{display:inline-block;background:var(--hazard-fill);color:#12140e;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;font-size:.78rem;padding:12px 18px;border-radius:var(--r);text-decoration:none}
.cta:hover{filter:brightness(1.07)}

.fit{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.57rem;
  letter-spacing:.07em;text-transform:uppercase;padding:3px 7px;border:1px solid;border-radius:2px;
  white-space:nowrap}
.fit.confirmed{color:var(--ok);border-color:var(--ok)}
.fit.likely{color:var(--maybe);border-color:var(--maybe)}
.fit.check{color:var(--unk);border-color:var(--unk)}
/* Browsing with no vehicle: the badge carries the fitment text itself, so it
   needs room to wrap rather than a one-word verdict's worth. */
.fit.browse{color:var(--bone-2);border-color:var(--edge-2);white-space:normal;max-width:100%}
.cthumb .fit.browse{color:var(--shot-ink);border-color:var(--shot-edge);max-width:72%}
.fit .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}

/* --------------------------------------------------------------- 5. notices */
/* Used for the demonstration-catalogue banner. Deliberately loud: it must never
   be possible to mistake sample data for a real retailer listing. */
.notice{display:flex;gap:12px;align-items:flex-start;padding:12px var(--pad);
  background:var(--hazard-fill);color:#12140e;font-size:.84rem;line-height:1.45}
.notice b{font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;
  font-family:var(--mono);white-space:nowrap;padding-top:2px}
.notice a{color:#12140e;text-decoration:underline}
.notice p{margin:0;max-width:92ch}

/* ------------------------------------------- 6. product cards + image wells */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
/* Two up on a phone. One card per row wastes the screen and makes browsing a
   catalogue feel endless. */
@media(max-width:620px){
  .grid{grid-template-columns:1fr 1fr;gap:9px}
  .cbody{padding:10px;gap:6px}
  .cname{font-size:.8rem}
  .price{font-size:.92rem}
  .claim{font-size:.68rem}
}
.card{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);display:flex;
  flex-direction:column;text-decoration:none;color:inherit;overflow:hidden}
.card:hover{border-color:var(--edge-2)}
.card:hover .cthumb img{transform:scale(1.035)}

/* The well is a fixed 4:3 box so the grid never reflows as images stream in.
   The glyph sits behind the photo: if the merchant published no image, or the
   URL 404s, the glyph is simply what's left showing. No broken-image icon,
   no JavaScript required — which matters because the static landing pages
   ship no script at all. */
.cthumb{position:relative;aspect-ratio:4/3;background:var(--shot);
  border-bottom:1px solid var(--edge);display:grid;place-items:center;overflow:hidden}
.cthumb .ph{width:34%;max-width:78px;color:var(--shot-ink);opacity:.5}
/* No padding: object-fit:contain already letterboxes, and on a white well a
   white-background product shot then meets the well with no visible seam. */
.cthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transition:transform .25s ease}
.cthumb .fit{position:absolute;top:7px;left:7px;background:var(--shot);z-index:1}
/* Fit colours are tuned for the dark panel; on the light shot ground they need
   darkening or they wash out. */
.cthumb .fit.confirmed{color:#3f6b23;border-color:#3f6b23}
.cthumb .fit.likely{color:#7d5a12;border-color:#7d5a12}
.cthumb .fit.check{color:#5c6150;border-color:#5c6150}
.cthumb .shop{position:absolute;right:7px;bottom:7px;z-index:1;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--shot-ink);
  background:var(--shot);padding:2px 5px;border-radius:2px;max-width:70%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* Demonstration rows: visibly inert. Not a link, desaturated, and labelled.
   A sample product must never be mistakable for something you can buy. */
.card.is-demo{cursor:default;border-style:dashed}
.card.is-demo:hover{border-color:var(--edge)}
.card.is-demo .cthumb{background:var(--panel-2);border-bottom-style:dashed}
.card.is-demo .cthumb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}
.card.is-demo .cthumb .ph{color:var(--bone-3);opacity:.5;width:30%;max-width:56px}
.wellnote{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bone-3);text-align:center;padding:0 10px;line-height:1.4}
.card.is-demo .cthumb .fit,.card.is-demo .cthumb .shop{background:var(--panel-2)}
.card.is-demo .cthumb .fit.confirmed{color:var(--ok);border-color:var(--ok)}
.card.is-demo .cthumb .fit.likely{color:var(--maybe);border-color:var(--maybe)}
.card.is-demo .cthumb .fit.check{color:var(--unk);border-color:var(--unk)}
/* Browsing with no vehicle: the badge carries the fitment text itself, so it
   needs room to wrap rather than a one-word verdict's worth. */
.fit.browse{color:var(--bone-2);border-color:var(--edge-2);white-space:normal;max-width:100%}
.cthumb .fit.browse{color:var(--shot-ink);border-color:var(--shot-edge);max-width:72%}
.card.is-demo .cthumb .shop{color:var(--bone-3)}
.card.is-demo .cname,.card.is-demo .price{color:var(--bone-2)}
.demotag{font-family:var(--mono);font-size:.55rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--hazard-ink);border:1px solid var(--hazard-ink);border-radius:2px;padding:2px 6px}

.cbody{padding:12px;display:flex;flex-direction:column;gap:7px;flex:1}
.cbrand{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--hazard-ink)}
.cname{font-size:.86rem;font-weight:650;line-height:1.32}
.cfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.price{font-family:var(--mono);font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums}
.claim{font-size:.72rem;color:var(--bone-3);line-height:1.4;border-top:1px dashed var(--edge);padding-top:7px}
.claim b{color:var(--bone-2);font-weight:600}
.more{grid-column:1/-1;padding:22px;text-align:center;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--bone-3)}
.empty{grid-column:1/-1;border:1px dashed var(--edge-2);border-radius:var(--r);padding:34px 20px;
  text-align:center;color:var(--bone-3);line-height:1.6}

/* ------------------------------------------------------------ 7. search app */
.hero{padding:clamp(24px,5vw,52px) var(--pad);border-bottom:1px solid var(--edge);background:var(--panel-2)}
.hero h1{margin:0 0 10px;font-size:clamp(1.5rem,3.6vw,2.3rem);line-height:1.15;letter-spacing:-.02em;
  text-wrap:balance;max-width:20ch}
.hero .lede{margin:0 0 22px;font-size:clamp(.95rem,1.6vw,1.08rem);max-width:60ch;line-height:1.55}
/* Tighten the hero on a phone — the pitch still lands, but it shouldn't cost
   most of the first screen before anyone sees a product. */
@media(max-width:620px){
  .hero{padding:20px var(--pad) 18px}
  .hero h1{font-size:1.45rem;margin-bottom:7px}
  .hero .lede{font-size:.88rem;line-height:1.5;margin-bottom:16px}
}
.picker{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media(max-width:620px){
  .picker{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .picker select,.picker input[type=search]{min-width:0;width:100%}
  .picker select:nth-of-type(3){grid-column:1/-1}
  .picker input[type=search]{grid-column:1/-1}
}
select,input[type=search]{font:inherit;font-size:.92rem;color:var(--bone);background:var(--ground);
  border:1px solid var(--edge-2);border-radius:var(--r);padding:11px 13px}
select{font-weight:600;min-width:150px}
input[type=search]{min-width:200px;flex:1}

.summary{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--edge);background:var(--panel)}
.stat{padding:12px clamp(14px,3vw,22px);border-right:1px solid var(--edge);min-width:112px}
.stat .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-3)}
.stat .v{font-size:1.4rem;font-weight:800;font-family:var(--mono);margin-top:3px;font-variant-numeric:tabular-nums}
.stat .v.hz{color:var(--hazard-ink)}

.wrap{display:grid;grid-template-columns:1fr}
@media(min-width:900px){.wrap{grid-template-columns:216px 1fr}}
.rail{border-right:1px solid var(--edge);padding:16px 0;background:var(--panel)}
/* Pre-launch there are no categories, so the rail would otherwise sit as a
   216px empty column. Collapse the grid to a single track instead. */
.wrap:has(.rail:empty){grid-template-columns:1fr}
.rail:empty{display:none}
.railttl{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-3);padding:0 16px 10px}
.cat{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;
  border-left:3px solid transparent;color:var(--bone-2);font:inherit;font-size:.83rem;text-align:left;
  padding:8px 16px;cursor:pointer}
.cat .gly{width:15px;height:15px;color:var(--bone-3)}
.cat:hover{color:var(--bone);background:var(--panel-2)}
.cat:hover .gly{color:var(--bone-2)}
.cat[aria-pressed=true]{color:var(--bone);border-left-color:var(--hazard);background:var(--panel-2);font-weight:650}
.cat[aria-pressed=true] .gly{color:var(--hazard-ink)}
.cat b{font-family:var(--mono);font-size:.7rem;color:var(--bone-3);font-weight:500;margin-left:auto}

/* Mobile: the desktop layout stacks the stat strip and the full category list
   above the grid, which pushes every product below the fold on a phone. Both
   become single-row horizontal scrollers instead, so the first product sits
   roughly one thumb-scroll from the top. */
@media(max-width:899px){
  .summary{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .summary::-webkit-scrollbar{display:none}
  .stat{flex:none;min-width:96px;padding:10px 14px}
  .stat .v{font-size:1.15rem}

  .rail{display:flex;gap:1px;overflow-x:auto;padding:0;border-right:0;
    border-bottom:1px solid var(--edge);scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .railttl{display:none}
  .cat{width:auto;flex:none;white-space:nowrap;padding:11px 14px;
    border-left:0;border-bottom:3px solid transparent}
  .cat b{margin-left:2px}
  .cat[aria-pressed=true]{border-left:0;border-bottom-color:var(--hazard)}
  /* Categories are how you navigate a phone, so keep them reachable while
     scrolling the results. */
  .rail{position:sticky;top:0;z-index:5;background:var(--panel)}
}

.main{padding:16px clamp(12px,2.4vw,22px) 60px;min-width:0}
.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.chipset{display:flex;gap:1px;background:var(--edge);border:1px solid var(--edge)}
.chipset button{font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--panel-2);color:var(--bone-3);border:0;padding:8px 11px;cursor:pointer}
.chipset button[aria-pressed=true]{background:var(--bone);color:var(--ground);font-weight:700}
.count{font-family:var(--mono);font-size:.66rem;color:var(--bone-3);margin-left:auto}

/* Opt-in for products where no retailer stated fitment. Deliberately quiet and
   below the results: offering them is honest, mixing them in by default would
   be padding the grid with things we can't vouch for. */
.unmatched{margin-top:22px;padding-top:16px;border-top:1px dashed var(--edge);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.unmatched:empty{display:none}
.showall{font:inherit;font-size:.8rem;background:var(--panel);color:var(--bone);
  border:1px solid var(--edge-2);border-radius:var(--r);padding:9px 14px;cursor:pointer}
.showall:hover{border-color:var(--hazard)}
.showall[aria-pressed=true]{border-color:var(--hazard);color:var(--hazard-ink)}
.unmatched span{font-size:.76rem;color:var(--bone-3)}

/* ------------------------------------------------- 7a. explainer components */
/* Used by how-it-works.html: the three fitment states, and a pulled-out
   commitment. Lives here rather than inline on that page so the palette can
   never drift out of step with the rest of the site — which is exactly how its
   two contrast failures got there in the first place. */
.eyebrow{font-family:var(--mono);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--hazard-ink);margin:0 0 12px}
.states{display:grid;gap:10px;margin:18px 0}
.st{border:1px solid var(--edge);border-left:3px solid var(--edge-2);border-radius:var(--r);
  padding:13px 15px;background:var(--panel)}
.st.ok{border-left-color:var(--ok)}
.st.maybe{border-left-color:var(--maybe)}
.st.check{border-left-color:var(--unk)}
.st .lab{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
.st.ok .lab{color:var(--ok)}
.st.maybe .lab{color:var(--maybe)}
.st.check .lab{color:var(--unk)}
.st p{margin:0;font-size:.9rem}
.quote{border-left:3px solid var(--hazard);background:var(--panel);padding:14px 16px;
  border-radius:0 var(--r) var(--r) 0;margin:18px 0}
.quote p{margin:0;font-size:.95rem;color:var(--bone)}

/* ------------------------------------------------------- 7b. buying guides */
/* Long-form reading, so the measure tightens and the rhythm opens up relative
   to the utility pages. */
.guide{max-width:760px}
.guide p,.guide li{max-width:66ch;font-size:1.01rem;line-height:1.72}
.guide h2{margin-top:44px}
.guide h2+p{margin-top:0}
.guide>p:first-of-type{font-size:1.1rem;color:var(--bone-2)}
.meta{font-family:var(--mono)!important;font-size:.66rem!important;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-3)!important;margin:0 0 26px}
.related{margin-top:52px;padding-top:8px;border-top:2px solid var(--hazard)}
.related h2{border-top:0;padding-top:0;margin-top:16px}

/* ---------------------------------------------------------- 7d. homepage */
/* Alternating full-bleed bands, so the page reads as three clear offers —
   your vehicle, your numbers, what you're buying — rather than one long scroll. */
.band{border-bottom:1px solid var(--edge);padding:clamp(30px,5vw,52px) 0}
.band.alt{background:var(--panel)}
.band-in{max-width:1100px;margin:0 auto;padding:0 var(--pad)}
.band h2{font-size:clamp(1.15rem,2.4vw,1.5rem);margin:0 0 6px;letter-spacing:-.01em;text-wrap:balance}
.band>.band-in>p{margin:0 0 18px;color:var(--bone-2);font-size:.94rem;line-height:1.6;max-width:70ch}
.band .cta-line{margin-top:18px}
.band .cta-line a{font-family:var(--mono);font-size:.75rem;letter-spacing:.07em;text-transform:uppercase}

.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:11px}
.tcard{display:flex;flex-direction:column;gap:7px;background:var(--ground);border:1px solid var(--edge);
  border-left:3px solid var(--hazard);border-radius:var(--r);padding:17px 18px;
  text-decoration:none;color:inherit}
.tcard:hover{border-color:var(--hazard);border-left-color:var(--hazard)}
.tgly{width:24px;height:24px;color:var(--hazard-ink)}
.tname{font-weight:700;font-size:1rem}
.tline{font-size:.82rem;color:var(--bone-2);line-height:1.45}

.picker button.cta{border:0;cursor:pointer;font-family:var(--sans)}
.picker input[hidden]{display:none}

/* ------------------------------------------------------- 7c. calculators */
/* Instrument-panel treatment: the answer is large and unmissable, the inputs are
   quiet, and the state (under / over) is carried by colour AND by wording, never
   colour alone. */
.tool{max-width:1000px}
.calc{display:grid;gap:20px;margin:24px 0 8px}
@media(min-width:820px){.calc{grid-template-columns:1fr 400px;align-items:start}}

.calc-in{display:flex;flex-direction:column;gap:16px}
/* "Your rig" — the vehicle's fixed figures, remembered across tools and visits.
   Quiet by design: it's a reassurance, not a control. */
.rignote{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0!important;
  font-size:.78rem!important;color:var(--bone-3)!important;background:var(--panel);
  border:1px solid var(--edge);border-left:3px solid var(--ok);border-radius:var(--r);padding:9px 12px}
.rignote button{font:inherit;font-size:.74rem;background:none;border:0;padding:0;cursor:pointer;
  color:var(--hazard-ink);text-decoration:underline}
.fld{display:flex;flex-direction:column;gap:5px}
.fld-l{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--bone-2)}
.fld-l b{color:var(--hazard-ink);font-weight:400}
.fld input,.row-item input{font:inherit;font-size:1rem;color:var(--bone);background:var(--ground);
  border:1px solid var(--edge-2);border-radius:var(--r);padding:11px 13px;width:100%;
  font-variant-numeric:tabular-nums}
.fld-h{font-size:.78rem;color:var(--bone-3);line-height:1.5;max-width:60ch}

.items{display:flex;flex-direction:column;gap:9px;padding-top:6px;border-top:1px solid var(--edge)}
.row-item{display:grid;grid-template-columns:1fr 110px 38px;gap:7px}
.i-del{background:none;border:1px solid var(--edge);border-radius:var(--r);color:var(--bone-3);
  font-size:1.1rem;cursor:pointer;line-height:1}
.i-del:hover{border-color:var(--hazard);color:var(--hazard-ink)}
.addrow{align-self:flex-start;background:none;border:1px dashed var(--edge-2);border-radius:var(--r);
  color:var(--bone-2);font:inherit;font-size:.82rem;padding:8px 13px;cursor:pointer}
.addrow:hover{border-color:var(--hazard);color:var(--hazard-ink)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips button{font:inherit;font-size:.72rem;background:var(--panel);border:1px solid var(--edge);
  border-radius:99px;color:var(--bone-3);padding:5px 11px;cursor:pointer}
.chips button:hover{border-color:var(--hazard);color:var(--hazard-ink)}

.calc-out{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);
  padding:20px;position:sticky;top:14px}
.calc-empty{font-size:.9rem;color:var(--bone-3);line-height:1.6}
.calc-empty span{font-size:.8rem;color:var(--bone-3);opacity:.85}

.big{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.big-n{font-family:var(--mono);font-size:2.1rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.big-l{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-3)}
.big.good .big-n{color:var(--ok)}
.big.bad .big-n{color:var(--hazard-ink)}

.meter{height:7px;background:var(--ground);border:1px solid var(--edge);border-radius:99px;overflow:hidden;margin-bottom:14px}
.meter span{display:block;height:100%;background:var(--ok);transition:width .18s ease}
.meter.over span{background:var(--hazard-ink)}

.facts{display:flex;flex-direction:column;gap:7px;margin:0 0 12px}
.facts div{display:flex;justify-content:space-between;gap:12px;font-size:.84rem}
.facts dt{color:var(--bone-3);margin:0}
.facts dd{margin:0;font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}

.bd{width:100%;border-collapse:collapse;font-size:.8rem;margin-bottom:12px}
.bd td{padding:5px 0;border-top:1px dashed var(--edge);color:var(--bone-2)}
.bd td:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--bone)}

.check{margin-bottom:14px}
.check-h{display:flex;justify-content:space-between;gap:10px;font-size:.84rem;margin-bottom:5px}
.check-h b{font-family:var(--mono);letter-spacing:.05em}
.check-h span{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--bone-3)}
.check.bad .check-h b{color:var(--hazard-ink)}
.check-n{font-size:.75rem;color:var(--bone-3);line-height:1.45;display:block}

.warn{font-size:.84rem;line-height:1.55;border-left:3px solid var(--hazard);padding:10px 12px;
  background:var(--panel-2);border-radius:0 var(--r) var(--r) 0;margin:14px 0 0;color:var(--bone-2)!important}
.note{font-size:.78rem;color:var(--bone-3)!important;line-height:1.5;margin:12px 0 0}

/* --------------------------------------------------- 8. vehicle landing pages */
.catblock{margin-top:34px}
.catblock h2{display:flex;align-items:center;gap:10px}
.catblock h2 .gly{width:19px;height:19px;color:var(--hazard-ink);flex:none}
.explain{margin-top:44px}
/* Series-code table on vehicle pages. Monospace because these are identifiers,
   not words — you read them character by character off a build plate. */
.codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;margin:16px 0 18px}
.code{background:var(--panel);border:1px solid var(--edge);border-left:3px solid var(--hazard);
  border-radius:var(--r);padding:10px 12px}
.code b{display:block;font-family:var(--mono);font-size:.95rem;letter-spacing:.04em;color:var(--bone)}
.code span{display:block;font-family:var(--mono);font-size:.68rem;color:var(--bone-3);margin-top:3px;
  word-break:break-word}

.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:11px;margin-top:20px}
.vcard{display:flex;flex-direction:column;gap:5px;background:var(--panel);border:1px solid var(--edge);
  border-radius:var(--r);padding:15px 16px;text-decoration:none;color:inherit}
.vcard:hover{border-color:var(--hazard)}
.vname{font-weight:700;font-size:.96rem}
.vcount{font-family:var(--mono);font-size:.65rem;color:var(--bone-3)}

/* --------------------------------------------------------------- 9. footer */
.sitefoot{border-top:1px solid var(--edge);padding:26px var(--pad);background:var(--panel)}
.sitefoot p{margin:0 0 7px;font-size:.78rem;color:var(--bone-2);line-height:1.6;max-width:80ch}
.sitefoot a{color:var(--bone-2)}
.sitefoot a:hover{color:var(--hazard-ink)}
.sitefoot .dim{color:var(--bone-3);font-family:var(--mono);font-size:.71rem}

/* ------------------------------------------------------- 10. motion + print */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .card:hover .cthumb img{transform:none}
}
@media print{
  .mast,.rail,.toolbar,.notice{display:none}
  body{background:#fff;color:#000}
}