/* One mobile map stack, activity shortcuts and a consistent night palette. */
.map-top-stack { display: contents; }
.theme-hours { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 12px 0; padding: 13px; border: 1px solid #cadce8; border-radius: 16px; background: #f3f8fc; }
.theme-hours[hidden] { display: none !important; }
.theme-hours label { display: grid; gap: 6px; min-width: 0; font-size: 14px; font-weight: 750; color: #25465c; }
.theme-hours input { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid #b9d1e0; border-radius: 11px; background: white; color: #173a51; padding: 8px; }
.theme-hours p { grid-column: 1/-1; margin: 0; color: #4c6879; font-size: 13px; line-height: 1.4; }
.app-version { display: block; text-align: right; margin: 12px 2px 0; color: #617b8b; font-size: 12px; }

.health-badge-shortcut { width: 100%; display: grid !important; grid-template-columns: 30px minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 10px; padding: 15px; margin: 14px 0 8px; text-align: left; border: 1px solid var(--health-border); border-radius: 18px; background: var(--health-soft); color: var(--health-text); }
.health-badge-shortcut .ui-icon-wrap { grid-column: 1; grid-row: 1/3; color: var(--health-green) !important; }
.health-badge-shortcut strong { grid-column: 2; font-size: 18px; line-height: 1.3; }
.health-badge-shortcut strong span { color: var(--health-green); }
.health-badge-shortcut small { grid-column: 2; grid-row: 2; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--health-muted); }
.health-badge-link { grid-column: 3; grid-row: 1/3; font-size: 14px; font-weight: 800; white-space: nowrap; }
.health-badge-section { scroll-margin-top: 25px; }
.health-badge-filters { display: flex; gap: 7px; overflow-x: auto; margin: 0 0 12px; padding-bottom: 3px; }
.health-badge-filters button { flex: none; min-height: 43px; padding: 8px 12px; border: 1px solid var(--health-border); border-radius: 13px; background: var(--trip-surface); color: var(--health-text); font-size: 14px !important; font-weight: 750; }
.health-badge-filters button[aria-pressed="true"] { background: var(--health-green); color: white; border-color: var(--health-green); }
.health-badge[hidden] { display: none !important; }
.health-week-chart { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); align-items: end; gap: 5px; min-height: 125px; padding: 8px 2px 4px; border-bottom: 1px solid var(--health-border); }
.health-day { display: flex; flex-direction: column; align-items: center; min-width: 0; gap: 5px; font-size: 12px; color: var(--health-muted); }
.health-day-bars { height: 95px; width: 100%; display: flex; align-items: end; justify-content: center; gap: 2px; }
.health-day-bars i { display: block; width: min(15px,42%); min-height: 3px; border-radius: 5px 5px 1px 1px; background: #b7cad3; }
.health-day-bars i.walk { background: #1d9165; }
.health-day-bars i.bike { background: #2673bc; }
.health-week-legend { display: flex; gap: 16px; margin: 12px 0; font-size: 13px; color: var(--health-muted); }
.health-week-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 3px; background: #1d9165; }
.health-week-legend span + span::before { background: #2673bc; }
#health-share-summary { width: 100%; padding: 11px 14px; border: 1px solid var(--health-border); border-radius: 13px; background: var(--health-soft); color: var(--health-text); font-size: 15px; font-weight: 800; }

body.ui-dark { color-scheme: dark; }
body.ui-dark .theme-hours { background: #172d41; border-color: #47647a; }
body.ui-dark .theme-hours label, body.ui-dark .theme-hours p, body.ui-dark .app-version { color: #c6d8e5; }
body.ui-dark .theme-hours input { background: #1d394f; color: #f1f8fc; border-color: #5c7b91; }
body.ui-dark .health-badge-shortcut, body.ui-dark #health-share-summary { background: #193b32 !important; color: #effcf4 !important; border-color: #4f8167 !important; }
body.ui-dark .health-badge-shortcut strong span, body.ui-dark .health-badge-shortcut .ui-icon-wrap { color: #a2edbf !important; }
body.ui-dark .health-badge-shortcut small { color: #c8e4d1 !important; }
body.ui-dark .health-badge-filters button { background: #1b3547 !important; color: #e5f2f8 !important; border-color: #4d6a80 !important; }
body.ui-dark .health-badge-filters button[aria-pressed="true"] { background: #246947 !important; border-color: #7dcc9b !important; color: white !important; }
body.ui-dark .health-badge:not(.earned) { background: #192f40; color: #c8dbe6; border-color: #536f83; }
body.ui-dark .health-week-chart { border-color: #567681; }
body.ui-dark .health-day-bars i.walk { background: #58c38c; }
body.ui-dark .health-day-bars i.bike { background: #75bbf3; }
body.ui-dark .health-week-legend span::before { background: #58c38c; }
body.ui-dark .health-week-legend span + span::before { background: #75bbf3; }
body.ui-dark .leaflet-tile-pane { filter: brightness(.68) contrast(1.08) saturate(.8); }
body.ui-dark .maplibregl-canvas { filter: brightness(.7) contrast(1.07) saturate(.85); }
body.ui-dark .map-scrim { background: linear-gradient(180deg,#06132142,transparent 32%,transparent 75%,#06132138); }
@media (prefers-reduced-motion: no-preference) {
  .leaflet-tile-pane, .maplibregl-canvas { transition: filter .35s ease; }
}

@media (max-width: 760px) {
  /* The map already has a search control. Removing the separate header prevents overlap at every text size. */
  .topbar { display: none !important; }
  .map-top-stack { position: fixed; z-index: 690; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; pointer-events: none; }
  .map-top-stack > * { pointer-events: auto; }
  body.nav-active .map-top-stack, body.arrived .map-top-stack, body.viewing-share .map-top-stack, body.ui-focus .map-top-stack { display: none !important; }
  .map-top-stack .planner-peek { position: relative !important; top: auto !important; left: auto !important; right: auto !important; width: calc(100% - 62px) !important; height: 54px; min-height: 54px; transform: none !important; box-sizing: border-box; }
  .map-top-stack .discover-bar { position: relative !important; top: auto !important; left: auto !important; right: auto !important; width: 100% !important; mask-image: none !important; overflow: hidden; }
  #discover-bar .discover-scroller { width: 100%; display: flex; overflow-x: auto !important; overflow-y: hidden; overscroll-behavior-inline: contain; gap: 8px; padding: 0 0 4px; min-height: 48px; scrollbar-width: none; }
  #discover-bar .discover-scroller > button { flex: 0 0 auto !important; min-height: 44px !important; padding: 8px 13px !important; border-radius: 23px; font-size: 14px !important; white-space: nowrap !important; }
  #discover-bar .discover-scroller .ui-icon { width: 20px; height: 20px; }
  .map-top-stack .search-area-btn, .map-top-stack .poi-search-area-btn, .map-top-stack .poi-status { position: relative !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; align-self: center; max-width: 100%; box-sizing: border-box; }
  body:not(.nav-active):not(.arrived) .layers-fab { top: calc(10px + env(safe-area-inset-top)) !important; }
  body.nav-active .layers-fab { top: var(--nav-tools-top, calc(175px + env(safe-area-inset-top))) !important; }
  body.ui-dark #discover-bar .discover-scroller > button { background: #152c43; color: #ecf5fc; border-color: #536f86; box-shadow: 0 5px 18px #0717278c; }
  body.ui-dark #discover-bar .discover-scroller > button[aria-pressed="true"] { background: #2175a7; color: white; border-color: #92d5f7; }
  body.ui-dark .planner-peek, body.ui-dark .layers-fab { background: #142b40 !important; color: #eff7fb !important; border-color: #668196 !important; }
  .health-sheet .health-badge-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 360px) {
  #discover-bar .discover-scroller > button { font-size: 13px !important; }
  .health-badge-shortcut { padding: 12px; gap: 2px 7px; }
  .health-badge-shortcut strong { font-size: 16px; }
  .health-badge-link { font-size: 12px; }
}