/* ForgeOS public site — text pages. Built on forgeos-site.css (FDS); only what
   those pages need beyond it lives here. No style attributes: the app serves
   these pages under style-src 'self'.
   Docs, support, status, privacy, terms, accessibility, capability, 404 and
   rate-limited: a night hero band, then a readable column with an on-page
   index beside it on wide screens. */

/* ── Hero additions ──────────────────────────────────────────────────── */
.page-hero .lede { max-width: 60ch; }
.page-hero .h1.wide { max-width: 22ch; }
.hero-note { margin: 28px 0 0; max-width: 78ch; font-size: 13.5px; line-height: 1.6; color: var(--n-ink-3); }
.hero-note .muted { margin: 0; color: var(--n-ink-3); }
.hero-note a { color: var(--indigo-300); text-decoration: underline; text-underline-offset: 3px; }
.notice-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; background: rgba(18,183,106,.16); color: #86EFAC; letter-spacing: .06em; }
/* A policy still carrying a placeholder for the company's details (computed by tools/forgeos_legal_standing.py). */
.notice-tag[data-standing=draft] { background: rgba(245,158,11,.18); color: #FCD34D; }
.notice-banner { margin-top: 32px; max-width: 760px; border: 1px solid rgba(129,140,248,.3); background: rgba(99,102,241,.08); border-radius: var(--r-lg); padding: 22px 24px; color: var(--n-ink-2); font-size: 15px; line-height: 1.65; }
.notice-banner h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; color: var(--n-ink); }
.notice-banner p { margin: 10px 0 0; }
.notice-banner a { color: var(--indigo-300); text-decoration: underline; text-underline-offset: 3px; }
.page-hero .ctas .btn-secondary { color: var(--n-ink); }

/* ── "In short" summaries ────────────────────────────────────────────── */
.in-short { margin: 32px 0 0; max-width: 760px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); padding: 20px 24px; display: grid; gap: 10px; }
.in-short dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--tint-ink); }
.in-short dd { margin: 0; padding-left: 18px; position: relative; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.in-short dd::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--path); }
.in-short b { color: var(--ink); font-weight: 600; }
.night .in-short { border-color: var(--n-line); background: rgba(22,25,35,.7); }
.night .in-short dt { color: var(--indigo-300); }
.night .in-short dd { color: var(--n-ink-2); }
.night .in-short b { color: var(--n-ink); }

/* ── The reading layout ──────────────────────────────────────────────── */
.doc { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 64px; padding-block: 72px 112px; }
.doc.solo { grid-template-columns: minmax(0, 1fr); }
.doc-side { position: sticky; top: 92px; align-self: start; }
.doc-side-h { margin: 0 0 10px; padding-left: 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.doc-toc { display: grid; gap: 2px; border-left: 1px solid var(--line); }
.doc-toc a { display: block; margin-left: -1px; padding: 8px 12px; border-left: 2px solid transparent; font-size: 14.5px; line-height: 1.35; color: var(--ink-3); }
.doc-toc a:hover { color: var(--ink); }
.doc-toc a.is-current { color: var(--tint-ink); border-left-color: var(--indigo-500); font-weight: 600; }
.doc-body { min-width: 0; max-width: 760px; }
.doc.solo .doc-body { max-width: 880px; }
.doc-body > section { scroll-margin-top: 96px; }
.doc-body > section + section, .doc-body > .doc-end { margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--line); }
/* Not the closing box: it follows whichever tab is hidden, and kept its gap. */
.doc-body > section[hidden] + section:not(.doc-end) { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-body h2 { margin: 12px 0 0; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.032em; font-weight: 650; text-wrap: balance; }
.doc-body > section > h2:first-child { margin-top: 0; }
.doc-body h3 { margin: 36px 0 0; font-size: 19px; line-height: 1.3; letter-spacing: -.02em; font-weight: 620; }
.doc-body p, .doc-body li { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.doc-body p { margin: 16px 0 0; max-width: 72ch; }
.doc-body strong { color: var(--ink); font-weight: 600; }
.doc-body a:not(.btn) { color: var(--tint-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc-body code, .doc-body .mono { font-family: var(--mono); font-size: .88em; }
.doc-body code { padding: 1px 6px; border-radius: 6px; background: var(--surface-3); color: var(--ink); }
.muted { color: var(--ink-3); }
.small { font-size: 14px; }
.no-margin { margin: 0; }
.mt-sm { margin-top: 12px; }

/* Cards inside the column */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.cards { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.doc-body .card { padding: 20px 22px; }
.doc-body .card h3 { margin: 0; font-size: 17px; letter-spacing: -.015em; }
.doc-body .card p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.doc-body .card .step { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--tint-ink); }

/* Tables: a focusable scroll region, so wide ones never widen the page */
.table-scroll { margin-top: 24px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.table-scroll table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table-scroll table:has(th:nth-child(3)) { min-width: 560px; }
.table-scroll caption { caption-side: top; text-align: left; padding: 14px 18px; font-size: 13.5px; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.table-scroll th { text-align: left; padding: 11px 18px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); }
.table-scroll td { padding: 14px 18px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.55; color: var(--ink-2); }
.table-scroll td:first-child { color: var(--ink); font-weight: 550; }
.table-scroll td .small { display: block; margin-top: 6px; font-weight: 400; }

/* Callouts */
.note { margin: 24px 0 0; padding: 16px 20px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--indigo-500) 26%, var(--line)); background: color-mix(in srgb, var(--indigo-500) 7%, var(--surface)); font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.doc-body .note { font-size: 15px; max-width: none; }
.note-warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 9%, var(--surface)); }

/* State pills (also drawn by site.js on /status) */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-family: var(--mono); font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--surface-3); color: var(--ink-2); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }
.pill-go { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok-ink); }
.pill-stop { background: color-mix(in srgb, var(--err) 14%, var(--surface)); color: var(--m19-state-danger-ink); }
/* Its ink was 70% --warn into --ink: 3.6:1 on this fill at 12px (axe, /status 2026-10-09). */
.pill-wait { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--m19-state-warning-ink); }
.pill-info { background: color-mix(in srgb, var(--indigo-500) 13%, var(--surface)); color: var(--tint-ink); }

/* Closing band inside the column */
.doc-end { text-align: center; }
.doc-end p { margin-inline: auto; }
.doc-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.doc-end .doc-ctas { justify-content: center; }

/* Figures: product screenshots */
.shot { margin: 32px 0 0; }
.shot img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--e-2); }
.shot figcaption { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); }

/* ── /status ─────────────────────────────────────────────────────────── */
#status-body { margin-top: 24px; display: grid; gap: 12px; }
.status-hero, .state { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); padding: 20px 22px; }
.status-hero h3, .state h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.state p { margin: 8px 0 0; }
.state .btn { margin-top: 14px; }
.state[data-tone="error"] { border-color: color-mix(in srgb, var(--err) 45%, var(--line)); background: color-mix(in srgb, var(--err) 6%, var(--surface)); }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.status-hero .muted { margin: 8px 0 0; font-size: 15px; }
.status-matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.status-cell { border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 16px 18px; }
.status-cell[data-state="operational"] { border-left: 3px solid var(--ok); }
.status-cell[data-state="down"] { border-left: 3px solid var(--err); }
.status-cell strong { font-size: 15px; }
.status-cell .consequence { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.skeleton { height: 14px; border-radius: 7px; background: var(--surface-3); animation: pulse 1.4s ease-in-out infinite; }
.skeleton-60 { width: 60%; }
.skeleton-85 { width: 85%; margin-top: 12px; }
@keyframes pulse { 50% { opacity: .45; } }

/* ── /capability ─────────────────────────────────────────────────────── */
.figures { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.figure-tile { border: 1px solid var(--n-line); border-radius: 20px; padding: 22px; background: var(--n-200); }
.figure-tile p { margin: 0; }
.figures-sub { margin: 40px 0 0; font-size: 19px; line-height: 1.3; letter-spacing: -.02em; font-weight: 620; }
.figures-sub-note { margin: 8px 0 0; max-width: 64ch; color: var(--n-ink-3); }  /* on the night band, like .figure-note */
.figures-secondary { margin-top: 16px; }
.figures-secondary .figure-tile { padding: 16px 18px; }
.figures-secondary .figure-label { margin-top: 0 !important; color: var(--n-ink); }
.figure-value { font-size: 44px; font-weight: 660; letter-spacing: -.04em; line-height: 1; color: var(--n-ink); }
.figure-unit { font-size: .55em; margin-left: 2px; color: var(--n-ink-2); }
.figure-label { margin-top: 12px !important; font-size: 14.5px; line-height: 1.5; color: var(--n-ink-2); }
.figure-note { margin-top: 12px !important; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--n-ink-3); }
.record { margin-top: 28px; display: grid; gap: 12px; }
.record > div { border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 18px 20px; }
.record .k { margin: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tint-ink); }
.record .v { margin: 8px 0 0; font-size: 15.5px; }
.record .v strong:first-child { font-size: 17px; }
.term { margin-top: 28px; background: var(--n-050); border: 1px solid var(--n-line); border-radius: 16px; padding: 18px 20px; overflow-x: auto; }
.doc-body .term .out { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.8; color: var(--n-ink-2); white-space: pre; max-width: none; }
.doc-body .term .out[data-receipt-claim] { color: #FDB022; }

/* ── 404 and 429 ─────────────────────────────────────────────────────── */
.err-hero { min-height: 56vh; display: flex; align-items: center; }
.err-code { font-family: var(--mono); font-size: clamp(64px, 12vw, 148px); font-weight: 600; line-height: 1; letter-spacing: -.06em; margin: 0 0 8px; }
.err-hero .note { max-width: 60ch; background: rgba(255,255,255,.04); border-color: var(--n-line); color: var(--n-ink-2); }
.err-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.err-links .card { display: block; }
.err-links .card b { display: block; font-size: 16px; letter-spacing: -.01em; color: var(--ink); }
.err-links .card span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--ink-3); }
.err-links a.card:hover b { color: var(--tint-ink); }

/* ── Narrow screens ──────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 40px 88px; }
  .doc-side { position: sticky; top: 68px; z-index: 5; margin-inline: calc(-1 * var(--gutter)); padding: 10px var(--gutter); background: color-mix(in srgb, var(--canvas) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
  .doc-side-h { display: none; }
  .doc-toc { display: flex; gap: 6px; overflow-x: auto; border-left: 0; scrollbar-width: none; }
  .doc-toc a { flex: none; margin: 0; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-size: 14px; white-space: nowrap; }
  .doc-toc a.is-current { border-color: var(--indigo-500); background: color-mix(in srgb, var(--indigo-500) 10%, var(--surface)); }
  .doc-side.static { position: static; }
}
@media (max-width: 700px) {
  .grid-2 { grid-template-columns: 1fr; }
  .doc-body > section + section, .doc-body > .doc-end { margin-top: 48px; padding-top: 40px; }
  .doc-body p, .doc-body li { font-size: 16px; }
  .notice-banner { padding: 18px; }
  .figure-value { font-size: 38px; }
}
@media print {
  .doc { display: block; padding: 0; }
  .doc-side { display: none; }
  .doc-body > section[hidden] { display: block; }
}

/* ── /press ──────────────────────────────────────────────────────────── */
.press-copy { margin: 20px 0 0; padding: 18px 22px; border: 1px solid var(--line); border-left: 3px solid var(--tint-ink); border-radius: 14px; background: var(--surface); }
.press-copy p { margin: 0; color: var(--ink); }
.press-copy-k { margin: 28px 0 0 !important; font-family: var(--mono); font-size: 11.5px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--tint-ink) !important; }
.press-marks { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.press-mark { margin: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.press-mark-ground { display: grid; place-items: center; min-height: 148px; padding: 24px; }
.press-mark-ground[data-ground="light"] { background: #F7F8FC; }
.press-mark-ground[data-ground="dark"] { background: #0E1017; }
.press-mark-ground img { width: 72px; height: 72px; }
.press-mark figcaption { padding: 12px 16px 14px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.press-shots { display: grid; gap: 8px; }