/* ============================================================================
   The Scariest Rides at Disney World — the fear index + the fear-meter hero.
   Built on the site's Nightfall tokens (--paper, --ink, --gold, --red, --rule).
   The hero is a WebGL gauge (scariest-rides.js) that sweeps to a ride's fear
   score; the ranked cards and sub-bars below are server-rendered and complete
   with no JS and no WebGL. Namespaced sr- so it never collides with other guides.
   ========================================================================== */

:root {
  --sr-fear:      var(--red);
  --sr-fear-soft: oklch(67% 0.205 8 / 0.16);
  --sr-fear-line: oklch(67% 0.205 8 / 0.5);
  --sr-drop:  oklch(72% 0.18 28);
  --sr-speed: oklch(80% 0.15 90);
  --sr-dark:  oklch(70% 0.10 285);
  --sr-spin:  oklch(74% 0.16 330);
}

.sr { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-md); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.sr-hero { max-width: 900px; margin: 0 auto; text-align: center; padding-top: var(--space-xl); }
.sr-kicker { font-family: var(--label); font-size: 13px; letter-spacing: 0.04em; color: var(--gold); margin-bottom: var(--space-md); }
.sr-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(34px, 6vw, 62px); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 var(--space-md); text-wrap: balance;
}
.sr-standfirst { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.5; color: var(--ink-soft); max-width: 60ch; margin: 0 auto var(--space-xl); text-wrap: pretty; }

/* ── Fear meter ───────────────────────────────────────────────────────── */
.sr-meter {
  background: linear-gradient(180deg, var(--paper-2), color-mix(in oklab, var(--paper-2) 55%, var(--paper)));
  border: 1px solid var(--rule); border-radius: 22px; padding: var(--space-lg);
  margin-bottom: var(--space-2xl); box-shadow: 0 30px 80px -40px oklch(0% 0 0 / 0.7);
}
/* The dial: just the gauge + big number, on its own, no overlap. */
.sr-meter-stage {
  position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 5 / 2; min-height: 200px;
  border: 1px solid var(--hair);
  background: radial-gradient(120% 150% at 50% 120%, oklch(30% 0.09 18 / 0.5), oklch(14% 0.03 277) 62%);
}
.sr-meter-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The four fear bars, clean labeled HTML below the dial. */
.sr-meter-bars { max-width: 560px; margin: var(--space-lg) auto var(--space-md); display: grid; gap: 12px; }
.sr-mbar { display: grid; grid-template-columns: 64px 1fr 30px; align-items: center; gap: 12px; }
.sr-mbar-label { font-family: var(--label); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sr-mbar-track { height: 12px; border-radius: 999px; background: oklch(40% 0.03 280 / 0.5); overflow: hidden; }
.sr-mbar-fill { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .7s cubic-bezier(.2,.7,.2,1); }
.sr-mbar--drop  .sr-mbar-fill { background: var(--sr-drop); }
.sr-mbar--speed .sr-mbar-fill { background: var(--sr-speed); }
.sr-mbar--dark  .sr-mbar-fill { background: var(--sr-dark); }
.sr-mbar--spin  .sr-mbar-fill { background: var(--sr-spin); }
.sr-mbar-val { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

.sr-meter-readout {
  min-height: 50px; display: flex; align-items: center; justify-content: center; padding: 4px 12px var(--space-md);
  text-align: center; font-family: var(--label); font-size: clamp(14px, 2vw, 17px); color: var(--ink-soft);
}
.sr-meter-readout .sr-meter-prompt { color: var(--muted); }
.sr-meter-readout b { color: var(--red); }
.sr-meter-tray { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; border-top: 1px solid var(--hair); padding-top: var(--space-md); }
.sr-chip {
  font-family: var(--label); font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px 13px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-soft);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.sr-chip:hover { transform: translateY(-1px); border-color: var(--red); color: var(--ink); }
.sr-chip.is-active { background: var(--sr-fear-soft); border-color: var(--sr-fear-line); color: var(--red); }
.sr-chip:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ── Body prose ───────────────────────────────────────────────────────── */
.sr-body { max-width: 760px; margin: 0 auto; }
.sr-body p { font-size: 18px; line-height: 1.66; color: var(--ink-soft); margin: 0 0 var(--space-lg); }
.sr-lede { font-size: 21px !important; line-height: 1.55 !important; color: var(--ink) !important; }
.sr-lede::first-letter { font-family: var(--display); font-weight: 800; float: left; font-size: 3.1em; line-height: 0.78; padding: 6px 10px 0 0; color: var(--red); }
.sr-body h2 { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3.4vw, 32px); color: var(--ink); letter-spacing: -0.01em; line-height: 1.12; margin: var(--space-2xl) 0 var(--space-md); text-wrap: balance; }
.sr-body strong { color: var(--ink); font-weight: 700; }
.sr-close { font-size: 19px !important; color: var(--ink) !important; border-top: 1px solid var(--hair); padding-top: var(--space-xl); }

/* ── The ranked fear cards: a compact 2-up grid that breaks out wider than
      the prose column so it does not waste the horizontal space. ─────────── */
.sr-rank {
  width: min(94vw, 1000px); margin: var(--space-lg) 0 var(--space-xl); margin-left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); align-items: start;
}
.sr-card { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 16px; padding: var(--space-md) var(--space-lg); border-left: 3px solid var(--sr-fear-line); }
.sr-card:first-child { grid-column: 1 / -1; border-left-color: var(--red); box-shadow: 0 0 0 1px var(--sr-fear-line), 0 20px 50px -30px oklch(67% 0.205 8 / 0.4); }
.sr-card-head { display: grid; grid-template-columns: auto 1fr auto; align-items: start; column-gap: 14px; margin-bottom: var(--space-md); }
.sr-rank-n { font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--muted); line-height: 1.05; }
.sr-card:first-child .sr-rank-n { color: var(--red); }
.sr-card-name { min-width: 0; font-family: var(--display); font-weight: 800; font-size: clamp(18px, 2.2vw, 22px); color: var(--ink); text-decoration: none; line-height: 1.15; }
.sr-card-name:hover { color: var(--gold); text-decoration: underline; }
/* Reserve two lines for non-featured titles so a long name does not push the bars
   out of line with the card beside it. */
.sr-card:not(:first-child) .sr-card-name { min-height: 2.3em; }
.sr-card-fear { justify-self: end; align-self: start; font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--red); white-space: nowrap; line-height: 1.05; }
.sr-card-fear-max { font-size: 13px; color: var(--muted); font-weight: 600; }

.sr-bars { display: grid; gap: 7px; margin-bottom: var(--space-md); }
.sr-bar { display: grid; grid-template-columns: 52px 1fr 22px; align-items: center; gap: 10px; }
.sr-bar-label { font-family: var(--label); font-size: 12px; letter-spacing: 0.03em; color: var(--muted); text-transform: uppercase; }
.sr-bar-track { height: 8px; border-radius: 999px; background: oklch(40% 0.03 280 / 0.5); overflow: hidden; }
.sr-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--sr-fear); }
.sr-bar:nth-child(1) .sr-bar-fill { background: var(--sr-drop); }
.sr-bar:nth-child(2) .sr-bar-fill { background: var(--sr-speed); }
.sr-bar:nth-child(3) .sr-bar-fill { background: var(--sr-dark); }
.sr-bar:nth-child(4) .sr-bar-fill { background: var(--sr-spin); }
.sr-bar-val { font-family: var(--label); font-size: 13px; font-weight: 700; color: var(--ink-soft); text-align: right; }

.sr-card-stat { font-size: 16px !important; line-height: 1.5; color: var(--ink-soft) !important; margin: 0 0 8px !important; }
.sr-card-visceral { font-size: 16px !important; line-height: 1.55; color: var(--muted) !important; font-style: italic; margin: 0 !important; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.sr-faq { display: grid; gap: 8px; margin-bottom: var(--space-xl); }
.sr-faq-item { border: 1px solid var(--hair); border-radius: 12px; background: var(--paper-2); overflow: hidden; }
.sr-faq-item summary { cursor: pointer; list-style: none; padding: 16px 18px; font-family: var(--label); font-weight: 600; font-size: 17px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sr-faq-item summary::-webkit-details-marker { display: none; }
.sr-faq-item summary::after { content: "+"; color: var(--red); font-size: 22px; line-height: 1; transition: transform .2s ease; }
.sr-faq-item[open] summary::after { transform: rotate(45deg); }
.sr-faq-item p { margin: 0; padding: 0 18px 18px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

/* ── Related ──────────────────────────────────────────────────────────── */
.sr-related { border-top: 1px solid var(--hair); margin-top: var(--space-2xl); padding-top: var(--space-lg); }
.sr-related h2 { font-family: var(--display); font-size: 20px; color: var(--ink); margin: 0 0 var(--space-sm); }
.sr-related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sr-related a { color: var(--blue); font-size: 17px; text-decoration: none; }
.sr-related a:hover { text-decoration: underline; }

@media (max-width: 820px) {
  .sr-rank { grid-template-columns: 1fr; width: 100%; margin-left: 0; transform: none; }
}
@media (max-width: 680px) {
  .sr-meter-stage { aspect-ratio: 3 / 2; }
  .sr-rank-n { font-size: 22px; min-width: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .sr-chip { transition: none; }
}