/* ============================================================
   BOUTELS — shared.css
   Design tokens + cross-page components. Loaded by BOTH the site
   (main.css @imports this) AND the map (/road-trip-planner/ links it directly).
   SINGLE SOURCE OF TRUTH for anything shared — edit shared
   components HERE, never re-declare them in main.css or the map's
   inline <style>. (The map keeps only genuine overrides: its
   left-slide drawers + its own geocomplete styling.)
   Sections:
     1. Design tokens (:root)
     2. Membership "Profile" line
     3. Geocomplete search dropdown
     4. Inline text link (.text-link)
     5. Drawers — nominate / feedback / sign-in / photo (ONE component)
     6. One primary drawer button (+ Google modifier) & "or" divider
   ============================================================ */

/* ---- 1. DESIGN TOKENS ---- */
:root {
  /* Colors */
  --color-bg:           #F2EDE4;   /* Warm cream — page background */
  --color-text:         #111111;   /* Near-black — body text */
  --color-text-muted:   #3D3B37;   /* Warm muted — secondary body text */
  --color-headline:     #1A1A18;   /* Warm near-black — headings, logo */
  --color-teal:         #1A8F7C;   /* Boutels teal — 3.44:1 on cream ✓, 4.38:1 on dark ✓ */
  --color-gold:         #E8B62C;   /* Boutel+ Gold — the ONE secondary gold (matches the map's --gold) */
  --color-gold-text:    #3A2E00;   /* dark-gold text/icons ON gold (Boutel+ badge, gold buttons/tabs — site + map) */
  --color-gem:          #9b5da7;   /* Gem purple — matches the map's --gem marker color; the gem-page badge */
  --color-gold-tint:    #FBF0D6;   /* light gold — Boutel+ placeholder tint (a soft wash of --color-gold) */
  --color-tan-active:   #E7DECB;   /* darker warm beige — hover + open state for the caret-circle accordions */
  --color-hm-badge:     #EDE0C8;   /* Honorable Mention badge bg — matches the map's --cream (HM is NEVER teal) */
  --color-brown:        #6B4226;   /* Warm brown, matches the map's --brown (HM badge text + map subheads/pills) */
  --color-hm-badge-text:var(--color-brown); /* Honorable Mention badge text */
  --color-gem:          #9B5DA7;   /* Gem marker/type icon (matches the map's --gem) */
  --color-park:         #3F7D4F;   /* National Park marker/type icon (map --np) */
  --color-rest:         #2C6FB5;   /* Rest Area marker/type icon (map --rest) */
  --color-ev:           #2E9E5B;   /* EV charger marker/type icon (map --ev) */

  --color-dark-bg:      #1A1A18;   /* Dark sections, footer */
  --color-dark-text:    #F2EDE4;   /* Text on dark sections */
  --color-border:       #E4E1DA;   /* Subtle borders */
  --color-muted:        #6D6B65;   /* Labels, secondary text */
  --color-input-bg:     #FFFFFF;   /* Search input background */
  --color-white:        #FFFFFF;   /* White (button text on teal, Google button bg) */
  --color-nav-pill:     #EAE5DB;   /* Nav link pill background */
  --color-nav-pill-hover: #E0DACE; /* Nav pill hover — slightly darker */
  --color-teal-tint:      #E8F4F1;   /* Light teal wash — listing badge bg */
  --color-tan-tint:       #F8F5EE;   /* Warm tan — accent section backgrounds */
  --color-placeholder-bg: #AFA9A2;   /* Warm gray — image placeholder background */
  --color-error:          #B84040;   /* Form/validation error text (nominate + email-signup) */

  /* Typography */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale — multiples of 4px */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Layout */
  --max-width-content: 1200px;
  --max-width-text:    860px;
  --max-width-form:    720px;

  /* Border radius */
  --radius-card:   12px;
  --radius-button: 10px;
  --radius-pill:   100px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
}
/* ---- 2. MEMBERSHIP: logged-in "Profile" line (auth.js) ---- */
.member-line { padding: 2px 13px; font-size: 0.8125rem; line-height: 1.4; color: var(--color-headline); }
.member-line--muted { font-size: 0.75rem; color: var(--color-muted); }
/* newsletter opt-in under the member email in the hamburger */
.member-newsletter { display: flex; align-items: center; gap: 7px; padding: 4px 13px 8px; font-size: 0.78rem; font-weight: 600; color: var(--color-muted); cursor: pointer; user-select: none; }
.member-newsletter input { width: 15px; height: 15px; margin: 0; accent-color: var(--color-teal); cursor: pointer; }
/* newsletter opt-in at the top of the sign-in drawer */
.auth-newsletter { display: flex; align-items: center; gap: 9px; margin: 2px 0 16px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-tan-tint); font-size: 0.9rem; color: var(--color-text); cursor: pointer; user-select: none; }
.auth-newsletter b { color: var(--color-headline); }
.auth-newsletter input { width: 17px; height: 17px; margin: 0; flex: 0 0 auto; accent-color: var(--color-teal); cursor: pointer; }
/* the right-aligned lock on the guest "Member Dashboard" menu link */
.member-lock { flex: 0 0 auto; width: 15px; height: 15px; }
/* Member Dashboard menu link, guest (locked): flex so the lock sits at the right (2-class specificity beats the .menu-link/.navmenu-item block display) */
.menu-link.member-dash-locked, .navmenu-item.member-dash-locked { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.member-dash-locked .member-lock { flex: 0 0 auto; width: 15px; height: 15px; color: var(--color-muted); }

/* ---- 2b. DESIGNATION BADGE — ONE component for Boutel / Boutel+ / HM, used by the
   listing pages, the site cards, the area guide AND the map. Change a designation's
   look HERE, in one spot. (Boutel = soft teal-tint label; Boutel+ = gold + star;
   HM = cream + brown, no border.) Add `--card` when it sits inline in a card (no margin). ---- */
.listing__badge {
  display: inline-block;
  background: var(--color-teal-tint);
  color: var(--color-teal);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-5);
}
.listing__badge--hm { background: var(--color-hm-badge); color: var(--color-hm-badge-text); text-decoration: none; display: inline-block; }
.listing__badge--hm:hover { opacity: 0.88; color: var(--color-hm-badge-text); }
.listing__badge--plus { background: var(--color-gold); color: var(--color-gold-text); display: inline-flex; align-items: center; gap: 5px; }
.listing__badge--gem { background: var(--color-gem); color: var(--color-white); } /* gem guide pages — purple, matches the map gem markers */
.listing__badge-star { flex-shrink: 0; vertical-align: middle; }
.listing__badge--card { margin-bottom: 0; } /* inline inside a card: drop the block margin */

/* ---- 2c. AMENITY TAG — ONE quick-tag component for Pets / EV / Breakfast / WiFi, used by the
   site cards AND the map card. Change the look HERE. (The listing page's richer icon feature-pills
   are a separate element: .listing__pill.) ---- */
.amenity {
  display: inline-block;
  background: var(--color-nav-pill);
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

/* ---- 3. GEOCOMPLETE search dropdown (positioned inside .search__row) ---- */
.geocomplete {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  /* stop before the submit button so the dropdown doesn't cover it */
  right: 0;
  background: var(--color-input-bg);
  border: 1.5px solid var(--color-teal);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 200;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

.geocomplete__item {
  display: block;
  width: 100%;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.geocomplete__item:last-child { border-bottom: none; }

.geocomplete__item:hover,
.geocomplete__item--active {
  background: var(--color-bg);
  color: var(--color-teal);
}

.geocomplete__item--tagged {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.geocomplete__badge {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-teal);
  border: 1px solid var(--color-teal);
  border-radius: 3px;
  padding: 2px 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ---- 4. TEXT LINK: a real <button> styled as an inline link (opens a drawer, etc.) ---- */
.text-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-teal);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.text-link:hover { text-decoration: none; } /* underlined at rest; the underline disappears on hover as the cue */

/* ---- 5. TRADEMARK: the small superscript ™ next to a brand mark (Boutel™). Shared by the site and the map,
   so it lives here (single source). The ™ attaches to "Boutel" only — e.g. Boutel™+ , never Boutel+™. ---- */
.trademark-sup {
  font-size: 0.45em;
  font-weight: 400;
  vertical-align: super;
  letter-spacing: 0;
  line-height: 0;
}

/* ---- 5. DRAWERS — ONE component for nominate / feedback / sign-in / photo.
   Slides from the RIGHT on the site; the map overrides it to slide from the LEFT.
   Structure: .nominate-overlay + .nominate-drawer > __inner (padding) > __close (dark X),
   __heading, __form > __field/__label/__input/__textarea/__check-*, and __btn (see §6). ---- */

.nominate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  z-index: 299;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.nominate-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.nominate-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(500px, calc(100vw - 30px));
  background: var(--color-bg);
  z-index: 300;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.nominate-drawer.is-open {
  transform: translateX(0);
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.12); /* shadow ONLY when open — closed & off-screen right it was bleeding a dark gradient onto the page's right edge */
}

body.drawer-open {
  overflow: hidden;
}

.nominate-drawer__inner {
  padding: var(--space-10) var(--space-8);
  position: relative;
}

.nominate-drawer__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 3; /* sit above drawer body content (e.g. a hero image at the top of the state/area drawer) */
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-headline); color: var(--color-white);
  border: 0; border-radius: 9px; line-height: 1; cursor: pointer;
}

.nominate-drawer__close:hover {
  opacity: 0.75;
}

/* Filled caret-circle for accordion headers (Phosphor caret-circle-down: teal disc, white caret).
   The white backing circle shows through the caret knockout in the teal path. Used site + map;
   the wrapper class (.sd-chev / .acc__chev / .mdash-acc__chev) supplies size + rotate-on-open. */
.acc-caret__bg { fill: var(--color-teal); }
.acc-caret__ar { fill: var(--color-white); }
/* count on an accordion header (e.g. "Boutels 25") — muted + regular weight, like the map's counts */
.acc__count { font-weight: 400; color: var(--color-muted); }

.nominate-drawer__heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--color-headline);
  line-height: 1.1;
  margin-bottom: var(--space-2);
  padding-right: var(--space-8);
}

.nominate-drawer__subtext {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-6);
}
.nominate-drawer__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.nominate-drawer__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nominate-drawer__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-headline);
}

.nominate-drawer__input,
.nominate-drawer__textarea,
select.nominate-drawer__input {
  padding: 9px 12px;
  font-size: 0.9375rem;
  font-family: var(--font-body);
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
  color: var(--color-text);
  border-radius: 4px;
}

.nominate-drawer__input:focus,
.nominate-drawer__textarea:focus {
  outline: 2px solid var(--color-teal);
  outline-offset: 1px;
}
/* file picker (photo-submission drawer) — same field frame, roomier for the native button */
.nominate-drawer__input[type="file"] { padding: 8px 10px; font-size: 0.85rem; cursor: pointer; }

.nominate-drawer__textarea {
  resize: vertical;
  min-height: 96px;
}

.nominate-drawer__check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.nominate-drawer__checkbox {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--color-teal);
  cursor: pointer;
}

.nominate-drawer__check-label {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  cursor: pointer;
}

.nominate-drawer__note {
  font-size: 0.8125rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin: 0;
}

.nominate-drawer__error {
  font-size: 0.875rem;
  color: var(--color-error);
  line-height: 1.5;
}

/* ONE primary drawer button — full-width, centered, rounded. Used by EVERY drawer's primary
   action (Submit for Review, Send it, Sign in / Join, Email me a member link). White text always.
   Google is the only exception: the --google modifier (Google's standard white-with-color-G brand). */
.nominate-drawer__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: var(--space-3); padding: 12px 14px;
  border: 0; border-radius: 9px; background: var(--color-teal); color: var(--color-white);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 1rem; cursor: pointer;
}
.nominate-drawer__btn:hover { opacity: 0.9; }
.nominate-drawer__btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Locked state: a members-only action shown to signed-out visitors (gray + lock); still clickable — it opens sign-in. */
.nominate-drawer__btn--locked { background: var(--color-muted); }
.nominate-drawer__btn--locked svg { width: 15px; height: 15px; flex: 0 0 15px; }
.nominate-drawer__btn--google {
  background: var(--color-white); color: var(--color-headline);
  border: 1px solid var(--color-border);
  font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: normal; font-size: 0.95rem;
}
.nominate-drawer__btn--google svg { width: 18px; height: 18px; flex: 0 0 18px; }
.auth-or { text-align: center; color: var(--color-muted); font-size: 0.8rem; margin: var(--space-2) 0; }

.nominate-drawer__success {
  padding-top: var(--space-10);
}

.nominate-drawer__success-msg {
  font-size: 1.0625rem;
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

/* Roomier spacing between the stacked success-panel buttons (resend / close). */
.nominate-drawer__success .nominate-drawer__btn { margin-top: var(--space-5); }

/* ============================================================
   MEMBER "STATES" — shared across the listing pages + the map
   (see memory project_member_dashboard_design)
   ============================================================ */

/* Trip Status — a COMPACT, left-aligned inline segmented control: Viewed | Scheduled | Visited.
   "Viewed" is the default (shown active when nothing's set; not tracked as data). Small so it doesn't
   stretch across a wide sheet. Viewed active = white; Scheduled = teal; Visited = gold (the trophy).
   Members-only: a signed-out visitor sees it grayed with a lock; a tap opens sign-in. */
.member-status { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--color-nav-pill); border-radius: var(--radius-pill); max-width: 100%; }
.member-status__seg {
  display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent;
  padding: 6px 12px; border-radius: var(--radius-pill); cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; color: var(--color-muted); white-space: nowrap;
}
.member-status__seg svg { width: 14px; height: 14px; flex: 0 0 14px; }
.member-status__seg.is-on { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.member-status__seg[data-status="none"].is-on      { background: var(--color-white); color: var(--color-headline); }
.member-status__seg[data-status="scheduled"].is-on { background: var(--color-teal); color: var(--color-white); }
.member-status__seg[data-status="visited"].is-on   { background: var(--color-gold); color: var(--color-headline); }
@media (hover: hover) { .member-status__seg:not(.is-on):hover { color: var(--color-headline); } }
.member-status--locked { cursor: pointer; opacity: 0.72; }
.member-status--locked .member-status__seg { opacity: 0.55; pointer-events: none; }
/* Locked "For Members" preview: mute the Trip Planner button too (it was full-teal, reading as active),
   and center the single sign-in CTA. */
.listing-mytrip--locked .mytrip-trip { opacity: 0.5; pointer-events: none; }
.listing-mytrip--locked .listing-mytrip__cta { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
/* Details: websites link OUT in a new tab (external-arrow), with a small italic note under the link */
.listing-details__link { color: var(--color-teal); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; } /* underline comes from the base .listing-details__value a (avoid a double underline) */
.listing-details__ext { width: 14px; height: 14px; flex-shrink: 0; }
.listing-details__newtab { display: block; margin-top: 3px; font-size: 0.72rem; font-style: italic; color: var(--color-text-muted); }
.member-status__lock { display: inline-flex; align-items: center; color: var(--color-muted); }
.member-status__lock svg { width: 15px; height: 15px; }

/* Copy confirmation toast — one small centered pill, brief. Used by every copy button (site + map). */
.b-toast { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.96); z-index: 5000; max-width: 88vw; padding: 12px 18px; border-radius: 10px; background: var(--color-headline); color: var(--color-white); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; line-height: 1.3; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; }
.b-toast.is-show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ============================================================================
   Member Dashboard (assets/js/modules/dashboard.js) — a board of the member's
   saved places, opened from the "Member Dashboard" hamburger button. Loaded on
   BOTH the map and the site. Desktop = five labelled columns; portrait = icon
   tabs with the label shown as the column heading.
   ========================================================================== */
.mdash { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(26, 26, 24, 0.55); }
/* The My Notes drawer is opened from ON TOP of the dashboard modal (Note on a card) — keep it above. */
#noteOverlay { z-index: 3300; }
#noteDrawer { z-index: 3301; }
.mdash[hidden] { display: none; }
.mdash__panel { display: flex; flex-direction: column; width: 100%; max-width: 1100px; height: 88vh; max-height: 92vh; background: var(--color-bg); border-radius: var(--radius-card); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); overflow: hidden; } /* FIXED height so switching tabs never resizes the modal — the list scrolls inside */
.mdash__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--color-border); flex: 0 0 auto; }
.mdash__title { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: 0.01em; color: var(--color-headline); }
.mdash__close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: var(--color-headline); color: var(--color-white); cursor: pointer; }
.mdash__close svg { width: 15px; height: 15px; }
/* Location Filter — a global state filter in the top bar (title | this | close) */
.mdash__loc { position: relative; flex: 0 1 auto; }
.mdash__loc[hidden] { display: none; }
.mdash__loc-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 7px 13px; border: 1px solid var(--color-border); border-radius: 100px; background: var(--color-white); color: var(--color-text); font-family: var(--font-body); font-weight: 700; font-size: 14px; cursor: pointer; }
.mdash__loc-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.mdash__loc-btn > svg:first-child { color: var(--color-teal); }
.mdash__loc-cur { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdash__loc-btn.is-active { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); }
.mdash__loc-btn.is-active > svg:first-child { color: var(--color-white); }
/* the popover: a wrapping grid of state chips (multi-row, never a 50-line scroll) */
.mdash__loc-pop { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 5; width: min(340px, 86vw); max-height: 52vh; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); }
.mdash__loc-pop[hidden] { display: none; }
.mdash__loc-chip { flex: 0 0 auto; min-width: 52px; text-align: center; padding: 7px 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-white); color: var(--color-text); font-family: var(--font-body); font-weight: 700; font-size: 13px; cursor: pointer; }
.mdash__loc-chip.is-active { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); }
@media (hover: hover) { .mdash__loc-chip:not(.is-active):hover { border-color: var(--color-teal); color: var(--color-teal); } }
/* lens tabs — ALWAYS shown; one column visible at a time (5 side-by-side columns were too cramped) */
.mdash__tabs { display: flex; flex: 0 0 auto; border-bottom: 1px solid var(--color-border); }
.mdash__tab { position: relative; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 6px; border: 0; background: transparent; border-bottom: 3px solid transparent; cursor: pointer; }
.mdash__tab:not(:last-child) { border-right: 1px solid var(--color-border); } /* slim divider between the lens tabs */
.mdash__col-note { font-size: 0.85rem; line-height: 1.5; color: var(--color-text-muted); background: var(--color-tan-tint); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.mdash__tab-ic { display: inline-flex; } .mdash__tab-ic svg { width: 22px; height: 22px; display: block; }
.mdash__tab-ic--gold { color: var(--color-gold); } .mdash__tab-ic--teal { color: var(--color-teal); }
.mdash__tab-label { display: none; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 14px; color: var(--color-headline); } /* revealed on wider screens; icon-only on mobile */
.mdash__tab-count { font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--color-muted); }
.mdash__tab.is-active { border-bottom-color: var(--color-teal); background: var(--color-teal-tint); } /* brighten the selected tab, tied to the teal underline */
.mdash__tab.is-active .mdash__tab-count { color: var(--color-headline); }
/* board — a single tab-selected column, centered to a readable width */
.mdash__board { display: flex; flex-direction: column; padding: 16px 20px 20px; flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* the scroll container — the column sizes to content, this scrolls */
.mdash__col { display: none; }
.mdash__col.is-shown { display: flex; flex-direction: column; flex: 0 0 auto; width: 100%; max-width: 880px; margin: 0 auto; background: var(--color-tan-tint); border-radius: 10px; padding: 12px; } /* natural height (don't shrink) so a short list stays a small box + a long one scrolls the board; wide enough for the two-column rich card */
.mdash__col-h { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-headline); margin-bottom: 12px; flex: 0 0 auto; }
.mdash__col-ic { display: inline-flex; } .mdash__col-ic svg { width: 18px; height: 18px; display: block; }
.mdash__col-ic--gold { color: var(--color-gold); } .mdash__col-ic--teal { color: var(--color-teal); }
.mdash__col-count { margin-left: auto; font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--color-muted); background: var(--color-nav-pill); border-radius: 100px; padding: 1px 9px; }
.mdash__col-body { display: flex; flex-direction: column; gap: 9px; }
.mdash__col-empty { font-size: 13px; color: var(--color-muted); padding: 6px 2px; }
/* card */
.mdash-card { display: block; text-decoration: none; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 9px; padding: 11px 12px; color: var(--color-text); }
a.mdash-card:hover { border-color: var(--color-teal); }
.mdash-card__name { font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.15; color: var(--color-headline); }
.mdash-card__sub { font-size: 12.5px; color: var(--color-muted); margin-top: 2px; }
.mdash-card__note { font-size: 13px; line-height: 1.45; color: var(--color-text-muted); margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--color-border); }

/* Rich Boutel card — mirrors the map boutel card: listing on the left, "My Trip" as the right half.
   Stacked by default; splits into two columns once there's room (>=820px). */
.mdash-card--rich { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.mdash-card__listing { min-width: 0; }
.mdash-card__trip { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.mdash-card__triplabel { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; color: var(--color-muted); margin-bottom: 10px; }
.mdash-card__trip .mdash-card__status { margin-top: 0; }
@media (min-width: 820px) {
  .mdash-card--rich { flex-direction: row; gap: 18px; align-items: stretch; }
  .mdash-card__listing { flex: 1 1 auto; }
  .mdash-card__trip { flex: 0 0 300px; margin-top: 0; padding-top: 0; border-top: 0; padding-left: 18px; border-left: 1px solid var(--color-border); }
}
.mdash-card__main { display: flex; gap: 12px; align-items: flex-start; }
.mdash-card__thumb { flex: 0 0 76px; }
.mdash-card__img { width: 76px; height: 76px; border-radius: 10px; object-fit: cover; display: block; }
.mdash-card__ph { width: 76px; height: 76px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--color-teal-tint); color: var(--color-teal); }
.mdash-card__ph--plus { background: var(--color-gold); color: var(--color-gold-text); } /* Boutel+ placeholder: gold bg + dark-gold bed */
.mdash-card__ph--hm { background: var(--color-hm-badge); color: var(--color-brown); } /* Honorable Mention placeholder: cream bg + brown bed */
/* Layer placeholders (no photo): type-colored tile matching the marker + accordion icon */
.mdash-card__ph--gem  { background: color-mix(in srgb, var(--color-gem) 16%, var(--color-tan-tint));  color: var(--color-gem); }
.mdash-card__ph--park { background: color-mix(in srgb, var(--color-park) 16%, var(--color-tan-tint)); color: var(--color-park); }
.mdash-card__ph--rest { background: color-mix(in srgb, var(--color-rest) 16%, var(--color-tan-tint)); color: var(--color-rest); }
.mdash-card__ph--ev   { background: color-mix(in srgb, var(--color-ev) 16%, var(--color-tan-tint));   color: var(--color-ev); }
.mdash-card__ph svg { width: 30px; height: 30px; }
.mdash-card__info { flex: 1 1 auto; min-width: 0; }
.mdash-card__namerow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mdash-card--rich .mdash-card__name { font-size: 1.05rem; }
.mdash-card__namerow .listing__badge { margin: 0; font-size: 0.6rem; letter-spacing: 0.09em; padding: 3px 9px; }
.mdash-card__addr { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.85rem; color: var(--color-text); }
.mdash-card__copyaddr { flex: 0 0 auto; border: 0; background: none; padding: 2px; color: var(--color-muted); cursor: pointer; line-height: 0; }
.mdash-card__copyaddr svg { width: 15px; height: 15px; }
.mdash-card__copyaddr.is-copied { color: var(--color-teal); }
.mdash-card__phone { margin-top: 3px; font-size: 0.85rem; }
.mdash-card__phone a { color: var(--color-teal); text-decoration: none; }
.mdash-card__amen { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.mdash-card__fav { flex: 0 0 auto; border: 0; background: none; padding: 0; width: 28px; height: 28px; color: var(--color-muted); cursor: pointer; line-height: 0; }
.mdash-card__fav svg { width: 22px; height: 22px; display: block; }
.mdash-card__fav.is-fav { color: var(--color-gold); }
.mdash-card__ctas { display: flex; gap: 8px; margin-top: 12px; }
.mdash-card__cta { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 10px; border-radius: 9px; background: var(--color-teal); color: var(--color-white); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.8rem; text-decoration: none; }
/* filled buttons use white icons (design rule) — the map-trifold glyph on "View on Map" */
.mdash-card__cta svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--color-white); }
.mdash-card__status { margin-top: 12px; }
.mdash-card__status .member-status { width: 100%; }
.mdash-card__status .member-status__seg { flex: 1 1 0; justify-content: center; }
.mdash-card__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mdash-card__act { flex: 1 1 auto; min-width: 108px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 1.5px solid var(--color-border); border-radius: 9px; background: var(--color-white); color: var(--color-text); font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; cursor: pointer; }
.mdash-card__act svg { width: 16px; height: 16px; color: var(--color-teal); }
.mdash-card__act.is-set { border-color: var(--color-teal); color: var(--color-teal); }
.mdash-card__act--share, .mdash-card__act--share svg { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); }
/* + Trip Planner: full-width CTA below the Note/Share row — filled teal to add, outlined once in (mirrors the map's .card3__trip).
   NB: the teal fill lives on the button, never on the svg — an svg background would persist into the outlined state as a solid box. */
.mdash-card__trip-add { width: 100%; margin-top: 8px; background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); }
.mdash-card__trip-add svg { color: var(--color-white); }
.mdash-card__trip-add.is-in { background: var(--color-white); color: var(--color-teal); }
.mdash-card__trip-add.is-in svg { color: var(--color-teal); }
.mdash-card--rich .mdash-card__note { border-top: 0; background: var(--color-tan-tint); border-radius: 8px; padding: 8px 10px; margin-top: 10px; }

/* "Show only:" type filter — a pill row between the tabs and the board */
/* filter bar under the tabs: the "Show only:" pills + the Location Filter dropdown, grouped and centered */
.mdash__filterbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding: 10px 12px; border-bottom: 1px solid var(--color-border); flex: 0 0 auto; }
.mdash__filterbar[hidden] { display: none; }
.mdash__filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.mdash__filter:empty { display: none; }
.mdash__filter-lab { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; color: var(--color-muted); margin-right: 2px; }
.mdash-filter__pill { border: 1px solid var(--color-border); background: var(--color-white); color: var(--color-text); font-family: var(--font-body); font-weight: 600; font-size: 13px; padding: 5px 12px; border-radius: 100px; cursor: pointer; }
.mdash-filter__pill.is-active { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); }
@media (hover: hover) { .mdash-filter__pill:not(.is-active):hover { border-color: var(--color-teal); color: var(--color-teal); } }

/* Type icon in the accordion header — shape mirrors the map marker, color per type */
.mdash-tic { flex: 0 0 auto; display: inline-flex; width: 22px; height: 22px; }
.mdash-tic svg { width: 100%; height: 100%; display: block; }
.mdash-tic--plus { color: var(--color-gold); }
.mdash-tic--boutel { color: var(--color-teal); }
.mdash-tic--hm { color: var(--color-brown); }
.mdash-tic--gem { color: var(--color-gem); }
.mdash-tic--park { color: var(--color-park); }
.mdash-tic--rest { color: var(--color-rest); }
.mdash-tic--ev { color: var(--color-ev); }

/* Collapsible place accordion (browse tabs): summary = icon + name + type chip + chevron; card in the body */
.mdash-acc { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 9px; overflow: hidden; }
/* cream header + teal caret, matching the map's .acc__h / .menu-h accordions (one accordion look site-wide) */
.mdash-acc__h { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: var(--color-tan-tint); cursor: pointer; list-style: none; user-select: none; }
.mdash-acc__h::-webkit-details-marker { display: none; }
/* two-line title: name (+ badge + star) over a muted city/state line */
.mdash-acc__title { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mdash-acc__titlerow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mdash-acc__name { min-width: 0; font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--color-headline); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* compact badge — same sizing the map card uses (.card3__namerow .listing__badge) */
.mdash-acc__h .listing__badge { flex: 0 0 auto; margin: 0; font-size: 0.6rem; letter-spacing: 0.09em; padding: 3px 9px; }
/* the favorite star sits right after the title (same treatment as the card); clicking it toggles the star, not the accordion */
.mdash-acc__fav { flex: 0 0 auto; width: 24px; height: 24px; }
.mdash-acc__fav svg { width: 19px; height: 19px; }
/* trip controls + chevron ride the right edge */
.mdash-acc__right { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 9px; }
.mdash-acc__loc { font-family: var(--font-body); font-weight: 600; font-size: 12px; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Trip Planner summary controls: reorder up/down + remove, so a stop can be shuffled/dropped while collapsed */
.mdash-acc__ctrls { display: inline-flex; align-items: center; gap: 5px; }
.mdash-acc__ctrl { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0; line-height: 0; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-white); color: var(--color-text); cursor: pointer; }
.mdash-acc__ctrl svg { width: 15px; height: 15px; }
.mdash-acc__ctrl:hover:not(:disabled) { border-color: var(--color-teal); color: var(--color-teal); }
.mdash-acc__ctrl:disabled { opacity: 0.3; cursor: default; }
.mdash-acc__ctrl--del:hover:not(:disabled) { border-color: var(--color-error); color: var(--color-error); }
.mdash-acc__chev { flex: 0 0 auto; display: inline-flex; width: 18px; height: 18px; color: var(--color-teal); transition: transform 0.2s ease; }
.mdash-acc__chev svg { width: 100%; height: 100%; display: block; }
.mdash-acc[open] .mdash-acc__chev { transform: rotate(180deg); }
.mdash-acc[open] .mdash-acc__h { background: var(--color-nav-pill); border-bottom: 1px solid var(--color-border); }
.mdash-acc__body { padding: 11px 12px; }
/* the name + star live in the summary now, so the card inside drops its own frame + name row */
.mdash-acc__body .mdash-card { border: 0; padding: 0; margin: 0; }
.mdash-acc__body .mdash-card__namerow { display: none; }
/* empty */
.mdash__empty { margin: auto; padding: 40px 24px; text-align: center; max-width: 440px; }
.mdash__empty-h { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--color-headline); margin-bottom: 8px; }
.mdash__empty p { font-size: 14px; line-height: 1.6; color: var(--color-muted); margin: 0; }
/* mobile: full-screen panel, icon-only tabs (label falls to the column heading) */
@media (max-width: 719px) {
  .mdash { padding: 0; }
  .mdash__panel { max-width: none; max-height: none; height: 100%; border-radius: 0; }
  .mdash__board { padding: 14px; }
  .mdash__col.is-shown { max-width: none; }
  .mdash__top { padding: 14px; gap: 8px; }
  .mdash__title { font-size: 17px; }
  .mdash__loc-btn { padding: 6px 10px; font-size: 13px; }
}
/* wider than mobile: the tab carries its label + icon, so drop the redundant column heading */
@media (min-width: 720px) {
  .mdash__tab-label { display: inline; }
  .mdash__col-h { display: none; }
  .mdash__col[data-col="shared"] .mdash__col-h { display: flex; } /* keep the fuller "You shared with community" heading (tab stays compact) */
}

/* ---- Notes drawer (assets/js/modules/notes-drawer.js) — the "What you shared" section
   inside the shared .nominate-drawer. Used by the map card + listing "My Trip" box. ---- */
.notedrawer__foot { display: flex; justify-content: flex-end; margin-top: 6px; font-size: 12px; color: var(--color-muted); }
.notedrawer__sharedwrap { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.notedrawer__h { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 13px; color: var(--color-headline); margin-bottom: 10px; }
.notedrawer__empty { font-size: 13px; color: var(--color-muted); margin: 0; }
.notedrawer__shared { margin-bottom: 12px; }
.notedrawer__thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.notedrawer__thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.notedrawer__snote { font-size: 13px; color: var(--color-text-muted); margin-top: 6px; line-height: 1.45; }
.notedrawer__pending { font-size: 12px; color: var(--color-muted); margin: 6px 0 0; font-style: italic; }

/* ============================================================================
   Admin bar (admin-bar.js) — a thin gold bar, admin-only, on every page (site + map).
   --admin-bar-h drives the page offset (0 normally; set when an admin is signed in).
   ============================================================================ */
:root { --admin-bar-h: 0px; }
html.has-admin-bar { --admin-bar-h: 40px; }
.admin-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 4000; height: var(--admin-bar-h); display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--color-gold); color: var(--color-gold-text); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18); }
.admin-bar[hidden] { display: none; }
.admin-bar__brand { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
.admin-bar__brand svg { width: 16px; height: 16px; }
.admin-bar__spacer { flex: 1 1 auto; }
.admin-bar__btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 0; border-radius: 100px; background: var(--color-gold-text); color: var(--color-gold); font-family: var(--font-body); font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.admin-bar__btn svg { width: 15px; height: 15px; }
@media (hover: hover) { .admin-bar__btn:hover { opacity: 0.9; } }
@media (max-width: 560px) { .admin-bar__btn span { display: none; } .admin-bar__btn { padding: 5px 9px; } } /* icon-only on narrow screens */

/* Admin drawer extras (reuses the shared .nominate-drawer* component) */
/* the admin drawer must sit ABOVE the gold admin bar (z 4000) when open */
#admin-overlay { z-index: 4200; }
#admin-drawer { z-index: 4201; }
#admin-drawer .nominate-drawer__field { margin-bottom: 15px; } /* breathing room between fields */
.admin-drawer__for { margin: 4px 0 16px; font-size: 14px; color: var(--color-text-muted); }
.admin-drawer__for b { color: var(--color-headline); }
.admin-drawer__opt { font-weight: 400; color: var(--color-muted); }
.admin-drop { position: relative; display: flex; align-items: center; justify-content: center; min-height: 168px; margin-bottom: 18px; padding: 22px; border: 2px dashed var(--color-border); border-radius: 12px; background: var(--color-tan-tint); cursor: pointer; overflow: hidden; text-align: center; }
.admin-drop.is-over { border-color: var(--color-teal); background: var(--color-teal-tint); }
.admin-drop__prompt { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--color-muted); }
.admin-drop__prompt svg { width: 40px; height: 40px; color: var(--color-teal); }
.admin-drop__prompt b { color: var(--color-headline); font-family: var(--font-display); font-weight: 800; font-size: 16px; white-space: nowrap; } /* one line, no awkward wrap */
.admin-drop__prompt span { font-size: 13.5px; white-space: nowrap; }
.admin-drop__preview { display: block; width: 100%; max-height: 260px; object-fit: contain; background: var(--color-headline); }
.admin-drawer__success { text-align: center; padding: 8px 0; }
.admin-drawer__success b { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--color-teal); }
.admin-drawer__success p { font-size: 14px; line-height: 1.5; color: var(--color-text-muted); margin: 8px 0 16px; }
/* Added-image rows: small thumbnail + Cover pick + remove, then the per-image licensing block */
.admin-items { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 4px; }
.admin-items:empty { display: none; margin: 0; }
.admin-item { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-white); }
.admin-item__head { display: flex; align-items: center; gap: 12px; }
.admin-item__thumb { flex: 0 0 48px; width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background: var(--color-tan-tint); }
.admin-item__cover { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 12.5px; font-weight: 700; color: var(--color-muted); cursor: pointer; user-select: none; }
.admin-item__cover.is-on { color: var(--color-teal); }
.admin-item__cover input { width: 15px; height: 15px; margin: 0; accent-color: var(--color-teal); cursor: pointer; }
.admin-item__gps { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--color-teal); }
.admin-item__gps svg { width: 13px; height: 13px; }
.admin-item__rm { margin-left: auto; flex: 0 0 auto; border: 0; background: none; padding: 4px; color: var(--color-muted); cursor: pointer; line-height: 0; }
.admin-item__rm svg { width: 18px; height: 18px; }
@media (hover: hover) { .admin-item__rm:hover { color: var(--color-error); } }
/* per-image licensing: radio group + conditional fields (source dropdown / notes / attribution) */
.admin-lic { display: flex; flex-direction: column; gap: 8px; }
.admin-lic__radios { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-lic__radio { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--color-border); border-radius: 100px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--color-text); cursor: pointer; user-select: none; }
.admin-lic__radio.is-on { border-color: var(--color-teal); background: var(--color-teal-tint); color: var(--color-teal); }
.admin-lic__radio input { width: 14px; height: 14px; margin: 0; accent-color: var(--color-teal); }
.admin-lic__body { display: flex; flex-direction: column; gap: 8px; }
.admin-lic__body:empty { display: none; }
.admin-lic__field { width: 100%; }
.admin-lic__note { font-size: 12.5px; color: var(--color-muted); margin: 0; font-style: italic; }
.admin-cover-hint { font-size: 12.5px; line-height: 1.45; color: var(--color-muted); margin: 8px 0 16px; }
.admin-cover-hint b { color: var(--color-teal); }
/* single-image cover control: a centered teal-outlined button (with the checkbox) so it isn't missed; fills teal when ticked */
.admin-cover-single { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin: 6px 0 14px; padding: 11px 14px; border: 1.5px solid var(--color-teal); border-radius: 9px; background: var(--color-white); color: var(--color-teal); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.8rem; cursor: pointer; user-select: none; }
.admin-cover-single[hidden] { display: none; }
.admin-cover-single input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-teal); cursor: pointer; }
.admin-cover-single:has(input:checked) { background: var(--color-teal); color: var(--color-white); }
.admin-cover-single:has(input:checked) input { accent-color: var(--color-white); }
/* animated dots on the Uploading/Submitting button — fixed width so the label doesn't jitter */
.admin-dots { display: inline-block; width: 1.4em; text-align: left; }

/* ── Accessibility utilities (shared by the site + the map/planner) ───────────
   .sr-only: read by screen readers, hidden visually (never display:none — that hides from AT too).
   .skip-link: first focusable element on a page; appears on keyboard focus. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100%; left: 0; z-index: 10000;
  padding: 12px 20px; background: var(--color-teal); color: var(--color-white);
  font-weight: 600; text-decoration: none; border-radius: 0 0 12px 0;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }