/* ═══════════════════════════════════════════════════════════
   help.css - the Help center (portal/academy/help/, #1291).
   Design "Reader": the help center reads like one more course.
   The lesson reader's sidebar, topic tile, boxes and "On this
   page" rail, the player's Keyboard legend, the Settings cards.
   Loaded after portal.css and built only on its tokens; light
   and dark follow [data-theme] like every portal page.
   Markup: .help-work CONTRACT (writers) + scripts/gen_help.py
   (nav, pager, screenshots, hub card data). help.js adds the
   On this page rail, the hub filter and screenshot zoom; every
   page is complete without it.
   ─────────────────────────────────────────────────────────── */

:root {
  --h-top: 64px;           /* fixed site header */
  --h-side: 272px;         /* left nav */
  --h-rail: 236px;         /* On this page */
  --h-measure: 760px;      /* article column */
  --h-side-bg: #eef1f7;
  --n-tip: #1557b0; --n-app: #6d28d9; --n-warn: #9a5b00;

  --i-help: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/><path d='M12 17h.01'/></svg>");
  --i-book: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/><path d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/></svg>");
  --i-compass: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m16.24 7.76-2.12 6.36-6.36 2.12 2.12-6.36z'/></svg>");
  --i-page: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='M16 13H8'/><path d='M16 17H8'/><path d='M10 9H8'/></svg>");
  --i-headphones: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/></svg>");
  --i-cards: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='8' width='14' height='14' rx='2'/><path d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/><path d='m12 15 2 2 4-4'/></svg>");
  --i-award: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='6'/><path d='M15.48 12.89 17 22l-5-3-5 3 1.52-9.11'/></svg>");
  --i-dashboard: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='9' rx='1'/><rect x='14' y='3' width='7' height='5' rx='1'/><rect x='14' y='12' width='7' height='9' rx='1'/><rect x='3' y='16' width='7' height='5' rx='1'/></svg>");
  --i-sliders: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/></svg>");
  --i-card: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><path d='M2 10h20'/></svg>");
  --i-phone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='2' width='14' height='20' rx='2'/><path d='M12 18h.01'/></svg>");
  --i-chat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/><path d='M12 17h.01'/></svg>");
  --i-tip: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/><path d='M9 18h6'/><path d='M10 22h4'/></svg>");
  --i-warn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
  --i-pointer: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4.1 12 6'/><path d='m5.1 8-2.9-.8'/><path d='m6 12-1.9 2'/><path d='M7.2 2.2 8 5.1'/><path d='M9.04 9.69a.5.5 0 0 1 .65-.65l11 4.5a.5.5 0 0 1-.07.95l-4.35 1.04a1 1 0 0 0-.74.74l-1.04 4.35a.5.5 0 0 1-.95.07z'/></svg>");
  --i-play: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M7 4.5v15a1 1 0 0 0 1.5.86l12.5-7.5a1 1 0 0 0 0-1.72L8.5 3.64A1 1 0 0 0 7 4.5z'/></svg>");
  --i-stop: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><rect x='5' y='5' width='14' height='14' rx='2.5'/></svg>");
  --i-zoom: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/></svg>");
  --i-mail: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-10 5L2 7'/></svg>");
  --i-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m15 18-6-6 6-6'/></svg>");
  --i-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>");
}
:root:not([data-theme="light"]) { --h-side-bg: #0f131d; --n-tip: #4dabf7; --n-app: #b49cff; --n-warn: #f6c453; }

/* one icon per page: the page tile, the hub cards */
[data-page="index"]           { --page-icon: var(--i-help); }
[data-page="about"]           { --page-icon: var(--i-book); }
[data-page="getting-started"] { --page-icon: var(--i-compass); }
[data-page="lessons"]         { --page-icon: var(--i-page); }
[data-page="live-figures"]    { --page-icon: var(--i-pointer); }
[data-page="listening"]       { --page-icon: var(--i-headphones); }
[data-page="flashcards"]      { --page-icon: var(--i-cards); }
[data-page="progress"]        { --page-icon: var(--i-award); }
[data-page="dashboard"]       { --page-icon: var(--i-dashboard); }
[data-page="settings"]        { --page-icon: var(--i-sliders); }
[data-page="billing"]         { --page-icon: var(--i-card); }
[data-page="apps"]            { --page-icon: var(--i-phone); }
[data-page="faq"]             { --page-icon: var(--i-chat); }

body.help { background: var(--bg); }
:where(main.help) section { padding: 0; max-width: none; margin: 0; }   /* undo portal.css's landing `section` */
main.help :is(section[id], h3[id], details[id]) { scroll-margin-top: calc(var(--h-top) + 20px); }

/* ── grid: nav | article | rail (the rail only when help.js built one) ── */
main.help {
  padding-top: var(--h-top);
  display: grid; grid-template-columns: var(--h-side) minmax(0, 1fr);
  grid-template-areas: "nav art" "nav pager"; grid-template-rows: auto 1fr;
}
main.help.has-toc { grid-template-columns: var(--h-side) minmax(0, 1fr) var(--h-rail); grid-template-areas: "nav art toc" "nav pager toc"; }
.help-nav { grid-area: nav; background: var(--h-side-bg); border-right: 1px solid var(--border); }
.help-article { grid-area: art; width: 100%; max-width: var(--h-measure); margin: 0 auto; padding: 52px clamp(20px, 4vw, 52px) 0; min-width: 0; }
.help-pager { grid-area: pager; }
.help-toc { grid-area: toc; border-left: 1px solid var(--border); }

/* ── left nav: the course sidebar ───────────────────────── */
.help-nav-box { position: sticky; top: var(--h-top); max-height: calc(100vh - var(--h-top)); overflow: auto; padding: 18px 0 28px; scrollbar-width: thin; }
.help-nav-box > summary { display: none; }
.help-nav-home { position: relative; display: flex; align-items: center; gap: 11px; padding: 2px 20px 16px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--fg); text-decoration: none; }
.help-nav-home::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--grad-brand); box-shadow: 0 2px 8px -2px rgba(124,58,237,.6); }
.help-nav-home::after { content: ""; position: absolute; left: 27px; top: 9px; width: 16px; height: 16px; background: #fff; -webkit-mask: var(--i-help) center / contain no-repeat; mask: var(--i-help) center / contain no-repeat; }
.help-nav-home[aria-current="page"] { color: var(--primary); }
.help-nav-group { margin: 16px 0 4px; padding: 0 20px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-subtle); }
.help-nav ul { list-style: none; margin: 0; padding: 0 8px; }
.help-nav li a { display: flex; align-items: baseline; gap: 10px; padding: 7px 12px; border-radius: var(--r-sm); font-size: 13.5px; line-height: 1.4; color: var(--fg-muted); text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); }
.help-nav li a .n { flex: none; width: 16px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--fg-subtle); }
.help-nav li a:hover { background: var(--surface-hover); color: var(--fg); }
.help-nav li a[aria-current="page"] { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); font-weight: 600; }
.help-nav li a[aria-current="page"] .n { color: var(--primary); }

/* ── right: On this page (built by help.js) ─────────────── */
.help-toc-in { position: sticky; top: calc(var(--h-top) + 40px); max-height: calc(100vh - var(--h-top) - 60px); overflow: auto; scrollbar-width: none; padding: 0 20px 24px; }
.help-toc-title { margin: 0 0 10px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-subtle); }
.help-toc-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-strong); }
.help-toc-list a { display: block; margin-left: -1px; padding: 5px 12px; border-left: 2px solid transparent; font-size: 12.5px; line-height: 1.4; color: var(--fg-muted); text-decoration: none; transition: color var(--dur-fast), border-color var(--dur-fast); }
.help-toc-list .lvl3 a { padding-left: 24px; font-size: 12px; color: var(--fg-subtle); }
.help-toc-list a:hover { color: var(--fg); }
.help-toc-list a.on { color: var(--primary); border-left-color: var(--primary); font-weight: 600; }

/* ── page head: the lesson's topic tile ─────────────────── */
.help-head { position: relative; min-height: 64px; padding: 0 0 34px 84px; border-bottom: 1px solid var(--border); }
.help-head::before { content: ""; position: absolute; left: 0; top: 2px; width: 62px; height: 62px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); }
.help-head::after { content: ""; position: absolute; left: 17px; top: 19px; width: 28px; height: 28px; background: var(--primary); -webkit-mask: var(--page-icon, var(--i-help)) center / contain no-repeat; mask: var(--page-icon, var(--i-help)) center / contain no-repeat; }
.help-head .help-eyebrow { margin: 4px 0 6px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.help-head h1 { margin: 0 0 14px; font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4vw, 44px); line-height: 1.08; letter-spacing: -.03em; color: var(--fg); text-wrap: balance; }
.help-head .help-lede { margin: 0; font-size: 18px; line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; }
.help-head .help-lede a { font-weight: 600; }

/* ── text ───────────────────────────────────────────────── */
.help-article section { padding-top: 44px; }
.help-article h2 { margin: 0 0 16px; font-family: var(--font-display); font-weight: 700; font-size: 29px; line-height: 1.2; letter-spacing: -.02em; color: var(--fg); }
.help-article h3 { margin: 36px 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.3; letter-spacing: -.01em; color: var(--fg); }
.help-article p, .help-article li { font-size: 17px; line-height: 1.8; color: var(--fg); }
.help-article p { margin: 0 0 16px; }
.help-article b, .help-article strong { font-weight: 700; }
.help-article a { color: var(--primary); text-decoration: none; font-weight: 600; }
.help-article a:hover { text-decoration: underline; text-underline-offset: 3px; }
.help-article ul:not([class]) { margin: 0 0 18px; padding-left: 22px; }
.help-article ul:not([class]) > li { margin: 0 0 8px; padding-left: 4px; }
.help-article ul:not([class]) > li::marker { color: var(--primary); }
.help-article code { padding: 1px 6px; border-radius: 6px; font: 500 .86em var(--font-mono); background: var(--surface-hover); border: 1px solid var(--border); }

/* numbered steps: the landing page's track */
ol.steps { list-style: none; counter-reset: step; margin: 20px 0 26px; padding: 0; }
ol.steps > li { counter-increment: step; position: relative; padding: 3px 0 18px 48px; }
ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); font: 600 12.5px/1 var(--font-mono); color: var(--cyan-ink); }
ol.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 32px; bottom: 0; width: 1px; background: var(--border-strong); }

/* keys: the player's Keyboard legend */
kbd { display: inline-block; min-width: 24px; padding: 0 7px; font: 600 12px/22px var(--font-mono); color: var(--fg); text-align: center; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: 0 1px 0 var(--border-strong); vertical-align: 1px; }
ul.keymap { list-style: none; margin: 14px 0 22px; padding: 4px 0; max-width: 580px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
ul.keymap > li { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 16px; font-size: 14.5px; line-height: 1.4; color: var(--fg-muted); }
ul.keymap > li + li { border-top: 1px solid var(--border); }
ul.keymap > li::before { content: ""; order: 1; flex: 1; }
ul.keymap > li > kbd { order: 2; }

/* notes: the lesson's boxes */
aside.note { --nc: var(--n-tip); --ni: var(--i-tip); position: relative; margin: 24px 0; padding: 16px 18px 16px 50px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--nc) 30%, transparent); background: color-mix(in srgb, var(--nc) 8%, var(--bg)); }
aside.note-app { --nc: var(--n-app); --ni: var(--i-phone); }
aside.note-warn { --nc: var(--n-warn); --ni: var(--i-warn); }
aside.note::before { content: ""; position: absolute; left: 18px; top: 19px; width: 17px; height: 17px; background: var(--nc); -webkit-mask: var(--ni) center / contain no-repeat; mask: var(--ni) center / contain no-repeat; }
aside.note p { margin: 0 0 8px; font-size: 15px; line-height: 1.7; }
aside.note p:last-child { margin-bottom: 0; }
aside.note p:first-child > b:first-child { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--nc); }

/* screenshots: a framed card, caption inside, the image matching the theme */
figure.shot { position: relative; margin: 28px 0 32px; padding: 8px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-card); }
.shot-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 720px; margin: 0 auto; border-radius: 10px; border: 1px solid var(--border); }
.shot-dark { display: none; }
:root:not([data-theme="light"]) .shot-light { display: none; }
:root:not([data-theme="light"]) .shot-dark { display: block; }
figure.shot figcaption { padding: 12px 8px 4px; font-size: 14px; line-height: 1.55; color: var(--fg-muted); }
figure.shot figcaption b { color: var(--fg); font-weight: 600; }
.shot-img[tabindex] { cursor: zoom-in; }
.shot-img[tabindex]:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
figure.shot:not(.shot-anim):has(.shot-img[tabindex])::before { content: ""; position: absolute; z-index: 1; right: 18px; top: 18px; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--dur); pointer-events: none; }
figure.shot:not(.shot-anim):has(.shot-img[tabindex])::after { content: ""; position: absolute; z-index: 2; right: 27px; top: 27px; width: 14px; height: 14px; background: var(--fg); -webkit-mask: var(--i-zoom) center / contain no-repeat; mask: var(--i-zoom) center / contain no-repeat; opacity: 0; transition: opacity var(--dur); pointer-events: none; }
figure.shot:not(.shot-anim):has(.shot-img[tabindex]):hover::before, figure.shot:not(.shot-anim):has(.shot-img[tabindex]):hover::after { opacity: 1; }
/* iPhone screenshots on the Apps page: a phone-sized card, not a column-wide one */
figure.shot[data-shot^="app-"] { max-width: 380px; margin-left: auto; margin-right: auto; }
figure.shot[data-shot^="app-"] .shot-img { max-height: 640px; border-radius: 24px; }
@media (max-width: 720px) { figure.shot[data-shot^="app-"] .shot-img { max-height: 520px; } }
/* animated previews (#1321): help.js adds .is-ready and the Play / Stop pill;
   without it the still is all there is, with no promise of motion. */
figure.shot-anim .shot-img[tabindex] { cursor: pointer; }
.shot-play { position: absolute; z-index: 2; left: 50%; top: calc(50% - 20px); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 13px; border-radius: 999px; border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(6px); box-shadow: var(--shadow-card); font: 600 14px/1 var(--font-body); color: var(--fg); pointer-events: none; transition: opacity var(--dur); }
.shot-play::before { content: ""; width: 14px; height: 14px; background: var(--primary); -webkit-mask: var(--i-play) center / contain no-repeat; mask: var(--i-play) center / contain no-repeat; }
figure.shot-anim.is-playing .shot-play { left: auto; top: 18px; right: 18px; transform: none; padding: 7px 12px 7px 10px; font-size: 13px; opacity: .9; }
figure.shot-anim.is-playing .shot-play::before { -webkit-mask-image: var(--i-stop); mask-image: var(--i-stop); }
figure.shot-anim:hover .shot-play, figure.shot-anim:focus-within .shot-play { border-color: var(--primary); }
.shot-zoom { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: auto; cursor: zoom-out; }
.shot-zoom::backdrop { background: rgba(5,7,12,.84); backdrop-filter: blur(4px); }
.shot-zoom img { display: block; max-width: 96vw; max-height: none; border-radius: var(--r-md); }

.web-only { margin: 22px 0; padding: 12px 16px; border-radius: var(--r-md); border: 1px dashed var(--border-strong); }
.web-only > :last-child { margin-bottom: 0; }

/* diagrams
   figure.diagram#dia-<name>: an inline SVG for a mechanism a screenshot
   cannot show. Two drawings per figure, .dia-wide and .dia-narrow (the
   layout for a figure under 600px), so text never shrinks under 11px. No colour
   lives in the markup: shapes and text take classes, tones set --dc, and
   the tokens flip with [data-theme]. Text sizes are SVG user units; the
   wide drawing needs 600px of figure to keep them at 11px or more. */
figure.diagram { container-type: inline-size; margin: 28px 0 32px; padding: 24px 22px 0; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-card); }
figure.diagram svg { display: block; width: 100%; height: auto; }
figure.diagram .dia-narrow { display: none; max-width: 440px; margin: 0 auto; }
figure.diagram figcaption { margin: 20px -22px 0; padding: 12px 22px 14px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.55; color: var(--fg-muted); }
figure.diagram figcaption b { color: var(--fg); font-weight: 600; }
@container (max-width: 599px) {
  figure.diagram .dia-wide { display: none; }
  figure.diagram .dia-narrow { display: block; }
}
.diagram text { font-family: var(--font-body); font-size: 13.5px; font-weight: 500; fill: var(--fg); }
.diagram .t-xs { font-size: 12px; }
.diagram .t-s { font-size: 12.5px; }
.diagram .t-l { font-size: 15px; }
.diagram .t-xl { font-size: 18px; }
.diagram .t-b { font-weight: 700; }
.diagram .t-mu { fill: var(--fg-muted); }
.diagram .t-su { fill: var(--fg-subtle); }
.diagram .t-mono { font-family: var(--font-mono); font-weight: 600; }
.diagram .t-eb { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; fill: var(--fg-subtle); }
.diagram .t-ink { fill: color-mix(in srgb, var(--dc) 80%, var(--fg)); }
.diagram .t-on { fill: var(--surface); font-weight: 700; }
.diagram .t-c { text-anchor: middle; }
.diagram .t-e { text-anchor: end; }
.diagram .tn-green { --dc: var(--success); }
.diagram .tn-amber { --dc: var(--amber-ink); }
.diagram .tn-blue { --dc: var(--primary); }
.diagram .tn-violet { --dc: var(--n-app); }
.diagram .tn-cyan { --dc: var(--cyan-ink); }
.diagram .tn-red { --dc: var(--danger); }
.diagram .tn-mute { --dc: var(--fg-subtle); }
.diagram .s-card { fill: var(--bg); stroke: var(--border-strong); stroke-width: 1; }
.diagram .s-tint { fill: color-mix(in srgb, var(--dc) 11%, var(--surface)); stroke: color-mix(in srgb, var(--dc) 50%, transparent); stroke-width: 1.25; }
.diagram .s-soft { fill: color-mix(in srgb, var(--dc) 20%, transparent); }
.diagram .s-solid { fill: var(--dc); }
.diagram .s-track { fill: var(--surface-hover); stroke: var(--border); stroke-width: 1; }
.diagram .s-empty { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.25; stroke-dasharray: 3 3; }
.diagram .s-dash { fill: none; stroke: var(--border-strong); stroke-width: 1.25; stroke-dasharray: 5 4; }
.diagram .s-line { fill: none; stroke: var(--dc, var(--fg-subtle)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.diagram .s-bar { fill: none; stroke: var(--dc); stroke-width: 7; stroke-linecap: round; }
.diagram .s-head { fill: var(--dc, var(--fg-subtle)); }
.diagram .s-glyph { fill: none; stroke: var(--dc, var(--fg-muted)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.diagram .s-dot { fill: var(--dc); stroke: var(--surface); stroke-width: 3; }

/* ── previous / next ────────────────────────────────────── */
.help-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; width: 100%; max-width: var(--h-measure); margin: 56px auto 0; padding: 0 clamp(20px, 4vw, 52px) 88px; }
.help-pager a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface); text-decoration: none; transition: border-color var(--dur-fast); }
.help-pager a[rel="next"] { grid-column: 2; text-align: right; align-items: flex-end; }
.help-pager a:hover { border-color: var(--primary); }
.help-pager-dir { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--fg-subtle); }
.help-pager-dir::before, .help-pager-dir::after { width: 14px; height: 14px; background: currentColor; }
a[rel="prev"] .help-pager-dir::before { content: ""; -webkit-mask: var(--i-left) center / contain no-repeat; mask: var(--i-left) center / contain no-repeat; }
a[rel="next"] .help-pager-dir::after { content: ""; -webkit-mask: var(--i-right) center / contain no-repeat; mask: var(--i-right) center / contain no-repeat; }
.help-pager-title { font-size: 16px; font-weight: 700; color: var(--fg); }

/* ── quick answers ──────────────────────────────────────── */
details.qa { border: 1px solid var(--border); border-top-width: 0; background: var(--surface); }
details.qa:first-of-type { border-top-width: 1px; border-radius: var(--r-lg) var(--r-lg) 0 0; }
details.qa:last-of-type { border-radius: 0 0 var(--r-lg) var(--r-lg); margin-bottom: 8px; }
details.qa:only-of-type { border-radius: var(--r-lg); }
details.qa > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 15px 20px; font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--fg); }
details.qa > summary::-webkit-details-marker { display: none; }
details.qa > summary::after { content: ""; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid var(--fg-subtle); border-bottom: 1.5px solid var(--fg-subtle); transform: rotate(45deg) translateY(-2px); transition: transform var(--dur) var(--ease-out); }
details.qa[open] > summary::after { transform: rotate(-135deg); }
details.qa[open] > summary, details.qa > summary:hover { color: var(--primary); }
details.qa > p { margin: -4px 0 0; padding: 0 20px 18px; font-size: 15px; line-height: 1.7; color: var(--fg-muted); max-width: 70ch; }
details.qa:target { box-shadow: inset 3px 0 0 var(--primary); }
.help-article details.qa > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 6px; }

/* ── hub ────────────────────────────────────────────────── */
main.help[data-page="index"] .help-article { max-width: 1040px; }
main.help[data-page="index"] .help-pager { max-width: 1040px; }
.help-hub .help-head { padding-bottom: 32px; border-bottom: 0; }
.help-hub .help-head::before { background: var(--grad-brand); border: 0; box-shadow: var(--glow-primary); }
.help-hub .help-head::after { background: #fff; }
.help-hub .help-head h1 { font-size: clamp(34px, 4.6vw, 50px); letter-spacing: -.035em; }
.help-hub section { padding-top: 40px; }
.help-hub section > h2 { margin: 0 0 16px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-subtle); }

/* filter (help.js puts it under the lede) */
.help-search { display: flex; align-items: center; gap: 12px; max-width: 620px; height: 54px; margin: 26px 0 0; padding: 0 18px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface); box-shadow: var(--shadow-card); color: var(--fg-subtle); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.help-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.help-search svg { flex: none; }
.help-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 16px var(--font-body); color: var(--fg); }
.help-search input::placeholder { color: var(--fg-subtle); }
.help-article .help-search-empty { margin: 14px 0 0; font-size: 15px; color: var(--fg-muted); }
.help-article .help-search-empty:empty { margin: 0; }

/* quick start: the numbered track inside one card */
.help-hub #quick-start ol.steps { margin: 0; padding: 22px 24px 6px; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.help-hub #quick-start ol.steps > li { font-size: 15.5px; line-height: 1.65; color: var(--fg-muted); padding-bottom: 20px; }
.help-hub #quick-start ol.steps > li b:first-child { color: var(--fg); font-size: 16px; }
.help-hub #quick-start ol.steps > li > a:last-child { white-space: nowrap; }
.help-hub #quick-start ol.steps > li > a:last-child::after { content: ""; display: inline-block; width: 13px; height: 13px; margin-left: 2px; vertical-align: -1px; background: currentColor; -webkit-mask: var(--i-right) center / contain no-repeat; mask: var(--i-right) center / contain no-repeat; }

/* topic cards (data-page, data-search and the chips come from gen_help.py) */
ul.help-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
ul.help-cards > li { margin: 0; }
ul.help-cards > li[hidden] { display: none; }
ul.help-cards a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 74px 20px 18px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-card); font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--fg-muted); text-decoration: none; transition: border-color var(--dur), transform var(--dur) var(--ease-out); }
ul.help-cards a:hover { text-decoration: none; border-color: color-mix(in srgb, var(--primary) 55%, transparent); transform: translateY(-2px); }
ul.help-cards a::before { content: ""; position: absolute; left: 20px; top: 20px; width: 40px; height: 40px; border-radius: 11px; background: color-mix(in srgb, var(--primary) 13%, transparent); }
ul.help-cards a::after { content: ""; position: absolute; left: 30px; top: 30px; width: 20px; height: 20px; background: var(--primary); -webkit-mask: var(--page-icon) center / contain no-repeat; mask: var(--page-icon) center / contain no-repeat; }
ul.help-cards a > b { display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--fg); }
.help-card-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px; }
.help-card-subs span { padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface-hover); font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--fg-muted); }

/* most asked: two columns of link rows in one card */
.help-hub #popular ul { list-style: none; margin: 0; padding: 6px 0; columns: 2; column-gap: 0; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.help-hub #popular li { break-inside: avoid; margin: 0; padding: 0 8px; }
.help-hub #popular li a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 15px; font-weight: 600; line-height: 1.4; }
.help-hub #popular li a::after { content: ""; flex: none; margin-left: auto; width: 14px; height: 14px; background: var(--fg-subtle); -webkit-mask: var(--i-right) center / contain no-repeat; mask: var(--i-right) center / contain no-repeat; }
.help-hub #popular li a:hover { text-decoration: none; background: var(--surface-hover); }

/* still stuck: one card with a mail tile */
.help-hub #contact > p { position: relative; margin: 0; padding: 20px 22px 20px 82px; border-radius: var(--r-xl); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); background: color-mix(in srgb, var(--primary) 7%, var(--bg)); font-size: 15.5px; line-height: 1.7; }
.help-hub #contact > p::before { content: ""; position: absolute; left: 22px; top: 22px; width: 42px; height: 42px; border-radius: 12px; background: var(--grad-brand); }
.help-hub #contact > p::after { content: ""; position: absolute; left: 33px; top: 33px; width: 20px; height: 20px; background: #fff; -webkit-mask: var(--i-mail) center / contain no-repeat; mask: var(--i-mail) center / contain no-repeat; }
.help-hub #contact { padding-bottom: 8px; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── no right rail below 1200 ───────────────────────────── */
@media (max-width: 1199px) {
  main.help.has-toc { grid-template-columns: var(--h-side) minmax(0, 1fr); grid-template-areas: "nav art" "nav pager"; }
  .help-toc { display: none; }
  ul.help-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── phones: the nav folds into a contents bar ──────────── */
@media (max-width: 899px) {
  main.help, main.help.has-toc { display: block; }
  main.help :is(section[id], h3[id], details[id]) { scroll-margin-top: calc(var(--h-top) + 64px); }
  .help-nav { position: sticky; top: var(--h-top); z-index: 50; border-right: 0; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--h-side-bg) 94%, transparent); backdrop-filter: blur(12px); }
  .help-nav-box { position: static; max-height: none; padding: 0; }
  .help-nav-box > summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; padding: 12px 16px; }
  .help-nav-box > summary::-webkit-details-marker { display: none; }
  .help-nav-box > summary::after { content: ""; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid var(--fg-muted); border-bottom: 1.5px solid var(--fg-muted); transform: rotate(45deg) translateY(-3px); transition: transform var(--dur); }
  .help-nav-box[open] > summary::after { transform: rotate(-135deg); }
  .help-nav-sum-label { flex: none; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-subtle); }
  .help-nav-sum-page { min-width: 0; font-size: 14px; font-weight: 600; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .help-nav-box[open] { max-height: calc(100vh - var(--h-top)); overflow: auto; padding-bottom: 14px; }
  .help-nav-home { padding-top: 6px; }
  .help-article { padding: 28px 16px 0; }
  .help-head { padding: 78px 0 28px; }
  .help-article p, .help-article li { font-size: 16.5px; }
  .help-article h2 { font-size: 25px; }
  .help-article h3 { font-size: 18px; }
  figure.shot { margin-left: -8px; margin-right: -8px; padding: 6px; }
  .shot-img { max-height: 560px; }
  ul.keymap > li { padding: 10px 14px; }
  .help-pager { grid-template-columns: 1fr; margin-top: 44px; padding: 0 16px 64px; }
  .help-pager a[rel="next"] { grid-column: auto; order: -1; }
  ul.help-cards { grid-template-columns: 1fr; }
  ul.help-cards a { padding: 18px 18px 16px 76px; min-height: 0; }
  ul.help-cards a::before { left: 18px; top: 18px; }
  ul.help-cards a::after { left: 28px; top: 28px; }
  .help-hub #popular ul { columns: 1; }
  .help-hub #quick-start ol.steps { padding: 18px 16px 4px; }
  .help-hub #contact > p { padding: 76px 18px 18px; }
  .help-hub #contact > p::before { left: 18px; top: 18px; }
  .help-hub #contact > p::after { left: 29px; top: 29px; }
}
@media (max-width: 599px) {
  figure.diagram { margin-left: -8px; margin-right: -8px; padding: 18px 12px 0; }
  figure.diagram figcaption { margin: 16px -12px 0; padding: 12px 14px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  ul.help-cards a, details.qa > summary::after, .help-nav-box > summary::after { transition: none; }
}