/* IRONWATCH · control-room design system
   Graphite night surfaces, hi-vis amber accent, mono data readouts. */

:root {
  --bg: #0B0E13;
  --panel: #12161E;
  --panel2: #171D27;
  --raise: #1C2431;
  --line: #232B38;
  --line2: #2E3948;
  --ink: #E9EEF5;
  --muted: #8B99AB;
  --faint: #5C6979;
  --amber: #FFB020;
  --amber-dim: rgba(255,176,32,.14);
  --good: #34C77B;
  --good-dim: rgba(52,199,123,.14);
  --bad: #FF5252;
  --bad-dim: rgba(255,82,82,.14);
  --info: #4DA3FF;
  --info-dim: rgba(77,163,255,.14);
  --radius: 14px;
  --shadow: 0 14px 40px rgba(0,0,0,.45);
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --row-hover: rgba(255,255,255,.02);
  --row-zebra: rgba(255,255,255,.008);
  --hatch: rgba(255,255,255,.015);
  --toast-bg: #E9EEF5;
  --toast-ink: #12161E;
  --btn-solid: #FFB020;
  --btn-solid-ink: #141414;
}

/* ---------- Themes ---------- */
/* Daylight: light surfaces for bright offices and client demos */
html[data-theme="daylight"] {
  color-scheme: light;
  --bg: #F3F5F9;
  --panel: #FFFFFF;
  --panel2: #F0F3F8;
  --raise: #E7ECF3;
  --line: #DFE5EC;
  --line2: #C7D1DD;
  --ink: #141B24;
  --muted: #52616F;
  --faint: #8592A1;
  --amber: #9A6B00;
  --amber-dim: rgba(178,124,0,.12);
  --good: #0E8A50;
  --good-dim: rgba(14,138,80,.12);
  --bad: #C92F2F;
  --bad-dim: rgba(201,47,47,.10);
  --info: #135FC4;
  --info-dim: rgba(19,95,196,.10);
  --shadow: 0 10px 30px rgba(16,24,40,.14);
  --row-hover: rgba(16,24,40,.035);
  --row-zebra: rgba(16,24,40,.02);
  --hatch: rgba(16,24,40,.03);
  --toast-bg: #141B24;
  --toast-ink: #F3F5F9;
  --btn-solid: #FFB020;
  --btn-solid-ink: #141B24;
}

/* Steel: deep blue surfaces with a cyan accent */
html[data-theme="steel"] {
  --bg: #0A1017;
  --panel: #0F1722;
  --panel2: #131D2B;
  --raise: #182536;
  --line: #1D2B3E;
  --line2: #29405C;
  --ink: #E6EEF7;
  --muted: #8FA3B8;
  --faint: #5F7288;
  --amber: #33C6FF;
  --amber-dim: rgba(51,198,255,.13);
  --good: #2FD180;
  --good-dim: rgba(47,209,128,.14);
  --bad: #FF5C5C;
  --bad-dim: rgba(255,92,92,.14);
  --info: #7AA7FF;
  --info-dim: rgba(122,167,255,.14);
  --btn-solid: #33C6FF;
  --btn-solid-ink: #06202C;
}

* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); min-height:100%; }
body { margin:0; min-height:100vh; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size:15px; line-height:1.55; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 0; background: none; color: inherit; }
.hidden { display: none !important; }
a { color: var(--info); }
::selection { background: var(--amber); color:#111; }

h1,h2,h3 { font-family: var(--font-display); letter-spacing:-.01em; }
.mono { font-family: var(--font-mono); font-size:12.5px; letter-spacing:.02em; }
.eyebrow { font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em; color: var(--amber); }

/* ---------- Login ---------- */
.login-shell { min-height:100vh; display:grid; grid-template-columns:1.1fr .9fr; }
.hero { position:relative; overflow:hidden; padding:48px; display:flex; flex-direction:column; justify-content:space-between; background:
  linear-gradient(160deg, rgba(255,176,32,.06), transparent 40%),
  repeating-linear-gradient(-45deg, transparent 0 22px, var(--hatch) 22px 23px),
  var(--bg); border-right:1px solid var(--line); }
.hero .scanline { position:absolute; inset:0; background: radial-gradient(1200px 500px at 15% -10%, rgba(77,163,255,.10), transparent 60%); pointer-events:none; }
.logo-row { display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
.logo-mark { width:48px; height:48px; display:grid; place-items:center; flex:0 0 auto; }
.logo-mark .iw-brand-mark { display:block; width:100%; height:100%; }
.logo-text strong { display:block; font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:.06em; }
.logo-text span { font-family:var(--font-mono); color:var(--muted); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.hero h1 { font-size: clamp(38px, 4.6vw, 62px); line-height:1.03; font-weight:800; margin:56px 0 16px; max-width:640px; position:relative; z-index:1; }
.hero h1 em { font-style:normal; color:var(--amber); }
.hero p { max-width:560px; color:var(--muted); font-size:16px; position:relative; z-index:1; }
.hero-strip { display:flex; flex-wrap:wrap; gap:10px; position:relative; z-index:1; }
.hero-chip { border:1px solid var(--line2); border-radius:8px; padding:10px 14px; font-family:var(--font-mono); font-size:12px; color:var(--ink); background:var(--panel); }
.hero-chip b { color:var(--amber); margin-right:8px; }
.login-panel { display:flex; align-items:center; justify-content:center; padding:36px; background:var(--panel); }
.login-card { width:100%; max-width:420px; }
.login-card h2 { font-size:28px; margin:6px 0 8px; }
.login-card > p { color:var(--muted); font-size:14px; }

/* ---------- Forms ---------- */
.field { margin:14px 0; }
label { display:block; font-family:var(--font-mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; margin-bottom:7px; }
input, select, textarea { width:100%; border:1px solid var(--line2); background:var(--panel2); border-radius:10px; padding:12px 13px; color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s; }
textarea { min-height:96px; resize:vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,176,32,.15); }
input[type="file"] { padding:9px; }
select option { background:var(--panel2); color:var(--ink); }

.btn { border-radius:10px; padding:12px 18px; font-weight:700; font-family:var(--font-display); letter-spacing:.02em; background:var(--raise); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border:1px solid var(--line2); transition:transform .12s, filter .12s; }
.btn:hover { transform:translateY(-1px); filter:brightness(1.12); }
.btn:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
.btn.primary { background:var(--btn-solid); color:var(--btn-solid-ink); border-color:transparent; }
.btn.good { background:var(--good); color:#0b2417; border-color:transparent; }
.btn.bad { background:var(--bad); color:#2a0b0b; border-color:transparent; }
.btn.info { background:var(--info); color:#0a1e33; border-color:transparent; }
.btn.ghost { background:transparent; }
.btn.full { width:100%; }
.btn.text-link { background:transparent; border-color:transparent; color:var(--muted); box-shadow:none; }
.btn.text-link:hover { color:var(--amber); border-color:transparent; }
.btn.sm { min-height:34px; padding:6px 12px; font-size:13px; }

/* ---------- App shell ---------- */
.app-shell { min-height:100vh; display:grid; grid-template-columns:264px 1fr; }
.sidebar { background:var(--panel); border-right:1px solid var(--line); padding:18px; position:sticky; top:0; height:100vh; overflow:auto; display:flex; flex-direction:column; }
.side-brand { display:flex; gap:12px; align-items:center; padding:6px 6px 18px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.side-brand .logo-mark { width:40px; height:40px; }
.side-brand strong { display:block; font-family:var(--font-display); font-weight:800; letter-spacing:.06em; font-size:15px; }
.side-brand span { font-family:var(--font-mono); color:var(--faint); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.nav-btn { width:100%; text-align:left; color:var(--muted); padding:11px 12px; border-radius:9px; margin:2px 0; font-weight:600; font-size:14px; display:flex; align-items:center; gap:10px; }
.nav-btn:hover { background:var(--panel2); color:var(--ink); }
.nav-btn.active { background:var(--amber-dim); color:var(--amber); }
.nav-btn .ic { width:18px; text-align:center; opacity:.9; }
.nav-group { margin:15px 10px 5px; color:var(--faint); font:700 10px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; }
.side-foot { margin-top:auto; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.side-foot b { color:var(--ink); display:block; }
.side-foot small { font-family:var(--font-mono); font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.1em; }

.content { padding:22px 26px 60px; min-width:0; }
.workspace-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; position:relative; z-index:9; }
.search-box { position:relative; flex:1 1 560px; max-width:760px; }
.search-box > span { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:19px; pointer-events:none; }
.search-box input { padding-left:43px; background:var(--panel); }
.workspace-state { display:flex; align-items:center; gap:8px; color:var(--muted); font:11px var(--font-mono); white-space:nowrap; }
.workspace-state select { min-width:130px; padding:8px 30px 8px 10px; font-size:12px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 0 4px var(--good-dim); }
.search-panel { position:absolute; z-index:30; left:286px; right:26px; top:76px; max-width:760px; padding:14px; border:1px solid var(--line2); border-radius:12px; background:var(--panel); box-shadow:var(--shadow); }
.search-panel .search-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.search-panel section + section { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.search-panel h3 { margin:0 0 6px; color:var(--faint); font:700 10px var(--font-mono); text-transform:uppercase; letter-spacing:.12em; }
.search-panel section button { width:100%; display:flex; justify-content:space-between; gap:15px; padding:10px; border-radius:8px; text-align:left; }
.search-panel section button:hover,.search-panel section button:focus-visible { background:var(--panel2); outline:2px solid var(--amber); }
.search-panel section button span { color:var(--faint); font-size:12px; }
.demo-badge { display:inline-flex; margin-top:8px; }
.demo-note { border:1px solid var(--amber); border-radius:10px; padding:10px 12px; background:var(--amber-dim); color:var(--ink); margin:12px 0; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* Signature: live ops rail */
.ops-rail { display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:20px; background:var(--panel); }
.ops-cell { flex:1 1 140px; padding:12px 16px; border-right:1px solid var(--line); font-family:var(--font-mono); }
.ops-cell:last-child { border-right:0; }
.ops-cell small { display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:3px; }
.ops-cell b { font-size:20px; font-weight:600; color:var(--ink); }
.ops-cell.alert b { color:var(--bad); }
.ops-cell.warn b { color:var(--amber); }
.ops-cell.good b { color:var(--good); }

.topbar { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; gap:16px; flex-wrap:wrap; }
.topbar h1 { margin:2px 0 0; font-size:26px; font-weight:800; }
.topbar p { color:var(--muted); margin:4px 0 0; font-size:14px; }

.grid { display:grid; gap:14px; }
.grid.two { grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid.three { grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid.four { grid-template-columns:repeat(4, minmax(0,1fr)); }

.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.card h3 { margin:0 0 12px; font-size:16px; font-weight:700; }
.card h3 .eyebrow { display:block; margin-bottom:4px; }

.kpi { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
.kpi b { font-family:var(--font-mono); font-size:30px; font-weight:600; display:block; }
.kpi span { font-family:var(--font-mono); color:var(--faint); font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; }
.kpi.warn b { color:var(--amber); } .kpi.bad b { color:var(--bad); } .kpi.good b { color:var(--good); }

/* Executive command centre */
.command-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.command-kpi { min-height:118px; padding:15px; border:1px solid var(--line); border-top:3px solid var(--line2); border-radius:12px; background:var(--panel); }
.command-kpi b { display:block; font:600 27px var(--font-mono); line-height:1.15; overflow-wrap:anywhere; }
.command-kpi span { display:block; margin-top:7px; color:var(--muted); font-size:12px; }
.command-kpi small { display:block; margin-top:5px; color:var(--faint); font-size:10px; }
.command-kpi.good { border-top-color:var(--good); }.command-kpi.warn { border-top-color:var(--amber); }.command-kpi.bad { border-top-color:var(--bad); }
.command-kpi.good b { color:var(--good); }.command-kpi.warn b { color:var(--amber); }.command-kpi.bad b { color:var(--bad); }
.command-layout { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(310px,.85fr); gap:14px; align-items:start; }
.command-main,.command-secondary { display:flex; flex-direction:column; gap:14px; min-width:0; }
.section-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.section-head h2,.section-head h3 { margin:0; }.section-head p { margin:3px 0 0; color:var(--muted); font-size:13px; }
.attention-card { border-left:4px solid var(--amber); }
.status-text { display:inline-flex; align-items:center; gap:6px; font:700 11px var(--font-mono); text-transform:uppercase; letter-spacing:.03em; }
.status-text:before { content:'●'; font-size:9px; }
.status-text.good { color:var(--good); }.status-text.warn { color:var(--amber); }.status-text.bad { color:var(--bad); }.status-text.info { color:var(--info); }
.operations-table small { display:block; color:var(--muted); margin-top:2px; }
.compact-list { display:flex; flex-direction:column; gap:7px; }
.compact-list .item { padding:10px 12px; }
.healthy-state,.empty-state { text-align:center; padding:28px 16px; border:1px dashed var(--line2); border-radius:10px; color:var(--muted); }
.healthy-state strong,.empty-state strong { display:block; color:var(--ink); font-size:16px; margin-bottom:4px; }
.empty-state .btn { margin-top:12px; }
.risk-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.risk { padding:10px; border-radius:9px; border:1px solid var(--line); background:var(--panel2); }
.risk b { display:block; font:600 20px var(--font-mono); }.risk span { color:var(--muted); font-size:11px; }
.risk.bad b { color:var(--bad); }.risk.warn b { color:var(--amber); }.risk.good b { color:var(--good); }
.compliance-disclaimer,.migration-notice { margin:12px 0; padding:12px 14px; border:1px solid var(--line2); border-left:3px solid var(--info); border-radius:10px; background:var(--info-dim); color:var(--muted); font-size:12.5px; }
.migration-notice { border-left-color:var(--amber); background:var(--amber-dim); }

/* Compliance, health and intelligence */
.compliance-hero { display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; }
.score-ring { --score:0; width:126px; height:126px; border-radius:50%; display:grid; place-items:center; position:relative; background:conic-gradient(var(--good) calc(var(--score)*1%),var(--line2) 0); }
.score-ring:after { content:''; position:absolute; inset:10px; border-radius:50%; background:var(--panel); }
.score-ring b,.score-ring span { position:relative; z-index:1; text-align:center; }.score-ring b { font:600 28px var(--font-mono); }.score-ring span { font-size:10px; color:var(--muted); text-transform:uppercase; }
.status-breakdown { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.status-breakdown > div { padding:10px; border-radius:8px; background:var(--panel2); }.status-breakdown b { display:block; font:600 18px var(--font-mono); }.status-breakdown span { color:var(--muted); font-size:11px; }
.timeline { position:relative; padding-left:18px; }.timeline:before { content:''; position:absolute; left:5px; top:8px; bottom:8px; width:1px; background:var(--line2); }
.timeline-item { position:relative; padding:0 0 14px 10px; }.timeline-item:before { content:''; position:absolute; width:9px; height:9px; border-radius:50%; background:var(--amber); left:-17px; top:6px; }
.timeline-item b { display:block; }.timeline-item small { color:var(--muted); }
.bar-list { display:flex; flex-direction:column; gap:10px; }.bar-row { display:grid; grid-template-columns:minmax(100px,1fr) minmax(130px,2fr) auto; gap:10px; align-items:center; font-size:12px; }
.bar-track { height:8px; overflow:hidden; background:var(--line); border-radius:999px; }.bar-track i { display:block; height:100%; background:var(--amber); border-radius:inherit; }
.health-hero { display:flex; align-items:center; gap:18px; }.health-score { font:600 48px var(--font-mono); }.health-components { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.health-component { padding:12px; border:1px solid var(--line); border-radius:9px; }.health-component b { display:block; font:600 20px var(--font-mono); }.health-component small { color:var(--muted); }
.integration-card { min-height:175px; display:flex; flex-direction:column; }.integration-card .btn { margin-top:auto; }
.report-filter { display:grid; grid-template-columns:repeat(6,minmax(120px,1fr)); gap:10px; align-items:end; }
.report-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.report-grid .card { display:flex; flex-direction:column; min-height:180px; }.report-grid .card p { color:var(--muted); flex:1; }.report-grid .item-actions { justify-content:flex-start; }
.field-help,.muted { color:var(--muted); font-size:12.5px; }.field-help { margin-top:5px; display:block; }

/* Dialogs */
.modal { width:min(720px,calc(100vw - 28px)); max-height:90vh; overflow:auto; color:var(--ink); border:1px solid var(--line2); border-radius:16px; padding:0; background:var(--panel); box-shadow:var(--shadow); }
.modal::backdrop { background:rgba(0,0,0,.68); backdrop-filter:blur(4px); }
.modal-head { display:flex; justify-content:space-between; align-items:center; gap:12px; position:sticky; top:0; z-index:2; padding:16px 18px; border-bottom:1px solid var(--line); background:var(--panel); }.modal-head h2,.modal-head h3 { margin:0; }
.modal > .form-grid,.modal > .field,.modal > p { margin-left:18px; margin-right:18px; }.modal > .btn,.modal > .item-actions { margin:0 18px 18px; }

/* list items with status spine */
.list { display:flex; flex-direction:column; gap:8px; }
.item { background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--line2); border-radius:10px; padding:12px 14px; display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.item.spine-good { border-left-color:var(--good); }
.item.spine-warn { border-left-color:var(--amber); }
.item.spine-bad { border-left-color:var(--bad); }
.item.spine-info { border-left-color:var(--info); }
.item strong { display:block; font-size:14px; }
.item small { color:var(--muted); line-height:1.5; font-size:12.5px; }
.item .mono { color:var(--faint); }
.item-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }

.badge { display:inline-flex; align-items:center; border-radius:6px; padding:4px 9px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; background:var(--raise); color:var(--muted); white-space:nowrap; }
.badge.good { background:var(--good-dim); color:var(--good); }
.badge.warn { background:var(--amber-dim); color:var(--amber); }
.badge.bad { background:var(--bad-dim); color:var(--bad); }
.badge.info { background:var(--info-dim); color:var(--info); }

.form-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 14px; }
.form-grid .span { grid-column:1/-1; }

.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; }
.table th { text-align:left; color:var(--faint); font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; padding:8px 10px; border-bottom:1px solid var(--line2); }
.table td { padding:11px 10px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:top; }
.table tr:hover td { background:var(--row-hover); }

.tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.tab { padding:8px 14px; border-radius:8px; font-family:var(--font-mono); font-size:12px; color:var(--muted); border:1px solid var(--line); }
.tab.active { color:var(--amber); border-color:var(--amber); background:var(--amber-dim); }

/* ---------- Guard portal ---------- */
.guard-home { max-width:680px; margin:0 auto; }
.big-action { width:100%; border-radius:16px; padding:20px; font-size:19px; margin:8px 0; min-height:64px; }
.shift-hero { border:1px solid var(--line2); border-left:4px solid var(--amber); border-radius:var(--radius); background:var(--panel); padding:18px; margin-bottom:14px; }
.shift-hero h3 { margin:0 0 10px; font-size:19px; }
.shift-hero .row { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed var(--line); font-size:14px; }
.shift-hero .row:last-child { border-bottom:0; }
.shift-hero .row span:first-child { color:var(--faint); font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; padding-top:3px; }
.duty-banner { display:flex; align-items:center; gap:10px; border-radius:10px; padding:12px 14px; font-family:var(--font-mono); font-size:12.5px; margin-bottom:12px; }
.duty-banner.on { background:var(--good-dim); color:var(--good); border:1px solid rgba(52,199,123,.35); }
.duty-banner.off { background:var(--raise); color:var(--muted); border:1px solid var(--line2); }
.pulse { width:9px; height:9px; border-radius:50%; background:currentColor; animation:pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
@media (prefers-reduced-motion: reduce) { .pulse { animation:none; } .btn:hover { transform:none; } }

.toast { position:fixed; right:18px; bottom:18px; background:var(--toast-bg); color:var(--toast-ink); padding:13px 16px; border-radius:10px; box-shadow:var(--shadow); z-index:60; max-width:400px; font-weight:600; font-size:14px; }
.toast.bad { background:var(--bad); color:#fff; }
.toast.good { background:var(--good); color:#0b2417; }

.empty { text-align:center; color:var(--faint); padding:26px 10px; font-size:13.5px; border:1px dashed var(--line2); border-radius:10px; }

@media (max-width: 1100px) { .grid.four { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 980px) {
  .login-shell { grid-template-columns:1fr; }
  .hero { border-right:0; border-bottom:1px solid var(--line); padding:28px; }
  .hero h1 { margin-top:26px; }
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:relative; height:auto; padding:12px 18px; }
  .sidebar .nav-btn, .sidebar .nav-group, .side-foot { display:none; }
  .side-brand { margin-bottom:0; padding-bottom:6px; border-bottom:0; }
  .grid.two, .grid.three, .form-grid { grid-template-columns:1fr; }
  .command-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .command-layout { grid-template-columns:1fr; }
  .report-filter { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .report-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .search-panel { left:26px; top:78px; }
}
@media (max-width: 640px) {
  .content { padding:14px 14px 60px; }
  .search-box { flex:none; width:100%; max-width:none; }
  .grid.four { grid-template-columns:1fr; }
  .ops-cell { flex-basis:100%; border-right:0; border-bottom:1px solid var(--line); }
  .ops-cell:last-child { border-bottom:0; }
  .workspace-bar { align-items:stretch; flex-direction:column; }
  .workspace-state { justify-content:space-between; }
  .search-panel { position:fixed; left:12px; right:12px; top:86px; max-height:70vh; overflow:auto; }
  .command-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .command-kpi { min-height:104px; }.command-kpi b { font-size:23px; }
  .compliance-hero { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .status-breakdown,.risk-summary,.health-components,.report-filter,.report-grid { grid-template-columns:1fr; }
  .bar-row { grid-template-columns:1fr auto; }.bar-track { grid-column:1/-1; }
  .responsive-table thead { display:none; }
  .responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td { display:block; width:100%; }
  .responsive-table tr { padding:10px 0; border-bottom:1px solid var(--line2); }
  .responsive-table td { display:grid; grid-template-columns:minmax(105px,38%) 1fr; gap:10px; border:0; padding:5px 8px; }
  .responsive-table td:before { content:attr(data-label); color:var(--faint); font:10px var(--font-mono); text-transform:uppercase; letter-spacing:.08em; }
  .item { flex-direction:column; }.item-actions { justify-content:flex-start; }
}

/* ---------- Polish layer ---------- */

/* Custom scrollbars to match the surface */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--line2); border-radius:6px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:var(--faint); }
* { scrollbar-width: thin; scrollbar-color: var(--line2) var(--bg); }

/* Screen fade so navigation feels intentional */
#view { animation: screenIn .22s ease-out; }
@keyframes screenIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* Card + list hover depth */
.card { transition: border-color .15s; }
.card:hover { border-color: var(--line2); }
.item { transition: border-color .15s, background .15s, transform .12s; }
.item:hover { background: var(--raise); border-color: var(--line2); }

/* KPI accent tick */
.kpi { position:relative; overflow:hidden; }
.kpi::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--line2); }
.kpi.good::after { background:var(--good); }
.kpi.warn::after { background:var(--amber); }
.kpi.bad::after { background:var(--bad); }

/* Ops rail: live feel */
.ops-cell { transition: background .15s; }
.ops-cell:hover { background: var(--panel2); }
.ops-cell.alert { background: linear-gradient(180deg, rgba(255,82,82,.06), transparent); }
.ops-cell.warn { background: linear-gradient(180deg, rgba(255,176,32,.05), transparent); }

/* Toast slide-in */
.toast { animation: toastIn .25s cubic-bezier(.2,.9,.3,1.2); }
@keyframes toastIn { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }

/* Buttons: pressed state + disabled */
.btn:active { transform:translateY(0) scale(.985); }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; filter:none; }
.btn.primary:hover { box-shadow: 0 6px 18px rgba(255,176,32,.25); }

/* Sticky content header on long screens */
.topbar { position:sticky; top:0; z-index:5; background:var(--bg); padding-top:6px; padding-bottom:4px; box-shadow:0 8px 12px -10px rgba(0,0,0,.35); }

/* Table zebra + numeric alignment helper */
.table tbody tr:nth-child(even) td { background: var(--row-zebra); }
.table td.num, .table th.num { text-align:right; font-family:var(--font-mono); }

/* Checklist rows (audit screen) */
.check-row { display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line); }
.check-row:last-child { border-bottom:0; }
.check-dot { width:22px; height:22px; flex:0 0 22px; border-radius:50%; display:grid; place-items:center; font-size:12px; margin-top:1px; background:var(--raise); color:var(--faint); border:1px solid var(--line2); }
.check-dot.ok { background:var(--good-dim); color:var(--good); border-color:rgba(52,199,123,.4); }
.check-dot.no { background:var(--bad-dim); color:var(--bad); border-color:rgba(255,82,82,.4); }

/* Divider + inline meta row */
.hr { border:0; border-top:1px solid var(--line); margin:16px 0; }
.meta-row { display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:12.5px; font-family:var(--font-mono); }

/* Skeleton shimmer while data loads */
.skeleton { border-radius:10px; background:linear-gradient(90deg, var(--panel2) 25%, var(--raise) 50%, var(--panel2) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; min-height:52px; }
@keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* Guard portal: bigger touch targets on phones */
@media (max-width:640px) {
  .big-action { min-height:74px; font-size:20px; }
  .btn, .btn.sm { min-height:48px; }
  input, select, textarea { padding:14px; font-size:16px; } /* stops iOS zoom */
}

/* Print: audit pack friendly */
@media print {
  body { background:#fff; color:#111; }
  .sidebar, .ops-rail, .btn, .tabs, .toast { display:none !important; }
  .card, .item, .kpi { border-color:#ccc; background:#fff; box-shadow:none; }
  .table th, .table td { border-color:#ccc; color:#111; }
}

@media (prefers-reduced-motion: reduce) {
  #view, .toast, .skeleton { animation:none; }
  .item:hover { transform:none; }
}

/* ---------- Sale-ready SaaS layer ---------- */
.security-note { margin-top:12px; border:1px solid var(--line2); border-left:3px solid var(--amber); border-radius:10px; padding:12px 13px; background:var(--panel2); }
.security-note strong { display:block; font-size:13.5px; margin-bottom:4px; }
.security-note small { display:block; color:var(--muted); line-height:1.45; }
.mfa-enrol { margin-top:12px; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--panel2); }
.mfa-enrol p { color:var(--muted); font-size:13px; line-height:1.5; }
.mfa-qr { display:block; width:min(220px,100%); aspect-ratio:1; margin:14px auto; padding:10px; border-radius:10px; background:#fff; }
.mobile-nav { display:none; }
@media (max-width: 980px) {
  .content { padding-bottom:96px; }
  .mobile-nav { position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; gap:6px; overflow-x:auto; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:rgba(11,14,19,.94); border-top:1px solid var(--line2); backdrop-filter: blur(16px); }
  .mobile-nav-btn { flex:0 0 86px; min-height:56px; border-radius:12px; border:1px solid var(--line); color:var(--muted); background:var(--panel); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; }
  .mobile-nav-btn span { font-size:17px; line-height:1; }
  .mobile-nav-btn small { font-size:10px; line-height:1.05; max-width:78px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mobile-nav-btn.active { color:var(--amber); border-color:var(--amber); background:var(--amber-dim); }
}
@media (max-width: 640px) {
  .topbar { position:static; }
  .sidebar .nav-btn, .sidebar .nav-group { display:none; }
  .side-foot { display:none; }
  .sidebar { padding:12px 14px; }
  .side-brand { margin-bottom:0; padding-bottom:6px; border-bottom:0; }
}

/* Field Command upgrade: mobile guard app / QR-NFC / occurrence / training */
.field-app-shell { max-width: 720px; margin-inline: auto; }
.field-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; padding: 24px; text-align: center; background: linear-gradient(160deg, rgba(255,176,32,.20), rgba(21,29,44,.92)), var(--panel); box-shadow: var(--shadow); }
.field-card:before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), transparent 45%); pointer-events: none; }
.field-avatar { width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 999px; display: grid; place-items: center; font-size: 42px; font-weight: 900; color: #111; background: var(--amber); border: 6px solid rgba(255,255,255,.65); box-shadow: 0 12px 40px rgba(0,0,0,.28); }
.field-card h2 { margin: 0; font-size: clamp(24px, 6vw, 36px); }
.field-card p { margin: 8px 0 0; color: var(--muted); }
.field-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.field-tile { min-height: 82px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); font: inherit; font-weight: 800; letter-spacing: .01em; cursor: pointer; box-shadow: var(--shadow); }
.field-tile.primary { background: linear-gradient(180deg, rgba(255,176,32,.95), rgba(189,140,48,.95)); color: #101216; border-color: rgba(255,176,32,.7); }
.field-tile.gold { background: linear-gradient(180deg, rgba(189,154,70,.95), rgba(136,100,35,.96)); color: #fff; }
.field-tile.danger { background: linear-gradient(180deg, rgba(255,77,79,.20), rgba(255,77,79,.08)); border-color: rgba(255,77,79,.40); }
.field-menu { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--panel); margin: 14px 0; }
.field-menu button { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: space-between; padding: 18px; font: inherit; font-size: 17px; cursor: pointer; }
.field-menu button:last-child { border-bottom: 0; }
.field-menu b { color: var(--faint); font-size: 28px; line-height: 1; }
.field-menu button:hover { background: rgba(255,255,255,.05); }
@media (max-width: 720px) {
  .field-card { border-radius: 0 0 28px 28px; margin: -2px -14px 14px; }
  .field-action-grid { grid-template-columns: repeat(2, 1fr); }
  .field-tile { min-height: 76px; }
}

/* Roster Copilot + Rapid Cover */
.copilot-hero { margin-bottom:14px; padding:22px; border:1px solid var(--line2); border-left:4px solid var(--amber); border-radius:16px; background:linear-gradient(135deg,rgba(255,176,32,.10),rgba(20,28,42,.94)); box-shadow:var(--shadow); }
.copilot-hero h2 { margin:5px 0 4px; font-size:clamp(24px,3vw,36px); }
.copilot-hero p { margin:0 0 16px; color:var(--muted); }
.copilot-command { display:grid; grid-template-columns:1fr auto; gap:10px; }
.copilot-command input { min-height:52px; font-size:16px; }
.demo-controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 14px; padding:12px; border:1px dashed rgba(255,176,32,.48); border-radius:12px; background:var(--amber-dim); }
.roster-readiness .kpi small { display:block; margin-top:7px; color:var(--muted); font-size:12px; }
.section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.section-head h3,.section-head h4 { margin:4px 0; }
.section-head p { margin:3px 0;color:var(--muted); }
.brief-copy { color:var(--muted); font-size:15px; line-height:1.55; }
.confidence-ring { width:160px; aspect-ratio:1; margin:12px auto; border-radius:50%; display:grid; place-content:center; text-align:center; border:12px solid rgba(52,199,123,.22); outline:2px solid var(--good); background:var(--panel2); }
.confidence-ring b { font:800 38px var(--font-display); }
.confidence-ring span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.confidence-components { display:grid; gap:7px; }
.confidence-components div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:13px; }
.confidence-components b { color:var(--ink); font-family:var(--font-mono); }
.interpreted-request { margin:14px 0; padding:13px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
.interpreted-request > div { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:7px; }
.interpreted-request span { color:var(--muted); font-size:13px; }
.candidate-list { display:grid; gap:10px; }
.candidate { display:grid; grid-template-columns:42px 1fr; gap:12px; border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--panel2); }
.candidate.eligible { border-left:3px solid var(--good); }
.candidate.ineligible { border-left:3px solid var(--bad); opacity:.82; }
.candidate-rank { width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--raise);font:800 14px var(--font-mono); }
.candidate h4 { display:inline-block; margin:0 8px 0 0; font-size:16px; }
.candidate ul { list-style:none; padding:0; margin:10px 0 0; display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--muted); font-size:12.5px; }
.candidate-warning { margin:9px 0 0; color:var(--amber); font-size:12.5px; }
.response-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.prepared-message { margin-top:14px; padding:16px; border:1px solid var(--line2); border-radius:12px; background:var(--panel2); }
.prepared-message p { font-size:15px; line-height:1.55; }
.prepared-message small { display:block; margin-top:10px; color:var(--muted); }
.message-preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0; }
.message-preview-grid>div { display:grid; gap:3px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.message-preview-grid small { margin:0; font:700 10px var(--font-mono); text-transform:uppercase; letter-spacing:.08em; }
.message-preview-grid span,.candidate-mobile,.guard-mobile { color:var(--muted); font-family:var(--font-mono); font-size:12px; }
.candidate-mobile { display:block; margin:3px 0 7px; }
.qr-modal { width:min(520px,calc(100vw - 24px)); text-align:center; }
.qr-canvas { width:min(320px,80vw); margin:20px auto; padding:12px; border-radius:12px; background:#fff; }
.qr-canvas svg { width:100%; height:auto; display:block; }
.quick-action-card { max-width:620px; margin:20px auto; display:grid; gap:12px; text-align:center; padding:24px; border:1px solid var(--line2); border-top:5px solid var(--amber); border-radius:20px; background:var(--panel); box-shadow:var(--shadow); }
.quick-action-card h2 { margin:0; font-size:clamp(27px,7vw,42px); }
.quick-action-card p { color:var(--muted); font-size:16px; line-height:1.55; }
.quick-facts { display:flex; justify-content:center; gap:7px; flex-wrap:wrap; }
.public-offer-shell { min-height:100vh; display:grid; place-items:center; padding:20px; background:var(--bg); }
.public-offer-card { width:min(560px,100%); display:grid; gap:16px; padding:clamp(22px,5vw,42px); border:1px solid var(--line2); border-top:6px solid var(--amber); border-radius:22px; background:var(--panel); box-shadow:var(--shadow); }
.public-offer-card .logo-mark { width:52px; height:52px; }
.public-offer-card h1 { margin:0; font-size:clamp(28px,7vw,44px); }
.offer-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.offer-facts>div { display:grid; gap:4px; padding:13px; border:1px solid var(--line); border-radius:11px; background:var(--panel2); }
.offer-facts small { color:var(--muted); font:700 10px var(--font-mono); text-transform:uppercase; letter-spacing:.08em; }
.public-offer-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
details.card summary { cursor:pointer; padding:4px 0 12px; }
@media (max-width:720px) {
  .copilot-hero { margin-inline:-2px; padding:17px; }
  .copilot-command { grid-template-columns:1fr; }
  .copilot-command .btn { width:100%; }
  .demo-controls .eyebrow { width:100%; }
  .candidate { grid-template-columns:32px 1fr; padding:12px 10px; }
  .candidate-rank { width:30px;height:30px; }
  .candidate .section-head { display:block; }
  .candidate .item-actions { margin-top:10px; display:grid; grid-template-columns:1fr 1fr; }
  .candidate .item-actions .btn { width:100%; }
  .rapid-cover-panel { margin-inline:-6px; }
  .quick-action-card { margin:8px 0; padding:18px; }
  .message-preview-grid,.offer-facts,.public-offer-actions { grid-template-columns:1fr; }
}

/* Founder release, policy acknowledgement and controlled support mode */
.legal-links{display:flex;gap:9px;justify-content:center;align-items:center;margin:18px 0 0;font-size:12px;color:var(--faint)}
.legal-links a,.side-legal{color:var(--muted);text-decoration:none}.legal-links a:hover,.legal-links a:focus,.side-legal:hover,.side-legal:focus{color:var(--amber);text-decoration:underline}
.side-legal{display:block;margin-top:11px;font-size:11px}
.founder-support-banner{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;justify-content:space-between;padding:11px 18px;background:#3b2104;color:#fff4dd;border-bottom:1px solid #8b5a16;box-shadow:0 8px 24px rgba(0,0,0,.24)}
.founder-support-banner strong{letter-spacing:.04em}.founder-support-banner span{font-size:12px;color:#f0c98e;flex:1}
.onboarding-progress{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}.onboarding-progress>div{flex:1}.onboarding-progress h3{margin:3px 0 9px}
.progress-track{height:9px;background:var(--panel2);border:1px solid var(--line);border-radius:99px;overflow:hidden}.progress-track span{display:block;height:100%;background:var(--amber);border-radius:inherit;transition:width .2s ease}
.onboarding-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.onboarding-step{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--ink);padding:15px;cursor:pointer}.onboarding-step:hover,.onboarding-step:focus{border-color:var(--amber)}.onboarding-step>span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);font-weight:800}.onboarding-step.complete>span{background:var(--good-dim);color:var(--good)}.onboarding-step small{display:block;color:var(--muted);margin-top:3px;line-height:1.35}.onboarding-step>b{font-size:11px;color:var(--amber);text-transform:uppercase;letter-spacing:.05em}.acknowledgement-copy{margin:12px 0;padding:14px;border-left:3px solid var(--amber);background:var(--panel2);color:var(--muted);font-size:13px;line-height:1.55}.consent-check{display:flex;align-items:flex-start;gap:10px;margin:12px 0;padding:10px;border:1px solid var(--line);border-radius:10px;color:var(--muted);line-height:1.4}.consent-check input{width:20px;height:20px;margin:0;flex:0 0 auto}
@media(max-width:760px){.founder-support-banner{position:relative;align-items:flex-start;flex-wrap:wrap}.founder-support-banner span{flex-basis:100%}.onboarding-grid{grid-template-columns:1fr}.onboarding-progress{align-items:flex-start}.onboarding-step{grid-template-columns:32px minmax(0,1fr)}.onboarding-step>b{grid-column:2}}