/* 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 */
.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:0 4px 0 var(--study-btn-lip);
  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:translateY(4px);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 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:1fr}}
.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:block;padding:7px 2px;color:var(--ink);font-weight:600}
.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 .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:42px;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:0 3px 0 var(--study-btn-lip);transition:background-color 180ms var(--ease-out),transform 180ms var(--ease-out)}
.lm-cta:hover{background:var(--study-btn-hover)}
.lm-cta:active{transform:translateY(2px);box-shadow:0 1px 0 var(--study-btn-lip)}
.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:6px;margin:4px 0 22px;max-width:720px}
.ln-tip-nd{flex:none;width:80px;height:auto;margin-bottom:-4px}
.ln-tip-b{position:relative;margin:0 0 18px;padding:12px 16px;background:var(--surface);border:2px solid var(--say-edge);border-radius:16px;color:var(--ink-2);line-height:1.5;font-size:16px}
.ln-tip-b b{color:var(--ink)}
.ln-tip-b::before,.ln-tip-b::after{content:'';position:absolute;width:0;height:0;border-style:solid;border-color:transparent}   /* one outline round body and tail (learn.css .lq-sayb) */
.ln-tip-b::before{left:-14px;bottom:12px;border-width:11px 14px 11px 0;border-right-color:var(--say-edge)}
.ln-tip-b::after{left:-10.5px;bottom:14.5px;border-width:8.5px 11px 8.5px 0;border-right-color:var(--surface)}
.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:0 5px 0 var(--rule-2)}
.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:0 5px 0 var(--rule-2)}
.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:32px}
.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:32px;padding:0;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:36px;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)}
.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:32px;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}
.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}.cp-sw.is-grades a,.cp-sw.is-grades [aria-current]{flex:0 0 auto}}

/* 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{color:var(--study-ink);font-weight:700;font-size:15.5px;white-space:nowrap}
.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: across the strip, above its three cards; two rows' room held */
.ms-on .lr-panel.pp-strip .pp-card.pp-rvc{display:grid;grid-column:1 / -1;grid-template-columns:minmax(0,1fr);grid-template-areas:none;align-items:start;padding:18px 20px}
.lr-panel.pp-strip .pp-rv{background:var(--blue-tint);color:var(--blue-ink)}
.ms-on .lr-panel.pp-strip .pp-card.pp-rvc > *{grid-area:auto;margin-left:0}
.pp-rvl{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;min-height:60px}
.pp-rvl > li{margin:0;min-width:0}
.pp-rvi{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:14px;align-items:center;height:60px;padding:0 14px;border-radius:14px;background:var(--paper);color:var(--ink);text-decoration:none;box-sizing:border-box}
.pp-rvi:hover .pp-rvgo{text-decoration:underline;text-underline-offset:3px}
.pp-rvi:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.pp-rvn{grid-column:1;font:600 16px/1.3 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-rvm{grid-column:1;display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;color:var(--ink-3)}
.pp-rvs{flex:none;font-weight:700;font-size:12px;padding:2px 7px;border-radius:7px;color:var(--ci,var(--blue-ink));box-shadow:inset 0 0 0 2px var(--ct,var(--blue-tint))}
.pp-rvs[data-st="Fading"]{background:none;box-shadow:inset 0 0 0 2px var(--gold);color:var(--gold-ink)}
.pp-rvu{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-rvgo{grid-column:2;grid-row:1 / span 2;font-weight:700;color:var(--study-ink);font-size:15px}
.pp-rv0{grid-column:1 / -1;align-self:center;color:var(--ink-2)}
.pp-rvc .pp-note{margin:10px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-3);text-wrap:pretty}
@media (max-width:699px){.pp-rvl{grid-template-columns:1fr;min-height:130px}}
/* 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}
@media (max-width:600px){.my-started .my .my-c-b{min-height:156px}.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{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}