/* Ascendia v2 — calm Liquid Glass shell (design/05_redesign_v2.md). Loaded after tools.css. */
/* dot grid (Ref B), top-right only */
.aura::after{content:"";position:absolute;inset:0;background:var(--bp-dots);-webkit-mask-image:radial-gradient(60% 50% at 100% 0%,#000,transparent 70%);mask-image:radial-gradient(60% 50% at 100% 0%,#000,transparent 70%)}
/* top bar chips */
.chip-s{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;background:var(--bp-lite);border:1px solid var(--bp-lite-line);font:600 14px/1 var(--lg-font);color:var(--bp-ink);white-space:nowrap}
.chip-s svg{color:var(--bp-warn)}
.bell{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--bp-ink-2);background:var(--bp-lite);border:1px solid var(--bp-lite-line);text-decoration:none;flex:none}
.bell .cnt{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--bp-neg);color:var(--bp-on-primary,#fff);font:700 12px/20px var(--lg-font);text-align:center;box-shadow:0 0 0 2px var(--bp-paper)}
@media(max-width:1100px){.hide-m{display:none}}
@media(max-width:700px){.hide-s{display:none}}
/* shell: floating bar + sidebar */
body.has-shell .app-nav{width:calc(100% - 32px);max-width:none;min-height:64px;margin:16px 16px 0;padding:8px 10px 8px 14px;border-radius:28px}
.sidenav{position:fixed;z-index:45;left:16px;top:96px;bottom:16px;width:96px;display:none;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:28px;overflow-y:auto;scrollbar-width:none}
.sidenav::-webkit-scrollbar{display:none}
.nav-i{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:80px;min-height:72px;border:0;border-radius:22px;background:none;color:var(--bp-ink-2);font:500 13px/1.2 var(--lg-font);text-decoration:none;cursor:pointer;transition:background var(--bp-t-hover) var(--bp-ease)}
.nav-i[aria-current="page"]{background:var(--bp-tint-soft);color:var(--bp-tint-ink);font-weight:600;box-shadow:var(--bp-spec)}
.nav-set{margin-top:auto}
@media(hover:hover){.nav-i:hover{background:var(--bp-paper-2)}.nav-i[aria-current="page"]:hover{background:var(--bp-tint-soft)}}
.tabnav{position:fixed;z-index:55;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);height:64px;display:none;align-items:center;justify-content:space-around;padding:0 6px;border-radius:28px}
.tabnav .nav-i{flex:1;min-width:0;width:auto;min-height:56px;font-size:12px;gap:2px;border-radius:20px}
.tabnav .nav-i svg{width:22px;height:22px}
@media(min-width:821px){
  body.has-shell .sidenav{display:flex}
  body.has-shell .wrap,body.has-shell .foot{width:auto;max-width:1240px;margin-left:128px;margin-right:24px}
  body.has-shell.tools-drawer .wrap{width:auto;max-width:none;margin-left:128px;margin-right:calc(var(--tool-w,380px) + 40px)}
}
@media(min-width:1500px){body.has-shell .wrap,body.has-shell .foot{margin-left:max(128px,calc((100% - 1240px)/2 + 48px))}}
@media(min-width:821px) and (max-width:1179px){.sidenav{width:76px}.nav-i{width:64px;font-size:12px}body.has-shell .wrap,body.has-shell .foot{margin-left:108px}body.has-shell.tools-drawer .wrap{margin-left:108px}}
@media(max-width:820px){
  body.has-shell .tabnav{display:flex}
  body.has-shell{padding-bottom:96px}
  body.has-shell .app-nav{margin:12px 12px 0;width:calc(100% - 24px);border-radius:22px;min-height:56px}
  body.has-shell .wrap{width:min(100% - 32px,720px)}
}
body.tools-sheet .tabnav{display:none}
.settings-sheet{padding:16px;max-width:420px}
@media(forced-colors:active){.nav-i[aria-current="page"]{background:Highlight;color:HighlightText}.sidenav,.tabnav{border:1px solid CanvasText}}
@media(prefers-reduced-transparency:reduce){.sidenav,.tabnav{background:var(--bp-glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---- cubes ---- */
.cube{display:inline-block;flex:none;pointer-events:none}
.page-head{position:relative}
.head-cube{position:absolute;right:0;top:64px;z-index:0}
@media(max-width:820px){.head-cube{display:none}}
/* ---- learning path (design 05 §5.2) ---- */
.pathwrap{position:relative;max-width:760px;margin:24px auto 48px}
.path-spine{position:absolute;left:40px;top:40px;bottom:40px;width:6px;border-radius:3px;background:var(--bp-track)}
.path-fill{display:block;width:100%;height:100%;border-radius:3px;background:var(--bp-primary);transform-origin:top;transform:scaleY(var(--done,0))}
.lpath{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column;gap:20px}.lpath>li{display:block;border:0;padding:0;margin:0;background:none;box-shadow:none}.lpath>li::before,.lpath>li::after{display:none}
.pnode a.pnode-link{display:flex;align-items:center;gap:20px;text-decoration:none;color:inherit;border-radius:28px;padding:6px;min-height:76px}
.pdisc{position:relative;flex:none;width:76px;height:76px;display:grid;place-items:center}
.disc{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;font:650 24px/1 var(--lg-font-display);background:var(--bp-lite);border:2px solid var(--bp-line-strong);color:var(--bp-ink-2);box-shadow:var(--bp-spec)}
.disc .ring-wrap{position:absolute;inset:-2px}
.pnode.cp .disc{border-radius:20px}
.pcard{display:flex;flex-direction:column;gap:6px;align-items:flex-start;flex:1;min-width:0;padding:14px 20px;border-radius:var(--bp-r-inner);background:var(--bp-paper);border:1px solid var(--bp-line);box-shadow:var(--bp-shadow-1)}
.pcard .pt{font:600 18px/1.35 var(--lg-font-display);color:var(--bp-ink)}
.pnode.is-locked .disc{background:var(--bp-paper-2);border-style:dashed;color:var(--bp-ink-3)}
.pnode.is-locked .pcard{background:var(--bp-paper-2);box-shadow:none}
.pnode.is-current .pdisc{width:92px;height:92px}
.pnode.is-current .disc{width:80px;height:80px;border:0;background:var(--bp-primary);color:var(--bp-on-primary);box-shadow:var(--bp-glow),0 0 0 6px var(--bp-tint-soft)}
.pnode.is-in_progress .disc{color:var(--bp-tint-ink);border-color:transparent}
.pnode.is-done .disc{border-color:var(--bp-ink-2)}
.pnode.is-mastered .disc{border:0;background:linear-gradient(145deg,#1F7F55,#1A6E43);color:#fff}
.pnode.is-checkpoint .disc{color:var(--bp-tint-ink)}
.pnode.is-checkpoint.cp .pt{color:var(--bp-tint-ink)}
.cbadge{position:absolute;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 2px var(--bp-paper)}
.cbadge.rev{top:0;right:0;background:var(--bp-warn-soft);color:var(--bp-warn)}.cbadge.asg{bottom:0;right:0;background:var(--bp-tint-soft);color:var(--bp-tint-ink)}
.achip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:999px;font:600 14px/1 var(--lg-font);background:var(--bp-tint-soft);color:var(--bp-tint-ink)}
.achip.soon{background:var(--bp-warn-soft);color:var(--bp-warn)}.achip.overdue{background:var(--bp-neg-soft);color:var(--bp-neg)}.achip.done{background:var(--bp-pos-soft);color:var(--bp-pos)}
@media(min-width:1180px){.pnode.alt{margin-left:48px}}
@media(max-width:560px){.pdisc{width:64px;height:64px}.disc{width:56px;height:56px;font-size:20px}.pnode.is-current .disc{width:64px;height:64px}.pnode.is-current .pdisc{width:76px}.path-spine{left:34px}.pnode a.pnode-link{gap:12px}}
@media(prefers-reduced-motion:no-preference){.pnode.is-current .disc{transition:transform var(--bp-t-pop) var(--bp-ease)}}
.tabbar{display:flex;gap:6px;width:max-content;max-width:100%;padding:6px;border-radius:999px;margin:16px 0}
.tabbar a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;color:var(--bp-ink-2);text-decoration:none;font:600 16px var(--lg-font)}
.tabbar a[aria-current="page"]{background:var(--bp-tint-soft);color:var(--bp-tint-ink)}

/* ---- home (design 05 §3.1) ---- */
.home-head{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:8px 0 24px}
.home-cubes{display:flex;gap:8px;align-items:flex-end}
@media(max-width:820px){.home-cubes{display:none}}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}
.stat{position:relative;display:flex;flex-direction:column;gap:2px;min-height:112px;padding:20px;border-radius:var(--bp-r-tile);background:var(--bp-lite);border:1px solid var(--bp-lite-line);box-shadow:var(--bp-spec),var(--bp-shadow-1)}
.stat b{font:650 32px/1 var(--lg-font-display);font-variant-numeric:tabular-nums;color:var(--bp-ink)}.stat .sl{font-size:15px;color:var(--bp-ink-2)}
.stat .si{position:absolute;top:16px;right:16px;color:var(--bp-tint)}
.home-mid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;margin-bottom:24px}
.home-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media(max-width:1024px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.home-mid,.home-two{grid-template-columns:1fr}}
@media(max-width:560px){.stat b{font-size:26px}.stats,.home-mid,.home-two{gap:12px}}
.activity{padding:20px 24px}
.chart svg{width:100%;height:200px;display:block}.chart-x{display:flex;justify-content:space-between;padding:0 24px;font-size:13px;color:var(--bp-ink-3)}.chart-x .now{color:var(--bp-tint-ink);font-weight:600}
@media(max-width:560px){.chart svg{height:160px}}
.card.continue{display:grid;grid-template-columns:72px 1fr;gap:16px;align-content:start}.card.continue .btn{grid-column:1/-1}
.eyebrow{font:600 13px/1 var(--lg-font);letter-spacing:.04em;text-transform:uppercase;color:var(--bp-ink-3)}
.rows{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.rows a{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 12px;border-radius:var(--bp-r-inner);background:var(--bp-paper-2);color:var(--bp-ink);text-decoration:none;font-weight:500}
.kgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:820px){.kgrid{grid-template-columns:1fr}}
.kcard{display:grid;grid-template-columns:160px 1fr;min-height:120px;border-radius:var(--bp-r-tile);overflow:hidden;background:var(--bp-lite);border:1px solid var(--bp-lite-line);box-shadow:var(--bp-spec),var(--bp-shadow-1);text-decoration:none;color:inherit}
@media(max-width:560px){.kcard{grid-template-columns:96px 1fr}}
.kthumb{position:relative;background:linear-gradient(135deg,var(--bp-aura-1),var(--bp-aura-2));display:grid;place-items:center;overflow:hidden}.kthumb img{width:100%;height:100%;object-fit:cover;display:block}
.kbody{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:12px 16px;min-width:0}.kt{font:600 17px/1.3 var(--lg-font-display)}
.kbar{display:flex;align-items:center;gap:10px}.bar6{flex:1;height:6px;border-radius:3px;background:var(--bp-track);overflow:hidden}.bar6 i{display:block;height:100%;background:var(--bp-primary);border-radius:3px}
.pillbtn{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;background:var(--bp-paper);border:1px solid var(--bp-line);font:600 15px var(--lg-font);color:var(--bp-tint-ink)}

/* ---- box page additions ---- */
.cheat summary{display:flex;align-items:center;gap:10px;min-height:44px;font:600 18px var(--lg-font-display);cursor:pointer;color:var(--bp-ink)}
.cheat .cs{margin-top:12px}.cheat h4{margin:0 0 6px;font:600 13px var(--lg-font);letter-spacing:.04em;text-transform:uppercase;color:var(--bp-ink-3)}
.cheat ol{margin:0;padding-left:22px}.cheat .cs.warn{padding:12px 16px;border-radius:var(--bp-r-inner);background:var(--bp-warn-soft)}
.cheat .neg{color:var(--bp-neg)}.cheat .pos{color:var(--bp-pos)}
video.video{border-radius:var(--bp-r-card);width:100%;background:#0b1020}

/* ---- teacher ---- */
.pick{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto}
.prow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:6px 12px;border-radius:var(--bp-r-inner);background:var(--bp-paper-2);flex-wrap:wrap}
.asg{display:flex;flex-direction:column;gap:6px;padding-bottom:12px;border-bottom:1px solid var(--bp-line)}
.card.attn{border-left:4px solid var(--bp-warn)}
@media(max-width:560px){.tbl table,.tbl tbody,.tbl tr,.tbl td{display:block}.tbl thead{display:none}}

.txt-in{width:100%;min-height:48px;border-radius:16px;border:1.5px solid var(--bp-field-line);background:var(--bp-field);padding:0 14px;color:var(--bp-ink)}

/* question cards stay opaque for legibility */
.q-card{background:var(--bp-glass-solid)}


/* ==== avatar customiser #/me + pixel sprites (phase 1 O1, js/mepage.js, js/avatar/*) ==== */
canvas.px-sprite,canvas.px-head,canvas.me-thumb{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.me-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:1000px){.me-grid{grid-template-columns:1fr}}
.me-stagecard{display:flex;flex-direction:column;gap:12px}
.me-stage{position:relative;height:440px;border-radius:var(--bp-r-inner);overflow:hidden;background:#A9D6FF}
@media(max-width:1000px){.me-stage{height:380px}}
@media(max-width:560px){.me-stage{height:320px}}
.me-bg{position:absolute;left:0;top:0;image-rendering:pixelated}
.me-hero{position:absolute;left:0;top:0;line-height:0}
.me-gl{margin:4px 0 0;font:600 13px/1.3 var(--lg-font);letter-spacing:.04em;text-transform:uppercase;color:var(--bp-ink-3)}
.me-clips{display:flex;flex-wrap:wrap;gap:8px}
.chipbtn{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--bp-line);background:var(--bp-paper-2);color:var(--bp-ink);font:500 15px var(--lg-font);cursor:pointer}
.chipbtn[aria-pressed="true"]{background:var(--bp-tint-soft);border-color:var(--bp-tint);color:var(--bp-tint-ink);font-weight:650}
.me-ward{display:flex;flex-direction:column;gap:16px}
.me-grid>*{min-width:0}
.me-tabs{display:flex;gap:2px;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.me-tabs::-webkit-scrollbar{display:none}
.me-tabs button{flex:none;padding:0 14px}
.me-bodies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.me-body{display:flex;align-items:center;justify-content:center;gap:10px;min-height:72px;padding:8px 10px;border-radius:var(--bp-r-inner);border:1.5px solid var(--bp-line);background:var(--bp-paper-2);color:var(--bp-ink);cursor:pointer;font:650 16px/1.2 var(--lg-font)}
.me-body .me-tv{min-height:0}
.me-body[aria-pressed="true"]{border-color:var(--bp-tint);background:var(--bp-tint-soft);color:var(--bp-tint-ink);box-shadow:0 0 0 1px var(--bp-tint)}
@media(max-width:420px){.me-body{flex-direction:column;gap:4px;font-size:15px}}
.me-hero .px-pet{position:absolute;left:0;top:0}
.me-sw.none{background:repeating-linear-gradient(135deg,var(--bp-paper-2) 0 6px,var(--bp-line) 6px 8px)}
.me-tabs button[aria-selected="true"]{background:var(--bp-paper);color:var(--bp-ink);font-weight:650;box-shadow:var(--bp-shadow-1)}
.me-panel{display:flex;flex-direction:column;gap:16px;min-height:200px}
.me-group{display:flex;flex-direction:column;gap:10px}
.me-sws{display:flex;flex-wrap:wrap;gap:12px}
.me-sw{position:relative;width:48px;height:48px;border-radius:50%;border:2px solid var(--bp-line-strong);background:var(--sw);cursor:pointer;display:grid;place-items:center;padding:0}
.me-sw[aria-pressed="true"]{outline:3px solid var(--bp-tint);outline-offset:3px}
.me-sw.locked svg{color:#fff;background:rgba(16,35,63,.72);border-radius:50%;padding:3px;width:22px;height:22px}
.me-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.me-tile{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;padding:10px 6px;border-radius:var(--bp-r-inner);border:1.5px solid var(--bp-line);background:var(--bp-paper-2);color:var(--bp-ink);cursor:pointer;font:500 14px/1.25 var(--lg-font);text-align:center}
.me-tile[aria-pressed="true"]{border-color:var(--bp-tint);background:var(--bp-tint-soft);box-shadow:0 0 0 1px var(--bp-tint)}
.me-tv{display:grid;place-items:end center;min-height:68px}
.me-tile.locked .me-tv{opacity:.55}
.me-lock{display:inline-flex;align-items:center;gap:4px;font:600 12px var(--lg-font);color:var(--bp-warn)}
.me-lock svg{width:14px;height:14px}
.me-actions{display:flex;flex-wrap:wrap;gap:10px}
.me-actions .btn.pri{margin-left:auto}
.me-status{margin:0;min-height:1.5em;font-size:14px}
@media(max-width:560px){.me-actions .btn{flex:1}.me-actions .btn.pri{margin-left:0}}
/* ==== end avatar customiser ==== */

/* box page with the tools drawer open on mid-width screens: stack the two columns so the questions keep room */
@media(min-width:1024px) and (max-width:1499px){body.tools-drawer .boxgrid{grid-template-columns:1fr}body.tools-drawer .boxgrid .side{position:static}body.tools-drawer .boxgrid .video,body.tools-drawer .boxgrid .novideo{max-width:560px}}
/* top bar: drop the gem chip when space is tight so it never overlaps the bell */
@media(max-width:1180px){.hud-strip .hud-gems{display:none}}
@media(max-width:820px){.tabnav .nav-i{font-size:11px;letter-spacing:-.01em}html[data-skin=pixel] .tabnav .nav-i{font-size:11px}}