/* parts.css: the one look of the shared parts made by scripts/components.py.
   Change a part here and every page that uses it changes (list: components.PARTS). Never restyle a part in a page-type CSS file.
   Loaded after the page-type CSS (site, road, state2, model2, home). */

/* ---- review card: picture (topic icon), who, where it was said, topic tag, the story. No stars (nobody gave ratings). */
.rv-intro{margin:0 0 16px;color:var(--ink-2);font-size:1rem}
.rv-intro b{color:var(--ink)}
.reviews{display:grid;gap:16px}
@media(min-width:760px){.reviews{grid-template-columns:repeat(2,minmax(0,1fr))}}
.review{min-width:0;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px 16px 12px;box-shadow:0 1px 2px rgba(20,35,60,.06)}
.review header{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.review .av{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--tan-t);border:1.5px solid var(--tan-line,#E2CDB2)}
.review .av .ic{width:32px;height:auto}
.review .rw{min-width:0}
.review .rw b{display:block;font:800 1rem/1.25 var(--display);color:var(--ink)}
.review .rw small{display:block;font-size:.875rem;color:var(--ink-2)}
.review .src{display:inline-block;padding:8px 0;margin:-8px 0;color:var(--tan);font-weight:700}
.review .rt{align-self:flex-start;margin:0 0 8px;padding:2px 10px;border-radius:999px;background:var(--paper-2,#EEF2F8);font:700 .875rem/1.5 var(--body);color:var(--ink)}
.review>p{margin:0;font-size:1.125rem;line-height:1.5}

/* ---- editable number box: looks ready to type in before anyone taps (white, blue edge, soft glow, pencil); stronger in use */
.nbox{display:flex;align-items:center;gap:4px;margin:12px 0 4px;padding:0 12px;max-width:320px;border:2px solid var(--brand);border-radius:10px;background:#fff;box-shadow:0 0 0 4px var(--brand-t2);cursor:text}
.nbox>span{font:700 1.5rem var(--display);color:var(--ink-2)}
.nbox input{flex:1;min-width:0;width:100%;min-height:54px;border:0;outline:0;padding:0;font:700 1.5rem var(--display);color:var(--ink);font-variant-numeric:tabular-nums;background:none;cursor:text}
.nbox .pen{flex:none;width:22px;height:22px;color:var(--brand)}
.nbox:focus-within{border-width:3px;padding:0 11px;box-shadow:0 0 0 5px var(--brand-t2),0 2px 8px rgba(20,35,60,.18)}
.nfield{display:block;min-width:0}
.nfield>span:first-child{display:block;font-weight:700;font-size:1rem}
.nfield .nbox{margin:4px 0 0;max-width:none}
.calc-hint{margin:0 0 12px;font-size:.875rem;color:var(--ink-2)}
/* what the boxes work out */
.receipt{margin:0 0 4px;max-width:420px}
.receipt>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 12px;padding:4px 0;border-bottom:1px dashed var(--line)}
.receipt dt{min-width:0;color:var(--ink-2)}
.receipt dd{margin:0 0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.receipt .tot{border-bottom:0;border-top:2px solid var(--ink);margin-top:2px;padding-top:8px}
.receipt .tot dt{color:var(--ink);font-weight:800}
.receipt .tot dd{font:800 1.25rem var(--display)}
@media(max-width:17em){.receipt dd{white-space:normal;overflow-wrap:normal}} /* large text only: "about" may wrap; a price like $524–$529 stays whole */

/* ---- plain price list: what (and where) on the left, the price on the right; a small photo only when models are mixed */
.pcard{min-width:0;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:4px 16px;margin:0 0 12px}
.pcard>.ph{display:block;padding:8px 0 4px;text-decoration:none;color:inherit}
.pcard>.ph b{display:block;font:800 1.125rem/1.25 var(--display);color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.pcard>.ph span{display:block;color:var(--ink-2);font-size:.875rem}
.plist{list-style:none;margin:0;padding:0}
.plist li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 0;border-top:1px solid var(--line);font-size:1rem}
.pcard>.plist:first-child>li:first-child{border-top:0}
.plist li[hidden]{display:none}
.plist .pt{flex:none;width:56px;height:42px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.plist .pi{flex:1 1 9em;min-width:0;display:flex;align-items:center;gap:12px} /* photo + words stay together; under ~9em of room (12em with a photo) the price drops to its own line */
.plist .pi:has(.pt){flex-basis:12em}
.plist .pn{flex:1;min-width:0}
.plist .pn span{display:block}
.plist .pn span+span{color:var(--ink-2);font-size:.875rem}
.plist .pp{flex:none;max-width:100%;margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;text-align:right} /* a range may break after its dash; a number never breaks (no break points inside "$8,000") */
.pgrid{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:12px}
.pgrid>.pcard{margin:0}
@media(min-width:700px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- price tally: one row per $1,000 range, a dot per truck, the count in words */
.ptally{margin:8px 0 20px;max-width:560px}
.tl-h{margin:0 0 8px;font-size:1rem}
.tl-h b{font:800 1.125rem var(--display)}
.ptally ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ptally li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 0;border-bottom:1px solid var(--line)}
.ptally .rg{flex:0 1 10.5em;min-width:0;font-weight:700;font-variant-numeric:tabular-nums}
.ptally .tv{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;max-width:100%;min-width:0}
.ptally .td{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.ptally .td i{display:block;width:16px;height:16px;border-radius:50%;background:var(--brand)}
.ptally .tc{color:var(--ink-2);font-size:1rem;white-space:nowrap}
.ptally .none .rg,.ptally .none .tc{color:var(--ink-2);font-weight:400}
.ptally figcaption{margin-top:8px;font-size:1rem}

.plist .pw a{color:var(--brand);font-weight:700;text-underline-offset:3px}

/* ---- length bars: sizes drawn to one scale (size page) */
.lbars{max-width:640px;margin:8px 0 16px}
.lbars ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.lbars li{padding:10px 0;border-bottom:1px solid var(--line)}
.lb-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 12px}
.lb-h b{font:800 1.125rem/1.3 var(--display)}
.lb-h span{font-size:1rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.lb-t{height:16px;margin:6px 0 0;background:var(--paper-2,#EDE5D3);border-radius:8px;overflow:hidden}
.lb-t span{display:block;height:100%;border-radius:8px;background:var(--ink-3,#6b645a)}
.lbars .kei .lb-t span{background:var(--brand)}
.lbars figcaption{margin-top:8px;font-size:1rem;color:var(--ink-2)}

/* ---- price answer: the big number first (price page) */
.pans{max-width:560px;margin:0 0 24px;padding:16px 20px;background:#fff;border:1.5px solid var(--line);border-left:6px solid var(--brand);border-radius:16px}
.pans-k{margin:0;font-weight:700;font-size:1rem;color:var(--ink-2)}
.pans-n{margin:4px 0 0;font:800 clamp(1.5rem,8vw,2.75rem)/1.15 var(--display);color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pans-l{margin:4px 0 8px;font-size:1.125rem;color:var(--ink)}
.pans-f{margin:0 0 12px;font-size:1rem;color:var(--ink-2)}
.pans .btn{width:100%}

/* ---- range bars: sellers on one dollar scale */
.rbars{max-width:640px;margin:0 0 12px}
.rbars ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rbars li{padding:10px 0 8px;border-bottom:1px solid var(--line)}
.rb-ax{display:flex;justify-content:space-between;font-size:1rem;color:var(--ink-2);font-variant-numeric:tabular-nums;margin:0 0 4px}
.rb-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 12px}
.rb-h b{font:800 1.125rem/1.3 var(--display)}
.rb-h span{font-size:1rem;color:var(--ink-2)}
.rb-t{position:relative;height:16px;margin:6px 0 4px;background:var(--paper-2,#EDE5D3);border-radius:8px}
.rb-r{position:absolute;top:0;bottom:0;min-width:8px;background:var(--brand);opacity:.35;border-radius:8px}
.rb-m{position:absolute;top:-3px;bottom:-3px;width:5px;margin-left:-2px;background:var(--brand-d,var(--brand));border-radius:3px}
.rb-n{margin:0;font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums}
.rb-key{margin:8px 0 0;font-size:1rem;color:var(--ink-2)}
.rb-key i{display:inline-block;vertical-align:middle;margin:0 4px 0 8px}
.rb-key i:first-child{margin-left:0}
.rb-key .k1{width:28px;height:10px;border-radius:5px;background:var(--brand);opacity:.35}
.rb-key .k2{width:5px;height:14px;border-radius:3px;background:var(--brand-d,var(--brand))}

@media print{
  .calc-hint,.nbox .pen{display:none !important}
  .nbox{box-shadow:none !important;background:#fff !important}
  .review,.pcard,.ptally{break-inside:avoid;box-shadow:none !important}
}

/* ---- the box around number boxes: question, box(es), hint, what they work out */
.calc{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px;margin:0 0 20px;max-width:860px}
.calc-q{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center}
.calc-q>label b,.calc-q>div b{display:block;font:800 1.125rem/1.2 var(--display)}
.calc-q>label span,.calc-q>div span{display:block;color:var(--ink-2);font-size:1rem}
.calc-out{margin:0 0 4px;font-size:1.125rem;line-height:1.45}
.calc-out b{font-variant-numeric:tabular-nums}
.nrow{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px}
@media(min-width:560px){.nrow{grid-template-columns:repeat(2,minmax(0,220px))}}
@media print{.calc{border:1px solid #999 !important}}

/* ---- dealer list: town, name, web address; long addresses wrap (never push the page sideways) */
.dlist{list-style:none;margin:0;padding:0;display:grid;gap:0 32px}
@media(min-width:43.75em){.dlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.metro .dlist{grid-template-columns:minmax(0,1fr)}
.dlist li{min-width:0;padding:8px 0;border-bottom:1px solid var(--line)}
.dlist .dcity{display:block;font-weight:700;font-size:.875rem;color:var(--brand-d)}
.dlist .dname{display:block;font:800 1.125rem/1.3 var(--body);overflow-wrap:break-word}
.dlist .dsite{display:block;color:var(--ink-2);font-size:1rem;overflow-wrap:anywhere}


/* ---- tickable checklist (state DMV steps, model inspection, year checks) */
.dmv{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px;max-width:860px}
.dmv-top{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center}
.dmv-top b{display:block;font:800 1.125rem/1.2 var(--display)}
.dmv-top span{display:block;color:var(--ink-2);font-size:1rem}
.dmv-top .btn{min-height:44px;padding:0 12px}
.dmv .bar{height:8px;border-radius:99px;background:var(--paper-2);margin:12px 0 4px;overflow:hidden}
.dmv .bar i{display:block;height:100%;width:0;background:var(--yes);border-radius:99px;transition:width .25s}
.dmv-steps{list-style:none;margin:0;padding:0}
.dmv-steps li{border-top:1px solid var(--line)}
.dmv-steps label{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;padding:12px 0;min-height:44px;cursor:pointer}
.dmv-steps input{position:absolute;opacity:0;width:1px;height:1px}
.dmv-steps .tick{grid-row:1 / span 2;width:28px;height:28px;margin-top:1px;border:2px solid var(--brand);border-radius:10px;background:#fff}
.dmv-steps .sn{display:none}
.dmv-steps .tx b{display:block;font:800 1.125rem/1.3 var(--display)}
.dmv-steps .tx span{display:block;color:var(--ink-2)}
.dmv-steps input:checked+.tick{background:var(--yes) var(--tick2) center/18px no-repeat;border-color:var(--yes)}
.dmv-steps input:checked~.tx b{color:var(--ink-3)}
.dmv-steps input:focus-visible+.tick{outline:3px solid var(--brand);outline-offset:2px}
.dmv-note{margin:8px 0 0}

/* ---- speed-sign cards (real US signs + plain words) */
.roadtypes{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.roadtypes li{display:grid;grid-template-columns:46px 1fr;column-gap:12px;row-gap:4px;align-items:center;padding:12px 12px;border-radius:16px;background:#fff;border:1.5px solid var(--line)}
.roadtypes .sg svg{width:40px;height:52px;display:block}
.roadtypes b{display:block;font:800 1.125rem/1.25 var(--display)}
.roadtypes li>span>span{display:block;color:var(--ink-2);font-size:1rem}
.roadtypes i{grid-column:2;justify-self:start;font-style:normal;font-weight:700;font-size:.875rem;padding:2px 8px;border-radius:99px}
.roadtypes .ok i{background:#E3F1E6;color:var(--yes)}
.roadtypes .warn i{background:var(--limit-bg);color:#6B4C00}
.roadtypes .no i{background:#FBE9E7;color:#8E1F17}
.speeds{max-width:860px;margin-bottom:20px !important}

/* ---- timeline (what changed, newest marked) */
.timeline{list-style:none;margin:16px 0 0;padding:0;max-width:860px;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 0;border-top:1px dashed var(--paper-3)}
.timeline li:first-child{border-top:0}
.timeline b{font:800 1rem var(--display)}
.timeline span{font-size:1rem;color:var(--ink-2)}
.timeline .now b{color:var(--yes)}
.timeline li{position:relative;border-top:0;padding:4px 0 16px 24px;grid-template-columns:104px 1fr}
.timeline li::before{content:"";position:absolute;left:4px;top:9px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--brand)}
.timeline li:not(:last-child)::after{content:"";position:absolute;left:10px;top:24px;bottom:0;width:2px;background:var(--line)}
.timeline .now::before{background:var(--yes);border-color:var(--yes)}
@media(max-width:420px){.timeline li{grid-template-columns:1fr;gap:2px}}

/* ---- versions list, sold-price line, video link, info box */
.trims{margin:0 0 8px;display:grid;gap:0 32px;max-width:960px}
@media(min-width:760px){.trims{grid-template-columns:repeat(2,minmax(0,1fr))}}
.trims>div{padding:12px 0;border-top:1px solid var(--line);min-width:0}
.trims dt{font:800 1.125rem/1.25 var(--display);color:var(--ink)}
.trims dd{margin:4px 0 0;font-size:1rem;color:var(--ink-2)}
.sold{max-width:760px;margin:0 0 20px;padding:12px 16px;border-left:4px solid var(--brand);background:#fff;border-radius:0 10px 10px 0;font-size:1rem}
.watch{display:flex;align-items:flex-start;gap:12px;margin:20px 0 0;font-size:1rem;max-width:760px}
.watch .ic{flex:none;width:32px;height:32px}
.watch a{color:var(--brand);font-weight:700;display:inline-block;padding:8px 0;margin:-8px 0}
.sold a{display:inline-block;padding:8px 0;margin:-8px 0;font-weight:700} /* 36px+ tap height without moving the text */
.xbox{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;max-width:860px;margin:24px 0 0;padding:16px;background:#fff;border:1.5px solid var(--line);border-radius:16px}
.xbox h3,.xbox .xh{margin:0 0 8px;font:800 1.125rem/1.25 var(--display);color:var(--ink)}
.xbox p,.xbox li{font-size:1rem;margin:0 0 8px}
.xbox ul{margin:0 0 8px;padding-left:20px}
.xbox .small{margin:0}
.xbox a{color:var(--brand);font-weight:700}
@media(max-width:340px){.xbox{grid-template-columns:minmax(0,1fr)}}
.xbox a{padding:10px 0} /* bigger tap area for source links in the sentence, without moving the text */
@media print{.dmv-top .btn,.dmv .bar,.dmv-note,.speeds{display:none !important}.dmv,.roadtypes li{border:1px solid #999 !important}}

/* ---- photo + caption + credit (inside a section) */
.pfig{max-width:480px;margin:20px 0 0}
.pfig img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--line)}
.pfig figcaption{margin-top:8px;font-size:1rem}
.pfig figcaption b{font-weight:800}
.pfig .credit{margin:4px 0 0}
/* ---- links to the other year guides of a model */
.ylinks ol{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ylinks a,.ylinks span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:700;text-decoration:none;color:var(--brand)}
.ylinks span[aria-current]{background:var(--brand);border-color:var(--brand);color:#fff}
.mhero .xbox{margin:16px 0 0}
/* two photos side by side (e.g. old body vs. new body) */
.pfigs{display:grid;gap:16px;margin:0 0 16px}
@media(min-width:43.75em){.pfigs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pfigs .pfig{margin:0;max-width:none}
/* Nov. 9: links inside a timeline, speed cards or FAQ answer (first used on the laws hub). :where() keeps it weaker than a page's own rule (home.css). */
:where(.timeline,.roadtypes,.faq details) a{color:var(--brand);font-weight:700}
/* Nov. 10: footer links (About, How we check facts, Contact, Privacy) on every page. Link look: site.css "footer li a". */
.footnav .footlinks{display:flex;flex-wrap:wrap;column-gap:24px;margin:0 0 8px}
@media print{.footnav{display:none}}
/* to-scale size picture (moved here from model2.css so the homepage can use it too): illustrated trucks at true scale, fronts on a dashed line */
.sizecmp{position:relative;display:grid;gap:12px;max-width:520px;padding:4px 0 0}
.sizecmp::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:2px dashed #8C9AB0}
.sizecmp .szrow{display:grid;gap:4px}
.sizecmp img{display:block;height:auto}
.sizecmp .dl{position:relative;display:block;height:24px;border-top:0}
.sizecmp .dl::before{content:"";position:absolute;left:0;right:0;top:11px;border-top:2px solid currentColor}
.sizecmp .dl::after{content:"";position:absolute;right:0;top:4px;height:16px;border-left:2px solid currentColor}
.sizecmp .dl b{position:relative;display:table;margin:0 auto;padding:0 8px;background:var(--paper,#fff);font:800 1rem/24px var(--display)}
.sizecmp .p .dl{color:#5B6B84}
.sizecmp .k .dl{color:#1F4E9C}
.sizecmp img{object-fit:fill}
/* compact size picture (homepage): both trucks on one ground line, kei truck in front, true scale */
.sizeover{max-width:720px;margin:12px auto 4px}
.sizeover .so-road{position:relative;border-bottom:3px solid var(--ink)}
.sizeover .so-road img{display:block;height:auto;object-fit:fill}
.sizeover .so-k{position:absolute;left:0;bottom:-2px}
.sizeover .so-bars{display:grid;gap:6px;margin-top:10px}
.sizeover .dl{position:relative;display:block;height:24px;color:#5B6B84}
.sizeover .dl.k{color:#1F4E9C}
.sizeover .dl::before{content:"";position:absolute;left:0;right:0;top:11px;border-top:2px solid currentColor}
.sizeover .dl::before,.sizeover .dl::after{pointer-events:none}
.sizeover .dl::after{content:"";position:absolute;right:0;top:4px;height:16px;border-left:2px solid currentColor}
.sizeover .dl b{position:relative;display:table;margin:0 auto;padding:0 8px;background:var(--white);font:800 1rem/24px var(--display)}