:root{--bg:#f6f8fb;--surface:#fff;--text:#1b2433;--muted:#53627a;--line:#d9e0ea;--navy:#14284b;--accent:#1f4f99;--accent-2:#e8eef8;--warn:#8a5a00;color-scheme:light}
:root[data-theme=dark]{--bg:#0e1522;--surface:#162033;--text:#e5eaf2;--muted:#9aa8bd;--line:#2a3750;--navy:#0a1120;--accent:#8db4ff;--accent-2:#1d2a42;--warn:#f0c36b;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0e1522;--surface:#162033;--text:#e5eaf2;--muted:#9aa8bd;--line:#2a3750;--navy:#0a1120;--accent:#8db4ff;--accent-2:#1d2a42;--warn:#f0c36b;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--accent)}
.wrap{max-width:46rem;margin:0 auto;padding:0 1rem}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem;z-index:9}
.site-header{background:var(--navy);color:#fff}
.hdr{display:flex;align-items:center;gap:1rem;height:3.5rem}
.brand{color:#fff;text-decoration:none;font-weight:800;font-size:1.15rem;letter-spacing:.01em}.brand span{color:#9cc0ff}
.nav{display:flex;gap:1rem;margin-left:auto}.nav a{color:#dbe5f5;text-decoration:none;font-size:.95rem}
.theme-btn{background:none;border:1px solid #3c5480;color:#fff;border-radius:.5rem;width:2.5rem;height:2.5rem;display:grid;place-items:center;cursor:pointer;flex:none}
.cats{display:flex;gap:1.1rem;overflow-x:auto;height:2.5rem;align-items:center;white-space:nowrap;font-size:.88rem;scrollbar-width:none}.cats a{color:#b9c8e0;text-decoration:none}
main{padding:1.5rem 1rem 3rem}
h1{font-size:1.9rem;line-height:1.2;margin:.5rem 0 .75rem;color:var(--text)}
h2{font-size:1.35rem;margin:2rem 0 .75rem}h3{font-size:1.1rem;margin:0 0 .3rem}
.meta,.crumbs,.small{color:var(--muted);font-size:.88rem}.crumbs a{color:var(--muted)}
.lede{font-size:1.08rem;color:var(--muted)}
.hero{padding:1rem 0 .5rem}.hero h1{font-size:2.1rem}
.btn{display:inline-block;background:var(--accent);color:var(--surface);padding:.65rem 1rem;border-radius:.5rem;text-decoration:none;font-weight:600;margin:.25rem .25rem 0 0}
.btn-alt{background:var(--accent-2);color:var(--accent)}
.grid,.cards{list-style:none;padding:0;display:grid;gap:.75rem;grid-template-columns:1fr}
@media (min-width:640px){.grid{grid-template-columns:1fr 1fr}}
.tile a,.card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:.75rem;padding:1rem;text-decoration:none;color:var(--text)}
.tile p,.card p{margin:.2rem 0 0;color:var(--muted);font-size:.95rem}.tile h3,.card h3{color:var(--accent)}
.pills{display:flex;flex-wrap:wrap;gap:.5rem}.pills a{background:var(--accent-2);border-radius:999px;padding:.3rem .8rem;text-decoration:none;font-size:.9rem}
.empty{color:var(--muted);font-style:italic}
.prose img{max-width:100%;height:auto}
.disclosure{background:var(--accent-2);border-left:4px solid var(--accent);padding:.75rem 1rem;border-radius:.4rem;font-size:.9rem;margin:1rem 0}
.toc{border:1px solid var(--line);border-radius:.6rem;padding:.75rem 1rem;background:var(--surface);margin:1rem 0}.toc-title{margin:0;font-weight:700}.toc ol{margin:.4rem 0 0;padding-left:1.2rem}.toc-l3{margin-left:1rem;font-size:.95rem}
.sources{border-top:1px solid var(--line);margin-top:2rem;font-size:.92rem}
.note{color:var(--muted);font-size:.88rem;border-top:1px solid var(--line);padding-top:1rem}
/* Comparison tables: real table on wide screens, stacked cards on mobile */
.cmp-wrap{margin:1rem 0}
.cmp{width:100%;border-collapse:collapse;background:var(--surface);font-size:.95rem}
.cmp caption{text-align:left;font-weight:700;padding:.4rem 0}
.cmp th,.cmp td{border:1px solid var(--line);padding:.5rem .6rem;text-align:left;vertical-align:top}
.cmp thead th{background:var(--accent-2)}
@media (max-width:560px){
 .cmp thead{position:absolute;left:-9999px}
 .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:100%}
 .cmp tr{border:1px solid var(--line);border-radius:.6rem;margin-bottom:.6rem;overflow:hidden}
 .cmp th,.cmp td{border:0;border-bottom:1px solid var(--line)}
 .cmp tbody th{background:var(--accent-2)}
 .cmp td{display:flex;justify-content:space-between;gap:1rem}
 .cmp td::before{content:attr(data-label);font-weight:600;color:var(--muted)}
}
/* Calculators */
.calc fieldset{border:1px solid var(--line);border-radius:.75rem;padding:.75rem 1rem 1rem;margin:0 0 1rem;background:var(--surface);display:grid;gap:.75rem}
.calc legend{font-weight:700;padding:0 .3rem}
.calc label{display:grid;gap:.25rem;font-size:.92rem;font-weight:600}
.calc label.check{display:flex;align-items:center;gap:.5rem;font-weight:500}
.calc input,.calc select{font:inherit;padding:.55rem .6rem;border:1px solid var(--line);border-radius:.45rem;background:var(--bg);color:var(--text);width:100%;min-height:2.75rem}
.calc input[type=checkbox]{width:1.2rem;min-height:1.2rem}
.two{display:grid;gap:0 1rem}@media (min-width:640px){.two{grid-template-columns:1fr 1fr}}
.result{background:var(--surface);border:2px solid var(--accent);border-radius:.75rem;padding:1rem;min-height:8rem}
.big{font-size:2rem;font-weight:800;margin:0;color:var(--accent)}.big span{font-size:1rem;font-weight:500;color:var(--muted)}
.result dl{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;margin:.75rem 0 0;font-size:.95rem}.result dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.warn{color:var(--warn);font-weight:600}
/* Reserved ad slots: fixed height so nothing shifts when ads load */
.ad-slot{margin:1.5rem auto;background:var(--accent-2);border-radius:.5rem;width:100%;overflow:hidden;contain:strict}
.ad-rect{height:280px;max-width:336px}.ad-banner{height:100px}@media (min-width:768px){.ad-banner{height:90px;max-width:728px}}
.site-footer{border-top:1px solid var(--line);padding:1.5rem 0 2.5rem;font-size:.85rem;color:var(--muted)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-bottom:.75rem}
@media (max-width:420px){.nav{gap:.7rem}.nav a{font-size:.9rem}h1,.hero h1{font-size:1.65rem}}
.ok{color:#1d7a46;font-weight:600}:root[data-theme=dark] .ok{color:#6fd39a}#tsp-match{min-height:4.5rem;margin-bottom:1rem}.result [hidden],.calc [hidden]{display:none}
.brand{white-space:nowrap}.toc-l3{list-style:circle}
