/* Minimal styles for M2a; the full design system lands with page templates in M3. */
:root { --fg: #1a1a1a; --bg: #fff; --muted: #555; --warn-bg: #fff4d6; --warn-border: #b36b00;
        --stop-bg: #fde8e8; --stop-border: #b00020; --accent: #0b5cad; }
body { font: 17px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); background: var(--bg);
       margin: 0; }
main { max-width: 44rem; margin: 0 auto; padding: 1rem; }
.notice { background: #eef4fb; border-left: 4px solid var(--accent); padding: .5rem .75rem; margin: .5rem 0; }
.warning { background: var(--warn-bg); border: 2px solid var(--warn-border); padding: .75rem; margin: .75rem 0; }
.warning.severity-stop, .stop { background: var(--stop-bg); border: 2px solid var(--stop-border); padding: 1rem; }
.warning h3, .stop h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
fieldset { border: 1px solid #ccc; padding: .75rem; }
label.choice { display: block; padding: .35rem 0; }
button { font: inherit; padding: .5rem 1rem; background: var(--accent); color: #fff; border: 0; border-radius: 4px; }
.causes li { margin-bottom: .5rem; }
.muted, .disclaimer { color: var(--muted); font-size: .9rem; }
.route { border: 2px solid var(--accent); padding: .75rem; margin: 1rem 0; }
.site-header, .site-footer { max-width: 44rem; margin: 0 auto; padding: .75rem 1rem; }
.site-search { display: flex; gap: .25rem; margin-top: .5rem; }
.site-search input { flex: 1; min-width: 0; font: inherit; padding: .3rem .4rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-footer { font-size: .85rem; color: var(--muted); border-top: 1px solid #ddd; }
.brand { font-weight: 700; text-decoration: none; color: var(--fg); display: inline-block; line-height: 0; }
.brand img { height: 40px; width: auto; }
.crumbs { font-size: .85rem; color: var(--muted); }
.summary { font-size: 1.1rem; }
.safety-box { background: var(--warn-bg); border: 2px solid var(--warn-border); padding: .75rem 1rem; margin: 1rem 0; }
.diagnostic-entry { border: 2px solid var(--accent); padding: .75rem 1rem; margin: 1rem 0; }
.compact { columns: 2; }
.sources { font-size: .9rem; }
/* Reserved ad slots (AC-M6): fixed height so a loaded ad never shifts content. */
/* Space is reserved (CLS) only where an ad unit renders; an unapproved slot is an empty, zero-height marker. */
.ad-slot { contain: layout; }
.ad-slot--live { min-height: 280px; margin: 1.5rem 0; background: #fafafa; }
.adsbygoogle { display: block; }
/* Hubs and home (navigation pages): readable guide lists with one fact-backed sentence per guide. */
.guides { padding-left: 1.1rem; }
.guides li { margin-bottom: .6rem; }
.guides a { font-weight: 600; }
.hub.two-col { columns: 2; column-gap: 2rem; padding-left: 1.1rem; }
.hub.two-col li { break-inside: avoid; margin-bottom: .35rem; }
.categories li { margin-bottom: .35rem; }
.lede { margin-top: -.5rem; }
h3 { font-size: 1.05rem; margin-bottom: .25rem; }
@media (max-width: 40rem) { .hub.two-col, .compact { columns: 1; } }
.toc { font-size: .95rem; border-left: 3px solid var(--accent); padding: .25rem 1rem; margin: 1rem 0; }
.toc-h { font-size: 1rem; margin: .25rem 0; }
.toc ol { margin: .25rem 0; padding-left: 1.25rem; }
.procedure h3 { font-size: 1.05rem; margin: 1rem 0 .25rem; }
.procedure ol { margin-top: .25rem; }
.diagram { margin: 1rem 0; }
.diagram svg { max-width: 100%; height: auto; display: block; }
.diagram figcaption { font-size: .9rem; }
.code-table { border-collapse: collapse; width: 100%; margin: .5rem 0 1rem; }
.code-table th, .code-table td { border-bottom: 1px solid #ddd; padding: .4rem .5rem; text-align: left; vertical-align: top; }
.code-table tbody th { white-space: nowrap; }
.local-help { border-top: 1px solid #ddd; margin-top: 1.5rem; padding-top: .5rem; }
.repair-brief dt { font-weight: 600; margin-top: .5rem; }
.repair-brief dd { margin: 0 0 0 1rem; }
.repair-or-replace-form label { display: block; margin-top: .5rem; }
.repair-or-replace-form button { display: block; margin-top: .75rem; }
.repair-or-replace .verdict { font-size: 1.1rem; }
.local-help-form { margin-top: 1rem; }
.shops li { margin-bottom: .75rem; }
.feedback { border-top: 1px solid #ddd; margin-top: 1.5rem; padding-top: .5rem; }
.feedback textarea { width: 100%; font: inherit; margin: .25rem 0 .5rem; }
.reader-comments { font-style: italic; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.badge { display: inline-block; font-size: .8rem; font-weight: 600; color: #0b6b2e; background: #e6f4ea; padding: 0 .4rem; border-radius: 3px; }
.reader-comments li, .testimonials li { margin: .5rem 0; }
.comment-vote { display: inline; margin-left: .25rem; }
.link-button { background: none; color: var(--accent); padding: 0; text-decoration: underline; font-size: .9rem; }
.feedback-stats { font-weight: 600; }
.badge-critical { color: #7a4b00; background: #fff4d6; }
/* Plan 030: quick answer, triage, visuals, indicators (mobile-first; system fonts; no layout shift). */
.quick-answer { border: 2px solid var(--accent); border-radius: 4px; padding: .75rem 1rem; margin: 1rem 0; }
.quick-answer dl { margin: .5rem 0 0; }
.quick-answer dt { font-weight: 700; margin-top: .5rem; }
.quick-answer dd { margin: .15rem 0 0; }
.indicators { list-style: none; padding: 0; margin: .25rem 0 .5rem; display: flex; flex-wrap: wrap; gap: .3rem; font-size: .85rem; }
.ind { border: 1px solid #ccc; border-radius: 999px; padding: 0 .55rem; line-height: 1.5; color: var(--muted); }
.ind-home { border-color: #0b6b2e; color: #0b6b2e; background: #e6f4ea; }
.ind-pro { border-color: var(--stop-border); color: var(--stop-border); background: var(--stop-bg); }
.ind-warn { border-color: var(--warn-border); color: #7a4b00; background: var(--warn-bg); }
.triage-steps { padding-left: 1.1rem; }
.triage-steps > li { margin-bottom: .75rem; }
.triage-prompt { margin: 0; font-weight: 600; }
.triage-n { color: var(--accent); margin-right: .25rem; }
.triage-outcomes { list-style: none; padding-left: .75rem; margin: .25rem 0 0; border-left: 3px solid #ddd; font-size: .95rem; }
.triage-outcomes li { margin: .2rem 0; }
.triage-outcomes li { color: var(--muted); }
.triage-outcomes b { color: var(--fg); }
.triage-stop, .triage-stop b { color: var(--stop-border); font-weight: 700; }
.triage-skip { font-style: italic; }
.attribution { margin: .5rem 0 0; }
.visual { margin: 1rem 0; }
.visual-stage { position: relative; border: 1px solid #ddd; border-radius: 4px; background: #fff; touch-action: none; overflow: hidden; }
.visual-stage:focus { outline: 2px solid var(--accent); }
.visual-stage.is-zoomed { cursor: grab; }
.visual-svg { display: block; width: 100%; height: auto; max-height: 70vh; }
.visual-svg text { font-family: system-ui, sans-serif; }
.visual-controls { position: absolute; right: .35rem; top: .35rem; display: flex; gap: .25rem; }
.visual-controls button { padding: 0; width: 2rem; height: 2rem; font-size: 1.1rem; line-height: 1; border-radius: 4px; opacity: .9; }
.visual-compare { display: grid; gap: .5rem; }
.visual-pane-h { margin: 0 0 .25rem; font-size: .9rem; font-weight: 600; }
.visual-title { font-weight: 600; margin: .5rem 0 .25rem; }
.visual-legend { padding-left: 0; list-style: none; margin: 0; }
.visual-legend li { margin: .2rem 0; }
.visual-n, .visual-focus { display: inline-block; min-width: 1.5rem; height: 1.5rem; line-height: 1.5rem; text-align: center; border-radius: 999px; background: var(--fg); color: #fff; font-size: .85rem; font-weight: 700; padding: 0; }
.visual-focus { cursor: pointer; }
.hotspot.is-focus circle { fill: var(--accent); }
.video { border: 1px solid #ddd; padding: .75rem 1rem; margin: 1rem 0; }
.video h3 { margin-top: 0; }
.video-frame { width: 100%; max-width: 560px; aspect-ratio: 16 / 9; height: auto; border: 0; }
.video-notes { font-size: .95rem; }
@media (min-width: 40rem) { .visual-compare { grid-template-columns: 1fr 1fr; } }
/* Plan 031: the guided diagnosis steps - answers and buttons as large touch targets. */
#dx label.choice { padding: .6rem .75rem; border: 1px solid #ccc; border-radius: 6px; margin: .4rem 0; }
#dx button { min-height: 44px; }
/* Safety cards (plan 035, templates/pages/_card.html): numbered panels, each with its cited caption. */
.fx-card { list-style: none; margin: .9rem 0 .4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
           background: #e8edf3; padding: 6px; border-radius: 12px; max-width: 560px; }
.fx-card li { background: #fff; border-radius: 8px; overflow: hidden; margin: 0; }
.fx-card:has(> li:only-child) { grid-template-columns: 1fr; max-width: 280px; }
.fx-card img { display: block; width: 100%; height: auto; }
.fx-card p { display: flex; gap: .4rem; margin: 0; padding: .2rem .5rem .5rem; font-size: .85rem; line-height: 1.3; }
.fx-pn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem;
         height: 1.25rem; border-radius: 4px; background: #1e293b; color: #fff; font-size: .75rem; font-weight: 700; }