/* Car map (home) and "Which one is for me?" chooser (guides) */

.carmap{margin-top:1.6rem;background:var(--sheet);border:1px solid var(--rule);border-radius:4px;padding:16px}
.carmap svg{display:block;width:100%;height:auto}
.car-body{fill:var(--paper);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.car-glass{fill:var(--sheet);stroke:var(--ink);stroke-width:2}
.car-line{fill:none;stroke:var(--ink);stroke-width:1.5}
.car-dash{fill:none;stroke:var(--graphite);stroke-width:1.5;stroke-dasharray:4 4}
.car-tire{fill:var(--tire);stroke:var(--ink);stroke-width:2}
.car-hub{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.spot{cursor:pointer}
.spot .ring{fill:var(--marker);stroke:var(--ink);stroke-width:2}
.spot .dot{fill:var(--ink)}
.spot text{font-family:var(--display);font-size:20px;font-weight:650;fill:var(--ink)}
.spot.is-soon{cursor:default}
.spot.is-soon .ring{fill:var(--sheet);stroke:var(--graphite);stroke-dasharray:3 3}
.spot.is-soon text{fill:var(--graphite);font-weight:500}
.spot[aria-pressed="true"] .ring{fill:var(--ink)}
.spot[aria-pressed="true"] .dot{fill:var(--marker)}
.spot:focus{outline:none}
.spot:focus-visible .ring{stroke:var(--focus);stroke-width:4}

.areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.areas button{font-family:var(--display);font-size:.95rem;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:6px 14px;cursor:pointer}
.areas button[aria-pressed="true"]{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
.areas button:disabled{color:var(--graphite);cursor:default;border-style:dashed}
.area-panel{margin-top:14px;border-top:1px solid var(--rule);padding-top:14px}
.area-panel h3{font-size:var(--step-1)}
.area-panel ul{margin-top:8px}

/* chooser */
.chooser{margin-top:1.4rem;background:var(--sheet);border:1px solid var(--rule);border-radius:4px;padding:18px 20px}
.chooser h2{margin-top:0;font-size:var(--step-2)}
.chooser fieldset{border:none;margin:14px 0 0;padding:0}
.chooser legend{font-family:var(--display);font-weight:650;font-size:1rem;padding:0;margin-bottom:6px}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices label{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:.95rem;border:1px solid var(--rule);border-radius:999px;padding:6px 14px 6px 10px;cursor:pointer;background:var(--paper)}
.choices input{accent-color:var(--ink);margin:0}
.choices label:has(input:checked){border-color:var(--ink);background:var(--sheet);font-weight:650}
.choices label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.result{margin-top:16px;border-top:1px solid var(--rule);padding-top:14px;min-height:3rem}
.result .answer{font-family:var(--display);font-size:var(--step-1);font-weight:700;font-stretch:85%}
.result .answer span{background:linear-gradient(transparent 55%,var(--marker) 55%);padding:0 2px}
.result p+p{margin-top:6px}
.pick.is-match{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.pick .match-flag{display:none;font-family:var(--display);font-size:.9rem;font-weight:650;margin-bottom:6px}
.pick.is-match .match-flag{display:block}
.pick .match-flag span{background:linear-gradient(transparent 55%,var(--marker) 55%);padding:0 2px}