/* SMC overview page presentation (/dc/smc), approved design V1 2026-09-11.
 *
 * SCOPED to .smc-overview on the page container so nothing here reaches
 * another guide. Every colour reads a live main.css token; the approved
 * mockup's standalone :root palette is deliberately NOT copied.
 *
 * Two rules this file exists to respect:
 *   - THE BUTTON LAW: every clickable card/button carries a 2px accent
 *     border plus card-fx's cursor glow (cardfx-pop in the markup).
 *   - THE SYMMETRY LAW: no paragraph here gets its own narrower max-width,
 *     so the shared --prose-measure band set by main.css/dc.css still rules
 *     the reading flow. Cards are their own measure, which is correct.
 *
 * Dark mode is declared with BOTH mechanisms (prefers-color-scheme AND
 * [data-theme="dark"]) because the Auto theme only sets the media query.
 */

/* --color-accent (#b07a1f) is 3.72:1 as TEXT on white, below AA. Gold-coloured
   text on this page reads this separate ink token instead; the accent itself
   stays the border/fill colour in both themes. */
.smc-overview { --smc-ink-accent: #8a5e12; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .smc-overview { --smc-ink-accent: #f5c862; }
}
:root[data-theme="dark"] .smc-overview { --smc-ink-accent: #f5c862; }

/* The two views toggle with the `hidden` ATTRIBUTE, and `hidden` loses to any
   explicit `display` rule, so nothing in this file gives either section a
   display value and this pair states the closed case outright. */
.smc-overview #smc-finder-view[hidden],
.smc-overview #smc-compare-view[hidden] { display: none; }

/* THE APPROVED INTRODUCTION IS LEFT-ALIGNED, and that is a named decision in
   the approved scope, not a leftover of the prototype's own root CSS. The
   site-wide default (`.dc-hero` and `.editorial h2` are centred) stays exactly
   as it is for every other page; this override is scoped to .smc-overview.
 *
 * THE SYMMETRY LAW is respected rather than worked around. The law's defect
 * was a LEFT-FLUSH heading sitting over a CENTRED paragraph band, leaving a
 * dead gutter down one side. So the hero BLOCK is capped at the shared
 * --prose-measure and centred in the content column, and everything inside it
 * is left-aligned against that same band: `.dc-hero p`'s own `margin: 0 auto`
 * then resolves to zero and the heading and the paragraph share one edge.
 * The section headings sit in flex columns that are already their own measure,
 * so they carry no band of their own to fall out of step with. */
.smc-overview .dc-hero {
  text-align: left;
  max-width: var(--prose-measure);
  margin-left: auto;
  margin-right: auto;
}
.smc-overview .smc-section-top h2 { text-align: left; }

/* ---------- Shared small parts ---------- */

.smc-overview .smc-eyebrow {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--smc-ink-accent);
  /* auto side margins so an eyebrow sitting in the prose flow shares the same
     centred band as the paragraphs around it (THE SYMMETRY LAW). Inside a card
     it has no max-width, so auto resolves to zero and nothing shifts. */
  margin: 0 auto .45rem;
  line-height: 1.4;
}

.smc-overview .smc-section {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
}

.smc-overview .smc-section-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.35rem;
  margin-bottom: 1.35rem;
  flex-wrap: wrap;
}
.smc-overview .smc-section-top h2 {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  line-height: 1.18;
  color: var(--color-text);
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.smc-overview .smc-section-top > div { min-width: 0; flex: 1 1 18rem; }
.smc-overview .smc-section-top p { font-size: .92rem; margin: .45rem 0 0; }

.smc-overview .smc-quiet-label {
  font-size: .76rem;
  line-height: 1.5;
  max-width: 11rem;
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-accent);
  padding-left: .75rem;
}

/* A text link that reads as an action row inside a card. Not a card itself,
   so it takes no accent border and no card-fx class. */
.smc-overview .smc-text-action {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .35rem 0;
  font-size: .88rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.smc-overview .smc-text-action:hover { text-decoration: underline; }
.smc-overview .smc-text-action:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---------- Entry choices (THE BUTTON LAW applies: these are buttons) ---------- */

.smc-overview .smc-entry-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 0 0 2.25rem;
}
.smc-overview .smc-entry {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.1rem;
  min-height: 44px;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  text-align: left;
  text-decoration: none;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  min-width: 0;
}
.smc-overview .smc-entry:hover,
.smc-overview .smc-entry:focus-visible { border-color: var(--color-primary); }
.smc-overview .smc-entry:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.smc-overview .smc-entry[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.smc-overview .smc-entry-num {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  color: var(--smc-ink-accent);
  flex: 0 0 auto;
}
.smc-overview .smc-entry[aria-pressed="true"] .smc-entry-num { color: var(--color-on-primary); }
.smc-overview .smc-entry strong { display: block; font-size: .95rem; line-height: 1.3; }
.smc-overview .smc-entry small { display: block; font-size: .78rem; line-height: 1.4; margin-top: .2rem; opacity: .88; }
.smc-overview .smc-entry > span:last-child { margin-left: auto; flex: 0 0 auto; }

/* ---------- Finder ---------- */

.smc-overview .smc-finder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 1.75rem;
  align-items: start;
}
.smc-overview .smc-finder-aside { position: sticky; top: 1.5rem; min-width: 0; }
.smc-overview .smc-aside-note {
  padding: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-accent);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.smc-overview .smc-aside-note h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--color-text);
  margin: 0 0 .4rem;
}
.smc-overview .smc-aside-note p { font-size: .85rem; }
.smc-overview .smc-aside-footnote { font-size: .82rem; padding: 0 .3rem; }

/* The wizard itself: the approved treatment gives each question its own
   gold-bordered card. Inputs, names and values are untouched source. */
.smc-overview #smc-wizard {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-top: 0;
}
.smc-overview #smc-wizard .sw-step {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1.3rem 1.4rem;
  margin: 0 0 .9rem;
  min-width: 0;
}
.smc-overview #smc-wizard legend {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0;
  max-width: 100%;
}
.smc-overview #smc-wizard .sw-hint { font-size: .86rem; line-height: 1.65; margin: .5rem 0 .85rem; }
.smc-overview #smc-wizard .sw-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.smc-overview #smc-wizard .sw-opts.sw-checklist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.smc-overview #smc-wizard .sw-opt {
  align-items: flex-start;
  gap: .55rem;
  min-height: 46px;
  padding: .65rem .7rem;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: .86rem;
  line-height: 1.4;
}
.smc-overview #smc-wizard .sw-opt:has(input:checked) {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.smc-overview #smc-wizard .sw-opt:has(input:checked) .sw-opt-t { color: var(--color-on-primary); }
.smc-overview #smc-wizard .sw-opt input { width: 1.05rem; height: 1.05rem; margin-top: .12rem; accent-color: var(--color-primary); }
.smc-overview #smc-wizard .sw-opt:has(input:checked) input { accent-color: var(--color-on-primary); }
.smc-overview #smc-wizard .sw-row .sw-opt { min-width: 6.6rem; justify-content: center; }

/* Conditional questions read as a reply to the question above them. */
.smc-overview #smc-wizard #sw-q1b-step,
.smc-overview #smc-wizard #sw-q6-step {
  margin-left: 1.1rem;
  border-left-width: 5px;
  background: var(--color-bg-alt);
}

/* Decorative context art, top-right of the first question card. */
.smc-overview .smc-question-art {
  position: absolute;
  right: 1.4rem;
  top: 1.1rem;
  width: 6.4rem;
  height: 4.8rem;
  pointer-events: none;
}
.smc-overview .smc-question-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: #f6f0e5;
}
.smc-overview .smc-question-art + .sw-step legend,
.smc-overview .smc-question-art + .sw-step .sw-hint { max-width: calc(100% - 7rem); }

.smc-overview #smc-wizard-go,
.smc-overview #smc-wizard-reset {
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: .8rem 1.25rem;
  min-height: 48px;
  font-weight: 700;
  font-size: .95rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  cursor: pointer;
  filter: none;
}
.smc-overview #smc-wizard-go:hover,
.smc-overview #smc-wizard-reset:hover { border-color: var(--color-accent); }
.smc-overview #smc-wizard-reset {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-control-border);
}
.smc-overview .smc-wizard-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; }

/* ---------- Results ---------- */

.smc-overview #smc-wizard-result { margin-top: 1.75rem; scroll-margin-top: 1.5rem; }
.smc-overview .smc-results-heading { margin: 1.75rem 0 1.1rem; }
.smc-overview .smc-results-heading h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 .35rem;
}
.smc-overview .smc-results-heading p { font-size: .86rem; margin: 0; }

.smc-overview .result-card {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin: .85rem 0;
  overflow: hidden;
}
.smc-overview .result-card .sw-block {
  border: 0;
  border-radius: 0;
  background: none;
  margin: 0;
  padding: 1.15rem 1.3rem;
}
.smc-overview .result-card .sw-block h4 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.22;
  color: var(--color-text);
  margin: 0 0 .4rem;
}
.smc-overview .result-card .sw-block p { font-size: .92rem; }
.smc-overview .result-card .sw-rate {
  display: block;
  font-family: var(--font-sans);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-top: .5rem;
}
.smc-overview .result-card details.sw-collapsed {
  border: 0;
  border-radius: 0;
  margin: 0;
}
.smc-overview .result-card details.sw-collapsed summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.25rem;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.22;
  color: var(--color-text);
  background: none;
}
.smc-overview .result-card details.sw-collapsed summary::after { content: none; }
.smc-overview .result-card details.sw-collapsed[open] summary { border-bottom: 1px solid var(--color-border); }
.smc-overview .result-card .smc-card-art {
  width: 5.25rem;
  height: 4.4rem;
  object-fit: contain;
  background: #f5efe4;
  border-radius: var(--radius-sm);
  grid-column: 2;
  grid-row: 1 / 3;
}
.smc-overview .result-card .sw-block > .smc-card-art {
  float: right;
  margin: 0 0 .75rem 1.25rem;
}
.smc-overview .result-card .smc-expand-label {
  font-family: var(--font-sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--color-primary);
  grid-column: 1;
  margin-top: .25rem;
}
.smc-overview .result-card .smc-card-footer {
  display: flex;
  align-items: center;
  padding: .5rem 1.3rem;
  border-top: 1px solid var(--color-border);
  clear: both;
}
.smc-overview .result-card .smc-card-footer a {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}
.smc-overview .result-card .smc-card-footer a:hover { text-decoration: underline; }
.smc-overview .result-card .sw-pair-note { margin: .9rem 1.3rem; }
.smc-overview #smc-wizard-result .sw-appeal,
.smc-overview #smc-wizard-result .sw-warn {
  padding: 1.25rem;
  background: var(--color-bg-alt);
  border: 2px solid var(--color-accent);
  border-left-width: 2px;
  border-radius: var(--radius-md);
  margin: 0 0 1.1rem;
}
.smc-overview #smc-wizard-result .sw-appeal h4 { font-size: 1.15rem; color: var(--color-text); }
.smc-overview #smc-wizard-result .sw-appeal p,
.smc-overview #smc-wizard-result .sw-appeal li { font-size: .92rem; }
.smc-overview #smc-wizard-result .sw-disclaimer { font-size: .82rem; line-height: 1.7; padding-top: 1rem; }

/* ---------- Levels and rates ---------- */

.smc-overview .smc-rate-note {
  font-size: .82rem;
  line-height: 1.65;
  padding: .75rem 1rem;
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface);
  margin: 0 0 1.5rem;
}

.smc-overview .smc-level-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
/* Reference panels, not links: the whole card is not clickable, so the
   accent border here is a grouping device and card-fx does not apply. The
   one clickable thing inside is the Read-the-guide action row. */
.smc-overview .smc-level-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 1.3rem;
  min-width: 0;
}
.smc-overview .smc-level-heading { display: flex; justify-content: space-between; gap: .9rem; align-items: flex-start; }
.smc-overview .smc-level-heading > div { min-width: 0; }
/* `break-word` rather than `anywhere`: the site `.container` is 849px wide,
   not the prototype's 1200px shell, so three cards are ~271px each and
   `anywhere` broke "combinations" and "Intermediate" mid-word on a line that
   had room for them. `break-word` only breaks a word that genuinely cannot
   fit, and `minmax(0, 1fr)` on the track is what stops one long name pushing
   the grid sideways. */
.smc-overview .smc-level-card h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--color-text);
  margin: 0;
  overflow-wrap: break-word;
}
.smc-overview .smc-level-card .smc-eyebrow { margin: 0 0 .25rem; }
.smc-overview .smc-level-card .smc-card-art {
  width: 4.5rem;
  height: 4rem;
  object-fit: contain;
  background: #f5efe4;
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}
.smc-overview .smc-level-card > p { font-size: .88rem; margin: 1rem 0; }
.smc-overview .smc-rate-line {
  margin-top: auto;
  padding: .85rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.smc-overview .smc-rate-line strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.smc-overview .smc-rate-line span { display: block; font-size: .76rem; line-height: 1.5; color: var(--color-text-muted); margin-top: .2rem; }
.smc-overview .smc-level-card > .smc-text-action { margin-top: .5rem; }

/* The full 13-row chart keeps its exact selectors; only the frame changes. */
.smc-overview #smc-levels { margin-top: 1.6rem; border: 2px solid var(--color-accent); border-radius: var(--radius-md); }
.smc-overview #smc-levels > details > summary { padding: 1.1rem 1.3rem; min-height: 48px; }
.smc-overview #smc-levels .details-body { padding: 0 1.3rem 1.3rem; }

/* ---------- Reading ---------- */

/* The reading sections sit in the shared reading shell since 2026-09-14
   (owner, guide reading-layout Chunk 1): /css/guide-reading.css draws the
   gold-bordered rows, and the contents rail and Expand all live beside them. */
.smc-overview .smc-reading .guide-section h2 { border-bottom: none; padding-bottom: 0; }
/* The heading's own vertical margins live inside the flex summary, so they
   inflate the row to 101px and push the heading and the disclosure caret off
   the centre line. Zeroed for the headings that sit in a summary only. */
.smc-overview #smc-levels > details > summary h2,
.smc-overview .smc-reading .guide-section > details > summary h2 { margin: 0; }

/* ---------- Visual guides ---------- */

/* The site-wide visual-guide card, laid out three-up. Inside this grid the
   thumbnail shows the FULL composition (object-fit: contain) instead of the
   default top crop, because these previews are supplied as whole-poster
   thumbnails. Nothing here enlarges the card (STYLE_GUIDE 1b). */
.smc-overview .smc-visual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
.smc-overview .smc-visual-grid .visual-guide-card { margin: 0; max-width: none; border: 2px solid var(--color-accent); }
.smc-overview .smc-visual-grid .visual-guide-inline > a { width: 84px; height: 105px; }
.smc-overview .smc-visual-grid .visual-guide-inline > a img { object-fit: contain; object-position: center; background: #f5efe4; }

/* ---------- Advisor ---------- */

.smc-overview .smc-advisor { margin-top: 2.5rem; }

/* ---------- Tablet ---------- */

@media (max-width: 1050px) {
  .smc-overview .smc-finder-layout { grid-template-columns: minmax(0, 1fr) 14.5rem; gap: 1.25rem; }
  .smc-overview #smc-wizard .sw-opts.sw-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smc-overview .smc-level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smc-overview .smc-visual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smc-overview .smc-entry-num { display: none; }
}

/* ---------- Phone ---------- */

@media (max-width: 740px) {
  .smc-overview .smc-entry-nav { grid-template-columns: 1fr 1fr; gap: .55rem; margin-bottom: 1.75rem; }
  .smc-overview .smc-entry { padding: .8rem .75rem; gap: .45rem; }
  .smc-overview a.smc-entry { grid-column: 1 / -1; }
  .smc-overview .smc-entry strong { font-size: .88rem; }
  .smc-overview .smc-entry small { font-size: .74rem; margin-top: .1rem; }
  .smc-overview button.smc-entry > span:last-child { display: none; }

  .smc-overview .smc-section-top { align-items: flex-start; gap: .75rem; }
  .smc-overview .smc-section-top h2 { font-size: 1.5rem; }
  .smc-overview .smc-quiet-label { max-width: none; padding: 0; border: 0; }

  .smc-overview .smc-finder-layout { display: block; }
  .smc-overview .smc-finder-aside { position: static; margin-top: 1.5rem; }
  .smc-overview .smc-aside-note { display: none; }

  .smc-overview #smc-wizard .sw-step { padding: 1.1rem 1rem; margin-bottom: .8rem; }
  .smc-overview #smc-wizard legend { font-size: 1.1rem; }
  .smc-overview .smc-question-art { width: 4.5rem; height: 4.1rem; right: 1rem; top: 1rem; }
  .smc-overview .smc-question-art + .sw-step legend { max-width: calc(100% - 5.2rem); }
  .smc-overview .smc-question-art + .sw-step .sw-hint { max-width: 100%; margin-top: 1rem; }
  .smc-overview #smc-wizard .sw-opts.sw-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .smc-overview #smc-wizard .sw-opt { font-size: .82rem; padding: .65rem .55rem; gap: .45rem; min-height: 47px; }
  .smc-overview #smc-wizard .sw-row .sw-opt { min-width: 5.3rem; flex: 1 1 auto; }
  .smc-overview #smc-wizard .sw-row .sw-opt-t { text-align: center; }
  .smc-overview #smc-wizard .sw-row:has(input[name="q1b"]) { display: grid; grid-template-columns: 1fr; }
  .smc-overview #smc-wizard .sw-row:has(input[name="q1b"]) .sw-opt { justify-content: flex-start; }
  .smc-overview #smc-wizard .sw-row:has(input[name="q1b"]) .sw-opt-t { text-align: left; }
  .smc-overview #smc-wizard #sw-q1b-step,
  .smc-overview #smc-wizard #sw-q6-step { margin-left: .6rem; }
  .smc-overview .smc-wizard-actions { display: block; }
  .smc-overview #smc-wizard-go { width: 100%; margin-top: .3rem; }
  .smc-overview #smc-wizard-reset { width: 100%; margin: .55rem 0 0; padding: .6rem; min-height: 44px; }

  .smc-overview .result-card details.sw-collapsed summary { padding: 1rem; grid-template-columns: minmax(0, 1fr) 4.6rem; gap: .6rem; font-size: 1.12rem; }
  .smc-overview .result-card .smc-card-art { width: 4.6rem; height: 4.1rem; }
  .smc-overview .result-card .sw-block { padding: 1rem; }
  .smc-overview .result-card .sw-block h4 { font-size: 1.15rem; }
  .smc-overview .result-card .smc-card-footer { padding: .45rem 1rem; }
  .smc-overview .result-card .sw-pair-note { margin: .85rem 1rem; }

  .smc-overview .smc-level-grid { grid-template-columns: 1fr; gap: .85rem; }
  .smc-overview .smc-level-card { padding: 1.15rem; }
  .smc-overview .smc-level-card h3 { font-size: 1.2rem; }
  .smc-overview .smc-level-card .smc-card-art { width: 5.6rem; height: 5.1rem; }
  .smc-overview .smc-section { margin-top: 2rem; padding-top: 1.4rem; }
  .smc-overview .smc-visual-grid { grid-template-columns: 1fr; gap: .85rem; }
  .smc-overview #smc-levels > details > summary { padding: .95rem 1rem; }
  .smc-overview #smc-levels .details-body { padding: 0 1rem 1rem; }

  /* The 13-row chart becomes labelled records rather than a sideways scroll.
     The <thead> stays in the accessibility tree (clip-path, not display:none)
     so every cell keeps its semantic header, and each cell prints its own
     label so no field is lost. */
  .smc-overview .smc-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  .smc-overview .smc-table,
  .smc-overview .smc-table tbody,
  .smc-overview .smc-table tr,
  .smc-overview .smc-table td { display: block; width: auto; }
  .smc-overview .smc-table tr { border-bottom: 2px solid var(--color-accent); padding: .85rem 0; }
  .smc-overview .smc-table tr:hover { background: none; }
  .smc-overview .smc-table td { padding: .25rem 0; border: none; }
  .smc-overview .smc-table td:first-child { font-size: 1.15rem; }
  .smc-overview .smc-table td:nth-child(2) { font-size: .86rem; }
  .smc-overview .smc-table td:nth-child(3) { font-size: 1.15rem; }
  .smc-overview .smc-table td:nth-child(3)::after {
    content: ' / month, reference rate';
    font-size: .72rem;
    font-weight: 400;
    color: var(--color-text-muted);
  }
  .smc-overview .smc-table td:last-child { font-size: .82rem; margin-top: .35rem; }
  .smc-overview .smc-table colgroup { display: none; }
}

/* ---------- Narrow phone ---------- */

@media (max-width: 360px) {
  .smc-overview #smc-wizard .sw-opts.sw-checklist { grid-template-columns: 1fr; }
  .smc-overview .smc-question-art { width: 4rem; height: 3.8rem; }
  .smc-overview .smc-question-art + .sw-step legend { max-width: calc(100% - 4.6rem); }
  .smc-overview .smc-level-heading { gap: .6rem; }
  .smc-overview .smc-level-card h3 { font-size: 1.05rem; }
  .smc-overview .smc-level-card .smc-card-art { width: 3.9rem; height: 4rem; }
  .smc-overview .result-card details.sw-collapsed summary { grid-template-columns: minmax(0, 1fr) 4rem; }
  .smc-overview .result-card .smc-card-art { width: 4rem; height: 3.9rem; }
}

/* ---------- Dark mode (both mechanisms) ---------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .smc-overview .smc-question-art img,
  :root:not([data-theme="light"]) .smc-overview .smc-card-art,
  :root:not([data-theme="light"]) .smc-overview .smc-visual-grid .visual-guide-inline > a img { background: #23282f; }
}
:root[data-theme="dark"] .smc-overview .smc-question-art img,
:root[data-theme="dark"] .smc-overview .smc-card-art,
:root[data-theme="dark"] .smc-overview .smc-visual-grid .visual-guide-inline > a img { background: #23282f; }