/* console.css · Immutable QC alpha console (demo). Same colours and type as the site: paper and ink for the page,
   one dark instrument plate for the lab. Fonts are the site's, self-hosted under ../fonts/.
   No viewport-height units, no animation, no transitions: nothing moves at rest. */

@font-face{font-family:'Archivo C';src:url(../fonts/archivo-c-115-620.woff2) format('woff2');font-weight:620;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo C fb';src:local('Arial'),local('Liberation Sans');size-adjust:120.71%;ascent-override:72.73%;descent-override:17.40%;line-gap-override:0%}
@font-face{font-family:'Plex Sans fb';src:local('Arial'),local('Liberation Sans');size-adjust:101.20%;ascent-override:101.28%;descent-override:27.17%;line-gap-override:0%}
@font-face{font-family:'Plex Mono fb';src:local('Courier New'),local('Liberation Mono');size-adjust:99.98%;ascent-override:102.52%;descent-override:27.50%;line-gap-override:0%}
/* Android has none of the above: the same faces matched on Roboto and Droid Sans Mono (see the site's site.css) */
@font-face{font-family:'Archivo C fbr';src:local('Roboto'),local('Roboto-Regular'),local('Roboto Regular');size-adjust:119.78%;ascent-override:73.30%;descent-override:17.54%;line-gap-override:0%}
@font-face{font-family:'Plex Sans fbr';src:local('Roboto'),local('Roboto-Regular'),local('Roboto Regular');size-adjust:100.42%;ascent-override:102.07%;descent-override:27.38%;line-gap-override:0%}
@font-face{font-family:'Plex Mono fbr';src:local('Droid Sans Mono'),local('DroidSansMono'),local('Roboto Mono'),local('RobotoMono-Regular');size-adjust:99.98%;ascent-override:102.52%;descent-override:27.50%;line-gap-override:0%}

:root{
  color-scheme:light;
  --paper:#F4F6F5; --paper-2:#E9EEEC; --ink:#0B1620; --ink-2:#4A5560; --hair:#CDD6D3; --ui:#7D8A8F; --teal:#006E5A;
  --plate:#0A1520; --plate-0:#060D14; --plate-2:#0F1D2A; --p-fg:#E8EFF7; --p-fg2:#8FA1B4; --p-hair:#1E2A36; --p-ui:#62768B;
  --ok:#00D4AA; --ok-t:#52D6B6; --fail:#FF8F6B;
  --focus:var(--teal);
  --display:'Archivo C','Archivo C fb','Archivo C fbr',Arial,sans-serif;
  --sans:'IBM Plex Sans','Plex Sans fb','Plex Sans fbr',Arial,sans-serif;
  --mono:'IBM Plex Mono','Plex Mono fb','Plex Mono fbr',ui-monospace,Menlo,Consolas,monospace;
  --g:16px; --max:1240px;
}
@media (min-width:768px){:root{--g:32px}}
@media (min-width:1280px){:root{--g:48px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;font-synthesis:none}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.6 var(--sans);overflow-wrap:break-word}
h1,h2,h3,h4,h5,p,ol,ul,dl,dd,figure,pre{margin:0;padding:0}
ol,ul{list-style:none}
a{color:var(--teal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}
code,pre{font-family:var(--mono);font-size:.8125rem}
sub{font-size:max(.72em,12px);line-height:0;vertical-align:-.25em}
button,input,select{font:inherit;color:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nw{white-space:nowrap}
.i{width:1em;height:1em;flex:none;vertical-align:-.14em}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--g)}
.js .nojs,.wait{display:none}
.js:not(.ready) .wait{display:block}
/* until the lab renders, hold the space it will take, so nothing visible below it moves */
.js:not(.ready) [data-v=records]{min-height:1200px}

.skip{position:absolute;left:var(--g);top:8px;z-index:20;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--ink);color:var(--paper);font:500 .8125rem/1.2 var(--mono);text-decoration:none;transform:translateY(-300%)}
.skip:focus{transform:none}

/* ---------------------------------------------------------------- slim header, back to the site */
.top{border-bottom:1px solid var(--hair)}
.top-in{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;min-height:60px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none;font:620 1.0625rem/1 var(--display)}
.mark{width:26px;height:26px;flex:none}
.tag{display:inline-block;padding:4px 7px;border:1px dashed var(--ui);border-radius:2px;font:500 .75rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.top-nav{margin-left:auto}
.top-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem}

/* ---------------------------------------------------------------- intro: status and disclaimer, at every width */
.intro{padding-top:22px}
h1{font:620 clamp(1.875rem,1.5rem + 1.6vw,2.625rem)/1.08 var(--display);letter-spacing:-.01em}
.h1-tag{font-size:.6em;color:var(--ink-2)}
/* on narrow screens the tag always takes its own line, so the heading wraps the same with a fallback face as with Archivo */
@media (max-width:419px){.h1-tag{display:block}}
.status{margin-top:12px;padding:7px 0 8px;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);font:400 .8125rem/1.45 var(--mono);color:var(--ink)}
.lead{max-width:46rem;font-size:1.0625rem}
.disc{max-width:46rem;border-left:2px solid var(--ink);padding:2px 0 2px 14px;font-size:.9375rem;line-height:1.55;color:var(--ink)}
.intro-g{display:grid;gap:12px;margin-top:14px}
@media (min-width:1024px){.intro-g{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:44px;align-items:start}}
.disc .k,.note .k{display:block;font:500 .75rem/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}

/* ---------------------------------------------------------------- the plate */
.plate{--focus:var(--ok-t);color-scheme:dark;margin-top:26px;background:var(--plate);color:var(--p-fg);border:1px solid var(--plate-0);border-radius:6px;padding:18px 16px 22px;font-size:.9375rem;line-height:1.55}
@media (min-width:600px){.plate{padding:22px 26px 26px}}
@media (max-width:599px){.plate{margin-inline:calc(-1 * var(--g));border-radius:0;border-inline:0}}
.plate a{color:var(--ok-t)}
/* links inside sentences: a 44 px tall tap box without changing the line */
.prose p a,.nojs a{display:inline-block;padding:13px 0;margin:-13px 0;line-height:18px}
.plate-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding-bottom:12px;border-bottom:1px solid var(--p-hair)}
.plate-h h2{font:620 1.25rem/1.25 var(--display);color:var(--p-fg)}
.sim{margin-left:auto;padding:4px 7px;border:1px solid var(--p-fg2);border-radius:2px;font:500 .75rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--p-fg);white-space:nowrap}
.lab{font:500 .75rem/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--p-fg2)}
.lab .sub{letter-spacing:0;text-transform:none;font-weight:400}
.help,.say{font-size:.875rem;line-height:1.5;color:var(--p-fg2)}
.hx{display:block;font:400 .8125rem/1.55 var(--mono);color:var(--p-fg);letter-spacing:.01em;max-width:38ch}
.hx>span{display:inline-block;margin-right:.6em}
.hx>span:last-child{margin-right:0}
.hx.bad{color:var(--fail)}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:3px 16px;align-items:baseline}
.kv dt{font-size:.875rem;color:var(--p-fg2)}
.kv dd{font:400 .875rem/1.5 var(--mono);color:var(--p-fg);min-width:0}
@media (max-width:419px){.rv-det .kv,.inst .kv{grid-template-columns:minmax(0,1fr);gap:0}.rv-det .kv dd,.inst .kv dd{margin-bottom:6px}}
.ed{color:var(--fail)!important}
.was{display:block;font-size:.8125rem;color:var(--p-fg2)}

/* summary: the status line counts results from the browser's own check */
.sum{display:grid;gap:4px;padding:12px 0 14px}
.sum-st{font:500 .9375rem/1.5 var(--mono);color:var(--p-fg)}
.sum-st[data-s=ok]{color:var(--ok-t)}
.sum-st[data-s=bad]{color:var(--fail)}
.sum-key{font:400 .8125rem/1.5 var(--mono);color:var(--p-fg2)}
.out{font-size:.875rem;line-height:1.5;color:var(--p-fg)}
.out:not(:empty){margin-top:6px;padding:9px 12px;background:var(--plate-0);border:1px solid var(--p-hair);border-left:3px solid var(--p-fg2);border-radius:3px}

/* tabs: in-page links; two rows on narrow phones, one row from 420 px */
.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding-top:12px;border-top:1px solid var(--p-hair)}
@media (min-width:420px){.tabs{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:768px){.tabs{display:flex;gap:6px}}
.tabs a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid var(--p-ui);border-radius:3px;color:var(--p-fg);text-decoration:none;font:500 .875rem/1.2 var(--mono)}
.tabs a:hover{border-color:var(--p-fg2);background:var(--plate-2)}
.tabs a[aria-current]{background:var(--p-fg);border-color:var(--p-fg);color:var(--plate-0)}

.view{margin-top:20px}
.js .view:not(.on){display:none}
.view>h3{font:620 1.125rem/1.3 var(--display);color:var(--p-fg)}
.view>h3+*{margin-top:10px}
.prose{display:grid;gap:12px;max-width:46rem}
.prose p{color:var(--p-fg)}
.note{border-left:2px solid var(--p-fg2);padding:1px 0 1px 12px;font-size:.875rem}
.plate .note .k{color:var(--p-fg2)}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;background:transparent;border:1px solid var(--p-fg2);border-radius:3px;color:var(--p-fg);font:500 .8125rem/1.25 var(--mono);text-align:center;cursor:pointer}
.btn:hover:not(:disabled){background:var(--plate-2);border-color:var(--p-fg)}
.btn:disabled{border-color:var(--p-hair);color:var(--p-fg2);cursor:not-allowed}
.btn-ok:not(:disabled){border-color:var(--ok-t);color:var(--ok-t)}
.btn-x{border-style:dashed}
.btn-x:hover:not(:disabled){border-color:var(--fail)}
.fld{display:grid;gap:4px;min-width:0}
.fld label{font-size:.875rem;color:var(--p-fg2)}
.fld .u{font-family:var(--mono);font-size:.8125rem}
.fld input,.fld select{width:100%;min-height:44px;padding:0 10px;background:var(--plate-0);color:var(--p-fg);border:1px solid var(--p-ui);border-radius:3px;font:400 1rem/1.2 var(--mono)}
.fld input[aria-invalid=true]{border-color:var(--fail)}
.err{font:400 .8125rem/1.45 var(--mono);color:var(--fail)}

/* add a result */
.add{display:grid;gap:8px;padding:14px;background:var(--plate-0);border:1px solid var(--p-hair);border-radius:4px}
.add-g{display:grid;gap:10px;align-items:end}
@media (min-width:600px){.add-g{grid-template-columns:minmax(0,1fr) minmax(0,12rem) auto}}

/* records: history list and the selected record */
.rv{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin-top:22px}
@media (min-width:1100px){.rv{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:36px;align-items:start}}
.hh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-bottom:8px}
.hist{border-top:1px solid var(--p-fg2)}
.hist>li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;padding:10px 0 11px;border-bottom:1px solid var(--p-hair)}
.hist>li.on{background:var(--plate-2);box-shadow:inset 3px 0 0 var(--ok-t)}
.hist>li.on[data-s=bad]{box-shadow:inset 3px 0 0 var(--fail)}
.hn{align-self:start;min-height:44px;width:44px;background:transparent;border:1px solid var(--p-ui);border-radius:3px;color:var(--p-fg);font:500 .9375rem/1 var(--mono);cursor:pointer}
.hn:hover{border-color:var(--p-fg2)}
.hn[aria-current]{background:var(--p-fg);border-color:var(--p-fg);color:var(--plate-0)}
li[data-s=bad] .hn{border-color:var(--fail)}
li[data-s=bad] .hn[aria-current]{background:var(--fail);color:var(--plate-0)}
.hm{display:grid;gap:2px;min-width:0}
.hv{font:400 .875rem/1.45 var(--mono);color:var(--p-fg)}
.hv b{font-weight:500;font-size:.9375rem}
.hi{color:var(--p-fg2)}
.ht{font:400 .75rem/1.45 var(--mono);color:var(--p-fg2)}
.hc{display:flex;flex-wrap:wrap;gap:2px 12px;font:400 .75rem/1.6 var(--mono);color:var(--p-fg)}
.hc>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
[data-s=ok]>.i,.hc [data-s=ok] .i{color:var(--ok)}
.hc [data-s=bad],.ha[data-s=bad]{color:var(--fail)}
.hc [data-s=na]{color:var(--p-fg2)}
.hs{font:400 .8125rem/1.45 var(--mono);color:var(--p-fg2)}
li[data-s=ok] .hs{color:var(--ok-t)}
li[data-s=bad] .hs{color:var(--fail)}
.ha{display:flex;align-items:center;gap:6px;margin-top:4px;padding-top:4px;border-top:1px dashed var(--p-ui);font:400 .75rem/1.5 var(--mono);color:var(--ok-t)}

.rv-det{display:grid;gap:14px;align-content:start;min-width:0}
.back{display:inline-flex;align-items:center;min-height:44px;justify-self:start;font-size:.875rem}
@media (min-width:1100px){.back{display:none}}
.det-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font:620 1.125rem/1.3 var(--display);color:var(--p-fg)}
.det-s{font:500 .8125rem/1.4 var(--mono);color:var(--p-fg2)}
.det-s[data-s=ok]{color:var(--ok-t)}
.det-s[data-s=bad]{color:var(--fail)}
.ctx{font-size:.875rem;line-height:1.5;color:var(--p-fg2);overflow-wrap:anywhere}
.ctx .nb{white-space:nowrap}
@media (max-width:419px){.ctx .nb{white-space:normal}}
.pl-l{margin-bottom:-8px}
code.pl{display:block;padding:9px 12px;background:var(--plate-0);border:1px solid var(--p-hair);border-radius:3px;font-size:.8125rem;line-height:1.5;color:var(--p-fg);word-break:normal;overflow-wrap:anywhere}
.prose code.pl{color:var(--p-fg)}
.ck{border-top:1px solid var(--p-fg2)}
.ck>div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:4px;padding:10px 0 11px;border-bottom:1px solid var(--p-hair)}
.ck dt{font-size:.9375rem;color:var(--p-fg)}
.ck .res{grid-column:2;grid-row:1}
.ck .d{grid-column:1/-1;font-size:.875rem;line-height:1.5;color:var(--p-fg2);min-width:0}
.ck .d .k{display:block;margin-top:4px;font:400 .75rem/1.6 var(--mono);color:var(--p-fg2)}
.ck .d .hx{max-width:none}
@media (min-width:480px){.ck .d .hx{max-width:38ch}}
.res{display:inline-flex;align-items:center;gap:7px;font:500 .8125rem/1.25 var(--mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--p-fg)}
[data-s=ok]>.res{color:var(--ok-t)}
[data-s=ok]>.res .i{color:var(--ok)}
[data-s=bad]>.res{color:var(--fail)}
[data-s=na]>.res{color:var(--p-fg2)}
/* a disclosure, and it looks like one: a caret that turns, an underline on hover */
.rc-d summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;color:var(--ok-t);font-size:.9375rem;list-style:none}
.rc-d summary::-webkit-details-marker{display:none}
.rc-d summary::before{content:'▸';flex:none;width:1em;font-size:.875em;color:var(--p-fg2)}
.rc-d[open] summary::before{content:'▾'}
.rc-d summary:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
/* commands break only where they must: a payload after a bar (the <wbr> there), a hex run anywhere; never inside a word */
.rc{margin-top:6px;padding:12px 14px;background:var(--plate-0);border:1px solid var(--p-hair);border-radius:4px;font:400 .8125rem/1.55 var(--mono);color:var(--p-fg);white-space:pre-wrap;word-break:normal;overflow-wrap:anywhere}
.rc .c{color:var(--p-fg2)}
.rc .p::before{content:'$ ';color:var(--p-fg2)}
.rc .o{color:var(--ok-t)}
.rc-f{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:10px}
.fix,.simu{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--p-fg2)}
.fix .btn{justify-self:start}
.act{display:grid;gap:4px;padding-top:8px}
.act p{font-size:.875rem;line-height:1.45;color:var(--p-fg2)}
.act .btn{justify-self:start}
/* the result of a simulated change, under the buttons that made it */
.sim-r{display:grid;gap:6px;margin-top:4px;padding:10px 12px;background:var(--plate-0);border:1px solid var(--p-hair);border-left:3px solid var(--p-fg2);border-radius:3px}
.sim-r[data-s=bad]{border-left-color:var(--fail)}
.sim-r[data-s=ok]{border-left-color:var(--ok-t)}
.sim-r .btn{justify-self:start}

/* instruments */
.inst{display:grid;gap:12px}
@media (min-width:768px){.inst{grid-template-columns:repeat(2,minmax(0,1fr))}}
.inst>li{display:grid;gap:10px;align-content:start;padding:14px;background:var(--plate-0);border:1px solid var(--p-hair);border-radius:4px}
.inst h4{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-weight:400}
.iid{font:500 .9375rem/1.3 var(--mono);color:var(--p-fg)}
.inm{font-size:.875rem;color:var(--p-fg2)}
.inst .btn{justify-self:start}
.view .help+.inst{margin-top:12px}

/* anchor */
.anc-now{display:grid;gap:8px;margin-top:16px;padding:14px;background:var(--plate-0);border:1px solid var(--p-hair);border-radius:4px}
.anc-now .hx{max-width:none}
@media (min-width:480px){.anc-now .hx{max-width:38ch}}
.anc-now+.lab{margin-top:20px}
.anc{margin-top:8px;border-top:1px solid var(--p-fg2)}
.anc>li{display:grid;gap:6px;padding:10px 0 11px;border-bottom:1px solid var(--p-hair)}
.anc-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;font-size:.875rem;color:var(--p-fg)}
.anc .res{white-space:normal}

/* method */
.meth{display:grid;gap:14px;counter-reset:m}
.meth>li{display:grid;gap:6px;counter-increment:m;padding-top:10px;border-top:1px solid var(--p-hair)}
.meth h4{display:flex;gap:10px;font:620 1rem/1.3 var(--display);color:var(--p-fg)}
.meth h4::before{content:counter(m);min-width:1.5rem;font:500 .8125rem/1.6 var(--mono);color:var(--p-fg2)}
.meth p,.meth dl{padding-left:2.125rem}
.meth code{color:var(--p-fg);overflow-wrap:anywhere}
.meth code.pl{margin-left:2.125rem}
@media (max-width:419px){.meth p,.meth dl{padding-left:0}.meth code.pl{margin-left:0}}
.kv-m{grid-template-columns:minmax(0,1fr);gap:0}
.kv-m dd{margin-bottom:6px}
.kv-m .hx{max-width:none}
@media (min-width:600px){.kv-m{grid-template-columns:max-content minmax(0,1fr);gap:3px 16px}.kv-m .hx{max-width:38ch}}
.tools{display:flex;flex-wrap:wrap;gap:8px}

/* ---------------------------------------------------------------- footer */
.foot{margin-top:48px;border-top:2px solid var(--ink);padding:16px 0 36px;font-size:.875rem;line-height:1.55;color:var(--ink-2)}
.foot .ind{max-width:60rem;color:var(--ink)}
.foot .ind a{display:inline-block;padding:12px 0;margin:-12px 0;line-height:20px}
.foot .meta{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:6px;font:400 .8125rem/1.5 var(--mono)}
.foot .meta a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.foot .m-fonts{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 10px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.top,.skip,.tabs,.add,.simu,.fix,.tools{display:none!important}body{background:#fff}.plate{background:#fff;color:#000}.plate *{color:#000!important}}