/* Orbital Frontier — player docs stylesheet.
   The tokens and every component are the owner's docs design (the
   player-docs skill, reference/design-guidelines.md) turned into classes
   so a page carries content and nothing else. Values are the design's
   own; change them here and every page follows. */

:root{
  /* base palette, sampled from the "LOOK AT ME!" key art */
  --of-void-900:#0B0616; --of-void-800:#150A2B; --of-void-700:#1E0F3D;
  --of-void-600:#2A1552; --of-void-500:#3A1D6E;
  --of-nebula-500:#6B2FB3; --of-nebula-400:#8B45D6;
  --of-cyan-500:#1FA9E0; --of-cyan-400:#35C6F4; --of-cyan-300:#7BE0FF;
  --of-mint-500:#2FCBA6; --of-mint-400:#5BE9C7; --of-mint-300:#A8F6E3;
  --of-slime-500:#8FD421; --of-slime-400:#B6F24A; --of-slime-300:#D8FB8F;
  --of-amber-600:#FF6A1F; --of-amber-500:#FF9B21; --of-amber-400:#FFB84D; --of-bolt-500:#FFD531;
  --of-alarm-600:#C7261A; --of-alarm-500:#F0402F; --of-magenta-500:#FF3DA5;
  --of-paper:#FFF8E7; --of-chalk:#E6DCFF; --of-smoke:#A796CE; --of-ash:#6E5C96; --of-ink:#0B0616;

  /* semantic surfaces */
  --surface-space:var(--of-void-900); --surface-page:var(--of-void-800);
  --surface-panel:var(--of-void-700); --surface-card:var(--of-void-600);
  --surface-raised:var(--of-void-500);
  --surface-holo:color-mix(in srgb, var(--of-mint-400) 14%, transparent);
  --surface-inset:rgba(11,6,22,.55); --surface-paper:var(--of-paper);

  /* semantic text */
  --text-display:var(--of-paper); --text-body:var(--of-chalk);
  --text-muted:var(--of-smoke); --text-faint:var(--of-ash);
  --text-on-accent:var(--of-ink); --text-link:var(--of-mint-400); --text-link-hover:var(--of-slime-400);

  /* semantic accents */
  --accent-primary:var(--of-slime-400); --accent-primary-ink:var(--of-ink);
  --accent-secondary:var(--of-cyan-400); --accent-holo:var(--of-mint-400);
  --accent-warm:var(--of-amber-500); --accent-hot:var(--of-amber-600); --accent-pop:var(--of-magenta-500);

  /* status */
  --status-ok:var(--of-mint-400); --status-info:var(--of-cyan-400);
  --status-warn:var(--of-bolt-500); --status-danger:var(--of-alarm-500);

  /* lines */
  --line-ink:var(--of-ink); --line-hair:rgba(230,220,255,.16);
  --line-holo:color-mix(in srgb, var(--of-mint-400) 55%, transparent);

  /* signature gradients */
  --grad-sky:linear-gradient(180deg,#1E0F3D 0%,#4A1E6B 45%,#B24A6B 72%,#FF9B21 100%);
  --grad-deck:linear-gradient(180deg,#FF9B21 0%,#FF6A1F 60%,#C7261A 100%);
  --grad-title:linear-gradient(180deg,#D8FB8F 0%,#B6F24A 28%,#5BE9C7 62%,#35C6F4 100%);
  --grad-holo:linear-gradient(180deg,color-mix(in srgb,var(--of-mint-400) 22%,transparent) 0%,color-mix(in srgb,var(--of-mint-400) 4%,transparent) 100%);

  /* type */
  --font-display:"Titan One",system-ui,sans-serif;
  --font-heading:"Archivo Black",system-ui,sans-serif;
  --font-body:"Space Grotesk",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --tracking-caps:.14em; --tracking-mono:.06em;

  /* radii: chunky toy-plastic, never hairline-rounded */
  --radius-xs:4px; --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;

  /* the ink outline is the brand's load-bearing device */
  --border-ink:3px solid var(--line-ink); --border-hair:1px solid var(--line-hair);
  --border-holo:1.5px solid var(--line-holo);

  /* hard cartoon drop shadow: offset, no blur */
  --shadow-sticker:4px 5px 0 var(--of-ink); --shadow-sticker-lg:7px 9px 0 var(--of-ink);
  --shadow-pressed:1px 2px 0 var(--of-ink);
  --shadow-panel:0 18px 40px -12px rgba(11,6,22,.85);
  --shadow-inset-well:inset 0 3px 0 rgba(11,6,22,.55);
  --glow-holo:0 0 14px color-mix(in srgb,var(--of-mint-400) 55%,transparent),0 0 44px color-mix(in srgb,var(--of-mint-500) 30%,transparent);
  --backdrop-blur:blur(6px) saturate(1.1);
  --scanlines:repeating-linear-gradient(0deg,rgba(91,233,199,.10) 0 1px,transparent 1px 4px);

  --dur-fast:140ms; --dur-base:220ms;
  --ease-out:cubic-bezier(.22,.9,.28,1);
  --tap-min:44px;
}
@media (prefers-reduced-motion:reduce){ :root{ --dur-fast:0ms; --dur-base:0ms; } }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--surface-page); color:var(--text-body); font-family:var(--font-body); min-height:100vh; }
a{ color:var(--text-link); text-decoration:none; }
a:hover{ color:var(--text-link-hover); }
pre{ margin:0; overflow:auto; }
code{ font-family:var(--font-mono); }
img{ max-width:100%; display:block; }

/* ---- icons (masks, so they take the text colour) ---- */
.ico-search,.ico-image{ display:inline-block; flex:0 0 auto; background:var(--text-faint);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; }
.ico-search{ width:16px; height:16px;
  -webkit-mask-image: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.5' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='16.5' y1='16.5' x2='21' y2='21'/></svg>");
  mask-image: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.5' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='16.5' y1='16.5' x2='21' y2='21'/></svg>"); }
.ico-image{ width:34px; height:34px; background:var(--of-ash);
  -webkit-mask-image: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'><rect x='3' y='4' width='18' height='16' rx='2'/><circle cx='9' cy='10' r='2'/><path d='M21 16l-5-5-8 8'/></svg>");
  mask-image: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'><rect x='3' y='4' width='18' height='16' rx='2'/><circle cx='9' cy='10' r='2'/><path d='M21 16l-5-5-8 8'/></svg>"); }

/* ---- header ---- */
.of-header{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:14px 28px; background:rgba(11,6,22,.88); backdrop-filter:var(--backdrop-blur); -webkit-backdrop-filter:var(--backdrop-blur);
  border-bottom:3px solid var(--line-ink); }
.of-logo{ font:20px/1 var(--font-display); color:var(--of-paper); text-shadow:3px 3px 0 var(--of-ink); white-space:nowrap; }
.of-logo:hover{ color:var(--of-paper); }
.of-logo span{ color:var(--accent-primary); }
.of-tag{ font:12px/1 var(--font-heading); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-muted); }
.of-search{ flex:1; min-width:180px; max-width:340px; position:relative; }
.of-search label{ display:block; }
.of-search .well{ display:flex; align-items:center; gap:10px; padding:0 14px; min-height:46px; background:var(--surface-inset);
  border-radius:var(--radius-md); border:3px solid var(--line-ink); box-shadow:var(--shadow-inset-well); }
.of-search input{ flex:1; min-width:0; background:transparent; border:0; outline:none; color:var(--text-display); font:14px/1.2 var(--font-body); }
.of-search input::placeholder{ color:var(--text-faint); }
.of-results{ position:absolute; left:0; right:0; top:calc(100% + 8px); display:none; max-height:60vh; overflow:auto;
  background:var(--surface-panel); border:3px solid var(--line-ink); border-radius:var(--radius-md); box-shadow:var(--shadow-sticker-lg); z-index:50; }
.of-results.open{ display:block; }
.of-results a{ display:block; padding:10px 14px; border-bottom:1px solid var(--line-hair); color:var(--text-body); }
.of-results a:last-child{ border-bottom:0; }
.of-results a:hover, .of-results a.sel{ background:var(--surface-holo); color:var(--accent-holo); }
.of-results .r-title{ font:14px/1.3 var(--font-body); color:var(--text-display); }
.of-results .r-where{ font:11px/1.6 var(--font-mono); letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--text-faint); }
.of-results .r-snip{ font:12px/1.4 var(--font-body); color:var(--text-muted); margin-top:2px; }
.of-results .r-none{ padding:12px 14px; font:12px/1.4 var(--font-mono); letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--text-faint); }
.of-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--radius-pill); border:2px solid var(--line-hair);
  background:var(--surface-raised); color:var(--text-body); font:11px/1 var(--font-heading); letter-spacing:var(--tracking-caps); text-transform:uppercase; }
.of-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:7px 14px; min-height:34px; border-radius:var(--radius-sm);
  border:3px solid var(--line-hair); background:transparent; color:var(--text-body); font:12px/1 var(--font-heading); letter-spacing:.01em; text-transform:uppercase; cursor:pointer; }
.of-btn:hover{ color:var(--text-display); border-color:var(--text-muted); }
.of-menu{ display:none; }

/* ---- layout ---- */
.of-wrap{ display:flex; gap:32px; flex-wrap:wrap; align-items:flex-start; max-width:1280px; margin:0 auto; padding:32px 28px 72px; }
.of-side{ flex:1 1 220px; min-width:200px; max-width:260px; position:sticky; top:96px; }
.of-side .nav-h{ font:11px/1 var(--font-heading); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-faint); margin-bottom:12px; }
.of-side .nav-list{ display:grid; gap:2px; margin-bottom:24px; }
.of-side .nav-list a{ padding:8px 12px; border-radius:var(--radius-sm); border:2px solid transparent; font:14px/1.3 var(--font-body); color:var(--text-body); }
.of-side .nav-list a:hover{ color:var(--text-display); border-color:var(--line-hair); }
.of-side .nav-list a.active{ background:var(--surface-holo); border-color:var(--line-holo); color:var(--accent-holo); }
.doc{ flex:6 1 520px; min-width:0; max-width:760px; }
.of-toc{ flex:2 1 180px; min-width:170px; max-width:220px; position:sticky; top:96px; }
.of-toc .toc-h{ font:11px/1 var(--font-heading); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-faint); margin-bottom:12px; }
.of-toc .toc-list{ display:grid; gap:9px; padding-left:12px; border-left:3px solid var(--line-hair); }
.of-toc .toc-list a{ font:13px/1.4 var(--font-body); color:var(--text-muted); }
.of-toc .toc-list a.active, .of-toc .toc-list a:hover{ color:var(--accent-holo); }
.of-toc .aside{ margin-top:22px; }

/* ---- article ---- */
.doc .crumb{ font:11px/1.6 var(--font-mono); letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--text-faint); }
.doc .crumb a{ color:var(--text-faint); }
.doc .crumb a:hover{ color:var(--accent-holo); }
.doc h1{ margin:10px 0 0; font:clamp(32px,5vw,44px)/1.05 var(--font-heading); text-transform:uppercase; color:var(--text-display); }
.doc .lede{ margin:16px 0 0; font:19px/1.55 var(--font-body); color:var(--text-body); text-wrap:pretty; }
.doc .meta{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin:20px 0 0; padding:14px 0; border-top:1px solid var(--line-hair); border-bottom:1px solid var(--line-hair);
  font:11px/1.6 var(--font-mono); letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--text-faint); }
.doc h2{ margin:36px 0 0; font:26px/1.15 var(--font-heading); text-transform:uppercase; color:var(--text-display); scroll-margin-top:96px; }
.doc h3{ margin:26px 0 0; font:17px/1.2 var(--font-heading); text-transform:uppercase; color:var(--text-display); scroll-margin-top:96px; }
.doc p{ margin:14px 0 0; font:16px/1.6 var(--font-body); color:var(--text-body); text-wrap:pretty; }
.doc p strong, .doc li strong{ color:var(--text-display); }
.doc ul{ margin:14px 0 0; padding-left:22px; font:16px/1.6 var(--font-body); }
.doc ul li{ margin:6px 0 0; }
.doc kbd, .doc .ui{ display:inline-block; padding:1px 7px; border-radius:var(--radius-xs); border:2px solid var(--line-ink); background:var(--surface-raised);
  color:var(--text-display); font:13px/1.5 var(--font-heading); letter-spacing:.01em; box-shadow:2px 2px 0 var(--of-ink); vertical-align:baseline; white-space:nowrap; }
.doc .fig-num{ font-family:var(--font-mono); color:var(--of-mint-300); }

/* callouts */
.doc .note, .doc .careful, .doc .warn{ display:flex; gap:14px; align-items:flex-start; margin:20px 0 0; padding:16px 18px; border-radius:var(--radius-md); }
.doc .note{ background:var(--surface-holo); border:1.5px solid var(--line-holo); border-left:8px solid var(--accent-holo); }
.doc .careful{ margin-top:22px; background:rgba(240,64,47,.12); border:3px solid var(--status-danger); }
.doc .warn{ margin-top:22px; background:rgba(255,213,49,.10); border:3px solid var(--status-warn); }
.doc .note > div, .doc .careful > div, .doc .warn > div{ min-width:0; }
.doc .note .k, .doc .careful .k, .doc .warn .k{ font:12px/1 var(--font-heading); letter-spacing:var(--tracking-caps); text-transform:uppercase; }
.doc .note .k{ color:var(--accent-holo); }
.doc .careful .k{ color:var(--status-danger); }
.doc .warn .k{ color:var(--status-warn); }
.doc .note .b, .doc .careful .b, .doc .warn .b{ margin-top:8px; font:15px/1.55 var(--font-body); color:var(--text-body); }
.doc .careful code, .doc .note code{ font-size:13px; color:var(--of-mint-300); }

/* numbered steps */
.doc ol.steps{ margin:16px 0 0; padding:0; list-style:none; display:grid; gap:12px; counter-reset:step; }
.doc ol.steps li{ display:flex; gap:14px; align-items:flex-start; padding:14px 16px; background:var(--surface-card); border:3px solid var(--line-ink);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sticker); counter-increment:step; }
.doc ol.steps li::before{ content:counter(step); flex:0 0 auto; width:32px; height:32px; border-radius:var(--radius-sm); border:3px solid var(--line-ink);
  background:var(--accent-primary); color:var(--of-ink); font:15px/26px var(--font-heading); text-align:center; }
.doc ol.steps li > div{ min-width:0; font:15px/1.55 var(--font-body); }
.doc ol.steps li > div p{ margin:6px 0 0; font:15px/1.55 var(--font-body); }
.doc ol.steps li .figure{ margin-top:12px; }

/* tables */
.doc .table-wrap{ margin:18px 0 0; border:3px solid var(--line-ink); border-radius:var(--radius-md); overflow:auto; }
.doc table{ width:100%; border-collapse:collapse; font:14px/1.5 var(--font-body); }
.doc thead tr{ background:rgba(11,6,22,.45); }
.doc th{ text-align:left; padding:12px 16px; font:11px/1 var(--font-heading); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-muted); border-bottom:3px solid var(--line-ink); white-space:nowrap; }
.doc td{ padding:12px 16px; border-bottom:1px solid var(--line-hair); vertical-align:top; }
.doc tr:last-child td{ border-bottom:0; }
.doc td.k{ color:var(--text-display); }
.doc td.m{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; color:var(--text-muted); }
.doc td.n{ font-family:var(--font-mono); font-size:13px; color:var(--of-mint-300); white-space:nowrap; }

/* code well */
.doc .well{ margin:18px 0 0; border:3px solid var(--line-ink); border-radius:var(--radius-md); overflow:hidden; background:var(--surface-inset); box-shadow:var(--shadow-inset-well); }
.doc .well .bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line-hair);
  font:11px/1 var(--font-mono); letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--text-faint); }
.doc .well pre{ padding:16px; font:13px/1.7 var(--font-mono); color:var(--of-mint-300); }

/* figures: a harness screenshot (phone-shaped) or a diagram */
.doc .figure{ margin:18px 0 0; border:3px solid var(--line-ink); border-radius:var(--radius-md); overflow:hidden; background:var(--surface-inset); }
.doc .figure .slot{ width:100%; height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:var(--surface-inset); background-image:var(--scanlines); }
.doc .figure .slot span{ font:12px/1.4 var(--font-mono); letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--text-faint); }
.doc .figure.phone{ display:flex; flex-direction:column; align-items:center; background:var(--surface-inset); background-image:var(--scanlines); }
.doc .figure.phone img{ width:min(100%, 300px); height:auto; }
.doc .figure figcaption{ width:100%; padding:10px 14px; border-top:1px solid var(--line-hair); font:12px/1.5 var(--font-mono); letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--text-faint); background:var(--surface-inset); }
.doc .figures{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:18px 0 0; }
.doc .figures .figure{ margin:0; }

/* reference entries and glossary */
.doc .entry{ margin:24px 0 0; padding:18px; background:var(--surface-card); border:3px solid var(--line-ink); border-radius:var(--radius-md); box-shadow:var(--shadow-sticker); }
.doc .entry::after{ content:""; display:block; clear:both; }
.doc .entry .figure.part{ float:right; width:140px; margin:0 0 12px 16px; border-width:2px; }
.doc .entry .figure.part img{ width:100%; height:auto; }
@media (max-width:520px){ .doc .entry .figure.part{ width:110px; } }
.doc .entry h3{ margin:0; }
.doc .entry .k-line{ margin-top:6px; font:11px/1.6 var(--font-mono); letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--text-faint); }
.doc .entry p{ font-size:15px; }
.doc .entry .table-wrap{ margin-top:12px; }
.doc dl{ margin:16px 0 0; }
.doc dt{ margin-top:16px; font:15px/1.3 var(--font-heading); text-transform:uppercase; color:var(--text-display); }
.doc dd{ margin:6px 0 0; font:15px/1.55 var(--font-body); color:var(--text-body); }

/* FAQ */
.doc .qa{ margin:20px 0 0; padding:16px 18px; background:var(--surface-card); border:3px solid var(--line-ink); border-radius:var(--radius-md); box-shadow:var(--shadow-sticker); }
.doc .qa h3{ margin:0; font:16px/1.3 var(--font-heading); text-transform:none; }
.doc .qa p{ margin-top:10px; font-size:15px; }

/* cards grid (index) */
.doc .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:24px 0 0; }
.doc .cards a{ display:block; padding:18px; background:var(--surface-card); border:3px solid var(--line-ink); border-radius:var(--radius-md); box-shadow:var(--shadow-sticker);
  transition:transform var(--dur-fast) var(--ease-out); }
.doc .cards a:hover{ transform:translateY(-2px); }
.doc .cards .c-k{ font:11px/1 var(--font-mono); letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--text-faint); }
.doc .cards .c-t{ margin-top:8px; font:17px/1.15 var(--font-heading); text-transform:uppercase; color:var(--text-display); }
.doc .cards a:hover .c-t{ color:var(--accent-primary); }
.doc .cards .c-d{ margin-top:8px; font:14px/1.5 var(--font-body); color:var(--text-muted); }

/* related links */
.doc .related{ margin:36px 0 0; }
.doc .related .k{ font:11px/1 var(--font-heading); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-faint); }
.doc .related ul{ list-style:none; padding:0; margin:10px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.doc .related li{ margin:0; }
.doc .related a{ display:inline-block; padding:6px 12px; border-radius:var(--radius-pill); border:2px solid var(--line-hair); background:var(--surface-raised); color:var(--text-body); font:13px/1.3 var(--font-body); }
.doc .related a:hover{ color:var(--accent-holo); border-color:var(--line-holo); }

/* prev / next */
.doc .pager{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:44px 0 0; }
.doc .pager a{ display:block; padding:18px; background:var(--surface-card); border:3px solid var(--line-ink); border-radius:var(--radius-md); box-shadow:var(--shadow-sticker); }
.doc .pager a.next{ text-align:right; }
.doc .pager .p-k{ font:11px/1 var(--font-mono); letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--text-faint); }
.doc .pager .p-t{ margin-top:8px; font:17px/1.15 var(--font-heading); text-transform:uppercase; color:var(--text-display); }
.doc .pager a.next .p-t{ color:var(--accent-primary); }
.doc .foot{ margin:36px 0 0; padding-top:18px; border-top:1px solid var(--line-hair); font:12px/1.6 var(--font-mono); letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--text-faint); }

/* paper notice (right rail) */
.of-notice{ background:var(--surface-paper); color:var(--of-ink); border:3px solid var(--line-ink); border-radius:var(--radius-lg); box-shadow:var(--shadow-sticker),var(--shadow-panel); overflow:hidden; }
.of-notice header{ padding:18px 24px; border-bottom:3px solid var(--line-ink); background:rgba(11,6,22,.06); }
.of-notice header .k{ font:11px/1 var(--font-mono); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-faint); margin-bottom:6px; }
.of-notice header h3{ margin:0; font:19px/1.1 var(--font-heading); letter-spacing:.01em; text-transform:uppercase; color:var(--of-ink); }
.of-notice .b{ padding:24px; font:13px/1.5 var(--font-body); color:var(--of-ink); }
.of-notice .b a{ color:var(--of-nebula-500); text-decoration:underline; }

/* ---- phone ---- */
@media (max-width:900px){
  .of-header{ padding:12px 16px; gap:12px; }
  .of-btn{ display:none; }
  .of-menu{ display:inline-flex; }
  .of-wrap{ padding:20px 16px 56px; gap:20px; }
  .of-side{ position:static; max-width:none; flex-basis:100%; display:none; }
  .of-side.open{ display:block; }
  .of-toc{ display:none; }
  .doc{ max-width:none; }
  .doc h2{ scroll-margin-top:120px; }
  /* A phone has no room for desktop table padding: tighten every cell so a
     three or four column reference table fits without sideways scrolling. */
  .doc table{ font-size:13px; }
  .doc th{ padding:10px 10px; }
  .doc td{ padding:10px 10px; }
  .doc td.m{ font-size:11px; }
  .doc td.n{ font-size:12px; }
}