/* sledding.me: "ice & orange".
   One shape (a block with two opposite corners chipped like cut ice), one
   accent (the orange of the sled), navy ink, pale ice surfaces.

   Sections: tokens, banner, header, map, phone sheet, ZIP box, list cards,
   a hill's page, footer, Sources & thanks page, small and short screens. */

@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-wght.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  /* surfaces: snow and ice */
  --snow: #f3f8fb;         /* page and sheet */
  --paper: #ffffff;
  --ice: #e4f1f8;
  --frost: #c9e2ef;
  --seam: #e3eef5;         /* thin dividers */
  --line: rgba(15, 34, 56, 0.06);   /* hairlines and card edges */
  --rim: rgba(15, 34, 56, 0.12);    /* the soft edge on white buttons and tags */
  --frost-line: rgba(150, 195, 222, 0.42);   /* a pale blue ring around inputs and ice-blue blocks */
  /* ink */
  --ink: #0f2238;          /* navy, 15:1 on snow */
  --muted: #52677c;        /* 5.7:1 on snow */
  --navy: #0f2238;         /* badges, selected chips, logo square */
  /* the one accent: the orange of the sled */
  --accent: #c2410c;       /* buttons; white text 5:1 */
  --blaze: #e8622a;        /* the sled itself (UI only) */
  --blaze-ink: #c2410c;    /* focus rings, links, "the one you picked", 4.9:1 on snow */
  /* heads-up boxes */
  --caution: #f2b705;
  --caution-wash: #fff6dc;
  --caution-ink: #7a4205;  /* 7:1 on the wash */

  --cut: 9px;              /* size of the chipped "cut ice" corners */
  --map-frost: rgba(243, 248, 251, 0.75);
  /* depth: a few soft shadows stacked, tinted navy, never black. Blocks with chipped corners
     are clipped, so they cast theirs through a parent's filter (--lift on the list, a .lift
     wrapper on a hill page's blocks); round things use --float. */
  --lift: drop-shadow(0 1px 1px rgba(15, 34, 56, 0.05)) drop-shadow(0 3px 7px rgba(15, 34, 56, 0.07)) drop-shadow(0 12px 24px rgba(15, 34, 56, 0.09));
  --lift-hi: drop-shadow(0 1px 1px rgba(15, 34, 56, 0.06)) drop-shadow(0 6px 12px rgba(15, 34, 56, 0.09)) drop-shadow(0 18px 32px rgba(15, 34, 56, 0.12));
  --lift-sm: drop-shadow(0 1px 1px rgba(15, 34, 56, 0.06)) drop-shadow(0 3px 6px rgba(15, 34, 56, 0.07));
  --float: 0 1px 2px rgba(15, 34, 56, 0.08), 0 4px 10px rgba(15, 34, 56, 0.08), 0 14px 28px rgba(15, 34, 56, 0.08);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* steepness tints, gentle to steep: ice blue, sand, clay. Soft on purpose; the symbol
     and the word say the same thing, so nobody has to read the color. */
  --sev-gentle: #d3eaf5; --sev-gentle-hi: #f2fafd; --sev-gentle-edge: rgba(70, 140, 180, 0.18); --sev-gentle-pin: #e1f0f8;
  --sev-mixed: #f1e2bd;  --sev-mixed-hi: #fffaea;  --sev-mixed-edge: rgba(176, 134, 30, 0.22);  --sev-mixed-pin: #f8eed0;
  --sev-steep: #efcdc0;  --sev-steep-hi: #fff4ef;  --sev-steep-edge: rgba(176, 88, 55, 0.22);   --sev-steep-pin: #f6dacf;
  --sev-unknown: #e3e9ee; --sev-unknown-hi: #f6f8fa; --sev-unknown-edge: rgba(100, 120, 140, 0.16); --sev-unknown-pin: #eef2f5;
  --display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: var(--snow);
  color: var(--ink);
  font: 16px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; }
:focus-visible { outline: 3px solid var(--blaze-ink); outline-offset: 2px; }

/* text for screen readers only */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(290px, 392px) 1fr;
}

/* the shape: top-left and bottom-right corners chipped. Size with --cut.
   (clip-path cuts off outside shadows and outlines, so blocks keep their
   edge as an inset shadow, their focus ring inside, and cast their shadow
   from the parent.) */
.card, .btn, .near__input, .near__seg, .board, .heads, .wx, .legend, .empty, .thanks li, .src-hill, .note {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* ---------- "still being built" banner (temporary) ---------- */

.devnote {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 0 14px;
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(4px, env(safe-area-inset-right));
  background: var(--navy);
  color: #e8f1f7;
  font-size: 0.8rem;
  line-height: 1.3;
  z-index: 4;
}
.devnote-off .devnote { display: none; }
.devnote__text { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 0; }
.devnote__text::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 2px 0 4px; border-radius: 50%; background: #ff8a4c; }
.devnote__text strong { color: #fff; font-family: var(--display); font-weight: 650; }
/* the two lines share one spot and fade into each other */
.devnote__msgs { display: grid; }
.devnote__msg { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s 0.4s; }
.devnote__msg.is-on { opacity: 1; visibility: visible; transition: opacity 0.4s; }
.devnote__msg a { color: #fff; font-family: var(--display); font-weight: 650; text-decoration: underline #ff8a4c 2px; text-underline-offset: 3px; }
.devnote__msg a:hover { color: #ffd3bd; }
.devnote__msg a:focus-visible { outline: 2px solid #ff8a4c; outline-offset: 2px; }
.devnote__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #c9d8e4;
  cursor: pointer;
}
.devnote__close:hover { background: rgba(255, 255, 255, 0.08); }
.devnote__close svg { width: 13px; height: 13px; }
.wordmark:focus { outline: none; }   /* only focused by script, after the banner closes */

/* ---------- side panel and header ---------- */

.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--snow);
  border-right: 1px solid #e1eef5;
  box-shadow: 6px 0 24px rgba(15, 34, 56, 0.06);
  z-index: 2;
}

/* pale glacier ice with a fine icicle fringe */
.masthead {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  padding: 20px 22px 24px;
  padding-top: max(20px, env(safe-area-inset-top));
  background: linear-gradient(180deg, #e6f4fa 0%, #c3e4f3 100%);
  color: var(--ink);
}
.masthead::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 9px;
  pointer-events: none;
  background: linear-gradient(180deg, #c3e4f3, rgba(195, 228, 243, 0.2));
  --icicles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10'%3E%3Cpath d='M0 0h120v1h-5l-2 7-2-7h-11l-1.5 4-1.5-4h-14l-2 9-2-9h-12l-1.5 5-1.5-5h-15l-2 6-2-6h-10l-1.5 4-1.5-4h-13l-2 8-2-8H0Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--icicles) 0 0 / 120px 10px repeat-x;
          mask: var(--icicles) 0 0 / 120px 10px repeat-x;
}
/* the logo and name go back to the start */
.masthead__home { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.masthead__home:focus-visible { outline-offset: 4px; border-radius: 6px; }
@media (hover: hover) {
  .masthead__mark { transition: transform 0.2s var(--ease); }
  .masthead__home:hover .masthead__mark { transform: rotate(-4deg) scale(1.04); }
}
.masthead__mark { width: 48px; height: 48px; flex: none; }
.masthead__text { min-width: 0; }
.wordmark { margin: 0; font: 800 1.9rem/1 var(--display); letter-spacing: -0.03em; }
.wordmark__tld { color: var(--accent); }   /* ".me", Maine's postal code */
.masthead p { margin: 6px 0 0; font: 600 0.74rem/1.2 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: #3d5770; }

/* one scrolling area holds the list or a hill's page, then the footer */
.scroller {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* keep a card reached with Tab clear of the sticky footer below it (only while
   focus is in the list or detail, so focusing the footer link doesn't scroll) */
.scroller:has(.view :focus) { scroll-padding-bottom: calc(7.5rem + env(safe-area-inset-bottom)); }

.view { flex: 1 0 auto; padding: 16px 16px 24px; }

/* ---------- map ---------- */

.map-wrap { position: relative; min-height: 0; }

/* while tiles load (or if they can't), a snowy backdrop with faint contour lines */
#map {
  position: absolute;
  inset: 0;
  background-color: #edf2f6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240' fill='none' stroke='%2314213a' stroke-opacity='.08' stroke-width='1.3'%3E%3Cpath d='M0 20C70 10 170 32 240 20S410 30 480 20'/%3E%3Cpath d='M0 60C90 46 150 68 240 60S390 74 480 60'/%3E%3Cpath d='M0 100C60 92 180 114 240 100S420 108 480 100'/%3E%3Cpath d='M0 140C100 128 160 150 240 140S380 152 480 140'/%3E%3Cpath d='M0 180C80 171 140 193 240 180S400 189 480 180'/%3E%3Cpath d='M0 220C50 208 190 229 240 220S430 232 480 220'/%3E%3C/svg%3E");
}

/* OSM's default colors are busy; take some saturation out so the pins lead
   and the map reads a little wintry. Labels keep their lightness contrast. */
.leaflet-tile-pane { filter: saturate(0.5) brightness(1.03); }

/* Leaflet clips an outline on the map itself, so draw the focus ring on top */
#map:focus-visible { outline: none; }
#map:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 1001; border: 3px solid var(--blaze-ink); pointer-events: none; }

/* frost creeping in from the edges of the map */
.map-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 450;
  pointer-events: none;
  box-shadow: inset 0 0 22px 2px var(--map-frost);
}

.leaflet-container { font-family: var(--text); }
.leaflet-container .leaflet-control-attribution {
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.leaflet-control-attribution a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--frost); text-underline-offset: 2px; }

.leaflet-bar { border: 0 !important; border-radius: 0; box-shadow: inset 0 0 0 1px var(--line), var(--float) !important; background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.leaflet-bar a, .leaflet-bar a:hover { width: 36px; height: 36px; line-height: 34px; background: transparent; color: var(--ink); font: 500 20px/34px var(--display); }
.leaflet-bar a:first-child { border-bottom: 1px solid var(--line); }
.leaflet-bar a:hover { background: rgba(228, 241, 248, 0.8); }
.leaflet-bar a:focus-visible { outline: 3px solid var(--blaze-ink); outline-offset: -3px; }

/* the steepness key: the same symbols the pins use */
.legend {
  --cut: 7px;
  position: absolute;
  left: 12px;
  bottom: 30px;
  z-index: 500;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 13px;
  max-width: calc(100% - 24px);
  padding: 7px 13px;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
          backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--line);
  font: 600 0.8rem/1.2 var(--display);
  pointer-events: none;
}
.legend__item { display: inline-flex; align-items: center; gap: 5px; }
.legend__sym { display: grid; padding: 2px; border-radius: 4px; background: var(--sev-gentle); }
.legend__sym--mixed { background: var(--sev-mixed); }
.legend__sym--steep { background: var(--sev-steep); }
.legend__sym--unknown { background: var(--sev-unknown); }
.legend__sym svg { display: block; }
.legend__title { color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

/* the Slopes button: top right of the map on a computer, clear of the zoom buttons
   and the key (app.js swaps in the topo map). It is a toggle, so pressed = navy.
   The note under it says what the map is for and how far to trust it. */
.slopes {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  filter: var(--lift-sm);
}
.slopes__btn {
  --cut: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px 0 9px;
  border: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--rim), inset 0 -2px 0 var(--ice);
  color: var(--ink);
  font: 700 0.82rem/1.2 var(--display);
  cursor: pointer;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.slopes__btn svg { width: 18px; height: 18px; flex: none; }
.slopes__btn:hover { background: var(--ice); }
.slopes__btn[aria-pressed="true"] { background: var(--navy); color: #fff; box-shadow: none; }
.slopes__btn:focus-visible { outline: 3px solid var(--blaze-ink); outline-offset: -3px; }
.slopes__btn[aria-pressed="true"]:focus-visible { outline-color: #fff; }
.slopes__note {
  --cut: 9px;
  position: relative;
  width: min(250px, calc(100vw - 24px));
  padding: 9px 34px 10px 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.38;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.slopes__note[hidden] { display: none; }
.slopes__note p { margin: 0; }
.slopes__note strong { font-weight: 700; }
.slopes__short { display: none; }
.slopes__x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 30px;
  height: 30px;
  border: 0;
  background: none;
  color: var(--muted);
  font: 400 20px/1 var(--display);
  cursor: pointer;
}
.slopes__x:hover { color: var(--ink); }
.slopes__x:focus-visible { outline: 3px solid var(--blaze-ink); outline-offset: -3px; }

/* a pin: a chipped ice-block sign with the hill's symbol, pointing at the
   spot. The marker box (44x54) is larger than the drawing so it is easy to
   tap; the point at the bottom is the spot. */
.pin, .cluster { background: none; border: 0; }
.pin__body, .cluster__body {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 1px 1px rgba(15, 34, 56, 0.16)) drop-shadow(0 4px 6px rgba(15, 34, 56, 0.16));
  transition: transform 0.15s var(--ease);
}
.pin__body { transform-origin: 22px 49px; }
/* the steepness, under the pin (phones, while a hill's page is open) */
.pin__label {
  display: none;
  position: absolute;
  top: 53px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--sev-gentle-pin);
  box-shadow: inset 0 0 0 1px var(--rim), 0 1px 3px rgba(15, 34, 56, 0.18);
  color: var(--ink);
  font: 700 0.76rem/1.3 var(--display);
  white-space: nowrap;
  pointer-events: none;
}
.pin--mixed .pin__label { background: var(--sev-mixed-pin); }
.pin--steep .pin__label { background: var(--sev-steep-pin); }
.pin--unknown .pin__label { background: var(--sev-unknown-pin); color: var(--muted); }
.pin__svg { position: absolute; left: 2px; top: 4px; display: block; }
.pin__shape { fill: var(--sev-gentle-pin); stroke: #5d7389; stroke-width: 1.7; stroke-linejoin: round; }
.pin--mixed .pin__shape { fill: var(--sev-mixed-pin); }
.pin--steep .pin__shape { fill: var(--sev-steep-pin); }
.pin--unknown .pin__shape { fill: var(--sev-unknown-pin); }
.pin.is-hover .pin__body { transform: scale(1.18); filter: drop-shadow(0 2px 3px rgba(15, 34, 56, 0.22)) drop-shadow(0 8px 12px rgba(15, 34, 56, 0.2)); }
.pin.is-hover .pin__shape { stroke: #2f4a63; stroke-width: 2.2; }
.pin.is-active .pin__body { transform: scale(1.22); }
.pin.is-active .pin__shape { stroke: var(--blaze-ink); stroke-width: 2.6; }
.pin:focus-visible, .cluster:focus-visible { z-index: 2000 !important; outline: 3px solid var(--blaze-ink); outline-offset: -1px; border-radius: 10px; }

/* the name that shows when a pin is hovered (computers) */
.leaflet-tooltip.pin-tip { padding: 7px 11px 8px; border: 0; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--float); color: var(--ink); white-space: nowrap; }
.leaflet-tooltip-top.pin-tip::before { border-top-color: #fff; }
.pin-tip__name { display: block; font: 700 0.88rem/1.2 var(--display); }
.pin-tip__meta { display: block; margin-top: 2px; color: var(--muted); font: 500 0.76rem/1.2 var(--text); }

.cluster__body { transform-origin: 50% 50%; }
.cluster:hover .cluster__body { transform: scale(1.07); }
.cluster__back { fill: #fff; stroke: #5d7389; stroke-width: 1.6; stroke-linejoin: round; opacity: 0.92; }
.cluster__front { fill: var(--navy); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.cluster__n { fill: #fff; font: 700 20px var(--display); }

.you { background: none; border: 0; }
/* the ZIP code someone entered: the familiar blue "you are here" dot */
.you__dot {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #2a6fdb;
  box-shadow: 0 0 0 1px rgba(15, 34, 56, 0.4), 0 0 0 7px rgba(42, 111, 219, 0.18), 0 1px 4px rgba(20, 33, 58, 0.4);
}

/* ---------- controls ---------- */

.btn {
  --cut: 7px;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 10px 14px;
  border: 0;
  background: linear-gradient(180deg, #d14a13, #bb3d0b);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -2px 0 rgba(0, 0, 0, 0.16);
  font: 650 1.02rem/1.15 var(--display);
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.15s;
}
.btn:hover { background: linear-gradient(180deg, #db5219, #c2410c); }
.btn:active { transform: scale(0.98); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn:focus-visible { outline: 3px solid var(--blaze-ink); outline-offset: -6px; }
.btn--light { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--frost-line), inset 0 -2px 0 var(--ice); }
.btn--light:hover { background: #f6fbfe; }
.btn--light:active { box-shadow: inset 0 0 0 1px var(--frost-line); }

/* ---------- ZIP code box ---------- */

.near { margin: 0 0 4px; }
.near__row { display: flex; gap: 8px; filter: var(--lift-sm); }
.near__field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.near__pin { position: absolute; z-index: 1; left: 15px; width: 13px; height: 17px; fill: var(--accent); pointer-events: none; }
.near__input {
  --cut: 7px;
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 8px 46px 8px 40px;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--frost-line);
  color: var(--ink);
  font: 650 1.15rem/1 var(--display);   /* 16px or more, or iPhones zoom in on focus */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  transition: box-shadow 0.15s;
}
.near__input::placeholder { color: #6f8498; font-weight: 500; letter-spacing: 0.01em; }
.near__input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blaze-ink); }
.near__input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--blaze-ink); }
.near__clear {
  position: absolute;
  z-index: 1;
  right: 2px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.near__clear:hover { color: var(--ink); }
.near__clear svg { width: 15px; height: 15px; }
.near .btn { flex: none; min-width: 64px; min-height: 52px; }
.near__input.is-loc::placeholder { color: var(--ink); opacity: 1; letter-spacing: 0.01em; }
.near__loc {
  margin: 4px 2px 0;
  padding: 8px 0;
  min-height: 40px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 650 0.9rem/1.2 var(--display);
  text-decoration: underline;
  text-decoration-color: var(--blaze);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.near__loc { display: inline-flex; align-items: center; gap: 7px; }
.near__loc svg { flex: none; width: 15px; height: 15px; color: var(--blaze-ink); }
.near__loc:hover { color: var(--blaze-ink); }
.near__loc:focus-visible { outline: 3px solid var(--blaze-ink); outline-offset: 2px; border-radius: 3px; }
.near__loc[hidden] { display: none; }
.near__msg { margin: 8px 2px 0; font-size: 0.88rem; }
.near__msg:empty { display: none; }
.near__msg.is-error { color: #b23a0b; font-weight: 700; }   /* 6:1 on white */

/* how far: appears once a ZIP code is in */
.near__radius { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.near__within { margin: 0 0 0 2px; font: 700 0.7rem/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.near__seg { --cut: 7px; flex: 1; display: flex; min-width: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--frost-line); }
.near__seg label { position: relative; flex: 1 1 0; min-width: 0; }
.near__seg label + label { border-left: 1px solid var(--frost-line); }
.near__seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.near__seg label span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 4px;
  font: 600 0.92rem/1 var(--display);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.near__seg input:checked + span { background: var(--navy); color: #fff; }
.near__seg input:focus-visible + span { outline: 3px solid var(--blaze-ink); outline-offset: -5px; position: relative; z-index: 1; }

.count { margin: 14px 2px 10px; font-size: 0.9rem; line-height: 1.4; color: var(--muted); }
.count strong { color: var(--ink); font: 700 0.95rem var(--display); }

.near__note { margin: 14px 4px 0; font-size: 0.78rem; color: var(--muted); }
.near__note a { color: inherit; text-underline-offset: 2px; }
#snow-note { font-size: 0.7rem; line-height: 1.3; }

.empty { --cut: 12px; margin: 4px 0 0; padding: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--frost-line); }
.empty p { margin: 0 0 12px; }
.empty .btn { width: 100%; }

/* ---------- list ---------- */

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* a hill page's blocks (app.js wraps each one) */
.lift { filter: var(--lift); }
.cards li { filter: var(--lift); transition: filter 0.18s var(--ease); }
@media (hover: hover) { .cards li:hover { filter: var(--lift-hi); } }

.card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 76px;
  padding: 12px 14px 12px 12px;
  border: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfe 100%);
  box-shadow: inset 0 0 0 1px var(--line);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s var(--ease);
}
.card:hover { transform: translateY(-1px); }
.card:active { transform: scale(0.985); }
.card.is-current { box-shadow: inset 0 0 0 2px var(--blaze-ink); }
.card:focus-visible { outline: 3px solid var(--blaze-ink); outline-offset: -6px; }

/* a hill's slope symbol, bare: the steepness tag next to it carries the color */
.tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
}
.tile .glyph { display: block; }
.tile--lg { width: 62px; height: 62px; }

.card__text { flex: 1; min-width: 0; }
.card__name { display: block; font: 700 1.1rem/1.25 var(--display); letter-spacing: 0.012em; }
.card__meta { display: block; margin: 2px 0 0; font-size: 0.875rem; line-height: 1.3; color: var(--muted); }
/* steepness tag: a soft fill in the same ice blue, sand and clay as the pins, with a quiet edge so it still reads differently from a snow grade */
.steep {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--rim);
  color: var(--ink);
  font: 650 0.8rem/1.3 var(--display);
  white-space: nowrap;
}
.steep--gentle { background: var(--sev-gentle); box-shadow: inset 0 0 0 1px var(--sev-gentle-edge); }
.steep--mixed { background: var(--sev-mixed); box-shadow: inset 0 0 0 1px var(--sev-mixed-edge); }
.steep--steep { background: var(--sev-steep); box-shadow: inset 0 0 0 1px var(--sev-steep-edge); }
.steep--unknown { color: var(--muted); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
/* steepness nobody has confirmed yet: a dashed tag, to match the dashed slope drawing */
.steep--ask { color: var(--muted); font-weight: 600; box-shadow: none; padding: 1px 8px; border: 1px dashed rgba(82, 103, 124, 0.5); }
.steep--link { color: var(--blaze-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.steep--link:focus-visible { outline: 3px solid var(--blaze-ink); outline-offset: 2px; }
.card__nomap { color: var(--accent); font-weight: 600; }

/* the snow grade: a small pill, same shape everywhere it shows. The icon and the
   words carry the grade, so color is only a second cue. */
.card__snow { display: flex; align-items: center; }
.card__snow.is-loading, .hero__snow.is-loading { min-height: 24px; min-width: 96px; }   /* hold the room until the answer comes */
.snowgrade {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 6px;
  border-radius: 4px;
  font: 650 0.8rem/1.3 var(--display);
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.snowgrade svg { flex: none; display: block; }
.snowgrade--good { background: #1b6a9f; color: #fff; }
.snowgrade--thin { background: var(--ice); color: #1d5f8a; box-shadow: inset 0 0 0 1px var(--frost-line); }
.snowgrade--melting { background: var(--caution-wash); color: var(--caution-ink); box-shadow: inset 0 0 0 1px rgba(160, 100, 10, 0.16); }
.snowgrade--none { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }

/* right side of a card: miles (once a ZIP code is in) with the snow grade under it */
.card .tile { width: 42px; height: 42px; }
.card .tile .glyph { width: 32px; height: auto; }
.card { gap: 10px; padding-right: 10px; }
.card__side { flex: none; align-self: flex-start; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.card__side .card__snow.is-loading { min-width: 84px; }

/* miles, once a ZIP code is in */
.card__dist {
  flex: none;
  padding: 4px 9px;
  background: var(--navy);
  color: #fff;
  font: 650 0.82rem/1.2 var(--display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-radius: 4px;
}

/* chevron */
.card__go {
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 4px 0 -2px;
  border-top: 2px solid #8aa0b4;
  border-right: 2px solid #8aa0b4;
  transform: rotate(45deg);
  transition: transform 0.15s var(--ease);
}
.card:hover .card__go { transform: translateX(2px) rotate(45deg); }

/* cards settle in when the list loads or re-sorts */
@media (prefers-reduced-motion: no-preference) {
  .cards li { animation: settle 0.42s var(--ease) both; }
  .cards li:nth-child(2) { animation-delay: 0.03s; }
  .cards li:nth-child(3) { animation-delay: 0.06s; }
  .cards li:nth-child(4) { animation-delay: 0.09s; }
  .cards li:nth-child(5) { animation-delay: 0.12s; }
  .cards li:nth-child(n+6) { animation-delay: 0.15s; }
  @keyframes settle { from { opacity: 0; transform: translateY(6px); } }
}

/* ---------- a hill's page ---------- */

/* Buttons come in three levels so the page reads at a glance: orange is the one thing to
   do (Directions), a white button with a soft edge goes somewhere else (All hills, Back
   to the map, Slopes), and a plain link with an orange underline is the fine print
   (footer, sources). The Show map bar on a phone is just quiet text with an arrow. */
.back {
  --cut: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0;
  padding: 0 18px 0 11px;
  border: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--rim), inset 0 -2px 0 var(--ice);
  color: var(--ink);
  font: 700 1rem/1 var(--display);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.15s;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.back:hover { background: var(--ice); }
.back:active { transform: scale(0.98); }
.back:focus-visible { outline: 3px solid var(--blaze-ink); outline-offset: -6px; }
.back svg { width: 18px; height: 18px; flex: none; }
.back__label { display: inline-block; max-width: 6rem; overflow: hidden; white-space: nowrap; transition: max-width 0.2s var(--ease), opacity 0.15s; }
/* the wrapper casts the shadow (the button is clipped); on a phone it also stays put (see below) */
.backbar { width: fit-content; margin: 2px 0 12px; filter: var(--lift-sm); }
.backbar { display: flex; align-items: center; gap: 8px; }
.back--next { padding: 0 11px 0 14px; max-width: 100%; min-width: 0; text-align: left; }
.back__stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 0.95rem; line-height: 1; }
.back__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 600 0.66rem/1.1 var(--display); }
.back__chev { display: inline-flex; flex: none; }
.back--next[hidden] { display: none; }

.hero { margin: 0 0 14px; }
.hero__top { display: flex; align-items: center; gap: 14px; }
.hero__text { min-width: 0; }
.hero__title { margin: 0; font: 760 1.7rem/1.08 var(--display); letter-spacing: -0.028em; outline: none; overflow-wrap: break-word; }
.hero__town { margin: 4px 0 0; color: var(--muted); font-size: 0.98rem; line-height: 1.3; }
.hero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 13px 0 0; }
.hero__chips .steep, .hero__chips .snowgrade { font-size: 0.86rem; }
.hero__snow { display: flex; align-items: center; }
.hero__dist { margin: 8px 0 0; color: #1d5f8a; font: 600 0.88rem/1.3 var(--display); font-variant-numeric: tabular-nums; }

.label { margin: 0; font: 700 0.7rem/1.2 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* a hazard, in its own box so it is read first */
.heads {
  --cut: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
  padding: 14px 16px;
  background: var(--caution-wash);
  box-shadow: inset 0 0 0 1px rgba(160, 100, 10, 0.16);
}
.heads__icon { flex: none; margin-top: 1px; }
.heads__icon svg { display: block; width: 26px; height: 26px; }
.heads__title { margin: 0; font: 700 0.7rem/1.2 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--caution-ink); }
.heads__text { margin: 3px 0 0; font-weight: 600; line-height: 1.4; }

/* the forecast: a quiet ice-blue block. Its lines come from the National
   Weather Service after the page loads; the link works without them. */
.wx {
  --cut: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
  padding: 13px 16px 11px;
  background: var(--ice);
  box-shadow: inset 0 0 0 1px var(--frost-line);
}
.wx__icon { flex: none; margin-top: 1px; color: var(--navy); }
.wx__icon svg { display: block; width: 26px; height: 26px; }
.wx__main { min-width: 0; }
.wx__title { margin: 0; font: 700 0.7rem/1.2 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.wx__lines p { margin: 3px 0 0; line-height: 1.4; }
.wx__now { font-weight: 650; font-variant-numeric: tabular-nums; }
.wx__snow { color: var(--ink); }
.wx__lines .wx__past { margin-top: 8px; }
.wx.is-waiting .wx__lines { min-height: 126px; }   /* the size of a full forecast, so nothing jumps */
.wx__wait { display: grid; gap: 8px; padding: 6px 0 2px; }
.wx__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* grey bars where the forecast lines will go, so the box keeps its size */
.wx__skel {
  display: block;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(15, 34, 56, 0.06) 0%, rgba(15, 34, 56, 0.12) 50%, rgba(15, 34, 56, 0.06) 100%) 0 0 / 200% 100%;
  animation: wx-shimmer 1.5s linear infinite;
}
.wx__skel:nth-child(2) { width: 62%; }
.wx__skel:nth-child(3) { width: 90%; }
.wx__skel:nth-child(4) { width: 72%; }
.wx__skel:nth-child(5) { width: 48%; }
@keyframes wx-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .wx__skel { animation: none; } }
.wx__credit { margin: 4px 0 0; color: var(--muted); font-size: 0.7rem; line-height: 1.3; }
.wx__credit a { white-space: nowrap; color: var(--muted); text-decoration-color: var(--blaze); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.wx__credit a:focus-visible { outline: 3px solid var(--blaze-ink); outline-offset: 2px; border-radius: 3px; }
.wx__link { margin: 5px 0 0; font-size: 0.9rem; line-height: 1.35; }
.wx__link a { color: var(--ink); font-weight: 650; text-decoration-color: var(--blaze); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.wx__link a:focus-visible { outline: 3px solid var(--blaze-ink); outline-offset: 2px; border-radius: 3px; }

/* the facts: only what is known, one block per kind */
.board {
  --cut: 12px;
  margin: 0 0 14px;
  padding: 2px 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
.sec { padding: 16px 0 17px; }
.sec > .label { display: flex; align-items: center; gap: 8px; color: #3b556e; font-size: 0.74rem; }
.sec > .label::before { content: ""; flex: none; width: 14px; height: 3px; background: var(--blaze); }
.sec + .sec { border-top: 1px solid var(--seam); }
.sec > p, .sec > .bullets { margin: 8px 0 0; font-size: 1.02rem; line-height: 1.5; }
.bullets { list-style: none; padding: 0; display: grid; gap: 8px; }
.bullets li { position: relative; padding-left: 17px; }
.bullets li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--blaze); }

/* what we don't know yet: one quiet line */
.open { margin: 0 0 12px; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.open p { position: relative; margin: 0; padding-left: 22px; }
.open p + p { margin-top: 8px; }
.open p::before {            /* an empty dashed ring: nothing confirmed here yet */
  content: "";
  position: absolute;
  left: 2px;
  top: 0.32em;
  width: 11px;
  height: 11px;
  border: 1.5px dashed #6f8498;
  border-radius: 50%;
}
.open a { color: var(--ink); font-weight: 650; text-decoration-color: var(--blaze); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

.more { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 6px 0 0; padding-top: 4px; border-top: 1px solid var(--seam); font-size: 0.94rem; }
.more a { display: inline-flex; align-items: center; min-height: 44px; }
.more a, .safety a { color: var(--ink); font-weight: 650; text-decoration-color: var(--blaze); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.more a:focus-visible, .safety a:focus-visible, .open a:focus-visible { outline: 3px solid var(--blaze-ink); outline-offset: 2px; border-radius: 3px; }

/* directions: two buttons, with a "navigate" arrow so they read as directions */
.directions { margin: 0 0 16px; }
.directions .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.directions__buttons { display: flex; gap: 10px; filter: var(--lift-sm); }
.directions .btn { padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.directions .btn::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 2.5 3 10.2l7.2 2.6 2.6 7.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 2.5 3 10.2l7.2 2.6 2.6 7.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- footer ---------- */

.safety {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  border-top: 1px solid #e1eef5;
  background: #eaf3f8;
  color: #3d5770;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
}
.safety a[aria-current="page"] { color: var(--muted); text-decoration: none; }
.safety__links { display: flex; flex-wrap: wrap; gap: 0 22px; padding-left: 28px; }   /* lines up with the text after the warning sign */
.safety a { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
@media (pointer: fine) { .safety a { min-height: 30px; } }   /* a mouse needs less room than a thumb */
.safety > span { display: flex; align-items: center; gap: 10px; }
.safety > span::before {   /* a yellow warning diamond */
  content: "!" / "";   /* decorative: screen readers skip it */
  flex: none;
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  margin: 0 3px;
  background: var(--caution);
  color: var(--ink);
  font: 900 9px/1 var(--display);
  transform: rotate(45deg);
}

/* ---------- phones: full-screen map, with the list and hill pages in a sheet
   that is either open ("list") or down to a bar ("map"); app.js moves it ---------- */

.sheet__handle { display: none; }
.sheet__safe { position: absolute; visibility: hidden; height: 0; padding-bottom: env(safe-area-inset-bottom); pointer-events: none; }

@media (max-width: 760px) and (min-height: 500px) {
  .app {
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    --cover: 0px;   /* how much of the map the sheet covers; app.js keeps it current */
  }
  .panel { display: contents; }

  .devnote { font-size: 0.82rem; }
  .devnote__text { padding: 3px 0; }
  .devnote__close { width: 40px; height: 40px; }

  /* the header: half height, since the map is the page */
  .masthead { grid-row: 1; z-index: 1100; padding: 9px 16px 12px; padding-left: max(16px, env(safe-area-inset-left)); }
  .masthead__home { gap: 10px; }
  .masthead__mark { width: 32px; height: 32px; }
  .wordmark { font-size: 1.3rem; }
  .masthead p { margin-top: 2px; font-size: 0.68rem; letter-spacing: 0.12em; }
  .masthead::after { height: 8px; -webkit-mask-size: 100px 8px; mask-size: 100px 8px; }

  .map-wrap { grid-row: 2; grid-column: 1; }

  .scroller {
    grid-row: 2;
    grid-column: 1;
    align-self: end;
    z-index: 1001;
    height: 56%;
    background: linear-gradient(180deg, #fff 0 1px, #d3e7f2 1px 2px, #f7fbfd 2px, var(--snow) 120px);
    box-shadow: 0 -1px 2px rgba(15, 34, 56, 0.04), 0 -5px 12px rgba(15, 34, 56, 0.06), 0 -16px 36px rgba(15, 34, 56, 0.11);
    transition: height 0.38s var(--ease);
  }
  /* a hill's page is open with the sheet up: the header, the banner and the key step aside,
     the map shrinks to a window of 26% of the screen (190 to 230px, app.js zooms it in on
     the pin and the pin carries a label), and the page gets the rest. Tuck the sheet away
     to look at the map and they come back. "All hills" at the top of the page, or the
     browser's Back, returns to the list. */
  .app.is-detail[data-sheet="list"] .masthead, body:has(.app.is-detail[data-sheet="list"]) .devnote, .app.is-detail[data-sheet="list"] .legend { display: none; }
  .app.is-detail[data-sheet="list"] .scroller { height: calc(100% - clamp(190px, 26%, 230px)); }
  .app.is-detail[data-sheet="list"] .slopes__full { display: none; }   /* the small window gets the short note */
  .app.is-detail[data-sheet="list"] .slopes__short { display: inline; }
  .app.is-detail .pin.is-active .pin__label { display: block; }
  /* the back bar stays under the sheet's handle while a hill page scrolls, and shrinks to
     just its arrow once the page has moved (app.js adds is-compact) */
  .app.is-detail .backbar { position: sticky; top: 54px; z-index: 5; }
  .back--next { display: none; }
  .backbar .back { transition: transform 0.15s var(--ease), background 0.15s, padding 0.2s var(--ease), gap 0.2s var(--ease); }
  .backbar.is-compact .back { gap: 0; padding: 0 13px; }
  .backbar.is-compact .back__label { max-width: 0; opacity: 0; }
  /* "map": only the bar at the top of the sheet shows */
  .app[data-sheet="map"] .scroller { height: calc(48px + env(safe-area-inset-bottom)); overflow: hidden; }
  .app[data-sheet="map"] #detail .directions { visibility: hidden; }
  /* while dragging, the sheet and map controls follow the finger exactly */
  .app.is-dragging .scroller, .app.is-dragging .leaflet-bottom, .app.is-dragging .slopes { transition: none; }
  .app.is-dragging, .app.is-dragging * { cursor: grabbing; user-select: none; -webkit-user-select: none; }

  /* the bar: says what a tap does (Show map / Show list), or drag it */
  .sheet__handle {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 6px 16px 0;
    border: 0;
    background: linear-gradient(180deg, #fff 0 1px, #d3e7f2 1px 2px, #f7fbfd 2px);
    color: var(--muted);
    font: 650 0.86rem/1 var(--display);
    letter-spacing: 0.01em;
    cursor: grab;
    touch-action: none;
  }
  .sheet__grip { position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #bcd3e1; }
  .sheet__label { display: inline-flex; align-items: center; gap: 7px; }
  .sheet__label::after {      /* a chevron pointing where the sheet will go */
    content: "";
    width: 7px; height: 7px;
    margin-top: -4px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 0.3s var(--ease), margin 0.3s var(--ease);
  }
  .app[data-sheet="map"] .sheet__label::after { margin-top: 3px; transform: rotate(-135deg); }
  .sheet__handle:focus-visible { outline: 3px solid var(--blaze-ink); outline-offset: -3px; }

  .view { padding-top: 6px; }
  .near__input, .near .btn { min-height: 50px; }

  .safety { position: static; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .scroller:has(.view :focus) { scroll-padding-bottom: 0; }

  /* the key sits at the top of the map; the map credit rides on top of the sheet */
  .legend { top: 8px; right: 8px; left: auto; bottom: auto; max-width: calc(100% - 16px); gap: 4px 12px; padding: 6px 11px; }
  .leaflet-bottom { bottom: var(--cover); transition: bottom 0.3s var(--ease); }
  /* the Slopes button rides on top of the sheet, above the map credit; its note opens above it */
  .slopes { top: auto; right: auto; left: 8px; bottom: calc(var(--cover) + 30px); flex-direction: row; align-items: flex-end; transition: bottom 0.3s var(--ease); }
  .slopes__note { width: min(280px, calc(100vw - 118px)); padding: 7px 30px 8px 11px; font-size: 0.72rem; line-height: 1.3; }
  .slopes__btn { min-height: 44px; }

  .hero__title { font-size: 1.6rem; }

  /* Directions stay pinned to the bottom of the sheet, where a thumb reaches
     them (app.js puts them last on phones) */
  #detail .directions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 16px -16px 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(247, 251, 253, 0.86);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
            backdrop-filter: blur(14px) saturate(1.5);
  }
}

/* ---------- narrow windows and tablets ---------- */

@media (min-width: 761px) and (max-width: 900px) {
  .app { grid-template-columns: minmax(290px, 340px) 1fr; }
  .masthead { padding-left: 18px; padding-right: 18px; }
  .masthead__home { gap: 12px; }
  .masthead__mark { width: 42px; height: 42px; }
  .wordmark { font-size: 1.7rem; }
  .masthead p { font-size: 0.68rem; }
  .legend { gap: 4px 10px; padding: 6px 11px; font-size: 0.76rem; }
}

/* short screens, such as a phone held sideways: tighter header, and the
   footer scrolls with the content */
@media (max-height: 499px) {
  .app { grid-template-columns: minmax(280px, 340px) 1fr; }
  .masthead { padding: 9px 16px 12px; padding-left: max(16px, env(safe-area-inset-left)); }
  .masthead__home { gap: 10px; }
  .masthead__mark { width: 34px; height: 34px; }
  .wordmark { font-size: 1.4rem; }
  .masthead p { margin-top: 3px; font-size: 0.68rem; }
  .safety { position: static; }
  .scroller:has(.view :focus) { scroll-padding-bottom: 0; }
  .legend { bottom: 28px; gap: 4px 9px; padding: 5px 10px; font-size: 0.76rem; }
}
/* short and narrow (a small phone held sideways): the map credit wraps to
   two lines, so lift the key above it */
@media (max-height: 499px) and (max-width: 620px) {
  .legend { bottom: 46px; }
}

/* narrow phones: the symbols and their words carry the key */
@media (max-width: 430px) {
  .legend .legend__title { display: none; }
}

/* touch screens pinch to zoom, so the +/- buttons only take room */
@media (pointer: coarse) {
  .leaflet-control-zoom { display: none; }
  .legend { max-width: calc(100% - 16px); }
}
/* ...and the Slopes button gets a finger-sized target */
@media (pointer: coarse) and (min-width: 761px) {
  .slopes__btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Sources & thanks page (sources.html) ---------- */

body.page { display: block; height: auto; min-height: 100vh; }
.page .masthead { padding-left: max(22px, calc(50% - 340px)); padding-right: max(22px, calc(50% - 340px)); }
.page__main { max-width: 724px; margin: 0 auto; padding: 22px 22px 40px; }
.page .back { margin: 0 0 18px; }
.page__title { margin: 0 0 10px; font: 750 2rem/1.1 var(--display); letter-spacing: -0.025em; }
.page__lead { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.6; color: #2b445c; max-width: 60ch; }
.page__section { margin-top: 34px; }
.page__section > .label { margin: 0 0 12px; }
.page__note { margin: -4px 0 14px; color: var(--muted); font-size: 0.92rem; }

.thanks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.thanks li {
  --cut: 6px;
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 8px 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
.thanks__who { font-weight: 650; }
.thanks__n { color: var(--muted); font-size: 0.82rem; }

.src-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.src-list > li { filter: var(--lift); }
.src-hill {
  --cut: 10px;
  padding: 16px 18px 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  scroll-margin-top: 16px;
}
.src-hill:target { box-shadow: inset 0 0 0 2px var(--blaze-ink); }
.src-hill__name { margin: 0; font: 700 1.15rem/1.2 var(--display); letter-spacing: -0.01em; }
.src-hill__name a { text-decoration: none; }
.src-hill__name a:hover { text-decoration: underline; text-decoration-color: var(--blaze); }
.src-hill__town { margin: 2px 0 6px; color: var(--muted); font-size: 0.9rem; }
.src-hill__links { margin: 0; padding: 0; list-style: none; font-size: 0.95rem; }
.src-hill__links li + li { border-top: 1px solid var(--seam); }
.src-hill__links a {
  display: flex; align-items: center; min-height: 44px; padding: 6px 0;
  text-decoration-color: #c9dbe7; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.src-hill__links a:hover { text-decoration-color: currentColor; }
.src-hill__pin { margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--seam); color: var(--muted); font-size: 0.84rem; }

/* What's new (whatsnew.html): one card per dated entry, newest first */
.notes { display: grid; gap: 12px; filter: var(--lift); }
.page__section.notes { margin-top: 22px; }
.page__lead.page__lead--fine { font-size: 0.9rem; line-height: 1.45; }
.note {
  --cut: 10px;
  padding: 14px 16px 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  scroll-margin-top: 16px;
}
.note:target { box-shadow: inset 0 0 0 2px var(--blaze-ink); }
.note__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 4px; }
.note__title { margin: 0; font: 700 1.05rem/1.2 var(--display); letter-spacing: -0.01em; }
.note__aside { margin: 2px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.4; }
.note__cat { margin: 12px 0 5px; color: var(--blaze-ink); font: 700 0.68rem/1.2 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
.note .bullets { gap: 5px; color: #2b445c; font-size: 0.82rem; line-height: 1.4; }
.note .bullets li { padding-left: 14px; }
.note .bullets li::before { width: 5px; height: 5px; }
.note .bullets strong { color: var(--ink); font-weight: 650; }
.note .bullets--sub { gap: 3px; margin-top: 4px; font-size: 0.8rem; }
.note .bullets--sub li { padding-left: 13px; }
.note .bullets--sub li::before { top: 0.62em; width: 4px; height: 4px; background: none; box-shadow: inset 0 0 0 1.4px #8fa5b8; }

.credits { margin: 0; padding: 0 0 0 18px; color: #2b445c; font-size: 0.95rem; line-height: 1.6; }
.credits li + li { margin-top: 6px; }
.credits a { text-decoration-color: #c9dbe7; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

.page .safety { position: static; padding-left: max(22px, calc(50% - 340px)); padding-right: max(22px, calc(50% - 340px)); }

@media (max-width: 760px) {
  .page__main { padding: 14px 16px 32px; }
  .page__title { font-size: 1.7rem; }
  .page__lead { font-size: 1rem; }
  .note { padding: 12px 14px 12px; }
  .page .masthead { padding-left: max(16px, env(safe-area-inset-left)); padding-right: 16px; }
  .page .safety { padding-left: max(16px, env(safe-area-inset-left)); padding-right: 16px; }
}

/* ---------- page not found (404.html) ---------- */

.notfound { padding-top: 44px; }
.notfound .page__lead { margin-bottom: 22px; }
.notfound .btn { flex: none; min-width: 200px; }

/* ---------- full list (no map) and the map-state bar ---------- */

/* Full list / Show map: its own row, right above the Go button */
.viewrow { display: flex; justify-content: flex-end; margin: -8px 0 2px; }
.viewlink {
  flex: none;
  min-height: 40px;
  margin: 0 -6px 0 0;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 700 0.84rem/1 var(--display);
  text-decoration: underline var(--accent) 2px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.viewlink:hover { color: var(--blaze-ink); }
.viewlink:focus-visible { outline: 3px solid var(--blaze-ink); outline-offset: 1px; }

/* the list gets the whole page */
.app[data-view="list"] { grid-template-columns: 1fr; }
@media not all and (max-width: 760px) and (min-height: 500px) {
  .app[data-view="list"] .map-wrap { display: none; }
  .app[data-view="list"] .view { width: 100%; max-width: 1100px; margin: 0 auto; }
  .app[data-view="list"] .cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .app[data-view="list"] .near { max-width: 520px; }
  .app[data-view="list"] .near__note, .app[data-view="list"] .empty { max-width: 520px; }
}

/* the map-state bar: All hills on the left, Next closest on the right, the sheet's own label
   ("Show details") in the middle. Phones only. */
.sheet__side { display: none; }
@media (max-width: 760px) and (min-height: 500px) {
  .app[data-view="list"] .map-wrap { visibility: hidden; }
  .app[data-view="list"] .sheet__handle { display: none; }   /* the "Show map" link in the list does its job */
  .app[data-view="list"][data-sheet="list"] .scroller { height: 100%; }
  .app.is-detail[data-sheet="map"] .sheet__side {
    display: block;
    position: sticky;
    top: 0;
    z-index: 7;
    height: 0;
    margin-top: -48px;   /* sits over the handle's bar */
  }
  .app.is-detail[data-sheet="map"] .sheet__handle { font-size: 0.8rem; }
  .sheet__act {
    position: absolute;
    top: 0;
    width: 33%;
    height: 48px;
    padding: 6px 10px 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: 700 0.82rem/1.15 var(--display);
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .sheet__act--back { left: 0; flex-direction: row; align-items: center; gap: 4px; padding-left: max(8px, env(safe-area-inset-left)); }
  .sheet__act--next { right: 0; align-items: flex-end; text-align: right; padding-right: max(10px, env(safe-area-inset-right)); }
  .sheet__act:active { color: var(--blaze-ink); }
  .sheet__act:focus-visible { outline: 3px solid var(--blaze-ink); outline-offset: -3px; }
  .sheet__main { display: inline-flex; align-items: center; gap: 4px; }
  .sheet__sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 600 0.66rem/1.2 var(--display); }
  .sheet__arrow { flex: none; width: 7px; height: 7px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); }
  .sheet__arrow--back { border-width: 0 0 2px 2px; margin-right: 2px; transform: rotate(45deg); }
}

/* LOGO SLED HOVER: the sled in the logo rides down the hill and comes back.
   Hover on desktop, keyboard focus anywhere; nothing on touch or with reduced motion.
   The rest pose repeats the sled group's transform attribute in index.html,
   sources.html and whatsnew.html, so change both together. Delete this block to remove. */
@keyframes sled-ride {
  0%   { transform: translate(30.4px, 43.2px) rotate(-26deg) scale(1.18) translate(-17px, -12px); animation-timing-function: ease-out; }
  10%  { transform: translate(32.4px, 42.2px) rotate(-25deg) scale(1.18) translate(-17px, -12px); animation-timing-function: ease-in; }
  30%  { transform: translate(17px, 50.6px) rotate(-27deg) scale(1.18) translate(-17px, -12px); animation-timing-function: linear; }
  42%  { transform: translate(5px, 56.2px) rotate(-19deg) scale(1.18) translate(-17px, -12px); animation-timing-function: linear; opacity: 1; }
  54%  { transform: translate(-20px, 59.5px) rotate(-2deg) scale(1.18) translate(-17px, -12px); opacity: 1; }
  55%  { transform: translate(-20px, 59.5px) rotate(-2deg) scale(1.18) translate(-17px, -12px); opacity: 0; }
  57%  { transform: translate(86px, 19px) rotate(-20deg) scale(1.18) translate(-17px, -12px); opacity: 0; }
  58%  { transform: translate(86px, 19px) rotate(-20deg) scale(1.18) translate(-17px, -12px); opacity: 1; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  88%  { transform: translate(29.6px, 43.6px) rotate(-26.5deg) scale(1.18) translate(-17px, -12px); animation-timing-function: ease-in-out; }
  100% { transform: translate(30.4px, 43.2px) rotate(-26deg) scale(1.18) translate(-17px, -12px); }
}
.masthead__mark g[clip-path] > g { transform-origin: 0 0; transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .masthead__home:focus-visible .masthead__mark g[clip-path] > g { animation: sled-ride 1.5s both; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .masthead__home:hover .masthead__mark g[clip-path] > g { animation: sled-ride 1.5s both; }
}
/* END LOGO SLED HOVER */

/* ---- no-script hill list (index.html SEO:LIST, made by proj/tools/update-seo.py) ---- */
.noscript-list { padding: 4px 2px 12px; font-size: 0.9rem; line-height: 1.45; }
.noscript-list ul { margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 6px; }

/* one-time disclosure before Directions opens a maps app */
.disclose {
  width: min(92vw, 420px);
  max-height: 88vh;
  padding: 22px 20px 18px;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--float);
  overflow: auto;
}
.disclose::backdrop { background: rgba(15, 34, 56, 0.5); }
.disclose__title { margin: 0 0 10px; font: 700 1.25rem/1.2 var(--display); letter-spacing: 0.01em; }
.disclose p { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.5; color: #2b3f55; }
.disclose .disclose__fine { font-size: 0.8rem; color: var(--muted); }
.disclose a { color: var(--blaze-ink); text-underline-offset: 2px; }
.disclose__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.disclose__actions .btn { flex: none; width: 100%; }

/* ---- hill pages and Hills by town (hills/, made by proj/tools/update-seo.py) ---- */
.page .hero__chips { margin: 12px 0 18px; }
.hill-cta { margin: 0 0 18px; filter: var(--lift-sm); }
.page .heads { margin-bottom: 14px; }
.hill-links { margin: 0; padding: 0; list-style: none; font-size: 0.98rem; }
.hill-links li + li { border-top: 1px solid var(--seam); }
.hill-links a {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 650;
  text-decoration-color: var(--blaze); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.hill-links__tag { margin-left: 6px; color: var(--muted); font-size: 0.85rem; }
.hub .src-hill__name { margin-bottom: 4px; }

/* ---- Share (share.js): a button on hill pages, a link-style button on a hill's page in the map ---- */
.hill-cta { display: flex; gap: 10px; max-width: 480px; }
.hill-cta .share { flex: 0 0 auto; padding-left: 16px; padding-right: 18px; }
.share svg, .more__share svg { display: block; width: 18px; height: 18px; flex: none; }
.more__share {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--ink); font: inherit; font-weight: 650;
}
.more__share .share__label { text-decoration: underline var(--blaze) 1.5px; text-underline-offset: 3px; }
.more__share:hover { color: var(--blaze-ink); }
.more__share:focus-visible { outline: 3px solid var(--blaze-ink); outline-offset: 2px; border-radius: 3px; }