/* shell.css — the design's <helmet>, ported from `Ascendant Prime V42.dc.html`.
 *
 * The prototype runs on a bare document: its only global CSS is the helmet below, and every other
 * style is inline on the element. The app carries fourteen legacy stylesheets from the surfaces
 * being replaced, and they were inflating the ported rail (105px wide against the design's 84,
 * and 1125px tall in a 900px viewport). This restores the document the design was drawn on.
 *
 * Loaded LAST in index.html so it wins. Legacy sheets are removed as their pages are replaced.
 */

/* Fonts: Chakra Petch (display/body), JetBrains Mono (labels, meta, all-caps micro type). */
@import url('../fonts/fonts.css');   /* self-hosted (no request to Google: owner 2026-09-30 later 11) */

/* The old desktop build shipped `body { zoom: 1.25 }` (system.css) because those surfaces were
 * drawn at 125% browser zoom. The design package is drawn at 1:1 — its rail is 84 CSS pixels, its
 * body text 15px, its phone tap targets 44px — so the port renders unzoomed or every measurement
 * in the spec is off by a quarter. Same selector as system.css, loaded after it. */
body:not(.m-body):not(.login-body) { zoom: 1; }

*, *::before, *::after { box-sizing: border-box; }

html[data-resizing] *, html[data-resizing] *::before, html[data-resizing] *::after { transition: none !important; }
[data-rail]::-webkit-scrollbar { display: none; width: 0; }   /* the rail scrolls without a bar: a bar inside its 84px shifted every item and the page */   /* a resize in flight: nothing eases behind the reflow */
html, body {
  margin: 0;
  padding: 0;
  background: #04070e;
  color: #e7f3ff;
  color-scheme: dark;
  font-family: 'Chakra Petch', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* The legacy sheets style bare buttons and inputs; the design styles every one inline. */
[data-screen-label="App"] button,
[data-screen-label="App"] input,
[data-screen-label="App"] textarea,
[data-screen-label="App"] select {
  font: inherit;
  /* `font: inherit` also inherits the page's 1.5 line height, which no design input has — every
     field measured 2.5px taller than the design's (Workshop's composer, 2026-09-11). Fields keep
     the browser's own line height, as the design's do. */
  line-height: normal;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
/* The design leaves button line-height at the browser default and sizes every control from
 * padding + font-size. Forcing 1.2 here shrank every button by ~2px against the prototype. */
[data-screen-label="App"] button { line-height: normal; }

a { color: #7fd4ff; text-decoration: none; }
a:hover { color: #e7f3ff; }

/* Scrollbars: 9px, thumb with a 45deg cut end. */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-corner { background: transparent; }
/* EVERY PHONE OVERLAY ENDS ABOVE THE TAB BAR (ruled 2026-09-11: "B" — one rule everywhere). The design's
   own phone overlays run under its bar and block controls; here each overlay root carries data-overlay and
   stops 48px short, the bar's height (D235). Inline `inset:0` is the design's string, hence !important. */
[data-shell="mobile"] [data-overlay]:not([data-overlay] [data-overlay]) { bottom: var(--mob-bar-h, 48px) !important; }   /* the bar's real height (shell.jsx measures it): 61 since the 44 dp taps, and a fixed 48 ran every overlay 13 px under it (52: the Inbox's lower edge on the nav) */   /* the outermost only: an overlay inside an overlay (the Extra flow's pick) is already lifted */
/* …while the tab bar is away for the keyboard, the overlay reaches the bottom: its 48 px were an undimmed strip of page (52, the quick log typing) */
html[data-typing] [data-shell="mobile"] [data-overlay]:not([data-overlay] [data-overlay]) { bottom: 0 !important; }

/* the design files' [data-nobar] scroller (every .dc.html helmet): no bar, no gutter */
[data-nobar] { scrollbar-width: none; -ms-overflow-style: none; }
[data-nobar]::-webkit-scrollbar { width: 0; height: 0; display: none; }
html *::-webkit-scrollbar-thumb { background: linear-gradient(45deg, #26374f 0 calc(100% - 7px), transparent calc(100% - 7px)); min-height: 34px; }
html *::-webkit-scrollbar-thumb:hover { background: linear-gradient(45deg, #33486a 0 calc(100% - 7px), transparent calc(100% - 7px)); }
html *::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(45deg, #26374f 0 calc(100% - 7px), transparent calc(100% - 7px)); min-width: 34px; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: #26374f transparent; } }

/* Motion — the Motion System's three curves live in feel.css (--e-arrive, --e-leave, --e-move). */

@keyframes ap-fade { from { opacity: 0; } to { opacity: 1; } }
/* Guidance Kit 2 · New here and 3's ignite (Design FINAL): the mark in 200 Arrive, out 200 Leave (scale .6); the title bracket locks on from 8 px (240), holds to 3.4 s, fades 600; the icon's glow .7 → 1 at 40%, settles .45 */
@keyframes nh-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes nh-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.6); } }
@keyframes nh-bracket { 0% { opacity: 0; transform: translate(-8px,-8px); } 6% { opacity: 1; transform: none; } 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes mv-card-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes mv-card-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ghost-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ghost-wait { 0% { opacity: 1; } 50% { opacity: .4; } 100% { opacity: 1; } }
/* Guidance Kit 4 · Quest: the tracker's counter, fill, EXP and swap */
@keyframes qt-old { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }
@keyframes qt-new { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes qt-fill { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: .35; } }
@keyframes qt-exp { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-14px); } }
@keyframes qt-swap { from { opacity: 0; } to { opacity: 1; } }
@keyframes nav-ignite { 0% { opacity: 0; transform: scale(.7); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: .45; transform: scale(1); } }
@keyframes ap-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* The mandala's own two, ported from `Workshop Prime v11` 56 and 65. st-spin keeps the goal's
   translate while it turns, because the element it rides is centred by transform. */
@keyframes st-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* Workshop's own set (`Workshop Prime v11` 31-56), prefixed ws- so another file's keyframes of the same name never win. */

@keyframes ws-swapout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes ws-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dv-secin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }   /* Day Views v1: a Scheduling editor section arriving (D469) */

@keyframes ws-dockout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px); } }

/* Day (Extra Session v51 31-57): the blocks wipe in on the first paint, a mark's ring on a tick, Next breathes */
@keyframes xs-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* the Extra-session picker (Extra Session v44e 45-47): the preview card and the expanded row fade in, the note rises */
@keyframes xs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes xs-rise { 0% { opacity: 0; transform: scaleY(.82) translateY(5px); } 38% { opacity: 1; } 52% { opacity: .7; } 60% { opacity: 1; transform: scaleY(1.02); } 100% { opacity: 1; transform: none; } }
/* its hover states, as the design's style-hover attributes draw them */
[data-xp="close"]:hover, [data-xp="back"]:hover { color: var(--text); border-color: var(--line); }
[data-xp="clear"]:hover { color: var(--accent); border-color: var(--accent); }
[data-xp="row"]:hover { border-color: var(--line); }
[data-xp="search"]:focus { border-color: var(--accent); }
/* Workshop tab 04: today's column head brightens under the pointer (Workshop Prime v11 36-37) */
[data-today="1"] { transition: none; }
[data-today="1"]:hover { filter: brightness(1.22); }

/* Records' mark for a moment just made a routine or protected (`Records Prime v9` 1235-1244):
   the shield lands, then a light runs across it once. */
@keyframes rc-shield-in { 0% { transform: scale(.15) rotate(-24deg); opacity: 0; } 55% { transform: scale(1.22) rotate(5deg); opacity: 1; } 78% { transform: scale(.94) rotate(-1deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes rc-shield-glint { 0% { opacity: 0; transform: translateX(-120%) skewX(-16deg); } 35% { opacity: .95; } 100% { opacity: 0; transform: translateX(120%) skewX(-16deg); } }

/* The composer's reset confirmations (`Workshop Prime v11` 4754-4768): the control spins once,
   and what it cleared flashes green before settling — a reset that changes nothing you were
   looking at is a reset you cannot tell happened. */
@keyframes cmSpin { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@keyframes cmFlashGood { 0%, 70% { color: var(--good); border-color: color-mix(in srgb, var(--good) 60%, transparent); background: color-mix(in srgb, var(--good) 14%, transparent); } 100% { color: var(--dim); border-color: var(--line-soft); background: transparent; } }
@keyframes cmFlashCell { 0%, 70% { color: var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); } 100% { color: var(--dim); background: transparent; } }
/* Records' Current number breathes, so the live figure is distinguishable at a glance from the
   frozen Peak beside it (`Records Prime v9` 158). */
/* and the button that set it lands with the mark (`Records Prime v9` 1238) */
@keyframes rc-mark-in { 0% { opacity: 0; transform: translateX(10px) scale(.88); } 58% { opacity: 1; transform: translateX(0) scale(1.05); } 100% { opacity: 1; transform: none; } }
/* Goals' own ambient floor — a perspective grid receding under the mandala, distinct from the
   shell's flat 44px one (`Shared Goals v68` 88). Only this page has it in the design. */

@keyframes rc-fade { from { opacity: 0; } to { opacity: 1; } }

/* the live session (Train v18 Session 20-33). tr-fade is the tour's same body; the design's tr-rise
   (10px) differs from the tour's (7px) and is tn-rise here; sn-line is the head's and rows' entrance. */
@keyframes tn-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@keyframes tr-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes tr-lead { 0% { opacity: 0; transform: scale(1.5); } 22% { opacity: 1; transform: scale(1); } 100% { opacity: 1; } }
@keyframes sn-line { 0% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-4px); } 62% { opacity: 1; } 100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
/* the header trio's hovers (Shared Goals v68 141-142 style-hover) */
[data-xh="extra"]:hover { border-color: var(--accent); color: var(--accent); }
[data-xh="log"]:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
/* the far sky (Ascendant Whole C1 29-32) */
@keyframes wa-spin { to { transform: rotate(360deg); } }
@keyframes wa-twinkle { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes wa-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-8px, 4px); } }
@keyframes wa-pulse { 0%, 100% { transform: scale(.9); opacity: .75; } 50% { transform: scale(1.12); opacity: 1; } }
@media (prefers-reduced-motion: reduce) and (scripting: none) { [data-sky] * { animation: none !important; } }
/* Workshop's field (Workshop Constellation v1 22-36) */
@keyframes bh-spin { to { transform: rotate(360deg); } }
@keyframes dr-breathe { 0%, 100% { transform: scale(.96); } 50% { transform: scale(1.04); } }
@keyframes dr-drift { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes bh-breathe { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes dl-flow { to { background-position: 22px 0; } }
@keyframes dl-scan { to { background-position: 0 6px; } }
@keyframes dl-driftA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6px, 3px); } }
@keyframes dl-driftB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, -2px); } }
@keyframes dl-bloom { 0%, 100% { transform: scale(.93); } 50% { transform: scale(1.07); } }
@keyframes dl-suck { to { stroke-dashoffset: 64; } }
@keyframes dl-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes dl-spinr { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) and (scripting: none) { [data-ws-field] * { animation: none !important; } }
@media (prefers-reduced-motion: reduce) and (scripting: none) { [data-sv-editor], [data-sv-editor] * { animation: none !important; transition: none !important; } }

/* THE GLOW LAYERS (Band-Aids 2b, Design FINAL 2026-10-09: "Keep Fade only … Reduced motion is opacity only"). Each glow is drawn once,
   at full strength, on a layer of its own inside the control (::before; position absolute, pointer-events none, under the label); the
   control never changes its own box-shadow or filter: only the layer's opacity moves. Press is a second layer (::after): black at .18
   over the face, the label scaled .98. A control takes data-glow="1|2|3|4"; a selected / held / lit one adds data-glow-on.
   L1 button hover · L2 chip or tab selected · L3 card or row selected (the strip's 9b plate + TL/BR brackets; --glow-c = the item's
   colour) · L4 glowing mark (a halo 3× the mark behind it). */
[data-glow] { position: relative; isolation: isolate; }
/* K2 · a new tab's diamond (Guidance Kit 2, D658): the nav's mark, drawn inside the tab's corner */
[data-new-tab]::after { content: ''; position: absolute; right: -3px; top: -3px; z-index: 2; width: 7px; height: 7px; background: var(--accent); box-shadow: 0 0 8px var(--glow); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); pointer-events: none; animation: nh-in 200ms cubic-bezier(.16,.84,.3,1) both; }
[data-ws-strip] [data-new-tab]::after, [data-tour="ws-global"][data-new-tab]::after, [data-tour="ws-global-drains"][data-new-tab]::after { right: 6px; top: 6px; }   /* Workshop's tabs and its two lenses (Routines & protected, Drains) clip their overflow: the mark sits inside (52 on f830158: a quarter showed) */
[data-glow]::before, [data-glow="1"]::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: 0; }
[data-glow="1"]::before { transition: opacity 120ms var(--e-move); }   /* round two J (D653): glow layers fade, 120 Move */
[data-glow="1"]::before { background: radial-gradient(80% 120% at 50% 100%, color-mix(in srgb, var(--glow-c, var(--accent)) 34%, transparent), transparent 70%); box-shadow: inset 0 0 0 1px var(--glow-c, var(--accent)); transition: opacity 120ms var(--e-move); }
@media (hover: hover) { [data-glow="1"]:hover:not(:disabled)::before { opacity: 1; } }
[data-glow="1"]::after { background: #000; transition: opacity 120ms var(--e-arrive); }
[data-glow="1"]:active:not(:disabled)::after { opacity: .18; transition: opacity 60ms linear; }
[data-glow="1"] > * { transition: transform 120ms var(--e-arrive); }
[data-glow="1"]:active:not(:disabled) > * { transform: scale(.98); transition: transform 60ms linear; }
[data-glow="2"]::before { background: linear-gradient(0deg, color-mix(in srgb, var(--glow-c, var(--accent)) 22%, transparent), color-mix(in srgb, var(--glow-c, var(--accent)) 6%, transparent) 70%); box-shadow: inset 0 -2px 0 var(--glow-c, var(--accent)); transition: opacity 160ms var(--e-move); }
@media (hover: hover) { [data-glow="2"]:hover::before { opacity: .35; } }
[data-glow="2"][data-glow-on]::before, [data-glow="2"]:active::before { opacity: 1; transition: opacity 90ms var(--e-arrive); }
[data-glow="3"]::before { inset: 5px 3px; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); background: color-mix(in srgb, var(--glow-c, var(--accent)) 7%, var(--panel-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glow-c, var(--accent)) 40%, transparent), inset 0 -9px 14px -10px color-mix(in srgb, var(--glow-c, var(--accent)) 65%, transparent); transition: opacity 140ms var(--e-leave); }
[data-glow="3"]::after { content: ''; position: absolute; inset: 4px 2px; pointer-events: none; z-index: 1; opacity: 0; transform: scale(1.06);
  background: linear-gradient(var(--glow-c, var(--accent)), var(--glow-c, var(--accent))) 0 0 / 8px 2px no-repeat, linear-gradient(var(--glow-c, var(--accent)), var(--glow-c, var(--accent))) 0 0 / 2px 8px no-repeat,
    linear-gradient(var(--glow-c, var(--accent)), var(--glow-c, var(--accent))) 100% 100% / 8px 2px no-repeat, linear-gradient(var(--glow-c, var(--accent)), var(--glow-c, var(--accent))) 100% 100% / 2px 8px no-repeat;
  transition: opacity 130ms cubic-bezier(.2, 0, 0, 1), transform 0ms linear 140ms; }
[data-glow="3"][data-glow-on]::before { opacity: 1; transition: opacity 200ms var(--e-arrive); }
[data-glow="3"][data-glow-on]::after { opacity: .9; transform: none; transition: opacity 90ms linear 40ms, transform 240ms var(--e-arrive) 40ms; }
[data-glow="4"]::before { inset: auto; left: 50%; top: 50%; width: 300%; height: 300%; transform: translate(-50%, -50%) scale(.6); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow-c, var(--accent)) 55%, transparent), transparent 65%); transition: opacity 120ms var(--e-leave), transform 120ms var(--e-leave); }
[data-glow="4"][data-glow-on]::before { opacity: 1; transform: translate(-50%, -50%); transition: opacity 110ms var(--e-arrive), transform 220ms var(--e-arrive); }
[data-glow="4"][data-glow-live]::before { animation: glow-breathe 3200ms var(--e-move) infinite alternate; }
@keyframes glow-breathe { from { opacity: 1; } to { opacity: .6; } }
@media (prefers-reduced-motion: reduce) and (scripting: none) {
  [data-glow]::before, [data-glow]::after, [data-glow="1"] > * { transform: none !important; }
  [data-glow="4"]::before { transform: translate(-50%, -50%) !important; }
  [data-glow="4"][data-glow-live]::before { animation: none; } }