/* Mobile controls stay absent from the desktop layout. */
.mobile-nav, .mobile-expand, .mobile-connection {display:none}
#mobile-menu-actions {display:grid;gap:8px;margin:18px 0}
#mobile-menu-actions>* {justify-content:flex-start;text-align:left;min-height:48px;width:100%;font-size:15px;padding:12px 14px;border:1px solid var(--line);border-radius:12px}
#mobile-menu-actions #help::after {content:'  About the data';font-size:15px}
#mobile-menu .team-footer {padding:16px 0;justify-content:flex-start}
#mobile-menu .team-footer button {min-height:46px;font-size:14px}
#mobile-menu .team-footer>small {font-size:12px;text-align:left}
.install-guide {background:#edf4f0;border-radius:14px;padding:16px;margin-top:16px}
.install-guide h3 {font-size:15px}
.install-guide p {color:#50685e;font-size:13px;margin-bottom:0}
@media(max-width:1024px) {
  :root {--muted:#62766e;--nav-height:calc(65px + env(safe-area-inset-bottom, 0px))}
  html, body {height:100%;overscroll-behavior-y:none}
  body {font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-text-size-adjust:100%;background:#f7f9f7}
  button, .quiet {touch-action:manipulation;min-height:44px}
  input, select, textarea, .search input, .date-switch input {font-size:16px}
  #workspace:not([hidden]) {height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-top:env(safe-area-inset-top,0px)}
  header {height:102px;min-height:102px;position:relative;padding:12px 16px 50px;gap:12px;border-bottom:0;align-items:center}
  .brand {font-size:23px;letter-spacing:2px;flex-shrink:0}
  .brand span {font-size:6px;letter-spacing:1.4px}
  .workspace-title {display:block;margin-left:auto;min-width:0;text-align:right}
  .workspace-title strong {font-size:12px;font-weight:600}
  .workspace-title span {font-size:10px;max-width:195px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#64776f}
  .header-tools {position:absolute;left:12px;right:12px;bottom:5px;margin:0;justify-content:space-between;flex-wrap:nowrap}
  .date-switch {padding:0;border:0;gap:0;flex:1;align-items:center}
  .date-switch input {width:145px;max-width:42vw;padding:6px;font-size:14px;min-width:0;background:#f1f5f2;min-height:38px}
  .date-switch button {width:36px;min-width:36px;min-height:44px;font-size:21px;padding:3px}
  .date-switch #today {display:block;width:auto;padding:4px 9px;font-size:12px;margin-left:3px}
  .header-tools #refresh {display:block;width:44px;height:44px;background:#edf4ef;border-radius:12px;font-size:23px}
  .summary {display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;flex:none;height:89px;padding:8px 12px 10px;gap:8px;background:#fff}
  .summary::-webkit-scrollbar {display:none}
  .summary article, .summary article:first-child, .summary article:nth-child(4), .summary .attention-card {display:flex;flex:0 0 143px;height:70px;padding:9px 12px;border:1px solid #e0e9e3;border-radius:13px;scroll-snap-align:start;background:#f8faf8;gap:0}
  .summary small {font-size:10px;color:#586e63}
  .summary strong {font-size:23px;margin:3px 0 1px;letter-spacing:-.7px}
  .summary div>span {font-size:9px;color:#65796e;white-space:nowrap}
  .summary .metric-symbol {display:none}
  .summary .attention-card {background:#fff5ed;border-color:#f0deca}
  .notice {padding:8px 14px;font-size:12px;line-height:1.35;max-height:80px;overflow-y:auto;flex-shrink:0}
  .mobile-connection:not([hidden]) {display:block;padding:7px 14px;background:#fff1d9;color:#754a13;font-size:12px;flex:none}
  .operations, .operations.expanded {position:relative;inset:auto;height:auto;min-height:0;flex:1;overflow:hidden;border-radius:20px 20px 0 0;z-index:0}
  .operations #map {inset:0}
  .map-toolbar, .team-hidden .map-toolbar, .detail-open .map-toolbar {left:12px;top:12px;right:auto;max-width:calc(100% - 24px);gap:1px;padding:3px;border-radius:13px;box-shadow:0 3px 16px #183d3222}
  .map-toolbar button, .map-toolbar select {min-height:40px;font-size:12px;padding:7px 10px;min-width:0}
  .map-toolbar button span {display:inline}
  .map-toolbar select {font-size:16px;width:95px;max-width:28vw;padding:5px}
  #map-fullscreen {display:none}
  .map-status, .team-hidden .map-status, .detail-open .map-status {top:65px;left:14px;max-width:calc(100% - 75px);font-size:8px;padding:6px 8px}
  .maplibregl-ctrl-top-right, .detail-open .maplibregl-ctrl-top-right {top:100px;right:4px}
  .maplibregl-ctrl-group button {width:38px;height:38px;min-height:38px}
  .maplibregl-ctrl-bottom-right {max-width:70%;font-size:9px}
  .map-legend {left:8px;bottom:28px;font-size:8px;gap:8px;background:#ffffffe8}
  .map-error {left:12px;right:12px;top:105px;bottom:auto;max-width:none;font-size:12px}
  #open-team, .detail-open #open-team, #collapse-team {display:none!important}
  #team-panel, .detail-open #team-panel {display:none!important}
  #workspace[data-mobile-view=team] #team-panel {display:flex!important;inset:0;width:auto;min-height:0;border:0;border-radius:0;box-shadow:none}
  #workspace[data-mobile-view=team] .map-toolbar, #workspace[data-mobile-view=team] .map-status, #workspace[data-mobile-view=team] .map-legend {display:none}
  .panel-heading {padding:18px 18px 12px}
  .panel-heading h2 {font-size:23px}
  .eyebrow {font-size:9px;color:#667d70}
  .team-controls {padding:0 16px 12px}
  .search {background:#f0f5f1}
  .search input {font-size:16px;min-height:44px}
  .filter-row {gap:8px;margin-top:8px}
  .filter {font-size:13px;min-height:40px;padding:8px 16px}
  .drivers {padding:2px 12px 16px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .driver {padding:14px 12px;margin:5px 0;border-color:#e5ece6;background:#fff;border-radius:14px;min-height:94px}
  .driver.selected {border-color:#a7caba}
  .avatar {width:40px;height:40px;font-size:12px}
  .driver-identity strong {font-size:15px}
  .driver-identity small {font-size:11px;line-height:1.4}
  .driver-distance {font-size:15px}
  .driver-bottom {font-size:11px;gap:8px;flex-wrap:wrap;line-height:1.4}
  #journey {display:none!important}
  #workspace[data-mobile-view=driver] #journey:not([hidden]) {display:flex!important;left:0;right:0;top:auto;bottom:0;width:auto;height:46%;min-height:190px;border:0;border-top:1px solid #d6e2d9;border-radius:22px 22px 0 0;box-shadow:0 -4px 28px #183d3224}
  #workspace[data-mobile-view=driver][data-mobile-sheet=full] #journey:not([hidden]) {height:100%;border-radius:0;min-height:0}
  .mobile-expand {display:block;position:relative;flex:none;width:100%;border:0;border-radius:0;background:transparent;min-height:29px;padding:9px 0 1px;font-size:10px;color:#5a7467}
  .mobile-expand::before {content:'';position:absolute;top:5px;left:calc(50% - 18px);width:36px;height:3px;border-radius:3px;background:#c4d4c9}
  .detail-heading {padding:6px 16px 8px;min-height:49px}
  .detail-heading h2 {font-size:19px;max-width:calc(100vw - 120px)}
  .detail-heading .eyebrow {font-size:8px;line-height:1.3;letter-spacing:.5px}
  .detail-heading .icon-button {width:40px;min-height:40px}
  .detail-actions {padding:0 14px 6px;gap:8px}
  .detail-actions button {font-size:12px;min-height:36px}
  .tabs {padding:0 12px;flex:none}
  .tabs button {font-size:13px;min-height:42px;padding:8px 0}
  .detail-content {padding:0 18px 20px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;min-height:0}
  .hero-distance small {font-size:12px}
  .hero-distance strong {font-size:37px}
  .hero-distance>span {font-size:12px}
  .hero-distance {padding:16px 0}
  .info-grid small {font-size:11px}
  .info-grid strong {font-size:19px}
  .section-title h3, .section-title>strong {font-size:14px}
  .breakdown>div, .breakdown strong {font-size:12px;line-height:1.5}
  .info-note {font-size:12px;color:#64776a;line-height:1.6}
  .wide-button {font-size:13px;min-height:44px}
  .device-info>div, .event b, .event span, .history-day {font-size:13px;line-height:1.45}
  .history-day small {font-size:11px}
  .replay, .detail-open .replay, .team-hidden .replay {position:relative;inset:auto;width:100%;padding:12px 10px;margin:16px 0;box-shadow:none;gap:8px;flex-wrap:wrap}
  .replay-main {min-width:140px}
  .replay-top {gap:5px;flex-wrap:wrap;font-size:12px}
  .replay-top strong {display:none}
  .replay-top>span {margin-left:0}
  .replay .text-button {font-size:11px;min-height:30px}
  .replay select {width:59px;font-size:16px;min-height:44px}
  .play-button {width:40px;min-height:40px;min-width:40px}
  .replay input[type=range] {height:26px;background:linear-gradient(#dce9df,#dce9df) center/100% 4px no-repeat;margin:4px 0}
  .replay input[type=range]::-webkit-slider-thumb {width:20px;height:20px}
  .replay-times {font-size:9px;gap:8px;flex-wrap:wrap}
  .mobile-nav {display:grid;grid-template-columns:repeat(4,1fr);height:var(--nav-height);min-height:var(--nav-height);padding:5px 8px calc(5px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid #e1e9e3;z-index:10;gap:4px}
  .mobile-nav button {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;padding:5px;border:0;border-radius:13px;font-size:10px;color:#64786b;background:transparent}
  .mobile-nav svg {width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mobile-nav button[aria-current=page] {color:#146653;background:#e9f3ed}
  .mobile-nav button:disabled {opacity:.4}
  dialog {max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 28px);padding:25px 20px;width:calc(100% - 24px);border-radius:22px;overscroll-behavior:contain}
  dialog label {font-size:14px}
  dialog input, dialog select, dialog textarea {font-size:16px;min-height:44px}
  dialog .close {min-width:44px;min-height:44px}
  .interval-times {grid-template-columns:1fr 1fr}
  .interval-times>label {min-width:0}
  .interval-times input {min-width:0}
  .login {min-height:100vh;min-height:100dvh;padding:calc(34px + env(safe-area-inset-top,0px)) 22px calc(30px + env(safe-area-inset-bottom,0px));display:block;background:radial-gradient(ellipse at top right,#d9eae0,transparent 65%),#f3f7f3}
  .login-copy .brand {margin-bottom:35px}
  .login-copy h1 {font-size:43px;letter-spacing:-1.8px;line-height:1.08}
  .login-copy>p {font-size:14px;color:#5a7264;margin-top:17px;line-height:1.6}
  .login-lines {display:none}
  .login-card {margin:25px 0 0;padding:25px 23px;border:1px solid #dfe9df;box-shadow:0 10px 35px #203d3710}
  .login-card label {font-size:13px}
  .login-card input {font-size:16px;min-height:48px}
  .login-card .primary {font-size:14px;min-height:48px}
}
@media(max-width:1024px) and (max-height:600px) {
  header {height:88px;min-height:88px;padding-top:6px;padding-bottom:46px}
  .summary {height:64px;padding:3px 10px 5px}
  .summary article,.summary article:first-child,.summary article:nth-child(4),.summary .attention-card {height:55px;padding:4px 10px}
  .summary strong {font-size:19px}
  .summary div>span {display:none}
  #workspace[data-mobile-view=driver] #journey:not([hidden]) {height:100%;min-height:0}
  .mobile-nav {--nav-height:calc(55px + env(safe-area-inset-bottom,0px));padding-top:0}
  .login-copy h1 {font-size:30px}
  .login-copy .brand {margin-bottom:20px}
  .login-copy>p {font-size:12px;margin-top:10px}
  .login-card {margin-top:18px;padding:20px}
  .login-card h2 {margin:10px 0 16px;font-size:23px}
  .login-card label {margin:12px 0}
}
@media(min-width:600px) and (max-width:1024px) and (max-height:600px) {
  header {height:48px;min-height:48px;padding:0}
  header>.brand, .workspace-title {display:none}
  .header-tools {bottom:0}
  #workspace[data-mobile-view=driver] .summary {display:none}
  .detail-actions {display:none}
  .detail-heading {padding:2px 16px;min-height:44px}
  .tabs button {min-height:35px;padding:5px 0}
  .mobile-expand {min-height:24px;padding-top:7px}
}