/* OUTPOST portal — app shell and components */
/* ─────────────────────────────────────────────────────────────────────────────────────────────────
   THEMES. Every colour in the portal comes from the semantic tokens below; a theme is one block of values.
   The active theme is the data-theme attribute on <html> (set by js/theme-boot.js, then js/theme.js).
   Any element may carry its own data-theme to preview a theme locally (Settings -> Appearance).
   Rules of the system:
     * text-primary / text-secondary / text-tertiary keep at least 4.5:1 against bg, panel and panel-alt;
     * accent, amber, red, green, blue keep at least 4.5:1 as text on bg and panel, series colours 3:1;
     * status colours keep the same hue in every theme (amber = warning, red = critical, green = ok, blue = info)
       and are always paired with a label and an icon;
     * tests/theme-test.mjs enforces all of this, and forbids hard-coded colours elsewhere in this file.
   ───────────────────────────────────────────────────────────────────────────────────────────────── */
:root, [data-theme="outpost-dark"]{
  color-scheme:dark;
  --bg:#0A1210; --panel:#101A18; --panel-alt:#142320; --grid-line:#1E2E2B; --border:#22322E; --input-border:#5E7872;
  --text-primary:#DCE9E5; --text-secondary:#93AAA4; --text-tertiary:#75908A;
  --accent:#4FD1C5; --accent-dim:#2A6E66; --accent-ink:#06110F;
  --amber:#E8A33D; --amber-dim:#6B4F1F; --red:#F2705C; --red-dim:#6B2E24; --red-ink:#1A0502;
  --green:#5BD38A; --blue:#8FB3E8; --purple:#B08FE0; --navy:#0E1B2E;
  --sidebar-bg:rgba(10,18,16,.92); --topbar-bg:rgba(10,18,16,.88); --attr-bg:rgba(10,18,16,.75);
  --code-bg:#080F0D; --code-text:#BFE9E3; --code-ink:#CFE3DD; --scroll-thumb:#1C2C28;
  --shadow:rgba(0,0,0,.65); --overlay:rgba(0,0,0,.65); --focus:#4FD1C5;
  --map-bg:#0E1B2E; --map-filter:invert(100%) hue-rotate(180deg) brightness(92%) contrast(88%) saturate(.7);
  --chart-grid:rgba(30,46,43,.6); --series-1:#4FD1C5; --series-2:#E8A33D; --series-3:#8FB3E8; --series-4:#B08FE0; --series-5:#F2705C;
  --sidebar-w:244px;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#FFFFFF; --panel:#F3F5F6; --panel-alt:#E9EDEF; --grid-line:#EDF1F2; --border:#D3DADD; --input-border:#7B8B8F;
  --text-primary:#14201E; --text-secondary:#46575A; --text-tertiary:#586A6D;
  --accent:#06655E; --accent-dim:#7FBFB8; --accent-ink:#FFFFFF;
  --amber:#865100; --amber-dim:#E0B878; --red:#AA2517; --red-dim:#E8A9A0; --red-ink:#FFFFFF;
  --green:#146336; --blue:#24539F; --purple:#6B3FB0; --navy:#0E1B2E;
  --sidebar-bg:#F3F5F6; --topbar-bg:rgba(255,255,255,.92); --attr-bg:rgba(255,255,255,.8);
  --code-bg:#F0F3F4; --code-text:#064E49; --code-ink:#1E2E2C; --scroll-thumb:#C5CFD2;
  --shadow:rgba(16,32,40,.18); --overlay:rgba(16,32,40,.5); --focus:#06655E;
  --map-bg:#E8EEF0; --map-filter:none;
  --chart-grid:rgba(20,32,30,.12); --series-1:#06655E; --series-2:#865100; --series-3:#24539F; --series-4:#6B3FB0; --series-5:#AA2517;
}
[data-theme="ocean"]{
  color-scheme:dark;
  --bg:#08182E; --panel:#0F2A4D; --panel-alt:#143561; --grid-line:#0F2644; --border:#2A4F82; --input-border:#6F90BF;
  --text-primary:#E8F1FF; --text-secondary:#A9C0E0; --text-tertiary:#8FABD0;
  --accent:#5CC8FF; --accent-dim:#2B6F9B; --accent-ink:#04121F;
  --amber:#F0B04A; --amber-dim:#7A5A1F; --red:#FF907F; --red-dim:#7A3A33; --red-ink:#2A0904;
  --green:#62DB93; --blue:#9CC0FF; --purple:#C2A2F0; --navy:#0A1F3A;
  --sidebar-bg:rgba(8,24,46,.94); --topbar-bg:rgba(8,24,46,.9); --attr-bg:rgba(8,24,46,.75);
  --code-bg:#061426; --code-text:#BFE6FF; --code-ink:#D5E6FA; --scroll-thumb:#24487A;
  --shadow:rgba(0,8,24,.6); --overlay:rgba(2,10,24,.65); --focus:#5CC8FF;
  --map-bg:#0A1F3A; --map-filter:invert(100%) hue-rotate(195deg) brightness(90%) contrast(90%) saturate(.8);
  --chart-grid:rgba(120,160,220,.18); --series-1:#5CC8FF; --series-2:#F0B04A; --series-3:#9CC0FF; --series-4:#C2A2F0; --series-5:#FF907F;
}
[data-theme="forest"]{
  color-scheme:dark;
  --bg:#08180F; --panel:#10301E; --panel-alt:#163C27; --grid-line:#10281A; --border:#2B5C40; --input-border:#6F9A82;
  --text-primary:#E6F5EA; --text-secondary:#A6C9B3; --text-tertiary:#8EB59D;
  --accent:#B6E85A; --accent-dim:#5C7F2A; --accent-ink:#0A1704;
  --amber:#F0B04A; --amber-dim:#7A5A1F; --red:#FF907F; --red-dim:#7A3A33; --red-ink:#2A0904;
  --green:#62DB93; --blue:#9CC0FF; --purple:#C2A2F0; --navy:#0A2416;
  --sidebar-bg:rgba(8,24,15,.94); --topbar-bg:rgba(8,24,15,.9); --attr-bg:rgba(8,24,15,.75);
  --code-bg:#06130B; --code-text:#D5F59A; --code-ink:#D9EEDF; --scroll-thumb:#285840;
  --shadow:rgba(0,10,4,.6); --overlay:rgba(2,12,6,.65); --focus:#B6E85A;
  --map-bg:#0B2417; --map-filter:invert(100%) hue-rotate(125deg) brightness(90%) contrast(90%) saturate(.75);
  --chart-grid:rgba(130,200,160,.16); --series-1:#B6E85A; --series-2:#F0B04A; --series-3:#9CC0FF; --series-4:#C2A2F0; --series-5:#FF907F;
}

::placeholder{ color:var(--text-tertiary); opacity:1; }

/* Keyboard focus: always visible, in every theme. */
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible{ outline-offset:0; }

/* Severity is never colour alone: every status badge and message carries an icon and its label. */
.badge::before{ font-weight:700; }
.badge.online::before, .badge.ok::before{ content:'\2713'; }
.badge.offline::before, .badge.error::before{ content:'\2715'; }
.badge.never_seen::before, .badge.warning::before{ content:'\25B2'; font-size:.85em; }
.badge.info::before{ content:'i'; display:inline-flex; width:11px; height:11px; border:1px solid currentColor; border-radius:50%; align-items:center; justify-content:center; font-size:8px; font-style:italic; }
.badge .dot{ display:none; }
.notice.warn::before, .toast.warn::before{ content:'\25B2  '; font-size:.85em; font-weight:700; }
.notice.err::before, .toast.err::before, .status-line.err::before, .login-error::before{ content:'\2715  '; font-weight:700; }
.notice.ok::before, .status-line.ok::before{ content:'\2713  '; font-weight:700; }
*{ box-sizing:border-box; }
/* Height of the permanent platform attribution bar. Everything fixed or full-height stops above it. */
:root{ --attr-h:calc(32px + env(safe-area-inset-bottom, 0px)); }
html,body{ margin:0; padding:0; height:100%; }
body{
  display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden;
  background:var(--bg); color:var(--text-primary); font-family:'Inter',sans-serif; font-size:14px;
  background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:34px 34px; background-position:-1px -1px; background-attachment:fixed;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
.mono{ font-family:'IBM Plex Mono',monospace; }
.muted{ color:var(--text-secondary); }
.faint{ color:var(--text-tertiary); }
[hidden]{ display:none !important; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--scroll-thumb); border-radius:4px; }

/* ───────── Login ───────── */
.login-screen{ position:fixed; inset:0 0 var(--attr-h) 0; z-index:500; display:flex; overflow-y:auto; background:var(--bg); padding:20px;
  background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size:34px 34px; }
.login-screen > *{ margin:auto; }   /* centred when there is room; the screen scrolls when there is not, so nothing slides under the attribution */
.login-card{ width:100%; max-width:400px; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:38px 34px; box-shadow:0 40px 90px -30px var(--shadow); }
.login-brand{ display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:8px; }
.login-card h2{ text-align:center; font-size:18px; margin:14px 0 4px; font-weight:700; }
.login-sub{ text-align:center; color:var(--text-secondary); font-size:12.5px; margin:0 0 26px; line-height:1.5; }
.login-error{ display:none; color:var(--red); font-size:12.5px; margin-top:12px; text-align:center; background:color-mix(in srgb, var(--red) 8%, transparent); border:1px solid var(--red-dim); border-radius:6px; padding:8px 10px; }
.login-foot{ text-align:center; color:var(--text-tertiary); font-size:11px; margin-top:22px; line-height:1.6; }

/* ───────── Brand ───────── */
.brand{ display:flex; align-items:center; gap:11px; }
.outpost-mark{ width:34px; height:34px; flex-shrink:0; display:block; }
.outpost-mark.lg{ width:44px; height:44px; }
.brand-text h1{ font-size:15px; margin:0; font-weight:700; letter-spacing:.5px; }
.brand-text h1 .applied-tag{ color:var(--amber); font-size:.6em; font-weight:700; letter-spacing:.5px; margin-left:6px; }
.brand-text .sub{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1.5px; color:var(--text-tertiary); text-transform:uppercase; margin-top:1px; }

/* ───────── Shell ───────── */
.shell{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr); }
.sidebar{ position:relative; height:100%; min-height:0; overflow:hidden; display:flex; flex-direction:column; background:var(--sidebar-bg); border-right:1px solid var(--border); padding:18px 14px; z-index:60; }
.sidebar .brand{ padding:4px 8px 18px; }
.nav{ display:flex; flex-direction:column; gap:2px; flex:1; overflow:auto; }
.nav-label{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-tertiary); padding:14px 10px 6px; }
.nav a{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:7px; color:var(--text-secondary); font-size:13.5px; font-weight:500; text-decoration:none; border:1px solid transparent; }
.nav a svg{ width:17px; height:17px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nav a:hover{ color:var(--text-primary); background:color-mix(in srgb, var(--accent) 5%, transparent); text-decoration:none; }
.nav a.active{ color:var(--accent); background:color-mix(in srgb, var(--accent) 9%, transparent); border-color:var(--accent-dim); }
.nav .badge-dot{ margin-left:auto; min-width:18px; height:18px; border-radius:9px; background:var(--red); color:var(--red-ink); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.side-foot{ border-top:1px solid var(--border); padding-top:14px; display:flex; flex-direction:column; gap:10px; }
.org-line{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-secondary); line-height:1.5; word-break:break-all; }
.org-line b{ color:var(--text-primary); font-weight:600; }
.main{ min-width:0; min-height:0; height:100%; display:flex; flex-direction:column; }
.topbar{ flex:none; position:relative; z-index:50; display:flex; align-items:center; gap:14px; padding:14px 28px; background:var(--topbar-bg); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.topbar h2{ margin:0; font-size:17px; font-weight:700; letter-spacing:-.2px; }
.topbar .spacer{ flex:1; }
.menu-btn{ display:none; }
/* the content area scrolls; the topbar above it and the attribution bar below it never move */
.page-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
#view{ padding:26px 28px 40px; max-width:1360px; width:100%; margin:0 auto; }
.view-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.view-head h3{ margin:0 0 4px; font-size:20px; }
.view-head p{ margin:0; color:var(--text-secondary); font-size:13.5px; max-width:70ch; line-height:1.55; }
.scrim{ display:none; }
@media (max-width:900px){
  .shell{ grid-template-columns:minmax(0,1fr); }
  .sidebar{ position:fixed; left:0; top:0; bottom:var(--attr-h); height:auto; width:var(--sidebar-w); transform:translateX(-102%); transition:transform .2s; box-shadow:0 0 40px var(--shadow); }
  body.nav-open .sidebar{ transform:none; }
  body.nav-open .scrim{ display:block; position:fixed; inset:0 0 var(--attr-h) 0; background:var(--overlay); z-index:55; }
  .menu-btn{ display:inline-flex; }
  .topbar{ padding:12px 16px; }
  #view{ padding:18px 16px 28px; }
}

/* ───────── Buttons / inputs ───────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.7px; text-transform:uppercase;
  padding:10px 16px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--text-primary); cursor:pointer; text-decoration:none; transition:all .15s; white-space:nowrap; }
.btn:hover{ border-color:var(--accent); color:var(--accent); text-decoration:none; }
.btn.primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; }
.btn.primary:hover{ background:transparent; color:var(--accent); }
.btn.danger{ border-color:var(--red-dim); color:var(--red); }
.btn.danger:hover{ background:color-mix(in srgb, var(--red) 10%, transparent); border-color:var(--red); color:var(--red); }
.btn.sm{ padding:7px 12px; font-size:10.5px; }
.btn.ghost{ border-color:transparent; color:var(--text-secondary); }
.btn:disabled{ opacity:.5; cursor:default; pointer-events:none; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; min-width:0; }
.field > label, .lbl{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:1.1px; text-transform:uppercase; color:var(--text-tertiary); }
.field .hint{ font-size:11.5px; color:var(--text-tertiary); line-height:1.5; }
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=date],input[type=time],select,textarea{
  width:100%; background:var(--bg); border:1px solid var(--input-border); border-radius:6px; padding:10px 12px; color:var(--text-primary); font-family:'Inter',sans-serif; font-size:13.5px; }
textarea{ resize:vertical; min-height:80px; line-height:1.5; }
input:focus,select:focus,textarea:focus{ border-color:var(--accent); }
input[type=checkbox]{ accent-color:var(--accent); }
.form-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0 16px; }

/* ───────── Cards / layout ───────── */
.card{ background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:18px 20px; min-width:0; }
.card h4{ margin:0 0 12px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:10px; }
.card h4 .right{ margin-left:auto; display:flex; gap:8px; align-items:center; font-weight:400; }
.grid{ display:grid; gap:18px; }
.grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid.main-side{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
@media (max-width:1100px){ .grid.main-side,.grid.cols-3{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:760px){ .grid.cols-2{ grid-template-columns:minmax(0,1fr); } }
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:18px; }
.kpi{ background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px 18px; }
.kpi .label{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:1.2px; color:var(--text-tertiary); text-transform:uppercase; margin-bottom:6px; }
.kpi .value{ font-family:'IBM Plex Mono',monospace; font-size:26px; font-weight:600; }
.kpi .value.cyan{ color:var(--accent); } .kpi .value.amber{ color:var(--amber); } .kpi .value.red{ color:var(--red); }
.kpi .delta{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-secondary); margin-top:3px; }
.empty{ text-align:center; color:var(--text-secondary); padding:44px 20px; border:1px dashed var(--border); border-radius:10px; line-height:1.7; }
.empty b{ color:var(--text-primary); display:block; font-size:15px; margin-bottom:4px; }
.notice{ border:1px solid var(--border); border-radius:8px; padding:12px 16px; color:var(--text-secondary); font-size:13px; line-height:1.6; background:var(--panel-alt); }
.notice.warn{ border-color:var(--amber-dim); color:var(--amber); }
.notice.err{ border-color:var(--red-dim); color:var(--red); }
.notice.ok{ border-color:var(--accent-dim); color:var(--accent); }
.notice b{ color:var(--text-primary); }
.sec-title{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-tertiary); margin:20px 0 8px; }

/* ───────── Tables / badges ───────── */
.tbl-wrap{ overflow:auto; border:1px solid var(--border); border-radius:8px; max-height:420px; }
.tbl-wrap.flat{ max-height:none; }
table.tbl{ border-collapse:collapse; width:100%; font-size:13px; }
.tbl th{ position:sticky; top:0; background:var(--panel); text-align:left; padding:10px 14px; color:var(--text-secondary); font-weight:600; font-size:11.5px; border-bottom:1px solid var(--border); white-space:nowrap; }
.tbl td{ padding:10px 14px; border-bottom:1px solid var(--grid-line); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:none; }
.tbl.mono td, .tbl.mono th{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; white-space:nowrap; }
.tbl td.num{ text-align:right; } .tbl td.nul{ color:var(--text-tertiary); }
.tbl tr.click{ cursor:pointer; } .tbl tr.click:hover td{ background:color-mix(in srgb, var(--accent) 4%, transparent); }
.badge{ display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.6px; text-transform:uppercase; padding:3px 9px; border-radius:20px; border:1px solid var(--border); color:var(--text-secondary); white-space:nowrap; }
.badge .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.badge.online{ color:var(--green); border-color:color-mix(in srgb, var(--green) 40%, transparent); background:color-mix(in srgb, var(--green) 8%, transparent); }
.badge.offline{ color:var(--red); border-color:var(--red-dim); background:color-mix(in srgb, var(--red) 8%, transparent); }
.badge.never_seen{ color:var(--amber); border-color:var(--amber-dim); background:color-mix(in srgb, var(--amber) 8%, transparent); }
.badge.info{ color:var(--blue); border-color:color-mix(in srgb, var(--blue) 40%, transparent); background:color-mix(in srgb, var(--blue) 8%, transparent); }
.badge.ok{ color:var(--green); border-color:color-mix(in srgb, var(--green) 40%, transparent); background:color-mix(in srgb, var(--green) 8%, transparent); }
.badge.warning{ color:var(--amber); border-color:var(--amber-dim); background:color-mix(in srgb, var(--amber) 8%, transparent); }
.badge.error{ color:var(--red); border-color:var(--red-dim); background:color-mix(in srgb, var(--red) 8%, transparent); }
.chip{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; border:1px solid var(--border); border-radius:4px; padding:3px 8px; color:var(--text-secondary); display:inline-block; }
.chip i{ font-style:normal; color:var(--accent); margin-left:6px; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.toolbar input[type=search]{ max-width:300px; }
.toolbar select{ width:auto; }
.live-pill{ display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent-dim); background:color-mix(in srgb, var(--accent) 8%, transparent); padding:4px 10px; border-radius:20px; }
.live-pill .blip{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:blip 1.6s infinite; }
.live-pill.poll{ color:var(--amber); border-color:var(--amber-dim); background:color-mix(in srgb, var(--amber) 8%, transparent); } .live-pill.poll .blip{ background:var(--amber); }
@keyframes blip{ 0%,100%{opacity:1} 50%{opacity:.25} }
.chart-box{ height:280px; position:relative; }
.map-box{ height:340px; border-radius:8px; overflow:hidden; border:1px solid var(--border); background:var(--navy); }
.map-box.sm{ height:220px; }

/* ───────── Tabs / steps / code ───────── */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:14px; flex-wrap:wrap; }
.tabs button{ background:none; border:none; border-bottom:2px solid transparent; color:var(--text-secondary); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.7px; text-transform:uppercase; padding:9px 14px; cursor:pointer; margin-bottom:-1px; }
.tabs button:hover{ color:var(--text-primary); }
.tabs button.active{ color:var(--accent); border-bottom-color:var(--accent); }
.steps{ display:flex; gap:0; margin-bottom:24px; flex-wrap:wrap; }
.step{ flex:1 1 160px; display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--border); background:var(--panel); color:var(--text-tertiary); font-size:12.5px; }
.step:first-child{ border-radius:8px 0 0 8px; } .step:last-child{ border-radius:0 8px 8px 0; } .step + .step{ border-left:none; }
.step .n{ width:24px; height:24px; border-radius:50%; border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; flex-shrink:0; }
.step.active{ color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, transparent); border-color:var(--accent-dim); }
.step.done{ color:var(--green); }
pre.code{ position:relative; background:var(--code-bg); border:1px solid var(--border); border-radius:8px; padding:14px 16px; overflow:auto; font-family:'IBM Plex Mono',monospace; font-size:12px; line-height:1.6; color:var(--code-ink); margin:0; white-space:pre; }
.code-wrap{ position:relative; }
.code-wrap .copy{ position:absolute; top:8px; right:8px; }
.keybox{ display:flex; gap:10px; align-items:center; background:var(--code-bg); border:1px solid var(--amber-dim); border-radius:8px; padding:12px 14px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--amber); word-break:break-all; }
.keybox span{ flex:1; }
code.inline, .md code{ font-family:'IBM Plex Mono',monospace; font-size:.9em; background:color-mix(in srgb, var(--accent) 8%, transparent); border:1px solid var(--grid-line); border-radius:4px; padding:1px 6px; color:var(--code-text); }

/* ───────── Findings / articles / markdown ───────── */
.finding{ display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:8px; background:var(--panel-alt); margin-bottom:10px; }
.finding .body{ min-width:0; }
.finding .t{ font-weight:600; font-size:13.5px; margin-bottom:3px; }
.finding .d{ color:var(--text-secondary); font-size:12.5px; line-height:1.55; }
.finding .a{ margin-top:6px; font-size:12px; }
.article-card{ display:block; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px 18px; color:inherit; text-decoration:none; }
.article-card:hover{ border-color:var(--accent-dim); text-decoration:none; }
.article-card .tt{ font-weight:600; font-size:14px; margin-bottom:5px; color:var(--text-primary); }
.article-card .ss{ color:var(--text-secondary); font-size:12.5px; line-height:1.55; }
.md{ line-height:1.7; font-size:14px; max-width:78ch; }
.md h2{ font-size:16px; margin:22px 0 8px; } .md h3{ font-size:14.5px; margin:18px 0 6px; }
.md p{ margin:0 0 12px; } .md ul,.md ol{ margin:0 0 12px; padding-left:22px; } .md li{ margin-bottom:5px; }
.md pre{ background:var(--code-bg); border:1px solid var(--border); border-radius:8px; padding:12px 14px; overflow:auto; font-family:'IBM Plex Mono',monospace; font-size:12px; margin:0 0 14px; }
.md a.artlink{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px; border:1px solid var(--accent-dim); border-radius:4px; padding:1px 7px; background:color-mix(in srgb, var(--accent) 7%, transparent); }

/* ───────── Chat ───────── */
.chat{ display:flex; flex-direction:column; height:calc(100vh - 190px - var(--attr-h)); height:calc(100dvh - 190px - var(--attr-h)); min-height:420px; }
.chat-log{ flex:1; overflow:auto; padding:6px 4px 14px; display:flex; flex-direction:column; gap:14px; }
.msg{ max-width:min(78ch,92%); padding:12px 16px; border-radius:12px; line-height:1.65; font-size:14px; }
.msg.user{ align-self:flex-end; background:color-mix(in srgb, var(--accent) 10%, transparent); border:1px solid var(--accent-dim); }
.msg.bot{ align-self:flex-start; background:var(--panel); border:1px solid var(--border); }
.msg.bot .md{ max-width:none; font-size:14px; }
.msg .tools{ margin-top:8px; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text-tertiary); letter-spacing:.5px; }
.typing{ align-self:flex-start; color:var(--text-tertiary); font-family:'IBM Plex Mono',monospace; font-size:11.5px; padding:6px 4px; }
.chat-input{ display:flex; gap:10px; align-items:flex-end; border-top:1px solid var(--border); padding-top:12px; }
.chat-input textarea{ min-height:46px; max-height:160px; }
.suggest{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.suggest button{ background:var(--panel); border:1px solid var(--border); color:var(--text-secondary); border-radius:20px; padding:8px 14px; font-size:12.5px; cursor:pointer; font-family:'Inter',sans-serif; }
.suggest button:hover{ border-color:var(--accent); color:var(--accent); }

/* ───────── Dropzone / progress ───────── */
.dropzone{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1.5px dashed var(--accent-dim); border-radius:10px; padding:26px; text-align:center; color:var(--text-secondary); font-size:13px; cursor:pointer; transition:border-color .15s, background .15s; }
.dropzone:hover,.dropzone.drag{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 5%, transparent); }
.dropzone b{ color:var(--text-primary); font-weight:600; }
.dropzone small{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-tertiary); }
.progress{ height:6px; background:var(--grid-line); border-radius:3px; overflow:hidden; margin-top:12px; display:none; }
.progress > div{ height:100%; width:0; background:var(--accent); transition:width .15s; }
.status-line{ margin-top:10px; font-size:12.5px; min-height:1em; }
.status-line.err{ color:var(--red); } .status-line.ok{ color:var(--accent); }
.dataset-list{ display:flex; flex-direction:column; gap:8px; max-height:560px; overflow:auto; }
.list-item{ border:1px solid var(--border); border-radius:8px; padding:11px 13px; cursor:pointer; background:var(--panel); }
.list-item:hover{ border-color:var(--accent-dim); } .list-item.active{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 5%, transparent); }
.list-item .nm{ font-size:13px; font-weight:600; word-break:break-word; }
.list-item .meta{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-tertiary); margin-top:4px; }
.split{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:20px; }
@media (max-width:900px){ .split{ grid-template-columns:minmax(0,1fr); } }
.series-picks{ display:flex; gap:8px; flex-wrap:wrap; }
.series-pick{ display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-secondary); border:1px solid var(--border); border-radius:4px; padding:5px 9px; cursor:pointer; }
.pager{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:10px; flex-wrap:wrap; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-secondary); }

/* ───────── Modal / toast ───────── */
.modal-back{ position:fixed; inset:0 0 var(--attr-h) 0; z-index:400; background:var(--overlay); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal{ background:var(--panel); border:1px solid var(--border); border-radius:12px; width:100%; max-width:560px; max-height:calc(100vh - var(--attr-h) - 40px); max-height:calc(100dvh - var(--attr-h) - 40px); overflow:auto; padding:24px 26px; box-shadow:0 40px 90px -20px var(--shadow); }
.modal.wide{ max-width:760px; }
.modal h3{ margin:0 0 6px; font-size:17px; }
.modal .sub{ color:var(--text-secondary); font-size:13px; line-height:1.55; margin:0 0 18px; }
.toasts{ position:fixed; right:18px; bottom:calc(var(--attr-h) + 14px); z-index:600; display:flex; flex-direction:column; gap:10px; }
.toast{ background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:8px; padding:11px 16px; font-size:13px; max-width:360px; box-shadow:0 10px 30px var(--shadow); }
.toast.err{ border-left-color:var(--red); } .toast.warn{ border-left-color:var(--amber); }
.leaflet-popup-content-wrapper{ background:var(--panel); color:var(--text-primary); border:1px solid var(--border); border-radius:8px; }
.leaflet-popup-content{ font-family:'Inter',sans-serif; font-size:12.5px; line-height:1.5; }
.leaflet-popup-tip{ background:var(--panel); }
.leaflet-container a.leaflet-popup-close-button{ color:var(--text-secondary); }
.leaflet-control-attribution{ background:var(--attr-bg) !important; color:var(--text-tertiary) !important; font-size:9px !important; }
.leaflet-control-attribution a{ color:var(--text-secondary) !important; }
.leaflet-control-zoom a{ background:var(--panel) !important; color:var(--text-primary) !important; border-color:var(--border) !important; }

/* OpenStreetMap tiles are light; invert them to sit naturally on the dark theme */
.leaflet-tile-pane{ filter:var(--map-filter); }
.leaflet-container{ background:var(--map-bg); }

/* ───────── Live Demo Overview ───────── */
.demo-banner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:16px 20px; margin-bottom:18px; border:1px solid var(--accent-dim); border-radius:10px; background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent) 2%, transparent)); }
.demo-banner p{ margin:10px 0 0; color:var(--text-secondary); font-size:13px; line-height:1.6; max-width:78ch; }
svg.topo{ width:100%; height:auto; display:block; }
.feed{ max-height:230px; overflow:auto; }
.feed-row{ display:flex; gap:10px; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--grid-line); font-size:12.5px; line-height:1.5; }
.feed-row .badge{ flex-shrink:0; }
.feed-time{ font-size:10.5px; color:var(--text-tertiary); flex-shrink:0; width:62px; }
.cam-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
@media (max-width:1100px){ .cam-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .cam-grid{ grid-template-columns:minmax(0,1fr); } }
.cam-tile{ position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; border:1px solid var(--border);
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), linear-gradient(135deg, var(--cam-a), var(--cam-b)); }
.cam-tile::before{ content:''; position:absolute; left:0; right:0; height:40%; background:linear-gradient(180deg, rgba(255,255,255,.10), transparent); animation:cam-scan 5s linear infinite; }
.cam-tile::after{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }
@keyframes cam-scan{ 0%{ top:-40%; } 100%{ top:100%; } }
.cam-rec{ position:absolute; top:8px; left:10px; z-index:2; display:flex; align-items:center; gap:5px; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:1px; color:#F2A79A; }
.cam-rec .blip{ width:6px; height:6px; border-radius:50%; background:#E8604D; animation:blip 1.4s infinite; }
.cam-ts{ position:absolute; top:8px; right:10px; z-index:2; font-size:9.5px; color:rgba(220,233,229,.75); }
.cam-label{ position:absolute; bottom:8px; left:10px; z-index:2; font-family:'IBM Plex Mono',monospace; font-size:10px; color:#F2F7F5; }
@media (max-width:900px){ #view .grid[style*="340px"]{ grid-template-columns:minmax(0,1fr) !important; } }

/* ── Team & access, onboarding checklist ── */
.check{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-primary); cursor:pointer; }
.check input{ width:auto; margin:0; }
.site-checks{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px 16px; margin:10px 0 4px; }
.role-help{ margin-top:12px; color:var(--text-secondary); font-size:13px; }
.role-help summary{ cursor:pointer; color:var(--accent); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.6px; }
.role-help ul{ margin:10px 0 0; padding-left:18px; line-height:1.7; }
details.onb{ padding:0; margin-bottom:16px; }
.onb summary{ list-style:none; display:flex; gap:14px; align-items:center; padding:14px 18px; cursor:pointer; flex-wrap:wrap; }
.onb summary::-webkit-details-marker{ display:none; }
.onb-title{ font-weight:600; font-size:13.5px; }
.onb-bar{ margin-left:auto; width:120px; height:6px; background:var(--grid-line); border-radius:3px; overflow:hidden; }
.onb-bar i{ display:block; height:100%; background:var(--accent); }
.onb-list{ list-style:none; margin:0; padding:2px 18px 12px; }
.onb-list li{ display:flex; gap:12px; align-items:center; padding:9px 0; border-top:1px solid var(--grid-line); }
.onb-mark{ width:20px; text-align:center; color:var(--text-tertiary); flex:none; }
.onb-list li.done .onb-mark{ color:var(--green); }
.onb-list li.next .onb-mark{ color:var(--accent); }
.onb-text{ flex:1; min-width:0; }
.onb-label{ font-size:13.5px; }
.onb-list li.done .onb-label{ color:var(--text-secondary); }

/* ── Settings: theme chooser. Each preview is drawn with its own theme's tokens (data-theme on .tp). ── */
.theme-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin:14px 0; }
.theme-card{ position:relative; display:flex; flex-direction:column; gap:10px; padding:10px; border:2px solid var(--border); border-radius:12px; background:var(--panel-alt); cursor:pointer; min-width:0; }
.theme-card:hover{ border-color:var(--accent-dim); }
.theme-card.selected{ border-color:var(--accent); }
.theme-card input{ position:absolute; opacity:0; width:1px; height:1px; }
.theme-card:has(input:focus-visible){ outline:2px solid var(--focus); outline-offset:2px; }
.theme-meta{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; line-height:1.45; }
.theme-meta b{ font-size:13.5px; }
.theme-tags{ display:flex; flex-wrap:wrap; gap:6px; min-height:1px; }
.tp{ display:grid; grid-template-columns:50px minmax(0,1fr); height:140px; border-radius:8px; overflow:hidden; background:var(--bg); color:var(--text-primary); border:1px solid var(--border); font-size:10px; }
.tp-side{ background:var(--sidebar-bg); border-right:1px solid var(--border); padding:9px 7px; display:flex; flex-direction:column; gap:7px; }
.tp-dot{ width:14px; height:14px; border-radius:50%; background:var(--navy); border:1.5px solid var(--accent); display:block; margin-bottom:3px; }
.tp-nav{ display:block; height:6px; border-radius:3px; background:var(--border); }
.tp-nav.on{ background:var(--accent); }
.tp-main{ padding:8px; display:flex; flex-direction:column; gap:7px; min-width:0; }
.tp-top{ font-size:10px; color:var(--text-primary); }
.tp-card{ background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:6px 8px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tp-lbl{ font-family:'IBM Plex Mono',monospace; font-size:7px; letter-spacing:.8px; color:var(--text-secondary); }
.tp-num{ font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:600; color:var(--accent); }
.tp svg{ flex-shrink:0; }
.tp-line-chart{ fill:none; stroke:var(--accent); stroke-width:1.5; }
.tp-area{ fill:color-mix(in srgb, var(--accent) 14%, transparent); stroke:none; }
.tp-badges{ display:flex; gap:4px; flex-wrap:wrap; }
.tp .badge{ font-size:8px; padding:2px 6px; }
.qr-box{ background:#fff; padding:10px; border-radius:8px; display:inline-block; margin:6px 0 12px; } /* a QR code must be dark on white to scan */

/* ── Permanent platform attribution ───────────────────────────────────────────────────────────────
   One shared footer, in index.html outside every page and dialog: it is always the last row of the screen, so it is
   visible on short pages and pinned below the scrolling content on long ones (it can never cover content or controls).
   Its text is static markup: no branding setting, script or stylesheet of a client can change or remove it. */
.attribution{ flex:none; margin-top:auto; box-sizing:border-box; height:var(--attr-h); padding:0 16px env(safe-area-inset-bottom, 0px); display:flex; align-items:center; justify-content:center; background:var(--panel); border-top:1px solid var(--border); position:relative; z-index:700; }
.attribution span{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.8px; color:var(--text-secondary); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* ── Organisation branding ── (client logo and name; logos keep their proportions and any transparency) */
.brand.has-logo{ flex-direction:column; align-items:flex-start; gap:8px; }
.brand-logo-wrap{ display:inline-flex; align-items:center; max-width:100%; border-radius:8px; }
.brand-logo-wrap.plate-light{ background:var(--text-primary); padding:6px 10px; }   /* a logo drawn with dark ink, on a dark theme */
.brand-logo-wrap.plate-dark{ background:var(--navy); padding:6px 10px; }            /* a logo drawn with light ink, on the light theme */
.brand-logo{ display:block; max-height:44px; max-width:100%; width:auto; height:auto; object-fit:contain; }
.brand-logo.sm{ max-height:26px; }
.brand-name{ font-size:15px; font-weight:700; letter-spacing:.2px; line-height:1.2; overflow-wrap:anywhere; }
.brand-top{ display:none; align-items:center; min-width:0; max-width:46vw; margin-left:auto; }
.brand-top .brand-name{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:900px){ .brand-top{ display:flex; } }
.org-badge{ display:inline-flex; align-items:center; gap:10px; max-width:100%; }
.org-badge b{ font-size:13px; overflow-wrap:anywhere; }

/* Settings -> Branding */
.brand-uploads{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin:14px 0; }
.logo-card{ background:var(--panel-alt); border:1px solid var(--border); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.logo-card h5{ margin:0; font-size:13.5px; }
.logo-card .hint{ margin:0; font-size:12px; color:var(--text-secondary); line-height:1.5; }
.logo-stage{ min-height:110px; border:1px dashed var(--input-border); border-radius:8px; display:flex; align-items:center; justify-content:center; padding:10px; position:relative;
  background-color:var(--bg); background-image:linear-gradient(45deg, var(--grid-line) 25%, transparent 25%, transparent 75%, var(--grid-line) 75%), linear-gradient(45deg, var(--grid-line) 25%, transparent 25%, transparent 75%, var(--grid-line) 75%);
  background-size:16px 16px; background-position:0 0, 8px 8px; }   /* a checkerboard, so transparent areas are visible as transparent */
.logo-stage img{ max-width:100%; max-height:90px; object-fit:contain; display:block; }
.logo-stage.empty{ color:var(--text-secondary); font-size:12.5px; text-align:center; }
.logo-stage.drag{ border-color:var(--accent); }
.logo-meta{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-secondary); min-height:1.2em; overflow-wrap:anywhere; }
.logo-card .field-error{ color:var(--red); font-size:12.5px; min-height:1em; }
.logo-card .field-error::before{ content:'\2715  '; font-weight:700; }
.logo-card .field-error:empty::before{ content:''; }
.bp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin:10px 0 4px; }
.bp{ display:flex; flex-direction:column; height:210px; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--bg); color:var(--text-primary); min-width:0; }
.bp-top{ display:flex; flex:1; min-height:0; }
.bp-side{ width:42%; flex:none; background:var(--sidebar-bg); border-right:1px solid var(--border); padding:12px 10px; display:flex; flex-direction:column; gap:7px; min-width:0; overflow:hidden; }
.bp-side .brand{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:4px; }
.bp-side .brand:not(.has-logo){ flex-direction:row; align-items:center; gap:8px; }
.bp-side .outpost-mark{ width:24px; height:24px; }
.bp-side .brand-logo{ max-height:30px; }
.bp-side .brand-name{ font-size:11.5px; }
.bp-side .brand-text h1{ font-size:11px; margin:0; }
.bp-side .brand-text .sub{ font-size:7px; letter-spacing:1px; }
.bp-nav{ height:6px; border-radius:3px; background:var(--border); display:block; }
.bp-nav.on{ background:var(--accent); width:70%; }
.bp-main{ flex:1; min-width:0; padding:10px; display:flex; flex-direction:column; gap:7px; }
.bp-bar{ height:9px; border-radius:3px; background:var(--panel-alt); }
.bp-card{ flex:1; border:1px solid var(--border); border-radius:6px; background:var(--panel); }
.bp-foot{ flex:none; height:22px; display:flex; align-items:center; justify-content:center; background:var(--panel); border-top:1px solid var(--border); font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:.5px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; }
.bp-label{ font-size:12px; color:var(--text-secondary); margin:2px 0 6px; }

/* ───────── Document control ───────── */
#view{ position:relative; }      /* contains visually hidden captions so they can never extend the page's scroll height */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.kpis button.kpi{ text-align:left; cursor:pointer; font:inherit; color:inherit; width:100%; }
.kpis button.kpi:hover{ border-color:var(--accent); }
.kpis button.kpi:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.dc-kv{ display:grid; grid-template-columns:minmax(120px,max-content) 1fr; gap:6px 16px; margin:0; font-size:13px; }
.dc-kv dt{ color:var(--text-tertiary); font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; padding-top:2px; }
.dc-kv dd{ margin:0; color:var(--text-primary); overflow-wrap:anywhere; }
.dc-feed{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.dc-feed li{ border:1px solid var(--border); border-radius:8px; padding:10px 14px; display:grid; gap:4px; background:var(--panel-alt); }
.dc-feed li.unread{ border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.dc-feed li .btn{ justify-self:start; margin-top:4px; }
.chip .btn.sm.ghost{ padding:0 0 0 6px; font-size:10px; }
@media (max-width:640px){ .dc-kv{ grid-template-columns:1fr; } .dc-kv dt{ padding-top:8px; } }
/* tap-sized checkboxes and file choosers in the document-control screens (WCAG 2.2 target size) */
#view input[type=checkbox]{ width:24px; height:24px; margin:0; accent-color:var(--accent); flex:none; }
#view .field input[type=file]{ min-height:40px; padding:8px 10px; }

/* ───────── Demo Two: public data sources, freshness, provenance ───────── */
.nav a[hidden]{ display:none; }
.badge.fresh::before{ content:'\2713'; }
.badge.stale::before{ content:'\2715'; }
.badge.delayed::before{ content:'\25B2'; font-size:.85em; }
.badge.replay::before{ content:'i'; display:inline-flex; width:11px; height:11px; border:1px solid currentColor; border-radius:50%; align-items:center; justify-content:center; font-size:8px; font-style:italic; }
.badge.fresh{ color:var(--green); border-color:color-mix(in srgb, var(--green) 40%, transparent); background:color-mix(in srgb, var(--green) 8%, transparent); }
.badge.stale{ color:var(--red); border-color:var(--red-dim); background:color-mix(in srgb, var(--red) 8%, transparent); }
.badge.delayed{ color:var(--amber); border-color:var(--amber-dim); background:color-mix(in srgb, var(--amber) 8%, transparent); }
.badge.replay{ color:var(--blue); border-color:color-mix(in srgb, var(--blue) 40%, transparent); background:color-mix(in srgb, var(--blue) 8%, transparent); }
.dt-attrib{ font-size:12px; line-height:1.6; color:var(--text-secondary); border:1px solid var(--border); border-left:3px solid var(--blue); background:var(--panel); padding:10px 14px; border-radius:8px; margin:0 0 14px; overflow-wrap:anywhere; }
.dt-attrib a{ color:var(--accent); text-decoration:underline; }
.dt-prov{ display:grid; grid-template-columns:minmax(120px, 200px) 1fr; gap:6px 16px; margin:0; font-size:12.5px; }
.dt-prov dt{ color:var(--text-tertiary); font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; padding-top:2px; }
.dt-prov dd{ margin:0; overflow-wrap:anywhere; }
.dt-prov dd a{ color:var(--accent); text-decoration:underline; }
tr.sel td{ background:color-mix(in srgb, var(--accent) 8%, transparent); }
@media (max-width:600px){ .dt-prov{ grid-template-columns:1fr; gap:2px; } .dt-prov dd{ margin-bottom:8px; } }

.toolbar select, .toolbar input[type=search], .toolbar input[type=text]{ max-width:100%; }

/* Demo Three: satellite imagery. Maps are Leaflet; the evidence image never leaves its frame; credits stay with every image. */
.ds-map{ width:100%; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--map-bg); }
.ds-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:16px; align-items:start; }
.ds-card .ds-frame{ background:var(--panel-alt); border:1px solid var(--border); border-radius:8px; min-height:120px; display:flex; align-items:center; justify-content:center; padding:6px; overflow:hidden; }
.ds-card .ds-img{ display:block; max-width:100%; height:auto; border-radius:4px; }
.ds-date{ font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:600; color:var(--accent); margin:10px 0 0; }
.ds-credit{ font-size:11.5px; line-height:1.6; color:var(--text-secondary); border-left:3px solid var(--blue); padding:2px 0 2px 10px; margin-top:10px; overflow-wrap:anywhere; }
.ds-split{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width:980px){ .ds-split{ grid-template-columns:minmax(0,1fr); } .ds-map{ height:320px !important; } }
.ds-bar{ height:6px; border-radius:3px; background:var(--panel-alt); border:1px solid var(--border); margin-bottom:3px; min-width:60px; overflow:hidden; }
.ds-bar i{ display:block; height:100%; background:var(--text-tertiary); }
.tabs button{ min-height:40px; }
#ds-panel:focus{ outline:none; }
.toolbar input[type=date], .toolbar input[type=range]{ width:auto; max-width:100%; }

/* Alerts and incidents. Severity and state are always words as well as colour and an icon, in every theme. */
.badge.sev-critical{ color:var(--red); border-color:var(--red-dim); background:color-mix(in srgb, var(--red) 10%, transparent); }
.badge.sev-warning{ color:var(--amber); border-color:var(--amber-dim); background:color-mix(in srgb, var(--amber) 10%, transparent); }
.badge.sev-info{ color:var(--blue); border-color:color-mix(in srgb, var(--blue) 40%, transparent); background:color-mix(in srgb, var(--blue) 8%, transparent); }
.badge.sev-critical::before{ content:'\2716'; } .badge.sev-warning::before{ content:'\25B2'; font-size:.85em; }
.badge.sev-info::before{ content:'i'; display:inline-flex; width:11px; height:11px; border:1px solid currentColor; border-radius:50%; align-items:center; justify-content:center; font-size:8px; font-style:italic; }
.badge.st-new{ color:var(--red); border-color:var(--red-dim); background:color-mix(in srgb, var(--red) 6%, transparent); } .badge.st-new::before{ content:'\25CF'; font-size:.8em; }
.badge.st-ack{ color:var(--amber); border-color:var(--amber-dim); background:color-mix(in srgb, var(--amber) 6%, transparent); } .badge.st-ack::before{ content:'\2713'; }
.badge.st-inv{ color:var(--blue); border-color:color-mix(in srgb, var(--blue) 40%, transparent); background:color-mix(in srgb, var(--blue) 8%, transparent); } .badge.st-inv::before{ content:'\25D0'; }
.badge.st-res{ color:var(--green); border-color:color-mix(in srgb, var(--green) 40%, transparent); background:color-mix(in srgb, var(--green) 8%, transparent); } .badge.st-res::before{ content:'\2713'; }
.badge.st-closed{ color:var(--text-secondary); border-color:var(--border); background:transparent; } .badge.st-closed::before{ content:'\25A0'; font-size:.7em; }
.badge.cond-active{ color:var(--red); border-color:var(--red-dim); background:color-mix(in srgb, var(--red) 10%, transparent); } .badge.cond-active::before{ content:'\25B2'; font-size:.85em; }
.badge.cond-clear{ color:var(--green); border-color:color-mix(in srgb, var(--green) 40%, transparent); background:color-mix(in srgb, var(--green) 8%, transparent); } .badge.cond-clear::before{ content:'\2713'; }
.badge.simulated{ color:var(--purple); border-color:color-mix(in srgb, var(--purple) 45%, transparent); background:color-mix(in srgb, var(--purple) 9%, transparent); } .badge.simulated::before{ content:'\2756'; }
.demo-flag{ flex:none; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; letter-spacing:1px; color:var(--amber); border:2px solid var(--amber); border-radius:6px; padding:4px 10px; background:color-mix(in srgb, var(--amber) 12%, transparent); white-space:nowrap; }
.demo-flag[hidden]{ display:none; }
.demo-chip{ font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.8px; color:var(--amber); border:1px solid var(--amber); border-radius:4px; padding:2px 8px; }
@media (max-width:560px){ .topbar{ flex-wrap:wrap; row-gap:6px; } .demo-flag{ order:5; flex-basis:100%; text-align:center; } }
.al-board{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr)); gap:12px; }
.al-card{ background:var(--panel); border:1px solid var(--border); border-left:4px solid var(--border); border-radius:8px; padding:12px 14px; cursor:pointer; min-width:0; }
.al-card:hover{ border-color:var(--accent); } .al-card.sel{ outline:2px solid var(--accent); outline-offset:0; }
.al-card.alarm-warning{ border-left-color:var(--amber); } .al-card.alarm-critical{ border-left-color:var(--red); } .al-card.alarm-info{ border-left-color:var(--blue); }
.al-card-head{ display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; font-size:13px; overflow-wrap:anywhere; }
.al-line{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:5px 0; }
.al-q{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--text-tertiary); min-width:92px; }
.al-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:16px; align-items:start; }
@media (max-width:980px){ .al-split{ grid-template-columns:minmax(0,1fr); } }
.al-steps{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:8px 0; }
.al-steps li{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; padding:3px 9px; border:1px solid var(--border); border-radius:4px; color:var(--text-secondary); }
.al-steps li.done{ color:var(--green); border-color:color-mix(in srgb, var(--green) 40%, transparent); } .al-steps li.done::before{ content:'\2713  '; }
.al-steps li.now{ color:var(--accent); border-color:var(--accent); font-weight:700; background:color-mix(in srgb, var(--accent) 8%, transparent); }
.al-timeline{ list-style:none; margin:0; padding:0 0 0 12px; border-left:2px solid var(--border); }
.al-timeline li{ padding:0 0 12px 12px; position:relative; } .al-timeline li::before{ content:''; position:absolute; left:-18px; top:5px; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.al-demo .toolbar{ margin-bottom:10px; }
.al-scenarios{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:10px; }
.al-scn{ border:1px solid var(--border); border-radius:8px; padding:10px 12px; background:var(--panel-alt); min-width:0; }
.al-scn.current{ border-color:var(--accent); outline:1px solid var(--accent); }
.al-scn-head{ display:flex; gap:8px; justify-content:space-between; align-items:center; margin-bottom:4px; }
.al-chain{ list-style:none; padding:0; margin:0 0 10px; display:flex; flex-direction:column; gap:4px; font-size:12.5px; }
.al-nodes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.al-mini{ display:flex; flex-wrap:wrap; gap:8px; }
.al-inbox{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:12.5px; }
#al-detail textarea, .modal textarea{ width:100%; }

/* Reports (Settings > Reports): the period form, the saved-report list, and a clean print view. Theme tokens only. */
.rp-dates{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.rp-dates[hidden]{ display:none; }
#rp-list .btn-row{ gap:6px; flex-wrap:wrap; }
#rp-list tr.rp-new td:first-child{ box-shadow:inset 3px 0 0 var(--accent); }
.rp-doc h3{ margin:0 0 4px; overflow-wrap:anywhere; }
.rp-doc .tbl{ table-layout:fixed; width:100%; }
.rp-doc .tbl th, .rp-doc .tbl td{ overflow-wrap:anywhere; vertical-align:top; }
.rp-doc .tbl th{ width:50%; }
.rp-doc li{ overflow-wrap:anywhere; }
.rp-demo{ font-weight:600; margin:10px 0; }
#rp-print{ display:none; }
@media print{
  body.rp-printing{ color-scheme:light; }
  body.rp-printing > *:not(#rp-print){ display:none !important; }
  body.rp-printing #rp-print{ display:block; color:CanvasText; background:Canvas; padding:0; }
  body.rp-printing #rp-print *{ color:inherit; background:transparent; border-color:GrayText; box-shadow:none; }
  body.rp-printing #rp-print .rp-print-foot{ margin-top:18px; font-size:10px; }
}

/* Demo access (Administer > Demo access) */
.da-result{ padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; }
.da-result.error{ color:var(--red); }
.da-result .keybox{ margin-top:6px; }
#da-list .btn-row{ gap:6px; flex-wrap:wrap; }