/* California Campgrounds — Earthy / Organic / Field Journal */

[hidden] { display: none !important; }

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  --text-md: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  --text-lg: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  --text-2xl: clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem);

  /* Spacing — 4px scale */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem;
  --s-12: 3rem; --s-16: 4rem;

  /* Radii — softer organic */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* Fonts — Fraunces for organic display, Inter Tight for body */
  --font-display: 'Fraunces', 'Cooper BT', Georgia, serif;
  --font-body: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-hand: 'Caveat', 'Marker Felt', cursive;

  /* EARTHY PALETTE — sun-warmed paper, forest, clay, ember */
  --paper-50:  #fbf6ec;   /* parchment */
  --paper-100: #f4ecdc;   /* warm cream */
  --paper-200: #e8dcc2;   /* aged paper */
  --paper-300: #d6c4a3;   /* tan */
  --paper-400: #b69e75;   /* dry grass */
  --bark-700:  #4a3a26;   /* dark walnut text */
  --bark-800:  #2f2516;   /* deepest text */
  --bark-500:  #6b573b;   /* warm brown */
  --bark-400:  #6b573b;   /* faded ink (a11y: was #8a7253, bumped for AA contrast) */

  --moss-900:  #1f3024;   /* deepest forest */
  --moss-700:  #2f4a36;   /* pine shadow */
  --moss-600:  #3e6249;   /* fern */
  --moss-500:  #587a5f;   /* sage moss */
  --moss-300:  #95b08c;   /* lichen */

  --clay-700:  #8a3f1d;   /* deep terracotta */
  --clay-600:  #b25129;   /* clay */
  --clay-500:  #c96a3a;   /* rust */
  --clay-400:  #db8859;   /* sun-baked */

  --ochre-600: #b9892b;   /* ochre */
  --ochre-500: #d4a44a;   /* afternoon sun */
  --ochre-400: #e6bd6a;   /* dawn */

  --slate-700: #4d5a63;   /* river stone */
  --slate-500: #7a8893;   /* fog */

  /* Semantic surfaces */
  --color-bg: var(--paper-50);
  --color-bg-2: var(--paper-100);
  --color-surface: var(--paper-100);
  --color-surface-2: var(--paper-50);
  --color-surface-strong: rgba(251, 246, 236, 0.96);
  --color-surface-warm: var(--paper-200);
  --color-border: rgba(74, 58, 38, 0.14);
  --color-border-strong: rgba(74, 58, 38, 0.28);
  --color-divider: rgba(74, 58, 38, 0.10);

  --color-text: var(--bark-800);
  --color-text-muted: var(--bark-500);
  --color-text-faint: var(--bark-500);

  --color-primary: var(--moss-700);
  --color-primary-hover: var(--moss-900);
  --color-primary-soft: rgba(63, 98, 73, 0.10);

  /* Agency colors — earth-toned & warmer */
  --c-state: #3e6249;   /* moss green */
  --c-nps:   #b25129;   /* clay/terracotta */
  --c-usfs:  #5d6e3a;   /* pine olive */
  --c-blm:   #b9892b;   /* ochre/sandstone */

  /* Shadows — soft, warm */
  --shadow-sm: 0 1px 2px rgba(74, 58, 38, 0.08), 0 1px 3px rgba(74, 58, 38, 0.06);
  --shadow-md: 0 4px 14px -2px rgba(74, 58, 38, 0.14), 0 2px 6px rgba(74, 58, 38, 0.08);
  --shadow-lg: 0 18px 50px -16px rgba(74, 58, 38, 0.32), 0 6px 18px rgba(74, 58, 38, 0.10);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  --header-h: 68px;
  --rail-w: 320px;
  --detail-w: 420px;
}

/* ========== GLOBAL ========== */
html, body { height: 100%; }
body {
  background: var(--paper-50);
  color: var(--color-text);
  font-family: var(--font-body);
  font-feature-settings: 'ss01', 'ss02', 'cv11';
  letter-spacing: -0.005em;
}

/* Paper-grain noise — replaces the dark aurora */
.aurora {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 600px at 90% 10%, rgba(212, 164, 74, 0.16), transparent 60%),
    radial-gradient(700px 500px at 8% 95%, rgba(63, 98, 73, 0.14), transparent 65%),
    radial-gradient(600px 500px at 50% 50%, rgba(178, 81, 41, 0.06), transparent 70%);
}
.aurora::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.29  0 0 0 0 0.23  0 0 0 0 0.15  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.55;
  mix-blend-mode: multiply;
}

/* Hand-drawn topographic contour lines */
.topo {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><g fill='none' stroke='%234a3a26' stroke-width='0.7' stroke-linecap='round' opacity='0.6'><path d='M-20 120 Q90 60 180 120 T380 130 T600 110' /><path d='M-20 160 Q90 100 180 160 T380 170 T600 150' /><path d='M-20 200 Q90 140 180 200 T380 210 T600 190' /><path d='M-20 240 Q90 180 180 240 T380 250 T600 230' /><path d='M-20 280 Q90 220 180 280 T380 290 T600 270' /><path d='M-20 340 Q100 300 200 340 T420 360 T620 350' /><path d='M-20 380 Q100 340 200 380 T420 400 T620 390' /><path d='M-20 420 Q100 380 200 420 T420 440 T620 430' /><path d='M-20 480 Q100 440 200 480 T420 500 T620 490' /><path d='M-20 520 Q100 480 200 520 T420 540 T620 530' /></g></svg>");
  background-size: 800px 800px;
  background-position: center;
}

/* ========== APP SHELL ========== */
.app {
  position: relative; z-index: 2;
  display: grid;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-columns: var(--rail-w) 1fr;
  grid-template-areas: "header header" "rail main";
  height: calc(100dvh - var(--footer-h, 40px)); width: 100%;
}

/* ========== HEADER ========== */
.header {
  grid-area: header;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s-5);
  background:
    linear-gradient(180deg, var(--paper-100) 0%, rgba(244,236,220,0.92) 100%);
  border-bottom: 1px solid var(--color-border);
  z-index: 50;
  position: relative;
}
/* tiny decorative double rule under header — letterpress feel */
.header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: var(--color-border);
}

.brand { display: flex; align-items: center; gap: var(--s-3); }
.brand-mark {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--paper-50);
  display: grid; place-items: center;
  border: 1.5px solid var(--bark-700);
  box-shadow: var(--shadow-sm), inset 0 0 0 3px var(--paper-50), inset 0 0 0 4px var(--bark-700);
  position: relative;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 20;
  letter-spacing: -0.01em;
  color: var(--bark-800);
  line-height: 1;
}
.brand-sub {
  font-size: 11px;
  color: var(--bark-500);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 3px;
  font-weight: 500;
}

.header-actions { display: flex; align-items: center; gap: var(--s-2); }
.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--bark-500);
  border: 1px solid transparent;
  position: relative;
  background: transparent;
}
.icon-btn:hover { color: var(--bark-800); background: var(--paper-200); }
.icon-btn[data-active="true"] {
  color: var(--moss-900);
  background: var(--paper-200);
  border-color: var(--bark-400);
}
.icon-btn .badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--clay-600);
  color: var(--paper-50);
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--paper-100);
  font-family: var(--font-body);
}

/* Search */
.search {
  position: relative;
  display: flex; align-items: center; gap: var(--s-2);
  width: 340px; max-width: 35vw;
  padding: 9px 14px 9px 38px;
  border-radius: var(--r-pill);
  background: var(--paper-50);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-inset), 0 1px 0 rgba(255,255,255,0.4);
}
.search:focus-within {
  border-color: var(--moss-700);
  box-shadow: 0 0 0 3px rgba(63, 98, 73, 0.12);
}
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--bark-400); }
.search input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: var(--font-body);
}
.search input::placeholder { color: var(--bark-400); font-style: italic; }

/* ========== FILTER RAIL ========== */
.rail {
  grid-area: rail;
  background: linear-gradient(180deg, var(--paper-100), var(--paper-50));
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  padding: var(--s-5);
  z-index: 30;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--paper-300) transparent;
}
.rail::before {
  /* faint paper edge texture */
  content: "";
  position: absolute; right: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, var(--bark-400), transparent);
  opacity: 0.18;
}
.rail::-webkit-scrollbar { width: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--paper-300); border-radius: 4px; }

.rail-section { margin-bottom: var(--s-6); }
.rail-section h3 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bark-500);
  margin-bottom: var(--s-3);
  display: flex; align-items: center; gap: var(--s-2);
}
.rail-section h3::before {
  content: ""; flex-shrink: 0;
  width: 12px; height: 1.5px; background: var(--bark-400);
}
.rail-section h3 .count {
  margin-left: auto;
  color: var(--bark-400);
  font-weight: 500;
  letter-spacing: 0;
}

/* Stats card — vintage stamp */
.stats-card {
  position: relative;
  background:
    radial-gradient(120% 100% at 50% 0%, var(--paper-200), var(--paper-100));
  border: 1.5px solid var(--bark-700);
  border-radius: 4px;
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-6);
  text-align: center;
  box-shadow: 2px 3px 0 var(--bark-700), var(--shadow-md);
  transform: rotate(-0.7deg);
}
.stats-card::before, .stats-card::after {
  content: ""; position: absolute;
  left: var(--s-2); right: var(--s-2);
  height: 1px;
  background: var(--bark-700);
  opacity: 0.5;
}
.stats-card::before { top: 4px; }
.stats-card::after  { bottom: 4px; }
.stats-card .stat-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 60;
  font-weight: 500;
  line-height: 0.9;
  color: var(--bark-800);
}
.stats-card .stat-label {
  font-size: 10px;
  color: var(--bark-500);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: var(--s-2);
  font-weight: 600;
}

/* Chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 500;
  background: var(--paper-50);
  border: 1px solid var(--color-border-strong);
  color: var(--bark-500);
  user-select: none;
  font-family: var(--font-body);
  letter-spacing: -0.005em;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.chip:hover {
  color: var(--bark-800);
  background: var(--paper-100);
  border-color: var(--bark-400);
}
.chip[aria-pressed="true"] {
  color: var(--paper-50);
  background: var(--moss-700);
  border-color: var(--moss-900);
  box-shadow: var(--shadow-sm), 0 0 0 2px rgba(63, 98, 73, 0.14);
}
.chip[aria-pressed="true"]:hover { background: var(--moss-900); }
.chip .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--dot-color, var(--moss-700));
  border: 1.5px solid rgba(74, 58, 38, 0.3);
  flex-shrink: 0;
}
.chip[aria-pressed="true"] .dot { border-color: rgba(255,255,255,0.45); }

/* Agency icon (chips + legend) — currentColor driven */
.chip-icon, .legend-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--dot-color, var(--tint, var(--moss-700)));
}
.chip-icon { width: 15px; height: 15px; }
.legend-icon { width: 16px; height: 16px; }
.chip-icon svg, .legend-icon svg { width: 100%; height: 100%; display: block; }
.chip[aria-pressed="true"] .chip-icon { color: var(--paper-50); }

/* Reset button */
.reset-btn {
  width: 100%;
  padding: 11px;
  background: transparent;
  border: 1px dashed var(--bark-400);
  border-radius: var(--r-md);
  color: var(--bark-500);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: var(--font-body);
}
.reset-btn:hover {
  background: var(--paper-200);
  color: var(--bark-800);
  border-color: var(--bark-700);
  border-style: solid;
}

/* ========== MAIN MAP ========== */
.main {
  grid-area: main;
  position: relative;
  overflow: hidden;
  background: var(--paper-100);
}
#map { width: 100%; height: 100%; background: var(--paper-100); }
/* Hide Google Maps default controls (we render our own) */
.gm-style-cc, .gmnoprint, .gm-fullscreen-control { display: none !important; }
.gm-style a[href*="maps.google.com"] { opacity: 0.5; }
.gm-style a[href*="maps.google.com"]:focus, .gm-style a[href*="maps.google.com"]:hover { opacity: 1; }

/* ========== PINS — Hand-drawn iconography ========== */

/* Universal a11y: visible focus rings on every interactive element */
:where(button, a, input, [role="button"], [tabindex="0"]):focus-visible {
  outline: 3px solid var(--bark-800);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip-to-content link — only visible on keyboard focus */
.skip-link {
  position: absolute; top: -100px; left: 8px; z-index: 1000;
  background: var(--bark-800); color: var(--paper-50);
  padding: 10px 16px; border-radius: var(--r-sm);
  text-decoration: none; font-weight: 600;
  transition: top 150ms ease;
}
.skip-link:focus { top: 8px; }

/* Marker wrapper — meets WCAG 2.5.8 target size for dense clusters */
.cg-marker { padding: 2px; }
.cg-marker:focus-visible {
  outline: 3px solid var(--bark-800);
  outline-offset: 2px;
  border-radius: 50%;
}
.pin {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--paper-50);
  border: 2px solid var(--pin-color);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(74,58,38,0.35), 0 0 0 2px var(--paper-50);
  /* Anchor scale at the bottom-center so it grows in place — Google's
     AdvancedMarker pins from the bottom-center of the content element, and
     scaling from the geometric center caused the pin to visually jump. */
  transform-origin: 50% 100%;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms;
  position: relative;
  color: var(--pin-color);
  will-change: transform;
}
.pin svg { width: 18px; height: 18px; pointer-events: none; }
.pin:hover {
  transform: scale(1.18);
  box-shadow: 0 6px 16px rgba(74,58,38,0.45), 0 0 0 2px var(--paper-50);
}
.pin.is-selected {
  transform: scale(1.28);
  background: var(--pin-color);
  color: var(--paper-50);
  box-shadow: 0 8px 22px rgba(74,58,38,0.55), 0 0 0 3px var(--paper-50), 0 0 0 5px var(--pin-color);
}
@media (prefers-reduced-motion: reduce) {
  .pin { transition: none; }
  .pin:hover, .pin.is-selected { transform: none; }
}
.pin.is-favorite::before {
  content: "★";
  position: absolute;
  top: -7px; right: -7px;
  width: 18px; height: 18px;
  background: var(--ochre-500);
  color: var(--bark-800);
  font-size: 11px;
  border-radius: 50%;
  border: 2px solid var(--paper-50);
  display: grid; place-items: center;
  box-shadow: 0 2px 4px rgba(74,58,38,0.4);
  line-height: 1;
}

/* Map zoom controls */
.zoom-ctrl {
  position: absolute;
  top: var(--s-5); right: var(--s-5);
  display: flex; flex-direction: column;
  background: var(--paper-50);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  z-index: 5;
  box-shadow: var(--shadow-md);
}
.zoom-ctrl button {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--bark-500);
}
.zoom-ctrl button:hover { color: var(--bark-800); background: var(--paper-200); }
.zoom-ctrl button + button { border-top: 1px solid var(--color-border); }

/* Map legend */
.map-legend {
  position: absolute;
  bottom: var(--s-5); left: var(--s-5);
  background: var(--paper-50);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: flex; gap: var(--s-4);
  align-items: center;
  font-size: 12px;
  color: var(--bark-500);
  font-weight: 500;
  z-index: 5;
  box-shadow: var(--shadow-md);
}
.map-legend .legend-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  color: var(--bark-700);
  border-right: 1px solid var(--color-border);
  padding-right: var(--s-3);
  font-weight: 500;
}
.map-legend .legend-item {
  display: flex; align-items: center; gap: 7px;
  color: var(--bark-700); /* AA contrast on parchment */
}
.map-legend .legend-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper-50);
  border: 2px solid var(--tint, var(--bark-500));
}
.map-legend .legend-icon { color: var(--tint, var(--bark-500)); }

/* Google InfoWindow — paper note */
.gm-style .gm-style-iw,
.gm-style .gm-style-iw-c {
  background: var(--paper-50) !important;
  border: 1px solid var(--bark-400) !important;
  border-radius: var(--r-sm) !important;
  padding: 0 !important;
  box-shadow: var(--shadow-md) !important;
}
.gm-style .gm-style-iw-d { overflow: hidden !important; padding: 10px 14px; }
.gm-style .gm-style-iw-tc { display: none !important; }
.gm-style .gm-ui-hover-effect { display: none !important; }
.popup-name {
  font-family: var(--font-display);
  font-weight: 500; font-size: 14px;
  color: var(--bark-800);
  font-variation-settings: 'opsz' 14, 'SOFT' 30;
}
.popup-park {
  font-size: 11px;
  color: var(--bark-500);
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* ========== DETAIL PANEL — Field journal card ========== */
.detail {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  width: var(--detail-w);
  max-width: calc(100vw - 2 * var(--s-5));
  max-height: calc(100dvh - var(--header-h) - var(--s-10));
  background: var(--paper-50);
  border: 1px solid var(--bark-400);
  border-radius: var(--r-lg);
  z-index: 20;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  animation: detail-in 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes detail-in {
  from { opacity: 0; transform: translateX(20px) scale(0.96) rotate(0.3deg); }
  to   { opacity: 1; transform: translateX(0) scale(1) rotate(0); }
}

/* Hero — woodcut-style block print, agency-tinted */
.detail-hero {
  position: relative;
  height: 170px;
  background: var(--hero-c1);
  overflow: hidden;
  flex-shrink: 0;
  border-bottom: 1.5px solid var(--bark-700);
}
.detail-hero::before {
  content: "";
  position: absolute; inset: 0;
  /* layered mountains + sun illustration */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 170' preserveAspectRatio='xMidYMid slice'><circle cx='320' cy='52' r='28' fill='%23fbf6ec' fill-opacity='0.55'/><g fill='%23fbf6ec' fill-opacity='0.18'><path d='M0,170 L0,120 L60,70 L100,90 L160,40 L210,80 L260,55 L310,100 L360,75 L400,110 L400,170 Z'/></g><g fill='%23fbf6ec' fill-opacity='0.32'><path d='M0,170 L0,140 L40,110 L90,130 L150,90 L210,120 L260,100 L320,135 L380,115 L400,130 L400,170 Z'/></g><g fill='%23fbf6ec' fill-opacity='0.55'><path d='M0,170 L0,160 L40,148 L80,156 L130,140 L180,150 L220,144 L270,154 L320,146 L370,156 L400,150 L400,170 Z'/></g></svg>");
  background-size: cover;
  background-position: center;
}
.detail-hero::after {
  /* light grain on hero */
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

.detail-hero-meta {
  position: absolute; left: var(--s-4); bottom: var(--s-3); right: var(--s-4);
  display: flex; align-items: center; justify-content: space-between;
  z-index: 1;
}
.agency-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  background: var(--paper-50);
  border: 1.5px solid var(--bark-800);
  border-radius: 4px;
  color: var(--bark-800);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  box-shadow: 1px 1.5px 0 var(--bark-800);
}
.agency-tag .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dot-color);
  border: 1px solid var(--bark-800);
}

.detail-close, .detail-fav {
  position: absolute; top: var(--s-3);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper-50);
  border: 1.5px solid var(--bark-800);
  color: var(--bark-800);
  z-index: 2;
  box-shadow: 1px 1.5px 0 var(--bark-800);
}
.detail-close { right: var(--s-3); }
.detail-fav   { right: 56px; }
.detail-close:hover, .detail-fav:hover { background: var(--paper-100); transform: translateY(-1px); }
.detail-fav[aria-pressed="true"] { color: var(--clay-600); background: var(--ochre-400); }

.detail-body {
  padding: var(--s-5);
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--paper-300) transparent;
}
.detail-body::-webkit-scrollbar { width: 6px; }
.detail-body::-webkit-scrollbar-thumb { background: var(--paper-300); border-radius: 3px; }

.detail-title {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-variation-settings: 'opsz' 28, 'SOFT' 50, 'WONK' 1;
  font-weight: 500;
  line-height: 1.05;
  color: var(--bark-800);
  margin-bottom: 4px;
  letter-spacing: -0.015em;
}
.detail-park {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--bark-500);
  margin-bottom: var(--s-4);
  letter-spacing: 0.02em;
}
.detail-park::before {
  content: "—  ";
  color: var(--bark-400);
}
.detail-desc {
  font-size: var(--text-sm);
  color: var(--bark-700);
  line-height: 1.6;
  margin-bottom: var(--s-5);
  font-variation-settings: 'opsz' 16;
}

.detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-4);
  overflow: hidden;
  background: var(--paper-100);
}
.detail-stat {
  padding: var(--s-3);
  text-align: center;
}
.detail-stat + .detail-stat {
  border-left: 1px dashed var(--color-border-strong);
}
.detail-stat .label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bark-400);
  margin-bottom: 4px;
  font-weight: 600;
}
.detail-stat .value {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-variation-settings: 'opsz' 16, 'SOFT' 40;
  color: var(--bark-800);
  line-height: 1.1;
  font-weight: 500;
}

.detail-amenities {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: var(--s-5);
}
.amenity-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: var(--paper-100);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-pill);
  font-size: 11.5px;
  color: var(--bark-700);
  font-weight: 500;
}
.amenity-chip svg { width: 12px; height: 12px; color: var(--moss-700); }

.detail-actions { display: flex; flex-direction: column; gap: var(--s-2); }
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 13px 18px;
  background: var(--moss-700);
  color: var(--paper-50);
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  font-family: var(--font-body);
  border: 1.5px solid var(--moss-900);
  box-shadow: 0 2px 0 var(--moss-900), var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--moss-900);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--moss-900), var(--shadow-md);
}
.btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--moss-900); }

.btn-secondary {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 11px 16px;
  background: var(--paper-100);
  border: 1px solid var(--bark-400);
  border-radius: var(--r-md);
  color: var(--bark-700);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: var(--font-body);
}
.btn-secondary:hover { background: var(--paper-200); border-color: var(--bark-700); color: var(--bark-800); }
.btn-secondary[aria-pressed="true"] {
  background: var(--moss-300);
  border-color: var(--moss-700);
  color: var(--moss-900);
}

/* ========== TRIP PLANNER ========== */
.planner {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  width: 380px;
  max-width: calc(100vw - 2 * var(--s-5));
  max-height: calc(100dvh - var(--header-h) - var(--s-10));
  background: var(--paper-50);
  border: 1px solid var(--bark-400);
  border-radius: var(--r-lg);
  z-index: 25;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  animation: detail-in 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.planner-header {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--paper-100);
}
.planner-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  font-variation-settings: 'opsz' 24, 'SOFT' 40;
  color: var(--bark-800);
  letter-spacing: -0.01em;
}
.planner-title::after {
  content: "";
  display: block;
  width: 32px; height: 2px;
  background: var(--clay-600);
  margin-top: 4px;
}
.planner-stats {
  display: flex; gap: var(--s-5);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px dashed var(--color-border-strong);
  font-size: 12px;
  color: var(--bark-500);
  background: var(--paper-100);
}
.planner-stats b {
  color: var(--bark-800);
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 14px;
  font-variation-settings: 'opsz' 16, 'SOFT' 40;
}
.planner-list {
  list-style: none;
  padding: var(--s-3);
  overflow-y: auto;
  flex: 1;
}
.planner-list::-webkit-scrollbar { width: 6px; }
.planner-list::-webkit-scrollbar-thumb { background: var(--paper-300); border-radius: 3px; }
.planner-empty {
  text-align: center;
  padding: var(--s-8) var(--s-5);
  color: var(--bark-400);
  font-size: var(--text-sm);
}
.planner-empty svg { margin: 0 auto var(--s-3); color: var(--bark-400); }

.planner-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--paper-50);
  border: 1px solid var(--color-border);
  margin-bottom: var(--s-2);
  cursor: pointer;
  transition: all 200ms;
}
.planner-item:hover {
  background: var(--paper-100);
  border-color: var(--bark-400);
  transform: translateX(2px);
}
.planner-item-num {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper-50);
  color: var(--bark-800);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-display);
  flex-shrink: 0;
  border: 2px solid currentColor;
}
.planner-item-info { flex: 1; min-width: 0; }
.planner-item-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bark-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.planner-item-park {
  font-size: 11px;
  color: var(--bark-500);
  font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 12;
}
.planner-item-remove {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--bark-400);
}
.planner-item-remove:hover { color: var(--clay-600); background: var(--paper-200); }

/* ========== INTRO OVERLAY ========== */
.intro {
  position: absolute;
  inset: var(--s-5);
  z-index: 40;
  display: grid; place-items: center;
  pointer-events: none;
}
.intro-card {
  pointer-events: auto;
  max-width: 540px;
  padding: var(--s-10) var(--s-8);
  background: var(--paper-50);
  border: 1.5px solid var(--bark-700);
  border-radius: 4px;
  text-align: center;
  box-shadow:
    3px 4px 0 var(--bark-700),
    var(--shadow-lg);
  animation: intro-in 600ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.intro-card::before, .intro-card::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px;
  height: 1px;
  background: var(--bark-700);
  opacity: 0.5;
}
.intro-card::before { top: 8px; }
.intro-card::after  { bottom: 8px; }

@keyframes intro-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.intro-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--clay-600);
  margin-bottom: var(--s-3);
  font-weight: 700;
}
.intro h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.5rem + 3vw, 3.6rem);
  font-weight: 500;
  font-variation-settings: 'opsz' 60, 'SOFT' 80, 'WONK' 1;
  letter-spacing: -0.025em;
  line-height: 1.0;
  margin-bottom: var(--s-4);
  color: var(--bark-800);
}
.intro h1 em {
  font-style: italic;
  color: var(--moss-700);
  font-variation-settings: 'opsz' 60, 'SOFT' 100, 'WONK' 1;
}
.intro p {
  font-size: var(--text-sm);
  color: var(--bark-700);
  margin: 0 auto var(--s-5);
  line-height: 1.65;
  max-width: 420px;
}
.intro-stats {
  display: flex; justify-content: center; gap: var(--s-8);
  margin-bottom: var(--s-6);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--bark-400);
  border-bottom: 1px solid var(--bark-400);
  position: relative;
}
.intro-stats::before, .intro-stats::after {
  content: ""; position: absolute;
  left: 0; right: 0; height: 1px;
  background: var(--bark-400);
}
.intro-stats::before { top: 2px; }
.intro-stats::after  { bottom: 2px; }
.intro-stat .num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-variation-settings: 'opsz' 36, 'SOFT' 60, 'WONK' 1;
  font-weight: 500;
  color: var(--bark-800);
  display: block;
  line-height: 1;
}
.intro-stat .lbl {
  font-size: 9.5px;
  color: var(--bark-500);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: 6px;
  font-weight: 600;
}
.intro-cta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 14px 32px;
  background: var(--clay-600);
  color: var(--paper-50);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1.5px solid var(--clay-700);
  box-shadow: 0 3px 0 var(--clay-700), var(--shadow-md);
  font-family: var(--font-body);
}
.intro-cta:hover {
  background: var(--clay-700);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--clay-700), var(--shadow-lg);
}
.intro-cta:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--clay-700); }

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  :root { --rail-w: 280px; --detail-w: 380px; }
  .search { width: 220px; }
}

@media (max-width: 768px) {
  .app {
    grid-template-rows: var(--header-h) auto 1fr;
    grid-template-columns: 1fr;
    grid-template-areas: "header" "rail" "main";
  }
  .rail {
    max-height: 200px;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: var(--s-3) var(--s-4);
  }
  .stats-card, .rail-section h3 { display: none; }
  .rail-section { margin-bottom: var(--s-3); }
  .search { display: none; }
  .header { padding: 0 var(--s-3); }
  .brand-sub { display: none; }
  .detail, .planner {
    width: calc(100vw - 2 * var(--s-3));
    top: var(--s-3); right: var(--s-3);
    max-height: 70vh;
  }
  .map-legend { font-size: 10.5px; gap: var(--s-2); padding: 8px 10px; }
  .map-legend .legend-title { display: none; }
  .intro-card { padding: var(--s-6) var(--s-5); }
}

/* ========== ACCESSIBILITY IMPROVEMENTS ========== */

/* Visually-hidden but accessible to screen readers */
.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;
}

/* Bump chip touch target to ≥32px while keeping the visual height tight */
.chip {
  min-height: 32px;
}

/* Live region for filter result count — invisible but announced */
.live-region {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Detail panel & planner as dialogs — focus indicator on the panel itself
   when programmatically focused, but not a permanent ring */
.detail:focus, .planner:focus { outline: none; }

/* In-app footer (small, sits at bottom of the page on the index) */
:root { --footer-h: 40px; }
.app-footer {
  position: relative; z-index: 2;
  height: var(--footer-h);
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  padding: 0 16px;
  font-size: 12px;
  color: var(--bark-500);
  border-top: 1px solid var(--color-border);
  background: var(--paper-50);
}
.app-footer a {
  color: var(--bark-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--paper-300);
}
.app-footer a:hover { text-decoration-color: var(--bark-500); }
.app-footer .sep { color: var(--paper-400); }

/* Forced-colors / Windows High Contrast: ensure outlines and borders survive */
@media (forced-colors: active) {
  :where(button, a, input, [role="button"], [tabindex="0"]):focus-visible {
    outline: 3px solid CanvasText;
  }
  .chip[aria-pressed="true"] {
    border: 2px solid Highlight;
  }
  .pin {
    border: 2px solid CanvasText;
  }
}

/* ========== /accessibility STATEMENT PAGE ========== */
.page-body {
  background: var(--paper-50);
  color: var(--bark-800);
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.page-header {
  padding: 18px 28px;
  border-bottom: 1px solid var(--color-border);
  background: rgba(251, 246, 236, 0.85);
  backdrop-filter: saturate(140%) blur(6px);
}
.brand-link { text-decoration: none; color: inherit; display: inline-block; }
.brand-link:focus-visible {
  outline: 3px solid var(--bark-800);
  outline-offset: 4px;
  border-radius: 6px;
}
.page-main {
  flex: 1;
  display: flex; justify-content: center;
  padding: 56px 24px 80px;
}
.page-article {
  max-width: 720px;
  width: 100%;
  font-size: 16px;
  line-height: 1.65;
}
.page-article .eyebrow {
  font-family: var(--font-mono, var(--font-body));
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11.5px;
  color: var(--bark-500);
  margin: 0 0 14px;
}
.page-article h1 {
  font-family: var(--font-display, var(--font-body));
  font-weight: 600;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  color: var(--bark-800);
}
.page-article h1 em {
  font-family: 'Caveat', cursive;
  font-style: normal;
  font-weight: 600;
  color: var(--clay-600, var(--bark-700));
}
.page-article .lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--bark-700);
  margin: 0 0 36px;
}
.page-article h2 {
  font-family: var(--font-display, var(--font-body));
  font-weight: 600;
  font-size: 22px;
  margin: 36px 0 12px;
  color: var(--bark-800);
}
.page-article p { margin: 0 0 14px; }
.page-article ul {
  padding-left: 22px;
  margin: 0 0 14px;
}
.page-article li { margin-bottom: 8px; }
.page-article a {
  color: var(--moss-700, var(--bark-700));
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.page-article a:hover { text-decoration-thickness: 2px; }
.page-article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--paper-200);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--bark-800);
}
.page-article kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: var(--paper-50);
  border: 1px solid var(--bark-400);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--bark-800);
}
.page-article .last-reviewed {
  margin-top: 32px;
  color: var(--bark-500);
  font-size: 13px;
}
.page-article .back-link {
  display: inline-block;
  margin-top: 10px;
  font-weight: 600;
}
.page-footer {
  padding: 22px 28px;
  border-top: 1px solid var(--color-border);
  background: var(--paper-100);
  color: var(--bark-500);
  font-size: 13px;
}
.page-footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.page-footer nav { display: flex; align-items: center; gap: 10px; }
.page-footer a {
  color: var(--bark-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 600px) {
  .page-main { padding: 36px 18px 60px; }
  .page-article h1 { font-size: 36px; }
  .page-article .lede { font-size: 17px; }
}

/* ============================================================================
   ACCOUNT DIALOG — magic-link sign in / signed-in state
   Field-guide aesthetic: parchment surface, deckle edge, soft moss accents.
   ============================================================================ */
.icon-btn .avatar-initial {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--moss-700); color: var(--paper-50);
  font: 700 11px/18px var(--font-body);
  border-radius: 999px;
  display: grid; place-items: center;
  border: 2px solid var(--paper-50);
  letter-spacing: 0;
}

.account-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(74, 58, 38, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center;
  padding: var(--s-5);
  animation: account-overlay-in 220ms ease-out;
}
@keyframes account-overlay-in { from { opacity: 0; } to { opacity: 1; } }

body.account-open { overflow: hidden; }

.account-dialog {
  position: relative;
  width: 100%; max-width: 440px;
  max-height: calc(100vh - var(--s-8));
  overflow-y: auto;
  background: var(--paper-50);
  color: var(--bark-800);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--paper-300);
  padding: 36px 32px 28px;
  animation: detail-in 360ms cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}
.account-dialog:focus { box-shadow: var(--shadow-lg), 0 0 0 2px var(--moss-700); }
/* Deckle edge — paired tick-stripes top and bottom, like the intro card */
.account-dialog::before, .account-dialog::after {
  content: ""; position: absolute; left: 14px; right: 14px; height: 1px;
  background: repeating-linear-gradient(
    to right, var(--paper-300) 0 6px, transparent 6px 12px
  );
}
.account-dialog::before { top: 10px; }
.account-dialog::after  { bottom: 10px; }

.account-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent; border: none;
  color: var(--bark-500);
  border-radius: 999px;
  cursor: pointer;
}
.account-close:hover { color: var(--bark-800); background: var(--paper-200); }
.account-close:focus-visible {
  outline: 2px solid var(--bark-800); outline-offset: 2px;
}

.account-eyebrow {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay-600);
  margin: 4px 0 12px;
}

.account-title {
  font: 700 32px/1.05 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--bark-800);
  margin: 0 0 10px;
}
.account-title em {
  font-style: italic;
  color: var(--moss-700);
  font-weight: 600;
}

.account-lede {
  font: 400 15px/1.5 var(--font-body);
  color: var(--bark-700);
  margin: 0 0 22px;
}

.account-form { display: flex; flex-direction: column; gap: 12px; }

.account-label {
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bark-500);
}

#account-email {
  font: 400 16px/1.4 var(--font-body);
  color: var(--bark-800);
  background: var(--paper-100);
  border: 1.5px solid var(--paper-300);
  border-radius: var(--r-md);
  padding: 12px 14px;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
  -webkit-appearance: none;
  appearance: none;
}
#account-email::placeholder { color: var(--bark-400); }
#account-email:focus {
  border-color: var(--moss-700);
  box-shadow: 0 0 0 3px rgba(63, 98, 73, 0.18);
}

.account-checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  font: 400 13px/1.45 var(--font-body);
  color: var(--bark-700);
  cursor: pointer;
  margin-top: 4px;
}
.account-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 1px 0 0;
  accent-color: var(--moss-700);
  cursor: pointer;
}
.account-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--bark-800); outline-offset: 2px;
}

.account-submit {
  margin-top: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  background: var(--clay-600);
  color: var(--paper-50);
  border: none;
  font: 600 14px/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: 0 2px 0 var(--clay-700), var(--shadow-sm);
  transition: transform 120ms ease, box-shadow 120ms;
}
.account-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--clay-700), var(--shadow-md);
}
.account-submit:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--clay-700); }
.account-submit:focus-visible { outline: 2px solid var(--bark-800); outline-offset: 3px; }
.account-submit[data-busy="true"] { opacity: 0.7; cursor: progress; }
.account-submit:disabled { cursor: not-allowed; }

.account-status {
  margin: 6px 0 0;
  min-height: 1.2em;
  font: 400 13px/1.4 var(--font-body);
  color: var(--bark-700);
}
.account-status[data-kind="error"]   { color: var(--clay-700); }
.account-status[data-kind="success"] { color: var(--moss-700); font-weight: 600; }
.account-status[data-kind="pending"] { color: var(--bark-500); }

.account-fineprint {
  margin-top: 18px;
  font: 400 12px/1.5 var(--font-body);
  color: var(--bark-500);
}

/* Signed-in view */
#account-signed-in .account-title { margin-bottom: 4px; }
.account-email-line {
  font: 600 14px/1.3 var(--font-body);
  color: var(--moss-700);
  margin: 0 0 18px;
  word-break: break-all;
}
.account-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: var(--paper-100);
  border: 1px solid var(--paper-300);
  border-radius: var(--r-md);
  padding: 14px 12px;
  margin: 0 0 18px;
}
.account-stats > div {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.account-stats dt {
  font: 600 10px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bark-500);
  margin: 0;
}
.account-stats dd {
  font: 700 22px/1 var(--font-display);
  color: var(--bark-800);
  margin: 0;
}
.account-actions {
  display: flex; gap: 12px; margin-top: 18px;
}
.account-secondary {
  flex: 1;
  background: transparent;
  color: var(--bark-700);
  border: 1.5px solid var(--paper-300);
  font: 600 13px/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.account-secondary:hover {
  background: var(--paper-200);
  color: var(--bark-800);
  border-color: var(--bark-500);
}
.account-secondary:focus-visible { outline: 2px solid var(--bark-800); outline-offset: 2px; }

@media (max-width: 480px) {
  .account-dialog { padding: 30px 22px 22px; max-width: none; }
  .account-title { font-size: 28px; }
  .account-stats dd { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .account-overlay, .account-dialog { animation: none; }
}