/* ============================================================================
   Coastal Bold — theme layer for 悉尼钓鱼 · Sydney Fishing
   ----------------------------------------------------------------------------
   Rides ON TOP of the existing styles.css. It only overrides tokens + the
   highest-impact component surfaces — it does NOT change any markup or class
   names, so it is drop-in safe with the vanilla/no-build frontend.

   接入 · How to install (3 steps, no build):
   1) In <head> of index.html, after the styles.css <link>, add:
        <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Archivo+Expanded:wght@600;700;800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="coastal-bold-theme.css" />
      (this file MUST load last so its rules win the cascade)
      NOTE: fonts.googleapis.com/fonts.gstatic.com must be added to the CSP
      style-src / font-src, OR self-host the Archivo woff2 under /fonts and
      @font-face them here to stay CSP-clean (recommended for prod).
   2) Add "coastal-bold-theme.css" to SHELL_FILES in service-worker.js
      and bump CACHE_VERSION.
   3) git add coastal-bold-theme.css  (don't forget the new file!)
============================================================================ */

/* ---------- 1. Token remap — the whole palette shifts to Coastal Bold ---------- */
:root {
  --ink:      #0a2a3a;   /* deep navy ink */
  --ink-2:    #2a4d5c;
  --muted:    #5a7078;
  --line:     #e2ebee;
  --line-2:   #d3e0e5;
  --bg:       #eef6f8;   /* bright coastal wash */
  --card:     #ffffff;

  --ocean-1:  #06202a;
  --ocean-2:  #0a2a3a;   /* header / chrome navy */
  --ocean-3:  #0b7580;
  --ocean-4:  #06b6c4;

  --aqua:     #06b6c4;   /* the single confident interactive accent */
  --aqua-2:   #037884;   /* was #048996 (4.18:1 — short of AA). Now 5.2:1 on white. */
  --aqua-ink: #032027;
  --teal:     #06b6c4;

  --gold:      #ffb020;  /* reserved: best / biting-now */
  --gold-dark: #d98a00;
  --coral:     #ef476f;
  --green:     #0fa97e;

  --shadow-sm: 0 2px 6px rgba(10,42,58,.07);
  --shadow-md: 0 8px 22px rgba(10,42,58,.10), 0 2px 6px rgba(10,42,58,.05);
  --shadow-lg: 0 22px 52px rgba(10,42,58,.18), 0 6px 16px rgba(10,42,58,.08);

  --radius:    18px;
  --radius-sm: 13px;
  --radius-xs: 9px;
}

/* Display font — scores, stats, headings.
   "Archivo Expanded" was never a real family (see the comment on the Google Fonts <link>
   in index.html): the width comes from Archivo's wdth axis, applied via font-stretch.
   The CJK chain must match the body stack — --font-display is used on .brand h1,
   .panel-header h2, .spot-name, .board-name and ~15 more, ALL of which render Chinese.
   Naming no CJK face here meant headings resolved to a different Chinese font than the
   body text directly beneath them (most visibly on Windows).
   「Archivo Expanded」并非真实字族，宽度来自 wdth 轴，用 font-stretch 启用。
   中文字体链必须与正文一致：--font-display 用在品牌标题、面板标题、钓点名等 15+ 处，
   全都要渲染中文；此前未指定中文字体，导致标题与正文用了不同的中文字体（Windows 尤其明显）。 */
:root {
  --font-cjk: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
              "Noto Sans SC", "Source Han Sans SC";
  --font-display: "Archivo", -apple-system, var(--font-cjk), sans-serif;
}

/* Opt the display consumers into the expanded width axis. 启用宽体轴。 */
.brand h1, .panel-header h2, .spot-name, .board-name, .forum-title,
.ins-section h3, .auth-title, .rig-name, .fc-day-name, .rank-badge,
.score-box b, .detail-score-number, .fc-score, .weather-pill-label,
.mine-stats b, .forum-fab, .spot-cond-grid > div b, .fc-grid > div b {
  font-stretch: 125%;
}

body {
  font-family: "Archivo", -apple-system, var(--font-cjk), "Segoe UI", sans-serif;
  background: var(--bg);
}

/* ---------- 2. Top bar ---------- */
.topbar {
  background:
    radial-gradient(150% 160% at 32% -60%, rgba(6,182,196,.32), transparent 55%),
    #0a2a3a;
  border-bottom: 0;
  box-shadow: 0 6px 22px rgba(6,21,31,.22);
}
.logo { border-radius: 14px; background: linear-gradient(150deg,#06e0d0,#0b7580); }
.brand h1 { font-family: var(--font-display); font-weight: 800; }
.brand-en { color: #06e0d0; }
.icon-btn { border-radius: 12px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.10); }
.icon-btn:hover { background: rgba(6,182,196,.18); border-color: rgba(6,182,196,.45); }
.icon-btn .ic { color: #06e0d0; }
.locate-btn {
  background: #06e0d0; color: var(--aqua-ink);
  box-shadow: 0 4px 14px rgba(6,224,208,.45);
}
@media (hover:hover) and (pointer:fine) {
  .locate-btn:hover { filter: brightness(1.04); box-shadow: 0 7px 20px rgba(6,224,208,.55); }
}

/* ---------- 3. Panel header + mode selector ---------- */
.panel-header h2 { font-family: var(--font-display); font-weight: 800; color: var(--ink); }
.panel-header h2::before { background: linear-gradient(180deg, var(--gold), var(--gold-dark)); }
.mode-selector { background: #eef4f6; border-color: var(--line); border-radius: 13px; }
.mode-btn { font-weight: 700; border-radius: 10px; }
.mode-btn.active {
  background: var(--aqua); color: var(--aqua-ink);
  box-shadow: 0 3px 10px rgba(6,182,196,.35);
}
.mode-btn.active .ic { color: var(--aqua-ink); }

/* ---------- 4. Spot cards — the heart of the redesign ---------- */
.spot-card {
  border-radius: var(--radius);
  box-shadow: 0 5px 14px rgba(10,42,58,.06);
  border-color: transparent;
}
@media (hover:hover) and (pointer:fine) {
  .spot-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(10,42,58,.13);
    border-color: transparent;
  }
  .spot-card:hover::before { background: var(--aqua); }
}
/* #1 pick — gold-ringed hero card */
.spot-card.best {
  background: #fff;
  border: 1.5px solid #ffe3ac;
  box-shadow: 0 12px 30px rgba(255,176,32,.16);
}
.spot-card.best::before { background: linear-gradient(180deg,#ffc24a,#f0950e); }

/* Rank badge → rounded chip */
.rank-badge {
  border-radius: 13px;
  background: var(--ocean-2); color: #06e0d0;
  font-family: var(--font-display); font-weight: 800;
  box-shadow: none;
}
.spot-card.best .rank-badge {
  background: linear-gradient(155deg,#ffc24a,#ef9008);
  color: #3a2600;
  box-shadow: 0 4px 12px rgba(240,149,14,.42);
}

.spot-name { font-family: var(--font-display); font-weight: 700; }

/* Score numerals → solid navy Archivo Expanded (no gradient-clip, crisper) */
.score-box b {
  font-family: var(--font-display); font-weight: 800;
  -webkit-background-clip: initial; background-clip: initial;
  background: none !important; color: var(--ink);
}
.spot-card.best .score-box b { color: var(--gold-dark); }
.score-box small { color: var(--muted); }

/* Type badges */
.type-rock    { background: #e3edf6; color: #1d4e76; }
.type-harbour { background: #e6f7f9; color: #0b7580; }
.type-estuary { background: #dbf3ea; color: #0a6a4c; }
.type-beach   { background: #fff2d6; color: #9a5a00; }
.type-badge   { font-weight: 700; }

/* In-season species chip */
.spot-species .sp-chip { background: #eef4f6; color: #0b7580; border-radius: 99px; padding: 2px 9px; }
.spot-species .sp-chip.in-season { background: #fff2d6; color: #9a5a00; box-shadow: inset 0 0 0 1px #f6cd8e; }
.spot-species .sp-chip.in-season::before { background: var(--gold); box-shadow: 0 0 0 2px rgba(255,176,32,.25); }

/* Favorite star */
.fav-star.on, .fav-star:hover { color: var(--gold); }

/* ---------- 5. Search + filter + status ---------- */
.spot-search { border-radius: 12px; }
.spot-search:focus { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(6,182,196,.15); }
.filter-chip { border-radius: 99px; }
.filter-chip.active { background: var(--aqua); border-color: var(--aqua); color: var(--aqua-ink); }
.status {
  background: #e6f7f9; border-color: #c5ecf0; color: #0b6675;
  border-radius: var(--radius-sm);
}

/* ---------- 6. Weather pill / box ---------- */
.weather-pill {
  border-radius: 99px;
  box-shadow: 0 10px 26px rgba(10,42,58,.18);
  border-color: rgba(255,255,255,.7);
}
.weather-pill-icon, .weather-pill-label { color: var(--ocean-2); }
.weather-pill-label { font-family: var(--font-display); font-weight: 800; }
.weather-box { border-radius: var(--radius); }
.weather-box h3::before { background: var(--aqua); }

/* Map markers use Leaflet default; the crosshair ring goes gold */
.crosshair-ring { background: var(--gold); box-shadow: 0 0 0 4px rgba(255,176,32,.25); }

/* ---------- 7. Spot detail card ---------- */
.detail-hero {
  background:
    radial-gradient(140% 140% at 80% 0%, rgba(6,182,196,.35), transparent 55%),
    linear-gradient(180deg,#0e3346,#0a2a3a);
}
.detail-score-number {
  font-family: var(--font-display); font-weight: 800;
  background: var(--aqua); color: var(--aqua-ink);
  border-radius: 20px; box-shadow: 0 8px 20px rgba(6,182,196,.45);
}
.score-bar > div { background: linear-gradient(90deg,#06e0d0,#ffb020); }
.detail-chips .chip.in-season { background: var(--gold); color: #3a2600; font-weight: 800; }
.detail-body h4 { color: var(--ocean-3); }

/* Live-conditions tiles */
.spot-cond-grid > div {
  background: #fff; border: 0;
  box-shadow: 0 4px 12px rgba(10,42,58,.05);
  border-radius: 14px;
}
.spot-cond-grid > div b { font-family: var(--font-display); font-weight: 800; color: var(--ink); }
.spot-cond-grid > div span { color: var(--muted); }

/* Multi-day forecast scores */
.fc-score { font-family: var(--font-display); font-weight: 800; border-radius: 9px; }
.fc-score.q-good  { background: #0fa97e; }
.fc-score.q-ok    { background: #e89b1c; }
.fc-score.q-rough { background: #ef476f; }

/* Rig tabs / cards */
.rig-tab.active {
  background: var(--aqua); border-color: var(--aqua); color: var(--aqua-ink);
  box-shadow: 0 3px 10px rgba(6,182,196,.3);
}
.rig-name { color: var(--ocean-3); font-family: var(--font-display); font-weight: 800; }
.rig-grid b, .rig-technique b { color: var(--aqua-2); }

/* ---------- 8. Forum / community ---------- */
.forum-bar { background: var(--ocean-2); }
.forum-title { font-family: var(--font-display); font-weight: 800; }
.board-card, .thread-row {
  border-radius: 16px;
  box-shadow: 0 5px 14px rgba(10,42,58,.06);
  border-color: transparent;
}
.board-name { font-family: var(--font-display); font-weight: 700; }
.board-count { background: #e6f7f9; color: var(--aqua-2); border-radius: 99px; font-weight: 700; }
.forum-fab {
  background: var(--aqua); color: var(--aqua-ink);
  font-family: var(--font-display); font-weight: 800;
  box-shadow: 0 10px 26px rgba(6,182,196,.5);
}
.btn-primary { background: var(--aqua); color: var(--aqua-ink); font-weight: 700; }
.act-like.liked { color: var(--aqua-2); }

/* ---------- 9. Insights / 鱼讯 ---------- */
.ins-section h3 { font-family: var(--font-display); font-weight: 800; color: var(--ink); }
.ins-bar-fill { background: linear-gradient(90deg,#06b6c4,#06e0d0); border-radius: 99px; }
.ins-bar-n { font-family: var(--font-display); font-weight: 800; }
.ins-catch { border-radius: 18px; box-shadow: 0 5px 14px rgba(10,42,58,.06); }
.ins-catch-size { background: #e6f7f9; color: #0b7580; border-radius: 99px; font-weight: 700; }

/* ---------- 10. My Catches ---------- */
.mine-stats > div {
  background: #fff; border: 0;
  box-shadow: 0 5px 14px rgba(10,42,58,.06);
  border-radius: 14px;
}
.mine-stats b { font-family: var(--font-display); font-weight: 800; color: var(--ocean-3); }
.mine-catch-spot { color: var(--ocean-3); font-weight: 700; }

/* ---------- 11. Modals + buttons shared ---------- */
.auth-title { font-family: var(--font-display); font-weight: 800; }
.auth-submit, .review-submit, .catch-submit {
  background: var(--aqua); color: var(--aqua-ink); font-weight: 800;
  box-shadow: 0 4px 14px rgba(6,182,196,.35);
}
.formula { background: #e6f7f9; border-color: #b8e4ea; color: var(--ocean-3); }

/* ---------- 12. Mobile bottom sheet handle badge ---------- */
.sheet-peek .peek-badge { background: var(--gold); box-shadow: 0 2px 6px rgba(255,176,32,.35); }


/* ============================================================================
   v2 — 重点升级:海况格子 + 预报条(纯 CSS,DOM 已存在,无需改 JS)
============================================================================ */

/* ---------- Live-conditions tiles → bold stacked cards ---------- */
.spot-cond-grid {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.spot-cond-grid > div {
  display: flex;
  flex-direction: column;      /* label ABOVE value, like the mockup */
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  padding: 11px 13px;
  min-height: 62px;
  background: #fff;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(10,42,58,.06);
}
.spot-cond-grid > div span {
  order: 0;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.5625rem;
  letter-spacing: .9px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.spot-cond-grid > div b {
  order: 1;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.2px;
}
.spot-cond-grid .ic { width: 12px; height: 12px; color: var(--aqua-2); }
/* the full-width tide row stays horizontal but keeps the new skin */
.spot-cond-grid > div.wide {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 12px 14px;
  background: linear-gradient(135deg,#e9f8fa,#ddf2f6);
  box-shadow: inset 0 0 0 1px #c3e8ee;
}
.spot-cond-grid > div.wide b { font-size: 0.875rem; color: var(--ocean-3); }
.spot-cond-grid > div.wide span { color: var(--ocean-3); }
.spot-cond-grid > div.wide .ic { color: var(--ocean-3); }

/* ---------- Forecast section ---------- */
.spot-forecast-toggle {
  border-radius: 14px;
  border-color: var(--line);
  background: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(10,42,58,.05);
}
.spot-forecast-toggle:hover { border-color: var(--aqua); }
.spot-forecast-toggle .sf-title .ic,
.spot-forecast-toggle .sf-chev { color: var(--aqua-2); }

/* Day rows → chunky cards with a big colour-coded score chip */
.fc-day-head {
  gap: 11px;
  padding: 11px 13px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(10,42,58,.05);
  margin-bottom: 7px;
}
.fc-day-head:hover  { background: #f6fbfc; }
.fc-day-head.open   { background: #f2f9fb; }

.fc-score {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.3px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(10,42,58,.14);
}
.fc-score.q-good  { background: linear-gradient(150deg,#089268,#0a8f68); }  /* was #12c08f: white text on it measured 2.34:1 */
.fc-score.q-ok    { background: linear-gradient(150deg,#ffc24a,#e08c0b); color: #3a2600; }
.fc-score.q-rough { background: linear-gradient(150deg,#d8455f,#d63a5f); }  /* was #ff6b8b: white text on it measured 2.72:1 */

.fc-day-name  { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.fc-day-name i { color: var(--muted); font-weight: 500; }
.fc-day-emoji { font-size: 1.1875rem; }
.fc-day-temp  { font-family: var(--font-display); font-weight: 800; color: var(--ink); }
.fc-day-temp i { color: var(--muted); font-weight: 500; }
.fc-day-wave  { font-family: var(--font-display); font-weight: 700; color: var(--ocean-3); }
.fc-day-wave .ic { color: var(--aqua-2); }
.fc-chev { color: var(--muted); }

/* Expanded day detail — same tile language as the conditions grid */
.fc-day-detail { padding: 4px 2px 12px; }
.fc-grid { gap: 8px; }
.fc-grid > div {
  background: #fff;
  border: 0;
  border-radius: 12px;
  padding: 9px 11px;
  box-shadow: 0 3px 9px rgba(10,42,58,.05);
}
.fc-grid > div span {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.53125rem; letter-spacing: .8px; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}
.fc-grid > div b { font-family: var(--font-display); font-weight: 800; color: var(--ink); }
.fc-grid .ic { color: var(--aqua-2); }
.fc-tide-up { color: var(--ocean-3); font-weight: 700; }
.fc-tide-dn { color: var(--muted); font-weight: 700; }

/* ---------- Prime windows block ---------- */
.spot-prime, .prime-block {
  background: linear-gradient(135deg,#fff8e6,#fff2d6);
  border: 1px solid #f6cd8e;
  border-radius: 14px;
}


/* ============================================================================
   v3 — 钓点配图(配合 spot-photos.js)
============================================================================ */

/* 列表卡缩略图 */
.spot-thumb {
  width: 60px; height: 60px;
  border-radius: 16px;
  flex-shrink: 0;
  background-color: #0b3a49;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  position: relative;
}
/* 排名角标压在缩略图上 */
.spot-thumb .rank-badge {
  position: absolute; top: 4px; left: 4px;
  width: 22px; height: 22px;
  min-width: 0; margin: 0;
  border-radius: 8px;
  font-size: 0.6875rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.spot-card.best .spot-thumb { box-shadow: inset 0 0 0 1.5px rgba(255,193,74,.6); }

@media (max-width: 640px) {
  .spot-thumb { width: 52px; height: 52px; border-radius: 14px; }
  .spot-thumb .rank-badge { width: 20px; height: 20px; font-size: 0.625rem; }
}

/* 详情页 hero 配图 —— 图片在下,原有深色渐变盖在上面保证文字可读 */
.detail-hero {
  background-size: cover;
  background-position: center;
  position: relative;
}
.detail-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,26,36,.42) 0%, rgba(8,32,44,.66) 45%, rgba(6,22,31,.92) 100%);
  pointer-events: none;
  z-index: 0;
}
.detail-hero > * { position: relative; z-index: 1; }