/* Powershell M0 preview: play.powershell.energy. Tokens from Power Prospector (reference/template.html). */
:root{
  --bg:#E9EDF0; --panel:#F7F9FA; --panel2:#EFF3F5; --ink:#16202B; --ink2:#465464; --muted:#5D6976; --line:#D0D7DD;
  --land:#B8C2CB; --solar:#C27C00; --batt:#7B5CD6; --h2:#1590B0; --bad:#D1453B; --good:#1B7F52; --warn:#A86B00;
  /* Text versions of the hue tokens. The fills above (heat map, swatches, bars, borders) stay as they are;
     text uses these, which clear WCAG AA on --bg, --panel and --panel2 (4.75:1 or more; --solar-ink is
     for large text only, 3.4:1). Ratios are listed in NOTES-play.md. */
  --h2-ink:#00708F; --good-ink:#0A774A; --bad-ink:#BF342C; --warn-ink:#955900; --solar-ink:#B46F00;
  --focus:#00708F; --sel:#16202B;
  --seq1:#F3DFB0; --seq2:#E7B455; --seq3:#C27C00; --seq4:#8A5300;
  --shadow:0 4px 14px rgb(0 0 0 / .12);
  --display:"Big Shoulders Display", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E1318; --panel:#151C23; --panel2:#1B242D; --ink:#E3E8ED; --ink2:#A9B4BF; --muted:#838F9B; --line:#29333D;
    --land:#2C3843; --solar:#C98710; --batt:#8E74E8; --h2:#2AA3C4; --bad:#E0584D; --good:#3DB37A; --warn:#D39A2E;
    --h2-ink:#2AA3C4; --good-ink:#3DB37A; --bad-ink:#EB6256; --warn-ink:#D39A2E; --solar-ink:#C98710;
    --focus:#2AA3C4; --sel:#E3E8ED;
    --seq1:#5A4318; --seq2:#8F6516; --seq3:#C98710; --seq4:#F0B94A;
    --shadow:0 6px 18px rgb(0 0 0 / .45);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E1318; --panel:#151C23; --panel2:#1B242D; --ink:#E3E8ED; --ink2:#A9B4BF; --muted:#838F9B; --line:#29333D;
  --land:#2C3843; --solar:#C98710; --batt:#8E74E8; --h2:#2AA3C4; --bad:#E0584D; --good:#3DB37A; --warn:#D39A2E;
  --h2-ink:#2AA3C4; --good-ink:#3DB37A; --bad-ink:#EB6256; --warn-ink:#D39A2E; --solar-ink:#C98710;
  --focus:#2AA3C4; --sel:#E3E8ED;
  --seq1:#5A4318; --seq2:#8F6516; --seq3:#C98710; --seq4:#F0B94A;
  --shadow:0 6px 18px rgb(0 0 0 / .45);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.45;padding-inline:16px;padding-block:0 40px;overflow-wrap:break-word}
.wrap{max-width:1320px;margin:0 auto}
a{color:var(--h2-ink)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-48px;background:var(--ink);color:var(--bg);padding:8px 12px;border-radius:4px;z-index:20;text-decoration:none}
.skip:focus{top:8px}
[hidden]{display:none!important}

/* masthead */
header.mast{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 32px;padding-block:22px 14px;border-bottom:2px solid var(--ink)}
.brand{min-width:0;flex:1 1 420px}
.eyebrow{margin:0 0 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.brand h1{font-family:var(--display);font-weight:800;font-size:clamp(40px,6vw,64px);line-height:.88;letter-spacing:.01em;margin:0;text-transform:uppercase}
.brand h1 span{color:var(--solar-ink)}
.dek{margin:8px 0 0;color:var(--ink2);max-width:64ch;text-wrap:pretty}
.mast-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:0;flex:1 1 380px}
.boot{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 18px}
.tick{display:flex;flex-direction:column;min-width:72px}
.tick b{font-family:var(--mono);font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.tick small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tick.pending b{color:var(--muted)}
.tick.err b{color:var(--bad-ink)}
.alert{margin:14px 0 0;padding:10px 12px;border:1px solid var(--bad);border-left-width:4px;border-radius:4px;background:var(--panel);color:var(--ink)}

/* layout */
main{display:flex;flex-direction:column;gap:20px;margin-top:18px}
.grid{display:grid;gap:20px;align-items:start}
.grid.top{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.grid.bottom{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
@media (max-width:980px){.grid.top,.grid.bottom{grid-template-columns:minmax(0,1fr)}}
.col{display:flex;flex-direction:column;gap:20px;min-width:0}
section.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px;min-width:0}
h2{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:.03em;text-transform:uppercase;margin:0 0 10px;line-height:1}
h3{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;font-weight:600}
h3.mt,.mt{margin-top:18px}
.sub{color:var(--ink2);margin:-4px 0 12px;font-size:13px;max-width:78ch}
.small{font-size:12px;color:var(--ink2);margin:6px 0 0;min-height:1.45em}
.note{font-size:12.5px;color:var(--ink2);margin:10px 0 0}
.note b{font-family:var(--mono);font-weight:500;color:var(--ink)}

/* hero */
.chtitle{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.6vw,48px);line-height:.92;letter-spacing:.01em;margin:0 0 8px}
.chtitle .mw{color:var(--solar-ink)}
.result{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 26px;align-items:end;margin-top:6px}
@media (max-width:560px){.result{grid-template-columns:minmax(0,1fr)}}
/* line-height .85 keeps the number tight, but Big Shoulders' "$" reaches .93em above the baseline and
   .10em below it, past that line box: the padding gives the glyph its room (~7px from the caption). */
.big{font-family:var(--display);font-weight:800;font-size:clamp(60px,8vw,88px);line-height:.85;white-space:nowrap;padding:.16em 0 .07em}
.big small{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink2);margin-left:6px;letter-spacing:0}
.bigcap{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.bignote{font-size:12px;color:var(--ink2);margin-top:6px;max-width:34ch}
.winbox{border:1px solid var(--line);border-radius:4px;padding:10px 12px;background:var(--panel2);min-width:0}
.wins{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px}
.wins li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:6px;align-items:baseline}
.wins .ic{font-weight:700;text-align:center}
.wins .ok .ic{color:var(--good-ink)}
.wins .no .ic{color:var(--bad-ink)}
.wins .v{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.verdict{margin:8px 0 0;font-size:12.5px;font-weight:600}
.verdict.ok{color:var(--good-ink)}
.verdict.no{color:var(--bad-ink)}
.verdict.warn{color:var(--warn-ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.chip{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;background:var(--panel)}
.chip .ic{font-weight:700}
.chip.good{border-color:color-mix(in oklab,var(--good) 50%,var(--line));color:var(--good-ink)}
.chip.bad{border-color:color-mix(in oklab,var(--bad) 50%,var(--line));color:var(--bad-ink)}
.chip.warn{border-color:color-mix(in oklab,var(--warn) 50%,var(--line));color:var(--warn-ink)}
.chip .t{color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:14px}
@media (max-width:620px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--panel);padding:8px 10px;min-width:0}
.stat b{display:block;font-family:var(--mono);font-weight:500;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat small{font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.bars{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:5px 10px;align-items:center;font-size:12.5px;margin-top:6px}
.bars .track{height:12px;background:var(--panel2);border-radius:0 3px 3px 0;min-width:0}
.bars .fill{height:100%;border-radius:0 3px 3px 0;background:var(--ink2);transition:width .25s ease}
.bars .fill.me{background:var(--solar)}
.bars .v{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.constraint{margin-top:14px;padding:10px 12px;border-left:3px solid var(--h2);background:var(--panel2);font-size:13px;border-radius:0 4px 4px 0}
.constraint b{font-weight:600}
.linkbtn{border:0;background:none;padding:0;color:var(--h2-ink);text-decoration:underline;cursor:pointer;font-size:inherit}

/* controls */
.presets{display:flex;flex-wrap:wrap;gap:6px}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:6px 11px;cursor:pointer;font-size:12.5px;line-height:1.3}
.btn:hover{border-color:var(--ink2)}
.btn[aria-pressed="true"]{border-color:var(--sel);box-shadow:inset 0 0 0 1px var(--sel);font-weight:600}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600}
.btn.primary:hover{opacity:.9}
.btn[disabled]{opacity:.5;cursor:default}
/* The assay while it runs: aria-disabled keeps it focusable. Muted by colour, not opacity, so the focus
   ring keeps full contrast; the primary fill drops to --ink2 (--bg text on it: 6.6:1 light, 8.8:1 dark). */
.btn[aria-disabled="true"]{color:var(--muted);cursor:progress}
.btn[aria-disabled="true"]:hover{border-color:var(--line)}
.btn.primary[aria-disabled="true"]{background:var(--ink2);border-color:var(--ink2);color:var(--bg)}
.btn.primary[aria-disabled="true"]:hover{opacity:1;border-color:var(--ink2)}
.theme{font-size:12px;padding:4px 10px}
.sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;margin-top:4px}
@media (max-width:620px){.sliders{grid-template-columns:minmax(0,1fr)}}
/* align-content:start: a taller neighbour in the same .sliders row (the iron-air lock note) must not
   spread its extra height across this control's rows, or its slider sits lower than the neighbour's. */
.ctl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;align-items:baseline;align-content:start;min-width:0}
.ctl label{font-size:12.5px;color:var(--ink);font-weight:500;display:flex;align-items:center;gap:6px;min-width:0}
.ctl label i{display:inline-block;width:10px;height:10px;border-radius:2px;flex:none}
.ctl output{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ctl input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--ink2);margin:4px 0 0;min-height:24px}
.ctl .phys{grid-column:1/-1;font-size:11.5px;color:var(--muted);font-family:var(--mono);font-variant-numeric:tabular-nums}
.ctl .lock{grid-column:1/-1;font-size:11.5px;color:var(--warn-ink)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px}
.status{font-size:12px;color:var(--ink2);margin:8px 0 0;min-height:1.45em}
.timing{font-size:11.5px;color:var(--ink2);margin:2px 0 0;font-family:var(--mono);font-variant-numeric:tabular-nums;min-height:1.45em}
.assay{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--panel2);font-size:13px}
.assay .row{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline}
.assay .kv{display:flex;flex-direction:column}
.assay .kv b{font-family:var(--mono);font-weight:500;font-size:16px}
.assay .kv small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.assay p{margin:8px 0 0}
.assay .btn{margin-top:8px}
.par{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:13px}
.par .parhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.par .parhead b{font-family:var(--display);font-weight:800;font-size:30px;line-height:1}
.par .parhead .num{color:var(--ink2)}
.par p{margin:6px 0 0}
.par .small{min-height:0}
.par .btn{margin-top:8px}

/* year heatmap */
.yearhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 14px;margin-bottom:12px}
.yearhead h2{margin:0}
.badge{font-size:11.5px;font-family:var(--mono);border:1px solid var(--line);border-radius:12px;padding:2px 10px;max-width:100%;color:var(--ink2);background:var(--panel2)}
.badge.gpu{border-color:color-mix(in oklab,var(--h2) 55%,var(--line));color:var(--h2-ink)}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--ink2);margin:0 0 8px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{display:inline-block;width:12px;height:12px;border-radius:2px;flex:none}
.sw.solar{background:var(--solar)}
.sw.batt{background:var(--batt)}
.sw.h2{background:var(--h2)}
.sw.dark{background:repeating-linear-gradient(45deg,var(--bad) 0 2px,color-mix(in srgb,var(--bad) 50%,var(--panel)) 2px 4px)}
.sw.none{background:var(--line)}
.sw.ink{background:var(--ink2)}
.hm{position:relative;margin:0}
.hm-body{display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 6px}
.hm-y{position:relative;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.hm-y span{position:absolute;right:0;transform:translateY(-50%);line-height:1}
.hm-plot{position:relative;min-width:0;border-radius:2px;touch-action:pan-y}
.hm-plot canvas{display:block;width:100%;cursor:crosshair;border-radius:2px}
/* Two-tone ring, 2px of --ink then 2px of --panel: against every cell color one of the two clears 3:1
   (light: 3.4:1 or more; dark: 4.6:1 or more). */
.hm-cursor{position:absolute;pointer-events:none;outline:2px solid var(--ink);box-shadow:0 0 0 4px var(--panel);border-radius:1px}
.hm-x{position:relative;height:18px;margin-left:30px;font-size:11px;color:var(--muted)}
.hm-x span{position:absolute;top:3px;white-space:nowrap}
.hm-x span::before{content:"";position:absolute;left:0;top:-3px;height:4px;border-left:1px solid var(--line)}
.hm-h2{display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 6px;margin-top:6px}
.hm-h2-lab{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font-family:var(--mono);font-size:10px;color:var(--muted);line-height:1}
.hm-h2-plot{position:relative;height:44px;min-width:0}
.hm-h2-plot svg{display:block;width:100%;height:100%;overflow:visible}
.hm-h2-cap{margin:4px 0 0 30px;font-size:11.5px;color:var(--muted)}
.tip{position:absolute;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:7px 9px;font-size:12px;box-shadow:var(--shadow);min-width:200px;z-index:5}
.tip .when{font-weight:600;margin-bottom:4px}
.tip .row{display:flex;justify-content:space-between;gap:14px;align-items:center}
.tip .row span:first-child{display:inline-flex;align-items:center;gap:6px}
.tip .row .sw{width:9px;height:9px}
.tip .sep{border-top:1px solid var(--line);margin:4px 0}
.shares{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:12px;font-size:12.5px;color:var(--ink2)}
.shares b{font-family:var(--mono);font-weight:500;color:var(--ink)}
.shares span{display:inline-flex;align-items:center;gap:6px}
details.monthly{margin-top:12px;font-size:12.5px}
details.monthly summary{cursor:pointer;color:var(--ink)}
.tablewrap{overflow-x:auto;margin-top:8px;max-width:100%}
/* A wrapper that actually scrolls (main.js syncScrollable adds .scrolls) gets edge shadows on the side
   with more columns: the "local" covers scroll with the table and hide a shadow once its edge is reached. */
.tablewrap.scrolls{
  background:
    linear-gradient(to right,var(--panel) 30%,transparent) left/28px 100% no-repeat local,
    linear-gradient(to left,var(--panel) 30%,transparent) right/28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,color-mix(in srgb,var(--ink) 28%,transparent),transparent) left/10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,color-mix(in srgb,var(--ink) 28%,transparent),transparent) right/10px 100% no-repeat scroll;
}
table.tbl th .short{display:none}
.tblkey{display:none;font-size:11.5px;color:var(--ink2);margin:6px 0 0}
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
table.tbl th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);padding:4px 6px;white-space:nowrap}
table.tbl th.num{text-align:right}
table.tbl td{padding:6px;border-bottom:1px solid var(--line);vertical-align:top}
table.tbl td.num{text-align:right;white-space:nowrap;font-family:var(--mono);font-variant-numeric:tabular-nums}
table.tbl td.note{color:var(--ink2)}
table.tbl td .sw{width:9px;height:9px;margin-right:6px;vertical-align:0}
table.tbl tr.total td{font-weight:600;border-bottom:0}
/* Narrow screens: the month table keeps its seven columns with short headers (the full ones stay
   readable to screen readers) and tighter cells, which fits phones down to 360 px (narrower ones scroll it); #months-key explains them. */
@media (max-width:620px){
  #months{font-size:12px}
  #months th,#months td{padding-inline:3px}
  #months th{letter-spacing:.02em}
  #months th .full{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  #months th .short{display:inline}
  .tblkey{display:block}
}
/* Narrow screens: each bill-of-materials row becomes a two-line card instead of a scroller. */
@media (max-width:620px){
  table.bom,table.bom tbody,table.bom tr,table.bom td{display:block}
  table.bom thead{display:none}
  table.bom tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:8px 0;border-bottom:1px solid var(--line)}
  table.bom td{border:0;padding:0}
  table.bom td.note{grid-column:1/-1}
  table.bom td[data-label]{grid-column:1/-1;text-align:left}
  table.bom td[data-label]::before{content:attr(data-label) " ";color:var(--muted);font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
  table.bom td.empty{display:none}
  table.bom tr.total{border-bottom:0}
}

/* build */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:4px 0 6px}
@media (max-width:620px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi b{display:block;font-family:var(--display);font-weight:800;font-size:30px;line-height:1;white-space:nowrap}
.kpi small{font-size:11.5px;color:var(--ink2)}

/* ladder */
.ladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rung{display:grid;grid-template-columns:62px minmax(0,1fr);gap:0 10px;padding:10px 0;border-top:1px solid var(--line)}
.rung:first-child{border-top:0;padding-top:2px}
.rung .no{font-family:var(--display);font-weight:800;font-size:26px;line-height:1;color:var(--muted);text-align:center;padding-top:2px}
.rung .no.end{font-size:12px;letter-spacing:.03em;text-transform:uppercase;padding-top:6px}
.rung .t{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.rung .t strong{font-size:14.5px}
.rung .t .mw{font-family:var(--mono);font-size:12.5px;color:var(--ink2)}
.rung .state{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.rung .cons{font-size:12.5px;color:var(--ink2);margin-top:2px}
.rung .copy{font-size:12.5px;color:var(--ink2);margin-top:4px}
.rung .nofact{font-size:11px;color:var(--ink2)}
.stbtn{border:0;background:none;padding:0 2px;margin:0;font:inherit;color:inherit;cursor:pointer;border-radius:3px;vertical-align:baseline}
.stbtn:hover .st{text-decoration:underline}
.rung.active{background:var(--panel2);border-radius:4px;border-top-color:transparent;padding-inline:0 10px;margin-bottom:2px}
.rung.active + .rung{border-top-color:transparent}
.rung.active .no{color:var(--solar-ink)}
.rung.active .state{color:var(--good-ink)}
.rung.locked .t strong{color:var(--ink2)}

/* facts */
.statuskey{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--ink2);margin-bottom:10px}
.statuskey .all b{font-family:var(--mono);font-weight:500;color:var(--ink)}
.st{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.st .g{font-family:var(--mono);font-weight:500;letter-spacing:0}
.st.documented{color:var(--good-ink)}
.st.computed{color:var(--h2-ink)}
.st.unverified{color:var(--warn-ink)}
.st.conflicting{color:var(--bad-ink)}
.facts{display:flex;flex-wrap:wrap;gap:6px}
.fact{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:4px 10px 4px 11px;background:var(--panel);cursor:pointer;font-size:12.5px;text-align:left}
.fact:hover{border-color:var(--ink2)}
.fact[aria-pressed="true"]{border-color:var(--sel);box-shadow:inset 0 0 0 1px var(--sel)}
.factgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px 22px;align-items:start}
@media (max-width:980px){.factgrid{grid-template-columns:minmax(0,1fr)}}
.factcard{padding:10px 12px;border-left:3px solid var(--line);background:var(--panel2);border-radius:0 4px 4px 0;font-size:13px;min-height:4em}
.factcard.documented{border-left-color:var(--good)}
.factcard.computed{border-left-color:var(--h2)}
.factcard.unverified{border-left-color:var(--warn)}
.factcard.conflicting{border-left-color:var(--bad)}
.factcard h4{margin:0 0 4px;font-size:13.5px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.factcard p{margin:4px 0 0}
.factcard .src{color:var(--ink2);font-size:12px}
.factcard .chk{color:var(--ink2);font-size:12px;font-family:var(--mono)}

/* footer */
.foot{margin-top:24px;color:var(--muted);font-size:12px;border-top:1px solid var(--line);padding-top:10px}
.foot p{margin:4px 0}
.foot-main{color:var(--ink2);font-size:13px}
.foot a{color:var(--ink2)}

@media (max-width:520px){
  header.mast{padding-top:16px}
  .mast-side{align-items:flex-start}
  .boot{justify-content:flex-start}
  .hm-body,.hm-h2{grid-template-columns:20px minmax(0,1fr);gap:0 4px}
  .hm-x,.hm-h2-cap{margin-left:24px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media (forced-colors: active){.sw,.bars .fill{forced-color-adjust:none}}
@media (max-width:520px){.hm-x .odd{display:none}}