/* ──────────────────────────────────────────────────────────────────
   diagnostic-ui.css — Sprint 15 (2026-07-24)
   ONE source of truth for the question-card interaction layer across
   ALL editions (Clubs, Leagues, Events). Clubs is the reference
   implementation ("leading indicator"); Leagues + Events follow.

   Covers: question card, category chip, question prompt/description,
   "Why this matters", answer options (hover/selected/radio),
   bold option label + regular option description, and the two
   flag toggles below each scored question:
     · "Not sure"        → confidence band (answer still scores, 0.5 weight)
     · "Not applicable"  → question excluded from the score
   Loaded AFTER each page's inline <style>, so equal-specificity
   rules here win. Do not re-declare these selectors locally.
   ────────────────────────────────────────────────────────────────── */

/* ─── Question card ─── */
.question-card, .q-card {
  background: var(--white, #FFFDF9);
  border: 1.5px solid var(--line-soft, #EAE8E3);
  border-radius: var(--r-lg, 3px);
  padding: 28px 32px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(13, 61, 45, 0.05));
}

/* ─── Category chip (Clubs .cat-chip look, applied to Leagues/Events .q-cat) ─── */
.q-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink, #0D3D2D);
  color: var(--cream, #F2EFE8) !important;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.q-cat::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold, #EB7033);
}

/* ─── Question prompt + description (Clubs reference: 19px sans 500) ─── */
.question-prompt, .q-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink, #0D3D2D);
  margin: 0 0 8px;
  font-weight: 500;
}
.question-desc, .q-desc {
  font-size: 14px;
  color: var(--muted, #4A4A48);
  line-height: 1.55;
  margin: 0 0 12px;
  max-width: 760px;
}

/* p33 Block D · dunkle Kopfzone der Fragenansicht
   ------------------------------------------------
   Eine einzige dunkelgruene Flaeche traegt Kontextzeile, Abschnittstitel,
   Schrittleiste und Fortschritt. Alle Schriften darauf sind cremeweiss,
   die Betonungen orange in der aufgehellten Abstufung (#F0925E), weil das
   dunkle Orange #953B0F auf Dunkelgruen nicht lesbar ist. */
.quest-topband {
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--r-xl);
  padding: 32px 36px 28px;
  margin-bottom: 32px;
}
.quest-topband .quest-context { color: rgba(247, 245, 240, 0.66); margin-bottom: 10px; }
.quest-topband .quest-context strong { color: #F0925E; }
.quest-topband .quest-header { margin-bottom: 0; }
.quest-topband .quest-header h2 { color: var(--cream); }
.quest-topband .quest-header .lead { color: rgba(247, 245, 240, 0.72); }
.quest-topband .btn-ghost { color: rgba(247, 245, 240, 0.80); }
.quest-topband .btn-ghost:hover { color: var(--cream); }

/* Schrittkacheln auf dunklem Grund: offen = zarte helle Flaeche,
   erledigt = etwas kraeftiger, laufend = cremeweiss gefuellt mit dunkler
   Schrift, damit der laufende Schritt der hellste Punkt der Zone ist. */
.quest-topband .step-pill {
  background: rgba(247, 245, 240, 0.08);
  color: rgba(247, 245, 240, 0.66);
}
/* Die Grundregeln daempfen Schrittnummer und Anzahl zusaetzlich per Opazitaet.
   Auf dunklem Grund faellt der Kontrast damit unter das Lesbarkeitsmass,
   deshalb wird die Daempfung hier aufgehoben und ueber die Farbe geregelt. */
.quest-topband .step-pill .step-num,
.quest-topband .step-pill .step-count {
  color: rgba(247, 245, 240, 0.74);
  opacity: 1;
}
.quest-topband .step-pill.done {
  background: rgba(247, 245, 240, 0.16);
  color: rgba(247, 245, 240, 0.86);
  border-top-color: #F0925E;
}
.quest-topband .step-pill.done .step-num,
.quest-topband .step-pill.done .step-count { color: rgba(247, 245, 240, 0.88); opacity: 1; }
.quest-topband .step-pill.active {
  background: var(--cream);
  color: var(--ink);
  border-top-color: var(--gold);
}
.quest-topband .step-pill.active .step-num,
.quest-topband .step-pill.active .step-count { color: #B4551D; opacity: 1; }

.quest-topband .progress-wrap { margin: 20px 0 0; }
.quest-topband .progress-bar-bg { background: rgba(247, 245, 240, 0.16); }
.quest-topband .progress-label { color: rgba(247, 245, 240, 0.66); }

@media (max-width: 720px) {
  .quest-topband { padding: 24px 20px 22px; border-radius: var(--r-lg); }
}

/* Leagues und Events benennen zwei Bausteine anders. Beide werden hier
   mitgefuehrt, damit alle drei Ausgaben identisch aussehen. */
/* Dort ist der Fortschrittsbereich eine klebende cremeweisse Leiste mit
   eigenem Trennstrich. Innerhalb der dunklen Zone waere das ein weisser
   Block mitten im Dunkelgruen, deshalb wird beides hier zurueckgenommen. */
.quest-topband .progress-wrap {
  position: static;
  background: transparent;
  border-bottom: none;
  padding: 0;
  margin: 20px 0 0;
}
.quest-topband .progress-bar { background: rgba(247, 245, 240, 0.16); }
.quest-topband .progress-meta { color: rgba(247, 245, 240, 0.74); }
.quest-topband .progress-meta .sd { color: rgba(247, 245, 240, 0.74); }
.quest-topband .quest-subtitle { color: rgba(247, 245, 240, 0.72); }
.quest-topband h2 { color: var(--cream, #F2EFE8); }

/* ─── "Why this matters" line (Sprint 15: every question answers
       "What is this?" + "Why is it important?") ─── */
/* p33 Block D: Der Kasten steht jetzt auf Dunkelgruen mit orangem Linksrand,
   so wie im verabschiedeten Entwurf. Er hebt sich damit deutlich von der
   cremeweissen Fragenflaeche ab, ohne ein zweiter Antwortkasten zu wirken. */
.question-why, .q-why {
  display: block;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(247, 245, 240, 0.84);
  background: var(--ink, #0D3D2D);
  border-left: 4px solid var(--gold, #EB7033);
  border-radius: 0 4px 4px 0;
  padding: 14px 18px;
  margin: 0 0 22px;
  max-width: 760px;
}
.question-why strong, .q-why strong {
  color: #F0925E;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 6px;
}

/* ─── Options (Clubs reference) ─── */
.options, .q-options { display: flex; flex-direction: column; gap: 10px; }
.option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;
  padding: 14px 16px;
  border: 1.5px solid var(--line-soft, #EAE8E3);
  border-radius: var(--r-md, 2px);
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--paper, #F7F5F0);
  align-items: start;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.option:hover {
  border-color: var(--gold-soft, #F0925E);
  background: var(--sand, #EAE8E3);
}
.option.selected {
  border-color: var(--gold, #EB7033);
  background: var(--cream, #F2EFE8);
  box-shadow: 0 0 0 3px rgba(235, 112, 51, 0.12);
}
.option input[type="radio"] {
  grid-row: 1; grid-column: 1; align-self: center; margin-top: 2px;
  accent-color: var(--gold, #EB7033);
  width: 18px; height: 18px;
  cursor: pointer;
}
.option-text { grid-row: 1; grid-column: 2; align-self: center; }
.option-score { grid-row: 1; grid-column: 3; align-self: center; }
/* Sprint 15: option label is BOLD, description below is regular */
.option-text {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-soft, #1E4C39);
  font-weight: 600;
}
.option.selected .option-text { color: var(--ink, #0D3D2D); font-weight: 600; }
.option-description {
  grid-row: 2;
  grid-column: 2 / 4;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted, #4A4A48);
  margin-top: 2px;
  font-weight: 400;
}
.option.selected .option-description { color: var(--ink-soft, #1E4C39); }
/* R2 (2026-05-26): raw score chips stay hidden everywhere */
.option-score { display: none !important; }
/* Q4 (2026-05-30): option-dimming removed — kept as no-op */
.option.option-dim, .option.option-dim:hover, .option.option-dim.selected { opacity: 1; }
/* N/A active → options visually parked */
.options-na .option { opacity: 0.45; }
.options-na .option:hover { opacity: 0.75; }

/* ─── Flag row: "Not sure" + "Not applicable" (two SEPARATE toggles) ─── */
.qflags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 14px;
}
.notsure-toggle, .na-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 1px dashed var(--line, #E1DFDB);
  border-radius: 3px;
  font-size: 13px; color: var(--muted);
  cursor: pointer; user-select: none;
  transition: all .12s ease;
  margin-top: 0;
  background: transparent;
  font-family: inherit;
}
.notsure-toggle:hover, .na-toggle:hover { color: var(--ink, #0D3D2D); border-color: var(--gold, #EB7033); }
.notsure-toggle input, .na-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.notsure-toggle .notsure-mark, .na-toggle .notsure-mark {
  width: 14px; height: 14px;
  border: 1.5px solid var(--line, #E1DFDB);
  border-radius: 2px;
  display: inline-block; flex-shrink: 0;
  position: relative;
}
.notsure-toggle.on, .na-toggle.on {
  color: #953B0F;
  border-color: var(--gold, #EB7033);
  border-style: solid;
  background: var(--white);
}
.notsure-toggle.on .notsure-mark, .na-toggle.on .notsure-mark {
  background: var(--gold, #EB7033);
  border-color: var(--gold, #EB7033);
}
.notsure-toggle.on .notsure-mark::after, .na-toggle.on .notsure-mark::after {
  content: ''; position: absolute;
  left: 3px; top: 0px; width: 4px; height: 8px;
  border: solid #F7F5F0; border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}

/* Finding 1 (2026-08-17) · Note under the flag row when the engine set the
   not-applicable flag itself. It is a flex item inside .qflags-row, so it takes
   the full basis to drop onto its own line under both toggles. */
.na-auto-note {
  flex: 0 0 100%;
  margin: 2px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--gold, #EB7033);
  background: var(--white, #FFFDF9);
  border-radius: 0 3px 3px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ─── Mobile ─── */
@media (max-width: 720px) {
  .question-card, .q-card { padding: 20px 18px; }
  .na-auto-note { font-size: 12px; padding: 9px 10px; }
  .question-prompt, .q-title { font-size: 16px; }
  .option { padding: 12px; }
  .option-text { font-size: 14px; }
  .qflags-row { flex-direction: column; align-items: flex-start; }
}

/* Sprint 16.1 — keep the brand's internal capitals inside uppercase labels */
.brandcase { text-transform: none; }

/* ------------------------------------------------------------------
   Knopf "Save & Resume Later" in der Fragenkopfzone.
   p33 Block E2: Stile aus der Zeile in HTML hierher gezogen, Emoji durch
   ein Lesezeichen als Strichsymbol ersetzt, Eckenrundung an die
   Formensprache angeglichen (hoechstens vier Pixel) und ein Umbruch der
   Beschriftung auf schmalen Schirmen verhindert.
   ------------------------------------------------------------------ */
.btn-save-resume {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--cream, #F2EFE8);
  border: 1px solid var(--gold, #EB7033);
  border-radius: var(--r-lg, 3px);
  color: var(--ink, #0D3D2D);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn-save-resume:hover {
  background: var(--ink, #0D3D2D);
  color: var(--cream, #F2EFE8);
}
.btn-save-resume .bsr-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  display: block;
}
.btn-save-resume .bsr-code {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 400;
  color: var(--coral-dark, #B4551D);
}
.btn-save-resume:hover .bsr-code { color: var(--gold-soft, #F0925E); }

@media (max-width: 640px) {
  .btn-save-resume { padding: 7px 10px; font-size: 12px; }
  .btn-save-resume .bsr-icon { width: 14px; height: 14px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   E5 (2026-08-04) · Kennzeichnung des Beispiel-Durchlaufs
   Von allen drei Editionen genutzt. Farbe ist die Warnfarbe der Palette,
   damit ein Beispielbericht nicht mit einer eigenen Erhebung verwechselt wird.
   ══════════════════════════════════════════════════════════════════════════ */
.pp-example-banner {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 18px;
  padding: 14px 18px;
  background: rgba(105, 8, 8, 0.06);
  border: 1px solid rgba(105, 8, 8, 0.28);
  border-left: 3px solid #690808;
  border-radius: 2px;
}
.pp-example-banner .pp-example-tag {
  flex: 0 0 auto;
  background: #690808; color: #F7F5F0;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 2px;
  white-space: nowrap;
}
.pp-example-banner .pp-example-text {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; line-height: 1.55;
  color: #1A1A1A;
}
.pp-example-banner .pp-example-text strong { font-weight: 700; }
@media (max-width: 620px) {
  .pp-example-banner { flex-direction: column; gap: 8px; padding: 12px 14px; }
  .pp-example-banner .pp-example-text { font-size: 13px; }
}

/* ============================================================================
   p86 Welle zwei, Punkt vier, Etappe C (2026-08-04) · Tier-Herkunft
   ----------------------------------------------------------------------------
   Der Hinweis erscheint ausschliesslich an der Umsatzfrage in Leagues und
   Events. Er darf den "Why this matters"-Block nicht kopieren, sonst stehen
   zwei gleich aussehende Kaesten uebereinander und keiner wird gelesen. Also:
   heller Grund statt dunkler, Attention-Blau statt Gold als Kante, und die
   Ueberschrift als kleine Grossbuchstabenzeile.
   ========================================================================== */
.q-tier-note {
  display: block;
  max-width: 760px;
  margin: 0 0 22px;
  padding: 14px 18px;
  background: rgba(0, 111, 138, 0.07);
  border: 1px solid rgba(0, 111, 138, 0.28);
  border-left: 4px solid #006F8A;
  border-radius: 0 4px 4px 0;
}
.q-tier-note-h {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #00505F;
  margin-bottom: 6px;
}
.q-tier-note-b {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink, #0D3D2D);
}
.q-tier-note-now {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 111, 138, 0.22);
  font-size: 12.5px;
  color: var(--ink-soft, #1E4C39);
}
.q-tier-note-now strong { color: #00505F; }

@media (max-width: 640px) {
  .q-tier-note { padding: 12px 14px; }
  .q-tier-note-b { font-size: 13px; }
}