/* MONITOR workspace design tokens. Shared by every dashboard route.
   Keep legacy token names so route styles and status semantics stay consistent. */
:root {
  color-scheme: light;
  --ground: #f5f7fb;
  --ground-2: #eef2f8;
  --enamel: #2563eb;
  --enamel-2: #1d4ed8;
  --enamel-ink: #f8fafc;
  --card: #ffffff;
  --card-2: #f8fafc;
  --card-edge: #dce3ed;
  --card-line: #e8edf4;
  --ink: #18243b;
  --ink-soft: #52627a;
  --ink-faint: #5e6f87;
  --rule-red: #dce3ed;
  --stamp: #c43e48;
  --stamp-deep: #aa2738;
  --brass: #2563eb;
  --paused: #946200;
  --offline: #52627a;
  --success: #167453;
  --accent-soft: #edf3ff;
  --danger-soft: #fff1f2;
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-narrow: var(--font-display);
  --font-mono: 'Fragment Mono', 'Cascadia Mono', ui-monospace, monospace;
  --shadow-card: 0 2px 6px -3px rgb(24 36 59 / 8%), 0 8px 24px -16px rgb(24 36 59 / 12%);
  --paper: none;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh; background: var(--ground); color: var(--ink);
  font: 14px/1.55 var(--font-display); -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 3px solid var(--enamel); outline-offset: 3px; border-radius: 5px; }
svg { display: block; flex-shrink: 0; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
input, select, textarea { accent-color: var(--enamel); }
::selection { background: #dbeafe; color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.card-surface { position: relative; background: var(--card); border: 1px solid var(--card-edge); border-radius: 14px; box-shadow: var(--shadow-card); }
/* Punch holes belonged to the retired paper-card theme. Keep their DOM inert. */
.punch { display: none; }
.stamp {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
  border: 1px solid #f0c8ce; border-radius: 6px; background: var(--danger-soft); color: var(--stamp-deep);
  font: 600 11.5px/1.3 var(--font-display); letter-spacing: 0;
}
.stamp.amber { color: var(--paused); border-color: #e7d39e; background: #fff8e6; }
.stamp.done { color: var(--success); border-color: #c7e7dc; background: #edf9f3; }
.stamp.slate { color: var(--offline); border-color: var(--card-edge); background: var(--card-2); }
.stamp.rot { transform: none; }
.stamp.big { font-size: clamp(14px, 2vw, 18px); padding: 8px 14px; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 5px; font-size: 11px; font-weight: 600; }
.status .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; }
.status.on { color: var(--success); background: #edf9f3; }
.status.pz { color: var(--paused); background: #fff8e6; }
.status.off { color: var(--offline); background: #edf1f7; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px;
  padding: 9px 14px; border: 1px solid; border-radius: 8px; cursor: pointer;
  background: transparent; text-decoration: none; font: 600 12px/1.4 var(--font-display);
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.btn.ghost { color: var(--ink-soft); border-color: var(--card-edge); background: var(--card); }
.btn.ghost:hover:not(:disabled) { background: var(--accent-soft); color: var(--enamel); border-color: #b6cdf8; }
.btn.primary { color: white; background: var(--enamel); border-color: var(--enamel); box-shadow: 0 2px 3px rgb(37 99 235 / 12%); }
.btn.primary:hover:not(:disabled) { background: var(--enamel-2); border-color: var(--enamel-2); }
.btn.danger:not(.ghost) { color: white; background: var(--stamp); border-color: var(--stamp); }
.btn.danger:not(.ghost):hover:not(:disabled) { background: var(--stamp-deep); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.ghost.backlink { color: var(--ink-soft); border-color: var(--card-edge); }
.btn.ghost.backlink:hover { background: var(--accent-soft); }
.top { background: var(--card); color: var(--ink); padding: 16px 28px; }
/* The country flag belongs to the language picker, including on narrow headers. */
.top .lang-select {
  appearance: none; max-width: 180px; padding: 9px 26px 9px 35px;
  --flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath fill='%23da251d' d='M0 0h30v20H0z'/%3E%3Cpath fill='%23ff0' d='m15 3 1.6 5h5.3l-4.3 3.1 1.6 5-4.2-3-4.2 3 1.6-5L8.1 8h5.3z'/%3E%3C/svg%3E");
}
.top .lang-select[data-lang='en'] { --flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath fill='%23012169' d='M0 0h30v20H0z'/%3E%3Cpath stroke='white' stroke-width='4' d='m0 0 30 20m0-20L0 20'/%3E%3Cpath stroke='%23c8102e' stroke-width='2' d='m0 0 30 20m0-20L0 20'/%3E%3Cpath stroke='white' stroke-width='6' d='M15 0v20M0 10h30'/%3E%3Cpath stroke='%23c8102e' stroke-width='3.5' d='M15 0v20M0 10h30'/%3E%3C/svg%3E"); }
.top .lang-select[data-lang='zh'] { --flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath fill='%23de2910' d='M0 0h30v20H0z'/%3E%3Cpath fill='%23ffde00' d='m6 2 1.2 3.7h4L8 8l1.2 3.8L6 9.5l-3.2 2.3L4 8 .8 5.7h4z'/%3E%3C/svg%3E"); }
.wrap { max-width: 1480px; margin: 0 auto; padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px) 60px; }
.toggle { display: inline-flex; gap: 3px; padding: 4px; border: 1px solid var(--card-edge); border-radius: 9px; background: var(--card-2); }
.toggle button { min-height: 32px; padding: 6px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft); font: 600 12px var(--font-display); cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; }
.toggle button[aria-pressed='true'] { background: var(--card); color: var(--enamel); box-shadow: 0 1px 4px rgb(24 36 59 / 12%); }
.toggle button:hover:not([aria-pressed='true']) { background: var(--card-line); }
h2 { display: flex; align-items: baseline; gap: 9px; margin-bottom: 14px; color: var(--ink); font: 600 15px var(--font-display); }
h2 .n { font: 11px var(--font-mono); padding: 3px 6px; border-radius: 5px; background: var(--ground-2); color: var(--ink-soft); }
.page-heading h1 { margin: 3px 0 8px; font-size: clamp(24px, 2.5vw, 30px); line-height: 1.25; font-weight: 700; letter-spacing: -.035em; text-wrap: balance; }
.page-heading p { max-width: 58ch; color: var(--ink-soft); font-size: 13px; text-wrap: pretty; }
.page-heading .page-eyebrow { margin-bottom: 8px; color: var(--ink-faint); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.pulse { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-faint); }
.pulse .beat { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px #edf9f3; }
.pulse.stale .beat { background: var(--paused); box-shadow: 0 0 0 3px #fff8e6; }
.pulse.dead .beat { background: var(--stamp); box-shadow: 0 0 0 3px var(--danger-soft); }
.note { padding: 32px 24px; text-align: center; }
.note p { color: var(--ink-soft); font-size: 14px; margin: 10px auto 0; max-width: 46ch; }
.note.bad { border-color: #efb8c1; }
.skel { height: 172px; border-radius: 14px; border: 1px solid var(--card-edge); background: linear-gradient(110deg, var(--card) 25%, var(--ground-2) 45%, var(--card) 65%); background-size: 250% 100%; animation: skeleton 1.6s ease-in-out infinite; }
@keyframes skeleton { to { background-position: -150% 0; } }
.legal { margin-top: 32px; font-size: 11px; color: var(--ink-faint); text-align: center; line-height: 1.7; }
@media (pointer: coarse) { .btn { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}