/* 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(--pink);--ci:var(--pink-ink);--ct:var(--pink-tint)}
.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{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin:16px 0 0;padding:0;color:var(--ink-2);font-size:15px}
.cp-facts b{font:700 20px/1 var(--f-display);color:var(--ci);margin-right:3px}
.cp-cta{margin:20px 0 0}
.cp-go{display:inline-flex;flex-direction:column;gap:2px;background:var(--study);color:#04161c;border-radius:14px;padding:12px 20px 13px;box-shadow:0 4px 0 var(--ln-lip,#08707a);
  transition:transform .09s cubic-bezier(.34,1.56,.64,1),box-shadow .09s,background-color .15s;max-width:100%}
.cp-go span{font-weight:700;font-size:17px;line-height:1.2}
.cp-go small{font-size:14px;line-height:1.3;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-go:hover{background:#12acb9}
.cp-go:active{transform:translateY(4px);box-shadow:0 0 0 var(--ln-lip,#08707a);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:flex}
}

/* 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 ease,color .15s ease}
.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:flex-end;gap:14px;padding:0 0 10px;margin:0 0 6px;border-bottom:2px solid var(--rule)}
.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:74px;border-radius:14px 14px 0 0;background:var(--ct);overflow:hidden}
.cp-vig-nd{position:absolute;left:0;bottom:-6px;width:72px;height:auto}
.cp-vig-p.crs-art{position:absolute;right:6px;top:10px;width:46px;height:46px;max-width:none}
.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-tag{color:var(--ink-2);font-weight:700;font-size:12.5px;border:1.5px solid var(--rule-2);border-radius:6px;padding:1px 6px}
.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}
.cp-papers-art{position:relative;background:var(--ct);border-radius:12px;min-height:170px;overflow:hidden}
.cp-exam{position:absolute;left:24px;bottom:-6px;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 li{border-bottom:1px solid var(--rule)}
.cp-links a{display:block;padding:10px 2px;color:var(--ink);font-weight:600}
.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 ease}
.cp-faq details[open] summary::after{transform:rotate(45deg)}
.cp-faq details p{margin:0 0 14px;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:150px minmax(0,1fr);gap:0 22px;padding:10px;align-items:center}
.my-continue .my-c-art{position:relative;height:140px;border-radius:12px;background:var(--ct);overflow:hidden}
.my-continue .my-c-art img{position:absolute;left:20px;bottom:-6px;width:104px;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:4px 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}
.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 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}
.my-tools{display:flex;flex-wrap:wrap;gap:10px 28px;margin:32px 0 0}
.my-tools a{color:var(--study-ink);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@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(--rule-2);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{content:'';position:absolute;left:-10px;bottom:16px;width:16px;height:16px;background:var(--surface);border-left:2px solid var(--rule-2);border-bottom:2px solid var(--rule-2);transform:rotate(45deg)}
.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 72px;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}