/* Chamaps — style.css · tokens from DESIGN_SPEC.md §2 (glass shell, Phase 5) + shared components.
 * Layout of the shell (strip, tiles, tools, scrubber, mode panel, mobile islands) lives in shell.css. */
:root {
  /* glass */
  --glass-bg: rgba(12, 18, 26, 0.42);
  --glass-bg-strong: rgba(12, 18, 26, 0.82);
  --glass-solid: #0f151c;
  --glass-blur: 14px;
  --glass-line: rgba(255, 255, 255, 0.16);
  --glass-line-strong: rgba(255, 255, 255, 0.28);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.10);

  /* text */
  --text: #f4f7fa;
  --text-2: rgba(244, 247, 250, 0.72);
  --muted: rgba(244, 247, 250, 0.50);
  --text-shadow: none;

  /* accent (Mint) */
  --accent: #6bf5c1;
  --accent-hover: #8dfad2;
  --accent-ink: #06251a;
  --accent-soft: rgba(107, 245, 193, 0.16);

  /* semantic */
  --danger: #ff6b6b; --warn: #ffb454; --ok: #6bf5c1;

  /* sport colours — fixed for everyone */
  --c-skitour: #6bf5c1;
  --c-ski: #5ad1ff;
  --c-freeride: #a78bff;
  --c-hike: #ffd166;
  --c-mtb: #c8ff3d;
  --c-climb: #ff7eb6;
  --c-run: #ffb454;
  --c-other: #9aa7b4;
  --c-mine: #ffffff;
  /* trip-day colours */
  --day-1: #6bf5c1; --day-2: #35d6ff; --day-3: #a78bff; --day-4: #ffd166; --day-5: #c8ff3d; --day-6: #ff7eb6;

  /* shape */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);

  /* type */
  --font-display: 'General Sans', 'Satoshi', system-ui, sans-serif;
  --font-body: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* layout */
  --inset: 12px;
  --strip-h: 40px;
  --tile-w: 300px;
  --panel-w: 380px;
  --scrub-h: 32px;
  --dock-h: 56px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 200ms;

  /* ---- aliases so community.css / trips.css / routes.css / intel.css / record.css keep working ---- */
  --bg-0: var(--glass-solid);
  --bg-1: var(--glass-bg-strong);
  --bg-2: rgba(255, 255, 255, 0.06);
  --bg-3: rgba(255, 255, 255, 0.12);
  --line: var(--glass-line);
  --line-strong: var(--glass-line-strong);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --sidebar-w: var(--panel-w);
  --cmty-w: var(--panel-w);
  --topbar-h: var(--strip-h);
}

/* ---------- §7 personalisation ---------- */
html[data-accent="ice"]    { --accent:#35d6ff; --accent-hover:#6be1ff; --accent-ink:#03202b; --accent-soft:rgba(53,214,255,.16); }
html[data-accent="cobalt"] { --accent:#4d8dff; --accent-hover:#79a8ff; --accent-ink:#ffffff; --accent-soft:rgba(77,141,255,.18); }
html[data-accent="violet"] { --accent:#a78bff; --accent-hover:#bda9ff; --accent-ink:#1a0f3a; --accent-soft:rgba(167,139,255,.18); }
html[data-accent="lime"]   { --accent:#c8ff3d; --accent-hover:#d6ff6b; --accent-ink:#1d2a02; --accent-soft:rgba(200,255,61,.16); }
html[data-glass="clear"] {
  --glass-bg: rgba(255, 255, 255, 0.12);
  --glass-bg-strong: rgba(12, 18, 26, 0.60);
  --glass-line: rgba(255, 255, 255, 0.28);
  --glass-line-strong: rgba(255, 255, 255, 0.40);
  --text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
html[data-glass="cool"] {
  --glass-bg: rgba(14, 22, 48, 0.40);
  --glass-bg-strong: rgba(14, 22, 48, 0.74);
  --glass-solid: #0e1630;
}

/* ---------- glass recipe (§2) ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-highlight), var(--shadow);
  border-radius: var(--r-lg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
.glass--strong { background: var(--glass-bg-strong); }
html.no-blur .glass, html.no-blur .glass--strong { background: var(--glass-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }

html, body { height: 100%; overflow: hidden; background: var(--bg-0); color: var(--text); font-family: var(--font-body); font-size: 14px; }

.app { position: fixed; inset: 0; }
.map { position: absolute; inset: 0; background: #0a0d10; }
.maplibregl-ctrl-attrib { font: 11px/1.3 var(--font-body) !important; background: var(--glass-bg-strong) !important; color: var(--text-2) !important; backdrop-filter: blur(var(--glass-blur)) saturate(140%); }
.maplibregl-ctrl-attrib a { color: var(--text-2) !important; }
.maplibregl-ctrl-bottom-right { right: 0; bottom: 0; }
.maplibregl-canvas:focus { outline: none; }
.maplibregl-popup-content { background: var(--bg-1); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow); font-family: var(--font-body); padding: 12px 14px; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--bg-1); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--bg-1); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--bg-1); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--bg-1); }
.maplibregl-popup-close-button { color: var(--muted); font-size: 18px; padding: 4px 8px; }
.tip { min-width: 180px; }
.tip__t { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.tip__row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; border-top: 1px solid var(--line); color: var(--text-2); }
.tip__row b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

.search__results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow); overflow: hidden; max-height: 320px; overflow-y: auto; }
.search__results li { padding: 10px 14px; cursor: pointer; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.search__results li:first-child { border-top: 0; }
.search__results li:hover, .search__results li[aria-selected="true"] { background: var(--bg-2); }
.search__results .r__name { font-weight: 500; }
.search__results .r__sub { color: var(--muted); font-size: 12px; }

.tabs { display: flex; gap: 2px; padding: 8px; border-bottom: 1px solid var(--line); align-items: center; }
.tabs__close { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px; color: var(--muted); display: grid; place-items: center; transition: color .15s var(--ease), background .15s var(--ease); }
.tabs__close:hover { color: var(--text); background: var(--bg-2); }
.tabs__close svg { width: 16px; height: 16px; }
.tab { flex: 1; padding: 9px 6px; border-radius: 8px; color: var(--muted); font-weight: 500; min-height: 38px; transition: color .15s var(--ease), background .15s var(--ease); }
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); background: var(--bg-2); }

.panel { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4); scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent; }
.panel__head { display: flex; flex-direction: column; gap: 4px; }
.panel__title { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.005em; }
.panel__sub { color: var(--muted); font-size: 13px; }
.panel__foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.hint { color: var(--muted); font-size: 12px; line-height: 1.5; }
.hint code { font-size: 11px; background: var(--bg-2); padding: 1px 5px; border-radius: 4px; }

.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filters .btn { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 12px; color: var(--muted); font-weight: 500; }
.field input, .field select, .modal textarea {
  width: 100%; height: 38px; padding: 0 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); outline: none; transition: border-color .15s var(--ease);
}
.field input:focus, .field select:focus, .modal textarea:focus { border-color: var(--accent); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.field select option { background: var(--bg-1); }

.guidebooks { flex: none; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--sp-4)); padding: 0 var(--sp-4); }
.guidebooks::-webkit-scrollbar { display: none; }
.gb { flex: none; width: 150px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: linear-gradient(160deg, var(--bg-3), var(--bg-1)); text-align: left; display: flex; flex-direction: column; gap: 4px; min-height: 84px; transition: border-color .15s var(--ease), transform .2s var(--ease); }
.gb:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.gb__k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.gb__t { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.2; }
.gb__n { font-size: 12px; color: var(--text-2); margin-top: auto; }

.routelist { display: flex; flex-direction: column; gap: 6px; }
.route { display: grid; grid-template-columns: 4px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px 10px 10px; border-radius: var(--r-md); border: 1px solid transparent; background: rgba(255,255,255,.025); text-align: left; width: 100%; transition: background .15s var(--ease), border-color .15s var(--ease); }
.route:hover { background: rgba(255,255,255,.06); }
.route.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.route__bar { width: 4px; height: 36px; border-radius: 2px; background: var(--c); }
.route__name { font-weight: 500; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.route__meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.route__dist { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.route__dist small { color: var(--muted); font-weight: 400; }
.empty { padding: 24px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--muted); text-align: center; font-size: 13px; }

.seg { display: flex; background: var(--bg-2); border-radius: var(--r-sm); padding: 3px; gap: 3px; }
.seg__btn { flex: 1; padding: 8px; border-radius: 5px; color: var(--muted); font-weight: 500; min-height: 34px; }
.seg__btn.is-active { background: var(--bg-3); color: var(--text); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; }
.stat { background: var(--bg-2); border-radius: var(--r-sm); padding: 8px 10px; display: flex; flex-direction: column; }
.stat__v { font-family: var(--font-display); font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat__l { color: var(--muted); font-size: 11px; margin-top: 3px; }

.profile { position: relative; background: var(--bg-2); border-radius: var(--r-sm); overflow: hidden; }
.profile canvas { width: 100%; height: 140px; }
.detail .profile canvas { height: 120px; }
.profile__empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12px; pointer-events: none; }

.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; height: 40px; border-radius: var(--r-sm); font-weight: 600; border: 1px solid transparent; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); white-space: nowrap; }
.btn--sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { background: rgba(255,255,255,.06); }
.btn--strava { background: #fc5200; color: #fff; width: 100%; }
.btn--strava:hover { background: #ff6a1f; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.iconbtn { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line-strong); }
.iconbtn:hover { color: var(--text); background: rgba(255,255,255,.06); }
.iconbtn svg { width: 18px; height: 18px; }
.link { color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); text-align: center; color: var(--text-2); cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
.drop svg { width: 28px; height: 28px; color: var(--accent); margin-bottom: 4px; }
.drop strong { color: var(--text); font-weight: 600; }
.drop.is-over, .drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.fieldset legend { padding: 0 6px; font-weight: 600; font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 12px; cursor: pointer; color: var(--text-2); user-select: none; }
.chip:has(input:checked) { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.chip input { accent-color: var(--accent); width: 14px; height: 14px; margin: 0; }
.strava { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.log { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.log li { padding: 6px 10px; background: var(--bg-2); border-radius: var(--r-sm); border-left: 2px solid var(--accent); }
.log li.err { border-left-color: var(--danger); }

.pop__title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin-top: 4px; }
.pop__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ovl { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px; border-radius: var(--r-sm); border: 1px solid var(--line); font-size: 12px; color: var(--text-2); text-align: left; transition: border-color .15s var(--ease); }
.ovl:hover { border-color: var(--line-strong); }
.ovl[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.ovl__sw { width: 100%; height: 22px; border-radius: 4px; }
.ovl__sw--none { background: repeating-linear-gradient(45deg, var(--bg-3) 0 6px, var(--bg-2) 6px 12px); }
.ovl__sw--slope { background: linear-gradient(90deg, #3fa66f 0%, #8fcf5a 11%, #f7e04b 22%, #f39b2b 30%, #e2422f 37%, #7a2c9c 44%, #3c1e78 56%, #19192d 67%, #6e6e7d 83%, #ebebf0 100%); }
.ovl__sw--aspect { background: conic-gradient(#4f7cff, #b04cf0, #ff4f7e, #ffb84f, #d2f04c, var(--ok), #3ac8e2, #4f7cff); }
.ovl__sw--alt { background: linear-gradient(90deg, #2f8f5b, #cbe36d, #e8b25a, #b76b3f, #8c8c8c, #f4f4f4); }
.ovl__sw--ava { background: linear-gradient(90deg, transparent 30%, #ff9a3d 40%, #ff4747 60%, #a03bff 80%); }
.ovl__sw--sat { background: linear-gradient(135deg, #3b4a34, #7a8e6f 40%, #d6d9d5 70%, #8a7f6a); }
.ovl__sw--topo { background: repeating-radial-gradient(circle at 30% 60%, #d9c9a8 0 3px, #f0ead8 3px 8px); }
.ovl__sw--ter { background: linear-gradient(135deg, #1a2229, #3a4650 50%, #1a2229); }
.range { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.range input { accent-color: var(--accent); width: 100%; }
.check { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 4px 0; cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.legend { padding: 10px 12px; background: var(--glass-bg-strong); backdrop-filter: blur(var(--glass-blur)) saturate(140%); border: 1px solid var(--line); border-radius: var(--r-md); font-size: 11px; color: var(--text-2); display: flex; flex-direction: column; gap: 6px; min-width: 150px; max-width: 190px; }
.legend .hint { font-size: 10.5px; line-height: 1.4; margin-top: 2px; }
.legend__t { font-weight: 600; color: var(--text); font-size: 12px; }
.legend__row { display: flex; align-items: center; gap: 8px; }
.legend__sw { width: 18px; height: 10px; border-radius: 2px; flex: none; }
.legend__bar { height: 10px; border-radius: 2px; }
.legend__ticks { display: flex; justify-content: space-between; color: var(--muted); }
.legend:has(.legend__ticks--7) { min-width: 210px; max-width: 210px; }
.legend__ticks--7 { display: block; position: relative; height: 13px; font-variant-numeric: tabular-nums; font-size: 10.5px; }
.legend__ticks--7 span { position: absolute; top: 0; transform: translateX(-50%); }
.legend__ticks--7 span:nth-child(1) { left: 0; transform: none; }
.legend__ticks--7 span:nth-child(2) { left: 16.667%; }
.legend__ticks--7 span:nth-child(3) { left: 33.333%; }
.legend__ticks--7 span:nth-child(4) { left: 50%; }
.legend__ticks--7 span:nth-child(5) { left: 66.667%; }
.legend__ticks--7 span:nth-child(6) { left: 83.333%; }
.legend__ticks--7 span:nth-child(7) { left: auto; right: 0; transform: none; }

/* ---------- Route detail ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.detail__title { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.2; margin-top: 4px; }
.detail__meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.detail__actions { display: flex; gap: 8px; align-items: center; flex: none; }
.detail__body { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px 16px; align-items: start; }
.detail__body .stats { grid-template-columns: repeat(3, 1fr); }
.detail__desc { grid-column: 1 / -1; color: var(--text-2); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.detail__desc:empty { display: none; }
.detail__src { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.detail__src a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; background: var(--c, var(--bg-3)); color: var(--glass-solid); }

.modal { background: var(--bg-1); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: 18px; width: min(92vw, 560px); box-shadow: var(--shadow); }
.modal::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(var(--glass-blur)) saturate(140%); }
.modal h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin-bottom: 10px; }
.modal textarea { height: auto; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; margin-bottom: 12px; resize: vertical; }

/* Waypoint markers */
.wp { width: 16px; height: 16px; border-radius: 50%; background: var(--text); border: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.5); cursor: grab; }
.wp--start { background: var(--ok); }
.wp--end { background: var(--danger); }
.map.is-planning .maplibregl-canvas { cursor: crosshair; }
.map.is-inspect .maplibregl-canvas { cursor: help; }
.loc { width: 14px; height: 14px; border-radius: 50%; background: #35d6ff; border: 2px solid #fff; box-shadow: 0 0 0 8px rgba(53,214,255,.25); }


/* ---------- Chamaps: globe pins ---------- */
.map { --pin-scale: 1; }
.pin {
  display: block; width: 36px; height: 48px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55));
  transition: filter .25s ease;
}
.pin:hover, .pin:focus-visible { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .7)) brightness(1.12); outline: none; z-index: 5; }
.pin svg { display: block; width: 100%; height: 100%; fill: currentColor; stroke: var(--glass-solid); stroke-width: 1.4; transition: transform .2s ease; transform-origin: 50% 100%; }
.pin:hover svg { transform: scale(1.1); }
.pin svg circle { fill: var(--glass-solid); stroke: none; }
.pin__l {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  font: 700 12.5px/1 'Satoshi', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-align: center;
  background: var(--glass-bg-strong); border: 1px solid var(--accent-soft); padding: 7px 10px; border-radius: 8px;
  white-space: nowrap; backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
.pin__l small { display: block; font: 500 10.5px/1.2 'Satoshi', sans-serif; letter-spacing: .02em; text-transform: none; color: #b9c4cb; margin-top: 3px; }
.pin--left .pin__l { left: auto; right: calc(100% + 6px); bottom: 16px; transform: none; text-align: right; }
.pin--right .pin__l { left: calc(100% + 6px); bottom: 16px; transform: none; text-align: left; }
.pin--bottom .pin__l { bottom: auto; top: calc(100% + 4px); }
.maplibregl-marker-covered { opacity: 0 !important; pointer-events: none; }

.globehint__k { font-family: 'Satoshi', sans-serif; font-weight: 600; color: var(--accent); letter-spacing: .02em; }
.globehint.is-out { opacity: 0; transform: translate(-50%, 12px); }
@keyframes hintIn { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- ski-area directory ---------- */
.resort { grid-template-columns: 26px 1fr; align-items: center; }
.resort__flag { font-size: 18px; line-height: 1; width: 26px; text-align: center; flex: none; }
.resort--t1 .route__name { font-weight: 700; letter-spacing: .01em; }
.resort--t1 .route__meta { color: var(--accent); }
.resort--t3 .route__name { font-weight: 500; opacity: .88; }
.route.is-selected .route__name { color: var(--accent); }

.legend__days { display: flex; gap: 4px; }
.legend__days button { flex: 1; padding: 4px 0; border-radius: 6px; background: var(--bg-2); color: var(--muted); font-size: 11px; font-weight: 600; }
.legend__days button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.ovl__sw--depth { background: linear-gradient(135deg, #e2f0ff, #5f96fa, #9b1e96); }
.ovl__sw--fresh { background: linear-gradient(135deg, #ffffff, #5ad1ff, #3c82f0); }
.ovl__sw--forecast { background: linear-gradient(135deg, #e6f3ff, #4a9cff, #7846dc); }

/* ---------- v2 additions: no side panel, compass, mountain layers ---------- */
.tool--compass svg { width: 26px; height: 26px; }
#compassRose { transition: transform .12s linear; transform-box: view-box; }
.tool--compass.is-active { color: var(--text); }
.tip__rose { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 6px 8px; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text-2); font-size: 12px; width: 100%; text-align: left; }
.tip__rose:hover { border-color: var(--line-strong); color: var(--text); }
.tip__rose .rose { flex: none; }
.tip__facing { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--text-2); }
.tip__facing b { color: var(--text); }
.check__sw { margin-left: auto; width: 34px; height: 8px; border-radius: 3px; }
.check__sw--pistes { background: linear-gradient(90deg, #2ecc40 0 25%, #1e90ff 25% 50%, #e53935 50% 75%, #111 75% 100%); }
.check__sw--avy { background: linear-gradient(90deg, #ccff66 0 20%, #ffff00 20% 40%, #ff9900 40% 60%, #ff0000 60% 80%, #000 80% 100%); }
.legend__row small { color: var(--muted); margin-left: auto; }
.legend__lift { display: inline-block; width: 18px; height: 0; border-top: 2px dashed #eee; flex: none; }
.avypop { min-width: 200px; }
.avypop__lvl { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; color: var(--glass-solid); margin: 4px 0 6px; }
.avypop__lvl.is-dark { color: #fff; }
.avypop a { color: var(--accent); }
.avypop .hint { margin-top: 4px; }

/* ---------- Area info panel (info.js) ---------- */
.info__head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); flex: none; }
.info__handle { display: none; }
.info__titlebox { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.info__kicker { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.info__title { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.15; letter-spacing: -.005em; overflow-wrap: anywhere; }
.info__meta { color: var(--muted); font-size: 12px; line-height: 1.4; }
.info__close { flex: none; }
.info__body { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent; padding: 4px 14px 12px; }
.isec { border-bottom: 1px solid var(--line); }
.isec:last-child { border-bottom: 0; }
.isec__h { display: flex; align-items: center; gap: 8px; padding: 11px 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 13.5px; color: var(--text); user-select: none; }
.isec__h::-webkit-details-marker { display: none; }
.isec__h::before { content: ''; width: 6px; height: 6px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(-45deg); transition: transform .18s var(--ease); flex: none; margin-right: 2px; }
.isec[open] > .isec__h::before { transform: rotate(45deg); }
.isec__h > span:first-of-type { flex: 1; }
.isec__badge { font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--bg-2); border-radius: 999px; padding: 2px 8px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.isec__badge:empty { display: none; }
.isec__badge.is-good { background: rgba(90,209,255,.18); color: #9fe0ff; }
.isec__badge.is-ok { background: rgba(163,230,53,.15); color: #c5ef7a; }
.isec__badge.is-warn { background: var(--accent-soft); color: var(--accent); }
.isec__b { padding: 0 0 12px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.isec__b a { color: var(--text); }
.isec__b .hint a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-strong); }
.info__loading, .info__empty { color: var(--muted); font-size: 12.5px; }
.info__loading { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.info__retry { color: var(--accent); font-weight: 600; font-size: 12px; margin-left: 4px; }
.info__line { font-size: 12.5px; }
.info__line b { color: var(--text); font-weight: 600; }
.info__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.istat { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.istat b { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.istat b small { font-size: 10px; font-weight: 500; color: var(--muted); }
.istat span { font-size: 10px; color: var(--muted); line-height: 1.2; }
.snowbars { display: flex; align-items: flex-end; gap: 3px; height: 62px; padding-top: 4px; }
.snowbar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 3px; min-width: 0; }
.snowbar i { display: block; width: 100%; height: max(2px, var(--h)); border-radius: 2px 2px 0 0; background: #5ad1ff; }
.snowbar.is-next i { background: rgba(90,209,255,.35); border: 1px dashed rgba(90,209,255,.6); border-bottom: 0; }
.snowbar.is-today i { background: var(--accent); }
.snowbar.is-today b { color: var(--accent); }
.snowbar b { font-size: 9px; color: var(--muted); font-weight: 600; line-height: 1; }
.snowbars__k { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: -4px; }
.avyrow { display: flex; align-items: center; gap: 10px; }
.avyrow .avypop__lvl { margin: 0; flex: none; }
.avyrow__t { display: flex; flex-direction: column; min-width: 0; }
.avyrow__t b { color: var(--text); font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.avyrow__t span { font-size: 11.5px; color: var(--muted); }
.info__links { display: flex; flex-wrap: wrap; gap: 6px; }
.info__links--grid { display: grid; grid-template-columns: 1fr 1fr; }
.ilink { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: rgba(255,255,255,.03); color: var(--text); font-size: 12px; font-weight: 500; text-decoration: none; line-height: 1.25; transition: border-color .15s var(--ease), background .15s var(--ease); }
.ilink:hover { border-color: var(--accent); background: var(--accent-soft); }
.ilink--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.ilink--primary:hover { background: var(--accent-hover); }
.ilink--wide { width: 100%; overflow-wrap: anywhere; }
.newslist { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.newslist li { display: flex; flex-direction: column; gap: 2px; padding-left: 10px; border-left: 2px solid var(--line-strong); }
.newslist a { text-decoration: none; font-size: 12.5px; line-height: 1.35; color: var(--text); }
.newslist a:hover { color: var(--accent); }
.newslist a em { font-style: normal; color: var(--accent); font-weight: 600; }
.newslist span { font-size: 11px; color: var(--muted); }
.about { display: flex; gap: 10px; align-items: flex-start; }
.about__img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); flex: none; border: 1px solid var(--line); }
.about b { color: var(--text); font-weight: 600; display: block; }
.about__d { display: block; color: var(--muted); font-size: 11.5px; margin-bottom: 4px; }
.about p { font-size: 12.5px; }
.info-open:hover { border-color: var(--accent); }
.info-open svg { width: 16px; height: 16px; color: var(--accent); }

/* ---- Avalanche history (history.js) ---- */
.check__sw--hist { background: linear-gradient(90deg, rgba(48,12,110,.25) 0%, #300c6e 12%, #6a1b9a 30%, #d0217a 50%, #ff6a2a 70%, #ffc93c 88%, #fff7c8 100%); }
#legendHist { min-width: 220px; max-width: 240px; }
#legendHist .legend__rows { display: grid; gap: 4px; margin-top: 2px; }
#legendHist .legend__sw--dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(8,11,14,.85); margin: 0 4px; }
#legendHist .hist__modes { display: flex; gap: 4px; margin: 2px 0; }
#legendHist .hist__modes button { flex: 1; font-size: 11px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--text-2); background: transparent; transition: border-color .15s var(--ease), background .15s var(--ease); }
#legendHist .hist__modes button:hover { border-color: var(--line-strong); }
#legendHist .hist__modes button[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.histpop { min-width: 200px; }
.histpop__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 1.5px rgba(8,11,14,.85); }
.histpop__dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 6px 0 8px; font-size: 12px; }
.histpop__dl dt { color: var(--muted); }
.histpop__dl dd { margin: 0; color: var(--text); }