:root {
  color-scheme: light;
  --navy: #16324f;
  --navy-2: #214b70;
  --green: #087f3b;
  --green-soft: #e8f6ee;
  --red: #d42525;
  --red-soft: #fff0f0;
  --blue-soft: #edf5fb;
  --ink: #17202a;
  --muted: #65717f;
  --border: #d8dee5;
  --surface: #ffffff;
  --background: #f3f6f8;
  --road-to-mow-color: #e53935;
  --road-completed-color: #16a34a;
  --road-highlight-opacity: .7;
  --road-highlight-width: 4px;
  --shadow: 0 10px 28px rgba(24, 45, 64, 0.11);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--background); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top left, #dfeaf4, transparent 44%), linear-gradient(145deg, #f8fafb, #e9eff4); }
.auth-card { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 28px; box-shadow: var(--shadow); }
.auth-card h1 { margin: 28px 0 5px; font-size: 1.45rem; }
.auth-card p { margin: 0 0 20px; color: var(--muted); }
.brand { display: flex; align-items: center; gap: 11px; min-width: 230px; }
.brand svg { width: 42px; height: 42px; flex: 0 0 auto; }
.brand svg rect { fill: var(--navy); }
.brand svg path { fill: none; stroke: white; stroke-width: 4; stroke-linecap: round; }
.brand strong { display: block; font-size: 1.12rem; letter-spacing: 0.01em; }
.brand span { display: block; color: var(--muted); font-size: 0.74rem; }
.brand-large svg { width: 56px; height: 56px; }
.brand-large strong { font-size: 1.45rem; }
.brand-large span { font-size: 0.82rem; }

.stack-form, .dialog-shell { display: grid; gap: 15px; }
label { display: grid; gap: 6px; font-weight: 650; font-size: 0.86rem; }
input, select { width: 100%; border: 1px solid #bcc7d1; border-radius: 10px; background: white; color: var(--ink); padding: 10px 11px; outline: none; }
input:focus, select:focus { border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(33,75,112,.14); }
button { border: 0; border-radius: 10px; padding: 9px 13px; font-weight: 700; }
button.primary { background: var(--navy); color: white; }
button.primary:hover { background: var(--navy-2); }
button.secondary { background: #e9eef2; color: var(--ink); }
button.secondary:hover, button.ghost:hover { background: #dde5eb; }
button.ghost { background: transparent; color: var(--ink); }
button.danger { background: #fde4e4; color: #a31313; }
button:disabled { cursor: not-allowed; opacity: .55; }

.app-shell { min-height: 100vh; }
.topbar { height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 20px; background: white; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; }
.topbar-actions, .toolbar-actions, .zoom-controls { display: flex; align-items: center; gap: 8px; }
.live-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .8rem; }
.live-status i { width: 9px; height: 9px; border-radius: 50%; background: #9da7b1; }
.live-status.online i { background: var(--green); box-shadow: 0 0 0 3px rgba(8,127,59,.13); }
.live-status.offline i { background: #bb7722; }
.toolbar { display: flex; align-items: end; justify-content: space-between; gap: 15px; padding: 14px 20px; background: #fbfcfd; border-bottom: 1px solid var(--border); }
.county-picker { min-width: 260px; }
.county-picker select { padding: 8px 10px; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; padding: 12px 20px; }
.metrics div { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px; }
.metrics span { display: block; color: var(--muted); font-size: .76rem; }
.metrics strong { display: block; margin-top: 2px; font-size: 1.2rem; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(390px, .82fr); gap: 14px; padding: 0 20px 20px; align-items: start; }
.map-panel, .list-panel { background: white; border: 1px solid var(--border); border-radius: 15px; overflow: hidden; }
.panel-header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.panel-header h2 { margin: 0; font-size: 1rem; }
.panel-header p { margin: 3px 0 0; color: var(--muted); font-size: .76rem; }
.zoom-controls button { min-width: 34px; padding: 7px 9px; background: #e9eef2; }
.zoom-controls span { min-width: 45px; text-align: center; color: var(--muted); font-size: .8rem; }
.map-scroller { height: calc(100vh - 280px); min-height: 520px; overflow: auto; background: #46515c; padding: 0; scroll-behavior: auto; }
.map-stage { --map-edge-space: clamp(34px, 6vw, 88px); position: relative; width: 100%; min-width: 100%; margin: 0 auto; padding: var(--map-edge-space); box-sizing: border-box; transform-origin: top left; background: #46515c; contain: layout paint; isolation: isolate; }
.map-page { position: relative; width: 100%; overflow: hidden; background: white; border: 0; outline: 2px solid rgba(255,255,255,.92); outline-offset: 0; border-radius: 3px; box-shadow: 0 0 0 2px rgba(8,17,25,.6), 0 7px 24px rgba(0,0,0,.3); isolation: isolate; }
.pdf-tile-layer { position: absolute; inset: 0; overflow: hidden; background: white; }
.pdf-tile { position: absolute; display: block; margin: 0; border: 0; image-rendering: auto; transform: translateZ(0); backface-visibility: hidden; }
.pdf-tile-loading { background: #fff; opacity: .35; }
.pdf-tile-ready { opacity: 1; }
.map-page svg { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.map-loading { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.8); color: var(--muted); font-weight: 700; }
.map-footer { min-height: 36px; padding: 9px 14px; color: var(--muted); font-size: .78rem; border-top: 1px solid var(--border); }
.list-panel { min-height: calc(100vh - 216px); }
.list-header { align-items: end; }
.search-box { width: min(230px, 48%); }
.search-box input { padding: 8px 10px; }
.road-columns { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 282px); }
.road-column { min-width: 0; }
.road-column + .road-column { border-left: 1px solid var(--border); }
.road-column > header { height: 45px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; }
.road-column > header h3 { margin: 0; font-size: .9rem; }
.road-column > header span { min-width: 28px; text-align: center; padding: 3px 7px; border-radius: 99px; font-size: .72rem; background: rgba(255,255,255,.85); }
.to-mow-column > header { background: var(--red-soft); color: #9f1414; }
.completed-column > header { background: var(--green-soft); color: #076d35; }
.road-list { height: calc(100vh - 327px); min-height: 510px; overflow-y: auto; padding: 8px; background: #fafbfc; }
.road-column.drag-over .road-list { outline: 3px dashed var(--navy-2); outline-offset: -6px; background: var(--blue-soft); }
.road-card { background: white; border: 1px solid var(--border); border-left: 4px solid var(--red); border-radius: 10px; padding: 9px; margin-bottom: 7px; cursor: pointer; }
.road-card.completed { border-left-color: var(--green); }
.road-card.selected { outline: 2px solid #2478c8; background: #f5faff; }
.road-card.dragging { opacity: .45; }
.road-card h4 { margin: 0; display: flex; justify-content: space-between; gap: 7px; font-size: .84rem; }
.road-card h4 span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .73rem; color: var(--muted); }
.road-card p { margin: 3px 0 8px; color: var(--muted); font-size: .73rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.card-actions button { padding: 5px 7px; border-radius: 7px; font-size: .68rem; background: #e9eef2; }
.card-actions button.complete { color: #086a34; background: #e5f5eb; }
.card-actions button.return { color: #9f1414; background: #fdeaea; }
.card-actions button.delete { color: #a31313; background: #ffe7e7; }
.empty-list { text-align: center; color: var(--muted); padding: 40px 10px; font-size: .82rem; }

.dialog { width: min(620px, calc(100% - 24px)); border: 0; border-radius: 16px; padding: 0; box-shadow: var(--shadow); }
.dialog::backdrop { background: rgba(15, 31, 45, .52); }
.wide-dialog { width: min(820px, calc(100% - 24px)); }
.dialog-shell { padding: 18px; max-height: min(86vh, 800px); overflow: auto; }
.dialog-shell > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.dialog-shell > header h2 { margin: 0; font-size: 1.18rem; }
.dialog-shell > header p { margin: 4px 0 0; color: var(--muted); font-size: .8rem; }
.dialog-shell > footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.icon-button { width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 1.25rem; background: #edf1f4; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.span-2 { grid-column: span 2; }
.helper { margin: -4px 0 0; color: var(--muted); font-size: .76rem; }
.user-create-form { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: #f8fafb; }
.users-list, .audit-list { display: grid; gap: 8px; }
.user-row { display: grid; grid-template-columns: 1.3fr 1fr .9fr auto; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 10px; padding: 9px; }
.user-row small { color: var(--muted); }
.audit-row { display: grid; grid-template-columns: 145px 120px 1fr; gap: 10px; border-bottom: 1px solid var(--border); padding: 9px 2px; font-size: .8rem; }
.audit-row time, .audit-row span { color: var(--muted); }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 100; max-width: min(420px, calc(100% - 36px)); background: #172a3a; color: white; padding: 11px 14px; border-radius: 10px; box-shadow: var(--shadow); opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: #9d1e1e; }

@media (max-width: 1050px) {
  .workspace { grid-template-columns: 1fr; }
  .map-scroller { height: auto; min-height: 0; max-height: 72vh; }
  .list-panel { min-height: auto; }
  .road-list { height: 520px; min-height: 0; }
}
@media (max-width: 700px) {
  .topbar { height: auto; padding: 10px 12px; align-items: flex-start; }
  .brand span { display: none; }
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
  .live-status span { display: none; }
  .toolbar { align-items: stretch; flex-direction: column; padding: 10px 12px; }
  .county-picker { min-width: 0; }
  .toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .metrics { grid-template-columns: 1fr 1fr; padding: 10px 12px; }
  .workspace { padding: 0 12px 12px; }
  .panel-header { align-items: flex-start; flex-direction: column; }
  .list-header .search-box { width: 100%; }
  .road-columns { grid-template-columns: 1fr; }
  .road-column + .road-column { border-left: 0; border-top: 1px solid var(--border); }
  .road-list { height: 380px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .user-row { grid-template-columns: 1fr; }
  .audit-row { grid-template-columns: 1fr; gap: 3px; }
}

/* v2 multi-county and map-library additions */
button, input, select, textarea { font: inherit; }
textarea { width: 100%; resize: vertical; border: 1px solid #bcc7d1; border-radius: 10px; background: white; color: var(--ink); padding: 10px 11px; outline: none; }
textarea:focus { border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(33,75,112,.14); }
.picker-group { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.picker-group .county-picker { min-width: 220px; }
.metrics { grid-template-columns: repeat(5, minmax(110px, 1fr)); }
.map-library-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.map-library-summary > div { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: #f8fafb; }
.map-library-summary strong { display: block; font-size: 1.3rem; }
.map-library-summary span { color: var(--muted); font-size: .76rem; }
#mapSyncProgress { width: 100%; height: 18px; }
.map-county-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; max-height: 320px; overflow: auto; }
.map-county-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; font-size: .78rem; }
.map-county-row.in-use { border-color: rgba(22,163,74,.55); box-shadow: inset 3px 0 0 #16a34a; }
.map-county-row > div { min-width: 0; display: grid; gap: 2px; }
.map-county-row strong { font-size: .82rem; }
.map-county-row small { color: var(--muted); white-space: normal; }
.map-county-row .compact { min-height: 34px; padding: 6px 10px; white-space: nowrap; }
code { background: #edf1f4; border-radius: 5px; padding: 1px 4px; }

@media (max-width: 900px) {
  .metrics { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
  .map-county-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .picker-group { display: grid; grid-template-columns: 1fr; }
  .picker-group .county-picker { min-width: 0; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .map-library-summary, .map-county-list { grid-template-columns: 1fr; }
}

/* v2.1 local image OCR import */
.ocr-dialog { width: min(1320px, calc(100% - 24px)); }
.ocr-layout { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(560px, 1.4fr); gap: 16px; margin: 14px 0; }
.ocr-image-panel, .ocr-review-panel { min-width: 0; border: 1px solid var(--border); border-radius: 14px; padding: 13px; background: #f8fafb; }
.ocr-image-panel { display: grid; gap: 11px; align-content: start; }

.ocr-read-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .62fr); gap: 9px; }
.ocr-read-actions > button { width: 100%; min-height: 48px; }
.ai-read-button { border-color: #6d4bc3; background: #6d4bc3; color: #fff; }
.ai-read-button:hover { background: #5d3eaf; border-color: #5d3eaf; }
.ocr-ai-help { margin: -2px 0 0; padding: 9px 10px; border: 1px solid rgba(109, 75, 195, .32); border-radius: 10px; background: rgba(109, 75, 195, .08); color: var(--muted); font-size: .74rem; line-height: 1.4; }
.ocr-ai-working { color: #5b3da6; font-weight: 750; }
.ocr-ai-notice { margin: 8px 0 0; padding-top: 7px; border-top: 1px solid currentColor; font-weight: 750; }
html[data-theme="dark"] .ai-read-button { background: #7c5bd2; border-color: #9275df; color: #fff; }
html[data-theme="dark"] .ocr-ai-help { background: rgba(124, 91, 210, .14); border-color: rgba(160, 132, 230, .4); }
html[data-theme="dark"] .ocr-ai-working { color: #c5b4f5; }
.ocr-preview-wrap { position: relative; display: grid; place-items: center; min-height: 320px; max-height: 480px; overflow: auto; border: 1px dashed #9aa9b7; border-radius: 12px; background: #e9eef2; }
#ocrPreviewCanvas { display: block; max-width: 100%; height: auto; background: white; }
.ocr-preview-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 25px; color: var(--muted); text-align: center; }
.ocr-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ocr-controls > label { display: flex; flex-direction: row; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 9px; padding: 6px 8px; background: white; font-size: .76rem; }
.ocr-controls input[type="range"] { width: 110px; }
.check-label input { width: auto; }
#ocrProgress { width: 100%; height: 17px; }
.ocr-review-panel { display: grid; gap: 10px; align-content: start; }
.ocr-review-header { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.ocr-review-header h3 { margin: 0; font-size: 1rem; }
.ocr-review-header p { margin: 3px 0 0; color: var(--muted); font-size: .76rem; }
.ocr-errors { min-height: 24px; border-radius: 9px; padding: 8px 10px; background: #fff3db; color: #775111; font-size: .76rem; }
.ocr-errors:empty { display: none; }
.ocr-errors ul { margin: 6px 0 0 18px; padding: 0; }
.ocr-errors li { margin: 3px 0; }
.ocr-ok { color: #08703a; }
.ocr-table-wrap { max-height: 410px; overflow: auto; border: 1px solid var(--border); border-radius: 11px; background: white; }
.ocr-table { width: 100%; min-width: 850px; border-collapse: collapse; font-size: .73rem; }
.ocr-table th { position: sticky; top: 0; z-index: 1; padding: 8px 6px; text-align: left; background: #e9eef2; border-bottom: 1px solid var(--border); }
.ocr-table td { padding: 6px; border-bottom: 1px solid #e8edf1; vertical-align: middle; }
.ocr-table input, .ocr-table select { min-width: 82px; width: 100%; padding: 6px 7px; font-size: .72rem; }
.ocr-table td:nth-child(1) { width: 42px; text-align: center; }
.ocr-table td:nth-child(1) input { width: auto; min-width: 0; }
.ocr-table td:nth-child(2) { width: 110px; }
.ocr-table td:nth-child(3) { min-width: 190px; }
.ocr-table td:nth-child(4), .ocr-table td:nth-child(5) { width: 92px; }
.ocr-table td:nth-child(6) { width: 105px; }
.ocr-table td:nth-child(7) { width: 145px; }
.ocr-check { display: inline-block; border-radius: 99px; padding: 4px 7px; white-space: nowrap; }
.ocr-check.ok { color: #08703a; background: #e5f5eb; }
.ocr-check.bad { color: #9f1414; background: #fdeaea; }
.ocr-invalid { background: #fff8f8; }

@media (max-width: 1050px) {
  .ocr-layout { grid-template-columns: 1fr; }
  .ocr-preview-wrap { min-height: 260px; max-height: 400px; }
}


/* v2.2 iOS / PWA and multi-format import */
html { min-height: 100%; background: var(--background); }
body { min-height: 100%; -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
textarea { width: 100%; border: 1px solid #bcc7d1; border-radius: 10px; background: white; color: var(--ink); padding: 10px 11px; font: inherit; resize: vertical; }
button { touch-action: manipulation; }
.topbar { padding-top: env(safe-area-inset-top); height: calc(66px + env(safe-area-inset-top)); }
.mobile-tabs { display: none; }
.import-source-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.import-source { min-height: 76px; display: grid; gap: 4px; text-align: left; align-content: center; padding: 12px 14px; border: 1px solid #bdc9d3; background: #f7fafc; }
.import-source:hover { border-color: var(--navy-2); background: var(--blue-soft); }
.import-source strong { font-size: .9rem; }
.import-source span { color: var(--muted); font-size: .72rem; font-weight: 500; }
.import-drop-zone { display: grid; place-items: center; min-height: 58px; border: 2px dashed #a8b6c2; border-radius: 12px; color: var(--muted); background: #fafcfd; font-size: .8rem; font-weight: 700; }
.import-drop-zone.drag-over { border-color: var(--navy-2); background: var(--blue-soft); color: var(--navy); }
.supported-types { margin: -4px 0 0; color: var(--muted); font-size: .7rem; }
.source-summary { display: grid; gap: 2px; }
.source-summary strong { overflow-wrap: anywhere; font-size: .86rem; }
.source-summary span { color: var(--muted); font-size: .72rem; }
.text-actions { display: flex; align-items: center; gap: 10px; }
.text-actions span { color: var(--muted); font-size: .72rem; }
.install-steps { display: grid; gap: 6px; line-height: 1.5; }
.install-steps p { margin: 0; }

@media (max-width: 760px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .auth-shell { min-height: 100dvh; padding: calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom)); }
  .auth-card { border-radius: 20px; padding: 22px 18px; }
  .topbar { min-height: calc(58px + env(safe-area-inset-top)); height: auto; padding: env(safe-area-inset-top) 10px 0; gap: 8px; align-items: center; }
  .brand { min-width: 0; gap: 8px; }
  .brand svg { width: 36px; height: 36px; }
  .brand strong { font-size: 1rem; white-space: nowrap; }
  .brand span { display: none; }
  .topbar-actions { gap: 2px; min-width: 0; }
  .live-status > span { display: none; }
  #profileButton { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; padding: 8px 6px; }
  #logoutButton { font-size: 0; width: 42px; padding: 8px; }
  #logoutButton::after { content: '↪'; font-size: 1.2rem; }
  .toolbar { display: grid; padding: 10px; gap: 10px; align-items: stretch; }
  .picker-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .county-picker { min-width: 0; font-size: .72rem; }
  .county-picker select { min-height: 44px; font-size: .84rem; }
  .toolbar-actions { display: flex; grid-template-columns: none; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 3px; scrollbar-width: none; }
  .toolbar-actions::-webkit-scrollbar { display: none; }
  .toolbar-actions button { flex: 0 0 auto; min-height: 42px; }
  .metrics { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(125px, 42vw); grid-template-columns: none; overflow-x: auto; padding: 9px 10px; scroll-snap-type: x proximity; }
  .metrics div { scroll-snap-align: start; }
  .workspace { display: block; padding: 0 8px 12px; }
  .map-panel, .list-panel { border-radius: 13px; }
  #appScreen[data-mobile-view="map"] .list-panel { display: none; }
  #appScreen[data-mobile-view="roads"] .map-panel { display: none; }
  .panel-header { min-height: 56px; padding: 10px; }
  .panel-header p { font-size: .68rem; }
  .zoom-controls { gap: 4px; }
  .zoom-controls button { min-height: 40px; min-width: 40px; }
  .map-scroller { height: 62dvh; min-height: 360px; padding: 6px; }
  .list-panel { min-height: auto; }
  .list-header { display: grid; align-items: stretch; }
  .search-box { width: 100%; }
  .road-columns { grid-template-columns: 1fr; min-height: 0; }
  .road-column + .road-column { border-left: 0; border-top: 1px solid var(--border); }
  .road-list { height: auto; min-height: 220px; max-height: 46dvh; }
  .road-card { padding: 11px; }
  .card-actions button { min-height: 38px; padding: 7px 9px; }
  .mobile-tabs { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; height: calc(62px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); padding: 5px 6px env(safe-area-inset-bottom); background: rgba(255,255,255,.96); border-top: 1px solid var(--border); box-shadow: 0 -8px 22px rgba(24,45,64,.1); backdrop-filter: blur(16px); }
  .mobile-tabs button { display: grid; place-items: center; gap: 1px; min-height: 50px; padding: 3px; background: transparent; color: var(--muted); border-radius: 12px; }
  .mobile-tabs button span { font-size: 1.25rem; line-height: 1; }
  .mobile-tabs button small { font-size: .65rem; font-weight: 800; }
  .mobile-tabs button.active { color: var(--navy); background: var(--blue-soft); }
  .dialog, .wide-dialog, .ocr-dialog { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .dialog-shell { min-height: 100dvh; max-height: none; padding: calc(14px + env(safe-area-inset-top)) 12px calc(90px + env(safe-area-inset-bottom)); align-content: start; }
  .dialog-shell > header { position: sticky; top: calc(-14px - env(safe-area-inset-top)); z-index: 5; margin: calc(-14px - env(safe-area-inset-top)) -12px 0; padding: calc(12px + env(safe-area-inset-top)) 12px 12px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); }
  .dialog-shell > footer { position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; justify-content: stretch; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--border); backdrop-filter: blur(14px); }
  .dialog-shell > footer button { flex: 1; min-height: 46px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  input, select, textarea { min-height: 44px; font-size: 16px; }
  .import-source-grid { grid-template-columns: 1fr; }
  .import-source { min-height: 62px; }
  .import-drop-zone { display: none; }
  .supported-types { font-size: .68rem; }
  .ocr-layout { grid-template-columns: 1fr; gap: 10px; }
  .ocr-read-actions { grid-template-columns: 1fr; }
  .ocr-image-panel, .ocr-review-panel { padding: 10px; }
  .ocr-preview-wrap { min-height: 220px; max-height: 42dvh; }
  .ocr-controls > label { min-height: 44px; }
  .text-actions { align-items: stretch; flex-direction: column; }
  .text-actions button { min-height: 44px; }
  .ocr-table-wrap { max-height: none; overflow: visible; border: 0; background: transparent; }
  .ocr-table { min-width: 0; display: block; }
  .ocr-table thead { display: none; }
  .ocr-table tbody { display: grid; gap: 10px; }
  .ocr-table tr { display: grid; grid-template-columns: 72px 1fr; gap: 7px 10px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: white; }
  .ocr-table td { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 8px; width: auto !important; min-width: 0 !important; padding: 0; border: 0; grid-column: 1 / -1; }
  .ocr-table td::before { color: var(--muted); font-size: .67rem; font-weight: 800; }
  .ocr-table td:nth-child(1)::before { content: 'Import'; }
  .ocr-table td:nth-child(2)::before { content: 'Route'; }
  .ocr-table td:nth-child(3)::before { content: 'Road'; }
  .ocr-table td:nth-child(4)::before { content: 'Start MP'; }
  .ocr-table td:nth-child(5)::before { content: 'End MP'; }
  .ocr-table td:nth-child(6)::before { content: 'Status'; }
  .ocr-table td:nth-child(7)::before { content: 'Check'; }
  .ocr-table td:nth-child(1) input { width: 24px; height: 24px; }
  .ocr-table input, .ocr-table select { min-width: 0; font-size: 16px; }
  .toast { left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateY(20px); }
  .toast.show { transform: translateY(0); }
}

@media (display-mode: standalone) {
  #installAppButton { display: none !important; }
}

/* v2.3 Simple Mode — designed to need no training */
:root {
  --simple-radius: 18px;
  --simple-touch: 52px;
}

.simple-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  align-items: end;
  gap: 16px;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.simple-pickers { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(120px, .8fr); gap: 10px; }
.simple-pickers label { font-size: .8rem; }
.simple-pickers select { min-height: 48px; font-size: 1rem; font-weight: 750; }
.quick-actions { display: grid; grid-template-columns: repeat(4, minmax(132px, 1fr)) 86px; gap: 10px; }
.quick-action {
  min-height: 68px;
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 9px;
  padding: 10px 13px;
  text-align: left;
  background: #eef3f7;
  border: 1px solid #d2dbe3;
  color: var(--ink);
}
.quick-action > span { grid-row: 1 / 3; align-self: center; font-size: 1.55rem; }
.quick-action strong { align-self: end; font-size: .9rem; }
.quick-action small { align-self: start; color: var(--muted); font-size: .68rem; font-weight: 600; }
.quick-action.primary { background: var(--navy); border-color: var(--navy); color: white; }
.quick-action.primary small { color: #dce8f2; }
.quick-action:hover { border-color: var(--navy-2); transform: translateY(-1px); }
.more-menu { position: relative; }
.more-menu > summary {
  min-height: 68px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 8px;
  border: 1px solid #d2dbe3;
  border-radius: 12px;
  background: #eef3f7;
  cursor: pointer;
  list-style: none;
}
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu > summary span { font-size: 1.1rem; letter-spacing: .08em; }
.more-menu > summary strong { font-size: .72rem; }
.more-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  width: 230px;
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: white;
  box-shadow: var(--shadow);
}
.more-menu-panel button { min-height: 42px; text-align: left; }

.simple-progress {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(400px, 1.25fr);
  gap: 12px;
  padding: 12px 20px;
}
.progress-title, .summary-button {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: white;
}
.progress-title { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px 12px; padding: 11px 14px; }
.progress-title > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.progress-title span { color: var(--muted); font-size: .78rem; font-weight: 750; }
.progress-title strong { font-size: 1.4rem; }
.progress-title small { grid-column: 1 / -1; color: var(--muted); font-size: .7rem; }
.progress-track { height: 12px; overflow: hidden; border-radius: 99px; background: #e5eaee; }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--green); transition: width .35s ease; }
.status-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.summary-button {
  min-height: 64px;
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  align-items: center;
  gap: 11px;
  padding: 9px 14px;
  text-align: left;
}
.summary-button:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(24,45,64,.08); }
.summary-button > span:not(.status-dot) { display: grid; }
.summary-button strong { font-size: 1.18rem; line-height: 1.1; }
.summary-button small { color: var(--muted); font-size: .67rem; }
.status-dot, .legend { display: inline-block; border-radius: 50%; }
.status-dot { width: 17px; height: 17px; }
.legend { width: 10px; height: 10px; vertical-align: 0; }
.red { background: var(--red); }
.green { background: #00a63f; }
.to-mow-summary { background: linear-gradient(90deg, var(--red-soft), white 34%); }
.done-summary { background: linear-gradient(90deg, var(--green-soft), white 34%); }

.simple-workspace { grid-template-columns: minmax(0, 1.45fr) minmax(360px, .75fr); }
.simple-panel-header h2 { font-size: 1.12rem; }
.simple-list-header { align-items: center; }
.simple-list-header strong { color: var(--green); }
.status-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; background: #f6f8fa; border-bottom: 1px solid var(--border); }
.status-tabs button {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: .9rem;
}
.status-tabs button span { min-width: 29px; padding: 3px 8px; border-radius: 99px; background: #e5eaee; font-size: .72rem; }
.status-tabs button.active[data-list-view="to_mow"] { color: #9f1414; border-color: #f1caca; background: var(--red-soft); }
.status-tabs button.active[data-list-view="completed"] { color: #076d35; border-color: #bfe3cd; background: var(--green-soft); }
.road-columns { display: block; min-height: calc(100vh - 390px); }
.road-columns[data-list-view="to_mow"] .completed-column,
.road-columns[data-list-view="completed"] .to-mow-column { display: none; }
.road-column + .road-column { border: 0; }
.road-column > header { display: none; }
.road-list { height: calc(100vh - 390px); min-height: 430px; padding: 10px; }
.road-card {
  display: grid;
  gap: 5px;
  padding: 12px;
  margin-bottom: 10px;
  border-left-width: 6px;
  border-radius: 13px;
  cursor: default;
}
.road-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.route-number { font-size: 1.02rem; font-weight: 850; color: var(--ink); }
.mileposts { color: var(--muted); font-size: .8rem; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.road-card p { margin: 0 0 5px; font-size: .83rem; }
.road-completed-date {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 5px;
  margin: 0 0 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--green-soft);
  color: #076d35;
  font-size: .72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.card-actions { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto auto; gap: 7px; }
.card-actions button { min-height: 42px; padding: 8px 11px; font-size: .78rem; }
.card-actions .main-card-action { min-height: 46px; font-size: .92rem; }
.card-actions button.complete { color: white; background: var(--green); }
.card-actions button.complete:hover { background: #066b33; }
.card-actions button.return { color: #7d1c1c; background: #fde7e7; }
.card-actions .part-action { color: var(--navy); background: var(--blue-soft); }
.card-actions .small-action { background: #eef2f5; }
.empty-list { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 6px; padding: 40px 18px; }
.empty-list strong { color: var(--ink); font-size: 1rem; }
.empty-list span { max-width: 250px; line-height: 1.45; }
.map-scroller { height: calc(100vh - 390px); min-height: 430px; }

@media (max-width: 1180px) {
  .simple-toolbar { grid-template-columns: 1fr; align-items: stretch; }
  .quick-actions { grid-template-columns: repeat(4, 1fr) 80px; }
  .simple-progress { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { background: #edf1f4; }
  .topbar { background: var(--navy); border-bottom: 0; color: white; }
  .brand svg rect { fill: white; }
  .brand svg path { stroke: var(--navy); }
  .brand span { display: none; }
  .topbar .ghost { color: white; }
  .topbar .ghost:hover { background: rgba(255,255,255,.12); }
  .live-status i { outline: 2px solid rgba(255,255,255,.6); }
  #profileButton { max-width: 90px; color: white; }
  .simple-toolbar { gap: 10px; padding: 10px; background: white; }
  .simple-pickers { grid-template-columns: 1fr; }
  .sheet-picker-wrap { display: none; }
  .simple-pickers label { font-size: .76rem; }
  .simple-pickers select { min-height: 54px; border-radius: 14px; font-size: 1.05rem; }
  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .quick-action { min-height: 78px; grid-template-columns: 1fr; grid-template-rows: auto auto; place-items: center; gap: 3px; padding: 8px 5px; text-align: center; border-radius: 14px; }
  .quick-action > span { grid-row: auto; font-size: 1.42rem; }
  .quick-action strong { font-size: .74rem; }
  .quick-action small { display: none; }
  .more-menu { grid-column: 1 / -1; }
  .more-menu > summary { min-height: 43px; display: flex; gap: 8px; border-radius: 12px; }
  .more-menu-panel { position: static; width: 100%; margin-top: 7px; box-shadow: none; background: #f8fafb; }
  .simple-progress { gap: 8px; padding: 0 10px 10px; }
  .progress-title { grid-template-columns: auto 1fr; border-radius: 14px; }
  .status-summary { gap: 8px; }
  .summary-button { min-height: 70px; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr; gap: 0 8px; padding: 8px 10px; }
  .summary-button .status-dot { grid-row: 1 / 3; }
  .summary-button > span:last-child { display: none; }
  .summary-button strong { font-size: 1.25rem; }
  .simple-workspace { padding: 0 8px 12px; }
  .simple-panel-header { min-height: 58px; }
  .simple-panel-header p { line-height: 1.45; }
  .map-scroller { height: 59dvh; min-height: 350px; }
  .list-panel { overflow: visible; }
  .simple-list-header { display: grid; gap: 10px; }
  .status-tabs { position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 15; padding: 8px; }
  .status-tabs button { min-height: 52px; font-size: .95rem; }
  .road-columns { min-height: 0; }
  .road-list { height: auto; min-height: 300px; max-height: none; padding: 8px; }
  .road-card { padding: 13px; margin-bottom: 9px; }
  .route-number { font-size: 1.08rem; }
  .mileposts { font-size: .82rem; }
  .road-card p { white-space: normal; line-height: 1.35; font-size: .84rem; }
  .card-actions { grid-template-columns: 1fr 1fr; }
  .card-actions .main-card-action { grid-column: 1 / -1; min-height: 54px; font-size: 1.02rem; }
  .card-actions button { min-height: 46px; font-size: .8rem; }
  .mobile-tabs button small { font-size: .68rem; }
  .mobile-tabs button span { font-size: 1.18rem; }
}

@media (max-width: 390px) {
  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-action strong { font-size: .68rem; }
  .status-summary { grid-template-columns: 1fr 1fr; }
}

.ocr-county-step {
  display: grid;
  grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  padding: 12px;
  border: 2px solid color-mix(in srgb, var(--navy-2) 45%, var(--border));
  border-radius: 14px;
  background: var(--blue-soft);
}
.ocr-county-step label { margin: 0; font-size: .82rem; font-weight: 850; }
.ocr-county-step select { min-height: 50px; margin-top: 5px; font-size: 1rem; font-weight: 800; }
.ocr-county-step p { margin: 0 0 7px; color: var(--muted); font-size: .78rem; line-height: 1.4; }
html[data-theme="dark"] .ocr-county-step { background: rgba(35, 112, 170, .16); }
@media (max-width: 700px) {
  .ocr-county-step { grid-template-columns: 1fr; align-items: stretch; }
  .ocr-county-step p { margin: 0; }
}

.photo-tools, .raw-text-tools {
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #f8fafb;
}
.photo-tools > summary, .raw-text-tools > summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 9px 11px;
  color: var(--navy);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 800;
}
.photo-tools[open] > summary, .raw-text-tools[open] > summary { border-bottom: 1px solid var(--border); }
.photo-tools .ocr-controls, .raw-text-tools label, .raw-text-tools .text-actions { margin: 10px; }
.raw-text-tools textarea { margin-top: 5px; }
@media (max-width: 760px) {
  .photo-tools > summary, .raw-text-tools > summary { min-height: 48px; font-size: .82rem; }
}


/* v2.4 dark-first theme, desktop layout repair, safer history, and iOS map gestures */
html[data-theme="dark"] {
  color-scheme: dark;
  --navy: #1f5f91;
  --navy-2: #2f7db8;
  --green: #20b968;
  --green-soft: #102c20;
  --red: #ff5b5b;
  --red-soft: #35191c;
  --blue-soft: #132c40;
  --ink: #eef5fb;
  --muted: #9cafc0;
  --border: #2b3c4b;
  --surface: #111c26;
  --background: #07111a;
  --shadow: 0 12px 32px rgba(0, 0, 0, .42);
}
html[data-theme="dark"], html[data-theme="dark"] body { background: var(--background); color: var(--ink); }
html[data-theme="dark"] .auth-shell { background: radial-gradient(circle at top left, #14334b, transparent 46%), linear-gradient(145deg, #07111a, #0b1823); }
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .simple-toolbar,
html[data-theme="dark"] .map-panel,
html[data-theme="dark"] .list-panel,
html[data-theme="dark"] .progress-title,
html[data-theme="dark"] .summary-button,
html[data-theme="dark"] .road-card,
html[data-theme="dark"] .dialog,
html[data-theme="dark"] .more-menu-panel,
html[data-theme="dark"] .ocr-table-wrap,
html[data-theme="dark"] .ocr-table tr,
html[data-theme="dark"] .mobile-tabs { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background: #0c1721; color: var(--ink); border-color: #3b4d5c; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #708596; }
html[data-theme="dark"] button.secondary,
html[data-theme="dark"] .quick-action,
html[data-theme="dark"] .more-menu > summary,
html[data-theme="dark"] .zoom-controls button,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .card-actions .small-action { background: #1a2a36; color: var(--ink); border-color: #354958; }
html[data-theme="dark"] .road-completed-date { background: rgba(22, 163, 74, .18); color: #77d99a; }
html[data-theme="dark"] button.secondary:hover,
html[data-theme="dark"] button.ghost:hover { background: #263946; }
html[data-theme="dark"] .road-list,
html[data-theme="dark"] .status-tabs,
html[data-theme="dark"] .ocr-image-panel,
html[data-theme="dark"] .ocr-review-panel,
html[data-theme="dark"] .photo-tools,
html[data-theme="dark"] .raw-text-tools,
html[data-theme="dark"] .user-create-form,
html[data-theme="dark"] .map-library-summary > div { background: #0b151e; }
html[data-theme="dark"] .ocr-table th { background: #1a2a36; }
html[data-theme="dark"] .import-source,
html[data-theme="dark"] .import-drop-zone { background: #0c1721; color: var(--ink); border-color: #3b4d5c; }
html[data-theme="dark"] .to-mow-summary { background: linear-gradient(90deg, #35191c, var(--surface) 42%); }
html[data-theme="dark"] .done-summary { background: linear-gradient(90deg, #102c20, var(--surface) 42%); }
html[data-theme="dark"] .status-tabs button span { background: #243440; }
html[data-theme="dark"] .map-scroller { background: #202c35; }
html[data-theme="dark"] .map-stage,
html[data-theme="dark"] .map-stage canvas { background: white; }
html[data-theme="dark"] .map-loading { background: rgba(9, 19, 28, .88); }
html[data-theme="dark"] .toast { background: #e8f2f9; color: #0b1720; }
html[data-theme="dark"] .toast.error { background: #ffdddd; color: #661414; }
html[data-theme="dark"] .dialog-shell > header,
html[data-theme="dark"] .dialog-shell > footer { background: rgba(17, 28, 38, .97); }
html[data-theme="dark"] code { background: #1c2b36; }

/* Use the remaining desktop viewport instead of fixed minimum heights. */
@media (min-width: 1051px) and (min-height: 720px) {
  html, body { height: 100%; overflow: hidden; }
  .app-shell:not(.hidden) {
    height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    overflow: hidden;
  }
  .simple-toolbar, .simple-progress { min-height: 0; }
  .simple-workspace {
    min-height: 0;
    height: 100%;
    align-items: stretch;
    overflow: hidden;
  }
  .map-panel, .list-panel {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .map-scroller { height: auto; min-height: 0; flex: 1 1 auto; }
  .list-panel .road-columns { height: auto; min-height: 0; flex: 1 1 auto; overflow: hidden; }
  .road-column { height: 100%; min-height: 0; display: flex; flex-direction: column; }
  .road-list { height: auto; min-height: 0; flex: 1 1 auto; }
}

@media (min-width: 1051px) and (max-width: 1450px) {
  .simple-toolbar { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 12px; }
  .quick-actions { grid-template-columns: repeat(4, minmax(112px, 1fr)) 72px; gap: 8px; }
  .quick-action { padding: 9px 10px; }
  .quick-action small { font-size: .63rem; }
  .simple-workspace { grid-template-columns: minmax(0, 1.55fr) minmax(330px, .72fr); }
}

.map-scroller {
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  -webkit-user-select: none;
  user-select: none;
}
.map-stage { min-width: 100%; }
.share-symbol { display: inline-block; font-size: 1.15em; font-weight: 900; }

.history-note { padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--blue-soft); color: var(--muted); font-size: .77rem; line-height: 1.45; }
.audit-row { grid-template-columns: 150px 125px minmax(0, 1fr) auto; align-items: center; }
.audit-description { min-width: 0; display: grid; gap: 3px; }
.audit-description small { color: var(--muted); overflow-wrap: anywhere; }
.audit-actions { display: flex; justify-content: flex-end; min-width: 76px; }
.history-undo { min-height: 38px; background: var(--blue-soft); color: var(--navy-2); border: 1px solid color-mix(in srgb, var(--navy-2) 45%, transparent); }
.history-undone { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 8px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); font-size: .69rem; font-weight: 750; }
.audit-row.is-undone { opacity: .67; }

@media (max-width: 1050px), (max-height: 719px) {
  html, body { height: auto; overflow: auto; }
  .app-shell { height: auto; min-height: 100dvh; display: block; overflow: visible; }
}

@media (max-width: 760px) {
  .audit-row { grid-template-columns: 1fr auto; gap: 5px 10px; padding: 12px 3px; }
  .audit-row time, .audit-row > span { grid-column: 1; }
  .audit-description { grid-column: 1; }
  .audit-actions { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .history-undo { min-width: 72px; min-height: 46px; }
  .zoom-controls span { min-width: 40px; }
}


/* v2.5 per-account map highlight appearance */
.map-style-dialog { width: min(560px, calc(100% - 20px)); }
.map-style-preview { --preview-to-mow: #e53935; --preview-completed: #16a34a; --preview-opacity: .7; --preview-width: 4px; display: grid; gap: 12px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(#f8fafb, #edf2f5); overflow: hidden; }
.map-style-preview > div { display: grid; grid-template-columns: minmax(100px, 1fr) 78px; align-items: center; gap: 12px; }
.preview-line { display: block; height: 0; border-top-style: solid; border-top-width: var(--preview-width); opacity: var(--preview-opacity); border-radius: 99px; }
.preview-line.to-mow { border-top-color: var(--preview-to-mow); }
.preview-line.completed { border-top-color: var(--preview-completed); }
.map-style-preview strong { font-size: .8rem; color: #17202a; }
.map-style-color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.map-style-color-grid input[type="color"] { min-height: 48px; padding: 4px; cursor: pointer; }
.range-setting > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.range-setting output { min-width: 52px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.range-setting input[type="range"] { width: 100%; accent-color: var(--navy-2); }
html[data-theme="dark"] .map-style-preview { background: linear-gradient(#eef2f4, #dce4e8); }
@media (max-width: 520px) {
  .map-style-color-grid { grid-template-columns: 1fr; }
  .map-style-dialog .dialog-shell > footer { display: grid; grid-template-columns: 1fr 1fr; }
  .map-style-dialog #resetMapStyle { grid-column: 1 / -1; }
}


/* v2.6 easier map finding and add-by-name */
.map-library-tools { display: grid; grid-template-columns: 1fr minmax(190px, .45fr); gap: 10px; }
.map-library-tools label { margin: 0; }
.county-picker select optgroup, #roadCountySelect optgroup { font-weight: 800; }
#routeSelect option { font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .map-county-row.in-use { border-color: rgba(61,214,112,.5); box-shadow: inset 3px 0 0 #3dd670; }
@media (max-width: 620px) {
  .map-library-tools { grid-template-columns: 1fr; }
  .map-library-summary { grid-template-columns: 1fr 1fr; }
  .map-county-row { align-items: stretch; }
  .map-county-row .compact { min-width: 78px; }
}


/* v2.7 sharp PDF rendering and clearer pixel-size controls */
.range-scale { display: flex; justify-content: space-between; gap: 10px; margin-top: -4px; color: var(--muted); font-size: .68rem; font-weight: 700; }
.map-quality-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--blue-soft); color: var(--muted); font-size: .76rem; }
.map-quality-note::before { content: '✓'; color: var(--green); font-weight: 900; }


/* v2.9 map full-screen viewer */
.fullscreen-map-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}
.fullscreen-map-button .fullscreen-icon { font-size: 1rem; line-height: 1; }
.fullscreen-map-button[aria-pressed="true"] { background: var(--navy); color: white; }
body.map-fullscreen-active { overflow: hidden !important; }

.map-panel:fullscreen,
.map-panel:-webkit-full-screen,
.map-panel.map-fullscreen-fallback {
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--surface, white);
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.map-panel.map-fullscreen-fallback {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5000 !important;
}
.map-panel:fullscreen .panel-header,
.map-panel:-webkit-full-screen .panel-header,
.map-panel.map-fullscreen-fallback .panel-header {
  flex: 0 0 auto;
  padding-top: max(12px, env(safe-area-inset-top));
}
.map-panel:fullscreen .map-scroller,
.map-panel:-webkit-full-screen .map-scroller,
.map-panel.map-fullscreen-fallback .map-scroller {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 1 1 auto !important;
}
.map-panel:fullscreen .map-footer,
.map-panel:-webkit-full-screen .map-footer,
.map-panel.map-fullscreen-fallback .map-footer {
  flex: 0 0 auto;
  padding-bottom: max(9px, env(safe-area-inset-bottom));
}

@media (max-width: 760px) {
  .fullscreen-map-button { padding-inline: 10px; }
  .map-panel:fullscreen .simple-panel-header,
  .map-panel:-webkit-full-screen .simple-panel-header,
  .map-panel.map-fullscreen-fallback .simple-panel-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
  }
  .map-panel:fullscreen .zoom-controls,
  .map-panel:-webkit-full-screen .zoom-controls,
  .map-panel.map-fullscreen-fallback .zoom-controls {
    width: 100%;
    justify-content: center;
  }
}


/* v3.0 full-quality tiled PDF viewer and edge-access frame */
html[data-theme="dark"] .map-scroller,
html[data-theme="dark"] .map-stage { background: #1f2831; }
html[data-theme="dark"] .map-page { outline-color: rgba(222,232,240,.72); box-shadow: 0 0 0 2px rgba(0,0,0,.92), 0 8px 28px rgba(0,0,0,.6); }
.map-panel:fullscreen .map-stage,
.map-panel:-webkit-full-screen .map-stage,
.map-panel.map-fullscreen-fallback .map-stage { --map-edge-space: clamp(52px, 9vw, 132px); }
.map-panel:fullscreen .map-scroller,
.map-panel:-webkit-full-screen .map-scroller,
.map-panel.map-fullscreen-fallback .map-scroller { background: #26313a; }
@media (max-width: 760px) {
  .map-stage { --map-edge-space: clamp(38px, 11vw, 76px); }
  .map-panel:fullscreen .map-stage,
  .map-panel:-webkit-full-screen .map-stage,
  .map-panel.map-fullscreen-fallback .map-stage { --map-edge-space: clamp(60px, 18vw, 112px); padding-bottom: max(var(--map-edge-space), calc(72px + env(safe-area-inset-bottom))); }
  .map-page { outline-width: 2px; box-shadow: 0 0 0 2px rgba(8,17,25,.72), 0 6px 20px rgba(0,0,0,.38); }
}


/* v3.1 local B&K Help bot */
.help-fab {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 9px 16px 9px 10px;
  border: 1px solid color-mix(in srgb, var(--navy-2) 55%, var(--border));
  border-radius: 999px;
  background: var(--navy);
  color: white;
  box-shadow: 0 10px 30px rgba(0,0,0,.24);
}
.help-fab > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 1.15rem; }
.help-fab strong { font-size: .9rem; }
.help-dialog { width: min(720px, calc(100% - 20px)); }
.help-shell { grid-template-rows: auto auto auto minmax(180px, 1fr) auto auto; max-height: min(780px, calc(100dvh - 24px)); }
.help-header-actions { display: flex; align-items: center; gap: 10px; }
.help-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--muted); font-size: .72rem; font-weight: 800; }
.help-status i { width: 9px; height: 9px; border-radius: 50%; background: #9ca8b3; }
.help-status.online i { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); }
.help-status.warning i { background: #d58a17; }
.help-status.offline i { background: #cc5a45; }
.help-status.checking i { animation: help-pulse 1s ease-in-out infinite; }
@keyframes help-pulse { 50% { opacity: .35; transform: scale(.78); } }
.help-notice { padding: 10px 12px; border: 1px solid color-mix(in srgb, #d58a17 45%, var(--border)); border-radius: 11px; background: color-mix(in srgb, #d58a17 12%, var(--surface)); color: var(--ink); font-size: .78rem; line-height: 1.45; }
.help-suggestions { display: flex; flex-wrap: wrap; gap: 7px; }
.help-suggestions button { background: var(--blue-soft); color: var(--navy-2); border: 1px solid color-mix(in srgb, var(--navy-2) 24%, var(--border)); padding: 8px 10px; font-size: .74rem; }
.help-messages { min-height: 220px; max-height: 48dvh; overflow-y: auto; display: grid; align-content: start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--background); }
.help-message { max-width: 88%; display: grid; gap: 5px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.help-message.user { justify-self: end; background: var(--navy); color: white; border-color: transparent; }
.help-message.assistant { justify-self: start; }
.help-message header { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .72rem; }
.help-message header small { color: var(--muted); }
.help-message.user header small { color: rgba(255,255,255,.72); }
.help-message p { margin: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.48; font-size: .86rem; }
.help-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: stretch; }
.help-composer textarea { width: 100%; min-height: 54px; max-height: 150px; resize: vertical; border: 1px solid #bcc7d1; border-radius: 12px; background: var(--surface); color: var(--ink); padding: 10px 11px; font: inherit; }
.help-composer button { min-width: 86px; }
.help-bottom-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: .7rem; }
.help-bottom-row button { padding: 6px 9px; font-size: .72rem; }
html[data-theme="dark"] .help-message.user { background: #235b87; }
html[data-theme="dark"] .help-composer textarea { border-color: #40525f; }
@media (max-width: 760px) {
  .help-fab { right: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); min-height: 48px; padding: 8px 13px 8px 8px; }
  .help-fab > span { width: 31px; height: 31px; }
  .help-dialog { width: calc(100% - 10px); max-width: none; }
  .help-shell { max-height: calc(100dvh - 10px); }
  .help-shell > header { align-items: flex-start; }
  .help-header-actions { flex-direction: column-reverse; align-items: flex-end; }
  .help-suggestions { display: grid; grid-template-columns: 1fr 1fr; }
  .help-suggestions button { min-height: 43px; }
  .help-messages { min-height: 210px; max-height: 42dvh; }
  .help-message { max-width: 94%; }
  .help-composer { grid-template-columns: 1fr; }
  .help-composer button { min-height: 46px; }
}

/* v3.1.2 desktop click-and-drag map panning */
@media (pointer: fine) {
  .map-scroller { cursor: grab; }
  .map-scroller.is-drag-panning,
  .map-scroller.is-drag-panning * { cursor: grabbing !important; }
}
.map-scroller.is-drag-panning { scroll-behavior: auto; }
.pdf-tile, .map-page, .map-stage { -webkit-user-drag: none; }


/* v3.2 remote administrator updates */
.admin-update-panel { display: grid; gap: 12px; margin-top: 3px; }
.settings-divider { height: 1px; background: var(--border); margin: 3px 0 2px; }
.admin-update-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-update-heading h3 { margin: 0; font-size: 1rem; }
.admin-update-heading p { margin: 4px 0 0; color: var(--muted); font-size: .78rem; }
.version-badge, .signed-badge { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.version-badge { padding: 5px 8px; background: var(--blue-soft); color: var(--navy); border: 1px solid var(--border); }
.signed-badge { padding: 4px 7px; background: var(--green-soft); color: var(--green); }
.update-file-picker { display: grid; gap: 7px; font-weight: 750; font-size: .8rem; }
.update-file-picker input[type="file"] { width: 100%; min-width: 0; padding: 10px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); }
.update-file-picker input[type="file"]::file-selector-button { min-height: 38px; margin-right: 10px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--blue-soft); color: var(--ink); font-weight: 750; cursor: pointer; }
.update-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.update-actions button { min-height: 42px; flex: 1 1 170px; }
.remote-update-progress { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--blue-soft); font-size: .8rem; font-weight: 700; }
.update-spinner { width: 18px; height: 18px; flex: 0 0 auto; border: 2px solid rgba(22,50,79,.25); border-top-color: var(--navy); border-radius: 50%; animation: bk-update-spin .8s linear infinite; }
@keyframes bk-update-spin { to { transform: rotate(360deg); } }
.remote-update-preview { display: grid; gap: 7px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.remote-update-preview > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.remote-update-preview p { margin: 0; font-size: .8rem; white-space: pre-wrap; }
.remote-update-preview small { color: var(--muted); font-size: .7rem; overflow-wrap: anywhere; }
html[data-theme="dark"] .version-badge,
html[data-theme="dark"] .remote-update-progress { background: #14293a; color: #e7f3ff; }
html[data-theme="dark"] .signed-badge { background: #123523; color: #8ce6b0; }
html[data-theme="dark"] .update-file-picker input[type="file"]::file-selector-button { background: #1b3244; color: #f0f5f8; }
@media (max-width: 620px) {
  .admin-update-heading { align-items: center; }
  .update-actions { display: grid; grid-template-columns: 1fr; }
  .update-actions button { width: 100%; }
}

/* v3.2.1 Guest Viewer */
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--border); }
.guest-login-button { width: 100%; min-height: 72px; display: grid; gap: 4px; text-align: left; align-content: center; padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2, #f4f7f9); color: var(--ink); }
.guest-login-button:hover { border-color: var(--navy-2); background: var(--blue-soft); }
.guest-login-button:disabled { opacity: .65; cursor: wait; }
.guest-login-button strong { font-size: .95rem; }
.guest-login-button span { color: var(--muted); font-size: .76rem; font-weight: 500; }
html[data-theme="dark"] .guest-login-button { background: #10202d; border-color: #294153; }
html[data-theme="dark"] .guest-login-button:hover { background: #153047; border-color: #4f83aa; }

/* v3.3 invitation links and 3000% map zoom */
#invitePanel .stack-form { margin-top: 16px; }
#invitePanel input:disabled { opacity: 1; color: var(--ink); background: var(--blue-soft); font-weight: 750; }
.invite-admin-section, .existing-users-section { display: grid; gap: 11px; }
.invite-admin-section h3, .existing-users-section h3 { margin: 0; font-size: 1rem; }
.invite-create-form { grid-template-columns: minmax(180px, 1.4fr) minmax(150px, .8fr) minmax(150px, .8fr) auto; align-items: end; border: 1px solid var(--border); border-radius: 13px; padding: 12px; background: #f8fafb; }
.invite-create-form button { min-height: 43px; white-space: nowrap; }
.invite-link-result { display: grid; gap: 8px; padding: 12px; border: 1px solid color-mix(in srgb, var(--green) 45%, var(--border)); border-radius: 12px; background: var(--green-soft); }
.invite-link-result > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.invite-link-result input { font-size: .78rem; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.invite-link-result small { color: var(--muted); }
.invitations-list { display: grid; gap: 7px; }
.invitation-row { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(140px, .9fr) auto; gap: 10px; align-items: center; padding: 10px 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.invitation-row > div:first-child { display: grid; gap: 3px; min-width: 0; }
.invitation-row small { color: var(--muted); overflow-wrap: anywhere; }
.invitation-row.pending { border-left: 4px solid var(--navy-2); }
.invitation-row.used { border-left: 4px solid var(--green); }
.invitation-row.expired, .invitation-row.revoked { opacity: .68; }
.invitation-meta { text-align: right; }
.invite-status-badge { display: inline-flex; justify-content: center; min-width: 74px; padding: 5px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--muted); font-size: .7rem; font-weight: 800; }
.advanced-user-create { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.advanced-user-create > summary { cursor: pointer; padding: 11px 12px; font-size: .8rem; font-weight: 800; background: var(--blue-soft); }
.advanced-user-create[open] > summary { border-bottom: 1px solid var(--border); }
.advanced-user-create .user-create-form { border: 0; border-radius: 0; }
html[data-theme="dark"] .invite-create-form { background: #10202d; }
html[data-theme="dark"] .invite-link-result { background: #123523; }
html[data-theme="dark"] #invitePanel input:disabled { background: #14293a; }
.zoom-controls #zoomLabel { min-width: 52px; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .invite-create-form { grid-template-columns: 1fr; }
  .invite-link-result > div { grid-template-columns: 1fr; }
  .invite-link-result button { min-height: 46px; }
  .invitation-row { grid-template-columns: 1fr auto; }
  .invitation-meta { grid-column: 1; text-align: left; }
  .invitation-row > button, .invitation-row > .invite-status-badge { grid-column: 2; grid-row: 1 / 3; align-self: center; }
}

/* v3.3.3 private personal GPS marker */
.my-location-button[aria-pressed="true"] { background: #dceeff; color: #0b4f8a; box-shadow: inset 0 0 0 1px rgba(11,79,138,.22); }
.map-location-accuracy {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  min-width: 24px;
  min-height: 24px;
  border: 2px solid rgba(20,111,194,.72);
  border-radius: 50%;
  background: rgba(38,132,214,.16);
  pointer-events: none;
  box-sizing: border-box;
}
.map-location-dot {
  position: absolute;
  z-index: 5;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border: 3px solid #fff;
  border-radius: 50%;
  background: #1677d2;
  box-shadow: 0 0 0 2px rgba(8,57,101,.72), 0 2px 8px rgba(0,0,0,.38);
  pointer-events: none;
}
.map-location-dot span {
  position: absolute;
  inset: -9px;
  border: 2px solid rgba(22,119,210,.46);
  border-radius: 50%;
  animation: bk-location-pulse 2s ease-out infinite;
}
@keyframes bk-location-pulse {
  0% { transform: scale(.55); opacity: .9; }
  75%, 100% { transform: scale(1.45); opacity: 0; }
}
.map-footer { display: grid; gap: 8px; }
.map-location-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--ink); }
.map-location-status > span { min-width: 0; }
.map-location-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.map-location-actions button { padding: 6px 9px; font-size: .76rem; white-space: nowrap; }

html[data-theme="dark"] .my-location-button[aria-pressed="true"] { background: #183d5b; color: #bde0ff; }
html[data-theme="dark"] .map-location-accuracy { border-color: rgba(91,176,255,.85); background: rgba(48,143,226,.2); }

@media (max-width: 760px) {
  .my-location-label { display: none; }
  .my-location-button { min-width: 40px !important; }
  .map-location-status { align-items: flex-start; flex-direction: column; }
  .map-location-actions { width: 100%; flex-wrap: wrap; }
  .map-location-actions button { flex: 1 1 auto; }
}

/* v3.3.4 current road and milepost GPS box */
.map-location-road-info {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 8;
  display: flex;
  max-width: min(310px, calc(100% - 20px));
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(15, 23, 42, .32);
  border-radius: 9px;
  background: rgba(255, 255, 255, .93);
  color: #102033;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .18);
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.map-location-road-info strong { font-size: .9rem; line-height: 1.2; }
.map-location-road-info span { font-size: .78rem; line-height: 1.25; }
.map-location-road-info small { font-size: .7rem; line-height: 1.2; color: #425466; }
html[data-theme="dark"] .map-location-road-info {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(15, 30, 45, .94);
  color: #f4f8fb;
}
html[data-theme="dark"] .map-location-road-info small { color: #bfd0df; }
@media (max-width: 620px) {
  .map-location-road-info { right: 7px; bottom: 7px; max-width: calc(100% - 14px); padding: 7px 9px; }
}
.map-view-wrap { position: relative; min-width: 0; }
@media (min-width: 1051px) and (min-height: 720px) {
  .map-view-wrap { min-height: 0; flex: 1 1 auto; }
  .map-view-wrap > .map-scroller { height: 100%; min-height: 0; max-height: none; }
}
.map-panel:fullscreen .map-view-wrap,
.map-panel:-webkit-full-screen .map-view-wrap,
.map-panel.map-fullscreen-fallback .map-view-wrap { min-height: 0; flex: 1 1 auto; }
.map-panel:fullscreen .map-view-wrap > .map-scroller,
.map-panel:-webkit-full-screen .map-view-wrap > .map-scroller,
.map-panel.map-fullscreen-fallback .map-view-wrap > .map-scroller { height: 100% !important; min-height: 0 !important; max-height: none !important; }

/* Offline Field Mode v3.4.0 */
.offline-field-banner {
  margin: 0 24px 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 90%, #f59e0b 10%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.offline-field-banner > div { display: grid; gap: 2px; }
.offline-field-banner strong { font-size: 0.92rem; }
.offline-field-banner span { color: var(--muted); font-size: 0.86rem; }
.offline-field-banner.has-queued { background: color-mix(in srgb, var(--panel) 84%, #f59e0b 16%); }
.offline-field-banner.is-offline { border-color: color-mix(in srgb, var(--border) 55%, #f59e0b 45%); }
.offline-field-shell { gap: 18px; }
.offline-current-county,
.offline-sync-section,
.offline-conflicts {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  display: grid;
  gap: 12px;
}
.offline-current-county > div:first-child { display: grid; gap: 4px; }
.offline-current-county > div:first-child span,
.offline-current-county > div:first-child small { color: var(--muted); }
.offline-current-county > div:first-child strong { font-size: 1.12rem; }
.offline-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.offline-current-county progress { width: 100%; }
.offline-sync-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.offline-sync-heading h3,
.offline-conflicts h3 { margin: 0; }
.offline-queue-list,
#offlineConflictList { display: grid; gap: 10px; }
.offline-queue-item,
.offline-conflict-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 6px;
}
.offline-queue-item small,
.offline-conflict-item small { color: var(--muted); }
.offline-conflict-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.offline-local-badge {
  display: inline-flex;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 78%, #f59e0b 22%);
  font-size: 0.78rem;
}
@media (max-width: 760px) {
  .offline-field-banner { margin: 0 12px 10px; align-items: stretch; flex-direction: column; }
  .offline-field-banner button { width: 100%; }
  .offline-sync-heading { flex-direction: column; }
  .offline-sync-heading button { width: 100%; }
}

.map-county-actions { display: flex !important; grid-template-columns: none !important; gap: 6px !important; align-items: center; }
.map-manage-list { display: grid; gap: 8px; }
.map-manage-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.map-manage-row > div { min-width: 0; display: grid; gap: 2px; }
.map-manage-row small { color: var(--muted); overflow-wrap: anywhere; }
button.danger { background: #b42318; color: #fff; border-color: #b42318; }
button.danger:hover { filter: brightness(.96); }
@media (max-width: 620px) { .map-county-actions { flex-direction: column; align-items: stretch; } .map-manage-row { align-items: stretch; } }


/* v3.4.3 map sheet pager + account highlight legend */
.map-legend-to-mow { background: var(--road-to-mow-color); }
.map-legend-completed { background: var(--road-completed-color); }
.map-sheet-pager {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #e9eef2;
}
.map-sheet-pager.hidden { display: none !important; }
.zoom-controls .map-sheet-pager > button {
  min-width: 38px;
  border: 0;
  border-radius: 0;
  padding: 7px 9px;
  background: #e9eef2;
}
.zoom-controls .map-sheet-pager > button + button { border-left: 1px solid var(--border); }
.zoom-controls .map-sheet-pager > button:not(:disabled):hover { background: #dde5eb; }
.zoom-controls .map-sheet-pager .map-sheet-page-button { min-width: 58px; }
.zoom-controls .map-sheet-pager #mapSheetPageLabel {
  min-width: 0;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .map-sheet-pager,
html[data-theme="dark"] .zoom-controls .map-sheet-pager > button { background: #182a38; }
html[data-theme="dark"] .zoom-controls .map-sheet-pager > button:not(:disabled):hover { background: #223a4c; }

@media (max-width: 760px) {
  .zoom-controls .map-sheet-pager > button { min-width: 42px; min-height: 46px; padding: 6px 8px; }
  .zoom-controls .map-sheet-pager .map-sheet-page-button { min-width: 54px; }
}


/* v3.4.7 compact iOS/Windows-style long-press road menu */
.map-road-context-menu {
  position: fixed;
  z-index: 10050;
  width: min(260px, calc(100vw - 20px));
  padding: 7px;
  border: 1px solid rgba(39, 58, 74, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 12px 36px rgba(13, 31, 45, .26), 0 2px 8px rgba(13, 31, 45, .14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  user-select: none;
}
.map-road-context-menu.hidden { display: none !important; }
.map-road-context-title { padding: 7px 10px 3px; font-size: .82rem; font-weight: 850; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-road-context-meta { padding: 1px 10px; font-size: .76rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.map-road-context-meta.hidden { display: none; }
.map-road-context-separator { height: 1px; margin: 7px 4px; background: rgba(39, 58, 74, .12); }
.map-road-context-menu > button {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: inherit;
  font-size: .9rem;
  font-weight: 750;
}
.map-road-context-menu > button:hover, .map-road-context-menu > button:focus-visible { background: rgba(39, 120, 180, .11); outline: none; }
.map-road-context-menu > button:disabled { opacity: .45; }
html[data-theme="dark"] .map-road-context-menu { background: rgba(20, 34, 45, .97); border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .map-road-context-separator { background: rgba(255,255,255,.11); }

/* v3.4.8 held-road map marker + milepost label */
.map-road-hold-marker {
  position: fixed;
  z-index: 10045;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 6px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.28));
}
.map-road-hold-marker.hidden { display: none !important; }
.map-road-hold-dot {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #111827;
  box-shadow: 0 0 0 2px rgba(255,255,255,.86);
}
.map-road-hold-label {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(17,24,39,.92);
  color: #fff;
  font-size: .72rem;
  font-weight: 850;
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* v3.4.11 exact held-MP anchor and non-overlapping context menu */
.map-road-hold-marker {
  transform: none;
  width: 0;
  height: 0;
  display: block;
}
.map-road-hold-dot {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}
.map-road-hold-label {
  position: absolute;
  left: 11px;
  top: 0;
  transform: translateY(-50%);
}

/* v3.5.0 real GPS map */
.map-mode-switch{display:flex;gap:4px;margin-left:auto;background:#0b1720;border:1px solid #314656;border-radius:12px;padding:4px}.map-mode-switch button{min-height:38px;padding:6px 12px;border-radius:9px;background:transparent;color:#9fb0c2;border:0;font-weight:700}.map-mode-switch button.active{background:#236b9f;color:#fff}.live-map-wrap{position:relative;border-top:1px solid #314656}.live-map{height:min(68vh,760px);min-height:440px;position:relative;overflow:hidden;background:#dbe5ea;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.live-map-tiles,.live-map canvas{position:absolute;inset:0}.live-map-tiles img{position:absolute;width:256px;height:256px;max-width:none;pointer-events:none}.live-map canvas{z-index:3;pointer-events:none}.live-map-info{position:absolute;z-index:8;left:12px;right:12px;bottom:12px;background:rgba(7,17,25,.9);color:#eef6ff;border:1px solid #415567;border-radius:13px;padding:10px 13px;font-size:15px;box-shadow:0 4px 18px #0005}.live-map-controls{position:absolute;z-index:8;right:12px;bottom:66px;display:flex;flex-direction:column;gap:7px}.live-map-controls button,.live-layer-controls button{border:1px solid #526777;background:rgba(8,20,29,.92);color:#eef6ff;border-radius:10px;min-width:48px;min-height:44px;font-weight:700}.live-map-controls button.active,.live-layer-controls button.active{background:#236b9f}.live-layer-controls{position:absolute;z-index:8;top:12px;right:12px;display:flex;gap:5px}.live-layer-controls button{padding:7px 10px;min-height:38px}.live-gps-dot{position:absolute;z-index:7;width:18px;height:18px;border:4px solid #fff;border-radius:50%;background:#2da8df;box-shadow:0 1px 6px #0008;margin:-9px 0 0 -9px;pointer-events:none}.live-gps-accuracy{position:absolute;z-index:6;border-radius:50%;background:#2da8df26;border:1px solid #2da8df88;pointer-events:none}.hidden{display:none!important}@media(max-width:700px){.map-panel .panel-header{flex-wrap:wrap}.map-mode-switch{order:3;width:100%}.map-mode-switch button{flex:1}.live-map{height:62vh;min-height:430px}}


/* v3.5.1 Nexus-style live map polish */
.map-panel{min-width:0;overflow:hidden}
.map-panel.live-map-mode .zoom-controls{display:none!important}
.map-panel.live-map-mode .panel-header{display:flex;align-items:center;gap:10px;min-width:0}
.map-panel.live-map-mode .panel-header>div:first-child{min-width:0;flex:1}
.map-panel.live-map-mode .map-mode-switch{margin-left:auto;flex:0 0 auto;width:auto;max-width:100%}
.map-panel.live-map-mode .map-mode-switch button{min-width:64px;padding:6px 10px}
.live-map-wrap{width:100%;max-width:100%;min-width:0;overflow:hidden}
.live-map{width:100%;max-width:100%;box-sizing:border-box;height:min(72vh,780px);min-height:470px;overflow:hidden;background:#d7e1e7}
.live-layer-controls{top:10px;right:10px;max-width:calc(100% - 20px);border-radius:13px;padding:3px;background:rgba(9,19,27,.90);border:1px solid rgba(255,255,255,.18);box-shadow:0 2px 12px #0004}
.live-layer-controls button{min-width:0;min-height:40px;padding:7px 12px;border:0!important;border-radius:10px;background:transparent;font-size:14px;white-space:nowrap}
.live-layer-controls button.active{background:#2b78ad;color:#fff}
.live-map-controls{right:10px;bottom:76px;gap:8px}
.live-map-controls button{width:50px;height:50px;min-width:50px;min-height:50px;border-radius:50%;font-size:22px;background:rgba(8,18,26,.94);box-shadow:0 3px 14px #0005}
.live-map-info{left:10px;right:72px;bottom:10px;min-height:54px;border-radius:16px;padding:9px 14px;display:flex;flex-direction:column;justify-content:center;gap:1px;font-size:14px;line-height:1.15;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.live-map-info strong{font-size:18px;overflow:hidden;text-overflow:ellipsis}
.live-map-info span{color:#b8c8d6;font-size:14px;overflow:hidden;text-overflow:ellipsis}
.live-gps-dot{width:20px;height:20px;border-width:4px;margin:-10px 0 0 -10px;background:#22a8df}
@media(max-width:700px){
  .map-panel.live-map-mode .panel-header{flex-wrap:nowrap;padding-right:8px}
  .map-panel.live-map-mode .panel-header>div:first-child p{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .map-panel.live-map-mode .map-mode-switch{order:initial;width:auto;padding:3px;gap:2px}
  .map-panel.live-map-mode .map-mode-switch button{min-width:58px;min-height:36px;padding:5px 8px;font-size:13px}
  .live-map{height:calc(100dvh - 285px);min-height:500px;max-height:760px}
  .live-layer-controls{right:8px;top:8px}
  .live-layer-controls button{padding:6px 10px;font-size:13px}
  .live-map-controls{right:9px;bottom:75px}
  .live-map-controls button{width:48px;height:48px;min-width:48px;min-height:48px}
  .live-map-info{left:8px;right:66px;bottom:8px;min-height:52px;padding:8px 12px}
}
@media(max-width:390px){
  .map-panel.live-map-mode .panel-header>div:first-child p{display:none}
  .map-panel.live-map-mode .map-mode-switch button{min-width:52px;padding:5px 6px}
  .live-layer-controls button{padding:6px 8px}
}


/* v3.5.4 compact map header - valid CSS */
.map-main-header-runtime {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  overflow: hidden;
  min-width: 0;
}
.map-county-runtime { min-width: 0; width: 100%; }
.map-county-picker-runtime {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 3px;
  width: 100%;
  min-width: 0 !important;
  margin: 0 !important;
}
.map-county-picker-runtime select {
  width: 100%; max-width: 100%; min-width: 0 !important;
  min-height: 45px; padding: 7px 34px 7px 11px !important;
  font-size: 1rem !important; font-weight: 800;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--border); border-radius: 11px;
}
.map-mode-row-runtime { width: 100%; min-width: 0; }
.map-mode-row-runtime .map-mode-switch {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 4px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 4px !important;
  border-radius: 12px;
}
.map-mode-row-runtime .map-mode-switch button {
  width: 100%; min-width: 0 !important; min-height: 42px !important;
  padding: 6px 10px !important; font-size: .92rem !important;
}
.map-header-controls-runtime {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 6px !important;
  width: 100%; min-width: 0;
  overflow: hidden; flex-wrap: nowrap !important;
}
.map-header-controls-runtime > #zoomOut,
.map-header-controls-runtime > #zoomIn,
.map-header-controls-runtime > #zoomLabel,
.map-header-controls-runtime > #fitMap { display: none !important; }
.map-header-controls-runtime .map-sheet-pager {
  order: 1; flex: 0 1 auto; min-width: 0; margin: 0;
  border-radius: 11px;
}
.map-header-controls-runtime .map-sheet-pager > button {
  min-width: 38px !important; min-height: 41px !important; padding: 4px 7px !important;
}
.map-header-controls-runtime .map-sheet-pager .map-sheet-page-button { min-width: 54px !important; }
.map-header-controls-runtime .my-location-button,
.map-header-controls-runtime .fullscreen-map-button {
  flex: 0 0 41px; width: 41px !important; height: 41px !important;
  min-width: 41px !important; min-height: 41px !important;
  padding: 0 !important; border-radius: 11px !important;
  display: grid !important; place-items: center;
}
.map-header-controls-runtime .my-location-button { order: 2; }
.map-header-controls-runtime .fullscreen-map-button { order: 3; }
.map-header-controls-runtime .my-location-label,
.map-header-controls-runtime .fullscreen-label { display: none !important; }
.map-panel.live-map-mode .map-header-controls-runtime { display: none !important; }
.live-map-controls { right: 10px !important; bottom: 76px !important; }
.live-map-controls button {
  width: 50px !important; height: 50px !important;
  min-width: 50px !important; min-height: 50px !important;
  display: grid; place-items: center; padding: 0 !important;
}
.live-map-controls button.active {
  background: #2479ad !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 3px 14px #0005;
}
.live-map-info { right: 72px !important; }
@media (max-width: 700px) {
  .simple-pickers .sheet-picker-wrap { display: none !important; }
  .map-main-header-runtime { padding: 9px 10px !important; gap: 7px !important; }
  .map-mode-row-runtime .map-mode-switch button { min-height: 40px !important; font-size: .88rem !important; }
  .map-header-controls-runtime { gap: 5px !important; }
  .map-header-controls-runtime .map-sheet-pager > button { min-width: 36px !important; }
  .map-header-controls-runtime .map-sheet-pager .map-sheet-page-button { min-width: 50px !important; }
  .map-header-controls-runtime .my-location-button,
  .map-header-controls-runtime .fullscreen-map-button {
    flex-basis: 40px; width: 40px !important; height: 40px !important;
    min-width: 40px !important; min-height: 40px !important;
  }
  .live-map { height: calc(100dvh - 270px) !important; min-height: 500px !important; }
}

/* v3.5.5 mobile map is a dedicated full-screen workspace */
@media (max-width: 760px) {
  .mobile-tabs { grid-template-columns: repeat(4, 1fr) !important; }

  #appScreen[data-mobile-view="map"] .simple-toolbar,
  #appScreen[data-mobile-view="map"] .simple-progress {
    display: none !important;
  }

  #appScreen[data-mobile-view="map"] .workspace {
    padding: 0 !important;
    min-height: 0;
  }

  #appScreen[data-mobile-view="map"] .map-panel {
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: calc(100dvh - 62px - env(safe-area-inset-bottom)) !important;
    min-height: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #appScreen[data-mobile-view="map"] .map-main-header-runtime {
    flex: 0 0 auto;
    padding: 8px 10px !important;
    gap: 6px !important;
    border-bottom: 1px solid var(--border);
  }

  #appScreen[data-mobile-view="map"] .map-county-picker-runtime select {
    min-height: 42px !important;
    font-size: .92rem !important;
  }

  #appScreen[data-mobile-view="map"] .map-mode-row-runtime .map-mode-switch button {
    min-height: 38px !important;
  }

  #appScreen[data-mobile-view="map"] .map-header-controls-runtime {
    flex: 0 0 auto;
    min-height: 44px;
  }

  #appScreen[data-mobile-view="map"] .map-view-wrap,
  #appScreen[data-mobile-view="map"] .live-map-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  #appScreen[data-mobile-view="map"] .map-view-wrap {
    display: flex;
    flex-direction: column;
  }

  #appScreen[data-mobile-view="map"] .map-scroller {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  #appScreen[data-mobile-view="map"] .live-map {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 0 !important;
  }

  #appScreen[data-mobile-view="map"] .map-footer {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 7px 12px !important;
  }

  #appScreen[data-mobile-view="map"] .help-fab {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }

  /* Roads remains the existing road-list page, including progress and normal tools. */
  #appScreen[data-mobile-view="roads"] .simple-progress { display: block; }
}


/* v3.5.8 - Map tab owns the phone viewport; page itself must not scroll/bounce. */
@media (max-width: 760px) {
  html.map-tab-scroll-locked,
  body.map-tab-scroll-locked {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.map-tab-scroll-locked {
    position: fixed !important;
    inset: 0 !important;
  }

  body.map-tab-scroll-locked #appScreen {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.map-tab-scroll-locked #appScreen[data-mobile-view="map"] .workspace,
  body.map-tab-scroll-locked #appScreen[data-mobile-view="map"] .map-panel {
    overscroll-behavior: none !important;
  }

  /* Keep gestures on the map itself while preventing the document from moving. */
  body.map-tab-scroll-locked #mapScroller,
  body.map-tab-scroll-locked #liveMap {
    overscroll-behavior: none !important;
  }
}


/* v3.5.9 - compact Roads page actions and remove duplicate mobile quick actions */
@media (max-width: 760px) {
  /* Download PDF + Settings now live in the bottom tabs; avoid duplicate cards above Roads. */
  #mapStyleButton,
  #exportButton {
    display: none !important;
  }

  #appScreen[data-mobile-view="roads"] .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #appScreen[data-mobile-view="roads"] .road-card {
    padding: 7px 8px !important;
    margin-bottom: 5px !important;
    border-radius: 8px !important;
  }

  #appScreen[data-mobile-view="roads"] .road-card-top {
    gap: 6px !important;
    line-height: 1.05 !important;
  }

  #appScreen[data-mobile-view="roads"] .road-card .route-number {
    font-size: .84rem !important;
    line-height: 1.1 !important;
  }

  #appScreen[data-mobile-view="roads"] .road-card .mileposts {
    font-size: .72rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  #appScreen[data-mobile-view="roads"] .road-card p {
    margin: 2px 0 4px !important;
    font-size: .69rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #appScreen[data-mobile-view="roads"] .road-completed-date {
    margin: 1px 0 4px !important;
    font-size: .63rem !important;
    line-height: 1.1 !important;
  }

  /* Every available road action remains on one horizontal level. */
  #appScreen[data-mobile-view="roads"] .card-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    align-items: stretch !important;
  }

  #appScreen[data-mobile-view="roads"] .road-card.completed .card-actions {
    grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, .8fr)) !important;
  }

  #appScreen[data-mobile-view="roads"] .card-actions .main-card-action,
  #appScreen[data-mobile-view="roads"] .card-actions button {
    grid-column: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: auto !important;
    padding: 4px 3px !important;
    border-radius: 7px !important;
    font-size: .63rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* v3.5.10 - Roads page starts at search; compact Edit List menu; More moved to Settings */
.road-search-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.road-search-row .search-box { flex: 1 1 auto; min-width: 0; }
.edit-list-menu { position: relative; flex: 0 0 auto; }
.edit-list-menu > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2, var(--panel));
  color: var(--text);
  font-weight: 800;
  white-space: nowrap;
}
.edit-list-menu > summary::-webkit-details-marker { display: none; }
.edit-list-menu-panel {
  position: absolute;
  z-index: 95;
  right: 0;
  top: calc(100% + 6px);
  width: min(310px, calc(100vw - 28px));
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
.edit-list-menu-panel button {
  width: 100%;
  min-height: 42px;
  text-align: left;
  justify-content: flex-start;
  margin: 0;
  border-radius: 8px;
  background: transparent;
}
.edit-list-menu-panel button + button { margin-top: 3px; }
.download-pdf-options { display: grid; gap: 8px; }
.download-pdf-main { width: 100%; }
.download-pdf-page-options { display: grid; gap: 6px; }
.download-pdf-page-options button { width: 100%; text-align: left; }
.settings-tools-section #settingsMoreSlot { margin-top: 8px; }
.settings-tools-section .more-menu { width: 100%; }
.settings-tools-section .more-menu > summary {
  min-height: 46px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2, var(--panel));
}
.settings-tools-section .more-menu-panel { position: static; width: 100%; margin-top: 7px; box-shadow: none; }
.settings-tools-section #bulkRoadButton { display: none !important; }

@media (max-width: 760px) {
  /* The Roads page begins with search/Edit List: no dashboard/header/tool blocks above it. */
  #appScreen[data-mobile-view="roads"] .topbar,
  #appScreen[data-mobile-view="roads"] .simple-toolbar,
  #appScreen[data-mobile-view="roads"] .simple-progress,
  #appScreen[data-mobile-view="roads"] #offlineBanner,
  #appScreen[data-mobile-view="roads"] .roads-heading-copy {
    display: none !important;
  }
  #appScreen[data-mobile-view="roads"] .workspace {
    padding: 6px 7px calc(74px + env(safe-area-inset-bottom)) !important;
  }
  #appScreen[data-mobile-view="roads"] .list-panel {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
  }
  #appScreen[data-mobile-view="roads"] .list-header {
    display: block !important;
    min-height: 0 !important;
    padding: 4px 2px 6px !important;
    border-bottom: 0 !important;
  }
  #appScreen[data-mobile-view="roads"] .road-search-row {
    gap: 6px;
  }
  #appScreen[data-mobile-view="roads"] #roadSearch {
    min-height: 44px;
  }
  #appScreen[data-mobile-view="roads"] .edit-list-menu > summary {
    min-height: 44px;
    padding: 0 11px;
    font-size: .76rem;
  }
  #appScreen[data-mobile-view="roads"] .status-tabs {
    margin-top: 0 !important;
  }
}


/* v3.5.11 - robust iOS Edit List popover */
.edit-list-menu-panel {
  box-sizing: border-box;
  background: var(--panel) !important;
  color: var(--text) !important;
  overflow: hidden;
}
.edit-list-menu-panel button {
  box-sizing: border-box;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--panel-2, #182733) !important;
  color: var(--text) !important;
  font-size: .92rem !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
.edit-list-menu-panel button + button { margin-top: 5px !important; }
@media (max-width: 760px) {
  #editListMenu { position: relative !important; }
  #editListMenu .edit-list-menu-panel {
    position: fixed !important;
    z-index: 10050 !important;
    top: var(--edit-list-top, 126px) !important;
    left: var(--edit-list-left, 12px) !important;
    right: auto !important;
    width: min(300px, calc(100vw - 24px)) !important;
    max-height: min(330px, calc(100dvh - var(--edit-list-top, 126px) - 90px)) !important;
    overflow-y: auto !important;
    padding: 7px !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    background: var(--panel) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.48) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* v3.5.12 - full-screen Edit List flow */
.edit-list-button {
  flex: 0 0 auto; min-height: 46px; padding: 0 18px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel-2); color: var(--text); font: inherit; font-weight: 800; white-space: nowrap;
}
.edit-list-fullscreen-actions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 4px 0 16px; }
.edit-list-action-card { min-height: 92px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-2); color: var(--text); text-align: left; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.edit-list-action-card strong { font-size: 1.05rem; }
.edit-list-action-card span { color: var(--muted); line-height: 1.3; font-size: .9rem; }
.ocr-import-workspace.hidden { display: none !important; }
@media (max-width:760px) {
  .edit-list-button { min-height: 46px; padding-inline: 16px; }
  #imageRoadDialog .dialog-shell { min-height: 100dvh; }
  .edit-list-fullscreen-actions { grid-template-columns: 1fr; gap: 10px; }
  .edit-list-action-card { min-height: 82px; border-radius: 16px; padding: 14px 16px; }
  #ocrImportWorkspace { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}


/* v3.5.13 - photo/PDF adjustment sheet */
.photo-tools-open { width:100%; min-height:50px; padding:10px 14px; border:1px solid var(--border); border-radius:12px; background:var(--panel-2,#182733); color:var(--navy-2); font:inherit; font-weight:800; text-align:left; }
.ocr-photo-tools-sheet { position:fixed; z-index:20050; inset:0; display:grid; place-items:center; padding:18px; background:rgba(2,10,16,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.ocr-photo-tools-sheet.hidden { display:none !important; }
.ocr-photo-tools-card { width:min(520px,100%); max-height:calc(100dvh - 36px); overflow:auto; padding:18px; border:1px solid var(--border); border-radius:20px; background:var(--panel,#10202b); box-shadow:0 24px 70px rgba(0,0,0,.5); }
.ocr-photo-tools-card > header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.ocr-photo-tools-card h3 { margin:0; font-size:1.25rem; }
.ocr-photo-tools-card header p { margin:4px 0 0; color:var(--muted); }
.ocr-photo-tools-card .ocr-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ocr-photo-tools-card .ocr-controls > button, .ocr-photo-tools-card .ocr-controls > label { min-height:52px; }
.ocr-photo-tools-card > .primary { width:100%; min-height:52px; margin-top:14px; }
@media (max-width:760px) {
 .ocr-photo-tools-sheet { padding:0; place-items:stretch; }
 .ocr-photo-tools-card { width:100%; max-height:none; min-height:100dvh; border:0; border-radius:0; padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); }
 .ocr-photo-tools-card .ocr-controls { grid-template-columns:1fr; }
}

/* v3.5.14 - readable inline OCR tools + crop */
.ocr-inline-tools {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-2, #182733);
  color: var(--text);
}
.ocr-inline-tools.hidden { display: none !important; }
.ocr-inline-tool-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:stretch; }
.ocr-inline-tools button { min-height:46px; color:var(--text) !important; }
.ocr-slider-row,
.ocr-crop-controls label {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  min-height:48px;
  padding:8px 10px;
  border-radius:10px;
  background:var(--panel,#10202b);
  color:var(--text) !important;
  font-weight:700;
}
.ocr-slider-row input[type="range"], .ocr-crop-controls input[type="range"] { width:100%; min-width:0; }
.ocr-slider-row strong, .ocr-crop-controls strong { color:var(--text); min-width:44px; text-align:right; }
.ocr-enhance-toggle {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel,#10202b);
  color:var(--text) !important;
  font-weight:700;
}
.ocr-enhance-toggle input { width:22px; height:22px; flex:0 0 auto; }
.ocr-crop-controls { display:grid; gap:8px; padding-top:2px; }
.ocr-crop-controls.hidden { display:none !important; }
.ocr-crop-title { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--text); }
.ocr-crop-title .link-button { min-height:auto; padding:6px 8px; color:var(--navy-2,#5dafff) !important; }
.ocr-tools-help { margin:0; color:var(--muted); font-size:.85rem; line-height:1.35; }
@media (max-width:760px) {
  .ocr-inline-tools { padding:10px; margin-top:8px; border-radius:12px; }
  .ocr-inline-tool-row { gap:8px; }
  .ocr-inline-tools button { min-height:44px; padding:8px 10px; font-size:.9rem; }
  .ocr-slider-row, .ocr-crop-controls label { grid-template-columns:72px 1fr 42px; gap:8px; padding:7px 8px; font-size:.88rem; }
  .ocr-enhance-toggle { min-height:44px; font-size:.88rem; }
}

/* v3.5.17 - five-tab mobile nav, offline storage, account delete */
@media (max-width: 760px) {
  .mobile-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .mobile-tabs button { min-width: 0; }
  .mobile-tabs button small { font-size: .58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .mobile-tabs button span { font-size: 1.08rem; }
}
.offline-storage-card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 86%, var(--background));
}
.offline-storage-card strong { font-size: .84rem; }
.offline-storage-card span { font-size: 1.05rem; font-weight: 800; }
.offline-storage-card small { color: var(--muted); line-height: 1.35; }
.user-row .user-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.user-row .delete-user { min-width: 92px; }
#newUserStatus.error { color: #ff8b82; font-weight: 700; }
#newUserStatus.success { color: var(--green); font-weight: 700; }

/* v3.5.18 - bottom navigation items are true mobile pages */
@media (max-width: 760px) {
  .mobile-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .mobile-tabs button small {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.04;
    text-align: center;
  }
  #mobileDownloadPdf small span { display: block; font-size: inherit; line-height: inherit; }

  #appScreen[data-mobile-view="download"] ~ #downloadPdfDialog,
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog,
  #appScreen[data-mobile-view="help"] ~ #helpDialog {
    display: block !important;
    position: fixed !important;
    z-index: 66 !important;
    inset: 0 0 calc(62px + env(safe-area-inset-bottom)) 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--background) !important;
    color: var(--text) !important;
    overflow: hidden !important;
  }
  #appScreen[data-mobile-view="download"] ~ #downloadPdfDialog::backdrop,
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog::backdrop,
  #appScreen[data-mobile-view="help"] ~ #helpDialog::backdrop { display: none !important; background: transparent !important; }

  #appScreen[data-mobile-view="download"] ~ #downloadPdfDialog > .dialog-shell,
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog > .dialog-shell,
  #appScreen[data-mobile-view="help"] ~ #helpDialog > .dialog-shell {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: calc(18px + env(safe-area-inset-top)) 18px 28px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--background) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #appScreen[data-mobile-view="download"] ~ #downloadPdfDialog > .dialog-shell > header,
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog > .dialog-shell > header,
  #appScreen[data-mobile-view="help"] ~ #helpDialog > .dialog-shell > header {
    position: static !important;
    padding: 4px 0 16px !important;
    margin: 0 0 16px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--border);
  }

  #appScreen[data-mobile-view="download"] ~ #downloadPdfDialog .close-dialog,
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog .close-dialog,
  #appScreen[data-mobile-view="help"] ~ #helpDialog .close-dialog { display: none !important; }

  #appScreen[data-mobile-view="download"] ~ #downloadPdfDialog footer { display: none !important; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 18px -18px -28px !important;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) !important;
    background: color-mix(in srgb, var(--background) 94%, transparent);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(14px);
  }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog footer .close-dialog { display: none !important; }

  #appScreen[data-mobile-view="help"] ~ #helpDialog .help-shell { display: flex !important; flex-direction: column; }
  #appScreen[data-mobile-view="help"] ~ #helpDialog .help-messages { flex: 1 1 auto; min-height: 260px; }
  #appScreen[data-mobile-view="help"] ~ #helpDialog .help-composer { position: sticky; bottom: 0; background: var(--background); padding-top: 10px; }
}


/* v3.5.19 true map fullscreen + unified follow controls */
.pdf-follow-map-button {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 22px !important;
  background: rgba(8,18,26,.94) !important;
  color: #eef6ff !important;
  border: 1px solid #526777 !important;
  box-shadow: 0 3px 14px #0005;
}
.pdf-follow-map-button[aria-pressed="true"] { background:#236b9f !important; }
.pdf-follow-map-button .my-location-label { display:none !important; }
.map-fullscreen-floating {
  display:none;
  position:fixed;
  z-index:5205;
  top:max(10px, env(safe-area-inset-top));
  right:max(10px, env(safe-area-inset-right));
  width:50px;
  height:50px;
  min-width:50px;
  min-height:50px;
  padding:0;
  border-radius:50%;
  border:1px solid #526777;
  background:rgba(8,18,26,.94);
  color:#fff;
  font-size:24px;
  box-shadow:0 3px 14px #0007;
}
.map-fullscreen-floating.visible { display:flex; align-items:center; justify-content:center; }

/* In full screen, the map itself owns the viewport. App chrome and selector/header rows disappear. */
body.map-fullscreen-active #appHeader,
body.map-fullscreen-active .mobile-bottom-nav { display:none !important; }
.map-panel:fullscreen .panel-header,
.map-panel:-webkit-full-screen .panel-header,
.map-panel.map-fullscreen-fallback .panel-header,
.map-panel:fullscreen .map-footer,
.map-panel:-webkit-full-screen .map-footer,
.map-panel.map-fullscreen-fallback .map-footer { display:none !important; }
.map-panel:fullscreen,
.map-panel:-webkit-full-screen,
.map-panel.map-fullscreen-fallback {
  position:fixed !important;
  inset:0 !important;
  z-index:5200 !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100dvh !important;
  padding:0 !important;
  margin:0 !important;
  background:#101a22 !important;
}
.map-panel:fullscreen .map-view-wrap,
.map-panel:-webkit-full-screen .map-view-wrap,
.map-panel.map-fullscreen-fallback .map-view-wrap,
.map-panel:fullscreen .live-map-wrap,
.map-panel:-webkit-full-screen .live-map-wrap,
.map-panel.map-fullscreen-fallback .live-map-wrap {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  border:0 !important;
}
.map-panel:fullscreen .map-scroller,
.map-panel:-webkit-full-screen .map-scroller,
.map-panel.map-fullscreen-fallback .map-scroller,
.map-panel:fullscreen .live-map,
.map-panel:-webkit-full-screen .live-map,
.map-panel.map-fullscreen-fallback .live-map {
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:none !important;
  border-radius:0 !important;
}
.map-panel:fullscreen .map-stage,
.map-panel:-webkit-full-screen .map-stage,
.map-panel.map-fullscreen-fallback .map-stage { min-height:100% !important; }
.map-panel:fullscreen .live-map-controls,
.map-panel:-webkit-full-screen .live-map-controls,
.map-panel.map-fullscreen-fallback .live-map-controls { right:max(12px, env(safe-area-inset-right)) !important; bottom:max(20px, calc(18px + env(safe-area-inset-bottom))) !important; }
.map-panel:fullscreen .live-layer-controls,
.map-panel:-webkit-full-screen .live-layer-controls,
.map-panel.map-fullscreen-fallback .live-layer-controls { top:max(12px, env(safe-area-inset-top)) !important; right:max(74px, calc(72px + env(safe-area-inset-right))) !important; }
.map-panel:fullscreen .live-map-info,
.map-panel:-webkit-full-screen .live-map-info,
.map-panel.map-fullscreen-fallback .live-map-info { bottom:max(12px, calc(10px + env(safe-area-inset-bottom))) !important; right:76px !important; }


/* v3.5.21 PDF controls: match the GPS lower-right control stack exactly. */
.map-view-wrap { position: relative !important; }
.pdf-floating-map-controls {
  position: absolute !important;
  z-index: 28 !important;
  right: 10px !important;
  bottom: 76px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: center !important;
  pointer-events: auto !important;
}
.pdf-floating-map-controls > button {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  max-width: 50px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: 1px solid #526777 !important;
  background: rgba(8,18,26,.94) !important;
  color: #eef6ff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  box-shadow: 0 3px 14px #0005 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.pdf-floating-map-controls > button[aria-pressed="true"] { background:#236b9f !important; }
.pdf-floating-map-controls .fullscreen-label,
.pdf-floating-map-controls .my-location-label { display:none !important; }
.map-panel.live-map-mode .pdf-floating-map-controls { display:none !important; }

/* GPS and PDF both use the same lower-right coordinates. */
.live-map-controls { right:10px !important; bottom:76px !important; }

/* Fullscreen means the map owns the viewport: no app header or mobile toolbar. */
body.map-fullscreen-active #appHeader,
body.map-fullscreen-active .mobile-tabs,
body.map-fullscreen-active #mobileTabs { display:none !important; }

.map-panel:fullscreen .pdf-floating-map-controls,
.map-panel:-webkit-full-screen .pdf-floating-map-controls,
.map-panel.map-fullscreen-fallback .pdf-floating-map-controls {
  right: max(12px, env(safe-area-inset-right)) !important;
  bottom: max(20px, calc(18px + env(safe-area-inset-bottom))) !important;
}

.live-map-info.hidden { display:none !important; }

@media (max-width:700px) {
  .pdf-floating-map-controls { right:9px !important; bottom:75px !important; }
  .pdf-floating-map-controls > button {
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    max-width:48px !important;
  }
}

/* v3.5.22 - lightweight offline GPS map: saved vectors only, no basemap imagery */
.live-map.offline-vector-map { background: #eef1e7; }
.live-map.offline-vector-map .live-map-tiles { display: none !important; }


/* v3.5.24 administrator employee-view preview */
.employee-view-toggle{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:4px 7px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--ink);font-size:.78rem;font-weight:700;white-space:nowrap;cursor:pointer;user-select:none;-webkit-user-select:none}
.employee-view-toggle input{position:absolute;opacity:0;pointer-events:none}
.employee-view-switch{position:relative;width:34px;height:20px;border-radius:999px;background:#aeb8c1;box-shadow:inset 0 0 0 1px #0002;transition:.16s ease;flex:0 0 auto}
.employee-view-switch i{position:absolute;width:16px;height:16px;left:2px;top:2px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0004;transition:.16s ease}
.employee-view-toggle input:checked + .employee-view-switch{background:#2f8f46}
.employee-view-toggle input:checked + .employee-view-switch i{transform:translateX(14px)}
@media(max-width:760px){.employee-view-toggle{padding:3px 5px;gap:4px}.employee-view-label{display:none}.employee-view-switch{width:32px;height:19px}.employee-view-switch i{width:15px;height:15px}.employee-view-toggle input:checked + .employee-view-switch i{transform:translateX(13px)}}


/* v3.5.25 compact mobile Settings */
.settings-quick-section { display: grid; gap: 10px; margin-top: 10px; }
.settings-theme-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; border:1px solid var(--border); border-radius:16px; background:var(--panel-2); }
.settings-theme-row > span:first-child { display:grid; gap:2px; }
.settings-theme-row small { color:var(--muted); font-size:.78rem; line-height:1.25; }
.toggle-switch { position:relative; flex:0 0 auto; width:52px; height:30px; }
.toggle-switch input { position:absolute; opacity:0; pointer-events:none; }
.toggle-switch i { position:absolute; inset:0; border-radius:999px; background:var(--border); transition:.18s ease; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.toggle-switch i::after { content:''; position:absolute; width:24px; height:24px; top:3px; left:3px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.35); transition:.18s ease; }
.toggle-switch input:checked + i { background:var(--accent); }
.toggle-switch input:checked + i::after { transform:translateX(22px); }
.settings-quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.settings-quick-actions button { min-height:48px; }
.settings-tools-section .more-menu-panel #offlineFieldButton,
.settings-tools-section .more-menu-panel #themeButton,
.settings-tools-section .more-menu-panel #myHistoryButton { display:none !important; }

@media (max-width: 760px) {
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog > .dialog-shell { padding:14px 16px calc(92px + env(safe-area-inset-bottom)); gap:10px; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog > .dialog-shell > header { margin:0 0 2px; padding:0 0 10px; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog > .dialog-shell > header h2 { font-size:1.45rem; margin:0 0 2px; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog > .dialog-shell > header p { font-size:.86rem; line-height:1.25; margin:0; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog .map-style-preview { min-height:48px; padding:8px 12px; grid-template-columns:1fr 1fr; gap:12px; border-radius:14px; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog .map-style-preview > div { min-height:30px; gap:8px; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog .map-style-color-grid { grid-template-columns:1fr 1fr; gap:10px; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog .map-style-color-grid label { font-size:.78rem; gap:5px; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog input[type="color"] { height:46px; min-height:46px; border-radius:13px; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog .range-setting { gap:5px; margin-top:0; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog .range-setting > span:first-child { font-size:.88rem; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog .range-scale { font-size:.72rem; margin-top:0; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog .settings-highlight-helper { display:none; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog .settings-theme-row { padding:9px 12px; border-radius:14px; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog .settings-theme-row small { display:none; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog .settings-quick-actions { gap:8px; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog .settings-quick-actions button { min-height:44px; padding:8px 10px; font-size:.9rem; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog .admin-update-panel { margin-top:4px; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog .settings-tools-section { margin-top:2px; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog .settings-tools-section h3 { margin:4px 0; font-size:1.05rem; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog .settings-tools-section > .helper { display:none; }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog footer { gap:8px; padding:10px 16px calc(82px + env(safe-area-inset-bottom)); }
  #appScreen[data-mobile-view="settings"] ~ #mapStyleDialog footer button { min-height:44px; padding:8px 12px; }
}


/* v3.5.26 compact no-scroll employee Settings + compact offline map banner */
@media (max-width: 760px) {
  /* Employee Settings is intentionally a single fixed screen. */
  #mapStyleDialog.employee-settings-compact > .dialog-shell {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    padding: calc(8px + env(safe-area-inset-top)) 14px calc(68px + env(safe-area-inset-bottom)) !important;
    gap: 5px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #mapStyleDialog.employee-settings-compact > .dialog-shell > header {
    padding: 0 0 6px !important;
    margin: 0 0 5px !important;
    flex: 0 0 auto;
  }
  #mapStyleDialog.employee-settings-compact > .dialog-shell > header h2 {
    font-size: 1.32rem !important;
    line-height: 1.05 !important;
  }
  #mapStyleDialog.employee-settings-compact > .dialog-shell > header p {
    font-size: .76rem !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #mapStyleDialog.employee-settings-compact .map-style-preview { display: none !important; }
  #mapStyleDialog.employee-settings-compact .map-style-color-grid {
    gap: 8px !important;
    flex: 0 0 auto;
  }
  #mapStyleDialog.employee-settings-compact .map-style-color-grid label {
    font-size: .74rem !important;
    line-height: 1 !important;
    gap: 4px !important;
  }
  #mapStyleDialog.employee-settings-compact input[type="color"] {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
    padding: 3px !important;
  }
  #mapStyleDialog.employee-settings-compact .range-setting {
    gap: 2px !important;
    margin: 0 !important;
    flex: 0 0 auto;
  }
  #mapStyleDialog.employee-settings-compact .range-setting > span:first-child {
    font-size: .8rem !important;
    line-height: 1.05 !important;
  }
  #mapStyleDialog.employee-settings-compact .range-setting input[type="range"] {
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
  }
  #mapStyleDialog.employee-settings-compact .range-scale {
    font-size: .66rem !important;
    line-height: 1 !important;
  }
  #mapStyleDialog.employee-settings-compact .settings-highlight-helper { display:none !important; }
  #mapStyleDialog.employee-settings-compact .settings-quick-section {
    gap: 6px !important;
    margin: 3px 0 0 !important;
    flex: 0 0 auto;
  }
  #mapStyleDialog.employee-settings-compact .settings-theme-row {
    min-height: 40px !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
  }
  #mapStyleDialog.employee-settings-compact .settings-theme-row strong { font-size: .82rem !important; }
  #mapStyleDialog.employee-settings-compact .toggle-switch { width: 44px !important; height: 26px !important; }
  #mapStyleDialog.employee-settings-compact .toggle-switch i::after { width: 20px !important; height: 20px !important; }
  #mapStyleDialog.employee-settings-compact .toggle-switch input:checked + i::after { transform: translateX(18px) !important; }
  #mapStyleDialog.employee-settings-compact .settings-quick-actions { gap: 6px !important; }
  #mapStyleDialog.employee-settings-compact .settings-quick-actions button {
    min-height: 38px !important;
    height: 38px !important;
    padding: 5px 8px !important;
    font-size: .78rem !important;
    border-radius: 11px !important;
  }
  #mapStyleDialog.employee-settings-compact #adminUpdatePanel,
  #mapStyleDialog.employee-settings-compact #settingsAdminTools { display:none !important; }
  #mapStyleDialog.employee-settings-compact footer {
    position: static !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    flex: 0 0 auto;
  }
  #mapStyleDialog.employee-settings-compact footer .close-dialog { display:none !important; }
  #mapStyleDialog.employee-settings-compact footer button {
    min-height: 40px !important;
    height: 40px !important;
    padding: 6px 10px !important;
    font-size: .82rem !important;
    border-radius: 11px !important;
  }

  /* Offline status on Map should inform, not consume the map. */
  #appScreen[data-mobile-view="map"] .offline-field-banner {
    margin: 4px 10px 6px !important;
    padding: 6px 8px !important;
    min-height: 38px !important;
    border-radius: 11px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
  }
  #appScreen[data-mobile-view="map"] .offline-field-banner > div {
    display:flex !important;
    align-items:baseline !important;
    gap:6px !important;
    min-width:0;
  }
  #appScreen[data-mobile-view="map"] .offline-field-banner strong {
    font-size: .72rem !important;
    white-space: nowrap;
  }
  #appScreen[data-mobile-view="map"] .offline-field-banner span {
    font-size: .66rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #appScreen[data-mobile-view="map"] .offline-field-banner button {
    width:auto !important;
    min-height:30px !important;
    height:30px !important;
    padding:4px 8px !important;
    border-radius:9px !important;
    font-size:.68rem !important;
    white-space:nowrap;
  }
}

/* v3.5.27 organized employee Settings + selectable offline GPS quality */
.offline-map-settings {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
}
.offline-map-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.offline-map-toggle-row > span:first-child { display:grid; gap:3px; min-width:0; }
.offline-map-toggle-row strong { font-size:1rem; }
.offline-map-toggle-row small { color:var(--muted); line-height:1.3; }
.offline-quality-setting { display:grid; gap:8px; transition:opacity .15s ease; }
.offline-quality-setting.disabled { opacity:.45; }
.offline-quality-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.offline-quality-heading output { color:var(--muted); font-weight:800; font-size:.86rem; }
.offline-quality-setting > input[type="range"] { width:100%; }
.offline-quality-scale { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; text-align:center; color:var(--muted); font-size:.7rem; line-height:1.05; }
.offline-quality-scale span:first-child { text-align:left; }
.offline-quality-scale span:last-child { text-align:right; }
.offline-quality-scale small { font-size:.62rem; }

.settings-card {
  border:1px solid var(--border);
  border-radius:16px;
  background:color-mix(in srgb, var(--panel) 96%, var(--accent) 4%);
  padding:12px;
}
.settings-card > h3 { margin:0 0 9px; font-size:.95rem; }
.settings-highlight-card { display:grid; gap:9px; }
.settings-quick-section.settings-card { display:grid; gap:9px; }

@media (max-width:760px) {
  #mapStyleDialog.employee-settings-compact > .dialog-shell {
    padding: calc(6px + env(safe-area-inset-top)) 12px calc(70px + env(safe-area-inset-bottom)) !important;
    gap:7px !important;
  }
  #mapStyleDialog.employee-settings-compact > .dialog-shell > header {
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
  }
  #mapStyleDialog.employee-settings-compact > .dialog-shell > header h2 { font-size:1.24rem !important; }
  #mapStyleDialog.employee-settings-compact > .dialog-shell > header p { display:none !important; }
  #mapStyleDialog.employee-settings-compact .settings-card {
    padding:9px !important;
    border-radius:13px !important;
    gap:6px !important;
  }
  #mapStyleDialog.employee-settings-compact .settings-card > h3 {
    margin:0 0 2px !important;
    font-size:.8rem !important;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.04em;
  }
  #mapStyleDialog.employee-settings-compact .settings-highlight-card .map-style-color-grid { gap:7px !important; }
  #mapStyleDialog.employee-settings-compact .settings-highlight-card .map-style-color-grid label { font-size:.7rem !important; }
  #mapStyleDialog.employee-settings-compact .settings-highlight-card input[type="color"] {
    height:34px !important;
    min-height:34px !important;
  }
  #mapStyleDialog.employee-settings-compact .settings-highlight-card .range-setting { gap:1px !important; }
  #mapStyleDialog.employee-settings-compact .settings-highlight-card .range-setting > span:first-child { font-size:.75rem !important; }
  #mapStyleDialog.employee-settings-compact .settings-highlight-card .range-setting input[type="range"] { height:24px !important; min-height:24px !important; }
  #mapStyleDialog.employee-settings-compact .settings-highlight-card .range-scale { font-size:.61rem !important; }
  #mapStyleDialog.employee-settings-compact .settings-theme-row {
    min-height:36px !important;
    padding:5px 8px !important;
    border:0 !important;
    background:var(--panel-2);
  }
  #mapStyleDialog.employee-settings-compact .settings-quick-actions button { height:36px !important; min-height:36px !important; }
  #mapStyleDialog.employee-settings-compact footer {
    margin:0 !important;
    grid-template-columns:1fr 1fr !important;
  }
  #mapStyleDialog.employee-settings-compact footer button { height:38px !important; min-height:38px !important; }
  #mapStyleDialog.employee-settings-compact #resetMapStyle { grid-column:auto !important; }

  .offline-map-settings { padding:12px; gap:10px; border-radius:14px; }
  .offline-map-toggle-row strong { font-size:.9rem; }
  .offline-map-toggle-row small { font-size:.72rem; }
  .offline-quality-heading { font-size:.86rem; }
  .offline-quality-heading output { font-size:.72rem; }
  .offline-quality-scale { font-size:.62rem; }
  .offline-quality-scale small { font-size:.56rem; }
}


/* v3.5.29 admin usage */
.settings-admin-actions{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 12px}
.settings-admin-actions button{min-height:44px}
.usage-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0 14px}
.usage-summary-grid>div{background:var(--panel-2,#102230);border:1px solid var(--border,#31485a);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:3px}
.usage-summary-grid strong{font-size:1.35rem}.usage-summary-grid span{color:var(--muted,#9fb1c3);font-size:.82rem}
.usage-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}.usage-toolbar .helper{margin:0}
.employee-usage-list{display:grid;gap:12px}
.employee-usage-card{border:1px solid var(--border,#31485a);border-radius:18px;background:var(--panel,#0d1c27);padding:14px}
.employee-usage-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.employee-usage-head>div:first-child{display:flex;flex-direction:column;gap:3px}.employee-usage-head>div:first-child>strong{font-size:1.1rem}.employee-usage-head small{color:var(--muted,#9fb1c3)}
.usage-duty{text-align:right;display:flex;flex-direction:column}.usage-duty strong{font-size:1.25rem}.usage-duty span{font-size:.75rem;color:var(--muted,#9fb1c3)}
.employee-usage-stats{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.employee-usage-stats span{background:var(--panel-2,#102230);border-radius:999px;padding:7px 11px;font-size:.85rem}
.employee-usage-card details{border-top:1px solid var(--border,#31485a);padding-top:10px;margin-top:8px}.employee-usage-card summary{cursor:pointer;font-weight:700;padding:4px 0 8px}
.usage-log,.usage-questions{display:grid;gap:8px;padding-bottom:4px}.usage-log>div,.usage-questions>div{background:var(--panel-2,#102230);border-radius:12px;padding:10px 12px}.usage-log>div{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center}.usage-log span{font-size:.86rem}.usage-log small,.usage-questions small{color:var(--muted,#9fb1c3)}.usage-questions p{margin:0 0 5px;white-space:pre-wrap}
@media(max-width:640px){.usage-summary-grid{grid-template-columns:1fr}.employee-usage-head{align-items:center}.usage-log>div{grid-template-columns:1fr}.usage-duty{min-width:82px}.usage-dialog .dialog-shell{padding-left:14px;padding-right:14px}}

/* v3.5.34 - county selector on Roads page */
.roads-county-row { display:flex; align-items:center; gap:10px; width:100%; margin:0 0 8px; }
.roads-county-row label { flex:0 0 auto; color:var(--muted); font-weight:800; font-size:.82rem; }
.roads-county-row select { flex:1 1 auto; min-width:0; min-height:42px; padding:0 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); color:var(--text); font:inherit; font-weight:700; }
@media (max-width:760px) {
  #appScreen[data-mobile-view="roads"] .roads-county-row { padding:0 4px; margin-bottom:6px; }
  #appScreen[data-mobile-view="roads"] .roads-county-row select { min-height:44px; }
}


/* v3.5.37 administrator AI health + iPhone push alerts */
.admin-alert-panel{display:grid;gap:9px;margin-top:8px}
.admin-alert-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.admin-alert-heading h3{margin:0 0 3px}.admin-alert-heading p{margin:0}
.ai-health-badge{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:5px 10px;border:1px solid var(--border);border-radius:999px;font-size:.78rem;font-weight:800;white-space:nowrap;background:var(--panel-2)}
.ai-health-badge[data-state="healthy"]{border-color:#2c9c61}.ai-health-badge[data-state="signed_out"],.ai-health-badge[data-state="bridge_offline"],.ai-health-badge[data-state="access_denied"]{border-color:#d35858}.ai-health-badge[data-state="rate_limited"],.ai-health-badge[data-state="model_missing"],.ai-health-badge[data-state="timeout"]{border-color:#c99a42}
.admin-alert-actions{margin:2px 0 0}
@media(max-width:640px){.admin-alert-heading{align-items:center}.admin-alert-actions button{flex:1 1 100%}}