/* ───── legacy-fallback.css ─────────────────────────────────────────────
   Rescue layer for browsers with no modern CSS colour syntax; the target
   is Firefox 78 ESR on OS X El Capitan. Every colour token in base.css is
   oklch(), so on FF78 all of them are invalid at computed-value time and
   the whole visual layer collapses. This file re-declares those tokens as
   sRGB hex, flattens the surfaces whose backgrounds came from color-mix(),
   and gives the aspect-ratio thumbnails an intrinsic-ratio fallback.

   PLAIN BUT CORRECT BY DESIGN — no translucency, blur, tint or glow is
   reproduced. Flat cherry where the real site has a wash is the intended
   outcome: legible and correctly laid out, nothing more.

   DELETABLE WHOLESALE — everything lives inside @supports not (...), so a
   modern browser parses the blocks and executes none of them. When FF78
   stops mattering, delete the file and its one <link>; nothing depends
   on it. Load it LAST; selectors carry a :root prefix so they out-specify
   the originals anyway, but source order is the cheaper guarantee.

   Hex was computed OKLCH → OKLab → linear sRGB → gamma sRGB with chroma
   reduction to gamut, not eyeballed. Uses no oklch() (bar the @supports
   probe), color-mix(), :has() or nesting.
   ──────────────────────────────────────────────────────────────────── */

@supports not (color: oklch(0 0 0)) {

  /* ── Colour tokens, dark theme (base.css :root) ── */
  :root {
    --accent-400: #ee585c;
    --accent-500: #d33944;
    --accent-600: #b12532;
    --accent-700: #892028;
    --accent: #d33944;
    --accent-glow: #411215;
    --danger: #e5484d;
    --role-red-400: #ee585c;
    --role-red-500: #d33944;
    --red-400: #ee585c;
    --red-500: #d33944;
    --red-600: #b12532;
    --red-700: #892028;
    --red-glow: #411215;  /* red-500 at 30% flattened onto --ink-0 */

    --ink-0:   #020101;
    --ink-50:  #060202;
    --ink-100: #0c0605;
    --ink-200: #150d0c;
    --ink-300: #251d1c;
    --ink-500: #5a5453;
    --ink-700: #a8a3a3;
    --ink-800: #dad6d6;
    --ink-900: #f4f1f1;

    --grade-ss: #e8cd62;
    --grade-s:  #e1c34b;
    --grade-a:  #53c75d;
    --grade-b:  #37a8ec;
    --grade-c:  #c35dd9;
    --grade-d:  #f93f4e;
  }

  /* ── Colour tokens, light theme (base.css :root[data-theme="light"]) ──
     Same specificity as the original so the theme still flips. */
  :root[data-theme="light"] {
    --accent-400: #d73240;
    --accent-500: #c30b2d;
    --accent-600: #a70023;
    --accent-700: #8a021c;
    --accent: #c30b2d;
    --accent-glow: #f1c8cf;
    --danger: #c8202f;
    --role-red-400: #d73240;
    --role-red-500: #c30b2d;
    --red-400: #d73240;
    --red-500: #c30b2d;
    --red-600: #a70023;   /* chroma reduced to fit sRGB */
    --red-700: #8a021c;
    --red-glow: #f1c8cf;

    --ink-0:   #fcf7f7;
    --ink-50:  #f6f0f0;
    --ink-100: #ece6e5;
    --ink-200: #ddd5d5;
    --ink-300: #cac2c1;
    --ink-500: #817877;
    --ink-600: #635c5b;
    --ink-700: #484040;
    --ink-800: #1a1414;
    --ink-900: #060202;
  }

  /* ── Nav ──
     nav.top is sticky over scrolling content and got its legibility from
     backdrop-filter + a translucent background. Both are gone here, so it
     must be fully opaque or the page scrolls straight through the links. */
  :root nav.top {
    background: var(--ink-0);
    border-bottom: 1px solid var(--ink-300);
  }
  :root .profile-dropdown {
    background: var(--ink-100);
    border-color: var(--ink-300);
  }
  /* The ≤480px nav-search drops out of the bar and floats over content on
     blur alone. Scoped to that media query — at desktop widths .nav-search
     is an in-bar pill that must keep its own flat background. */
  @media (max-width: 480px) {
    :root .nav-search {
      background: var(--ink-0);
      border-bottom-color: var(--ink-300);
    }
  }

  /* ── Gallery cards ──
     .card itself uses flat tokens and needs nothing. The hover border was
     color-mix; the grade badge was color-mix + blur over a thumbnail.
     Background only, and kept at low specificity on purpose — the per-grade
     fills (.card .grade.a { background: var(--grade-a) } and friends) are
     already flat tokens and must keep winning. */
  :root .card:hover {
    border-color: var(--red-700);
  }
  :root .grade {
    background: var(--ink-0);
  }

  /* ── Home: featured strip mini-cards ── */
  :root .mode-scroll .mini-card {
    background: var(--ink-100);
    border-color: var(--ink-300);
  }
  :root .mode-scroll .mini-card:hover {
    background: var(--ink-200);
  }
  /* The mini-card grade pill needs nothing: .mini-card .grade.a { background:
     var(--grade-a); color: var(--ink-0) } is already flat and survives. Only
     its thumbnail scrim gradient is lost, which was decorative. */
  :root .mode-scroll .mini-card .views-pill {
    background: var(--ink-0);
  }

  /* ── Home: hero panels ── */
  :root .home-hero .hero {
    border-color: var(--ink-300);
  }
  :root .gallery-empty {
    background: var(--ink-100);
    border-color: var(--ink-500);
  }
  :root .hero-upload-panel {
    background: var(--ink-100);
    border-color: var(--ink-500);
  }
  :root .hero-upload-panel:hover,
  :root .hero-upload-panel:focus-visible,
  :root .hero-upload-panel.drag {
    background: var(--ink-200);
    border-color: var(--red-500);
  }
  /* Discord panel keeps its blurple identity in the border only. */
  :root .hero-discord-panel {
    background: var(--ink-100);
    border-color: #4c6ebd;
  }

  /* ── Upload drop zone ──
     Original background was a linear-gradient containing color-mix, so the
     whole declaration is dropped and the zone renders transparent. Note
     upload.css re-declares this at .upload-stage .up-drop (0,3,0), so the
     page-scoped selector has to be matched, not just .up-drop. */
  :root .up-drop,
  :root .upload-stage .up-drop {
    background: var(--ink-50);
    border-color: var(--ink-500);
  }
  :root .up-drop:hover,
  :root .up-drop:focus-visible,
  :root .up-drop.hot,
  :root .upload-stage .up-drop:hover,
  :root .upload-stage .up-drop:focus-visible,
  :root .upload-stage .up-drop.hot {
    background: var(--ink-200);
    border-color: var(--red-500);
  }

  /* ── Buttons ──
     .btn, .btn.primary and .nav-btn are already flat tokens. Only the
     ghost wash is rescued; the plain .btn / .nav-btn hover tints are left
     to drop, because their border-color and color still change and a
     broader selector here would out-rank the .primary hover states. */
  :root .btn.ghost:hover {
    background: var(--ink-300);
  }
  :root .pill {
    background: var(--ink-200);
    border-color: var(--red-500);
  }

  /* ── Form fields ──
     The contact/search fields use flat tokens already. .up-url-input had
     color-mix for BOTH border and background, so it rendered as invisible
     text on the page — that one is a genuine break, not a tint. */
  :root .up-url-input {
    background: var(--ink-100);
    border-color: var(--ink-500);
  }
  :root .up-url-input:focus-visible,
  :root .up-url.hot .up-url-input {
    background: var(--ink-200);
    border-color: var(--red-500);
  }
  :root .nav-search input[type="search"]:focus {
    box-shadow: 0 0 0 3px var(--red-700);
  }
  /* accent-color is unsupported, so checkboxes and ranges fall back to the
     platform widget — legible, just not cherry. Left alone deliberately. */

  /* ── Footer ── flat tokens; the hairline resolves once --ink-300 does. */

  /* ── Announcement banner ──
     (The dev banner proper is an inline <style> in _base.html.j2 and is
     already flat hex — it needs nothing.) .site-banner is the break: every
     value was raw oklch() including the text colour, so it rendered as
     invisible text on no background. Gradients flattened to their
     saturated stop. */
  :root .site-banner            { color: #fff3e9; }
  :root .site-banner.kind-beta  { background: #733200; border-bottom-color: #b25200; }
  :root .site-banner.kind-info  { background: #004555; border-bottom-color: #007e9a; }
  :root .site-banner.kind-warn  { background: #8b0012; border-bottom-color: #cc272e; }
  :root .site-banner.kind-maint { background: #2f3848; border-bottom-color: #545e6f; }
  :root .site-banner.kind-success { background: #005e28; border-bottom-color: #009342; }
  :root .site-banner-close:hover,
  :root .site-banner-close:focus { background: transparent; opacity: 1; }
}

/* ───── Intrinsic-ratio thumbnails ─────────────────────────────────────
   .thumb reserves its height purely with aspect-ratio: 16/9. Without it
   the box collapses to zero and the gallery becomes a stack of captions.
   The classic padding-top trick needs the img taken out of flow; .thumb
   is already position:relative with overflow:hidden, and object-fit:cover
   is supported back to Firefox 36, so the crop still behaves. */
@supports not (aspect-ratio: 16 / 9) {
  :root .card .thumb,
  :root .mode-scroll .mini-card .thumb {
    height: 0;
    padding-top: 56.25%;
  }
  :root .card .thumb img,
  :root .mode-scroll .mini-card .thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}