/* ==================================================================
   Anatomy of the Teller–Ulam Sequence — teller-ulam.css
   Page-specific styles. Design tokens are inherited from the
   site-wide /styles.css, which loads first. This file adds only the
   scrubber-specific pieces that don't belong in the global stylesheet.

   TABLE OF CONTENTS
   -----------------
   1.  PAGE-SPECIFIC TOKENS  (hot reds / oranges for fireball states)
   2.  LAYOUT                (page wrapper, legend, header)
   3.  ANATOMY KEY CARD
   4.  SCRUBBER CARD         (big SVG stage + time readout)
   5.  CONTROLS              (slider, preset stops, play/reset)
   6.  CAPTIONS              (stacked, cross-fade on phase change)
   7.  DISTANCE BARS         (log-scale X-ray vs blast wave readout)
   8.  SPEEDS TABLE          (footer reference)
   9.  NOSCRIPT BANNER
   10. REDUCED MOTION
   11. EXPLAINER             (long-form prose + footnotes + references)
   ================================================================== */

/* ==================================================================
   1. PAGE-SPECIFIC TOKENS
   The site-wide styles.css already defines gold/text/surface tokens.
   The three below are specific to the fireball / "hot" states on
   this page and don't belong in the global palette.
   ================================================================== */
:root {
  --orange:     #ff7043;
  --orange-hot: #ff8a5c;
  --red:        #ff4040;
}

/* ==================================================================
   2. LAYOUT
   ================================================================== */
.wrap {
  max-width: 1250px;
  margin: 0 auto;
  padding: var(--s-7, 3rem) var(--s-5, 1.5rem) var(--s-9, 6rem);
}

    /* ---- page header ---- */
    .hdr { margin-bottom: 2.5rem; }
    .hdr .eyebrow {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--gold);
      margin: 0 0 0.5rem;
    }
    .hdr h1 {
      font-size: clamp(1.75rem, 3.5vw, 2.5rem);
      font-weight: 800;
      margin: 0 0 0.75rem;
      letter-spacing: -0.02em;
    }
    .hdr p {
      color: var(--text-muted);
      max-width: 65ch;
      margin: 0 0 0.5rem;
    }

    /* ---- legend chips ---- */
    .legend {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      margin-right: 1.25rem;
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--text-muted);
    }
    .legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
    .legend.xray .sw      { background: var(--gold); opacity: 0.6; }
    .legend.blast .sw     { background: var(--orange); }
    .legend.primary .sw   { background: var(--gold-dim); }
    .legend.secondary .sw { background: var(--border); border: 1px solid var(--gold-dim); }

    /* ---- anatomy key (same look as the static version) ---- */
    .anatomy {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1.5rem;
      margin-bottom: 3rem;
    }
    .anatomy h2 {
      font-family: var(--font-mono);
      font-size: 0.8rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin: 0 0 0.25rem;
    }
    .anatomy .sub { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 1rem; }
    .anatomy svg { display: block; width: 100%; height: auto; }

    /* ==================================================================
       4. SCRUBBER DASHBOARD
       ================================================================== */
    .scrubber-dashboard {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1.5rem;
      margin-bottom: 2rem;
      box-shadow: var(--shadow-card);
    }
    @media (min-width: 1024px) {
      .scrubber-dashboard {
        padding: 2.25rem;
        gap: 2.5rem;
      }
      .dashboard-visual {
        position: static;
        width: 100%;
      }
      .dashboard-narrative {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 2.5rem;
        align-items: start;
        margin-top: 1rem;
        padding-top: 1.5rem;
        border-top: 1px dashed var(--border);
      }
    }

    .scrubber-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 1.25rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px dashed var(--border-hot);
    }
    .time-display {
      font-family: var(--font-mono);
      font-size: 1.2rem;
      color: var(--gold);
      letter-spacing: 0.1em;
      margin: 0;
    }
    .time-display .val { font-weight: 700; color: var(--gold-hot); }
    .phase-label {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text-faint);
      padding: 0.25rem 0.75rem;
      border: 1px solid var(--border);
      border-radius: 999px;
      transition: color 0.3s ease, border-color 0.3s ease;
      background: rgba(15, 23, 42, 0.02);
    }
    .phase-label.is-active {
      color: var(--gold-hot);
      border-color: rgba(37, 99, 235, 0.2);
      background: rgba(37, 99, 235, 0.05);
    }

    /* the diagram SVG */
    svg.scrub-diagram {
      display: block;
      width: 100%;
      height: auto;
      background: var(--bg);
      border-radius: 8px;
    }

    /* ---- scrubber controls ---- */
    .scrub-controls {
      margin-top: 1.5rem;
      padding: 1.25rem;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    .slider-container {
      position: relative;
      width: 100%;
      padding-bottom: 2.25rem; /* space for absolute timeline ticks */
    }

    /* Slider styling */
    .scrub-slider {
      width: 100%;
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      padding: 12px 0;
      margin: 0;
    }
    .scrub-slider::-webkit-slider-runnable-track {
      height: 8px;
      background: linear-gradient(90deg,
        var(--gold-dim) 0%,
        var(--gold-hot) 33%,
        var(--orange) 100%);
      border-radius: 999px;
    }
    .scrub-slider::-moz-range-track {
      height: 8px;
      background: linear-gradient(90deg,
        var(--gold-dim) 0%,
        var(--gold-hot) 33%,
        var(--orange) 100%);
      border-radius: 999px;
    }
    .scrub-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      margin-top: -6px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #ffffff;
      border: 2.5px solid var(--gold-hot);
      box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3);
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .scrub-slider::-webkit-slider-thumb:hover {
      transform: scale(1.15);
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45);
    }
    .scrub-slider::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #ffffff;
      border: 2.5px solid var(--gold-hot);
      cursor: pointer;
      box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3);
      transition: transform 0.15s ease;
    }
    .scrub-slider::-moz-range-thumb:hover {
      transform: scale(1.15);
    }
    .scrub-slider:focus { outline: none; }
    .scrub-slider:focus::-webkit-slider-thumb {
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2), 0 3px 10px rgba(37, 99, 235, 0.3);
    }

    /* Log-aligned Timeline Tick marks */
    .scrub-timeline-stops {
      position: relative;
      width: 100%;
      height: 20px;
      margin-top: 6px;
    }
    .stop-tick {
      position: absolute;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .stop-tick::before {
      content: "";
      display: block;
      width: 1px;
      height: 6px;
      background: var(--text-faint);
      opacity: 0.4;
      margin-bottom: 6px;
    }
    .stop-tick button {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-faint);
      font-family: var(--font-mono);
      font-size: 0.65rem;
      padding: 0.2rem 0.5rem;
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
    }
    .stop-tick button:hover {
      border-color: var(--border-hot);
      color: var(--text);
    }
    .stop-tick button.is-active {
      border-color: var(--gold-hot);
      color: var(--gold-hot);
      background: rgba(37, 99, 235, 0.08);
      font-weight: 700;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
    }

    /* Play/pause/reset controls */
    .scrub-play {
      display: flex;
      gap: 0.75rem;
      margin-top: 1rem;
      justify-content: center;
    }
    .scrub-play button {
      background: var(--surface-2);
      border: 1px solid var(--border);
      color: var(--gold);
      font-family: var(--font-mono);
      font-size: 0.85rem;
      letter-spacing: 0.1em;
      padding: 0.6rem 1.5rem;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      font-weight: 600;
      box-shadow: var(--shadow-card);
    }
    .scrub-play button:hover {
      background: rgba(37, 99, 235, 0.05);
      border-color: var(--border-hot);
      color: var(--gold-hot);
      transform: translateY(-1px);
    }
    .scrub-play button.is-playing {
      color: var(--orange);
      border-color: var(--orange);
      background: rgba(255, 112, 67, 0.04);
    }

    /* ---- caption area: stacked captions, active transitions ---- */
    .captions {
      display: grid;
      grid-template-areas: 'stack';
      margin-top: 0.5rem;
      margin-bottom: 1.5rem;
      min-height: 150px;
    }
    .caption {
      grid-area: stack;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
      color: var(--text-muted);
      pointer-events: none;
    }
    .caption.is-active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .caption .caption-header {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      text-transform: uppercase;
      color: var(--text-faint);
      letter-spacing: 0.2em;
      margin-bottom: 0.5rem;
    }
    .caption .step-num {
      color: var(--gold-hot);
      font-weight: 700;
    }
    .caption h3 {
      font-family: var(--font-display);
      font-size: 1.35rem;
      color: var(--text);
      margin: 0 0 0.5rem;
      font-weight: 700;
    }
    .caption p {
      color: var(--text-muted);
      font-size: 0.95rem;
      line-height: 1.65;
      margin: 0;
    }

    /* ---- live-updating distance bars ---- */
    .bars {
      margin-bottom: 2rem;
      padding: 1.25rem;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-card);
    }
    .bar-header {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      color: var(--text-faint);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-bottom: 0.85rem;
      font-weight: 600;
    }
    .bar-row {
      display: grid;
      grid-template-columns: 100px 1fr 90px;
      align-items: center;
      gap: 0.75rem;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      margin-bottom: 0.65rem;
    }
    .bar-row:last-of-type { margin-bottom: 0; }
    .bar-row .k { color: var(--text-faint); }
    .bar-row .v { color: var(--text); text-align: right; font-weight: 600; }
    .bar-row.x  .v { color: var(--gold); }
    .bar-row.bw .v { color: var(--orange); }
    .bar-track {
      position: relative;
      height: 8px;
      background: rgba(15, 23, 42, 0.05);
      border: 1px solid var(--border);
      border-radius: 999px;
      overflow: hidden;
    }
    .bar-fill {
      height: 100%;
      border-radius: 999px;
      width: 0;
      transition: width 0.05s linear;
    }
    .bar-fill.x  { background: linear-gradient(90deg, var(--gold-dim), var(--gold-hot)); }
    .bar-fill.bw { background: linear-gradient(90deg, #aa3d18, var(--orange)); }
    
    .bar-axis {
      display: grid;
      grid-template-columns: 100px 1fr 90px;
      gap: 0.75rem;
      margin-top: 0.5rem;
      font-family: var(--font-mono);
      font-size: 0.6rem;
      color: var(--text-faint);
    }
    .ticks-track {
      position: relative;
      width: 100%;
    }
    .bar-axis .ticks {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }

    /* ---- speeds table (dashboard version) ---- */
    .speeds-dashboard {
      padding: 1.25rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-card);
    }
    .speeds-dashboard .speeds-header {
      font-size: 0.75rem;
      font-family: var(--font-mono);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--gold);
      margin-bottom: 0.75rem;
      font-weight: 700;
    }
    .speeds-dashboard table {
      width: 100%;
      border-collapse: collapse;
      font-family: var(--font-mono);
      font-size: 0.78rem;
    }
    .speeds-dashboard th, .speeds-dashboard td {
      text-align: left;
      padding: 0.4rem 0.5rem;
      border-bottom: 1px solid var(--border);
    }
    .speeds-dashboard th {
      color: var(--text-faint);
      font-weight: 500;
    }
    .speeds-dashboard td {
      color: var(--text-muted);
    }
    .speeds-dashboard td.num {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .speeds-dashboard tr.highlight-row td {
      color: var(--text);
      background: rgba(37, 99, 235, 0.04);
      font-weight: 600;
    }
    .speeds-desc {
      margin: 0.75rem 0 0;
      color: var(--text-faint);
      font-size: 0.78rem;
      line-height: 1.6;
    }

    /* ==================================================================
       10. SVG DYNAMIC LABELS
       ================================================================== */
    .svg-label-group {
      opacity: 0.5;
      transition: opacity 0.3s ease;
    }
    .svg-label {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 500;
      fill: var(--text-faint);
      letter-spacing: 0.12em;
      transition: fill 0.3s ease, font-weight 0.3s ease;
    }
    .svg-label-line {
      stroke: var(--text-faint);
      stroke-width: 1.2px;
      opacity: 0.2;
      stroke-dasharray: 2 2;
      transition: stroke 0.3s ease, opacity 0.3s ease;
    }
    .svg-label-dot {
      fill: var(--text-faint);
      opacity: 0.3;
      transition: fill 0.3s ease, opacity 0.3s ease;
    }

    /* Active dynamic labels style */
    .svg-label-group.is-active {
      opacity: 1;
    }
    .svg-label-group.is-active .svg-label {
      fill: var(--gold-hot);
      font-weight: 700;
    }
    .svg-label-group.is-active .svg-label-line {
      stroke: var(--gold-hot);
      opacity: 0.75;
      stroke-dasharray: none;
      stroke-width: 1.5px;
    }
    .svg-label-group.is-active .svg-label-dot {
      fill: var(--gold-hot);
      opacity: 1;
    }

    .noscript-banner {
      background: var(--border-hot);
      color: var(--gold);
      padding: 1rem 1.5rem;
      border-radius: 8px;
      margin-bottom: 2rem;
      font-family: var(--font-mono);
      font-size: 0.85rem;
    }

    /* ==================================================================
       11. EXPLAINER  (long-form prose below the scrubber)
       The research-style companion section. Same card shell as
       .anatomy / .speeds above, with a max-width on children so the
       prose lands at a ~72-character reading measure instead of
       sprawling across the full wrap width.

       This block was originally a separate page at /research/teller-ulam/,
       collapsed into the anatomy page on 04/23/2026 so the reader
       has one stop, not two.
       ================================================================== */
    .explainer {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1.75rem 2rem;
      margin-top: 3rem;
    }
    .explainer > * { max-width: 72ch; }
    .explainer h2 {
      font-family: var(--font-mono);
      font-size: 0.8rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin: 0 0 0.25rem;
    }
    .explainer .sub {
      color: var(--text-muted);
      font-size: 0.9rem;
      margin: 0 0 2rem;
    }
    .explainer h3 {
      font-size: 1.05rem;
      color: var(--text);
      margin: 2.5rem 0 1rem;
      border-bottom: 1px solid var(--border);
      padding-bottom: 0.5rem;
      font-weight: 600;
    }
    .explainer h3:first-of-type { margin-top: 0.5rem; }
    .explainer h4 {
      font-family: var(--font-mono);
      font-size: 0.8rem;
      color: var(--gold);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin: 1.75rem 0 0.5rem;
    }
    .explainer p {
      line-height: 1.7;
      color: var(--text-muted);
      margin: 0 0 1rem;
    }
    .explainer p strong { color: var(--text); font-weight: 600; }
    .explainer em { color: var(--text); font-style: italic; }

    /* Footnote callers in the prose. Gold superscripts, underline on
       hover, native title attribute (added by teller-ulam.js) carries
       the full citation text so hovering shows it without leaving the
       paragraph. */
    .explainer sup.fn {
      font-size: 0.7rem;
      line-height: 0;
      margin-left: 0.1em;
    }
    .explainer sup.fn a {
      color: var(--gold);
      text-decoration: none;
      padding: 0 0.15em;
    }
    .explainer sup.fn a:hover { text-decoration: underline; }

    /* References list at the bottom of the explainer. Monospace small
       print; :target highlights whichever reference the reader just
       jumped to via footnote click. */
    .explainer .references {
      margin: 2.5rem 0 0;
      padding: 1.25rem 1.5rem 1.25rem 2.25rem;
      border-top: 1px solid var(--border);
      font-size: 0.78rem;
      color: var(--text-faint);
      font-family: var(--font-mono);
      line-height: 1.7;
    }
    .explainer .references li { margin-bottom: 0.6rem; }
    .explainer .references li:target { color: var(--gold); }
    .explainer .references cite {
      font-style: italic;
      color: var(--text-muted);
    }
    .explainer .references a {
      color: var(--gold-dim);
      text-decoration: none;
    }
    .explainer .references a:hover {
      color: var(--gold);
      text-decoration: underline;
    }


    @media (prefers-reduced-motion: reduce) {
      .caption { transition: none; }
      .phase-label { transition: none; }
    }