/* Layout: one-screen app. Sidebar of ski areas on the left, shaded-relief map on the right; stacks map-first on phones. */
:root {
  --bg: #eceee9;
  --panel: #f8f9f6;
  --ink: #18201d;
  --muted: #58635e;
  --line: #d3d8d0;
  --accent: #c2362b;      /* cable-car red: selection, links */
  --ok: #23774a;          /* launch at the lift */
  --ok-soft: #dbeadf;
  --warn: #a96d07;        /* launch nearby, no lift */
  --warn-soft: #f3e6c6;
  --none: #b0524a;        /* nothing listed: muted brick, softer than --accent */
  --none-soft: #f3dfdc;
  --off: #e2e5e0;         /* unused wind-rose sectors */
  --launch: #1d5f8a;      /* launch triangles */
  --lift: #262c2f;
  --water: #5f87a4;
  --water-fill: #a8c2d3;
  --halo: rgba(248, 249, 246, .92);
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131919; --panel: #1a2121; --ink: #e5ebe7; --muted: #99a6a0; --line: #2c3634;
    --accent: #e8665a; --ok: #52c287; --ok-soft: #1c3727; --warn: #e2a93f; --warn-soft: #3a2f16;
    --none: #d0756b; --none-soft: #3a2422; --off: #252d2c; --launch: #78b8e4; --lift: #e9ece7;
    --water: #7ea6c4; --water-fill: #2d4555; --halo: rgba(19, 25, 25, .9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131919; --panel: #1a2121; --ink: #e5ebe7; --muted: #99a6a0; --line: #2c3634;
  --accent: #e8665a; --ok: #52c287; --ok-soft: #1c3727; --warn: #e2a93f; --warn-soft: #3a2f16;
  --none: #d0756b; --none-soft: #3a2422; --off: #252d2c; --launch: #78b8e4; --lift: #e9ece7;
  --water: #7ea6c4; --water-fill: #2d4555; --halo: rgba(19, 25, 25, .9);
  color-scheme: dark;
}

html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font-body); }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--accent); text-underline-offset: 2px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.app { display: grid; grid-template-columns: minmax(340px, 410px) 1fr; height: 100%; }
.side { background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; display: flex; flex-direction: column; min-width: 0; }
#map { min-width: 0; height: 100%; background: var(--bg); }

.head { padding: 22px 20px 6px; }
.eyebrow { font: 600 12px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
h1 { font: 700 34px/1 var(--font-display); letter-spacing: -.01em; margin: 8px 0 8px; text-wrap: balance; }
.lede { margin: 0; color: var(--muted); max-width: 60ch; }

.summary { padding: 14px 20px 4px; }
.bar { display: flex; gap: 2px; height: 12px; }
.bar span { flex: 1; border-radius: 1px; }
.bar .s-lift { background: var(--ok); }
.bar .s-near { background: var(--warn); }
.bar .s-none { background: var(--none); opacity: .75; }
.counts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.counts b { font: 700 18px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 3px; }

.filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 20px 10px; position: sticky; top: 0; background: var(--panel); z-index: 2; border-bottom: 1px solid var(--line); }
.chip { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 4px 11px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.chip .n { font-variant-numeric: tabular-nums; opacity: .7; }
.toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.toggle input { accent-color: var(--accent); margin: 0; }

.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.lift { background: var(--ok); }
.dot.near { background: var(--warn); }
.dot.none { background: var(--none); }

#list { list-style: none; margin: 0; padding: 4px 8px 8px; }
.row { width: 100%; display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 12px; padding: 9px 12px; border: 0; background: transparent; text-align: left; cursor: pointer; border-radius: 6px; }
.row:hover { background: var(--bg); }
.row.is-sel { background: var(--bg); box-shadow: inset 3px 0 0 var(--accent); }
.row-name { font: 600 17px/1.15 var(--font-display); display: block; }
.row-place { font-size: 12.5px; color: var(--muted); display: block; }
.row-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.src { font: 700 11px/1 var(--font-display); letter-spacing: .06em; padding: 3px 5px 2px; border-radius: 3px; border: 1px solid currentColor; }
.src.dhv { color: var(--ok); }
.src.pge { color: var(--muted); border-style: dashed; }
.group-label { font: 600 12px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 14px 12px 6px; }

#detail { margin: 12px 14px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 14px 16px 16px; }
.back { border: 0; background: transparent; padding: 0; font-size: 13px; color: var(--muted); cursor: pointer; }
.back:hover { color: var(--ink); }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px 4px; border-radius: 3px; margin-top: 10px; }
.pill.lift { background: var(--ok-soft); color: var(--ok); }
.pill.near { background: var(--warn-soft); color: var(--warn); }
.pill.none { background: var(--none-soft); color: var(--none); }
#detail h2 { font: 700 28px/1.05 var(--font-display); margin: 8px 0 2px; text-wrap: balance; }
.d-place { color: var(--muted); margin: 0 0 10px; }
.d-note { margin: 0 0 12px; max-width: 60ch; }
.d-h { font: 600 12px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
.launches { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.launch { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.launch-name { font: 600 16px/1.2 var(--font-display); }
.launch-facts { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.launch-facts b { color: var(--ink); font-weight: 600; }
.dhv-mark { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--font-display); letter-spacing: .06em; color: var(--ok); background: var(--ok-soft); }
.dhv-mark.near { color: var(--warn); background: var(--warn-soft); }
.d-fine { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.rose { display: block; }
.rose .w { fill: var(--off); stroke: var(--panel); stroke-width: .6; }
.rose .w.on { fill: var(--ok); }
.rose.near .w.on { fill: var(--warn); }
.rose .ring { fill: none; stroke: var(--line); }
.rose text { font: 600 7px var(--font-display); fill: var(--muted); }
.d-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; font-size: 14px; }
.d-lifts { font-size: 13px; color: var(--muted); }

.foot { margin-top: auto; padding: 16px 20px 22px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); }
.foot p { margin: 0 0 8px; max-width: 62ch; }

/* map furniture */
.leaflet-container { background: var(--bg); font-family: var(--font-body); }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--panel); color: var(--ink); border-color: var(--line); }
.leaflet-control-attribution { background: var(--halo) !important; color: var(--muted); font-size: 10.5px; }
.leaflet-control-attribution a { color: var(--muted); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--ink); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.4; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.pop-name { font: 600 16px/1.15 var(--font-display); display: block; margin-bottom: 2px; }
.river { stroke: var(--water); fill: none; }
.lake { stroke: var(--water); fill: var(--water-fill); fill-opacity: .9; }
.lift-line { stroke: var(--lift); stroke-opacity: .55; }
.lift-line.is-sel { stroke: var(--accent); stroke-opacity: 1; }
.connector { stroke: var(--accent); stroke-dasharray: 3 4; fill: none; }
.town { color: var(--ink); font: 600 11px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 0 3px var(--halo), 0 0 3px var(--halo), 0 0 6px var(--halo); opacity: .75; pointer-events: none; }
.town.big { font-size: 12.5px; opacity: .9; }
.z-lt10 .town:not(.big) { display: none; }
.pin { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,.35); cursor: pointer; transition: transform .12s; }
.pin.lift { background: var(--ok); }
.pin.near { background: var(--warn); }
.pin.none { background: var(--none); }
.pin svg { width: 70%; height: 70%; }
.pin.is-sel { box-shadow: 0 0 0 3px var(--accent), 0 1px 4px rgba(0,0,0,.4); transform: scale(1.15); }
.pin.is-off { opacity: .18; }
.leaflet-tooltip.pin-label { background: var(--halo); color: var(--ink); border: 0; box-shadow: none; font: 600 13px/1 var(--font-display); padding: 3px 5px; }
.leaflet-tooltip.pin-label::before { display: none; }
.z-lt12 .leaflet-tooltip.pin-label:not(.is-sel) { display: none; }
.tri { width: 100%; height: 100%; display: block; overflow: visible; }
.tri path { fill: var(--launch); stroke: var(--panel); stroke-width: 1.2; }
.tri.hot path { fill: var(--accent); stroke: var(--panel); }
.launches-off .tri:not(.hot) { display: none; }
.legend { background: var(--halo); color: var(--ink); padding: 8px 10px; border-radius: 6px; font-size: 12px; line-height: 1.2; display: grid; gap: 5px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.legend div { display: flex; align-items: center; gap: 8px; }
.legend .lg-pin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--panel); flex: none; }
.legend svg { width: 12px; height: 12px; flex: none; overflow: visible; }

@media (max-width: 760px) {
  html, body { height: auto; }
  .app { display: flex; flex-direction: column; height: auto; }
  .side { display: contents; }
  .head { order: 1; background: var(--panel); padding: 18px 16px 12px; }
  #map { order: 2; height: 58vh; min-height: 320px; }
  #detail { order: 3; margin: 12px 16px 4px; }
  .summary { order: 4; background: var(--panel); padding: 14px 16px 4px; }
  .filters { order: 5; padding: 12px 16px 10px; }
  #list { order: 6; background: var(--panel); padding: 4px 4px 8px; }
  .foot { order: 7; background: var(--panel); padding: 16px; }
  h1 { font-size: 30px; }
  .toggle { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .pin { transition: none; } }