/* Phase 17b — CPO Site Map styles. Split out of index.html so the page is three
   maintainable files (index.html structure / styles.css look / app.js behavior)
   instead of one 456-line file. Vanilla CSS, no build step, no framework. */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: system-ui, Arial, sans-serif; font-size: 14px; color: #1a1a1a; }
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* -- app bar (light): brand · primary nav with submenus · corridor / status / account ------
   Conventional enterprise look: white bar, 1 px border, dark text at 14-15 px, navy accent,
   no gradients. Submenus open on click (hover only switches while one is open), one at a
   time, 160 ms fade+lift, Esc/outside click close, ARIA menubar. Long content opens in the
   drawer under the bar — never a new page, never a modal. */

:root {
  --navy-900: #0B1B33; --navy-700: #163360; --blue-600: #1D5BD6; --blue-700: #1750BF; --blue-100: #E3ECFB;
  --ink-900: #0F1B2D; --slate-600: #475569; --slate-500: #64748B; --slate-300: #CBD5E1;
  --line-200: #E2E7EF; --line-150: #EEF1F5; --line-100: #F1F5F9; --bg-100: #F5F7FA; --bg-hover: #F8FAFC; --white: #FFFFFF;
  --success-600: #1C8A4E; --success-100: #E6F5EC; --success-text: #166B3C;
  --warning-600: #B7791F; --warning-100: #FBF1DD; --warning-text: #7A4E0B;
  --danger-600: #C53030; --danger-100: #FCE8E8; --danger-text: #9B2C2C; --neutral-500: #94A3B8;
  --conf-high: #1C8A4E; --conf-medium: #B7791F; --conf-low: #94A3B8; --conf-none: #E2E7EF;
  --verified-600: #0E6B6A; --verified-100: #E0F2F1; --source-600: #1750BF; --source-100: #E3ECFB;
  --estimate-600: #7A4E0B; --estimate-100: #FBF1DD; --model-600: #4C46A8; --model-100: #EEEBFA;
  --user-600: #334155; --user-100: #EEF1F5; --pending-600: #64748B; --pending-100: #F8FAFC;
  --missing-hatch: repeating-linear-gradient(135deg,#F1F5F9 0 4px,#fff 4px 8px); --missing-border: #CBD5E1;
  --nav-bg: #0B1B33; --nav-fg: #FFFFFF; --nav-muted: #9FB3D1; --nav-line: rgba(255,255,255,.12);
  --font-sans: 'IBM Plex Sans', system-ui, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, "SFMono-Regular", Consolas, monospace;
  --radius-chip: 4px; --radius-control: 6px; --radius-card: 8px; --radius-kit: 10px; --radius-sheet: 12px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(15,27,45,.06),0 1px 3px rgba(15,27,45,.08);
  --shadow-2: 0 4px 12px rgba(15,27,45,.10);
  --shadow-3: 0 16px 40px rgba(15,27,45,.16);
  --ease: cubic-bezier(.2,.8,.2,1); --dur-fast: 150ms; --dur-drawer: 240ms; --focus-ring: 0 0 0 3px rgba(29,91,214,.25);
  --ink: var(--ink-900); --ink-2: var(--slate-600); --ink-3: var(--slate-500); --line: var(--slate-300); --line-soft: var(--line-200);
  --paper: var(--white); --paper-2: var(--bg-hover); --navy: var(--blue-600); --navy-hover: var(--blue-700); --hover: var(--bg-hover);
}
body { display: flex; flex-direction: column; font-family: var(--font-sans); font-size: 13px; color: var(--ink-900); background: var(--bg-100); }
h1 { font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -.02em; }
h2 { font-size: 18px; line-height: 24px; font-weight: 600; }
.label { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-500); }
.num, td, .kv { font-variant-numeric: tabular-nums; }
.appbar { display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 16px; background: var(--nav-bg); color: var(--nav-fg);
  border-bottom: 1px solid var(--nav-line); box-shadow: var(--shadow-1); flex: 0 0 auto; position: relative; z-index: 1100; } /* above Leaflet's 1000 */
.brand { display: flex; align-items: center; gap: 10px; color: var(--nav-fg); text-decoration: none; white-space: nowrap; font-size: 14px; }
.brand b { font-weight: 400; color: var(--nav-muted); }
.brand-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--blue-600); color: #fff; }
.brand-mark svg { width: 16px; height: 16px; }
.brand-text { display: inline-flex; align-items: baseline; gap: 4px; }
.workspace-tabs { display: flex; align-items: center; }
.corridor-switch { height: 32px; padding: 0 10px 0 8px; border: 1px solid var(--nav-line); border-radius: var(--radius-control); background: rgba(255,255,255,.08); border-bottom: 1px solid var(--nav-line); color: var(--nav-fg); }
.corridor-switch:hover, .nav-item.open > .corridor-switch { background: rgba(255,255,255,.14); color: var(--nav-fg); border-bottom-color: var(--nav-line); }
.switch-main { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch-meta { color: var(--nav-muted); font: 500 12px var(--font-mono); white-space: nowrap; }
.sr-only-focusable { position: fixed; left: 0; top: 0; width: 260px; height: 32px; opacity: .01; overflow: hidden; white-space: nowrap; visibility: visible !important; pointer-events: none; }   /* keyboard/test reachable, never a click trap over the brand or the phone bar (2026-09-05) */
.sr-only-focusable:focus-within { pointer-events: auto; }
.sr-only-focusable select { width: 260px; height: 32px; visibility: visible !important; }
.sr-only-focusable:focus-within { opacity: 1; position: static; width: auto; height: auto; margin: 4px 6px; }
main[data-view] { flex: 1 1 auto; min-height: 0; }
main[data-view][hidden] { display: none !important; }
#sitesView { display: flex; flex-direction: column; min-height: 0; }
.search-overlay { position: fixed; inset: 0; z-index: 1290; display: grid; place-items: start center; padding-top: 72px; background: rgba(11,27,51,.32); }
.search-panel { width: min(640px, calc(100vw - 32px)); background: var(--white); border: 1px solid var(--line-200); border-radius: var(--radius-sheet); box-shadow: var(--shadow-3); padding: 14px; }
.search-count { color: var(--slate-500); font-size: 12px; margin: 8px 0; }
.search-results { display: flex; flex-direction: column; gap: 4px; max-height: min(60vh, 520px); overflow: auto; }
.search-result { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 2px 12px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--radius-control); background: var(--white); text-align: left; }
.search-result:hover, .search-result.is-active { background: var(--blue-100); border-color: #BFD3F6; }
.search-result span { grid-row: span 2; color: var(--slate-500); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.search-result strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink-900); }
.search-result small { color: var(--slate-500); font-size: 12px; }
.top-icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; min-width: 32px; padding: 0 10px; border: 0; border-radius: var(--radius-control); background: rgba(255,255,255,.08); color: var(--nav-muted); font-size: 12px; }
.top-icon-btn:hover { background: rgba(255,255,255,.14); color: var(--nav-fg); }
.top-icon-btn svg { width: 15px; height: 15px; }
.top-icon-btn kbd { font: 500 10px var(--font-mono); border: 1px solid rgba(255,255,255,.18); border-radius: 3px; padding: 1px 4px; color: var(--nav-muted); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--radius-control); border: 1px solid transparent; font: 500 13px/1 var(--font-sans); text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.btn-primary { background: var(--blue-600); border-color: var(--blue-600); color: var(--white); }
.btn-primary:hover { background: var(--blue-700); border-color: var(--blue-700); }
.btn-secondary { background: var(--white); border-color: var(--slate-300); color: var(--ink-900); }
.btn-secondary:hover, .btn-ghost:hover { background: var(--bg-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--slate-600); }
.btn-danger { background: var(--white); border-color: #F1C5C5; color: var(--danger-600); }
.btn-danger:hover { background: var(--danger-100); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-icon { width: 36px; padding: 0; }
.btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, button:disabled, .field-locked { background: #F5F7FA !important; color: #94A3B8 !important; border-color: #E2E7EF !important; cursor: not-allowed; }
.is-loading .spinner, .spinner { width: 12px; height: 12px; border: 2px solid rgba(255,255,255,.4); border-top-color: currentColor; border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
.input, .select, .textarea, input:not([type=checkbox]):not([type=radio]), select, textarea { min-height: 36px; border: 1px solid var(--slate-300); border-radius: var(--radius-control); background: var(--white); color: var(--ink-900); font: 400 13px var(--font-sans); padding: 7px 10px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: 12px; font-weight: 500; color: var(--slate-600); }
.field-error { color: var(--danger-600); font-size: 11px; }
.field:has(.field-error) input, .field:has(.field-error) select, .field:has(.field-error) textarea { border-color: var(--danger-600); }
.tag, .ev { display: inline-flex; align-items: center; gap: 5px; min-height: 20px; padding: 2px 7px; border-radius: var(--radius-chip); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.tag-success { background: var(--success-100); color: var(--success-text); }
.tag-warning { background: var(--warning-100); color: var(--warning-text); }
.tag-danger { background: var(--danger-100); color: var(--danger-text); }
.tag-info { background: var(--blue-100); color: var(--source-600); }
.tag-neutral { background: var(--line-150); color: var(--slate-600); }
.ev-verified { background: var(--verified-100); color: var(--verified-600); }
.ev-source { background: var(--source-100); color: var(--source-600); }
.ev-estimate { background: var(--estimate-100); color: var(--estimate-600); }
.ev-model { background: var(--model-100); color: var(--model-600); }
.ev-user { background: var(--user-100); color: var(--user-600); }
.ev-pending { background: var(--pending-100); color: var(--pending-600); border: 1px dashed var(--missing-border); }
.ev-verified::before { content: "✓"; } .ev-source::before { content: "§"; } .ev-estimate::before { content: "≈"; } .ev-model::before { content: "ƒ"; } .ev-user::before { content: "✎"; } .ev-pending::before { content: "◔"; }
.conf { display: inline-flex; align-items: end; gap: 2px; vertical-align: -1px; }
.conf i { display: block; width: 4px; border-radius: 1px; background: var(--conf-none); }
.conf i:nth-child(1) { height: 6px; } .conf i:nth-child(2) { height: 9px; } .conf i:nth-child(3) { height: 12px; }
.conf-high i { background: var(--conf-high); } .conf-medium i:nth-child(-n+2) { background: var(--conf-medium); } .conf-low i:first-child { background: var(--conf-low); }
.missing { background: var(--missing-hatch); border: 1px dashed var(--missing-border); color: var(--neutral-500); font-style: italic; border-radius: var(--radius-card); padding: 10px 12px; }
.card { background: var(--white); border: 1px solid var(--line-200); border-radius: var(--radius-card); }
.card-kit { border-radius: var(--radius-kit); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-150); font-size: 14px; font-weight: 600; }
.alert { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.45; }
.alert-info { background: var(--blue-100); color: var(--navy-700); border-color: #BFD3F6; }
.alert-warn { background: var(--warning-100); color: var(--warning-text); border-color: #EAD3A2; }
.alert-error { background: var(--danger-100); color: var(--danger-text); border-color: #F1C5C5; }
.tabs { display: flex; align-items: center; gap: 2px; }
.tab { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-control); color: var(--nav-muted); font-size: 13px; font-weight: 500; text-decoration: none; }
.tab:hover, .tab[aria-current="page"], .tab.is-active { background: rgba(255,255,255,.12); color: var(--white); text-decoration: none; }
.tab-count { font: 500 11px var(--font-mono); }
.segmented { display: inline-flex; gap: 2px; padding: 2px; background: var(--line-150); border-radius: var(--radius-control); }
.segmented > button { height: 28px; padding: 0 12px; border: 0; border-radius: 5px; background: transparent; color: var(--slate-600); font-size: 12px; font-weight: 500; }
.segmented > button.is-active { background: var(--white); color: var(--ink-900); box-shadow: var(--shadow-1); }
.state { display: grid; place-items: center; gap: 8px; min-height: 180px; padding: 28px; text-align: center; color: var(--slate-500); }
.state-icon { width: 40px; height: 40px; border-radius: var(--radius-card); display: grid; place-items: center; background: var(--line-150); color: var(--slate-600); }
.state-title { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.state-text { font-size: 12px; line-height: 16px; max-width: 340px; }
.state a { color: var(--blue-600); font-weight: 500; }
.skeleton { background: linear-gradient(90deg,#EEF1F5 25%,#F8FAFC 50%,#EEF1F5 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--radius-chip); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

.nav { height: 100%; min-width: 0; flex: 1 1 auto; }
.menubar { display: flex; align-items: stretch; gap: 4px; height: 100%; margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; display: flex; align-items: stretch; }
.nav-btn { display: flex; align-items: center; gap: 6px; padding: 0 12px; background: transparent; border: none; border-bottom: 3px solid transparent;
  color: var(--nav-muted); font-size: 13px; font-weight: 500; transition: color .15s var(--ease), background .15s var(--ease); }
.nav-btn:hover { color: var(--nav-fg); background: rgba(255,255,255,.08); }
.nav-item.open > .nav-btn { color: var(--nav-fg); border-bottom-color: rgba(255,255,255,.3); background: rgba(255,255,255,.12); }
.nav-btn:focus-visible, .avatar-btn:focus-visible, .submenu-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav-btn .chev { width: 15px; height: 15px; transition: transform .16s var(--ease); }
.nav-item.open > .nav-btn .chev { transform: rotate(180deg); }

.submenu { position: absolute; top: 100%; left: 0; width: max-content; min-width: 250px; max-width: 380px; padding: 6px; background: var(--white); color: var(--ink-900);
  border: 1px solid var(--line-200); border-radius: var(--radius-card); box-shadow: var(--shadow-2); z-index: 1200;
  opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease); }
.submenu-right { left: auto; right: 0; }
/* Phase 40 step 11 fix: right-align the last three real .nav-items' dropdowns (View/Data/Admin),
   not just the last two — at 1024-1180px (a width band no earlier test exercised) the View menu's
   left:0 anchor pushed its ~370px-wide dropdown past the viewport edge. */
.menubar > .nav-item:nth-last-child(-n+3) > .submenu { left: auto; right: 0; }
.nav-item.open > .submenu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition-delay: 0s; }
.submenu-section + .submenu-section { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 4px; }
.submenu-title { font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 8px 12px 4px; }
.submenu-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; gap: 12px; align-items: start; width: 100%; padding: 8px 12px; text-align: left;
  background: none; border: none; border-radius: 4px; color: var(--ink); transition: background .12s var(--ease); }
.submenu-item:hover { background: var(--bg-hover); }
.mi-check { display: none; place-items: center; width: 18px; height: 18px; color: var(--blue-600); margin-top: 2px; }
.mi-check svg { width: 16px; height: 16px; }
.submenu-item[aria-checked="true"] .mi-check { display: grid; }
.submenu-item[aria-checked="true"] .mi-title { color: var(--navy); }
.submenu-item:disabled { opacity: .5; cursor: default; }
.mi-icon { display: grid; place-items: center; width: 22px; height: 22px; color: var(--blue-600); margin-top: 1px; }
.mi-icon svg { width: 18px; height: 18px; }
.mi-text { display: flex; flex-direction: column; gap: 2px; }
.mi-title { font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--ink-900); white-space: nowrap; }
.mi-desc { font-size: 12px; color: var(--slate-500); line-height: 1.35; }

.appbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; flex: 0 0 auto; }
.ctx-select { display: flex; align-items: center; gap: 8px; padding: 0 8px 0 10px; height: 36px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); min-width: 0; flex: 0 1 auto; }
.ctx-icon { display: grid; place-items: center; color: var(--navy); }
.ctx-icon svg { width: 16px; height: 16px; }
.ctx-select select { background: transparent; border: none; color: var(--ink); font-size: 14px; max-width: 260px; min-width: 0; width: 100%; padding: 4px 2px; text-overflow: ellipsis; }
.ctx-select select:focus { outline: none; }
.ctx-select:focus-within { border-color: var(--navy-hover); box-shadow: 0 0 0 2px rgba(29,78,216,.15); }

.status-chips { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.status-chips .part { display: inline-flex; align-items: center; gap: 6px; height: 26px; font-size: 11px; font-weight: 500; padding: 0 9px; border-radius: 5px; border: 1px solid transparent; background: rgba(255,255,255,.06); color: #C9D4E5; }
.status-chips .part::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neutral-500); }
.status-chips .fresh-green::before { background: #5DD39E; }
.status-chips .fresh-amber { color: #F3D9A4; background: rgba(183,121,31,.25); }
.status-chips .fresh-amber::before { background: #E3B15C; }
.status-chips .fresh-red { color: #F7B8B8; background: rgba(197,48,48,.25); }
.status-chips .fresh-red::before { background: #F47171; }
.status-chips .fresh-grey::before { background: var(--nav-muted); }

.avatar-btn { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--blue-600); color: #fff;
  font-size: 13px; font-weight: 600; transition: box-shadow .15s var(--ease); }
.avatar-btn:hover, .user-item.open > .avatar-btn { box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.user-email { font-size: 14px; color: var(--ink); padding: 10px 12px; line-height: 1.7; }
.user-email a { color: var(--navy-hover); text-decoration: none; font-weight: 500; }
.user-email a:hover { text-decoration: underline; }

.nav-toggle { display: none; width: 38px; height: 38px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); place-items: center; }
.nav-toggle svg { width: 20px; height: 20px; }
table[data-sortable] th { cursor: pointer; user-select: none; position: relative; padding-right: 18px; }
table[data-sortable] th::after { content: "\2195"; position: absolute; right: 6px; opacity: .35; font-size: 11px; }
table[data-sortable] th[aria-sort="ascending"]::after { content: "\2191"; opacity: 1; }
table[data-sortable] th[aria-sort="descending"]::after { content: "\2193"; opacity: 1; }
.table-responsive { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.table-responsive table { width: max-content; min-width: 100%; table-layout: auto; }
.table-responsive th, .table-responsive td { overflow: visible; text-overflow: clip; white-space: nowrap; max-width: none; }
.table-responsive td:first-child { font-weight: 500; }

.drawer { position: fixed; inset: 52px 0 0 auto; width: 480px; max-width: calc(100vw - 24px); transform: translateX(100%); opacity: 0; overflow: hidden; background: transparent; z-index: 1050;
  transition: transform var(--dur-drawer) var(--ease), opacity var(--dur-fast) var(--ease); pointer-events: none; }
.drawer.open { transform: translateX(0); opacity: 1; overflow: visible; pointer-events: auto; }
.drawer-inner { height: 100%; padding: 14px 18px 18px; overflow: auto; background: var(--white); border-left: 1px solid var(--line-200); box-shadow: var(--shadow-3); }
.drawer:not(.open) .drawer-inner { display: none; }
.drawer.open .drawer-inner { display: block; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.drawer-head h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.icon-btn { width: 30px; height: 30px; border-radius: 4px; border: 1px solid var(--line); background: var(--paper); font-size: 20px; line-height: 1; color: var(--ink-2); }
.icon-btn:hover { background: var(--hover); }
.drawer-panel { display: none; }
.drawer-panel.active { display: block; }
.drawer-panel .hint { font-size: 13px; color: var(--ink-3); }
.drawer-panel .err { font-size: 13px; color: #991b1b; }
.drawer-panel button { font-size: 14px; padding: 7px 14px; border-radius: 4px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); transition: background .15s var(--ease); }
.drawer-panel button:hover { background: var(--hover); }
.drawer-panel button:disabled { color: #9ca3af; background: var(--paper-2); cursor: default; }
.admin-body h2 { font-size: 14px; margin: 14px 0 6px; }
.admin-body table { border-collapse: collapse; font-size: 13px; margin-bottom: 4px; background: var(--paper); }
.admin-body th, .admin-body td { border: 1px solid var(--line-soft); padding: 5px 10px; text-align: left; white-space: nowrap; }
.admin-body th { background: var(--hover); }
.admin-body .scroll { max-height: 240px; overflow: auto; }
#freshnessDetail table { border-collapse: collapse; font-size: 13.5px; background: var(--paper); }
#freshnessDetail th, #freshnessDetail td { border: 1px solid var(--line-soft); padding: 6px 12px; text-align: left; }

/* non-blocking status toasts (re-score / download messages) */
#toasts { position: fixed; top: 68px; right: 24px; display: flex; flex-direction: column; gap: 6px; z-index: 1300; pointer-events: none; }
.toast { font-size: 13px; padding: 10px 14px; border-radius: var(--radius-control); background: var(--navy-900); color: var(--white); border: 0; border-left: 4px solid var(--blue-600); box-shadow: var(--shadow-3); }
.toast:empty { display: none; }
.toast.err { border-left-color: var(--danger-600); }

#footer { flex: 0 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; font-size: 12px;
  background: var(--white); color: var(--slate-600); border-top: 1px solid var(--line-200); }
#footer code { font-size: 11px; background: var(--line-150); color: var(--slate-600); padding: 0 4px; border-radius: 3px; }
.footer-right { color: var(--slate-500); white-space: nowrap; }

/* -- main grid + resizable panes ----------------------------------------- */

#main { display: grid; grid-template-columns: var(--left-w, 42%) 6px 1fr; flex: 1 1 auto; min-height: 0; }
#main.swapped #leftPane { order: 3; }
#main.swapped #rightPane { order: 1; }
#main.map-fullscreen { grid-template-columns: 1fr; }
#main.map-fullscreen #vSplitter,
#main.map-fullscreen #leftPane,
#main.map-fullscreen #detailPanelWrap,
#main.map-fullscreen #hSplitterMap { display: none; }
#main.map-fullscreen #rightPane { grid-template-rows: 1fr; }

/* overflow: clip (not hidden) — a hidden pane can still be scrolled sideways by focus()/scrollIntoView,
   which is how the filter panel ended up with its left edge cut off ("ilters"). */
.pane { display: grid; min-width: 0; min-height: 0; overflow: clip; }
#leftPane { grid-template-rows: var(--filter-h, 280px) 6px 1fr; border-right: 1px solid #ddd; }
#leftPane.filters-collapsed { grid-template-rows: auto 1fr; }   /* the hidden splitter leaves no grid box, so two rows */
#leftPane.filters-collapsed #hSplitterFilter { display: none; }
/* the map never shrinks below 160px however the splitter is dragged; the detail keeps ≥ 120px */
#rightPane { grid-template-rows: minmax(160px, var(--map-h, 55%)) 6px minmax(120px, 1fr); }
#rightPane.detail-collapsed { grid-template-rows: 1fr auto; }
#rightPane.detail-collapsed #hSplitterMap { display: none; }

.splitter { background: var(--line-200); position: relative; z-index: 5; transition: background .12s ease; }
.splitter::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #9ca3af; border-radius: 2px; }
.splitter.vertical::after { width: 2px; height: 36px; }
.splitter.horizontal::after { width: 36px; height: 2px; }
.splitter:hover, .splitter.dragging { background: var(--blue-100); }
.splitter:hover::after, .splitter.dragging::after { background: var(--blue-600); }
.splitter.vertical { cursor: col-resize; }
.splitter.horizontal { cursor: row-resize; }

/* -- panel chrome (filter panel / detail panel) -------------------------- */

.panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.panel-header { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #fff; border-bottom: 1px solid #e5e7eb; flex: 0 0 auto; }
.panel-header strong { font-size: 13px; flex: 1 1 auto; color: var(--ink); }
.collapse-btn, .help-btn { background: #fff; border: 1px solid #cbd5e1; border-radius: 3px; width: 22px; height: 22px; line-height: 1; font-size: 13px; }
.help-btn { border-radius: 50%; width: 18px; height: 18px; font-size: 11px; padding: 0; margin-left: 4px; color: #475569; }
.panel-body { overflow-y: auto; padding: 8px 10px; flex: 1 1 auto; min-height: 0; }
.filters-collapsed .panel-body, .filters-collapsed #activeFilterChips { display: none; }
.detail-collapsed .panel-body { display: none; }

/* -- filter panel contents ------------------------------------------------ */

.chip-row { display: flex; flex-wrap: wrap; gap: 4px; }
#activeFilterChips { padding: 4px 10px; gap: 5px; border-bottom: 1px dashed #e5e7eb; }
#activeFilterChips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 11px;
  border: 1px solid #cbd5e1; background: #fff; color: #334155; }
.chip.toggle { cursor: pointer; user-select: none; }
.chip.toggle[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip.active-filter { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.chip.active-filter button { border: none; background: none; color: inherit; font-size: 12px; line-height: 1; cursor: pointer; padding: 0 0 0 3px; }
.field-group { margin-bottom: 8px; }
.group-label { font-size: 11px; font-weight: 600; color: #4b5563; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.controls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 10px; margin-bottom: 8px; font-size: 12px; }
.controls-grid label { display: flex; flex-direction: column; gap: 2px; }
.controls-grid label.span2 { grid-column: 1 / -1; }  /* "span 2" forced a 2nd column in a 1-column pane → sideways overflow */
.controls-grid input, .controls-grid select { font-size: 12px; padding: 3px 5px; width: 100%; min-width: 0; box-sizing: border-box; }
.preset-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.preset-row button { font-size: 11px; padding: 4px 8px; border: 1px solid #cbd5e1; background: #f8fafc; border-radius: 3px; }
.preset-row button:hover { background: #eef2f7; }
.preset-row .preset-sep { width: 1px; align-self: stretch; background: #e5e7eb; margin: 0 2px; }
.preset-row .toggle-btn[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.preset-row select { font-size: 11px; padding: 3px 5px; border: 1px solid #cbd5e1; border-radius: 3px; background: #fff; }
#clearFiltersBtn { border-color: #fca5a5 !important; color: #991b1b; }

/* -- table ---------------------------------------------------------------- */

#tableWrap { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 8px 10px; background: var(--bg-100); }
#tableToolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex: 0 0 auto; }
.table-title { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; }
#tableCount { font-size: 12px; color: #6b7280; }
#compareBtn { font-size: 11px; padding: 3px 8px; background: var(--navy); color: #fff; border: none; border-radius: 4px; }
#clearTicksBtn { font-size: 11px; padding: 3px 8px; background: #fff; border: 1px solid #cbd5e1; border-radius: 3px; }
#tableScroll { overflow: auto; flex: 1 1 auto; min-height: 0; }
table { border-collapse: collapse; width: 100%; font-size: 12px; table-layout: fixed; background: var(--white); }
th, td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
th { position: sticky; top: 0; background: var(--bg-hover); color: var(--slate-500); font-weight: 600; font-size: 11px; line-height: 14px; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--line-200); user-select: none; cursor: pointer; position: relative; }
th.col-compare, td.col-compare { cursor: default; text-align: center; padding: 4px 2px; }
th .sort-ind { font-size: 9px; margin-left: 2px; color: #64748b; }
.col-resizer { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; }
.col-resizer:hover, .col-resizer.dragging { background: #93c5fd; }
tbody tr { cursor: pointer; }
tbody tr { height: 44px; }
tbody tr:nth-child(even) { background: var(--white); }
tbody tr:hover { background: var(--bg-hover); }
tbody tr.selected { background: var(--blue-100); box-shadow: inset 3px 0 0 var(--blue-600); }
tbody tr:focus-within, table:focus tr.selected { outline: 2px solid var(--blue-600); outline-offset: -2px; }
td.col-name { overflow: hidden; text-overflow: ellipsis; }

/* score/rank/band colouring (D) */
.pill { display: inline-block; padding: 2px 7px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.pill-green { background: var(--success-100); color: var(--success-text); }
.pill-amber { background: var(--warning-100); color: var(--warning-text); }
.pill-red { background: var(--danger-100); color: var(--danger-text); }
.pill-grey { background: var(--line-150); color: var(--slate-600); }
.rank-badge { display: inline-block; min-width: 20px; text-align: center; padding: 1px 5px; border-radius: 4px; font-weight: 600; }
.rank-gold { background: #fde68a; color: #78350f; }
.rank-blue { background: #dbeafe; color: #1e3a8a; }
.xfmr-unknown { background: #eef1f5; color: #64748b; font-size: 10px; padding: 1px 5px; border-radius: 8px; margin-left: 3px; }
.chip.status-chip { color: #fff; border: none; }

/* -- map area --------------------------------------------------------------- */

#mapWrap { position: relative; min-height: 0; overflow: hidden; }
#map { position: absolute; inset: 0; }
#mapFallback { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; background: #f5f5f5; color: #777; text-align: center; padding: 20px; }
#mapControls { position: absolute; top: 10px; right: 10px; z-index: 400; background: var(--white); border: 1px solid var(--line-200); border-radius: var(--radius-card); padding: 8px 10px; font-size: 11px; box-shadow: var(--shadow-2); }
.map-legend { position: absolute; left: 10px; bottom: 10px; z-index: 400; background: var(--white); border: 1px solid var(--line-200); border-radius: var(--radius-card); padding: 8px 10px; font-size: 11px; box-shadow: var(--shadow-2); line-height: 1.6; }
.map-legend .row { display: flex; align-items: center; gap: 5px; }
.legend-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: none; background: none; padding: 0 0 2px; font: inherit; color: var(--ink); cursor: pointer; }
.legend-toggle .chev { color: var(--navy); font-size: 11px; font-weight: 600; border: 1px solid var(--line); border-radius: 3px; padding: 0 6px; }  /* Phase 36: "Hide ▾ / Show ▸" — the bare arrow was easy to miss */
.ac-advanced { margin-top: 6px; }
.ac-advanced summary { cursor: pointer; color: var(--ink-2); font-size: 13px; }
.map-legend.collapsed .legend-body { display: none; }
.map-legend.collapsed { padding: 4px 9px; }
.map-legend .swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.map-legend .swatch-hollow { background: #fff; border: 2px dashed #222; box-sizing: border-box; }

/* -- detail panel ------------------------------------------------------------ */

#detailPanel h2 { margin: 0 0 2px; font-size: 16px; }
#detailPanel h3 { margin: 8px 0 2px; font-size: 12px; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
#detailPanel section > h3:first-child { margin-top: 0; }
#detailPanel p { margin: 2px 0; }
#detailPanel ul { margin: 2px 0; padding-left: 18px; }
#detailPanel .score-list { columns: 2; }
.detail-head p { margin: 1px 0; }
.detail-head .facts { color: #1e293b; }
.detail-head #copySummaryBtn { font-size: 11px; padding: 2px 8px; margin-left: 8px; border: 1px solid #cbd5e1; background: #f8fafc; border-radius: 3px; }
/* sections flow into as many ≥300px columns as the panel is wide: 1 on a phone, 3–4 on a desktop */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px 28px; margin-top: 6px;
  padding-top: 6px; border-top: 1px solid #e5e7eb; }
.detail-grid section { min-width: 0; }
/* emphasised values: bold tabular figures, coloured by the same 3-band rule as the table */
.kv { font-weight: 700; font-variant-numeric: tabular-nums; padding: 0 4px; border-radius: 3px; white-space: nowrap; }
.charger-item .kv { white-space: normal; }  /* Phase 36: one long pill per nearby charger made 390 px pages scroll sideways */
.kv-plain { color: #0f172a; padding: 0 1px; }
.kv-blue { color: #1e3a8a; background: #dbeafe; }
.kv-green { color: #166534; background: #dcfce7; }
.kv-amber { color: #92400e; background: #fef3c7; }
.kv-red { color: #991b1b; background: #fee2e2; }
.kv-grey { color: #55606b; background: #eef1f5; }
.kv-missing { color: #9ca3af; }
#detailPanel .headline { font-size: 13.5px; }
#detailPanel .headline .kv { font-size: 15px; padding: 1px 7px; }
#detailPanel .score-list .kv { font-size: 12.5px; }
.detail-head .facts .kv { font-size: 13px; }
.report-form { margin-top: 10px; padding-top: 8px; border-top: 1px solid #e5e7eb; }
.report-title { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: #1f2937; }
.report-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.report-kinds button { min-height: 38px; padding: 7px 10px; border: 1px solid #bfdbfe; border-radius: 6px; background: #eff6ff; color: #1e3a8a; font: inherit; font-size: 13px; cursor: pointer; }
.report-kinds button:hover { background: #dbeafe; }
.report-kinds button:disabled { cursor: default; color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }
.report-form input[name="comment"] { box-sizing: border-box; width: 100%; margin-top: 7px; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; font-size: 13px; }
/* host photos / Street View strip (top-10 sites only) */
.photo-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; align-items: flex-start; }
.photo-strip figure { margin: 0; width: 150px; }
.photo-strip img { width: 150px; height: 100px; object-fit: cover; border-radius: 4px; border: 1px solid #e5e7eb; display: block; }
.photo-strip figcaption { font-size: 11px; color: #4b5563; margin-top: 2px; line-height: 1.3; }
.photo-strip .review-list { flex-basis: 100%; margin: 4px 0 0; padding-left: 18px; font-size: 12px; }
.photo-strip .review-list li { margin: 2px 0; }
.photo-strip .hint { flex-basis: 100%; }
.signals-card { margin: 4px 0 6px; padding: 6px 8px; border: 1px solid #e5e7eb; border-radius: 4px; background: #f9fafb; }
.signals-card p { margin: 0 0 4px; line-height: 1.7; }
.signals-card .compact-list { margin: 2px 0 4px; padding-left: 18px; font-size: 12px; }
#statusForm { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin-top: 6px; }
#statusForm textarea { flex: 1 1 200px; min-width: 200px; font-family: inherit; }
#saveMsg.ok { color: #2e7d32; }
#saveMsg.err { color: #c62828; }
.hint { color: #6b7280; }
.detail-actions { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.detail-actions button:not(.btn) { font-size: 11px; padding: 4px 8px; border: 1px solid #cbd5e1; background: #f8fafc; border-radius: 3px; }
.checklist-item { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; margin: 3px 0; }

/* compare table (in detail panel) */
.compare-table { border-collapse: collapse; width: 100%; font-size: 11.5px; margin-top: 6px; }
.compare-table th, .compare-table td { border: 1px solid #e5e7eb; padding: 4px 6px; text-align: left; vertical-align: top; white-space: normal; }
.compare-table th.row-label { background: #f8fafc; font-weight: 600; white-space: nowrap; }
.compare-table td ul { margin: 0; padding-left: 16px; }

/* -- add corridor / scoreboard dialogs (Phase 19) --------------------------- */

.add-corridor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; font-size: 12px; }
.add-corridor-grid label { display: flex; flex-direction: column; gap: 2px; }
.add-corridor-grid input { font-size: 12px; padding: 4px 6px; }
.add-corridor-actions { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; flex-wrap: wrap; }
#acJobLog:not(:empty) { max-height: 160px; overflow-y: auto; font-size: 11.5px; background: #f8fafc;
  border: 1px solid #e5e7eb; border-radius: 4px; padding: 6px 8px; margin-bottom: 8px; }
#acJobLog.err { color: #c62828; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
#scoreboardTable { border-collapse: collapse; width: 100%; font-size: 12px; margin: 8px 0; }
#scoreboardTable th, #scoreboardTable td { text-align: left; padding: 5px 8px; border-bottom: 1px solid #eee; }
#scoreboardTable tbody tr { cursor: pointer; }
#scoreboardTable tbody tr:hover { background: #f0f7ff; }

/* popover / tooltip */
.popover { position: absolute; z-index: 200; background: #fff; color: var(--ink); font-size: 12px; line-height: 1.5; border: 1px solid var(--line);
  padding: 10px 12px; border-radius: 8px; width: 260px; box-shadow: 0 8px 24px rgba(17,24,39,.14); }
.popover strong { color: var(--ink); }

/* cluster badge & visit form */
.cluster-badge { display: inline-block; background: #3b82f6; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 9px; margin-left: 4px; vertical-align: middle; cursor: help; }
.compact-list { list-style: none; padding: 0; margin: 6px 0; }
.compact-list li { padding: 4px 6px; font-size: 12px; border-bottom: 1px dashed var(--line-soft); cursor: pointer; }
.compact-list li:hover { background: #f0f7ff; }
.compact-list li.self { background: #e0f2fe; font-weight: 600; }
.visit-form { background: #f8fafc; border: 1px solid var(--line-soft); border-radius: 6px; padding: 10px; margin-top: 8px; }
.visit-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.visit-form-grid label { font-size: 11px; color: var(--fg-muted); display: block; margin-bottom: 2px; }
.visit-form-grid input, .visit-form-grid select { width: 100%; padding: 4px 6px; font-size: 12px; border: 1px solid var(--line); border-radius: 4px; box-sizing: border-box; }
.visit-form button { background: var(--navy); color: #fff; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; }
.visit-form button:hover { background: var(--navy-hover); }

/* -- Phase 40 step 5: Sites toolbar, list/table modes and map pins ------- */
.sites-toolbar { flex: 0 0 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; background: var(--white); border-bottom: 1px solid var(--line-200); min-width: 0; }
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.toolbar-right { margin-left: auto; }
.sort-field { display: flex; align-items: center; gap: 6px; color: var(--slate-500); font-size: 12px; white-space: nowrap; }
.sort-field .select { min-height: 30px; height: 30px; padding: 3px 8px; font-size: 12px; }
#filtersCount { min-width: 18px; justify-content: center; }
#tableCount { color: var(--slate-600); font: 500 12px var(--font-mono); white-space: nowrap; }
#publicCorridorTag { white-space: nowrap; }
.export-item { align-items: center; }
.filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.link-btn { border: 0; background: transparent; color: var(--blue-600); font-size: 11px; font-weight: 500; padding: 0; }
.range-readout { font: 500 12px var(--font-mono); color: var(--ink-900); }
.check-row { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.check-row label { display: flex; align-items: center; gap: 8px; }
.check-row input { accent-color: var(--blue-600); }
#main.mode-table { grid-template-columns: 1fr; }
#main.mode-table #vSplitter, #main.mode-table #rightPane, #main.mode-table #hSplitterFilter { display: none; }
#main.mode-table #leftPane { grid-template-rows: var(--filter-h, 260px) 1fr; border-right: 0; }
#main.mode-table #leftPane.filters-collapsed { grid-template-rows: auto 1fr; }
#main.mode-map { grid-template-columns: 1fr; }
#main.mode-map #leftPane, #main.mode-map #vSplitter, #main.mode-map #detailPanelWrap, #main.mode-map #hSplitterMap { display: none; }
#main.mode-map #rightPane { grid-template-rows: 1fr; }
#main.detail-full { grid-template-columns: 1fr; }
#main.detail-full #leftPane, #main.detail-full #vSplitter, #main.detail-full #mapWrap, #main.detail-full #hSplitterMap { display: none; }
#main.detail-full #rightPane { grid-template-rows: 1fr; overflow: auto; }
/* `display: flex` restated here: .mode-map's `#detailPanelWrap{display:none}` (same specificity,
   earlier in source) would otherwise win on `display` alone when a phone opens full detail from
   the map tab's site sheet (mode stays 'map' while detailFull is also true — Phase 40 step 11). */
#main.detail-full #detailPanelWrap { display: flex; max-width: 1100px; width: min(1100px, calc(100vw - 48px)); margin: 20px auto; border: 1px solid var(--line-200); border-radius: var(--radius-sheet); background: var(--white); }
#showListBtn { position: absolute; left: 12px; top: 12px; z-index: 1001; box-shadow: var(--shadow-2); }
#main.mode-map .leaflet-top.leaflet-left { margin-top: 44px; }   /* zoom control sits under the floating "Site list" button */
#layersPopover { position: absolute; right: 52px; top: 126px; z-index: 1002; display: flex; flex-direction: column; gap: 9px; width: 220px; }
#layersPopover.hidden { display: none !important; }
#layersPopover label { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.layer-disabled { color: var(--neutral-500); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.site-row > td { padding: 0; border-bottom: 0; white-space: normal; overflow: visible; }
#siteTable.as-cards { border-collapse: separate; border-spacing: 0 4px; background: transparent; }
#siteTable.as-cards thead, #siteTable.as-cards colgroup { display: none; }
#siteTable.as-cards tr { height: auto; background: transparent; }
#siteTable.as-cards tr.selected .site-card { background: var(--blue-100); box-shadow: inset 3px 0 0 var(--blue-600); }
#siteTable.as-cards tr.is-hover .site-card { background: var(--bg-hover); }
.site-card { display: grid; grid-template-columns: 28px minmax(0, 1fr) 62px; gap: 10px; align-items: start; padding: 10px 10px 10px 8px; border-radius: var(--radius-card); background: var(--white); border: 1px solid transparent; cursor: pointer; }
.site-card:hover { background: var(--bg-hover); border-color: var(--line-200); }
.site-card-side { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 2px; color: var(--neutral-500); }
.site-card-side { grid-column: 1; grid-row: 1; }
.site-card-main { grid-column: 2; grid-row: 1; }
.site-card > .score-cell { grid-column: 3; grid-row: 1; }
.site-card-side input, .compare-cb { accent-color: var(--blue-600); }
.cb-wrap { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.site-card-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.site-card-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.site-card-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.site-card-meta { color: var(--slate-500); font-size: 11.5px; }
.site-card-facts, .site-card-foot { display: flex; flex-wrap: wrap; gap: 8px 10px; color: var(--slate-600); font-size: 11.5px; }
.site-card-foot { font-size: 11px; align-items: center; }
.metric-good { color: var(--success-text); }
.metric-warn { color: var(--warning-text); }
.metric-bad { color: var(--danger-text); }
.metric-muted { color: var(--neutral-500); font-style: italic; }
.score-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 52px; }
.score-num { font: 600 22px/1 var(--font-mono); color: var(--ink-900); }
.score-bar { width: 52px; height: 4px; background: var(--line-150); border-radius: 2px; overflow: hidden; }
.score-bar i { display: block; height: 100%; border-radius: inherit; background: var(--neutral-500); }
.score-green .score-num { color: var(--success-text); }
.score-green .score-bar i { background: var(--success-600); }
.score-amber .score-num { color: var(--source-600); }
.score-amber .score-bar i { background: var(--blue-600); }
.score-red .score-num { color: var(--neutral-500); }
.score-red .score-bar i { background: var(--neutral-500); }
.score-missing .score-num { color: var(--neutral-500); font-style: italic; }
.tag-missing { border: 1px dashed var(--missing-border); background: var(--pending-100); }
.pin { border-radius: 50%; width: 14px; height: 14px; margin-left: -7px; margin-top: -7px; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.pin-high, .pin-conn-lt { background: var(--success-600); }
.pin-mod { background: var(--blue-600); }
.pin-low, .pin-conn-unknown { background: var(--neutral-500); }
.pin-conn-ht { background: var(--warning-600); }
.pin-none { background: var(--white); border: 2px dashed var(--slate-600); box-shadow: none; }
.pin-status-research_only { background: var(--slate-500); }
.pin-status-desktop_validated { background: var(--blue-600); }
.pin-status-site_visit_required { background: var(--warning-600); }
.pin-status-site_visited { background: var(--success-600); }
.pin-status-owner_contacted { background: var(--model-600); }
.pin-status-electricity_validated { background: var(--verified-600); }
.pin-status-final_candidate { background: var(--navy-700); }
.pin-status-rejected { background: var(--danger-600); }
.pin.is-hover { transform: scale(1.2); box-shadow: 0 0 0 3px rgba(29,91,214,.45), 0 1px 3px rgba(0,0,0,.3); }
.pin.is-selected { transform: scale(1.35); box-shadow: 0 0 0 3px var(--blue-600), 0 2px 6px rgba(0,0,0,.3); animation: pulse 1.6s ease-out infinite; }
.pin-charger { width: 12px; height: 12px; margin-left: -6px; margin-top: -6px; border-radius: 2px; background: var(--ink-900); }
.pin-charger-weak { background: var(--warning-600); }
.pin-charger-ac, .pin-charger-unknown { background: var(--neutral-500); }
.pin-charger-twowheeler { background: var(--verified-600); }
.pin-charger-down { background: var(--danger-600); box-shadow: 0 0 0 2px var(--danger-600), 0 1px 3px rgba(0,0,0,.3); }
.pin-cluster { width: 26px; height: 26px; margin-left: -13px; margin-top: -13px; border-radius: 50%; background: var(--navy-900); color: var(--white); display: grid; place-items: center; font: 600 11px var(--font-mono); border: 2px solid var(--white); box-shadow: 0 0 0 4px rgba(11,27,51,.15); }
.hover-card { background: transparent; border: 0; box-shadow: none; }
.hover-card-inner { background: var(--white); border: 1px solid var(--line-200); border-radius: var(--radius-card); box-shadow: var(--shadow-3); padding: 10px 12px; min-width: 236px; }
.hover-card-inner > div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.hover-card-inner p { margin: 4px 0 0; color: var(--slate-500); font-size: 12px; }
.site-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1003; background: var(--white); border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(15,27,45,.18); padding: 10px 18px 24px; display: none; }
.sheet-handle { width: 36px; height: 5px; border-radius: 3px; background: var(--slate-300); margin: 0 auto 10px; }
.site-sheet-head { display: flex; justify-content: space-between; gap: 12px; }
.site-sheet h2 { margin: 2px 0 0; font-size: 19px; }
.site-sheet-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; font-size: 11px; }
.site-sheet ul { margin: 8px 0 12px; padding-left: 18px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(29,91,214,.45), 0 2px 6px rgba(0,0,0,.3); } 100% { box-shadow: 0 0 0 12px rgba(29,91,214,0), 0 2px 6px rgba(0,0,0,.3); } }
/* prefers-reduced-motion rule for .pin.is-selected moved into the single consolidated
   reduced-motion block at the end of this file (Phase 40 step 11 consolidation). */

/* -- Phase 40 step 6: Site intelligence panel ---------------------------- */
.detail-section { min-width: 0; }
.detail-breadcrumb { color: var(--slate-500); font-size: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.detail-title-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.detail-title-row h2 { margin: 4px 0 0; font-size: 20px; line-height: 25px; }
.detail-title-row p { color: var(--slate-600); font-size: 12.5px; line-height: 1.5; }
.detail-score { flex: none; text-align: right; }
.detail-score span { display: block; font: 600 44px/1 var(--font-mono); letter-spacing: -.04em; }
.detail-score small { color: var(--neutral-500); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.detail-score-green span { color: var(--success-text); }
.detail-score-amber span { color: var(--source-600); }
.detail-score-red span, .detail-score-grey span { color: var(--neutral-500); }
.detail-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 11px; }
.stepper { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--line-200); border-radius: var(--radius-control); overflow: hidden; }
.step { display: inline-flex; align-items: center; gap: 5px; color: var(--slate-500); font-size: 11.5px; white-space: nowrap; }
.step::after { content: ""; width: 16px; height: 1px; background: var(--line-200); margin-left: 2px; }
.step:last-child::after { display: none; }
.step i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--slate-300); background: var(--white); }
.step.is-done i { background: var(--success-600); border-color: var(--success-600); }
.step.is-current { color: var(--ink-900); font-weight: 600; }
.step.is-current i { background: var(--blue-600); border-color: var(--blue-600); }
.action-row { align-items: center; }
.action-row p { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.why-watch { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.detail-grid > #why { grid-column: 1 / -1; }   /* WHY/WATCH take a full row of .detail-grid, so each card gets a real column */
.reason-list { padding: 12px 14px; }
.reason-list p { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; font-size: 13px; line-height: 1.45; }
.ok-dot { color: var(--success-600); font-weight: 700; }
.warn-dot { color: var(--warning-600); font-weight: 700; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.component-bars { list-style: none; padding: 0 !important; margin: 8px 0 0 !important; columns: auto !important; display: flex; flex-direction: column; gap: 7px; }
.component-bars li { display: grid; grid-template-columns: 126px minmax(80px, 1fr) 52px; align-items: center; gap: 10px; font-size: 12.5px; }
.bar { height: 6px; border-radius: 3px; background: var(--line-150); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--blue-600); border-radius: inherit; }
.missing-bar { background: var(--missing-hatch); border: 1px dashed var(--missing-border); }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.metric-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line-200); border-radius: var(--radius-card); background: var(--white); }
.metric-card > span { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--slate-500); font-size: 11px; }
.metric-card > b { font-size: 17px; }
.provenance-card { margin-top: 10px; background: var(--ink-900); color: var(--white); border-radius: var(--radius-card); padding: 12px 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.provenance-card span { display: block; color: var(--nav-muted); font-size: 10px; letter-spacing: .08em; }
.provenance-card b { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.fact-rows p, .source-list p { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line-100); font-size: 13px; }
.fact-rows span, .source-list span { color: var(--slate-600); }
.source-list b { color: var(--slate-500); font: 500 11px var(--font-mono); }
.metric-card-wide { padding: 14px; }
.three-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.three-metrics p { margin: 0; padding: 10px; border: 1px solid var(--line-150); border-radius: var(--radius-control); }
.three-metrics span { display: block; color: var(--slate-500); font-size: 10px; letter-spacing: .08em; }
.three-metrics b { display: block; margin-top: 3px; font: 600 13px var(--font-mono); color: var(--ink-900); }
.economics-card { padding: 0 0 12px; }
.economics-card > p, .economics-card > .three-metrics, .economics-card > a, .economics-card > button { margin-left: 14px; margin-right: 14px; }
.risk-list p { display: flex; gap: 8px; margin: 0 0 8px; font-size: 13px; line-height: 1.45; }
.risk-critical i { color: var(--danger-600); }
.risk-watch i { color: var(--warning-600); }
.risk-clear i { color: var(--success-600); }
.next-action-list { margin: 8px 0 0; padding-left: 22px; }
.next-action-list li { margin: 6px 0; }
.detail-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--line-200); margin-bottom: 12px; overflow-x: auto; }
.detail-tabs a { padding: 8px 0; color: var(--slate-600); font-weight: 500; text-decoration: none; }
#detailBackBtn { margin-bottom: 8px; }
.skeleton-line { display: block; height: 18px; width: min(260px, 100%); }

/* -- Phase 40 steps 3-4: Dashboard + Corridor overview views ----------------------------------------- */
main.view-scroll { overflow: auto; }
.view-page { display: flex; flex-direction: column; gap: 24px; max-width: 1440px; width: 100%; margin: 0 auto; padding: 24px 32px 48px; box-sizing: border-box; }
.view-stack { display: flex; flex-direction: column; gap: 24px; }
.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.view-head h1 { margin: 6px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.view-kicker { font-size: 12px; color: var(--slate-500); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.view-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.crumb-sep { color: var(--neutral-500); font-weight: 400; }
.mono-tag { font: 500 14px var(--font-mono); color: var(--slate-600); padding: 3px 8px; border: 1px solid var(--line-200); border-radius: var(--radius-control); white-space: nowrap; }
.mono { font-family: var(--font-mono); }
.kpi-value-sm { font-size: 18px; line-height: 1.3; }   /* Phase 41: a ₹min – ₹max range needs two numbers on one tile */
.link-btn { border: 0; background: transparent; color: var(--blue-600); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; padding: 0; }
.card-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.card-body > strong { font-size: 14px; }
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line-200); border: 1px solid var(--line-200); border-radius: var(--radius-card); overflow: hidden; }
.kpi { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 18px 20px; border: 0; background: var(--white); text-align: left; font-family: inherit; color: var(--ink-900); cursor: pointer; min-width: 0; }
.kpi:hover:not([disabled]) { background: var(--bg-hover); }
.kpi[disabled] { cursor: default; }
.kpi-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-500); }
.kpi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neutral-500); }
.kpi-dot-success { background: var(--success-600); } .kpi-dot-warning { background: var(--warning-600); } .kpi-dot-danger { background: var(--danger-600); } .kpi-dot-info { background: var(--blue-600); }
.kpi-value { font: 600 32px/1 var(--font-mono); letter-spacing: -.03em; }
.kpi-note { font-size: 12px; color: var(--slate-500); }
.kpi-missing { background: var(--missing-hatch); }
.kpi-missing .kpi-value { font: italic 500 15px/1.3 var(--font-sans); color: var(--neutral-500); }
.kpi-missing .missing { border: 0; background: transparent; padding: 0; }
.dash-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.corridor-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
.list-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 18px; border: 0; border-top: 1px solid var(--line-100); background: var(--white); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.list-row:hover { background: var(--bg-hover); }
.list-row strong { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-main { min-width: 0; }
.list-meta { display: block; font-size: 11.5px; color: var(--slate-500); font-weight: 400; margin-top: 2px; }
.list-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.list-score { font-size: 13px; font-weight: 600; }
.dash-site { grid-template-columns: 34px minmax(0, 1fr) auto 62px; }
.rank-cell { color: var(--neutral-500); font-size: 12px; }
.visit-glyph { color: var(--warning-600); font-size: 16px; }
.alert-rows { gap: 0; }
.alert-row { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 8px 0; border-top: 1px solid var(--line-100); font-size: 13px; }
.alert-row:first-child { border-top: 0; }
.alert-row strong { font-weight: 500; }
.glyph { font-style: normal; margin-top: 2px; }
.glyph-warn { color: var(--warning-600); } .glyph-bad { color: var(--danger-600); } .glyph-ok { color: var(--success-600); } .glyph-missing { color: var(--neutral-500); }
.freshness-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--neutral-500); }
.freshness-dot.fresh-green { background: var(--success-600); } .freshness-dot.fresh-amber { background: var(--warning-600); } .freshness-dot.fresh-red { background: var(--danger-600); }
#dashScoreboard tbody tr { cursor: pointer; }
.scan-next { margin: 0; padding-left: 20px; } .scan-next li { margin: 6px 0; }
.bins { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; height: 120px; }
.bin { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.bin > .num { font-size: 10px; text-align: center; color: var(--slate-500); }
.bin-bar { display: block; border-radius: 3px 3px 0 0; min-height: 3px; }
.bin-green { background: var(--success-600); } .bin-amber { background: var(--warning-600); } .bin-red { background: var(--danger-600); } .bin-grey, .bin-none { background: var(--missing-hatch); border: 1px dashed var(--missing-border); }
.bin-axis { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; font: 400 10px var(--font-mono); color: var(--neutral-500); text-align: center; border-top: 1px solid var(--line-200); padding-top: 6px; }
.bin-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--slate-500); flex-wrap: wrap; }
.bin-sentence { color: var(--ink-900); font-weight: 500; text-align: center; }
.readiness-row { display: flex; flex-direction: column; gap: 5px; }
.readiness-row .section-head { margin: 0; font-size: 12px; }
.readiness-row .num { font-size: 11.5px; }
.ready-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--line-150); }
.ready-bar i { display: block; height: 100%; }
.ready-a { background: var(--success-600); } .ready-b { background: var(--warning-600); } .ready-c { background: var(--missing-hatch); border-left: 1px dashed var(--missing-border); }
.top10-row { grid-template-columns: 30px minmax(0, 1fr) 90px 44px; padding: 8px 18px; }
.top10-row .score-bar { width: auto; height: 5px; }
.top10-row .list-score { text-align: right; }
.top10-row .list-meta { display: inline; }
.action-list { margin: 0; padding-left: 22px; font-size: 13px; line-height: 1.45; } .action-list li { margin: 8px 0; }
.owner-note { margin: 10px 0 12px; padding: 10px 12px; border-left: 3px solid var(--blue-600); background: var(--blue-100); border-radius: 0 6px 6px 0; font-size: 13px; line-height: 1.5; }
.owner-note p { margin: 0; }
.report-library { width: 100%; border-collapse: collapse; font-size: 13px; } .report-library th, .report-library td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-200); vertical-align: top; white-space: normal; overflow: visible; text-overflow: clip; max-width: none; } .report-library td.num { white-space: nowrap; } .report-library td a { white-space: nowrap; } .report-library th { font-weight: 600; color: var(--slate-500); font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; }
.sticky-cta { display: none; }

/* -- Phase 40 steps 7-8: Compare + Reports views ------------------------------------------------------ */
.cmp-grid-wrap { overflow-x: auto; }
.cmp-grid { min-width: 100%; }
.cmp-row { display: grid; border-bottom: 1px solid var(--line-100); }
.cmp-row:last-child { border-bottom: 0; }
.cmp-head { border-bottom: 1px solid var(--line-200); }
.cmp-label { display: flex; align-items: center; gap: 6px; padding: 10px 18px; font-size: 12.5px; color: var(--slate-600); }
.cmp-head .cmp-label { align-items: flex-end; }
.cmp-site { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 16px 18px; border-left: 1px solid var(--line-100); min-width: 0; }
.cmp-remove { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border: 1px solid var(--line-200); border-radius: var(--radius-chip); background: var(--white); color: var(--neutral-500); font-size: 11px; }
.cmp-name { border: 0; background: none; padding: 0; text-align: left; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink-900); line-height: 1.3; cursor: pointer; padding-right: 26px; }
.cmp-score { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.cmp-score .num { font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.cmp-score .score-green { color: var(--success-text); } .cmp-score .score-amber { color: var(--source-600); } .cmp-score .score-red, .cmp-score .score-grey { color: var(--neutral-500); }
.cmp-cell { display: flex; align-items: center; gap: 6px; padding: 10px 18px; border-left: 1px solid var(--line-100); font: 500 13px var(--font-mono); min-width: 0; overflow-wrap: anywhere; }
.cmp-cell b { font-size: 11px; }
.cmp-cell.missing { border-radius: 0; padding: 10px 18px; font-family: var(--font-sans); }
.mark-best { background: var(--success-100); color: var(--success-text); }
.mark-worst { background: var(--danger-100); color: var(--danger-text); }
.cmp-summary { display: block; padding: 12px 14px; border-radius: var(--radius-card); font-size: 13px; line-height: 1.5; }
.cmp-cards { display: none; flex-direction: column; gap: 16px; }
.cmp-card .cmp-site { border-left: 0; }
.cmp-card-rows { padding: 0 18px 12px; }
.cmp-card-rows p { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 7px 0; border-top: 1px solid var(--line-100); font-size: 13px; }
.cmp-card-rows b { font: 500 13px var(--font-mono); padding: 0 4px; border-radius: 3px; }
.cmp-card-rows i.missing { padding: 0 6px; border-radius: 3px; }
/* Phase 46: admin API-usage view — one accent family plus greys, no gradients */
.usage-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.usage-chart-wrap { width: 100%; overflow: hidden; }
.usage-chart { width: 100%; height: auto; display: block; font-family: var(--font-mono); }
.usage-chart .utick { font-size: 10px; fill: var(--slate-500); }
.usage-chart .ugrid { stroke: var(--line-200); stroke-width: 1; }
.ubar.u1, .uswatch.u1 { fill: var(--navy); background: var(--navy); }
.ubar.u2, .uswatch.u2 { fill: var(--blue-600); background: var(--blue-600); }
.ubar.u3, .uswatch.u3 { fill: var(--slate-500); background: var(--slate-500); }
.ubar.u4, .uswatch.u4 { fill: var(--success-600); background: var(--success-600); }
.ubar.u5, .uswatch.u5 { fill: var(--warning-600); background: var(--warning-600); }
.ubar.u6, .uswatch.u6 { fill: var(--neutral-500); background: var(--neutral-500); }
.ubar.u7, .uswatch.u7 { fill: #7c3aed; background: #7c3aed; }
.ubar.u8, .uswatch.u8 { fill: #0e7490; background: #0e7490; }
.usage-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.uswatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; }
.ubar-track { display: inline-block; vertical-align: middle; width: 120px; max-width: 40vw; height: 8px; border-radius: 4px; background: var(--line-200); overflow: hidden; margin-right: 6px; }
.ubar-fill { display: block; height: 100%; }
.ubar-success { background: var(--success-600); } .ubar-warning { background: var(--warning-600); } .ubar-danger { background: var(--danger-600); }
.ubar-pct { font-family: var(--font-mono); font-size: 12px; }
.usage-table td.num, .usage-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.usage-cards { display: flex; flex-direction: column; }
.usage-card { padding: 12px 14px; border-bottom: 1px solid var(--line-200); }
.usage-card:last-child { border-bottom: 0; }
.usage-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin: 8px 0 0; font-size: 13px; }
.usage-kv dt { color: var(--slate-500); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; align-self: center; }
.usage-kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.report-tabs { border-bottom: 1px solid var(--line-200); gap: 4px; }
.report-tabs .tab { color: var(--slate-600); border-radius: 0; height: 36px; border-bottom: 2px solid transparent; background: transparent; border-top: 0; border-left: 0; border-right: 0; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.report-tabs .tab.is-active { color: var(--blue-600); border-bottom-color: var(--blue-600); background: transparent; }
.export-row { grid-template-columns: minmax(0, 1fr) auto; cursor: default; }
.export-row:hover { background: var(--white); }
.job-row { padding: 10px 0; border-top: 1px solid var(--line-100); display: flex; flex-direction: column; gap: 3px; }
.job-row:first-child { border-top: 0; }
.job-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.job-log summary { font-size: 12px; color: var(--blue-600); cursor: pointer; }
.job-log pre { margin: 6px 0 0; font: 12px/1.5 var(--font-mono); white-space: pre-wrap; color: var(--slate-600); }
.spinner { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--blue-100); border-top-color: var(--blue-600); border-radius: 50%; animation: spin .8s linear infinite; margin-right: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }
/* prefers-reduced-motion rule for .spinner moved into the single consolidated reduced-motion
   block at the end of this file (Phase 40 step 11 consolidation). */

/* -- Phase 40 step 10: Admin drawer restyle + Data readiness panel ------------------------------------- */
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line-200); }
.admin-head strong { font-size: 15px; }
.admin-body .card { margin-bottom: 16px; }
.admin-body .card:last-child { margin-bottom: 0; }
.admin-body table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--white); }
.admin-body th, .admin-body td { border: 0; border-bottom: 1px solid var(--line-150); padding: 0 10px; text-align: left; white-space: nowrap; }
.admin-body th { height: 32px; background: var(--bg-hover); color: var(--slate-500); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.admin-body tbody tr { height: 36px; }
.admin-body .scroll { max-height: 320px; overflow: auto; }
.cov-table td, .cov-table th, #readinessRegister td, #readinessRegister th { white-space: normal; }
.cov-bar { display: inline-block; width: 100px; height: 8px; border-radius: 4px; background: var(--missing-hatch); border: 1px dashed var(--missing-border); overflow: hidden; vertical-align: middle; }
.cov-bar i { display: block; height: 100%; background: var(--success-600); }
.cov-due { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--slate-600); }
.admin-body .chip { height: 28px; padding: 0 10px; border-radius: 14px; font-size: 12px; border: 1px solid var(--line-200); background: var(--white); color: var(--slate-600); cursor: pointer; }
.admin-body .chip[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.admin-body .btn { font-size: 13px; padding: 0 14px; border-radius: var(--radius-control); }

/* Phase 29: plan notices + plan line in the account menu */
.notice-bar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid #fdba74; font-size: 13px; }
.notice-bar a { color: #9a3412; font-weight: 600; }
.notice-bar button { margin-left: auto; background: none; border: 0; font-size: 18px; line-height: 1; color: #7c2d12; cursor: pointer; }
.plan-line { color: #555; font-size: 12px; margin: 4px 0 6px; }

/* Phase 30: corridor watch (button in the app bar, panel in the drawer) */
.watch-btn { position: relative; display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--nav-muted); cursor: pointer; }
.watch-btn svg { width: 18px; height: 18px; }
.watch-btn:hover { background: rgba(255,255,255,.1); color: var(--nav-fg); }
.watch-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #b91c1c; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.watch-sites, .watch-events { list-style: none; padding: 0; margin: 4px 0 14px; }
.watch-sites li, .watch-events li { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.watch-events li.unseen { font-weight: 600; }
.watch-events li .hint { margin-right: 8px; }
#watchBody h3 { font-size: 13px; margin: 10px 0 4px; }

/* Phase 30: My charger panel */
.mycharger { padding: 8px 0 10px; border-bottom: 1px solid var(--line-soft); }
.mycharger h3 { font-size: 13.5px; margin: 0 0 4px; }
.mycharger input[type=file] { font-size: 12px; max-width: 100%; }

/* -- Phase 40 step 11: mobile system — structural base rules (sheet engine, bottom nav, tablet
   tabs, detail action bar). Inert/hidden by default; activated inside the responsive section
   below so every breakpoint decision lives in one place. -------------------------------------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(11,27,51,.32); z-index: 1040; }
.sheet-handle { display: none; width: 36px; height: 5px; border-radius: 3px; background: var(--slate-300); margin: 8px auto 2px; touch-action: none; cursor: grab; }
body.sheet-lock { overflow: hidden; }
.sheet-only { display: none; }
.bottom-nav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; margin: 0; padding: 0 0 env(safe-area-inset-bottom); background: var(--white); border-top: 1px solid var(--line-200); box-shadow: 0 -2px 8px rgba(15,27,45,.08); }
.bottom-nav button { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border: 0; background: transparent; color: var(--slate-500); font: 500 11px var(--font-sans); }
.bottom-nav button svg { width: 20px; height: 20px; }
.bottom-nav button.is-active { color: var(--blue-600); }
.nav-toggle { position: relative; }
#navToggle.has-unseen::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #b91c1c; }
.tablet-tabs { display: none; }
.tablet-tabs.tabs .tab { color: var(--ink-900); background: var(--line-150); }
.tablet-tabs.tabs .tab.is-active { background: var(--blue-100); color: var(--blue-700); }
.detail-actions-sticky { display: none; }
.sheet-more { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-200); display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.sheet-more p { margin: 0; color: var(--slate-600); }
.sheet-actions { display: flex; gap: 8px; margin-top: 10px; }
.sheet-actions .btn:first-child { flex: 1 1 auto; }
.sheet-actions .btn:last-child { flex: 0 0 56px; }
.sheet-footer { display: none; }

/* -- responsive: xl >= 1440 . lg 1180-1439 . md 1024-1179 . sm 768-1023 . xs <= 767 (<= 430 is
   the phone frame; 431-767 uses the xs rules). ONE ordered section, must stay LAST so it beats
   the base #main/#leftPane/#rightPane rules. Order: reduced-motion -> 1700 chips (kept) ->
   lg -> md -> sm -> xs -> print. ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pin.is-selected { animation: none; }
  .spinner { animation: none; }
  .sheet, .drawer, .submenu { transition: none !important; }
}

/* Phase 40 p1-2 verification fix: with the view tabs and the legacy View/Data/Admin menus both in the bar, the
   freshness chips overlapped the menu labels up to ~1690 px (measured). Hide them below 1700 px; the same dates
   live under Data > Data freshness. Phase 5 moves the View items into the Sites toolbar and can lower this again.
   Kept verbatim (Phase 40 step 11 contract): the legacy View menu is still in the bar. */
@media (max-width: 1700px) { .status-chips { display: none; } }

/* -- lg: <= 1439px --------------------------------------------------------------------------- */
@media (max-width: 1439px) {
  .footer-right { display: none; }
  .ctx-select select { max-width: 200px; }
}

/* -- md: <= 1179px (1024-1179) --------------------------------------------------------------- */
@media (max-width: 1179px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-grid, .corridor-grid { grid-template-columns: 1fr; }
  .view-page { padding: 20px 20px 40px; }
  /* Pre-existing design plan text (docs/phases/phase-40-ui-redesign.md §8.8): "900-1179 icon
     search, shorter chips". Never implemented, so the full nav (brand text + workspace tabs +
     View/Data/Admin + labelled search + watch + avatar) silently overflowed at 1024-1179 for an
     admin user (only exposed now that a test finally checks this width band). Compacting the
     brand and search here is the fix, not a new feature. */
  .brand-text { display: none; }
  .top-icon-btn span, .top-icon-btn kbd { display: none; }
}

/* -- sm: <= 1023px (768-1023, tablet) — hamburger nav, stacked workspace, List/Map tabs -------
   The nav-toggle/hamburger threshold widens from the legacy 900px to 1023px so the tablet band
   (768-1023) gets the same collapsed-menu chrome as a phone; ≥1024 keeps the full nav. */
@media (max-width: 1023px) {
  .appbar { height: auto; min-height: 56px; flex-wrap: wrap; gap: 8px; padding: 6px 10px; position: sticky; top: 0; z-index: 1200; }
  .brand-text { display: none; }
  .brand-mark { width: 32px; height: 32px; }
  .nav-toggle { display: grid; order: 5; flex: 0 0 auto; }
  .nav { display: none; width: 100%; order: 10; height: auto; }
  .appbar.nav-open .nav { display: block; max-height: calc(100dvh - 64px); overflow-y: auto; -webkit-overflow-scrolling: touch; }   /* 2026-09-14: 11 corridors no longer fit an 844 px phone — the open nav scrolls */
  .corridor-menu #corridorMenuRows { max-height: 42vh; overflow-y: auto; }   /* the corridor list scrolls on its own so Corridor actions stay reachable */
  .menubar { flex-direction: column; align-items: stretch; gap: 0; height: auto; border-top: 1px solid var(--line-soft); }
  .nav-item { flex-direction: column; }
  .nav-btn { width: 100%; justify-content: space-between; padding: 12px 8px; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
  .nav-item.open > .nav-btn { border-bottom-color: var(--line-soft); }
  .submenu { position: static; width: 100%; max-width: none; min-width: 0; box-shadow: none; border: none; border-radius: 0; padding: 0 0 6px 8px;
    transform: none; display: none; opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
  .nav-item.open > .submenu { display: block; }
  .submenu-right { left: 0; right: auto; }
  .user-item { position: static; }
  .user-item .submenu { position: absolute; right: 12px; left: auto; top: 56px; width: 260px; display: block; box-shadow: 0 8px 24px rgba(17,24,39,.14); border: 1px solid var(--line); border-radius: 6px; padding: 6px;
    opacity: 0; visibility: hidden; pointer-events: none; }
  .user-item.open > .submenu { opacity: 1; visibility: visible; pointer-events: auto; }
  .appbar-right { margin-left: 0; gap: 8px; order: 4; flex: 1 1 auto; min-width: 0; }
  .ctx-select { height: 34px; flex: 1 1 auto; min-width: 0; }
  .ctx-select select { max-width: none; width: 100%; font-size: 13px; }
  .map-legend { font-size: 10.5px; max-width: 60vw; line-height: 1.5; }
  #footer { display: block; position: static; padding: 4px 10px; font-size: 11.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #footer .footer-right { display: none; }
  html, body { height: auto; min-height: 100%; width: 100%; max-width: 100%; overflow-x: clip; }
  body { display: block; max-width: 100vw; overflow-x: clip; }
  #main { display: flex; flex-direction: column; overflow-x: clip; min-height: 0; max-width: 100vw; }
  .pane { display: flex; flex-direction: column; overflow-x: clip; max-width: 100vw; }
  #vSplitter, #hSplitterMap, #hSplitterFilter { display: none !important; }
  #rightPane { height: auto; order: 1; flex: 0 0 auto; grid-template-rows: 1fr 0 auto; }
  #mapWrap { height: 55vh; min-height: 280px; position: relative; }
  #main.mode-map #mapWrap { height: calc(100vh - 160px); }   /* map mode: the map is the page (app bar + toolbar + footer ~ 160px) */
  #leftPane { order: 2; height: auto; flex: 0 0 auto; border-right: none; border-top: 1px solid var(--line); grid-template-rows: auto 0 auto; }
  #leftPane.filters-collapsed { grid-template-rows: auto 0 auto; }
  #leftPane, #rightPane, .pane { width: 100%; max-width: 100%; }
  #tableScroll { max-height: none; overflow-x: auto; overflow-y: hidden; }   /* Phase 34: the page scrolls, not the table */
  #siteTable th { position: static; }
  .sites-toolbar { height: auto; min-height: 44px; overflow: hidden; align-items: flex-start; padding: 6px 8px; gap: 6px; }
  .toolbar-left, .toolbar-right { flex-wrap: wrap; gap: 6px; }
  .toolbar-right { overflow-x: auto; justify-content: flex-start; }
  #viewMode { display: none; }   /* Section E: the 3-way segmented is replaced by the 2-way List/Map tabs on tablet */
  .tablet-tabs { display: flex; gap: 6px; padding: 6px 12px; background: var(--white); border-bottom: 1px solid var(--line-200); }
  .tablet-tabs .tab { min-height: 36px; }
  .controls-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .controls-grid input, .controls-grid select { width: 100%; min-width: 0; }
  .drawer.open { max-height: none; }
  .drawer-inner { padding: 10px 12px 14px; }
  .add-corridor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #toasts { left: 12px; right: 12px; top: auto; bottom: 48px; }
  .site-sheet:not(.hidden) { display: block; }
  .photo-strip figure, .photo-strip img { width: min(150px, 100%); max-width: 100%; }
  .photo-strip a, .photo-strip img { display: block; max-width: calc(100vw - 40px) !important; width: min(150px, calc(100vw - 40px)) !important; }
  .photo-strip { overflow: hidden; max-width: 100%; }
  #detailPanel, #detailPanel * { max-width: 100%; }
  #map, #map * { max-width: none; }
  /* Only the map CONTAINER clips (RCA-2026-09-07-17): Leaflet panes are 0×0 boxes whose children hang outside them,
     so overflow:hidden on a pane hides every tile and pin — the finder map was blank on phones and tablets. */
  #mapWrap, #map, .leaflet-container { overflow: hidden !important; max-width: 100vw; }
  .leaflet-map-pane, .leaflet-pane, .leaflet-overlay-pane, .leaflet-marker-pane, .leaflet-tile-pane { overflow: visible !important; }
  .detail-title-row { flex-direction: column; }
  .why-watch, .metric-grid, .three-metrics { grid-template-columns: 1fr; }
  .component-bars li { grid-template-columns: 104px minmax(60px, 1fr) 48px; }
  .provenance-card { grid-template-columns: 1fr; }
  .admin-head { flex-direction: column; align-items: stretch; }
  .cov-bar { width: 60px; }
  /* Section E: filter rail becomes a left drawer overlay on tablet — CSS-only slide reusing the
     existing collapse toggle (ponytail: not the full sheet engine; no test exercises this seam,
     add a backdrop + the sheet engine's `side: 'left'` option if that changes). */
  #leftPane:not(.filters-collapsed) #filterPanel { position: fixed; left: 0; top: 56px; bottom: 0; z-index: 1050; width: 280px; max-width: 82vw; box-shadow: var(--shadow-3); }
}

/* -- xs: <= 767px (phone) — top bar, bottom nav, sheets, 44 px touch targets ------------------ */
@media (max-width: 767px) {
  /* Dashboard/Corridor/Compare/Reports (Section F) */
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi { padding: 14px; min-height: 44px; } .kpi-value { font-size: 26px; }
  .view-page { padding: 14px 12px calc(72px + env(safe-area-inset-bottom)); gap: 16px; }
  .view-head h1 { font-size: 22px; }
  .dash-site { grid-template-columns: 28px minmax(0, 1fr) 56px; } .dash-site .list-side { display: none; }
  .top10-row { grid-template-columns: 24px minmax(0, 1fr) 44px; } .top10-row .score-bar { display: none; }
  .bins { height: 70px; }
  .bin-axis span:nth-child(even) { visibility: hidden; }
  #dashScoreboard thead { display: none; }
  #dashScoreboard, #dashScoreboard tbody, #dashScoreboard tr { display: block; }
  #dashScoreboard tr { padding: 10px 14px; border-top: 1px solid var(--line-100); }
  #dashScoreboard td { display: none; padding: 0; border: 0; }
  /* Phase 41 M17: 3 cells (High opp. / High conf. / Chargers) inserted after Shortlist pushed Last scored
     from column 8 to column 12; the new cells stay off the phone card (deliberately hidden, not half-rendered). */
  #dashScoreboard td:nth-child(1), #dashScoreboard td:nth-child(2), #dashScoreboard td:nth-child(3), #dashScoreboard td:nth-child(12) { display: inline; margin-right: 8px; }
  #dashScoreboard td:nth-child(2) { font-weight: 600; }
  .sticky-cta { display: block; position: sticky; bottom: calc(56px + 12px + env(safe-area-inset-bottom)); z-index: 900; } .sticky-cta .btn { width: 100%; min-height: 44px; }
  .cmp-grid-wrap { display: none; }
  .cmp-cards { display: flex; }
  .cmp-sticky { display: flex; gap: 8px; position: sticky; bottom: calc(56px + env(safe-area-inset-bottom)); background: var(--white); padding: 8px 0; } .cmp-sticky .btn { flex: 1 1 0; min-height: 44px; }
  .report-tabs { overflow-x: auto; }
  .report-tabs .tab { min-height: 44px; }
  .export-row { grid-template-columns: 1fr; } .export-row .view-actions { flex-wrap: wrap; }

  /* Section A: compact top bar — brand · corridor name only · avatar; search/menus live in the
     hamburger. The nav stays display:none only while closed AND collapsed to its first item;
     opening the hamburger (.nav-open) is untouched from the sm rule above. */
  .switch-meta { display: none; }
  .corridor-switch .switch-main { max-width: 46vw; }
  .appbar:not(.nav-open) .nav { display: block; }
  .appbar:not(.nav-open) .menubar > li:not(:first-child) { display: none; }
  .appbar:not(.nav-open) .menubar > li:first-child { flex-direction: row; }
  .appbar:not(.nav-open) .menubar > li:first-child .nav-btn { width: auto; padding: 0 4px; border-bottom: 0; font-size: 13px; }
  .appbar:not(.nav-open) .menubar > li:first-child .submenu {
    position: absolute; top: 100%; left: 12px; right: 12px; width: auto; max-width: none;
    box-shadow: var(--shadow-2); border: 1px solid var(--line-200); border-radius: var(--radius-card);
    z-index: 1150; padding: 6px; transform: translateY(-4px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .16s var(--ease), transform .16s var(--ease);
  }
  .appbar:not(.nav-open) .menubar > li:first-child.open .submenu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

  /* Section B: bottom nav + content clearance */
  .bottom-nav { display: flex; height: 56px; }
  main[data-view] { padding-bottom: 0; }   /* .view-page already carries the clearance padding above */
  #sitesView { padding-bottom: 0; }
  #tableScroll { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  #footer { display: none; }   /* hidden on xs — the research-only line stays reachable at sm+ */
  #toasts { bottom: calc(56px + 12px + env(safe-area-inset-bottom)); }

  /* Section C: sheet engine activation — drawer, filters, site sheet */
  .drawer.sheet { inset: auto 0 0 0; width: 100%; max-width: 100%; height: var(--sheet-h, 92vh); transform: translateY(100%); border-radius: 20px 20px 0 0; overflow: hidden; transition: transform var(--dur-drawer) var(--ease); }
  .drawer.sheet.open { transform: translateY(0); }
  .drawer.sheet .drawer-inner { height: 100%; border-left: 0; border-radius: 20px 20px 0 0; box-shadow: none; }
  .drawer.sheet .sheet-handle { display: block; }
  /* map/table mode hide #leftPane entirely (display:none) — a display:none ancestor cannot be
     escaped by a fixed-position descendant, so un-hide the box just enough to show the sheet. */
  #main.mode-map #leftPane:has(#filterPanel.sheet.open) { display: block; }
  #filterPanel.sheet {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1050; height: var(--sheet-h, 92vh);
    background: var(--white); border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(15,27,45,.18);
    transform: translateY(100%); transition: transform var(--dur-drawer) var(--ease); display: flex; flex-direction: column;
  }
  #filterPanel.sheet.open { transform: translateY(0); }
  #filterPanel.sheet .sheet-handle { display: block; }
  #filterPanel.sheet .panel-header { flex: 0 0 auto; }
  #filterPanel.sheet #filterSheetReset { display: inline-flex; min-height: 32px; }
  #filterPanel.sheet .panel-body { flex: 1 1 auto; overflow: auto; display: block !important; }
  #filterPanel.sheet #activeFilterChips { display: flex !important; }
  #filterPanel.sheet #filterSheetFooter { display: block; position: sticky; bottom: 0; background: var(--white); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-200); }
  #filterPanel.sheet #filterSheetApply { width: 100%; min-height: 44px; }
  #siteSheet.sheet { height: var(--sheet-h, 22vh); overflow: auto; transition: height var(--dur-drawer) var(--ease); padding-top: 0; }
  #siteSheet.sheet .sheet-handle { display: block; }
  #siteSheet[data-snap="22"] .sheet-more { display: none; }
  .sheet-actions { position: sticky; bottom: 0; background: var(--white); padding-top: 8px; }

  /* Site intelligence full page as a 92% sheet (Section C.3) */
  .detail-actions-sticky { position: sticky; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 1050; display: none; gap: 8px; padding: 8px 12px; background: var(--white); border-top: 1px solid var(--line-200); box-shadow: 0 -4px 12px rgba(15,27,45,.08); }
  #main.detail-full .detail-actions-sticky { display: flex; }
  .detail-actions-sticky .btn { flex: 1 1 0; min-height: 44px; }
  #main.detail-full .detail-tabs { position: sticky; top: 0; background: var(--white); z-index: 5; }

  /* Section D: sites on phones — full-bleed map above the bottom nav, card list every mode */
  #main.mode-map #mapWrap { height: calc(100dvh - 160px - 56px - env(safe-area-inset-bottom)); }
  .sort-field .select { max-width: 160px; }
  #viewMode { display: none; }

  /* 44 px touch targets (contract hard rule) — desktop sizes are untouched above this block.
     Both dimensions on every real control; a handful of native/small elements (checkboxes,
     Leaflet zoom glyphs) get their hit area padded instead of being visually blown up to 44px. */
  .btn, .btn-sm, button:not(.sheet-handle):not(.chip):not(.step), .top-icon-btn, .icon-btn, .collapse-btn, .help-btn,
  .avatar-btn, .watch-btn, .nav-toggle, .nav-btn, .tab, .segmented > button, .preset-row button,
  .submenu-item, .list-row, .kpi, .site-card, .compact-list li, .bottom-nav button,
  select, input:not([type=checkbox]):not([type=radio]), .chip.toggle, .chip.status-chip,
  .fitMapBtn, #fitMapBtn, #layersBtn, .rank-badge, .link-btn, .brand, .check-row label {
    min-height: 44px;
    min-width: 44px;
  }
  .brand { display: inline-flex; align-items: center; }
  .chip { min-height: 32px; }   /* small readout chips stay compact; interactive chip.toggle above is 44 */
  /* compare checkboxes: the real 44px target is the wrapping `.cb-wrap` <label> (app.js), not the
     20px native input — clicking anywhere in the label toggles it via normal label/input binding */
  .cb-wrap { min-width: 44px; min-height: 44px; }
  .site-card-side { padding: 6px; min-width: 44px; }
  td.col-compare, th.col-compare { padding: 10px 8px; }
  .legend-toggle { min-height: 44px; }
  #legendToggle .chev { min-height: 24px; }
  .sort-field .select { min-height: 44px; height: 44px; }
  #filterPanel.sheet #filterSheetReset { min-height: 44px; }
  /* higher specificity than Leaflet's own `.leaflet-touch .leaflet-bar a` (headless Chromium at a
     phone viewport reports touch, which Leaflet already bumps to 30px — still short of 44). */
  #map .leaflet-control-zoom a, #routeMap .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }

  /* focus-visible reaches the new interactive surfaces too */
  .chip:focus-visible, .list-row:focus-visible, .kpi:focus-visible, .bottom-nav button:focus-visible,
  .tab:focus-visible, .site-card:focus-visible, .tablet-tabs .tab:focus-visible {
    outline: none; box-shadow: var(--focus-ring);
  }

  /* Screenshot-review fixes (2026-09-05): one-row phone bar — brand · corridor name · avatar · menu;
     search + bell show only while the hamburger is open (the dot on ☰ mirrors unseen alerts). */
  .appbar:not(.nav-open) #globalSearchBtn, .appbar:not(.nav-open) #watchBtn { display: none; }
  .appbar:not(.nav-open) .nav { width: auto; flex: 1 1 auto; min-width: 0; order: 2; }
  .appbar:not(.nav-open) .menubar { border-top: 0; }
  .appbar:not(.nav-open) .menubar > li:first-child .nav-btn { padding: 0; font-size: 14px; }
  .appbar:not(.nav-open) .appbar-right { flex: 0 0 auto; order: 4; width: auto; }
  .appbar:not(.nav-open) .nav-toggle { order: 5; }
  .appbar:not(.nav-open) .menubar > li:first-child .submenu { position: fixed; top: 56px; left: 8px; right: 8px; max-height: 70vh; overflow: auto; }
  /* the bottom nav carries Map / Sites on phones — no tablet tabs, no floating "Site list" pill */
  .tablet-tabs, #showListBtn { display: none !important; }
  /* sheets sit above the sticky phone bar (z 1200) and end above the bottom nav */
  .sheet.open { z-index: 1250; }
  .sheet-backdrop { z-index: 1240; }
  #siteSheet.sheet { position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 1150; }
  #main.mode-map #mapWrap { height: calc(100dvh - 56px - 56px - 96px - env(safe-area-inset-bottom)); }   /* bar 56 · toolbar ≈ 96 · bottom nav 56 */
  #mapControls { top: 8px; right: 8px; }
  .detail-tabs a, main[data-view] a.btn { min-height: 44px; display: inline-flex; align-items: center; }
  .detail-tabs a { min-width: 44px; justify-content: center; padding: 0 8px; }
  #layersPopover label { min-height: 44px; display: flex; align-items: center; gap: 8px; }
  #reportsBody a:not(.btn) { min-height: 44px; display: inline-flex; align-items: center; }
  .checklist-item { min-height: 44px; align-items: center; }
}

/* -- <= 430px: the phone frame subset of xs --------------------------------------------------- */
@media (max-width: 430px) {
  .kpi-grid, .usage-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-head .usage-head-hint { display: none; }
  .add-corridor-grid { grid-template-columns: 1fr; }
  .ctx-select select { max-width: 50vw; }
}

@media print {
  .bottom-nav, .sheet-backdrop, #toasts, .tablet-tabs { display: none !important; }
}