/* ═══════════════════════════════════════════════════════════════════════════
   GENERATED FILE — DO NOT EDIT. Every edit here is lost on the next build.

   Rebuild:  python3 scripts/build_porcelain_shell_css.py

   Inputs, concatenated in this order:
     static/react-bundles/porcelain/src/styles/tokens.css
     static/react-bundles/porcelain/src/ui/nav.tokens.css
       both copied verbatim — see porcelain-shell.css's own header for why.
   ───────────────────────────────────────────────────────────────────────────
   WHY THIS FILE EXISTS, SEPARATELY FROM porcelain-shell.css. That file's
   .cls-shell-* rules only ever match rail markup, but the --cls-* tokens
   they and every Porcelain-ported page depend on need to resolve on EVERY
   Jinja page, rail or not — a signed-out marketing page, an admin dashboard,
   an error page. templates/base.html links this file unconditionally and
   keeps porcelain-shell.css conditional on porcelain_rail, so a non-rail page
   is not paying for (or double-declaring) rail-only CSS it will never use.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — copied verbatim. Edit the source, never this copy.
   static/react-bundles/porcelain/src/styles/tokens.css
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   PORCELAIN — the Tutix Classes design system
   ───────────────────────────────────────────────────────────────────────────
   THE SINGLE SOURCE OF TRUTH. tailwind.config.ts resolves every colour to a
   variable declared here, and every CSS Module reads the same ones, so the two
   layers cannot drift.

   Prefixed --cls-* on purpose: the site's own stylesheets already declare
   --primary / --primary-rgb (static/css/styles-custom.css) and the marketing
   pages use --ct-* . An unprefixed --ink or --line would collide the moment
   any Porcelain component is reused outside /classes/*, which is the stated
   goal for this system.

   ACCENTS ARE TUTIX-EXACT and must not be altered:
     #2b8cee #1a6bbd #f59e0b #16a34a #dc2626 #14b8a6
   NEUTRALS are Porcelain's warm ceramic ramp, deliberately warmer than the
   site's cool #f6f7f8/#e7edf3 — confirmed 2026-08-27.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Declared here rather than in base.css so it MOVES WITH THE THEME CLASS —
     the UA then paints scrollbars, form-control internals, <select> popups,
     the caret and autofill to match the ramp. */
  color-scheme: light;

  /* ── NEUTRAL RAMP ── warm ceramic. Structure lives in HAIRLINES, not shadow. */
  --cls-ground:  #f9f8f5;   /* the page */
  --cls-tray:    #f4f2ee;   /* sidebar, grouped/inset backgrounds */
  --cls-sunk:    #eeebe5;   /* recessed regions, the paused tile */
  --cls-well:    #e3dfd8;   /* deepest: meter tracks, pressed surfaces */
  --cls-panel:   #fdfcfa;   /* the default tile — flat, hairline only */
  --cls-leaf:    #ffffff;   /* the ONE raised layer */

  /* ── HAIRLINES ── these do the structural work */
  --cls-line:    #e6e1da;
  --cls-line-2:  #d6d0c6;

  /* ── INK ── warm brown-black. Never #000, never a cool slate grey.
     Measured on --leaf: ink 17.4:1 · ink-2 10.4:1 · ink-3 7.4:1 · ink-4 5.6:1 */
  --cls-ink:     #1c1a17;
  --cls-ink-2:   #443f38;
  --cls-ink-3:   #5b554c;
  --cls-ink-4:   #6f6759;

  /* ── ACCENTS ── Tutix-exact. The RAW value is for fills and marks only. */
  --cls-blue:       #2b8cee;
  --cls-blue-deep:  #1a6bbd;
  --cls-blue-hover: #3f97f0;  /* BRIGHTER than --cls-blue on purpose: .btn-primary
                                 puts near-black ink on blue, so a DARKER hover
                                 drops contrast (5.03:1 -> 4.03:1). 5.70:1. */
  --cls-amber:  #f59e0b;
  --cls-green:  #16a34a;
  --cls-red:    #dc2626;
  --cls-red-hover: #b31d1d;  /* DARKER than --cls-red, and the exact mirror of
                                --cls-blue-hover's argument: .btn-lead puts
                                WHITE on red, so a BRIGHTER hover would drop
                                contrast. Mode-invariant for the same reason
                                --cls-on-lead is — it sits under a fixed ink on
                                a fixed fill. It is the value --cls-red-ink
                                happens to hold in LIGHT, which is why this
                                looked like one token until the ramp forked:
                                --cls-red-ink must LIGHTEN in dark (it is text)
                                and this must not (it is a fill). 8.06:1. */
  --cls-teal:   #14b8a6;      /* RESERVED: the tutor acting on the learner's work. */

  /* ── ACCENT INK ── for TEXT. White fails on every raw accent
     (blue 3.45:1 · amber 2.15:1 · green 3.30:1 · teal 2.49:1), so text that
     needs an accent colour uses these; only --cls-red takes white (4.83:1). */
  --cls-blue-ink:  #14599f;
  --cls-amber-ink: #8f4c04;
  --cls-green-ink: #10682f;
  --cls-teal-ink:  #0a6259;
  --cls-red-ink:   #b31d1d;

  /* ── ELEVATION ── every shadow warm-tinted rgba(74,62,44,..), never grey.
     Exactly ONE raised tier. --cls-lit is the family signature. */
  --cls-lit:    inset 0 1px 0 rgba(255, 255, 255, .95);
  --cls-raise:  0 1px 2px rgba(74, 62, 44, .06), 0 6px 16px -6px rgba(74, 62, 44, .16);
  --cls-recess: inset 0 2px 5px rgba(74, 62, 44, .10), inset 0 0 0 1px rgba(74, 62, 44, .05);

  /* ── RADIUS ── three steps, no others */
  --cls-r:      14px;
  --cls-r-sm:   9px;
  --cls-pill:   999px;

  /* ── THE SEAM ── the signature: one vertical hairline at a fixed x, shared by
     every row in a stack, so a list reads as one ruled ledger.
     768: tightens. 390: RETIRED — rows stack, the rule is never faked. */
  --cls-seam:      288px;
  --cls-seam-tab:  240px;

  /* ── SHELL ── */
  --cls-rail:       224px;
  --cls-rail-icon:   64px;
  --cls-tabbar:      56px;

  /* ── MOTION ── no bounce, no elastic. Reduced-motion collapses to a crossfade. */
  --cls-dur-fast: 120ms;
  --cls-dur:      180ms;
  --cls-ease:     cubic-bezier(.4, 0, .2, 1);
  --cls-ease-out: cubic-bezier(0, 0, .2, 1);

  /* ── FOCUS ── shows instantly; never animated in. */
  --cls-focus: 0 0 0 2px var(--cls-leaf), 0 0 0 4px var(--cls-blue-deep);

  /* ── GROUND TEXTURE ── two washes + a fine weave, so the page is not a flat slab */
  --cls-ground-image:
    radial-gradient(1120px 640px at 80% -14%, rgba(43, 140, 238, .045), transparent 62%),
    radial-gradient(840px 540px at 2% 106%, rgba(122, 105, 78, .055), transparent 66%),
    repeating-linear-gradient(45deg,  rgba(74, 62, 44, .016) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(74, 62, 44, .012) 0 1px, transparent 1px 5px);

  /* ── SHARED SUB-TOKENS ── promoted here from the group token files so no name
     is declared twice. Values unchanged; each was identical in both places. */
  --cls-line-hover: #c8c1b5;   /* the hover hairline: .btn:hover, .chip:hover, inputs */
  --cls-fill-mute:  #a89e8c;   /* a disabled/paused meter or bar fill */
  --cls-r-xs:       7px;       /* the inner radius of a 9px shell with 3px padding */
  --cls-lit-on:     inset 0 1px 0 rgba(255, 255, 255, .42);  /* lit line on a BLUE fill */
  --cls-lit-fill:   inset 0 1px 0 rgba(255, 255, 255, .40);  /* lit line on a bar fill */
  --cls-shade:      #4a3e2c;   /* the warm ink every quiet WASH / RULE is tinted with */

  /* ── ROLE TOKENS ── added with the dark ramp. Each one existed before as a
     SECOND JOB quietly riding on a token whose first job moves between modes;
     the tell that they were always separate concepts is that all four are
     mode-invariant or nearly so.
       --cls-on-accent  the ink that sits ON a bright accent FILL. Was
                        --cls-ink, which is near-black in light and warm bone
                        in dark — the same rule would read 3.01:1 in dark.
                        A bright fill is a LIGHT surface in either mode, so
                        this never changes.
       --cls-on-lead    the white on the red destructive fill. Was --cls-leaf
                        ("--cls-leaf IS #ffffff"), which stops being white the
                        moment a dark ramp exists. Red is the one accent that
                        takes white (4.83:1); near-black on red is 3.60:1 and
                        fails, so this is white in both modes.
       --cls-shadow-ink the DROP-SHADOW half of --cls-shade. A wash must
                        LIGHTEN in dark and a shadow must DARKEN; one value
                        cannot do both, so the two jobs are now two tokens.
       --cls-scrim      the modal scrim. Saturates in dark exactly as
                        --cls-recess does, so it takes a higher alpha rather
                        than a mirrored colour. */
  --cls-on-accent:  #1c1a17;
  --cls-on-lead:    #ffffff;
  --cls-shadow-ink: #4a3e2c;
  --cls-scrim:      rgb(74 62 44 / .34);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK — a TRANSLATION of the same physical model onto a dark ground, not an
   inversion of its values.
   ───────────────────────────────────────────────────────────────────────────
   What does NOT flip:
     · the ORDERING rule — light falls from above, so a recessed surface
       (tray/sunk/well) is still darker than the page and a raised one
       (panel/leaf) is still lighter;
     · the HUE BAND — every neutral stays 33-45deg warm. Fired stoneware, not
       graphite. Ink is warm bone, never #ffffff, the exact mirror of the light
       ramp's "never #000";
     · the NARROWNESS — six surfaces inside 11.70 L* against light's 11.05,
       with the same monotonically-shrinking step shape;
     · the ACCENTS — six of seven are byte-identical, because a raw accent is a
       FILL and a bright fill is a light surface in either mode. The brand
       cannot drift in dark because in dark the brand values ARE the same values.

   What MUST change:
     · the DIRECTION OF EVERY EDGE. A hairline is visible only by contrast with
       what it sits on: on white paper an edge is a shadow line, on dark clay it
       is a highlight line. Same quietness, opposite sign.
     · the APPORTIONING OF ELEVATION. A dark ground has only 13.07 L* of room
       beneath it, so a drop shadow physically cannot carry the weight it
       carries on white. Porcelain's own doctrine supplies the answer: when the
       shadow runs out, the hairline takes over.

   SWITCHING is by CLASS, not by media query. base.html resolves the system
   preference IN JAVASCRIPT (`stored === 'true' || (stored === null &&
   prefersDark)`) and stamps `.dark` on <html>; the class is the single source
   of truth. The @media block below is a FALLBACK for a host that stamps
   nothing, and is guarded on `:not(.cls-light)` so an explicit light choice
   still wins on a dark-OS machine — the one case where two sources of truth
   would otherwise disagree, and the exact case the user cared enough to
   configure. Any host that boots Porcelain stamps `.dark` OR `.cls-light`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── WHY [class~="dark"] AND NOT .dark ─────────────────────────────────────
   Because a token sheet is reached BOTH ways in this bundle: some components
   `@import "./nav.tokens.css"` from inside a *.module.css, and others import it
   from a .tsx. In the first case CSS Modules treats the imported file as part
   of that module and REWRITES every class selector in it, so `:root.dark`
   shipped as `:root._dark_efptk_1` and matched nothing — silently, with no
   error, in a build that was otherwise green. An attribute selector is not a
   class selector, so the scoper leaves it alone; it matches exactly the same
   elements and carries the same (0,1,0) specificity. Do not "tidy" it back.
   Caught by reading the emitted CSS, not by inspection. ─────────────────── */
:root[class~="dark"] {
  color-scheme: dark;

  /* ── NEUTRAL RAMP ── recessed still darker, raised still lighter. The raised
     steps stay almost imperceptible: a tile is a tile because of its hairline,
     not its brightness. --cls-leaf is nudged to 3.33 L* above ground (light
     2.42) because in dark the surface must take back a little of the lift the
     shadow can no longer supply. */
  --cls-ground:  #26211a;   /* L* 13.07 — deliberately not on the floor: the
                               recessed tier has to fit underneath it */
  --cls-tray:    #211d15;   /* L* 10.97 — a recess is in shade in BOTH modes */
  --cls-sunk:    #1b1710;   /* L*  7.98 */
  --cls-well:    #12100a;   /* L*  4.71 — near the floor by design, so a meter
                               track reads as a real groove, not a painted bar */
  --cls-panel:   #2a251d;   /* +1.91 L* over ground (light +1.41) */
  --cls-leaf:    #2d2820;   /* +3.33 L* over ground (light +2.42) */

  /* ── HAIRLINES ── THE ONE PLACE THE PHYSICAL MODEL FLIPS. A darker line on
     dark clay is a black gash that vanishes into the ground, so the dark
     hairline is LIGHTER than its surface. Tuned to the light RATIOS rather
     than mirrored about a midpoint, because a light line reads louder than a
     dark line at equal delta. */
  --cls-line:    #332d24;   /* 1.232:1 on tray  (light 1.163:1) */
  --cls-line-2:  #4a4236;   /* 1.479:1 on leaf  (light 1.533:1) */

  /* ── INK ── warm bone/eggshell, hue 38.6. Light's 17.36:1 is UNREACHABLE
     here: even pure white on the dark leaf caps at 14.62:1, because a raised
     surface cannot be as far from the ink as white is from near-black.
     12.77:1 still clears AAA. */
  --cls-ink:     #f4efe6;
  --cls-ink-2:   #cec6b8;
  --cls-ink-3:   #b0a795;
  --cls-ink-4:   #9a9180;   /* lifted so it clears 4.5:1 on EVERY surface
                               (4.69:1 worst case, on leaf) */

  /* ── ACCENTS ── unchanged except one. --cls-blue-deep's two jobs (the focus
     ring, and the border on a blue fill) are both defined relative to what
     SURROUNDS them: a deep blue ring on a near-black ground is 2.6:1, and a
     deep border between a bright fill and a dark ground dissolves the button's
     silhouette instead of drawing it. The NAME stops being literal; its JOB —
     "the blue that outranks --cls-blue against its surround" — carries over. */
  --cls-blue-deep:  #63aef4;

  /* ── ACCENT INK ── the ROLE flips, the contrast BAND does not. These exist
     because light needs DARK-on-colour; dark needs the exact opposite, so each
     becomes a lightened tint of the same hue. Pill band 5.77-6.20:1 against
     light's 5.69-6.42:1 — a pill is exactly as legible in either mode. */
  --cls-blue-ink:  #7cbbf7;
  --cls-amber-ink: #ecb160;
  --cls-green-ink: #5cc684;
  --cls-teal-ink:  #46cdbd;
  --cls-red-ink:   #f18d88;

  /* ── ELEVATION ──
     --cls-lit  CANNOT be reproduced exactly. In light its delta VARIES with the
       surface (+0.00 L* on leaf, +1.01 panel, +4.11 tray, +10.43 well) — that
       variation is a property of the light ramp's POSITION, not of the token.
       On a dark ramp every surface is near-black, so one alpha lands in the
       same place everywhere. The alpha is chosen for the dominant use (controls
       on --cls-leaf): +2.81 L*, at the threshold of perception. WARM, not
       #ffffff — a pure-white rim on warm clay reads cold and turns the whole
       system blue-grey at every edge.
     --cls-raise  runs out of room. Light's umbra is -10.43 L* on the ground; an
       OPAQUE warm near-black reaches only -11.88 L* here, the entire available
       floor, so matching light would need alpha ~0.93 and a black hole under
       every tile. Dark takes about two-thirds and buys the rest back with a 1px
       ring. The contact shadow is deliberately HEAVIER than light's: a tight
       contact edge is the cue that survives best at low luminance, and is what
       says the object sits on something rather than glows.
     --cls-recess  is fully SATURATED — the dark well is at L* 4.71 and an
       opaque near-black at L* 1.90, so the MAXIMUM possible darkening is
       -3.51 L*. No colour or alpha makes a dark recess deep enough by
       darkening alone, so the lighting model supplies the missing half: in a
       real depression the top inner wall is in shade AND the far wall catches
       the light. Light draws only the shaded wall because it has room downward;
       dark draws both. Top -2.18, bottom +5.56, swing 7.74 L* against light's
       5.64. The lit bottom edge is the exact inverse of --cls-lit's lit top
       edge, which is why it belongs here and not to a new token. */
  --cls-lit:    inset 0 1px 0 rgba(255, 246, 234, .03);
  --cls-raise:  0 0 0 1px rgba(6, 4, 3, .55),
                0 1px 2px rgba(6, 4, 3, .35),
                0 6px 16px -6px rgba(6, 4, 3, .50);
  --cls-recess: inset 0 2px 5px rgba(6, 4, 3, .55),
                inset 0 -1px 0 rgba(255, 246, 234, .05),
                inset 0 0 0 1px rgba(6, 4, 3, .35);

  /* ── GROUND TEXTURE ── each layer tuned so its composited dL* on the dark
     ground matches its dL* on the light ground (blue -1.91 -> +2.05, warm
     -2.73 -> +2.94, weave -1.04 -> +0.97). The alphas barely move; the WARM
     layer must flip from a darkening to a lightening for the same reason the
     hairlines do. */
  --cls-ground-image:
    radial-gradient(1120px 640px at 80% -14%, rgba(43, 140, 238, .05), transparent 62%),
    radial-gradient(840px 540px at 2% 106%, rgba(214, 178, 120, .04), transparent 66%),
    repeating-linear-gradient(45deg,  rgba(255, 246, 234, .010) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(255, 246, 234, .008) 0 1px, transparent 1px 5px);

  /* ── SHARED SUB-TOKENS ──
     --cls-fill-mute is DERIVED, not guessed: in light it sits 74.5% of the way
     from the track (--cls-well) toward the live blue fill. The same fraction on
     the dark track gives L* 44.4. It reads 3.47:1 on its track against the live
     fill's 5.51:1 — unmistakably drained, and it clears 3:1 where light's
     1.99:1 does not.
     --cls-shade is the WASH/RULE half only: a warm off-white whose composited
     effect matches light almost exactly at every alpha in use (.03 +1.93 vs
     -2.00, .06 +3.94 vs -4.11, .09 +6.14 vs -5.88, .11 +7.50 vs -7.28). Note
     the ALPHAS did not need changing — the COLOUR did. That is the general rule
     for NEUTRAL washes, and the inverse of the rule for ACCENT tints, which
     keep their colour and raise alpha only ~1.1x. */
  --cls-line-hover: #5b5145;   /* 1.886:1 on leaf (light 1.787:1) */
  --cls-fill-mute:  #726855;
  --cls-shade:      #b8ae9c;
  --cls-shadow-ink: #060403;
  --cls-scrim:      rgb(6 4 3 / .62);

  /* --cls-lit-on / --cls-lit-fill are NOT redeclared: they sit on an ACCENT
     FILL, and no accent fill moves between modes. Their surface did not change,
     so neither do they — the same argument that keeps --cls-blue-hover fixed.
     --cls-focus is not redeclared either: its expression is mode-invariant and
     only its INPUTS move (--cls-leaf spacer, --cls-blue-deep ring), both of
     which are re-solved above.
     --cls-on-accent / --cls-on-lead are not redeclared BY DESIGN: they are the
     two tokens that must not move. */
}

/* FALLBACK for a host that stamps no theme class at all. Guarded on
   `:not(.cls-light)` so a user who explicitly chose light on a dark-OS machine
   is not overridden by their own operating system. Values are a verbatim copy
   of the block above — keep the two in step. */
@media (prefers-color-scheme: dark) {
  :root:not([class~="cls-light"]) {
    color-scheme: dark;

    --cls-ground:  #26211a;
    --cls-tray:    #211d15;
    --cls-sunk:    #1b1710;
    --cls-well:    #12100a;
    --cls-panel:   #2a251d;
    --cls-leaf:    #2d2820;

    --cls-line:    #332d24;
    --cls-line-2:  #4a4236;

    --cls-ink:     #f4efe6;
    --cls-ink-2:   #cec6b8;
    --cls-ink-3:   #b0a795;
    --cls-ink-4:   #9a9180;

    --cls-blue-deep:  #63aef4;

    --cls-blue-ink:  #7cbbf7;
    --cls-amber-ink: #ecb160;
    --cls-green-ink: #5cc684;
    --cls-teal-ink:  #46cdbd;
    --cls-red-ink:   #f18d88;

    --cls-lit:    inset 0 1px 0 rgba(255, 246, 234, .03);
    --cls-raise:  0 0 0 1px rgba(6, 4, 3, .55),
                  0 1px 2px rgba(6, 4, 3, .35),
                  0 6px 16px -6px rgba(6, 4, 3, .50);
    --cls-recess: inset 0 2px 5px rgba(6, 4, 3, .55),
                  inset 0 -1px 0 rgba(255, 246, 234, .05),
                  inset 0 0 0 1px rgba(6, 4, 3, .35);

    --cls-ground-image:
      radial-gradient(1120px 640px at 80% -14%, rgba(43, 140, 238, .05), transparent 62%),
      radial-gradient(840px 540px at 2% 106%, rgba(214, 178, 120, .04), transparent 66%),
      repeating-linear-gradient(45deg,  rgba(255, 246, 234, .010) 0 1px, transparent 1px 5px),
      repeating-linear-gradient(-45deg, rgba(255, 246, 234, .008) 0 1px, transparent 1px 5px);

    --cls-line-hover: #5b5145;
    --cls-fill-mute:  #726855;
    --cls-shade:      #b8ae9c;
    --cls-shadow-ink: #060403;
    --cls-scrim:      rgb(6 4 3 / .62);
  }
}

/* ── FORBIDDEN, recorded so the rule survives a future edit ──────────────────
   BOTH MODES
   · white text on raw blue/amber/green/teal → use the *-ink values
   · --cls-blue-deep as a .btn-primary hover → use --cls-blue-hover
     (light 3.21:1; dark fails for the OPPOSITE reason — the ring blue is now
     bright, so near-black ink on it is fine but the button loses its silhouette)
   · --cls-ink on an accent FILL → use --cls-on-accent (dark would be 3.01:1)
   · --cls-leaf standing in for "white" → use --cls-on-lead (dark: 3.03:1)
   · --cls-shade in a drop shadow → use --cls-shadow-ink (a wash lightens in
     dark, a shadow darkens; --cls-shade only does the first)
   · purple / violet / fuchsia as UI accent — the preset tutor portraits carry
     their own palettes as ARTWORK, which is fine; chrome never does.

   LIGHT ONLY — the dark ramp REMOVES this pairing (6.10:1), so the forbidden
   list is mode-specific rather than global. Any component shared across both
   modes must still route to --cls-ink-3 there; do not "simplify" it back.
   · --cls-ink-4 on --cls-well  = 4.21:1  → use --cls-ink-3 (5.55:1)

   CARRIED OVER, deliberately unfixed in both modes
   · --cls-line-2 as a control border is 1.44:1 light / 1.62:1 dark, and WCAG
     1.4.11 asks 3:1. Porcelain identifies a control by fill, label and 44px
     target instead. Fixing it in dark alone would fork the two modes.
   ─────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — copied verbatim. Edit the source, never this copy.
   static/react-bundles/porcelain/src/ui/nav.tokens.css
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   PORCELAIN — navigation-layer token extension
   ───────────────────────────────────────────────────────────────────────────
   src/styles/tokens.css is the source of truth and is NOT edited here. This
   file declares only the handful of values Components.dc.html / MainMobile
   author OUTSIDE that file, so no nav module ever inlines a raw hex or rgba.

   Every name is `--cls-nav-*` on purpose: the forms group ships its own
   `forms.tokens.css` which already owns `--cls-wash` (.06) and
   `--cls-tint-blue` (.09). Those are DIFFERENT alphas from the ones section 9
   uses, so a shared name would silently repaint whichever sheet loaded first.

   Values, verbatim from the design:
     --cls-nav-wash        .nav-item:hover / .rail-item:hover / .step:hover
                           rgba(74,62,44,.055)      Components.dc.html L127
     --cls-nav-wash-2      .pg:hover / .mrow:hover / .btn-quiet:hover
                           rgba(74,62,44,.06)       Components.dc.html L546
     --cls-nav-wash-leaf   .tab:hover               rgba(255,255,255,.60)  L528
     --cls-nav-wash-leaf-2 .stab:hover              rgba(255,255,255,.62)  L538
     --cls-nav-tint-blue   .tabb[aria-current]      rgba(43,140,238,.08)
                           ComponentsMobile.dc.html L671
     --cls-nav-lift        .tabbar — the ONLY upward shadow in the family
                           0 -1px 2px rgba(74,62,44,.06)
                           ComponentsMobile.dc.html L663
     --cls-nav-fade        the step-strip scroller's right-edge fade width.
                           30px at 390, 34px at 768 (SeriesDetail{Mobile,Tablet})

   Declared unlayered, exactly like tokens.css and forms.tokens.css, so a later
   @layer components rule cannot lose to it. Imported by every nav component,
   so a component pulled in on its own is still self-sufficient.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --cls-nav-wash: rgba(74, 62, 44, 0.055);
  --cls-nav-wash-2: rgba(74, 62, 44, 0.06);
  --cls-nav-wash-leaf: rgba(255, 255, 255, 0.6);
  --cls-nav-wash-leaf-2: rgba(255, 255, 255, 0.62);
  --cls-nav-tint-blue: rgba(43, 140, 238, 0.08);
  --cls-nav-lift: 0 -1px 2px rgba(74, 62, 44, 0.06);
  --cls-nav-fade: 30px;
}

@media (min-width: 768px) {
  :root { --cls-nav-fade: 34px; }
}

/* ── DARK ── the two neutral washes flip colour and keep their alpha; the two
   leaf washes become the dark leaf at the same alpha; the accent tint keeps its
   colour and gains ~1.1x alpha; --cls-nav-lift is a SHADOW and so retints to
   --cls-shadow-ink. --cls-nav-fade is a length and does not move. */
/* ── WHY [class~="dark"] AND NOT .dark ─────────────────────────────────────
   Because a token sheet is reached BOTH ways in this bundle: some components
   `@import "./nav.tokens.css"` from inside a *.module.css, and others import it
   from a .tsx. In the first case CSS Modules treats the imported file as part
   of that module and REWRITES every class selector in it, so `:root.dark`
   shipped as `:root._dark_efptk_1` and matched nothing — silently, with no
   error, in a build that was otherwise green. An attribute selector is not a
   class selector, so the scoper leaves it alone; it matches exactly the same
   elements and carries the same (0,1,0) specificity. Do not "tidy" it back.
   Caught by reading the emitted CSS, not by inspection. ─────────────────── */
:root[class~="dark"] {
  --cls-nav-wash: rgba(184, 174, 156, 0.055);
  --cls-nav-wash-2: rgba(184, 174, 156, 0.06);
  --cls-nav-wash-leaf: rgba(45, 40, 32, 0.6);
  --cls-nav-wash-leaf-2: rgba(45, 40, 32, 0.62);
  --cls-nav-tint-blue: rgba(43, 140, 238, 0.09);
  --cls-nav-lift: 0 -1px 2px rgba(6, 4, 3, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([class~="cls-light"]) {
    --cls-nav-wash: rgba(184, 174, 156, 0.055);
    --cls-nav-wash-2: rgba(184, 174, 156, 0.06);
    --cls-nav-wash-leaf: rgba(45, 40, 32, 0.6);
    --cls-nav-wash-leaf-2: rgba(45, 40, 32, 0.62);
    --cls-nav-tint-blue: rgba(43, 140, 238, 0.09);
    --cls-nav-lift: 0 -1px 2px rgba(6, 4, 3, 0.45);
  }
}