/* === CLEANSE — REFINED EDITORIAL TRUST === */
/* Zero external refs. system-ui only. Dark/OLED. WCAG AA. No JS. */

:root {
  --bg:         #0a0a0a;
  --surface-0:  #0f0f0f;
  --surface-1:  #161616;
  --surface-2:  #1d1d1d;
  --surface-3:  #242424;
  --line:       #272727;
  --line-soft:  #1c1c1c;
  --line-strong:#333333;
  --fg:         #ebebeb;
  --fg-2:       #b0b0b0;
  --fg-3:       #808080;
  --fg-4:       #767676;
  --accent:     #f59e0b;
  --accent-hi:  #fbbf24;
  --accent-dim: #c47d08;
  --accent-bg:  rgba(245,158,11,.06);
  --accent-ring:rgba(245,158,11,.22);
  --ok:         #34d399;
  --ok-bg:      rgba(52,211,153,.07);
  --warn:       #fbbf24;
  --warn-bg:    rgba(251,191,36,.07);
  --err:        #f87171;
  --err-bg:     rgba(248,113,113,.08);
  --radius:     3px;
  --radius-md:  5px;
  --radius-lg:  7px;
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    16px;
  --text-lg:    18px;
  --text-xl:    22px;
  --text-2xl:   28px;
  --text-3xl:   36px;
  --text-4xl:   46px;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --t-fast: 120ms ease;
  --t-base: 180ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -999px;
  background: var(--accent);
  color: #000;
  font-size: var(--text-sm);
  font-weight: 700;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
  text-decoration: none;
  z-index: 100;
}
.skip-link:focus { top: var(--sp-4); }

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--surface-0);
  padding: 0 var(--sp-6);
}
.site-header-inner {
  max-width: 640px;
  margin: 0 auto;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--fg);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.brand:hover { text-decoration: none; }
.brand-dot { color: var(--accent); }
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.header-nav a {
  font-size: var(--text-sm);
  color: var(--fg-3);
  text-decoration: none;
  transition: color var(--t-fast);
}
.header-nav a:hover { color: var(--fg-2); }
.header-nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-10) var(--sp-6) var(--sp-20);
}
@media (max-width: 680px) {
  main { padding: var(--sp-8) var(--sp-5) var(--sp-16); }
}
@media (max-width: 420px) {
  main { padding: var(--sp-6) var(--sp-4) var(--sp-12); }
}

h1 {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.9px;
  line-height: 1.18;
  margin: 0 0 var(--sp-3);
  color: var(--fg);
}
h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.3;
  margin: var(--sp-10) 0 var(--sp-3);
  color: var(--fg);
}
h2:first-child { margin-top: 0; }
h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.2px;
  margin: var(--sp-6) 0 var(--sp-2);
  color: var(--fg);
}
p {
  margin: 0 0 var(--sp-3);
  color: var(--fg);
  max-width: 60ch;
}
p.muted  { color: var(--fg-2); }
p.sub    { color: var(--fg-2); }
p.subtle { color: var(--fg-3); font-size: var(--text-sm); }
.muted  { color: var(--fg-2); }
.subtle { color: var(--fg-3); font-size: var(--text-sm); }
.ok   { color: var(--ok); }
.warn { color: var(--warn); }
.err  { color: var(--err); }
strong { color: var(--fg); font-weight: 600; }
em { font-style: italic; }

ul {
  color: var(--fg-2);
  padding-left: var(--sp-5);
  margin: var(--sp-2) 0 0;
}
ul li { margin-bottom: var(--sp-1); line-height: 1.6; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover {
  color: var(--accent-hi);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: var(--sp-8) 0;
}

.row {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin: var(--sp-2) 0;
}

.hero {
  padding: var(--sp-12) 0 var(--sp-10);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-10);
}
.hero-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
.hero h1 {
  font-size: var(--text-4xl);
  letter-spacing: -1.4px;
  line-height: 1.1;
  margin-bottom: var(--sp-5);
  max-width: 18ch;
}
@media (max-width: 480px) {
  .hero h1 { font-size: var(--text-3xl); letter-spacing: -1px; }
}
.hero p {
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--fg-2);
  max-width: 50ch;
  margin-bottom: var(--sp-8);
}
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
}

.panel {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-5) 0;
}
.panel p { margin: 0 0 var(--sp-2); }
.panel p:last-child { margin-bottom: 0; }
.panel-elevated {
  background: var(--surface-2);
  border-color: var(--line-strong);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.stat-row:last-child { border-bottom: none; padding-bottom: 0; }
.stat-row:first-child { padding-top: 0; }
.stat-val { font-weight: 600; color: var(--fg); font-size: var(--text-base); }

.note {
  border-left: 2px solid var(--accent);
  background: var(--accent-bg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
  color: var(--fg-2);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.note strong { color: var(--fg); }

.canary-warn {
  border: 1px solid rgba(248,113,113,.4);
  background: var(--err-bg);
  border-radius: var(--radius-md);
  color: #fecaca;
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-6);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.canary-warn a { color: #fca5a5; font-weight: 600; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
}
.badge-ok   { background: var(--ok-bg);    color: var(--ok);   }
.badge-warn { background: var(--warn-bg);  color: var(--warn); }
.badge-err  { background: var(--err-bg);   color: var(--err);  }
.badge-muted{ background: var(--surface-2); color: var(--fg-3); }

/* ── Stepper (CSS-only, no JS) ── */
.stepper { display:flex; align-items:center; margin-bottom:var(--sp-8); padding:var(--sp-3) 0; border-bottom:1px solid var(--line-soft); }
.step { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; gap:var(--sp-1); font-size:10px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; color:var(--fg-4); }
.step+.step::before { content:''; position:absolute; left:calc(-50%); top:14px; width:100%; height:1px; background:var(--line); z-index:0; }
.step.done+.step::before { background:var(--accent-dim); }
.step-bubble { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; position:relative; z-index:1; transition:background var(--t-base),border-color var(--t-base); }
.step.todo .step-bubble { background:var(--surface-2); border:1.5px solid var(--line-strong); color:var(--fg-4); }
.step.active .step-bubble { background:var(--accent-bg); border:1.5px solid var(--accent); color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
.step.done .step-bubble { background:var(--ok-bg); border:1.5px solid var(--ok); color:var(--ok); }
.step.done .step-bubble::after { content:''; display:block; width:9px; height:5px; border-left:2px solid var(--ok); border-bottom:2px solid var(--ok); transform:rotate(-45deg) translate(1px,-1px); }
.step-label { font-size:10px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; text-align:center; }
.step.active .step-label { color:var(--fg-2); }
.step.done .step-label { color:var(--fg-3); }
@media(max-width:380px){ .step-label{display:none} }

/* ── Checkbox-row ── */
.checkbox-row { display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); background:var(--surface-1); border:1px solid var(--line-strong); border-radius:var(--radius-md); margin:var(--sp-4) 0; cursor:pointer; transition:border-color var(--t-base),background var(--t-base); }
.checkbox-row:hover { border-color:var(--fg-4); background:var(--surface-2); }
.checkbox-row input[type=checkbox] { margin-top:2px; margin-right:0; }
.checkbox-row span { font-size:var(--text-sm); color:var(--fg-2); line-height:1.55; }

/* ── Chip (status, used sparingly) ── */
.chip { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:3px 8px; border-radius:99px; line-height:1; vertical-align:middle; }
.chip::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.chip-ok   { background:var(--ok-bg);   color:var(--ok);   } .chip-ok::before   { background:var(--ok);   }
.chip-warn { background:var(--warn-bg); color:var(--warn); } .chip-warn::before  { background:var(--warn); }
.chip-err  { background:var(--err-bg);  color:var(--err);  } .chip-err::before   { background:var(--err);  }
.chip-muted{ background:var(--surface-2); color:var(--fg-3); } .chip-muted::before { background:var(--fg-3); }

label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-2);
  letter-spacing: .1px;
  margin: var(--sp-5) 0 var(--sp-2);
}
label.row { margin-top: var(--sp-5); gap: var(--sp-3); align-items: flex-start; }

input, select {
  width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--fg);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-base);
  font-family: inherit;
  line-height: 1.5;
  min-height: 44px;
  transition: border-color var(--t-base), box-shadow var(--t-base);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder { color: var(--fg-4); }
input:hover, select:hover { border-color: var(--line-strong); }
input:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Select: no background-image (CSP forbids inline image URIs). Extra padding reserves space for OS arrow. */
select { padding-right: 36px; cursor: pointer; }

input[type=checkbox] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  margin-right: var(--sp-2);
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
  border-radius: var(--radius);
}
input[type=file] {
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--fg-2);
  padding: var(--sp-4) var(--sp-4);
  cursor: pointer;
  min-height: 52px;
}
input[type=file]:hover { border-color: var(--fg-4); }

.field { margin: var(--sp-5) 0 0; }
.field label { margin-top: 0; }

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #0a0a0a;
  border: none;
  border-radius: var(--radius-md);
  padding: 0 var(--sp-6);
  height: 44px;
  min-width: 120px;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-base), box-shadow var(--t-base), color var(--t-base);
  line-height: 1;
  font-family: inherit;
  white-space: nowrap;
}
button:hover, .btn:hover {
  background: var(--accent-hi);
  text-decoration: none;
}
button:active, .btn:active {
  background: var(--accent-dim);
}
button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn.ghost {
  background: transparent;
  color: var(--fg-2);
  border: 1px solid var(--line-strong);
}
.btn.ghost:hover {
  background: var(--surface-2);
  border-color: var(--fg-4);
  color: var(--fg);
  text-decoration: none;
}
.btn.ghost:focus-visible { outline-color: var(--fg-3); }

.btn.danger {
  background: transparent;
  color: var(--err);
  border: 1px solid rgba(248,113,113,.35);
}
.btn.danger:hover {
  background: var(--err-bg);
  border-color: rgba(248,113,113,.6);
}

.btn-lg {
  height: 50px;
  padding: 0 var(--sp-8);
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
}

pre, .code-block {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: var(--text-sm);
  color: var(--fg-2);
  white-space: pre-wrap;
  overflow-x: auto;
  margin: var(--sp-4) 0;
  line-height: 1.6;
  -webkit-overflow-scrolling: touch;
}

.lane-group {
  border-left: 2px solid var(--line-strong);
  padding-left: var(--sp-5);
  margin: var(--sp-8) 0;
}
.lane-group.actionable { border-left-color: var(--accent); }
.lane-group.actionable h2 { color: var(--fg); }
.lane-group h2 { margin-top: 0; }

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin: var(--sp-4) 0;
}
.tbl thead tr { background: var(--surface-1); }
.tbl th {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--fg-3);
}
.tbl th:not(:first-child) { text-align: right; }
.tbl td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  color: var(--fg-2);
}
.tbl td:first-child { color: var(--fg); }
.tbl td:not(:first-child) { text-align: right; }
.tbl tbody tr:nth-child(even) { background: var(--surface-0); }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--sp-4) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.tbl-wrap .tbl { margin: 0; }
.tbl-wrap .tbl thead tr { border-radius: var(--radius-md) var(--radius-md) 0 0; }

.section-label {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-10) 0 var(--sp-5);
}
.section-label span {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-4);
  white-space: nowrap;
}
.section-label::before,
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.section-label::before { display: none; }

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface-0);
  margin-top: var(--sp-20);
}
.site-footer-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.footer-left {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.footer-tagline {
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.footer-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.footer-nav a {
  font-size: var(--text-xs);
  color: var(--fg-3);
  text-decoration: none;
  transition: color var(--t-fast);
}
.footer-nav a:hover { color: var(--fg-2); }
.footer-nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}
.footer-privacy-badges {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.footer-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--fg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2px 7px;
}

/* Legacy compat */
.footer-note {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-5);
  margin-top: var(--sp-12);
  color: var(--fg-3);
  font-size: var(--text-xs);
}
.footer-note a { color: var(--fg-3); }
.footer-note a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; }
}

/* Utility classes — replace former inline style="" attributes so the CSP style-src can stay
   a genuinely strict 'self' (no 'unsafe-inline'). */
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-5{margin-top:20px}.mt-6{margin-top:24px}
.m-0{margin:0}
.note-err{border-left-color:var(--err);background:var(--err-bg)}
.panel-empty{text-align:center;padding:var(--sp-10) var(--sp-6)}
.pre-inherit{white-space:pre-wrap;color:var(--muted);font-family:inherit;margin:10px 0 0}