/* IT health check: content styles. Loaded without blocking first paint (index.html, data-defer). The scene geometry
   (.health, .health__pin, .health__slot and the pin grids) stays in sections.css so story.js measures it right at boot. */
.hc-score, .hc-deck { pointer-events: auto; }

/* Score: ring | verdict and progress, then the disclaimer. healthcheck.js sets --score (0 to 100) and data-tone. */
.hc-score { --score: 0; --tone: var(--accent); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 16px; }
.hc-score[data-tone="fair"] { --tone: var(--warn); }
.hc-score[data-tone="poor"] { --tone: var(--risk); }
.hc-ring { position: relative; width: clamp(88px, 14vh, 132px); aspect-ratio: 1; }
.hc-ring svg { width: 100%; height: 100%; rotate: -90deg; }
.hc-ring circle { fill: none; stroke-width: 9; }
.hc-ring__track { stroke: var(--line); }
.hc-ring__fill { stroke: var(--tone); stroke-linecap: round; stroke-dasharray: var(--score) 100; transition: stroke-dasharray .7s var(--ease), stroke .4s; }
.hc-score[data-tone="none"] .hc-ring__fill { visibility: hidden; } /* the round cap would leave a dot at 0 */
.hc-ring__value { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; gap: 2px; font: 600 clamp(1.4rem, 3.6vh, 2.2rem)/1 var(--font-display); letter-spacing: -.03em; }
.hc-ring__max { font: 500 .7rem/1 var(--mono); letter-spacing: 0; color: var(--muted); }
.hc-verdict { margin: 0; font: 600 1.1rem/1.3 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.hc-progress { margin: 6px 0 0; font: 500 .72rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hc-disclaimer { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--muted); }

/* Questions: native radios styled as segments (Space, the arrow keys and Tab work as usual). Each radio stays focusable
   but invisible; its label is the segment. The legend floats so it never sits in the fieldset's border; the segments
   (a grid, so a new formatting context) go below it, or beside it in a wide column. */
.hc-q { margin: 0; padding: 0; border: 0; min-width: 0; }
.hc-q .nb { white-space: nowrap; }
.hc-q legend { float: left; width: 100%; padding: 0; margin: 0 0 6px; font: 600 .9rem/1.3 var(--font); color: var(--ink); }
.segments { clear: left; position: relative; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: var(--line); }
/* --cols: one column per answer, set by healthcheck.js. Phones fit three short answers side by side; four need very short labels. */
.segments input { position: absolute; left: 4px; top: 4px; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.segments label { display: grid; place-items: center; min-height: 44px; padding: 4px 10px; border-radius: 999px; font: 600 .8rem/1.15 var(--font); text-align: center; color: var(--ink-2); cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
@media (hover: hover) { /* touch browsers keep :hover after a tap, which would leave the last tapped segment looking lit */
  .segments label:hover { color: var(--ink); background: color-mix(in srgb, var(--surface-solid) 60%, transparent); }
}
/* The selected segment is the one with the accent ring (4.3:1 or more against the track and the pill in both themes, WCAG 1.4.11)
   and the heavier text; in dark the pill is also lighter than the track, not darker. */
.segments input:checked + label { background: color-mix(in srgb, var(--accent) var(--seg-tint, 0%), var(--surface-solid)); color: var(--ink); font-weight: 700; box-shadow: 0 6px 18px -10px rgb(var(--shadow) / .5), inset 0 0 0 2px var(--accent); }
.segments input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
@container (min-width: 440px) {
  .hc-q legend { width: 38%; margin: 0; padding: 4px 14px 0 0; }
  .hc-q .segments { clear: none; }
}

/* Result: shown once all five are answered. */
.hc-result { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 var(--edge), 0 24px 60px -30px rgb(var(--shadow) / .4); }
.hc-result h3 { margin: 0; font: 600 1.1rem/1.2 var(--font-display); letter-spacing: -.015em; }
.hc-result ul { text-wrap: pretty; margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: .9rem; line-height: 1.4; color: var(--ink-2); }
.hc-result .btn { justify-self: start; }
.hc-noscript { margin: 24px 0 0; max-width: 60ch; color: var(--ink-2); }
.hc-noscript a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (forced-colors: active) {
  .segments label { border: 2px solid ButtonBorder; }
  .segments input:checked + label { border-color: Highlight; }
  .hc-ring__fill { stroke: Highlight; }
}
/* Phones and tablets: the question cards (max-width: 1000px is shared with main.js and ui.js; see hero.css). */
@media (max-width: 1000px) {
  .hc-ring { width: 64px; }
  .hc-ring circle { stroke-width: 11; }
  .hc-ring__value { font-size: 1.15rem; }
  .hc-ring__max { display: none; }
  .hc-verdict { font-size: 1rem; }
  .hc-disclaimer { font-size: .78rem; }
  .hc-deck {
    flex: none; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter); /* the padding leaves room for the focus ring */
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  }
  .hc-list { display: contents; }
  .hc-q, .hc-result { flex: 0 0 min(86%, 420px); scroll-snap-align: start; }
  .hc-q { padding: 14px; border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--edge); }
  .hc-result { padding: 14px; }
  .hc-result .btn { justify-self: stretch; justify-content: center; }
  .segments label { padding: 4px 6px; font-size: .78rem; }
  .hc-q { display: grid; align-content: center; } /* cards share the deck's height: the question sits mid-card */
}
/* Pinned phones: the deck is as tall as the result card from the start, so the globe (which takes the height the deck leaves)
   never resizes when the result appears. 218px = the result card (about 210px: title, two two-line risks, button) plus the
   deck's 4px padding; longer risk copy than about 70 characters per line pair makes the card, and the globe, move again. */
@media (max-width: 1000px) and (min-height: 541px) {
  .hc-deck { min-height: 218px; }
}
/* Small phones (700px tall or less) tighten the result card so the globe keeps a usable size. */
@media (max-width: 1000px) and (min-height: 541px) and (max-height: 700px) {
  .hc-deck { min-height: 180px; } /* the tightened card (about 172px) plus the deck padding */
  .hc-result { padding: 10px 14px; gap: 8px; }
  .hc-result h3 { font-size: .95rem; }
  .hc-result ul { gap: 4px; font-size: .82rem; line-height: 1.3; }
  .hc-result .btn { min-height: 44px; }
}
/* No story (no JS, a failed init): the questions stack under the score. */
html:not(.story) .hc-score { margin-top: 28px; max-width: 520px; }
html:not(.story) .hc-deck { display: grid; gap: 16px; margin: 28px 0 0; padding: 0; overflow: visible; max-width: 640px; }
html:not(.story) .hc-list { display: grid; gap: 16px; }