/* =========================================================
   New state-page design (texas-v2.html as the model). Loaded after road.css.
   Existing tokens only. Why each change: reports/STATE-PAGE-DESIGN.md
   ========================================================= */

/* shared bits (also used on the homepage) */
.state2 .ic{display:block;flex:none;height:auto;object-fit:contain}
.state2 .sub-title{display:flex;align-items:center;gap:8px;margin:40px 0 12px;font:800 clamp(1.25rem,4vw,1.5rem)/1.15 var(--display);letter-spacing:-.01em}

/* top: quick facts with icons; share under the verdict */
.state2 .qf>div{text-align:center}
.state2 .qf .ic{width:32px;height:32px;margin:0 auto 4px}
.state2 .vact{margin:12px 0 4px}
.share{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:0 16px;border:1.5px solid var(--line-2);border-radius:10px;background:#fff;color:var(--brand-d);font:700 1rem var(--body);cursor:pointer}
.share svg{width:20px;height:20px}
@media(min-width:700px){.share{width:auto}}
@media(hover:hover){.share:hover{border-color:var(--brand);background:var(--brand-t)}}

/* the law: the key line as a quote (fewer boxes) */
.state2 .law{background:none !important;border:0 !important;border-left:4px solid var(--brand) !important;border-radius:0 !important;padding:4px 0 4px 16px;box-shadow:none}

/* DMV checklist: tick as you go, saved on the device */
.linkish{border:0;background:none;padding:0 4px;min-height:44px;font:inherit;font-weight:700;color:var(--brand-d);text-decoration:underline;cursor:pointer}
:root{--tick2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
/* papers to bring */
.papers{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:860px}
@media(min-width:760px){.papers{grid-template-columns:1fr 1fr;column-gap:24px}}
.papers li{position:relative;padding:4px 0 4px 24px;line-height:1.4}
.papers li::before{content:"";position:absolute;left:8px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--brand)} /* a plain bullet: one icon per line was clutter (Nov. 9) */

/* the price box must look like a field you type in (Nov. 9): form-field gray border, inset shadow, pencil, hint */

/* roads: which roads, with real US speed-limit signs */
.roads2{display:grid;gap:16px}
@media(min-width:1000px){.roads2{grid-template-columns:1fr 1fr;gap:48px;align-items:start}}


/* dealers: a plain list, not ad-like boxes */

/* print: the checklist prints; the share button doesn't */
@media print{.vact,.linkish{display:none !important}}
.papers b{white-space:nowrap} /* form numbers like VTR-61 never break at the hyphen */

/* ===== round 2: the 16 improvements ===== */
/* 1 cost table: icon + row name */
/* 2 DMV checklist: tick, step icon, words */
/* 6 + 14 icons in headings */
/* 7 the law's story as a real timeline */
/* 8 the 5 trucks in the next-step box */
.brandrow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.brandrow img{width:56px;height:56px;object-fit:cover;border-radius:50%;border:2px solid #fff;background:#fff}
/* 9 next move under the verdict */
.state2 .vact{display:flex;flex-wrap:wrap;gap:8px}
.state2 .vact .btn.start{flex:1 1 220px;justify-content:center;min-height:48px}
.state2 .vact .share{flex:1 1 180px}
@media(min-width:700px){.state2 .vact .btn.start,.state2 .vact .share{flex:0 0 auto}}
/* 10 if the county office says no */
.sayno{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;margin:24px 0 12px;padding:16px;max-width:860px;border-radius:16px;background:var(--brand-t);border:1.5px solid var(--brand-t2)}
.sayno .ic{width:44px;height:44px}
.sayno h3{margin:2px 0 4px;font:800 1.25rem/1.2 var(--display)}
.sayno p{margin:0 0 8px}
.sayno ul{margin:0 0 8px;padding-left:20px;display:grid;gap:4px}
.sayno a,.state2 .note a{font-weight:700;color:var(--brand-d)}
/* 13 less empty space between sections on phones */
@media(max-width:699px){
  .state2 main>section{padding-top:48px}
  .state2 section.band{margin-top:48px;padding:40px 0}
  .state2 section.band+section{padding-top:44px}
}
/* 16 dealers: city first, with a pin */
.brandrow{gap:4px}.brandrow img{width:52px;height:52px} /* all 5 trucks on one row on phones */
/* 280px phones: the price list (thumbnail + name + price) must fit */
.state2 .two>*{min-width:0}
/* in-text source links: a 44px tall tap area without changing the line spacing */
.state2 .note a,.sayno li a{padding:12px 0}
/* dealers grouped by metro area (Nov. 9): Houston, Austin–San Antonio, Dallas–Fort Worth */
.state2 .metros{display:grid;gap:16px;margin-top:4px}
@media(min-width:900px){.state2 .metros{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}}
.state2 .metro h4{margin:0 0 4px;font:800 1.125rem/1.25 var(--display);color:var(--ink)}
.state2 .metro .small{margin:8px 0 0}
/* print (Nov. 9): drop screen-only hints from the paper copy */
@media print{.sayno li:has(#printPage){display:none !important}}
/* hard / no states: the options list (you choose one, so no tick boxes), quiet rows instead of boxes */
.opts{list-style:none;margin:0;padding:0;max-width:860px}
.opts li{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.opts li:first-child{border-top:0}
.opts .n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;font:800 1rem var(--display)}
.opts b{display:block;font:800 1.125rem/1.3 var(--display)}
.opts div>span{display:block;color:var(--ink-2)}
/* "Print this page" sits in the sentence; padding (not min-height) keeps a 44px+ tap area (Nov. 9) */
.sayno li .linkish{min-height:0;padding:12px 4px;margin:-12px 0;vertical-align:baseline;white-space:nowrap}
/* phones under 340 px: dealer name above its town and web address, price under the truck name, so nothing gets squeezed or overlaps */