/* home.css: page rules for the datapce readout home page. Unlayered, so it wins over the base.css layers. */
.ro-defs{position:absolute;width:0;height:0;overflow:hidden}
.mk{fill:var(--ink-3)}.mk.on{fill:var(--brand)}
/* chips: colour plus a shape, so colour is never the only cue */
.c-m{--cf:var(--pass-fg);--cb:var(--pass-bg)}.c-e{--cf:var(--inc-fg);--cb:var(--inc-bg)}.c-i{--cf:var(--partial-fg);--cb:var(--partial-bg)}
.c-s{--cf:var(--stale-fg);--cb:var(--stale-bg)}.c-p{--cf:var(--brand);--cb:var(--surface)}
span.ch{display:inline-block;padding:.28em .55em;vertical-align:.08em;font:800 .75rem/1 var(--font-mono);letter-spacing:.03em;white-space:nowrap;color:var(--cf);background:var(--cb);border:1.5px solid var(--cf);border-radius:4px}
span.c-p{border-style:dashed}span.c-s{border-style:dotted}
.fg g.ch rect{fill:var(--cb);stroke:var(--cf);stroke-width:1.2}.fg g.c-p rect{stroke-dasharray:3 2}
.fg g.ch text{fill:var(--cf);font-size:12px;font-weight:800;letter-spacing:.02em}
.fg .gl{fill:none;stroke:var(--cf);stroke-width:1.6}.fg .gl.f{fill:var(--cf)}.fg .gl.d{stroke-dasharray:2 1.6}
/* page frame */
main>section.ro-top{max-width:var(--w);padding-block:1rem 2rem;border-top:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem 3rem}
.ro-top>*{min-width:0;margin:0}
/* R8: the hero is one column in source order: line, lede, code, result, button, intake note, status */
.ro-top h1 .ro-eye{display:block;margin:0 0 .6rem}
.ro-top h1{font-size:clamp(1.9rem,1rem + 3vw,2.9rem);line-height:1.06;letter-spacing:-.035em;max-width:20em}
.ro-top .lede{font-size:var(--step-1);max-width:38em}
.ro-cta .ctas{gap:.75rem 1.5rem;margin:0 0 .5rem}
.textlink{font-weight:600}
.ro-micro{font-size:.875rem;color:var(--ink-2)}
.ro-status{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1rem;font:600 .8125rem/1.6 var(--font-mono);color:var(--ink-2)}
.ro-status li{white-space:nowrap}.ro-status li.wr{white-space:normal}
@media (max-width:39.99em){.ro-cta .btn{width:100%}.ro-cta .ctas{flex-direction:column;align-items:stretch}.ro-cta .textlink{text-align:center}}
.hm-res{max-width:38em;font-weight:600;color:var(--ink)}.hm-code{color:var(--ink-2)}.hm-code code,.hm-sha,#scan code{overflow-wrap:anywhere}
main>section.ro-top.h1-top{grid-template-columns:minmax(0,1fr)}main>section.ro-top.h1-top>*{grid-row:auto;grid-column:auto;order:0}
/* what happens to a readout: dashed = PLANNED, like the figures */
.ro-flow{padding:.9rem 1.1rem;border:2px dashed var(--brand);border-radius:12px;background:var(--surface)}
.ro-flow-h{margin:0 0 .5rem;font:800 .8125rem/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.ro-flow ol{margin:0;padding:0;list-style:none;counter-reset:f;display:grid;gap:.4rem;font-size:.9375rem;color:var(--ink)}
.ro-flow li{counter-increment:f;display:flex;gap:.6rem;align-items:baseline}
.ro-flow li::before{content:counter(f);flex:none;display:grid;place-items:center;width:1.4rem;height:1.4rem;font:700 .8125rem/1 var(--font-mono);color:var(--on-brand);background:var(--brand);border-radius:4px;transform:translateY(.2rem)}
/* figure card */
.fg{margin:0 0 2.5rem;padding:.75rem;background:var(--surface);border-radius:12px;box-shadow:var(--e-2)}
.fg svg{display:block;width:100%;height:auto}
.fg figcaption{margin-top:1rem;font-size:.9375rem;line-height:1.55;color:var(--ink-2);max-width:84ch}
.fg figcaption b{display:block;margin-bottom:.25rem;color:var(--ink);font-size:1rem}
.fg .pui-formula{white-space:normal}
@media (min-width:40em){.fg{padding:1.25rem 1.5rem}}
.fg svg.f1w{display:none}.fg svg.f1n{max-width:23rem;margin-inline:auto}
@media (min-width:75em){.fg svg.f1w{display:block}.fg svg.f1n{display:none}}
/* svg text */
.fg svg text{font:600 12px var(--font-mono);fill:var(--ink-3)}
.fg .tk{fill:var(--ink);font-weight:700}.fg .tb{font-size:15px;font-weight:800;fill:var(--ink)}
.fg .tm{font-size:17px;font-weight:800;fill:var(--ink);font-variant-numeric:tabular-nums}
.fg .ts,.fg .f11{font-size:12px}.fg .cap{font-weight:800;letter-spacing:.08em}.fg .lk{fill:var(--brand);font-weight:700}
/* svg marks */
.fg .nd{fill:var(--surface);stroke:var(--ink);stroke-width:2}.fg .card{fill:var(--bg)}
.fg .zn{fill:var(--bg-sunk);stroke:var(--ink-3);stroke-width:1.5}.fg .rc{stroke-width:1.5}
.fg .pl{stroke-dasharray:6 4}.fg .hd{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.fg .ln{fill:none;stroke:var(--ink-3);stroke-width:2.5}
.fg .rw{fill:var(--bg-sunk)}
.fg .ln.is-on{stroke:var(--brand);stroke-width:4;marker-end:url(#ah-on)}
.fg :is(.nd,.zn).is-on{stroke:var(--brand);stroke-width:3;fill:var(--brand-wash)}
.fg .rw.is-on{fill:var(--brand-wash);stroke:var(--brand);stroke-width:2}
.fg [data-pick]{cursor:pointer}
.fg .bd circle{fill:var(--brand)}.fg .bd.M circle{fill:var(--allow-fg)}.fg .bd.P circle{fill:var(--ask-fg)}
.fg .bd text{fill:var(--surface);font-size:12px;font-weight:800}.fg .bd0{fill:var(--ink-3)}
.fg .stop rect{fill:var(--deny-bg);stroke:var(--deny-fg);stroke-width:2}.fg .stop path{fill:none;stroke:var(--deny-fg);stroke-width:2}
.fg .stop.is-on rect{stroke-width:4}
.fg .pk{fill:var(--brand);stroke:var(--surface);stroke-width:2;opacity:0}.fg .pk.go{opacity:1}
/* controls and lines */
.ro-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 .5rem}
.ro-ctl:empty{display:none}
.ro-ctl .lab{font:700 .75rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-right:.25rem}
.ro-ctl .pui-btn{font-family:var(--font-mono);font-size:.8125rem;min-height:2.75rem}
.ro-line{margin:0 0 .75rem;min-height:3em;font-size:.9375rem;color:var(--ink-2)}
.ro-line b{color:var(--brand)}
.ro-key{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;font-size:.8125rem;color:var(--ink-2)}
.ro-key li{display:flex;align-items:center;gap:.4rem}
.ro-sw{display:inline-block;width:1.6rem;border-top:3px solid var(--ink)}.ro-sw.pl{border-top-style:dashed}
.ro-alt{margin-top:1rem;font-size:.875rem}.ro-alt summary{cursor:pointer;min-height:2.75rem;display:flex;align-items:center;font-weight:600;color:var(--brand)}
.ro-alt .table-wrap,.ro-alt table{margin-top:.5rem}
/* more marks */
.fg .tn{font-size:30px;font-weight:800;fill:var(--ink);font-variant-numeric:tabular-nums}
.fg .src{fill:var(--ink-3);font-weight:500}
.fg .sb{fill:var(--bg-sunk);stroke:var(--ink-3);stroke-width:1.5}
.fg .fr{fill:var(--surface);stroke:var(--ink);stroke-width:2}.fg .fr.is-on{stroke:var(--brand);stroke-width:3}
.fg .ce{fill:none;stroke:var(--ink-3);stroke-width:1.3}.fg .ce.on{fill:var(--brand);stroke:var(--brand)}.fg .ce.pl{stroke-dasharray:3 2}
.fg .br{fill:var(--ink-3)}.fg .br.best{fill:var(--brand)}.fg .tr{fill:var(--bg-sunk);stroke:var(--ink-3);stroke-width:1.2}
.fg .lk4{stroke:var(--ink);stroke-width:4}.fg .dt{stroke-width:3.5;stroke-dasharray:.1 6;stroke-linecap:round}.fg .mi{stroke-width:2.5}
.fg .xm,.fg .zl{fill:none;stroke:var(--deny-fg);stroke-width:2.5;stroke-linecap:round}.fg .zl{stroke:var(--ink);stroke-width:2}
.fg .ci,.fg .ci2{stroke:var(--ink);stroke-width:3}.fg .ci2{stroke:var(--surface);stroke-width:2.5}
.fg .pt{fill:var(--ink);stroke:var(--surface);stroke-width:2}
.fg .xs{fill:var(--deny-bg);stroke:var(--deny-fg);stroke-width:1.5}.fg .gx{fill:var(--ink)}.fg .g2{stroke:var(--ink)}
.fg .cn{stroke:var(--ink-3);stroke-width:3}
.fg .sg{fill:none;stroke:var(--allow-fg);stroke-width:10}
.fg .ck{stroke-width:1.5}.fg .ckm{fill:none;stroke:var(--allow-fg);stroke-width:2.5;stroke-linecap:round}
.fg .vb,.fg .fb{stroke-width:2}.fg .fb{fill:var(--deny-bg);stroke:var(--deny-fg)}
.fg .ring{fill:none;stroke:var(--brand);stroke-width:2.5}.fg .doc{stroke-width:1.5}
.fg .vd rect{stroke-width:1.5;fill:var(--bg-sunk);stroke:var(--ink-3)}.fg .vd text{font-size:12px;font-weight:800;letter-spacing:.04em}
.fg .vd.fail rect{fill:var(--deny-bg);stroke:var(--deny-fg)}.fg .vd.fail text{fill:var(--deny-fg)}
.fg .vd.weak rect{fill:var(--partial-bg);stroke:var(--partial-fg)}.fg .vd.weak text{fill:var(--partial-fg)}
.fg .vd.gain rect{fill:var(--pass-bg);stroke:var(--pass-fg)}.fg .vd.gain text{fill:var(--pass-fg)}
.fg .vd.none rect{fill:var(--surface);stroke:var(--brand);stroke-dasharray:3 2}.fg .vd.none text{fill:var(--brand)}
/* steps */
.fg [data-s].is-on>.nd:not(.sb,.ring),.fg .nd.is-on{stroke:var(--brand);stroke-width:3;fill:var(--brand-wash)}
.fg [data-s].is-on>.fb{fill:var(--deny-bg);stroke:var(--deny-fg)}
.fg .ln[data-s].is-on{stroke:var(--brand);stroke-width:4;marker-end:url(#ah-on)}
.ro-ol{margin:1.25rem 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:.35rem;font-size:.9375rem;color:var(--ink-2)}
.ro-ol li{counter-increment:s;position:relative;padding:.4rem .6rem .4rem 2.6rem;border-left:3px solid var(--line);border-radius:0 6px 6px 0}
.ro-ol li::before{content:counter(s);position:absolute;left:.6rem;top:.45rem;display:grid;place-items:center;width:1.5rem;height:1.5rem;font:700 .8125rem/1 var(--font-mono);color:var(--on-brand);background:var(--ink-3);border-radius:4px}
.ro-ol li.is-on{background:var(--brand-wash);border-left-color:var(--brand);color:var(--ink)}.ro-ol li.is-on::before{background:var(--brand)}
@media (min-width:60em){.ro-ol{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}}
/* layouts per figure */
.fg svg.f3w,.fg svg.f6w,.fg svg.f7w,.fg svg.f4cw{display:none}.fg svg.f3n,.fg svg.f6n,.fg svg.f7n,.fg svg.f4cn{max-width:26rem;margin-inline:auto}
@media (min-width:75em){.fg svg.f3w,.fg svg.f6w,.fg svg.f7w,.fg svg.f4cw{display:block}.fg svg.f3n,.fg svg.f6n,.fg svg.f7n,.fg svg.f4cn{display:none}}
.f2g,.f4g,.f5g{display:grid;gap:1.25rem;justify-content:center}
.f2g{grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),27rem))}
.f4g{grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr))}
.f5g{grid-template-columns:minmax(0,1fr)}
@media (min-width:75em){.f4g{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:60em){.f5g{grid-template-columns:repeat(2,minmax(0,1fr))}}
.f4c{margin-bottom:1.25rem}
.fg .f4p,.fg .f5p{max-width:26rem;margin-inline:auto}@media (min-width:60em){.fg .f5p{max-width:34rem}}
/* key, status */
.kd{display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;font:800 .75rem/1 var(--font-mono);color:var(--surface);background:var(--brand);border-radius:50%}
.kd.M{background:var(--allow-fg)}.kd.P{background:var(--ask-fg)}
/* sections */
main>section:not(.ro-top){padding-block:clamp(2.5rem,6vw,4.5rem)}
.section-head{margin-bottom:1.5rem}
.ro-cols{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr);margin-bottom:1.5rem}
@media (min-width:60em){.ro-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.h1-top .ro-cols{grid-template-columns:minmax(0,1fr)}}
.ro-box{min-width:0;padding:1.25rem 1.5rem;background:var(--surface);border-radius:12px;box-shadow:var(--e-2);font-size:.9375rem;color:var(--ink-2)}
.ro-box h2,.ro-box h3{font-size:var(--step-1);margin-bottom:.5rem}.ro-box :is(ol,ul){margin:0 0 .75rem;padding-left:1.25rem}.ro-box li{margin-bottom:.35rem}
.ro-files{display:flex;flex-wrap:wrap;gap:.35rem}.ro-files code{padding:.15em .45em;font-size:.8125rem;background:var(--bg-sunk);border-radius:4px}
.ro-contact{max-width:none;display:grid;gap:.25rem}
.ro-contact .ctas{margin:.25rem 0 .75rem}.ro-contact .btn{width:auto}
/* alt text tables */
.ro-tab{font-size:.8125rem}.ro-tab td,.ro-tab th{height:auto;vertical-align:top}.ro-tab tr.is-on :is(th,td){background:var(--brand-wash)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (forced-colors:active){.fg .nd,.fg .zn,.fg .ln,.fg .hd,.fg .fr{stroke:CanvasText}.fg svg text{fill:CanvasText}.fg .ln.is-on,.fg .nd.is-on,.fg .fr.is-on{stroke:Highlight}.fg .br,.fg .ce.on{fill:CanvasText}}
@media (max-width:30em){.top nav .nav-cta{padding:.25rem .75rem;font-size:.8125rem;line-height:1.15;white-space:normal;text-align:center;max-width:9.5rem}}
@media (max-width:50em){.top nav a:not(.nav-cta){display:none}}
.ro-cols>.fg{margin:0}
.hp-n{margin:0 0 .25rem;font:800 1.25rem/1.2 var(--font-mono);color:var(--ink)}
.hp-p{margin:0 0 1rem;font-size:var(--step-1);color:var(--ink)}
.hp-caps{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.75rem}
.ro-box .hp-caps li{display:flex;gap:.75rem;align-items:flex-start;margin:0}
.hp-i{flex:none;width:1.5rem;height:1.5rem;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hp-st{display:grid;gap:.5rem;margin:0;padding-top:.75rem;border-top:1px solid var(--line);font-size:.8125rem}
.hp-st li{white-space:normal}
.fg svg.hp-f{max-width:26rem;margin-inline:auto}
.hp-f .ts{font-size:14.5px}.hp-f .tk{font-size:15.5px}
/* section 5, tracks: Fig. 8 and Fig. 9. Append to home.css. Reuses .fg .nd .ln .pl .tk .ts .tm .tn .tr .br .xs .gx .xm .hd .mi .stop .ch .ro-cols .ro-box. */
.fg .ya{--y:var(--allow-fg)}.fg .yk{--y:var(--ask-fg)}.fg .yd{--y:var(--deny-fg)}
/* decision classes: colour plus a shape (filled dot = allow, ring = ask, square = deny) */
.fg .by,.fg .sy{fill:var(--y)}
.fg .ly,.fg .gy,.fg .sy.o{fill:none;stroke:var(--y);stroke-width:3}
.fg .gy{stroke-width:10}.fg .sy.o{stroke-width:2.5}
#tracks .ro-box p{margin:0 0 .6rem}#tracks .ro-box p:last-child{margin:0}
#tracks .ro-box h3 .ch{margin-left:.4rem}
@media (forced-colors:active){.fg .by,.fg .sy{fill:CanvasText}.fg .ly,.fg .gy,.fg .sy.o{stroke:CanvasText}}
.fg svg.f89{max-width:26rem;margin-inline:auto}
#organism .ro-stack{display:grid;gap:1rem;align-content:start}
/* D34 short home: one figure, three cards, one limits box */
main>.hm-figure{max-width:var(--w);margin:0 auto;padding:0 var(--gutter) 2rem}
.hm-fig{display:block;width:100%;max-width:44rem;height:auto;margin-inline:auto}
.hm-box{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.5}
.hm-t{font:700 15px var(--font-mono);fill:var(--ink);text-anchor:middle}
.hm-s{font:400 12px var(--font-sans);fill:var(--ink-3);text-anchor:middle}
.hm-a{fill:none;stroke:var(--brand);stroke-width:2}
.hm-pl{stroke-dasharray:5 4}
.hm-figure figcaption{max-width:var(--measure);margin:1rem auto 0;font-size:.875rem;color:var(--ink-2)}
main>.hm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;padding-top:2rem;padding-bottom:2rem}
.hm-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.5rem}
.hm-card h2{font-size:var(--step-1)}
.hm-card p{flex:1;color:var(--ink-2)}
main>.hm-more{padding-top:2rem}
.hm-more h2{font-size:var(--step-1)}
.hm-more ul{color:var(--ink-2);max-width:var(--measure);padding-left:1.2em}
.ro-sub{padding-bottom:1rem}
.top nav a[aria-current=page]{color:var(--ink);text-decoration:underline;text-underline-offset:.4em}
.fg .hm-n{display:none;max-width:16rem}
@media (max-width:39.99em){.fg .hm-w{display:none}.fg .hm-n{display:block}}