/* app_courses: the rules the ported course markup uses, from the prototype's styles.css (2026-09-09),
   hex to tokens, classes as the prototype has them. What the shell owns (.card, .btn, .pill, .badge,
   .pbox, .sb-head, .sb-body, .sec, .wrap, the type scale) is not repeated here. A training's colour is
   the --ca/--cb pair set inline from Path.tone; no selector here names a training. */

/* ---------- the column: one 960 frame per training, the page's own section wears the shell's frame ---------- */
main > section.cshell{max-width:960px}
.course-main,.lesson-main,.hub-main{position:relative;min-width:0;padding:36px clamp(20px,4cqw,56px) 36px;width:100%}
.lesson-main{padding-top:40px;padding-bottom:72px}
/* one frame for every lesson, day and bonus (0363): the frame starts where the Challenge's hero did,
   the shell's 18px plus the day's 28px, and a day's cards span the whole 960 like a lesson's frame */
main > section.cshell:has(> .lesson-main){margin-top:46px}
.hub-main{padding-bottom:88px}

/* ---------- breadcrumbs: url-style, no domain ---------- */
.crumbs{display:flex;align-items:center;gap:10px;font:500 11.5px/1 var(--fm);color:var(--faint);margin-bottom:26px;min-width:0;flex-wrap:wrap}
.crumbs a{color:var(--faint);text-decoration:none;letter-spacing:.04em}
.crumbs a:hover{color:var(--acc)}
.crumb-sep{color:var(--hl3)}
.crumb-on{color:var(--dim);letter-spacing:.04em}

/* ---------- the square language: gray, green with a tick, orange current (never circles) ---------- */
.sq{position:relative;width:10px;height:10px;border-radius:3px;background:var(--sq-gray);flex:none;display:inline-block}
.sq.done{background:var(--sq-green)}
.sq.sq-now{background:var(--sq-orange)}
.sq svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sq svg path{fill:none;stroke:var(--tr-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pbar{height:5px;border-radius:4px;background:var(--xbar-track);overflow:hidden}
.pbar i{display:block;height:100%;background:var(--xbar-fill);border-radius:4px}
/* ---------- one box, every training (0323). Erik: "Just unify the boxes progress sizes across all
     (Fast-Track / Challenge / courses inside LRA and AI labs) so same space for boxes". The height
     of a box and the air beside it are written HERE and nowhere else, so a row of boxes takes the
     same space on a course page's head, on a hub card, in the rail and on the account page's bars. That is
     a rule and not a coincidence: the four places grew their own numbers, 4px and 8px and 9px, each
     written where it was drawn, and a second copy of a number is how four instruments drift apart.
     A strip's WIDTH stays the surface's own: the boxes divide whatever room it has, which is the
     only way a course of six lessons and one of forty read as the same instrument.
     The class is doubled to win and never nested: shell.css owns .pbox and base.html renders the
     head outlet BEFORE its own stylesheet, so one class ties on specificity and loses on order. */
.pbox.pbox{--bx-h:9px;--bx-gap:2px;gap:var(--bx-gap)}
.pbox.pbox i{height:var(--bx-h)}
/* THE RAIL IS NOT ONE OF THOSE FOUR PLACES (Erik, 0331): "one of design options was never meant to
   touch the sidebar". A 276px column is not a content column, and 9px boxes two pixels apart read
   as a wall in it. The two rail strips keep the 4px geometry shell.css gives every .pbox, which is
   what they wore before 0323 unified the others. Same two classes, so this wins on order. */
.pbox.sb-bar,.pbox.a2sb-box{--bx-h:4px;--bx-gap:1px}
/* the rail's box names (app.js boxHtml); the shell's .pbox carries the rest of the geometry */
.pbox i.bx-d{background:var(--sq-green)}
.pbox i.bx-n{background:var(--sq-orange)}

/* ---------- the course bars (0282), LEDGER BOXES since 0323: a training with several courses
     shows one row per course, its name in a fixed left column, one box per lesson across the middle
     and its percentage right aligned, each row a link to that course with its numbers in the hover.
     Erik picked it out of the round: "course progress bar = 08 Ledger boxes". The boxes say WHERE a
     member is and the number says how far, so the continuous track went with the round and the
     markup lost the span that drew it.
     ONE SURFACE ONLY, the Progress tab of /dashboard/ (Erik, 2026-09-17): "these progress were
     account specific graphics". The rail draws boxes and the hub page draws cards, the way both
     did before 0282, so no rule here may be reached from a sidebar or a course page. ---------- */
.cbars{display:flex;flex-direction:column;align-items:stretch;gap:9px;min-width:0}
.cbar{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;min-width:0;padding-bottom:9px;
  border-bottom:1px solid var(--hl1);text-decoration:none;color:inherit}
.cbar:last-child{padding-bottom:0;border-bottom:none}
.cbar-n{flex:0 0 34%;min-width:0;font:500 11.5px/1.3 var(--fd);letter-spacing:0;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the boxes take the middle and read the one box geometry above: a bar of six lessons and a bar of
   forty stand the same height here as they do on a course page (0323) */
.cbar-x{flex:1 1 auto;min-width:0}
/* a box is a lesson and never a bar: one lesson stretched over the whole strip read as a course
   finished (Vibe Coding, 0 of 1, 0447). Past 24px the boxes stop and the rest of the strip is air */
.cbar-x i{max-width:24px}
.cbar-p{flex:0 0 38px;text-align:right;font:700 11px/1 var(--fm);color:var(--ink)}
/* [href]: a locked course is an <a> with no address, and it must not light up under the pointer.
   The greying is the shell-wide .is-locked rule at the foot of this file, not a rule of its own. */
.cbar[href]:hover .cbar-n,.cbar[href]:hover .cbar-p{color:var(--ink)}
.btn-lra{flex:none;display:inline-flex;align-items:center;gap:8px;background:var(--xbtn);color:var(--xbtn-ink);
  border:none;border-radius:8px;padding:12px 18px;font:700 13px/1 var(--fd);cursor:pointer;text-decoration:none}
.btn-lra:hover{filter:brightness(1.08)}
.btn-kbd{margin-left:7px;opacity:.75}

/* ---------- course head, progress, modules, lesson rows (the Fast-Track export layout) ---------- */
.chead{display:flex;align-items:flex-start;gap:16px;min-width:0}
.chead-ic{flex:none;width:44px;height:44px;border-radius:11px;background:var(--s3);display:grid;place-items:center;margin-top:3px}
.chead-ic svg{width:22px;height:22px;stroke:var(--xt-strong);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.chead-tx{flex:1;min-width:0}
.chead-h{font:700 24px/1.2 var(--fd);letter-spacing:-.03em;color:var(--ink)}
.chead-h .hl{color:var(--xbar-fill)}
.chead-sub{margin-top:8px;font:400 14px/1.5 var(--fd);color:var(--dim)}
.chead-h sup{font:500 12px/1 var(--fm);color:var(--dim);margin-right:8px}  /* the module's number (0179) */
.cprog{display:flex;align-items:center;gap:16px;margin-top:22px;min-width:0}
.cprog-pct{font:700 13px/1 var(--fd);color:var(--ink);flex:none}
.cprog-bar{width:315px;max-width:38%;flex:none}
.cprog-tx{font:400 11px/1 var(--fm);color:var(--xt-dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmod{margin-top:44px}
.cmod-h{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--hl1)}
.cmod-h h3{display:flex;align-items:center;gap:12px;font:500 16px/1 var(--fd);color:var(--xt-mid);letter-spacing:0}
.cmod-h h3 b{font-weight:500;color:var(--xt-mid)}
.cmod-sq{display:inline-flex;gap:5px;margin-left:4px}
.crow{display:flex;align-items:center;gap:10px;padding:16px 12px 16px 14px;border-bottom:1px solid var(--hl1);
  cursor:pointer;min-width:0;text-decoration:none;color:inherit}
.crow:hover{background:rgba(255,255,255,.02)}
.crow-n{font:500 16px/1 var(--fd);color:var(--xt-strong);flex:none;font-variant-numeric:tabular-nums}
.crow-t{flex:1;font:500 14px/1.2 var(--fd);color:var(--xt-strong);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow-min{flex:none;font:400 11px/1 var(--fm);color:var(--xt-dim)}
.crow-act{flex:none;width:72px;text-align:right;font:400 11px/1 var(--fm);color:var(--xt-dim)}
.crow-done .crow-t{font-weight:400;color:var(--dim)}
.crow-done .crow-act{color:var(--faint)}
.crow:hover .crow-act{color:var(--acc)}
.crow-now .crow-t{font-weight:500;text-decoration:underline;text-underline-offset:3px}
/* Academy 2.0 course page: a module reads as a block, folds by its heading (0080) */
/* the whole perimeter at 1px and low alpha: an accent bar down ONE side of a rounded card is
   brand.css ANTI-PATTERN 2, Erik's, restated 2026-09-16, and this paragraph still wore it. */
.a2-gap{margin-top:24px;padding:16px 18px;border:1px solid rgb(from var(--acc) r g b / .22);background:var(--s1);
  border-radius:var(--rc);font:400 .86rem/1.6 var(--fd);color:var(--dim2);max-width:70ch}
.a2-go{margin-top:22px}

/* ---------- Academy 2.0 hub: the course cards (Erik 2026-09-06) ---------- */
.a2grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}
.a2card{position:relative;display:flex;flex-direction:column;gap:0;padding:22px 22px 20px;
  border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s1);cursor:pointer;min-width:0;
  text-decoration:none;color:inherit;transition:border-color .16s,background .16s}
.a2card:hover{border-color:var(--acc);background:var(--s2)}
.a2card-badge{position:absolute;top:16px;right:16px;padding:4px 9px;border-radius:6px;background:var(--s3);
  font:600 9px/1 var(--fm);letter-spacing:.18em;color:var(--faint)}
.a2card-now .a2card-badge{background:rgb(from var(--acc) r g b / .16);color:var(--acc)}
.a2card-brand{display:block;font-size:15px;line-height:1;margin-bottom:10px}
.a2card-chip{align-self:flex-start;padding:5px 10px;border-radius:6px;background:var(--acc);
  font:700 12px/1 var(--fm);letter-spacing:.06em;color:var(--acc-ink)}
.a2card-t{margin-top:14px;font:700 1.15rem/1.25 var(--fd);letter-spacing:-.02em;color:var(--acc)}
.a2card-s{margin-top:10px;font:400 .9rem/1.6 var(--fd);color:var(--dim);flex:1}
.a2card-m{display:flex;align-items:center;gap:8px;margin-top:14px;font:400 11px/1 var(--fm);color:var(--xt-dim)}
.a2card-mic{flex:none;width:16px;height:16px;display:grid;place-items:center}
.a2card-mic svg{width:16px;height:16px;fill:none;stroke:var(--xt-dim);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.a2card-f{display:flex;align-items:center;gap:12px;margin-top:18px;min-width:0}
.a2card-go{flex:none;padding:9px 14px;border-radius:8px;background:var(--acc);font:700 12px/1 var(--fd);color:var(--acc-ink);white-space:nowrap}
.a2card:hover .a2card-go{filter:brightness(1.08)}
/* the card's own progress is the site's shape: one box per lesson, the number beside it, the same
   type and order as a stage row's .hc-prog. The boxes stretch to the card (Erik: "cards already
   have progress inside ... boxes style as we do elsewhere"). */
.a2card-pr{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
.a2card-bx{flex:1;min-width:0}
.a2card-pr b{flex:none;font:500 12px/1 var(--fm);letter-spacing:.08em;color:var(--faint)}
.a2card-done .a2card-chip{background:var(--sq-green);color:var(--tr-ink)}

/* ---------- lesson page: the video frame, the head, the body ---------- */
.vframe{border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s1);overflow:hidden}
.v-chrome{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid var(--hl1)}
.v-chrome .dots{display:flex;gap:6px;flex:none}
.v-chrome .dots i{width:10px;height:10px;border-radius:50%;background:var(--s3);border:1px solid var(--hl2)}
.v-file{flex:1;font:500 11px/1 var(--fm);color:var(--faint);letter-spacing:.06em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-len{font:500 11px/1 var(--fm);color:var(--faint)}
.v-body{position:relative;aspect-ratio:16/9;display:grid;place-items:center;background:radial-gradient(60% 80% at 50% 45%,var(--s1),var(--canvas));overflow:hidden}
.v-body iframe,.v-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgb(0,0,0)}
/* a YouTube player is a poster until it is clicked; a Bunny player is its own frame from the first paint (0172) */
.v-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;color:inherit}
.v-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.a2-playb{position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.45);border:1px solid var(--hl2);transition:background .16s,border-color .16s,transform .16s}
.a2-playb svg{width:26px;height:26px;fill:var(--ink);stroke:none;margin-left:3px}
.v-play:hover .a2-playb{background:rgb(from var(--acc) r g b / .3);border-color:var(--acc);transform:scale(1.05)}
.a2-playt{position:relative;font:400 11px/1 var(--fm);color:var(--dim2);letter-spacing:.08em;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.lesson-h{font-size:1.75rem;margin-top:26px}
.lesson-meta{font:500 11px/1 var(--fm);letter-spacing:.18em;color:var(--faint);margin-top:12px}
/* the video under the title and its line, then a rule before the rest of the lesson (Erik, 0339) */
.lesson-meta + .vframe,.lesson-meta + .a2-gap{margin-top:24px}
.lesson-rule{border:0;border-top:1px solid var(--hl1);margin:30px 0 4px}
/* Named external links, not the signed downloads: neutral, content-sized, wrapping naturally. The
   button is unscoped on purpose: the CMS PAGE panel draws its chips with it (editor.css, 0353). */
.lesson-resources{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;min-width:0}
.lesson-resources[hidden]{display:none}
.lesson-resource{display:inline-flex;align-items:center;gap:9px;max-width:100%;min-width:0;
  padding:10px 14px;border:1px solid var(--hl2);border-radius:var(--rb);background:var(--s2);color:var(--dim2);
  font:600 13px/1.4 var(--fd);text-decoration:none;white-space:normal}
.lesson-resource span{min-width:0;overflow-wrap:anywhere}
.lesson-resource svg{flex:none;width:18px;height:18px}
.lesson-resource:hover{background:var(--s3);border-color:var(--hl3);color:var(--ink)}
.lesson-resource:focus-visible{outline:2px solid var(--dim2);outline-offset:3px;box-shadow:none}
.lesson-desc{margin-top:16px;font-size:.95rem;line-height:1.65;color:var(--dim);max-width:44rem}
.notes-hint{margin-top:22px;font-size:.85rem;color:var(--dim)}
.lbody{margin-top:18px;font:400 .95rem/1.7 var(--fd);color:var(--dim);max-width:46rem}
.lbody b{color:var(--ink)}
.lbody a{color:var(--acc)}
.lbody code{background:var(--s2);border:1px solid var(--hl1);border-radius:4px;font:400 .85em var(--fm);padding:1px 5px;color:var(--acc)}
.lh2{font:600 1.25rem/1.25 var(--fd);letter-spacing:-.01em;margin-top:40px}
.lh3{font:600 1rem/1.3 var(--fd);letter-spacing:-.01em;margin-top:26px;color:var(--ink)}
.a2-ul{padding-left:20px}
.a2-ul li{margin-top:6px}
/* subtle long-dash separator above each H2 */
.lesson-main .lh2{position:relative;padding-top:30px;margin-top:34px}
.lesson-main .lh2::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 22px,transparent 22px 38px)}
.lesson-main .lh2:first-of-type{padding-top:0;margin-top:0}
.lesson-main .lh2:first-of-type::before{display:none}
/* the body is a document now (0111): its level-2 headings are plain h2 inside .tt-doc, and they wear
   the same separator in read mode and with the editor mounted, so nothing moves when it mounts */
.lesson-main .tt-doc h2{position:relative;padding-top:30px;margin-top:34px}
.lesson-main .tt-doc h2::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 22px,transparent 22px 38px)}
.lesson-main .tt-doc h2:first-of-type{padding-top:0;margin-top:0}
.lesson-main .tt-doc h2:first-of-type::before{display:none}
/* a callout opening the body (Fast-Track's "summary later" note, 0674) keeps its air on both sides */
.lesson-main .tt-doc > .tt-nb:first-child{margin-top:20px}
.lesson-main .tt-doc > .tt-nb:first-child + h2{margin-top:30px}
.codeblk{margin-top:22px;border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s1);overflow:hidden}
.cb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--hl1);background:var(--s2)}
.cb-file{font:500 11px/1 var(--fm);color:var(--faint);letter-spacing:.06em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-copy{flex:none;background:none;border:1px solid var(--hl2);border-radius:6px;color:var(--dim);
  font:500 10px/1 var(--fm);letter-spacing:.08em;padding:5px 9px;cursor:pointer;transition:border-color .16s,color .16s}
.cb-copy:hover{border-color:var(--acc);color:var(--acc)}
.codeblk pre{margin:0;padding:16px;overflow-x:auto;font:400 12.5px/1.7 var(--fm);color:var(--dim2)}
.tk,.ck{color:var(--acc)} .ts,.cs{color:rgb(143,212,154)} .tc,.cc{color:rgb(91,98,112)} .tf{color:rgb(125,180,232)}
/* a figure is as wide as its picture, never wider (Erik 2026-09-07) */
.a2fig{margin:22px 0 0;width:max-content;max-width:100%;border:1px solid var(--hl1);border-radius:var(--rc);background:var(--s1);overflow:hidden}
.a2fig img{display:block;width:auto;max-width:100%;height:auto}
.a2-note{margin-top:14px;font:400 .78rem/1.55 var(--fm);color:var(--faint);max-width:60ch}
.a2-note a{color:var(--acc)}
.a2-obj{margin-top:26px;padding:16px 18px;border:1px solid var(--hl1);border-radius:var(--rc);background:var(--s1)}
.a2-obj b{display:block;font:500 10px/1 var(--fm);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.a2-obj ul{margin:12px 0 0;padding-left:20px;font:400 .9rem/1.7 var(--fd);color:var(--dim)}
.a2-obj li + li{margin-top:4px}
.a2-dlrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--hl2);border-radius:8px;font:500 12px/1 var(--fm);color:var(--dim);text-decoration:none}
.a2-dlrow:hover{border-color:var(--acc);color:var(--acc)}
.a2-dlrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.blk-unknown{margin-top:18px;padding:12px 14px;border:1px dashed var(--hl2);border-radius:var(--rc);font:400 .8rem/1.5 var(--fm);color:var(--faint)}

/* ---------- reference lists (2026-09-07): one card per entry, the chips filter in place ---------- */
.a2ref{margin-top:34px}
.a2r-f{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.a2r-f button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;cursor:pointer;
  font:500 .8rem/1 var(--fd);color:var(--dim2);background:var(--s1);border:1px solid var(--hl1);border-radius:999px}
.a2r-f button:hover{color:var(--ink);border-color:var(--hl2)}
.a2r-f button.on{color:var(--ink);background:var(--s3);border-color:var(--hl3)}
.a2r-f button i{font-style:normal;font-size:.72rem;color:var(--faint)}
.a2r-f button.on i{color:var(--dim2)}
.a2r-l{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.a2r-e{padding:16px 18px;border:1px solid var(--hl1);border-radius:var(--rc);background:var(--s1)}
.a2r-e[hidden]{display:none}
.a2r-n{display:flex;align-items:baseline;gap:8px;margin:0;font:600 .95rem/1.4 var(--fm);letter-spacing:-.01em;color:var(--ink)}
.a2r-n a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hl3)}
.a2r-n a:hover{color:var(--xt-strong);border-bottom-color:var(--xt-strong)}
.a2r-b{flex:none;font-size:.85rem;line-height:1}
.a2r-d,.a2r-m{margin:8px 0 0;font:400 .88rem/1.6 var(--fd);color:var(--dim)}
.a2r-m span{color:var(--faint)}
.a2r-e .codeblk{margin-top:12px}
@container page (max-width:720px){.a2r-e{padding:14px}}

/* ---------- lesson actions [<][>][ok], pinned top-right, mirrored at the foot (Erik 2026-08-28) ---------- */
.lsact{position:absolute;top:36px;right:clamp(20px,4cqw,56px);display:flex;gap:6px;z-index:3}
.lsact form{display:contents}
.lsq{width:30px;height:30px;border-radius:7px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--hl2);background:var(--s1);color:var(--dim);text-decoration:none;
  transition:background .14s,border-color .14s,color .14s}
.lsq svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lsq:hover:not(:disabled){background:var(--s2);border-color:var(--hl3);color:var(--ink)}
.lsq:disabled,.lsq.off{opacity:.32;cursor:default;pointer-events:none}
.lsq.lsq-txt{width:auto;padding:0 10px;font:600 11px/1 var(--fm)}
.lsq-done{background:var(--sq-gray);border-color:transparent;color:var(--faint)}
.lsq-done:hover:not(:disabled){background:var(--sq-gray);border-color:var(--hl3);color:var(--ink)}
.lsq-done.done,.lsq-done.done:hover:not(:disabled){background:var(--sq-green);border-color:transparent;color:var(--tr-ink)}
.lsact-foot{position:static;margin-top:34px;padding-top:22px;border-top:1px solid var(--hl1);flex-wrap:wrap;gap:10px}
.lsact-foot .btn{display:inline-flex;align-items:center;gap:8px;max-width:48%;min-width:0}
.lsact-foot .btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* the bottom row of a lesson and a day (0363): prev left, the tick in the middle, next right; two
   classes, so the narrow window's .lsact{justify-content:flex-end} below does not pull it right */
.lsact.lsfoot{justify-content:space-between;align-items:center;flex-wrap:nowrap}
.lsfoot .btn{max-width:42%}

/* ---------- Academy 3.0 hub: a row list, three stages and a deep dive shelf ---------- */
.hub-hey{font:700 25px/1.2 var(--fd);letter-spacing:-.01em}
.hub-cur{display:inline-block;font-style:normal;color:var(--acc);animation:blink 1.1s steps(2,start) infinite}
.hub-start{margin-top:34px;background:rgba(255,255,255,.03);border-radius:14px;padding:14px}
.hs-head{display:flex;align-items:baseline;gap:6px;padding:4px 4px 12px}
.hs-head sup{font:500 9px/1 var(--fm);color:var(--faint)}
.hs-head b{font:700 16px/1 var(--fd);color:var(--acc)}
.hs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hs-card{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.03);border:none;border-radius:10px;
  padding:10px;cursor:pointer;text-align:left;min-width:0;transition:background .16s}
.hs-card:hover{background:rgba(255,255,255,.06)}
.hs-play{flex:none;width:44px;height:34px;border-radius:8px;background:var(--canvas);border:1px solid var(--hl2);position:relative}
.hs-play::before{content:"";position:absolute;left:18px;top:11px;border-left:9px solid var(--dim);border-top:6px solid transparent;border-bottom:6px solid transparent}
.hs-tx{min-width:0}
.hs-kick{display:block;font:500 9px/1 var(--fm);letter-spacing:.06em;color:var(--ink);opacity:.75;margin-bottom:5px}
.hs-tx b{display:block;font:600 13px/1.3 var(--fd);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-cols{display:flex;justify-content:space-between;margin-top:38px;padding:0 2px 10px;font:500 10px/1 var(--fm);letter-spacing:.16em;color:var(--faint)}
.hub-list{background:var(--s1);border:1px solid var(--hl1);border-radius:var(--rc);overflow:hidden}
.hc{display:flex;align-items:center;gap:20px;padding:22px 22px;border-bottom:1px solid var(--hl1);min-width:0;text-decoration:none;color:inherit}
.hc-stage{display:flex;align-items:baseline;gap:9px;padding:16px 22px 12px;background:var(--s2);border-bottom:1px solid var(--hl1);
  font:600 9px/1 var(--fm);letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.hc-stage b{letter-spacing:.14em;color:var(--xt-mid)}
.hc:last-child{border-bottom:none}
.hc:hover{background:rgba(255,255,255,.02)}
.hc-ic{flex:none;width:52px;height:52px;border-radius:12px;background:var(--s2);border:1px solid var(--hl1);display:grid;place-items:center}
.hc-ic svg{width:22px;height:22px;stroke:var(--dim);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hc-tx{flex:1;min-width:0}
.hc-tx h3{font:700 16px/1.3 var(--fd);color:var(--ink);letter-spacing:0}
.hc-tx h3 sup{font:500 10px/1 var(--fm);color:var(--dim);margin-right:6px}
.hc-tx h3 .hl{color:var(--xbtn)}
.hc-tx p{margin-top:6px;font:400 14px/1.5 var(--fd);color:var(--dim);max-width:40rem}
.hc-tags{display:flex;gap:14px;margin-top:9px;flex-wrap:wrap}
.hc-tags span{font:400 10.5px/1 var(--fm);letter-spacing:.04em;color:var(--faint)}
.hc-prog{flex:none;display:flex;align-items:center;gap:12px}
.hc-prog b{font:500 12px/1 var(--fm);letter-spacing:.08em;color:var(--faint)}
.hc-dots{display:inline-flex;gap:5px}
.hd{width:11px;height:11px;border-radius:5px;border:1px solid var(--hl3);background:transparent;flex:none}
.hc-act{flex:none;width:86px;text-align:right;font:600 13px/1 var(--fd);color:var(--dim)}
.hc:hover .hc-act{color:var(--acc)}
/* THE COURSE PAGE (0517, 0690: the lab's 10 baked; the 01 cards live on as draft D-001). The course's
   own name and one box per lesson, no Start call; then the modules as a table of contents: one band
   per module under a hairline, its big number (gray, transparent green once done, the next module's
   orange), its title and count line, its lessons in two columns with leaders: square, number, title,
   minutes. Replaced the Git graph rows of 0322. */
.cpl{margin-top:28px}
.cpl ol{list-style:none;margin:0;padding:0}
.cpl-top{margin-bottom:34px}
.cpl-top .cprog{flex-wrap:wrap;row-gap:10px}
/* the boxes keep the site's .pbox (9px high above); only the strip's width is the page's */
.cpl-top-box{flex:0 1 460px;min-width:0}
.cpl-mods{min-width:0}
.cpl-m{min-width:0;display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:10px;padding:24px 0;border-top:1px solid var(--hl1)}
.cpl-tile{grid-row:1 / span 2}
.cpl-num{font:700 34px/1 var(--fm);letter-spacing:-.03em;color:var(--hl3)}
.cpl-done .cpl-num{color:rgb(from var(--green) r g b / .4)}
.cpl-cur .cpl-num{color:var(--acc)}
/* the head: the title, a link of its own, and the count line on the right */
.cpl-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-width:0}
.cpl-h > *{margin:0}
.cpl .cpl-h h3{font:700 17px/1.3 var(--fd);letter-spacing:-.01em;color:var(--ink)}
.cpl-h h3 a{color:inherit;text-decoration:none}
.cpl-h h3 a[href]:hover{color:var(--acc)}
.cpl-done .cpl-h h3{color:var(--dim)}
.cpl-meta{font:400 10.5px/1 var(--fm);letter-spacing:.04em;color:var(--faint);white-space:nowrap}
/* the lessons in two columns with leaders, each row its own link */
.cpl .cpl-ls{columns:2;column-gap:32px}
.cpl-ls li{break-inside:avoid}
.cpl-l{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 0;text-decoration:none;color:inherit}
.cpl-l[href]:hover .cpl-lt{color:var(--acc)}
.cpl-ln{flex:none;min-width:26px;font:500 11px/1 var(--fm);color:var(--dim);font-variant-numeric:tabular-nums}
.cpl-l .cpl-lt{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;font:500 13px/1.25 var(--fd);
  color:var(--xt-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpl-lt::after{content:"";flex:1;min-width:10px;border-bottom:1px dotted var(--hl3)}
.cpl-lm{flex:none;font:400 11px/1 var(--fm);color:var(--xt-dim)}
.cpl-l-done .cpl-lt{font-weight:400;color:var(--dim)}
.cpl-l-now .cpl-lt{text-decoration:underline;text-underline-offset:3px}
/* the big status squares: tick done, plain orange started (no play glyph, Erik 2026-09-28), empty to do */
.cpl-l .sq{width:16px;height:16px;border-radius:4px}
.hub-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.hub-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hub-tags span{font:500 11px/1 var(--fm);letter-spacing:.06em;color:var(--dim);padding:7px 10px;border:1px solid var(--hl2);border-radius:6px}
/* the right rail: live events, replays, workshops, EF-Apps (static until their apps exist) */
.hub-rail{min-width:0;display:flex;flex-direction:column;gap:10px}
.hr-label{font:500 11px/1 var(--fm);letter-spacing:.1em;color:var(--faint);margin:18px 0 6px}
.hr-label:first-child{margin-top:0}
.hr-label.hl-acc{color:var(--xbtn);letter-spacing:.04em}
.hr-ev{position:relative;display:flex;gap:12px;align-items:flex-start;border:1px solid var(--hl2);border-radius:14px;background:var(--canvas);padding:12px}
.hr-ev-next{border-color:var(--hl3)}
.hr-evdot{position:absolute;left:12px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--acc)}
.hr-date{flex:none;text-align:center;padding:6px 2px 0}
.hr-date b{display:block;font:700 14px/1 var(--fd);color:var(--ink)}
.hr-date span{display:block;margin-top:3px;font:500 9px/1 var(--fm);color:var(--faint)}
.hr-evtx{flex:1;min-width:0}
.hr-evtx b{display:block;font:600 13.5px/1.35 var(--fd);color:var(--ink)}
.hr-evtx span{display:block;margin-top:5px;font:400 11.5px/1.3 var(--fd);color:var(--dim)}
.hr-evtx .hr-evsub{color:var(--faint)}
.hr-arr{flex:none;color:var(--acc);font-size:13px;margin-top:4px}
.hr-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 2px;border-bottom:1px solid var(--hl1);min-width:0}
.hr-row span{font:300 13px/1.3 var(--fd);color:var(--dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hr-row em{font:400 11.5px/1 var(--fd);font-style:normal;color:var(--faint);flex:none}
.hr-apps{border:1px solid var(--hl1);border-radius:12px;overflow:hidden;background:var(--s1)}
.hr-apps-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--s2)}
.hr-apps-head b{font:500 13px/1 var(--fm);color:var(--dim)}
.hr-pgdots{display:inline-flex;gap:5px}
.hr-pgdots i{width:6px;height:6px;border-radius:50%;background:var(--hl3)}
.hr-pgdots i.on{background:var(--dim)}
.hr-app{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--hl1);font:400 12.5px/1.3 var(--fd);color:var(--dim);min-width:0}
.hr-app:last-child{border-bottom:none}
.hr-app svg{flex:none;width:13px;height:13px;stroke:var(--c-forum);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hr-app.wip{color:var(--faint)}
/* its main column wears the AI Lab list (0350): stage_row.html per course, a training's name as the stage band
   with its tone square and the name in orange, course names gray-white. The frame grows past 960 so the list
   keeps the AI Lab page's width beside the 300px column. */
main > section.cshell.dash{max-width:1300px}
.dash-list{margin-top:34px}
.dash-trn{align-items:center;text-decoration:none}
.dash-trn b{color:var(--xbtn);letter-spacing:.16em}
.dash-trn:hover b{color:var(--acc)}
.sb-sq.dash-sq{flex:none;width:16px;height:16px;border-radius:4px}
.sb-sq.dash-sq::after{top:-4px;right:-4px;width:8px;height:8px}
.dash-list .hc-tx h3 .hl{color:var(--dim2)}
/* a training's band carries Resume at its right end: the band stays the training's link (0411) */
.dash-band{position:relative}
.dash-go{position:absolute;right:22px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:12px;
  font:600 10px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-decoration:none}
.dash-go em{font-style:normal;color:var(--faint)}
.dash-go:hover{color:var(--acc)}
/* the quick links under the trainings (0411): every fill into dash.links wears these and nothing of its own */
.dash-lk-h{display:block;margin:34px 0 10px}
.dash-lks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.dash-lk{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--s1);border:1px solid var(--hl1);
  border-radius:var(--rc);text-decoration:none;color:inherit}
.dash-lk b{font:700 14px/1.3 var(--fd);color:var(--ink)}
.dash-lk span{font:400 12.5px/1.45 var(--fd);color:var(--dim)}
.dash-lk:hover{border-color:var(--hl2)}
.dash-lk:hover b{color:var(--acc)}
.hc-bar{width:110px}
.hc-bar i{background:var(--dim)}
/* replays have no recording yet: dimmed, no pointer, the date gives way to COMING SOON on hover */
.dash-soon{cursor:default;opacity:.45}
.dash-soon b{display:none;font:600 9.5px/1 var(--fm);letter-spacing:.14em;color:var(--acc);flex:none}
.dash-soon:hover b{display:block}
.dash-soon:hover em{display:none}
.hr-app.wip svg{stroke:var(--faint)}
/* an EF-App says COMING SOON on hover, the replays' label at the row's end (0352) */
.hr-app>b{display:none;margin-left:auto;font:600 9.5px/1 var(--fm);letter-spacing:.14em;color:var(--acc);flex:none}
.hr-app:hover>b{display:block}

/* ---------- 21-Day Challenge: the dashboard ---------- */
.v-box{position:relative;aspect-ratio:16/9;border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s2);overflow:hidden;min-width:0}
.chp-calcard{position:relative;border:1px solid var(--hl2);border-radius:16px;padding:18px 18px 20px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 55%),var(--s1)}
.chp-calt{display:block;text-align:center;font:700 14px/1.3 var(--fd);color:var(--ink);margin-bottom:12px}
.chp-calwd,.chp-calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center}
.chp-calwd{margin-bottom:2px}
.chp-calwd span{font:600 10px/1 var(--fm);color:var(--acc);opacity:.7;padding:4px 0}
.chp-cd{display:block;font:600 12px/1 var(--fm);font-variant-numeric:tabular-nums;color:var(--dim);padding:9px 0;
  border:1px solid transparent;border-radius:7px;background:none;cursor:pointer;text-decoration:none;transition:color .15s,border-color .15s}
.chp-cd:hover{border-color:var(--hl3);color:var(--ink)}
.chp-cd.done{color:var(--sq-green)}
.chp-cd.act{background:var(--acc);color:var(--acc-ink);border-color:transparent}
.chp-cd.done.act{background:var(--sq-green);color:var(--tr-ink)}
.chp-cx{font:500 10px/1 var(--fm);color:var(--xt-dim);display:flex;align-items:center;justify-content:center}
.chp-tod{margin-top:14px;text-align:center}
.chp-tod span{display:block;font:400 11px/1 var(--fm);letter-spacing:.08em;color:var(--faint)}
.chp-tod b{display:block;margin-top:6px;font:700 1.15rem/1.2 var(--fd);letter-spacing:-.01em;color:var(--ink)}
.chp-calic{position:absolute;left:-16px;bottom:-14px;width:52px;height:52px;border-radius:12px;border:1px solid var(--hl2);background:var(--s2);padding:7px;transform:rotate(-6deg)}
.chd-hero{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:26px;margin-top:32px;align-items:start}
.chd-heroL h3{font-size:1.2rem;letter-spacing:-.02em;margin-bottom:10px}
.chd-vid{max-width:370px}
.chd-calact{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:18px}
.chd-lead{font:400 .95rem/1.6 var(--fd);color:var(--dim);max-width:44rem;margin-top:6px}
.chd-bon,.chd-cb{margin-top:64px;padding-top:44px;border-top:1px solid var(--hl1)}
.chd-bon h2,.chd-cb h2{font-size:1.4rem;letter-spacing:-.02em}
/* four cards, two by two: three abreast left the fourth alone (Erik, 2026-10-06) */
.chb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:24px}
/* .card and .chb both weigh one class and shell.css is linked after this file, so the card's own
   padding:24px won the tie and inset the picture: a card drawn inside a card (0144) */
.card.chb{display:flex;flex-direction:column;padding:0;overflow:hidden;min-width:0}
.chb > img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-bottom:1px solid var(--hl1);opacity:.9}
.chb-in{display:flex;flex-direction:column;gap:8px;padding:14px 14px 16px;flex:1}
.chb-k{font:500 10px/1 var(--fm);letter-spacing:.2em;color:var(--acc)}
.chb h3{font-size:.92rem;letter-spacing:-.01em}
.chb p{font:400 12px/1.55 var(--fd);color:var(--dim)}
.chb ul{margin:0;padding-left:18px;font:400 12px/1.55 var(--fd);color:var(--dim)}
.chb-list{max-height:120px;overflow-y:auto;padding-right:6px}
.chb-act{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;gap:8px}
.chb-act .btn{white-space:nowrap}
.chd-board{columns:3;column-gap:10px;margin-top:24px}
.chd-board a{display:block;break-inside:avoid;margin-bottom:10px;border:1px solid var(--hl1);border-radius:var(--rb);overflow:hidden;background:var(--s1);transition:border-color .16s}
.chd-board a:hover{border-color:var(--hl3)}
.chd-board img{width:100%;height:auto;display:block}

/* ---------- a day: hero, the P.R.O.C.E.S.S. cards, celebrate, foot. Each block is its own frame. ---------- */
/* A day is not one card. The prototype leaves the page's own section bare and frames every
   block instead (styles.css L2850), so the shell's frame on main > section comes off here,
   or the seven cards read as cards inside a card (0144). */
main > section.chday{background:none;border:none;box-shadow:none}
main > section.chday::before{content:none}
.chday .lesson-main{padding:0 0 72px}
.chday .chp-hero,.chday .chp-card,.chday .chp-cel{position:relative;margin:0;padding:clamp(22px,3.4cqw,42px);border-radius:16px;
  background-color:color-mix(in srgb,rgb(12,10,8) 40%,transparent);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 50px rgba(0,0,0,.4)}
/* the frame's brackets and edge ticks ride with the block, the way shell.css draws them on
   main > section; the mask is written again because that rule names its own element only.
   --f55-mask is declared here and not on :root: a nested var() is substituted where it is
   declared, so --f55-side has to resolve on the element that uses the mask (brand APP.md). */
.chday .chp-hero::before,.chday .chp-card::before,.chday .chp-cel::before{content:"";position:absolute;inset:-1px;pointer-events:none;z-index:2;
  border:2px solid rgb(from var(--acc) r g b / .65);border-radius:inherit;
  --f55-mask:
    linear-gradient(rgb(0,0,0) 0 0) left  0px top    0px / 18px 18px no-repeat,
    linear-gradient(rgb(0,0,0) 0 0) right 0px top    0px / 18px 18px no-repeat,
    linear-gradient(rgb(0,0,0) 0 0) left  0px bottom 0px / 18px 18px no-repeat,
    linear-gradient(rgb(0,0,0) 0 0) right 0px bottom 0px / 18px 18px no-repeat,
    linear-gradient(rgb(0,0,0) 0 0) center top    / 14px 6px no-repeat,
    linear-gradient(rgb(0,0,0) 0 0) center bottom / 14px 6px no-repeat,
    var(--f55-side) left  center / var(--f55-side-sz) no-repeat,
    var(--f55-side) right center / var(--f55-side-sz) no-repeat;
  -webkit-mask:var(--f55-mask);
  mask:var(--f55-mask)}
.chday .chp-hero .lsact{top:22px;right:22px}
.chday .chp-hero .crumbs{margin-bottom:18px}
.chp-hgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start}
.chp-hright{display:flex;flex-direction:column;gap:18px}
.chp-kick{display:block;font:500 10px/1 var(--fm);letter-spacing:.22em;color:var(--faint)}
.chday .lesson-main > .chp-kick{margin:0 0 14px 4px}
.chp-h1{margin-top:14px;font-size:clamp(2rem,3.6cqw,2.9rem);line-height:1.12;letter-spacing:-.02em}
.chp-no{display:inline-block;min-width:1.5em;text-align:center;background:var(--s2);border:1px solid var(--hl2);border-radius:10px;padding:1px 10px 3px}
.chp-intro{margin-top:16px}
.chp-intro p,.chp-p{font:400 .98rem/1.7 var(--fd);color:var(--dim);max-width:46rem;margin-top:10px}
.chp-intro a,.chp-p a,.chb-in a:not(.btn),.cacc-note a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgb(from var(--acc) r g b / .45);transition:text-decoration-color .15s}
.chp-intro a:hover,.chp-p a:hover,.chb-in a:not(.btn):hover,.cacc-note a:hover{text-decoration-color:var(--acc)}
.chp-prac{margin-top:24px;border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s1);padding:16px 20px;max-width:34rem}
.chp-prac > b{font:700 .98rem/1.3 var(--fd);color:var(--acc);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgb(from var(--acc) r g b / .6)}
.chp-prac ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.chp-prac li{display:flex;gap:10px;font:500 .92rem/1.4 var(--fd);color:var(--ink)}
.chp-prac li::before{content:"\00BB";color:var(--acc);font-weight:700}
.chp-bl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chp-bl .mlabel{flex-basis:100%;font:600 10px/1 var(--fm);letter-spacing:.2em;color:var(--faint)}
.chp-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--hl2);border-radius:var(--rb);background:none;
  font:600 12px/1 var(--fd);color:var(--dim);text-decoration:none;cursor:pointer;transition:color .16s,border-color .16s}
.chp-chip:hover{color:var(--acc);border-color:var(--acc)}
.chp-wh{margin-top:40px;font-size:1.3rem;letter-spacing:-.02em}
.chp-welcome{margin-top:16px;max-width:760px}
/* code accordions: a rounded row, chevron, name, extension; two abreast when there are two or more */
.cacc{margin-top:8px;border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s2)}
.cacc > summary{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;list-style:none}
.cacc > summary::-webkit-details-marker{display:none}
/* a bare arrow, no disc (Erik, 0213). Declared here as well as in doc.css: a property doc.css
   stops declaring falls back to this rule, so a circle left here would draw through it. */
.cacc-dl{flex:none;font-style:normal;font-size:11px;color:var(--faint);transition:transform .16s}
.cacc[open] .cacc-dl{transform:rotate(180deg);color:var(--acc)}
.cacc-l{flex:none;font:500 11px/1 var(--fm);letter-spacing:.06em;color:var(--faint)}
.cacc-t{flex:1;font:600 13.5px/1.3 var(--fd);color:var(--ink);text-align:left;min-width:0}
.cacc .fa-a{padding:0 12px 12px}
/* shell.css hides every .fa-a on the site for its FAQ and shows it again on .open, a class a
   code card never carries: the fold is a native details, so its body follows the open
   attribute of the card and not the reader or a script (0144) */
.cacc[open] > .fa-a{display:block}
.cacc .codeblk{margin-top:0}
.cacc .codeblk pre,.chp-body .codeblk pre{line-height:1.45;font-size:12px;letter-spacing:0}
.cacc-note{margin:0 0 10px;font:400 13px/1.6 var(--fd);color:var(--dim)}
.cacc-grid{columns:2;column-gap:10px;margin-top:12px}
/* only Research shows its cards side by side: under Code, Edit and Stress-Test a code card is
   a full width block (Erik 2026-09-10). The document keeps its collection either way. */
.chp-card:not(#chp-research) .cacc-grid{columns:auto}
.cacc-grid > .cacc{margin:0 0 10px;break-inside:avoid}
.chp-cel{text-align:center}
.chday .chp-cel{padding-top:34px}
.chp-cel h2{position:relative;font-size:1.5rem;letter-spacing:-.02em}
.chp-cel p{margin:10px auto 0;max-width:34rem;color:var(--dim);font:400 .95rem/1.65 var(--fd)}
.chp-cel .btn{margin-top:18px}
.chp-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:52px;padding-top:26px;border-top:1px solid var(--hl1)}
.chp-foot .btn{max-width:36%;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.chp-foot form{display:contents}
.chp-foot .btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* bonus pages */
.chb-body{min-width:0}
.chb-hero{display:flex;gap:22px;align-items:flex-start;margin-top:14px}
.chb-hero img{width:96px;height:96px;border-radius:16px;flex:none;border:1px solid var(--hl2);background:var(--s2)}
.chb-hero .chp-p b{color:var(--ink);font-weight:600}
.shelf{display:flex;flex-direction:column;border:1px solid var(--hl1);border-radius:var(--rc)}
.shelf-row{display:flex;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid var(--hl1);text-decoration:none;color:inherit;min-width:0;transition:background .16s}
.shelf-row:last-child{border-bottom:none}
a.shelf-row:hover{background:var(--s1)}
.shelf-row b{font:600 .95rem/1.3 var(--fd);flex:none;min-width:0}
.shelf-row span{flex:1;font-size:.85rem;color:var(--faint);min-width:0}
.shelf-row em{font-style:normal;color:var(--faint);transition:color .16s,transform .16s}
a.shelf-row:hover em{color:var(--acc);transform:translateX(3px)}
.shelf-row .badge{flex:none}
.chb-shelf{margin-top:16px}
.chp7{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--gap);margin-top:20px}
.chp7 .card{padding:18px}
.chp7 .card h3{margin-top:8px;font-size:1rem}
.chp7 .card p{margin-top:8px;font:400 13px/1.6 var(--fd);color:var(--dim)}

/* ---------- the member rail: a training is a cover-bleed card, a course a row, a module a folding heading ---------- */
.sb-cc{position:relative;overflow:hidden;display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;
  width:100%;margin:0 0 8px;padding:0;border:1px solid var(--hl1);border-radius:10px;background:var(--s1);
  text-align:left;font:inherit;cursor:pointer;text-decoration:none;color:inherit}
.sb-cc:hover{background:var(--s2);border-color:var(--hl2)}
.sb-row{display:contents}
/* the banner slot: no glyph, a gradient placeholder until the cover art exists (Erik 2026-09-08) */
.sb-cc .sb-ic{grid-column:1;grid-row:1/3;width:100%;height:100%;border-radius:0;display:grid;place-items:center;
  background:linear-gradient(140deg,color-mix(in srgb,var(--ca,var(--faint)) 30%,var(--s3)),var(--canvas))}
.sb-cc .sb-ic svg{width:16px;height:16px;stroke:var(--faint);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sb-cc::after{content:"";position:absolute;top:-11px;right:-11px;width:22px;height:22px;transform:rotate(45deg);background:var(--hl3)}
.sb-nm{display:block;grid-column:2;min-width:0;font:700 13.5px/1.2 var(--fd);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:14px 12px 0}
.sb-nm .sb-prog{display:block;margin-top:4px;font:400 10px/1 var(--fm);color:var(--faint)}
.sb-cc :is(.sb-bar,.sb-lkgo){grid-column:2;margin:10px 12px 14px}
.sb-cc .pbar i{background:var(--dim)}
/* baked 2026-09-08: the corner and the title carry the training colour, the icon and the progress stay neutral */
.sb-cc:not(.sb-lk)::after{background:linear-gradient(135deg,var(--ca),var(--cb))}
.sb-cc:not(.sb-lk) .sb-nm{color:var(--ca)}
/* not in your plan: same slot, same size, no colour, no progress; it opens the sales page and says nothing else */
.sb-lk{background:var(--s1);border:1px dashed var(--hl2);color:var(--dim)}
.sb-lk::after{content:none}
.sb-lk .sb-ic{background:var(--s2)}
.sb-lk .sb-nm{color:var(--dim2)}
.sb-lk .sb-prog{color:var(--faint)}
.sb-lkgo{display:block;font:600 11px/1 var(--fd);color:var(--acc);opacity:.8}
.sb-lk:hover{background:var(--s2);border-color:var(--acc);border-style:dashed}
.sb-lk:hover .sb-lkgo{opacity:1}
.sb-cc-on{box-shadow:0 10px 26px rgba(0,0,0,.45)}
.sb-cc-on .sb-nm{font-size:16px}
.sb-hd{text-decoration:none}
/* the rail wraps the shell's three sidebar parts in one box: a flex column like the aside itself, or .sb-body
   could not scroll and .win's overflow:hidden clipped a long course at the bottom */
#rail{display:flex;flex-direction:column;flex:1;min-height:0}
/* the body takes its height, not the rest: the rail.foot groups (Resources, Guides) stack right under the cards and
   only the person row (.sb-me, margin-top:auto) keeps the foot; a long tree still shrinks and scrolls (0432) */
#rail > .sb-body{flex:0 1 auto}
/* a rail.foot group label sits outside the body's 8px padding: in line with the Trainings label inside it */
#rail > .sb-grp{margin-left:8px}
/* folded, the rail is 46px of icons: the shell hides .sb-head and .sb-body, and everything an app appends
   to rail.foot used to stay, so a name was cut to three letters above the arrow (Erik 2026-09-10). One rule
   here and not one per fill: this app owns the outlet, so it owns what the fold does to it. The one
   exception is the person's disc, which Erik asked to keep folded (0206) and which fits 46px. */
body.side-folded #rail > :not(.sb-rail,.sb-me){display:none}
body.side-folded .sb-me{padding-left:0;padding-right:0;justify-content:center}
body.side-folded .sb-me-a{flex:none}
body.side-folded .sb-me-id,body.side-folded .sb-me > :not(.sb-me-a){display:none}
/* folded, a training is its card's banner slot shrunk to a square: the same gradient and the same corner (0344) */
.sb-sq{position:relative;overflow:hidden;width:30px;height:30px;border:1px solid var(--hl1);border-radius:7px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--ca) 30%,var(--s3)),var(--canvas))}
.sb-sq::after{content:"";position:absolute;top:-6px;right:-6px;width:12px;height:12px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--ca),var(--cb))}
.sb-sq:hover{border-color:var(--hl3)}
.sb-sq.act{border-color:var(--ca)}
/* Home (0346): the card's shape, smaller and in neutral ink, leading the cards and the squares */
.sb-home{--ca:var(--dim2);--cb:var(--hl3)}
.sb-cc.sb-home{grid-template-columns:40px minmax(0,1fr)}
.sb-home .sb-nm{padding:11px 12px;font-weight:600;font-size:12.5px}
.sb-cc.sb-home.act{background:var(--s2);border-color:var(--hl3)}
.sb-sq.sb-home{display:grid;place-items:center}
.sb-home svg{width:14px;height:14px;stroke:var(--dim);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* the person at the foot of the rail (0363): the titlebar's disc at reading size, then the name over
   the @handle, and the rail.me fills at its right (0370). Folded to 46px the disc stays alone. */
.sb-me{display:flex;align-items:center;gap:6px;margin-top:auto;padding:8px 10px;border-top:1px solid var(--hl1);min-width:0}
.sb-me-a{flex:1;display:flex;align-items:center;gap:10px;min-width:0;padding:4px 6px;border-radius:8px;color:var(--dim2);text-decoration:none}
.sb-me-a:hover{background:var(--s2);color:var(--ink)}
.sb-me-av{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--hl2);background:var(--s2);font:700 10.5px/1 var(--fm);letter-spacing:.04em;color:var(--dim2);font-style:normal}
.sb-me-a:hover .sb-me-av{border-color:var(--hl3);color:var(--ink)}
.sb-me-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.sb-me-n,.sb-me-h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-me-n{font:600 12.5px/1.2 var(--fd);color:var(--ink)}
.sb-me-h{font:500 10.5px/1.2 var(--fm);color:var(--faint)}
/* a rail.me fill's button wears .sb-me-end: a flex item of the row, so the name ellipsizes before it (0363, 0370) */
.sb-me-end{flex:none;width:28px;height:28px;display:grid;place-items:center;padding:0;
  background:none;border:1px solid transparent;border-radius:8px;color:var(--faint);cursor:pointer}
.sb-me-end:hover{background:var(--s2);color:var(--ink)}
.sb-me-end:focus-visible{outline:1px solid var(--hl3);outline-offset:1px}
.sb-me-end svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.adm-tree{margin-left:14px;padding-left:8px}
.adm-tree.a2-tree{margin:0;padding-left:0}
.adm-mod{padding:22px 6px 5px;font:600 9px/1 var(--fm);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.adm-tree > .adm-mod:first-child{padding-top:9px}
.a2-tree > .adm-mod:first-child{padding-top:16px}
.adm-row{position:relative;display:flex;align-items:center;gap:9px;height:30px;padding:0 8px 0 13px;border-radius:7px;cursor:pointer;
  color:var(--dim);font:500 13.5px/1 var(--fd);min-width:0;text-decoration:none}
.adm-row:hover{background:var(--s2);color:var(--ink)}
.adm-row.act{color:var(--ink);background:var(--s2)}
.adm-row.act::before{content:"";position:absolute;left:-8px;top:8px;bottom:8px;width:2px;background:var(--acc)}
.adm-lab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-kid .sq{flex:none;margin-right:1px;width:13px;height:13px;border-radius:4px}
.adm-kid > em{flex:none;font:500 9.5px/1 var(--fm);color:var(--faint);font-style:normal}
.ag-item{flex:none;width:6px;height:6px;border-radius:1px;border:1.5px solid var(--hl3);display:inline-block;box-sizing:border-box}
.adm-kid.act .ag-item{border-color:var(--acc);background:var(--acc)}
/* a course row: the cover runs the full height flush left, the text keeps its column, the boxes under the text */
.a2sb-c{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:0 10px;
  width:100%;margin:0 0 10px;padding:0;border:1px solid var(--hl1);border-radius:8px;overflow:hidden;background:none;
  text-align:left;font:inherit;cursor:pointer;text-decoration:none;color:inherit}
.a2sb-c:hover{background:rgba(255,255,255,.03)}
.a2sb-ic{grid-row:1/3;width:100%;height:100%;border-radius:0;
  background:linear-gradient(140deg,color-mix(in srgb,var(--ca,var(--faint)) 32%,var(--s3)),var(--canvas))}
.a2sb-tx{min-width:0;padding:9px 0 0}
.a2sb-tx b{display:block;font:700 13.5px/1.25 var(--fd);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2sb-tx em{display:block;margin-top:3px;font:400 9.5px/1 var(--fm);color:var(--faint);font-style:normal}
.a2sb-pct{font:600 10px/1 var(--fm);color:var(--xt-dim);padding:9px 10px 0 0}
.a2sb-c.open .a2sb-pct{color:var(--acc)}
.a2sb-box{grid-column:2/-1;margin:8px 10px 10px 0}
.a2sb-x{grid-template-columns:56px minmax(0,1fr)}
/* the three courses step the Academy 2.0 pair, Academy 3.0's step by stage, a deep dive falls back to grey */
.a2sb-c[data-step="1"]{--ca:var(--tr-a2-a)}
.a2sb-c[data-step="2"]{--ca:color-mix(in srgb,var(--tr-a2-a) 50%,var(--tr-a2-b))}
.a2sb-c[data-step="3"]{--ca:var(--tr-a2-b)}
.a2sb-c[data-stage="start"]{--ca:var(--tr-a3-a)}
.a2sb-c[data-stage="danger"]{--ca:color-mix(in srgb,var(--tr-a3-a) 50%,var(--tr-a3-b))}
.a2sb-c[data-stage="ship"]{--ca:var(--tr-a3-b)}
/* a module: M1 leads the title, the whole heading folds it, the line under it is its own completion (0080) */
.a2sb-m{margin:0 0 4px}
.a2sb-mh{display:flex;align-items:center;gap:9px;position:relative;width:100%;padding:16px 6px 8px;background:none;border:0;text-align:left;font:inherit;cursor:pointer;list-style:none}
.a2sb-mh::-webkit-details-marker{display:none}
.a2sb-m:first-of-type .a2sb-mh{padding-top:9px}
.a2sb-mh::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:1px;border-radius:2px;
  background:linear-gradient(90deg,var(--mc,var(--acc)) var(--mp,0%),var(--hl2) var(--mp,0%))}
.a2sb-mtx{flex:1 1 auto;min-width:0}
.a2sb-mn,.a2sb-car{flex:none}
.a2sb-mn{order:-1;font:600 9px/1 var(--fm);letter-spacing:.14em;color:var(--acc)}
.a2sb-mh:hover{background:rgba(255,255,255,.03)}
.a2sb-mtx b{display:block;font:600 14px/1.25 var(--fd);color:var(--xt-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the module being read is a2sb-cur, never a bare cur: the shell's caret was a bare .cur (sh-cur since 0102) (7px, orange), and it
   turned the current module into that block, titles clipped away (0100). Every class here wears the app's prefix. */
.a2sb-m.a2sb-cur .a2sb-mtx b{color:var(--ink)}
.a2sb-car{order:3;width:7px;height:7px;border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);transform:rotate(45deg);margin-top:-3px}
.a2sb-m[open] .a2sb-car{transform:rotate(-135deg);margin-top:2px}
.a2sb-m .a2sb-l{height:29px;padding-left:10px;font-size:12.5px}
.a2sb-m[open] .a2sb-l:first-of-type{margin-top:4px}
.a2sb-n{flex:none;font:600 9.5px/1 var(--fm);color:var(--faint);font-variant-numeric:tabular-nums}
.a2sb-l.act .a2sb-n{color:var(--acc)}
.a2sb-m[data-st="done"]{--mc:var(--sq-green)}

/* ---------- breakpoints, on the width of the site window ---------- */
@container page (max-width:1100px){
  .chp-hgrid{grid-template-columns:minmax(0,1fr) 300px;gap:28px}
  .chd-hero{grid-template-columns:minmax(0,1fr) 320px}
  .hub-grid{grid-template-columns:minmax(0,1fr)}
}
@container page (max-width:900px){
  .lsact{top:auto;right:auto;position:static;justify-content:flex-end;margin:0 0 18px}
  .lsact-foot{margin:34px 0 0}
  .a2grid,.chd-hero,.chp-hgrid,.chb-grid,.hs-grid{grid-template-columns:minmax(0,1fr)}
  .cacc-grid{columns:auto}
  .chd-board{columns:2}
  .chp-foot{flex-direction:column;align-items:stretch}
  .chp-foot .btn{max-width:none}
}
@container page (max-width:640px){
  /* the course page's contents: a narrower number gutter, the title over its count, one column */
  .cpl-m{grid-template-columns:48px minmax(0,1fr)}
  .cpl-num{font-size:24px}
  .cpl .cpl-ls{columns:1}
  .cpl-h{flex-direction:column;gap:6px}
  .chead{flex-wrap:wrap}
  .chead-tx{flex:1 1 auto;min-width:200px}
  .chd-board{columns:1}
  /* a course row on a phone (0382): the words take the row beside the icon, progress and the call
     drop under them, where the icon's column ends */
  .hc{flex-wrap:wrap;row-gap:12px;align-items:flex-start}
  .hc-tx{flex:1 1 calc(100% - 72px)}
  .hc-prog{margin-left:72px}
  .hc-act{margin-left:auto;width:auto}
}
/* a finger needs 40px (0382): the rail's rows in the drawer and the lesson's prev, tick and next.
   Touch screens under 1100px only, so a desk with a mouse keeps the rail it had */
@media (max-width:1100px) and (pointer:coarse){
  .adm-row,.a2sb-m .a2sb-l{height:40px}
  .lsq{width:40px;height:40px}
  .btn-lra,.cbar,.chp-chip{min-height:40px}
  .chp-cd{padding:13px 0}
  /* the crumbs grow their hit area and not their box: the padding the margin takes back */
  .crumbs a{padding-block:14px;margin-block:-14px}
}
@media (prefers-reduced-motion:reduce){
  .hub-cur{animation:none}
}

/* ----- the titlebar's Resume button (Erik 2026-09-10): the label in the bar's own mono, the chord
   in the shell's kbd. Under .bar-acts, or shell.css's own button rule would win the tie. */
.bar-acts .cs-resume{display:inline-flex;align-items:center;gap:7px;padding:5px 7px 5px 9px;
  font:600 10px/1 var(--fm);letter-spacing:.1em;color:var(--dim);transition:color .16s,border-color .16s}
.bar-acts .cs-resume:hover{color:var(--ink)}


/* ----- a node not on the site yet (0193): a locked row keeps its slot, loses its link and wears
   its state as a chip. Ink and opacity only, so no row moves when a state changes. */
.is-locked{cursor:default;opacity:.55}
.is-locked:hover{background:none;border-color:var(--hl1)}
.is-locked :is(.crow-t,.adm-lab,.a2card-t,.hc-tx h3,.a2sb-tx b){color:var(--dim);text-decoration:none}
.is-locked .hc-act,.is-locked .a2card-go,.is-locked .crow-act{color:var(--faint)}
.chp-cd .wip{display:block;margin:2px 0 0;padding:0;border:0;font-size:7px;letter-spacing:.08em}
.wip{margin-left:8px;padding:3px 5px;border:1px solid var(--hl2);border-radius:5px;
  font:600 9px/1 var(--fm);font-style:normal;letter-spacing:.14em;color:var(--acc);flex:none}

/* ----- a free training's guest page (0678): one centred column, the video its own row up to 800px, the
   form's box under it, the ticks two abreast under the box: two columns as wide as their longest line, a gap
   between, the pair centred; the box and the form in it as wide as the ticks, 720px at least (`.ft-act`, Erik 0700). The box and the ticks are app_resources' and
   app_optin's (rs-kitcard, rs-ticks); the video app_pages' .ytv, whose iframe fills it once it plays. */
.ft-guest .wrap{display:flex;flex-direction:column;align-items:center;max-width:900px;margin-inline:auto;text-align:center}
.ft-guest h1{margin-top:12px}
.ft-guest h1 .hl{white-space:nowrap}
.ft-guest .sub{max-width:40rem}
.ft-video{width:100%;max-width:800px;margin-top:28px}
.ft-act{display:grid;width:fit-content;min-width:min(100%,720px);max-width:100%;margin-top:30px}
.ft-card .cap{max-width:none}
.ft-guest .ft-ticks{display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;gap:12px 64px;text-align:left}
@container page (max-width:640px){.ft-act{width:100%}.ft-guest .ft-ticks{grid-template-columns:minmax(0,1fr);justify-content:stretch}}