/* MONITOR — the approved visual world (ui-scheme.html v4), shared by every admin page:
   enamel time-clock green, manila card stock, oxblood rubber stamp.
   "The machine did the work, and it is on the record."

   Lives in one file because two pages carrying their own copy of these tokens is how
   a design system quietly splits in half. Page-specific rules stay in the page. */

:root {
  --ground:      #ddd6c4;
  --ground-2:    #d3cbb5;
  --enamel:      #33544b;
  --enamel-2:    #274038;
  --enamel-ink:  #e9e2cf;
  --card:        #ece0c6;
  --card-2:      #e6d8ba;
  --card-edge:   #cdbb92;
  --card-line:   #c3b48f;
  --ink:         #221f18;
  --ink-soft:    #625a46;
  --ink-faint:   #5f5744;
  --rule-red:    #c1897e;
  --stamp:       #a6392b;
  --stamp-deep:  #8a2c20;
  --brass:       #9a7c3c;
  --paused:      #6f4a0b;
  --offline:     #57523f;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-narrow:  'Archivo Narrow', 'Archivo', system-ui, sans-serif;
  --font-mono:    'Fragment Mono', ui-monospace, 'Cascadia Mono', monospace;

  --shadow-card: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px -14px rgba(39,34,24,.55), 0 2px 5px -3px rgba(39,34,24,.4);
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-display); color: var(--ink); min-height: 100vh;
  background: var(--paper), linear-gradient(180deg, var(--ground), var(--ground-2));
  font-size: 15px; line-height: 1.45;
}
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 4px; }
svg { display: block; }

/* ── world atoms (lifted verbatim from the approved scheme) ─────────────── */
.card-surface {
  position: relative;
  background: var(--paper), linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  border: 1px solid var(--card-edge); border-radius: 10px; box-shadow: var(--shadow-card);
}
.punch { width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #b9ab84, #9c8d63 60%, #7d704b);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.4); }

.stamp {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--stamp); border: 2px solid var(--stamp); border-radius: 6px;
  padding: 3px 8px; font-size: 11.5px; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(166,57,43,.25);
  background: rgba(166,57,43,.05); mix-blend-mode: multiply;
}
.stamp.amber   { color: var(--paused);  border-color: var(--paused);  background: rgba(125,84,14,.06); box-shadow: inset 0 0 0 1px rgba(125,84,14,.22); }
.stamp.slate   { color: var(--offline); border-color: var(--offline); background: rgba(107,101,82,.07); box-shadow: inset 0 0 0 1px rgba(87,82,63,.22); }
.stamp.rot     { transform: rotate(-4.5deg); }
.stamp.big     { font-size: clamp(14px, 2vw, 19px); padding: 7px 14px; border-width: 3px; letter-spacing: .1em; }

.status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-narrow); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; font-size: 12px; padding: 3px 9px; border-radius: 5px; }
.status .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.status.on  { color: var(--enamel);  background: rgba(51,84,75,.13); }  .status.on  .dot { background: var(--enamel); }
.status.pz  { color: var(--paused);  background: rgba(125,84,14,.13); } .status.pz  .dot { background: var(--paused); }
.status.off { color: var(--offline); background: rgba(107,101,82,.15); }.status.off .dot { background: var(--offline); }

.btn {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: 12px; border-radius: 6px; padding: 7px 11px; border: 1.5px solid; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; background: transparent; text-decoration: none;
  transition: background .14s cubic-bezier(.2,.7,.3,1), color .14s, box-shadow .14s;
}
.btn.ghost   { color: var(--enamel); border-color: var(--enamel); }
.btn.ghost:hover:not(:disabled)   { background: rgba(51,84,75,.1); }
.btn.primary { color: #fff; background: var(--stamp); border-color: var(--stamp-deep); box-shadow: 0 3px 8px -4px rgba(39,34,24,.45); }
.btn.primary:hover:not(:disabled) { background: var(--stamp-deep); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:active:not(:disabled) { box-shadow: inset 0 2px 4px rgba(39,34,24,.3); }

/* ── enamel head ──────────────────────────────────────────────────────── */
.top {
  background: linear-gradient(180deg, var(--enamel), var(--enamel-2)); color: var(--enamel-ink);
  padding: 13px clamp(14px, 3vw, 30px); display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  box-shadow: 0 6px 18px -12px rgba(20,30,26,.8);
}
.top .brand { font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; font-size: 15px; }
.top .brand a { color: inherit; }
.top .brand b { color: #e6b455; }
.top .tally { margin-left: auto; display: flex; gap: clamp(14px, 3vw, 26px); }
.top .tally div { text-align: right; }
.top .tally .n { font-family: var(--font-mono); font-size: 19px; color: #f4ecd7; line-height: 1.1; }
.top .tally .k { font-family: var(--font-narrow); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: rgba(233,226,207,.72); }
.top .tally .n.flag { color: #f0a58f; }

.wrap { max-width: 1180px; margin: 0 auto; padding: clamp(16px, 3vw, 26px) clamp(14px, 3vw, 30px) 60px; }

/* segmented switch — same control on the rack (what needs attention) and on a day
   sheet (what carries a question) */
.toggle { display: inline-flex; border: 1px solid var(--card-edge); border-radius: 7px; overflow: hidden; background: #f1e8d2; }
.toggle button {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: 12px; padding: 9px 13px; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer;
}
.toggle button[aria-pressed="true"] { background: var(--enamel); color: var(--enamel-ink); }
.toggle button + button { border-left: 1px solid var(--card-edge); }

h2 {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  font-size: 13px; color: var(--ink-faint); margin-bottom: 12px;
  display: flex; align-items: baseline; gap: 9px;
}
h2 .n { font-family: var(--font-mono); color: var(--stamp); letter-spacing: .04em; }

.pulse { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 7px; }
.pulse .beat { width: 7px; height: 7px; border-radius: 50%; background: var(--enamel); }
.pulse.stale .beat { background: var(--paused); }
.pulse.dead  .beat { background: var(--stamp); }

/* ── page-level states ────────────────────────────────────────────────── */
.note { padding: 26px 22px; text-align: center; }
.note p { color: var(--ink-soft); font-size: 14px; margin-top: 9px; max-width: 46ch; margin-inline: auto; }
.note.bad { border-color: var(--stamp); }
.skel { height: 172px; border-radius: 10px; border: 1px dashed var(--card-edge); background: rgba(236,224,198,.5); }

.legal { margin-top: 34px; font-size: 12px; color: var(--ink-faint); text-align: center; line-height: 1.6; }