/*
 * TestKinks — Neon Pulse Radio Control
 *
 * Visually replaces the native radio input with a custom ring + diamond system.
 * The native <input type="radio"> is hidden using an a11y-safe technique —
 * it remains in the DOM, focusable, and owned by the <label>'s `for` attribute.
 *
 * Depends on: style.css tokens
 * Works with: the existing DOM output of QuizInterface.js._renderOption()
 *
 * RADIO-002 · RADIO-003 · RADIO-004
 *
 * DOM shape this file styles (MUST NOT change):
 *
 *   <label for="q{id}-opt{value}" class="option-label [selected]"
 *          data-answer-value="{1-5}">        ← optional JS addition
 *     <input type="radio" id="q{id}-opt{value}"
 *            name="q{id}" value="{1-5}" [checked]>
 *     <span class="option-text">{label text}</span>
 *   </label>
 *
 * ──────────────────────────────────────────────────────────────────
 * KEY RULES:
 *   1. Never use display:none or visibility:hidden on the native input.
 *   2. .selected is the primary state CSS hook (set by JS change handler).
 *   3. :has(input:checked) is a progressive enhancement fallback.
 *   4. :focus-within on the wrapper provides the focus ring.
 * ──────────────────────────────────────────────────────────────────
 */

/* ================================================================
   SECTION 1: OPTION GRID / ROW SHELL  (RADIO-002 / RADIO-004)
   ================================================================ */

.options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tk-space-3);
  margin-top: var(--tk-space-5);
}

/*
 * .option-label — answer row wrapper
 * Uses flex so the custom radio dot and text align baselines correctly
 * even when the answer label wraps onto multiple lines.
 */
.option-label {
  /* Layout */
  display: flex;
  align-items: flex-start;   /* top-align so long labels don't misalign the dot */
  gap: var(--tk-space-3);
  padding: var(--tk-space-4) var(--tk-space-5);
  min-height: 52px;          /* mobile touch target — slightly above 48px floor */
  cursor: pointer;
  position: relative;

  /* Surface */
  background: var(--tk-elev-1);
  border: 1.5px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--tk-radius-sm);

  /* Motion */
  transition:
    background     var(--tk-duration-fast) var(--tk-ease-out),
    border-color   var(--tk-duration-fast) var(--tk-ease-out),
    box-shadow     var(--tk-duration-fast) var(--tk-ease-out),
    transform      var(--tk-duration-fast) var(--tk-ease-out);

  /* Default: muted lavender idle accent */
  --np-ring-color:    rgba(150, 130, 210, 0.30);  /* lavender tint */
  --np-fill-color:    rgba(150, 130, 210, 0.00);  /* transparent fill */
  --np-glow:          none;
  --np-dot-scale:     0;                           /* inner dot hidden */
}

/* ── Active / click feedback ──────────────────────────────────── */
.option-label:active {
  transform: scale(0.98);
  transition-duration: var(--tk-duration-fast);
}

/* ================================================================
   SECTION 2: VISUALLY HIDDEN NATIVE RADIO  (RADIO-002)
   a11y-safe: stays in flow, focusable, associated via label[for]
   ================================================================ */
.option-label input[type="radio"] {
  /* Accessible hide — in the a11y tree, reachable by Tab */
  opacity: 0;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  overflow: hidden;
}

/* ================================================================
   SECTION 3: CUSTOM RADIO RING + DIAMOND  (RADIO-002)
   ::before = outer ring (22px)
   ::after  = inner diamond (8px rotated square)
   ================================================================ */

/* Outer ring */
.option-label::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;   /* optical alignment with first text line */
  border-radius: 50%;
  border: 1.5px solid var(--np-ring-color);
  background: var(--np-fill-color);
  box-shadow: var(--np-glow);
  transition:
    border-color  var(--tk-duration-fast) var(--tk-ease-out),
    background    var(--tk-duration-fast) var(--tk-ease-out),
    box-shadow    var(--tk-duration-fast) var(--tk-ease-out);

  /* Flex context makes ::before participate in the row layout */
  display: block;
}

/* Inner diamond — positioned inside the ring using absolute */
.option-label::after {
  content: "";
  position: absolute;
  /* Align with the ::before ring: left + padding + half-ring centering */
  left: calc(var(--tk-space-5) + 6px);
  top:  calc(var(--tk-space-4) + 8px);
  width:  8px;
  height: 8px;
  border-radius: 1px;
  background: var(--electric-pink);
  transform: rotate(45deg) scale(var(--np-dot-scale));
  transform-origin: center;
  transition:
    transform   var(--tk-duration-fast) var(--tk-ease-out),
    background  var(--tk-duration-fast) var(--tk-ease-out),
    box-shadow  var(--tk-duration-fast) var(--tk-ease-out);
  box-shadow: none;
}

/* ================================================================
   SECTION 4: HOVER STATE  (RADIO-003)
   ================================================================ */
.option-label:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(150, 130, 210, 0.30);
  --np-ring-color: rgba(150, 130, 210, 0.50);
}

/* ================================================================
   SECTION 5: FOCUS RING  (RADIO-002 / a11y)
   Transfers native focus ring to the visible label wrapper.
   ================================================================ */
.option-label:focus-within {
  outline: 2px solid var(--electric-pink);
  outline-offset: 3px;
  border-radius: var(--tk-radius-sm);
}

/* ================================================================
   SECTION 6: BASE SELECTED STATE  (RADIO-002)
   Triggered by .selected (JS) or :has(input:checked) (progressive)
   ================================================================ */
.option-label.selected,
.option-label:has(input:checked) {
  background: rgba(var(--electric-pink-rgb), 0.08);
  border-color: rgba(var(--electric-pink-rgb), 0.45);
  box-shadow: 0 0 0 3px rgba(var(--electric-pink-rgb), 0.10);

  --np-ring-color:  var(--electric-pink);
  --np-fill-color:  rgba(var(--electric-pink-rgb), 0.15);
  --np-dot-scale:   1;
  --np-glow:        0 0 8px rgba(var(--electric-pink-rgb), 0.40);
}

/* ================================================================
   SECTION 7: 5-POINT INTENSITY MAP  (RADIO-003)
   Primary selector: [data-answer-value] (requires JS one-liner)
   Fallback selector: :nth-child(N) within .options-grid (order-safe)
   ──────────────────────────────────────────────────────────────────
   Value → Label → Accent
   1 → Absolutely Disagree → Colder slate / crimson muted
   2 → Mostly Disagree     → Silver-grey, no glow
   3 → Neutral / Unsure    → Muted lavender (default idle)
   4 → Mostly Agree        → Vibrant electric pink
   5 → Absolutely Agree    → Full Neon Pulse (max emphasis)
   ================================================================ */

/* ── Value 1: Absolutely Disagree ─────────────────────────────── */
/* Idle: cool slate ring */
.option-label[data-answer-value="1"],
.options-grid--scored .option-label:nth-child(1) {
  --np-ring-color: rgba(100, 120, 160, 0.28);
}

.option-label[data-answer-value="1"]:hover,
.options-grid--scored .option-label:nth-child(1):hover {
  --np-ring-color: rgba(100, 120, 160, 0.50);
  border-color: rgba(100, 120, 160, 0.30);
}

.option-label[data-answer-value="1"].selected,
.option-label[data-answer-value="1"]:has(input:checked),
.options-grid--scored .option-label:nth-child(1).selected,
.options-grid--scored .option-label:nth-child(1):has(input:checked) {
  background: rgba(212, 16, 69, 0.06);
  border-color: rgba(212, 16, 69, 0.35);
  box-shadow: 0 0 0 3px rgba(212, 16, 69, 0.08);
  --np-ring-color:  var(--tk-crimson-400);
  --np-fill-color:  rgba(212, 16, 69, 0.12);
  --np-glow:        none;
  --np-dot-scale:   1;
}

.option-label[data-answer-value="1"].selected::after,
.option-label[data-answer-value="1"]:has(input:checked)::after,
.options-grid--scored .option-label:nth-child(1).selected::after,
.options-grid--scored .option-label:nth-child(1):has(input:checked)::after {
  background: var(--tk-crimson-400);
}

/* ── Value 2: Mostly Disagree ─────────────────────────────────── */
/* Idle: silver-grey ring */
.option-label[data-answer-value="2"],
.options-grid--scored .option-label:nth-child(2) {
  --np-ring-color: rgba(180, 175, 170, 0.25);
}

.option-label[data-answer-value="2"]:hover,
.options-grid--scored .option-label:nth-child(2):hover {
  --np-ring-color: rgba(180, 175, 170, 0.45);
  border-color: rgba(180, 175, 170, 0.22);
}

.option-label[data-answer-value="2"].selected,
.option-label[data-answer-value="2"]:has(input:checked),
.options-grid--scored .option-label:nth-child(2).selected,
.options-grid--scored .option-label:nth-child(2):has(input:checked) {
  background: rgba(180, 175, 170, 0.06);
  border-color: rgba(180, 175, 170, 0.40);
  box-shadow: 0 0 0 3px rgba(180, 175, 170, 0.08);
  --np-ring-color:  var(--precision-silver);
  --np-fill-color:  rgba(180, 175, 170, 0.10);
  --np-glow:        none;  /* no glow for disagree */
  --np-dot-scale:   1;
}

.option-label[data-answer-value="2"].selected::after,
.option-label[data-answer-value="2"]:has(input:checked)::after,
.options-grid--scored .option-label:nth-child(2).selected::after,
.options-grid--scored .option-label:nth-child(2):has(input:checked)::after {
  background: var(--precision-silver);
  box-shadow: none;
}

/* ── Value 3: Neutral / Unsure ────────────────────────────────── */
/* Idle: muted lavender (the default idle already uses lavender — no override needed) */
/* Selected: slightly stronger lavender */
.option-label[data-answer-value="3"].selected,
.option-label[data-answer-value="3"]:has(input:checked),
.options-grid--scored .option-label:nth-child(3).selected,
.options-grid--scored .option-label:nth-child(3):has(input:checked) {
  background: rgba(130, 110, 195, 0.08);
  border-color: rgba(130, 110, 195, 0.40);
  box-shadow: 0 0 0 3px rgba(130, 110, 195, 0.10);
  --np-ring-color:  var(--muted-lavender);
  --np-fill-color:  rgba(130, 110, 195, 0.12);
  --np-glow:        0 0 6px rgba(130, 110, 195, 0.28);
  --np-dot-scale:   1;
}

.option-label[data-answer-value="3"].selected::after,
.option-label[data-answer-value="3"]:has(input:checked)::after,
.options-grid--scored .option-label:nth-child(3).selected::after,
.options-grid--scored .option-label:nth-child(3):has(input:checked)::after {
  background: var(--muted-lavender);
  box-shadow: 0 0 4px rgba(130, 110, 195, 0.40);
}

/* ── Value 4: Mostly Agree ────────────────────────────────────── */
/* Idle: soft pink ring hint */
.option-label[data-answer-value="4"],
.options-grid--scored .option-label:nth-child(4) {
  --np-ring-color: rgba(var(--electric-pink-rgb), 0.22);
}

.option-label[data-answer-value="4"]:hover,
.options-grid--scored .option-label:nth-child(4):hover {
  --np-ring-color: rgba(var(--electric-pink-rgb), 0.42);
  border-color: rgba(var(--electric-pink-rgb), 0.18);
}

/* Selected: uses the base selected state — already electric pink */

/* ── Value 5: Absolutely Agree — Full Neon Pulse ──────────────── */
/* Idle: stronger pink ring hint */
.option-label[data-answer-value="5"],
.options-grid--scored .option-label:nth-child(5) {
  --np-ring-color: rgba(var(--electric-pink-rgb), 0.32);
}

.option-label[data-answer-value="5"]:hover,
.options-grid--scored .option-label:nth-child(5):hover {
  --np-ring-color: rgba(var(--electric-pink-rgb), 0.55);
  border-color: rgba(var(--electric-pink-rgb), 0.25);
  background: rgba(var(--electric-pink-rgb), 0.04);
}

/* Selected: maximum emphasis */
.option-label[data-answer-value="5"].selected,
.option-label[data-answer-value="5"]:has(input:checked),
.options-grid--scored .option-label:nth-child(5).selected,
.options-grid--scored .option-label:nth-child(5):has(input:checked) {
  background: rgba(var(--electric-pink-rgb), 0.12);
  border-color: rgba(var(--electric-pink-rgb), 0.60);
  box-shadow:
    0 0 0 3px rgba(var(--electric-pink-rgb), 0.15),
    var(--tk-glow-pink);
  --np-ring-color:  var(--electric-pink);
  --np-fill-color:  rgba(var(--electric-pink-rgb), 0.20);
  --np-glow:        0 0 12px rgba(var(--electric-pink-rgb), 0.60);
  --np-dot-scale:   1;
}

/* Outer ring inherits --np-glow via CSS variable */
.option-label::before {
  box-shadow: var(--np-glow);
}

/* Diamond glow for value 5 */
.option-label[data-answer-value="5"].selected::after,
.option-label[data-answer-value="5"]:has(input:checked)::after,
.options-grid--scored .option-label:nth-child(5).selected::after,
.options-grid--scored .option-label:nth-child(5):has(input:checked)::after {
  box-shadow: 0 0 8px rgba(var(--electric-pink-rgb), 0.70);
}

/* ================================================================
   SECTION 8: REDUCED MOTION  (RADIO-003 a11y)
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .option-label,
  .option-label::before,
  .option-label::after {
    transition:
      border-color  var(--tk-duration-fast),
      background    var(--tk-duration-fast);
  }

  .option-label:active { transform: none; }

  /* Suppress glow — keep border-colour signal only */
  .option-label.selected,
  .option-label:has(input:checked) {
    box-shadow: 0 0 0 2px rgba(var(--electric-pink-rgb), 0.40);
    --np-glow: none;
  }

  .option-label[data-answer-value="5"].selected,
  .option-label[data-answer-value="5"]:has(input:checked),
  .options-grid--scored .option-label:nth-child(5).selected,
  .options-grid--scored .option-label:nth-child(5):has(input:checked) {
    box-shadow: 0 0 0 2px rgba(var(--electric-pink-rgb), 0.55);
  }
}

/* ================================================================
   SECTION 9: HIGH-CONTRAST MODE  (RADIO-002 a11y)
   ================================================================ */
@media (prefers-contrast: high) {
  .option-label {
    border: 2px solid rgba(255, 255, 255, 0.40);
  }

  .option-label::before {
    border: 2px solid rgba(255, 255, 255, 0.40);
  }

  .option-label.selected,
  .option-label:has(input:checked) {
    border: 2px solid var(--electric-pink);
    box-shadow: none;
  }

  .option-label.selected::before,
  .option-label:has(input:checked)::before {
    border-color: var(--electric-pink);
  }
}

/* ================================================================
   SECTION 10: TYPOGRAPHY HIERARCHY  (RADIO-004)
   Authority · Precision · Data system applied to quiz controls.
   ================================================================ */

/* ── Answer text — Precision (Inter) ─────────────────────────── */
.option-text {
  flex: 1;
  font-family: var(--tk-font-body);
  font-size: var(--tk-fluid-md);
  font-weight: var(--tk-weight-medium);
  color: var(--tk-ink-300);
  line-height: var(--tk-leading-snug);
  /* Ensure text hangs correctly when wrapping alongside the dot */
  padding-top: 1px;
  transition: color var(--tk-duration-fast) var(--tk-ease-out);
}

/* Elevate text colour on selection */
.option-label.selected .option-text,
.option-label:has(input:checked) .option-text {
  color: var(--tk-ink-100);
}

/* ── Question header — Data (JetBrains Mono) ─────────────────── */
.question-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--tk-space-3) var(--tk-space-5);
  background: rgba(0, 0, 0, 0.20);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.question-number {
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  font-weight: var(--tk-weight-medium);
  letter-spacing: var(--tk-tracking-wider);
  text-transform: uppercase;
  color: var(--tk-ink-500);
}

.question-category {
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  font-weight: var(--tk-weight-medium);
  letter-spacing: var(--tk-tracking-wide);
  color: var(--tk-gold-400);
}

/* ── Question text — Authority (Playfair Display) ────────────── */
legend {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fluid-xl);
  font-weight: var(--tk-weight-semibold);
  color: var(--tk-ink-100);
  line-height: var(--tk-leading-snug);
  letter-spacing: var(--tk-tracking-tight);
  margin-bottom: var(--tk-space-4);
  /* legend floats by default in some browsers — normalize */
  float: none;
  padding: 0;
  width: 100%;
}

/* ── Example / helper copy — Precision muted ─────────────────── */
.question-example {
  display: block;
  font-family: var(--tk-font-body);
  font-size: var(--tk-font-size-sm);
  font-style: italic;
  color: var(--tk-ink-500);
  line-height: var(--tk-leading-normal);
  margin-bottom: var(--tk-space-4);
}

/* ── Fieldset reset + padding ─────────────────────────────────── */
fieldset {
  border: none;
  padding: var(--tk-space-5) var(--tk-space-5) var(--tk-space-4);
  margin: 0;
}

/* ── Question nav ─────────────────────────────────────────────── */
.question-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--tk-space-4) var(--tk-space-5);
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Next / Prev buttons — use foundation tk-btn language */
.next-button {
  font-family: var(--tk-font-body);
  font-size: var(--tk-font-size-sm);
  font-weight: var(--tk-weight-semibold);
  letter-spacing: var(--tk-tracking-wide);
  padding: var(--tk-space-3) var(--tk-space-6);
  border-radius: var(--tk-radius-sm);
  border: none;
  cursor: pointer;
  background: var(--electric-pink);
  color: #fff;
  box-shadow: var(--tk-glow-pink);
  transition:
    background   var(--tk-duration-fast) var(--tk-ease-out),
    box-shadow   var(--tk-duration-fast) var(--tk-ease-out),
    transform    var(--tk-duration-fast) var(--tk-ease-out);
  min-height: 44px;
}

.next-button:hover {
  background: hsl(335, 100%, 55%);
  box-shadow: var(--tk-glow-pink), 0 4px 16px rgba(var(--electric-pink-rgb), 0.30);
}

.next-button:active { transform: scale(0.97); }

.next-button:disabled,
.next-button[aria-disabled="true"] {
  background: var(--tk-obsidian-600);
  color: var(--tk-ink-500);
  box-shadow: none;
  cursor: not-allowed;
}

.next-button:focus-visible {
  outline: 2px solid var(--electric-pink);
  outline-offset: 2px;
}

.prev-button {
  font-family: var(--tk-font-body);
  font-size: var(--tk-font-size-sm);
  font-weight: var(--tk-weight-medium);
  padding: var(--tk-space-3) var(--tk-space-5);
  border-radius: var(--tk-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: pointer;
  background: transparent;
  color: var(--tk-ink-500);
  transition:
    border-color var(--tk-duration-fast) var(--tk-ease-out),
    color        var(--tk-duration-fast) var(--tk-ease-out),
    box-shadow   var(--tk-duration-fast) var(--tk-ease-out);
  min-height: 44px;
}

.prev-button:hover {
  border-color: rgba(var(--electric-pink-rgb), 0.30);
  color: var(--tk-ink-300);
}

.prev-button:focus-visible {
  outline: 2px solid var(--electric-pink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .next-button,
  .prev-button { transition: background var(--tk-duration-fast), color var(--tk-duration-fast); }
  .next-button:active { transform: none; }
}

/* ================================================================
   SECTION 11: RESPONSIVE GRID  (RADIO-004)
   ================================================================ */

/* Narrow viewports: single column — maximum option text readability */
@media (max-width: 599px) {
  .options-grid {
    grid-template-columns: 1fr;
    gap: var(--tk-space-2);
  }

  .option-label {
    padding: var(--tk-space-3) var(--tk-space-4);
  }

  legend {
    font-size: var(--tk-fluid-lg);
  }
}

/* Mid-range: two columns for the 5 options */
@media (min-width: 600px) and (max-width: 767px) {
  .options-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: single column, generous padding */
@media (min-width: 768px) {
  .options-grid {
    grid-template-columns: 1fr;
  }

  fieldset {
    padding: var(--tk-space-6) var(--tk-space-6) var(--tk-space-5);
  }

  legend {
    font-size: var(--tk-fluid-xl);
  }
}

/* Touch devices: bump minimum height slightly for comfort */
@media (hover: none) {
  .option-label {
    min-height: 56px;
    padding: var(--tk-space-4);
  }
}