/* Shared styling for the rebuilt WDR tools — matches the main site's system
   (see site/BRAND.md) without depending on the Astro bundle, since these are
   served as static assets. */
@font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk-latin-wght.woff2') format('woff2-variations');
 font-weight:300 700;font-style:normal;font-display:swap}
:root{--blue:#1565c0;--blue-deep:#0f4e97;--blue-tint:#e8f1fb;--orange:#fb8c00;--orange-deep:#ef6c00;
 --indigo:#1a237e;--ink-950:#0b1026;--ink:#16203a;--ink-soft:#4a566e;--ink-faint:#7e8aa0;
 --line:#e3e8f0;--paper-soft:#f5f7fb;--paper:#fff;--radius:12px;--radius-sm:8px;
 --shadow:0 1px 2px rgb(11 16 38/5%),0 6px 20px rgb(11 16 38/7%);
 --font-display:'Space Grotesk',system-ui,sans-serif;
 --font-body:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
*{box-sizing:border-box}
html{font-family:var(--font-body);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.65}
body{margin:0}
h1,h2,h3{font-family:var(--font-display);line-height:1.15;margin:0 0 .55em;font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(1.9rem,4vw,2.6rem)}h2{font-size:1.35rem}h3{font-size:1.05rem}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
.wrap{max-width:940px;margin-inline:auto;padding-inline:clamp(18px,4vw,28px)}
.tool-hero{background:repeating-linear-gradient(-55deg,rgb(255 255 255/2.5%) 0 1px,transparent 1px 56px),
 linear-gradient(150deg,var(--ink-950) 30%,#101c45 75%,#14245c 100%);color:#fff;padding:48px 0 42px}
.tool-hero p{color:#c6d2e4;max-width:64ch;margin:0}
.eyebrow{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em;font-weight:600;
 font-size:.76rem;color:var(--orange);margin:0 0 12px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
 padding:26px 28px;box-shadow:var(--shadow);margin:-26px 0 0}
.section{padding:34px 0}
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-family:var(--font-display);font-weight:600;font-size:.9rem}
.field .hint{color:var(--ink-faint);font-size:.84rem}
input[type=text],input[type=number],select{font:inherit;color:var(--ink);background:var(--paper);
 border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;width:100%;max-width:340px}
input[type=range]{width:100%;max-width:340px;accent-color:var(--blue)}
input[type=color]{width:52px;height:34px;padding:2px;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.row{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:.6em 1.3em;border-radius:var(--radius-sm);
 font-family:var(--font-display);font-weight:600;font-size:.95rem;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-deep);text-decoration:none}
.btn-outline{border-color:var(--line);color:var(--ink);background:var(--paper)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}
pre.code{background:var(--ink-950);color:#dbe6f5;border-radius:var(--radius-sm);padding:16px 18px;
 overflow-x:auto;font-size:.88rem;line-height:1.6;margin:0}
pre.code .tok{color:#8fc0ef}
.verdict{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,4vw,2.2rem);line-height:1.1}
.stat{display:grid;gap:2px}
.stat .k{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-faint);
 font-family:var(--font-display);font-weight:600}
.stat .v{font-family:var(--font-display);font-weight:700;font-size:1.3rem}
.nth-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px;margin-top:6px}
.nth-cell{aspect-ratio:1;display:grid;place-items:center;border-radius:var(--radius-sm);
 border:1px solid var(--line);background:var(--paper-soft);color:var(--ink-faint);
 font-family:var(--font-display);font-weight:600;font-size:.9rem}
.nth-cell.on{background:var(--blue);border-color:var(--blue);color:#fff}
.swatch{border-radius:var(--radius);border:1px solid var(--line);min-height:190px;display:grid;place-items:center;
 background:var(--paper-soft);color:var(--ink-faint);font-family:var(--font-display);font-weight:600}
.tool-footer{background:var(--ink-950);color:#b9c8dc;margin-top:56px;padding:34px 0 26px;font-size:.92rem;
 border-bottom:3px solid;border-image:linear-gradient(90deg,var(--orange) 0 28%,var(--blue) 28% 72%,var(--indigo) 72% 100%) 1}
.tool-footer a{color:#d7e6f5}.tool-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tool-footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;margin-bottom:22px}
.tool-footer .fine{border-top:1px solid rgb(255 255 255/14%);padding-top:16px;color:#8ba3ba;font-size:.85rem}

/* room before the site footer */
main.wrap,body>main{padding-bottom:76px;display:block}
.section:last-of-type{padding-bottom:8px}