/* Structured document blocks (schema_version 2).
   Renderer: templates/community/_document.html
   Loaded after app.css, so every colour comes from the existing light-dark()
   tokens and dark mode needs no separate block here. */

.doc {
  --doc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* The reading face. app.css loads Inter, upright and italic, for exactly this:
     long-form body copy. Inter Tight is the display cut the rest of the site is
     set in, and headings keep it. The lede this prose is matched to is already
     set in Inter; the family was the one property that never came across, so
     every published document was reading in the headline face. */
  --doc-read: Inter, "Helvetica Neue", -apple-system, BlinkMacSystemFont, Roboto, system-ui, sans-serif;
  display: flow-root;
}

.doc-block {
  margin: 0 0 var(--sp-6);
}
.doc-block:last-child {
  margin-bottom: 0;
}

/* Author newlines survive, without opting into .preserve-lines, which carries
   the legacy 16px reading typography scoped to .research-body. */
.doc-pre-line {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Reading typography, matched to the post lede. */
.doc-prose > :where(p, ul, ol, blockquote) {
  max-width: var(--measure);
  color: var(--text);
  font-family: var(--doc-read);
  font-optical-sizing: auto;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
}
.doc-prose > p {
  margin: 0 0 1.25rem;
}
.doc-prose > :where(h2, h3, h4, h5, h6) {
  max-width: var(--measure);
  margin: var(--sp-7) 0 var(--sp-3);
  color: var(--heading);
  line-height: 1.25;
  text-wrap: balance;
}
.doc-prose > h2 { font-size: var(--fs-xl); }
.doc-prose > h3 { font-size: var(--fs-lg); }
.doc-prose > :where(h4, h5, h6) { font-size: var(--fs-md); }
.doc-prose > :where(ul, ol) {
  margin: 0 0 1.25rem;
  padding-left: 1.4em;
}
.doc-prose li + li { margin-top: .4em; }
/* 16px matches the reading size modern.css sets for body copy; the document
   blocks restate it because they are deliberately scoped away from the
   .research-body rules that used to override them. */
.doc-prose code {
  padding: .12em .34em;
  border-radius: var(--r-sm);
  background: var(--canvas-2);
  font-family: var(--doc-mono);
  font-size: .92em;
}
.doc-prose blockquote {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  margin: 0 0 1.25rem;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--primary-ink);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--wash);
}
.doc-prose blockquote p { margin: 0; }
.doc-quote-mark { color: var(--primary-ink); opacity: .7; }

/* Shared figure shell: listing, figure, table, equation. */
.doc-figure {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: clip;
}
.doc-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  background: var(--canvas-2);
}
.doc-label__name {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  color: var(--heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.doc-label__name .icon { width: 1em; height: 1em; }
.doc-label__caption {
  flex: 1 1 18ch;
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.doc-figure__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
}
.doc-figure__tools {
  display: flex;
  gap: var(--sp-2);
  margin-left: auto;
}
.doc-chip {
  padding: .18em .6em;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  color: var(--faint);
  font-family: var(--doc-mono);
  font-size: var(--fs-micro);
}
.doc-chip--quiet { border-color: transparent; }

.doc-tool {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 32px;
  padding: .25em .7em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-micro);
  text-decoration: none;
  cursor: pointer;
}
.doc-tool:hover { background: var(--canvas-2); }
.doc-tool .icon { width: 1.05em; height: 1.05em; }

/* Code and other literal text. */
.doc-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.doc-scroll:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}
/* app.css has `main pre { overflow: auto; max-width: 100% }`, which would make
   the <pre> itself the scroll container. .doc-scroll is the element that holds
   the tab stop and the accessible name, so the scrolling has to happen there:
   the listing grows to its content and .doc-scroll does the scrolling. At a
   wide viewport nothing overflows and this is invisible; it only shows on a
   narrow screen, which is exactly where it matters. */
.doc-code {
  overflow: visible;
  min-width: max-content;
  max-width: none;
  margin: 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--doc-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  tab-size: 4;
  white-space: pre;
}
.doc-code code {
  display: block;
  counter-reset: doc-line;
  font: inherit;
}
.doc-line {
  display: block;
  counter-increment: doc-line;
}
.doc-line::before {
  content: counter(doc-line);
  position: sticky;
  left: 0;
  display: inline-block;
  width: 3.5ch;
  margin-right: 1.5ch;
  padding-right: .5ch;
  background: var(--surface);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  text-align: right;
  user-select: none;
  -webkit-user-select: none;
}
/* A trailing newline leaves one empty line in the DOM. Keep it in the text so
   copy and download return the author's bytes; just do not draw it. */
.doc-line:last-child:empty { display: none; }
.doc-line:target,
.doc-block:target > .doc-label {
  background: var(--amber-bg);
}
.doc-line:target::before { background: var(--amber-bg); color: var(--amber-text); }

/* Token classes are applied by document.js over already-escaped text nodes.
   Code is reading content, so each hue comes from an existing token and clears
   the 5.1:1 the 29 Sep contrast pass settled on for a coloured accent. --primary
   measured 4.79:1 here, which was the weakest text on the page. */
.doc-tok-comment { color: var(--faint); font-style: italic; }
.doc-tok-string { color: var(--ok-text); }
.doc-tok-number { color: var(--amber-text); }
.doc-tok-keyword { color: var(--primary-ink); font-weight: 600; }

/* Figures. */
.doc-figure__media {
  display: flex;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--canvas-2);
}
.doc-figure__media img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}
.doc-alt-text {
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-4);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.doc-long-desc { padding: 0 var(--sp-4) var(--sp-4); }
.doc .doc-long-desc summary {
  display: block;
  color: var(--primary);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.doc-figure__data,
.doc-figure__orig {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-4);
  font-size: var(--fs-sm);
}
.doc-pending {
  display: flex;
  align-items: center;
  gap: .5em;
  margin: 0;
  padding: var(--sp-4);
  color: var(--faint);
  font-size: var(--fs-sm);
}
.doc-warn {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .2em .6em;
  border-radius: var(--r-pill);
  background: var(--amber-bg);
  color: var(--amber-text);
  font-size: var(--fs-micro);
}

/* Tables. */
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.doc-table :where(th, td) {
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}
.doc-table th {
  background: var(--surface);
  color: var(--heading);
  font-weight: 600;
  white-space: nowrap;
}
.doc-table tbody tr:last-child :where(th, td) { border-bottom: 0; }
.doc-table__caption {
  padding: var(--sp-3) var(--sp-4) 0;
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.45;
  text-align: left;
}
.doc-unit { color: var(--faint); font-weight: 400; }
.doc-cell--number {
  font-family: var(--doc-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
th.doc-cell--number { text-align: right; }
.doc-cell--missing {
  color: var(--faint);
  font-size: var(--fs-micro);
  font-style: italic;
}

/* Equations. */
.doc-equation__source { font-size: var(--fs-sm); }
.doc-equation__explain,
.doc-note {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  color: var(--faint);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.doc-equation__explain { color: var(--text); }

/* Reference, file, notice and measurement all share a badge-and-body row. */
.doc-reference,
.doc-file,
.doc-notice,
.doc-measure {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
}
.doc-reference__kind,
.doc-file__icon,
.doc-notice__icon,
.doc-measure__icon {
  display: inline-flex;
  align-items: center;
  padding-top: .15em;
  gap: .4em;
  color: var(--faint);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.doc-reference__body > *,
.doc-file__body > *,
.doc-notice__body > *,
.doc-measure__body > * {
  margin: 0 0 var(--sp-2);
}
.doc-reference__body > :last-child,
.doc-file__body > :last-child,
.doc-notice__body > :last-child,
.doc-measure__body > :last-child {
  margin-bottom: 0;
}
.doc-reference__citation { color: var(--text); font-size: var(--fs-sm); line-height: 1.55; }
.doc-reference__value { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.doc-reference__value code,
.doc-reference__commit code,
.doc-file__facts code {
  font-family: var(--doc-mono);
  font-size: .92em;
  overflow-wrap: anywhere;
}
.doc-reference__commit { color: var(--faint); font-size: var(--fs-micro); }
.doc-reference .doc-note,
.doc-measure .doc-note,
.doc-notice .doc-note {
  padding: 0;
  font-size: var(--fs-micro);
}

.doc-file__name { color: var(--heading); font-weight: 600; }
.doc-file__desc { color: var(--text); font-size: var(--fs-sm); line-height: 1.55; }
.doc-file__facts { color: var(--faint); font-size: var(--fs-micro); }

/* Notices. */
.doc-notice__title {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-md);
  line-height: 1.3;
}
.doc-notice__sub {
  margin: var(--sp-3) 0 var(--sp-1);
  color: var(--heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.doc-notice__body p { font-size: var(--fs-sm); line-height: 1.6; }
.doc-notice__links { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-sm); }
/* Each tone's border carries its own ink, not its tint. Measured in Chromium on
   the published page: the tinted fills are 1.10 to 1.17 against the page and the
   tinted lines 1.27 to 2.25, so neither the panel nor its boundary reached the
   3:1 that WCAG 1.4.11 asks of the visual information identifying a component.
   A ratio is luminance only, which is why a clearly coloured panel can measure
   almost nothing against off-white. The inks are 6.25 (takeaway), 8.23 (stuck)
   and 7.90 (hazard), and each is already the tone's icon and title colour. */
.doc-notice--takeaway {
  border-color: var(--primary-ink);
  background: var(--wash);
}
.doc-notice--takeaway .doc-notice__icon { color: var(--primary-ink); }
.doc-notice--stuck {
  border-color: var(--amber-text);
  background: var(--amber-bg);
}
.doc-notice--stuck :where(.doc-notice__icon, .doc-notice__title, .doc-notice__sub) { color: var(--amber-text); }
.doc-notice--stuck .doc-notice__body p { color: var(--amber-text-strong); }
.doc-notice--hazard {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.doc-notice--hazard :where(.doc-notice__icon, .doc-notice__title, .doc-notice__sub) { color: var(--danger); }
/* A note keeps its own muted colour on white, but --faint does not carry enough
   contrast on the tinted notice backgrounds, so each tone sets its own. */
.doc-notice--hazard .doc-note { color: var(--danger); }
.doc-notice--stuck .doc-note { color: var(--amber-text); }
.doc-notice--takeaway .doc-note { color: var(--text); }

/* Measurements. */
.doc-measure__quantity {
  color: var(--faint);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.doc-measure__value { display: flex; align-items: baseline; gap: .4em; flex-wrap: wrap; }
.doc-measure__number {
  color: var(--heading);
  font-family: var(--doc-mono);
  font-size: var(--fs-xl);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.doc-measure__unit { color: var(--text); font-size: var(--fs-md); }
.doc-measure__unit--none { color: var(--faint); font-size: var(--fs-sm); }
.doc-measure__uncertainty { color: var(--text); font-size: var(--fs-sm); }
.doc-measure__facts {
  display: grid;
  gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-3) 0 var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.doc-measure__facts dt {
  color: var(--faint);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.doc-measure__facts dd { margin: 0; font-size: var(--fs-sm); line-height: 1.5; }

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--line-soft);
  color: var(--faint);
  font-size: var(--fs-micro);
}
.doc-reference .doc-meta,
.doc-file .doc-meta,
.doc-notice .doc-meta,
.doc-measure .doc-meta {
  grid-column: 1 / -1;
  padding: var(--sp-2) 0 0;
}
.doc-meta__item { display: inline-flex; align-items: center; gap: .35em; }
.doc-meta a { color: inherit; }

/* Mobile: blocks run to the card edge, and nothing scrolls the page sideways. */
@media (max-width: 40rem) {
  .doc-figure,
  .doc-reference,
  .doc-file,
  .doc-notice,
  .doc-measure {
    margin-inline: calc(var(--sp-4) * -1);
    border-radius: 0;
    border-inline: 0;
  }
  .doc-label,
  .doc-figure__bar {
    padding-inline: var(--sp-4);
  }
  .doc-reference,
  .doc-file,
  .doc-notice,
  .doc-measure {
    grid-template-columns: 1fr;
    padding-inline: var(--sp-4);
  }
  .doc-code { font-size: var(--fs-micro); }
  .doc-line::before { width: 2.5ch; margin-right: 1ch; }
  .doc-measure__facts { grid-template-columns: 1fr; }
}

/* Typeset maths from the server projection. */
.doc-math {
  overflow-x: auto;
  padding: var(--sp-5) var(--sp-4);
  font-size: var(--fs-lg);
  text-align: center;
}
.doc-math math { color: var(--heading); }
.doc-equation__src-toggle { border-top: 1px solid var(--line-soft); }
.doc .doc-equation__src-toggle summary {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  color: var(--faint);
  font-size: var(--fs-micro);
  cursor: pointer;
}

.doc-note--problem { color: var(--danger); }
.doc-note :where(.icon) { width: 1em; height: 1em; vertical-align: -.12em; margin-right: .35em; }
.doc-reference__state--resolved { color: var(--ok-text); }
.doc-reference__state--failed { color: var(--danger); }

.doc-measure__converted { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4em; font-size: var(--fs-sm); }
.doc-measure__number--derived { font-size: var(--fs-md); color: var(--faint); }
.doc-measure__records { font-size: var(--fs-sm); }
.doc-notice__declared { font-weight: 600; }

/* Exact references (F05). */
.doc-item { position: relative; margin-bottom: var(--sp-6); }
.doc-item > .doc-block { margin-bottom: 0; }
.doc-ref {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-top: var(--sp-2);
  min-height: 32px;
  padding: .2em .8em;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--faint);
  font: inherit;
  font-size: var(--fs-micro);
  cursor: pointer;
  opacity: 0;
}
.doc-item:hover .doc-ref,
.doc-ref:focus-visible,
.doc-item:focus-within .doc-ref { opacity: 1; }
@media (hover: none) { .doc-ref { opacity: 1; } }
.doc-ref:hover { border-color: var(--line-strong); color: var(--text); }
.doc-ref .icon { width: 1em; height: 1em; }

.doc-ref-panel {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--primary-ink);
  border-radius: var(--r-md);
  background: var(--wash);
}
.doc-ref-panel__summary { margin: 0; color: var(--heading); font-size: var(--fs-sm); font-weight: 600; }
.doc-ref-panel__help { margin: 0; color: var(--text); font-size: var(--fs-micro); }
.doc-ref-panel__range { display: flex; gap: var(--sp-3); }
.doc-ref-panel__range label { display: grid; gap: 2px; font-size: var(--fs-micro); }
.doc-ref-panel__range input { width: 7rem; }
.doc-ref-panel__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.doc-ref-panel__close {
  min-height: 36px;
  padding: 0 .8em;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  text-decoration: underline;
  cursor: pointer;
}
.doc-ref-panel__status { margin: 0; font-size: var(--fs-micro); color: var(--text); }
.doc-ref-panel__status:empty { display: none; }
.doc-line.is-selected { background: var(--wash); }
.doc-line.is-selected::before { background: var(--wash); color: var(--primary-ink); }
.doc-table td.is-selected { outline: 2px solid var(--primary-ink); outline-offset: -2px; }


/* While a reference selection is open each line is a pointer target, and at the
   code line-height it would be 22px. The 29 Sep review put a 24px floor on
   pointer targets; this keeps it without changing how the listing reads at
   rest. The typed range inputs remain the keyboard path either way. */
.doc-listing.is-selecting .doc-line {
  padding-block: 1px;
  cursor: pointer;
}
.doc-listing.is-selecting .doc-line:hover { background: var(--canvas-2); }


/* The release link sits on its own line inside the publication-history
   disclosure, so it is a standalone pointer target rather than a link inside a
   sentence. It measured 23px; the 29 Sep review's remedy for this was inline
   vertical padding, which lifts it over 24 without moving anything. */
.project-history > a {
  display: inline-block;
  padding-block: 2px;
}

/* Citations remain readable and operable without JavaScript. */
.doc-prose a, .project-idea-summary a { text-decoration: underline; overflow-wrap: anywhere; }
.doc-prose a[target="_blank"]::after { content: " ↗"; font-size: .8em; }
.doc-citations { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1.25rem; }
.doc-citation { position: relative; color: #374151; }
.doc-citation > summary { cursor: pointer; color: #9a3412; font-weight: 600; padding: .35rem .6rem; border: 1px solid #d6d3d1; border-radius: .4rem; }
.doc-citation__preview { padding: 1rem; border: 1px solid #d6d3d1; border-radius: .6rem; background: #fff; max-width: 32rem; overflow-wrap: anywhere; }
.doc-citation[open] { flex-basis: 100%; }
.doc-sources { border-top: 1px solid #d6d3d1; margin-top: 2rem; padding-top: 1rem; color: #374151; }
.doc-sources li { padding: 1rem .5rem; scroll-margin-top: 7rem; overflow-wrap: anywhere; }
.doc-sources li + li { border-top: 1px solid #e7e5e4; }
.doc-reference__citation { font-weight: 600; color: #1f2937; }
.doc-citation summary:focus-visible, .doc-sources a:focus-visible { outline: 2px solid #9a3412; outline-offset: 3px; }
.doc-reference { gap: 1rem; padding: 1rem; border: 1px solid #d6d3d1; border-radius: .6rem; }
.doc-reference__body { min-width: 0; overflow-wrap: anywhere; }
.doc-citation[open] > summary { width: fit-content; }
@media (max-width: 600px) {
  .doc-reference { flex-direction: column; }
  .doc-citation__preview { max-width: 100%; }
}