/* Galedra. Restrained, editorial, neutral (spec 06 §4 rule 12): no true/false
   colours, no badges of correctness, numbers only where the view asks for them. */

:root {
  --paper: #f6f4ee;
  --panel: #fffdf9;
  --panel-2: #f1eee6;
  --ink: #1e1d1a;
  --muted: #6a675f;
  --line: #e0dcd2;
  --line-strong: #cfc9bb;
  --accent: #2c5a86;
  --accent-ink: #1f4363;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(30, 29, 26, 0.05), 0 1px 0 rgba(30, 29, 26, 0.03);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--paper); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
code { font-family: var(--mono); font-size: 0.86em; background: var(--panel-2); padding: 0.05em 0.35em; border-radius: 4px; overflow-wrap: anywhere; }
pre { font-family: var(--mono); font-size: 0.84rem; line-height: 1.5; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
pre code { background: none; padding: 0; }
blockquote { margin: 1rem 0; padding: 0.2rem 0 0.2rem 1.1rem; border-left: 3px solid var(--line-strong); color: var(--ink); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 1.6rem 0 0.5rem; letter-spacing: -0.005em; overflow-wrap: anywhere; }
h1 { font-size: 2rem; margin-top: 0.8rem; }
h2 { font-size: 1.45rem; border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; }
h3 { font-size: 1.12rem; }
p { margin: 0.55rem 0; }
.lede { font-size: 1.12rem; color: var(--ink); max-width: 46rem; }
.lede.strong { font-weight: 600; }
.meta, .muted { color: var(--muted); font-size: 0.92rem; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; color: var(--muted); margin: 0 0 0.4rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

/* Header, footer, main */
header.site { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding: 0.55rem 1.4rem; background: rgba(255, 253, 249, 0.97); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
header.site .brand { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; color: var(--ink); display: inline-flex; align-items: center; gap: 0.4rem; }
header.site .brand:hover { text-decoration: none; }
header.site .brand-mark { width: 26px; height: 26px; display: block; }
header.site nav { display: flex; gap: 0.2rem 1rem; flex-wrap: wrap; font-size: 0.95rem; }
header.site nav a { color: var(--ink); opacity: 0.85; padding: 0.15rem 0; border-bottom: 2px solid transparent; }
header.site nav a:hover { opacity: 1; text-decoration: none; border-bottom-color: var(--accent); }
header.site .site-search { margin: 0; }
header.site .site-search input { width: 11rem; max-width: 100%; padding: 0.25rem 0.55rem; font-size: 0.9rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.search-form { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.search-form input[type=search] { flex: 1 1 18rem; min-width: 0; padding: 0.45rem 0.7rem; font-size: 1rem; }
.search-group { margin: 1.6rem 0; }
.search-hit { padding: 0.55rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.search-hit p { margin: 0.15rem 0; }
.search-snippet mark, .search-title mark { background: #fff1b8; color: inherit; padding: 0 0.1em; }
@media (max-width: 640px) { header.site .site-search { order: 3; flex: 1 1 100%; } header.site .site-search input { width: 100%; } }
header.site .account { margin-left: auto; display: flex; align-items: center; gap: 0.8rem; font-size: 0.92rem; }
/* Open bug reports / feature requests, for admins only. Reads as one pill; the
   two halves link to their own lists. */
header.site .report-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
header.site .report-badge a { color: var(--accent-ink, #8a3324); border-bottom: 0; display: inline-flex; align-items: center; gap: 0.25rem; }
header.site .report-badge svg { display: block; flex: 0 0 auto; }
header.site .report-badge a:hover { text-decoration: underline; border-bottom: 0; }
header.site .report-badge .sep { color: var(--muted, #666); }
header.site .report-badge .kind { display: inline-flex; align-items: center; gap: 0.15rem; }
header.site .report-badge .plus { color: var(--muted, #666); font-size: 0.85em; }
header.site .report-badge a.held { color: var(--muted, #666); }
header.site .report-badge.none a { color: var(--muted, #666); }
/* Drop-down menus (Stage 24): details/summary, styled like the old links. */
header.site nav details.menu { position: relative; }
header.site nav details.menu > summary { list-style: none; cursor: pointer; color: var(--ink); opacity: 0.85; padding: 0.15rem 0; border-bottom: 2px solid transparent; user-select: none; }
header.site nav details.menu > summary::-webkit-details-marker { display: none; }
header.site nav details.menu > summary::after { content: " ▾"; font-size: 0.8em; opacity: 0.7; }
header.site nav details.menu > summary:hover, header.site nav details.menu[open] > summary { opacity: 1; border-bottom-color: var(--accent); }
/* The generic details rule underlines a summary on hover; here the accent
   bar above is the hover state, and both together read as two underlines. */
header.site nav details.menu > summary:hover { text-decoration: none; }
/* The gap between a summary and its panel would otherwise end a hover and
   close the menu on the way down to it. */
header.site nav details.menu[open] > summary::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0.5rem; }
header.site nav .menu-panel { position: absolute; left: 0; top: calc(100% + 0.4rem); min-width: 13rem; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(30, 29, 26, 0.12); padding: 0.4rem 0; z-index: 20; }
header.site nav .menu-panel a { padding: 0.4rem 1rem; border-bottom: 0; white-space: nowrap; }
header.site nav .menu-panel a:hover { background: var(--panel-2); }
@media (max-width: 40rem) { header.site nav .menu-panel { position: static; box-shadow: none; border: 0; padding: 0 0 0 0.8rem; } }
.readme h1 { font-size: 1.6rem; }
/* Personal views (Article XV): a visibly different panel from the shared assessment. */
.card.personal { border-style: dashed; background: var(--panel-2); }
/* Outlines (Stage 20): a directory tree beside the claim, ancestors open, current claim marked. */
.with-outline { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 56rem) { .with-outline { grid-template-columns: 1fr; } }
aside.outline { position: sticky; top: 3.6rem; font-size: 0.82rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.9rem 0.7rem 3.1rem; max-height: calc(100vh - 5rem); overflow: auto; }
/* On a narrow screen the two columns stack, and an outline the height of the
   viewport is then the whole screen: you choose a section, the frame below
   reloads, and the thing you chose is off the bottom with nothing to take you
   there. Capped so the reading pane is always in sight, scrolling on its own so
   a swipe inside it moves it rather than the page, and not sticky, because a
   sticky panel in a single column is just a panel that will not go away.
   A fraction of the viewport rather than a fixed height, so landscape on a
   phone — where there is very little of it — gets a short menu too. */
@media (max-width: 56rem) {
  aside.outline {
    /* Relative, not static. The counts beside each item are absolutely
       positioned into the left gutter, so this element is their containing
       block; making it static handed them to the page and they drifted away
       from the items they count (owner, 2026-09-22). Relative drops the
       stickiness, which is what a single column does not want, and keeps the
       gutter they live in. That gutter is why the left padding is what it is:
       the counts sit at 0.5rem and are 2.1rem wide, so anything under about
       2.8rem crops them. */
    position: relative;
    /* And top back to auto. `top: 3.6rem` is the sticky offset that clears the
       header on a wide screen; on a relative box it shifts the panel down
       without moving the space reserved for it, which is a blank band above the
       menu and a menu drawn over the content below it (owner, 2026-09-22).
       Changing `position` without changing `top` is the whole bug. */
    top: auto;
    max-height: 45vh;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Room for the sticky header when the reading pane is scrolled to. */
  #outline-content { scroll-margin-top: 4.5rem; }
  /* A heading with no spaces in it would otherwise push the page sideways, and
     a page that scrolls sideways on a phone is the other way this is unusable. */
  .tree a, .tree summary { overflow-wrap: anywhere; }
}
aside.outline h2, .tree h2 { font-size: 1rem; border: 0; margin: 0 0 0.4rem; }
.tree ul { list-style: none; margin: 0; padding-left: 0.9rem; border-left: 1px dotted var(--line-strong); }
.tree > ul { padding-left: 0; border-left: 0; }
.tree li { margin: 0.15rem 0; }
.tree details > summary { cursor: pointer; list-style: none; }
/* One glyph that turns, rather than two that swap: a swap cannot be animated. */
.tree details > summary::before { content: "▸"; display: inline-block; margin-right: 0.25rem; color: var(--muted); transition: transform 180ms ease; }
.tree details[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .tree details > summary::before { transition: none; } }
/* The counts column. Absolutely positioned against the sidebar and given only
   a left offset, so each one keeps its own line but they all share a column,
   whatever depth the branch is at. */
.tree:not(aside) { position: relative; }
.tree .counts { position: absolute; left: 0.5rem; width: 2.1rem; text-align: right; color: var(--muted); font-size: 0.85em; font-variant-numeric: tabular-nums; }
.tree .counts.state { font-family: var(--mono); font-size: 0.78em; }
.tree summary, .tree li.claim-row, .tree p.leaf { padding-left: 0.2rem; }
/* A section with nothing under it yet: aligned with the branches, but with
   no triangle, and indented by the width one would have taken. */
.tree p.leaf { margin: 0; padding-left: 1.05rem; }
.tree p.leaf.current, .tree summary.current { background: var(--panel-2); font-weight: 600; border-radius: 4px; }
.tree .claim-line { display: block; padding: 0.1rem 0.3rem; border-radius: 4px; }
.tree .claim-line.current { background: var(--panel-2); font-weight: 600; }
.tree summary.current { background: var(--panel-2); font-weight: 600; border-radius: 4px; }
/* A section's text (Stage 30): long-form reading, set narrower than a card's
   full width so it does not become a wall. */
.card.reading .reading-body { max-width: 42rem; }
.card.reading .reading-body p { margin: 0.5rem 0; }
.card.reading .reading-heading { font-size: 1rem; margin: 1.2rem 0 0.2rem; }
.card.reading .meta.small { font-size: 0.78rem; margin-top: 0.1rem; }
dl.glossary dt { font-weight: 600; margin-top: 1rem; }
dl.glossary dd { margin: 0.2rem 0 0 0; }
dl.glossary dd ul { margin: 0.3rem 0 0; }
label.check { display: inline-flex; gap: 0.4rem; align-items: baseline; font-size: 0.95rem; }
table td.actions form { display: inline; margin-right: 0.3rem; }
main { max-width: 68rem; margin: 1.4rem auto 3rem; padding: 0 1.4rem; }
footer.site { border-top: 1px solid var(--line); padding: 1.2rem 1.4rem 2rem; max-width: 68rem; margin: 2rem auto 0; color: var(--muted); font-size: 0.85rem; display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem 1.5rem; flex-wrap: wrap; }
footer.site p { margin: 0; }
footer.site .links { display: flex; gap: 0.2rem 1.1rem; flex-wrap: wrap; }
footer.site .links a { color: var(--muted); }
footer.site .links a:hover { color: var(--accent-ink); }

/* Cards, badges, tables */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.25rem; margin: 0.9rem 0; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card .headline, .headline { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; margin: 0.2rem 0 0.4rem; }
.labels span, .badge { display: inline-block; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.05rem 0.6rem; margin: 0.1rem 0.35rem 0.1rem 0; font-size: 0.8rem; background: var(--panel-2); color: var(--ink); white-space: nowrap; }
.labels { margin: 0.4rem 0; }
details { margin: 0.6rem 0; }
details > summary { cursor: pointer; color: var(--accent); font-weight: 500; }
details > summary:hover { text-decoration: underline; }
table { border-collapse: collapse; width: 100%; margin: 0.6rem 0 1rem; font-size: 0.93rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 0.5rem 0.7rem; vertical-align: top; border-bottom: 1px solid var(--line); }
th { font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--panel-2); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td, table tr:hover td { background: #faf8f2; }
ul, ol { padding-left: 1.4rem; }
li { margin: 0.2rem 0; }

/* Forms */
form.inline { display: inline; }
label { display: block; margin: 0.6rem 0; font-size: 0.92rem; color: var(--muted); }
label > input, label > textarea, label > select { display: block; margin-top: 0.25rem; color: var(--ink); font-size: 1rem; }
label > input[type=checkbox] { display: inline-block; margin: 0 0.4rem 0 0; }
input[type=text], input[type=email], input[type=password], input[type=number], textarea, select { width: 100%; max-width: 40rem; padding: 0.5rem 0.6rem; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; background: var(--panel); color: var(--ink); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
input[type=number] { max-width: 9rem; }
textarea { min-height: 9rem; line-height: 1.5; }
button, input[type=submit], .button { display: inline-block; font: inherit; font-weight: 500; padding: 0.5rem 1.05rem; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 6px; cursor: pointer; line-height: 1.3; }
button:hover, input[type=submit]:hover, .button:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; text-decoration: none; }
button.secondary, input[type=submit].secondary, .button.secondary { background: var(--panel); color: var(--accent); }
button.secondary:hover, input[type=submit].secondary:hover, .button.secondary:hover { background: var(--panel-2); color: var(--accent-ink); }
button.small, .button.small { padding: 0.3rem 0.75rem; font-size: 0.88rem; }
.warning { color: #6a4a12; background: #fbf3e2; border: 1px solid #ecd9ad; padding: 0.3rem 0.65rem; border-radius: 6px; font-size: 0.9rem; display: inline-block; margin: 0.2rem 0.3rem 0.2rem 0; }
.flash { background: #eef3f8; border: 1px solid #cddbe8; padding: 0.6rem 0.9rem; border-radius: 6px; margin: 0.6rem 0 1rem; }
.proposal { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 1rem; margin: 0.7rem 0; background: var(--panel); }
.filters { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: end; padding: 0.7rem 1rem; margin: 0.8rem 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); }
.filters label { margin: 0; }
.filters input[type=text] { min-width: 14rem; }

/* Auth */
.auth { max-width: 26rem; margin: 2rem auto; }
.auth h1 { margin-top: 0; }
.auth input[type=submit] { margin-top: 0.6rem; width: 100%; }

/* Grids and dashboard */
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.actions-grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 1.2rem 0; }
.grid > .card { margin: 0; }
a.card.action { display: block; color: var(--ink); }
a.card.action:hover { text-decoration: none; border-color: var(--accent); }
a.card.action h3 { margin: 0 0 0.3rem; color: var(--accent); }
a.card.action p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.stats { margin: 0.4rem 0 1.4rem; }

/* Landing page */
.graph-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
body.landing main, body.landing footer.site { position: relative; z-index: 1; }
body.landing header.site { position: sticky; z-index: 10; } /* above main, so open menus are not covered by the hero */
body.landing main { max-width: 72rem; }
.constitution-pointer > * { max-width: 52rem; }
.faq h2 { margin-top: 2.4rem; }
.share { max-width: 44rem; margin: 1rem auto; }
.share .claim-text { font-family: var(--serif); font-size: 1.25rem; }
.share .say-instead { color: var(--accent-ink); }
.share-preview { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); margin-top: 0.6rem; }
.connect pre { white-space: pre; overflow-x: auto; }
.paste textarea.code { font-family: var(--mono); font-size: 0.82rem; max-width: none; }
.paste .errors ul { margin: 0.4rem 0; }
.choice { display: block; margin: 0.35rem 0; color: var(--ink); }
.topic h3 { margin: 0 0 0.3rem; }
.quiet-button { background: none; border: 0; color: var(--accent); padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
.topic .badge { font-weight: 400; }
.faq h3 { margin: 1.4rem 0 0.3rem; font-size: 1.15rem; }
.faq p { max-width: 46rem; }
.verse { font-family: var(--serif); font-size: 1.1rem; max-width: 40rem; }
.verse footer { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); margin-top: 0.3rem; }
body.landing section { margin: 2.4rem 0; padding: 1rem 1.4rem; background: rgba(255, 253, 249, 0.8); border-radius: var(--radius); }
body.landing .hero { padding: 2rem 1.4rem 1.2rem; }
body.landing .cta, body.landing .statement { background: rgba(255, 253, 249, 0.9); padding-block: 2rem; }
body.landing h2 { font-size: 1.7rem; border: 0; padding: 0; margin-bottom: 0.8rem; }
/* A QR code says where it goes: unreadable until scanned is a thing to distrust. */
figure.qr { margin: 1rem 0 0; max-width: 15rem; }
figure.qr img { display: block; width: 9rem; height: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
figure.qr figcaption { margin-top: 0.4rem; color: var(--muted); font-size: 0.82rem; overflow-wrap: anywhere; }
.tide { margin-top: 1.6rem; }
.tide h3 { font-size: 1.05rem; margin-top: 0.2rem; }
.tide-points { margin: 1rem 0 0; padding-left: 1.2rem; }
.tide-points li { margin: 0.4rem 0; }
/* Collapsed to one quiet line for a person; whole in the document for an agent
   that converts the page to text. Never display:none — see the note on the
   element itself. */
.agent-note { max-width: 62rem; margin: 0.6rem auto 0; padding: 0 1.4rem; font-size: 0.82rem; }
.agent-note > summary { cursor: pointer; color: var(--muted); list-style: none; padding: 0.35rem 0; }
.agent-note > summary::-webkit-details-marker { display: none; }
.agent-note > summary::before { content: "▸ "; }
.agent-note[open] > summary::before { content: "▾ "; }
.agent-note > div { padding: 0.2rem 0 0.6rem 1rem; border-left: 2px solid var(--rule, #d7dee6); }
.agent-note p { margin: 0 0 0.5rem; color: var(--muted); }

table.board td:first-child { font-weight: 600; }
table.board tr.chosen { background: var(--tint, #eef3f8); }
.board-domains a { display: inline-block; margin: 0 0.5rem 0.4rem 0; padding: 0.2rem 0.55rem; border: 1px solid var(--rule, #d7dee6); border-radius: 999px; font-size: 0.85rem; }
.board-domains a.chosen { background: var(--tint, #eef3f8); font-weight: 600; }

.hero { position: relative; }
.hero > * { max-width: 52rem; }
.hero .hero-mark { position: absolute; top: 2rem; right: 2.4rem; width: clamp(9rem, 18vw, 14rem); height: auto; opacity: 0.92; }
@media (max-width: 64rem) { .hero .hero-mark { position: static; width: 7rem; margin-bottom: 0.5rem; } }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4rem); margin: 0 0 1rem; letter-spacing: -0.02em; }
.hero .lede { font-size: 1.22rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin: 1.4rem 0 0.8rem; }
.actions .quiet { font-size: 0.95rem; }
.memo { font-family: var(--serif); font-size: 1.18rem; line-height: 1.5; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 1rem 1.3rem; margin: 1rem 0; box-shadow: var(--shadow); }
.answers { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin: 1.2rem 0; }
.answers .card { margin: 0; }
.answer .claim { font-size: 0.92rem; color: var(--muted); margin: 0 0 0.3rem; }
.answer p:not(.claim):not(.headline):not(.meta) { font-size: 0.97rem; }
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.steps li { counter-increment: step; position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem 0.9rem 3.1rem; font-size: 0.97rem; box-shadow: var(--shadow); margin: 0; }
.steps li::before { content: counter(step); position: absolute; left: 0.9rem; top: 0.8rem; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; font-size: 0.85rem; display: grid; place-items: center; }
.usecase h3 { margin: 0 0 0.4rem; }
.usecase .example-line { background: var(--panel-2); border-radius: 6px; padding: 0.6rem 0.8rem; font-size: 0.94rem; }
.usecase .tier { font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0.8rem 0 0; }
.rules .card h3 { margin-top: 0; }
.rules ul { margin: 0.4rem 0 0; }
/* The foundational statement: one voice, one size, quoted lines set off only by italics. */
.statement { text-align: center; font-family: var(--serif); font-size: 1.15rem; line-height: 1.6; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 2rem 0; }
.statement > * { max-width: 40rem; margin: 0.55rem auto; }
.statement .eyebrow { font-family: var(--sans); margin-bottom: 1rem; }
.statement blockquote { border: 0; padding: 0; margin: 0.55rem auto; font-size: 1.15rem; font-style: italic; color: var(--accent-ink); }
.statement blockquote p { margin: 0; }
.statement strong { font-weight: 600; font-style: normal; letter-spacing: 0.01em; }
.cta { text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.4rem 1.5rem; box-shadow: var(--shadow); }
.cta h2 { margin-top: 0; }
.cta p { max-width: 40rem; margin-inline: auto; }
.cta .actions { justify-content: center; }

/* Constitution page */
body.document main { max-width: 50rem; }
body.document .toc ol { columns: 2; column-gap: 2rem; font-size: 0.95rem; padding-left: 1.4rem; }
body.document .article h2 .numeral { display: block; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem; }
body.document section { margin: 2.2rem 0; }
body.document .statement { text-align: left; font-size: 1.05rem; }
body.document .statement > * { max-width: none; margin-inline: 0; }

@media (max-width: 48rem) {
  /* Wide tables scroll inside their own box rather than widening the page. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th { white-space: nowrap; }
  td { min-width: 6rem; }
  td:first-child { min-width: 11rem; }
  .filters input[type=text] { min-width: 0; }
}

@media (max-width: 40rem) {
  header.site { padding: 0.5rem 1rem; gap: 0.6rem 1rem; }
  header.site .account { margin-left: 0; width: 100%; }
  main { padding: 0 1rem; }
  body.document .toc ol { columns: 1; }
  body.landing section { margin: 1.6rem 0; padding: 1rem 1rem; }
}

/* Validity badges on the check page's claim-by-claim section (owner decision; 06 §4 rule 12 relaxed there).
   The badge floats left; the claim, in a larger face, flows around it. */
.answer.badged { overflow: hidden; }
.answer.badged .badge-validity { float: left; width: 5.5rem; margin: 0.15rem 1rem 0.4rem 0; text-align: center; }
.answer.badged .badge-validity .badge-mark { display: block; margin: 0 auto 0.25rem; }
.answer.badged .badge-label { font-weight: 700; font-size: 0.85rem; line-height: 1.2; }
.share .answer.badged p.claim-text { font-family: var(--serif); font-size: 1.45rem; line-height: 1.35; margin: 0 0 0.6rem; }
.answer.badged p:not(.claim-text) { clear: none; }
/* One line under the assertion and the say-instead line: never wrapped, never flowed around the badge. */
.answer.badged p.status-line { clear: both; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.78rem; letter-spacing: -0.01em; margin: 0.5rem 0 0.3rem; }
@media (max-width: 30rem) { .answer.badged .badge-validity { width: 4.5rem; } .share .answer.badged p.claim-text { font-size: 1.25rem; } }

/* /docs/api embeds Swagger UI, which ships normalize.css rather than a reset,
   so this file's bare element rules reach straight into it. Each rule below
   sits at Swagger's own specificity (.swagger-ui + element) and this sheet is
   loaded before Swagger's, so Swagger wins every tie: these only cancel what
   Swagger leaves to the browser. Values are the browser defaults, so the
   result is stock Swagger UI. */
.swagger-ui table { display: table; background: none; border: 0; border-radius: 0; overflow: visible; margin: 0; font-size: inherit; }
.swagger-ui th, .swagger-ui td, .swagger-ui td:first-child { padding: 0; border-bottom: 0; vertical-align: inherit; text-align: inherit; min-width: 0; }
.swagger-ui th { font-weight: inherit; font-size: inherit; text-transform: none; letter-spacing: normal; white-space: normal; color: inherit; background: none; }
.swagger-ui tr:last-child td, .swagger-ui tbody tr:hover td, .swagger-ui table tr:hover td { border-bottom: 0; background: none; }
.swagger-ui button { display: inline-block; font-weight: inherit; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; }
.swagger-ui code { background: none; padding: 0; border-radius: 0; overflow-wrap: normal; }
.swagger-ui pre { background: none; border: 0; border-radius: 0; padding: 0; line-height: inherit; overflow-x: visible; white-space: pre; word-break: normal; }
.swagger-ui h1, .swagger-ui h2, .swagger-ui h3, .swagger-ui h4 { font-family: inherit; font-weight: inherit; line-height: inherit; letter-spacing: normal; margin: 0; overflow-wrap: normal; }
.swagger-ui h2 { border-bottom: 0; padding-bottom: 0; }
.swagger-ui p { margin: 0; }
.swagger-ui ul, .swagger-ui ol { padding-left: 0; }
.swagger-ui li { margin: 0; }
.swagger-ui hr { border: 0; margin: 0; }
.swagger-ui label { display: inline-block; }
.swagger-ui label > input, .swagger-ui label > select, .swagger-ui label > textarea { display: inline-block; margin-top: 0; color: inherit; }
.swagger-ui input, .swagger-ui select, .swagger-ui textarea { width: auto; max-width: none; }

/* Menu descriptions, shown by tooltip_controller after a second's hover. Fixed
   rather than absolute so the nav does not have to become a positioning
   context, and pointer-events none so it can never sit between the pointer and
   the thing it describes. */
.tooltip { position: fixed; z-index: 60; max-width: 22rem; padding: 0.45rem 0.6rem; font-size: 0.82rem; line-height: 1.35;
  color: var(--panel); background: var(--ink); border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  pointer-events: none; opacity: 0; transition: opacity 120ms ease; }
.tooltip[data-shown] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tooltip { transition: none; } }
@media (max-width: 40rem) { .tooltip { display: none; } }

/* Triage lists (bug reports, feature requests): one entry per line, so a
   maintainer can scan a page of them without reading every word. The old
   screens put every field in its own table column and were unreadable. */
.triage-list { list-style: none; margin: 0.6rem 0; padding: 0; }
.triage-list li {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.4rem 0.2rem; border-bottom: 1px solid var(--rule, #e5e5e5);
}
.triage-list li.closed { opacity: 0.55; }
.triage-list .when { flex: 0 0 5.5rem; font-variant-numeric: tabular-nums; color: var(--muted, #666); font-size: 0.85rem; }
.triage-list .state { flex: 0 0 5.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, #666); white-space: nowrap; }
/* Whose turn it is, at a glance: filled for ours, hollow for theirs, half-filled
   when held open on purpose, ticked when closed. The word carries the meaning;
   the mark is only for scanning. */
.triage-list .state-needs-you { color: var(--accent-ink, #8a3324); }
.triage-list .state-held { color: var(--accent-ink, #8a3324); }
.triage-list .state-with-reporter { color: var(--muted, #666); }
.triage-list .state-agreed, .triage-list .state-lapsed { color: var(--muted, #666); }
.triage-list a { flex: 1 1 auto; }
.triage-filter strong { color: inherit; }
.triage-actions { display: inline-flex; gap: 0.4rem; }
.triage-actions form { display: inline; }
button.small, .button.small { padding: 0.2rem 0.6rem; font-size: 0.85rem; }

@media (max-width: 40rem) {
  .triage-list li { flex-wrap: wrap; gap: 0.3rem 0.5rem; }
  .triage-list .when, .triage-list .state { flex: 0 0 auto; }
  .triage-list a { flex: 1 1 100%; }
}

/* Triage: the reason a report was closed, and the form that records it. */
.triage-form textarea { width: 100%; max-width: 46rem; display: block; margin: 0.3rem 0 0.5rem; }
.triage-form label { display: block; }
.resolution { border-left: 3px solid var(--rule, #e5e5e5); padding-left: 0.7rem; margin: 0.6rem 0; }
.resolution p { margin: 0.2rem 0; }

/* The working behind a number (claim page, "show calculation"). */
table.working td { font-variant-numeric: tabular-nums; vertical-align: top; }
table.working td.factors { line-height: 1.7; }
table.working .factor { white-space: nowrap; }
p.working-sum { font-variant-numeric: tabular-nums; }

/* Which model's answer this reader sees (header). Small, quiet, and out of the
   way: it is a preference, not a control anyone needs to find. */
header.site .model-picker { display: inline-flex; align-items: center; margin: 0; }
header.site .model-picker select { font-size: 0.8rem; padding: 0.1rem 0.3rem; max-width: 12rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 40rem) { header.site .model-picker select { max-width: 8rem; } }

/* ------------------------------------------------------------------------
   Every screen, 2026-09-23. Measured with a headless browser at 390, 844,
   820, 1180 and 1440 CSS pixels: six pages ran wider than a phone, the
   claim page by 484px, and every multi-column table squeezed prose into
   strips a word wide. The rules below are what fixed each finding.
   ------------------------------------------------------------------------ */

/* A long URL or key id breaks rather than widening the page. break-word, not
   anywhere: anywhere also shrinks a table cell's minimum width, which is how a
   column ends up one word wide. */
main { overflow-wrap: break-word; }

/* The claim and section pages stack their outline above the content below
   56rem. `1fr` alone lets the column grow to its widest child, so one wide
   table widened the whole page; minmax(0, 1fr) is what the two-column form
   already said. */
@media (max-width: 56rem) { .with-outline { grid-template-columns: minmax(0, 1fr); } }

/* The reply buttons on a report or a thread wrap instead of running 150px off
   a phone. */
.triage-actions { flex-wrap: wrap; }

/* Tables as cards. enhance_controller labels each cell with its column and
   marks the table `stack`; below tablet width each row becomes a card of
   label / value lines. A table the script has not reached, or one marked
   `keep`, keeps the older behaviour of scrolling inside its own box. 60rem,
   not 48: a tablet in portrait and a phone on its side are 820 and 844px, and
   a six-column table does not fit either. */
@media (max-width: 60rem) {
  table.stack { display: block; overflow: visible; background: none; border: 0; border-radius: 0; margin: 0.6rem 0 1rem; }
  table.stack > thead, table.stack tr.head { display: none; }
  table.stack > tbody { display: block; }
  table.stack tr { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 0.6rem; padding: 0.5rem 0.8rem; }
  table.stack tr:hover td { background: none; }
  table.stack td, table.stack th { display: block; min-width: 0; border: 0; padding: 0.22rem 0; white-space: normal; background: none; }
  table.stack td:first-child { min-width: 0; }
  table.stack th { text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--ink); }
  table.stack td[data-label] { display: grid; grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr); column-gap: 0.75rem; align-items: baseline; }
  table.stack td[data-label]::before { content: attr(data-label); font-size: 0.72rem; font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); overflow-wrap: break-word; }
  table.stack td[data-label] > .cell-value { min-width: 0; }
  table.stack td:empty { display: none; }
  table.stack td.actions form, table.stack td form.inline { display: inline-block; margin: 0.15rem 0.3rem 0.15rem 0; }
}

/* Rows of prose as cards at every width: where the text is the point, a table
   gives each field a column and each column a sliver. Used for the evidence
   on a claim; the pattern is .rows > li with a lead line, a line of facts, and
   an aside. */
.rows { list-style: none; padding: 0; margin: 0.6rem 0 1rem; display: grid; gap: 0.55rem; }
.rows > li { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.7rem 0.95rem; }
.rows > li.muted-row { opacity: 0.72; }
.rows .lead { font-size: 1rem; line-height: 1.45; }
.rows .facts { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0.35rem 0 0; font-size: 0.86rem; color: var(--muted); }
.rows .facts b { font-weight: 600; color: var(--ink); }
.rows .aside { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--muted); border-left: 3px solid var(--line); padding-left: 0.6rem; }

/* Copy buttons (enhance_controller). */
/* The button sits above its block, never over it: laid over the text it hid
   part of an address that did not wrap. */
/* The copy button is an icon in the top right corner of the block it copies. */
.copy-wrap { position: relative; margin: 0.6rem 0; }
.copy-wrap > pre, .copy-wrap > .share-line { margin: 0; padding-right: 2.6rem; }
.copy-wrap > .copy-button { position: absolute; top: 0.35rem; right: 0.35rem; margin: 0; }
.copy-button { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; line-height: 1; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel); color: var(--accent-ink); cursor: pointer; vertical-align: middle; }
.copy-button.inline { width: 1.7rem; height: 1.7rem; margin-left: 0.35rem; }
.copy-button.copied { color: #1b7f3b; border-color: #1b7f3b; }
.copy-button:hover { background: var(--panel-2); }
.copy-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The header on a phone: the menus on one row, the account on the next, and
   nothing in it wrapped or crushed. The model picker had been shrunk to a
   20px sliver and the address broken across two lines. */
@media (max-width: 40rem) {
  header.site nav .menu-panel { min-width: 0; }
  header.site .account { flex-wrap: wrap; gap: 0.5rem 0.75rem; }
  header.site .account > * { flex: 0 0 auto; }
  header.site .account > a.muted { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  header.site .account input[type=submit], header.site .account button, header.site .account .button { white-space: nowrap; }
  header.site .model-picker select { max-width: 11rem; }
}

/* Touch screens: controls big enough for a finger (about 44px, the platform
   guidance on both iOS and Android), without changing how they look to a
   mouse. */
@media (pointer: coarse) {
  input[type=text], input[type=email], input[type=password], input[type=search], input[type=url], select, textarea { font-size: 16px; }
  input[type=submit], button, .button, select, input[type=text], input[type=email], input[type=password], input[type=search], input[type=url] { min-height: 2.75rem; }
  button.small, .button.small, input[type=submit].small { min-height: 2.25rem; }
  .copy-button { width: 2.5rem; height: 2.5rem; }
  header.site nav details.menu > summary { padding: 0.45rem 0; }
  header.site nav .menu-panel a { padding: 0.65rem 1rem; }
}

/* A picker of many options, as boxes to tick rather than a list box that needs
   a modifier key to choose more than one (topics on a claim). */
.pick { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); max-height: 18rem; overflow: auto; padding: 0.4rem 0.7rem; margin: 0.3rem 0 0.6rem; }
.pick fieldset { border: 0; margin: 0.3rem 0; padding: 0; }
.pick legend { font-weight: 600; font-size: 0.9rem; padding: 0; }
.pick label { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.95rem; }
.pick input[type=checkbox] { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }

/* The shareable card is drawn at 1200px for social previews; on a screen it
   scales to fit. */
main img { max-width: 100%; height: auto; }

/* A label is a sentence now ("A quoted passage is on the page but…"), and a
   pill that may not wrap ran 460px past a phone's edge. Short ones still sit on
   one line; long ones wrap inside the pill. */
.labels span, .badge { white-space: normal; max-width: 100%; overflow-wrap: break-word; }

/* Long untrusted text in a card: a preview, then the whole on request. */
details.fold > summary { color: var(--ink); font-weight: 400; list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold[open] > summary .lead { display: none; }
details.fold > summary .meta { color: var(--accent); }
.rows .triage-actions { margin: 0.5rem 0 0; }

/* Code blocks wrap at spaces first and break inside a word only when a word is
   wider than the line: break-word split "…/mcp" into "…/m" and "cp". */
pre { word-break: normal; overflow-wrap: anywhere; }

/* On a phone the header is three rows, a sixth of the screen, and it stayed
   on screen while scrolling; there it scrolls away with the page. Its controls
   keep one compact size whatever the touch rules below say. */
@media (max-width: 40rem) {
  header.site { position: static; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.25rem; }
}
header.site select, header.site input[type=submit], header.site button { min-height: 0; }
@media (pointer: coarse) { header.site select, header.site input[type=submit], header.site button { min-height: 2.25rem; } }

/* A share line is a sentence somebody pastes into a post: set as text, not as
   code, with its copy button beside it. */
.share-line { font-family: var(--sans); font-size: 0.95rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.55rem 0.75rem; margin: 0.3rem 0; display: block; overflow-wrap: anywhere; }
.share-line { white-space: pre-line; }

/* Labels sit on their boxes, whatever the markup put between them. */
form label + br { display: none; }

/* The notice for AI assistants on the landing page sits over the graph
   background; give it a backing so it can be read. */
details.agent-note > summary { background: var(--panel); border-radius: 6px; padding: 0.2rem 0.5rem; display: inline-block; }

/* Touch targets that stood alone under 24px tall: the report counts and the
   account link in the header, and the topic headings and topic links, which
   are a menu in all but name. Padding grows the target, not the type. */
@media (pointer: coarse) {
  header.site .report-badge a, header.site .account > a { padding: 0.55rem 0.2rem; }
  .card.topic h3 a { display: inline-block; padding: 0.4rem 0; }
  .card.topic p a { display: inline-block; padding: 0.45rem 0; }
}

/* The small validity badge beside an outline section, an investigation or a
   claim (owner request, 2026-09-23): the icon only, its meaning on hover. */
.reading-mark { display: inline-flex; vertical-align: -2px; margin-right: 0.3rem; cursor: help; }
.reading-mark .badge-mark { width: 14px; height: 14px; }
.tree .counts.state .reading-mark { margin-right: 0; }
.score { font-variant-numeric: tabular-nums; cursor: help; }
.score-line strong { font-variant-numeric: tabular-nums; }
.tree-score { margin-left: 0.35rem; color: var(--muted); font-size: 0.78em; font-variant-numeric: tabular-nums; cursor: help; white-space: nowrap; }

/* Review completeness (Cards::Completeness): solid = counted in review coverage,
   hatched = done only by the claim's own author, empty = not done. */
.meter { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; vertical-align: middle; }
.meter-seg { display: inline-block; width: 1.1em; height: 0.6em; border: 1px solid var(--accent); border-radius: 2px; background: transparent; }
.meter-seg.counted { background: var(--accent); }
.meter-seg.own { background: repeating-linear-gradient(135deg, var(--accent) 0 2px, transparent 2px 5px); }
.meter.compact { gap: 2px; margin-left: 0.4rem; }
.meter.compact .meter-seg { width: 0.6em; height: 0.45em; }
.meter-text { margin-left: 0.45rem; font-size: 0.85rem; color: var(--muted); }
.meter-bar-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.6rem; margin: 0.4rem 0; }
.meter-bar-line.row { display: inline-flex; margin: 0; }
.meter-bar.row { width: 5rem; height: 0.55rem; }
.meter-bar.inline { width: 2.4rem; height: 0.45rem; margin-left: 0.35rem; vertical-align: middle; }
.meter-bar { display: inline-flex; width: 12rem; max-width: 100%; height: 0.7rem; border: 1px solid var(--accent); border-radius: 3px; overflow: hidden; }
.meter-fill.counted { background: var(--accent); }
.meter-fill.own { background: repeating-linear-gradient(135deg, var(--accent) 0 2px, transparent 2px 5px); }
.meter-bar-line .meter-text { margin-left: 0; }

/* Stage 45: an assistant's first reading. A stamp in words, never a badge from the
   ten-level scale, and a dashed rule so it never reads as a scored card. */
.answer.badged .preliminary-stamp { color: var(--muted); }
.preliminary-stamp .stamp { display: inline-block; border: 2px dashed currentColor; border-radius: 6px; padding: 0.35rem 0.3rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.preliminary { clear: both; border-left: 3px dashed var(--line-strong); padding: 0.1rem 0 0.1rem 0.9rem; margin: 0.6rem 0; }
.preliminary .preliminary-label { color: var(--muted); font-size: 0.86rem; margin: 0 0 0.3rem; }
.preliminary-beneath { clear: both; font-size: 0.9rem; margin: 0.4rem 0; }
.preliminary-beneath summary { cursor: pointer; }
ul.leads { margin: 0.2rem 0 0.4rem; padding-left: 1.2rem; font-size: 0.88rem; overflow-wrap: anywhere; }