/*
 * Styling for the static, server-addressable content pages.
 *
 * These pages exist to be found by a search engine, which means they must be
 * real HTML with real text — not the SPA shell. They therefore cannot import
 * the app's theme module, so the palette is restated here. The values are
 * copied from the app's token set (ink #11161C, gold #8A6514, paper #F2F4F7)
 * so a reader who lands here from a search result and then clicks through to
 * the platform does not feel handed to a different company.
 *
 * One stylesheet rather than three inline copies: it is cached across the set,
 * and a palette correction happens in one place instead of drifting between
 * pages nobody remembers to check.
 */

:root {
  --paper:   #F2F4F7;
  --card:    #FFFFFF;
  --ink:     #11161C;
  --text:    #46505C;
  --dim:     rgba(17, 22, 28, .74);
  --line:    rgba(17, 22, 28, .12);
  --line2:   rgba(17, 22, 28, .20);
  --gold:    #8A6514;
  --gold-dk: #5C4309;
  --gold-bg: rgba(138, 101, 20, .07);
  --red:     #C21F1F;
  --green:   #12704A;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  --shadow: 0 1px 3px rgba(17,22,28,.08), 0 4px 12px rgba(17,22,28,.05);
}

/* The viewer's OS preference, when they have expressed no explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #0B0F14;
    --card:    #121821;
    --ink:     #F4F6F8;
    --text:    rgba(255, 255, 255, .78);
    --dim:     rgba(255, 255, 255, .68);
    --line:    rgba(255, 255, 255, .12);
    --line2:   rgba(255, 255, 255, .20);
    --gold:    #D8AE4E;
    --gold-dk: #EBC876;
    --gold-bg: rgba(216, 174, 78, .10);
    --red:     #F08A8A;
    --green:   #58D3A0;
    --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 22px; }

/* ── Masthead ───────────────────────────────────────────────────────────── */

header.top {
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
header.top .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 16px; padding-bottom: 16px;
}
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.brand__name {
  font-weight: 800; letter-spacing: -.02em; font-size: 1.0625rem; color: var(--ink);
}
.brand__tag {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold);
}
.cta {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none;
  color: var(--ink); border: 1px solid var(--line2); border-radius: 5px;
  padding: 8px 14px; white-space: nowrap;
}
.cta:hover, .cta:focus-visible { border-color: var(--gold); color: var(--gold-dk); }

/* ── Article ────────────────────────────────────────────────────────────── */

article { padding: 46px 0 20px; }

.eyebrow {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 12px;
}

h1 {
  font-size: clamp(1.75rem, 4.2vw, 2.5rem); line-height: 1.15;
  letter-spacing: -.025em; color: var(--ink); margin: 0 0 18px;
  text-wrap: balance;
}

.standfirst {
  font-size: 1.125rem; line-height: 1.65; color: var(--dim);
  margin: 0 0 34px;
}

h2 {
  font-size: 1.3125rem; line-height: 1.3; letter-spacing: -.015em;
  color: var(--ink); margin: 40px 0 12px; text-wrap: balance;
}

h3 {
  font-size: 1.0625rem; line-height: 1.35; color: var(--ink);
  margin: 28px 0 8px;
}

p { margin: 0 0 16px; }

a { color: var(--gold-dk); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--gold); }

strong { color: var(--ink); font-weight: 650; }

ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin: 0 0 8px; }

code {
  font-family: var(--mono); font-size: .875em;
  background: var(--gold-bg); color: var(--gold-dk);
  padding: 1px 5px; border-radius: 4px;
  overflow-wrap: anywhere;
}

blockquote {
  margin: 22px 0; padding: 2px 0 2px 18px;
  border-left: 2px solid var(--gold);
  color: var(--dim); font-style: normal;
}

/* Wide content must scroll inside itself, never the page body. */
.scroll { overflow-x: auto; margin: 0 0 20px; }

table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
th {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim); font-weight: 500;
  white-space: nowrap;
}
td:first-child { color: var(--ink); }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 20px 22px; margin: 24px 0;
  box-shadow: var(--shadow);
}
.card > :last-child { margin-bottom: 0; }

.note {
  font-size: .9375rem; color: var(--dim);
  border-top: 1px solid var(--line); padding-top: 18px; margin-top: 34px;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

footer.end {
  border-top: 1px solid var(--line); margin-top: 46px;
  padding: 26px 0 44px; font-size: .875rem; color: var(--dim);
}
footer.end .wrap > p { margin: 0 0 10px; }
.more { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 18px; padding: 0; list-style: none; }
.more li { margin: 0; }

:where(a, .cta):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Diagrams ───────────────────────────────────────────────────────────────
 *
 * Inline SVG rather than images: it stays sharp, it costs no extra request,
 * its text is selectable and readable by a screen reader, and — the reason
 * that matters here — a search engine can read the labels. A PNG of an
 * architecture diagram is, to a crawler, a blank rectangle.
 *
 * Every stroke and fill below resolves through currentColor or a CSS variable,
 * so the diagrams follow the light/dark switch with the rest of the page
 * instead of becoming a white slab on a dark ground.
 */

figure.dia {
  margin: 26px 0; padding: 20px 18px 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow);
}
figure.dia svg { display: block; width: 100%; height: auto; overflow: visible; }
figure.dia figcaption {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: .8125rem; line-height: 1.6; color: var(--dim);
}

.dia-box { fill: var(--card); stroke: var(--line2); stroke-width: 1.25; }
.dia-box--accent { fill: var(--gold-bg); stroke: var(--gold); }
.dia-label { fill: var(--ink); font-family: var(--sans); font-size: 12px; font-weight: 600; }
.dia-sub   { fill: var(--dim); font-family: var(--sans); font-size: 10.5px; }
.dia-mono  { fill: var(--gold); font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; }
.dia-line  { stroke: var(--line2); stroke-width: 1.25; fill: none; }
.dia-line--gold { stroke: var(--gold); stroke-width: 1.5; fill: none; }
.dia-line--cut  { stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; }
.dia-ok    { fill: var(--green); font-family: var(--mono); font-size: 10px; }
.dia-no    { fill: var(--red); font-family: var(--mono); font-size: 10px; }

/* Gate list — the six conditions, as a numbered ladder. */
.gate { list-style: none; margin: 22px 0; padding: 0; counter-reset: gate; }
.gate li {
  counter-increment: gate; position: relative;
  padding: 12px 0 12px 46px; border-bottom: 1px solid var(--line);
}
.gate li:last-child { border-bottom: 0; }
.gate li::before {
  content: counter(gate); position: absolute; left: 0; top: 12px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold-bg); color: var(--gold-dk);
  border: 1px solid var(--gold);
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.gate b { color: var(--ink); display: block; font-weight: 650; }
.gate code { font-size: .8125em; }

/*
 * Forms on the static pages — currently the public disclosure form.
 *
 * Built on the same tokens as everything above, so the form follows the
 * reader's theme with no dark-mode block of its own. Inputs are 16px so a phone
 * does not zoom the page on focus, which on a long report form loses the
 * reporter's place.
 */
/* An author display rule beats the browser's own [hidden] style, so without
   this the form stayed on screen after a successful send, under the
   confirmation, with its button stuck on "Sending…". */
[hidden] { display: none !important; }
.vdp-form { display: grid; gap: 16px; margin: 20px 0 8px; }
.vdp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .vdp-row { grid-template-columns: 1fr; } }
.vdp-field { display: grid; gap: 6px; }
.vdp-field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.vdp-optional { font-weight: 400; color: var(--dim); font-size: 13px; margin-left: 4px; }
.vdp-field input, .vdp-field textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--card);
  border: 1px solid var(--line2); border-radius: 4px; padding: 10px 12px; width: 100%;
  box-sizing: border-box;
}
.vdp-field textarea { resize: vertical; line-height: 1.5; }
.vdp-field input:focus-visible, .vdp-field textarea:focus-visible, .vdp-submit:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.vdp-submit {
  justify-self: start; font: inherit; font-weight: 600; font-size: 15px;
  color: #FFFFFF; background: var(--gold); border: 0; border-radius: 4px;
  padding: 11px 22px; cursor: pointer;
}
.vdp-submit:hover { background: var(--gold-dk); }
.vdp-submit:disabled { opacity: .6; cursor: progress; }
.vdp-privacy { font-size: 14px; color: var(--dim); margin: 0; }
.vdp-error { color: var(--red); font-weight: 600; margin: 0; }
.vdp-pre { white-space: pre-wrap; margin: 0; }
.vdp-mono { font-family: var(--mono); }
/* Off-screen rather than display:none — see the honeypot note in the page. */
.vdp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/*
 * Enforced-guarantee list — used on /snapshot/ for the things the software
 * refuses to do.
 *
 * Deliberately not numbered, unlike .gate above. The gate is a real sequence:
 * three conditions that must exist before an engagement activates. These are a
 * set, with no order between them, and numbering them would assert a ladder
 * that does not exist. The left rule marks each as its own claim instead.
 */
.enforced { list-style: none; margin: 22px 0; padding: 0; }
.enforced li {
  margin: 0 0 14px; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--gold);
}
.enforced li:last-child { margin-bottom: 0; }
.enforced strong { color: var(--ink); }

/* Scoring table on /impact-scoring/ — two rows of the same flaw, different answer. */
.tablewrap { overflow-x: auto; margin: 22px 0; }
table.score { border-collapse: collapse; width: 100%; font-size: 15px; }
table.score th, table.score td {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.score th {
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--dim); font-weight: 600; white-space: nowrap;
}
table.score td:nth-child(n+2) { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.score tbody tr:last-child td { border-bottom: 0; }
pre.vector {
  font-family: var(--mono); font-size: 13px; line-height: 1.6;
  background: var(--gold-bg); border-left: 3px solid var(--gold);
  padding: 12px 14px; overflow-x: auto; margin: 18px 0;
}