/* app_editor: the look of a RENDERED document, for every reader.

   The editor.head fill puts this file on every page, so a guest, a member and staff read the same
   document (inbox 0116). Three apps had copied these rules while editor.css was staff only; the
   editor owns them now and those copies are gone.

   One set of rules for both modes: read mode puts .tt-doc on a plain div and edit mode puts it on
   the .ProseMirror Tiptap mounts in the same host, so nothing moves between them. Where the courses
   already own a block class (.codeblk, .cacc, .a2fig, .a2-ul, .a2-dlrow, .vframe, .a2ref) the
   declarations are theirs, so a lesson looks the same whether courses.css is on the page or not.

   The editing chrome is editor.css, which loads after this file: {% editor_assets %} ships it to
   staff, and the notes window's head fill to any member, because that window mounts the editor. */

/* =========================================================== the document */
.tt-doc{outline:none;min-height:60px;font:500 .97rem/1.7 var(--fd);color:var(--dim2)}
.tt-doc > *{margin-top:18px}
.tt-doc > :first-child{margin-top:0}
.tt-doc h1{font:600 1.7rem/1.2 var(--fd);letter-spacing:-.01em;margin-top:34px;color:var(--ink)}
.tt-doc h2{font:600 1.25rem/1.25 var(--fd);letter-spacing:-.01em;margin-top:34px;color:var(--ink)}
.tt-doc h3{font:600 1rem/1.3 var(--fd);letter-spacing:-.01em;margin-top:26px;color:var(--ink)}
.tt-doc p{font:400 .95rem/1.7 var(--fd);color:var(--dim);max-width:46rem}
.tt-doc b{color:var(--ink)}
.tt-doc a{color:var(--acc);text-underline-offset:3px}
.tt-doc code{background:var(--s2);border:1px solid var(--hl1);border-radius:4px;
  font:400 .85em var(--fm);padding:1px 5px;color:var(--acc)}
.tt-doc ul,.tt-doc ol{color:var(--dim);font:400 .95rem/1.7 var(--fd);max-width:46rem}
.tt-doc .a2-ul{padding-left:20px}
.tt-doc .a2-ul li{margin-top:6px}
.tt-doc li > p{margin:0;max-width:none}
.tt-doc blockquote{padding-left:16px;border-left:2px solid var(--acc);color:var(--dim);font-style:italic}
.tt-doc blockquote p{margin:0}
.tt-doc hr{height:0;border:none;border-top:1px solid var(--hl2);margin-top:30px}
.tt-doc mark{background:rgb(from var(--acc) r g b / .28);color:var(--ink);border-radius:4px;
  padding:0 .18em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* the RVTDocs mark: a name that points at the docs, not a generic link. The selector carries
   .tt-doc because `.tt-doc a` above is one point heavier and would paint this like any link. */
.tt-doc .tt-api{color:var(--c-docs);text-decoration:none;border-bottom:1px solid rgba(74,163,255,.4);
  font-family:var(--fm);font-size:.9em}
.tt-doc .tt-api:hover{border-bottom-color:var(--c-docs)}
/* a type Python does not know yet: visible, never a 500 */
.tt-doc .tt-unknown{margin-top:18px;padding:12px 14px;border:1px solid var(--hl2);border-radius:var(--rc);
  font:400 .8rem/1.5 var(--fm);color:var(--faint)}

/* ----- image: three widths on the figure, the picture fills it (0254).
   --w is the px the drag writes (desktop), --w-tab and --w-phone a percent of the column: the
   percent resolves against the column, the breakpoint is asked of `page`, the canvas, which is the
   only container on the page (shell.css) and whose 960 and 640 are the site's own tablet and phone
   lines. A container on the column would read 960 as always true: the column is never that wide.
   Each fallback is the wider breakpoint's answer, and the last one is 0172's rule: a picture
   nobody sized is drawn at its own size and never wider than the words beside it (46rem). */
.tt-doc .a2fig{position:relative;margin:22px 0 0;
  width:var(--w,max-content);max-width:min(100%,var(--w,46rem));
  border:1px solid var(--hl1);border-radius:var(--rc);background:var(--s1);overflow:hidden}
.tt-doc .a2fig img{display:block;width:100%;max-width:100%;height:auto}
@container page (max-width:960px){
  .tt-doc .a2fig{width:var(--w-tab,var(--w,max-content));
    max-width:min(100%,var(--w-tab,var(--w,46rem)))}
}
@container page (max-width:640px){
  .tt-doc .a2fig{width:var(--w-phone,var(--w-tab,var(--w,max-content)));
    max-width:min(100%,var(--w-phone,var(--w-tab,var(--w,46rem))))}
}

/* ----- code card: the courses' .cacc fold over their .codeblk */
.tt-doc .codeblk{margin-top:22px;border:1px solid var(--hl2);border-radius:var(--rc);
  background:var(--s1);overflow:hidden}
.tt-doc .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)}
.tt-doc .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}
.tt-doc .cb-copy{flex:none;background:none;border:1px solid var(--hl2);border-radius:6px;
  color:var(--dim);font:500 11px/1 var(--fm);padding:5px 9px;cursor:pointer}
.tt-doc .cb-copy:hover{border-color:var(--acc);color:var(--acc)}
.tt-doc .codeblk pre{display:flex;gap:14px;margin:0;padding:16px;overflow-x:auto;white-space:pre;tab-size:2;
  font:400 12.5px/1.7 var(--fm);color:var(--dim2)}
.tt-doc .codeblk code{flex:1 0 auto;background:none;border:none;padding:0;color:inherit;font:inherit}
/* the line numbers on every code block of the site (Erik, 0588): the code's own size and lines, dark
   gray; a flex row beside the code, since pre keeps the span's line breaks. #lazy: they scroll away
   with a long line; a sticky gutter needs a ground colour per host */
.tt-doc .cb-ln{display:block;flex:none;min-width:2ch;text-align:right;color:var(--faint);opacity:.6;
  user-select:none;pointer-events:none}
.tt-doc .cc{color:rgb(91,98,112)}          /* a comment, chal.js hl() */
.tt-doc .cs{color:rgb(143,212,154)}         /* a string */
.tt-doc .ck{color:var(--acc)}           /* a keyword */
.tt-doc .cn{color:rgb(125,180,232)}         /* a tag's attribute, a YAML true, false or null, a Markdown list mark */
.tt-doc .cacc{margin-top:22px;border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s2)}
.tt-doc .cacc > summary{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;list-style:none}
.tt-doc .cacc > summary::-webkit-details-marker{display:none}
/* a bare arrow, no disc: the circled one read as chrome on the cheat sheet (Erik, 0213) */
.tt-doc .cacc-dl{flex:none;font-style:normal;font-size:11px;color:var(--faint);transition:transform .16s}
.tt-doc .cacc[open] .cacc-dl{transform:rotate(180deg);color:var(--acc)}
.tt-doc .cacc-l{flex:none;font:500 11px/1 var(--fm);letter-spacing:.06em;color:var(--faint)}
.tt-doc .cacc-t{flex:1;font:600 13.5px/1.3 var(--fd);color:var(--ink);text-align:left;min-width:0}
/* a code card is ONE card: its summary IS the header bar, so the block inside drops its own frame
   and its head keeps the Copy button alone. The language already reads as the .py chip in the
   summary; .cb-file stays in the markup because schema.js parses the language back out of it
   when HTML is pasted in (0213). */
.tt-doc .cacc .fa-a{padding:0 16px 14px}
.tt-doc .cacc .codeblk{margin-top:0;border:0;border-radius:0;background:none}
.tt-doc .cacc .cb-head{justify-content:flex-end;padding:0 0 6px;border-bottom:0;background:none}
.tt-doc .cacc .cb-file{display:none}
.tt-doc .cacc .codeblk pre{padding:0}
.tt-doc .cacc-note{margin:0 0 10px;font:400 13px/1.6 var(--fd);color:var(--dim);max-width:none}
/* a collection: two masonry columns, the LEFT one filled first, so opening a card grows only its
   own column. The same forced break the site's .cacc-grid uses, enumerated for 2 to 12 cards. */
.tt-doc .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. */
.tt-doc .chp-card:not(#chp-research) .cacc-grid{columns:auto}
.tt-doc .cacc-grid > .cacc,.tt-doc .cacc-grid > .tt-cc{margin:0 0 10px;break-inside:avoid;
  display:inline-block;width:100%}
.tt-doc .cacc-grid>:nth-child(2):nth-last-child(1),.tt-doc .cacc-grid>:nth-child(3):nth-last-child(1),
.tt-doc .cacc-grid>:nth-child(3):nth-last-child(2),.tt-doc .cacc-grid>:nth-child(4):nth-last-child(2),
.tt-doc .cacc-grid>:nth-child(4):nth-last-child(3),.tt-doc .cacc-grid>:nth-child(5):nth-last-child(3),
.tt-doc .cacc-grid>:nth-child(5):nth-last-child(4),.tt-doc .cacc-grid>:nth-child(6):nth-last-child(4),
.tt-doc .cacc-grid>:nth-child(6):nth-last-child(5),.tt-doc .cacc-grid>:nth-child(7):nth-last-child(5),
.tt-doc .cacc-grid>:nth-child(7):nth-last-child(6),.tt-doc .cacc-grid>:nth-child(8):nth-last-child(6){break-before:column}
/* the cheat sheet is the densest card of a day: two columns of folds, so every row under Research
   reads one step below the same row under the other stages (Erik, 0213) */
.tt-doc #chp-research .cacc-t{font-size:12px}
.tt-doc #chp-research .cacc-note{font-size:12px}
.tt-doc #chp-research .codeblk pre{font-size:11.5px}
.tt-doc #chp-research .chp-body p,.tt-doc #chp-research .chp-body li{font-size:.9rem}

/* ----- two columns */
.tt-cols{display:grid;gap:18px;align-items:start}
.tt-cols[data-ratio="1:1"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tt-cols[data-ratio="2:1"]{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.tt-cols[data-ratio="1:2"]{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.tt-cell{min-width:0}
.tt-cell > *{margin-top:12px}
.tt-cell > :first-child{margin-top:0}
.tt-cell p{max-width:none}
/* a phone has no room for two: the cells stack, left first, as Framer's rows did (0674) */
@container page (max-width:640px){.tt-cols[data-ratio]{grid-template-columns:minmax(0,1fr)}}

/* ----- callout: a flat surface, never an orange fill, the tone on its border, which is SOLID
   because a dashed one means "locked" everywhere else here */
.tt-nb{position:relative;padding:16px 18px 16px 60px;border-radius:var(--rc);
  border:1px solid rgb(from var(--acc) r g b / .34);background:var(--s1)}
.tt-nb > *{margin-top:10px}
.tt-nb > :first-child{margin-top:0}
.tt-nb p{color:var(--dim2);max-width:none}
.tt-nb::before{content:attr(data-kick);position:absolute;left:16px;top:16px;
  font:700 10px/1.7 var(--fm);letter-spacing:.12em;color:var(--acc)}
.tt-nb[data-tone=tip]{border-color:rgba(61,220,151,.34)}
.tt-nb[data-tone=tip]::before{color:var(--c-blog)}
.tt-nb[data-tone=warn]{border-color:rgba(255,193,120,.4)}
.tt-nb[data-tone=warn]::before{color:var(--tr-a3-a)}

/* ----- faq (0674, 0695): the site draws the shell's one FAQ (.faq > button + .fa-a: shell.css's look,
   shell.js's one open per run); a run of them joins into one box here, the shell's .faqs, which a
   document has no node for. The editor draws the same .faq (.tt-faq too), `open` while the caret is
   in it (schema.js); its question is a paragraph and its answer no .fa-a, so the button's and the
   answer's type are repeated for them. The marker is the card's ::before, the placeholder owns a
   paragraph's */
.tt-doc .faq{border:1px solid var(--hl1);border-top:0;overflow:hidden}
.tt-doc .faq + .faq{margin-top:0}
.tt-doc .faq:not(.faq + .faq){border-top:1px solid var(--hl1);
  border-top-left-radius:var(--rc);border-top-right-radius:var(--rc)}
.tt-doc .faq:not(:has(+ .faq)){border-bottom:1px solid var(--hl1);
  border-bottom-left-radius:var(--rc);border-bottom-right-radius:var(--rc)}
.tt-doc .fa-a > * + *{margin-top:10px}
.tt-doc .tt-faq{position:relative}
.tt-doc .tt-faq.open{padding-bottom:22px}
.tt-doc .tt-faq:not(.open) > :not(:first-child){display:none}
.tt-doc .tt-faq::before{content:'+';position:absolute;right:22px;top:19px;pointer-events:none;
  font:400 16px/1 var(--fm);color:var(--faint);transition:transform .16s}
.tt-doc .tt-faq.open::before{transform:rotate(45deg);color:var(--acc)}
.tt-doc .tt-faq > p:first-child{margin:0;padding:18px 52px 18px 22px;max-width:none;cursor:text;
  font:600 .95rem/1.4 var(--fd);color:var(--dim2)}
.tt-doc .tt-faq > :not(:first-child){margin:10px 22px 0}
.tt-doc .tt-faq > :nth-child(2){margin-top:6px}
.tt-doc .tt-faq > p:not(:first-child){max-width:40rem;font-size:.875rem;line-height:1.65;color:var(--dim)}

/* ----- download row */
.tt-dl{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.tt-doc .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}
.tt-doc .a2-dlrow:hover{border-color:var(--acc);color:var(--acc)}
.tt-doc .a2-dlrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.tt-dls{font:400 11px/1 var(--fm);color:var(--faint);font-style:normal}

/* ----- video: the courses' frame, a poster until it is clicked, no third-party frame on paint */
.tt-doc .vframe{border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s1);overflow:hidden}
.tt-doc .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}
.tt-doc .v-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgb(0,0,0)}
.tt-doc .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}
.tt-doc .v-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.tt-doc .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}
.tt-doc .a2-playb svg{width:26px;height:26px;fill:var(--ink);stroke:none;margin-left:3px}
.tt-doc .v-play:hover .a2-playb{background:rgb(from var(--acc) r g b / .3);border-color:var(--acc);transform:scale(1.05)}
.tt-doc .a2-playt{position:relative;font:400 11px/1 var(--fm);color:var(--dim2);letter-spacing:.08em}

/* ----- reference list: the Academy 2.0 cards, the classes lesson.js filters on */
.tt-doc .a2ref{margin-top:34px}
.tt-doc .a2r-f{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tt-doc .a2r-f button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;cursor:pointer;
  border:1px solid var(--hl1);border-radius:var(--rb);background:var(--s1);color:var(--dim);
  font:500 .78rem/1 var(--fd)}
.tt-doc .a2r-f button:hover{color:var(--ink);border-color:var(--hl2)}
.tt-doc .a2r-f button.on{color:var(--ink);background:var(--s3);border-color:var(--hl3)}
.tt-doc .a2r-f button i{font-style:normal;font-size:.72rem;color:var(--faint)}
.tt-doc .a2r-f button.on i{color:var(--dim2)}
.tt-doc .a2r-l{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.tt-doc .a2r-e{padding:16px 18px;border:1px solid var(--hl1);border-radius:var(--rc);background:var(--s1)}
.tt-doc .a2r-n{display:flex;align-items:baseline;gap:8px;margin:0;font:600 .95rem/1.4 var(--fm);
  letter-spacing:-.01em;color:var(--ink)}
.tt-doc .a2r-n a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hl3)}
.tt-doc .a2r-b{flex:none;font-size:.85rem;line-height:1}
.tt-doc .a2r-d,.tt-doc .a2r-m{margin:8px 0 0;font:400 .88rem/1.6 var(--fd);color:var(--dim);max-width:none}
.tt-doc .a2r-m span{color:var(--faint)}
/* an entry with code is Framer's row: the words left, the code right, half and half; a phone stacks (0674) */
.tt-doc .a2r-e:has(> .a2r-c){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.tt-doc .a2r-c > .codeblk{margin-top:0}
.tt-doc .a2r-c > .codeblk + .codeblk{margin-top:12px}
@container page (max-width:720px){.tt-doc .a2r-e:has(> .a2r-c){grid-template-columns:minmax(0,1fr)}}
/* a filtered out entry stays out: the code row's grid above ties [hidden] on weight and came later,
   so no chip hid a row with code (0695) */
.tt-doc .a2ref .a2r-e[hidden]{display:none}
/* a category without a glyph (Regular) wears an accent dash, on its chip and its cards (Erik, 0695) */
.tt-doc .a2r-f button:not([data-c="-1"]):not(:has(span))::before,
.tt-doc .a2ref:not(.a2r-tl) .a2r-n:not(:has(.a2r-b))::before{content:"";flex:none;width:10px;height:2px;
  border-radius:1px;background:var(--acc);align-self:center}
/* one liners (the filter tables) are Framer's dotted list, no card: an accent dot per entry and a line
   down to the next, the name an accent link in the body face (0674) */
.tt-doc .a2r-tl .a2r-l{gap:0}
.tt-doc .a2r-tl .a2r-e{position:relative;padding:0 0 24px 30px;border:0;border-radius:0;background:none}
.tt-doc .a2r-tl .a2r-e::before{content:"";position:absolute;left:2px;top:7px;width:9px;height:9px;
  border-radius:50%;background:var(--acc)}
.tt-doc .a2r-tl .a2r-e:not(:last-child)::after{content:"";position:absolute;left:6px;top:22px;bottom:4px;
  width:1px;background:rgb(from var(--acc) r g b / .45)}
.tt-doc .a2r-tl .a2r-n{font:600 1rem/1.4 var(--fd)}
.tt-doc .a2r-tl .a2r-n a{color:var(--acc);border-bottom-color:rgb(from var(--acc) r g b / .5)}
.tt-doc .a2r-tl .a2r-n a:hover{border-bottom-color:var(--acc)}
.tt-doc .a2r-tl .a2r-m{margin-top:6px;color:var(--ink)}
.tt-doc .a2r-tl .a2r-d{margin-top:4px;color:var(--dim2)}

/* ----- checklist */
.tt-task{list-style:none;padding:0;margin-top:18px}
.tt-task li{display:flex;align-items:flex-start;gap:10px}
.tt-task li + li{margin-top:8px}
.tt-task label{flex:none;display:grid;place-items:center;padding-top:2px}
.tt-task input{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}
.tt-task li > div{min-width:0;flex:1}
.tt-task li[data-checked=true] > div{color:var(--faint);text-decoration:line-through}

/* ============================== a Challenge day's P.R.O.C.E.S.S. card (process)
   The day's own rules, moved out of courses.css where they only ever served these cards. The
   classes stay day.html's (0110), so nothing on the page moved; what changed is that the text
   inside a card is now ordinary editor nodes carrying no class, so the card styles them by
   element. Every selector starts at .tt-doc: two classes outrank the `.tt-doc <element>` rules
   above, which would otherwise repaint a card's heading, paragraph or aside. */
.tt-doc > .tt-proc{margin-top:0}          /* the gap below carries the space between two cards */
/* the gap is the one pair the page may draw outside the document: day.html sets the same three
   chevrons between the last card and Time to celebrate, and scoped to .tt-doc they reached an
   unstyled svg, 300px wide and filled black (Erik, 2026-09-11, 0167) */
.chp-gap{display:flex;justify-content:center;align-items:center;padding:46px 0 28px}
.chp-arrsvg{width:24px;height:44px;fill:none;stroke:var(--hl3);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.chp-arrsvg path{animation:chevfall 2.2s ease-in-out infinite}
.chp-arrsvg path:nth-child(2){animation-delay:.25s}
.chp-arrsvg path:nth-child(3){animation-delay:.5s}
@keyframes chevfall{0%,100%{opacity:.2}40%{opacity:1;stroke:var(--acc)}}
.tt-doc .chp-card{scroll-margin-top:24px;min-width:0}
.tt-doc .chp-proc{display:flex;justify-content:center;align-items:baseline;gap:0;margin-bottom:20px}
.tt-doc .chp-proc i{font-style:normal;color:var(--faint);margin:0 -1px;font:700 13px/1 var(--fd)}
.tt-doc .chp-pl{position:relative;background:none;border:none;padding:5px 2px;cursor:pointer;
  text-decoration:none;font:800 16px/1 var(--fd);letter-spacing:.01em;color:var(--dim);transition:color .15s}
.tt-doc .chp-pl:hover{color:var(--ink)}
.tt-doc .chp-pl.on{color:var(--acc)}
/* the pill's name is the shell's tooltip, read off data-tip (0440): one tip on the site, never clipped */
.tt-doc .chp-ch{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin-top:6px}
.tt-doc .chp-badge{font:600 11px/1 var(--fm);letter-spacing:.2em;color:var(--acc);padding:7px 12px;
  border:1px solid rgb(from var(--acc) r g b / .5);border-radius:8px;background:var(--canvas)}
.tt-doc .chp-ch h2{margin-top:0;font-size:1.5rem;letter-spacing:-.02em}
.tt-doc .chp-card .vframe{margin-top:20px;max-width:720px;border-radius:var(--rc);overflow:hidden}
.tt-doc .chp-body{margin-top:6px}
.tt-doc .chp-body > p,.tt-doc .chp-body > ul,.tt-doc .chp-body > ol{margin-top:10px}
.tt-doc .chp-body p{font:400 .98rem/1.7 var(--fd);color:var(--dim);max-width:46rem}
.tt-doc .chp-body p a,.tt-doc .chp-body li a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgb(from var(--acc) r g b / .45);transition:text-decoration-color .15s}
.tt-doc .chp-body p a:hover,.tt-doc .chp-body li a:hover{text-decoration-color:var(--acc)}
.tt-doc .chp-body h3{margin-top:30px;font-size:1.05rem;letter-spacing:-.01em;display:flex;
  align-items:center;gap:9px}
.tt-doc .chp-body h3::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--acc);flex:none}
/* a numbered list in a card is the day's step flow: dots down a rail, the number in mono beside
   each. The old markup carried .chp-flow and wrote its own numbers; a counter draws them now. */
.tt-doc .chp-body ol{list-style:none;position:relative;margin-top:14px;padding:0;display:flex;
  flex-direction:column;align-items:flex-start;counter-reset:chpstep}
.tt-doc .chp-body ol::before{content:"";position:absolute;left:5px;top:14px;bottom:14px;width:1px;background:var(--hl3)}
.tt-doc .chp-body ol > li{counter-increment:chpstep;position:relative;display:flex;align-items:center;
  gap:10px;margin-top:0;padding:5px 0 5px 22px;font:500 .93rem/1.3 var(--fd);color:var(--ink)}
.tt-doc .chp-body ol > li::before{content:"";position:absolute;left:1px;top:50%;width:9px;height:9px;
  margin-top:-5px;box-sizing:border-box;border-radius:50%;background:var(--canvas);
  border:1.5px solid var(--acc);transition:background .18s}
.tt-doc .chp-body ol > li:hover::before{background:var(--acc)}
.tt-doc .chp-body ol > li::after{content:counter(chpstep,decimal-leading-zero);order:-1;
  font:600 10px/1 var(--fm);color:var(--acc)}
.tt-doc .chp-body ol > li > p{font:inherit;color:inherit}
/* the RESEARCH card's two columns: the divider the day drew between its subs */
.tt-doc .chp-body .tt-cols{gap:0;margin-top:6px}
.tt-doc .chp-body .tt-cell + .tt-cell{border-left:1px solid var(--hl1);margin-left:34px;padding-left:34px}
/* the NB stop card the Code stage carries: a stroked SVG ring marches around the whole border */
.tt-doc .chp-cta{position:relative;padding:13px;border-radius:22px;text-align:center;overflow:hidden;
  background:var(--canvas);box-shadow:0 0 0 1px rgb(from var(--acc) r g b / .4),0 0 70px rgb(from var(--acc) r g b / .16),0 26px 60px rgba(0,0,0,.55)}
.tt-doc .chp-cta p{max-width:none}
.tt-doc .chp-tape{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;border-radius:inherit;pointer-events:none}
.tt-doc .chp-tape rect{fill:none;stroke:var(--acc);stroke-width:26px;stroke-dasharray:1 1;animation:tapego 2.4s linear infinite}
@keyframes tapego{to{stroke-dashoffset:-2}}
.tt-doc .chp-cta-in{position:relative;z-index:1;overflow:hidden;border-radius:11px;
  background:var(--s1);
  padding:clamp(34px,5cqw,54px) clamp(18px,4cqw,40px) clamp(40px,5cqw,58px)}
.tt-doc .chp-cta-k{display:block;font:800 1.15rem/1 var(--fd);letter-spacing:.2em;color:var(--acc);margin-bottom:12px}
.tt-doc .chp-cta-h{margin-top:0;font:800 clamp(1.6rem,4.2cqw,2.9rem)/1.08 var(--fd);letter-spacing:-.02em;
  text-transform:uppercase;color:var(--ink)}
.tt-doc .chp-cta-h u{text-decoration-color:var(--acc);text-decoration-thickness:4px;text-underline-offset:7px}
.tt-doc .chp-cta-s{margin-top:10px;font:500 clamp(1.1rem,2.6cqw,1.85rem)/1.15 var(--fd);letter-spacing:.01em;
  text-transform:uppercase;color:var(--dim2)}
.tt-doc .chp-cta-u{margin-top:12px;font:700 1.5rem/1.2 var(--fh);color:var(--acc2)}
.tt-doc .chp-cta-f{margin:28px auto 0;max-width:34rem;font:400 13px/1.55 var(--fd);color:var(--dim)}
.tt-doc .chp-cta-f b{display:block;margin-bottom:7px;font:600 10px/1 var(--fm);letter-spacing:.24em;
  color:var(--faint);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgb(from var(--acc) r g b / .6)}
@container page (max-width:900px){
  .tt-doc .chp-body .tt-cols{grid-template-columns:minmax(0,1fr)}
  .tt-doc .chp-body .tt-cell + .tt-cell{border-left:none;margin-left:0;padding-left:0}
}
@media (prefers-reduced-motion:reduce){.chp-arrsvg path,.tt-doc .chp-tape rect{animation:none}}

/* ----- a community post's inline atoms (0554): `@handle` and the lesson chip `/slug`, the chip in
   the inline-code look. A chip the reader may not open is grayed with a lock (the shell's tooltip
   names its training), one whose lesson is gone is struck. */
/* a mention reads as a person, a pill in the accent's tint (Erik, 0588) */
.tt-doc .tt-at{padding:0 4px;border-radius:var(--rb);color:var(--acc2);font-weight:600;background:color-mix(in srgb,var(--acc) 12%,transparent)}
.tt-doc .tt-ref{display:inline-flex;align-items:center;gap:4px;padding:1px 6px;border-radius:4px;
  background:var(--s2);border:1px solid var(--hl1);font:500 .88em/1.4 var(--fm);color:var(--ink);text-decoration:none}
.tt-doc a.tt-ref:hover{border-color:var(--hl3)}
.tt-doc .tt-ref.is-lock{color:var(--faint);cursor:default}
.tt-doc .tt-ref.is-lock svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}
.tt-doc .tt-ref.is-gone{color:var(--faint)}
/* a slot's paragraph (Enter, Erik 2026-10-04): a short gap under the line, not a blank line */
.tt-gap{display:block;height:10px}