/*
 * Article 50 scanner.
 *
 * Plain CSS on purpose: no build step, nothing that can fail on launch day.
 *
 * Contrast budget (WCAG 2.2 AA, dark theme):
 *   --ink        16.0 / 14.6 / 13.4  on bg / panel / panel-2
 *   --ink-dim     7.7 /  7.1 /  6.5
 *   --ink-faint   6.0 /  5.5 /  5.1   <- smallest text on the site, still AA
 *   --fail        5.7 /  5.2 /  4.7
 *   --warn        8.4 /  7.7 /  7.0
 *   --ind         7.8 /  7.1 /  6.5
 *   --pass        7.5 /  6.8 /  6.2
 *   --accent      5.9 /  5.4 /  5.0
 * --line is decorative only. Anything that is a control boundary or a state
 * indicator uses --line-strong (>= 3:1 on every background above).
 */
:root{
  --bg:#0d1117; --panel:#161b22; --panel-2:#1c232c;
  --line:#2d353f; --line-strong:#667485;
  --ink:#e6edf3; --ink-dim:#9aa7b4; --ink-faint:#8593a2;
  --fail:#f85149; --warn:#e3a008; --ind:#a89ceb; --pass:#3fb950; --accent:#4c8dff;
  --wash-fail:rgba(248,81,73,.07); --wash-warn:rgba(227,160,8,.06);
  --wash-ind:rgba(168,156,235,.06);
  --radius:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
main{max-width:900px;margin:0 auto;padding:0 20px 72px}
main:focus{outline:none}
a{color:var(--accent)}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,4.5vw,2.7rem);letter-spacing:-.02em}
h2{font-size:1.3rem;margin-top:2.5rem;letter-spacing:-.01em}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em}
.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}

/* One visible focus treatment for every interactive element on the site.
   Two-tone so it stays visible on both --bg and the lighter panels. */
:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
summary:focus-visible{outline-offset:1px}

.skip-link{position:absolute;left:8px;top:-100px;z-index:10;
  background:var(--accent);color:#08111f;font-weight:650;
  padding:10px 16px;border-radius:var(--radius);text-decoration:none}
.skip-link:focus{top:8px}

header.site{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  max-width:900px;margin:0 auto;padding:24px 20px}
.brand{font-weight:650;text-decoration:none;color:var(--ink);letter-spacing:-.01em}
.brand-sub{color:var(--ink-faint);font-size:.85rem}
header.site nav{margin-left:auto;font-size:.9rem}

.hero{padding:32px 0 8px}
.lede{color:var(--ink-dim);font-size:1.08rem;max-width:62ch}
.scan-form{display:flex;gap:10px;margin:28px 0 10px;flex-wrap:wrap}
.scan-form input{flex:1 1 320px;min-width:0;padding:14px 16px;font-size:1rem;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink)}
.scan-form input::placeholder,.gate-form input::placeholder{color:var(--ink-faint)}
button,.button{padding:14px 22px;font-size:1rem;font-weight:600;cursor:pointer;
  background:var(--accent);color:#08111f;border:0;border-radius:var(--radius);
  text-decoration:none;display:inline-block;min-height:48px}
button:hover,.button:hover{filter:brightness(1.08)}
.fineprint{color:var(--ink-faint);font-size:.85rem}
.hero-trust{color:var(--ink-dim);font-size:.92rem;max-width:62ch;
  border-left:3px solid var(--line-strong);padding-left:14px;margin-top:22px}
.error{background:#2b1416;border:1px solid var(--fail);color:#ffc9c6;
  padding:12px 14px;border-radius:var(--radius)}

.check-grid{list-style:none;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.check-grid li{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px}
.check-grid h3{font-size:1rem;margin-bottom:.4em}
.check-grid p{color:var(--ink-dim);font-size:.92rem;margin:0 0 .8em}
.check-grid code{color:var(--ink-faint)}
/* four cards: 1 up on phones, a clean 2x2 once there is room, never 3+1 */
@media (min-width:700px){ .check-grid{grid-template-columns:repeat(2,1fr)} }

/* ---- verdict ------------------------------------------------------ */
.verdict{margin-top:24px;padding:24px;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--line);border-left-width:5px}
.verdict.tone-bad{border-left-color:var(--fail)}
.verdict.tone-warn{border-left-color:var(--warn)}
.verdict.tone-good{border-left-color:var(--pass)}
.verdict.tone-neutral{border-left-color:var(--line-strong)}
.eyebrow{color:var(--ink-faint);font-size:.85rem;margin:0 0 .4em}
.verdict-lede{color:var(--ink-dim);max-width:62ch;margin:0}

/* Scoreboard. Each non-zero count is a link to the first finding of that
   severity: on a phone this is the only way to skip straight to the failures. */
.counts{list-style:none;display:flex;gap:10px;flex-wrap:wrap;padding:0;margin:18px 0 0}
.counts li{flex:1 1 120px;color:var(--ink-dim);background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--radius)}
.counts a,.counts .chip-static{display:block;padding:10px 14px;color:inherit;
  text-decoration:none;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.counts a:hover{background:var(--panel)}
.counts strong{font-size:1.6rem;display:block;line-height:1.1;font-variant-numeric:tabular-nums}
.counts li.zero{opacity:.6}
.counts li.sev-fail{border-color:rgba(248,81,73,.45)}
.counts li.sev-warn{border-color:rgba(227,160,8,.45)}
.counts li.sev-ind{border-color:rgba(168,156,235,.45);border-style:dashed}
.counts li.sev-pass{border-color:rgba(63,185,80,.45)}
.sev-fail strong{color:var(--fail)} .sev-warn strong{color:var(--warn)}
.sev-ind strong{color:var(--ind)} .sev-pass strong{color:var(--pass)}

/* UNVERIFIED is a deliberate refusal, not a shrug. It gets its own voice:
   a dashed rule (we stopped) rather than a solid severity bar (we determined). */
.restraint{border-left:3px dashed var(--ind);background:var(--wash-ind);
  padding:10px 14px;border-radius:0 8px 8px 0;color:var(--ink-dim);
  font-size:.92rem;margin:.9em 0 0;max-width:70ch}
.restraint strong{color:var(--ink)}
.verdict-restraint{margin-top:18px;font-size:.95rem}

/* ---- findings, grouped by surface --------------------------------- */
.surface-group{margin:0 0 34px}
.surface-group h3{font-size:1.15rem;margin:1.8rem 0 .2em;display:flex;
  align-items:baseline;gap:10px;flex-wrap:wrap}
.kind-tag{font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);border:1px solid var(--line-strong);border-radius:99px;padding:2px 9px}
.surface-meta{color:var(--ink-faint);font-size:.85rem;margin:0 0 14px}
.quiet-surfaces{color:var(--ink-faint);font-size:.9rem}

.finding{background:var(--panel);border:1px solid var(--line);border-left-width:4px;
  border-radius:var(--radius);padding:18px;margin-bottom:14px}
.finding.sev-fail{border-left-color:var(--fail);background:
  linear-gradient(var(--wash-fail),var(--wash-fail)),var(--panel)}
.finding.sev-warn{border-left-color:var(--warn);background:
  linear-gradient(var(--wash-warn),var(--wash-warn)),var(--panel)}
/* dashed = we did not determine this; solid = we did */
.finding.sev-ind{border-left-color:var(--ind);border-left-style:dashed}
.finding.sev-pass{border-left-color:var(--pass)}
.finding header{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:.35em}
.finding h4{margin:0;font-size:1.05rem;flex:1 1 240px}
.finding.sev-fail h4{font-size:1.15rem}
.badge{font-size:.7rem;font-weight:700;letter-spacing:.08em;padding:4px 9px;border-radius:99px;
  background:var(--panel-2);border:1px solid var(--line-strong);white-space:nowrap}
.sev-fail .badge{color:var(--fail);border-color:var(--fail)}
.sev-warn .badge{color:var(--warn);border-color:var(--warn)}
.sev-ind .badge{color:var(--ind);border-color:var(--ind);border-style:dashed}
.sev-pass .badge{color:var(--pass);border-color:var(--pass)}
.clause-line{font-size:.88rem;color:var(--ink-faint);margin:0 0 .7em;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.clause-line strong{color:var(--ink-dim)}
.obl-tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  border:1px solid var(--line);border-radius:99px;padding:1px 8px}
.clause{font-size:.8rem;color:var(--ink-faint);border:1px solid var(--line);
  padding:2px 8px;border-radius:99px}
.detail{color:var(--ink-dim);margin:.2em 0 .8em;max-width:70ch}
.fix{background:var(--panel-2);border-radius:8px;padding:12px 14px;margin:.9em 0 0;
  font-size:.94rem;max-width:70ch}
.fix-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--pass);margin-bottom:.3em}

/* Whose obligation a finding is. Sits above the detail because it is the
   reader's first question, and reading a finding that is not theirs as if it
   were is exactly the misunderstanding we are paid to avoid causing. */
.bearer{background:var(--panel-2);border:1px dashed var(--line-strong);
  border-radius:8px;padding:10px 14px;margin:.2em 0 .8em;
  color:var(--ink-dim);font-size:.9rem;max-width:70ch}
.bearer-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.3em}

.finding.locked .detail{color:var(--ink-faint)}
.lock{display:block;background:var(--panel-2);border:1px dashed var(--line-strong);
  border-radius:8px;padding:12px 14px;margin:.9em 0 0;color:var(--ink-dim);font-size:.9rem}
.lock-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:.3em}

details{margin-top:.6em}
summary{cursor:pointer;color:var(--ink-dim);font-size:.9rem;padding:2px 0}
.evidence{list-style:none;padding:0;margin:.6em 0 0}
.evidence li{border-left:2px solid var(--line-strong);padding:.2em 0 .2em .8em;
  margin-bottom:.5em;font-size:.9rem}
.evidence code{display:block;color:var(--ink-faint);word-break:break-all;margin-top:2px}
.evidence pre{background:var(--bg);padding:8px 10px;border-radius:6px;overflow-x:auto;
  font-size:.8rem;white-space:pre-wrap;word-break:break-word;margin:4px 0 0}
blockquote{margin:.6em 0;padding-left:14px;border-left:3px solid var(--line-strong);
  color:var(--ink-dim);font-size:.92rem}
.exempt{font-size:.9rem;margin-bottom:.2em}

/* Passing checks are reassurance, not work. Collapsed, one line each. */
.passing summary{color:var(--pass)}
.pass-list{list-style:none;padding:0;margin:.6em 0 0}
.pass-list li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:8px 0;border-top:1px solid var(--line);font-size:.92rem}
.pass-title{flex:1 1 220px;color:var(--ink-dim)}

/* ---- gate / cta ---------------------------------------------------- */
.gate,.cta{margin-top:36px;padding:24px;border-radius:var(--radius);
  background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line)}
.gate h2,.cta h2{margin-top:0}
.gate-list{padding-left:20px;color:var(--ink-dim);font-size:.94rem;max-width:66ch}
.gate-list li{margin-bottom:.4em}
.gate-list strong{color:var(--ink)}
.gate-form{display:flex;gap:10px;margin:18px 0 8px;flex-wrap:wrap}
.gate-form input{flex:1 1 260px;min-width:0;padding:13px 15px;background:var(--bg);
  border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);font-size:1rem}

.warnings{color:var(--ink-faint);font-size:.9rem}
.warnings ul{padding-left:18px}
.rescan{margin-top:32px}

/* ---- method page --------------------------------------------------- */
.prose{max-width:70ch;padding-top:16px}
.clause-block{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:14px}
.clause-block h3{font-size:1rem}
.obl{font-size:.75rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em}
.sev-key{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;align-items:baseline;
  margin:1.2em 0 0}
.sev-key dt{margin:0}
.sev-key dd{margin:0;color:var(--ink-dim);font-size:.94rem}

footer.site{max-width:900px;margin:0 auto;padding:28px 20px 56px;
  border-top:1px solid var(--line);color:var(--ink-faint);font-size:.88rem}
footer.site p{margin:.5em 0}
.disclaimer{font-size:.83rem}

@media (prefers-reduced-motion:no-preference){
  .finding{transition:border-color .15s ease}
}
@media (max-width:520px){
  .counts{gap:8px}
  .counts li{flex:1 1 140px}
  .scan-form button,.gate-form button{width:100%}
  .sev-key{grid-template-columns:1fr;gap:4px 0}
  .sev-key dd{margin-bottom:.9em}
}