:root {
    color-scheme:dark;
    --bg:#101318;
    --surface:#191e26;
    --raised:#222934;
    --text:#edf0f5;
    --muted:#9ba6b6;
    --border:#303846;
    --accent:#ffc54b;
    --accent-ink:#211a0b;
    --green:#59d59a;
    --sidebar:#141b25;
    --card:#1e2734;
    --hover:#2b3747;
    --selected:#28364a;
    --focus:#a9caff;
    --primary:#edf0f5;
    --primary-ink:#172234;
    --danger:#ff999f;
    --card-shadow:0 1px 2px #0003,0 5px 14px #0002;
    --shadow:0 2px 6px #0003,0 16px 40px #0005;
    --shell-shadow:0 2px 12px #0003;
    font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
}

:root[data-theme=light] {
    color-scheme:light;
    --bg:#e8eef5;
    --surface:#fff;
    --raised:#f1f5f9;
    --text:#1c2d43;
    --muted:#586b82;
    --border:#d5dfeb;
    --accent:#f3b52f;
    --accent-ink:#211a0b;
    --green:#198657;
    --sidebar:#eaf0f7;
    --card:#fff;
    --hover:#e3ebf5;
    --selected:#e5eefb;
    --focus:#245ba4;
    --primary:#243b57;
    --primary-ink:#fff;
    --danger:#b32538;
    --card-shadow:0 1px 2px #1c36500a,0 5px 14px #1c36500d;
    --shadow:0 2px 6px #1c365012,0 16px 40px #1c365026;
    --shell-shadow:0 2px 12px #1c365012;
}

/* Enterprise replay: vivid heading/status discs above pastel speed-band routes. */
.ops-hist-marker {
    position:absolute; transform:translate(-50%,-50%); width:18px; height:18px;
    min-width:18px; min-height:18px;
    padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; z-index:2;
}
.ops-hist-marker img { display:block; width:100%; height:100%; pointer-events:none; }
.ops-app button.ops-hist-marker:hover,.ops-app button.ops-hist-marker:active { background:transparent; box-shadow:none; }
.ops-hist-marker.is-selected,.ops-hist-marker:focus-visible { outline:2px solid var(--focus); outline-offset:1px; z-index:3; }
.ops-hist-pop {
    position:fixed; z-index:1300; transform:translate(-50%,-100%); width:260px; max-width:calc(100vw - 12px);
    max-height:calc(100vh - 12px); overflow:auto; padding:14px; border:1px solid var(--border);
    border-radius:12px; background:var(--card); color:var(--text); box-shadow:var(--shadow);
    font-size:13px; overflow-wrap:anywhere; pointer-events:none;
}
.ops-hist-pop.below { transform:translate(-50%,0); }
.ops-hist-pop.pinned { pointer-events:auto; }
.ops-hist-pop > strong { display:block; padding-right:24px; }
.ops-hist-pop .ops-hist-close { position:absolute; right:5px; top:5px; width:30px; height:30px; padding:0; font-size:22px; }
.ops-hist-status { font-weight:700; text-transform:capitalize; }
.ops-hist-status[data-kind=moving],.ops-hist-status[data-kind=start] { color:var(--green); }
.ops-hist-status[data-kind=stop] { color:var(--danger); }
.ops-hist-status[data-kind=idle] { color:#ffc04d; }
.ops-hist-status[data-kind=heartbeat] { color:#c4a7fb; }
.ops-hist-status[data-kind=other] { color:var(--muted); }
:root[data-theme=light] .ops-hist-status[data-kind=idle] { color:#a06500; }
:root[data-theme=light] .ops-hist-status[data-kind=heartbeat] { color:#7C3AED; }
.ops-hist-sub,.ops-hist-address { color:var(--muted); }
.ops-hist-address { margin-top:8px; }
.ops-hist-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.ops-hist-stats > div { position:relative; padding:10px 5px; text-align:center; background:var(--raised); border-radius:8px; }
.ops-hist-stats b,.ops-hist-stats small { display:block; }
.ops-hist-stats small { color:var(--muted); }
.ops-hist-stats .over { color:var(--danger); }
.ops-hist-limit { position:absolute; right:-3px; top:-9px; display:grid; place-items:center; min-width:28px; height:28px; padding:1px; border:3px solid #d9534f; border-radius:50%; background:#fff; color:#222; font-weight:700; font-size:11px; }

* {
    box-sizing:border-box;
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
}

button,input,select,a {
    font:inherit;
}

button,a,input,select {
    -webkit-tap-highlight-color:transparent;
}

button,a {
    touch-action:manipulation;
}

button {
    cursor:pointer;
}

button,a {
    color:inherit;
}

button {
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface);
    padding:8px 13px;
}

:is(.ops-app,.ops-login) button:not(.ops-map-marker):not(.ops-search-marker),.ops-sso a {
    transition:box-shadow .15s ease;
}

:is(.ops-app,.ops-login) button:enabled:hover,.ops-sso a:hover {
    background-color:var(--hover);
    border-color:var(--muted);
}

:is(.ops-app,.ops-login) button:enabled:active {
    box-shadow:inset 0 2px 4px #0002;
}

:is(.ops-app,.ops-login) button:disabled {
    opacity:.5;
    cursor:not-allowed;
    box-shadow:none;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
    outline:2px solid var(--focus);
    outline-offset:3px;
}

input,select {
    color:var(--text);
    background:var(--card);
    border:1px solid var(--border);
    border-radius:8px;
    padding:11px;
    min-width:0;
}

input::placeholder {
    color:var(--muted);
}

[hidden] {
    display:none!important;
}

h1,h2,p {
    margin:0;
}

h1 {
    font-size:22px;
    letter-spacing:-.6px;
}

h2 {
    font-size:21px;
}

.ops-muted {
    color:var(--muted);
}

.ops-eyebrow {
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    letter-spacing:1.8px;
}

.ops-wordmark {
    display:flex;
    align-items:center;
    gap:11px;
    font-size:14px;
    font-weight:750;
    letter-spacing:2px;
    text-decoration:none;
    white-space:nowrap;
}

.ops-mark {
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border:2px solid var(--accent);
    border-radius:10px;
    color:var(--accent);
    font-size:19px;
    letter-spacing:0;
}

.ops-app {
    height:100dvh;
    overflow:hidden;
}

.ops-header {
    height:70px;
    display:flex;
    align-items:center;
    gap:18px;
    padding:0 24px;
    border-bottom:1px solid var(--border);
    background:linear-gradient(110deg,var(--surface),var(--raised));
    box-shadow:var(--shell-shadow);
}

.ops-header nav {
    display:flex;
    gap:5px;
    margin-left:26px;
}

.ops-header nav button {
    border:0;
    background:transparent;
    color:var(--muted);
}

.ops-header nav .ops-nav-active {
    color:var(--text);
    background:var(--selected);
    box-shadow:inset 0 -2px var(--accent);
}

.ops-account {
    margin-left:auto;
    max-width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--muted);
}

.ops-workspace {
    height:calc(100dvh - 70px);
    display:grid;
    grid-template-columns:340px minmax(0,1fr);
}

.ops-sidebar {
    display:flex;
    flex-direction:column;
    min-height:0;
    background:var(--sidebar);
    border-right:1px solid var(--border);
}

.ops-sidebar-head {
    padding:25px 20px 18px;
    border-bottom:1px solid var(--border);
}

.ops-sidebar input {
    width:100%;
    font-size:12px;
}

.ops-filters {
    display:flex;
    gap:8px;
    margin-top:10px;
}

.ops-filters select {
    width:50%;
    font-size:12px;
    padding:8px;
}

.ops-device-list {
    flex:1;
    overflow:auto;
    padding:12px;
}

.ops-device {
    width:100%;
    text-align:left;
    margin-bottom:8px;
    padding:14px;
    background:transparent;
    border-color:transparent;
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto;
    gap:10px;
}

.ops-device:hover {
    background:var(--raised);
}

.ops-device[aria-pressed=true] {
    border-color:var(--accent);
    background:var(--raised);
}

.ops-device-symbol {
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    border-radius:9px;
    height:34px;
    color:var(--green);
}

.ops-device strong,.ops-device small {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ops-device small {
    font-size:11px;
    color:var(--muted);
    margin-top:3px;
}

.ops-device-speed {
    font-size:11px;
    text-align:right;
    color:var(--muted);
}

.ops-main {
    position:relative;
    min-width:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.ops-map-toolbar {
    min-height:60px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 24px;
    gap:12px;
}

.ops-map-toolbar>div {
    display:flex;
    align-items:center;
    gap:12px;
}

.ops-map-toolbar .ops-muted {
    font-size:12px;
}

.ops-live-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 4px #59d59a14;
}

.ops-connection {
    padding:7px 24px;
    font-size:11px;
    color:var(--muted);
    background:var(--raised);
    z-index:1;
}

.ops-connection[data-error=true] {
    color:var(--accent);
}

#map {
    flex:1;
    min-height:100px;
    background:var(--bg);
}

.ops-detail {
    background:transparent;
    border-top:1px solid var(--border);
    padding:18px 24px;
    box-shadow:var(--shadow);
}

.ops-detail-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.ops-detail-title button {
    font-size:24px;
    line-height:1;
    padding:4px 10px;
}

.ops-detail>p {
    font-size:12px;
    margin-top:3px;
}

.ops-detail-actions {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-evenly;
    gap:8px 0;
    margin:12px 0 14px;
}

.ops-detail-actions button {
    flex:0 0 44px;
    width:44px;
    height:44px;
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    padding:0;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--card);
    box-shadow:var(--card-shadow);
    color:var(--text);
}

.ops-detail-actions button i {
    font-size:16px;
}

.ops-detail-actions button:hover {
    border-color:var(--muted);
    background:var(--hover);
}

@media (pointer:coarse) {
    .ops-detail-actions button {
        flex-basis:48px;
        width:48px;
        height:48px;
    }
}

.ops-cards {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-top:15px;
}

.ops-card {
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    background:var(--card);
    box-shadow:var(--card-shadow);
    min-width:0;
}

.ops-card span,.ops-card small {
    display:block;
    color:var(--muted);
    font-size:11px;
}

.ops-card strong {
    display:block;
    font-size:18px;
    margin:5px 0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ops-card meter {
    width:100%;
    height:6px;
    accent-color:var(--green);
}

.ops-detail-foot {
    display:flex;
    justify-content:space-between;
    gap:10px;
    color:var(--muted);
    font-size:10px;
    margin-top:12px;
}

.ops-table-wrap {
    flex:1;
    overflow:auto;
    background:var(--card);
    margin:12px;
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:var(--card-shadow);
}

table {
    width:100%;
    border-collapse:collapse;
    text-align:left;
    font-size:12px;
}

th {
    color:var(--muted);
    font-weight:650;
    position:sticky;
    top:0;
    background:var(--raised);
}

td,th {
    padding:14px 18px;
    border-bottom:1px solid var(--border);
}

td button {
    border:0;
    padding:0;
    color:var(--text);
    background:transparent;
    text-align:left;
}

.ops-empty {
    padding:25px 12px;
    color:var(--muted);
    text-align:center;
}

.ops-sr-only {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
}

.ops-login {
    min-height:100dvh;
    display:grid;
    place-items:center;
    padding:24px;
    background:radial-gradient(ellipse at 20% 10%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 55%),radial-gradient(ellipse at 90% 90%,var(--selected),transparent 65%),var(--bg);
}

.ops-login.has-login-bg {
    background-size:cover;
    background-position:center;
}

.ops-login-card {
    width:100%;
    max-width:430px;
    padding:38px;
    background:var(--card);
    border:1px solid var(--border);
    border-top:3px solid var(--accent);
    border-radius:18px;
    box-shadow:var(--shadow);
}

.ops-login-brand {
    display:flex;
    justify-content:center;
    margin-bottom:28px;
}

.ops-login-card h1 {
    font-size:clamp(16px,4.6vw,20px);
    line-height:1.25;
    text-wrap:balance;
    margin:8px 0;
}

.ops-login-card form {
    margin-top:26px;
}

.ops-login-card form label {
    display:block;
    margin:15px 0 6px;
    font-size:12px;
}

.ops-login-card input {
    width:100%;
}

.ops-primary {
    background:var(--primary);
    color:var(--primary-ink);
    font-weight:700;
    border:0;
    width:100%;
    margin-top:24px;
    display:flex;
    justify-content:space-between;
    padding:12px 15px;
}

.ops-divider {
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--muted);
    font-size:11px;
    margin:23px 0 16px;
}

.ops-divider:before,.ops-divider:after {
    content:"";
    height:1px;
    flex:1;
    background:var(--border);
}

.ops-sso {
    display:flex;
    gap:12px;
}

.ops-sso a {
    flex:1;
    border:1px solid var(--border);
    border-radius:8px;
    text-align:center;
    padding:10px;
    text-decoration:none;
    font-size:12px;
}

.ops-logo {
    max-width:100px;
    max-height:34px;
    object-fit:contain;
}

.ops-login-brand .ops-logo {
    max-width:100%;
    max-height:80px;
}

#install-app {
    justify-content:center;
}

.ops-serial-info {
    display:block;
    width:36px;
    height:36px;
    margin:20px auto 0;
    padding:0;
    border-color:transparent;
    background:transparent;
    color:var(--muted);
}

#ops-serial-dialog {
    width:min(430px,calc(100% - 32px));
    padding:0;
    border:1px solid var(--border);
    border-radius:14px;
    color:var(--text);
    background:var(--card);
    box-shadow:var(--shadow);
}

#ops-serial-dialog::backdrop {
    background:#0b182c80;
    backdrop-filter:blur(4px);
}

.ops-serial-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 10px 10px 20px;
    border-bottom:1px solid var(--border);
    background:var(--raised);
}

.ops-serial-title h2 { margin:0; font-size:18px; }
.ops-serial-title button { width:36px; height:36px; padding:0; }
.ops-serial-body { padding:20px; }
.ops-serial-body > p:first-child { margin-top:0; color:var(--muted); }
#ops-serial-value {
    display:block;
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--raised);
    overflow-wrap:anywhere;
    user-select:all;
}
.ops-serial-actions { display:flex; gap:10px; margin-top:16px; }
.ops-serial-actions button { display:flex; align-items:center; gap:7px; }
.ops-serial-status { min-height:21px; margin:12px 0 0; color:var(--muted); }

@media (pointer:coarse) {
    .ops-serial-info { width:44px; height:44px; }
}

.ops-login-error {
    color:var(--danger);
    margin-top:16px;
}

.ops-passkey { width:100%; margin-top:12px; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--raised); color:var(--text); }
.ops-passkey[hidden] { display:none; }


/* Operations fills the viewport; telemetry never reduces the map height. */
.ops-app { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; width:100%; }
.ops-header { height:auto; min-height:48px; padding:5px 14px; gap:4px 12px; flex-wrap:wrap; }
.ops-header nav { margin:0; gap:2px; flex-wrap:wrap; min-width:0; }
.ops-header nav button { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; min-height:44px; white-space:nowrap; font-size:12px; color:var(--text); }
.ops-nav-icon { flex:none; width:18px; font-size:18px; line-height:1; text-align:center; }
.ops-header .ops-actions { margin-left:auto; }
.ops-platform { font-size:10px; min-width:0; max-width:100%; }
.ops-platform .tracking-platform-control { flex-wrap:wrap; max-width:calc(100% - 16px); }
.ops-platform .tracking-platform-selector { background:var(--raised)!important; }
.ops-workspace { position:relative; height:auto; min-height:0; min-width:0; grid-template-columns:280px minmax(0,1fr); }
.ops-sidebar { overflow:auto; }
.ops-sidebar-head { padding:14px 12px; }
#classic-picker { flex-shrink:0; padding:14px 12px; border-bottom:1px solid var(--border); margin-bottom:12px; background:linear-gradient(var(--surface),var(--sidebar)); }
#classic-search { position:relative; }
#classic-query { width:100%; min-width:0; min-height:44px; padding-left:44px; }
.ops-picker-locate { position:absolute; left:6px; top:6px; width:32px; height:32px; min-width:0; min-height:0; padding:0; border:0; border-radius:8px; background:transparent; color:var(--muted); display:grid; place-items:center; z-index:1; }
.ops-picker-locate:enabled:hover { background-color:var(--raised); color:var(--text); }
.ops-picker-locate:enabled:active { color:var(--primary); }
.ops-picker-locate:focus-visible { outline-offset:-2px; }
.ops-picker-locate:disabled { cursor:default; }
#classic-results { margin-top:6px; border:1px solid var(--border); border-radius:12px; background:var(--card); box-shadow:var(--card-shadow); overflow:hidden; }
#classic-options { max-height:min(280px, 40dvh); overflow:auto; overscroll-behavior:contain; }
.ops-picker-option { min-height:44px; padding:11px 12px; overflow-wrap:anywhere; cursor:pointer; }
.ops-picker-option[aria-selected=true] { font-weight:700; }
.ops-picker-option:hover { background:var(--raised); }
.ops-picker-option[data-active=true] { background:var(--primary); color:var(--primary-ink); }
#classic-empty { padding:12px; margin:0; color:var(--muted); }
#device-select { width:100%; }
.ops-device-list { flex:1 1 140px; min-height:100px; padding:8px; }
.ops-device { padding:9px; gap:7px; margin-bottom:3px; }
.ops-detail { padding:12px; box-shadow:none; flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; }
.ops-detail h2 { font-size:16px; }
.ops-detail .ops-eyebrow { display:none; }
.ops-cards { grid-template-columns:1fr; gap:8px; margin-top:10px; }
.ops-card { padding:9px 12px; }
.ops-card strong { font-size:16px; white-space:normal; }
.ops-card small { overflow-wrap:anywhere; }
.ops-detail-foot { flex-direction:column; }
.ops-main { min-height:0; }
/* Independent corner controls leave map gestures and Google attribution clear. */
.ops-map-controls { position:absolute; z-index:2; inset:10px 10px 5px 5px; pointer-events:none; }
.ops-map-actions { position:absolute; top:0; right:0; display:flex; gap:5px; }
#map-type { position:absolute; top:0; left:5px; max-width:calc(100% - 100px); }
.ops-map-controls button,.ops-map-controls select,.ops-map-controls input { pointer-events:auto; padding:7px 9px; font-size:12px; box-shadow:var(--shadow); background:var(--card); border-radius:10px; }
#place-search { position:absolute; left:0; bottom:0; display:flex; gap:5px; width:300px; max-width:calc(100% - 60px); min-width:0; }
#place-query { width:0; min-width:0; flex:1; }
#place-search button { flex:none; }
@media(max-width:1100px) { .ops-map-actions { flex-direction:column; } }
#map { min-height:0; isolation:isolate; }
.ops-footer { display:flex; align-items:center; gap:12px; padding:5px 12px; background:linear-gradient(var(--surface),var(--raised)); border-top:1px solid var(--border); font-size:11px; }
.ops-footer>div { display:flex; gap:3px; }
.ops-footer button { padding:5px 8px; font-size:11px; border-color:transparent; white-space:nowrap; }
.ops-footer-actions { margin-left:auto; }
#connection-status { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#connection-status[data-error=true] { color:var(--danger); }
button[aria-pressed=true] { background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }
/* Sidebar and user-menu selection must remain readable with any account brand accent. */
:is(.ops-view-switch,#user-menu) button[aria-pressed] { color:var(--text); background:var(--surface); border:1px solid var(--border); }
:is(.ops-view-switch,#user-menu) button[aria-pressed=true] { color:var(--surface); background:var(--text); border-color:var(--text); }
:is(.ops-view-switch,#user-menu) button[aria-pressed]:hover { border-color:var(--text); text-decoration:underline; text-underline-offset:3px; }
:is(.ops-view-switch,#user-menu) button[aria-pressed]:focus-visible { outline:2px solid var(--text); outline-offset:2px; }
#ops-dialog { width:min(660px,calc(100% - 24px)); max-height:85dvh; border:1px solid var(--border); border-radius:12px; color:var(--text); background:var(--surface); padding:0; overflow:hidden; box-shadow:var(--shadow); }
#ops-dialog[open] { display:flex; flex-direction:column; }
#ops-dialog::backdrop { background:#0b182c80; backdrop-filter:blur(4px); }
.ops-dialog-title { display:flex; flex:0 0 40px; align-items:center; justify-content:space-between; gap:12px; padding:0 8px 0 20px; background:var(--raised); border-bottom:1px solid var(--border); cursor:grab; touch-action:none; user-select:none; }
.ops-dialog-title h2 { margin:0; font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#dialog-close { flex:0 0 32px; min-width:32px; min-height:32px; width:32px; height:32px; padding:0; }
#ops-dialog.ops-dialog-dragging .ops-dialog-title { cursor:grabbing; }
.ops-dialog-body { min-height:0; overflow:auto; padding:20px; }
#ops-dialog:has(.ops-camera) { width:min(960px,calc(100% - 24px)); }
.ops-camera-channels { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; }
.ops-camera-channels button { flex:0 0 auto; border-radius:24px; }
.ops-camera [role=status]:empty { display:none; }
.ops-camera-player iframe { display:block; width:100%; aspect-ratio:16/9; border:0; background:#000; }
.ops-camera-empty { text-align:center; padding:60px 12px; color:var(--muted); }
@media (max-width:700px) {
    #ops-dialog:has(.ops-camera) { position:fixed; inset:0; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; border-radius:0; transform:none; }
    #ops-dialog:has(.ops-camera) .ops-dialog-title { cursor:default; padding-top:env(safe-area-inset-top); }
    #ops-dialog:has(.ops-camera) .ops-dialog-body { padding:12px; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
}
#dialog-status { color:var(--muted); margin-bottom:12px; }
#dialog-status:empty { display:none; }
#dialog-content form { display:grid; gap:12px; }
#dialog-content label { display:grid; gap:5px; }
.ops-push-types { display:grid; gap:4px; margin-top:16px; }
#dialog-content .ops-push-types label { display:flex; align-items:center; gap:10px; min-height:32px; cursor:pointer; }
#dialog-content .ops-push-types input { order:-1; width:16px; height:16px; min-height:16px; flex-shrink:0; accent-color:var(--primary); }
#dialog-content .ops-push-actions .ops-primary { width:auto; justify-content:center; }
@media (pointer:coarse) { #dialog-content .ops-push-types label { min-height:44px; } }
#dialog-content textarea { width:100%; min-height:100px; color:var(--text); background:var(--raised); }
#dialog-content button { margin:4px 4px 4px 0; }
.ops-cmd-search { position:sticky; top:-20px; background:var(--surface); padding-bottom:8px; z-index:1; }
#dialog-content .ops-cmd-search input { width:100%; box-sizing:border-box; }
.ops-cmd-list { display:flex; flex-wrap:wrap; }
.ops-cmd-empty { color:var(--muted); }
#dialog-content form > .ops-primary { width:auto; justify-content:center; }
#dialog-content .ops-dialog-row { border-bottom:1px solid var(--border); padding:8px 0; }
/* Responsive navigation and an overlaid fleet drawer. */
button,select,input,.ops-sso a { min-height:44px; }
button { min-width:44px; }
/* Header menus sit above workspace panels and controls. */
.ops-header { position:relative; z-index:8; flex-wrap:nowrap; padding-top:max(8px,env(safe-area-inset-top)); padding-left:max(12px,env(safe-area-inset-left)); padding-right:max(12px,env(safe-area-inset-right)); }
.ops-mobile-only { display:none; }
.ops-user { margin-left:auto; position:relative; display:flex; gap:6px; align-items:center; }
#user-toggle, #help-toggle { display:grid; place-items:center; }
#user-menu { position:absolute; right:0; top:calc(100% + 8px); width:210px; max-height:calc(100dvh - 100px); overflow:auto; display:grid; padding:8px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); }
#user-menu button { text-align:left; border:0; }
.ops-sidebar { min-width:0; overflow:hidden; }
#fleet-view-slot { flex-shrink:0; }
.ops-detail { overflow-wrap:anywhere; }
.ops-view-switch { flex-shrink:0; padding:3px; border:1px solid var(--border); border-radius:12px; background:var(--sidebar); box-shadow:inset 0 1px 2px #00000008; }
.ops-view-switch button { min-height:28px; border-radius:8px; font-weight:600; }
.ops-card-heading { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.ops-card-heading span { min-width:0; }
.ops-card-heading small { margin-left:auto; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Classic telemetry stays stacked in the desktop sidebar and mobile drawer. */
.ops-detail { border-top:0; padding-top:0; }
.ops-detail .ops-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:0; }
.ops-detail .ops-card { grid-column:1 / -1; border-radius:12px; box-shadow:var(--card-shadow); padding:11px 12px; }
.ops-detail .ops-direction-card { grid-column:auto; }
.ops-detail .ops-card > span { font-size:12px; }
.ops-detail .ops-card i { color:var(--muted); margin-right:5px; font-size:11px; }
.ops-detail .ops-card strong { font-weight:650; letter-spacing:-.25px; margin:4px 0 0; font-size:14px; overflow-wrap:anywhere; }
.ops-detail .ops-reading-card strong { font-size:20px; }
.ops-detail .ops-card > small { color:var(--text); font-size:12px; line-height:1.35; }
.ops-detail #detail-gps-info,.ops-detail #detail-charge { color:var(--muted); font-size:11px; }
.ops-detail .ops-card > small:empty { display:none; }
.ops-detail .ops-status-reading { display:flex; align-items:center; gap:6px; }
.ops-detail .ops-status-reading i { margin:0; }
.ops-detail .ops-status-reading strong { margin:0; flex:1; min-width:0; font-size:13px; }
.ops-detail #detail-speed { flex-shrink:0; color:var(--text); font-size:13px; font-weight:650; font-variant-numeric:tabular-nums; }
.ops-detail .ops-status-card[data-moving=true] :is(i,#detail-speed) { color:var(--green); }
.ops-detail .ops-status-rail { height:6px; border-radius:999px; background:var(--status-color, var(--border)); margin-top:9px; }
.ops-detail .ops-status-card[data-moving=true] .ops-status-rail { background:var(--status-color, var(--green)); }
.ops-detail meter { display:block; height:7px; margin-top:10px; border:0; border-radius:999px; background:var(--border); }
.ops-detail meter::-webkit-meter-bar { height:7px; border:0; border-radius:999px; background:var(--border); }
.ops-detail meter::-webkit-meter-optimum-value { background:var(--green); border-radius:999px; }
.ops-detail meter::-moz-meter-bar { background:var(--green); border-radius:999px; }
#fleet-content { display:flex; flex-direction:column; flex:1; min-height:0; min-width:0; overflow:hidden; }
.ops-device-list { min-height:0; overflow:visible; }
.ops-sidebar.is-list #list-controls { flex-shrink:0; }
.ops-sidebar.is-list #device-list { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.ops-footer { padding-bottom:max(5px,env(safe-area-inset-bottom)); }
#connection-status { white-space:normal; }
.ops-table-wrap { min-height:0; overscroll-behavior:contain; }
.ops-table-wrap table { min-width:1050px; }
#ops-dialog { max-height:min(85dvh,calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
.ops-dialog-body { overscroll-behavior:contain; }
#dialog-content { overflow-wrap:anywhere; }
@media(max-width:1000px) {
    #nav-toggle { display:block; }
    .ops-header #fleet-nav { display:none; position:absolute; left:8px; top:100%; width:min(300px,calc(100vw - 16px)); max-height:calc(100dvh - 100px); overflow:auto; padding:10px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); }
    .ops-header #fleet-nav.is-open { display:grid; }
    #fleet-nav button { text-align:left; }
    .ops-platform { max-width:40vw; }
}
@media(max-width:700px) {
    input,select { font-size:16px!important; }
    .ops-platform { display:none; }
    .ops-workspace { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
    .ops-main { grid-row:1; }
    .ops-sidebar { position:absolute; z-index:7; inset:0 auto 0 0; width:min(360px,calc(100% - 48px)); box-shadow:var(--shadow); visibility:hidden; }
    .ops-sidebar.is-expanded { visibility:visible; }
    .ops-fleet-tab { position:absolute; z-index:4; left:0; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; padding:14px 8px; border-radius:0 16px 16px 0; border-left:0; box-shadow:var(--shadow); font-size:11px; }
    .ops-fleet-tab > .fa-solid { font-size:14px; line-height:1; color:var(--accent); }
    /* The tab is the drawer's close control: it rides on the open drawer's right edge with the chevron turned. */
    .ops-fleet-tab[aria-expanded=true] { left:min(360px,calc(100% - 48px)); z-index:8; }
    .ops-fleet-tab[aria-expanded=true] > .fa-solid { transform:rotate(180deg); }
    #fleet-content { flex:1; }
    #fleet-view-slot { padding:8px 12px; border-top:1px solid var(--border); }
    #fleet-view-slot .ops-view-switch { display:flex; gap:8px; }
    #fleet-view-slot button { flex:1; min-height:44px; }
    .ops-sidebar-head { padding:10px; }
    .ops-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ops-footer { min-height:32px; font-size:11px; padding-left:max(12px,env(safe-area-inset-left)); padding-right:max(12px,env(safe-area-inset-right)); }
    .ops-login { padding:16px; }
    .ops-login-card { padding:24px; }
}

/* Three aligned telemetry lines, followed by independent device actions. */
.ops-device-row { border:1px solid var(--border); border-left:6px solid var(--status-color, var(--muted)); border-radius:12px; background:var(--card); box-shadow:var(--card-shadow); margin-bottom:8px; padding:4px 3px 8px; }
.ops-device-row[data-selected=true] { border-top-color:var(--muted); border-right-color:var(--muted); border-bottom-color:var(--muted); background:var(--selected); }
.ops-device { grid-template-columns:22px minmax(0,1fr) minmax(90px,auto); gap:7px; padding:7px 4px; margin:0; border:0; border-radius:4px; color:var(--text); }
.ops-device[aria-pressed=true] { color:var(--text); background:transparent; }
.ops-device-symbol { box-sizing:border-box; width:18px; height:18px; margin-top:1px; border:2px solid #fff; border-radius:50%; background:var(--muted); color:#fff; box-shadow:0 1px 4px #0003; font-size:12px; line-height:14px; }
.ops-device-label,.ops-device-speed { min-width:0; }
.ops-device strong,.ops-device small { height:20px; line-height:20px; margin:0; }
.ops-device strong { font-size:12px; }
.ops-device-speed { max-width:110px; }
.ops-device-speed strong { font-size:11px; }
.ops-device .ops-device-heading { overflow:visible; white-space:nowrap; }
.ops-device-power { display:flex!important; align-items:center; justify-content:flex-end; gap:5px; }
.ops-device-power[data-level=low] { color:#ee6868; }
.ops-device-power[data-level=medium] { color:#e5b34d; }
.ops-device-power[data-level=high] { color:var(--green); }
.ops-device-power[data-level=charging] { color:#60acff; }
:root[data-theme=light] .ops-device-power[data-level=low] { color:#c42d39; }
:root[data-theme=light] .ops-device-power[data-level=medium] { color:#916000; }
:root[data-theme=light] .ops-device-power[data-level=charging] { color:#176dcc; }
.ops-battery-icon { display:inline-flex; align-items:center; justify-content:center; gap:3px; flex-shrink:0; min-width:24px; height:18px; font-size:16px; }
.ops-battery-charge { font-size:12px; }
.ops-device-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.ops-device-actions button { flex:1 1 64px; min-height:32px; padding:5px 8px; font-size:10px; font-weight:600; line-height:20px; min-width:min-content; border-radius:999px; background:var(--raised); border-color:var(--border); white-space:nowrap; }
.ops-device-actions button:hover { border-color:var(--muted); background:var(--hover); }
@media (pointer:coarse) { .ops-device-actions button { min-height:44px; } }
#dialog-content fieldset { min-width:0; display:grid; gap:10px; border:1px solid var(--border); border-radius:8px; }
.ops-usage { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.ops-usage-entry { display:flex; align-items:center; gap:4px; }
#dialog-content .ops-usage-entry input { width:100%; min-width:0; box-sizing:border-box; padding:6px; }
#dialog-content .ops-usage-eye { flex-shrink:0; min-width:28px; min-height:36px; padding:4px; border:0; background:transparent; }
#dialog-content .ops-usage-caption { display:block; text-align:center; font-size:12px; margin-top:6px; }
.ops-usage-result { white-space:pre-line; }
/* Zones panel and map editor share the active Operations theme. */
.ops-zones-panel {position:absolute;z-index:5;inset:0 0 0 auto;width:340px;max-width:100%;background:var(--sidebar);border-left:1px solid var(--border);box-shadow:var(--shadow);overflow:auto;animation:ops-zone-slide .2s ease-out}
.ops-zones-panel.is-closing {animation:ops-zone-close .2s ease-in forwards;pointer-events:none}
.ops-table-wrap {animation:ops-dmc-slide .18s ease-out}
.ops-table-wrap.is-closing {position:absolute;inset:0;z-index:7;animation:ops-dmc-close .18s ease-in forwards;pointer-events:none}
.ops-zones-heading {background:linear-gradient(var(--surface),var(--raised));display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}
.ops-zones-heading h2 {font-size:14px;margin:0;display:flex;align-items:center;gap:10px}
.ops-zones-heading h2>.fa-solid {color:var(--muted)}
.ops-zones-heading small,.ops-zone-count {background:var(--raised);border-radius:12px;padding:1px 6px;color:var(--muted);font-size:11px}
.ops-zones-actions {display:flex;justify-content:space-between;padding:12px 16px;gap:8px}
#zones-status {padding:0 16px;color:var(--muted)}
#zones-status:empty {display:none}
.ops-zone-row {display:flex;align-items:center;gap:8px;padding:10px;margin:0 12px 10px;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--card-shadow)}
.ops-zone-icon {display:grid;place-items:center;flex:0 0 30px;height:30px;background:var(--raised);border:1px solid var(--border);border-radius:8px;font-size:16px}
.ops-zone-select {text-align:left;flex:1;min-width:0;padding:0;border:0;background:transparent}
.ops-zone-select strong,.ops-zone-select small {display:block;overflow-wrap:anywhere}
.ops-zone-select strong {font-size:12px;font-weight:600}.ops-zone-select small {font-size:11px;color:var(--muted)}
.ops-zone-icon-button {padding:6px;min-width:30px;min-height:34px;border:0;color:var(--muted);background:transparent}
.ops-zone-primary {background:var(--primary);color:var(--primary-ink);border-color:var(--primary);font-weight:600}
.ops-zone-toolbar {position:absolute;z-index:6;bottom:36px;left:50%;transform:translateX(-50%);max-width:calc(100% - 100px);width:max-content;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:12px 16px;border-radius:14px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow)}
.ops-zone-toolbar button {white-space:nowrap}.ops-zone-toolbar [aria-pressed=true] {color:var(--primary-ink);border-color:var(--primary);background:var(--primary)}
.ops-zone-measure {display:flex;align-items:center;gap:12px}.ops-zone-measure label {display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.ops-zone-measure input {width:88px;min-width:0;padding:5px;color:var(--text);font-weight:700}.ops-zone-points {color:var(--text)}
.ops-zone-hint {font-size:11px;max-width:225px}
.ops-zones-open .ops-map-controls,.ops-routing-open .ops-map-controls {right:350px}
.ops-zone-setup {display:flex;flex-direction:column;gap:16px}.ops-zone-setup>label {display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600}
:is(.ops-zone-tabs,.ops-tabs) {display:flex;gap:4px;border-bottom:1px solid var(--border)}
:is(.ops-zone-tabs,.ops-tabs) button {flex:1;padding:10px 6px;border:0;border-radius:0;background:transparent;color:var(--muted);font-size:12px;border-bottom:2px solid transparent}
:is(.ops-zone-tabs,.ops-tabs) [aria-selected=true] {color:var(--text);background:var(--selected);border-bottom-color:var(--text);font-weight:650}
.ops-zone-page {min-height:215px;display:flex;flex-direction:column;gap:12px}
.ops-zone-page label {display:flex;align-items:center;gap:10px;font-size:12px}.ops-zone-page label:has(input[type=search]) {flex-direction:column;align-items:stretch}
.ops-zone-page input[type=checkbox] {width:15px;height:15px;accent-color:var(--primary);margin:0;flex-shrink:0}
.ops-zone-devices {max-height:230px;overflow:auto;border:1px solid var(--border);border-radius:8px;padding:6px 12px}.ops-zone-devices label {padding:8px 0}
.ops-zone-swatch-heading {font-size:12px;font-weight:600}
.ops-zone-swatches {display:flex;flex-wrap:wrap;gap:10px}
.ops-zone-swatch {flex:0 0 32px;width:32px;height:32px;min-width:0;min-height:0;padding:0;line-height:0;border-radius:50%;border:2px solid var(--border);background:var(--swatch);box-shadow:inset 0 0 0 2px var(--surface)}
.ops-zone-swatch:hover {background:var(--swatch);border-color:var(--text)}
.ops-zone-swatch[aria-checked=true] {border-color:var(--text);box-shadow:inset 0 0 0 2px var(--surface),0 0 0 2px var(--text)}
.ops-zone-swatch:focus-visible {outline:2px solid var(--text);outline-offset:3px}
.ops-zone-icon {background:color-mix(in srgb,var(--zone-tint,var(--raised)) 18%,var(--raised))}
.ops-zone-range {display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 0;border-bottom:1px solid var(--border);margin-bottom:12px}
.ops-zone-range label {flex-direction:column;align-items:stretch}.ops-zone-range input,.ops-zone-range select {width:100%;min-width:0}
.ops-zone-dialog-actions {display:flex;justify-content:flex-end;gap:10px}.ops-zone-dialog-actions button:first-child {margin-right:auto}
@keyframes ops-zone-slide {from {transform:translateX(100%);opacity:0} to {transform:translateX(0);opacity:1}}
@keyframes ops-zone-close {from {transform:translateX(0);opacity:1} to {transform:translateX(100%);opacity:0}}
@keyframes ops-dmc-slide {from {transform:translateX(100%)} to {transform:translateX(0)}}
@keyframes ops-dmc-close {from {transform:translateX(0)} to {transform:translateX(100%)}}
@media (max-width:1000px) {.ops-zones-open .ops-map-controls,.ops-routing-open .ops-map-controls {visibility:hidden}}
@media (max-width:700px) {.ops-zones-panel {width:min(340px,100%)}.ops-zone-toolbar {max-width:calc(100% - 24px);bottom:28px;padding:10px;gap:8px}.ops-zone-hint {max-width:none;flex-basis:100%;text-align:center;order:2}.ops-zone-dialog-actions {gap:6px}.ops-zone-dialog-actions button {padding:8px 10px}}
@media (prefers-reduced-motion:reduce) {.ops-zones-panel,.ops-table-wrap,.ops-zones-panel.is-closing,.ops-table-wrap.is-closing {animation:none}}
.ops-routing-panel {color:var(--text)}
#routing-form {display:grid;gap:14px;padding:16px}
.ops-route-picker {position:relative;min-width:0}
.ops-route-picker label {display:block;margin-bottom:6px;font-weight:600}
.ops-route-picker input {width:100%;min-width:0}
.ops-route-results {position:absolute;top:100%;left:0;right:0;z-index:6;max-height:240px;overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow)}
.ops-route-option-heading {padding:8px 10px;color:var(--muted);font-size:11px}
.ops-route-option {padding:10px;cursor:pointer;overflow-wrap:anywhere}
.ops-route-option:hover,.ops-route-option[aria-selected=true] {background:var(--selected);color:var(--text)}
#routing-go {min-height:40px}
#routing-status {margin:0 16px 12px;color:var(--muted);overflow-wrap:anywhere}
.ops-route-summary {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 16px 14px}
.ops-route-tile {display:flex;flex-direction:column;gap:5px;text-align:center;padding:12px 8px;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--card-shadow);overflow-wrap:anywhere;min-width:0}
.ops-route-tile span {font-size:10px;text-transform:uppercase;color:var(--muted);font-weight:700}
.ops-route-tile strong {font-size:15px}
#routing-steps {display:grid;gap:8px;list-style:none;margin:0;padding:0 16px 16px}
.ops-route-step {display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--card);box-shadow:var(--card-shadow)}
.ops-route-step>img {width:20px;height:24px;object-fit:contain}
.ops-route-step>.fa-solid {font-size:19px;color:var(--muted);margin-top:2px}
.ops-route-step p {margin:0 0 6px;overflow-wrap:anywhere;line-height:1.4}
.ops-route-chips {display:flex;flex-wrap:wrap;gap:5px}
.ops-route-chips span {border:1px solid var(--border);border-radius:20px;padding:1px 7px;background:var(--raised);font-size:11px;font-weight:600}
#dialog-content.ops-zone-setup label {display:flex;gap:10px}
#dialog-content.ops-zone-setup>label {flex-direction:column;gap:4px}
#dialog-content.ops-zone-setup button {margin:0}
#dialog-content.ops-zone-setup input[type=checkbox] {min-height:15px}
#ops-dialog:has(.ops-zone-setup) {width:min(500px,calc(100% - 24px))}
#dialog-content.ops-zone-setup input[type=checkbox] {order:-1}

/* Selected-device drawer: content height, anchored at the map's right edge. */
.ops-device-tab {position:absolute;z-index:4;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;border-radius:16px 0 0 16px;background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--border);border-right:0;font-size:11px}
.ops-device-tab > .fa-solid {font-size:14px;line-height:1;color:var(--accent)}
.ops-photo-panel {position:absolute;z-index:6;right:0;top:50%;transform:translateY(-50%);width:330px;max-width:calc(100% - 16px);max-height:calc(100% - 24px);overflow:auto;overscroll-behavior:contain;padding:18px;background:var(--surface);border:1px solid var(--border);border-right:0;border-radius:16px 0 0 16px;box-shadow:var(--shadow)}
.ops-photo-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.ops-photo-heading small {font-size:10px;letter-spacing:.12em;color:var(--muted)}
.ops-photo-heading h2 {font-size:17px;margin:3px 0 0;overflow-wrap:anywhere}
.ops-photo-heading button {flex-shrink:0;font-size:22px}
.ops-photo-stage {height:190px;border:1px solid var(--border);border-radius:12px;background:var(--raised);display:grid;place-items:center;overflow:hidden;text-align:center}
.ops-photo-stage img {width:100%;height:100%;object-fit:contain;min-height:0}
.ops-photo-stage p {font-size:13px;color:var(--muted);padding:12px;margin:0}
.ops-photo-stage p:empty {display:none}
.ops-photo-nav {display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.ops-photo-nav button {min-width:44px;font-size:14px}
.ops-photo-nav span {color:var(--muted);font-size:12px}
.ops-photo-open { display:block; width:100%; height:100%; min-width:0; min-height:0; padding:0; border:0; border-radius:0; background:transparent; cursor:zoom-in }
.ops-app .ops-photo-open:enabled:hover { background:transparent; border-color:transparent; box-shadow:none }
.ops-photo-open img { display:block }
.ops-dropzone { margin-top:14px; border:2px dashed var(--border); border-radius:12px; background:var(--raised); transition:border-color .15s ease,background-color .15s ease }
.ops-dropzone.is-dragover { border-color:var(--accent); background:var(--hover) }
.ops-dropzone.is-busy { opacity:.6; pointer-events:none }
.ops-dropzone-label { display:grid; justify-items:center; gap:4px; padding:14px 12px; text-align:center; cursor:pointer; font-size:13px }
.ops-dropzone-label i { font-size:20px; color:var(--accent) }
.ops-dropzone-label strong { font-weight:600 }
.ops-dropzone-label span { font-size:12px; color:var(--muted) }
.ops-dropzone-label small { font-size:11px; color:var(--muted) }
.ops-dropzone:has(input:focus-visible) { outline:2px solid var(--text); outline-offset:2px }
.ops-files { margin-top:14px }
.ops-files h3 { margin:0 0 6px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.ops-files ul { list-style:none; margin:0; padding:0; display:grid; gap:6px }
.ops-file { display:flex; align-items:center; gap:10px; width:100%; min-width:0; text-align:left; padding:8px 10px; border-radius:10px; background:var(--raised); font-size:13px }
.ops-file i { flex-shrink:0; width:18px; text-align:center; color:var(--accent) }
.ops-file span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ops-file small { flex-shrink:0; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums }
.ops-dialog-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:12px }
.ops-lightbox { width:100vw; height:100dvh; max-width:100vw; max-height:100dvh; margin:0; padding:0; border:0; background:transparent; color:#fff }
.ops-lightbox[open] { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center }
.ops-lightbox::backdrop { background:#000000e6 }
.ops-lightbox figure { margin:0; min-width:0; height:100%; display:grid; grid-template-rows:minmax(0,1fr) auto; place-items:center; gap:8px; padding:max(60px,env(safe-area-inset-top)) 4px max(16px,env(safe-area-inset-bottom)) }
.ops-lightbox img { max-width:100%; max-height:100%; object-fit:contain; border-radius:8px }
.ops-lightbox figcaption { display:flex; gap:12px; font-size:13px; color:#fff; min-height:18px }
.ops-lightbox figcaption span:empty { display:none }
.ops-lightbox button { width:44px; height:44px; min-width:44px; min-height:44px; padding:0; margin:8px; display:grid; place-items:center; border-radius:999px; border:1px solid #ffffff40; background:#ffffff26; color:#fff; font-size:18px }
.ops-app .ops-lightbox button:enabled:hover { background:#ffffff40; border-color:#fff }
.ops-lightbox button[hidden] { display:none }
#lightbox-close { position:fixed; top:max(8px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right)); z-index:1 }
#device-photo-upload-status {font-size:12px;overflow-wrap:anywhere}
#device-photo-upload-status:empty {display:none}
.ops-photo-subscription {display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:space-between;background:var(--raised);border:1px solid var(--border);border-radius:10px;padding:12px;margin-top:16px;font-size:12px}
.ops-photo-subscription span {color:var(--muted)}
.ops-photo-subscription + .ops-photo-subscription {margin-top:8px}
.ops-photo-refresh {display:block;margin:12px 0 0 auto;font-size:12px}
button.ops-search-marker {
    position:absolute; z-index:1000000; display:block; width:36px; height:42px;
    min-width:0; padding:0; margin:0; border:0; border-radius:0;
    background:transparent; color:var(--text); overflow:visible; cursor:pointer;
    transform:translate(-50%,-100%); font:13px/1.4 Arial,sans-serif;
}
.ops-search-pin {
    position:relative; display:flex; align-items:center; justify-content:center;
    box-sizing:border-box; width:36px; height:36px; border:3px solid #fff; border-radius:50%;
    background:var(--card); color:var(--text); box-shadow:0 2px 6px #0006,inset 0 0 0 2px var(--accent);
}
.ops-search-pin::after {
    content:''; position:absolute; top:31px; left:10px;
    border:5px solid transparent; border-top:7px solid #fff; border-bottom:0;
}
.ops-search-card {
    display:none; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
    box-sizing:border-box; width:max-content; max-width:min(320px,calc(100vw - 32px));
    padding:10px 12px; border:1px solid var(--border); border-radius:10px;
    background:var(--card); color:var(--text); box-shadow:var(--card-shadow);
    text-align:left; white-space:normal; overflow-wrap:anywhere;
}
.ops-search-card span { display:block; }
.ops-search-card span:first-child { font-weight:700; margin-bottom:5px; }
.ops-search-marker:is(:hover,:focus-visible,.is-open) .ops-search-card { display:block; }
.ops-search-marker:focus-visible .ops-search-pin { outline:2px solid var(--focus); outline-offset:3px; }
/* The coordinate anchors the visual centre; the status/name pill sits below it. */
button.ops-map-marker {
    position:absolute; display:flex; flex-direction:column; align-items:center;
    width:65px; min-width:0; height:auto; padding:0; margin:0; border:0;
    background:transparent; color:#555; overflow:visible; cursor:pointer;
    transform:translate(-50%,-15px); font:700 13px/18px Arial,sans-serif;
}
.ops-map-marker:hover { background:transparent; }
.ops-map-marker.has-image { transform:translate(-50%,-24px); }
.ops-map-marker [hidden] { display:none; }
.ops-marker-visual { width:65px; height:30px; display:flex; align-items:center; justify-content:center; }
.has-image .ops-marker-visual { height:48px; }
/* Keep the status halo white across selection states and themes. */
.ops-marker-circle { width:26px; height:26px; box-sizing:border-box; border:3px solid #fff; border-radius:50%; box-shadow:0 1px 4px #0008; }
.ops-marker-image { width:65px; height:48px; object-fit:contain; }
.ops-marker-pill {
    display:inline-flex; align-items:stretch; white-space:nowrap;
    max-width:min(300px, calc(100vw - 32px)); border-radius:5px;
    /* Keep the pressed-plate depth while communication animates the name's shadow. */
    box-shadow:0 2px 3px #0006, 0 1px 1px #0003;
}
.ops-marker-cap { display:inline-flex; flex:0 0 24px; box-sizing:border-box; align-items:center; justify-content:center; background:linear-gradient(180deg,#fff 0%,#fff 45%,#e9edf1 100%); border:1px solid #999; border-radius:5px 0 0 5px; box-shadow:inset 0 1px 0 #fff, inset 0 -1px 1px #0002; }
.ops-marker-cap i { display:inline-block; font-family:'Font Awesome 6 Pro','Font Awesome 6 Free'; font-weight:900; font-style:normal; font-size:12px; line-height:1; transform-origin:center; transition:transform .3s ease; }
.ops-marker-name { min-width:0; overflow:hidden; text-overflow:ellipsis; padding:2px 6px; border:1px solid #999; border-radius:5px; background:linear-gradient(180deg,#fff 0%,#f5f6f8 45%,#dce1e6 100%); box-shadow:inset 0 1px 0 #fffc, inset 0 -1px 2px #0003; text-shadow:0 1px 0 #fff9; }
.ops-marker-cap:not([hidden]) + .ops-marker-name { border-left:0; border-radius:0 5px 5px 0; }
.ops-map-marker.is-selected .ops-marker-name { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); text-shadow:none; box-shadow:inset 0 -1px 2px #0003; animation:ops-marker-selected 1.3s ease-in-out infinite; }
@keyframes ops-marker-selected {
    0%,100% { box-shadow:inset 0 -1px 2px #0003, 0 0 0 0 transparent; }
    50% { box-shadow:inset 0 -1px 2px #0003, 0 0 11px 4px color-mix(in srgb,var(--accent) 70%,transparent); }
}
.ops-map-marker:focus-visible .ops-marker-pill { outline:2px solid var(--focus); outline-offset:3px; }

.ops-map-popup { position:fixed; z-index:1200; pointer-events:none; transform:translate(-50%,-100%); background:var(--card); color:var(--text); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:8px; width:330px; max-width:calc(100vw - 24px); padding:10px; overflow-wrap:anywhere; }
.ops-map-popup.is-below { transform:translate(-50%,0); }
.ops-pop-head { display:flex; align-items:flex-start; gap:8px; }
.ops-pop-icon { flex:none; font-size:20px; margin-top:3px; }
.ops-pop-headtext { flex:1; min-width:0; }
.ops-pop-name { font-weight:700; line-height:1.25; }
.ops-pop-status,.ops-pop-driver,.ops-pop-addr { font-size:12px; }
.ops-pop-time { flex:0 1 105px; text-align:right; font-size:10px; color:var(--muted); }
.ops-pop-driver { margin-top:6px; font-weight:600; }
.ops-pop-addr { margin-top:6px; color:var(--muted); }
.ops-pop-stats { display:flex; gap:6px; margin-top:8px; }
.ops-pop-stat { flex:1; min-width:0; padding:6px; text-align:center; border-radius:6px; background:color-mix(in srgb,var(--primary) 7%,var(--card)); }
.ops-pop-stat .v { font-size:13px; font-weight:700; }
.ops-pop-stat .vsub { font-size:11px; color:var(--muted); }
.ops-pop-stat .k { font-size:10px; color:var(--muted); }
.ops-pop-tacho-line { display:flex; justify-content:space-between; gap:10px; font-size:12px; }
.ops-pop-tacho-line span { color:var(--muted); }
@media (prefers-reduced-motion:no-preference) {
    .ops-map-popup { animation:ops-popup-in .12s ease-out; }
    @keyframes ops-popup-in { from { opacity:0; } to { opacity:1; } }
}
@media (prefers-reduced-motion:reduce) {
    .ops-marker-cap i { transition:none; }
    .ops-map-marker.is-selected .ops-marker-name { animation:none; }
}

/* Classic history has its own scroll column; smaller screens use a dismissible drawer. */
.ops-history-form { border-top:1px solid var(--border); margin-top:12px; padding-top:12px; display:grid; gap:10px; }
.ops-history-form h3 { margin:0; font-size:12px; text-transform:uppercase; letter-spacing:1px; }
.ops-history-form small { color:var(--muted); font-size:11px; }
.ops-history-range { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ops-history-range > div { display:grid; gap:5px; min-width:0; }
.ops-history-range label { font-size:11px; color:var(--muted); }
.ops-history-range input { width:100%; min-width:0; padding:7px 4px; font-size:12px; }
#history-load { background:var(--primary); color:var(--primary-ink); min-height:40px; }
#history-status:empty { display:none; }
#history-status { margin:0; font-size:12px; }
.ops-map-loading { position:absolute; inset:0; z-index:3; display:grid; place-items:center; pointer-events:none; }
.ops-map-loading[hidden] { display:none; }
.ops-map-loading i { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--card); color:var(--text); border:1px solid var(--border); box-shadow:var(--shadow); font-size:22px; }
.ops-map-loading i::before { animation:ops-spin 1s linear infinite; }
@keyframes ops-spin { to { transform:rotate(360deg); } }
.ops-workspace.ops-history-open { grid-template-columns:280px 300px minmax(0,1fr); }
.ops-history-panel { min-width:0; min-height:0; display:flex; flex-direction:column; gap:6px; padding:6px 12px 8px; background:var(--sidebar); border-right:1px solid var(--border); overflow:hidden; }
.ops-history-heading { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px; }
.ops-history-heading > div { min-width:0; overflow-wrap:anywhere; }
.ops-history-heading h2 { margin:0 0 2px; font-size:16px; }
.ops-history-heading button { flex-shrink:0; min-width:40px; min-height:40px; }
.ops-history-panel p { margin:0; font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.ops-history-panel > :not(#history-points) { flex-shrink:0; }
#history-content { display:flex; flex-direction:column; gap:4px; min-height:0; flex:1; }
#history-content[hidden] { display:none; }
.ops-history-toolbar { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:4px; }
.ops-history-toolbar #history-range { grid-column:1 / -1; }
.ops-history-toolbar #history-count { grid-column:1 / 3; }
.ops-history-toolbar select { min-height:32px; padding:4px 8px; font-size:12px; width:auto; }
@media (pointer:coarse) { .ops-history-toolbar select { min-height:44px; } }
.ops-history-actions { display:flex; gap:4px; }
.ops-history-actions button:disabled { opacity:.45; cursor:default; }
.ops-history-heading .ops-history-actions { align-items:center; margin-left:auto; max-width:100%; }
.ops-history-heading .ops-history-actions:has(#history-export-status:not(:empty)) { flex:1 0 100%; }
#history-export-status { flex:1; margin:0 4px 0 0; color:var(--muted); font-size:11px; text-align:right; line-height:1.2; }
#history-export-status:empty { display:none; }
.ops-history-heading .ops-history-actions button { min-width:30px; min-height:32px; padding:5px; }
#history-preference-status:empty { display:none; }
#history-points, #history-table-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.ops-history-journey-row { display:flex; align-items:stretch; gap:4px; margin-bottom:6px; }
.ops-history-journey { display:grid; flex:1; min-width:0; text-align:left; gap:4px; white-space:normal; overflow-wrap:anywhere; background:var(--card); border-left:3px solid var(--accent); }
.ops-history-eye, #history-visibility { flex-shrink:0; min-width:30px; min-height:32px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.ops-history-eye[aria-pressed=false], #history-visibility[aria-pressed=false] { color:var(--muted); }
.ops-history-eye { align-self:center; }
#history-visibility { grid-column:3; grid-row:2; }
@media (pointer:coarse) { .ops-history-eye, #history-visibility { min-width:44px; min-height:44px; } }
.ops-history-journey small { color:var(--muted); }
#history-table { width:100%; border-collapse:collapse; font-size:12px; }
#history-table th { position:sticky; top:0; z-index:1; background:var(--sidebar); text-align:left; white-space:nowrap; }
#history-table th, #history-table td { padding:4px 8px; border-bottom:1px solid var(--border); }
#history-table .ops-history-point { display:table-row; cursor:pointer; }
#history-table .ops-history-point td { white-space:nowrap; }
#history-table .ops-history-point td:nth-child(3) { white-space:normal; min-width:200px; }
#history-table .ops-history-point button { padding:2px 4px; font:inherit; min-height:22px; white-space:nowrap; }
#history-table .ops-history-journey { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin:0; padding:4px 8px; font:inherit; }
#history-table .ops-history-journey-row { margin:0; }
#history-table td.ops-history-journey-cell { padding:3px 5px; }
#history-table .is-selected { outline:2px solid var(--text); outline-offset:-2px; }
#history-banner { width:100%; text-align:left; white-space:normal; min-height:40px; padding:8px 12px; font-size:12px; }
.ops-history-point { display:grid; gap:5px; width:100%; text-align:left; margin-bottom:6px; background:var(--card); overflow-wrap:anywhere; white-space:normal; }
.ops-history-point strong { font-size:12px; }
.ops-history-speed { white-space:nowrap; }
.ops-history-speed .over { color:var(--danger); }
.ops-history-limit { display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 2px; border:2px solid #d9534f; border-radius:50%; background:#fff; color:#222; font-weight:700; font-size:10px; line-height:1; vertical-align:middle; margin:0 0 0 6px; }
.ops-gps-stale { color:#d9534f; margin-right:4px; font-size:11px; vertical-align:middle; }
.ops-history-point small { color:var(--muted); }
.ops-history-fence, .ops-hist-address b { font-weight:600; }
.ops-history-point[aria-pressed=true] small { color:inherit; }
@media (prefers-reduced-motion:no-preference) {
    #history-points .ops-history-point.is-revealed { animation:ops-history-reveal 1.2s ease-out; }
    #history-table .is-revealed td { animation:ops-history-reveal 1.2s ease-out; }
    @keyframes ops-history-reveal {
        from { box-shadow:inset 0 0 0 3px var(--focus); }
        to { box-shadow:inset 0 0 0 3px transparent; }
    }
}
@media(max-width:1000px) {
    .ops-workspace.ops-history-open { grid-template-columns:280px minmax(0,1fr); }
    .ops-history-panel { position:absolute; z-index:8; inset:0 auto 0 280px; width:min(340px,calc(100% - 280px)); box-shadow:var(--shadow); }
}
@media(max-width:700px) {
    .ops-workspace.ops-history-open { grid-template-columns:minmax(0,1fr); }
    .ops-history-panel { left:0; width:min(360px,calc(100% - 32px)); }
    .ops-history-range { grid-template-columns:minmax(0,1fr); }
}

/* Shared finishing details; geometry remains owned by the layout rules above. */
.ops-sidebar-head { background:linear-gradient(var(--surface),var(--sidebar)); }
.ops-header nav button { font-weight:550; border-radius:9px; }
.ops-header nav button:is([aria-expanded=true],[aria-pressed=true]) {
    color:var(--text); background:var(--selected); box-shadow:inset 0 -2px var(--accent);
}
.ops-nav-icon { color:var(--muted); }
.ops-map-actions button[aria-pressed=true] { background:var(--primary); color:var(--primary-ink); }
.ops-detail .ops-reading-card { background:linear-gradient(120deg,var(--card) 65%,var(--raised)); }
.ops-detail .ops-card-heading span { font-size:10px; font-weight:600; }
.ops-detail .ops-card-heading small { font-size:10px; }
.ops-table-wrap th { z-index:1; box-shadow:0 1px var(--border); }
.ops-table-wrap tbody tr:nth-child(even) { background:var(--raised); }
.ops-table-wrap tbody tr:hover { background:var(--hover); }
.ops-table-wrap td button { font-weight:650; text-decoration:underline; text-underline-offset:3px; }
.ops-photo-panel { background:var(--card); }
.ops-photo-heading { padding-bottom:12px; border-bottom:1px solid var(--border); }
.ops-photo-subscription { background:var(--sidebar); }
#user-menu { gap:4px; }
#dialog-content :is(input,select,textarea) { background:var(--raised); }
#user-menu button { border-radius:8px; }
#user-menu #sign-out { border-top:1px solid var(--border); border-radius:0 0 8px 8px; }
.ops-app button:is(.ops-map-marker,.ops-search-marker):enabled:hover { background:transparent; box-shadow:none; }
:is(.ops-app,.ops-login) :is(.ops-primary,.ops-zone-primary):enabled:hover,
.ops-app :is(.ops-map-actions,.ops-zone-toolbar) button[aria-pressed=true]:enabled:hover,
.ops-app .ops-history-point[aria-pressed=true]:enabled:hover {
    background:var(--primary); color:var(--primary-ink); border-color:var(--primary);
    box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--muted);
}
.ops-app :is(.ops-view-switch,#user-menu) button[aria-pressed=true]:enabled:hover {
    background:var(--text); color:var(--surface);
}
#ops-dialog:has(.ops-mlog) { width:min(1080px,calc(100% - 24px)); }
#ops-dialog:has(.ops-mlog) #dialog-status { display:none; }
.ops-mlog { min-width:0; }
.ops-mlog-tabs, .ops-mlog-shortcuts, .ops-mlog-heading, .ops-mlog-summary { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ops-mlog-tabs { border-bottom:1px solid var(--border); padding-bottom:12px; margin-bottom:16px; }
.ops-mlog-tabs [aria-selected=true], .ops-mlog-load { background:var(--primary); color:var(--primary-ink); }
.ops-mlog-filters { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto auto; gap:10px; align-items:end; margin-bottom:16px; }
.ops-mlog label { display:grid; gap:6px; min-width:0; font-size:12px; color:var(--muted); }
#dialog-content .ops-mlog :is(input,select) { width:100%; min-width:0; box-sizing:border-box; }
#dialog-content .ops-mlog input[type=date] { width:150px; }
.ops-mlog-shortcuts { margin:0; flex-wrap:nowrap; }
#dialog-content .ops-mlog-shortcuts button { margin:0; white-space:nowrap; }
.ops-mlog-actions { display:flex; gap:8px; }
#dialog-content :is(.ops-mlog-load,.ops-mlog-export) { width:44px; height:44px; padding:0; margin:0; display:grid; place-items:center; }
#dialog-content .ops-mlog-export { background:var(--raised); color:var(--text); }
#dialog-content .ops-mlog-export:disabled { opacity:.45; cursor:default; }
.ops-mlog-shortcuts button { border-radius:999px; font-size:12px; }
.ops-mlog-summary { padding:12px 0; color:var(--muted); font-size:12px; }
#dialog-content .ops-mlog-chip { background:var(--raised); color:var(--muted); font-size:12px; padding:6px 10px; border-radius:6px; margin:0; }
#dialog-content .ops-mlog-chip[aria-pressed=true] { background:var(--primary); color:var(--primary-ink); }
.ops-mlog-status:empty { display:none; }
.ops-mlog-status { color:var(--muted); }
.ops-mlog-row { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin-bottom:6px; overflow-wrap:anywhere; }
.ops-mlog-heading strong { margin-right:auto; }
.ops-mlog-flow, .ops-mlog-channel { font-size:11px; border-radius:999px; padding:3px 9px; background:var(--raised); }
.ops-mlog-flow.is-in { color:var(--green); }
.ops-mlog-flow.is-out { color:var(--text); border:1px solid var(--border); }
.ops-mlog-text { white-space:pre-wrap; margin:6px 0; font-family:inherit; }
.ops-mlog-meta { display:flex; flex-wrap:wrap; gap:2px 14px; color:var(--muted); font-size:11px; line-height:1.5; }
@media(max-width:900px) {
    .ops-mlog-filters { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .ops-mlog-filters label:nth-child(3) { grid-column:1 / -1; }
    #dialog-content .ops-mlog input[type=date] { width:100%; }
    .ops-mlog-shortcuts { grid-column:1; flex-wrap:wrap; }
    .ops-mlog-actions { grid-column:2; justify-self:end; }
    .ops-mlog-tabs button { flex:1; }
}
@media (prefers-reduced-motion:reduce) {
    :is(.ops-app,.ops-login) button:not(.ops-map-marker):not(.ops-search-marker),.ops-sso a { transition:none; }
    #ops-dialog::backdrop { backdrop-filter:none; }
    .ops-map-loading i::before { animation:none; }
}
.ops-cluster {
    background: #1e3a5f;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #fff, 0 2px 6px #0f172a66;
    font-variant-numeric: tabular-nums;
    user-select: none;
}
.ops-cluster:hover { background: #264e7c; }
/* History layouts resize the map, keeping the fleet column independent. */
.ops-workspace.ops-history-horizontal,
.ops-workspace.ops-history-sheet { grid-template-columns:280px minmax(0,1fr); grid-template-rows:minmax(0,1fr) minmax(140px,45%); }
.ops-history-horizontal > .ops-sidebar,
.ops-history-sheet > .ops-sidebar { grid-row:1 / -1; }
.ops-history-horizontal > .ops-main,
.ops-history-sheet > .ops-main { grid-column:2; grid-row:1; }
.ops-history-horizontal > .ops-history-panel,
.ops-history-sheet > .ops-history-panel { position:static; width:auto; grid-column:2; grid-row:2; border-top:1px solid var(--border); }
.ops-history-horizontal .ops-history-toolbar,
.ops-history-sheet .ops-history-toolbar { display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; }
.ops-history-horizontal .ops-history-heading h2,
.ops-history-sheet .ops-history-heading h2 { display:none; }
:is(.ops-history-horizontal,.ops-history-sheet) #history-content { display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto auto minmax(0,1fr) auto; align-items:center; column-gap:10px; }
:is(.ops-history-horizontal,.ops-history-sheet) #history-content[hidden] { display:none; }
:is(.ops-history-horizontal,.ops-history-sheet) .ops-history-heading { display:contents; }
:is(.ops-history-horizontal,.ops-history-sheet) .ops-history-heading > div:first-child { grid-column:1; grid-row:1; }
:is(.ops-history-horizontal,.ops-history-sheet) .ops-history-toolbar { grid-column:2; grid-row:1; min-width:0; }
:is(.ops-history-horizontal,.ops-history-sheet) .ops-history-actions { grid-column:3; grid-row:1; }
:is(.ops-history-horizontal,.ops-history-sheet) #history-visibility { margin-left:auto; align-self:center; }
:is(.ops-history-horizontal,.ops-history-sheet) #history-preference-status { grid-column:1 / -1; grid-row:2; }
:is(.ops-history-horizontal,.ops-history-sheet) :is(#history-points,#history-table-scroll) { grid-column:1 / -1; grid-row:3; align-self:stretch; }
:is(.ops-history-horizontal,.ops-history-sheet) #history-more { grid-column:1 / -1; grid-row:4; }
@media (max-width:1100px) {
    :is(.ops-history-horizontal,.ops-history-sheet) #history-content { grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto auto minmax(0,1fr) auto; }
    :is(.ops-history-horizontal,.ops-history-sheet) .ops-history-actions { grid-column:2; }
    :is(.ops-history-horizontal,.ops-history-sheet) .ops-history-toolbar { grid-column:1 / -1; grid-row:2; }
    :is(.ops-history-horizontal,.ops-history-sheet) #history-preference-status { grid-row:3; }
    :is(.ops-history-horizontal,.ops-history-sheet) :is(#history-points,#history-table-scroll) { grid-row:4; }
    :is(.ops-history-horizontal,.ops-history-sheet) #history-more { grid-row:5; }
}
.ops-workspace.ops-history-collapsed { grid-template-columns:280px minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; }
.ops-history-collapsed > .ops-sidebar { grid-row:1 / -1; }
.ops-history-collapsed > .ops-main { grid-column:2; grid-row:1; }
.ops-history-collapsed > .ops-history-panel { position:static; width:auto; grid-column:2; grid-row:2; padding:0; flex-direction:row; align-items:stretch; gap:0; }
.ops-history-collapsed #history-banner { flex:1 1 0; min-width:0; }
#history-banner-close { flex-shrink:0; min-width:44px; min-height:40px; border-left:1px solid var(--border); border-radius:0; }
#history-banner-close[hidden] { display:none; }
.ops-workspace.ops-history-rail { grid-template-columns:280px 44px minmax(0,1fr); }
.ops-history-rail > .ops-history-panel { position:static; padding:0; width:auto; }
.ops-history-rail #history-banner { height:100%; width:100%; min-height:0; padding:12px 0; display:flex; flex-direction:column; align-items:center; gap:8px; white-space:nowrap; }
.ops-history-rail #history-banner span { writing-mode:vertical-rl; }
@media(max-width:700px) {
    .ops-workspace.ops-history-open { grid-template-columns:minmax(0,1fr); }
    .ops-history-open > .ops-main, .ops-history-open > .ops-history-panel { grid-column:1; }
    .ops-history-sheet > .ops-history-panel { padding:8px; padding-bottom:max(8px,env(safe-area-inset-bottom)); }
    .ops-history-sheet .ops-history-toolbar { gap:4px 8px; }
    .ops-history-sheet #history-range { flex-basis:100%; font-size:10px; }
    .ops-history-sheet .ops-history-toolbar label { font-size:12px; }
    .ops-history-sheet #history-count { font-size:10px; }
    #history-layout { display:none; }
}
@media(prefers-reduced-motion:reduce) {
    .ops-history-panel, #history-banner { transition:none; }
}

/* Password protection is a separate top-layer modal, including above the Alert Log. */
#export-protect-dialog { width:min(440px,calc(100% - 24px)); max-height:85dvh; border:1px solid var(--border); border-radius:12px; color:var(--text); background:var(--surface); padding:0; box-shadow:var(--shadow); }
#export-protect-dialog::backdrop { background:#0b182c80; }
#export-protect-dialog h2 { margin-top:0; }
#export-protect-dialog .ops-export-secret { width:100%; margin:6px 0 14px; }
#export-protect-dialog .ops-export-secret[data-masked] { -webkit-text-security:disc; }
.ops-export-check { display:flex; align-items:center; gap:10px; margin:18px 0; }
#export-password-help, #export-protect-policy { color:var(--muted); }
#export-protect-error { color:var(--danger); }

/* Device settings share the zone tab treatment and both Operations themes. */
#dialog-content.ops-device-settings { display:flex; flex-direction:column; gap:16px; }
#dialog-content.ops-device-settings .ops-tab-page { display:flex; flex-direction:column; gap:12px; }
#dialog-content.ops-device-settings [hidden] { display:none !important; }
#dialog-content.ops-device-settings fieldset { min-width:0; margin:0; padding:0; border:0; display:flex; flex-direction:column; gap:12px; }
#dialog-content.ops-device-settings legend { font-weight:650; padding:0 0 8px; }
#dialog-content.ops-device-settings label { display:flex; flex-direction:column; gap:6px; }
#dialog-content.ops-device-settings p { margin:0; }
.ops-settings-choices > div { display:flex; flex-direction:column; gap:8px; }
#dialog-content.ops-device-settings label:has(input[type=checkbox]) { flex-direction:row; align-items:center; }
#dialog-content.ops-device-settings input[type=checkbox] { width:18px; height:18px; margin:0; flex:0 0 auto; }
.ops-icon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:8px; margin-top:10px; }
.ops-icon-grid button { min-width:44px; height:44px; padding:4px; }
.ops-icon-grid img { width:32px; height:32px; object-fit:contain; }
#dialog-content.ops-device-settings [data-icon-id][aria-pressed=true] { outline:2px solid var(--text); outline-offset:2px; background:var(--selected); color:var(--text); }
.ops-settings-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 0; border-bottom:1px solid var(--border); }
.ops-settings-row > span { flex:1 1 180px; overflow-wrap:anywhere; }
.ops-settings-confirm { flex-basis:100%; padding:12px; background:var(--raised); border:1px solid var(--border); border-radius:8px; }
.ops-settings-confirm button { margin:8px 8px 0 0; }

#dialog-content.ops-device-settings button { margin:0; }
#dialog-content.ops-device-settings .ops-general-fields { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:20px; }
#dialog-content.ops-device-settings .ops-general-fields > :is(label,.ops-settings-limits,.ops-primary) { grid-column:1 / -1; }
#dialog-content.ops-device-settings input[type=checkbox] { order:-1; min-height:18px; accent-color:var(--primary); }
#dialog-content.ops-device-settings .ops-settings-limits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#dialog-content.ops-device-settings input { min-width:0; width:100%; box-sizing:border-box; }
#dialog-content.ops-device-settings input[type=checkbox] { width:18px; }
#dialog-content.ops-device-settings .ops-settings-choices label { min-height:32px; cursor:pointer; }
#dialog-content.ops-device-settings .ops-icon-picker:empty { display:none; }
#dialog-content.ops-device-settings .ops-tab-page h3 { margin:0; }
@media (max-width:520px) {
    #dialog-content.ops-device-settings .ops-general-fields { grid-template-columns:1fr; }
    #dialog-content.ops-device-settings .ops-settings-limits { grid-template-columns:1fr; }
    #dialog-content.ops-device-settings .ops-settings-choices label { min-height:44px; }
}

#dialog-content.ops-device-settings .ops-settings-icon-actions { display:flex; gap:8px; }
#dialog-content.ops-device-settings .ops-settings-icon-actions button { flex:1; }
#dialog-content.ops-device-settings .ops-primary { justify-content:center; }