/* RUDX Edge — shared console styling.
   Loaded by every page so the design tokens and the controls that appear on
   more than one screen (buttons, tags, storage bar, cards, header) cannot
   drift apart. Page-specific layout stays inline in each page. */

:root {
  --bg:#0a0c10; --panel:#12151c; --panel2:#171b24; --line:#232833;
  --text:#e8ebf1; --dim:#8a93a6; --faint:#5c657a;
  --ok:#3fb950; --notice:#e3b341; --alert:#f85149; --brand:#1183f0;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
* { box-sizing:border-box; }
/* The `hidden` attribute only works because the UA sheet sets display:none, and
   any component that sets its own `display` silently defeats it — a pill or
   button marked hidden stays on screen. Everything here is display-styled, so
   make the attribute win outright rather than remembering it per component. */
[hidden] { display:none !important; }
html,body { height:100%; overflow:hidden; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }

/* ------------------------------------------------------------------ header */
header {
  display:flex; align-items:center; gap:16px; padding:0 18px; height:56px;
  background:var(--panel); border-bottom:1px solid var(--line);
}
header img { height:19px; display:block; }
header .site { color:var(--dim); font-size:13px; }
header .site b { color:var(--text); font-weight:600; }
header .spacer { flex:1; }

.pill {
  display:inline-flex; align-items:center; gap:6px;
  font:12px/1 var(--mono); padding:6px 10px; border-radius:99px;
  background:#1a1f29; color:var(--dim); border:1px solid var(--line);
}
.dot { width:7px; height:7px; border-radius:99px; background:var(--dim); }
.pill.live { color:var(--ok); border-color:#1c3b26; }
.pill.live .dot { background:var(--ok); animation:pulse 2s ease-in-out infinite; }
.pill.down { color:var(--alert); border-color:#40201f; }
.pill.down .dot { background:var(--alert); }
.pill.rec { color:var(--alert); border-color:#5a2320; background:#2a1413; }
.pill.rec .dot { background:var(--alert); animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* Navigating between the live view and the library is a first-class action,
   so it looks like a control rather than a link buried in the text. */
a.nav {
  display:inline-flex; align-items:center; gap:7px; font-size:13px;
  padding:7px 12px; border-radius:8px; border:1px solid var(--line);
  background:var(--panel2); color:var(--dim);
}
a.nav:hover { border-color:#333c4c; color:var(--text); }

/* ------------------------------------------------------------------- cards */
/* Every panel is a fixed box with its own scroll. Cards that grow and shrink
   as detections come and go make the whole sidebar jump on every frame. */
.card { display:flex; flex-direction:column; min-height:0;
        background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.card > .scroll { overflow-y:auto; flex:1; min-height:0; }
.card > h2 {
  margin:0; padding:12px 16px; font-size:11px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--dim);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px;
}
.card > h2 .count {
  margin-left:auto; font:11px/1 var(--mono); color:var(--faint);
  background:#1a1f29; padding:3px 7px; border-radius:20px;
}

/* ----------------------------------------------------------------- buttons */
.btn {
  font:inherit; font-size:13px; font-weight:500; padding:8px 12px;
  border-radius:8px; border:1px solid var(--line); background:var(--panel2);
  color:var(--text); cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap:7px; white-space:nowrap;
}
.btn:hover:not(:disabled) { border-color:#333c4c; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.ghost { background:transparent; color:var(--dim); }
.btn.rec-on { background:#3d1614; border-color:#6d2420; color:#ff8b82; }
.btn.rec-on .dot { background:var(--alert); animation:pulse 1.2s ease-in-out infinite; }
.btn .dot { width:9px; height:9px; border-radius:99px; background:var(--alert); }
.btn.warn { background:#3a2a0d; border-color:#6b5015; color:var(--notice); }
.btn.danger { background:#3d1614; border-color:#6d2420; color:#ff8b82; }
.btn.small { font-size:12px; padding:6px 10px; }

/* ----------------------------------------------------------------- storage */
/* Readable at a glance from across the room, because the failure it warns
   about — footage being overwritten — is irreversible. */
.bar { height:6px; border-radius:99px; background:#1c2230; overflow:hidden; }
.bar i { display:block; height:100%; width:0;
         background:var(--brand); transition:width .4s ease; }
.bar.warn i { background:var(--notice); }
.bar.full i { background:var(--alert); }
.storline { display:flex; justify-content:space-between;
            font:11px/1 var(--mono); color:var(--dim); }
.storline b { color:var(--text); font-weight:500; }
.warnline { font-size:12px; color:var(--notice); line-height:1.45; }
.warnline.hot { color:var(--alert); }

/* -------------------------------------------------------------------- tags */
/* Tag chips are the picker before recording and the filter in the library, so
   selection has to read identically in both places. */
.tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag {
  font:12px/1 var(--mono); padding:5px 8px; border-radius:99px; cursor:pointer;
  background:var(--panel2); border:1px solid var(--line); color:var(--dim);
  user-select:none; white-space:nowrap;
}
.tag:hover { border-color:#333c4c; color:var(--text); }
.tag.on { background:rgba(17,131,240,.16); border-color:#1c4d80; color:#6fbaff; }
.tag.flat { cursor:default; }
.tag.flat:hover { border-color:var(--line); color:var(--dim); }
.tag .n { color:var(--faint); margin-left:4px; }
input.tagin {
  font:12px/1 var(--mono); padding:6px 8px; border-radius:8px; width:100%;
  background:#0d1017; border:1px solid var(--line); color:var(--text);
}
input.tagin:focus { outline:none; border-color:#1c4d80; }

.empty { padding:16px; color:var(--faint); font-size:13px; }
::-webkit-scrollbar { width:9px; }
::-webkit-scrollbar-thumb { background:#242a36; border-radius:9px; }