/* Stellar public course pages (overview, unit, lesson), generated by tools/gen_course.py.
   Built on /_home/rework.css: same tokens, Inter at 400-500, near-black pills, hairlines, white canvas.
   Green only for the "included" checks, the small link arrows and the one swash under "Stellar". */

.cp main{display:block}

/* breadcrumb and back link: small grey text */
.cp-crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;margin:0;padding:0;list-style:none;font:400 14px/1.5 var(--font);color:var(--muted)}
.cp-crumbs li{min-width:0}
.cp-crumbs li+li::before{content:"/";margin:0 10px;color:#b4bcb8}
.cp-crumbs a{color:var(--muted)}
.cp-crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cp-crumbs [aria-current]{color:var(--ink)}
.cp-back{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font:500 15px/1.4 var(--font);color:var(--text)}
.cp-back svg{width:16px;height:16px;flex:none;transition:translate .15s}
.cp-back:hover{color:var(--ink)}
.cp-back:hover svg{translate:-3px 0}
svg.flip{transform:scaleX(-1)}

/* page head */
.cp-hero{padding:40px 0 88px}
.cp-hero-g{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:start;margin-top:56px}
.cp-label{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font:500 14px/1.4 var(--font);color:var(--muted)}   /* R13: the site eyebrow (about, courses) */
.cp-dot{width:3px;height:3px;border-radius:50%;background:#b4bcb8}
.cp-hero h1{margin-top:16px;font:400 clamp(40px,5vw,66px)/1.06 var(--font);letter-spacing:-.04em;color:var(--ink);overflow-wrap:anywhere}
.cp-lead{margin-top:24px;max-width:620px;font:400 18px/1.65 var(--font);color:var(--text)}
.cp-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.cp-ctas .btn{height:52px;padding:0 26px;font-size:16.5px}
.cp-ctas .btn svg,.final3-ctas .btn svg{width:17px;height:17px}

/* overview side: the course cover and "What is included" */
.cp-cover{margin:0}
.cp-cover img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:16px;border:1px solid var(--line);background:var(--soft-2)}
.cp-cover figcaption{margin-top:12px;font:400 14px/1.4 var(--font);color:var(--muted)}
.cp-inc{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.cp-inc h2{font:500 20px/1.3 var(--font);letter-spacing:-.015em;color:var(--ink)}
.cp-inc p{margin-top:8px;font:400 15px/1.6 var(--font);color:var(--muted)}
.cp-stats{margin:18px 0 0;padding:0;list-style:none}
.cp-stats li{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line);font:500 16px/1.3 var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
.cp-stats li:last-child{border-bottom:1px solid var(--line)}
.cp-stats svg{width:16px;height:16px;flex:none;color:var(--green)}

/* section head + numbered hairline list (units on the overview, lessons on a unit) */
.cp-sec{padding:0 0 112px}
.cp-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line)}
.cp-sec-head h2{font:500 clamp(30px,3.4vw,46px)/1.1 var(--font);letter-spacing:-.032em;color:var(--ink)}   /* R13: the home page's section H2 */
.cp-sec-head p{font:400 15px/1.4 var(--font);color:var(--muted)}
.cp-list{margin:0;padding:0;list-style:none}
.cp-list>li{border-bottom:1px solid var(--line)}
.ul-row,.ll-row{display:grid;align-items:center;gap:24px;padding:26px 4px;transition:background-color .15s}
.ul-row{grid-template-columns:52px minmax(0,1fr) auto auto}
.ll-row{grid-template-columns:minmax(0,1fr) auto;padding:22px 4px}
.ul-row:hover,.ll-row:hover{background:var(--soft)}
.ul-i{font:400 15px/1 var(--font);color:var(--muted);font-variant-numeric:tabular-nums}
.ul-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.ul-h{font:500 21px/1.3 var(--font);letter-spacing:-.015em;color:var(--ink)}
.ul-d{font:400 15px/1.55 var(--font);color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ul-n{font:400 14.5px/1 var(--font);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.ll-t{font:500 18px/1.4 var(--font);letter-spacing:-.01em;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.cp .go{display:inline-flex;align-items:center;gap:6px;font:500 15px/1.3 var(--font);color:var(--ink);white-space:nowrap}
.cp .go svg{width:16px;height:16px;flex:none;color:currentColor;transition:translate .15s,color .15s}
.ul-row:hover .go svg,.ll-row:hover .go svg{translate:3px 0;color:var(--ink)}
.ul-row:hover .ul-h,.ll-row:hover .ll-t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* previous / next */
.cp-pager{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 112px;padding-top:28px;border-top:1px solid var(--line)}
.cp-end .cp-pager{margin:72px 0 0}
.pg{display:flex;flex-direction:column;gap:8px;min-width:0}
.pg-next{text-align:right;align-items:flex-end;grid-column:2}
.pg-k{display:inline-flex;align-items:center;gap:8px;font:400 14px/1.3 var(--font);color:var(--muted)}
.pg-k svg{width:15px;height:15px}
.pg-t{font:500 17px/1.4 var(--font);color:var(--ink);overflow-wrap:anywhere}
/* swarm R44 (idle 1251 #3): a cross-unit "Next lesson" glued the unit name to the lesson title and
   wrapped to three right-aligned lines next to a one-line Previous; two tidy lines instead */
.pg-t .pg-u{display:block;font:400 13.5px/1.4 var(--font);color:var(--muted);margin-bottom:2px}
.pg-next .pg-t,.pg-prev .pg-t{max-width:420px}
.pg:hover .pg-t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ---------------- lesson ---------------- */
.cp-narrow{max-width:820px}
.cp-hero-l{padding-bottom:40px}
.cp-hero-s .cp-label{margin-top:44px}
.cp-hero-l h1{font-size:clamp(36px,4.4vw,56px);line-height:1.08}
.cp-hero-l .cp-lead{font-size:17px;color:var(--muted)}
.cp-body{padding:0 0 96px}
.cp-body .cp-narrow>*{padding-top:40px;border-top:1px solid var(--line)}

.cp-read{font:400 17.5px/1.78 var(--font);color:var(--text);overflow-wrap:break-word}
.cp-read>h2:first-child{margin-top:0}
.cp-read h2{margin-top:44px;font:500 clamp(24px,2.4vw,30px)/1.25 var(--font);letter-spacing:-.022em;color:var(--ink)}
.cp-read h3,.cp-read h4{margin-top:32px;font:500 20px/1.35 var(--font);letter-spacing:-.015em;color:var(--ink)}
.cp-read p{margin-top:18px}
.cp-read h2+div>p:first-child,.cp-read h2+p{margin-top:20px}
.cp-read strong,.cp-read b{font-weight:600;color:var(--ink)}
.cp-read a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cp-read ul,.cp-read ol{margin:16px 0 0;padding-left:1.35em}
.cp-read li{margin-top:8px}
.cp-read li::marker{color:var(--muted)}
.cp-read img{display:block;max-width:100%;height:auto;margin:28px auto;border-radius:12px;border:1px solid var(--line)}
.cp-read blockquote{margin:24px 0;padding:2px 0 2px 20px;border-left:2px solid var(--line-2);color:var(--muted)}
.cp-read hr{margin:36px 0;border:0;border-top:1px solid var(--line)}
.cp-read code{font:400 .9em/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--soft-2);border-radius:5px;padding:.1em .35em}
.cp-read pre code{background:none;padding:0;border-radius:0}

/* key terms: ink on pale grey, the same weight as the text around them */
.term{color:var(--ink);font-weight:500;background:var(--soft-2);border-radius:5px;padding:.08em .32em;-webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:nowrap;max-width:100%}
.term.term-snug{padding-right:.1em}
@media (max-width:720px){.term{white-space:normal;overflow-wrap:break-word}}

/* display maths on a white card with a hairline; scrolls inside its box on a phone */
.mathbox{margin:26px 0;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow-x:auto;overflow-y:hidden;text-align:center}
.mathbox>div,.mathbox>div>div{min-width:0}
.mathbox .katex-display{margin:0}
.cp-read .katex{font-size:1.08em;color:var(--ink)}
.cp-read p .katex{white-space:nowrap}

/* timelines: numbered steps on a hairline, grey dots for bullet lists */
.tl{margin:24px 0}
.tl-steps,.tl-dots{list-style:none;padding:0!important;margin:0!important;position:relative}
.tl-steps{counter-reset:tl}
.tl-steps>li,.tl-dots>li{position:relative;margin:0;padding:0 0 22px 48px}
.tl-steps>li:last-child,.tl-dots>li:last-child{padding-bottom:0}
.tl-steps>li::before{counter-increment:tl;content:counter(tl);position:absolute;left:0;top:.15em;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);font:500 13.5px/1 var(--font);color:var(--ink);font-variant-numeric:tabular-nums;z-index:1}
.tl-steps>li:not(:last-child)::after{content:"";position:absolute;left:14.5px;top:2.2em;bottom:4px;width:1px;background:var(--line)}
.tl-dots>li::before{content:"";position:absolute;left:12px;top:.72em;width:7px;height:7px;border-radius:50%;background:#b4bcb8}

/* tables: hairline grid, pale grey header row */
.tbl{margin:26px 0;overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.tbl table{width:100%;border-collapse:collapse;font:400 15.5px/1.55 var(--font)}
.tbl th,.tbl td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl th+th,.tbl td+td{border-left:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl th{background:var(--soft);font-weight:500;color:var(--ink)}
.tbl p{margin:0}

/* code: light editor frame with a grey bar */
.code{margin:26px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.code-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 8px 18px;border-bottom:1px solid var(--line);background:var(--soft)}
.code-bar span{font:500 12.5px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.code-copy{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 14px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);font:500 13px/1 var(--font);color:var(--ink);cursor:pointer}
.code-copy:hover{box-shadow:inset 0 0 0 1px #a9b2ad}
.code-copy-status:not(.sr-only){margin:0;padding:12px 18px;border-top:1px solid var(--line);font:400 14px/1.5 var(--font);color:var(--muted)}
.code pre{margin:0;padding:16px 18px;overflow-x:auto;font:400 14px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);tab-size:4}
.code-out{border-top:1px solid var(--line)}
.code-out p{margin:0;padding:12px 18px 0;font:500 12.5px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.code-out pre{padding-top:10px;color:var(--text)}
.hljs-keyword,.hljs-built_in,.hljs-literal{color:var(--ink);font-weight:600}
.hljs-number{color:#a15f00}
.hljs-string{color:#b8412c}
.hljs-comment{color:#69726e;font-style:italic}
.hljs-title,.hljs-function{color:#0d7a73}
.hljs-type,.hljs-class{color:#0d7a73}
.hljs-variable,.hljs-operator,.hljs-params{color:var(--ink)}

/* reading checkpoint: the home page question card */
.cp-mcq{margin:36px 0;padding:28px;border:1px solid var(--line);border-radius:18px;background:#fff}
.cp-mcq figcaption{font:400 14px/1.3 var(--font);color:var(--muted)}
.cp-mcq .q{margin-top:14px;font:400 19px/1.55 var(--font);color:var(--ink)}
.cp-mcq .q p{margin:0}
.cp-mcq .q p+p{margin-top:10px}
.cp-mcq .choose{margin-top:20px;font:400 14px/1.3 var(--font);color:var(--muted)}
.cp-mcq .opts{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.cp-mcq .opts li{margin:0}
.cp-mcq .opt{width:100%;border:0;text-align:left;cursor:pointer;align-items:flex-start;padding:12px 14px;font:400 16px/1.5 var(--font);transition:box-shadow .15s,background-color .15s}
.cp-mcq .opt:hover{box-shadow:inset 0 0 0 1px #a9b2ad}
.cp-mcq .opt .k{margin-top:1px}
.cp-mcq .opt .ot{min-width:0}
.cp-mcq .opt .ot p{margin:0}
.cp-mcq .opt.sel:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}

/* "preview not available" */
.cp-na p{padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:var(--soft);font:400 16.5px/1.65 var(--font);color:var(--text)}

/* closing: the home final3 (type and two buttons under one hairline) */
.cp-end{padding:24px 0 112px}
.cp-end .final3 h2{font-size:clamp(34px,4.2vw,54px)}
.gsw{padding-bottom:.1em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5C42 5.5 98 3.2 197 5.6' fill='none' stroke='%2313863f' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom/100% .2em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}

@media (max-width:1024px){
  .cp-hero-g{grid-template-columns:1fr;gap:48px}
  .cp-hero-side{max-width:640px}
}
@media (max-width:720px){
  .cp-hero{padding:28px 0 56px}
  .cp-hero-g{margin-top:36px;gap:40px}
  .cp-hero h1{font-size:clamp(34px,9.4vw,44px);line-height:1.1}
  .cp-hero-l h1{font-size:clamp(30px,8.4vw,40px)}
  .cp-lead{font-size:16.5px;margin-top:18px}
  .cp-ctas{margin-top:28px}
  .cp-ctas .btn{flex:1 1 auto;padding:0 18px;font-size:15px}
  .cp-back{margin-top:22px}
  .cp-hero-s .cp-label{margin-top:30px}
  .cp-sec{padding-bottom:72px}
  .ul-row{grid-template-columns:36px minmax(0,1fr);gap:6px 12px;padding:20px 0}
  .ul-row .ul-n{grid-column:2;grid-row:2}
  .ul-row .go{grid-column:2;grid-row:3;margin-top:6px}
  .ul-h{font-size:18px}
  .ll-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:18px 0}
  .ll-t{font-size:16.5px}
  .cp-pager{grid-template-columns:1fr;gap:20px;margin-bottom:72px}
  .pg-next{grid-column:1}
  .cp-read{font-size:16.5px;line-height:1.75}
  .cp-body{padding-bottom:64px}
  .cp-body .cp-narrow>*{padding-top:28px}
  .mathbox{padding:14px 12px;text-align:left}
  .cp-mcq{padding:20px 16px}
  .cp-mcq .q{font-size:17px}
  .cp-end{padding-bottom:72px}
  .cp-end .final3-ctas .btn{flex:1 1 auto}
}
.cp-unit .cp-sec{padding-bottom:64px}
.cp-read>div{margin-top:18px}
.cp-read>h2+div{margin-top:20px}
.cp-body{padding-bottom:72px}
/* phones: the back link already leads up one level, so the long trail is dropped on unit and lesson pages */
@media (max-width:720px){.cp-crumbs{display:none}.cp-unit .cp-back,.cp-lesson .cp-back{margin-top:0}}
@media (max-width:720px){.cp-overview .cp-hero .cp-label{margin-top:4px}}
/* wave 2026-10-22: overviews close with the home final section; the units list above it needs less bottom space */
.cp-overview .cp-sec{padding-bottom:48px}
.cp-overview .cp-hero{padding-bottom:72px}
@media (max-width:720px){
  .cp-overview .cp-sec{padding-bottom:24px}
  .cp-overview .cp-hero{padding-bottom:48px}
  .cp-final .final3-ctas .btn{flex:1 1 auto}
  /* previous / next stack on phones: both read from the left, split by a hairline */
  .cp-pager>span:empty{display:none}
  .pg-next{text-align:left;align-items:flex-start}
  .pg-prev+.pg-next{padding-top:20px;border-top:1px solid var(--line)}
}
/* lesson without a preview: the note is plain reading text (no grey panel), then the unit's lessons on hairlines */
.cp-na p{padding:0;border:0;border-radius:0;background:none;font:400 18px/1.7 var(--font);color:var(--text);max-width:640px}
.cp-body .cp-narrow>.cp-inunit{margin-top:64px;padding-top:0;border-top:0}
.cp-inunit .cp-sec-head h2{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.022em}
.ll-here{cursor:default}
.ll-here:hover{background:none}
.ll-here .ll-t{color:var(--muted)}
.ll-k{font:400 14.5px/1.3 var(--font);color:var(--muted);white-space:nowrap}
/* swarm R49 (content-course): the current lesson read as a disabled row (grey title, grey text). Mark it like the
   unit map's current unit: shade fill, ink title at 500, and the status as a small outlined pill (.cp-phase) */
/* swarm R54 (idle 0704 #7): the fill poked 12px past the list on both sides; it now stays inside the column, the
   text keeps its place (16px in on desktop, 12px on phones) */
.ll-row.ll-here,.ll-row.ll-here:hover{background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:var(--radius-m);margin-inline:0;padding-inline:16px}
@media (max-width:720px){.ll-row.ll-here{padding-inline:12px}}
.ll-here .ll-t,.ll-here:hover .ll-t{color:var(--ink);font-weight:500;text-decoration:none}
.ll-here .ll-i{color:var(--ink)}
.ll-here .ll-k{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px var(--line-2);font:500 13px/1 var(--font);color:var(--text)}
@media (max-width:720px){
  .cp-na p{font-size:16.5px}
  .cp-body .cp-narrow>.cp-inunit{margin-top:48px}
}
/* the reading column starts right under its hairline, whatever the first element is */
.cp-read>:first-child,.cp-read>div:first-child>:first-child{margin-top:0}
/* display maths: no box, just air (hairlines are for structure); a trailing comma sits beside its formula */
.mathbox{display:flex;align-items:center;justify-content:safe center;gap:2px;margin:22px 0;padding:4px 0;border:0;border-radius:0;background:none}
.mathbox>div{min-width:0;flex:0 1 auto}
.mb-p{flex:none;font:400 1.08em/1 KaTeX_Main,"Times New Roman",serif;color:var(--ink)}
/* long trails stay on one line: the middle items and the current page shorten with an ellipsis */
.cp-crumbs ol{flex-wrap:nowrap}
.cp-crumbs li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.cp-crumbs li:first-child{flex:none}
.cp-crumbs li:not([aria-current]){flex-shrink:0;max-width:38%}
.cp-crumbs li[aria-current]{flex-shrink:1;min-width:0}
/* phones centre display maths like the desktop column; "safe" keeps a formula wider than the column from clipping, and .is-wide scrolls from its left edge */
@media (max-width:720px){.mathbox{padding:4px 0}}
.mathbox{margin:26px 0}
.mathbox.is-wide{padding:12px 14px;border:1px solid var(--line);border-radius:12px;justify-content:flex-start}
/* headlines break into even lines (no lone "Stellar" or one-word last line) */
.cp-hero h1,.cp-end .final3 h2,.cp-final .final3 h2,.cp-sec-head h2,.cp-read h2{text-wrap:balance}
.cp-lead,.final3-side p{text-wrap:pretty}
/* unit pages: the lesson list already ends on a hairline, so previous / next needs no second rule */
.cp-unit .cp-pager{border-top:0;padding-top:0}
/* tabular figures widened the hyphen in "Practice-Only Course"; these counts are not a column of numbers */
.cp-stats li{font-variant-numeric:normal}
/* final 2026-10-22: the closing headline is often shorter than the paragraph and buttons beside it, so the two columns
   line up at the top (bottom alignment pushed the headline 50 to 130 px below the paragraph) */
.cp-end .final3{align-items:start}

/* ================= POLISH WAVE phase 2 (2026-10-22): corners, shadows, motion and dark theme for the course pages =================
   The one system of DESIGN-PRINCIPLES.md "Corners, shadows and motion", with the tokens /_home/rework.css provides.
   Square: section rules, list rows, tables. 6: inline code and key terms. 10: images and the wide-formula frame.
   16: the cover, the checkpoint card, the code frame. Pill: buttons. Shadows rest / raised only. */

/* corners */
.cp-cover img{border-radius:var(--radius-l)}
.cp-read img,.mathbox.is-wide{border-radius:var(--radius-m)}
.cp-read code,.term{border-radius:var(--radius-s)}
.cp-read pre code{border-radius:0}
.tbl,.ul-row,.ll-row{border-radius:var(--radius-0)}
.code,.cp-mcq{border-radius:var(--radius-l)}
.code-copy{border-radius:var(--radius-pill)}

/* surfaces follow the theme: sheets on the paper, no hard-coded white or light grey */
.cp-cover img{background:var(--soft-2);box-shadow:var(--shadow-rest)}
.code,.cp-mcq{background:var(--sheet);box-shadow:var(--shadow-rest)}
.code-copy{background:var(--sheet)}
.tl-steps>li::before{background:var(--sheet)}
.cp-crumbs li+li::before{color:color-mix(in srgb,var(--muted) 60%,var(--paper))}
.cp-dot,.tl-dots>li::before{background:color-mix(in srgb,var(--muted) 60%,var(--paper))}
.code-copy:hover,.cp-mcq .opt:hover{box-shadow:inset 0 0 0 1px var(--muted)}
.cp-mcq .opt.sel:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
/* dashed hairlines between list items; the list still closes on a solid rule */
.cp-list>li{border-bottom:1px dashed var(--rule-dash)}
.cp-list>li:last-child{border-bottom:1px solid var(--line)}
.cp-stats li{border-top:1px dashed var(--rule-dash)}
.cp-stats li:first-child{border-top-color:transparent}
.cp-stats li:last-child{border-bottom:1px solid var(--line)}
/* swarm R2: empty state for a course with no preview units (centred note + ghost pill, closed by a hairline) */
.cp-empty{display:flex;flex-direction:column;align-items:center;gap:20px;padding:48px 16px 52px;text-align:center;border-bottom:1px solid var(--line)}
.cp-empty p{max-width:52ch;margin:0;font:400 16px/1.55 var(--font);color:var(--muted);text-wrap:balance}

/* motion: ease-out, 160 ms for colour and arrows, 240 ms for lifts */
.ul-row,.ll-row{transition:background-color var(--dur-1) var(--ease)}
.cp .go svg,.cp-back svg,.pg-k svg{transition:translate var(--dur-1) var(--ease)}
.pg-next:hover .pg-k svg{translate:3px 0}
.pg-prev:hover .pg-k svg{translate:-3px 0}
.pg{transition:transform var(--dur-1) var(--ease)}
.pg:active{transform:scale(.985);transition-duration:80ms}
.code-copy{transition:translate var(--dur-1) var(--ease),transform 80ms var(--ease),box-shadow var(--dur-1) var(--ease)}
.code-copy:hover{translate:0 var(--lift-btn)}
.code-copy:active{transform:scale(.98);transition-duration:80ms}
.cp-mcq .opt:active{transform:scale(.98);transition-duration:80ms}
.cp-mcq .opt{transition:box-shadow var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}

/* dark: the green swash and the code colours lift with the theme */
html.dark .gsw{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5C42 5.5 98 3.2 197 5.6' fill='none' stroke='%233fb26b' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
html.dark .hljs-keyword,html.dark .hljs-built_in,html.dark .hljs-literal{color:var(--ink)}
html.dark .hljs-type,html.dark .hljs-class{color:color-mix(in srgb,var(--teal) 55%,var(--ink))}
html.dark .hljs-number{color:color-mix(in srgb,var(--amber) 55%,var(--ink))}
html.dark .hljs-string{color:color-mix(in srgb,var(--coral) 60%,var(--ink))}
html.dark .hljs-comment{color:var(--muted)}
html.dark .hljs-title,html.dark .hljs-function{color:color-mix(in srgb,var(--teal) 55%,var(--ink))}
html.dark .cp-read img{background:#fff}

/* reduced motion: no lifts, no presses, no arrow nudges (colour changes stay) */
@media (prefers-reduced-motion:reduce){
  .ul-row,.ll-row,.cp .go svg,.cp-back svg,.pg-k svg,.code-copy,.cp-mcq .opt,.pg,a.um-row,.cp-more,.cp-ctas .cp-alt{transition:none!important}
  .code-copy:is(:hover,:active),.cp-mcq .opt:active,.pg:active,a.um-row:active,.cp-more:active,.cp-ctas .cp-alt:active{transform:none!important;translate:none!important}
  .ul-row:hover .go svg,.ll-row:hover .go svg,.pg-next:hover .pg-k svg,.cp-back:hover svg,.pg-prev:hover .pg-k svg{translate:none}
}
/* ================= end of POLISH WAVE phase 2 ================= */

/* final pass 2026-10-22: an inline formula wider than its paragraph (course.js adds .is-wide) scrolls sideways in
   its own box instead of being clipped at the page edge on phones */
.cp-read p .katex.is-wide{display:inline-block;max-width:100%;overflow-x:auto;overflow-y:hidden;vertical-align:middle;padding:2px 0 4px}
/* a unit the site has no page for (unreleased course) is listed as plain text, not a link */
.ul-row.is-off{cursor:default}
.ul-row.is-off:hover{background:none}
.ul-row.is-off:hover .ul-h{text-decoration:none}
/* final pass 2026-10-22: some course descriptions run words together without spaces in the source
   (ap-spanish-lit, ap-stats); the hero columns may shrink and such a run breaks instead of widening the page */
.cp-hero-g{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.cp-hero-copy,.cp-hero-side{min-width:0}
.cp-lead,.cp-read p,.ul-d,.ll-t{overflow-wrap:break-word}
@media (max-width:1024px){.cp-hero-g{grid-template-columns:minmax(0,1fr)}}
/* final pass 2: Imgur album links that stood in for images; list arrows are ink and turn green on hover only, as on the home course browser */
.cp-read .img-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;margin-top:8px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.cp-read .img-link:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px}
/* bug hunt: the lesson-list arrows stay ink on hover (green is for meaning only) */
.ul-row:hover .go svg,.ll-row:hover .go svg{color:var(--ink)}

/* ================= PROP 2026-10-22 evening: the home page system (DESIGN-PRINCIPLES.md "Current system") =================
   Bands from /_style/system.css: hero on paper with the faint graph grid, "What is included" as unboxed centred stats on
   a shade band with the dot field, lists and reading on white, the lesson close on shade. The cover is a white sheet
   that pops out of a bleed panel (36px inner corners) with a "Fig." caption. Tables are the compact system table. */
.cp .cp-hero.sx-band{padding-top:40px;padding-bottom:var(--sec-y)}
.cp .cp-hero-l.sx-band{padding-bottom:56px}
.cp .cp-sec.sx-band{padding-block:var(--sec-y)}
.cp-overview .cp-sec.sx-band,.cp-unit .cp-sec.sx-band{padding-bottom:var(--sec-y)}
.cp .cp-body.sx-band{padding-block:56px var(--sec-y)}
.cp .cp-end.sx-band{padding-block:var(--sec-y)}
.cp-body .cp-narrow>*{padding-top:0;border-top:0}
.cp-hero-g{align-items:center}
.cp-overview .cp-hero-g{align-items:start}
/* swarm R44 (idle 1251 #5): the unit page title sat 138px lower than the course page title because the
   hero grid centred the copy against the tall unit map; align to the top on unit pages too */
.cp-unit .cp-hero-g{align-items:start}
.cp-hero-side{min-width:0}

/* the cover: a white sheet in the bleed panel, Fig. caption with the course phase as a small chip */
.cp-stage{margin-top:0}
.cp-cover{margin:0}
.cp-sheet{overflow:hidden;padding:0}
.cp-sheet img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border:0;border-radius:0;box-shadow:none;background:var(--soft-2)}
.cp-cover figcaption{margin-top:0}
/* swarm R49 (content-course): on tablets the cover spans the full column and stood about 420px tall at 768,
   pushing the course facts below the fold. A wider crop there keeps it a banner */
@media (min-width:721px) and (max-width:1024px){.cp-sheet img{aspect-ratio:2/1}}
.cp-phase{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px var(--line-2);font:500 13px/1 var(--font);color:var(--text)}

/* "What is included": centred head, then the stats between hairlines */
.cp-inc{margin:0;padding-top:var(--sec-y-tight);border-top:0}
.cp-inc-head{max-width:640px;margin:0 auto 28px;text-align:center}
.cp-inc-head h2{font:500 22px/1.3 var(--font);letter-spacing:-.015em;color:var(--ink)}
.cp-inc-head p{margin-top:8px;font:400 15px/1.6 var(--font);color:var(--muted);text-wrap:balance}
.cp-stats.sx-stats{margin:0}
.cp-stats.sx-stats>div{border-top:0;padding-top:2px;padding-bottom:2px;font:inherit}
.cp-stats.sx-stats>div:last-child{border-bottom:0}
.cp-stats .cp-chk{display:flex;justify-content:center;align-items:center;height:var(--stat-num)}
.cp-stats .cp-chk svg{width:32px;height:32px;color:var(--green)}   /* round 7: drawn at the numbers' visual size (the mark fills ~14 of 24 units) */

/* lists sit on the white band; row hover is the paper shade */
.ul-row:hover,.ll-row:hover{background:var(--band-paper)}
.cp-unit .cp-sec .cp-pager{margin:48px 0 0}

/* product-like frames: the reading checkpoint and the code editor are white sheets that pop out */
.cp-mcq,.code{background:var(--sheet);border:1px solid var(--sheet-edge);border-radius:var(--radius-l);box-shadow:var(--shadow-raised)}
.code-bar,.tbl th{background:var(--band-paper)}

/* tables: the compact system table (7px by 16px cells, dashed row rules) on a white sheet with the rest shadow */
.tbl{border:1px solid var(--line);border-radius:var(--radius-l);background:var(--sheet);box-shadow:var(--shadow-rest)}
.tbl table{font:400 15px/1.45 var(--font);border-collapse:separate;border-spacing:0}
.tbl th,.tbl td{padding:var(--cmp-cell-y) var(--cmp-cell-x);border-bottom:1px dashed var(--rule-dash)}
.tbl th{padding-top:10px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.tbl th+th,.tbl td+td{border-left:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}

/* the closing section (home final): its graph paper at half strength, fading out at the edges, as on the home page */
.cp-final::before{opacity:var(--tex-opacity);
  --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 .5H0M.5 0v32' fill='none' stroke='%23000'/%3E%3C/svg%3E");
  -webkit-mask:var(--g) 50% 0/32px 32px,var(--tex-fade);-webkit-mask-composite:source-in;
  mask:var(--g) 50% 0/32px 32px,var(--tex-fade);mask-composite:intersect}
.cp-final{background:var(--band-paper)}

@media (max-width:1024px){
  .cp-hero-side{max-width:none}
}
@media (max-width:720px){
  .cp .cp-hero.sx-band{padding-top:28px}
  .cp .cp-body.sx-band{padding-top:40px}
  .cp-inc-head{margin-bottom:20px}
  .cp-unit .cp-sec .cp-pager{margin-top:32px}
}
/* the closing blocks have no rule above them, as on the home page (sections.css drops the final3 border there) */
.cp .final3{border-top:0!important;padding-top:24px;opacity:1!important}
.cp-end .final3,.cp-final .final3{opacity:1!important}
/* round 4 (content): unit and lesson rows keep 16px inside their hover box (12px on phones), so the arrow and the
   titles never touch its edge */
.ul-row,.ll-row{padding-left:16px;padding-right:16px}
@media (max-width:720px){.ul-row,.ll-row{padding-left:12px;padding-right:12px}}
/* the green check that stands in for a number ("Practice-Only Course") sits centred over its label: the system's
   .sx-stats b {display:block} was winning over .cp-chk, leaving the check at the cell's left edge */
.cp-stats.sx-stats .cp-chk{display:flex;justify-content:center;align-items:center}
/* round 5 (content): on phones every unit and lesson row repeated "Preview unit/lesson" on a line of its own, which
   made eight rows over 900px tall and read as a column of identical links. The whole row is the link, so the label
   collapses to its arrow at the row's right edge (font-size 0 keeps the words for screen readers) */
@media (max-width:720px){
  .ul-row{grid-template-columns:30px minmax(0,1fr) 20px;gap:4px 10px;padding-top:18px;padding-bottom:18px}
  .ul-row .ul-n{grid-column:2;grid-row:2}
  .ul-row .go{grid-column:3;grid-row:1/span 2;margin-top:0}
  .ll-row{grid-template-columns:minmax(0,1fr) 20px;gap:12px;padding-top:16px;padding-bottom:16px}
  /* R15: the current lesson has a text status instead of an arrow, so reserve its actual width. */
  .ll-row.ll-here{grid-template-columns:minmax(0,1fr) auto}
  .ul-row .go,.ll-row .go{justify-self:end;gap:0;font-size:0;color:var(--muted)}
  .ul-row .go svg,.ll-row .go svg{width:18px;height:18px}
}
/* round 17: the phone back link was a 21px-tall target; 10px of padding (taken back with negative margin) gives it a ~41px tap height without moving anything */
@media (max-width:720px){.cp-unit .cp-back,.cp-lesson .cp-back{min-height:44px;padding-block:11.5px;margin-block:-11.5px}}

/* swarm R21 (content): the unit hero's unit map. A white sheet in the bleed panel beside the title, as the course
   page's cover; rows are the course's units, this unit marked with the shade fill and ink, the rest linked.
   Only on wide screens: below 1025px the hero stays text only and the lesson list follows right after it */
.cp-unit-g{margin-top:44px}
.cp-unit-g h1{font-size:clamp(40px,4.4vw,60px);line-height:1.06}
.cp-unit-g .cp-hero-copy>.cp-label:first-child{margin-top:0}
.cp-umap{margin:0}
.cp-umap-sheet{padding:0 0 8px}
.um-head{display:flex;justify-content:space-between;padding:16px 24px 12px;border-bottom:1px solid var(--line);font:500 13px/1.2 var(--font);color:var(--muted)}
.um-list{list-style:none;margin:0;padding:8px}
.um-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:14px;align-items:center;min-height:44px;padding:10px 16px;border-radius:var(--radius-m);font:400 15px/1.35 var(--font);color:var(--text);transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.um-i,.um-c{font:500 13px/1 var(--font);color:var(--muted);font-variant-numeric:tabular-nums}
.um-t{overflow-wrap:break-word;text-wrap:pretty}
a.um-row:hover{background:color-mix(in srgb,var(--ink) 4%,transparent);color:var(--ink)}
a.um-row:active{transform:scale(.99);transition-duration:80ms}
a.um-row:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.um-row.is-here{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink);font-weight:500}
.um-row.is-here .um-i{color:var(--ink)}
.um-row.is-off{color:var(--muted)}
.um-more{margin:0;padding:4px 24px 8px;font:400 13px/1.4 var(--font);color:var(--muted)}
@media (max-width:1024px){.cp-umap-side{display:none}.cp-unit-g{display:block}.cp-unit-g{margin-top:0}.cp-unit-g .cp-hero-copy>.cp-label:first-child{margin-top:44px}}
@media (max-width:720px){.cp-unit-g .cp-hero-copy>.cp-label:first-child{margin-top:30px}}
@media (prefers-reduced-motion:reduce){.um-row{transition:none}}
/* swarm R21: the line that appears under a reading checkpoint once an option is picked */
.cp-mcq-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--rule-dash);font:400 14px/1.5 var(--font);color:var(--muted)}
.cp-mcq-note .link-arrow{font-size:14px;display:inline-flex;align-items:center;min-height:44px;padding-block:10px;margin-block:-10px}
.cp-mcq-note .link-arrow:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:8px}
/* swarm R24: powers and indices from the lesson prose (x³, H₂O) sit in the line without opening a gap above or below it */
.cp-read sup,.cp-read sub{font-size:.72em;line-height:0;position:relative;vertical-align:baseline}
.cp-read sup{top:-.5em}
.cp-read sub{top:.25em}
/* swarm R24 / R37 (idle 0117 #6) / R43: lesson rows carry their number in a muted column; minmax(52px, max-content) on desktop and minmax(36px, max-content) on phone fit multi-part numbers cleanly */
.ll-row{grid-template-columns:minmax(52px,max-content) minmax(0,1fr) auto}
.ll-i{font:400 15px/1 var(--font);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
/* swarm R31 / R37 (idle 0117 #6): a combined lesson ("3.2–3.3") stays on one single line */
.ll-rng{white-space:nowrap}
@media (max-width:720px){
  .ll-row{grid-template-columns:minmax(36px,max-content) minmax(0,1fr) 20px;gap:4px 10px}
  .ll-row.ll-here{grid-template-columns:minmax(36px,max-content) minmax(0,1fr) auto}
  .ll-i{font-size:14px}
}
/* R37 verifier: each row is its own grid, so a range row ("3.2–3.3") pushed only its own title right (17px on phones).
   Every row of a list that holds a range now gets the range's column width, so the titles line up again */
.cp-list.has-rng .ll-row,.cp-list:has(.ll-rng) .ll-row{grid-template-columns:60px minmax(0,1fr) auto}
@media (max-width:720px){
  .cp-list.has-rng .ll-row,.cp-list:has(.ll-rng) .ll-row{grid-template-columns:54px minmax(0,1fr) 20px}
  .cp-list.has-rng .ll-row.ll-here,.cp-list:has(.ll-rng) .ll-row.ll-here{grid-template-columns:54px minmax(0,1fr) auto}
}
/* swarm R54 (idle 0704 #5): lessons without numbers (AMC 10, AP Euro, IB History, MUN) had an empty 52px column in
   front of every title; the generator marks those lists .no-num and the titles start at the heading's edge */
.cp-list.no-num .ll-i{display:none}
.cp-list.no-num .ll-row{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:720px){.cp-list.no-num .ll-row{grid-template-columns:minmax(0,1fr) 20px}.cp-list.no-num .ll-row.ll-here{grid-template-columns:minmax(0,1fr) auto}}
.cp-mcq .opt:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.code-copy:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* swarm R28: a long course description in the overview hero is clamped to 5 lines (course.js adds .is-clamp only when
   the text runs longer) with a "Read more" text button under it; the buttons stay above the fold on phones */
.cp-lead-x.is-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.cp-more{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0 -10px;padding:6px 10px;border:0;border-radius:10px;background:none;color:var(--ink);font:500 15px/1.3 var(--font);cursor:pointer;transition:background-color 160ms cubic-bezier(.2,.7,.2,1)}
.cp-more[hidden]{display:none}
.cp-more::after{content:"";width:7px;height:7px;margin-top:-4px;border:solid currentColor;border-width:0 1.5px 1.5px 0;rotate:45deg;transition:rotate 240ms cubic-bezier(.2,.7,.2,1),margin 240ms cubic-bezier(.2,.7,.2,1)}
.cp-more[aria-expanded="true"]::after{rotate:225deg;margin-top:4px}
.cp-more:hover{background:var(--hover,rgba(18,22,20,.05))}
html.dark .cp-more:hover{background:var(--hover,rgba(255,255,255,.06))}
.cp-more:active{transform:scale(.98);transition-duration:80ms}
.cp-more:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.cp-more:not([hidden])+.cp-ctas{margin-top:24px}
@media (prefers-reduced-motion:reduce){.cp-more,.cp-more::after{transition:none}}

/* swarm R30 (scout R27 #12): one black pill per course hero; "All courses" is a quiet text link beside it with a
   44px hit area. The back link and the "Full outline" caption link also get 40px+ hit areas without moving text. */
.cp-ctas{align-items:center}
.cp-ctas .cp-alt{min-height:44px;padding:0 14px;border-radius:10px;font:500 16px/1.2 var(--font);color:var(--ink);transition:background-color 160ms cubic-bezier(.2,.7,.2,1)}
.cp-ctas .cp-alt:hover{color:var(--ink);background:var(--hover,rgba(18,22,20,.05))}
html.dark .cp-ctas .cp-alt:hover{background:var(--hover,rgba(255,255,255,.06))}
.cp-ctas .cp-alt:active{transform:scale(.98);transition-duration:80ms}
.cp-ctas .cp-alt:focus-visible,.cp-back:focus-visible,figcaption .link-arrow:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:10px}
.cp-back{padding-block:10px;margin-block-end:-10px}
figcaption .link-arrow{display:inline-flex;align-items:center;min-height:44px;padding-block:12px;margin-block:-12px}
/* swarm R42: touch tablets and phones (<=1024px) or coarse pointers get 44px min touch target on code copy button */
@media (max-width:1024px), (pointer:coarse){
  .code-copy{min-height:44px;min-width:44px;padding:0 16px;font-size:13.5px}
  .code-bar{padding:6px 10px 6px 16px}
}
@media (max-width:720px){
  .cp-ctas .btn{flex:1 1 100%}
  .cp-ctas .cp-alt{margin:0 auto}
  .cp-more{min-height:44px}
}
/* swarm R33: the generator renders the clamp and a likely "Read more" from the first paint (no jump when course.js
   runs). A mid-length text is cut on phones only, so there the button is guessed shown and on wider screens hidden */
@media (min-width:721px){.cp-more[data-guess="sm"]{display:none}}
/* swarm R35 (scout R34 #20, idle 0117 #10): breadcrumb links expand to full 44px min-height touch targets on all viewports */
.cp-crumbs ol{margin-block:-11.5px}
.cp-crumbs li{padding-block:11.5px}
.cp-crumbs a{display:inline-flex;align-items:center;min-height:44px;padding-block:0;margin-block:-11.5px}
/* swarm R35 (idle 0117 #10): hide duplicate "Back to" link on desktop and tablet where breadcrumbs already exist */
@media (min-width:721px){.cp-unit .cp-back,.cp-lesson .cp-back{display:none}}
@media (max-width:720px){.cp-unit .cp-back,.cp-lesson .cp-back{min-height:44px;display:inline-flex;align-items:center;padding-block:11.5px;margin-block:-11.5px}}
/* swarm R34 (idle 0117 #5): a course with no preview units shows one block (label, heading, what it is, one ghost pill)
   in place of a placeholder line, a lone tick and an empty Units frame */
.cp-inc-solo .cp-inc-head{margin-bottom:28px}
.cp-inc-solo .cp-inc-head .cp-label{justify-content:center;margin:0 0 12px}
.cp-inc-solo .cp-inc-head h2{font-size:clamp(30px,3.4vw,46px);line-height:1.1;letter-spacing:-.025em}
.cp-inc-solo .cp-inc-head h2+p{margin-top:16px;font-size:17px;line-height:1.6}
.cp-inc-cta{display:flex;justify-content:center}
@media (max-width:720px){.cp-inc-solo .cp-inc-head h2+p{font-size:16px}}
/* swarm R34 (idle 0117 #8): the lesson's previous / next links sit under the reading column on its left edge, not
   alone at the far right of the wide closing band */
.cp-body .cp-narrow>.cp-pager{margin:64px 0 0}
@media (max-width:720px){.cp-body .cp-narrow>.cp-pager{margin-top:48px}}
/* swarm R52: a lesson with no preview text in a one-lesson unit has only the pager in its band; it had 64px of
   margin on top of the band padding (120px above, 96px below) */
.cp-body .cp-narrow>.cp-pager:first-child{margin-top:0}
/* swarm R36 (idle 0117 #9): the "What is included" heading was 22px under 46px section heads; it now reads as a
   section heading, and its line names the course's own counts (generator). "Read more" is a 44px target at every
   width (was 32px above 720px), with its margins trimmed so the hero keeps its rhythm */
.cp-inc:not(.cp-inc-solo) .cp-inc-head h2{font-size:clamp(26px,2.6vw,34px);line-height:1.15;letter-spacing:-.02em}
.cp-inc:not(.cp-inc-solo) .cp-inc-head h2+p{margin-top:12px;font-size:16px}
.cp-more{min-height:44px;margin-top:2px}
.cp-more:not([hidden])+.cp-ctas{margin-top:18px}
/* swarm R37 / R39: enroll button explicit token pill styling with raised hover shadow and active press */
.enroll-btn{box-shadow:var(--shadow-rest)}
.enroll-btn:hover{box-shadow:var(--shadow-raised)}
.enroll-btn:active{transform:scale(.98);transition-duration:80ms}

/* swarm R39 (scout R38 #18): scrolled header background is opaque on course pages to eliminate underlying heading ghosting */
.cp .nav.scrolled{background:var(--paper);border-bottom-color:var(--line)}
html.dark .cp .nav.scrolled{background:var(--paper);border-bottom-color:var(--line)}

/* swarm R50: the lesson hero now carries the "Start free" button of the unit hero (gen_course.py), a little closer to its shorter lead */
.cp-hero-l .cp-ctas-l{margin-top:28px}
@media (max-width:720px){.cp-hero-l .cp-ctas-l{margin-top:22px}}
/* swarm R51 (idle 0117 #1): a shared tap-target rule made the crumb links inline-flex, so the long unit crumb clipped
   to a bare "..." and left a gap; the link now shortens inside its item with its own ellipsis */
.cp-crumbs li:not([aria-current]){display:flex;align-items:center}
.cp-crumbs ol{align-items:center}
.cp-crumbs li>a{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:44px}
/* swarm R51 (idle 0117 #3): caption links are ordinary links (ink), green stays on "FIG." only; the "more units" line is a real link */
.cp-umap figcaption .link-arrow{color:var(--ink)}
.cp-umap .um-more{display:flex;align-items:center;gap:6px;min-height:44px;margin:0 8px 8px;padding:0 16px;border-radius:var(--radius-m);font:500 14px/1.35 var(--font);color:var(--ink);transition:background-color var(--dur-1) var(--ease)}
.cp-umap .um-more:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.cp-umap .um-more:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
/* swarm R51 (idle 0117 #4): on phones the unit title was 40px, larger than the course title (36px); one step below it now */
@media (max-width:720px){.cp-unit-g h1{font-size:clamp(30px,8.4vw,34px);line-height:1.1;letter-spacing:-.03em}}
/* swarm R54 (idle 0704 #2): practice-only courses say what they are in the hero (a small outlined pill and one line)
   instead of a near-empty shade band further down */
.cp-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:24px 0 0;max-width:560px;font:400 15px/1.55 var(--font);color:var(--muted)}
.cp-note+.cp-ctas{margin-top:28px}
/* swarm R55 (content-course): on phones the "This lesson" pill sat beside the title and squeezed it to four lines at
   375; it now sits under the title in the title column. The unit/lesson pager title wraps balanced (no lone word) */
@media (max-width:720px){.ll-here .ll-k{grid-row:2;grid-column:-3/-2;justify-self:start;height:22px;padding:0 9px;font-size:12px}}
.pg-t{text-wrap:balance}
/* swarm R57 (content-course): when a long parent name wraps the back link to three lines on phones, its arrow sat
   beside the middle line; it now sits on the first line (2.5px = (21px line - 16px icon) / 2). On phones the unit and
   lesson numbers sat halfway down a two-line title; they now share the title's first baseline */
.cp-back,.cp-unit .cp-back,.cp-lesson .cp-back{align-items:flex-start}
.cp-back svg{margin-top:2.5px}
@media (max-width:720px){.ul-row .ul-i,.ul-row .ul-t,.ll-row .ll-i,.ll-row .ll-t{align-self:baseline}}
/* fast-owner1700 (owner 17:00 "Padding for /course/ is pretty weird"): one top rhythm for the three course pages.
   The overview title block sat 12px lower than the unit and lesson ones (56px grid gap plus the label's own margin),
   and on phones the overview opened with an 80px empty gap under the top bar because its trail is hidden there */
.cp-overview .cp-hero-g{margin-top:44px}
.cp-overview .cp-hero-copy>.cp-label:first-child{margin-top:0}
@media (max-width:720px){
  .cp-overview .cp-hero-g{margin-top:8px}
  .cp-overview .cp-hero{padding-bottom:40px}
}