:root{
  --ink:#0B2126;--ink-2:#33474C;--ink-3:#63777C;
  --ground:#EBEFEC;--surface:#FFFFFF;--raised:#F5F7F5;
  --line:#C9D4D0;--line-2:#DEE4E1;
  --lagoon:#0F6B76;--lagoon-soft:#0F6B7614;
  --celadon:#3F7A5E;--celadon-soft:#3F7A5E18;
  --coral:#A6402C;--coral-soft:#A6402C16;
  --gold:#8A6A1F;--gold-soft:#8A6A1F16;
  --f-d:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-b:"Newsreader",Georgia,"Times New Roman",serif;
  --f-m:"IBM Plex Mono","SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#DFE7E6;--ink-2:#A9BABA;--ink-3:#7C8F8F;
  --ground:#07161A;--surface:#0D2027;--raised:#11262D;
  --line:#20383E;--line-2:#182E34;
  --lagoon:#55B4C0;--lagoon-soft:#55B4C01A;
  --celadon:#6FBF95;--celadon-soft:#6FBF951A;
  --coral:#E27A62;--coral-soft:#E27A621C;
  --gold:#D6AC53;--gold-soft:#D6AC531C;
}}
:root[data-theme="dark"]{
  --ink:#DFE7E6;--ink-2:#A9BABA;--ink-3:#7C8F8F;
  --ground:#07161A;--surface:#0D2027;--raised:#11262D;
  --line:#20383E;--line-2:#182E34;
  --lagoon:#55B4C0;--lagoon-soft:#55B4C01A;
  --celadon:#6FBF95;--celadon-soft:#6FBF951A;
  --coral:#E27A62;--coral-soft:#E27A621C;
  --gold:#D6AC53;--gold-soft:#D6AC531C;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-b);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
header.site{position:sticky;top:0;z-index:40;background:var(--ground);
  border-bottom:1px solid var(--line-2);backdrop-filter:saturate(180%) blur(8px)}
.nav{max-width:1180px;margin:0 auto;padding:12px 24px;display:flex;gap:6px;
  align-items:center;flex-wrap:wrap}
.nav .brand{font-family:var(--f-d);font-weight:700;letter-spacing:-.02em;font-size:15px;
  color:var(--ink);text-decoration:none;margin-right:14px;white-space:nowrap}
.nav .brand b{color:var(--lagoon)}
.nav a{font-family:var(--f-d);font-size:12.5px;color:var(--ink-2);text-decoration:none;
  padding:6px 10px;border-radius:3px;white-space:nowrap}
.nav a:hover{background:var(--raised);color:var(--lagoon)}
.nav a.on{color:var(--lagoon);background:var(--lagoon-soft);font-weight:600}
.wrap{max-width:1180px;margin:0 auto;padding:34px 24px 90px}
.narrow{max-width:820px}
h1{font-family:var(--f-d);font-weight:700;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(28px,4.4vw,42px);margin:0 0 14px;text-wrap:balance}
h2{font-family:var(--f-d);font-weight:600;letter-spacing:-.018em;line-height:1.16;
  font-size:clamp(20px,2.7vw,27px);margin:34px 0 12px;text-wrap:balance}
h3{font-family:var(--f-d);font-weight:600;font-size:16.5px;margin:24px 0 8px}
p{margin:0 0 13px;max-width:72ch}
.lede{font-size:18.5px;color:var(--ink-2);max-width:70ch}
.stamp{font-family:var(--f-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lagoon);margin-bottom:14px}
a{color:var(--lagoon)}
ul{margin:0 0 14px;padding-left:0;list-style:none;max-width:70ch}
li{position:relative;padding-left:20px;margin-bottom:8px}
li:before{content:"";position:absolute;left:1px;top:12px;width:7px;height:1px;background:var(--lagoon)}
.scroll{overflow-x:auto;margin:16px 0}
table{border-collapse:collapse;width:100%;min-width:460px;font-family:var(--f-m);
  font-size:12px;font-variant-numeric:tabular-nums}
th{text-align:left;font-weight:600;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:0 10px 7px 0;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:7px 10px 7px 0;border-bottom:1px solid var(--line-2);vertical-align:top}
td.n,th.n{text-align:right;padding-right:0}
td.n{white-space:nowrap;padding-left:16px}
tr.tot td{border-top:1px solid var(--line);border-bottom:0;font-weight:600;color:var(--ink)}
.tag{font-family:var(--f-m);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 6px;border-radius:2px;font-weight:500;white-space:nowrap;display:inline-block}
.t-ok{background:var(--celadon-soft);color:var(--celadon)}
.t-bad{background:var(--coral-soft);color:var(--coral)}
.t-warn{background:var(--gold-soft);color:var(--gold)}
.t-info{background:var(--lagoon-soft);color:var(--lagoon)}
.card{background:var(--surface);border:1px solid var(--line-2);border-radius:3px;
  padding:18px 20px;margin-bottom:18px}
.note{border-left:2px solid var(--lagoon);background:var(--lagoon-soft);padding:14px 18px;
  margin:16px 0;border-radius:0 2px 2px 0}
.note.bad{border-left-color:var(--coral);background:var(--coral-soft)}
.note.ok{border-left-color:var(--celadon);background:var(--celadon-soft)}
.note.warn{border-left-color:var(--gold);background:var(--gold-soft)}
.note p{margin:0;max-width:72ch}.note p+p{margin-top:9px}
.note .h{font-family:var(--f-m);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:6px}
.src{font-family:var(--f-m);font-size:10.5px;color:var(--ink-3);line-height:1.6;max-width:82ch}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line-2);border:1px solid var(--line-2);margin:22px 0}
.kpis div{background:var(--surface);padding:15px 14px}
.kpis b{display:block;font-family:var(--f-d);font-weight:700;font-size:22px;
  letter-spacing:-.025em;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--lagoon)}
.kpis b.ok{color:var(--celadon)}.kpis b.bad{color:var(--coral)}.kpis b.warn{color:var(--gold)}
.kpis span{display:block;font-family:var(--f-m);font-size:9px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-top:7px;line-height:1.45}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.tile{background:var(--surface);border:1px solid var(--line-2);border-radius:3px;
  padding:18px 18px;text-decoration:none;color:var(--ink);display:block}
.tile:hover{border-color:var(--lagoon)}
.tile b{font-family:var(--f-d);font-size:15px;display:block;margin-bottom:5px}
.tile span{font-size:13.5px;color:var(--ink-2);display:block}
.tile .m{font-family:var(--f-m);font-size:10px;color:var(--ink-3);margin-top:9px;
  letter-spacing:.07em;text-transform:uppercase;display:block}
.filters{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0;align-items:center}
.filters button{font-family:var(--f-d);font-size:12px;padding:6px 11px;border-radius:3px;
  border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer}
.filters button.on{background:var(--lagoon);color:#fff;border-color:var(--lagoon)}
.filters input{font-family:var(--f-m);font-size:12px;padding:6px 9px;border:1px solid var(--line);
  border-radius:3px;background:var(--surface);color:var(--ink);min-width:190px}
.pspec{display:grid;grid-template-columns:170px 1fr;gap:0;font-size:14px}
.pspec dt{font-family:var(--f-m);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);padding:9px 0;border-bottom:1px solid var(--line-2)}
.pspec dd{margin:0;padding:9px 0;border-bottom:1px solid var(--line-2);color:var(--ink)}
@media(max-width:620px){.pspec{grid-template-columns:1fr}.pspec dt{padding-bottom:0;border:0}}
footer.site{border-top:1px solid var(--line-2);margin-top:50px;padding:26px 0}
:focus-visible{outline:2px solid var(--lagoon);outline-offset:2px}
/* ── simulator ─────────────────────────────────────────────────────── */
.simbar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:20px 0 6px;
  padding:14px 16px;background:var(--surface);border:1px solid var(--line-2);border-radius:3px}
.simbar .lab{font-family:var(--f-m);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-right:4px}
.simbar button{font-family:var(--f-d);font-size:12px;padding:7px 12px;background:transparent;
  color:var(--ink-2);border:1px solid var(--line);border-radius:3px;cursor:pointer}
.simbar button:hover{border-color:var(--lagoon);color:var(--lagoon)}
.simbar button.on{background:var(--lagoon);color:#fff;border-color:var(--lagoon)}
.simbar .brk{flex-basis:100%;height:0}
.simbar .snote{margin:8px 0 0}
.simgrid{display:grid;grid-template-columns:352px 1fr;gap:26px;align-items:start;margin-top:26px}
/* grid items default to min-width:auto, so a wide table would prise the whole
   column open and scroll the page body sideways. */
.simgrid>*{min-width:0}
@media(max-width:960px){.simgrid{grid-template-columns:1fr}.panel{position:static!important;max-height:none!important}}
.panel{position:sticky;top:64px;max-height:calc(100vh - 84px);overflow-y:auto;
  background:var(--surface);border:1px solid var(--line-2);border-radius:3px}
.pgrp{border-bottom:1px solid var(--line-2);padding:0}
.pgrp:last-child{border-bottom:0}
.pgrp>summary{font-family:var(--f-d);font-weight:600;font-size:13.5px;padding:12px 15px;
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.pgrp>summary::-webkit-details-marker{display:none}
.pgrp>summary:after{content:"+";font-family:var(--f-m);color:var(--ink-3);font-size:14px}
details.pgrp[open]>summary:after{content:"−"}
.pgrp>summary:hover{color:var(--lagoon)}
.pgrp .phd{font-family:var(--f-d);font-weight:600;font-size:13.5px;padding:13px 15px 6px}
.pgrp .gsub{margin:0;padding:0 15px 10px}
.pgrp select{width:calc(100% - 30px);margin:0 15px;font-family:var(--f-m);font-size:11.5px;
  padding:7px 8px;border:1px solid var(--line);border-radius:3px;background:var(--ground);color:var(--ink)}
.pgrp .src{padding:0 15px 13px;margin:8px 0 0}
.fields{padding:0 15px 14px}
.f{margin-bottom:13px}
.f label{display:block;font-size:12.5px;line-height:1.4;color:var(--ink);margin-bottom:5px}
.f label .fl{font-family:var(--f-d);font-weight:500}
.f label .tag{transform:translateY(-1px)}
.f label i{display:block;font-style:normal;font-family:var(--f-b);font-size:12px;
  color:var(--ink-3);line-height:1.5;margin-top:3px}
.f input{width:100%;font-family:var(--f-m);font-size:13px;font-variant-numeric:tabular-nums;
  padding:7px 9px;border:1px solid var(--line);border-radius:3px;background:var(--ground);color:var(--ink)}
.f input:focus{border-color:var(--lagoon);background:var(--surface)}
.resetb{margin:13px 15px;font-family:var(--f-d);font-size:12px;padding:7px 12px;cursor:pointer;
  background:transparent;color:var(--ink-2);border:1px solid var(--line);border-radius:3px}
.resetb:hover{border-color:var(--lagoon);color:var(--lagoon)}
.kpis.sm b{font-size:16px}
#out table{min-width:660px}
@media print{
  header.site,.filters,.no-print{display:none!important}
  body{background:#fff;color:#000;font-size:10.5pt}
  .wrap{max-width:none;padding:0}
  .card,.note{break-inside:avoid;border:1px solid #ccc}
  table{font-size:8.5pt}
  @page{size:A4;margin:14mm 12mm}
}