/* ---------------------------------------------------------------- tokens ---
   Neutrals carry a slight warm-green bias rather than the usual blue-grey, so
   the page reads as paper rather than as a dashboard. The accent is a deep
   ink-teal: dark enough to pass contrast on the light ground as body-adjacent
   text, distinct from the semantic colours below.

   Coverage severity is a SEPARATE scale from the accent, because a payout
   ratio's status is information, not decoration. Four bands, chosen from what
   the ratio means rather than from a gradient: comfortable, adequate, tight,
   uncovered.                                                                */
:root{
  --ground:#FBFAF7; --surface:#FFFFFF; --surface-2:#F2F1EC; --surface-3:#E7E6DF;
  --line:#DEDCD3; --line-soft:#EAE8E1;
  --ink:#161A17; --ink-2:#4A5150; --ink-3:#6E7573;
  --accent:#15605C; --on-accent:#FFFFFF;
  --accent-soft:rgba(21,96,92,.08); --accent-line:rgba(21,96,92,.28);
  --ok:#2F6B45;      --ok-bg:rgba(47,107,69,.10);
  --mid:#7A5B12;     --mid-bg:rgba(122,91,18,.10);
  --tight:#9A4A16;   --tight-bg:rgba(154,74,22,.10);
  --over:#9B2F2A;    --over-bg:rgba(155,47,42,.10);
  --shadow:0 1px 2px rgba(22,26,23,.04), 0 14px 30px -26px rgba(22,26,23,.30);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#101312; --surface:#171B1A; --surface-2:#1E2322; --surface-3:#272D2C;
    --line:#2C3332; --line-soft:#232A29;
    --ink:#E9EDEA; --ink-2:#A3ACA8; --ink-3:#8B9591;
    --accent:#6FC3B8; --on-accent:#101312;
    --accent-soft:rgba(111,195,184,.12); --accent-line:rgba(111,195,184,.32);
    --ok:#74C68D;     --ok-bg:rgba(116,198,141,.13);
    --mid:#D2B061;    --mid-bg:rgba(210,176,97,.13);
    --tight:#E0925C;  --tight-bg:rgba(224,146,92,.13);
    --over:#E58079;   --over-bg:rgba(229,128,121,.13);
    --shadow:0 1px 0 rgba(255,255,255,.03), 0 16px 34px -28px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --ground:#101312; --surface:#171B1A; --surface-2:#1E2322; --surface-3:#272D2C;
  --line:#2C3332; --line-soft:#232A29;
  --ink:#E9EDEA; --ink-2:#A3ACA8; --ink-3:#8B9591;
  --accent:#6FC3B8; --on-accent:#101312;
  --accent-soft:rgba(111,195,184,.12); --accent-line:rgba(111,195,184,.32);
  --ok:#74C68D;     --ok-bg:rgba(116,198,141,.13);
  --mid:#D2B061;    --mid-bg:rgba(210,176,97,.13);
  --tight:#E0925C;  --tight-bg:rgba(224,146,92,.13);
  --over:#E58079;   --over-bg:rgba(229,128,121,.13);
  --shadow:0 1px 0 rgba(255,255,255,.03), 0 16px 34px -28px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 17px/1.66 "Public Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{max-width:70rem;margin:0 auto;padding:0 1.5rem 5rem}

/* ------------------------------------------------------------------ type --- */
h1,h2,h3{font-family:Newsreader,ui-serif,Georgia,"Times New Roman",serif;
  font-weight:500;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(1.85rem,4vw,2.9rem);line-height:1.12;margin:.15em 0 .45em}
h2{font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.25;margin:3rem 0 .8rem}
h3{font-size:1.12rem;margin:2rem 0 .5rem}
p{margin:0 0 1.05rem;max-width:64ch}
.lede{font-size:1.18rem;line-height:1.55;color:var(--ink-2);max-width:56ch}
a{color:var(--accent);text-underline-offset:.16em;text-decoration-thickness:.06em}
a:hover{text-decoration-thickness:.12em}
strong{font-weight:600;color:var(--ink)}
em{font-family:Newsreader,ui-serif,Georgia,serif;font-style:italic;font-size:1.03em}
code{font:500 .88em/1 "DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--surface-2);padding:.16em .42em;border-radius:4px;color:var(--ink-2)}
hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
ul{padding-left:1.15rem;max-width:64ch}
li{margin:.4rem 0}
blockquote{margin:1.4rem 0;padding:1rem 1.2rem;background:var(--accent-soft);
  border-left:3px solid var(--accent-line);border-radius:0 10px 10px 0;
  color:var(--ink-2);max-width:64ch}
blockquote strong{color:var(--ink)}
blockquote p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- header --- */
.top{max-width:70rem;margin:0 auto;padding:1.6rem 1.5rem 1.2rem;
  display:flex;gap:.9rem;align-items:baseline;flex-wrap:wrap;
  border-bottom:1px solid var(--line-soft)}
.brand{font-family:Newsreader,ui-serif,Georgia,serif;font-weight:600;font-size:1.3rem;
  color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.tag{color:var(--ink-3);font-size:.87rem}

/* ------------------------------------------------------------------ hero --- */
.hero{padding:2.4rem 0 1.4rem;border-bottom:1px solid var(--line-soft)}
.counts{font-size:.95rem;color:var(--ink-3);margin-top:1.2rem}
.counts strong{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:600}

/* ----------------------------------------------------------------- cards --- */
.cards{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr))}
.card{display:grid;gap:.2rem;padding:1.05rem 1.15rem;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;
  box-shadow:var(--shadow);transition:border-color .16s ease,transform .16s ease}
.card:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.tk{font:500 .8rem/1 "DM Mono",monospace;color:var(--accent);letter-spacing:.05em}
.co{font-size:.9rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp{font-family:Newsreader,serif;font-size:1.85rem;font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.sp small{font-family:"Public Sans",sans-serif;font-size:.68rem;font-weight:500;
  color:var(--ink-3);margin-left:.4rem;letter-spacing:.01em}

/* --------------------------------------------------------------- sectors --- */
.secs{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr))}
.sec{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;
  padding:.7rem .95rem;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;text-decoration:none;color:var(--ink);font-size:.94rem}
.sec:hover{border-color:var(--accent-line)}
.sec small{color:var(--ink-3);font-variant-numeric:tabular-nums}
.note{margin-top:1.3rem;padding:1rem 1.2rem;background:var(--over-bg);
  border-radius:10px;font-size:.94rem;max-width:none;color:var(--ink-2)}
.note strong{color:var(--over)}

/* ---------------------------------------------------------------- search --- */
#q{width:100%;max-width:32rem;padding:.65rem .9rem;font:inherit;font-size:.96rem;
  color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:9px}
#q::placeholder{color:var(--ink-3)}
#q:focus{outline:2px solid var(--accent-line);outline-offset:1px;border-color:var(--accent)}
.n{font-size:.86rem;color:var(--ink-3);margin:.6rem 0}

/* ---------------------------------------------------------------- tables --- */
.tw{overflow-x:auto;margin:1.2rem 0;border:1px solid var(--line);border-radius:12px;
  background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.94rem}
th,td{padding:.66rem .9rem;text-align:left;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
thead th{font-family:"Public Sans",sans-serif;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.075em;color:var(--ink-3);font-weight:600;background:var(--surface-2);
  position:sticky;top:0;z-index:1}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
tbody tr.applies{background:var(--accent-soft)}
tbody tr.applies:hover{background:var(--accent-soft)}
tbody tr.applies td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tbody tr.applies td{font-weight:500}
td.t a{font:500 .87rem/1 "DM Mono",monospace;text-decoration:none;letter-spacing:.04em}
td.muted{color:var(--ink-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.num.wide{color:var(--accent);font-weight:600}

/* Coverage severity — encoded in form, not only in the digits. Four bands from
   what the ratio means: comfortable, adequate, tight, not covered.            */
.pay{display:inline-block;padding:.1rem .45rem;border-radius:5px;font-weight:600;
  font-variant-numeric:tabular-nums}
.pay-ok{color:var(--ok);background:var(--ok-bg)}
.pay-mid{color:var(--mid);background:var(--mid-bg)}
.pay-tight{color:var(--tight);background:var(--tight-bg)}
.pay-over{color:var(--over);background:var(--over-bg)}
.pay-neg{color:var(--over);background:var(--over-bg);font-weight:600}

/* ------------------------------------------------------------------ page --- */
.page h1{font-size:clamp(1.5rem,3.2vw,2.2rem)}
.back{font-size:.9rem;margin-bottom:.5rem}
.back a{text-decoration:none;color:var(--ink-3)}
.back a:hover{color:var(--accent)}

/* ---------------------------------------------------------------- footer --- */
footer{max-width:70rem;margin:0 auto;padding:2.2rem 1.5rem 4rem;
  border-top:1px solid var(--line);color:var(--ink-3);font-size:.88rem}
footer p{max-width:68ch;margin:0 0 .75rem}
footer strong{color:var(--ink-2)}
.stamp{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:40rem){
  body{font-size:16px}
  main{padding:0 1.1rem 3.5rem}
  .top{padding:1.2rem 1.1rem 1rem}
  th,td{padding:.55rem .7rem}
}