/* ops-monitor mini app — control-lamp aesthetic: the top of the Status tab IS the indicator.
   One bold element (the lamp), everything else quiet. Data in mono, labels in sans. */
:root{
  --bg:#0e1116; --card:#161b22; --line:#252c36; --ink:#e6edf3; --dim:#8b949e;
  --ok:#3fb950; --ok-bg:#12261a; --warn:#d29922; --warn-bg:#2a2110; --crit:#f85149; --crit-bg:#2d1517;
  --mute:#6e7681; --mute-bg:#1c2128;
  --mono:ui-monospace,SFMono-Regular,'Cascadia Mono',Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
[data-theme="light"]{
  --bg:#f4f6f8; --card:#ffffff; --line:#dde3ea; --ink:#1c2128; --dim:#57606a;
  --ok:#1a7f37; --ok-bg:#dcf5e3; --warn:#9a6700; --warn-bg:#fbf0d3; --crit:#cf222e; --crit-bg:#ffe2e0;
  --mute:#6e7781; --mute-bg:#eaeef2;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:15px/1.45 var(--sans);
  padding-bottom:calc(64px + env(safe-area-inset-bottom));-webkit-tap-highlight-color:transparent}
.hdr{padding:14px 16px 8px;display:flex;align-items:baseline;gap:10px}
.hdr-t{font-size:17px;font-weight:750;letter-spacing:.2px}
.hdr-s{font:12px var(--mono);color:var(--dim)}

.view{padding:0 12px}

/* ── the lamp ── */
.lamp{border-radius:16px;padding:22px 18px;margin:6px 0 14px;border:1px solid var(--line)}
.lamp.ok{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.lamp.warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.lamp.crit{background:var(--crit-bg);border-color:color-mix(in srgb,var(--crit) 45%,transparent)}
.lamp.mute{background:var(--mute-bg);border-color:var(--line)}
.lamp-row{display:flex;align-items:center;gap:14px}
.lamp-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0}
.lamp.ok .lamp-dot{background:var(--ok);box-shadow:0 0 14px color-mix(in srgb,var(--ok) 60%,transparent)}
.lamp.warn .lamp-dot{background:var(--warn);box-shadow:0 0 14px color-mix(in srgb,var(--warn) 60%,transparent)}
.lamp.crit .lamp-dot{background:var(--crit);box-shadow:0 0 16px color-mix(in srgb,var(--crit) 70%,transparent)}
.lamp.mute .lamp-dot{background:var(--mute)}
@media (prefers-reduced-motion: no-preference){
  .lamp.crit .lamp-dot{animation:pulse 1.6s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.45}}
}
.lamp-verdict{font-size:19px;font-weight:750;letter-spacing:.2px}
.lamp.ok .lamp-verdict{color:var(--ok)} .lamp.warn .lamp-verdict{color:var(--warn)}
.lamp.crit .lamp-verdict{color:var(--crit)} .lamp.mute .lamp-verdict{color:var(--mute)}
.lamp-sub{font:12px var(--mono);color:var(--dim);margin-top:8px}

/* ── service cards ── */
.svc{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.svc-h{display:flex;align-items:center;gap:10px;padding:12px 14px}
.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.crit{background:var(--crit)} .dot.mute{background:var(--mute)}
.svc-nm{font-weight:650}
.svc-note{font-size:12px;color:var(--dim);margin-left:auto;text-align:right;max-width:45%}
.chk{display:flex;align-items:baseline;gap:8px;padding:7px 14px;border-top:1px solid var(--line);font-size:13px}
.chk-g{font-family:var(--mono);flex-shrink:0}
.chk-g.ok{color:var(--ok)} .chk-g.fail{color:var(--crit)} .chk-g.na{color:var(--mute)}
.chk-nm{color:var(--ink)}
.chk-d{font:11px var(--mono);color:var(--dim);margin-left:auto;text-align:right;max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── runs feed ── */
.run{display:flex;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);font-size:13px;align-items:baseline}
.run-ts{font:11px var(--mono);color:var(--dim);flex-shrink:0;width:84px}
.run-g{font-family:var(--mono);flex-shrink:0}
.run-g.ok{color:var(--ok)} .run-g.fail{color:var(--crit)}
.run-body{min-width:0}
.run-nm{font-weight:600}
.run-d{font:11px var(--mono);color:var(--dim);word-break:break-word}

/* ── incidents ── */
.inc{background:var(--card);border:1px solid var(--line);border-left-width:4px;border-radius:12px;padding:12px 14px;margin-bottom:10px}
.inc.critical{border-left-color:var(--crit)} .inc.minor{border-left-color:var(--warn)}
.inc.resolved{opacity:.55;border-left-color:var(--ok)}
.inc-top{display:flex;gap:8px;align-items:baseline}
.inc-t{font-weight:650}
.inc-sev{font:10px var(--mono);padding:2px 6px;border-radius:6px;margin-left:auto;flex-shrink:0}
.inc-sev.critical{background:var(--crit-bg);color:var(--crit)} .inc-sev.minor{background:var(--warn-bg);color:var(--warn)}
.inc-d{font:12px var(--mono);color:var(--dim);margin:6px 0;word-break:break-word}
.inc-meta{font:11px var(--mono);color:var(--dim)}
.inc-btn{display:block;width:100%;margin-top:10px;padding:9px;border:1px solid var(--line);border-radius:9px;
  background:none;color:var(--ok);font:600 13px var(--sans);cursor:pointer}
.inc-btn:active{background:var(--ok-bg)}

.box{padding:44px 16px;text-align:center;color:var(--dim)}
.box .em{display:block;font-size:30px;margin-bottom:8px}
.spin{margin:44px auto;width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--dim);
  border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.sec{font:600 12px var(--sans);color:var(--dim);text-transform:uppercase;letter-spacing:.6px;margin:16px 2px 8px}

/* ── tabs ── */
.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--card);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;padding:12px 4px;background:none;border:0;color:var(--dim);font:600 13px var(--sans);cursor:pointer}
.tab.active{color:var(--ink)}
.tab:focus-visible{outline:2px solid var(--dim);outline-offset:-2px;border-radius:8px}