/* Page layout */
html, body { height:100%; }
.map-page{
  display:flex;
  flex-direction:column;
  gap:0;
  min-height:calc(100vh - 128px);
}

.map-toolbar{
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 16px;
  margin-bottom:12px;
  border:1px solid rgba(148, 163, 184, 0.12);
  border-radius:16px;
  background:#0f141a;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.map-location-bar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding-right:4px;
  margin-right:4px;
  border-right:1px solid rgba(148,163,184,.12);
}

.map-location-label{
  color:#9fb0c8;
  font:700 11px/1.2 system-ui;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.map-location-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.map-saved-locations{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
  margin-top:2px;
}

.map-saved-locations-label{
  color:#8ea0b8;
  font:700 10px/1.2 system-ui;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.map-saved-locations-list{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.map-saved-location-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:220px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.16);
  background:#161c24;
  color:#e5eefc;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.map-saved-location-chip-label{
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  font-weight:700;
}

.map-saved-location-chip button{
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  cursor:pointer;
  font:inherit;
}

.map-saved-location-chip-delete{
  color:#bfdbfe !important;
  font-size:13px !important;
  line-height:1;
}

.map-saved-locations-empty{
  color:#8ea0b8;
  font-size:12px;
}

#mapLocationInput{
  min-width:240px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.14);
  background:#161c24;
  color:#dfe7f3;
  font:500 14px/1.2 system-ui;
}

#mapLocationInput::placeholder{
  color:#8ea0b8;
}

#mapLocationInput:focus{
  outline:none;
  border-color:rgba(59,130,246,.38);
  box-shadow:0 0 0 3px rgba(59,130,246,.12);
}

.map-location-action{
  width:auto;
  min-width:92px;
  justify-content:center;
}

.map-report-modal{
  position:fixed;
  inset:0;
  z-index:1700;
}

.map-report-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,8,15,.68);
  backdrop-filter:blur(4px);
}

.map-report-dialog{
  position:relative;
  width:min(560px, calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  overflow:auto;
  margin:24px auto;
  padding:20px;
  border-radius:24px;
  border:1px solid rgba(147,197,253,.22);
  background:linear-gradient(180deg, #123b73 0%, #0e2d5b 100%);
  box-shadow:0 30px 60px rgba(3,12,28,.4);
}

.map-report-dialog-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.map-report-dialog-header h3{
  margin:4px 0 0;
  color:#f8fafc;
  font-size:22px;
}

.map-report-kicker{
  color:#93c5fd;
  font:700 10px/1.2 system-ui;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.map-report-form{
  display:grid;
  gap:12px;
}

.map-guide-dialog{
  width:min(860px, calc(100vw - 32px));
  padding:22px;
}

.map-guide-body{
  display:grid;
  gap:14px;
}

.map-guide-intro{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(96,165,250,.2);
  background:linear-gradient(180deg, rgba(30,41,59,.92), rgba(15,23,42,.92));
}

.map-guide-intro p{
  margin:0;
  color:#dbeafe;
  font-size:15px;
  line-height:1.6;
}

.map-guide-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.map-guide-card{
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.16);
  background:#0f141a;
}

.map-guide-card h4{
  margin:0 0 8px;
  color:#f8fafc;
  font-size:15px;
}

.map-guide-card p{
  margin:0;
  color:#cbd5e1;
  font-size:14px;
  line-height:1.55;
}

.map-report-close{
  border:1px solid rgba(255,255,255,.78);
  background:#ffffff;
  color:#10233f;
  border-radius:999px;
  padding:7px 12px;
  font-weight:700;
  cursor:pointer;
}

.map-conditions-popup{
  min-width:248px;
  max-width:312px;
  color:#eff6ff;
  border-radius:22px;
}

.map-conditions-popup h4{
  margin:0 0 6px;
  font-size:16px;
  line-height:1.25;
  color:#ffffff;
}

.map-conditions-meta{
  font-size:12px;
  color:rgba(219,234,254,.82);
  margin-bottom:8px;
}

.map-conditions-desc{
  font-size:13px;
  line-height:1.5;
  margin-bottom:12px;
  color:#f8fbff;
}

.map-conditions-photos{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px;
  margin-bottom:10px;
}

.map-conditions-photos img{
  width:100%;
  height:72px;
  object-fit:cover;
  border-radius:8px;
  display:block;
}

.map-conditions-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-bottom:10px;
}

.map-conditions-actions--single{
  grid-template-columns:1fr;
}

.map-conditions-actions button{
  width:100%;
  min-width:0;
  padding:7px 8px;
  border-radius:14px;
  font-size:12px;
  font-weight:700;
}

.map-conditions-clear-note{
  margin-bottom:8px;
  font-size:12px;
  color:#fde68a;
}

.map-conditions-comments{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.map-conditions-comment{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(191,219,254,.24);
  color:#eff6ff;
}

.map-conditions-comment-author{
  font-size:11px;
  color:rgba(219,234,254,.72);
  margin-bottom:4px;
}

.map-conditions-popup .muted{
  color:rgba(219,234,254,.72);
}

.map-conditions-popup .btn{
  border:1px solid rgba(255,255,255,.88);
  background:#ffffff;
  color:#10233f !important;
  box-shadow:0 8px 18px rgba(8,25,53,.18);
}

.map-conditions-popup .btn.primary{
  border-color:#ffffff;
  background:#ffffff;
  color:#9f1239 !important;
}

.map-conditions-popup,
.map-conditions-popup .map-conditions-meta,
.map-conditions-popup .map-conditions-desc,
.map-conditions-popup .map-conditions-comment,
.map-conditions-popup .map-conditions-comment-author,
.map-conditions-popup .map-conditions-clear-note,
.map-conditions-popup .muted{
  color:#f8fbff;
}

.map-conditions-popup .map-conditions-meta,
.map-conditions-popup .map-conditions-comment-author,
.map-conditions-popup .muted{
  color:rgba(239,246,255,.8);
}

.map-conditions-popup textarea{
  min-height:72px;
  border-radius:14px;
  background:rgba(7,20,44,.42);
  border:1px solid rgba(191,219,254,.2);
  color:#f8fbff;
}

.map-conditions-popup textarea::placeholder{
  color:rgba(219,234,254,.56);
}

.map-page .maplibregl-popup.map-conditions-maplibre-popup .maplibregl-popup-content{
  padding:16px 16px 14px !important;
  border-radius:26px !important;
  border:1px solid rgba(147,197,253,.28) !important;
  background:linear-gradient(180deg, #2363b5 0%, #123b73 100%) !important;
  box-shadow:0 22px 44px rgba(5,15,35,.34) !important;
  color:#f8fbff !important;
  overflow:hidden !important;
}

.map-page .maplibregl-popup.map-conditions-maplibre-popup .maplibregl-popup-content *{
  -webkit-text-fill-color:inherit !important;
}

.map-page .maplibregl-popup.map-conditions-maplibre-popup .maplibregl-popup-tip{
  border-top-color:#123b73 !important;
}

.map-page .maplibregl-popup.map-conditions-maplibre-popup .maplibregl-popup-close-button{
  color:#ffffff;
  font-size:18px;
  line-height:1;
  padding:8px 10px;
  border-radius:999px;
}

.map-page .maplibregl-popup.map-conditions-maplibre-popup .maplibregl-popup-close-button:hover{
  background:rgba(255,255,255,.12);
}

.map-page .maplibregl-popup.map-conditions-maplibre-popup .map-conditions-popup{
  background:transparent !important;
  color:#f8fbff !important;
  border-radius:22px !important;
}

.map-page .maplibregl-popup.map-conditions-maplibre-popup .map-conditions-actions{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:8px !important;
}

.map-page .maplibregl-popup.map-conditions-maplibre-popup .map-conditions-actions--single{
  grid-template-columns:1fr !important;
}

.map-page .maplibregl-popup.map-conditions-maplibre-popup .map-conditions-actions .btn{
  width:100% !important;
  min-width:0 !important;
  padding:7px 8px !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.92) !important;
  background:#ffffff !important;
  color:#111827 !important;
  box-shadow:0 8px 18px rgba(8,25,53,.18) !important;
}

.map-report-dialog .muted,
.map-report-dialog .field label,
.map-report-dialog .map-report-kicker{
  color:#e0efff;
}

.map-report-dialog input,
.map-report-dialog textarea,
.map-report-dialog select{
  border:1px solid rgba(191,219,254,.24);
  border-radius:14px;
  background:rgba(7,20,44,.38);
  color:#f8fbff;
  padding:10px 12px;
}

.map-report-dialog input::placeholder,
.map-report-dialog textarea::placeholder{
  color:rgba(219,234,254,.56);
}

.map-report-dialog .btn{
  padding:8px 12px;
  border-radius:14px;
}

.map-report-dialog .btn.primary{
  background:#ffffff;
  border-color:#ffffff;
  color:#10233f !important;
}

.map-report-dialog .btn:not(.primary){
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.28);
  color:#f8fbff !important;
}

@media (max-width: 640px){
  .map-report-dialog{
    width:min(100vw - 20px, 560px);
    margin:10px auto;
    padding:16px;
    border-radius:20px;
  }

  .map-conditions-popup{
    min-width:0;
    max-width:260px;
  }

  .map-conditions-actions button,
  .map-report-form .row.gap .btn{
    flex:1 1 100%;
    width:100%;
  }

  .map-saved-location-chip{
    max-width:100%;
  }

  .map-saved-location-chip-label{
    max-width:180px;
  }
}

.map-conditions-comment-form{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.map-conditions-comment-form textarea{
  min-height:72px;
  background:#fff;
  color:#0f172a;
}

.map-conditions-role{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font:700 11px/1.2 system-ui;
  letter-spacing:.04em;
}

.map-conditions-role--admin{
  background:rgba(37,99,235,.18);
  border:1px solid rgba(96,165,250,.32);
  color:#bfdbfe;
}

.map-conditions-role--user{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(148,163,184,.18);
  color:#dbe4f0;
}

.map-conditions-legend{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.map-conditions-legend-groups{
  display:grid;
  gap:12px;
  margin-top:10px;
}

.map-conditions-legend-group{
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(255,255,255,.02);
}

.map-conditions-legend-group-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  color:#f8fafc;
  font-size:13px;
  font-weight:700;
}

.map-conditions-legend-item{
  display:flex;
  align-items:center;
  gap:10px;
  color:#e5eefc;
  font-size:13px;
}

.map-conditions-legend-dot{
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:13px;
  border:1.5px solid rgba(226,232,240,.9);
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}

.toolbar-dropdown{
  position:relative;
}

.toolbar-trigger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(148, 163, 184, 0.14);
  background:#161c24;
  color:#d9e1ec;
  font:600 14px/1.2 system-ui;
  cursor:pointer;
}

.toolbar-trigger:hover,
.toolbar-dropdown.is-open .toolbar-trigger{
  background:#1b2430;
  border-color:rgba(59,130,246,.32);
}

.toolbar-trigger--primary{
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  border-color:rgba(147,197,253,.35);
  color:#fff;
}

.map-guide-trigger{
  margin-left:auto;
  background:linear-gradient(135deg,#f8fafc,#dbeafe);
  border-color:rgba(148,163,184,.32);
  color:#0f172a;
  font-weight:800;
  box-shadow:0 10px 24px rgba(15,23,42,.16);
}

.map-guide-trigger:hover{
  background:linear-gradient(135deg,#ffffff,#bfdbfe);
  border-color:rgba(59,130,246,.42);
}

.toolbar-caret{
  font-size:11px;
  opacity:.75;
}

.toolbar-dropdown-panel{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  z-index:40;
  display:none;
  width:min(420px, calc(100vw - 64px));
  max-height:min(70vh, 720px);
  overflow:auto;
  padding:12px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:16px;
  background:#111821;
  box-shadow:0 24px 50px rgba(0,0,0,.32);
}

.toolbar-dropdown.is-open .toolbar-dropdown-panel{
  display:block;
}

.toolbar-dropdown-panel--narrow{
  width:min(320px, calc(100vw - 64px));
}

.toolbar-group{
  display:grid;
  gap:10px;
}

.toolbar-group + .toolbar-group{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(148,163,184,.12);
}

.toolbar-group-title{
  color:#9fb0c8;
  font:700 11px/1.2 system-ui;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.toolbar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#dfe7f3;
  font:500 13px/1.3 system-ui;
}

.toolbar-row input[type="checkbox"]{
  width:auto;
}

.toolbar-action{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.14);
  background:#161c24;
  color:#dfe7f3 !important;
  cursor:pointer;
  font:600 13px/1.3 system-ui;
}

.toolbar-action:hover,
.toolbar-action.active{
  background:#1b2430;
  border-color:rgba(59,130,246,.3);
}

#status{
  margin-left:auto;
  background:#052e1a;
  color:#a7f3d0 !important;
  padding:8px 10px;
  font:13px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border-radius:10px;
  white-space:pre-line;
}

.map-container{
  position:relative;
  flex:1 1 auto;
  min-height:calc(100vh - 220px);
  width:100%;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.12);
  border-radius:18px;
  background:#0b1016;
}

#map{
  position:absolute;
  inset:0;
  z-index:1;
}

/* Always-dark text for all UI */
#status, #layersPanel, #surfacePanel, #crashPanel, #usgsPanel, #drawPanel, #ratingsPanel, #panelStack, #nasaPanel,
.maplibregl-ctrl-group, .maplibregl-ctrl, label, input, select, textarea, .btn {
  color:#e5eefc !important;
}

/* Inspect toggle (readable by default) */
#inspectBtn{
  box-shadow:none;
}
#inspectBtn.active{ background:#111; color:#fff; border-color:#111; }

/* Blank toggle */
#blankToggle{
  box-shadow:none;
}

/* Hide UI for blank mode */
body.ui-blank #toast {
  display: none !important;
}

#layersPanel{
  background: transparent;
  border:0;
  border-radius: 12px;
  box-shadow: none;
  padding: 0;
  width: 100%;
  font: 13px/1.35 system-ui;
}
.map-toolbar-panel-body{
  display:grid;
  gap:10px;
}
.panel-header-hidden{
  display:none !important;
}
.section-summary{
  margin-top:4px;
  color:#8ea0b8;
  font:500 11px/1.45 system-ui;
}
.dataset-toolbar-body{
  gap:14px;
}
.dataset-section{
  border-width:1px;
  border-radius:14px;
  padding:12px 12px 10px;
}
.dataset-section--road{
  border-color:rgba(59,130,246,.28) !important;
  background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(22,28,36,.94)) !important;
  box-shadow:inset 0 0 0 1px rgba(96,165,250,.06);
}
.dataset-section--trail{
  border-color:rgba(34,197,94,.22) !important;
  background:linear-gradient(180deg, rgba(11,31,24,.96), rgba(18,28,25,.94)) !important;
  box-shadow:inset 0 0 0 1px rgba(74,222,128,.05);
}
.dataset-section-body{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.dataset-kicker{
  margin-bottom:6px;
  color:#bfdbfe;
  font:700 10px/1.2 system-ui;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.dataset-section--trail .dataset-kicker{
  color:#bbf7d0;
}
.dataset-overview-card{
  margin-bottom:0 !important;
  border-style:dashed !important;
  background:rgba(255,255,255,.03) !important;
}
.dataset-state-card{
  padding:10px 12px !important;
  border-radius:12px !important;
}
.dataset-state-card .panel-header > div:first-child{
  display:grid;
  gap:3px;
}
.dataset-state-card .panel-header h4{
  font-size:16px !important;
  font-weight:800 !important;
  letter-spacing:-0.01em;
}
.dataset-state-card--road{
  border-color:rgba(96,165,250,.22) !important;
  background:rgba(15,23,42,.72) !important;
}
.dataset-state-card--trail{
  border-color:rgba(74,222,128,.2) !important;
  background:rgba(18,40,29,.74) !important;
}
.dataset-state-label{
  margin-bottom:5px;
  color:#94a3b8;
  font:700 10px/1.2 system-ui;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.dataset-state-card--road .dataset-state-label{
  color:#93c5fd;
}
.dataset-state-card--trail .dataset-state-label{
  color:#86efac;
}
.dataset-state-card .row{
  align-items:center;
}
.dataset-state-card .layer-actions{
  display:grid !important;
  grid-auto-flow:column;
  grid-auto-columns:max-content;
  align-items:center;
  gap:12px;
}
.dataset-state-card .layer-actions label{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  margin:0;
  white-space:nowrap;
  line-height:1.1;
}
.dataset-state-card .layer-actions input[type="checkbox"]{
  margin:0;
}
#layersPanel h4{ margin:0; font-weight:700; font-size:13px; color:#f8fafc; }
#layersPanel .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:6px 0;
}
#layersPanel .row input[type="checkbox"]{ width:auto; margin:0; }
#layersPanel .swatch{ width:16px; height:4px; border-radius:2px; display:inline-block; margin-right:8px; }
.c-paved{ background:#6b7280; } .c-gravel{ background:#2563eb; }
.c-trail{ background:#16a34a; } .c-track{ background:#f59e0b; }
#layersPanel .layer-actions{ display:flex; align-items:center; gap:10px; }
#layersPanel .layer-actions label{ display:flex; align-items:center; gap:4px; font-size:12px; margin:0; }
#layersPanel .layer-actions input[type="checkbox"]{ width:auto; }
#layersPanel .section-card{
  border:1px solid rgba(148,163,184,.14);
  border-radius:10px;
  background:#161c24;
  padding:8px 10px;
  margin-bottom:8px;
}
#layersPanel .section-card > .panel-body{ margin-top:8px; }
#surfaceMsg{ font-size:12px; margin-top:6px; color:#9aa6b8; }

/* Crash panel */
#crashPanel{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  width: 100%;
  font: inherit;
}
#crashPanel h4{ margin:0; font-weight:700; font-size:13px; }
#crashPanel .row{ display:flex; align-items:center; justify-content:space-between; margin:6px 0; }
#crashPanel .swatch{ width:16px; height:4px; border-radius:2px; display:inline-block; margin-right:8px; }
#crashMsg{ font-size:12px; margin-top:6px; color:#374151; }
.crash-filters{ border-top:1px solid rgba(148,163,184,.14); margin-top:8px; padding-top:8px; }
.crash-filters .filter-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.crash-filters .filter-body .row{ gap:8px; }
.crash-filters select{ width:120px; }

/* USGS panel */
#usgsPanel{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  width: 100%;
  font: inherit;
}
#usgsPanel h4{ margin:0; font-weight:700; font-size:13px; }
#usgsPanel .row{ display:flex; align-items:center; justify-content:space-between; margin:6px 0; }
#usgsPanel .section-title{ margin-top:8px; font-weight:700; font-size:12px; color:#e5eefc; }
#usgsMsg{ font-size:12px; margin-top:6px; color:#9aa6b8; }

/* NASA raster panel (inside Whole US) */
#nasaPanel{
  position: static;
  width: 100%;
  max-height: none;
  overflow: visible;
  margin: 0 0 8px 0;
}
#nasaPanel h4{ margin:0; font-weight:700; font-size:13px; }
#nasaMsg{ font-size:12px; margin-bottom:8px; color:#374151; }
#nasaSections{ display:flex; flex-direction:column; gap:8px; }
.nasa-section{
  border:1px solid rgba(148,163,184,.14);
  border-radius:10px;
  background:#161c24;
}
.nasa-section-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:0;
  border-radius:10px;
  background:#121821;
  padding:8px 10px;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  text-align:left;
}
.nasa-section-toggle:hover{ background:#1b2430; }
.nasa-count{
  border:1px solid rgba(148,163,184,.18);
  border-radius:999px;
  font-size:11px;
  line-height:1;
  padding:2px 7px;
  background:#0f141a;
}
.nasa-section-body{ border-top:1px solid rgba(148,163,184,.14); padding:6px 10px; }
.nasa-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  padding:4px 0;
}
.nasa-file{
  overflow-wrap:anywhere;
  flex:1;
}
.nasa-row input[type="checkbox"]{
  width:auto;
  margin:0;
}

/* Dropdown panels */
.panel{
  position: static;
  z-index: auto;
  background:#161c24;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.14);
  font:13px/1.4 system-ui;
  box-shadow:none;
}
#drawPanel,
#ratingsPanel{
  width:100%;
}
.ratings-card{
  border:1px solid rgba(148,163,184,.14) !important;
  border-radius:10px !important;
  background:#161c24 !important;
  padding:10px 12px !important;
}
.panel .title{ font-weight:700; margin-bottom:6px; }
#drawPanel .title{ margin-bottom:0; }
.collapsible .panel-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.collapsible .panel-toggle{
  border:1px solid rgba(148,163,184,.16); background:#0f141a; border-radius:8px;
  padding:4px 10px; font-size:12px; cursor:pointer; color:#e5eefc; line-height:1.2;
}
#drawPanel .panel-toggle{ font-size:13px; }
.collapsible .panel-toggle:hover{ background:#1b2430; }
.collapsible .panel-body{ margin-top:8px; }
.collapsible.collapsed .panel-body{ display:none; margin-top:0; }
#drawPanel .panel-body{
  max-height: min(60vh, 560px);
  overflow-y: auto;
  padding-right: 4px;
}
#ratingsPanel .panel-body{
  max-height: min(60vh, 560px);
  overflow-y: auto;
  padding-right: 4px;
}
.muted{ color:#9aa6b8; font-size:12px; }
.field{ margin:8px 0; }
label{ display:block; font-weight:600; margin-bottom:4px; color:#e5eefc; }
input, textarea, select{
  width:100%;
  padding:6px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:8px;
  background:#0f141a;
  color:#f8fafc;
}
.row.gap{ display:flex; gap:8px; }
.btn{ display:inline-block; padding:8px 10px; border-radius:10px; border:1px solid rgba(148,163,184,.16); background:#0f141a; color:#f8fafc !important; cursor:pointer; }
.btn.primary{ border-color:#2563eb; background:#2563eb; color:#fff !important; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.road-ratings-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.road-rating-field{
  border:1px solid rgba(148,163,184,.14);
  border-radius:12px;
  background:rgba(15,20,26,.72);
  padding:12px;
}
.road-rating-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.road-rating-label{
  margin:0;
  font-size:14px;
  font-weight:700;
  color:#f8fafc;
}
.road-rating-value{
  min-width:38px;
  padding:4px 9px;
  border-radius:999px;
  background:#2563eb;
  color:#fff;
  font-size:12px;
  font-weight:700;
  text-align:center;
}
.road-rating-scale,
.road-rating-midpoint{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  color:#9aa6b8;
}
.road-rating-scale{
  margin-bottom:10px;
}
.road-rating-midpoint{
  margin-top:8px;
}
.rating-helper-text{
  margin-top:8px;
  font-size:12px;
  color:#9aa6b8;
}
.road-rating-slider-wrap{
  position:relative;
  padding:4px 0;
}
.road-rating-slider{
  width:100%;
  min-height:36px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  accent-color:#2563eb;
  cursor:pointer;
}
.road-rating-slider::-webkit-slider-thumb{
  width:22px;
  height:22px;
}
.road-rating-slider::-moz-range-thumb{
  width:22px;
  height:22px;
  border:none;
  border-radius:50%;
  background:#2563eb;
}
.road-ratings-more{
  border:1px solid rgba(148,163,184,.14);
  border-radius:12px;
  background:rgba(15,20,26,.48);
  overflow:hidden;
}
.road-ratings-more summary{
  list-style:none;
  cursor:pointer;
  padding:12px;
  font-size:13px;
  font-weight:700;
  color:#dfe7f3;
}
.road-ratings-more summary::-webkit-details-marker{
  display:none;
}
.road-ratings-more summary::after{
  content:'Show optional ratings';
  float:right;
  color:#9aa6b8;
  font-weight:500;
}
.road-ratings-more[open] summary::after{
  content:'Hide optional ratings';
}
.road-ratings-more-body{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:0 12px 12px;
}
.road-rating-field--choice{
  padding-bottom:14px;
}
.road-ride-again-buttons{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.road-ride-again-btn{
  min-height:46px;
  font-weight:700;
}
.road-ride-again-btn.selected{
  border-color:#2563eb;
  background:#2563eb;
  color:#fff !important;
  box-shadow:0 0 0 1px rgba(37,99,235,.35);
}
.road-rating-averages-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  color:#dfe7f3;
}
.road-rating-averages-head span{
  color:#9aa6b8;
  font-size:12px;
}
.road-rating-averages-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  gap:8px;
}
.road-rating-average-chip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid rgba(148,163,184,.12);
  border-radius:10px;
  background:rgba(15,20,26,.58);
  font-size:12px;
  color:#c9d4e5;
}
.road-rating-average-chip strong{
  color:#fff;
  font-size:13px;
}

/* Toolbar draw button */
#drawFab{
  position: static;
  width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.14);
  background:#161c24;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  box-shadow:none;
  user-select:none;
  padding:10px 12px;
  color:#dfe7f3 !important;
}
#drawFab.active{ background:#2563eb; color:#fff; border-color:#2563eb; }

/* Toast */
#toast{
  position: fixed; right:14px; bottom:14px; z-index:1300;
  background:#111827; color:#fff; padding:10px 12px; border-radius:10px;
  display:none; max-width:60ch;
}

/* Popup readability (force dark text on generic white popups only) */
.map-page .maplibregl-popup:not(.map-conditions-maplibre-popup) .maplibregl-popup-content{
  background:#fff !important;
  color:#000 !important;
}
.map-page .maplibregl-popup:not(.map-conditions-maplibre-popup) .maplibregl-popup-content *{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
}
.maplibregl-popup:not(.map-conditions-maplibre-popup) .maplibregl-popup-tip{ border-top-color:#fff; }

@media (max-width: 900px){
  .map-toolbar{
    gap:10px;
    padding:10px 12px;
  }
  .map-location-bar{
    width:100%;
    margin-right:0;
    padding-right:0;
    padding-bottom:10px;
    border-right:0;
    border-bottom:1px solid rgba(148,163,184,.12);
  }
  .map-location-controls{
    width:100%;
  }
  #mapLocationInput{
    flex:1 1 220px;
    min-width:0;
  }
  .toolbar-dropdown{
    width:calc(50% - 5px);
  }
  .toolbar-trigger{
    width:100%;
    justify-content:space-between;
  }
  .map-guide-trigger{
    width:100%;
    margin-left:0;
  }
  .toolbar-dropdown-panel,
  .toolbar-dropdown-panel--narrow{
    width:min(420px, calc(100vw - 48px));
  }
  .map-guide-grid{
    grid-template-columns:1fr;
  }
  .road-ride-again-buttons{
    grid-template-columns:1fr;
  }
}