/* ════════════════════════════════════════════════════════════════════
   app.css — the Waymark app shell (app:core owns layout + panels)
   Layers over waymark.css tokens/classes. Day + night theming inherited.
   Desktop = split panel (400px) + map. Mobile = bottom-sheet over full map.
   ════════════════════════════════════════════════════════════════════ */

:root { --appbar-h: 56px; --tabbar-h: 58px; }

body.app {
  height: 100dvh; overflow: hidden;
  overscroll-behavior: none;
}

/* ── map (full-bleed base; desktop insets it beside the panel) ──────── */
#map { position: fixed; inset: 0; z-index: 1; background: var(--surface-2); }
#map .maplibregl-map { width: 100%; height: 100%; }
#map canvas { outline: none; }

/* ── app top bar ───────────────────────────────────────────────────── */
#appbar {
  /* the same floating glass pill as the content pages (James: one nav) */
  position: fixed; z-index: 30;
  top: calc(10px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px;
  height: var(--appbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 10px 0 18px;
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  border-radius: var(--r-lg);   /* one radius across nav, cards + panels */
  box-shadow: var(--glass-ring);
  max-width: calc(1180px + 40px); margin: 0 auto;
}
#appbar .brand { font-size: 1.05rem; margin-right: 0; white-space: nowrap; }
#appbar .brand > svg { width: 24px; height: 21px; color: var(--marker); }
.appbar-search { position: relative; flex: 1 1 auto; max-width: 520px; display: flex; align-items: center; }
.appbar-search .s-ic { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.appbar-search input {
  width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--line-2);
  border-radius: var(--r-full); background: var(--surface); font-size: .9rem;
}
.appbar-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.appbar-search input:focus { outline: none; border-color: var(--glacier); box-shadow: var(--glow-ring); }
.appbar-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
/* identical voice to .site-nav on content pages: text pills, teal active */
.ab-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--ink-2); padding: 7px 12px; border-radius: var(--r-full); }
.ab-btn:hover { background: var(--surface-2); color: var(--ink); }
.ab-btn.active { color: var(--glacier-ink); background: rgba(20, 184, 166, .12); }
/* app surfaces (Map/Trips/Profile) vs the separate reading pages (Guides/About),
   split by a crisp short divider; the page links stay a deliberate pair, never a
   disabled grey */
.appbar-nav .nav-app + .nav-page { position: relative; margin-left: 15px; }
.appbar-nav .nav-app + .nav-page::before {
  content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: var(--line-2);
}
.appbar-nav .ab-btn.nav-page { color: var(--ink-2); }
/* the one primary action: teal-gradient pill with a soft glow, never a white slug */
.ab-profile { background: linear-gradient(135deg, #14B8A6, #0D9488); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 0 22px -6px rgba(20,184,166,.55); }
.ab-profile:hover { background: linear-gradient(135deg, #2DD4BF, #0D9488); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 0 26px -4px rgba(20,184,166,.7); }
.ab-profile.active { background: linear-gradient(135deg, #14B8A6, #0D9488); color: #fff; }
#appbar .theme-toggle { color: var(--ink-3); padding: 8px; border-radius: var(--r-full); margin-left: 8px; margin-right: 2px; }
#appbar .theme-toggle:hover { color: var(--ink); background: var(--surface-2); }
#appbar .theme-toggle svg { width: 17px; height: 17px; }

/* ── panel (mobile bottom-sheet by default) ────────────────────────── */
/* JS (main.js snapTranslate) owns the resting transform on phones; these rules
   are the pre-JS / no-JS fallback and MUST stay in step with those numbers.
   --peek-h is the bottom strip left visible at peek; the detail card peeks a
   touch taller so its stats show. */
#panel {
  --peek-h: 236px;
  --min-h: 54px;   /* "closed": a fat grab bar rides above the tab bar (easy to grab) */
  position: fixed; left: 0; right: 0;
  /* full snap sits flush right under the full-width top bar (bar = --appbar-h +
     the notch inset), so no map sliver shows between them; the sheet spans from
     there to the very bottom and translates down to collapse */
  top: calc(var(--appbar-h) + env(safe-area-inset-top, 0px));
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--line);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  box-shadow: var(--shadow-lg);
  transition: transform .32s var(--ease); will-change: transform;
  /* pan-y (not none): the sheet's own scrollers must accept finger scrolling at
     every snap. touch-action is intersected down the tree, so `none` here froze
     the list. The drag surfaces (handle + head) set touch-action:none below. */
  touch-action: pan-y;
}
#panel[data-view="detail"] { --peek-h: 360px; }
#panel[data-snap="full"] { transform: translateY(0); }
/* at full snap the sheet meets the top bar edge-to-edge: square its top corners
   so there's no rounded gap showing a sliver of map beside them */
#panel[data-snap="full"] { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
/* peek shows the head + first card (detail: verdict/name/stats); min collapses
   to just the handle so the map is fully visible but the sheet is a swipe away */
#panel[data-snap="peek"] { transform: translateY(calc(100% - var(--peek-h))); }
#panel[data-snap="min"]  { transform: translateY(calc(100% - var(--min-h))); }

#panel-handle {
  flex: none; height: 32px; display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: none; background: none;
}
#panel-handle span { width: 42px; height: 5px; border-radius: 3px; background: var(--line-2); display: block; }
#panel-handle:active { cursor: grabbing; }

/* the drag surface: starting a pointer-drag here must not also pan the page */
.panel-head { touch-action: none; }
/* the content scrollers accept finger scroll (only live at the full snap) */
.panel-scroll, .detail-scroll { touch-action: pan-y; }
#panel-list, #panel-detail { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#panel-detail[hidden], #panel-list[hidden] { display: none; }

/* list header — tabs, then a controls row (count · filter + sort), then grades */
.panel-head { flex: none; padding: 6px 16px 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.panel-tabs { display: flex; gap: 4px; }
.ptab { font-weight: 600; font-size: .84rem; color: var(--ink-3); padding: 6px 12px; border-radius: var(--r-full); transition: color .14s, background .14s; }
.ptab:hover { color: var(--ink); background: var(--surface-2); }
/* one "selected" language everywhere: teal tint + teal ink (matches .ab-btn.active) */
.ptab.active { background: rgba(20, 184, 166, .12); color: var(--glacier-ink); }
/* count gets its own full-width line so it never mid-word ellipses ("342 STA…") */
.panel-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.panel-controls-r { display: flex; align-items: center; gap: 8px; flex: none; }
.filter-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .82rem; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r-full); padding: 6px 12px; background: var(--surface); transition: border-color .14s, color .14s; }
.filter-btn svg { width: 14px; height: 14px; }
.filter-btn:hover { border-color: var(--glacier); color: var(--ink); }
.fbadge { background: var(--glacier); color: #fff; border-radius: var(--r-full); padding: 0 6px; font-size: .68rem; min-width: 16px; text-align: center; line-height: 16px; }
.sort-select { border: 1px solid var(--line-2); border-radius: var(--r-full); padding: 6px 30px 6px 12px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23888' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 12px; -webkit-appearance: none; appearance: none; font-size: .8rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.sort-select:hover { border-color: var(--glacier); }
.panel-count { flex: 1 1 100%; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.panel-count .u { font-weight: 400; color: var(--ink-3); font-size: .92em; }

/* accommodation card in the mixed feed — same family as the walk .tcard */
.fcard-accom {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .16s var(--ease), border-color .15s, box-shadow .18s;
}
.fcard-accom:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--glacier) 45%, var(--line-2)); box-shadow: var(--shadow); }
.fa-ico { flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(20, 184, 166, .1); color: var(--glacier-ink); margin-top: 1px; }
.fa-ico svg { width: 18px; height: 18px; }
.fa-body { min-width: 0; flex: 1; }
.fa-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fa-head h3 { font-family: var(--font-display); font-size: .98rem; font-weight: 600; color: var(--ink); line-height: 1.22; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fa-head h3 a { color: inherit; text-decoration: none; }
.fa-head h3 a:hover { color: var(--glacier-ink); }
.fa-dist { flex: none; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-3); }
.fa-type { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--glacier-ink); margin-top: 4px; }
.fa-meta { font-size: .84rem; color: var(--ink-2); margin-top: 3px; }

/* list body */
.panel-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 10px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px); mask-image: linear-gradient(to bottom, transparent 0, #000 12px); }
.panel-scroll:focus { outline: none; }

/* card tweaks over waymark .tcard */
.tcard[role="button"] { cursor: pointer; }
.tcard .tcard-spark svg { height: 40px; }
.tc-rating { display: inline-flex; align-items: center; gap: 3px; color: var(--gold-ink); }
.tc-rating .star { color: var(--gold); }
.tc-rating .star { width: 12px; height: 12px; }
.tcard-stats .up { width: 11px; height: 11px; color: var(--ink-3); }
/* route type reads as a deliberate bordered pill, not an icon-less oddity in the icon row */
.tcard-tags .tag-route { border: 1px solid var(--line-2); border-radius: var(--r-full); padding: 0 8px; color: var(--ink-3); }
.tcard.hover { border-color: var(--contour); }
.tcard.active { border-color: var(--marker); box-shadow: 0 0 0 2px rgba(228,83,27,.22); }
.done-mark svg { width: 12px; height: 12px; }

.panel-empty { padding: 44px 26px; text-align: center; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 6px; margin: auto 0; }
.panel-empty .vg { width: 44px; height: 44px; color: var(--glacier); opacity: .72; margin-bottom: 8px; filter: drop-shadow(0 0 14px rgba(20,184,166,.32)); }
.panel-empty strong { color: var(--ink-2); }
.panel-empty p { font-size: .9rem; max-width: 30ch; }
.panel-empty-cta { margin-top: 14px; }

/* ── detail view ───────────────────────────────────────────────────── */
.detail-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-full); color: var(--ink-2); flex: none; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn svg { width: 16px; height: 16px; }
.detail-head-label { font-size: .8rem; font-weight: 600; color: var(--ink-3); }
.detail-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 18px 34px; }
.detail-verdict { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.detail-name { font-family: var(--font-display); font-weight: 500; font-size: 1.55rem; line-height: 1.14; }
.detail-place { color: var(--ink-3); font-size: .85rem; margin-top: 3px; }
.d-rating { display: inline-flex; align-items: center; gap: 5px; color: var(--gold-ink); margin-top: 10px; font-size: .85rem; }
.d-rating .star { width: 13px; height: 13px; }
#detailProfile { margin: 16px 0; }
.instrument { margin: 16px 0; }
.d-sub { font-size: .68rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); margin: 20px 0 8px; }
.gk-row { display: flex; flex-wrap: wrap; gap: 8px; }
.gk { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full); padding: 5px 12px; }
.gk svg { width: 14px; height: 14px; color: var(--marker-ink); }
.detail-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.detail-actions-row { display: flex; gap: 10px; }
.detail-actions-row .btn { flex: 1; }
.detail-fullpage { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .85rem; color: var(--marker-ink); text-decoration: none; margin-top: 6px; }
.detail-fullpage svg { width: 13px; height: 13px; }
.detail-fullpage:hover { color: var(--marker-ink); }
/* frame the drawn camp-art plate so the dark illustration is bounded, not raw against paper */
.detail-photo { width: 100%; height: 180px; object-fit: cover; border-radius: var(--r); margin-bottom: 12px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.done-stamp { display: inline-flex; align-items: center; gap: 5px; color: var(--gold-ink); font-weight: 700; font-size: .8rem; }
.done-stamp svg { width: 14px; height: 14px; }
.d-flat { color: var(--ink-3); font-style: italic; padding: 12px 0; }

/* ── skeleton (faint contour strips, never a spinner) ──────────────── */
.skeleton { position: relative; overflow: hidden; border-radius: var(--r); }
.skeleton-profile {
  height: 150px;
  background: repeating-linear-gradient(var(--surface-2) 0 21px,
    color-mix(in srgb, var(--contour) 9%, var(--surface-2)) 21px 22px);
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--contour) 12%, transparent) 50%, transparent 80%);
  background-size: 200% 100%; animation: sk 1.5s var(--ease) infinite;
}
@keyframes sk { to { background-position: -200% 0; } }

/* ── search suggestions ────────────────────────────────────────────── */
.search-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow-lg); max-height: min(60vh, 440px); overflow-y: auto;
  padding: 6px; list-style: none;
}
/* the landing centre-aligns everything; suggestions must still read as a list */
.cover-search .search-suggest { text-align: left; }
.sopt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; }
.sopt-ic { width: 16px; height: 15px; color: var(--ink-3); flex: none; }
.sopt.is-marker .sopt-ic { color: var(--marker); }
.sopt-label { font-weight: 600; font-size: .88rem; color: var(--ink); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the region label yields space first, so the track name wins it */
.sopt-sub { font-size: .74rem; color: var(--ink-3); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .sopt-sub { display: none; } }
.sopt.active, .sopt:hover { background: var(--surface-2); }

/* ── filter drawer ─────────────────────────────────────────────────── */
.drawer[hidden], .drawer-scrim[hidden] { display: none !important; }
.drawer-scrim { position: fixed; inset: 0; z-index: 69; background: rgba(9,9,11,.5); opacity: 0; transition: opacity .3s var(--ease); }
.drawer-scrim.open { opacity: 1; }
.drawer {
  position: fixed; z-index: 70; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: var(--surface-2); box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .32s var(--ease);
}
.drawer.open { transform: none; }
@media (min-width: 721px) {
  /* desktop: the hike filters slide over the hike panel itself (left),
     mirroring its floating-card geometry — the right side belongs to the
     On-the-map card and must never be covered */
  .drawer {
    top: calc(92px + env(safe-area-inset-top, 0px)); left: 20px; right: auto; bottom: 20px;
    width: 400px; border-radius: var(--r-lg); overflow: hidden;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(24px) saturate(1.7);
    backdrop-filter: blur(24px) saturate(1.7);
    box-shadow: var(--glass-ring), 0 18px 44px -14px rgba(21, 25, 34, .3);
    transform: translateX(calc(-100% - 24px));
  }
  .drawer-scrim { background: transparent; }
}
@media (max-width: 720px) {
  /* phones: the hike filters rise from the bottom as a sheet — same language as
     the layers sheet and the results drawer, not a side panel */
  .drawer {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    max-height: 85dvh; border-radius: 22px 22px 0 0;
    transform: translateY(101%);
  }
  .drawer.open { transform: translateY(0); }
  .drawer::before {
    content: ""; flex: none; display: block; width: 42px; height: 5px;
    margin: 8px auto 0; border-radius: 3px; background: var(--line-2);
  }
  .drawer-scrim { background: rgba(12, 16, 22, .42); }
}
/* the mobile drawer runs edge to edge (top:0): pad the header past the notch /
   Dynamic Island so the title and Close never sit under it (0 on desktop) */
.drawer-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 16px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 1.2rem; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.f-section { font-size: .68rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); margin: 20px 0 10px; }
.f-section:first-child { margin-top: 0; }
.f-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.f-chips .chip svg { width: 13px; height: 12px; }
/* the dog-lens chips align on a 2-col grid; the odd fifth chip spans the row */
.f-chips-lens { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.diff-opt[aria-pressed="true"] { color: #fff; }
.diff-opt.diff-easy[aria-pressed="true"] { background: var(--d-easy); border-color: var(--d-easy); }
.diff-opt.diff-moderate[aria-pressed="true"] { background: var(--d-moderate); border-color: var(--d-moderate); }
.diff-opt.diff-hard[aria-pressed="true"] { background: var(--d-hard); border-color: var(--d-hard); }
.diff-opt.diff-expert[aria-pressed="true"] { background: var(--d-expert); border-color: var(--d-expert); }
.f-range { margin-bottom: 8px; }
.f-range-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.f-label { font-weight: 600; font-size: .85rem; color: var(--ink-2); }
.f-range-val { font-size: .8rem; color: var(--ink); }
.f-range-track { position: relative; height: 30px; }
.f-range-track::before { content: ""; position: absolute; left: 2px; right: 2px; top: 13px; height: 4px; border-radius: 2px; background: var(--line-2); }
.f-range-track::after { content: ""; position: absolute; top: 13px; height: 4px; border-radius: 2px; background: var(--glacier); left: max(2px, var(--lo, 0%)); width: calc(var(--hi, 100%) - var(--lo, 0%)); }
.f-range-track input[type="range"] {
  position: absolute; left: -9px; top: 6px; width: calc(100% + 18px); height: 18px; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.f-range-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
  background: var(--glacier); border: 2px solid var(--surface); box-shadow: var(--shadow-sm); cursor: pointer;
}
.f-range-track input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
  background: var(--glacier); border: 2px solid var(--surface); cursor: pointer;
}
.f-field { margin-bottom: 12px; }
.f-field .f-label { display: block; margin-bottom: 6px; }
.f-select { width: 100%; padding: 9px 16px; border: 1px solid var(--line-2); border-radius: var(--r-full); background: var(--surface); font-size: .9rem; }
.drawer-foot { flex: none; display: flex; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.drawer-foot .btn { flex: 1; }
/* Reset is a real secondary button sized to itself, not a full-width ghost gap */
.drawer-foot .btn-ghost { flex: 0 0 auto; border: 1px solid var(--line-2); }

/* ── product overlays (Trips / Ranks / Profile / Auth) ─────────────── */
.app-overlay {
  position: fixed; z-index: 42; display: none;
  top: calc(92px + env(safe-area-inset-top, 0px)); right: 20px; bottom: 20px;
  width: min(440px, calc(100vw - 40px));
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  backdrop-filter: blur(24px) saturate(1.7);
  border-radius: var(--r-lg); box-shadow: var(--glass-ring), 0 18px 44px -14px rgba(21, 25, 34, .3);
  overflow: hidden;
}
.app-overlay.open { display: flex; flex-direction: column; }
@media (max-width: 720px) {
  .app-overlay {
    top: auto; left: 10px; right: 10px; width: auto;
    bottom: calc(var(--tabbar-h) + 8px); height: 74dvh;
    border-radius: 20px;
  }
}

/* ── cover (the field-guide welcome) ───────────────────────────────── */
#cover {
  position: fixed; inset: 0; z-index: 80; background: var(--surface-2); overflow-y: auto;
  transition: transform .6s cubic-bezier(.55, 0, .28, 1), opacity .55s var(--ease);
}
/* the hero fills the viewport so "Open the map" stays above the fold; the
   crawlable footer flows below it (scroll to reach it) */
.cover-hero { position: relative; min-height: 100svh; display: grid; place-items: center; }
.cover-scroll-hint { margin-top: 22px; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); font-weight: 600; }
#cover .site-footer { position: relative; z-index: 1; }
#cover[hidden] { display: none; }
/* a hash deep-link (#map, #trail=…) decides BEFORE first paint: no landing
   flash — the paw curtain owns the load instead */
.no-cover #cover { display: none; }
#cover.up { transform: translateY(-102%); opacity: 0; pointer-events: none; }
.cover-inner { max-width: 560px; margin: 0 auto; padding: 48px 24px; text-align: center; }
/* the Hiking Dogs logo lockup (paw + wordmark + scribbled NZ) sits where the
   eyebrow used to — same logo as the nav, centred and a size up */
.cover-logo {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 auto 24px; font-size: 1.9rem; color: var(--ink);
  margin-right: auto; margin-left: auto;
}
.cover-logo .cover-logo-mark { width: 46px; height: 46px; color: var(--marker); flex: none;
  filter: drop-shadow(0 3px 4px rgba(27,33,28,.18)); }
.cover-logo .brand-nz { font-size: .46em; }
.cover-logo .brand-nz-ring { stroke-width: 2; }
.cover-h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 6.5vw, 3.4rem); line-height: 1.06; margin: 10px 0 16px; letter-spacing: -.02em; }
.cover-lede { color: var(--ink-2); font-size: 1.08rem; line-height: 1.5; max-width: 40ch; margin: 0 auto 28px; text-wrap: balance; }
/* counts as a quiet mono trust-line under the actions, not big display numbers */
.cover-counts { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; margin: 30px 0 0; }
.cover-counts .cc { display: inline-flex; align-items: baseline; gap: 6px; }
.cover-counts .cc-n { font-family: var(--font-mono); font-weight: 600; font-size: 1.02rem; color: var(--ink); letter-spacing: -.01em; }
.cover-counts .cc-u { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 600; }
.cover-search { position: relative; max-width: 440px; margin: 0 auto 14px; display: flex; align-items: center; }
.cover-search .s-ic { position: absolute; left: 15px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.cover-search input { width: 100%; padding: 14px 16px 14px 44px; border: 1px solid var(--line-2); border-radius: var(--r-full); background: var(--surface); font-size: 1rem; box-shadow: var(--shadow-sm); }
.cover-search input:focus { outline: none; border-color: var(--glacier); box-shadow: var(--glow-ring); }
/* 16px min: anything smaller makes iOS Safari auto-zoom the page on focus, which
   reads as the layout lurching. (The placeholder is already the short variant.) */
@media (max-width: 480px) { .cover-search input { font-size: 16px; } }
.btn-lg { padding: 14px 30px; font-size: 1.05rem; }

/* ── toasts ────────────────────────────────────────────────────────── */
#toast-root {
  position: fixed; left: 0; right: 0; z-index: 95;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px);
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.toast { background: var(--ink); color: var(--paper); padding: 11px 20px; border-radius: var(--r-full); font-weight: 600; font-size: .88rem; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(10px); transition: opacity .25s var(--ease), transform .25s var(--ease); max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: none; }

/* ── install (add to home screen) prompt, phones ─────────────────────── */
.install-card {
  position: fixed; left: 12px; right: 12px; z-index: 90;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px);
  display: flex; align-items: center; gap: 13px;
  padding: 12px 12px 12px 14px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 18px; box-shadow: var(--shadow-lg);
  transform: translateY(170%); opacity: 0;
  transition: transform .42s var(--ease), opacity .42s var(--ease);
}
.install-card.in { transform: none; opacity: 1; }
.install-ico { flex: none; width: 44px; height: 44px; }
.install-ico svg { width: 100%; height: 100%; display: block; }
.install-body { flex: 1; min-width: 0; }
.install-title { font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--ink); line-height: 1.2; }
.install-sub { font-size: .8rem; color: var(--ink-2); margin-top: 2px; line-height: 1.32; }
.install-add {
  flex: none; font-weight: 700; font-size: .88rem; color: #fff;
  background: linear-gradient(135deg, #14B8A6, #0D9488);
  padding: 9px 18px; border-radius: var(--r-full);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16), 0 0 22px -6px rgba(20, 184, 166, .55);
}
.install-x { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); border-radius: 50%; }
.install-x:hover { background: var(--surface-2); color: var(--ink); }
.install-x svg { width: 12px; height: 12px; }
/* iOS variant stacks a header row over the Share-then-Add steps */
.install-ios { flex-direction: column; align-items: stretch; gap: 9px; }
.install-ios .install-top { display: flex; align-items: center; gap: 13px; }
.install-steps { margin: 0; font-size: .85rem; color: var(--ink-2); line-height: 1.45; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.install-steps b { color: var(--ink); }
.install-share { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--glacier-ink); }
.install-share svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .install-card { transition: opacity .2s; transform: none; } }

/* the worded base-map switch: shows the DESTINATION (tap Topo → topo) */
.ctrl-word {
  font: 700 9.5px var(--font-sans) !important; letter-spacing: .02em;
  width: 32px !important; height: 32px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 0 !important; color: var(--ink-2) !important;
}
.ctrl-word:hover { color: var(--ink) !important; }

/* ── MapLibre control skinning ─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
}

/* ── desktop split: full-bleed map, everything floats over it ────────── */
@media (min-width: 721px) {
  #map { inset: 0; }
  #panel {
    top: calc(92px + env(safe-area-inset-top, 0px)); left: 20px; width: 400px;
    right: auto; bottom: 20px; height: auto;
    transform: none !important; border: 0;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(24px) saturate(1.7);
    backdrop-filter: blur(24px) saturate(1.7);
    border-radius: var(--r-lg); box-shadow: var(--glass-ring), 0 18px 44px -14px rgba(21, 25, 34, .3);
    transition: none; touch-action: auto; overflow: hidden;
  }
  #panel-handle { display: none; }
  .tabbar { display: none; }
  /* center the toast over the MAP (which starts at 400px), not the whole window */
  #toast-root { left: 400px; bottom: 24px; }
}

/* ── mobile ────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* no bottom tab bar on phones — nav lives in the top-right dropdown menu, so
     the map + sheet run the FULL height of the screen. --tabbar-h collapses to 0
     and everything anchored above the (gone) tab bar reflows to the bottom. */
  :root { --appbar-h: 48px; --tabbar-h: 0px; }
  .tabbar { display: none !important; }
  /* on phones the whole desktop nav row is empty (buttons hidden, theme moved
     into the dropdown) — drop it entirely so its margin-left:auto stops eating
     the search's width. Then the bar is brand · search · menu, exactly like the
     content-page header, so the search comes out the SAME width. */
  .appbar-nav { display: none; }
  #appbar { gap: 10px; }
  /* the day/night toggle moves INTO the dropdown menu on phones */
  #appbar .theme-toggle { display: none; }
  /* phones: a SOLID, FULL-WIDTH top bar (edge to edge, up into the notch), not a
     floating rounded pill — so when the sheet opens fully it meets the bar with
     no slivers of map showing around the corners. */
  #appbar {
    top: 0; left: 0; right: 0; margin: 0; max-width: none;
    height: calc(var(--appbar-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 8px 0 14px;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    background: var(--surface); box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* the install prompt sits ABOVE the peek sheet so it never covers the first
     result card (peek shows --peek-h of the sheet) */
  .install-card { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 248px); }
  /* 16px keeps iOS Safari from zooming the page when the field takes focus; a
     fixed 38px height + the same 520px cap as the content search so the two are
     identical width on every screen */
  .appbar-search input { font-size: 16px; height: 38px; padding: 0 12px 0 34px; }
  /* the home paw gets a finger-sized hit box without shifting the layout (the
     theme toggle now lives in the dropdown menu on phones) */
  #appbar .brand { padding: 11px 6px; margin: -11px -6px; }
  /* the list/detail scrolls at EVERY snap now (was frozen unless full) so you can
     flick through cards while the sheet stays low */
  .panel-scroll, .detail-scroll { overflow-y: auto; }
  /* the sheet leads with results so the drawer can stay short: the head is ONE
     slim row (count + sort). The In-this-area/Flagged/Logged switcher moves into
     the filter drawer (.f-listtab); filtering lives on the map pill + drawer. */
  .panel-head .seg-diffs { display: none; }
  .panel-head .filter-btn { display: none; }
  .panel-head .panel-tabs { display: none; }
  .panel-count { flex: 1 1 auto; min-width: 0; }
  .pc-tab { color: var(--glacier-ink); font-weight: 700; }

  /* condense the sheet list on phones so the drawer stays low and the map leads:
     drop the reserved 2-line name height, tighten padding, gaps and the spark */
  .panel-head { padding: 2px 14px 8px; gap: 6px; border-bottom: 0; }
  .panel-controls { gap: 4px 10px; }
  .panel-count { font-size: .8rem; }
  .panel-scroll { padding: 10px 14px 22px; gap: 8px; }
  #panel .tcard { padding: 11px 13px; gap: 5px; }
  #panel .tcard h3 { min-height: 0; font-size: 1rem; }
  #panel .tcard-spark { height: 30px; }
  #panel .tcard-spark svg { height: 30px; }
  #panel .fcard-accom { padding: 10px 13px; }
  /* grow the flag/save hit area for fingers without growing the card row
     (negative margin absorbs the extra padding) */
  #panel .tcard .save { padding: 10px; margin: -8px -7px; }
  /* finger-sized icon buttons (detail back, drawer/overlay close) on phones */
  .icon-btn { width: 42px; height: 42px; }
  /* full-screen product overlays (Profile / Ranks) must clear the home indicator */
  .app-overlay { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  /* two side-by-side detail actions stay on one line at 360px, not wrap into
     two-line buttons */
  .detail-actions-row .btn { white-space: nowrap; padding-left: 10px; padding-right: 10px; font-size: .86rem; }
  .detail-actions-row .btn svg { flex: none; }
}
@media (max-width: 360px) {
  /* only on the very narrowest phones does the wordmark give way to the paw */
  #appbar .brand .brand-word, #appbar .brand .brand-nz { display: none; }
}

/* ── motion & focus ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #panel, .drawer, .drawer-scrim, #cover, .toast, .skeleton::after { transition: none !important; animation: none !important; }
}
.ab-btn:focus-visible, .ptab:focus-visible, .filter-btn:focus-visible, .icon-btn:focus-visible, .tab:focus-visible, .save:focus-visible, .cover-trip:focus-visible, .sopt:focus-visible { outline: 2.5px solid var(--glacier); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════════════
   app:product panels — APPEND YOUR STYLES BELOW THIS LINE ONLY
   ════════════════════════════════════════════════════════════════════ */

/* ── product panels ─────────────────────────────────────────────────────
   auth · onboarding · trips · ranks · profile · celebration · toast fallback
   (app:core owns .app-overlay positioning, #toast-root/.toast, and layout.)
   ──────────────────────────────────────────────────────────────────────── */

/* overlay scaffold (floating modals: auth, profile sub-sheets) ---------- */
body.ov-open { overflow: hidden; }

.ov-backdrop {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  background: rgba(9, 9, 11, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .18s var(--ease);
}
.ov-backdrop.in { opacity: 1; }
.ov-backdrop.out { opacity: 0; }
.ov-panel {
  position: relative; width: 100%;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  max-height: min(92dvh, 860px); display: flex; flex-direction: column;
  transform: translateY(10px) scale(.99); opacity: .6;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.ov-backdrop.in .ov-panel { transform: none; opacity: 1; }
.ov-sm { max-width: 420px; } .ov-md { max-width: 560px; } .ov-lg { max-width: 680px; }
.ov-head { padding: 22px 24px 6px; }
.ov-title { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; }
.ov-sub { color: var(--ink-2); font-size: .92rem; margin-top: 4px; }
.ov-body { padding: 14px 24px 24px; overflow-y: auto; }
.ov-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--r-full); color: var(--ink-3); transition: background .15s, color .15s;
}
.ov-close:hover { background: var(--surface-2); color: var(--ink); }
.ov-close svg { width: 16px; height: 16px; }
/* in-panel close needs resting chrome so it reads as a real control, not a floating glyph */
.ov-inpanel .ov-close { background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2); }
.ov-inpanel .ov-close:hover { background: var(--surface); color: var(--ink); }

/* in-panel variant — rendered into app:core's .app-overlay (Ranks/Profile) */
.ov-inpanel {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  max-height: none; border: none; border-radius: 0; box-shadow: none;
  background: transparent; transform: none; opacity: 1; min-height: 0;
}
.ov-inpanel .ov-body { flex: 1 1 auto; padding: 8px 20px 28px; overflow-y: auto; min-height: 0; }
.ov-inpanel .ov-head { flex: none; padding: 18px 20px 6px; position: relative; }

.ov-close { position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink-2);
  cursor: pointer; box-shadow: var(--shadow-sm); }
.ov-close:hover { color: var(--ink); }
.ov-close svg { width: 15px; height: 15px; }

/* forms ------------------------------------------------------------------ */
.fld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.fld > span { font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-2); text-transform: uppercase; }
.fld input, .fld-row input, .bulk-in {
  width: 100%; padding: 10px 12px; font-size: .96rem;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
}
.fld input:focus, .fld-row input:focus, .bulk-in:focus {
  outline: none; border-color: var(--glacier); box-shadow: var(--glow-ring);
}
.fld-hint { font-size: .74rem; color: var(--ink-3); }
.fld-row { display: flex; gap: 10px; }
.fld-row .fld { flex: 1; }
.linkish { color: var(--glacier-ink); font-weight: 600; font-size: .9rem; text-decoration: underline; text-underline-offset: 2px; }
.linkish:hover { color: var(--marker-ink); }
.linkish.danger { color: var(--danger); }
.auth-err { background: rgba(179, 38, 30, .1); border: 1px solid rgba(179, 38, 30, .3); color: var(--danger); border-radius: var(--r-sm); padding: 9px 12px; font-size: .86rem; font-weight: 500; margin-bottom: 12px; }

/* auth modal ------------------------------------------------------------- */
.auth-brand { display: flex; align-items: center; gap: 10px; }
.auth-brand .auth-mark { width: 26px; height: 23px; color: var(--marker); }
.auth-dog { margin: 6px 0 14px; padding: 14px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--surface-2); }
.auth-dog-head { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }
.auth-dog-head svg { width: 16px; height: 16px; color: var(--marker); }
.auth-dog-head em { font-weight: 400; color: var(--ink-3); font-style: normal; }
.auth-dog .fld { margin-bottom: 0; }
.auth-submit { margin-top: 4px; }
.auth-toggle { text-align: center; margin-top: 14px; font-size: .9rem; color: var(--ink-2); }

/* onboarding ------------------------------------------------------------- */
.onb-form .fld-row { margin-bottom: 14px; }
.onb-gen { text-align: center; padding: 20px 8px 8px; }
.onb-gen-art { position: relative; width: 96px; height: 96px; margin: 4px auto 18px; display: grid; place-items: center; }
.onb-gen-paw { width: 46px; height: 46px; color: var(--marker); animation: onb-bob 1.4s var(--ease) infinite; }
@keyframes onb-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-7px) rotate(4deg); } }
.onb-gen-bar { position: absolute; bottom: -2px; left: 0; right: 0; height: 4px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.onb-gen-bar i { position: absolute; inset: 0; width: 40%; border-radius: inherit; background: var(--marker); animation: onb-slide 1.2s ease-in-out infinite; }
@keyframes onb-slide { 0% { left: -40%; } 100% { left: 100%; } }
.onb-gen-msg { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.onb-gen-note { font-size: .86rem; color: var(--ink-3); margin-top: 6px; }
.onb-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.onb-pick-lead { font-size: .92rem; color: var(--ink-2); margin-bottom: 12px; }
.onb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-bottom: 14px; }
.onb-av { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; border: 2px solid var(--line-2); transition: border-color .15s, transform .12s; }
.onb-av img { width: 100%; height: 100%; object-fit: cover; }
.onb-av:hover { transform: translateY(-2px); }
.onb-av.sel { border-color: var(--marker); }
.onb-av-tick { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: var(--r-full); background: var(--marker); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: .15s; }
.onb-av-tick svg { width: 13px; height: 13px; }
.onb-av.sel .onb-av-tick { opacity: 1; transform: none; }
.onb-custom { margin-bottom: 14px; }
.onb-custom summary { cursor: pointer; font-size: .86rem; color: var(--glacier-ink); font-weight: 600; padding: 6px 0; }
.onb-custom .fld-row { margin-top: 8px; }
.onb-custom .onb-custom-in { flex: 1; }
.onb-current { display: grid; place-items: center; margin-bottom: 16px; }
.onb-editor-start { text-align: center; }

/* avatar ----------------------------------------------------------------- */
.avatar { display: inline-block; width: 40px; height: 40px; border-radius: var(--r-full); object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); }
.avatar-fallback { display: grid; place-items: center; color: var(--ink-3); }
.avatar-fallback svg { width: 55%; height: 55%; }
.avatar-sm { width: 34px; height: 34px; }
.avatar-xl { width: 84px; height: 84px; }

/* ── trips ──────────────────────────────────────────────────────────────
   Banks' Trips: a field guide of expeditions. Each card is a cover whose
   backdrop is its own real terrain contour band; opening one slides to a
   day-by-day itinerary timeline. "My Trips" sits below the gallery.
   ──────────────────────────────────────────────────────────────────────── */
.trips-view { max-width: 940px; margin: 0 auto; padding: 20px 20px 40px; }
.anim-in { animation: trips-in .34s var(--ease) both; }
.anim-back { animation: trips-back .34s var(--ease) both; }
@keyframes trips-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes trips-back { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.trips-view .sep { color: var(--line-2); font-weight: 400; }

/* section masthead */
.trips-hero { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 22px; }
.trips-hero-banks { width: 52px; height: 52px; border-radius: var(--r-full); object-fit: cover; border: 2px solid var(--marker); flex-shrink: 0; box-shadow: var(--shadow-sm); }
.trips-hero-copy { min-width: 0; }
.trips-hero-title { font-family: var(--font-display); font-size: 1.72rem; font-weight: 500; letter-spacing: -.015em; margin-top: 1px; line-height: 1.1; }
.trips-hero-lede { font-size: .9rem; color: var(--ink-2); margin-top: 6px; max-width: 48ch; line-height: 1.5; }

/* the expedition gallery */
.xcard-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.xcard { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .22s, border-color .18s; }
.xcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.xcard-open { position: relative; display: block; width: 100%; text-align: left; padding: 0; }
.xcard-terrain { position: absolute; inset: 0; color: var(--contour); opacity: .58; overflow: hidden; transition: opacity .3s var(--ease), transform .55s var(--ease); }
.xcard-terrain svg { width: 100%; height: 100%; }
.xcard:hover .xcard-terrain { opacity: .9; transform: translateX(-1.5%); }
.xcard-scrim { position: absolute; inset: 0; background: linear-gradient(102deg, var(--surface) 6%, transparent 68%), linear-gradient(0deg, var(--surface) 4%, transparent 44%); }
.xcard-content { position: relative; display: flex; flex-direction: column; min-height: 178px; padding: 16px 18px 15px; }
.xcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.xcard-place { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.xcard-emblem { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); flex-shrink: 0; }
.xcard-emblem svg { width: 16px; height: 16px; }
.xcard-diff { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 500; color: var(--dc); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full); padding: 4px 10px 4px 7px; white-space: nowrap; flex-shrink: 0; }
.xcard-diff-g { width: 16px; height: 16px; color: var(--dc); }
.xcard-mid { margin-top: auto; padding-top: 16px; }
.xcard-name { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.08; color: var(--ink); letter-spacing: -.015em; }
.xcard-tagline { display: block; font-size: .88rem; color: var(--ink-2); margin-top: 5px; max-width: 36ch; }
.xcard-stats { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; font-size: .78rem; color: var(--ink-2); }
.xcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; min-height: 30px; }
.xcard-prog { display: inline-flex; align-items: center; gap: 9px; }
.xcard-prog-track { width: 82px; height: 5px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.xcard-prog-track i { display: block; height: 100%; width: 0; background: var(--gold); }
.xcard-prog b { font-size: .74rem; font-weight: 600; color: var(--gold-ink); }
.xcard-prog.complete b::after { content: ' ✓'; }
.xcard-go { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: auto; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); flex-shrink: 0; transition: background .18s, color .18s, border-color .18s, transform .18s; }
.xcard:hover .xcard-go { background: var(--marker-btn); border-color: var(--marker-btn); color: #fff; transform: translateX(2px); }
.xcard-go svg { width: 15px; height: 15px; }

/* ── trip detail (itinerary) ── */
.tripd-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 15px; padding: 7px 14px 7px 10px; border-radius: var(--r-full); font-size: .82rem; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2); transition: color .15s, border-color .15s; }
.tripd-back:hover { color: var(--marker-ink); border-color: var(--contour); }
.tripd-back svg { width: 15px; height: 15px; }

.tripd-hero { position: relative; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.tripd-terrain { position: absolute; inset: 0; color: var(--contour); opacity: .6; }
.tripd-terrain svg { width: 100%; height: 100%; }
.tripd-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent, var(--surface) 94%), linear-gradient(100deg, var(--surface) 14%, transparent 78%); }
.tripd-hero-copy { position: relative; padding: 20px 20px 22px; }
.tripd-hero-copy .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.tripd-hero-copy .xcard-emblem { width: 24px; height: 24px; border-radius: var(--r-sm); }
.tripd-hero-copy .xcard-emblem svg { width: 14px; height: 14px; }
.tripd-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 5.4vw, 2.15rem); line-height: 1.06; margin: 9px 0 5px; letter-spacing: -.02em; }
.tripd-tagline { font-family: var(--font-display); font-style: italic; font-size: 1.02rem; color: var(--ink-2); }
.tripd-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 13px; font-size: .82rem; color: var(--ink-2); }
.tripd-diff { display: inline-flex; align-items: center; gap: 5px; color: var(--dc); font-weight: 500; }
.tripd-diff-g { width: 15px; height: 15px; color: var(--dc); }
.tripd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tripd-tag { font-size: .72rem; font-weight: 500; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full); padding: 3px 11px; }

.tripd-prog { display: flex; align-items: center; gap: 12px; margin: 16px 2px 2px; }
.tripd-prog-bar { flex: 1; height: 7px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.tripd-prog-bar i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: inherit; transition: width .4s var(--ease); }
.tripd-prog-txt { font-size: .78rem; color: var(--gold-ink); font-weight: 600; white-space: nowrap; }

/* the vertical day-by-day timeline */
.tripd-timeline { margin-top: 22px; display: flex; flex-direction: column; }
.tday { display: grid; grid-template-columns: 38px 1fr; column-gap: 13px; }
.tday-rail { position: relative; }
.tday-rail::before { content: ''; position: absolute; left: 16px; top: 0; bottom: 0; width: 2px; background: var(--line-2); }
.tday.last .tday-rail::before { background: linear-gradient(var(--line-2), var(--line-2) 30%, transparent); }
.tday-node { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-full); background: var(--surface); border: 2px solid var(--line-2); color: var(--ink-2); font-size: .8rem; font-weight: 600; }
.tday-main { padding-bottom: 22px; min-width: 0; }
.tday.last .tday-main { padding-bottom: 4px; }
.tday-head { display: flex; align-items: baseline; gap: 9px; margin: 5px 0 9px; flex-wrap: wrap; }
.tday-title { font-family: var(--font-display); font-weight: 500; font-size: 1.12rem; color: var(--ink); letter-spacing: -.01em; }

/* camp chip */
.campchip { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 11px; padding: 6px 13px 6px 10px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-full); font-size: .82rem; font-weight: 500; color: var(--glacier-ink); text-decoration: none; transition: border-color .15s, background .15s; }
a.campchip:hover { border-color: var(--glacier); background: var(--surface-2); color: var(--glacier-ink); }
.campchip-g { width: 15px; height: 14px; color: var(--glacier); flex-shrink: 0; }
.campchip.done { color: var(--gold-ink); border-color: var(--gold); }
.campchip.done .campchip-g { color: var(--gold); }
.campchip-check { width: 14px; height: 14px; color: var(--gold); }

/* hike mini-card */
.tday-hikes { list-style: none; }
.hk { position: relative; display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.hk + .hk { margin-top: 8px; }
.hk.pick { box-shadow: inset 3px 0 0 var(--gold); }
.hk-body { flex: 1; min-width: 0; }
.hk-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.hk-name { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; color: var(--ink); line-height: 1.25; }
.hk-name a { color: var(--ink); text-decoration: none; }
.hk-name a:hover { color: var(--marker-ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
.hk-pick { display: inline-flex; align-items: center; gap: 4px; font-size: .66rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gold-ink); white-space: nowrap; }
.hk-pick-g { width: 13px; height: 13px; color: var(--gold); }
.hk-note { font-family: var(--font-display); font-style: italic; font-size: .9rem; color: var(--ink-2); margin-top: 4px; line-height: 1.45; }
.hk-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.hk-stats { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .76rem; color: var(--ink-2); }
.hk-time { color: var(--ink-3); }
.hk-up { width: 12px; height: 12px; color: var(--ink-3); vertical-align: -1px; margin-right: 1px; }
.hk-rating { display: inline-flex; align-items: center; gap: 3px; }
.hk-star { width: 12px; height: 12px; color: var(--gold); }
.hk-swim { display: inline-flex; align-items: center; gap: 3px; color: var(--glacier-ink); }
.hk-drop { width: 11px; height: 13px; color: var(--glacier); }
.hk-spark { flex-shrink: 0; width: 78px; height: 26px; color: var(--contour); opacity: .85; }
.hk-spark svg { width: 100%; height: 100%; }
.hk-check { display: none; flex-shrink: 0; place-items: center; width: 24px; height: 24px; border-radius: var(--r-full); background: var(--gold-soft); color: var(--gold-ink); }
.hk-check svg { width: 13px; height: 13px; }
.hk.done { background: var(--surface-2); }
.hk.done .hk-check { display: grid; }
.hk.done .hk-name, .hk.done .hk-name a { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }

/* Banks' tip aside */
.tripd-tip { display: flex; gap: 13px; align-items: flex-start; margin: 24px 0 4px; padding: 15px 17px; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 0 var(--r) var(--r) 0; }
.tripd-tip-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-full); background: var(--gold-soft); color: var(--gold-ink); flex-shrink: 0; }
.tripd-tip-mark svg { width: 17px; height: 17px; }
.tripd-tip p { font-family: var(--font-display); font-style: italic; font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
.tripd-tip-lead { font-family: var(--font-sans); font-style: normal; font-weight: 600; font-size: .8rem; color: var(--ink); letter-spacing: .01em; margin-right: 3px; }

/* sticky actions */
.tripd-actions { position: sticky; bottom: 0; display: flex; gap: 10px; margin: 26px -20px -40px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--surface-2); border-top: 1px solid var(--line); box-shadow: 0 -8px 20px -12px rgba(27, 33, 28, .28); }
.tripd-actions .btn { flex: 1; }
.tripd-save.is-saved { color: var(--gold-ink); border-color: var(--gold); background: var(--gold-soft); }
.tripd-save.is-saved svg { color: var(--gold); }

/* ── My Trips ── */
.trips-mine { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.mine-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mine-hd h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; }
.btn-sm { padding: 7px 13px; font-size: .82rem; border-radius: var(--r-sm); }
.btn-sm svg { width: 14px; height: 14px; }
.trips-guest { text-align: center; padding: 26px 22px; background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.trips-guest-mark { display: inline-grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 13px; border-radius: var(--r-full); background: var(--surface-2); color: var(--marker); }
.trips-guest-mark svg { width: 22px; height: 20px; }
.trips-guest p { color: var(--ink-2); margin: 0 auto 16px; font-size: .9rem; max-width: 42ch; line-height: 1.5; }
.trips-empty { text-align: center; color: var(--ink-3); padding: 22px; font-size: .9rem; background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r); }
.mytrip-list { display: flex; flex-direction: column; gap: 10px; }
.mytrip { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 13px 15px; }
.mytrip-head { display: flex; align-items: center; gap: 8px; }
.mytrip-emoji { font-size: 1.25rem; }
.mytrip-name { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); padding: 4px 6px; }
.mytrip-name:hover { border-color: var(--line); }
.mytrip-name:focus { outline: none; border-color: var(--glacier); background: var(--surface-2); }
.mytrip-status { font-size: .76rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-full); padding: 5px 10px; }
.mytrip-del { color: var(--ink-3); padding: 5px; border-radius: var(--r-sm); }
.mytrip-del:hover { color: var(--danger); background: var(--surface-2); }
.mytrip-del svg { width: 16px; height: 16px; }
.mytrip-progress { display: flex; align-items: center; gap: 10px; margin: 11px 0 8px; }
.mytrip-progress .bar { flex: 1; height: 6px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.mytrip-progress .bar i { display: block; height: 100%; background: var(--gold); }
.mytrip-prog-txt { font-size: .74rem; color: var(--ink-3); }
.mytrip-items { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.mytrip-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.mytrip-item-mark { display: inline-grid; place-items: center; flex-shrink: 0; }
.mytrip-item-mark svg { width: 15px; height: 14px; color: var(--marker); }
.mytrip-item.done .mytrip-item-mark svg { color: var(--gold); }
.mytrip-item.done .mytrip-item-name { color: var(--ink-3); }
.mytrip-item-name { flex: 1; min-width: 0; font-size: .88rem; }
.mytrip-item-del { color: var(--ink-3); padding: 2px; opacity: .6; }
.mytrip-item-del:hover { color: var(--danger); opacity: 1; }
.mytrip-item-del svg { width: 13px; height: 13px; }
.mytrip-empty { font-size: .82rem; color: var(--ink-3); padding: 6px 0; }
.mytrip-confirm { margin-top: 10px; padding: 10px; background: rgba(179, 38, 30, .08); border-radius: var(--r-sm); font-size: .86rem; color: var(--ink-2); }
.mytrip-map { margin-top: 12px; }
.trip-create { margin-bottom: 12px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); }
.trip-emoji-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.emoji-opt { font-size: 1.25rem; width: 40px; height: 40px; border-radius: var(--r-sm); border: 2px solid var(--line); }
.emoji-opt.sel { border-color: var(--marker); background: rgba(228, 83, 27, .08); }
.trip-create-name { flex: 1; }
.trip-addbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; padding: 12px 14px; background: rgba(228, 83, 27, .07); border: 1px solid var(--marker); border-radius: var(--r); font-size: .88rem; }
.trip-addbar-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.trip-addbar-none { font-size: .82rem; color: var(--ink-3); }
.trip-addbar-x { margin-left: auto; color: var(--ink-3); }
.trip-addbar-x svg { width: 14px; height: 14px; }

/* trips: motion off */
@media (prefers-reduced-motion: reduce) {
  .anim-in, .anim-back { animation: none !important; }
  .xcard:hover .xcard-terrain { transform: none; }
  .xcard:hover { transform: none; }
}

/* ── ranks ──────────────────────────────────────────────────────────── */
.rank-tabs { display: flex; gap: 4px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 2px; }
.rank-tab { flex-shrink: 0; font-size: .84rem; font-weight: 600; color: var(--ink-2); padding: 7px 13px; border-radius: var(--r-full); border: 1px solid var(--line-2); background: var(--surface); }
.rank-tab.active { background: rgba(20, 184, 166, .12); color: var(--glacier-ink); border-color: rgba(20, 184, 166, .34); }
.rank-me { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 11px 14px; background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--r); font-size: .92rem; color: var(--ink); }
.rank-me-badge { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-full); background: var(--gold); color: #fff; }
.rank-me-badge svg { width: 16px; height: 16px; }
/* the leaderboard reads as one framed surface, not floating text in a void */
.rank-list { list-style: none; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255,255,255,.03); overflow: hidden; }
.rank-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; }
.rank-row:not(:last-child) { border-bottom: 1px solid var(--line); }
.rank-row:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.rank-row.is-me { background: var(--gold-soft); box-shadow: inset 2px 0 0 var(--gold); }
.rank-num { width: 26px; text-align: center; font-weight: 600; color: var(--ink-3); font-size: .9rem; }
/* medals: gold for #1 only; the rest read as a confident neutral, not a second brand hue */
.rank-row.top .rank-num { color: var(--ink); font-weight: 700; }
.rank-row.top-1 .rank-num { color: var(--gold); }
.rank-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rank-dog { font-weight: 600; font-size: .92rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-owner { font-size: .74rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* on narrow screens let the owner/level line wrap instead of clipping mid-word */
@media (max-width: 720px) { .rank-owner { white-space: normal; } }
.rank-xp { font-size: .88rem; font-weight: 500; color: var(--ink); }
.rank-follow { font-size: .76rem; font-weight: 600; color: var(--glacier-ink); border: 1px solid var(--line-2); border-radius: var(--r-full); padding: 4px 11px; }
.rank-follow:hover { border-color: var(--glacier); }
.rank-follow.following { color: var(--ink-3); background: var(--surface-2); }
.rank-empty { text-align: center; padding: 34px 16px; color: var(--ink-2); }
.rank-empty-ic { width: 34px; height: 34px; color: var(--ink-3); margin: 0 auto 10px; }
.rank-empty-sub { font-size: .82rem; color: var(--ink-3); margin-top: 4px; }
.rank-empty .btn { margin-top: 14px; }
.rank-skel-row { height: 44px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: rank-skel 1.3s linear infinite; margin-bottom: 4px; }
@keyframes rank-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── profile ────────────────────────────────────────────────────────── */
.pf-loading { display: grid; place-items: center; padding: 60px; }
.pf-load-paw { width: 40px; height: 40px; color: var(--marker); animation: onb-bob 1.4s var(--ease) infinite; }
.pf-hero { display: flex; gap: 16px; align-items: center; }
.pf-avatar { position: relative; flex-shrink: 0; border-radius: var(--r-full); }
.pf-avatar-edit { position: absolute; bottom: -2px; right: -2px; width: 26px; height: 26px; border-radius: var(--r-full); background: var(--marker); color: #fff; display: grid; place-items: center; border: 2px solid var(--surface); }
.pf-avatar-edit svg { width: 13px; height: 13px; }
.pf-dog { font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; line-height: 1.1; display: inline-flex; align-items: center; gap: 8px; }
/* small pencil next to the dog name (was rendering full-size) */
.pf-edit-id { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-full); color: var(--ink-3); }
.pf-edit-id:hover { background: var(--surface-2); color: var(--ink); }
.pf-edit-id svg { width: 15px; height: 15px; }
.pf-owner { font-size: .9rem; color: var(--ink-3); margin-top: 2px; }
.pf-level { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.pf-lvl-txt { font-size: .86rem; font-weight: 600; color: var(--ink-2); }
.pf-paws { display: inline-flex; gap: 3px; }
.pf-paw { color: var(--line-2); } .pf-paw svg { width: 16px; height: 16px; }
.pf-paw.on { color: var(--ink-2); } .pf-paw.gold { color: var(--gold); }
.pf-xp { margin: 18px 0; }
.pf-xp-bar { height: 8px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.pf-xp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--marker)); border-radius: inherit; transition: width .5s var(--ease); }
.pf-xp-txt { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; font-size: .82rem; }
.pf-xp-next { color: var(--ink-3); }
.pf-stats { margin: 4px 0 16px; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pf-actions .btn { flex: 1; min-width: 120px; }
.pf-section { margin-top: 22px; }
.pf-section h3 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 12px; display: flex; align-items: baseline; gap: 8px; }
.pf-badge-count { font-size: .8rem; color: var(--ink-3); font-weight: 400; }
.pf-empty { font-size: .86rem; color: var(--ink-3); }
.pf-region { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pf-region-name { flex: 0 0 40%; font-size: .84rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-region-bar { flex: 1; height: 7px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.pf-region-bar i { display: block; height: 100%; background: var(--glacier); border-radius: inherit; }
.pf-region-n { font-size: .76rem; color: var(--ink-3); width: 30px; text-align: right; }
.pf-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 12px; }
.pf-badge { text-align: center; }
.pf-badge-disc { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 6px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-3); }
.pf-badge-disc svg { width: 24px; height: 24px; }
.pf-badge.earned .pf-badge-disc { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }
.pf-badge.locked { opacity: .5; }
.pf-badge-name { font-size: .72rem; color: var(--ink-2); line-height: 1.2; display: block; }
.pf-recent-list { list-style: none; display: flex; flex-direction: column; }
.pf-recent-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pf-recent-mark svg { width: 16px; height: 15px; color: var(--marker); }
.pf-pioneer { color: var(--marker) !important; }
.pf-recent-name { flex: 1; font-size: .9rem; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.pf-pioneer-tag { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--marker); background: rgba(228, 83, 27, .1); padding: 2px 6px; border-radius: var(--r-full); }
.pf-recent-date { font-size: .78rem; color: var(--ink-3); }
.pf-recent-xp { font-size: .82rem; color: var(--gold); font-weight: 500; }
.pf-signout { margin-top: 26px; text-align: center; }
.pf-signout-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); text-decoration: none; }
.pf-signout-btn:hover { color: var(--danger); }
.pf-signout-btn svg { width: 15px; height: 15px; }
.pf-guest { text-align: center; padding: 26px 14px; }
.pf-guest .avatar-xl { margin: 0 auto 16px; }
.pf-guest p { color: var(--ink-2); margin-bottom: 16px; max-width: 40ch; }
.pf-guest-title { font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; line-height: 1.1; margin-bottom: 8px; }
/* the guest paw reads as a designed empty state, not a missing image */
.pf-guest .avatar-fallback { background: rgba(20, 184, 166, .12); border: 1px solid rgba(20, 184, 166, .32); color: var(--glacier); }

/* bulk backfill */
.bulk-search { position: relative; margin-bottom: 12px; }
.bulk-search-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.bulk-search-ic svg { width: 16px; height: 16px; }
.bulk-in { padding-left: 36px; }
.bulk-list { max-height: 44vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r); }
.bulk-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.bulk-row:last-child { border-bottom: none; }
.bulk-row.on { background: var(--gold-soft); }
.bulk-row input { width: 17px; height: 17px; accent-color: var(--marker); }
.bulk-row-name { flex: 1; font-size: .9rem; }
.bulk-row-meta { font-size: .74rem; color: var(--ink-3); }
.bulk-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.bulk-count { font-size: .84rem; color: var(--ink-2); }

/* social lists / user view */
.social-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.social-main { flex: 1; display: flex; align-items: center; gap: 10px; text-align: left; min-width: 0; }
.social-id { display: flex; flex-direction: column; min-width: 0; }
.social-dog { font-weight: 600; font-size: .9rem; }
.social-owner { font-size: .74rem; color: var(--ink-3); }
.user-view { text-align: center; }
.user-back { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 12px; text-decoration: none; }
.user-back svg { width: 14px; height: 14px; }
.user-hero .avatar-xl { margin: 0 auto 10px; }
.user-dog { font-family: var(--font-display); font-size: 1.3rem; }
.user-owner { font-size: .86rem; color: var(--ink-3); }
.user-lvl { font-size: .84rem; color: var(--ink-2); margin-top: 6px; }
.user-stats { margin: 16px 0; }
.user-act { display: flex; justify-content: center; }

/* ── celebration (the marquee) ──────────────────────────────────────── */
.cel-back {
  position: fixed; inset: 0; z-index: 340;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(9, 9, 11, .74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .2s var(--ease); cursor: pointer; overflow: hidden;
}
.cel-back.in { opacity: 1; }
.cel-back.out { opacity: 0; }
.cel-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cel-stage { position: relative; text-align: center; padding: 24px; max-width: 380px; }
.cel-stamp { display: grid; place-items: center; }
.cel-tri { width: 128px; height: 114px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); transform: scale(0) rotate(-8deg); }
.cel-back.in .cel-tri { animation: cel-stamp .5s cubic-bezier(.2, 1.2, .3, 1) forwards; }
.cel-back.rm .cel-tri { transform: none; }
@keyframes cel-stamp { 0% { transform: scale(0) rotate(-10deg); } 55% { transform: scale(1.16) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
.cel-xp { margin-top: 14px; color: #fff; font-size: 2.6rem; font-weight: 600; line-height: 1; }
.cel-xp-num { font-size: 2.6rem; }
.cel-xp-u { font-size: 1.1rem; color: rgba(255, 255, 255, .7); font-family: var(--font-mono); }
.cel-sub { margin-top: 6px; color: rgba(255, 255, 255, .82); font-family: var(--font-display); font-size: 1.05rem; }
.cel-ribbon { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 14px; background: var(--marker); color: #fff; border-radius: var(--r-full); font-size: .84rem; font-weight: 500; box-shadow: var(--shadow); }
.cel-ribbon-tri { width: 16px; height: 14px; color: #fff; }
.cel-ribbon b { font-family: var(--font-mono); }
.cel-back.in:not(.rm) .cel-ribbon { animation: cel-pop .4s var(--ease) both; }
.cel-extra { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; }
.cel-badge { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow-lg); text-align: left; max-width: 320px; opacity: 0; transform: translateY(12px) scale(.95); }
.cel-badge.in { animation: cel-pop .45s var(--ease) forwards; }
.cel-badge-disc { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-full); background: var(--gold-soft); border: 2px solid var(--gold); color: var(--gold); }
.cel-badge-disc svg { width: 24px; height: 24px; }
.cel-badge-txt { display: flex; flex-direction: column; }
.cel-badge-txt b { font-size: .95rem; color: var(--ink); }
.cel-badge-txt span { font-size: .78rem; color: var(--ink-3); }
.cel-levelup { padding: 16px 20px; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow-lg); text-align: center; opacity: 0; transform: translateY(12px) scale(.95); }
.cel-levelup.in { animation: cel-pop .5s var(--ease) forwards; }
.cel-lvl-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--marker-ink); }
.cel-lvl-title { font-family: var(--font-display); font-size: 1.25rem; margin: 4px 0 10px; color: var(--ink); }
.cel-paws { display: flex; justify-content: center; gap: 5px; }
.cel-paw { color: var(--line-2); } .cel-paw svg { width: 22px; height: 22px; }
.cel-paw.on { color: var(--ink-2); animation: cel-paw-in .4s var(--ease) both; animation-delay: calc(var(--i) * .12s + .2s); }
.cel-paw.gold.on { color: var(--gold); }
.cel-hint { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .55); font-size: .78rem; letter-spacing: .04em; }
@keyframes cel-pop { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes cel-paw-in { from { transform: scale(0); } to { transform: scale(1); } }

/* toast fallback (only used if app:core's #toast-root is absent) */
.ov-toasts { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.ov-toast { background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r-full); font-size: .88rem; font-weight: 500; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.ov-toast.in { opacity: 1; transform: none; }
.ov-toast.out { opacity: 0; }

/* motion off */
@media (prefers-reduced-motion: reduce) {
  .onb-gen-paw, .onb-gen-bar i, .pf-load-paw, .rank-skel-row,
  .cel-tri, .cel-ribbon, .cel-badge, .cel-levelup, .cel-paw.on { animation: none !important; }
  .cel-tri { transform: none !important; }
  .cel-badge, .cel-levelup { opacity: 1 !important; transform: none !important; }
}

/* small screens */
@media (max-width: 480px) {
  .ov-body, .ov-head { padding-left: 16px; padding-right: 16px; }
  .pf-hero { gap: 12px; } .pf-dog { font-size: 1.35rem; }
  .cel-xp, .cel-xp-num { font-size: 2.1rem; }
  .trips-view { padding: 16px 14px 40px; }
  .trips-hero { gap: 12px; }
  .trips-hero-banks { width: 46px; height: 46px; }
  .trips-hero-title { font-size: 1.5rem; }
  .xcard-content { min-height: 164px; padding: 15px 15px 14px; }
  .xcard-name { font-size: 1.35rem; }
  .tripd-hero-copy { padding: 17px 16px 19px; }
  .tripd-timeline { margin-top: 18px; }
  .tday { column-gap: 11px; }
  .tripd-actions { margin: 24px -14px -40px; padding-left: 14px; padding-right: 14px; }
}


/* ── trip mode chip (View on map) ── */
.trip-chip {
  position: absolute; top: 78px; left: 50%; transform: translateX(-50%);
  z-index: 30; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-full); padding: 7px 8px 7px 14px;
  font-size: .86rem; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow); max-width: min(80vw, 420px);
}
.trip-chip .vg { width: 15px; height: 15px; color: var(--marker); flex-shrink: 0; }
.trip-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-chip button { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--ink-3); flex-shrink: 0; }
.trip-chip button:hover { background: var(--surface-2); color: var(--ink); }
.trip-chip button svg { width: 13px; height: 13px; }
@media (max-width: 720px) { .trip-chip { top: 10px; } }


/* ── cover contour texture (real Mount Iron contours from the LINZ DEM),
   in the same marker-orange whisper as the content-page hero bands ── */
.cover-contours {
  position: absolute; inset: 0; height: auto;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.18) 75%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.18) 75%, rgba(0,0,0,0) 100%);
  /* darker, de-oranged and clearly present on the landing cover
     (James 2026-07-10: tint off, darker, especially here) */
  overflow: hidden; pointer-events: none; color: var(--contour-deep); opacity: .45;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 96%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 96%);
}
.cover-contours svg { width: 100%; height: 100%; preserve-aspect-ratio: none; object-fit: cover; }
/* the SVG draws 0.9-unit hairlines in a 1200-unit viewBox - a third of a
   pixel on a phone, invisible at any opacity. Pin the stroke in device
   pixels so the terrain actually reads. */
.cover-contours svg path { vector-effect: non-scaling-stroke; stroke-width: 1.2px; }

.cover-trip-glyph { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: linear-gradient(135deg, #10A396, #0B8578); border: 0; flex-shrink: 0; color: #fff; }
.cover-trip-glyph svg { width: 16px; height: 16px; color: #fff; }

/* crafted select chevron (replaces the OS widget) — ink on the light default */
.sort-select, .f-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 26px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1.5 1.75 4.5 4.5 4.5-4.5' fill='none' stroke='%23646C65' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 11px;
}
/* leaderboard columns: XP right-aligned, fixed action column */
.rank-xp { min-width: 84px; text-align: right; }
.rank-follow { min-width: 96px; text-align: center; }

.cel-banks { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; font-family: var(--font-display); font-style: italic; font-size: 1.02rem; color: var(--ink-2); }
.cel-banks svg { width: 15px; height: 15px; color: var(--gold); }

.trips-hero-sig { margin-top: 7px; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-3); letter-spacing: .02em; }


/* pale chevron for the dark theme's crafted selects */
:root[data-theme="dark"] .sort-select, :root[data-theme="dark"] .f-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1.5 1.75 4.5 4.5 4.5-4.5' fill='none' stroke='%23AEB5AA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* short overlay states read intentional: center them vertically */
.ov-inpanel { display: flex; flex-direction: column; }
.ov-inpanel .ov-body { flex: 1; display: flex; flex-direction: column; }
.rank-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 340px; }
/* guest profile anchors near the top so the heading, paw and CTA read as one block */
.pf-guest { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 9vh; }
@media (min-width: 900px) { .xcard-grid { grid-template-columns: repeat(2, 1fr); } }
/* count-aware panel instrument: never force 2 columns onto an odd cell count */
#panel .instrument, #panel-detail .instrument { grid-template-columns: repeat(2, 1fr); }
#panel .instrument.cells-1, #panel-detail .instrument.cells-1 { grid-template-columns: 1fr; }
#panel .instrument.cells-3, #panel-detail .instrument.cells-3 { grid-template-columns: repeat(3, 1fr); }

.tday-hikes .thike-stats span, .thike-meta span { white-space: nowrap; }

/* ── premium layers: rule chips + hazard callouts ─────────────────── */
.rule-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 11px 4px 9px; border-radius: var(--r-full); border: 1px solid var(--line-2); color: var(--ink); background: var(--surface); }
.rule-chip .dd { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.rule-chip.rule-off .dd { background: var(--ok); }
.rule-chip.rule-lead .dd { background: var(--gold-ink); }
.rule-chip.rule-no { border-color: rgba(239,68,68,.5); }
.rule-chip.rule-no .dd { background: var(--danger); }
/* a poison/closure warning: a clean note (no tinted box), danger icon, and a
   clearly-tappable "see the area" action — not the boxed callout James disliked */
.hazard-box { width: 100%; text-align: left; cursor: pointer; background: none; }
.hazard-box svg { color: var(--marker-hot); }
.hazard-box .hz-see { display: block; margin-top: 4px; color: var(--marker-ink); font-style: normal; font-weight: 600; font-size: .82rem; }
.hazard-box:hover .hz-see { text-decoration: underline; }

/* ── trip itinerary panel (a trip shown on the map owns the left panel) ── */
.trip-head { flex: none; padding: 12px 16px 14px; border-bottom: 1px solid var(--line); }
.trip-head[hidden] { display: none; }
.trip-head-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.trip-eyebrow { font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--marker-ink); }
.trip-exit { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .8rem; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r-full); padding: 5px 12px; background: var(--surface); transition: border-color .15s, color .15s; }
.trip-exit:hover { border-color: var(--marker); color: var(--marker-ink); }
.trip-exit svg { width: 12px; height: 12px; }
.trip-title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.01em; }
.trip-tagline { color: var(--ink-2); font-size: .9rem; margin-top: 2px; }
.trip-meta { margin-top: 8px; font-size: .8rem; color: var(--ink-2); }
/* .panel-scroll already pads and stacks; the wrapper only groups the itinerary */
.trip-scroll { display: flex; flex-direction: column; gap: 10px; }
.trip-summary { color: var(--ink-2); font-size: .92rem; line-height: 1.5; margin-bottom: 4px; }
.trip-dayhead { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 2px; }
.trip-dayhead .td-no { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--marker-ink); }
.trip-dayhead h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.trip-item { display: flex; gap: 12px; align-items: flex-start; padding: 11px 13px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); }
.trip-item.linked { cursor: pointer; transition: border-color .15s, transform .15s var(--ease), box-shadow .2s; }
.trip-item.linked:hover { border-color: var(--marker); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.trip-item.ti-camp.linked:hover { border-color: var(--glacier); }
.trip-item .ti-ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-full); background: rgba(228, 83, 27, .1); color: var(--marker-ink); }
.trip-item .ti-ico svg { width: 15px; height: 15px; }
.trip-item.ti-camp .ti-ico { background: rgba(20, 184, 166, .12); color: var(--glacier-ink); }
.ti-body { min-width: 0; }
.ti-name { font-weight: 600; font-size: .92rem; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.ti-star { width: 13px; height: 13px; color: var(--gold-ink); flex: none; }
.ti-time { display: block; font-size: .78rem; color: var(--ink-3); margin-top: 1px; }
.ti-note { font-size: .82rem; color: var(--ink-2); margin-top: 4px; line-height: 1.4; }
/* trips v2: day tabs, day accents, numbered stops, drive legs, dog brief */
.trip-daytabs { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.tdtab {
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2);
  font-family: var(--font-sans); font-weight: 600; font-size: .76rem;
  padding: 4px 11px; border-radius: var(--r-full); cursor: pointer;
}
.tdtab.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.td-c0 { --dayc: #0E8C7F; } .td-c1 { --dayc: #E4531B; } .td-c2 { --dayc: #6D4FA1; } .td-c3 { --dayc: #2F9E44; }
:root[data-theme="dark"] .td-c0 { --dayc: #2FB3A4; }
:root[data-theme="dark"] .td-c1 { --dayc: #FF7A45; }
:root[data-theme="dark"] .td-c2 { --dayc: #A48BD4; }
:root[data-theme="dark"] .td-c3 { --dayc: #57C46A; }
.tdtab.active.td-c0, .tdtab.active.td-c1, .tdtab.active.td-c2, .tdtab.active.td-c3 { background: var(--dayc); border-color: var(--dayc); color: #fff; }
.trip-dayhead .td-no.td-c0, .trip-dayhead .td-no.td-c1, .trip-dayhead .td-no.td-c2, .trip-dayhead .td-no.td-c3 { color: var(--dayc); }
.ti-num {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--dayc, var(--marker)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700; margin-top: 1px;
}
.ti-drive { margin: -2px 0 4px 44px; font-size: .72rem; color: var(--ink-3); }
.trip-brief {
  display: flex; gap: 10px; margin: 6px 0 10px; padding: 11px 13px;
  border: 1px solid var(--line-2); border-left: 3px solid var(--glacier);
  border-radius: var(--r); background: var(--surface-2);
  font-size: .82rem; color: var(--ink-2); line-height: 1.5;
}
.trip-brief svg { flex: none; width: 15px; height: 15px; color: var(--glacier-ink); margin-top: 2px; }
.trip-tip { display: flex; gap: 10px; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2); font-size: .85rem; color: var(--ink-2); line-height: 1.45; }
.trip-tip svg { flex: none; width: 15px; height: 15px; color: var(--glacier-ink); margin-top: 2px; }

/* ── trip build mode: your own trip's stops are editable in place ──── */
.trip-item.ti-mine { align-items: center; }
.ti-acts { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: none; }
.ti-act { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-full); color: var(--ink-3); transition: background .14s, color .14s; }
.ti-act:hover { background: var(--surface-2); color: var(--ink); }
.ti-act[disabled] { opacity: .25; pointer-events: none; }
.ti-act svg { width: 12px; height: 12px; }
.ti-act.ti-down svg { transform: rotate(180deg); }
.ti-act.ti-x:hover { color: var(--d-hard, #C0392B); }
.trip-build-hint { font-size: .8rem; color: var(--ink-3); text-align: center; padding: 6px 10px 2px; }
.trip-build-empty { text-align: center; padding: 26px 18px; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.trip-build-empty svg { width: 26px; height: 26px; color: var(--glacier); margin: 0 auto 8px; display: block; }
.trip-emoji { font-size: 1.05rem; }

/* ── the Add-to-a-trip picker (in-place sheet) ─────────────────────── */
.trip-pick .ov-sub { display: inline-flex; align-items: center; gap: 7px; }
.trip-pick .tp-item-g { width: 15px; height: 15px; color: var(--marker); flex: none; }
.tp-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.tp-loading, .tp-empty { color: var(--ink-3); font-size: .88rem; padding: 8px 2px; }
.tp-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 13px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer; transition: border-color .15s, transform .15s var(--ease), box-shadow .2s; }
.tp-row:hover { border-color: var(--glacier); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.tp-row.has { opacity: .6; cursor: default; }
.tp-row.has:hover { border-color: var(--line-2); transform: none; box-shadow: none; }
.tp-emoji { font-size: 1.15rem; flex: none; }
.tp-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.tp-name { font-weight: 600; font-size: .92rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-meta { font-size: .76rem; color: var(--ink-3); }
.tp-go { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-full); background: rgba(20, 184, 166, .12); color: var(--glacier-ink); }
.tp-go svg { width: 13px; height: 13px; }
.tp-row.has .tp-go { background: var(--gold-soft, rgba(251,191,36,.15)); color: var(--gold-ink, #92700C); }
.tp-new-btn { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .88rem; color: var(--glacier-ink); padding: 8px 4px; }
.tp-new-btn:hover { text-decoration: underline; }
.tp-new-btn svg { width: 14px; height: 14px; }
.tp-new { display: flex; gap: 8px; }
.tp-new input { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); font-size: .92rem; }
.tp-new input:focus { outline: none; border-color: var(--glacier); }

/* pop-up action row: log + add-to-trip side by side (wraps inside the 240px pop) */
.map-pop .mp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.map-pop .mp-actions .mp-log { white-space: nowrap; flex: none; }
.map-pop .mp-add { background: var(--surface); color: var(--glacier-ink); border: 1px solid var(--line-2); }
.map-pop .mp-add:hover { border-color: var(--glacier); background: var(--surface); }

/* my-trips card: index entry, the itinerary lives on the map */
.mytrip-sum { font-size: .84rem; color: var(--ink-2); margin: 6px 0 10px; }
.mytrip-actions { display: flex; gap: 10px; }

/* mobile: the bottom sheet owns the bottom edge — move map controls up top */
@media (max-width: 720px) {
  .maplibregl-ctrl-bottom-right { top: calc(var(--appbar-h) + env(safe-area-inset-top, 0px) + 20px); bottom: auto; right: 12px; }
  .maplibregl-ctrl-bottom-left { bottom: auto; top: calc(var(--appbar-h) + env(safe-area-inset-top, 0px) + 20px); }
  /* keep the top-right stack legible over dense marker clusters, and quiet the credit */
  .maplibregl-ctrl-attrib { opacity: .8; }
  /* the empty state must sit in view above the fold, not centre in a sheet that runs off-screen */
  .panel-empty { margin: 0; padding-top: 30px; }
  /* the sheet already sits above the tab bar (bottom: var(--tabbar-h)); the last
     card only needs breathing room, not a second tab-bar's worth of clearance */
  .panel-scroll { padding-bottom: 22px; }
}
.trip-actions .btn { white-space: nowrap; font-size: .9rem; }
@media (max-width: 374px) { .trip-actions .btn { font-size: .84rem; padding: 11px 14px; } }

a.ab-btn { text-decoration: none; }
a.tab { text-decoration: none; }

/* hover pop-ups on map markers + clusters (fine pointers only) */
.map-pop {
  position: absolute; z-index: 25; pointer-events: none;
  transform: translate(-50%, calc(-100% - 16px));
  display: flex; flex-direction: column; gap: 5px;
  max-width: 240px; padding: 11px 14px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 16px; box-shadow: var(--shadow);
  font-size: .82rem; line-height: 1.35; color: var(--ink);
}
/* a caret anchors the card to the pin it describes */
.map-pop::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--surface); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.map-pop b { font-family: var(--font-display); font-weight: 600; font-size: .95rem; margin-bottom: 1px; }
.map-pop .mp-link { display: inline-block; margin-top: 4px; color: var(--glacier-ink); font-weight: 600; font-size: .82rem; text-decoration: none; pointer-events: auto; }
.map-pop .mp-link:hover { text-decoration: underline; }
/* premium-layer pop internals: rule verdicts, evidence quotes, source line */
.map-pop .mp-rule { display: inline-block; margin-top: 5px; font-weight: 700; font-size: .8rem; color: var(--ink); }
.map-pop .mp-rule.ok { color: var(--ok); }
.map-pop .mp-rule.no { color: var(--danger); }
.map-pop .mp-note { display: block; margin-top: 4px; font-size: .78rem; color: var(--ink-2); line-height: 1.35; }
.map-pop .mp-src { display: block; margin-top: 6px; font-size: .68rem; color: var(--ink-3); }

/* log-a-stay inside the pinned pop-up: teal pill, same voice as the detail panel */
.map-pop .mp-log { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 7px 13px; border-radius: var(--r-full); background: linear-gradient(135deg, #10A396, #0B8578); color: #fff; font-weight: 600; font-size: .8rem; pointer-events: auto; cursor: pointer; align-self: flex-start; }
.map-pop .mp-log:hover { background: linear-gradient(135deg, #14B8A6, #0D9488); }
.map-pop .mp-log svg { width: 13px; height: 13px; }
.map-pop .mp-log .xp { font-size: .72rem; font-weight: 700; opacity: .85; }
.map-pop .mp-log.done { background: var(--gold-soft, rgba(251,191,36,.15)); color: var(--gold-ink, #92700C); cursor: default; }
.maplibregl-ctrl-group button.dim { opacity: .4; }
/* custom control buttons draw a raw inline svg: centre it like the built-in icons */
.maplibregl-ctrl-group button.ctrl-glyph { display: grid; place-items: center; }
.maplibregl-ctrl-group button.ctrl-glyph svg { display: block; }
.maplibregl-ctrl-group button.ctrl-3d { font-family: var(--font-sans); font-weight: 800; font-size: .72rem; letter-spacing: .02em; color: var(--ink-2); }
.maplibregl-ctrl-group button.ctrl-3d.on { color: var(--glacier-ink); }

/* one-time "this map is 3D" hint */
.hint-3d {
  position: absolute; z-index: 45; left: 50%; bottom: 26px;
  transform: translate(-50%, 8px); opacity: 0;
  display: flex; align-items: center; gap: 10px;
  max-width: min(92%, 480px); padding: 11px 12px 11px 15px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-full);
  box-shadow: var(--shadow-lg); font-size: .85rem; color: var(--ink-2); line-height: 1.35;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.hint-3d.in { opacity: 1; transform: translate(-50%, 0); }
.hint-3d b { color: var(--ink); }
.hint-3d svg { flex: none; width: 18px; height: 18px; color: var(--marker); }
.hint-3d button { flex: none; font-weight: 700; font-size: .8rem; color: var(--glacier-ink); padding: 6px 10px; border-radius: var(--r-full); }
.hint-3d button:hover { background: var(--surface-2); }
@media (max-width: 720px) {
  /* the top holds the controls (filter pill + zoom stack) and the bottom holds
     the sheet: a wide pill pinned to the top collided with both and wrapped into
     an odd blob. Float it as a clean card in the map band just above the peek
     sheet, spanning the width and clear of the controls. */
  .hint-3d {
    top: auto; left: 12px; right: 12px;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--peek-h, 236px) + 14px);
    max-width: none; border-radius: 16px;
    transform: translateY(8px); justify-content: flex-start;
  }
  .hint-3d.in { transform: translateY(0); }
}

/* ── Map layers panel: labeled, obvious, POV glass ─────────────────── */
.maplibregl-ctrl-bottom-right { overflow: visible; }
/* unify the bottom-right cluster: zoom + terrain + layers share one pill shape,
   one border token and one shadow, so the stack reads as a single control family */
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group {
  border-radius: var(--r-full) !important;
  border: 0 !important;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: var(--glass-ring) !important;
  overflow: hidden;
}
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group button {
  width: 32px !important; height: 32px !important; background: transparent !important;
}
.maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin-bottom: 8px !important; }
/* lift the whole layers control above the sibling zoom/terrain groups so its open
   card cleanly overlays them (esp. on mobile where the card drops down over them) */
.layers-ctrl { position: relative; pointer-events: auto; z-index: 40; }
.layers-btn {
  /* identical language to every other rail control: a 32px glass circle */
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--glass-bg); color: var(--ink-2);
  border: 0; border-radius: var(--r-full);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: var(--glass-ring);
  cursor: pointer;
}
.layers-btn:hover, .layers-btn.on { color: var(--glacier-ink); border-color: var(--glacier); }
/* maplibre's generic `.maplibregl-ctrl button:hover` wash (rgb(0 0 0/5%)) wins
   the cascade over our shorthand and REPLACES the background - on touch a tap
   leaves sticky :hover, so the button went see-through. Pin the background with
   !important; our hover affordance is the teal colour, not the wash.
   The layers button pins the SAME glass as the zoom/3D control groups so the
   whole right rail reads as one family (James: it looked different, solid). */
.maplibregl-ctrl button.layers-btn { background: var(--glass-bg) !important; }
.maplibregl-ctrl button.filters-btn { background: var(--surface) !important; }
/* mobile-only Filters pill: mirrors the Layers pill from the opposite corner,
   so the bottom sheet can lead with results instead of controls */
.filters-ctrl { pointer-events: auto; }
.filters-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  /* same height as the Layers circle across the map so the two read as an
     aligned pair (34px outer == the 32px glass circle + its 1px border) */
  height: 34px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2);
  font-weight: 600; font-size: .82rem; font-family: var(--font-sans);
  padding: 0 14px; border-radius: var(--r-full);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, .05);
  cursor: pointer;
}
.filters-btn:hover { color: var(--glacier-ink); border-color: var(--glacier); }
@media (min-width: 721px) { .filters-ctrl { display: none; } }
/* the list switcher only rides in the drawer on phones; the desktop keeps its
   tabs in the panel head, so hide the drawer copy there */
@media (min-width: 721px) { .f-listtab { display: none; } }
/* POV glass: theme-token border, inset ring, and a whisper of teal light from the top */
.layers-card {
  /* pinned to the viewport under the app bar: the pill sits mid-stack on the
     bottom-anchored control rail, so pill-relative opening clips on short
     screens in BOTH directions */
  position: fixed; right: 20px; top: calc(92px + env(safe-area-inset-top, 0px)); z-index: 40;
  max-height: calc(100dvh - 118px - env(safe-area-inset-bottom, 0px)); overflow-y: auto;
  width: min(300px, calc(100vw - 32px));
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  backdrop-filter: blur(24px) saturate(1.7);
  border: 1px solid var(--line-2);
  border-radius: 16px; padding: 14px 14px 10px;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 26px 44px -32px rgba(20, 184, 166, .28);
  text-align: left;
}
.layers-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.layers-head .layers-title { margin: 0; }
.layers-close {
  background: none; border: 0; color: var(--ink-3); cursor: pointer;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.layers-close:hover { color: var(--ink); background: var(--surface-2); }
.layers-title {
  font-size: .68rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--glacier); margin: 0 0 10px; font-family: var(--font-sans);
}
.lrow { padding: 9px 0; border-top: 1px solid var(--line); }
.lrow:first-of-type { border-top: 0; }
.lrow-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lrow-text { display: flex; flex-direction: column; gap: 1px; cursor: pointer; min-width: 0; }
.lrow-label { font-weight: 600; font-size: .92rem; color: var(--ink); line-height: 1.25; }
.lrow-sub { font-size: .74rem; color: var(--ink-3); }
.lrow.off .lrow-label { color: var(--ink-3); }
.lrow-note { margin: 4px 0 0; font-size: .7rem; line-height: 1.45; color: var(--ink-3); }
.lrow.off .lrow-note { display: none; }
.lsubrows { margin: 2px 0 0 24px; }
.lsubrows .lrow-sub-row { padding: 5px 0; border-top: 0; }
.lsubrows .lrow-sub-row .lrow-label { font-weight: 500; font-size: .84rem; color: var(--ink-2); }
.lsubrows .lrow-sub-row .lswitch { width: 34px; height: 20px; }
.lsubrows .lrow-sub-row .lswitch::after { width: 14px; height: 14px; }
.lsubrows .lrow-sub-row .lswitch[aria-checked="true"]::after { transform: translateX(14px); }
/* sub-rows stay visible AND clickable when the parent is off — flipping one
   back on revives the parent (James: "it kind of disappears" was the bug) */
.lrow.off .lsubrows { opacity: .55; }
.lswitch {
  flex-shrink: 0; width: 40px; height: 23px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line-2);
  position: relative; cursor: pointer; transition: background .18s, border-color .18s;
}
.lswitch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--ink-3); transition: transform .18s var(--ease), background .18s;
}
.lswitch[aria-checked="true"] { background: linear-gradient(135deg, #10A396, #0B8578); border-color: transparent; }
.lswitch[aria-checked="true"]::after { transform: translateX(17px); background: #fff; }

/* difficulty segmented control: the one always-visible track filter */
.seg-diffs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  margin: 8px 16px 2px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .14);
}
.seg {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 2px; border-radius: var(--r-full);
  font-family: var(--font-sans); font-size: .78rem; font-weight: 600;
  color: var(--ink-3); white-space: nowrap; cursor: pointer;
  transition: background .15s var(--ease), color .15s;
}
.seg .seg-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--dc); opacity: .4; transition: opacity .15s;
}
.seg[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-2); }
.seg[aria-pressed="true"] .seg-dot { opacity: 1; }
.seg:hover { color: var(--ink); }
/* accommodation type filter in the layers card: same segmented control as the
   difficulty one, three columns, every dot teal (all accommodation is teal) */
/* the drawer body is also surface-2, so lift the track's edge so it stays legible */
.seg-diffs-drawer {
  margin: 0; background: none; border: 0; box-shadow: none; padding: 0; gap: 8px;
}
.seg-diffs-drawer .seg {
  border: 1px solid var(--line-2); background: var(--surface);
  padding: 8px 2px; color: var(--ink-2);
}
.seg-diffs-drawer .seg[aria-pressed="true"] { border-color: var(--glacier); color: var(--glacier-ink); background: var(--surface); box-shadow: none; }
.map-pop .mp-sub { color: var(--ink-3); font-size: .78rem; }
.map-pop .mp-data { color: var(--ink-2); font-size: .76rem; }
.map-pop .mp-item { display: block; color: var(--ink-2); font-size: .78rem; padding-left: 10px; position: relative; }
.map-pop .mp-item::before { content: ""; position: absolute; left: 0; top: .55em; width: 4px; height: 4px; border-radius: 50%; background: var(--marker); }
.map-pop .mp-item.mp-stay::before { background: var(--glacier); }

/* ── bottom tab bar (mobile): read as a solid surface, clear its own height,
   and signal the active section in teal to match the desktop app bar ──── */
@media (max-width: 720px) {
  /* phones: the layers control opens as a clean bottom sheet over a scrim,
     not a floating corner popover that hides half the map. */
  .layers-scrim {
    position: fixed; inset: 0; z-index: 44;
    background: rgba(12, 16, 22, .42); opacity: 0;
    transition: opacity .28s var(--ease);
  }
  .layers-scrim.open { opacity: 1; }
  .layers-card {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-width: none;
    max-height: 82dvh; overflow-y: auto;
    background: var(--surface-2);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 0; border-radius: 22px 22px 0 0;
    padding: 6px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    transform: translateY(101%); z-index: 45;
    transition: transform .3s var(--ease);
    box-shadow: 0 -12px 40px -14px rgba(12, 16, 22, .5);
  }
  .layers-card.open { transform: translateY(0); }
  /* a grab handle for the sheet feel */
  .layers-card::before {
    content: ""; display: block; width: 42px; height: 5px; margin: 8px auto 6px;
    border-radius: 3px; background: var(--line-2);
  }
  .layers-head {
    position: sticky; top: 0; z-index: 1; margin: 0 0 6px; padding: 6px 0 10px;
    background: var(--surface-2); border-bottom: 1px solid var(--line);
  }
  .layers-title { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
  .layers-close { width: 34px; height: 34px; }
  .lrow { padding: 12px 0; }
}

/* ════════════════════════════════════════════════════════════════════
   Accommodation surfaces — /stays and /campsites/community/* (build/pages/stays.py)
   Added by the community-camps + stays build.

   IMPORTANT: these two surfaces are CONTENT pages, so they load
   fonts.css + waymark.css only (see build/base.py page()); app.css is
   linked exclusively by the map app (build/pages/app.py). The pages are
   therefore built entirely from existing waymark.css classes and are
   fully styled WITHOUT anything in this block.

   The rules below are OPT-IN polish only. They are scoped to the
   .accom-surface wrapper that stays.py puts around each page body, so
   they are inert on the map app and cannot regress it. They take effect
   only if the lead ALSO links app.css on content pages, or folds these
   two rules into waymark.css. Nothing here is load-bearing.
   ════════════════════════════════════════════════════════════════════ */
.accom-surface .ccard .meta .data { font-weight: 700; color: var(--ink); }
.accom-surface .hero .chips { margin-top: 18px; }

/* build 2026-07-10: version rotate after the _headers TTL fix (heals any cache poisoned in the propagation window) */

.lrow-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ld, var(--marker)); margin-right: 8px; flex: none; vertical-align: 0; }

/* ── trips: resolve bar + live pips (rescope inc1) ─────────────────────── */
.trip-resolve { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.tr-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 99px; background: var(--surface); cursor: pointer; }
.tr-chip svg { width: 14px; height: 14px; color: var(--ink-3); flex: none; }
.tr-chip input, .tr-chip select { border: 0; background: none; color: var(--ink);
  font: 500 12.5px var(--font-mono); outline: none; max-width: 128px; }
.tr-chip:focus-within { border-color: var(--marker); }
.ti-pip { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-left: 7px; vertical-align: 1px; background: var(--ok); }
.ti-pip.pip-caution { background: #E3A93C; }
.ti-pip.pip-hold { background: var(--danger); }
.ti-state { display: block; font-size: 12px; margin-top: 2px; }
.ti-state.ts-caution { color: #A87A1E; }
:root[data-theme="dark"] .ti-state.ts-caution { color: #E3A93C; }
.ti-state.ts-hold { color: var(--danger); }
.ti-leave { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* ── #plan: the corridor planner card ──────────────────────────────────── */
.plan-card { position: fixed; right: 20px; top: calc(92px + env(safe-area-inset-top, 0px)); z-index: 41; width: 300px;
  max-height: calc(100dvh - 118px); overflow: auto;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  backdrop-filter: blur(24px) saturate(1.7);
  border: 0; border-radius: 14px; padding: 14px 14px 16px;
  box-shadow: var(--glass-ring), 0 12px 34px rgba(0,0,0,.18); }
.plan-head { display: flex; align-items: center; justify-content: space-between; }
.plan-head h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.plan-head h3 svg { width: 15px; height: 15px; color: var(--marker); }
.plan-sub { font-size: 12.5px; color: var(--ink-3); margin: 4px 0 12px; }
.plan-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.plan-f { display: flex; flex-direction: column; gap: 3px; flex: 1 1 100%; }
.plan-f.plan-half { flex: 1 1 calc(50% - 4px); }
.plan-f span { font: 600 10.5px var(--font-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); }
.plan-f input, .plan-f select { border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 14px; outline: none; }
.plan-f input:focus, .plan-f select:focus { border-color: var(--marker); }
.plan-go { width: 100%; justify-content: center; }
.plan-result { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 11px; }
.plan-stats { font-size: 12.5px; color: var(--ink-2); }
.plan-gap { font-size: 12.5px; color: #A87A1E; margin-top: 7px; }
:root[data-theme="dark"] .plan-gap { color: #E3A93C; }
.plan-miss { font-size: 13px; color: var(--ink-2); }
.plan-save { width: 100%; justify-content: center; margin-top: 10px; }
@media (max-width: 720px) { .plan-card { left: 12px; width: auto; top: 62px; } }

/* thread-the-drive band in the trips overlay (curated gallery stays the body) */
.corridor-band { display: flex; align-items: center; gap: 13px; margin: 4px 0 18px;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color .15s ease; }
.corridor-band:hover { border-color: var(--marker); }
.cb-ico svg { width: 19px; height: 19px; color: var(--marker); }
.cb-copy { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.cb-copy strong { font-size: 14.5px; }
.cb-copy span { font-size: 12.5px; color: var(--ink-3); }
.cb-go svg { width: 15px; height: 15px; color: var(--ink-3); }

/* trip builder: via stops */
.plan-vias { display: flex; flex-direction: column; gap: 8px; flex: 1 1 100%; }
.plan-vias:empty { display: none; }
.plan-via-in { display: flex; gap: 6px; align-items: center; }
.plan-via-in input { flex: 1; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 14px; outline: none; }
.plan-via-in input:focus { border-color: var(--marker); }
.plan-via-x { border: 0; background: none; color: var(--ink-3); cursor: pointer;
  padding: 4px; border-radius: 7px; }
.plan-via-x:hover { color: var(--danger); }
.plan-via-x svg { width: 13px; height: 13px; }
.plan-addvia { display: inline-flex; align-items: center; gap: 6px; border: 0;
  background: none; color: var(--marker); font-size: 12.5px; font-weight: 600;
  cursor: pointer; padding: 0; margin: -2px 0 2px; }
.plan-addvia svg { width: 13px; height: 13px; }

/* clickable poison box: tap zooms the map over the whole operation area */
button.hazard-fit { width: 100%; text-align: left; cursor: pointer; font: inherit;
  color: inherit; transition: border-color .15s ease; }
button.hazard-fit:hover { border-color: var(--marker-hot); }
.hz-see { display: block; font-style: normal; font-size: 11.5px; margin-top: 4px;
  color: var(--marker-hot); font-weight: 600; }

/* ── the trips map: NZ from trail dots, trips as glowing territories ──── */
.tmap-wrap { margin: 6px auto 18px; max-width: 520px; }
.tmap { width: 100%; height: auto; display: block; }
.tm-dots { fill: none; stroke: var(--ink-3); stroke-width: 2.1; stroke-linecap: round; opacity: .26; }
.tm-trip { cursor: pointer; outline: none; }
.tm-glow { transition: opacity .25s ease; opacity: .8; }
.tm-core { transition: r .2s ease; }
.tm-ring { stroke-width: 1.3; opacity: .5; transition: opacity .2s ease, r .2s ease; }
.tm-tag { opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.tm-name { font: 700 14px var(--font-display, serif); fill: var(--ink); paint-order: stroke;
  stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.tm-meta { font: 500 10px var(--font-mono); fill: var(--ink-2); letter-spacing: .04em;
  paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round; }
.tm-trip:hover .tm-tag, .tm-trip:focus-visible .tm-tag { opacity: 1; }
.tm-trip:hover .tm-glow, .tm-trip:focus-visible .tm-glow { opacity: 1.35; }
.tm-trip:hover .tm-ring, .tm-trip:focus-visible .tm-ring { opacity: .9; }
.tm-trip:focus-visible .tm-core { stroke: var(--ink); stroke-width: 2; }
:root[data-theme="dark"] .tm-name { stroke: var(--surface); }
:root[data-theme="dark"] .tm-meta { stroke: var(--surface); }

/* compact trip list under the map */
.tl-list { display: flex; flex-direction: column; margin-bottom: 26px; }
.tl-row { display: flex; align-items: center; gap: 11px; padding: 10px 8px; border: 0;
  border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit;
  cursor: pointer; text-align: left; transition: background .12s ease; border-radius: 8px; }
.tl-row:hover { background: var(--surface); }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--th); flex: none; }
.tl-name { font-weight: 600; font-size: 14.5px; flex: 1; }
.tl-meta { font-size: 11.5px; color: var(--ink-3); }
.tl-go svg { width: 13px; height: 13px; color: var(--ink-3); }

/* ── the Trips panel view ──────────────────────────────────────────────── */
.tv { padding: 4px 2px 18px; }
.tv-loading { padding: 30px 12px; color: var(--ink-3); font-size: 13.5px; }
.tv-eyebrow { margin: 8px 0 8px 2px; }
.tv-hero { display: block; width: 100%; position: relative; border: 0; cursor: pointer;
  border-radius: 16px; overflow: hidden; text-align: left; padding: 0;
  background: color-mix(in srgb, var(--th) 14%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th) 34%, transparent); }
.tv-hero-art { position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: .5; color: var(--th); }
.tv-hero-copy { position: relative; display: flex; flex-direction: column; gap: 3px;
  padding: 20px 18px 16px; }
.tv-hero-copy strong { font-family: var(--font-display); font-size: 1.28rem; font-weight: 600;
  letter-spacing: -.01em; }
.tv-hero-copy > span { font-size: 12.5px; color: var(--ink-2); }
.tv-hero-meta { color: var(--ink-3) !important; font-size: 11px !important; margin-top: 3px; }
.tv-hero:hover { box-shadow: inset 0 0 0 1.5px var(--th); }
.tv-plan { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 12px 14px;
  border: 1px dashed var(--line-2); border-radius: 12px; text-decoration: none; color: inherit;
  font-size: 13px; transition: border-color .15s ease; }
.tv-plan:hover { border-color: var(--marker); }
.tv-plan svg { width: 16px; height: 16px; color: var(--marker); flex: none; }
.tv-sec { margin: 18px 0 4px 2px; }

/* ── TRIPS MODE: the feed slides away, the rail slides in over the map ── */
#panel { transition: transform .5s cubic-bezier(.55, 0, .28, 1); }
body.trips-mode #panel { transform: translateX(calc(-100% - 30px)) !important; }
@media (max-width: 720px) {
  body.trips-mode #panel { transform: translateY(112%) !important; }
}
.trips-rail {
  position: fixed; z-index: 39;
  top: calc(92px + env(safe-area-inset-top, 0px)); left: 20px; bottom: 20px;
  width: 400px; overflow-y: auto; padding: 20px 18px 24px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  backdrop-filter: blur(24px) saturate(1.7);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-ring), 0 18px 44px -14px rgba(21, 25, 34, .3);
  transform: translateX(calc(-100% - 30px));
  transition: transform .55s cubic-bezier(.55, 0, .28, 1);
}
.trips-rail.in { transform: none; }
.trips-rail[hidden] { display: none; }
@media (max-width: 720px) {
  .trips-rail { left: 10px; right: 10px; width: auto; top: auto; height: 62dvh;
    bottom: calc(var(--tabbar-h) + 8px); transform: translateY(115%); }
  .trips-rail.in { transform: none; }
}
.tr-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem;
  letter-spacing: -.01em; margin: 2px 0 14px; }
.tr-build { display: flex; align-items: center; gap: 11px; padding: 13px 14px;
  border: 1px dashed var(--line-2); border-radius: 13px; margin-bottom: 16px;
  text-decoration: none; color: inherit; transition: border-color .15s ease; }
.tr-build:hover { border-color: var(--marker); }
.tr-build svg { width: 17px; height: 17px; color: var(--marker); flex: none; }
.tr-build strong { display: block; font-size: 14px; }
.tr-build span span { display: block; font-size: 12px; color: var(--ink-3); }
.tr-cards { display: flex; flex-direction: column; gap: 10px; }
.tr-card { position: relative; display: block; width: 100%; text-align: left; border: 0;
  cursor: pointer; border-radius: 14px; overflow: hidden; padding: 0;
  background: color-mix(in srgb, var(--th) 13%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th) 30%, transparent);
  transition: box-shadow .15s ease, transform .15s ease; }
.tr-card:hover { box-shadow: inset 0 0 0 1.5px var(--th); transform: translateY(-1px); }
.tr-card-art { position: absolute; inset: 0; background-size: cover;
  background-position: center; opacity: .42; color: var(--th); }
.tr-card-copy { position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 16px 15px 13px; }
.tr-card-copy strong { font-family: var(--font-display); font-size: 1.06rem;
  font-weight: 600; letter-spacing: -.01em; }
.tr-card-tag { font-size: 12px; color: var(--ink-2); }
.tr-card-meta { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
.tr-mine-hd { margin: 18px 0 6px 2px; }
.tr-mine { display: flex; align-items: center; justify-content: space-between; width: 100%;
  border: 0; background: none; padding: 9px 6px; border-bottom: 1px solid var(--line);
  font: inherit; color: inherit; cursor: pointer; border-radius: 8px; }
.tr-mine:hover { background: var(--surface); }
.tr-mine-name { font-weight: 600; font-size: 13.5px; }
.tr-mine .data { font-size: 11px; color: var(--ink-3); }

/* rail variant of the original gallery card */
.rail-xcard { min-height: 88px; }
.rail-xcard .xcard-open { min-height: 88px; padding: 11px 14px 9px; }
.rail-xcard .xcard-name { font-size: 1.02rem; }
.rail-xcard .xcard-tagline { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-xcard.hot { outline: 2px solid var(--marker); outline-offset: -2px; border-radius: 16px; }

/* rail cards: compact — override the gallery's tall content block */
.rail-xcard .xcard-content { min-height: 0; padding: 12px 15px 11px; gap: 1px; }
.rail-xcard .xcard-mid { margin: 0; }

/* ── the map curtain: nothing shows until the map is truly ready. The paw
   walks — pads land one after another, the palm settles last — then the
   curtain breathes out and lifts. ───────────────────────────────────── */
#map-curtain {
  position: fixed; inset: 0; z-index: 65;
  display: grid; place-items: center;
  background: var(--paper);
  transition: opacity .6s var(--ease);
}
#map-curtain.lift { opacity: 0; pointer-events: none; }
#map-curtain[hidden] { display: none; }
.mc-paw { width: 72px; height: 72px; color: var(--marker); }
.mc-p { opacity: 0; transform-origin: center; animation: mc-land 1.6s var(--ease) infinite; }
.mc-p1 { animation-delay: 0s; }
.mc-p2 { animation-delay: .12s; }
.mc-p3 { animation-delay: .24s; }
.mc-p4 { animation-delay: .36s; }
.mc-p5 { animation-delay: .52s; }
@keyframes mc-land {
  0% { opacity: 0; transform: scale(.4); }
  18% { opacity: 1; transform: scale(1.08); }
  26% { transform: scale(1); }
  62% { opacity: 1; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(.92); }
}
@media (prefers-reduced-motion: reduce) {
  .mc-p { animation: none; opacity: 1; }
}

.mc-word { margin-top: 18px; font: 500 14px var(--font-sans); letter-spacing: .01em;
  color: var(--ink-2); text-align: center; min-height: 1.4em;
  transition: opacity .3s var(--ease); }
#map-curtain { grid-auto-flow: row; align-content: center; justify-items: center; }

/* the NZ line earns its place: bigger, wider-set, unmistakable */
.cover-eyebrow { font-size: .92rem; letter-spacing: .22em; color: var(--glacier-ink); }

/* ── Pack Membership (premium.js) ─────────────────────────────────── */
.pm-head { text-align: center; }
.pm-mark { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 10px; border-radius: var(--r-full); background: rgba(20, 184, 166, .12); border: 1px solid rgba(20, 184, 166, .32); color: var(--glacier); }
.pm-mark svg { width: 24px; height: 24px; }
.pm-perks { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 6px 0 18px; }
.pm-perk { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--r-sm); padding: 4px 6px; }
.pm-perk.hi { background: var(--surface-2); outline: 1px solid var(--line-2); }
.pm-perk-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line-2); color: var(--glacier-ink); }
.pm-perk-ic svg { width: 17px; height: 17px; }
.pm-perk-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pm-perk-tx b { font-size: .92rem; font-weight: 600; color: var(--ink); }
.pm-perk-tx span { font-size: .82rem; color: var(--ink-3); line-height: 1.35; }
.pm-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.pm-price { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 10px; border-radius: var(--r-md, 12px); border: 1px solid var(--line-2); background: var(--surface); }
.pm-price:hover { border-color: var(--glacier); }
.pm-price-annual { border-color: var(--glacier); background: rgba(20, 184, 166, .06); }
.pm-price-amt { font-size: 1.06rem; font-weight: 700; color: var(--ink); }
.pm-price-per { font-size: .74rem; color: var(--ink-3); text-align: center; }
.pm-price.soon { opacity: .75; }
.pm-note { font-size: .8rem; color: var(--ink-3); margin-bottom: 12px; line-height: 1.4; }
.pm-soon { border-top: 1px solid var(--line); padding-top: 14px; }
.pm-soon.pulse { animation: pm-pulse .5s var(--ease); }
@keyframes pm-pulse { 0% { transform: translateY(0); } 30% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
.pm-soon-lead { font-weight: 600; font-size: .95rem; margin-bottom: 4px; }
.pm-always { font-size: .76rem; color: var(--ink-3); line-height: 1.45; border-top: 1px solid var(--line); padding-top: 12px; }
.pm-active { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pm-active-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; color: var(--glacier-ink); background: rgba(20, 184, 166, .1); border: 1px solid rgba(20, 184, 166, .3); border-radius: var(--r-full); padding: 6px 12px; }
.pm-active-badge svg { width: 14px; height: 14px; }
.pm-active-until { font-size: .8rem; color: var(--ink-3); }

/* profile membership row */
.pf-member { margin: 10px 0 4px; }
.pf-member-row { display: flex; width: 100%; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: var(--r-md, 12px); border: 1px solid var(--line-2); background: var(--surface); }
.pf-member-row:hover { border-color: var(--glacier); }
.pf-member-row.pitch { background: linear-gradient(135deg, rgba(20, 184, 166, .07), transparent 60%); }
.pf-member-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-full); background: rgba(20, 184, 166, .12); border: 1px solid rgba(20, 184, 166, .3); color: var(--glacier); }
.pf-member-ic svg { width: 17px; height: 17px; }
.pf-member-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pf-member-tx b { font-size: .92rem; font-weight: 600; color: var(--ink); }
.pf-member-tx span { font-size: .8rem; color: var(--ink-3); line-height: 1.35; }
.pf-member-go { color: var(--ink-3); } .pf-member-go svg { width: 15px; height: 15px; }

/* trail watch */
.pf-watch-list { list-style: none; display: flex; flex-direction: column; }
.pf-watch-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pf-watch-mark { flex: none; color: var(--marker-hot, #E4531B); margin-top: 2px; }
.pf-watch-mark svg { width: 16px; height: 16px; }
.pf-watch-item.near .pf-watch-mark { color: var(--gold); }
.pf-watch-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-watch-tx a { font-size: .9rem; font-weight: 500; color: var(--ink); text-decoration: none; }
.pf-watch-tx a:hover { text-decoration: underline; }
.pf-watch-tx span { font-size: .78rem; color: var(--ink-3); }

/* portrait editor: photo path */
.onb-photo-hint { font-size: .78rem; color: var(--ink-3); text-align: center; margin: 8px 0 2px; line-height: 1.4; }
.onb-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--ink-3); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
.onb-or::before, .onb-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* offline pack button state */
.detail-actions [data-offline].is-on { color: var(--glacier-ink); border-color: var(--glacier); }