/* The course app, new courses only: lesson frame, questions, Today, chapters, mock. Same language as the Marketplace. Effects per UI-AUDIT.md: glass on the bars, ripple-free, nothing moving in a lesson or a mock. */
body{background:var(--bg);color:var(--ink);font-family:var(--font-ui)}
a{color:var(--c-ui)}
:focus-visible{outline-color:var(--c-ui)}
h1,h2,h3{font-family:var(--font-ui);font-weight:700;letter-spacing:-.015em}
.tk-rl b,.tk-no,.pp-sheet h2,.pp-sheet .sum b,.sx-hero b,.sx-tile b,.sx-card>h2,.sx-h2,.sx-head h1,.lhead h1,.phead h1{font-family:var(--font-ui);font-weight:700;letter-spacing:-.015em}
.mk-ring text{font-family:var(--font-ui);font-weight:700}
.pp-b:not(.ghost):not(.danger){background:var(--c-ui);border-color:var(--c-ui);color:var(--c-on)}
.pp-b:not(.ghost):not(.danger):hover{background:var(--c-ui-deep);border-color:var(--c-ui-deep)}
.pp-logo i{background:var(--c-accent);color:#fff}
[data-theme=dark] .pp-logo i{background:var(--c-ui);color:var(--c-on)}
.pp-links .cnt{color:var(--c-on)}
.card{border:0;box-shadow:0 1px 2px rgba(28,36,48,.05);background:var(--panel)}
[data-theme=dark] .card{box-shadow:none;border:1px solid var(--line)}
.btn{border-radius:var(--r-btn)}

/* Today, plan, record */
.sx-hero{background:var(--c-tint);color:var(--c-ui-deep);border-radius:var(--r-card)}
.sx-hero small{color:var(--c-ui-deep);text-transform:none;letter-spacing:0;font-size:13px}.sx-hero b{color:var(--c-ui-deep)}.sx-hero span.s{color:var(--c-ui-deep)}
.sx-hero .sx-btn{background:var(--c-ui);color:var(--c-on);border-color:var(--c-ui);min-height:48px;font-size:15px;font-weight:600}
.sx-hero .sx-btn:hover{background:var(--c-ui-deep);border-color:var(--c-ui-deep)}
.sx-hero .sx-pill{background:var(--panel);color:var(--c-ui)}
.sx-hero svg.ring circle:first-of-type{stroke:color-mix(in srgb,var(--c-ui) 22%,transparent)}
.sx-hero svg.ring circle:not(:first-of-type){stroke:var(--c-ui)}
.sx-hero svg.ring text{fill:var(--c-ui-deep)}
.tk-resume,.mk-hero{background:var(--c-tint);color:var(--c-ui-deep);box-shadow:none;border-radius:var(--r-card)}
.tk-rl small,.mk-hero small.k{color:var(--c-ui-deep);text-transform:none;letter-spacing:0;font-size:13px}
.tk-rl span,.mk-hero .note,.mk-hero .formrow,.mk-sub{color:var(--c-ui-deep)}
.mk-hero h1,.mk-hero a{color:var(--c-ui-deep)}
.tk-resume .btn,.mk-hero .btn{background:var(--c-ui);color:var(--c-on);border-color:var(--c-ui)}
.tk-resume .btn:hover,.mk-hero .btn:hover{background:var(--c-ui-deep);border-color:var(--c-ui-deep)}
.mk-hero .btn.ghost{background:transparent;color:var(--c-ui-deep);border-color:var(--c-ui-deep)}
.mk-hero .btn.ghost:hover{background:var(--panel)}
.mk-facts li,.mk-hero .fixed{background:var(--panel);color:var(--ink)}
.mk-hero select{background:var(--panel);color:var(--ink);border-color:var(--line2)}
.tk-resume svg circle:first-of-type{stroke:color-mix(in srgb,var(--c-ui) 22%,transparent)}
.tk-resume svg circle:not(:first-of-type){stroke:var(--c-ui)}
.sx-tile,.sx-tile.t1,.sx-tile.t2,.sx-tile.t3,.sx-tile.t4,.sx-tile.t5,.sx-tile.t6{background:var(--panel);border:1px solid var(--line);color:var(--ink);box-shadow:0 1px 2px rgba(28,36,48,.05)}
.sx-tile .k,.sx-tile .d{color:var(--mute);text-transform:none;letter-spacing:0}.sx-tile .k{font-size:13px}
.sx-tile .ic{color:var(--c-ui)}
.sx-tile b{color:var(--ink)}
.sx-tile .bar i{background:var(--c-ui)}
.sx-card{border:1px solid var(--line)}
.sx-pill{text-transform:none;letter-spacing:0;font-size:12.5px}
.sx-bar{background:var(--line)}
input[type=date]{font:500 15px var(--font-ui);color:var(--ink);background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-btn);min-height:44px;padding:0 12px;accent-color:var(--c-ui)}
.eyebrow,.lhead .eyebrow,.phead .eyebrow,.sx-head .eyebrow{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--mute)}

/* night switch */
.xtheme{min-height:44px;padding:0 12px;border:1px solid var(--line2);border-radius:10px;background:var(--panel);color:var(--ink);font:500 13px var(--font-ui);cursor:pointer;white-space:nowrap;flex:none}
#morePop .xtheme{width:100%;margin-top:6px}

@media(max-width:600px){.pp-logo{font-size:0;margin-right:4px;flex:none}.pp-logo small{display:none}.pp-acct>button{max-width:72px;padding:0 8px}.xtheme{padding:0 8px}.xsw{margin:0 2px}}
/* phone tabs */
.xtabs{display:none}
@media(max-width:860px){
 .xtabs{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:color-mix(in srgb,var(--panel) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
 .xtabs a{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 2px;font:600 12.5px var(--font-ui);color:var(--mute);text-decoration:none}
 .xtabs a[aria-current]{color:var(--c-ui)}
 body{padding-bottom:64px}
}
@media(prefers-reduced-transparency:reduce),(prefers-reduced-motion:reduce){.xtabs{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--panel)}}
body:has(#view-lesson:not([hidden])) .xtabs,body:has(#view-lesson:not([hidden])) .pp-nav,body:has(#view-lesson:not([hidden])) .pp-foot,body:has(#view-lesson:not([hidden])) .pp-preview{display:none!important}
html:has(#view-lesson:not([hidden])){overflow:hidden}
body:has(#view-lesson:not([hidden])){padding-bottom:0;overflow:hidden;background:var(--page)}

/* ---------- lesson: three fixed zones. Only the paper scrolls; nothing moves the page ---------- */
#view-lesson{height:100dvh}
.lesson{height:100dvh;min-height:0;column-gap:0;max-width:1500px;width:100%;margin:0 auto;padding:6px 14px 10px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:4px;overflow:hidden}
.rail{display:block;position:relative;top:auto;max-height:none;overflow:visible;align-self:auto;min-height:0;padding:0;margin:0;background:none;border:0;border-radius:0;box-shadow:none;z-index:30}
.rail .rtop{display:flex;align-items:center;gap:8px;justify-content:space-between}
.rail .rbody{display:none}
.rail.open .rbody{display:block;position:absolute;left:0;top:calc(100% + 4px);width:min(380px,calc(100vw - 16px));max-height:70dvh;overflow:auto;background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:8px;box-shadow:0 12px 32px rgba(28,36,48,.2)}
.rail .rtoggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;background:none;border:0;color:var(--ink2);font:500 13.5px var(--font-ui);cursor:pointer;max-width:60vw}
.rail #railCur{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lmain{min-height:0;height:100%;gap:6px 14px;padding:0;display:grid;grid-template-columns:minmax(0,1fr) 372px;
 grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto;
 grid-template-areas:"head head" "segs segs" "meta meta" "stage panel" "stage trans" "dock trans" "dock foot"}
.lhead{position:relative;grid-area:head;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-width:0}
.lhead .eyebrow,.lhead .steps{display:none}
.lhead h1{font-size:20px;line-height:1.2;margin:0;flex:1 1 200px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xmodes-row{margin:0;flex:0 1 auto;gap:4px 10px}
.xmodes{border:0;border-radius:12px;padding:3px;gap:2px;background:color-mix(in srgb,var(--c-ui) 10%,var(--panel))}
.xmodes button{min-height:38px;padding:0 13px;border-radius:9px;font:600 14px var(--font-ui);color:var(--ink2)}
.xmodes button[aria-pressed=true]{background:var(--panel);color:var(--c-ui);box-shadow:0 1px 2px rgba(28,36,48,.14)}
[data-theme=dark] .xmodes button[aria-pressed=true]{background:var(--c-ui);color:var(--c-on)}
.xhow{flex:1 1 100%;font-size:13px}
.segs{grid-area:segs;gap:4px}.segs i{height:4px;background:color-mix(in srgb,var(--c-ui) 18%,transparent)}.segs i b{background:var(--c-ui)}
.meta2{grid-area:meta;font-size:12.5px;color:var(--mute)}
.stage{grid-area:stage;min-height:0;min-width:0;display:flex}
.predict{grid-area:panel}
.xpanel{grid-area:panel;min-width:0;overflow:auto;background:var(--panel);border-radius:var(--r-card);border:2px solid transparent;max-height:calc(100dvh - 320px);align-self:start;width:100%}
.caption{display:none}
.trans{grid-area:trans;min-height:96px;overflow:auto;padding:14px 16px;font-size:15px;line-height:1.5}
.trans h3{font-size:13px;font-weight:600;color:var(--mute);margin:0 0 8px;letter-spacing:0}
.trans p{color:var(--mute);margin:0 0 8px;padding:2px 8px;border-radius:7px}
.trans p.now{color:var(--ink);font-weight:500;background:var(--c-soft)}
[data-theme=dark] .trans p.now{background:var(--c-tint)}
.trans p.xjump{background:var(--warn-t);color:var(--ink)}
.dock{grid-area:dock;align-self:end;border:0;border-radius:var(--r-card);background:var(--panel);box-shadow:0 1px 2px rgba(28,36,48,.06);padding:8px 10px}
[data-theme=dark] .dock{border:1px solid var(--line);box-shadow:none}
.lb{border:0;border-radius:var(--r-btn);background:var(--c-soft);color:var(--c-ui);font:600 15px var(--font-ui)}
[data-theme=dark] .lb{background:var(--c-tint);color:var(--c-ui-deep)}
.lb:hover{background:var(--c-tint)}
.lb.primary,.lb.play{background:var(--c-ui);color:var(--c-on)}
.lb.primary:hover,.lb.play:hover{background:var(--c-ui-deep)}
.dock .scrub input{accent-color:var(--c-ui)}
.foot{grid-area:foot;align-self:end;display:block;min-width:0}
.ldisc{font-size:11.5px;line-height:1.35;color:var(--mute);margin:0;padding:0 4px}
.mocknote,.voice-live{font-size:12px;color:var(--mute);margin:0}
.tapnote{grid-area:meta;font-size:13px;background:var(--warn-t);color:var(--warn);padding:6px 10px;border-radius:9px;font-weight:600;z-index:6}
.rmnote{display:none}
body.x-read .board{cursor:pointer}
body.x-testing .lmain{display:block;max-width:600px;margin:12px auto;overflow:auto;height:100%}
body.x-testing .trans,body.x-testing .foot{display:none}
body.x-testing .xpanel{max-height:none}
.xjump-note{display:none}

/* questions: beside the board on a wide screen, in place of the controls on a phone */
.xpanel{display:grid;gap:10px;padding:16px;min-width:0;overflow:auto;background:var(--panel);border-radius:var(--r-card);border:2px solid transparent;flex:none}
.xpanel.ask{border-color:var(--c-ui)}
.xpanel p{margin:0}
.xeye{font:600 12.5px var(--font-ui);color:var(--c-ui);display:flex;justify-content:space-between;gap:8px;align-items:center}
.stem{font:600 17px/1.4 var(--font-ui);color:var(--ink)}
.xpanel h3{font-size:16px;font-weight:700;line-height:1.3}
.options{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.opt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 11px;align-items:start;width:100%;text-align:left;min-height:52px;padding:12px 13px;border:1.5px solid var(--line2);border-radius:13px;background:var(--panel);font:500 16px/1.4 var(--font-ui);color:var(--ink);cursor:pointer}
@media(hover:hover){.opt:hover:not([disabled]){border-color:var(--c-ui);background:var(--c-soft)}
[data-theme=dark] .opt:hover:not([disabled]){background:var(--c-tint)}}
.rd{width:24px;height:24px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;font:700 12px var(--font-ui);color:var(--mute);flex:none}
.rd::before{content:attr(data-l)}
.opt.right{border-color:var(--good);background:var(--good-t)}
.opt.right .rd{background:var(--good);border-color:var(--good);color:var(--panel)}
.opt.right .rd::before{content:"\2713"}
.opt.wrongpick{border-color:var(--bad);background:var(--bad-t)}
.opt.wrongpick .rd{background:var(--bad);border-color:var(--bad);color:var(--panel)}
.opt.wrongpick .rd::before{content:"\2715"}
.opt[disabled]{cursor:default}
.opt .why{grid-column:2;font-size:14px;font-weight:400;line-height:1.45;color:var(--ink2)}
.tag{display:block;font-size:12px;font-weight:700}
.opt.right .tag{color:var(--good)}.opt.wrongpick .tag{color:var(--bad)}
.fb{border-radius:12px;padding:12px 14px;background:var(--bg)}
.fb.ok{background:var(--good-t)}.fb.no{background:var(--bad-t)}
.fb h3{font-size:15px;margin-bottom:3px}
.fb.ok h3{color:var(--good)}.fb.no h3{color:var(--bad)}
.fb p{font-size:15px;line-height:1.45;color:var(--ink);margin-top:3px}
.xrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.xlab{font:600 14px var(--font-ui);color:var(--c-ui)}
.xans{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.xans label{font-weight:600;font-size:14px;width:100%}
.xnum{font:600 18px var(--font-ui);min-height:48px;width:140px;max-width:100%;padding:0 12px;border:1.5px solid var(--line2);border-radius:12px;background:var(--panel);color:var(--ink);font-variant-numeric:tabular-nums}
.xnum:focus-visible{border-color:var(--c-ui)}
.xbad{font-size:14px;color:var(--bad)}
.xstep{display:grid;gap:6px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px}
.xstep.now{border-color:var(--c-ui)}.xstep.bad{border-color:var(--bad)}
.xstep.lock{color:var(--mute);border-style:dashed}
.xstep.ok{background:var(--good-t);border-color:transparent}
.xstep.ok .sh{font-weight:600;font-variant-numeric:tabular-nums}
.xlab2{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;justify-content:space-between;font-weight:600;font-size:14.5px}
.pill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:99px;font:700 11.5px var(--font-ui);background:var(--good);color:var(--panel)}
.pill.no{background:var(--bad)}
.hide-q{all:unset;cursor:pointer;min-height:32px;min-width:44px;display:none;align-items:center;justify-content:flex-end;font:600 13px var(--font-ui);color:var(--c-ui);text-decoration:underline;text-underline-offset:3px}
.hide-q:focus-visible{outline:3px solid var(--c-ui);outline-offset:2px}
.cap.xjump{background:var(--warn-t);color:var(--ink);border-left:4px solid var(--c-ui)}
.xpanel.mini{max-height:44px;overflow:hidden;padding:8px 14px}
.xpanel .hide-q{justify-self:end}
.qcard .stem,.qwrap .stem{font-family:var(--font-ui)}

/* the focus ring is for keyboard use: a check opening must not make option A look picked */
html:not(.x-kb) .opt:focus,html:not(.x-kb) .opt:focus-visible{outline:none;box-shadow:none}
/* a mock of 75 or 150 questions: the row of segments is one bar and never pushes the page wider */
.qsegs{display:flex;min-width:0;overflow:hidden}.qsegs i{flex:1 1 0;min-width:0}
.qsegs:has(i:nth-child(41)){gap:0}.qsegs:has(i:nth-child(41)) i{border-radius:0}
.exam,.exam>div,.qcard,.navg{min-width:0;max-width:100%}
.qtop{flex-wrap:wrap;gap:6px 10px}.qtop h1{min-width:0;flex:1 1 200px}
.qtop .badge,.rv .rh .badge{white-space:normal;max-width:100%;height:auto;min-height:22px}.rv .rh{flex-wrap:wrap}.rv{min-width:0;overflow-wrap:anywhere}
/* what you missed: the question first, its lesson under it */
.mi summary{grid-template-columns:minmax(0,1fr);gap:6px}
.mi-q{min-width:0}
.mi summary .mi-c{justify-self:start;white-space:normal;max-width:100%}
/* ---------- phone ---------- */
@media(max-width:860px){
 .lesson{padding:2px 6px calc(6px + env(safe-area-inset-bottom));gap:2px}
 .lmain{display:flex;flex-direction:column;gap:4px}
 .lhead{flex-wrap:nowrap}.lhead h1{font-size:15.5px;flex:1 1 0}
 .lhead:has(.xgloss){flex-wrap:wrap}.lhead:has(.xgloss) h1{flex:1 1 100%}
 .xpanel{max-height:62dvh}
 .xmodes-row{flex:none}.xmodes button{min-height:44px;padding:0 9px;font-size:13px}
 .xhow,.xauto{display:none}
 body.x-listen .xauto{display:inline-flex}
 .meta2 #upnext{display:none}
 .stage{flex:1 1 auto;min-height:0}
 body.has-panel .stage{min-height:30dvh;flex:1 1 30dvh}
 .trans{display:none}
 .caption{display:block;order:2;font:500 15.5px/1.4 var(--font-ui);padding:2px 8px;color:var(--ink);min-height:calc(1.4em*2 + 4px);flex:none}
 body.has-panel .caption:not(.xjump){display:none}
 body.has-panel .caption.xjump{min-height:0}
 .xpanel{order:3;flex:none;overscroll-behavior:contain;padding:14px}
 .hide-q{display:inline-flex}
 .dock{order:4;flex:none;flex-wrap:wrap;gap:6px;padding:4px 8px 6px;border-radius:16px}
 body.has-panel .dock{display:none}
 body.has-panel:has(#tapnote:not([hidden])) .dock{display:flex}
 .dock .scrub{flex:1 1 100%;order:-1;height:30px}.dock .scrub input{height:30px}
 .dock .lb.primary{flex:1}
 #speed{display:none}
 #morePop #xSpeedL{display:block;width:100%;margin:0 0 6px}
 body.x-read:not(.x-listen) #morePop #xSpeedL{display:none}
 .foot{order:5;flex:none}
 body.has-panel .foot{display:none}
 .pop{right:-4px}
}
@media(max-height:560px){.lesson,#view-lesson{height:auto;min-height:100dvh;overflow:visible}body:has(#view-lesson:not([hidden])){overflow:auto}.stage{min-height:220px}.lmain{height:auto}}
@media(prefers-reduced-motion:reduce){.sheet.turn{animation:none}}
.opt .rd{color:var(--ink2);background:none}
.opt .rd::before{background:none;width:auto;height:auto;border-radius:0}
.opt.right .rd{background:var(--good);color:var(--panel)}.opt.wrongpick .rd{background:var(--bad);color:var(--panel)}

/* ---------- course pages (owner 2026-10-31, qa/course-pages/PLAN.md): Today = what to do now, Chapters = the map. One accent, chapter icons ---------- */
.xsr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.xic{flex:none}
.xring .trk{stroke:color-mix(in srgb,var(--c-ui) 20%,transparent)}
.xring .arc{stroke:var(--c-ui);stroke-dashoffset:var(--o);animation:xRing .7s cubic-bezier(.2,.7,.2,1) both}
.xring text{fill:var(--c-ui-deep);font:700 18px var(--font-ui)}.xring text.s{font:600 11px var(--font-ui);fill:var(--c-ui-deep);opacity:.8}
@keyframes xRing{from{stroke-dashoffset:var(--c)}}
.xbar{display:block;height:6px;border-radius:99px;background:var(--line);overflow:hidden;flex:1 1 auto;min-width:0}
.xbar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--c-ui);animation:xBar .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes xBar{from{width:0}}
@media(prefers-reduced-motion:reduce){.xring .arc,.xbar i{animation:none}}

/* Today */
.xt{display:flex;flex-direction:column;gap:14px}
.xt>*{margin-top:0;margin-bottom:0}
.xt-greet{margin:0;font:400 17px/1.35 var(--font-ui);letter-spacing:0;color:var(--mute)}.xt-greet b{font-weight:600;color:var(--ink)}
.xt-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 16px;align-items:start;padding:18px;border-radius:var(--r-card);background:var(--c-tint);color:var(--c-ui-deep)}
.xt-hero .xt-art{width:64px;height:64px;border-radius:16px;background:var(--panel);color:var(--c-ui);display:grid;place-items:center;box-shadow:0 1px 2px rgba(28,36,48,.06)}
.xt-hero .xt-art svg{width:40px;height:40px}
.xt-eb{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:600 14px/1.3 var(--font-ui)}
.xt-k{display:inline-block;padding:2px 7px;border-radius:7px;background:var(--c-ui);color:var(--c-on);font:700 12.5px/1.4 var(--font-ui)}
.xt-hero h2{margin:6px 0 0;font:700 clamp(20px,1.2vw + 15px,26px)/1.2 var(--font-ui);color:var(--c-ui-deep)}
.xt-segs{display:flex;gap:4px;margin:12px 0 0;max-width:420px}.xt-segs i{flex:1;height:6px;border-radius:99px;background:color-mix(in srgb,var(--c-ui) 25%,transparent)}.xt-segs i.on{background:var(--c-ui)}
.xt-meta{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:4px 16px;font:500 14.5px var(--font-ui)}.xt-meta span{display:inline-flex;align-items:center;gap:6px}.xt-meta .xic{width:16px;height:16px}
.xt-go{grid-column:1/-1;display:flex;align-items:center;gap:14px}
.xt-btn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:var(--r-btn);background:var(--c-ui);color:var(--c-on);font:600 17px var(--font-ui);text-decoration:none;transition:background-color var(--dur-ui),transform var(--dur-ui)}
.xt-btn:hover{background:var(--c-ui-deep);color:var(--c-on)}.xt-btn .xic{width:18px;height:18px}
.xt-cring{display:flex;align-items:center;gap:8px;font:600 12px/1.2 var(--font-ui);color:var(--c-ui-deep)}
@media(min-width:760px){.xt-hero{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:22px 24px}.xt-go{grid-column:auto;flex-direction:row-reverse}.xt-btn{flex:none;min-width:180px}}
.xt-acts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.xt-act{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;height:100%;min-height:44px;padding:14px;border-radius:16px;background:var(--panel);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:transform var(--dur-ui),box-shadow var(--dur-ui)}
.xt-act:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(28,36,48,.25);color:var(--ink)}
.xt-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--c-soft);color:var(--c-ui);flex:none}
.xt-lb{font:600 15.5px/1.25 var(--font-ui)}.xt-sb{font:400 14px/1.35 var(--font-ui);color:var(--mute)}.xt-sb b{color:var(--ink);font-weight:700}
.xt-badge{position:absolute;top:10px;right:10px;min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:var(--c-ui);color:var(--c-on);font:700 12.5px/24px var(--font-ui);text-align:center}
@media(max-width:420px){.xt-acts{gap:8px}.xt-act{padding:12px 10px}.xt-ic{width:36px;height:36px}.xt-lb{font-size:14.5px}.xt-sb{font-size:13px}}
.xt-plan{padding:18px}
.xt-ph{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}.xt-ph h2{margin:0;font:700 20px var(--font-ui)}
.xt-ph .sx-seg{margin-left:auto}
.xt-exchip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:99px;background:var(--c-soft);color:var(--c-ui-deep);font:600 13.5px var(--font-ui);text-decoration:none}.xt-exchip .xic{width:16px;height:16px}
.xt-tbar{display:flex;gap:3px;height:8px;margin:12px 0 4px}.xt-tbar i{min-width:4px;border-radius:99px;background:var(--c-ui)}.xt-tbar i.p,.xt-tbar i.k{background:color-mix(in srgb,var(--c-ui) 40%,transparent)}
.xt-rows{list-style:none;margin:6px 0 0;padding:0}
.xt-rows li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;border-top:1px solid var(--line)}.xt-rows li:first-child{border-top:0}.xt-rows li[hidden]{display:none}
.xt-ti{width:40px;height:40px;border-radius:10px;background:var(--c-soft);color:var(--c-ui);display:grid;place-items:center}.xt-ti .xic{width:18px;height:18px}
.xt-rows .tt{display:flex;align-items:center;min-height:52px;min-width:0;color:var(--ink);text-decoration:none;font:500 15px/1.3 var(--font-ui);overflow:hidden}
.xt-rows .tt:hover{color:var(--c-ui)}
.xt-pfx{color:var(--mute);margin-right:4px;flex:none}
.xt-rows .mn{font:500 14px var(--font-ui);color:var(--mute);white-space:nowrap}
.xt-more{margin-top:6px;min-height:44px;padding:0 14px;border:1px solid var(--line2);border-radius:var(--r-btn);background:var(--panel);color:var(--c-ui);font:600 14px var(--font-ui);cursor:pointer}
.xt-up{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line);font:500 14.5px/1.4 var(--font-ui)}
.xt .sx-fine{margin:0}
/* the Exam plan's date, first */
.xt-exam{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 16px;margin-bottom:16px}
.xt-exam .xt-ex-t label{font:500 15px var(--font-ui)}.xt-opt{color:var(--mute);font-weight:400;font-size:13.5px}.xt-exam .sx-sub{margin:4px 0 0}
@media(max-width:560px){.xt-exam{grid-template-columns:auto minmax(0,1fr)}.xt-exam input{grid-column:1/-1}}
.xt-where{list-style:none;margin:10px 0 6px;padding:0;display:grid;gap:6px;max-width:520px}
.xt-where li{display:grid;grid-template-columns:minmax(0,1fr) auto 90px;gap:10px;align-items:center;font-size:13.5px}.xt-rn{color:var(--mute);white-space:nowrap}

/* Chapters */
.xt-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:4px 0 14px}
.xt-head h1{margin:0;font:var(--pp-h1-app)}
.xt-info{width:44px;height:44px;border-radius:50%;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--mute)}
.xt-info span[aria-hidden]{width:24px;height:24px;border-radius:50%;border:1.6px solid currentColor;display:grid;place-items:center;font:700 13px/1 Georgia,serif;font-style:italic}
.xt-info[aria-expanded=true]{color:var(--c-ui)}
.xt-pop{margin:-4px 0 14px;padding:12px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--ink2)}.xt-pop p{margin:0 0 8px}.xt-pop p:last-child{margin:0}
.xt-art{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--c-tint);color:var(--c-ui-deep)}
.xt-art .xchi{width:32px;height:32px}
@media(min-width:861px){.xt-art{width:auto;height:92px;border-radius:0}.xt-art .xchi{width:48px;height:48px}}
/* Error log: the practice modes */
.xt-modes{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 14px}
.xt-chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border-radius:99px;background:var(--panel);border:1px solid var(--line2);color:var(--ink);font:600 14px var(--font-ui);text-decoration:none}
.xt-chip .xic{width:17px;height:17px;color:var(--c-ui)}.xt-chip:hover{border-color:var(--c-ui);color:var(--c-ui)}
.xt-chip[aria-disabled=true]{opacity:.6}
/* phone tabs: an icon over each name, the place you are marked by a line on top, the misses due on the Error log */
@media(max-width:860px){
 .xtabs a{position:relative;flex-direction:column;gap:3px;min-height:60px;font-size:12px}
 .xtabs a .xic{width:24px;height:24px}
 .xtabs a[aria-current]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--c-ui)}
 .xtb{position:absolute;top:6px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--c-ui);color:var(--c-on);font:700 11px/18px var(--font-ui);text-align:center}
 .xtb[hidden]{display:none}
 body{padding-bottom:72px}
}
@media(min-width:861px){.xtb{display:none}}
@media(prefers-reduced-motion:reduce){.xt-act,.xt-btn{transition:none}.xt-act:hover{transform:none}}
/* the top bar at phone width (owner QA 2026-10-31: "Menu" ran over the account button at 375): every item keeps its own room; the course name gives way */
.xtheme{display:inline-flex;align-items:center;gap:6px}.xtheme .xic{width:18px;height:18px}
@media(max-width:600px){
 .pp-nav-in{gap:0 4px}
 .xsw{flex:1 1 auto;min-width:0}
 .xtheme{width:44px;padding:0;justify-content:center}.xtheme .xtl{display:none}
 .pp-acct{flex:none}
 .pp-burger{flex:none;min-width:44px;padding:0 8px}.pp-burger span{display:none}
}
/* breadcrumbs on one line: the course's name gives way, the page's own name stays whole */
@media(max-width:860px){
 .xcrumbs{flex-wrap:nowrap;white-space:nowrap;min-width:0}
 .xcrumbs>*{flex:none}
 .xcrumbs>a:nth-of-type(2){flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;display:block;line-height:44px}
}
/* the link keeps its 52 px tap height; the title inside it is two lines at most, cut cleanly (a third line used to show under the
   ellipsis, in the link's padding) (QA 2026-11-01 L2) */
.xt-rows .tt{padding:4px 0;box-sizing:border-box}
.xt-rows .tt .tl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0}
.xt-ph .sx-seg label{min-height:44px}
/* a phone has no hover: the option under a finger (a tap on Review misses lands the next question there) must not stay tinted as if
   picked, nor a tapped card lifted. The pages' own option hover rules are wrapped the same way (PLAYER_PATCHES) (QA 2026-11-01) */
@media(hover:none){.xt-act:hover{transform:none;box-shadow:none}}
/* no ring before the keyboard is used: a page that puts focus on a button as it opens (Test out, Skip this lesson) shows none until Tab */
html:not(.x-kb) :focus-visible{outline:none}
html:not(.x-kb) input:focus-visible+label{outline:none}
/* tap targets of 44 px at least: the logo, the footer's Terms, the mock history's menu, Flag, the two small disclosures, the plan's segments */
.pp-logo{min-width:44px;min-height:44px}
.pp-foot a{min-width:44px;justify-content:center}
.mk-more{min-width:44px;min-height:44px}
.flagb{min-height:44px}
.cp-units>summary,.el-how summary,.sx-seg label{min-height:44px}
/* Chapters (owner 2026-11-01): the shared cards with this course's icon and the one blue; the (i) note sits beside the title */
.ov-head.xt-head .eyebrow{flex-basis:100%}
.tk-act .btn{min-height:44px}
.tk-no{opacity:1;color:var(--c-ui-deep)}
.tk-art .xchi,.tk-art>svg{width:64px;height:64px}
.mocknote:empty{display:none}