:root {
  --paper: #f7f5ef;
  --paper-strong: #fffdf7;
  --ink: #101827;
  --muted: #42526a;
  --line: #d8d2c4;
  --green: #087f6b;
  --green-dark: #055f52;
  --terminal: #0e1626;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.58;
}
a { color: var(--green-dark); text-underline-offset: 0.18em; }
.topline { height: 12px; background: var(--green); }
.wrap { width: min(1040px, calc(100% - 40px)); margin: 0 auto; }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0 14px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0;
  text-decoration: none;
}
.brand img { width: 34px; height: 34px; border-radius: 8px; box-shadow: 0 8px 18px rgba(16, 24, 39, 0.12); }
.nav-links { display: flex; align-items: center; gap: 22px; color: var(--muted); font-size: 15px; font-weight: 650; }
.nav-links a { color: var(--muted); text-decoration: none; }
.doc {
  min-width: 0;
  padding: 28px 0 70px;
  /* Reference prose carries unbreakable strings: a release URL, a literal such
     as authority_provenance=recovered_legacy_observation, a slash-joined
     subsystem list. On a phone each one pushed the whole page sideways.
     overflow-wrap inherits, and break-word only splits a token that would
     otherwise overflow, so ordinary identifiers still stay whole. Code blocks
     set white-space: pre and keep scrolling on their own. */
  overflow-wrap: break-word;
}
.doc h1 {
  max-width: 820px;
  margin: 0 0 18px;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: 0;
}
.doc h2 {
  margin: 44px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
}
.doc h3 { margin: 30px 0 10px; font-size: 22px; line-height: 1.22; }
.doc h4 { margin: 24px 0 8px; font-size: 18px; }
.doc p, .doc li { color: #26364d; font-size: 17px; }
.doc ul, .doc ol { padding-left: 26px; }
.doc li { margin: 6px 0; }
.doc code {
  border: 1px solid #d5cdbc;
  border-radius: 5px;
  background: var(--paper-strong);
  padding: 0.08em 0.28em;
  color: #172033;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}
.doc pre {
  overflow-x: auto;
  border-radius: 8px;
  background: var(--terminal);
  padding: 18px;
  border: 1px solid #26364c;
}
.doc pre code {
  border: 0;
  background: transparent;
  padding: 0;
  color: #eef3ff;
  font-size: 14px;
}
.doc blockquote {
  margin: 20px 0;
  padding: 10px 18px;
  border-left: 4px solid var(--green);
  background: var(--paper-strong);
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 26px;
  background: var(--paper-strong);
  font-size: 15px;
}
.tblwrap { overflow-x: auto; margin: 18px 0 26px; }
.tblwrap table { min-width: 720px; margin: 0; }
.doc th, .doc td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
}
.doc th { color: var(--ink); background: #ece7db; }
.doc img { max-width: 100%; height: auto; }
.doc hr { margin: 38px 0; border: 0; border-top: 1px solid var(--line); }
footer {
  border-top: 1px solid var(--line);
  background: var(--paper-strong);
  padding: 28px 0;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; }
@media (max-width: 760px) {
  .nav { align-items: flex-start; flex-direction: column; }
  .nav-links { flex-wrap: wrap; gap: 12px; }
  .wrap { width: min(100% - 28px, 1040px); }
}
  
footer .fineprint { margin-top: 10px; font-size: 13px; opacity: .8; }

/* Architecture is still rendered from ordinary Markdown. These rules add a
   richer public hierarchy without introducing a second prose source. */
.layout-architecture .doc > p:first-of-type { max-width: 780px; font-size: 19px; line-height: 1.55; }
.layout-architecture .doc > blockquote:first-of-type {
  max-width: 780px;
  margin: 26px 0;
  padding: 18px 22px;
  border-left: 4px solid var(--green);
  border-radius: 0 10px 10px 0;
  background: var(--paper-strong);
}
.layout-architecture .doc > blockquote:first-of-type p { margin: 0; color: var(--ink); font-size: 18px; line-height: 1.55; }
.layout-architecture .toc { margin: 30px 0 6px; }
.layout-architecture .toc ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.layout-architecture .toc li { margin: 0; }
.layout-architecture .toc a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-strong);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 650;
  text-decoration: none;
}
.layout-architecture .toc a .n { color: var(--green); font-size: 11.5px; font-weight: 800; letter-spacing: .05em; }
.layout-architecture .toc a:hover { border-color: var(--green); color: var(--green-dark); }
.layout-architecture .toc .toc-label { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.layout-architecture .secno { margin-right: 12px; color: var(--green); font-size: .62em; font-weight: 800; letter-spacing: .08em; vertical-align: .18em; }
.layout-architecture .doc p:has(> a > img) { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.layout-architecture .doc p > a > img { display: block; width: 100%; min-width: 960px; }
/* The handbook index. Sections are scannable lists rather than cards so a
   reader can take in five sections and thirty entries without scrolling past
   decorative boxes. Planned entries carry no link on purpose. */
.layout-hub .hub-lead { max-width: 720px; font-size: 19px; line-height: 1.55; }
.layout-hub .hub-section h2 { margin-bottom: 6px; }
.layout-hub .hub-blurb { max-width: 720px; margin: 0 0 18px; color: var(--muted); }
.layout-hub .hub-list { margin: 0; padding: 0; list-style: none; }
.layout-hub .hub-item { margin: 0; border-top: 1px solid var(--line); }
.layout-hub .hub-item:last-child { border-bottom: 1px solid var(--line); }
.layout-hub .hub-item > a,
.layout-hub .hub-item.is-planned {
  display: grid;
  grid-template-columns: minmax(210px, 300px) 1fr auto;
  align-items: baseline;
  gap: 8px 22px;
  padding: 14px 4px;
  text-decoration: none;
}
.layout-hub .hub-item > a:hover { background: var(--paper-strong); }
.layout-hub .hub-title { color: var(--ink); font-size: 17px; font-weight: 700; }
.layout-hub .hub-item > a:hover .hub-title { color: var(--green-dark); }
.layout-hub .hub-summary { color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.layout-hub .hub-item.is-planned .hub-title,
.layout-hub .hub-item.is-planned .hub-summary { color: #7b869a; }
.layout-hub .hub-flag {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
/* Between-page navigation, generated on every documentation page from the same
   manifest as the handbook index. It carries no JavaScript: <details> keeps the
   tree out of the way on a phone, and a wide screen forces it open through
   ::details-content. A browser without that pseudo-element keeps the collapsed
   control, which still opens, so the fallback is a smaller nav rather than none.

   Documentation pages widen the shared wrap to pay for the sidebar, which keeps
   the prose column close to the width it had before. The landing page and the
   hand-written spokes carry no .docpage class and are untouched. */
.docpage .wrap { width: min(1280px, calc(100% - 40px)); }
.shell { display: grid; grid-template-columns: minmax(0, 1fr); }
.sidenav {
  margin: 20px 0 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-strong);
}
.sidenav-summary {
  padding: 11px 15px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}
.sidenav-summary::marker { color: #9aa3b2; font-size: 12px; }
.sidenav-here { margin-left: 9px; color: var(--muted); font-weight: 600; }
.sidenav-tree { padding: 2px 15px 14px; }
.sidenav-overview {
  display: block;
  margin: 0 0 11px;
  padding: 0 10px 11px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
.sidenav-overview:hover { color: var(--green-dark); }
.sidenav-overview.is-current { color: var(--ink); }
.sidenav-sections, .sidenav-sections ul { margin: 0; padding: 0; list-style: none; }
.sidenav-section { margin: 0 0 3px; }
.sidenav-section li { margin: 0; }
.sidenav-heading {
  padding: 5px 0 5px 4px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.sidenav-heading::marker { color: #9aa3b2; font-size: 11px; }
.sidenav-group[open] > .sidenav-heading { margin-bottom: 2px; }
.sidenav-group[open] { margin-bottom: 12px; }
.sidenav-section.is-here .sidenav-heading { color: var(--green-dark); }
.sidenav-section a,
.sidenav-planned {
  display: block;
  padding: 4px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 7px 7px 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.35;
  text-decoration: none;
}
.sidenav-section a:hover { border-left-color: var(--line); background: var(--paper); color: var(--green-dark); }
.sidenav-section a.is-current {
  border-left-color: var(--green);
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
}
.sidenav-planned { color: #7b869a; }
.sidenav-note { margin: 0; padding-left: 12px; color: #7b869a; font-size: 12px; line-height: 1.4; }
@media (min-width: 1024px) {
  .shell { grid-template-columns: 250px minmax(0, 1fr); gap: 44px; align-items: start; }
  @supports selector(::details-content) {
    .sidenav {
      position: sticky;
      top: 20px;
      max-height: calc(100vh - 40px);
      overflow-y: auto;
      margin: 36px 0 0;
      padding: 0 18px 6px 0;
      border: 0;
      border-right: 1px solid var(--line);
      border-radius: 0;
      background: transparent;
    }
    .sidenav > summary { display: none; }
    .sidenav::details-content { content-visibility: visible; }
    .sidenav-tree { padding: 0; }
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 760px) {
  .docpage .wrap { width: min(100% - 28px, 1280px); }
  .layout-architecture .toc ul { grid-template-columns: repeat(2, 1fr); }
  .layout-hub .hub-item > a,
  .layout-hub .hub-item.is-planned { grid-template-columns: 1fr; gap: 4px; }
  .layout-hub .hub-flag { justify-self: start; }
}