/* Trumis — shared chrome for document pages, 2026 theme.
 *
 * Drop-in replacement for /assets/site.css. It implements the *same class
 * vocabulary* (.wrap, header.top, main.doc, .callout, .notice, table.spec,
 * .grid/.card, footer, .btn…) in the 2026 design language that /assets/
 * home-2026.css introduced on the homepage: cool slate ink on a pale
 * blue-grey page, teal accent, Inter, soft radii, blurred elevation.
 *
 * Because the class names are unchanged, converting a page is a stylesheet
 * swap — no markup churn, and /assets/site-shell.js keeps working as-is.
 *
 * Pairs with /assets/inter.css (self-hosted; the site CSP is font-src 'self').
 */

:root {
  --page: #eef2f3;
  --shell: #f7f9fa;
  --surface: #ffffff;
  --ink: #152333;
  --ink-2: #2b3d4c;
  --body: #4f616d;
  --muted: #5b6b76;
  --rule: #dfe6ea;
  --teal: #087f83;
  --teal-dark: #056b6e;
  --teal-deep: #066165;
  --teal-tint: #e3f4f2;
  --teal-line: #bde0dc;
  --teal-bright: #7fd6d2;
  --dark: #152333;
  --dark-hover: #0c1826;
  --on-dark: #b6c5cf;
  --confirm: #0f7a52;
  --danger: #b4442f;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lift: 0 18px 55px rgba(33, 54, 69, .08);
  --lift-strong: 0 18px 55px rgba(33, 54, 69, .10);
  --lift-hover: 0 8px 22px rgba(33, 54, 69, .10);

  /* Compatibility aliases so pages still carrying Drafted Letter variable
     names render in the new palette instead of falling back to nothing. */
  --paper: var(--page);
  --paper-lift: var(--surface);
  --bg: var(--page);
  --panel: var(--surface);
  --card: var(--surface);
  --tint: var(--teal-tint);
  --shadow: rgba(33, 54, 69, .10);
  --line: var(--rule);
  --line-soft: var(--teal-line);
  --khaki: var(--muted);
  --faint: var(--muted);
  --accent: var(--teal);
  --serif: var(--sans);
  --code: var(--ink);
  --green: var(--dark);
  --green-ink: var(--on-dark);
  --ok: var(--confirm);
  --ok-bg: var(--teal-tint);
  --salmon: var(--teal-bright);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); background: var(--page);
  color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased;
}
/* The 2026 artboard: a 1500px panel floating on the page tint, holding a
   1180px content column inside a 32px gutter. The gutter belongs to the
   header, main and footer individually, not to .wrap, so the masthead rule
   runs the full width of the panel the way the design has it. */
.wrap { max-width: 1500px; margin: 0 auto; background: var(--shell); box-shadow: var(--lift); }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--teal);
  color: #fff; padding: 10px 16px; z-index: 50;
  font-size: 13px; font-weight: 700; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px;
}

/* ---- Masthead ----
   Sticky, and spanning the panel rather than the content column: the design
   sets the brand 32px in from the panel edge, so the rule under the masthead
   ends where the panel ends. Identical to the homepage's .h26-head and to the
   compact guide template. */
header.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 32px; min-height: 80px;
  background: var(--surface); border-bottom: 1px solid var(--rule);
}
header.top .brand {
  display: flex; align-items: center; gap: 11px;
  color: var(--ink); text-decoration: none; text-transform: none; line-height: 1;
}
header.top .brand .mark { display: block; width: 34px; height: 34px; border-radius: 8px; flex: none; }
header.top .brand .word { font-size: 27px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
header.top .brand .tag {
  font-size: 11px; color: var(--muted); letter-spacing: .09em;
  font-weight: 700; text-transform: uppercase; white-space: nowrap;
  padding-left: 14px; border-left: 1px solid var(--rule); align-self: stretch;
  display: flex; align-items: center;
}
@media (max-width: 460px) { header.top .brand .tag { display: none; } }
header.top nav {
  margin-left: auto; display: flex; gap: 8px; align-items: center;
  font-size: 13px; color: var(--ink);
}
header.top nav a {
  color: var(--ink); text-decoration: none; font-weight: 600;
  padding: 9px 12px; border-radius: 8px; white-space: nowrap;
}
header.top nav a:hover { color: var(--teal-deep); background: var(--teal-tint); }
header.top nav a[aria-current="page"], header.top nav a.active {
  color: var(--teal-deep); background: var(--teal-tint);
}

.mobile-menu { display: none; }
.mobile-menu summary {
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 8px; padding: 9px 13px; list-style: none;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary::after { content: " +"; color: var(--teal); }
.mobile-menu[open] summary::after { content: " −"; }
.mobile-menu nav {
  position: absolute; right: 20px; top: 70px; z-index: 40;
  min-width: 250px; padding: 8px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--lift-strong);
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
}
.mobile-menu nav a {
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 11px 12px; border-bottom: 1px solid var(--rule); border-radius: 0;
}
.mobile-menu nav a:last-child { border-bottom: 0; }
.mobile-menu nav a.primary {
  background: var(--teal); color: #fff; border-radius: 8px; margin-top: 8px; border-bottom: 0;
}
.mobile-menu nav form { margin: 0; }
.mobile-menu nav form button {
  width: 100%; border: 0; border-bottom: 1px solid var(--rule); background: none;
  color: var(--teal-deep); text-align: left; font: 600 14px var(--sans);
  padding: 11px 12px; cursor: pointer;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block; background: var(--teal); color: #fff;
  text-decoration: none; font-family: var(--sans); font-size: 15px; font-weight: 700;
  padding: 14px 24px; border: 1px solid var(--teal); border-radius: 10px;
}
.btn:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
.doc a.btn { color: #fff; text-decoration: none; }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--rule); }
.doc a.btn.ghost { color: var(--ink); }
.btn.ghost:hover { background: #f0f8f7; border-color: var(--teal-line); color: var(--ink); }
.btn.dark, header.top nav a.btn, header.top nav a.btn:hover {
  background: var(--dark); color: #fff; border: 1px solid var(--dark);
  font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: 8px;
}
header.top nav a.btn:hover { background: var(--dark-hover); border-color: var(--dark-hover); }
.btn.small { font-size: 13px; padding: 10px 16px; border-radius: 8px; }
/* The donate button keeps its outline-fill behaviour, re-tinted. */
header.top nav form.donate-form { margin: 0; }
header.top nav .donate, .donate {
  border: 1px solid var(--teal-line); color: var(--teal-deep); background: var(--teal-tint);
  border-radius: 8px; padding: 9px 14px; font: 700 13px var(--sans); cursor: pointer;
}
header.top nav .donate:hover, .donate:hover { background: var(--teal); color: #fff; border-color: var(--teal); }

.mono-label, .kicker {
  font-family: var(--sans); font-size: 11px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--teal);
}
.mono-note { color: var(--muted); font-size: 12px; }
.head-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }

/* ---- Document pages ----
   `.doc` alone is the prose measure — 820px of text inside the 32px gutter.
   `.doc.wide` is the designed measure: the 1180px column the About, Advocates
   and Research layouts are drawn against. Both are centred in the panel. */
main.doc { max-width: 884px; margin: 0 auto; padding: 56px 32px 24px; }
main.doc.wide { max-width: 1244px; }
main.doc .crumb {
  font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--teal); margin: 0 0 20px;
}
main.doc .crumb a { color: var(--muted); text-decoration: none; }
main.doc .crumb a:hover { color: var(--teal); }
main.doc h1 {
  font-size: 46px; font-weight: 760; line-height: 1.08;
  margin: 0 0 12px; letter-spacing: -.04em; text-wrap: pretty;
}
main.doc p.updated {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 26px;
}
main.doc p.lead { font-size: 18px; line-height: 1.6; color: var(--body); margin: 0 0 26px; }
main.doc h2 {
  font-size: 27px; font-weight: 760; margin: 42px 0 12px; padding-top: 26px;
  border-top: 1px solid var(--rule); letter-spacing: -.03em; text-wrap: pretty;
}
/* The prose document separates sections with a hairline above each h2. The
   designed layouts don't: they set their own rules and rely on whitespace, so
   the inherited hairline showed up as a stub across one grid cell. */
main.doc.wide h2 { border-top: 0; padding-top: 0; }
main.doc h3 { font-size: 19px; font-weight: 700; margin: 26px 0 8px; letter-spacing: -.02em; }
main.doc p, main.doc li { color: var(--body); font-size: 16.5px; line-height: 1.65; }
main.doc ul, main.doc ol { padding-left: 22px; }
main.doc li { margin-bottom: 9px; }
main.doc li strong, main.doc p strong { color: var(--ink); }
main.doc a { color: var(--teal); text-decoration: none; font-weight: 600; }
main.doc a:hover { color: var(--teal-dark); text-decoration: underline; }
main.doc em { color: var(--ink); font-style: italic; }
main p a, main li a, footer p a, a.plain, .mono-note a {
  text-decoration: underline; text-underline-offset: 2px;
}

.callout {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: var(--lift); padding: 24px 28px; margin: 0 0 16px;
}
.callout h2 {
  margin: 0 0 10px !important; padding: 0 !important; border: none !important;
  font-size: 11px !important; font-weight: 800 !important;
  letter-spacing: .09em; text-transform: uppercase; color: var(--teal) !important;
}
.callout ul { margin: 0; }
.callout li { color: var(--ink-2); }

.notice {
  background: var(--teal-tint); border: 1px solid var(--teal-line); border-radius: 12px;
  padding: 16px 20px; margin: 18px 0; font-size: 15px; color: var(--ink-2);
}
.notice strong { color: var(--ink); }

table.spec {
  width: 100%; border-collapse: collapse; margin: 16px 0 10px;
  font-size: 15px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
}
table.spec th, table.spec td {
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--rule);
  vertical-align: top; color: var(--body);
}
table.spec th {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); background: var(--shell);
}
table.spec tr:last-child td { border-bottom: none; }
table.spec code { font-size: .85em; }
.table-scroll { overflow-x: auto; }

pre {
  background: var(--dark); color: #e3ecf2; border-radius: 12px;
  padding: 22px 24px; overflow-x: auto; font-size: 13.5px; line-height: 1.8;
  margin: 14px 0; max-width: 100%;
}
.grid > *, footer .cols > div { min-width: 0; }
code { font-family: var(--mono); }
p code, li code, td code {
  background: var(--teal-tint); border: 1px solid var(--teal-line); border-radius: 5px;
  padding: 1px 6px; font-size: .85em; color: var(--teal-deep);
}
pre code { background: none; border: none; padding: 0; color: inherit; }
pre .s, pre em { color: var(--teal-bright); font-style: normal; }

/* the sample complaint on /organisations — a letter artefact */
pre.document {
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 14px; box-shadow: var(--lift-strong);
  font-family: var(--sans); font-size: 15px; line-height: 1.65;
  white-space: pre-wrap; word-wrap: break-word; padding: 32px 34px;
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.card h3 { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.card p { margin: 0; color: var(--body); font-size: 15px; line-height: 1.6; }
.card .k, .card .price small {
  font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--teal);
}
.card .price { font-size: 30px; font-weight: 760; margin: 0; color: var(--ink); letter-spacing: -.03em; }
.card.featured { background: var(--dark); border-color: var(--dark); color: #fff; }
.card.featured h3, .card.featured .price { color: #fff; }
.card.featured p { color: var(--on-dark); }
.card.featured .k, .card.featured .price small { color: var(--teal-bright); }
.card.featured a { color: var(--teal-bright); }

.ok-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 8px; vertical-align: baseline; background: var(--confirm);
}

/* ---- Footer ----
   Light and inside the content column, closed off by a hairline rule — the
   same footer the homepage renders as .h26-foot, and the one every board in
   the design set draws. It is not a full-bleed dark band. */
footer {
  max-width: 1244px; margin: 64px auto 0; padding: 26px 32px 32px;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px;
}
footer a { color: var(--body); text-decoration: none; font-weight: 600; }
footer a:hover { color: var(--teal); }
footer p {
  margin: 0; max-width: 60ch; color: var(--muted);
  font-size: 11px; font-weight: 700; line-height: 1.7;
  letter-spacing: .05em; text-transform: uppercase;
}
footer p + p { margin-top: 12px; font-weight: 400; letter-spacing: .04em; }
/* On a prose page the footer follows the reading measure rather than the
   designed 1180px column, so its rule lines up with the text above it. */
main.doc:not(.wide) ~ footer { max-width: 884px; }
footer .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
footer .cols div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
footer .cols a { font-size: 13px; padding: 2px 0; }

@media (max-width: 980px) {
  main.doc h1 { font-size: 38px; }
}
@media (max-width: 900px) {
  header.top { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  main.doc { padding: 36px 20px 20px; }
  main.doc h1 { font-size: 30px; letter-spacing: -.03em; }
  main.doc h2 { font-size: 23px; }
  main.doc p.lead { font-size: 16.5px; }

  header.top { flex-wrap: wrap; padding: 14px 20px; gap: 12px; }
  header.top .brand { flex-basis: 100%; }
  header.top nav {
    margin-left: 0; width: 100%; justify-content: flex-start;
    gap: 6px; flex-wrap: wrap; font-size: 13px;
  }
  header.top nav a.hide-sm { display: none; }
  header.top:has(.mobile-menu) { flex-wrap: nowrap; position: relative; }
  header.top:has(.mobile-menu) .brand { flex-basis: auto; }
  header.top:has(.mobile-menu) > nav { display: none; }
  header.top:has(.mobile-menu) .mobile-menu { display: block; margin-left: auto; }
  header.top .mobile-menu nav { width: auto; align-items: stretch; gap: 0; flex-wrap: nowrap; }

  pre { padding: 16px 14px; font-size: 12.5px; }
  footer { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 20px 32px; }
}