/* Lia's palette, type and dark mode: from the website's site.css, built by docs/build.mjs. */
/* Lia's website. Calm and exact: Plus Jakarta Sans throughout (titles in two tones, small uppercase
   labels), neutral surfaces with Lia blue as the one accent, and the app's own screens as the pictures.
   Fredoka stays in the logo only. Light with dark sections; dark mode follows the device. Motion is
   fades and short slides. */

:root {
  --blue: #2f5bff;
  --blue-press: #2448d9;
  --blue-soft: #e9eeff;
  --ink: #0b0b0f;
  --text: #0b0b0f;
  --muted: #6b6e7b;
  --faint: #a3a6b2;
  --bg: #ffffff;
  --soft: #f5f5f7;
  --card: #ffffff;
  --well: #f5f5f7;
  --hair: #e6e7ec;
  --night: #09090b;
  --sky: #5ec0ea;
  --mine: #22c55e;
  --spin: #8b5cf6;
  --invite: #0ea5e9;
  --strides: #f97316;
  --tasks: #14b8a6;
  --board: #eab308;
  --radius: 28px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
  --display: "Plus Jakarta Sans", "IBM Plex Sans Arabic", "Noto Sans Devanagari", system-ui, sans-serif;
  --body: "Plus Jakarta Sans", "IBM Plex Sans Arabic", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Small uppercase labels, in the same family; code alone is monospaced. */
  --mono: "Plus Jakarta Sans", system-ui, sans-serif;
  --code: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --shadow: inset 0 0 0 1px var(--hair);
  color-scheme: light;
}
/* Dark: chosen with the header's switch (data-theme on <html>), or the device's setting until then. */
:root[data-theme="dark"] {
    --text: #f5f5f7;
    --muted: #9799a6;
    --faint: #5d5f6a;
    --bg: #09090b;
    --soft: #111114;
    --card: #141417;
    --well: #1b1b1f;
    --hair: #232328;
    --blue-soft: #18203f;
    --shadow: inset 0 0 0 1px var(--hair);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text: #f5f5f7;
    --muted: #9799a6;
    --faint: #5d5f6a;
    --bg: #09090b;
    --soft: #111114;
    --card: #141417;
    --well: #1b1b1f;
    --hair: #232328;
    --blue-soft: #18203f;
    --shadow: inset 0 0 0 1px var(--hair);
    color-scheme: dark;
  }
}

/* Lia's developer docs. The website's look for reading: Plus Jakarta Sans, Lia blue as the one accent,
   feature colours only as soft tints, the white header tab hanging from the top, hairlines instead of
   shadows. The page is soft grey and the article sits on it as a white card; dark follows the device
   until the header's switch picks one. */

*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--soft); color: var(--text); font: 400 16px/1.7 var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
svg.i { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
kbd { font: 600 11px/1 var(--body); padding: 4px 6px; border-radius: 6px; background: var(--well); color: var(--muted); box-shadow: inset 0 0 0 1px var(--hair); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 99; padding: 10px 14px; border-radius: 12px; background: var(--blue); color: #fff; }
.skip:focus { left: 12px; }

/* ---- The header: a white tab hanging from the top edge ---- */
.top { position: sticky; top: 0; z-index: 30; display: flex; justify-content: center; pointer-events: none; }
.tab { pointer-events: auto; width: min(1760px, calc(100% - 48px)); display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 12px 0 18px; background: var(--bg); border-radius: 0 0 28px 28px; box-shadow: inset 0 -1px 0 var(--hair), inset 1px 0 0 var(--hair), inset -1px 0 0 var(--hair); }
.brand { display: inline-flex; align-items: center; gap: 9px; font: 600 22px/1 "Fredoka", var(--display); letter-spacing: -0.01em; flex: none; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--ink); display: grid; place-items: center; }
:root[data-theme="dark"] .brand-mark { background: var(--blue); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-mark { background: var(--blue); } }
.brand-mark img { height: 15px; width: auto; }
.brand-sub { font: 600 13px/1 var(--body); letter-spacing: 0; color: var(--blue); background: var(--blue-soft); padding: 6px 9px; border-radius: 999px; margin-inline-start: 2px; }
.search-btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 14px; margin-inline-start: 18px; width: min(320px, 32vw); border-radius: 13px; background: var(--well); color: var(--muted); font-size: 14.5px; transition: box-shadow 0.18s; }
.search-btn:hover { box-shadow: inset 0 0 0 1px var(--hair); }
.search-btn span { flex: 1; text-align: start; }
.tab-links { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.tab-links a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; height: 40px; padding: 0 13px; border-radius: 13px; font: 600 14.5px/1 var(--body); color: color-mix(in srgb, var(--text) 78%, transparent); transition: background-color 0.18s, color 0.18s; }
.tab-links a svg.i { width: 14px; height: 14px; color: var(--muted); }
.tab-links a:hover, .tab-links a[aria-current] { background: color-mix(in srgb, var(--blue) 11%, var(--bg)); color: var(--text); }
.tab-btn { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.tab-btn:hover { background: var(--well); }
.tab-btn svg.i { width: 19px; height: 19px; }
.menu-btn { display: none; }
.tab-btn .moon { display: none; }
:root[data-theme="dark"] .tab-btn .sun { display: none; }
:root[data-theme="dark"] .tab-btn .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tab-btn .sun { display: none; }
  :root:not([data-theme="light"]) .tab-btn .moon { display: block; }
}

/* ---- Three columns: the sidebar, the article and what's on this page ---- */
/* The docs span the screen (up to a very wide 1760px): the article takes all the room between the
   sidebar and what's on this page, while running text keeps a comfortable line length. */
.shell { width: min(1760px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; padding: 26px 0 60px; }
.side { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; padding: 4px 4px 20px 0; scrollbar-width: thin; }
.side-group { margin-bottom: 22px; }
.side-head { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font: 600 11.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.side-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.side-ico svg.i { width: 15px; height: 15px; stroke-width: 2; }
.side ul { list-style: none; margin: 0; padding: 0 0 0 12px; border-inline-start: 1px solid var(--hair); margin-inline-start: 12px; }
.side li a { display: block; padding: 6px 12px; margin: 1px 0; border-radius: 10px; font-size: 14.5px; line-height: 1.35; color: var(--muted); transition: background-color 0.15s, color 0.15s; }
.side li a:hover { color: var(--text); background: color-mix(in srgb, var(--c) 8%, transparent); }
.side li a[aria-current] { color: var(--text); font-weight: 600; background: color-mix(in srgb, var(--c) 13%, transparent); }
.side-foot { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0 4px; font-size: 14px; color: var(--muted); }
.side-foot:hover { color: var(--text); }

.main { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; align-items: start; }
.doc > p, .doc > ul, .doc > ol, .doc > blockquote, .doc .lede, .doc > h2, .doc > h3, .doc > h4 { max-width: 80ch; }
.doc > .callout { max-width: 92ch; }
.doc { min-width: 0; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(24px, 4vw, 52px) clamp(20px, 4.4vw, 60px) 30px; }
.toc { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow-y: auto; font-size: 13.5px; padding-top: 6px; }
.toc-head { margin: 0 0 10px; font: 600 11.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.toc ul { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--hair); }
.toc a { display: block; padding: 5px 0 5px 14px; margin-inline-start: -1px; border-inline-start: 2px solid transparent; color: var(--muted); line-height: 1.35; }
.toc .toc-3 a { padding-inline-start: 26px; font-size: 13px; }
.toc a:hover { color: var(--text); }
.toc a.on { color: var(--blue); border-color: var(--blue); }

/* ---- The article ---- */
.crumb { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; font: 600 11.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.crumb span { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.doc h1, .doc h2, .doc h3, .doc h4 { font-family: var(--display); color: var(--text); position: relative; }
.doc h1 { font-size: clamp(32px, 4.4vw, 44px); line-height: 1.06; font-weight: 700; letter-spacing: -0.04em; margin: 0 0 14px; }
.doc .lede { font-size: 18.5px; line-height: 1.55; color: var(--muted); margin: 0 0 30px; max-width: 64ch; }
.doc h2 { font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.03em; margin: 52px 0 14px; padding-top: 26px; border-top: 1px solid var(--hair); }
.doc h3 { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; margin: 34px 0 10px; }
.doc h4 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; }
.doc h2 + h3 { margin-top: 18px; }
.anchor { position: absolute; inset-inline-start: -0.9em; padding-inline-end: 0.2em; color: var(--faint); opacity: 0; font-weight: 500; transition: opacity 0.15s; }
.doc h2:hover .anchor, .doc h3:hover .anchor, .doc h4:hover .anchor, .anchor:focus { opacity: 1; }
.doc h2 .anchor { top: 26px; }
.doc p, .doc ul, .doc ol { margin: 0 0 16px; }
.doc ul, .doc ol { padding-inline-start: 22px; }
.doc li { margin: 4px 0; }
.doc li::marker { color: var(--faint); }
.doc strong { font-weight: 600; }
.doc a:not(.btn):not(.anchor):not(.card) { color: var(--blue); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blue) 35%, transparent); text-underline-offset: 3px; }
.doc a:not(.btn):not(.anchor):not(.card):hover { text-decoration-color: var(--blue); }
.doc :not(pre) > code { font: 500 0.86em/1 var(--code); padding: 3px 6px; border-radius: 7px; background: var(--well); color: var(--text); box-shadow: inset 0 0 0 1px var(--hair); overflow-wrap: anywhere; }
.doc h2 code, .doc h3 code { font-size: 0.82em; }
.doc hr { border: 0; border-top: 1px solid var(--hair); margin: 36px 0; }
.doc blockquote { margin: 0 0 18px; padding: 2px 0 2px 18px; border-inline-start: 3px solid var(--hair); color: var(--muted); }

/* Endpoint headings: the method as a soft tinted badge */
.doc h3.endpoint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 44px; }
.doc h3.endpoint code { font: 500 16px/1.2 var(--code); padding: 0; background: none; box-shadow: none; }
.verb { font: 700 11.5px/1 var(--body); letter-spacing: 0.06em; padding: 6px 9px; border-radius: 8px; }
.verb-get { color: #0b8a4a; background: color-mix(in srgb, var(--mine) 15%, transparent); }
.verb-post { color: var(--blue); background: color-mix(in srgb, var(--blue) 13%, transparent); }
.verb-put, .verb-patch { color: #b45309; background: color-mix(in srgb, var(--strides) 15%, transparent); }
.verb-delete { color: #dc2626; background: rgba(220, 38, 38, 0.12); }
:root[data-theme="dark"] .verb-get { color: #4ade80; }
:root[data-theme="dark"] .verb-post { color: #7aa2ff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .verb-get { color: #4ade80; }
  :root:not([data-theme="light"]) .verb-post { color: #7aa2ff; }
}

/* Code: dark in both themes, as on the website */
.code { margin: 0 0 20px; border-radius: 18px; background: #0c0c11; box-shadow: inset 0 0 0 1px #202028; overflow: hidden; }
.code-bar { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 8px 0 16px; border-bottom: 1px solid #1d1d25; font: 600 12px/1 var(--body); color: #8b8e9c; }
.copy { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9px; color: #a3a6b2; font-size: 12px; font-weight: 600; transition: background-color 0.15s, color 0.15s; }
.copy:hover { background: #1b1b22; color: #fff; }
.copy svg.i { width: 14px; height: 14px; }
.copy.done { color: #4ade80; }
.code pre { margin: 0; padding: 16px 18px 18px; overflow-x: auto; font: 13.5px/1.75 var(--code); color: #e4e5ec; tab-size: 2; scrollbar-width: thin; }
.code code { font: inherit; }
.code .c { color: #6c7080; }
.code .k { color: #a78bfa; }
.code .s { color: #4ade80; }
.code .f { color: #7aa2ff; }
.code .n { color: #fbbf24; }
.code .p { color: #7dd3fc; }

/* Tables */
.table { margin: 0 0 22px; overflow-x: auto; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--hair); }
.doc table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.doc th { text-align: start; font: 600 12px/1.2 var(--body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: var(--well); padding: 11px 14px; }
.doc td { padding: 11px 14px; border-top: 1px solid var(--hair); vertical-align: top; }
.doc td:first-child { white-space: nowrap; }
.doc td code { white-space: nowrap; }

/* Callouts: a soft tint of one feature colour */
.callout { display: flex; gap: 14px; margin: 0 0 20px; padding: 16px 18px; border-radius: 18px; background: color-mix(in srgb, var(--c) 9%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }
.callout-note { --c: var(--blue); }
.callout-tip { --c: var(--mine); }
.callout-important { --c: var(--strides); }
.callout-test { --c: var(--tasks); }
.callout-notyet { --c: var(--spin); }
.callout-icon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }
.callout-icon svg.i { width: 16px; height: 16px; stroke-width: 2; }
.callout > div { min-width: 0; }
.callout-title { display: block; font-weight: 600; margin: 4px 0 2px; }
.callout p { margin: 0 0 8px; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }

/* Cards (the introduction) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 8px 0 26px; }
.card { display: block; padding: 18px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow 0.18s, background-color 0.18s; }
.card:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--blue)) 45%, var(--hair)); background: color-mix(in srgb, var(--c, var(--blue)) 5%, var(--card)); }
.card .ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; background: color-mix(in srgb, var(--c, var(--blue)) 14%, transparent); color: var(--c, var(--blue)); }
.card .ico svg.i { width: 19px; height: 19px; stroke-width: 1.9; }
.card b { display: block; font: 600 16px/1.3 var(--display); letter-spacing: -0.015em; margin-bottom: 4px; color: var(--text); }
.card span:not(.ico) { display: block; font-size: 14px; line-height: 1.5; color: var(--muted); }
.hero { margin: -6px 0 30px; padding: clamp(24px, 4vw, 40px); border-radius: 24px; background: var(--blue); color: #fff; }
.hero .label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font: 600 11.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
.hero .label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.hero h1 { color: #fff; margin: 0 0 12px; }
.hero h1 span { color: rgba(255, 255, 255, 0.62); }
.hero p { margin: 0 0 22px; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, 0.86); max-width: 58ch; }
.hero .btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--blue); color: #fff; font: 600 15px/1 var(--body); transition: background-color 0.18s; }
.btn:hover { background: var(--blue-press); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #ececf1; }
.btn-onblue { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.btn-onblue:hover { background: rgba(255, 255, 255, 0.2); }
.btn-line { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--hair); }
.btn-line:hover { background: var(--well); }
.flow { list-style: none; counter-reset: step; padding: 0 !important; display: grid; gap: 10px; margin: 0 0 24px !important; }
.flow li { counter-increment: step; position: relative; margin: 0; padding: 14px 16px 14px 56px; border-radius: 16px; background: var(--well); }
.flow li::before { content: counter(step); position: absolute; left: 14px; top: 13px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--body); color: var(--blue); background: var(--blue-soft); }
.flow li b { display: block; }
.flow li span { color: var(--muted); font-size: 15px; }

/* Prev and next, and the page's foot */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; }
.pager a { display: block; padding: 16px 18px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow 0.18s; }
.pager a:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.pager small { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.pager b { font-weight: 600; }
.pager .next { text-align: end; grid-column: 2; }
.doc-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--muted); }
.doc-foot a { margin-inline-start: auto; color: var(--muted) !important; text-decoration: none !important; }
.doc-foot a:hover { color: var(--text) !important; }
.missing { padding: 30px 0; }
.missing .label { font: 600 11.5px/1 var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.missing h1 { margin-top: 12px; }

/* ---- Search ---- */
.search { width: min(640px, calc(100% - 24px)); max-height: min(560px, calc(100vh - 120px)); margin: 90px auto auto; padding: 0; border: 0; border-radius: 24px; background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; }
.search[open] { display: flex; flex-direction: column; }
.search::backdrop { background: rgba(6, 6, 10, 0.32); }
.search-box { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 60px; border-bottom: 1px solid var(--hair); color: var(--muted); }
.search-box input { flex: 1; height: 100%; border: 0; outline: 0; background: none; color: var(--text); font: 500 16.5px/1 var(--body); }
.search-box input::-webkit-search-cancel-button { display: none; }
.results { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.results:empty { display: none; }
.results a { display: block; padding: 10px 12px; border-radius: 14px; }
.results a small { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.results a b { display: block; font-weight: 600; font-size: 15px; }
.results a span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.results a mark { background: color-mix(in srgb, var(--blue) 18%, transparent); color: inherit; border-radius: 3px; }
.results li[aria-selected="true"] a { background: color-mix(in srgb, var(--blue) 10%, var(--card)); }
.search-empty { margin: 0; padding: 22px; color: var(--muted); font-size: 14.5px; }
.results:not(:empty) + .search-empty { display: none; }

/* ---- Smaller screens ---- */
.scrim { position: fixed; inset: 0; z-index: 38; background: rgba(6, 6, 10, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
@media (max-width: 860px) {
  .tab, .shell { width: calc(100% - 32px); }
}
@media (max-width: 1180px) {
  .main { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 1100px) {
  .tab-links a:not(:last-child) { display: none; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); padding-top: 18px; }
  .menu-btn { display: grid; }
  .tab { padding-inline-start: 6px; gap: 6px; }
  .side { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); max-height: none; padding: 22px 18px; background: var(--bg); box-shadow: inset -1px 0 0 var(--hair); transform: translateX(-102%); transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
  body.menu-open .side { transform: none; }
  body.menu-open .scrim { opacity: 1; pointer-events: auto; }
  .search-btn { width: 40px; padding: 0; margin-inline-start: auto; justify-content: center; background: none; }
  .search-btn span, .search-btn kbd { display: none; }
  .search-btn svg.i { width: 19px; height: 19px; color: var(--text); }
  .tab-links { display: none; }
  .brand-sub { display: none; }
}
@media (max-width: 560px) {
  .tab { width: 100%; border-radius: 0 0 22px 22px; }
  .shell { width: calc(100% - 16px); padding-top: 12px; }
  .doc { border-radius: 22px; padding-inline: 16px; }
  .hero { margin-inline: -4px; padding: 22px 18px; }
  .code { margin-inline: -8px; border-radius: 14px; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { grid-column: auto; }
  .anchor { display: none; }
  .search { margin-top: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- Copy page: the page as Markdown, for AI tools ---- */
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.title-row h1 { flex: 1; min-width: 0; }
.home-actions { justify-content: flex-end; margin: -10px 0 14px; }
.page-actions { position: relative; flex: none; margin-top: 6px; }
.page-actions summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 12px; font: 600 13.5px/1 var(--body); color: var(--text); box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer; user-select: none; transition: background-color 0.15s; }
.page-actions summary::-webkit-details-marker { display: none; }
.page-actions summary:hover, .page-actions[open] summary { background: var(--well); }
.page-actions summary svg.i { width: 15px; height: 15px; }
.page-actions summary .chev { width: 12px; height: 12px; color: var(--muted); transform: rotate(90deg); transition: transform 0.15s; }
.page-actions[open] summary .chev { transform: rotate(-90deg); }
.page-actions .menu { position: absolute; z-index: 20; right: 0; top: calc(100% + 6px); width: 250px; padding: 6px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--hair); }
.page-actions .menu a, .page-actions .menu button { display: block; width: 100%; text-align: start; padding: 9px 10px; border-radius: 10px; text-decoration: none !important; color: var(--text) !important; }
.page-actions .menu a:hover, .page-actions .menu button:hover { background: var(--well); }
.page-actions .menu b { display: block; font-size: 14px; font-weight: 600; }
.page-actions .menu small { display: block; font-size: 12.5px; color: var(--muted); }
.page-actions .menu .done b { color: #16a34a; }
@media (max-width: 560px) {
  .title-row { flex-direction: column; gap: 4px; }
  .page-actions { margin: 0 0 14px; }
  .page-actions .menu { left: 0; right: auto; }
}