/* A course's overview page on brainlag.space's course-page template (tools/track_page.py; owner, 15 Oct 2026). The look
   is Learn's own assets/learn/course.css (and brainlag.css, place.css, learn-review.css), linked from the main site.
   This sheet loads on the course pages only, after Code's site.css, and only evens out what site.css sets for the whole
   Code site that the template does not expect (img and svg as blocks, .n in monospace, headings, .wrap's gutter).
   Everything is scoped under .cbl-cp, the template's wrapper; :where() keeps these at element weight, so Learn's own
   class rules still decide, and nothing outside the wrapper (the header, the footer, lessons, the playground,
   projects, the library) changes. Locks follow html.is-entitled (app.js Account), as Learn's follow Plus. */

/* the page, as Learn's (learn.css body.ln, course.php main.wrap.cp) */
body.cbl-course { background: var(--paper); }
/* one container with the main site's header (P0, 19 Oct 2026: the header ran 1480 wide at 1920 and the page 1100):
   brainlag.css's .wrap, var(--wrap) and its 24px gutter */
.cbl-cp.wrap { width: 100%; max-width: var(--wrap, 1200px); margin: 0 auto; padding: 0 24px 48px; box-sizing: border-box; }
@media (max-width: 640px) { .cbl-cp.wrap { padding: 0 16px 40px; } }
.cbl-cp { font: 400 17px/1.55 var(--f-body, inherit); color: var(--ink); }

/* site.css: img, svg { display: block } and .n in monospace */
:where(.cbl-cp) svg, :where(.cbl-cp) img { display: inline; }
:where(.cbl-cp) .n { font-family: inherit; font-variant-numeric: normal; }

/* site.css h1 to h4 (margin 0, weight 650, its own spacing): brainlag.css's again */
:where(.cbl-cp) :is(h1, h2, h3) { font-family: var(--f-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; color: var(--ink); text-wrap: balance; }
:where(.cbl-cp) h1 { font-size: clamp(28px, 4.2vw, 40px); margin: 0 0 8px; }
:where(.cbl-cp) h2 { font-size: clamp(21px, 2.4vw, 26px); margin: 0 0 12px; }
:where(.cbl-cp) h3 { font-size: 18px; margin: 0 0 6px; }
:where(.cbl-cp) h4 { font-weight: 600; letter-spacing: normal; }
:where(.cbl-cp) p { margin: 0 0 12px; }

/* the hero's band meets the tabs row above it, as a Learn course's meets its header (the wrapper has no top padding
   here, so no gap either): a 20px margin showed the page colour as a thin band between them (P0, 19 Oct 2026) */
.cbl-cp > .cp-hero { margin-top: 0; }

/* a Part that holds one unit of its own name names it once (track_page.py, course.php): the card keeps its badge,
   its facts and its lessons */
.cbl-cp .cp-u.is-same .cp-m { margin-top: 2px; }

/* the Part's drawing: the course's guide (Code's own friends) beside one object */
.cbl-cp .cp-vig-p.crs-art { fill: none; stroke: var(--ci); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

/* a unit with nothing free: its badge shows a lock, its number once the plan is there */
.cbl-cp .cp-u .n .cbl-n-n { display: none; }
.cbl-cp .cp-u .n .cbl-n-lk svg { width: 18px; height: 18px; display: block; }
html.is-entitled .cbl-cp .cp-u .n .cbl-n-lk { display: none; }
html.is-entitled .cbl-cp .cp-u .n .cbl-n-n { display: inline; }

/* locks, Free tags and the plan line: for anyone without the plan (Learn shows a Plus member none of them) */
html.is-entitled .cbl-cp :is(.lsr-lk, .lsr-free, .cp-m .is-plus, .cbl-pj-lk, .cbl-locked-only) { display: none !important; }

/* a project's lock, sized as a lesson's */
.cbl-cp .cbl-pj-lk { width: 14px; height: 14px; margin-right: 6px; vertical-align: -1px; color: var(--ink-3); display: inline-block; }

/* the placement offer (assets/js/placement.js) where Learn's "Find my level" sits, in its words' style (place.css .plc):
   one quiet line, the three choices behind it */
.cbl-cp .plc .place-offer.po-quiet { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.cbl-cp .po-quiet .po-line { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink-2); font: 400 15.5px/1.35 var(--f-body); text-align: start; cursor: pointer; }
.cbl-cp .po-quiet .po-line span { font-weight: 700; color: var(--study-ink); text-decoration: underline; text-underline-offset: 3px; }
.cbl-cp .po-quiet .po-line:focus-visible { outline: 3px solid var(--study-ink); outline-offset: 2px; border-radius: 8px; }
.cbl-cp .po-quiet .po-x { position: static; flex: none; width: 44px; height: 44px; order: 1; }
.cbl-cp .po-quiet .po-btns { order: 2; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.cbl-cp .po-quiet .po-btns[hidden] { display: none; }
.cbl-cp .po-quiet .po-btns .btn { flex: 0 1 auto; min-height: 44px; }
/* its room, held from the first paint when it will show (track_page.py PLC_RESERVE), so nothing below moves */
.cbl-cp .plc.plc-on { min-height: 44px; }

/* site.css's progress panel shares the practice cards' names (.pp-foot a): the card's button keeps Learn's colours */
.cbl-cp .pp-foot a.lr-go { color: var(--on-study-btn); font-weight: 700; }

/* What you can do at the end (outcome-list.php's rule: every row a tick) */
.cbl-cp .cbl-can { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.cbl-cp .cbl-can li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ink-2); line-height: 1.5; }
.cbl-cp .cbl-can-tk { display: block; margin-top: 2px; color: var(--ci, var(--study-ink)); }

/* the course switcher (Python, Web, SQL, C): tabs under the lead, not a pill group beside the title (P0, 19 Oct 2026) */
.cbl-cp .cp-sw { display: flex; flex-wrap: wrap; gap: 4px; width: auto; margin: 0 0 18px -12px; padding: 0; border-radius: 0; background: none; }
.cbl-cp .cp-sw a, .cbl-cp .cp-sw span { flex: none; justify-content: flex-start; min-height: 44px; padding: 0 12px; border-radius: 0; background: none; box-shadow: none; border-bottom: 3px solid transparent; font: 600 15.5px/1 var(--f-body, inherit); color: var(--ink-2); }
.cbl-cp .cp-sw a:hover { background: none; color: var(--ink); border-bottom-color: var(--rule-2, currentColor); }
.cbl-cp .cp-sw [aria-current="page"] { background: none; box-shadow: none; color: var(--ink); border-bottom-color: var(--ci, var(--study-ink)); }

/* Practise: the Review card's row at the top, its title level with Daily 5's and GCSE practice's (P0, 19 Oct 2026: it
   floated in the middle of an empty card) */
.cbl-cp .lr-panel .pp-card.pp-mkc:not(.has-mk) { align-content: start; align-items: start; }

/* a 12 px floor for the units' "Unit" over their numbers (course.css sets 10.5 px) */
.cbl-cp .cp-u .n small { font-size: 12px; }