/* ============================================================
   Agent Native Essentials · Program Home
   Built by AI-Build-Lab/Essentials/program-home/build.py. Do not edit the
   published copy; edit the source bodies and rebuild.
   Loads after field-manual.css, _shell.css and _wf.css. Everything here is
   Essentials-only: the chapter bar, one-view-at-a-time routing, the
   Claude Code / Codex switch, the Mac / Windows pair, the vocabulary
   strip, and the hand-built teaching figures. Card chassis (rc-*) comes
   from _wf.css untouched, so an Essentials lesson and a Workforce card
   are the same object.
   ============================================================ */

/* Token aliases: the mockup's names onto the live design system's names. */
[data-program="essentials"] {
  --paper: var(--cream); --paper-2: var(--cream-2); --paper-3: var(--cream-2);
  --lime: var(--neon); --on-lime: var(--on-accent); --lime-dim: var(--neon-dim);
  /* --fm-radius, --fm-border-w, --fm-border-c, --fm-shadow(-xs/-sm) come from field-manual.css
     :root and flip on terminal (dark-mode pass 09-21-2026). Only the rig-specific ones live here. */
  --fm-ease: var(--ease); --fm-snap: .13s;
  --text-xs: 12px; --space-1: 4px; --space-3: 12px;
  --tint-info: var(--blue-tint); --tint-warn: var(--coral-tint); --tint-prompt: var(--neon-tint);
  --terminal-bg: var(--dark);
  --yellow: #FFD52E; --yellow-tint: #FFF4C2;
}
/* Dark (terminal) theme. Everything else in this file rides the design system's tokens, which
   field-manual.css already flips; --yellow is the rig's own token (the FAQ callout, Wade 09-14), so
   it needs its own dark tint here or the FAQ stays a cream box with grey text on it (Wade, 09-16). */
html[data-design="terminal"] [data-program="essentials"], html[data-design="terminal"][data-program="essentials"] {
  --yellow-tint: #2a2300;
}
/* Dark-mode pass (09-21-2026). Shadows, border weight and border colour flip through the --fm-*
   structure tokens in field-manual.css; below are only the polarity flips a token cannot carry. */
html[data-design="terminal"] .btn { background: var(--surface); }              /* secondary buttons opaque, never the grid (decision 5) */
html[data-design="terminal"] .btn.primary { background: var(--lime); }         /* primary stays lime (decision 2) */
html[data-design="terminal"] .ess-chip.on,
html[data-design="terminal"] .ess-stamp { background: var(--neon-dim); color: var(--neon); border-color: var(--neon); }  /* chips and stamps: dim fill, accent text */
html[data-design="terminal"] button.ess-app::after,
html[data-design="terminal"] .ess-pin i,
html[data-design="terminal"] .ess-pinedit { box-shadow: none; }                /* the three odd-size offsets (1px, 1px, 4px) with no token */
html[data-design="terminal"] .ess-steps-tabs [role="tab"].done b { background: var(--neon-dim); color: var(--neon); }  /* done step: light's ink box flips white and drowns the lime digit; dim fill instead */

/* ---- Prose links (Wade, 09-21-2026): never styled before, so they rendered browser-default blue in BOTH
   themes. Light: ink text with a lime underline (canon rule 3: no accent as text on cream); hover fills the
   highlighter pill. Terminal: lime text, the theme's one text accent; same pill on hover. Scoped to the
   lesson body sections: the trail map and the contents box are <li><a> too and have their own styling. ---- */
.rc-sec :is(p, li, dd, td) a:not([class]) {
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--neon);
  text-underline-offset: 3px; border-radius: 2px; transition: background .12s var(--ease), color .12s var(--ease);
}
.rc-sec :is(p, li, dd, td) a:not([class]):hover { background: var(--neon); color: var(--on-accent); text-decoration-color: transparent; }
html[data-design="terminal"] .rc-sec :is(p, li, dd, td) a:not([class]) { color: var(--neon); text-decoration-color: var(--neon-glow); }

/* No graph-paper grid on Essentials, either theme (Wade, 09-22, judged on the live pilot). The grid
   stays a Field Manual signature elsewhere; this only lifts it under the lesson pages. */
[data-program="essentials"] body { background-image: none; }

/* Views: one renders at a time; the hash picks it. */
.view { display: none; }
.view.is-active { display: block; }

/* The lesson layout reuses the Workforce card grid; the bar sits above it. Default = the Workforce layout as approved 09-02:
   article capped at 720px (about 90 characters), side panel 300 to 360px, contents box under it, sticky. */
.ess-lesson .rc-layout { margin-top: 26px; }
.ess-lesson .rc-toccol { margin-top: 22px; }   /* air between the meta card and the contents box (Wade, 09-14) */

/* The wide layout, DEFAULT since 09-15 (Wade's call; ?classic shows the old three-column view, essentials.js owns the switch): the column runs to 900px so figures, tables, tiles and callouts get the room, while
   running prose keeps the 720px measure; side panel 300px, the gap to it a little tighter, the same wider air on both page
   edges; no three-column switch at 1660+, the contents stay on the right under the panel. essentials.js sets html.wide. */
/* 09-21 (Wade, after seeing the Lab blueprint pages): the Lab's column structure. Page gutter back to the
   chassis clamp(20px, 2.4vw, 40px) so the body sits closer to the rail (35px at 1440, was 58); side panel
   300 to 360px with the chassis 40px gap (was 300 / 28); the body fills its column (was capped at 900px).
   Same numbers as .lab-session in portal/lab/lab-session.css. */
html.wide .ess-lesson .rc-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 34px 40px; }
html.wide .ess-lesson .rc-main { max-width: none; }
/* copy runs the same width as the screenshots and forks (Wade, 09-16: the 720px / 80ch caps read as "wrapped short" beside full-width frames) */
html.wide .ess-lesson .rc-sec > p, html.wide .ess-lesson .rc-sec > h2, html.wide .ess-lesson .rc-sec > .ess-alt, html.wide .ess-lesson .rc-sec > .ess-tech, html.wide .ess-lesson .rc-sec > .ess-tech-k, html.wide .ess-lesson .rc-walk { max-width: none; }
html.wide .ess-lesson .ess-plain p, html.wide .ess-lesson .ess-story p, html.wide .ess-lesson .co p, html.wide .ess-lesson .callout .co-body p, html.wide .ess-lesson .ess-fair p, html.wide .ess-lesson .rc-nav { max-width: none; }
@media (min-width: 1660px) {
  html.wide .ess-lesson .rc-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); grid-template-areas: none; justify-content: start; gap: 34px 40px; }
  html.wide .ess-lesson .rc-aside { display: flex; }
  html.wide .ess-lesson .rc-main { grid-area: auto; }
  html.wide .ess-lesson .rc-toccol, html.wide .ess-lesson .rc-side { grid-area: auto; }
}
@media (max-width: 1179px) { html.wide .ess-lesson .rc-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---- lesson head: number stamp, title, question, meta chips ---- */
.ess-head { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 6px; }
.ess-stamp { display: inline-block; align-self: flex-start; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
             letter-spacing: 1.6px; text-transform: uppercase; background: var(--neon); color: var(--on-accent);
             border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px; padding: 4px 9px; box-shadow: var(--fm-shadow-xs); }
.ess-head h2 { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1.08; letter-spacing: -.5px; margin: 0; color: var(--ink); }
.ess-head h2 mark { background: var(--neon); border-color: var(--on-accent); color: var(--on-accent); padding: 0 8px; border-radius: 3px; }
.ess-q { font-size: 17px; color: var(--ink-2); margin: 0; }
.ess-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ess-chip { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
            border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px; background: var(--surface); color: var(--ink); padding: 3px 8px; }
.ess-chip.on { background: var(--neon); border-color: var(--on-accent); color: var(--on-accent); }
.ess-chip.read { background: var(--ink); color: var(--cream); }

/* ---- the ritual stamp (lessons 4 to 8) ---- */
.ess-ritual { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px;
              background: var(--surface); box-shadow: var(--fm-shadow-sm); padding: 10px 14px; margin: 0 0 22px; }
.ess-ritual .k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-3); }
.ess-ritual .r { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.ess-ritual .r i { font-style: normal; color: var(--ink-3); padding: 0 6px; }

/* ---- section headings inside the card body ---- */
.rc-sec > h2 { font-family: var(--font-display); font-weight: 800; font-size: 25px; line-height: 1.15; letter-spacing: -.3px; margin: 0 0 12px; color: var(--ink); }
.rc-sec > h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 22px 0 8px; color: var(--ink); }
.rc-sec p { font-size: 16px; line-height: 1.62; color: var(--ink-2); margin: 0 0 12px; }
.rc-sec p strong { color: var(--ink); }
.rc-sec ul, .rc-sec ol { margin: 0 0 12px 22px; font-size: 16px; line-height: 1.62; color: var(--ink-2); }
.rc-sec li { margin-bottom: 6px; }
.rc-sec code { font-family: var(--font-mono); font-size: 13px; background: var(--cream-2); border: 1px solid var(--cream-border); border-radius: 3px; padding: 1px 5px; color: var(--ink); }

/* ---- the eight outcomes (lesson 1) ---- */
.ess-outcomes { counter-reset: out; list-style: none; margin: 14px 0 6px; padding: 0; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px;
                background: var(--surface); box-shadow: var(--fm-shadow-sm); }
.ess-outcomes li { counter-increment: out; display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; align-items: start;
                   padding: 12px 16px; border-top: 1px solid var(--cream-border); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.ess-outcomes li:first-child { border-top: none; }
.ess-outcomes li::before { content: counter(out); font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--on-accent);
                           background: var(--neon); border: var(--fm-border-w) solid var(--on-accent); border-radius: 3px; width: 30px; height: 30px;
                           display: inline-flex; align-items: center; justify-content: center; }
.ess-outcomes li b { color: var(--ink); display: block; margin-bottom: 2px; }
.ess-outcomes li.heavy::before { background: var(--ink); color: var(--cream); }

/* ---- tiles (capabilities, doors, apps) ---- */
.ess-tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin: 16px 0 6px; }
.ess-tiles.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 760px) { .ess-tiles, .ess-tiles.three { grid-template-columns: 1fr; } }
.ess-tile { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); box-shadow: var(--fm-shadow-sm); padding: 15px 16px; }
.ess-tile .q { display: inline-block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
               background: var(--neon); color: var(--on-accent); padding: 3px 7px; border-radius: 2px; margin-bottom: 9px; }
.ess-tile .q.dim { background: var(--cream-2); color: var(--ink-2); }
.ess-tile .w { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.ess-tile .d { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.ess-tile .s { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.ess-tile.on { background: var(--neon-tint); }

/* ---- the two apps ---- */
.ess-apps { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin: 16px 0 6px; }
@media (max-width: 620px) { .ess-apps { grid-template-columns: 1fr; } }
.ess-app { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); box-shadow: var(--fm-shadow-sm); padding: 16px; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; }
.ess-app .logo { width: 52px; height: 52px; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 8px; display: grid; place-items: center; background: var(--cream); }
.ess-app .logo img { width: 34px; height: 34px; }
.ess-app .w { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); }
.ess-app .d { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin-top: 3px; }
.ess-app .s { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
/* the tiles are the pick: each is a button with data-h, in an .hx-switch container, so essentials.js sets the harness on click */
button.ess-app { font: inherit; text-align: left; cursor: pointer; color: inherit; width: 100%; position: relative; }
button.ess-app:hover { background: var(--cream); }
button.ess-app:focus-visible { outline: var(--fm-border-w) solid var(--fm-border-c); outline-offset: 3px; }
button.ess-app.on { background: var(--neon-tint); }
button.ess-app::after { content: "Your pick"; position: absolute; top: -12px; right: 12px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; background: var(--neon); color: var(--on-accent); border: var(--fm-border-w-sm) solid var(--on-accent); border-radius: 2px; padding: 3px 7px; box-shadow: 1px 1px 0 var(--ink); opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
button.ess-app.on::after { opacity: 1; transform: none; }
.ess-weapon { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 -8px; }

/* ---- the modes ladder (lesson 2): rungs are <b>name<small>which app</small></b><span>what it does</span>; the top rung has the most freedom ---- */
.rc-ladder .rc-rung:has(> b) { grid-template-columns: 230px minmax(0,1fr); }
.rc-ladder .rc-rung > b { padding: 13px 16px; border-right: var(--fm-border-w) solid var(--fm-border-c); font-family: var(--font-display); font-size: 15px; line-height: 1.35; color: var(--ink); }
.rc-ladder .rc-rung > b small { display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.rc-ladder .rc-rung > span { padding: 13px 16px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.rc-ladder .rc-rung > span q { font-style: italic; quotes: "\201C" "\201D"; }
.rc-ladder .rc-rung.on > b { background: var(--neon); }
.rc-ladder .rc-rung.on > b small { color: var(--on-accent); opacity: .75; }
.rc-ladder .rc-rung.dim > b, .rc-ladder .rc-rung.dim > span { color: var(--ink-3); background: var(--cream-2); }
@media (max-width: 640px) { .rc-ladder .rc-rung:has(> b) { grid-template-columns: 1fr; } .rc-ladder .rc-rung > b { border-right: 0; border-bottom: var(--fm-border-w) solid var(--fm-border-c); } }

/* tables and figures get air below them; the LMS card CSS only spaces a table before an alt line */
.rc-symwrap { margin: 16px 0 18px; }
.rc-prompt { margin-bottom: 18px; }   /* the paragraph after a prompt block was sitting on it (Wade, 09-15) */
.rc-prompt + p { margin-top: 18px; }
.rc-symwrap + p, .ess-fig + p { margin-top: 18px; }

/* the technical definitions at the close of lesson 1: an eyebrow and two plain lines, no box */
.ess-tech-k { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 8px; display: flex; align-items: center; gap: 8px; }
.ess-tech-k::before { content: ""; width: 22px; height: 2px; background: var(--ink); }
.ess-tech { font-size: 14.5px; color: var(--ink-2); }
.ess-tech strong { color: var(--ink); }

/* ---- the stepper (Wade, 09-14): a click-by-click inside a card, one numbered step at a time, its copy and its still together.
   Frames inside a step still follow the route (Claude/Codex, Mac/Windows). Markup: .ess-steps > .ess-steps-tabs [role=tab][data-step]
   + .ess-step[data-step] panes + .ess-steps-nav. essentials.js wires it. ---- */
.ess-steps { margin: 16px 0 10px; }
.ess-steps-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.ess-steps-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); background: var(--cream-2); border: var(--fm-border-w) solid var(--fm-border-c); border-bottom: none; border-radius: 4px 4px 0 0; cursor: pointer; position: relative; top: 2px; }
.ess-steps-tabs [role="tab"] b { display: inline-grid; place-items: center; width: 22px; height: 22px; background: var(--ink); color: var(--cream); border-radius: 2px; font-size: 11px; }
.ess-steps-tabs [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--ink); z-index: 2; padding-top: 4px; }
.ess-steps-tabs [role="tab"][aria-selected="true"] b { background: var(--neon); color: var(--on-accent); border: var(--fm-border-w-sm) solid var(--on-accent); }
.ess-steps-tabs [role="tab"].done b { background: var(--ink); color: var(--neon); }
.ess-steps-tabs [role="tab"]:focus-visible { outline: var(--fm-border-w) solid var(--fm-border-c); outline-offset: -4px; }
.ess-step { background: var(--surface); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 0 4px 4px 4px; box-shadow: var(--fm-shadow-sm); padding: 16px 18px 14px; }
.ess-step > p:first-child { margin-top: 0; }
.ess-step .ess-shot { margin-top: 12px; }
.ess-steps-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.ess-steps-nav button { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; background: var(--surface); color: var(--ink); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px; padding: 7px 12px; cursor: pointer; box-shadow: var(--fm-shadow-xs); }
.ess-steps-nav button:hover { background: var(--neon); }
.ess-steps-nav button[disabled] { opacity: .35; cursor: default; box-shadow: none; }
.ess-steps-nav .pos { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); }
/* OS-specific body copy: a pane per OS, the route decides which shows; a small tag says which one you are reading */
.rc-sec > .os-pane, .ess-step > .os-pane { position: relative; }
.rc-sec > .os-pane::before, .ess-step > .os-pane::before { content: attr(data-os); display: inline-block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3); border: 1.5px solid var(--ink-3); border-radius: 2px; padding: 2px 6px; margin-bottom: 6px; }
.rc-sec > .os-pane[data-os="mac"]::before, .ess-step > .os-pane[data-os="mac"]::before { content: "Mac"; }
.rc-sec > .os-pane[data-os="win"]::before, .ess-step > .os-pane[data-os="win"]::before { content: "Windows"; }
/* the "old capture serves for now" chip is a review aid, not student copy (Wade, 09-14); it shows only with ?nocarry */
html:not(.nocarry) .ess-carry { display: none; }

/* ---- figure frame: every teaching picture sits in one of these ---- */
.ess-fig { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); box-shadow: var(--fm-shadow-sm); padding: 18px; margin: 16px 0 6px; overflow-x: auto; }
.ess-fig .cap { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); margin-top: 12px; }
/* text alternatives stay on the page (a screen reader and a low-vision reader both get them) but read as a footnote, not body copy (Wade, 09-14) */
.ess-alt { font-size: 12.5px; line-height: 1.5; font-style: italic; color: var(--ink-3); margin: 8px 0 0; padding-left: 10px; border-left: 2px solid var(--line, #d9d4c7); }
.ess-alt b { font-style: normal; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }

/* Before / after: the chat way and the harness way. */
.ess-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 680px) { .ess-compare { grid-template-columns: 1fr; } }
.ess-pane { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; padding: 12px; background: var(--cream); min-height: 200px; position: relative; }
.ess-pane.after { background: var(--neon-tint); }
.ess-pane .lbl { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.ess-pane.after .lbl { color: var(--ink-2); }
.ess-chat { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); padding: 8px 10px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.ess-chat .u { display: block; font-weight: 600; color: var(--ink); }
.ess-chat .a { display: block; margin-top: 4px; }
.ess-chat.closed { opacity: .45; text-decoration: line-through; }
.ess-note { font-size: 12px; color: var(--ink-3); margin-top: 8px; font-style: italic; }
/* the harness pane reads top to bottom like the chat pane beside it: bubble, then the folder, then "Tomorrow:", then the bubble that still works.
   Same shape on both sides, so the only visible difference is the folder in the middle (Wade, 09-14: side by side was too condensed). */
.ess-desk { display: flex; flex-direction: column; gap: 8px; }
.ess-folder { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); padding: 0 0 8px; }
.ess-folder .tab { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: var(--ink); color: var(--cream); padding: 4px 8px; border-radius: 2px 2px 0 0; display: inline-block; }
.ess-folder .files { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 8px 0; }
.ess-file { border: 1px solid var(--fm-border-c); border-radius: 3px; background: var(--cream); padding: 5px 8px; font-size: 12px; color: var(--ink); font-family: var(--font-mono); }
.ess-file.new { background: var(--neon); border-color: var(--on-accent); color: var(--on-accent); font-weight: 700; }
.ess-arrow { text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); margin: 6px 0; }

/* Three things: app, folder, files. */
.ess-three { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; gap: 8px; align-items: center; }
@media (max-width: 680px) { .ess-three { grid-template-columns: 1fr; } .ess-three .ar { transform: rotate(90deg); } }
.ess-three .box { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--cream); padding: 12px; text-align: center; }
.ess-three .box .ic { font-family: var(--font-mono); font-size: 22px; line-height: 1; margin-bottom: 6px; }
.ess-three .box .ic svg { width: 30px; height: 30px; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ess-three .box .marks { display: flex; justify-content: center; gap: 8px; margin: 6px 0 2px; }
.ess-three .box .marks img { width: 26px; height: 26px; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 6px; background: var(--surface); padding: 3px; }
.ess-three .box .sub { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.ess-three .box .sub svg { width: 16px; height: 16px; stroke: var(--ink-2); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ess-three .box .w { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.ess-three .box .d { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.4; }
.ess-three .box.mid { background: var(--neon-tint); }
.ess-three .ar { font-family: var(--font-mono); font-size: 18px; color: var(--ink-2); text-align: center; }
/* Lanes that merge (lesson 8, three helpers into one agent): three equal boxes, a drawn bracket, one box centered.
   Not ess-three, whose grid is box-arrow-box-arrow-box and squeezed a lane into an arrow column (Wade, 09-16). */
.ess-merge { display: grid; justify-items: stretch; gap: 0; }
.ess-merge .lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ess-merge .box { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--cream); padding: 12px; text-align: center; }
.ess-merge .box .ic { font-family: var(--font-mono); font-size: 22px; line-height: 1; margin-bottom: 6px; }
.ess-merge .box .w { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.ess-merge .box .d { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.4; }
.ess-merge .box.mid { background: var(--neon-tint); width: min(100%, 320px); margin: 0 auto; }
.ess-merge .join { display: block; width: 100%; height: 64px; margin: 2px 0; }
.ess-merge .join path { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ess-merge .join .head { fill: var(--ink-2); stroke: none; }

/* Git: snapshots stacking on your computer, the copy online. */
.ess-git { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 10px; align-items: stretch; }
@media (max-width: 680px) { .ess-git { grid-template-columns: 1fr; } }
.ess-git .side { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--cream); padding: 12px; }
.ess-git .side.online { background: var(--blue-tint); }
.ess-git .side .lbl { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.ess-git .side .lbl svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ess-git .side .lbl b { font-family: var(--font-display); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.ess-snap { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px; background: var(--surface); padding: 6px 9px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); margin-top: 6px; box-shadow: var(--fm-shadow-xs); }
.ess-snap .t { color: var(--ink-3); font-size: 10px; display: block; }
.ess-snap.top { background: var(--neon); border-color: var(--on-accent); color: var(--on-accent); }
.ess-snap.top .t { color: var(--on-accent-3); }   /* the muted sub-label pins with it */
.ess-git .mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); text-align: center; }
.ess-git .mid .ar { font-size: 20px; }

/* ---- vocabulary strip: words you now own ---- */
.ess-words { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--cream-2); box-shadow: var(--fm-shadow-sm); padding: 14px 16px; margin: 16px 0 6px; }
.ess-words .k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.ess-words .row { display: flex; flex-wrap: wrap; gap: 8px; }
.ess-word { font-family: var(--font-mono); font-size: 12px; font-weight: 700; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px; background: var(--surface); color: var(--ink); padding: 4px 9px; }
.ess-word.new { background: var(--neon); border-color: var(--on-accent); color: var(--on-accent); }
.ess-word.rec { background: var(--surface); color: var(--ink-3); border-style: dashed; }
.ess-words .legend { font-size: 12px; color: var(--ink-3); margin-top: 10px; }

/* ---- next / previous ---- */
.ess-lesson .rc-nav .k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.ess-lesson .rc-nav .t { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.ess-lesson .rc-nav a.next { text-align: right; }

/* ---- the reps box in the aside reuses rc-starter ---- */
.rc-starter.reps h3 { margin-bottom: 4px; }
.rc-starter.reps .rc-btn { text-align: left; white-space: normal; line-height: 1.35; }

/* ---- video slot (lesson 2) ---- */
.ess-video { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--ink); color: var(--cream); padding: 0; margin: 16px 0 6px; box-shadow: var(--fm-shadow-sm); overflow: hidden; }
.ess-video .bar { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--neon); padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ess-video .frame { min-height: 150px; display: grid; place-items: center; text-align: center; padding: 22px 20px; }
.ess-video .frame:has(iframe) { min-height: 0; padding: 0; }
.ess-video .frame .tag { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; background: var(--neon); border-color: var(--on-accent); color: var(--on-accent); padding: 4px 10px; border-radius: 2px; margin-bottom: 10px; }
.ess-video .frame p { color: var(--cream); opacity: .9; font-size: 14px; max-width: 520px; margin: 0 auto; line-height: 1.5; }
.ess-video iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }
.ess-video .chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 8px 18px; padding: 12px 14px; font-family: var(--font-mono); font-size: 11.5px; color: var(--cream); border-top: 1px solid rgba(255,255,255,.12); }
.ess-video .chapters span b { color: var(--neon); margin-right: 8px; font-weight: 700; }

/* ---- program-home start view ----
   The marquee h1 stays; the promise line moves into the opener plate (so it reads once),
   and the trail map moves into the Start view, right above the eight lesson cards.
   The JS toggles html.is-start and moves #chbar between the two slots. ---- */
html.is-start .mk-sub { display: none; }
html.is-start .mk-marq { margin-bottom: 26px; }
html.is-start #barslot-top { display: none; }

/* the opener: copy on the left, the north star on the right */
.ess-start .open { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); box-shadow: var(--fm-shadow);
                   padding: 26px 28px 26px; margin-bottom: 26px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
                   gap: 22px 36px; align-items: start; }
@media (max-width: 960px) { .ess-start .open { grid-template-columns: 1fr; padding: 22px 20px; } }
.ess-start .open .promise { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.4vw, 31px);
                            line-height: 1.24; letter-spacing: -.3px; color: var(--ink); margin: 0; }
.ess-start .open .promise mark { background: var(--neon); border-color: var(--on-accent); color: var(--on-accent); padding: 0 8px; border-radius: 3px;
                                 box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ess-start .open .lead p { font-size: 17px; line-height: 1.62; color: var(--ink-2); margin: 0 0 12px; }
.ess-start .open .btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ess-start .open .lead .btn-note { font-size: 16px; line-height: 1.5; color: var(--ink-2); margin: 24px 0 0; }
.ess-star { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--neon-tint); box-shadow: var(--fm-shadow-sm); padding: 14px 16px 10px; }
.ess-star .k { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 700;
               letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.ess-star .k svg { width: 16px; height: 16px; fill: var(--ink); stroke: none; }
.ess-star ol { list-style: none; margin: 0; padding: 0; counter-reset: star; }
.ess-star li { counter-increment: star; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start;
               padding: 8px 0; border-top: 1px dashed var(--ink-3); font-size: 16px; line-height: 1.5; color: var(--ink); }
.ess-star li:first-child { border-top: none; padding-top: 2px; }
.ess-star li::before { content: counter(star); font-family: var(--font-mono); font-size: 12px; font-weight: 700; width: 26px; height: 26px;
                       display: inline-flex; align-items: center; justify-content: center; background: var(--surface);
                       border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px; color: var(--ink); margin-top: 0; }

/* the alumni note beside the app picker: the two marks, large, with their explainers */
.ess-row2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: stretch; margin: 0 0 20px; }
@media (max-width: 960px) { .ess-row2 { grid-template-columns: 1fr; } }
.ess-row2 .callout { margin: 0; display: flex; flex-direction: column; }
.ess-row2 .callout .co-body { flex: 1; }
.ess-start .callout .co-body p { font-size: 16px; line-height: 1.6; max-width: none; }
.ess-start .callout .co-ref { font-size: 12px; }
.ess-apppick { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); box-shadow: var(--fm-shadow);
               padding: 14px 16px 16px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 12px; }
.ess-apppick .k { grid-column: 1 / -1; }
@media (max-width: 640px) { .ess-apppick { grid-template-columns: 1fr; } }
.ess-apppick .k { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap;
                  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink); }
.ess-apppick .k .sub { font-weight: 500; letter-spacing: 1.2px; color: var(--ink-2); }
.ess-apppick button { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 8px; align-items: center; align-content: start;
                      text-align: left; width: 100%; background: var(--surface); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; padding: 12px 14px 14px;
                      cursor: pointer; box-shadow: var(--fm-shadow-sm); position: relative; top: 0; left: 0; font-family: var(--font-body); }
@media (prefers-reduced-motion: no-preference) { .ess-apppick button { transition: top .12s var(--ease), left .12s var(--ease), box-shadow .12s var(--ease); } }
.ess-apppick button:hover { top: -1px; left: -1px; box-shadow: var(--fm-hover-card, 4px 4px 0 var(--ink)); }
.ess-apppick button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.ess-apppick button img { width: 52px; height: 52px; display: block; }
.ess-apppick button .w { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.15; color: var(--ink); }
.ess-apppick button .w .pick { display: none; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
                               background: var(--on-accent); color: var(--on-ink); padding: 2px 7px; border-radius: 2px; }  /* pinned: the chip sits on the lime tile in both themes */
.ess-apppick button .d { grid-column: 1 / -1; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.ess-apppick button .d b { color: var(--ink); }
.ess-apppick button[aria-pressed="true"] { background: var(--neon); border-color: var(--on-accent); }
.ess-apppick button[aria-pressed="true"] .d { color: var(--on-accent); }
/* Hard rule 8: text on a pinned fill pins too. The lime tile keeps dark text in dark mode. */
.ess-apppick button[aria-pressed="true"] .w,
.ess-apppick button[aria-pressed="true"] .d b { color: var(--on-accent); }
.ess-apppick button[aria-pressed="true"] .w .pick { display: inline-block; }
.ess-apppick .now b { color: var(--ink); }

/* before you start: a dropdown, closed by default, so the lessons sit higher */
.ess-disc { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); box-shadow: var(--fm-shadow-sm); margin: 0 0 8px; }
.ess-disc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; min-height: 54px; padding: 10px 16px; }
.ess-disc summary::-webkit-details-marker { display: none; }
.ess-disc summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -5px; }
.ess-disc summary .k { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink); }
.ess-disc summary .t { flex: 1; font-size: 16px; color: var(--ink-2); }
.ess-disc summary .pm::before { content: '+'; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
                                font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--ink); background: var(--cream-2);
                                border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px; }
.ess-disc[open] summary .pm::before { content: '\2212'; background: var(--neon); }
.ess-disc .body { padding: 14px 16px 16px; border-top: var(--fm-border-w) solid var(--fm-border-c); }
.ess-disc .need > div { box-shadow: none; }

/* section labels: mono eyebrow left, a plain-words hint right */
.ess-start .sect { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; margin: 30px 0 12px; }
.ess-start .sect-k { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.ess-start .sect .hint { font-size: 16px; color: var(--ink-2); }

/* the trail map, in a plate, right above the cards */
.ess-trail { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); box-shadow: var(--fm-shadow-sm);
             padding: 18px 18px 12px; margin: 0 0 20px; }
.ess-trail .chbar { margin: 0; }
/* on a phone the map goes vertical (FM component 20: horizontal desktop, vertical mobile) */
@media (max-width: 640px) {
  .ess-trail { padding: 10px 14px; }
  .ess-trail .chbar { padding-bottom: 0; }
  .ess-trail .steps { flex-direction: column; align-items: stretch; }
  .ess-trail .steps li { justify-content: flex-start; }
  .ess-trail .steps li + li::before { left: 16px; right: auto; top: -10px; width: 0; height: 20px; border-top: 0; border-left: 2px dashed var(--ink-3); }
  .ess-trail .steps a { flex-direction: row; align-items: center; gap: 12px; min-height: 44px; padding: 5px 0; }
  .ess-trail .steps .t, .ess-trail .steps li.on .t { display: block; position: static; max-width: none; text-align: left; white-space: nowrap; font-size: 15px; }
}

/* the eight lesson cards: the library card, sized for a grid of eight */
.ess-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0 0 6px; }
@media (max-width: 1180px) { .ess-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ess-cards { grid-template-columns: 1fr; } }
.ess-card { display: flex; flex-direction: column; background: var(--surface); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px;
            box-shadow: var(--fm-shadow); overflow: hidden; text-decoration: none; color: inherit; position: relative; top: 0; left: 0; }
.ess-card:hover { top: -3px; left: -3px; box-shadow: var(--fm-hover-card, 9px 9px 0 var(--ink)); z-index: 2; }
.ess-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .ess-card { transition: top .16s var(--ease), left .16s var(--ease), box-shadow .16s var(--ease); } }
.ess-card .cover { position: relative; height: 118px; display: flex; align-items: center; justify-content: center;
                   background: var(--acc, var(--cream-2)); border-bottom: var(--fm-border-w) solid var(--fm-border-c); }
.ess-card .cover .ic { width: 52px; height: 52px; color: var(--on-accent); }
.ess-card .cover .n { position: absolute; left: 10px; top: 10px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
                      font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--ink); background: var(--surface);
                      border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px; box-shadow: var(--fm-shadow-xs); }
.ess-card .done-stamp { display: none; position: absolute; right: 10px; top: 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 700;
                        letter-spacing: 1.4px; text-transform: uppercase; background: var(--neon); color: var(--on-accent);
                        border: var(--fm-border-w) solid var(--fm-border-c); padding: 3px 8px; transform: rotate(-4deg); }
.ess-card.done .done-stamp { display: inline-block; }
.ess-card.done .cover .n { background: var(--neon); }
.ess-card .body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 14px 16px 14px; }
.ess-card .badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.ess-badge { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
             padding: 3px 8px; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px; background: var(--surface); color: var(--ink); }
.ess-badge.do { background: var(--neon); border-color: var(--on-accent); color: var(--on-accent); }
.ess-badge.read { background: var(--ink); color: var(--cream); }   /* --cream, not --on-ink: the label inverts with the theme instead of going light-on-light in dark (09-16) */
.ess-card .lname { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-2); margin-top: 2px; }
.ess-card h4 { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -.3px; color: var(--ink); margin: 0; }
.ess-card p { font-size: 16px; line-height: 1.5; color: var(--ink-2); margin: 0 0 10px; }
.ess-card .meta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px;
                  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-2);
                  padding-top: 10px; border-top: 1px solid var(--cream-border); }
.ess-card .meta .go { color: var(--ink); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .ess-card .meta .go { transition: transform .25s var(--ease); } }
.ess-card:hover .meta .go { transform: translateX(4px); }


.ess-start .need { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .ess-start .need { grid-template-columns: 1fr; } }
.ess-start .need .h { font-size: 12px; }
.ess-start .need .no .h { background: var(--cream-2); color: var(--ink); }
.ess-start .need li { font-size: 16px; line-height: 1.5; }

/* ---- Essentials accents for the cover plate (Workforce has slate + violet) ---- */
.a-neon  { --acc: var(--neon); }
.a-blue  { --acc: var(--blue); }
.a-teal  { --acc: var(--teal); }
.a-coral { --acc: var(--coral); }
.a-ink   { --acc: var(--ink); }
.a-ink .rc-cover .ic, .a-coral .rc-cover .ic { color: #F4F1EA; }
.a-neon .rc-cover .ic, .a-blue .rc-cover .ic, .a-teal .rc-cover .ic { color: var(--ink); }

/* ---- the plain-English opener, the objective tiles, the fair-question box (camp w3-01 shape) ---- */
.ess-plain { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--neon-tint); box-shadow: var(--fm-shadow-sm); padding: 16px 18px; margin: 0 0 16px; }   /* 16px rhythm: plain / tiles / field note (Wade, 09-21) */
.ess-plain .k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.ess-plain p { font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0; }
.ess-obj { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin: 16px 0; }
@media (max-width: 680px) { .ess-obj { grid-template-columns: 1fr; } }
.ess-obj-tile { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); box-shadow: var(--fm-shadow-sm); padding: 13px 15px; }
.ess-obj-tile .o { display: inline-block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; background: var(--ink); color: var(--cream); padding: 3px 8px; border-radius: 2px; margin-bottom: 8px; }
.ess-obj-tile p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
/* stamped semantic callouts, the LMS cards' family (cards.css: note=blue, check=neon, warn=coral). Essentials adds faq=teal.
   The stamp sits on the top border; the title is the question a person would say. Wade, 09-14: FAQs live here, not in a stripe. */
.co[class*="co-"] { position: relative; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; padding: 24px 22px 18px; margin: 26px 0 8px; box-shadow: var(--fm-shadow-sm); }
.co-stamp { position: absolute; top: -14px; left: 18px; display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1.5px solid var(--acc, var(--ink)); color: var(--ink); border-radius: 3px; padding: 4px 10px 4px 5px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; box-shadow: var(--fm-shadow-xs); }
.co-stamp .ico { width: 22px; height: 22px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--acc, var(--neon)); border: 1.5px solid var(--on-accent); border-radius: 2px; }
.co-stamp svg { width: 14px; height: 14px; stroke: var(--on-accent); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.co-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.3px; color: var(--ink); margin-bottom: 6px; }
.co p { font-size: 15px; color: var(--ink-2); line-height: 1.6; margin: 0; }
.co p + p { margin-top: 8px; }
.co p strong { color: var(--ink); }
.co-note { --acc: var(--blue); background: var(--blue-tint); }
.co-check { --acc: var(--neon); background: var(--neon-tint); }
.co-warn { --acc: var(--coral); background: var(--coral-tint); }
.co-faq { --acc: var(--yellow); background: var(--yellow-tint); }   /* highlighter yellow (Wade, 09-14): teal read too close to the blue note */
.ess-fair { border-left: 4px solid var(--ink); background: var(--cream-2); padding: 12px 16px; margin: 16px 0; border-radius: 0 4px 4px 0; }
.ess-fair .q { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); margin: 0 0 6px; }
.ess-fair .faq { display: inline-block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; background: var(--ink); color: var(--cream); border-radius: 2px; padding: 3px 7px; margin-right: 8px; vertical-align: 2px; }
.ess-fair p { margin: 0 0 8px; font-size: 15.5px; }
.ess-fair p:last-child { margin-bottom: 0; }
/* the Field note: the one first-person voice in a lesson ("I was where you are"). The eyebrow names the slot, the byline names
   the person and the lab, so the course stays the lab's and the story stays whoever lived it (Wade, 09-14). */
.ess-story { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); box-shadow: var(--fm-shadow-sm); padding: 14px 16px; margin: 0 0 22px; }
.ess-story.draft { border-style: dashed; box-shadow: none; }
.ess-story .head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ess-story .k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.ess-story .k::before { content: ""; width: 18px; height: 2px; background: var(--neon); outline: 1px solid var(--on-accent); }
.ess-story .by { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.ess-story.draft .k { color: var(--coral); }
.ess-story p { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0 0 8px; }
.ess-story p:last-child { margin-bottom: 0; }

/* ---- captures swapped in from the shot registry; needs-blocks carry the capture prompt ---- */
.ess-shot { margin: 16px 0 6px; }
.ess-shotgrid { display: grid; gap: 12px; }
.ess-noshot { margin: 0; padding: 10px 14px; border: var(--fm-border-w) dashed var(--fm-border-c); border-radius: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); background: var(--cream-2); }
.ess-shotimg { position: relative; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); box-shadow: var(--fm-shadow-sm); padding: 8px; }
.ess-shotimg img { display: block; width: 100%; height: auto; border-radius: 2px; }
.ess-cap, .ess-carry { position: absolute; bottom: 14px; right: 12px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; border: var(--fm-border-w) solid var(--fm-border-c); }
.ess-cap { background: var(--neon); border-color: var(--on-accent); color: var(--on-accent); }
.ess-carry { background: var(--coral-tint); color: var(--ink); max-width: 80%; text-align: right; }
.ess-needs { border: var(--fm-border-w) dashed var(--fm-border-c); border-radius: 4px; padding: 12px 14px; background: repeating-linear-gradient(45deg, var(--cream-2), var(--cream-2) 10px, var(--cream) 10px, var(--cream) 20px); }
.ess-needs .n { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; background: var(--ink); color: var(--cream); padding: 3px 9px; border-radius: 2px; margin-bottom: 8px; }
.ess-needs p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.ess-shot figcaption { font-size: 13px; color: var(--ink-3); margin-top: 8px; line-height: 1.5; }
.ess-shot figcaption b { color: var(--ink-2); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; margin-right: 6px; }
.ess-walk { margin: 16px 0 6px; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); box-shadow: var(--fm-shadow-sm); overflow: hidden; }
.ess-walk iframe { display: block; width: 100%; aspect-ratio: 16/10; border: 0; background: var(--dark); }
.ess-walk figcaption { font-size: 13px; color: var(--ink-2); padding: 10px 14px; border-top: var(--fm-border-w) solid var(--fm-border-c); }
.ess-walk figcaption b { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; margin-right: 6px; }
.ess-walk figcaption a { color: var(--ink); font-weight: 600; margin-left: 8px; }
/* ---- screenshot toggles (Wade 10-29): every still sits closed in the Agent Workforce screenshot fold
   (.ess-disc.wf-picfold.wf-shotfold, styled in /mockups-workforce/_wf.css, loaded above). Only what differs here:
   the summary keeps the caption's stamp line, and the open figure drops its own margin, shadow and caption
   (the summary above it already says what it shows). ---- */
.ess-shotfold summary .t b { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
                             text-transform: uppercase; line-height: 1.5; color: var(--ink-2); margin: 0 0 2px; }
.ess-shotfold > .body > .ess-shot { margin: 0; }
.ess-shotfold > .body > .ess-shot > figcaption { display: none; }
.ess-shotfold .ess-shotimg { box-shadow: none; }
.noshots .ess-shotfold { display: none; }
/* phone and tablet: the lesson column fills its grid track. With the auto side margins from _wf.css it sized
   itself to its widest unbreakable line (the installer link in the lesson 3 prompt), and the page scrolled
   sideways (459px wide at 390). */
@media (max-width: 1179px) { html.wide .ess-lesson .rc-main { width: 100%; } }
.rc-prompt p { overflow-wrap: anywhere; }
/* the open lesson's name under the trail map is centred under its node; under the last node it ran past the right
   edge (409px wide at 390), so the end ones line up with their own side */
@media (max-width: 1100px) { .steps li.on:last-child .t { right: 0; } .steps li.on:first-child .t { left: 0; } }
/* phone: Workforce's full-width 110px tile made a closed fold taller than most open stills here (the zoomed crops
   run about 130px at this width), so the tile stays small, Show / Hide sits beside it, and the caption runs
   the full width under both */
@media (max-width: 640px) {
  .ess-shotfold summary { flex-wrap: wrap; justify-content: space-between; align-items: center; }
  .ess-shotfold .wf-thumb { width: 96px; height: 54px; }
  .ess-shotfold summary .t { order: 3; flex: 1 1 100%; font-size: 14.5px; line-height: 1.45; }
}

/* ---- review switches: ?nocarry collapses old captures to their stamp; ?noshots hides capture blocks ---- */
.nocarry .ess-shotimg:has(.ess-carry) img { display: none; }
.nocarry .ess-shotimg:has(.ess-carry) { padding: 6px 8px; background: var(--cream-2); box-shadow: none; }
.nocarry .ess-shotimg:has(.ess-carry) .ess-carry { position: static; display: inline-block; max-width: none; }
.noshots .ess-shot, .noshots .ess-walk { display: none; }

/* ---- annotations over captures: lime boxes with a chip, lime arrows with a label; percent-positioned ---- */
.ess-frame { position: relative; display: block; line-height: 0; }
/* two crops of one capture (shotfocus.cluster_focus): stacked, each its own viewport, one legend under both */
.ess-frame-pair { display: grid; gap: 8px; }
.ess-frame-pair .ess-frame { border: 1.5px solid var(--ink-3); border-radius: 2px; }
.ess-frame img { display: block; width: 100%; height: auto; }
/* zoom: .ess-frame is the viewport (aspect from the focus rect), .ess-full is the whole image plus its pins, shifted into view */
.ess-frame.zoomed { overflow: hidden; border-radius: 2px; }
.ess-full { position: relative; width: 100%; transform-origin: 0 0; }
.ess-full img, .ess-frame.zoomed img { max-width: none !important; width: 100% !important; }
.ess-minimap { position: relative; width: 168px; margin: 8px auto 0 0; line-height: 0; border: 1.5px solid var(--ink-3); border-radius: 2px; overflow: hidden; opacity: .92; }
.ess-minimap img { display: block; width: 100%; height: auto; }
.ess-focus { position: absolute; border: 2px solid var(--neon); box-shadow: 0 0 0 200px rgba(0,0,0,.42); }
.ess-pin { position: absolute; border: 2px solid var(--neon); border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.6); pointer-events: none; }   /* no halo: touching boxes stay two clean boxes */
.ess-frame.zoomed .ess-pin { border-width: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.ess-frame.zoomed .ess-pin i { font-size: 10px; top: -20px; padding: 2px 5px; border-width: 1px; }
.ess-pin.below i { top: auto; bottom: -24px; }
.ess-pin.inside i, .ess-frame.zoomed .ess-pin.inside i { top: 5px; left: 5px; }
.ess-pin.left i, .ess-frame.zoomed .ess-pin.left i { top: 0; left: auto; right: calc(100% + 6px); }
.ess-pin.inside-right i, .ess-frame.zoomed .ess-pin.inside-right i { left: auto; right: 4px; top: 50%; transform: translateY(-50%); }
.ess-frame.zoomed .ess-pin.below i { top: auto; bottom: -20px; }
.ess-pin i { position: absolute; left: -3px; top: -24px; font-style: normal; font-family: var(--font-mono); font-size: 11px; font-weight: 700; line-height: 1; background: var(--neon); color: var(--on-accent); border: var(--fm-border-w-sm) solid var(--on-accent); border-radius: 2px; padding: 3px 6px; box-shadow: 1px 1px 0 var(--ink); }
.ess-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ess-arrows line { stroke: var(--neon); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(0,0,0,.7)); }
.ess-arrows marker path { fill: var(--neon); }
.ess-arrows rect { fill: var(--neon); stroke: var(--ink); stroke-width: 1.5; }
.ess-arrows text { font-family: var(--font-mono); font-size: 12px; font-weight: 700; fill: var(--on-accent); }
.ess-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 64px 2px 4px; font-size: 12.5px; color: var(--ink-2); }   /* right padding keeps the legend clear of the S-number chip */
.ess-legend b { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; background: var(--neon); color: var(--on-accent); border: var(--fm-border-w-sm) solid var(--on-accent); border-radius: 2px; padding: 1px 5px; margin-right: 5px; }
/* pin editor (?pins): crosshair over captures; a floating box shows the JSON for what you drew */
.pins .ess-frame { cursor: crosshair; }
.pins .ess-pin, .pins .ess-arrows { pointer-events: none; }
.ess-pinedit { position: fixed; right: 16px; bottom: 16px; z-index: 9999; width: min(520px, 90vw); background: var(--surface); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; box-shadow: 4px 4px 0 var(--ink); padding: 10px 12px; font-family: var(--font-mono); font-size: 11.5px; }
.ess-pinedit .k { font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; font-size: 10px; margin-bottom: 6px; display: flex; justify-content: space-between; }
.ess-pinedit textarea { width: 100%; height: 120px; font-family: var(--font-mono); font-size: 11px; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 3px; padding: 6px; resize: vertical; }
.ess-pinedit .hint { color: var(--ink-3); margin-top: 6px; font-size: 10.5px; }
.ess-drawing { position: absolute; border: 2px dashed var(--neon); background: rgba(200,255,0,.12); pointer-events: none; }

/* ---- expand buttons + lightbox ---- */
.ess-shotimg { padding-bottom: 8px; }
.ess-frame { cursor: zoom-in; }
.ess-expand { position: absolute; top: 12px; right: 12px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; background: var(--surface); color: var(--ink); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px; padding: 4px 9px; cursor: pointer; box-shadow: var(--fm-shadow-xs); }
.ess-expand:hover { background: var(--neon); color: var(--on-accent); border-color: var(--on-accent); }
.ess-expand.deck { position: static; margin-left: 10px; box-shadow: var(--fm-shadow-xs); }
.ess-lightbox { position: fixed; inset: 0; z-index: 9998; background: rgba(17,17,17,.86); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ess-lightbox .box { background: var(--surface); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; box-shadow: var(--fm-shadow); padding: 10px; max-width: 96vw; max-height: 94vh; display: flex; flex-direction: column; gap: 8px; }
.ess-lightbox .box.deck { width: 96vw; height: 94vh; }
.ess-lightbox .bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); }
.ess-lightbox .acts { display: flex; gap: 8px; align-items: center; }
.ess-lightbox .acts a, .ess-lightbox .acts button { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: var(--surface); color: var(--ink); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px; padding: 4px 9px; cursor: pointer; text-decoration: none; }
.ess-lightbox .acts .x { font-size: 16px; line-height: 1; padding: 2px 9px; }
.ess-lightbox .acts button:hover, .ess-lightbox .acts a:hover { background: var(--neon); }
.ess-lightbox .shot { overflow: auto; text-align: center; }
.ess-lightbox .shot .ess-frame { display: inline-block; cursor: default; max-width: 100%; }
.ess-lightbox .shot .ess-frame img { width: auto; max-width: 94vw; max-height: 78vh; }
.ess-lightbox .shot .ess-legend { justify-content: center; }
.ess-lightbox .deckwrap { flex: 1 1 auto; min-height: 0; }
.ess-lightbox .deckwrap iframe { width: 100%; height: 100%; border: 0; background: var(--dark); }

/* ---- the route matrix: replaces the cover plate; sets app + OS for the whole page ---- */
.ess-route { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--cream-2); box-shadow: var(--fm-shadow); padding: 12px 12px 10px; margin-bottom: 20px; }
.ess-route .k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.ess-route .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ess-route button { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; background: var(--surface); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; padding: 8px 9px; cursor: pointer; box-shadow: var(--fm-shadow-xs); position: relative; top: 0; left: 0; }
@media (prefers-reduced-motion: no-preference) { .ess-route button { transition: top .12s var(--ease), left .12s var(--ease), box-shadow .12s var(--ease); } }
.ess-route button:hover { top: -1px; left: -1px; box-shadow: var(--fm-hover-btn, var(--fm-shadow-sm)); }
.ess-route button img { grid-row: 1 / span 2; width: 22px; height: 22px; }
.ess-route button span { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--ink); line-height: 1.15; }
.ess-route button small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }
.ess-route button.on { background: var(--neon); border-color: var(--on-accent); }
.ess-route button.on span { color: var(--on-accent); }      /* rule 8: text on the lime tile pins */
.ess-route button.on small { color: var(--on-accent-2); }
.ess-route .now { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.45; }
.ess-route .now b { color: var(--ink); }

/* TBD frames: blocked on the installer, not on capture effort */
.ess-needs.tbd { background: repeating-linear-gradient(45deg, var(--coral-tint), var(--coral-tint) 10px, var(--cream) 10px, var(--cream) 20px); }
.ess-needs.tbd .n { background: var(--coral); color: #F4F1EA; }
.ess-needs.tbd .st { margin-top: 6px; color: var(--ink-3); font-size: 12.5px; }

/* a fork's note line ("Showing Claude Code. Pick Codex here…") was reading as a caption for the paragraph under it
   (Wade, 09-15, lesson 2 s1): give the whole fork block room below it, so the copy after it starts as its own thing. */
.ess-lesson .fork { margin-bottom: 26px; }
.ess-lesson .fork .fork-note { margin-top: 12px; }

/* the word cards (commit, push, restore…) take the tile look (Wade, 09-16, lesson 5: "more like our tiles, with the shadows"); .stack = one full-width horizontal tile per word, label left, meaning right */
.ess-lesson .gloss { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 12px 0 8px; }
.ess-lesson .gloss div { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); box-shadow: var(--fm-shadow-sm); padding: 13px 15px; }
.ess-lesson .gloss b { display: inline-block; font-size: 9.5px; letter-spacing: 1.4px; background: var(--ink); color: var(--cream); padding: 3px 8px; border-radius: 2px; margin-bottom: 8px; }
.ess-lesson .gloss span { display: block; font-size: 14.5px; line-height: 1.55; }
/* the two-box figure carries both directions: push up, pull down (later) */
.ess-lesson .ess-git { grid-template-columns: 1fr 96px 1fr; }
.ess-lesson .ess-git .mid .later { color: var(--ink-3); }

.ess-lesson .gloss.stack { grid-template-columns: 1fr; gap: 12px; }
.ess-lesson .gloss.stack div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 6px 18px; align-items: start; padding: 14px 18px; }
.ess-lesson .gloss.stack b { margin: 0; padding: 0; background: none; color: var(--ink); font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.3; white-space: normal; justify-self: start; }
.ess-lesson .gloss.stack b i { display: block; width: max-content; margin-top: 8px; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; background: var(--neon); color: var(--on-accent); border: var(--fm-border-w-sm) solid var(--on-accent); border-radius: 3px; padding: 3px 9px; box-shadow: var(--fm-shadow-xs); }
.ess-lesson .gloss.stack span { font-size: 15px; line-height: 1.6; }
@media (max-width: 680px) { .ess-lesson .gloss.stack div { grid-template-columns: 1fr; } }


/* ==== ported from the 09-11 mockup ==== */

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

@media (max-width:980px) { body { padding-left:0; } .aibl-rail { display:none; } }

.mk-tag b { color:#C8FF00; }

.mk-tag .sp { flex:1; }

.mk-tag label { display:inline-flex; align-items:center; gap:7px; font-size:11px; letter-spacing:1px; text-transform:none; opacity:.9; cursor:pointer; }

.mk-tag details { position:relative; }
 .mk-tag summary { cursor:pointer; list-style:none; color:#C8FF00; }
 .mk-tag summary::-webkit-details-marker { display:none; }

.mk-tag details[open] .mk-links { position:absolute; right:0; top:calc(100% + 8px); z-index:60; background:#111; border:2px solid #C8FF00; border-radius:4px; padding:10px; display:flex; flex-wrap:wrap; gap:6px; width:560px; max-width:80vw; }

.steps { list-style:none; display:flex; align-items:flex-start; flex:1; min-width:0; position:relative; }

.steps li { flex:1; min-width:0; position:relative; display:flex; justify-content:center; }

.steps li + li::before { content:''; position:absolute; left:-50%; right:50%; top:17px; border-top:2px dashed var(--ink-3); z-index:0; }

.steps a { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:var(--ink-3); width:100%; padding:0 4px; min-height:44px; }

.steps .node { width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:var(--surface); border:var(--fm-border-w) solid var(--fm-border-c); border-radius:var(--fm-radius); font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--ink); }

.steps .node svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.steps .t { font-size:12px; line-height:1.25; text-align:center; max-width:12ch; font-weight:500; }

.steps a:hover .node { transform:translate(-1px,-1px); box-shadow:var(--fm-hover-btn, var(--fm-shadow-sm)); }

.steps li.on .node { background:var(--lime); border-color: var(--on-accent); color:var(--on-lime); box-shadow:var(--fm-shadow-sm); }

.steps li.on .t { color:var(--ink); font-weight:700; }

.steps li.done .node { background:var(--ink); color:var(--paper); }

.steps li.done .node::after { content:'✓'; }
 .steps li.done .node span { display:none; }


@media (max-width:1100px) { .steps .t { display:none; } .steps li.on .t { display:block; position:absolute; top:40px; white-space:nowrap; max-width:none; } .chbar { padding-bottom:28px; } }

.hxs-k { font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--ink-3); }

.hxs { display:inline-flex; border:var(--fm-border-w) solid var(--fm-border-c); border-radius:var(--fm-radius); box-shadow:var(--fm-shadow-sm); background:var(--surface); overflow:hidden; }

.hxs button { min-height:38px; padding:0 14px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; background:transparent; border:0; color:var(--ink-2); cursor:pointer; }

.hxs button + button { border-left:var(--fm-border-w) solid var(--fm-border-c); }

.hxs button[aria-pressed="true"] { background:var(--lime); border-color: var(--on-accent); color:var(--on-lime); }

.hxs button:hover:not([aria-pressed="true"]) { background:var(--lime-dim); color:var(--ink); }

.hxs button:focus-visible { outline:var(--fm-border-w) solid var(--fm-border-c); outline-offset:-4px; }

@media (max-width:720px) { .hxs-wrap { display:none; } }
 .view.is-active { display:block; }

.plate { background:var(--surface); border:var(--fm-border-w) solid var(--fm-border-c); border-radius:var(--fm-radius); box-shadow:var(--fm-shadow); padding:26px 30px 28px; }

@media (max-width:640px) { .plate { padding:20px 18px 22px; } }

.flash { animation:landed 1.6s var(--fm-ease) 1; }

@keyframes landed { 0% { box-shadow:0 0 0 4px var(--lime), var(--fm-shadow); } 100% { box-shadow:var(--fm-shadow); } }

@media (prefers-reduced-motion: reduce) { .flash { animation:none; } }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 16px; font-family:var(--font-mono); font-size:var(--text-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--ink); background:var(--paper); border:var(--fm-border-w) solid var(--fm-border-c); border-radius:var(--fm-radius); box-shadow:var(--fm-shadow-sm); cursor:pointer; }

.btn.primary { background:var(--lime); color:var(--on-lime); border-color:var(--on-accent); }  /* no light ring around a lime fill */

.btn:hover { transform:translate(1px,1px); box-shadow:var(--fm-hover-btn, var(--fm-shadow-xs)); }
 .btn:active { transform:translate(3px,3px); box-shadow:0 0 0 var(--ink); }

.btn:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }

.btn small { font-family:var(--font-body); font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink-2); }

@media (prefers-reduced-motion: no-preference) { .btn { transition:transform var(--fm-snap) var(--fm-ease), box-shadow var(--fm-snap) var(--fm-ease); } }

.bandhead { display:flex; align-items:baseline; gap:14px; margin:0 0 14px; }

.bandhead h2 { font-family:var(--font-mono); font-size:12.5px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase; color:var(--ink); white-space:nowrap; }

.bandhead .why { font-size:13.5px; color:var(--ink-3); }

.bandhead::after { content:''; flex:1; height:2px; background:var(--ink); opacity:.13; }

.chcard { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; align-items:start; align-content:start; background:var(--surface); border:var(--fm-border-w) solid var(--fm-border-c); border-radius:4px; box-shadow:var(--fm-shadow-sm); padding:14px 16px; text-decoration:none; color:inherit; position:relative; top:0; left:0; }

.chcard:hover { top:-2px; left:-2px; box-shadow:var(--fm-hover-card, 5px 5px 0 var(--ink)); }

.chcard .n { grid-row:1 / span 3; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:var(--fm-border-w) solid var(--fm-border-c); border-radius:4px; background:var(--paper-2); font-family:var(--font-mono); font-size:15px; font-weight:700; }

.chcard.done .n { background:var(--lime); }

.chcard .t { font-family:var(--font-display); font-size:16.5px; font-weight:700; line-height:1.2; color:var(--ink); }

.chcard .q { font-size:13.5px; color:var(--ink-2); line-height:1.4; }

.chcard .m { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }

.thread { display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1.5px dashed var(--ink-3); border-radius:4px; padding:10px 14px; font-family:var(--font-mono); font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--ink-2); margin-bottom:22px; }

.thread b { background:var(--lime); color:var(--on-lime); padding:2px 8px; border:var(--fm-border-w-sm) solid var(--on-accent); font-weight:700; letter-spacing:.8px; }

.thread code { font-family:var(--font-mono); text-transform:none; letter-spacing:0; background:var(--paper-2); padding:1px 6px; border-radius:3px; color:var(--ink); font-size:12px; }

.rec-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--blue); color:#111111; border-bottom:var(--fm-border-w) solid var(--fm-border-c); padding:8px 14px; }

.rec-eyebrow { font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; }

.rec-meta { font-family:var(--font-mono); font-size:11px; letter-spacing:.8px; text-transform:uppercase; opacity:.8; }

.rec-link { margin-left:auto; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; text-decoration:none; color:#111111; border:2px solid #111111; border-radius:3px; padding:6px 10px; background:transparent; min-height:34px; display:inline-flex; align-items:center; }

.rec-link:hover { background:#111111; color:var(--blue); }

.rec-frame { position:relative; aspect-ratio:16 / 9; background:var(--terminal-bg); border-bottom:var(--fm-border-w) solid var(--fm-border-c); display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; }

.rec-frame .rec-tag { display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:#111111; background:var(--lime); border:2px solid #111111; padding:5px 10px; margin-bottom:12px; }

.rec-frame .rec-desc { display:block; max-width:62ch; margin:0 auto; font-size:15px; line-height:1.55; color:#E8EAED; }

.rec-frame .rec-play { width:64px; height:64px; margin:0 auto 14px; border:2px solid #E8EAED; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#E8EAED; }

.rec-frame .rec-play svg { width:26px; height:26px; fill:currentColor; margin-left:4px; }

.rec-rows { list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:0 22px; padding:6px 14px 8px; }

.rec-rows li { display:flex; gap:12px; align-items:baseline; padding:8px 0; border-bottom:1px dashed var(--ink-3); font-size:14px; color:var(--ink-2); }

.rec-rows li .ts { flex:none; font-family:var(--font-mono); font-size:11.5px; font-weight:700; color:var(--ink-3); min-width:44px; }

.rec-rows li .cx { margin-left:auto; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-2); border:1.5px solid var(--ink-3); padding:0 5px; }

.ch-stamp { display:inline-block; margin-top:6px; font-family:var(--font-mono); font-size:var(--text-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; border:var(--fm-border-w-sm) solid var(--on-accent); background:var(--lime); color:var(--on-lime); padding:3px 7px; transform:rotate(-4deg); white-space:nowrap; }

.ch-title { font-family:var(--font-display); font-weight:700; font-size:clamp(24px, 2.6vw, 31px); letter-spacing:-.6px; line-height:1.18; color:var(--ink); }

.ch-q { font-family:var(--font-display); font-size:18px; font-weight:500; color:var(--ink-2); margin-top:3px; line-height:1.35; }

.ch-meta { grid-column:2; display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }

@media (max-width:640px) { .ch-head { grid-template-columns:1fr; } .ch-meta { grid-column:1; } }

.status-pill { display:inline-flex; align-items:center; gap:6px; border:var(--fm-border-w) solid var(--fm-border-c); padding:var(--space-1) 9px; font-family:var(--font-mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; background:var(--surface); color:var(--ink); white-space:nowrap; }

.status-pill.info { background:var(--blue); color:var(--on-lime); }
 .status-pill.muted { background:var(--paper-3); color:var(--ink-2); }

.chip { font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; border:var(--fm-border-w) solid var(--fm-border-c); border-radius:3px; background:var(--surface); color:var(--ink); padding:3px 8px; }

.chip.on { background:var(--neon); border-color: var(--on-accent); color:var(--on-accent); }

.quiet { font-size:14px; color:var(--ink-3); line-height:1.55; }

.disc + .disc { margin-top:10px; }

.disc summary { cursor:pointer; font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; padding:11px 15px; list-style:none; display:flex; justify-content:space-between; gap:12px; min-height:44px; align-items:center; }

.disc summary::-webkit-details-marker { display:none; }
 .disc summary::after { content:"+"; font-size:15px; }
 .disc[open] summary::after { content:"\2212"; }

.disc .body { padding:12px 15px 14px; border-top:var(--fm-border-w) solid var(--fm-border-c); background:var(--surface); }

.disc .body p { font-size:15px; margin-bottom:10px; }
 .disc .body p:last-child { margin-bottom:0; }

.tbl { width:100%; border-collapse:separate; border-spacing:0; border:var(--fm-border-w) solid var(--fm-border-c); border-radius:4px; background:var(--surface); overflow:hidden; box-shadow:var(--fm-shadow-sm); margin:6px 0 14px; }

.tbl th { background:var(--ink); color:var(--cream); font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; text-align:left; padding:8px 11px; }

.tbl td { border-top:1px solid var(--cream-border); padding:10px 11px; font-size:14px; line-height:1.5; color:var(--ink-2); vertical-align:top; }

.tbl td:first-child { color:var(--ink); font-weight:600; }
 .tbl td code { font-size:12px; }
 .tblwrap { overflow-x:auto; }

@media (max-width:640px) { .need { grid-template-columns:1fr; } }

.need > div { border:var(--fm-border-w) solid var(--fm-border-c); border-radius:4px; background:var(--surface); box-shadow:var(--fm-shadow-sm); }

.need .h { font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; padding:8px 12px; border-bottom:var(--fm-border-w) solid var(--on-accent); background:var(--lime); border-color: var(--on-accent); color:var(--on-lime); }

.need .no .h { background:var(--paper-2); color:var(--ink-2); }

.need ul { list-style:none; padding:6px 12px 8px; }

.need li { display:flex; gap:10px; align-items:flex-start; padding:6px 0; border-bottom:1px dashed var(--ink-3); font-size:14px; line-height:1.45; color:var(--ink-2); }

.need li:last-child { border-bottom:none; }

.need li::before { content:''; flex:none; width:14px; height:14px; margin-top:3px; border:var(--fm-border-w) solid var(--fm-border-c); background:var(--surface); }

.need .no li::before { background:var(--paper-2); border-style:dashed; }

.fork-head { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }

.fork-tag { font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-3); padding-bottom:10px; margin-right:auto; }

.fork-tabs { display:flex; gap:6px; align-items:flex-end; }

.fork-tabs [role="tab"] { min-height:42px; padding:0 16px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-2); background:var(--paper-2); border:var(--fm-border-w) solid var(--fm-border-c); border-bottom:none; border-radius:var(--fm-radius) var(--fm-radius) 0 0; cursor:pointer; position:relative; top:2px; }

.fork-tabs [role="tab"][aria-selected="true"] { background:var(--surface); color:var(--ink); z-index:2; padding-top:4px; }

/* no lime underline on the selected tab (Wade, 09-14): the raised white tab is the selected state */

.fork-tabs [role="tab"]:focus-visible { outline:var(--fm-border-w) solid var(--fm-border-c); outline-offset:-4px; }

/* the app marks on the tabs (Wade, 09-13: more fun with the logos), no markup change: ::before by data-h */
.fork-tabs [role="tab"]::before { content:''; display:inline-block; width:16px; height:16px; margin-right:8px; vertical-align:-4px; background:center/contain no-repeat; }
.fork-tabs [role="tab"][data-h="claude"]::before { background-image:url(/agent-native-os/portal/essentials/img/claude-mark.svg); }
.fork-tabs [role="tab"][data-h="codex"]::before { background-image:url(/agent-native-os/portal/essentials/img/codex-mark.svg); }

.fork-pane { background:var(--surface); border:var(--fm-border-w) solid var(--fm-border-c); border-radius:0 0 var(--fm-radius) var(--fm-radius); box-shadow:var(--fm-shadow-sm); padding:16px 18px; }

.fork-pane[hidden] { display:none; }

.fork-note { display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.4px; color:var(--ink-3); margin-top:8px; }
 .fork-note b { color:var(--ink-2); }

.os-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; padding-bottom:10px; border-bottom:1px dashed var(--ink-3); }

.os-row .k { font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-3); }

.os-row [role="radio"] { min-height:34px; padding:0 14px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; border:var(--fm-border-w) solid var(--fm-border-c); background:var(--surface); color:var(--ink-2); border-radius:3px; cursor:pointer; }

.os-row [role="radio"][aria-checked="true"] { background:var(--lime); border-color: var(--on-accent); color:var(--on-lime); }

.os-pane[hidden] { display:none; }

.hx-frame { display:flex; gap:12px; align-items:flex-start; border:2px dashed var(--ink-3); border-radius:var(--fm-radius); padding:10px 12px; margin:12px 0 4px; }

.hx-frame .k { flex:none; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-2); border:var(--fm-border-w-sm) solid var(--fm-border-c); padding:2px 6px; margin-top:2px; }

.hx-frame p { font-size:14px; color:var(--ink-2); margin:0; }

.ph .t { display:inline-block; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; background:var(--ink); color:var(--cream); padding:4px 9px; border-radius:3px; margin-bottom:6px; }

.ph .d { font-size:13.5px; color:var(--ink-2); max-width:540px; margin:0 auto; line-height:1.5; }

.callout { border:var(--fm-border-w) solid var(--fm-border-c); border-radius:var(--fm-radius); box-shadow:var(--fm-shadow); margin:16px 0; }

.callout.note { background:var(--tint-info); }
 .callout.warn { background:var(--tint-warn); }
 .callout.prompt { background:var(--tint-prompt); }

.callout .co-head { display:flex; align-items:center; gap:var(--space-3); border-bottom:var(--fm-border-w) solid var(--fm-border-c); padding:9px 13px; }

.callout .chipi { width:26px; height:26px; flex:none; display:inline-flex; align-items:center; justify-content:center; background:var(--surface); border:var(--fm-border-w) solid var(--fm-border-c); border-radius:var(--fm-radius); }

.callout .chipi svg { width:14px; height:14px; display:block; stroke:var(--ink); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.callout .tag { font-family:var(--font-mono); font-size:var(--text-xs); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); }

.callout .co-ref { margin-left:auto; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }

.callout .co-body { padding:12px 13px 14px; }
 .callout .co-body p { font-size:15px; max-width:92ch; margin:0; color:var(--ink-2); }

.prompt { background:var(--surface); border:var(--fm-border-w) solid var(--fm-border-c); border-radius:var(--fm-radius); box-shadow:var(--fm-shadow-sm); margin:10px 0 14px; overflow:hidden; }

.prompt-label { display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color:var(--ink-2); background:var(--paper-2); border-bottom:var(--fm-border-w) solid var(--fm-border-c); padding:7px 12px; }

.prompt-label .copy-btn { margin-left:auto; min-height:34px; padding:0 13px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; background:var(--lime); color:var(--on-lime); border:var(--fm-border-w) solid var(--on-accent); border-radius:var(--fm-radius); box-shadow:var(--fm-shadow-xs); cursor:pointer; }

.prompt pre { margin:0; padding:12px 14px; font-family:var(--font-mono); font-size:13px; line-height:1.6; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; }

.stuck { background:var(--paper-2); border:var(--fm-border-w) solid var(--fm-border-c); border-radius:var(--fm-radius); padding:12px 16px; margin:14px 0; }

.stuck .k { font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--ink-2); margin-bottom:6px; }

.stuck dt { font-size:14.5px; font-weight:600; color:var(--ink); margin-top:8px; }
 .stuck dt:first-of-type { margin-top:0; }

.stuck dd { font-size:14px; color:var(--ink-2); line-height:1.5; margin:2px 0 0; }

.dod { border:var(--fm-border-w) solid var(--fm-border-c); border-radius:var(--fm-radius); background:var(--surface); box-shadow:var(--fm-shadow-sm); margin:20px 0 0; }

.dod-head { display:flex; align-items:center; gap:12px; padding:9px 14px; border-bottom:var(--fm-border-w) solid var(--fm-border-c); background:var(--paper-2); }

.dod-eyebrow { font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--ink); }

.dod-count { margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); letter-spacing:1px; text-transform:uppercase; }

.dod-row { display:flex; gap:12px; align-items:flex-start; padding:10px 14px; border-bottom:1px dashed var(--ink-3); cursor:pointer; font-size:14.5px; color:var(--ink-2); }

.dod-row:last-of-type { border-bottom:none; }

.dod-row input { position:absolute; opacity:0; width:1px; height:1px; }

.dod-box { flex:none; width:18px; height:18px; margin-top:2px; border:var(--fm-border-w) solid var(--fm-border-c); background:var(--surface); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--on-lime); }

.dod-row input:checked + .dod-box { background:var(--lime); }
 .dod-row input:checked + .dod-box::after { content:'✓'; }

.dod-row input:checked ~ .dod-text { text-decoration:line-through; color:var(--ink-3); }

.dod-row input:focus-visible + .dod-box { outline:var(--fm-border-w) solid var(--fm-border-c); outline-offset:2px; }

.dod-foot { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:10px 14px; border-top:var(--fm-border-w) solid var(--fm-border-c); }

.dod-hint { font-size:13px; color:var(--ink-3); }
 .dod-btn { margin-left:auto; }
 .dod-btn.is-done { background:var(--ink); color:var(--paper); }

.gloss { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; margin:6px 0 4px; }

.gloss div { border:var(--fm-border-w-sm) solid var(--fm-border-c); border-radius:3px; padding:9px 11px; background:var(--surface); }

.gloss b { display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--ink); margin-bottom:3px; }

.gloss span { font-size:13px; color:var(--ink-2); line-height:1.45; }

@media (max-width:560px) { .rc-nav { grid-template-columns:1fr; } .rc-nav a:last-child { text-align:left; } }

.punch { position:relative; }

.punch::before, .punch::after { content:''; position:absolute; width:74px; height:22px; top:-11px; background:rgba(255,247,185,0.82); border:1px solid rgba(0,0,0,0.13); box-shadow:0 2px 3px rgba(0,0,0,.08); z-index:2; }

.punch::before { left:-18px; transform:rotate(-26deg); }
 .punch::after { right:-18px; transform:rotate(26deg); }

.punch ul { list-style:none; }

.punch li label { display:flex; gap:10px; align-items:flex-start; padding:7px 0; border-bottom:1px dashed var(--ink-3); cursor:pointer; font-size:13.5px; color:var(--ink-2); line-height:1.35; }

.punch li:last-child label { border-bottom:none; }

.punch input { position:absolute; opacity:0; width:1px; height:1px; }

.punch .box { flex:none; width:16px; height:16px; margin-top:1px; border:var(--fm-border-w) solid var(--fm-border-c); background:var(--surface); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--on-lime); }

.punch input:checked + .box { background:var(--lime); }
 .punch input:checked + .box::after { content:'✓'; }

.punch input:checked ~ span.t { text-decoration:line-through; color:var(--ink-3); }

.punch input:focus-visible + .box { outline:var(--fm-border-w) solid var(--fm-border-c); outline-offset:2px; }

.punch .n { font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--ink); flex:none; width:12px; }

.punch .foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding-top:9px; border-top:var(--fm-border-w) solid var(--fm-border-c); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-3); }

.punch .stamp { display:inline-block; border:1.5px solid #0A7A4E; color:#0A7A4E; padding:2px 7px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transform:rotate(-4deg); visibility:hidden; }

.punch.all .stamp { visibility:visible; }

.aside-note { font-size:13px; color:var(--ink-2); line-height:1.5; }

.aside-note b { color:var(--ink); font-weight:600; }

.notes { margin-top:26px; border:2px dashed var(--ink-3); border-radius:4px; background:var(--surface); }

.notes summary { cursor:pointer; list-style:none; padding:12px 16px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; display:flex; justify-content:space-between; }

.notes summary::-webkit-details-marker { display:none; }
 .notes summary::after { content:'+'; }
 .notes[open] summary::after { content:'\2212'; }

.notes .body { padding:0 16px 16px; border-top:1px dashed var(--ink-3); }

.notes h4 { font-family:var(--font-mono); font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-3); margin:14px 0 6px; }

.notes ul, .notes ol { padding-left:20px; color:var(--ink-2); font-size:14px; line-height:1.55; }
 .notes li { margin-bottom:5px; }

.notes code { font-family:var(--font-mono); font-size:12.5px; background:var(--paper-2); padding:1px 5px; border-radius:3px; color:var(--ink); }