:root {
    color-scheme: light;
    --ink: #183738;
    --ink-soft: #587071;
    --paper: #f2f6f5;
    --surface: #ffffff;
    --surface-subtle: #f7faf9;
    --line: #dbe5e2;
    --teal: #0b7168;
    --teal-dark: #075850;
    --mint: #e3f3ef;
    --amber: #d9822b;
    --amber-soft: #fff0da;
    --red: #bf3d39;
    --shadow: 0 12px 32px rgba(17, 55, 52, .07);
    --radius: 16px;
    --heading-ink: #173f40;
    --field-background: #fff;
    --field-line: #b8c7c2;
    --soft-surface: #f4f8f5;
    --soft-line: #b9ccc6;
    --chip-surface: #eff5f1;
    --chip-line: #c7d7d2;
    --neutral-surface: #eee;
    --muted-status: #7e8e8e;
    --off-status: #9aa5a2;
    --off-status-strong: #7f8b89;
    --warning-ink: #9c4c13;
    --warning-line: #e6bd87;
    --warning-action-surface: #fff5e9;
    --warning-action-line: #ddb08b;
    --danger-surface: #fff0ee;
    --danger-line: #e1aaa6;
    --danger-ink: #8e2f2b;
    --focus-ring: rgba(23, 107, 104, .14);
    --button-background: #176b68;
    --button-hover: #0f4f4d;
    --role-admin-surface: #e8e0f0;
    --role-admin-ink: #674978;
    --role-leader-surface: #e8e7cf;
    --role-leader-ink: #615d24;
    --state-control-surface: #f3f6f5;
    --state-control-line: #c4d2ce;
    --state-on-surface: #e6f3ee;
    --state-on-line: #8bbcb1;
    --inactive-surface: #f0f2f1;
    --inactive-line: #d5d9d7;
    --inactive-ink: #7d8784;
    --alert-state-surface: #f3e1d7;
    --alert-state-ink: #8a451b;
    --alert-acknowledged-surface: #e8e7cf;
    --alert-acknowledged-ink: #615d24;
    --warning-note-surface: #fff8e8;
    --warning-note-line: #e4c48e;
    --warning-note-ink: #765122;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e5efed;
    --ink-soft: #a3b9b5;
    --paper: #091617;
    --surface: #112425;
    --surface-subtle: #172b2c;
    --line: #2d4748;
    --teal: #68c9c0;
    --teal-dark: #9bddd7;
    --mint: #173b38;
    --amber: #efa354;
    --amber-soft: #3b2b1b;
    --red: #ff817a;
    --shadow: 0 18px 45px rgba(0, 0, 0, .28);
    --heading-ink: #eff7f5;
    --field-background: #0d1e1f;
    --field-line: #3b5657;
    --soft-surface: #17302f;
    --soft-line: #3a5d5a;
    --chip-surface: #173633;
    --chip-line: #37625e;
    --neutral-surface: #26393a;
    --muted-status: #a0b4b0;
    --off-status: #738784;
    --off-status-strong: #80918f;
    --warning-ink: #ffc27d;
    --warning-line: #765633;
    --warning-action-surface: #3c2d1f;
    --warning-action-line: #79583a;
    --danger-surface: #3d2222;
    --danger-line: #7b4643;
    --danger-ink: #ffaaa5;
    --focus-ring: rgba(104, 201, 192, .25);
    --button-background: #1c6b67;
    --button-hover: #25817a;
    --role-admin-surface: #332b3e;
    --role-admin-ink: #dec8eb;
    --role-leader-surface: #35331f;
    --role-leader-ink: #ded79a;
    --state-control-surface: #172829;
    --state-control-line: #3b5353;
    --state-on-surface: #163a37;
    --state-on-line: #3e756f;
    --inactive-surface: #202d2e;
    --inactive-line: #3a4949;
    --inactive-ink: #98a7a4;
    --alert-state-surface: #422d26;
    --alert-state-ink: #ffc08d;
    --alert-acknowledged-surface: #37351f;
    --alert-acknowledged-ink: #ddd598;
    --warning-note-surface: #372b1d;
    --warning-note-line: #6c5433;
    --warning-note-ink: #f1c88c;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-size: 1rem; }
a { color: inherit; }
button, select { font: inherit; }
.ui-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1000; padding: .75rem 1rem; background: var(--surface); color: var(--ink); }
.skip-link:focus { top: 1rem; }
.app-header { position: sticky; top: 0; z-index: 70; min-height: 76px; padding: 0 clamp(1rem, 4vw, 3.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 4px 18px rgba(17, 55, 52, .04); }
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--teal); color: #fff; font-size: 1.12rem; font-weight: 850; box-shadow: 0 7px 16px rgba(11, 113, 104, .2); }
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: -.015em; }
.brand small { margin-top: .08rem; color: var(--ink-soft); font-size: .72rem; letter-spacing: .02em; }
/* Deliberately quiet: readable when looked for, not competing with the name.
   Lower case and no letter-spacing keep it distinct from the tagline below it,
   which is upper case and tracked out. */
.brand small.brand-version { margin-top: .1rem; color: var(--teal-dark); font-size: .68rem; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; flex-wrap: wrap; }
.top-actions form { margin: 0; }
.user-name { color: var(--ink-soft); font-size: .88rem; }
.quiet-button { display: inline-flex; align-items: center; min-height: 38px; padding: .45rem .75rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer; }
.quiet-button:hover, .quiet-button:focus-visible { border-color: var(--teal); background: var(--mint); outline: none; }
.language-button { min-width: 42px; justify-content: center; font-weight: 800; letter-spacing: .06em; }
.app-primary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: .55rem 1rem; border-radius: 10px; background: var(--teal); color: #fff; font-size: .88rem; font-weight: 800; text-decoration: none; box-shadow: 0 6px 16px rgba(11, 113, 104, .16); }
.app-primary-action:hover, .app-primary-action:focus-visible { background: var(--teal-dark); outline: 3px solid var(--focus-ring); }
.account-menu { position: relative; }
.account-menu > summary { list-style: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu-trigger { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .28rem .5rem .28rem .3rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.account-menu-trigger:hover, .account-menu-trigger:focus-visible, .account-menu[open] .account-menu-trigger { border-color: var(--teal); background: var(--surface-subtle); outline: none; }
.account-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: var(--mint); color: var(--teal-dark); font-size: .82rem; font-weight: 850; }
.account-trigger-copy { display: grid; gap: .05rem; min-width: 0; text-align: left; }
.account-trigger-copy strong { max-width: 11rem; overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.account-trigger-copy small { color: var(--ink-soft); font-size: .68rem; }
.account-chevron { color: var(--ink-soft); transition: transform .18s ease; }
.account-menu[open] .account-chevron { transform: rotate(180deg); }
.account-menu-panel { position: absolute; top: calc(100% + .65rem); right: 0; z-index: 90; width: min(320px, calc(100vw - 2rem)); overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 18px 45px rgba(12, 42, 40, .18); }
.account-menu-identity { display: flex; align-items: center; gap: .7rem; padding: 1rem; }
.account-menu-identity strong, .account-menu-identity small { display: block; }
.account-menu-identity strong { font-size: .88rem; }
.account-menu-identity small { margin-top: .12rem; color: var(--ink-soft); font-size: .72rem; }
.account-menu-section { display: grid; gap: .3rem; padding: .65rem; border-top: 1px solid var(--line); }
.account-menu-action, .account-context-actions .quiet-button { display: flex; align-items: center; width: 100%; min-height: 40px; padding: .55rem .65rem; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; font-size: .82rem; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.account-menu-action:hover, .account-menu-action:focus-visible, .account-context-actions .quiet-button:hover, .account-context-actions .quiet-button:focus-visible { background: var(--mint); outline: none; }
.account-preferences { gap: .2rem; }
.account-preference { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .8rem; min-height: 44px; padding: .35rem .65rem; color: var(--ink-soft); font-size: .78rem; font-weight: 700; }
.language-choice { min-width: 46px; min-height: 34px; padding: .3rem .55rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-subtle); color: var(--teal-dark); font-weight: 850; cursor: pointer; }
.language-choice:hover, .language-choice:focus-visible { border-color: var(--teal); background: var(--mint); outline: none; }
.account-menu-logout { padding: .65rem; border-top: 1px solid var(--line); }
.account-menu-logout .account-menu-action { color: var(--danger-ink); }
.app-navigation { position: sticky; top: 76px; z-index: 60; display: flex; align-items: center; gap: .3rem; min-height: 50px; padding: .4rem clamp(1rem, 4vw, 3.5rem); overflow-x: auto; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(12px); scrollbar-width: thin; }
.app-navigation-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: .45rem .72rem; border-radius: 9px; color: var(--ink-soft); font-size: .82rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.app-navigation-link:hover, .app-navigation-link:focus-visible { background: var(--surface-subtle); color: var(--teal-dark); outline: none; }
.app-navigation-link.is-active { background: var(--mint); color: var(--teal-dark); }
.app-navigation-link > .ui-icon { color: var(--teal); }
.navigation-count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .32rem; border-radius: 999px; background: var(--surface); color: var(--teal-dark); font-size: .68rem; }
.app-main { width: min(1500px, 100%); margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.3rem); }
.mission-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 1.5rem; }
.mission-heading h1 { margin: .18rem 0 .4rem; max-width: 900px; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 780; letter-spacing: -.035em; line-height: 1.02; color: var(--heading-ink); }
.eyebrow { margin: 0; color: var(--teal); font-size: .72rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.mission-summary { max-width: 720px; margin: 0; color: var(--ink-soft); line-height: 1.5; }
.heading-controls { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
.role-chip, .map-mode, .count-badge { display: inline-flex; align-items: center; min-height: 32px; padding: .35rem .7rem; border-radius: 999px; background: var(--mint); color: var(--teal-dark); font-size: .78rem; font-weight: 750; }
.role-administrator { background: var(--role-admin-surface); color: var(--role-admin-ink); }
.role-leader { background: var(--role-leader-surface); color: var(--role-leader-ink); }
.installation-picker label { display: block; margin-bottom: .28rem; color: var(--ink-soft); font-size: .72rem; }
.installation-picker select { min-height: 38px; padding: 0 2rem 0 .7rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.summary-card { position: relative; min-height: 116px; padding: 1rem 1.1rem; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 8px 24px rgba(20, 55, 56, .035); }
.summary-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--teal); content: ""; }
.summary-card span, .summary-card small { display: block; color: var(--ink-soft); }
.summary-card span { font-size: .79rem; font-weight: 700; }
.summary-card strong { display: block; margin: .25rem 0; font-size: 2.05rem; font-weight: 780; letter-spacing: -.04em; color: var(--teal-dark); }
.summary-card small { font-size: .72rem; }
.summary-card-alert { border-color: var(--warning-line); background: var(--amber-soft); }
.summary-card-alert::before { background: var(--amber); }
.summary-card-alert strong { color: var(--warning-ink); }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(280px, .85fr); gap: 1rem; align-items: stretch; }
.map-panel, .panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.panel-heading.compact { padding: .9rem 1rem; }
.panel-heading h2 { margin: .15rem 0 0; font-size: 1.2rem; font-weight: 780; letter-spacing: -.02em; }
.panel-heading-actions { display: flex; align-items: center; gap: .7rem; }
.mission-map { height: min(60vh, 610px); min-height: 430px; background-color: #e4e7dd; background-image: linear-gradient(rgba(42,94,91,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(42,94,91,.08) 1px, transparent 1px); background-size: 34px 34px; }
.leaflet-container { font-family: inherit; }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 12px 35px rgba(15, 50, 50, .18); }
.leaflet-popup-content { line-height: 1.45; }
.map-legend { display: flex; flex-wrap: wrap; gap: 1.1rem; padding: .75rem 1rem; color: var(--ink-soft); font-size: .76rem; }
.map-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); }
.dot-asset { background: var(--amber); }
.dot-alert { background: var(--red); box-shadow: 0 0 0 4px rgba(191,61,57,.15); }
/* Not a dot: a gateway is drawn as a pin with GW on it, and the legend has to
   read as that marker rather than as another category of person. */
.legend-gateway { display: inline-grid; place-items: center; padding: 0 .22rem; border-radius: 3px; background: var(--teal); color: #fff; font-size: .52rem; font-style: normal; font-weight: 800; letter-spacing: .03em; }
.empty-map { margin: 0; padding: 1rem; color: var(--ink-soft); }
.side-column { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1rem; }
.alerts-panel { min-height: 0; }
.alert-list { max-height: 470px; overflow: auto; padding: .35rem 1rem 1rem; }
.alert-row { display: grid; grid-template-columns: 34px 1fr; gap: .7rem; padding: .85rem 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.alert-row:last-child { border-bottom: 0; }
.alert-symbol { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--neutral-surface); font-weight: 900; }
.alert-sos .alert-symbol { background: var(--danger-surface); color: var(--red); }
.alert-row strong { font-size: .88rem; }
.alert-row p { margin: .12rem 0; color: var(--ink-soft); font-size: .78rem; }
.alert-row time { color: var(--muted-status); font-size: .7rem; }
.alert-copy { min-width: 0; }
.alert-audience { display: block; margin-top: .25rem; color: var(--ink-soft); font-size: .72rem; line-height: 1.4; }
.alert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .55rem; }
.alert-action { padding: .32rem .55rem; border: 1px solid var(--soft-line); border-radius: 8px; background: var(--soft-surface); color: var(--teal-dark); font-size: .7rem; font-weight: 750; cursor: pointer; }
.alert-action:hover, .alert-action:focus-visible { border-color: var(--teal); background: var(--mint); }
.alert-action.resolve { border-color: var(--warning-action-line); background: var(--warning-action-surface); color: var(--alert-state-ink); }
.alert-action:disabled { cursor: wait; opacity: .55; }
.alert-acknowledged { color: var(--teal); font-size: .69rem; font-weight: 750; }
.empty-state { padding: 1.2rem .2rem; color: var(--ink-soft); }
.empty-state p { margin: .3rem 0 0; font-size: .8rem; }
.team-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1rem; }
.team-chips span { padding: .4rem .65rem; border: 1px solid var(--chip-line); border-radius: 999px; background: var(--chip-surface); color: var(--teal-dark); font-size: .78rem; }
.tracker-panel { margin-top: 1rem; }
.tracker-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; padding: 1rem; }
.tracker-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; min-width: 0; padding: .8rem; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-subtle); color: inherit; text-decoration: none; cursor: pointer; }
.tracker-card:hover, .tracker-card:focus-visible { border-color: var(--teal); outline: none; }
.tracker-pin { width: 13px; height: 13px; border: 3px solid var(--surface); border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 2px var(--teal); }
.tracker-card.asset .tracker-pin { background: var(--amber); box-shadow: 0 0 0 2px var(--amber); }
.tracker-copy { min-width: 0; }
.tracker-copy strong, .tracker-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracker-copy strong { font-size: .86rem; }
.tracker-copy span { margin-top: .15rem; color: var(--ink-soft); font-size: .73rem; }
.tracker-copy .tracker-position-state { color: var(--warning-ink); }
.tracker-age { color: var(--ink-soft); font-size: .72rem; text-align: right; }
.tracker-age small, .tracker-age strong { display: block; white-space: nowrap; }
.tracker-age small { margin-bottom: .15rem; font-size: .64rem; font-weight: 500; }
.tracker-age strong { color: var(--ink); font-size: .76rem; }
.text-link { color: var(--teal); font-size: .8rem; font-weight: 750; }

/* Mission workspace ----------------------------------------------------- */
.operations-stage { position: relative; display: grid; grid-template-columns: minmax(245px, .58fr) minmax(0, 2.2fr); gap: 1rem; margin-bottom: 1rem; overflow: hidden; border-radius: var(--radius); }
.mission-summary-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.fleet-panel, .operations-map-panel { min-width: 0; }
.fleet-panel { display: flex; flex-direction: column; max-height: 700px; }
.fleet-list { min-height: 0; overflow-y: auto; padding: .55rem; }
.fleet-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .72rem; width: 100%; margin: 0 0 .35rem; padding: .72rem .62rem; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.fleet-card:last-child { margin-bottom: 0; }
.fleet-card:hover, .fleet-card:focus-visible, .fleet-card.is-selected { border-color: var(--chip-line); background: var(--mint); outline: none; }
.fleet-card:active { transform: translateY(1px); }
.fleet-device-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: var(--mint); color: var(--teal-dark); }
.fleet-card.asset .fleet-device-icon { background: var(--amber-soft); color: var(--warning-ink); }
.fleet-card-copy { min-width: 0; }
.fleet-card-copy strong, .fleet-card-copy span, .fleet-card-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-card-copy strong { font-size: .88rem; letter-spacing: -.01em; }
.fleet-card-copy span { margin-top: .08rem; color: var(--ink-soft); font-size: .74rem; }
.fleet-card-copy small { margin-top: .28rem; color: var(--ink-soft); font-size: .7rem; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: .32rem; border-radius: 50%; background: #3ca67a; }
.fleet-card-meta { text-align: right; }
.fleet-card-meta strong, .fleet-card-meta small { display: block; white-space: nowrap; }
.fleet-card-meta strong { color: var(--teal-dark); font-size: .8rem; }
.fleet-card-meta small { margin-top: .18rem; color: var(--muted-status); font-size: .66rem; }
.operations-map-panel { align-self: start; }
.operations-map-panel .mission-map { height: min(60vh, 560px); }

.tracker-drawer-scrim { position: absolute; inset: 0; z-index: 35; border: 0; background: rgba(10, 28, 29, .22); backdrop-filter: blur(1px); cursor: default; }
.tracker-drawer-scrim[hidden] { display: none; }
.tracker-detail-drawer { position: absolute; inset: 0 0 0 auto; z-index: 40; display: flex; width: min(410px, calc(100% - 1rem)); flex-direction: column; border: 1px solid var(--line); border-radius: 16px 0 0 16px; background: var(--surface); box-shadow: -20px 0 48px rgba(9, 35, 34, .2); transform: translateX(calc(100% + 2rem)); transition: transform .24s cubic-bezier(.22, .8, .25, 1); }
.tracker-detail-drawer.is-open { transform: translateX(0); }
.tracker-drawer-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .8rem; padding: 1.15rem; border-bottom: 1px solid var(--line); }
.tracker-drawer-device-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; background: var(--mint); color: var(--teal-dark); }
.tracker-drawer-device-icon .ui-icon { width: 1.35rem; height: 1.35rem; }
.tracker-drawer-header h2 { margin: .12rem 0 .18rem; font-size: 1.25rem; letter-spacing: -.025em; }
.tracker-drawer-header p:not(.eyebrow) { margin: 0; color: var(--ink-soft); font-size: .8rem; }
.icon-button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-soft); cursor: pointer; }
.icon-button:hover, .icon-button:focus-visible { border-color: var(--teal); color: var(--teal-dark); outline: none; }
.tracker-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 1.15rem; }
.tracker-drawer-status-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.status-pill { display: inline-flex; padding: .28rem .56rem; border-radius: 999px; background: var(--mint); color: var(--teal-dark); font-size: .72rem; font-weight: 800; text-transform: capitalize; }
.status-pill.muted { background: var(--surface-subtle); color: var(--ink-soft); }
.tracker-drawer-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.tracker-drawer-metrics article { min-width: 0; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); }
.tracker-drawer-metrics .ui-icon { color: var(--teal); }
.tracker-drawer-metrics span, .tracker-drawer-metrics strong { display: block; }
.tracker-drawer-metrics span { margin-top: .45rem; color: var(--ink-soft); font-size: .68rem; }
.tracker-drawer-metrics strong { margin-top: .12rem; overflow-wrap: anywhere; font-size: .83rem; }
.tracker-drawer-facts { display: grid; grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr); gap: .72rem 1rem; margin: 1.15rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.tracker-drawer-facts dt { color: var(--ink-soft); font-size: .74rem; }
.tracker-drawer-facts dd { margin: 0; overflow-wrap: anywhere; font-size: .8rem; font-weight: 700; text-align: right; }
.tracker-drawer-actions { display: flex; gap: .6rem; padding: 1rem 1.15rem; border-top: 1px solid var(--line); }
.primary-inline-button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 40px; padding: .5rem .85rem; border: 0; border-radius: 9px; background: var(--teal); color: #fff; font: inherit; font-size: .8rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.primary-inline-button:hover, .primary-inline-button:focus-visible { background: var(--teal-dark); outline: 3px solid var(--focus-ring); }

.alert-drawer { border-top: 1px solid var(--line); background: var(--surface); }
.alert-drawer-handle { display: grid; grid-template-columns: auto auto auto 1fr auto; align-items: center; gap: .55rem; width: 100%; padding: .7rem 1rem; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.alert-drawer-handle > .ui-icon:first-child { color: var(--ink-soft); }
.alert-drawer.has-alerts .alert-drawer-handle > .ui-icon:first-child { color: var(--amber); }
.alert-drawer.has-critical .alert-drawer-handle > .ui-icon:first-child { color: var(--red); }
.alert-drawer-count { display: inline-grid; min-width: 1.45rem; height: 1.45rem; place-items: center; padding: 0 .34rem; border-radius: 999px; background: var(--neutral-surface); color: var(--ink-soft); font-size: .7rem; font-weight: 850; }
.alert-drawer.has-alerts .alert-drawer-count { background: var(--amber-soft); color: var(--warning-ink); }
.alert-drawer.has-critical .alert-drawer-count { background: var(--danger-surface); color: var(--danger-ink); }
.alert-drawer-state { justify-self: end; color: var(--ink-soft); font-size: .72rem; }
.alert-drawer-chevron { transition: transform .18s ease; }
.alert-drawer.is-open .alert-drawer-chevron { transform: rotate(180deg); }
.alert-drawer-body { max-height: 310px; overflow-y: auto; padding: 0 1rem 1rem; border-top: 1px solid var(--line); }
.alert-drawer-body .alert-list { max-height: none; padding: .25rem 0; }
.alert-history-link { display: inline-flex; margin-top: .45rem; }

.dashboard-lower-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 1rem; }
.telemetry-list, .infrastructure-list { padding: .35rem .8rem .8rem; }
.telemetry-row, .infrastructure-row { display: grid; align-items: center; gap: .7rem; padding: .72rem .35rem; border-bottom: 1px solid var(--line); }
.telemetry-row:last-child, .infrastructure-row:last-child { border-bottom: 0; }
.telemetry-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.telemetry-icon, .infrastructure-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--mint); color: var(--teal-dark); }
.telemetry-copy, .telemetry-copy strong, .telemetry-copy small, .infrastructure-row > span:nth-child(2), .infrastructure-row strong, .infrastructure-row small { min-width: 0; }
.telemetry-copy strong, .telemetry-copy small, .infrastructure-row strong, .infrastructure-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.telemetry-copy strong, .infrastructure-row strong { font-size: .82rem; }
.telemetry-copy small, .infrastructure-row small { margin-top: .15rem; color: var(--ink-soft); font-size: .71rem; }
.telemetry-facts { text-align: right; }
.telemetry-facts strong, .telemetry-facts time { display: block; }
.telemetry-facts strong { color: var(--teal-dark); font-size: .78rem; }
.telemetry-facts time, .infrastructure-row time { margin-top: .15rem; color: var(--muted-status); font-size: .68rem; white-space: nowrap; }
.infrastructure-row { grid-template-columns: auto minmax(0, 1fr) auto; color: inherit; text-decoration: none; }
.infrastructure-row:hover, .infrastructure-row:focus-visible { background: var(--surface-subtle); outline: none; }
.infrastructure-icon.gateway-state-stale, .infrastructure-icon.gateway-state-never { background: var(--amber-soft); color: var(--warning-ink); }
.infrastructure-icon.gateway-state-disabled, .infrastructure-icon.gateway-state-replaced { background: var(--neutral-surface); color: var(--muted-status); }

.settings-heading { max-width: 720px; margin-bottom: 1.3rem; }
.settings-heading h1 { margin: .2rem 0 .45rem; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; }
.settings-heading > p:last-child { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.settings-layout { display: grid; grid-template-columns: minmax(0, 720px) minmax(240px, 360px); align-items: start; gap: 1rem; }
.settings-form { padding: 1.2rem; }
.settings-coordinate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.settings-field { display: grid; gap: .36rem; color: var(--ink-soft); font-size: .78rem; font-weight: 750; }
.settings-field:last-child { grid-column: 1 / -1; }
.settings-field input { min-height: 44px; padding: .6rem .7rem; border: 1px solid var(--field-line); border-radius: 9px; background: var(--field-background); color: var(--ink); font: inherit; }
.settings-field input:focus { border-color: var(--teal); outline: 3px solid var(--focus-ring); }
.settings-field small { font-size: .7rem; font-weight: 500; line-height: 1.4; }
.field-error, .form-errors { color: var(--danger-ink); font-size: .75rem; }
.settings-actions { display: flex; gap: .6rem; margin-top: 1.2rem; }
.settings-note { padding: 1rem; border: 1px solid var(--chip-line); border-radius: 14px; background: var(--mint); color: var(--teal-dark); }
.settings-note p { margin: .35rem 0 0; font-size: .82rem; line-height: 1.5; }
.empty-shell { max-width: 650px; margin: 10vh auto; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: center; }
.empty-shell h1 { font-family: Georgia, serif; font-weight: 500; }

.login-shell { display: grid; min-height: calc(100vh - 72px - 4.6rem); place-items: center; }
.login-card { width: min(440px, 100%); padding: clamp(1.5rem, 5vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.login-card h1 { margin: .35rem 0 .5rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 6vw, 3rem); font-weight: 500; }
.login-intro, .login-help { color: var(--ink-soft); }
.login-intro { margin: 0 0 1.5rem; }
.login-help { margin: 1rem 0 0; font-size: .78rem; line-height: 1.45; }
.login-field { margin-bottom: 1rem; }
.login-field label { display: block; margin-bottom: .35rem; font-size: .82rem; font-weight: 750; }
.login-field input { width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--field-line); border-radius: 9px; background: var(--field-background); color: var(--ink); font: inherit; }
.login-field input:focus { border-color: var(--teal); outline: 3px solid var(--focus-ring); }
.primary-button { width: 100%; min-height: 44px; padding: .65rem 1rem; border: 0; border-radius: 9px; background: var(--button-background); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.primary-button:hover, .primary-button:focus-visible { background: var(--button-hover); }
.login-error { margin-bottom: 1rem; padding: .75rem .85rem; border: 1px solid var(--danger-line); border-radius: 9px; background: var(--danger-surface); color: var(--danger-ink); font-size: .82rem; }

/* QR scanners require strong contrast. This surface deliberately stays white
   in every theme rather than inheriting the dark page background. */
/* The second-factor screens. They were written against class names that were
   never styled -- page-narrow, notice, code-list, muted -- so until now they
   rendered as bare browser defaults inside the portal's chrome. One narrow
   column, because each of these pages asks exactly one thing. */
.auth-page { width: min(34rem, 100%); margin: 0 auto; display: grid; gap: 1rem; }
.auth-page h1 { margin: 0 0 .2rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 500; line-height: 1.05; color: var(--heading-ink); }
.auth-panel { display: grid; gap: 1rem; padding: 1.5rem; }
.auth-panel p { margin: 0; line-height: 1.55; }
.auth-note { color: var(--ink-soft); font-size: .84rem; }
.auth-notice { padding: .8rem .95rem; border: 1px solid var(--warning-note-line); border-radius: 12px; background: var(--warning-note-surface); color: var(--warning-note-ink); font-size: .86rem; font-weight: 650; }
.auth-form { display: grid; gap: .5rem; }
.auth-form label { color: var(--ink-soft); font-size: .78rem; font-weight: 750; }
.auth-form input { width: 100%; min-height: 46px; padding: .55rem .75rem; border: 1px solid var(--field-line); border-radius: 9px; background: var(--field-background); color: var(--ink); font-size: 1.15rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.auth-form input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.auth-form .primary-button { margin-top: .3rem; }
/* Three fields rather than one code: the wide tracking and tabular figures
   above are for a six-digit token and only make a typed password harder to
   read back. The gap moves onto .auth-field so a label stays with its own
   input instead of floating midway between two. */
.auth-form-text { gap: .9rem; }
.auth-field { display: grid; gap: .3rem; }
.auth-form-text input { font-size: 1rem; letter-spacing: normal; font-variant-numeric: normal; }
.auth-error { margin: 0; color: var(--danger-ink); font-size: .82rem; font-weight: 650; line-height: 1.45; }
.auth-details { border: 1px solid var(--line); border-radius: 12px; background: var(--soft-surface); }
.auth-details summary { padding: .6rem .8rem; color: var(--teal-dark); font-size: .84rem; font-weight: 750; cursor: pointer; }
.auth-details > :not(summary) { margin: 0 .8rem .8rem; }
/* Django builds this list from AUTH_PASSWORD_VALIDATORS, so the markup is its
   own and cannot be changed here -- only given room to read as a list. */
.auth-details .helptext { display: grid; gap: .35rem; margin: 0; padding-left: 1.1rem; line-height: 1.5; }
.auth-secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; letter-spacing: .06em; }
.auth-manual-setup { margin-top: 1rem; }
.auth-manual-field { display: grid; gap: .3rem; }
.auth-manual-field label { color: var(--ink); font-size: .78rem; font-weight: 750; }
.auth-copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.auth-copy-row input { min-width: 0; min-height: 40px; padding: .5rem .65rem; border: 1px solid var(--field-line); border-radius: 8px; background: var(--field-background); color: var(--ink); }
.quiet-copy-button { min-height: 40px; padding: .45rem .75rem; border: 1px solid var(--field-line); border-radius: 8px; background: var(--surface); color: var(--teal-dark); font: inherit; font-size: .78rem; font-weight: 750; cursor: pointer; }
.quiet-copy-button:hover, .quiet-copy-button:focus-visible { border-color: var(--teal); background: var(--mint); }
.auth-copy-status { min-height: 1.2em; color: var(--teal-dark); font-size: .76rem; font-weight: 700; }
.code-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.code-list li { padding: .55rem .7rem; border: 1px solid var(--chip-line); border-radius: 9px; background: var(--chip-surface); text-align: center; }
.code-list code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; font-weight: 700; letter-spacing: .08em; color: var(--teal-dark); }
/* The steps an administrator follows on the reset page. Numbered because the
   order is the instruction: check who is asking before touching anything. */
.auth-steps { display: grid; gap: .55rem; margin: 0; padding-left: 1.3rem; color: var(--ink-soft); font-size: .86rem; line-height: 1.55; }
.auth-steps strong { color: var(--ink); }
.second-factor-table td { vertical-align: top; }
.second-factor-table input[type="text"] { width: 100%; min-width: 12rem; min-height: 38px; padding: .45rem .6rem; border: 1px solid var(--field-line); border-radius: 9px; background: var(--field-background); color: var(--ink); }
.second-factor-reset-button { width: auto; min-height: 38px; white-space: nowrap; }
.qr-frame { display: inline-block; padding: .75rem; border-radius: 8px; background: #fff; line-height: 0; }
.qr-frame svg { display: block; max-width: 100%; height: auto; }

.detail-back { display: inline-flex; margin-bottom: 1rem; color: var(--teal); font-size: .82rem; font-weight: 750; text-decoration: none; }
.detail-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.2rem; }
.detail-heading h1 { margin: .2rem 0 .35rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 500; line-height: 1; }
.tracker-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: .85rem; }
.tracker-state-switch-form { display: inline-flex; align-items: center; gap: .55rem; margin: .2rem 0 .35rem; }
.tracker-state-switch { display: inline-flex; align-items: center; gap: .52rem; padding: .3rem .48rem .3rem .35rem; border: 1px solid var(--state-control-line); border-radius: 999px; background: var(--state-control-surface); color: var(--ink-soft); font: inherit; font-size: .74rem; font-weight: 800; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.tracker-state-switch:hover, .tracker-state-switch:focus-visible { border-color: var(--teal); outline: 3px solid var(--focus-ring); }
.tracker-state-switch:disabled { cursor: wait; opacity: .65; }
.tracker-switch-track { display: inline-flex; width: 2.2rem; height: 1.22rem; padding: .13rem; border-radius: 999px; background: var(--off-status); transition: background .16s ease; }
.tracker-switch-track > span { width: .96rem; height: .96rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20, 39, 36, .3); transition: transform .16s ease; }
.tracker-state-switch.is-on { border-color: var(--state-on-line); background: var(--state-on-surface); color: var(--teal-dark); }
.tracker-state-switch.is-on .tracker-switch-track { background: var(--button-background); }
.tracker-state-switch.is-on .tracker-switch-track > span { transform: translateX(.98rem); }
.tracker-state-indicator { display: inline-flex; align-items: center; gap: .4rem; margin: .2rem 0 .35rem; color: var(--ink-soft); font-size: .74rem; font-weight: 800; }
.tracker-state-indicator > span { width: .58rem; height: .58rem; border-radius: 50%; background: var(--off-status); }
.tracker-state-indicator.is-on { color: var(--teal-dark); }
.tracker-state-indicator.is-on > span { background: var(--teal); }
.tracker-state-feedback { max-width: 17rem; color: var(--ink-soft); font-size: .7rem; font-weight: 700; }
.tracker-state-feedback:empty { display: none; }
.tracker-state-feedback.is-error { color: var(--red); }
.tracker-heading-off h1, .tracker-heading-off .eyebrow, .tracker-heading-off .detail-subtitle { color: var(--inactive-ink); }
.tracker-heading-off .detail-badge { border-color: var(--inactive-line); background: var(--inactive-surface); color: var(--inactive-ink); }
.detail-subtitle { margin: 0; color: var(--ink-soft); }
/* The badges now sit on the title line, where they name the tracker rather
   than float against the opposite margin. */
.detail-badges { display: inline-flex; flex-wrap: wrap; gap: .45rem; }
.detail-badge { display: inline-flex; padding: .38rem .68rem; border: 1px solid var(--chip-line); border-radius: 999px; background: var(--chip-surface); color: var(--teal-dark); font-size: .74rem; font-weight: 750; }
/* auto-fit, not two fixed columns: a card without a partner stretches instead
   of leaving half a row empty, and everything in a row shares its height. */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: stretch; gap: 1rem; }
/* The banner speaks only when the system has raised something; see the comment
   on it in tracker_detail.html. */
.detail-alert-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; padding: .75rem .95rem; border: 1px solid var(--danger-line); border-left: 4px solid var(--red); border-radius: 12px; background: var(--danger-surface); color: var(--danger-ink); font-size: .85rem; font-weight: 750; }
.detail-alert-banner-kinds { display: flex; flex-wrap: wrap; gap: .35rem; }
.detail-alert-chip { padding: .2rem .55rem; border: 1px solid var(--danger-line); border-radius: 999px; font-size: .72rem; font-weight: 800; }
.detail-alert-banner-when { margin-left: auto; font-weight: 600; opacity: .85; }
.detail-status-strip { display: flex; flex-wrap: wrap; margin-bottom: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.detail-status-strip > div { flex: 1 1 210px; display: grid; gap: .1rem; padding: .85rem 1.1rem; border-left: 1px solid var(--line); }
.detail-status-strip > div:first-child { border-left: 0; }
.detail-status-strip span { color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.detail-status-strip strong { font-size: 1.3rem; overflow-wrap: anywhere; }
.detail-status-strip small { color: var(--ink-soft); font-size: .74rem; }
/* The rule is the boundary itself, so it runs to the edge of the content. */
.detail-section-bar { display: flex; align-items: center; gap: .8rem; margin: 1.9rem 0 .9rem; color: var(--ink-soft); font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.detail-section-bar::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.detail-nested-block { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.detail-subheading h3 { margin: 0; font-size: .8rem; font-weight: 750; color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase; }
.detail-heading-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
/* The section stacks the card grid and the panels that want the whole width;
   keeping the wide ones out of the grid is what lets auto-fit collapse a track
   it does not need. */
.detail-section { display: grid; gap: 1rem; }
/* Direction, not severity: this is not a warning colour and must not read as
   one. The rail and tint mark the card; the words in the marker carry it. */
.panel-outbound { border-left: 3px solid var(--teal); background: var(--soft-surface); }
.panel-outbound .tracker-command-action { background: var(--surface); }
.detail-direction { display: inline-flex; align-items: center; gap: .32rem; padding: .24rem .58rem; border: 1px solid var(--chip-line); border-radius: 999px; background: var(--surface); color: var(--teal-dark); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.detail-panel { min-width: 0; padding: 1.15rem; }
.detail-panel h2 { margin: 0 0 1rem; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 500; }
/* Centred, not baseline-aligned: an icon-only button has no text baseline, so
   baseline alignment hangs it off the bottom edge of its box. The heading
   carries the gap that used to sit on the h2, which puts the icon on the
   heading's optical centre. */
.detail-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
/* The title claims the free space so anything else in the heading -- a
   direction marker, a refresh control -- stays grouped at the far end instead
   of being spread out by space-between. */
.detail-panel-heading h2 { margin-bottom: 0; margin-right: auto; }
/* Not .quiet-button: that one is header chrome and paints itself white for the
   dark bar it lives in, which leaves it unreadable on a panel in the light
   theme. These tokens follow the theme. */
.detail-refresh-button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--chip-line); border-radius: 9px; background: var(--chip-surface); color: var(--teal-dark); cursor: pointer; }
.detail-refresh-button:hover, .detail-refresh-button:focus-visible { border-color: var(--teal); background: var(--mint); }
.detail-refresh-button[disabled] { cursor: progress; }
/* The glyph replaced a written label, so the wait has to be shown rather than
   read: the icon turns while the fragment is being fetched. The period matches
   REFRESH_TURN_MS in tracker-detail.js, which holds the panel swap until the
   turn closes on 360 degrees -- change the two together or the icon will stop
   mid-rotation. */
.detail-refresh-icon { display: block; transform-origin: center; }
.detail-refresh-button[aria-busy="true"] .detail-refresh-icon { animation: refresh-spin .6s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .detail-refresh-button[aria-busy="true"] .detail-refresh-icon { animation: none; }
    .detail-refresh-button[aria-busy="true"] { opacity: .55; }
}
.detail-list { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr); gap: .7rem 1rem; margin: 0; }
.detail-list dt { color: var(--ink-soft); font-size: .76rem; font-weight: 700; }
.detail-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: .86rem; }
.evidence-list { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.evidence-list li { padding: .45rem .65rem; border-radius: 9px; background: var(--mint); color: var(--teal-dark); font-size: .78rem; font-weight: 750; }
.detail-alert-list { display: grid; gap: .65rem; }
.detail-alert { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.detail-alert:last-child { border-bottom: 0; }
.detail-alert strong, .detail-alert span { display: block; }
.detail-alert span, .detail-muted { color: var(--ink-soft); font-size: .76rem; }
.detail-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.tracker-command-panel .detail-panel-heading { align-items: flex-start; }
.tracker-command-panel .detail-panel-heading h2 { margin-bottom: .35rem; }
.command-target-list { margin-top: 1rem; }
.command-warning { margin: 1rem 0 0; padding: .75rem .9rem; border: 1px solid var(--danger-line); border-radius: 10px; background: var(--danger-surface); color: var(--danger-ink); font-size: .8rem; font-weight: 700; }
.tracker-command-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: .8rem; margin-top: 1rem; }
.tracker-command-action { display: flex; flex-direction: column; min-width: 0; padding: .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--soft-surface); }
.tracker-command-action h3 { margin: 0 0 .45rem; color: var(--teal-dark); font-size: .95rem; }
.tracker-command-action p { margin: 0 0 .4rem; font-size: .82rem; line-height: 1.45; }
.tracker-command-action small { display: block; margin-bottom: .8rem; color: var(--ink-soft); line-height: 1.45; }
.tracker-command-action form { margin-top: auto; }
.tracker-command-action .text-link { margin-top: .65rem; }
.tracker-command-action .quiet-button { justify-content: center; border-color: var(--button-background); background: var(--button-background); color: #fff; font-weight: 800; }
.tracker-command-action .quiet-button:hover, .tracker-command-action .quiet-button:focus-visible { border-color: var(--button-hover); background: var(--button-hover); }
.tracker-command-action button[disabled] { cursor: not-allowed; opacity: .5; }
.tracker-command-feedback { min-height: 1.2em; margin: .8rem 0 0; color: var(--teal-dark); font-size: .8rem; font-weight: 750; }
.tracker-command-feedback:empty { display: none; }
.tracker-command-feedback.is-error { color: var(--danger-ink); }
.command-interval-form { display: flex; flex-wrap: wrap; align-items: end; gap: .55rem; }
.command-interval-form label { display: grid; flex: 1 1 110px; gap: .28rem; color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.command-interval-form input { width: 100%; min-height: 40px; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 9px; background: var(--field-background); color: var(--ink); }
.command-history-table td:last-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.command-state { display: inline-flex; padding: .28rem .5rem; border-radius: 999px; background: var(--chip-surface); color: var(--teal-dark); font-size: .7rem; font-weight: 800; white-space: nowrap; }
.command-state-failed, .command-state-nack, .command-state-expired { background: var(--danger-surface); color: var(--danger-ink); }
.command-state-ack, .command-state-sent { background: var(--mint); color: var(--teal-dark); }
.message-stack { display: grid; gap: .55rem; margin: 0 0 1rem; }
.app-message { padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--soft-surface); color: var(--teal-dark); font-size: .82rem; font-weight: 700; }
.app-message-success { border-color: #a8cbb9; background: var(--mint); }
.app-message-error { border-color: var(--danger-line); background: var(--danger-surface); color: var(--danger-ink); }
.detail-map-button { width: auto; min-height: 40px; align-items: center; display: inline-flex; text-decoration: none; }
.sensor-reading-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; }
.sensor-reading { display: grid; gap: .2rem; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.sensor-reading span, .sensor-reading small { color: var(--ink-soft); }
.sensor-reading strong { font-size: 1.15rem; }
/* The reading is the number; the denominator only says what it is read
   against, so it steps back rather than reading as part of the figure. */
.sensor-reading-scale { color: var(--ink-soft); font-size: .72em; font-weight: 600; }
.sensor-history-table-wrap { overflow-x: auto; }
.sensor-history-table { width: 100%; border-collapse: collapse; }
.sensor-history-table th, .sensor-history-table td { padding: .7rem .6rem; border-bottom: 1px solid var(--line); text-align: left; }
.sensor-history-table th { color: var(--ink-soft); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
/* The pivot is fifty reports tall, so it scrolls inside its own card rather
   than pushing everything below it off the screen, and the heading row stays
   put -- a column of bare numbers is unreadable once its heading has gone. */
.detail-sensor-history .sensor-history-table-wrap { max-height: 27rem; overflow-y: auto; }
/* The separating line is a shadow, not a border: with border-collapse a border
   on a sticky cell scrolls away with the table and leaves the heading floating
   over the figures. */
.sensor-history-pivot thead th { position: sticky; top: 0; z-index: 1; border-bottom: 0; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
.sensor-history-pivot th:not(:first-child), .sensor-history-pivot .sensor-history-value { text-align: right; }
/* Figures in a column are compared down the page, so they need one width. */
.sensor-history-pivot td { font-variant-numeric: tabular-nums; }
.sensor-history-unit { color: var(--ink-soft); font-weight: 400; text-transform: none; letter-spacing: 0; }
.sensor-history-count { margin: 0; white-space: nowrap; }
/* Collapsed to five rows, the last of them fading out so the cut is visible
   rather than merely implied. The fade is a mask, not a gradient laid over the
   table, so it works on either theme's panel without being told its colour.
   The class is applied by tracker-detail.js, never in the markup -- see the
   comment on the toggle in tracker_detail.html. */
.detail-sensor-history.is-collapsed .sensor-history-table-wrap { max-height: none; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.6rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 2.6rem), transparent); }
.detail-sensor-history.is-collapsed .sensor-history-pivot tbody tr:nth-child(n+6) { display: none; }
.sensor-history-toggle { display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem; padding: .35rem .7rem; border: 1px solid var(--chip-line); border-radius: 9px; background: var(--chip-surface); color: var(--teal-dark); font-size: .78rem; font-weight: 750; cursor: pointer; }
.sensor-history-toggle[hidden] { display: none; }
.sensor-history-toggle:hover, .sensor-history-toggle:focus-visible { border-color: var(--teal); background: var(--mint); }
.sensor-history-toggle-chevron { transition: transform .18s ease; }
.detail-sensor-history:not(.is-collapsed) .sensor-history-toggle-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .sensor-history-toggle-chevron { transition: none; } }

.alert-history-filters { margin-bottom: 1rem; padding: 1rem; overflow: visible; }
.history-filter-form { display: grid; grid-template-columns: repeat(5, minmax(135px, 1fr)) auto; gap: .75rem; align-items: end; }
.history-filter-form label { display: grid; gap: .32rem; color: var(--ink-soft); font-size: .74rem; font-weight: 750; }
.history-filter-form input, .history-filter-form select { width: 100%; min-height: 40px; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 9px; background: var(--field-background); color: var(--ink); }
.history-filter-actions { display: flex; align-items: center; gap: .65rem; min-height: 40px; }
.history-filter-submit { width: auto; min-height: 40px; white-space: nowrap; }
.alert-history-layout { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(520px, 1.1fr); gap: 1rem; align-items: start; }
.alert-history-map-panel { position: sticky; top: 1rem; }
.alert-history-map { height: min(68vh, 720px); min-height: 480px; background-color: #e4e7dd; }
.alert-history-list { padding: 0 1rem; }
.alert-history-entry { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.alert-history-entry:last-child { border-bottom: 0; }
.alert-history-title-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.alert-history-title-line strong { font-family: Georgia, serif; font-size: 1.15rem; font-weight: 500; }
.alert-history-main > p { margin: .2rem 0 .8rem; color: var(--ink-soft); font-size: .8rem; }
.alert-state { padding: .28rem .55rem; border-radius: 999px; background: var(--alert-state-surface); color: var(--alert-state-ink); font-size: .68rem; font-weight: 800; }
.alert-state-acknowledged { background: var(--alert-acknowledged-surface); color: var(--alert-acknowledged-ink); }
.alert-state-resolved { background: var(--mint); color: var(--teal-dark); }
.alert-history-facts { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: .42rem .75rem; margin: 0; }
.alert-history-facts dt { color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.alert-history-facts dd { margin: 0; overflow-wrap: anywhere; font-size: .78rem; }
.alert-history-facts dd a { color: var(--teal); font-weight: 750; }
.alert-history-facts small { color: var(--ink-soft); }
.alert-map-focus { margin-left: .45rem; padding: 0; border: 0; background: none; color: var(--teal); font: inherit; font-weight: 750; cursor: pointer; text-decoration: underline; }
.alert-history-empty { padding: 1.25rem 0; }
.history-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .78rem; }
.history-pagination a { color: var(--teal); font-weight: 750; }

.gateway-overview-link { text-decoration: none; }
.gateway-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.gateway-health-note { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid var(--warning-note-line); border-radius: 12px; background: var(--warning-note-surface); color: var(--warning-note-ink); font-size: .78rem; line-height: 1.45; }
.gateway-health-note strong { flex: 0 0 auto; }
.gateway-overview-layout { display: grid; grid-template-columns: minmax(430px, 1.1fr) minmax(360px, .9fr); gap: 1rem; align-items: start; }
.gateway-map-panel { overflow: hidden; }
.gateway-map { height: min(60vh, 610px); min-height: 430px; background-color: #e4e7dd; }
.gateway-list { padding: .35rem 1rem 1rem; }
.gateway-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .9rem 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.gateway-card:last-child { border-bottom: 0; }
.gateway-card:hover strong, .gateway-card:focus-visible strong { color: var(--teal); }
.gateway-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.gateway-card-marker { width: 12px; height: 12px; border-radius: 50%; background: var(--off-status); box-shadow: 0 0 0 4px rgba(154, 165, 162, .16); }
.gateway-state-recent { background: var(--teal); box-shadow: 0 0 0 4px rgba(23, 107, 104, .15); }
.gateway-state-stale { background: var(--amber); box-shadow: 0 0 0 4px rgba(217, 130, 43, .16); }
.gateway-state-disabled, .gateway-state-replaced { background: var(--off-status-strong); }
.gateway-card-copy { min-width: 0; }
.gateway-card-copy strong, .gateway-card-copy small, .gateway-card-copy span { display: block; }
.gateway-card-copy strong, .gateway-card-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gateway-card-copy small, .gateway-card-facts small, .gateway-card-facts time { color: var(--ink-soft); font-size: .7rem; }
.gateway-radio-state { display: inline-flex; width: fit-content; margin-top: .35rem; padding: .26rem .5rem; border-radius: 999px; background: var(--neutral-surface); color: var(--ink-soft); font-size: .68rem; font-weight: 800; }
.gateway-radio-state-recent { background: var(--mint); color: var(--teal-dark); }
.gateway-radio-state-stale { background: var(--amber-soft); color: var(--alert-state-ink); }
.gateway-card-facts { display: grid; gap: .12rem; text-align: right; }
.gateway-card-facts time { color: var(--ink); font-weight: 700; white-space: nowrap; }
.gateway-empty-state { padding: 1.1rem 0; }
.observed-gateways-panel, .gateway-receptions-panel { margin-top: 1rem; }
.roster-table-wrap { overflow-x: auto; }
.roster-table { width: 100%; border-collapse: collapse; }
.roster-table th, .roster-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.roster-table th { color: var(--ink-soft); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.roster-table td { font-size: .82rem; }
.roster-table tbody tr:last-child td { border-bottom: 0; }
.roster-nothing { color: var(--ink-soft); }
.roster-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.roster-button { min-height: 32px; padding: .3rem .6rem; border-color: var(--line); color: var(--ink); font-size: .76rem; }
.roster-team { margin-bottom: 1rem; }
.roster-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; padding: 1rem 1.2rem; border-top: 1px solid var(--line); }
.roster-field { display: flex; flex-direction: column; gap: .25rem; min-width: 11rem; }
.roster-field label { color: var(--ink-soft); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.roster-field select, .roster-field input { min-height: 38px; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; font-size: .82rem; }
.roster-submit { width: auto; min-height: 38px; padding: .5rem 1.1rem; }
.roster-note { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--ink-soft); font-size: .76rem; }
.roster-access summary { cursor: pointer; color: var(--ink-soft); font-size: .76rem; }
.roster-access form { display: flex; flex-direction: column; gap: .6rem; padding-top: .6rem; }
.roster-access .roster-field { min-width: 0; }
.roster-access .roster-button { align-self: flex-start; }
.roster-handover { border-color: var(--accent, var(--line)); }
.handover-credentials { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .35rem 1rem; margin: 0; padding: 0 1.2rem; }
.handover-credentials dt { color: var(--ink-soft); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.handover-credentials dd { margin: 0; }
.handover-credentials code { font-size: 1rem; letter-spacing: .06em; }
.handover-note { margin: .9rem 0 0; padding: 0 1.2rem 1.1rem; color: var(--ink-soft); font-size: .76rem; }
.roster-uncarried-list, .roster-supervision-list { margin: 0 1.2rem 1rem; padding: 0; list-style: none; }
.roster-uncarried-list li, .roster-supervision-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--soft-line); }
.gateway-table-wrap { overflow-x: auto; }
.gateway-table { width: 100%; border-collapse: collapse; }
.gateway-table th, .gateway-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.gateway-table th { color: var(--ink-soft); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.gateway-table td { font-size: .78rem; }
.gateway-table tbody tr:last-child td { border-bottom: 0; }
.gateway-marker span { font-size: .56rem; }

/* Antenna siting tool (docs/COVERAGE_PLANNING.md). It reuses the gateway
   page's panel styles; the map legend, the estimate chips and the candidate
   pin are its own. */
.coverage-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.coverage-map-panel { overflow: hidden; }
.coverage-map-shell { position: relative; }
.coverage-map { height: min(72vh, 760px); min-height: 520px; background-color: #e4e7dd; }
.coverage-form { padding: .35rem 1rem 1rem; }
.coverage-form form { display: grid; gap: .75rem; }
.coverage-form label { color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.coverage-form input, .coverage-form select { padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; font-size: .82rem; }
.coverage-form-section { display: grid; gap: .7rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.coverage-form-section:first-of-type { border-top: 0; padding-top: .2rem; }
.coverage-form-section summary { cursor: pointer; color: var(--ink); font-size: .84rem; font-weight: 800; }
.coverage-form-section:not([open]) { padding-bottom: .15rem; }
.coverage-form-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.coverage-model-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 42rem; }
.coverage-field { display: grid; gap: .25rem; min-width: 0; }
.coverage-field-wide { grid-column: span 2; }
.coverage-form-actions { display: flex; justify-content: flex-end; padding-top: .15rem; }
.coverage-form-actions .alert-action { margin: 0; }
.coverage-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.coverage-pair span { display: grid; gap: .25rem; }
.coverage-hint { margin: 0; color: var(--ink-soft); font-size: .72rem; line-height: 1.45; }
.coverage-readout { margin: 0; font-size: .78rem; font-weight: 750; color: var(--teal); min-height: 1.1rem; }
.coverage-readout.unknown { color: var(--amber); }
.coverage-radio { max-width: 62rem; }
.coverage-messages { display: grid; gap: .4rem; margin-bottom: 1rem; }
.coverage-message { margin: 0; padding: .7rem .9rem; border-radius: 10px; background: var(--neutral-surface); font-size: .8rem; }
.coverage-message.error { background: var(--amber-soft); color: var(--alert-state-ink); }
.coverage-map-actions { gap: .42rem; }
.coverage-map-action { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; padding: 0; border: 1px solid var(--soft-line); border-radius: 11px; background: var(--soft-surface); color: var(--teal-dark); cursor: pointer; transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease; }
.coverage-map-action:hover:not(:disabled), .coverage-map-action:focus-visible { border-color: var(--teal); background: var(--mint); color: var(--teal); box-shadow: 0 5px 14px rgba(15, 50, 50, .14); }
.coverage-map-action:disabled { cursor: not-allowed; opacity: .42; }
.coverage-map-action svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.coverage-map-action[aria-pressed="true"] { border-color: rgba(23, 107, 104, .42); background: var(--mint); color: var(--teal); }
.coverage-gateway-hidden-stroke { opacity: 0; transition: opacity .16s ease; }
.coverage-map-action[aria-pressed="false"] .coverage-gateway-hidden-stroke { opacity: 1; }
/* The legend sits on the picture it describes, and the saved image carries
   the same lines drawn into the canvas. */
.coverage-legend { position: absolute; top: .8rem; left: .8rem; z-index: 2; display: grid; gap: .24rem; max-width: 20rem; padding: .8rem .9rem; border: 1px solid #819795; border-radius: 10px; background: rgba(255, 255, 255, .98); box-shadow: 0 8px 24px rgba(15, 50, 50, .22); color: #183538; font-size: .76rem; }
.coverage-legend > strong { color: #102b2e; font-size: .86rem; }
.coverage-legend-control { position: absolute; top: .8rem; right: .8rem; z-index: 3; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(89, 112, 110, .72); border-radius: 12px; background: rgba(255, 255, 255, .96); box-shadow: 0 6px 18px rgba(15, 50, 50, .2); color: #183538; cursor: pointer; backdrop-filter: blur(8px); }
.coverage-legend-map-control { border-radius: 12px; background: transparent; box-shadow: none; }
.coverage-legend-map-control .coverage-legend-control { position: static; }
.coverage-legend-control:hover, .coverage-legend-control:focus-visible { border-color: #176b68; background: #fff; color: #176b68; box-shadow: 0 8px 22px rgba(15, 50, 50, .26); }
.coverage-legend-control svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.coverage-legend-control-chevron { transform-origin: 19.5px 12px; transition: transform .16s ease; }
.coverage-legend-control[aria-expanded="false"] .coverage-legend-control-chevron { transform: rotate(180deg); }
.coverage-legend-details { display: grid; gap: .24rem; }
.coverage-legend-details > span { display: flex; justify-content: space-between; gap: 1rem; }
.coverage-legend-details em { color: #385457; font-style: normal; font-weight: 650; }
.coverage-legend-details b { color: #102b2e; font-variant-numeric: tabular-nums; font-weight: 850; }
.coverage-legend-details small { margin-top: .35rem; color: #476165; font-size: .67rem; font-weight: 600; line-height: 1.35; }
.coverage-antenna { margin: 0 0 .6rem; padding: .55rem .7rem .3rem; border: 1px solid var(--line); border-radius: 10px; }
.coverage-antenna.is-active { border-color: var(--teal); box-shadow: inset 3px 0 0 var(--teal); }
.coverage-antenna > legend { display: flex; align-items: center; gap: .45rem; padding: 0 .3rem; font-size: .74rem; font-weight: 700; }
.coverage-antenna-badge { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); color: #fff; font-size: .68rem; }
.coverage-antenna-remove, .coverage-antenna-visibility { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-soft); cursor: pointer; }
.coverage-antenna-remove:hover, .coverage-antenna-remove:focus-visible { color: var(--red); }
.coverage-antenna-visibility:hover, .coverage-antenna-visibility:focus-visible { color: var(--teal); }
.coverage-antenna-remove svg, .coverage-antenna-visibility svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.coverage-antenna > legend .coverage-antenna-visibility { margin-left: auto; }
.coverage-antenna-hidden-stroke { opacity: 0; transition: opacity .16s ease; }
.coverage-antenna-visibility[aria-pressed="false"] .coverage-antenna-hidden-stroke { opacity: 1; }
/* An antenna that is off the picture but still part of the candidate: dimmed
   here so the form never disagrees with the map about what is drawn. */
.coverage-antenna.is-hidden { border-style: dashed; }
.coverage-antenna.is-hidden .coverage-antenna-badge { background: var(--ink-soft); }
.coverage-antenna.is-hidden .coverage-antenna-title, .coverage-antenna.is-hidden .coverage-form-fields, .coverage-antenna.is-hidden .coverage-readout { opacity: .55; }
.coverage-antenna-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; margin: .4rem 0 .2rem; }
.coverage-antenna-controls .coverage-field { flex: 1; min-width: 11rem; }
#coverage-layer { max-width: 15rem; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: inherit; font: inherit; font-size: .74rem; }
#coverage-layer[hidden] { display: none; }
.coverage-legend.is-collapsed { display: none; }
/* `hidden` is what clearing the map sets, and an author `display` beats the
   browser's own `[hidden] { display: none }` no matter the specificity. Without
   these two rules the legend and its control outlive the overlay they describe.
   Same trap as .sensor-history-toggle[hidden] above. */
.coverage-legend[hidden], .coverage-legend-control[hidden] { display: none; }
.coverage-history { display: grid; gap: .4rem; padding: .35rem 1rem 1rem; }
.coverage-chip { display: flex; align-items: flex-start; gap: .35rem; min-height: 64px; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: inherit; }
.coverage-chip:hover { border-color: var(--teal); }
.coverage-chip-open { display: grid; flex: 1; gap: .1rem; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.coverage-chip-open:disabled { cursor: default; opacity: .75; }
.coverage-chip-open strong { font-size: .8rem; overflow-wrap: anywhere; }
.coverage-chip-open span { color: var(--ink-soft); font-size: .7rem; }
.coverage-chip-open em { color: var(--amber); font-size: .68rem; font-style: normal; }
.coverage-chip-actions { display: flex; gap: .15rem; }
.coverage-chip-action { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--ink-soft); cursor: pointer; }
.coverage-chip-action:hover, .coverage-chip-action:focus-visible { border-color: var(--line); color: var(--teal); }
.coverage-chip-action.action-delete:hover, .coverage-chip-action.action-delete:focus-visible { color: var(--red); }
.coverage-chip-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.coverage-history-error:empty { display: none; }
.coverage-history-error { padding: 0 1rem 1rem; color: var(--red); }
.coverage-chip.state-ready { border-left: 3px solid var(--teal); }
.coverage-chip.state-failed { border-left: 3px solid var(--red); }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; }
.swatch-strong { background: #176b68; }
.swatch-thin { background: #d6c45c; }
.swatch-none { background: #bf3d39; }
.legend-toggle { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.legend-toggle input { accent-color: var(--teal); }
.candidate-marker { background: var(--ink-soft); }
.candidate-marker.ready { background: var(--teal); }
.candidate-marker span { font-size: .62rem; }
@media (max-width: 1000px) {
    .coverage-map { height: min(66vh, 650px); min-height: 430px; }
    .coverage-form-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coverage-field-wide { grid-column: span 2; }
}
@media (max-width: 620px) {
    .coverage-map { height: 62vh; min-height: 360px; }
    .coverage-form-fields, .coverage-model-fields { grid-template-columns: 1fr; }
    .coverage-field-wide { grid-column: auto; }
    .coverage-form-actions { justify-content: stretch; }
    .coverage-form-actions .alert-action { width: 100%; }
    .coverage-legend { top: .65rem; right: 4.35rem; left: .65rem; max-width: none; }
    .coverage-legend-control { top: .65rem; right: .65rem; }
}
@media (prefers-reduced-motion: reduce) { .coverage-map-action, .coverage-gateway-hidden-stroke, .coverage-antenna-hidden-stroke, .coverage-legend-control-chevron { transition: none; } }
.gateway-time-value { font-size: 1.15rem !important; }
.gateway-detail-grid { margin-bottom: 1rem; }

.map-marker { display: grid; place-items: center; width: 30px; height: 30px; border: 3px solid #fff; border-radius: 50% 50% 50% 0; background: var(--teal); color: #fff; box-shadow: 0 4px 12px rgba(22,65,64,.28); transform: rotate(-45deg); }
.map-marker span { transform: rotate(45deg); font-size: .68rem; font-weight: 800; }
.map-marker.asset { background: var(--amber); }
.map-marker.alert { background: var(--red); animation: marker-pulse 1.8s infinite; }
.marker-stack-count { position: absolute; top: -8px; right: -8px; display: grid; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; background: var(--ink); color: #fff; font-size: .62rem; font-weight: 850; line-height: 1; transform: none !important; box-shadow: 0 2px 7px rgba(10, 34, 34, .25); }
@keyframes marker-pulse { 50% { box-shadow: 0 0 0 10px rgba(191,61,57,.16); } }

@media (max-width: 1000px) {
    .summary-grid { grid-template-columns: repeat(2, 1fr); }
    .workspace-grid { grid-template-columns: 1fr; }
    .side-column { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .tracker-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .history-filter-form { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
    .alert-history-layout { grid-template-columns: 1fr; }
    .alert-history-map-panel { position: static; }
    .gateway-overview-layout { grid-template-columns: 1fr; }
    .operations-stage { grid-template-columns: minmax(220px, .55fr) minmax(0, 1.8fr); }
    .dashboard-lower-grid, .settings-layout { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
    .app-header { position: relative; min-height: 64px; padding-top: .55rem; padding-bottom: .55rem; flex-wrap: nowrap; }
    .brand { min-width: 0; }
    .brand-copy { min-width: 0; }
    .brand small, .user-name { display: none; }
    /* The tagline is decoration and goes; the build identity stays. A phone in
       the field is the one place where there is no other way to check it. */
    .brand small.brand-version { display: block; }
    .brand-mark { width: 38px; height: 38px; flex-basis: 38px; border-radius: 10px; }
    .app-primary-action { min-height: 38px; padding: .45rem .68rem; font-size: .76rem; white-space: nowrap; }
    .account-trigger-copy, .account-chevron { display: none; }
    .account-menu-trigger { min-height: 40px; padding: .18rem; }
    .account-menu-panel { position: fixed; top: 66px; right: .75rem; }
    .app-navigation { position: relative; top: auto; padding-left: .75rem; padding-right: .75rem; }
    .mission-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
    .mission-heading h1 { font-size: 2.35rem; }
    .summary-grid { grid-template-columns: 1fr 1fr; }
    .summary-card { min-height: 102px; }
    .workspace-grid, .side-column { grid-template-columns: 1fr; }
    .mission-map { min-height: 55vh; }
    .tracker-list { grid-template-columns: 1fr; }
    .panel-heading { align-items: flex-start; }
    .detail-heading { align-items: flex-start; flex-direction: column; }
    .detail-grid { grid-template-columns: 1fr; }
    .detail-status-strip > div { border-left: 0; border-top: 1px solid var(--line); }
    .detail-status-strip > div:first-child { border-top: 0; }
    .detail-alert-banner-when { margin-left: 0; }
    .detail-list { grid-template-columns: 1fr; gap: .2rem; }
    .detail-list dd { margin-bottom: .65rem; }
    .history-filter-form { grid-template-columns: 1fr; }
    .alert-history-map { min-height: 55vh; }
    .alert-history-facts { grid-template-columns: 1fr; gap: .15rem; }
    .alert-history-facts dd { margin-bottom: .5rem; }
    .gateway-summary { grid-template-columns: 1fr; }
    .gateway-health-note { display: block; }
    .gateway-health-note strong, .gateway-health-note span { display: block; }
    .gateway-health-note strong { margin-bottom: .25rem; }
    .gateway-map { min-height: 55vh; }
    .gateway-card { grid-template-columns: auto minmax(0, 1fr); }
    .gateway-card-facts { grid-column: 2; text-align: left; }
    .operations-stage { grid-template-columns: 1fr; overflow: visible; }
    .fleet-panel { max-height: 320px; }
    .operations-map-panel .mission-map { min-height: 55vh; }
    .tracker-drawer-scrim { position: fixed; inset: 0; z-index: 84; }
    .tracker-detail-drawer { position: fixed; inset: auto 0 0; z-index: 85; width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0; transform: translateY(calc(100% + 2rem)); }
    .tracker-detail-drawer.is-open { transform: translateY(0); }
    .tracker-drawer-metrics { grid-template-columns: 1fr 1fr; }
    .tracker-drawer-metrics article:last-child { grid-column: 1 / -1; }
    .tracker-drawer-actions { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
    .dashboard-lower-grid { grid-template-columns: 1fr; }
    .alert-drawer-handle { grid-template-columns: auto auto auto 1fr auto; }
    .alert-drawer-state { display: none; }
    .settings-coordinate-grid { grid-template-columns: 1fr; }
    .settings-field:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .account-chevron { transition: none; }
    .fleet-card, .tracker-detail-drawer, .alert-drawer-chevron { transition: none; }
}

/* Command console -------------------------------------------------------- */
/* Three steps that read as three steps. The catalogue is large enough that an
   operator has to be able to see where they are in it, and the commands that
   cannot be taken back have to look different from the ones that can. */
.console-steps { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.console-step { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-size: .76rem; font-weight: 750; }
.console-step-number { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--chip-surface); color: var(--teal-dark); font-size: .7rem; }
.console-step.is-current { border-color: var(--teal); color: var(--teal-dark); }
.console-step.is-current .console-step-number { background: var(--teal); color: #fff; }
.console-step.is-done { color: var(--teal-dark); }

.console-filter { display: grid; gap: .3rem; max-width: 22rem; margin: 1rem 0; color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.console-filter input { min-height: 40px; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 9px; background: var(--field-background); color: var(--ink); }

.console-tracker-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.console-tracker { padding: .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--soft-surface); }
.console-tracker > a { display: flex; flex-direction: column; gap: .2rem; color: var(--teal-dark); text-decoration: none; font-weight: 800; }
.console-tracker > a:hover strong, .console-tracker > a:focus-visible strong { text-decoration: underline; }
.console-tracker-model { color: var(--ink-soft); font-size: .76rem; font-weight: 650; }
.console-tracker-facts { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; margin: .7rem 0 0; font-size: .74rem; }
.console-tracker-facts dt { color: var(--ink-soft); font-weight: 750; }
.console-tracker-facts dd { margin: 0; }
.console-state { display: inline-flex; padding: .15rem .45rem; border-radius: 999px; background: var(--chip-surface); color: var(--teal-dark); font-size: .68rem; font-weight: 800; }
.console-state-inactive { background: var(--amber-soft); color: var(--amber); }
.console-change-link { margin: 1rem 0 0; font-size: .78rem; }

.console-command-list { display: grid; gap: .7rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.console-command { padding: .85rem; border: 1px solid var(--line); border-radius: 12px; background: var(--soft-surface); }
.console-command > a { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; color: var(--teal-dark); font-weight: 800; text-decoration: none; }
.console-command > a:hover, .console-command > a:focus-visible { text-decoration: underline; }
.console-command p { margin: .4rem 0 0; font-size: .82rem; line-height: 1.45; }
.console-command small { display: block; margin-top: .35rem; color: var(--ink-soft); font-size: .76rem; line-height: 1.45; }
.console-command-flag { padding: .12rem .45rem; border-radius: 999px; background: var(--danger-surface); color: var(--danger-ink); font-size: .66rem; font-weight: 800; text-transform: lowercase; }
.console-command-caution { border-color: var(--danger-line); }
.console-command-warning { color: var(--danger-ink); font-weight: 700; }
.console-unavailable dt { color: var(--teal-dark); font-weight: 800; }
.console-unavailable dd { margin: 0 0 .6rem; color: var(--ink-soft); font-size: .78rem; line-height: 1.45; }
.console-restricted-reason { margin: .6rem 0 .2rem; color: var(--teal-dark); font-weight: 800; font-size: .86rem; }
.console-restricted-labels { margin: 0 0 .6rem; color: var(--ink-soft); font-size: .78rem; line-height: 1.45; }

.console-evidence { margin: .4rem 0 0; color: var(--ink-soft); font-size: .74rem; font-weight: 750; }
.command-caution { display: grid; gap: .3rem; margin: 1rem 0 0; padding: .8rem .9rem; border: 1px solid var(--danger-line); border-radius: 10px; background: var(--danger-surface); color: var(--danger-ink); font-size: .8rem; line-height: 1.5; }
.command-caution strong { font-weight: 850; }

.console-command-form { display: grid; gap: 1rem; margin-top: 1.2rem; }
.console-argument { display: grid; gap: .3rem; }
.console-argument > label { color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.console-argument input[type="text"], .console-argument input[type="number"], .console-argument select { min-height: 40px; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 9px; background: var(--field-background); color: var(--ink); font: inherit; }
.console-argument select[multiple] { min-height: 14rem; }
.console-argument-help, .console-setting-help { margin: 0; color: var(--ink-soft); font-size: .74rem; line-height: 1.45; }
.console-unit { font-weight: 650; text-transform: none; }
.console-checkbox { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 700; }
.console-checkbox input { width: 1.05rem; height: 1.05rem; }

.console-settings { display: grid; gap: .8rem; margin: 0; padding: .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--soft-surface); }
.console-settings legend { padding: 0 .35rem; color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.console-setting-row { display: grid; gap: .35rem; }
.console-setting-row > select, .console-setting-value input, .console-setting-value > select { min-height: 40px; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 9px; background: var(--field-background); color: var(--ink); font: inherit; }
.console-setting-value input, .console-setting-value > select { width: 100%; }
.console-bitmap { display: grid; gap: .5rem; margin: 0; padding: .6rem; border: 1px dashed var(--line); border-radius: 10px; }
.console-bitmap-field { display: grid; gap: .2rem; font-size: .78rem; }
.console-bitmap-field small { color: var(--ink-soft); font-size: .7rem; line-height: 1.4; }

.console-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.console-actions .primary-button { width: auto; min-width: 12rem; }