/* ============================================================================
   PeakSeeker — Design System v2 "Editorial Alpine"
   ----------------------------------------------------------------------------
   A single, self-hosted stylesheet. No Tailwind CDN, no Google Fonts, no build
   step. Everything below is a design token or a component built from tokens.

   Principles
   1. Photography carries the colour. The interface is ink, paper and hairlines.
   2. Colour is semantic, never decorative: accent = the one action on screen,
      glacier = snow/conditions data, hazard scale = avalanche danger only.
   3. Numbers are typeset, not styled — mono, tabular, aligned.
   4. Space is the luxury. Sections breathe at 96–128px, not 32px.
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted) ---------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Inter + JetBrains Mono come from assets/fonts.css (already self-hosted). */

/* ---------- 2. Tokens ----------------------------------------------------- */
:root {
  /* Neutrals — warm paper, cool ink */
  --paper:        #FBFAF8;
  --paper-sunk:   #F2EFEA;
  --paper-raised: #FFFFFF;
  --ink-900: #0E1013;
  --ink-800: #191C21;
  --ink-700: #2C3138;
  --ink-600: #464C55;
  --ink-500: #6B727B;
  --ink-400: #939AA3;
  --ink-300: #BFC4CA;
  --ink-200: #E0E2E5;
  --ink-100: #EFF0F1;

  /* Accent — "Alpenglow". One action per screen. */
  --accent:      #A8442A;
  --accent-deep: #7E3020;
  --accent-tint: #F6EBE7;

  /* Glacier — snow, elevation, live conditions data */
  --glacier:      #3F6E8C;
  --glacier-tint: #E8EFF4;

  /* Hazard — avalanche danger scale ONLY (EAWS / North American standard) */
  --danger-1: #52A447;  /* Low */
  --danger-2: #FFF200;  /* Moderate */
  --danger-3: #F7941E;  /* Considerable */
  --danger-4: #ED1C24;  /* High */
  --danger-5: #1A1A1A;  /* Extreme */

  /* Type */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --step--1: 0.8125rem;
  --step-0:  0.9375rem;
  --step-1:  1.0625rem;
  --step-2:  1.375rem;
  --step-3:  clamp(1.625rem, 2.2vw, 2rem);
  --step-4:  clamp(2rem, 3.4vw, 3rem);
  --step-5:  clamp(2.75rem, 6vw, 5rem);

  /* Space — 4px base, editorial rhythm */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 10px;

  --rule: 1px solid var(--ink-200);
  --shadow-card: 0 1px 2px rgba(14,16,19,.04), 0 8px 24px -12px rgba(14,16,19,.14);
  --shadow-lift: 0 2px 4px rgba(14,16,19,.05), 0 18px 40px -18px rgba(14,16,19,.24);

  --measure: 66ch;
  /* Widened from 1280px so list-heavy pages (resorts, summits, trips,
     community) use more of the screen on desktop instead of leaving big
     empty margins -- matches the 1600px max already used on the session
     analysis page. */
  --shell: 1600px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Dark — inverted, not recoloured. Same system, night side of the mountain. */
[data-theme='dark'] {
  --paper:        #0E1013;
  --paper-sunk:   #08090B;
  --paper-raised: #171A1F;
  --ink-900: #F5F6F7;
  --ink-800: #E6E8EA;
  --ink-700: #CDD1D6;
  --ink-600: #A8AEB6;
  --ink-500: #838A93;
  --ink-400: #666D76;
  --ink-300: #474D55;
  --ink-200: #2A2F36;
  --ink-100: #1D2127;

  --accent:      #E0785C;
  --accent-deep: #C55C40;
  --accent-tint: #2A1712;

  --glacier:      #79AECD;
  --glacier-tint: #16242D;

  --rule: 1px solid var(--ink-200);
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.8);
}

/* ---------- 3. Reset ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink-800);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ---------- 4. Type ------------------------------------------------------- */
.display, h1, h2, h3 { font-family: var(--font-display); font-weight: 500; }

.display {
  font-size: var(--step-5);
  line-height: .96;
  letter-spacing: -.025em;
  font-variation-settings: 'opsz' 120, 'SOFT' 20, 'WONK' 1;
  color: var(--ink-900);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); line-height: 1.04; letter-spacing: -.02em;
     font-variation-settings: 'opsz' 90, 'SOFT' 15; color: var(--ink-900); text-wrap: balance; }
h2 { font-size: var(--step-3); line-height: 1.12; letter-spacing: -.015em;
     font-variation-settings: 'opsz' 40, 'SOFT' 10; color: var(--ink-900); }
h3 { font-size: var(--step-2); line-height: 1.2; letter-spacing: -.01em;
     font-variation-settings: 'opsz' 24; color: var(--ink-900); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.lede { font-size: var(--step-1); line-height: 1.6; color: var(--ink-600); max-width: var(--measure); }
.muted { color: var(--ink-500); }
.small { font-size: var(--step--1); }

/* Numbers are data. Always mono, always tabular. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -.02em;
}

/* ---------- 5. Layout ----------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--s-5); }
@media (min-width: 900px) { .shell { padding-inline: var(--s-7); } }
.section { padding-block: var(--s-9); }
@media (min-width: 900px) { .section { padding-block: var(--s-10); } }
.section--tight { padding-block: var(--s-8); }
.stack > * + * { margin-top: var(--s-4); }
.rule { border: 0; border-top: var(--rule); }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  padding-bottom: var(--s-5); margin-bottom: var(--s-7);
  border-bottom: var(--rule);
}

/* ---------- 6. Masthead --------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: var(--rule);
}
.masthead__inner {
  display: flex; align-items: center; gap: var(--s-4);
  height: 68px;
}
@media (min-width: 900px) { .masthead__inner { gap: var(--s-6); } }
.wordmark {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 600; letter-spacing: -.03em;
  font-variation-settings: 'opsz' 30, 'SOFT' 10, 'WONK' 1;
  color: var(--ink-900); white-space: nowrap;
}
.wordmark sup {
  font-family: var(--font-ui); font-size: .5rem; font-weight: 700;
  letter-spacing: .12em; color: var(--accent); vertical-align: super; margin-left: 3px;
}
.nav { display: none; align-items: center; gap: var(--s-6); margin-inline: auto; }
@media (min-width: 900px) { .nav { display: flex; } }
.nav a {
  position: relative; font-size: var(--step--1); font-weight: 500;
  color: var(--ink-600); padding-block: 6px; transition: color .18s var(--ease);
}
.nav a:hover { color: var(--ink-900); }
.nav a[aria-current='page'] { color: var(--ink-900); font-weight: 600; }
.nav a[aria-current='page']::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--accent);
}

/* Plain dot (no count) marking a nav item with something new waiting —
   currently just Trips (a pending invite). Positioned relative to whichever
   parent link renders it: .nav a already has position:relative; .tabbar a
   gets it added below since it didn't need it before. */
.ps-nav-badge {
  position: absolute; top: -3px; right: -9px; width: 8px; height: 8px;
  border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 0 2px var(--paper, #fff);
}
.tabbar a .ps-nav-badge { top: 6px; right: calc(50% - 20px); }
.masthead__tools { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
@media (min-width: 900px) { .masthead__tools { margin-left: 0; } }

/* Phase 55: the masthead row (wordmark + tools) had no way to shrink on
   phone widths -- every child (icon buttons, the signed-out Log in / Sign
   up pair) keeps its flex-basis min-width:auto default, so the row simply
   overflowed the viewport at its full ~442px intrinsic width regardless
   of container size, and Sign up (the last, rightmost item) got visibly
   clipped at the screen edge -- confirmed via Playwright at 320/375/390/
   393px, all showing the exact same unshrunk row width. Reported by Louis
   from a live phone screenshot ("shift login in sign up left").
   Fix is three small reclaims of space below the same 900px breakpoint
   already used for .nav, rather than one large change:
   1) hide the search icon -- it has no click handler wired anywhere in
      the codebase (grepped, confirmed unused), so it's pure decoration
      today and the safest thing to drop first on a cramped screen. */
@media (max-width: 899px) { .ps-masthead-search { display: none; } }
/* 2) tighten the signed-out auth buttons' padding specifically (not the
   .btn base rule, which is shared by buttons all over the site) so Log in
   / Sign up take noticeably less width without changing their font size
   or anything about how .btn looks anywhere else. */
@media (max-width: 899px) {
  .masthead__auth .btn { padding-inline: 12px; }
  /* 3) the remaining icon buttons (mail, theme toggle) get the same
     tighter-padding treatment as the auth buttons above -- still full
     touch-target size (icon + padding comfortably exceeds 44px with the
     border-radius:999px hit area), just less dead space around each. */
  .masthead__tools .btn--icon { padding: 7px; }
  .masthead__tools { gap: 6px; }
  /* 4) the masthead's own left/right margins can run tighter than the
     rest of the page's .shell padding (used for hero/content sections,
     left untouched) -- this selector only reaches the masthead bar. */
  .masthead .masthead__inner { padding-inline: var(--s-4); }
}

/* Signed-out Log in / Sign up: .masthead__auth had no display rule of its
   own, so as a block-level element holding two inline-flex .btn links, it
   word-wrapped them onto separate lines exactly like overflowing text
   whenever the row got tight -- reported as the two buttons stacking
   awkwardly in the top-right on mobile. Flex row + no-wrap keeps them side
   by side; flex-shrink:0 stops the rest of .masthead__tools from
   squeezing this into wrapping again. */
.masthead__auth { display: flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; }

/* Unread-message badge on the masthead's mail icon — hidden by default
   (see #ps-messages-badge in peakseeker.js), filled in by auth.js's
   renderAuthSlot once the unread count actually resolves. */
.ps-messages-badge {
  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
  box-shadow: 0 0 0 2px var(--paper, #fff);
}

/* ---------- 7. Buttons ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-size: var(--step--1); font-weight: 600; letter-spacing: .01em;
  padding: 11px 20px; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: background .18s var(--ease), border-color .18s var(--ease),
                              color .18s var(--ease), transform .18s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; pointer-events: none; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); }
.btn--ghost { background: transparent; color: var(--ink-800); border-color: var(--ink-300); }
.btn--ghost:hover { border-color: var(--ink-900); background: var(--ink-100); }
.btn--quiet { background: transparent; color: var(--ink-600); padding-inline: 10px; }
.btn--quiet:hover { color: var(--ink-900); background: var(--ink-100); }
.btn--icon { padding: 9px; border-radius: 999px; }
.btn--onDark { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.28);
               backdrop-filter: blur(8px); }
.btn--onDark:hover { background: rgba(255,255,255,.2); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--step--1); font-weight: 600; color: var(--ink-900);
  border-bottom: 1px solid var(--ink-300); padding-bottom: 2px;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.link-arrow:hover { color: var(--accent); border-color: var(--accent); }
.link-arrow svg { transition: transform .18s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- 8. Inputs ----------------------------------------------------- */
.field {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--paper-raised); border: var(--rule); border-radius: var(--radius);
  padding: 0 var(--s-4); height: 48px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field:focus-within { border-color: var(--ink-900); box-shadow: 0 0 0 4px var(--ink-100); }
.field input { border: 0; background: none; outline: none; width: 100%; height: 100%; }
.field input::placeholder { color: var(--ink-400); }
.field svg { color: var(--ink-400); flex: none; }

.chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chip {
  font-size: var(--step--1); font-weight: 500; color: var(--ink-600);
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ink-200);
  background: transparent; cursor: pointer;
  transition: all .18s var(--ease);
}
.chip:hover { border-color: var(--ink-500); color: var(--ink-900); }
.chip[aria-pressed='true'] { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper); }
.chip .num { font-size: .75rem; color: inherit; opacity: .55; margin-left: 4px; }

/* ---------- 9. Resort card ------------------------------------------------ */
.grid-cards {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.card {
  display: flex; flex-direction: column;
  background: var(--paper-raised);
  border: var(--rule); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow .28s var(--ease), transform .28s var(--ease), border-color .28s var(--ease);
}
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); border-color: var(--ink-300); }
.card__media { position: relative; aspect-ratio: 4 / 3; background: var(--ink-100); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover;
                   transition: transform .6s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,.28) 100%);
  pointer-events: none;
}
.card__rank {
  position: absolute; top: var(--s-4); left: var(--s-4); z-index: 2;
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: rgba(0,0,0,.42); backdrop-filter: blur(6px);
  padding: 4px 8px; border-radius: var(--radius-sm);
}
.card__pass {
  position: absolute; bottom: var(--s-4); left: var(--s-4); z-index: 2;
  font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: var(--radius-sm);
  padding: 3px 8px; backdrop-filter: blur(6px);
}
.card__fav {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 999px; border: 0; cursor: pointer; color: #fff;
  background: rgba(0,0,0,.32); backdrop-filter: blur(6px);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.card__fav:hover, .card__fav[aria-pressed='true'] { background: #fff; color: var(--accent); }
.card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.card__title { font-size: 1.1875rem; line-height: 1.22; }
.card__meta { display: flex; align-items: center; gap: 6px; }
.card__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: var(--rule); margin-top: auto; padding-top: var(--s-4);
}
.card__stats > div + div { border-left: var(--rule); padding-left: var(--s-4); }
.stat__k { font-size: .625rem; font-weight: 600; letter-spacing: .1em;
           text-transform: uppercase; color: var(--ink-400); display: block; margin-bottom: 2px; }
.stat__v { font-family: var(--font-mono); font-size: .9375rem; font-weight: 500;
           color: var(--ink-900); font-variant-numeric: tabular-nums; }
.stat__v small { font-family: var(--font-ui); font-size: .6875rem; font-weight: 500; color: var(--ink-500); }

/* Verified mark — the product's whole thesis, so it gets a real component */
.verified {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--glacier);
}
.verified svg { flex: none; }
.unverified { color: var(--ink-400); }

/* ---------- 10. Hero ------------------------------------------------------ */
.hero { position: relative; background: var(--ink-900); color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,10,13,.72) 0%, rgba(8,10,13,.22) 38%, rgba(8,10,13,.94) 100%),
    linear-gradient(90deg, rgba(8,10,13,.78) 0%, rgba(8,10,13,0) 62%);
}
.hero__inner { position: relative; z-index: 2; padding-block: var(--s-10) var(--s-8); }
.hero .display, .hero h1 { color: #fff; }
.hero .eyebrow { color: rgba(255,255,255,.72); }
.hero .lede { color: rgba(255,255,255,.82); }

/* Stat rail — the horizontal hairline strip under a hero */
.rail {
  display: grid; gap: 0;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid rgba(255,255,255,.18);
}
@media (min-width: 720px) { .rail { grid-template-columns: repeat(4, 1fr); } }
.rail > div { padding: var(--s-5) var(--s-5) var(--s-5) 0; }
@media (min-width: 720px) {
  .rail > div + div { border-left: 1px solid rgba(255,255,255,.18); padding-left: var(--s-5); }
}
.rail .stat__k { color: rgba(255,255,255,.55); }
.rail .stat__v { color: #fff; font-size: 1.5rem; font-weight: 400; }
.rail .stat__v small { color: rgba(255,255,255,.6); }

/* ---------- 11. Conditions panel ------------------------------------------ */
.panel {
  background: var(--paper-raised); border: var(--rule); border-radius: var(--radius-lg);
  overflow: hidden;
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5); border-bottom: var(--rule);
}
.panel__body { padding: var(--s-5); }
.live-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-500);
}
.live-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--danger-1);
  box-shadow: 0 0 0 0 rgba(82,164,71,.6); animation: pulse 2.4s infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 6px rgba(82,164,71,0); } 100% { box-shadow: 0 0 0 0 rgba(82,164,71,0); } }

.metrics { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .metrics { grid-template-columns: repeat(4, 1fr); } }
.metrics > div { padding: var(--s-5); border-top: var(--rule); }
.metrics > div:nth-child(-n+2) { border-top: 0; }
@media (min-width: 640px) { .metrics > div { border-top: 0; } .metrics > div + div { border-left: var(--rule); } }
.metric__v { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 400;
             color: var(--ink-900); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.metric__v small { font-family: var(--font-ui); font-size: .75rem; color: var(--ink-500); margin-left: 2px; }
.metric--snow .metric__v { color: var(--glacier); }

.forecast { display: grid; grid-template-columns: repeat(5, 1fr); }
.forecast > div { padding: var(--s-4) var(--s-3); text-align: center; }
.forecast > div + div { border-left: var(--rule); }
.forecast .day { font-size: .625rem; font-weight: 700; letter-spacing: .1em;
                 text-transform: uppercase; color: var(--ink-400); }

/* Avalanche danger scale */
.danger { display: flex; align-items: stretch; gap: var(--s-4); }
.danger__bar { width: 4px; border-radius: 999px; flex: none; }
.danger__level { font-family: var(--font-mono); font-size: 1.25rem; color: var(--ink-900); }
.d0 { background: var(--ink-300); }
.d1 { background: var(--danger-1); } .d2 { background: var(--danger-2); }
.d3 { background: var(--danger-3); } .d4 { background: var(--danger-4); } .d5 { background: var(--danger-5); }

/* ---------- 12. Provenance ------------------------------------------------ */
/* The differentiator, made visible: where every fact came from. */
.source-note {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); border-radius: var(--radius);
  background: var(--glacier-tint); border: 1px solid color-mix(in srgb, var(--glacier) 22%, transparent);
  font-size: var(--step--1); color: var(--ink-600);
}
.source-note svg { color: var(--glacier); flex: none; margin-top: 2px; }
.source-note a { color: var(--glacier); text-decoration: underline; text-underline-offset: 2px; }

.warn-note {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); border-radius: var(--radius);
  background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: var(--step--1); color: var(--ink-700);
}

/* ---------- 13. Empty states ---------------------------------------------- */
.empty {
  text-align: center; padding: var(--s-9) var(--s-5);
  border: 1px dashed var(--ink-300); border-radius: var(--radius-lg);
}
.empty h3 { margin-bottom: var(--s-2); }
.empty p { color: var(--ink-500); max-width: 42ch; margin-inline: auto; margin-bottom: var(--s-5); }

/* ---------- 14. Utilities ------------------------------------------------- */
.flex { display: flex; } .items-center { align-items: center; }
.between { justify-content: space-between; } .wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.grow { flex: 1; }
.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;
}
.cols-2 { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) { .cols-2 { grid-template-columns: 1.55fr 1fr; align-items: start; } }

/* ---------- 15. Mobile tab bar -------------------------------------------- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  /* grid-auto-flow (rather than a hardcoded repeat(N, 1fr)) sizes columns to
     however many links PS.mountShell() actually renders, so this can't
     silently drift out of sync with assets/peakseeker.js's NAV array again
     the way it did when Community/Trophy were dropped from the nav. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px); border-top: var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 900px) { .tabbar { display: none; } }
.tabbar a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 4px 12px; font-size: .625rem; font-weight: 600;
  letter-spacing: .04em; color: var(--ink-500);
}
.tabbar a[aria-current='page'] { color: var(--ink-900); }
.tabbar a[aria-current='page'] svg { color: var(--accent); }
body { padding-bottom: 68px; }
@media (min-width: 900px) { body { padding-bottom: 0; } }

/* ---------- 16. Long-form content pages (About / Glossary / Gear) --------- */
/* Shared by the three informational pages (about.html, glossary.html,
   gear-basics.html) -- reusable rather than duplicated per-page since all
   three are the same "editorial article" shape: a dark .hero, then a
   measure-width column of headings/paragraphs/lists/tables. */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { margin-top: var(--s-9); scroll-margin-top: 96px; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s-7); scroll-margin-top: 96px; }
.prose p { color: var(--ink-700); }
.prose ul, .prose ol { padding-left: 1.25em; color: var(--ink-700); }
.prose li + li { margin-top: var(--s-2); }
.prose strong { color: var(--ink-900); font-weight: 600; }
.prose hr.rule { margin-block: var(--s-8); }
[id] { scroll-margin-top: 96px; }

.table-wrap { overflow-x: auto; border: var(--rule); border-radius: var(--radius-lg); }
table.ref-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
table.ref-table th, table.ref-table td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: var(--rule); vertical-align: top; }
table.ref-table th { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); background: var(--paper-sunk); }
table.ref-table tr:last-child td { border-bottom: 0; }
table.ref-table td:first-child { font-family: var(--font-mono); white-space: nowrap; }

/* Term-definition list -- reused for every glossary category and for each
   gear list, since both are "bold lead-in, then a sentence" in the copy. */
ul.glossary-list { list-style: none; padding-left: 0; }
ul.glossary-list li { padding-block: var(--s-3); border-top: var(--rule); }
ul.glossary-list li:first-child { border-top: 0; padding-top: 0; }
ul.glossary-list li strong { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--ink-900); display: block; margin-bottom: 2px; }

.page-toc { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.page-toc a { font-size: var(--step--1); font-weight: 500; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ink-200); color: var(--ink-600); }
.page-toc a:hover { border-color: var(--ink-500); color: var(--ink-900); }

.danger-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }

/* ---------- 17. Site footer ------------------------------------------------ */
.site-footer { border-top: var(--rule); }
.site-footer a.footer-link { font-size: var(--step--1); font-weight: 600; color: var(--ink-700); }
.site-footer a.footer-link:hover { color: var(--accent); }