/* =========================================================
   "Road sign" theme (approved Nov. 9, 2026; plan: reports/DESIGN-ROAD-SIGN-PLAN.md).
   Loaded LAST, after site.css / model.css / year.css / state.css / laws.css.
   Blue and white, highway-style headings (Overpass), easy-reading body (Kei Sans = Atkinson Hyperlegible with a plain zero, scripts/make_kei_sans.py),
   thin gray card borders, road signs as answers. Status colors keep their meaning.
   ========================================================= */
/* Overpass as fixed weights (scripts/make_overpass_static.py): the variable file drew headings thin in Safari's engine */
@font-face{font-family:"Overpass";font-style:normal;font-weight:100 549;font-display:swap;src:url(fonts/Overpass-400.woff2) format("woff2")}
@font-face{font-family:"Overpass";font-style:normal;font-weight:550 749;font-display:swap;src:url(fonts/Overpass-700.woff2) format("woff2")}
@font-face{font-family:"Overpass";font-style:normal;font-weight:750 900;font-display:swap;src:url(fonts/Overpass-800.woff2) format("woff2")}
@font-face{font-family:"Kei Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/KeiSans-400.woff2) format("woff2")}
@font-face{font-family:"Kei Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/KeiSans-700.woff2) format("woff2")}
@font-face{font-family:"Kei Sans";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/KeiSans-400-italic.woff2) format("woff2")}

:root{
  --brand:#1F4E9C; --brand-d:#163A75; --brand-t:#E8EFF9; --brand-t2:#D6E3F5;
  --line:#D5DBE5; --line-2:#B9C3D3;
  --plate:var(--brand-t); --plate-2:var(--brand-t2); --plate-ink:#0F2A57;
  --ink:#111827; --ink-2:#374151; --ink-3:#4B5563;
  --paper:#FFFFFF; --paper-2:#F3F5F8; --paper-3:#D5DBE5; --white:#FFFFFF;
  --shu:var(--brand);
  --limit:#7A5300; --limit-bg:#F8EDCF;
  --display:"Overpass",system-ui,sans-serif;
  --serif:"Overpass",system-ui,sans-serif;
  --body:"Kei Sans",system-ui,sans-serif;
}
body{font-weight:400;background:var(--paper)}
b,strong{font-weight:700}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* headings: highway lettering, sentence case, no italics */
.hero h1,.mhero h1,h2.title,.checker h2,.yeartool h2,.sheet-head h3,.card h3,.model h3,.use h3,.pc h3,.qbox legend,.result-card b,
.verdict strong,.yv b,.mystate .nm,.qf b,.fact strong,.spec strong,.qa-card .a,.key b,.owner .who b,.yres .yh b,.tally b,.logo-word,.sgroup h3,.rrule h3,.nearby b,.srow b,.timeline b{
  font-family:var(--display);font-weight:800;font-stretch:normal;letter-spacing:-.015em}
.hero h1{font-size:clamp(2rem,6.2vw,4.5rem);line-height:1.04}
.mhero h1.kw{line-height:1.02}
h2.title{font-size:clamp(2rem,5.4vw,2.5rem);line-height:1.08}
.hero h1 em,.mhero h1 em,h2.title em{font-family:var(--display);font-style:normal;font-weight:800;letter-spacing:-.015em;color:var(--brand)}
.mhero .sub{font:700 clamp(1.125rem,3.2vw,1.5rem)/1.3 var(--display);font-style:normal;color:var(--brand)}
.law q{font:italic 400 1.125rem/1.55 var(--body)}
.label{font-weight:700}
.label .n{background:var(--brand);color:#fff;font-weight:700}

/* header + logo: a blue guide-sign square */
.top{background:#fff;border-bottom:3px solid var(--brand)} /* solid: Safari showed text through the 97% bar */
.plate-logo{width:40px;height:40px;border-radius:10px;background:var(--brand);box-shadow:inset 0 0 0 2px #fff,0 0 0 1px var(--brand)}
.plate-logo::before,.plate-logo::after{display:none}
.plate-logo span{font:800 1rem/1 var(--display);font-stretch:normal;color:#fff;letter-spacing:.02em}
.logo-word{font-size:1.125rem;color:var(--brand)}
.nav a{font-weight:700}
.nav a:hover,.nav a[aria-current]{background:var(--brand-t);color:var(--brand-d)}
.menu-btn,.close,.qback,.chg{border:2px solid var(--line-2);font-weight:700}
.menu{border-top:1px solid var(--line)}
.menu a{font-weight:700;border-bottom-color:var(--line)}

/* buttons: blue = do it; white with blue border = second choice */
.btn{border-radius:10px;border:2px solid var(--brand);background:var(--brand);color:#fff;box-shadow:none;font-weight:700;min-height:56px}
.btn:hover{background:var(--brand-d);border-color:var(--brand-d)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn.yellow{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.yellow:hover{background:var(--brand-d)}
.btn.white{background:#fff;color:var(--brand);border-color:var(--brand)}
.btn.white:hover{background:var(--brand-t)}
.model .btn{box-shadow:none}

/* cards: thin gray border instead of heavy black frames */
.size-card,.qa-card,.model,.qbox,.changes,.card,.spec,.ways li,.steps-light li,.use,.pc,.faq details,.owner,.gen,.spec-table,.listings,.checks li,.vers li,.crawl,.pair figure,.law,.nearby li,.rrule,.photo .frame{
  border:1.5px solid var(--line);border-radius:16px}
.yv{border:1.5px solid var(--line);border-top:8px solid var(--yes);border-radius:16px}
.srow{border:1.5px solid var(--line);border-left:10px solid var(--c);border-radius:0 16px 16px 0}
.facts{border-top:2px solid var(--line);border-bottom:2px solid var(--line)}
.fact+.fact,.fact:nth-child(even){border-left-color:var(--line)}
footer{border-top:1.5px solid var(--line)}
section.band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.band .card,section.band .spec,section.band .model,section.band .ways li,section.band .use,section.band .pc,section.band .owner,section.band .checks li,section.band .listings,section.band .law,section.band .nearby li{background:#fff}

/* photos */
.photo .frame{border-radius:16px}
.photo .tag{background:var(--brand);color:#fff;border:0;border-radius:10px;font-weight:700}

/* state checker: a white guide-sign card with a blue band on top */
.checker{background:#fff;color:var(--ink);border:1.5px solid var(--line);border-radius:16px;overflow:hidden;padding:0 16px 20px}
.checker h2{margin:0 -18px 16px;padding:12px 16px;background:var(--brand);color:#fff;font-size:1.5rem}
@media(min-width:700px){.checker{padding:0 28px 28px}.checker h2{margin:0 -30px 16px;padding:16px 28px}}
.checker p{color:var(--ink-2)}
.checker .helper{color:var(--ink-3)}
.pick{background:var(--brand);border:2px solid var(--brand);color:#fff;box-shadow:none;border-radius:10px;font-weight:700}
.pick:hover{background:var(--brand-d)}
.pick:active{transform:translateY(1px);box-shadow:none}
.pick .chev{background:#fff;color:var(--brand)}
.answer{border:1.5px solid var(--line);border-top:8px solid var(--unsure)}
.answer[class*=s-]{border-top-color:var(--c)}
.list button{font-weight:700}
.list button:focus-visible,.list button:active{background:var(--brand-t)}
@media(hover:hover){.list button:hover{background:var(--brand-t)}}
.list button.current{background:var(--brand-t)}
.list .cur-tag{background:var(--brand);color:#fff}
.sheet-head{border-bottom:1px solid var(--line)}
@media(min-width:700px){.sheet .panel{border:1.5px solid var(--line);border-radius:16px}}
.search input{border:2px solid var(--line-2);font-weight:400}
.search input:focus{border-color:var(--brand);outline:none}
.near{border:2px dashed var(--line-2);font-weight:700}

/* state outlines: light blue fill, blue line */
.shape{background:var(--paper-2)}
.shape path{fill:var(--brand-t2);stroke:var(--brand)}
.list button .sh path{fill:var(--paper-2);stroke:var(--ink-3)}
.list button.current .sh path{fill:var(--brand-t2);stroke:var(--brand)}

/* small accents that used to be yellow */
.qa-card .q i,.trust-strip .ti{background:var(--brand-t);border:1.5px solid var(--brand);color:var(--brand)}
.faq summary::after{background:var(--brand-t);border:1.5px solid var(--brand);color:var(--brand)}
.faq summary{font-weight:700}
.ticks li::before{background:var(--brand);border:0}
.checks .n,.steps-light .num{background:var(--brand);border:0;color:#fff;font-family:var(--display)}
.spec-table thead th{background:var(--brand);color:#fff;font-weight:700}
.jump a{border:1.5px solid var(--line-2);font-weight:700}
@media(hover:hover){.jump a:hover{background:var(--brand-t)}}
.textlink{color:var(--brand)}
.owner::before{color:var(--brand-t2);font-family:var(--display)}
.rg i::after,.bar i{background:var(--brand)}
.bar{border:1.5px solid var(--line)}
.quiz{background:var(--brand-t);border:1.5px solid var(--line);border-radius:16px}
.quiz .intro{color:var(--ink-2)}
.quiz h2.title em{color:var(--brand)}
.opt{border:2px solid var(--line);font-weight:700}
@media(hover:hover){.opt:hover{border-color:var(--brand)}}
.opt.on,.opt.picked{border-color:var(--brand);background:var(--brand-t)}
.opt .radio{border:2px solid var(--line-2)}
.opt.on .radio,.opt.picked .radio{background:var(--brand);border-color:var(--brand)}
.opt.on .radio::after{background:#fff}
.opt.picked .radio::after{color:#fff}
.result-card{background:var(--paper-2)}
.ynav a,.ynav span{border:1.5px solid var(--line-2)}
.ynav .now{background:var(--brand-t);border:2px solid var(--brand)}

/* dark panels become deep blue */
.steps-box,.yeartool{background:var(--brand-d)}
.steps-box h2.title em{color:#BFD3F2}
.steps .num{border-color:#5B7DB8;color:#DCE7F7}
.steps li.first .num,.steps .here{background:#fff;border-color:#fff;color:var(--brand)}
.steps span,.yeartool > p{color:#DCE7F7}
.years button{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.35)}
.years button[aria-pressed=true]{background:#fff;border-color:#fff;color:var(--brand)}
@media(hover:hover){.years button:hover{border-color:#fff}}

/* bottom bar: the current item is blue */
.dock{border-top:1.5px solid var(--line)}
.dock a{font-weight:700}
.dock a.on{background:var(--brand);color:#fff}
.dock a .dsh path{fill:var(--brand-t2)}

/* road signs as answers (SVGs carry their own colors) */
.road-sign{display:block;width:100%;height:100%}
.yv .ic.sign,.verdict .ic.sign{width:auto;height:56px;border-radius:0;background:none!important;padding:0;flex:none}
.yv .ic.sign svg,.verdict .ic.sign svg{width:auto;height:56px}
.tally .dot.sign{width:30px;height:30px;border-radius:0;background:none!important}
.tally .dot.sign svg{width:30px;height:30px}

/* buttons on the dark-blue panels: white with blue text, so they stand out */
.steps-box .btn,.steps-box .btn.yellow,.yeartool .btn{background:#fff;color:var(--brand);border-color:#fff}
.steps-box .btn:hover,.yeartool .btn:hover{background:var(--brand-t);border-color:var(--brand-t)}

/* ---------- warmth: tan = people (owners), blue = rules and facts ---------- */
:root{--tan:#8B5A2B;--tan-t:#F7F0E6;--tan-line:#E4D3BE}
.promise{margin:8px 0 0;font:700 1.125rem/1.35 var(--display);color:var(--brand)}
.saying{margin:20px 0 0;padding:16px 16px;background:var(--tan-t);border:1.5px solid var(--tan-line);border-left:6px solid var(--tan);border-radius:0 16px 16px 0}
.saying .who{display:block;font:700 1rem var(--body);color:var(--tan)}
.saying blockquote{margin:4px 0 8px;font:700 clamp(1.125rem,3.4vw,1.5rem)/1.3 var(--display);color:var(--ink)}
.saying figcaption{font-size:1rem;color:var(--ink-2)}
.saying .src{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--tan)}
.owner{border-top:4px solid var(--tan)}
.owner .who b,.owner .who small{color:var(--tan)}
.owner::before{color:var(--tan-line)}
.owner .src{color:var(--tan)}
.owner .shape path{fill:var(--tan-t);stroke:var(--tan)}

/* slightly softer cards; more room for the photo on big screens */
.size-card,.qa-card,.model,.qbox,.changes,.card,.spec,.ways li,.steps-light li,.use,.pc,.faq details,.owner,.gen,.spec-table,.listings,.checks li,.vers li,.crawl,.pair figure,.law,.nearby li,.rrule,.photo .frame,.yv,.checker,.answer{border-radius:16px}
.owner{border-radius:16px}
@media(min-width:1000px){.hero-grid .photo .frame{min-height:400px}}
@media(max-height:740px) and (max-width:999px){.promise{font-size:1rem;margin-top:4px}}

/* homepage H1 = the exact keyword ("Kei Trucks"); the rest is a subtitle, like every other page */
.hero h1.kw{font-size:clamp(2.5rem,9vw,4.5rem);line-height:1;max-width:none}
.hero .sub{margin:8px 0 0;font:700 clamp(1.25rem,4.2vw,2rem)/1.2 var(--display);color:var(--ink);max-width:24ch;text-wrap:balance}
.hero .sub em{font-style:normal;color:var(--brand)}
@media(max-height:740px) and (max-width:999px){.hero h1.kw{font-size:2.5rem}.hero .sub{font-size:1.25rem}}