/* ==========================================================================
   actuallygoodtools.com — public stylesheet
   Design language: "the calm ledger" — quiet type on hairline rows.
   The vote control is the ONLY strong visual element on any page.
   One file, no frameworks, zero JS pages, strict CSP (no inline styles).
   ========================================================================== */

/* 1. Fonts (self-hosted, latin subsets, OFL-licensed) */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/bricolage-grotesque-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-latin-600.woff2') format('woff2');
}

/* 2. Tokens — reject-red is retired; verdict green is the single accent. */
:root {
  --paper: #F7F8F4;
  --ink: #14231C;
  --verdict: #146B43;
  --rule: #D8DCD3;
  --muted: #5C6B60;
  --field: #FFFFFF;
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --radius: 2px;
  --container: 880px;
}

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); }
h2 { font-size: 1.25rem; margin-top: 2.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3rem; }

a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { color: var(--verdict); text-decoration-color: var(--verdict); }

:focus-visible { outline: 2px solid var(--verdict); outline-offset: 2px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; }
main.container { padding-top: 1.5rem; padding-bottom: 3.5rem; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.4rem 0.8rem; z-index: 10;
}
.skip-link:focus { left: 0; color: var(--paper); }

/* Mono utility — measured values, dates, domains, statuses. */
.meta, .mono {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
}
.meta { margin: 0; }

.notice {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--verdict);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  margin: 0 0 1.25rem;
}
.notice[role="alert"] { color: var(--ink); }
.notice ul { margin: 0.25rem 0 0; }

/* 4. Header / footer */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .container {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem 1.75rem; padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.15rem;
  text-decoration: none; letter-spacing: -0.01em;
}
.wordmark .period { color: var(--verdict); }
.site-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto; }
.site-nav a {
  font-size: 0.9rem; text-decoration: none; color: var(--muted);
}
.site-nav a:hover { color: var(--verdict); }
.site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.intro {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 1.5rem;
}

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 2rem;
  font-size: 0.85rem; color: var(--muted);
}
.site-footer .container { padding-top: 1.5rem; padding-bottom: 2rem; }
.site-footer ul { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.site-footer a { color: var(--muted); }
.footer-stance { font-family: var(--font-mono); font-size: 0.78rem; margin: 0; }

/* 5. Controls row (Top/New + categories) */
.controls {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
  padding-bottom: 0.75rem; margin-bottom: 0;
}
.controls-group { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.ctrl { font-size: 0.9rem; text-decoration: none; color: var(--muted); }
.ctrl:hover { color: var(--verdict); }
.ctrl[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.ctrl-count { font-family: var(--font-mono); font-size: 0.75rem; }

/* 6. THE SIGNATURE — the vote control.
   A bordered square: small arrow above a mono count. Ink border; voted state
   fills verdict green with paper text. Plain form submit, no JS. */
.vote-form { margin: 0; }
.vote {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.1rem;
  width: 3.1rem; height: 3.1rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  cursor: pointer;
  padding: 0;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.vote-arrow { font-size: 0.6rem; line-height: 1; }
.vote-count { font-weight: 600; font-size: 0.95rem; line-height: 1; }
.vote:hover { border-color: var(--verdict); color: var(--verdict); }
.vote--on { background: var(--verdict); border-color: var(--verdict); color: var(--paper); }
.vote--on:hover { color: var(--paper); }
.vote--static { cursor: default; }
.vote--static:hover { border-color: var(--ink); color: var(--ink); }
.vote--lg { width: 4.4rem; height: 4.4rem; }
.vote--lg .vote-arrow { font-size: 0.8rem; }
.vote--lg .vote-count { font-size: 1.25rem; }

/* 7. The list — hairline-separated ledger rows. */
.tool-list {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  border-top: 1px solid var(--rule);
}
.tool-row {
  display: grid;
  grid-template-columns: 2.2ch auto 1fr;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.rank {
  font-family: var(--font-mono);
  font-size: 0.8rem; color: var(--muted);
  text-align: right;
}
.tool-line { margin: 0 0 0.1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; }
.tool-name { font-weight: 600; }
.tool-domain { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.tool-tagline {
  margin: 0 0 0.15rem; font-size: 0.9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Sample-entry / sponsored mono ribbon */
.ribbon {
  font-family: var(--font-mono);
  font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.05rem 0.35rem;
  white-space: nowrap;
}

.invite { font-size: 0.9rem; margin: 0 0 2.5rem; }

/* 8. Forms */
label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.25rem; }
input[type="text"], input[type="url"], input[type="email"], select, textarea {
  font: inherit; font-size: 0.95rem;
  color: var(--ink); background: var(--field);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.45rem 0.6rem;
  width: 100%; max-width: 32rem;
}
textarea { resize: vertical; }
.btn {
  font-family: var(--font-mono);
  font-size: 0.85rem; font-weight: 600;
  color: var(--ink); background: transparent;
  border: 1px solid var(--ink); border-radius: var(--radius);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.btn:hover { background: var(--verdict); border-color: var(--verdict); color: var(--paper); }
.form-field { margin-bottom: 1.1rem; }
.form-hint { font-size: 0.8rem; color: var(--muted); margin: 0.2rem 0 0; }

/* Honeypot — visually gone, still in the DOM for bots. */
.hp-field {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* Newsletter — one quiet row above the footer. */
.newsletter {
  display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
}
.newsletter label { flex-basis: 100%; font-weight: 400; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin: 0; }
.newsletter input[type="email"] { flex: 1 1 14rem; max-width: 22rem; }

/* 9. Tool page */
.tool-head .meta { margin-bottom: 0.75rem; }
.vote-block {
  display: flex; align-items: center; gap: 1rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1.1rem 0; margin: 1.5rem 0;
}
.vote-block-label { font-size: 0.9rem; margin: 0; }
.vote-note { margin-top: 0.75rem; }
.vote-note summary { font-size: 0.85rem; color: var(--muted); cursor: pointer; }
.vote-note textarea { margin-top: 0.5rem; }

.note-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.note-list li { border-bottom: 1px solid var(--rule); padding: 0.75rem 0; }
.note-quote { margin: 0 0 0.25rem; font-size: 0.95rem; }

.compare-form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; margin-bottom: 1rem; }
.compare-form select { max-width: 18rem; }
.plain-list { list-style: none; padding: 0; margin: 0 0 1em; }
.plain-list li { padding: 0.35rem 0; border-bottom: 1px solid var(--rule); }
.plain-list .meta { margin-left: 0.6rem; display: inline; }

/* 10. Comparison (vs) pages */
.vs-tools {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1rem 0; margin: 1.25rem 0 1.5rem;
}
.vs-tool { display: flex; align-items: center; gap: 0.85rem; }
.vs-tool .tool-name { font-size: 1.05rem; }

.table-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th {
  font-family: var(--font-mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600; text-align: left;
}
th, td { padding: 0.55rem 0.9rem 0.55rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; min-width: 9rem; }
th:first-child, td:first-child { min-width: 6.5rem; }

.pick-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1rem; }
.pick-cols ul { margin-bottom: 0; }

.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { font-weight: 600; font-size: 0.95rem; padding: 0.7rem 0; cursor: pointer; }
.faq details p { margin: 0.2rem 0 1rem; font-size: 0.92rem; }

/* 11. Prose pages (about) + utilities */
.prose { max-width: 62ch; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 12. Responsive + motion */
@media (max-width: 600px) {
  .site-nav { margin-left: 0; }
  .tool-row { grid-template-columns: auto 1fr; }
  .rank { display: none; }
  .tool-tagline { white-space: normal; }
  .vs-tools, .pick-cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ==========================================================================
   13. AUTH — sign-in / sign-up / MFA / logout pages + homepage sign-in overlay
   Narrow centered column on paper; codes in IBM Plex Mono. The class hooks
   .flash(.show/.error/.success/.info), #magic-link-*-step(.hide/.show),
   .tab-content(.active), .btn-loading, .hidden, .copied are driven by the
   external auth JS files — keep them intact.
   ========================================================================== */
.auth-main {
  max-width: 420px;
  margin: 0 auto;
}
main.auth-main { padding-top: 3.5rem; padding-bottom: 4.5rem; }
.auth-lede {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 1.75rem;
}
.auth-note { font-size: 0.92rem; }
.auth-note p { margin-bottom: 0.75em; }
.auth-alt {
  border-top: 1px solid var(--rule);
  margin: 2.25rem 0 0;
  padding-top: 1rem;
  font-size: 0.9rem;
}

/* Button variants for the auth column (extend .btn) */
a.btn { display: inline-block; text-decoration: none; text-align: center; }
.btn--block { display: block; width: 100%; padding: 0.6rem 1rem; text-align: center; }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn:disabled:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-quiet { border-color: var(--rule); color: var(--muted); }
.btn-quiet:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-loading-state { opacity: 0.7; }
.button-group { display: flex; gap: 0.6rem; margin-top: 0.6rem; }
.button-group .btn { flex: 1; }

/* Flash / status lines. Hidden until .show — the auth JS toggles it;
   .info renders immediately (server flash), as do JS-injected mfa statuses. */
.flash {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--verdict);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  margin: 0.9rem 0 0;
}
.flash.show { display: block; }
.flash.info { display: block; }
.flash.error { color: var(--ink); border-color: var(--ink); }
.status-messages .flash { display: block; }
.flash.mfa-error { color: var(--ink); border-color: var(--ink); }
main .flash + .flash { margin-top: 0.5rem; }
.auth-main .flash.show, .auth-main .flash.info { margin-bottom: 1.25rem; }

/* Magic-link stepper (ids required by /static/js/auth.js) */
#magic-link-code-step { display: none; }
#magic-link-code-step.show { display: block; }
#magic-link-email-step.hide { display: none; }
.code-instruction { font-size: 0.95rem; margin: 0 0 0.2rem; }
.code-instruction strong { overflow-wrap: anywhere; }
.code-hint {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 1rem;
}

/* The 6-digit code — large, mono, letter-spaced, centered. */
input.magic-code-input {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-align: center;
  padding: 0.55rem 0.3rem 0.55rem 0.65em; /* left pad rebalances letter-spacing */
  max-width: 100%;
}
input.mono-input { font-family: var(--font-mono); }

/* Hairline divider with a small mono "or" */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.6rem 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule);
}

/* Google — a quiet bordered block link */
.google-auth-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--ink);
  background: var(--field);
}
.google-auth-button:hover { border-color: var(--ink); color: var(--ink); }
.google-auth-button svg { flex: none; }

/* MFA verify — three quiet tabs on a hairline */
.mfa-tabs {
  display: flex;
  border-bottom: 1px solid var(--rule);
  margin: 0 0 1.4rem;
}
.tab-button {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 0.25rem;
  cursor: pointer;
}
.tab-button:hover { color: var(--verdict); }
.tab-button.active { color: var(--ink); border-bottom-color: var(--verdict); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.email-info { margin-bottom: 1.4rem; }
.email-info .btn { margin-top: 0.2rem; }

/* Loading affordances shared by the MFA pages */
.btn-loading { display: none; }
.loading-hint {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0.5rem 0 0;
}
.mfa-spinner { animation: auth-spin 0.8s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* MFA setup — QR block + manual key */
.qr-container { text-align: center; margin: 1.25rem 0 1.6rem; }
.qr-image img {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.5rem;
}
.toggle-key-btn {
  display: inline-block;
  background: none;
  border: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0.35rem 0;
}
.toggle-key-btn:hover { color: var(--verdict); }
.secret-key { margin-top: 0.6rem; }
.secret-key.hidden { display: none; }
.secret-key code {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  word-break: break-all;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--field);
  padding: 0.5rem 0.65rem;
  text-align: left;
}
.verification-section label { margin-top: 0.4rem; }
.verification-section .btn { margin-top: 0.9rem; }

/* Backup codes — the one-time mono grid */
.important-notice {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  margin: 0 0 1.25rem;
}
.backup-codes-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 0 0 1.4rem;
}
.backup-code {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--field);
  padding: 0.6rem 0.4rem;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.backup-code:hover { border-color: var(--verdict); }
.backup-code.copied { background: rgba(20, 107, 67, 0.12); border-color: var(--verdict); }
.backup-info { font-size: 0.9rem; color: var(--muted); }
.backup-info p { margin-bottom: 0.5em; }
.actions { display: flex; gap: 0.6rem; margin-top: 1.6rem; }
.actions .btn { flex: 1; }
#continue-btn { display: inline-flex; align-items: center; justify-content: center; }

/* Homepage sign-in overlay — pure CSS :target, keyboard-reachable links/inputs.
   (Section 14 — the verified-vote + GDPR surface — is appended after this.) */
.signin-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(20, 35, 28, 0.55);
}
.signin-overlay:target { display: flex; }
.signin-panel {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem 1.5rem;
}
.signin-close {
  position: absolute;
  top: 0.3rem;
  right: 0.65rem;
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
  color: var(--muted);
  padding: 0.2rem;
}
.signin-close:hover { color: var(--ink); }
.signin-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  margin: 0 0 1.4rem;
}
.signin-wordmark .period { color: var(--verdict); }
.signin-heading { margin: 0 0 1rem; }
.signin-email-form input[type="email"] { margin-bottom: 0.7rem; }
@media (prefers-reduced-motion: reduce) {
  .signin-overlay, .signin-panel { transition: none !important; }
}

/* ==========================================================================
   14. VERIFIED VOTE + GDPR SURFACE — /vote/confirm, /privacy, /privacy/my-data,
   /unsubscribe. Same calm ledger: hairline blocks, mono for anything measured
   or procedural, verdict green only where a decision is being made. Zero JS on
   every page below, so nothing here may depend on a class being toggled.
   ========================================================================== */

/* 14.1 The one-decision column. Narrower than .container so the eye lands on
   the single form; still full-width on a phone. */
main.flow { max-width: 34rem; padding-top: 2.5rem; }
.flow-lede { font-size: 1.05rem; }
.flow-foot {
  font-size: 0.88rem; color: var(--muted);
  border-top: 1px solid var(--rule);
  margin: 2rem 0 0; padding-top: 1rem;
}
.flow-foot + .flow-foot { border-top: 0; margin-top: 0.5rem; padding-top: 0; }
.flow-actions { margin-top: 1.75rem; }

/* Mono step marker above the H1 — tells you where you are without a widget. */
.step-mark {
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

/* What you are voting for — a quoted row, not a card with a fill. */
.subject-card {
  border-left: 2px solid var(--verdict);
  padding: 0.15rem 0 0.15rem 0.85rem;
  margin: 0 0 1.35rem;
}
.subject-name { font-weight: 600; margin: 0; }
.subject-line { font-size: 0.9rem; color: var(--muted); margin: 0.1rem 0 0; }

/* An address echoed back at the visitor (masked in the vote flow). */
.echo-email { font-family: var(--font-mono); font-size: 0.92em; overflow-wrap: anywhere; }

/* 14.2 THE CONSENT BLOCK — GDPR Art.7(4) made visual.
   Boxed and set apart from the email field so it can never read as part of
   the vote. Never pre-ticked; the box carries no accent until it is checked. */
.consent-box {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--field);
  padding: 0.8rem 0.9rem;
  margin: 0 0 1.35rem;
}
.consent-row { display: flex; align-items: flex-start; gap: 0.65rem; }
.consent-row input[type="checkbox"] {
  flex: none;
  width: 1.05rem; height: 1.05rem;
  margin: 0.25rem 0 0;
  accent-color: var(--verdict);
  cursor: pointer;
}
.consent-row label {
  font-weight: 400; font-size: 0.92rem; line-height: 1.45;
  margin: 0; cursor: pointer;
}
.consent-note {
  font-family: var(--font-mono);
  font-size: 0.75rem; color: var(--muted);
  margin: 0.55rem 0 0 1.7rem;
}

/* 14.3 The 6-digit code input — reuses .magic-code-input from the auth section,
   held to its natural width so it does not stretch across the column. */
input.code-field { max-width: 11.5rem; }
input.confirm-field {
  max-width: 9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* "Wrong address?" — a native disclosure, the one interactive element with no
   JavaScript behind it. */
.restart {
  border-top: 1px solid var(--rule);
  margin-top: 2rem; padding-top: 1rem;
}
.restart summary {
  font-size: 0.88rem; color: var(--muted);
  cursor: pointer; list-style-position: outside;
}
.restart summary:hover { color: var(--verdict); }
.restart[open] summary { margin-bottom: 0.85rem; }
.restart-note { font-size: 0.88rem; color: var(--muted); }

/* 14.4 Data-rights actions — export and erasure must never look alike. */
.action-card {
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  margin-top: 1.75rem;
}
.action-card h2 { margin-top: 0; }
.action-card ul { font-size: 0.95rem; }
.action-card--danger {
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem 1.25rem;
}
.btn-danger { border-width: 2px; }
.btn-danger:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Receipt of an erasure — a two-column ledger, label left, count right. */
.ledger-list { list-style: none; margin: 1.25rem 0 1.5rem; padding: 0; border-top: 1px solid var(--rule); }
.ledger-list li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem;
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem 0;
  font-size: 0.92rem;
}
.ledger-value { font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); }

/* 14.5 The policy page — long-form, but still a ledger. */
main.doc { max-width: 46rem; }
.doc p, .doc ul, .doc ol { max-width: 62ch; }
.doc-updated { margin: -0.25rem 0 1.5rem; }
.doc-jump { font-size: 0.95rem; }
.doc-toc {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.9rem 0;
  margin: 1.5rem 0 0.5rem;
}
.doc-toc ul {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 2rem;
}
.doc-toc li { font-size: 0.9rem; padding: 0.15rem 0; break-inside: avoid; }
.doc-section { border-top: 1px solid var(--rule); padding-top: 0.35rem; margin-top: 2.25rem; }
.doc-section h2 { scroll-margin-top: 1rem; margin-top: 1rem; }
.doc-section h3 { margin-top: 1.5rem; color: var(--muted); }
.doc-section li { margin-bottom: 0.4rem; }
.doc-address { font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.7; }
.doc code, .doc-section code {
  font-family: var(--font-mono); font-size: 0.85em;
  background: var(--field); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.05rem 0.25rem;
}

/* 14.6 Tool page — the verified-vote hint and the post-confirmation lines. */
.vote-block-text { display: flex; flex-direction: column; gap: 0.15rem; }
.vote-hint { margin: 0; }
.confirm-line { margin: 0; }
.confirm-line + .confirm-line { margin-top: 0.2rem; }

/* 14.7 Small phones (down to 360px): keep every form usable, drop the columns. */
@media (max-width: 600px) {
  .doc-toc ul { columns: 1; }
  .ledger-list li { flex-direction: column; }
}
@media (max-width: 400px) {
  main.flow { padding-top: 1.75rem; }
  .consent-box { padding: 0.7rem 0.65rem; }
  .consent-note { margin-left: 0; }
  .action-card--danger { padding: 0.9rem 0.75rem 1rem; }
  input.magic-code-input { font-size: 1.35rem; letter-spacing: 0.25em; }
  input.code-field { max-width: 100%; }
  .btn { width: 100%; }
  .flow-actions .btn, .doc .btn { width: auto; }
}