/* The Prepared Angler — Emerald Coast Fishing Portal
 * Dark, dense "fishing intelligence dashboard" theme.
 * Layout: fixed left sidebar + scrolling main column (topbar / dash / status).
 */

/* Interim pare-down (2026-06): sections deferred from the default dashboard
   to cut mobile scroll. display:none keeps them in the DOM and makes it
   one-step reversible — remove the tpa-deferred class from a <section> to
   bring it back. See the matching comments in index.html. */
.tpa-deferred { display: none !important; }

 :root {
  /* ---- Deep Marine palette (navy semantic system) ----
     Anchored on the LOCKED hex from tpa-v2-dashboard-direction.md (sunlight-
     passed 2026-06-09). Intermediate surface shades are DERIVED from those
     anchors. Core rule: text is near-white; navy is used for FILLS ONLY, never
     load-bearing text. Green/yellow/orange/red are the only meaning-bearing
     colors. (Phase B1 — token swap only; heading/factor restyle is later.) */
  /* Surfaces — navy ladder */
  --bg:          #0F1E2C; /* Deep Sea — base hull (LOCKED) */
  --sidebar:     #0B1825; /* chrome rail, recedes below base (DERIVED) */
  --panel:       #14304A; /* navy fill panel, ~Ocean Navy #153656 (DERIVED) */
  --panel-2:     #1A3C59; /* raised / hover panel (DERIVED) */
  --panel-3:     #112740; /* alt panel (DERIVED) */
  --inset:       #0A1622; /* inset wells, darkest (DERIVED) */
  --border:      #1E5D7A; /* Sea Blue — borders / accent (LOCKED) */
  --border-soft: #163A52; /* soft navy seam (DERIVED) */
  /* Brand / accent — teal is now a SPARING accent, no longer "good" */
  --emerald:     #27C3A5; /* Teal accent (LOCKED) */
  --emerald-dim: #1E9686; /* darker teal (DERIVED) */
  --sea:         #1E5D7A; /* Sea Blue (LOCKED) */
  --sand:        #9FB3C4; /* off-palette tan neutralised to muted blue (DERIVED) */
  --gold:        #FBBF24; /* Caution Yellow; also legacy peak accent for now (LOCKED) */
  --amber:       #F97316; /* Alert Orange (LOCKED) */
  --coral:       #EF4444; /* Danger Red (LOCKED) */
  /* Text — near-white primary */
  --text:        #F6FAFF; /* Text Primary (LOCKED) */
  --muted:       #9FB3C4; /* Text Secondary, lightened for outdoor legibility (LOCKED rec) */
  --faint:       #5D6E7B; /* faint labels (LOCKED) */
  /* Score / signal scale — the only meaning-bearing colors */
  --score-good:  #34D399; /* Safety Green — GO (LOCKED) */
  --score-mid:   #FBBF24; /* Caution Yellow — FAIR (LOCKED) */
  --score-poor:  #EF4444; /* Danger Red — NO-GO (LOCKED) */
  --ring-track:  #21425E; /* gauge/ring unfilled track — a step lighter than
                             --panel so the ring reads against it (DERIVED) */

  --radius: 9px;
  --gap: 13px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--emerald); }
h1, h2, h3 { margin: 0; font-weight: 600; }
::selection { background: var(--emerald-dim); color: #04201c; }

/* ============ App shell ============ */
.app {
  display: grid;
  grid-template-columns: 214px 1fr;
  min-height: 100vh;
}
.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ============ Sidebar ============ */
.sidebar {
  background: linear-gradient(180deg, #0a1d26, #06121a);
  border-right: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--text);
  padding: 2px 6px;
}
.brand-mark {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--emerald);
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.brand-mark svg { width: 24px; height: 24px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-text strong {
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.brand-text span {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--emerald);
}
.brand-tag {
  margin: 8px 6px 14px;
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.84rem;
  white-space: nowrap;
}
.side-nav a:hover { background: var(--panel-3); color: var(--text); }
.side-nav a.active {
  background: linear-gradient(90deg, rgba(47,227,195,0.16), rgba(47,227,195,0.02));
  border-left-color: var(--emerald);
  color: var(--emerald);
}
.side-nav a svg { width: 17px; height: 17px; flex: none; }
.nav-label { overflow: hidden; text-overflow: ellipsis; }
/* Section heading inside the sidebar (e.g. "Marine Data") — separates the
   primary links from the deeper data surfaces. Hidden in the collapsed rail. */
.nav-group-label {
  margin: 12px 10px 4px;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ============ Top bar ============ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: linear-gradient(180deg, #0a1f29, #07151c);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 8;
}
.topbar-head { flex: 1 1 auto; min-width: 0; }
/* Title and the login button share one row; the tagline spans full width
   below it. The button sits at the bottom-right — beside the last title line
   (Navarre), offset well clear of the city names — instead of dropping to its
   own row. The title reserves the left column and wraps; the button never
   shrinks, so they can't overlap at any width. */
.topbar-titlerow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.topbar-title {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  min-width: 0;   /* let the title wrap rather than shove the button off-row */
}
.topbar-title i { color: var(--emerald); font-style: normal; margin: 0 2px; }
.topbar-sub { margin: 1px 0 0; font-size: 0.76rem; color: var(--muted); }

.topbar-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 7px;
}
.pill-icon { font-size: 1rem; filter: saturate(0.6) brightness(1.1); }
.pill-body { display: flex; flex-direction: column; line-height: 1.2; }
.pill-val { font-size: 0.92rem; font-weight: 700; }
.pill-key { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint); }
.pill-tide {
  background: linear-gradient(180deg, rgba(47,227,195,0.14), rgba(47,227,195,0.03));
  border-color: var(--emerald-dim);
}
.pill-tide .pill-val { color: var(--emerald); }

/* ============ Windy embed panel (dashboard refresh phase 3A) ============
 * Live wind/radar map at the top of the dashboard. iframe height differs
 * between mobile and desktop to keep the embed substantial on big screens
 * without overwhelming a phone viewport. Background while loading uses
 * --panel-3 so the iframe doesn't flash white before Windy renders.
 */
.windy-panel {
  padding: 11px 13px 13px;
}
.windy-panel .panel-head a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}
.windy-panel .panel-head a:hover { color: var(--emerald); }
.windy-embed-wrap {
  position: relative;
  width: 100%;
  height: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
}
.windy-embed-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Tap shield — sits over the iframe so a scroll gesture passes through to the
   page (a plain element doesn't trap scroll the way the map iframe does)
   instead of panning the map. Tapping it activates the map (.map-active). */
.windy-tap-shield {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.windy-embed-wrap.map-active .windy-tap-shield {
  opacity: 0;
  pointer-events: none;
}
.windy-tap-hint {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(4, 14, 20, 0.82);
  border: 1px solid var(--border-soft);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  pointer-events: none;
}
@media (max-width: 720px) {
  .windy-embed-wrap { height: 280px; }
}
@media (max-width: 480px) {
  .windy-embed-wrap { height: 260px; }
}

/* ============ Mobile nav ============ */
/* Hamburger lives in the topbar; hidden on desktop, shown below 720px. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: none;
  width: 40px;
  height: 38px;
  padding: 0 9px;
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 7px;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--emerald);
  border-radius: 2px;
}
/* Dark scrim behind the slid-in sidebar; only visible when .sidebar-open. */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 18;
  background: rgba(4,14,20,0.62);
}
.pill-radar-link {
  color: inherit;
  text-decoration: none;
}
.pill-radar-link:hover { text-decoration: underline; }

/* ============ Dashboard layout ============ */
.dash {
  flex: 1;
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.dash-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 326px;
  gap: var(--gap);
  align-items: start;
}
.col-main, .col-rail { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.row { display: grid; gap: var(--gap); }
.row.idx2   { grid-template-columns: 1fr 1.45fr; }
.row.pair   { grid-template-columns: 1fr 1fr; }   /* even pair (Marine | Tides) on desktop */

/* ============ Panels ============ */
.panel {
  background: var(--panel);
  /* Subtlest possible separation from the background — barely a border. */
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius);
  padding: 11px 13px 13px;
  min-width: 0;
}
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  flex-wrap: wrap;
}
.panel-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--emerald);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  min-width: 0;
  overflow-wrap: break-word;
}
/* Panel-title glyph — inline, inherits the title's teal via currentColor. */
.panel-title .title-icon { margin-right: 6px; line-height: 0; }
.panel-title .title-icon svg { width: 15px; height: 15px; vertical-align: -2.5px; }
.panel-sub, .panel-foot {
  font-size: 0.68rem;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.panel-sub { white-space: nowrap; }
.panel-foot { margin: 9px 0 0; }
.panel-actions { display: flex; gap: 12px; }
.panel-action {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  white-space: nowrap;
}
.panel-action:hover { text-decoration: underline; }
.loading { color: var(--muted); font-style: italic; font-size: 0.82rem; }
.error { color: var(--coral); font-size: 0.82rem; }

/* ============ Fishing index band ============ */
.fishidx-band {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  /* Internal padding bumped 25% (22/26 -> 27.5/32.5) for a roomier hero. */
  padding: 27.5px 32.5px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  /* Navy fallback. Mobile paints the photo as a full-bleed layer behind the
     whole top of the page (see the max-width block below); desktop keeps the
     photo on this card (min-width:920 block). */
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(39, 195, 165, 0.16) 0%, transparent 48%),
    linear-gradient(115deg, #163a52 0%, #11304a 50%, #0e273c 100%);
}
/* Desktop: scale the hero so the verdict commands the top of the page. */
@media (min-width: 920px) {
  .fishidx-band {
    padding: 34px 40px 28px;
    gap: 26px;
    /* Desktop only — the Destin East Pass hero photo, with a left navy scrim so
       the verdict stays legible and a slight bottom darken under the factor row.
       Mobile keeps the lighter gradient (no image load for the 84% on phones). */
    background:
      linear-gradient(180deg, transparent 42%, rgba(11, 29, 46, 0.5) 100%),
      linear-gradient(100deg, rgba(11, 29, 46, 0.97) 0%, rgba(11, 29, 46, 0.84) 36%, rgba(13, 39, 60, 0.28) 70%, rgba(13, 39, 60, 0.18) 100%),
      url("../img/hero-destin.jpg") center / cover no-repeat,
      linear-gradient(115deg, #163a52 0%, #11304a 50%, #0e273c 100%);
  }
  .fishidx-band .hero-gauge { width: 188px; height: 188px; }
  .fishidx-band .hero-gauge .score-number { font-size: 3.6rem; }
  .fishidx-text { max-width: 520px; }   /* leave the right of the row as the image zone */
  .fishidx-text .score-verdict { font-size: 1.55rem; }
  .fishidx-text .score-reason { font-size: 0.95rem; }
  /* Factor tiles: one clean row of six beneath the hero. */
  #fishing-factors { grid-template-columns: repeat(6, 1fr); }
}
/* Mobile: full-bleed hero photo from the very top — behind the header, pill nav,
   and fishing index — fading into the factor tiles. Kills the empty-header strip
   so the top of the app reads as one continuous hero. (Heights/fade are tuned
   against the live preview.) */
@media (max-width: 919px) {
  body[data-page="dashboard"] .app-main { position: relative; }
  body[data-page="dashboard"] .app-main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(420px, 60vh, 580px);
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg,
        rgba(8, 18, 28, 0.66) 0%,
        rgba(8, 18, 28, 0.40) 24%,
        rgba(10, 22, 34, 0.50) 54%,
        rgba(15, 30, 44, 0.95) 86%,
        var(--bg, #0F1E2C) 100%),
      url("../img/hero-destin-mobile.jpg") center top / cover no-repeat;
  }
  /* Lift the real content above the photo layer. */
  body[data-page="dashboard"] .topbar,
  body[data-page="dashboard"] .pill-nav,
  body[data-page="dashboard"] .dash { position: relative; z-index: 1; }
  body[data-page="dashboard"] .topbar { background: transparent; border-bottom: 0; }
  body[data-page="dashboard"] .pill-nav { background: transparent; border-bottom: 0; }
  /* The fishing-index band now rides the shared photo — drop its own card. */
  body[data-page="dashboard"] .fishidx-band {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 4px 16px 14px;
  }
}

/* ============ Mobile quick-jump tab bar ============ */
/* Taps smooth-scroll to the most-checked sections. Mobile only — desktop uses
   the sidebar. Additive: page nav still lives in the pill-nav / sidebar. */
html { scroll-behavior: smooth; }
.panel { scroll-margin-top: 12px; }   /* breathing room when jumped to */
.tabbar { display: none; }
@media (max-width: 919px) {
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    justify-content: space-around;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(11, 26, 38, 0.93);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-soft);
  }
  .tabbar-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 3px 2px;
    text-decoration: none;
    color: var(--muted);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  .tabbar-btn .tabbar-icon { line-height: 0; }
  .tabbar-btn .tabbar-icon svg { width: 21px; height: 21px; }
  .tabbar-btn.active { color: var(--emerald); }
  .app-main { padding-bottom: 60px; }   /* clear the fixed bar */
}
/* Elevation — lifts the live-data panels off the background. */
#tide-panel,
#marine-panel { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
#tide-panel { padding-bottom: 1.5rem; }
/* Lead (gauge + verdict) spans the full hero row, so the factor tiles wrap to
   their own full-width row beneath it and the right of the verdict row stays
   open as the image zone. */
.fishidx-lead { display: flex; align-items: center; gap: 20px; flex: 1 1 100%; }
.fishidx-text .panel-title { display: block; margin-bottom: 4px; }
.fishidx-text .score-verdict { margin: 0; font-size: 1.12rem; }

/* ---- Vessel suitability badges (below the verdict) ---- */
.vessel-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.vessel-badge {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 3px 8px;
}
.vb-safe    { color: var(--emerald); }
.vb-ok      { color: var(--gold); }
.vb-caution { color: var(--coral); }

/* ============ Score rings ============ */
.score-number { font-weight: 800; line-height: 1; }
/* Comfort gauge — the hero gauge style, smaller and without the compass ticks.
   Driven by --score / --score-color set on #comfort-ring by buildConditions(). */
.comfort-gauge {
  --score: 0;
  --score-color: var(--muted);
  position: relative;
  width: 108px;
  height: 108px;
  flex: none;
}
.comfort-gauge-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.comfort-gauge-track { fill: none; stroke: var(--ring-track); stroke-width: 9; }
.comfort-gauge-arc {
  fill: none;
  stroke: var(--score-color);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 314.159;                                  /* 2·π·r, r=50 */
  stroke-dashoffset: calc(314.159 * (1 - var(--score) / 100));
  filter: drop-shadow(0 0 3px var(--score-color));
  transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease;
}
.comfort-gauge-readout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.comfort-gauge .score-number { font-size: 1.85rem; color: var(--score-color); }
.score-caption {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: 3px;
}
.score-verdict { font-weight: 700; font-size: 0.95rem; }
/* One-line "why" under the verdict — reconciles the headline score with the
   factor bars. Muted so the verdict still leads. */
.score-reason { margin: 4px 0 0; font-size: 0.85rem; line-height: 1.35; color: var(--muted); font-weight: 500; }

/* Gold accent — fishing index at a peak score (9.5+). */
.score-peak { filter: drop-shadow(0 0 8px rgba(232, 160, 32, 0.4)); }
.score-peak .score-number { color: var(--amber); }
.verdict-peak { color: var(--amber); }

/* ============ Hero fishing-index gauge (render-style SVG ring) ============
   Thick ring with rounded ends + a subtle glow — the gauge from the approved
   render. Driven by the same --score (0–100) and --score-color that
   renderFishingIndex() already sets on #fishing-index, so the ring AND number
   stay score-coloured (the at-a-glance go/no-go signal). The comfort gauge
   above is the same SVG approach, smaller and without the compass ticks. */
.hero-gauge {
  --score: 0;
  --score-color: var(--muted);
  position: relative;
  width: 168px;
  height: 168px;
  flex: none;
}
.hero-gauge-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);   /* arc starts at 12 o'clock */
}
/* Compass-bearing tick ring (the render's instrument bezel — echoes the
   compass logo). The thick stroke IS the radial tick length; the dash pattern
   draws 60 evenly-spaced ticks (1 unit tick / 5.493 gap → exactly fills 2·π·62).
   Teal used sparingly here, purely decorative. */
.hero-gauge-ticks {
  fill: none;
  stroke: var(--emerald);
  stroke-width: 4;
  stroke-dasharray: 1 5.493;
  opacity: 0.5;
}
/* 4 cardinal majors (N/E/S/W) — longer (wider stroke), bolder (wider dash),
   brighter. Dash = 4 ticks evenly spaced → 2·π·62 / 4 = 97.389 per tick. */
.hero-gauge-ticks-major {
  fill: none;
  stroke: var(--emerald);
  stroke-width: 7;
  stroke-dasharray: 2.5 94.889;
  opacity: 0.95;
}
.hero-gauge-track {
  fill: none;
  stroke: var(--ring-track);
  stroke-width: 10;
}
.hero-gauge-arc {
  fill: none;
  stroke: var(--score-color);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 314.159;                                  /* 2·π·r, r=50 */
  stroke-dashoffset: calc(314.159 * (1 - var(--score) / 100));
  filter: drop-shadow(0 0 4px var(--score-color));
  transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease;
}
.hero-gauge-readout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-gauge .score-number {
  font-weight: 800;
  line-height: 1;
  font-size: 3.2rem;
  color: var(--score-color);
}
.hero-gauge .score-caption {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: 4px;
}
/* Peak (9.5+): stronger glow in the score colour, pulsing. No amber override —
   at a peak the score colour is already green, which is correct. */
@keyframes hero-peak-pulse {
  0%, 100% { filter: drop-shadow(0 0 5px var(--score-color)); }
  50%      { filter: drop-shadow(0 0 12px var(--score-color)); }
}
.hero-gauge.score-peak { filter: none; }
.hero-gauge.score-peak .score-number { color: var(--score-color); }
.hero-gauge.score-peak .hero-gauge-arc { animation: hero-peak-pulse 3s ease-in-out infinite; }

/* ---- Fishing index factors (horizontal) ---- */
.factor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 280px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
/* Each factor is a small instrument tile (the v2 3×2 grid): icon, value,
   label, proportional bar, GOOD/FAIR/POOR verdict — stacked and centred. */
.factor-list li {
  position: relative;            /* anchors the ⓘ cue */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 12px 6px 11px;
  cursor: pointer;              /* tap to reveal the "why" */
  transition: border-color 0.15s ease, background 0.15s ease;
}
.factor-list li:hover { border-color: var(--border); }
/* Tapped tile is highlighted in its own score colour while its "why" shows. */
.factor-list li.f-active {
  border-color: var(--f-color, var(--border));
  background: color-mix(in srgb, var(--f-color, var(--panel-3)) 10%, var(--panel-3));
}
/* Subtle top-right info cue so anglers know a tile is tappable. */
.factor-list .f-info {
  position: absolute;
  top: 5px;
  right: 6px;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--muted);
  opacity: 0.55;
}
.factor-list li:hover .f-info,
.factor-list li.f-active .f-info { opacity: 0.9; color: var(--f-color, var(--muted)); }
/* The reveal line under the grid — one honest sentence about the tapped factor. */
.factor-detail {
  margin: 12px 0 0;
  padding: 11px 13px;
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
}
.factor-detail strong { font-weight: 800; }
/* Icon sits on a score-tinted disc (--f-color is set per-tile in JS). The disc
   is a low-opacity ::before so the colour reads as a contained accent, not
   noise; the glyph itself takes the full score colour. */
.factor-list .f-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--f-color, var(--muted));
}
.factor-list .f-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--f-color, var(--muted));
  opacity: 0.16;
}
.factor-list .f-icon svg { position: relative; width: 22px; height: 22px; }
.factor-list .f-val { font-weight: 800; font-size: 1.35rem; line-height: 1; color: var(--text); }
.factor-list .f-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6rem;
  overflow-wrap: break-word;
}
.factor-bar { width: 100%; height: 4px; background: var(--ring-track); border-radius: 3px; overflow: hidden; }
.factor-bar > span { display: block; height: 100%; border-radius: 3px; }
/* One-word GOOD/FAIR/POOR tag — colour matches the bar (set inline). */
.factor-list .f-tag { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---- Tiny fishing reality capture ---- */
.fish-outcome {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 2px;
  padding: 12px 14px;
  background: rgba(10, 22, 34, 0.72);
  border: 1px solid rgba(159, 179, 196, 0.18);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  max-height: 260px;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.22s ease, max-height 0.32s ease, margin 0.32s ease,
    padding 0.32s ease, border-color 0.22s ease, transform 0.22s ease;
}
.fish-outcome-copy {
  min-width: 0;
}
.fish-outcome-kicker {
  margin: 0 0 2px;
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--emerald);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fish-outcome-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}
.fish-outcome-status {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.fish-outcome-actions {
  display: flex;
  flex: none;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.fish-outcome-actions[hidden] {
  display: none;
}
.fish-outcome-btn {
  min-width: 72px;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(17, 39, 64, 0.92);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.fish-outcome-btn:hover,
.fish-outcome-btn:focus-visible {
  border-color: var(--emerald-dim);
  background: rgba(30, 93, 122, 0.75);
}
.fish-outcome-btn:active {
  transform: translateY(1px);
}
.fish-outcome-btn:disabled {
  cursor: default;
  opacity: 0.58;
  transform: none;
}
.fish-outcome-btn-primary {
  border-color: rgba(39, 195, 165, 0.65);
  background: rgba(39, 195, 165, 0.18);
}
.fish-outcome[data-state="complete"] {
  border-color: rgba(52, 211, 153, 0.38);
}
.fish-outcome.is-collapsing {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  border-color: transparent;
}

.install-nudge {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(17, 39, 64, 0.92);
  border: 1px solid rgba(39, 195, 165, 0.28);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.install-nudge-copy {
  min-width: 0;
}
.install-nudge-title {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 800;
}
.install-nudge-text {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.install-nudge-btn {
  flex: none;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(39, 195, 165, 0.65);
  border-radius: 999px;
  background: rgba(39, 195, 165, 0.18);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}
.install-nudge-btn:hover,
.install-nudge-btn:focus-visible {
  border-color: var(--emerald);
  background: rgba(39, 195, 165, 0.26);
  outline: none;
}

/* Mobile: tighten the 6 factor tiles (smaller disc, less padding) so they take
   less vertical space under the hero. Desktop keeps the roomier tiles. */
@media (max-width: 919px) {
  .factor-list { gap: 9px; }
  .factor-list li { gap: 3px; padding: 9px 5px; }
  .factor-list .f-icon { width: 32px; height: 32px; }
  .factor-list .f-icon svg { width: 18px; height: 18px; }
  .factor-list .f-val { font-size: 1.18rem; }
  .fish-outcome {
    align-items: stretch;
    flex-direction: column;
    padding: 12px;
  }
  .fish-outcome-actions {
    justify-content: stretch;
  }
  .fish-outcome-btn {
    flex: 1 1 0;
    min-width: 0;
  }
  .fish-outcome-actions-wide .fish-outcome-btn {
    flex-basis: calc(50% - 4px);
  }
  .install-nudge {
    display: flex;
  }
}

@media (max-width: 480px) {
  .install-nudge {
    align-items: stretch;
    flex-direction: column;
  }
  .install-nudge-btn {
    width: 100%;
  }
}

/* ============ Conditions strip ============ */
/* Live Conditions: icon tiles on a 12-col grid — marine/wind row of 4
   (span 3) over an atmosphere row of 3 (span 4). */
.conditions-strip {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
}
.stat {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 11px 6px 10px;
  text-align: center;
}
.conditions-strip .stat:nth-child(n+5) { grid-column: span 4; }  /* atmosphere row of 3 */
/* Icon on a tinted disc (matches the factor grid). --stat-color defaults to
   teal; JS overrides it per-tile only where a reading has a real scale (UV). */
.stat-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--stat-color, var(--emerald));
}
.stat-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--stat-color, var(--emerald));
  opacity: 0.16;
}
.stat-icon svg { position: relative; width: 19px; height: 19px; }
.stat-label {
  display: block;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.stat-value {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}
.stat-sub { display: block; font-size: 0.6rem; color: var(--muted); }

/* Factual recap strip under the tiles. */
.conditions-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 13px;
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--emerald);
  border-radius: 10px;
  background: rgba(39, 195, 165, 0.05);
}
.conditions-summary[hidden] { display: none; }
.cs-icon { color: var(--emerald); line-height: 0; flex: 0 0 auto; }
.cs-icon svg { width: 18px; height: 18px; }
.cs-text { font-size: 0.82rem; color: var(--text); }

/* ============ Conditions by location ============ */
.location-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.location-card {
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  padding: 9px 10px 10px;
}
.location-card .loc-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sand);
  margin-bottom: 7px;
}
.loc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
/* Odd final stat (Swell Interval) spans the full row to avoid a lopsided grid. */
.loc-stats .loc-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.loc-stat {
  background: var(--inset);
  border-radius: 5px;
  padding: 5px 6px;
  text-align: center;
}
.loc-stat-label {
  display: block;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--faint);
}
.loc-stat-value { display: block; font-size: 0.92rem; font-weight: 700; margin-top: 1px; }

/* ============ Waves & comfort ============ */
.comfort { display: flex; align-items: center; gap: 13px; }
.kv-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.kv-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px solid var(--border-soft);
  font-size: 0.8rem;
}
.kv-list li:first-child { border-top: 0; }
.kv-list .kv-icon { color: var(--emerald); line-height: 0; flex: 0 0 auto; }
.kv-list .kv-icon svg { width: 15px; height: 15px; }
.kv-list .kv-label { color: var(--muted); }
.kv-list li strong { margin-left: auto; font-weight: 700; }
.comfort-summary {
  margin: 10px 0 0;
  font-size: 0.76rem;
  color: var(--muted);
  background: var(--panel-3);
  border-left: 2px solid var(--emerald-dim);
  border-radius: 4px;
  padding: 6px 9px;
}

/* ============ 7-day fishability ============ */
.fishability { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.fish-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 9px 3px 0;        /* hill graphic sits flush at the bottom */
  text-align: center;
  overflow: hidden;
}
.fish-day-best { border-color: var(--emerald); box-shadow: 0 0 0 1px var(--emerald); padding-top: 17px; }
.fish-badge {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.46rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #07151c;
  background: var(--emerald);
  border-radius: 6px;
  padding: 1px 5px;
  white-space: nowrap;
}
.fish-day .day-name { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; color: var(--text); line-height: 1.1; }
.fish-day .day-date { display: block; font-size: 0.5rem; font-weight: 500; letter-spacing: 0.02em; color: var(--muted); }
.fish-day .day-icon { color: var(--emerald); line-height: 0; margin: 5px 0 3px; }
.fish-day .day-icon svg { width: 17px; height: 17px; }
.fish-day .day-score { font-weight: 800; font-size: 1.1rem; line-height: 1; }
.fish-day .day-verdict { font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700; margin-top: 1px; }
.fish-day .day-hill { width: 100%; height: 16px; margin-top: 5px; line-height: 0; }
.fish-day .day-hill svg { width: 100%; height: 16px; display: block; }

/* 5-tier legend */
.fish-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 10px;
  font-size: 0.6rem;
  color: var(--muted);
}
.fish-legend span { display: flex; align-items: center; gap: 4px; }
.fish-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: 0 0 auto; }

/* Best Window + Weekly Outlook callouts */
.fish-callout {
  margin-top: 10px;
  padding: 11px 13px;
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--emerald);
  border-radius: 10px;
}
.fish-callout:empty { display: none; }
.bw-head { display: flex; align-items: center; gap: 8px; }
.bw-icon { color: var(--gold); line-height: 0; }
.bw-icon svg { width: 18px; height: 18px; }
.bw-title, .ol-title {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--emerald);
}
.bw-day { font-size: 1rem; font-weight: 700; color: var(--text); margin-top: 4px; }
.bw-blurb { margin: 3px 0 9px; font-size: 0.8rem; color: var(--muted); line-height: 1.35; }
.bw-times { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.bw-time { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--muted); }
.bw-time i { color: var(--emerald); line-height: 0; }
.bw-time i svg { width: 13px; height: 13px; }
.fish-outlook { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ol-text p { margin: 3px 0 0; font-size: 0.8rem; color: var(--muted); line-height: 1.35; }
.ol-link { flex: 0 0 auto; font-size: 0.72rem; font-weight: 700; color: var(--emerald); text-decoration: none; white-space: nowrap; }
.ol-link:hover { text-decoration: underline; }

/* ============ Tide table (compact, horizontal) ============ */
/* Answer-first state line above the tide curve. */
.tide-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: 2px 0 6px; }
.tide-now .tn-state { font-size: 0.95rem; font-weight: 800; color: var(--emerald); }
.tide-now .tn-ht { font-size: 0.82rem; color: var(--muted); }
.tide-now:empty { display: none; }
.tide-chart-wrap { position: relative; width: 100%; height: 150px; margin: 2px 0 10px; }
#tide-chart { width: 100% !important; height: 150px !important; }

/* Upcoming highs/lows — compact chips under the curve. */
.tide-table { display: flex; flex-wrap: wrap; gap: 6px; }
.tide-event {
  display: flex;
  align-items: baseline;
  gap: 5px;
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 5px 9px;
}
.tide-event .tide-type {
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tide-event.high .tide-type { color: var(--emerald); }
.tide-event.low  .tide-type { color: var(--muted); }
.tide-event .tide-when { font-size: 0.8rem; font-weight: 700; color: var(--text); }
.tide-event .tide-ht { font-size: 0.62rem; color: var(--muted); }

/* ============ Marine forecast (horizontal) ============ */
.marine-forecast {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.marine-period {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 10px 6px 11px;
  min-width: 0;
  text-align: center;
  overflow-wrap: break-word;
}
.marine-period h3 {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0;
}
.marine-period .mf-icon { color: var(--emerald); line-height: 0; margin: 2px 0; }
.marine-period .mf-icon svg { width: 22px; height: 22px; }
.marine-period .mf-temp { font-size: 1.2rem; font-weight: 800; margin: 0; color: var(--text); }
.marine-period .mf-short { margin: 0; font-size: 0.62rem; color: var(--muted); line-height: 1.3; }
.marine-period .mf-wind { margin-top: 2px; font-size: 0.62rem; color: var(--muted); }

/* Marine-only condition tiles (Waves / Swell / Water) under the forecast cards. */
.marine-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.marine-tiles:empty { display: none; }
.mtile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 9px 6px 10px;
  text-align: center;
}
.mtile .mt-icon { color: var(--emerald); line-height: 0; }
.mtile .mt-icon svg { width: 18px; height: 18px; }
.mtile .mt-value { font-size: 1rem; font-weight: 800; color: var(--text); }
.mtile .mt-label { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.mtile .mt-sub { font-size: 0.58rem; color: var(--muted); }

/* ============ Reports ============ */
.reports-feed { display: flex; flex-direction: column; }
.report-item { padding: 8px 0; border-top: 1px solid var(--border-soft); }
.report-item:first-child { border-top: 0; padding-top: 0; }
.report-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.report-item h3 { font-size: 0.82rem; line-height: 1.3; }
.report-meta { font-size: 0.66rem; color: var(--faint); margin: 2px 0; text-transform: uppercase; letter-spacing: 0.03em; }
.report-item p { margin: 3px 0 0; font-size: 0.76rem; color: var(--muted); }
.badge {
  display: inline-block;
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--inset);
  color: var(--sand);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: middle;
}
.badge.sample { color: var(--coral); }

/* Verified-captain pill — sits inline next to the author name. */
.verified-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #04201c;
  background: var(--emerald);
  border-radius: 4px;
  vertical-align: middle;
}
/* Dashboard-only cue: captain reports get a subtle emerald left edge. */
#dashboard .report-captain {
  border-left: 2px solid var(--emerald);
  padding-left: 9px;
}

/* ============ Tournaments ============ */
.tournament-item { padding: 7px 0; border-top: 1px solid var(--border-soft); }
.tournament-item:first-child { border-top: 0; padding-top: 0; }
.tournament-item h3 { font-size: 0.81rem; }
.tournament-meta { font-size: 0.67rem; color: var(--muted); margin-top: 2px; }
.tournament-meta .tdate { color: var(--emerald); font-weight: 600; }

/* ============ Solunar ============ */
.solunar-phase {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}
.solunar-phase .sol-phase-icon { color: var(--muted); line-height: 0; flex: 0 0 auto; }
.solunar-phase .sol-phase-icon svg { width: 18px; height: 18px; }
/* Cleaner feed-times list: icon · label · right-aligned time, thin dividers.
   Major feeds (peak windows) take the gold accent, minors teal, sun muted. */
.sol-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  border-top: 1px solid var(--border-soft);
  font-size: 0.82rem;
}
.sol-icon { line-height: 0; flex: 0 0 auto; }
.sol-icon svg { width: 15px; height: 15px; }
.sol-icon.sol-major { color: var(--gold); }
.sol-icon.sol-minor { color: var(--emerald); }
.sol-icon.sol-sun   { color: var(--muted); }
.sol-label { color: var(--muted); }
.sol-time { margin-left: auto; font-weight: 700; color: var(--text); }

/* ============ Quick tools ============ */
.tools-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tool-btn {
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 500;
}
.tool-btn:hover { border-color: var(--emerald-dim); color: var(--emerald); }

/* ============ Status bar ============ */
.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 9px 16px;
  background: linear-gradient(180deg, #07151c, #040e14);
  border-top: 1px solid var(--border-soft);
  font-size: 0.72rem;
}
.status-left, .status-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.status-head { color: var(--sand); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; }
.status-right span { color: var(--muted); }
.tight-lines {
  color: var(--gold) !important;
  font-style: italic;
  font-weight: 700;
  font-size: 0.92rem;
}
.status-year { color: var(--faint) !important; }

/* ============ Subpages ============ */
.page-main { flex: 1; padding: 20px 22px; }
.page-main h1 { font-size: 1.5rem; margin-bottom: 6px; }
.page-lead { color: var(--muted); max-width: 64ch; margin-bottom: 18px; }
.page-card {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
  max-width: 72ch;
}
.page-card[id] { scroll-margin-top: 84px; }
.page-card h2 { font-size: 0.95rem; color: var(--emerald); margin-bottom: 6px; }
.page-card p { color: var(--muted); margin: 0 0 10px; }
.page-card a { font-weight: 600; }
.page-form label { display: block; font-size: 0.78rem; color: var(--text); margin-bottom: 12px; }
.page-form input, .page-form textarea {
  width: 100%;
  margin-top: 4px;
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  font: inherit;
}
.page-form input:focus, .page-form textarea:focus {
  outline: none;
  border-color: var(--emerald-dim);
}
.btn {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--emerald);
  color: #04201c;
  border: 0;
  border-radius: 6px;
  padding: 9px 20px;
}
.btn:hover { background: var(--emerald-dim); }

.spot-contact-note {
  display: none;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(39, 195, 165, 0.35);
  border-radius: 8px;
  background: rgba(39, 195, 165, 0.08);
  color: var(--muted);
  font-size: 0.82rem;
}

/* ---- Regulations table ---- */
.regs-disclaimer {
  max-width: 72ch;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(240,121,93,0.12);
  border: 1px solid var(--coral);
  border-radius: var(--radius);
  font-size: 0.82rem;
  line-height: 1.55;
}
.regs-disclaimer strong { color: var(--coral); }
.regs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.regs-table th, .regs-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-soft);
}
.regs-table th {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--emerald);
}
.regs-table tbody tr:last-child td { border-bottom: 0; }
.regs-table td:first-child { font-weight: 600; }
.regs-table tbody tr:hover { background: var(--panel-3); }
.season-open { color: var(--emerald); font-weight: 600; }
.season-closed { color: var(--gold); font-weight: 600; }

/* ---- Charter directory ---- */
.charter-filters,
.report-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.filter-btn {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--inset);
  color: var(--muted);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 6px 14px;
}
.filter-btn:hover { color: var(--text); border-color: var(--border); }
.filter-btn.active {
  background: var(--emerald);
  color: #04201c;
  border-color: var(--emerald);
}
.charter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  max-width: 72ch;
  margin-bottom: 18px;
}
.charter-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.charter-card.is-hidden { display: none; }
.charter-card.is-placeholder { border-style: dashed; border-color: var(--border); }
.charter-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.cap-name { font-size: 1.05rem; color: var(--text); }
.vessel-name { font-size: 0.76rem; color: var(--faint); margin: 1px 0 0; }
.type-badge {
  flex-shrink: 0;
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 2px 6px;
}
.type-inshore   { color: var(--emerald); }
.type-nearshore { color: var(--gold); }
.type-offshore  { color: var(--sea); }
.charter-species { font-size: 0.82rem; color: var(--sand); margin: 0; }
.charter-area,
.charter-extra { font-size: 0.72rem; color: var(--muted); margin: 0; }
.charter-book {
  align-self: flex-start;
  margin-top: 4px;
  padding: 7px 16px;
  font-size: 0.78rem;
  text-decoration: none;
}
.coming-soon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4,14,20,0.55);
  border-radius: var(--radius);
  pointer-events: none;
}
.coming-soon span {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold);
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 12px;
}
.list-charter-cta { margin-top: 4px; }

/* ============ Today's Recommendation (AI advisory) ============ */
.advisory-panel { border-left: 3px solid var(--emerald); }
.advisory-body { margin-top: 4px; max-width: 100%; overflow-wrap: break-word; }
.advisory-best {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0.75rem;
}
.advisory-best.peak { color: var(--gold); }
.advisory-conditions {
  margin: 0 0 0.75rem;
  line-height: 1.6;
  color: var(--text);
}
/* Spec named var(--text-muted); the theme's muted-text token is --muted. */
.advisory-timing {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}
.advisory-body .loading { margin: 0; }
/* Tap-to-generate pill — the advisory is generated on demand, not on load. */
.advisory-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--emerald-dim);
  border-radius: 999px;
  background: var(--inset);
  color: var(--emerald);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.advisory-cta:hover:not(:disabled) {
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--bg);
}
.advisory-cta:disabled { opacity: 0.55; cursor: default; }

/* Solunar Countdown */
/* Theme uses --text / --muted (no --text-primary / --text-muted). */
#solunar-countdown { margin-top: 10px; }
.sc-row { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); font-size: 0.82rem; line-height: 1.2; transition: background 0.3s, border-color 0.3s; }
.sc-active.sc-major { background: rgba(255,196,0,0.07); border-color: rgba(255,196,0,0.28); }
.sc-active.sc-minor { background: rgba(90,190,255,0.06); border-color: rgba(90,190,255,0.22); }
.sc-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); flex-shrink: 0; }
.sc-dot--pulse { background: #4cdb85; animation: sc-pulse 1.8s ease-in-out infinite; }
.sc-active.sc-major .sc-dot--pulse { background: #ffc400; }
@keyframes sc-pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.3; transform:scale(0.65); } }
.sc-badge { flex-shrink:0; font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; padding:2px 6px; border-radius:4px; }
.sc-badge--major { background: rgba(255,196,0,0.14); color: #ffc400; }
.sc-badge--minor { background: rgba(90,190,255,0.13); color: #5abeff; }
.sc-main { flex:1; color: var(--text, #e8eaf0); font-weight:500; white-space:normal; }
.sc-main strong { color:#fff; font-weight:700; }
.sc-sub { flex-shrink:0; color: var(--muted, rgba(232,234,240,0.48)); font-size:0.75rem; white-space:nowrap; }
@media (max-width: 400px) { .sc-row { flex-wrap:wrap; } .sc-sub { width:100%; padding-left:16px; margin-top:2px; } }

/* Hourly Fishing Index Chart */
.hourly-chart-wrap {
  position: relative;
  width: 100%;
  height: 160px;
  margin: 12px 0 6px;
}
#hourly-fishing-chart {
  width: 100% !important;
  height: 160px !important;
}
.hourly-legend {
  display: flex;
  gap: 14px;
  font-size: 0.7rem;
  color: var(--muted, #80999f);
  padding: 4px 0 8px;
  flex-wrap: wrap;
}
.hourly-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.hourly-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}
/* Prime Bite Window — the best window of the day, derived from the same
   hourly index the chart plots (no invented metrics). Answer-first: the
   timing window sits above the chart so it reads without studying the bars. */
.hourly-prime {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 10px 0 2px;
  padding: 9px 13px;
  background: rgba(39, 195, 165, 0.07);
  border: 1px solid rgba(39, 195, 165, 0.28);
  border-left: 3px solid var(--emerald);
  border-radius: 10px;
}
.hourly-prime[hidden] { display: none; }
.hourly-prime .pw-icon { color: var(--emerald); line-height: 0; flex: 0 0 auto; }
.hourly-prime .pw-icon svg { width: 22px; height: 22px; }
.hourly-prime .pw-body { display: flex; flex-direction: column; gap: 1px; }
.hourly-prime .pw-label {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--emerald);
}
.hourly-prime .pw-time { font-size: 1.05rem; font-weight: 800; color: var(--text); }
.hourly-prime .pw-type {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 12px;
  white-space: nowrap;
}
.hourly-prime .pw-major { color: var(--gold); background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.4); }
.hourly-prime .pw-minor { color: var(--emerald); background: rgba(39,195,165,0.12); border: 1px solid rgba(39,195,165,0.4); }

/* Subhead: date on the left, tap hint on the right. */
.hourly-subhead {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: -4px 0 0;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}
/* Event-marker row: Sunrise / Tide Turn / Sunset / Moon Up. */
.hourly-markers {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 10px 2px 2px;
}
.hourly-markers:empty { display: none; }
.hm-item { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.hm-icon { color: var(--emerald); line-height: 0; }
.hm-icon svg { width: 15px; height: 15px; }
.hm-label {
  font-size: 0.54rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}
.hm-time { font-size: 0.72rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.hourly-detail {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text, #e7f1f2);
  min-height: 1.2em;
  padding: 4px 0 2px;
  opacity: 0;
  transition: opacity 0.2s;
  letter-spacing: 0.03em;
}

/* ── Spot Intelligence ────────────────────────────────────────── */
.spot-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.spot-filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.spot-filter-tab {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--muted, #80999f);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.spot-filter-tab:hover {
  border-color: rgba(255,255,255,0.25);
  color: var(--text, #e7f1f2);
}

.spot-filter-tab.active {
  background: rgba(255,196,0,0.12);
  border-color: rgba(255,196,0,0.4);
  color: #ffc400;
}

.spot-filter-tab--type.active {
  background: rgba(90,190,255,0.1);
  border-color: rgba(90,190,255,0.35);
  color: #5abeff;
}

.spots-count {
  font-size: 0.72rem;
  color: var(--muted, #80999f);
  margin: 0 0 12px;
  letter-spacing: 0.04em;
}

/* Spots render as a collapsible list (see .spot-acc) — a vertical stack of
   thin tappable rows, so the section is short and scannable instead of a
   tall run of full cards. */
.spots-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Collapsible spot row */
.spot-acc {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
}
.spot-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: none;
  border: 0;
  color: var(--text, #e7f1f2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.spot-acc-head:hover { background: rgba(255,255,255,0.03); }
.spot-acc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.spot-acc-name {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spot-acc-teaser {
  font-size: 0.66rem;
  color: var(--muted, #80999f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spot-acc-chevron {
  flex: none;
  color: var(--muted, #80999f);
  font-size: 0.8rem;
  transition: transform 0.18s ease;
}
.spot-acc-head.is-open .spot-acc-chevron { transform: rotate(180deg); }
.spot-acc-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px 14px;
}
.spot-acc-body.collapsed { display: none; }

.spot-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(39, 195, 165, 0.1);
  color: var(--emerald);
}
.spot-type-badge .stb-icon { line-height: 0; }
.spot-type-badge .stb-icon svg { width: 13px; height: 13px; }

.spot-location-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #80999f);
}


.spot-description {
  font-size: 0.8rem;
  color: var(--muted, #80999f);
  line-height: 1.5;
  margin: 0;
}

.spot-species {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.spot-species-chip {
  font-size: 0.67rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(76,219,133,0.09);
  color: #4cdb85;
  border: 1px solid rgba(76,219,133,0.2);
}

.spot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.7rem;
  color: var(--muted, #80999f);
}

.spot-meta span {
  background: rgba(255,255,255,0.04);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.07);
}

.spot-gps {
  font-size: 0.72rem;
  padding: 6px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.spot-gps--premium {
  background: rgba(255,196,0,0.06);
  border: 1px solid rgba(255,196,0,0.2);
  color: rgba(255,196,0,0.7);
}

.spot-gps-lock {
  font-size: 0.8rem;
}

.spots-cta {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 0.78rem;
  color: var(--muted, #80999f);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spots-cta-link {
  color: #5abeff;
  text-decoration: none;
  font-weight: 600;
}

.spots-cta-link:hover { text-decoration: underline; }

.spots-premium-note {
  font-size: 0.72rem;
  color: rgba(255,196,0,0.6);
}

.spots-loading,
.spots-empty {
  color: var(--muted, #80999f);
  font-size: 0.82rem;
  padding: 20px 0;
}

/* ============ Responsive ============ */
@media (max-width: 1240px) {
  .dash-cols { grid-template-columns: 1fr; }
  .col-rail { display: grid; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 62px 1fr; }
  .sidebar { padding: 14px 8px; }
  .brand { justify-content: center; }
  .brand-text, .brand-tag { display: none; }
  .side-nav a { justify-content: center; padding: 9px 4px; border-left: 0; }
  .side-nav a.active { border-radius: 6px; }
  .nav-label { display: none; }
  .row.idx2, .row.pair { grid-template-columns: 1fr; }
  .col-rail { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* .conditions-strip keeps its 12-col 4+3 tile layout at all widths. */
  .fishability { grid-template-columns: repeat(4, 1fr); }
  .location-cards { grid-template-columns: 1fr; }
  .charter-grid { grid-template-columns: 1fr; }
  /* Keep the conditions pills pinned while scrolling (portrait + landscape). */
  .topbar { position: sticky; top: 0; z-index: 9; }

  /* Hamburger replaces the always-visible sidebar below 720px. */
  .nav-toggle { display: flex; }
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 214px;
    height: 100vh;
    z-index: 20;
    padding: 16px 12px;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .nav-overlay { display: block; }
  /* Restore the full sidebar menu — undo the 62px icon-rail collapse. */
  .brand { justify-content: flex-start; }
  .brand-text { display: flex; }
  .brand-tag { display: block; }
  .side-nav a {
    justify-content: flex-start;
    padding: 8px 10px;
    border-left: 2px solid transparent;
  }
  .nav-label { display: inline; }

  /* Depth + breathing room — looser panel stacking, roomier pills. */
  .dash, .col-main, .col-rail, .row { gap: 1rem; }
  .topbar-pills { padding-top: 0.5rem; padding-bottom: 0.5rem; }

  /* Let the fishing-index lead shrink so vessel badges wrap instead of
     running off the edge — its default flex:none blocked shrinking. */
  .fishidx-lead { flex: 1 1 100%; min-width: 0; }
  .fishidx-text { flex: 1; min-width: 0; }
}
@media (max-width: 480px) {
  .buoy-stats { grid-template-columns: repeat(2, 1fr); }
  .fishability { grid-template-columns: repeat(3, 1fr); }
  .topbar-pills .pill-key { display: none; }

  /* Marine Outlook stays a horizontal swipe strip on portrait phones (set
     up in the 600px block); just bump the temp size for legibility. */
  .marine-period .mf-temp { font-size: 1.4rem; }
  .marine-period h3 { white-space: normal; overflow-wrap: break-word; }

  /* Vessel suitability badges — smaller, tighter on portrait phones. */
  .vessel-badge { font-size: 0.7rem; padding: 0.25rem 0.5rem; }
}

/* Landscape phones: pin the sidebar so it doesn't scroll away. */
@media (max-height: 500px) and (orientation: landscape) {
  .nav-toggle { display: none; }
  .nav-overlay { display: none; }
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    z-index: 20;
    transform: none;
    padding: 12px 10px;
  }
  .app-main { margin-left: 200px; }
  /* Full menu (icons + labels); drop the tagline to save vertical space. */
  .brand { justify-content: flex-start; }
  .brand-text { display: flex; }
  .brand-tag { display: none; }
  .side-nav a {
    justify-content: flex-start;
    padding: 6px 10px;
    border-left: 2px solid transparent;
  }
  .nav-label { display: inline; }
}

/* ── Offshore Buoy Panel ─────────────────────────────────────── */
.buoy-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.buoy-id {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(90,190,255,0.12);
  color: #5abeff;
}

.buoy-location {
  font-size: 0.75rem;
  color: var(--muted, #80999f);
  flex: 1;
}

.buoy-age {
  font-size: 0.7rem;
  color: var(--muted, #80999f);
  opacity: 0.7;
}

.buoy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.buoy-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.buoy-stat-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted, #80999f);
}

.buoy-stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text, #e7f1f2);
  line-height: 1.1;
}

.buoy-mm {
  opacity: 0.35;
}

.buoy-footer {
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.buoy-source-link {
  font-size: 0.72rem;
  color: #5abeff;
  text-decoration: none;
  font-weight: 600;
}

.buoy-source-link:hover { text-decoration: underline; }

.buoy-loading,
.buoy-error {
  font-size: 0.82rem;
  color: var(--muted, #80999f);
  padding: 16px 0;
}

.buoy-error { color: rgba(255,100,100,0.7); }

.buoy-offline {
  font-size: 0.7rem;
  color: var(--muted, #80999f);
  font-weight: 500;
}

@media (max-width: 700px) {
  .buoy-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 380px) {
  .buoy-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Auth UI ─────────────────────────────────────────────────── */
.auth-nav-area {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: 0 0 auto;   /* never shrink/wrap — the title yields width instead */
}

.auth-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,196,0,0.4);
  background: rgba(255,196,0,0.08);
  color: #ffc400;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.auth-btn:hover {
  background: rgba(255,196,0,0.15);
  border-color: rgba(255,196,0,0.6);
}

/* ===== Share affordances (header icon + footer button, same action) ===== */
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 6px 13px;
  border-radius: 20px;
  border: 1px solid rgba(255, 196, 0, 0.4);
  background: rgba(255, 196, 0, 0.08);
  color: #ffc400;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.share-btn svg { width: 15px; height: 15px; }
.share-btn:hover, .share-btn:focus-visible {
  background: rgba(255, 196, 0, 0.16);
  border-color: rgba(255, 196, 0, 0.6);
  outline: none;
}
.share-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.share-link svg { width: 14px; height: 14px; flex: 0 0 auto; }
.share-link:hover, .share-link:focus-visible {
  color: var(--emerald);
  border-color: var(--emerald);
  background: rgba(39, 195, 165, 0.08);
  outline: none;
}
/* Transient confirmation toast — used by the desktop "copy link" fallback. */
.tpa-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  max-width: 90vw;
  padding: 9px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 10000;
}
.tpa-toast.show { opacity: 1; transform: translate(-50%, 0); }

.auth-captain-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: #ffc400;
  letter-spacing: 0.04em;
}

.auth-user-email {
  font-size: 0.7rem;
  color: var(--muted, #80999f);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Modal */
#auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}

.auth-modal-box {
  position: relative;
  z-index: 1;
  background: #0f1f2e;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 32px 28px;
  width: 100%;
  max-width: 400px;
  margin: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: var(--muted, #80999f);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
}

.auth-modal-logo {
  font-size: 2rem;
  text-align: center;
}

.auth-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text, #e7f1f2);
  text-align: center;
  margin: 0;
}

.auth-modal-sub {
  font-size: 0.8rem;
  color: var(--muted, #80999f);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

.auth-modal-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.auth-email-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--text, #e7f1f2);
  font-size: 0.9rem;
  outline: none;
  box-sizing: border-box;
}

.auth-email-input:focus {
  border-color: rgba(255,196,0,0.4);
}

.auth-submit-btn {
  width: 100%;
  padding: 11px;
  border-radius: 8px;
  border: none;
  background: #ffc400;
  color: #0a1628;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

.auth-submit-btn:hover { opacity: 0.9; }
.auth-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-modal-status { min-height: 1.2em; font-size: 0.8rem; text-align: center; }
.auth-success { color: #4cdb85; }
.auth-error   { color: #ff6b6b; }

.auth-modal-footer {
  font-size: 0.75rem;
  color: var(--muted, #80999f);
  text-align: center;
  margin: 0;
}

.auth-upgrade-link {
  color: #5abeff;
  text-decoration: none;
  font-weight: 600;
}

/* Captain Tier CTA */
.captain-cta-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.captain-cta-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
  margin-top: 4px;
}

.captain-cta-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.captain-cta-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text, #e7f1f2);
  margin: 0;
}

.captain-cta-sub {
  font-size: 0.82rem;
  color: var(--muted, #80999f);
  margin: 0;
  line-height: 1.5;
}

.captain-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.captain-feature-list li {
  font-size: 0.82rem;
  color: var(--text, #e7f1f2);
}

.captain-pricing {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.captain-price-monthly {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffc400;
}

.captain-price-monthly span,
.captain-price-annual span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted, #80999f);
}

.captain-price-divider {
  font-size: 0.8rem;
  color: var(--muted, #80999f);
}

.captain-price-annual {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text, #e7f1f2);
}

.captain-price-save {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(76,219,133,0.12);
  color: #4cdb85;
  border: 1px solid rgba(76,219,133,0.25);
}

.captain-cta-btn {
  align-self: flex-start;
  padding: 11px 24px;
  border-radius: 8px;
  border: none;
  background: #ffc400;
  color: #0a1628;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

.captain-cta-btn:hover { opacity: 0.9; }

.captain-cta-note {
  font-size: 0.7rem;
  color: var(--muted, #80999f);
  margin: 0;
}

@media (max-width: 500px) {
  .captain-cta-box { flex-direction: column; }
  .captain-cta-btn { width: 100%; text-align: center; }
}

/* Captain Tier Checkout Buttons */
.captain-checkout-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.captain-cta-btn--monthly {
  padding: 11px 20px;
  border-radius: 8px;
  border: none;
  background: #ffc400;
  color: #0a1628;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

.captain-cta-btn--annual {
  padding: 11px 20px;
  border-radius: 8px;
  border: 2px solid #ffc400;
  background: transparent;
  color: #ffc400;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.captain-cta-btn--monthly:hover { opacity: 0.9; }
.captain-cta-btn--annual:hover {
  background: rgba(255,196,0,0.08);
}
.captain-cta-btn--monthly:disabled,
.captain-cta-btn--annual:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 500px) {
  .captain-checkout-options { flex-direction: column; }
  .captain-cta-btn--monthly,
  .captain-cta-btn--annual { width: 100%; text-align: center; }
}

/* Spot GPS coordinate display */
.spot-gps--unlocked {
  font-size: 0.72rem;
  padding: 6px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(76,219,133,0.06);
  border: 1px solid rgba(76,219,133,0.2);
}

.spot-gps--free {
  font-size: 0.72rem;
  padding: 6px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
}

.spot-gps-icon {
  font-size: 0.8rem;
}

.spot-gps-link {
  color: #4cdb85;
  text-decoration: none;
  font-weight: 600;
}

.spot-gps--free .spot-gps-link {
  color: #5abeff;
}

.spot-gps-link:hover { text-decoration: underline; }

/* ── SST Blue Water Chart ─────────────────────────────────────── */
.sst-loading,
.sst-error {
  font-size: 0.82rem;
  color: var(--muted, #80999f);
  padding: 16px 0;
}

.sst-error { color: rgba(255,100,100,0.7); }

/* Locked state */
.sst-locked {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sst-locked-preview {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #0a3d5c 0%, #1a6b4a 30%, #2d8a3e 60%, #4aaa5c 100%);
}

.sst-locked-blur {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(8px);
  background: rgba(10, 22, 40, 0.55);
}

.sst-locked-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  text-align: center;
}

.sst-locked-icon { font-size: 2rem; }

.sst-locked-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.sst-locked-sub {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  margin: 0;
  line-height: 1.5;
}

.sst-unlock-btn {
  margin-top: 6px;
  padding: 9px 20px;
  border-radius: 8px;
  border: none;
  background: #ffc400;
  color: #0a1628;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

.sst-unlock-btn:hover { opacity: 0.9; }

/* Temperature scale */
.sst-temp-scale {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  color: var(--muted, #80999f);
}

.sst-scale-bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right,
    #00008b, #0000ff, #0080ff, #00bfff,
    #00ffff, #00ff80, #80ff00, #ffff00,
    #ffa500, #ff4500, #ff0000, #8b0000
  );
}

.sst-scale-range {
  margin-left: 4px;
  white-space: nowrap;
}

/* Chart state */
.sst-chart-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sst-chart-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sst-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(90,190,255,0.12);
  color: #5abeff;
}

.sst-date {
  font-size: 0.75rem;
  color: var(--muted, #80999f);
  flex: 1;
}

.sst-res {
  font-size: 0.68rem;
  color: var(--muted, #80999f);
  opacity: 0.7;
}

.sst-image-wrap {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sst-image {
  width: 100%;
  height: auto;
  display: none;
}

.sst-image-loading {
  font-size: 0.8rem;
  color: var(--muted, #80999f);
  padding: 20px;
}

.sst-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.sst-tip {
  font-size: 0.78rem;
  color: var(--muted, #80999f);
  margin: 0;
  line-height: 1.5;
}

.sst-tip strong { color: var(--text, #e7f1f2); }

.sst-source-link {
  font-size: 0.72rem;
  color: #5abeff;
  text-decoration: none;
  font-weight: 600;
}

.sst-source-link:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .sst-locked-preview { height: 180px; }
}

/* ── Saved Spots ─────────────────────────────────────────────── */
.spot-bookmark-btn {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--muted, #80999f);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 4px;
}

.spot-bookmark-btn:hover {
  border-color: rgba(255,196,0,0.3);
  color: #ffc400;
}

.spot-bookmark-btn.saved {
  background: rgba(255,196,0,0.08);
  border-color: rgba(255,196,0,0.3);
  color: #ffc400;
}

.saved-spots-section {
  margin-bottom: 8px;
}

.saved-spots-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffc400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}

.saved-spots-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 16px 0;
}

/* ── Captain's Bridge ─────────────────────────────────────────── */
.cb-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.cb-post-btn { flex: none; white-space: nowrap; margin-left: auto; }

/* Stats row */
.cb-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
  max-width: 72ch;
}
.cb-stat-card {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-align: center;
}
.cb-stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1.1;
}
.cb-stat-label {
  display: block;
  margin-top: 3px;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
}

/* Tabs */
.cb-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cb-tab {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--inset);
  color: var(--muted);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 7px 14px;
}
.cb-tab:hover { color: var(--text); border-color: var(--border); }
.cb-tab.active {
  background: var(--emerald);
  color: #04201c;
  border-color: var(--emerald);
}
.cb-tab-count {
  display: inline-block;
  margin-left: 5px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 0.7rem;
  background: rgba(0,0,0,0.18);
  /* Clicks fall through to the parent .cb-tab button — the page's
     click handler matches e.target against .cb-tab directly. */
  pointer-events: none;
}

/* Location chips */
.cb-loc-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.cb-loc-chip {
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 5px 13px;
}
.cb-loc-chip:hover { color: var(--text); border-color: rgba(255,255,255,0.25); }
.cb-loc-chip.active {
  background: rgba(255,196,0,0.12);
  border-color: rgba(255,196,0,0.4);
  color: #ffc400;
}

/* Listings grid */
.cb-listings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.cb-loading,
.cb-empty {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.82rem;
  font-style: italic;
  padding: 18px 0;
}

/* Listing card */
.cb-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.cb-card--urgent { border-color: rgba(240,121,93,0.45); }
.cb-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.cb-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.cb-badge {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
  padding: 2px 7px;
}
.cb-badge--seats  { background: rgba(47,227,195,0.14); color: var(--emerald); }
.cb-badge--crew   { background: rgba(90,190,255,0.14); color: var(--sea); }
.cb-badge--type   { background: var(--inset); color: var(--sand); }
.cb-badge--urgent { background: rgba(240,121,93,0.16); color: var(--coral); }

.cb-price {
  flex: none;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gold);
  white-space: nowrap;
}
.cb-price span { font-size: 0.66rem; font-weight: 500; color: var(--muted); }
.cb-price--crew {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sea);
}

.cb-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}
.cb-desc {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
}
.cb-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-tag {
  font-size: 0.68rem;
  color: var(--muted);
  background: var(--inset);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 2px 7px;
}

.cb-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
  padding-top: 9px;
  border-top: 1px solid var(--border-soft);
}
.cb-captain { display: flex; align-items: center; gap: 8px; }
.cb-avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 800;
  color: #04201c;
  background: var(--emerald);
}
.cb-captain-name { font-size: 0.76rem; font-weight: 600; color: var(--text); }
.cb-verified { color: var(--gold); }

.cb-actions { display: flex; align-items: center; gap: 10px; }
.cb-seats {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--emerald);
  white-space: nowrap;
}
.cb-contact-btn {
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--emerald);
  color: #04201c;
  border-radius: 6px;
  padding: 6px 13px;
  white-space: nowrap;
}
.cb-contact-btn:hover { background: var(--emerald-dim); }

/* Status text */
.cb-error   { color: var(--coral); }
.cb-success { color: var(--emerald); }

/* Post modal */
#cb-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 28px 16px;
}
.cb-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}
.cb-modal-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background: #0f1f2e;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 26px 24px;
}
.cb-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
}
.cb-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
}
.cb-modal-status { min-height: 1.2em; font-size: 0.8rem; margin: 4px 0 8px; }

/* Modal form */
.cb-form-group { margin-bottom: 12px; }
.cb-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cb-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 5px;
}
.cb-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
}
.cb-input:focus { outline: none; border-color: var(--emerald-dim); }
.cb-textarea { resize: vertical; min-height: 64px; }

.cb-radio-group { display: flex; gap: 14px; }
.cb-radio {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
}

.cb-species-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cb-species-chip {
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--inset);
  color: var(--muted);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 3px 9px;
}
.cb-species-chip:hover { color: var(--text); }
.cb-species-chip.selected {
  background: rgba(47,227,195,0.14);
  border-color: var(--emerald-dim);
  color: var(--emerald);
}

.cb-submit-btn {
  width: 100%;
  margin-top: 4px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  background: var(--gold);
  color: #2a1f00;
  border: 0;
  border-radius: 8px;
  padding: 11px;
}
.cb-submit-btn:hover { opacity: 0.9; }
.cb-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 600px) {
  .cb-stats { grid-template-columns: 1fr; }
  .cb-form-row { grid-template-columns: 1fr; }
  .cb-listings { grid-template-columns: 1fr; }
}

/* Captain's Bridge — merged page additions */
.cb-tabs-row {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 16px;
}

.cb-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.cb-listings-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cb-post-cta {
  background: var(--bg2, rgba(255,255,255,0.03));
  border: 1px dashed rgba(255,196,0,0.25);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin-top: 16px;
}

.cb-post-cta-icon { font-size: 1.8rem; margin-bottom: 8px; }

.cb-post-cta-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text, #e7f1f2);
  margin-bottom: 4px;
}

.cb-post-cta-sub {
  font-size: 0.75rem;
  color: var(--muted, #80999f);
  margin-bottom: 14px;
  line-height: 1.5;
}

.cb-post-cta-btn {
  padding: 9px 20px;
  border-radius: 8px;
  border: none;
  background: #ffc400;
  color: #0a1628;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

/* ── Horizontal Pill Nav ─────────────────────────────────────── */
/* Hidden on desktop (the sidebar handles navigation there). On mobile this
 * is the primary navigator and replaces the hamburger. Breakpoint matches
 * the rest of the layout (720px — where .nav-toggle currently switches on).
 */
.pill-nav {
  background: var(--bg2, #0f1f2e);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  /* --topbar-h is set at runtime by setTopbarHeight() in main.js so the
   * pill nav pins flush below the (variable-height, wrapping) topbar. */
  top: var(--topbar-h, 52px);
  z-index: 90;
  flex-shrink: 0;
}

/* Right-edge fade: an affordance that the pill row scrolls (otherwise
 * "Captain's Bridge" sits off-screen with no cue). The bar no longer scrolls —
 * .pill-nav-inner does — so the fade pins cleanly to the bar's right edge. */
.pill-nav::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px;
  background: linear-gradient(to right, rgba(15,31,46,0), var(--bg2, #0f1f2e));
  pointer-events: none;
}

.pill-nav-inner::-webkit-scrollbar { display: none; }

.pill-nav-inner {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pill-nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--muted, #80999f);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  flex-shrink: 0;
}

.pill-nav-item:hover {
  border-color: rgba(255,255,255,0.2);
  color: var(--text, #e7f1f2);
}

.pill-nav-item.active {
  background: rgba(255,196,0,0.1);
  border-color: rgba(255,196,0,0.35);
  color: #ffc400;
}

.pill-nav-icon {
  font-size: 0.85rem;
  line-height: 1;
}

/* Hide pill nav on desktop — sidebar handles navigation there. The site's
 * desktop→mobile breakpoint is 720px (where the sidebar collapses), so we
 * mirror that rather than the spec's 900px to avoid a "dead zone" between
 * 720–899px where both the sidebar AND the pill nav would be visible. */
@media (min-width: 721px) {
  .pill-nav { display: none; }
}

/* On mobile, hide the hamburger since the pill nav replaces it as the
 * primary navigator. The site uses class `.nav-toggle` for the hamburger
 * (the IDs/classes in the original spec — .hamburger-btn, #menu-toggle —
 * don't exist on this codebase). */
@media (max-width: 720px) {
  .nav-toggle,
  .hamburger-btn,
  .hamburger,
  #hamburger-btn,
  #menu-toggle {
    display: none !important;
  }
}

/* ── Captain's Bridge Teaser Card ───────────────────────────── */
/* Renders inside a .panel section but zeroes the panel's padding so the
 * gradient .cbt-inner can fill it edge-to-edge. .dash is a flex-column
 * container with --gap between children, so spacing above/below is handled
 * for us; we only need to clear the panel's own padding. */
.captain-bridge-teaser {
  margin: 0;
  padding: 0;
}

.cbt-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg,
    rgba(255,196,0,0.06) 0%,
    rgba(255,196,0,0.02) 100%);
  border: 1px solid rgba(255,196,0,0.2);
  border-radius: 10px;
}

.cbt-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cbt-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.cbt-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text, #e7f1f2);
  margin-bottom: 2px;
}

.cbt-sub {
  font-size: 0.72rem;
  color: var(--muted, #80999f);
}

.cbt-btn {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 6px;
  border: 1px solid rgba(255,196,0,0.35);
  background: rgba(255,196,0,0.08);
  color: #ffc400;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s;
}

.cbt-btn:hover {
  background: rgba(255,196,0,0.15);
  border-color: rgba(255,196,0,0.5);
}

@media (max-width: 500px) {
  .cbt-inner { flex-direction: column; align-items: flex-start; }
  .cbt-btn { width: 100%; text-align: center; }
}
/* ============ Mobile: un-stick the header + pill-nav ============ */
/* The bottom quick-jump tab bar is the persistent nav on mobile, so the top
   header and pill-nav scroll away with the page instead of pinning. This must
   come last in the cascade — earlier rules (.topbar @720, .pill-nav base) set
   position:sticky, which left a see-through sticky header overlapping the card
   a tab jump lands on. Kept position:relative + z-index so they still sit above
   the full-bleed hero photo. */
@media (max-width: 919px) {
  .topbar   { position: relative; top: auto; z-index: 1; }
  .pill-nav { position: relative; top: auto; z-index: 1; }
}

/* Dashboard mobile: drop the pill-nav. Page nav is covered by the hamburger
   (☰ → sidebar) and the Reports / Captain's Bridge cards; the bottom bar covers
   section jumps. Removing it declutters the full-bleed hero. Other pages keep
   the pill (they have no bottom bar). */
@media (max-width: 720px) {
  body[data-page="dashboard"] .pill-nav { display: none; }
}

/* ============ Dashboard mobile nav cleanup ============ */
@media (max-width: 720px) {
  /* Show the hamburger on the mobile dashboard — the pill that used to replace
     it is gone here, so the ☰ → sidebar is now the page-nav surface. (Overrides
     the blanket hamburger-hide above.) */
  body[data-page="dashboard"] .nav-toggle { display: flex !important; }
  /* Captain Login unlocks nothing while the paywall is off, so keep it off the
     consumer hero on mobile. It remains on Captain's Bridge + desktop where it's
     relevant; pages (incl. the Bridge) are reachable via the hamburger. */
  body[data-page="dashboard"] #auth-btn,
  body[data-page="dashboard"] #auth-indicator { display: none !important; }
}

/* ============ Captain Login: hidden everywhere (was mobile-only) ============ */
/* Captain Tier is shelved (paywall off → the login serves ~no one), so the
   header button is hidden at ALL widths now, not just mobile. Fully reversible:
   delete this block to restore it. Login itself still works — it's reachable at
   /#captain-login (auth.js hash failsafe) so Nick can still sign in. */
#auth-btn, #auth-indicator { display: none; }

/* ============ Desktop sidebar collapse (icon rail) ============ */
/* Lets you shrink the sidebar to a slim icons-only rail on wide screens. Reuses
   the exact 62px rail the layout already snaps to at 721–860px, but as a
   user toggle. Scoped to ≥861px so it never fights the tablet auto-rail or the
   ≤720px hamburger slide-in. State persists in localStorage (tpa_nav_rail);
   the toggle button is injected by wireSidebarCollapse() in main.js. */
.sidebar-collapse {
  display: none;            /* desktop-only — revealed in the media query below */
  align-items: center;
  gap: 10px;
  margin-top: auto;         /* pin to the bottom of the flex-column sidebar */
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.sidebar-collapse:hover { background: var(--panel-3); color: var(--text); }
.sidebar-collapse svg { width: 16px; height: 16px; flex: none; transition: transform 0.15s ease; }

@media (min-width: 861px) {
  .sidebar-collapse { display: flex; }
  .app.nav-rail { grid-template-columns: 62px 1fr; }
  .app.nav-rail .sidebar { padding: 14px 8px; }
  .app.nav-rail .brand { justify-content: center; }
  .app.nav-rail .brand-text,
  .app.nav-rail .brand-tag,
  .app.nav-rail .nav-label,
  .app.nav-rail .nav-group-label,
  .app.nav-rail .collapse-label { display: none; }
  .app.nav-rail .side-nav a { justify-content: center; padding: 9px 4px; border-left: 0; }
  .app.nav-rail .side-nav a.active { border-radius: 6px; }
  .app.nav-rail .sidebar-collapse { justify-content: center; padding: 9px 4px; }
  .app.nav-rail .sidebar-collapse svg { transform: rotate(180deg); }  /* chevron now points right = expand */
}

/* ============ Tides page (full-week high/low tables) ============ */
.tides-station { color: var(--faint); font-size: 0.82rem; }
.tides-week {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.tide-day {
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 12px 14px;
}
.tide-day-today { border-color: var(--emerald-dim); }
.tide-day-head {
  font-size: 0.82rem;
  color: var(--text);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}
.tide-day-today .tide-day-head { color: var(--emerald); }
.tide-day-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tide-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: baseline; gap: 8px; font-size: 0.86rem; }
.tide-type { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.tide-high .tide-type { color: var(--emerald); }
.tide-low  .tide-type { color: var(--muted); }
.tide-time { color: var(--text); }
.tide-height { color: var(--muted); font-variant-numeric: tabular-nums; }
.tides-loading { color: var(--muted); }
.tides-error { color: var(--coral); }

/* ============ Install help (iOS "Add to Home Screen" steps) ============ */
/* Shown when the "Add this app to your phone" button is tapped on iOS, where
   there's no programmatic install — we walk the user through Share → Add. */
.install-help {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 10, 16, 0.66);
}
.install-help-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 20px 18px;
  color: var(--text);
}
.install-help-card h3 {
  margin: 0 0 12px;
  font-size: 1.02rem;
  color: var(--emerald);
}
.install-help-card ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted);
}
.install-help-card ol strong { color: var(--text); }
.install-help-note {
  margin: 14px 0 0;
  font-size: 0.78rem;
  color: var(--faint);
}
.install-help-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.install-help-close:hover { color: var(--text); }