:root {
  --bg: #0f1216;
  --bg-2: #161b22;
  --bg-3: #1d242d;
  --line: #29323d;
  --text: #e6ebf2;
  --dim: #8a97a8;
  --dimmer: #5d6a7a;
  --accent: #4ea1ff;
  --done: #35c88a;
  --done-soft: rgba(53, 200, 138, 0.16);
  --danger: #ff6b6b;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --radius: 10px;

  --land: #232b35;
  --coast: #45525f;

  /* Logo tones. Three steps, dark to light, so the mark is a mountain with a
     lit cap rather than a silhouette with a hole in it. The cap only has to
     contrast with the body it sits inside, not with the page, which is what lets
     the same structure work in both themes. */
  --logo-far:   #3d4a58;
  --logo-lit:   #8b9db1;
  --logo-shade: #62748a;
  --logo-cap:   #eef4fa;

  /* Vivid green -> red difficulty ramp. Chosen for how it reads on the map;
     note the hues are near-isoluminant, so on a split ring the two halves are
     told apart mostly by hue rather than lightness. Segment weight (see
     segWeight in app.js) carries the ordering independently of colour. */
  --t1: #7bd3a0;
  --t2: #9dcf6a;
  --t3: #e8c35a;
  --t4: #ef9a52;
  --t5: #e2635f;
}

html[data-theme="light"] {
  --bg: #f6f7f9;
  --bg-2: #ffffff;
  --bg-3: #eef1f5;
  --line: #d9dfe7;
  --text: #171d26;
  --dim: #5d6a7a;
  --dimmer: #8a97a8;
  --accent: #1668d6;
  --done: #16915f;
  --done-soft: rgba(22, 145, 95, 0.12);
  --danger: #cc3a3a;
  --shadow: 0 10px 30px rgba(23, 29, 38, 0.12);
  --land: #e4e9ef;
  --coast: #9dabbb;

  /* Same three steps. The cap is lighter than the body but still darker than the
     page, since a white cap would vanish against a white header. */
  --logo-far:   #aebac7;
  --logo-lit:   #5f7288;
  --logo-shade: #45566a;
  --logo-cap:   #dbe6f1;

  /* Same monotone ramp, inverted: on pale land every colour has to be dark, so
     it runs mid-dark to near-black as difficulty rises. */
  --t1: #23945b;   /* lum 0.223 */
  --t2: #557a14;   /* lum 0.159 */
  --t3: #7f580a;   /* lum 0.115 */
  --t4: #85380c;   /* lum 0.078 */
  --t5: #761713;   /* lum 0.045 */
}

* { box-sizing: border-box; }

/* The `hidden` attribute is only `display: none` in the UA stylesheet, so any
   author `display` rule beats it. Several elements here are both flex containers
   and toggled via `hidden` (the account controls, the share banner, the sync
   line), which silently made them permanently visible. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.brand h1 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Wordmark. Sized off the text so the two stay in proportion if either changes. */
.logo {
  width: auto;
  height: 1.25em;      /* the mark should sit beside the word, not tower over it */
  flex: none;
  overflow: visible;   /* the tick badge touches the top edge of the viewBox */
}
.logo-far   { fill: var(--logo-far); }
.logo-lit   { fill: var(--logo-lit); }     /* left face, catching the light */
.logo-shade { fill: var(--logo-shade); }   /* right face, in shadow */
/* Cap is a lighter tone ON the peak, never the header colour — painting it the
   background punched a hole through the summit and the mountain rendered as a
   trapezoid. Sized to about the top fifth, which is roughly a real snowline. */
.logo-snow  { fill: var(--logo-cap); }
.logo-tick { fill: var(--done); }
.logo-check {
  fill: none;
  stroke: var(--bg-2);
  /* stroke-width lives on the element, not here: it's part of the drawing rather
     than the theming, and scripts/verify-logo.mjs compares it against the
     favicon to stop the two copies of the mark diverging. */
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tagline {
  margin: 2px 0 0;
  color: var(--dim);
  font-size: 12.5px;
}

.scoreboard {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

/* Smaller than it looks like it should be: the ring set the header's height, and
   the header was eating 15% of the viewport before the map appeared. */
.ring-wrap { position: relative; width: 50px; height: 50px; flex: none; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; }   /* thicker to hold up at 50px */
.ring-track { stroke: var(--bg-3); }
.ring-fill {
  stroke: var(--done);
  stroke-linecap: round;
  stroke-dasharray: 263.9;
  stroke-dashoffset: 263.9;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.ring-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 650; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ring-total { color: var(--dimmer); font-weight: 500; font-size: 10.5px; }

.stats {
  display: flex;
  gap: 24px;
  margin: 0;
}
.stats dt { color: var(--dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.stats dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

.theme-toggle {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--dim);
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
}
.theme-toggle:hover { color: var(--text); }

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

.account { display: flex; align-items: center; gap: 8px; }
.account-in { display: flex; align-items: center; gap: 8px; }
.account-email {
  font-size: 12px; color: var(--dim);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- viewing someone else's page ---------- */

.share-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 28px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-2));
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.share-banner a { color: var(--accent); text-decoration: none; }
.share-banner a:hover { text-decoration: underline; }

/* Read-only mode: hide everything that would imply you can edit this. */
body.is-shared .check-big,
body.is-shared #d-date,
body.is-shared #d-notes,
body.is-shared .field:has(#d-date),
body.is-shared .field:has(#d-notes),
body.is-shared .footer-actions,
body.is-shared .account { display: none; }

/* ---------- read-only date and notes on a public page ---------- */

.d-readonly { margin: 0 0 18px; }
.d-readonly-line {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
}
.d-readonly-notes {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-left: 2px solid var(--done);
  background: var(--bg-3);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;      /* keep the author's line breaks */
  overflow-wrap: break-word;  /* and don't let one long word blow out the drawer */
}

/* ---------- /u/<handle> that isn't there ---------- */

.notfound {
  max-width: 460px;
  margin: 80px auto;
  padding: 0 20px;
  text-align: center;
}
.notfound h2 { margin: 0 0 10px; font-size: 24px; letter-spacing: -0.01em; }
.notfound p { margin: 0 0 8px; color: var(--dim); font-size: 14px; }
.notfound-redirect { font-size: 13px; color: var(--dimmer); margin-top: 18px; }
.notfound-redirect a { color: var(--accent); text-decoration: none; }
.notfound-redirect a:hover { text-decoration: underline; }

/* Everything else goes away — a half-rendered empty map behind a "nothing here"
   message reads as a broken page rather than an explained one. */
body.is-notfound .controls,
body.is-notfound main,
body.is-notfound .footer,
body.is-notfound .scoreboard,
body.is-notfound .account,
body.is-notfound .share-banner { display: none !important; }

/* ---------- dialogs ---------- */

.sheet {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--text);
  padding: 0;
  width: min(400px, calc(100vw - 32px));
  box-shadow: var(--shadow);
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.5); }
.sheet form { padding: 24px; }
.sheet h2 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.sheet-lead { margin: 6px 0 20px; font-size: 13px; color: var(--dim); }
.sheet-hint { margin: -10px 0 18px; font-size: 12px; color: var(--dimmer); word-break: break-all; }

.sheet-error {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  border-radius: 8px;
  padding: 9px 12px;
}

.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

.primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  padding: 8px 16px;
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
}
.primary:hover { filter: brightness(1.1); }
.primary:disabled { opacity: 0.55; cursor: default; }

.sheet-switch { margin: 18px 0 0; font-size: 12.5px; color: var(--dim); }
.linky {
  background: none; border: 0; padding: 0;
  color: var(--accent); cursor: pointer; font: inherit; font-size: inherit;
  text-decoration: underline;
}

/* ---------- sync status ---------- */

.sync {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sync.is-loading { color: var(--dim); }
.sync.is-error { color: var(--danger); }

.sync-retry {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  border-radius: 6px;
  padding: 2px 9px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

/* Until progress arrives, 0/50 would read as "you've climbed nothing" — dim the
   scoreboard so it reads as pending rather than as an answer. */
body.is-syncing .scoreboard { opacity: 0.45; transition: opacity 0.2s ease; }

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

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 10px 28px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
}

.tabs { display: flex; gap: 2px; background: var(--bg-3); padding: 3px; border-radius: 8px; }
.tab {
  border: 0; background: transparent; color: var(--dim);
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 550;
}
.tab:hover { color: var(--text); }
.tab.is-active { background: var(--bg-2); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.25); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.filters input, .filters select {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 7px;
  padding: 7px 10px;
  font: inherit; font-size: 13px;
}
.filters input { min-width: 210px; }
.filters input:focus, .filters select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

main { padding: 26px 28px 40px; }
.view { display: none; }
.view.is-active { display: block; }

.empty { color: var(--dim); text-align: center; padding: 40px 0; }
.hint { color: var(--dimmer); font-size: 12px; text-align: center; margin: 18px 0 0; }

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

.mapwrap {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
}

#map {
  display: block;
  width: 100%;
  height: auto;
  cursor: grab;
  touch-action: none;
}
#map.is-panning { cursor: grabbing; }

/* state outlines */
.state {
  fill: var(--land);
  stroke: var(--coast);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill 0.18s ease;
}
.state.is-done { fill: var(--done-soft); stroke: color-mix(in srgb, var(--done) 55%, var(--coast)); }

/* is-hover: pointer is over the state or its marker. is-hot: its panel is open. */
.state.is-hover { fill: color-mix(in srgb, var(--accent) 12%, var(--land)); }
.state.is-hover.is-done { fill: color-mix(in srgb, var(--done) 28%, var(--land)); }
.state.is-hot  { fill: color-mix(in srgb, var(--accent) 22%, var(--land)); }

/* filtered-out states shouldn't swallow clicks meant for the map */
.state.is-dimmed { opacity: 0.35; pointer-events: none; }

/* summit markers */
.pin { cursor: pointer; }
.pin .halo {
  fill: var(--tier-color);
  opacity: 0;
  transition: opacity 0.15s ease;
}
/* the body of the marker; the ring on top carries the difficulty colours */
.pin .disc {
  fill: var(--bg);
  transition: fill 0.18s ease;
}

/* One segment per available difficulty — a full circle when there's only one.
   Kept visible when climbed, so ticking a peak off doesn't erase how you get
   up it. */
.pin .seg {
  fill: none;
  stroke: var(--tier-color);
  /* weight rises with difficulty — a colour-independent second channel */
  stroke-width: var(--seg-weight, 2.6);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.pin:hover .halo { opacity: 0.28; }
.pin:focus-visible { outline: none; }
.pin:focus-visible .halo { opacity: 0.4; }

.pin.is-done .disc { fill: var(--done); }
.pin.is-done .tick { stroke: var(--bg-2); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.pin .tick { display: none; }
.pin.is-done .tick { display: block; }

.pin.is-dimmed { opacity: 0.18; pointer-events: none; }

/* tooltip */
.maptip {
  position: absolute;
  pointer-events: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: var(--shadow);
  z-index: 3;
  max-width: 220px;
  transform: translate(-50%, -100%);
}
.maptip b { display: block; font-size: 13px; }
.maptip .tip-elev { color: var(--dim); font-variant-numeric: tabular-nums; }
.maptip .tip-tier { color: var(--tier-color); }

.mapzoom {
  position: absolute; top: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 2;
}
.mapzoom button {
  width: 28px; height: 28px;
  background: var(--bg); border: 1px solid var(--line); color: var(--dim);
  border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1;
}
.mapzoom button:hover { color: var(--text); border-color: var(--dim); }

.legend {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 18px; margin-top: 18px;
}
.legend span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); }
.legend i {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--tier-color);
  box-sizing: border-box;
}
.legend .sep { width: 1px; height: 14px; background: var(--line); }
.legend .done-key i { background: var(--done); border-color: var(--done); }
.legend-split { width: 15px; height: 15px; overflow: visible; }
.legend-split path { fill: none; stroke-width: 2.6; stroke-linecap: round; }

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

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.table th[data-sort]:hover { color: var(--text); }
.table th.sorted::after { content: " ▲"; font-size: 9px; }
.table th.sorted.desc::after { content: " ▼"; }
.table th.col-check { width: 34px; cursor: default; }
.table td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.table tbody tr:hover { background: var(--bg-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .peak-cell { cursor: pointer; font-weight: 550; }
.table .peak-cell:hover { color: var(--accent); }
.table tr.is-done td:not(.col-check) { color: var(--dim); }
.table tr.is-done .peak-cell { text-decoration: line-through; text-decoration-color: var(--dimmer); }
.table input[type="checkbox"] { accent-color: var(--done); width: 16px; height: 16px; cursor: pointer; }

.tierpill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--tier-color);
  border: 1px solid var(--tier-color);
  white-space: nowrap;
}
/* separates the easiest and hardest pills for peaks with a spread of options */
.pill-sep { color: var(--dimmer); font-size: 10px; margin: 0 4px; }

/* ---------- profile ---------- */

.profile { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 5px; }
.bar-row {
  display: grid;
  grid-template-columns: 150px 1fr 74px;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.bar-row:hover { background: var(--bg-2); }
.bar-row .who { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .track {
  display: block;
  height: 14px;
  background: var(--bg-3);
  border-radius: 4px;
  overflow: hidden;
}
.bar-row .fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--tier-color);
  opacity: 0.55;
  transition: width 0.4s ease;
}
.bar-row.is-done .fill { opacity: 1; background: var(--done); }
.bar-row .ft { font-size: 12px; text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }
.bar-row.is-done .who::before { content: "✓ "; color: var(--done); }

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

.footer {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 16px 28px;
  border-top: 1px solid var(--line);
  color: var(--dimmer); font-size: 12px;
}
.footer-actions { margin-left: auto; display: flex; gap: 8px; }
.ghost {
  background: transparent; border: 1px solid var(--line); color: var(--dim);
  padding: 6px 12px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 12px;
}
.ghost:hover { color: var(--text); border-color: var(--dim); }
.ghost.danger:hover { color: var(--danger); border-color: var(--danger); }

/* ---------- drawer ---------- */

.drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 20;
}

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: var(--bg-2);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 26px 26px 34px;
  overflow-y: auto;
  z-index: 21;
  animation: slide-in 0.2s ease;
}
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } }

.drawer-close {
  position: absolute; top: 14px; right: 16px;
  background: transparent; border: 0; color: var(--dim);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.drawer-close:hover { color: var(--text); }

.d-state { margin: 0; color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.drawer h2 { margin: 6px 0 2px; font-size: 24px; letter-spacing: -0.01em; }
.d-elev { margin: 0; font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.d-elev-m { font-size: 14px; font-weight: 500; color: var(--dim); }

.d-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.badge {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-3); color: var(--dim); border: 1px solid var(--line);
}
.badge.tier { color: var(--tier-color); border-color: var(--tier-color); background: transparent; }

.d-access {
  color: var(--dim); font-size: 13.5px;
  background: var(--bg-3); border-radius: var(--radius);
  padding: 12px 14px; margin: 0 0 20px;
}

/* ---------- standard route card ---------- */

.d-route {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 18px;
}
.d-route h3 {
  margin: 0 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
  font-weight: 600;
}
.route-name { margin: 0; font-size: 14.5px; font-weight: 550; }
.route-tier-line { margin: 7px 0 0; }

.route-figures { display: flex; gap: 28px; margin: 14px 0 0; }
.route-figures dt {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--dim);
}
.route-figures dd {
  margin: 3px 0 0; font-size: 17px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.route-start { margin: 14px 0 0; font-size: 12.5px; color: var(--dim); }
.route-links { display: flex; gap: 16px; margin-top: 12px; font-size: 12.5px; }
.route-links a { color: var(--accent); text-decoration: none; }
.route-links a:hover { text-decoration: underline; }

/* longer ways up — same information, lighter weight than the primary card */
.d-alts { margin: 0 0 18px; }
.d-alts h3 {
  margin: 0 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
  font-weight: 600;
}
.d-alts ul { list-style: none; margin: 0; padding: 0; }
.d-alts li {
  border-left: 2px solid var(--line);
  padding: 2px 0 2px 12px;
  margin-bottom: 12px;
}
.d-alts li:last-child { margin-bottom: 0; }
.alt-name { margin: 0; font-size: 13.5px; font-weight: 550; }
.alt-tag {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--dim); border: 1px solid var(--line); border-radius: 3px;
  padding: 1px 4px; vertical-align: 1px;
}
.alt-figures {
  margin: 5px 0 0; font-size: 12.5px; color: var(--dim);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.alt-links { display: flex; gap: 14px; margin: 5px 0 0; font-size: 12px; }
.alt-links a { color: var(--accent); text-decoration: none; }
.alt-links a:hover { text-decoration: underline; }

/* mountaineering peaks: say why there's no route here rather than showing one */
.d-caution {
  font-size: 12.5px;
  color: var(--text);
  background: color-mix(in srgb, var(--t5) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--t5) 45%, transparent);
  border-radius: var(--radius);
  padding: 11px 14px;
  margin: 0 0 18px;
}

/* highpoints that sit on a state line — explains a marker hugging the border */
.d-online {
  color: var(--dim); font-size: 12.5px;
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 10px;
  margin: 0 0 12px;
}

.check-big {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; font-weight: 550;
  margin-bottom: 16px;
}
.check-big:hover { border-color: var(--done); }
.check-big input { accent-color: var(--done); width: 18px; height: 18px; cursor: pointer; }
.check-big:has(input:checked) { border-color: var(--done); background: var(--done-soft); }

.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%;
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 14px;
  resize: vertical;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.d-links { display: flex; gap: 16px; margin-top: 22px; font-size: 13px; }
.d-links a { color: var(--accent); text-decoration: none; }
.d-links a:hover { text-decoration: underline; }
.d-coords { color: var(--dimmer); font-size: 11px; margin-top: 10px; }

/* ---------- responsive ---------- */

@media (max-width: 780px) {
  .topbar, .controls, main, .footer { padding-left: 16px; padding-right: 16px; }
  .topbar { gap: 12px; padding-top: 10px; padding-bottom: 10px; }

  /* Everything stacks at this width, so the header was pushing the map most of
     the way down the screen. The tagline is decorative and the first to go. */
  .tagline { display: none; }

  .scoreboard { margin-left: 0; width: 100%; gap: 14px; }
  .ring-wrap { width: 44px; height: 44px; }

  /* One scrolling row rather than wrapping onto three lines. */
  .stats {
    gap: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .stats::-webkit-scrollbar { display: none; }
  .stats > div { flex: none; }
  .filters { margin-left: 0; width: 100%; }
  .filters input { min-width: 0; flex: 1; }
  .bar-row { grid-template-columns: 96px 1fr 64px; }
  .table th:nth-child(6), .table td:nth-child(6),
  .table th:nth-child(7), .table td:nth-child(7) { display: none; }
}