/* RME app theme: a clear map surface, compact navigation, and consistent docks. */
:root { color-scheme: dark; --rme-bg:#0c1422; --rme-panel:#142238; --rme-card:#192b44; --rme-line:#324760; --rme-text:#f1f6fc; --rme-muted:#b3c5d9; --rme-blue:#81cbff; --rme-accent:#f5c267; }
html { scroll-padding-top: 8rem; }
body { background:var(--rme-bg); color:var(--rme-text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:1rem; line-height:1.55; }
button,input,select,textarea { font:inherit; }
button,summary,a,input,select { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--rme-accent); outline-offset:3px; }
button { touch-action:manipulation; }
button:disabled { opacity:.5; cursor:not-allowed; }
a { color:var(--rme-blue); }
h1,h2,h3,h4,p { overflow-wrap:anywhere; }
h2 { font-size:clamp(1.45rem,2.1vw,2rem); letter-spacing:-.025em; margin:0; line-height:1.2; }
h3 { font-size:1.15rem; margin-top:0; }
.small,.muted.small,.debug-label,.filter-field>span,.viewer-control-label,.route-summary-detail,.navigation-overlay-caption { font-size:.875rem; }
.muted { color:var(--rme-muted); }
.hidden { display:none!important; }
.skip-link { position:fixed; top:-100px; left:1rem; z-index:10000; padding:.8rem; background:var(--rme-accent); color:#101c2e; }
.skip-link:focus { top:1rem; }
.topbar { min-height:76px; padding:.8rem clamp(.75rem,2vw,2rem); gap:1.5rem; background:#101c2e; border-bottom:1px solid var(--rme-line); z-index:1200; backdrop-filter:none; }
.app-brand { display:flex; flex-shrink:0; gap:.7rem; align-items:center; color:var(--rme-text); font-weight:750; text-decoration:none; font-size:1rem; line-height:1.25; }
.app-brand small { display:block; color:var(--rme-muted); font-size:.75rem; font-weight:450; margin-top:.3rem; }
.brand-mark { border:1px solid #aa8144; color:var(--rme-accent); border-radius:10px; padding:.65rem .45rem; font-size:.85rem; letter-spacing:.03em; }
.app-toolbar { flex:1; justify-content:flex-end; gap:.3rem; overflow:auto; padding:3px; scrollbar-width:thin; }
.action-button { min-height:44px; border-radius:9px; border:1px solid var(--rme-accent); padding:.65rem 1rem; background:var(--rme-accent); color:#182230; font-size:.9rem; line-height:1.3; font-weight:650; text-decoration:none; display:inline-flex; justify-content:center; align-items:center; gap:.4rem; box-shadow:none; }
.action-button:hover { filter:brightness(1.08); }
.action-button.secondary { background:var(--rme-panel); border-color:var(--rme-line); color:var(--rme-text); }
.app-toolbar-button.secondary { background:transparent; border-color:transparent; white-space:nowrap; }
.app-toolbar-button.active,.app-toolbar-button.secondary.active { background:#263e5c; color:#b4dfff; border-color:#497ca6; }
.layout { display:block; width:100%; max-width:1800px; margin:auto; padding:clamp(.7rem,1.5vw,1.5rem); }
.main-column { min-width:0; }
.main-stage { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr); grid-template-areas:"tools tools" "settings settings" "map viewer"; gap:1rem; height:auto; }
.desktop-map-controls { grid-area:tools; padding:0; position:static; }
.map-toolbar-controls { display:flex; flex-wrap:wrap; gap:.55rem; }
.map-layer-controls,body.map-focus-mode .map-layer-controls { grid-area:settings; position:static; width:100%; max-width:none; margin:0; justify-self:stretch; align-self:auto; background:var(--rme-panel); border:1px solid var(--rme-line); border-radius:12px; z-index:1000; }
.map-layer-controls-summary { padding:.85rem 1rem; font-weight:650; font-size:.95rem; cursor:pointer; }
.map-layer-controls-body { padding:1rem; max-height:60vh; overflow:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; border-top:1px solid var(--rme-line); }
.map-layer-controls-body>p { margin:0; }
.map-layer-filters-grid { gap:.6rem; }
.map-layer-filter-option { display:flex; align-items:center; gap:.65rem; min-height:38px; color:var(--rme-text); font-size:.9rem; }
input[type="checkbox"] { width:1.15rem; height:1.15rem; accent-color:var(--rme-accent); flex-shrink:0; }
input[type="range"] { accent-color:var(--rme-accent); min-height:36px; width:100%; }
.filter-field { gap:.4rem; min-width:0; }
.filter-field input,.filter-field select,.viewer-source-select { width:100%; min-height:46px; border:1px solid #4b607a; background:#0f1d30; color:var(--rme-text); border-radius:8px; padding:.6rem .75rem; font-size:1rem; }
.filter-field input::placeholder { color:#93a9c1; }
#map-section { grid-area:map; min-width:0; padding:0; border:1px solid var(--rme-line); border-radius:14px; overflow:hidden; background:var(--rme-panel); }
.map-canvas-shell { position:relative; height:620px; min-height:440px; border-radius:0; }
#map { height:100%; min-height:0; }
.viewer-panel { grid-area:viewer; min-width:0; padding:1.2rem; background:var(--rme-panel); border:1px solid var(--rme-line); border-radius:14px; }
.viewer-heading-label,.workspace-eyebrow { font-size:.8rem; color:var(--rme-accent); letter-spacing:.05em; font-weight:650; margin:0 0 .5rem; }
.viewer-panel h2 { font-size:1.3rem; }
.viewer-panel .media-shell { min-height:240px; }
.viewer-controls-bar,.viewer-controls-card { background:transparent; }
.viewer-controls-row { gap:.55rem; }
.map-live-status,.map-player-status { position:static!important; margin:0; max-width:100%; padding:.55rem .8rem; background:#152c40; color:var(--rme-text); font-size:.875rem; }
body.map-focus-mode .layout { padding:.8rem; }
body.map-focus-mode .main-stage { grid-template-columns:minmax(0,1fr); grid-template-areas:"tools" "settings" "map"; grid-template-rows:auto auto minmax(440px,1fr); height:auto; min-height:calc(100svh - 105px); gap:.65rem; }
body.map-focus-mode .map-canvas-shell { height:calc(100svh - 245px); min-height:440px; }
body.map-focus-mode .viewer-panel { display:none; }
/* Navigation cards occupy named grid areas. The center stays open to map gestures. */
.navigation-overlays { position:absolute!important; inset:12px 12px 35px!important; width:auto!important; height:auto!important; display:grid; grid-template-columns:minmax(85px,130px) minmax(95px,145px) minmax(140px,220px); grid-template-rows:auto auto 1fr auto; grid-template-areas:"guidance guidance guidance" "incident incident incident" ". . ." "speed limit eta"; gap:8px; align-content:stretch; align-items:start; pointer-events:none; z-index:500; }
.navigation-overlay-card { position:static!important; inset:auto!important; transform:none!important; width:100%!important; max-width:none!important; min-width:0; max-height:none; margin:0!important; padding:.8rem!important; border-radius:11px; border:1px solid #71869a; background:rgba(16,29,47,var(--overlay-card-opacity,.9)); opacity:1!important; cursor:default!important; touch-action:auto!important; pointer-events:auto; box-shadow:0 3px 14px #07101933; }
.navigation-guidance-overlay { grid-area:guidance; border-left:4px solid var(--rme-accent); }
.navigation-incident-overlay { grid-area:incident; max-height:190px; overflow:auto; }
.navigation-speed-overlay { grid-area:speed; align-self:end; }
.navigation-speed-limit-overlay { grid-area:limit; align-self:end; }
.navigation-eta-overlay { grid-area:eta; align-self:end; }
.navigation-overlay-drag-handle { display:none!important; }
.navigation-overlay-card-header:empty,.navigation-guidance-overlay .navigation-overlay-card-header,.navigation-eta-overlay .navigation-overlay-card-header { display:none; }
.navigation-overlay-primary { font-size:1.05rem; line-height:1.35; margin:0; }
.navigation-overlay-metric { font-size:1.5rem; }
.navigation-overlay-secondary { font-size:.9rem; margin:.3rem 0 0; }
.navigation-overlay-caption,.navigation-overlay-tertiary,.navigation-overlay-eyebrow { font-size:.8rem; line-height:1.3; }
.navigation-overlay-actions { flex-wrap:wrap; }
.camera-approach-card { position:absolute; top:12px; right:12px; z-index:600; max-width:300px; background:#163947; border:1px solid #65b5c0; border-radius:11px; padding:.85rem; box-shadow:0 3px 14px #0003; }
.camera-approach-card p { margin:.35rem 0; font-size:.9rem; }
.camera-approach-card.is-near { border-color:var(--rme-accent); }
.map-floating-players { position:absolute!important; inset:160px 12px 175px auto!important; width:min(300px,38%)!important; height:auto!important; display:flex; flex-direction:column; gap:.6rem; overflow:auto; pointer-events:none; }
.map-floating-preview { position:absolute!important; transform:none!important; width:100%!important; max-width:none!important; flex-shrink:0; pointer-events:auto; }
.map-preview-drag-handle { display:none!important; }
.map-preview-title { font-size:.875rem!important; }
.workspace-panel { background:var(--rme-panel); border:1px solid var(--rme-line); border-radius:16px; padding:clamp(1rem,2.2vw,2rem); margin:0; min-width:0; }
.route-results-area { max-width:1500px; margin:0 auto; padding:0; }
.workspace-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.workspace-header p { margin:.6rem 0 0; }
.planner-header-actions,.weather-home-actions { display:flex; flex-wrap:wrap; gap:8px; }
.planner-header-actions .navigation-exit-button { background:#a82d3b; color:#fff; border:2px solid #a82d3b; min-height:44px; }
.planner-places { margin:0; padding:0; border:0; min-width:0; display:grid; gap:10px; }
.planner-places legend { font-weight:700; margin-bottom:12px; }
.planner-places input { min-width:0; width:100%; }
.planner-places .camera-place-choices:empty,.planner-places [role="status"]:empty { display:none; }
.weather-home-actions { justify-content:flex-start; }
.workspace-header .workspace-eyebrow { margin:0 0 .6rem; }
.route-card,.instructions-card,.route-report-card,.route-weather-detail,.camera-views-tools,.viewer-media-card,.viewer-controls-card { border-radius:12px; border-color:var(--rme-line); }
.route-form { gap:1rem; }
.route-address-group { padding:1rem; border:1px solid var(--rme-line); border-radius:12px; background:#102037; }
.route-address-group-title { font-size:1rem; }
.route-trip-inputs { gap:1rem; }
.route-summary { gap:1rem; background:#0f1d30; border-radius:12px; padding:1.2rem; border:1px solid var(--rme-line); }
.route-summary strong { font-size:1.4rem; }
.route-secondary-actions,.route-actions,.camera-alert-settings { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; }
.camera-alert-settings { padding:1rem; margin-bottom:1rem; background:#102037; border:1px solid var(--rme-line); border-radius:12px; }
.camera-alert-settings p { flex:1 1 260px; }
.camera-source-tabs { display:flex; flex-wrap:wrap; gap:.5rem; border-bottom:1px solid var(--rme-line); padding-bottom:.8rem; }
.camera-source-tab { padding:.7rem 1rem; min-height:44px; border-radius:8px; border:1px solid var(--rme-line); background:#102037; color:var(--rme-text); font-size:.9rem; }
.camera-source-tab.active { color:var(--rme-accent); border-color:var(--rme-accent); }
.route-camera-button,.camera-item { border-radius:10px; border:1px solid var(--rme-line); background:#112139; color:var(--rme-text); padding:1rem; font-size:.95rem; }
.route-camera-button span { font-size:.875rem; }
.route-camera-button.active { border-color:var(--rme-accent); background:#24364c; }
#debug-summary { display:none; }
.app-notice { border:1px solid #456984; border-radius:10px; padding:.8rem 1rem; background:#142d43; font-size:.95rem; }
.planner-layout { display:grid; grid-template-columns:minmax(230px,300px) minmax(0,1fr); gap:1.5rem; }
.planner-controls { display:flex; flex-direction:column; gap:1rem; padding:1.2rem; border-radius:12px; background:#0f1d30; align-self:start; border:1px solid var(--rme-line); }
.planner-controls p { margin:0; }
.planner-hours { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
.planner-method { font-size:.9rem; border-top:1px solid var(--rme-line); padding-top:1rem; }
.planner-method summary { cursor:pointer; font-weight:600; }
.planner-method p { margin-top:.8rem; }
.planner-results { min-width:0; }
.planner-results>.app-notice { margin:0 0 1rem; }
.planner-map { height:clamp(340px,44vw,520px); background:#253a4c; border-radius:13px; border:1px solid var(--rme-line); z-index:0; }
.planner-legend { display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-size:.875rem; padding:.8rem 0; color:var(--rme-muted); }
.planner-weather-icon { color:#162b3b; color-scheme:light; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; background:white; border:2px solid #253a4c; border-radius:50%; display:grid; place-items:center; font-size:1.2rem; box-shadow:0 2px 8px #0003; }
.planner-timeline { background:#102037; padding:1.15rem; border:1px solid var(--rme-line); border-radius:12px; margin:.5rem 0 1rem; }
.planner-timeline label { display:block; }
.planner-selected-time { display:block; }
.planner-slider-actions { display:flex; align-items:center; gap:.7rem; justify-content:space-between; font-size:.9rem; }
.planner-recommendations { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin:1rem 0; }
.planner-recommendation { display:flex; flex-direction:column; text-align:left; gap:.55rem; padding:1rem; border:1px solid var(--rme-line); border-radius:12px; background:#102037; color:var(--rme-text); cursor:pointer; font-size:.95rem; }
.planner-recommendation.best { border-top:3px solid var(--rme-accent); }
.planner-recommendation[aria-pressed="true"] { outline:2px solid var(--rme-blue); outline-offset:2px; }
.planner-recommendation small { font-size:.8rem; color:var(--rme-muted); }
.planner-checkpoints { display:grid; gap:.7rem; padding-top:.8rem; }
.planner-checkpoint { background:#102037; padding:.9rem; border-radius:9px; border:1px solid var(--rme-line); }
.planner-checkpoint p { margin:.25rem 0; }
.help-topics { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.5rem; }
.help-topics a { padding:.55rem .8rem; border:1px solid var(--rme-line); border-radius:8px; text-decoration:none; background:#102037; }
.help-section { max-width:1000px; padding:1.5rem 0; border-top:1px solid var(--rme-line); scroll-margin-top:8rem; }
.help-section h3 { font-size:1.25rem; color:#d8ebff; }
.help-section p,.help-section li { font-size:1rem; color:#d4e0ed; }
.help-section li { margin-bottom:.65rem; padding-left:.25rem; }
.help-faq { border:1px solid var(--rme-line); border-radius:10px; margin:.6rem 0; background:#102037; padding:0 1rem; }
.help-faq summary { cursor:pointer; padding:1rem 0; font-size:1rem; font-weight:600; }
.help-faq p { padding-bottom:1rem; margin:0; }
.standalone-help main { max-width:1100px; margin:1.5rem auto; }
.mobile-map-controls { display:none; }
@media (max-width:1100px) {
 .topbar { flex-wrap:wrap; gap:.6rem; }
 .app-toolbar { justify-content:flex-start; }
 .app-brand { font-size:.95rem; }
 .app-brand small { display:none; }
 .camera-approach-card { top:145px; max-width:260px; }
 .planner-recommendations { grid-template-columns:1fr; }
}
@media (max-width:760px) {
 .topbar { padding:.55rem .65rem; gap:.45rem; position:sticky; }
 .app-brand { flex-basis:100%; }
 .brand-mark { padding:.4rem; }
 .app-toolbar { width:100%; flex-basis:100%; gap:.15rem; }
 .app-toolbar-button { min-height:42px; padding:.55rem .75rem; font-size:.875rem; }
 .layout,body.map-focus-mode .layout { padding:.6rem; }
 .main-stage { grid-template-columns:minmax(0,1fr); grid-template-areas:"tools" "settings" "map" "viewer"; }
 .desktop-map-controls { display:block; }
 .map-toolbar-controls { gap:.45rem; }
 .map-toolbar-controls .action-button { flex:1 1 auto; }
 .mobile-map-controls { display:none; }
 .main-stage .map-canvas-shell,body.map-focus-mode .map-canvas-shell { min-height:500px; height:calc(100svh - 290px); }
 body.map-focus-mode .main-stage { grid-template-rows:auto auto minmax(500px,1fr); min-height:0; }
 .map-layer-controls-body { grid-template-columns:1fr; }
 .workspace-panel { padding:1rem; border-radius:12px; }
 .workspace-header { margin-bottom:1rem; }
 .planner-layout { grid-template-columns:minmax(0,1fr); }
 .planner-controls { display:grid; grid-template-columns:1fr 1fr; padding:1rem; }
 .planner-controls>.planner-hours,.planner-controls>p,.planner-controls>button,.planner-controls>details { grid-column:1/-1; }
 .planner-map { height:350px; }
 .planner-slider-actions { flex-wrap:wrap; }
 .planner-slider-actions span { order:3; flex-basis:100%; }
 .navigation-overlays { inset:10px 8px 30px!important; grid-template-columns:minmax(70px,1fr) minmax(80px,1fr) minmax(100px,1.5fr); gap:6px; }
 .navigation-overlay-card { padding:.6rem!important; }
 .navigation-overlay-metric { font-size:1.2rem; }
 .navigation-overlay-primary { font-size:1rem; }
 .navigation-overlay-caption,.navigation-overlay-tertiary { font-size:.8rem; }
 .navigation-incident-overlay { max-height:125px; }
 .camera-approach-card { top:160px; right:8px; max-width:230px; }
 .map-floating-players { inset:270px 8px 130px auto!important; width:min(245px,65%)!important; }
 .route-summary { grid-template-columns:1fr 1fr; }
 .help-section { padding:1.2rem 0; }
 .standalone-help main { margin:.6rem; }
}
@media (max-height:550px) and (orientation:landscape) {
 body.map-landscape-fullscreen .topbar { display:flex!important; position:sticky; }
 body.map-landscape-fullscreen .layout { padding:.5rem!important; }
 body.map-landscape-fullscreen .main-stage { position:static!important; inset:auto!important; height:auto!important; }
 body.map-landscape-fullscreen .map-canvas-shell { min-height:360px; height:75vh; }
 .navigation-guidance-overlay { max-width:440px!important; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@media print { .topbar,.help-topics { display:none; } .standalone-help { background:#fff; color:#000; } .help-section p,.help-section li,.help-section h3 { color:#000; } .help-faq { break-inside:avoid; background:#fff; } }
/* Override legacy explicit grid coordinates in every workspace size. */
#player-section { grid-area:viewer; }
body.map-focus-mode #map-section { grid-area:map; height:auto; padding:0; }
body.map-focus-mode .desktop-map-controls { grid-area:tools; padding:0; }
body.map-focus-mode .map-layer-controls { grid-area:settings; }
.main-stage .map-canvas-shell { flex:1 0 auto; }
.navigation-overlays { grid-template-rows:auto auto auto 1fr auto; grid-template-areas:"guidance guidance guidance" "incident incident incident" "camera camera camera" ". . ." "speed limit eta"; }
.navigation-overlays .camera-approach-card { position:static; grid-area:camera; min-width:0; max-width:100%; max-height:150px; overflow:auto; pointer-events:auto; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.6rem; }
.navigation-overlays .camera-approach-card>div { min-width:0; }
.navigation-overlays .camera-approach-card .action-button { width:auto; max-width:110px; padding:.5rem; }
.camera-approach-card strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.camera-approach-card p { overflow-wrap:break-word; }
.map-layer-controls-summary::after { content:' +'; float:right; color:var(--rme-accent); }
.map-layer-controls[open]>.map-layer-controls-summary::after { content:' −'; }
@media (max-width:760px) { #player-section { grid-area:viewer; } .navigation-overlays .camera-approach-card { padding:.6rem; } .navigation-overlays .camera-approach-card strong { font-size:.9rem; } .navigation-overlays .camera-approach-card p { font-size:.8rem; } }
/* Expanded previews fill the map dock and preserve a reachable close control. */
.map-floating-players:has(.map-floating-preview-expanded) { inset:12px!important; width:auto!important; z-index:900; }
.map-floating-players:has(.map-floating-preview-expanded) .map-floating-preview:not(.map-floating-preview-expanded) { display:none!important; }
.map-floating-players .map-floating-preview.map-floating-preview-expanded { position:absolute!important; inset:0!important; width:100%!important; height:100%; max-height:none; }
/* Map workspace: the header is the only reserved vertical space. */
.topbar { position:sticky; top:0; min-height:60px; padding:.5rem .8rem; gap:.75rem; }
.app-toolbar { flex-wrap:nowrap; }
.app-toolbar-button.secondary { border-radius:6px; border-bottom:3px solid transparent; }
.app-toolbar-button.secondary.active { background:#20364c; border-color:transparent transparent var(--rme-accent); color:#fff; }
body.map-focus-mode { overflow:hidden; }
body.map-focus-mode .layout { padding:0; max-width:none; }
body.map-focus-mode .main-stage { position:relative; display:block; height:calc(100dvh - var(--app-header-height,110px)); min-height:0; }
body.map-focus-mode #map-section { height:100%; border:0; border-radius:0; }
body.map-focus-mode .main-stage .map-canvas-shell { height:100%; min-height:0; flex:1 1 auto; }
body.map-focus-mode .desktop-map-controls { display:none; }
body.map-focus-mode .map-layer-controls { position:absolute; right:10px; top:10px; width:auto; max-width:calc(100% - 65px); margin:0; z-index:1000; border-radius:10px; background:rgba(16,29,47,.88); }
body.map-focus-mode .map-layer-controls[open] { width:360px; }
body.map-focus-mode .map-layer-controls-body { display:flex; flex-direction:column; gap:.8rem; max-height:calc(100dvh - var(--app-header-height,110px) - 90px); }
.map-controls-shortcuts { display:flex; flex-wrap:wrap; gap:.4rem; padding-bottom:.7rem; border-bottom:1px solid var(--rme-line); }
.map-controls-shortcuts button { flex:1 1 130px; }
.map-controls-close { width:100%; }
.navigation-overlays { inset:64px 10px 32px!important; max-width:490px; }
.navigation-overlay-card,.navigation-overlays .camera-approach-card { background:rgba(16,29,47,var(--map-card-alpha,.65))!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:0 2px 6px #0002; text-shadow:0 1px 2px #000; }
.navigation-overlay-card { gap:.2rem; }
.navigation-overlays .navigation-guidance-overlay { max-height:120px; overflow:auto; }
.navigation-overlays .navigation-incident-overlay { max-height:135px; overflow:auto; }
.navigation-speed-limit-overlay .navigation-overlay-caption { font-size:.7rem; max-height:2.6em; overflow:hidden; }
.map-floating-players { inset:70px 10px 155px auto!important; width:min(280px,35%)!important; }
body.map-focus-mode:has(.map-layer-controls[open]) .navigation-overlays,body.map-focus-mode:has(.map-layer-controls[open]) .map-floating-players { visibility:hidden; }
body.map-focus-mode #app-connection-status { position:fixed; bottom:0; left:0; right:0; z-index:1100; margin:0; padding:.25rem .6rem; font-size:.75rem; }
body.map-focus-mode .map-live-status,body.map-focus-mode .map-player-status { position:absolute!important; bottom:0; left:0; z-index:700; max-width:100%; font-size:.75rem; }
.weather-speech-controls { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin:1rem 0; }
.weather-speech-controls [role=status] { flex:1 1 240px; font-size:.9rem; }
@media (max-width:760px) {
 .topbar { gap:.2rem; padding:.3rem .5rem; }
 .app-brand { font-size:.8rem; }
 .brand-mark { padding:.2rem .35rem; }
 .app-toolbar-button { padding:.45rem .6rem; font-size:.8rem; }
 .navigation-overlays { max-width:calc(100% - 20px); }
 .map-floating-players { inset:auto 10px 155px auto!important; max-height:32%; width:45%!important; }
}
@media (max-height:500px) and (orientation:landscape) {
 .app-brand { display:none; }
 .navigation-overlays { max-width:55%; inset:58px 10px 24px!important; }
 .navigation-guidance-overlay { padding:.4rem!important; }
 .navigation-overlay-secondary { font-size:.75rem; }
}

.map-recenter-dock { position:absolute; bottom:calc(28px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%); z-index:1050; min-width:150px; background:var(--rme-accent)!important; color:#182230!important; box-shadow:0 3px 15px #0006; border:2px solid #fff; }
.map-canvas-shell:has(.map-recenter-dock:not(.hidden)) .navigation-overlays { bottom:90px!important; }

.road-monitor-panel { margin:1rem 0; padding:1rem; border:1px solid var(--rme-line); border-radius:12px; background:var(--rme-panel); }
.road-monitor-panel summary { font-weight:650; cursor:pointer; min-height:32px; }
#road-monitor-list { display:grid; gap:.6rem; margin-top:.7rem; }

/* Camera explorer: map first, a single collapsible results panel. */
body[data-workspace="cameras"] { overflow:hidden; }
body[data-workspace="cameras"] .layout { padding:0; max-width:none; }
/* Camera contents are absolute overlays and supply no intrinsic width. The
   shared column's auto side margins otherwise collapse this flex item. */
body[data-workspace="cameras"] .route-results-area { width:100%; min-width:0; max-width:none; margin:0; }
#camera-views-workspace { position:relative; padding:0; border:0; border-radius:0; height:calc(100dvh - var(--app-header-height,110px)); min-height:0; overflow:hidden; }
#camera-views-workspace .camera-views-map-panel { position:absolute; inset:0; margin:0; border:0; padding:0; border-radius:0; }
#camera-views-map { width:100%; height:100%; min-height:0; border-radius:0; }
.camera-explorer-bar { position:absolute; top:12px; left:12px; right:12px; z-index:1000; display:flex; align-items:end; gap:10px; pointer-events:none; }
.camera-explorer-bar>* { pointer-events:auto; }
.camera-search-field { width:min(500px,70%); background:#112238f5; border:1px solid #5d7289; box-shadow:0 4px 18px #0003; padding:8px; border-radius:12px; }
.camera-search-field label { display:block; color:#c9d9e8; font-size:.75rem; margin:0 0 5px 4px; }
.camera-search-inputs { display:flex; gap:8px; }
.camera-search-inputs input { min-width:0; width:100%; border:0; background:#09192b; padding:10px; border-radius:6px; color:white; font-size:16px; }
.camera-explorer-bar button { white-space:nowrap; }
.camera-search-map { position:absolute; z-index:800; right:12px; bottom:45px; border-radius:24px; background:#142c40; box-shadow:0 2px 12px #0005; }
.camera-browser-drawer { position:absolute; top:106px; bottom:12px; left:12px; width:360px; max-width:calc(100% - 24px); z-index:800; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; background:#112238f5; border:1px solid #536d85; border-radius:14px; padding:16px; box-shadow:0 8px 30px #0004; }
.camera-drawer-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.camera-drawer-heading h2 { font-size:1.4rem; margin:0; }
.camera-drawer-heading .workspace-eyebrow { font-size:.7rem; }
.camera-drawer-heading button { font-size:1.3rem; min-width:44px; }
.camera-search-options { display:flex; align-items:end; gap:8px; margin:12px 0; }
.camera-search-options label { flex:1; }
.camera-filter-details { border:1px solid #425b73; border-radius:8px; margin:10px 0; }
.camera-filter-details summary { padding:12px; font-weight:600; cursor:pointer; }
.camera-filter-details summary span { display:block; font-size:.72rem; font-weight:400; color:#b3c6da; margin-top:4px; }
.camera-filter-details .filters { display:grid; grid-template-columns:1fr 1fr; padding:0 12px 12px; gap:12px; background:none; margin:0; border:0; }
.camera-filter-details .camera-alert-settings { margin:0; border:0; padding:12px; }
#camera-views-workspace .camera-list { display:flex; flex-direction:column; max-height:none; overflow:visible; gap:8px; padding:0; }
.camera-result-row { display:flex; align-items:center; border:1px solid #405972; border-radius:10px; overflow:hidden; background:#192f48; }
.camera-result-row:has(.active) { border-color:var(--rme-accent); }
.camera-result-row .camera-button { flex:1; min-width:0; border:0; border-radius:0; background:none; padding:12px; margin:0; min-height:90px; }
.camera-result-row .camera-button strong { color:#f3f7ff; font-size:.9rem; }
.camera-result-row .camera-button span { color:#bbccdc; font-size:.75rem; }
.camera-result-row .camera-save-button { padding:8px; min-width:55px; margin-right:8px; font-size:.75rem; }
.camera-distance { color:#a5e1da!important; }
.camera-place-choices { display:grid; gap:6px; }
.camera-place-choices .camera-button { padding:12px; }
.camera-legacy-sets { display:none!important; }
#camera-views-map .leaflet-top { top:auto; bottom:100px; left:auto; right:12px; }
body[data-workspace="cameras"] #app-connection-status { position:fixed; bottom:0; z-index:1200; margin:0; padding:6px; font-size:.8rem; }
/* Floating windows occupy map coordinates; rerenders keep the same video element. */
.map-floating-players,.map-floating-players:has(.map-floating-preview-expanded) { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; max-height:none!important; display:block; overflow:hidden; pointer-events:none; z-index:900; }
.map-floating-players .map-floating-preview { position:absolute!important; transform:none!important; width:310px!important; max-width:calc(100% - 24px)!important; height:auto; max-height:calc(100% - 24px); overflow:auto; border:1px solid #7990a8; border-radius:12px; background:#102238f2; box-shadow:0 6px 26px #0006; pointer-events:auto; margin:0; }
.map-floating-preview-topbar { display:flex; align-items:center; justify-content:space-between; gap:4px; background:#20384f; padding:3px 6px; }
.map-floating-preview-topbar button { background:transparent; color:white; border:0; padding:6px 8px; min-height:40px; cursor:pointer; border-radius:5px; font:inherit; font-size:.8rem; }
.map-floating-preview-topbar button:hover { background:#3c5570; }
.map-floating-players .map-preview-drag-handle { display:block!important; cursor:grab; touch-action:none; }
.map-floating-preview-actions { display:flex; gap:0; }
.map-floating-players .map-preview-title { margin:0; padding:8px 12px; color:white; font-size:.86rem!important; font-weight:600; }
.map-floating-players .map-floating-preview-media { aspect-ratio:16/9; min-height:0; width:100%; background:#050c15; }
.map-floating-players .map-preview-video,.map-floating-players .map-preview-image { width:100%; height:100%; object-fit:contain; }
.map-floating-players .map-preview-caption { padding:8px 12px; }
.map-floating-players .map-preview-caption p { color:#bfcedd; margin:2px 0 6px; font-size:.7rem; }
.map-preview-footer { display:flex; gap:8px; }
.map-preview-footer button { flex:1; font-size:.8rem; min-height:40px; padding:7px; }
.map-floating-players .is-minimized { width:250px!important; }
.map-floating-players .is-minimized .map-floating-preview-media,.map-floating-players .is-minimized .map-preview-caption { display:none!important; }
.map-floating-players:has(.map-floating-preview-expanded) { z-index:1100; }
.map-floating-players .map-floating-preview.map-floating-preview-expanded { inset:12px!important; width:calc(100% - 24px)!important; height:calc(100% - 24px); max-height:none; display:flex; flex-direction:column; }
.map-floating-preview-expanded .map-floating-preview-media { flex:1; min-height:0; aspect-ratio:auto; }
@media (max-width:760px) {
 .camera-explorer-bar { top:8px; left:8px; right:8px; flex-wrap:wrap; gap:6px; }
 .camera-search-field { width:100%; padding:6px; }
 .camera-explorer-bar #camera-drawer-toggle { font-size:.8rem; padding:8px 12px; min-height:38px; }
 .camera-browser-drawer { top:auto; bottom:8px; left:8px; width:calc(100% - 16px); max-width:none; height:42%; padding:12px; }
 .camera-search-map { bottom:calc(44% + 12px); right:8px; min-height:38px; font-size:.8rem; }
 #camera-views-workspace:has(.camera-browser-drawer.hidden) .camera-search-map { bottom:35px; }
 #camera-views-map .leaflet-top { bottom:100px; }
 .map-floating-players .map-floating-preview { width:260px!important; }
 .map-floating-players .map-floating-preview.map-floating-preview-expanded { width:calc(100% - 24px)!important; }
 .map-floating-preview:not(.map-floating-preview-expanded) .map-preview-source { display:none; }
}

.map-floating-players .map-floating-preview { display:block; touch-action:auto; }
.map-floating-players .map-floating-preview-topbar { position:static; flex-shrink:0; }
.map-floating-players .map-preview-title { white-space:normal; line-height:1.3; flex-shrink:0; }
.map-floating-players .map-preview-caption { flex-shrink:0; }
.camera-result-row .camera-ahead { color:#a5e1da; }

/* A compact app header and explanatory home cards replace the tab strip. */
.app-shell-header { min-height:66px; padding:10px 20px; flex-wrap:nowrap; gap:18px; }
.app-home-button { padding:0; border:0; background:none; color:var(--rme-text); cursor:pointer; text-align:left; }
.app-home-button .brand-mark { background:#86ddc2; color:#122c30; border-radius:10px; }
.app-section-title { color:#bacfda; font-size:.9rem; border-left:1px solid #3c5666; padding-left:18px; }
.app-shell-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
#app-explore-menu { position:relative; }
#app-explore-menu>summary { list-style:none; cursor:pointer; border:1px solid #526777; border-radius:10px; padding:10px 14px; min-height:44px; display:flex; align-items:center; gap:20px; font-size:.9rem; }
#app-explore-menu>summary::-webkit-details-marker { display:none; }
#app-explore-menu[open]>summary { border-color:#86ddc2; }
#app-explore-menu .app-toolbar { position:absolute; right:0; top:calc(100% + 10px); width:270px; max-width:calc(100vw - 24px); display:grid; grid-template-columns:1fr; padding:8px; background:#14283a; border:1px solid #526777; border-radius:14px; box-shadow:0 10px 35px #0006; max-height:calc(100dvh - 100px); overflow:auto; }
#app-explore-menu:not([open]) .app-toolbar { display:none; }
#app-explore-menu .app-toolbar-button { width:100%; border:0; border-radius:8px; text-align:left; justify-content:flex-start; padding:12px; }
#app-explore-menu .app-toolbar-button.active { background:#2b4655; color:#a9f0d5; }
#app-explore-menu .app-toolbar-button:hover { background:#2b4655; }
body[data-workspace="dashboard"] { background:#edf3f1; color:#152e37; }
body[data-workspace="dashboard"] .layout { padding:26px; max-width:1280px; }
.dashboard-hero { display:grid; grid-template-columns:1.05fr 1fr; gap:28px; background:#102d37; border-radius:24px; padding:32px; color:#f3faf7; overflow:hidden; }
.dashboard-eyebrow { font-size:.68rem; letter-spacing:.12em; font-weight:700; margin:0 0 14px; }
.dashboard-intro .dashboard-eyebrow { color:#a0dbca; }
.dashboard-intro h1 { font-size:clamp(2rem,3.8vw,3.2rem); letter-spacing:-.045em; line-height:1.08; margin:0 0 18px; font-weight:750; }
.dashboard-intro>p:not(.dashboard-eyebrow) { color:#c2d6dd; max-width:420px; font-size:1rem; }
.dashboard-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.dashboard-hero .action-button,.dashboard-trip .action-button { background:#8be1c4; color:#0e302f; border-color:#8be1c4; border-radius:10px; }
.dashboard-hero .action-button.secondary { background:transparent; color:#d9f5eb; border-color:#668b93; }
.dashboard-intro .entry-location-status { font-size:.75rem!important; margin-top:14px; min-height:2.6em; }
.dashboard-map-card { min-width:0; position:relative; min-height:280px; border-radius:16px; overflow:hidden; background:#345c63; }
#dashboard-map { height:100%; min-height:280px; width:100%; position:absolute; inset:0; }
.dashboard-map-caption { position:absolute; z-index:600; bottom:28px; left:12px; right:12px; display:flex; align-items:center; justify-content:space-between; gap:8px; background:#112c38e8; border:1px solid #90b5bd; border-radius:12px; padding:10px; box-shadow:0 3px 15px #0003; }
.dashboard-map-caption>span { font-size:.8rem; padding-left:4px; }
.dashboard-map-caption button { font-size:.8rem; padding:9px; }
.dashboard-section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:34px 0 18px; }
.dashboard-section-heading .dashboard-eyebrow { color:#4e706e; margin:0 0 7px; }
.dashboard-section-heading h2 { font-size:1.5rem; }
.dashboard-help-link { background:none; border:0; color:#236c65; cursor:pointer; font-size:.85rem; padding:10px 0; }
.dashboard-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.dashboard-feature { min-width:0; text-align:left; background:#fff; color:#18343a; border:1px solid #d4e1dc; border-radius:18px; padding:22px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; cursor:pointer; transition:transform .16s,box-shadow .16s,border-color .16s; }
.dashboard-feature:hover { border-color:#80b8a7; box-shadow:0 8px 22px #15382b12; transform:translateY(-3px); }
.dashboard-feature:focus-visible { outline:3px solid #208277; outline-offset:3px; }
.feature-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:13px; background:#e0f3ec; color:#1c8069; margin-bottom:2px; }
.feature-icon svg { width:25px; height:25px; }
.feature-camera .feature-icon,.feature-viewer .feature-icon { background:#e5effe; color:#3c6daa; }
.feature-weather .feature-icon,.feature-local .feature-icon { background:#fff1d9; color:#99681c; }
.dashboard-feature>strong { font-size:1.14rem; letter-spacing:-.02em; }
.feature-description { font-size:.875rem; line-height:1.55; color:#52706f; flex:1; }
.feature-action { display:flex; justify-content:space-between; align-self:stretch; color:#286c62; font-weight:650; font-size:.8rem; margin-top:6px; padding-top:14px; border-top:1px solid #e3ece8; }
.dashboard-trip { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:22px; padding:20px; background:#fff; border:1px solid #9bcbbd; border-radius:16px; }
.dashboard-trip>div:first-child { display:flex; flex-direction:column; gap:6px; min-width:0; }
.dashboard-trip .dashboard-eyebrow { color:#46766a; margin:0; }
#dashboard-trip-label { font-size:1rem; overflow-wrap:anywhere; }
#dashboard-trip-detail { font-size:.8rem; color:#547470; }
.dashboard-trip-actions { display:flex; flex-wrap:wrap; gap:8px; flex-shrink:0; }
.dashboard-trip .action-button.secondary { background:#f4f8f5; color:#236a60; border-color:#aacfc4; }
.dashboard-footer { display:flex; gap:20px; align-items:center; flex-wrap:wrap; padding:24px 0 6px; color:#58726d; font-size:.75rem; }
.dashboard-footer p { flex:1; margin:0; }
.dashboard-footer a,.dashboard-footer button { color:#367363; border:0; background:none; font:inherit; cursor:pointer; }
.local-weather-places { display:grid; gap:8px; margin:12px 0; }
.local-weather-places button { text-align:left; padding:14px; border:1px solid #5c7790; border-radius:10px; background:#173047; color:#eaf4ff; cursor:pointer; }
.local-weather-places button:hover { background:#29495f; }
#print-directions-sheet { display:none; }
@media (max-width:760px) {
 .app-shell-header { padding:8px 12px; gap:8px; min-height:62px; }
 .app-shell-header .app-brand { flex-basis:auto; font-size:.85rem; }
 .app-shell-header .app-brand small { display:none; }
 .app-shell-header .brand-mark { padding:9px 6px; }
 .app-section-title { display:none; }
 .app-shell-header .home-shortcut { font-size:.8rem; padding:8px; min-height:42px; }
 #app-explore-menu>summary { font-size:.8rem; padding:8px 10px; gap:12px; }
 body[data-workspace="dashboard"] .layout { padding:14px; }
 .dashboard-hero { grid-template-columns:1fr; gap:18px; padding:22px; border-radius:18px; }
 .dashboard-intro h1 { font-size:2.2rem; }
 .dashboard-intro>p:not(.dashboard-eyebrow) { font-size:.9rem; }
 .dashboard-map-card,#dashboard-map { min-height:210px; }
 .dashboard-hero-actions { margin-top:16px; }
 .dashboard-hero-actions button { font-size:.8rem; padding:10px; }
 .dashboard-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .dashboard-feature { padding:16px; gap:10px; border-radius:14px; }
 .dashboard-feature>strong { font-size:1rem; }
 .feature-description { font-size:.8rem; }
 .feature-action { font-size:.73rem; }
 .dashboard-section-heading { align-items:flex-start; flex-direction:column; gap:4px; margin-top:24px; }
 .dashboard-section-heading h2 { font-size:1.3rem; }
 .dashboard-help-link { padding:4px 0; }
 .dashboard-trip { flex-direction:column; align-items:stretch; padding:16px; }
 .dashboard-trip-actions { flex-shrink:1; }
 .dashboard-trip-actions button { flex:1; }
 .dashboard-footer { gap:14px; }
 .dashboard-footer p { flex-basis:100%; }
}
@media (max-width:340px) { .dashboard-cards { grid-template-columns:1fr; } .app-shell-header .home-shortcut { display:none; } }
@media print {
 body.printing-directions { background:white!important; color:#111!important; overflow:visible!important; }
 body.printing-directions>* { display:none!important; }
 body.printing-directions #print-directions-sheet { display:block!important; padding:0; font:11pt/1.5 Arial,sans-serif; }
 #print-directions-sheet h1 { font-size:22pt; margin:0 0 14pt; }
 #print-directions-sheet h2 { color:#111; font-size:15pt; margin:20pt 0 10pt; }
 #print-directions-sheet .summary { padding:12pt; border:1px solid #bbb; margin:12pt 0; border-radius:8pt; }
 #print-directions-sheet .summary-row { margin:4pt 0; }
 #print-directions-sheet ol { padding-left:20pt; }
 #print-directions-sheet li { break-inside:avoid; padding-left:5pt; margin-bottom:12pt; }
 #print-directions-sheet .meta { color:#333; font-size:10pt; }
 @page { margin:16mm; }
}
.search-attribution { font-size:.68rem; color:#a7bdc9; margin:8px 0; line-height:1.45; }
.search-attribution a { color:#b5dbeb; }

/* Camera chrome shares the overlay slider; media and readable text stay solid. */
.map-floating-players .map-floating-preview { background:rgba(16,29,47,var(--map-card-alpha,.65)); backdrop-filter:none; -webkit-backdrop-filter:none; }
.map-floating-players .map-floating-preview-topbar,.map-floating-players .map-preview-title,.map-floating-players .map-preview-caption { background:transparent; text-shadow:0 1px 2px #000; }
.map-floating-players .map-floating-preview-topbar { position:sticky; top:0; left:auto; right:auto; z-index:3; flex-wrap:wrap; }
.map-floating-preview-topbar button:focus-visible { outline:2px solid #9ce4d0; outline-offset:-2px; }
/* Map controls are outside the canvas stacking context: remove the obstruction at its source. */
body.camera-window-expanded .map-layer-controls { visibility:hidden!important; pointer-events:none; }
body.camera-window-expanded .map-floating-players { visibility:visible!important; }
body.camera-window-expanded .map-floating-preview-expanded .map-floating-preview-topbar { background:rgba(16,29,47,var(--map-card-alpha,.65)); }
body.camera-window-expanded #camera-views-workspace .camera-explorer-bar,
body.camera-window-expanded #camera-views-workspace .camera-search-map,
body.camera-window-expanded #camera-views-workspace .camera-browser-drawer { visibility:hidden; }
.weather-route-toolbar,.weather-route-editor-heading,.weather-route-departure { display:flex; gap:14px; align-items:end; flex-wrap:wrap; }
.weather-route-toolbar .filter-field { flex:1; min-width:220px; }
.weather-route-label { line-height:1.6; padding:14px 18px; background:#17364a; border-left:3px solid #8addc9; border-radius:8px; overflow-wrap:anywhere; }
.weather-route-editor { padding:20px; background:#132b40; border:1px solid #42617b; border-radius:14px; margin:16px 0; }
.weather-route-editor-heading { align-items:center; justify-content:space-between; }
.weather-route-editor-heading h3 { margin:0; }
.weather-route-editor-heading>div { flex:1; min-width:200px; }
.weather-route-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:18px 0; }
.weather-route-fields .filter-field { margin-bottom:10px; }
.weather-route-departure .filter-field { flex:1; min-width:220px; }
.weather-place-matches { display:grid; gap:7px; max-height:260px; overflow:auto; margin-top:10px; }
.weather-place-matches button,.weather-preview-points button { text-align:left; font:inherit; color:#e6f2ff; background:#18364b; padding:12px; border:1px solid #526e85; border-radius:10px; cursor:pointer; }
.weather-place-matches button:hover,.weather-preview-points button:hover { border-color:#91dfca; background:#204254; }
.weather-route-map { height:clamp(300px,52dvh,580px); width:100%; border-radius:14px; border:1px solid #637b90; isolation:isolate; }
.weather-route-map .leaflet-popup-content { color:#122536; }
.weather-preview-points { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.weather-preview-points p { margin:6px 0; }
#weather-preview-status { line-height:1.6; }
#route-weather-workspace .weather-speech-controls { margin:16px 0; }
@media(max-width:600px) {
 .weather-route-fields { grid-template-columns:1fr; }
 .weather-route-editor { padding:14px; }
 .weather-route-departure .filter-field { flex-basis:100%; }
}

/* Each workspace has one job. Override legacy Viewer sizing at its original scope. */
.app-menu-group { display:grid; gap:2px; padding:6px 0; border-bottom:1px solid #365062; }
.app-menu-group p { margin:4px 10px; color:#b4c9d8; font-size:.72rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; }
#app-explore-menu .app-menu-group button { width:100%; }
.dashboard-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
body[data-workspace="home"] #home-workspace .main-stage { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr); grid-template-rows:auto auto; grid-template-areas:"intro intro" "watch location"; height:auto; min-height:0; gap:20px; align-items:start; }
body[data-workspace="home"] #home-workspace #map-section,
body[data-workspace="home"] #home-workspace .desktop-map-controls,
body[data-workspace="home"] #home-workspace .map-layer-controls { display:none; }
.viewer-workspace-intro,.viewer-location-panel { display:none; }
body[data-workspace="home"] .viewer-workspace-intro { grid-area:intro; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.viewer-workspace-intro h1 { margin:0; font-size:clamp(1.6rem,3vw,2rem); line-height:1.2; }
.viewer-workspace-intro p { margin:8px 0 0; color:var(--rme-muted); }
body[data-workspace="home"] .viewer-location-panel { grid-area:location; display:block; min-width:0; padding:16px; border:1px solid var(--rme-line); border-radius:14px; background:var(--rme-panel); }
.viewer-location-heading h2 { font-size:1.15rem; }
.viewer-location-heading p { margin:8px 0 14px; }
#viewer-location-map { width:100%; height:360px; min-height:300px; border-radius:10px; background:#203847; isolation:isolate; }
.viewer-location-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.viewer-location-actions button { flex:1; }
.viewer-map-tip { line-height:1.5; margin-bottom:0; }
body[data-workspace="home"] #player-section { grid-area:watch; width:100%; height:auto; min-height:0; padding:16px; }
body[data-workspace="home"] #player-section .viewer-card { flex:none; padding:0; gap:12px; }
body[data-workspace="home"] .viewer-card>* { order:initial; }
body[data-workspace="home"] .viewer-card .viewer-header-actions { order:8; display:block; margin:0; }
.viewer-header-actions summary,.viewer-map-settings summary,.route-extra-options summary,.route-guidance-settings summary { cursor:pointer; color:var(--rme-muted); padding:12px 0; }
body[data-workspace="home"] .viewer-media-card { padding:0; border:0; }
body[data-workspace="home"] #media-shell { width:100%; aspect-ratio:16/9; height:auto; min-height:180px; max-height:none; background:#070f18; border-radius:10px; }
body[data-workspace="home"] #media-shell .media { width:100%; height:100%; max-height:none; object-fit:contain; }
body[data-workspace="home"] .viewer-controls-card { padding:12px 0 0; border:0; border-top:1px solid var(--rme-line); }
body[data-workspace="home"] .viewer-controls-row-primary { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
body[data-workspace="home"] .viewer-source-field { grid-column:1/-1; grid-row:1; width:100%; }
body[data-workspace="home"] .viewer-stay-button { grid-column:1/-1; }
.viewer-list-progress { margin:0 0 8px; font-weight:650; font-size:.85rem; color:#bce5dc; }
.viewer-map-settings { width:100%; border-top:1px solid var(--rme-line); }
.viewer-map-settings .viewer-controls-row { margin:0; }
.camera-flow-tip { font-size:.82rem; line-height:1.5; margin:8px 0 12px; color:var(--rme-muted); }
#watch-saved-cameras { width:100%; margin-bottom:14px; }
.map-preview-footer { flex-wrap:wrap; }
.map-preview-footer .map-preview-watch { flex-basis:100%; }
.journey-steps { display:flex; flex-wrap:wrap; gap:10px 22px; padding:0; margin:0 0 16px; list-style:none; }
.journey-steps li { display:flex; gap:8px; align-items:center; color:var(--rme-muted); font-size:.85rem; }
.journey-steps span { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#274259; font-weight:700; }
.journey-steps [aria-current="step"] { color:#bce5dc; }
.journey-steps [aria-current="step"] span { background:#287768; color:#fff; }
.route-extra-options { border-top:1px solid var(--rme-line); }
.route-extra-options summary span { font-size:.8rem; display:block; font-weight:400; }
.route-extra-fields { display:grid; gap:14px; padding:10px 0 16px; }
.route-next-step { border:1px solid #518d83; background:#153b3e; padding:18px; border-radius:12px; scroll-margin-top:calc(var(--app-header-height,90px) + 20px); }
.route-next-step h3 { margin:0; }
.route-next-step .route-secondary-actions { margin-top:14px; }
.route-guidance-settings { border-top:1px solid var(--rme-line); }
.weather-planner-handoff { display:flex; gap:12px; flex-wrap:wrap; align-items:center; color:var(--rme-muted); font-size:.85rem; margin:14px 0; }
.flow-empty-state { padding:24px; border:1px dashed #638098; border-radius:12px; max-width:680px; }
.flow-empty-state p { color:var(--rme-muted); }
@media(max-width:820px) {
 body[data-workspace="home"] #home-workspace .main-stage { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; grid-template-areas:"intro" "watch" "location"; gap:16px; }
 #viewer-location-map { height:320px; min-height:300px; }
 body[data-workspace="home"] #player-section { padding:14px; }
 .viewer-workspace-intro>button { width:100%; }
}
@media(max-width:420px) { .dashboard-cards { grid-template-columns:1fr; } }
.free-drive-map-card { position:absolute; top:68px; left:10px; width:min(335px,calc(100% - 20px)); border:1px solid #69988d; border-radius:12px; padding:12px; background:rgba(16,29,47,var(--map-card-alpha,.65)); z-index:640; }
.free-drive-map-card p { margin:6px 0 10px; font-size:.78rem; line-height:1.4; }
.free-drive-map-card button { min-height:40px; font-size:.8rem; }
body:has(.map-layer-controls[open]) .free-drive-map-card { visibility:hidden; }
.current-road-camera-status { background:#183b40; padding:12px; border-radius:10px; font-size:.82rem; border-left:3px solid #86cebd; }
body[data-workspace="map"] .navigation-overlays:has(.camera-approach-card:not(.hidden)) { z-index:650; }
body:has(.camera-approach-card:not(.hidden)) .free-drive-map-card { display:none; }
body[data-workspace="home"] .viewer-step-button { width:100%; min-width:0; }
.driving-area-weather-icon span { display:grid; justify-items:center; background:rgba(255,255,255,.94); border:2px solid #385064; border-radius:12px; font-size:24px; line-height:1.15; color:#142b3b; box-shadow:0 2px 5px #0004; }
.driving-area-weather-icon small { font:600 10px/1.4 system-ui,sans-serif; }
body.nav-route-up-active .driving-area-weather-icon span { transform:rotate(var(--navigation-counter-rotation,0deg)); }
.weather-home-card,.planner-quick-guide { padding:18px; border:1px solid var(--rme-line); border-radius:12px; margin-bottom:20px; background:#173247; }
.weather-home-card h3,.planner-quick-guide h3 { font-size:1.05rem; }
.weather-home-actions { display:flex; flex-wrap:wrap; gap:8px; }
.weather-home-actions .action-button { width:auto; }
.planner-quick-guide li { margin-bottom:8px; }
.planner-quick-guide p { margin:10px 0 0; }

/* Keep camera search controls within their columns and camera windows above them. */
.camera-search-inputs .action-button { width:auto; flex:0 0 auto; min-width:82px; padding:8px 14px; }
.camera-explorer-bar #camera-drawer-toggle { width:auto; }
.camera-search-options { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; }
.camera-search-options .filter-field { min-width:0; }
.camera-search-options .action-button { width:auto; padding:10px 12px; }
.camera-search-options select { max-width:100%; min-width:0; }
#camera-search-map { width:auto; color:#e7f3fb; border-color:#689eae; }
#camera-views-workspace .map-floating-players { z-index:1100; }
#camera-views-map .leaflet-control { z-index:1; }
#camera-views-map .leaflet-top { z-index:700; }
.map-floating-players .map-preview-footer { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr); gap:5px; }
.map-floating-players .map-preview-footer .action-button { width:auto; min-width:0; min-height:38px; padding:5px 4px; font-size:.72rem; line-height:1.2; }
.map-floating-players .map-preview-caption { padding:6px 8px; }
.map-floating-players .map-preview-feedback { font-size:.7rem; }
.place-search-actions { display:flex; flex-wrap:wrap; gap:8px; }
.place-search-actions .action-button { width:auto; flex:1 1 130px; }
@media(max-width:360px) { .camera-search-options { grid-template-columns:minmax(0,1fr); } .camera-search-options .action-button { justify-self:start; } }

/* Local weather: location switch, a current-hour forecast, then hourly/daily detail. */
/* Zero-minimum grid tracks keep the hourly strip from widening the page. */
body[data-workspace="local-weather"] .route-results-area { width:100%; max-width:1000px; min-width:0; grid-template-columns:minmax(0,1fr); }
.local-weather-page { width:100%; max-width:100%; grid-template-columns:minmax(0,1fr); gap:16px; background:linear-gradient(155deg,#173d59,#112438 60%); }
.local-weather-page>* { min-width:0; max-width:100%; }
.local-weather-page :is(p,h2,h3) { overflow-wrap:anywhere; }
.local-weather-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.local-weather-heading .action-button { width:auto; }
.local-weather-page .weather-home-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; align-items:center; margin:0; padding:14px 16px; background:#122d42; }
.local-weather-page .weather-home-card h3 { margin:0 0 4px; font-size:.84rem; color:#8ddbc7; }
.local-weather-page .weather-home-card p { margin:3px 0; font-size:.85rem; }
.local-weather-page .weather-home-card button { width:auto; font-size:.72rem; min-height:38px; padding:7px 10px; }
#weather-home-feedback { grid-column:1/-1; }
#weather-home-feedback:empty,#local-weather-speech-status:empty { display:none; }
.weather-home-summary { color:#bfdaea; }
.weather-location-switch { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid #4d7087; border-radius:12px; padding:4px; background:#10283b; gap:4px; }
.weather-location-switch .action-button { width:100%; border:0; background:transparent; padding:8px 4px; }
.weather-location-switch .action-button[aria-pressed="true"] { background:#87dfca; color:#123336; }
.local-weather-search-panel { padding:16px; background:#122b3e; border:1px solid #526e83; border-radius:12px; }
.local-weather-search-panel .place-search-actions { margin-top:10px; }
.local-weather-status { margin:0; font-size:.8rem; color:#c1d8e7; }
.local-weather-overview { padding:24px; border-radius:18px; background:linear-gradient(130deg,#285879,#16354e); border:1px solid #5f899f; }
.local-weather-hero-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.local-weather-hero-title>div { min-width:0; }
.local-weather-hero-title p { margin:0 0 5px; font-size:.7rem; letter-spacing:.08em; color:#aed8e2; }
.local-weather-hero-title h3 { margin:0; font-size:clamp(1.2rem,3vw,1.8rem); }
.local-weather-hero-title span:not(.local-weather-symbol) { font-size:.75rem; color:#c6dce9; }
.local-weather-symbol { flex-shrink:0; font-size:clamp(2.7rem,7vw,4rem); line-height:1; }
.local-weather-temperature { margin-top:12px; font-size:clamp(2.8rem,8vw,4.5rem); line-height:1.2; font-weight:550; letter-spacing:-.045em; }
.local-weather-condition { margin:6px 0 20px; font-size:1.05rem; }
.local-weather-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; padding-top:16px; border-top:1px solid #83a9bc66; gap:12px; }
.local-weather-metrics dt { font-size:.72rem; color:#b6d0e0; }
.local-weather-metrics dd { margin:6px 0 0; font-size:.95rem; line-height:1.3; overflow-wrap:anywhere; }
.local-weather-forecast-toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) auto; align-items:end; gap:12px; }
.local-weather-forecast-toolbar>.filter-field { min-width:0; }
.local-weather-page :is(input,select) { min-width:0; max-width:100%; }
.local-weather-speech { display:flex; flex-wrap:wrap; gap:8px; }
.local-weather-speech .action-button { width:auto; }
.local-weather-forecast { min-width:0; width:100%; max-width:100%; }
.local-weather-forecast h3 { font-size:1rem; margin-bottom:12px; }
.local-weather-hourly { display:flex; width:100%; max-width:100%; min-width:0; gap:10px; overflow-x:auto; overscroll-behavior-inline:contain; padding:2px 0 12px; scroll-snap-type:x proximity; scrollbar-color:#87dfca #10283b; }
.local-weather-hour { flex:0 0 134px; padding:14px 10px; display:flex; flex-direction:column; gap:8px; background:#16344a; border:1px solid #45647a; border-radius:12px; scroll-snap-align:start; font-size:.8rem; }
.local-weather-hour strong { font-size:1.15rem; }.local-weather-hour small { color:#bfd8e5; font-size:.72rem; }
.local-weather-daily { display:grid; gap:10px; }
.local-weather-day { display:grid; grid-template-columns:120px minmax(0,1fr) minmax(0,1fr); gap:14px; padding:16px; border:1px solid #45647a; border-radius:12px; background:#16344a; font-size:.85rem; }
.local-weather-day p { margin:4px 0; }.local-weather-day span { color:#b5cedf; font-size:.75rem; }
.local-weather-source { font-size:.72rem; color:#a6c4d4; margin:0; }
@media(max-width:600px) {
 .local-weather-overview { padding:18px; }
 .local-weather-forecast-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .local-weather-speech { grid-column:1/-1; }
 .local-weather-speech .action-button { min-height:44px; padding:8px 14px; font-size:.85rem; }
 .local-weather-day { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .local-weather-day>strong { grid-column:1/-1; }
 .local-weather-metrics { gap:8px; }
}
@media(max-width:380px) {
 .local-weather-page .weather-home-card { grid-template-columns:minmax(0,1fr); }
 .local-weather-page .weather-home-card button { justify-self:start; }
 .local-weather-heading { gap:8px; }
 .local-weather-heading .action-button { min-height:40px; padding:8px 10px; font-size:.78rem; }
 .weather-location-switch .action-button { font-size:.8rem; }
}

/* Trip Optics: a readable wordmark and TO app icon at phone sizes. */
.app-shell-header .trip-optics-brand,.standalone-help .trip-optics-brand { display:flex; flex:0 1 auto; min-width:0; gap:9px; text-align:left; }
.trip-optics-icon { display:block; flex:0 0 auto; width:48px; height:48px; border-radius:13px; background:#091b2c; box-shadow:0 0 0 1px #87dfca55; object-fit:contain; }
.trip-optics-wordmark { min-width:0; }
.trip-optics-name { display:block; color:#f3faf7; font-size:1.15rem; font-weight:800; letter-spacing:-.025em; white-space:nowrap; }
.app-shell-header .trip-optics-brand small,.standalone-help .trip-optics-brand small { display:block; margin-top:3px; font-size:.65rem; color:#c1d8df; font-weight:450; white-space:nowrap; }
.trip-optics-brand small strong { color:#8be1c4; font-weight:800; }
.trip-optics-accent { color:#8be1c4; }
.standalone-help .topbar { flex-wrap:nowrap; justify-content:space-between; }
.standalone-help .topbar>.action-button { width:auto; flex-shrink:0; }
@media(max-width:760px) {
 .trip-optics-icon { width:40px; height:40px; border-radius:11px; }
 .trip-optics-name { font-size:1rem; }
 .app-shell-header .trip-optics-brand small,.standalone-help .trip-optics-brand small { font-size:.58rem; }
 .app-shell-header .trip-optics-brand,.standalone-help .trip-optics-brand { gap:7px; }
}

.map-browse-rotation { position:absolute; bottom:84px; left:50%; transform:translateX(-50%); z-index:750; display:flex; align-items:center; gap:5px; width:min(310px,calc(100% - 24px)); padding:5px; border:1px solid #87adba; border-radius:12px; background:rgba(16,29,47,var(--map-card-alpha,.65)); }
.map-browse-rotation button { flex:0 0 auto; min-height:40px; min-width:38px; padding:4px 6px; border:0; border-radius:8px; background:#18374b; color:#eef8ff; font:inherit; font-size:.8rem; cursor:pointer; }
.map-browse-rotation input { min-width:0; flex:1; width:auto; }
body:has(.map-layer-controls[open]) .map-browse-rotation { visibility:hidden; }
.map-canvas-shell:has(.map-browse-rotation:not(.hidden)) .navigation-overlays { bottom:146px!important; }