/* Roamclarity — editorial/dossier system.
   Anti-AI notes: no uniform radius, no uniform shadow, no indigo/purple,
   section padding deliberately uneven, measure changes between sections. */

:root {
  --paper: #f7f4ef;
  --paper-deep: #efe9e0;
  --paper-card: #fffdfa;
  --ink: #161311;
  --ink-soft: #4a423c;
  /* Was #7d746c — only 3.79:1 on --paper-deep, and it carries the source lines. */
  --ink-faint: #6b6259;
  --rule: #ddd6ca;
  --rule-strong: #c4b9a8;

  --blocked: #a33a20;
  --blocked-bg: #f8ece8;
  --partial: #8a5d0c;
  --partial-bg: #faf1de;
  --clear: #2c5f4a;
  --clear-bg: #e8f0ea;

  --link: #1e4f6b;

  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --text: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; margin: 0; }

/* ---------- layout primitives ----------
   All three share one left edge and vary the right rag instead. Centring each measure
   independently made the left margin jump 130→410→280→130px down the page. */
.wide, .mid, .narrow { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }
.mid    > * { max-width: 880px; }
.narrow > * { max-width: 640px; }

/* ---------- masthead: deliberately small. no hero button. ---------- */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  padding-block: 14px;
}
.wordmark {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.masthead__note {
  font-size: 13.5px;
  color: var(--ink-faint);
  margin: 0;
}
.masthead__spacer { flex: 1 1 auto; }
.masthead__link { font-size: 13.5px; }

/* ---------- opening: asymmetric. claim left, verdict rail right. ---------- */
.opening { padding-block: 72px 56px; border-bottom: 1px solid var(--rule); }
.opening__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 56px;
  align-items: start;
}
.kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 18px;
}
.claim {
  font-size: clamp(34px, 5.2vw, 58px);
  margin-bottom: 22px;
  text-wrap: balance;
}
.claim em { font-style: italic; color: var(--blocked); }
.standfirst {
  font-size: clamp(17px, 1.6vw, 19.5px);
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0;
}

.tally {
  border: 1px solid var(--rule-strong);
  background: var(--paper-card);
  padding: 22px 24px 8px;
}
.tally__title {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 16px;
}
.tally__row {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.tally__row:last-of-type { border-bottom: 0; }
.tally__num {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  min-width: 1.4ch;
}
.tally__num--blocked { color: var(--blocked); }
.tally__num--partial { color: var(--partial); }
.tally__num--clear   { color: var(--clear); }
.tally__label { font-size: 14.5px; color: var(--ink-soft); line-height: 1.45; }

/* ---------- narrow prose band ---------- */
.band { padding-block: 60px; }
.band--tight { padding-block: 44px; }
.band--deep { padding-block: 84px; }
.band--shaded { background: var(--paper-deep); border-block: 1px solid var(--rule); }

.section-head { margin-bottom: 28px; }
.section-head h2 { font-size: clamp(25px, 3vw, 34px); margin-bottom: 10px; }
.section-head p { color: var(--ink-soft); margin: 0; }

.prose p { margin: 0 0 18px; }
.prose p:last-child { margin-bottom: 0; }

/* ---------- the two gates: unequal split ---------- */
.gates { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule-strong); background: var(--paper-card); }
.gate { padding: 26px 26px 28px; }
.gate + .gate { border-left: 1px solid var(--rule); }
.gate__id {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
}
.gate__name { font-size: 21px; margin-bottom: 8px; }
.gate__q { font-family: var(--display); font-style: italic; font-size: 17px; color: var(--ink-soft); margin: 0 0 12px; }
.gate__detail { font-size: 15px; color: var(--ink-soft); margin: 0; }

/* ---------- evidence: bento. spans assigned per-item in build.py, rows alternate 4+2 / 2+4. ---------- */
.evidence { display: grid; gap: 18px; grid-template-columns: repeat(6, 1fr); }
.svc {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-left-width: 3px;
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
}
.svc--s2 { grid-column: span 2; }
.svc--s3 { grid-column: span 3; }
.svc--s4 { grid-column: span 4; padding: 26px 28px 28px; }
.svc--s6 { grid-column: span 6; padding: 24px 28px 26px; }
.svc--lead .svc__name { font-size: 25px; }
.svc--quiet { background: transparent; border-style: dashed; padding: 16px 18px 18px; }
.svc--quiet .svc__name { font-size: 17px; font-family: var(--text); font-weight: 600; letter-spacing: 0; }
.svc--quiet .svc__detail { font-size: 14.5px; }
.svc--blocked { border-left-color: var(--blocked); }
.svc--partial { border-left-color: var(--partial); }
.svc--clear   { border-left-color: var(--clear); }

.svc__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.svc__name { font-size: 19px; }
.svc__note { font-size: 13.5px; color: var(--ink-faint); margin: 0 0 12px; }
.svc__detail { font-size: 15px; color: var(--ink-soft); margin: 0 0 14px; }
.svc--s6 .svc__detail, .svc--s4 .svc__detail { max-width: 62ch; }

.verdict-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
  white-space: nowrap;
}
.verdict-chip--blocked { background: var(--blocked-bg); color: var(--blocked); }
.verdict-chip--partial { background: var(--partial-bg); color: var(--partial); }
.verdict-chip--clear   { background: var(--clear-bg); color: var(--clear); }

.quote {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  background: var(--paper-deep);
  border-left: 2px solid var(--rule-strong);
  padding: 10px 14px;
  margin: 0 0 14px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.evidence-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule);
  padding-top: 11px;
  margin-top: auto; /* source rules line up across a row instead of floating mid-card */
}
.conf {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.conf--high { color: var(--clear); }
.conf--medium { color: var(--partial); }

/* ---------- the tool ---------- */
.tool-wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: 44px;
  align-items: start;
}
.tool fieldset { border: 0; padding: 0; margin: 0 0 26px; }
.tool legend {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0;
  margin-bottom: 14px;
}
.opt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 13px;
  border: 1px solid var(--rule);
  background: var(--paper-card);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.opt:hover { border-color: var(--rule-strong); }
.opt:has(input:checked) { border-color: var(--ink); background: #fff; }
.opt input { margin: 4px 0 0; accent-color: var(--ink); flex: none; }
.opt__label { font-size: 15.5px; line-height: 1.4; }
.opt__sub { display: block; font-size: 13px; color: var(--ink-faint); margin-top: 2px; }

.result {
  border: 1px solid var(--ink);
  background: var(--paper-card);
  padding: 26px 26px 24px;
  position: sticky;
  top: 24px;
  /* With everything ticked the panel outgrows a short viewport and the last rows
     become unreachable, since sticky clips rather than scrolls the page. */
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.result__title { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 14px; }
.result__verdict { font-family: var(--display); font-size: 23px; line-height: 1.25; margin: 0 0 14px; }
.result__list { list-style: none; padding: 0; margin: 0; }
.result__list li {
  font-size: 14.5px;
  padding: 9px 0 9px 12px;
  border-top: 1px solid var(--rule);
  border-left: 3px solid transparent;
  color: var(--ink-soft);
}
.result__list li:first-child { border-top: 0; }
.result__list strong { color: var(--ink); font-weight: 600; }
/* Carry the same three colours into the one panel people actually act on. */
.result__row--blocked { border-left-color: var(--blocked); }
.result__row--sms     { border-left-color: var(--partial); }
.result__row--ok      { border-left-color: var(--clear); }

/* ---------- law ---------- */
.law { border-left: 3px solid var(--rule-strong); padding-left: 26px; }
.law h2 { font-size: clamp(23px, 2.6vw, 29px); margin-bottom: 16px; }
.law p { color: var(--ink-soft); margin: 0 0 16px; }

.srclist { list-style: none; padding: 0; margin: 18px 0 0; }
.srclist li { font-family: var(--mono); font-size: 12.5px; padding: 5px 0; border-top: 1px solid var(--rule); }
.srclist li:first-child { border-top: 0; }

/* ---------- disclosure + providers ---------- */
.disclosure {
  border: 1px solid var(--partial);
  background: var(--partial-bg);
  padding: 18px 20px;
  margin-bottom: 26px;
}
.disclosure__head {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--partial);
  margin: 0 0 8px;
}
.disclosure p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }

.providers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.prov { border: 1px solid var(--rule-strong); background: var(--paper-card); padding: 22px 24px 24px; display: flex; flex-direction: column; }
.prov__name { font-size: 22px; margin-bottom: 4px; }
.prov__tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 14px; }
.prov__ev { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 16px; flex: 1; }
.prov__cta {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--text);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  border-radius: 1px;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
/* Both buttons are styled identically on purpose. Giving the commissioned link more
   visual weight would contradict the disclosure sitting directly above it. */
.prov__cta:hover { background: var(--ink); color: var(--paper); }

.caveat-box { border-top: 2px solid var(--ink); padding-top: 20px; margin-top: 30px; }
.caveat-box h3 { font-size: 20px; margin-bottom: 10px; }
.caveat-box p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }

/* ---------- crosslink + footer ---------- */
.crosslink { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: baseline; justify-content: space-between; }
.crosslink p { margin: 0; color: var(--ink-soft); }

.site-footer { border-top: 1px solid var(--rule); padding-block: 34px 44px; font-size: 14px; color: var(--ink-faint); }
.site-footer p { margin: 0 0 6px; }

.method {
  font-size: 14.5px;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: 16px;
  margin: 0;
}

/* ---------- home ----------
   An editorial entry, not a card in an otherwise empty grid — there is only one
   country so far and a lone bordered tile advertises the nine that are missing. */
.entry {
  display: block;
  text-decoration: none;
  color: inherit;
  border-top: 2px solid var(--ink);
  padding-top: 20px;
  max-width: 760px;
}
.entry__name { font-size: clamp(32px, 4vw, 42px); margin-bottom: 10px; }
.entry:hover .entry__name { color: var(--blocked); }
.entry__line { margin: 0 0 14px; color: var(--ink-soft); font-size: 17px; max-width: 58ch; }
.entry__go { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--link); }
.entry__pending {
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  margin-top: 38px;
  max-width: 62ch;
  color: var(--ink-faint);
  font-size: 15px;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .opening__grid { grid-template-columns: 1fr; gap: 34px; }
  .tool-wrap { grid-template-columns: 1fr; gap: 28px; }
  /* Answer above the question once they stack — otherwise it sits below seven
     checkboxes and the reader never sees it move. */
  .result { position: static; order: -1; max-height: none; }
  .gates { grid-template-columns: 1fr; }
  .gate + .gate { border-left: 0; border-top: 1px solid var(--rule); }
  /* Keep two columns and keep them uneven: the wide cards span both, the small ones don't. */
  .evidence { grid-template-columns: repeat(2, 1fr); }
  .svc--s2 { grid-column: span 1; }
  .svc--s3, .svc--s4, .svc--s6 { grid-column: span 2; }
  .providers { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .opening { padding-block: 44px 36px; }
  .band { padding-block: 40px; }
  .band--deep { padding-block: 52px; }
  .evidence { grid-template-columns: 1fr; }
  .svc, .svc--s2, .svc--s3, .svc--s4, .svc--s6 { grid-column: span 1; }
  .law { padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}