/* ============================================================
   Dock Pulse — design tokens
   Source of truth: design_handoff_dock_pulse/design-source/app-themes.js
   Templates: saas (Clean SaaS, default) + mission (Mission Control)
   Modes:     light + dark
   Switch via body[data-template="…"][data-mode="…"]
   ============================================================ */

/* Default: Clean SaaS · light. Overridden by [data-template]/[data-mode] below. */
:root,
body[data-template="saas"][data-mode="light"] {
    /* surfaces */
    --bg: #F6F7F9; --rail: #FFFFFF; --panel: #FFFFFF; --panel2: #FFFFFF;
    --inset: #F1F3F6;
    --line: #E7EAEF; --line2: #D8DEE6;
    /* text */
    --text: #1A2230; --dim: #657182; --faint: #98A2B3;
    /* accent */
    --accent: #E4572E; --accent-soft: #FDEEE8; --on-accent: #FFFFFF;
    /* status */
    --ok: #12915A; --ok-soft: #E4F5EC;
    --charge: #2A78C2; --charge-soft: #E8F1FA;
    --error: #D92D20; --error-soft: #FDEAE8;
    --offline: #98A2B3; --offline-soft: #F1F3F6;
    /* depth */
    --shadow: 0 1px 3px rgba(16,24,40,.07), 0 8px 24px -12px rgba(16,24,40,.10);
    --scrim: rgba(16,24,40,.45);
    /* shape */
    --radius: 16px; --radius-sm: 10px; --pill: 99px;
    /* type */
    --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --caps: none;
}

body[data-template="saas"][data-mode="dark"] {
    --bg: #121417; --rail: #191C21; --panel: #1C2027; --panel2: #1C2027;
    --inset: #242931;
    --line: #2A303A; --line2: #363E4A;
    --text: #F0F3F7; --dim: #9AA5B4; --faint: #6B7686;
    --accent: #F0663C; --accent-soft: #3A241D; --on-accent: #FFFFFF;
    --ok: #3DCB82; --ok-soft: #1B2F26;
    --charge: #5BA3E8; --charge-soft: #1D2A3A;
    --error: #F2655A; --error-soft: #3A2220;
    --offline: #6B7686; --offline-soft: #242931;
    --shadow: 0 1px 3px rgba(0,0,0,.3);
    --scrim: rgba(0,0,0,.55);
    --radius: 16px; --radius-sm: 10px; --pill: 99px;
    --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --caps: none;
}

body[data-template="mission"][data-mode="dark"] {
    --bg: #0A0D12; --rail: #0D1117; --panel: #10151D; --panel2: #141B25;
    --inset: #161E29;
    --line: #1E2733; --line2: #28333F;
    --text: #E8EDF4; --dim: #8C98A8; --faint: #5A6678;
    --accent: #E4572E; --accent-soft: #2B1812; --on-accent: #FFFFFF;
    --ok: #34B26B; --ok-soft: #11271C;
    --charge: #3E8FD9; --charge-soft: #122233;
    --error: #E5484D; --error-soft: #2E1415;
    --offline: #4A5564; --offline-soft: #161B22;
    --shadow: none;
    --scrim: rgba(4,6,9,.7);
    --radius: 6px; --radius-sm: 4px; --pill: 3px;
    --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --caps: uppercase;
}

body[data-template="mission"][data-mode="light"] {
    --bg: #EDF0F3; --rail: #FFFFFF; --panel: #FFFFFF; --panel2: #F5F7F9;
    --inset: #EEF2F5;
    --line: #DCE2E9; --line2: #C9D2DC;
    --text: #141D28; --dim: #5C6878; --faint: #929DAC;
    --accent: #D94E26; --accent-soft: #FBE9E2; --on-accent: #FFFFFF;
    --ok: #1F9D5B; --ok-soft: #E2F3E9;
    --charge: #2A78C2; --charge-soft: #E4EFF9;
    --error: #D92D20; --error-soft: #FBE7E5;
    --offline: #8B96A3; --offline-soft: #EDF0F3;
    --shadow: 0 1px 2px rgba(20,29,40,.06);
    --scrim: rgba(20,29,40,.4);
    --radius: 6px; --radius-sm: 4px; --pill: 3px;
    --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --caps: uppercase;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* The HTML `hidden` attribute loses to ANY author display rule (flex/grid/etc).
   This blanket guard keeps hidden meaning hidden, everywhere, forever.
   (Bit us twice: stuck-open modals, and price-mode fields all showing at once.) */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ============================================================
   App shell — sidebar nav + topbar + main
   ============================================================ */
.app {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 56px 1fr;
    grid-template-areas:
        "rail topbar"
        "rail main";
    min-height: 100vh;
}

.rail {
    grid-area: rail;
    background: var(--rail);
    border-right: 1px solid var(--line);
    padding: 16px 12px;
}
.rail .brand {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 8px 20px;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.rail .brand .logo {
    width: 24px; height: 24px; border-radius: 6px;
    background: var(--accent);
    display: grid; place-items: center;
    color: var(--on-accent);
}
.rail nav a {
    display: block;
    padding: 8px 10px;
    margin: 2px 0;
    border-radius: var(--radius-sm);
    color: var(--dim);
    text-transform: var(--caps);
    font-size: 13px;
}
.rail nav a:hover { background: var(--inset); color: var(--text); text-decoration: none; }
.rail nav a.active { background: var(--accent-soft); color: var(--accent); }
.nav-badge {
    position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px;
    background: var(--error); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 18px; text-align: center;
    font-family: var(--mono);
}

.topbar {
    grid-area: topbar;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}
.topbar .crumb { color: var(--dim); font-size: 13px; text-transform: var(--caps); }
.topbar .who {
    display: flex; align-items: center; gap: 12px;
    font-size: 13px; color: var(--dim);
}

/* Topbar — superadmin workspace select */
.ws-select {
    background: var(--inset); border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    font-family: var(--font); font-size: 12px; font-weight: 600;
    color: var(--text);
    max-width: 200px;
    cursor: pointer;
}

/* Topbar — API LINK heartbeat */
.heartbeat {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em;
}
.heartbeat.ok    { color: var(--ok); }
.heartbeat.stale { color: var(--error); }
.hb-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
}
.heartbeat.ok .hb-dot { animation: hb-pulse 2s ease-in-out infinite; }
@keyframes hb-pulse {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 45%, transparent); }
    50%      { opacity: 0.6; box-shadow: 0 0 0 5px transparent; }
}

/* Topbar — icon button (theme toggle) */
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    background: var(--inset); border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--dim);
    cursor: pointer;
}
.icon-btn:hover { color: var(--text); border-color: var(--line2); }

/* Topbar — avatar + dropdown */
.avatar-wrap { position: relative; }
.avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--accent); color: var(--on-accent);
    border: 0; cursor: pointer;
    font-family: var(--font); font-size: 12px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    letter-spacing: 0.02em;
}
.avatar:hover { filter: brightness(0.95); }
.avatar-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 230px;
    background: var(--panel);
    border: 1px solid var(--line2);
    border-radius: var(--radius);
    box-shadow: var(--shadow), 0 12px 32px -12px rgba(16,24,40,.18);
    padding: 6px;
    z-index: 1200;   /* above Leaflet panes/controls (~400–1000) so the menu isn't trapped under the map */
}
.am-head {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
}
.am-item {
    display: block; width: 100%; text-align: left;
    background: none; border: 0;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--font); font-size: 13px; font-weight: 600;
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
}
.am-item:hover { background: var(--inset); text-decoration: none; }
.am-sep { height: 1px; background: var(--line); margin: 6px 0; }
.topbar .who .role {
    padding: 2px 8px; border-radius: var(--pill);
    background: var(--inset); color: var(--text);
    font-size: 11px; text-transform: var(--caps);
    border: 1px solid var(--line);
}

.main {
    grid-area: main;
    padding: 24px;
    overflow: auto;
}

/* ============================================================
   Banner (maintenance / platform-wide, §5.7)
   ============================================================ */
.banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 13px;
}
.banner.info     { background: var(--charge-soft); color: var(--charge); border: 1px solid var(--charge); }
.banner.warning  { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }
.banner.critical { background: var(--error-soft);  color: var(--error);  border: 1px solid var(--error); }

/* ============================================================
   Card primitive — used everywhere
   ============================================================ */
.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
    margin-bottom: 14px;        /* gap between consecutive standalone cards */
}
.card-grid > .card { margin-bottom: 0; }   /* grid's gap handles spacing here */
.card h2 { margin: 0 0 12px; font-size: 16px; letter-spacing: 0.2px; text-transform: var(--caps); }

/* ============================================================
   Status pill / LED — adapts to template via tokens
   ============================================================ */
.status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px;
    border-radius: var(--pill);
    font-size: 11px; font-weight: 600;
    text-transform: var(--caps);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.status.ok      { background: var(--ok-soft);      color: var(--ok);      }
.status.ok::before      { background: var(--ok); }
.status.mission { background: var(--accent-soft);  color: var(--accent);  }
.status.mission::before { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.status.charge  { background: var(--charge-soft);  color: var(--charge);  }
.status.charge::before  { background: var(--charge); }
.status.error   { background: var(--error-soft);   color: var(--error);   }
.status.error::before   { background: var(--error); }
.status.offline { background: var(--offline-soft); color: var(--offline); }
.status.offline::before { background: var(--offline); }

/* ============================================================
   Utilities — sparing; lean on tokens, not class soup
   ============================================================ */
.row     { display: flex; align-items: center; gap: 12px; }
.col     { display: flex; flex-direction: column; gap: 12px; }
.dim     { color: var(--dim); }
.mono    { font-family: var(--mono); }
/* Prototype order: label on top, value below (markup stays value-first). */
.kpi     { display: flex; flex-direction: column-reverse; gap: 5px; justify-content: flex-end; }
/* Numerals follow the template personality (prototype's <Num>):
   Clean SaaS = brand font, heavy; Mission Control = mono, regular. */
.kpi .v  { font-size: 28px; font-weight: 800; font-family: var(--font); font-variant-numeric: tabular-nums; }
body[data-template="mission"] .kpi .v { font-family: var(--mono); font-weight: 500; }
.kpi .l  { font-size: 11px; text-transform: var(--caps); color: var(--dim); letter-spacing: 0.3px; }

/* ============================================================
   Auth-screen layout — /login, /verify
   Centered card on workspace bg; no sidebar.
   ============================================================ */
.auth-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
}
.auth-brand {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 24px;
    font-weight: 700;
}
.auth-brand .logo {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--accent);
    display: grid; place-items: center;
    color: var(--on-accent);
}
.auth-card h1 {
    margin: 0 0 4px;
    font-size: 22px;
    text-transform: var(--caps);
}
.auth-card .lead {
    margin: 0 0 24px;
    color: var(--dim);
    font-size: 13px;
}

/* ============================================================
   Form primitives — fields, buttons, error chip
   ============================================================ */
.field {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: var(--inset);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    box-sizing: border-box;
}
.field:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--panel);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.field.code {
    font-family: var(--mono);
    text-align: center;
    font-size: 28px;
    letter-spacing: 8px;
    padding: 14px;
}
.btn {
    display: inline-block;
    background: var(--accent);
    color: var(--on-accent);
    border: 0;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    text-transform: var(--caps);
    letter-spacing: 0.3px;
}
.btn:hover { filter: brightness(0.95); }
.btn-link {
    background: none;
    border: 0;
    color: var(--accent);
    padding: 0;
    cursor: pointer;
    font-size: 13px;
    font-family: var(--font);
}
.btn-link:hover { text-decoration: underline; }
.err {
    background: var(--error-soft);
    color: var(--error);
    border: 1px solid var(--error);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* ============================================================
   Fleet UI — KPI strip, dock grid/card, chips, tables, charts
   ============================================================ */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}
.kpi-strip > .kpi {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow);
}
@media (max-width: 1100px) {
    .kpi-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

.chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--pill);
    background: var(--inset);
    color: var(--dim);
    font-size: 12px;
    text-transform: var(--caps);
    border: 1px solid transparent;
    text-decoration: none;
}
.chip:hover { color: var(--text); text-decoration: none; }
.chip-active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

.dock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.dock-grid.is-compact {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.dock-card {
    display: flex; flex-direction: column;
    gap: 11px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--text);
    transition: transform 0.08s ease, border-color 0.08s ease;
}
.dock-grid.is-compact .dock-card { padding: 10px 12px; gap: 8px; }
.dock-card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }
.dock-card.is-off    { opacity: 0.65; }
.dock-card.is-error  { border-color: color-mix(in oklab, var(--error) 60%, var(--line)); }

/* Header row: name + status pill */
.dc-head { display: flex; align-items: flex-start; gap: 8px; }
.dc-id   { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dc-name { font-size: 14.5px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-sub  { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--faint); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-grid.is-compact .dc-name { font-size: 13px; }
.dock-grid.is-compact .dc-sub  { font-size: 9.5px; }

/* Drone row */
.dc-drone { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dc-drone-name { font-size: 12px; font-weight: 700; color: var(--dim); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-grid.is-compact .dc-drone-name { font-size: 11px; }

/* Battery bar — prototype's BatteryBar: slim 4px track, bolt + % BESIDE it,
   fill colour stepped by charge level (set inline via Ui::batteryColor). */
.batt-bar {
    display: inline-flex; align-items: center; gap: 8px;
    width: 110px;
    flex: none;
}
.dock-grid.is-compact .batt-bar { width: 90px; }
.batt-track {
    flex: 1; height: 4px;
    background: var(--inset);
    border-radius: 2px;
    overflow: hidden;
}
.batt-fill { height: 100%; transition: width 0.25s ease; }
.batt-label {
    font-size: 12.5px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 3px;
}
body[data-template="mission"] .batt-label { font-family: var(--mono); font-weight: 500; }

/* Weather chips row */
.dc-wx { display: flex; align-items: center; gap: 12px; }
.wx-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--mono); font-size: 11px; font-weight: 700;
    color: var(--dim);
    white-space: nowrap;
}
.wx-chip.warn { color: var(--error); }
.wx-signal { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.wx-signal .mono { font-size: 11px; font-weight: 700; color: var(--dim); }

/* Task divider row */
.dc-task {
    display: flex; align-items: center; gap: 6px;
    padding-top: 9px; border-top: 1px solid var(--line);
}
.dock-grid.is-compact .dc-task { padding-top: 6px; }
.dc-task-text {
    font-family: var(--mono);
    font-size: 11px; font-weight: 600;
    color: var(--dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1;
}
.dc-task-text.dc-task-error { color: var(--error); }
.dc-eta {
    font-family: var(--mono);
    font-size: 10.5px; font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}

/* Sparkline + label row */
.dc-spark { display: flex; align-items: center; gap: 8px; }
.dc-spark svg { display: block; flex: none; }
.dc-spark-label {
    font-size: 10px; font-weight: 700; color: var(--faint);
    white-space: nowrap;
    letter-spacing: 0.04em;
    text-transform: var(--caps);
}
.dc-spark-today {
    margin-left: auto;
    font-size: 11px; font-weight: 800; color: var(--accent);
    white-space: nowrap;
}

/* ============================================================
   Card grid (for dock-detail rows of 2 cards each)
   ============================================================ */
.card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
@media (max-width: 900px) {
    .card-grid { grid-template-columns: 1fr; }
}

/* Key-value table (telemetry/weather) */
.kv {
    width: 100%;
    border-collapse: collapse;
}
.kv td {
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.kv td:first-child {
    color: var(--dim);
    font-size: 12px;
    text-transform: var(--caps);
    width: 40%;
}
.kv tr:last-child td { border-bottom: 0; }

/* Generic data table */
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th, .data-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}
.data-table th {
    color: var(--dim);
    font-size: 11px;
    text-transform: var(--caps);
    letter-spacing: 0.3px;
    font-weight: 600;
}
.data-table tr:hover td { background: var(--inset); }
.data-table tr:last-child td { border-bottom: 0; }

/* Buttons used on dock-detail and elsewhere */
.btn-sm {
    background: var(--accent);
    color: var(--on-accent);
    border: 0;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    text-transform: var(--caps);
    text-decoration: none;
    display: inline-block;
}
.btn-sm:hover { filter: brightness(0.95); text-decoration: none; }
.btn-outline {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}

/* Settings → Docks editor */
.dock-edit {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin: 8px 0;
    background: var(--inset);
}
.dock-edit summary {
    cursor: pointer;
    padding: 12px 16px;
    list-style: none;
}
.dock-edit summary::-webkit-details-marker { display: none; }
.dock-edit[open] summary { border-bottom: 1px solid var(--line); background: var(--panel); }
.dock-edit-form { padding: 16px; background: var(--panel); }
.dim-label { display: block; font-size: 11px; color: var(--dim); text-transform: var(--caps); margin-bottom: 6px; letter-spacing: 0.3px; }

/* Settings → Docks registry rows (prototype DockRegistry) */
.reg-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 8px;
    cursor: pointer;
}
.reg-row:hover { border-color: var(--line2); }
.reg-id   { display: flex; flex-direction: column; gap: 1px; width: 170px; flex: none; min-width: 0; }
.reg-name { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reg-sub  { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--faint); white-space: nowrap; }
.reg-site { flex: 1; font-size: 11.5px; font-weight: 700; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reg-integ { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; width: 96px; flex: none; white-space: nowrap; }
.reg-value { display: flex; flex-direction: column; gap: 1px; width: 110px; flex: none; align-items: flex-end; }
.reg-amount { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
body[data-template="mission"] .reg-amount { font-family: var(--mono); font-weight: 500; }
.reg-mode { font-size: 9.5px; font-weight: 700; color: var(--faint); font-family: var(--mono); letter-spacing: 0.04em; }

/* Dock edit drawer (prototype DockEditDrawer) — right-side fixed panel */
.drawer-scrim {
    position: fixed; inset: 0;
    background: var(--scrim);
    display: flex; justify-content: flex-end;
    z-index: 60;
}
/* `display: flex` above would otherwise override the HTML `hidden` attribute
   (UA's display:none loses to any author rule) — keep hidden meaning hidden. */
.drawer-scrim[hidden] { display: none; }
.drawer {
    width: 580px; max-width: 94vw; height: 100%;
    background: var(--panel);
    border-left: 1px solid var(--line2);
    display: flex; flex-direction: column;
    box-shadow: -24px 0 64px -20px rgba(0,0,0,.5);
}
.drawer-head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line);
    flex: none;
    font-size: 16px;
}
.drawer-x {
    margin-left: auto;
    background: none; border: 0; cursor: pointer;
    color: var(--faint); font-size: 20px; line-height: 1; padding: 4px;
}
.drawer-x:hover { color: var(--text); }
.drawer-body {
    flex: 1; overflow: auto;
    padding: 22px;
    display: flex; flex-direction: column; gap: 24px;
}
.drawer-foot {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 14px 0 0;
    border-top: 1px solid var(--line);
    margin-top: 4px;
}
.dgroup { display: flex; flex-direction: column; gap: 12px; }
/* Drawer GROUP heading — prototype SectionLabel: bigger + heavier than the
   per-field labels beneath it, never smaller. */
.dsec {
    font-size: 13px; font-weight: 800;
    color: var(--text);
    text-transform: var(--caps);
    letter-spacing: 0.02em;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--line);
}
body[data-template="mission"] .dsec { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--faint); }
.dgrid  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dgrid.three { grid-template-columns: 1fr 1fr 1fr; }
.dfield { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dfield > span:first-child { font-size: 11px; font-weight: 700; color: var(--dim); }
.dfield .field { margin: 0; }
.dfield .field:disabled { opacity: 0.6; cursor: not-allowed; }
.dchk {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    padding: 2px 0;
}
.dchk input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.integ-panel {
    display: flex; align-items: center; gap: 12px;
    background: var(--inset);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}

/* Settings → Appearance picker */
.tpl-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tpl-opt {
    display: block; cursor: pointer;
    background: var(--panel); border: 2px solid var(--line);
    border-radius: var(--radius); padding: 12px;
    transition: border-color 0.08s ease, transform 0.08s ease;
}
.tpl-opt:hover { border-color: var(--line2); }
.tpl-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.tpl-opt input[type="radio"] { display: none; }
.tpl-thumb-mini {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 10px;
}
.tpl-opt-name { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.tpl-opt-desc { font-size: 12px; color: var(--dim); line-height: 1.5; }
@media (max-width: 640px) { .tpl-picker { grid-template-columns: 1fr; } }

/* Segmented control — prototype's Seg: one inset container, active option
   pops to panel bg with a hairline border. Replaces the old loose pills. */
.mode-picker {
    display: inline-flex; gap: 2px;
    background: var(--inset);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 2px;
}
.mode-opt {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
    padding: 6px 13px;
    border: 1px solid transparent;
    border-radius: calc(var(--radius-sm) - 2px);
    font-size: 11.5px; font-weight: 700;
    color: var(--faint);
    white-space: nowrap;
    transition: color 0.08s ease, background 0.08s ease;
}
.mode-opt:hover { color: var(--dim); }
.mode-opt.on {
    background: var(--panel);
    border-color: var(--line2);
    color: var(--text);
}
.mode-opt input[type="radio"] { display: none; }
.mode-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; }

/* dp-chart — Chart.js wrapper with expand + PNG export */
.dp-chart-wrap { position: relative; }
.dp-chart-wrap .dp-chart {
    position: relative;
    width: 100%; height: 220px;
}
.dp-chart-wrap.is-fullscreen {
    position: fixed; inset: 0; z-index: 100;
    background: var(--panel); padding: 32px;
    border-radius: 0; box-shadow: none;
    display: flex; flex-direction: column;
}
.dp-chart-wrap.is-fullscreen .dp-chart { flex: 1; height: auto; }
.dp-chart-toolbar {
    position: absolute; top: 8px; right: 8px;
    display: flex; gap: 6px;
    opacity: 0; transition: opacity 0.15s ease;
    z-index: 20;            /* above the chart canvas — without this the canvas
                               (a later positioned sibling) intercepts the clicks */
}
.dp-chart-wrap:hover .dp-chart-toolbar,
.dp-chart-wrap.is-fullscreen .dp-chart-toolbar { opacity: 1; }
.dp-chart-toolbar button {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 4px 8px; cursor: pointer;
    color: var(--dim);
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-family: var(--font);
}
.dp-chart-toolbar button:hover { color: var(--text); border-color: var(--line2); }

/* Dock detail — underline tabs (prototype DockScreen) */
.dtabs {
    display: flex; gap: 18px;
    border-bottom: 1px solid var(--line);
    margin: 14px 0 16px;
}
.dtab {
    padding: 8px 2px 10px;
    font-size: 12.5px; font-weight: 700;
    color: var(--faint);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-decoration: none;
    text-transform: var(--caps);
    letter-spacing: 0.02em;
}
.dtab:hover { color: var(--dim); text-decoration: none; }
.dtab.on { color: var(--accent); font-weight: 800; border-bottom-color: var(--accent); }

/* Operations tab — 6 stat tiles + badge row */
.tile-grid {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 12px; margin-bottom: 14px;
}
@media (max-width: 1100px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
.tile {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px;
}
.tile-v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
body[data-template="mission"] .tile-v { font-family: var(--mono); font-weight: 500; }
.tile-unit { font-size: 12px; color: var(--faint); margin-left: 4px; font-weight: 600; }
.tile-l { font-size: 11px; text-transform: var(--caps); color: var(--dim); letter-spacing: 0.3px; }

.badge-row {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.ob {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--pill);
    padding: 6px 14px;
    font-size: 12px;
}
.ob .dim { font-size: 11px; text-transform: var(--caps); }

/* Snapshots tab */
.snap-grid-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
@media (max-width: 900px) { .snap-grid-wrap { grid-template-columns: 1fr; } }
.snap-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.snap-stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
.snap-ts {
    position: absolute; bottom: 8px; right: 10px;
    background: rgba(0,0,0,.55); color: #fff;
    font-size: 10.5px; padding: 3px 8px; border-radius: 4px;
}
.snap-thumbs {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.snap-thumb {
    position: relative; display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--line);
}
.snap-thumb:hover { border-color: var(--accent); }
.snap-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snap-thumb span {
    position: absolute; bottom: 3px; right: 5px;
    background: rgba(0,0,0,.55); color: #fff;
    font-size: 9px; padding: 1px 5px; border-radius: 3px;
}

/* Flights tab */
.flights-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
@media (max-width: 900px) { .flights-grid { grid-template-columns: 1fr; } }
.flight-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.flight-row:last-child { border-bottom: 0; }
.flight-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.flight-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 1px; }
/* Per-flight ROI value (override) editor — native <details>, no JS dependency. */
.flight-val, .flight-val-ro { flex: 0 0 auto; }
.flight-val summary, .flight-val-ro { font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 700; }
.flight-val summary { cursor: pointer; list-style: none; }
.flight-val summary::-webkit-details-marker { display: none; }
.flight-val[open] summary { color: var(--accent); }
.flight-val-form { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.flight-val-form input { width: 90px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; }
.flight-val-form .dim { font-size: 10px; }

/* Flight-path map + operations timeline panel */
.fp-wrap { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: start; margin-bottom: 14px; }
@media (max-width: 980px) { .fp-wrap { grid-template-columns: 1fr; } }
.ops-card summary { cursor: pointer; font-weight: 700; font-size: 14px; list-style: none; }
.ops-card summary::-webkit-details-marker { display: none; }
.ops-card summary::before { content: '▾ '; color: var(--dim, #657182); }
.ops-card details:not([open]) summary::before { content: '▸ '; }
.ops-verdict { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; margin: 8px 0; }
.ops-verdict:empty { display: none; }
.ops-auto { background: rgba(18,145,90,.14); color: var(--ok, #12915A); }
.ops-manual { background: rgba(228,87,46,.14); color: var(--accent, #E4572E); }
.ops-item { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.ops-item:last-child { border-bottom: 0; }
.ops-time { color: var(--dim, #657182); white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; }
.ops-people { margin-top: 8px; font-size: 11px; color: var(--dim, #657182); }
.ops-empty { color: var(--dim, #657182); font-size: 12px; padding: 8px 0; }

/* AI smart-detections (dock Flights tab) */
.det-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; margin-top: 12px; }
.det-card { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.det-img { display: block; aspect-ratio: 4 / 3; background: var(--inset); }
.det-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; }
.det-card:hover .det-img img { transform: scale(1.03); }
.det-img-missing { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--dim); font-size: 10.5px; }
.det-meta { padding: 7px 8px 8px; }
.det-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.det-tag { display: inline-block; font-size: 10px; line-height: 1.5; padding: 1px 7px; border-radius: var(--pill); background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--tone); font-weight: 700; white-space: nowrap; }
.det-empty { margin-top: 12px; padding: 16px; border: 1px dashed var(--line); border-radius: 10px; background: var(--inset); }
.det-empty strong { display: block; font-size: 13px; margin-bottom: 4px; }
.det-empty p { margin: 0 0 10px; font-size: 12px; max-width: 62ch; }

/* Missions tab — planned-route map */
.wl-map { height: 340px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 8px; }
.wl-maphint { font-size: 11.5px; margin: 0 0 14px; }
.wl-table .wl-row { cursor: pointer; }
.wl-table .wl-row:hover { background: var(--inset); }
.wl-table .wl-row-sel { background: var(--accent-soft); }
.wl-table .wl-row-sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.wl-table .wl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* AI-detection location — on-platform map modal */
.det-maplink { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; }
.det-maplink:hover { filter: brightness(0.9); }
.det-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); padding: 20px; }
.det-modal.open { display: flex; }
.det-modal-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; width: min(860px, 100%); max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4); }
.det-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.det-modal-title { font-weight: 700; font-size: 13.5px; text-transform: capitalize; color: var(--text); }
.det-modal-x { background: none; border: 0; color: var(--dim); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.det-modal-x:hover { color: var(--text); }
.det-modal-map { flex: 1; min-height: min(64vh, 560px); }
.det-pop { width: 150px; }
.det-pop-img { width: 100%; border-radius: 6px; display: block; margin-bottom: 6px; }
.det-pop-labels { font-weight: 700; text-transform: capitalize; font-size: 12.5px; color: var(--text); }
.det-pop-when { color: var(--dim); font-size: 11px; }
#detMap .leaflet-popup-content-wrapper, #detMap .leaflet-popup-tip { background: var(--panel); color: var(--text); }

/* AI-detection photo lightbox — mirrors the Snapshots lightbox for a consistent enlarge + download */
.det-imglink { cursor: zoom-in; }
.det-lb { position: fixed; inset: 0; background: rgba(6, 8, 12, 0.9); z-index: 2200; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.det-lb.open { display: flex; }
.det-lb img { max-width: 92vw; max-height: 78vh; border-radius: 10px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6); }
.det-lb-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 14px; color: #EEF2F7; }
.det-lb-bar .mono { font-size: 12px; }
.det-lb-cap { text-transform: capitalize; font-weight: 700; font-size: 13px; color: #fff; }

/* Service logbook (#8 airworthiness-grade) — full-record form + entry list */
.maint-more { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--inset); }
.maint-more > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent); list-style: none; }
.maint-more > summary::-webkit-details-marker { display: none; }
.maint-more[open] > summary { margin-bottom: 10px; }
.maint-rts { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 10px; }
.maint-rts input { width: auto; }
.maint-log { display: flex; flex-direction: column; gap: 10px; }
.maint-entry { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.maint-entry-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.maint-work { font-size: 12.5px; margin-top: 5px; }
.maint-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.maint-meta span { font-size: 10.5px; background: var(--inset); border-radius: var(--pill); padding: 1px 8px; color: var(--dim); white-space: nowrap; }
.maint-defects { font-size: 11.5px; margin-top: 6px; }
.maint-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.maint-file { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; text-decoration: none; color: var(--accent); }
.maint-file:hover { background: var(--inset); }
.maint-note { font-size: 11.5px; margin-top: 8px; }

/* Downtime / availability (Insights → Downtime + dock statement) */
.dt-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--inset); }
.dt-bar span { display: block; height: 100%; }
.dt-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 11px; color: var(--dim); }
.dt-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* Drawer footer buttons — prototype Btn metrics (9px 16px / 12.5px) */
.drawer-foot .btn-sm {
    padding: 9px 16px;
    font-size: 12.5px;
    gap: 7px;
}

/* Live view stage — ByteRTC renders <video> into this div */
.live-stage {
    background: #000;
    border-radius: var(--radius-sm);
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.live-stage > video,
.live-stage > div > video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    background: #000;
}

/* Alert list row (dock-detail "Active alerts") */
.alert-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.alert-row:last-child { border-bottom: 0; }

/* ---- customisable dock-card (cdl-*) — shared by the fleet renderer and the
       designer preview so what you design is what ships ---- */
.cdl-card { display: flex; flex-direction: column; gap: 10px; }
.cdl-row  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 20px; position: relative; }
.cdl-el   { display: inline-flex; align-items: center; gap: 5px; color: var(--text); min-width: 0; }
.cdl-el svg { flex: none; }
.cdl-s { font-size: 11px; }
.cdl-m { font-size: 13px; }
.cdl-l { font-size: 16px; }
.cdl-bold { font-weight: 700; }
.cdl-val { font-variant-numeric: tabular-nums; }
.cdl-task-error { color: var(--error); }
.cdl-spark { display: flex; align-items: center; gap: 8px; width: 100%; }
.cdl-spark svg { flex: 1; min-width: 0; }
/* v2 — attention "issue" glow, painted only while a dock needs attention.
   Drawn on an ::after overlay (not the card's own box-shadow) so it leaves the
   base shadow + tint untouched and survives the shadowless 'mission' template.
   A tight coloured ring hugs the border + a soft blurred halo. Amber = soft
   attention (calm); red is brighter and spreads wider = clearly more urgent. */
.cdl-emph-glow::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 80%, transparent),
                0 0 13px 0   color-mix(in srgb, var(--accent) 45%, transparent);
}
.cdl-emph-glow.cdl-emph-sev::after {
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--error) 92%, transparent),
                0 0 20px 2px color-mix(in srgb, var(--error) 60%, transparent);
}
.cdl-emph-glow { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.cdl-emph-glow.cdl-emph-sev { border-color: color-mix(in srgb, var(--error) 70%, var(--line)); }
.cdl-emph-tint { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cdl-emph-tint.cdl-emph-sev { background: color-mix(in srgb, var(--error) 14%, transparent); }

/* ---- card designer (cdz-*) ---- */
.cdz-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1080px) { .cdz-wrap { grid-template-columns: 1fr; } }
.cdz-chip { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin-bottom: 6px;
            border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel);
            font-size: 12.5px; cursor: grab; user-select: none; }
.cdz-chip.used { opacity: .35; cursor: default; }
.cdz-grip { color: var(--faint); font-size: 11px; }
#cdz-card .cdz-row { border: 1px dashed var(--line2); border-radius: 8px; padding: 4px 6px; }
#cdz-card .cdz-row.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.cdz-empty { color: var(--faint); font-size: 11px; padding: 2px 6px; }
.cdz-el { cursor: pointer; border-radius: 6px; padding: 1px 3px; display: inline-flex; min-width: 0; }
.cdz-el:hover { outline: 1px dashed var(--line2); }
.cdz-selected { outline: 2px solid var(--accent) !important; }
.cdz-row-del { position: absolute; right: -7px; top: -9px; width: 18px; height: 18px; line-height: 1;
               border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--dim);
               cursor: pointer; font-size: 12px; padding: 0; display: none; z-index: 2; }
#cdz-card .cdz-row:hover .cdz-row-del { display: block; }
/* v2 designer: conditional-element marker + preset strip + segmented toggles */
.cdz-el.cdz-cond { box-shadow: inset 0 -2px 0 0 var(--accent); }
.cdz-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.cdz-preset { font: inherit; font-size: 12px; cursor: pointer; padding: 5px 12px; border-radius: 99px;
              border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.cdz-preset:hover { border-color: var(--accent); color: var(--accent); }
.cdz-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.cdz-seg-opt { font: inherit; font-size: 12.5px; cursor: pointer; padding: 6px 12px; border: 0; border-left: 1px solid var(--line);
               background: transparent; color: var(--dim); text-decoration: none; }
.cdz-seg-opt:first-child { border-left: 0; }
.cdz-seg-opt.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* ---- AI assistant chat (ai-*) ---- */
.ai-wrap { display: flex; flex-direction: column; max-width: 860px; }
.ai-suggest-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-bottom: 8px; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ai-chip { font: inherit; font-size: 12.5px; cursor: pointer; padding: 7px 12px; border-radius: 99px;
           border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.ai-chip:hover { border-color: var(--accent); color: var(--accent); }
.ai-msgs { display: flex; flex-direction: column; gap: 10px; min-height: 80px; max-height: calc(100vh - 330px);
           overflow-y: auto; padding: 6px 2px; }
.ai-msgs:empty { display: none; }
.ai-msg { padding: 10px 14px; border-radius: 12px; max-width: 84%; line-height: 1.55; font-size: 14px; word-wrap: break-word; }
.ai-msg.user { background: var(--accent); color: var(--on-accent); align-self: flex-end; border-bottom-right-radius: 4px; }
.ai-msg.assistant { background: var(--inset); border: 1px solid var(--line); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; }
.ai-msg.assistant.thinking { color: var(--faint); font-style: italic; }
.ai-msg.assistant strong { font-weight: 700; }
.ai-msg.assistant code { background: var(--panel); border: 1px solid var(--line); padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: 12.5px; }
.ai-msg.assistant ul { margin: 6px 0; padding-left: 18px; }
.ai-msg.assistant li { margin: 2px 0; }
.ai-choices { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ai-choice { font: inherit; font-size: 12px; padding: 6px 12px; border-radius: 99px; cursor: pointer;
             background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.ai-choice:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.ai-input-row { display: flex; gap: 8px; margin-top: 12px; }
.ai-input { flex: 1; padding: 11px 14px; background: var(--panel); border: 1px solid var(--line); color: var(--text);
            border-radius: 9px; font: inherit; font-size: 14px; outline: none; }
.ai-input:focus { border-color: var(--accent); }
.ai-error { font-size: 12.5px; color: var(--error); background: color-mix(in srgb, var(--error) 10%, transparent);
            border: 1px solid color-mix(in srgb, var(--error) 30%, transparent); border-radius: 8px; padding: 9px 12px; align-self: stretch; }

/* ---- sites/groups v1: tag chips, card kebab menu, pin badge ---- */
.cdl-tag { display: inline-block; font-size: 9.5px; font-weight: 700; padding: 2px 7px; margin-right: 4px;
           border-radius: 99px; background: var(--inset); border: 1px solid var(--line); color: var(--dim); }
.dock-card { position: relative; }
.dc-kebab { position: absolute; top: 8px; right: 6px; width: 24px; height: 24px; line-height: 1;
            border: none; border-radius: 50%; background: transparent; color: var(--faint);
            font-size: 15px; cursor: pointer; padding: 0; opacity: 0; transition: opacity .15s, background .15s; z-index: 3; }
.dock-card:hover .dc-kebab { opacity: 1; }
.dc-kebab:hover { background: var(--inset); color: var(--text); }
@media (hover: none) { .dc-kebab { opacity: 1; } }       /* always visible on touch */
.dc-pin { position: absolute; top: 9px; left: -7px; width: 20px; height: 20px; display: flex;
          align-items: center; justify-content: center; border-radius: 50%;
          background: var(--accent); color: var(--on-accent); z-index: 3;
          box-shadow: 0 1px 3px rgba(16,24,40,.2); }
.dc-pop { position: absolute; z-index: 60; min-width: 180px; background: var(--panel);
          border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
          padding: 6px; }
.dc-pop-title { font-size: 11px; font-weight: 800; color: var(--dim); padding: 6px 10px 8px;
                border-bottom: 1px solid var(--line); margin-bottom: 4px;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-pop form { margin: 0; }
.dc-pop-item { display: block; width: 100%; text-align: left; font: inherit; font-size: 12.5px;
               padding: 7px 10px; border: none; border-radius: 7px; background: transparent;
               color: var(--text); cursor: pointer; text-decoration: none; }
.dc-pop-item:hover { background: var(--inset); }
.dc-pop-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.dc-pop-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
                color: var(--faint); padding: 4px 10px 3px; }

/* ---- Dynamic Fleet Arrange: attention is shown by the card's own soft glow
   (.cdl-emph-glow, applied by CardRenderer::render + the default fleet card),
   which replaced the old amber left-edge bar. ---- */

/* ---- Fleet status filter chips (client-side buttons, not links) ---- */
.fleet-statchip { font: inherit; cursor: pointer; }
button.chip { border: 1px solid var(--line); background: var(--panel); color: var(--dim); }
button.chip.chip-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ---- API watch: collapsible schema tree (SchemaMonitor::renderTree) ---- */
.sm-tree { font-family: var(--mono); font-size: 12px; line-height: 1.7; }
.sm-tree details { margin: 0; }
.sm-tree summary { cursor: pointer; list-style: none; padding: 1px 0; }
.sm-tree summary::-webkit-details-marker { display: none; }
.sm-tree summary::before { content: '▸'; color: var(--faint); display: inline-block; width: 14px; transition: transform .12s; }
.sm-tree details[open] > summary::before { transform: rotate(90deg); }
.sm-children { padding-left: 18px; border-left: 1px solid var(--line); margin-left: 6px; }
.sm-leaf { padding: 1px 0 1px 14px; display: flex; gap: 8px; align-items: baseline; }
.sm-key { color: var(--text); font-weight: 600; }
.sm-type { color: var(--charge); font-size: 10.5px; }
.sm-val { color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-new .sm-key   { background: var(--accent-soft); color: var(--accent); padding: 0 5px; border-radius: 5px; }
.sm-changed .sm-key { background: var(--error-soft); color: var(--error); padding: 0 5px; border-radius: 5px; }

/* ---- API watch: side-by-side raw diff ---- */
.sm-diff { border: 1px solid var(--line); border-radius: 10px; overflow: auto; max-height: 560px; }
.sm-drow { display: grid; grid-template-columns: 1fr 1fr; }
.sm-drow pre { margin: 0; padding: 1px 12px; font-family: var(--mono); font-size: 11px; line-height: 1.55;
               white-space: pre-wrap; word-break: break-word; min-height: 1.55em; }
.sm-dl { border-right: 1px solid var(--line); }
.sm-add .sm-dr { background: color-mix(in oklab, var(--ok) 16%, transparent); }
.sm-del .sm-dl { background: color-mix(in oklab, var(--error) 16%, transparent); }

/* ---- Insights → Explore (historical deep-dive explorer) ---- */
.ex-controls { display: grid; grid-template-columns: minmax(170px, 230px) 1fr; gap: 20px; }
@media (max-width: 760px) { .ex-controls { grid-template-columns: 1fr; } }
.ex-grp-head { font-size: 11px; text-transform: var(--caps); letter-spacing: 0.3px; color: var(--dim); margin-bottom: 9px; font-weight: 700; }
.ex-grp-head .dim { font-weight: 400; text-transform: none; letter-spacing: 0; }
.ex-chk-grid { display: flex; flex-direction: column; gap: 5px; }
.ex-metric-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 16px; }
.ex-mcol-head { font-size: 10.5px; text-transform: var(--caps); letter-spacing: 0.3px; color: var(--accent); margin-bottom: 7px; font-weight: 700; }
.ex-mcol .ex-chk { margin-bottom: 5px; }
.ex-chk { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 4px 9px; border: 1px solid var(--line);
          border-radius: 8px; cursor: pointer; user-select: none; line-height: 1.3; transition: border-color .12s, background .12s; }
.ex-chk:hover { border-color: var(--accent); }
.ex-chk.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.ex-chk input { accent-color: var(--accent); margin: 0; flex: none; }
.ex-chk em { font-style: normal; font-size: 11px; }
.ex-bottom { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.ex-field { display: flex; flex-direction: column; }
.ex-actions { flex-direction: row; gap: 8px; margin-left: auto; }
.ex-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: middle; }
.ex-eventlegend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 11px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.ex-ev-key { display: inline-flex; align-items: center; gap: 6px; }
.ex-ev-key::before { content: ''; width: 14px; border-top: 2px dashed var(--c); display: inline-block; }

/* ---- Platform → Investigate (superadmin forensic query builder) ---- */
.iv-mc { background: var(--panel); border: 0.5px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.iv-mc-l { font-size: 12px; color: var(--dim); text-transform: var(--caps); letter-spacing: 0.3px; }
.iv-mc-v { font-size: 22px; font-weight: 700; margin-top: 3px; }
.iv-scope { display: flex; gap: 14px; flex-wrap: wrap; }
.iv-scope > div { min-width: 200px; flex: 1; }
.iv-grp { border: 0.5px solid var(--line); border-radius: 10px; padding: 10px 12px; background: color-mix(in oklab, var(--panel) 55%, transparent); }
.iv-grp.nested { margin: 8px 0 8px 16px; background: color-mix(in oklab, var(--accent) 5%, var(--panel)); }
.iv-grphead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.iv-hint { font-size: 12px; color: var(--dim); }
.iv-comb { font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius: 999px; border: 0.5px solid var(--line); background: transparent; color: var(--dim); cursor: pointer; }
.iv-comb.on { background: var(--accent); color: #fff; border-color: transparent; }
.iv-add { font-size: 12px; padding: 3px 9px; border: 0.5px solid var(--line); border-radius: 7px; background: transparent; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.iv-add:hover { border-color: var(--accent); }
.iv-del { border: none; background: transparent; color: var(--dim); cursor: pointer; font-size: 14px; padding: 2px 5px; line-height: 1; }
.iv-del:hover { color: var(--error); }
.iv-kids { display: flex; flex-direction: column; gap: 6px; }
.iv-cond { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.iv-sel, .iv-val { font-size: 13px; padding: 5px 8px; border: 0.5px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--text); max-width: 230px; }
.iv-vrow { display: inline-flex; align-items: center; gap: 6px; }
.iv-unit, .iv-noval { font-size: 12px; color: var(--dim); }
.iv-empty { font-size: 12px; color: var(--dim); padding: 2px 0; }
.iv-hist { display: flex; align-items: flex-end; gap: 2px; height: 74px; margin-bottom: 5px; }
.iv-bar { flex: 1; border-radius: 2px 2px 0 0; min-width: 2px; }

/* ── Help & guides (/help) ──────────────────────────────────────────────── */
/* Index — categories of guide links */
.help-cats { display: flex; flex-direction: column; gap: 26px; max-width: 760px; }
.help-cat-h { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin: 0 0 10px; }
.help-list { display: flex; flex-direction: column; gap: 8px; }
.help-item { display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: var(--panel); border: 0.5px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); transition: border-color .12s, transform .12s; }
.help-item:hover { border-color: var(--accent); transform: translateX(2px); }
.help-item-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.help-item-t { font-size: 14px; font-weight: 600; }
.help-item-s { font-size: 12px; line-height: 1.4; }
.help-item > svg { flex-shrink: 0; }

/* Article — sticky nav + content */
.help-doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; align-items: start; max-width: 1000px; }
.help-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.help-back { display: inline-flex; align-items: center; gap: 5px; color: var(--dim); text-decoration: none; font-size: 12px; margin-bottom: 12px; }
.help-back:hover { color: var(--accent); }
.help-back svg { transform: rotate(180deg); }
.help-nav-cat { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 14px 0 4px; }
.help-nav-cat:first-of-type { margin-top: 0; }
.help-nav-link { display: block; padding: 5px 10px; border-radius: 7px; color: var(--dim); text-decoration: none; }
.help-nav-link:hover { color: var(--text); background: var(--inset); }
.help-nav-link.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }

.help-article { padding: 28px 30px; }
.help-h1 { font-size: 24px; font-weight: 700; margin: 2px 0 6px; line-height: 1.25; }
.help-lead { font-size: 14px; line-height: 1.5; margin: 0 0 18px; }

/* Rendered Markdown body */
.help-body { font-size: 14px; line-height: 1.7; color: var(--text); }
.help-body > :first-child { margin-top: 0; }
.help-body h2 { font-size: 17px; font-weight: 700; margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 0.5px solid var(--line); }
.help-body h3 { font-size: 15px; font-weight: 700; margin: 20px 0 8px; }
.help-body h4 { font-size: 13.5px; font-weight: 700; margin: 16px 0 6px; color: var(--dim); }
.help-body p { margin: 0 0 12px; }
.help-body ul, .help-body ol { margin: 0 0 12px; padding-left: 22px; }
.help-body li { margin: 4px 0; }
.help-body li::marker { color: var(--faint); }
.help-body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.help-body a:hover { border-bottom-color: var(--accent); }
.help-body strong { font-weight: 700; }
.help-body em { font-style: italic; }
.help-body code { font-family: var(--mono); font-size: 12.5px; background: var(--inset); padding: 1px 5px; border-radius: 5px; }
.help-body pre.help-code { background: var(--inset); border: 0.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; overflow-x: auto; margin: 0 0 14px; }
.help-body pre.help-code code { background: none; padding: 0; font-size: 12.5px; line-height: 1.5; }
.help-body blockquote { margin: 0 0 14px; padding: 10px 16px; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.help-body blockquote p { margin: 0; }
.help-body hr { border: none; border-top: 0.5px solid var(--line); margin: 22px 0; }

.help-pn { display: flex; justify-content: space-between; gap: 14px; margin-top: 28px; padding-top: 16px; border-top: 0.5px solid var(--line); }
.help-pn-link { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; padding: 10px 14px; border: 0.5px solid var(--line); border-radius: var(--radius-sm); line-height: 1.4; }
.help-pn-link:hover { border-color: var(--accent); color: var(--accent); }
.help-pn-link .dim { font-weight: 500; font-size: 11px; }
.help-support-link { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; font: inherit; font-size: 11px; text-decoration: underline; }

/* SA editor (/help/manage) */
.help-admin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.help-admin-form { position: sticky; top: 16px; }

@media (max-width: 880px) {
  .help-doc { grid-template-columns: 1fr; }
  .help-nav { position: static; }
  .help-admin { grid-template-columns: 1fr; }
  .help-admin-form { position: static; }
}

/* Help mockups (app/lib/HelpMockup.php) — the illustration is a self-contained
   fixed-light card (a depicted screenshot); this just gives it page rhythm. */
.hm-figure { margin: 20px 0; }
.help-body .hm-figure { overflow-x: auto; }

/* Mission tag pill — Missions log rows + filter context */
.mtag { display: inline-block; font-size: 10px; line-height: 1.5; padding: 1px 8px; border-radius: var(--pill); background: var(--accent-soft); color: var(--accent); text-decoration: none; white-space: nowrap; }
.mtag:hover { background: var(--accent); color: var(--on-accent); }

/* Notification centre — header bell + dropdown */
.notif-wrap { position: relative; display: inline-flex; }
.notif-btn { position: relative; background: none; border: none; cursor: pointer; color: var(--dim); padding: 6px; border-radius: 8px; display: inline-flex; align-items: center; }
.notif-btn:hover { color: var(--text); background: var(--inset); }
.notif-badge { position: absolute; top: -2px; right: -2px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 99px; background: var(--error); color: #fff; font-size: 9px; font-weight: 700; line-height: 15px; text-align: center; box-sizing: border-box; }
.notif-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 90vw; background: var(--panel); border: 0.5px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 200; overflow: hidden; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 0.5px solid var(--line); }
.notif-readall { background: none; border: none; color: var(--accent); font-size: 11px; cursor: pointer; padding: 0; }
.notif-readall:hover { text-decoration: underline; }
.notif-list { max-height: 62vh; overflow-y: auto; }
.notif-empty { padding: 26px 14px; text-align: center; color: var(--dim); font-size: 12px; }
.notif-item { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; text-decoration: none; color: var(--text); border-bottom: 0.5px solid var(--line); }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--inset); }
.notif-item.unread { background: var(--accent-soft); }
.notif-ic { flex: none; color: var(--dim); margin-top: 1px; }
.notif-item.sev-critical .notif-ic { color: var(--error); }
.notif-item.sev-warning .notif-ic { color: var(--charge); }
.notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.notif-title { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.notif-sub { font-size: 11px; color: var(--dim); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; }
.notif-time { font-size: 10px; color: var(--faint); margin-top: 1px; }
.notif-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 5px; }