/* Overwatch Monitor node: the base map fills the frame; the card is only the
   load/fallback state. Tokens are the shell's (cobalt CLAUDE_DESIGN.md §5):
   light by default, dark through data-theme from jslc:shell-context. */
:root {
  --paper: #f6f7fa; --card: #ffffff; --ink: #111a2d; --muted: #536078; --rule: #8193bc;
  --cobalt: #002eac;
  --glass: rgba(246, 247, 250, 0.74);
  --glass-solid: rgba(246, 247, 250, 0.96);
  --font: Arial, Helvetica, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #0b1324; --card: #0f1d37; --ink: #f3f6ff; --muted: #b3bfd8; --rule: #465c8f;
  --cobalt: #93b4ff;
  --glass: rgba(11, 19, 36, 0.74);
  --glass-solid: rgba(11, 19, 36, 0.96);
  color-scheme: dark;
}
* { box-sizing: border-box; touch-action: manipulation; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 12.5px/1.5 var(--font);
  min-height: 100vh;
  min-height: 100dvh;
}
body.has-map { overflow: hidden; }
#monitor-map { display: block; width: 100%; height: 100vh; height: 100dvh; border: 0; background: var(--paper); }
#monitor-map[hidden], .card[hidden] { display: none; }

/* Load and fallback state: a content-sized glass card, never a full-screen dark field. */
.card {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  max-width: 520px;
  margin: 0 auto;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
@media (prefers-reduced-transparency: reduce) {
  .card { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.eyebrow { margin: 0; color: var(--muted); font: 700 8.75px/1.2 var(--font); letter-spacing: 0.08em; text-transform: uppercase; }
.lede { margin: 4px 0 2px; font-size: 13px; font-weight: 700; }
.sub { margin: 0; color: var(--muted); font-size: 11.5px; }
.status { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.action-btn {
  min-width: 44px;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 14px;
  border: 1px solid var(--cobalt);
  border-radius: 6px;
  background: var(--cobalt);
  color: var(--paper);
  font: 700 12px/1 var(--font);
  cursor: pointer;
}
.action-btn[hidden] { display: none; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }