/* Shared look for the board and the Cyber page.

   Design rules (borrowed from control rooms and flight decks, not from dashboards):
   1. Dark cockpit. Normal is grey and quiet. Colour appears only when something needs attention,
      so a lit cell always means "look here". Amber = worth a look. Red = life-safety, nothing else.
   2. Flat and calm. Hairline rules instead of cards, glows and blur. Nothing pulses or shouts.
   3. One typeface (Saira, bundled) in sentence case with tabular figures. Capitals are used once,
      for the headline word. Sizes scale with the screen so a TV across the room stays readable.
   4. The map is a chart: it carries a latitude / longitude margin like a survey sheet. */

@font-face{font-family:'Saira';src:url('vendor/fonts/saira.woff2') format('woff2');font-weight:100 900;font-stretch:50% 125%;font-display:swap}

:root:root{
  color-scheme:dark;
  --bg:#080b0f;--panel:#0d1116;--panel2:#0a0e13;--line:#1b222b;--line2:#2b3541;
  --fg:#dde3ea;--quiet:#aab4bf;--muted:#8d99a6;--label:#77838f;
  --bad:#f4695c;--warn:#eeaa45;--adv:#e0c462;--ok:#5ab59a;--info:#6ba6d4;--cam:#6ba6d4;--eq:#a79be6;
  --radius:3px;--font:'Saira',system-ui,-apple-system,"Segoe UI",sans-serif;--serif:var(--font);
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  /* type scale: grows with the viewport (laptop → TV) */
  --t-xs:clamp(11px,.74vw,14.5px);
  --t-sm:clamp(12px,.82vw,16px);
  --t-md:clamp(13px,.92vw,18px);
  --t-lg:clamp(16px,1.22vw,24px);
  --t-xl:clamp(18px,1.5vw,29px);
  --cond:var(--ok);
}
body[data-cond="elevated"]{--cond:var(--warn)}
body[data-cond="emergency"]{--cond:var(--bad)}

html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:var(--t-md);font-variant-numeric:tabular-nums;letter-spacing:0;-webkit-font-smoothing:antialiased}
::selection{background:#2b4a66;color:#fff}
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
:focus-visible{outline:1px solid var(--info);outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
button.link,a.link{font:inherit;font-size:var(--t-xs);color:var(--label);background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
button.link:hover,a.link:hover{color:var(--fg)}

/* The condition is marked by a thin steady line around the screen: none when normal, amber when
   elevated, red in an emergency. No pulsing, no filled blocks: informative, not alarming. */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:4000;border:0 solid var(--cond);opacity:.7;transition:border-width .6s}
body[data-cond="elevated"]::after{border-width:1px}
body[data-cond="emergency"]::after{border-width:2px}

/* Standard empty / unreachable state */
.empty{display:flex;flex-direction:column;gap:2px;padding:14px 14px;border:1px dashed var(--line2);border-radius:var(--radius);color:var(--label);font-size:var(--t-sm);font-style:normal;text-align:left}
.empty b{font-weight:500;color:var(--muted)}
.empty.is-down b::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);margin-right:8px;vertical-align:.12em}

/* Change log (ops.js): category in words, severity as a quiet rule on the left */
.log{gap:0;margin-top:0}
.log-item{display:grid;grid-template-columns:4.3em minmax(0,1fr);gap:0 8px;align-items:baseline;background:none;border:0;border-bottom:1px solid var(--line);border-left:2px solid transparent;border-radius:0;padding:8px 6px 8px 10px}
.log-item.clickable:hover{background:#111720}
.log-item > i{display:none}
.log-cat{display:block;font-size:var(--t-xs);color:var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log-top{align-items:baseline;gap:8px}
.log-top b{color:var(--fg);font-size:var(--t-md);font-weight:500;line-height:1.3;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.log-top time{font-family:var(--font);color:var(--label);font-size:var(--t-xs);white-space:nowrap}
.log-top time.at-load{display:none}
.log-top em{flex:none;background:none;color:var(--warn);border:0;padding:0;font-size:var(--t-xs);font-weight:500;letter-spacing:0;text-transform:none}
.log-item small{color:var(--muted);font-size:var(--t-sm);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.log-item.sev-crit{border-left-color:var(--bad)}.log-item.sev-crit .log-cat{color:var(--bad)}
.log-item.sev-warn{border-left-color:var(--warn)}.log-item.sev-warn .log-cat{color:var(--warn)}
.log-item.sev-info{border-left-color:var(--line2)}
.log-item.is-new{background:rgba(238,170,69,.05);animation:none}
.log-empty{color:var(--label);font-size:var(--t-sm);padding:14px;border:1px dashed var(--line2);border-radius:var(--radius)}