/* ═══════════════════════════════════════════════════════════════════════════
   Opsview — visual language

   Three rules do the work:

   1. Six states get six treatments. BLOCKED must not read as broken, because
      it is somebody else's problem and paging on it is how four teams get
      woken for one failure.
   2. A PROPOSAL never looks like a FACT. Facts are plain. Anything the
      assistant wrote sits inside a marked block with its citations visible.
   3. The state colours are not part of the theme. The colourway switcher
      repaints the ambient field and the call-to-action and nothing else —
      failed, missing, blocked, late, warning and ok carry meaning, not mood,
      and a reader who learns them on Monday must not have to relearn them
      when someone changes the wallpaper on Tuesday.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* ── ambient field · themed ─────────────────────────────────────────── */
  --ground: linear-gradient(150deg, #e4e8f2 0%, #eceef4 45%, #eef1f0 100%);
  --c1: rgba(124,140,224,.55); --c2: rgba(180,140,230,.34);
  --c3: rgba(110,175,215,.45); --c4: rgba(120,205,190,.40);
  --cta: #4d5ec9; --cta-ink: #fff;

  /* ── surfaces · fixed ───────────────────────────────────────────────── */
  --page: #e9ebed;
  --glass: rgba(255,255,255,.52);
  --glass-2: rgba(255,255,255,.66);
  --glass-hi: rgba(255,255,255,.82);
  --edge: rgba(255,255,255,.72);
  --hair: rgba(20,30,40,.075);
  --hair-2: rgba(20,30,40,.05);

  /* ── ink ────────────────────────────────────────────────────────────── */
  --ink: #1a1d21; --dim: #5c6670; --dim2: #8a949e; --faint: #b3bcc4;

  /* ── the six states · NEVER themed ──────────────────────────────────── */
  --fail:  #c8352a; --fail-bg:  rgba(200,53,42,.12);
  --miss:  #7a41b8; --miss-bg:  rgba(122,65,184,.12);
  --block: #6f7c88; --block-bg: rgba(111,124,136,.14);
  --late:  #a8790d; --late-bg:  rgba(168,121,13,.14);
  --warn:  #96690b; --warn-bg:  rgba(150,105,11,.13);
  --ok:    #2f7d43; --ok-bg:    rgba(47,125,67,.13);
  --pend:  #8a949e; --pend-bg:  rgba(138,148,158,.11);
  --info:  #2f5fbf; --info-bg:  rgba(47,95,191,.11);

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --head: Outfit, Inter, -apple-system, "Segoe UI", sans-serif;
}

/* Colourways. Only these six properties move. */
[data-theme="slate"] {
  --ground: linear-gradient(150deg,#e6eaee 0%,#eef1f3 50%,#eceff1 100%);
  --c1: rgba(90,113,131,.34); --c2: rgba(120,150,175,.26);
  --c3: rgba(70,140,175,.34); --c4: rgba(150,170,185,.30);
  --cta: #1f3247; --cta-ink: #fff;
}
[data-theme="mint"] {
  --ground: linear-gradient(150deg,#e2eeea 0%,#edf1ef 45%,#eef2ec 100%);
  --c1: rgba(63,174,143,.48); --c2: rgba(120,200,160,.32);
  --c3: rgba(100,165,205,.38); --c4: rgba(200,215,140,.34);
  --cta: #17795f; --cta-ink: #fff;
}
[data-theme="ember"] {
  --ground: linear-gradient(150deg,#dfe6ec 0%,#eef0ef 45%,#f2efe4 100%);
  --c1: rgba(250,196,60,.72); --c2: rgba(255,150,60,.34);
  --c3: rgba(120,160,210,.45); --c4: rgba(150,200,110,.42);
  --cta: #b57f00; --cta-ink: #fff;
}

* { box-sizing: border-box; }
body { margin:0; background:var(--page); color:var(--ink);
       font:14px/1.55 var(--sans); min-height:100vh; }
table, .num, .mono, .honesty b, .kpi .v { font-variant-numeric: tabular-nums; }
a { color:var(--info); text-decoration:none; }
a:hover { text-decoration:underline; }
h1 { font-family:var(--head); font-size:30px; font-weight:400; letter-spacing:-.6px; margin:0; }
h2 { font-family:var(--head); font-size:19px; font-weight:500; margin:26px 0 10px; }
h3 { font-family:var(--head); font-size:17px; font-weight:500; margin:0; }

/* ─── the blurred ground ────────────────────────────────────────────────── */
.blobs { position:fixed; inset:0; z-index:-1; overflow:hidden; background:var(--ground); }
.blobs i { position:absolute; border-radius:50%; filter:blur(90px); display:block; }
.blobs .b1 { width:44vw; height:46vh; left:36%; top:-6%;      background:var(--c1); }
.blobs .b2 { width:30vw; height:34vh; left:24%; top:34%;      background:var(--c2); }
.blobs .b3 { width:40vw; height:38vh; left:-6%; top:-10%;     background:var(--c3); }
.blobs .b4 { width:37vw; height:32vh; left:30%; bottom:-14%;  background:var(--c4); }

/* ─── shell ─────────────────────────────────────────────────────────────── */
.topbar { display:flex; align-items:center; gap:18px; padding:20px 30px 0; }
.logo { font-family:var(--head); font-size:20px; font-weight:500;
        display:flex; align-items:center; gap:9px; color:var(--ink); }
.logo:hover { text-decoration:none; }
.logo i { width:18px; height:18px; border-radius:6px; background:var(--ink);
          box-shadow:inset 0 0 0 3px #fff; display:block; }
nav { display:flex; gap:6px; margin:0 auto; }
nav a { display:flex; align-items:center; gap:7px; height:37px; padding:0 16px;
        border-radius:19px; background:var(--glass); border:1px solid var(--edge);
        font-size:13.5px; color:var(--dim); backdrop-filter:blur(12px); white-space:nowrap; }
nav a:hover { background:var(--glass-hi); color:var(--ink); text-decoration:none; }
nav a.on { background:#fff; color:var(--ink); font-weight:500;
           box-shadow:0 2px 10px rgba(20,30,40,.08); }
nav a b { font-family:var(--mono); font-size:10.5px; font-weight:500; color:var(--dim2); }
nav a.on b { color:var(--ink); }
.topright { display:flex; align-items:center; gap:9px; }

/* colourway switcher */
.sw { display:flex; gap:5px; padding:5px 9px; border-radius:19px;
      background:var(--glass); border:1px solid var(--edge); backdrop-filter:blur(12px); }
.sw button { width:19px; height:19px; border-radius:50%; border:0; cursor:pointer; padding:0;
             box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.sw button[aria-pressed="true"] { box-shadow:0 0 0 2px var(--ink); }

/* the honesty strip. On every page, never collapsed. A dashboard that cannot
   report its own coverage is worse than no dashboard. */
.honesty { display:flex; align-items:center; border-radius:19px; overflow:hidden;
           background:var(--glass); border:1px solid var(--edge); backdrop-filter:blur(12px); }
.honesty:hover { text-decoration:none; background:var(--glass-hi); }
.honesty div { padding:4px 14px; text-align:right; border-left:1px solid var(--hair); }
.honesty div:first-child { border-left:0; }
.honesty b { display:block; font-family:var(--mono); font-size:12.5px; font-weight:500;
             line-height:1.25; color:var(--ink); }
.honesty small { font-size:8.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--dim2); }
.honesty .bad b { color:var(--fail); }

/* ─── greeting ──────────────────────────────────────────────────────────── */
.hello { display:flex; align-items:flex-start; gap:24px; padding:22px 30px 0; }
.hello h1 { font-size:40px; }
.hello p { margin:6px 0 0; font-size:14px; color:var(--dim); max-width:760px; }
.acts { margin-left:auto; display:flex; align-items:center; gap:9px; padding-top:5px;
        flex-wrap:wrap; justify-content:flex-end; }
.pill { display:flex; align-items:center; gap:8px; height:40px; padding:0 18px;
        border-radius:20px; background:var(--glass); border:1px solid var(--edge);
        font-size:13.5px; color:var(--ink); backdrop-filter:blur(12px); white-space:nowrap; }
.pill:hover { background:var(--glass-hi); text-decoration:none; }
.pill i { font-style:normal; font-size:13px; color:var(--dim2); }
.pill.cta { background:var(--cta); border-color:var(--cta); color:var(--cta-ink); font-weight:500; }
.pill.cta i { color:var(--cta-ink); opacity:.65; }
.pill.cta:hover { filter:brightness(1.08); }

/* ─── layout ────────────────────────────────────────────────────────────── */
.wrap { padding:18px 30px 30px; max-width:1900px; margin:0 auto; }
.wrap.narrow { max-width:1080px; }
.grid { display:grid; gap:16px; }
.g-2 { grid-template-columns: 520px minmax(0,1fr); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-main { grid-template-columns: minmax(0,1fr) 470px; }
.sub { color:var(--dim); font-size:13px; margin:6px 0 16px; }

.card { background:var(--glass); border:1px solid var(--edge); border-radius:20px;
        backdrop-filter:blur(18px); box-shadow:0 2px 18px rgba(30,40,50,.06);
        overflow:hidden; display:flex; flex-direction:column; min-width:0; }
.card > .ch { display:flex; align-items:center; gap:10px; padding:15px 20px 0; }
.card > .ch .cc { margin-left:auto; display:flex; align-items:center; gap:8px; }
.card > .cb { padding:14px 20px 18px; min-width:0; }
.card > .cb.pad0 { padding:0 0 4px; }
.card > .cf { margin-top:auto; padding:12px 20px 16px; }

/* ─── the six states ────────────────────────────────────────────────────── */
.st { display:inline-block; padding:2px 9px; border-radius:11px; font-size:10.5px;
      font-weight:600; letter-spacing:.5px; font-family:var(--mono); white-space:nowrap; }
.st-FAILED  { background:var(--fail-bg);  color:var(--fail); }
.st-MISSING { background:var(--miss-bg);  color:var(--miss); }
/* BLOCKED reads as WAITING, not as broken. Deliberately the quietest of the
   non-OK states — it is not this team's problem and must not pull the eye. */
.st-BLOCKED { background:var(--block-bg); color:var(--block); font-weight:500; }
.st-LATE    { background:var(--late-bg);  color:var(--late); }
.st-WARNING { background:var(--warn-bg);  color:var(--warn); }
.st-OK      { background:var(--ok-bg);    color:var(--ok); font-weight:500; }
.st-PENDING, .st-NO, .st-NO\.SIGNAL { background:var(--pend-bg); color:var(--pend); font-weight:500; }
.st-BUSINESS, .st-ALERT { background:var(--fail-bg); color:var(--fail); }
.st-OPERATIONAL { background:var(--late-bg); color:var(--late); }
.st-MONITOR { background:var(--warn-bg); color:var(--warn); }
.st-INFORMATIONAL, .st-INFO { background:var(--info-bg); color:var(--info); }

.crit { display:inline-block; min-width:18px; text-align:center; border-radius:6px;
        font-family:var(--mono); font-size:10.5px; font-weight:600; padding:1px 0; }
.crit-1 { background:var(--fail-bg); color:var(--fail); }
.crit-2 { background:var(--warn-bg); color:var(--warn); }
.crit-3, .crit-4 { background:var(--block-bg); color:var(--block); }

/* ─── tables ────────────────────────────────────────────────────────────── */
.tblwrap { background:var(--glass-2); border-radius:14px; overflow:auto; margin:0 14px 14px; }
.card > .cb.pad0 .tblwrap { margin:0 14px 10px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; font-weight:500; color:var(--dim2); font-size:11.5px;
     padding:10px 14px; border-bottom:1px solid var(--hair); white-space:nowrap;
     position:sticky; top:0; background:rgba(252,252,253,.94); backdrop-filter:blur(6px); z-index:2; }
th[data-sort] { cursor:pointer; user-select:none; }
th[data-sort]:hover { color:var(--ink); }
th[aria-sort]::after { content:" ▲"; font-size:8px; color:var(--cta); }
th[aria-sort="descending"]::after { content:" ▼"; }
td { padding:9px 14px; border-bottom:1px solid var(--hair-2); vertical-align:top; }
tr:last-child td { border-bottom:0; }
tbody tr[data-href] { cursor:pointer; }
tbody tr:hover { background:rgba(255,255,255,.62); }
tbody tr.on { background:rgba(255,255,255,.85); box-shadow:inset 3px 0 0 var(--cta); }
.mono { font-family:var(--mono); font-size:12px; }
.num { text-align:right; font-family:var(--mono); font-size:12px; }
.dim { color:var(--dim2); }
.nowrap { white-space:nowrap; }
.r { text-align:right; }

/* ─── KPI cards ─────────────────────────────────────────────────────────── */
.kpi { background:var(--glass); border:1px solid var(--edge); border-radius:20px;
       padding:15px 20px 14px; backdrop-filter:blur(18px);
       box-shadow:0 2px 18px rgba(30,40,50,.06); display:block; color:inherit; }
.kpi:hover { background:var(--glass-hi); text-decoration:none; }
.kpi .k1 { display:flex; align-items:center; font-size:13.5px; color:var(--dim); }
.kpi .k1 span { margin-left:auto; color:var(--faint); }
.kpi .k2 { display:flex; align-items:baseline; gap:10px; margin-top:8px; }
.kpi .v { font-family:var(--head); font-size:33px; font-weight:500; letter-spacing:-1px;
          line-height:1; color:var(--ink); }
.kpi .u { font-size:14px; color:var(--dim2); }
.kpi .k3 { font-size:11.5px; color:var(--dim2); margin-top:5px; }
.kpi svg { display:block; margin-top:10px; width:100%; height:32px; }

/* ─── run-history sparkline & chart ─────────────────────────────────────── */
.spark { display:block; height:18px; }
.spark rect, .hist rect { shape-rendering:crispEdges; }
.hist { display:block; width:100%; }
.hist .ref { stroke:var(--faint); stroke-dasharray:3 3; }
.hist text { font-family:var(--mono); font-size:9px; fill:var(--dim2); }
.heat { display:flex; gap:2px; }
.heat span { width:9px; height:16px; border-radius:2px; display:block; background:rgba(0,0,0,.07); }
.heat span[data-s="OK"] { background:var(--ok); opacity:.45; }
.heat span[data-s="FAILED"] { background:var(--fail); }
.heat span[data-s="MISSING"] { background:var(--miss); }
.heat span[data-s="LATE"], .heat span[data-s="WARNING"] { background:var(--late); }

.stat4 { display:flex; gap:24px; margin-top:12px; }
.stat4 div b { display:block; font-family:var(--mono); font-size:18px; font-weight:500;
               line-height:1.2; }
.stat4 div small { font-size:9px; letter-spacing:1.1px; color:var(--dim2); text-transform:uppercase; }

/* ─── gauge ─────────────────────────────────────────────────────────────── */
.gauge { position:relative; margin:0 auto; width:290px; }
.gauge svg { display:block; }
.gtxt { position:absolute; inset:auto 0 6px; text-align:center; }
.gtxt span { display:block; font-size:12.5px; color:var(--dim); }
.gtxt b { font-family:var(--head); font-size:38px; font-weight:500; letter-spacing:-1px; }

/* ─── triage checklist ──────────────────────────────────────────────────── */
.bar { height:7px; border-radius:4px; background:var(--glass-hi); overflow:hidden; margin:14px 0 6px; }
.bar span { display:block; height:100%; background:var(--ok); border-radius:4px; }
.chk { display:flex; align-items:center; gap:11px; padding:7px 0; font-size:13.5px;
       border-bottom:1px solid var(--hair-2); color:inherit; }
.chk:last-child { border-bottom:0; }
.chk:hover { text-decoration:none; }
.chk:hover .lbl { color:var(--cta); }
.chk .box { width:17px; height:17px; border-radius:50%; border:1.5px solid var(--faint);
            flex:0 0 auto; display:flex; align-items:center; justify-content:center;
            font-size:10px; color:#fff; }
.chk.done .box { background:var(--ok); border-color:var(--ok); }
.chk.done .lbl { text-decoration:line-through; color:var(--dim2); }
.chk .st { margin-left:auto; }

/* ─── links list ────────────────────────────────────────────────────────── */
.lnk { display:flex; align-items:center; gap:9px; padding:5px 0; font-size:13px;
       color:var(--dim); }
.lnk:hover { color:var(--cta); text-decoration:none; }
.lnk i { font-style:normal; font-family:var(--mono); font-size:10px; color:var(--dim2);
         border:1px solid var(--faint); border-radius:4px; padding:0 4px; }
.lnk b { margin-left:auto; font-family:var(--mono); font-size:11.5px; font-weight:500; }

/* ─── narrative: PROPOSALS never look like FACTS ────────────────────────── */
.narr { border-left:3px solid var(--info); background:rgba(47,95,191,.055);
        padding:11px 14px; margin:10px 0; border-radius:0 10px 10px 0; }
.narr .tag { font-size:9px; text-transform:uppercase; letter-spacing:1.1px;
             color:var(--info); font-weight:600; margin-bottom:4px; display:block; }
/* a stated cause is a PROPOSAL. It gets a hatched edge and says so. */
.narr.proposal { border-left:3px dashed var(--late); background:rgba(168,121,13,.05); }
.narr.proposal .tag { color:var(--late); }
.narr b { color:var(--ink); font-weight:500; }
.evidence-only { border-left:3px solid var(--dim2); background:var(--glass-2);
                 padding:11px 14px; font-size:12.5px; color:var(--dim);
                 border-radius:0 10px 10px 0; }

/* citation chips — every derived sentence carries them, all clickable */
.cite { display:inline-block; font-family:var(--mono); font-size:9.5px; font-weight:600;
        background:var(--info-bg); color:var(--info); border-radius:5px; padding:0 5px;
        margin:0 1px; vertical-align:1px; border:1px solid rgba(47,95,191,.2); }
.cite:hover { background:var(--info); color:#fff; text-decoration:none; }

/* ─── incident blocks in the digest ─────────────────────────────────────── */
.inc { background:var(--glass-2); border-radius:14px; padding:14px 18px; margin-bottom:11px; }
.inc.on { background:#fff; box-shadow:inset 3px 0 0 var(--cta); }
.item { display:block; color:inherit; padding:12px 18px; border-bottom:1px solid var(--hair-2); }
.item:last-child { border-bottom:0; }
.item:hover { background:rgba(255,255,255,.62); text-decoration:none; }
.item.on { background:rgba(255,255,255,.86); box-shadow:inset 3px 0 0 var(--cta); }
.item .h { display:flex; align-items:center; gap:9px; }
.item .nm { font-size:14px; }
.item .sn { font-size:12.5px; color:var(--dim); margin-top:4px; line-height:1.45; }

/* ─── section labels inside cards ───────────────────────────────────────── */
.dsec { font-family:var(--mono); font-size:9.5px; letter-spacing:1.5px; color:var(--dim2);
        margin:18px 0 9px; display:flex; align-items:center; gap:10px; }
.dsec::after { content:""; flex:1; height:1px; background:var(--hair); }
.dsec .cc { display:flex; gap:7px; }
.kv { display:flex; justify-content:space-between; gap:16px; font-size:13px;
      padding:6px 0; border-bottom:1px solid var(--hair-2); }
.kv > span:first-child { color:var(--dim); }
.kv b { font-family:var(--mono); font-size:12px; font-weight:500; }
.err { border-left:3px solid var(--fail); background:var(--fail-bg); padding:11px 14px;
       border-radius:0 10px 10px 0; }
.err .code { font-family:var(--mono); font-size:13.5px; font-weight:500; color:var(--fail); }
.err .txt { font-size:12.5px; color:var(--dim); margin-top:5px; line-height:1.45; }

/* ─── controls ──────────────────────────────────────────────────────────── */
.filterbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
input[type=text], input[type=search], select, .ctl {
  background:rgba(255,255,255,.72); border:1px solid var(--edge); border-radius:10px;
  color:var(--ink); font-family:inherit; font-size:13px; padding:7px 11px; outline:none; }
input:focus, select:focus { border-color:var(--cta); box-shadow:0 0 0 3px rgba(77,94,201,.13); }
.btn { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px;
       border-radius:17px; background:rgba(255,255,255,.7); border:1px solid var(--edge);
       font-size:13px; color:var(--ink); cursor:pointer; font-family:inherit; }
.btn:hover { background:#fff; text-decoration:none; }
.btn.prim { background:var(--cta); border-color:var(--cta); color:var(--cta-ink); }
.btn.prim:hover { filter:brightness(1.08); }
.btn.on { background:#fff; border-color:var(--cta); color:var(--cta); }
.seg { display:flex; border:1px solid var(--edge); border-radius:16px; overflow:hidden;
       background:rgba(255,255,255,.6); }
.seg a, .seg button { padding:5px 12px; font-family:var(--mono); font-size:10px;
       letter-spacing:.8px; color:var(--dim); background:transparent; border:0; cursor:pointer; }
.seg a.on, .seg button.on { background:#fff; color:var(--cta); }
.seg a:hover { text-decoration:none; color:var(--ink); }
form.inline { display:inline-flex; gap:7px; align-items:center; flex-wrap:wrap; }

.empty { padding:26px 20px; color:var(--dim2); font-size:13px; }
.foot { display:flex; align-items:center; gap:11px; background:var(--glass-2);
        border-radius:12px; padding:11px 15px; font-size:13px; color:var(--dim); }
.foot b { margin-left:auto; color:var(--ink); font-weight:500; }
.wi { width:20px; height:20px; border-radius:6px; background:var(--late-bg); color:var(--late);
      display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
      flex:0 0 auto; }

/* ─── night chart / timeline SVG ────────────────────────────────────────── */
svg.timeline, svg.night { display:block; width:100%; }
svg.night .grid, svg.timeline .grid { stroke:var(--hair); }
svg.night text, svg.timeline text { font-family:var(--mono); font-size:10px; fill:var(--dim2); }
.readout { font-size:12.5px; color:var(--dim); min-height:18px; margin-top:6px; }
.readout b { color:var(--ink); font-weight:500; }

@media (max-width: 1500px) {
  .g-2 { grid-template-columns: 1fr; }
  .g-main { grid-template-columns: 1fr; }
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGES NOT REBUILT FOR THE GLASS THEME

   Incident, entity, suppression, health and timeline keep the markup they had.
   They are dense reference pages that were already right; rewriting them to
   change nothing but the paint would risk the detail for no gain. These rules
   map the old structural classes onto the new surfaces so those pages inherit
   the theme instead of sitting on a white rectangle inside it.
   ═══════════════════════════════════════════════════════════════════════════ */

.panel { background:var(--glass); border:1px solid var(--edge); border-radius:18px;
         backdrop-filter:blur(18px); box-shadow:0 2px 18px rgba(30,40,50,.06);
         overflow:hidden; margin-bottom:16px; }
.panel > h3 { margin:0; padding:13px 20px; font-family:var(--head); font-size:15px;
              font-weight:500; border-bottom:1px solid var(--hair); }
.panel .pad, .pad { padding:16px 20px; }
.panel table { margin:0; }
.panel table th:first-child, .panel table td:first-child { padding-left:20px; }
.panel table th:last-child,  .panel table td:last-child  { padding-right:20px; }
.panel table th { background:rgba(252,252,253,.9); }

/* the counter strip on the runs view */
.tally { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.tally div { background:var(--glass); border:1px solid var(--edge); border-radius:16px;
             padding:11px 18px; min-width:104px; backdrop-filter:blur(18px);
             box-shadow:0 2px 18px rgba(30,40,50,.06); }
.tally b { display:block; font-family:var(--head); font-size:24px; font-weight:500;
           line-height:1.1; }
.tally small { color:var(--dim2); font-size:9.5px; text-transform:uppercase; letter-spacing:1.1px; }

.scroll { overflow:auto; }
.lg { font-size:16px; }
.tag { display:inline-block; font-family:var(--mono); font-size:9.5px; font-weight:600;
       letter-spacing:.6px; padding:2px 8px; border-radius:10px;
       background:var(--block-bg); color:var(--block); }
.warn { color:var(--late); }
.bad { color:var(--fail); }
.good { color:var(--ok); }

/* raised/held-back callouts on the digest and suppression pages */
.raised, .held { background:var(--late-bg); border-radius:12px; padding:11px 15px;
                 font-size:12.5px; color:var(--late); margin-bottom:12px; }

/* the read-only banner. Shown to viewers on any page carrying an action, so
   the absence of a button is explained rather than mysterious. */
.readonly { display:flex; align-items:center; gap:10px; background:var(--glass-2);
            border:1px dashed var(--faint); border-radius:12px; padding:11px 15px;
            font-size:12.5px; color:var(--dim); margin:10px 0; }
.readonly b { color:var(--ink); font-weight:500; }

/* An incident ordinal broken across two lines reads as two ids. */
td .mono, .item .mono, a.mono { white-space:nowrap; }
.tblwrap td:first-child { white-space:nowrap; }

/* ─── inline badges ─────────────────────────────────────────────────────────
   Small status words inside tables. Distinct from .pill, which is the 40px
   navigation control — the two were one class before the theme change and a
   "13" in the Blocks column rendered as a button.
   ─────────────────────────────────────────────────────────────────────────── */
.badge { display:inline-block; font-family:var(--mono); font-size:10px; font-weight:600;
         letter-spacing:.4px; padding:2px 8px; border-radius:10px; white-space:nowrap;
         background:var(--block-bg); color:var(--block); }
.badge.bad  { background:var(--fail-bg); color:var(--fail); }
.badge.warn { background:var(--late-bg); color:var(--late); }
.badge.good { background:var(--ok-bg);   color:var(--ok); }

/* rows carry a state rule on the left, as the tables did before */
tr.row-FAILED  td:first-child { box-shadow:inset 3px 0 0 var(--fail); }
tr.row-MISSING td:first-child { box-shadow:inset 3px 0 0 var(--miss); }
tr.row-BLOCKED td:first-child { box-shadow:inset 3px 0 0 var(--block); }
tr.row-WARNING td:first-child { box-shadow:inset 3px 0 0 var(--late); }