/* New model-page design (Suzuki Carry as the model), on top of road.css + state2.css. Why: reports/MODEL-PAGE-DESIGN.md */

/* year buttons: status shown before the tap (mark + color + words in the label, not color alone) */
.model2 .years button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px}
.model2 .years button svg{width:18px;height:18px}
.model2 .years .y-now{border-color:#7FC39A}
.model2 .years .y-now svg{color:#9BE0B4}
.model2 .years .y-part{border-color:var(--some-fill)}
.model2 .years .y-part svg{color:var(--some-fill)}
.model2 .years .y-soon{border-color:rgba(255,255,255,.25);color:#C9D4E6}
.model2 .years .y-soon svg{color:#C9D4E6}
.model2 .years button[aria-pressed=true] svg{color:var(--brand)}
.ykey{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;color:#DCE7F7;font-size:.875rem}
.ykey li{display:flex;align-items:center;gap:4px}
.ykey svg{width:16px;height:16px}
.ykey .y-now svg{color:#9BE0B4} .ykey .y-part svg{color:var(--some-fill)} .ykey .y-soon svg{color:#C9D4E6}

/* generation photos drawn into the page */
.model2 .gen img{aspect-ratio:16/10;height:auto}

/* price strip: each asking price as a dot on one line */
.pstrip{margin:4px 0 16px}
.pstrip .track{position:relative;height:28px;border-radius:999px;background:var(--paper-2,#EEF2F8);border:1px solid var(--line)}
.pstrip .band{position:absolute;top:6px;bottom:6px;border-radius:999px;background:var(--brand-t,#DCE7F7)}
.pstrip i{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--brand);border:2px solid #fff}
.pstrip .ends{display:flex;justify-content:space-between;margin-top:4px;font-size:.875rem;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* pros and cons: two plain lists with drawn marks */
.model2 .pc{background:none !important;border:0 !important;padding:0 !important}
.model2 .pc h3{display:flex;align-items:center;gap:8px}
.pcm{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#fff}
.pcm svg{width:16px;height:16px}
.pcm.ok{background:var(--yes)} .pcm.no{background:var(--no)}

/* compare: each maker's photo */
.mk{display:flex;align-items:center;gap:8px}
.mk img{width:56px;height:42px;object-fit:cover;border-radius:10px;border:1px solid var(--line);flex:none}

/* next step: two working buttons */
.model2 .steps-box .actions-row{display:flex;flex-wrap:wrap;gap:12px}
@media print{.ykey,.pstrip{break-inside:avoid}}
/* solid button color (same look as the old see-through white on blue), so contrast is exact; buttons may shrink at 280px */
.model2 .years{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(min-width:700px){.model2 .years{grid-template-columns:repeat(8,minmax(0,1fr))}}
.model2 .years button{background:#2A4B81;min-width:0}
.model2 .years button[aria-pressed=true]{background:#fff;color:var(--brand);border-color:#fff}


/* ---- round 2 (the 15 ideas) ---- */
/* is it for you + how big is it */
.fit{padding-top:8px}
.fitcols{display:grid;gap:16px}
@media(min-width:560px){.fitcols{grid-template-columns:1fr 1fr}}
.fitcols h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:800 1.125rem var(--display)}
.fitcols ul{margin:0;padding-left:20px}
.fitcols li{margin:0 0 4px}
.size{margin:0;min-width:0}
.size h3{margin:0 0 8px;font:800 1.125rem var(--display)}
.sizepic{display:block;width:100%;height:auto;max-width:520px}
.size figcaption{display:grid;gap:4px;margin:8px 0 4px;font-size:1rem}
.size figcaption .k b{color:var(--brand)}
/* speed signs and the gas helper under the specs */
.sub3{margin:24px 0 12px;font:800 1.25rem var(--display)}
/* generation cards: what to look for in a listing photo */
.spot{margin:0 0 8px;padding:8px 12px;border-radius:10px;background:var(--paper-2,#EEF2F8);font-size:1rem}
/* checklist extras: send, papers, questions */
.sendrow{margin:12px 0 4px}
.seller{margin-top:24px}
.seller h3{margin:4px 0 8px;font:800 1.125rem var(--display)}
.seller ul,.seller ol{margin:0 0 8px;padding-left:20px}
.seller li{margin:0 0 4px}
.seller .ic{width:40px;height:40px}
/* compare: where the engine sits */
.eng{display:flex;align-items:center;gap:8px}
.engpos{width:56px;height:28px;flex:none}
/* price: median mark, where to buy */
.pstrip .med{position:absolute;top:2px;bottom:2px;width:2px;margin-left:-1px;background:var(--ink)}
.pstrip .ends{gap:8px}
.pstrip .ends span:nth-child(2){font-weight:700;color:var(--ink)}
@media print{.sendrow,.gas{display:none !important}.seller>div{break-inside:avoid}}
.seller ul{list-style:none;padding-left:0}
@media(max-width:559px){.eng{flex-direction:column;align-items:flex-start;gap:4px}}
/* bottom bar: the real truck for this model's button (cutout of our own photo, credited on the page) */
.dock .dock-photo{width:42px;height:auto;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
/* every year at a glance (plain HTML so search engines and no-script readers get the answers) */
.yall{margin:16px 0 0;color:#DCE7F7}
.yall summary{cursor:pointer;font-weight:700;color:#fff;min-height:44px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:3px}
.yall ul{margin:8px 0 0;padding-left:20px;font-size:1rem}
.yall li{margin:0 0 8px}
.yall b{color:#fff}
.yall a{color:#fff}
.mk a{font-weight:700}
.mk a{color:var(--brand);text-underline-offset:3px}
/* size picture v2: one road, fronts lined up, legend swatches match the drawing */
.sizepic{max-width:560px}
.size figcaption>span{display:flex;align-items:baseline;gap:8px}
.size figcaption i{flex:none;width:14px;height:14px;border-radius:3px;transform:translateY(2px)}
.size figcaption .k i{background:#1F4E9C}
.size figcaption .p i{background:#E6EBF3;border:2px solid #5B6B84}
.size figcaption .k b{color:inherit}
/* size picture v3: illustrated trucks at true scale, stacked, fronts lined up on a dashed line */
.size figcaption .p i{background:#D5D9DF;border:2px solid #5B6B84}
/* price dot chart: one dot per truck, stacked in $1,000 steps, price labels under, the middle price marked */
.dplot{margin:8px 0 20px;max-width:640px}
.dp-chart{padding:0 8px}
.dp-area{position:relative;height:calc(var(--rows) * 20px + 12px);border-bottom:2px solid var(--ink-2)}
.dp-col{position:absolute;bottom:4px;display:flex;flex-direction:column-reverse;gap:4px;transform:translateX(-50%)}
.dp-col i{display:block;width:16px;height:16px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 2px #fff}
.dp-med{position:absolute;top:0;bottom:0;border-left:2px dashed var(--ink)}
.dp-med b{position:absolute;top:0;left:6px;white-space:nowrap;font:700 .8125rem/1.2 var(--body);color:var(--ink);background:var(--paper,#F3F5F9);padding:1px 4px;border-radius:4px}
.dp-axis{position:relative;height:28px}
.dp-axis i{position:absolute;top:0;width:2px;height:6px;margin-left:-1px;background:var(--ink-2)}
.dp-axis span{position:absolute;top:8px;transform:translateX(-50%);font-size:.875rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.dplot figcaption{margin-top:4px;font-size:.875rem;color:var(--ink-2)}
@media print{.dplot{break-inside:avoid}.dp-col i{box-shadow:none;border:1px solid #fff}}
/* which version is it? (trims), sold prices line, owner video link (Acty first; any model with the data) */
/* extra boxes: one question answered in plain words, with sources (e.g. "Is the new Carry coming to the US?") */