/* Shared reading scale and workspace composition. Business states keep their colours. */
:root{
  --font-caption:14px;--font-label:15px;--font-body:16px;
  --font-subtitle:18px;--font-section:20px;
  --workspace-sidebar:252px;--workspace-gutter:24px;
  --focus-ring:#8bc0ff;--panel-shadow:0 8px 24px #0000001a;
}
html{font-size:16px}
body{font-size:var(--font-body);line-height:1.65}
button,input,select,textarea{min-height:44px;line-height:1.5;border-radius:7px}
button{touch-action:manipulation}
button:disabled{cursor:not-allowed}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #4d96ff1c}
.skip-link{position:fixed;top:12px;left:12px;transform:translateY(-160%);z-index:10000;padding:12px 18px;border:2px solid var(--focus-ring);border-radius:8px;background:var(--surface);color:var(--text);font-size:16px;text-decoration:none}
.skip-link:focus{transform:translateY(0)}
.navigation-dismiss{display:none}
input[type=checkbox],input[type=radio]{min-height:0;width:18px;height:18px;flex:none}
label{line-height:1.6}
pre,code,.xml-editor{line-height:1.65}
.muted,small{line-height:1.6}
small,code,sub,sup{font-size:var(--font-caption)}
h5,h6{font-size:var(--font-label)}
.sidebar{width:var(--workspace-sidebar);padding:22px 14px 14px;background:#181d25;border-color:#323c4b}
.brand{font-size:24px;letter-spacing:1px;gap:12px;padding:0 7px}
.brand-mark{width:44px;height:44px;font-size:24px;border-radius:10px}
.brand small{font-size:var(--font-caption);letter-spacing:1px;margin-top:3px}
.sidebar-label{margin:28px 12px 12px;font-size:var(--font-caption);letter-spacing:.06em}
.sidebar nav{gap:5px;padding-bottom:16px}
.workspace-nav-group>summary{min-height:48px;padding:11px 12px;font-size:var(--font-body);border-radius:8px;gap:12px}
.workspace-nav-group>summary:hover{background:#252e3b;color:#edf3fc}
.workspace-nav-group:has([aria-current=page])>summary{color:#dceaff}
.nav[aria-current=page]{background:var(--accent-soft);color:#c6dfff;box-shadow:inset 3px 0 var(--accent);font-weight:600}
.workspace-nav-group>summary>span:first-child{font-size:21px;width:24px;flex:none}
.workspace-nav-children{margin-left:23px;padding-left:11px;gap:4px}
.workspace-nav-children .nav{min-height:44px;padding:9px 10px;align-items:center;border-radius:6px}
.workspace-nav-children .nav .nav-label,.nav .nav-label{font-size:var(--font-label);white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.workspace-nav-children .nav .nav-icon{width:18px;height:18px}
.nav b{font-size:var(--font-caption);padding:1px 6px;flex:none}
.smoke-nav-heading{font-size:var(--font-caption);padding:18px 8px 7px;color:#a2b2ca;letter-spacing:.03em}
.smoke-nav-search input{min-height:42px;font-size:var(--font-label);padding:9px 10px}
.sidebar-bottom{font-size:var(--font-caption);padding:14px 10px 0}
.sidebar-bottom small{font-size:var(--font-caption)}
main{margin-left:var(--workspace-sidebar);padding:0 var(--workspace-gutter);min-width:0}
main>header{height:auto;min-height:88px;padding:14px 0;margin-bottom:22px;gap:20px}
main>header h1{font-size:28px;line-height:1.4;font-weight:650}
.eyebrow{font-size:var(--font-caption);letter-spacing:.08em;line-height:1.5}
.workspace-heading{gap:16px;flex:1}
#toggle-navigation{width:42px;height:42px;min-height:42px;flex:none;border-radius:7px}
.header-right{gap:12px;flex-wrap:wrap;justify-content:flex-end}
.header-right time,.header-right #alarm-sound{font-size:var(--font-caption)}
.access-account-trigger{min-height:44px;padding:7px 10px;gap:8px}
.access-account-popover{min-width:260px;max-width:min(380px,calc(100vw - 24px))}
.access-account-popover button{font-size:var(--font-label);min-height:44px}
.access-avatar{width:32px;height:32px;font-size:var(--font-label)}
.toolbar{margin:0 0 20px;gap:16px;align-items:center;flex-wrap:wrap}
.toolbar h2,.panel-heading h2,.ops-heading h2,.access-card h3{font-size:22px;line-height:1.5}
.toolbar .muted{font-size:var(--font-label);margin-top:5px}
.toolbar>div:last-child{gap:10px;flex-wrap:wrap}
.panel{border-radius:10px;margin-bottom:22px;box-shadow:var(--panel-shadow)}
.panel-heading{min-height:68px;padding:16px 20px;gap:16px;flex-wrap:wrap;background:linear-gradient(180deg,#ffffff03,transparent);border-radius:10px 10px 0 0}
.padded{padding:20px}
.notice{font-size:var(--font-label);padding:12px 16px;gap:14px;margin-bottom:16px}
.readiness{font-size:var(--font-caption);gap:10px 24px;margin-bottom:20px;line-height:1.7}
.stats{gap:16px;margin-bottom:24px}
.stats article{min-height:104px;padding:18px 20px;border-radius:10px;box-shadow:var(--panel-shadow)}
.stats article span{font-size:var(--font-body)}
.stats article small{font-size:var(--font-caption)}
.stats strong{font-size:36px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.command-layout{grid-template-columns:minmax(0,1fr) 360px;gap:22px}
.command-side .panel{margin-bottom:22px}
.map-bottom{font-size:var(--font-caption);gap:10px 16px;flex-wrap:wrap;padding:12px 18px}
.map-hint{font-size:var(--font-caption)}
.image-caption,.tile-heading,.tile-footer,.tile-angles{font-size:var(--font-caption);line-height:1.6}
.camera-tile .tile-heading{padding:12px 16px;flex-wrap:wrap}
.tile-heading select{font-size:var(--font-caption);max-width:100%;min-height:38px}
.preview-status-footer{font-size:var(--font-caption);line-height:1.6}
.monitor-grid{gap:18px}
.event-row{gap:14px}
.event-row h3{font-size:var(--font-subtitle);line-height:1.5;margin-bottom:6px}
.event-row p{font-size:var(--font-label);line-height:1.65;margin:5px 0}
.event-row .chip,.chip{font-size:var(--font-caption);padding:4px 9px;line-height:1.5;white-space:normal}
.event-icon{width:36px;height:36px;font-size:22px;border-radius:7px}
.detail-line{font-size:var(--font-label);gap:16px;padding:12px 0;overflow-wrap:anywhere}
.event-detail h3,.ops-detail>h3{font-size:var(--font-section)}
.recheck-countdown,.ops-list .recheck-countdown{font-size:var(--font-body);padding:10px 12px;line-height:1.6}
.alerts-layout{grid-template-columns:clamp(320px,27%,390px) minmax(0,1fr);gap:22px}
.alerts-layout .event-row{padding:17px 18px}
/* Keep evidence in the page flow; only the alert selector needs its own scroll. */
#view-alerts .alerts-layout #event-list{max-height:calc(100dvh - 132px);overflow:auto;overscroll-behavior:auto}
#view-alerts .alerts-layout .event-detail{position:static;top:auto;max-height:none;overflow:visible;overscroll-behavior:auto;scrollbar-gutter:auto}

/* Wide filter panels use the full width instead of one full-width row per choice. */
.alert-history-filters{padding:18px 20px;margin-bottom:22px;overflow:visible}
.alert-history-filters>summary{font-size:var(--font-subtitle);line-height:1.6}
.alert-history-filters form{margin-top:18px}
.alert-filter-fields,#operations-root .ops-filters{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px 24px;align-items:start;
}
.alert-filter-fields>label{grid-column:span 4;gap:8px;font-size:var(--font-label)}
.alert-filter-fields>[data-choice-slot]{grid-column:span 4;min-width:0}
.alert-filter-fields>[data-choice-slot=event_state],.alert-filter-fields>[data-choice-slot=simulated]{grid-column:span 6}
.alert-filter-fields :is(.filter-choice,.filter-camera-picker),#operations-root .ops-filters :is(.filter-choice,.filter-camera-picker){
  grid-column:auto;display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;
}
.alert-filter-fields .filter-choice-label,#operations-root .ops-filters .filter-choice-label{
  flex:initial;padding:0;font-size:var(--font-label);line-height:1.5;font-weight:600;color:#b8c7dc;
}
.alert-filter-fields .filter-choice-options,#operations-root .ops-filters .filter-choice-options{gap:8px;align-items:flex-start}
.filter-choice-options button{min-height:42px;font-size:var(--font-label);padding:8px 13px;border-radius:6px;line-height:1.5}
.alert-filter-fields input,#operations-root .ops-filters input{min-height:46px;font-size:var(--font-body);width:100%;min-width:0;padding:10px 12px}
.filter-camera-picker details{width:100%;min-width:0}
.filter-camera-picker summary{min-height:44px;font-size:var(--font-label);padding:10px 12px}
.filter-camera-picker details>.filter-choice{max-width:min(560px,calc(100vw - 48px));z-index:1200;padding:14px;box-shadow:0 12px 32px #0007}
.alert-filter-note,.alert-filter-actions p,#operations-root .ops-filters>p{font-size:var(--font-caption);line-height:1.7}
.alert-filter-note{margin:16px 0 0}
.alert-filter-actions{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);gap:10px}
.alert-filter-actions [data-alert-filter-status]{margin-left:auto}
.alert-filter-actions button{min-height:44px;padding:9px 16px}
#operations-root .ops-filters{padding:20px;margin:20px 0 16px;border-radius:10px}
#operations-root .ops-filters>label{grid-column:span 3;gap:8px;font-size:var(--font-label);min-width:0}
#operations-root .ops-filters>.filter-choice,#operations-root .ops-filters>.filter-camera-picker{grid-column:span 4}
#operations-root .ops-filters>[data-choice-name=level],#operations-root .ops-filters>[data-choice-name=location_status]{grid-column:span 6}
#operations-root .ops-filter-actions,#operations-root .ops-filters>p{grid-column:1/-1}
#operations-root .ops-filter-actions{gap:10px;margin-top:0;padding-top:14px;border-top:1px solid var(--border)}
#operations-root .ops-filter-actions button{min-height:44px;padding:9px 18px}
.ops-heading{gap:16px;flex-wrap:wrap}
.ops-notice{font-size:var(--font-label);padding:14px 18px;border-radius:8px}
.ops-pager{font-size:var(--font-label);gap:12px;margin-bottom:8px}
.ops-layout{grid-template-columns:clamp(300px,25%,380px) minmax(0,1fr);gap:24px;align-items:start}
.ops-list button{padding:17px 18px;margin-bottom:12px;font-size:var(--font-body);line-height:1.65;border-radius:8px}
.ops-list small{font-size:var(--font-label);margin-top:8px}
.ops-detail{padding:0 2px}
.ops-detail>p{font-size:var(--font-label);line-height:1.75}
#operations-root form:not(.ops-filters){gap:12px;padding:16px;border-radius:8px;align-items:flex-end}
#operations-root form label{gap:8px;min-width:0}
#operations-root form p{font-size:var(--font-caption);line-height:1.7}
#operations-root pre{font-size:var(--font-caption)}
.event-evidence-gallery{padding:20px 0}
.evidence-gallery-member{padding:16px;border-radius:8px;margin-top:16px}
.evidence-gallery-member h4{font-size:var(--font-body)}
.evidence-gallery-image img{max-height:230px}
.evidence-gallery-member-meta,.evidence-gallery-image-meta,.evidence-gallery-page{font-size:var(--font-caption);line-height:1.65}
.evidence-gallery-toolbar button{min-height:42px;font-size:var(--font-label)}
.evidence-gallery-thermal{font-size:var(--font-caption);line-height:1.65}
.view table{font-size:var(--font-label);line-height:1.65}
.view table th,.view table td{padding:13px 15px;font-size:var(--font-label);vertical-align:top}
.view table th{font-weight:600;color:#bdcce0}
.view table tbody tr:hover{background:#ffffff04}
.view table time,.detail-line time{font-variant-numeric:tabular-nums}
.view table small{font-size:var(--font-caption)}
.sensor-detail-pager,.sensor-pagination,.spa-pager,.spa-result-toolbar,.spa-selectors,.sp-time-row,.sp-contact-row{flex-wrap:wrap;gap:10px}
.spa-query-form .spa-fields{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}
.spa-query-form .spa-fields select[multiple]{height:128px;min-height:128px;max-height:none;padding:8px 10px}
.access-card-head,.sensor-intro,.spa-management-title{gap:14px;flex-wrap:wrap}
.access-card-head .access-search{max-width:100%;min-height:44px}
.sensor-detail-fields>div{grid-template-columns:minmax(110px,28%) minmax(0,1fr);gap:12px}
.sensor-detail-fields dt,.sensor-detail-fields dd{line-height:1.7;overflow-wrap:anywhere}
dialog{max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);border-radius:12px;box-shadow:0 24px 80px #0007}
dialog::backdrop{background:#080d16b8}
.modal-header{padding:18px 22px;gap:16px;flex-wrap:wrap}
.modal-header h2{font-size:22px}
.modal-header button{min-width:44px;min-height:44px}
.smoke-policy-dialog[open],.sensor-detail-dialog[open],.access-modal[open]{display:flex;flex-direction:column;overflow:hidden}
.sp-heading,.sensor-detail-heading,.access-modal-header{flex:none;gap:14px;flex-wrap:wrap}
.sp-body,.sensor-detail-body,.access-modal-body{min-height:0;overflow:auto}
.sp-tabs{flex:none;flex-wrap:wrap}
.controls{padding:18px}
.ptz-pad button{min-height:48px}
.leaflet-popup-content,.leaflet-tooltip,.leaflet-control-attribution{font-size:var(--font-caption);line-height:1.6}
footer{font-size:var(--font-caption);padding:20px 0}
body.navigation-collapsed .sidebar{width:76px;padding:20px 8px 12px}
body.navigation-collapsed main{margin-left:76px}
body.navigation-collapsed .workspace-nav-group>summary{padding:10px 4px;min-height:48px}
body.navigation-collapsed .nav{min-height:44px}
body.navigation-collapsed #toast{left:calc(50% + 38px)}
body:not(.navigation-collapsed) #toast{left:calc(50% + 126px)}

@media(min-width:1700px){
  .alert-filter-fields>label,.alert-filter-fields>[data-choice-slot],.alert-filter-fields>[data-choice-slot=event_state],.alert-filter-fields>[data-choice-slot=simulated]{grid-column:span 3}
  #operations-root .ops-filters{grid-template-columns:repeat(20,minmax(0,1fr));column-gap:20px}
  #operations-root .ops-filters>label{grid-column:span 5}
  #operations-root .ops-filters>.filter-choice,#operations-root .ops-filters>.filter-camera-picker,#operations-root .ops-filters>[data-choice-name=level],#operations-root .ops-filters>[data-choice-name=location_status]{grid-column:span 4}
}

@media(min-width:2000px){:root{--workspace-gutter:32px}.command-layout{grid-template-columns:minmax(0,1fr) 400px}}
@media(max-width:1400px){.command-layout{grid-template-columns:minmax(0,1fr) 320px}.header-right time{display:none}.stats article{padding:16px}.stats strong{font-size:32px}}
@media(max-width:1250px){
  .alert-filter-fields>label,.alert-filter-fields>[data-choice-slot],.alert-filter-fields>[data-choice-slot=event_state],.alert-filter-fields>[data-choice-slot=simulated]{grid-column:span 6}
  .alert-filter-fields>[data-choice-slot=simulated]{grid-column:1/-1}
  #operations-root .ops-filters>label,#operations-root .ops-filters>.filter-choice,#operations-root .ops-filters>.filter-camera-picker{grid-column:span 6}
  #operations-root .ops-filters>[data-choice-name=location_status]{grid-column:1/-1}
  .command-layout{grid-template-columns:minmax(0,1fr)}
  .command-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .alerts-layout,.ops-layout{grid-template-columns:minmax(0,1fr)}
  #view-alerts .alerts-layout #event-list,.ops-list{max-height:330px}
  .alerts-layout .event-detail{position:static;max-height:none;overflow:visible}
}
@media(max-width:1000px){
  :root{--workspace-gutter:18px}
  body:not(.navigation-expanded) .sidebar{width:76px;padding:20px 8px 12px}
  body:not(.navigation-expanded) main{margin-left:76px}
  body.navigation-expanded .sidebar{width:252px;padding:22px 14px 14px}
  body.navigation-expanded main{margin-left:252px}
  body.navigation-expanded .brand-copy{display:block}
  body.navigation-expanded .nav .nav-label{display:block;white-space:normal}
  body.navigation-expanded .brand{justify-content:flex-start;padding:0 7px}
  main>header{min-height:82px;gap:12px}
  main>header h1{font-size:25px}
  .header-right{gap:8px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats article{min-height:96px}
  body:not(.navigation-expanded) #toast{left:calc(50% + 38px)}
}
@media(max-width:760px){
  body.navigation-expanded .sidebar{box-shadow:12px 0 40px #0006}
  body.navigation-expanded main{margin-left:76px}
  body.navigation-expanded .navigation-dismiss{display:block;position:fixed;inset:0 0 0 252px;z-index:1099;border:0;border-radius:0;background:#080d16a8;padding:0;max-width:none;cursor:pointer}
  body.navigation-expanded .navigation-dismiss:hover{background:#080d16a8}
  body.navigation-expanded #toast{left:calc(50% + 38px);max-width:calc(100vw - 100px)}
  :root{--workspace-gutter:14px}
  main>header{align-items:flex-start;flex-wrap:wrap;padding:14px 0;gap:12px;margin-bottom:18px}
  main>header h1{font-size:24px}
  .workspace-heading{flex-basis:100%;gap:10px}
  .header-right{width:100%;justify-content:flex-end}
  .eyebrow{font-size:var(--font-caption);letter-spacing:.04em}
  .alert-filter-fields,#operations-root .ops-filters{gap:18px}
  .alert-filter-fields>label,.alert-filter-fields>[data-choice-slot],.alert-filter-fields>[data-choice-slot=event_state],.alert-filter-fields>[data-choice-slot=simulated],#operations-root .ops-filters>label,#operations-root .ops-filters>.filter-choice,#operations-root .ops-filters>.filter-camera-picker{grid-column:1/-1}
  .alert-history-filters,#operations-root .ops-filters{padding:16px}
  .alert-filter-actions [data-alert-filter-status]{flex-basis:100%;margin-left:0;order:5}
  .alert-filter-actions{gap:8px}
  .filter-choice-options button{padding:8px 11px}
  .filter-camera-picker details>.filter-choice{position:static;width:100%;max-width:100%;margin-top:8px!important}
  .command-side,.monitor-grid,.monitor-grid.nine{grid-template-columns:minmax(0,1fr)}
  .stats{gap:12px}.stats article{padding:14px;min-height:100px}.stats strong{font-size:30px}
  .stats article span{font-size:var(--font-label)}
  .panel-heading{padding:14px 16px}
  .toolbar h2,.panel-heading h2{font-size:20px}
  .padded{padding:16px}
  .ops-list{max-height:310px}
  .evidence-gallery-images{grid-template-columns:minmax(0,1fr)}
  .sensor-summary{gap:12px}
  .sensor-summary article{padding:14px}
  .access-permissions,.access-role-layout{grid-template-columns:minmax(0,1fr)}
  .sensor-detail-fields>div{grid-template-columns:minmax(95px,32%) minmax(0,1fr)}
}
/* Short viewports keep the login form and its footer from overlapping. */
@media(max-height:720px) and (min-width:761px){
  .login-page .login-entry{padding-top:40px;padding-bottom:100px;align-items:flex-start}
  .login-page .login-story-copy{padding-top:50px;padding-bottom:50px}
  .login-page .login-entry-footer{bottom:24px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Laptop workspaces keep the task title whole instead of squeezing it beside
   the account controls. This follows the shared header rules above. */
@media(min-width:701px) and (max-width:1280px){
  main>header{gap:8px 12px;padding:8px 0}
  main>header .workspace-heading{flex:1 1 100%;gap:12px;min-width:0}
  main>header .workspace-heading .eyebrow{display:none}
  main>header .workspace-heading h1{font-size:24px;line-height:1.35;word-break:keep-all}
  main>header .header-right{flex:1 1 100%;width:100%;min-width:0;justify-content:flex-end}
}