/* ════════════════════════════════════════════════════════════════════════
   Seeker Labs — responsive + polish layer.
   Linked site-wide, AFTER each page's inline <style> (so it wins the cascade).
   Single source of truth for cross-page responsiveness, motion, and UI polish.
   Built on the same design tokens — nothing hardcoded.
   ════════════════════════════════════════════════════════════════════════ */

/* ── base niceties (all viewports) ───────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
img, svg, video { max-width: 100%; height: auto; }
pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* keep wide display-math from overflowing the column */
.katex-display { overflow-x: auto; overflow-y: hidden; padding-block: 2px; }

/* reading-progress bar (populated by editor.js on articles; invisible if absent) */
.sl-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 90;
  background: var(--accent); box-shadow: 0 0 14px var(--accent-soft-2);
  transition: width .12s linear; pointer-events: none;
}

/* ── desktop polish: figures lift gently on hover ────────────────────────── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .figcard { transition: box-shadow .3s var(--ease, ease), transform .3s var(--ease, ease), border-color .3s var(--ease, ease); }
  .figcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--line-3); }
}

/* ── motion: a one-time entrance for the page head (ends visible → safe) ──── */
@media (prefers-reduced-motion: no-preference) {
  header.mast, h1.lead, .article .kicker, .article .audience, h1.title, .article .dek, .article .byline {
    animation: sl-fade-up .6s var(--ease, ease) both;
  }
  h1.title { animation-delay: .04s; }
  .article .dek { animation-delay: .08s; }
  .article .byline { animation-delay: .12s; }
  /* use the independent `translate` property so it composes with (doesn't clobber)
     any element's own transform — e.g. the bleed figures' translateX(-50%) */
  @keyframes sl-fade-up { from { opacity: 0; translate: 0 13px; } to { opacity: 1; translate: 0 0; } }
}

/* ── motion: scroll-reveal for visual blocks ─────────────────────────────────
   CSS-only via scroll-driven animations. Gated by @supports, so browsers that
   don't support it simply show everything (no JS, no hidden-content risk). ── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .prose figure, .prose .callout, .prose blockquote, .prose .pullquote, .prose .statband, .prose .compare {
      animation: sl-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
    @keyframes sl-rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
  }
}

/* ════════════════════════════ MOBILE  (≤ 760px) ════════════════════════════ */
@media screen and (max-width: 760px) {
  /* corner controls must not float over the text while reading → scroll away */
  .theme-toggle { position: absolute !important; top: 16px; right: 16px; }
  .sl-bar { display: none !important; }            /* the CMS is a desktop tool */
  .sl-progress { height: 2px; }

  /* WIDE FIGURES: go truly full-bleed and scroll horizontally so the in-SVG
     labels stay legible instead of crushing to a few pixels. */
  figure.bleed {
    width: 100vw !important; max-width: 100vw !important;
    margin-left: 50% !important; transform: translateX(-50%) !important;
  }
  figure.bleed .figcard {
    border-radius: 0; border-left: 0; border-right: 0;
    padding: 18px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  figure.bleed .figcard > svg { min-width: 600px; }      /* readable; user swipes */
  /* pin the caption to the left so it stays visible while the chart scrolls */
  figure.bleed .figcard > figcaption { position: sticky; left: 0; }

  /* tighten the very largest headings a touch on phones */
  h1.title { font-size: clamp(30px, 8.2vw, 40px); line-height: 1.08; }
  h1.lead { font-size: clamp(32px, 9vw, 46px); }
  .prose h2 { font-size: clamp(23px, 6.4vw, 30px); }

  /* stat / compare grids: ensure single-column on phones even if a file's own
     CSS missed it (belt-and-suspenders) */
  .statband { grid-template-columns: 1fr !important; }
  .statband .cell { border-left: 0 !important; padding-left: 4px !important; }
  .compare { grid-template-columns: 1fr !important; }
}

/* very small phones: ease the scroll distance a little */
@media screen and (max-width: 380px) {
  figure.bleed .figcard > svg { min-width: 540px; }
}