:root {
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f1f5f9;
  --surface: #ffffff;
  --accent: #4f46e5;
  --danger: #b42318;
  --control: #cbd5e1;
  --radius: 12px;
  --radius-control: 8px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

  .page-foot{margin:40px 0 0;padding-top:16px;border-top:1px solid #e2e5ea;font-size:12px;color:#64748b}
  .page-foot a{color:#64748b}
  /* The nav bar, repeated here because this screen links /review.css rather
     than /app.css. Kept in step by tests/navigation.test.mjs, which renders
     both and asserts the same rules appear in each. */
  .nav{border-bottom:1px solid #e2e5ea;background:#fff}
  .nav-inner{max-width:1040px;margin:0 auto;padding:12px 20px;
    display:flex;align-items:center;gap:20px;flex-wrap:wrap;min-height:44px}
  .nav-mark{display:flex;align-items:center;color:#0f172a;text-decoration:none;
    font-weight:600;font-size:15px;margin-right:4px}
  .nav a{color:#64748b;text-decoration:none;font-size:14px}
  .nav a:hover{color:#0f172a}
  .nav a.nav-here{color:#0f172a;font-weight:500}
  .nav-spacer{margin-left:auto}
  .nav form{margin:0}
  @media (max-width: 640px){ .nav-inner{gap:14px;padding:10px 12px} }
  .nav button{padding:6px 12px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;
    font:inherit;font-size:13px;cursor:pointer;color:#0f172a}

  ul.redacted{list-style:none;padding:0;margin:12px 0 0}
  .visible-head{font-size:14px;margin:22px 0 4px}
  ul.redacted li.exposure{display:block}
  ul.redacted li.exposure p{margin:6px 0 0;font-size:13px;color:#475569;line-height:1.55}
  ul.redacted li.exposure ul{margin:4px 0 0;padding-left:18px;font-size:13px;color:#475569}
  ul.redacted li{display:flex;gap:12px;align-items:center;justify-content:space-between;
    padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;margin:0 0 8px;background:#fff}
  ul.redacted code{font-size:13px;color:#0f172a}
  ul.redacted .where{display:block;font-size:12px;color:#64748b;margin-top:2px}
  /* color set explicitly: the screen's own button rule below is white-on-accent,
     and this rule overrode the background without the color -- "Show this" was
     white text on a white button from the day it shipped until a screenshot
     on 2026-09-02. Specificity wins over source order, so the fix is here. */
  ul.redacted button{padding:7px 12px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:#0f172a;
    font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}

  .masked-note{margin-top:12px;padding:10px 12px;border-radius:6px;
    background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12}
  /* The address field and the links block moved to the recipients and confirm
     steps; their rules left with them (2026-09-01). */
  .err{color:#b42318;font-size:14px}

:root { --high:#b91c1c; --high-bg:#fef2f2; --med:#b45309; --med-bg:#fffbeb;
        --low:#475569; --low-bg:#f8fafc; --ok:#15803d; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); line-height:1.55;
       font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.top { padding:28px 24px 8px; max-width:900px; margin:0 auto; }
.top h1 { margin:0; font-size:24px; }
.sub { color:var(--muted); margin:4px 0 0; font-size:14px; text-transform:capitalize; }
main { max-width:900px; margin:0 auto; padding:0 24px 120px; }
.q { margin-top:36px; }
.q h2 { font-size:15px; text-transform:uppercase; letter-spacing:.06em;
        color:var(--muted); margin:0 0 10px; }
.lead { margin:0 0 12px; color:var(--muted); font-size:14px; }
.preview { width:100%; height:520px; border:1px solid var(--line); border-radius:12px;
           background:#fff; box-shadow:0 8px 24px rgba(15,23,42,.06); }
.clean { background:#f0fdf4; border:1px solid #bbf7d0; color:var(--ok);
         padding:14px 16px; border-radius:10px; margin:0; }
.group { border:1px solid var(--line); border-radius:12px; background:#fff;
         margin:0 0 12px; overflow:hidden; }
.group header { display:flex; align-items:center; gap:10px; padding:12px 16px;
                border-bottom:1px solid var(--line); }
.group h3 { margin:0; font-size:15px; flex:1; }
.badge { font-size:12px; padding:2px 10px; border-radius:999px; }
.count { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.sev-high .badge { background:var(--high-bg); color:var(--high); }
.sev-medium .badge { background:var(--med-bg); color:var(--med); }
.sev-low .badge, .sev-informational .badge { background:var(--low-bg); color:var(--low); }
.sev-high { border-color:#fca5a5; }
.group ul { list-style:none; margin:0; padding:0; }
.group li { padding:12px 16px; border-bottom:1px solid var(--line); }
.group li:last-child { border-bottom:0; }
code { font-size:13px; background:var(--bg); padding:2px 6px; border-radius:5px;
       word-break:break-all; }
.where { font-size:12px; color:var(--muted); margin-left:8px; }
.why { margin:6px 0 0; font-size:13px; color:var(--muted); }
.more { margin:0; padding:10px 16px; font-size:13px; color:var(--muted);
        background:var(--bg); }
.wants { margin:0 0 8px; padding-left:20px; font-size:14px; }
.mode { margin-top:14px; font-size:14px; color:var(--muted); }
.mode label { display:block; font-weight:600; color:var(--ink); margin-bottom:6px; }
.mode select { font:inherit; padding:8px 10px; border-radius:8px;
               border:1px solid var(--line); background:#fff; max-width:100%; }
#mode-status { font-size:12px; margin-left:8px; }
.actions { position:fixed; bottom:0; left:0; right:0; background:#fff;
           border-top:1px solid var(--line); padding:14px 24px;
           display:flex; gap:16px; align-items:center; justify-content:center; }
.ack { font-size:14px; display:flex; gap:8px; align-items:center; }
button { font:inherit; padding:9px 18px; border-radius:8px; border:0;
         background:var(--accent); color:#fff; cursor:pointer; }
button:disabled { background:#cbd5e1; cursor:not-allowed; }

/* Phones. This screen had no rules below 640px at all: a fixed 520px preview,
   24px gutters and an action bar that could not wrap. */
@media (max-width: 640px) {
  .top { padding:20px 12px 8px; }
  main { padding:0 12px 150px; }
  .preview { height:60vh; }
  .actions { flex-wrap:wrap; padding:12px; gap:10px; }
  .actions form { width:100%; }
  .actions button { width:100%; min-height:44px; }
  ul.redacted li { flex-direction:column; align-items:stretch; }
  ul.redacted button, button, .mode select { min-height:44px; }
}