/* CareHaven Wiki — matches the carehaven.org website (Lexend + Brygada 1918, sage palette, data-theme dark mode). */
:root {
  --bg:#FAF6F0; --bg-raised:#FFFFFF; --bg-subtle:#F4EFE7;
  --text:#2C2621; --muted:#6F665B; --text-2:#534A42; --text-3:#7D7065; --bd:#EDE8E3; --bd-2:#D9D1C4;
  --hv:#7A8B5C; --hv-d:#5E6E45; --hv-l:#EEF2E5;
  --amber:#C08B5C; --amber-l:#FBF0E6;
  --coral:#C25B4D; --coral-l:#FBEAE6;
  --sky:#4F6E92; --sky-l:#E7EEF6;
  --blossom:#D88BA1; --blossom-l:#FBEAEF;
  --shadow-sm:0 1px 2px rgba(44,38,33,.04), 0 4px 12px rgba(44,38,33,.05);
  --shadow-md:0 4px 12px rgba(44,38,33,.06), 0 16px 40px rgba(44,38,33,.08);
  --shadow-lg:0 8px 24px rgba(44,38,33,.08), 0 24px 64px rgba(44,38,33,.12);
  --nav-bg:rgba(250,246,240,.92);
  --radius:14px; --radius-lg:22px;
  --maxw:820px;
  --sans:'Lexend',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Brygada 1918',Georgia,serif;
}
html[data-theme="dark"] {
  --bg:#1C1B18; --bg-raised:#262420; --bg-subtle:#2D2B27;
  --text:#F2EDE6; --muted:#A89F93; --text-2:#C0B8AE; --text-3:#8E867E; --bd:#36332F; --bd-2:#48433D;
  --hv:#9DAE7A; --hv-d:#B8C68F; --hv-l:#2B3520;
  --amber:#D9A55E; --amber-l:#3A2D20;
  --coral:#E0897B; --coral-l:#3A201D;
  --sky:#8FB0D2; --sky-l:#1F2A37;
  --blossom:#E0A2B4; --blossom-l:#3A2027;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.4);
  --shadow-md:0 4px 12px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5);
  --shadow-lg:0 8px 24px rgba(0,0,0,.5), 0 24px 64px rgba(0,0,0,.6);
  --nav-bg:rgba(28,27,24,.92);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--hv-d); text-decoration:none; }
a:hover { text-decoration:underline; }
button { font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }
.skip-link { position:absolute; left:-999px; top:0; background:var(--hv); color:#fff; padding:10px 16px; border-radius:8px; z-index:100; }
.skip-link:focus { left:12px; top:12px; }

/* ---------- Banner ---------- */
.pre-release-banner {
  background:linear-gradient(180deg, var(--amber-l), var(--bg-subtle));
  color:var(--text-2);
  text-align:center;
  padding:10px 20px;
  font-size:13.5px;
  font-weight:600;
  border-bottom:1px solid var(--bd);
}
.pre-release-banner a { margin-left:6px; color:var(--hv-d); }

/* ---------- Top nav (website chrome) ---------- */
.nav {
  position:sticky; top:0; z-index:50; background:var(--nav-bg);
  backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--bd);
}
.nav-inner {
  max-width:1080px; margin:0 auto; padding:14px 28px;
  display:flex; justify-content:space-between; align-items:center;
}
.brand {
  display:flex; align-items:center; gap:10px; color:inherit;
  font-family:var(--serif); font-weight:600; font-size:20px; letter-spacing:-.01em;
}
.brand:hover { text-decoration:none; }
.brand-mark { width:32px; height:32px; background:transparent; display:inline-block; flex:none; }
.brand-mark img { display:block; width:100%; height:100%; border-radius:0; }
.brand-tag {
  font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--amber); background:var(--amber-l);
  border-radius:999px; padding:3px 9px; margin-left:6px; white-space:nowrap; flex:none;
}
.nav-links { display:flex; gap:20px; align-items:center; min-width:0; }
.nav-links a { color:var(--text-2); font-weight:500; font-size:14.5px; white-space:nowrap; transition:color .15s; }
.nav-links a:hover { color:var(--hv-d); text-decoration:none; }
.nav-links a.current { color:var(--hv-d); background:none; }
.nav-cta {
  background:var(--hv); color:#FAF6F0 !important; padding:8px 16px !important;
  border-radius:999px; font-weight:600 !important; font-size:13.5px !important;
  white-space:nowrap; transition:transform .15s, background .15s;
}
.nav-cta:hover { background:var(--hv-d); transform:translateY(-1px); text-decoration:none; }
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:50%; color:var(--text-2); transition:background .15s, color .15s;
}
.theme-toggle:hover { background:var(--bg-subtle); color:var(--hv-d); }
.theme-toggle .moon, .theme-toggle .sun { display:none; }
html[data-theme="dark"] .theme-toggle .sun { display:block; width:16px; height:16px; }
html[data-theme="light"] .theme-toggle .moon { display:block; width:16px; height:16px; }
.search { position:relative; flex:0 1 190px; min-width:150px; }
#search-input {
  width:100%; max-width:none; padding:8px 14px; border:1px solid var(--bd); border-radius:999px;
  background:var(--bg-raised); color:var(--text); font-size:14px; font-family:inherit;
}
#search-input:focus { outline:2px solid var(--hv); border-color:var(--hv); }
.search-results {
  position:absolute; top:44px; right:0; width:min(440px,86vw); background:var(--bg-raised);
  border:1px solid var(--bd); border-radius:14px; box-shadow:var(--shadow-md);
  max-height:65vh; overflow:auto; padding:6px; z-index:50;
}
.search-results a { display:block; padding:10px 12px; border-radius:9px; color:var(--text); }
.search-results a:hover, .search-results a.sel { background:var(--hv-l); text-decoration:none; }
.search-results .r-sec { font-size:12px; color:var(--muted); }
.search-results .r-title { font-weight:700; }
.search-results .r-snippet { margin:3px 0 0; color:var(--muted); font-size:13px; line-height:1.35; }
.search-results .empty { padding:14px; color:var(--muted); }
.search-results .empty strong { display:block; color:var(--text); margin-bottom:4px; }
.search-results .empty p { margin:0; }
.search-results .empty button {
  margin:5px 4px 0 0; padding:5px 8px; border-radius:999px; background:var(--hv-l);
  color:var(--hv-d); font-size:12px; font-weight:800;
}
.nav-toggle { display:none; }
/* Theme toggle that lives inside the mobile nav drawer, and the drawer's dim
   backdrop -- both desktop-hidden; the mobile media query reveals them. */
.sidebar-theme { display:none; }
.sidebar-backdrop { display:none; }

/* ---------- Layout ---------- */
.layout { display:flex; align-items:flex-start; max-width:1180px; margin:0 auto; }
.sidebar {
  position:sticky; top:62px; align-self:flex-start; width:264px; flex:none;
  height:calc(100vh - 62px); overflow-y:auto; padding:24px 14px 60px;
}
.nav-section { margin-bottom:8px; }
.nav-section summary {
  font-family:var(--sans); font-size:12px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); margin:0 0 4px; font-weight:800; cursor:pointer; list-style:none;
  padding:7px 10px; border-radius:9px;
}
.nav-section summary:hover { background:var(--bg-subtle); color:var(--hv-d); }
.nav-section summary::-webkit-details-marker { display:none; }
.nav-section summary::after { content:"+"; float:right; font-size:14px; color:var(--muted); }
.nav-section[open] summary::after { content:"-"; }
.nav-section ul { list-style:none; margin:0; padding:0; }
.nav-section li a {
  display:block; padding:6px 10px; border-radius:9px; color:var(--text);
  font-size:14.5px; line-height:1.35; font-weight:500;
}
.nav-section li a:hover { background:var(--bg-subtle); text-decoration:none; }
.nav-section li a.active { background:var(--hv-l); color:var(--hv-d); font-weight:700; }
.recent-pages {
  margin:0 0 18px; padding:12px; border:1px solid var(--bd); border-radius:var(--radius);
  background:var(--bg-raised);
}
.recent-pages p {
  margin:0 0 8px; font-size:12px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em;
}
.recent-pages a {
  display:block; padding:5px 0; color:var(--text); font-size:14px; line-height:1.3;
}
.audience-filter {
  margin:0 0 18px; padding:12px; border:1px solid var(--bd); border-radius:var(--radius);
  background:var(--bg-raised);
}
.audience-filter p {
  margin:0 0 8px; font-size:12px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em;
}
.audience-buttons { display:flex; flex-wrap:wrap; gap:6px; }
.audience-buttons button {
  padding:6px 9px; border:1px solid var(--bd); border-radius:999px; font-size:12px;
  font-weight:800; color:var(--muted); background:var(--bg-subtle);
}
.audience-buttons button[aria-pressed="true"] {
  background:var(--hv-l); border-color:var(--hv); color:var(--hv-d);
}

.content { flex:1 1 auto; min-width:0; padding:30px clamp(20px,4vw,56px) 80px; }
.eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:800; color:var(--hv); margin:0 0 8px; }
.breadcrumbs {
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 8px;
  color:var(--muted); font-size:13px;
}
.breadcrumbs a { color:var(--hv-d); font-weight:800; }
.build-chip {
  display:inline-block; margin-left:8px; padding:3px 8px; border-radius:999px;
  background:var(--hv-l); color:var(--hv-d); letter-spacing:0; text-transform:none;
}
.prose { max-width:var(--maxw); }

/* Headings = Brygada 1918 serif (like the site) */
.prose h1 { font-family:var(--serif); font-weight:600; font-size:36px; line-height:1.12; letter-spacing:-.01em; margin:0 0 16px; }
.prose h2 { font-family:var(--serif); font-weight:600; font-size:25px; margin:40px 0 12px; padding-top:18px; border-top:1px solid var(--bd); }
.prose h3 { font-family:var(--serif); font-weight:600; font-size:20px; margin:26px 0 8px; }
.heading-link {
  opacity:0; margin-left:8px; padding:2px 6px; border-radius:8px; color:var(--muted);
  font-family:var(--sans); font-size:13px; font-weight:800; vertical-align:middle;
}
.prose h2:hover .heading-link, .prose h3:hover .heading-link, .heading-link:focus {
  opacity:1; background:var(--bg-subtle);
}
.prose p { margin:0 0 14px; }
.prose ul, .prose ol { margin:0 0 16px; padding-left:24px; }
.prose li { margin:5px 0; }
.prose li > ul, .prose li > ol { margin:6px 0; }
.prose strong { font-weight:700; }
.prose code { background:var(--bg-subtle); padding:1px 6px; border-radius:6px; font-size:.88em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.prose blockquote { margin:0 0 16px; padding:12px 18px; border-left:4px solid var(--hv); background:var(--hv-l); border-radius:0 12px 12px 0; }
.prose blockquote p:last-child { margin-bottom:0; }
.prose hr { border:none; border-top:1px solid var(--bd); margin:30px 0; }
.prose a { text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--bd); }
.prose a:hover { text-decoration-color:var(--hv); }
/* auto cross-reference links — gentle dotted underline */
.prose a.xref { text-decoration:underline dotted; text-decoration-color:var(--hv); text-underline-offset:3px; color:var(--hv-d); }
.prose a.ext::after { content:"\2197"; font-size:.8em; color:var(--muted); margin-left:1px; }
.prose a.xref[data-definition] { cursor:help; }
.definition-bubble {
  position:absolute; z-index:80; width:min(280px,calc(100vw - 32px)); padding:10px 12px;
  border:1px solid var(--bd); border-radius:12px; background:var(--bg-raised); color:var(--text);
  box-shadow:var(--shadow-md); font-size:14px; line-height:1.4;
}

/* Tables */
.prose table { width:100%; border-collapse:collapse; margin:0 0 20px; font-size:15px; border:1px solid var(--bd); border-radius:12px; overflow:hidden; }
.prose th, .prose td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--bd); vertical-align:top; }
.prose th { background:var(--bg-subtle); font-weight:700; }
.prose tr:last-child td { border-bottom:none; }

/* Badges */
.badge { display:inline-block; font-size:12px; font-weight:800; line-height:1; padding:4px 9px; border-radius:999px; vertical-align:middle; white-space:nowrap; }
.badge-available { background:var(--hv-l); color:var(--hv-d); }
.badge-soon { background:var(--amber-l); color:var(--amber); }
.badge-planned { background:var(--sky-l); color:var(--sky); }

/* Admonitions */
.admonition { margin:0 0 18px; padding:14px 18px; border-radius:12px; background:var(--bg-raised); border:1px solid var(--bd); border-left:5px solid var(--hv); }
.admonition-title { font-weight:800; margin:0 0 6px; }
.admonition.warning, .admonition.caution { border-left-color:var(--coral); }

/* Lightweight per-page wayfinding for longer articles */
.toc-card {
  margin:12px 0 22px; padding:0; border:1px solid var(--bd); border-radius:var(--radius);
  background:var(--bg-raised); box-shadow:var(--shadow-sm);
}
.toc-card summary {
  padding:12px 16px; cursor:pointer; font-weight:800; color:var(--hv-d); list-style:none;
}
.toc-card summary::-webkit-details-marker { display:none; }
.toc-card summary::after { content:"+"; float:right; color:var(--muted); }
.toc-card[open] summary::after { content:"-"; }
.toc-card ul { margin:0; padding:0 16px 14px 34px; columns:2; column-gap:28px; }
.toc-card li { break-inside:avoid; margin:3px 0; font-size:15px; }
.task-cards {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px;
  margin:18px 0 28px;
}
.task-cards a {
  display:block; padding:13px 15px; border:1px solid var(--bd); border-radius:var(--radius);
  background:var(--bg-raised); color:var(--text); box-shadow:var(--shadow-sm);
}
.task-cards a:hover { text-decoration:none; border-color:var(--hv); box-shadow:var(--shadow-md); }
.task-cards strong { display:block; line-height:1.25; margin-bottom:5px; color:var(--hv-d); }
.task-cards span { display:block; color:var(--muted); font-size:13px; line-height:1.35; }
.start-here-mode {
  margin:16px 0 28px; padding:0; border:1px solid var(--bd); border-radius:var(--radius);
  background:var(--bg-raised); box-shadow:var(--shadow-sm);
}
.start-here-mode summary {
  padding:14px 18px; cursor:pointer; font-weight:800; color:var(--hv-d); list-style:none;
}
.start-here-mode summary::-webkit-details-marker { display:none; }
.start-here-mode summary::after { content:"+"; float:right; color:var(--muted); }
.start-here-mode[open] summary::after { content:"-"; }
.start-here-mode .cards { margin:0; padding:0 18px 18px; }

/* Cards (home) */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin:10px 0 26px; }
.card { display:block; padding:18px 20px; border:1px solid var(--bd); border-radius:var(--radius); background:var(--bg-raised); color:var(--text); box-shadow:var(--shadow-sm); }
.card:hover { border-color:var(--hv); text-decoration:none; box-shadow:var(--shadow-md); transform:translateY(-1px); transition:.15s; }
.card h3 { font-family:var(--serif); font-weight:600; margin:0 0 6px; font-size:17px; }
.card p { margin:0; color:var(--muted); font-size:14px; }

/* Screenshots (phone shots, light/dark swap like the website). The
   .shot-frame bezel mirrors the website's .phone-frame — concentric
   outer/inner radii (outer 38 minus padding 10 equals inner 28) plus a
   Dynamic Island cutout, so wiki screenshots read as an actual iPhone
   instead of a plain rounded rectangle. */
.shot { float:right; width:248px; max-width:42%; margin:4px 0 20px 26px; text-align:center; }
.shot-frame {
  position:relative;
  border-radius:38px;
  padding:10px;
  background:linear-gradient(160deg, #2A2722, #1A1816);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.shot-frame::after {
  content:'';
  position:absolute;
  top:2.6%;
  left:50%;
  transform:translateX(-50%);
  width:30%;
  aspect-ratio:3.2/1;
  min-width:30px;
  border-radius:999px;
  background:#000;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08);
  z-index:1;
  pointer-events:none;
}
.shot img { width:100%; display:block; border-radius:28px; }
.prose img[role="button"] { cursor:zoom-in; }
.prose img[role="button"]:focus-visible { outline:3px solid var(--hv); outline-offset:4px; }
.shot figcaption { margin-top:8px; font-size:13px; color:var(--muted); }
.shot .shot-dark { display:none; }
html[data-theme="dark"] .shot .shot-light { display:none; }
html[data-theme="dark"] .shot .shot-dark { display:inline; }

body.image-viewer-open { overflow:hidden; }
.image-viewer {
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(18,17,15,.76); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.image-viewer[hidden] { display:none; }
.image-viewer figure {
  margin:0; max-width:min(1040px,calc(100vw - 48px)); max-height:calc(100vh - 48px);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
/* Enlarged view reuses .shot-frame (bezel + Dynamic Island) at the
   larger, phone-frame-matching scale (14px padding / 52-38 concentric
   radii) instead of the thumbnail's smaller scale, since a portrait
   screenshot capped by viewport height typically renders in that
   larger size range here. */
.image-viewer .shot-frame {
  padding:14px; border-radius:52px; max-width:100%;
  box-shadow:0 24px 80px rgba(0,0,0,.46); cursor:zoom-out;
}
.image-viewer .shot-frame img {
  display:block; max-width:100%; max-height:calc(100vh - 134px); width:auto; height:auto;
  border-radius:38px;
}
.image-viewer figcaption {
  max-width:min(680px,100%); color:#F7F1EA; text-align:center; font-size:14px; line-height:1.4;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.image-viewer-close {
  position:absolute; top:14px; right:14px; width:42px; height:42px; border-radius:999px;
  background:rgba(255,255,255,.95); color:#2C2621; font-size:28px; line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.image-viewer-close:hover, .image-viewer-close:focus-visible { background:#fff; outline:3px solid var(--hv); outline-offset:2px; }

.page-footer { max-width:var(--maxw); margin-top:56px; padding-top:18px; border-top:1px solid var(--bd); color:var(--muted); font-size:13px; }
.page-footer a { color:var(--hv-d); }
.related-pages {
  max-width:var(--maxw); margin-top:44px; padding-top:22px; border-top:1px solid var(--bd);
}
.related-pages h2 {
  font-family:var(--serif); font-size:22px; font-weight:600; margin:0 0 14px;
}
.related-pages > div { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.related-card {
  display:block; padding:14px 16px; border:1px solid var(--bd); border-radius:var(--radius);
  background:var(--bg-raised); color:var(--text); box-shadow:var(--shadow-sm);
}
.related-card:hover { text-decoration:none; border-color:var(--hv); box-shadow:var(--shadow-md); }
.related-card span {
  display:block; margin-bottom:4px; color:var(--muted); font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.07em;
}
.related-card strong { display:block; margin-bottom:5px; line-height:1.25; }
.related-card em {
  display:block; color:var(--muted); font-size:13px; line-height:1.35; font-style:normal;
}
.page-tools {
  max-width:var(--maxw); margin-top:42px; padding:18px 20px; border:1px solid var(--bd);
  border-radius:var(--radius); background:var(--bg-raised); box-shadow:var(--shadow-sm);
}
.page-tools p { margin:0 0 12px; color:var(--muted); }
.page-tools strong { color:var(--text); }
.page-tool-actions { display:flex; flex-wrap:wrap; gap:10px; }
.page-tool-actions a, .page-tool-actions button {
  display:inline-flex; align-items:center; justify-content:center; min-height:38px;
  padding:8px 14px; border-radius:999px; border:1px solid var(--bd); background:var(--bg-subtle);
  color:var(--hv-d); font-weight:800; font-size:14px;
}
.page-tool-actions a:hover, .page-tool-actions button:hover {
  background:var(--hv-l); text-decoration:none;
}
.feedback-context {
  margin:0 0 18px; padding:14px 16px; border:1px solid var(--bd); border-radius:var(--radius);
  background:var(--hv-l);
}
.feedback-context p { margin:0 0 10px; }
.feedback-context a { font-weight:800; }
.maintainer-note {
  max-width:var(--maxw); margin-top:16px; padding:12px 16px; border:1px dashed var(--bd);
  border-radius:var(--radius); color:var(--muted); font-size:13px;
}
.maintainer-note summary { cursor:pointer; font-weight:800; color:var(--muted); }
.maintainer-note p { margin:8px 0 0; }

/* Mobile */
@media (max-width:900px) {
  /* Phone header reflow: stack the "In beta" tag UNDER the wordmark so the
     brand lockup is narrow, then let the search grow and sit just to the
     right of the brand, with the hamburger pushed to the far right. Fixes the
     header running too wide and the search box getting cut off on phones.
     Scoped to this breakpoint only -- the desktop nav (above) is unchanged. */
  .nav-inner { padding:11px 16px; gap:10px; }
  .brand {
    order:1; display:grid; grid-template-columns:auto auto;
    column-gap:9px; row-gap:0; align-items:center; justify-content:start;
    font-size:19px;
  }
  .brand > .brand-mark { grid-area:1 / 1 / 3 / 2; }          /* logo spans both rows */
  .brand > :nth-child(2) { grid-area:1 / 2 / 2 / 3; align-self:end; line-height:1.05; } /* wordmark */
  .brand-tag { grid-area:2 / 2 / 3 / 3; align-self:start; margin-left:0; }               /* In beta, underneath */
  .nav-links { order:2; flex:1 1 auto; gap:6px; min-width:0; }
  .nav-links a:not(.nav-cta) { display:none; }
  .nav-cta { display:none; }
  /* Hamburger button -- match the main website's 56x42 pill with the
     3-bar -> X animation (driven by aria-expanded, which app.js maintains). */
  #themeToggle { display:none; }          /* manual theme toggle moves into the drawer */
  .nav-toggle {
    display:inline-flex; order:3; flex:none;
    flex-direction:column; align-items:center; justify-content:center; gap:4px;
    width:56px; height:42px; border-radius:999px; border:1px solid var(--bd);
    background:var(--bg-raised); color:var(--text); box-shadow:var(--shadow-sm);
    -webkit-tap-highlight-color:transparent;
  }
  .nav-toggle span, .nav-toggle::before, .nav-toggle::after {
    content:""; display:block; width:18px; height:2px; border-radius:999px;
    background:currentColor; transition:transform .18s ease, opacity .18s ease;
  }
  #navToggle[aria-expanded="true"]::before { transform:translateY(6px) rotate(45deg); }
  #navToggle[aria-expanded="true"] span { opacity:0; }
  #navToggle[aria-expanded="true"]::after { transform:translateY(-6px) rotate(-45deg); }
  .search { display:block; flex:1 1 auto; min-width:0; }
  #search-input { width:100%; padding:8px 14px; }

  /* Nav drawer -- the sidebar becomes a floating rounded card like the main
     website's mobile menu: slides in from the left with a dim backdrop. */
  .sidebar {
    position:fixed; top:calc(60px + env(safe-area-inset-top)); left:14px; bottom:auto;
    width:min(344px, calc(100vw - 28px)); height:auto;
    max-height:calc(100vh - 84px - env(safe-area-inset-top)); overflow:auto;
    z-index:90; padding:10px 10px 16px;
    border:1px solid var(--bd); border-radius:24px;
    background:var(--bg-raised); box-shadow:var(--shadow-lg);
    transform:translateX(calc(-100% - 28px)); opacity:0; pointer-events:none;
    transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
  }
  .sidebar.open { transform:translateX(0); opacity:1; pointer-events:auto; }
  .sidebar-backdrop {
    display:block; position:fixed; inset:0; z-index:49;
    background:rgba(28,27,24,.32); opacity:0; pointer-events:none;
    transition:opacity .2s ease;
  }
  .sidebar-backdrop.open { opacity:1; pointer-events:auto; }
  body.wiki-nav-open { overflow:hidden; }
  /* Theme toggle row, pinned at the top of the drawer */
  .sidebar .sidebar-theme {
    display:flex; align-items:center; gap:10px; width:auto;
    margin:2px 2px 10px; padding:9px 12px; border-radius:12px;
    color:var(--text-2); font-family:var(--sans); font-weight:600; font-size:14.5px;
  }
  .sidebar .sidebar-theme:hover { background:var(--bg-subtle); color:var(--hv-d); }
  .sidebar-theme .moon, .sidebar-theme .sun { display:none; }
  html[data-theme="dark"] .sidebar-theme .sun { display:block; width:16px; height:16px; }
  html[data-theme="light"] .sidebar-theme .moon { display:block; width:16px; height:16px; }
  .content { padding:24px 20px 70px; }
  .shot { float:none; width:230px; max-width:80%; margin:10px auto 22px; }
  .prose h1 { font-size:29px; }
  .toc-card ul { columns:1; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .sidebar { transition:none; } .card:hover { transform:none; } }

@media print {
  :root, html[data-theme="dark"] {
    --bg:#fff; --bg-raised:#fff; --bg-subtle:#fff; --text:#111; --muted:#555; --bd:#ccc;
    --hv:#111; --hv-d:#111; --hv-l:#fff; --amber:#111; --amber-l:#fff; --sky:#111; --sky-l:#fff;
    --shadow-sm:none; --shadow-md:none; --shadow-lg:none;
  }
  html { scroll-behavior:auto; }
  body { background:#fff; color:#111; font-size:12pt; line-height:1.45; }
  .skip-link, .nav, .sidebar, .toc-card, .page-tools, .page-footer { display:none !important; }
  .related-pages, .breadcrumbs, .heading-link, .maintainer-note { display:none !important; }
  .layout { display:block; max-width:none; margin:0; }
  .content { padding:0; }
  .prose { max-width:none; }
  .prose h1 { font-size:24pt; margin-bottom:12pt; }
  .prose h2 { font-size:17pt; margin-top:22pt; padding-top:12pt; page-break-after:avoid; }
  .prose h3 { font-size:14pt; page-break-after:avoid; }
  .prose p, .prose li { orphans:3; widows:3; }
  .prose table { font-size:10pt; page-break-inside:avoid; }
  .shot { float:none; max-width:180px; width:180px; margin:0 0 14pt; text-align:left; }
  .shot-frame { background:none; padding:0; border-radius:18px; box-shadow:none; }
  .shot-frame::after { display:none; }
  .shot img { border:1px solid #ccc; box-shadow:none; border-radius:18px; }
  .badge { border:1px solid #999; background:#fff; color:#111; }
  .prose a { color:#111; text-decoration:underline; }
}