/* ============================================================
   0kyc.io — "Signal" design system
   Single source of truth for the visual identity.
   Imported once by the master layout; every view inherits it.
   ============================================================ */

:root {
  /* Surfaces */
  --ink-900: #0A0D13;   /* page */
  --ink-800: #11151E;   /* cards */
  --ink-700: #171D28;   /* raised / hover */
  --ink-600: #1E2531;

  /* Lines */
  --line:    #232B39;
  --line-2:  #333D50;

  /* Text */
  --text:    #E7EBF3;
  --text-2:  #95A0B5;
  --text-3:  #5C6880;

  /* Brand accent — use sparingly */
  --signal:      #3AD6C4;
  --signal-dim:  #0f2b28;
  --signal-text: #6fe6d8;

  /* Status — reserved for verification / availability only */
  --ok: #4ADE80;      --ok-dim: #0f2a1a;
  --warn: #F5B942;    --warn-dim: #2e2408;
  --danger: #F2666B;  --danger-dim: #2e1315;

  /* Type */
  --sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --radius: 10px;
  --radius-sm: 7px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--ink-900);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(circle at 12% -8%, rgba(58,214,196,0.05), transparent 42%);
}
a { color: inherit; text-decoration: none; }
input, select, button { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: var(--signal-dim); color: var(--signal-text); }

/* Full-width layout: content spans the viewport, with individual sections
   constraining themselves where readability needs it (see .detail-wrap,
   .cat-guide, .hero-grid). */
.wrap { max-width: 100%; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 100%; margin: 0 auto; padding: 0 24px; }
.detail-wrap { max-width: 1300px; margin: 0 auto; }

/* ---------- Top bar ---------- */
.topbar { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
  background: rgba(10,13,19,0.82); backdrop-filter: blur(12px); }
.topbar .inner { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand .logo { height: 32px; width: auto; color: var(--signal);
  display: flex; align-items: center; justify-content: center; }
.brand .logo svg { height: 100%; width: auto; display: block; }
.brand .name { font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.brand .name span { color: var(--text-3); font-weight: 400; }
.topnav { display: flex; gap: 20px; font-size: 14px; color: var(--text-2); align-items: center;
  flex-wrap: wrap; justify-content: flex-end; }
/* Eight links plus the status badge get tight before the mobile breakpoint —
   shed spacing rather than wrapping the bar onto a second line. */
@media (max-width: 1180px) { .topnav { gap: 14px; font-size: 13.5px; } }
@media (max-width: 1020px) { .topnav { gap: 11px; font-size: 13px; } }
.topnav a:hover { color: var(--text); }
.topnav a.active { color: var(--signal); font-weight: 600; }
.topnav .live { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 13px; }
.back { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 7px; font-family: var(--mono); }
.back:hover { color: var(--text); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(74,222,128,0.6); animation: pulse 2.4s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
  70% { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* ---------- Hero ---------- */
.hero { padding: 52px 0 34px; border-bottom: 1px solid var(--line); }
/* On long-form pages the hero shares the body column's centring so the title
   and the text beneath it line up. */
.hero .wrap-narrow { max-width: 1100px; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--signal-text); margin-bottom: 16px; display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--signal); }
.hero h1 { font-size: clamp(28px, 4.6vw, 42px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; max-width: 20ch; }
.hero h1 em { font-style: normal; color: var(--signal-text); }
.hero p { color: var(--text-2); font-size: 16px; max-width: 60ch; margin-top: 16px; }
.stats { display: flex; gap: 38px; margin-top: 30px; flex-wrap: wrap; }
.stat .num { font-family: var(--mono); font-size: 23px; font-weight: 600; }
.stat .num.ok { color: var(--ok); }
.stat .lbl { font-size: 13px; color: var(--text-3); margin-top: 2px; }

/* hero two-column layout */
.hero-grid { display: grid; grid-template-columns: minmax(0, 640px) 320px; gap: 40px; align-items: start; justify-content: center; }
.hero-main { min-width: 0; }

/* live monitoring panel */
.hero-panel { background: var(--ink-800); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.hp-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.hp-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; font-family: var(--mono); }
.hp-clock { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.hp-sweep { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.hp-sweep b { color: var(--text-2); font-weight: 500; }
.hp-warn { color: var(--warn); }
.pulse.pulse-stale { background: var(--warn); box-shadow: 0 0 0 0 rgba(245,185,66,0.6); animation: pulse-stale 2.4s infinite; }
@keyframes pulse-stale {
  0% { box-shadow: 0 0 0 0 rgba(245,185,66,0.5); }
  70% { box-shadow: 0 0 0 6px rgba(245,185,66,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,185,66,0); }
}
.hp-bar-label { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--text-2); margin: 16px 0 7px; }
.hp-pct { font-family: var(--mono); color: var(--ok); font-weight: 500; }
.hp-bar { height: 7px; background: var(--ink-600); border-radius: 99px; overflow: hidden; }
.hp-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--ok); }
.hp-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.hp-mini-cell { background: var(--ink-700); border-radius: 8px; padding: 10px 8px; text-align: center; }
.hp-mini-cell .v { display: block; font-family: var(--mono); font-size: 18px; font-weight: 600; }
.hp-mini-cell .v.ok { color: var(--ok); } .hp-mini-cell .v.dn { color: var(--danger); }
.hp-mini-cell .l { font-size: 11px; color: var(--text-3); }
.hp-feed-title { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin: 4px 0 10px; }
.hp-feed { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.hp-feed li { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.hp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hp-dot.st-up { background: var(--ok); } .hp-dot.st-deg { background: var(--warn); } .hp-dot.st-down { background: var(--danger); }
.hp-name { color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .12s; }
.hp-name:hover { color: var(--text); }
.hp-grade { font-family: var(--mono); font-size: 10px; font-weight: 600; width: 17px; height: 17px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hp-grade.A { background: var(--ok-dim); color: var(--ok); }
.hp-grade.B { background: var(--signal-dim); color: var(--signal-text); }
.hp-grade.C { background: var(--warn-dim); color: var(--warn); }
.hp-grade.D { background: var(--danger-dim); color: var(--danger); }
.hp-grade.E { background: #C4322F; color: #fff; }
.hp-ago { font-family: var(--mono); font-size: 11px; color: var(--text-3); flex-shrink: 0; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; justify-content: stretch; }
  .hero-panel { max-width: 420px; margin: 0 auto; width: 100%; }
}

/* ---------- Toolbar ---------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 16px; flex-wrap: wrap; }
.search { position: relative; flex: 1; max-width: 340px; min-width: 200px; }
.search input { width: 100%; height: 42px; padding: 0 14px 0 40px; background: var(--ink-800);
  border: 1px solid var(--line); border-radius: var(--radius); outline: none; transition: border-color .15s, box-shadow .15s; font-size: 14px; }
.search input::placeholder { color: var(--text-3); }
.search input:focus { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-dim); }
.search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.tright { display: flex; gap: 10px; align-items: center; }
select.sort { height: 42px; padding: 0 34px 0 14px; font-size: 14px;
  background: var(--ink-800) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2395A0B5' stroke-width='2'><path d='M2 4l4 4 4-4'/></svg>") no-repeat right 14px center;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; appearance: none; color: var(--text-2); }

/* pair filter */
.pairbar { display: flex; align-items: center; gap: 10px; background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; }
.pairbar .lab { font-family: var(--mono); font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 4px; }
.pairbar select { height: 30px; padding: 0 26px 0 10px; font-size: 13px; font-family: var(--mono);
  background: var(--ink-700) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' stroke='%2395A0B5' stroke-width='2'><path d='M2 3l3 3 3-3'/></svg>") no-repeat right 9px center;
  border: 1px solid var(--line); border-radius: 6px; appearance: none; cursor: pointer; color: var(--text); }
.pairbar .arrow { color: var(--signal); font-size: 15px; }

/* ---------- Layout ---------- */
.layout { display: grid; grid-template-columns: 236px 1fr; gap: 32px; padding-bottom: 64px; }

/* ---------- Filters ---------- */
aside { font-size: 14px; }
.filters { position: static; }
.fgroup { padding: 16px 0; border-bottom: 1px solid var(--line); }
.fgroup:first-child { padding-top: 0; }
.fgroup h3 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-3); font-weight: 500; margin-bottom: 12px; }
.opt { display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; color: var(--text-2); transition: color .12s; }
.opt:hover { color: var(--text); }
.opt input { accent-color: var(--signal); width: 15px; height: 15px; cursor: pointer; }
select.juris { width: 100%; height: 40px; padding: 0 12px; font-size: 14px; background: var(--ink-800);
  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; color: var(--text); }
.reset { margin-top: 14px; width: 100%; height: 38px; font-size: 13px; background: transparent;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--text-2); cursor: pointer; transition: all .12s; }
.reset:hover { background: var(--ink-800); color: var(--text); }
.apply-btn { margin-top: 10px; width: 100%; height: 40px; font-size: 13px; font-weight: 500;
  background: var(--signal); color: #04211d; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: filter .12s; }
.apply-btn:hover { filter: brightness(1.08); }

/* ---------- Results ---------- */
.rcount { font-size: 13px; color: var(--text-2); margin-bottom: 14px; font-family: var(--mono); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rcount b { color: var(--text); }
.rcount .vsplit { color: var(--text-3); }
.rcount .vsplit .g { color: var(--ok); } .rcount .vsplit .u { color: var(--warn); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 12px; align-items: start; }

.card { background: var(--ink-800); border: 1px solid var(--line); border-radius: 13px; padding: 15px 18px; transition: border-color .15s; }
.card:hover { border-color: var(--line-2); }
.card.paused { opacity: 0.58; }
.card.unverified { border-left: 2px solid var(--warn); }
.card.verified { border-left: 2px solid var(--ok); }
.card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.card .id { display: flex; gap: 14px; align-items: center; }
.avatar { width: 42px; height: 42px; min-width: 42px; border-radius: 11px; flex-shrink: 0; background: var(--ink-700); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 600; font-size: 14px; color: var(--text-2); overflow: hidden; }
.avatar img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; padding: 6px; display: block; }
.nameline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.nameline .n { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.nameline .type { font-family: var(--mono); font-size: 11px; color: var(--text-3); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; display: inline-flex; align-items: center; gap: 4px; }
.nameline .type .type-ico { flex: none; opacity: 0.85; }

/* Verification freshness dot inside the verified badge */
.fresh-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.fresh-dot.fresh { background: var(--ok); box-shadow: 0 0 0 2px var(--ok-dim); }
.fresh-dot.aging { background: var(--warn); box-shadow: 0 0 0 2px var(--warn-dim); }
.fresh-dot.stale { background: var(--danger); box-shadow: 0 0 0 2px var(--danger-dim); }
.fresh-dot.never { background: var(--text-3); }
.nameline .flag { font-size: 13px; }
.desc { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.rating { text-align: right; flex-shrink: 0; }
.rating .grade { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; font-family: var(--mono); font-weight: 600; font-size: 14px; }
.grade.A { background: var(--ok-dim); color: var(--ok); }
.grade.B { background: var(--signal-dim); color: var(--signal-text); }
.grade.C { background: var(--warn-dim); color: var(--warn); }
.grade.D { background: var(--danger-dim); color: var(--danger); }
.grade.E { background: #C4322F; color: #fff; }
.g.A { background: var(--ok-dim); color: var(--ok); }
.g.B { background: var(--signal-dim); color: var(--signal-text); }
.g.C { background: var(--warn-dim); color: var(--warn); }
.g.D { background: var(--danger-dim); color: var(--danger); }
.g.E { background: #C4322F; color: #fff; }
.rating .val { font-family: var(--mono); font-size: 14px; font-weight: 600; margin-top: 6px; }
.rating .val span { color: var(--text-3); font-size: 11px; font-weight: 400; }

.statusline { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; margin-top: 5px; justify-content: flex-end; }
.statusline .dot { width: 6px; height: 6px; border-radius: 50%; }
.st-up .dot { background: var(--ok); } .st-up { color: var(--ok); }
.st-deg .dot { background: var(--warn); } .st-deg { color: var(--warn); }
.st-down .dot { background: var(--danger); } .st-down { color: var(--danger); }

.badge { font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 500; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); }
.badge svg { width: 11px; height: 11px; }
.b-verified { background: var(--ok-dim); color: var(--ok); }
.b-unverified { background: var(--warn-dim); color: var(--warn); }
.b-neutral { background: var(--ink-700); color: var(--text-2); }
.b-api { background: var(--signal-dim); color: var(--signal-text); }
.b-tor { background: var(--ink-700); color: var(--text-2); }
.b-danger { background: var(--danger-dim); color: var(--danger); }
/* Positive confirmations share the verification green — they answer the same
   question ("is this actually safe?") from a different angle. */
.b-ok { background: var(--ok-dim); color: var(--ok); }
/* Amber sits between: not a proven danger, but not a clean bill either.
   "KYC risk" is the archetype — verification that can fire after you deposit. */
.b-warn { background: var(--warn-dim); color: var(--warn); }
/* Sponsored is neither good nor bad news, it's a disclosure. Deliberately
   muted and outlined rather than filled: it should be readable without
   competing with the signals that carry an actual verdict. */
.b-sponsored { background: transparent; border: 1px dashed var(--line-2); color: var(--text-3); }

/* Two stacked rows, not one flex line: badges wrap freely on their own row,
   metrics and the action follow underneath. Sharing a single line meant an
   overflowing badge row pushed itself under the metrics and left a ragged
   gap — and the badge count only grows as more criteria get surfaced. */
.bottom { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.tags { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; min-width: 0; }
.meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-width: 0; }
.kv { display: flex; flex: 1 1 auto; gap: 4px 14px; flex-wrap: wrap; align-items: center; min-width: 0; font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
/* Each metric stays whole: breaking "fee 1-1.5%" across lines reads worse
   than letting the group wrap. */
.kv > span { white-space: nowrap; }
.kv b { color: var(--text-2); font-weight: 500; }
.visit { font-size: 13px; padding: 8px 14px; flex-shrink: 0; font-weight: 500; background: transparent;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: all .12s; }
.visit:hover { background: var(--signal); color: #04211d; border-color: var(--signal); }
.visit svg { width: 13px; height: 13px; }

.empty { text-align: center; padding: 64px 20px; color: var(--text-3); border: 1px dashed var(--line); border-radius: 13px; font-size: 14px; line-height: 1.7; }

.diff { background: var(--ink-800); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
  display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--text-2); line-height: 1.55; }
.diff svg { width: 18px; height: 18px; color: var(--signal); flex-shrink: 0; margin-top: 1px; }
.diff b { color: var(--text); font-weight: 500; }

/* pagination */
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 24px; font-family: var(--mono); font-size: 13px; }
.pager a, .pager span { padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-2); }
.pager a:hover { border-color: var(--line-2); color: var(--text); }
.pager .cur { background: var(--signal-dim); color: var(--signal-text); border-color: var(--signal-dim); }
.pager .disabled { opacity: 0.4; }

/* ---------- Detail page ---------- */
.crumb { font-family: var(--mono); font-size: 12px; color: var(--text-3); padding: 22px 0 0; }
.crumb a:hover { color: var(--text-2); }
.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 18px 0 26px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.head .id { display: flex; gap: 16px; align-items: center; }
.head .avatar { width: 58px; height: 58px; border-radius: 14px; font-size: 20px; }
.head h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; }
.head .sub { color: var(--text-2); font-size: 14px; margin-top: 4px; }
.head .actions { display: flex; gap: 10px; align-items: center; }
.btn { font-size: 14px; font-weight: 500; padding: 10px 18px; border-radius: var(--radius-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: all .12s; border: 1px solid var(--line-2); background: transparent; color: var(--text); }
.btn:hover { background: var(--ink-800); }
.btn.primary { background: var(--signal); color: #04211d; border-color: var(--signal); }
.btn.primary:hover { filter: brightness(1.08); }
.btn svg { width: 14px; height: 14px; }

.cols { display: grid; grid-template-columns: 1fr 300px; gap: 28px; padding: 28px 0 60px; }
.section { margin-bottom: 30px; }
.section > h2 { font-size: 13px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-3); font-weight: 500; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.section > h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.scorecard { background: var(--ink-800); border: 1px solid var(--line); border-radius: 14px; padding: 22px; position: sticky; top: 82px; }
.scorecard .global { text-align: center; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.scorecard .gval { font-family: var(--mono); font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.scorecard .gval span { font-size: 20px; color: var(--text-3); }
.scorecard .gstars { color: var(--signal); font-size: 15px; letter-spacing: 2px; margin-top: 8px; }
.scorecard .gmeta { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-top: 8px; }
.axes { padding-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.axis .arow { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.axis .aname { color: var(--text-2); }
.axis .aname b { color: var(--text-3); font-family: var(--mono); font-weight: 400; font-size: 11px; margin-left: 5px; }
.axis .aval { font-family: var(--mono); color: var(--text); font-weight: 500; }
.bar { height: 6px; background: var(--ink-600); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--signal); }
.bar > i.mid { background: var(--warn); }
.bar > i.low { background: var(--danger); }
.methodology { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-3); line-height: 1.6; font-family: var(--mono); }
.methodology a { color: var(--signal-text); }

.crit { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.crit .cell { background: var(--ink-800); padding: 13px 16px; }
.crit .k { font-size: 12px; color: var(--text-3); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.crit .v { font-size: 14px; margin-top: 4px; display: flex; align-items: center; gap: 7px; }
.crit .v.mono { font-family: var(--mono); }
.dotv { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dotv.g { background: var(--ok); } .dotv.a { background: var(--warn); } .dotv.r { background: var(--danger); }

.review { background: var(--ink-800); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 11px; }
.review .rvtop { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.review .who { display: flex; align-items: center; gap: 10px; }
.review .who .av { width: 30px; height: 30px; border-radius: 8px; background: var(--ink-700); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.review .who .nm { font-size: 14px; font-weight: 500; }
.review .who .dt { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.review .stars { color: var(--signal); font-size: 13px; letter-spacing: 1px; }
.review .body { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.review .proof { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.review .proof .vok { color: var(--ok); display: flex; align-items: center; gap: 5px; }
.review .proof svg { width: 12px; height: 12px; }

.submit { background: var(--ink-800); border: 1px dashed var(--line-2); border-radius: 12px; padding: 18px; margin-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.submit .txt { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.submit .txt b { color: var(--text); font-weight: 500; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); }
footer .inner { padding: 30px 24px 46px; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-left { max-width: 640px; }
footer .disc { font-size: 12.5px; color: var(--text-3); line-height: 1.75; }
footer .disc strong { color: var(--text-2); font-weight: 500; }
.socials { display: flex; gap: 14px; margin-top: 18px; }
.socials a { color: var(--text-3); display: inline-flex; transition: color .15s; }
.socials a:hover { color: var(--signal); }
.socials svg { width: 18px; height: 18px; display: block; }
footer .meta { font-family: var(--mono); font-size: 12px; color: var(--text-3); text-align: right; }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  aside { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; background: var(--ink-800); border: 1px solid var(--line); border-radius: 13px; padding: 18px; margin-bottom: 8px; }
  .fgroup:first-child { padding-top: 16px; }
  .topnav a { display: none; } .topnav .live { display: flex; }
  .cols { grid-template-columns: 1fr; }
  .scorecard { position: static; }
  .crit { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  aside { grid-template-columns: 1fr; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .pairbar { flex-wrap: wrap; }
  .cards { grid-template-columns: 1fr; }
  /* Metrics used to be hidden here because they competed with the action for
     one cramped flex line. The footer now stacks, so they can stay: fee and
     speed are exactly what a phone reader wants before tapping through. */
  .meta { gap: 8px; }
  .visit { width: 100%; justify-content: center; margin-left: 0; }
}

/* ============================================================
   Methodology page
   ============================================================ */
/* Long-form pages (methodology, corrections, contact). The wrapper is
   full-width, so the reading column is constrained here instead — past roughly
   75 characters a line becomes hard to track back from. */
.body-doc { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; padding: 44px 0 72px;
  max-width: 1100px; margin: 0 auto; }
.toc { position: sticky; top: 86px; align-self: start; font-family: var(--mono); font-size: 12px; }
.toc h4 { color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; margin-bottom: 12px; }
.toc a { display: block; color: var(--text-2); padding: 5px 0; border-left: 1px solid var(--line); padding-left: 14px; transition: all .12s; }
.toc a:hover { color: var(--text); border-color: var(--signal); }

article > section { margin-bottom: 48px; scroll-margin-top: 80px; }
article h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; display: flex; align-items: baseline; gap: 12px; }
article h2 .idx { font-family: var(--mono); font-size: 13px; color: var(--signal-text); font-weight: 500; }
article h3 { font-size: 16px; font-weight: 600; margin: 22px 0 8px; }
article p { color: var(--text-2); font-size: 15px; margin-bottom: 12px; }
article p strong { color: var(--text); font-weight: 500; }
article ul { list-style: none; margin: 12px 0; padding: 0; }
article ul li { color: var(--text-2); font-size: 15px; padding: 6px 0 6px 22px; position: relative; }
article ul li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
code { font-family: var(--mono); font-size: 13px; background: var(--ink-700); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--signal-text); }

.note { background: var(--ink-800); border: 1px solid var(--line); border-left: 2px solid var(--signal); border-radius: 0 12px 12px 0; padding: 16px 18px; margin: 18px 0; font-size: 14px; color: var(--text-2); line-height: 1.6; }
.note b { color: var(--text); font-weight: 500; }

.wtable { width: 100%; border-collapse: separate; border-spacing: 0; margin: 16px 0; font-size: 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.wtable th { text-align: left; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); font-weight: 500; padding: 12px 16px; background: var(--ink-800); border-bottom: 1px solid var(--line); }
.wtable td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
.wtable tr:last-child td { border-bottom: none; }
.wtable .axis { color: var(--text); font-weight: 500; white-space: nowrap; }
.wtable .w { font-family: var(--mono); color: var(--signal-text); font-weight: 500; }
.wtable .src { font-size: 13px; }
.wtable tr.tot td { background: var(--ink-800); color: var(--text); font-weight: 500; }
.wtable tr.tot .w { color: var(--text); }

.grades { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.gcard { background: var(--ink-800); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.gcard .g { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; font-family: var(--mono); font-weight: 600; font-size: 16px; margin-bottom: 10px; }
.gcard .rng { font-family: var(--mono); font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.gcard .lbl { font-size: 13px; color: var(--text-2); line-height: 1.5; }

.steps { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.step { background: var(--ink-800); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; gap: 14px; align-items: flex-start; }
.step .num { font-family: var(--mono); font-size: 12px; color: var(--signal-text); border: 1px solid var(--line); border-radius: 6px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step .t { font-weight: 500; font-size: 14px; margin-bottom: 3px; }
.step .d { font-size: 13px; color: var(--text-2); line-height: 1.5; }

.legend { display: flex; gap: 20px; flex-wrap: wrap; margin: 14px 0; }
.leg { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); font-family: var(--mono); }
.leg .dot { width: 8px; height: 8px; border-radius: 50%; }
.leg .dot.g { background: var(--ok); } .leg .dot.a { background: var(--warn); } .leg .dot.r { background: var(--danger); }

@media (max-width: 800px) {
  .body-doc { grid-template-columns: 1fr; gap: 0; }
  .toc { display: none; }
}

/* ============================================================
   Review submission form
   ============================================================ */
.form-wrap { max-width: 620px; padding: 40px 0 72px; }
.form-card { background: var(--ink-800); border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.form-intro { font-size: 14px; color: var(--text-2); line-height: 1.6; margin-bottom: 24px; }
.form-intro b { color: var(--text); font-weight: 500; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.field label .req { color: var(--signal-text); }
.field .hint { font-size: 12px; color: var(--text-3); margin-top: 6px; font-family: var(--mono); }
.field input[type="text"], .field textarea {
  width: 100%; background: var(--ink-900); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 13px; font-size: 14px; color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input[type="text"]:focus, .field textarea:focus { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-dim); }
.field input.mono { font-family: var(--mono); }
.field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.field .err { color: var(--danger); font-size: 12px; margin-top: 6px; }

.stars-input { display: flex; gap: 6px; }
.stars-input input { position: absolute; opacity: 0; pointer-events: none; }
.stars-input label { cursor: pointer; font-size: 26px; color: var(--ink-600); transition: color .12s; margin: 0; }
.stars-input:hover label { color: var(--signal); }
.stars-input label:hover ~ label { color: var(--ink-600); }
.stars-input input:checked ~ label { color: var(--ink-600); }
/* fill up to checked (reverse trick handled in markup order) */
.stars-input { flex-direction: row-reverse; justify-content: flex-end; }
.stars-input input:checked ~ label { color: var(--signal); }
.stars-input label:hover, .stars-input label:hover ~ label { color: var(--signal); }

.form-actions { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.form-note { font-size: 12px; color: var(--text-3); line-height: 1.5; flex: 1; }

.flash { background: var(--ok-dim); border: 1px solid var(--ok); border-radius: var(--radius); padding: 13px 16px; font-size: 14px; color: var(--ok); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.flash svg { width: 16px; height: 16px; flex-shrink: 0; }

@media (max-width: 560px) {
  .form-card { padding: 20px; }
  .form-actions { flex-direction: column; align-items: stretch; }
}

/* incident history detail (public fiche) */
.cell-wide { grid-column: 1 / -1; }
.incidents { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
/* .incident and its children are defined once, further down, in the
   "Incidents" section — kept together there rather than split across the file. */

/* criteria groups — section subtitles inside the criteria block */
.crit-group {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--signal);
    margin: 22px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}
.crit-group:first-of-type { margin-top: 8px; }

/* letter grade badge in the scorecard */
.grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 26px;
    margin-bottom: 10px;
    border: 1.5px solid;
}
.grade-a { color: var(--ok); border-color: var(--ok); background: rgba(74,222,128,0.08); }
.grade-b { color: var(--signal); border-color: var(--signal); background: rgba(58,214,196,0.08); }
.grade-c { color: var(--warn); border-color: var(--warn); background: rgba(245,185,66,0.08); }
.grade-d { color: var(--danger); border-color: var(--danger); background: rgba(242,102,107,0.08); }
.grade-e { color: #fff; border-color: #C4322F; background: #C4322F; }

/* incidents surfaced at the top of the fiche */
.incidents-alert { margin: 4px 0 20px; }
.crit-group-alert {
    color: var(--danger);
    border-bottom-color: rgba(242,102,107,0.3);
    margin-top: 0;
}

/* Corrections log */
.corr-intro { margin-bottom: 34px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.corr-intro p { margin: 0 0 12px; }
.corr-note { color: var(--text-3); font-size: 13.5px; }
.corr { padding: 22px 0; border-bottom: 1px solid var(--line); }
.corr:last-child { border-bottom: 0; }
.corr-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.corr-date { font-size: 12.5px; color: var(--text-3); }
.corr-service { font-weight: 600; font-size: 15px; color: var(--text); text-decoration: none; }
a.corr-service:hover { color: var(--signal); }
.corr-sitewide { color: var(--text-2); font-weight: 500; }
.corr-change { font-size: 12.5px; color: var(--signal-text); background: var(--signal-dim);
  border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 8px; }
.corr-reason { margin: 0; color: var(--text-2); line-height: 1.75; }
.corr-meta { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-3); }
.corr-meta a { color: var(--text-3); }
.corr-meta a:hover { color: var(--signal); }

/* Contact page */
.contact-box { background: var(--ink-800); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; margin: 14px 0 18px; display: flex; flex-direction: column; gap: 5px; }
.contact-addr { font-size: 17px; color: var(--signal-text); user-select: all; }
.contact-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); }
.contact-fpr { font-size: 13.5px; color: var(--text); letter-spacing: 0.04em; word-break: break-all; user-select: all; }

/* Category editorial guide (below the listing) */
.cat-guide { max-width: 760px; margin: 56px auto 0; padding-top: 40px; border-top: 1px solid var(--line); }
.cat-guide section { margin-bottom: 34px; }
.cat-guide section:last-child { margin-bottom: 0; }
.cat-guide h2 { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--text); margin: 0 0 12px; }
.cat-guide p { color: var(--text-2); line-height: 1.8; font-size: 14.5px; margin: 0 0 13px; }
.cat-guide p:last-child { margin-bottom: 0; }
.cat-guide em { color: var(--text); font-style: italic; }
@media (max-width: 700px) { .cat-guide { margin-top: 40px; padding-top: 30px; } }

/* Footer: secondary line and information links */
.disc-sub { margin-top: 8px; color: var(--text-3); font-size: 12px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }
.foot-links a { color: var(--text-2); font-size: 12.5px; text-decoration: none; }
.foot-links a:hover { color: var(--signal); }

/* Doc layout without a sidebar (corrections log): one reading column, narrower
   than the two-column variant since there's no nav taking up the left side.
   The parent's 48px gap is a column gap there but becomes a row gap here,
   stacking on top of each entry's own spacing — so it's reset. */
.body-doc-single { grid-template-columns: minmax(0, 1fr); max-width: 780px; gap: 0; }
.hero-single .wrap-narrow { max-width: 780px; }

/* Side-by-side comparison */
.cmp-hero { max-width: 1200px; margin: 0 auto; }
.cmp-wrap { padding: 34px 0 72px; max-width: 1200px; margin: 0 auto; }
.cmp-picker { background: var(--ink-800); border: 1px solid var(--line); border-radius: 13px;
  padding: 20px 22px; margin-bottom: 28px; }
/* Fixed-width columns rather than auto-fit: with only the category select
   present, a stretching grid would blow one dropdown across the full width. */
.cmp-picker-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; }
.cmp-picker .f { display: flex; flex-direction: column; gap: 6px; flex: 0 1 220px; min-width: 180px; }
.cmp-picker label { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.cmp-picker select { background: var(--ink-900); border: 1px solid var(--line-2); border-radius: 8px;
  color: var(--text); padding: 9px 11px; font-size: 14px; font-family: inherit; }
.cmp-picker-actions { display: flex; gap: 10px; margin-top: 18px; }

.cmp-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; }
/* Fixed layout: without it a service with a long asset list claims most of the
   table and squeezes the others, which defeats a side-by-side comparison. */
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; min-width: 760px; }
.cmp th, .cmp td { padding: 12px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.cmp thead th { background: var(--ink-700); position: sticky; top: 0; }
.cmp-crit { color: var(--text-3); font-size: 13px; width: 280px; min-width: 240px; }
/* A forty-asset list would otherwise make one row taller than the rest of the
   table put together. Capped and scrollable: the full list stays available
   without the row dictating the page. */
.cmp-long { display: block; max-height: 108px; overflow-y: auto; line-height: 1.6;
  scrollbar-width: thin; }
/* Tone: the point of a comparison is spotting the difference, so favourable and
   unfavourable answers carry colour. Kept to the two ends of the scale — if
   every middling value were amber too, nothing would stand out at all. */
.cmp-good { color: var(--ok); }
.cmp-bad { color: var(--danger); }
.cmp-warn { color: var(--text-2); }
.cmp-name { color: var(--text); font-weight: 600; text-decoration: none; margin-right: 8px; }
.cmp-name:hover { color: var(--signal); }
.cmp-group td { background: var(--ink-900); color: var(--text-3); font-family: var(--mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; padding: 8px 16px; }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp-note { color: var(--text-3); font-size: 13px; margin-top: 16px; line-height: 1.7; }
.cmp-note a { color: var(--text-2); }
.cmp-note a:hover { color: var(--signal); }
@media (max-width: 700px) { .cmp-crit { width: 140px; min-width: 130px; } }


/* ============================================================
   INCIDENTS — public service page
   ============================================================
   Each incident reads in two beats: a meta row giving the verdict at a glance
   (how bad, when, policy or event, resolved or not), then the prose on its own
   full-width line. Badges inline with the text force a ragged left edge and
   make a list of incidents hard to scan.

   The left border encodes severity, so critical entries are findable while
   scrolling without reading a word. */

.incident {
  display: block;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-left: 3px solid var(--line-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--ink-800);
  font-size: 13px;
}

.incident:last-child { margin-bottom: 0; }

.incident.inc-critical { border-left-color: var(--danger); background: var(--danger-dim); }
.incident.inc-major    { border-left-color: var(--warn); }
.incident.inc-minor    { border-left-color: var(--line-2); }

/* Meta row */

.inc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.inc-sev,
.inc-kind,
.inc-res,
.inc-pm {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  white-space: nowrap;
}

.inc-sev {
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid currentColor;
}

.inc-critical .inc-sev { color: var(--danger); }
.inc-major    .inc-sev { color: var(--warn); }
.inc-minor    .inc-sev { color: var(--text-3); }

.inc-date {
  margin-right: 2px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}

/* Kind — neutral and informational. A policy is a standing clause rather than
   something that happened, which is worth flagging in amber: it never expires
   the way a resolved event does. */
.inc-kind {
  border: 1px solid var(--line-2);
  color: var(--text-2);
}

.inc-kind-policy     { border-color: rgba(245, 185, 66, 0.32); color: var(--warn); }
.inc-kind-allegation { border-style: dashed; }

/* Resolution — carries the verdict, so it carries the colour. */
.inc-res-good { background: var(--signal-dim); color: var(--signal-text); border: 1px solid rgba(58, 214, 196, 0.28); }
.inc-res-warn { background: var(--warn-dim);   color: var(--warn);        border: 1px solid rgba(245, 185, 66, 0.28); }
.inc-res-bad  { background: var(--danger-dim); color: var(--danger);      border: 1px solid rgba(242, 102, 107, 0.28); }

/* Post-mortem — visible credit for an operator who publishes its own failures,
   since the silent ones never give users that. */
.inc-pm {
  border: 1px solid rgba(58, 214, 196, 0.22);
  color: var(--signal-text);
}

.inc-pm::before { content: '\2713\00a0'; }

/* Description */

.inc-desc {
  display: block;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

@media (max-width: 640px) {
  .incident { padding: 10px 12px; }
  .inc-meta { gap: 5px; }
}


/* ============================================================
   NEGATIVE SIGNAL BADGES — directory cards
   ============================================================
   b-danger already carried "blocked in your jurisdiction"; it now also carries
   data-sharing and Tor refusal. Surfacing these on the card rather than only
   on the detail page means someone scanning twenty services can rule out the
   ones that share with authorities without opening twenty tabs. */

.b-danger svg { flex: none; }

/* A card carrying a negative signal gets a faint left accent, so the row is
   findable in a long list before the badges themselves are read. Only applies
   to cards that aren't already accented by their verification state. */
.card:not(.verified):not(.unverified):has(.b-danger) {
  border-left: 2px solid rgba(242, 102, 107, 0.45);
}