/* PoseMates (v2 identity), "Kolam by lamplight" (docs/v2/identity-spec.md). Weights 400/500/700 only. Marigold FILLS = --accent + --accent-ink,
   marigold TEXT = --accent-text. Animate only opacity, transform and stroke-dashoffset. */

/* == tokens (identity §3.2; classes §13.1; bodymap §13.2) */
:root {
  color-scheme:dark;
  --bg:#12100E;--surface:#1B1815;--surface-2:#24201C;--surface-3:#2E2924;
  --line:#332D27;--line-2:#4A4239;--line-ctl:#80766A;
  --ink:#F3EDE3;--ink-2:#B5AB9D;--ink-3:#968C7E;
  --accent:#F4A72C;--accent-hi:#FFC35C;--accent-ink:#1A1206;--accent-text:#F4A72C;--accent-soft:#33250F;
  --ok:#6FD8A2;--ok-ink:#06150D;--ok-soft:#12291E;
  --danger:#FF6B81;--danger-soft:#3A151B;--danger-fill:#C42F49;--on-danger:#FFFFFF;
  --warn:#EC8A5E;--warn-soft:#3A1E12;
  --viz-1:var(--ink);--viz-2:#93A5F5;--viz-2-soft:#1C2340;--viz-band:rgba(243,237,227,.12);
  --scrim:rgba(8,7,6,.62);
  --shadow-2:inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-3:0 -8px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  --card:var(--surface);--muted:var(--ink-2);--radius:var(--r-card);--shadow:var(--shadow-2); /* permanent aliases */
  --font-ui:system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-dev:"Noto Sans Devanagari", "Kohinoor Devanagari", "Devanagari Sangam MN", "Nirmala UI", sans-serif;
  --font-mono:ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-14:56px;
  --r-xs:8px;--r-ctl:14px;--r-card:20px;--r-sheet:28px;--r-pill:999px;
  --tap:48px;--nav-h:64px;--top-h:56px;--page-max:720px;--gutter:20px;
  --z-top:5;--z-nav:6;--z-player:20;--z-modal:40;--z-toast:50;
  --d-1:120ms;--d-2:200ms;--d-3:360ms;--d-draw:900ms;--d-state:450ms;
  --e-out:cubic-bezier(.2,.8,.2,1);--e-inout:cubic-bezier(.6,0,.2,1);--e-in:cubic-bezier(.5,0,1,1);
  --join-h:56px;
  --stage:#12100E;--stage-ink:#F3EDE3; /* the body map is dark in both themes */
  --map-even:#6FD8A2;--map-slight:#D9BC7A;--map-off:#F4A72C;--map-open:#9BEBC2;
  --map-measured:rgba(243,237,227,.45);--map-none:rgba(243,237,227,.28);
  --map-guide:rgba(243,237,227,.55);--map-band:rgba(243,237,227,.12);
  --map-figure:#F3EDE3;--map-figure-far:#CBC2B3;--map-floor:rgba(243,237,227,.10);
  --assess-word:clamp(44px,11vw,84px);--assess-count:clamp(96px,28vw,180px);--assess-bar:14px;
  --ease-calm:cubic-bezier(.4,0,.2,1);--t-calm:450ms;
}
@media (max-width:359px) { :root { --gutter:16px; } }
/* LIGHT twice (CSS has no mixins): keep the two blocks identical */
:root[data-theme="light"] {
  color-scheme:light;
  --bg:#F6F1E8;--surface:#FFFDF8;--surface-2:#EEE7DA;--surface-3:#E6DDCD;
  --line:#E0D6C5;--line-2:#C4B9A5;--line-ctl:#7F7565;
  --ink:#1D1915;--ink-2:#5C5347;--ink-3:#6C6355;
  --accent:#F4A72C;--accent-hi:#E29515;--accent-ink:#1A1206;--accent-text:#8A5200;--accent-soft:#FBE9C8;
  --ok:#1A7050;--ok-ink:#FFFFFF;--ok-soft:#DDF0E6;
  --danger:#B4233C;--danger-soft:#FADDE1;--danger-fill:#B4233C;--on-danger:#FFFFFF;
  --warn:#A8491E;--warn-soft:#FBE3D6;
  --viz-2:#3F51B5;--viz-2-soft:#E3E7FA;--viz-band:rgba(29,25,21,.10);
  --scrim:rgba(29,25,21,.45);
  --shadow-2:0 1px 2px rgba(60,40,10,.06), 0 4px 14px rgba(60,40,10,.05);
  --shadow-3:0 -6px 30px rgba(60,40,10,.18);
}
@media (prefers-color-scheme: light) { :root[data-theme="auto"] {
  color-scheme:light;
  --bg:#F6F1E8;--surface:#FFFDF8;--surface-2:#EEE7DA;--surface-3:#E6DDCD;
  --line:#E0D6C5;--line-2:#C4B9A5;--line-ctl:#7F7565;
  --ink:#1D1915;--ink-2:#5C5347;--ink-3:#6C6355;
  --accent:#F4A72C;--accent-hi:#E29515;--accent-ink:#1A1206;--accent-text:#8A5200;--accent-soft:#FBE9C8;
  --ok:#1A7050;--ok-ink:#FFFFFF;--ok-soft:#DDF0E6;
  --danger:#B4233C;--danger-soft:#FADDE1;--danger-fill:#B4233C;--on-danger:#FFFFFF;
  --warn:#A8491E;--warn-soft:#FBE3D6;
  --viz-2:#3F51B5;--viz-2-soft:#E3E7FA;--viz-band:rgba(29,25,21,.10);
  --scrim:rgba(29,25,21,.45);
  --shadow-2:0 1px 2px rgba(60,40,10,.06), 0 4px 14px rgba(60,40,10,.05);
  --shadow-3:0 -6px 30px rgba(60,40,10,.18);
} }

/* == type (§5.2) */
html{font-size:16px;-webkit-text-size-adjust:100%;background:var(--bg)}
body{font:400 1rem/1.5 var(--font-ui);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p{margin:0}
h1{font-size:1.75rem;line-height:1.15;font-weight:700;letter-spacing:-.02em}
h2{font-size:1.25rem;line-height:1.25;font-weight:700;letter-spacing:-.015em}
h3{font-size:1.0625rem;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.display{font-size:2.5rem;line-height:1.1;font-weight:700;letter-spacing:-.025em}
.caps,.card h3,th,.stat span,.tile span,.agenda-day,.classcard .eyebrow,.player .step{font:700 .6875rem/1.3 var(--font-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.card h3{margin:var(--s-4) 0 var(--s-2)}
.caps .ico{vertical-align:-3px;margin-right:6px}
.caps.warn{color:var(--warn)}
.num,.num-xl{font-variant-numeric:tabular-nums lining-nums;font-weight:700;letter-spacing:-.03em}
.num-xl{font-size:4rem;line-height:1}
.dev{font-family:var(--font-dev);font-weight:500;font-size:1.25rem;line-height:1.4;color:var(--ink-2)}
.dev.lg{font-size:2.125rem;line-height:1.3;color:var(--ink)}
.iast{font-size:.8125rem;line-height:1.4;font-style:italic;color:var(--ink-3);overflow-wrap:anywhere}
.muted{color:var(--ink-2);font-size:.9375rem;line-height:1.45}
.small{font-size:.8125rem;line-height:1.4}
.faint{color:var(--ink-3)}

/* == motion (§7) */
@keyframes rise { from { opacity:0; transform:translateY(8px); } }
@keyframes fade { from { opacity:.6; } }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes skel { to { opacity:.55; } }
@keyframes live { 50% { opacity:.35; } }
@keyframes dot { from { opacity:0; transform:scale(.4); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fadein { to { opacity:1; } }

/* == base and layout (§9.1, §6, §8) */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important} /* buttons are inline-flex: without this `hidden` does nothing */
html{height:100%}
body{margin:0;min-height:100%} /* not height: it would hide a long page's end under the nav */
body{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));overscroll-behavior-y:none}
body.no-nav{padding-bottom:env(safe-area-inset-bottom)}
/* focus and scrollIntoView stop clear of the sticky bars (--cta-h: a big-button .cta-bar, --pick-h: the tallest .page .pickbar) */
html{--cta-h:84px;--pick-h:120px;scroll-padding-top:calc(var(--top-h) + env(safe-area-inset-top) + 8px);scroll-padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px)}
html:has(body.no-nav){scroll-padding-bottom:calc(env(safe-area-inset-bottom) + 8px)}
html:has(.cta-bar){scroll-padding-bottom:calc(var(--nav-h) + var(--cta-h) + env(safe-area-inset-bottom) + 8px)}
html:has(body.no-nav .cta-bar){scroll-padding-bottom:calc(var(--cta-h) + env(safe-area-inset-bottom) + 8px)}
html:has(.page .pickbar){scroll-padding-top:calc(var(--top-h) + env(safe-area-inset-top) + var(--pick-h) + 8px)}
#app{max-width:var(--page-max);margin:0 auto;min-height:100%}
a{color:var(--accent-text);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:inherit}
:is(h1,h2,h3)[tabindex="-1"]:focus,.modal[tabindex="-1"]:focus{outline:0} /* focus the app moved, not a control */
.page{padding:var(--s-2) var(--gutter) var(--s-8);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)} /* minmax: one wide child never widens every card */
.page.enter{animation:rise var(--d-2) var(--e-out) both}
.page.enter>*{animation:rise var(--d-2) var(--e-out) both;animation-delay:calc(min(var(--i,0),6)*30ms)}
.page.enter>.skelwrap{animation:none}
.page.swap{animation:fade var(--d-1) linear both}
.row{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.between{justify-content:space-between}
.stack{display:grid;gap:var(--s-2)}
.greet{display:grid;gap:var(--s-1);padding:var(--s-2) 0 var(--s-1)}
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);margin:var(--s-2) 0 calc(-1*var(--s-2))}
.rule-dots{height:4px;border:0;margin:var(--s-2) 0;background:radial-gradient(circle, var(--line-2) 1.5px, transparent 1.6px) 0 50%/12px 4px repeat-x}
.ico{flex:none;vertical-align:-0.2em}
.ico.rot{transform:rotate(90deg)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.calm{display:flex;align-items:center;gap:var(--s-2)}
.withicon{display:flex;align-items:center;gap:var(--s-2)}

/* == buttons (§9.4): before every component that restyles a <button> */
button,.btn{font:700 1rem/1.2 var(--font-ui);letter-spacing:-.005em;border:0;border-radius:var(--r-ctl);min-height:var(--tap);padding:0 var(--s-5);background:var(--accent);color:var(--accent-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);text-decoration:none;transition:transform var(--d-1) var(--e-out), opacity var(--d-1);touch-action:manipulation;user-select:none}
button:active,.btn:active{transform:scale(.97);background:var(--accent-hi)}
button.secondary{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-ctl)}
button.secondary:active{background:var(--surface-3)}
button.tonal{background:var(--surface-3);color:var(--ink)}
button.tonal:active{background:var(--line-2)}
button.ghost{background:transparent;color:var(--accent-text);padding:0 var(--s-3)}
button.ghost:active{background:var(--accent-soft)}
button.danger{background:var(--danger-fill);color:var(--on-danger)}
button.danger:active{background:var(--danger-fill);opacity:.85}
button.danger-text{background:transparent;color:var(--danger);padding:0 var(--s-3)}
button.danger-text:active{background:var(--danger-soft)}
button.big,.btn.big{width:100%;min-height:56px;font-size:1.0625rem;border-radius:18px}
button.sm{min-height:36px;padding:0 var(--s-3);font-size:.875rem;border-radius:10px}
button:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:default;transform:none;pointer-events:none}
.spinner{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.cta-bar{position:sticky;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));z-index:4;margin:0 calc(-1*var(--gutter));padding:var(--s-3) var(--gutter);background:var(--bg);border-top:1px solid var(--line);display:flex;align-items:center;gap:var(--s-3)}
body.no-nav .cta-bar{bottom:0;padding-bottom:calc(var(--s-3) + env(safe-area-inset-bottom))}
.cta-bar .sum{flex:1;min-width:0;font-size:.875rem;color:var(--ink-2)}
.cta-bar button{flex:none}
.cta-bar button.big{flex:1}
.cta-bar>button.secondary{min-height:56px;border-radius:18px}
.btnrow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s-2)}
.btnrow.wrap{grid-auto-flow:row;grid-template-columns:repeat(auto-fit, minmax(140px, 1fr))}
.btnrow>button{padding:0 var(--s-3)}
button.sum{flex:1;min-width:0;justify-content:flex-start;padding:0;background:transparent;color:var(--ink-2);font:500 .875rem/1.3 var(--font-ui);text-align:left}
button.sum:active{transform:none;background:transparent}
button.sum:disabled{opacity:1}
.top .icon-btn,.classcard .icon-btn,.icon-btn.mv,.rowx .icon-btn{width:var(--tap);height:var(--tap);min-height:0;padding:0;background:transparent;border-radius:50%}

/* == top bar and avatar (§9.2) */
.top{position:sticky;top:0;z-index:var(--z-top);height:calc(var(--top-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--gutter) 0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);background:var(--bg);color:var(--ink);border-bottom:1px solid transparent}
.top.scrolled{border-bottom-color:var(--line)}
.top .brand{display:flex;align-items:center;gap:10px;min-width:0}
.top h1,.top .bar-t{font-size:1.0625rem;line-height:1.3;letter-spacing:-.01em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* .bar-t: the title when the page has its own h1 */
.top .brand h1,.top .brand .bar-t{min-width:0}
.top .icon-btn{margin:0 -12px;color:var(--ink)}
.top .top-act{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.top .top-act .icon-btn{margin:0}
.avatar{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--ink);border:1px solid var(--line-2);font:700 .8125rem/1 var(--font-ui);letter-spacing:.02em}
.avatar.lg{width:56px;height:56px;font-size:1.125rem}
.avatar.sm{width:24px;height:24px;font-size:.625rem}
.avatars{display:inline-flex}
.avatars .avatar+.avatar{margin-left:-8px}
button.avatar{min-height:0;padding:0;position:relative}
button.avatar:active{background:var(--line-2)}
button.avatar::after{content:"";position:absolute;inset:-6px;border-radius:50%}
.wordmark{display:flex;align-items:center;gap:10px;font:700 1.0625rem/1 var(--font-ui);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.wordmark svg{width:28px;height:28px;flex:none}
.wordmark span{color:var(--ink-2);font-weight:500}
.wordmark>span{margin-left:-10px} /* one word (PoseMates): cancels the gap, the tone change does the separating */

/* == bottom nav (§9.3) */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--line);display:flex}
.nav button{position:relative;flex:1;min-width:0;min-height:0;background:transparent;color:var(--ink-3);border-radius:0;padding:12px 2px 8px;display:grid;justify-items:center;align-content:start;gap:3px;font:500 .6875rem/1.2 var(--font-ui);letter-spacing:.01em}
.nav button:active{transform:none}
.nav button.active{color:var(--ink);font-weight:700}
.nav button.active::before{content:"";position:absolute;top:4px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--accent);animation:dot var(--d-2) var(--e-out)}
.nav .badge{position:absolute;top:6px;left:calc(50% + 8px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--accent);color:var(--accent-ink);font:700 .625rem/16px var(--font-ui)}
@media (min-width:720px) { .nav{max-width:var(--page-max);margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)} }

/* == cards, hero, list rows (§9.5) */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-5)}
.card>h2{margin-bottom:var(--s-3)}
.card>.caps:first-child{display:block;margin-bottom:var(--s-2)}
.card.flush{padding:0;overflow:hidden}
.card.hero,.hero{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2);box-shadow:var(--shadow-2)}
.hero h2,.hero p{color:inherit}
.hero .muted{color:var(--ink-2)}
.card.clickable:active{background:var(--surface-2)}
.list{display:grid;gap:0;grid-template-columns:minmax(0,1fr)} /* a nowrap title ellipsises, never widens the card */
.list>.item+.item,.list>.rowx+.rowx{border-top:1px solid var(--line)}
.item,.rowx{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:64px;padding:var(--s-3) 0;background:transparent;border:0;border-radius:0;color:inherit;text-decoration:none}
.card:not(.flush)>.list>.rowx[data-go]{margin:0 calc(-1*var(--s-5));padding-left:var(--s-5);padding-right:var(--s-5)}
.card.flush .item,.card.flush .rowx{padding:var(--s-3) var(--s-5)}
.card.flush :is(.rowx,.item):focus-visible{outline-offset:-3px}
.rowx[data-go]{cursor:pointer;transition:background var(--d-1)}
.rowx[data-go]:active{background:var(--surface-2)}
.item.stacked{align-items:flex-start}
.rowx{justify-content:flex-start}
.rowx .lead{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--surface-3);color:var(--ink-2);font:700 .8125rem/1 var(--font-ui);overflow:hidden}
.rowx .lead img{width:100%;height:100%;object-fit:cover}
.rowx .lead.time{width:auto;min-width:64px;height:auto;background:none;border-radius:0;justify-items:start;gap:2px;color:var(--ink)}
.rowx .lead.time b{font:700 1.375rem/1 var(--font-ui);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rowx .lead.time b small{font-size:.75rem;letter-spacing:0;margin-left:2px;color:var(--ink-2)}
.rowx .main{flex:1;min-width:0}
.rowx .main strong{display:block;font:700 1rem/1.3 var(--font-ui);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowx .main .meta{font-size:.8125rem;line-height:1.4;color:var(--ink-2);margin-top:2px}
.rowx .meta{display:block}
.rowx .meta>.pill:first-child{height:22px;margin:2px 6px 2px 0;vertical-align:middle}
.rowx .trail{flex:none;display:flex;align-items:center;gap:var(--s-2);color:var(--ink-3)}
.rowx .trail .num{color:var(--ink-2)}
.classcard .icon-btn{margin:-12px -12px -12px 0;color:var(--ink-2)}
.classcard .icon-btn:active{background:var(--surface-3);transform:none}
.icon-btn.mv{color:var(--ink)}
.icon-btn.mv:active{background:var(--surface-3);transform:none}
.rowx .icon-btn{color:var(--ink-2)}
button.rowx,label.rowx{width:100%;background:transparent;color:var(--ink);font:400 1rem/1.5 var(--font-ui);letter-spacing:0;text-align:left;border-radius:0;user-select:auto;cursor:pointer}
button.rowx:active,label.rowx:active{transform:none;background:var(--surface-2)}
.card.flush>.caps:first-child{padding:var(--s-4) var(--s-5) 0;margin:0}
.card.flush>.pad{padding:var(--s-2) var(--s-5) var(--s-5)}
.card.flush>.pad:first-child{padding-top:var(--s-5)}
.card.flush>.more{padding:0 var(--s-2) var(--s-2)}
.pad>button.danger-text{margin-left:calc(-1*var(--s-3))}
.card>p:not(:first-child){margin-top:var(--s-2)}
.card>:where(p:not(:empty))+:where(form,.row,.list,.steps,.stat,button){margin-top:var(--s-3)} /* one class of specificity: never beats a component margin */
.thumb{width:56px;height:56px;object-fit:cover;border-radius:var(--r-xs);border:1px solid var(--line-2);flex:none}
.note{border-left:2px solid var(--accent-text);padding:4px 0 4px 14px;color:var(--ink)}
.fine{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:.8125rem;line-height:1.4;color:var(--ink-3)}

/* == pills and chips (§9.6) */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);font:700 .75rem/1 var(--font-ui);background:var(--surface-3);color:var(--ink-2);white-space:nowrap;justify-self:start}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} /* never colour-only: dot + words */
.pill.plain::before{display:none}
.pill.completed,.pill.verified,.pill.going{background:var(--ok-soft);color:var(--ok)}
.pill.in_progress,.pill.soon,.pill.live{background:var(--accent-soft);color:var(--accent-text)}
.pill.live::before{animation:live 1.6s var(--e-inout) infinite}
.pill.overdue,.pill.warnchip,.pill.changed{background:var(--warn-soft);color:var(--warn)}
.pill.not_started,.pill.presence,.pill.unverified,.pill.scheduled,.pill.ended,.pill.noreply,.pill.declined{background:var(--surface-3);color:var(--ink-2)}
.pill.unverified,.pill.declined{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.pill.cancelled{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-3);text-decoration:line-through}
button.pill{min-height:0;padding:0 10px;border-radius:var(--r-pill);font:700 .75rem/1 var(--font-ui)}
button.pill:active{transform:none}
.chip{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;height:32px;padding:0 var(--s-3);border:0;min-height:0;border-radius:var(--r-pill);font:500 .8125rem/1 var(--font-ui);background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.chip.on,.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);box-shadow:none;font-weight:700} /* selected = inverted rice, not marigold */
button.chip:active{background:var(--surface-3)}
button.chip.on:active,button.chip[aria-pressed="true"]:active{background:var(--ink)}
.chips{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;margin:-4px calc(-1*var(--gutter));padding:6px var(--gutter)} /* 6px: the scroller clips; room for hit areas and focus rings */
.chips::-webkit-scrollbar{display:none}
.chipwrap{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-2)}
.chipwrap+.chipwrap{margin-top:var(--s-1)}

/* == inputs, check, switch, stepper, code, tile pick (§9.7) */
label{display:grid;gap:6px;font:500 .8125rem/1.3 var(--font-ui);color:var(--ink-2)}
input,select,textarea{font:400 1rem/1.4 var(--font-ui);width:100%;min-height:52px;padding:0 var(--s-4);border:1.5px solid var(--line-ctl);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);appearance:none;-webkit-appearance:none}
textarea{padding:var(--s-3) var(--s-4);min-height:96px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent-text);box-shadow:0 0 0 3px var(--accent-soft)}
input[type=checkbox]:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;box-shadow:none}
input:disabled{background:var(--surface-2);color:var(--ink-3);border-color:var(--line)}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7F6D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px;padding-right:44px}
label.check{grid-template-columns:auto 1fr;align-items:center;gap:var(--s-3);color:var(--ink);font-weight:400;font-size:1rem;min-height:var(--tap)}
label.check input,input[type=checkbox]{width:24px;height:24px;min-height:0;padding:0;border-radius:8px;display:inline-grid;place-items:center;flex:none}
input[type=checkbox]:checked{background:var(--accent);border:1.5px solid var(--accent)}
input[type=checkbox]:checked::after{content:"";width:12px;height:7px;border:2.5px solid var(--accent-ink);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
input[type=checkbox].switch{width:52px;height:32px;border-radius:16px;background:var(--surface-3);position:relative}
input[type=checkbox].switch::after{content:"";position:absolute;top:3px;left:3px;width:23px;height:23px;border:0;border-radius:50%;background:var(--ink-2);transform:none;transition:transform var(--d-2) var(--e-out)}
input[type=checkbox].switch:checked{background:var(--accent)}
input[type=checkbox].switch:checked::after{transform:translateX(20px);background:var(--accent-ink)}
form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
.error{color:var(--danger);font-size:.875rem;min-height:1.2em}
.ok{color:var(--ok)}
label.search{display:block;position:relative}
.search>.ico{position:absolute;left:16px;top:50%;margin-top:-10px;color:var(--ink-3);pointer-events:none}
.search input{padding-left:46px}
.stepper{display:inline-grid;grid-template-columns:40px 48px 40px;align-items:center;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--line-ctl)}
.stepper button{min-height:40px;padding:0;background:transparent;color:var(--ink);border-radius:12px}
.stepper button:active{background:var(--surface-3);transform:none}
.stepper output{text-align:center;font:700 .9375rem/1 var(--font-ui);font-variant-numeric:tabular-nums}
.code{font:700 1.5rem/1 var(--font-mono);letter-spacing:.3em;padding:var(--s-3) var(--s-4);border-radius:var(--r-ctl);background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-ctl)}
input.code{text-transform:uppercase;text-align:center}
input.code:not(:focus){box-shadow:none}
.tilepick{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.tilepick.one{grid-template-columns:minmax(0,1fr)}
.tilepick>button{display:grid;justify-items:start;gap:var(--s-2);text-align:left;min-height:96px;padding:var(--s-4);border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-ctl);font-weight:700}
.tilepick>button:active{background:var(--surface-2)}
.tilepick>button small{font:400 .8125rem/1.4 var(--font-ui);color:var(--ink-2)}
.tilepick>button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--accent-text);background:var(--surface-2)}
.tilepick>button.off{box-shadow:inset 0 0 0 1.5px var(--line);background:transparent} /* unavailable: full opacity keeps the reason AA */
.tilepick>button.off .tile-t{color:var(--ink-3)}
.tilepick>button.off small{color:var(--ink-2)}
.tilepick .tile-t{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;font-size:1.0625rem}

/* == segmented control (§9.8) */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:4px;border-radius:var(--r-ctl);background:var(--surface-3)}
.seg button{min-height:40px;padding:0 8px;border-radius:10px;background:transparent;color:var(--ink-2);font-size:.9375rem;font-weight:500}
.seg button:active{transform:none;background:transparent}
.seg button.active,.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 1px var(--line-2)}

/* == invisible hit areas (A11Y-7): targets grow to 48 px (44 between close neighbours), never into a neighbour's */
button.sm,.chip,button.pill,.seg button,.stepper button,h2>.plainlink{position:relative}
:is(button.sm,.chip,button.pill,.seg button,.stepper button,h2>.plainlink)::after{content:"";position:absolute}
button.sm::after{inset:-6px -4px}
.chip::after{inset:-6px -4px}
button.pill::after{inset:-10px -3px}
.seg button::after{inset:-4px -1px}
.stepper button::after{inset:-4px}
h2>.plainlink{display:inline-block;max-width:100%;vertical-align:top}
h2>.plainlink::after{inset:-11px -4px}

/* == sheets, dialogs, toasts, banner (§9.9) */
.modal-wrap{position:fixed;inset:0;z-index:var(--z-modal);background:var(--scrim);display:grid;place-items:end center;opacity:0;transition:opacity var(--d-2)}
.modal-wrap.show{opacity:1}
.modal{background:var(--surface-2);color:var(--ink);width:100%;max-width:560px;border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--shadow-3);padding:var(--s-3) var(--s-6) calc(var(--s-6) + env(safe-area-inset-bottom));transform:translateY(24px);transition:transform var(--d-3) var(--e-out);max-height:90vh;overflow:auto}
.modal::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--line-2);margin:0 auto var(--s-4)}
.modal-wrap.show .modal{transform:none}
@media (min-width:600px) { .modal-wrap{place-items:center} .modal{border-radius:var(--r-sheet);transform:scale(.96)} .modal::before{display:none} }
.modal h3{font-size:1.25rem;line-height:1.25;margin:0 0 var(--s-2);letter-spacing:-.015em;text-transform:none;color:var(--ink)}
.modal p,.modal-body li{color:var(--ink-2);margin:6px 0}
.modal-body ul{padding-left:18px;margin:8px 0}
.modal-actions{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s-3);margin-top:var(--s-5)}
.modal-choices{display:grid;gap:var(--s-2);margin-top:var(--s-4)}
.modal-choices button{width:100%}
.modal .fine{margin-top:var(--s-3)}
.modal .note{margin:var(--s-3) 0}
.modal form.stack{margin-top:var(--s-3);gap:var(--s-3)}
.modal .spark{max-width:100%;height:auto}
.sheetlist{margin:var(--s-3) calc(-1*var(--s-6))}
.sheetlist .rowx{padding:var(--s-3) var(--s-6)}
.sheetlist>.rowx+.rowx{border-top:1px solid var(--line)}
.checklist>label+label{border-top:1px solid var(--line)}
.toasts{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom));z-index:var(--z-toast);display:grid;gap:8px;justify-items:center;pointer-events:none}
body.no-nav .toasts{bottom:calc(24px + env(safe-area-inset-bottom))}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:14px;font:500 .875rem/1.3 var(--font-ui);opacity:0;transform:translateY(12px);transition:opacity var(--d-2), transform var(--d-2) var(--e-out);max-width:calc(100vw - 40px)}
.toast.show{opacity:1;transform:none}
.toast::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
/* the toast ground is the inverse theme's: so are its dot hues */
.toast.success::before{background:#1A7050}
.toast.error::before{background:#B4233C}
:root[data-theme="light"] .toast.success::before{background:#6FD8A2}
:root[data-theme="light"] .toast.error::before{background:#FF6B81}
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .toast.success::before{background:#6FD8A2} :root[data-theme="auto"] .toast.error::before{background:#FF6B81} }
.toast .toast-act{pointer-events:auto;min-height:32px;padding:0 var(--s-3);margin-left:var(--s-1);border-radius:10px;background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor;font-size:.875rem}
.toast .toast-act:active{background:transparent;opacity:.7}
.banner{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-ctl);background:var(--surface-2);color:var(--ink);font-size:.875rem;line-height:1.4;box-shadow:inset 0 0 0 1px var(--line-2)}
.banner>.ico{color:var(--accent-text)}
.banner button{margin-left:auto;min-height:36px;padding:0 var(--s-3);font-size:.875rem;border-radius:10px}
.banner.warn{background:var(--warn-soft);color:var(--warn);box-shadow:none}
.banner.warn>.ico{color:inherit}

/* == progress ring (§9.10) */
.pring{position:relative;width:var(--sz,96px);height:var(--sz,96px);flex:none}
.pring svg{width:100%;height:100%;transform:rotate(-90deg)}
.pring circle{fill:none;stroke-linecap:round}
.pring-dots{stroke:var(--line-2);stroke-width:4;stroke-dasharray:.01 2.49}
.pring-line{stroke:var(--ok);stroke-width:5;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset var(--d-draw) var(--e-out)}
.pring-in{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center}
.pring-in b{font-size:calc(var(--sz,96px)*.3);line-height:1}
.pring-in span{font:700 .6875rem/1 var(--font-ui);color:var(--ink-3);letter-spacing:.06em}
.pring.sm .pring-in span{display:none} /* under 56 px: the numeral only, and fatter dots */
.pring.sm .pring-dots{stroke-width:5}

/* == consistency grid (§9.11): no streak */
.pulli{width:100%;max-width:280px;height:auto;display:block}
.pulli-dot{fill:var(--line-2)}
.pulli-line{stroke:var(--ok);stroke-width:13;stroke-linecap:round;fill:none;stroke-dasharray:200;stroke-dashoffset:200;animation:draw var(--d-draw) var(--e-out) forwards}
.pulli-on{fill:var(--ok-ink)}
.pulli-voice{fill:none;stroke:var(--ok-ink);stroke-width:1.5}
.pulli-today{fill:none;stroke:var(--ink-2);stroke-width:1.5}
.pulli.week{max-width:196px}

/* == sparkline, bars, stat tiles, table, guide block (§9.12) */
.spark{display:block;overflow:visible}
.spark .ln{fill:none;stroke:var(--viz-1);stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}
.spark .ln.b{stroke:var(--viz-2);stroke-dasharray:4 3}
.spark .pt{fill:var(--viz-1)}
.spark .pt.b{fill:var(--bg);stroke:var(--viz-2);stroke-width:1.5}
.spark .pt.in{fill:none;stroke:var(--ink-3)}
.spark .last{stroke:var(--bg);stroke-width:1.5}
.spark .band{fill:var(--viz-band)}
.spark .base{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 3}
.spark .run{stroke:var(--ok)}
.hbar{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.hbar>i{display:block;height:100%;border-radius:3px;background:var(--ink-2)}
.hbar.done>i{background:var(--ok)}
.progress{height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden}
.progress>div{height:100%;background:var(--ok)} /* no width transition */
.stat{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2);text-align:left}
.stat.two{grid-template-columns:1fr 1fr}
.stat>div,.tile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s-3) var(--s-4);min-width:0;display:grid;gap:4px;align-content:space-between}
.card .stat>div{background:var(--surface-2);border-color:transparent}
.stat b,.tile b{display:block;font:700 1.75rem/1.1 var(--font-ui);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);min-width:3ch}
.stat b small,.tile b small{font-size:.8125rem;font-weight:500;color:var(--ink-2);letter-spacing:0;margin-left:2px}
.stat span,.tile span{order:-1}
table{width:100%;border-collapse:collapse;font-size:.875rem;line-height:1.4}
th,td{text-align:left;padding:10px 6px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
td.n,th.n{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.tscroll{overflow-x:auto}
.howto{margin-top:var(--s-2);border-top:1px solid var(--line);padding-top:var(--s-1)}
.howto summary{cursor:pointer;color:var(--accent-text);font-weight:700;font-size:.875rem;list-style:none;min-height:var(--tap);display:flex;align-items:center;gap:8px}
.howto summary::-webkit-details-marker{display:none}
.howto summary::before{content:"";width:7px;height:7px;border-right:1.75px solid currentColor;border-bottom:1.75px solid currentColor;transform:rotate(-45deg);transition:transform var(--d-2) var(--e-out)}
.howto[open] summary::before{transform:rotate(45deg)}
.howto .gname{margin:var(--s-2) 0 var(--s-1);font-size:.875rem}
.howto .gname [lang="sa"]{font:500 1.25rem/1.4 var(--font-dev);color:var(--ink);margin-right:6px}
.howto .gsteps{margin:6px 0 8px;padding-left:20px;font-size:.875rem;line-height:1.5}
.howto .gsteps li{margin:4px 0}
.howto .gmeta{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:6px 0;font-size:.8125rem}
.howto .gmeta dt{color:var(--ink-3);font-weight:700}
.howto .gmeta dd{margin:0}
.howto .gmeta .care{color:var(--warn)}
.howto .srcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.howto .src{font-size:.6875rem;padding:2px 8px;border-radius:999px;background:var(--surface-3);color:var(--ink-2)}
.card>.howto:first-child{margin-top:0;border-top:0;padding-top:0}
.howto.plan summary{font-size:1rem;color:var(--ink)}
.snaps{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;margin:4px 0 8px}
.snaps img{width:72px;height:54px;flex:none;object-fit:cover;border-radius:var(--r-xs);border:1px solid var(--line-2)}
.snaps img.inpose{border:2px solid var(--ok)}

/* == empty state, skeleton, steps, splash (§9.13) */
.empty{text-align:center;padding:var(--s-8) var(--s-4);color:var(--ink-2)}
.empty-icon{width:64px;height:64px;margin:0 auto var(--s-3);border-radius:50%;display:grid;place-items:center;color:var(--ink-2);font-size:0;background:radial-gradient(circle, var(--line-2) 1.5px, transparent 1.6px) 0 0/8px 8px}
.empty-icon svg{background:var(--surface);border-radius:50%;padding:6px;box-sizing:content-box}
.empty-icon.ok{color:var(--ok)}
.empty h3{color:var(--ink);margin:0 0 4px;font-size:1.0625rem;text-transform:none;letter-spacing:-.01em}
.empty p{margin:0 auto var(--s-4);font-size:.9375rem;max-width:32ch}
.skel{border-radius:8px;background:var(--surface-3);animation:skel 1.1s var(--e-inout) infinite alternate}
.skel.line{height:14px;margin:10px 0}
.skel.line.w70{width:70%}
.skel.line.w45{width:45%}
.skel.h1{height:28px;width:55%;margin:8px 0}
.skel.hero{height:148px;border-radius:var(--r-card)}
.skel.row{height:64px;margin:8px 0;border-radius:14px}
.skel.tile{height:76px;border-radius:16px}
.skelwrap{display:grid;gap:var(--s-4)}
.skelrows{display:grid;gap:var(--s-2)}
.skelwrap>.skel,.skelrows>.skel{margin:0}
.skelwrap .skel{background:var(--surface-3);border:0;padding:0}
.steps{counter-reset:s;display:grid;gap:0;margin:var(--s-3) 0 0;padding:0;list-style:none}
.steps li{display:grid;grid-template-columns:28px 1fr;gap:var(--s-3);padding-bottom:var(--s-4);position:relative}
.steps li::before{counter-increment:s;content:counter(s);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;z-index:1;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink-2);font:700 .8125rem/1 var(--font-ui)}
.hero .steps li::before{background:var(--surface-2)}
.steps li:not(:last-child)::after{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--line-2)}
.splash{min-height:100vh;min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:16px;background:var(--bg)}

/* == screens (§12). The mark (§12.1, §14.1) */
.mark .kl{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.mark .kd{fill:var(--accent)}
.mark.draw .kl{stroke-dasharray:1;stroke-dashoffset:1;animation:draw var(--d-draw) var(--e-out) .1s forwards}
.mark.draw .kd{opacity:0;animation:fadein var(--d-2) linear forwards}
.mark.sm .kl{stroke-width:8} /* heavier below 32 px */
/* -- Today (§12.2, §12.9) and the body-map teaser */
.card.today{display:grid;gap:var(--s-3)}
.card.today>.caps:first-child{margin:0}
.today-head{display:flex;align-items:flex-start;gap:var(--s-4)}
.today-main{flex:1;min-width:0;display:grid;gap:var(--s-1)}
.today-title{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.devline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.consist{display:flex;align-items:center;gap:var(--s-5);margin-top:var(--s-2)}
.consist .pulli{flex:1;min-width:0;max-width:200px}
.consist-n{display:grid;gap:2px;flex:none}
.consist-n b{font-size:2.5rem;line-height:1}
.weekrow{display:grid;grid-template-columns:96px minmax(0,196px);gap:var(--s-3);align-items:center;min-height:var(--tap);color:inherit;text-decoration:none}
.weekrow>.small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.weekrow.head{min-height:0;margin-top:var(--s-2)}
.weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.weekdays i{font-style:normal}
.bmt{display:grid;gap:var(--s-2);color:inherit;text-decoration:none;cursor:pointer}
.bmt-row{display:flex;align-items:center;gap:var(--s-4)}
.bmt-row>.ico{color:var(--ink-3)}
.bmt-fig{flex:none;width:48px;height:72px;display:grid;place-items:center;color:var(--ink-2)}
.bmt-fig svg{height:100%;width:auto}
.bmt-main{flex:1;min-width:0;display:grid;gap:var(--s-1);justify-items:start}
.card .seq-main h3,.bmt h3{margin:0;font:700 1.0625rem/1.3 var(--font-ui);letter-spacing:-.01em;text-transform:none;color:var(--ink)}
/* -- Students, student page (§12.10), auth (§12.1) */
.who{display:flex;align-items:center;gap:var(--s-4);padding-top:var(--s-2)}
.who>div{min-width:0;display:grid;gap:2px}
.rowx .meta.bmline{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--s-2);margin-top:6px}
.bmline .chip{cursor:pointer}
.bmline i{font-style:normal;white-space:nowrap}
label.rowx .main strong{white-space:normal}
.page.auth{padding-top:calc(var(--s-10) + env(safe-area-inset-top))}
.auth-head{display:grid;gap:var(--s-3);justify-items:start}
.auth .rowx .main{color:var(--ink-2);font-size:.9375rem;line-height:1.45}
/* -- practice mode pick (§12.5), homework detail (§12.4) */
.camready{display:flex;align-items:center;gap:var(--s-2);min-height:1.4em;color:var(--ink-2);font-weight:500}
.camready .progress{display:block;width:96px;flex:none}
.camready .progress>span{display:block;height:100%;background:var(--ok)}
.hw-head{display:grid;gap:var(--s-2)}
.hw-note{white-space:pre-line}
.endaction{justify-self:center}
.seqno{flex:none;width:28px;height:28px;margin:2px 14px 0;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--ink-2);font:700 .8125rem/1 var(--font-ui)}
.seq-main{flex:1;min-width:0;display:grid;gap:2px}
.seq-main .pill,.acard .cap .pill{justify-self:start;margin-top:4px}
.seq .howto{border-top:0;padding-top:0}
.seq-sa .dev,.pick .dev{margin-right:4px}
.seq-t{flex:none;color:var(--ink-2)}
.sess{display:grid;gap:var(--s-4)}
.sess>.rowx{padding:0;min-height:0}
.sess .stat>div{padding:var(--s-2) var(--s-3)}
.sess .stat b{font-size:1.375rem}
.sitems{display:grid;gap:var(--s-3)}
.sitem{display:grid;gap:6px}
.sitem .snaps{margin:2px 0 0}
.sitem-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3)}
.sitem-h>span:first-child{min-width:0;overflow-wrap:anywhere;font-weight:500}
.sitem-h .num{flex:none;color:var(--ink-2)}
/* -- Assign + asana picker (§12.11) */
.pickbar{display:grid;gap:var(--s-2);z-index:3;position:sticky}
.page .pickbar{top:calc(var(--top-h) + env(safe-area-inset-top));background:var(--bg);margin:0 calc(-1*var(--gutter));padding:var(--s-2) var(--gutter)}
.modal .pickbar{top:calc(-1*var(--s-3));background:var(--surface-2);padding:calc(var(--s-2) + var(--s-3)) 0 var(--s-2)}
.asana-pick{display:grid;gap:0} /* no nested scroller: it scrolls with the page */
.asana-pick>.pick{padding:var(--s-3) 0}
.asana-pick>.pick~.pick{border-top:1px solid var(--line)}
.pick-row{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--s-3);align-items:start;color:var(--ink);font:400 1rem/1.4 var(--font-ui);cursor:pointer}
.pick-main{display:grid;gap:2px}
.pick-no{color:var(--accent-text);margin-right:8px}
.pick-no:empty{display:none}
.pick .dev{font-size:1.0625rem}
.pick-set{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);padding:var(--s-3) 0 0 36px}
.pick-step{display:grid;gap:6px}
.ordlist .seqn{flex:none;width:28px;color:var(--accent-text)}
.ordlist .trail{gap:0}
/* -- library (§12.12) */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.acard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:grid;grid-template-rows:auto 1fr;text-align:left;padding:0;color:var(--ink)}
button.acard{font-weight:400;min-height:0;align-items:stretch;justify-content:stretch}
button.acard:active{background:var(--surface-2)}
.acard .fig{display:grid;place-items:center;background:var(--bg);color:var(--ink-2);aspect-ratio:1}
.acard .fig svg{height:78%;width:auto}
.acard .fig svg.posefig{width:80%;height:80%}
.acard .fig img{width:100%;height:100%;object-fit:cover}
/* licensed pose illustrations (art.js): drawn for a light page, so they always sit on a light panel */
.acard .fig.art,.gart.art,span.thumb.art{background:#EFE8DC}
.acard .fig.art img{width:86%;height:86%;object-fit:contain}
.gart{position:relative;margin:var(--s-2) 0;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;max-height:260px}
.gart img{position:absolute;inset:5%;width:90%;height:90%;object-fit:contain}
span.thumb.art{display:grid;place-items:center;overflow:hidden;margin:0 10px 0 0;border-color:transparent}
span.thumb.art img{width:48px;height:48px;object-fit:contain}
.acard .cap{padding:var(--s-3) var(--s-4) var(--s-4);display:grid;gap:2px}
.acard .cap .dev{font-size:1.125rem}
.acard .cap strong{font:700 .9375rem/1.3 var(--font-ui)}
.asheet{display:grid;gap:var(--s-2)}
.asheet .howto .gname{display:none}
.asheet>.rowx{padding:var(--s-2) 0;min-height:0}
.asheet>p{margin:0}
.asheet-act{position:sticky;bottom:calc(-1*var(--s-6));margin:var(--s-3) 0 calc(-1*var(--s-6));padding:var(--s-3) 0 var(--s-6);background:var(--surface-2)}
.saved{display:grid;justify-items:center;gap:var(--s-1);text-align:center;padding-top:var(--s-4)}
.refshot{width:100%;border-radius:14px;display:block}

/* == classes (classes-spec §13, §11, §12) */
.classcard{display:grid;gap:var(--s-2)}
.classcard .eyebrow{color:var(--accent-text)}
.classcard.changed{border-color:var(--warn)}
.classcard.cancelled .when,.rowx.cancelled strong{text-decoration:line-through;color:var(--ink-3)}
.when{font:700 1.25rem/1.3 var(--font-ui);letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.tz2{font-size:.875rem;color:var(--ink-2)}
.countdown{font-variant-numeric:tabular-nums}
.btn.join{width:100%;min-height:var(--join-h);font-size:1.0625rem;border-radius:18px}
.join[aria-disabled="true"]{background:var(--surface-3);color:var(--ink-2);opacity:1;pointer-events:none}
.joinhost{font-size:.8125rem;color:var(--ink-3);text-align:center}
.daychips{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.lenchips{display:flex;gap:6px}
.lenchips button{flex:1}
.daychips button,.lenchips button{min-height:48px;padding:0;border-radius:12px;background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line-2);font-weight:500}
.daychips button[aria-pressed="true"],.lenchips button[aria-pressed="true"]{background:var(--ink);color:var(--bg);box-shadow:none;font-weight:700}
.seats{display:inline-flex;gap:4px;vertical-align:middle}
.seats i{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink-3)}
.seats i.going{background:var(--ok);border-color:var(--ok)}
.seats i.declined{background:var(--line-2);border-color:var(--line-2)}
.seats i.free{border-style:dashed;opacity:.5}
.livedot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;animation:live 1.6s var(--e-inout) infinite}
.agenda-day{margin:var(--s-3) 0 var(--s-1)}
.page>.agenda-day{margin:var(--s-1) 0 calc(-1*var(--s-2))}
.page>.rule-dots{margin:0}
/* relative: keeps the .sr "(weekly)" inside the row (it scrolled the page sideways) */
.rowx.cls .main strong{display:flex;align-items:center;gap:6px;position:relative}
.rowx.cls .main strong .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.classcard .cls-title{font-size:1.25rem;line-height:1.25;margin-top:var(--s-2)}
.rowx.cls .main strong .rep{flex:none;color:var(--ink-3)}
.rowx.cls .meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.rowx.cls .meta>.pill:first-child{margin:0}
.rowx.past .meta,.rowx.declined .meta{color:var(--ink-3)}
.rowx.declined strong{color:var(--ink-2)}
.rowx .quote{flex-basis:100%;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowx[data-cal]{cursor:pointer}
.plainlink{color:inherit;text-decoration:none}
.bigtime{display:flex;align-items:baseline;gap:var(--s-2)}
.bigtime .per{font:700 1.25rem/1 var(--font-ui);color:var(--ink-2)}
.classcard.cancelled .bigtime{color:var(--ink-3);text-decoration:line-through}
.zones{display:grid;grid-template-columns:repeat(auto-fit, minmax(118px, 1fr));gap:var(--s-2);margin-top:var(--s-2)}
.zones .tile{background:var(--surface)}
.zones .tile b{font-size:1.25rem;white-space:nowrap}
.zones .tile small{font-size:.8125rem;color:var(--ink-2)}
.warnline,.shiftline{display:flex;align-items:flex-start;gap:var(--s-2)}
.warnline{color:var(--warn)}
.shiftline{color:var(--ink-2)}
.warnline .ico,.shiftline .ico{margin-top:2px}
.okline{display:inline-flex;align-items:center;gap:4px;color:var(--ok)}
.classcard .eyebrow .ico{vertical-align:-3px;margin-right:6px}
.classcard .eyebrow .livedot{vertical-align:1px}
.joinblock{display:grid;gap:var(--s-2)}
.joinnote{display:flex;align-items:center;justify-content:center;gap:var(--s-2);flex-wrap:wrap;color:var(--ink-2);font-size:.875rem}
.rsvpline{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);padding:var(--s-3) var(--s-3) 0 var(--s-5);min-height:48px}
.rowx .main .chipline{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.planlist{margin:0;padding:0;list-style:none;counter-reset:p;display:grid}
.planlist li{counter-increment:p;display:flex;align-items:baseline;gap:var(--s-3);padding:var(--s-2) 0;border-top:1px solid var(--line)}
.planlist li:first-child{border-top:0}
.planlist li::before{content:counter(p, decimal-leading-zero);font:700 .8125rem/1 var(--font-ui);color:var(--accent-text);font-variant-numeric:tabular-nums}
.planlist .main{flex:1;min-width:0}
.planlist .num{color:var(--ink-2);white-space:nowrap}
.actions{gap:var(--s-3)}
.addcal{justify-self:center}
.wraplist .rowx{min-height:56px;padding:var(--s-2) 0}
.wraplist .seg{flex:none;width:176px}
.planform .modal-actions{position:sticky;bottom:0;background:var(--surface-2);padding:var(--s-3) 0;margin-top:0}
.classform .sechead{margin-top:var(--s-2)}
.classform .lab{display:block;margin-bottom:6px}
.assign .lab,.classform .lab{font:500 .8125rem/1.3 var(--font-ui);color:var(--ink-2)}
.classform .two{display:grid;grid-template-columns:repeat(auto-fit, minmax(156px, 1fr));gap:var(--s-3)}
.classform .two>label{min-width:0}
.classform .two input{min-width:0}
.classform input[name=until]{margin-top:var(--s-2)}
.classform .linkrow{padding:0;min-height:56px}
.classform .more>label{margin-top:var(--s-3)}
.pv{gap:var(--s-2)}
.pvrow{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;min-height:32px}
.pvrow .pvname{min-width:0}
.pvrow .num{margin-left:auto}
.nextcls{display:contents} /* an empty slot adds no gap to the page grid */
.classcard h2,.classcard p{overflow-wrap:anywhere;min-width:0}
.classcard .titlerow{flex-wrap:nowrap;align-items:baseline}
.classcard .titlerow h2{min-width:0;overflow-wrap:anywhere}
.classcard .titlerow .rec{flex:none}
.classcard.cancelled .eyebrow{color:var(--ink-3)}
.classcard>.note{margin:0}

/* == body map (bodymap-spec §5.4; values §13.2) */
.assess-word{font:700 var(--assess-word)/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:#F6F0E6;text-shadow:0 2px 12px rgba(0,0,0,.85)}
.assess-count{font:700 var(--assess-count)/1 var(--font-ui);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#F6F0E6}
.assess-bar{position:absolute;left:0;bottom:0;height:var(--assess-bar);width:100%;background:#54ECA0;transform:scaleX(0);transform-origin:0 50%;z-index:3} /* JS writes transform:scaleX(p) */
.map-stage{background:var(--stage);color:var(--stage-ink);border:1px solid #332D27;border-radius:var(--r-card);padding:var(--s-3);--ink:#F3EDE3;--ink-2:#B5AB9D;--ink-3:#968C7E;--line-2:#4A4239;--bg:#12100E;--surface-3:#2E2924;display:grid;gap:var(--s-2)} /* dark in both themes */
.mapcanvas{width:100%;aspect-ratio:3/4;max-height:62vh;touch-action:pan-y;display:block}
.map-legend{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:.75rem;color:#B5AB9D}
.map-legend span{display:inline-flex;align-items:center;gap:6px}
.map-stage .chips{margin:-2px 0;padding:6px 0;justify-content:center}
.stage-t h2{font-size:1rem}
.stage-cap{font-size:.8125rem;color:var(--ink-2);text-align:center}
.lead.well{background:var(--stage)}
.rowx[data-region]{cursor:pointer}
.rowx[data-region]:active{background:var(--surface-2)}
.meta .clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.moves .mvrow,.mrow{display:grid;gap:6px;padding:var(--s-3) 0}
.moves .mvrow+.mvrow,.mrow+.mrow,.list>.hist+.hist{border-top:1px solid var(--line)}
.tile b.wd{font-size:1.0625rem;line-height:1.3}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.mside{display:grid;gap:4px;margin-top:var(--s-2)}
.qdot{vertical-align:-1px;color:var(--ink-2)}
.sheet-sec{display:grid;gap:var(--s-2);margin-top:var(--s-4)}
.cmp-pick{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin:var(--s-3) 0}
.links{justify-items:start}
.mdet{margin:0 var(--s-5) var(--s-3)}

/* == practice player (identity §10.4) and summary (§12.5): near = at the phone, far = on the mat. Text sits on a plate,
   never on raw video. Always dark: the dark tokens are re-declared. */
.player{position:fixed;inset:0;z-index:var(--z-player);display:grid;grid-template-rows:auto 1fr auto;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);background:#12100E;color:#F3EDE3;color-scheme:dark;
  --bg:#12100E;--surface:#1B1815;--surface-2:#24201C;--surface-3:#2E2924;--line:#332D27;--line-2:#4A4239;--line-ctl:#80766A;
  --ink:#F3EDE3;--ink-2:#B5AB9D;--ink-3:#968C7E;--accent:#F4A72C;--accent-hi:#FFC35C;--accent-text:#F4A72C;--accent-ink:#1A1206;--accent-soft:#33250F;
  --ok:#6FD8A2;--ok-soft:#12291E;--danger:#FF6B81;--danger-fill:#C42F49;--warn:#EC8A5E;
  --p-bone:#F6F0E6;--p-ok:#54ECA0;--p-bad:#FF3D57;--p-plate:rgba(14,12,10,.72);--p-plate-line:rgba(243,237,227,.16);
  --ring:min(62vw, 30vh, 260px)}
.player .phead{padding:12px 16px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;position:relative;z-index:2}
.player .plate{background:var(--p-plate);border:1px solid var(--p-plate-line);border-radius:14px;padding:10px 14px;min-width:0}
.player:not(.cam) .plate{background:none;border-color:transparent}
.player .step{color:var(--ink-2)}
.player .progress{width:180px;max-width:100%;margin-top:8px;background:rgba(243,237,227,.18)}
.player .progress>div{width:0;background:var(--p-ok)}
.player button.secondary{background:var(--p-plate);color:var(--p-bone);box-shadow:inset 0 0 0 1px var(--p-plate-line)}
.player button.secondary:active{background:rgba(243,237,227,.26)}
.player button.round{width:48px;height:48px;min-height:0;padding:0;border-radius:50%;flex:none}
.player .pbody{display:grid;justify-items:center;align-content:center;align-content:safe center;gap:12px;padding:0 20px;text-align:center;position:relative;z-index:2;min-height:0} /* safe: overflow spills down, never over the close button */
.player .pose{font:700 1.5rem/1.2 var(--font-ui);letter-spacing:-.02em;margin:0}
.player .sanskrit{margin:2px 0 0;display:grid;gap:0}
.player .sanskrit .dev{color:var(--ink)}
.player .sanskrit .iast{color:var(--ink-2)}
.player .phase{font:700 1.125rem/1.3 var(--font-ui);min-height:1.3em;margin-top:6px}
.player .cue{font-size:1rem;line-height:1.4;color:var(--ink-2);max-width:32ch;min-height:2.8em;margin:0 auto}
.player .pfoot{padding:12px 16px 16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;position:relative;z-index:2;transition:opacity var(--d-3)}
.player .pfoot button{min-height:60px;border-radius:18px;padding:0 8px}
.player[data-mode="far"] .pfoot{opacity:.7}
.player .showme{min-height:48px;padding:0 18px;border-radius:999px;font-size:.875rem;background:var(--p-plate);color:var(--p-bone);box-shadow:inset 0 0 0 1px var(--p-plate-line)}
.player .showme:active{background:rgba(243,237,227,.26)}
.player .timer{font:700 4.5rem/1 var(--font-ui);letter-spacing:-.04em;font-variant-numeric:tabular-nums lining-nums;color:var(--p-bone)}
/* the ring: its line is drawn only while the pose is right */
.ring{position:relative;width:var(--ring);height:var(--ring);display:grid;place-items:center;border:0;background:none;transform:scale(.55);transform-origin:50% 100%;margin-top:calc(var(--ring)*-.45);transition:transform var(--d-3) var(--e-inout)}
.player[data-mode="far"] .ring{transform:none;margin-top:0}
.ring::before{content:"";position:absolute;inset:7%;border-radius:50%;background:rgba(14,12,10,.60)}
.ring::after{content:"";position:absolute;inset:7%;border-radius:50%;box-shadow:0 0 44px 6px rgba(84,236,160,.50);opacity:0;transition:opacity var(--d-state) var(--e-inout);pointer-events:none}
.ring.good::after{opacity:1} /* static shadow, animated opacity */
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-linecap:round;transition:stroke var(--d-state) var(--e-inout), opacity var(--d-state) var(--e-inout)}
.ring .rd{stroke:rgba(246,240,230,.55);stroke-width:3.5;stroke-dasharray:.01 2.49}
.ring .rl{stroke:var(--p-bone);stroke-width:4;opacity:.45;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1s linear, stroke var(--d-state) var(--e-inout), opacity var(--d-state) var(--e-inout)}
.ring.good .rd{opacity:.30}
.ring.good .rl{stroke:var(--p-ok);stroke-width:6;opacity:1}
.ring.bad .rd{stroke:var(--p-bad);opacity:1}
.ring.bad .rl{opacity:.20}
.ring .timer{position:relative;font-size:calc(var(--ring)*.5);transition:opacity var(--d-state)}
.ring .timer.long{font-size:calc(var(--ring)*.34)}
.ring.bad .timer{opacity:.55}
.ring .hold-bars{position:absolute;bottom:16%;left:50%;width:7px;height:18px;margin-left:-11px;border-radius:2px;background:var(--p-bad);box-shadow:15px 0 0 var(--p-bad);opacity:0;transition:opacity .3s}
.ring.bad .hold-bars{opacity:1}
.stateword{font:700 clamp(36px,10vw,56px)/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--p-bone);min-height:1em;text-shadow:0 2px 12px rgba(0,0,0,.85);transition:color var(--d-state)}
.player[data-state="good"] .stateword{color:var(--p-ok)}
.player[data-state="bad"] .stateword{color:var(--p-bad)}
.player[data-mode="near"] .stateword{font-size:1.5rem}
.farname{display:none;font:700 1.25rem/1.3 var(--font-ui);text-shadow:0 1px 6px rgba(0,0,0,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.player[data-mode="far"] .farname{display:block}
.player[data-mode="far"] .near-only{display:none}
.player.cam{background:#000}
.player.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:.80;transition:opacity .6s}
.player.cam canvas{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1);pointer-events:none}
.player.cam .phead{background:linear-gradient(rgba(14,12,10,.60), transparent);padding-bottom:28px}
.player.cam .pfoot{background:linear-gradient(transparent, rgba(14,12,10,.72));padding-top:28px}
.player.cam .camfoot{align-content:end;padding-bottom:8px}
.player.cam::before,.player.cam::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border:6px solid var(--p-ok);opacity:0;transition:opacity var(--d-state) var(--e-inout)} /* the state frame: two layers, opacity only */
.player.cam::after{border-color:var(--p-bad)}
.player.cam[data-mode="far"][data-state="good"]::before{opacity:1}
.player.cam[data-mode="far"][data-state="bad"]::after{opacity:1}
.refimg{position:absolute;top:-8px;right:0;width:112px;height:84px;object-fit:cover;border-radius:14px;border:1px solid rgba(246,240,230,.6);transform:scaleX(-1);z-index:3}
/* voice only: the lamp breathes inside fixed dots (guided.js sets the class and transitionDuration) */
.breath{width:min(52vw,220px);height:min(52vw,220px);border-radius:50%;background:rgba(244,167,44,.10);box-shadow:inset 0 0 0 3px #F4A72C;transform:scale(.7);transition:transform 1s var(--e-inout)}
.breathwrap{position:relative;display:grid;place-items:center}
.breathwrap::before{content:"";position:absolute;inset:-6%;border-radius:50%;border:3px dotted rgba(243,237,227,.35)}
.breath.in,.breath.hold{transform:scale(1)}
.breath.out,.breath.hold2{transform:scale(.7)}
.breath.rest{transform:scale(.85)}
/* short phones (≤ 375x667): nothing may overflow over the close button or under the foot; far mode is untouched */
@media (max-height:700px) {
  .player .pbody{gap:8px}
  .player:not(.cam) .pbody{overflow:hidden auto}
  .player .cue{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .breath{width:min(52vw,20vh,220px);height:min(52vw,20vh,220px)}
  .player[data-mode="near"] .ring{transform:scale(.45);margin-top:calc(var(--ring)*-.55)}
}
/* summary: full-bleed, no card */
.psum{display:grid;justify-items:center;text-align:center;gap:var(--s-2);padding-top:var(--s-4)}
.psum .pring{margin-bottom:var(--s-3)}
.psum .pill{margin-top:var(--s-2)}
@media (max-width:359px) { .stat.psum-stat b{font-size:1.5rem} }
.sumrows{display:grid}
.sumrow{display:grid;gap:6px;padding:var(--s-3) 0}
.sumrow+.sumrow{border-top:1px solid var(--line)}
.sumrow>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3)}
.sumrow strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sumrow .num{flex:none;font-size:.875rem;color:var(--ink-2)}

/* == reduced motion (§7): keep last */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .fade-ok{transition:opacity 120ms linear!important} /* .modal-wrap and .toast keep a plain fade */
}