/* PeakLogic Control Center prototype.
   Layout: one shell — dark brand rail + top bar (chrome zone), 12-column panel grid (data zone).
   Tokens mirror docs/design/ui-visual-system.md §3. Chrome may use purple; the data zone (--px-*,
   --chart-*, alarm and comms colors) never does. */

:root {
  /* Chrome — rail is dark in both themes */
  --rail-bg: #0F172A;
  --rail-surface: #1E293B;
  --rail-border: #26324A;
  --rail-text: #E8ECF5;
  --rail-muted: #B4C0D4;
  --rail-active-bg: rgba(124, 58, 237, .22);
  --rail-active-bar: #8B5CF6;

  --bg: #F5F5FB;
  --surface: #FFFFFF;
  --surface-2: #FBFAFF;
  --surface-3: #F2F1FA;
  --border: #E7E5F1;
  --border-strong: #D7D4E8;
  --text: #0F172A;
  --text-muted: #3F4862;
  --text-faint: #646C87;
  --accent: #7C3AED;
  --accent-ink: #6D28D9;
  --accent-soft: #EDE9FE;
  --on-accent: #FFFFFF;
  --focus: 0 0 0 3px rgba(124, 58, 237, .45);
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .06);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, .18);
  --scrim: rgba(15, 23, 42, .45);
  --brand-peak: #0F172A;

  /* Data zone — ISA-101 grayscale first */
  --px-bg: #E6E7EA;
  --px-panel: #EDEEF0;
  --px-equip: #9CA3AF;
  --px-equip-strong: #4B5563;
  --px-line: #6B7280;
  --px-value: #111827;
  --px-label: #4B5563;
  --px-fluid: #B8BEC8;
  --chart-1: #111827;
  --chart-2: #6B7280;
  --chart-3: #9CA3AF;
  --chart-grid: #D9DBE0;

  /* ISA-18.2 priorities — the only strong colors in the data zone */
  --p1: #DC2626; --p1-soft: #FEE2E2; --p1-ink: #991B1B;
  --p2: #EA580C; --p2-soft: #FFEDD5; --p2-ink: #9A3412;
  --p3: #CA8A04; --p3-soft: #FEF9C3; --p3-ink: #854D0E;
  --p4: #0891B2; --p4-soft: #CFFAFE; --p4-ink: #155E75;
  --neutral: #6B7280;
  --neutral-soft: #E5E7EB;

  /* Honesty tags (chrome) */
  --tag-exists-bg: #E5E7EB;  --tag-exists-fg: #1F2937;
  --tag-mod-bg: #EDE9FE;     --tag-mod-fg: #5B21B6;
  --tag-plan-bg: #DBEAFE;    --tag-plan-fg: #1E40AF;
  --tag-concept-bg: #FEF3C7; --tag-concept-fg: #92400E;

  /* Login: one fixed look in every theme (the website's dark gradient design) */
  --login-bg: linear-gradient(135deg, #1E2947 0%, #0F172A 55%, #5B21B6 140%);
  --login-card: rgba(255, 255, 255, .06);
  --login-card-border: rgba(255, 255, 255, .12);
  --login-text: #FFFFFF;
  --login-muted: rgba(255, 255, 255, .78);
  --login-input-bg: #FFFFFF;
  --login-input-border: transparent;

  /* Brand gradient accent (user decision 2026-10-02): chrome only, never data */
  --brand-gradient: linear-gradient(90deg, #7C3AED 0%, #22C55E 100%);
  --brand-gradient-v: linear-gradient(180deg, #8B5CF6 0%, #22C55E 100%);

  --sans: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --radius: 12px;
  --radius-sm: 8px;
  --rail-w: 248px;
  --top-h: 56px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rail-bg: #0A0F1D; --rail-surface: #121B30; --rail-border: #1E2A44;
    --rail-text: #F1F4FA; --rail-muted: #A9B5CE;
    --rail-active-bg: rgba(139, 92, 246, .18); --rail-active-bar: #8B5CF6;
    --bg: #080C17; --surface: #10192B; --surface-2: #0D1524; --surface-3: #16223A;
    --border: #223049; --border-strong: #2C3C58;
    --text: #F3F6FC; --text-muted: #C0C9DC; --text-faint: #96A2BC;
    --accent: #8B5CF6; --accent-ink: #A78BFA; --accent-soft: #241D45; --on-accent: #FFFFFF;
    --focus: 0 0 0 3px rgba(167, 139, 250, .55);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .35);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);
    --scrim: rgba(0, 0, 0, .6);
    --brand-peak: #FFFFFF;
    --px-bg: #151B26; --px-panel: #1A2130; --px-equip: #4B5563; --px-equip-strong: #9CA3AF;
    --px-line: #6B7280; --px-value: #F3F4F6; --px-label: #9CA3AF; --px-fluid: #374151;
    --chart-1: #F3F4F6; --chart-2: #9CA3AF; --chart-3: #6B7280; --chart-grid: #263041;
    --p1: #F87171; --p1-soft: #3A1517; --p1-ink: #FCA5A5;
    --p2: #FB923C; --p2-soft: #3A2010; --p2-ink: #FDBA74;
    --p3: #FACC15; --p3-soft: #33290A; --p3-ink: #FDE68A;
    --p4: #22D3EE; --p4-soft: #0B2D35; --p4-ink: #A5F3FC;
    --neutral: #9CA3AF; --neutral-soft: #1F2937;
    --tag-exists-bg: #1F2937;  --tag-exists-fg: #E5E7EB;
    --tag-mod-bg: #2E2257;     --tag-mod-fg: #DDD6FE;
    --tag-plan-bg: #172554;    --tag-plan-fg: #BFDBFE;
    --tag-concept-bg: #3B2A0A; --tag-concept-fg: #FDE68A;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --rail-bg: #0A0F1D; --rail-surface: #121B30; --rail-border: #1E2A44;
  --rail-text: #F1F4FA; --rail-muted: #A9B5CE;
  --rail-active-bg: rgba(139, 92, 246, .18); --rail-active-bar: #8B5CF6;
  --bg: #080C17; --surface: #10192B; --surface-2: #0D1524; --surface-3: #16223A;
  --border: #223049; --border-strong: #2C3C58;
  --text: #F3F6FC; --text-muted: #C0C9DC; --text-faint: #96A2BC;
  --accent: #8B5CF6; --accent-ink: #A78BFA; --accent-soft: #241D45; --on-accent: #FFFFFF;
  --focus: 0 0 0 3px rgba(167, 139, 250, .55);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);
  --scrim: rgba(0, 0, 0, .6);
  --brand-peak: #FFFFFF;
  --px-bg: #151B26; --px-panel: #1A2130; --px-equip: #4B5563; --px-equip-strong: #9CA3AF;
  --px-line: #6B7280; --px-value: #F3F4F6; --px-label: #9CA3AF; --px-fluid: #374151;
  --chart-1: #F3F4F6; --chart-2: #9CA3AF; --chart-3: #6B7280; --chart-grid: #263041;
  --p1: #F87171; --p1-soft: #3A1517; --p1-ink: #FCA5A5;
  --p2: #FB923C; --p2-soft: #3A2010; --p2-ink: #FDBA74;
  --p3: #FACC15; --p3-soft: #33290A; --p3-ink: #FDE68A;
  --p4: #22D3EE; --p4-soft: #0B2D35; --p4-ink: #A5F3FC;
  --neutral: #9CA3AF; --neutral-soft: #1F2937;
  --tag-exists-bg: #1F2937;  --tag-exists-fg: #E5E7EB;
  --tag-mod-bg: #2E2257;     --tag-mod-fg: #DDD6FE;
  --tag-plan-bg: #172554;    --tag-plan-fg: #BFDBFE;
  --tag-concept-bg: #3B2A0A; --tag-concept-fg: #FDE68A;
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
#root { min-height: 100%; }
.boot { padding: 24px; color: var(--text-muted); }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 600; }
p { margin: 0; }
a { color: var(--accent-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.icon { width: 18px; height: 18px; flex-shrink: 0; }
.icon-sm { width: 15px; height: 15px; }

/* ---------- Brand lockup (BRAND_GUIDELINES v1.1 §8) ---------- */
.brand {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.0333em;
  line-height: 1;
  font-size: 20px;
  text-decoration: none;
  padding-bottom: 0.3em;
}
.brand-icon { width: 1.6em; height: 1.2em; margin-right: 0.4667em; position: relative; top: 0.3em; flex-shrink: 0; }
.brand-peak { color: var(--brand-peak); }
.brand-peak.on-dark { color: #FFFFFF; }
.brand-logic { color: #7C3AED; }

/* ---------- Buttons, inputs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text);
  font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--surface-3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-3); }
.btn-danger { background: var(--p1); border-color: var(--p1); color: #FFFFFF; }
.btn-sm { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn-icon { width: 36px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent-ink); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .field .label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.input, .select, .textarea {
  width: 100%; min-height: 38px; padding: 8px 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text);
}
.textarea { min-height: 72px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.hint { font-size: 13.5px; color: var(--text-muted); }
.error-text { font-size: 12.5px; color: var(--p1-ink); font-weight: 600; }

/* Switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { width: 38px; height: 22px; border-radius: 11px; background: var(--border-strong); position: relative; transition: background .15s ease; flex-shrink: 0; }
.switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { box-shadow: var(--focus); }
.switch input:disabled + .switch-track { opacity: .5; }
.switch-state { font-size: 12px; font-weight: 700; color: var(--text-muted); min-width: 24px; }

/* Segmented control */
/* A segmented control sits at its natural width (2026-10-15: inside a column flex .field or a grid cell it was stretched to
   the full width, so the last option looked as wide as the page). Each option has the same padding and never grows. */
.seg { display: inline-flex; width: max-content; max-width: 100%; align-self: flex-start; justify-self: start; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.seg button { flex: 0 1 auto; border: 0; background: transparent; padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--border-strong); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs button { border: 0; background: transparent; padding: 10px 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- Honesty tags, chips ---------- */
.htag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.htag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.htag-exists { background: var(--tag-exists-bg); color: var(--tag-exists-fg); }
.htag-modernized { background: var(--tag-mod-bg); color: var(--tag-mod-fg); }
.htag-planned { background: var(--tag-plan-bg); color: var(--tag-plan-fg); }
.htag-concept { background: var(--tag-concept-bg); color: var(--tag-concept-fg); }
.tags-off .htag { display: none; }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--text-muted); white-space: nowrap; }
.chip-accent { background: var(--accent-soft); color: var(--accent-ink); }

/* ---------- Alarm & comms visuals (data zone) ---------- */
.prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.prio svg { width: 16px; height: 16px; flex-shrink: 0; }
.prio-1 { color: var(--p1-ink); } .prio-2 { color: var(--p2-ink); } .prio-3 { color: var(--p3-ink); } .prio-4 { color: var(--p4-ink); }
.state { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; letter-spacing: .05em; padding: 1px 6px; border-radius: 4px; border: 1px solid currentColor; white-space: nowrap; }
.state-unack { color: var(--surface); background: var(--text); border-color: var(--text); }
.state-ack { color: var(--text-muted); }
.state-rtn { color: var(--text-muted); border-style: dashed; }
.state-shelved, .state-supp { color: var(--neutral); }
/* No flashing (user decision 2026-10-02). Unacknowledged = inverse UNACK label + priority bar on its row. */

.comm { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.comm svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---------- Login ---------- */
.login-page {
  /* Viewport units, not 100%: #root only has a min-height, so a percentage here resolves to nothing. */
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 16px 72px;
  background: var(--login-bg);
  color: var(--login-text);
  position: relative;
}
.login-top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.login-top .btn { background: transparent; color: var(--login-muted); border-color: var(--login-card-border); }
/* Same size and spacing as the app sign-in (views/cloud-login.ejs): 34.37rem wide, 3.5rem gap. */
.login-logotype { width: 34.37rem; max-width: 100%; height: auto; margin-bottom: 3.5rem; }
.login-card {
  width: 100%; max-width: 420px;
  background: var(--login-card); border: 1px solid var(--login-card-border);
  border-radius: 10px; padding: 32px 32px 24px; position: relative; overflow: hidden;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 14px;
}
.login-card h1 { text-align: center; font-size: 21px; color: var(--login-text); }
.login-card .lead { text-align: center; color: var(--login-muted); font-size: 14px; }
.login-card label { font-size: 12.5px; font-weight: 600; color: var(--login-muted); }
.login-card .input { background: var(--login-input-bg); color: #0F172A; border-color: var(--login-input-border); border-radius: 4px; }
.login-card .btn-primary { min-height: 42px; font-size: 15px; background: #7C3AED; border-color: #7C3AED; }
.login-card .btn-primary:hover { background: #6D28D9; }
.login-card .btn-secondary { background: transparent; color: var(--login-text); border-color: var(--login-card-border); }
.login-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: 13.5px; }
.login-links button { background: none; border: 0; color: var(--login-muted); text-decoration: underline; cursor: pointer; padding: 0; }
.login-links button:hover { color: var(--login-text); }
.login-alert { padding: 10px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.5; border: 1px solid; }
.login-alert-err { background: rgba(220, 38, 38, .12); border-color: rgba(220, 38, 38, .45); color: var(--login-text); }
.login-alert-info { background: rgba(139, 92, 246, .12); border-color: rgba(139, 92, 246, .35); color: var(--login-text); }
.code-input { font-family: var(--mono); font-size: 22px !important; letter-spacing: .4em; text-align: center; }
.org-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--login-card-border); background: transparent; color: var(--login-text); cursor: pointer; text-align: left; }
.org-option:hover { border-color: #8B5CF6; }
.org-mono { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: rgba(124, 58, 237, .18); color: var(--login-text); flex-shrink: 0; }
.rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--login-muted); }
.rules li { display: flex; gap: 6px; align-items: center; }
.rules li.ok { color: var(--login-text); }
.demo-accounts { width: 100%; max-width: 420px; margin-top: 16px; padding: 14px 16px; border-radius: 10px; border: 1px dashed var(--login-card-border); color: var(--login-muted); font-size: 12.5px; display: flex; flex-direction: column; gap: 8px; }
.demo-accounts strong { color: var(--login-text); }
.demo-accounts .acct { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; background: none; border: 0; padding: 4px 0; color: inherit; cursor: pointer; text-align: left; font-size: 12.5px; }
.demo-accounts .acct:hover span:first-child { color: var(--login-text); text-decoration: underline; }
.login-footer { position: absolute; bottom: 16px; left: 16px; right: 16px; text-align: center; font-size: 12px; color: var(--login-muted); }
.totp-grid { width: 132px; height: 132px; margin: 0 auto; background: #FFFFFF; padding: 8px; border-radius: 6px; }

/* ---------- Shell ---------- */
.proto-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 6px 16px; min-height: 36px;
  background: var(--surface-3); border-bottom: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-muted);
}
.proto-bar .label { font-weight: 800; letter-spacing: .08em; font-size: 12px; text-transform: uppercase; color: var(--text); }
.proto-bar select { min-height: 28px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 12.5px; }
.proto-bar .switch-track { width: 32px; height: 18px; }
.proto-bar .switch-track::after { width: 12px; height: 12px; }
.proto-bar .switch input:checked + .switch-track::after { transform: translateX(14px); }

.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: calc(100% - 36px); }
.rail {
  background: var(--rail-bg); color: var(--rail-text);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-right: 1px solid var(--rail-border);
}
.rail-head { padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 10px; }
.rail-partner { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--rail-surface); font-size: 12.5px; }
.rail-partner .mono-badge { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.rail-partner small { display: block; color: var(--rail-muted); font-size: 12px; }
.rail nav { padding: 4px 10px 16px; display: flex; flex-direction: column; gap: 2px; }
.nav-group-label { padding: 14px 10px 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rail-muted); }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 8px; border: 0;
  background: transparent; color: var(--rail-text); cursor: pointer; text-align: left;
  font-size: 14.5px; font-weight: 500; position: relative;
}
.nav-item:hover { background: var(--rail-surface); }
.nav-item[aria-current="page"] { background: var(--rail-active-bg); font-weight: 650; }
.nav-item[aria-current="page"]::before { content: ''; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 4px; border-radius: 0 4px 4px 0; background: var(--brand-gradient-v); }
.nav-item .icon { color: var(--rail-muted); }
.nav-item[aria-current="page"] .icon { color: var(--rail-text); }
.nav-item .count { margin-left: auto; font-size: 12px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--rail-surface); color: var(--rail-text); }
.nav-sub { padding-left: 38px; font-size: 13px; color: var(--rail-muted); }
.nav-sub[aria-current="page"] { color: var(--rail-text); }
.rail-foot { margin-top: auto; padding: 12px 18px 18px; font-size: 12px; color: var(--rail-muted); border-top: 1px solid var(--rail-border); }
.rail-foot .powered { display: flex; align-items: center; gap: 6px; }
.rail-foot .brand { font-size: 12px; padding-bottom: 0; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  min-height: var(--top-h); padding: 8px 16px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand-gradient); }
.topbar .menu-btn { display: none; }
.switcher {
  display: inline-flex; align-items: center; gap: 8px; max-width: 280px;
  padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); cursor: pointer; font-weight: 600; font-size: 13px;
}
.switcher span.name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher.static { cursor: default; border-color: transparent; padding-left: 0; }
.alarm-banner {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  cursor: pointer; text-align: left;
}
.alarm-banner .counts { display: flex; gap: 10px; flex-shrink: 0; }
.alarm-banner .latest { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-muted); }
.alarm-banner.has-p1 { border-color: var(--p1); background: var(--p1-soft); }
.alarm-banner.has-p1 .latest { color: var(--text); }
.status-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; background: none; border: 0; cursor: pointer; padding: 4px 6px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neutral); }
.status-dot.warn { background: var(--p3); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; font-size: 12.5px; flex-shrink: 0; }
.user-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; padding: 2px; border-radius: 999px; }
.assist-btn { color: #FFFFFF; border: 0; background: var(--brand-gradient); }
.assist-btn:hover { filter: brightness(1.08); background: var(--brand-gradient); }

.act-as {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; font-size: 13px;
  background: repeating-linear-gradient(-45deg, var(--accent-soft), var(--accent-soft) 12px, var(--surface-3) 12px, var(--surface-3) 24px);
  border-bottom: 1px solid var(--accent);
  color: var(--text);
}
.act-as strong { color: var(--accent-ink); }
.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 24px 0; font-size: 12.5px; color: var(--text-muted); }
.crumbs button { background: none; border: 0; padding: 0; color: var(--text-muted); cursor: pointer; }
.crumbs button:hover { color: var(--text); text-decoration: underline; }
.crumbs .here { color: var(--text); font-weight: 600; }

.workspace { display: flex; min-width: 0; flex: 1 1 auto; }
.page { flex: 1 1 auto; min-width: 0; padding: 16px 24px 32px; display: flex; flex-direction: column; gap: 16px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head .title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-head .title .row { gap: 10px; }
.page-head p { color: var(--text-muted); max-width: 70ch; }

/* Menus / popovers */
.menu-wrap { position: relative; }
.menu {
  position: absolute; top: calc(100% + 6px); z-index: 40; min-width: 240px; max-width: min(360px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 2px;
  max-height: 70vh; overflow-y: auto;
}
.menu.right { right: 0; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; font-size: 13.5px; }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-3); }
.menu-item small { display: block; color: var(--text-muted); font-size: 12px; }
.menu-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.menu-label { padding: 6px 10px 2px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.menu-item-end { margin-left: auto; color: var(--text-faint); }
.about-pop { position: fixed; z-index: 60; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: 13px; }
.about-pop-title { display: flex; align-items: center; gap: 6px; font-weight: 700; margin-bottom: 8px; }
.about-pop dl { margin: 0; display: grid; gap: 6px; }
.about-pop dl > div { display: grid; grid-template-columns: 92px 1fr; gap: 8px; }
.about-pop dt { color: var(--text-muted); }
.about-pop dd { margin: 0; overflow-wrap: anywhere; }
.health-dot { width: 10px; height: 10px; flex-shrink: 0; }

/* ---------- Panels & grid ---------- */
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; min-width: 0;
}
.panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); min-height: 48px; }
.panel-head h2 { font-size: 15.5px; font-weight: 700; }
.panel-head .actions { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.panel-body { padding: 14px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.panel-body.flush { padding: 0; }
.panel.dragging { opacity: .5; }
.panel.drop-target { outline: 2px dashed var(--accent); outline-offset: 2px; }
.grip { cursor: grab; color: var(--text-faint); }
.editing .panel { border-style: dashed; border-color: var(--border-strong); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi .k-label { font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
.kpi .k-value { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--px-value); line-height: 1.15; }
.kpi .k-value small { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-left: 3px; }
.kpi .k-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text-muted); }
.kpi.abnormal { border-color: var(--p2); }
.spark { width: 84px; height: 26px; flex-shrink: 0; }

.table-wrap { overflow-x: auto; min-width: 0; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.clickable { cursor: pointer; }
.tbl tr.clickable:hover td { background: var(--surface-2); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Alarm wall */
.alarm-list { display: flex; flex-direction: column; }
.alarm-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.alarm-row:last-child { border-bottom: 0; }
.alarm-row.unack { background: var(--surface-2); }
.alarm-row.unack.p1 { box-shadow: inset 4px 0 0 var(--p1); } .alarm-row.unack.p2 { box-shadow: inset 4px 0 0 var(--p2); }
.alarm-row.unack.p3 { box-shadow: inset 4px 0 0 var(--p3); } .alarm-row.unack.p4 { box-shadow: inset 4px 0 0 var(--p4); }
.alarm-row .msg { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.alarm-row .meta { font-size: 13px; color: var(--text-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.alarm-row .acts { display: flex; gap: 4px; align-items: center; }
.alarm-row.selected { box-shadow: inset 3px 0 0 var(--text-muted); }

/* Map */
.map-wrap { position: relative; background: var(--px-bg); border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
.map-svg { display: block; width: 100%; height: auto; }
.map-legend { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 10px; flex-wrap: wrap; padding: 6px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }
.map-pop { position: absolute; z-index: 5; min-width: 220px; max-width: 280px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 8px; font-size: 13px; }

/* Comms matrix */
.comms-grid { display: flex; flex-direction: column; gap: 10px; }
.comms-row { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr); gap: 10px; align-items: start; }
.comms-row .who { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comms-cells { display: flex; flex-wrap: wrap; gap: 4px; }
.comms-cell { width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; background: var(--px-panel); border: 1px solid var(--border); cursor: default; }
.comms-cell svg { width: 13px; height: 13px; }
.comms-summary { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; }

/* Bars */
.bar { height: 8px; border-radius: 4px; background: var(--neutral-soft); overflow: hidden; min-width: 60px; }
.bar > span { display: block; height: 100%; background: var(--chart-2); }
.bar.warn > span { background: var(--p3); }
.bar.crit > span { background: var(--p1); }

/* Bottom layout bar */
.layout-bar {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 24px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--border);
}
.layout-bar .label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.layout-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.layout-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card h3 { font-size: 15px; }
.card .foot { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-3); border: 1px solid var(--border); font-size: 13px; }
.notice .icon { color: var(--text-muted); margin-top: 1px; }
.notice.accent { background: var(--accent-soft); border-color: transparent; }
.notice.accent .icon { color: var(--accent-ink); }
.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.checklist li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.check-ok { color: var(--text); }
.check-fail { color: var(--p1-ink); font-weight: 600; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: 13px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Steps (wizards) */
.steps { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-faint); }
.steps li .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-strong); font-size: 12px; }
.steps li.current { color: var(--text); }
.steps li.current .n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.steps li.done .n { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.steps li + li::before { content: ''; width: 20px; height: 1px; background: var(--border-strong); }

/* Module toggles */
.module-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.module { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); }
.module.on { border-color: var(--accent); }
.module .grow h3 { font-size: 13.5px; }
.module .grow p { font-size: 12.5px; color: var(--text-muted); }

/* Permission matrix */
.matrix td.c, .matrix th.c { text-align: center; width: 72px; }
.matrix .yes { color: var(--text); font-weight: 800; }
.matrix .no { color: var(--text-faint); }
.matrix .gated { color: var(--text-faint); text-decoration: line-through; }
.matrix tr.group td { background: var(--surface-3); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.matrix th.c.sel, .matrix td.c.sel { background: var(--accent-soft); }

.preview-frame { border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 280px; }
.preview-rail { background: var(--rail-bg); color: var(--rail-text); padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.preview-rail div { padding: 5px 8px; border-radius: 6px; display: flex; gap: 8px; align-items: center; }
.preview-rail .icon { width: 14px; height: 14px; color: var(--rail-muted); }
.preview-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }

/* Audit */
.audit-row td:first-child { white-space: nowrap; }
.who-on-behalf { font-size: 12px; color: var(--accent-ink); font-weight: 600; }

/* ---------- Modal, drawer, toast ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--border); display: flex; flex-direction: column; }
.modal.wide { max-width: 760px; }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 16px; }
.modal-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.toasts { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 32px); }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--rail-bg); color: var(--rail-text); box-shadow: var(--shadow-lg); font-size: 13px; max-width: 380px; }

/* PeakAssist dock */
.assist {
  width: 360px; flex-shrink: 0;
  border-left: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column;
  position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h));
}
.assist-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.assist-head .spark-ico { color: var(--accent-ink); }
.assist-body { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.assist-msg { padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.5; max-width: 100%; overflow-wrap: anywhere; }
.assist-msg.user { align-self: flex-end; background: var(--accent-soft); color: var(--text); max-width: 85%; }
.assist-msg.bot { background: var(--surface-2); border: 1px solid var(--border); }
.assist-msg.bot ul { margin: 6px 0 0; padding-left: 18px; }
.assist-msg .src { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.assist-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.assist-suggest button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 999px; padding: 5px 10px; font-size: 12.5px; cursor: pointer; }
.assist-suggest button:hover { border-color: var(--accent); }
.assist-foot { padding: 12px 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; }

/* ---------- PeakView360 ---------- */
.pv { min-height: 100vh; display: flex; flex-direction: column; background: var(--px-bg); color: var(--px-value); }
.pv-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: var(--rail-bg); color: var(--rail-text); }
.pv-top .brand { font-size: 15px; padding-bottom: 0; }
.pv-top .site { font-weight: 700; }
.pv-top .muted { color: var(--rail-muted); }
.pv-alarmbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 16px; background: var(--px-panel); border-bottom: 1px solid var(--chart-grid); font-size: 13px; }
.pv-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; padding: 12px 16px 16px; flex: 1 1 auto; }
.pv-canvas { background: var(--px-panel); border: 1px solid var(--chart-grid); border-radius: var(--radius-sm); min-width: 0; overflow-x: auto; }
.pv-canvas svg { display: block; width: 100%; min-width: 640px; height: auto; }
.pv-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pv-card { background: var(--px-panel); border: 1px solid var(--chart-grid); border-radius: var(--radius-sm); padding: 12px; display: flex; flex-direction: column; gap: 10px; color: var(--px-value); }
.pv-card h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--px-label); }
.pv-ctl { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--chart-grid); }
.pv-ctl:first-of-type { border-top: 0; }
.pv-ctl .btn { min-height: 30px; }
.pv-events { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; max-height: 260px; overflow-y: auto; }
.pv-events div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
.pv-overlay { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--px-bg); overflow-y: auto; }
.pv-overlay-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: var(--surface-3); color: var(--text-muted); font-size: 12.5px; border-bottom: 1px solid var(--border); }
.hmi-text { font-family: var(--sans); fill: var(--px-label); font-size: 12px; }
.hmi-val { font-family: var(--sans); font-variant-numeric: tabular-nums; fill: var(--px-value); font-size: 15px; font-weight: 700; }
.hmi-unit { fill: var(--px-label); font-size: 12px; font-weight: 500; }
.hmi-title { font-family: var(--sans); fill: var(--px-value); font-size: 13px; font-weight: 700; }

/* ---------- Design system page ---------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.swatch { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; font-size: 12px; background: var(--surface); }
.swatch .chip-color { height: 48px; border-bottom: 1px solid var(--border); }
.swatch div:last-child { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.ds-section { display: flex; flex-direction: column; gap: 12px; }
.ds-demo { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ds-demo.data { background: var(--px-bg); }
.rule-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; max-width: 75ch; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .assist { position: fixed; right: 0; top: 0; height: 100vh; z-index: 50; box-shadow: var(--shadow-lg); }
  .span-3 { grid-column: span 6; } .span-4, .span-5, .span-7, .span-8 { grid-column: span 12; } .span-6 { grid-column: span 12; }
  .pv-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); z-index: 55; transform: translateX(-100%); transition: transform .2s ease; }
  .rail.open { transform: none; box-shadow: var(--shadow-lg); }
  .rail-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 54; }
  .topbar .menu-btn { display: inline-flex; }
  .alarm-banner .latest { display: none; }
  .hide-md { display: none !important; }
}
@media (max-width: 720px) {
  .grid12 { grid-template-columns: minmax(0, 1fr); }
  .grid12 > * { grid-column: 1 / -1; }
  .page { padding: 12px 16px 24px; }
  .crumbs { padding: 10px 16px 0; }
  .layout-bar { padding-left: 16px; padding-right: 16px; }
  .topbar { padding: 8px 12px; gap: 6px; flex-wrap: wrap; }
  .switcher { max-width: 150px; }
  .hide-sm { display: none !important; }
  .assist { width: 100%; }
  .alarm-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .comms-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .preview-frame { grid-template-columns: minmax(0, 1fr); }
  .login-card { padding: 24px 20px 20px; }
  .login-logotype { margin-top: 32px; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* ===================== Round 1 feedback pass (2026-10-02) ===================== */
.login-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand-gradient); }
.login-product { margin: -24px 0 32px; font-size: 15px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: rgba(255, 255, 255, .85); text-align: center; }
.cc-name { font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--rail-text); padding-left: 2px; }
.cc-name::after { content: ''; display: block; height: 3px; width: 56px; margin-top: 8px; border-radius: 2px; background: var(--brand-gradient); }

/* Info (i) button and popover on every panel / page header */
.info-wrap { position: relative; display: inline-flex; }
.info-btn { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); display: inline-grid; place-items: center; cursor: pointer; font: italic 700 13px/1 Georgia, serif; flex-shrink: 0; padding: 0; }
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--accent-ink); border-color: var(--accent); }
.info-pop { position: absolute; top: calc(100% + 8px); left: -8px; z-index: 45; width: min(320px, calc(100vw - 48px)); padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--text); text-transform: none; letter-spacing: 0; }
.info-pop strong { display: block; margin-bottom: 4px; }
/* Drawn on the top layer (portal to body): never clipped by a scrolling container. */
.info-pop.info-pop-top { position: fixed; top: auto; z-index: 3000; }
.info-pop.right { left: auto; right: -8px; }

/* Overview: status headline + attention list */
.headline { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; position: relative; }
.headline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--brand-gradient-v); }
.headline-top { display: flex; align-items: center; gap: 14px; padding: 18px 20px 14px 24px; flex-wrap: wrap; }
.headline-top h2 { font-size: 22px; letter-spacing: -0.015em; }
.headline-top .sub { color: var(--text-muted); font-size: 15px; }
.attn { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 20px 12px 24px; border-top: 1px solid var(--border); }
.attn .what { font-weight: 650; font-size: 15px; overflow-wrap: anywhere; }
.attn .where { color: var(--text-muted); font-size: 13.5px; }
.attn .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.all-clear { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--border); color: var(--text-muted); }

/* Detail sections (accordion) */
.details { display: flex; flex-direction: column; gap: 12px; }
.detail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.detail-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 52px; }
.detail-toggle { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--text); }
.detail-toggle h2 { font-size: 15.5px; white-space: nowrap; }
.detail-toggle .summary { color: var(--text-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.detail-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.detail.dragging { opacity: .5; }
.detail.drop-target { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* Live map: Leaflet over real county geography (no tiles; the artifact CSP blocks tile servers) */
.live-map { height: 420px; width: 100%; border-radius: 0 0 var(--radius) var(--radius); background: var(--px-bg); z-index: 0; }
.live-map.tall { height: 540px; }
.leaflet-container { background: var(--px-bg) !important; font-family: var(--sans) !important; }
.geo-county { fill: var(--px-panel); fill-opacity: 1; stroke: var(--chart-grid); stroke-width: 1px; }
.geo-state { fill: none; stroke: var(--px-line); stroke-width: 1.4px; }
.map-city { font-size: 12.5px; color: var(--px-label); font-weight: 600; white-space: nowrap; text-shadow: 0 0 3px var(--px-bg), 0 0 3px var(--px-bg), 0 0 3px var(--px-bg); }
.map-pin svg { display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface) !important; color: var(--text) !important; box-shadow: var(--shadow-lg) !important; }
.leaflet-popup-content { margin: 12px 14px !important; font-size: 14px !important; line-height: 1.45 !important; min-width: 220px; }
.leaflet-popup-content .row { margin-top: 6px; }
.leaflet-bar a { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
.leaflet-control-attribution { background: var(--surface) !important; color: var(--text-muted) !important; font-size: 12px !important; }

/* Device detail */
.dev-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.pt-val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--px-value); }
.pt-row.abn td { background: var(--surface-2); }
.limit-input { width: 84px; min-height: 32px; padding: 4px 8px; }

/* PeakAssist: the one help center */
.assist { width: 400px; }
.assist-ask { padding: 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); }
.guide { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.guide ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.guide-btn { text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); padding: 10px 0; cursor: pointer; display: flex; gap: 8px; align-items: flex-start; width: 100%; font-size: 14.5px; }
.guide-btn:hover strong { color: var(--accent-ink); text-decoration: underline; }

/* PeakView360 as an in-app page */
.pv-page { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.pv-page .pv { min-height: 0; }

/* ---------- Leaflet 1.9.4 core CSS (BSD-2-Clause), inlined ---------- */
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(images/marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}


/* ===================== Professional pass (user direction 2026-10-02: Control Hub-like) =====================
   Neutral, restrained surfaces; square-ish corners; quieter type; color reserved for state and the brand accents. */
:root {
  --rail-bg: #12151B; --rail-surface: #1B1F27; --rail-border: #232833; --rail-text: #E6E9EF; --rail-muted: #9AA3B2;
  --rail-active-bg: rgba(255, 255, 255, .07);
  --bg: #F4F5F7; --surface: #FFFFFF; --surface-2: #F9FAFB; --surface-3: #EEF0F3;
  --border: #E1E4E9; --border-strong: #C9CED6;
  --text: #14171C; --text-muted: #4B5361; --text-faint: #6B7280;
  --accent: #7C3AED; --accent-ink: #6D28D9; --accent-soft: #F1EBFE;
  --shadow: none; --shadow-lg: 0 8px 28px rgba(20, 23, 28, .16);
  --px-bg: #ECEEF1; --px-panel: #F5F6F8; --chart-grid: #DDE0E5;
  --radius: 6px; --radius-sm: 4px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rail-bg: #0A0C10; --rail-surface: #161A21; --rail-border: #1E232B; --rail-text: #E6E9EF; --rail-muted: #9AA3B2;
    --rail-active-bg: rgba(255, 255, 255, .07);
    --bg: #0D1015; --surface: #151920; --surface-2: #1A1F27; --surface-3: #212731;
    --border: #2A313C; --border-strong: #3A424F;
    --text: #E9ECF1; --text-muted: #B4BBC7; --text-faint: #8D95A3;
    --accent: #8B5CF6; --accent-ink: #B39DFA; --accent-soft: #241D3D;
    --shadow: none; --shadow-lg: 0 10px 32px rgba(0, 0, 0, .55);
    --px-bg: #12161C; --px-panel: #181D25; --chart-grid: #262C36;
  }
}
:root[data-theme="dark"] {
  --rail-bg: #0A0C10; --rail-surface: #161A21; --rail-border: #1E232B; --rail-text: #E6E9EF; --rail-muted: #9AA3B2;
  --rail-active-bg: rgba(255, 255, 255, .07);
  --bg: #0D1015; --surface: #151920; --surface-2: #1A1F27; --surface-3: #212731;
  --border: #2A313C; --border-strong: #3A424F;
  --text: #E9ECF1; --text-muted: #B4BBC7; --text-faint: #8D95A3;
  --accent: #8B5CF6; --accent-ink: #B39DFA; --accent-soft: #241D3D;
  --shadow: none; --shadow-lg: 0 10px 32px rgba(0, 0, 0, .55);
  --px-bg: #12161C; --px-panel: #181D25; --chart-grid: #262C36;
}

body { font-size: 14.5px; letter-spacing: 0; }
h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-weight: 600; }
.page { padding: 20px 28px 36px; gap: 18px; }
.page-head { align-items: center; }
.panel, .card, .detail, .headline, .kpi, .module, .guide { border-radius: var(--radius); box-shadow: none; }
.panel-head { min-height: 46px; padding: 10px 14px; }
.panel-head h2, .detail-toggle h2 { font-size: 14.5px; font-weight: 600; }
.btn { border-radius: var(--radius-sm); min-height: 32px; font-weight: 500; font-size: 13.5px; }
.btn-sm { min-height: 28px; font-size: 13px; }
.btn-primary { font-weight: 600; }
.input, .select, .textarea { border-radius: var(--radius-sm); min-height: 34px; }
.seg { border-radius: var(--radius-sm); }
.seg button { font-weight: 500; }
.chip { border-radius: 3px; font-weight: 500; font-size: 12px; }
.state { border-radius: 2px; }
.switcher, .alarm-banner { border-radius: var(--radius-sm); }
.menu { border-radius: var(--radius); }

/* Honesty tags: quiet outlined labels */
.htag { background: transparent !important; border: 1px solid currentColor; border-radius: 3px; padding: 1px 6px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .9; }
.htag::before { display: none; }

/* Rail and top bar */
.nav-item { font-size: 14px; font-weight: 450; border-radius: var(--radius-sm); padding: 7px 10px; }
.nav-item[aria-current="page"] { font-weight: 600; }
.nav-group-label { font-size: 12px; letter-spacing: .1em; }
.topbar { min-height: 54px; }
.topbar::before { height: 2px; }
.assist-btn { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.assist-btn .icon { color: var(--accent-ink); }
.assist-btn:hover, .assist-btn[aria-pressed="true"] { background: var(--accent-soft); filter: none; }
.avatar { width: 30px; height: 30px; font-size: 12px; font-weight: 700; }

/* Tables */
.tbl th { font-size: 12px; font-weight: 600; letter-spacing: .05em; padding: 9px 12px; background: var(--surface-2); }
.tbl td { padding: 10px 12px; }
.tbl.dense td { padding: 7px 12px; }
.tbl th[aria-sort] .link-btn:hover { color: var(--text); }

/* Overview */
.headline::before { display: none; }
.headline-top { padding: 14px 16px 6px; }
.headline-top h2 { font-size: 16px; font-weight: 600; }
.headline-top .sub { font-size: 13.5px; }
.health { padding: 6px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.health-bar { display: flex; height: 12px; border-radius: 2px; overflow: hidden; background: var(--surface-3); }
.health-bar span { display: block; height: 100%; }
.health-bar span + span { border-left: 2px solid var(--surface); }
.health-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.health-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.health-legend strong { color: var(--text); margin-left: 2px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 1px solid var(--border); }
.stat-row > div { padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-row > div + div { border-left: 1px solid var(--border); }
.stat-row strong { font-size: 24px; font-weight: 600; color: var(--px-value); line-height: 1.2; }
.stat-row strong small { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-left: 3px; }
.k-label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.attn-label { padding: 10px 16px 6px; border-top: 1px solid var(--border); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-2); }
.attn { padding: 10px 16px; grid-template-columns: 22px minmax(0, 1fr) auto; }
.attn .what { font-size: 14px; font-weight: 600; }
.all-clear { padding: 12px 16px; }

/* Normalized bullet charts */
.bullets { display: flex; flex-direction: column; }
.bullet-row { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) 96px; gap: 12px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.bullet-row:last-child { border-bottom: 0; }
.bullet-row:hover, .bullet-row:focus-visible { background: var(--surface-2); }
.b-name { font-size: 13.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-name .hint { display: block; font-weight: 400; font-size: 12px; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; }
.b-track { position: relative; height: 14px; background: var(--surface-3); border-radius: 2px; }
.b-band { position: absolute; top: 0; bottom: 0; background: var(--chart-grid); border-radius: 2px; }
.b-mark { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; background: var(--chart-1); border-radius: 1px; }
.b-mark.near { background: var(--p3); }
.b-mark.out { background: var(--p2); width: 4px; }
.b-val { font-size: 13.5px; font-weight: 600; text-align: right; white-space: nowrap; }
.b-val small { font-weight: 400; color: var(--text-muted); }
.b-val.out { color: var(--p2-ink); }

/* Device lookup */
.lookup-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.search-field { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); min-width: min(100%, 320px); }
.search-field:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.search-field .icon { color: var(--text-muted); }
.search-field .input { border: 0; box-shadow: none !important; padding-left: 0; background: transparent; }
.select.filter { width: auto; min-width: 150px; }
.facet-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.facet { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: 3px; background: var(--surface); font-size: 13px; cursor: pointer; }
.facet svg { width: 12px; height: 12px; }
.facet .num { color: var(--text-muted); }
.facet[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.dev-title { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.dev-title h1 { margin-right: 4px; }

/* Global search in the top bar */
.gsearch { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 10px; height: 34px; width: 280px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted); }
.gsearch:focus-within { border-color: var(--accent); box-shadow: var(--focus); background: var(--surface); }
.gsearch input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 13.5px; color: var(--text); }
.gsearch .menu { top: calc(100% + 6px); }

/* Historian */
.hist-pt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13.5px; }
.hist-pt:hover { background: var(--surface-2); }
.hist-pt .mono { font-size: 12.5px; }

/* Device console window */
.console { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.console-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: var(--rail-bg); color: var(--rail-text); }
.console-top .muted { color: var(--rail-muted); }
.console-top .brand { padding-bottom: 0; }
.console-session { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 8px; border: 1px solid var(--rail-border); border-radius: 3px; color: var(--rail-text); }
.console-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); flex: 1 1 auto; }
.console-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-right: 1px solid var(--border); background: var(--surface); }
.console-nav button { text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; color: var(--text); }
.console-nav button[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.console-main { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.console-log { margin: 0; padding: 12px; background: var(--rail-bg); color: #D7DCE4; border-radius: var(--radius-sm); font-family: var(--mono); font-size: 12.5px; overflow-x: auto; }
.console-foot { display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface); }

@media (max-width: 1180px) { .gsearch { width: 200px; } }
@media (max-width: 720px) {
  .bullet-row { grid-template-columns: minmax(0, 1fr) 84px; }
  .bullet-row .b-track { grid-column: 1 / -1; grid-row: 2; }
  .stat-row > div + div { border-left: 0; border-top: 1px solid var(--border); }
  .console-body { grid-template-columns: minmax(0, 1fr); }
  .console-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .page { padding: 14px 16px 24px; }
}


/* ===================== Header and gradient revision (user, 2026-10-02) =====================
   Sign-in back to its previous design (no gradient edge, no product line); no gradient in the rail;
   "Control Center" centered in the page header. The only gradient left is the top-bar line. */
.login-card::before { display: none; }
.nav-item[aria-current="page"]::before { background: var(--rail-active-bar); width: 3px; }
.topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.tb-left, .tb-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb-right { justify-content: flex-end; }
.tb-left .alarm-banner { flex: 1 1 auto; min-width: 0; }
.tb-title { font-size: 13px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--text); white-space: nowrap; text-align: center; }
.gsearch { width: 240px; }
@media (max-width: 1180px) { .gsearch { width: 180px; } }
@media (max-width: 900px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .tb-title { display: none; }
}


/* ===================== PeakAssist button + Settings in the account menu (user, 2026-10-02) =====================
   A solid brand-purple button like the website's sign-in button, with a steady glow so it reads as AI.
   No animation: nothing on screen flashes or pulses. */
.assist-btn { background: #7C3AED; color: #FFFFFF; border: 0; font-weight: 600; min-height: 34px; padding: 0 14px;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .55), 0 0 14px rgba(124, 58, 237, .55), 0 0 30px rgba(124, 58, 237, .25); }
.assist-btn .icon { color: #FFFFFF; }
.assist-btn:hover, .assist-btn[aria-pressed="true"] { background: #6D28D9; color: #FFFFFF; filter: none;
  box-shadow: 0 0 0 1px rgba(196, 181, 253, .7), 0 0 18px rgba(124, 58, 237, .7), 0 0 36px rgba(124, 58, 237, .32); }
.assist-btn:focus-visible { box-shadow: var(--focus), 0 0 18px rgba(124, 58, 237, .6); }
.menu-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); }


/* Header revision (user, 2026-10-02): "Control Center" at the left edge; gradient line along the bottom. */
.topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
.tb-title { text-align: left; padding-right: 8px; border-right: 1px solid var(--border); margin-right: 4px; }
.topbar::before { top: auto; bottom: -1px; height: 2px; }
@media (max-width: 900px) { .topbar { grid-template-columns: minmax(0, 1fr) auto; } }


/* (i) buttons: upright purple "i" (user, 2026-10-02). Profile photo and account menu header. */
.info-btn { font: 700 13px/1 var(--sans); font-style: normal; color: var(--accent-ink); border-color: var(--accent); background: transparent; }
.info-btn:hover, .info-btn[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.avatar-img { object-fit: cover; display: block; padding: 0; background: var(--surface-3); }
.menu-profile { display: flex; gap: 12px; align-items: center; padding: 10px; }
.profile-photo { display: flex; justify-content: center; padding: 8px 0; }
.profile-photo .avatar { font-size: 40px; }


/* ===================== White-label branding + small (i) + rail home link (user, 2026-10-02) ===================== */
.info-btn { width: 18px; height: 18px; font-size: 11px; border-width: 1px; }
.rail-home { display: inline-flex; align-items: center; background: none; border: 0; padding: 4px; margin: -4px; border-radius: var(--radius-sm); cursor: pointer; max-width: 100%; color: inherit; }
.rail-home:hover { background: var(--rail-surface); }
.rail-sub { display: block; color: var(--rail-muted); font-size: 12px; margin-top: 6px; }
.org-logo { display: block; max-width: 200px; width: auto; object-fit: contain; }
.org-icon { display: inline-grid; place-items: center; border-radius: 6px; flex-shrink: 0; object-fit: cover; }
.org-mono { color: #FFFFFF; font-weight: 700; }
.org-plate { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 4px; }
.plate-light { background: #FFFFFF; }
.plate-dark { background: #12151B; }
.org-fallback { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.org-fallback strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-foot .serviced { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.logo-slots { display: flex; flex-direction: column; gap: 14px; }
.logo-slot { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: center; }
.logo-preview { height: 76px; border-radius: var(--radius-sm); border: 1px solid var(--border); display: grid; place-items: center; padding: 10px; }
.logo-preview img { max-height: 52px; max-width: 100%; }
.logo-preview.plate-light .muted { color: #6B7280; }
.logo-preview.plate-dark .muted { color: #9AA3B2; }
.warn-text { font-size: 13px; color: var(--p3-ink); font-weight: 600; }
.warn-chip { background: var(--p3-soft); color: var(--p3-ink); }
.brand-preview { display: grid; grid-template-columns: 180px minmax(0, 1fr); border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; min-height: 220px; }
.bp-rail { background: var(--rail-bg); color: var(--rail-text); display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; font-size: 13px; }
.bp-head { padding: 4px 6px 12px; }
.bp-item { padding: 6px 8px; border-radius: 4px; }
.bp-item.on { background: var(--rail-active-bg); font-weight: 600; }
.bp-foot { margin-top: auto; font-size: 12px; color: var(--rail-muted); display: flex; flex-direction: column; gap: 4px; padding: 0 6px; }
.bp-foot .brand { padding-bottom: 0; }
.bp-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.bp-card { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 12px; }
@media (max-width: 720px) {
  .logo-slot { grid-template-columns: minmax(0, 1fr); }
  .brand-preview { grid-template-columns: minmax(0, 1fr); }
}


/* ===================== Numbered priority badges + clearer communications (user, 2026-10-02) ===================== */
:root { --p1-on: #FFFFFF; --p2-on: #FFFFFF; --p3-on: #1F2937; --p4-on: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --p1-on: #0B0F14; --p2-on: #0B0F14; --p3-on: #0B0F14; --p4-on: #0B0F14; } }
:root[data-theme="dark"] { --p1-on: #0B0F14; --p2-on: #0B0F14; --p3-on: #0B0F14; --p4-on: #0B0F14; }
.prio { font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.prio-badge { flex-shrink: 0; }
.comms { display: flex; flex-direction: column; gap: 14px; }
.comm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.comm-tile { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); }
.comm-tile.bad { border-color: var(--border-strong); background: var(--surface-2); }
.comm-ico svg { width: 14px; height: 14px; display: block; }
.comm-count { margin-left: auto; font-size: 18px; font-weight: 600; color: var(--px-value); }
.comm-groups { display: flex; flex-direction: column; gap: 6px; }
.comm-group { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }


/* ===================== Sidebar gradient (user, 2026-10-02): same treatment as the sign-in page ===================== */
.rail { background: linear-gradient(165deg, #1E2947 0%, #0F172A 52%, #5B21B6 140%); border-right-color: rgba(255, 255, 255, .06); }
.rail .nav-item:hover, .rail .rail-home:hover { background: rgba(255, 255, 255, .07); }
.rail .nav-item[aria-current="page"] { background: rgba(255, 255, 255, .10); }
.rail-foot { border-top-color: rgba(255, 255, 255, .08); }
.request-text { margin: 0; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-family: var(--sans); font-size: 13.5px; white-space: pre-wrap; user-select: all; }

/* (i) buttons at half size (user, 2026-10-02); an invisible 26 px hit area keeps them easy to click and tap. */
/* The (i) is drawn as an SVG (2026-10-15): a 7.5 px letter "i" in a 10 px ring could not sit on the centre line and
   rendered fuzzy. The drawing is centred by construction; the button is 12 px, still small. */
.info-btn { position: relative; width: 12px; height: 12px; padding: 0; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; color: var(--accent-ink); }
.info-btn svg { display: block; width: 12px; height: 12px; }
.info-btn:hover, .info-btn[aria-expanded="true"] { background: transparent; color: var(--accent); }
.info-btn::after { content: ''; position: absolute; inset: -8px; }


/* ===================== Dark mode refinement (user, 2026-10-02) =====================
   Dark mode moves onto the brand navy family (the sign-in page and sidebar), with clear elevation:
   page < header < panels < panel insets. Light mode is unchanged. */
:root { --chart-band: #D3D7DE; --topbar-bg: var(--surface); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0B1120; --surface: #131B2E; --surface-2: #182238; --surface-3: #1F2A44;
    --border: #26314A; --border-strong: #34405C;
    --text: #E8ECF5; --text-muted: #AEB8CE; --text-faint: #8590AB;
    --accent: #8B5CF6; --accent-ink: #B9A5FB; --accent-soft: #2A2150;
    --px-bg: #0F1729; --px-panel: #151F36; --chart-grid: #2B3753; --chart-band: #3A4767; --topbar-bg: #111A2D;
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, .6); } }
:root[data-theme="dark"] { --bg: #0B1120; --surface: #131B2E; --surface-2: #182238; --surface-3: #1F2A44;
    --border: #26314A; --border-strong: #34405C;
    --text: #E8ECF5; --text-muted: #AEB8CE; --text-faint: #8590AB;
    --accent: #8B5CF6; --accent-ink: #B9A5FB; --accent-soft: #2A2150;
    --px-bg: #0F1729; --px-panel: #151F36; --chart-grid: #2B3753; --chart-band: #3A4767; --topbar-bg: #111A2D;
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, .6); }
.topbar { background: var(--topbar-bg); }
.b-track { background: var(--surface-3); }
.b-band { background: var(--chart-band); }
.panel, .detail, .headline, .card, .kpi { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
.rail { border-right: 1px solid rgba(255, 255, 255, .08); }

/* Settings page */
.settings-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-nav { position: sticky; top: calc(var(--top-h) + 16px); display: flex; flex-direction: column; gap: 2px; padding: 12px 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.settings-body { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) { .settings-layout { grid-template-columns: minmax(0, 1fr); } .settings-nav { position: static; } }
/* Profile and settings: one page (user, 2026-10-15). The person on top; groups in the side menu each
   with a scope note; on a phone the side menu becomes a select at the top. */
.ps-page { display: flex; flex-direction: column; gap: 18px; }
.ps-head { display: flex; gap: 14px; align-items: center; min-width: 0; }
.ps-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-kicker { font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ps-name { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.ps-chips { flex-wrap: wrap; gap: 6px 8px; font-size: 13px; }
.ps-chips .muted { overflow-wrap: anywhere; min-width: 0; }
.ps-group + .ps-group { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.ps-group-note { margin: 0 10px 6px; font-size: 12px; line-height: 1.4; }
.ps-scope { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.45; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); }
.ps-scope strong { color: var(--text); }
.ps-scope.is-personal { border-color: var(--accent-soft); background: var(--accent-soft); }
.ps-scope.is-personal strong, .ps-scope.is-personal .icon { color: var(--accent-ink); }
.ps-scope .icon { flex: none; margin-top: 2px; }
.ps-select { display: none; margin: 0; }
.ps-select .select { width: 100%; }
@media (max-width: 900px) { .ps-select { display: flex; flex-direction: column; gap: 6px; } .settings-layout > .settings-nav { display: none; } }
.settings-nav-foot { margin: 8px 0 0; padding: 10px 10px 2px; border-top: 1px solid var(--border); font-size: 12.5px; }

/* Form rows (My profile and Settings, 2026-10-15): a label column and a control column, the helper text
   under the control, short controls at a short width; one column on a phone. */
.form-rows { display: flex; flex-direction: column; }
.form-row { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 6px 24px; padding: 14px 0; align-items: start; }
.form-row + .form-row { border-top: 1px solid var(--border); }
.form-row:first-child { padding-top: 0; }
.form-row:last-child { padding-bottom: 0; }
.form-row-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; }
.form-row-label label, .form-row-label .label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.form-row-control { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.form-row-control > span:not(.hint):not(.error-text), .form-row-control > strong { min-height: 36px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.form-row-control > .hint { max-width: 62ch; }
.form-row-control > .row { flex-wrap: wrap; }
.form-row-control > .notice { align-self: stretch; }
.form-row-control label.btn:has(+ input:focus-visible) { box-shadow: var(--focus); }
.input-md { width: 100%; max-width: 320px; }
.input-sm { width: 100%; max-width: 140px; }
.form-row-control > .row > .input-md { flex: 0 1 320px; width: auto; min-width: 0; }
.form-row-control > .row > .input-sm { flex: 0 1 140px; width: auto; min-width: 0; }
.form-row-control .select:disabled, .form-row-control .input:disabled, .seg button:disabled { opacity: .6; cursor: not-allowed; }
.recovery-codes { columns: 2; margin: 8px 0 0; padding-left: 22px; }
@media (max-width: 640px) {
  .form-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .form-row-label { min-height: 0; }
  .form-row-control > span:not(.hint):not(.error-text), .form-row-control > strong { min-height: 0; }
  .input-md { max-width: none; }
}


/* ===================== Alerts layout fix + Historian pen colors (user, 2026-10-02) ===================== */
.alarm-row { grid-template-columns: 128px minmax(0, 1fr) auto; }
.alarm-row .state, .alarm-row .prio { white-space: nowrap; }
@media (max-width: 720px) { .alarm-row { grid-template-columns: minmax(0, 1fr); } }
:root { --pen-1: #2563EB; --pen-2: #059669; --pen-3: #DB2777; --pen-4: #475569; --pen-5: #0D9488; --pen-6: #92400E; --pen-7: #65A30D; --pen-8: #0284C7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pen-1: #60A5FA; --pen-2: #34D399; --pen-3: #F472B6; --pen-4: #CBD5E1; --pen-5: #2DD4BF; --pen-6: #D6A26B; --pen-7: #A3E635; --pen-8: #38BDF8; } }
:root[data-theme="dark"] { --pen-1: #60A5FA; --pen-2: #34D399; --pen-3: #F472B6; --pen-4: #CBD5E1; --pen-5: #2DD4BF; --pen-6: #D6A26B; --pen-7: #A3E635; --pen-8: #38BDF8; }
.pen-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.pen-dot.empty { background: transparent; }
.pen-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.pen-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.unit-chart + .unit-chart { border-top: 1px solid var(--border); padding-top: 8px; }


/* ===================== G1–G4 set-up, cycling alarm bar, P-labels, (i) placement (user, 2026-10-02) ===================== */
/* (i): beside the text it explains, on that text's centerline; same size as before (user, 2026-10-04).
   It replaces the lower-right corner placement of 2026-10-02. The note opens toward the side with room. */
.info-wrap { align-items: center; align-self: center; vertical-align: middle; flex-shrink: 0; }
.k-label { display: inline-flex; align-items: center; gap: 5px; }
.info-pop.up { top: auto; bottom: calc(100% + 8px); }

/* Alarm bar ticker */
.alarm-banner { cursor: default; padding: 4px 6px 4px 10px; }
.alarm-banner .counts { display: flex; gap: 8px; background: none; border: 0; padding: 2px; cursor: pointer; color: inherit; flex-shrink: 0; }
.alarm-banner .ticker { display: inline-flex; align-items: center; gap: 6px; min-width: 0; background: none; border: 0; padding: 2px 4px; cursor: pointer; color: var(--text); text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; animation: tickIn .35s ease; }
.alarm-banner .ticker strong { flex-shrink: 0; }
@keyframes tickIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .alarm-banner .ticker { animation: none; } }
.ticker-nav { display: inline-flex; align-items: center; gap: 0; margin-left: auto; flex-shrink: 0; font-size: 12px; color: var(--text-muted); }
.ticker-nav .btn-icon { width: 24px; min-height: 24px; }
@media (max-width: 900px) { .alarm-banner .ticker, .ticker-nav { display: none; } }

/* P-label badges */
.prio-badge { flex-shrink: 0; }

/* Set-up screens */
.pair-code { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border: 1px dashed var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); }
.pair-code .mono { font-size: 22px; letter-spacing: .12em; font-weight: 700; color: var(--text); }
.lim-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 3px; background: var(--surface-3); font-size: 12px; font-weight: 600; white-space: nowrap; }
.lim-preview { position: relative; height: 34px; margin: 4px 0 6px; border-radius: 4px; background: var(--surface-3); }
.lim-mark { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--text-muted); }
.lim-mark b { position: absolute; top: -2px; left: 4px; font-size: 12px; font-family: var(--mono); color: var(--text-muted); }
.lim-mark.p1 { background: var(--p1); } .lim-mark.p2 { background: var(--p2); } .lim-mark.p3 { background: var(--p3); } .lim-mark.p4 { background: var(--p4); }
.lim-now { position: absolute; top: 6px; bottom: 6px; width: 6px; margin-left: -3px; border-radius: 2px; background: var(--chart-1); }
.esc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: step; }
.esc-steps li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); counter-increment: step; }
.esc-steps li::before { content: counter(step); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-size: 12px; font-weight: 700; }
.esc-time { min-width: 110px; font-weight: 600; }


/* ===================== Control in the HMI (user, 2026-10-02) ===================== */
.hmi-obj { cursor: pointer; outline: none; }
.hmi-hit { fill: transparent; stroke: transparent; stroke-width: 2; }
.hmi-obj:hover .hmi-hit { stroke: var(--px-line); stroke-dasharray: 4 3; }
.hmi-obj.selected .hmi-hit, .hmi-obj:focus-visible .hmi-hit { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: none; }
.pv-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--rail-muted); }
.pv-auto .select { min-height: 28px; width: auto; padding: 2px 6px; font-size: 12.5px; background: var(--rail-surface); color: var(--rail-text); border-color: var(--rail-border); }
.ai-proposal { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.ai-proposal h3 { display: flex; align-items: center; gap: 6px; color: var(--accent-ink); }
.faceplate .kv { font-size: 13px; }
.sp-row { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 8px; border: 1px solid var(--chart-grid); border-radius: 4px; background: var(--px-bg); color: var(--px-value); cursor: pointer; font-size: 12.5px; }
.sp-chip:hover { border-color: var(--accent); }


/* ===================== Consistent alarm labels (user, 2026-10-02) =====================
   The badge keeps its true size (an old rule squeezed it to 16 × 16), and the status label sits beside it
   at a fixed width instead of stretching across the column. Same widths on every row. */
.prio svg { width: auto; height: 16px; }
.alarm-banner .counts .prio svg { height: 16px; }
.alarm-row { grid-template-columns: 158px minmax(0, 1fr) auto; }
.alarm-row > .stack-sm { flex-direction: row; align-items: center; gap: 6px; flex-wrap: nowrap; }
.alarm-row .state { min-width: 64px; justify-content: center; align-self: center; }
.alarm-list.compact .alarm-row { grid-template-columns: 96px minmax(0, 1fr) auto; }
.alarm-list.compact .alarm-row > .stack-sm { flex-direction: column; align-items: flex-start; gap: 4px; }
@media (max-width: 720px) { .alarm-row { grid-template-columns: minmax(0, 1fr); } }
.alarm-banner { overflow: hidden; min-width: 0; }
.alarm-banner .counts { gap: 6px; }
.alarm-banner .counts .prio { gap: 3px; }
.alarm-banner .counts .prio svg { height: 14px; }
@media (max-width: 1500px) { .gsearch { width: 190px; } }


/* Historian overlay + insights (user, 2026-10-02) */
.pen-item { cursor: pointer; padding: 2px 6px; border-radius: 4px; border: 1px solid transparent; }
.pen-item.focus { border-color: var(--border-strong); background: var(--surface-2); }
.insights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.insights li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; }
.ins-ico { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-muted); }
.ins-ico.ins-limit { background: var(--p2-soft); color: var(--p2-ink); }
.ins-ico.ins-anomaly { background: var(--p3-soft); color: var(--p3-ink); }
.ins-ico.ins-relation { background: var(--accent-soft); color: var(--accent-ink); }


/* Meaningful chart colors for energy and analytics (user, 2026-10-02). Process graphics stay grayscale (ISA-101). */
:root { --series-main: #2563EB; --series-baseline: #6B7280; --energy-over: #D97706; --energy-under: #059669; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --series-main: #60A5FA; --series-baseline: #94A3B8; --energy-over: #F59E0B; --energy-under: #34D399; } }
:root[data-theme="dark"] { --series-main: #60A5FA; --series-baseline: #94A3B8; --energy-over: #F59E0B; --energy-under: #34D399; }
.lc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-muted); margin-top: 6px; }
.lc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lc-legend i { display: inline-block; width: 16px; height: 4px; border-radius: 2px; }
.lc-legend i.dash { height: 0; border-top: 2px dashed; border-radius: 0; background: none; }
.lc-legend strong { color: var(--text); }


/* Findings (domain-aware intelligence) */
.findings { display: flex; flex-direction: column; gap: 10px; }
.finding { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); }
.f-title { font-weight: 650; font-size: 14.5px; margin-top: 6px; }
.conf-high { background: var(--accent-soft); color: var(--accent-ink); }
.conf-med { background: var(--surface-3); }
.conf-low { background: var(--surface-3); color: var(--text-muted); }


/* ===================== Outcomes, Compliance, Dispatch, Operator mode (review items 2–5) ===================== */
.delta { font-size: 12px; font-weight: 600; }
.delta.good { color: var(--pen-2); }
.delta.bad { color: var(--p2-ink); }
.saves { display: flex; flex-direction: column; gap: 12px; }
.save { border-left: 3px solid var(--pen-2); padding: 4px 0 4px 12px; display: flex; flex-direction: column; gap: 6px; }
.rec-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--border); background: transparent; text-align: left; cursor: pointer; color: var(--text); }
.rec-item.on { background: var(--accent-soft); }
.dispatch { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.board { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.board-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.board-col h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); display: flex; justify-content: space-between; }
.ticket { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.ticket.at-risk { border-color: var(--p3); }
.tech-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
@media (max-width: 1180px) { .dispatch { grid-template-columns: minmax(0, 1fr); } }

/* Operator mode */
.op-scrim { align-items: center; }
.op-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.op-preview-note { color: #E6E9EF; font-size: 12.5px; }
.op-app { position: relative; display: flex; flex-direction: column; background: var(--bg); color: var(--text); overflow: hidden; }
.op-app.framed { width: 390px; max-width: calc(100vw - 32px); height: min(780px, calc(100vh - 80px)); border-radius: 28px; border: 10px solid #0A0C10; box-shadow: var(--shadow-lg); }
.op-full { position: fixed; inset: 0; z-index: 90; display: flex; }
.op-full .op-app { flex: 1 1 auto; padding-bottom: env(safe-area-inset-bottom, 0px); }
.op-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(165deg, #1E2947 0%, #0F172A 70%, #3B1F7A 140%); color: #FFFFFF; }
.op-unack { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.op-icon { background: none; border: 0; color: #FFFFFF; padding: 6px; cursor: pointer; }
.op-body { flex: 1 1 auto; overflow-y: auto; padding: 12px; }
.op-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); background: var(--surface); }
.op-tabs button { background: none; border: 0; padding: 8px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--text-muted); cursor: pointer; min-height: 56px; }
.op-tabs button[aria-current="page"] { color: var(--accent-ink); font-weight: 700; }
.op-tab-ico { position: relative; }
.op-tab-ico b { position: absolute; top: -6px; right: -12px; font-size: 12px; background: var(--p1); color: #FFFFFF; border-radius: 999px; padding: 0 5px; }
.op-list { display: flex; flex-direction: column; gap: 10px; }
.op-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.op-card.unack.p1 { box-shadow: inset 4px 0 0 var(--p1); }
.op-card.unack.p2 { box-shadow: inset 4px 0 0 var(--p2); }
.op-card.unack.p3 { box-shadow: inset 4px 0 0 var(--p3); }
.op-card.unack.p4 { box-shadow: inset 4px 0 0 var(--p4); }
.op-title { font-size: 15.5px; }
.op-sub { color: var(--text-muted); font-size: 13px; }
.op-age { color: var(--text-muted); font-size: 12px; }
.op-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.op-btn { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-weight: 600; font-size: 14.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.op-btn.primary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.op-btn.danger { background: var(--p1); border-color: var(--p1); color: #FFFFFF; }
.op-btn:disabled { opacity: .5; }
.op-notes { display: flex; flex-direction: column; gap: 8px; }
.op-note { font-size: 13px; padding: 8px; background: var(--surface-2); border-radius: 8px; }
.op-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-align: left; cursor: pointer; }
.op-row.static { cursor: default; }
.op-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--neutral); flex-shrink: 0; }
.op-dot.off { background: var(--p1); }
.op-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 12px; color: var(--text-muted); text-align: center; }
.op-site { display: flex; flex-direction: column; gap: 10px; }
.op-back { align-self: flex-start; background: none; border: 0; color: var(--accent-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; }
.op-h2 { font-size: 20px; }
.op-h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-top: 6px; }
.op-readings { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.op-reading { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.op-reading strong { font-size: 20px; }
.op-reading small { font-size: 12px; color: var(--text-muted); }
.op-reading.abn { border-color: var(--p2); }
.op-pump { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; flex-wrap: wrap; }
.op-mode { min-height: 40px; min-width: 52px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.op-mode.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.op-mode.off:not(.on) { color: var(--p1-ink); }
.op-sheet-scrim { position: absolute; inset: 0; background: var(--scrim); display: flex; align-items: flex-end; z-index: 5; }
.op-sheet { width: 100%; background: var(--surface); border-radius: 16px 16px 0 0; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.op-app.framed { height: min(760px, calc(100vh - 120px)); }


/* ===================== Seamless shell (user, 2026-10-03; reference: Cisco Cloud Control) =====================
   One continuous background behind the whole app: the sidebar and header sit on it with no fills, borders or
   dividers. Content lives in quiet cards slightly lighter than the background; values sit in darker insets.
   Dark: near-black navy with a soft brand-purple glow. Light: the same idea in soft daylight tones. */
:root {
  --app-bg: #F3F4F8;
  --app-glow: radial-gradient(1100px 620px at 8% -12%, rgba(124, 58, 237, .11), transparent 62%), radial-gradient(900px 520px at 100% -10%, rgba(37, 99, 235, .07), transparent 60%);
  --card-bg: rgba(255, 255, 255, .88);
  --card-border: rgba(15, 23, 42, .07);
  --card-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
  --inset-bg: #F5F6F9;
  --nav-text: #1F2433; --nav-muted: #5B6478; --nav-hover: rgba(15, 23, 42, .05); --nav-active: rgba(124, 58, 237, .10); --nav-brand-peak: #0F172A;
  --topbar-glass: rgba(243, 244, 248, .72);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --app-bg: #070B14;
  --app-glow: radial-gradient(1100px 620px at 6% -14%, rgba(109, 40, 217, .30), transparent 60%), radial-gradient(900px 560px at 98% -12%, rgba(30, 58, 138, .28), transparent 62%);
  --card-bg: rgba(16, 23, 38, .82);
  --card-border: rgba(255, 255, 255, .07);
  --card-shadow: none;
  --inset-bg: rgba(7, 11, 20, .55);
  --nav-text: #E6E9F0; --nav-muted: #98A2B6; --nav-hover: rgba(255, 255, 255, .06); --nav-active: rgba(255, 255, 255, .09); --nav-brand-peak: #FFFFFF;
  --topbar-glass: rgba(7, 11, 20, .55);
  --bg: #070B14; --surface: #101726; --surface-2: #131B2D; --surface-3: #1A2338; --border: #222C42; --border-strong: #2E3954;
} }
:root[data-theme="dark"] {
  --app-bg: #070B14;
  --app-glow: radial-gradient(1100px 620px at 6% -14%, rgba(109, 40, 217, .30), transparent 60%), radial-gradient(900px 560px at 98% -12%, rgba(30, 58, 138, .28), transparent 62%);
  --card-bg: rgba(16, 23, 38, .82);
  --card-border: rgba(255, 255, 255, .07);
  --card-shadow: none;
  --inset-bg: rgba(7, 11, 20, .55);
  --nav-text: #E6E9F0; --nav-muted: #98A2B6; --nav-hover: rgba(255, 255, 255, .06); --nav-active: rgba(255, 255, 255, .09); --nav-brand-peak: #FFFFFF;
  --topbar-glass: rgba(7, 11, 20, .55);
  --bg: #070B14; --surface: #101726; --surface-2: #131B2D; --surface-3: #1A2338; --border: #222C42; --border-strong: #2E3954;
}

/* One background for everything */
body { background-color: var(--app-bg); background-image: var(--app-glow); background-attachment: fixed; background-repeat: no-repeat; }
.shell, .main, .workspace { background: transparent; }

/* Sidebar: no fill, no border; theme-aware text */
.rail { background: transparent; border-right: 0; color: var(--nav-text); }
.rail .nav-item { color: var(--nav-text); }
.rail .nav-item .icon, .rail .nav-group-label, .rail-sub, .rail-foot, .rail-foot .serviced { color: var(--nav-muted); }
.rail .nav-item:hover, .rail .rail-home:hover { background: var(--nav-hover); }
.rail .nav-item[aria-current="page"] { background: var(--nav-active); color: var(--nav-text); }
.rail .nav-item[aria-current="page"] .icon { color: var(--nav-text); }
.rail .nav-item .count { background: var(--nav-hover); color: var(--nav-text); }
.rail .brand-peak.on-dark { color: var(--nav-brand-peak); }
.rail-foot { border-top: 0; }
.rail-foot .serviced strong { color: var(--nav-text) !important; }

/* Header: transparent glass, no border, no line */
.topbar { background: var(--topbar-glass); border-bottom: 0; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.topbar::before { display: none; }
.tb-title { border-right-color: var(--card-border); }
.switcher, .gsearch, .alarm-banner { background: var(--card-bg); border-color: var(--card-border); }
.proto-bar { background: transparent; border-bottom: 1px solid var(--card-border); }
.crumbs { padding-top: 6px; }

/* Cards: quiet, slightly lighter than the background, hairline border */
.panel, .card, .detail, .headline, .module, .finding, .board-col, .settings-nav, .assist, .op-card, .ticket, .comm-tile, .kpis > .kpi, .dev-head > .kpi {
  background: var(--card-bg); border-color: var(--card-border); box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* backdrop-filter makes each card its own stacking context, so an open (i) note could only rise within its card
   and the next card painted over it. Lift the card that holds an open note above its neighbours. */
:is(.panel, .card, .detail, .headline, .module, .finding, .board-col, .settings-nav, .op-card, .ticket, .comm-tile, .kpi):has(.info-pop) {
  position: relative; z-index: 46;
}
.panel-head { border-bottom-color: var(--card-border); }
.stat-row, .attn, .attn-label, .all-clear { border-color: var(--card-border); }
.stat-row > div + div { border-left-color: var(--card-border); }
.attn-label, .tbl th { background: var(--inset-bg); }
.tbl td { border-bottom-color: var(--card-border); }
.panel .kpi, .headline .kpi, .comm-tile { background: var(--inset-bg); }
.act-as { background: var(--card-bg); border: 1px solid var(--accent); border-radius: var(--radius); margin: 6px 24px 0; }
.assist { border-left: 1px solid var(--card-border); }

/* Phone drawer needs an opaque sidebar */
@media (max-width: 900px) {
  .rail { background-color: var(--app-bg); background-image: var(--app-glow); }
  .act-as { margin: 6px 16px 0; }
}

/* Logos that follow the theme (light logo on dark, dark logo on light) */
.only-light { display: inline-flex; }
.only-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .only-light { display: none; } :root:not([data-theme="light"]) .only-dark { display: inline-flex; } }
:root[data-theme="dark"] .only-light { display: none; }
:root[data-theme="dark"] .only-dark { display: inline-flex; }


/* ===================== App bar + section rail (user, 2026-10-03; reference: Cisco Cloud Control) ===================== */
:root { --appbar-h: 56px; }
.topbar.appbar { display: flex; grid-template-columns: none; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30; min-height: var(--appbar-h); padding: 8px 16px; }
.app-brand { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 4px 6px; margin-left: -6px; border-radius: var(--radius-sm); cursor: pointer; color: var(--nav-text); }
.app-brand:hover { background: var(--nav-hover); }
.app-brand .brand { padding-bottom: 0; }
.app-brand .brand-peak.on-dark { color: var(--nav-brand-peak); }
.app-name { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--nav-text); white-space: nowrap; }
.app-sep { width: 1px; height: 22px; background: var(--card-border); flex-shrink: 0; }
.app-sections { display: flex; gap: 4px; margin-left: 6px; }
.section-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--nav-muted); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.section-pill:hover { background: var(--nav-hover); color: var(--nav-text); }
.section-pill[aria-current="page"] { color: var(--nav-text); background: var(--card-bg); border-color: var(--accent); }
.gsearch { width: 220px; }
/* Sidebar sits under the app bar */
.shell { min-height: calc(100vh - var(--appbar-h) - 36px); }
.rail { top: var(--appbar-h); height: calc(100vh - var(--appbar-h)); padding-top: 10px; }
.rail-section { padding: 8px 12px 10px; font-size: 16px; font-weight: 600; color: var(--nav-text); }
.rail .nav-group-label { display: none; }
.rail-foot .rail-sub { margin-bottom: 8px; }
.alarm-strip { padding: 4px 24px 0; }
.alarm-strip .alarm-banner { width: 100%; }
@media (max-width: 1280px) { .gsearch { width: 170px; } }
@media (max-width: 900px) {
  .rail { top: 0; height: 100vh; }
  .rail.open .rail-section { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--nav-muted); padding-top: 14px; }
  .alarm-strip { padding: 4px 16px 0; }
}


/* App background: the sign-in page's purple gradient, continuous behind everything (user, 2026-10-03).
   The header brand is a label, not a link. */
:root { --app-glow: linear-gradient(135deg, #EEF0F8 0%, #F3F2FA 50%, #E2D8FB 135%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --app-glow: linear-gradient(135deg, #1E2947 0%, #0F172A 55%, #5B21B6 140%); } }
:root[data-theme="dark"] { --app-glow: linear-gradient(135deg, #1E2947 0%, #0F172A 55%, #5B21B6 140%); }
.app-brand { cursor: default; }
.app-brand:hover { background: none; }

/* Gradient direction (user, 2026-10-03): brand purple in the upper left → dark ink in the lower right.
   The header paints the same fixed gradient, so it reads as one continuous surface (it still covers
   scrolled content because it's opaque). */
:root { --app-bg: #ECEEF5; --app-glow: linear-gradient(135deg, #DDD3FA 0%, #ECE8FB 30%, #F1F2F7 60%, #E6E8EF 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --app-bg: #0B1120; --app-glow: linear-gradient(135deg, #5B21B6 0%, #3B1A7A 22%, #1E2947 50%, #0F172A 76%, #0B1120 100%); } }
:root[data-theme="dark"] { --app-bg: #0B1120; --app-glow: linear-gradient(135deg, #5B21B6 0%, #3B1A7A 22%, #1E2947 50%, #0F172A 76%, #0B1120 100%); }
.topbar.appbar, .proto-bar { background-color: var(--app-bg); background-image: var(--app-glow); background-attachment: fixed; background-repeat: no-repeat; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; }

/* Revert (user, 2026-10-03): match the sign-in page's gradient layout exactly — navy upper left, ink through
   the middle, purple rising in the lower right — across the whole viewport, header included. */
:root { --app-bg: #F1F2F8; --app-glow: linear-gradient(135deg, #EEF0F8 0%, #F3F2FA 55%, #DCD0FA 140%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --app-bg: #0F172A; --app-glow: linear-gradient(135deg, #1E2947 0%, #0F172A 55%, #5B21B6 140%); } }
:root[data-theme="dark"] { --app-bg: #0F172A; --app-glow: linear-gradient(135deg, #1E2947 0%, #0F172A 55%, #5B21B6 140%); }


/* Header brand: "Control Center" bottom-aligned to the logotype's baseline (user, 2026-10-03). */
.app-brand { align-items: baseline; }
.app-brand .brand { padding-bottom: 0; }
.app-brand .only-dark, .app-brand .only-light { align-self: flex-end; }
.app-name { line-height: 1; }

/* Sidebar lists every section: the active one open, the others as collapsible headers with a page count. */
.rail-section { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; color: var(--nav-text); font: inherit; font-size: 15px; font-weight: 600; padding: 8px 10px; border-radius: var(--radius-sm); }
.rail-section:hover { background: var(--nav-hover); }
.rail-group:not(.open) .rail-section { color: var(--nav-muted); font-weight: 500; }
.rail-group + .rail-group { margin-top: 4px; }
.rail-count { font-size: 12px; padding: 0 7px; border-radius: 999px; background: var(--nav-hover); color: var(--nav-muted); }



/* Permissions */
.perm .c { width: 104px; }
.perm-head { display: flex; flex-direction: column; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--text); }
.perm td.perm-diff { background: var(--accent-soft); }
.perm .switch-track { width: 32px; height: 18px; }
.perm .switch-track::after { width: 12px; height: 12px; }
.perm .switch input:checked + .switch-track::after { transform: translateX(14px); }
.dir-sync { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--card-border); }

/* Initials tile without a brand accent: theme tokens, readable in both themes (user, 2026-10-03). */
.org-mono.org-mono-plain { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); box-shadow: inset 0 0 0 1px var(--card-border); }

/* "Control Center" stays visible at every width (user, 2026-10-03): the header gives up space elsewhere first. */
@media (max-width: 1200px) and (min-width: 901px) { .section-pill svg { display: none; } .section-pill { padding: 6px 10px; } .gsearch { width: 150px; } .appbar { gap: 8px; } }
@media (max-width: 1100px) and (min-width: 901px) { .appbar .status-chip { display: none; } }
@media (max-width: 480px) {
  /* Row 1: menu · logo + Control Center · profile. Row 2: tenant switcher · PeakAssist. */
  .appbar { flex-wrap: wrap; row-gap: 8px; gap: 6px; }
  .appbar > .grow, .app-sep { display: none; }
  .app-brand { gap: 8px; }
  .app-name { font-size: 12.5px; }
  .appbar > :last-child { order: 5; margin-left: auto; }
  .appbar > .menu-wrap:has(.switcher), .appbar > .switcher { order: 10; flex: 1 1 60%; min-width: 0; max-width: none; }
  .appbar > .menu-wrap:has(.switcher) .switcher { width: 100%; max-width: none; justify-content: space-between; }
  .appbar .assist-btn { order: 11; }
}

/* Partner icons made for light backgrounds sit on a white tile in both themes. */
.org-icon.org-icon-plate { background: #FFFFFF; padding: 2px; object-fit: contain; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08); }

/* ===================== Alarm badges and states (user, 2026-10-03) =====================
   Rounded squares. Priority color while the alarm needs a person; light gray once acknowledged. */
:root { --ack-fill: #E7E9EE; --ack-line: #D3D7DF; --ack-ink: #4B5563; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ack-fill: #263247; --ack-line: #34425A; --ack-ink: #A9B4C6; } }
:root[data-theme="dark"] { --ack-fill: #263247; --ack-line: #34425A; --ack-ink: #A9B4C6; }
.prio svg, .prio .prio-badge { width: auto; height: auto; }
.prio-badge { display: block; flex-shrink: 0; }
.state { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--ack-line); gap: 5px; line-height: 1.25; }
.state-unack { background: var(--text); color: var(--surface); border-color: var(--text); }
.state-unack.sp-1 { background: var(--p1-soft); color: var(--p1-ink); border-color: var(--p1); }
.state-unack.sp-2 { background: var(--p2-soft); color: var(--p2-ink); border-color: var(--p2); }
.state-unack.sp-3 { background: var(--p3-soft); color: var(--p3-ink); border-color: var(--p3); }
.state-unack.sp-4 { background: var(--p4-soft); color: var(--p4-ink); border-color: var(--p4); }
.state-ack, .state-shelved, .state-supp, .state-plain { background: var(--ack-fill); color: var(--ack-ink); border-color: var(--ack-line); }
.state-rtn { background: transparent; color: var(--text-muted); border-style: dashed; }
.btn.btn-ack, .btn.btn-acked { border-radius: 8px; min-height: 32px; padding: 0 12px; font-weight: 600; }
.btn-ack.ack-p1 { background: var(--p1); border-color: var(--p1); color: var(--p1-on); }
.btn-ack.ack-p2 { background: var(--p2); border-color: var(--p2); color: var(--p2-on); }
.btn-ack.ack-p3 { background: var(--p3); border-color: var(--p3); color: var(--p3-on); }
.btn-ack.ack-p4 { background: var(--p4); border-color: var(--p4); color: var(--p4-on); }
.btn-ack:hover { filter: brightness(1.08); }
.btn.btn-acked { background: var(--ack-fill); border-color: var(--ack-line); color: var(--ack-ink); cursor: default; gap: 5px; }
/* Alarm rows: badge · text · state · actions, with room between them */
.alarm-row { grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 14px; padding: 12px 16px; align-items: center; }
.alarm-row .acts { gap: 8px; }
.alarm-row .state { min-width: 0; }
.alarm-row.st-ack .msg, .alarm-row.st-shelved .msg, .alarm-row.st-supp .msg { color: var(--text-muted); font-weight: 500; }
.alarm-list.compact .alarm-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; padding: 11px 14px; align-items: start; }
.alarm-list.compact .state-line { margin-top: 6px; }
.alarm-list.compact .state { padding: 2px 8px; font-size: 12px; }
@media (max-width: 720px) { .alarm-row, .alarm-list.compact .alarm-row { grid-template-columns: 30px minmax(0, 1fr); } .alarm-row > .state, .alarm-row > .acts { grid-column: 2; justify-self: start; } }
/* Needs attention */
.attn { grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 14px; padding: 13px 18px; }
.attn-badge { display: grid; place-items: center; width: 36px; height: 36px; }
.attn .what { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.attn .where { margin-top: 2px; }
.attn.st-ack .what { color: var(--text-muted); font-weight: 500; }
.attn .acts { gap: 8px; align-items: center; }
.attn .acts .btn { border-radius: 8px; min-height: 32px; }
@media (max-width: 820px) { .attn { grid-template-columns: 36px minmax(0, 1fr); } .attn-state, .attn .acts { grid-column: 2; justify-self: start; justify-content: flex-start; } }
/* Counts in the alarm bar */
.alarm-banner .counts { gap: 12px; }
.alarm-banner .counts .prio { gap: 5px; }
.alarm-banner .counts .prio svg { height: 20px; width: 20px; }

.alarm-banner .ticker { animation: none; gap: 10px; }
.alarm-banner .ticker-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alarm-banner .ticker .state { flex-shrink: 0; padding: 2px 8px; font-size: 12px; }
.alarm-banner .ticker-more { margin-left: auto; flex-shrink: 0; white-space: nowrap; padding-inline: 8px; }
.alarm-banner .counts .prio svg { height: 22px; width: 22px; }
@media (max-width: 900px) { .alarm-banner .ticker-more { display: none; } }
.serviced .org-logo, .serviced .org-plate .org-logo { max-height: 30px; }
/* Partner list icons identify the company whether or not white-label is on; the add-on governs the chrome only. */
.app-brand .org-plate { padding: 3px 8px; border-radius: 6px; }
.app-brand .org-plate .org-logo { height: 26px !important; }

/* B1: 12px is the smallest text size (the pass above raised 25 rules). */

/* ===================== Round 1 audit (docs/design/round-1-audit.md) ===================== */

/* --- A8: one marker for AI-generated content. Brand purple, never an alarm color. --- */
.ai-mark { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 5px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; flex-shrink: 0; }
.ai-mark svg { width: 13px; height: 13px; }

/* --- C1/A2: the insight card --- */
.insight-list { display: flex; flex-direction: column; gap: 12px; }
.insight { background: var(--card-bg, var(--surface)); border: 1px solid var(--card-border, var(--border)); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.insight.done { border-left-color: var(--ack-line); opacity: .82; }
.insight header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.insight-kind { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.insight h3 { font-size: 16px; font-weight: 650; line-height: 1.3; text-wrap: balance; }
.insight-what { color: var(--text-muted); margin: -4px 0 0; }
.insight-facts { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.6fr); gap: 14px; margin: 0; padding: 12px 0; border-top: 1px solid var(--card-border, var(--border)); border-bottom: 1px solid var(--card-border, var(--border)); }
.insight-facts > div, .insight-mini > div { min-width: 0; }
.insight dt { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 3px; }
.insight dd { margin: 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.insight footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.insight-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.insight.compact { padding: 12px 14px; gap: 8px; background: var(--inset-bg, var(--surface-2)); }
.insight.compact h3 { font-size: 14.5px; }
.insight-why { margin: 0; font-size: 13px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.insight-mini { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; }
.insight-mini > div { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.insight-mini dt { margin: 0; }
.insight-mini dd { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.insight.compact footer { margin-top: auto; }
@media (max-width: 900px) { .insight-facts { grid-template-columns: 1fr 1fr; } .insight-facts > div:first-child, .insight-facts > div:last-child { grid-column: 1 / -1; } }
.chip-link { border: 0; cursor: pointer; color: var(--accent-ink); background: var(--accent-soft); font: inherit; font-size: 12px; font-weight: 600; }
.chip-link:hover { text-decoration: underline; }
.chip-preview { margin-left: auto; font-size: 12px; padding: 0 6px; }
.nav-item .count.count-ai { background: var(--accent-soft); color: var(--accent-ink); }

/* --- A5: forecast chart. Measured in data gray, projection in AI purple, the limit in the alarm color. --- */
.forecast { margin: 0; padding: 12px; border-radius: var(--radius-sm); background: var(--inset-bg, var(--surface-2)); border: 1px solid var(--card-border, var(--border)); }
.forecast svg { width: 100%; max-width: 620px; height: auto; display: block; }
.forecast figcaption { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; }
.fc-hist { stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; }
.fc-proj { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 5; }
.fc-limit { stroke: var(--p2); stroke-width: 1.5; stroke-dasharray: 3 4; }
.fc-today { stroke: var(--chart-grid); stroke-width: 1; }
.fc-now { fill: var(--chart-1); }
.fc-hit { fill: var(--accent); }
.fc-axis, .fc-val, .fc-limit-label { font-size: 12px; fill: var(--text-muted); font-family: var(--sans, Inter, sans-serif); }
.fc-limit-label { fill: var(--p2-ink); font-weight: 600; }
.fc-when { fill: var(--accent-ink); font-weight: 700; }
.fc-val { fill: var(--text); font-weight: 600; }

/* --- U1/C4/B3: the Dashboard. One prominent block; everything else is quieter. --- */
.headline.hero { box-shadow: var(--shadow); border-color: var(--border-strong); }
.page-head .title p { margin: 2px 0 0; color: var(--text-muted); font-size: 13.5px; }
.stat-row.stat-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat-tile { padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; background: transparent; border: 0; border-left: 1px solid var(--card-border, var(--border)); color: inherit; font: inherit; }
.stat-tile:first-child { border-left: 0; }
button.stat-tile { cursor: pointer; }
button.stat-tile:hover { background: var(--inset-bg, var(--surface-2)); }
.stat-tile strong { font-size: 24px; font-weight: 600; color: var(--px-value); line-height: 1.2; }
.stat-tile strong small { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-left: 3px; }
.tile-meta { display: flex; gap: 8px; flex-wrap: wrap; min-height: 18px; font-size: 12.5px; }
.tile-target { color: var(--text-muted); font-weight: 600; }
.tile-target.bad { color: var(--p2-ink); }
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); background: var(--card-bg, var(--surface)); border: 1px solid var(--card-border, var(--border)); border-radius: var(--radius); overflow: hidden; }
.stat-strip > div { padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; border-left: 1px solid var(--card-border, var(--border)); }
.stat-strip > div:first-child { border-left: 0; }
.stat-strip strong { font-size: 22px; font-weight: 600; color: var(--px-value); line-height: 1.25; }
.stat-strip strong small { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.stat-strip strong.stat-text { font-size: 15px; }
.dash-tabs { display: flex; align-items: flex-end; gap: 12px; border-bottom: 1px solid var(--border); }
.dash-tabs .tabs { flex: 1; min-width: 0; border-bottom: 0; }
.dash-tabs > .btn { margin-bottom: 6px; flex-shrink: 0; }
.tab-body { display: flex; flex-direction: column; gap: 16px; }
.detail-toggle { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
/* Quieter secondary panels: hairline, no shadow (B3) */
.panel { box-shadow: none; }
.panel.hero-quiet { border-color: var(--card-border, var(--border)); }

/* --- C5: freshness --- */
.fresh { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.fresh.stale { color: var(--p3-ink); font-weight: 600; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neutral); display: inline-block; }
.is-offline .live-dot { background: var(--p3); }
.is-offline .stat-tile strong, .is-offline .b-val, .is-offline .pv-canvas { opacity: .55; }
.is-offline .btn-ack, .is-offline .pv-card .btn-primary { pointer-events: none; opacity: .45; }

/* --- T1/T2/T8: states --- */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 20px; }
.empty-state .muted { max-width: 52ch; }
.empty-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--inset-bg, var(--surface-2)); color: var(--text-muted); border: 1px solid var(--card-border, var(--border)); }
.error-state .empty-icon { color: var(--p2-ink); border-color: var(--p2); background: var(--p2-soft); }
.skeleton { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.skeleton span { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--ack-fill) 25%, var(--ack-line) 37%, var(--ack-fill) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.conn-banner { display: flex; align-items: center; gap: 12px; margin: 8px 24px 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--p3-soft); color: var(--p3-ink); border: 1px solid var(--p3); font-size: 13.5px; }
.conn-banner > span:first-of-type { flex: 1; min-width: 0; }
.conn-banner .hint { color: inherit; }
@media (max-width: 720px) { .conn-banner { flex-direction: column; align-items: flex-start; margin-inline: 16px; } }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: 8px; border: 2px solid var(--accent); background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer; }
.skip-link:focus { top: 12px; }
#main:focus { outline: none; }

/* --- C3: data table --- */
.dt-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--card-border, var(--border)); min-height: 44px; }
.dt-sel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dt-foot { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--card-border, var(--border)); flex-wrap: wrap; }
.dt-check { width: 36px; text-align: center; }
.dt-check input, .menu-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.th-sort { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.th-sort svg { opacity: .45; }
th[aria-sort="ascending"] .th-sort svg, th[aria-sort="descending"] .th-sort svg { opacity: 1; color: var(--accent-ink); }
th.num .th-sort { flex-direction: row-reverse; }
.tbl tr.selected td { background: var(--accent-soft); }
.menu-check { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 13.5px; cursor: pointer; border-radius: 6px; }
.menu-check:hover { background: var(--surface-3); }
.tbl tr.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nowrap { white-space: nowrap; }

/* --- U3/A3/L6: alarm rows with next steps and context --- */
.alarm-item { border-bottom: 1px solid var(--border); }
.alarm-item:last-child { border-bottom: 0; }
.alarm-item .alarm-row { border-bottom: 0; }
.alarm-row .acts { flex-wrap: wrap; justify-content: flex-end; max-width: 520px; }
.alarm-ctx { padding: 4px 16px 14px 64px; display: flex; flex-direction: column; gap: 10px; }
.ctx-ai { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--radius-sm); background: var(--inset-bg, var(--surface-2)); border: 1px solid var(--card-border, var(--border)); border-left: 3px solid var(--accent); }
.ctx-ai dl { margin: 0; display: grid; gap: 6px; flex: 1; min-width: 0; }
.ctx-ai dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.ctx-ai dt { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.ctx-ai dd { margin: 0; font-size: 13.5px; }
.ctx-wo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; }
@media (max-width: 720px) { .alarm-ctx { padding-left: 16px; } .ctx-ai { flex-direction: column; } .ctx-ai dl > div { grid-template-columns: 1fr; gap: 2px; } }

/* --- U5: undo --- */
.toast { align-items: center; }
.toast-undo { margin-left: 4px; flex-shrink: 0; background: transparent; color: inherit; border-color: currentColor; }

/* --- O4 / energy --- */
.risk-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.risk-cell .bar { width: 64px; min-width: 64px; }
.rec-cell { display: flex; gap: 8px; align-items: flex-start; min-width: 240px; white-space: normal; }
.save-usd { color: var(--accent-ink); font-weight: 600; }
.delta-bad { color: var(--p2-ink); font-weight: 600; }
.chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }
.chain-step { display: inline-flex; align-items: center; gap: 6px; }
.chain-step + .chain-step::before { content: '→'; color: var(--text-faint, var(--text-muted)); }

/* --- L3 / C6 --- */
button.card-link { text-align: left; cursor: pointer; font: inherit; color: inherit; }
button.card-link:hover, button.card-link.on { border-color: var(--accent); }
.embed-stub { min-height: 160px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; background: var(--inset-bg, var(--surface-2)); border-radius: var(--radius-sm); margin-bottom: 12px; color: var(--text-muted); }
.settings-kicker { font-size: 20px; font-weight: 700; padding: 0 10px 8px; }
h2.as-h3 { font-size: 14px; font-weight: 650; }
.pv-card h2.as-h3 { display: flex; align-items: center; gap: 6px; }

/* --- B2: contrast --- */
:root[data-theme="dark"] .btn-ghost, :root[data-theme="dark"] .btn-secondary { color: #C9D2E3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-ghost, :root:not([data-theme="light"]) .btn-secondary { color: #C9D2E3; } }

/* --- U4: touch targets, 44px on phones and touch screens --- */
@media (max-width: 720px), (pointer: coarse) {
  .btn, .btn-sm, .select, .input, .nav-item, .rail-section, .section-pill, .menu-item, .tabs button, .seg button, .facet, .switcher, .user-btn, .link-btn { min-height: 44px; }
  .btn-icon, .btn-icon.btn-sm, .user-btn { min-width: 44px; }
  .link-btn { display: inline-flex; align-items: center; }
  .switch { min-height: 44px; align-items: center; }
  .proto-bar select, .proto-bar .btn { min-height: 44px; }
}

/* --- B4: short, purposeful motion; none on alarms; off when the viewer asks for less --- */
@media (prefers-reduced-motion: no-preference) {
  .tab-body, .alarm-ctx, .forecast, .page > * { animation: rise .18s ease-out; }
  .insight, .stat-tile, .card-link, .btn { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease; }
  .stat-tile strong, .stat-strip strong { transition: color .2s ease; }
  .alarm-row, .attn, .alarm-banner, .prio-badge, .state { animation: none !important; transition: none !important; }
}
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .skeleton span { animation: none; } }
/* Dashboard density: status, attention and insights in the first screen */
.headline.hero .attn { padding-block: 9px; }
.headline.hero .health { padding-bottom: 10px; }
.stat-tile { padding: 10px 16px; }
.headline.hero .all-clear { padding-block: 8px; }
@media (max-width: 1500px) { .proto-bar > .hide-sm { display: none; } }
/* A visually hidden label must stay inside its row, or it escapes scroll boxes and stretches the page. */
.prio { position: relative; }
.dt .tbl td:first-child:not(.dt-check), .dt .tbl td.dt-check + td { min-width: 170px; }
.rec-cell { min-width: 220px; }
.alarm-row .acts { max-width: none; }
@media (min-width: 1280px) { .alarm-row:not(.x) .acts { flex-wrap: nowrap; } .alarm-list.compact .alarm-row .acts { flex-wrap: wrap; } }
/* B2: filled buttons keep 4.5:1 text contrast in both themes */
:root { --accent-fill: #7C3AED; --ack-bg-1: #B91C1C; --ack-bg-2: #C2410C; --ack-bg-3: #A16207; --ack-bg-4: #0E7490; --ack-fg: #FFFFFF; --danger-fill: #B91C1C; --danger-fg: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent-fill: #7C3AED; --ack-bg-1: #F87171; --ack-bg-2: #FB923C; --ack-bg-3: #FACC15; --ack-bg-4: #22D3EE; --ack-fg: #0B1020; --danger-fill: #F87171; --danger-fg: #0B1020; } }
:root[data-theme="dark"] { --accent-fill: #7C3AED; --ack-bg-1: #F87171; --ack-bg-2: #FB923C; --ack-bg-3: #FACC15; --ack-bg-4: #22D3EE; --ack-fg: #0B1020; --danger-fill: #F87171; --danger-fg: #0B1020; }
.btn-primary { background: var(--accent-fill); border-color: var(--accent-fill); }
.btn-ack.ack-p1 { background: var(--ack-bg-1); border-color: var(--ack-bg-1); color: var(--ack-fg); }
.btn-ack.ack-p2 { background: var(--ack-bg-2); border-color: var(--ack-bg-2); color: var(--ack-fg); }
.btn-ack.ack-p3 { background: var(--ack-bg-3); border-color: var(--ack-bg-3); color: var(--ack-fg); }
.btn-ack.ack-p4 { background: var(--ack-bg-4); border-color: var(--ack-bg-4); color: var(--ack-fg); }
.btn-danger { background: var(--danger-fill); border-color: var(--danger-fill); color: var(--danger-fg); }
.save .chip, .insight .chip { white-space: normal; }
@media (max-width: 720px), (pointer: coarse) { .alarm-banner .counts, .btn.btn-ack, .attn .acts .btn, .chip-link { min-height: 44px; } }

/* Acknowledged but still active: a thin edge keeps the priority color (user, 2026-10-03; ISA-18.2 cue). */
.alarm-row.st-ack.p1, .attn.st-ack.p1 { box-shadow: inset 2px 0 0 var(--p1); }
.alarm-row.st-ack.p2, .attn.st-ack.p2 { box-shadow: inset 2px 0 0 var(--p2); }
.alarm-row.st-ack.p3, .attn.st-ack.p3 { box-shadow: inset 2px 0 0 var(--p3); }
.alarm-row.st-ack.p4, .attn.st-ack.p4 { box-shadow: inset 2px 0 0 var(--p4); }
.attn.st-unack.p1 { box-shadow: inset 4px 0 0 var(--p1); } .attn.st-unack.p2 { box-shadow: inset 4px 0 0 var(--p2); }
.attn.st-unack.p3 { box-shadow: inset 4px 0 0 var(--p3); } .attn.st-unack.p4 { box-shadow: inset 4px 0 0 var(--p4); }
/* Site address */
.site-address { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-muted); }
.site-address a.link-btn { display: inline-flex; align-items: center; gap: 4px; }

/* Fleet software: drift states. Behind is routine; missing and unexpected need a person. */
.chip.drift-behind { background: var(--ack-fill); color: var(--ack-ink); }
.chip.drift-ahead { background: var(--p4-soft); color: var(--p4-ink); }
.chip.drift-missing { background: var(--p3-soft); color: var(--p3-ink); }
.chip.drift-unexpected { background: var(--p2-soft); color: var(--p2-ink); }
.channel-tbl td { vertical-align: top; }
.channel-tbl .select { min-width: 150px; }
.error-text { color: var(--p1-ink); font-size: 12.5px; }

/* Enter-tenant dialog: the warning leads, the facts follow (user, 2026-10-03) */
.enter-warning { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--p3-soft); color: var(--p3-ink); border: 1px solid var(--p3); font-size: 14px; }
.enter-warning svg { flex-shrink: 0; }
.enter-facts { margin: 0; padding: 0; display: grid; gap: 8px; }
.enter-facts li { align-items: flex-start; }
.tags-off .tag-note { display: none; }
/* Agent team */
.agent-div { display: flex; flex-direction: column; gap: 10px; }
.agent-div > h2 { font-size: 16px; display: flex; align-items: baseline; gap: 10px; }
.agent-div > h2 .hint { font-weight: 400; }
.agent-card h3 { font-size: 15px; }
.agent-card.off { opacity: .72; }
.agent-card .seg { align-self: flex-start; }
.agent-actions { list-style: none; margin: 0; padding: 10px 0 0; display: grid; gap: 10px; border-top: 1px solid var(--card-border, var(--border)); }
.agent-actions li { display: grid; gap: 4px; }
.chip.risk-low { background: var(--ack-fill); color: var(--ack-ink); }
.chip.risk-medium { background: var(--p3-soft); color: var(--p3-ink); }
.chip.risk-high { background: var(--p1-soft); color: var(--p1-ink); }
.chip.build-live, .chip.build-operating { background: var(--accent-soft); color: var(--accent-ink); }
.chip.build-specified { background: transparent; border: 1px dashed var(--border-strong); }
.proposal-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr); }
@media (max-width: 900px) { .proposal-facts { grid-template-columns: 1fr; } .proposal-facts > div { grid-column: auto !important; } }

/* Map pins: colored dots; a pin pulses while its alarm is unacknowledged (user, 2026-10-03). This is the one
   place that moves for an alarm; it stops as soon as someone acknowledges, and never runs with reduced motion. */
.map-pin svg { overflow: visible; filter: none; }
.map-pulse { transform-box: fill-box; transform-origin: center; animation: mappulse 2s ease-out infinite; }
@keyframes mappulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-pulse { animation: none; opacity: 0; } }
.leaflet-tooltip.map-tip-wrap { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-lg); padding: 10px 12px; white-space: normal; }
.leaflet-tooltip.map-tip-wrap::before { display: none; }
.map-tip { font-size: 13px; line-height: 1.4; min-width: 220px; max-width: 300px; display: grid; gap: 6px; }
.map-tip .tip-sub { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.map-tip .tip-hint { border-top: 1px solid var(--border); padding-top: 6px; }
.tip-alarm { display: flex; gap: 8px; align-items: flex-start; }
.tip-alarm i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
/* Sidebar is the one menu (user, 2026-10-03): the header no longer repeats the sections. A parent with
   sub-pages is a label for them; only the sub-page you are on is highlighted. */
.nav-item.nav-parent-on { color: var(--nav-text); font-weight: 600; background: transparent; box-shadow: none; }
.rail .nav-item.nav-sub { padding-left: 46px; }
/* White-label header: "Control Center" sits on the bottom edge of the customer's logo (user, 2026-10-03). */
.app-brand:has(.org-logo), .app-brand:has(.org-plate), .app-brand:has(.org-fallback) { align-items: flex-end; }
.app-brand .only-dark, .app-brand .only-light { line-height: 0; }
.app-brand:has(.org-logo) .app-name, .app-brand:has(.org-plate) .app-name { line-height: 1; padding-bottom: 1px; }

/* Agents as aligned rows (user, 2026-10-03): name · build · duty · state · actions. They reflow, not squash. */
.agent-list { border: 1px solid var(--card-border, var(--border)); border-radius: var(--radius); background: var(--card-bg, var(--surface)); overflow: hidden; }
.agent-row { display: grid; grid-template-columns: minmax(170px, 1.1fr) 92px minmax(0, 2.6fr) auto auto; gap: 6px 16px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--card-border, var(--border)); opacity: 1; }
.agent-row:first-child { border-top: 0; }
.agent-row.off .ag-name, .agent-row.off .ag-duty { opacity: .6; }
.agent-row h3 { font-size: 14.5px; font-weight: 650; }
.ag-name { min-width: 0; display: grid; gap: 1px; }
.ag-build { justify-self: start; }
.ag-duty { min-width: 0; display: grid; gap: 2px; font-size: 13.5px; }
.ag-state .seg { white-space: nowrap; }
.ag-more-btn { white-space: nowrap; gap: 4px; }
.ag-more { grid-column: 1 / -1; padding: 4px 0 4px; display: grid; gap: 10px; }
.ag-more .agent-actions { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 24px; padding-top: 12px; }
@media (max-width: 1250px) {
  .agent-row { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .ag-build { grid-column: 2; grid-row: 1; }
  .ag-state { grid-column: 3; grid-row: 1; }
  .ag-more-btn { grid-column: 4; grid-row: 1; }
  .ag-duty { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
  .agent-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ag-build { grid-column: 2; grid-row: 1; justify-self: end; }
  .ag-duty { grid-row: 2; }
  .ag-state { grid-column: 1; grid-row: 3; }
  .ag-more-btn { grid-column: 2; grid-row: 3; justify-self: end; }
}
/* Stat strips reflow evenly: 4 across, then 2 by 2, then one column, with clean dividers */
.stat-strip { gap: 1px; background: var(--card-border, var(--border)); }
.stat-strip > div { border-left: 0; background: var(--stat-bg, var(--surface)); }
:root { --stat-bg: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --stat-bg: #10192B; } }
:root[data-theme="dark"] { --stat-bg: #10192B; }
@media (max-width: 1250px) { .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stat-strip { grid-template-columns: 1fr; } }
/* Sidebar sections carry their icon again (it used to be on the header buttons) */
.rail-section { display: flex; align-items: center; gap: 10px; }
.rail-section > svg:first-child { width: 18px; height: 18px; flex-shrink: 0; }
.rail-section .rail-chev { opacity: .6; }

/* A one-page section is a plain top-level link (for example CMMS for a customer) */
.rail-section.rail-solo[aria-current="page"] { background: var(--nav-active, var(--nav-hover)); color: var(--nav-text); box-shadow: inset 3px 0 0 var(--accent); }
/* Header: room between search, PeakAssist and the profile (user, 2026-10-03) */
@media (min-width: 901px) {
  .topbar.appbar { gap: 14px; padding-right: 28px; }
  .appbar .gsearch { width: 280px; margin-right: 10px; }
  .appbar .assist-btn { margin-right: 10px; }
}
@media (min-width: 901px) and (max-width: 1200px) { .appbar .gsearch { width: 200px; } }
/* Sidebar levels (user, 2026-10-03): section header at the edge; its pages indented under a guide line;
   sub-pages indented again and smaller. The active marker moves in with each level. */
.rail-group.open:not(.solo) > div { margin-left: 18px; padding-left: 8px; border-left: 1px solid var(--card-border, var(--border)); }
.rail .nav-item { font-size: 13.5px; }
.rail .nav-item.nav-sub { padding-left: 38px; font-size: 13px; color: var(--nav-muted); }
.rail .nav-item.nav-sub[aria-current="page"] { color: var(--nav-text); }
.rail .nav-item[aria-current="page"]::before { left: -9px; }
.rail-group.open > .rail-section { font-weight: 650; }
/* Agents back to cards (user, 2026-10-03), built on a fixed grid so every card lines up: name and build state
   on top, the duty in the middle (it stretches), the state switch and actions pinned to the bottom edge. */
.agent-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; border: 0; background: none; overflow: visible; border-radius: 0; }
.agent-list .agent-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; grid-template-areas: "name build" "duty duty" "state more"; gap: 10px 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--card-border, var(--border)); border-radius: var(--radius); background: var(--card-bg, var(--surface)); }
.agent-list .agent-row:first-child { border-top: 1px solid var(--card-border, var(--border)); }
.agent-list .agent-row .ag-name { grid-area: name; }
.agent-list .agent-row .ag-build { grid-area: build; justify-self: end; white-space: nowrap; }
.agent-list .agent-row .ag-duty { grid-area: duty; align-self: start; gap: 6px; }
.agent-list .agent-row .ag-state { grid-area: state; align-self: end; justify-self: start; min-height: 32px; display: flex; align-items: center; }
.agent-list .agent-row .ag-more-btn { grid-area: more; align-self: end; justify-self: end; }
.agent-list .agent-row .ag-more { grid-area: auto; grid-column: 1 / -1; border-top: 1px solid var(--card-border, var(--border)); padding-top: 4px; }
.agent-list .agent-row .ag-more .agent-actions { grid-template-columns: 1fr; border-top: 0; padding-top: 8px; }
@media (max-width: 380px) { .agent-list { grid-template-columns: 1fr; } .agent-list .agent-row { grid-template-areas: "name build" "duty duty" "state state" "more more"; } .agent-list .agent-row .ag-more-btn { justify-self: start; } }
/* Four agents per division: 4 across on a wide screen, 2 by 2 on a normal one, 1 on a phone. Never 3 + 1. */
.agent-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1700px) { .agent-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .agent-list { grid-template-columns: 1fr; } }
/* Group rows in a table (partners under a holding company) */
.tbl tr.group td { background: var(--inset-bg, var(--surface-2)); font-size: 13px; padding-block: 8px; color: var(--text); }

/* Customer picker (partner onboarding) */
.cust-pick { border: 1px solid var(--card-border, var(--border)); border-radius: var(--radius-sm); padding: 10px 12px 12px; margin: 0; display: grid; gap: 10px; min-width: 0; }
.cust-pick legend { font-size: 13px; font-weight: 600; padding: 0 6px; }
.cust-list { display: grid; max-height: 230px; overflow-y: auto; }
.cust-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--card-border, var(--border)); cursor: pointer; font-size: 13.5px; }
.cust-row:first-child { border-top: 0; }
.cust-row input { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.cust-row .chip { flex-shrink: 0; }
@media (max-width: 720px), (pointer: coarse) { .cust-row { min-height: 44px; flex-wrap: wrap; } }

/* ---------- v35: Reports, Predictive maintenance, Engineering, Facility Builder, Customer build-out ---------- */
.status-dot.ok { background: var(--accent); }
.span-9 { grid-column: span 9; }
.pad { padding: 12px 14px; display: block; }
.field-inline { flex-direction: row; align-items: center; gap: 8px; }
.field-inline .select { min-width: 200px; }
.switch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 16px; }
.limit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.chip-x { background: none; border: 0; padding: 0 0 0 2px; cursor: pointer; color: inherit; display: inline-flex; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check-row input { width: 16px; height: 16px; accent-color: var(--accent); }
input[type="range"] { width: 100%; accent-color: var(--accent); }

/* Report preview: a sheet of paper inside the panel */
.report-page { background: var(--inset-bg, var(--surface-2)); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.report-page.landscape { max-width: none; }
.report-cover { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.report-cover strong { font-size: 18px; }
.report-logo { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.report-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.report-stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.report-stats strong { font-size: 18px; font-weight: 600; }
.report-text { margin: 0; font-size: 14px; }
.report-notes { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); min-height: 56px; }

/* Engineering */
.file-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; min-height: 38px; }
.file-item:hover { background: var(--surface-2); }
.file-item.on { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.file-item.on .hint, .file-item.on .chip { color: var(--accent-ink); }
.code-area { font-family: var(--mono); font-size: 13px; line-height: 1.55; min-height: 320px; white-space: pre; tab-size: 2; }
.hmi-canvas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 14px; background: var(--px-bg); border-radius: var(--radius-sm); min-height: 240px; align-content: start; }
.hmi-tile { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--px-equip); background: var(--px-panel); color: var(--px-value); font: inherit; text-align: left; cursor: pointer; min-height: 76px; }
.hmi-tile .hint { color: var(--px-label); }
.hmi-tile strong { font-size: 13px; overflow-wrap: anywhere; }
.hmi-tile .num { font-size: 15px; font-weight: 600; }
.hmi-tile.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.hmi-tile.k-button, .hmi-tile.k-hoa { border-style: dashed; border-color: var(--px-equip-strong); }

/* Facility drawing: gray equipment on a gray ground; only an alarm takes a color */
.plan { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
.plan-ground { fill: var(--px-bg); }
.plan-building { fill: none; stroke: var(--px-equip); stroke-width: 1.5; stroke-dasharray: 6 5; }
.plan-title { font-size: 13px; font-weight: 600; fill: var(--px-label); }
.plan-pipe { stroke: var(--px-fluid); stroke-width: 5; stroke-linecap: round; }
.plan-obj rect { fill: var(--px-panel); stroke: var(--px-equip-strong); stroke-width: 1.5; }
.plan-obj.pick { cursor: pointer; }
.plan-obj.pick:focus-visible rect, .plan-obj.on rect { stroke: var(--accent); stroke-width: 3; }
.plan-obj:focus { outline: none; }
.plan-obj.bad rect { stroke: var(--p2); stroke-width: 3; }
.plan-name { font-size: 12.5px; font-weight: 600; fill: var(--px-label); }
.plan-val { font-size: 15px; font-weight: 600; fill: var(--px-value); }

/* Customer build-out */
.bo-phase { display: flex; flex-direction: column; gap: 8px; }
.bo-phase > h2 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }
.bo-step { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 16px; background: var(--card-bg, var(--surface)); border: 1px solid var(--card-border, var(--border)); border-radius: var(--radius); }
.bo-step.current { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.bo-step.na { opacity: .7; }
.bo-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-strong); font-size: 13px; font-weight: 700; color: var(--text-muted); }
.bo-step.done .bo-n { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.bo-step.current .bo-n { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.bo-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bo-main h3 { font-size: 15px; font-weight: 650; }
.bo-main p { margin: 0; font-size: 13.5px; }
.bo-ev { display: flex; gap: 6px; align-items: flex-start; color: var(--text); }
.bo-ev .icon { margin-top: 2px; flex-shrink: 0; }
.bo-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 300px; }
.v-list li { align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.v-list li:last-child { border-bottom: 0; }
.v-chip { min-width: 64px; justify-content: center; flex-shrink: 0; }
@media (max-width: 760px) {
  .bo-step { grid-template-columns: 30px minmax(0, 1fr); }
  .bo-acts { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
  .limit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.report-page td:first-child, .report-page th:first-child { white-space: nowrap; }

/* Sites (user, 2026-10-06): address first, then name and site ID, then the assets at the site. */
.site-search { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.site-search .input { max-width: 460px; }
.site-cats { padding: 8px 14px; border-bottom: 1px solid var(--border); }
.site-list { display: flex; flex-direction: column; }
.site-block { border-bottom: 1px solid var(--border); }
.site-block:last-child { border-bottom: 0; }
.site-row { display: flex; align-items: center; gap: 12px; padding: 8px 14px; flex-wrap: wrap; }
.site-toggle { background: none; border: 1px solid var(--border); border-radius: 8px; width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-muted); cursor: pointer; flex: none; }
.site-toggle:hover { background: var(--surface-3); }
.site-main { background: none; border: 0; padding: 4px 0; text-align: left; cursor: pointer; flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--text); font: inherit; }
.site-main:hover .site-addr { text-decoration: underline; }
.site-addr { font-weight: 600; font-size: 14.5px; }
.site-name { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: 13px; color: var(--text-muted); }
.site-name strong { color: var(--text); font-weight: 600; }
.site-meta { flex: none; min-width: 70px; }
.site-risk { min-width: 120px; }
.site-assets { padding: 0 14px 12px 58px; display: flex; flex-direction: column; gap: 8px; }
.site-group { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.site-area { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); background: var(--surface-3); }
.asset-line { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1.4fr) minmax(120px, .8fr); gap: 12px; align-items: center; padding: 8px 12px; background: var(--surface); border: 0; border-top: 1px solid var(--border); text-align: left; cursor: pointer; color: var(--text); font: inherit; }
.site-group .asset-line:first-child, .site-area + .asset-line { border-top: 0; }
.asset-line:hover { background: var(--surface-2); }
.asset-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.site-empty { padding: 4px 0; margin: 0; }
.site-areas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.flow-steps { margin-bottom: 4px; }
@media (max-width: 700px) {
  .site-assets { padding-left: 14px; }
  .asset-line { grid-template-columns: 1fr; gap: 4px; }
  .site-meta { min-width: 0; }
  .site-toggle { width: 44px; height: 44px; }
}

/* Address row in the new-site form: inputs and the Find button sit on one line whatever the label length. */
.addr-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.addr-field { justify-content: flex-end; }
.addr-field label { white-space: nowrap; }
.addr-street { flex: 2 1 260px; }
.addr-city { flex: 1 1 170px; }
.addr-state { flex: 0 0 64px; }
.addr-zip { flex: 0 0 124px; }
.addr-find { flex: 0 0 auto; }
.addr-find .btn { min-height: 40px; }