/* eriks.click — paper is the default edition; html[data-dark] is moon.
   Never routed on prefers-color-scheme: the reader's choice, or paper.
   Status colour NEVER carries meaning alone — every state ships a glyph and
   the word beside it. Each colour below was checked to >=4.5:1 on both grounds. */

:root{
  --bg:#fbfbfa; --panel:#f2f2ef; --line:#e4e4de; --line2:#cfcfc6;
  --ink:#12151a; --ink2:#4a525c; --ink3:#5f6874;
  --acc:#1d4ed8; --onacc:#ffffff;
  --ok:#15703f; --minor:#8a6a00; --major:#c0392b; --critical:#8e1537;
  --maintenance:#5a6470; --unknown:#5a6470;
  --okbg:#e8f4ed; --minorbg:#f7f0dc; --majorbg:#fbeae7; --criticalbg:#fae7ec; --unknownbg:#eeeff1;
  --disp:"IBM Plex Sans",ui-sans-serif,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  --body:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:min(1200px, 100% - 2.5rem);
  --shadow:0 1px 0 #ecece5, 0 6px 18px -15px rgba(18,21,26,.45);
}
html[data-dark]{
  --bg:#0d1013; --panel:#141a20; --line:#222a33; --line2:#313b47;
  --ink:#eef2f6; --ink2:#a4b0bd; --ink3:#8f9aa8;
  --acc:#7dabff; --onacc:#0d1013;
  --ok:#4ec98a; --minor:#e0b64a; --major:#ff8f6b; --critical:#ff7a9c;
  --maintenance:#8f9aa8; --unknown:#8f9aa8;
  --okbg:#10241a; --minorbg:#241f10; --majorbg:#2a1611; --criticalbg:#2a1119; --unknownbg:#1a1f25;
  --shadow:0 1px 0 #192027, 0 6px 18px -15px rgba(0,0,0,.85);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15.5px/1.6 var(--body);
  font-synthesis-weight:none;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--acc);text-underline-offset:.18em;text-decoration-thickness:from-font}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2.5px solid var(--acc);outline-offset:2px;border-radius:3px}
h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.16;letter-spacing:-.018em;margin:0;text-wrap:balance}
.mono{font-family:var(--mono)}
.sep{color:var(--ink3);padding:0 .12em}

.skip{position:absolute;left:-9999px;top:0;background:var(--acc);color:var(--onacc);
  padding:.6rem 1rem;z-index:60;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---- status token ---------------------------------------------------- */
.st{display:inline-flex;align-items:center;gap:.34rem;font-size:.74rem;font-weight:700;
  letter-spacing:.03em;text-transform:lowercase;white-space:nowrap;
  border-radius:999px;padding:.18rem .55rem;border:1px solid currentColor}
.st i{font-style:normal;font-size:.8em;line-height:1}
.st-ok{color:var(--ok);background:var(--okbg)}
.st-minor{color:var(--minor);background:var(--minorbg)}
.st-major{color:var(--major);background:var(--majorbg)}
.st-critical{color:var(--critical);background:var(--criticalbg)}
.st-maintenance,.st-unknown{color:var(--unknown);background:var(--unknownbg)}
.st.big{font-size:1rem;padding:.4rem 1rem;letter-spacing:.01em}

/* ---- masthead -------------------------------------------------------- */
.mast{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  width:var(--wrap);margin:0 auto;padding:1rem 0 .85rem;border-bottom:1px solid var(--line2)}
.wordmark{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none;
  font-family:var(--disp);font-weight:700;font-size:1.14rem;letter-spacing:-.03em}
.wordmark .mk{width:24px;height:24px;flex:none;stroke:var(--ok);fill:var(--major)}
.wordmark i{font-style:normal;color:var(--ink3)}
.mastnav{display:flex;gap:1rem;flex-wrap:wrap}
.mastnav a{color:var(--ink2);text-decoration:none;font-size:.9rem;font-weight:700;
  padding:.2rem 0;border-bottom:2px solid transparent}
.mastnav a:hover{color:var(--ink);border-bottom-color:var(--acc)}
.mastnow{margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;font-size:.84rem;color:var(--ink2)}
.mastnow b{color:var(--ink);font-variant-numeric:tabular-nums}

.pill{display:inline-flex;border:1px solid var(--line2);border-radius:999px;background:var(--panel);padding:2px;gap:2px}
.pill button{font:inherit;font-size:13px;line-height:1;cursor:pointer;border:0;border-radius:999px;
  background:transparent;color:var(--ink3);width:28px;height:24px;display:grid;place-items:center;padding:0}
.pill button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.pill button:hover{color:var(--ink)}
.nojs .pill{display:none}

/* ---- shell ----------------------------------------------------------- */
.app{width:var(--wrap);margin:0 auto;padding:1.9rem 0 3rem}
.view>h2{font-size:1.2rem;margin:2.6rem 0 .3rem}
.view>h2+.rows,.view>h2+.chips,.view>h2+.cards{margin-top:.85rem}
.lede{font-size:1.05rem;color:var(--ink2);margin:.7rem 0 0;max-width:68ch}
.lede b{color:var(--ink)}
.pnote{font-size:.92rem;color:var(--ink3);margin:.8rem 0 0;max-width:72ch}
.sub{font-size:.87rem;color:var(--ink3);margin:.35rem 0 0}
.more{margin:.9rem 0 0;font-size:.92rem}
.more a{font-weight:700}
.hero{padding:.5rem 0 .2rem}
.hero h1{font-size:clamp(2rem,5.6vw,3.1rem);line-height:1.02;max-width:16ch;letter-spacing:-.035em}

.crumbs{margin:0 0 1.1rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;font-size:.82rem;color:var(--ink3)}
.crumbs li+li::before{content:"/";padding-right:.4rem;color:var(--line2)}
.crumbs a{color:var(--ink3)}

/* ---- figures --------------------------------------------------------- */
.kpis{display:grid;gap:.65rem;margin:1.7rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
.kpi{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line2);
  border-radius:0 9px 9px 0;padding:.8rem .9rem}
.kpi span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.kpi b{display:block;font-family:var(--disp);font-weight:700;font-size:1.85rem;line-height:1.1;margin:.14rem 0 0;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.kpi i{display:block;font-style:normal;font-size:.78rem;color:var(--ink3)}
.kpi.lv-ok{border-left-color:var(--ok)} .kpi.lv-minor{border-left-color:var(--minor)}
.kpi.lv-major{border-left-color:var(--major)} .kpi.lv-unknown{border-left-color:var(--unknown)}

/* ---- status rows ----------------------------------------------------- */
.rows{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line2);
  border-radius:0 8px 8px 0;padding:.55rem .8rem}
.row[hidden]{display:none}
.row.lv-ok{border-left-color:var(--ok)}
.row.lv-minor{border-left-color:var(--minor)}
.row.lv-major{border-left-color:var(--major)}
.row.lv-critical{border-left-color:var(--critical)}
.row.lv-unknown,.row.lv-maintenance{border-left-color:var(--unknown)}
.rname{font-weight:700;color:var(--ink);text-decoration:none;min-width:11ch}
a.rname:hover{color:var(--acc);text-decoration:underline}
.rmeta{font-size:.83rem;color:var(--ink3);flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prov{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);
  border:1px solid var(--line2);border-radius:999px;padding:.14rem .45rem;margin-left:auto;flex:none}
.grouphead{margin:1.7rem 0 .2rem;padding:0;background:none;border:0}
.grouphead h2{font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);
  display:flex;align-items:baseline;gap:.5rem}
.grouphead h2 span{font-family:var(--mono);font-size:.9em;color:var(--line2)}
.rows.plain .row{border-left-color:var(--line2)}

.spark{flex:none;color:var(--ink3);opacity:.85}
.row.lv-ok .spark{color:var(--ok)} .row.lv-minor .spark{color:var(--minor)}
.row.lv-major .spark{color:var(--major)} .row.lv-critical .spark{color:var(--critical)}
.bigspark{margin:1rem 0 0;padding:1rem;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.bigspark svg{width:100%;height:auto;color:var(--ok)}
.bigspark.lv-minor svg{color:var(--minor)} .bigspark.lv-major svg{color:var(--major)}
.bigspark.lv-critical svg{color:var(--critical)}

.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.9rem 0 0}
.chip{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;border:1px solid var(--line2);
  border-radius:999px;padding:.34rem .75rem;color:var(--ink);background:var(--panel);font-size:.86rem;font-weight:700}
.chip i{font-style:normal;font-size:.8em;color:var(--ink3)}
.chip span{font-family:var(--mono);font-size:.78rem;color:var(--ink3);font-variant-numeric:tabular-nums}
.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(--acc);color:var(--acc)}

.filters{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.1rem 0 0}
.tg{font:inherit;font-size:.84rem;font-weight:700;cursor:pointer;border:1px solid var(--line2);
  border-radius:999px;padding:.32rem .8rem;background:var(--panel);color:var(--ink2)}
.tg:hover{color:var(--ink);border-color:var(--ink3)}
.tg.is-on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.nojs .filters{display:none}

/* ---- 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(330px,100%),1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:.8rem .9rem}
.card h3{font-size:.98rem;line-height:1.35;font-weight:700}
.cmeta{margin:.35rem 0 0;font-size:.82rem;color:var(--ink3)}
.cline{margin:.45rem 0 0;font-size:.85rem}
.note{margin:1.6rem 0 0;padding:.9rem 1.1rem;background:var(--panel);border:1px dashed var(--line2);border-radius:9px}
.note p{margin:0;color:var(--ink2);font-size:.92rem}

.prose{max-width:74ch}
.prose p{color:var(--ink2);margin:.85rem 0 0}
.prose h2{font-size:1.18rem;margin:2.3rem 0 0}
.prose b{color:var(--ink)}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--panel);border:1px solid var(--line);
  border-radius:5px;padding:.08em .34em}
.prose .kpis{max-width:none}

.empty{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line2);
  border-radius:0 10px 10px 0;padding:1.5rem 1.3rem;margin:1.8rem 0 0;text-align:center}
.empty.lv-ok{border-left-color:var(--ok)}
.empty h1,.empty h2{font-size:1.3rem}
.empty p{color:var(--ink2);max-width:58ch;margin:.6rem auto 0}
.actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.actions a{text-decoration:none;font-weight:700;font-size:.9rem;border:1px solid var(--line2);
  border-radius:999px;padding:.4rem .95rem;color:var(--ink)}
.actions a.pri{background:var(--acc);border-color:var(--acc);color:var(--onacc)}

/* ---- footer ---------------------------------------------------------- */
.foot{width:var(--wrap);margin:0 auto;padding:1.6rem 0 3rem;border-top:1px solid var(--line2);
  font-size:.83rem;color:var(--ink3)}
.foot p{margin:.7rem 0 0;max-width:82ch}
.foot p:first-child{margin-top:0}
.foot a{color:var(--ink2)}
.fmeta{font-variant-numeric:tabular-nums}

@media (max-width:720px){
  :root{--wrap:min(1200px, 100% - 1.6rem)}
  .mastnav{order:3;width:100%;gap:.85rem}
  .mastnow{order:2}
  .app{padding-top:1.4rem}
  .rmeta{flex-basis:100%;order:5}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}