/* Trail Finder look: outdoor, modern. Loaded after the main styles in index.html, so it only restyles;
   every class and behaviour stays the same. Trail, road and difficulty colours are data and are not changed here. */
:root {
  --bg: #f2efe7;              /* warm stone */
  --panel: #fbfaf6;
  --fg: #15211a;
  --muted: #5d6a61;
  --line: #e2ddd1;
  --chip: #ebe7dc;
  --accent: #2b6a4b;          /* forest: links, selected, focus */
  --accent-fg: #ffffff;
  --cta: #c4ee62;             /* lime: the main action buttons */
  --cta-fg: #10230f;
  --forest: #12291d;          /* header band */
  --forest-2: #1d3d2b;
  --glass: rgba(251, 250, 246, .86);
  --shadow-sm: 0 1px 2px rgba(20, 33, 26, .08), 0 1px 1px rgba(20, 33, 26, .04);
  --shadow: 0 6px 20px rgba(20, 33, 26, .12), 0 1px 3px rgba(20, 33, 26, .08);
  --radius: 14px;
  --map-ground: #e4e8dc;
  --thumb: #ffffff;           /* selected segment */
  --font-display: "Archivo", "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1410; --panel: #141c17; --fg: #e9ede6; --muted: #9ba89f; --line: #26312a; --chip: #1d2721;
    --accent: #7fd6a2; --accent-fg: #0b1a10; --cta: #c4ee62; --cta-fg: #10230f; --forest: #0a1a11; --forest-2: #163323;
    --glass: rgba(20, 28, 23, .84); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 6px 20px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
    --map-ground: #1b231e; --thumb: #2f3d34;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1410; --panel: #141c17; --fg: #e9ede6; --muted: #9ba89f; --line: #26312a; --chip: #1d2721;
  --accent: #7fd6a2; --accent-fg: #0b1a10; --cta: #c4ee62; --cta-fg: #10230f; --forest: #0a1a11; --forest-2: #163323;
  --glass: rgba(20, 28, 23, .84); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 6px 20px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
  --map-ground: #1b231e; --thumb: #2f3d34;
}

body { font-size: 15px; -webkit-font-smoothing: antialiased; letter-spacing: -.005em; }
h1, .detail h2, .about h2, .pop h3 { font-stretch: 112%; font-weight: 800; letter-spacing: -.01em; }
.label, .detail h3, .more summary, .about h3, .trail .zone-tag { font-family: var(--font-body); font-weight: 700; font-size: .72rem; letter-spacing: .09em; }
.grade, .diff { font-family: var(--font-body); font-weight: 700; letter-spacing: .01em; }

/* Panel and header band */
.panel { background: var(--panel); border-right: 0; box-shadow: 1px 0 0 var(--line), 8px 0 30px rgba(20, 33, 26, .06); z-index: 2; }
.panel-head { padding: 0 18px 16px; gap: 14px; border-bottom: 1px solid var(--line); }
.brand {
  margin: 0 -18px; padding: 20px 18px 18px; gap: 10px;
  color: #fff;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M-10 96c40-22 70-30 110-14s80 6 150-28'/%3E%3Cpath d='M-10 78c42-20 72-28 112-12s78 4 148-30'/%3E%3Cpath d='M-10 60c44-18 74-26 114-10s76 2 146-32'/%3E%3Cpath d='M-10 42c46-16 76-24 116-8s74 0 144-34'/%3E%3Cpath d='M-10 24c48-14 78-22 118-6s72-2 142-36'/%3E%3Cpath d='M-10 114c38-24 68-32 108-16s82 8 152-26'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 120px,
    radial-gradient(120% 140% at 100% 0%, var(--forest-2) 0%, var(--forest) 60%);
}
.brand h1 { display: inline-flex; align-items: center; gap: 10px; font-size: 1.6rem; color: #fff; text-transform: none; }
.brand h1::before {
  content: ""; width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: var(--cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 19.5 9 8.5l3.6 6 2.4-3.6 6.5 8.6z' fill='%2310230f'/%3E%3Ccircle cx='17.5' cy='5.5' r='2' fill='%2310230f'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 4px 14px rgba(196, 238, 98, .25);
}
.brand h1 span { color: var(--cta); }
.brand-links { gap: 6px; }
.brand .linkish, .brand .acct-btn.acct-btn {
  color: #fff; font-size: .85rem; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); margin-left: 0;
  transition: background .15s;
}
.brand .linkish:hover, .brand .acct-btn.acct-btn:hover { background: rgba(255, 255, 255, .18); }
.brand .rec-link .rec-dot { background: #ff4d5e; box-shadow: 0 0 0 3px rgba(255, 77, 94, .25); }
.brand .acct-btn .acct-dot { background: var(--cta); color: var(--cta-fg); }
.brand :focus-visible { outline-color: var(--cta); }

/* Controls */
button.btn, select.zone, .search input, .tsearch input, .save-pick .newf input {
  border-radius: 12px; min-height: 44px; box-sizing: border-box; transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
button.btn { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 9px 14px; }
button.btn:hover { border-color: color-mix(in srgb, var(--fg) 25%, var(--line)); }
button.btn:active { transform: translateY(1px); }
button.btn.primary { background: var(--cta); color: var(--cta-fg); border-color: transparent; box-shadow: 0 6px 18px rgba(130, 170, 40, .28), inset 0 -2px 0 rgba(0, 0, 0, .08); }
button.btn.primary:hover { filter: brightness(1.04); }
button.find { min-height: 52px; font-size: 1.05rem; font-weight: 700; border-radius: 14px; letter-spacing: .005em; }
select.zone, .search input, .tsearch input, .save-pick .newf input { background: var(--chip); border: 1px solid transparent; color: var(--fg); }
select.zone:hover, .search input:hover, .tsearch input:hover { border-color: var(--line); }
.search input:focus, .tsearch input:focus, select.zone:focus { background: var(--panel); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); outline: none; }
select.zone { padding: 8px 12px; }
.near-row .btn { min-height: 44px; }
button:focus-visible, input:focus-visible, select:focus-visible, label.toggle:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Segmented controls */
.modes, .periods { background: var(--chip); padding: 4px; border-radius: 16px; gap: 4px; }
.modes button, .periods button { border-radius: 12px; min-height: 40px; transition: background .15s, color .15s; }
.modes button { padding: 10px 10px; color: var(--muted); }
.modes button:hover, .periods button:hover { color: var(--fg); }
.modes button[aria-selected="true"] { background: var(--forest); color: #fff; box-shadow: 0 4px 12px rgba(18, 41, 29, .25); }
.modes button[aria-selected="true"] svg { color: var(--cta); }
.periods button[aria-pressed="true"] { background: var(--thumb); color: var(--fg); box-shadow: var(--shadow); }
.periods .prime-btn { border: 1px dashed color-mix(in srgb, var(--prime) 55%, transparent); }
.periods .prime-btn[aria-pressed="true"] { background: var(--prime); color: #fff; border-color: transparent; }
.periods .prime-btn[aria-pressed="true"] .dot { background: #fff; }
.hint { font-size: .86rem; line-height: 1.5; }

/* Type filter chips */
.toggles { gap: 8px; }
label.toggle { padding: 6px 12px 6px 8px; min-height: 34px; box-sizing: border-box; gap: 6px; font-size: .86rem; font-weight: 600; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: background .15s, border-color .15s; }
label.toggle:not(.off) { border-color: color-mix(in srgb, var(--fg) 45%, transparent); }
label.toggle .ck { width: 16px; height: 16px; border-radius: 5px; }
label.toggle .sw { height: 5px; border-radius: 3px; }
label.toggle.off { background: transparent; border: 1px dashed var(--line); box-shadow: none; }
.diff-chip { border-radius: 10px; }
.diff-chip .diff { padding: 6px 11px; border-radius: 8px; }
.diff-chip[aria-pressed="true"] { border-color: var(--fg); }
.diff { border-radius: 6px; padding: 1px 7px; }

/* Status, results list */
.status { padding: 12px 18px; font-size: .88rem; }
.status.warn { border-left: 3px solid var(--warn-fg); }
.debug { padding: 8px 18px; }
.list ol { padding: 8px 10px 16px; display: grid; gap: 4px; }
.trail { padding: 12px 14px 12px 12px; border-bottom: 0; border-radius: 12px; transition: background .12s; }
.trail .bar { border-radius: 3px; }
.trail:hover { background: var(--chip); }
.trail.sel { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.trail .name { font-weight: 650; }
.newtag { background: var(--cta); color: var(--cta-fg); padding: 1px 7px; }
.box-row { padding: 10px 18px; }
.box-row:hover, .box-row:focus-visible { background: var(--chip); }
.box-head { padding: 12px 18px; }
.empty { padding: 28px 18px; }

/* Trail details */
.detail { padding: 14px 18px 28px; }
.detail h2 { font-size: 1.55rem; text-transform: none; line-height: 1.12; }
.d-head .bar { border-radius: 4px; }
.chip { padding: 3px 10px; }
.wx-now > div, .estats > div { border-radius: 14px; }
.wx-now > div { padding: 12px 14px; }
.wx-now strong { font-weight: 800; font-stretch: 105%; }
.want-btn { padding: 7px 14px; }
.detail a.go-btn { padding: 13px 14px; border-radius: 14px; background: var(--cta); color: var(--cta-fg); font-weight: 700; box-shadow: 0 6px 18px rgba(130, 170, 40, .25); }
.links a { border-radius: 999px; padding: 7px 13px; background: var(--panel); box-shadow: var(--shadow-sm); }
.unoff-box, .ghost-box, .save-pick, .wantlist .folder { border-radius: 14px; }
.wantlist li .open { border-radius: 12px; padding: 9px 12px; }
.lmi-scale { height: 10px; border-radius: 5px; }
.hits { border-radius: 14px; box-shadow: var(--shadow); border-color: var(--line); padding: 6px; }
.hits .hit { border-radius: 10px; }

/* Map: floating glass controls */
#map { background-color: var(--map-ground); }
.map-tools { top: 14px; right: 14px; gap: 8px; }
.map-tools select, .map-tools button {
  font-family: var(--font-body); font-size: .84rem; font-weight: 600; min-height: 38px; padding: 7px 13px; border-radius: 12px;
  background: var(--glass); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); box-shadow: var(--shadow); transition: background .15s, transform .1s;
}
.map-tools button:hover { background: var(--panel); }
.map-tools button:active { transform: translateY(1px); }
.map-tools #allBtn.on { background: var(--forest); border-color: var(--forest); color: #fff; }
.map-note { border-radius: 12px; box-shadow: var(--shadow); }
.map-actions { top: 14px; }
.map-actions .btn { box-shadow: var(--shadow); }
.map-actions .btn.primary { box-shadow: 0 8px 22px rgba(20, 33, 26, .3); }
.leaflet-bar { border: 0 !important; border-radius: 12px !important; box-shadow: var(--shadow) !important; overflow: hidden; }
.leaflet-bar a { background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); width: 36px !important; height: 36px !important; line-height: 36px !important; }
.leaflet-bar a:hover { background: var(--panel); }
.leaflet-touch .leaflet-bar a:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.leaflet-touch .leaflet-bar a:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.legend { background: var(--glass); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); border-radius: 14px; box-shadow: var(--shadow); padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); }
.legend .lg-mode button { border-radius: 8px; padding: 3px 9px; }
.legend .lg-mode button[aria-pressed="true"] { background: var(--forest); color: #fff; border-color: var(--forest); }
.leaflet-popup-content-wrapper { border-radius: 16px; box-shadow: var(--shadow); }
.leaflet-control-attribution { border-radius: 8px 0 0 0; }
.app.fullmap .map-full-exit { background: var(--forest); color: #fff; border-color: transparent; box-shadow: 0 8px 22px rgba(20, 33, 26, .35); }
.app.fullmap .map-status:not(:empty) { border-radius: 12px; background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow); }

/* About dialog */
.about { background: rgba(10, 20, 14, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.about .card { border-radius: 20px; padding: 24px 26px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.about h2 { text-transform: none; font-size: 1.6rem; }
.about h3 { text-transform: uppercase; color: var(--accent); }

/* Phone: map on top with a row of tool chips, rounded bottom sheet */
@media (max-width: 760px) {
  .panel { border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(20, 33, 26, .18); border-top: 0; overflow-x: hidden; }
  .panel-head { padding: 0 16px 14px; gap: 12px; }
  .sheet-toggle { position: absolute; left: 50%; transform: translateX(-50%); top: 8px; z-index: 1; width: 40px; height: 5px; background: rgba(255, 255, 255, .45); }
  .panel.detail-open .sheet-toggle { position: static; transform: none; margin: 10px auto 2px; background: var(--line); }
  .panel { position: relative; }
  .brand { margin: 0 -16px; padding: 22px 16px 14px; }
  .brand h1 { font-size: 1.3rem; gap: 8px; }
  .brand h1::before { width: 28px; height: 28px; border-radius: 8px; background-size: 18px; }
  .brand .linkish, .brand .acct-btn.acct-btn { font-size: .8rem; padding: 5px 10px; }
  .map-tools { top: 10px; left: 0; right: 0; flex-direction: row; align-items: center; gap: 6px; padding: 0 12px 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .map-tools::-webkit-scrollbar { display: none; }
  .map-tools select, .map-tools button { flex: none; white-space: nowrap; min-height: 36px; padding: 6px 12px; border-radius: 999px; }
  .map-tools select { width: 128px; }
  .map-tools .map-note { flex: none; max-width: 220px; }
  .leaflet-top.leaflet-left { top: 52px; }
  .modes button { padding: 8px; font-size: .88rem; }
  .list ol { padding: 6px 6px 14px; }
}
@media (prefers-reduced-motion: reduce) { button.btn:active, .map-tools button:active { transform: none; } }

/* Phone app shell: the map fills the screen and the panel is a bottom sheet you drag
   between a peek, half and full height (index.html sets --sheet-h and --sheet-vis). */
@media (max-width: 760px) {
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body { position: fixed; inset: 0; }
  .app { --nav-h: calc(58px + env(safe-area-inset-bottom, 0px)); --sheet-h: 190px; --sheet-vis: 190px; display: block; position: fixed; inset: 0; height: auto; }
  .app.fullmap { --sheet-vis: 0px; }
  .mapwrap { position: absolute; inset: 0; }
  .panel {
    position: fixed; left: 0; right: 0; bottom: var(--nav-h); z-index: 1100;
    height: var(--sheet-h); max-height: none !important; box-sizing: border-box;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    transition: height .28s cubic-bezier(.2, .8, .2, 1);
    padding-bottom: 16px; box-shadow: 0 -10px 30px rgba(20, 33, 26, .18), 0 1px 0 var(--line);
  }
  .panel.dragging { transition: none; }
  .panel.sheet-peek { overflow: hidden; }
  /* bigger grab handle that stays at the top of the sheet */
  .sheet-toggle, .panel.detail-open .sheet-toggle {
    display: block; position: sticky; top: 0; left: auto; transform: none; z-index: 3;
    width: 100%; height: 22px; margin: 0 0 -22px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none;
  }
  .sheet-toggle::before { content: ""; display: block; width: 42px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: rgba(255, 255, 255, .5); }
  .panel.detail-open .sheet-toggle { margin: 0; }
  .panel.detail-open .sheet-toggle::before, .panel.sheet-scrolled .sheet-toggle::before { background: var(--line); }
  .panel.sheet-scrolled .sheet-toggle { background: var(--panel); }
  /* compact header: title and sport on one row; the links live in the tab bar */
  .brand-links > .linkish, .brand [data-account-slot] { display: none !important; }
  .modes { display: none; }
  .brand { padding: 20px 16px 12px; gap: 8px; align-items: center; justify-content: flex-start; touch-action: none; }
  .about { z-index: 1200; }
  .brand h1 { font-size: 1.25rem; flex: 1 1 auto; }
  .brand-links { display: contents; }
  .brand .sport-pick { order: 1; margin: 0; min-height: 36px; font-size: .85rem; }
  .brand::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .brand [data-account-slot] { order: 3; }
  .brand .linkish, .brand .acct-btn.acct-btn { order: 3; font-size: .82rem; padding: 7px 12px; min-height: 34px; box-sizing: border-box; display: inline-flex; align-items: center; }
  .modes button { min-height: 48px; }
  /* map controls clear the notch and sit above the sheet */
  .map-tools { top: calc(env(safe-area-inset-top, 0px) + 10px); }
  .map-tools select, .map-tools button { min-height: 40px; }
  .leaflet-top.leaflet-left { top: calc(env(safe-area-inset-top, 0px) + 56px); }
  .leaflet-bottom { bottom: var(--sheet-vis); transition: bottom .28s cubic-bezier(.2, .8, .2, 1); }
  .map-actions { top: auto; bottom: calc(var(--sheet-vis) + 12px); transition: bottom .28s cubic-bezier(.2, .8, .2, 1); }
  .app.fullmap .map-actions { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .app.fullmap .leaflet-bottom { bottom: 0; }
  .leaflet-control-zoom { display: none; }
  .tsearch .hits { max-height: 40vh; }
  /* app tab bar */
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1150; height: var(--nav-h); box-sizing: border-box;
    display: flex; padding: 0 4px env(safe-area-inset-bottom, 0px);
    background: var(--panel); border-top: 1px solid var(--line);
  }
  .tabbar > * {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font: inherit; font-size: .7rem; font-weight: 600; color: var(--muted); text-decoration: none;
    background: none; border: 0; padding: 6px 0 4px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .tabbar svg { width: 24px; height: 24px; padding: 3px 14px; border-radius: 999px; transition: background .15s; }
  .tabbar > [aria-current="true"] { color: var(--fg); }
  .tabbar > [aria-current="true"] svg { background: color-mix(in srgb, var(--cta) 70%, transparent); color: var(--cta-fg, #10230f); }
  body.sport-alt .tabbar .mtb-only, body:not(.sport-ski) .tabbar .ski-only, body:not(.sport-hunt) .tabbar .hunt-only, body:not(.sport-fish) .tabbar .fish-only, body:not(.sport-moto) .tabbar .moto-only, body:not(.sport-hike) .tabbar .hike-only { display: none; }
  .app.fullmap .tabbar { display: none; }
}
@media (min-width: 761px) { .tabbar { display: none !important; } }

/* Layers menu: map style, overlays and map tools in one drop-down (usability pass) */
.map-tools.menu-open { z-index: 1001; }   /* the open menu sits over the map key */
.map-tools .layers-btn { display: inline-flex; align-items: center; gap: 7px; }
.map-tools .layers-btn.open { background: var(--forest); border-color: var(--forest); color: #fff; }
.layers-n:empty { display: none; }
.layers-n { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--cta); color: var(--cta-fg); font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center; }
.layers-menu {
  position: absolute; top: 48px; right: 0; z-index: 2; width: 250px; box-sizing: border-box; padding: 12px;
  max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel); color: var(--fg); border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.layers-menu .lm-head { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 6px 2px 0; }
.layers-menu .lm-head:first-child { margin-top: 0; }
.layers-menu .lm-style { display: flex; flex-direction: column; gap: 6px; }
.layers-menu .lm-list { display: grid; gap: 6px; }
.map-tools .layers-menu select, .map-tools .layers-menu button { width: 100%; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.map-tools .layers-menu button { display: flex; align-items: center; gap: 6px; text-align: left; background: var(--chip, #fff); border: 1px solid var(--line); }
.map-tools .layers-menu .lm-overlays button::after { content: "Off"; margin-left: auto; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 10%, transparent); color: var(--muted); }
.map-tools .layers-menu .lm-overlays button.on::after { content: "On"; background: rgba(255, 255, 255, .25); color: inherit; }
.mapwrap.is3d .layers-menu .lm-style { display: none; }
.layers-menu .lm-looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.map-tools .layers-menu .lm-looks button { justify-content: center; padding-left: 4px; padding-right: 4px; font-size: .85rem; }
.map-tools .layers-menu .lm-looks button[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: #fff; }
.layers-menu .lm-more summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--muted); padding: 4px 2px; }
.layers-menu .lm-more .lm-list { margin-top: 6px; }
/* 4 map style tiles (alex, 2026-10-24) and on/off switches instead of Off/On pills */
.layers-menu .lm-top { display: none; }
.layers-menu .lm-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.map-tools .layers-menu .lm-tiles button { height: 58px; padding: 4px 2px; border-radius: 12px; border: 2px solid var(--line); justify-content: center; align-items: flex-end; font-size: .72rem; font-weight: 700; line-height: 1.1; text-align: center; }
.map-tools .layers-menu .lm-tiles button[aria-checked="true"] { border-color: var(--forest); box-shadow: 0 0 0 1px var(--forest); }
.map-tools .layers-menu .lm-tiles .t-osm { background: linear-gradient(135deg, #f2efe6 0 55%, #cfe6c3 55%); color: #15211a; }
.map-tools .layers-menu .lm-tiles .t-topo { background: repeating-radial-gradient(circle at 70% 30%, #e7ecd8 0 5px, #c9b98f 5px 6px); color: #15211a; }
.map-tools .layers-menu .lm-tiles .t-sat { background: radial-gradient(circle at 30% 30%, #6b7d4c, #2f3d24); color: #fff; }
.map-tools .layers-menu .lm-tiles .t-sathybrid { background: radial-gradient(circle at 30% 30%, #6b7d4c, #2f3d24); color: #fff; }
.map-tools .layers-menu .lm-tiles span { background: rgba(0, 0, 0, .0); }
.map-tools .layers-menu .lm-overlays button::after { content: ""; width: 38px; height: 22px; padding: 0; border-radius: 999px; flex: none; background: color-mix(in srgb, var(--fg) 18%, transparent) radial-gradient(circle at 11px 11px, #fff 8px, transparent 8.5px); }
.map-tools .layers-menu .lm-overlays button.on::after { content: ""; background: #2f8a3e radial-gradient(circle at 27px 11px, #fff 8px, transparent 8.5px); }
.map-tools .layers-menu .lm-overlays button { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 2px; color: var(--fg); }
#layersMenu .lm-overlays button, #layersMenu .lm-overlays button.on, #layersMenu .lm-overlays button[aria-pressed="true"] { background: transparent; border-color: var(--line); color: var(--fg); box-shadow: none; }

/* First-visit tip */
.first-tip {
  position: absolute; z-index: 600; left: 50%; bottom: 30px; transform: translateX(-50%); width: max-content; max-width: min(440px, calc(100% - 24px)); box-sizing: border-box;
  padding: 11px 14px; border-radius: 14px; background: var(--forest); color: #fff; box-shadow: var(--shadow); font-size: .88rem; line-height: 1.4;
}
.first-tip strong { color: var(--cta); }
.first-tip .linkish { color: var(--cta); font-weight: 700; margin-left: 4px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-decoration: underline; }
body.sport-alt .first-tip { display: none; }

/* Legend: rarely needed symbols tucked away */
.legend .lg-more details summary { cursor: pointer; font-weight: 700; margin-top: 4px; list-style: none; }
.legend .lg-more details summary::-webkit-details-marker { display: none; }
.legend .lg-more details summary::after { content: " ▸"; color: var(--muted); }
.legend .lg-more details[open] summary::after { content: " ▾"; }
.legend .lg-more ul { margin-top: 4px; }

/* How it works: a short list first, the full story in a drop-down */
.about-quick { padding-left: 18px; display: grid; gap: 8px; line-height: 1.45; }
.about-more { margin: 14px 0 6px; }
.about-more > summary { cursor: pointer; font-weight: 700; color: var(--accent); }

@media (max-width: 760px) {
  .map-tools { overflow: visible; }
  .map-tools #fullBtn { display: none; }   /* phones have Full map in the More tab */
  /* phones: Layers is a full-height panel from the bottom, not a small box to scroll (alex, 2026-10-24) */
  .layers-menu { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 60px); left: 0; right: 0; bottom: calc(var(--nav-h, 58px) + env(safe-area-inset-bottom, 0px)); width: auto; max-height: none;
    border-radius: 18px 18px 0 0; border: 0; box-shadow: 0 -4px 20px rgba(0, 0, 0, .2); padding: 6px 16px 24px; z-index: 1200; }
  .layers-menu .lm-top { display: flex; align-items: center; justify-content: space-between; position: sticky; top: -6px; z-index: 1; background: var(--panel); margin: 0 -16px; padding: 10px 16px 6px; }
  .layers-menu .lm-top b { font-size: 1.2rem; }
  .map-tools .layers-menu .lm-top button { width: 40px; height: 40px; font-size: 1.1rem; justify-content: center; border: 0; background: var(--chip, #eee); border-radius: 50%; }
  .layers-menu .lm-looks, .layers-menu .lm-looks-head { display: none; }
  body.lm-open .panel { visibility: hidden; }
  .first-tip { left: 12px; right: 12px; transform: none; width: auto; max-width: none; bottom: calc(var(--sheet-vis) + 64px); transition: bottom .28s cubic-bezier(.2, .8, .2, 1); }
}
.first-tip .tip-phone { display: none; }
@media (max-width: 760px) { .first-tip .tip-wide { display: none; } .first-tip .tip-phone { display: inline; } }

/* Phone usability pass 2: fields that don't zoom the page, a one-line sheet header,
   a Find button that stays in reach, a trail header that stays on top, and a shorter chip row */
@media (max-width: 760px) {
  /* iPhone Safari zooms the whole page into any field under 16px when you tap it */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
  /* title, sport and bell on one row, so the peek is short and the half sheet shows more */
  .brand { padding: 18px 14px 10px; flex-wrap: nowrap; }
  .brand::after { display: none; }
  .brand h1 { font-size: 1.15rem; min-width: 0; white-space: nowrap; }
  .brand { gap: 10px; }
  .brand .sport-pick { order: 1; flex: none; width: auto; max-width: 128px; min-height: 38px; padding-top: 4px; padding-bottom: 4px; }
  .brand [data-notify-slot] { order: 2; }
  .brand .notify-btn { min-width: 40px; min-height: 40px; justify-content: center; }
  /* the main button sticks to the bottom of the sheet while the search form is in view */
  .panel:not(.sheet-peek) #findBtn { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -10px 18px 4px var(--panel), 0 4px 14px rgba(20, 33, 26, .22); }
  /* trail details: Back and Save stay at the top while you scroll */
  .panel.detail-open .detail > .d-top, .panel.detail-open .detail > .back:first-child {
    position: sticky; top: 0; z-index: 2; margin: 0 -16px 8px; padding: 22px 16px 8px; background: var(--panel); box-shadow: 0 1px 0 var(--line);
  }
  .panel.detail-open .detail .back { min-height: 40px; display: inline-flex; align-items: center; font-size: 1rem; }
  .panel.detail-open .want-btn { min-height: 40px; }
  .panel.detail-open .sheet-toggle { margin-bottom: -22px; }
  .panel.detail-open .detail { padding-top: 0; }
  /* My location is just its symbol, so the whole chip row fits */
  .map-tools #locate { width: 40px; min-width: 40px; padding: 0; font-size: 0; justify-content: center; }
  .map-tools #locate::before { content: "◎"; font-size: 1.3rem; line-height: 1; }
  /* bigger level chips */
  .diff-chip { min-height: 40px; }
  /* wildfire, parking and other pins a bit smaller so they don't bury the trails */
  .rf-pin span { transform: scale(.82); }
}

/* Phone pass 3 (alex: "make it easier on the phone, look at all the features"): the map chip row fits every phone
   and in Skiing, the sheet title never runs under the sport menu, a one-line map credit, tool cards clear of the
   chip row and the sheet, bigger close buttons */
@media (max-width: 760px) {
  /* Satellite is just its symbol, Save point says "Save": with Skiing's extra chip the row still fits a 360 px phone */
  .map-tools #satBtn, .map-tools #spAdd { font-size: 0; gap: 0; }
  .map-tools #satBtn { width: 44px; min-width: 44px; padding: 0; justify-content: center; }
  .map-tools #satBtn::before { content: "🛰"; font-size: 1.15rem; line-height: 1; }
  .map-tools #spAdd::before { content: "📍 Save"; font-size: .84rem; line-height: 1; }
  /* the title shrinks instead of sliding under the sport menu */
  .brand h1 { overflow: hidden; text-overflow: ellipsis; }
  .brand .sport-pick { max-width: 132px; }
  /* map credit: one short line; tap it to read all of it */
  .leaflet-container .leaflet-control-attribution { font-size: 10px; line-height: 1.5; padding: 1px 6px; max-width: calc(100vw - 16px); box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
  .leaflet-container .leaflet-control-attribution.open { white-space: normal; }
  /* Offline maps opens under the chip row, full width, above the sheet */
  .offline-card { z-index: 1120; left: 12px; right: 12px; width: auto; top: calc(env(safe-area-inset-top, 0px) + 60px); max-height: calc(100% - var(--sheet-vis, 190px) - 76px); }
  .offline-card h2 button { min-width: 40px; min-height: 40px; margin: -8px -8px -8px 0; }
  /* Ride mode: the three buttons after Stop stay on one line */
  .nav-btns button { padding: 11px 6px; white-space: nowrap; }
}
@media (max-width: 380px) { .map-tools select, .map-tools button { padding-left: 10px; padding-right: 10px; } .map-tools { gap: 5px; } }
body.sport-alt .layers-menu .lm-looks, body.sport-alt .layers-menu .lm-looks-head { display: none; }

/* Phone navigation (alex, 2026-10-23: "more natural to navigate"): five tabs, a search box on the map's sheet,
   Find / Ride / Saved / More as pages in the sheet, and one ← Back at the top of every page (index.html showNav) */
.peek-search, .peek-photo, .peek-quick, .sheet-nav, .hub { display: none; }
@media (max-width: 760px) {
  /* the sheet's top row: logo, a search box, the photo search and the bell (the sport menu moved to More) */
  .brand .sport-pick { display: none; }
  body:not(.sport-alt) .brand h1 { flex: none; font-size: 0; gap: 0; }
  .peek-search {
    flex: 1 1 auto; min-width: 0; min-height: 44px; align-items: center; gap: 8px; padding: 0 14px;
    font: inherit; font-size: 1rem; color: rgba(255, 255, 255, .78); text-align: left; border: 0; border-radius: 12px;
    background: rgba(255, 255, 255, .13); cursor: text;
  }
  .peek-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .peek-photo { flex: none; width: 44px; height: 44px; place-items: center; font-size: 1.15rem; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .13); cursor: pointer; }
  body:not(.sport-alt) .peek-search, body:not(.sport-alt) .peek-photo { display: inline-flex; }
  body:not(.sport-alt) .peek-photo { display: grid; }
  .brand [data-notify-slot] { order: 0; }
  /* quick searches under it, one row that scrolls sideways */
  body:not(.sport-alt) .peek-quick { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; }
  .peek-quick::-webkit-scrollbar { display: none; }
  /* the row scrolls sideways: its edge fades where there's more, so the last button doesn't look cut ("Mud tod") */
  .peek-quick.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  .peek-quick.fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
  .sport-wait:not([hidden]) { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--muted); font-weight: 600; }
  .sport-wait .sw-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--accent); animation: swSpin .8s linear infinite; }
  @keyframes swSpin { to { transform: rotate(360deg); } }
  .peek-quick.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
  .peek-quick button {
    flex: none; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 999px;
    font: inherit; font-size: .9rem; font-weight: 600; color: var(--fg); background: var(--panel); border: 1px solid var(--line); cursor: pointer;
  }
  .peek-quick .dot, .hub .dot { width: 10px; height: 10px; border-radius: 50%; background: #2f9e5b; display: inline-block; }
  /* a page in the sheet: its title bar, with ← Back to the page you came from */
  .sheet-nav:not([hidden]) {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 4;
    margin: 0; padding: 22px 16px 12px; background: var(--forest); color: #fff; touch-action: none;
  }
  .sheet-nav::before { content: ""; position: absolute; top: 8px; left: 50%; width: 42px; height: 5px; margin-left: -21px; border-radius: 3px; background: rgba(255, 255, 255, .5); }
  .panel.detail-open .sheet-nav { display: none !important; }
  .panel:not(.detail-open) .sheet-nav:not([hidden]) ~ .panel-head .sheet-toggle { display: none; }
  .sheet-nav h2 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: #fff; text-transform: none; letter-spacing: 0; }
  .nav-back { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; margin: -6px 0; padding: 0 12px 0 8px; font: inherit; font-size: 1rem; font-weight: 700; color: var(--cta); background: rgba(255, 255, 255, .12); border: 0; border-radius: 10px; cursor: pointer; }
  .nav-back[hidden] { display: none; }
  .panel:is(.hub-on, .nav-search, .nav-results) .brand,
  .panel:is(.hub-on, .nav-search, .nav-results) .peek-quick { display: none !important; }
  /* Find, Ride, Saved, More: only the page shows */
  .panel.hub-on .panel-head > :not(.sheet-toggle):not(.sheet-nav):not(.hub),
  .panel.hub-on .results > .boxres, .panel.hub-on .results > .status, .panel.hub-on .results > .debug, .panel.hub-on .results > .list { display: none !important; }
  .panel:not(.detail-open) .hub:not([hidden]) { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
  /* New trails: the form without the name box (that's on Find) */
  .panel.nav-search .tsearch-row, .panel.nav-search #paneNew > .hint, .panel.nav-search .box-row-btns,
  .panel.nav-search #todayBtn, .panel.nav-search #paneNew > .wantlist { display: none !important; }
  /* Results of Near me, Prime loam, Every trail on screen: just the list */
  .panel.nav-results .panel-head > .pane, .panel.nav-results .box-row-btns { display: none !important; }
  .hub-sec { margin: 8px 0 -2px; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .hub-card {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; box-sizing: border-box;
    font: inherit; text-align: left; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 14px; cursor: pointer;
  }
  .hub-card:active { background: var(--chip); }
  .hub-card .ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--chip); font-size: 1.2rem; }
  .hub-card .tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .hub-card b { font-size: 1rem; }
  .hub-card small { color: var(--muted); font-size: .82rem; }
  .hub-card .go { flex: none; color: var(--muted); font-size: 1.4rem; line-height: 1; }
  .hub-start { min-height: 60px; font: inherit; font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--cta-fg); background: var(--cta); border: 0; border-radius: 16px; cursor: pointer; }
  .hub-note { margin: -4px 0 2px; text-align: center; color: var(--muted); font-size: .85rem; }
  .hub-seg { display: flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--chip); }
  .hub-seg button { flex: 1 1 auto; min-width: 0; padding: 4px 2px; min-height: 44px; font: inherit; font-weight: 700; color: var(--fg); background: none; border: 0; border-radius: 9px; cursor: pointer; }
  .hub-seg [aria-pressed="true"] { background: var(--panel); box-shadow: var(--shadow-sm); }
  .hub-hint { margin: -2px 2px 0; font-size: .82rem; color: var(--muted); line-height: 1.3; }
  @media (max-width: 380px) { .hub-seg button { font-size: .86em; } }
  .hub-slot:empty { display: none; }
  .hub .wantlist { margin: 0; }
  body.sport-alt .hub .wantlist > details.folder { display: none; }
}

/* iPhone app: the page runs under the status bar (viewport-fit=cover), so every
   pop-up card is centred between the status bar and the home bar and never taller
   than that space; otherwise a long card's ✕ sits under the clock and can't be pressed. */
html dialog:modal {
  top: env(safe-area-inset-top, 0px); bottom: env(safe-area-inset-bottom, 0px);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

/* Same look in every sport (alex picked option B, 2026-10-27: "one home for every sport"). On phones every sport has
   the same map sheet (search box, the sport's quick buttons, a Today line) and its tab has the same order: title bar
   with the bell, search, Today, 4 big buttons, a list, what's on the map, then the sport's own cards. One accent colour
   (forest) for what's on; map colours are data and don't change. "html body" beats the CSS the sport files add later. */
.tf-phone, .nav-bell, .peek-today { display: none; }
html body :is(#huntPane, #fishPane) .tf-phone { display: none; }
.legend > summary svg { vertical-align: -3px; margin-right: 5px; color: var(--accent); }
.legend:not([open]) { padding: 7px 12px; border-radius: 999px; }
.legend > summary { font-weight: 800; }
.legend:not([open]) > summary::after { content: ""; }
.mapwrap.is3d details.legend { margin-bottom: 46px; }
.sk-now:not([hidden]) { font: inherit; display: flex; flex-wrap: wrap; gap: 3px 12px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--chip); color: var(--fg); font-size: .82rem; cursor: pointer; }   /* clear of the 3D map's credits line, like the other sports' Key */
@media (max-width: 760px) {
  html body :is(#huntPane, #fishPane) .tf-phone { display: flex; }
  details.legend[open] { max-height: 45vh; overflow: auto; }
  /* the map's sheet: the same in every sport */
  .brand h1 { flex: none; font-size: 0; gap: 0; }
  body.sport-alt .peek-search { display: inline-flex; }
  body.sport-alt .peek-quick { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; }
  .peek-today:not([hidden]) { margin-top: 8px; }
  .peek-today > span:nth-of-type(n+4) { display: none !important; }   /* the map's sheet stays short: 3 facts at most */
  .panel:is(.hub-on, .nav-search, .nav-results, .nav-alt) .brand,
  .panel:is(.hub-on, .nav-search, .nav-results, .nav-alt) .peek-quick,
  .panel:is(.hub-on, .nav-search, .nav-results, .nav-alt) .peek-today,
  .panel.detail-open .peek-today { display: none !important; }
  /* the tab's title bar, with the bell */
  .nav-bell:not([hidden]) { display: grid; place-items: center; margin-left: auto; width: 40px; height: 40px; font-size: 1.05rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); cursor: pointer; }
  /* Today: one line, the same everywhere */
  html body :is(#skNow, #hnNow, #fsNow, #mtNow, .hub-now, .peek-today):not([hidden]) {
    font: inherit; display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: center; width: 100%; box-sizing: border-box; text-align: left;
    padding: 9px 12px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: .86rem; line-height: 1.3; cursor: pointer;
  }
  html body :is(#skNow, #hnNow, #fsNow, #mtNow, .hub-now, .peek-today):not([hidden])::before {
    content: "Today"; flex-basis: 100%; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  }
  html body :is(#skNow, #hnNow, #fsNow, #mtNow, .hub-now, .peek-today) span { display: inline-flex; align-items: center; gap: 5px; }
  html body :is(#skNow, #hnNow, #fsNow, #mtNow, .hub-now, .peek-today) svg { color: var(--accent); flex: none; }
  /* the 4 big buttons */
  .hub-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
  html body :is(#huntPane .hn-actions, #fishPane .fs-actions, #motoPane .mt-actions, #hikePane .hk-actions, #skiPane .sk-views) { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
  html body :is(.hub-tile, #huntPane .hn-act, #fishPane .fs-act, #motoPane .mt-act, #hikePane .hk-act, #skiPane .sk-view) {
    font: inherit; font-size: .78rem; font-weight: 700; line-height: 1.15; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center;
    min-height: 68px; min-width: 0; padding: 8px 3px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); box-shadow: none; cursor: pointer;
  }
  html body :is(.hub-tile, #huntPane .hn-act, #fishPane .fs-act, #motoPane .mt-act, #hikePane .hk-act, #skiPane .sk-view) :is(svg, .ic) { color: var(--accent); font-size: 1.3rem; line-height: 1; }
  html body :is(.hub-tile, #skiPane .sk-view) small { font-weight: 500; font-size: .68rem; color: var(--muted); }
  html body :is(#huntPane .hn-act.on, #fishPane .fs-act.on, #motoPane .mt-act.on, #hikePane .hk-act.on, #skiPane .sk-view[aria-pressed="true"]) { background: var(--accent); border-color: var(--accent); color: #fff; }
  html body :is(#huntPane .hn-act.on, #fishPane .fs-act.on, #motoPane .mt-act.on, #hikePane .hk-act.on, #skiPane .sk-view[aria-pressed="true"]) :is(svg, small, .ic) { color: #fff; }
  .hub .dot { margin: 3px 0; }
  /* what's on the map: chips and views, one style */
  .hub-chips { display: flex; flex-wrap: wrap; gap: 7px; }
  html body :is(.hub-chips button, #huntPane .hn-pill, #fishPane .fs-pill, #motoPane .mt-pill, #hikePane .hk-pill) {
    font: inherit; font-size: .84rem; font-weight: 600; min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  }
  html body :is(#huntPane .hn-pill, #fishPane .fs-pill, #motoPane .mt-pill, #hikePane .hk-pill) svg { color: var(--accent); }
  .hub-chips button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
  html body :is(#huntPane .hn-view, #fishPane .fs-view, #motoPane .mt-view) { border-radius: 12px; background: var(--bg); }
  html body :is(#huntPane .hn-view.on, #fishPane .fs-view.on, #motoPane .mt-view.on) { background: var(--accent); border-color: var(--accent); color: #fff; }
  html body :is(#huntPane .hn-card, #fishPane .fs-card, #motoPane .mt-card, #hikePane .hk-card) header svg { color: var(--accent); }
  /* the list: rows like Find's, with › */
  html body :is(#skiPane #skPlanBtn, #skiPane #skTripBtn, #skiPane .sa-open, #skiPane .hc-open, #skiPane .sc-open, #motoPane #mtSafeRow .mt-pill) {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; box-sizing: border-box; margin: 0; padding: 10px 14px; text-align: left;
    font: inherit; font-size: .95rem; font-weight: 700; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 14px; cursor: pointer;
  }
  html body :is(#skiPane #skPlanBtn, #skiPane #skTripBtn, #skiPane .sa-open, #skiPane .hc-open, #skiPane .sc-open, #motoPane #mtSafeRow .mt-pill)::after { content: "›"; margin-left: auto; color: var(--muted); font-size: 1.4rem; line-height: 1; font-weight: 400; }
  html body #motoPane #mtSafeRow { display: grid; grid-template-columns: 1fr; gap: 10px; }
  html body #motoPane #mtSafeRow .mt-pill svg { color: var(--accent); }
  html body #motoPane .mt-bike, html body #motoPane .mt-bike.setup { border: 1px solid var(--line); border-radius: 14px; background: var(--bg); min-height: 52px; }
  html body #motoPane .mt-bike :is(svg, em) { color: var(--accent); }
  html body #skiPane .sk-acts { display: block; }
  html body #skiPane .sk-acts #skTripBtn { margin-top: 10px; }
  /* the order: search, Today, a card you tapped, 4 buttons, the list, what's on the map, the sport's own cards, the small print */
  html body :is(#skiPane, #huntPane, #fishPane, #motoPane, #hikePane) { display: flex; flex-direction: column; gap: 10px; }
  html body :is(#skiPane, #huntPane, #fishPane, #motoPane, #hikePane) > *, html body #skiPane .sk-listwrap > * { order: 7; margin-top: 0; margin-bottom: 0; }
  html body :is(#skiPane, #huntPane, #fishPane, #motoPane, #hikePane) > [hidden], html body #skiPane .sk-listwrap > [hidden] { display: none; }
  html body #skiPane .sk-listwrap { display: contents; }
  html body :is(#huntPane, #fishPane, #motoPane, #hikePane) > .ps-box, html body #skiPane #skFindForm, html body #skiPane #skPlaceMsg, html body #skiPane #skPlaces { order: 1; }
  html body :is(#skNow, #hnNow, #fsNow, #mtNow, #hkNow, #hikePane #hkHike, #hnSpot, #fsSpot, #skSpot, #skPlan, #skTrip, #skDetail, #skStation) { order: 2; }
  html body :is(#huntPane .hn-actions, #huntPane #hnPins, #fishPane .fs-actions, #motoPane .mt-actions, #hikePane .hk-actions, #skiPane .sk-views, #hnTruck, #fsTruck, #hnHint, #fsHint, #mtHint) { order: 3; }
  html body :is(#skiPane .sk-acts, #skiPane .sa-open, #skiPane .hc-open, #skiPane .sc-open, #motoPane #mtBike, #motoPane #mtSafeRow, #fishPane #fsToday) { order: 4; }
  html body :is(#hnLayers, #fsMap, #mtMap) { order: 5; }
  html body #skiPane #avCard { order: 6; }
  html body #huntPane #hnOffBox { order: 8; }
  html body :is(#huntPane .hn-safe, #fishPane .fs-safe, #motoPane .mt-safe, #hikePane .hk-safe, #skiPane .sk-safe) { order: 9; }
  /* one home for each tool: Record a tour is the Track tab; Save a point, My hunts and the Fishing log are in Saved */
  html body :is(#skiPane #skRecBtn, #skiPane #skSaveBtn, #huntPane .hn-act[data-act="point"], #huntPane .hn-act[data-act="log"], #fishPane .fs-act[data-act="log"], #huntPane #hnMeasure, #huntPane #hnCompass, #huntPane #spBox, #fishPane #spBox, #skiPane #spBox) { display: none !important; }
  html body.sport-hunt .hub #spBox .sp-new { display: inline-block; }
  html body .hub-now { margin: 0; }
  /* the sheet grown over the map (a spot you tapped): the map's own search and Today line sit on top, not twice */
  html body .panel:not(.nav-alt) :is(#huntPane > .ps-box, #fishPane > .ps-box, #motoPane > .ps-box, #hikePane > .ps-box, #skFindForm, #skNow, #hnNow, #fsNow, #mtNow, #hkNow) { display: none; }
  .peek-today .dot, .hub-now .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
  html body :is(.hn-keybtn, .fs-keybtn, .mt-keybtn) svg { color: var(--accent); }
}
/* Skiing's Winter map style (alex 2026-11-03): a 5th tile, only in Skiing */
.map-tools .layers-menu .lm-tiles .t-winter { background: radial-gradient(circle at 30% 30%, #f4f8fb, #b9c9d6 60%, #5d6f7c); color: #15211a; }
body:not(.sport-ski) .layers-menu .lm-tiles .t-winter { display: none; }
body.sport-ski .layers-menu .lm-tiles { grid-template-columns: repeat(5, 1fr); }

/* The status after Forest roads and Wildfires in Layers (alex 2026-11-05): a small live line under the name */
.layers-menu .lm-nm { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.layers-menu .lm-stat { display: block; white-space: normal; overflow-wrap: anywhere; margin-top: 2px; font-size: .78rem; font-weight: 500; line-height: 1.3; color: var(--muted); }
.layers-menu .lm-stat:empty { display: none; }
.layers-menu .lm-stat span { white-space: nowrap; }
.layers-menu .lm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }