/* Evlet Docs styles.
   The font faces and the three token blocks below are copied unchanged from the Evlet app UI
   (frontend/src/evlet/ui/styles.css in Evlet 0.4.2), so the docs share the app's palette, fonts and
   4px radius in light and dark. Dark applies under the system setting unless the page says light,
   and again under [data-theme="dark"]. Keep the two dark blocks identical.
   Fonts: SIL OFL 1.1, licence files beside them in assets/fonts, copied from Evlet's frontend/fonts. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/ibm-plex-sans-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-ext-400-italic.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/JetBrainsMono-Regular.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/JetBrainsMono-Medium.woff2") format("woff2")}
:root{
  --bg:#ffffff; --bg-subtle:#f8f9fb; --bg-muted:#f2f4f7; --side-bg:#f4f5f8; --page-bg:#f4f5f8; --surface:#ffffff; --overlay:rgba(16,20,30,.32);
  --border:#e8eaef; --border-strong:#d8dce3; --divider:#eef0f3;
  --fg:#151821; --fg-2:#4b5263; --fg-3:#676d7c; --fg-4:#868d9c;
  --accent:#2f5be8; --accent-hover:#244ed4; --accent-fg:#ffffff; --accent-soft:#eef2fe; --accent-ring:rgba(47,91,232,.22);
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --t-blue:#3365e6;  --t-blue-bg:#eef2fd;
  --t-green:#128047; --t-green-bg:#e9f7ef;
  --t-amber:#9e6308; --t-amber-bg:#fdf4e3;
  --t-rose:#cf2d47;  --t-rose-bg:#fdeef0;
  --t-violet:#7553d9;--t-violet-bg:#f3effd;
  --t-teal:#0c7c78;  --t-teal-bg:#e6f6f5;
  --t-slate:#5f6778; --t-slate-bg:#f0f2f5;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow-md:0 1px 2px rgba(16,24,40,.04),0 4px 12px rgba(16,24,40,.06);
  --shadow-lg:0 2px 6px rgba(16,24,40,.06),0 18px 48px rgba(16,24,40,.16);
  --font:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-sm:4px; --r:4px; --r-lg:4px;
  --sidebar-w:248px; --topbar-h:52px; --doc-side-w:370px;
  /* The list and record pages' side padding, and the gap above and below a list's measure cards (their own gap). */
  --page-gutter:12px; --page-gap:8px;
  --accent-solid:#2f5be8; --accent-solid-hover:#244ed4; --on-tint:#ffffff; --knob:#ffffff;
  --inverse-bg:#151821; --inverse-fg:#ffffff; --inverse-ok:#4ade80; --inverse-hover:rgba(127,127,127,.25);
  /* The two themes' grounds, cards and lines in every theme, for the theme pictures in Settings. */
  --swatch-light:#f4f5f8; --swatch-light-card:#ffffff; --swatch-light-line:#d8dce3; --swatch-dark:#14171c; --swatch-dark-card:#1a1e25; --swatch-dark-line:#323844;
  --shadow-edge:rgba(16,24,40,.035);
  /* The sidebar's active section and shortcut: the primary blue for text and icons, and a light tint of it
     (about 9%) behind the active shortcut. Text on the tint is 4.9:1 light and 4.6:1 dark. */
  --nav-on-fg:#2f5be8; --nav-on-bg:#ecf0fd;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1115; --bg-subtle:#13161b; --bg-muted:#1a1e25; --side-bg:#14171c; --page-bg:#0f1115; --surface:#16191f; --overlay:rgba(0,0,0,.55);
  --border:#252a33; --border-strong:#323844; --divider:#1e222a;
  --fg:#e8eaf0; --fg-2:#b2b8c5; --fg-3:#868d9d; --fg-4:#626978;
  --accent:#6488f6; --accent-hover:#7593f7; --accent-fg:#ffffff; --accent-soft:#1b2440; --accent-ring:rgba(91,128,245,.3);
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --t-blue:#7a9cf7; --t-blue-bg:#1a2340; --t-green:#43c27f; --t-green-bg:#13281d; --t-amber:#e2a53e; --t-amber-bg:#2a2112;
  --t-rose:#f07b8d; --t-rose-bg:#2e1820; --t-violet:#a48df0; --t-violet-bg:#221c38; --t-teal:#3fc2bc; --t-teal-bg:#10292a;
  --t-slate:#9aa1b0; --t-slate-bg:#1e222a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 1px 2px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.25); --shadow-lg:0 2px 6px rgba(0,0,0,.3),0 18px 48px rgba(0,0,0,.5);
  --accent-solid:#4167e6; --accent-solid-hover:#3a60de; --on-tint:#0f1115; --knob:#ffffff;
  --inverse-bg:#e8eaf0; --inverse-fg:#0f1115; --inverse-ok:#0e7340; --inverse-hover:rgba(127,127,127,.25);
  --shadow-edge:rgba(0,0,0,.22);
  --nav-on-fg:#6488f6; --nav-on-bg:#1f2739;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1115; --bg-subtle:#13161b; --bg-muted:#1a1e25; --side-bg:#14171c; --page-bg:#0f1115; --surface:#16191f; --overlay:rgba(0,0,0,.55);
  --border:#252a33; --border-strong:#323844; --divider:#1e222a;
  --fg:#e8eaf0; --fg-2:#b2b8c5; --fg-3:#868d9d; --fg-4:#626978;
  --accent:#6488f6; --accent-hover:#7593f7; --accent-fg:#ffffff; --accent-soft:#1b2440; --accent-ring:rgba(91,128,245,.3);
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --t-blue:#7a9cf7; --t-blue-bg:#1a2340; --t-green:#43c27f; --t-green-bg:#13281d; --t-amber:#e2a53e; --t-amber-bg:#2a2112;
  --t-rose:#f07b8d; --t-rose-bg:#2e1820; --t-violet:#a48df0; --t-violet-bg:#221c38; --t-teal:#3fc2bc; --t-teal-bg:#10292a;
  --t-slate:#9aa1b0; --t-slate-bg:#1e222a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 1px 2px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.25); --shadow-lg:0 2px 6px rgba(0,0,0,.3),0 18px 48px rgba(0,0,0,.5);
  --accent-solid:#4167e6; --accent-solid-hover:#3a60de; --on-tint:#0f1115; --knob:#ffffff;
  --inverse-bg:#e8eaf0; --inverse-fg:#0f1115; --inverse-ok:#0e7340; --inverse-hover:rgba(127,127,127,.25);
  --shadow-edge:rgba(0,0,0,.22);
  --nav-on-fg:#6488f6; --nav-on-bg:#1f2739;
  color-scheme:dark}
/* ---------- Docs components. Tokens only: no colour literals below. ---------- */
*{box-sizing:border-box}
html{scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
img{max-width:100%}
.skip{position:absolute;left:-9999px;top:8px;z-index:60;background:var(--surface);color:var(--fg);padding:6px 10px;border:1px solid var(--border-strong);border-radius:var(--r)}
.skip:focus{left:8px}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* top bar */
.topbar{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--border)}
.topbar-inner{display:flex;align-items:center;gap:16px;height:var(--topbar-h);max-width:1440px;margin:0 auto;padding:0 20px}
.brand{display:flex;align-items:flex-end;gap:6px;flex:none}
.brand-logo{display:block;text-decoration:none}
.brand-logo:hover{text-decoration:none}
/* The release tag beside the logo, as on evlet.io. version.js fills it from the frontend's version.json;
   it stays hidden until then. margin-bottom puts it on the wordmark baseline of the 24px logo. */
.logo-tag{font-family:var(--mono);font-size:10.5px;font-weight:500;line-height:1;letter-spacing:0;color:var(--fg-3);white-space:nowrap;margin-bottom:3px}
.logo-tag:empty{display:none}
.logo-tag-stage{color:var(--accent)}
.logo{height:24px;width:auto;display:block}
.logo-dark{display:none}
.brand-docs{align-self:center;margin-left:4px;font-size:14px;font-weight:600;color:var(--fg-2);padding-left:10px;border-left:1px solid var(--border-strong);line-height:20px}
.top-nav{display:flex;gap:4px;margin-left:12px}
.top-nav a{color:var(--fg-2);font-weight:500;font-size:14px;padding:6px 10px;border-radius:var(--r)}
.top-nav a:hover{background:var(--bg-muted);color:var(--fg);text-decoration:none}
.top-nav a[aria-current="page"]{color:var(--nav-on-fg);background:var(--nav-on-bg)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.top-link{color:var(--fg-2);font-size:14px;font-weight:500;padding:6px 10px;border-radius:var(--r)}
.top-link:hover{background:var(--bg-muted);color:var(--fg);text-decoration:none}
.icon-btn{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;color:var(--fg-3);flex:none}
.icon-btn:hover{background:var(--bg-muted);color:var(--fg)}
.theme-toggle .moon{display:none}
.menu-toggle{display:none;margin-left:-8px}

/* dark: swap the logo and the toggle icon, following the same rules as the tokens */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-light{display:none}
  :root:not([data-theme="light"]) .logo-dark{display:block}
  :root:not([data-theme="light"]) .theme-toggle .sun{display:none}
  :root:not([data-theme="light"]) .theme-toggle .moon{display:block}}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}
:root[data-theme="dark"] .theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:block}

/* layout */
.layout{flex:1;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);max-width:1440px;width:100%;margin:0 auto}
.sidebar{position:sticky;top:var(--topbar-h);align-self:start;height:calc(100vh - var(--topbar-h));overflow-y:auto;
  padding:20px 12px 32px;border-right:1px solid var(--border);background:var(--bg)}
.side-label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3);padding:0 10px 6px}
.side-label.later{margin-top:24px}
.side-note{font-size:13px;color:var(--fg-3);margin:0;padding:0 10px;line-height:1.5}
.side-list,.side-sub{list-style:none;margin:0;padding:0}
.side-list a{display:block;padding:5px 10px;border-radius:var(--r);color:var(--fg-2);font-size:14px;line-height:1.45}
.side-list a:hover{background:var(--bg-muted);color:var(--fg);text-decoration:none}
.side-list a.active{background:var(--nav-on-bg);color:var(--nav-on-fg);font-weight:600}
.side-sub{margin:2px 0 6px 10px;padding-left:8px;border-left:1px solid var(--border)}
.side-sub a{font-size:13.5px}
.scrim{display:none}

.main{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:40px;padding:32px 40px 56px;align-items:start}
.article{min-width:0;max-width:760px}
.toc{position:sticky;top:calc(var(--topbar-h) + 28px);font-size:13px;max-height:calc(100vh - var(--topbar-h) - 56px);overflow-y:auto}
.toc-label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3);margin-bottom:8px}
.toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--border)}
.toc li a{display:block;padding:3px 0 3px 12px;margin-left:-1px;border-left:2px solid transparent;color:var(--fg-3);line-height:1.4}
.toc li.l3 a{padding-left:24px}
.toc li a:hover{color:var(--fg);text-decoration:none}
.toc li a.current{color:var(--accent);border-left-color:var(--accent)}

/* article text */
.crumbs{font-size:13px;color:var(--fg-3);display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.crumbs a{color:var(--fg-3)}
.article h1,.plain h1{font-size:30px;line-height:1.25;letter-spacing:-.01em;margin:0 0 14px;font-weight:600}
.article h2{font-size:21px;line-height:1.3;margin:40px 0 10px;font-weight:600;padding-top:18px;border-top:1px solid var(--divider)}
.article h3{font-size:17px;line-height:1.35;margin:28px 0 8px;font-weight:600}
.article h4{font-size:15px;margin:22px 0 6px;font-weight:600}
.article h2,.article h3,.article h4{position:relative}
.anchor{position:absolute;left:-20px;color:var(--fg-4);opacity:0;font-weight:500;padding-right:6px}
h2:hover .anchor,h3:hover .anchor,h4:hover .anchor,.anchor:focus{opacity:1;text-decoration:none}
.article p,.plain p{margin:0 0 14px}
.article ul,.article ol{margin:0 0 16px;padding-left:22px}
.article li{margin:4px 0}
.lead{font-size:17px;color:var(--fg-2)}
.article p.lead{margin-bottom:22px}
code,pre{font-variant-ligatures:none}
code{font-family:var(--mono);font-size:.86em;background:var(--bg-muted);border:1px solid var(--border);border-radius:var(--r);padding:1px 5px;color:var(--fg)}
a code{color:var(--accent)}
strong{font-weight:600}

/* code blocks: flat, 1px border, static highlighting */
.code{margin:0 0 18px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg-subtle);overflow:hidden}
.code-head{display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 12px;height:32px;border-bottom:1px solid var(--border);
  font-size:12px;color:var(--fg-3);font-weight:500;background:var(--bg-muted)}
.copy{font-size:12px;font-weight:500;color:var(--fg-2);padding:3px 8px;border-radius:var(--r);border:1px solid transparent}
.copy:hover{background:var(--surface);border-color:var(--border)}
.code pre{margin:0;padding:12px 14px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.6;tab-size:4}
.code pre code{background:none;border:0;padding:0;font-size:inherit;color:var(--fg)}
.code .k{color:var(--t-violet)}
.code .s{color:var(--t-green)}
.code .c{color:var(--fg-3);font-style:italic}
.code .n{color:var(--t-amber)}
.code .d{color:var(--t-teal)}
.code .t{color:var(--t-blue)}
.code .f{color:var(--accent)}
.code .o{color:var(--t-teal)}
.code[data-lang="text"] pre code{color:var(--fg-2)}

/* tables and notes */
.table-wrap{overflow-x:auto;margin:0 0 18px;border:1px solid var(--border);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--divider);vertical-align:top}
th{background:var(--bg-subtle);font-weight:600;color:var(--fg-2);font-size:13px}
tr:last-child td{border-bottom:0}
.callout{margin:0 0 18px;padding:12px 14px;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r);background:var(--accent-soft)}
.callout.warning{border-left-color:var(--t-amber);background:var(--t-amber-bg)}
.callout.tip{border-left-color:var(--t-green);background:var(--t-green-bg)}
.callout p:last-child{margin-bottom:0}

/* previous and next */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:44px;padding-top:20px;border-top:1px solid var(--divider)}
.pager a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r);color:var(--fg);font-weight:600;font-size:14.5px}
.pager a:hover{border-color:var(--accent);text-decoration:none}
.pager a span{font-size:12px;font-weight:500;color:var(--fg-3)}
.pager-next{text-align:right;grid-column:2}

/* plain pages: home and 404 */
.plain{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:56px 24px 64px}
.home-hero{max-width:680px;margin-bottom:36px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.plain h1{font-size:36px}
.plain .lead{margin-bottom:0}
.section-label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3);margin:0 0 12px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:40px}
.card{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--fg)}
a.card:hover{border-color:var(--accent);text-decoration:none}
.card h2,.card h3{font-size:16px;margin:0;font-weight:600}
.card p{margin:0;color:var(--fg-2);font-size:14px}
.card .more{margin-top:auto;padding-top:8px;font-size:13.5px;font-weight:500;color:var(--accent)}
.card.feature{grid-column:span 2}
.card.soon{background:var(--bg-subtle);border-style:dashed}
.card.soon .more{color:var(--fg-3)}
.tag{align-self:flex-start;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:var(--r);background:var(--t-slate-bg);color:var(--t-slate)}
.tag.live{background:var(--t-green-bg);color:var(--t-green)}
.links{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
.links a{font-weight:500}
.links span{display:block;color:var(--fg-3);font-size:13.5px}
.notfound{max-width:560px;padding-top:40px}

.footer{border-top:1px solid var(--border);background:var(--bg-subtle);font-size:13px;color:var(--fg-3)}
.footer-inner{max-width:1440px;margin:0 auto;padding:18px 20px;display:flex;gap:8px 24px;flex-wrap:wrap}
.footer a{color:var(--fg-2);margin-left:auto}

/* narrower screens: the table of contents goes first, then the sidebar becomes a drawer */
@media (max-width:1180px){
  .main{grid-template-columns:minmax(0,1fr);padding:28px 32px 48px}
  .toc{display:none}
}
@media (max-width:860px){
  .menu-toggle{display:grid}
  .top-nav{display:none}
  .layout{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;left:0;top:var(--topbar-h);bottom:0;height:calc(100vh - var(--topbar-h));height:calc(100dvh - var(--topbar-h));width:min(300px,86vw);z-index:35;
    background:var(--surface);transform:translateX(-102%);visibility:hidden;transition:transform .18s ease,visibility .18s}
  body.menu-open .sidebar{transform:none;visibility:visible;box-shadow:var(--shadow-lg)}
  body.menu-open .scrim{display:block;position:fixed;inset:var(--topbar-h) 0 0 0;background:var(--overlay);z-index:30}
  body.menu-open{overflow:hidden}
  .main{padding:22px 16px 40px}
  .article h1,.plain h1{font-size:26px}
  .anchor{display:none}
  .code pre{font-size:12.5px;padding:10px 12px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .card.feature{grid-column:auto}
  .links{grid-template-columns:minmax(0,1fr)}
  .plain{padding:32px 16px 48px}
  .topbar-inner{padding:0 12px;gap:10px}
  .top-link{display:none}
  .pager{grid-template-columns:minmax(0,1fr)}
  .pager-next{grid-column:1}
}
@media (prefers-reduced-motion: reduce){.sidebar{transition:none}}