/* =================================================================
   PROPORTIONAL DATA — design system
   Principled editorial × civic-technical
   ================================================================= */

/* ---------- tokens ---------- */
:root{
  /* neutrals (warm) */
  --ink:#20252a; --ink-2:#39414a; --slate:#5d666c; --muted:#8d9298;
  --line:#e4e0d5; --line-2:#efece2;
  --paper:#f6f4ee; --surface:#ffffff; --surface-2:#fbf9f3;

  /* humane green accent */
  --accent:#2f7d5b; --accent-deep:#1d5b41; --accent-bright:#3f9b6e;
  --accent-soft:#e7f0ea; --accent-line:#cfe2d6;

  /* compliance grades */
  --gA:#3f8f6f; --gA-s:#e6f0ea;
  --gB:#3f6f9f; --gB-s:#e6edf4;
  --gC:#cf9b34; --gC-s:#f6efda;
  --gD:#c0473e; --gD-s:#f7e4e1;

  /* type */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;

  /* rhythm */
  --mx:clamp(20px,5vw,84px);     /* page gutter */
  --maxw:1240px;
  --radius:13px;

  --shadow-sm:0 1px 2px rgba(32,37,42,.05),0 2px 8px rgba(32,37,42,.05);
  --shadow:0 4px 14px rgba(32,37,42,.07),0 18px 44px rgba(32,37,42,.08);
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* faint dot atmosphere */
  background-image:radial-gradient(rgba(32,37,42,.035) 1px, transparent 1.4px);
  background-size:26px 26px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:500; letter-spacing:-.012em; }
p{ margin:0; }
::selection{ background:var(--accent); color:#fff; }

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--mx); }
.section{ padding-block:clamp(32px,4.5vw,60px); }
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-deep); font-weight:500; display:flex; width:max-content; max-width:100%;
  align-items:center; gap:9px; margin-bottom:22px;
}
.center .eyebrow, .eyebrow.is-center{ margin-inline:auto; }
.eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--accent); display:inline-block; }
.serif{ font-family:var(--serif); }
.mono{ font-family:var(--mono); }
.muted{ color:var(--slate); }
.center{ text-align:center; }

.display{ font-family:var(--serif); font-weight:500; line-height:1.02; letter-spacing:-.02em; }
.lede{ font-size:clamp(18px,2.1vw,21px); line-height:1.55; color:var(--ink-2); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:600; letter-spacing:.005em;
  padding:13px 22px; border-radius:10px; border:1.5px solid transparent;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, color .16s;
  white-space:nowrap;
}
.btn .ico{ transition:transform .2s ease; }
.btn:hover .ico{ transform:translateX(3px); }
.btn-primary{ background:var(--accent-deep); color:#fff; box-shadow:0 2px 10px rgba(29,91,65,.3); }
.btn-primary:hover{ background:#143f2d; transform:translateY(-1px); box-shadow:0 6px 18px rgba(29,91,65,.36); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:var(--surface); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-1px); }
.btn-ink{ background:var(--ink); color:var(--paper); }
.btn-ink:hover{ background:#000; transform:translateY(-1px); }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }

.textlink{ color:var(--accent-deep); font-weight:600; border-bottom:1.5px solid var(--accent-line); padding-bottom:1px; transition:border-color .16s; display:inline-flex; gap:6px; align-items:center; }
.textlink:hover{ border-color:var(--accent); }

/* ---------- mark / logo : ratio dots "a : b" ---------- */
.mark{ display:inline-flex; align-items:center; gap:5px; height:22px; --dot:var(--ink); }
.mark span{ display:block; flex:none; }
.mark span:nth-child(1){ width:11px; height:11px; border-radius:50%; background:var(--slate); }
.mark span:nth-child(2){ width:3px; height:13px;
  background-image:radial-gradient(circle at 1.5px 2px, var(--dot) 1.5px, transparent 1.7px),
                   radial-gradient(circle at 1.5px 11px, var(--dot) 1.5px, transparent 1.7px);
  background-repeat:no-repeat; }
.mark span:nth-child(3){ width:19px; height:19px; border-radius:50%; background:var(--accent); }
.wordmark{ display:inline-flex; align-items:center; gap:11px; font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  backdrop-filter:saturate(1.1) blur(8px);
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  border-bottom:1px solid var(--line);
}
.nav-in{ max-width:var(--maxw); margin:0 auto; padding:14px var(--mx); display:flex; align-items:center; gap:28px; }
.nav-links{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.nav-links a{ font-size:14.5px; font-weight:500; color:var(--ink-2); transition:color .15s; position:relative; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.active{ color:var(--accent-deep); }
/* keep nav CTA button text white (override .nav-links a color via specificity) */
.nav-links a.btn-primary{ color:#fff; }
.nav-links a.btn-primary:hover{ color:#fff; }
.nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-19px; height:2px; background:var(--accent); }
.nav-cta{ margin-left:6px; }
.nav-burger{ display:none; margin-left:auto; background:none; border:1.5px solid var(--line); border-radius:9px; padding:8px 10px; }
.nav-burger span{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; }
.nav-burger span+span{ margin-top:4px; }

@media (max-width:860px){
  .nav-links{ position:fixed; inset:62px 0 auto 0; flex-direction:column; align-items:flex-start; gap:4px;
    background:var(--surface); border-bottom:1px solid var(--line); padding:14px var(--mx) 22px; transform:translateY(-130%); transition:transform .28s ease; box-shadow:var(--shadow); }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ font-size:17px; padding:10px 0; width:100%; border-bottom:1px solid var(--line-2); }
  .nav-links a.active::after{ display:none; }
  .nav-cta{ margin:8px 0 0; }
  .nav-burger{ display:block; }
}

/* ---------- footer ---------- */
.footer{ background:var(--ink); color:#cdd2d0; }
.footer a{ color:#cdd2d0; }
.footer-in{ max-width:var(--maxw); margin:0 auto; padding:64px var(--mx) 40px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.footer .wordmark{ color:#fff; }
.footer .mark{ --dot:#cdd2d0; }
.footer .mark span:nth-child(1){ background:#9aa29d; }
.footer .mark span:nth-child(3){ background:var(--accent-bright); }
.footer .creed{ font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; color:#9aa29d; margin-top:16px; }
.footer h5{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#7f8884; margin:0 0 14px; font-weight:500; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14.5px; }
.footer ul a:hover{ color:#fff; }
.footer-base{ border-top:1px solid #333a38; }
.footer-base-in{ max-width:var(--maxw); margin:0 auto; padding:20px var(--mx); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:12.5px; color:#838c88; }
@media (max-width:760px){ .footer-in{ grid-template-columns:1fr 1fr; gap:32px; } .footer .brandcol{ grid-column:1 / -1; } }

/* ---------- grade badge ---------- */
.gbadge{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:600;
  color:#fff; border-radius:7px; }
.gbadge.A{ background:var(--gA); } .gbadge.B{ background:var(--gB); }
.gbadge.C{ background:var(--gC); } .gbadge.D{ background:var(--gD); }

/* ---------- pill / tag ---------- */
.tag{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:500; color:var(--slate); border:1px solid var(--line); border-radius:30px; padding:5px 12px; background:var(--surface); }
.tag.accent{ color:var(--accent-deep); border-color:var(--accent-line); background:var(--accent-soft); }

/* ---------- reveal (no hidden resting state — safe in throttled iframes) ---------- */
.reveal{ }

/* ---------- disclaimer ---------- */
.disclaimer{ display:flex; gap:12px; align-items:flex-start; font-size:13.5px; line-height:1.55; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:15px 18px; }
.disclaimer .dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:7px; }
.disclaimer b{ color:var(--accent-deep); }

/* =================================================================
   DATA-VIZ COMPONENTS (matrix, grade cards, vendors, detail, table)
   ================================================================= */
/* matrix svg */
svg.matrix-svg{ width:100%; height:auto; display:block; }
.mx-tick{ font-family:var(--mono); font-size:10px; fill:var(--muted); }
.mx-qlab{ font-family:var(--sans); font-size:12px; font-weight:600; }
.mx-qsub{ font-family:var(--sans); font-size:10px; fill:var(--muted); }
.mx-axis{ font-family:var(--sans); font-size:11px; font-weight:500; fill:var(--slate); }
.mx-bub{ transition:fill-opacity .15s, stroke-width .15s; }
.mx-bub:hover{ fill-opacity:.82 !important; stroke-width:2.2; }
.mx-tip{ position:fixed; z-index:200; display:none; pointer-events:none; background:var(--ink); color:#fff;
  border-radius:10px; padding:11px 13px; box-shadow:var(--shadow); min-width:170px; font-size:13px; }
.mx-tip-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mx-tip-h b{ font-family:var(--serif); font-size:16px; font-weight:600; }
.mx-tip-h .gbadge{ width:22px; height:22px; font-size:12px; }
.mx-tip-r{ font-size:12px; color:#aeb4b1; margin-top:2px; }
.mx-tip-g{ display:grid; grid-template-columns:auto auto; gap:1px 12px; margin-top:9px; padding-top:9px; border-top:1px solid #3a423e; font-size:12px; }
.mx-tip-g span{ color:#9aa29d; } .mx-tip-g b{ font-family:var(--mono); justify-self:end; }

/* generic definition tooltip + hover affordance */
.pd-tip{ position:fixed; z-index:300; display:none; pointer-events:none; background:var(--ink); color:#fff;
  border-radius:10px; padding:11px 13px; box-shadow:var(--shadow); max-width:268px; font-size:13px; line-height:1.45; }
.pd-tip b{ display:block; font-family:var(--serif); font-size:15px; font-weight:600; margin-bottom:4px; }
.pd-tip span{ display:block; color:#cdd2d0; }
.has-tip{ cursor:help; border-bottom:1px dotted var(--muted); }
[data-tip-grade]{ cursor:help; }
th[data-tip-term]{ cursor:help; }
.tip-q::after{ content:"?"; display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px;
  margin-left:5px; border-radius:50%; background:var(--line); color:var(--slate); font-family:var(--sans);
  font-size:9px; font-weight:700; vertical-align:middle; cursor:help; }

/* grade cards */
.gcards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.gcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;
  border-top:3px solid var(--gc); box-shadow:var(--shadow-sm); }
.gcard-top{ display:flex; align-items:baseline; justify-content:space-between; }
.gcard-letter{ font-family:var(--serif); font-size:38px; font-weight:600; color:var(--gc); line-height:1; }
.gcard-count{ font-family:var(--mono); font-size:24px; font-weight:600; color:var(--ink); }
.gcard-label{ font-weight:600; font-size:15px; margin-top:10px; }
.gcard-desc{ font-size:13px; color:var(--slate); margin-top:6px; line-height:1.45; }

/* grade distribution bar */
.gbar{ display:flex; height:46px; border-radius:10px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.gbar-seg{ display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; min-width:30px; line-height:1.1; }
.gbar-seg span{ font-family:var(--mono); font-weight:600; font-size:14px; }
.gbar-seg i{ font-style:normal; font-size:11px; opacity:.85; }

/* vendor ranking */
.vrow{ display:grid; grid-template-columns:30px 1fr minmax(120px,2fr) 46px; gap:14px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line-2); }
.vrank{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.vname{ font-weight:500; font-size:14.5px; } .vname em{ display:block; font-style:normal; font-size:11.5px; color:var(--slate); font-family:var(--mono); letter-spacing:.02em; margin-top:1px; }
.vbar-track{ background:var(--line-2); border-radius:6px; height:14px; overflow:hidden; }
.vbar{ height:100%; border-radius:6px; }
.vpct{ font-family:var(--mono); font-size:13px; text-align:right; color:var(--ink-2); }
.vlegend{ display:flex; flex-wrap:wrap; gap:16px; margin-top:18px; font-size:12px; color:var(--slate); }
.vlegend i{ width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:6px; vertical-align:-1px; }

/* detail panel */
.detail{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow-sm); align-self:start; position:sticky; top:88px; }
.dt-empty{ text-align:center; color:var(--slate); padding:30px 6px; }
.dt-empty-ico{ width:46px; height:46px; margin:0 auto 16px; border-radius:50%; border:2px dashed var(--accent-line);
  background:radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 70%); }
.dt-empty p{ font-size:14px; line-height:1.55; max-width:240px; margin:0 auto; }
.dt-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.dt-name{ font-family:var(--serif); font-size:25px; font-weight:600; line-height:1.1; }
.dt-vert{ font-family:var(--mono); font-size:12px; color:var(--slate); margin-top:3px; letter-spacing:.03em; }
.dt-badge{ width:40px; height:40px; font-size:19px; flex:none; }
.dt-grade{ font-size:13.5px; color:var(--slate); line-height:1.5; margin:14px 0 18px; }
.dt-scores{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:8px; }
.dt-score{ background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.dt-score span{ display:block; font-size:11.5px; color:var(--slate); }
.dt-score b{ font-size:30px; font-weight:600; color:var(--ink); } .dt-score i{ font-style:normal; color:var(--muted); font-size:14px; }
.dt-row{ display:flex; justify-content:space-between; gap:12px; font-size:14px; padding:11px 0; border-bottom:1px solid var(--line-2); }
.dt-row span{ color:var(--slate); } .dt-row b{ font-weight:600; }
.dt-foot{ font-size:11.5px; color:var(--muted); font-style:italic; margin-top:14px; }

/* table */
.tbl-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm); }
table.dtable{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:760px; }
table.dtable thead th{ text-align:left; background:var(--surface-2); padding:13px 14px; font-weight:600; color:var(--ink-2);
  border-bottom:1.5px solid var(--line); white-space:nowrap; font-size:12.5px; position:sticky; top:0; }
table.dtable th[data-sort]{ cursor:pointer; user-select:none; }
table.dtable th[data-sort]::after{ content:"↕"; color:var(--muted); margin-left:5px; font-size:11px; }
table.dtable th.sorted[data-dir="asc"]::after{ content:"↑"; color:var(--accent); }
table.dtable th.sorted[data-dir="desc"]::after{ content:"↓"; color:var(--accent); }
table.dtable tbody td{ padding:12px 14px; border-bottom:1px solid var(--line-2); white-space:nowrap; }
table.dtable tbody tr{ cursor:pointer; transition:background .12s; }
table.dtable tbody tr:hover{ background:var(--surface-2); }
table.dtable tbody tr.sel{ background:var(--accent-soft); }
table.dtable tbody tr.sel td{ border-color:var(--accent-line); }
.t-name{ font-weight:600; } .t-mut{ color:var(--slate); }
.t-yes{ color:var(--accent-deep); font-weight:600; } .t-no{ color:var(--muted); }
.gbadge.sm{ width:22px; height:22px; font-size:12px; }
.t-empty{ text-align:center; color:var(--slate); padding:34px; font-style:italic; }
.t-more{ text-align:center; color:var(--slate); padding:16px 12px; font-size:12.5px; background:var(--surface-2); }