/* AWAKEN AI - the stylesheet. Two modes, both dark (R44): Arise (the default, html[data-theme="arise"]) and Dark
   (html[data-theme="dark"]). Built from the approved design boards (design/board.html, design/board-modes.html, design/NOTES.md):
   the first :root block below is design/tokens.css copied verbatim and IS the Arise look (tests/client.test.mjs checks it is
   unchanged); the mode hooks, the Dark block and .keep-arise follow it, then the component rules, which read tokens only.
   Fonts are self-hosted (fonts/OFL.txt): no CDN, nothing external. */

@font-face { font-family: "Manrope"; src: url("../fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Anton"; src: url("../fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }   /* Arcs only */

:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #05070D;                                   /* near-black navy */
  --bg-2: #0A0F1C;                                 /* raised sheet / settings rows */
  --card: #0C1322;                                 /* flat card */
  --card-2: #111A2E;                               /* row inside a card */
  --line: rgba(143, 170, 220, .14);                /* hairline */
  --line-2: rgba(143, 170, 220, .26);              /* hairline, stronger */
  --tick: rgba(143, 170, 220, .42);                /* corner ticks on a card */
  --grid: rgba(143, 170, 220, .055);               /* HUD ground grid, fades down the screen */
  --grid-size: 24px;
  --bloom: rgba(31, 90, 200, .20);                 /* one cold bloom at the top of every screen */

  /* text */
  --text: #EAF1FF;                                 /* 17.6:1 */
  --text-2: #A6B3CC;                               /* captions 9.3:1 */
  --text-3: #6E7A94;                               /* decorative only (4.6:1), never body copy */

  /* the System: cyan */
  --sys: #5FE3FF;                                  /* accent for bars, rings, glow */
  --sys-text: #8FEBFF;                             /* cyan as text 13.1:1 */
  --sys-deep: #0B2552;                             /* deep blue behind the window */
  --sys-fill: rgba(11, 37, 82, .56);               /* translucent window fill */
  --sys-fill-2: rgba(8, 24, 56, .72);
  --sys-rim: rgba(95, 227, 255, .55);              /* thin cyan edge */
  --sys-rim-2: rgba(95, 227, 255, .18);
  --sys-glow: 0 0 0 1px rgba(95, 227, 255, .20), 0 0 18px rgba(95, 227, 255, .12), 0 0 48px rgba(31, 120, 255, .10);   /* restrained: a rim, not neon */
  --sys-bar-glow: 0 0 6px rgba(95, 227, 255, .35);
  --sys-scan: linear-gradient(180deg, transparent 0%, rgba(95, 227, 255, .07) 50%, transparent 100%);
  --bracket: 1px;                                  /* System window corner brackets */
  --bracket-len: 12px;
  --on-sys: #04111C;                               /* dark text on a solid cyan button 14:1 */
  --track: rgba(143, 170, 220, .14);               /* empty part of a bar */

  /* Penalty Zone: the whole accent turns red */
  --pen: #FF4D5E;
  --pen-text: #FF9AA3;                             /* 9.1:1 */
  --pen-deep: #3A0A12;
  --pen-fill: rgba(70, 9, 18, .62);
  --pen-fill-2: rgba(48, 6, 14, .78);
  --pen-rim: rgba(255, 77, 94, .6);
  --pen-rim-2: rgba(255, 77, 94, .2);
  --pen-glow: 0 0 0 1px rgba(255, 77, 94, .22), 0 0 18px rgba(255, 77, 94, .14), 0 0 48px rgba(255, 40, 60, .10);
  --pen-bar-glow: 0 0 6px rgba(255, 77, 94, .35);
  --pen-bloom: rgba(200, 30, 50, .22);
  --pen-grid: rgba(255, 120, 130, .05);
  --on-pen: #1A0407;

  /* reward moments: one warm colour, used only for chests, titles and the level number */
  --gold: #FFD166;
  --gold-text: #FFDE8A;                            /* 14.5:1 */
  --gold-glow: 0 0 28px rgba(255, 209, 102, .28);

  /* Arcs: black-and-white comic with one orange-red accent */
  --ink: #0B0B0E;
  --paper: #F4F1EA;
  --paper-2: #E6E1D6;
  --arc: #FF5A2E;                                  /* orange-red accent */
  --arc-text: #FF8A66;                             /* 8.7:1 on --bg, 8.5:1 on --ink */
  --arc-ink: #B53311;                              /* the accent as small text on --paper (≥ 4.5:1); --arc itself is 2.8:1 there, graphics only */
  --halftone: radial-gradient(rgba(11, 11, 14, .55) 0.9px, transparent 1.1px);
  --halftone-size: 5px 5px;

  /* status + states */
  --good: #58D68D;   --good-text: #8EE5B1;
  --warn: #F5B14B;   --warn-text: #F9C97A;
  --focus: #8FEBFF;

  /* coach emblems: seven original sigils in one hexagon, all the System blue (Araf's ruling, rev 1).
     The seven names stay as aliases so nothing that reads them breaks. */
  --coach: var(--sys);
  --coach-gunpark: var(--coach);
  --coach-goku: var(--coach);
  --coach-toji: var(--coach);
  --coach-jinwoo: var(--coach);
  --coach-vegeta: var(--coach);
  --coach-jiren: var(--coach);
  --coach-gojo: var(--coach);

  /* liquid glass (same names as Plate AI so the tab bar CSS/JS drop in) */
  --tabbar-bg: rgba(12, 19, 34, .94);              /* only where backdrop-filter is missing */
  --glass-fill: rgba(18, 28, 52, .62);
  --glass-fill-2: rgba(10, 16, 32, .46);
  --glass-halo: rgba(0, 0, 0, .6);
  --glass-rim: rgba(255, 255, 255, .22);
  --glass-rim-2: rgba(143, 235, 255, .12);
  --glass-edge: rgba(0, 0, 0, .35);
  --glass-light: rgba(143, 235, 255, .12);
  --glass-bright: .62;
  --glass-shadow: 0 14px 34px -16px rgba(0, 0, 0, .8), 0 2px 6px -2px rgba(0, 0, 0, .5);
  --drop-fill: rgba(143, 235, 255, .18);
  --drop-fill-2: rgba(143, 235, 255, .06);
  --drop-fill-3: rgba(143, 235, 255, .10);
  --drop-rim: rgba(200, 245, 255, .5);
  --drop-rim-2: rgba(143, 235, 255, .18);
  --drop-edge: rgba(0, 0, 0, .25);
  --drop-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5);
  --scrim: rgba(2, 4, 10, .66);

  /* shape */
  --r-window: 4px;                                 /* the System window is square: brackets, not bubbles */
  --r-card: 2px;                                   /* HUD panels: hairline + corner ticks, square */
  --r-row: 2px;
  --r-btn: 6px;                                    /* buttons, inputs, icon buttons */
  --r-chip: 4px;
  --r-sheet: 20px;                                 /* bottom sheets keep a soft top edge */
  --r-pill: 999px;                                 /* the liquid-glass tab bar only */
  --pad: 16px;
  --space: 8px;                                    /* the rhythm: 4 micro, 8 base, 16 block, 24 section */
  --tabbar-h: 64px;
  --tap: 44px;

  /* type */
  --font-sys: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", sans-serif;
  --font-arc: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --track-caps: .2em;                              /* caps labels (11 px, Manrope 600) */
  --track-caps-wide: .32em;                        /* System window titles */
  --track-hud: .04em;                              /* HUD numerals: Manrope 500, tabular, for level / XP / streak / countdown */

  /* safe areas */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* motion: only transform + opacity; 150–250 ms except the four named moments */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out-back: cubic-bezier(.2, 1.4, .3, 1);
  --t-fast: 160ms;
  --t-med: 240ms;
  --t-window: 420ms;                               /* System window materialising + scanline sweep */
  --t-chest: 900ms;
  --t-levelup: 1400ms;
  --t-arc-reveal: 600ms;                           /* comic panel reveal in Arcs */
}

/* ---------- the two modes (R44) ----------
   Arise (html[data-theme="arise"], the default) is the :root block above, untouched. Dark (html[data-theme="dark"]) is
   Plate AI's dark carried over with Arise's blue lines (Araf, R46): a neutral graphite room, flat cards with a 1 px
   blue-grey line, white primary buttons, softer corners, 160 / 240 ms motion, no glow, no brackets, no scanlines.
   The one exception is the bottom tab bar, which keeps the white-line Dark glass (R46a).
   Three blocks, in this order:
     1. mode hooks      - the values the components read that Dark changes, declared with their ARISE value, so Arise is
                          exactly what it was. (A hook that is built from --sys is NOT declared here: the component reads
                          it with a fallback, var(--hairline-sys, var(--sys-rim-2)), so it follows a .pen-mode or
                          .keep-arise element that re-colours --sys inside it.)
     2. Dark            - the override. Only tokens that differ from :root are written; --sys, --sys-text, --sys-rim,
                          --sys-rim-2, --focus, --good, --warn, --gold, --pen-text and the Arcs tokens stay Arise's.
     3. .keep-arise     - puts every Arise value back inside it, so a System pop-up, a full-screen moment or an Arcs page
                          looks the same in both modes (tests/client.test.mjs checks this block against the other two). */
:root {
  --r-rank: 0px;                                   /* the rank crest: square in Arise, a rounded square in Dark */
  --scan: .45;                                     /* opacity of the System window's scanline texture */
  --tick-size: 8px;                                /* corner ticks on a card; 0 removes them */
  --ring-glow: drop-shadow(0 0 4px rgba(95, 227, 255, .45));      /* progress ring, timer ring */
  --ring-glow-pen: drop-shadow(0 0 4px rgba(255, 77, 94, .5));    /* the same in the Penalty Zone */
  --pip-glow: 0 0 8px rgba(95, 227, 255, .5);      /* PIN dots, the selected-coach diamond */
  --accent-soft: rgba(95, 227, 255, .08);          /* fill of a selected chip */
  --accent-glow: 0 0 0 1px rgba(95, 227, 255, .14), 0 0 16px rgba(95, 227, 255, .08);   /* selected coach card, theme card, logo */
  --accent-glow-f: drop-shadow(0 0 6px rgba(95, 227, 255, .45));  /* the same as a filter (SVG emblems) */
  --hex-on: rgba(95, 227, 255, .12);               /* hexagon fill of the selected coach emblem */
  --hold-fill: radial-gradient(circle, rgba(95, 227, 255, .22), rgba(95, 227, 255, .04) 70%);   /* the vow / hold disc */
  --shadow-sheet: 0 -1px 0 rgba(143, 170, 220, .26), 0 -20px 60px rgba(0, 0, 0, .6);   /* bottom sheet lift */
  --shadow-float: 0 14px 34px -16px rgba(0, 0, 0, .8), 0 2px 6px -2px rgba(0, 0, 0, .5);   /* toast, menus */
  --scrim-light: none;                             /* light a System pop-up casts on the room (Dark only); an image layer, so none */
  --r-bar: 1px;                                    /* progress bars and the 7-day bars */
  --bubble-line: transparent;                      /* second inset line on the coach bubble (Dark only) */
  --bars-today: linear-gradient(180deg, #5FE3FF, rgba(95, 227, 255, .35));   /* today's bar in the Body chart */
}

html[data-theme="dark"] {
  /* the room: Plate AI's graphite */
  --bg: #0E0E11;                                   /* page, splash, status-bar shield, theme-color */
  --bg-2: #141418;                                 /* sheets and toasts: one step above the page, one below a card */
  --card: #1A1A1F;                                 /* cards and the in-page status window */
  --card-2: #232329;                               /* rows in a card, quiet buttons, the counter -/+ */
  --card-3: #2C2C34;                               /* pressed row / keypad press */
  --text: #F5F5F7;                                 /* 17.7:1 on --bg, 15.9 on card, 14.4 on card-2 */
  --text-2: #A3A3AE;                               /* captions: 7.7 on --bg, 6.9 on card, 6.3 on card-2, 5.5 on card-3 */
  --text-3: #74747F;                               /* decorative only */

  /* the lines: Arise's blue-grey, drawn a little stronger on graphite (R46); the System cyan itself is Arise's */
  --line: rgba(143, 170, 220, .20);
  --line-2: rgba(143, 170, 220, .32);
  --track: rgba(143, 170, 220, .16);               /* an empty bar; cyan on it 8.6:1 */
  --chip-on-line: rgba(143, 170, 220, .32);        /* a selected chip */
  --rank-line: rgba(143, 170, 220, .32);           /* the rank crest */
  --rank-fill: #232329;
  --tick: transparent; --tick-size: 0px;           /* no corner ticks */
  --grid: transparent; --bloom: transparent;       /* no HUD grid, no bloom */
  --bracket: 0px; --bracket-len: 0px;              /* no brackets on an in-page window */
  --sys-deep: #1A1A1F;
  --sys-fill: #1A1A1F; --sys-fill-2: #1A1A1F;      /* the in-page window is a flat graphite card */
  --sys-glow: 0 0 0 1px rgba(95, 227, 255, .22);   /* its edge: Arise's first ring, no bloom */
  --sys-bar-glow: 0 0 0 transparent;
  --sys-scan: none; --scan: 0;                     /* no scanline texture */
  --dot-glow: none; --ring-glow: none; --ring-glow-pen: none; --pip-glow: none;
  --accent-soft: rgba(95, 227, 255, .08);
  --accent-glow: 0 0 0 1px rgba(95, 227, 255, .30);   /* selected coach card / theme card / logo: a cyan line, no light */
  --accent-glow-f: none;
  --hex-on: rgba(95, 227, 255, .08);
  --hold-fill: radial-gradient(circle, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02) 70%);
  --bubble-line: #2A2A31;
  --r-bar: 2px;
  --selection: rgba(95, 227, 255, .30);

  /* primary buttons and toggles stay white (Plate's rule); Accept inside a pop-up is .keep-arise and stays cyan */
  --primary: #FFFFFF;
  --on-primary: #141418;                           /* 18.4:1 */

  /* the Penalty Zone in-page: the accent turns red, the surfaces stay flat graphite with a red-tinged line */
  --pen-deep: #1E1416;
  --pen-fill: #1E1416; --pen-fill-2: #1E1416;
  --pen-rim: #4D2A31; --pen-rim-2: #3A2228;
  --pen-glow: 0 0 0 1px #3A2228;
  --pen-bar-glow: 0 0 0 transparent;
  --pen-bloom: transparent; --pen-grid: transparent;
  --gold-glow: 0 0 0 transparent;

  /* the liquid-glass tab bar keeps the WHITE-LINE Dark look (R46a): Plate AI's dark glass values, neutral glass, a
     white-lit droplet, the selected label white, Arcs selected the one orange label. js/tabbar.js is the same. */
  --tab-on: #FFFFFF;
  --tab-on-arcs: #FF8A66;                          /* = --arc-text */
  --tabbar-bg: rgba(26, 26, 31, .94);
  --glass-fill: rgba(34, 34, 40, .62);             /* over --bg composites to #1A1A1F: label 11.0:1, selected 17.3:1 */
  --glass-fill-2: rgba(26, 26, 31, .46);
  --glass-rim: rgba(255, 255, 255, .26);
  --glass-rim-2: rgba(255, 255, 255, .11);
  --glass-light: rgba(255, 255, 255, .13);
  --glass-shadow: 0 14px 34px -16px rgba(0, 0, 0, .75), 0 2px 6px -2px rgba(0, 0, 0, .45);
  --drop-fill: rgba(255, 255, 255, .16);
  --drop-fill-2: rgba(255, 255, 255, .06);
  --drop-fill-3: rgba(255, 255, 255, .10);
  --drop-rim: rgba(255, 255, 255, .42);
  --drop-rim-2: rgba(255, 255, 255, .16);

  /* pop-ups over the graphite room: a darker scrim, plus the cold light the window casts on it */
  --scrim: rgba(0, 0, 0, .64);
  --scrim-light: radial-gradient(64% 42% at 50% 50%, rgba(95, 227, 255, .16), rgba(31, 90, 200, .07) 55%, transparent 76%);
  --shadow-sheet: 0 -1px 0 rgba(143, 170, 220, .20);   /* a sheet is a flat surface with a line on top */
  --shadow-float: 0 8px 28px rgba(0, 0, 0, .5);        /* Plate's float shadow: the one shadow Dark allows (toasts) */

  /* shape: softer; everything that was square is rounded and chips are pills */
  --r-window: 18px; --r-card: 18px; --r-row: 12px; --r-btn: 12px; --r-chip: 999px; --r-sheet: 28px; --r-rank: 14px;

  /* motion: Plate's two speeds, nothing slower on a regular surface; no overshoot; a window just fades in */
  --ease-out-back: cubic-bezier(.2, .7, .2, 1);
  --t-window: 240ms;
}
html[data-theme="dark"] ::selection { background: var(--selection); }

/* .keep-arise: the System pop-ups (daily quest / mission / Penalty windows, System notices), the full-screen moments (chest,
   level-up, rank-up, ARISE) and the Arcs pages put every Arise value back, so they look the same in both modes. Put it on
   the window itself, not on the scrim layer (the scrim keeps the mode's --scrim and --scrim-light). A Penalty pop-up is
   .keep-arise.pen-mode on ONE element, so this block must stay above .pen-mode: the red remap wins. Derived tokens here
   (--hairline-sys, --primary ...) are written with var() on purpose: they resolve on this element, after .pen-mode. */
.keep-arise {
  color: var(--text);
  --bg: #05070D; --bg-2: #0A0F1C; --card: #0C1322; --card-2: #111A2E; --card-3: initial;
  --line: rgba(143, 170, 220, .14); --line-2: rgba(143, 170, 220, .26); --tick: rgba(143, 170, 220, .42); --tick-size: 8px;
  --grid: rgba(143, 170, 220, .055); --bloom: rgba(31, 90, 200, .20);
  --text: #EAF1FF; --text-2: #A6B3CC; --text-3: #6E7A94;
  --sys: #5FE3FF; --sys-text: #8FEBFF; --sys-deep: #0B2552;
  --sys-fill: rgba(11, 37, 82, .56); --sys-fill-2: rgba(8, 24, 56, .72);
  --sys-rim: rgba(95, 227, 255, .55); --sys-rim-2: rgba(95, 227, 255, .18);
  --sys-glow: 0 0 0 1px rgba(95, 227, 255, .20), 0 0 18px rgba(95, 227, 255, .12), 0 0 48px rgba(31, 120, 255, .10);
  --sys-bar-glow: 0 0 6px rgba(95, 227, 255, .35);
  --sys-scan: linear-gradient(180deg, transparent 0%, rgba(95, 227, 255, .07) 50%, transparent 100%); --scan: .45;
  --bracket: 1px; --bracket-len: 12px; --on-sys: #04111C; --track: rgba(143, 170, 220, .14);
  --dot-glow: 0 0 6px var(--sys); --ring-glow: drop-shadow(0 0 4px rgba(95, 227, 255, .45)); --ring-glow-pen: drop-shadow(0 0 4px rgba(255, 77, 94, .5));
  --pip-glow: 0 0 8px rgba(95, 227, 255, .5);
  --accent-soft: rgba(95, 227, 255, .08);
  --accent-glow: 0 0 0 1px rgba(95, 227, 255, .14), 0 0 16px rgba(95, 227, 255, .08);
  --accent-glow-f: drop-shadow(0 0 6px rgba(95, 227, 255, .45)); --hex-on: rgba(95, 227, 255, .12);
  --hold-fill: radial-gradient(circle, rgba(95, 227, 255, .22), rgba(95, 227, 255, .04) 70%);
  --hairline-sys: var(--sys-rim-2); --ghost-rim: var(--sys-rim-2); --bubble-line: transparent; --r-bar: 1px;
  --chip-on-line: initial; --rank-line: initial; --rank-fill: initial; --tab-on: initial; --tab-on-arcs: initial;
  --bars-today: linear-gradient(180deg, #5FE3FF, rgba(95, 227, 255, .35)); --primary: var(--sys); --on-primary: var(--on-sys);
  --pen: #FF4D5E; --pen-text: #FF9AA3; --pen-deep: #3A0A12; --pen-fill: rgba(70, 9, 18, .62); --pen-fill-2: rgba(48, 6, 14, .78);
  --pen-rim: rgba(255, 77, 94, .6); --pen-rim-2: rgba(255, 77, 94, .2);
  --pen-glow: 0 0 0 1px rgba(255, 77, 94, .22), 0 0 18px rgba(255, 77, 94, .14), 0 0 48px rgba(255, 40, 60, .10);
  --pen-bar-glow: 0 0 6px rgba(255, 77, 94, .35); --pen-bloom: rgba(200, 30, 50, .22); --pen-grid: rgba(255, 120, 130, .05); --on-pen: #1A0407;
  --gold: #FFD166; --gold-text: #FFDE8A; --gold-glow: 0 0 28px rgba(255, 209, 102, .28);
  --good: #58D68D; --good-text: #8EE5B1; --warn: #F5B14B; --warn-text: #F9C97A; --focus: #8FEBFF; --selection: rgba(95, 227, 255, .30);
  --coach: var(--sys);
  --shadow-sheet: 0 -1px 0 rgba(143, 170, 220, .26), 0 -20px 60px rgba(0, 0, 0, .6);
  --shadow-float: 0 14px 34px -16px rgba(0, 0, 0, .8), 0 2px 6px -2px rgba(0, 0, 0, .5);
  --r-window: 4px; --r-card: 2px; --r-row: 2px; --r-btn: 6px; --r-chip: 4px; --r-sheet: 20px; --r-rank: 0px;
  --ease: cubic-bezier(.2, .7, .2, 1); --ease-out-back: cubic-bezier(.2, 1.4, .3, 1);
  --t-fast: 160ms; --t-med: 240ms; --t-window: 420ms; --t-chest: 900ms; --t-levelup: 1400ms; --t-arc-reveal: 600ms;
}

/* The rest of the stylesheet is written against the tokens above. Component CSS follows the approved design boards
   (design/board.html, design/board-modes.html) so the app and the boards look the same: HUD grid ground, hairline cards with
   corner ticks, the System window with cyan brackets, caps labels, HUD numerals. Both modes are dark. A component never
   says which mode it is in: it reads tokens, and the mode blocks above change the tokens. Animate transform and opacity only. */

:root { --shield-h: var(--sat); --mark-color: var(--sys); }
html[data-logo^="white"] { --mark-color: #FFFFFF; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); height: 100%; touch-action: manipulation; }
body {
  margin: 0; min-height: 100%; font-family: var(--font-body); font-size: 15px; line-height: 1.35; color: var(--text); background: transparent;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overscroll-behavior-y: none; overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
input, textarea, select { font: inherit; color: inherit; }
input { font-size: 16px; }   /* 16 px: no zoom-on-focus on iPhone */
a { color: var(--sys-text); }
a, label, input, select, textarea, summary, [role="button"], [role="tab"] { touch-action: manipulation; }
[hidden] { display: none !important; }
.noscript { padding: 40px 24px; text-align: center; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-btn); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pupil { fill: var(--pupil, none); }
.hexf { fill: var(--hex-fill, none); }

/* HUD ground: a faint 24 px grid that fades down the screen, and one cold bloom at the top of every screen */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 50% 0 / var(--grid-size) var(--grid-size),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 50% 0 / var(--grid-size) var(--grid-size);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.4) 55%, rgba(0,0,0,.12)); mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.4) 55%, rgba(0,0,0,.12)); }
body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(110% 50% at 50% -12%, var(--bloom), transparent 62%); }

/* ---------- the logo mark: icons/mark.svg as a mask, so it takes the look's colour ---------- */
.mark { display: block; flex: none; width: var(--mark-size, 40px); height: var(--mark-size, 40px); background: var(--mark-color);
  -webkit-mask: url("../icons/mark.svg") center / contain no-repeat; mask: url("../icons/mark.svg") center / contain no-repeat; }
.brand { display: flex; align-items: center; gap: 12px; justify-content: center; }
.brand .wordmark { font-family: var(--font-sys); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps-wide); font-size: 18px; line-height: 1; padding-left: .32em; }
.brand-lg { --mark-size: 64px; flex-direction: column; gap: 16px; }
.brand-lg .wordmark { font-size: 22px; }
.brand-md { --mark-size: 40px; }

/* ---------- splash + status-bar shield (iOS 26 Liquid Glass scroll-edge fix, as in Plate AI) ---------- */
.splash { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 200; transition: opacity var(--t-med) var(--ease); }
.splash::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(110% 50% at 50% -12%, var(--bloom), transparent 62%); }
.splash.out { opacity: 0; pointer-events: none; }
.statusbar-shield { display: none; position: fixed; top: 0; left: 0; right: 0; height: var(--shield-h); background: var(--bg); z-index: 40; pointer-events: none; }
@media (display-mode: standalone), (display-mode: fullscreen) {
  :root { --shield-h: max(var(--sat), 12px); }   /* never 0: iOS 26.1 kept the blur even with an opaque status bar (sat = 0) */
  .statusbar-shield { display: block; }
}

/* ---------- layout ---------- */
.app { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; padding: calc(var(--shield-h) + 12px) calc(var(--pad) + var(--sar)) calc(var(--tabbar-h) + var(--sab) + 44px) calc(var(--pad) + var(--sal)); min-height: 100vh; min-height: 100dvh; }
.app.no-tabs { padding-bottom: calc(var(--sab) + 32px); }
.stack > * + * { margin-top: var(--space); }
.stack.lg > * + * { margin-top: var(--pad); }
.row { display: flex; align-items: center; gap: var(--space); }
.row.sp { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.center { display: flex; justify-content: center; text-align: center; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space); }
.g3 > *, .g2 > * { min-width: 0; }
.muted { color: var(--text-2); }
.small { font-size: 13px; }

/* ---------- type ---------- */
.caps { font-family: var(--font-sys); font-weight: 600; font-size: 11px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-2); }
.caps.lit { color: var(--sys-text); }
.caps.xs { font-size: 10px; }
.num { font-family: var(--font-sys); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.big { font-family: var(--font-sys); font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1; }
.hud { font-family: var(--font-sys); font-weight: 500; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: var(--track-hud); line-height: 1; }
.h { font-family: var(--font-sys); font-weight: 600; font-size: 17px; letter-spacing: -.005em; }
.rule { display: flex; align-items: center; gap: 16px; }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2)); }
.rule::after { background: linear-gradient(90deg, var(--line-2), transparent); }
.kv3 { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 12px; }
.kv3 > * + * { border-left: 1px solid var(--hairline-sys, var(--sys-rim-2)); padding-left: 12px; }
.kv3 .hud { font-size: 22px; margin-top: 6px; }
.kv3 .hud span { font-size: 12px; letter-spacing: .02em; color: var(--text-2); }
.typed, .untyped { white-space: pre-wrap; }
.untyped { visibility: hidden; }   /* the text still to come keeps its place: nothing below it moves */

/* ---------- the System window: translucent blue, cyan brackets, a scanline texture ---------- */
.win { position: relative; border-radius: var(--r-window); padding: 16px; background: linear-gradient(180deg, var(--sys-fill), var(--sys-fill-2)); box-shadow: var(--sys-glow), inset 0 1px 0 var(--sys-rim-2); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); overflow: hidden; }
.win::before { content: ""; position: absolute; inset: 6px; pointer-events: none; z-index: 2;
  --b: var(--sys-rim); --l: var(--bracket-len); --w: var(--bracket);
  background:
    linear-gradient(var(--b), var(--b)) left top / var(--l) var(--w) no-repeat, linear-gradient(var(--b), var(--b)) left top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) right top / var(--l) var(--w) no-repeat, linear-gradient(var(--b), var(--b)) right top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) left bottom / var(--l) var(--w) no-repeat, linear-gradient(var(--b), var(--b)) left bottom / var(--w) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) right bottom / var(--l) var(--w) no-repeat, linear-gradient(var(--b), var(--b)) right bottom / var(--w) var(--l) no-repeat; }
.win::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: var(--scan); background: var(--sys-scan), repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px); }
.win > * { position: relative; z-index: 3; }
.win-title { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 16px; font-family: var(--font-sys); font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: var(--track-caps-wide); text-transform: uppercase; color: var(--sys-text); }
.win-title::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--sys); box-shadow: var(--dot-glow, 0 0 6px var(--sys)); transform: rotate(45deg); }
.win-title::after { content: ""; flex: 1; height: 1px; margin-left: 8px; background: linear-gradient(90deg, var(--hairline-sys, var(--sys-rim-2)), transparent); }
.win-notice { font-family: var(--font-sys); font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--text); }
.win-notice + .win-notice { margin-top: 8px; }
.win-notice.lit, .win-notice strong { color: var(--sys-text); }
.win-notice strong { font-weight: 700; }
.win-line { height: 1px; background: linear-gradient(90deg, var(--sys-rim), transparent); margin: 16px 0; }
.rank { position: relative; width: 56px; height: 56px; display: grid; place-items: center; font-family: var(--font-sys); font-weight: 200; font-size: 38px; line-height: 1; color: var(--sys-text); border: 1px solid var(--rank-line, var(--sys-rim-2)); border-radius: var(--r-rank); background: var(--rank-fill, transparent); }
.rank::before { content: ""; position: absolute; inset: -1px; pointer-events: none; --b: var(--sys-rim); --t: calc(var(--tick-size) * .875);
  background:
    linear-gradient(var(--b), var(--b)) left top / var(--t) 1px no-repeat, linear-gradient(var(--b), var(--b)) left top / 1px var(--t) no-repeat,
    linear-gradient(var(--b), var(--b)) right top / var(--t) 1px no-repeat, linear-gradient(var(--b), var(--b)) right top / 1px var(--t) no-repeat,
    linear-gradient(var(--b), var(--b)) left bottom / var(--t) 1px no-repeat, linear-gradient(var(--b), var(--b)) left bottom / 1px var(--t) no-repeat,
    linear-gradient(var(--b), var(--b)) right bottom / var(--t) 1px no-repeat, linear-gradient(var(--b), var(--b)) right bottom / 1px var(--t) no-repeat; }
.rank-col { display: flex; flex-direction: column; align-items: center; }
.rank-cap { margin-top: 6px; }
.kv3 + .bar { margin-top: 12px; }
.card > .h + .stack { margin-top: 12px; }
.status-head { align-items: flex-end; margin-top: 4px; }
.status-head .name { font-size: 34px; }
.status-head .sub { margin-top: 8px; }
.stats { margin-top: 0; }
.coach-line { color: var(--text-2); }
.coach-line .who { color: var(--text); }

/* the System window as a pop-up (systemWindow in js/ui.js) */
.sys-layer { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 16px calc(16px + var(--sar)) 16px calc(16px + var(--sal)); }
.sys-scrim { position: absolute; inset: 0; background-color: var(--scrim); background-image: var(--scrim-light); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sys-window { position: relative; width: min(100%, 420px); padding: 20px; }
.sys-window .btn { margin-top: 0; }
.sys-lines { min-height: 20px; }
.sys-problem { color: var(--pen-text); margin-top: 8px; }
.sys-window .btn + .btn { margin-top: 8px; }

/* bars */
.bar { height: 4px; border-radius: var(--r-bar); background: var(--track); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--sys); box-shadow: var(--sys-bar-glow); width: var(--w, 0%); }
.bar.ok i { background: var(--good); box-shadow: none; }
.stat { display: grid; grid-template-columns: 98px 1fr 30px; align-items: center; gap: 12px; font-size: 13px; }
.stat + .stat { margin-top: 6px; }
.stat b { font-family: var(--font-sys); font-weight: 700; letter-spacing: .14em; font-size: 11px; color: var(--text-2); }
.stat .n { text-align: right; font-weight: 600; letter-spacing: .04em; }
.pill-steps { display: flex; gap: 4px; }
.pill-steps i { flex: 1; height: 2px; background: var(--track); }
.pill-steps i.on { background: var(--sys); box-shadow: var(--sys-bar-glow); }

/* card: hairline panel with four corner ticks */
.card, .counter-main, .coach-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.card { padding: 16px; }
.card::before, .counter-main::before { content: ""; position: absolute; inset: -1px; pointer-events: none; --b: var(--tick); --t: var(--tick-size);
  background:
    linear-gradient(var(--b), var(--b)) left top / var(--t) 1px no-repeat, linear-gradient(var(--b), var(--b)) left top / 1px var(--t) no-repeat,
    linear-gradient(var(--b), var(--b)) right top / var(--t) 1px no-repeat, linear-gradient(var(--b), var(--b)) right top / 1px var(--t) no-repeat,
    linear-gradient(var(--b), var(--b)) left bottom / var(--t) 1px no-repeat, linear-gradient(var(--b), var(--b)) left bottom / 1px var(--t) no-repeat,
    linear-gradient(var(--b), var(--b)) right bottom / var(--t) 1px no-repeat, linear-gradient(var(--b), var(--b)) right bottom / 1px var(--t) no-repeat; }

/* ---------- buttons, chips, fields ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 16px; border-radius: var(--r-btn); font-family: var(--font-sys); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; background: var(--primary, var(--sys)); color: var(--on-primary, var(--on-sys)); border: 0; transition: transform var(--t-fast) var(--ease), opacity var(--t-fast); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.ghost { background: transparent; color: var(--sys-text); box-shadow: inset 0 0 0 1px var(--ghost-rim, var(--sys-rim-2)); }
.btn.quiet { background: var(--card-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn.sm { min-width: var(--tap); padding: 0 12px; font-size: 12px; }
.btn.full { width: 100%; }
.link-btn { min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; font-family: var(--font-sys); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.link-btn:active { color: var(--text); }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-chip); font-family: var(--font-sys); font-weight: 600; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; background: var(--card-2); color: var(--text-2); border: 1px solid var(--line); }
.chip.on { color: var(--sys-text); border-color: var(--chip-on-line, var(--sys-rim-2)); background: var(--accent-soft); }
.chip.tap { height: 36px; min-width: 36px; justify-content: center; padding: 0 12px; position: relative; }
.chip.tap::before { content: ""; position: absolute; inset: -4px; }   /* the 44 px hit area */
.chip.big { height: 44px; padding: 0 16px; font-size: 12px; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space); }
.week .chip.day { position: relative; height: 44px; padding: 0; justify-content: center; }
.week .chip.day::before { content: ""; position: absolute; inset: 0 -2px; }   /* 46 px wide hit area on a 360 px phone */
.chips { gap: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-family: var(--font-sys); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.input { width: 100%; min-width: 0; min-height: var(--tap); padding: 0 12px; border-radius: var(--r-btn); background: var(--card); border: 1px solid var(--line-2); color: var(--text); }
.input::placeholder { color: var(--text-3); }
.input:focus-visible { border-color: var(--sys-rim); outline-offset: 0; }
input[type="time"].input { -webkit-appearance: none; appearance: none; font-variant-numeric: tabular-nums; padding: 0 8px; font-size: 15px; }
input[type="time"].input::-webkit-calendar-picker-indicator { display: none; }   /* the typed time needs the room */
.input-row { display: flex; align-items: center; gap: 8px; }
.input-row .input { flex: 1; }
.hint { font-size: 12px; color: var(--text-2); }
.warn { padding: 8px 12px; border: 1px solid rgba(245, 177, 75, .35); border-radius: var(--r-btn); background: rgba(245, 177, 75, .08); color: var(--warn-text); font-size: 13px; }
.err { padding: 8px 12px; border: 1px solid var(--pen-rim-2); border-radius: var(--r-btn); background: var(--pen-fill); color: var(--pen-text); font-size: 13px; }
.toggle-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 4px 0; text-align: left; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toggle-row .t { flex: 1; }
.toggle-row .t small { display: block; color: var(--text-2); font-size: 12px; margin-top: 1px; }
.toggle { display: block; width: 50px; height: 30px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line-2); position: relative; flex: none; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--text-2); transition: transform var(--t-fast) var(--ease); }
[aria-checked="true"] > .toggle { background: var(--primary, var(--sys)); border-color: var(--primary, var(--sys)); }
[aria-checked="true"] > .toggle::after { transform: translateX(20px); background: var(--on-primary, var(--on-sys)); }

/* ---------- ring ---------- */
.ring { position: relative; display: grid; place-items: center; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; }
.ring .tr { stroke: var(--track); }
.ring .pr { stroke: var(--sys); stroke-linecap: butt; filter: var(--ring-glow); }
.ring .lab { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.pen-mode .ring .pr { filter: var(--ring-glow-pen); }

/* ---------- coach emblems ---------- */
.mk { width: 40px; height: 40px; display: grid; place-items: center; color: var(--coach); flex: none; position: relative; }
.mk .em { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.coach-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; min-height: 60px; text-align: left; }
.coach-card.on { border-color: var(--sys-rim); box-shadow: var(--accent-glow); --hex-fill: var(--hex-on); }
.coach-card .t { flex: 1; font-family: var(--font-sys); font-weight: 600; }
.coach-card .t small { display: block; color: var(--text-2); font-family: var(--font-body); font-weight: 400; font-size: 12px; margin-top: 1px; }
.coach-card .sel { width: 12px; height: 12px; margin: 0 5px; border: 1px solid var(--line-2); transform: rotate(45deg); }
.coach-card.on .sel { border-color: var(--sys); background: var(--sys); box-shadow: var(--pip-glow); }

/* ---------- the Awakening ---------- */
.screen { display: block; }
.setup-top { min-height: var(--tap); }
.setup .pill-steps { margin: 0 0 var(--space); }
.setup-title { font-size: 30px; margin: 16px 0 4px; }
.setup-lead { margin: 0 0 var(--space); }
.setup-body { margin-top: var(--pad); }
.setup-body > .win:first-child { margin-top: 0; }
.intro { display: flex; flex-direction: column; justify-content: center; gap: 32px; min-height: calc(100dvh - var(--shield-h) - 80px); }
.intro-brand { display: flex; justify-content: center; }
.arc-card .h { margin: 4px 0 8px; }
.vow-win { margin-top: 24px; padding: 22px 20px; }
.vow-text .win-notice { font-size: 17px; font-weight: 400; line-height: 1.5; }
.vow-ring { margin-top: 40px; }
.hold { width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hold .ring { pointer-events: none; }
.hold .lab-col { width: 128px; height: 128px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--hold-fill); transition: transform var(--t-fast) var(--ease); }
.hold.is-held .lab-col { transform: scale(.94); }
.hold .accept { font-size: 12px; letter-spacing: .24em; }
.hold[disabled] { opacity: .6; }

/* the fitness test */
.counter { display: flex; flex-direction: column; gap: 12px; }
.counter-main { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 8px; padding: 16px 12px; }
.counter-value { text-align: center; font-size: 88px; line-height: 96px; min-width: 0; }
/* the Library page counter (class sk-fit, js/library.js) sits in a narrow box on a 360 / 320 phone: one line, a size that follows the width, centred even when a 4-digit page is a little wider than the box. Other counters (the fitness test, Train) keep their 88 px */
.sk-fit .counter-value { font-size: clamp(44px, 17vw, 88px); line-height: 1.1; white-space: nowrap; display: flex; justify-content: center; }
.counter-btn { height: 64px; border-radius: var(--r-btn); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-sys); font-weight: 300; font-size: 34px; line-height: 1; position: relative; z-index: 1; }
.counter-btn:active:not([aria-disabled="true"]) { background: var(--card-3, var(--sys-fill)); }
.counter-btn[aria-disabled="true"], .counter-quick .btn[aria-disabled="true"] { opacity: .35; }
.counter-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.counter-input { text-align: center; font-size: 22px; font-variant-numeric: tabular-nums; }
.timer-note { color: var(--sys-text); }
.clock { font-size: 72px; }
.clock-cap { margin-top: 8px; }
.chapter-fields { display: grid; grid-template-columns: 1fr 76px; gap: 8px; margin-top: 8px; }
.arc-head { grid-template-columns: 1fr 88px; }
.sofar-row { gap: 24px; margin-top: 8px; }
.small-num { font-size: 26px; }
.test-body .tleft { font-size: 22px; }

/* ---------- the PIN screen ---------- */
.lock { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 24px; }
.lock-sub { margin-top: -4px; }
.dots { display: flex; gap: 12px; height: 16px; align-items: center; }
.dots i { width: 12px; height: 12px; border: 1px solid var(--sys-rim); transform: rotate(45deg); }
.dots i.on { background: var(--sys); box-shadow: var(--pip-glow); }
.lock-msg { min-height: 20px; color: var(--text-2); font-size: 14px; }
.lock-msg.is-err { color: var(--pen-text); }
.pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 12px; margin-top: 8px; }
.pad button { height: 56px; border-radius: var(--r-btn); background: var(--card); border: 1px solid var(--line-2); font-family: var(--font-sys); font-weight: 500; font-size: 22px; font-variant-numeric: tabular-nums; display: grid; place-items: center; }
.pad button:active { background: var(--card-3, var(--card-2)); border-color: var(--sys-rim); }
.pad button.is-text { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.pad button.is-hidden { visibility: hidden; }
.pad button[disabled] { opacity: .4; }

/* ---------- tab bar: Plate AI's liquid glass, four tabs ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 0 calc(16px + var(--sar)) calc(12px + var(--sab)) calc(16px + var(--sal)); max-width: 512px; margin: 0 auto; pointer-events: none; }
.tabbar > * { pointer-events: auto; }
.tabbar-pill { position: relative; isolation: isolate; flex: 1; display: flex; height: var(--tabbar-h); padding: 6px; border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--glass-fill), var(--glass-fill-2));
  -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(var(--glass-bright)); backdrop-filter: blur(22px) saturate(180%) brightness(var(--glass-bright));
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-rim-2), var(--glass-shadow);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tabbar-pill::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(110% 80% at 50% -35%, var(--glass-light), transparent 62%); }
.tab { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: var(--r-pill); color: var(--text); opacity: .82; font-family: var(--font-sys); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; min-width: 44px; min-height: 44px; text-shadow: 0 0 10px var(--glass-halo); transition: opacity var(--t-fast); -webkit-user-drag: none; }
.tab > * { pointer-events: none; }
.tab .tab-ic { display: block; height: 24px; width: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 60%; transition: transform 220ms var(--ease); filter: drop-shadow(0 0 5px var(--glass-halo)); }
.tab[aria-selected="true"] { opacity: 1; font-weight: 700; color: var(--tab-on, var(--sys-text)); --pupil: currentColor; }
.tab[data-tab="arcs"][aria-selected="true"] { color: var(--tab-on-arcs, var(--tab-on, var(--sys-text))); }
.tab.is-lit { opacity: 1; }
.tab[aria-selected="true"] .tab-ic { transform: scale(1.08); }
.tabbar-pill.is-pressing .tab.is-lit .tab-ic { transform: scale(1.18); }
.tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; border-radius: var(--r-pill); z-index: 3; }
.tab-drop { position: absolute; left: 0; top: 6px; z-index: 1; width: 20%; height: calc(var(--tabbar-h) - 12px); border-radius: var(--r-pill); pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, var(--drop-fill), var(--drop-fill-2) 58%, var(--drop-fill-3));
  box-shadow: inset 0 1px 1px var(--drop-rim), inset 0 -1px 1px var(--drop-edge), inset 0 0 0 1px var(--drop-rim-2), var(--drop-shadow);
  transform-origin: 50% 50%; transition: opacity var(--t-med) var(--ease); }
.tab-drop::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(70% 55% at 34% 0%, var(--drop-rim), transparent 70%); opacity: .7; }
.tab-drop.is-on { opacity: 1; }
.tab-drop.is-moving { will-change: transform; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tabbar-pill { background: var(--tabbar-bg); } }

/* ---------- the "Not saved yet" chip, and the toast ---------- */
.sync-chip { position: fixed; z-index: 60; top: calc(var(--shield-h) + 8px); right: calc(12px + var(--sar)); height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--r-chip); font-family: var(--font-sys); font-weight: 600; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--warn-text); background: var(--bg-2); border: 1px solid rgba(245, 177, 75, .4); pointer-events: none; }
.toast-host { position: fixed; left: 16px; right: 16px; bottom: calc(var(--tabbar-h) + 28px + var(--sab)); z-index: 300; display: flex; justify-content: center; pointer-events: none; }
.toast { pointer-events: auto; max-width: 440px; display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 6px 16px; border-radius: var(--r-btn); background: var(--bg-2); color: var(--text); border: 1px solid var(--line-2); box-shadow: var(--shadow-float); font-size: 14px; opacity: 0; transform: translateY(8px); transition: transform var(--t-med) var(--ease), opacity var(--t-med); }
.toast.in { opacity: 1; transform: none; }
.toast.warn { border-color: rgba(245, 177, 75, .5); }
.toast-action { min-height: var(--tap); padding: 0 8px; font-family: var(--font-sys); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sys-text); }

/* ---------- the Penalty Zone: the whole accent turns red ---------- */
.pen-mode { --sys: var(--pen); --sys-text: var(--pen-text); --sys-fill: var(--pen-fill); --sys-fill-2: var(--pen-fill-2); --sys-rim: var(--pen-rim); --sys-rim-2: var(--pen-rim-2); --sys-glow: var(--pen-glow); --sys-bar-glow: var(--pen-bar-glow); --on-sys: var(--on-pen); --sys-scan: linear-gradient(180deg, transparent, rgba(255, 77, 94, .08) 50%, transparent); --bloom: var(--pen-bloom); --grid: var(--pen-grid); --coach: var(--pen); --glass-light: rgba(255, 77, 94, .14); --drop-fill: rgba(255, 120, 130, .18); --drop-fill-2: rgba(255, 120, 130, .06); --drop-fill-3: rgba(255, 120, 130, .1); --drop-rim: rgba(255, 170, 178, .5); --glass-rim-2: rgba(255, 77, 94, .14); --hairline-sys: var(--sys-rim-2); --ghost-rim: var(--sys-rim-2); --tab-on: initial; --tab-on-arcs: initial; }

/* ---------- Task 12a: the System tab, the Train tab, the bottom sheet, the moments. Tokens only; both modes read them. ---------- */
.good { color: var(--good-text); }
.chip.good { color: var(--good-text); border-color: color-mix(in srgb, var(--good) 30%, transparent); background: color-mix(in srgb, var(--good) 8%, transparent); }
.icbtn { width: var(--tap); height: var(--tap); flex: none; display: grid; place-items: center; border-radius: var(--r-btn); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.icbtn .ic { width: 20px; height: 20px; }
.icbtn[disabled] { opacity: .4; pointer-events: none; }
.ic-sm { width: 18px; height: 18px; }

/* the bottom sheet (ui.js sheet): "I did...", the points, a move's detail. It follows the mode, unlike a System pop-up. */
.sheet-layer { position: fixed; inset: 0; z-index: 240; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.sheet-scrim { position: absolute; inset: 0; background-color: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet { position: relative; width: min(100%, 480px); max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--bg-2); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 8px calc(16px + var(--sar)) calc(24px + var(--sab)) calc(16px + var(--sal)); box-shadow: var(--shadow-sheet); }
.handle { width: 36px; height: 4px; border-radius: var(--r-bar); background: var(--line-2); margin: 0 auto 16px; }
.sheet-head { align-items: flex-start; }
.sheet-title { margin-top: 4px; }
.sheet-body { margin-top: 16px; }
.detail-steps { margin: 0; padding-left: 22px; }
.detail-steps li { font-size: 15px; line-height: 1.45; }
.detail-steps li + li { margin-top: 8px; }
/* the exercise detail sheet (js/detail.js) and the Guide (js/guide.js). Tokens only. */
.detail-sec > .caps { margin-bottom: 8px; }
.detail-muscles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.detail-muscles + .detail-muscles { margin-top: 8px; }
.detail-muscles > .small { flex-basis: 100%; }
.detail-muscles .chip { height: auto; min-height: 28px; padding: 5px 10px; white-space: normal; line-height: 1.3; }   /* the muscles' names are long: they wrap */
.detail-avoid { margin: 0; padding-left: 20px; }
.detail-avoid li { font-size: 14px; line-height: 1.45; }
.detail-avoid li + li { margin-top: 6px; }
.detail-card { padding: 12px; border-radius: var(--r-row); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); }
.detail-card-head { gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.detail-link { justify-content: flex-start; text-align: left; }
.tag-est { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-chip); font-family: var(--font-sys); font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--warn-text); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }
/* the 3D loop (R63): a 4:5 frame, the video cropped a little so the figure reads bigger (the figures are already ~85-92% of the width, so the zoom stays small) */
.fig { width: min(100%, 312px); margin: 0 auto 16px; }
.fig-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-card); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.fig-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transform-origin: 50% 54%; background: var(--bg); }
.fig-toggle { position: absolute; inset: 0; width: 100%; height: 100%; min-height: var(--tap); background: transparent; }
.fig-toggle:focus-visible { outline-offset: -3px; }
.fig-play { display: none; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background-color: var(--scrim); box-shadow: inset 0 0 0 1px var(--line-2); }
.fig-play::before { content: ""; position: absolute; left: 22px; top: 17px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--text); }
.fig-frame.paused .fig-play { display: block; }
.fig-cap { gap: 12px; align-items: baseline; margin-top: 12px; min-height: 18px; }
.fig-phase { font-family: var(--font-sys); font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--text); }
.fig-part { font-family: var(--font-sys); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.fig-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-family: var(--font-sys); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.fig-key i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--pen); }
.fig-key i.sec { background: color-mix(in srgb, var(--pen) 45%, var(--text)); opacity: .8; }
.sheet:has(.guide) { min-height: min(88dvh, 720px); }
.guide-bar { position: sticky; top: -8px; z-index: 2; margin: 0 -4px 12px; padding: 4px 4px 8px; background: var(--bg-2); display: flex; flex-direction: column; gap: 8px; }
.guide-topics { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.guide-topics::-webkit-scrollbar { display: none; }
.guide-topics .chip { flex: none; }
.guide-count { margin: 0; }
.guide-card { padding: 0; }
.guide-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; min-height: var(--tap); padding: 12px 16px; text-align: left; color: var(--text); }
.guide-title { gap: 8px; flex-wrap: wrap; font-size: 15px; }
.guide-personal { margin: 0; padding: 0 16px 12px; color: var(--text); }
.guide-more { padding: 0 16px 16px; }
.guide-more p { line-height: 1.5; }
.guide-srcs, .guide-related { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.guide-related { gap: 8px; }
.guide-src { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 13px; color: var(--sys-text); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.guide-src.muted { color: var(--text-2); text-decoration: none; }
.train-actions { display: flex; align-items: center; gap: 8px; }
.km-input { text-align: center; font-size: 22px; font-variant-numeric: tabular-nums; }

/* a System pop-up that may be dismissed (the "How was that?" question), the level-up and rank-up numbers */
.win > .win-x { position: absolute; top: 6px; right: 6px; z-index: 4; }
.win-title.has-x { padding-right: 44px; }
.moment { display: flex; justify-content: center; align-items: baseline; gap: 16px; padding: 4px 0 16px; }
.moment .n { font-family: var(--font-sys); font-weight: 200; font-size: 120px; line-height: .95; letter-spacing: -.04em; color: var(--text); text-shadow: 0 0 28px var(--sys-rim-2); }
.moment .from { font-family: var(--font-sys); font-weight: 300; font-size: 40px; color: var(--text-3); }
.moment-arrow { width: 28px; height: 28px; color: var(--text-3); align-self: center; }
.moment .r { font-family: var(--font-sys); font-weight: 200; font-size: 140px; line-height: .95; letter-spacing: -.05em; color: var(--gold-text); text-shadow: var(--gold-glow); }
.rankup { --sys: var(--gold); --sys-text: var(--gold-text); --sys-rim: color-mix(in srgb, var(--gold) 60%, transparent); --sys-rim-2: color-mix(in srgb, var(--gold) 20%, transparent);
  --sys-glow: 0 0 0 1px color-mix(in srgb, var(--gold) 20%, transparent), 0 0 18px color-mix(in srgb, var(--gold) 12%, transparent); }
.chest .win-notice:nth-child(2) { color: var(--gold-text); }

/* the System tab */
.head-tools { gap: 8px; }
.mk-lg { width: var(--tap); height: var(--tap); }
.mk-btn { border-radius: var(--r-btn); }
.pen-line { margin-top: 8px; }
.card-count { margin-top: 12px; }
.card-count + .bar { margin-top: 6px; }
.qrows { margin-top: 12px; }
.card-go { margin-top: 12px; }
.qrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 4px 0; }
.qrow + .qrow { border-top: 1px solid var(--line); margin-top: 0; }
.qrow-info { flex: 1; min-width: 0; }
.qrow-info .item-name { min-height: var(--tap); font-size: 14px; }
.qrow-answers { gap: 6px; flex: none; }
.qrow-answers .btn.sm { padding: 0 10px; min-width: 64px; letter-spacing: .08em; }
.optional-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: var(--tap); margin-top: 8px; padding: 0 12px; text-align: left; font-size: 13px; color: var(--text-2); background: var(--card-2); border-radius: var(--r-row); box-shadow: inset 0 0 0 1px var(--line); }
.optional-go { display: inline-flex; align-items: center; gap: 4px; color: var(--sys-text); font-family: var(--font-sys); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.cd { text-align: center; line-height: 1.1; }
.cd-time { display: block; font-size: 11px; font-weight: 700; }
.cd-left { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.alloc-row { display: grid; grid-template-columns: 1fr 52px 40px 52px; align-items: center; gap: 8px; }
.alloc-row + .alloc-row { margin-top: 6px; }
.alloc-name b { display: block; font-family: var(--font-sys); font-weight: 700; font-size: 12px; letter-spacing: .14em; color: var(--text-2); }
.alloc-name small { font-size: 11px; }
.alloc-btn { height: 48px; font-size: 26px; }
.alloc-n { text-align: center; font-size: 28px; }

/* the Train tab */
.train-head { align-items: flex-start; }
.train-title { font-size: 26px; font-weight: 600; margin-top: 4px; }
.weekstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wday { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 52px; padding: 6px 2px; border-radius: var(--r-row); background: var(--card-2); border: 1px solid var(--line); }
.wday .caps { font-size: 11px; letter-spacing: .08em; }
.wday .wfocus { max-width: 100%; overflow: hidden; white-space: nowrap; font-family: var(--font-sys); font-weight: 600; font-size: 11px; letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.wday.today { border-color: var(--sys-rim); background: var(--accent-soft); box-shadow: var(--accent-glow); }
.wday.today .caps, .wday.today .wfocus { color: var(--sys-text); }
.wday.rest { background: transparent; }
.wday.rest .wfocus, .wday.rest .caps { color: var(--text-2); }
.note { padding: 10px 12px; border-left: 2px solid var(--sys-rim); border-radius: var(--r-row); background: var(--card-2); font-size: 13px; line-height: 1.4; }
.quest-head { margin-bottom: 8px; align-items: flex-start; }
.group-head { padding: 0 2px; }
.item { padding: 12px 14px; }
.item-namebox { flex: 1; min-width: 0; }
.item-sub { display: block; margin-top: -6px; padding-bottom: 6px; font-size: 12px; line-height: 1.3; color: var(--text-2); }
.item-name { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; min-height: var(--tap); padding: 0; text-align: left; font-family: var(--font-sys); font-weight: 600; font-size: 15px; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.item-prog { align-items: baseline; }
.item-num { font-size: 32px; }
.item-of { font-size: 18px; font-weight: 300; }
.item.optional .item-num { font-size: 26px; }
.item .bar { margin: 8px 0 4px; }
.item-rest { margin: 0 0 8px; }
.item-buttons .btn { padding: 0 8px; }
.item-undo-row { justify-content: space-between; margin-top: 8px; }
.item.cleared { padding: 4px 14px; }
.item-line { min-height: 52px; }
.item-cleared-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; flex: 1; min-width: 0; }
.cleared-tag { gap: 4px; color: var(--good-text); }
.timer-box { gap: 16px; margin: 0 0 12px; }
.timer-actions { flex: 1; min-width: 0; }
.timer-clock { font-size: 20px; }
.card.locked p { margin-top: 4px; }
.undo-hint { padding: 0 2px; }

/* ---------- Task 12b-2: Recovery & mobility, the session player, the Core Floor card and its ring timer. Tokens only; both modes read them. ---------- */
.btn.quiet.on { color: var(--sys-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--sys-rim); }
.session-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 14px; text-align: left; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.session-row[disabled] { opacity: .45; }
.session-title { flex: 1; min-width: 0; font-family: var(--font-sys); font-weight: 600; font-size: 15px; }
.session-row .ic { color: var(--sys-text); }
.player > * + * { margin-top: 16px; }
.player-list { list-style: none; margin: 0; padding: 0; }
.player-li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); border-top: 1px solid var(--line); }
.player-li:first-child { border-top: 0; }
.player-li-name { min-width: 0; }
.player-li .item-name { font-size: 14px; }
.player-step { text-align: center; }
.player-step .player-name { font-family: var(--font-sys); font-weight: 600; font-size: 20px; line-height: 1.25; }
.player-step .item-name { justify-content: center; text-align: center; }
.player-count { text-align: center; font-size: 96px; line-height: 1.1; color: var(--text); }
.player-next, .player-wait, .player-done { text-align: center; }
.player-confirm { padding: 12px; border-radius: var(--r-row); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); }
.player-result { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0 16px; text-align: center; }
.player-xp { font-size: 64px; color: var(--sys-text); }
.corefloor > * + * { margin-top: 12px; }
.cf-line { font-size: 15px; line-height: 1.45; }
.cf-ask { margin: 0 0 8px; font-size: 15px; line-height: 1.4; }
.cf-q + .cf-q { margin-top: 16px; }
.cf-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cf-tip { padding: 10px 12px; border-left: 2px solid var(--sys-rim); border-radius: var(--r-row); background: var(--card-2); font-size: 14px; line-height: 1.4; }
.cf-warm { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.cf-stats { margin-top: 12px; }
.cf-run { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.cf-run > .ring { align-self: center; }
.cf-ring circle { stroke-width: 8; }
.cf-ring.is-relax .pr, .cf-ring.is-finish .pr, .cf-ring.is-setup .pr { stroke: var(--good); }
.cf-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cf-count { font-size: 72px; line-height: 1; color: var(--text); }
.cf-phase { font-family: var(--font-sys); font-weight: 600; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--sys-text); }
.cf-flat { padding: 16px 0; text-align: center; }
.cf-flat .cf-count { font-size: 96px; }
.cf-rep { text-align: center; min-height: 18px; }
.cf-cue { margin: 0; min-height: 44px; text-align: center; font-size: 15px; line-height: 1.45; }

/* ---------- Task S6: the Skills tab, the skill sheet, the missions strip, the skill level-up. Tokens only; both modes read them (design/skills-board.html). ---------- */
.sk-head { min-height: var(--tap); }
.sk-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-sys); font-weight: 600; font-size: 18px; line-height: 1; letter-spacing: var(--track-caps-wide); text-transform: uppercase; color: var(--sys-text); }
.sk-title::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--sys); box-shadow: var(--dot-glow, 0 0 6px var(--sys)); transform: rotate(45deg); }
.sk-sub { margin-top: 4px; }
.sk-tree { position: relative; margin-top: 12px; }
.sk-tree::before { content: ""; position: absolute; left: 27px; top: 20px; bottom: 20px; width: 1px; background: linear-gradient(180deg, var(--sys-rim-2), var(--line-2) 50%, var(--sys-rim-2)); }
.sk-node { position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: var(--tap); padding: 8px 12px 8px 8px; text-align: left; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.sk-node + .sk-node { margin-top: 7px; }
.sk-node::before { content: ""; position: absolute; inset: -1px; pointer-events: none; --b: var(--tick); --t: var(--tick-size);
  background:
    linear-gradient(var(--b), var(--b)) left top / var(--t) 1px no-repeat, linear-gradient(var(--b), var(--b)) left top / 1px var(--t) no-repeat,
    linear-gradient(var(--b), var(--b)) right top / var(--t) 1px no-repeat, linear-gradient(var(--b), var(--b)) right top / 1px var(--t) no-repeat,
    linear-gradient(var(--b), var(--b)) left bottom / var(--t) 1px no-repeat, linear-gradient(var(--b), var(--b)) left bottom / 1px var(--t) no-repeat,
    linear-gradient(var(--b), var(--b)) right bottom / var(--t) 1px no-repeat, linear-gradient(var(--b), var(--b)) right bottom / 1px var(--t) no-repeat; }
.sk-node:active { background: var(--card-2); }
.sk-glyph { width: 38px; height: 38px; flex: none; display: grid; place-items: center; margin-top: 1px; color: var(--sys-text); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--sys-rim-2); border-radius: var(--r-row); }
.sk-glyph .ic { width: 20px; height: 20px; }
.sk-main { flex: 1; min-width: 0; display: block; }
.sk-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sk-node-title { font-family: var(--font-sys); font-weight: 700; font-size: 12px; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.sk-node-title .w, .sk-sheet-title .w { margin-left: 6px; font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: 13px; color: var(--text-2); }
.sk-main .bar { display: block; margin: 7px 0 6px; }
.sk-main .bar.thin { height: 3px; }
.sk-foot { min-height: 18px; align-items: flex-start; }
.sk-next { min-width: 0; margin-left: auto; text-align: right; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.sk-lv { font-size: 13px; line-height: 1.3; color: var(--text); white-space: nowrap; }
.sk-lv .l { color: var(--sys-text); font-weight: 700; }
.sk-state { height: 24px; padding: 0 8px; font-size: 10px; flex: none; }
.tag-elite { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; flex: none; border-radius: var(--r-chip); font-family: var(--font-sys); font-weight: 700; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--sys-text); border: 1px solid var(--sys-rim); background: var(--accent-soft); }
.xsmall { font-size: 12px; }

/* the skill sheet */
.sk-sheet-title { font-family: var(--font-sys); font-weight: 700; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; }
.sk-lvline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sk-lvline .sk-lv { font-size: 14px; }
.sk-switch { position: relative; display: grid; place-items: center; min-width: var(--tap); min-height: var(--tap); flex: none; }
.sk-prog { margin-top: 8px; align-items: flex-start; }
.sk-pct { white-space: nowrap; margin-left: 12px; }
.sk-today { margin-top: 8px; padding-top: 0; padding-bottom: 0; }
.sk-mrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 4px 0; }
.sk-mrow + .sk-mrow { border-top: 1px solid var(--line); }
.sk-mrow .t { flex: 1; min-width: 0; }
.sk-mrow .t b { display: block; font-family: var(--font-sys); font-weight: 600; font-size: 14px; color: var(--text); }
.sk-mrow .t small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-2); }
.sk-mrow.opt .t b { color: var(--text-2); }
.sk-doneside { flex: none; gap: 4px; }
.sk-undo { width: var(--tap); height: var(--tap); }
.sk-rest, .sk-limit { margin-top: 8px; }
.sk-slot:empty { display: none; }
.sk-settings .toggle-row:first-child { border-top: 0; }

/* the missions strip on the System tab */
.sk-stripbox { margin-top: var(--pad); }
.sk-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* the skill level-up window (a System pop-up: .keep-arise puts the Arise look back in both modes) */
.sk-levelup .moment .n { font-size: 96px; }
.sk-letter { font-family: var(--font-sys); font-weight: 500; font-size: 28px; line-height: 1; letter-spacing: var(--track-hud); color: var(--sys-text); }
.sk-asks { list-style: none; margin: 4px 0 0; padding: 0; font-size: 14px; }
.sk-asks li { display: flex; align-items: center; gap: 12px; min-height: 40px; border-top: 1px solid var(--line); }
.sk-asks li:first-child { border-top: 0; }
.sk-asks .k { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); font-family: var(--font-sys); font-size: 11px; font-weight: 700; color: var(--text-2); }
.sk-asks .nm { flex: 1; min-width: 0; }
.sk-more { margin-top: 4px; }
.sk-levelup .note { margin-top: 12px; }
.sk-levelup .btn { margin-top: 16px; }

/* ---------- Task S7: the skill tool panels, the URGE SOS player and the Library. Tokens only; both modes read them (design/skills-board.html). ---------- */
/* the slots of a skill sheet: the panel's blocks are one rhythm apart, a heading hugs what it names */
.sk-slot > * + * { margin-top: var(--pad); }
.sk-slot > .sk-sec + *, .sk-sec + .card, .sk-sec + .sk-card, .sk-sec + p, .sk-sec + .row { margin-top: 4px; }
.sk-sec { min-height: 32px; }
.card + .sk-sec, .sk-card + .sk-sec { margin-top: var(--pad); }
.sk-card { padding: 12px 16px; }
.sk-card:has(> .sk-mrow), .sk-card:has(> .steps), .sk-card:has(> .sk-bookrow), .sk-card:has(> .sk-entry), .sk-card:has(> .sk-line), .sk-card:has(> .sk-weekrow) { padding-top: 0; padding-bottom: 0; }
.sk-inline { white-space: nowrap; }
.sk-picks { gap: 8px; }
.sk-saved { margin-top: 4px; }
.sk-area { min-height: 76px; padding: 10px 12px; line-height: 1.4; resize: vertical; }
.sk-hours { color: var(--sys-text); }
.sk-sleepsum { align-items: center; }
.sk-weekrow { min-height: 36px; }
.sk-weekrow + .sk-weekrow, .sk-line + .sk-line, .sk-bookrow + .sk-bookrow, .sk-entry + .sk-entry { border-top: 1px solid var(--line); }
.sk-line { padding: 8px 0; }
.sk-sched { gap: 8px; }
.sk-product { margin-top: 0; }
.sk-start { justify-content: space-between; }
.sk-help { text-align: center; }
.sk-sure { padding: 12px; border-radius: var(--r-row); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); }
.sk-warn { margin-top: var(--space); }
.tag-est { display: inline-flex; align-items: center; height: 20px; margin-left: 8px; padding: 0 7px; border-radius: var(--r-chip); font-family: var(--font-sys); font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--warn-text); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }

/* a round check (44 px hit area, 24 px ring) and the product / step lists */
.sk-check { position: relative; width: var(--tap); height: var(--tap); flex: none; display: grid; place-items: center; font-family: var(--font-sys); font-size: 13px; font-weight: 700; color: var(--good-text); }
.sk-check::before { content: ""; position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); }
.sk-check.ok::before { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 8%, transparent); }
.sk-check[disabled] { opacity: 1; }
.sk-mrow > .sk-check { margin-left: -10px; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; align-items: center; gap: 4px; min-height: 52px; border-top: 1px solid var(--line); font-size: 14px; }
.steps li:first-child { border-top: 0; }
.steps li > .sk-check { margin-left: -10px; }
.steps .nm { flex: 1; min-width: 0; padding: 4px 0; }
.steps .nm small { display: block; font-size: 11.5px; color: var(--text-2); margin-top: 1px; }
.sk-steps { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.45; }

/* the ladder at the foot of a sheet */
.ladder { list-style: none; margin: 4px 0 0; padding: 0; }
.ladder li { display: flex; align-items: center; gap: 12px; min-height: 40px; font-size: 13.5px; color: var(--text-2); }
.ladder .d { width: 8px; height: 8px; flex: none; border: 1px solid var(--line-2); transform: rotate(45deg); }
.ladder li.done .d { background: var(--good); border-color: var(--good); }
.ladder li.now { color: var(--text); font-weight: 600; }
.ladder li.now .d { background: var(--sys); border-color: var(--sys); box-shadow: var(--pip-glow); }
.ladder .lvn { width: 40px; font-family: var(--font-sys); font-weight: 600; font-size: 11px; letter-spacing: .1em; color: var(--text-2); }
.ladder li.now .lvn { color: var(--sys-text); }
.ladder .nx { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--text-2); text-align: right; }

/* IRON WILL: the red SOS button, the counter, the notes */
.btn.pen { background: var(--pen); color: var(--on-pen); }
.sos-btn { flex-direction: column; gap: 2px; min-height: 64px; font-size: 15px; letter-spacing: .2em; box-shadow: var(--pen-glow); }
.sos-btn small { font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.sk-counter .sk-top { align-items: flex-start; }
.sk-bignum { margin-top: 6px; font-size: 56px; }
.sk-ringlab { font-size: 12px; font-weight: 700; line-height: 1.15; }
.sk-ringnext { font-weight: 600; font-size: 9px; }
.sk-milestone { margin-top: 12px; color: var(--text-2); }
.sk-slipnote p + p, .sk-simpler p + p { margin-top: 8px; }
.sk-debrief { margin-top: 12px; }
.sk-map { gap: 8px; }
.sk-pair { gap: 6px; flex: none; }
.sk-foot2 { min-height: var(--tap); align-items: flex-start; }
.sk-foot2 .small { flex: 1; padding-top: 12px; }
.sk-entry { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 4px 0; }
.sk-entry .t { flex: 1; min-width: 0; }
.sk-entry .t b { display: block; font-family: var(--font-sys); font-weight: 600; font-size: 14px; }
.sk-entry .t small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.sk-plan { padding: 4px 0; border-top: 1px solid var(--line); }
.sk-plan:first-child { border-top: 0; }

/* the URGE SOS player: full screen; a ring timer, or (reduced motion) a plain list of the seven steps with a timer */
.sheet.sos-sheet { height: 100dvh; max-height: 100dvh; border-radius: 0; }
.sos-sheet .handle { display: none; }
.sos { display: flex; flex-direction: column; gap: 16px; }
.sos-step { text-align: center; }
.sos-title { margin-top: 8px; font-size: 34px; }
.sos .ring.sos-ring { margin: 0 auto; }
.sos .ring.sos-ring svg { overflow: visible; }
.sos .tim { font-size: 54px; font-weight: 200; }
.sos-left { margin-top: 8px; }
.sos-textclock { text-align: center; }
.sos-text { text-align: center; font-size: 16px; line-height: 1.5; padding: 0 8px; }
.sos-chips { justify-content: center; }
.sos-rate { gap: 8px; }
.sos-rate > label { text-align: center; }
.sos-rate .sk-picks { justify-content: center; }
.sos-list { list-style: none; margin: 0; padding: 0; }
.sos-list li { display: flex; align-items: center; gap: 12px; min-height: 40px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.sos-list li:first-child { border-top: 0; }
.sos-list li.now { color: var(--text); font-weight: 600; }
.sos-list .k { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); font-family: var(--font-sys); font-size: 11px; font-weight: 700; }
.sos-list li.now .k { border-color: var(--sys); color: var(--sys-text); }
.sos-list li.past .k { color: var(--good-text); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.sos-list .nm { flex: 1; min-width: 0; }
.sos-stop { display: flex; margin: 0 auto; }
.sos-nowrap { white-space: nowrap; }
.help { font-size: 12.5px; line-height: 1.5; color: var(--text-2); text-align: center; }
.help b { color: var(--text); font-weight: 600; }
.sos-result { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0; text-align: center; }

/* the Library */
.sk-goal { font-family: var(--font-sys); font-weight: 600; font-size: 17px; color: var(--text); }
.sk-nowpages { font-size: 20px; color: var(--text); white-space: nowrap; }
.sk-nowpages.ok { color: var(--good-text); }
.sk-bar { margin: 12px 0; }
.sk-lbchip { height: 36px; font-size: 10.5px; }
.sk-book { display: flex; flex-direction: column; gap: 10px; }
.sk-bk-top { align-items: flex-start; }
.sk-bk-act { gap: 8px; }
.sk-onpage { margin-top: var(--pad); text-align: center; }
.sk-pick-books { gap: 8px; margin-bottom: var(--space); }
.sk-bookrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 60px; padding: 8px 0; }
.sk-bookrow .t { flex: 1; min-width: 0; }
.sk-bookrow .t b { display: block; font-family: var(--font-sys); font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.sk-bookrow .t small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.sk-chev { font-size: 22px; line-height: 1; }
/* Task S8: the reminder times, the red-flag list, the setup's Skills step */
.sk-remind { min-height: var(--tap); align-items: center; gap: 10px; }
.sk-remind > .small { flex: 1; min-width: 0; }
.sk-remind-ctl { flex: none; gap: 6px; }
.input.sk-time { width: 112px; min-height: var(--tap); }
.sk-remind-box { padding-top: 4px; }
.sk-redflags { margin-top: 12px; }
.sk-flags { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); }
.sk-flags li + li { margin-top: 6px; }
.setup-body > [data-testid="skills-step"] > .card { gap: 12px; }
.sk-product + .sk-product { margin-top: 10px; }
.setup-body .sk-product { gap: 8px; }
/* ---------- Task T2: the Legend Titles. Nameplates (R85/R86), the Titles row, the sheet, the cards and the unlock window. Tokens and the per-title palette only: the
   palette arrives as --np-* custom properties set from the CSSOM (js/titles.js), so no colour is written here. The aura is its own layer (.tp-aura, .np-behind), STILL
   in this task; Task T3 animates them with transform and opacity only. ---------- */
.tp-plate { position: relative; display: block; width: 100%; }
.tp-plate .np { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.np-glow { filter: blur(9px); }
.np-tongue { filter: blur(3px); }
.np-flame { filter: blur(.4px); }
.np-wisp { filter: blur(3px); }
.np-mist, .np-drip { filter: blur(.7px); }
.np-bolt, .np-halo, .np-spark, .np-slash, .np-blade, .np-fang, .np-cut, .np-crown, .np-crack { filter: drop-shadow(0 0 2.5px currentColor); }
.np-bevel { fill: none; stroke: var(--np-deep); stroke-width: 6; stroke-linejoin: miter; }
.np-plate { stroke: var(--np-edge); stroke-width: 2; stroke-linejoin: miter; }
.np-inset { fill: none; stroke: var(--np-bright); stroke-opacity: .55; stroke-width: 1; stroke-linejoin: miter; }
.np-notch { fill: var(--np-deep); stroke: var(--np-edge); stroke-width: 1; stroke-linejoin: miter; }
.np-name { font-family: var(--font-sys); font-weight: 700; letter-spacing: .12em; fill: var(--text); paint-order: stroke; stroke: var(--ink); stroke-opacity: var(--np-name-so, .35); stroke-width: var(--np-name-sw, .6); filter: drop-shadow(0 0 1.5px var(--np-name-glow, var(--np-glow))) drop-shadow(0 0 7px var(--np-name-glow, var(--np-glow))); }   /* a pale plate gets a dark halo and a firmer ink stroke (titles.js nameContrast) */
/* a locked title is a grey silhouette made of theme tokens; a "???" plate is the same */
.tp-plate.locked { --np-base: var(--card-2); --np-bright: var(--text-3); --np-deep: var(--bg-2); --np-glow: transparent; --np-edge: var(--text-3); }
.tp-plate.locked .np-name { fill: var(--text-2); filter: none; stroke: none; }
/* the aura layer: a static glow from the palette behind the plate, shown where a plate stands alone (a card, the unlock window), not in the grid */
.tp-aura { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background: radial-gradient(40% 70% at 50% 100%, var(--np-aura-c), transparent 75%), radial-gradient(34% 80% at 14% 50%, var(--np-aura-l), transparent 72%), radial-gradient(34% 80% at 86% 50%, var(--np-aura-r), transparent 72%); }
.tp-card .tp-aura, .tp-eq .tp-aura { display: none; }   /* in the grid and under his name the plate's own decoration is the aura */
.tp-stage { position: relative; padding: 18px 8px; background: var(--ink); border-radius: var(--r-row); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; isolation: isolate; }
.tp-stage .tp-plate { position: static; }   /* the aura layer fills the stage, not the plate */
.tp-stage.dim { background: none; box-shadow: none; padding: 8px 0; }
/* under his name in the status window (board 09) */
.status-who { min-width: 0; flex: 1 1 auto; }
.tp-eq { width: min(232px, 100%); margin: 4px 0 0 -10px; }
.tp-eq-minor { margin-top: 6px; }
.rank-cap-row { flex-direction: column; gap: 6px; margin-top: 6px; }
.rank-cap-row .rank-cap { margin-top: 0; }
.titles-box .win-line { margin: 12px 0 4px; }
.tp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 4px 0; text-align: left; color: var(--text); background: none; border: 0; border-radius: var(--r-row); }
.tp-row .ic { flex: none; color: var(--text-2); }
.tp-row-text { min-width: 0; }
.tp-row-count { margin-top: 4px; font-family: var(--font-sys); font-size: 17px; color: var(--text-2); }
.tp-row-count b { color: var(--text); font-weight: 600; }
/* the sheet: one plate per row on a phone so every name reads */
.tp-body > * + * { margin-top: 12px; }
.tp-sub { margin: 0; }
.tp-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.tp-card { display: block; width: 100%; min-height: var(--tap); padding: 4px 10px 8px; text-align: left; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); content-visibility: auto; contain-intrinsic-size: auto 112px; }
.tp-card.worn { border-color: var(--sys-rim-2); }
.tp-meta { gap: 8px; margin-top: -2px; font-size: 11.5px; color: var(--text-2); }
.tp-meta b { font-family: var(--font-sys); font-weight: 600; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.tp-meta span { text-align: right; }
.tp-meta .on { color: var(--sys-text); font-weight: 600; }
.tp-meta .good { color: var(--good-text); }
.tp-detail-head { gap: 12px; min-height: var(--tap); }
.tp-detail { display: flex; flex-direction: column; gap: 12px; }
.tp-origin { margin: 0; font-size: 13px; line-height: 1.45; font-style: italic; color: var(--text-2); }
.tp-pills { gap: 8px; justify-content: flex-start; }
.tp-ok { margin: 8px 0 0; color: var(--good-text); }
.tp-detail .err { margin: 0; }
.tp-m + .tp-m { margin-top: 10px; }
.tp-ml { color: var(--text); font-size: 13px; }
.tp-mv { color: var(--text-2); font-size: 12.5px; white-space: nowrap; }
.tp-m.met .tp-mv { color: var(--good-text); }
.tp-m .bar { margin-top: 6px; }
.tp-dim i { width: 0; }
.tp-minor-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.tp-minor-row + .tp-minor-row { border-top: 1px solid var(--line); }
.tp-minor-row { flex-wrap: wrap; }   /* a narrow phone puts the button under the name, never a word broken in two */
.tp-minor-name { min-width: 0; flex: 1 1 128px; }
.tp-minor-row .btn { width: auto; flex: none; min-width: 104px; }
.tp-on { margin-left: 8px; color: var(--sys-text); }
/* the unlock window: the plate over its aura, then Equip and Later side by side */
.sys-window.tp-unlock { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; align-content: start; }
.sys-window.tp-unlock > * { grid-column: 1 / -1; }
.sys-window.tp-unlock > .btn { grid-column: auto; }
.sys-window.tp-unlock > .btn + .btn { margin-top: 0; }
.tp-unlock-stage { padding: 44px 6px; margin-top: 12px; }
.tp-unlock-meta { margin-top: 12px; }
.tp-unlock .tp-origin { margin-top: 8px; }
.tp-unlock .sys-lines { display: none; }
/* ---------- motion: transform and opacity only; the System window materialises (Task 12 adds the sweep and the chime) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .materialise { animation: mat var(--t-window) var(--ease) both; }
  @keyframes mat { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
  .screen { animation: screen-in var(--t-med) var(--ease) both; }
  @keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .sheet { animation: sheet-in 180ms var(--ease) both; }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  .sheet-scrim { animation: scrim-in 180ms var(--ease) both; }
  @keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
  .dots.shake { animation: shake 320ms var(--ease); }
  @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
}
@media (prefers-reduced-motion: reduce) {
  .tab .tab-ic, .tab-drop, .toast, .toggle::after, .hold .lab-col, .btn, .splash { transition: none; }
  .tab[aria-selected="true"] .tab-ic, .tabbar-pill.is-pressing .tab.is-lit .tab-ic { transform: none; }
}

/* ================================================================================================================================================================
   Task 12c: the coach sheet and the ARISE call. A separate block at the end of this file. Tokens only (no colour literal); both modes read them; transform and opacity are
   the only things that animate. The ARISE layer is .keep-arise, so it looks the same in Arise and in Dark. */
/* ---------- the coach sheet (js/coach.js) ---------- */
.coach-sees { align-items: flex-start; gap: 12px; flex-wrap: nowrap; }
.coach-sees .mk { flex: none; }
.coach-log { display: flex; flex-direction: column; gap: 8px; max-height: 38dvh; overflow-y: auto; overscroll-behavior: contain; }
.coach-log:empty { display: none; }
.sheet:focus { outline: none; }   /* the sheet takes the focus from a tap on plain text (js/ui.js sheet), so Escape works there; no ring on the whole sheet */
.coach-msg { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: start; padding: 10px 12px; border-radius: var(--r-row); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); }
.coach-msg > * { grid-column: 1; min-width: 0; }
.coach-msg .coach-speak { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin: -6px -8px 0 0; }
.coach-msg.me { margin-left: 24px; background: var(--accent-soft); }
.coach-msg.coach { margin-right: 8px; }
.coach-msg .coach-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.coach-who { color: var(--text-2); }
.coach-msg.typing { opacity: .8; }
.coach-speak[aria-pressed="true"] { color: var(--sys-text); box-shadow: inset 0 0 0 1px var(--sys-rim); background: var(--accent-soft); }
.coach-switches { gap: 0; }
.coach-switches .toggle-row + .toggle-row { border-top: 0; }
.coach-switches .toggle-row[aria-busy="true"] { opacity: .7; }
.coach-mark { width: 36px; height: 36px; }

/* ---------- the ARISE call (js/arise.js) ---------- */
.arise-layer { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; overflow: hidden; cursor: pointer; background: transparent; }
.arise-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at center, var(--sys-deep), var(--bg) 80%); opacity: .97; }
.arise-ring { position: absolute; left: 50%; top: 50%; width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin; border-radius: 50%; border: 1px solid var(--sys-rim); box-shadow: var(--sys-glow); opacity: 0; pointer-events: none; }
.arise-word { position: relative; font-family: var(--font-sys); font-weight: 800; font-size: clamp(40px, 14vw, 80px); line-height: 1; letter-spacing: var(--track-caps-wide); padding-left: var(--track-caps-wide); color: var(--sys-text); text-shadow: 0 0 22px var(--sys), 0 0 60px var(--sys-deep); }
.arise-layer.still .arise-ring { opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .arise-layer:not(.still) .arise-veil { animation: arise-veil 1700ms var(--ease) both; }
  .arise-layer:not(.still) .arise-word { animation: arise-word 1700ms var(--ease) both; }
  .arise-layer:not(.still) .arise-ring { animation: arise-ring 1700ms var(--ease) both; }
  @keyframes arise-veil { 0% { opacity: 0; } 14% { opacity: .97; } 80% { opacity: .97; } 100% { opacity: 0; } }
  @keyframes arise-word { 0% { opacity: 0; transform: scale(1.7); } 24% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: scale(1.04); } 100% { opacity: 0; transform: scale(1.12); } }
  @keyframes arise-ring { 0% { opacity: 0; transform: scale(.3); } 20% { opacity: .8; } 100% { opacity: 0; transform: scale(2.4); } }
}

/* ---------- Task T3: the Legend Title auras (js/auras.js). The aura is a canvas (canvas.tp-fx) under the plate's SVG: it repaints itself, so no CSS property is
   animated for it. The plate is its own stacking context so the canvas (z-index -1) sits over the card's background and under the SVG; T2's still gradient steps
   aside while a live aura runs (.tp-live). The only CSS motion here is the unlock stage settling in and the Equip / Later buttons arriving after the aura has played:
   transform and opacity, nothing else (tests/client.test.mjs guards this block). ---------- */
.tp-plate { isolation: isolate; }
.tp-fx { position: absolute; z-index: -1; display: block; pointer-events: none; }
.tp-fx-over { z-index: 2; }   /* the few effects that live on the plate's face (a crack, a glint on the cut) sit over the SVG */
.tp-plate.tp-live .tp-aura { display: none; }
.tp-card { isolation: isolate; }
.tp-meta { position: relative; z-index: 1; }   /* the card's text row stays over the glow */
.sys-window.tp-unlock > .btn.tp-wait { visibility: hidden; animation: none; }   /* Equip / Later keep their place while the aura plays: invisible, inert, out of the tab order */
@media (prefers-reduced-motion: no-preference) {
  .tp-unlock-stage { animation: tp-stage-in 900ms var(--ease-out-back) both; }
  @keyframes tp-stage-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
  .sys-window.tp-unlock > .btn { animation: tp-btn-in 320ms var(--ease) both; }
  @keyframes tp-btn-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
/* ---------- end of Task T3 ---------- */

/* ---------- Task 13: the Body tab, Settings, the connect guides and the fitness-test retake (js/body.js, js/charts.js, js/settings.js, js/connect.js, js/retake.js).
   Tokens only, no colour value at all: the Arise preview card of Appearance is .keep-arise (the Arise tokens in either mode), and the Dark preview card, which has to look the same
   in BOTH modes, is mixed from the plain keywords black and white (a neutral graphite, as Dark is). Motion: none beyond the toggle the app already has. 44 px on every control. ---------- */
/* Body */
.body-tools { gap: 8px; }
.body-today { margin-top: 4px; }
.body-card .body-edit { min-height: var(--tap); margin: -10px -8px -10px 0; }
.body-big { font-size: clamp(24px, 8.4vw, 30px); margin-top: 8px; }
.body-big .body-unit { font-size: 14px; color: var(--text-2); }
.body-sub { margin-top: 4px; }
.body-card .bar { margin-top: 8px; }
.body-energy { align-items: flex-end; }
.body-bal { text-align: right; }
.body-formula { margin-top: 8px; }
.body-ranges { gap: 8px; }
.body-empty { margin-top: 12px; }
.body-line { margin-top: 8px; }
.chart-bars { margin-top: 16px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.bars i { flex: 1; min-width: 0; border-radius: var(--r-bar) var(--r-bar) 0 0; background: var(--primary, var(--sys)); opacity: .5; height: var(--h); }   /* --r-bar and --primary follow the mode: square and cyan in Arise, rounded and white in Dark */
.bars i.goal { opacity: 1; box-shadow: var(--sys-bar-glow); }
.bars i.today { opacity: .95; background: linear-gradient(180deg, var(--primary, var(--sys)), color-mix(in srgb, var(--primary, var(--sys)) 35%, transparent)); }
.bars-axis { display: flex; gap: 6px; margin-top: 8px; }
.bars-axis span { flex: 1; min-width: 0; display: flex; justify-content: center; white-space: nowrap; font-size: 11px; }
.bars-axis span.now { color: var(--text); }
.wline { display: block; color: var(--primary, var(--sys)); }
.wline polyline.l { filter: var(--ring-glow); }
/* Settings: a tall sheet (the same full-height rule as the URGE SOS player), sections as cards */
.sheet.settings-sheet { height: 100dvh; max-height: 100dvh; border-radius: 0; }
.settings-sheet .handle { display: none; }
.set-sub { margin-top: 8px; }
.set-coaches { justify-content: space-between; flex-wrap: wrap; gap: 4px 0; }   /* seven 42 px glyphs fit one row from 360 px; below that they wrap */
.set-coaches .mk.tap { width: 42px; height: 42px; border-radius: var(--r-btn); }
.set-coaches .mk.tap::before { content: ""; position: absolute; inset: -2px; }
.set-coaches .mk.on { --hex-fill: var(--accent-soft); filter: var(--accent-glow-f); }
.set-days { gap: 6px; }
.set-days .chip.tap { min-width: 40px; }
.set-slider input { width: 100%; }
.cn-range { width: 100%; min-height: var(--tap); accent-color: var(--primary, var(--sys)); }
/* the two mode cards (Plate AI's preview cards) and the App logo row */
.theme-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.theme-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-sys); font-size: 13px; font-weight: 600; color: var(--text-2); min-height: var(--tap); text-align: center; }
.theme-opt small { display: block; font-weight: 500; font-size: 11px; color: var(--text-2); line-height: 1.3; }
.theme-opt[aria-checked="true"] { color: var(--text); }
.theme-prev { width: 100%; aspect-ratio: 4 / 5; max-height: 132px; border-radius: 14px; border: 2px solid var(--line-2); position: relative; overflow: hidden; isolation: isolate; }
.theme-opt[aria-checked="true"] .theme-prev { border-color: var(--primary, var(--sys)); box-shadow: var(--accent-glow); }
.theme-prev i { position: absolute; left: 12%; width: 76%; display: block; }
.theme-prev.arise { background: var(--bg); }   /* .keep-arise: the Arise tokens, whatever the mode is */
.theme-prev.arise i:nth-child(1) { top: 12%; height: 34%; border-radius: 2px; background: var(--sys-fill-2); box-shadow: 0 0 0 1px var(--sys-rim-2); }
.theme-prev.arise i:nth-child(1)::before { content: ""; position: absolute; left: 10%; top: 24%; width: 40%; height: 2px; background: var(--sys-text); }
.theme-prev.arise i:nth-child(1)::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 22%; height: 2px; background: var(--track); box-shadow: inset 32px 0 0 var(--sys); }
.theme-prev.arise i:nth-child(2), .theme-prev.arise i:nth-child(3) { height: 14%; border-radius: 1px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.theme-prev.dark { --pv-bg: color-mix(in srgb, white 5%, black); --pv-card: color-mix(in srgb, white 10%, black); --pv-line: color-mix(in srgb, white 17%, black); --pv-ink: color-mix(in srgb, white 96%, black); --pv-bar: white; background: var(--pv-bg); }
.theme-prev.dark i:nth-child(1) { top: 12%; height: 34%; border-radius: 8px; background: var(--pv-card); box-shadow: 0 0 0 1px var(--pv-line); }
.theme-prev.dark i:nth-child(1)::before { content: ""; position: absolute; left: 10%; top: 24%; width: 40%; height: 2px; border-radius: 1px; background: var(--pv-ink); }
.theme-prev.dark i:nth-child(1)::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 22%; height: 2px; border-radius: 1px; background: var(--pv-line); box-shadow: inset 32px 0 0 var(--pv-bar); }
.theme-prev.dark i:nth-child(2), .theme-prev.dark i:nth-child(3) { height: 14%; border-radius: 6px; background: var(--pv-card); box-shadow: 0 0 0 1px var(--pv-line); }
.theme-prev i:nth-child(2) { top: 54%; }
.theme-prev i:nth-child(3) { top: 74%; }
.looks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.look { position: relative; min-height: var(--tap); min-width: 0; display: grid; place-items: center; border-radius: var(--r-btn); border: 1px solid var(--line); padding: 3px; }   /* 48 px tile + padding + border fit a quarter of a 320 px card */
.look .tile { width: 48px; height: 48px; border-radius: 11px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); }
.look[aria-checked="true"] { border-color: var(--primary, var(--sys)); box-shadow: var(--accent-glow); }
/* the connect guides: numbered steps, each with a picture of the card the other app shows */
.cn-steps, .cn-plain { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.cn-steps { padding-top: 8px; }
.cn-plain { gap: 6px; }
.cn-plain li { padding-left: 14px; position: relative; }
.cn-plain li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
.cn-step { display: flex; gap: 12px; align-items: flex-start; }
.cn-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--sys-text); border: 1px solid var(--line-2); }
.cn-step > .stack { flex: 1; min-width: 0; }
.cn-pic { border: 1px solid var(--line-2); border-radius: var(--r-row); background: var(--card-2); padding: 10px 12px; font-size: 12px; }
.cn-pic-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-sys); font-weight: 600; margin-bottom: 6px; }
.cn-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--primary, var(--sys)); flex: none; }
.cn-pic-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px solid var(--line); }
.cn-pic-row span { color: var(--text-2); flex: none; }
.cn-pic-row b { font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.cn-token-row { align-items: stretch; }
.cn-token { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; letter-spacing: .04em; }
.cn-code { text-transform: uppercase; letter-spacing: .18em; font-family: var(--font-sys); font-weight: 600; text-align: center; }
/* the retake result and its review: the label never wraps, the numbers wrap under it when the phone is narrow */
.rt-line { gap: 12px; flex-wrap: wrap; }
.rt-label { flex: none; white-space: nowrap; }
.rt-vals { gap: 8px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.rt-unit { display: inline-block; min-width: 1.8em; }
.rt-input { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
/* the tall sheets keep their Close button in reach: the head sticks to the top while the long list scrolls under it (Settings is about 3,000 px tall on a phone) */
.settings-sheet .sheet-head { position: sticky; top: 0; z-index: 3; background: var(--bg-2); padding: 8px 0; margin-top: -8px; }
/* ---------- end of Task 13 ---------- */

/* ---------- Task 14: the Arcs tab (js/arcs.js, js/covers.js). The comic pages read the Arcs tokens (--paper, --ink, --arc, --arc-text, --arc-ink, --halftone), which
   both modes keep (the comic stays paper-and-ink in Arise and in Dark); the chrome around them (the heading, the pinned chapter header, the shelf, the sheet) reads
   the mode's tokens. The only scroll animation in the app: transform and opacity only, under prefers-reduced-motion: no-preference; with reduced motion the
   content is simply shown (js/arcs.js scrollReveal). Fix round 1: the title takes the whole row, sized by its longest word; already-revealed nodes are set (.is-set), not replayed; small text on paper is soft ink. The first line derives the Arcs ink/paper tints from the tokens with color-mix(); every rule reads tokens (no colour value, no transition: the reveals are keyframes). ---------- */
.tab-arcs, .ac-burst { --ac-ink-soft: color-mix(in srgb, var(--ink) 64%, transparent); --ac-ink-line: color-mix(in srgb, var(--ink) 28%, transparent); --ac-paper-line: color-mix(in srgb, var(--paper) 22%, transparent); --ac-paper-soft: color-mix(in srgb, var(--paper) 68%, transparent); --ac-arc-soft: color-mix(in srgb, var(--arc) 16%, transparent); --ac-burst-scrim: color-mix(in srgb, var(--bg) 76%, transparent); }

/* the heading: the arc's name in the comic face, the chapter and the day at the right, the day bar under both */
.ac-title { margin: 0; display: flex; flex-direction: column; width: 100%; min-width: 0; font-family: var(--font-arc); font-weight: 400; font-size: 42px; line-height: .92; letter-spacing: .01em; text-transform: uppercase; color: var(--text); overflow-wrap: normal; }
.ac-title.long { font-size: 34px; }
.ac-title.xlong { font-size: 27px; }
.ac-title.xxlong { font-size: 22px; }
.ac-title.clamp { font-size: 20px; line-height: 1; overflow-wrap: anywhere; max-height: 3em; overflow: hidden; }   /* an absurd word (60 characters): it may break, and never runs past three lines */
.ac-t1, .ac-t2 { display: block; min-width: 0; }
.ac-t2 { color: var(--arc-text); }
.ac-head-meta { margin-top: 8px; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.ac-chapter-no { font-family: var(--font-arc); font-size: 16px; letter-spacing: .03em; text-transform: uppercase; color: var(--arc-text); white-space: nowrap; }
.ac-head-day { text-align: right; min-width: 0; }
.ac-bar { height: 8px; margin-top: 12px; background: var(--track); overflow: hidden; }
.ac-bar i { display: block; height: 100%; width: var(--w, 0%); background: var(--arc); }
.ac-note { margin: 0; }
.ac-fail { display: grid; gap: 10px; }
.ac-fail .btn { justify-self: start; }

/* the pinned chapter header: "Chapter N · Day X of Y" stays readable while the pages scroll (position: sticky; no ancestor clips) */
.ac-sentinel { height: 1px; margin-top: 0 !important; }
.ac-pin { position: sticky; top: calc(var(--shield-h) + 8px); z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px !important; padding: 8px 12px; background: var(--bg); border: 1px solid var(--line-2); border-left: 4px solid var(--arc); font-family: var(--font-sys); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.ac-pin-text { white-space: nowrap; }
.ac-pin-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text-2); }
.ac-pin::after { content: ""; position: absolute; inset: 0; z-index: -1; box-shadow: var(--shadow-float); opacity: 0; pointer-events: none; }
.ac-pin.is-stuck::after { opacity: 1; }

/* a comic panel: paper and ink, a hard shadow, square corners (the design board's .panel) */
.tab-arcs .panel, .ac-burst-panel { position: relative; padding: 14px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 0; box-shadow: 4px 4px 0 var(--ink), 0 0 0 1px var(--paper); }
.tab-arcs .panel.dark { background: var(--ink); color: var(--paper); border-color: var(--paper); box-shadow: 4px 4px 0 var(--arc); }
.tab-arcs .ht { position: absolute; inset: 0; pointer-events: none; background-image: var(--halftone); background-size: var(--halftone-size); opacity: .14; -webkit-mask-image: linear-gradient(135deg, var(--ink) 20%, transparent 60%); mask-image: linear-gradient(135deg, var(--ink) 20%, transparent 60%); }
.tab-arcs .cap { font-family: var(--font-arc); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--arc-ink); }
.tab-arcs .panel.dark .cap { color: var(--arc-text); }
.tab-arcs .cap.ac-cap-ink { color: var(--ink); }
.tab-arcs .cap.ac-cap-paper { color: var(--paper); }
.ac-headline { margin-top: 8px; font-family: var(--font-arc); font-size: 21px; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.ac-page-body, .ac-editor { margin-top: 8px; padding-top: 8px; border-top: 1.5px dashed var(--ac-ink-line); }
.ac-quote { margin: 0 0 6px; font-size: 14px; line-height: 1.4; color: var(--ac-ink-soft); overflow-wrap: anywhere; }
.ac-quote.empty { font-style: italic; }
.ac-text { margin: 8px 0 12px; font-size: 14px; color: var(--ac-ink-soft); }
.ac-page .link-btn { color: var(--arc-ink); }
.ac-page .btn, .ac-burst-ok { background: var(--ink); color: var(--paper); border-radius: 0; }
.ac-page .row.sp { flex-wrap: wrap; }
.tab-arcs .panel .muted, .tab-arcs .panel .small.muted, .tab-arcs .panel .ac-count { color: var(--ac-ink-soft); }
.tab-arcs .panel.dark .muted { color: var(--ac-paper-soft); }

/* the mood: five faces, 44 px each */
.ac-mood { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-face { width: var(--tap); height: var(--tap); padding: 0; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--font-sys); font-weight: 700; font-size: 14px; font-style: normal; }
.ac-face.on { background: var(--arc); border-color: var(--arc); color: var(--ink); }
.ac-mood-shown { display: inline-flex; align-items: center; gap: 8px; }
.ac-mood-shown .ac-face { width: 28px; height: 28px; font-size: 11px; }

/* the journal editor (the line stays on the phone until it is saved) */
.ac-editor { display: grid; gap: 8px; }
.ac-editor .field { gap: 0; }
.ac-area { min-height: 64px; padding: 8px 10px; border-radius: 0; border: 1.5px solid var(--ink); background: var(--paper-2); color: var(--ink); font-family: var(--font-body); font-size: 14px; line-height: 1.4; resize: vertical; }
.ac-area::placeholder { color: var(--ac-ink-soft); }
.ac-area:focus-visible { border-color: var(--arc-ink); outline-color: var(--arc-ink); }
.ac-editor .err { padding: 0; border: 0; background: transparent; color: var(--arc-ink); font-weight: 600; }
.ac-editor .sk-saved { color: var(--ac-ink-soft); }
.ac-editor-row { justify-content: flex-end; flex-wrap: wrap; }
.ac-save { min-width: 150px; }

/* the chapters panel: paper on ink */
.ac-ch-list { margin-top: 8px; }
.ac-chapters:focus { outline: none; }
.ac-chapters:focus-visible { outline: 2px solid var(--arc); outline-offset: 3px; }
.ac-ch { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; column-gap: 10px; min-height: var(--tap); padding: 6px 0; border-top: 1.5px dashed var(--ac-paper-line); font-size: 14px; }
.ac-ch:first-child { border-top: 0; }
.ac-ch .k { font-family: var(--font-arc); font-size: 20px; line-height: 1; }
.ac-ch.done .k, .ac-ch .d.ac-cleared { color: var(--arc-text); }
.ac-ch .d { font-size: 11px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; color: var(--ac-paper-soft); }
.ac-ch.now { margin: 0 -14px; padding: 8px 14px; background: linear-gradient(90deg, var(--ac-arc-soft), transparent); }
.ac-ch.now .k { color: var(--arc); }
.ac-ch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ac-ch-how { color: var(--ac-paper-soft); }
.ac-ch-act { grid-column: 2 / -1; margin-top: 6px; }
.ac-clear { min-height: var(--tap); border-radius: 0; background: var(--arc); color: var(--ink); }

/* the end of the arc and the Volumes shelf (the chrome: the mode's tokens) */
.ac-end .err { margin: 0; }
.ac-sure { padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--card); }
.ac-sure:focus { outline: none; }
.ac-h2 { margin: 0; font-family: var(--font-arc); font-weight: 400; font-size: 18px; letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.ac-vols { display: flex; gap: 12px; align-items: flex-end; overflow-x: auto; overflow-y: hidden; padding: 6px 6px 8px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ac-vols::-webkit-scrollbar { display: none; }
.ac-vol { flex: none; width: 92px; display: flex; flex-direction: column; gap: 6px; }
.ac-vol .cv { display: block; width: 92px; height: 123px; box-shadow: 3px 3px 0 var(--arc); }
.ac-vol-name { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-vol-empty { overflow-wrap: anywhere; box-sizing: border-box; width: 92px; height: 123px; padding: 8px; display: grid; place-items: center; border: 2px dashed var(--line-2); color: var(--text-2); font-size: 11px; text-align: center; }
.ac-shelf-line { height: 2px; margin-top: 4px; background: var(--paper); box-shadow: 0 2px 0 var(--arc); opacity: .9; }

/* the covers (js/covers.js): the SVG's classes read the Arcs tokens; a dark style swaps paper and ink */
.cv { font-family: var(--font-arc); }
.cv-ground { fill: var(--paper); }
.cv-dark .cv-ground { fill: var(--ink); }
.cv-dot { fill: var(--ink); opacity: .5; }
.cv-dark .cv-dot { fill: var(--paper); opacity: .32; }
.cv-rays line { stroke: var(--ink); opacity: .32; stroke-linecap: round; }
.cv-dark .cv-rays line { stroke: var(--paper); opacity: .28; }
.cv-rays-hot line { stroke: var(--arc); opacity: .85; }
.cv-shape, .cv-band { fill: var(--arc); }
.cv-plate { fill: var(--paper); opacity: .88; }
.cv-dark .cv-plate { fill: var(--ink); }
.cv-frame { fill: none; stroke: var(--ink); stroke-width: 3; }
.cv-frame-in { stroke-width: 1; opacity: .7; }
.cv-dark .cv-frame { stroke: var(--paper); }
.cv-title { fill: var(--ink); }
.cv-foot { fill: var(--ink); font-family: var(--font-sys); font-weight: 700; letter-spacing: .08em; }
.cv-dark .cv-title, .cv-dark .cv-foot { fill: var(--paper); }

/* the new-arc sheet's editor */
.ac-chapter-fields { display: grid; grid-template-columns: 1fr 76px; gap: 8px; }
.ac-chapter-card { padding: 12px; }
.ac-chapter-card .input { font-family: var(--font-body); font-size: 15px; }

/* the panel burst: a cleared chapter */
.ac-burst { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 24px calc(24px + var(--sar)) 24px calc(24px + var(--sal)); overflow: hidden; }
.ac-burst-scrim { position: absolute; inset: 0; background: var(--ac-burst-scrim); }
.ac-rays { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax; pointer-events: none; opacity: .2; background: repeating-conic-gradient(from 0deg, var(--arc) 0deg 5deg, transparent 5deg 17deg); -webkit-mask-image: radial-gradient(circle, var(--ink) 0%, transparent 55%); mask-image: radial-gradient(circle, var(--ink) 0%, transparent 55%); }
.ac-burst-panel { width: min(100%, 340px); padding: 22px 18px; text-align: center; border-width: 3px; box-shadow: 6px 6px 0 var(--arc), 0 0 0 2px var(--paper); }
.ac-burst-cap { font-family: var(--font-arc); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--arc-ink); }
.ac-burst-big { margin-top: 6px; font-family: var(--font-arc); font-size: 44px; line-height: .95; text-transform: uppercase; }
.ac-burst-title { margin: 10px 0 16px; font-size: 15px; color: var(--ac-ink-soft); overflow-wrap: anywhere; }
.ac-burst-ok { width: 100%; }

/* the motion: keyframes on transform and opacity only (an element waits unseen at opacity 0 and rises once when it enters the view); reduced motion shows everything at once (js adds .ac-still and .is-in) */
@media (prefers-reduced-motion: no-preference) {
  .ac-motion [data-reveal] { opacity: 0; }
  .ac-motion [data-reveal].is-in { animation: ac-rise var(--t-arc-reveal) var(--ease) var(--d, 0ms) both; }
  .ac-motion [data-reveal].is-set { animation: none; opacity: 1; }   /* already revealed before a redraw: shown at once, no replay */
  .ac-motion .ac-page[data-reveal].is-in { animation-name: ac-page; }
  .ac-motion .ac-ch[data-reveal].is-in { animation-name: ac-slide; }
  .ac-motion .ac-vol[data-reveal].is-in { animation-name: ac-tilt; }
  .ac-pin.is-stuck::after { animation: ac-fade var(--t-fast) var(--ease) both; }
  @keyframes ac-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
  @keyframes ac-page { from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes ac-slide { from { opacity: 0; transform: translate3d(-16px, 0, 0); } to { opacity: 1; transform: none; } }
  @keyframes ac-tilt { from { opacity: 0; transform: translate3d(0, 14px, 0) rotate(-3deg); } to { opacity: 1; transform: none; } }
  .ac-burst:not(.ac-still) .ac-burst-panel { animation: ac-pop 520ms var(--ease-out-back) both; }
  .ac-burst:not(.ac-still) .ac-rays { animation: ac-spin 16s linear infinite, ac-fade 420ms var(--ease) both; }
  .ac-burst:not(.ac-still) .ac-burst-scrim { animation: ac-fade 240ms var(--ease) both; }
  @keyframes ac-pop { from { opacity: 0; transform: scale(.6) rotate(-4deg); } to { opacity: 1; transform: none; } }
  @keyframes ac-spin { to { transform: rotate(360deg); } }
  @keyframes ac-fade { from { opacity: 0; } }
}
/* ---------- end of Task 14 ---------- */

/* ---------- Polish batch (the parked minors of Task 13 and T3). Tokens only, no colour value. ---------- */
/* P1: the Settings head sticks at the very top of the sheet. The sheet has 8 px of padding and a sticky box measures from inside it, so the head (which already pulls itself up
   by 8 px and carries 8 px of its own) sticks at -8 px: it covers the strip above it, and nothing shows through. A control focused by keyboard or by a script scrolls into view
   below the head (60 px) with room to spare, not behind it. */
.sheet.settings-sheet { scroll-padding-top: 76px; }
.settings-sheet .sheet-head { top: -8px; }
/* P4: the retake result rows stay on one line at 320 px, with the numbers on the right like the others. Where the row is narrow the chip and the gaps are a little tighter;
   if a row ever has to wrap (a very long number) the numbers stay on the right, never under the label on the left. */
.rt-vals { margin-left: auto; }
@media (max-width: 359px) {
  .rt-line { gap: 8px; }
  .rt-vals { gap: 6px; }
  .rt-vals .chip { padding: 0 6px; letter-spacing: .04em; }
}
/* ---------- end of Polish batch ---------- */

/* ---------- Task 12m: the System windows move (glint). Transform and opacity only; every animation and every element that exists for the motion (the lid, the light,
   the bloom) sits behind prefers-reduced-motion: no-preference, so a reduced-motion player sees each window complete and still, at once. Tokens only: the bar and the
   blooms read --sys-rim and --gold (so .pen-mode turns the bar red and .rankup gold), and the bar's strength is --scan, which Dark sets to 0: an in-page window in Dark
   shows no bar, and a pop-up (.keep-arise, --scan .45) looks the same in both modes. Nothing loops and nothing repeats: each element rises once and settles.
   1. Materialise (--t-window): the window scales in (mat, above); a light bar (.win-sweep, an empty span that js/ui.js and js/system.js put last in the window) sweeps once
      from the top edge to the bottom; the corner brackets (.win::before) draw in from slightly outside.
   2. The chest (.chest, --t-chest): a lid (.sys-lines::before) covers the lines and swings open on its top hinge, a soft gold light (.sys-lines::after) blooms out of it
      once, the first line shows, and the gold reward line arrives last with a small overshoot.
   3. Level up, rank up, skill level up (.sys-window .moment, --t-levelup): the old number slides in and dims, the arrow draws, the new number rises and settles, the rank
      letter flares in over a gold bloom (.moment::before, .rankup only), the skill letter flares in its own blue (R84: a rank never takes a title's colour). ---------- */
.win > .win-sweep { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent 0%, var(--sys-rim-2) 35%, var(--sys-rim) 50%, var(--sys-rim-2) 65%, transparent 100%) 0 0 / 100% 26% no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  /* 1. materialise: the bar and the brackets */
  .materialise > .win-sweep { animation: win-sweep var(--t-window) linear both; }
  .materialise::before { animation: win-brackets var(--t-window) var(--ease) both; }
  @keyframes win-sweep { 0% { opacity: 0; transform: translateY(-26%); } 20%, 78% { opacity: calc(var(--scan) * 2); } 100% { opacity: 0; transform: translateY(100%); } }
  @keyframes win-brackets { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }

  /* 2. the chest: lid, light, lines */
  .chest .sys-lines { position: relative; }
  .chest .sys-lines > * { position: relative; z-index: 1; }
  .chest .sys-lines::before { content: ""; position: absolute; inset: -10px -4px; z-index: 2; pointer-events: none; border-radius: var(--r-card); transform-origin: 50% 0; opacity: 0;
    background: linear-gradient(180deg, var(--sys-fill), var(--sys-fill-2)) var(--sys-deep); box-shadow: inset 0 0 0 1px var(--sys-rim-2), inset 0 1px 0 var(--sys-rim);
    animation: chest-lid var(--t-chest) var(--ease) both; }
  .chest .sys-lines::after { content: ""; position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; z-index: 0; pointer-events: none; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, var(--gold) 0%, color-mix(in srgb, var(--gold) 35%, transparent) 30%, transparent 70%);
    animation: chest-light var(--t-chest) var(--ease) both; }
  .chest .win-notice { animation: chest-line var(--t-chest) var(--ease) both; }
  .chest .win-notice:nth-child(2) { animation-name: chest-reward; animation-timing-function: var(--ease-out-back); }
  @keyframes chest-lid { 0% { opacity: 1; transform: none; } 40% { opacity: 1; transform: none; } 75% { opacity: .4; transform: perspective(480px) rotateX(-78deg); } 100% { opacity: 0; transform: perspective(480px) rotateX(-96deg); } }
  @keyframes chest-light { 0%, 42% { opacity: 0; transform: scale(.15); } 62% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
  @keyframes chest-line { 0%, 45% { opacity: 0; transform: translateY(6px); } 70%, 100% { opacity: 1; transform: none; } }
  @keyframes chest-reward { 0%, 66% { opacity: 0; transform: translateY(12px) scale(.92); } 100% { opacity: 1; transform: none; } }

  /* 3. level up, rank up, skill level up: the numbers */
  .sys-window .moment .from { animation: lv-from var(--t-levelup) var(--ease) both; }
  .sys-window .moment .moment-arrow { transform-origin: 0 50%; animation: lv-arrow var(--t-levelup) var(--ease) both; }
  .sys-window .moment .n { animation: lv-to var(--t-levelup) var(--ease-out-back) both; }
  .sys-window .moment .r { animation: lv-rank var(--t-levelup) var(--ease-out-back) both; }
  .sys-window .moment .sk-letter { animation: lv-letter var(--t-levelup) var(--ease-out-back) both; }
  .rankup .moment::before { content: ""; position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; z-index: -1; pointer-events: none; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold) 70%, transparent) 0%, color-mix(in srgb, var(--gold) 25%, transparent) 35%, transparent 70%);
    animation: lv-bloom var(--t-levelup) var(--ease) both; }
  .levelup .sys-lines, .rankup .sys-lines { animation: lv-lines var(--t-levelup) var(--ease) both; }
  @keyframes lv-from { 0% { opacity: 0; transform: translateX(14px); } 22%, 100% { opacity: 1; transform: none; } }
  @keyframes lv-arrow { 0%, 18% { opacity: 0; transform: scaleX(0); } 38%, 100% { opacity: 1; transform: none; } }
  @keyframes lv-to { 0%, 34% { opacity: 0; transform: translateY(.22em) scale(.55); } 72%, 100% { opacity: 1; transform: none; } }
  @keyframes lv-rank { 0%, 8% { opacity: 0; transform: scale(1.7) rotate(-6deg); } 52%, 100% { opacity: 1; transform: none; } }
  @keyframes lv-letter { 0%, 60% { opacity: 0; transform: scale(1.6); } 100% { opacity: 1; transform: none; } }
  @keyframes lv-bloom { 0%, 10% { opacity: 0; transform: scale(.3); } 45% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
  @keyframes lv-lines { 0%, 64% { opacity: 0; transform: translateY(8px); } 86%, 100% { opacity: 1; transform: none; } }
}
/* the Titles unlock window is a grid whose children span every column; the bar is out of flow and takes the whole window */
.sys-window.tp-unlock > .win-sweep { grid-column: auto; }
/* ---------- end of Task 12m ---------- */