/* The protocols website. A consult-room reference: a readable column for the words, the contents beside it on a wide
   screen, each chart on its own white sheet (as it prints on A4), every draft marked. System fonts only, so pages load
   without fetching anything else and every chart is drawn in the font it was measured in. */
:root {
  --bg: #eef2f1; --panel: #ffffff; --fg: #16252a; --muted: #52646a; --line: #cfd9d8;
  --accent: #0d6670; --accent-soft: #dcecec; --sheet: #ffffff; --sheet-edge: #c7d3d2;
  --draft: #7a4200; --draft-bg: #fbefd9; --ok: #1f5c34; --ok-bg: #e1f0e4; --mark: #fff3b0;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --chart-font: Arial, "Liberation Sans", Helvetica, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1719; --panel: #142124; --fg: #e2eaeb; --muted: #9bb0b4; --line: #27393d;
    --accent: #6cc3ca; --accent-soft: #17363a; --sheet: #fbfcfc; --sheet-edge: #33494d;
    --draft: #f3c27a; --draft-bg: #3a2a12; --ok: #9fd8ab; --ok-bg: #1c3a24; --mark: #4a4214;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1719; --panel: #142124; --fg: #e2eaeb; --muted: #9bb0b4; --line: #27393d;
  --accent: #6cc3ca; --accent-soft: #17363a; --sheet: #fbfcfc; --sheet-edge: #33494d;
  --draft: #f3c27a; --draft-bg: #3a2a12; --ok: #9fd8ab; --ok-bg: #1c3a24; --mark: #4a4214;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--f-body); }
a { color: var(--accent); }
a:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* top bar */
.bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 10px max(16px, env(safe-area-inset-left, 0px)); background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 650; text-decoration: none; color: var(--fg); white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--accent); color: var(--panel); font-weight: 800; }
.search { position: relative; flex: 1 1 260px; max-width: 560px; }
.search input {
  width: 100%; font: inherit; font-size: 15px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg);
}
.results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: min(70vh, 560px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgb(0 0 0 / .18);
  padding: 6px; margin: 0; list-style: none;
}
.results a { display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--fg); }
.results a:hover, .results a:focus { background: var(--accent-soft); outline: none; }
.results .where { font-size: 13px; color: var(--muted); }
.results .h { font-weight: 600; }
.results .snip { font-size: 13.5px; color: var(--muted); display: block; margin-top: 2px; }
.results mark { background: var(--mark); color: inherit; border-radius: 2px; }
.results .none { padding: 10px; color: var(--muted); }

/* page layout */
.layout {
  display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); max-width: 1280px; margin: 0 auto;
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px));
}
@media (min-width: 1100px) {
  .layout:has(.toc) { grid-template-columns: 280px minmax(0, 1fr); }
  .toc { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; }
}
main { min-width: 0; max-width: 980px; }

/* contents */
.toc { font-size: 14px; line-height: 1.4; }
.toc summary { font-weight: 650; cursor: pointer; padding: 4px 0; }
.toc ol { list-style: none; margin: 0; padding: 0 0 0 12px; }
.toc > details > ol { padding-left: 0; }
.toc li { margin: 3px 0; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }
.toc ol ol a { font-size: 13px; }

/* a document */
.eyebrow { font-family: var(--f-mono); font-size: 13px; color: var(--accent); margin: 0 0 4px; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.01em; text-wrap: balance; }
.doc h2 { font-size: 1.4rem; line-height: 1.25; margin: 2.2em 0 .6em; padding-top: .8em; border-top: 1px solid var(--line); text-wrap: balance; }
.doc h3 { font-size: 1.12rem; line-height: 1.3; margin: 1.8em 0 .5em; }
.doc h4 { font-size: 1rem; margin: 1.4em 0 .4em; }
.doc p, .doc li { max-width: 78ch; }
.doc li + li { margin-top: .25em; }
.doc code { font-family: var(--f-mono); font-size: .88em; background: var(--accent-soft); padding: .05em .3em; border-radius: 3px; overflow-wrap: anywhere; }
.doc pre { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; overflow: auto; }
.doc pre code { background: none; padding: 0; }
.doc blockquote { margin: 1em 0; padding: .2em 1em; border-left: 3px solid var(--accent); color: var(--muted); }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.doc hr + h2 { border-top: 0; padding-top: 0; margin-top: 1.2em; }
a.ref { text-decoration: underline dotted; text-underline-offset: 2px; white-space: nowrap; }

.status { border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; font-size: 15px; }
.status.draft { background: var(--draft-bg); color: var(--draft); }
.status.ok { background: var(--ok-bg); color: var(--ok); }
.history { font-size: 14px; color: var(--muted); margin: 0 0 20px; }
.history summary { cursor: pointer; }
.history p { max-width: none; }

/* tables scroll sideways on their own rather than pushing the page */
.doc table {
  display: block; overflow-x: auto; border-collapse: collapse; margin: 1em 0; font-size: 14.5px; line-height: 1.45;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; max-width: 100%;
}
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); min-width: 9ch; }
.doc thead th { background: var(--accent-soft); font-size: 13.5px; }
.doc tbody tr:last-child td { border-bottom: 0; }

/* charts: drawn at build time as SVG, always on white paper */
.sheet { margin: 1.2em 0 1.6em; background: var(--sheet); border: 1px solid var(--sheet-edge); border-radius: 8px; padding: 16px; overflow-x: auto; }
.chart { font: 16px/1.5 var(--chart-font); color: #16252a; }
.chart p { margin: 0; max-width: none; }
.chart svg { display: block; margin: 0 auto; max-width: 100% !important; height: auto; }
@media (max-width: 720px) {
  .chart svg { max-width: none !important; }      /* full size on a phone: scroll the sheet rather than shrink the words */
  .sheet { margin-left: -8px; margin-right: -8px; }
}

/* home */
.home .intro { color: var(--muted); font-size: 1.05rem; max-width: 70ch; margin: 0 0 8px; }
.group { margin-top: 32px; }
.group h2 { font-size: 1.15rem; margin: 0; }
.group .blurb { color: var(--muted); margin: 2px 0 10px; font-size: 15px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.card {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; height: 100%;
  padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--fg);
}
.card:hover { border-color: var(--accent); }
.card .num { font-family: var(--f-mono); color: var(--accent); font-weight: 600; grid-row: span 3; }
.card .t { font-weight: 600; line-height: 1.3; }
.card .pill { justify-self: start; }
.card .aud { font-size: 13px; color: var(--muted); line-height: 1.35; }
.pill { font-family: var(--f-mono); font-size: 12px; border-radius: 999px; padding: 1px 9px; border: 1px solid currentColor; white-space: nowrap; }
.pill.draft { color: var(--draft); background: var(--draft-bg); }
.pill.ok { color: var(--ok); background: var(--ok-bg); }

.foot { max-width: 1280px; margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-left, 0px)) 40px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
.foot p { margin: 0 0 6px; max-width: 90ch; }
.foot .meta { font-family: var(--f-mono); font-size: 12px; }

@media print {
  .bar, .toc, .history, .foot .meta { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .layout { display: block; padding: 0; }
  .sheet { break-before: page; break-inside: avoid; border: 0; padding: 0; overflow: visible; }
  .chart svg { max-width: 100% !important; max-height: 255mm; }
  .doc table { display: table; font-size: 9pt; }
  a.ref { text-decoration: none; color: inherit; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* sign in and sign out */
.signin { max-width: 420px; margin: 40px auto; padding: 0 max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 10px; }
.signin form { display: grid; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.signin label { font-weight: 600; font-size: 14px; }
.signin input { font: inherit; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.signin button, .signout button {
  font: inherit; font-weight: 600; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--panel); cursor: pointer; margin-top: 6px;
}
.signin .small { font-size: 13px; color: var(--muted); }
.signout { margin-left: auto; }
.signout button { margin: 0; padding: 6px 12px; font-size: 14px; background: transparent; color: var(--accent); }