/* Pocket is the mobile design system. Shared weather rows live in ../card-viz.css. */
:root {
  --md-background: 243 241 234; --md-on-background: 32 40 34;
  --md-surface: 243 241 234; --md-surface-bright: 251 250 246;
  --md-surface-dim: 235 233 225; --md-surface-variant: 225 229 224;
  --md-surface-container: 235 233 225; --md-surface-container-low: 248 247 242;
  --md-surface-container-lowest: 251 250 246; --md-surface-container-high: 230 233 228;
  --md-surface-container-highest: 220 226 219;
  --md-on-surface: 32 40 34; --md-on-surface-variant: 104 114 107;
  --md-outline: 104 114 107; --md-outline-variant: 209 214 208;
  --md-primary: 49 92 67; --md-primary-container: 49 92 67;
  --md-on-primary: 247 250 247; --md-on-primary-container: 247 250 247;
}
html.dark {
  --md-background: 8 9 11; --md-on-background: 236 238 240;
  --md-surface: 8 9 11; --md-surface-bright: 23 25 29; --md-surface-dim: 8 9 11;
  --md-surface-variant: 44 48 53; --md-surface-container: 23 25 29;
  --md-surface-container-low: 23 25 29; --md-surface-container-lowest: 18 20 23;
  --md-surface-container-high: 32 35 40; --md-surface-container-highest: 44 48 53;
  --md-on-surface: 236 238 240; --md-on-surface-variant: 169 173 179;
  --md-outline: 169 173 179; --md-outline-variant: 44 48 53;
  --md-primary: 184 199 212; --md-primary-container: 184 199 212;
  --md-on-primary: 21 26 31; --md-on-primary-container: 21 26 31;
  --md-primary-fixed: 47 56 64; --md-primary-fixed-dim: 108 125 138;
  --md-on-primary-fixed: 236 238 240; --md-on-primary-fixed-variant: 184 199 212;
  --md-secondary-container: 36 43 49; --md-on-secondary-container: 213 224 234;
}
body { background: var(--hf-lab-page); color: var(--hf-lab-ink); }
main { max-width: 720px; margin: 0 auto; padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important; }
.topo-texture, .topographic-bg { background-image: none !important; }
body>header { background: color-mix(in srgb, var(--hf-lab-card) 94%, transparent) !important; backdrop-filter: blur(18px); height: calc(60px + env(safe-area-inset-top)); }
body>header a, body>header a span { text-transform: none !important; color: var(--hf-lab-ink) !important; letter-spacing: -0.03em; }
body>header a[href="/app/"] { font-size: 13px; }
body>header img { width: 30px; height: 30px; border-radius: 9px; box-shadow: none; }
#page-browse>section:first-child { padding-top: 24px; }
#page-browse>section:first-child h1 { text-transform: none; font-size: 30px; line-height: 1.12; letter-spacing: -0.045em; }
#page-browse>section:first-child p { font-size: 14px; }
#search { height: 52px; border-radius: 14px; background: var(--hf-lab-card); font-size: 16px; }
#status { font-size: 13px; line-height: 1.4; padding-top: 4px; }
#browse-sort-seg { border-radius: 12px; }
.browse-sort-btn { min-height: 40px; border-radius: 8px; font-size: 13px; letter-spacing: 0; text-transform: none; }
#nearby-location-btn { min-height: 44px; border-radius: 12px; font-size: 13px; }
#results-heading, #page-saved h1, #page-regions h1, #page-settings h1 { text-transform: none; letter-spacing: -0.03em; }
#results-heading { font-size: 22px; }
#results-heading+span, #results-count { font-size: 13px; }
#page-browse .text-label-caps { font-size: 12px; letter-spacing: 0.05em; }
#results, #saved-grid, #region-routes-grid { display: grid; grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
.route-card[data-card-style="weather_pocket"] { text-decoration: none; padding: 20px !important; gap: 18px !important; contain-intrinsic-size: 425px; }
.route-card .card-save-btn { width: 44px; height: 44px; border-radius: 12px; }
.route-card .card-area { overflow: visible; }
.route-card .card-stats { gap: 8px !important; }
.route-card .hf-viz-state { min-height: 260px; border-radius: 10px; background: var(--hf-lab-panel); }
.route-card .hf-weather-row { min-height: 44px; }
.route-card .hf-row-heading { min-height: 30px; }
body>header nav a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 380px) {
  .route-card[data-card-style="weather_pocket"] { padding: 16px !important; }
  .route-card .hf-weather-row { grid-template-columns: 36px 20px minmax(52px, 1fr) minmax(44px, 1fr) 34px; gap: 4px; }
  .route-card .hf-row-heading { font-size: 10px; }
}
body>nav { height: auto !important; min-height: 72px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--hf-lab-card) 95%, transparent) !important; }
body>nav .nav-tab { flex: 1; min-width: 0; min-height: 48px; padding: 6px 2px; border-radius: 14px; color: var(--hf-lab-muted); gap: 3px; }
body>nav .nav-tab.is-active { background: var(--hf-lab-accent-soft); color: var(--hf-lab-accent); }
body>nav .nav-tab>span:last-child { text-transform: none; letter-spacing: 0; font-size: 12px; }
#page-settings :is(button, select), #page-regions button { border-radius: 12px; }
#page-settings select, #page-settings input, #long-trail-planner select, #long-trail-planner input { font-size: 16px !important; min-height: 44px; }
#page-settings .border, #page-saved .border:not(.route-card) { border-radius: 14px; }
/* Route detail keeps all elevation, hourly, safety and section-planning data. */
main:has(#content) { padding-top: calc(60px + env(safe-area-inset-top)) !important; }
#content>.hero-art { height: auto !important; padding: 28px 20px 8px; background: none !important; }
#content>.hero-art>div { position: static !important; }
#hero-title, #long-trail-title { color: var(--hf-lab-ink) !important; text-shadow: none !important; text-transform: none; font-size: 34px; line-height: 1.1; letter-spacing: -0.045em; }
#hero-coords { color: var(--hf-lab-muted) !important; text-shadow: none !important; font-size: 14px; white-space: normal; margin-top: 12px; }
#hero-coords a { color: inherit !important; }
#stat-strip { background: var(--hf-lab-card); border: 1px solid var(--hf-lab-rule); border-radius: 16px; padding: 18px 10px; }
#content h2 { font-size: 22px; line-height: 1.25; letter-spacing: -0.025em; }
#content select { min-height: 48px; border-radius: 12px; font-size: 16px !important; }
#elevation-mode-controls { border-radius: 12px; }
#elevation-mode-controls button { min-height: 44px; font-size: 13px; }
#outlook-list { background: var(--hf-lab-card); border: 1px solid var(--hf-lab-rule); border-radius: 18px; overflow: hidden; }
#outlook-list .day-card { background: transparent; border: 0; border-bottom: 1px solid var(--hf-lab-rule); border-radius: 0; margin: 0 !important; }
#outlook-list .day-card:last-child { border-bottom: 0; }
.day-card__summary { min-height: 88px; padding: 16px !important; cursor: pointer; }
.day-card__summary .text-label-caps { font-size: 14px; text-transform: none; letter-spacing: 0; }
.day-card__summary .text-body-md { font-size: 13px; }
.day-card__summary .text-headline-md { font-size: 19px; }
.day-card__detail { padding: 0 16px 18px !important; }
.day-card__detail .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.day-card__detail .font-label-caps { font-size: 12px; letter-spacing: 0.03em; }
.day-card__detail p, .day-card__detail li { font-size: 14px; }
.pocket-day-meta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--hf-lab-muted); }
#save-btn { width: 44px; height: 44px; justify-content: center; border-radius: 12px; background: var(--hf-lab-panel); }
#long-trail-planner { border-radius: 18px; background: var(--hf-lab-card); }
#long-trail-planner .hero-art { background: var(--hf-lab-panel); }
#boot-loading { text-transform: none; letter-spacing: 0; font-size: 16px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--hf-lab-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .page-section:not(.hf-hidden) { animation: hf-pocket-enter 220ms ease-out; }
  body>nav .nav-tab { transition: background-color 160ms ease, color 160ms ease; }
  .day-card[open] .day-card__detail { animation: hf-weather-reveal 200ms ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .route-card, .page-section, .day-card, #content, #content>section, .day-card__detail { animation: none !important; }
  .day-chevron, button, a { transition: none !important; }
}
@media (max-width: 360px) {
  .route-card[data-card-style="weather_pocket"] { padding: 15px !important; }
  body>header { padding-left: 16px; padding-right: 16px; }
  .day-card__summary { gap: 8px; padding: 12px !important; }
}