/* erik.it.com — the labs.llc house pair, in a Braun idiom.
   Paper is the default edition; :root[data-edition="dark"] is moon, exactly as
   labs.llc sets it. Tokens below are the house values, unchanged.
   Status colour NEVER carries meaning alone: every state ships a glyph and the
   word. Each status colour was computed to >=4.5:1 on both grounds.
   The house accent doubles as the outage colour, so the one strong colour on
   the page is always doing work rather than decorating. */

:root{
  --ink:#1E262B; --paper:#FFFFFF; --deep:#11161C; --muted:#717171;
  --line:rgba(30,38,43,.10); --line2:rgba(30,38,43,.22); --accent:#C2410C;
  --panel:#F6F6F4; --sunk:#EFEFEC;
  --ok:#136B3C; --minor:#8A5A00; --major:#C2410C; --critical:#9B1C31; --unknown:#5E6A75;
  /* the coastline behind the reachability map: ink over paper, so land always
     reads as slightly more inked than sea, in either theme */
  /* the map: the SEA is recessed one step and the land is painted back at the
     panel's own value, so nothing drawn on land loses the contrast it was
     audited with. --land2 is the faint lift for a country being measured. */
  --sea:var(--sunk); --land:var(--paper); --land2:rgba(30,38,43,.05);
  --okq:rgba(19,107,60,.10); --minorq:rgba(138,90,0,.10);
  --majorq:rgba(194,65,12,.10); --criticalq:rgba(155,28,49,.10);
  --measure:1265px; --gutter:clamp(20px,5vw,56px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-edition="dark"]{
  --ink:#E8EDF2; --paper:#0F1419; --deep:#0B0F13; --muted:#8A97A3;
  --line:rgba(232,237,242,.12); --line2:rgba(232,237,242,.24); --accent:#F97316;
  --panel:#161C23; --sunk:#121820;
  --ok:#4FCB8B; --minor:#E3B44C; --major:#F97316; --critical:#FF7A93; --unknown:#8A97A3;
  --sea:var(--deep); --land:var(--panel); --land2:rgba(232,237,242,.05);
  --okq:rgba(79,203,139,.13); --minorq:rgba(227,180,76,.13);
  --majorq:rgba(249,115,22,.13); --criticalq:rgba(255,122,147,.13);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 15px/1.6 var(--sans);font-synthesis-weight:none;overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:from-font}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
h1,h2,h3{font-weight:700;line-height:1.12;letter-spacing:-.022em;margin:0;text-wrap:balance}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sep{color:var(--muted);padding:0 .3em}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:.6rem 1rem;z-index:200}
.skip:focus{left:0}
.eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .8rem}

/* ---- status token ---------------------------------------------------- */
.st{display:inline-flex;align-items:center;gap:.34rem;font-size:.7rem;font-weight:700;
  letter-spacing:.02em;white-space:nowrap;border-radius:2px;padding:.22rem .5rem;
  border:1px solid currentColor;flex:none}
.st i{font-style:normal;font-size:.85em;line-height:1}
.st-ok{color:var(--ok);background:var(--okq)}
.st-minor{color:var(--minor);background:var(--minorq)}
.st-major{color:var(--major);background:var(--majorq)}
.st-critical{color:var(--critical);background:var(--criticalq)}
.st-maintenance,.st-unknown{color:var(--unknown);background:transparent}
.st.big{font-size:.95rem;padding:.4rem .9rem}

/* ---- masthead: one rule, then instruments ---------------------------- */
.mast{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--line2)}
.mastin{max-width:var(--measure);margin:0 auto;padding:.75rem var(--gutter);
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.wordmark{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none;
  font-weight:700;font-size:1.02rem;letter-spacing:-.03em;flex:none}
.wordmark .mk{width:22px;height:22px;stroke:var(--accent);flex:none}
.wordmark i{font-style:normal;color:var(--muted);font-weight:400}
.mastnav{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap}
.mastnav>a,.mbtn{font:inherit;font-size:.83rem;font-weight:500;color:var(--ink);text-decoration:none;
  background:none;border:0;cursor:pointer;padding:.4rem .55rem;border-radius:2px;
  display:inline-flex;align-items:center;gap:.32rem}
.mastnav>a:hover,.mbtn:hover{background:var(--panel)}
.mbtn svg{width:9px;height:6px;stroke:currentColor;fill:none;stroke-width:1.6;
  transition:transform .16s var(--ease)}
.mbtn[aria-expanded="true"]{background:var(--panel)}
.mbtn[aria-expanded="true"] svg{transform:rotate(180deg)}

.menu{position:relative}
.mpanel{position:absolute;top:calc(100% + 6px);left:0;min-width:236px;z-index:120;
  background:var(--paper);border:1px solid var(--line2);border-radius:3px;padding:.3rem;
  box-shadow:0 12px 30px -18px rgba(0,0,0,.5)}
.mpanel[hidden]{display:none}
.mpanel a{display:flex;flex-direction:column;gap:.05rem;padding:.42rem .55rem;border-radius:2px;
  text-decoration:none;color:var(--ink)}
.mpanel a b{font-weight:500;font-size:.85rem}
.mpanel a i{font-style:normal;font-size:.72rem;color:var(--muted)}
.mpanel a:hover,.mpanel a:focus{background:var(--panel)}
.mpanel hr{border:0;border-top:1px solid var(--line);margin:.3rem .55rem}
.nojs .menu{display:none}

.find{position:relative;display:flex;align-items:center;gap:.45rem;flex:1 1 190px;max-width:340px;
  border:1px solid var(--line2);border-radius:2px;padding:.34rem .55rem;background:var(--panel)}
.find svg{width:14px;height:14px;stroke:var(--muted);fill:none;flex:none}
.find input{font:inherit;font-size:16px;border:0;background:none;color:var(--ink);width:100%;outline:0;padding:0}
.find input::placeholder{color:var(--muted);font-size:.82rem}
.find kbd{font-family:var(--mono);font-size:.64rem;color:var(--muted);border:1px solid var(--line2);
  border-radius:2px;padding:.06rem .28rem;flex:none}
.find:focus-within{border-color:var(--accent)}
.find:focus-within kbd{opacity:0}
.nojs .find{display:none}

.mastnow{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);
  margin-left:auto;flex:none}
.mastnow b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.pill{display:inline-flex;border:1px solid var(--line2);border-radius:2px;background:var(--panel);padding:2px;gap:2px;flex:none}
.pill button{font:inherit;font-size:12px;line-height:1;cursor:pointer;border:0;border-radius:1px;
  background:transparent;color:var(--muted);width:26px;height:22px;display:grid;place-items:center;padding:0}
.pill button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.nojs .pill{display:none}

/* search results */
.results{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter) .7rem}
.results[hidden]{display:none}
.results ol{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.results a{display:flex;align-items:center;gap:.55rem;padding:.5rem .6rem;background:var(--panel);
  text-decoration:none;color:var(--ink);border-radius:2px}
.results a:hover,.results a.on{background:var(--sunk);outline:1px solid var(--accent)}
.results .rn{font-weight:500;font-size:.86rem}
.results .rc{font-size:.72rem;color:var(--muted);margin-left:auto;text-align:right}
.results .none{color:var(--muted);font-size:.86rem;padding:.5rem 0}

/* ---- shell ----------------------------------------------------------- */
.app{max-width:var(--measure);margin:0 auto;padding:2.4rem var(--gutter) 3.5rem}
.hero{max-width:56ch}
.hero h1{font-size:clamp(2.2rem,6vw,3.6rem);letter-spacing:-.04em;line-height:1}
.lede{font-size:1.02rem;color:var(--muted);margin:.9rem 0 0;max-width:70ch}
.lede b{color:var(--ink);font-weight:500}
.sub{font-size:.84rem;color:var(--muted);margin:.3rem 0 0}
.more{margin:1rem 0 0;font-size:.88rem}
.view>h2{font-size:1.05rem;margin:3rem 0 .3rem;letter-spacing:-.01em}
.view>h2+.rows,.view>h2+.chips,.view>h2+.rg{margin-top:.9rem}
.crumbs{margin:0 0 1.2rem}
.crumbs ol{list-style:none;display:flex;gap:.4rem;margin:0;padding:0;font-size:.78rem;color:var(--muted)}
.crumbs li+li::before{content:"/";padding-right:.4rem;color:var(--line2)}
.crumbs a{color:var(--muted)}

/* ---- the board: map + gauges ----------------------------------------- */
.board{display:grid;gap:1px;margin:2.2rem 0 0;grid-template-columns:minmax(0,1fr) 232px;
  background:var(--line2);border:1px solid var(--line2);border-radius:3px;overflow:hidden}
.mapwrap{margin:0;background:var(--panel);padding:1rem 1.1rem 1.2rem}
.mapwrap figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  flex-wrap:wrap;margin:0 0 .7rem}
.mlab{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.mnote{font-size:.72rem;color:var(--muted)}
.map{width:100%;height:auto;display:block}
/* THE GROUND. Drawn first, so the graticule, the equator and every dot sit on
   top of it. A country that is being measured is a shade firmer than the rest
   of the world; a country in trouble is filled with the same quiet status tint
   used elsewhere on the site, so the shape carries the reading and the halo is
   no longer the only thing saying it. */
.map .sea{fill:var(--sea)}
/* No contour. A 1px stroke becomes a third of a device pixel at the size this
   renders on a phone and turns every coast into a grey shimmer; a fill holds
   its value at any scale. The stroke here is the SAME colour as the fill — it
   is dilation, not outline, and it is what keeps Denmark, Ireland and the
   Caribbean from breaking into dots on a small screen. */
.map .land .ld{fill:var(--land);stroke:var(--land);stroke-width:.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.map .land .m{fill:var(--land)}
.map .land .m::after{content:none}
/* a country in trouble is filled with the status tint the site already uses,
   so the shape carries the reading and the halo is not the only thing saying it */
.map .land .lv-minor{fill:var(--minorq);stroke:var(--minorq)}
.map .land .lv-major{fill:var(--majorq);stroke:var(--majorq)}
.map .land .lv-critical{fill:var(--criticalq);stroke:var(--criticalq)}
/* the graticule steps back now that there is a coastline to read position from:
   measured, --line2 grid over this land is louder than the land itself */
.map .grid line{stroke:var(--line)}
.map .equator{stroke:var(--line);stroke-dasharray:2 5}
/* Windows High Contrast flattens both fills to Canvas and the map disappears;
   this is the one place a real outline is correct. */
@media (forced-colors:active){
  .map .sea{fill:Canvas}
  .map .land .ld{forced-color-adjust:none;fill:Canvas;stroke:GrayText;stroke-width:1}
}
/* on paper a filled ocean is a page of toner and dithers into a stipple */
@media print{
  .map .sea{fill:none}
  .map .land .ld{fill:none;stroke:#000;stroke-opacity:.35;stroke-width:.5}
}
.map .grid line{stroke:var(--line);stroke-width:1}
.map .equator{stroke:var(--line2);stroke-width:1;stroke-dasharray:3 4}
.map .glab{font-size:9px;fill:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.map .dot .core{fill:var(--unknown)}
.map .dot.lv-ok .core{fill:var(--ok)}
.map .dot.lv-minor .core{fill:var(--minor)}
.map .dot.lv-major .core{fill:var(--major)}
.map .dot.lv-critical .core{fill:var(--critical)}
.map .halo{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.55}
.map .dot.lv-minor .halo{stroke:var(--minor)}
.map .dot.lv-major .halo{stroke:var(--major)}
.map .dot.lv-critical .halo{stroke:var(--critical)}
.map .dlab{font-size:11px;font-weight:700;fill:var(--ink)}
.map .dot:hover .core,.map .dot:focus .core{r:7}
.map .dot:focus{outline:none}
.map .dot:focus .halo{opacity:1;stroke-width:2}
.mapwrap.big{border:1px solid var(--line2);border-radius:3px;background:var(--panel);padding:1.2rem;margin:1.4rem 0 0}

.legend{display:flex;gap:1.1rem;flex-wrap:wrap;margin:.9rem 0 0;font-size:.74rem;color:var(--muted)}
.legend i{font-style:normal;margin-right:.35rem}
.legend .lv-ok{color:var(--ok)} .legend .lv-minor{color:var(--minor)}
.legend .lv-major{color:var(--major)} .legend .lv-unknown{color:var(--unknown)}
.legend.big{margin-top:.8rem}

.gauges{display:flex;flex-direction:column;gap:1px;background:var(--line2)}
.gauge{background:var(--panel);padding:.9rem 1rem;flex:1;display:flex;flex-direction:column;justify-content:center}
.gauge span{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gauge b{font-size:1.9rem;font-weight:700;line-height:1.05;margin:.15rem 0 0;
  font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.gauge i{font-style:normal;font-size:.72rem;color:var(--muted)}
.gauge.lv-ok b{color:var(--ok)} .gauge.lv-minor b{color:var(--minor)}
.gauge.lv-major b{color:var(--major)} .gauge.lv-unknown b{color:var(--unknown)}
.gauges.wide{flex-direction:row;flex-wrap:wrap;margin:1.6rem 0 0;border:1px solid var(--line2);border-radius:3px}
.gauges.wide .gauge{flex:1 1 165px}

/* ---- rows ------------------------------------------------------------ */
.rows{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line2);border-radius:3px;overflow:hidden}
.row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;background:var(--panel);padding:.5rem .85rem}
.row[hidden]{display:none}
.row::before{content:"";width:3px;align-self:stretch;margin:-.5rem .35rem -.5rem -.85rem;background:var(--line2)}
.row.lv-ok::before{background:var(--ok)} .row.lv-minor::before{background:var(--minor)}
.row.lv-major::before{background:var(--major)} .row.lv-critical::before{background:var(--critical)}
.rname{font-weight:500;font-size:.9rem;color:var(--ink);text-decoration:none;min-width:12ch}
a.rname:hover{color:var(--accent);text-decoration:underline}
.rmeta{font-size:.78rem;color:var(--muted);flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prov{font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  margin-left:auto;flex:none}
.spark{flex:none;color:var(--muted)}
.row.lv-minor .spark{color:var(--minor)} .row.lv-major .spark{color:var(--major)}
.grouphead{background:var(--paper);padding:.9rem .85rem .4rem}
.grouphead h2{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.45rem;margin:0}
.grouphead h2 i{font-style:normal;font-size:.9em}
.grouphead h2 i.lv-ok{color:var(--ok)} .grouphead h2 i.lv-minor{color:var(--minor)}
.grouphead h2 i.lv-major{color:var(--major)} .grouphead h2 i.lv-critical{color:var(--critical)}
.grouphead h2 span{font-family:var(--mono);color:var(--line2)}
.grouphead[hidden]{display:none}

.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 0}
.chip{display:inline-flex;align-items:center;gap:.42rem;text-decoration:none;border:1px solid var(--line2);
  border-radius:2px;padding:.35rem .65rem;color:var(--ink);background:var(--panel);font-size:.82rem;font-weight:500}
.chip i{font-style:normal;font-size:.8em;color:var(--muted)}
.chip span{font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.chip.lv-ok i{color:var(--ok)} .chip.lv-minor i{color:var(--minor)}
.chip.lv-major i{color:var(--major)} .chip.lv-critical i{color:var(--critical)}
.chip:hover{border-color:var(--accent);color:var(--accent)}

.filters{display:flex;flex-wrap:wrap;gap:.35rem;margin:1.3rem 0 0}
.tg{font:inherit;font-size:.79rem;font-weight:500;cursor:pointer;border:1px solid var(--line2);
  border-radius:2px;padding:.3rem .7rem;background:var(--panel);color:var(--muted);
  display:inline-flex;align-items:center;gap:.35rem}
.tg span{font-family:var(--mono);font-size:.9em}
.tg:hover{color:var(--ink)}
.tg.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tg.is-on span{color:var(--paper);opacity:.7}
.nojs .filters{display:none}

.rg{list-style:none;margin:1rem 0 0;padding:0}
.rg.cols{display:grid;gap:0 1.8rem;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.rg li{display:flex;align-items:baseline;gap:.6rem;padding:.42rem 0;border-bottom:1px solid var(--line)}
.rgn{flex:1 1 auto;min-width:0;font-size:.87rem}
.rgn i{font-style:normal;margin-right:.45rem;color:var(--unknown)}
.rg li.lv-ok .rgn i{color:var(--ok)} .rg li.lv-minor .rgn i{color:var(--minor)}
.rg li.lv-major .rgn i{color:var(--major)} .rg li.lv-critical .rgn i{color:var(--critical)}
.rgc{font-size:.72rem;color:var(--muted)}

/* ---- detail & prose -------------------------------------------------- */
.detail .bigstate{margin:.9rem 0 0}
.cards{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.card{background:var(--panel);border:1px solid var(--line2);border-radius:3px;padding:.8rem .9rem}
.card h3{font-size:.94rem;line-height:1.35;font-weight:500}
.cmeta{margin:.35rem 0 0;font-size:.78rem;color:var(--muted)}
.cline{margin:.45rem 0 0;font-size:.82rem}
.note{margin:1.8rem 0 0;padding:.9rem 1.1rem;background:var(--panel);border-left:3px solid var(--accent);border-radius:0 3px 3px 0}
.note p{margin:0;color:var(--muted);font-size:.88rem}
.note p b{color:var(--ink)}
.bigspark{margin:1rem 0 0;padding:1.1rem;background:var(--panel);border:1px solid var(--line2);border-radius:3px}
.bigspark svg{width:100%;height:auto;color:var(--ok)}
.bigspark.lv-minor svg{color:var(--minor)} .bigspark.lv-major svg{color:var(--major)}

.prose{max-width:72ch}
.prose p{color:var(--muted);margin:.9rem 0 0}
.prose h2{font-size:1.02rem;margin:2.4rem 0 0}
.prose b{color:var(--ink);font-weight:500}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--panel);border:1px solid var(--line);
  border-radius:2px;padding:.08em .34em}
.prose .gauges{max-width:none}
.ledger{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line2);border-radius:3px;overflow:hidden}
.ledger li{display:flex;gap:.8rem;align-items:baseline;padding:.6rem .85rem;background:var(--panel);
  color:var(--muted);font-size:.88rem}
.ledger li b{flex:none;min-width:3ch;text-align:right;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}

.empty{background:var(--panel);border:1px solid var(--line2);border-radius:3px;padding:1.6rem 1.4rem;
  margin:1.8rem 0 0;text-align:center}
.empty.lv-ok{border-left:3px solid var(--ok)}
.empty h1,.empty h2{font-size:1.2rem}
.empty p{color:var(--muted);max-width:58ch;margin:.6rem auto 0}
.actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1.1rem}
.actions a{text-decoration:none;font-weight:500;font-size:.86rem;border:1px solid var(--line2);
  border-radius:2px;padding:.4rem .9rem;color:var(--ink)}
.actions a.pri{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---- footer ---------------------------------------------------------- */
.foot{border-top:1px solid var(--line2);margin-top:2rem}
.footin{max-width:var(--measure);margin:0 auto;padding:1.8rem var(--gutter) 3.2rem;
  font-size:.8rem;color:var(--muted)}
.foot p{margin:.75rem 0 0;max-width:86ch}
.foot p:first-child{margin-top:0}
.foot a{color:var(--ink)}
.fmeta{font-variant-numeric:tabular-nums}

@media (max-width:900px){
  .board{grid-template-columns:minmax(0,1fr)}
  .gauges{flex-direction:row;flex-wrap:wrap}
  .gauges .gauge{flex:1 1 45%}
}
@media (max-width:720px){
  .mastin{gap:.6rem}
  .mastnav{order:4;width:100%}
  .find{order:3;max-width:none;flex-basis:100%}
  .mastnow{order:2}
  .rmeta{flex-basis:100%;order:6}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* map lettering */
.map .cc{font-size:8.5px;font-weight:700;fill:var(--muted);letter-spacing:.06em;text-anchor:middle}
.map .dot.bad .cc{fill:var(--ink)}
.map .region{font-size:9.5px;font-weight:700;fill:var(--line2);letter-spacing:.2em;text-anchor:middle}

/* ---- the history strip -------------------------------------------------
   One bar per observation, newest at the right. Deliberately bars and not a
   line: a line implies a continuous measurement between samples, and these are
   discrete checks ten minutes apart. A slot this site did not observe is a
   faint tick, never a green bar. */
.bars{display:block;flex:0 0 auto}
.bars rect{shape-rendering:crispEdges}
.bars .b-ok{fill:var(--ok);opacity:.55}
.bars .b-maintenance{fill:var(--unknown);opacity:.5}
.bars .b-minor{fill:var(--minor)}
.bars .b-major{fill:var(--major)}
.bars .b-critical{fill:var(--critical)}
.bars .b-unknown{fill:var(--unknown);opacity:.45}
.bars .b-none{fill:var(--line2)}
.row:hover .bars .b-ok{opacity:.8}

/* ---- the snapshot ------------------------------------------------------
   Everything watched, one cell each, worst first, so anything that is not
   green sits in the top-left and the eye finds it without reading. */
.snapwrap{margin:44px 0 8px}
.snaph{margin:0 0 4px}
.snapnote{color:var(--muted);margin:0 0 14px}
.snap{list-style:none;display:grid;gap:3px;padding:0;margin:0 0 12px;
      grid-template-columns:repeat(auto-fill,minmax(14px,1fr))}
.snap .sc{position:relative;display:block;aspect-ratio:1;border-radius:2px;
      background:var(--ok);opacity:.42;cursor:pointer;
      transition:transform .08s var(--ease),opacity .08s var(--ease)}
.snap .sc.lv-minor{background:var(--minor);opacity:1}
.snap .sc.lv-major{background:var(--major);opacity:1}
.snap .sc.lv-critical{background:var(--critical);opacity:1}
.snap .sc.lv-maintenance{background:var(--unknown);opacity:.7}
.snap .sc.lv-unknown{background:transparent;border:1px solid var(--line2);opacity:1}
/* colour is never the only carrier: a cell in trouble is notched as well */
.snap .sc.notok:not(.lv-unknown)::after{content:"";position:absolute;right:1px;top:1px;
      border-width:0 3px 3px 0;border-style:solid;border-color:transparent var(--paper) transparent transparent}
/* The colour is the datum, so hover must not change it — it lifts and takes a
   ring instead. Focus gets the same treatment so the keyboard sees what the
   mouse sees. */
.snap .sc:hover,.snap .sc:focus-visible{outline:2px solid var(--ink);outline-offset:1px;
      opacity:1;transform:scale(1.35);z-index:2}
.snap .sc:focus{outline:2px solid var(--ink);outline-offset:1px}
.snap .sc:active{transform:scale(1.1)}
@media (prefers-reduced-motion:reduce){
  .snap .sc{transition:none}
  .snap .sc:hover,.snap .sc:focus-visible{transform:none}
}
/* the readout: one line that names whatever is under the pointer */
.snapread{margin:0 0 10px;color:var(--muted);min-height:1.4em;
      font-variant-numeric:tabular-nums}
.snapread.on{color:var(--ink)}

.snapkey{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted);margin:0}
.snapkey .sk{display:inline-flex;align-items:center;gap:5px;font-size:13px}
.snapkey .sk i{font-style:normal}
.snapkey .lv-ok i{color:var(--ok)} .snapkey .lv-minor i{color:var(--minor)}
.snapkey .lv-major i{color:var(--major)} .snapkey .lv-critical i{color:var(--critical)}
.snapkey .lv-unknown i,.snapkey .lv-maintenance i{color:var(--unknown)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:600px){
  .bars{width:64px}
}

/* A fingertip is not a mouse pointer. This has to come LAST: a phone matches
   both this and the narrow-screen rule above, and whichever is later wins —
   the earlier arrangement had max-width shrinking the cells straight back to
   11px. 20px with a 4px gutter is a 24px target; the mouse keeps the dense
   grid, which is the whole point of the grid. */
@media (pointer:coarse){
  .snap{grid-template-columns:repeat(auto-fill,minmax(20px,1fr));gap:4px}
  .snap .sc:hover,.snap .sc:focus-visible{transform:none}
}