/*
 * Methodology page — styling.
 *
 * Same token names as public/screen/style.css on purpose: this page
 * exists to be linked FROM the killer screen ("how we calculate this"),
 * so it should read as the same product, not a separate marketing site
 * bolted on. Self-contained rather than a shared stylesheet, matching
 * how every public/* page in this repo already works.
 */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --panel:      #101216;
  --panel-2:    #191c22;
  --panel-ink:  #eceae5;
  --panel-mute: #8d939c;
  --panel-rule: #2b3038;
  --panel-acc:  #ff5a4d;
  --good:       #4ade80;
  --bad:        #f87171;

  --display: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--panel);
  color: var(--panel-ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--panel-acc); }
:focus-visible { outline: 2px solid var(--panel-acc); outline-offset: 2px; }

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

/* ── header ───────────────────────────────────────────────────────── */

header { padding: 28px 0 8px; }
.back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px; color: var(--panel-mute);
  text-decoration: none; margin-bottom: 20px;
}
.wordmark { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; font-size: 16px; margin: 0 0 14px; }
h1 {
  font-family: var(--display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(28px, 6vw, 38px); line-height: 1.08; margin: 0 0 14px;
}
.lede { font-size: 18px; line-height: 1.5; color: var(--panel-ink); margin: 0 0 8px; }
.meta { font-family: var(--mono); font-size: 11.5px; color: var(--panel-mute); margin: 18px 0 0; }

/* ── sections ─────────────────────────────────────────────────────── */

section { padding: 40px 0 0; border-top: 1px solid var(--panel-rule); margin-top: 40px; }
section:first-of-type { border-top: none; margin-top: 0; }

.kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--panel-acc); margin: 0 0 10px;
}
h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; font-size: 23px; margin: 0 0 14px; }
h3 { font-family: var(--display); font-weight: 700; font-size: 16px; margin: 22px 0 8px; }
p { margin: 0 0 14px; }
strong { color: #fff; font-weight: 700; }
code {
  font-family: var(--mono); font-size: 13.5px; background: var(--panel-2);
  border: 1px solid var(--panel-rule); border-radius: 4px; padding: 1px 5px;
}

/* ── worked-example panel ────────────────────────────────────────── */

.worked {
  background: var(--panel-2); border: 1px solid var(--panel-rule); border-radius: 10px;
  padding: 16px 18px; margin: 18px 0;
}
.worked .lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--panel-mute); margin: 0 0 8px;
}
.worked .formula {
  font-family: var(--mono); font-size: 13.5px; color: var(--panel-ink);
  overflow-x: auto; white-space: pre; margin: 0 0 12px; line-height: 1.6;
}
.worked .result { font-family: var(--mono); font-size: 13.5px; }
.worked .result b { color: var(--panel-acc); }

/* ── floor table ──────────────────────────────────────────────────── */

.floors { display: flex; flex-direction: column; gap: 1px; background: var(--panel-rule); border: 1px solid var(--panel-rule); border-radius: 10px; overflow: hidden; margin: 18px 0; }
.floor-row { background: var(--panel); padding: 14px 16px; display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: center; }
.floor-row .n { font-family: var(--mono); font-weight: 700; font-size: 14px; }
.floor-row .n.hidden { color: var(--panel-mute); }
.floor-row .n.low { color: #f5b942; }
.floor-row .n.confident { color: var(--good); }
.floor-row p { margin: 0; font-size: 14.5px; color: var(--panel-mute); }

/* ── quiet-list ───────────────────────────────────────────────────── */

ul.quiet { margin: 0 0 14px; padding-left: 20px; }
ul.quiet li { margin-bottom: 8px; }
ul.quiet li::marker { color: var(--panel-acc); }

/* ── footer ───────────────────────────────────────────────────────── */

footer {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--panel-rule);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.9; color: var(--panel-mute);
}
footer a { color: var(--panel-mute); text-decoration: underline; text-underline-offset: 2px; }