/*
 * Argus Web Hub — "Sentinel" theme, ported from src/VMS.Client.Common/Themes/Sentinel.xaml.
 * Same hex values as the desktop clients' default theme (ARCHITECTURE.md §116) — this is a port,
 * not a reinterpretation. Only the values actually used by the web Hub's chrome are carried over;
 * the full desktop token set (10+ more brushes, Cyclops mascot tokens) stays WPF-only until a
 * screen here actually needs one.
 */

/*
 * Argus Modern Typography (§151, §152, Area II)
 * Self-hosted OFL fonts: Chakra Petch (display), IBM Plex Sans (body), IBM Plex Mono (data).
 */
@font-face {
    font-family: 'Chakra Petch';
    src: url('fonts/ChakraPetch-Regular.woff2') format('woff2'),
         url('fonts/ChakraPetch-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Chakra Petch';
    src: url('fonts/ChakraPetch-Medium.woff2') format('woff2'),
         url('fonts/ChakraPetch-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Chakra Petch';
    src: url('fonts/ChakraPetch-SemiBold.woff2') format('woff2'),
         url('fonts/ChakraPetch-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Chakra Petch';
    src: url('fonts/ChakraPetch-Bold.woff2') format('woff2'),
         url('fonts/ChakraPetch-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2'),
         url('fonts/IBMPlexMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2'),
         url('fonts/IBMPlexMono-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('fonts/IBMPlexSans-Variable.woff2') format('woff2 supports variations'),
         url('fonts/IBMPlexSans-Variable.woff2') format('woff2'),
         url('fonts/IBMPlexSans-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #0B0F17;
    --panel: #12161F;
    --card: #161B26;
    --border: #232B3A;
    --text-primary: #EDEFF3;
    --text-secondary: #8B95A7;
    --text-muted: #8B95A7;
    --text-subtle: #5B6576;
    --accent: #38BDF8;
    --accent-hover: #22D3EE;
    --danger: #FF453A;
    --success: #30D158;
    --warning: #FF9F0A;
    --surface-panel: #131A26;
    --surface-card: #161B26;
    --surface-border: #232B3A;
    --surface-deep: #080B12;
    --radius: 5px;

    /* Typography tokens — overridden by html[data-font="classic"] (Stage 4 / Area IV) */
    --font-display: 'Chakra Petch', 'Segoe UI', -apple-system, sans-serif;
    --font-body: 'IBM Plex Sans', 'Segoe UI', -apple-system, Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
}

html[data-font="classic"] {
    --font-display: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: Consolas, 'Courier New', monospace;
}

body {
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-body);
}

.mono {
    font-family: var(--font-mono);
}

h1, h2, h3, .argus-page-title, .hub-panel-title, .argus-section-title, .hub-roster-header > div:first-child > div:first-child {
    font-family: var(--font-display);
}

a.argus-link { color: #60A5FA; text-decoration: none; }
a.argus-link:hover { color: var(--accent); }

/* ── Sidebar nav (HubShellLayout) ── */
.argus-navitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px 9px 17px;
    margin: 0 10px 4px 10px;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    border-left: 3px solid transparent;
    text-decoration: none;
}
.argus-navitem:hover { background: #16202E; color: var(--text-primary); }
.argus-navitem.active {
    background: #16202E;
    color: var(--text-primary);
    border-left-color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.25);
}
.argus-navicon { width: 16px; text-align: center; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
/* Unread count on a nav item (Operator Chat). Worded as a number, never colour alone. */
.argus-navbadge { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 10px; background: var(--accent); color: #05070C; font-size: 11px; font-weight: 700; text-align: center; }

/* ── Argus Vector Icons (Stage 5 / Area III) ── */
.argus-icon {
    width: 1em;
    height: 1em;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.15em;
    display: inline-block;
    flex-shrink: 0;
}
.argus-navicon .argus-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* ── Hub shell (HubShellLayout.razor, §211) ──
   Wide screens: sidebar and content side by side, exactly as before (the values below are the old inline
   styles). <=840px: the sidebar becomes a slim sticky top bar with a menu button; the link list opens as an
   overlay only when asked. 840 = the old wrap point (260 sidebar + 560 content = 820) plus a scrollbar's width,
   so the page is never in a half-stacked state. */
.hub-shell { display: flex; flex-wrap: wrap; min-height: 100vh; }
.hub-sidebar {
    flex: 1 260px;
    min-width: 220px;
    background: var(--panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: relative;
}
.hub-sidebar-head {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    box-sizing: border-box;
    border-bottom: 1px solid #1a212f;
}
.hub-sidebar-nav { flex: 1; overflow-y: auto; padding-top: 4px; }
.hub-main { flex: 999 1 560px; min-width: 0; padding: 28px 32px; box-sizing: border-box; }
.hub-menu-toggle {
    display: none;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.hub-menu-toggle:hover { background: #16202E; border-color: var(--accent); }

@media (max-width: 840px) {
    .hub-sidebar {
        flex: 1 1 100%;
        min-width: 0;
        border-right: none;
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 60;
    }
    .hub-sidebar-head { height: 56px; padding: 0 16px; }
    .hub-menu-toggle { display: inline-flex; }
    .hub-sidebar-art { display: none; }
    .hub-sidebar-nav { display: none; }
    .hub-sidebar.open .hub-sidebar-nav {
        display: block;
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        max-height: calc(100vh - 56px);
        overflow-y: auto;
        padding-bottom: 12px;
        background: var(--panel);
        border-bottom: 1px solid var(--accent);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.55);
    }
    .hub-main { flex: 1 1 100%; padding: 18px 16px; }
}
.argus-sectionhead {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-subtle);
    margin: 18px 0 6px 17px;
}
.argus-sectionhead:first-child { margin-top: 14px; }

/* ── Buttons ── */
/* Control base used by the Alarms and Events pages. `argus-btn`, `-secondary`, `-danger` and
   `argus-select` were referenced by those pages with no rule behind them, so the browser drew
   its default white buttons and selects (§217 review). `-primary` below still wins for colour. */
.argus-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}
.argus-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.argus-btn-secondary { background: var(--surface-deep); color: var(--text-primary); }
.argus-btn-secondary:hover:not(:disabled) { border-color: var(--accent); }
.argus-btn-danger {
    background: rgba(255, 69, 58, 0.12);
    border-color: rgba(255, 69, 58, 0.5);
    color: var(--danger);
}
.argus-btn-danger:hover:not(:disabled) { background: rgba(255, 69, 58, 0.22); border-color: var(--danger); }

.argus-select {
    width: 100%;
    padding: 6px 10px;
    box-sizing: border-box;
    background: var(--surface-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12.5px;
}
.argus-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2); }
.argus-select:disabled { opacity: 0.55; cursor: not-allowed; }

.argus-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    background: var(--surface-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12.5px;
    resize: vertical;
}
.argus-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2); }
.argus-textarea:disabled { opacity: 0.55; cursor: not-allowed; }

/* A failed load shown in place of an empty list (§127.2). */
.load-error { color: var(--danger); }

.argus-btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12.5px;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
}
.argus-btn-outline:hover { color: var(--text-primary); border-color: var(--accent); }

.argus-btn-primary {
    background: #1B6FA8;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
}
.argus-btn-primary:hover { background: #2679B0; }
.argus-btn-primary:disabled { opacity: 0.6; cursor: default; }

/* Station toolbar buttons (Playback, Layout): one line, centred, one height. Added next to the shared button classes
   instead of changing them: those are used on every Hub page. The offset text in Refresh and Export came from a fixed height
   on buttons that were plain inline boxes, so a label wider than its share of the toolbar wrapped inside 26 px. */
.station-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px;
    font-size: 11.5px;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
}
.station-tool-btn .argus-icon { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Cards / KPI tiles ── */
.argus-card {
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
}
.argus-kpi-label {
    color: var(--text-subtle);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.argus-kpi-value { font-size: 26px; font-weight: 700; }

/* ── Table ── */
.argus-table-wrap {
    background: var(--surface-deep);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow-x: auto;
}
table.argus-table { width: 100%; border-collapse: collapse; }
table.argus-table th {
    text-align: left;
    padding: 8px 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-subtle);
    border-bottom: 1px solid var(--border);
}
table.argus-table td {
    padding: 10px 8px;
    font-size: 12.5px;
    color: var(--text-primary);
    border-bottom: 1px solid #1a212f;
}
table.argus-table tr:hover td { background: #0F141E; }

.argus-pill { padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
.argus-pill-online { background: rgba(48, 209, 88, 0.14); color: var(--success); }
.argus-pill-offline { background: rgba(255, 69, 58, 0.14); color: var(--danger); }
.argus-pill-error { background: rgba(255, 159, 10, 0.14); color: var(--warning); }
.argus-pill-unknown { background: rgba(139, 149, 167, 0.14); color: var(--text-muted); }

/* ── Form fields (Login) ── */
.argus-field { margin-bottom: 16px; }
.argus-field label { display: block; font-size: 13px; margin-bottom: 5px; color: var(--text-secondary); }
.argus-field input {
    width: 100%;
    padding: 9px 10px;
    box-sizing: border-box;
    background: var(--surface-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
}
.argus-field input:focus { outline: none; border-color: var(--accent); }
.argus-field select {
    width: 100%;
    padding: 9px 10px;
    box-sizing: border-box;
    background: var(--surface-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13.5px;
}
.argus-field select:focus { outline: none; border-color: var(--accent); }

/* ── Managed Devices Two-Pane Shell ── */
.hub-devices-shell {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
    min-height: calc(100vh - 76px);
}

.hub-devices-roster {
    flex: 0 1 280px;
    max-width: 290px;
    min-width: 245px;
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hub-devices-detail {
    flex: 999 1 560px;
    min-width: 0;
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (max-width: 960px) {
    .hub-devices-roster {
        max-width: 100%;
        flex: 1 1 100%;
        max-height: 360px;
    }
    .hub-devices-detail {
        flex: 1 1 100%;
    }
}

.hub-roster-header {
    padding: 14px 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.hub-roster-list {
    padding: 10px;
    overflow-y: auto;
    flex: 1;
}

.hub-tree-device {
    border-radius: 6px;
    margin-bottom: 4px;
    border: 1px solid transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.hub-tree-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}
.hub-tree-row:hover {
    background: #16202E;
}
.hub-tree-row.selected {
    background: rgba(56, 189, 248, 0.14);
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.45);
}

.hub-tree-children {
    margin-left: 18px;
    padding-left: 8px;
    border-left: 1px solid var(--border);
    margin-top: 2px;
    margin-bottom: 6px;
}

.hub-tree-channel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 2px;
}
.hub-tree-channel:hover {
    background: #16202E;
}
.hub-tree-channel.selected {
    background: rgba(56, 189, 248, 0.14);
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.45);
}
.hub-tree-channel.disabled-feed {
    opacity: 0.45;
}

.hub-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

/* ── Connectivity Eye & Hardware LED (Stage 3) ── */
@property --c { syntax: '<color>'; inherits: true; initial-value: #6E6E76; }

.eye {
    position: relative;
    display: inline-block;
    font-size: 16px;
    width: 1.2em;
    height: 1em;
    flex: none;
    --c: #6E6E76;
    transition: --c .45s ease;
}
.eye[data-state=streaming] { --c: #30D158; }
.eye[data-state=trouble] { --c: #FF9F0A; }
.eye[data-state=disabled] { --c: #FF453A; }
.eye[data-state=unknown] { --c: #6E6E76; }

.eye .halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .42s;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 50%, transparent), color-mix(in srgb, var(--c) 19%, transparent) 55%, transparent);
}
.eye[data-state=streaming] .halo { animation: eye-calm 1.4s ease-in-out infinite alternate; }
.eye[data-state=trouble] .halo { animation: eye-alert .65s ease-in-out infinite alternate; }
.eye[data-state=disabled] .halo { opacity: .55; }
.eye[data-state=unknown] .halo { opacity: 0; }

@keyframes eye-calm { from { opacity: .25 } to { opacity: .95 } }
@keyframes eye-alert { from { opacity: .15 } to { opacity: 1 } }

.eye .svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: .85em;
    height: .6em;
    transform: translate(-50%, -50%);
    overflow: visible;
    fill: none;
}
.eye .sweep, .eye .idle {
    transform-box: fill-box;
    transform-origin: center;
}
.eye .sweep {
    transition: transform .45s cubic-bezier(.3, 0, .8, .5), opacity .1s linear .38s;
}
.eye[data-state=streaming] .sweep, .eye[data-state=trouble] .sweep {
    transition: transform .42s ease-out, opacity .12s linear;
}
.eye[data-state=disabled] .sweep, .eye[data-state=unknown] .sweep {
    transform: scaleY(.06);
    opacity: 0;
}
.eye .lid {
    stroke: var(--c);
    stroke-width: 1.5;
    stroke-linejoin: round;
    fill: color-mix(in srgb, var(--c) 14%, transparent);
}
.eye .pupil {
    fill: var(--c);
}
.eye .closed {
    opacity: 0;
    transition: opacity .12s;
}
.eye .closed path {
    stroke: #FF453A;
    stroke-width: 1.5;
    stroke-linecap: round;
}
.eye[data-state=disabled] .closed {
    opacity: 1;
    transition: opacity .15s .38s;
}
.eye .spin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: .7em;
    height: .7em;
    margin: -.35em 0 0 -.35em;
    border-radius: 50%;
    border: .11em solid rgba(139, 149, 167, .22);
    border-top-color: #8B95A7;
    opacity: 0;
    transition: opacity .18s .45s;
}
.eye[data-state=unknown] .spin {
    opacity: 1;
    animation: eye-spin 1.1s linear infinite;
}
@keyframes eye-spin { to { transform: rotate(360deg) } }

.eye[data-state=streaming] .idle {
    animation: eye-blink var(--bd, 6s) var(--bl, 0s) infinite;
}
html[data-eye-blink="off"] .eye[data-state=streaming] .idle,
.no-blink .eye[data-state=streaming] .idle {
    animation: none;
}
@keyframes eye-blink {
    0%, 3.4%, 100% { transform: scaleY(1) }
    1.7% { transform: scaleY(.08) }
}
.eye[data-state=trouble] .idle {
    animation: eye-wince 3.6s infinite;
}
@keyframes eye-wince {
    0%   { transform: translateX(0) rotate(0) scaleY(1) }
    6%   { transform: translateX(-.6px) rotate(-2.5deg) scaleY(.62) }
    11%  { transform: translateX(.5px) rotate(1.5deg) scaleY(.78) }
    16%  { transform: translateX(-.3px) rotate(-1deg) scaleY(.7) }
    22%, 100% { transform: translateX(0) rotate(0) scaleY(1) }
}

/* hardware rows: a plain glowing dot, same halo tempo */
.eye.led .svg, .eye.led .spin { display: none; }
.eye .dot { display: none; }
.eye.led .dot {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}

.hub-tree-row .eye.led {
    margin-top: 2px;
}

/* No prefers-reduced-motion override on purpose: the eye is a status signal, the desktop
   ignores the OS setting, and on site PCs with Windows animation effects off (VMs, remote
   sessions) it silenced every eye (§216.7). Blink is switched off in Settings instead. */

.hub-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.hub-badge-mfg {
    background: #1E3A8A;
    color: #60A5FA;
}
.hub-badge-ch {
    background: #1E293B;
    color: #94A3B8;
}
.hub-badge-cap {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
}

.hub-icon-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-subtle);
    padding: 2px 5px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1.2;
}
.hub-icon-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border);
}

/* ── Right Pane Header & Segmented 4-Tab Bar ── */
.hub-device-header {
    padding: 14px 20px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
}

.hub-tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 16px;
    background: var(--surface-deep);
    border-bottom: 1px solid var(--border);
}

.hub-tab-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.12s ease;
}
.hub-tab-btn:hover {
    background: #16202E;
    color: var(--text-primary);
}
.hub-tab-btn.active {
    background: rgba(56, 189, 248, 0.14);
    color: var(--accent);
    border-color: rgba(56, 189, 248, 0.45);
}

.hub-tab-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

/* ── Responsive Two-Column Grid inside Tabs ── */
.hub-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

/* ── Live Stream Matrix Grid (1x1 to 8x8) ── */
.hub-matrix-grid {
    display: grid;
    gap: 6px;
    background: #06090F;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.hub-matrix-cell {
    position: relative;
    background: #0A0E17;
    border: 1px solid #1E293B;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
}
.hub-matrix-cell.empty {
    border-style: dashed;
    border-color: #1A2232;
    align-items: center;
    justify-content: center;
}

.hub-matrix-cell-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: rgba(8, 11, 18, 0.78);
    font-size: 11px;
    pointer-events: none;
}

/* ── Banners ── */
.hub-banner-error {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid #EF4444;
    color: #FCA5A5;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    margin-bottom: 12px;
}
.hub-banner-success {
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid #10B981;
    color: #6EE7B7;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    margin-bottom: 12px;
}
.hub-banner-info {
    background: rgba(56, 189, 248, 0.10);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #BAE6FD;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    margin-bottom: 12px;
}

/* ── Delta Wall Layout Editor (3-column workspace) ── */
.hub-field-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.argus-input {
    width: 100%;
    padding: 6px 10px;
    box-sizing: border-box;
    background: var(--surface-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12.5px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.argus-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}
.argus-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.hub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #1A2230;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.hub-btn:hover:not(:disabled) {
    background: #232E42;
    border-color: var(--accent);
}
.hub-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.hub-btn-primary {
    background: #1B6FA8;
    border-color: #2679B0;
    color: #FFFFFF;
}
.hub-btn-primary:hover:not(:disabled) {
    background: #2679B0;
    border-color: var(--accent);
}
.hub-btn-secondary {
    background: #18202E;
    border-color: var(--border);
    color: var(--text-primary);
}
.hub-btn-secondary:hover:not(:disabled) {
    background: #202B3D;
    border-color: var(--accent);
}
.hub-btn-danger {
    background: rgba(255, 69, 58, 0.15);
    border-color: rgba(255, 69, 58, 0.55);
    color: #FCA5A5;
}
.hub-btn-danger:hover:not(:disabled) {
    background: rgba(255, 69, 58, 0.28);
    border-color: var(--danger);
    color: #FFFFFF;
}

.hub-badge-info {
    background: rgba(56, 189, 248, 0.16);
    border: 1px solid rgba(56, 189, 248, 0.45);
    color: var(--accent);
}

.hub-deltawall-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-height: calc(100vh - 110px);
    position: relative;
}

/* ── Stage 1: Saved Views Horizontal Pill Strip ── */
.hub-deltawall-pill-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--surface-panel);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    padding: 10px 14px;
}

.hub-deltawall-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--surface-border);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
    white-space: nowrap;
}
.hub-deltawall-pill:hover {
    border-color: var(--accent-hover);
    color: var(--text-primary);
    background: #1B2434;
}
.hub-deltawall-pill.active {
    background: rgba(56, 189, 248, 0.14);
    border-color: var(--accent);
    color: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.32), 0 4px 12px rgba(0, 0, 0, 0.25);
}
.hub-deltawall-pill-dims {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(8, 11, 18, 0.65);
}
.hub-deltawall-pill.active .hub-deltawall-pill-dims {
    color: var(--accent);
    background: rgba(8, 11, 18, 0.85);
}
.hub-deltawall-pill-new {
    border: 1.5px dashed rgba(56, 189, 248, 0.55);
    background: rgba(56, 189, 248, 0.06);
    color: var(--accent);
}
.hub-deltawall-pill-new:hover,
.hub-deltawall-pill-new.active {
    border-style: solid;
    border-color: var(--accent);
    background: rgba(56, 189, 248, 0.16);
    color: #FFFFFF;
}

/* ── Stage 4: Consolidated Toolbar Row ── */
.hub-deltawall-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: var(--surface-panel);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    padding: 10px 16px;
}

.hub-deltawall-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.hub-deltawall-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.hub-deltawall-preset-popover {
    background: var(--surface-panel);
    border: 1px solid var(--accent);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.hub-preset-family-toggle {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--surface-deep);
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    padding: 2px;
}

.hub-preset-family-btn {
    height: 26px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.hub-preset-family-btn:hover {
    color: var(--text-primary);
}
.hub-preset-family-btn.active {
    background: var(--surface-card);
    color: var(--accent);
    font-weight: 700;
}

.hub-preset-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}

.hub-preset-card {
    width: 62px;
    height: 60px;
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    padding: 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.hub-preset-card:hover {
    border-color: var(--accent-hover);
}
.hub-preset-card.selected {
    border-color: var(--accent);
    border-width: 1.5px;
    background: rgba(56, 189, 248, 0.10);
}

.hub-preset-card-label {
    background: var(--surface-deep);
    border-radius: 3px;
    padding: 1px 2px;
    font-size: 9px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hub-preset-card.selected .hub-preset-card-label {
    color: var(--accent);
}

/* ── Stage 2: Full-Width Hero Grid Wall ── */
.hub-deltawall-canvas-panel {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    background: var(--surface-panel);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-height: 560px;
}

/* Cell shape is set per layout by DeltaWall.razor GetGridShapeStyle (16:9 cells, width capped by
   viewport height, centred). Do not give the grid a fixed height, min-height or fixed row tracks:
   that is what stretched cells to ~2.7:1 on wide screens. */
.hub-deltawall-grid {
    --dw-chrome: 300px;
    flex: 0 0 auto;
    display: grid;
    gap: 10px;
}

.hub-deltawall-cell {
    position: relative;
    background: #141821;
    border: 1px solid #283244;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    min-height: 0;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.hub-deltawall-cell:hover {
    border-color: var(--accent);
}
.hub-deltawall-cell.drag-over {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.4) inset;
    background: rgba(56, 189, 248, 0.10);
}
.hub-deltawall-cell.empty-inner {
    border: 1.5px dashed rgba(110, 125, 150, 0.55);
    background: rgba(15, 21, 32, 0.65);
}

.hub-deltawall-cell-banner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(10, 14, 22, 0.65) 0%, rgba(10, 14, 22, 0.92) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    z-index: 3;
    pointer-events: none;
}

/* ── Stage 3: Slide-In Right-Hand Camera Picker Drawer ── */
.hub-deltawall-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 14, 0.45);
    z-index: 90;
    transition: opacity 0.16s ease;
}

.hub-deltawall-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    max-width: 100vw;
    background: var(--surface-panel);
    border-left: 1px solid var(--accent);
    box-shadow: -12px 0 36px rgba(0, 0, 0, 0.65);
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 18px 16px;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .hub-deltawall-pill-strip {
        padding: 8px 10px;
        gap: 6px;
    }
    .hub-deltawall-toolbar {
        padding: 10px 12px;
    }
    .hub-deltawall-canvas-panel {
        padding: 10px;
        min-height: 380px;
    }
    .hub-deltawall-grid {
        --dw-chrome: 340px;
        gap: 8px;
    }
    .hub-deltawall-drawer {
        width: 100vw;
        border-left: none;
    }
}

/* ── Recording Servers Management (ARCHITECTURE.md §207) ── */
.hub-servers-shell {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    min-height: calc(100vh - 120px);
}

.hub-servers-main {
    flex: 1 1 540px;
    min-width: min(320px, 100%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* The roster adapts to the width it is actually given (screen minus sidebar minus editor panel), not to
       the screen size: see the @container rules below. */
    container: servers-roster / inline-size;
}

/* Roster columns. Full table needs ~890px. As the roster gets narrower, drop the least important column first:
   Storage Location, then Port, then Address, then Cameras. Name, Status and Storage Health are never dropped
   (they are what an operator reads at a glance; the dropped values are all in the editor panel). */
.rs-col-name     { min-width: 120px; }
.rs-col-address  { min-width: 130px; }
.rs-col-port     { width: 70px; text-align: center; }
.rs-col-location { min-width: 180px; }
.rs-col-status   { width: 95px; text-align: center; }
.rs-col-health   { min-width: 130px; }
.rs-col-cameras  { width: 80px; text-align: center; }
.rs-ellipsis    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@container servers-roster (max-width: 899px) { .rs-col-location { display: none; } }
@container servers-roster (max-width: 689px) { .rs-col-port     { display: none; } }
@container servers-roster (max-width: 559px) { .rs-col-address  { display: none; } }
@container servers-roster (max-width: 429px) {
    .rs-col-cameras { display: none; }
    .rs-col-name    { min-width: 90px; }
    .rs-col-health  { min-width: 100px; }
    .rs-col-status  { width: 80px; }
    .rs-col-name .rs-ellipsis { max-width: 110px !important; }
    .rs-col-status .argus-pill { padding: 2px 7px; font-size: 10.5px; }
}

.hub-servers-editor {
    /* Scales with the screen (380px on small laptops up to 520px on large monitors) so the roster gets the rest. */
    flex: 0 0 clamp(380px, 30vw, 520px);
    max-width: 520px;
    min-width: min(340px, 100%);
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1080px) {
    .hub-servers-editor {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.hub-servers-summary {
    background: #141419;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hub-servers-summary-fleet {
    display: flex;
    flex-direction: column;
}

.hub-servers-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.hub-badge-storage-healthy {
    background: #182A1E;
    border: 1px solid var(--success);
    color: var(--success);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hub-badge-storage-error {
    background: #3D1414;
    border: 1px solid var(--danger);
    color: var(--danger);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hub-badge-cameras {
    background: #1C2430;
    border: 1px solid var(--accent);
    color: #fff;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hub-table-row-selected td {
    background: #162436 !important;
    border-top: 1px solid rgba(56, 189, 248, 0.4);
    border-bottom: 1px solid rgba(56, 189, 248, 0.4) !important;
}

/* Modal and Dialog styles */
.hub-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 14, 0.72);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.hub-modal-card {
    background: var(--surface-panel);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75);
    max-width: 660px;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: hubModalIn 0.15s ease-out;
}

@keyframes hubModalIn {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.hub-modal-header {
    padding: 14px 18px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hub-modal-body {
    padding: 18px;
    overflow-y: auto;
    max-height: 72vh;
}

.hub-modal-footer {
    padding: 12px 18px;
    background: var(--panel);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.hub-browser-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12.5px;
    border: 1px solid transparent;
    user-select: none;
    transition: background 0.12s ease;
}
.hub-browser-item:hover {
    background: #16202E;
}
.hub-browser-item.selected {
    background: #162436;
    border-color: rgba(56, 189, 248, 0.5);
}

/* ---- Station on a phone (instructions_for_claude.md XXII, stages P0 to P4). Below 720 px wide only; the desk layout is untouched.
   Keep the breakpoint in step with the phone checks in tests/harness/WebHubStationRender. ---- */
:root { --bottom-nav-h: 56px; }
.station-phone-bar, .station-sheet-backdrop, .station-sheet-grabber, .station-phone-cols-btn { display: none; }

@media (max-width: 719px) {
    /* P1: the top strip is the title, one status indicator and a Menu button; the pills and actions open from the Menu. */
    .station-top-strip { padding: calc(4px + env(safe-area-inset-top)) 10px 4px !important; min-height: 44px !important; }
    .station-phone-bar { display: flex; align-items: center; gap: 8px; margin-left: auto; }
    .station-status { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 12px; border: 1px solid currentColor; white-space: nowrap; }
    .station-menu-btn { min-height: 44px; min-width: 64px; font-size: 12px !important; }
    .station-pills, .station-actions { display: none !important; }
    .station-top-strip.menu-open .station-pills,
    .station-top-strip.menu-open .station-actions { display: flex !important; flex-wrap: wrap; width: 100%; gap: 6px !important; }
    .station-pill { padding: 2px 7px !important; }
    .station-actions .argus-btn-outline { min-height: 44px; }

    /* "Start Shift" keeps its title and its button; the long explanation is dropped so the banner is one line. */
    .station-shift-banner { padding: 6px 10px !important; gap: 8px !important; }
    .station-shift-note { display: none; }
    .station-shift-banner .argus-btn-primary, .chat-broadcast-banner .argus-btn-primary { min-height: 44px; }

    /* P1: the rail becomes a bottom navigation bar; the body leaves room for it. */
    .station-rail {
        position: fixed !important; left: 0; right: 0; bottom: 0; width: auto !important;
        height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
        flex-direction: row !important; justify-content: space-around; align-items: stretch !important;
        padding: 0 0 env(safe-area-inset-bottom) !important; gap: 0 !important;
        border-right: none !important; border-top: 1px solid var(--border); z-index: 70;
    }
    .station-rail-btn { flex: 1; width: auto !important; min-width: 44px; min-height: 44px; padding: 4px 0 !important; justify-content: center; }
    .station-shell-body.has-rail { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); box-sizing: border-box; }

    /* P2: the live wall is one tile per row (two on request), each tile 16:9, the tile controls sized for a finger. */
    .station-wall-toolbar { height: auto !important; min-height: 44px; flex-wrap: wrap; padding: 4px 8px !important; gap: 6px; }
    .station-wall-toolbar .argus-btn-outline { min-height: 44px; }
    .station-wall-gateway { display: none; }
    .station-phone-cols-btn { display: inline-flex; align-items: center; }
    .station-grid { grid-template-columns: 1fr !important; grid-template-rows: none !important; grid-auto-rows: max-content; align-content: start; overflow-y: auto !important; }
    .station-grid.phone-cols-2 { grid-template-columns: 1fr 1fr !important; }
    .station-video-cell { grid-row: auto !important; grid-column: auto !important; aspect-ratio: 16 / 9; min-height: 0; }
    .station-grid:has(.wall-fill-expanded) { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; }
    .station-video-cell.wall-fill-expanded { aspect-ratio: auto; height: 100%; }
    .tile-gesture-toolbar button { width: 44px !important; height: 44px !important; font-size: 15px !important; }
    .tile-dpad { grid-template-columns: repeat(3, 44px) !important; grid-template-rows: repeat(3, 44px) !important; }

    /* P3: a dock is a bottom sheet: a tap outside or a swipe down closes it, the keyboard lifts it. */
    .station-sheet-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 75; }
    .station-right-column {
        position: fixed !important; left: 0; right: 0; top: auto !important; width: auto !important;
        bottom: var(--sheet-bottom, calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)));
        height: min(75vh, calc(100dvh - 96px - var(--vv-bottom, 0px)));   /* shorter while the keyboard covers the bottom, so the top stays on screen */
        border-radius: 14px 14px 0 0; border: 1px solid var(--border) !important; box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.55); z-index: 80;
    }
    #compact-column-resize-handle { display: none !important; }
    .station-sheet-grabber { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--text-subtle); margin: 6px auto 2px; flex-shrink: 0; }
    .station-dock-header { height: 44px !important; }
    .station-dock-header .argus-btn-outline { min-height: 44px; min-width: 64px; }
    .chat-dock input[data-testid='chat-input'], .chat-dock .argus-btn-primary { min-height: 44px !important; font-size: 14px !important; }

    /* P4: Playback keeps its toolbar and transport inside the screen and stacks its tiles. */
    .playback-toolbar { height: auto !important; min-height: 44px; flex-wrap: wrap; padding: 6px 8px !important; gap: 6px !important; }
    .playback-toolbar > div { flex-wrap: wrap; min-width: 0; }
    .playback-toolbar .argus-btn-outline, .playback-toolbar .argus-btn-primary { min-height: 44px; }
    .playback-video-area { grid-template-columns: 1fr !important; grid-template-rows: none !important; grid-auto-rows: max-content; overflow-y: auto !important; }
    .playback-tile { aspect-ratio: 16 / 9; }
    .playback-tile.wall-fill-expanded { aspect-ratio: auto; }
    .playback-transport-bar { height: auto !important; flex-wrap: wrap; padding: 6px 8px !important; gap: 6px !important; }
    .playback-transport-bar > div { flex-wrap: wrap; min-width: 0; }
    .playback-transport-bar .argus-btn-outline, .playback-transport-bar .argus-btn-primary { min-height: 44px; }
    .playback-timeline-container { overflow-x: auto; }

    /* P4: the Alarm Monitor stacks its panels in one column (the presets and splitters are for a wide screen). */
    .alarm-monitor-toolbar { height: auto !important; min-height: 44px; flex-wrap: wrap; padding: 6px 8px !important; }
    .alarm-monitor-toolbar > div:last-child, .alarm-preset-group { display: none !important; }
    #alarm-monitor-grid { display: flex !important; flex-direction: column; overflow-y: auto !important; gap: 8px !important; }
    #alarm-monitor-grid > div { min-width: 0 !important; width: 100%; flex: 0 0 auto; min-height: 360px !important; }
    #alarm-monitor-grid .alarm-grid-splitter { display: none !important; }

    /* The layout and camera pickers are fixed-width dropdowns on a desk; on a phone they span the screen. */
    .station-popover { position: fixed !important; left: 8px !important; right: 8px !important; top: 72px !important; width: auto !important; max-width: none !important; max-height: calc(100dvh - 160px) !important; z-index: 85 !important; }

    /* Cards and the broadcast banner: finger-sized buttons. */
    .alarm-toast .argus-btn-outline { min-height: 44px; }
}

/* ---- Alarm cards (instructions_for_claude.md XX, stage N1): on a phone they span the width and sit at the top. ---- */
@media (max-width: 719px) {
    .alarm-toast-stack { right: 12px !important; left: 12px; width: auto !important; top: 8px !important; }
}