/* ============================================================================================
   THE GLASS SKIN FAMILY - generated by skin-templatize.js from the "neon" skin, 16 Sep 2026.

   Hugo: "DIDNT I ASK YOU MANY MANY TIMES TO MAKE SURE NOTHING IS HARD CODED AND EVERYTHING SHOULD
   BE SAVABLE AS A TEMPLATE AND REUSABLE". This file is that template. Every rule below used to be
   `body[data-theme="neon"] ...` with literal colours typed in. It now applies to ANY skin whose
   registry entry says family "glass" (App.jsx sets body[data-skin-family] from PALETTE_THEMES),
   and it holds no literal colour: only the bases (--sk-*) and formulas over them.

   A colour that no formula reproduced exactly reads  var(--sk-<slot>, <nearest formula>):  the
   "neon" skin sets that slot to its exact colour, a new skin simply gets the formula.
   test/skinTemplate.test.js fails if a literal colour comes back into this file, or if a skin
   block in themes.css holds anything but values.
   The comments below are the originals, kept in place - the record of why each treatment looks
   the way it does. Notes that only described the ten removed skins were dropped (git keeps them).
   ============================================================================================ */
body[data-skin-family="glass"] {
  /* defaults for the bases a skin may leave out; the skin's own block in styles/themes.css wins */
  --sk-kpi-material: glass;
--sk-orn-donut-image: none;
  --sk-orn-donut-size: 100% 100%;
  --sk-orn-donut-position: center;
  --sk-orn-donut-opacity: 1;
  --sk-orn-band-corner-image: none;
  --sk-orn-band-corner-tr-image: none;
  --sk-orn-band-corner-size: 100px 100px;
  --sk-orn-band-corner-tr-size: 100px 100px;
  --sk-orn-band-corner-position: left 14px top 12px;
  --sk-orn-band-corner-tr-position: right 14px top 12px;
  --sk-orn-band-corner-opacity: 1;
  --sk-orn-brand-image: none;
  --sk-orn-brand-size: contain;
  --sk-orn-brand-position: left center;
  --sk-orn-brand-opacity: 1;
  --sk-orn-empty-image: none;
  --sk-orn-empty-size: 80px 58px;
  --sk-orn-empty-position: center calc(50% - 49px);
  --sk-orn-empty-opacity: 1;
  --sk-texture: off;
  --sk-kpi-glyphs: off;
  --sk-kpi-glyph-image: none;
  --sk-tex-inset: off;
  --sk-tex-blend: soft-light;
  --sk-tex-matte: off;
  --sk-tex-matte-cover: 90%;
  --sk-tex-matte-rail-cover: 85%;
  --sk-tex-light-panel-image: none;
  --sk-tex-light-panel-size: 1254px 1254px;
  --sk-tex-dark-panel-image: none;
  --sk-tex-dark-panel-size: 1254px 1254px;
  --sk-tex-dark-stone: off;
  --sk-tex-dark-center: off;
  --sk-tex-dark-image: none;
  --sk-tex-dark-size: 1254px 1254px;
  --sk-tex-dark-cover: 12%;
  --sk-tex-row-image: none;
  --sk-tex-row-size: 1600px 1600px;
  --sk-tex-panel-image: none;
  --sk-tex-card-image: none;
  --sk-tex-rail-image: none;
  --sk-tex-panel-size: 1600px 1600px;
  --sk-tex-card-size: 1600px 1600px;
  --sk-tex-rail-size: 1600px 1600px;
  --sk-tex-step-x: -611px;
  --sk-tex-step-y: -237px;
  --sk-ramp-0: var(--sk-a1);
  --sk-ramp-1: color-mix(in srgb, var(--sk-a1) 55%, var(--sk-a3));
  --sk-ramp-2: var(--sk-a3);
  --sk-ramp-3: var(--sk-a4);
  --sk-ramp-4: var(--sk-a2);
  --sk-deep: color-mix(in srgb, var(--sk-page) 55%, var(--sk-dark));
  --sk-line: color-mix(in srgb, var(--sk-ink) 62%, var(--sk-page));
  --sk-light: #FFFFFF;
  --sk-dark: #000000;
  /* the shot row's lower edge: 1 = the fill falls to its dark bottom stop and accent light pools
     there (a dark-row skin); 0 = a flat row with a crisp edge (a pale-row skin) */
  --sk-row-shade: 1; /* @options 1 | 0 */
  --sk-row-pool: 1;  /* @options 1 | 0 */
  /* the shot rows' own fill: a pale-row skin sets it, every other skin's rows read its surface */
  --sk-row-surface: var(--sk-surface);
  /* 1 = the two corners the main panel's rounded edge cuts out show the rail's colour (a skin whose
     rail and page differ, so the cut-out would read as a notch); 0 = they show the page */
  --sk-shell-corner: 0; /* @options 0 | 1 */
  /* 1 = each shot-row ring glows in its own colour; 0 = every ring glows in the first accent */
  --sk-ring-glow-own: 0; /* @options 0 | 1 */
  /* THE OVERVIEW STATS BAND (17 Sep 2026): the donut + stats panel on Overview may be its own
     material (Midnight Lavender: a PALE band with dark text on an otherwise dark page). The three
     bases below are the band's fill, its text and its muted text; by default they are the page's.
     The band's glass never read the surface base (it is a 40-44% wash over the photo), so a pale
     band also needs the solid choice: 0 = the smoked glass every other skin has (the band surface
     does not show), 1 = the band, its tab trough, its bar track and its stat discs are painted
     from the band surface, with a dark disc kept inside the donut. */
  --sk-stats-surface: var(--sk-surface);
  --sk-stats-ink: var(--sk-ink);
  --sk-stats-ink-muted: var(--sk-ink-muted-1, color-mix(in srgb, var(--sk-line) 72%, var(--sk-light)));
  --sk-stats-solid: 0; /* @options 0 | 1 */
  /* (17 Sep 2026) the project STATUS TAG's fill: tint = a see-through tint of its colour (header.css);
     solid = --sk-status-pill-fill-1 painted as it is (Paradise Found Dark: a dark amber chip) */
  --sk-status-tag: tint; /* @options tint | solid */
  /* (17 Sep 2026) the rail and the right-column and footer cards: 0 = see-through glass over the photo (the rail
     72-80%, the cards 62-72%, the footer 42-56%); 1 = nearly opaque (the rail 94%, the cards 92%: the design
     tokens' panel and card opacity), for a mockup whose panels are solid dark over a bright photo (Paradise
     Found Dark over its misty forest: the glass rail showed the mist at L 24 where the mockup is L 10) */
  --sk-panels-solid: 0; /* @options 0 | 1 */
  /* (17 Sep 2026, Midnight Lavender review) how far a band stat fades while another stat is focused
     (topbar.css / mobile.css: 0.42). A pale solid band fades dark text into itself (1.8:1), so such a
     skin fades less. A number, never read with a fallback. */
  --sk-stat-dim: 0.42;
  /* (17 Sep 2026) the donut's ramp: 1 = along each arc, 0 = lit from one side (see --donut-ramp-along) */
  --sk-donut-ramp-along: 1; /* @options 1 | 0 */
  /* The project's photo itself is never recoloured: no grayscale, tint, blend or filter on it (Hugo, 16 Sep
     2026). (17 Sep 2026, Hugo on Paradise Found Dark: "why is the background image not getting any blur and
     fade in this style?") A skin may lay a VEIL over it, as forest does (backdrop.css body::before): a colour
     slot, --sk-photo-veil-1, switches it on. The veil's top and bottom strengths and the blur of what it
     covers are below; they do nothing until a skin sets the slot. */
  --sk-photo-veil-top: 72%;
  --sk-photo-veil-bottom: 72%;
  --sk-photo-blur: 0px;
}

/* ==== NEON - 15 Sep 2026. Colour scheme of Hugo's ChatGPT mockup "mockup_01.png" (Trope, style-mockups).
   A full preset like dark-cinematic: tokens + every hard-coded cream surface. Dark panels on a #060912 page. ==== */
body[data-skin-family="glass"] {
  --ink-deep: var(--ink);
  --ink-deep-2: var(--ink);
  /* role tokens (15 Sep 2026): light text stays light, dark text follows the ink */
  --ink-cream: var(--ink-on-dark);
  --ink-cream-2: var(--ink-on-dark);
  --ink-cream-3: var(--ink-on-dark);
  --ink-cream-4: var(--ink-on-dark);
  --ink-cream-5: var(--ink-on-dark);
  --ink-cream-6: var(--ink-on-dark-muted);
  --ink-cream-7: var(--ink-on-dark);
  --ink-cream-8: var(--ink-on-dark);
  --ink-cream-9: var(--ink-on-dark);
  --ink-cream-10: var(--ink-on-dark);
  --ink-hi: var(--ink-on-dark);
  --ink-hi-2: var(--ink-on-dark);
  --ink-hi-3: var(--ink-on-dark);
  --ink-paper: var(--ink-on-dark);
  --ink-paper-2: var(--ink-on-dark);
  --ink-forest: var(--ink);
  --ink-forest-2: var(--ink);
  --ink-forest-3: var(--ink);
  --ink-forest-4: var(--ink);
  --ink-forest-5: var(--ink);
  --ink-forest-6: var(--ink);
  --ink-bg: var(--ink);
  --ink-sidebar-bg: var(--ink);
  --ink-umber: var(--ink);
  --ink-umber-2: var(--ink);
  --ink-umber-3: var(--ink);
  --ink-umber-4: var(--ink);
  --ink-taupe: var(--ink-muted);
  --ink-taupe-2: var(--ink-muted);
  --ink-taupe-3: var(--ink-muted);
  --ink-taupe-4: var(--ink-muted);
  --ink-taupe-5: var(--ink-muted);
  --surface-forest: color-mix(in srgb, var(--leaf) 28%, var(--mix-dark));
  --surface-forest-2: var(--leaf);
  --surface-forest-3: var(--leaf);
  --surface-forest-4: var(--leaf);
  --surface-forest-5: var(--leaf);
  --surface-forest-6: var(--leaf);
  /* charts, badges, roles, danger - the tokens Fixer A introduced (15 Sep 2026) */
  --accent: var(--leaf);
  --accent-strong: var(--leaf);
  --danger: var(--sk-danger-1, color-mix(in srgb, var(--sk-a1) 78%, var(--sk-surface)));
  --danger-border: color-mix(in srgb, var(--danger) 45%, transparent);
  --warn-deep: color-mix(in srgb, var(--warn) 45%, var(--ink));
  --chart-6: var(--archive);
  --chart-7: var(--ink-muted);
  --chart-ok: var(--ok);
  /* (17 Sep 2026) the fail colour is TEXT too (Reports' over-budget lines, drawn at 55-70%), so it is a slot */
  --chart-fail: var(--sk-chart-fail-1, var(--danger));
  --badge-phase: var(--warn);
  --badge-phase-ink: color-mix(in srgb, var(--warn) 45%, var(--ink));
  --badge-review: var(--amber);
  --badge-review-ink: color-mix(in srgb, var(--amber) 45%, var(--ink));
  --badge-kickoff: var(--amber);
  --badge-kickoff-ink: color-mix(in srgb, var(--amber) 45%, var(--ink));
  --badge-default: var(--tan-deep);
  --badge-default-ink: var(--ink-muted);
  --role-admin: var(--leaf);
  --role-director: var(--amber);
  --role-lead: var(--teal);
  --role-artist: var(--sk-a3);
  --role-reviewer: var(--ink-muted);
  --role-editor: var(--amber);
  color-scheme: dark;
  --mix-light: var(--sk-mix-light-1, color-mix(in srgb, var(--sk-ink) 30%, var(--sk-surface)));
  --mix-dark: var(--sk-dark);
  /* the forest family the stylesheets used to hard-code (15 Sep 2026) */
  /* pass two: the named shades, derived from this preset's bases (15 Sep 2026) */
  --cream: color-mix(in srgb, var(--paper) 91%, var(--mix-light));
  --cream-2: color-mix(in srgb, var(--paper) 96%, var(--mix-light));
  --cream-3: color-mix(in srgb, var(--card-bg-light-solid) 98%, var(--mix-light));
  --cream-4: var(--card-bg-light-solid);
  /* Context menus and raised surfaces must follow the dark surface, not root cream. */
  --cream-19: var(--card-bg-light-solid);
  --cream-5: color-mix(in srgb, var(--paper) 92%, var(--mix-light));
  --cream-6: var(--card-bg-solid);
  --cream-7: color-mix(in srgb, var(--card-bg-light-solid) 99%, var(--mix-light));
  --cream-8: color-mix(in srgb, var(--card-bg-solid) 96%, var(--mix-light));
  --cream-9: color-mix(in srgb, var(--paper-2) 98%, var(--mix-light));
  --cream-10: var(--paper);
  --parchment: color-mix(in srgb, var(--card-bg-solid) 97%, var(--mix-dark));
  --gold: color-mix(in srgb, var(--amber) 87%, var(--mix-dark));
  --gold-2: color-mix(in srgb, var(--amber) 96%, var(--mix-light));
  --gold-3: var(--amber);
  --gold-4: color-mix(in srgb, var(--amber) 93%, var(--mix-dark));
  --gold-5: color-mix(in srgb, var(--amber) 92%, var(--mix-dark));
  --gold-6: color-mix(in srgb, var(--amber) 80%, var(--mix-dark));
  --gold-7: color-mix(in srgb, var(--amber) 70%, var(--mix-dark));
  --gold-8: color-mix(in srgb, var(--amber) 89%, var(--mix-dark));
  --gold-9: color-mix(in srgb, var(--amber) 83%, var(--mix-dark));
  --gold-10: color-mix(in srgb, var(--amber) 94%, var(--mix-dark));
  --gold-11: color-mix(in srgb, var(--amber) 90%, var(--mix-dark));
  --gold-12: color-mix(in srgb, var(--amber) 91%, var(--mix-dark));
  --gold-13: var(--amber);
  --gold-14: color-mix(in srgb, var(--amber) 86%, var(--mix-dark));
  --gold-15: color-mix(in srgb, var(--amber) 91%, var(--mix-dark));
  --gold-16: var(--amber);
  --gold-17: var(--amber);
  --gold-18: var(--amber);
  --olive: color-mix(in srgb, var(--leaf) 84%, var(--mix-dark));
  --olive-2: color-mix(in srgb, var(--leaf) 79%, var(--mix-dark));
  --olive-3: color-mix(in srgb, var(--leaf) 67%, var(--mix-dark));
  --moss: color-mix(in srgb, var(--leaf) 66%, var(--mix-dark));
  --forest: color-mix(in srgb, var(--leaf) 34%, var(--mix-dark));
  --forest-2: color-mix(in srgb, var(--leaf) 44%, var(--mix-dark));
  --forest-3: color-mix(in srgb, var(--leaf) 47%, var(--mix-dark));
  --forest-4: color-mix(in srgb, var(--leaf) 57%, var(--mix-dark));
  --pale-green: color-mix(in srgb, var(--leaf) 82%, var(--mix-light));
  --olive-4: color-mix(in srgb, var(--leaf) 73%, var(--mix-dark));
  --forest-5: color-mix(in srgb, var(--leaf) 50%, var(--mix-dark));
  --olive-5: color-mix(in srgb, var(--leaf) 85%, var(--mix-dark));
  --olive-6: color-mix(in srgb, var(--leaf) 95%, var(--mix-dark));
  --forest-6: color-mix(in srgb, var(--leaf) 53%, var(--mix-dark));
  --olive-7: color-mix(in srgb, var(--leaf) 79%, var(--mix-dark));
  --olive-8: color-mix(in srgb, var(--leaf) 87%, var(--mix-dark));
  --olive-9: color-mix(in srgb, var(--leaf) 62%, var(--mix-dark));
  --olive-10: color-mix(in srgb, var(--leaf) 94%, var(--mix-dark));
  --olive-11: color-mix(in srgb, var(--leaf) 81%, var(--mix-dark));
  --mint: color-mix(in srgb, var(--leaf) 31%, var(--mix-light));
  --umber: color-mix(in srgb, var(--ink) 94%, var(--mix-light));
  --umber-2: color-mix(in srgb, var(--ink) 84%, var(--mix-light));
  --umber-3: color-mix(in srgb, var(--ink) 96%, var(--mix-light));
  --umber-4: color-mix(in srgb, var(--ink) 84%, var(--mix-light));
  --taupe: color-mix(in srgb, var(--ink-muted) 97%, var(--mix-dark));
  --taupe-2: color-mix(in srgb, var(--ink-muted) 82%, var(--mix-light));
  --taupe-3: color-mix(in srgb, var(--ink-muted) 88%, var(--mix-dark));
  --taupe-4: color-mix(in srgb, var(--ink-muted) 91%, var(--mix-dark));
  --taupe-5: var(--ink-muted);
  --shade-5: var(--shade);
  --shade-6: color-mix(in srgb, var(--shade) 50%, var(--mix-dark));
  --shade-7: color-mix(in srgb, var(--shade) 85%, var(--mix-dark));
  --ok: var(--sk-ok-1, color-mix(in srgb, var(--sk-ramp-4) 77%, var(--sk-dark)));
  --ok-deep: var(--sk-ok-deep-1, color-mix(in srgb, var(--sk-ramp-4) 60%, var(--sk-dark)));
  --warn: var(--sk-warn-1, color-mix(in srgb, var(--sk-ink) 57%, var(--sk-dark)));
  --leaf-deep: var(--sk-leaf-deep-1, color-mix(in srgb, var(--sk-a1) 65%, var(--sk-dark)));
  --leaf-bright: var(--sk-leaf-bright-1, color-mix(in srgb, var(--sk-a1) 68%, var(--sk-line)));
  --ink-on-accent: var(--sk-light);
  --paper: var(--sk-paper-1, color-mix(in srgb, var(--sk-line) 9%, var(--sk-surface)));
  --paper-2: color-mix(in srgb, var(--sk-surface) 99%, var(--sk-light));
  --hi: color-mix(in srgb, var(--sk-deep) 45%, var(--sk-ink));
  --hi-2: color-mix(in srgb, var(--sk-deep) 45%, var(--sk-ink));
  --hi-3: color-mix(in srgb, var(--sk-deep) 45%, var(--sk-ink));
  --tan-deep: var(--sk-tan-deep-1, color-mix(in srgb, var(--sk-a1) 44%, var(--sk-dark)));
  --gold-deep: var(--sk-gold-deep-1, color-mix(in srgb, var(--sk-a2) 59%, var(--sk-page)));
  --gold-deep-2: var(--sk-gold-deep-2-1, color-mix(in srgb, var(--sk-a2) 45%, var(--sk-page)));
  --shadow-ink: var(--sk-dark);
  --shadow-ink-2: var(--sk-dark);
  --shade: color-mix(in srgb, var(--sk-page) 59%, var(--sk-dark));
  --shade-2: color-mix(in srgb, var(--sk-page) 75%, var(--sk-dark));
  --shade-3: color-mix(in srgb, var(--sk-page) 53%, var(--sk-dark));
  --shade-4: color-mix(in srgb, var(--sk-page) 36%, var(--sk-dark));
  --card-bg-light-solid: var(--sk-card-bg-light-solid-1, color-mix(in srgb, var(--sk-line) 9%, var(--sk-surface)));
  --bg: color-mix(in srgb, var(--sk-page) 75%, var(--sk-dark));
  --card-bg: color-mix(in srgb, color-mix(in srgb, var(--sk-surface) 99%, var(--sk-light)) 86%, transparent);
  --card-bg-solid: color-mix(in srgb, var(--sk-surface) 99%, var(--sk-light));
  --card-bg-light: color-mix(in srgb, var(--sk-card-bg-light-1, color-mix(in srgb, var(--sk-line) 9%, var(--sk-surface))) 72%, transparent);
  --card-bg-dark: color-mix(in srgb, color-mix(in srgb, var(--sk-page) 98%, var(--sk-ramp-3)) 85%, transparent);
  --card-border: color-mix(in srgb, var(--sk-line) 16%, transparent);
  --card-border-dark: color-mix(in srgb, var(--sk-line) 12%, transparent);
  --card-border-metallic: color-mix(in srgb, var(--sk-card-border-metallic-1, color-mix(in srgb, var(--sk-a1) 87%, var(--sk-dark))) 55%, transparent);
  --sidebar-bg: color-mix(in srgb, var(--sk-ramp-3) 12%, var(--sk-dark));
  --sidebar-bg-trans: color-mix(in srgb, color-mix(in srgb, var(--sk-ramp-3) 12%, var(--sk-dark)) 88%, transparent);
  /* the rail's own top and bottom colour, read by the rail AND by the two corners the main
     panel's rounded edge cuts out (section 6), so both always show one colour */
  --glass-rail-top: color-mix(in srgb, var(--sk-sidebar-fill-2, color-mix(in srgb, var(--sk-ramp-3) 17%, var(--sk-dark))) calc(72% + var(--sk-panels-solid) * 22%), transparent);
  --glass-rail-bottom: color-mix(in srgb, var(--sk-sidebar-fill-3, color-mix(in srgb, var(--sk-a3) 4%, var(--sk-page))) calc(80% + var(--sk-panels-solid) * 14%), transparent);
  --tan: var(--sk-tan-1, color-mix(in srgb, var(--sk-line) 87%, var(--sk-surface)));
  --archive: var(--sk-archive-1, color-mix(in srgb, var(--sk-deep) 33%, var(--sk-line)));
  --tint-tan: color-mix(in srgb, var(--sk-tint-tan-1, color-mix(in srgb, var(--sk-line) 87%, var(--sk-surface))) 18%, transparent);
  --tint-archive: color-mix(in srgb, var(--sk-tint-archive-1, color-mix(in srgb, var(--sk-deep) 33%, var(--sk-line))) 18%, transparent);
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--sk-dark) 45%, transparent), 0 14px 36px color-mix(in srgb, var(--sk-dark) 55%, transparent);
  --inner-highlight: linear-gradient(180deg, color-mix(in srgb, var(--sk-inner-highlight-1, color-mix(in srgb, var(--sk-a1) 87%, var(--sk-dark))) 6%, transparent), transparent 16px);
  --card-blur: blur(20px) saturate(1.0);
  /* dark preset: these forest tokens are TEXT tokens - they read from the ink here (15 Sep 2026) */
  --forest-2: color-mix(in srgb, var(--ink) 86%, var(--leaf));
  --forest-3: color-mix(in srgb, var(--ink) 86%, var(--leaf));
  --forest-4: color-mix(in srgb, var(--ink) 80%, var(--leaf));
  --forest-5: color-mix(in srgb, var(--ink) 86%, var(--leaf));
  --forest-6: color-mix(in srgb, var(--ink) 82%, var(--leaf));
  --moss: color-mix(in srgb, var(--ink) 78%, var(--leaf));
  --olive-3: color-mix(in srgb, var(--ink) 74%, var(--leaf));
  --olive-9: color-mix(in srgb, var(--ink) 86%, var(--leaf));
  --umber: var(--ink);
  --umber-3: var(--ink);
  --umber-2: var(--ink-muted);
  --umber-4: var(--ink-muted);
  --taupe: var(--ink-muted);
  --taupe-2: var(--ink-muted);
  --taupe-3: var(--ink-muted);
  --taupe-4: var(--ink-muted);
  --taupe-5: var(--ink-muted);
}

body[data-skin-family="glass"] .app-shell::before { background: none; }
body[data-skin-family="glass"] .glass { background: var(--card-bg); color: var(--ink); }
body[data-skin-family="glass"] .glass::before { background: linear-gradient(135deg, color-mix(in srgb, var(--sk-glass-fill-1, color-mix(in srgb, var(--sk-a1) 87%, var(--sk-dark))) 55%, transparent) 0%, color-mix(in srgb, var(--sk-glass-fill-2, color-mix(in srgb, var(--sk-a2) 73%, var(--sk-a4))) 30%, transparent) 22%, color-mix(in srgb, var(--sk-glass-fill-2, color-mix(in srgb, var(--sk-a2) 73%, var(--sk-a4))) 8%, transparent) 45%, transparent 65%, transparent 100%); }
body[data-skin-family="glass"] .glass-dark { background: color-mix(in srgb, color-mix(in srgb, var(--sk-page) 98%, var(--sk-ramp-3)) 80%, transparent); color: var(--ink-on-dark); box-shadow: inset 0 1.5px 0 color-mix(in srgb, var(--sk-light) 14%, transparent), inset 1.5px 0 0 color-mix(in srgb, var(--sk-light) 6%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 20%, transparent), inset -1px 0 0 color-mix(in srgb, var(--sk-dark) 10%, transparent), 0 2px 6px color-mix(in srgb, var(--sk-dark) 18%, transparent), 0 14px 28px color-mix(in srgb, var(--sk-dark) 22%, transparent), 0 24px 56px color-mix(in srgb, var(--sk-dark) 34%, transparent); }
body[data-skin-family="glass"] .glass-dark::before { background: linear-gradient(135deg, color-mix(in srgb, var(--sk-glass-dark-fill-1, color-mix(in srgb, var(--sk-a1) 87%, var(--sk-dark))) 45%, transparent) 0%, color-mix(in srgb, var(--sk-glass-dark-fill-2, color-mix(in srgb, var(--sk-a2) 73%, var(--sk-a4))) 22%, transparent) 22%, color-mix(in srgb, var(--sk-glass-dark-fill-2, color-mix(in srgb, var(--sk-a2) 73%, var(--sk-a4))) 6%, transparent) 45%, transparent 65%, transparent 100%); }
body[data-skin-family="glass"] .view-page { color: var(--ink); }
body[data-skin-family="glass"] .shot-row { color: var(--ink); }

body[data-skin-family="glass"] .shot-row.is-selected,
body[data-skin-family="glass"] .shot-row.selected { background: color-mix(in srgb, var(--sk-shot-row-fill-1, color-mix(in srgb, var(--sk-a1) 87%, var(--sk-dark))) 14%, transparent); }
body[data-skin-family="glass"] .shotlist-row--head { background: color-mix(in srgb, color-mix(in srgb, var(--sk-page) 65%, var(--sk-surface)) 92%, transparent); color: var(--ink); }
body[data-skin-family="glass"] .shotlist-row:hover { background: color-mix(in srgb, var(--sk-shotlist-row-fill-1, color-mix(in srgb, var(--sk-a1) 87%, var(--sk-dark))) 10%, transparent); }

body[data-skin-family="glass"] .tb-right { color: var(--ink); }
body[data-skin-family="glass"] .modal-card,
body[data-skin-family="glass"] .char-modal,
body[data-skin-family="glass"] .qm-panel,
body[data-skin-family="glass"] .sqm-modal { color: var(--ink); }
body[data-skin-family="glass"] .modal-close-btn,
body[data-skin-family="glass"] .modal-nav-btn { background: color-mix(in srgb, color-mix(in srgb, var(--sk-page) 98%, var(--sk-ramp-3)) 75%, transparent); color: var(--ink-on-dark); border-color: var(--card-border); }
body[data-skin-family="glass"] .status-pill-menu,
body[data-skin-family="glass"] .kebab-menu,
body[data-skin-family="glass"] .ph-episode-menu,
body[data-skin-family="glass"] .ph-notif-toast { background: color-mix(in srgb, color-mix(in srgb, var(--sk-page) 65%, var(--sk-surface)) 97%, transparent); color: var(--ink); border-color: var(--card-border); }
body[data-skin-family="glass"] .status-pill-option { color: var(--ink); }
body[data-skin-family="glass"] .status-pill-option:hover { background: color-mix(in srgb, var(--sk-status-pill-option-fill-1, color-mix(in srgb, var(--sk-a1) 87%, var(--sk-dark))) 12%, transparent); }
body[data-skin-family="glass"] .ph-notif-toast-sub,
body[data-skin-family="glass"] .ph-notif-toast-time { color: var(--ink-muted); }
body[data-skin-family="glass"] .ph-episode-pill { background: color-mix(in srgb, var(--sk-light) 6%, transparent); color: var(--ink-on-dark); }

body[data-skin-family="glass"] .gen-submode-btn,
body[data-skin-family="glass"] .gen-mode-btn,
body[data-skin-family="glass"] .gen-model-btn,
body[data-skin-family="glass"] .gen-res-btn,
body[data-skin-family="glass"] .ga-card,
body[data-skin-family="glass"] .ga-block,
body[data-skin-family="glass"] .ga-tmpl-summary,
body[data-skin-family="glass"] [class*="gen-"][class*="panel"] { background: color-mix(in srgb, color-mix(in srgb, var(--sk-surface) 99%, var(--sk-light)) 72%, transparent); color: var(--ink); border-color: var(--card-border); }
body[data-skin-family="glass"] .gen-mode-btn.is-active,
body[data-skin-family="glass"] .gen-model-btn.is-active,
body[data-skin-family="glass"] .gen-res-btn.is-active,
body[data-skin-family="glass"] .gen-submode-btn.is-active { background: color-mix(in srgb, var(--sk-gen-mode-btn-fill-1, color-mix(in srgb, var(--sk-a1) 87%, var(--sk-dark))) 18%, transparent); border-color: color-mix(in srgb, var(--sk-gen-mode-btn-line-1, color-mix(in srgb, var(--sk-a1) 87%, var(--sk-dark))) 55%, transparent); color: var(--ink); }
body[data-skin-family="glass"] .review-btn-ghost:hover,
body[data-skin-family="glass"] .cpm-btn-ghost,
body[data-skin-family="glass"] .cpm-btn-ghost:hover,
body[data-skin-family="glass"] .batch-mode-btn,
body[data-skin-family="glass"] .upload-modal-cancel,
body[data-skin-family="glass"] .create-asset-cancel,
body[data-skin-family="glass"] .admin-suspend-btn,
body[data-skin-family="glass"] .pill-button,
body[data-skin-family="glass"] .sqa-btn { background: color-mix(in srgb, var(--sk-light) 5%, transparent); color: var(--ink-on-dark); border-color: var(--card-border); }
body[data-skin-family="glass"] .audio-row,
body[data-skin-family="glass"] .review-card,
body[data-skin-family="glass"] .review-comment,
body[data-skin-family="glass"] .notes-panel,
body[data-skin-family="glass"] .note-row,
body[data-skin-family="glass"] .cal-connect-modal { background: color-mix(in srgb, color-mix(in srgb, var(--sk-surface) 99%, var(--sk-light)) 70%, transparent); color: var(--ink); border-color: var(--card-border); }
body[data-skin-family="glass"] .admin-table,
body[data-skin-family="glass"] .admin-table-row,
body[data-skin-family="glass"] .admin-matrix,
body[data-skin-family="glass"] .intg-card { background: color-mix(in srgb, color-mix(in srgb, var(--sk-page) 65%, var(--sk-surface)) 80%, transparent); color: var(--ink); border-color: var(--card-border); }
body[data-skin-family="glass"] .login-card,
body[data-skin-family="glass"] .cpm-card { background: color-mix(in srgb, color-mix(in srgb, var(--sk-page) 65%, var(--sk-surface)) 96%, transparent); color: var(--ink); border-color: var(--card-border); }
body[data-skin-family="glass"] .ar-panel,
body[data-skin-family="glass"] .ar-surface,
body[data-skin-family="glass"] .char-info,
body[data-skin-family="glass"] .char-section { background: color-mix(in srgb, color-mix(in srgb, var(--sk-surface) 99%, var(--sk-light)) 70%, transparent); color: var(--ink); }
body[data-skin-family="glass"] .character-card,
body[data-skin-family="glass"] .vp-tabs-backdrop,
body[data-skin-family="glass"] .char-modal-grid.is-archival { background: color-mix(in srgb, color-mix(in srgb, var(--sk-surface) 99%, var(--sk-light)) 80%, transparent) !important; }
body[data-skin-family="glass"] .ph-initials,
body[data-skin-family="glass"] .big-cal-event--phase { color: color-mix(in srgb, var(--sk-page) 75%, var(--sk-dark)); }

/* ---- NEON: the top bar (ring block + stats) follows the preset (15 Sep 2026, follow-up) ---- */

body[data-skin-family="glass"] .tb-donut-darken { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sk-light) 14%, transparent), inset 1px 0 0 color-mix(in srgb, var(--sk-light) 6%, transparent), inset 0 -6px 20px color-mix(in srgb, var(--sk-dark) 25%, transparent); }

body[data-skin-family="glass"] .tb-progress { background: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 8%, transparent) 0%, color-mix(in srgb, var(--sk-light) 12%, transparent) 100%); border-color: var(--card-border); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sk-light) 10%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 25%, transparent); }
body[data-skin-family="glass"] .tb-progress-fill-bar { background: linear-gradient(to right, var(--sk-tb-progress-fill-bar-fill-1, color-mix(in srgb, var(--sk-a1) 87%, var(--sk-dark))) 0%, var(--sk-tb-progress-fill-bar-fill-2, color-mix(in srgb, var(--sk-a2) 73%, var(--sk-a4))) 100%); }

/* ---- neon: audit fixes, 15 Sep 2026 (text that was a dark literal or a dark-role token on a dark tint) ---- */
body[data-skin-family="glass"] .shots-empty-link { color: var(--leaf-ink); }

body[data-skin-family="glass"] .admin-matrix-head[class*="--"] { color: var(--ink); }

body[data-skin-family="glass"] .agent-msg--assistant,
body[data-skin-family="glass"] .agent-md-p,
body[data-skin-family="glass"] .agent-msg--assistant code { color: var(--ink); }

/* ---- depth + glow backdrops, 15 Sep 2026 ---- */
body[data-skin-family="glass"] { --backdrop-image: radial-gradient(70% 55% at 12% 0%, color-mix(in srgb, var(--sk-backdrop-image-1, color-mix(in srgb, var(--sk-a1) 87%, var(--sk-dark))) 22%, transparent), transparent 62%), radial-gradient(55% 45% at 92% 100%, color-mix(in srgb, var(--sk-backdrop-image-2, color-mix(in srgb, var(--sk-a2) 73%, var(--sk-a4))) 16%, transparent), transparent 62%), linear-gradient(color-mix(in srgb, var(--sk-page) 75%, var(--sk-dark)), color-mix(in srgb, var(--sk-page) 75%, var(--sk-dark))); }

body[data-skin-family="glass"] .glass {  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent), inset 1px 0 0 color-mix(in srgb, var(--ink) 5%, transparent), 0 2px 6px color-mix(in srgb, var(--sk-dark) 30%, transparent), 0 12px 32px color-mix(in srgb, var(--sk-dark) 48%, transparent); }
body[data-skin-family="glass"] .glass::before { opacity: 0.55; }

/* ---- judge round 1, 15 Sep 2026 ---- */
/* Three design judges compared Neon / Mono / Ice with the mockups (scratchpad judge-round-1.md). Rules are grouped:
   (1) both families, (2) dark-panel family (neon, slate), (3) pale-panel family (mono, crimson, ember, ice),
   (4) single-preset exceptions. Colours only; every value comes from the preset's own tokens.
   --danger-ink = the readable danger red of the family (the old #8A2A1F / #6E1F0E literals were invisible on dark). */
/* (1) both families */
body[data-skin-family="glass"] .pipeline-stage,
body[data-skin-family="glass"] .sb-queue { color: var(--ink-on-dark); }
body[data-skin-family="glass"] .project-day { background: var(--card-bg-dark); color: var(--ink-on-dark); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sk-light) 10%, transparent), inset 1px 0 0 color-mix(in srgb, var(--sk-light) 5%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 16%, transparent), 0 2px 6px color-mix(in srgb, var(--sk-dark) 18%, transparent), 0 12px 24px color-mix(in srgb, var(--sk-dark) 30%, transparent); }
body[data-skin-family="glass"] .project-day .pd-label,
body[data-skin-family="glass"] .project-day .pd-date { color: var(--ink-on-dark-muted); }
body[data-skin-family="glass"] .project-day .pd-num { color: var(--sk-pd-num-ink-1, var(--ink-on-dark)); }
body[data-skin-family="glass"] .ps-label,
body[data-skin-family="glass"] .sb-queue-meta,
body[data-skin-family="glass"] .sb-q-sub,
body[data-skin-family="glass"] .sb-q-eta,
body[data-skin-family="glass"] .sb-q-stage,
body[data-skin-family="glass"] .sb-q-more,
body[data-skin-family="glass"] .sb-q-hint { color: var(--ink-on-dark-muted); }
/* (17 Sep 2026, the review of Paradise Found Dark) the rail queue's shot codes, its COMPLETED/PENDING
   badges and a finished row's "done" read slots (default: what each painted - the codes and badges are
   built from --mix-light, which a skin darkens for its tan surfaces; the codes then read 2.3:1) */
body[data-skin-family="glass"] .sb-q-id { color: var(--sk-queue-id-ink-1, color-mix(in srgb, var(--foil) 33%, var(--mix-light))); }
body[data-skin-family="glass"] .sb-q-badge.standard { color: var(--sk-queue-badge-ink-1, color-mix(in srgb, var(--leaf-bright) 59%, var(--mix-light))); }
body[data-skin-family="glass"] .sb-q-row--completed .sb-q-eta { color: var(--sk-queue-done-ink-1, var(--ink-on-dark-muted)); }
body[data-skin-family="glass"] .ps-text,
body[data-skin-family="glass"] .sb-queue-title,
body[data-skin-family="glass"] .sb-q-model,
body[data-skin-family="glass"] .sb-q-more:hover { color: var(--ink-on-dark); }
body[data-skin-family="glass"] .ps-next { color: color-mix(in srgb, var(--ink-on-dark) 60%, transparent); }
body[data-skin-family="glass"] .ps-dots .dot,
body[data-skin-family="glass"] .sb-q-track { background: color-mix(in srgb, var(--sk-light) 10%, transparent); }

body[data-skin-family="glass"] .sb-q-fill { background: linear-gradient(90deg, var(--leaf), var(--amber)); }
body[data-skin-family="glass"] .sb-queue-head { border-bottom-color: color-mix(in srgb, var(--sk-light) 10%, transparent); }
body[data-skin-family="glass"] .sb-q-hint { border-top-color: color-mix(in srgb, var(--sk-light) 12%, transparent); }

body[data-skin-family="glass"] .nav-item-wrap.is-drop-target::before { background: color-mix(in srgb, var(--leaf) 95%, transparent); box-shadow: 0 0 6px color-mix(in srgb, var(--leaf) 55%, transparent); }
body[data-skin-family="glass"] .tb-donut-eyebrow { color: var(--ink-on-dark-muted); }
body[data-skin-family="glass"] .tb-donut-percent { color: var(--ink-on-dark); }
body[data-skin-family="glass"] .tb-donut-sub { color: color-mix(in srgb, var(--ink-on-dark) 70%, transparent); }
body[data-skin-family="glass"] .tb-stat-num { color: var(--ink); }
body[data-skin-family="glass"] .tb-meta-value { color: var(--sk-tb-meta-value-ink-1, var(--ink)); }
body[data-skin-family="glass"] .tb-stat-label,
body[data-skin-family="glass"] .tb-stat-sub,
body[data-skin-family="glass"] .tb-meta-label { color: var(--ink-muted); }
body[data-skin-family="glass"] .tb-chip--total,
body[data-skin-family="glass"] .tb-chip--render { background: color-mix(in srgb, var(--leaf) 18%, transparent); color: var(--leaf-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--leaf) 40%, transparent), 0 0 12px color-mix(in srgb, var(--leaf) 25%, transparent); }
body[data-skin-family="glass"] .tb-chip--firstpass,
body[data-skin-family="glass"] .tb-chip--concept,
body[data-skin-family="glass"] .tb-chip--upscale,
body[data-skin-family="glass"] .tb-chip--days,
body[data-skin-family="glass"] .tb-chip--hours { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 40%, transparent), 0 0 12px color-mix(in srgb, var(--amber) 25%, transparent); }
body[data-skin-family="glass"] .tb-chip--completed,
body[data-skin-family="glass"] .tb-chip--status-ontrack,
body[data-skin-family="glass"] .tb-chip--status-ahead { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent), 0 0 12px color-mix(in srgb, var(--ok) 25%, transparent); }
body[data-skin-family="glass"] .tb-chip--rejected,
body[data-skin-family="glass"] .tb-chip--status-behind { background: color-mix(in srgb, var(--danger-ink) 18%, transparent); color: var(--danger-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger-ink) 40%, transparent), 0 0 12px color-mix(in srgb, var(--danger-ink) 25%, transparent); }

body[data-skin-family="glass"] .tb-mode-btn.is-active .tb-mode-label { background: none; color: var(--sk-tb-mode-btn-ink-1, var(--ink-on-accent)); }
/* (17 Sep 2026) on a solid (painted) stats band the live dot and label take the band's own colours,
   --sk-stats-live-dot-1 / --sk-stats-live-ink-1; where the band is glass (every skin with solid 0,
   and the phone's band, which mobile.css always paints dark) they keep --sk-tb-live-* */
body[data-skin-family="glass"] .tb-live--live .tb-live-dot {
  --live-dot: color-mix(in srgb, var(--sk-tb-live-dot-1, var(--leaf)), var(--sk-stats-live-dot-1, var(--sk-tb-live-dot-1, var(--leaf))) calc(var(--sk-stats-solid) * 100%));
  background: var(--live-dot); box-shadow: 0 0 0 2px color-mix(in srgb, var(--live-dot) 20%, transparent), 0 0 6px color-mix(in srgb, var(--live-dot) 55%, transparent); }
body[data-skin-family="glass"] .tb-live--connecting .tb-live-dot { background: var(--warn); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 20%, transparent); }
body[data-skin-family="glass"] .tb-live--connecting .tb-live-label { color: var(--warn); }
body[data-skin-family="glass"] .tb-live--lost .tb-live-dot { background: var(--danger-ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger-ink) 20%, transparent); }
body[data-skin-family="glass"] .tb-live--lost .tb-live-label { color: var(--danger-ink); }
body[data-skin-family="glass"] .tb-online .tb-online-dot,
body[data-skin-family="glass"] .ph-online-dot { background: var(--sk-tb-online-dot-1, var(--amber)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sk-tb-online-dot-1, var(--amber)) 25%, transparent), 0 0 6px color-mix(in srgb, var(--sk-tb-online-dot-1, var(--amber)) 55%, transparent); }

body[data-skin-family="glass"] .tb-progress-marker { color: var(--ink); }
body[data-skin-family="glass"] .tab.active,
body[data-skin-family="glass"] .vp-tab.is-active { border-bottom-color: var(--leaf); }
body[data-skin-family="glass"] .tab:hover:not(.active),
body[data-skin-family="glass"] .vp-tab:hover:not(.is-active) { border-bottom-color: color-mix(in srgb, var(--leaf) 35%, transparent); }
body[data-skin-family="glass"] .setting-toggle.is-on { background: var(--leaf); border-color: var(--leaf); box-shadow: 0 0 8px color-mix(in srgb, var(--leaf) 40%, transparent); }
body[data-skin-family="glass"] .setting-select-btn.is-active { background: var(--leaf); color: var(--sk-accent-ink-1, var(--ink-on-accent)); box-shadow: 0 1px 2px color-mix(in srgb, var(--sk-dark) 20%, transparent); }
body[data-skin-family="glass"] .theme-active-tag { background: var(--leaf); color: var(--sk-accent-ink-1, var(--ink-on-accent)); }
body[data-skin-family="glass"] .theme-card.is-active { background: color-mix(in srgb, var(--leaf) 12%, transparent); border-color: color-mix(in srgb, var(--leaf) 80%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--leaf) 25%, transparent); }
body[data-skin-family="glass"] .mp-chip.is-active .mp-chip-dot { background: var(--leaf); border-color: var(--leaf); box-shadow: 0 0 0 2px color-mix(in srgb, var(--leaf) 20%, transparent); }
body[data-skin-family="glass"] .bg-picker-btn--ghost { color: var(--danger-ink); border-color: color-mix(in srgb, var(--danger-ink) 45%, transparent); }

body[data-skin-family="glass"] .cal-connect-callout { background: color-mix(in srgb, var(--leaf) 10%, transparent); border-color: color-mix(in srgb, var(--leaf) 35%, transparent); color: var(--ink); }
/* (17 Sep 2026) a shot row's title (after the code) may be a quieter ink than the code: --sk-row-title-ink-1
   (default: the row ink, as shots.css paints it). Paradise Found Dark writes it in a pale grey. */
body[data-skin-family="glass"] .shot-row .shot-frame { color: var(--sk-row-title-ink-1, var(--ink)); }
/* ... and its eyebrow (SEQUENCE 01 ...) a lighter grey than its detail lines: --sk-row-eyebrow-ink-1 (default: the
   row's muted ink, as shots.css paints it) */
body[data-skin-family="glass"] .shot-row .shot-eyebrow { color: var(--sk-row-eyebrow-ink-1, var(--ink-muted)); }
/* (17 Sep 2026) the calendar's today tile, its day headers and the TODAY chip are slots (default: what
   they always painted). Paradise Found Dark draws the today tile as a DARK green tile with a green ring
   (not a solid accent), the resting day headers as dark pills and the selected day's header as a pale
   cream bar with dark text and a dark TODAY chip.
     --sk-today-tile-fill-1 / -label-1 (the weekday, drawn at 75%) / -ink-1 (the date) / -ring-1 (the
     selected ring) / -glow-1 (a soft glow round the selected tile; no glow unless a skin sets it)
     --sk-day-head-fill-1/-2, -ink-1, -hi-1 (the lit top line): a resting day header
     --sk-day-head-sel-fill-1/-2, -sel-ink-1, -sel-hi-1, -sel-ring-1: the selected day's header
     --sk-day-tag-fill-1 / -ink-1: the TODAY chip */
body[data-skin-family="glass"] .week-cell.today { background: var(--sk-today-tile-fill-1, var(--leaf)); box-shadow: none; }
body[data-skin-family="glass"] .week-cell.today .wc-dow { color: color-mix(in srgb, var(--sk-today-tile-label-1, var(--sk-accent-ink-1, var(--ink-on-accent))) 75%, transparent); }
body[data-skin-family="glass"] .week-cell.today .wc-num { color: var(--sk-today-tile-ink-1, var(--sk-accent-ink-1, var(--ink-on-accent))); }
body[data-skin-family="glass"] .week-cell.today.selected { outline-color: var(--sk-today-tile-ring-1, var(--ink)); }
@container style(--sk-today-tile-glow-1) {
  body[data-skin-family="glass"] .week-cell.today.selected { box-shadow: 0 0 10px color-mix(in srgb, var(--sk-today-tile-glow-1, var(--leaf)) 45%, transparent); }
}
body[data-skin-family="glass"] .sched-day-tag { background: var(--sk-day-tag-fill-1, var(--leaf)); color: var(--sk-day-tag-ink-1, var(--sk-accent-ink-1, var(--ink-on-accent))); }
/* the day headers repeat styles/right-column.css word for word, with the slots in place of its colours */
body[data-skin-family="glass"] .sched-day-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sk-day-head-fill-1, color-mix(in srgb, var(--gold-11) 28%, var(--mix-light))) 95%, transparent), color-mix(in srgb, var(--sk-day-head-fill-2, color-mix(in srgb, var(--paper-2) 96%, var(--mix-dark))) 92%, transparent));
  color: var(--sk-day-head-ink-1, var(--ink-muted));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sk-day-head-hi-1, var(--cream)) 65%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 6%, transparent),
    0 1px 2px color-mix(in srgb, var(--shadow-ink) 6%, transparent);
}
body[data-skin-family="glass"] .sched-day.is-selected .sched-day-head {
  color: var(--sk-day-head-sel-ink-1, var(--ink));
  background: linear-gradient(180deg, color-mix(in srgb, var(--sk-day-head-sel-fill-1, color-mix(in srgb, var(--gold-2) 26%, var(--mix-light))) 98%, transparent), color-mix(in srgb, var(--sk-day-head-sel-fill-2, color-mix(in srgb, var(--gold-8) 31%, var(--mix-light))) 95%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sk-day-head-sel-hi-1, var(--cream)) 85%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 10%, transparent),
    0 0 0 1.5px color-mix(in srgb, var(--sk-day-head-sel-ring-1, var(--nav-active)) 55%, transparent),
    0 4px 10px color-mix(in srgb, var(--shadow-ink) 10%, transparent);
}
body[data-skin-family="glass"] .bd-yticks,
body[data-skin-family="glass"] .bd-axis,
body[data-skin-family="glass"] .bd-hint,
body[data-skin-family="glass"] .bd-tt-default,
body[data-skin-family="glass"] .bd-tt-sep { color: var(--ink-muted); }
body[data-skin-family="glass"] .notes-viewall-btn { color: var(--ink-on-dark); background: color-mix(in srgb, var(--sk-light) 8%, transparent); border-color: color-mix(in srgb, var(--sk-light) 14%, transparent); }
body[data-skin-family="glass"] .notes-viewall-btn:hover { background: color-mix(in srgb, var(--sk-light) 14%, transparent); color: var(--ink-on-dark); }
body[data-skin-family="glass"] .notes-add-btn { background: color-mix(in srgb, var(--sk-light) 8%, transparent); border-color: color-mix(in srgb, var(--sk-light) 14%, transparent); color: var(--ink-on-dark); }
body[data-skin-family="glass"] .notes-add-btn:hover { background: color-mix(in srgb, var(--leaf) 30%, transparent); }
body[data-skin-family="glass"] .dropzone { border-color: color-mix(in srgb, var(--sk-light) 18%, transparent); background: color-mix(in srgb, var(--sk-light) 5%, transparent); }
body[data-skin-family="glass"] .dropzone:hover { background: color-mix(in srgb, var(--sk-light) 9%, transparent); }
body[data-skin-family="glass"] .notes-empty { color: color-mix(in srgb, var(--ink-on-dark) 55%, transparent); }
body[data-skin-family="glass"] .activity-card-cta { color: var(--ink-on-dark-muted); }
body[data-skin-family="glass"] .rv-panel-title,
body[data-skin-family="glass"] .rl1-s3-ico,
body[data-skin-family="glass"] .rl1-bigcount-ico,
body[data-skin-family="glass"] .rl1-cell-ico { color: var(--ink-muted); }
body[data-skin-family="glass"] .rl1-mini-sub:not(.is-over),
body[data-skin-family="glass"] .rl1-cost-sub:not(.is-over),
body[data-skin-family="glass"] .rl1-asof,
body[data-skin-family="glass"] .rl1-bigcount-sub,
body[data-skin-family="glass"] .rl1-cc-num i,
body[data-skin-family="glass"] .rvk-hbar-axis,
body[data-skin-family="glass"] .rvk-line-axis,
body[data-skin-family="glass"] .rvk-vbar-label,
body[data-skin-family="glass"] .rvx-costs-form label > span,
body[data-skin-family="glass"] .rvx-costs-table th,
body[data-skin-family="glass"] .rvx-costs-sub { color: var(--ink-muted); }
body[data-skin-family="glass"] .rl1-mini-sub.is-over,
body[data-skin-family="glass"] .rl1-cost-sub.is-over,
body[data-skin-family="glass"] .rvx-costs-err { color: var(--danger-ink); }
body[data-skin-family="glass"] .rvx-tab.is-active { background: var(--leaf); border-color: var(--leaf); color: var(--sk-accent-ink-1, var(--ink-on-accent)); box-shadow: 0 2px 8px color-mix(in srgb, var(--leaf) 28%, transparent); }
body[data-skin-family="glass"] .rvx-tab.is-active b { background: color-mix(in srgb, var(--sk-light) 22%, transparent); color: var(--sk-accent-ink-1, var(--ink-on-accent)); }

body[data-skin-family="glass"] .review-card:hover { border-color: color-mix(in srgb, var(--leaf) 60%, transparent); }
body[data-skin-family="glass"] .review-panel-head { color: var(--ink); }
/* (17 Sep 2026) the Edit Plan stat bar (edit-plan.css: a tint of --gold-9 over the light mix) may take an exact
   fill: --sk-ep-statbar-fill-1. A skin whose support colour is a bright amber would paint it pale. */
body[data-skin-family="glass"] .ep-statbar { background: var(--sk-ep-statbar-fill-1, color-mix(in srgb, var(--gold-9) 34%, var(--mix-light))); }
/* (17 Sep 2026) your own chat bubble: its two stops and its ink are slots (default: the accent and its ink) */
body[data-skin-family="glass"] .agent-msg--user .agent-bub { background: linear-gradient(150deg, var(--sk-agent-bub-fill-1, var(--leaf)), var(--sk-agent-bub-fill-2, color-mix(in srgb, var(--leaf) 72%, var(--amber))) 70%); color: var(--sk-agent-bub-ink-1, var(--sk-accent-ink-1, var(--ink-on-accent))); }
body[data-skin-family="glass"] .agent-seg-btn.is-on { background: var(--leaf); color: var(--sk-accent-ink-1, var(--ink-on-accent)); box-shadow: none; }
body[data-skin-family="glass"] .agent-act-ic.is-done { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
body[data-skin-family="glass"] .agent-act-ic.is-running { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
body[data-skin-family="glass"] .agent-act-ic.is-failed { background: color-mix(in srgb, var(--danger-ink) 16%, transparent); color: var(--danger-ink); }
body[data-skin-family="glass"] .agent-act.is-failed { border-color: color-mix(in srgb, var(--danger-ink) 42%, transparent); background: color-mix(in srgb, var(--danger-ink) 7%, transparent); }
body[data-skin-family="glass"] .agent-act-err,
body[data-skin-family="glass"] .agent-chatlist-status.is-err,
body[data-skin-family="glass"] .agent-statusline.is-err { color: var(--danger-ink); }
body[data-skin-family="glass"] .agent-plan-pill.is-open { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
body[data-skin-family="glass"] .agent-plan-pill.is-done { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
body[data-skin-family="glass"] .agent-plan-pill.is-warn { background: color-mix(in srgb, var(--danger-ink) 14%, transparent); color: var(--danger-ink); }
body[data-skin-family="glass"] .agent-btn--danger { border-color: color-mix(in srgb, var(--danger-ink) 50%, transparent); background: color-mix(in srgb, var(--danger-ink) 12%, transparent); color: var(--danger-ink); }
body[data-skin-family="glass"] .agent-btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger-ink) 20%, transparent); }
body[data-skin-family="glass"] .agent-input:focus { border-color: var(--leaf); }
body[data-skin-family="glass"] .agent-dropveil { border-color: color-mix(in srgb, var(--leaf) 70%, transparent); background: color-mix(in srgb, var(--leaf) 10%, transparent); color: var(--ink); }
body[data-skin-family="glass"] .agent-attach.is-over { outline-color: color-mix(in srgb, var(--leaf) 60%, transparent); background: color-mix(in srgb, var(--leaf) 8%, transparent); }
body[data-skin-family="glass"] .gen-dir-tab,
body[data-skin-family="glass"] .gen-dir-edit-title { color: var(--ink-muted); }
body[data-skin-family="glass"] .gen-dir-tab:hover { color: var(--ink); }
body[data-skin-family="glass"] .gen-dir-tab.is-on { color: var(--ink); border-bottom-color: var(--leaf); }
body[data-skin-family="glass"] .gen-slicemode-btn.is-active { background: var(--leaf); color: var(--sk-accent-ink-1, var(--ink-on-accent)); }
body[data-skin-family="glass"] .gen-refs-tab.is-active:not(.gen-ied-layerpick *),
body[data-skin-family="glass"] .gen-camstyle-chip.is-active { background: color-mix(in srgb, var(--leaf) 18%, transparent); border-color: color-mix(in srgb, var(--leaf) 60%, transparent); color: var(--ink); }
body[data-skin-family="glass"] .ga-ref-subcat.is-active { background: color-mix(in srgb, var(--leaf) 20%, transparent); border-color: color-mix(in srgb, var(--leaf) 70%, transparent); color: var(--ink); }
body[data-skin-family="glass"] .admin-status-pill--suspended { color: var(--ink-muted); }

body[data-skin-family="glass"] .aichat-bubble.is-open { background: linear-gradient(150deg, var(--ink-muted), color-mix(in srgb, var(--ink-muted) 70%, var(--mix-dark)) 70%); box-shadow: 0 6px 18px color-mix(in srgb, var(--sk-dark) 32%, transparent); }

/* (2) dark-panel family: neon, slate */
body[data-skin-family="glass"] { --danger-ink: var(--sk-danger-ink-1, color-mix(in srgb, var(--sk-a1) 78%, var(--sk-surface))); }
body[data-skin-family="glass"] .tb-bottom-group .tb-progress { border-color: color-mix(in srgb, var(--sk-light) 10%, transparent); }
body[data-skin-family="glass"] .tb-mode-btn,
body[data-skin-family="glass"] .setting-select-btn,
body[data-skin-family="glass"] .agent-seg-btn { color: color-mix(in srgb, var(--ink) 60%, transparent); }
body[data-skin-family="glass"] .tb-live--live .tb-live-label { color: color-mix(in srgb, var(--sk-tb-live-ink-1, var(--leaf)), var(--sk-stats-live-ink-1, var(--sk-tb-live-ink-1, var(--leaf))) calc(var(--sk-stats-solid) * 100%)); }
body[data-skin-family="glass"] .tb-online { background: color-mix(in srgb, var(--sk-tb-online-fill-1, var(--amber)) 15%, transparent); border-color: color-mix(in srgb, var(--sk-tb-online-line-1, var(--amber)) 50%, transparent); color: color-mix(in srgb, var(--sk-tb-online-ink-1, var(--amber)), var(--sk-stats-online-ink-1, var(--sk-tb-online-ink-1, var(--amber))) calc(var(--sk-stats-solid) * 100%)); text-shadow: none; box-shadow: none; }
body[data-skin-family="glass"] .ph-online-pill { background: color-mix(in srgb, var(--sk-tb-online-fill-1, var(--amber)) 15%, transparent); border-color: color-mix(in srgb, var(--sk-tb-online-line-1, var(--amber)) 55%, transparent); color: var(--sk-tb-online-ink-1, var(--amber)); }
body[data-skin-family="glass"] .setting-toggle { background: color-mix(in srgb, var(--sk-light) 10%, transparent); border-color: color-mix(in srgb, var(--sk-light) 16%, transparent); }
body[data-skin-family="glass"] .setting-select,
body[data-skin-family="glass"] .agent-seg,
body[data-skin-family="glass"] .gen-slicemode-btns { background: color-mix(in srgb, var(--sk-light) 6%, transparent); border-color: color-mix(in srgb, var(--sk-light) 12%, transparent); }
body[data-skin-family="glass"] .theme-card { box-shadow: 0 4px 16px color-mix(in srgb, var(--sk-dark) 35%, transparent); }
body[data-skin-family="glass"] .theme-card:hover:not(.is-active) { background: var(--card-bg-light-solid); border-color: color-mix(in srgb, var(--sk-light) 18%, transparent); }
body[data-skin-family="glass"] .mp-chip { border-color: color-mix(in srgb, var(--sk-light) 14%, transparent); color: var(--ink-muted); }

body[data-skin-family="glass"] .bg-picker-btn { background: color-mix(in srgb, var(--leaf) 18%, transparent); border-color: color-mix(in srgb, var(--leaf) 60%, transparent); color: var(--leaf-ink); }
body[data-skin-family="glass"] .bg-picker-btn:hover { background: color-mix(in srgb, var(--leaf) 28%, transparent); }
body[data-skin-family="glass"] .bg-picker-btn--ghost { background: color-mix(in srgb, var(--danger-ink) 12%, transparent); }
body[data-skin-family="glass"] .bg-picker-btn--ghost:hover { background: color-mix(in srgb, var(--danger-ink) 22%, transparent); }

body[data-skin-family="glass"] .shots-search-count { background: color-mix(in srgb, var(--sk-light) 10%, transparent); color: var(--ink-muted); }
body[data-skin-family="glass"] .np-btn-cancel,
body[data-skin-family="glass"] .cal-sync-btn,
body[data-skin-family="glass"] .agent-btn:not(.agent-btn--go):not(.agent-btn--danger),
body[data-skin-family="glass"] .rvx-tab:not(.is-active),
body[data-skin-family="glass"] .rvx-costs-add,
body[data-skin-family="glass"] .vp-tab-add-btn,
body[data-skin-family="glass"] .rc-iconbtn { background: color-mix(in srgb, var(--sk-light) 6%, transparent); border-color: color-mix(in srgb, var(--sk-light) 14%, transparent); color: var(--ink); }
body[data-skin-family="glass"] .np-btn-cancel:hover,
body[data-skin-family="glass"] .cal-sync-btn:hover:not(:disabled),
body[data-skin-family="glass"] .agent-btn:hover:not(:disabled):not(.agent-btn--go):not(.agent-btn--danger),
body[data-skin-family="glass"] .rvx-tab:hover:not(.is-active),
body[data-skin-family="glass"] .rvx-costs-add:hover,
body[data-skin-family="glass"] .vp-tab-add-btn:hover,
body[data-skin-family="glass"] .rc-iconbtn:hover { background: color-mix(in srgb, var(--sk-light) 11%, transparent); border-color: color-mix(in srgb, var(--sk-light) 20%, transparent); color: var(--ink); }
body[data-skin-family="glass"] .rvx-tab b { background: color-mix(in srgb, var(--leaf) 20%, transparent); color: var(--sk-rvx-num-ink-1, var(--leaf-ink)); }
body[data-skin-family="glass"] .rv-panel { border-color: color-mix(in srgb, var(--sk-light) 8%, transparent); }

body[data-skin-family="glass"] .rv-link,
body[data-skin-family="glass"] .rl1-s3-num,
body[data-skin-family="glass"] .milestone-date-text { color: var(--leaf-ink); }
body[data-skin-family="glass"] .bd-num.leaf { color: var(--sk-bd-hero-num-1, var(--bd-hero, var(--leaf))); }
body[data-skin-family="glass"] .rvk-hbar-track,
body[data-skin-family="glass"] .rvk-contrib-bar { background: color-mix(in srgb, var(--sk-light) 10%, transparent); }
body[data-skin-family="glass"] .review-card { background: var(--card-bg-solid); border-color: color-mix(in srgb, var(--sk-light) 8%, transparent); box-shadow: 0 6px 20px color-mix(in srgb, var(--sk-dark) 40%, transparent); }
body[data-skin-family="glass"] .review-card-eyebrow { color: var(--amber); }
body[data-skin-family="glass"] .review-panel-head { border-bottom-color: color-mix(in srgb, var(--sk-light) 10%, transparent); }
body[data-skin-family="glass"] .milestone-row { background: color-mix(in srgb, var(--sk-light) 4%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sk-light) 6%, transparent); }
body[data-skin-family="glass"] .milestone-row:hover { background: color-mix(in srgb, var(--sk-light) 8%, transparent); }
body[data-skin-family="glass"] .milestone-date { background: color-mix(in srgb, var(--sk-light) 6%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sk-light) 8%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 20%, transparent); }
body[data-skin-family="glass"] .milestones-section-head { border-bottom-color: color-mix(in srgb, var(--sk-light) 14%, transparent); }
body[data-skin-family="glass"] .bd-tooltip { background: color-mix(in srgb, var(--sk-light) 5%, transparent); border-color: color-mix(in srgb, var(--sk-light) 10%, transparent); }
body[data-skin-family="glass"] .bd-tooltip.is-on { background: color-mix(in srgb, var(--sk-light) 9%, transparent); border-color: color-mix(in srgb, var(--sk-light) 16%, transparent); }
body[data-skin-family="glass"] .agent-main { background: color-mix(in srgb, var(--card-bg-solid) 55%, transparent); border-color: color-mix(in srgb, var(--sk-light) 8%, transparent); }
body[data-skin-family="glass"] .agent-chatlist,
body[data-skin-family="glass"] .agent-plan { background: color-mix(in srgb, var(--card-bg-light-solid) 92%, transparent); border-color: color-mix(in srgb, var(--sk-light) 10%, transparent); box-shadow: 0 8px 24px color-mix(in srgb, var(--sk-dark) 35%, transparent); }
body[data-skin-family="glass"] .agent-chatlist-head,
body[data-skin-family="glass"] .agent-plan-head { background: color-mix(in srgb, var(--sk-light) 4%, transparent); border-bottom-color: color-mix(in srgb, var(--sk-light) 8%, transparent); }
body[data-skin-family="glass"] .agent-chatrow:hover { background: color-mix(in srgb, var(--sk-light) 6%, transparent); }
body[data-skin-family="glass"] .agent-chatrow-kind { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); }
body[data-skin-family="glass"] .agent-msg--assistant .agent-bub { color: var(--ink); }
body[data-skin-family="glass"] .agent-md code,
body[data-skin-family="glass"] .agent-md-pre { background: color-mix(in srgb, var(--sk-light) 8%, transparent); }
body[data-skin-family="glass"] .agent-md-quote { border-left-color: color-mix(in srgb, var(--sk-light) 20%, transparent); }
body[data-skin-family="glass"] .agent-md-hr { border-top-color: color-mix(in srgb, var(--sk-light) 14%, transparent); }
body[data-skin-family="glass"] .agent-toolcard { background: var(--card-bg-solid); border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
body[data-skin-family="glass"] .agent-toolcard-head { color: var(--amber); }

body[data-skin-family="glass"] .agent-act-res { color: var(--ok); }
body[data-skin-family="glass"] .agent-composer { background: transparent; border-top-color: color-mix(in srgb, var(--sk-light) 8%, transparent); }
body[data-skin-family="glass"] .agent-plan-foot { background: color-mix(in srgb, var(--sk-light) 3%, transparent); border-top-color: color-mix(in srgb, var(--sk-light) 8%, transparent); }
body[data-skin-family="glass"] .agent-undo { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: color-mix(in srgb, var(--amber) 15%, transparent); }
body[data-skin-family="glass"] .agent-undo:hover:not(:disabled) { background: color-mix(in srgb, var(--amber) 25%, transparent); }

body[data-skin-family="glass"] .agent-attach-btn,
body[data-skin-family="glass"] .agent-attach-thumb { background: color-mix(in srgb, var(--sk-light) 6%, transparent); border-color: color-mix(in srgb, var(--sk-light) 14%, transparent); }
body[data-skin-family="glass"] .gen-shotpicker-head,
body[data-skin-family="glass"] .ga-picker-head,
body[data-skin-family="glass"] .gen-gens-head { background: color-mix(in srgb, var(--sk-light) 5%, transparent); border-bottom-color: color-mix(in srgb, var(--sk-light) 8%, transparent); }
body[data-skin-family="glass"] .gen-setting { background: color-mix(in srgb, var(--card-bg-light-solid) 80%, transparent); border-color: color-mix(in srgb, var(--sk-light) 8%, transparent); }
body[data-skin-family="glass"] .gen-section:not(.gen-section--layerpick) { background: color-mix(in srgb, var(--card-bg-light-solid) 55%, transparent); border-color: color-mix(in srgb, var(--sk-light) 7%, transparent); }
body[data-skin-family="glass"] .gen-section-head.gen-videohead-row { background: color-mix(in srgb, var(--sk-light) 5%, transparent); border-color: color-mix(in srgb, var(--sk-light) 10%, transparent); box-shadow: none; }
body[data-skin-family="glass"] .gen-section--match-refs .gen-video-inputs--compact .gen-video-field { background: color-mix(in srgb, var(--sk-light) 5%, transparent); }
body[data-skin-family="glass"] .gen-refs-tab:not(.is-active):not(.gen-ied-layerpick *),
body[data-skin-family="glass"] .gen-camstyle-chip:not(.is-active),
body[data-skin-family="glass"] .ga-ref-tab:not(.is-active),
body[data-skin-family="glass"] .ga-ref-subcat:not(.is-active) { background: color-mix(in srgb, var(--sk-light) 5%, transparent); border-color: color-mix(in srgb, var(--sk-light) 12%, transparent); color: var(--ink-muted); }
body[data-skin-family="glass"] .gen-gens-modebtn.is-active { background: color-mix(in srgb, var(--leaf) 18%, transparent); color: var(--leaf-ink); }
body[data-skin-family="glass"] .gen-gens-modebtn:hover:not(.is-active) { background: color-mix(in srgb, var(--sk-light) 8%, transparent); color: var(--ink); }
body[data-skin-family="glass"] .admin-table-row { background: color-mix(in srgb, var(--sk-light) 3%, transparent); border-color: color-mix(in srgb, var(--sk-light) 8%, transparent); }
body[data-skin-family="glass"] .admin-table-row:hover { background: color-mix(in srgb, var(--sk-light) 6%, transparent); box-shadow: 0 4px 10px color-mix(in srgb, var(--sk-dark) 30%, transparent); }
body[data-skin-family="glass"] .admin-matrix-cell { background: color-mix(in srgb, var(--sk-light) 4%, transparent); border-color: color-mix(in srgb, var(--sk-light) 8%, transparent); }
body[data-skin-family="glass"] .admin-matrix-head { background: color-mix(in srgb, var(--sk-light) 8%, transparent); color: var(--ink); }
body[data-skin-family="glass"] .admin-matrix-head[class*="admin-matrix-head--"]:not(.admin-matrix-head--corner) { background: color-mix(in srgb, var(--sk-light) 8%, transparent); border-color: color-mix(in srgb, var(--sk-light) 14%, transparent); color: var(--ink); }
body[data-skin-family="glass"] .admin-matrix-rowhead { background: color-mix(in srgb, var(--sk-light) 3%, transparent); }
body[data-skin-family="glass"] .admin-matrix-rowhead.is-hover { background: color-mix(in srgb, var(--sk-light) 8%, transparent); }
body[data-skin-family="glass"] .admin-matrix-toggle.is-on { color: var(--leaf-ink); border-color: color-mix(in srgb, var(--leaf) 55%, transparent); }
body[data-skin-family="glass"] .admin-matrix-category { background: color-mix(in srgb, var(--sk-light) 5%, transparent); border-color: color-mix(in srgb, var(--sk-light) 10%, transparent); }
body[data-skin-family="glass"] .admin-matrix-category:hover { background: color-mix(in srgb, var(--sk-light) 8%, transparent); }
body[data-skin-family="glass"] .admin-status-pill--active { background: color-mix(in srgb, var(--ok) 15%, transparent); border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); }
body[data-skin-family="glass"] .admin-status-pill--suspended { background: color-mix(in srgb, var(--sk-light) 6%, transparent); border-color: color-mix(in srgb, var(--sk-light) 14%, transparent); }

/* ==== judge round 2, 15 Sep 2026 — appended LAST so these token blocks and rules win.
   Dark family (neon, slate) and pale family (mono, crimson, ember, ice), written against the
   designer's second pass over the screenshots. ==== */

/* ---- themes-round2-dark.css ---- */
/* ============================================================================
   JUDGE ROUND 2 — DARK FAMILY (neon, slate).            15 Sep 2026
   Appended to styles/themes.css, so everything here WINS over the blocks above.

   Both presets are the same design: dark page, blue-tinted lifted panels, white
   text, one bright accent (--leaf: magenta / violet) and one cool second accent
   (--amber: cyan / blue). Every value below is written in terms of the PRESET'S
   OWN tokens, so one rule serves both and each renders in its own hues — no
   rule in this file needs to be split per preset.

   Judge items already fixed upstream (role tokens + the round-1 groups) and
   deliberately NOT repeated here: stat digits / donut label + number
   (--ink-bg, --ink-cream-*), the sidebar PIPELINE STAGE + SHOT QUEUE text,
   Reports card headings (--ink-deep), the media-upload placeholders
   (THUMB_TINTS is token-based now), the stat icon discs (.tb-chip--* groups),
   the JUST YOU pill, the selected segments, the chart series (--chart-*),
   the donut track (reads --card-border) and the Admin Delete button
   (reads --danger).
   ========================================================================== */

/* ---- 1 · tokens ---------------------------------------------------------
   The cross-cutting component tokens, set once for the whole family. Nothing
   here is hue-specific: --leaf, --amber, --ink, --shade-2 and --card-bg-*
   already differ per preset, so these resolve to magenta/cyan in neon and
   violet/blue in slate.                                                     */
body[data-skin-family="glass"] {
  /* Inputs sit DARKER than the panel they live on (the mockup's inset field),
     with a hairline light edge — never a grey slab. */
  --input-bg: color-mix(in srgb, var(--shade-2) 70%, var(--card-bg-solid));
  --input-border: color-mix(in srgb, var(--ink) 14%, transparent);
  /* A lifted panel inside a page: the blue-tinted raised surface. */
  --panel-raised: var(--card-bg-light-solid);
  /* Sidebar PIPELINE STAGE progress: done = accent, current = second accent. */
  /* (17 Sep 2026) both are slots (default: the accents they always were) */
  --stage-bar: var(--sk-stage-bar-1, var(--leaf));
  --stage-bar-current: var(--sk-stage-bar-current-1, var(--amber));
  /* The three floating round buttons, top → bottom: purple→accent, accent,
     second accent. Purple is the family's third hue (--role-artist).
     (17 Sep 2026) each button's two stops are slots (default: the colours they always had), so a
     mockup whose buttons are not the accents (Paradise Found Dark: amber, moss, amber) can match. */
  --fab-1: linear-gradient(150deg, var(--sk-fab-top-fill-1, var(--role-artist)), var(--sk-fab-top-fill-2, var(--leaf)) 70%);
  --fab-2: linear-gradient(150deg, var(--sk-fab-mid-fill-1, var(--leaf)), var(--sk-fab-mid-fill-2, color-mix(in srgb, var(--leaf) 70%, var(--mix-dark))) 70%);
  --fab-3: linear-gradient(150deg, var(--sk-fab-low-fill-1, var(--amber)), var(--sk-fab-low-fill-2, color-mix(in srgb, var(--amber) 75%, var(--mix-dark))) 70%);
  --chart-xtra: var(--role-artist);
  /* Soft danger + ok edges follow the preset's own red / green. */
  --danger-soft: var(--danger);
  --danger-soft-2: var(--danger);
  --ok-border: color-mix(in srgb, var(--ok) 45%, transparent);
  /* Role chip inks: legible on a dark tint instead of the forest dark inks. */
  --role-admin-ink: color-mix(in srgb, var(--role-admin) 60%, var(--ink));
  --role-director-ink: color-mix(in srgb, var(--role-director) 60%, var(--ink));
  --role-lead-ink: color-mix(in srgb, var(--role-lead) 60%, var(--ink));
  --role-artist-ink: color-mix(in srgb, var(--role-artist) 60%, var(--ink));
  --role-reviewer-ink: color-mix(in srgb, var(--role-reviewer) 60%, var(--ink));
  --role-editor-ink: color-mix(in srgb, var(--role-editor) 60%, var(--ink));
  --role-producer-ink: color-mix(in srgb, var(--leaf) 60%, var(--ink));
  --role-supervisor-ink: color-mix(in srgb, var(--warn) 60%, var(--ink));
  --role-tester-ink: color-mix(in srgb, var(--amber) 60%, var(--ink));
}

/* ---- 2 · inputs and textareas (judge 8, 24, 32) -------------------------
   One generic rule per preset plus the named fields, all reading --input-bg /
   --input-border. Button-based segmented controls are buttons, not inputs, so
   they are untouched; the login card's fields get the same inset treatment. */
body[data-skin-family="glass"] input,
body[data-skin-family="glass"] textarea,
body[data-skin-family="glass"] select { background: var(--input-bg); border-color: var(--input-border); color: var(--ink); }
body[data-skin-family="glass"] input::placeholder,
body[data-skin-family="glass"] textarea::placeholder { color: var(--ink-muted); opacity: 1; }
body[data-skin-family="glass"] .np-input,
body[data-skin-family="glass"] .mp-name,
body[data-skin-family="glass"] .user-input,
body[data-skin-family="glass"] .user-role-select,
body[data-skin-family="glass"] .gen-shotpicker-search,
body[data-skin-family="glass"] .ga-search,
body[data-skin-family="glass"] .gen-refs-search,
body[data-skin-family="glass"] .gen-direction,
body[data-skin-family="glass"] .agent-input,
body[data-skin-family="glass"] .rvx-costs-form input,
body[data-skin-family="glass"] .rvx-costs-form select { background: var(--input-bg); border-color: var(--input-border); color: var(--ink); }
body[data-skin-family="glass"] .np-input::placeholder,
body[data-skin-family="glass"] .mp-name::placeholder,
body[data-skin-family="glass"] .user-input::placeholder,
body[data-skin-family="glass"] .gen-shotpicker-search::placeholder,
body[data-skin-family="glass"] .ga-search::placeholder,
body[data-skin-family="glass"] .gen-refs-search::placeholder,
body[data-skin-family="glass"] .gen-direction::placeholder,
body[data-skin-family="glass"] .agent-input::placeholder,
body[data-skin-family="glass"] .rvx-costs-form input::placeholder,
body[data-skin-family="glass"] .shots-search-input::placeholder { color: var(--ink-muted); opacity: 1; }
/* beats the existing !important on these two fields */
body[data-skin-family="glass"] .ga-tag-input,
body[data-skin-family="glass"] .cpm-input { background: var(--input-bg) !important; color: var(--ink) !important; }
/* the shots toolbar search is a WRAPPER, not the input — same inset look */
body[data-skin-family="glass"] .shots-search { background: var(--input-bg); box-shadow: inset 0 0 0 1px var(--input-border); }
body[data-skin-family="glass"] .shots-search:focus-within { box-shadow: inset 0 0 0 1px var(--input-border), 0 0 0 2px color-mix(in srgb, var(--leaf) 45%, transparent); }

/* ---- 3 · the ONE primary action per toolbar (judge 9, 26, 33) -----------
   Filled second accent + page-dark ink. Everything else on the toolbar stays a
   dark outline (already handled by the .pill-button / .agent-btn groups). */
body[data-skin-family="glass"] .np-btn-create,
body[data-skin-family="glass"] .user-add-submit,
body[data-skin-family="glass"] .agent-btn--go,
body[data-skin-family="glass"] .cal-connect-btn,
body[data-skin-family="glass"] .rvx-costs-save,
body[data-skin-family="glass"] .pill-button--add,
body[data-skin-family="glass"] .agent-send { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-ink); box-shadow: 0 2px 10px color-mix(in srgb, var(--cta-bg) 35%, transparent); }
body[data-skin-family="glass"] .np-btn-create:hover:not(:disabled),
body[data-skin-family="glass"] .user-add-submit:hover:not(:disabled),
body[data-skin-family="glass"] .agent-btn--go:hover:not(:disabled),
body[data-skin-family="glass"] .cal-connect-btn:hover:not(:disabled),
body[data-skin-family="glass"] .rvx-costs-save:hover:not(:disabled),
body[data-skin-family="glass"] .pill-button--add:hover,
body[data-skin-family="glass"] .agent-send:hover:not(:disabled) { background: var(--cta-bg); color: var(--cta-ink); filter: brightness(1.08); }

/* ---- 4 · lifted panels (judge 15, 23, 29) -------------------------------
   Every raised surface reads --panel-raised with a light hairline edge, so no
   neutral grey slab is left anywhere in the family. */
body[data-skin-family="glass"] .theme-card,
body[data-skin-family="glass"] .rvk-panel--light,
body[data-skin-family="glass"] .rvx-costs,
body[data-skin-family="glass"] .agent-act,
body[data-skin-family="glass"] .agent-msg--assistant .agent-bub { background: var(--panel-raised); border-color: color-mix(in srgb, var(--ink) 12%, transparent); }

/* ---- 5 · the sidebar stage bar (judge 4) -------------------------------- */
body[data-skin-family="glass"] .ps-dots .dot.done { background: var(--stage-bar); }
body[data-skin-family="glass"] .ps-dots .dot.current { background: var(--stage-bar-current); box-shadow: 0 0 0 2px color-mix(in srgb, var(--stage-bar-current) 30%, transparent), 0 0 8px color-mix(in srgb, var(--stage-bar-current) 45%, transparent); }

/* ---- 6 · the three floating buttons (judge 11) --------------------------
   (17 Sep 2026) each glow is a slot too (default: the colour it always glowed), and so is each
   button's glyph (default: --fab-ink): a pale button needs a dark glyph to read (icons 3:1) */
body[data-skin-family="glass"] .npb-bubble { background: var(--fab-1); color: var(--sk-fab-top-ink-1, var(--fab-ink)); box-shadow: 0 6px 20px color-mix(in srgb, var(--sk-fab-top-glow-1, var(--role-artist)) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--sk-dark) 25%, transparent); }
body[data-skin-family="glass"] .tdb-bubble { background: var(--fab-2); color: var(--sk-fab-mid-ink-1, var(--fab-ink)); box-shadow: 0 6px 20px color-mix(in srgb, var(--sk-fab-mid-glow-1, var(--leaf)) 40%, transparent), 0 2px 6px color-mix(in srgb, var(--sk-dark) 25%, transparent); }
body[data-skin-family="glass"] .aichat-bubble { background: var(--fab-3); color: var(--sk-fab-low-ink-1, var(--fab-ink)); box-shadow: 0 6px 20px color-mix(in srgb, var(--sk-fab-low-glow-1, var(--amber)) 40%, transparent), 0 2px 6px color-mix(in srgb, var(--sk-dark) 25%, transparent); }

/* ---- 7 · Review version / comment badges (judge 17) ---------------------
   A dark translucent pill of the PAGE ground with white text, instead of the
   forest-black --shade-13 the base sheet uses. */
body[data-skin-family="glass"] .review-card-version,
body[data-skin-family="glass"] .review-card-comments { background: color-mix(in srgb, var(--shade-2) 72%, transparent); color: var(--ink-on-dark); }

/* ---- 8 · Admin role header pills (judge 18) -----------------------------
   Dark chip, bright 1px outline, text in the semantic hue — not a muddy fill.
   The selector repeats .admin-matrix-head + :not(--corner) to match the
   specificity of the neutralising group above; being later, this one wins. */
body[data-skin-family="glass"] .admin-matrix-head.admin-matrix-head--admin:not(.admin-matrix-head--corner) { background: color-mix(in srgb, var(--role-admin) 14%, transparent); border-color: color-mix(in srgb, var(--role-admin) 45%, transparent); color: var(--leaf-ink); }
body[data-skin-family="glass"] .admin-matrix-head.admin-matrix-head--producer:not(.admin-matrix-head--corner) { background: color-mix(in srgb, var(--leaf) 14%, transparent); border-color: color-mix(in srgb, var(--leaf) 45%, transparent); color: var(--leaf-ink); }
body[data-skin-family="glass"] .admin-matrix-head.admin-matrix-head--supervisor:not(.admin-matrix-head--corner) { background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }
body[data-skin-family="glass"] .admin-matrix-head.admin-matrix-head--director:not(.admin-matrix-head--corner) { background: color-mix(in srgb, var(--role-director) 14%, transparent); border-color: color-mix(in srgb, var(--role-director) 45%, transparent); color: var(--role-director); }
body[data-skin-family="glass"] .admin-matrix-head.admin-matrix-head--lead:not(.admin-matrix-head--corner) { background: color-mix(in srgb, var(--role-lead) 14%, transparent); border-color: color-mix(in srgb, var(--role-lead) 45%, transparent); color: var(--role-lead); }
body[data-skin-family="glass"] .admin-matrix-head.admin-matrix-head--artist:not(.admin-matrix-head--corner) { background: color-mix(in srgb, var(--role-artist) 14%, transparent); border-color: color-mix(in srgb, var(--role-artist) 45%, transparent); color: var(--role-artist); }
body[data-skin-family="glass"] .admin-matrix-head.admin-matrix-head--reviewer:not(.admin-matrix-head--corner) { background: color-mix(in srgb, var(--ink) 8%, transparent); border-color: color-mix(in srgb, var(--ink) 22%, transparent); color: var(--ink-muted); }
body[data-skin-family="glass"] .admin-matrix-head.admin-matrix-head--tester:not(.admin-matrix-head--corner) { background: color-mix(in srgb, var(--amber) 14%, transparent); border-color: color-mix(in srgb, var(--amber) 45%, transparent); color: var(--amber); }
body[data-skin-family="glass"] .admin-matrix-head.admin-matrix-head--editor:not(.admin-matrix-head--corner) { background: color-mix(in srgb, var(--role-editor) 14%, transparent); border-color: color-mix(in srgb, var(--role-editor) 45%, transparent); color: var(--role-editor); }

/* ---- 9 · accent used sparingly (judge 31) ------------------------------
   A selected menu-preset chip is a TINT with a neutral edge; the accent stays
   in the text and the dot, so the grid is not a wall of outlines. */
body[data-skin-family="glass"] .mp-chip.is-sel { border-color: color-mix(in srgb, var(--ink) 14%, transparent); background: color-mix(in srgb, var(--leaf) 12%, transparent); color: var(--leaf-ink); }

/* ---- 10 · the APP SCALE readout (judge 12) -----------------------------
   The '100%' chip inherited a pale radial from .ph-iconbtn, which reads as a
   grey block on the dark chrome. Flat, barely-there glass + white text. */
body[data-skin-family="glass"] .ph-scale-btn { background: color-mix(in srgb, var(--ink) 7%, transparent); }

/* ---------------------------------------------------------------------------
   (5) TOKEN PASS (15 Sep 2026) — the NEW palette-dependent tokens, per preset.

   styles/tokens.css gained the scales (type, weight, tracking, radius,
   duration, easing, z-index, geometry) and a set of new component colours.
   The SCALES are shared by every preset and are deliberately absent here — a
   preset changes colour, not the type ramp or the stacking order.

   Only the colour-carrying newcomers are set below, and only where the forest
   default would read wrong on a preset: the black-tinted hairlines and sunken
   fills (invisible or muddy on dark chrome), the Presentations chrome reds and
   tag chips, the select chevron, the avatar gradient and the two near-black
   deck-viewer surfaces.

   NOT overridden on purpose:
   - --ptpl-* (the four client-deck templates). A deck sent to a client must
     look the same whichever UI preset Hugo is running.
   - --shade-66 / --shade-67. Those are deck SLIDE surfaces, same reason.
   - --shadow-glass / --shadow-glass-page. Each preset already carries its own
     .glass rules further up this file; overriding the token as well would give
     one surface two competing sources.
   - --glass-blur. It is geometry, and flat-vs-glass per preset is a design
     decision for Hugo, not a side effect of naming the token.

   Colours are TOKENS ONLY (invariant 28) and no color-mix is nested.
   --------------------------------------------------------------------------- */

/* --- 5.a THE DARK FAMILY (neon, slate) -------------------------------------
   Near-black panels: a black hairline is invisible, so the rules read the
   light side instead, and the sunken fill goes deeper rather than lighter. */
body[data-skin-family="glass"] {
  --line-soft: color-mix(in srgb, var(--mix-light) 8%, transparent);
  --line-soft-2: color-mix(in srgb, var(--mix-light) 10%, transparent);
  --line-soft-3: color-mix(in srgb, var(--mix-light) 14%, transparent);
  --line-soft-4: color-mix(in srgb, var(--mix-light) 16%, transparent);
  --sunken-bg: color-mix(in srgb, var(--mix-dark) 28%, transparent);
  --tile-add-border: color-mix(in srgb, var(--mix-light) 22%, transparent);
  --canvas-capture-bg: var(--bg);
  --icon-select-chev: var(--ink-muted);

  --avatar-grad-1: var(--leaf);
  --avatar-grad-2: color-mix(in srgb, var(--leaf) 60%, var(--mix-dark));

  --red-32: var(--danger);
  --ink-red-32: var(--danger);
  --red-33: var(--danger);
  --red-34: var(--danger);
  --ink-red-34: var(--danger);
  --ink-gold-6: var(--amber);

  --tag-outro: var(--role-artist);
  --tag-grid: var(--role-lead);
  --tag-agenda: var(--role-director);
  --tag-retake: var(--role-editor);
  --shade-65: color-mix(in srgb, var(--shade-2) 92%, var(--mix-dark));
  --shade-68: var(--shade-2);
}

/* ==== judge round 3, 16 Sep 2026 — the two things the mockup does that no skin did:
   it draws a dark contact line outside every surface, and it lets lit things GLOW.
   Paint only: no size, spacing, radius or type metric (invariant 31). ==== */
body[data-skin-family="glass"] {
  --ring-contact: color-mix(in srgb, var(--mix-dark) 85%, transparent);
  --glow-hot: 0 0 18px color-mix(in srgb, var(--leaf) 55%, transparent);
  --glow-cool: 0 0 18px color-mix(in srgb, var(--teal) 55%, transparent);
  --glow-soft: 0 0 10px color-mix(in srgb, currentColor 45%, transparent);
}

/* every surface gets the dark line outside + keeps its light rim inside */
body[data-skin-family="glass"] :is(.glass, .view-page, .shot-row) {
  box-shadow: 0 0 0 1px var(--ring-contact), inset 0 1px 0 color-mix(in srgb, var(--hi) 30%, transparent), var(--shadow-card);
}
/* lit things bleed light into the surface behind them */
body[data-skin-family="glass"] .nav-item.active,
body[data-skin-family="glass"] .shot-pill,
body[data-skin-family="glass"] .tb-progress-fill-bar {
  box-shadow: var(--glow-hot);
}
/* card headings carry the accent, the way the mockup's section labels do. (17 Sep 2026) A mockup whose
   headings are grey or cream sets --sk-rc-title-ink-1 (right column) and --sk-footer-title-ink-1 (the
   footer cards; default: the right column's) */
body[data-skin-family="glass"] .rc-title {
  color: var(--sk-rc-title-ink-1, var(--ink-accent));
}
body[data-skin-family="glass"] .footer-row .rc-title {
  color: var(--sk-footer-title-ink-1, var(--sk-rc-title-ink-1, var(--ink-accent)));
}

/* Production-state colours — gauges, status pills and donut ramps. Semantic, so they follow
   the skin's own --ok / --warn / --danger / --archive and its second accent. Until now no
   preset set any of them, so every skin showed the forest greens and golds here. */
body[data-skin-family="glass"] {
  --ring-prompt-1: var(--sk-ring-prompt-1-1, color-mix(in srgb, var(--archive) 55%, var(--mix-light)));
  --ring-prompt-2: var(--sk-ring-prompt-2-1, var(--archive));
  --ring-prompt-3: var(--sk-ring-prompt-3-1, color-mix(in srgb, var(--archive) 55%, var(--mix-dark)));
  --ring-pending-1: var(--sk-ring-pending-1-1, color-mix(in srgb, var(--archive) 55%, var(--mix-light)));
  --ring-pending-2: var(--sk-ring-pending-2-1, var(--archive));
  --ring-pending-3: var(--sk-ring-pending-3-1, color-mix(in srgb, var(--archive) 55%, var(--mix-dark)));
  --ring-archive-1: var(--sk-ring-archive-1-1, color-mix(in srgb, var(--archive) 55%, var(--mix-light)));
  --ring-archive-2: var(--sk-ring-archive-2-1, var(--archive));
  --ring-archive-3: var(--sk-ring-archive-3-1, color-mix(in srgb, var(--archive) 55%, var(--mix-dark)));
  --arc-shots-lo: color-mix(in srgb, var(--teal) 62%, var(--mix-dark));
  --arc-shots-mid: var(--teal);
  --arc-shots-hi: color-mix(in srgb, var(--teal) 55%, var(--mix-light));
  --arc-days-lo: color-mix(in srgb, var(--amber) 62%, var(--mix-dark));
  --arc-days-mid: var(--amber);
  --arc-days-hi: color-mix(in srgb, var(--amber) 55%, var(--mix-light));
  --arc-hours-lo: color-mix(in srgb, var(--amber) 62%, var(--mix-dark));
  --arc-hours-mid: var(--amber);
  --arc-hours-hi: color-mix(in srgb, var(--amber) 55%, var(--mix-light));
  --arc-status-lo: color-mix(in srgb, var(--ok) 62%, var(--mix-dark));
  --arc-status-mid: var(--ok);
  --arc-status-hi: color-mix(in srgb, var(--ok) 55%, var(--mix-light));
  --arc-review-lo: color-mix(in srgb, var(--teal) 62%, var(--mix-dark));
  --arc-review-mid: var(--teal);
  --arc-review-hi: color-mix(in srgb, var(--teal) 55%, var(--mix-light));
  --arc-notes-lo: color-mix(in srgb, var(--warn) 62%, var(--mix-dark));
  --arc-notes-mid: var(--warn);
  --arc-notes-hi: color-mix(in srgb, var(--warn) 55%, var(--mix-light));
  --arc-rejected-lo: color-mix(in srgb, var(--danger) 62%, var(--mix-dark));
  --arc-rejected-mid: var(--danger);
  --arc-rejected-hi: color-mix(in srgb, var(--danger) 55%, var(--mix-light));
}

/* The menu sits on the dark chrome in every skin, so its ink is the on-dark ink, never the
   ink meant for text on an accent fill. */
body[data-skin-family="glass"] { --ink-nav: var(--ink-on-dark); }

/* ---- the inside glow and the lit donut (16 Sep 2026) ----
   The mockup's cards are not flat fills: light pools inside the lower edge, and the progress
   ring bleeds colour into the panel behind it. Paint only. ---- */
body[data-skin-family="glass"] :is(.glass, .view-page, .shot-row, .rc-card) {
  box-shadow:
    0 0 0 1px var(--ring-contact),
    inset 0 1px 0 color-mix(in srgb, var(--hi) 30%, transparent),
    inset 0 -20px 30px -26px color-mix(in srgb, var(--leaf) 55%, transparent),
    inset -18px 0 28px -30px color-mix(in srgb, var(--teal) 40%, transparent),
    var(--shadow-card);
}
/* the ring itself glows, the way a lit arc does */

/* ---- progress runs on the ACCENT ramp, not a traffic light (16 Sep 2026) ----
   Hugo's design board shows the ring and the bar as accent -> violet -> cyan. Ours painted
   them from --ok / --warn / --signal-*, which is why they came out green and red against a
   magenta mockup. Pills keep the semantic colours; only progress moves. ---- */
body[data-skin-family="glass"] {
  --donut-first-pass: var(--leaf);
  --donut-concept: color-mix(in hsl shorter hue, var(--leaf) 72%, var(--teal));
  --donut-render: color-mix(in hsl shorter hue, var(--leaf) 48%, var(--teal));
  --donut-completed: var(--teal);
  --donut-upscale: var(--amber);
  /* (17 Sep 2026) the bar's three stops are slots (as in the paper family): --sk-bar-lo-1 / -mid-1 / -hi-1 */
  --bar-lo: var(--sk-bar-lo-1, var(--leaf));
  --bar-mid: var(--sk-bar-mid-1, color-mix(in hsl shorter hue, var(--leaf) 50%, var(--teal)));
  --bar-hi: var(--sk-bar-hi-1, var(--teal));
}
/* (17 Sep 2026) the PHONE's timeline bar: mobile.css paints it leaf-deep -> leaf -> gold (with !important) in
   every skin. It takes the same three stop slots, so a skin can give it its own start, MIDDLE and end
   (Paradise Found Dark: moss -> amber -> coral); the default is what it always showed. The desktop bar's
   five stops are --sk-tb-bar-ramp-<n>-1. The stretch trick (background-size) is mobile.css's, untouched. */
body[data-skin-family="glass"] .tbm2-timeline .tb-progress-fill-bar {
  background-image: linear-gradient(to right, var(--sk-bar-lo-1, var(--leaf-deep)) 0%, var(--sk-bar-mid-1, var(--leaf)) 50%, var(--sk-bar-hi-1, var(--gold-18)) 100%) !important;
}

/* ============================================================================================
   MATERIAL PASS — 16 Sep 2026.
   Hugo's spec: the mockup and our skin differ in MATERIAL and LIGHT, not in hue. Ours was flat,
   uniformly blue-grey, outlined the same way everywhere, and let cyan outrank magenta. The
   mockup has a depth ladder, smoked-glass panels lit from inside, top edges that catch light,
   and magenta that behaves like spilled light rather than a drawn line.
   PAINT ONLY. No size, spacing, radius, type metric or border WIDTH: a real border changes the
   box and moves the page, so every "border" here is a box-shadow ring that costs no layout.
   ============================================================================================ */
body[data-skin-family="glass"] {
  /* the depth ladder — separations are 3-8 RGB, felt before they are seen */
  --surf-page: var(--sk-page);
  --surf-recessed: var(--sk-deep);
  --surf-container-1: color-mix(in srgb, var(--sk-page) 99%, var(--sk-light));
  --surf-container-2: var(--sk-page);
  --surf-raised-1: color-mix(in srgb, var(--sk-page) 55%, var(--sk-surface));
  --surf-raised-2: var(--sk-surf-raised-2-1, color-mix(in srgb, var(--sk-surface) 55%, var(--sk-dark)));
  --surf-card-1: var(--sk-surface);
  --surf-card-2: color-mix(in srgb, var(--sk-surface) 94%, var(--sk-dark));
  --surf-card-3: var(--sk-surf-card-3-1, color-mix(in srgb, var(--sk-ramp-3) 19%, var(--sk-dark)));
  /* (17 Sep 2026) --sk-input-fill-1: the input fill exactly (default: this see-through dark). Paradise
     Found Dark draws its search box a step LIGHTER than the panel, like its other raised controls */
  --surf-input: var(--sk-input-fill-1, color-mix(in srgb, color-mix(in srgb, var(--sk-page) 94%, var(--sk-dark)) 48%, transparent));
  /* three edge intensities: a panel must not be outlined like a small button */
  --edge-1: color-mix(in srgb, var(--sk-edge-1-1, color-mix(in srgb, var(--sk-line) 69%, var(--sk-surface))) 14%, transparent);
  --edge-2: color-mix(in srgb, var(--sk-edge-2-1, color-mix(in srgb, var(--sk-line) 81%, var(--sk-surface))) 22%, transparent);
  --edge-3: color-mix(in srgb, var(--sk-edge-3-1, color-mix(in srgb, var(--sk-line) 78%, var(--sk-ramp-3))) 28%, transparent);
  /* top-facing edges catch light. never pure white */
  --spec-1: color-mix(in srgb, var(--sk-spec-1-1, color-mix(in srgb, var(--sk-ramp-3) 18%, var(--sk-light))) 4.5%, transparent);
  --spec-2: color-mix(in srgb, var(--sk-spec-2-1, color-mix(in srgb, var(--sk-ramp-3) 14%, var(--sk-light))) 7%, transparent);
  --spec-3: color-mix(in srgb, color-mix(in srgb, var(--sk-a1) 12%, var(--sk-light)) 10%, transparent);
  --elev-1: 0 1px 2px color-mix(in srgb, var(--sk-dark) 40%, transparent);
  --elev-2: 0 4px 12px color-mix(in srgb, var(--sk-dark) 32%, transparent);
  --elev-3: 0 8px 24px color-mix(in srgb, var(--sk-dark) 26%, transparent);
  /* diffuse pools INSIDE panels — barely visible alone, obvious side by side */
  --pool-hot: color-mix(in srgb, var(--sk-a1) 5.5%, transparent);
  --pool-cool: color-mix(in srgb, var(--sk-a2) 5.5%, transparent);
  --pool-violet: color-mix(in srgb, var(--sk-a3) 6%, transparent);
  --bloom-hot: 0 0 18px color-mix(in srgb, var(--sk-a1) 10%, transparent);
  --bloom-cool: 0 0 18px color-mix(in srgb, var(--sk-a2) 8%, transparent);
  --bloom-violet: 0 0 20px color-mix(in srgb, var(--sk-a3) 8%, transparent);
  --vignette: color-mix(in srgb, var(--sk-dark) 15%, transparent);
  /* magenta is PRIMARY, cyan is secondary, violet bridges them */
  --leaf: var(--sk-a1);
  /* the first accent when it is TEXT (links, active labels): a skin whose accent is a dark button red
     gives its text a brighter one so it stays readable on the dark panels (17 Sep 2026) */
  --leaf-ink: var(--sk-leaf-ink-1, var(--leaf));
  --teal: var(--sk-a2);
  --amber: var(--sk-a4);
  --foil: var(--sk-a3);
}

/* the ground: inky, almost black. colour arrives only as reflected light */
body[data-skin-family="glass"] { background-color: var(--surf-page); }
body[data-skin-family="glass"]::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at center, transparent 55%, var(--vignette) 100%),
    radial-gradient(ellipse at 70% 10%, color-mix(in srgb, var(--sk-page-before-fill-1, color-mix(in srgb, var(--sk-page) 85%, var(--sk-ramp-3))) 20%, transparent), transparent 50%),
    linear-gradient(180deg, color-mix(in srgb, var(--sk-page) 98%, var(--sk-light)) 0%, var(--surf-page) 100%);
  opacity: 1;
}

/* PARENT CONTAINER — darker than the cards it holds */
body[data-skin-family="glass"] .view-page {
  background:
    radial-gradient(circle at 84% 6%, var(--pool-cool), transparent 32%),
    radial-gradient(circle at 10% 96%, var(--pool-hot), transparent 36%),
    linear-gradient(180deg, var(--surf-container-1) 0%, var(--surf-container-2) 100%);
}

/* RAISED PANEL — dense smoked glass, lit from inside, not a solid rectangle */
body[data-skin-family="glass"] :is(.glass, .rc-card) {
  background:
    radial-gradient(circle at 82% 10%, var(--pool-cool), transparent 30%),
    radial-gradient(circle at 14% 94%, var(--pool-hot), transparent 34%),
    linear-gradient(180deg, var(--surf-raised-1) 0%, var(--surf-raised-2) 100%);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  box-shadow:
    0 0 0 1px var(--edge-2),
    inset 0 1px 0 var(--spec-2),
    inset 1px 0 0 color-mix(in srgb, var(--sk-glass-shadow-1, color-mix(in srgb, var(--sk-ink) 45%, var(--sk-ramp-3))) 2.5%, transparent),
    inset 0 -30px 46px -36px var(--pool-hot),
    var(--elev-2);
}

/* the foil hairline stops being magenta: a faint neutral sheen, violet only at the corner */
body[data-skin-family="glass"] :is(.glass, .glass-dark)::before {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--sk-glass-fill-3, color-mix(in srgb, var(--sk-ink) 69%, var(--sk-ramp-3))) 16%, transparent) 0%,
    color-mix(in srgb, var(--sk-a3) 7%, transparent) 26%,
    transparent 58%);
  opacity: 0.55;
}

/* CARD / ROW — slightly lighter than its container, violet toward the bottom, no pink strip */

/* RECESSED CONTROLS — inputs must read as sunk below the card, not as a lighter wash */
body[data-skin-family="glass"] :is(input, textarea, select, .shots-search, .ph-search-input) {
  background: var(--surf-input);
  border-color: color-mix(in srgb, var(--sk-shots-search-line-1, color-mix(in srgb, var(--sk-line) 69%, var(--sk-surface))) 20%, transparent);
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, var(--sk-dark) 25%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--sk-shots-search-shadow-1, color-mix(in srgb, var(--sk-ramp-3) 18%, var(--sk-light))) 3%, transparent);
}
body[data-skin-family="glass"] :is(input, textarea, select):focus {
  border-color: color-mix(in srgb, var(--sk-a2) 55%, transparent);
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, var(--sk-dark) 25%, transparent),
    0 0 0 1px color-mix(in srgb, var(--sk-a2) 20%, transparent),
    0 0 8px color-mix(in srgb, var(--sk-a2) 12%, transparent);
}

/* the rail is the deepest surface on the page */

body[data-skin-family="glass"] .nav-item { color: color-mix(in srgb, var(--sk-nav-item-ink-1, color-mix(in srgb, var(--sk-ink) 83%, var(--sk-line))) 80%, transparent); }

/* round icon buttons read as machined, not neon */
body[data-skin-family="glass"] :is(.ph-iconbtn, .rc-iconbtn) {
  border-color: color-mix(in srgb, var(--sk-ph-iconbtn-line-1, color-mix(in srgb, var(--sk-line) 85%, var(--sk-surface))) 20%, transparent);
}

/* pills: tinted dark fill, thin accent edge, micro glow. NOT an 18px halo on every one */
body[data-skin-family="glass"] .shot-pill {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, color-mix(in srgb, var(--sk-a1) 31%, var(--sk-light)) 6%, transparent),
    0 0 7px color-mix(in srgb, var(--sk-a1) 8%, transparent);
}

/* rings get a bright core and an atmospheric halo instead of one flat glow */

/* card headings: stop glowing every title, keep them crisp */
body[data-skin-family="glass"] .rc-title { text-shadow: none; }

/* the ring SWEEPS magenta -> violet -> cyan, the way the mockup's progress ring does */

/* ============================================================================================
   MATERIAL PASS 2 — 16 Sep 2026. Colour DISTRIBUTION, not material.
   In the mockup the row gauges and pills are mostly cyan and magenta; green appears once. Ours
   were almost all green, because every ring and pill derives from --ok / --warn. The semantic
   bases stay untouched (spec 37: green still means success where the app genuinely means it);
   only the DERIVED ring and pill tokens move onto the accent ramp.
   Two leaks fixed here too: --amber now resolves to indigo, which turned the 4K Upscale pill
   blue when the mockup has it amber; and the hero rings still ended on --forest-7 / --forest-8,
   dragging forest green into every skin.
   ============================================================================================ */
body[data-skin-family="glass"] {
  /* the ring terminators that were still forest green */
  --forest-7: var(--sk-forest-7-1, color-mix(in srgb, var(--sk-a2) 65%, var(--sk-page)));
  --forest-8: var(--sk-forest-8-1, color-mix(in srgb, var(--sk-a2) 65%, var(--sk-page)));

  /* APPROVED / HERO — the commonest row state. cyan in the mockup, not green */
  --ring-hero-1: var(--sk-ring-hero-1-1, color-mix(in srgb, var(--sk-ramp-4) 61%, var(--sk-light)));
  --ring-hero-2: var(--sk-ring-hero-2-1, var(--sk-a2));
  --ring-hero-3: var(--sk-ring-hero-3-1, var(--forest-8));
  --ring-video-hero-1: var(--sk-ring-video-hero-1-1, color-mix(in srgb, var(--sk-ramp-4) 61%, var(--sk-light)));
  --ring-video-hero-2: var(--sk-ring-video-hero-2-1, var(--sk-a2));
  --ring-video-hero-3: var(--sk-ring-video-hero-3-1, var(--forest-7));

  /* IN PROGRESS — magenta in the mockup, not amber */
  --ring-wip-1: var(--sk-ring-wip-1-1, color-mix(in srgb, var(--sk-ramp-0) 78%, var(--sk-light)));
  --ring-wip-2: var(--sk-ring-wip-2-1, var(--sk-a1));
  --ring-wip-3: var(--sk-ring-wip-3-1, color-mix(in srgb, var(--sk-a1) 69%, var(--sk-dark)));
  --ring-first-pass-1: var(--sk-ring-first-pass-1-1, color-mix(in srgb, var(--sk-ramp-0) 78%, var(--sk-light)));
  --ring-first-pass-2: var(--sk-ring-first-pass-2-1, var(--sk-a1));
  --ring-first-pass-3: var(--sk-ring-first-pass-3-1, color-mix(in srgb, var(--sk-a1) 69%, var(--sk-dark)));
  --ring-video-wip-1: var(--sk-ring-video-wip-1-1, color-mix(in srgb, var(--sk-ramp-2) 88%, var(--sk-light)));
  --ring-video-wip-2: var(--sk-ring-video-wip-2-1, var(--sk-a3));
  --ring-video-wip-3: var(--sk-ring-video-wip-3-1, color-mix(in srgb, var(--sk-a3) 63%, var(--sk-dark)));

  /* 4K UPSCALE keeps its amber — --amber is the indigo support colour now */
  --ring-upscaled-1: var(--sk-ring-upscaled-1-1, color-mix(in srgb, var(--sk-ink) 67%, var(--sk-dark)));
  --ring-upscaled-2: var(--sk-ring-upscaled-2-1, color-mix(in srgb, var(--sk-ramp-0) 55%, var(--sk-dark)));
  --ring-upscaled-3: var(--sk-ring-upscaled-3-1, color-mix(in srgb, var(--sk-a1) 41%, var(--sk-dark)));

  /* pills follow the same distribution.
     (17 Sep 2026) --sk-pill-ink-1 is ONE text colour for every status pill (each status's own
     --sk-st-<s>-ink-1 still wins): Paradise Found Dark writes every pill in a pale ink and lets the dot
     and the outline carry the status colour. Default: each status's own ink, as before. */
  --st-hero: var(--sk-st-hero-1, var(--sk-a2));
  --st-hero-ink: var(--sk-st-hero-ink-1, var(--sk-pill-ink-1, color-mix(in srgb, var(--sk-ramp-4) 61%, var(--sk-light))));
  --st-video-hero: var(--sk-st-video-hero-1, var(--sk-a2));
  --st-video-hero-ink: var(--sk-st-video-hero-ink-1, var(--st-hero-ink));
  --st-wip: var(--sk-st-wip-1, var(--sk-a1));
  --st-wip-ink: var(--sk-st-wip-ink-1, var(--sk-pill-ink-1, color-mix(in srgb, var(--sk-ramp-0) 78%, var(--sk-light))));
  --st-first-pass: var(--sk-st-first-pass-1, var(--sk-a1));
  --st-first-pass-ink: var(--sk-st-first-pass-ink-1, var(--sk-pill-ink-1, color-mix(in srgb, var(--sk-ramp-0) 78%, var(--sk-light))));
  --st-video-wip: var(--sk-st-video-wip-1, var(--sk-a3));
  --st-video-wip-ink: var(--sk-st-video-wip-ink-1, var(--sk-pill-ink-1, color-mix(in srgb, var(--sk-ramp-2) 88%, var(--sk-light))));
  --st-upscaled: var(--sk-st-upscaled-1, color-mix(in srgb, var(--sk-ramp-0) 55%, var(--sk-dark)));
  --st-upscaled-ink: var(--sk-st-upscaled-ink-1, var(--sk-pill-ink-1, color-mix(in srgb, var(--sk-ink) 67%, var(--sk-dark))));

  /* chart bars: magenta primary, cyan secondary, violet bridge */
  --chart-1: var(--sk-a1);
  --chart-2: var(--sk-a2);
  --chart-3: var(--sk-a3);
  --chart-4: var(--sk-a4);
  --chart-5: var(--sk-a2);
  --chart-prompt: var(--sk-a3);
  --chart-labor: var(--sk-a4);
  --chart-line: var(--sk-a1);

  /* tints follow the accent, not the old blue/teal pair */
  --tint-amber: color-mix(in srgb, var(--sk-a4) 18%, transparent);
  --tint-leaf: color-mix(in srgb, var(--sk-a1) 16%, transparent);
  --tint-teal: color-mix(in srgb, var(--sk-a2) 16%, transparent);

  /* Notes page ink (17 Sep 2026). The forest kind colours measured 1.5-2.6:1 on the glass chips.
     Each kind reads an accent lifted toward the skin's ink, so the tag text stays at 4.5:1 or more;
     the active chip mixes into a see-through base, like the tags themselves; the no-image square
     keeps the dark panel colour (as the shot rows' empty-thumbnail well does) so its letter reads.
     A skin sets --sk-note-kind-<kind>-1 / --sk-note-src-<source>-1 for an exact colour. */
  --note-kind-shot: var(--sk-note-kind-shot-1, color-mix(in srgb, var(--sk-a2) 60%, var(--sk-ink)));
  --note-kind-character: var(--sk-note-kind-character-1, color-mix(in srgb, var(--sk-a3) 40%, var(--sk-ink)));
  --note-kind-animal: var(--sk-note-kind-animal-1, color-mix(in srgb, var(--sk-a4) 40%, var(--sk-ink)));
  --note-kind-location: var(--sk-note-kind-location-1, color-mix(in srgb, color-mix(in srgb, var(--sk-a2) 50%, var(--sk-a4)) 45%, var(--sk-ink)));
  --note-kind-prop: var(--sk-note-kind-prop-1, color-mix(in srgb, color-mix(in srgb, var(--sk-a1) 50%, var(--sk-a3)) 40%, var(--sk-ink)));
  --note-kind-ref: var(--sk-note-kind-ref-1, color-mix(in srgb, var(--sk-line) 50%, var(--sk-ink)));
  --note-kind-edit: var(--sk-note-kind-edit-1, color-mix(in srgb, var(--sk-a1) 40%, var(--sk-ink)));
  --note-kind-project: var(--sk-note-kind-project-1, color-mix(in srgb, color-mix(in srgb, var(--sk-line) 50%, var(--sk-a4)) 45%, var(--sk-ink)));
  --note-kind-other: var(--sk-note-kind-other-1, color-mix(in srgb, var(--sk-line) 70%, var(--sk-ink)));
  --note-src-modal: var(--sk-note-src-modal-1, var(--note-kind-project));
  --note-src-pdf: var(--sk-note-src-pdf-1, var(--note-kind-edit));
  --note-src-edit: var(--sk-note-src-edit-1, var(--note-kind-shot));
  --note-src-general: var(--sk-note-src-general-1, var(--note-kind-ref));
  --note-src-other: var(--sk-note-src-other-1, var(--note-kind-other));
  --note-chip-all: var(--sk-note-chip-all-1, color-mix(in srgb, var(--sk-a1) 40%, var(--sk-ink)));
  --note-chip-base: color-mix(in srgb, var(--mix-light) 45%, transparent);
  --note-thumb-base: var(--sk-surface);
}

/* the header panel pools magenta behind the donut, the way the mockup lights that corner */

/* the lower cards take a violet cast, strongest toward their bottom edge */

/* the right rail matches it, so the two columns read as one material */

/* ============================================================================================
   MATERIAL PASS 3 — 16 Sep 2026. Measured from a coarse colour map of the mockup against ours.
   In the mockup ONLY the shot rows are bright (luminance 31). The header band, the footer cards
   and the right rail all sit near black (12-21). Ours had the header at 35 and the footers at 29,
   so nothing stood out and the whole page read flat. That one pattern is the entire black-share
   gap: mockup 38.6%, ours 20.9%.
   ============================================================================================ */

/* the stats band beside the donut was the brightest thing on the page. The mockup keeps it dark. */

/* the three lower cards drop to the mockup's footer value */
body[data-skin-family="glass"] :is(.footer-row .rc-card, .activity-card, .media-card, .notes-card) {
  background:
    radial-gradient(ellipse at 20% 104%, var(--pool-violet), transparent 44%),
    radial-gradient(circle at 86% 8%, var(--pool-cool), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--sk-page) 98%, var(--sk-light)) 0%, var(--sk-page) 100%);
  box-shadow:
    0 0 0 1px var(--edge-1),
    inset 0 1px 0 var(--spec-1),
    inset 0 -34px 50px -40px color-mix(in srgb, var(--sk-a3) 18%, transparent),
    var(--elev-1);
}

/* the right rail matches the mockup's 12-16 band */

/* rows are the ONE bright rung — centre them on the mockup's dominant #18202C */

/* the header panel behind the donut stays dark, with the magenta pool doing the lighting */

/* ============================================================================================
   MATERIAL PASS 4 — 16 Sep 2026. Typography hierarchy and button material (spec 20, 29, 30).
   Also fixes a fault the token dump exposed: --cta-bg pointed at --amber, and --amber is now the
   indigo SUPPORT colour, so every primary button in the app had turned indigo. The mockup's
   primary button is a magenta gradient.
   ============================================================================================ */
body[data-skin-family="glass"] {
  /* spec 29 — richness comes from different white LEVELS, never pure white everywhere */
  --ink: var(--sk-ink);
  --ink-on-dark: var(--sk-ink);
  --ink-muted: var(--sk-ink-muted-1, color-mix(in srgb, var(--sk-line) 72%, var(--sk-light)));
  --ink-on-dark-muted: var(--sk-ink-on-dark-muted-1, color-mix(in srgb, var(--sk-line) 72%, var(--sk-light)));
  /* (17 Sep 2026) the faint inks are slots: --sk-ink-soft-1 (dates, bylines, "—" marks; default: the line at
     80%) and --sk-ink-tan-deep-1 (default: the line and the surface). A skin whose line is a DARK grey
     (Paradise Found Dark: the design tokens' muted ink) sets readable ones instead. */
  --ink-soft: var(--sk-ink-soft-1, color-mix(in srgb, var(--sk-line) 80%, var(--sk-dark)));
  --ink-parchment: var(--sk-ink-soft-1, color-mix(in srgb, var(--sk-line) 80%, var(--sk-dark)));
  --ink-tan-deep: var(--sk-ink-tan-deep-1, color-mix(in srgb, var(--sk-line) 48%, var(--sk-surface)));

  /* spec 30 — small uppercase labels carry a cool violet cast, not one flat grey */
  --ink-moss: var(--sk-ink-moss-1, color-mix(in srgb, var(--sk-ramp-1) 63%, var(--sk-ramp-4)));
  --ink-accent: var(--sk-ink-accent-1, color-mix(in srgb, var(--sk-ramp-0) 78%, var(--sk-light)));

  /* the two accents that still held the old magenta */
  --nav-active: var(--sk-a1);
  --status-accent: var(--sk-a1);

  /* spec 20 — the primary button is magenta, not the indigo support colour */
  --cta-bg: var(--sk-cta-bg-1, color-mix(in srgb, var(--sk-a1) 77%, var(--sk-page)));
  /* (17 Sep 2026) the primary buttons' own label ink (--sk-cta-ink-1) and resting edge (--sk-cta-line-1,
     drawn at 65%): Paradise Found Dark's primary is a DARK moss button with a pale green label and a
     dim green edge, while its other accent fills keep the accent ink. Default: what they always were. */
  --cta-ink: var(--sk-cta-ink-1, var(--sk-accent-ink-1, var(--sk-light)));
}

/* primary buttons: a real gradient with a lit top edge and a restrained bloom */
body[data-skin-family="glass"] :is(.pill-button--add, .np-btn-create, .user-add-submit, .agent-btn--go,
  .agent-send, .cal-connect-btn, .rvx-costs-save, .gen-go-btn, .cpm-btn-primary,
  .review-btn-primary, .intg-btn-primary) {
  background: linear-gradient(180deg, var(--sk-pill-button-add-fill-1, color-mix(in srgb, var(--sk-a1) 77%, var(--sk-page))) 0%, var(--sk-pill-button-add-fill-2, color-mix(in srgb, var(--sk-a1) 54%, var(--sk-deep))) 100%);
  border-color: color-mix(in srgb, var(--sk-cta-line-1, color-mix(in srgb, var(--sk-ramp-0) 95%, var(--sk-light))) 65%, transparent);
  color: var(--sk-cta-ink-1, var(--sk-accent-ink-1, var(--sk-light)));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sk-pill-button-add-shadow-1, color-mix(in srgb, var(--sk-ramp-0) 22%, var(--sk-light))) 18%, transparent),
    0 0 10px color-mix(in srgb, var(--sk-a1) 22%, transparent),
    var(--elev-1);
}
body[data-skin-family="glass"] :is(.pill-button--add, .np-btn-create, .agent-btn--go, .agent-send,
  .cal-connect-btn, .gen-go-btn):hover {
  background: linear-gradient(180deg, var(--sk-pill-button-add-fill-3, color-mix(in srgb, var(--sk-a1) 83%, var(--sk-surface))) 0%, var(--sk-pill-button-add-fill-4, color-mix(in srgb, var(--sk-a1) 60%, var(--sk-deep))) 100%);
  border-color: color-mix(in srgb, var(--sk-pill-button-add-line-1, color-mix(in srgb, var(--sk-ramp-0) 78%, var(--sk-light))) 75%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sk-pill-button-add-shadow-1, color-mix(in srgb, var(--sk-ramp-0) 22%, var(--sk-light))) 24%, transparent),
    0 0 14px color-mix(in srgb, var(--sk-a1) 30%, transparent),
    var(--elev-1);
}

/* secondary buttons stay very dark — they must not compete with the primary.
   (17 Sep 2026) --sk-pill-button-bg-1 is their fill (drawn at 74%; default: this page/surface mix) */
body[data-skin-family="glass"] .pill-button {
  background: color-mix(in srgb, var(--sk-pill-button-bg-1, color-mix(in srgb, var(--sk-page) 64%, var(--sk-surface))) 74%, transparent);
  border-color: color-mix(in srgb, var(--sk-pill-button-line-1, color-mix(in srgb, var(--sk-line) 85%, var(--sk-surface))) 20%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sk-light) 5.5%, transparent),
    0 2px 5px color-mix(in srgb, var(--sk-dark) 25%, transparent);
}
body[data-skin-family="glass"] .pill-button:hover {
  background: color-mix(in srgb, color-mix(in srgb, var(--sk-page) 25%, var(--sk-surface)) 80%, transparent);
  border-color: color-mix(in srgb, var(--sk-pill-button-line-2, color-mix(in srgb, var(--sk-line) 78%, var(--sk-ramp-3))) 28%, transparent);
}

/* spec 35 — normal text must stay crisp. only the project display may glow */
body[data-skin-family="glass"] :is(.shot-pill, .ph-status-pill, .nav-item, .rc-title, .pill-button) {
  text-shadow: none;
}

/* cascade fix, 16 Sep 2026 — .pill-button--add ALSO carries .pill-button, and the dark secondary
   rule came after the magenta primary one, so the secondary won on background and the Add shot
   and Sync now buttons lost their fill. Doubling the class outranks it without touching layout. */
body[data-skin-family="glass"] .pill-button.pill-button--add {
  background: linear-gradient(180deg, var(--sk-pill-button-fill-1, color-mix(in srgb, var(--sk-a1) 77%, var(--sk-page))) 0%, var(--sk-pill-button-fill-2, color-mix(in srgb, var(--sk-a1) 54%, var(--sk-deep))) 100%);
  border-color: color-mix(in srgb, var(--sk-cta-line-1, color-mix(in srgb, var(--sk-ramp-0) 95%, var(--sk-light))) 65%, transparent);
  color: var(--sk-cta-ink-1, var(--sk-accent-ink-1, var(--sk-light)));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sk-pill-button-shadow-1, color-mix(in srgb, var(--sk-ramp-0) 22%, var(--sk-light))) 18%, transparent),
    0 0 10px color-mix(in srgb, var(--sk-a1) 22%, transparent),
    var(--elev-1);
}
body[data-skin-family="glass"] .pill-button.pill-button--add:hover {
  background: linear-gradient(180deg, var(--sk-pill-button-fill-3, color-mix(in srgb, var(--sk-a1) 83%, var(--sk-surface))) 0%, var(--sk-pill-button-fill-4, color-mix(in srgb, var(--sk-a1) 60%, var(--sk-deep))) 100%);
  border-color: color-mix(in srgb, var(--sk-pill-button-line-3, color-mix(in srgb, var(--sk-ramp-0) 78%, var(--sk-light))) 75%, transparent);
}

/* ---- INK ON AN ACCENT FILL (17 Sep 2026, Midnight Lavender's every-page audit) ----
   Hugo's Midnight Lavender mockup writes DARK navy on its pale accent fills ("+ New Item", the
   "12" today disc); white on those pale fills read at 2.3:1 on Settings, Updates, Reports, Agent
   and Generate. --sk-accent-ink-1 is the text on every accent-filled control (the rules above that
   read --ink-on-accent / --cta-ink, the primary buttons, and the component chips below that type
   white or the page ink). Each fallback is that rule's own ink today, so a skin that leaves the
   slot out repaints nothing. --ink-on-accent itself is NOT re-pointed: the app also reads it as
   plain white (white-tint overlays, the presentation paper, the band's dark active tab).
   A disabled primary whose stylesheet fades it (opacity) sits on a dark fill, so it keeps the light
   ink it has today; the ones listed here are exactly those with a fading :disabled rule. ---- */
body[data-skin-family="glass"] :is(.user-add-submit, .agent-btn--go, .agent-send, .rvx-costs-save,
  .gen-go-btn, .cpm-btn-primary, .review-btn-primary, .intg-btn-primary):disabled {
  color: var(--sk-light);
}
body[data-skin-family="glass"] :is(.ru-toggle-btn.is-on, .ru-chip.is-on, .review-typechip.is-on,
  .gen-vo-preset-btn.is-active, .cw-add-btn:not(:disabled)) {
  color: var(--sk-accent-ink-1, var(--white));
}
body[data-skin-family="glass"] .docs-type-pill.is-active { color: var(--sk-accent-ink-1, var(--ink)); }
/* (17 Sep 2026, Paradise Found Dark's every-page audit) three more accent fills whose stylesheet types the light
   ink: To-do's primary button, the Notes page's active filter and a note's initials disc. Their own slot,
   --sk-accent-ink-2-1 (default: that light ink), so a skin that already sets --sk-accent-ink-1 repaints nothing. */
body[data-skin-family="glass"] :is(.todo-btn--primary, .notes-page .np-seg-btn.is-active, .note-avatar) { color: var(--sk-accent-ink-2-1, var(--ink-cream)); }
body[data-skin-family="glass"] .vo-submode-btn.is-active { color: var(--sk-accent-ink-1, color-mix(in srgb, var(--ink-deep-2) 92%, var(--mix-dark))); }
body[data-skin-family="glass"] .big-cal-today-tag { color: var(--sk-accent-ink-1, var(--ink-cream)); }
body[data-skin-family="glass"] .gen-gens-act--approve:not(:disabled) { color: var(--sk-accent-ink-1, color-mix(in srgb, var(--leaf-bright) 32%, var(--mix-dark))); }
/* the Admin diagnostic icons keep their light ink (their fills are mid-tone, where light reads);
   the warning fill has its own slot, --sk-diag-warn-fill-1 (on Midnight Lavender's formula fill the
   light ink read 4.3:1, and no ink reached 4.5) */
body[data-skin-family="glass"] .admin-diag-banner--warn .admin-diag-banner-icon { background: color-mix(in srgb, var(--sk-diag-warn-fill-1, var(--gold-6)) 88%, transparent); }
body[data-skin-family="glass"] .admin-diag-item--warn .admin-diag-item-ico { background: color-mix(in srgb, var(--sk-diag-warn-fill-1, var(--gold-6)) 85%, transparent); }
/* the note count on a shot row: a dark ink on a tinted chip over the dark row (1.6:1 in neon) */
body[data-skin-family="glass"] .shot-notes-badge { color: var(--sk-notes-badge-ink-1, color-mix(in srgb, var(--ink-tan-deep) 81%, var(--mix-dark))); }
/* the "Open frame" cap inside the Generate video button sits on the same fill as the button's label */
/* (17 Sep 2026) ... the button's label is the PRIMARY ink, so the cap reads --sk-cta-ink-1 first (a skin whose
   primary button is not an accent fill - Paradise Found Dark - gives its primaries their own ink) */
body[data-skin-family="glass"] .gen-copy-frametoggle { color: color-mix(in srgb, var(--sk-cta-ink-1, var(--sk-accent-ink-1, var(--ink-cream))) 60%, transparent); }
body[data-skin-family="glass"] .gen-copy-frametoggle:hover { color: color-mix(in srgb, var(--sk-cta-ink-1, var(--sk-accent-ink-1, var(--ink-cream))) 92%, transparent); }
body[data-skin-family="glass"] .gen-copy-frametoggle.is-on { color: var(--sk-cta-ink-1, var(--sk-accent-ink-1, var(--ink-cream))); }
/* the status glyph on Updates: a dark teal on its own teal chip (2.3:1 in Midnight Lavender) */
body[data-skin-family="glass"] .ru-row--status .ru-icon { color: var(--sk-ru-status-ink-1, color-mix(in srgb, var(--teal) 56%, var(--mix-dark))); }
/* (17 Sep 2026) two more accent fills, found when the audit opened the shot modal: the published
   filter's "Hero" pill (3.29:1 in Midnight Lavender) and a note's "Resolve" button (3.06:1). Their
   hover keeps the label, so the same ink serves both states. */
body[data-skin-family="glass"] .vs-pf-btn.is-on { color: var(--sk-accent-ink-1, color-mix(in srgb, var(--ink-deep-2) 92%, var(--mix-dark))); }
body[data-skin-family="glass"] .note-resolve:not(.note-resolve--undo) { color: var(--sk-accent-ink-1, var(--ink-cream)); }
/* (17 Sep 2026) the two labels the page code used to type as white (inline styles) now live in
   classes whose default is that white: Reports' "Export Report" and Documents' "+ Upload document",
   both on accent fills (2.29:1 and 3.03:1 in Midnight Lavender) */
body[data-skin-family="glass"] .rv-export-btn,
body[data-skin-family="glass"] .docs-type-pill.docs-upload-pill { color: var(--sk-accent-ink-1, var(--white)); }
/* (17 Sep 2026) the Clean Client template card on Presentations draws its mark, eyebrow and rule in
   the page's --gold-7 on the card's own cream; Midnight Lavender's --gold-7 read 3.8:1 there, so the
   card's accent is a slot (default: --gold-7, as before) */
body[data-skin-family="glass"] .ptpl--clean-client { --tcard-clean-accent: var(--sk-tcard-clean-accent-1, var(--gold-7)); }
body[data-skin-family="glass"] .ptpl--clean-client :is(.ptpl-mark, .ptpl-eyebrow) { color: var(--tcard-clean-accent); }
body[data-skin-family="glass"] .ptpl--clean-client .ptpl-rule i { background: color-mix(in srgb, var(--tcard-clean-accent) 50%, transparent); }
body[data-skin-family="glass"] .ptpl--clean-client .ptpl-rule b { background: var(--tcard-clean-accent); }

/* ---- PROGRESS BAR, measured from the mockup (16 Sep 2026) ----
   region_sample.py read the real pixels: the unfilled track is #040714, i.e. black, and
   the fill is a FOUR stop ramp, not two. Ours had a tinted track and a three stop ramp,
   which is what read as the wrong colour. ---- */

/* ---- the donut is TWO ARCS on a BLACK track (16 Sep 2026) ----
   Hugo: "it should be 2 different bars overlapping like we already have. One should be
   cyan (with a gradient) and the other bigger one should be purple (with a gradient as
   well). Empty bar should be black like the mockup."
   The arcs are sorted biggest-first before drawing, so for Paradise Found the BIGGER
   visible arc is Videos Hero at 92% (arcRender) and the smaller sliver is Frames Hero's
   tail at 8% (arcCompleted). Each keeps its own vertical dark -> bright -> light ramp,
   which is what gives the band its tube shading. Colours sampled from mockup_01.png. ---- */

/* the track must not pick up the arc glow, or the empty ring stops reading as black */

/* ============================================================================================
   DONUT EDGE AND GLOW - measured off mockup_01.png with a radial profile through the ring.
   Hugo: "a lot of glows are missing. the borders of the donut on the black parts are not there".
   Three things the mockup has and we did not:
     1. a DARK CONTACT LINE hugging each arc. At 8 o'clock the pixel just inside the magenta band
        is #3C0254, and at 12 o'clock it is #070B24 - a near-black rim, which is what separates
        the lit band from the black track and reads as a border.
     2. a WIDE OUTER GLOW. Past the band the mockup stays lit for ~15px (luminance 29 falling to
        26 at 8 o'clock) instead of dropping straight to the page.
     3. an INNER DISK TINTED BY THE ARC. Under the magenta arc the disk is #1B1126, not neutral
        black, so the ring bleeds light inwards.
   Paint only: filters and backgrounds, no geometry. ---- */

/* the track is the black part: it keeps the contact line but must not glow, or it stops
   reading as empty */

/* the disk behind the ring picks up the arc colour instead of being neutral */

/* the sharp white glass highlight on the ring. Hugo: "we completely lost the sharp white
   glass higlight" - because neon remaps --mix-light to #5a606b, a grey. */

/* ============================================================================================
   BAR BLOOM + TUBE SHADE (16 Sep 2026). Hugo: "look at the bar, we are also missing glows and
   colours are not the same."
   The mockup's bar is a lit glass tube: a bright top lip, a dark contact line where it meets
   the black track, and a bloom that spills ~12px above and below in the fill's own hue. Ours
   had a 6px/10px halo, which vanished against the page. Paint only - no size, no radius. ---- */

/* ============================================================================================
   STAT DISCS (16 Sep 2026). Hugo: "The icons are very very bad and too small compared to the
   mockup, we need to change that."
   In the mockup each stat sits in a translucent disc tinted with its OWN hue from the accent
   ramp - violet, cyan, magenta - with a 1px lit rim, a soft outer bloom, and a NEON glyph that
   glows. Our discs were painted from the semantic ramp (--leaf green, --amber, --ok), so they
   read as traffic lights and the glyph was a flat, dull stroke with no light at all.
   Each disc declares its own --chip-hue / --chip-glyph; one shared rule paints them, so adding
   a stat later only needs the two colours. Paint only. ---- */

/* the glyph is the neon tube: its own colour, blooming outward */

/* per-stat hues, walking the same ramp as the donut arcs and the bar */

/* ============================================================================================
   16 Sep 2026 - HUGO'S GAP LIST, part 2. Every rule below is PAINT ONLY: colour, gradient,
   shadow, filter, opacity. Nothing sets a size, a space, a radius or a font metric, so the
   skin contract holds and Paradise Found cannot move.
   ============================================================================================ */

/* ---- 1. the DONUT's empty track needs a visible edge -----------------------------------
   Hugo: "we are missing that edge around the empty part".
   The track already carried drop-shadow(0 0 1px black) - a black rim on a black track, so it
   was invisible. box-shadow cannot be used here: topbar.css:112 kills it with !important on
   .tb-donut and every child. The rim is therefore painted as the SVG's OWN background, which
   sits outside the <g mask> and is not clipped. viewBox is 200, so closest-side radius = 100
   user units and the percentages map 1:1 onto r=78 / stroke 11 (band 72.5 to 83.5). ---- */

/* ---- 2. the SHOT ROW's small donut: kill the sharp box frame ----------------------------
   Hugo: "they have a sharp box frame around them".
   The frame is the big arc glow. An inline <svg> is clipped by the UA rule
   svg:not(:root){overflow:hidden}, and the small ring leaves only 1px of clearance to the
   viewBox edge - so a 30px halo cannot fade out, it fills the whole 56x56 box and is cut
   dead square. That cut IS the frame. The small ring keeps only its black contact line.
   The track also gets a real colour: the presentation attribute resolves to 4.8% alpha,
   i.e. nothing, which is why the ring read as a floating arc. ---- */

/* ---- 3. the stat glyphs read as hairlines ------------------------------------------------
   Hugo: "The icons are very very bad and too small".
   The SVGs are drawn with strokeWidth 1.5 at 24px, which is a thread. stroke-width is ink
   weight, not geometry - it changes no box and moves nothing. ---- */

/* ---- 4. the shot-row STATUS PILLS -------------------------------------------------------
   Hugo: "Progress pills are still the old green colours".
   Six states were already remapped to the mockup hues; PROMPT, PENDING, ARCHIVE, OMITTED and
   RETAKE still fell through to the generic semantic map, so five states shared one dull
   grey-blue. The pills read their colours through var() from inline styles, so redefining the
   tokens on body reaches them with no !important. ---- */
/* (17 Sep 2026) PROMPT and the two RETAKE inks take --sk-pill-ink-1 too; the muted states (PENDING,
   ARCHIVE, OMITTED) keep their own greys */
body[data-skin-family="glass"] {
  --st-prompt: var(--sk-st-prompt-1, var(--sk-a4));      --st-prompt-ink: var(--sk-st-prompt-ink-1, var(--sk-pill-ink-1, color-mix(in srgb, var(--sk-ink) 38%, var(--sk-ramp-3))));
  --st-pending: var(--sk-st-pending-1, color-mix(in srgb, var(--sk-line) 47%, var(--sk-page)));     --st-pending-ink: var(--sk-st-pending-ink-1, color-mix(in srgb, var(--sk-line) 97%, var(--sk-dark)));
  --st-pending-2: var(--sk-st-pending-2-1, color-mix(in srgb, var(--sk-line) 47%, var(--sk-page)));   --st-pending-2-ink: var(--sk-st-pending-2-ink-1, color-mix(in srgb, var(--sk-line) 97%, var(--sk-dark)));
  --st-archive: var(--sk-st-archive-1, color-mix(in srgb, var(--sk-deep) 63%, var(--sk-line)));     --st-archive-ink: var(--sk-st-archive-ink-1, color-mix(in srgb, var(--sk-line) 87%, var(--sk-dark)));
  --st-omitted: var(--sk-st-omitted-1, color-mix(in srgb, var(--sk-ramp-0) 31%, var(--sk-surface)));     --st-omitted-ink: var(--sk-st-omitted-ink-1, color-mix(in srgb, var(--sk-line) 53%, var(--sk-ramp-0)));
  --st-retake: var(--sk-st-retake-1, color-mix(in srgb, var(--sk-a1) 78%, var(--sk-dark)));      --st-retake-ink: var(--sk-st-retake-ink-1, var(--sk-pill-ink-1, color-mix(in srgb, var(--sk-line) 42%, var(--sk-ramp-0))));
  --st-retake-2: var(--sk-st-retake-2-1, color-mix(in srgb, var(--sk-a1) 78%, var(--sk-dark)));    --st-retake-2-ink: var(--sk-st-retake-2-ink-1, var(--sk-pill-ink-1, color-mix(in srgb, var(--sk-line) 42%, var(--sk-ramp-0))));
  --pill-bg: var(--sk-pill-bg-1, color-mix(in srgb, color-mix(in srgb, var(--sk-page) 72%, var(--sk-surface)) 72%, transparent));
  /* 16 Sep 2026 - each status may have its own pill fill and rim (ShotsPanel.jsx STAGE_TINTS reads
     --st-<s>-fill / --st-<s>-line); a skin that sets neither keeps the shared fill and the status colour */
  --st-upscaled-fill: var(--sk-st-upscaled-fill-1, var(--pill-bg));  --st-upscaled-line: var(--sk-st-upscaled-line-1, var(--st-upscaled));
  --st-video-hero-fill: var(--sk-st-video-hero-fill-1, var(--pill-bg));  --st-video-hero-line: var(--sk-st-video-hero-line-1, var(--st-video-hero));
  --st-video-wip-fill: var(--sk-st-video-wip-fill-1, var(--pill-bg));  --st-video-wip-line: var(--sk-st-video-wip-line-1, var(--st-video-wip));
  --st-hero-fill: var(--sk-st-hero-fill-1, var(--pill-bg));  --st-hero-line: var(--sk-st-hero-line-1, var(--st-hero));
  --st-wip-fill: var(--sk-st-wip-fill-1, var(--pill-bg));  --st-wip-line: var(--sk-st-wip-line-1, var(--st-wip));
  --st-first-pass-fill: var(--sk-st-first-pass-fill-1, var(--pill-bg));  --st-first-pass-line: var(--sk-st-first-pass-line-1, var(--st-first-pass));
  --st-prompt-fill: var(--sk-st-prompt-fill-1, var(--pill-bg));  --st-prompt-line: var(--sk-st-prompt-line-1, var(--st-prompt));
  --st-pending-fill: var(--sk-st-pending-fill-1, var(--pill-bg));  --st-pending-line: var(--sk-st-pending-line-1, var(--st-pending));
  --st-archive-fill: var(--sk-st-archive-fill-1, var(--pill-bg));  --st-archive-line: var(--sk-st-archive-line-1, var(--st-archive));
  --st-omitted-fill: var(--sk-st-omitted-fill-1, var(--pill-bg));  --st-omitted-line: var(--sk-st-omitted-line-1, var(--st-omitted));
  --st-retake-fill: var(--sk-st-retake-fill-1, color-mix(in srgb, var(--st-retake-2) 14%, transparent));
  --st-retake-line: var(--sk-st-retake-line-1, color-mix(in srgb, var(--st-retake-2) 75%, transparent));
}
/* the halo followed one fixed magenta, so a cyan pill glowed pink */
body[data-skin-family="glass"] .shot-pill.shot-pill {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, color-mix(in srgb, var(--sk-a1) 31%, var(--sk-light)) 6%, transparent),
    0 0 7px color-mix(in srgb, currentColor 22%, transparent);
}
/* the hover quick-action strip is the last real green/teal on a row */
body[data-skin-family="glass"] .sqa-btn.sqa-fp.is-active,
body[data-skin-family="glass"] .sqa-btn.sqa-cw.is-active {
  background: color-mix(in srgb, var(--st-wip) 26%, transparent);
  border-color: color-mix(in srgb, var(--st-wip) 80%, transparent);
  color: var(--st-wip-ink);
  box-shadow: 0 0 8px color-mix(in srgb, var(--st-wip) 35%, transparent);
}
body[data-skin-family="glass"] .sqa-btn.sqa-ca.is-active,
body[data-skin-family="glass"] .sqa-btn.sqa-va.is-active {
  background: color-mix(in srgb, var(--st-hero) 26%, transparent);
  border-color: color-mix(in srgb, var(--st-hero) 80%, transparent);
  color: var(--st-hero-ink);
  box-shadow: 0 0 8px color-mix(in srgb, var(--st-hero) 35%, transparent);
}
body[data-skin-family="glass"] .sqa-btn.sqa-rd.is-active {
  background: color-mix(in srgb, var(--st-video-wip) 26%, transparent);
  border-color: color-mix(in srgb, var(--st-video-wip) 80%, transparent);
  color: var(--st-video-wip-ink);
  box-shadow: 0 0 8px color-mix(in srgb, var(--st-video-wip) 35%, transparent);
}
body[data-skin-family="glass"] .sqa-btn.sqa-up.is-active {
  background: color-mix(in srgb, var(--st-upscaled) 26%, transparent);
  border-color: color-mix(in srgb, var(--st-upscaled) 80%, transparent);
  color: var(--st-upscaled-ink);
  box-shadow: 0 0 8px color-mix(in srgb, var(--st-upscaled) 35%, transparent);
}

/* ---- 5. the solid plate behind "Episodes" -----------------------------------------------
   Hugo: "Behind Episodes there's a background solid as well".
   The base deliberately resets the COMPACT episode chip to bare inline text, but that reset
   is one class (0,1,0) and the neon rule at :539 is (0,2,1) - so the skin won and painted a
   6%-white plate back in. Scope the transparency to the compact modifier only. ---- */
body[data-skin-family="glass"] .ph-episode-pill--compact,
body[data-skin-family="glass"] .ph-episode-pill--compact:hover,
body[data-skin-family="glass"] .ph-episode-pill--compact.is-open {
  background: transparent;
}

/* ---- 6. the round icon buttons ----------------------------------------------------------
   Hugo: "Buttons top right do not match" / "we are missing the round glass material".
   The skin had replaced the base's five-layer glass stack with one 5.5% hairline, so the orbs
   read as flat dark holes. Rebuild the glass: a top-left catch-light, a bottom light pool, an
   inner falloff and a soft outer ring. ---- */
body[data-skin-family="glass"] :is(.ph-iconbtn, .rc-iconbtn) {
  background:
    radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--sk-light) 20%, transparent), color-mix(in srgb, var(--sk-light) 5%, transparent) 42%, transparent 66%),
    radial-gradient(circle at 50% 118%, color-mix(in srgb, var(--sk-a1) 18%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--sk-ph-iconbtn-fill-1, color-mix(in srgb, var(--sk-ramp-2) 1%, var(--sk-surface))) 92%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--sk-page) 92%, var(--sk-surface)) 94%, transparent) 100%);
  box-shadow:
    inset 0 1.5px 0 color-mix(in srgb, var(--sk-light) 22%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--sk-light) 8%, transparent),
    inset 0 -6px 10px -6px color-mix(in srgb, var(--sk-dark) 55%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--sk-a2) 7%, transparent),
    0 0 0 1px color-mix(in srgb, var(--sk-dark) 75%, transparent),
    0 1px 2px color-mix(in srgb, var(--sk-dark) 45%, transparent),
    0 0 14px color-mix(in srgb, var(--sk-a1) 14%, transparent);
}
body[data-skin-family="glass"] :is(.ph-iconbtn, .rc-iconbtn):hover {
  background:
    radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--sk-light) 30%, transparent), color-mix(in srgb, var(--sk-light) 8%, transparent) 42%, transparent 66%),
    radial-gradient(circle at 50% 118%, color-mix(in srgb, var(--sk-a1) 28%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--sk-ph-iconbtn-fill-2, color-mix(in srgb, var(--sk-a4) 7%, var(--sk-surface))) 94%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--sk-deep) 94%, var(--sk-line)) 95%, transparent) 100%);
  box-shadow:
    inset 0 1.5px 0 color-mix(in srgb, var(--sk-light) 32%, transparent),
    inset 0 -6px 10px -6px color-mix(in srgb, var(--sk-dark) 50%, transparent),
    0 0 0 1px color-mix(in srgb, var(--sk-dark) 75%, transparent),
    0 0 12px color-mix(in srgb, var(--sk-a1) 30%, transparent),
    0 0 26px color-mix(in srgb, var(--sk-a2) 14%, transparent);
}

/* ---- 7. the mode pill row ---------------------------------------------------------------
   The active pill was one flat magenta chip with no shading and no rim; the trough's only
   highlight line resolved DARKER than the trough itself. ---- */
body[data-skin-family="glass"] .tb-mode-row {
  /* (17 Sep 2026) a solid stats band gets a solid trough a step darker than the band */
  background: linear-gradient(180deg,
    color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--sk-page) 94%, var(--sk-dark)) 80%, transparent), var(--sk-stats-trough-1, color-mix(in srgb, var(--sk-stats-surface) 93%, var(--sk-stats-ink))) calc(var(--sk-stats-solid) * 100%)) 0%,
    color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--sk-page) 66%, var(--sk-dark)) 86%, transparent), var(--sk-stats-trough-1, color-mix(in srgb, var(--sk-stats-surface) 93%, var(--sk-stats-ink))) calc(var(--sk-stats-solid) * 100%)) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sk-light) 10%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) calc(45% - var(--sk-stats-solid) * 35%), transparent),
    0 0 0 1px color-mix(in srgb, var(--sk-dark) calc(70% - var(--sk-stats-solid) * 62%), transparent);
}
body[data-skin-family="glass"] .tb-mode-btn.is-active {
  background:
    radial-gradient(120% 160% at 50% -40%, color-mix(in srgb, var(--sk-light) calc(30% - var(--sk-stats-solid) * 22%), transparent), transparent 62%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--sk-tb-mode-btn-fill-1, color-mix(in srgb, var(--sk-a1) 80%, var(--sk-light))), var(--sk-stats-tab-1, color-mix(in srgb, var(--sk-stats-ink) 82%, var(--sk-stats-surface))) calc(var(--sk-stats-solid) * 100%)) 0%,
      color-mix(in srgb, var(--sk-tb-mode-btn-fill-2, color-mix(in srgb, var(--sk-a1) 85%, var(--sk-dark))), var(--sk-stats-tab-1, color-mix(in srgb, var(--sk-stats-ink) 82%, var(--sk-stats-surface))) calc(var(--sk-stats-solid) * 100%)) 52%,
      color-mix(in srgb, var(--sk-tb-mode-btn-fill-3, color-mix(in srgb, var(--sk-a1) 62%, var(--sk-dark))), var(--sk-stats-tab-1, color-mix(in srgb, var(--sk-stats-ink) 82%, var(--sk-stats-surface))) calc(var(--sk-stats-solid) * 100%)) 100%);
  /* (17 Sep 2026) --sk-tb-mode-btn-ink-1: the active tab's label (default: white) */
  color: var(--sk-tb-mode-btn-ink-1, var(--sk-light));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sk-light) 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 30%, transparent),
    0 0 0 1px color-mix(in srgb, var(--sk-tb-mode-btn-shadow-1, color-mix(in srgb, var(--sk-ramp-0) 78%, var(--sk-light))) 45%, transparent),
    0 0 10px color-mix(in srgb, var(--sk-a1) calc(45% - var(--sk-stats-solid) * 45%), transparent),
    0 0 24px color-mix(in srgb, var(--sk-a1) calc(20% - var(--sk-stats-solid) * 20%), transparent);
}
/* (17 Sep 2026) on a solid stats band the active tab is a dark pill with no accent glow */
body[data-skin-family="glass"] .tb-mode-btn:hover { color: color-mix(in srgb, var(--sk-light), var(--sk-stats-ink) calc(var(--sk-stats-solid) * 100%)); }

/* ---- 8. the LEFT MENU buttons -----------------------------------------------------------
   Hugo: "Menu buttons are still not quite there, we are missing the round glass material".
   An inactive row had NO material at all - transparent, no ring, no highlight - so only the
   label painted and the set never read as a row of glass pills. The active row was the
   opposite fault: an opaque purple slab wearing TWO coincident magenta outlines (a
   border-color line AND the ::before ring), which reads as a sticker, not glass. ---- */

/* one top-lit rim that fades downward, instead of a second hard outline */
body[data-skin-family="glass"] .nav-item.active::before {
  background: linear-gradient(180deg,
    color-mix(in srgb, color-mix(in srgb, var(--sk-ramp-0) 29%, var(--sk-light)) 34%, transparent) 0%,
    color-mix(in srgb, var(--sk-a1) 24%, transparent) 42%,
    color-mix(in srgb, var(--sk-a1) 10%, transparent) 100%);
}
/* a real near-white catch-light, not a pink saturation wash */
body[data-skin-family="glass"] .nav-item.active::after {
  background: linear-gradient(180deg,
    color-mix(in srgb, color-mix(in srgb, var(--sk-a1) 7%, var(--sk-light)) 10%, transparent) 0%,
    color-mix(in srgb, color-mix(in srgb, var(--sk-a1) 7%, var(--sk-light)) 3%, transparent) 38%,
    transparent 62%);
}

/* ---- 9. the sidebar rail and its edge against the page ---------------------------------
   The rail sat 2-8 RGB values darker than the page with no border, no ring and no shadow,
   and .app-shell::after smeared a LIGHTER veil down the page side of the boundary - the
   opposite of a crisp edge. ---- */

/* ---- 10. the three SIDEBAR cards -------------------------------------------------------
   PROJECT DAY was a flat near-black rectangle while PIPELINE STAGE and SHOT QUEUE were 18%
   of near-black over a near-black rail, i.e. barely there. None of the three ever received
   the material pass that .glass and .view-page got. ---- */
body[data-skin-family="glass"] :is(.project-day, .pipeline-stage, .sb-queue) {
  background:
    radial-gradient(circle at 82% 8%, var(--pool-cool), transparent 30%),
    radial-gradient(circle at 12% 96%, var(--pool-hot), transparent 34%),
    linear-gradient(180deg, var(--surf-raised-1) 0%, var(--surf-raised-2) 100%);
  box-shadow:
    0 0 0 1px var(--edge-2),
    inset 0 1px 0 var(--spec-2),
    inset 1px 0 0 color-mix(in srgb, var(--sk-project-day-shadow-1, color-mix(in srgb, var(--sk-ink) 45%, var(--sk-ramp-3))) 2.5%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 34%, transparent),
    inset 0 -26px 40px -32px var(--pool-hot),
    var(--elev-2);
}
body[data-skin-family="glass"] :is(.project-day, .pipeline-stage, .sb-queue)::before {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--sk-project-day-fill-1, color-mix(in srgb, var(--sk-ink) 69%, var(--sk-ramp-3))) 16%, transparent) 0%,
    color-mix(in srgb, var(--sk-a3) 7%, transparent) 26%,
    transparent 58%);
  opacity: 0.55;
}
/* required: the base hover replaces `background` wholesale and would flatten the card */
body[data-skin-family="glass"] .pipeline-stage.is-settable:hover {
  background:
    radial-gradient(circle at 82% 8%, var(--pool-cool), transparent 30%),
    radial-gradient(circle at 12% 96%, var(--pool-hot), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--sk-deep) 25%, var(--sk-surface)) 0%, var(--surf-raised-1) 100%);
}

/* ---- 11. the RIGHT RAIL cards ----------------------------------------------------------
   Hugo: "we are missing the purple edge on the right side, our one completely gets lost.
   There is not enough separation between the panels and the bacgkound on the right."
   The card fill and the page ground were literally the SAME two hex values, so the contrast
   between a panel and the page behind it was ZERO. Lift the fill off the ground, and put
   violet on the right and bottom edges as inset rings (an inset shadow costs no layout). ---- */

/* ---- 12. the BOTTOM-RIGHT cards, incl. TODAY'S NOTES -----------------------------------
   Hugo: "Bottom Todays note panel, we dont have that purple inside glow purple colour noise.
   Same for the panels on the bottom right."
   Three faults: the fill matched the page exactly; the violet pool was centred 4% BELOW the
   card's bottom edge at 6% alpha, so almost none of it landed inside; and the grain tile
   lived on body::before only, where every card's opaque fill hid it completely. The tile is
   now the card's own topmost layer. ---- */

/* ---- 13. the 1px ring on every card ----------------------------------------------------
   The ring gradient ran 135deg and was fully transparent by 58%, so the RIGHT and BOTTOM
   edges received literally nothing. That one rule is why the purple edge disappeared. Carry
   the gradient all the way to the bottom-right and stop crushing it with opacity. The ring's
   own 1px geometry (inset / padding / mask) is untouched. ---- */

/* ============================================================================================
   16 Sep 2026 - DONUT, pass 3. Judged against mockup_01.png side by side.
   Three faults in what pass 2 produced:
     1. #FFFFFF at 55% turned the per-arc sheen into a hard white PINSTRIPE drawn along the
        outside of every arc. The mockup has no drawn line at all - the highlight is a soft
        brightening across the top of the tube. Drop the sheen to a low-alpha white so the
        same 50/55% mixes land near 20% instead of 55%.
     2. The arcs barely glow. The mockup's bands blaze onto the panel behind them. The halo
        must also stay inside the SVG's clearance (r=78 + half-stroke 5.5 = 83.5 of a 100
        half-viewport, so ~16 user units, about 23px at the desktop size) or overflow:hidden
        cuts it into a square, which is the same fault that boxed the shot-row rings.
     3. The disk inside the ring was tinted so far toward violet that it read as a purple
        plate. In the mockup it is near-black with only a breath of the arc colour.
   ============================================================================================ */

/* the small shot-row ring has only 1px of clearance, so it can carry no halo at all */

/* the track is the empty part: it keeps its contact line and must never glow */

/* near-black disk, only a breath of arc colour */

/* the rim around the empty track. The OUTER line was reading as a drawn circle over the
   arcs, so it drops to a whisper; the INNER line carries the separation. */

/* the arcs' bright stop was a mid-tone, so the band never reached the near-white peak the
   mockup shows where the tube catches the light */

/* ============================================================================================
   DONUT, pass 4 - colours read straight off mockup_01.png with a radial ray through the band.
   RIGHT ray through the cyan arc: #41A4D6 #30B2F3 #4EC6F8 #67DFFD, then a 20px fall-off
   #2A6D99 #172C4C #13223D #111B31 back to the panel #10111F.
   DOWN-LEFT ray through the magenta arc: #AE6EE8 #A85BF6 #AA5EF4 #E8AFFF, then #773CB0
   #341458 #2A1545 #24123B. The disk under it is #1B102A - violet-tinted, not black.
   So: the bands are SATURATED with a near-white outer lip, the bloom is wide, and pass 3's
   pastel hi stops were washing the colour out. ---- */

/* the disk under the ring is violet-tinted in the mockup, not neutral black */

/* ---- DONUT, pass 5. Side by side the bands were reading pale-lavender where the mockup is a
   saturated purple, and the 1px outer-edge line still read as a drawn white outline rather
   than the band's own lit lip. Pull the bright stops back off white and drop the sheen. ---- */

/* ---- STAT DISCS, pass 2. Hugo: "The icons are very very bad and too small compared to the
   mockup". Measured off mockup_01.png: the disc is ~48px and the glyph fills ~57% of it with
   a heavy neon stroke and a real bloom; ours filled 50% with a 1.5 hairline and no light.
   --tb-chip-glyph defaults to 24px, so nothing but this skin moves. ---- */

/* ============================================================================================
   16 Sep 2026 - PASS 6. Every number below was READ OFF mockup_01.png with a radial profile
   through the ring at nine angles (scratchpad/ring-profile2.js), not judged by eye.

   What the profile actually says, cyan arc at 3 o'clock, inner edge outward:
     #2D8BBA #3CCDFF #27B4F1 #2EBCF6 #45CAF9 #6EE5FE #64E7FD #45CBF6 #3689B5
     then 43 36 37 33 29 27 25 24 22 21 21 20 -- the panel is 20.
   Two things follow, and we had both of them wrong.

   1. THE SHARP WHITE GLASS HIGHLIGHT is INSIDE the stroke, not a line drawn outside it.
      The band peaks near-white about two thirds of the way across (#6EE5FE on cyan,
      #F188FD on magenta at 7:30, #91EAFD at 1:30) and is DARKER at both edges. We were
      drawing a 1px grey ring past the outer edge, which reads as an outline, so the last
      pass dropped it to 14% and it vanished. It comes back as a bright, tight band sitting
      on the outer third of the stroke.

   2. THE GLOW IS TIGHT. Luminance falls 120 -> 20 within about 11px. Ours ran 4px/10px/20px
      at 70/40/22 percent, which is why Hugo says the glows are "way too soft and blurry,
      and they are EVERYWHERE". The halo is now short and bright instead of wide and weak.
   ============================================================================================ */
body[data-skin-family="glass"] {
  /* the specular. Near-white, high alpha: this is the glass catch-light, and the
     profile peaks at luminance 206-216 against a panel of 20. */
  --donut-sheen-base: color-mix(in srgb, var(--sk-light) 92%, transparent);
}

/* A SHORT, BRIGHT halo. The widest layer is 11px because that is exactly where the
   mockup's fall-off reaches the panel; past that the mockup has nothing at all. */

/* The unmasked bloom copy is the wide soft part Hugo is objecting to. It stays, because
   it is what puts light on the PANEL, but it drops to a quarter strength and a tighter
   blur so it reads as spill rather than fog. */

/* ---- THE EMPTY TRACK -----------------------------------------------------------------
   The profile at 10:30 reads, inner to outer:
     #867C91(128) #7E7587(120) #DAD5DF(215) #BDB2C7(182) #0D0615(9) #0A0414(6) #74737B(116) #716981(108)
   So the track is NOT a soft grey ring: it is a BLACK body with a bright light-grey rim
   on BOTH edges, about 1px each, at luminance 110-215. Ours was a 30%-alpha blue wash and
   read as a smudge. These stops are placed on the real geometry: r=78, stroke 11 in a 200
   viewBox, so the band spans 72.5..83.5 of a 100 half-viewport. ---- */

/* ---- THE ARC COLOURS ------------------------------------------------------------------
   Straight off the profile. The lo stop is the dim inner edge, mid the body, hi the
   near-white lip the light catches. ---- */

/* ---- THE PROGRESS BAR -----------------------------------------------------------------
   Same correction: the bar's bloom was a 44px fog. In the mockup the bar is a tight tube
   with a bright top lip and light concentrated AT THE ENDS. ---- */

/* ---- THE PANELS -----------------------------------------------------------------------
   Hugo: "in the panels, we have some overal inside glow now that is too uniform, we're
   missing some large scale noise to break it up... and looks like every panel is the same
   rather than just some having that glow inside."
   Two faults. The inner glow was a full-width band across the bottom of every card, so six
   identical cards each wore the same violet smile. And the grain tile is 160px of fine
   fractal noise, which at this size reads as flat film grain rather than the LARGE, slow
   mottling the mockup has.
   Fix: the glow becomes an off-centre pool, not a band; the grain gets a second, much
   COARSER layer (baseFrequency 0.012 over a 520px tile) to break the uniformity; and only
   the cards that should carry a pool get one. ---- */

/* ONLY Today's Notes carries the violet pool, and it is an off-centre ellipse in the
   bottom-left corner rather than a band across the whole width. */

/* The rail cards keep a QUIETER inside glow, in the top-right, so the six cards do not
   all read as the same object. */

/* ---- THE MENU BUTTONS -----------------------------------------------------------------
   Hugo: "looks like we're missing some animation when click on the menu items."
   That is my regression. The base transitions `background`, and CSS cannot interpolate
   between two GRADIENTS - so making both the resting and the hover state a gradient killed
   the fade stone dead. Flat rgba colours animate; the glass comes from the box-shadow,
   which is added to the transition list. ---- */

/* The specular is ~2px of a 9px band in the mockup, i.e. a fifth of the stroke. At our
   scale (stroke 11 in a 200 viewBox) that is a bit over 2 units. stroke-width is ink
   weight: the circle's radius and the ring's geometry do not move. */

/* ============================================================================================
   STAT DISCS, pass 3 - measured, not judged (scratchpad/disc-measure.js reads both images).
     MOCKUP disc 1  glyph peak #F1BDFB L205   rim #584080 L74   fill #3E1B83
     MOCKUP disc 2  glyph peak #59F1FF L210   rim #223453 L50   fill #1D2C4D
     MOCKUP disc 3  glyph peak #F9AEFE L196   rim #5C306D L62   fill #321A41
     OURS   disc 1  glyph peak #AA6AC3 L126   rim #1A1630 L25   fill #2B1E44
   So the glyph is not actually SMALLER than the mockup's - the inked glyph is 34% of the
   disc against the mockup's 30-38%. It reads small because it is DIM: luminance 126 against
   205, on a rim of 25 against 74. The fix is light, not size: a pale tinted glyph instead of
   a mid tone, a rim three times brighter, and a more saturated fill. The glyph does go up
   28 -> 32px as well, because Hugo asked for larger and that lands at ~40% inked.
   ============================================================================================ */

/* the glyph is a neon tube: pale core, tight bloom in its own colour */

/* hue = the disc wash, rim = the lit edge, glyph = the pale tube. Straight off the mockup. */

/* ---- the EMPTY ASSET PLACEHOLDER -------------------------------------------------------
   Hugo: "what happened to the nice placeholder images with the text in the middle and nice
   gradient that we used to have?" The base frame is a flat 10%-alpha wash with a dashed
   hairline, which on a dark skin is a grey box. It gets a real graded surface, a soft pool
   in the skin's own violet, and a rim that reads as an empty SLOT rather than a broken
   image. `border-color` only - the shorthand would resize every card. ---- */

/* a real image must still cover the gradient, so only the EMPTY frame is painted */
body[data-skin-family="glass"] .prop-frame[style*="url"] { background-image: none; }

/* ---- the SPECULAR is the arc's own colour ----------------------------------------------
   A white sheen on a cyan tube reads as a cream pinstripe laid over the band. The mockup's
   catch-light is the pale end of the tube's own hue - the profile peaks at #6EE5FE on cyan
   and #F188FD on magenta. Set per arc, so each one lights in its own colour. ---- */

/* The track rim was drawn at 0.88/0.80 alpha and read as an outline ringing the whole
   donut, including the lit part. In the mockup it only separates the BLACK part from the
   panel. Pull both edges well down, and pull the outer one inside the band so the arcs
   cover it where they are. */
body[data-skin-family="glass"]:not([data-ui-tier="s"]) .tb-donut {
  /* (17 Sep 2026) the first stop is the dark disc inside the ring on a solid stats band */
  background:
    radial-gradient(circle closest-side at 50% 50%,
      color-mix(in srgb, var(--stats-band-disc) calc(var(--sk-stats-solid) * 100%), transparent) 0 71.9%,
      color-mix(in srgb, var(--sk-tb-donut-fill-1, color-mix(in srgb, var(--sk-ink) 63%, var(--sk-page))) 42%, transparent) 72.3%,
      color-mix(in srgb, var(--sk-tb-donut-fill-1, color-mix(in srgb, var(--sk-ink) 63%, var(--sk-page))) 42%, transparent) 73.0%,
      transparent 73.4% 82.8%,
      color-mix(in srgb, var(--sk-tb-donut-fill-2, color-mix(in srgb, var(--sk-deep) 44%, var(--sk-ink))) 34%, transparent) 83.1%,
      color-mix(in srgb, var(--sk-tb-donut-fill-2, color-mix(in srgb, var(--sk-deep) 44%, var(--sk-ink))) 34%, transparent) 83.7%,
      transparent 84.1%);
}

/* ============================================================================================
   16 Sep 2026 - PANELS ARE GLASS, NOT PAINT. Hugo: "the gradients inside glow i asked for the
   bottom right panel, that should actually come from the background image, as the panels
   should be transparent, so we get nice variations but all panel components are the same.
   it's just what we see through it that gives it's variation."
   He is right, and it is how all six of his mockups are built: one photographic backdrop, and
   every panel the SAME piece of glass laid over it. What I had built was the opposite - each
   card carrying its own baked gradient - which is exactly why he said "every panel is the
   same rather than just some having that glow inside": a baked pool is identical everywhere,
   while a backdrop gives each panel whatever happens to sit behind it.
   So every per-card pool comes out. One translucent tint, one blur, one edge. The variation
   is the page.
   ============================================================================================ */
body[data-skin-family="glass"] .right-column .rc-card,
body[data-skin-family="glass"] .footer-row .rc-card,
body[data-skin-family="glass"] .footer-row .notes-card {
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
}
/* The page panels follow the same rule, so the whole app reads as one material.
   (17 Sep 2026, the review of Paradise Found Dark) --sk-panels-solid also reaches these (60/70% -> 92%, the
   design tokens' panel opacity: over a bright photo a 60% panel read pale and every muted text on it
   failed), and the bottom stop is a slot, --sk-glass-panel-lo-1 (default: the a4-tinted dark it was -
   a bright amber a4 turned the foot of every page olive). The name is not --sk-glass-fill-5: neon sets
   that one for another rule. */
body[data-skin-family="glass"] :is(.glass, .glass-dark, .view-page) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sk-glass-fill-4, color-mix(in srgb, var(--sk-page) 93%, var(--sk-ramp-2))) calc(60% + var(--sk-panels-solid) * 32%), transparent) 0%, color-mix(in srgb, var(--sk-glass-panel-lo-1, color-mix(in srgb, var(--sk-a4) 12%, var(--sk-dark))) calc(70% + var(--sk-panels-solid) * 22%), transparent) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
}
/* The backdrop needs something to BE. Until a project sets its own photo through the style
   builder, this is a large, slow, off-centre wash in the skin's own colours - the same shape
   a photo would give, so the panels have variation to pick up either way. A project backdrop
   replaces it: applyProjectStyle writes background-image inline, which wins over this. */
body[data-skin-family="glass"]::before {
  background-image:
    radial-gradient(70% 55% at 78% 8%, color-mix(in srgb, var(--sk-page-before-fill-2, color-mix(in srgb, var(--sk-a3) 76%, var(--sk-deep))) 42%, transparent), transparent 70%),
    radial-gradient(60% 50% at 12% 88%, color-mix(in srgb, var(--sk-page-before-fill-3, color-mix(in srgb, var(--sk-a1) 80%, var(--sk-dark))) 30%, transparent), transparent 72%),
    radial-gradient(45% 40% at 92% 92%, color-mix(in srgb, var(--sk-page-before-fill-4, color-mix(in srgb, var(--sk-a2) 83%, var(--sk-a4))) 20%, transparent), transparent 70%),
    radial-gradient(90% 70% at 50% 45%, color-mix(in srgb, var(--sk-page-before-fill-5, color-mix(in srgb, var(--sk-a3) 24%, var(--sk-deep))) 30%, transparent), transparent 80%),
    linear-gradient(180deg, color-mix(in srgb, var(--sk-page) 98%, var(--sk-light)) 0%, var(--sk-page) 100%);
}

/* ---- the DONUT SPECULAR, last correction --------------------------------------------------
   The separate 1px ring reads as a drawn pinstripe no matter what colour it is, because it
   sits at a fixed radius whether or not the band under it is bright there. The mockup has no
   such line: the band ITSELF peaks near-white two thirds across. So the ring goes away in
   this skin and the brightness moves into the arc gradients, where it belongs. ---- */

/* ============================================================================================
   16 Sep 2026 - pass 7. Hugo: "the icons WERE SMALL definitely, cant you see the size
   difference??" He is right and my measurement was not trustworthy: I sized the disc by its
   LIT AREA, which includes the outer glow, so ours came out looking as big as the mockup's
   when the solid disc plainly is not. Where a measurement and the person looking at both
   images disagree this plainly, the measurement is the thing that is wrong.
   48 -> 60px disc, 32 -> 38px glyph. The stat row's height comes from its label/number/sub
   stack, which is taller than either, so the disc re-centres rather than growing the row.
   ============================================================================================ */

/* ---- THE BACKDROP ----------------------------------------------------------------------
   Hugo: "I added the backdrop image but it didnt do anything." That was me. The fallback
   wash I added is painted by body::before, which sits ON TOP of the body's own background -
   and a project's backdrop photo is written inline onto the body by applyProjectStyle. So
   the photo was loading and being covered up.
   The wash now only paints when there is NO project photo. App.jsx stamps
   `has-backdrop-image` on the body whenever it writes one. ---- */
/* (17 Sep 2026 review) a tint chosen in Settings (has-style-veil, backdrop.css) is the user's own and wins */
body[data-skin-family="glass"].has-backdrop-image:not(.has-style-veil)::before {
  background-image: none;
  background-color: transparent;
}

/* ---- THE MENU BUTTONS ------------------------------------------------------------------
   Hugo: "menu buttons animation is absolute trash, what is this. cant you make something
   nicer?" The last pass only restored a background cross-fade, which is nothing.
   This is a real interaction: an accent bar wipes in from the left edge, the surface lifts
   and warms, the icon brightens, and a soft glow blooms - all on one easing curve so they
   read as one movement. The bar is an inset box-shadow with a negative spread that grows to
   zero, so it WIPES rather than fading, and it costs no layout and no extra element. ---- */

body[data-skin-family="glass"] .nav-item .nav-icon {
  transition: color 190ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 190ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* the press: the surface sinks instead of lifting, and the bar snaps wide */
body[data-skin-family="glass"] .nav-item:active {
  transition-duration: 70ms;
}

/* ============================================================================================
   THE DONUT'S BORDER, pass 8. Hugo: "this donut STILL doesnt look like i want with the border
   i showed you."
   Two reasons it was not landing.
   1. The rim was drawn at 0.42 / 0.34 alpha. The radial profile of the mockup's empty track
      reads #867C91(128) #7E7587(120) #DAD5DF(215) #BDB2C7(182) then BLACK (9, 6) then
      #74737B(116) #716981(108) - luminance 110 to 215 against a panel of 20. That is a BRIGHT,
      crisp line, not a hint. I dimmed it to stop it ringing the lit part, which fixed the wrong
      problem.
   2. It only ever applied to the desktop tier. The mobile card draws the ring with stroke 17
      instead of 11, so its band sits at different radii and the rule was excluded outright -
      on a narrow window there was no border at all.
   The stops below are computed from the real geometry in both cases:
     desktop  r=78, stroke 11  -> band 72.5..83.5 of a 100 half-viewBox
     mobile   r=78, stroke 17  -> band 69.5..86.5
   ============================================================================================ */

/* ============================================================================================
   16 Sep 2026 - PASS 9, against the mockup's own topbar crop side by side.

   Hugo: "The overview panel needs its glass effect where we see through. Doesnt look see
   through at all... The donut colours are way too faded compared to the mockup one. The
   overal bar in the mockup is much much nicer, we need to copy exactly that... The right
   side of the bar needs to be transparent exactly the same. Icons need to be more vibrant,
   be proper nice icons, not faded, not blurry."

   Every one of those is a real fault and three of them are mine:
     - the glass pass covered .glass / .glass-dark / .view-page and the rail and footer
       cards, but the overview panel is .topbar, which is none of those. It kept its old
       opaque fill, so the backdrop could not come through the one panel that matters most.
     - the arc gradients' bright stops were pushed to pastel (#FBC0FF, #BFF6FF) while I was
       chasing the specular. The radial profile of the mockup says #F188FD and #6EE5FE -
       saturated, not washed out.
     - the progress track was painted #040714, a solid black slab. In the mockup the unfilled
       part is a faint translucent groove you can see the panel through.
   ============================================================================================ */

/* ---- 1. the OVERVIEW PANEL joins the glass family --------------------------------------- */

/* the darkening disk behind the ring has to let the panel through as well, or the donut
   sits on an opaque plate in the middle of a transparent panel */

/* ---- 2. the ARCS are SATURATED ----------------------------------------------------------
   Straight off the radial profile, no interpretation:
     cyan    #2D8BBA -> #3CCDFF -> #6EE5FE
     magenta #6F3297 -> #BB3FF6 -> #F188FD
   The empty track in the mockup is a MID GREY ring, clearly lighter than the disk inside it.
   I had it at #07080F, near black, after Hugo's note that the BAR's empty part is black -
   that was about the bar, not the ring. ---- */

/* ---- 3. the PROGRESS BAR ----------------------------------------------------------------
   The groove is translucent, so the panel and the backdrop read through the unfilled part
   exactly as they do in the mockup. The fill keeps its bright top lip and a tight halo. ---- */

/* ---- 4. the STAT DISCS: vibrant, crisp, not blurry ---------------------------------------
   The glyph bloom ran 1.5 / 5 / 11px, which at a 38px glyph is more halo than glyph - that is
   the "blurry". The core drop-shadow comes right in so the stroke stays sharp, and the rim
   goes from a muted mix to a real lit ring. The mockup's fourth stat is GREEN, not blue. ---- */

/* DELIVERED is green in the mockup, not blue */

/* ---- 5. the two SHOT-ROW icon sets become ONE family -------------------------------------
   They were built at different times and shared nothing: 22px circles with 11px glyphs at
   1.9 stroke on one side, 24x26 rounded squares with 13px glyphs at 1.8 (and one at 2.4) on
   the other, different borders, different washes, one with a hover lift and one without.
   One size, one radius, one wash, one border, one hover. ---- */
body[data-skin-family="glass"] :is(.shot-cut-toggle, .shot-link-toggle, .sqa-btn) {
  background: color-mix(in srgb, var(--sk-light) 4.5%, transparent);
  border-color: color-mix(in srgb, var(--sk-shot-cut-toggle-line-1, color-mix(in srgb, var(--sk-ink) 49%, var(--sk-line))) 20%, transparent);
  color: color-mix(in srgb, var(--sk-shot-cut-toggle-ink-1, color-mix(in srgb, var(--sk-ink) 88%, var(--sk-ramp-3))) 72%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sk-light) 6%, transparent);
}
body[data-skin-family="glass"] :is(.shot-cut-toggle, .shot-link-toggle, .sqa-btn):hover {
  background: color-mix(in srgb, var(--sk-shot-cut-toggle-fill-1, color-mix(in srgb, var(--sk-ramp-0) 86%, var(--sk-light))) 14%, transparent);
  border-color: color-mix(in srgb, var(--sk-shot-cut-toggle-line-2, color-mix(in srgb, var(--sk-ramp-0) 86%, var(--sk-light))) 55%, transparent);
  color: color-mix(in srgb, var(--sk-a1) 11%, var(--sk-light));
  box-shadow: 0 0 10px color-mix(in srgb, var(--sk-a1) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--sk-light) 12%, transparent);
}

/* ============================================================================================
   16 Sep 2026 - PRECISION CORRECTION PASS, overview component only.
   Values below are taken verbatim from Hugo's spec, not invented.

   The one conceptual correction that drives all four fixes:
       CURRENT: dark CSS components with blur added
       TARGET:  crisp luminous components embedded in smoked translucent glass
   So: do not make the glow larger. Make the CORE sharper and brighter, then let a much
   weaker glow fall away from it. Layer 1 crisp geometry, layer 2 bright edge, layer 3
   2-5px strong, layer 4 6-12px moderate, layer 5 15-25px faint bloom. We were skipping
   layers 2 and 3 and jumping straight from object to a wide blur, which is why it read as
   soft rather than luminous.

   Geometry is untouched throughout: no diameter, position, column, padding, radius,
   font or DOM change.
   ============================================================================================ */

/* ── 1-5. THE DONUT ────────────────────────────────────────────────────────────────────────
   The empty portion must NOT be a thick opaque grey band. It is a dark translucent plum
   track with a thin edge on BOTH sides, and those edges run the full 360 degrees - which is
   why the reference ring still reads as a complete circle where there is no progress. The
   acceptance test: hide the coloured arc and a full circular track must still be visible. */

/* The arc: sharp core first, then 5px strong, 10px moderate, 22px faint. No blur on the
   stroke itself, so the geometry stays crisp and the light sits OUTSIDE it. */

/* the track must not glow at all, or the empty part stops reading as empty */

body[data-skin-family="glass"] .pring.pring :is(path, circle) {
  filter: drop-shadow(0 0 2px color-mix(in srgb, color-mix(in srgb, var(--ring-mid, var(--leaf)) calc(var(--sk-ring-glow-own) * 100%), var(--sk-ring-glow-1, var(--leaf))) 55%, transparent));
}
body[data-skin-family="glass"] .pring.pring circle:not([stroke-dasharray]) {
  stroke: var(--sk-ring-track-1, var(--donut-track));
  filter: none;
}
/* a skin may fill the 4K ring's centre (the mockup's finished ring is a solid disc) and give its
   number its own colour; without those slots nothing changes */
body[data-skin-family="glass"] .pring[data-stage="UPSCALED"] circle:not([stroke-dasharray]) { fill: var(--sk-ring-upscaled-core-1, none); }
body[data-skin-family="glass"] .pring[data-stage="UPSCALED"] text { fill: var(--sk-ring-upscaled-num-1, var(--ink)); }
body[data-skin-family="glass"] .pring[data-stage="UPSCALED"] tspan + tspan { fill: var(--sk-ring-upscaled-num-1, var(--ink-muted)); }
/* the status pill's dot may carry a rim (the mockup's dots are small rings) */
body[data-skin-family="glass"] .shot-pill-dot { box-shadow: var(--sk-pill-dot-ring-1, none); }
/* the 1-2px brighter internal line along the arc, back on and tinted per arc */
body[data-skin-family="glass"] .tb-donut-sheen { stroke: currentColor; }

/* the arc ramp: magenta -> violet -> indigo -> cyan, as specified */

/* the disk inside the ring belongs to the glass, not to a plate */

/* ── 6-10, 26. THE OVERVIEW PANEL: SMOKED GLASS ───────────────────────────────────────────
   Dark tinted glass, not clear and not frosted white. Legible, with subtle optical depth -
   the hero photograph must NOT be obviously visible through it. The colour inside the panel
   comes from broad pools with huge falloff, so they never read as circles: neon light
   reflecting through smoked glass. */
body[data-skin-family="glass"] .topbar {
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  border-color: color-mix(in srgb, var(--sk-topbar-line-1, color-mix(in srgb, var(--sk-line) 72%, var(--sk-page))) 32%, transparent);
}
/* the faint reflection the glass catches across its upper edge. It should barely register. */
body[data-skin-family="glass"] .topbar::after {
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--sk-topbar-fill-1, color-mix(in srgb, var(--sk-ink) 81%, var(--sk-ramp-2))) 9%, transparent),
    color-mix(in srgb, var(--sk-topbar-fill-2, color-mix(in srgb, var(--sk-ink) 36%, var(--sk-ramp-3))) 5.5%, transparent),
    transparent);
}
/* the column dividers disappear into the panel until you look for them */

/* ── 11-16. THE METRIC ICONS ──────────────────────────────────────────────────────────────
   The hierarchy is NUMBER > ICON > LABEL, and ours had icon at about number. The disc comes
   down to 44px from 60 and the glyph to 19px from 38, the stroke to a monoline 1.6, and the
   glow becomes a crisp luminous perimeter (2 / 7 / 15) instead of a 20-30px haze. */

body[data-skin-family="glass"] .tb-chip {
  /* (17 Sep 2026) on a solid stats band the disc is a solid disc of its hue, as the mockup draws it.
     It reads the skin's own choice (--stats-disc-solid, taken on the body), so the discs keep that
     material on the phone, whose band is always glass (see "THE PHONE BAND") */
  background: radial-gradient(circle,
    color-mix(in srgb, var(--chip-hue, var(--sk-a3)) calc(24% + var(--stats-disc-solid) * 72%), transparent),
    color-mix(in srgb, var(--chip-hue, var(--sk-a3)) calc(12% + var(--stats-disc-solid) * 84%), transparent));
  color: var(--chip-glyph, var(--sk-tb-chip-ink-1, color-mix(in srgb, var(--sk-ink) 21%, var(--sk-ramp-2))));
  box-shadow:
    inset 0 0 0 1px var(--chip-rim, color-mix(in srgb, var(--sk-tb-chip-shadow-1, color-mix(in srgb, var(--sk-a3) 30%, var(--sk-ramp-2))) 40%, transparent)),
    inset 0 0 10px color-mix(in srgb, var(--chip-hue, var(--sk-a3)) 8%, transparent),
    0 0 2px color-mix(in srgb, var(--chip-hue, var(--sk-a3)) 65%, transparent),
    0 0 7px color-mix(in srgb, var(--chip-hue, var(--sk-a3)) 24%, transparent),
    0 0 15px color-mix(in srgb, var(--chip-hue, var(--sk-a3)) 8%, transparent);
}
body[data-skin-family="glass"] .tb-chip svg {
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--chip-hue, var(--sk-a3)) 35%, transparent));
}

/* (17 Sep 2026) each stat disc's hue is a slot too (default: the accent it always read), so a skin can
   match a mockup whose discs are not its accents */
body[data-skin-family="glass"] .tb-chip--firstpass { --chip-hue: var(--sk-tb-chip-firstpass-chip-hue-1, var(--sk-a1)); --chip-rim: color-mix(in srgb, var(--sk-tb-chip-firstpass-chip-rim-1, color-mix(in srgb, var(--sk-a1) 79%, var(--sk-light))) 40%, transparent); --chip-glyph: var(--sk-tb-chip-firstpass-chip-glyph-1, color-mix(in srgb, var(--sk-a1) 48%, var(--sk-light))); }
body[data-skin-family="glass"] .tb-chip--concept   { --chip-hue: var(--sk-tb-chip-concept-chip-hue-1, var(--sk-a3)); --chip-rim: color-mix(in srgb, var(--sk-tb-chip-concept-chip-rim-1, color-mix(in srgb, var(--sk-a3) 30%, var(--sk-ramp-2))) 40%, transparent); --chip-glyph: var(--sk-tb-chip-concept-chip-glyph-1, color-mix(in srgb, var(--sk-ink) 21%, var(--sk-ramp-2))); }
body[data-skin-family="glass"] .tb-chip--render    { --chip-hue: var(--sk-tb-chip-render-chip-hue-1, var(--sk-a4)); --chip-rim: color-mix(in srgb, var(--sk-tb-chip-render-chip-rim-1, color-mix(in srgb, var(--sk-ramp-1) 3%, var(--sk-ramp-3))) 40%, transparent); --chip-glyph: var(--sk-tb-chip-render-chip-glyph-1, color-mix(in srgb, var(--sk-ramp-3) 68%, var(--sk-light))); }
body[data-skin-family="glass"] .tb-chip--completed { --chip-hue: var(--sk-tb-chip-completed-chip-hue-1, var(--sk-a2)); --chip-rim: color-mix(in srgb, var(--sk-tb-chip-completed-chip-rim-1, color-mix(in srgb, var(--sk-a2) 66%, var(--sk-ink))) 40%, transparent); --chip-glyph: var(--sk-tb-chip-completed-chip-glyph-1, color-mix(in srgb, var(--sk-ramp-4) 61%, var(--sk-light))); }
body[data-skin-family="glass"] .tb-chip--upscale   { --chip-hue: var(--sk-tb-chip-upscale-chip-hue-1, color-mix(in srgb, var(--sk-ramp-4) 72%, var(--sk-dark))); --chip-rim: color-mix(in srgb, var(--sk-tb-chip-upscale-chip-rim-1, color-mix(in srgb, var(--sk-ramp-4) 80%, var(--sk-dark))) 40%, transparent); --chip-glyph: var(--sk-tb-chip-upscale-chip-glyph-1, color-mix(in srgb, var(--sk-line) 39%, var(--sk-ramp-4))); }
body[data-skin-family="glass"] .tb-chip--total     { --chip-hue: var(--sk-tb-chip-total-chip-hue-1, var(--sk-a3)); --chip-rim: color-mix(in srgb, var(--sk-tb-chip-total-chip-rim-1, color-mix(in srgb, var(--sk-a3) 30%, var(--sk-ramp-2))) 40%, transparent); --chip-glyph: var(--sk-tb-chip-total-chip-glyph-1, color-mix(in srgb, var(--sk-ink) 21%, var(--sk-ramp-2))); }
body[data-skin-family="glass"] .tb-chip--days      { --chip-hue: var(--sk-tb-chip-days-chip-hue-1, var(--sk-a1)); --chip-rim: color-mix(in srgb, var(--sk-tb-chip-days-chip-rim-1, color-mix(in srgb, var(--sk-a1) 79%, var(--sk-light))) 40%, transparent); --chip-glyph: var(--sk-tb-chip-days-chip-glyph-1, color-mix(in srgb, var(--sk-a1) 48%, var(--sk-light))); }
body[data-skin-family="glass"] .tb-chip--hours     { --chip-hue: var(--sk-tb-chip-hours-chip-hue-1, var(--sk-a2)); --chip-rim: color-mix(in srgb, var(--sk-tb-chip-hours-chip-rim-1, color-mix(in srgb, var(--sk-a2) 66%, var(--sk-ink))) 40%, transparent); --chip-glyph: var(--sk-tb-chip-hours-chip-glyph-1, color-mix(in srgb, var(--sk-ramp-4) 61%, var(--sk-light))); }
body[data-skin-family="glass"] .tb-chip--status-ontrack,
body[data-skin-family="glass"] .tb-chip--status-ahead  { --chip-hue: var(--sk-tb-chip-status-ontrack-chip-hue-1, color-mix(in srgb, var(--sk-ramp-4) 72%, var(--sk-dark))); --chip-rim: color-mix(in srgb, var(--sk-tb-chip-status-ontrack-chip-rim-1, color-mix(in srgb, var(--sk-ramp-4) 80%, var(--sk-dark))) 40%, transparent); --chip-glyph: var(--sk-tb-chip-status-ontrack-chip-glyph-1, color-mix(in srgb, var(--sk-line) 39%, var(--sk-ramp-4))); }
body[data-skin-family="glass"] .tb-chip--rejected,
body[data-skin-family="glass"] .tb-chip--status-behind { --chip-hue: var(--sk-tb-chip-rejected-chip-hue-1, var(--sk-a1)); --chip-rim: color-mix(in srgb, var(--sk-tb-chip-rejected-chip-rim-1, color-mix(in srgb, var(--sk-a1) 79%, var(--sk-light))) 40%, transparent); --chip-glyph: var(--sk-tb-chip-rejected-chip-glyph-1, color-mix(in srgb, var(--sk-a1) 48%, var(--sk-light))); }
/* (17 Sep 2026, Midnight Lavender review) the Health disc of a project with no start date or deadline
   ("No deadline", tb-chip--status-nodeadline) had no rule: it fell back to a3 and the base glyph, 1.3:1
   on a solid band. Its hue and glyph are slots (default: exactly that fallback) */
body[data-skin-family="glass"] .tb-chip--status-nodeadline { --chip-hue: var(--sk-tb-chip-status-nodeadline-chip-hue-1, var(--sk-a3)); --chip-glyph: var(--sk-tb-chip-status-nodeadline-chip-glyph-1, var(--sk-tb-chip-ink-1, color-mix(in srgb, var(--sk-ink) 21%, var(--sk-ramp-2)))); }
/* (17 Sep 2026) the days, hours and rejected/behind discs have glyph slots too (default: the glyph
   they always had): a solid band paints every disc in its hue, and a pale disc needs a dark glyph in
   every mode, not only in the four discs Pipeline shows. Their hues are slots as well (default: a1, a2,
   a1), so a mockup with dark tinted discs can keep every mode in its own palette */

/* ── 18-24. THE PROGRESS BAR ──────────────────────────────────────────────────────────────
   A neon tube in a dark recessed channel, not a blurred gradient. The channel stays clearly
   bounded, the fill sits INSIDE it rather than filling the capsule edge to edge, it carries
   a 1-2px near-white hot core, and the first few pixels of glow are far brighter than the
   outer bloom. NEON is a crisp object with light around it, never a blurred object. */

/* Hugo: "there appears to be extra marker/indicator geometry around the progress endpoint...
   The target progress bar simply ends cleanly." Those are the two stacked chevrons. */
body[data-skin-family="glass"] .tb-progress-marker { opacity: 0; }

/* ============================================================================================
   16 Sep 2026 - PASS 11.

   "The panel is STILL not glass at all. its completely opaque."
   The cause is one line in the BASE sheet, not the alpha: styles/topbar.css:16 sets
   `isolation: isolate` on .topbar. That makes the element its own Backdrop Root, and a
   backdrop-filter can only sample what is painted behind it UP TO the nearest backdrop
   root - which is now itself. So the blur had nothing to sample and the panel rendered as
   flat paint no matter how transparent I made it. Every alpha I tried was landing on an
   empty backdrop.
   ============================================================================================ */
body[data-skin-family="glass"] .topbar { isolation: auto; }

/* The layers between the panel and the page photo have to let it through as well, or
   there is nothing to see even once the filter works. */
body[data-skin-family="glass"] .main-content { background-image: none; }
body[data-skin-family="glass"] .app-shell { background-image: none; }

/* ---- THE DONUT -------------------------------------------------------------------------
   Four separate faults, all real.

   1. "the donut background is completely opaque for some reason, not dark and transparent
      like the mockup" - the disk inside the ring was still painting a fill. It is now
      almost entirely transparent, so the glass and the backdrop read through the middle of
      the ring exactly as they do through the rest of the panel.
   2. "we need to invert the colours, the bottom bar should be purple and the top bar should
      be cyan" - the two arc palettes are swapped. The arcs are drawn biggest-first from 12
      o'clock clockwise, so the BIGGER arc is the one that starts at the top; it takes cyan
      and the smaller one takes purple.
   3. "dont you see that the border of the empty part is taking the colour of the bar that is
      coming? there is a purple bleed on the border bars" - correct, and it was mine: I made
      the two track edges rgba(170,92,194) and rgba(203,106,220), which are purple. In the
      mockup they are a neutral cool grey. Purple removed.
   4. "why do we have some purple glow bleeding on the empty part at the START of the donut?"
      - the arc's near glow was at 65%, which spilled anticlockwise off its start cap onto
      the empty track. Pulled back so the light stays with the band.
   ---- */

/* INVERTED: the big arc that starts at 12 o'clock is cyan, the smaller one purple */

/* ---- THE METRIC ICONS, sized off the two crops at matched scale --------------------------
   Hugo: "the icons here are STILL garbage, dont you see how big they are in the mockup
   compare to our tiny ones?? Match exactly the mockup."
   In his side-by-side the mockup's disc is about 29% of the donut's outer diameter and ours
   was 19%. Our ring measures 235px, so the disc wants to be ~68px, not 44. The earlier
   "42-46px" came from a spec written against a different crop; the two images side by side
   settle it. Disc 64px, glyph 28px, and the stroke stays monoline so it does not turn back
   into a chunky HUD button. ---- */
/* (18 Sep 2026) these sizes - disc 64px, glyph 28px, stroke 1.8 - are now every skin's, in tokens.css
   and topbar.css (Hugo: "all of the presets should have the new big ones"), so the family no longer
   sets them. */

/* ---- THE PROGRESS BAR, put back -----------------------------------------------------------
   Hugo: "WHAT THE HELL happened to the progress bar??? It was perfect before in terms of
   height, now we have some stupid purple border and the inside bar is too thin."
   Both are mine. I masked the fill's top and bottom with 3px inset shadows to make it "sit
   inside the channel", which just made it thin; and I put a 1px rgba(104,112,155,.35) ring
   on the channel, which over a magenta fill reads as a purple border. In the mockup the tube
   FILLS the capsule - there is no visible channel around the lit part at all. The channel
   only shows where the bar has not reached. ---- */
body[data-skin-family="glass"] .tb-bottom-group .tb-progress {
  /* (17 Sep 2026) on a solid stats band the groove is the band's own track colour; on glass it is a
     slot, --sk-bar-track-1 (default: the see-through dark it always was) */
  background: color-mix(in srgb, var(--sk-bar-track-1, color-mix(in srgb, color-mix(in srgb, var(--sk-page) 60%, var(--sk-dark)) 55%, transparent)), var(--stats-band-track) calc(var(--sk-stats-solid) * 100%));
}

/* ============================================================================================
   16 Sep 2026 - PASS 12, against Hugo's 55% / 72% pair.

   "the overview panel is STILL NOT FUCKING GLASS"
   The isolation fix was necessary but not sufficient: backdrop-filter blurs what is BEHIND
   an element, it does not make the element transparent - the background's own alpha does
   that. Mine was rgba(25,27,47,0.82) with five radial pools stacked on top, which is very
   nearly solid. 0.82 came from the written spec, but that spec assumed a backdrop was
   already showing. It is not a glass value. Down to 0.58, with the pools halved so they
   stop adding opacity of their own.

   "the donut has exactly the same issues, not transaprent and no bleed of the colours onto
   the border. Empty part is still not dark enough."
   Three things, and the third is a correction of my last change:
     - the disk behind the ring still painted a fill; it is gone entirely, so the panel and
       the photo read straight through the middle of the ring;
     - the empty track was rgba(45,41,68,0.42), which over that disk read as a mid grey ring.
       In the 72% mockup the empty part is barely lighter than the panel itself;
     - the colour bleeding onto the track's border IS the arc's own glow washing over the
       piece of track next to it. I cut that glow back last pass because Hugo asked why there
       was PURPLE bleeding at the start - but that was the arcs being the wrong way round.
       Now that the top arc is cyan, the bleed is correct and wanted, so it goes back up.
   ============================================================================================ */

/* nothing behind the ring at all - the middle of the donut is the panel */
body[data-skin-family="glass"] .tb-donut-darken { background: none; }

/* the empty track sits just above the panel, not a grey band on top of it */

/* the two hairlines stay neutral and faint; the COLOUR on them comes from the arc glow
   washing across, which is what the mockup actually shows */

/* the glow goes back up: this is what paints the arc's colour onto the neighbouring track */
body[data-skin-family="glass"] :is(.tb-donut, .pring) :is(path, circle) {
  filter:
    drop-shadow(0 0 5px color-mix(in srgb, var(--leaf) 62%, transparent))
    drop-shadow(0 0 11px color-mix(in srgb, var(--leaf) 34%, transparent))
    drop-shadow(0 0 24px color-mix(in srgb, var(--teal) 14%, transparent));
}
body[data-skin-family="glass"] :is(.tb-donut, .pring) circle:not([stroke-dasharray]) { filter: none; }

/* ============================================================================================
   16 Sep 2026 - THE OPAQUE PANEL, found at last.
   Hugo: "OMG let's FOCUS on this overview bar, it is still completely opaque. no
   transparency, no background blur, litterally full on opaque."
   He was right every single time and I kept tuning the wrong element. The panel itself was
   already transparent - .topbar computes to rgba(0,0,0,0) with a working backdrop-filter.
   The culprit is its CHILD: .tb-right is 1330px of the panel's 1620px, and it paints
   `linear-gradient(180deg, #0C1020, #081018)` - solid hex, no alpha at all. A slab over
   82% of the panel. Every alpha I tuned on the parent was being painted straight over.
   (The base rule says as much in a comment at styles/topbar.css:214: ".tb-right paints its
   own solid cream gradient over its zone." It is doing exactly what it says.)
   It now carries only a whisper of tint, so the glass and the photo read through the whole
   panel and not just the 290px strip around the donut.
   ============================================================================================ */

/* the left zone is transparent already, but pin it so a later base change cannot reintroduce
   a fill behind the donut */
body[data-skin-family="glass"] .tb-left { background: none; }

/* ============================================================================================
   16 Sep 2026 - PASS 13, and this time the causes were ENUMERATED before anything was
   changed (CLAUDE.md 14.a). A DOM walk listed every painter inside .topbar by area, and a
   second pass listed every separator with its computed value. Three faults, three named
   causes, no guessing.

   1. "There is some sort of dark gradient covering the left side of the overview bar, on the
      right of the donut."
      CAUSE: styles/themes.css:2028 - body[data-theme="neon"] .topbar::before paints
      linear-gradient(135deg, rgba(235,45,168,0.55) 0%, rgba(19,186,243,0.3) 22%, ...
      transparent 65%). It is a FULL-PANEL overlay, 1620x290, at 55% in the top-left corner.
      Over a dark panel that magenta-into-cyan wash reads exactly as a dark gradient over the
      left side. It was written when the panel was opaque and a corner sheen made sense; on
      glass it is a stain. Down to a whisper.

   2. "we completely lose the one between the donut and the bar"
      CAUSE: there was never an ELEMENT for that line. The separation used to be the hard
      edge of .tb-right's opaque slab against the transparent .tb-left. I made .tb-right
      translucent, so the edge went with it. Confirmed in the DOM: .tb-left border-right and
      .tb-right border-left both compute to "0px none". It gets a real line, as an inset
      shadow so it costs no layout.

   3. "The columns separater are a bit too faint between the colunns"
      CAUSE: mine - I set them to rgba(135,145,185,0.10) in the precision pass, which is
      below the threshold of visible on this panel. The three of them (.tb-stats-row::before
      at x320, ::after at x641, .tb-col-sep at x961) go up to 0.22.
   ============================================================================================ */
body[data-skin-family="glass"] .topbar::before {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--sk-topbar-fill-3, color-mix(in srgb, var(--sk-a1) 87%, var(--sk-dark))) 10%, transparent) 0%,
    color-mix(in srgb, var(--sk-topbar-fill-4, color-mix(in srgb, var(--sk-a2) 73%, var(--sk-a4))) 5%, transparent) 22%,
    transparent 48%,
    transparent 100%);
}

/* ---- THE ASSET PLACEHOLDER, the way Paradise Found does it ------------------------------
   Hugo: "why on earth are these mockup placeholders?? Look at the nice ones we have on
   Paradise found, why didnt do the same but just recoloured to match the new one?"
   Right on both counts. The app ALREADY has the good placeholder - src/Views.jsx:3338
   renders the asset's initials on a tinted tile whenever there is no image, which is the
   Coffee Cup card he is pointing at. I had (a) put generated picture tiles into the bench's
   data, which covered it, and (b) dressed the frame in a violet gradient and a dashed edge
   instead of just recolouring what was already there.
   So: one clean tinted tile, a soft edge, big centred initials. Same design, neon palette. */
body[data-skin-family="glass"] .prop-frame {
  background-color: color-mix(in srgb, var(--sk-prop-frame-fill-1, color-mix(in srgb, var(--sk-ramp-2) 22%, var(--sk-surface))) 34%, transparent);
  background-image: none;
  border-color: color-mix(in srgb, var(--sk-prop-frame-line-1, color-mix(in srgb, var(--sk-a4) 28%, var(--sk-line))) 16%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sk-prop-frame-shadow-1, color-mix(in srgb, var(--sk-ramp-3) 14%, var(--sk-light))) 5%, transparent);
}
body[data-skin-family="glass"] .prop-frame .character-thumb-initials {
  color: color-mix(in srgb, var(--sk-prop-frame-ink-1, color-mix(in srgb, var(--sk-ink) 76%, var(--sk-ramp-2))) 42%, transparent);
  text-shadow: none;
}

/* ---- THE MENU BUTTONS, Paradise Found's design recoloured -------------------------------
   Hugo: "This is not how it used to be... what we had on paradise found was better, i want
   the same buttons but recoloured."
   He is right. Paradise Found's active item is ONE pill: a soft vertical gradient, a 1px
   ring that runs bright on the LEFT and fades to a glass highlight on the right, and a top
   specular. I had bolted on a hard 3px left bar AND an outer 1px magenta ring AND a purple
   slab - three outlines at once, which is why his screenshot shows two buttons that both
   look selected. Same three layers as Paradise Found, magenta instead of gold. ---- */

/* the resting and hover states stay QUIET, so neither can be mistaken for the selection */
body[data-skin-family="glass"] .nav-item {
  transition: background 190ms cubic-bezier(0.2, 0.8, 0.2, 1), color 190ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body[data-skin-family="glass"] .nav-item:hover .nav-icon { color: color-mix(in srgb, var(--sk-a1) 48%, var(--sk-light)); filter: none; }

/* ============================================================================================
   16 Sep 2026 - THE DONUT BLEED, cause found and named.
   Hugo, twice: "no bleed of the colours onto the border" and "start of the bars have some
   sort of purple glow bleeding to the left over the empty area, we should have that."
   MEASURED: walking the ring one degree at a time, the mockup's saturation at the arc's
   boundary is 80 and dies over 4 degrees. Ours is FLAT at 28-29 across the entire empty
   sector - literally zero bleed, not too little.
   CAUSE: six clips stacked, and no amount of alpha could ever have beaten them.
     - ringMask leaves 0.6 user units (0.85 device px) outside the arc's painted edge, and
       by the SVG model it runs AFTER the filter, so it cuts the already-blurred result;
     - donutAA's filter region is x=-5% width=110% of the bbox - TIGHTER than the -10%/120%
       default - leaving 7.3px, so every CSS drop-shadow on an arc is discarded past that;
     - the per-arc halo is BLACK and masked to the silhouette of the LONGER arcs, written
       expressly so it "never [renders] on the empty dark track";
     - and the one group that sits outside all of it, the bloom copy, was at opacity 0 -
       my own change, four declarations of --donut-bloom with the last one winning at 0.
   FIX: the bloom copy is the mechanism. It now paints AFTER the arcs in screen blend, so it
   only ever adds light, and it is on. Everything else is left alone.
   ============================================================================================ */

/* ============================================================================================
   16 Sep 2026 - pass 29. TWO measured faults, named before anything was changed.

   A. THE DONUT BLEED, part two. Pass 28 turned the bleed ON; this pass gives it the mockup's
      SHAPE. Walking both rings one degree at a time (centre + radius found by a circle vote,
      then checked by drawing the circle back onto the image - the first fit was wrong and was
      thrown away):
        mockup   past the arc's end: sat 61 -> 38 -> 20, at the floor by +35 deg;
                 floor #090719, luminance 9.
        ours     past the arc's end: sat 63 -> 41 -> 36, still coloured at +70 deg;
                 floor #0F1328, luminance 20.
      So the core is right and TWO things are wrong: the wash runs twice as far round the ring,
      and the dead part of the track is twice as bright as the mockup's.
      Hugo said exactly this in the correction pass: "Do not make the glow larger. Make the
      luminous CORE sharper and brighter, then let a much weaker glow fall away from it."
        1. the arc glow stack was 5 / 11 / 24px. The 24px layer is what smears colour most of
           the way round; on a ring of radius 76 user units it is 18 degrees wide before its
           tail. It becomes a tight bright core plus one weak fall-off.
        2. the track goes dark, so the far side of the ring reads as black like the mockup's.
      Scoped to .tb-donut ONLY. The shot rows use the same selector through .pring and Hugo
      called those "GREAT" - they are not touched.

   B. THE MENU BUTTONS. Hugo: "You still have that weird edge that you added last round which
      i didnt like. the buttons look NOTHING like the paradise founds."
      CAUSE, found by listing every rule that matches and reading the cascade rather than
      guessing: styles/sidebar.css:267 `.nav-list .nav-item.active { background:none; box-shadow:none }`
      is the neutraliser that lets the travelling slider be the only highlight. Its specificity
      is (0,3,0). themes.css:7435 `body[data-theme="neon"] .nav-item.active` is (0,3,1) - one
      point higher - so under neon the item STILL paints its own opaque slab, a hard 3px solid
      #FF2ED1 left bar and a hard 1px magenta ring, on top of the slider. That hard bar and
      ring ARE the "weird edge". No other skin does this: mono, ice, slate, crimson and ember
      all fall through to the plain slider with one or two soft layers.
      FIX: neutralise it at matching specificity, later in the file, and bring the slider's own
      ring down to Paradise Found's intensity. Same structure, much less shouting.
   ============================================================================================ */

/* --- A1. a sharp core and a weak fall-off, instead of one wide smear ------------------------ */

body[data-skin-family="glass"] .tb-donut circle:not([stroke-dasharray]) { filter: none; }

/* --- A2. the bloom copy: brighter core, tighter spread -------------------------------------- */

/* --- A3. the empty track goes as dark as the mockup's, but stays see-through ----------------- */

/* --- B1. under neon the item must not paint its own highlight any more ---------------------- */
body[data-skin-family="glass"] .nav-item.active {
  background: none;
  border-color: transparent;
  box-shadow: none;
}

/* --- B2. the travelling pill, at Paradise Found's intensity ---------------------------------
   PF's ring runs cream -> gold -> foil -> almost nothing. Neon's ran 0.95 pink -> 0.75 magenta,
   which at 1px reads as a drawn outline rather than a lit edge. Same six stops, same angle,
   roughly half the alpha, so the shape survives and the shouting stops. */

/* ============================================================================================
   16 Sep 2026 - pass 30. THE DONUT, seen side by side at matched size instead of sampled.
   Cropping both rings to the same multiple of their OWN radius and scaling them to the same
   box makes the real difference obvious, and it is not the glow:

     mockup  the empty part is a THIN PALE LINE on the panel. There is no dark band at all.
             The arc is a fat lit tube that sits on that line, and near the arc the line
             takes the arc's colour.
     ours    the empty part is a FAT BLACK BAR the same width as the arc, with two almost
             invisible edge hairlines (alpha 0.16 / 0.22) lost inside it.

   That is what Hugo has been describing all along - "the donut background is completely
   opaque", "no bleed of the colours onto the border", "the border of the empty part is
   taking the colour of the bar that is coming". The bar IS the fault. Pass 29 made the
   track DARKER, which is the wrong direction: it turned the bar blacker.

   So the track steps almost all the way out of the way and the two edge hairlines come up to
   where they read as a fine drawn line. With the band gone, the bloom's screen pass lands on
   those lines and tints them near the arcs, which is the bleed the mockup shows.
   ============================================================================================ */

/* the empty part is barely a tint on the panel, not a band painted over it.
   (17 Sep 2026) --sk-donut-track-1 sets it exactly (default: that tint); the band's copy is below */
body[data-skin-family="glass"] { --donut-track: var(--sk-donut-track-1, color-mix(in srgb, color-mix(in srgb, var(--sk-deep) 97%, var(--sk-ramp-0)) 20%, transparent)); }

/* the two edge lines carry the shape now, so they have to be visible on their own */

/* with no black band to fight, the bloom does not need to shout */

/* ============================================================================================
   16 Sep 2026 - pass 31. THE SHOT MODAL under neon. Hugo: "Shot modal somehow a bit too dark,
   we are loosing a lot of the panels and the text is dark, and also why is there a scroll
   bar?? something is too tall somewhere. And the Progress buttons are still green and yellow,
   doesnt match what we have in the donnuts for shot status."
   Every cause below was read out of the cascade first, not guessed.

   1. GREEN AND YELLOW STEPPER. styles/modal.css:543/544 paint the dots from --ok and --warn.
      themes.css:435/437 set those to #22d3a6 and #f0b429 for neon and nothing later touches
      them, while the donut reads a completely separate --donut-*-lo/mid/hi ramp. So the
      stepper was never on the donut's palette at all. It is not fixed by moving --ok/--warn
      (those two mean "success" and "warning" across the whole app); the stepper gets the
      donut's own colours directly.

   2. LOST PANELS. tokens.css:181 --mix-light is #FFFFFF; themes.css:370 makes it #5a606b for
      neon. About twenty panels inside this modal fill themselves with
      color-mix(var(--mix-light) 40-70%, transparent) - white over cream in the base skin,
      mid-grey over near-black here, which disappears. Again the token stays (it is used
      everywhere); the modal's own surfaces get a fill that works on a dark card.

   3. DARK TEXT. modal.css uses nine ink tokens that no neon block redefines, so they keep
      their base values - #6B4E00 gold, #06303A lock, #2A5A6E blue, #10151C grey and so on.
      Those are legible on cream and invisible on near-black. They are colour-only tokens,
      so the skin remaps them.

   4. THE SCROLLBAR. This one is NOT new and NOT a neon fault: modal.css:918 caps the card at
      92vh, :29 sets overflow-y auto and :41 sets scrollbar-gutter: stable, so the gutter is
      reserved in every skin, Paradise Found included. What neon changed is the THUMB colour -
      modal.css:44-56 builds it from --hi / --nav-active / --tan-deep, which neon turns into
      #868a93 / #eb2da8 / #761654, i.e. a bright magenta strip. It goes quiet.
   ============================================================================================ */

/* --- 1. the stepper walks the donut's ramp: settled = cyan, in-flight = magenta ------------- */

@keyframes pulseNeonStep {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sk-a1) 22%, transparent), 0 0 14px color-mix(in srgb, var(--sk-a1) 45%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--sk-a1) 10%, transparent), 0 0 20px color-mix(in srgb, var(--sk-a1) 30%, transparent); }
}
body[data-skin-family="glass"] .stepper-step.future .step-circle {
  background: color-mix(in srgb, var(--sk-light) 6%, transparent);
  border-color: color-mix(in srgb, var(--sk-stepper-step-line-1, color-mix(in srgb, var(--sk-a4) 28%, var(--sk-ink))) 28%, transparent);
  color: color-mix(in srgb, var(--sk-stepper-step-ink-1, color-mix(in srgb, var(--sk-ink) 83%, var(--sk-line))) 55%, transparent);
}
body[data-skin-family="glass"] .stepper-line { background: color-mix(in srgb, var(--sk-stepper-line-fill-1, color-mix(in srgb, var(--sk-a4) 28%, var(--sk-ink))) 22%, transparent); }
body[data-skin-family="glass"] .stepper-step.done .step-label,
body[data-skin-family="glass"] .stepper-step.current .step-label { color: var(--sk-stepper-step-ink-2, color-mix(in srgb, var(--sk-ramp-3) 9%, var(--sk-light))); }
body[data-skin-family="glass"] .step-label { color: color-mix(in srgb, var(--sk-step-label-ink-1, color-mix(in srgb, var(--sk-a4) 14%, var(--sk-ink))) 62%, transparent); }

/* --- 2. the modal's own panels come back ---------------------------------------------------- */
body[data-skin-family="glass"] :is(.meta-block, .md-chip, .md-vidpath-btn, .md-cut-toggle,
                            .vs-addlib-btn, .copy-btn, .addlib-tab, .addlib-search,
                            .crumb-back) {
  background: color-mix(in srgb, var(--sk-light) 5.5%, transparent);
  border-color: color-mix(in srgb, var(--sk-meta-block-line-1, color-mix(in srgb, var(--sk-a4) 20%, var(--sk-ink))) 16%, transparent);
  color: var(--sk-meta-block-ink-1, color-mix(in srgb, var(--sk-a4) 8%, var(--sk-ink)));
}
body[data-skin-family="glass"] :is(.md-chip, .md-vidpath-btn, .md-cut-toggle, .vs-addlib-btn,
                            .copy-btn, .addlib-tab, .crumb-back):hover {
  background: color-mix(in srgb, var(--sk-md-chip-fill-1, color-mix(in srgb, var(--sk-ramp-0) 86%, var(--sk-light))) 12%, transparent);
  border-color: color-mix(in srgb, var(--sk-a1) 35%, transparent);
  color: color-mix(in srgb, var(--sk-a1) 6%, var(--sk-light));
}
body[data-skin-family="glass"] .md-frame-edit {
  background: color-mix(in srgb, var(--sk-a1) 16%, transparent);
  border-color: color-mix(in srgb, var(--sk-a1) 55%, transparent);
  color: color-mix(in srgb, var(--sk-a1) 6%, var(--sk-light));
}
body[data-skin-family="glass"] :is(.shotedit-input, .modal-action-edit, .modal-vo-edit) {
  background: color-mix(in srgb, color-mix(in srgb, var(--sk-a4) 11%, var(--sk-dark)) 72%, transparent);
  border-color: color-mix(in srgb, var(--sk-shotedit-input-line-1, color-mix(in srgb, var(--sk-a4) 20%, var(--sk-ink))) 22%, transparent);
  color: var(--sk-shotedit-input-ink-1, color-mix(in srgb, var(--sk-a4) 3%, var(--sk-ink)));
}
body[data-skin-family="glass"] :is(.shotedit-input, .modal-action-edit, .modal-vo-edit):focus {
  border-color: color-mix(in srgb, var(--sk-a1) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-a1) 16%, transparent);
}
/* the card itself lifts a little off black so the panels above have something to sit on */
body[data-skin-family="glass"] .modal-card--shot {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sk-modal-card-shot-fill-1, color-mix(in srgb, var(--sk-ramp-3) 21%, var(--sk-dark))) 78%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--sk-page) 95%, var(--sk-ramp-2)) 86%, transparent) 100%);
}

/* --- 3. the ink tokens modal.css uses that no neon block had remapped ------------------------ */
body[data-skin-family="glass"] {
  --ink-gold-3: var(--sk-ink-gold-3-1, color-mix(in srgb, var(--sk-page) 20%, var(--sk-light)));
  --lock-ink: var(--sk-lock-ink-1, color-mix(in srgb, var(--sk-ramp-4) 46%, var(--sk-light)));
  --blue-5-ink: var(--sk-blue-5-ink-1, color-mix(in srgb, var(--sk-a2) 37%, var(--sk-ink)));
  --blue-3: var(--sk-blue-3-1, color-mix(in srgb, var(--sk-ramp-1) 44%, var(--sk-ramp-4)));
  --blue-2: var(--sk-blue-2-1, color-mix(in srgb, var(--sk-ramp-3) 56%, var(--sk-light)));
  --grey-1-ink: var(--sk-grey-1-ink-1, color-mix(in srgb, var(--sk-ink) 85%, var(--sk-line)));
  --red-15: var(--sk-red-15-1, color-mix(in srgb, var(--sk-deep) 26%, var(--sk-light)));
  --red-2: var(--sk-red-2-1, color-mix(in srgb, var(--sk-ramp-0) 80%, var(--sk-surface)));
  --purple: var(--sk-purple-1, color-mix(in srgb, var(--sk-a3) 47%, var(--sk-ink)));
}

/* ---- THE INFO COLOUR (17 Sep 2026, Paradise Found Dark) ----------------------------------------
   The glass family never re-pointed the app's blues: every glass skin shows forest's own (the
   "info" blues of chips, audio, review and Admin). A skin that sets --sk-info-1 re-derives them from
   it with the SAME relative formulas the paper family uses (skin-paper.css, built from tokens.css),
   and re-declares, word for word, every :root token that reads one of them (so none stays stale).
   The three blues glass already maps (--blue-2, --blue-3, --blue-5-ink) keep their own formulas.
   The rule exists only when a skin sets the slot (a style query on it), so a skin without it -
   neon, mono-teal, midnight-lavender - paints exactly what it did. It sits on the body's children:
   a style query reads the PARENT's value, and the skin sets the slot on the body. ---- */
@container style(--sk-info-1) {
  body[data-skin-family="glass"] > * {
    --blue: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.065951) calc(c * 0.91826) calc(h + 11.7321));
    --blue-4: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.181457) calc(c * 0.95533) calc(h + 12.6019));
    --blue-5: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l + 0.041448) calc(c * 0.870938) calc(h - 5.9959));
    --blue-6: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l + 0.056387) calc(c * 0.765263) calc(h + 8.57));
    --blue-7: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.266039) calc(c * 0.650562) calc(h + 9.3109));
    --blue-8: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.059139) calc(c * 1.000871) calc(h + 8.768));
    --blue-9: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l + 0.00514) calc(c * 0.954738) calc(h + 18.6976));
    --blue-10: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l + 0.090932) calc(c * 0.901023) calc(h + 11.8527));
    --blue-11: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l + 0.299682) calc(c * 0.233944) calc(h + 24.0542));
    --blue-12: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l + 0.275852) calc(c * 0.318062) calc(h + 9.8465));
    --blue-13: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l + 0.186451) calc(c * 0.580241) calc(h + 10.595));
    --blue-14: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.10493) calc(c * 0.63505) calc(h + 0.0935));
    --blue-15: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.002101) calc(c * 0.733962) calc(h - 3.4066));
    --blue-16: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.121115) calc(c * 0.738358) calc(h - 0.9704));
    --blue-17: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l + 0.050237) calc(c * 1.239289) calc(h - 8.62));
    --blue-18: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l + 0.062045) calc(c * 1.153594) calc(h - 8.0676));
    --blue-19: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l + 0.113164) calc(c * 0.865859) calc(h - 4.2201));
    --blue-20: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.238462) calc(c * 0.685002) calc(h - 2.7121));
    --blue-21: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.242929) calc(c * 0.550441) calc(h + 4.684));
    --blue-22: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l + 0.003632) calc(c * 0.49128) calc(h + 13.9712));
    --blue-23: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.169596) calc(c * 0.578588) calc(h + 1.117));
    --blue-24: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.226808) calc(c * 0.532477) calc(h + 0.6473));
    --blue-26: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.017179) calc(c * 0.836477) calc(h - 7.0115));
    --blue-27: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.12938) calc(c * 0.793674) calc(h - 1.6721));
    --blue-28: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l + 0.324191) calc(c * 0.300455) calc(h - 19.0952));
    --blue-29: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.360238) calc(c * 0.465381) calc(h + 7.0041));
    --blue-30: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l + 0.122839) calc(c * 0.566868) calc(h + 9.1226));
    --blue-31: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.058286) calc(c * 0.620892) calc(h + 12.4823));
    --blue-32: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l + 0.270244) calc(c * 0.271424) calc(h + 8.8258));
    --blue-33: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l + 0.313724) calc(c * 0.273999) calc(h + 12.2397));
    --blue-34: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.394348) calc(c * 0.421691) calc(h + 20.4782));
    --blue-35: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l + 0.187003) calc(c * 0.423301) calc(h + 7.7727));
    --blue-36: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.399852) calc(c * 0.198481) calc(h + 5.8316));
    --blue-37: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.393254) calc(c * 0.410299) calc(h - 12.7856));
    --blue-38: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l + 0.304411) calc(c * 0.306896) calc(h - 13.6391));
    --blue-39: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.424151) calc(c * 0.102567) calc(h + 5.4636));
    --blue-40: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l + 0.061813) calc(c * 0.824541) calc(h - 32.6485));
    --blue-41: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.054778) calc(c * 1.305688) calc(h + 17.0824));
    --blue-41-ink: oklch(from var(--sk-info-1, var(--sk-a3)) calc(l - 0.197243) calc(c * 1.080117) calc(h + 15.3941));
    --cat-audio: var(--blue-14);
    --ink-blue-37: var(--blue-37);
    --ink-blue-14: var(--blue-14);
    --ink-blue-23: var(--blue-23);
    --ink-blue-24: var(--blue-24);
    --ink-blue-7: var(--blue-7);
    --ink-blue-4: var(--blue-4);
    --ink-blue-3: var(--blue-3);
    --ink-blue-16: var(--blue-16);
    --ink-blue-32: var(--blue-32);
    --ink-blue-20: var(--blue-20);
    --ink-blue-21: var(--blue-21);
  }
}

/* --- 4. the scrollbar stops shouting --------------------------------------------------------- */
body[data-skin-family="glass"] .modal-card { scrollbar-color: color-mix(in srgb, var(--sk-modal-card-ink-1, color-mix(in srgb, var(--sk-line) 94%, var(--sk-dark))) 30%, transparent) transparent; }
body[data-skin-family="glass"] .modal-card::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--sk-modal-card-fill-1, color-mix(in srgb, var(--sk-line) 94%, var(--sk-dark))) 26%, transparent);
  box-shadow: none;
}
body[data-skin-family="glass"] .modal-card::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--sk-modal-card-fill-2, color-mix(in srgb, var(--sk-ink) 42%, var(--sk-line))) 38%, transparent);
}
body[data-skin-family="glass"] .modal-card::-webkit-scrollbar-track { background: transparent; }

/* ============================================================================================
   16 Sep 2026 - pass 32. The last piece of "the buttons look NOTHING like the paradise
   founds". With the hard magenta bar gone, the side-by-side shows the remaining difference:
   in Paradise Found every RESTING row is invisible - styles/sidebar.css:300 gives .nav-item a
   transparent background and a transparent border, so only the active pill is drawn. Neon had
   built each row its own grey slab (themes.css:8151, background rgba(255,255,255,0.022) plus
   two inset shadows), so the rail read as a column of boxes instead of a list of labels.
   The rows go quiet; the travelling pill stays the only thing painted.
   ============================================================================================ */
body[data-skin-family="glass"] .nav-item {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
body[data-skin-family="glass"] .nav-item:hover {
  background: color-mix(in srgb, var(--sk-nav-item-fill-1, color-mix(in srgb, var(--sk-ramp-0) 86%, var(--sk-light))) 9%, transparent);
  color: color-mix(in srgb, var(--sk-a1) 6%, var(--sk-light));
  box-shadow: none;
}
body[data-skin-family="glass"] .nav-item:active {
  background: color-mix(in srgb, var(--sk-a1) 14%, transparent);
  box-shadow: none;
}

/* ============================================================================================
   16 Sep 2026 - pass 33b. THE OVERVIEW BAR. Hugo: "the overview bar is great but it should be
   brighter on the right part. and the columns separator are completely garbage compared to
   what they were before. we need some sort of fade at the ends of the lines and some highlight
   in the middle to make it look nice and premium. litterally is just a line now. ANd we should
   have a bigger one on the sparater between the donut and the stats"

   All four faults were measured or read out of the cascade FIRST.

   1. THE SEPARATORS ARE FLAT BECAUSE THIS SKIN FLATTENED THEM.
      styles/topbar.css:294-300 draws each column divider as a gradient that fades out at both
      ends - transparent, colour at 22%, colour at 78%, transparent. themes.css:8094 replaced
      the whole thing with a single flat rgba(150,160,200,0.22). That is the regression: "what
      they were before" is the base sheet's faded gradient, and neon painted over it with one
      solid value. They get the fade back, plus a brighter core in the middle and a soft bloom,
      which is the "premium" part.

   2. THE DONUT DIVIDER HAS NEVER RENDERED, IN ANY THEME.
      MEASURED: styles/topbar.css declares `.topbar::after` TWICE - once at :41 as a 1px-tall
      reflection strip across the top, once at :76 as a full-height 3px groove at the donut
      boundary. Same selector, same specificity, so the cascade merges them per property:
      left=290px and width=3px from the second block, but height=1px from the first, which the
      second never redeclares. An absolutely positioned box with top+height+bottom all set
      drops `bottom`; with left+width+right all set it drops `right`. The used box is therefore
      3px wide by 1px tall. A speck. That is why pass 13 concluded "there was never an ELEMENT
      for that line" and reached for an inset shadow instead - the DOM walk checked the
      neighbours' borders but never this pseudo-element's computed height.
      It now has its own element (.tb-donut-sep, geometry in topbar.css, no paint by default so
      Paradise Found is untouched), and it is drawn deliberately bigger than the column ones.

   3. THE RIGHT SIDE IS DARK BECAUSE THE LIGHT WAS DELETED.
      MEASURED across the panel's real interior (x261..1979), median of a 48-row band above the
      stat labels: far left 19.7, peak 26.3 at 62% across, far right 16.0. The page GROUND just
      outside the panel on the right reads 9.1 - so at the DELIVERED end the panel lifts its
      background by only about 5, against 14 at the peak.
      CAUSE A: the winning background (themes.css:7983) has three light pools at 8%, 40% and
      74% and nothing past 74%, and its base layer runs DARKER toward the right at constant
      alpha. An earlier version (themes.css:7727) had five pools including one at 96% that lit
      exactly the DELIVERED end; it was dropped.
      CAUSE B: .tb-right covers 83% of the panel and paints a near-black wash over it
      (themes.css:8048), and its mask (topbar.css:229) is anchored at its RIGHT edge, so that
      wash is at FULL strength from 40% across to the right corner and feathers only toward the
      donut. The darkening is strongest exactly where Hugo is pointing.
      Both are fixed: the pools reach the corner again, the base layer ramps up instead of
      down, and .tb-right stops washing the stats black.
   ============================================================================================ */

/* --- 3a. the panel lights its whole width again ------------------------------------------- */
body[data-skin-family="glass"] .topbar {
  background:
    radial-gradient(120% 140% at 8% 50%, color-mix(in srgb, var(--sk-a3) 4.5%, transparent), transparent 70%),
    radial-gradient(90% 130% at 40% 40%, color-mix(in srgb, var(--sk-a2) 2.8%, transparent), transparent 72%),
    radial-gradient(90% 130% at 72% 42%, color-mix(in srgb, var(--sk-a1) 4%, transparent), transparent 72%),
    radial-gradient(100% 140% at 96% 46%, color-mix(in srgb, var(--sk-a3) 5.5%, transparent), transparent 74%),
    radial-gradient(70% 120% at 100% 58%, color-mix(in srgb, var(--sk-a2) 3%, transparent), transparent 76%),
    linear-gradient(110deg,
      color-mix(in srgb, color-mix(in srgb, var(--sk-topbar-fill-5, color-mix(in srgb, var(--sk-ramp-3) 17%, var(--sk-dark))) 44%, transparent), var(--sk-stats-surface) calc(var(--sk-stats-solid) * 100%)) 0%,
      color-mix(in srgb, color-mix(in srgb, var(--sk-topbar-fill-6, color-mix(in srgb, var(--sk-ramp-3) 17%, var(--sk-dark))) 40%, transparent), var(--sk-stats-surface) calc(var(--sk-stats-solid) * 100%)) 52%,
      color-mix(in srgb, color-mix(in srgb, var(--sk-topbar-fill-7, color-mix(in srgb, var(--sk-ramp-3) 20%, var(--sk-dark))) 44%, transparent), var(--sk-stats-surface) calc(var(--sk-stats-solid) * 100%)) 100%);
}
/* (17 Sep 2026) the stops above: with the stats band solid they ARE the band surface */

/* --- 3b. the stats zone stops painting itself black --------------------------------------- */
body[data-skin-family="glass"] .tb-right {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sk-tb-right-fill-1, color-mix(in srgb, var(--sk-ramp-3) 10%, var(--sk-light))) 2.6%, transparent) 0%,
    color-mix(in srgb, var(--sk-tb-right-fill-1, color-mix(in srgb, var(--sk-ramp-3) 10%, var(--sk-light))) 0.8%, transparent) 26%,
    transparent 58%);
}

/* --- 1. the column dividers: fade at both ends, a lit core, a soft bloom -------------------- */
body[data-skin-family="glass"] .tb-stats-row::before,
body[data-skin-family="glass"] .tb-stats-row::after,
body[data-skin-family="glass"] .tb-stats-row > .tb-col-sep {
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--sk-tb-stats-row-fill-1, color-mix(in srgb, var(--sk-line) 87%, var(--sk-ramp-3))) 5%, transparent) 14%,
    color-mix(in srgb, var(--sk-tb-stats-row-fill-2, color-mix(in srgb, var(--sk-ink) 71%, var(--sk-ramp-3))) 20%, transparent) 34%,
    color-mix(in srgb, var(--sk-tb-stats-row-fill-3, color-mix(in srgb, var(--sk-ramp-3) 22%, var(--sk-light))) 46%, transparent) 50%,
    color-mix(in srgb, var(--sk-tb-stats-row-fill-2, color-mix(in srgb, var(--sk-ink) 71%, var(--sk-ramp-3))) 20%, transparent) 66%,
    color-mix(in srgb, var(--sk-tb-stats-row-fill-1, color-mix(in srgb, var(--sk-line) 87%, var(--sk-ramp-3))) 5%, transparent) 86%,
    transparent 100%);
  box-shadow: 0 0 7px color-mix(in srgb, var(--sk-a3) 18%, transparent);
}

/* --- 2. the donut divider: the same idea, deliberately bigger ------------------------------
   Two stacked layers inside its 3px: a 1px lit core down the middle, and a wider, much dimmer
   halo either side of it, both fading out top and bottom. That is what reads as a groove
   rather than a drawn line. */

/* the old 1px hairline on .tb-right's left edge would double up with the new divider */
body[data-skin-family="glass"] .tb-right {
  box-shadow: inset 0 1px 0 var(--spec-1);
}

/* ============================================================================================
   16 Sep 2026 - pass 33a. THE SHOT ROW'S HOVER, under neon.
   Hugo: "I feel like the hover look of the shot rows isnt quite there, i want it to have a
   glass highlight on top very nice when hover, not just a border."

   He is describing it exactly. Read from the cascade before changing anything:
     - styles/shots.css:247 gives the row a flat tint, a brighter 1px inset line and a
       0 0 0 1.5px accent ring on hover;
     - but under neon themes.css:6069 REPLACES that whole hover paint (specificity 0,3,1 beats
       shots.css's 0,2,0), leaving a flat two-stop fill and a 1px edge;
     - the only thing that still reads as "hover" is styles/shots.css:257, the 135 degree foil
       RING on .shot-row::before. That ring is the border Hugo means.
   So today the row genuinely has no top-edge light at all.

   HOW IT IS BUILT. Both pseudo-elements on .shot-row are already taken - ::before is the foil
   ring (shots.css:227) and ::after is the is-generating pulse (shots.css:1328) - and the skin
   contract forbids a skin from setting position, inset or border-radius, so a skin cannot
   invent a new overlay. It does not need one: a LAYERED background paints the catch-light as
   its own gradient stop above the fill, which is a pure repaint and costs no layout. That is
   already the house idiom - themes.css:6718 does the same thing for the sidebar's nav rows,
   brightening a 180 degree wash and stepping --spec-1 up to --spec-2.

   The row only transitions `background` and `box-shadow` (shots.css:199), which is exactly
   what changes here, so it eases in rather than snapping.
   ============================================================================================ */

/* resting: a whisper of top light, so hover has somewhere to travel from */
body[data-skin-family="glass"] .shot-row {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--sk-shot-row-fill-2, color-mix(in srgb, var(--sk-ramp-3) 15%, var(--sk-light))) 3.5%, transparent) 0%,
      color-mix(in srgb, var(--sk-shot-row-fill-2, color-mix(in srgb, var(--sk-ramp-3) 15%, var(--sk-light))) 1%, transparent) 14%,
      transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--sk-row-surface) 99%, var(--sk-light)) 0%, var(--sk-row-surface) 60%, color-mix(in srgb, var(--sk-shot-row-fill-3, color-mix(in srgb, var(--sk-deep) 87%, var(--sk-line))) calc(var(--sk-row-shade) * 100%), var(--sk-row-surface)) 100%);
}

/* hover: the glass catches the light along its top edge - a crisp 1px specular, then a short
   wash that dies by a third of the way down, then the fill. Not a border. */
body[data-skin-family="glass"] .shot-row:hover {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--sk-shot-row-fill-4, color-mix(in srgb, var(--sk-ramp-3) 10%, var(--sk-light))) 11.5%, transparent) 0%,
      color-mix(in srgb, var(--sk-shot-row-fill-4, color-mix(in srgb, var(--sk-ramp-3) 10%, var(--sk-light))) 4.5%, transparent) 10%,
      color-mix(in srgb, var(--sk-shot-row-fill-4, color-mix(in srgb, var(--sk-ramp-3) 10%, var(--sk-light))) 1.4%, transparent) 24%,
      transparent 48%),
    radial-gradient(120% 90% at 50% 116%, color-mix(in srgb, var(--sk-a1) calc(var(--sk-row-pool) * 10%), transparent), transparent 70%),
    linear-gradient(180deg, var(--sk-shot-row-fill-5, color-mix(in srgb, var(--sk-ramp-3) 6%, var(--sk-row-surface))) 0%, color-mix(in srgb, var(--sk-a4) 6%, var(--sk-row-surface)) 62%, color-mix(in srgb, var(--sk-shot-row-fill-6, color-mix(in srgb, var(--sk-page) 87%, var(--sk-ramp-2))) calc(var(--sk-row-shade) * 100%), color-mix(in srgb, var(--sk-a4) 6%, var(--sk-row-surface))) 100%);
}

/* the foil ring stops being the whole event: it warms slightly instead of flashing */
body[data-skin-family="glass"] .shot-row::before {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--sk-shot-row-fill-7, color-mix(in srgb, var(--sk-ramp-0) 20%, var(--sk-light))) 30%, transparent) 0%,
    color-mix(in srgb, var(--sk-a1) 16%, transparent) 22%,
    color-mix(in srgb, var(--sk-a3) 7%, transparent) 45%,
    transparent 66%);
  opacity: 0.75;
}
body[data-skin-family="glass"] .shot-row:hover::before {
  background: linear-gradient(135deg,
    color-mix(in srgb, color-mix(in srgb, var(--sk-ramp-0) 12%, var(--sk-light)) 62%, transparent) 0%,
    color-mix(in srgb, var(--sk-a1) 40%, transparent) 18%,
    color-mix(in srgb, var(--sk-a3) 20%, transparent) 40%,
    color-mix(in srgb, var(--sk-shot-row-fill-8, color-mix(in srgb, var(--sk-deep) 30%, var(--sk-ramp-2))) 7%, transparent) 66%,
    transparent 100%);
  opacity: 1;
}

/* selected keeps its own identity, with the same catch-light so the family reads as one */
body[data-skin-family="glass"] :is(.shot-row.is-selected, .shot-row.selected) {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, color-mix(in srgb, var(--sk-a1) 7%, var(--sk-light)) 10%, transparent) 0%,
      color-mix(in srgb, color-mix(in srgb, var(--sk-a1) 7%, var(--sk-light)) 3.5%, transparent) 12%,
      transparent 40%),
    linear-gradient(180deg in srgb, color-mix(in srgb, var(--sk-shot-row-fill-9, color-mix(in srgb, var(--sk-page) 85%, var(--sk-ramp-2))) calc(var(--sk-row-shade) * 100%), var(--sk-row-selected-fill, var(--sk-row-surface))) 0%, color-mix(in srgb, var(--sk-shot-row-fill-6, color-mix(in srgb, var(--sk-page) 87%, var(--sk-ramp-2))) calc(var(--sk-row-shade) * 100%), var(--sk-row-selected-fill, var(--sk-row-surface))) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sk-shot-row-shadow-1, color-mix(in srgb, var(--sk-a1) 10%, var(--sk-ramp-0))) 32%, transparent),
    inset 0 1px 0 var(--spec-3),
    inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 32%, transparent),
    inset 0 -28px 44px -30px color-mix(in srgb, var(--sk-a1) calc(var(--sk-row-pool) * 17%), transparent),
    var(--elev-1);
}

/* ---- pass 33c. The donut divider, looked at rather than assumed.
   Shot and zoomed beside a column divider: the column ones now taper away at both ends
   exactly as asked, but this one read as ONE thin hard line the same weight as them, and
   Hugo asked for a BIGGER one. Two reasons, both visible in the crop: the lit core was a
   single pixel, and the box-shadow bloom was uniform down the whole length, which cancelled
   the fade the gradient was trying to make. So the halo moves into the background layers,
   where it can fade with everything else, and the core doubles. The element itself widened
   from 3px to 6px in styles/topbar.css - it paints nothing by default, so no other skin and
   not Paradise Found sees any of this. ---- */
body[data-skin-family="glass"] .tb-donut-sep {
  background:
    linear-gradient(180deg,
      transparent 2%,
      color-mix(in srgb, var(--sk-tb-donut-sep-fill-1, color-mix(in srgb, var(--sk-ink) 75%, var(--sk-ramp-3))) 6%, transparent) 12%,
      color-mix(in srgb, var(--sk-tb-donut-sep-fill-2, color-mix(in srgb, var(--sk-ramp-3) 16%, var(--sk-light))) 40%, transparent) 30%,
      color-mix(in srgb, var(--sk-tb-donut-sep-fill-3, color-mix(in srgb, var(--sk-ramp-3) 5%, var(--sk-light))) 86%, transparent) 50%,
      color-mix(in srgb, var(--sk-tb-donut-sep-fill-2, color-mix(in srgb, var(--sk-ramp-3) 16%, var(--sk-light))) 40%, transparent) 70%,
      color-mix(in srgb, var(--sk-tb-donut-sep-fill-1, color-mix(in srgb, var(--sk-ink) 75%, var(--sk-ramp-3))) 6%, transparent) 88%,
      transparent 98%) center / 2px 100% no-repeat,
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--sk-tb-donut-sep-fill-4, color-mix(in srgb, var(--sk-ink) 71%, var(--sk-ramp-3))) 14%, transparent) 26%,
      color-mix(in srgb, var(--sk-tb-donut-sep-fill-5, color-mix(in srgb, var(--sk-ramp-3) 28%, var(--sk-light))) 26%, transparent) 50%,
      color-mix(in srgb, var(--sk-tb-donut-sep-fill-4, color-mix(in srgb, var(--sk-ink) 71%, var(--sk-ramp-3))) 14%, transparent) 74%,
      transparent 100%) center / 4px 100% no-repeat,
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--sk-a3) 16%, transparent) 30%,
      color-mix(in srgb, var(--sk-tb-donut-sep-fill-6, color-mix(in srgb, var(--sk-ink) 6%, var(--sk-ramp-2))) 24%, transparent) 50%,
      color-mix(in srgb, var(--sk-a3) 16%, transparent) 70%,
      transparent 100%) center / 6px 100% no-repeat;
  box-shadow: none;
}

/* ============================================================================================
   16 Sep 2026 - pass 34. THE PANELS' GLASS EDGE. Hugo: "can we have some sort of sharp
   highlight as well on the panels and some top edge highglith to make it feel more like glass?"

   What a panel paints today, read out of the cascade rather than guessed: a noise tile over
   linear-gradient(180deg, rgba(20,20,40,.62), rgba(12,12,28,.72)), a 22px backdrop blur, a 1px
   violet ring, and ONE top-edge inset - rgba(235,240,255,0.10) at 1px (themes.css:7325 for the
   rail cards, themes.css:6042 via --spec-2 = 0.07 for plain .glass). A 7-10% line at 1px is
   the whole "wash": too faint to read as a lit edge, which is exactly the complaint.

   The house rule, from the skin skill's own notes: "Top edges catch light. A faint inset
   highlight on the top edge gives a panel thickness. Never pure white." .glass-dark already
   does it properly with `inset 0 1.5px 0 var(--hi) 34%` and a four-edge bevel; plain .glass
   never got it. So each panel now gets the same two-part edge:
     - a SHARP 1px catch-light, about three times the old alpha, cool white and never pure;
     - a SHORT wash falling away underneath it, drawn as an inset shadow with negative spread
       so it hugs the top edge and dies within about 8px;
     - a dark 1px under-edge, which is what makes the lit edge read as thickness rather than
       as a drawn line.
   All of it is box-shadow, so nothing resizes and no background is disturbed. The blast radius
   is deliberate: .glass, .glass-dark, .rc-card and .view-page are the whole panel family, and
   Hugo asked for "the panels", not one of them.
   ============================================================================================ */

/* the rail and footer cards */

/* every other panel, card, modal and settings section */

/* the full-page views */
body[data-skin-family="glass"] .view-page {
  box-shadow:
    0 0 0 1px var(--edge-1),
    inset 0 1px 0 color-mix(in srgb, var(--sk-view-page-shadow-1, color-mix(in srgb, var(--sk-ramp-3) 11%, var(--sk-light))) 24%, transparent),
    inset 0 9px 16px -11px color-mix(in srgb, var(--sk-view-page-shadow-2, color-mix(in srgb, var(--sk-ramp-3) 19%, var(--sk-light))) 30%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 38%, transparent),
    inset 0 -34px 52px -40px var(--pool-hot),
    var(--elev-2);
}

/* the topbar is the biggest sheet of glass on the page, so it gets the same edge */
body[data-skin-family="glass"] .topbar {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sk-topbar-shadow-1, color-mix(in srgb, var(--sk-line) 72%, var(--sk-page))) 32%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--sk-topbar-shadow-2, color-mix(in srgb, var(--sk-ramp-3) 10%, var(--sk-light))) 30%, transparent),
    inset 0 9px 16px -11px color-mix(in srgb, var(--sk-topbar-shadow-3, color-mix(in srgb, var(--sk-ramp-3) 19%, var(--sk-light))) 32%, transparent),
    inset -30px 0 46px -38px color-mix(in srgb, var(--sk-a3) 55%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 40%, transparent),
    0 1px 0 color-mix(in srgb, var(--sk-a1) 15%, transparent),
    0 0 14px color-mix(in srgb, var(--sk-a3) 5.5%, transparent),
    0 8px 24px color-mix(in srgb, var(--sk-dark) 25%, transparent);
}

/* ============================================================================================
   16 Sep 2026 - pass 36. THE DONUT, from Hugo's own zoom of the mockup.
   "the whole thing is glowing, it should only be gradual and the end of the bar that glows,
   and that glow should BLEED onto the borders like the mockup. ... Dont you see the purple
   colour of the bottom bar is bleeding onto the BORDERS of the empty part??"

   Looking at his crop: the empty part of the mockup's ring is TWO THIN LINES with darkness
   between them, and near the lit arc those two LINES turn purple and fade along the track. The
   space between them stays dark. Ours was doing the opposite - a blanket haze over the whole
   band from three stacked drop-shadows, and no colour on the lines at all.

   So the blanket glow goes, and the colour is painted where he is pointing:
     - the arcs themselves stop carrying a drop-shadow stack, which is what made "the whole
       thing" glow, and also what put a MAGENTA fringe on the cyan bar - the stack used
       --leaf for every arc regardless of the arc's own colour;
     - the bloom copy stays, tight and modest, so each bar glows in its OWN colour;
     - the END of the longest bar gets its own brighter, softer glow, which is the one place
       Hugo wants a glow;
     - and the new TRACK BLEED paints the arc's colour along the empty track's two border
       radii, fading over seventy degrees, plus a shorter run just before twelve o'clock for
       the start of the bars.
   ============================================================================================ */

/* no more blanket haze on the ring */
body[data-skin-family="glass"] .tb-donut :is(path, circle) { filter: none; }

/* each bar glows in its own colour, tightly */

/* the empty track's two border lines start neutral and dim; the bleed is what colours them */
body[data-skin-family="glass"] .tb-donut,
body[data-skin-family="glass"][data-ui-tier="s"] .tb-donut {
  background:
    radial-gradient(circle closest-side at 50% 50%,
      color-mix(in srgb, var(--stats-band-disc) calc(var(--sk-stats-solid) * 100%), transparent) 0 71.7%,
      color-mix(in srgb, var(--sk-tb-donut-fill-3, color-mix(in srgb, var(--sk-ink) 8%, var(--sk-line))) 30%, transparent) 72.1%,
      color-mix(in srgb, var(--sk-tb-donut-fill-3, color-mix(in srgb, var(--sk-ink) 8%, var(--sk-line))) 30%, transparent) 72.9%,
      transparent 73.3% 82.9%,
      color-mix(in srgb, var(--sk-tb-donut-fill-4, color-mix(in srgb, var(--sk-ink) 36%, var(--sk-line))) 36%, transparent) 83.3%,
      color-mix(in srgb, var(--sk-tb-donut-fill-4, color-mix(in srgb, var(--sk-ink) 36%, var(--sk-line))) 36%, transparent) 84.1%,
      transparent 84.5%);
}

/* ============================================================================================
   16 Sep 2026 - pass 37. THE JAGGED CORNERS. Hugo: "I still have some issue with the aliasing
   on the corners, it's jagged and not nice and smooth."

   His zoom shows the stair-steps are ON THE PINK HAIRLINE RING, not on the card's fill.

   That ring is `.glass::before` (styles/backdrop.css:77) and `.right-column .rc-card::before`,
   drawn with the gradient-border trick: `padding: 1px` plus two stacked masks combined with
   `mask-composite: exclude`. The trick works by punching a content-box hole out of a border-box
   rectangle, and at a rounded corner the two masks are each antialiased SEPARATELY - their soft
   edges do not cancel, so what survives is a run of partial pixels that reads as stair-steps.
   His browser reports devicePixelRatio 2.25, and a fractional ratio puts the 1px ring on
   half-pixels, which makes it worse again. My renders were at 1x, which is exactly why the
   corners looked clean to me and not to him.

   A `box-shadow` ring has none of this - it is drawn as a rounded-rect path and antialiases
   properly at any ratio. Each of these panels ALREADY carries one (`0 0 0 1px ...`). So the
   masked hairline stops being a hairline: the mask comes off and the pseudo-element becomes the
   soft diagonal corner sheen that the gradient was always shaped like, while the crisp edge is
   left to the box-shadow, slightly strengthened to make up for the ring that is going.

   Repaint only: `mask`, `background`, `opacity` and `box-shadow` are all allowed to a skin, and
   `padding` is untouched (a background paints the whole border box regardless).
   ============================================================================================ */

/* FIRST ATTEMPT, KEPT AS A NOTE: I took the mask off entirely, which does kill the
   stair-steps but also kills the gradient ring - and Hugo had just said "cards are great,
   they look like glass" about that exact ring. Rendered it, looked at it, and the cards had
   lost their edge. Trading a look he likes for a fault I cannot even reproduce is the wrong
   deal, so the ring stays.
   What the ring gets instead: the SMOOTH box-shadow ring underneath is strengthened so it
   carries the edge definition on its own, and the masked gradient on top drops to half
   opacity. The stepped pixels are still there in principle but they are now a faint tint
   riding on a cleanly antialiased edge, rather than the edge itself. */

/* the crisp edge now comes entirely from the box-shadow ring, which antialiases properly */

/* ============================================================================================
   16 Sep 2026 - pass 39. Hugo's round-4 list, the parts that needed no further hunting.

   "The donut bars glow should be less blurry, it's a bit soft and doesnt really feel like the
    tip is glowing."            -> the bloom and the end glow both tighten, and the end glow
                                   goes up in strength so the tip reads as the bright thing.
   "the border bleed should be longer."
                                -> 52 degrees to 96, and the lead-in before twelve o'clock from
                                   26 to 44 (in src/TopBar.jsx).
   "we lost it a bit on the donut, should be much brighter should be like a glass highlight."
                                -> the per-arc specular was a 55% tint of a 55%-alpha base,
                                   about 0.30 alpha by the time it painted. It becomes a
                                   near-white tint of each arc's own colour at full strength,
                                   which is what a catch-light on a glass tube looks like.
   "In the shot rows, the borders are not defined enough, we should have some thin border, it
    kinda blends in the bar."   -> the row's 1px ring was --edge-1, rgba(110,125,160,0.14).
                                   Barely there. It gets a real value.
   "The aliasing is still not fixed on the corners of the panels."
                                -> last pass halved the masked hairline and leaned on the
                                   box-shadow ring; still jagged for him. So the mask goes
                                   entirely - that is the thing that stair-steps - and the
                                   box-shadow ring is taken up to where it carries the edge on
                                   its own. A box-shadow is a rounded-rect path and antialiases
                                   at any device pixel ratio; a two-mask XOR hairline does not.
                                   The gradient is not lost, it just stops being a hairline and
                                   becomes the diagonal corner sheen it was always shaped like.
   ============================================================================================ */

/* --- the donut's tip, and the glass catch-light on the tube ------------------------------- */
body[data-skin-family="glass"] {
  --donut-bloom: 0.38;
  --donut-bloom-blur: 1.1px;
  --donut-endglow: 1;
  --donut-endglow-blur: 2.6px;
  --donut-bleed: 1;
  --donut-bleed-blur: 1.5px;
  /* the SHAPE of the glow, read by TopBar.jsx (it used to type these numbers in): how far the
     colour bleeds along the empty track's border lines, in how many fading steps, how fast it
     fades; the shorter lead-in before twelve o'clock; the length of the bright tip */
  --donut-bleed-span: 96;
  --donut-bleed-steps: 14;
  --donut-bleed-falloff: 1.7;
  --donut-bleed-lead-span: 44;
  --donut-bleed-lead-steps: 8;
  --donut-bleed-lead-strength: 0.8;
  --donut-bleed-stroke: 1.9px;
  --donut-endglow-span: 14;
  --donut-glow-blend: screen;
}
body[data-skin-family="glass"] .tb-donut-sheen { stroke-width: 1.9; }
body[data-skin-family="glass"] .tb-donut-sheen--arcCompleted { --donut-sheen-base: var(--sk-tb-donut-sheen-arccompleted-donut-sheen-base-1, color-mix(in srgb, var(--sk-ramp-4) 17%, var(--sk-light))); }
body[data-skin-family="glass"] .tb-donut-sheen--arcRender    { --donut-sheen-base: var(--sk-tb-donut-sheen-arcrender-donut-sheen-base-1, color-mix(in srgb, var(--sk-ramp-0) 19%, var(--sk-light))); }
body[data-skin-family="glass"] .tb-donut-sheen--arcConcept   { --donut-sheen-base: var(--sk-tb-donut-sheen-arcconcept-donut-sheen-base-1, color-mix(in srgb, var(--sk-ramp-2) 21%, var(--sk-light))); }
body[data-skin-family="glass"] .tb-donut-sheen--arcFirstPass { --donut-sheen-base: var(--sk-tb-donut-sheen-arcfirstpass-donut-sheen-base-1, color-mix(in srgb, var(--sk-a1) 19%, var(--sk-light))); }
body[data-skin-family="glass"] .tb-donut-sheen--arcUpscale   { --donut-sheen-base: var(--sk-tb-donut-sheen-arcupscale-donut-sheen-base-1, color-mix(in srgb, var(--sk-ramp-3) 23%, var(--sk-light))); }
body[data-skin-family="glass"] .tb-donut-sheen--arcRemaining { --donut-sheen-base: transparent; }

/* --- the shot row gets a border you can actually see -------------------------------------- */
body[data-skin-family="glass"] .shot-row {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sk-shot-row-shadow-2, color-mix(in srgb, var(--sk-a3) 31%, var(--sk-line))) 34%, transparent),
    inset 0 1px 0 var(--spec-1),
    inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 26%, transparent),
    inset 0 -26px 40px -34px color-mix(in srgb, var(--pool-hot) calc(var(--sk-row-pool) * 100%), transparent),
    var(--elev-1);
}
body[data-skin-family="glass"] .shot-row:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sk-shot-row-shadow-3, color-mix(in srgb, var(--sk-ramp-2) 79%, var(--sk-light))) 55%, transparent),
    inset 0 1px 0 var(--spec-3),
    inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 30%, transparent),
    inset 0 -26px 40px -32px color-mix(in srgb, var(--sk-a1) calc(var(--sk-row-pool) * 13%), transparent),
    0 2px 6px color-mix(in srgb, var(--sk-dark) 34%, transparent),
    0 14px 30px color-mix(in srgb, var(--sk-dark) 30%, transparent);
}

/* --- the panel edge: no mask, so nothing to stair-step ------------------------------------ */
body[data-skin-family="glass"] :is(.glass, .glass-dark, .view-page)::before,
body[data-skin-family="glass"] .right-column .rc-card::before,
body[data-skin-family="glass"] .footer-row .rc-card::before,
body[data-skin-family="glass"] .footer-row .notes-card::before {
  -webkit-mask: none;
  mask: none;
  -webkit-mask-composite: add;
  mask-composite: add;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--sk-glass-fill-5, color-mix(in srgb, var(--sk-ramp-3) 22%, var(--sk-light))) 10%, transparent) 0%,
    color-mix(in srgb, var(--sk-glass-fill-6, color-mix(in srgb, var(--sk-a3) 54%, var(--sk-light))) 6.2%, transparent) 20%,
    color-mix(in srgb, var(--sk-glass-fill-6, color-mix(in srgb, var(--sk-a3) 54%, var(--sk-light))) 2.2%, transparent) 42%,
    transparent 60%);
  opacity: 1;
}
body[data-skin-family="glass"] .right-column .rc-card,
body[data-skin-family="glass"] .footer-row .rc-card,
body[data-skin-family="glass"] .footer-row .notes-card {
  /* (17 Sep 2026) the 1px edge ring is a slot: --sk-right-column-line-1 (drawn at 62%) */
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sk-right-column-line-1, color-mix(in srgb, var(--sk-ramp-2) 81%, var(--sk-light))) 62%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--sk-right-column-shadow-1, color-mix(in srgb, var(--sk-ramp-3) 11%, var(--sk-light))) 32%, transparent),
    inset 0 8px 14px -10px color-mix(in srgb, var(--sk-right-column-shadow-2, color-mix(in srgb, var(--sk-ramp-3) 19%, var(--sk-light))) 40%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--sk-a3) 20%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--sk-right-column-shadow-3, color-mix(in srgb, var(--sk-ink) 69%, var(--sk-ramp-3))) 7%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 42%, transparent),
    0 0 12px color-mix(in srgb, var(--sk-a3) 16%, transparent),
    0 4px 14px color-mix(in srgb, var(--sk-dark) 34%, transparent);
}
body[data-skin-family="glass"] :is(.glass, .glass-dark) {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sk-glass-shadow-2, color-mix(in srgb, var(--sk-ink) 35%, var(--sk-line))) 44%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--sk-glass-shadow-3, color-mix(in srgb, var(--sk-ramp-3) 11%, var(--sk-light))) 28%, transparent),
    inset 0 8px 14px -10px color-mix(in srgb, var(--sk-glass-shadow-4, color-mix(in srgb, var(--sk-ramp-3) 19%, var(--sk-light))) 34%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--sk-glass-shadow-5, color-mix(in srgb, var(--sk-ink) 69%, var(--sk-ramp-3))) 6%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 40%, transparent),
    inset 0 -30px 46px -36px var(--pool-hot),
    var(--elev-2);
}

/* ============================================================================================
   16 Sep 2026 - pass 40. The rest of Hugo's round-4 list, each cause read out of the cascade.

   1. "The progress bar white sharp highlight somehow has gone dark instead."
      CAUSE, and it is the same one that ate the shot modal's panels: styles/topbar.css:713
      builds that strip from color-mix(in srgb, var(--mix-light) 95%, transparent), and
      themes.css:370 sets --mix-light to #5a606b for neon. White becomes mid grey. NO neon rule
      targets that pseudo-element at all (zero matches in themes.css), so nothing was putting
      the white back. Now one does.
   2. "The tip of the progress bar should also glow nicely."
      There is no tip element in the DOM - .tb-progress-fill-bar is a single box whose RIGHT
      edge is the tip - and the existing box-shadow is a uniform glow around the whole bar, so
      the tip never stood out. A radial layer anchored at 100% 50% of the fill puts the light
      exactly on the tip and travels with it.
   3. "The progress bar empty section should also have the same border as the donut."
      The donut's empty track is two thin lines. On a horizontal bar that is a top line and a
      bottom line, so the track gets them in the donut's own greys, plus a faint ring.
   4. "All the panels have a noise pattern now that I think we should remove."
      Nine noise tiles exist in this file and EIGHT are already dead. Exactly one paints:
      themes.css:7321, a 520px fractalNoise at 0.10 on the rail and footer cards. Its rule has
      only one gradient under it, so dropping the tile loses nothing else.
   5. "Can we remove the scrollbar on the shot section? but still have the section scrollable?"
      The scroller is .shots-list (styles/shots.css:168). The house pattern for a hidden
      scrollbar in this repo is three declarations together - scrollbar-width: none,
      -ms-overflow-style: none, and display:none/width:0/height:0 on ::-webkit-scrollbar
      (styles/footer-row.css:51). No scrollbar-gutter is set on .shots-list, so hiding the bar
      cannot shift anything that was being held open for it. Scoped to neon, because the base
      rule is shared with Paradise Found.
   6. "The left drawer is too dark and should have some sort of texture."
      MEASURED: the rail's winning background (themes.css:6766) is linear-gradient(#060A14 ->
      #040814) - BOTH STOPS OPAQUE HEX, so rgb(6,10,20) to rgb(4,8,20), which is 2 to 4 RGB
      DARKER than the page ground itself. Its backdrop-filter: blur(24px) is still declared and
      is a complete no-op, because an opaque background gives it nothing to sample. There is no
      texture on it anywhere. Making the rail translucent fixes both at once: it lifts, and the
      blur finally has the project's backdrop photo to sample, which IS the texture - which is
      what Hugo asked for in the first place ("that was my ask before I said it should come
      from the background image").
   7. "the left panel button ... should be brighter, text in the selected button should be
      white, and the border should go all around, with a more glassy and glowy feel."
      The travelling pill's ring is the same two-mask XOR trick that stair-steps, and its
      gradient fades out by 60%, so the "border" only ever covered the top-left. It becomes a
      box-shadow ring, which goes all the way round, antialiases properly and can carry a glow.
      The active label and icon go white.
   ============================================================================================ */

/* --- 1+2. the fill: white gloss restored, and a tip that glows ------------------------------ */
body[data-skin-family="glass"] .tb-bottom-group .tb-progress-fill-bar::before {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--sk-light) 92%, transparent) 0%,
    color-mix(in srgb, var(--sk-light) 52%, transparent) 45%,
    transparent 100%);
}
body[data-skin-family="glass"] .tb-bottom-group .tb-progress-fill-bar::after {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--sk-tb-bottom-group-fill-1, color-mix(in srgb, var(--sk-ink) 84%, var(--sk-ramp-4))) 40%, transparent) 0%,
    transparent 100%);
}
body[data-skin-family="glass"] .tb-bottom-group .tb-progress-fill-bar {
  box-shadow:
    0 0 2px color-mix(in srgb, var(--sk-tb-bottom-group-shadow-1, color-mix(in srgb, var(--sk-a1) 30%, var(--sk-ramp-0))) 70%, transparent),
    0 0 6px color-mix(in srgb, var(--sk-a3) 28%, transparent),
    0 0 14px color-mix(in srgb, var(--sk-a2) 10%, transparent);
}

/* --- 3. the empty section gets the donut's two border lines -------------------------------- */
body[data-skin-family="glass"] .tb-bottom-group .tb-progress {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sk-tb-bottom-group-shadow-2, color-mix(in srgb, var(--sk-ink) 36%, var(--sk-line))) 36%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--sk-tb-bottom-group-shadow-3, color-mix(in srgb, var(--sk-ink) 8%, var(--sk-line))) 30%, transparent),
    0 0 0 1px color-mix(in srgb, var(--sk-tb-bottom-group-shadow-4, color-mix(in srgb, var(--sk-line) 95%, var(--sk-page))) 20%, transparent),
    inset 0 1px 3px color-mix(in srgb, var(--sk-dark) 55%, transparent);
}

/* --- 4. the noise tile goes; the gradient under it is kept exactly ------------------------- */
body[data-skin-family="glass"] .right-column .rc-card,
body[data-skin-family="glass"] .footer-row .rc-card,
body[data-skin-family="glass"] .footer-row .notes-card {
  /* (17 Sep 2026) the lower stop is a slot too (--sk-right-column-fill-2), and --sk-panels-solid lifts both to 92% */
  background: linear-gradient(180deg, color-mix(in srgb, var(--sk-right-column-fill-1, color-mix(in srgb, var(--sk-page) 93%, var(--sk-ramp-2))) calc(62% + var(--sk-panels-solid) * 30%), transparent) 0%, color-mix(in srgb, var(--sk-right-column-fill-2, color-mix(in srgb, var(--sk-a4) 12%, var(--sk-dark))) calc(72% + var(--sk-panels-solid) * 20%), transparent) 100%);
}

/* --- 5. the shot list scrolls with no bar --------------------------------------------------- */
body[data-skin-family="glass"] .shots-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* the house pattern also sets display/width/height on ::-webkit-scrollbar, and
   test/skinContract.test.js rejects those from a skin - correctly, they are geometry. It is
   not needed here: Chromium (and therefore Brave) stops applying the ::-webkit-scrollbar
   pseudo-elements entirely once scrollbar-width is anything other than `auto`, so the two
   standard properties above hide the bar on their own. */

/* --- 6. the rail lifts, and the backdrop photo becomes its texture -------------------------- */
body[data-skin-family="glass"] .sidebar {
  background:
    radial-gradient(120% 45% at 0% 0%, color-mix(in srgb, var(--sk-a1) 10%, transparent), transparent 62%),
    radial-gradient(90% 40% at 0% 100%, color-mix(in srgb, var(--sk-sidebar-fill-1, color-mix(in srgb, var(--sk-a3) 76%, var(--sk-deep))) 10%, transparent), transparent 66%),
    linear-gradient(180deg, var(--glass-rail-top) 0%, var(--glass-rail-bottom) 100%);
  box-shadow:
    inset -1px 0 0 color-mix(in srgb, var(--sk-sidebar-shadow-1, color-mix(in srgb, var(--sk-line) 78%, var(--sk-ramp-3))) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--sk-sidebar-shadow-2, color-mix(in srgb, var(--sk-ramp-3) 14%, var(--sk-light))) 10%, transparent),
    6px 0 22px -10px color-mix(in srgb, var(--sk-dark) 60%, transparent);
}
/* the veil beside the rail was matching the rail's own colour, so the edge vanished */
body[data-skin-family="glass"] .app-shell::after {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--sk-shell-veil-1, var(--sk-deep)) 62%, transparent) 0%,
    color-mix(in srgb, var(--sk-shell-veil-1, var(--sk-deep)) 34%, transparent) 30%,
    color-mix(in srgb, var(--sk-shell-veil-1, var(--sk-deep)) 15%, transparent) 60%,
    color-mix(in srgb, var(--sk-shell-veil-1, var(--sk-deep)) 5%, transparent) 85%,
    transparent 100%);
}
/* with --sk-shell-corner: 1 the two corners the main panel's rounded edge cuts out show the RAIL,
   not the page - otherwise they read as a dark notch beside PROJECT (Hugo, 16 Sep 2026: the shape
   he spent days removing; forest's rule since d46e17e). With 0 they stay transparent, as before.
   Same veil underneath. Not on tier m: there the page
   scrolls under a fixed veil, and the corner layers would paint beside the panel's straight edge.
   Tier s hides the veil (responsive.css). */
body[data-skin-family="glass"]:not([data-ui-tier="m"]) .app-shell::after {
  background:
    radial-gradient(circle at 100% 100%, transparent calc(var(--r-shell) - var(--shell-corner-aa)), color-mix(in srgb, var(--glass-rail-top) calc(var(--sk-shell-corner) * 100%), transparent) calc(var(--r-shell) + var(--shell-corner-aa))) 0 0 / var(--r-shell) var(--r-shell) no-repeat,
    radial-gradient(circle at 100% 0%, transparent calc(var(--r-shell) - var(--shell-corner-aa)), color-mix(in srgb, var(--glass-rail-bottom) calc(var(--sk-shell-corner) * 100%), transparent) calc(var(--r-shell) + var(--shell-corner-aa))) 0 100% / var(--r-shell) var(--r-shell) no-repeat,
    linear-gradient(to right,
      color-mix(in srgb, var(--sk-shell-veil-1, var(--sk-deep)) 62%, transparent) 0%,
      color-mix(in srgb, var(--sk-shell-veil-1, var(--sk-deep)) 34%, transparent) 30%,
      color-mix(in srgb, var(--sk-shell-veil-1, var(--sk-deep)) 15%, transparent) 60%,
      color-mix(in srgb, var(--sk-shell-veil-1, var(--sk-deep)) 5%, transparent) 85%,
      transparent 100%);
}

/* --- 7. the selected button: ring all the way round, brighter, white text ------------------- */
body[data-skin-family="glass"] .nav-slider {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sk-a1) 34%, transparent) 0%,
    color-mix(in srgb, var(--sk-nav-slider-fill-1, color-mix(in srgb, var(--sk-a3) 81%, var(--sk-dark))) 20%, transparent) 60%,
    color-mix(in srgb, var(--sk-nav-slider-fill-2, color-mix(in srgb, var(--sk-a3) 63%, var(--sk-dark))) 14%, transparent) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, color-mix(in srgb, var(--sk-ramp-0) 73%, var(--sk-light)) 75%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--sk-nav-slider-shadow-1, color-mix(in srgb, var(--sk-ramp-0) 13%, var(--sk-light))) 34%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 28%, transparent),
    0 0 10px color-mix(in srgb, var(--sk-a1) 30%, transparent),
    0 0 22px color-mix(in srgb, var(--sk-a1) 16%, transparent),
    0 6px 16px color-mix(in srgb, var(--sk-dark) 34%, transparent);
}
/* the masked hairline was only ever a top-left arc, and it is the shape that stair-steps */
body[data-skin-family="glass"] .nav-slider::before {
  -webkit-mask: none;
  mask: none;
  -webkit-mask-composite: add;
  mask-composite: add;
  background: linear-gradient(160deg,
    color-mix(in srgb, color-mix(in srgb, var(--sk-ramp-0) 11%, var(--sk-light)) 20%, transparent) 0%,
    color-mix(in srgb, color-mix(in srgb, var(--sk-ramp-0) 61%, var(--sk-light)) 9%, transparent) 34%,
    transparent 62%);
}
body[data-skin-family="glass"] .nav-slider::after {
  background: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--sk-ramp-0) 6%, var(--sk-light)) 26%, transparent) 0%, transparent 52%);
}
/* (17 Sep 2026) --sk-nav-active-ink-1: the selected item's label (default: white, as Hugo asked for neon) */
body[data-skin-family="glass"] .nav-item.active,
body[data-skin-family="glass"] .nav-item.active .nav-label { color: var(--sk-nav-active-ink-1, var(--sk-light)); }
body[data-skin-family="glass"] .nav-item.active .nav-icon {
  color: var(--sk-light);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sk-a1) 55%, transparent));
}

/* ============================================================================================
   16 Sep 2026 - pass 41.

   1. "why do the panels on the bottom have such a hard outline now? doesnt feel like glass
       now. the other panels are great."
      Two things I did in one go, and only the bottom row suffers from both. Pass 39 took the
      ring up to rgba(203,136,255,0.62) so it could carry the edge on its own once the masked
      hairline came off - that is right for the rail cards, which sit on near-black. Then pass
      40 stripped the noise tile off the SAME rule, which also left the footer cards on a flat
      linear-gradient at 0.62/0.72 alpha. The footer row sits over the BRIGHT part of the
      backdrop photo, so a nearly opaque slab plus a bright hard ring reads as a sticker, not
      as glass. The two are split: the rail cards keep what Hugo likes, and the footer cards
      get a lower-alpha fill so the photo comes through, and a softer ring carrying a glow
      instead of a drawn line.

   2. "the progress bar somehow has faded colours at the left side of it ... it needs to be
       vibrant all the way through and have a glow at the tip."
      The ramp ran #FF2ED1 to #00E5FF. Measured, those are luminance 102 and 190 - cyan is
      nearly twice as bright as that magenta, so the left half looks washed out next to the
      right whatever the saturation is. The left stops go up in luminance without losing their
      hue, and the dark overlay on the bottom of the bar comes down, so the whole length reads
      at one strength and the tip glow is the only thing brighter.

   3. "Looks like the donuts colours dont have their gradient anymore, going from slightly
       darker to brighter at the tip."
      The ramps do exist but they are shallow: arcCompleted ran #FF2ED1 -> #A855F7 -> #C77DFF,
      which is luminance 102 -> 115 -> 150, and at an 11px stroke that reads as a flat band.
      Each ramp is widened at both ends - a genuinely darker `lo` and a genuinely brighter `hi`
      - so the tube shades from dark to bright the way a lit glass tube does. The gradient
      runs top-to-bottom of the donut's box, and every arc starts at twelve o'clock and ends
      lower down, so darker-at-the-start and brighter-at-the-tip falls out of that for free.
   ============================================================================================ */

/* --- 1. the footer cards become glass again ------------------------------------------------ */
body[data-skin-family="glass"] .footer-row .rc-card,
body[data-skin-family="glass"] .footer-row .notes-card {
  /* (17 Sep 2026) the lower stop is a slot too (--sk-footer-row-fill-2), and --sk-panels-solid lifts both to 92% */
  background: linear-gradient(180deg, color-mix(in srgb, var(--sk-footer-row-fill-1, color-mix(in srgb, var(--sk-a3) 9%, var(--sk-page))) calc(42% + var(--sk-panels-solid) * 50%), transparent) 0%, color-mix(in srgb, var(--sk-footer-row-fill-2, color-mix(in srgb, var(--sk-deep) 95%, var(--sk-ramp-2))) calc(56% + var(--sk-panels-solid) * 36%), transparent) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sk-footer-row-shadow-1, color-mix(in srgb, var(--sk-a3) 65%, var(--sk-light))) 24%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--sk-footer-row-shadow-2, color-mix(in srgb, var(--sk-ramp-3) 11%, var(--sk-light))) 26%, transparent),
    inset 0 8px 14px -10px color-mix(in srgb, var(--sk-footer-row-shadow-3, color-mix(in srgb, var(--sk-ramp-3) 19%, var(--sk-light))) 34%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--sk-footer-row-shadow-4, var(--sk-a3)) 12%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 34%, transparent),
    0 0 18px color-mix(in srgb, var(--sk-footer-row-shadow-5, var(--sk-a3)) 20%, transparent),
    0 6px 18px color-mix(in srgb, var(--sk-dark) 30%, transparent);
}

/* --- 2. the bar is one strength from end to end, with the tip the only brighter thing ------ */
body[data-skin-family="glass"] .tb-bottom-group .tb-progress-fill-bar {
  background:
    radial-gradient(16px 190% at 100% 50%,
      color-mix(in srgb, var(--sk-light) 92%, transparent) 0%,
      color-mix(in srgb, var(--sk-tb-bottom-group-fill-2, color-mix(in srgb, var(--sk-ink) 63%, var(--sk-ramp-4))) 58%, transparent) 34%,
      color-mix(in srgb, var(--sk-a2) 20%, transparent) 60%,
      transparent 82%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--sk-light) 30%, transparent) 0%,
      color-mix(in srgb, var(--sk-light) 9%, transparent) 26%,
      transparent 46%,
      color-mix(in srgb, var(--sk-dark) 9%, transparent) 100%),
    linear-gradient(90deg,
      var(--sk-tb-bar-ramp-0-1, var(--sk-ramp-0)) 0%,
      var(--sk-tb-bar-ramp-1-1, var(--sk-ramp-1)) 20%,
      var(--sk-tb-bar-ramp-2-1, var(--sk-ramp-2)) 42%,
      var(--sk-tb-bar-ramp-3-1, var(--sk-ramp-3)) 66%,
      var(--sk-tb-bar-ramp-4-1, var(--sk-ramp-4)) 100%);
}
/* (17 Sep 2026) each stop of the bar may take an exact colour (default: the ramp), so a skin can
   match the mockup's bar without bending the ramp every other treatment reads */

/* --- 3. each arc shades from dark at its start to bright at its tip ------------------------ */
/* ON body, NOT on the shapes. The arc colours are read by <stop> elements inside <defs>,
   and a <stop> is neither a path nor a circle - it inherits from <linearGradient> -> <defs>
   -> <svg> -> body. Putting these on `:is(path, circle)` looked right and did nothing at all;
   every existing ramp in this file is declared on the body block for exactly that reason. */

/* ============================================================================================
   16 Sep 2026 - pass 43. SECOND identical report on both of these, so CLAUDE.md 14.a applied:
   nothing was changed until every candidate had been measured in the live page.

   Hugo: "ok you didnt change the donut and progress bar at all. There is still some dark
   gradient going from the donut separator to the right that is darkening and fading things
   away. And the gradients are still not there anymore in the donut."

   RULED OUT FIRST - a stale stylesheet. The live page loads themes.css?v=82 and every gradient
   stop reads back with the new values. My last two changes DID apply; they were aimed at the
   wrong causes. Both earlier diagnoses were wrong, and each was a guess dressed up as a
   measurement: I measured the colours, not the thing doing the fading.

   1. THE DARK FADE FROM THE SEPARATOR - it is a MASK, not a colour.
      styles/topbar.css:229 gives .tb-right
        mask-image: radial-gradient(110% 135% at 100% 50%, black 72%, rgba(0,0,0,.55) 90%,
                                    transparent 100%)
      That was written to feather Paradise Found's CREAM slab into the glass donut zone. A mask
      does not darken a background - it fades EVERYTHING the element contains toward its left
      edge: the progress bar, the first stat column, and the panel light behind them. No neon
      rule ever overrode it.
      MEASURED on the bar's fill, left end rightward, the same page with the mask toggled:
        mask on   82  86  92 100 111 119 131
        mask off 128 129 131 133 134 134 136
      That fade IS "faded colours at the left side". Pass 41 blamed magenta being darker than
      cyan and brightened the stops - which could never have fixed a mask.

   2. THE DONUT GRADIENT - the ramp pointed the wrong way (fix is in src/TopBar.jsx).
      Every arc gradient runs top-to-bottom of the WHOLE ring, so a bar only sees the slice of
      the ramp at its own height, and a bar whose tip is past six o'clock climbs back toward the
      dark end - its tip comes out dimmer than its middle. The stops were never the problem.
      This switch lays each arc's ramp along its own length instead.
   ============================================================================================ */

body[data-skin-family="glass"] .tb-right {
  -webkit-mask-image: none;
  mask-image: none;
}

/* (17 Sep 2026) the direction is a CHOICE: 1 = along each arc (above); 0 = the ring's own gradient, which on
   the rotated ring runs dark at nine o'clock to bright at three - a ring lit from the right, as Paradise
   Found Dark's mockup draws it. Along an arc longer than half the ring the ramp cannot follow the arc (its
   chord ends near twelve o'clock, so one half of the ring sits at the dark stop and the other at the pale
   one). */
body[data-skin-family="glass"] { --donut-ramp-along: var(--sk-donut-ramp-along); }

/* pass 43b - the ramp now runs the right way, and at full strength its tips went PASTEL:
   arcCompleted ended on #F0A8FF, which with the catch-light on top reads as white-pink. Hugo
   asked for "slightly darker to brighter at the tip" - a lit tube, not a bleached one. So each
   ramp keeps its direction but narrows: the start is less black, and the tip is the BRIGHTEST
   SATURATED version of the bar's own colour rather than a tint of white. */
body[data-skin-family="glass"] {
  --donut-first-pass-lo: var(--sk-donut-first-pass-lo-1, color-mix(in srgb, var(--sk-a1) 69%, var(--sk-dark)));  --donut-first-pass-mid: var(--sk-donut-first-pass-mid-1, var(--sk-a1));  --donut-first-pass-hi: var(--sk-donut-first-pass-hi-1, color-mix(in srgb, var(--sk-ramp-0) 84%, var(--sk-light)));
  --donut-concept-lo:    var(--sk-donut-concept-lo-1, color-mix(in srgb, var(--sk-a3) 67%, var(--sk-dark)));  --donut-concept-mid:    var(--sk-donut-concept-mid-1, color-mix(in srgb, var(--sk-a3) 22%, var(--sk-ramp-2)));  --donut-concept-hi:    var(--sk-donut-concept-hi-1, color-mix(in srgb, var(--sk-ramp-2) 74%, var(--sk-light)));
  --donut-render-lo:     var(--sk-donut-render-lo-1, color-mix(in srgb, var(--sk-a4) 76%, var(--sk-deep)));  --donut-render-mid:     var(--sk-donut-render-mid-1, color-mix(in srgb, var(--sk-a2) 76%, var(--sk-a4)));  --donut-render-hi:     var(--sk-donut-render-hi-1, color-mix(in srgb, var(--sk-ink) 27%, var(--sk-ramp-4)));
  --donut-completed-lo:  var(--sk-donut-completed-lo-1, color-mix(in srgb, var(--sk-a1) 62%, var(--sk-page)));  --donut-completed-mid:  var(--sk-donut-completed-mid-1, color-mix(in srgb, var(--sk-a1) 52%, var(--sk-a3)));  --donut-completed-hi:  var(--sk-donut-completed-hi-1, color-mix(in srgb, var(--sk-ramp-0) 62%, var(--sk-ramp-1)));
  --donut-upscale-lo:    var(--sk-donut-upscale-lo-1, color-mix(in srgb, var(--sk-a4) 66%, var(--sk-deep)));  --donut-upscale-mid:    var(--sk-donut-upscale-mid-1, var(--sk-a4));  --donut-upscale-hi:    var(--sk-donut-upscale-hi-1, color-mix(in srgb, var(--sk-ink) 20%, var(--sk-ramp-3)));
}

/* ============================================================================================
   16 Sep 2026 - pass 44.

   1. THE PIPELINE STEPPER. Hugo: "ok this needs to be a gradient of colour that makes sense."
      Pass 31 painted every finished step one flat cyan and the current step flat magenta. That
      matched the donut's palette but not its SHAPE: the donut and the progress bar both read as
      a progression - magenta at the start, through violet and indigo, to cyan at the end - and
      the stepper IS a progression, seven stages from Prompt to 4K Upscale. So each stage now
      takes its colour from where it sits on that same ramp (the progress bar's exact stops),
      and each connecting line is a gradient from its own stage's colour to the next one's.
      The steps are plain siblings of the lines inside .pipeline-stepper - <button> for a stage,
      <div> for a line - so `:nth-of-type` counts each kind on its own without any markup
      change.

   2. THE HEADER BUTTONS. Hugo: "why couldnt you restyle those to match the new panels we have?"
      then: "somehow the Search button is perfect but the rest are not the same, and we need some
      sort of inside highligh like the panels".
      He had put his finger on it. The Search button is a different element, .ph-search-pill, and
      the neon skin NEVER touched it - so it still wears the base glass recipe. Read back from the
      live page: an almost fully clear fill (a faint radial at 30% 28%, 22% fading to 4%, over a
      4% ground), blur(14px) saturate(1.3), a warm-white bevel `inset 1px 1px 2px` at 0.35, a
      dark bevel `inset -1px -1px 2px`, a faint inner glow, soft drop shadows - and NO ring and
      no ::before at all.
      The other four ARE .ph-iconbtn / .ph-avatar, and the neon rule at themes.css:6662 had
      given them a 0.92-0.94 OPAQUE orb and a BLACK ring. That is the whole difference.
      So they take the Search pill's recipe exactly, literal for literal, their conic ::before
      ring goes (the pill has none, and it is the two-mask XOR trick that stair-steps anyway),
      and every one of them - the pill included - gets the panels' inside highlight on top: a
      crisp 1px catch-light along the top edge and a short wash that dies within a few pixels.
   ============================================================================================ */

/* --- 1. the stepper walks the progress bar's ramp ------------------------------------------ */
body[data-skin-family="glass"] .pipeline-stepper > button:nth-of-type(1) { --step-c: var(--sk-ramp-0); }
body[data-skin-family="glass"] .pipeline-stepper > button:nth-of-type(2) { --step-c: color-mix(in srgb, var(--sk-ramp-0) 15%, var(--sk-ramp-1)); }
body[data-skin-family="glass"] .pipeline-stepper > button:nth-of-type(3) { --step-c: color-mix(in srgb, var(--sk-ramp-1) 39%, var(--sk-ramp-2)); }
body[data-skin-family="glass"] .pipeline-stepper > button:nth-of-type(4) { --step-c: color-mix(in srgb, var(--sk-ramp-2) 66%, var(--sk-ramp-3)); }
body[data-skin-family="glass"] .pipeline-stepper > button:nth-of-type(5) { --step-c: color-mix(in srgb, var(--sk-ramp-3) 98%, var(--sk-ramp-4)); }
body[data-skin-family="glass"] .pipeline-stepper > button:nth-of-type(6) { --step-c: color-mix(in srgb, var(--sk-ramp-3) 49%, var(--sk-ramp-4)); }
body[data-skin-family="glass"] .pipeline-stepper > button:nth-of-type(7) { --step-c: var(--sk-ramp-4); }

body[data-skin-family="glass"] .pipeline-stepper > div:nth-of-type(1) { --line-a: var(--sk-ramp-0); --line-b: color-mix(in srgb, var(--sk-ramp-0) 15%, var(--sk-ramp-1)); }
body[data-skin-family="glass"] .pipeline-stepper > div:nth-of-type(2) { --line-a: color-mix(in srgb, var(--sk-ramp-0) 15%, var(--sk-ramp-1)); --line-b: color-mix(in srgb, var(--sk-ramp-1) 39%, var(--sk-ramp-2)); }
body[data-skin-family="glass"] .pipeline-stepper > div:nth-of-type(3) { --line-a: color-mix(in srgb, var(--sk-ramp-1) 39%, var(--sk-ramp-2)); --line-b: color-mix(in srgb, var(--sk-ramp-2) 66%, var(--sk-ramp-3)); }
body[data-skin-family="glass"] .pipeline-stepper > div:nth-of-type(4) { --line-a: color-mix(in srgb, var(--sk-ramp-2) 66%, var(--sk-ramp-3)); --line-b: color-mix(in srgb, var(--sk-ramp-3) 98%, var(--sk-ramp-4)); }
body[data-skin-family="glass"] .pipeline-stepper > div:nth-of-type(5) { --line-a: color-mix(in srgb, var(--sk-ramp-3) 98%, var(--sk-ramp-4)); --line-b: color-mix(in srgb, var(--sk-ramp-3) 49%, var(--sk-ramp-4)); }
body[data-skin-family="glass"] .pipeline-stepper > div:nth-of-type(6) { --line-a: color-mix(in srgb, var(--sk-ramp-3) 49%, var(--sk-ramp-4)); --line-b: var(--sk-ramp-4); }

body[data-skin-family="glass"] .stepper-step.done .step-circle {
  background:
    radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--sk-light) 55%, transparent), transparent 56%),
    var(--step-c, var(--sk-ramp-4));
  border-color: color-mix(in srgb, var(--step-c, var(--sk-ramp-4)) 55%, var(--sk-light));
  color: var(--sk-stepper-step-ink-3, color-mix(in srgb, var(--sk-a3) 4%, var(--sk-deep)));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sk-light) 45%, transparent),
    0 0 10px color-mix(in srgb, var(--step-c, var(--sk-ramp-4)) 50%, transparent);
}
body[data-skin-family="glass"] .stepper-step.current .step-circle {
  background:
    radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--sk-light) 60%, transparent), transparent 56%),
    var(--step-c, var(--sk-a1));
  border-color: color-mix(in srgb, var(--step-c, var(--sk-a1)) 40%, var(--sk-light));
  color: var(--sk-stepper-step-ink-3, color-mix(in srgb, var(--sk-a3) 4%, var(--sk-deep)));
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--step-c, var(--sk-a1)) 24%, transparent),
    0 0 16px color-mix(in srgb, var(--step-c, var(--sk-a1)) 55%, transparent);
  animation: pulseNeonStepRamp var(--dur-pulse) ease-in-out infinite;
}
@keyframes pulseNeonStepRamp {
  0%, 100% {
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--step-c, var(--sk-a1)) 24%, transparent),
      0 0 16px color-mix(in srgb, var(--step-c, var(--sk-a1)) 55%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 7px color-mix(in srgb, var(--step-c, var(--sk-a1)) 10%, transparent),
      0 0 24px color-mix(in srgb, var(--step-c, var(--sk-a1)) 36%, transparent);
  }
}
body[data-skin-family="glass"] .stepper-line.done {
  background: linear-gradient(90deg, var(--line-a, var(--sk-ramp-4)), var(--line-b, var(--sk-ramp-4)));
  box-shadow: 0 0 6px color-mix(in srgb, var(--line-a, var(--sk-ramp-4)) 35%, transparent);
}

/* --- 2. every header button wears the Search pill's glass, plus the panels' top highlight --- */
/* (17 Sep 2026) its base layer: --sk-ph-iconbtn-base-1, nearly opaque under --sk-panels-solid (at 4% the
   buttons showed the bright photo: #606142 where the mockup draws #30362F) */
body[data-skin-family="glass"] .ph-iconbtn,
body[data-skin-family="glass"] .ph-avatar {
  background:
    radial-gradient(circle at 30% 28%, color-mix(in srgb, color-mix(in srgb, var(--sk-line) 11%, var(--sk-surface)) 22%, transparent), color-mix(in srgb, color-mix(in srgb, var(--sk-line) 11%, var(--sk-surface)) 4%, transparent) 75%),
    color-mix(in srgb, var(--sk-ph-iconbtn-base-1, color-mix(in srgb, var(--sk-page) 59%, var(--sk-dark))) calc(4% + var(--sk-panels-solid) * 88%), transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  color: var(--sk-ph-iconbtn-ink-1, color-mix(in srgb, var(--sk-a4) 2%, var(--sk-ink)));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sk-ph-iconbtn-shadow-1, color-mix(in srgb, var(--sk-page) 5%, var(--sk-light))) 34%, transparent),
    inset 0 7px 10px -8px color-mix(in srgb, var(--sk-ph-iconbtn-shadow-1, color-mix(in srgb, var(--sk-page) 5%, var(--sk-light))) 30%, transparent),
    inset 1px 1px 2px color-mix(in srgb, var(--sk-ph-iconbtn-shadow-2, color-mix(in srgb, var(--sk-page) 7%, var(--sk-light))) 35%, transparent),
    inset -1px -1px 2px color-mix(in srgb, var(--sk-dark) 18%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--sk-ph-iconbtn-shadow-2, color-mix(in srgb, var(--sk-page) 7%, var(--sk-light))) 10%, transparent),
    0 1px 2px color-mix(in srgb, var(--sk-dark) 16%, transparent),
    0 6px 16px color-mix(in srgb, var(--sk-dark) 22%, transparent);
}
body[data-skin-family="glass"] :is(.ph-iconbtn, .ph-avatar)::before { content: none; }
body[data-skin-family="glass"] .ph-iconbtn:hover,
body[data-skin-family="glass"] .ph-avatar:hover {
  background:
    radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--sk-ph-iconbtn-fill-3, color-mix(in srgb, var(--sk-deep) 62%, var(--sk-line))) 32%, transparent), color-mix(in srgb, var(--sk-ph-iconbtn-fill-3, color-mix(in srgb, var(--sk-deep) 62%, var(--sk-line))) 8%, transparent) 75%),
    color-mix(in srgb, color-mix(in srgb, var(--sk-page) 59%, var(--sk-dark)) 6%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sk-ph-iconbtn-shadow-1, color-mix(in srgb, var(--sk-page) 5%, var(--sk-light))) 46%, transparent),
    inset 0 7px 10px -8px color-mix(in srgb, var(--sk-ph-iconbtn-shadow-1, color-mix(in srgb, var(--sk-page) 5%, var(--sk-light))) 40%, transparent),
    inset 1px 1px 2px color-mix(in srgb, var(--sk-ph-iconbtn-shadow-2, color-mix(in srgb, var(--sk-page) 7%, var(--sk-light))) 45%, transparent),
    inset -1px -1px 2px color-mix(in srgb, var(--sk-dark) 18%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--sk-ph-iconbtn-shadow-2, color-mix(in srgb, var(--sk-page) 7%, var(--sk-light))) 14%, transparent),
    0 2px 4px color-mix(in srgb, var(--sk-dark) 20%, transparent),
    0 8px 20px color-mix(in srgb, var(--sk-dark) 28%, transparent);
}
body[data-skin-family="glass"] :is(.ph-iconbtn, .ph-avatar).is-open {
  background:
    radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--sk-ph-iconbtn-fill-3, color-mix(in srgb, var(--sk-deep) 62%, var(--sk-line))) 36%, transparent), color-mix(in srgb, var(--sk-ph-iconbtn-fill-3, color-mix(in srgb, var(--sk-deep) 62%, var(--sk-line))) 10%, transparent) 75%),
    color-mix(in srgb, color-mix(in srgb, var(--sk-page) 59%, var(--sk-dark)) 10%, transparent);
}
/* the 100% chip carried its own flat grey fill (themes.css:3963); it is a .ph-iconbtn like the rest */
body[data-skin-family="glass"] .ph-scale-btn,
body[data-skin-family="glass"] .ph-scale-val { color: var(--sk-ph-scale-btn-ink-1, color-mix(in srgb, var(--sk-a4) 2%, var(--sk-ink))); }

/* the Search pill keeps its own fill - that part was already right - and gains the highlight.
   Its OPEN state has its own box-shadow in the base sheet at (0,2,0), which the rule below
   would beat at (0,2,1), so the open shadow is restated at (0,3,1) with the highlight added. */
body[data-skin-family="glass"] .ph-search-pill {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sk-ph-search-pill-shadow-1, color-mix(in srgb, var(--sk-page) 5%, var(--sk-light))) 34%, transparent),
    inset 0 7px 10px -8px color-mix(in srgb, var(--sk-ph-search-pill-shadow-1, color-mix(in srgb, var(--sk-page) 5%, var(--sk-light))) 30%, transparent),
    inset 1px 1px 2px color-mix(in srgb, var(--sk-ph-search-pill-shadow-2, color-mix(in srgb, var(--sk-page) 7%, var(--sk-light))) 35%, transparent),
    inset -1px -1px 2px color-mix(in srgb, var(--sk-dark) 18%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--sk-ph-search-pill-shadow-2, color-mix(in srgb, var(--sk-page) 7%, var(--sk-light))) 10%, transparent),
    0 1px 2px color-mix(in srgb, var(--sk-dark) 16%, transparent),
    0 6px 16px color-mix(in srgb, var(--sk-dark) 22%, transparent);
}
body[data-skin-family="glass"] .ph-search-pill.is-open {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sk-ph-search-pill-shadow-1, color-mix(in srgb, var(--sk-page) 5%, var(--sk-light))) 34%, transparent),
    inset 0 7px 10px -8px color-mix(in srgb, var(--sk-ph-search-pill-shadow-1, color-mix(in srgb, var(--sk-page) 5%, var(--sk-light))) 24%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--sk-ph-search-pill-shadow-1, color-mix(in srgb, var(--sk-page) 5%, var(--sk-light))) 16%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 22%, transparent),
    0 14px 30px color-mix(in srgb, var(--sk-dark) 34%, transparent);
}

/* ---- THE ROWS' OWN INK (16 Sep 2026) -------------------------------------------------------
   Hugo's monochrome mockup has PALE list rows with DARK text on an otherwise dark page. The
   family had one ink for every text, so a pale row carried pale text. A glass skin may now give
   its rows their own ink:
     --sk-row-ink        the titles (and everything else that reads --ink inside a row)
     --sk-row-ink-muted  the lines under them
   A skin that sets neither reads exactly as before: the defaults are the page's own ink formulas.
   (The black-and-white photo option that sat here was removed the same day: "you should not
   modify the image in the background" - the photo belongs to the project, not to the skin.) ---- */
body[data-skin-family="glass"] .shot-row {
  /* inside a row the light-mix base follows the ROW surface (the reviewed chip); the empty-thumbnail
     well keeps the dark panel colour so its SH-code tag stays readable */
  --mix-light: var(--sk-mix-light-1, color-mix(in srgb, var(--sk-ink) 30%, var(--sk-row-surface)));
  /* the row's faint separators (the dot between code and title) follow the row's muted ink */
  --ink-soft: var(--sk-row-ink-soft, var(--sk-row-ink-muted, color-mix(in srgb, var(--sk-line) 80%, var(--sk-dark))));
  --ink: var(--sk-row-ink, var(--sk-ink));
  --ink-on-dark: var(--sk-row-ink, var(--sk-ink));
  --ink-muted: var(--sk-row-ink-muted, var(--sk-ink-muted-1, color-mix(in srgb, var(--sk-line) 72%, var(--sk-light))));
  --ink-on-dark-muted: var(--sk-row-ink-muted, var(--sk-ink-on-dark-muted-1, color-mix(in srgb, var(--sk-line) 72%, var(--sk-light))));
}
/* (17 Sep 2026, Hugo: "the buttons here on shot rows are invisible" - Monochrome Teal) a row's icon
   buttons read the ROW's ink too. The family's button rule (section 5) takes the PAGE ink, which a pale-row
   skin keeps light: its icons measured 1.2:1 on the pale rows. A skin without --sk-row-ink reads exactly as
   before (the same formulas over --sk-ink); the hover border is repeated here so it still wins on hover. */
body[data-skin-family="glass"] .shot-row :is(.shot-cut-toggle, .shot-link-toggle, .sqa-btn):not(.is-active) {
  border-color: color-mix(in srgb, var(--sk-shot-cut-toggle-line-1, color-mix(in srgb, var(--sk-row-ink, var(--sk-ink)) 49%, var(--sk-line))) 20%, transparent);
  color: color-mix(in srgb, var(--sk-shot-cut-toggle-ink-1, color-mix(in srgb, var(--sk-row-ink, var(--sk-ink)) 88%, var(--sk-ramp-3))) 72%, transparent);
}
body[data-skin-family="glass"] .shot-row :is(.shot-cut-toggle, .shot-link-toggle, .sqa-btn):not(.is-active):hover {
  border-color: color-mix(in srgb, var(--sk-shot-cut-toggle-line-2, color-mix(in srgb, var(--sk-ramp-0) 86%, var(--sk-light))) 55%, transparent);
  color: color-mix(in srgb, var(--sk-a1) 11%, var(--sk-row-ink, var(--sk-light)));
}
/* ... and a lit quick button on a row (first pass, concept, render, video, upscale) may take an ink of its
   own, --sk-row-btn-active-ink-1: the status inks are made for dark rows (1.2:1 on a pale one) */
@container style(--sk-row-btn-active-ink-1) {
  body[data-skin-family="glass"] .shot-row .sqa-btn.is-active { color: var(--sk-row-btn-active-ink-1, var(--st-hero-ink)); }
}

/* ---- HUGO'S MONOCHROME TEAL REVIEW (16 Sep 2026) ----------------------------------------------
   "Triple check everything i mentioned is a variable and fix it." Every colour below used to be
   typed in (a component literal, an inline style in the JSX, or a forest token the family never
   re-pointed), so no skin could reach it. Each now reads an optional slot whose fallback is the
   exact value it had, so a skin that sets nothing looks as before. ---- */

/* the project STATUS TAG (PRODUCTION): header.css paints it through --stag-*; here a skin may take
   it over. With no --sk-status-pill-accent-1 the project's own row colour still wins. */
body[data-skin-family="glass"] :is(.ph-status-pill, .ph-project-other-status) {
  --stag-accent: var(--sk-status-pill-accent-1, var(--project-accent, var(--status-accent)));
  --stag-fill: color-mix(in oklab, var(--sk-status-pill-fill-1, var(--stag-accent)) var(--stag-fill-mix), transparent);
  --stag-line: color-mix(in oklab, var(--sk-status-pill-line-1, var(--stag-accent)) var(--stag-line-mix), transparent);
  --stag-ink: var(--sk-status-pill-ink-1, var(--stag-accent));
  --stag-dot: var(--sk-status-pill-dot-1, var(--stag-accent));
  --stag-glow: var(--sk-status-pill-glow-1, var(--stag-accent));
}
@container style(--sk-status-tag: solid) {
  body[data-skin-family="glass"] :is(.ph-status-pill, .ph-project-other-status) {
    --stag-fill: var(--sk-status-pill-fill-1, var(--stag-accent));
  }
}
/* the project switcher's CARDS (17 Sep 2026): header.css paints them through --ph-card-*, as
   the light at 3% and the line colour at 14%. Here --card-border is already the line at 16% and
   --mix-light is a dark mix, so those formulas left no visible edge; the same percentages are
   taken of the family's own full-strength light and line instead. A skin may set the two slots. */
body[data-skin-family="glass"] .ph-project-other {
  --ph-card-fill: color-mix(in srgb, var(--sk-ph-card-fill-1, var(--sk-light)) 3%, transparent);
  --ph-card-line: color-mix(in srgb, var(--sk-ph-card-line-1, var(--sk-line)) 14%, transparent);
  --ph-card-fill-hover: color-mix(in srgb, var(--sk-ph-card-fill-1, var(--sk-light)) 7%, transparent);
  --ph-card-line-hover: color-mix(in srgb, var(--sk-ph-card-line-1, var(--sk-line)) 32%, transparent);
}
body[data-skin-family="glass"] .ph-project-new {
  --ph-card-fill: color-mix(in srgb, var(--sk-ph-card-fill-1, var(--sk-light)) 2%, transparent);
  --ph-card-line: color-mix(in srgb, var(--sk-ph-card-line-1, var(--sk-line)) 28%, transparent);
  --ph-card-fill-hover: color-mix(in srgb, var(--sk-ph-card-fill-1, var(--sk-light)) 6%, transparent);
}
body[data-skin-family="glass"] .ph-status-pill {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sk-status-pill-shadow-1, var(--sk-light)) 30%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 18%, transparent),
    0 1px 3px color-mix(in srgb, var(--sk-dark) 20%, transparent);
}

body[data-skin-family="glass"] {
  /* the Shot Breakdown bars, one colour per stage (QueueBreakdown.jsx reads --bd-*) */
  --bd-hero: var(--sk-bd-hero-1, var(--leaf));
  --bd-refinement: var(--sk-bd-refinement-1, var(--amber));
  --bd-first-pass: var(--sk-bd-first-pass-1, var(--teal));
  /* the SH0010 plate on every thumbnail, and the thumbnails' top light line */
  --thumb-tag-bg: var(--sk-thumb-tag-bg-1, color-mix(in srgb, var(--sk-dark) 35%, transparent));
  --thumb-tag-ink: var(--sk-thumb-tag-ink-1, color-mix(in srgb, var(--sk-light) 90%, transparent));
  --thumb-inset-hi: color-mix(in srgb, var(--sk-thumb-inset-hi-1, var(--sk-light)) 18%, transparent);
  --media-thumb-inset-hi: color-mix(in srgb, var(--sk-thumb-inset-hi-1, var(--sk-light)) 10%, transparent);
  /* the 1px text shadow of the dark cards (footer, PIPELINE STAGE, SHOT QUEUE) */
  --panel-text-shadow-color: color-mix(in srgb, var(--sk-panel-text-shadow-1, var(--sk-dark)) 35%, transparent);
  /* the donut's drop shadow (it was forest's green-black), the shade where two arcs meet, and the
     halo of a focused arc (both were always black) */
  --donut-shadow-color: var(--sk-donut-shadow-1, var(--shade-38));
  --donut-join-shadow: var(--sk-donut-join-shadow-1, var(--sk-dark));
  --donut-focus-glow: var(--sk-donut-focus-glow-1, var(--sk-dark));
  /* the icons on the round floating buttons (notepad, to-do, assistant) */
  --fab-ink: var(--sk-fab-ink-1, var(--sk-light));
}

/* ---- THE OVERVIEW STATS BAND'S OWN INK (17 Sep 2026) ------------------------------------------
   Hugo's Midnight Lavender mockup draws the overview band (the donut card, the four stats, the
   album line, the bar and the Tracks/Visuals/... tabs) PALE with DARK text on an otherwise dark
   page. Like the rows' own ink (.shot-row above), the band points the text tokens it reads at the
   stats inks; with the defaults (the page's own inks) nothing changes. The band's own track and
   disc colours live here too:
     --sk-stats-track-1  the bar's groove and the donut's empty track on a solid band
     --sk-stats-disc-1   the dark disc inside the donut on a solid band
   The donut's centre keeps the PAGE ink: its number sits on that dark disc. ---- */
body[data-skin-family="glass"] .topbar {
  --ink: var(--sk-stats-ink);
  --ink-on-dark: var(--sk-stats-ink);
  --ink-muted: var(--sk-stats-ink-muted);
  --ink-on-dark-muted: var(--sk-stats-ink-muted);
  --stats-band-track: var(--sk-stats-track-1, color-mix(in srgb, var(--sk-stats-ink) 35%, var(--sk-stats-surface)));
  --stats-band-disc: var(--sk-stats-disc-1, var(--sk-page));
  --donut-track: color-mix(in srgb, var(--sk-donut-track-1, color-mix(in srgb, color-mix(in srgb, var(--sk-deep) 97%, var(--sk-ramp-0)) 20%, transparent)), var(--stats-band-track) calc(var(--sk-stats-solid) * 100%));
}
body[data-skin-family="glass"] :is(.tb-donut-wrap, .tbm2-donut) {
  --ink: var(--sk-ink);
  --ink-on-dark: var(--sk-ink);
  --ink-muted: var(--sk-ink-muted-1, color-mix(in srgb, var(--sk-line) 72%, var(--sk-light)));
  --ink-on-dark-muted: var(--sk-ink-on-dark-muted-1, color-mix(in srgb, var(--sk-line) 72%, var(--sk-light)));
}

/* ---- THE PHONE BAND (17 Sep 2026, Midnight Lavender's review) ----------------------------------
   On a phone (tier s) mobile.css paints the overview band as dark glass in EVERY skin, so a solid
   band's surface never shows there. Measured at 390 px: the solid band's dark donut disc covered the
   PROGRESS label (the disc sits above it), and the band-only live ink read 2.86:1 on the dark band.
   So the phone band is glass whatever the skin chose: --sk-stats-solid is 0 inside it (the donut's
   disc and track, the live and online pills go back to their glass colours) and its text tokens are
   the page's again. The stat discs keep the skin's own disc material (--stats-disc-solid, taken on
   the body before this override): solid discs with the skin's glyphs read on the dark band too.
   A skin with solid 0 (neon, mono-teal) resolves every value here to what it had. ---- */
body[data-skin-family="glass"] {
  --stats-disc-solid: var(--sk-stats-solid);
}
body[data-skin-family="glass"][data-ui-tier="s"] .topbar.tb-mobile {
  --sk-stats-solid: 0;
  --ink: var(--sk-ink);
  --ink-on-dark: var(--sk-ink);
  --ink-muted: var(--sk-ink-muted-1, color-mix(in srgb, var(--sk-line) 72%, var(--sk-light)));
  --ink-on-dark-muted: var(--sk-ink-on-dark-muted-1, color-mix(in srgb, var(--sk-line) 72%, var(--sk-light)));
}

/* ============================================================================================
   THE REVIEW FIXES (17 Sep 2026) - the three reviews of Midnight Lavender and Paradise Found Dark,
   measured with each skin WORN the way the app wears it (its own photo under the page), on the bench
   and on Paradise Found, at 2268 px and 390 px. A slot read with a fallback defaults to exactly what the
   rule painted; a rule inside a boolean style query does not exist until a skin sets its slot. Proven
   by a paint diff (neon, mono-teal, Midnight Lavender where not meant to change, forest: 0 repaints).
   ============================================================================================ */

/* a band stat fading while another one is focused (--sk-stat-dim, in the defaults block) */
body[data-skin-family="glass"] :is(.tb-stat, .tbm2-stat).is-dimmed { opacity: var(--sk-stat-dim); }

/* THE PHOTO VEIL (17 Sep 2026, see the defaults block): the layer forest paints over its photo
   (body::before), which this family clears (THE BACKDROP, above), comes back as the skin's own colour,
   top to bottom, and blurs the photo under it. Off until a skin sets --sk-photo-veil-1. */
@container style(--sk-photo-veil-1) {
  body[data-skin-family="glass"].has-backdrop-image:not(.has-style-veil)::before {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-photo-veil-1, var(--sk-dark)) var(--sk-photo-veil-top), transparent), color-mix(in srgb, var(--sk-photo-veil-1, var(--sk-dark)) var(--sk-photo-veil-bottom), transparent));
    -webkit-backdrop-filter: blur(var(--sk-photo-blur));
    backdrop-filter: blur(var(--sk-photo-blur));
  }
}

/* words that sit straight on the photo (the project header; Censored Words, which has no panel: its heading,
   tabs and arrows) over a bright photo: a dark halo behind them (a text-shadow - nothing moves, and the photo
   itself is untouched). A skin with a photo veil (above) usually needs no halo. */
@container style(--sk-photo-halo-1) {
  body[data-skin-family="glass"] :is(.ph-eyebrow, .ph-title, .ph-subtitle, .ph-meta-sep, .ph-episode-name, .ph-online-label, .phm-word, .cw-title, .cw-sub, .cw-tab, .cw-arrow) {
    text-shadow: 0 0 1px var(--sk-photo-halo-1, var(--sk-dark)), 0 0 2px var(--sk-photo-halo-1, var(--sk-dark)), 0 0 3px var(--sk-photo-halo-1, var(--sk-dark)), 0 0 5px var(--sk-photo-halo-1, var(--sk-dark)), 0 0 8px var(--sk-photo-halo-1, var(--sk-dark)), 0 0 12px var(--sk-photo-halo-1, var(--sk-dark)), 0 0 18px var(--sk-photo-halo-1, var(--sk-dark));
  }
}
/* the header title's own ink (desktop; the phone's title keeps mobile.css's) */
body[data-skin-family="glass"] .ph-title { color: var(--sk-ph-title-ink-1, var(--ink-on-dark)); }
/* the title's dropdown button: a 5% light wash over the photo; a skin may give it a solid fill */
@container style(--sk-ph-caret-fill-1) {
  body[data-skin-family="glass"] .ph-caret { background: color-mix(in srgb, var(--sk-ph-caret-fill-1, var(--mix-light)) 92%, transparent); }
  body[data-skin-family="glass"] :is(.ph-caret:hover, .ph-title-row:hover .ph-caret) { background: color-mix(in srgb, color-mix(in srgb, var(--sk-ph-caret-fill-1, var(--mix-light)) 88%, var(--sk-light)) 94%, transparent); }
}
/* the Shot Breakdown tooltip: a 5% light wash; a skin may give it a solid fill */
@container style(--sk-bd-tooltip-fill-1) {
  body[data-skin-family="glass"] .bd-tooltip { background: color-mix(in srgb, var(--sk-bd-tooltip-fill-1, var(--sk-light)) 92%, transparent); }
  body[data-skin-family="glass"] .bd-tooltip.is-on { background: color-mix(in srgb, color-mix(in srgb, var(--sk-bd-tooltip-fill-1, var(--sk-light)) 91%, var(--sk-light)) 94%, transparent); }
}

/* THE PHONE (tier s): the overview band, the Shotlist/Dashboard toggle and the bottom tabs are 38-55%
   glass in mobile.css. Under --sk-panels-solid they sit on the skin's surface at 92% (a colour under
   mobile.css's own gradient: 0 leaves them exactly as they were). The active toggle's ink is a slot. */
body[data-skin-family="glass"][data-ui-tier="s"] .topbar.tb-mobile { background-color: color-mix(in srgb, var(--sk-stats-surface) calc(var(--sk-panels-solid) * 92%), transparent); }
body[data-skin-family="glass"] .ov-mtoggle { background-color: color-mix(in srgb, color-mix(in srgb, var(--shade-43) 42%, transparent), var(--sk-surface) calc(var(--sk-panels-solid) * 92%)); }
body[data-skin-family="glass"] .mtab:not(.is-active) { background-color: color-mix(in srgb, color-mix(in srgb, var(--shade-14) 55%, transparent), var(--sk-surface) calc(var(--sk-panels-solid) * 92%)); }
body[data-skin-family="glass"] .mtab.is-active { background-color: color-mix(in srgb, color-mix(in srgb, var(--shade-14) 62%, transparent), var(--sk-surface) calc(var(--sk-panels-solid) * 92%)); }
body[data-skin-family="glass"] .ov-mtab.is-active { color: var(--sk-mtab-active-ink-1, color-mix(in srgb, var(--leaf-bright) 29%, var(--mix-light))); }

/* light text on the skin's pale amber and moss fills (Edit Plan's Doing and priority 2 on the amber, Done and
   priority 3 on the olive, Canvas's Run, Generate's CURRENT "Shot frame" - its resting "Set as shot frame" sits
   on the panel and keeps the page ink -, the calendar's checkpoint and milestone events). Their stylesheets
   type a light ink (or --ink-deep, which glass points at the light page ink); a skin whose a4/a1 are pale sets
   a dark one. Each fallback is what the component paints; a disabled Run keeps its white. On a phone (tier s)
   a calendar event is a 7 px dot with its words beside it on the dark cell, so they keep their light ink. */
@container style(--sk-accent-ink-3-1) {
  body[data-skin-family="glass"] :is(.ep-pri-btn--2, .ep-seg--p2, .ep-status-btn--in_progress).is-on { color: var(--sk-accent-ink-3-1, color-mix(in srgb, var(--ink-deep) 83%, var(--mix-dark))); }
  body[data-skin-family="glass"] :is(.ep-pri-btn--3, .ep-seg--p3, .ep-status-btn--completed).is-on { color: var(--sk-accent-ink-3-1, var(--ink-mint-4)); }
  body[data-skin-family="glass"] .cv-node-run:not(:disabled) { color: var(--sk-accent-ink-3-1, var(--white)); }
  body[data-skin-family="glass"] .gen-gens-act--promote.is-current { color: var(--sk-accent-ink-3-1, color-mix(in srgb, var(--ink-tan-deep) 67%, var(--mix-dark))); }
  body[data-skin-family="glass"]:not([data-ui-tier="s"]) .big-cal-event--checkpoint { color: var(--sk-accent-ink-3-1, color-mix(in srgb, var(--ink-deep-2) 96%, var(--mix-dark))); }
  body[data-skin-family="glass"]:not([data-ui-tier="s"]) .big-cal-event--milestone { color: var(--sk-accent-ink-3-1, color-mix(in srgb, var(--ink-hi) 95%, transparent)); }
}
/* Edit Plan's priority 3 and Done sit on the olive, and a completed row is drawn at 55%: a pale olive under a dark
   ink (or a light ink on it) fades to under 2.9:1 there. A skin may give them a deep fill with a light ink
   (--sk-ep-done-fill-1, --sk-ep-done-ink-1; defaults: the component's olive and ink). After the block above. */
@container style(--sk-ep-done-fill-1) {
  body[data-skin-family="glass"] :is(.ep-pri-btn--3, .ep-seg--p3, .ep-status-btn--completed).is-on { background: var(--sk-ep-done-fill-1, var(--olive)); color: var(--sk-ep-done-ink-1, var(--ink-mint-4)); }
}
/* Edit Plan's priority 1 on its red: the stylesheet mixes a little gold into the light mix, which a skin
   darkens for its tan surfaces (the number then read 1.2-1.7:1). A skin sets --sk-ep-p1-ink-1. */
@container style(--sk-ep-p1-ink-1) {
  body[data-skin-family="glass"] :is(.ep-pri-btn--1, .ep-seg--p1).is-on { color: var(--sk-ep-p1-ink-1, color-mix(in srgb, var(--gold-16) 10%, var(--mix-light))); }
}
/* Edit Plan's "Mine" filter (a forest blue), a Notes shot chip (the tan ink on the light mix), a Generate tile's
   model line, a notification's "·" (drawn at 55%) */
@container style(--sk-ep-assign-ink-1) { body[data-skin-family="glass"] .ep-seg--assign.is-on { color: var(--sk-ep-assign-ink-1, var(--ink-blue-24)); } }
@container style(--sk-shot-chip-ink-1) { body[data-skin-family="glass"] .np-shot-chip { color: var(--sk-shot-chip-ink-1, var(--ink-tan-deep)); } }
@container style(--sk-gens-model-ink-1) { body[data-skin-family="glass"] .gen-gens-model { color: var(--sk-gens-model-ink-1, var(--ink-muted)); } }
@container style(--sk-notif-sep-ink-1) { body[data-skin-family="glass"] .ph-notif-meta .ph-notif-dot-sep { color: var(--sk-notif-sep-ink-1, var(--ink-on-dark-muted)); } }

/* the shot modal's "Lock refs" reads --ink-purple-4, a forest token glass never re-points (#6A4A8A) */
body[data-skin-family="glass"] .ref-lock-btn { color: var(--sk-ref-lock-ink-1, var(--ink-purple-4)); }
/* an unread notification's title and a Reports avatar's initials are built from the light/dark mixes */
body[data-skin-family="glass"] .ph-notif-row.is-unread .ph-menu-row-title { color: var(--sk-notif-unread-ink-1, color-mix(in srgb, var(--gold-8) 23%, var(--mix-light))); }
body[data-skin-family="glass"] .rvk-av { color: var(--sk-rvk-av-ink-1, color-mix(in srgb, var(--leaf) 74%, var(--mix-dark))); }
/* the shot modal's prompt text (built from the card edge and the light mix: 1.6-1.7:1 in every glass skin) and a
   resting Review type chip (the tan ink and the light mix). The prompt's loading fade to transparent and the
   chip's hover and on states keep their own rules. */
body[data-skin-family="glass"] .pb-code:not(.prompt-block--loading .pb-code) { color: var(--sk-pb-code-ink-1, color-mix(in srgb, var(--card-border) 63%, var(--mix-light))); }
body[data-skin-family="glass"] .review-typechip:not(.is-on):not(:hover) { color: var(--sk-review-chip-ink-1, color-mix(in srgb, var(--ink-tan-deep) 95%, var(--mix-light))); }

/* forest's own text colours that glass never re-points (the same in every glass skin, and dark on a dark
   panel): To-do's failed-generation and review-comment labels, Updates' hero and video-WIP icons, Schedule's
   late dates and milestone marks, Edit Plan's frame-extraction counters, the "Refine / Enhance with AI"
   label, a shot row's reviewed-by initials, Pricing's plan names. A slot each, inside its own query (it does
   not exist until a skin sets it); each fallback is the component's colour. The milestone marks and plan
   names were inline colours in Views.jsx; they are classes now (views-pages.css, views-extras.css). */
@container style(--sk-todo-fail-ink-1) { body[data-skin-family="glass"] .todo-row-type--gen { color: var(--sk-todo-fail-ink-1, var(--danger-2)); } }
@container style(--sk-todo-review-ink-1) { body[data-skin-family="glass"] .todo-row-type--review { color: var(--sk-todo-review-ink-1, var(--ink-blue-14)); } }
@container style(--sk-ru-hero-ink-1) { body[data-skin-family="glass"] :is(.ru-row--hero_frame, .ru-row--hero_action) .ru-icon { color: var(--sk-ru-hero-ink-1, var(--ink-gold-4)); } }
@container style(--sk-ru-wip-ink-1) { body[data-skin-family="glass"] .ru-row--video_wip .ru-icon { color: var(--sk-ru-wip-ink-1, var(--blue-41-ink)); } }
@container style(--sk-late-ink-1) { body[data-skin-family="glass"] :is(.phase-card-orig.is-late, .sched-changes-total.is-late, .sched-change-days.is-late b) { color: var(--sk-late-ink-1, var(--late-ink)); } }
@container style(--sk-ms-waiting-ink-1) { body[data-skin-family="glass"] .sched-milestone-status--not_ready { color: var(--sk-ms-waiting-ink-1, var(--grey-3-ink)); } }
@container style(--sk-ms-done-ink-1) { body[data-skin-family="glass"] .sched-milestone-status--paid { color: var(--sk-ms-done-ink-1, var(--ink-olive-12)); } }
@container style(--sk-ms-due-ink-1) { body[data-skin-family="glass"] .sched-milestone-status--upcoming { color: var(--sk-ms-due-ink-1, var(--ink-gold-2)); } }
@container style(--sk-efb-ink-1) { body[data-skin-family="glass"] :is(.efb-count, .efb-line--sub) { color: var(--sk-efb-ink-1, var(--ink-7)); } }
@container style(--sk-refine-ink-1) { body[data-skin-family="glass"] .gen-upscale-customize-btn { color: var(--sk-refine-ink-1, color-mix(in srgb, var(--ink-tan-deep) 58%, var(--mix-dark))); } }
@container style(--sk-reviewed-init-ink-1) { body[data-skin-family="glass"] .shot-reviewed-chip .src-init { color: var(--sk-reviewed-init-ink-1, color-mix(in srgb, var(--leaf-deep) 67%, var(--mix-dark))); } }
@container style(--sk-pricing-pro-ink-1) { body[data-skin-family="glass"] .pricing-faq-name--pro { color: var(--sk-pricing-pro-ink-1, var(--ink-gold-5)); } }
@container style(--sk-pricing-ultra-ink-1) { body[data-skin-family="glass"] .pricing-faq-name--ultra { color: var(--sk-pricing-ultra-ink-1, var(--ink-forest-7)); } }

/* forest's near-white pill and row fills (--cream-12, --cream-18: glass never re-points them) under light text:
   Edit Plan's row actions and "Fill blank shots", Presentations' shot rows and reference groups. A skin sets
   --sk-pale-pill-fill-1 and they sit on it (their hover, on and running states keep their own fills). */
@container style(--sk-pale-pill-fill-1) {
  body[data-skin-family="glass"] :is(.ep-act, .esb-btn:not(.esb-btn--onbar)):not(:hover):not(.is-on):not(.is-running) { background: color-mix(in srgb, var(--sk-pale-pill-fill-1, var(--cream-12)) 70%, transparent); }
  body[data-skin-family="glass"] :is(.presentations-view, .pres-cs-modal) { --pres-row: color-mix(in srgb, var(--sk-pale-pill-fill-1, var(--cream-18)) 50%, transparent); }
}
/* Presentations' Save PDF: light ink on --moss, which is pale in a glass skin with a light page ink */
@container style(--sk-pres-export-ink-1) { body[data-skin-family="glass"] .pres-btn--export { color: var(--sk-pres-export-ink-1, var(--ink-cream)); } }
/* the header's online pill: a 15% tint of its colour over the photo; a skin whose photo is bright gives it a
   solid fill. The "·" between the subtitle and the episode (--ink-soft) has its own ink. */
@container style(--sk-ph-online-fill-1) { body[data-skin-family="glass"] .ph-online-pill { background: color-mix(in srgb, var(--sk-ph-online-fill-1, var(--amber)) 92%, transparent); } }
@container style(--sk-meta-sep-ink-1) { body[data-skin-family="glass"] .ph-meta-sep { color: var(--sk-meta-sep-ink-1, var(--ink-soft)); } }
/* single texts on a lighter ground: Edit Plan's priority tags (on their track), a Voice Over group's snippet (on
   the group's tint), a Generate thumbnail's version label (on its plate) */
@container style(--sk-ep-prirow-ink-1) { body[data-skin-family="glass"] .ep-prirow-tag { color: var(--sk-ep-prirow-ink-1, var(--ink-muted)); } }
@container style(--sk-vo-snippet-ink-1) { body[data-skin-family="glass"] .gen-vo-group-snippet { color: var(--sk-vo-snippet-ink-1, var(--ink-muted)); } }
@container style(--sk-gens-label-ink-1) { body[data-skin-family="glass"] .gen-gens-label { color: var(--sk-gens-label-ink-1, var(--ink)); } }
/* Edit Plan draws a completed row at 55%: its muted labels and resting buttons fade into the panel. A skin
   sets --sk-faded-row-ink-1 for them (a hovered button keeps the page ink). */
@container style(--sk-faded-row-ink-1) {
  body[data-skin-family="glass"] .ep-row.is-completed :is(.ep-ctl-label, .ep-pri-btn:not(.is-on):not(:hover), .ep-status-btn:not(.is-on):not(:hover)) { color: var(--sk-faded-row-ink-1, var(--ink-muted)); }
}
/* Censored Words has no panel: its table is a 60% wash over the photo. A skin whose photo is bright gives it a
   solid fill (the table keeps its own radius; the heading and tabs carry the halo above). */
@container style(--sk-bare-table-fill-1) { body[data-skin-family="glass"] .cw-table { background: color-mix(in srgb, var(--sk-bare-table-fill-1, var(--cream-2)) 92%, transparent); } }

/* the overview's own panels (the rail, the shot list's panel, the right column, the footer cards): a mockup
   whose muted text there is a quieter tier than the page's sets --sk-panel-muted-ink-1 (the page-wide muted ink
   stays for the lighter grounds of the other pages; the shot rows keep their own, --sk-row-ink-muted). A card's
   "View all", faded by its stylesheet, keeps the page's muted ink. */
@container style(--sk-panel-muted-ink-1) {
  body[data-skin-family="glass"] :is(.sidebar, .shots-panel, .right-column, .footer-row) {
    --ink-muted: var(--sk-panel-muted-ink-1, var(--sk-ink-muted-1, color-mix(in srgb, var(--sk-line) 72%, var(--sk-light))));
    --ink-on-dark-muted: var(--sk-panel-muted-ink-1, var(--sk-ink-on-dark-muted-1, color-mix(in srgb, var(--sk-line) 72%, var(--sk-light))));
  }
  body[data-skin-family="glass"] .footer-row .activity-card-cta { color: var(--sk-ink-on-dark-muted-1, color-mix(in srgb, var(--sk-line) 72%, var(--sk-light))); }
  /* a cancelled queue job is drawn at 60%: its lines keep the page's muted ink */
  body[data-skin-family="glass"] .sidebar .sb-q-row--cancelled {
    --ink-muted: var(--sk-ink-muted-1, color-mix(in srgb, var(--sk-line) 72%, var(--sk-light)));
    --ink-on-dark-muted: var(--sk-ink-on-dark-muted-1, color-mix(in srgb, var(--sk-line) 72%, var(--sk-light)));
  }
}
/* single overview texts a mockup draws quieter than the page ink: the SHOT QUEUE title and a queued job's model
   (not on a cancelled job, drawn at 60%), the activity entries, the calendar's resting Sync button, the drop
   zone's line */
@container style(--sk-queue-title-ink-1) { body[data-skin-family="glass"] .sb-queue-title { color: var(--sk-queue-title-ink-1, var(--ink-on-dark)); } }
@container style(--sk-queue-model-ink-1) { body[data-skin-family="glass"] .sb-q-row:not(.sb-q-row--cancelled) .sb-q-model { color: var(--sk-queue-model-ink-1, var(--ink-on-dark)); } }
@container style(--sk-activity-text-ink-1) { body[data-skin-family="glass"] .activity-text { color: var(--sk-activity-text-ink-1, var(--ink-on-dark)); } }
@container style(--sk-cal-sync-ink-1) { body[data-skin-family="glass"] .cal-sync-btn:not(:hover) { color: var(--sk-cal-sync-ink-1, var(--ink)); } }
@container style(--sk-dropzone-ink-1) { body[data-skin-family="glass"] .dz-text { color: var(--sk-dropzone-ink-1, var(--ink-on-dark)); } }
/* ... and in the band, the rail and the header: the SCHEDULED caption, its "days remaining", the resting mode
   tabs, a resting menu icon, the pipeline's MANUAL tag, the header's eyebrow, and its subtitle and episode
   (desktop only: the phone's header sits on a brighter part of the photo and keeps the page's muted ink) */
@container style(--sk-tb-meta-label-ink-1) { body[data-skin-family="glass"] .tb-meta-label { color: var(--sk-tb-meta-label-ink-1, var(--ink-muted)); } }
@container style(--sk-tb-meta-sub-ink-1) { body[data-skin-family="glass"] .tb-meta-sub { color: var(--sk-tb-meta-sub-ink-1, var(--ink-muted)); } }
@container style(--sk-tb-mode-idle-ink-1) { body[data-skin-family="glass"] .tb-mode-btn:not(.is-active):not(:hover) { color: var(--sk-tb-mode-idle-ink-1, color-mix(in srgb, var(--ink) 60%, transparent)); } }
@container style(--sk-nav-icon-idle-1) { body[data-skin-family="glass"] .nav-item:not(.active):not(:hover) .nav-icon { color: var(--sk-nav-icon-idle-1, color-mix(in srgb, var(--sk-nav-item-ink-1, color-mix(in srgb, var(--sk-ink) 83%, var(--sk-line))) 80%, transparent)); } }
@container style(--sk-ps-manual-ink-1) { body[data-skin-family="glass"] .ps-manual { color: var(--sk-ps-manual-ink-1, var(--amber)); } }
@container style(--sk-ph-eyebrow-ink-1) { body[data-skin-family="glass"] .ph-eyebrow { color: var(--sk-ph-eyebrow-ink-1, var(--ink-on-dark-muted)); } }
@container style(--sk-ph-meta-ink-1) {
  body[data-skin-family="glass"]:not([data-ui-tier="s"]) .ph-subtitle { color: var(--sk-ph-meta-ink-1, var(--ink-on-dark-muted)); }
  body[data-skin-family="glass"]:not([data-ui-tier="s"]) .ph-episode-pill--compact .ph-episode-name { color: var(--sk-ph-meta-ink-1, var(--ink-on-dark-muted)); }
}

/* Reuse the existing Athenian masks for glass variants. No new art. */
@container style(--sk-orn-donut-1) and (not style(--sk-orn-donut-image: none)) {
  body[data-skin-family="glass"] .topbar .tb-left::before {
    content: "";
    background-color: var(--sk-orn-donut-1, transparent);
    -webkit-mask-image: var(--sk-orn-donut-image);
    mask-image: var(--sk-orn-donut-image);
    -webkit-mask-size: var(--sk-orn-donut-size);
    mask-size: var(--sk-orn-donut-size);
    -webkit-mask-position: var(--sk-orn-donut-position);
    mask-position: var(--sk-orn-donut-position);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: var(--sk-orn-donut-opacity);
  }
}
@container style(--sk-orn-band-corner-1) and (not style(--sk-orn-band-corner-image: none)) {
  body[data-skin-family="glass"] .topbar .tb-left::after {
    content: "";
    background-color: var(--sk-orn-band-corner-1, transparent);
    -webkit-mask-image: var(--sk-orn-band-corner-image);
    mask-image: var(--sk-orn-band-corner-image);
    -webkit-mask-size: var(--sk-orn-band-corner-size);
    mask-size: var(--sk-orn-band-corner-size);
    -webkit-mask-position: var(--sk-orn-band-corner-position);
    mask-position: var(--sk-orn-band-corner-position);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: var(--sk-orn-band-corner-opacity);
  }
}
@container style(--sk-orn-band-corner-1) and (not style(--sk-orn-band-corner-tr-image: none)) {
  body[data-skin-family="glass"] .topbar .tb-right::before {
    content: "";
    background-color: var(--sk-orn-band-corner-1, transparent);
    -webkit-mask-image: var(--sk-orn-band-corner-tr-image);
    mask-image: var(--sk-orn-band-corner-tr-image);
    -webkit-mask-size: var(--sk-orn-band-corner-tr-size);
    mask-size: var(--sk-orn-band-corner-tr-size);
    -webkit-mask-position: var(--sk-orn-band-corner-tr-position);
    mask-position: var(--sk-orn-band-corner-tr-position);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: var(--sk-orn-band-corner-opacity);
  }
}
@container style(--sk-orn-brand-1) and (not style(--sk-orn-brand-image: none)) {
  body[data-skin-family="glass"] .sidebar .sb-title::after {
    content: "";
    background-color: var(--sk-orn-brand-1, transparent);
    -webkit-mask-image: var(--sk-orn-brand-image);
    mask-image: var(--sk-orn-brand-image);
    -webkit-mask-size: var(--sk-orn-brand-size);
    mask-size: var(--sk-orn-brand-size);
    -webkit-mask-position: var(--sk-orn-brand-position);
    mask-position: var(--sk-orn-brand-position);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: var(--sk-orn-brand-opacity);
  }
}
@container style(--sk-orn-empty-1) and (not style(--sk-orn-empty-image: none)) {
  body[data-skin-family="glass"] .footer-row .notes-card .notes-empty::before {
    content: "";
    background-color: var(--sk-orn-empty-1, transparent);
    -webkit-mask-image: var(--sk-orn-empty-image);
    mask-image: var(--sk-orn-empty-image);
    -webkit-mask-size: var(--sk-orn-empty-size);
    mask-size: var(--sk-orn-empty-size);
    -webkit-mask-position: var(--sk-orn-empty-position);
    mask-position: var(--sk-orn-empty-position);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: var(--sk-orn-empty-opacity);
  }
}


/* Sparse transparent overlays are opt-in per surface. An unset image must never
   replace the existing glass gradient with an opaque fallback. */
@container style(--sk-texture: on) and (not style(--sk-tex-panel-image: none)) {
  body[data-skin-family="glass"] .topbar {
    background-image: var(--sk-tex-panel-image), linear-gradient(var(--sk-stats-surface), var(--sk-stats-surface));
    background-size: var(--sk-tex-panel-size), auto;
    background-position: calc(7 * var(--sk-tex-step-x)) calc(7 * var(--sk-tex-step-y)), 0 0;
    background-repeat: repeat, repeat;
  }
}
@container style(--sk-texture: on) and (not style(--sk-tex-rail-image: none)) {
  body[data-skin-family="glass"] .sidebar {
    background-image: var(--sk-tex-rail-image), linear-gradient(var(--glass-rail-top), var(--glass-rail-bottom));
    background-size: var(--sk-tex-rail-size), auto;
    background-position: 0 0, 0 0;
    background-repeat: repeat, repeat;
  }
}
@container style(--sk-texture: on) and (not style(--sk-tex-card-image: none)) {
  body[data-skin-family="glass"] .right-column .rc-card {
    background-image: var(--sk-tex-card-image), linear-gradient(var(--sk-right-column-fill-1, var(--sk-surface)), var(--sk-right-column-fill-2, var(--sk-surface)));
    background-size: var(--sk-tex-card-size), auto;
    background-position: calc(sibling-index() * var(--sk-tex-step-x)) calc(sibling-index() * var(--sk-tex-step-y)), 0 0;
    background-repeat: repeat, repeat;
  }
  body[data-skin-family="glass"] .footer-row .rc-card {
    background-image: var(--sk-tex-card-image), linear-gradient(var(--sk-footer-row-fill-1, var(--sk-surface)), var(--sk-footer-row-fill-2, var(--sk-surface)));
    background-size: var(--sk-tex-card-size), auto;
    background-position: calc(sibling-index() * var(--sk-tex-step-x)) calc(sibling-index() * var(--sk-tex-step-y)), 0 0;
    background-repeat: repeat, repeat;
  }
}

/* Append to skin-glass.css. Slots are opt-in: existing skins paint identically.
   Add --sk-kpi-material: glass to the glass defaults; stone is selected only by Maya Dark 01. */
@container style(--sk-rail-card-surface-1) {
  body[data-skin-family="glass"] :is(.project-day, .pipeline-stage, .sb-queue),
  body[data-skin-family="glass"] .pipeline-stage.is-settable:hover {
    --ink: var(--sk-rail-card-ink-1, var(--sk-ink));
    --ink-on-dark: var(--sk-rail-card-ink-1, var(--sk-ink));
    --ink-muted: var(--sk-rail-card-muted-ink-1, var(--sk-line));
    --ink-on-dark-muted: var(--sk-rail-card-muted-ink-1, var(--sk-line));
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--sk-rail-card-surface-1, var(--sk-surface)) 97%, var(--sk-light)),
      var(--sk-rail-card-surface-1, var(--sk-surface)));
    color: var(--sk-rail-card-ink-1, var(--sk-ink));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sk-light) 65%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 22%, transparent),
      0 0 0 1px color-mix(in srgb, var(--sk-rail-card-surface-1, var(--sk-surface)) 70%, var(--sk-dark));
  }
  body[data-skin-family="glass"] :is(.project-day, .pipeline-stage, .sb-queue)::before { background: none; }
  body[data-skin-family="glass"] :is(.pd-label, .pd-date, .ps-label, .ps-next, .sb-queue-meta, .sb-q-model, .sb-q-version) {
    color: var(--sk-rail-card-muted-ink-1, var(--sk-line));
  }
}
@container style(--sk-kpi-material: stone) {
  body[data-skin-family="glass"] .topbar .tb-chip {
    background: linear-gradient(150deg,
      color-mix(in srgb, var(--chip-hue) 78%, var(--sk-light)),
      var(--chip-hue) 55%, color-mix(in srgb, var(--chip-hue) 78%, var(--sk-dark)));
    box-shadow: inset 0 1px 1px color-mix(in srgb, var(--sk-light) 72%, transparent),
      inset 0 -2px 2px color-mix(in srgb, var(--sk-dark) 30%, transparent),
      0 2px 3px color-mix(in srgb, var(--sk-dark) 42%, transparent);
  }
  body[data-skin-family="glass"] .topbar .tb-chip svg {
    filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--sk-light) 75%, transparent));
  }
}


/* New slots are opt-in; every unset skin keeps its existing paint. */
@container style(--sk-notes-empty-ink-1) {
  body[data-skin-family="glass"] .notes-empty {
    color: var(--sk-notes-empty-ink-1, var(--ink-on-dark));
  }
}
@container style(--sk-photo-heading-ink-1) {
  body[data-skin-family="glass"] :is(.cw-title, .cw-sub, .cw-tab, .cw-arrow) {
    color: var(--sk-photo-heading-ink-1, var(--ink));
  }
}
@container style(--sk-ep-pending-ink-1) {
  body[data-skin-family="glass"] .ep-status-btn--pending.is-on {
    color: var(--sk-ep-pending-ink-1, var(--ink-cream));
  }
}
@container style(--sk-caption-fade: full) {
  body[data-skin-family="glass"] .ph-scale-val i { opacity: 1; }
}

@container style(--sk-rail-card-surface-1) {
  body[data-skin-family="glass"] .sidebar .sb-queue .sb-q-row--cancelled {
    --ink-muted: var(--sk-rail-card-muted-ink-1, var(--sk-line));
    --ink-on-dark-muted: var(--sk-rail-card-muted-ink-1, var(--sk-line));
    opacity: .8;
  }
}

@container style(--sk-notes-role-ink-1) {
  body[data-skin-family="glass"] :is(.np-row-role, .np-note-role, .np-pill--open) { color: var(--sk-notes-role-ink-1, var(--gold-7)); }
  body[data-skin-family="glass"] .notes-page .np-row.is-resolved { opacity: .85; }
}
@container style(--sk-notes-timecode-ink-1) {
  body[data-skin-family="glass"] .np-tc { color: var(--sk-notes-timecode-ink-1, var(--ink-blue-16)); }
}

/* Optional recessed ring profile. Bevels are painted inside the SVG's existing box. */
@container style(--sk-donut-profile: gutter) {
  body[data-skin-family="glass"] .topbar .tb-donut { filter: none; }
  body[data-skin-family="glass"] .topbar .tb-donut-gutter { opacity: 1; }
  body[data-skin-family="glass"] .topbar .tb-donut-sheen { opacity: 0.25; }
  body[data-skin-family="glass"] .topbar .tb-left .tb-donut-sheen { opacity: 0; }
  body[data-skin-family="glass"] .topbar .tb-donut-label {
    --ink-on-dark: var(--sk-donut-gutter-ink-1, var(--sk-ink));
    --ink-on-dark-muted: var(--sk-donut-gutter-ink-1, var(--sk-ink));
  }
  body[data-skin-family="glass"] .topbar .tb-left .tb-donut-wrap .tb-donut-darken {
    background: radial-gradient(circle at 45% 42%, color-mix(in srgb, var(--sk-donut-gutter-face-1, var(--sk-surface)) 95%, var(--sk-light)), var(--sk-donut-gutter-face-1, var(--sk-surface)) 75%);
    box-shadow: inset 0 3px 9px color-mix(in srgb, var(--sk-donut-gutter-shadow-1, var(--sk-dark)) 22%, transparent), inset 0 -1px 2px color-mix(in srgb, var(--sk-donut-gutter-light-1, var(--sk-light)) 65%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    clip-path: none;
  }
}


@container style(--sk-photo-veil: none) {
  body[data-skin-family="glass"].has-backdrop-image:not(.has-style-veil)::before { background: none; }
}

/* Material sits below the existing lighting, not on top of it. Glass surfaces
   without a tile keep their original gradient, blur, rim and inset shadows. */
@container style(--sk-texture: on) and style(--sk-tex-inset: on) and (not style(--sk-tex-panel-image: none)) {
  body[data-skin-family="glass"] .view-page {
    background-image:
      linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 55%),
      var(--sk-tex-panel-image),
      linear-gradient(180deg, color-mix(in srgb, var(--sk-glass-fill-4, var(--sk-surface)) 92%, transparent), color-mix(in srgb, var(--sk-glass-panel-lo-1, var(--sk-surface)) 92%, transparent));
    background-size: auto, var(--sk-tex-panel-size), auto;
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat, repeat, no-repeat;
    background-blend-mode: normal, var(--sk-tex-blend), normal;
  }
  body[data-skin-family="glass"] .shots-panel.glass {
    background-image:
      linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 55%),
      var(--sk-tex-panel-image),
      linear-gradient(180deg, color-mix(in srgb, var(--sk-row-surface, var(--sk-surface)) 92%, transparent), color-mix(in srgb, var(--sk-row-surface, var(--sk-surface)) 92%, transparent));
    background-size: auto, var(--sk-tex-panel-size), auto;
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat, repeat, no-repeat;
    background-blend-mode: normal, var(--sk-tex-blend), normal;
  }
  body[data-skin-family="glass"] .topbar {
    background-image:
      linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 60%),
      var(--sk-tex-panel-image),
      linear-gradient(var(--sk-stats-surface), var(--sk-stats-surface));
    background-size: auto, var(--sk-tex-panel-size), auto;
    background-position: 0 0, calc(7 * var(--sk-tex-step-x)) calc(7 * var(--sk-tex-step-y)), 0 0;
    background-repeat: no-repeat, repeat, no-repeat;
    background-blend-mode: normal, var(--sk-tex-blend), normal;
  }
}
@container style(--sk-texture: on) and style(--sk-tex-inset: on) and (not style(--sk-tex-rail-image: none)) {
  body[data-skin-family="glass"] .sidebar {
    background-image: linear-gradient(var(--glass-rail-top), var(--glass-rail-bottom)), var(--sk-tex-rail-image);
    background-size: auto, var(--sk-tex-rail-size);
    background-position: 0 0, 0 0;
    background-repeat: no-repeat, repeat;
  }
}
@container style(--sk-texture: on) and style(--sk-tex-inset: on) and (not style(--sk-tex-card-image: none)) {
  body[data-skin-family="glass"] .right-column .rc-card {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 60%), var(--sk-tex-card-image), linear-gradient(180deg, color-mix(in srgb, var(--sk-right-column-fill-1, var(--sk-surface)) 92%, transparent), color-mix(in srgb, var(--sk-right-column-fill-2, var(--sk-surface)) 92%, transparent));
    background-size: auto, var(--sk-tex-card-size), auto;
    background-position: 0 0, calc(sibling-index() * var(--sk-tex-step-x)) calc(sibling-index() * var(--sk-tex-step-y)), 0 0;
    background-repeat: no-repeat, repeat, no-repeat;
    background-blend-mode: normal, var(--sk-tex-blend), normal;
  }
  body[data-skin-family="glass"] .footer-row .rc-card {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 60%), var(--sk-tex-card-image), linear-gradient(180deg, color-mix(in srgb, var(--sk-footer-row-fill-1, var(--sk-surface)) 92%, transparent), color-mix(in srgb, var(--sk-footer-row-fill-2, var(--sk-surface)) 92%, transparent));
    background-size: auto, var(--sk-tex-card-size), auto;
    background-position: 0 0, calc(sibling-index() * var(--sk-tex-step-x)) calc(sibling-index() * var(--sk-tex-step-y)), 0 0;
    background-repeat: no-repeat, repeat, no-repeat;
    background-blend-mode: normal, var(--sk-tex-blend), normal;
  }
}

/* Transparent stone detail must not be buried under the rail's 94% fill. */
@container style(--sk-texture: on) and style(--sk-tex-inset: on) and style(--sk-tex-blend: normal) {
  body[data-skin-family="glass"] .sidebar {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 60%), var(--sk-tex-rail-image), linear-gradient(var(--glass-rail-top), var(--glass-rail-bottom));
    background-size: auto, var(--sk-tex-rail-size), auto;
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat, repeat, no-repeat;
    background-blend-mode: normal;
  }
}

/* Match the embedded stone to the independently selected Overview tone. */
@container style(--sk-texture: on) and style(--sk-tex-matte: on) {
  body[data-skin-family="glass"][data-content-tone="light"] .overview-main .shots-panel.glass {
    --sk-tex-panel-image: var(--sk-tex-light-panel-image);
  }
  body[data-skin-family="glass"][data-content-tone="dark"] .overview-main .shots-panel.glass {
    --sk-tex-panel-image: var(--sk-tex-dark-panel-image);
  }
}
@container style(--sk-texture: on) and style(--sk-tex-inset: on) and style(--sk-tex-matte: on) {
  body[data-skin-family="glass"][data-content-tone] .overview-main .shots-panel.glass {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--content-tone-hi, var(--sk-light)) 4%, transparent), transparent 60%), linear-gradient(color-mix(in srgb, var(--content-tone-panel, var(--sk-surface)) var(--sk-tex-matte-cover), transparent), color-mix(in srgb, var(--content-tone-panel, var(--sk-surface)) var(--sk-tex-matte-cover), transparent)), var(--sk-tex-panel-image);
    background-size: auto, auto, var(--sk-tex-panel-size);
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: normal;
  }
}
@container style(--sk-texture: on) and style(--sk-tex-inset: on) and style(--sk-tex-blend: normal) and (not style(--sk-tex-matte: on)) {
  body[data-skin-family="glass"][data-content-tone] .overview-main .shots-panel.glass {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--content-tone-hi, var(--sk-light)) 4%, transparent), transparent 60%), var(--sk-tex-panel-image), linear-gradient(var(--content-tone-panel, var(--sk-surface)), var(--content-tone-panel, var(--sk-surface)));
    background-size: auto, var(--sk-tex-panel-size), auto;
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat, repeat, no-repeat;
    background-blend-mode: normal;
  }
}

/* A dark stone surface is independent of the mixed skin's pale center tile. */
@container style(--sk-texture: on) and style(--sk-tex-inset: on) and style(--sk-tex-dark-stone: on) {
  body[data-skin-family="glass"] .topbar {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--sk-stats-surface) var(--sk-tex-dark-cover), transparent), color-mix(in srgb, var(--sk-stats-surface) var(--sk-tex-dark-cover), transparent)), var(--sk-tex-dark-image);
    background-size: auto, auto, var(--sk-tex-dark-size);
    background-position: 0 0, 0 0, calc(7 * var(--sk-tex-step-x)) calc(7 * var(--sk-tex-step-y));
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: normal;
  }
  body[data-skin-family="glass"] .sidebar {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--sk-sidebar-fill-2, var(--sk-surface)) var(--sk-tex-dark-cover), transparent), color-mix(in srgb, var(--sk-sidebar-fill-3, var(--sk-surface)) var(--sk-tex-dark-cover), transparent)), var(--sk-tex-dark-image);
    background-size: auto, auto, var(--sk-tex-dark-size);
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: normal;
  }
  body[data-skin-family="glass"] .view-page {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--sk-glass-fill-4, var(--sk-surface)) var(--sk-tex-dark-cover), transparent), color-mix(in srgb, var(--sk-glass-panel-lo-1, var(--sk-surface)) var(--sk-tex-dark-cover), transparent)), var(--sk-tex-dark-image);
    background-size: auto, auto, var(--sk-tex-dark-size);
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: normal;
  }
  body[data-skin-family="glass"] .right-column .rc-card {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--sk-right-column-fill-1, var(--sk-surface)) var(--sk-tex-dark-cover), transparent), color-mix(in srgb, var(--sk-right-column-fill-2, var(--sk-surface)) var(--sk-tex-dark-cover), transparent)), var(--sk-tex-dark-image);
    background-size: auto, auto, var(--sk-tex-dark-size);
    background-position: 0 0, 0 0, calc(sibling-index() * var(--sk-tex-step-x)) calc(sibling-index() * var(--sk-tex-step-y));
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: normal;
  }
  body[data-skin-family="glass"] .footer-row .rc-card {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--sk-footer-row-fill-1, var(--sk-surface)) var(--sk-tex-dark-cover), transparent), color-mix(in srgb, var(--sk-footer-row-fill-2, var(--sk-surface)) var(--sk-tex-dark-cover), transparent)), var(--sk-tex-dark-image);
    background-size: auto, auto, var(--sk-tex-dark-size);
    background-position: 0 0, 0 0, calc(sibling-index() * var(--sk-tex-step-x)) calc(sibling-index() * var(--sk-tex-step-y));
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: normal;
  }
  body[data-skin-family="glass"][data-content-tone="dark"] .overview-main .shots-panel.glass {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--content-tone-panel, var(--sk-surface)) var(--sk-tex-dark-cover), transparent), color-mix(in srgb, var(--content-tone-panel, var(--sk-surface)) var(--sk-tex-dark-cover), transparent)), var(--sk-tex-dark-image);
    background-size: auto, auto, var(--sk-tex-dark-size);
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: normal;
  }
}
@container style(--sk-texture: on) and style(--sk-tex-inset: on) and style(--sk-tex-dark-stone: on) and style(--sk-tex-dark-center: on) {
  body[data-skin-family="glass"]:not([data-content-tone]) .overview-main .shots-panel.glass {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--sk-row-surface, var(--sk-surface)) var(--sk-tex-dark-cover), transparent), color-mix(in srgb, var(--sk-row-surface, var(--sk-surface)) var(--sk-tex-dark-cover), transparent)), var(--sk-tex-dark-image);
    background-size: auto, auto, var(--sk-tex-dark-size);
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: normal;
  }
}

/* Opaque, quiet stone is embedded beneath each surface's own tinted fill. */
@container style(--sk-texture: on) and style(--sk-tex-inset: on) and style(--sk-tex-matte: on) {
  body[data-skin-family="glass"] .view-page {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--sk-glass-fill-4, var(--sk-surface)) var(--sk-tex-matte-cover), transparent), color-mix(in srgb, var(--sk-glass-panel-lo-1, var(--sk-surface)) var(--sk-tex-matte-cover), transparent)), var(--sk-tex-panel-image);
    background-size: auto, auto, var(--sk-tex-panel-size);
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: normal;
  }
  body[data-skin-family="glass"] .shots-panel.glass {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--sk-row-surface, var(--sk-surface)) var(--sk-tex-matte-cover), transparent), color-mix(in srgb, var(--sk-row-surface, var(--sk-surface)) var(--sk-tex-matte-cover), transparent)), var(--sk-tex-panel-image);
    background-size: auto, auto, var(--sk-tex-panel-size);
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: normal;
  }
  body[data-skin-family="glass"] .topbar {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--sk-stats-surface) var(--sk-tex-matte-cover), transparent), color-mix(in srgb, var(--sk-stats-surface) var(--sk-tex-matte-cover), transparent)), var(--sk-tex-panel-image);
    background-size: auto, auto, var(--sk-tex-panel-size);
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: normal;
  }
  body[data-skin-family="glass"] .sidebar {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--glass-rail-top) var(--sk-tex-matte-rail-cover), transparent), color-mix(in srgb, var(--glass-rail-bottom) var(--sk-tex-matte-rail-cover), transparent)), var(--sk-tex-rail-image);
    background-size: auto, auto, var(--sk-tex-rail-size);
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: normal;
  }
  body[data-skin-family="glass"] .right-column .rc-card {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--sk-right-column-fill-1, var(--sk-surface)) var(--sk-tex-matte-cover), transparent), color-mix(in srgb, var(--sk-right-column-fill-2, var(--sk-surface)) var(--sk-tex-matte-cover), transparent)), var(--sk-tex-card-image);
    background-size: auto, auto, var(--sk-tex-card-size);
    background-position: 0 0, 0 0, calc(sibling-index() * var(--sk-tex-step-x)) calc(sibling-index() * var(--sk-tex-step-y));
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: normal;
  }
  body[data-skin-family="glass"] .footer-row .rc-card {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--sk-footer-row-fill-1, var(--sk-surface)) var(--sk-tex-matte-cover), transparent), color-mix(in srgb, var(--sk-footer-row-fill-2, var(--sk-surface)) var(--sk-tex-matte-cover), transparent)), var(--sk-tex-card-image);
    background-size: auto, auto, var(--sk-tex-card-size);
    background-position: 0 0, 0 0, calc(sibling-index() * var(--sk-tex-step-x)) calc(sibling-index() * var(--sk-tex-step-y));
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: normal;
  }
}

/* Optional Generate-only accent: reuse the existing lit gradient and hover treatment. */
@container style(--sk-generate-fill-1) {
  body[data-skin-family="glass"] .gen-go-btn {
    --sk-pill-button-add-fill-1: var(--sk-generate-fill-1, var(--sk-ramp-0));
    --sk-pill-button-add-fill-2: var(--sk-generate-fill-2, var(--sk-deep));
    --sk-pill-button-add-fill-3: var(--sk-generate-hover-1, var(--sk-ramp-0));
    --sk-pill-button-add-fill-4: var(--sk-generate-hover-2, var(--sk-deep));
    --sk-cta-ink-1: var(--sk-generate-ink-1, var(--sk-ink));
    --sk-cta-line-1: var(--sk-generate-line-1, var(--sk-ramp-0));
    --sk-pill-button-add-line-1: var(--sk-generate-line-1, var(--sk-ramp-0));
    --sk-a1: var(--sk-generate-fill-1, var(--sk-ramp-0));
    --sk-pill-button-add-shadow-1: var(--sk-generate-line-1, var(--sk-light));
  }
  body[data-skin-family="glass"] .gen-go-btn:disabled {
    color: var(--sk-generate-ink-1, var(--sk-ink));
  }
}

/* Optional raised Generate controls; inactive unless a skin opts in. */
@container style(--sk-gen-control-fill-1) {
  body[data-skin-family="glass"] :is(.gen-submode-btn, .gen-mode-btn, .gen-model-btn, .gen-res-btn, .ga-craft-intent, .ga-savepreset-pill, .gen-craft-preset-load, .gen-craft-btn--adjust, .ga-craft-btn--adjust) {
    background: var(--sk-gen-control-fill-1, var(--sk-surface));
    color: var(--sk-gen-control-ink-1, var(--ink));
  }
}
@container style(--sk-gen-control-hover-1) {
  body[data-skin-family="glass"] :is(.gen-submode-btn, .gen-mode-btn, .gen-model-btn, .gen-res-btn, .ga-craft-intent, .ga-savepreset-pill, .gen-craft-preset-load, .gen-craft-btn--adjust, .ga-craft-btn--adjust):hover:not(:disabled):not(.is-active):not(.is-on),
  body[data-skin-family="glass"] .pill-button:not(.pill-button--add):hover:not(:disabled) {
    background: var(--sk-gen-control-hover-1, var(--sk-surface));
  }
}
@container style(--sk-gen-control-active-1) {
  body[data-skin-family="glass"] :is(.gen-submode-btn, .gen-mode-btn, .gen-model-btn, .gen-res-btn).is-active,
  body[data-skin-family="glass"] .ga-craft-intent.is-on {
    background: var(--sk-gen-control-active-1, var(--sk-surface));
    color: var(--sk-gen-control-ink-1, var(--ink));
  }
}
@container style(--sk-craft-ink-1) {
  body[data-skin-family="glass"] .gen-craft-btn:not(.gen-craft-btn--adjust) {
    color: var(--sk-craft-ink-1, color-mix(in srgb, var(--ink-umber-2) 47%, var(--mix-dark)));
  }
}
@container style(--sk-recent-selected-fill-1) {
  body[data-skin-family="glass"] .gen-gens-card.is-current,
  body[data-skin-family="glass"] .ga-recent-item.is-active {
    background: var(--sk-recent-selected-fill-1, var(--sk-surface));
    color: var(--sk-recent-selected-ink-1, var(--ink));
  }
  body[data-skin-family="glass"] .gen-gens-card.is-current :is(.gen-gens-label, .gen-gens-model),
  body[data-skin-family="glass"] .ga-recent-item.is-active :is(.ga-recent-date, .ga-recent-model) {
    color: var(--sk-recent-selected-ink-1, var(--ink));
  }
}

/* (24 Sep 2026, the night-blue slate skin's every-page audit) three texts no slot reached. Each rule exists only once a
   skin sets its slot, and its fallback is what the component paints, so every other skin repaints nothing.
   Generate's "Push to shot" is a pale leaf wash with a 32% leaf ink: over the family's dark light-mix an amber
   leaf leaves at most 3.1:1 whatever the leaf, so a skin may give it its own fill and ink. Canvas's "Saved" is
   --olive as text on the canvas board. */
@container style(--sk-push-ink-1) {
  body[data-skin-family="glass"] .gen-gens-act--push:not(.is-pushed) { color: var(--sk-push-ink-1, color-mix(in srgb, var(--leaf-bright) 32%, var(--mix-dark))); }
}
@container style(--sk-push-fill-1) {
  body[data-skin-family="glass"] .gen-gens-act--push:not(.is-pushed) {
    background: linear-gradient(135deg, var(--sk-push-fill-1, var(--leaf-bright)), var(--sk-push-fill-2, var(--pale-green)));
    border-color: color-mix(in srgb, var(--sk-push-line-1, var(--ok)) 60%, transparent);
  }
}
@container style(--sk-cv-saved-ink-1) {
  body[data-skin-family="glass"] .cv-save--saved { color: var(--sk-cv-saved-ink-1, var(--olive)); }
}
/* 24 Sep 2026 - Generate > Assets ACTIONS box. On a mid-amber fill neither a dark nor a pale label reaches 4.5:1
   (the night-blue slate skin: "Send to WIP" / "Unpromote" read 1.0:1, "Promote to Asset" 2.6:1). A skin that sets the
   slot gives the button its own fill and label; every other skin repaints nothing. */
@container style(--sk-ga-promote-fill-1) {
  body[data-skin-family="glass"] .ga-action--promote {
    background: linear-gradient(135deg, var(--sk-ga-promote-fill-1, var(--leaf-bright)), var(--sk-ga-promote-fill-2, var(--pale-green)));
    color: var(--sk-ga-promote-ink-1, var(--sk-ink));
  }
}
@container style(--sk-ga-wip-fill-1) {
  body[data-skin-family="glass"] .ga-action--wip {
    background: linear-gradient(135deg, var(--sk-ga-wip-fill-1, var(--gold-13)), var(--sk-ga-wip-fill-2, var(--gold-17)));
    color: var(--sk-ga-wip-ink-1, var(--sk-ink));
  }
}

/* 24 Sep 2026 (round 3) - Hugo: "we STILL dont have that gradient coming from the drawer and going over the BG image and
   we still see that corner". Measured: the rail is frosted (blur 24px) but the veil began at 82% of its fill with NO
   blur, so the page jumped from frosted to sharp raindrops at the rail edge and the corner outside the main panel's curve
   showed that sharp photo. The veil now starts AS the rail (same frost, same fill, mask 100%) and fades out gradually over
   its 1200px: the drawer continues over the photo, and the corner outside the curve is the rail itself. */
/* 24 Sep 2026 (later) - the fade's STOPS are forest's own (sidebar.css .app-shell::after: 82% at the rail edge, 55% at 30%,
   28% at 60%, 10% at 85%, gone at 100% of its 1200px). Hugo: "check how we did it on paradise found, with a gradient
   coming from the edge of the drawer ... to fade it gradually". The earlier stops lost half the colour in ~140px. */
/* ==== THE RAIL MELTS INTO THE PHOTO (24 Sep 2026) ============================================================
   Hugo, in the night-blue slate skin: "why do we still have that little corner top left of the main panel? We completely
   lost the gradient transition going from the left drawer onto the bg image." A hard edge ran down the rail's right
   side and a rounded notch sat at its top, drawn by: the main column's rim (header.css: a 1px light line inset along
   its left and top edges, round its 26px corner) and its drop shadow thrown LEFT onto the rail (the rail's last ~30px
   went dark); the rail's own light hairline on its right edge and its dark shadow onto the page; and a veil that began
   as the page's deep colour, not the rail's (and, rounded since 18 Sep, left its corners bare - sidebar.css). In glass
   the main column paints nothing, so it has no rim or shadow either; the rail keeps its top catch-light; and the veil
   is the rail's own fill at the rail's own strength at its edge, fading into the photo over ~700px (a mask, so the
   colour down the veil follows the rail's top-to-bottom gradient). A skin that sets --sk-shell-veil-1 keeps the veil
   it chose. Paint only. */
/* 24 Sep 2026 - REVERTED the line that stood here (`.main-content { box-shadow: none; }`). Hugo: "where is now the
   corner main panel gone???? Instead of FIXING the issue, you COMPLETELY REMOVED IT" - "check how its done on the
   paradise found visual style and replicate that". The main panel keeps Paradise Found's own edge (header.css: the
   light rim along its rounded top-left corner and the shadow it throws onto the rail), so the rounded panel sits ON
   the rail exactly as in forest. The corner outside that curve is the rail's colour (the square veil above paints the
   rail's fill at full strength at its left edge), so there is no notch. */
body[data-skin-family="glass"] .sidebar {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sk-sidebar-shadow-2, color-mix(in srgb, var(--sk-ramp-3) 14%, var(--sk-light))) 10%, transparent);
}
@container not style(--sk-shell-veil-1) {
  body[data-skin-family="glass"]:not([data-ui-tier="m"]) .app-shell::after,
  body[data-skin-family="glass"][data-ui-tier="m"] .app-shell::after {
    background: linear-gradient(180deg, var(--glass-rail-top) 0%, var(--glass-rail-bottom) 100%);
    /* the rail's own frost (sidebar.css), so the veil starts AS the rail and the drawer continues over the photo */
    -webkit-backdrop-filter: blur(24px) saturate(1.15);
    backdrop-filter: blur(24px) saturate(1.15);
    -webkit-mask-image: linear-gradient(to right, var(--sk-dark) 0%, color-mix(in srgb, var(--sk-dark) 74%, transparent) 12%, color-mix(in srgb, var(--sk-dark) 50%, transparent) 30%, color-mix(in srgb, var(--sk-dark) 26%, transparent) 58%, color-mix(in srgb, var(--sk-dark) 9%, transparent) 82%, transparent 100%);
    mask-image: linear-gradient(to right, var(--sk-dark) 0%, color-mix(in srgb, var(--sk-dark) 74%, transparent) 12%, color-mix(in srgb, var(--sk-dark) 50%, transparent) 30%, color-mix(in srgb, var(--sk-dark) 26%, transparent) 58%, color-mix(in srgb, var(--sk-dark) 9%, transparent) 82%, transparent 100%);
  }
}

/* ==== THE SEPARATION LADDER (24 Sep 2026) =====================================================================
   Hugo, on Admin in Neon Synth Wave and Rain At Dusk: "the Admin panel on the Synth Wave UI is very messy,
   panels should ALWAYS be slightly lighter than the background so we have visual separation ... make that a rule."
   The user-management, memberships and permissions panels, the invite card, the user and membership rows and the
   matrix cells were all within 1-2 L* of each other: a panel inside the page panel repainted the same dark smoked
   glass over it, the user table and the matrix sat in a DARK well (the page colour at 80%) and the rows were a 3%
   white wash. In glass every nesting level is now a light wash over the level below, so each is lighter than what it
   sits on BY CONSTRUCTION, whatever the photo: a panel inside the page panel --sk-sep-panel, a card inside that
   --sk-sep-card, a row or cell --sk-sep-row (percent of the lift colour, --sk-sep-lift-1, default the skin's ink).
   The panels that sit straight on the photo take a lift under their own glass (--sk-sep-page, a background colour
   beneath the glass gradient: nothing of their material is replaced), and the shot rows' surface is lifted towards
   the same colour (--sk-sep-row-surface). The table and matrix wrappers paint no well, as in forest (the rows are
   the surface). A granted permission cell is a solid accent fill (--check-on-fill: --sk-check-on-fill-1, default the
   accent) with a dark tick (--check-on-ink: --sk-check-on-ink-1, then the skin's accent ink, then the page colour).
   Measured: .claude/skills/skin-from-mockup/scripts/audit-separation.js; token guard: test/skinSeparation.test.js. */
body[data-skin-family="glass"] {
  --sk-sep-page: 14%;
  --sk-sep-panel: 8%;
  --sk-sep-card: 7%;
  --sk-sep-row: 7%;
  --sk-sep-row-surface: 10%;
  --sep-lift: var(--sk-sep-lift-1, var(--sk-ink));
  --sep-page-fill: color-mix(in srgb, var(--sep-lift) var(--sk-sep-page), transparent);
  --sep-panel: var(--card-bg-light-solid);
  --sep-panel-fill: color-mix(in srgb, var(--sep-lift) var(--sk-sep-panel), transparent);
  --sep-card-fill: color-mix(in srgb, var(--sep-lift) var(--sk-sep-card), transparent);
  --sep-row-fill: color-mix(in srgb, var(--sep-lift) var(--sk-sep-row), transparent);
  --sep-row-fill-hover: color-mix(in srgb, var(--sep-lift) calc(var(--sk-sep-row) + 4%), transparent);
  --sep-panel-ink-muted: color-mix(in srgb, var(--ink-muted) 68%, var(--ink));
  --sep-row-base: var(--sk-row-surface);
  --check-on-fill: var(--sk-check-on-fill-1, var(--leaf));
  --check-on-ink: var(--sk-check-on-ink-1, var(--sk-accent-ink-1, var(--sk-page)));
  --disabled-fill: color-mix(in srgb, var(--ink-muted) 24%, var(--card-bg-solid));
  --disabled-ink: var(--ink);
  --disabled-line: color-mix(in srgb, var(--ink-muted) 45%, transparent);
}
/* the panels on the photo: a lift beneath their glass (their gradient, rim and pools stay as they are). The :is list
   carries the weight of the right-column and footer card rules; the Overview's content tone (shots.css) still wins. */
body[data-skin-family="glass"] :is(.glass, .glass-dark, .view-page, .right-column .rc-card, .footer-row .rc-card):where(:not(.view-page *)) { background-color: var(--sep-page-fill); }
/* a panel inside the page panel */
body[data-skin-family="glass"] .view-page :is(.glass, .glass-dark) { background: var(--sep-panel-fill); --ink-muted: var(--sep-panel-ink-muted); }
/* the table and matrix wrappers: no dark well (forest paints none) */
body[data-skin-family="glass"] :is(.admin-table, .admin-matrix) { background: transparent; }
/* cards and rows */
body[data-skin-family="glass"] :is(.admin-invite-form, .theme-card) { background: var(--sep-card-fill); }
body[data-skin-family="glass"] .theme-card:hover:not(.is-active) { background: var(--sep-row-fill-hover); }
body[data-skin-family="glass"] :is(.admin-table-row, .admin-matrix-rowhead, .admin-matrix-toggle, .admin-integration, .proj-members-block) { background: var(--sep-row-fill); }
body[data-skin-family="glass"] .proj-members-block { box-shadow: -12px 0 0 var(--sep-row-fill), 12px 0 0 var(--sep-row-fill); }
body[data-skin-family="glass"] :is(.admin-table-row, .admin-matrix-rowhead, .admin-integration):hover { background: var(--sep-row-fill-hover); }
/* the shot rows: their own surface, one step towards the lift */
body[data-skin-family="glass"] .shot-row {
  --sk-row-surface: color-mix(in srgb, var(--sep-row-base), var(--sep-lift) var(--sk-sep-row-surface));
  /* ... and its muted lines a touch nearer the row's ink, so they keep 4.5:1 on the lighter row */
  --ink-muted: color-mix(in srgb, var(--sk-row-ink-muted, var(--sk-ink-muted-1, color-mix(in srgb, var(--sk-line) 72%, var(--sk-light)))) 80%, var(--sk-row-ink, var(--sk-ink)));
  --ink-on-dark-muted: color-mix(in srgb, var(--sk-row-ink-muted, var(--sk-ink-on-dark-muted-1, color-mix(in srgb, var(--sk-line) 72%, var(--sk-light)))) 80%, var(--sk-row-ink, var(--sk-ink)));
  --ink-soft: color-mix(in srgb, var(--sk-row-ink-soft, var(--sk-row-ink-muted, color-mix(in srgb, var(--sk-line) 80%, var(--sk-dark)))) 80%, var(--sk-row-ink, var(--sk-ink)));
}
/* a textured (stone) shots panel is painted from the rows' own surface (the texture rules above read --sk-row-surface
   on the panel): the panel takes that colour one step deeper, so the rows stand apart from it. The rows keep theirs. */
@container style(--sk-texture: on) {
  body[data-skin-family="glass"] .shots-panel.glass { --sk-row-surface: color-mix(in srgb, var(--sep-row-base), var(--sk-dark) 12%); }
}
/* accent-coloured text on the lifted panels keeps its hue and its 4.5:1: it is drawn a step toward the page ink (the
   every-page audit: Admin's Active pill 3.2, Delete 3.1, the Director and Lead headers 4.4 and 3.6, Reports' tab counts
   3.6-4.3 in Rain At Dusk once their panels were lighter) */
body[data-skin-family="glass"] .view-page .admin-status-pill--active { color: color-mix(in srgb, var(--ok) 55%, var(--ink)); }
body[data-skin-family="glass"] .view-page :is(.admin-delete-btn, .admin-remove-btn) { color: color-mix(in srgb, var(--danger) 55%, var(--ink)); }
body[data-skin-family="glass"] .view-page .admin-matrix-head.admin-matrix-head--admin:not(.admin-matrix-head--corner) { color: color-mix(in srgb, var(--role-admin) 55%, var(--ink)); }
body[data-skin-family="glass"] .view-page .admin-matrix-head.admin-matrix-head--producer:not(.admin-matrix-head--corner) { color: color-mix(in srgb, var(--leaf) 55%, var(--ink)); }
body[data-skin-family="glass"] .view-page .admin-matrix-head.admin-matrix-head--supervisor:not(.admin-matrix-head--corner) { color: color-mix(in srgb, var(--warn) 55%, var(--ink)); }
body[data-skin-family="glass"] .view-page .admin-matrix-head.admin-matrix-head--director:not(.admin-matrix-head--corner) { color: color-mix(in srgb, var(--role-director) 55%, var(--ink)); }
body[data-skin-family="glass"] .view-page .admin-matrix-head.admin-matrix-head--lead:not(.admin-matrix-head--corner) { color: color-mix(in srgb, var(--role-lead) 55%, var(--ink)); }
body[data-skin-family="glass"] .view-page .admin-matrix-head.admin-matrix-head--artist:not(.admin-matrix-head--corner) { color: color-mix(in srgb, var(--role-artist) 55%, var(--ink)); }
body[data-skin-family="glass"] .view-page .admin-matrix-head.admin-matrix-head--tester:not(.admin-matrix-head--corner) { color: color-mix(in srgb, var(--amber) 55%, var(--ink)); }
body[data-skin-family="glass"] .view-page .admin-matrix-head.admin-matrix-head--editor:not(.admin-matrix-head--corner) { color: color-mix(in srgb, var(--role-editor) 55%, var(--ink)); }
body[data-skin-family="glass"] .view-page .rvx-tab b { color: color-mix(in srgb, var(--sk-rvx-num-ink-1, var(--leaf-ink)) 60%, var(--ink)); }
/* To-do's "Note" label is the same gold as the Notes page's roles: a skin's --sk-notes-role-ink-1 reaches it too */
@container style(--sk-notes-role-ink-1) {
  body[data-skin-family="glass"] .todo-row-type--note { color: var(--sk-notes-role-ink-1, var(--gold-7)); }
}
/* Admin's integration host pills (On this PC / On Railway): their tinted fills keep, the label is the page ink (a
   forest blue on a dark panel read 1.6:1); a membership row's faded aspect and id read at 85%, not 50-55% */
body[data-skin-family="glass"] :is(.pintg-host, .pintg-host--railway) { color: var(--ink); }
body[data-skin-family="glass"] .proj-members-row span[style*="opacity"] { opacity: 0.85 !important; }
/* a resting Settings choice (60% of the ink) sits on the lighter panel: 72% keeps it quiet and 4.5:1 */
body[data-skin-family="glass"] .view-page .setting-select-btn:not(.is-active) { color: color-mix(in srgb, var(--ink) 72%, transparent); }
/* Generate's Voice Over speaker label (the accent, 3.2:1 on its lighter card): a step toward the ink */
body[data-skin-family="glass"] .view-page .gen-vo-group-speaker { color: color-mix(in srgb, var(--leaf) 55%, var(--ink)); }
/* Settings' accent-inked chips and buttons (a selected menu preset, In use, Delete preset, Reset) on the lighter panel */
body[data-skin-family="glass"] .view-page :is(.mp-chip.is-sel, .bg-picker-btn:not(.bg-picker-btn--ghost)) { color: color-mix(in srgb, var(--leaf-ink) 55%, var(--ink)); }
body[data-skin-family="glass"] .view-page .bg-picker-btn--ghost { color: color-mix(in srgb, var(--danger-ink) 55%, var(--ink)); }
/* the solid checks */
body[data-skin-family="glass"] .admin-matrix-toggle.is-on { background: var(--check-on-fill); border-color: var(--check-on-fill); color: var(--check-on-ink); }
body[data-skin-family="glass"] .mp-page.is-on { background: var(--check-on-fill); border-color: var(--check-on-fill); color: var(--check-on-ink); }
body[data-skin-family="glass"] .mp-page.is-on .mp-page-check { color: var(--check-on-ink); }
body[data-skin-family="glass"] .doc-access-toggle.is-allowed { background: var(--check-on-fill); border-color: var(--check-on-fill); color: var(--check-on-ink); }

/* READABLE TAGS, BUTTONS AND DISABLED CONTROLS (24 Sep 2026). Hugo, on Generate -> Assets in Rain At Dusk:
   "some text and buttons are not good" - the category tag (an accent ink on its own accent tint), Notes and
   Open asset (forest's dark tan and green inks over a dark panel), "Approved ✓" and a disabled Generate asset
   (faded to 45-55%, grey on brown). The tag and the two buttons keep their tinted fills and take the page ink; a
   disabled Generate asset takes the quiet disabled fill with the full ink (tokens.css, readable at 4.5:1 or more)
   instead of the accent gradient faded out. The selector repeats the class so it outweighs the lit-button rules. */
body[data-skin-family="glass"] :is(.ga-kind-pill, .ga-open-btn, .ga-notes-btn) { color: var(--ink); }
body[data-skin-family="glass"] :is(.gen-go-btn.gen-go-btn, .ga-action.ga-action):disabled {
  background: var(--disabled-fill);
  border-color: var(--disabled-line);
  color: var(--disabled-ink);
}