/* ============================================================ Sticai coaching app — app-specific components layer (loaded after the synced stica.css copy, which now carries the shared tokens — data-theme attribute support, --hl-mix, --shadow — folded in from this file on 2026-07-20. Only app-only rules and the deliberate --amber override remain here.) ============================================================ */ :root{ /* deliberate app override: the coaching app's amber reads lighter than the main site's --amber (#9A6207); kept distinct pending a design decision on reconciling the two, not an accidental fork. */ --amber:#8F5A06; /* pointer-spotlight coordinates: app-only, not a shared design token. initSpotlight() in ui.js lerps these on at runtime; this is just the static default so body.spotlight-on has something to read before the first pointer move. */ --sx:50%; --sy:16%; } /* ============================================================ Base ============================================================ */ html,body{margin:0;} /* Let native controls (date/time pickers, their calendar/clock icons, scrollbars) render for the active theme, so the picker indicator is not dark-on-dark in dark mode. Follows prefers-color-scheme by default and the forced data-theme when the user toggles. */ :root{color-scheme:light dark;} :root[data-theme="light"]{color-scheme:light;} :root[data-theme="dark"]{color-scheme:dark;} body{ background:var(--bg);color:var(--ink); font-family:var(--sans);line-height:1.6;font-size:16px; -webkit-font-smoothing:antialiased; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:48px 48px;background-position:-1px -1px; } .wrap{max-width:1120px;margin:0 auto;padding:0 20px 90px;} p{margin:0 0 12px;} button{font-family:var(--sans);} :where(button,a,textarea,input):focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px;} /* page masthead */ .mast{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px; padding:14px 24px;border-bottom:1px solid var(--line);background:var(--bg);} .brand{font-weight:700;font-size:24px;letter-spacing:-1px;display:inline-block;width:max-content;white-space:nowrap; --logo-hl:color-mix(in srgb, var(--acc) var(--hl-mix), transparent); background-image:linear-gradient(var(--logo-hl),var(--logo-hl)); background-repeat:no-repeat;background-position:left 78%;background-size:100% 52%; border-radius:2px;padding:0 4px 1px;} .brand .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acc); margin-left:2px;vertical-align:baseline;overflow:hidden;font-size:0;} .brand-link{text-decoration:none;color:inherit;flex:none;} .mast .tag{font-family:var(--mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut);text-align:right;} .mast-right{display:flex;align-items:center;gap:12px;} /* mobile mast: keep the brand a fixed-size, non-wrapping unit (so its highlight band always hugs the text line rather than a stretched flex box), tighten spacing so brand + icon cluster hold one row down to ~390px, and give the right-hand cluster breathing room off the screen edge. .mast-right's own children shrink first; if a