/* course.css - the course pages (/en/learn/<course>/) and My learning (/en/learn/). Loaded after brainlag.css and
   learn.css: the cards, covers and character art come from the Courses page (.crs, .crs-cov, .crs-art in
   brainlag.css), the unit path from Learn (.ln-lessons.is-path in learn.css). Subject colour: --c base, --ci ink,
   --ct tint, from the role tokens, so light and dark follow the theme. No gradients, no pills. */
.cp,.my{--c:var(--blue);--ci:var(--blue-ink);--ct:var(--blue-tint);padding-top:22px;padding-bottom:40px}
.cp[data-s="science"],.my-c[data-s="science"]{--c:var(--study);--ci:var(--study-ink);--ct:var(--study-tint)}
.cp[data-s="cs"],.my-c[data-s="cs"]{--c:var(--play);--ci:var(--play-ink);--ct:var(--play-tint)}
.cp[data-s="music"],.my-c[data-s="music"]{--c:var(--music);--ci:var(--music-ink);--ct:var(--music-tint)}   /* owner, 10 Oct: music courses in the site's music pink, not cream */
[data-s="chess"],.my-c[data-s="chess"]{--c:var(--blue);--ci:var(--blue-ink);--ct:var(--blue-tint)}   /* chess: the brand blue (palette, not a new colour) */
.cp [hidden],.my [hidden]{display:none!important}
.cp-crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:14.5px;color:var(--ink-3);margin:0 0 14px}
.cp-crumb a{color:var(--study-ink);font-weight:700}
.cp-hidden{margin:0 0 14px;padding:10px 14px;border:2px dashed var(--rule-2);border-radius:12px;color:var(--ink-2);font-size:15px}

/* the hero: the course's own cover, title, promise, facts and the one button */
.cp-hero.crs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:8px 28px;padding:10px;align-items:center}
.cp-hero-b{padding:12px 12px 12px 0}
.cp-hero h1{margin:0 0 8px;font-size:clamp(28px,4vw,40px)}
.cp-promise{font-size:18.5px;line-height:1.5;color:var(--ink-2);margin:0;max-width:56ch}
.cp-boards{margin:8px 0 0;color:var(--ink-3);font-size:14.5px}
.cp-facts{margin:14px 0 0;color:var(--ink-2);font-size:15.5px}   /* one fact line (owner, 8 Oct): lessons and how many are free */
.cp-facts b{font-weight:700;color:var(--ink)}
.cp-cta{margin:20px 0 0}
.cp-go{display:inline-grid;grid-template-columns:minmax(0,auto) 22px;grid-template-rows:auto auto;column-gap:16px;row-gap:2px;align-items:center;background:var(--study-btn);color:var(--on-study-btn);border-radius:14px;padding:12px 20px 13px;box-shadow:none;
  transition:transform .09s cubic-bezier(.34,1.56,.64,1),box-shadow .09s cubic-bezier(.22,1,.36,1),background-color .15s cubic-bezier(.22,1,.36,1);max-width:100%}
.cp-go span{grid-column:1;font-weight:700;font-size:17px;line-height:1.2}
.cp-go .cp-go-ic{grid-column:2;grid-row:1 / span 2;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.cp-go small{grid-column:1;font-size:14px;line-height:1.3;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-go:hover{background:var(--study-btn-hover)}
.cp-go:active{transform:scale(.98);background:var(--study-btn-press);box-shadow:0 0 0 var(--study-btn-lip);transition-duration:0s}
@media (max-width:760px){
  .cp-hero.crs{grid-template-columns:1fr;padding:8px}
  .cp-hero-b{padding:4px 8px 10px}
  .cp-go{display:grid;grid-template-columns:minmax(0,1fr) 22px}
}

/* the filters: board, tier, route (the Courses page segmented control, as buttons) */
.cp-filters{display:flex;flex-wrap:wrap;gap:14px 28px;margin:26px 0 0}
.cp-fl{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:100%}
.cp-fl-l{font-size:14px;font-weight:700;color:var(--ink-3)}
.cp-fl .cs-lvnav{margin:0}
.cs-lvnav button{flex:none;border:0;background:none;cursor:pointer;padding:9px 16px;border-radius:10px;color:var(--ink-2);font:700 15px/1.2 var(--f-body);transition:background-color .15s cubic-bezier(.22,1,.36,1),color .15s cubic-bezier(.22,1,.36,1)}
.cs-lvnav button:hover{color:var(--ink)}
.cs-lvnav button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.cs-lvnav button:focus-visible{outline:3px solid var(--study-ink);outline-offset:1px}
@media (max-width:600px){.cp-fl{width:100%}.cs-lvnav button{flex:1 0 auto;padding:9px 10px}}

/* the course path: topic areas, each a header with its vignette, then its units on the Learn path */
.cp-path > h2{margin:40px 0 4px}
.cp-area{margin:26px 0 0;scroll-margin-top:84px}
.cp-ah{display:flex;align-items:center;gap:16px;padding:0;margin:0 0 14px}   /* no rule under it: space separates */
.cp-ah h3{margin:0;font:600 22px/1.2 var(--f-display)}
.cp-ap{margin:4px 0 0;color:var(--ink-3);font-size:14.5px}
.cp-vig{position:relative;flex:none;width:122px;height:80px;border-radius:14px;background:var(--ct);overflow:hidden}
/* the character stands on the tile, feet inside it; the topic prop sits on the tile's vertical middle */
.cp-vig-nd{position:absolute;left:0;bottom:3px;width:72px;height:auto}
.cp-vig-p.crs-art{position:absolute;right:8px;top:50%;width:44px;height:44px;margin-top:-22px;max-width:none}
/* a pointing pose: the prop sits on the line of the finger, a clear gap beyond its tip (finger at x 64, y 53 here) */
.cp-vig[data-pose="gcse-maths"] .cp-vig-p.crs-art{left:68px;right:auto;top:33px;margin-top:0;width:40px;height:40px}
.cp-units{margin-top:10px}
.cp-units li{position:relative}
.cp-units .t{font:600 18.5px/1.25 var(--f-display)}
.cp-m{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--ink-3);font-size:14px;margin-top:2px}
.cp-m > span{display:inline-flex;align-items:center;gap:4px}
.cp-m svg,.cp-mk svg{width:15px;height:15px;fill:none;stroke:var(--ci);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cp-m .cp-tag{color:var(--ink-3);font-weight:inherit}   /* a text tag with an icon, like Free and Plus (no outlined pill) */
.cp-spec{display:flex;flex-wrap:wrap;gap:2px 14px;color:var(--ink-3);font-size:13.5px;line-height:1.4;margin-top:2px}
.cp-spec > *{min-width:0}   /* a long topic list wraps in its line, never widens the page (LRN-06) */
.cp-spec b{color:var(--ink-2);font-weight:700}
.cp-pg{display:block;height:6px;border-radius:3px;background:var(--sunk);overflow:hidden;margin-top:6px;max-width:260px}
.cp-pg i{display:block;height:100%;background:var(--gold);border-radius:3px}
.cp-note{display:inline-block;margin:-12px 0 12px 76px;font-size:14px;font-weight:700;color:var(--study-ink);position:relative;z-index:1}
.cp-units li:not(:last-child) .ln-seg{bottom:-34px}
.cp-empty{position:relative;margin:20px 0 0;padding:22px 22px 22px 130px;min-height:110px;background:var(--sunk);border-radius:var(--r2);overflow:hidden;color:var(--ink-2)}
.cp-empty p{margin:0}
.cp-peek{position:absolute;left:18px;bottom:-34px;width:96px;height:auto}

/* mock papers and topic tests */
.cp-papers.crs{display:grid;grid-template-columns:170px minmax(0,1fr);gap:0 24px;margin-top:48px;padding:10px;align-items:stretch}
/* the art tile: the thumbnails' own ground (subject tint, doodle repeat, paper grain, floor band; brand/mascot/
   course-thumbs.cjs writes tile-<subject>-<theme>.svg), not a flat block of colour (owner, 8 Oct); the character
   stands on the floor band */
.cp-papers-art{position:relative;background:var(--ct) center bottom / cover no-repeat;border-radius:12px;min-height:170px;overflow:hidden}
.cp-papers[data-s="maths"] .cp-papers-art{background-image:url(/assets/img/courses/tile-maths-light.svg?v=1)}
:root[data-theme="dark"] .cp-papers[data-s="maths"] .cp-papers-art{background-image:url(/assets/img/courses/tile-maths-dark.svg?v=1)}
.cp-papers[data-s="science"] .cp-papers-art{background-image:url(/assets/img/courses/tile-science-light.svg?v=1)}
:root[data-theme="dark"] .cp-papers[data-s="science"] .cp-papers-art{background-image:url(/assets/img/courses/tile-science-dark.svg?v=1)}
.cp-papers[data-s="cs"] .cp-papers-art{background-image:url(/assets/img/courses/tile-cs-light.svg?v=1)}
:root[data-theme="dark"] .cp-papers[data-s="cs"] .cp-papers-art{background-image:url(/assets/img/courses/tile-cs-dark.svg?v=1)}
.cp-papers[data-s="music"] .cp-papers-art{background-image:url(/assets/img/courses/tile-music-light.svg?v=3)}
:root[data-theme="dark"] .cp-papers[data-s="music"] .cp-papers-art{background-image:url(/assets/img/courses/tile-music-dark.svg?v=3)}
.cp-exam{position:absolute;left:24px;bottom:4px;width:120px;height:auto}
.cp-papers-b{padding:12px 12px 12px 0}
.cp-papers h2{margin:0 0 8px}
.cp-papers p{color:var(--ink-2);margin:0;line-height:1.55;max-width:64ch}
.cp-mocks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.cp-mocks a{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;padding:10px 14px;border-radius:12px;background:var(--ct);color:var(--ink)}
.cp-mocks a:hover b{color:var(--ci)}
.cp-mocks span{color:var(--ink-3);font-size:14px}
.cp-mk{margin-top:12px!important;font-size:14px;color:var(--ink-3)!important}
.cp-mk span{display:inline-flex;align-items:center;gap:5px}
@media (max-width:640px){.cp-papers.crs{grid-template-columns:1fr}.cp-papers-art{min-height:130px}.cp-exam{width:104px;left:16px}.cp-papers-b{padding:14px 8px 8px}}

/* revise alongside, FAQ */
.cp-more h2,.cp-faq h2{margin:48px 0 12px}
.cp-more-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px}
@media (max-width:760px){.cp-more-g{grid-template-columns:minmax(0,1fr)}}
.cp-more-g > div{min-width:0}   /* a long link wraps inside its column, never widens the page (195 px, 200% zoom: LRN-06) */
.cp-more h3{font:600 18px/1.25 var(--f-display);margin:0 0 6px}
.cp-links{list-style:none;margin:0;padding:0}
.cp-links a{display:flex;align-items:center;min-height:44px;min-width:0;padding:4px 2px;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.cp-more-g > div:only-child{grid-column:1 / -1}
.cp-tools{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));margin-top:10px}   /* the site's tool cards (.rows a.row) */
.cp-links a:hover{color:var(--study-ink)}
.cp-faq details{border-bottom:2px solid var(--rule);padding:4px 0}
.cp-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:12px 2px;font:600 18px/1.3 var(--f-display)}
.cp-faq summary::-webkit-details-marker{display:none}
.cp-faq summary::after{content:'+';flex:none;font:700 22px/1 var(--f-body);color:var(--study-ink);transition:transform .2s cubic-bezier(.22,1,.36,1)}
.cp-faq details[open] summary::after{transform:rotate(45deg)}
.cp-faq details p{margin:0 0 24px;color:var(--ink-2);line-height:1.6;max-width:70ch}

/* My learning (the Learn hub) */
.my h1{margin:0 0 8px}
.my .ln-lead{margin:0 0 18px}
.my-continue.crs{display:grid;grid-template-columns:184px minmax(0,1fr);gap:0 24px;padding:14px;align-items:center}
/* the art: the unit's module tile (the course page's .cp-vig, whole, at 1.5x) or the course cover; nothing cropped */
.my-continue .my-c-art{display:grid;place-items:center;min-height:120px}
.my-continue .my-c-art .my-vig{display:block}
.my-continue .my-c-art[data-kind="tile"] .cp-vig{display:block;transform:scale(1.5);transform-origin:50% 50%;margin:20px 30px}
.my-continue .my-c-art[data-kind="cover"] .crs-cov{display:block;width:184px;border-radius:12px;overflow:hidden}
.my-continue .my-c-art[data-kind="cover"] .crs-th{width:100%;height:auto}
.my-c-b{padding:8px 12px 8px 0;min-width:0}
.my-c-k{margin:0;font-size:14.5px;color:var(--ink-3);font-weight:700}
.my-c-unit{display:block;font:600 22px/1.25 var(--f-display);margin:0 0 2px}
.my-c-course{color:var(--ink-2)}
.my-c-b .cp-go{margin-top:14px}
.my-empty{position:relative;padding:26px 26px 26px 150px;min-height:128px;background:var(--sunk);border-radius:var(--r2);overflow:hidden}
/* owner, 11 Oct ("Noodle cut off"): Noodle whole, beside the words, sized to the card (it replaced the peek from below) */
.my .my-empty{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;align-items:center;padding:22px 24px;min-height:0}
.my .my-empty > :not(.cp-peek){grid-column:1}
.my .my-empty .cp-peek{position:static;grid-column:2;grid-row:1 / span 2;width:88px;height:auto;margin:0}
.my-empty h2{margin:0 0 6px;font-size:22px}
.my-empty p{margin:0;color:var(--ink-2);max-width:60ch;line-height:1.55}
.my-empty p.my-empty-go{margin-top:14px}
/* "Continue: <lesson>" for a lesson left part way through (components/resume-card.php): one row, the whole row a link */
.my-resume{display:flex;align-items:center;gap:14px;min-height:64px;margin:0 0 16px;padding:12px 18px;border-radius:var(--r2);background:var(--surface);color:var(--ink);text-decoration:none;box-shadow:none}
.my-resume:hover{box-shadow:none}
.my-resume:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.my-resume-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.my-resume-tx b{font:600 17px/1.25 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.my-resume-tx small{font-size:14px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.my-resume-q{flex:none;font-weight:700;font-size:14px;color:var(--study-ink)}
.my-resume svg{flex:none;color:var(--study-ink)}
:root[data-theme="dark"] .my-resume{background:#1b2f4b;box-shadow:none}
/* with a place to go back to, the empty state's "Nothing started yet" would contradict it */
.bl-resuming #myEmpty{display:none}
/* Continue is then the one main action (coordinator, 12 Oct): it takes the primary colour, and Next lesson and Review
   now take the secondary outline */
.my-resume{background:var(--study-btn);color:var(--on-study-btn);box-shadow:none}
.my-resume:hover{background:var(--study-btn-hover);box-shadow:none}
.my-resume .my-resume-tx small,.my-resume .my-resume-q,.my-resume svg{color:inherit}
.my-resume .my-resume-tx small{opacity:.85}
:root[data-theme="dark"] .my-resume{background:var(--study-btn);box-shadow:none}
.bl-resuming .my .cp-go,.bl-resuming .my .lr-go{background:transparent;color:var(--study-ink);box-shadow:none;border:2px solid var(--study-ink)}
.bl-resuming .my .cp-go:hover,.bl-resuming .my .lr-go:hover{background:var(--sunk);color:var(--study-ink)}
.my-empty .cp-peek{left:26px;bottom:-30px;width:104px}
@media (max-width:600px){
  .my-continue.crs{grid-template-columns:1fr}.my-c-b{padding:14px 8px 8px}
  .my-empty{padding:22px 18px 120px}.my-empty .cp-peek{left:50%;margin-left:-52px;bottom:-34px}
  .my .my-empty{padding:18px 16px;column-gap:12px}.my .my-empty .cp-peek{left:auto;margin:0;width:72px}
}
.my h2.my-h{margin:40px 0 4px}
.my-pg{display:block;height:6px;border-radius:3px;background:var(--sunk);overflow:hidden;margin-top:2px}
.my-pg i{display:block;height:100%;background:var(--gold);border-radius:3px}
.my-pg-t{color:var(--ink-3);font-size:14px}
/* the links under the page: quiet secondary chips (owner, 11 Oct) */
.my-tools{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 0}
.my-tools a.my-tl{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;background:var(--surface);color:var(--ink);font-weight:700;font-size:15px;line-height:1.2;text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--rule-2);transition:box-shadow 180ms var(--ease-out),background-color 180ms var(--ease-out)}
.my-tools a.my-tl:hover{box-shadow:inset 0 0 0 2px var(--study);background:var(--study-tint)}
.my-tools a.my-tl:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
@media (max-width:420px){.my-tools a.my-tl{flex:1 1 100%;justify-content:center}}

/* Your topics (my.php .lm; learn-mastery-ui.js fills it). Owner, 11 Oct: "Red feels unsafe, yellow border too pressing
   ... a bit overwhelming to have it all on display". The learner's subjects only (the rest behind "Show all subjects"),
   one empty state when nothing is started, neutral cards: the subject colour only in the small icon, one teal bar
   (secure, learning, to start), and "due for review" as a soft amber dot, never a border. Which cards show is set
   before the first paint (.is-on, .is-empty, .is-mine); every line keeps its height while it fills. No explanation
   or disclaimer lines: the cards explain themselves (owner, 11 Oct). */
.lm:not(.is-on) .lm-list,.lm:not(.is-on) .lm-more{display:none}
.lm.is-on .lm-empty{display:none}
.lm:not(.is-all) .lm-course:not(.is-mine){display:none}
.lm .lm-list,.lm .lm-empty{margin:12px 0 0}
.lm .lm-list{display:grid;gap:12px}
@media (min-width:900px){.lm .lm-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lm .lm-course{--ci:var(--blue-ink);min-width:0;padding:16px 18px 14px;border:0;border-radius:var(--r1);background:var(--surface);box-shadow:var(--shadow)}
.lm .lm-course[data-s="science"]{--ci:var(--study-ink)}
.lm .lm-course[data-s="cs"]{--ci:var(--play-ink)}
.lm .lm-course[data-s="music"]{--ci:var(--music-ink)}
.lm-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-height:34px;margin:0 0 12px}
.lm-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--sunk);color:var(--ci)}
.lm-ic svg,.lm-ic .sm-ic{display:block;width:20px;height:20px}
.lm .lm-h h3{flex:1 1 10em;min-width:0;margin:0;font:700 17px/1.3 var(--f-display);text-wrap:balance}
/* the music grade switcher: a quiet segmented control */
.lm-gs{display:flex;flex:none;gap:2px;padding:3px;border-radius:10px;background:var(--sunk)}
.lm-gs button{min-width:30px;height:28px;padding:0 6px;border:0;border-radius:7px;background:none;color:var(--ink-2);font:700 14px/1 var(--f-body);font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color 180ms var(--ease-out),color 180ms var(--ease-out),box-shadow 180ms var(--ease-out)}
.lm-gs button:hover{color:var(--ink)}
.lm-gs button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1.5px var(--rule-2)}
.lm-gs button:focus-visible{outline:3px solid var(--study-ink);outline-offset:1px}
.lm-p[hidden]{display:none}
/* three clearly different fills (coordinator, 11 Oct): secure solid teal (5:1 on the track in light, 5.6:1 in dark),
   learning a lighter teal hatch, to start the bare track; the legend dots match */
.lm{--lm-sec:var(--study-ink);--lm-trk:var(--sunk);--lm-lrn:repeating-linear-gradient(135deg,color-mix(in srgb,var(--lm-sec) 55%,var(--lm-trk)) 0 2.5px,color-mix(in srgb,var(--lm-sec) 22%,var(--lm-trk)) 2.5px 5px)}
:root[data-theme="dark"] .lm{--lm-sec:var(--study)}
.lm-bar{display:flex;gap:2px;height:10px;border-radius:5px;background:var(--lm-trk);overflow:hidden}
.lm-bar i{display:block;flex:none;width:0;height:100%;transition:width 320ms var(--ease-out)}
.lm-b-s{background:var(--lm-sec)}
.lm-b-l{background:var(--lm-lrn)}
.lm-leg{display:flex;flex-wrap:wrap;gap:2px 14px;min-height:1.45em;margin:10px 0 0;color:var(--ink-2);font-size:14px;line-height:1.45}
.lm-k{white-space:nowrap}
.lm-k::before{content:'';display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;vertical-align:1px}
.lm-k-s::before{background:var(--lm-sec)}
.lm-k-l::before{background:var(--lm-lrn)}
.lm-k-n::before{background:var(--lm-trk);box-shadow:inset 0 0 0 1.5px var(--rule-2)}
.lm-act{min-height:1.5em;margin:6px 0 0;font-size:15px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lm-act a{color:var(--study-ink);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.lm-act.is-due a::before{content:'';display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:color-mix(in srgb,var(--gold) 85%,var(--surface));vertical-align:1px}
.lm-act.is-quiet{color:var(--ink-3)}
/* nothing started: one card, one way in (Noodle stays in the card at the top of the page: one character per page) */
.lm-empty{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:20px 22px;border-radius:var(--r1);background:var(--surface)}
.lm-empty .lm-nd{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--sunk);color:var(--ink-3);align-self:start}
.lm-empty .lm-nd svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lm-empty h3{margin:0 0 12px;font:700 18px/1.3 var(--f-display);text-wrap:balance}
.lm-cta{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:12px;background:var(--study-btn);color:var(--on-study-btn);font-weight:700;font-size:16px;text-decoration:none;box-shadow:none;transition:background-color 180ms var(--ease-out),transform 180ms var(--ease-out)}
.lm-cta:hover{background:var(--study-btn-hover)}
.lm-cta:active{transform:scale(.98);box-shadow:none}
.lm-cta:focus-visible{outline:3px solid var(--study-ink);outline-offset:3px}
.lm-cta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:420px){.lm-empty{gap:12px;padding:16px}.lm-empty .lm-nd{width:40px;height:40px}}
/* "Show all subjects": a quiet text button with a turning chevron; the extra cards fade in */
.lm-more{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0;padding:8px 2px;border:0;background:none;color:var(--ink-2);font:700 15px/1.3 var(--f-body);cursor:pointer}
.lm-more::after{content:'';width:7px;height:7px;margin-top:-3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform 180ms var(--ease-out),margin 180ms var(--ease-out)}
.lm-more[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:3px}
.lm-more:hover{color:var(--ink)}
.lm-more:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px;border-radius:6px}
.lm-more[hidden]{display:none}
.lm.is-all .lm-course:not(.is-mine){animation:lm-in 320ms var(--ease-out) both}
@keyframes lm-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.lm-bar i,.lm-gs button,.lm-cta,.lm-more::after,.my-tools a.my-tl{transition:none}.lm.is-all .lm-course:not(.is-mine){animation:none}.lm-cta:active{transform:none}}
@media (prefers-reduced-motion:reduce){.cp-go,.cs-lvnav button,.cp-faq summary::after{transition:none}.cp-go:active{transform:none}}

/* the unit page intro (learn/unit-intro.php): Noodle presents a one-line tip in a speech bubble */
.ln-tip{display:flex;align-items:flex-end;gap:24px;margin:4px 0 22px;max-width:720px}
.ln-tip-nd{flex:none;width:80px;height:auto;margin-bottom:-4px}
[dir="rtl"] .ln-tip-nd{transform:scaleX(-1)}   /* RTL: he faces his tip */
.ln-tip-b{margin:0 0 18px;color:var(--ink-2);line-height:1.5;font-size:16px}   /* the shared bubble draws its box and tail (brainlag.css .bl-bubble) */
.ln-tip-b b{color:var(--ink)}
.ln-main .cp-crumb{margin:0 0 6px}

/* layout fixes: the page column (page-style.php narrows main.wrap to 860px), the notes link under a unit (the path
   grid in learn.css styles every `li a`), the friend beside Noodle in the hero */
main.wrap.cp,main.wrap.my{max-width:1100px}
.ln-lessons.is-path li a.cp-note{display:inline-block;padding:0;margin:-14px 0 14px 76px;   /* the unit text column: 4 + 56 + 16 */
  border:0;font-size:14px;font-weight:700;color:var(--study-ink)}
.ln-lessons.is-path li a.cp-note:hover{text-decoration:underline}
.cp-vig .bl-friend.cp-vig-nd{width:66px;left:3px}

/* Marker language (owner, 8 Oct): a module is the illustrated tile, a unit a rounded-square number badge, a lesson a
   small circle. Each unit lists its lessons as a row of circles (done filled, in progress half filled, to do an
   outline), every circle a link with the lesson's name; it replaced the yellow progress bar. */
.cp-key{display:flex;flex-wrap:wrap;gap:6px 22px;margin:4px 0 18px;color:var(--ink-3);font-size:14px}
.cp-key span{display:inline-flex;align-items:center;gap:8px}
.cp-key i{display:block;flex:none}
.cp-key .k-unit{width:18px;height:18px;border-radius:6px;background:var(--sunk);box-shadow:inset 0 0 0 2px var(--ink-3)}
.cp-key .k-les{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ink-3)}
.cp-units.ln-lessons.is-path .n{border-radius:16px}
.cp-units.ln-lessons.is-path li.is-current .n::before{border-radius:22px;border-color:var(--ci)}
/* unit badges in the module's subject colour (owner, 8 Oct, Option 2): to do = the subject tint with the subject ink
   number; current and done = solid subject ink with the surface colour on it (AA both themes: 4.53 to 8.07:1) */
.cp-units.ln-lessons.is-path li .n{background:var(--ct);color:var(--ci);box-shadow:none}
.cp-units.ln-lessons.is-path li.is-current .n,.cp-units.ln-lessons.is-path li.is-done .n{background:var(--ci);color:var(--surface);box-shadow:none}
.cp-units.ln-lessons.is-path li.is-lock .n{background:var(--ct);color:var(--ci)}
.cp-pg{display:none}
.cp-dots{list-style:none;display:flex;flex-wrap:wrap;margin:-8px 0 14px 70px;   /* a clear gap below the badge and the text */
  padding:0;position:relative;z-index:1}
.cp-dots li{display:block;margin:0;padding:0}
.ln-lessons.is-path li a.cp-dot{display:grid;place-items:center;grid-template-columns:none;width:24px;height:24px;min-height:0;padding:0;gap:0;border:0;border-radius:50%;background:none}
.cp-dot::before{content:"";display:block;width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--blue-ink);transition:transform .12s cubic-bezier(.22,1,.36,1)}   /* lessons: the progress blue, every subject */
.cp-dot.is-plus:not(.is-done):not(.is-now)::before{box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.cp-dot.is-done::before{background:var(--blue-ink)}
.cp-dot.is-now::before{background:linear-gradient(90deg,var(--blue-ink) 50%,transparent 50%)}
.cp-dot:hover::before{transform:scale(1.2)}
.cp-dot:focus-visible{outline:2px solid var(--blue);outline-offset:0}
.ln-lessons.is-path li .cp-dots + a.cp-note{margin-top:-6px}
@media (prefers-reduced-motion:reduce){.cp-dot::before{transition:none}.cp-dot:hover::before{transform:none}}
/* the marker language elsewhere: the rounded-square unit mark (crumbs, My learning, the lesson player) and a lesson
   circle row (My learning's Continue) */
.bl-mk-u{--ci:var(--blue-ink);--ct:var(--blue-tint);display:inline-block;flex:none;width:14px;height:14px;border-radius:4.5px;background:var(--ct);box-shadow:inset 0 0 0 2px var(--ci);vertical-align:-1px;margin-right:7px}
.bl-mk-dots{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.bl-mk-dots i{display:block;width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--blue-ink)}
.bl-mk-dots i.d{background:var(--blue-ink)}
.bl-mk-dots i.h{background:linear-gradient(90deg,var(--blue-ink) 50%,transparent 50%)}
.bl-mk-dots:empty{display:none}
.bl-mk-u[data-s="science"]{--ci:var(--study-ink);--ct:var(--study-tint)}.bl-mk-u[data-s="cs"]{--ci:var(--play-ink);--ct:var(--play-tint)}.bl-mk-u[data-s="music"]{--ci:var(--music-ink);--ct:var(--music-tint)}

/* Page structure (owner, 8 Oct, round 3: "make the page structure more obvious"). Three levels, told apart by surface,
   space and type, never by rules or pills:
     PART    a chapter header: its art tile, "Part 1: Number", the units and lessons it holds;
     UNIT    a card (the surface colour on the page ground) holding its header and all its lessons;
     LESSON  a compact row in the card: status circle, number, title and one next step (Read, Practise, Review).
   Layout B (10 Oct): see below. */
.cp-key{display:flex;flex-wrap:wrap;gap:6px 22px;margin:4px 0 8px;color:var(--ink-3);font-size:14px}
.cp-key span{display:inline-flex;align-items:center;gap:8px}
.cp-key i{display:block;flex:none}
.cp-key .k-les{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--blue-ink)}
.cp-key .k-les.is-read{background:linear-gradient(90deg,var(--blue-ink) 50%,transparent 50%)}
.cp-key .k-les.is-done{background:var(--blue-ink)}

/* PART */
.cp-area{margin:44px 0 0;scroll-margin-top:84px}
.cp-ah{display:flex;align-items:center;gap:18px;margin:0 0 16px}
.cp-ah h3{margin:0;font:600 clamp(24px,2.8vw,30px)/1.15 var(--f-display)}
.cp-part{color:var(--ci)}
.cp-ap{margin:4px 0 0;color:var(--ink-2);font-size:15.5px}
/* Layout B (coordinator's call, 10 Oct: half the scroll of A, scans better): the part is a title over the page with
   its tile; each unit card opens with a tinted header band; its lessons run in two columns on wide screens (CSS
   columns, so the order reads down then across, 1 2 3 | 4 5) and in one column on phones */
.cp-ah{padding:0 0 4px}
@media (min-width:601px){.cp-ah .cp-vig{transform:scale(1.2);transform-origin:0 50%;margin-right:26px}}
.cp-uh{background:var(--ct);padding:16px 18px 14px}
.cp-ls{padding:6px 12px 12px}
@media (min-width:1000px){.cp-ls > .lsr-list{display:block;columns:2;column-gap:20px}.cp-ls .lsr{break-inside:avoid}.cp-ls > .lsr-list > .lsr + .lsr{margin-top:2px}}

/* UNIT */
.cp-units{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.cp-u{background:var(--surface);border-radius:var(--r3,20px);box-shadow:var(--shadow);padding:0;overflow:hidden;min-width:0}
.cp-uh{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:start}
.cp-u .n{display:grid;align-content:center;justify-items:center;width:56px;height:56px;border-radius:16px;background:var(--surface);color:var(--ci);line-height:1}
.cp-u .n small{font:700 10.5px/1 var(--f-body);margin:0 0 3px}
.cp-u .n b{display:grid;place-items:center;font:700 21px/1 var(--f-display)}
.cp-u .n b svg{width:22px;height:22px}
.cp-u.is-current .n,.cp-u.is-done .n{background:var(--ci);color:var(--surface)}
.cp-ub{min-width:0;padding-top:2px}
.cp-u .t{margin:0;font:600 20px/1.25 var(--f-display)}
.cp-u .t a{color:var(--ink)}
.cp-u .t a:hover{color:var(--ci)}
.cp-u .t a:focus-visible{outline:3px solid var(--study-ink);outline-offset:3px;border-radius:4px}
.cp-u .cp-m{margin:4px 0 0}
.cp-eb{margin:2px 0 0;font-size:14px;color:var(--ink-3)}
.cp-eb summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-weight:700;min-height:44px}
.cp-eb summary::-webkit-details-marker{display:none}
.cp-eb summary::after{content:"";width:7px;height:7px;margin:-3px 0 0 2px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cp-eb[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.cp-eb .cp-spec{margin:2px 0 4px}

/* LESSON: one link per row, the next step on the right */
.lsr-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:2px}
.lsr{margin:0}
.lsr-go{display:grid;grid-template-columns:16px 1.5em minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:6px 10px;border-radius:12px;color:var(--ink);text-decoration:none}
.lsr-go:hover{background:var(--paper)}
.lsr-go:focus-visible{outline:3px solid var(--study-ink);outline-offset:-3px}
.lsr-m{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--blue-ink)}
.lsr[data-st="read"] .lsr-m{background:linear-gradient(90deg,var(--blue-ink) 50%,transparent 50%)}
.lsr[data-st="done"] .lsr-m{background:var(--blue-ink)}
.lsr-n{color:var(--ink-3);font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.lsr-t{min-width:0;font-size:16px;line-height:1.35}
.lsr-lk{width:14px;height:14px;vertical-align:-1px;margin-right:6px;color:var(--ink-3)}
.lsr-do{display:inline-flex;align-items:center;gap:6px;font:700 14.5px/1 var(--f-body);color:var(--ci,var(--blue-ink));white-space:nowrap}
.lsr-do::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg)}
.lsr[data-st="done"] .lsr-t{color:var(--ink-2)}
/* text diet (8 Oct): the step is spelled out only where it is the nudge (the current lesson, and Practise on a lesson
   read but not practised); elsewhere the row shows its chevron, and the link's label still names the step */
.lsr[data-st="new"]:not(.is-next) .lsr-dw,.lsr[data-st="done"] .lsr-dw{display:none}
.lsr[data-st="done"] .lsr-do{color:var(--ink-3)}
.lsr[data-lock] .lsr-do{color:var(--ink-3)}
/* the student's current lesson: the only highlighted row, its step a solid button */
.lsr.is-next .lsr-go{background:var(--ct,var(--blue-tint))}
.lsr.is-next .lsr-do{background:var(--ci,var(--blue-ink));color:var(--surface);padding:9px 12px;border-radius:10px}
.lsr.is-next .lsr-do::after{display:none}
/* revision notes: the card's last row, a resource (icon, tinted ground), not a lesson */
.cp-res{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:12px;margin:8px 0 2px;padding:10px 12px;border-radius:12px;background:var(--paper);color:var(--ink-2);font-size:15px;line-height:1.35;text-decoration:none}
.cp-res b{color:var(--ci,var(--blue-ink))}
.cp-res svg{width:22px;height:22px;fill:none;stroke:var(--ci,var(--blue-ink));stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.cp-res:hover b{text-decoration:underline;text-underline-offset:3px}
.cp-res:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
@media (max-width:600px){
  .cp-uh{grid-template-columns:48px minmax(0,1fr);gap:12px}
  .cp-u .n{width:48px;height:48px;border-radius:14px}
  .cp-u .t{font-size:18.5px}
  .cp-uh{padding:14px 12px 12px}
  .cp-ls{padding:4px 6px 10px}
  .cp-ah .cp-vig{width:96px;height:64px}
  .cp-ah .cp-vig .cp-vig-nd{width:56px}
  .cp-ah .cp-vig .cp-vig-p.crs-art{width:34px;height:34px;margin-top:-17px;right:6px}
  .lsr-go{grid-template-columns:14px 1.3em minmax(0,1fr) auto;gap:8px;padding:6px 6px}
  .lsr-t{font-size:15.5px}
}

/* the lighter map (8 Oct): a unit not under way shows "N lessons", a quiet toggle that opens its lessons */
.cp-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 18px;margin:4px 0 0}
.cp-row .cp-eb{margin:0}
.cp-row .cp-eb[open]{flex-basis:100%}
.cp-tog{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-block:-6px;padding:0;   /* 44 px to any pointer, the line where it was (coordinator, 15 Oct) */border:0;background:none;font:700 14px/1 var(--f-body);color:var(--ci,var(--blue-ink));cursor:pointer}
.cp-tog::after{content:"";width:7px;height:7px;margin:-3px 0 0 2px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cp-tog[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:3px}
.cp-tog:hover{text-decoration:underline;text-underline-offset:3px}
.cp-tog:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px;border-radius:4px}
.cp-u.is-shut .cp-uh{padding-bottom:16px}

/* Part tiles (owner, 8 Oct: "calculator is a bit far away"): the character and its prop read as one group, centred in
   the tile: the prop sits beside the hand (at the finger on a pointing pose), not at the tile's far edge */
.cp-vig .cp-vig-nd{left:4px}
.cp-vig .bl-friend.cp-vig-nd{left:5px}
.cp-vig .cp-vig-p.crs-art{left:68px;right:auto;width:40px;height:40px;margin-top:-20px}
.cp-vig:not([data-pose]) .cp-vig-p.crs-art{left:72px}   /* a friend: clear of the tail */
.cp-vig[data-pose="gcse-maths"] .cp-vig-p.crs-art{left:70px;top:33px;margin-top:0;width:36px;height:36px}   /* just past the fingertip */
@media (max-width:600px){
  .cp-ah .cp-vig .cp-vig-nd{left:3px}
  .cp-ah .cp-vig .bl-friend.cp-vig-nd{left:4px;width:52px}
  .cp-ah .cp-vig .cp-vig-p.crs-art{left:54px;right:auto;width:32px;height:32px;margin-top:-16px}
  .cp-ah .cp-vig:not([data-pose]) .cp-vig-p.crs-art{left:57px}
  .cp-ah .cp-vig[data-pose="gcse-maths"] .cp-vig-p.crs-art{left:56px;top:26px;margin-top:0;width:29px;height:29px}
}

/* Music: the site's music pink (owner, 10 Oct: "cream coloured looks boring"), through --c/--ci/--ct like every
   subject. The progress circles stay blue, the site-wide convention. */

/* The course header (owner, 10 Oct): the title with a switcher beside it, one line on the course, progress for a
   returning learner (units done and a bar), one primary button. No breadcrumb above it (the JSON-LD keeps one). */
.cp-tt{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 8px}
.cp-tt h1{margin:0}
.cp-sw{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:12px;background:var(--sunk)}
.cp-sw a,.cp-sw span{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:9px;font:700 14.5px/1 var(--f-body);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.cp-sw a:hover{color:var(--ink);background:var(--paper)}
.cp-sw a:focus-visible{outline:3px solid var(--study-ink);outline-offset:1px}
.cp-sw [aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
/* touch: the course and grade switches and the unit titles are 44 px tall to tap (friction audit, 12 Oct); the unit
   title's padding is given back by a negative margin, so the card does not grow */
/* 44 px for every pointer, a mouse too (coordinator, 15 Oct: was touch only) */
.cp-uh .t a{display:block;padding-block:11px;margin-block:-11px}
.cp-prog{margin:14px 0 0;max-width:340px}
.cp-prog[hidden]{display:none}
.cp-prog-t{margin:0 0 6px;color:var(--ink-2);font-size:15.5px}
.cp-prog-t b{color:var(--ink)}
.cp-prog-bar{display:block;height:8px;border-radius:4px;background:var(--sunk);overflow:hidden}
.cp-prog-bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--blue-ink)}
.cp-go span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a unit's "N to review": a quiet link to its mistakes, beside "N lessons" */
.cp-rev{display:inline-flex;align-items:center;min-height:44px;font:700 14px/1 var(--f-body);color:var(--play-ink);text-decoration:none}
.cp-rev:hover{text-decoration:underline;text-underline-offset:3px}
.cp-rev:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px;border-radius:4px}
.cp-rev[hidden]{display:none}
@media (max-width:600px){.cp-sw{width:100%}.cp-sw a,.cp-sw span{flex:1 1 auto;justify-content:center;padding:0 8px}.cp-prog{max-width:none}}
@media (prefers-reduced-motion:no-preference){.cp-prog-bar i{transition:width .4s ease}}

/* Dark mode (coordinator, 10 Oct: "too accented"): unit bands and the active row are a quiet tint of the subject over
   the surface (about 12%), not the full tint; the full colour stays on the unit badge */
:root[data-theme="dark"] .cp-uh{background:color-mix(in srgb,var(--c) 12%,var(--surface))}
:root[data-theme="dark"] .cp-u .n{background:color-mix(in srgb,var(--c) 22%,var(--surface))}
/* the plan and its price, once in the header */
.cp-plus{display:flex;align-items:center;gap:8px;margin:10px 0 0;color:var(--ink-2);font-size:15px}
.cp-plus svg{width:15px;height:15px;flex:none;color:var(--ci)}
.cp-plus a{color:var(--ci);font-weight:700}
/* a free unit's tag: the free colour, words and tick (owner, 13 Oct: free is one colour site-wide, never the course's) */
.cp-m .is-free{color:var(--free);font-weight:650}
.cp-m .is-free svg{stroke:var(--free);stroke-width:2.8}
.cp-m .is-plus svg{width:13px;height:13px;fill:none;stroke:none;color:var(--ci)}
.cp-m .is-plus svg rect{fill:currentColor}
.cp-m .is-plus svg path{stroke:currentColor;stroke-width:2.4}

:root[data-theme="dark"] .cp-u.is-current .n,:root[data-theme="dark"] .cp-u.is-done .n{background:var(--ci);color:var(--surface)}
.cp-sw.is-grades{align-items:center}
.cp-sw .cp-sw-k{background:none!important;box-shadow:none!important;color:var(--ink-3);padding:0 6px 0 9px;font-weight:700}
.cp-sw.is-grades a,.cp-sw.is-grades [aria-current]{min-width:36px;justify-content:center;padding:0 8px}
@media (max-width:600px){.cp-sw.is-grades{width:auto;flex-wrap:nowrap}.cp-sw.is-grades a,.cp-sw.is-grades [aria-current]{flex:0 0 auto;min-width:30px;padding:0 4px}.cp-sw.is-grades .cp-sw-k{padding:0 4px 0 7px}}   /* eight grades on one row at 390px */

/* the mistakes icon (site set, e5bbabae2), the bare glyph in purple, on "N to review" and "Mistakes to practise" */
.cp-rev{gap:6px}
.cp-rev svg,.my-mk svg{flex:none;width:16px;height:16px;color:var(--play)}
.my-mk{display:inline-flex;align-items:center;gap:7px}
.my-mk svg{width:18px;height:18px}

/* Your practice on My learning (owner, 10 Oct): two equal cards with the same padding and a button at the foot. The
   course pages' Practise strip (.pp-strip) is at the end of this file. */
.lr-panel .pp-h{margin:44px 0 14px;font-size:clamp(22px,2.4vw,26px)}
.lr-panel .pp-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.lr-panel .pp-cards.has-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.lr-panel .pp-cards.has-3{grid-template-columns:repeat(2,minmax(0,1fr))}.lr-panel .pp-cards.has-3 > [data-part="mixed"]{grid-column:1 / -1}}
@media (max-width:700px){.lr-panel .pp-cards,.lr-panel .pp-cards.has-3{grid-template-columns:1fr}.lr-cols > [data-part="cards"]{margin-top:0}}
.lr-panel .pp-card{display:flex;flex-direction:column;min-width:0;background:var(--surface);border-radius:var(--r3,20px);box-shadow:var(--shadow);padding:20px 20px 18px}
.lr-panel .pp-t{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:600 19px/1.2 var(--f-display)}
.lr-panel .pp-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px}
.lr-panel .pp-ic svg{width:20px;height:20px}
.lr-panel .pp-mk{background:var(--play-tint);color:var(--play)}
.lr-panel .pp-cd{background:var(--study-tint);color:var(--study-ink)}
.lr-panel .pp-mx{background:var(--gold-tint);color:var(--gold-ink)}
.lr-panel .pp-d{margin:0;color:var(--ink-2);line-height:1.5}
.lr-panel .pp-foot,.lr-panel .pp-card .lr-acts{margin:auto 0 0;padding-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.lr-panel .pp-card .lr-fill{display:flex;flex-direction:column;flex:1}
.lr-panel .pp-card .lr-fill .lr-acts{margin-top:auto}
.lr-panel .pp-card .lr-n{min-height:0}
.lr-panel .pp-card .lr-n b{font-size:34px}
.lr-panel .pp-card.is-zero .lr-n,.lr-panel .pp-card.is-zero .lr-sub{display:none}
.lr-panel .pp-empty{margin:0;color:var(--ink-2)}
.lr-panel .pp-empty[hidden]{display:none}
.lr-panel .lr-empty-t{margin:0;color:var(--ink);font-weight:700}
.lr-panel .lr-cols > [data-part="cards"]{margin-top:0}
/* dark mode part tiles (owner, 10 Oct: "bit bright for all sections"): the same quiet tint as the unit bands */
:root[data-theme="dark"] .cp-ah .cp-vig{background:color-mix(in srgb,var(--c) 14%,var(--surface))}

/* The "now" lesson (owner, 10 Oct: "more accent for the intended now lesson"): the one row on the page that course.js
   marks is-next gets a clear fill (about 24% of the subject over the surface, above the band), "Up next" over its
   title, the title in bold and the step as a full-colour button. A 2px ring in the accent, no hairline. */
.lsr.is-next .lsr-go{background:color-mix(in srgb,var(--c,var(--blue)) 24%,var(--surface));box-shadow:inset 0 0 0 2px var(--ci,var(--blue-ink));padding-top:8px;padding-bottom:8px}
:root[data-theme="dark"] .lsr.is-next .lsr-go{background:color-mix(in srgb,var(--c,var(--blue)) 26%,var(--surface))}
.lsr.is-next .lsr-t{font-weight:700;color:var(--ink)}
.lsr.is-next .lsr-t::before{content:"Up next";display:block;font:700 12px/1.2 var(--f-body);color:var(--ink-2);margin:0 0 2px}   /* ink: 12px text needs 4.5:1 on the 24% fill, which the accent ink misses by a hair */
.lsr.is-next .lsr-do{background:var(--ci,var(--blue-ink));color:var(--surface)}
:root[data-theme="dark"] .lsr.is-next .lsr-do{color:#0b1626}

/* Page sections are square and full-bleed (owner, 10 Oct); cards, buttons and chips stay rounded. The header panel
   and the papers section are bands across the whole window, their content still on the page grid: a box-shadow
   spread of the band's own colour, clipped to the band's height, paints the band out to both edges. Sections are
   told apart by colour, never a rule. */
.cp-hero.crs,.cp-papers.crs{border-radius:0;border:0;box-shadow:0 0 0 100vmax var(--surface);clip-path:inset(0 -100vmax)}
.cp-hero.crs{padding:28px 0;margin-top:-22px}
.cp-papers.crs{padding:28px 0}
.cp-hero.crs .crs-cov{border-radius:var(--r2,16px);overflow:hidden}
.cp-papers-art{border-radius:var(--r2,16px)}
.cp-hero-b{padding:12px 0}
@media (max-width:760px){.cp-hero.crs{padding:16px 0 20px}.cp-hero-b{padding:4px 0 6px}}
@media (max-width:640px){.cp-papers.crs{padding:20px 0}.cp-papers-b{padding:14px 0 4px}}

/* ---- owner, 10 Oct (round 1010) ------------------------------------------------------------------------------------
   1. "Spacing, careful": one Practise strip under the hero (practice-panel.php .pp-strip): three equal cards, each an
      icon and title, one status line and a foot sized for its button; then "The course, unit by unit" with the board,
      tier and route filters under its heading. One rhythm: the hero band, 40px, Practise, 48px, the course.
   2. "Thicker arrows": every arrow and chevron on the course pages is one icon, drawn on the 24 grid with round caps,
      at 2.25px on screen (the Continue arrow at 24px, stroke 2.25; the chevrons at 16px, stroke 3.375), as the site's
      icons. Masks, so they take currentColor.
   3. No content jumping: every box that course.js or learn-review.js fills is reserved (see the comments in place). */
:root{--cp-chev-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.375' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5l6.5 6.5L9 18.5'/%3E%3C/svg%3E");
  --cp-chev-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.375' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9l6.5 6.5L18.5 9'/%3E%3C/svg%3E")}
.lsr-do::after,.cp-tog::after,.cp-eb summary::after{content:"";flex:none;width:16px;height:16px;margin:0;border:0;transform:none;background:currentColor;
  -webkit-mask:var(--cp-chev-d) center / 16px 16px no-repeat;mask:var(--cp-chev-d) center / 16px 16px no-repeat}
.lsr-do::after{-webkit-mask-image:var(--cp-chev-r);mask-image:var(--cp-chev-r)}
.cp-tog[aria-expanded="true"]::after,.cp-eb[open] summary::after{transform:rotate(180deg);margin:0}
.lsr-do{gap:4px}
.cp-go{grid-template-columns:minmax(0,auto) 24px}
.cp-go .cp-go-ic{width:24px;height:24px;stroke-width:2.25}
@media (max-width:760px){.cp-go{grid-template-columns:minmax(0,1fr) 24px}}

/* the hero: the facts line and the returning learner's progress share one slot (a grid stack) of one line, the
   progress written as its words with the bar beside them, so swapping them moves nothing below */
.cp-stat{display:grid;margin:14px 0 0;min-height:24px;align-items:center}
.cp-stat > *{grid-area:1 / 1;margin:0}
.cp-stat .cp-facts{margin:0;line-height:24px}
.cp-stat .cp-prog{display:flex;align-items:center;gap:14px;margin:0;max-width:none}
.cp-stat .cp-prog-t{margin:0;line-height:24px;white-space:nowrap}
.cp-stat .cp-prog-bar{flex:0 1 200px;min-width:60px}

/* the Practise strip */
.lr-panel.pp-strip{margin:40px 0 0}
.lr-panel.pp-strip .pp-h{margin:0 0 14px;font-size:clamp(22px,2.4vw,26px)}
.lr-panel.pp-strip .pp-cards,.lr-panel.pp-strip .pp-cards.has-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.lr-panel.pp-strip .pp-cards > .pp-card{grid-column:auto}
.lr-panel.pp-strip .pp-card{display:flex;flex-direction:column;min-width:0;padding:18px 20px 18px}
.lr-panel.pp-strip .pp-t{margin:0 0 6px;font:600 18.5px/38px var(--f-display)}
/* the card icons at the site's weight (owner, 10 Oct: "thicker icons"): 24px on the tinted tile, 2.25px strokes */
.lr-panel.pp-strip .pp-ic{width:38px;height:38px;border-radius:11px}
.lr-panel.pp-strip .pp-ic svg{width:24px;height:24px;stroke-width:2.25}
/* the mistakes glyph elsewhere on the course page and My learning, at the same weight (2px on screen) */
.cp-rev svg{stroke-width:3}.my-mk svg{stroke-width:2.6}
.lr-panel.pp-strip .lr-fill{display:flex;flex-direction:column;flex:1}
.lr-panel.pp-strip .pp-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
.lr-panel.pp-strip .pp-hd .pp-t{margin:0}
.lr-panel.pp-strip .pp-more{display:inline-flex;align-items:center;min-height:44px;color:var(--study-ink);font-weight:700;font-size:15.5px;white-space:nowrap}
@media (max-width:300px){.lr-panel.pp-strip .pp-more{white-space:normal;max-width:100%}}   /* at 200% zoom it wraps (LRN-06) */
.lr-panel.pp-strip .pp-more:hover{text-decoration:underline;text-underline-offset:3px}
/* the status line: one line, the same box in every card and in every state (the count, nothing to review, the
   number of cards, nothing due) */
.lr-panel.pp-strip .lr-count,.lr-panel.pp-strip .lr-empty-t,.lr-panel.pp-strip .pp-st,.lr-panel.pp-strip .pp-empty,.lr-panel.pp-strip .pp-d{margin:0;min-height:28px;font:400 16px/28px var(--f-body);color:var(--ink-2);text-wrap:pretty}
.lr-panel.pp-strip .lr-empty-t{font-weight:400}
.lr-panel.pp-strip .lr-count b{color:var(--ink);font-weight:700}
.lr-panel.pp-strip .pp-st{height:28px;white-space:nowrap}
.lr-panel.pp-strip .pp-st[hidden],.lr-panel.pp-strip .pp-empty[hidden]{display:none}
.lr-panel.pp-strip .pp-st .lr-n{display:inline;min-height:0;margin:0}
.lr-panel.pp-strip .pp-st .lr-n b{font:700 22px/1 var(--f-display);color:var(--study-ink);font-variant-numeric:tabular-nums}
.lr-panel.pp-strip .pp-sk{color:transparent!important;background:var(--sunk);border-radius:6px}   /* the number's own box, blank until the count arrives */
/* the full list lives on /en/learn/mistakes/: here only the count and the buttons */
.lr-panel.pp-strip .lr-fill > :not(.lr-count):not(.lr-empty-t):not(.lr-acts){display:none}
.lr-panel.pp-strip .lr-sub{display:none}
/* the foot: the button's height (48 + its 4px lip) is kept even with no button, so one appearing moves nothing */
.lr-panel.pp-strip .pp-foot,.lr-panel.pp-strip .lr-fill .lr-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:auto 0 0;padding-top:14px;box-sizing:border-box}
/* an empty card is its content's height (owner, 11 Oct: "too much space under Mistakes and Flashcards"): a foot with
   nothing shown takes no room. Room for a button is held only where one can come (practice-panel.php reads this
   browser's record before the cards are painted): pp-rsv-mk, open mistakes; pp-rsv-cd, lessons done, so cards can be
   due. Desktop rows still match heights within a row (grid stretch). */
.lr-panel.pp-strip [data-part="cards"] .pp-foot:not(:has(> :not([hidden]))){display:none}
.lr-panel.pp-strip.pp-rsv-mk [data-part="mistakes"] .lr-fill{min-height:94px}
.lr-panel.pp-strip.pp-rsv-cd [data-part="cards"] .pp-foot{display:flex;min-height:66px}
.lr-panel.pp-strip .lr-acts .lr-note{margin:0;color:var(--ink-2);font-size:15px;line-height:1.45}
.lr-panel.pp-strip .lr-go{min-height:48px;padding:0 18px;font-size:16px}
@media (min-width:700px) and (max-width:1023px){   /* one card per row: title and status on the left, the button on the right */
  .lr-panel.pp-strip .pp-cards,.lr-panel.pp-strip .pp-cards.has-3{grid-template-columns:1fr;gap:12px}
  .lr-panel.pp-strip .pp-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t f" "s f";column-gap:18px;align-items:center;padding:14px 18px}
  .lr-panel.pp-strip .lr-fill{display:contents}
  .lr-panel.pp-strip .pp-t,.lr-panel.pp-strip .pp-hd{grid-area:t;margin:0}
  .lr-panel.pp-strip .pp-hd{justify-content:flex-start;gap:18px}
  .lr-panel.pp-strip .lr-count,.lr-panel.pp-strip .lr-empty-t,.lr-panel.pp-strip .pp-st,.lr-panel.pp-strip .pp-empty,.lr-panel.pp-strip .pp-d{grid-area:s}
  .lr-panel.pp-strip .pp-foot,.lr-panel.pp-strip .lr-fill .lr-acts{grid-area:f;margin:0;padding:0;justify-content:flex-end;max-width:340px}
  .lr-panel.pp-strip.pp-rsv-mk [data-part="mistakes"] .lr-fill{min-height:0}
  .lr-panel.pp-strip.pp-rsv-cd [data-part="cards"] .pp-foot{min-height:56px}
  .lr-panel.pp-strip.pp-rsv-mk [data-part="mistakes"]{min-height:84px}
}
@media (max-width:699px){.lr-panel.pp-strip .pp-cards,.lr-panel.pp-strip .pp-cards.has-3{grid-template-columns:1fr;gap:12px}.lr-panel.pp-strip .pp-card{padding:16px 16px}}

/* the course map: its heading, then the filters that act on it, the key, the parts */
.cp-path > h2{margin:48px 0 4px}
.cp-path .cp-filters{margin:14px 0 6px}
/* lines that end with one short word (owner: "avoid text going onto the next line and not having much on it") */
.cp-promise,.cp-papers p,.cp-faq details p,.cp-ap,.lsr-t,.cp-u .t,.cp-res span{text-wrap:pretty}
/* the hero's cover sits at the top of the header, not centred on it: while the page streams in, a header still
   growing below the button never moves the picture (a measured 0.0105 shift on a slow, signed-in load) */
.cp-hero.crs{align-items:start}
.cp-go small{min-height:1.3em}   /* the button keeps its two lines whatever course.js writes in them */

/* ---- The mastery view (docs/efficacy/MASTERY_VIEW_SPEC.md; course.js mastery()). Shown only to a learner with answers
   on this device: course.php sets html.ms-on before the body, so every slot below is there from the first paint and
   filling it moves nothing. Subject tints, text words for every state, no red; Fading is a calm amber outline. */
.cp-ms,.lsr-ms,.lr-panel.pp-strip .pp-card.pp-rvc{display:none}
/* a unit: a bar and its counts on one line of fixed height */
.ms-on .cp .cp-ms{display:flex;align-items:center;gap:10px;height:22px;margin:6px 0 0;min-width:0}
.cp-ms-bar{flex:none;display:flex;width:112px;height:8px;border-radius:4px;background:var(--sunk);overflow:hidden}
.cp-ms-bar i{display:block;height:100%;width:0}
.cp-ms-bar i[data-st="Secure"]{background:var(--ci)}
.cp-ms-bar i[data-st="Learning"]{background:color-mix(in srgb,var(--c) 45%,var(--surface))}
.cp-ms-bar i[data-st="Fading"]{box-shadow:inset 0 0 0 2px var(--gold)}
.cp-ms-t{min-width:0;font-size:14px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:no-preference){.cp-ms-bar i{transition:width .3s ease}}
/* a lesson row: its status word in a column of its own, the same width with or without a word */
.ms-on .cp .lsr-go{grid-template-columns:16px 1.5em minmax(0,1fr) 5.4em auto}
.ms-on .cp .lsr-ms{display:block;justify-self:end;font:700 12.5px/1 var(--f-body);padding:4px 8px;border-radius:8px;white-space:nowrap}
.lsr-ms[data-st=""]{padding:0}
.lsr-ms[data-st="Secure"]{background:var(--ct);color:var(--ci)}
.lsr-ms[data-st="Learning"]{color:var(--ci);box-shadow:inset 0 0 0 2px var(--ct)}   /* as the unit page (learn.css .lm-st) */
.lsr-ms[data-st="Fading"]{box-shadow:inset 0 0 0 2px var(--gold);color:var(--gold-ink)}
:root[data-theme="dark"] .lsr-ms[data-st="Secure"]{background:color-mix(in srgb,var(--c) 14%,var(--surface))}
@media (max-width:600px){.ms-on .cp .lsr-go{grid-template-columns:14px 1.3em minmax(0,1fr) 5em auto}.ms-on .cp .lsr-ms{font-size:12px;padding:4px 6px}}
/* Revise next (owner, 12 Oct: "Confusing > fix"): across the strip, above its three cards. No icon and no card in the
   card: each topic is one flat row the full width of the card, the whole row one link; the course over the topic, a
   meter of three steps with its word (subject tints, no red), one filled "Practise this" (a filled arrow on a phone).
   One row's room is held from the first paint; the fine print waits behind "How this works". */
.ms-on .lr-panel.pp-strip .pp-card.pp-rvc{display:block;grid-column:1 / -1;padding:18px 20px 12px}
.ms-on .lr-panel.pp-strip .pp-card.pp-rvc > .pp-t{margin:0 0 4px;line-height:1.3}
.pp-rvl{list-style:none;margin:0 -10px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;min-height:80px}
.pp-rvl > li{margin:0;min-width:0}
.pp-rvc.pp-rv2 .pp-rvl{min-height:164px}   /* two rows to come (practice-panel.php counts them before the first paint) */
.pp-rvi{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;height:80px;padding:0 10px;border-radius:14px;color:var(--ink);text-decoration:none;box-sizing:border-box;transition:background .15s cubic-bezier(.22,1,.36,1)}
.pp-rvi:hover{background:var(--sunk)}
.pp-rvi:focus-visible{outline:3px solid var(--study-ink);outline-offset:0}
.pp-rvb{display:flex;flex-direction:column;gap:2px;min-width:0}
.pp-rvk{font-size:13.5px;line-height:1.3;font-weight:600;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-rvk:empty{display:none}
.pp-rvn{font:600 17px/1.3 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-rvm{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:13.5px;line-height:1.2;color:var(--ink-2)}
.pp-rvbar{display:flex;gap:3px;flex:none}
.pp-rvbar i{display:block;width:16px;height:6px;border-radius:3px;background:var(--sunk)}
.pp-rvi:hover .pp-rvbar i{background:color-mix(in srgb,var(--ink) 14%,var(--surface))}
.pp-rvi[data-lv="1"] .pp-rvbar i:nth-child(-n+1),.pp-rvi[data-lv="2"] .pp-rvbar i:nth-child(-n+2),.pp-rvi[data-lv="3"] .pp-rvbar i{background:var(--ci,var(--study-ink))}
.pp-rvgo{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 18px;border-radius:12px;background:var(--study-btn);color:var(--on-study-btn);font-weight:700;font-size:15.5px;white-space:nowrap;transition:background .15s cubic-bezier(.22,1,.36,1)}
.pp-rvgo svg{flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pp-rvi:hover .pp-rvgo{background:var(--study-btn-hover)}
.pp-rv0{align-self:center;padding:0 10px;color:var(--ink-2)}
.pp-how{margin:4px 0 0}
.pp-how summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;list-style:none;font-size:14px;font-weight:700;color:var(--ink-2)}
.pp-how summary::-webkit-details-marker{display:none}
.pp-how summary::after{content:"";width:6px;height:6px;margin:-3px 0 0 2px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .15s}
.pp-how[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.pp-how summary:hover{color:var(--ink)}
.pp-how summary:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px;border-radius:6px}
.pp-rvc .pp-how .pp-note{margin:0 0 8px;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:68ch;text-wrap:pretty}
@media (max-width:599px){
  .ms-on .lr-panel.pp-strip .pp-card.pp-rvc{padding:16px 16px 10px}
  .pp-rvl{margin:0 -8px}
  .pp-rvi{padding:0 8px;column-gap:12px}
  .pp-rvgo{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
  .pp-rvgo-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.pp-rvi,.pp-rvgo,.pp-how summary::after{transition:none}}
/* a narrow phone: the word goes under the title (every row, from the first paint, so nothing moves), and the title
   keeps the width of the row */
@media (max-width:400px){
  .ms-on .cp .lsr-go{grid-template-columns:14px 1.3em minmax(0,1fr) auto;grid-template-rows:auto auto;row-gap:2px}
  .ms-on .cp .lsr-go > .lsr-m,.ms-on .cp .lsr-go > .lsr-n{grid-row:1 / span 2}
  .ms-on .cp .lsr-go > .lsr-t{grid-column:3;grid-row:1}
  .ms-on .cp .lsr-ms{grid-column:3;grid-row:2;justify-self:start;min-height:20px;box-sizing:border-box}
  .ms-on .cp .lsr-go > .lsr-do{grid-column:4;grid-row:1 / span 2}
}

/* My learning without a layout shift (11 Oct): my.php marks html.my-started before Continue and the empty state are
   painted; the Continue box then holds its size while course.js fills it (title clamped to two lines), the empty state
   stays out, and each course card keeps a line for its progress */
.my-started .my #myContinue[hidden]{display:grid!important}
.my-started .my #myEmpty{display:none!important}
.my-continue.crs{min-height:176px;box-sizing:border-box}
.my-c-unit{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.my-c-course{display:block;min-height:1.5em}
/* the words at the top and the button pinned to the foot of a box of fixed height, so a one-line or two-line title
   moves nothing and leaves no gap between the title and the course */
.my-started .my .my-c-b{display:flex;flex-direction:column;align-self:stretch;justify-content:flex-start;min-height:148px;box-sizing:border-box}
.my-started .my .my-c-b .cp-go{margin-top:auto;align-self:flex-start}
/* a phone: padding 14 + 8, a two-line title 55 + 2, the course line 26, the button 58 = 163; 166 holds the tallest fill
   (12 Oct: 156 let the card grow 8 px when course.js wrote a two-line title, CLS .054) */
@media (max-width:600px){.my-started .my .my-c-b{min-height:166px}.my-started .my .my-c-b .cp-go{align-self:stretch}}
.my-started .my .my-c .my-pg[hidden]{display:block!important;visibility:hidden}
.my-started .my .my-c .my-pg-t{display:block;min-height:1.45em}
@media (min-width:1024px){.lr-panel.pp-strip .pp-cards:not(.has-3){grid-template-columns:repeat(2,minmax(0,1fr))}}
.my-c-b > br{display:none}

/* GCSE science route (owner, 11 Oct): the switch in the header, the three sciences one tap away; separate-only lessons
   labelled "Biology only" (Chemistry, Physics) like the unit tags, and hidden on the Combined route (html.sci-combined,
   set before the first paint by course.php and kept by course.js, so nothing appears and then goes) */
.cp-route{margin:16px 0 0}
.cp-sci{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0}
.cp-sci a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--ci)}
.cp-sci a:hover{text-decoration:underline;text-underline-offset:3px}
.lsr-tag{display:inline-block;margin-left:8px;font:700 12.5px/1.2 var(--f-body);color:var(--ink-3);white-space:nowrap;vertical-align:1px}
.sci-combined .cp li.cp-u[data-sep],.sci-combined .cp .lsr[data-sep]{display:none!important}
@media (max-width:600px){.sci-pick .cs-lvnav{width:100%}.sci-pick .cs-lvnav button{flex:1 1 0}}

/* "Add GCSE to my subjects?" (course.php): one quiet chip, once, for a level the learner has not added */
.lv-offer{display:none}
.lv-offer-on .lv-offer{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:14px 0 0}
.lv-add{min-height:36px;padding:0 14px;border:0;border-radius:10px;background:var(--seg-track,var(--sunk));color:var(--ink);font:600 14.5px/1 var(--f-body);cursor:pointer}
.lv-add:hover{box-shadow:inset 0 0 0 2px var(--study)}
.lv-no{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:10px;background:none;color:var(--ink-3);cursor:pointer}
.lv-no:hover{background:var(--sunk);color:var(--ink)}
.lv-add:focus-visible,.lv-no:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.lv-offer.is-gone .lv-add,.lv-offer.is-gone .lv-no{display:none}
.lv-done{color:var(--ink-2);font-size:14.5px}
.lv-done:empty{display:none}

/* My learning, owner 11 Oct: Noodle whole, standing on the empty card's floor (its bottom padding), never clipped */
.my .my-empty{overflow:visible}
.my .my-empty .cp-peek{align-self:end}

/* My learning's courses as two carousels (includes/learn/my.php, course.js): Continue (started, last accessed first)
   and Courses (filtered by status and level). Scroll-snap, swipe on touch, arrows where there is a pointer that
   hovers, no scrollbar, a fade on the side that has more. Heights are fixed or reserved, so nothing moves. */
.my-row{margin:40px 0 0}
.my-row-h{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.my-row-h h2.my-h{margin:0}
.my-cont{display:none}
.my-has .my-cont{display:block}
.my-nav{display:flex;gap:8px}
.my-nav[hidden]{display:none!important}
@media (hover:none),(pointer:coarse){.my-nav{display:none!important}}
.my-nav button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 2px var(--rule-2);cursor:pointer}
.my-nav button:hover:not([disabled]){box-shadow:inset 0 0 0 2px var(--study)}
.my-nav button[disabled]{color:var(--ink-3);opacity:.55;cursor:default}
.my-nav button:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.my-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.my-track{display:flex;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:8px 2px 14px;margin:6px -2px 0;-webkit-mask-image:none;mask-image:none}
.my-track::-webkit-scrollbar{display:none}
.my-track:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px;border-radius:var(--r2,16px)}
@media (prefers-reduced-motion:no-preference){.my-track{scroll-behavior:smooth}}
.my-track.more-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
.my-track.more-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 56px),transparent)}
.my-track.more-l.more-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.my-track > .crs{flex:0 0 calc((100% - 3 * 18px) / 3.25);scroll-snap-align:start;min-width:0}
@media (max-width:900px){.my-track > .crs{flex-basis:calc((100% - 2 * 18px) / 2.25)}}
@media (max-width:600px){.my-track{gap:14px}.my-track > .crs{flex-basis:82%}}
.my-track > .crs[hidden]{display:none!important}
/* filters: one line that scrolls sideways if it must, so its height never changes. Dot chip: one choice; ticked
   square: several (the onboarding's chips) */
.my-fl{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px;margin:10px -2px 0}
.my-fl::-webkit-scrollbar{display:none}
@media (max-width:600px){.my-fl{padding-right:32px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}}
.my-fl [hidden]{display:none!important}
.my-chip{position:relative;display:inline-flex;flex:none;cursor:pointer}
.my-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.my-chip > span{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:12px;background:var(--seg-track,var(--sunk));color:var(--ink);font-weight:600;font-size:15px;white-space:nowrap;box-shadow:inset 0 0 0 2px transparent}
.my-chip > span::before{content:'';flex:none;width:14px;height:14px;box-shadow:inset 0 0 0 2px var(--ink-3)}
.my-rad > span::before{border-radius:50%}
.my-tog > span::before{border-radius:4px}
.my-chip:hover > span{box-shadow:inset 0 0 0 2px var(--rule-2)}
.my-chip input:checked + span{background:var(--study-tint);color:var(--study-ink);font-weight:700;box-shadow:inset 0 0 0 2px var(--study)}
.my-rad input:checked + span::before{box-shadow:inset 0 0 0 2px var(--study),inset 0 0 0 4px var(--study-tint);background:var(--study)}
.my-tog input:checked + span::before{box-shadow:none;background:var(--study) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.my-chip input:focus-visible + span{outline:3px solid var(--study-ink);outline-offset:2px}
.my-nomatch{margin:8px 0 0;color:var(--ink-2)}
.my-all{padding:0;border:0;background:none;color:var(--study-ink);font:700 15px/1.4 var(--f-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* "Recommended for you": on the cover, so the card keeps its height */
.my-cv{position:relative;display:block}
.my-rec{display:none}
.is-rec .my-rec{display:block;position:absolute;left:10px;top:10px;padding:5px 10px;border-radius:999px;background:var(--surface);color:var(--study-ink);font:700 13px/1.2 var(--f-body);box-shadow:0 1px 3px rgba(0,0,0,.18)}
/* Continue: compact cards of one fixed height (course.js draws them; the row's height is held before they arrive) */
.my-track-c{min-height:144px;box-sizing:content-box}
.my-cc{--c:var(--blue);--ci:var(--blue-ink);flex:0 0 calc((100% - 2 * 18px) / 2.6);display:grid;grid-template-columns:132px minmax(0,1fr);gap:0 16px;align-items:center;height:144px;box-sizing:border-box;padding:10px;background:var(--surface);border-radius:var(--r2,16px);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;scroll-snap-align:start;min-width:0}
.my-cc[data-s="science"]{--c:var(--study);--ci:var(--study-ink)}
.my-cc[data-s="cs"]{--c:var(--play);--ci:var(--play-ink)}
.my-cc[data-s="music"]{--c:var(--music);--ci:var(--music-ink)}
.my-cc:hover{box-shadow:var(--shadow),inset 0 0 0 2px var(--c)}
.my-cc:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.my-cc .crs-cov{display:block;width:132px;border-radius:12px;overflow:hidden}
.my-cc .crs-th{width:100%;height:auto}
.my-cc-b{display:flex;flex-direction:column;gap:5px;min-width:0}
.my-cc-t,.my-cc-go{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}   /* two lines at most: the card's height is fixed */
.my-cc-t{font:600 17px/1.25 var(--f-display)}
.my-cc .my-pg{margin:0}
.my-cc .my-pg i{background:var(--gold)}
.my-cc-n{color:var(--ink-3);font-size:14px}
.my-cc-go{color:var(--ci);font-weight:700;font-size:15px;line-height:1.3}
@media (max-width:900px){.my-cc{flex-basis:calc((100% - 18px) / 1.6)}}
@media (max-width:600px){.my-cc{flex-basis:88%;grid-template-columns:96px minmax(0,1fr);gap:0 12px}.my-cc .crs-cov{width:96px}}

/* Practise (owner: no blank space under an empty Mistakes): each card its own height (align-items:start above), and
   one useful line with a quiet link while there are no mistakes at all (practice-panel.php) */
.lr-panel.pp-strip .pp-mk-hint{margin:6px 0 0;color:var(--ink-3);font-size:15px;line-height:1.45;text-wrap:pretty}
.lr-panel.pp-strip.pp-rsv-mk .pp-mk-hint{display:none}
.pp-mk-test{color:var(--study-ink);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;white-space:nowrap}
@media (max-width:1023px){.lr-panel.pp-strip .pp-mk-hint{grid-column:1 / -1;margin-top:2px}}
.my .ln-lead a{color:var(--study-ink);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* the course's parts as folds (components/fold.php): the part's header is the summary; space separates parts, as before */
.cp-fold.bl-fold,.cp-fold.bl-fold+.cp-fold.bl-fold{border:0;box-shadow:none}
.cp-fold>.cp-ah.bl-fold-s{min-height:56px;padding:0;color:inherit}
.cp-fold>.cp-ah>.bl-fold-t{display:block;font:inherit;color:inherit}
.cp-fold:not([open])>.cp-ah{margin-bottom:0}
.cp-fold>.bl-fold-b{padding:0}
.cp-more{margin-top:40px}.cp-more h2.bl-fold-t{margin:0}.cp-more .bl-fold{border:0}   /* set apart by space, not a hairline (brainlag.css .bl-fold+.bl-fold) */
/* Mistakes with nothing to review (owner, 12 Oct): one compact row, icon, Mistakes, a muted "All clear" with a tick and
   a small outline button on the right; the row itself is not a link. With mistakes (.has-mk) the card is as before. */
.pp-mkr{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;min-width:0}
.pp-mkr .pp-t{margin:0!important}
.pp-clear{display:inline-flex;align-items:center;gap:6px;color:var(--ink-3);font-weight:600;font-size:15px;white-space:nowrap}
.pp-clear svg{color:var(--study-ink)}
/* The compact row only where this browser has no open mistakes: when the head script has marked .pp-rsv-mk (there are
   some), the card is drawn as the full one from the first paint, its count and button room held (CLS, 12 Oct) */
.pp-mkc.has-mk .pp-clear,.pp-mkc.has-mk .pp-mk-hint,.pp-rsv-mk .pp-mkc .pp-clear{display:none}
.lr-panel:not(.pp-rsv-mk) .pp-card.pp-mkc:not(.has-mk){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px}
.lr-panel:not(.pp-rsv-mk) .pp-mkc:not(.has-mk) .lr-fill{grid-column:1 / -1}
.lr-panel:not(.pp-rsv-mk) .pp-mkc .lr-fill:empty{display:none}
.lr-panel:not(.pp-rsv-mk) .pp-mkc:not(.has-mk) .pp-mk-hint{grid-column:2;grid-row:1;margin:0}
.pp-pill{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--study-ink);background:transparent;color:var(--study-ink);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}
.pp-pill:hover{background:var(--study-tint)}
.pp-pill:active{transform:scale(.98)}
.pp-pill:focus-visible{outline:3px solid var(--study);outline-offset:2px}

/* ---- owner, 12 Oct ("looks a bit claude generated"; GCSE and A-level course pages, not the music grades, which have
   their own page and words in course-music.css). Crafted, not templated:
   1. the header button is flat: no lip, no one-sided border, in any state;
   2. a unit's meta (time, Free, Plus) 12px apart;
   3. two columns of lessons as a grid that fills down then across (1 2 3 | 4 5), so the rows of both columns share
      their lines; the row count per list from its length (CSS :has, no inline style under the CSP);
   4. the Up next row: no box and no button, a teal ring around its circle, the title in bold and the words "Up next"
      (or "Step n of m") in teal where the step was; its Free badge stays, like every free lesson's;
   5. "Some lessons need Plus": small, muted, a lock, a 44px link to the plans, no price;
   6. revision notes: the icon, the label, the title on one row, a gap between them. */
.cp:not(.cm) .cp-go,.cp:not(.cm) .cp-go:hover,.cp:not(.cm) .cp-go:active{--lip:0px;box-shadow:none;border:0}
.cp:not(.cm) .cp-m{gap:4px 12px}
.cp:not(.cm) .cp-m > span{gap:5px}
@media (min-width:1000px){
  .cp:not(.cm) .cp-ls>.lsr-list{display:grid;columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(3,auto);column-gap:20px;row-gap:2px}
  .cp:not(.cm) .cp-ls>.lsr-list>.lsr+.lsr{margin-top:0}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(1):last-child){grid-template-rows:repeat(1,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(2):last-child){grid-template-rows:repeat(1,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(3):last-child){grid-template-rows:repeat(2,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(4):last-child){grid-template-rows:repeat(2,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(5):last-child){grid-template-rows:repeat(3,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(6):last-child){grid-template-rows:repeat(3,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(7):last-child){grid-template-rows:repeat(4,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(8):last-child){grid-template-rows:repeat(4,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(9):last-child){grid-template-rows:repeat(5,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(10):last-child){grid-template-rows:repeat(5,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(11):last-child){grid-template-rows:repeat(6,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(12):last-child){grid-template-rows:repeat(6,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(13):last-child){grid-template-rows:repeat(7,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(14):last-child){grid-template-rows:repeat(7,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(15):last-child){grid-template-rows:repeat(8,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(16):last-child){grid-template-rows:repeat(8,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(17):last-child){grid-template-rows:repeat(9,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(18):last-child){grid-template-rows:repeat(9,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(19):last-child){grid-template-rows:repeat(10,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(20):last-child){grid-template-rows:repeat(10,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(21):last-child){grid-template-rows:repeat(11,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(22):last-child){grid-template-rows:repeat(11,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(23):last-child){grid-template-rows:repeat(12,auto)}
  .cp:not(.cm) .cp-ls>.lsr-list:has(>.lsr:nth-child(24):last-child){grid-template-rows:repeat(12,auto)}
}
.cp:not(.cm) .lsr.is-next .lsr-go{background:none;box-shadow:none;padding-top:6px;padding-bottom:6px}
.cp:not(.cm) .lsr.is-next .lsr-go:hover{background:var(--paper)}
.cp:not(.cm) .lsr.is-next .lsr-t{font-weight:700;color:var(--ink)}
.cp:not(.cm) .lsr.is-next .lsr-t::before{display:none}
.cp:not(.cm) .lsr.is-next .lsr-m{box-shadow:inset 0 0 0 2px var(--blue-ink),0 0 0 3px var(--surface),0 0 0 5px var(--study)}
.cp:not(.cm) .lsr.is-next .lsr-go:hover .lsr-m{box-shadow:inset 0 0 0 2px var(--blue-ink),0 0 0 3px var(--paper),0 0 0 5px var(--study)}
.cp:not(.cm) .lsr.is-next .lsr-do{background:none;padding:0;border-radius:0;color:var(--study-ink)}
.cp:not(.cm) .lsr.is-next .lsr-do::after{display:block}
.cp:not(.cm) .lsr.is-next .lsr-free{display:inline-flex}
.cp:not(.cm) .cp-plus-l{margin:2px 0 0}
.cp:not(.cm) .cp-plus-l a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ink-3);font-weight:600;text-decoration:none}
.cp:not(.cm) .cp-plus-l a:hover span{text-decoration:underline;text-underline-offset:3px}
.cp:not(.cm) .cp-plus-l a:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px;border-radius:6px}
.cp:not(.cm) .cp-plus-l svg{flex:none;width:13px;height:13px;color:var(--ink-3)}
.cp:not(.cm) .cp-res{grid-template-columns:22px auto minmax(0,1fr);gap:12px;min-height:44px;box-sizing:border-box}
.cp:not(.cm) .cp-res-k{color:var(--ci,var(--blue-ink));white-space:nowrap}
.cp:not(.cm) .cp-res-t{min-width:0;color:var(--ink-2);text-wrap:pretty}
.cp:not(.cm) .cp-res:hover .cp-res-t{color:var(--ink)}
/* 200% zoom on a phone (195 px, LRN-06): a note's title under its label, not squeezed to nothing beside it; a compound in
   a topic list may break at its hyphen there; the hub's button words wrap */
@media (max-width:300px){
  .cp:not(.cm) .cp-res{grid-template-columns:22px minmax(0,1fr)}
  .cp:not(.cm) .cp-res-t{grid-column:2}
  .cp .nw{white-space:normal}
  .cp .cp-go span,.cp .po .po-go span{white-space:normal;overflow-wrap:break-word;text-overflow:clip}
  .cp-ah .cp-vig{display:none}   /* (the part's picture: the title needs the width) */
}
/* owner, 12 Oct (review): the button's title never ellipsises; it wraps to two balanced lines, the step under it, the
   arrow centred on the whole. "Part way through? Find my level" is for fresh learners only: gone once there is any
   progress in the course (html.cp-prog-on, set before the first paint), unless the box holds a place or a class link */
.cp:not(.cm) .cp-go span{white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance}
/* mobile sweep, 19 Oct (LRN-12, LRN-13): the unit page's Start button wraps its lesson's name instead of ending in "…",
   and the time under it is at full strength (at .85 it was 3.89:1 on the button); the unit page's revision-note links
   are 44 px rows */
.ln-cta .cp-go span{white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance}
.cp-go small{opacity:1}
.ln-notes a{display:inline-flex;align-items:center;min-height:44px}
.cp:not(.cm) .cp-go .cp-go-ic{align-self:center}
.cp-prog-on .cp:not(.cm) #plHere:not(:has([data-plc],.plc-offer)){display:none}

/* ---- The unit page (owner, 12 Oct: "should be formatted nicer"; includes/learn/index.php view unit). The lesson list
   at a readable width with each status as small words under its title; the course page's Start/Continue button in
   place of Noodle's bubble; the aside a card that starts level with the list; Practise and test two across on a wide
   screen. Scoped to .ln-main: the rows are shared with the course page. */
.ln-main .ln-cta{margin:20px 0 0}
.ln-main .lm-scope{max-width:680px}
/* each lesson's status from this browser's progress, the same source as the Start/Continue button (lesson-rows.js
   data-st): "In progress" (read, not practised) in teal, "Done" muted, nothing on a lesson not started; the mastery
   word (learn-mastery-ui.js) stays off this page */
.ln-main .lm-scope:not([data-music]) .lsr{grid-template-columns:minmax(0,1fr)}
.ln-main .lm-scope .lm-st{display:none}
.ln-main .lsr[data-st="read"] .lsr-t::after,.ln-main .lsr[data-st="done"] .lsr-t::after{display:block;margin-top:3px;font:600 13.5px/1.2 var(--f-body)}
.ln-main .lsr[data-st="read"] .lsr-t::after{content:"In progress";color:var(--study-ink)}
.ln-main .lsr[data-st="done"] .lsr-t::after{content:"Done";color:var(--ink-3)}
/* Practise and test: two across on a wide screen */
@media (min-width:760px){.ln-main .ln-path > .ln-units{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.ln-main .ln-path > .ln-units > li{display:grid}}
.ln-main .ln-pt a{grid-template-columns:minmax(0,1fr) 20px;column-gap:12px;align-items:center}
.ln-main .ln-pt .t,.ln-main .ln-pt .d{grid-column:1}
.ln-pt-ch{grid-column:2;grid-row:1 / span 2;color:var(--ink-3)}
.ln-main .ln-pt a:hover .ln-pt-ch{color:var(--study-ink)}
.ln-pt-plus{display:inline-block;margin-inline-start:8px;padding:1px 9px;border-radius:999px;background:color-mix(in srgb,var(--gold) 26%,transparent);color:var(--gold-ink);font:700 12.5px/1.5 var(--f-body);vertical-align:3px}
/* the aside: one card in the Practise cards' style, its top level with the first lesson */
@media (min-width:980px){.ln-main .ln-aside{align-self:start;margin-top:calc(26px + 44px + 12px)}}
.ln-main .ln-aside{padding:18px 20px 8px;border-radius:14px;background:var(--sunk)}
.ln-main .ln-aside h2{margin-top:0}
.ln-specf{margin:12px 0 0;border-top:2px solid var(--rule)}
.ln-specf > summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;cursor:pointer;list-style:none}
.ln-specf > summary::-webkit-details-marker{display:none}
.ln-specf > summary h2{margin:0!important;font-size:17px}
.ln-specf > summary .chev{flex:none;color:var(--ink-3);transition:transform .2s ease}
.ln-specf[open] > summary .chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.ln-specf > summary .chev{transition:none}}

/* ================================================================ a unit card on a phone (owner, 19 Oct: "border-radius
   error and too cramped", Unit 2 at 390, dark): under 600 px the card is one column: a small "Unit 2" label, then the
   title the full width (never clipped), the facts on one wrapping row (each fact whole), and "5 lessons" and "Exam
   boards" as full-width 44 px rows, their chevrons at the right, at one x. One object: the panels inside keep the
   card's corners less its inset (concentric). Desktop unchanged. */
@media (max-width:599px){
  .cp:not(.cm) .cp-uh{display:block;padding:16px}
  .cp:not(.cm) .cp-u.is-shut .cp-uh{padding-bottom:10px}
  .cp:not(.cm) .cp-u .n{display:flex;align-items:baseline;gap:5px;width:auto;height:auto;margin:0 0 4px;padding:0;border-radius:0;background:none;color:var(--ci)}
  :root[data-theme="dark"] .cp:not(.cm) .cp-u .n,.cp:not(.cm) .cp-u.is-current .n,.cp:not(.cm) .cp-u.is-done .n,:root[data-theme="dark"] .cp:not(.cm) .cp-u.is-current .n,:root[data-theme="dark"] .cp:not(.cm) .cp-u.is-done .n{background:none;color:var(--ci)}
  .cp:not(.cm) .cp-u .n small,.cp:not(.cm) .cp-u .n b{margin:0;font:700 13.5px/1.2 var(--f-body);display:inline}
  .cp:not(.cm) .cp-u .n b svg{width:15px;height:15px;vertical-align:-2px}
  .cp:not(.cm) .cp-ub{padding-top:0}
  .cp:not(.cm) .cp-u .t{font-size:19px;overflow-wrap:anywhere}
  .cp:not(.cm) .cp-u .cp-m{margin:6px 0 0;gap:4px 14px}
  .cp:not(.cm) .cp-u .cp-m > span{white-space:nowrap}
  .cp:not(.cm) .cp-u .cp-row{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:6px 0 0}
  .cp:not(.cm) .cp-u .cp-tog,.cp:not(.cm) .cp-u .cp-eb summary{display:flex;width:100%;justify-content:space-between;align-items:center;min-height:44px;margin:0;box-sizing:border-box}
  .cp:not(.cm) .cp-u .cp-rev:not([hidden]){display:flex;min-height:44px;align-items:center}
  .cp:not(.cm) .cp-u .cp-eb{width:100%}
  .cp:not(.cm) .cp-ls{padding:4px 8px 10px}
  .cp:not(.cm) .cp-u .cp-res{border-radius:calc(var(--r3,20px) - 8px)}
  .cp:not(.cm) .cp-u .lsr-go{border-radius:calc(var(--r3,20px) - 8px)}
}