/* Layout: one instrument-panel card, one question at a time, result shown as three 3-segment meters (one per question). */
:root {
  --stl-page: #eef1f6;
  --stl-card: #ffffff;
  --stl-ink: #142033;
  --stl-muted: #55627a;
  --stl-line: #d5dbe5;
  --stl-chip: #e8edf8;
  --stl-accent: #1f4fd8;
  --stl-accent-ink: #ffffff;
  --stl-good: #1b7f4b;
  --stl-warn: #a35f00;
  --stl-bad: #c2321f;
  --stl-good-tint: #e3f4ea;
  --stl-warn-tint: #fbf0dc;
  --stl-bad-tint: #fbe6e2;
  --stl-seg-off: #dde3ed;
  --stl-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --stl-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --stl-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --stl-page: #0e1522;
    --stl-card: #172033;
    --stl-ink: #e8edf6;
    --stl-muted: #9aa7bc;
    --stl-line: #2c3850;
    --stl-chip: #22304b;
    --stl-accent: #7a9bff;
    --stl-accent-ink: #0e1522;
    --stl-good: #4cc38a;
    --stl-warn: #e5a23a;
    --stl-bad: #ff7a66;
    --stl-good-tint: #153126;
    --stl-warn-tint: #382a12;
    --stl-bad-tint: #3b1d19;
    --stl-seg-off: #2a3650;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --stl-page: #0e1522;
  --stl-card: #172033;
  --stl-ink: #e8edf6;
  --stl-muted: #9aa7bc;
  --stl-line: #2c3850;
  --stl-chip: #22304b;
  --stl-accent: #7a9bff;
  --stl-accent-ink: #0e1522;
  --stl-good: #4cc38a;
  --stl-warn: #e5a23a;
  --stl-bad: #ff7a66;
  --stl-good-tint: #153126;
  --stl-warn-tint: #382a12;
  --stl-bad-tint: #3b1d19;
  --stl-seg-off: #2a3650;
  color-scheme: dark;
}

.stl-quiz, .stl-quiz * { box-sizing: border-box; }
.stl-quiz {
  max-width: 672px;
  margin: 0 auto;
  background: var(--stl-card);
  color: var(--stl-ink);
  border: 1px solid var(--stl-line);
  border-radius: 6px;
  font-family: var(--stl-body);
  font-size: 16px;
  line-height: 1.55;
  overflow: hidden;
}
.stl-quiz h2, .stl-quiz h3, .stl-quiz p, .stl-quiz ul, .stl-quiz ol, .stl-quiz fieldset, .stl-quiz legend { margin: 0; padding: 0; border: 0; }
.stl-quiz ul, .stl-quiz ol { list-style: none; }

.stl-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  padding: 12px 20px;
  background: var(--stl-chip);
  border-bottom: 1px solid var(--stl-line);
  font-family: var(--stl-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stl-muted);
}
.stl-head strong { color: var(--stl-ink); font-weight: 600; }
.stl-body { padding: 24px 20px 28px; display: grid; gap: 20px; }

.stl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stl-steps span { height: 4px; background: var(--stl-seg-off); border-radius: 2px; }
.stl-steps span.is-done { background: var(--stl-accent); }
.stl-count { font-family: var(--stl-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stl-muted); }

.stl-q { display: grid; gap: 16px; min-width: 0; }
.stl-q legend {
  font-family: var(--stl-display);
  font-weight: 700;
  font-size: clamp(26px, 5vw, 34px);
  line-height: 1.1;
  text-wrap: balance;
  margin-bottom: 4px;
}
.stl-opts { display: grid; gap: 8px; }
.stl-opt { position: relative; display: block; }
.stl-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.stl-opt label {
  display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--stl-line);
  border-radius: 4px;
  background: var(--stl-card);
  cursor: pointer;
  min-width: 0;
  overflow-wrap: anywhere;
}
.stl-opt .stl-key {
  display: grid; place-items: center; width: 32px; height: 32px;
  font-family: var(--stl-mono); font-weight: 600; font-size: 14px;
  background: var(--stl-chip); color: var(--stl-muted); border-radius: 3px;
}
.stl-opt label:hover { border-color: var(--stl-accent); }
.stl-opt input:checked + label { border-color: var(--stl-accent); box-shadow: inset 0 0 0 1px var(--stl-accent); background: var(--stl-chip); }
.stl-opt input:checked + label .stl-key { background: var(--stl-accent); color: var(--stl-accent-ink); }
.stl-opt input:focus-visible + label { outline: 3px solid var(--stl-accent); outline-offset: 2px; }

.stl-nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.stl-btn {
  font-family: var(--stl-body); font-size: 16px; font-weight: 600;
  padding: 12px 20px; min-height: 44px;
  border-radius: 4px; border: 1px solid var(--stl-accent);
  background: var(--stl-accent); color: var(--stl-accent-ink);
  cursor: pointer;
}
.stl-btn:hover:not(:disabled) { filter: brightness(1.08); }
.stl-btn:focus-visible { outline: 3px solid var(--stl-accent); outline-offset: 2px; }
.stl-btn:disabled { background: var(--stl-seg-off); border-color: var(--stl-seg-off); color: var(--stl-muted); cursor: not-allowed; }
.stl-btn.stl-ghost { background: transparent; color: var(--stl-ink); border-color: var(--stl-line); }
.stl-btn.stl-ghost:hover:not(:disabled) { border-color: var(--stl-accent); filter: none; }
.stl-btn.stl-ghost[hidden] { display: none; }

/* Result */
.stl-result { display: grid; gap: 24px; }
.stl-result:focus { outline: none; }
.stl-score { display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; align-items: center; }
.stl-big { font-family: var(--stl-mono); font-weight: 600; font-size: clamp(48px, 14vw, 72px); line-height: 1; font-variant-numeric: tabular-nums; }
.stl-big small { font-size: 0.4em; color: var(--stl-muted); font-weight: 500; }
.stl-band { justify-self: start; font-family: var(--stl-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; }
.stl-band.good { background: var(--stl-good-tint); color: var(--stl-good); }
.stl-band.warn { background: var(--stl-warn-tint); color: var(--stl-warn); }
.stl-band.bad { background: var(--stl-bad-tint); color: var(--stl-bad); }
.stl-result h2 { font-family: var(--stl-display); font-weight: 700; font-size: clamp(26px, 5vw, 34px); line-height: 1.1; text-wrap: balance; }
.stl-result p { max-width: 65ch; }

.stl-rows { display: grid; gap: 0; border-top: 1px solid var(--stl-line); }
.stl-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--stl-line); align-items: center; }
.stl-row h3 { font-family: var(--stl-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stl-muted); font-weight: 600; }
.stl-row .stl-ans { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; }
.stl-row .stl-fix { grid-column: 1 / -1; color: var(--stl-muted); font-size: 15px; }
.stl-meter { display: grid; grid-template-columns: repeat(3, 20px); gap: 3px; }
.stl-meter i { height: 10px; background: var(--stl-seg-off); border-radius: 1px; }
.stl-meter.good i.on { background: var(--stl-good); }
.stl-meter.warn i.on { background: var(--stl-warn); }
.stl-meter.bad i.on { background: var(--stl-bad); }
.stl-meter.zero i { background: var(--stl-seg-off); }

.stl-next { padding: 16px 18px; border-left: 3px solid var(--stl-accent); background: var(--stl-chip); border-radius: 0 4px 4px 0; display: grid; gap: 8px; }
.stl-next strong { font-family: var(--stl-display); font-size: 20px; letter-spacing: 0.01em; }
.stl-cta { justify-self: start; text-decoration: none; display: inline-flex; align-items: center; }
.stl-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 480px) {
  .stl-score { grid-template-columns: 1fr; }
  .stl-nav .stl-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .stl-quiz .stl-q, .stl-quiz .stl-result { animation: stl-in 0.22s ease-out; }
  @keyframes stl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* Guard against global form/typography rules from page builders and frameworks */
.stl-quiz { font-size: 16px; margin-block: 0; }
.stl-quiz legend { display: block; float: none; width: auto; max-width: 100%; }
.stl-quiz .stl-opt input { -webkit-appearance: none; appearance: none; border: 0; padding: 0; background: none; box-shadow: none; }
.stl-quiz button, .stl-quiz a.stl-btn { text-transform: none; letter-spacing: normal; box-shadow: none; }
.stl-quiz p { margin: 0; }