:root {
  --navy: #0b2a4a;
  --teal: #14707e;
  --ink: #1c2b36;
  --muted: #5f7382;
  --line: #d8e2ea;
  --bg: #eef3f7;
  --good: #33a748;
  --warn: #dab12c;
  --bad: #cb4f3d;
  --accent: #0b2a4a;
  --sub: #33506b;
  --card: #e2ecf5;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
main { padding: calc(10px + env(safe-area-inset-top)) 12px calc(86px + env(safe-area-inset-bottom)); max-width: 760px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; }
.search-box { position: relative; margin-bottom: 8px; z-index: 1001; }
.search-box input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 16px; font-size: .95rem; background: #fff; color: #0b2a4a;
}
.search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(10,40,70,.18); overflow: hidden;
}
.search-item {
  display: block; width: 100%; text-align: left; padding: 10px 14px; border: 0;
  border-bottom: 1px solid #eef3f7; background: #fff; font-size: .92rem; color: #0b2a4a; cursor: pointer;
}
.search-item:last-child { border-bottom: 0; }
.search-item small { display: block; color: #5f7382; font-size: .8rem; margin-top: 1px; }
.search-none { padding: 10px 14px; color: #5f7382; font-size: .88rem; }
.wx-card { margin-top: 12px; }
.wx-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; }
.wx-ico { font-size: 2.2rem; line-height: 1; }
.wx-temp { font-size: 2rem; font-weight: 600; color: #0b2a4a; }
.wx-cond { font-size: 1rem; font-weight: 600; color: #33506b; }
.wx-cond small { display: block; font-weight: 400; color: #5f7382; margin-top: 2px; }
.wx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 6px; }
.wx-cell { text-align: center; }
.wx-cell b { display: block; font-size: 1rem; color: #0b2a4a; }
.wx-cell span { font-size: .8rem; color: #5f7382; }
.windx-flex { display: flex; gap: 14px; align-items: center; }
.windx-grid { flex: 1; grid-template-columns: repeat(2, 1fr); }
.astro-grid { grid-template-columns: repeat(2, 1fr); margin-top: 8px; min-width: 168px; }
.compass-svg { width: 92px; height: 92px; flex: none; }
.moon-svg { width: 60px; height: 60px; flex: none; }
.sea-big { font-size: 1.7rem; font-weight: 600; color: #0b2a4a; margin: 4px 0 8px; }
.sea-big small { font-size: .85rem; font-weight: 400; color: #5f7382; margin-left: 8px; }
.sea-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-top: 1px solid #eef3f7; }
.sea-row span { width: 74px; flex: none; color: #5f7382; font-size: .85rem; }
.sea-row b { color: #0b2a4a; }
.sea-row em { font-style: normal; color: #5f7382; font-size: .85rem; margin-left: auto; }
#picker-block { margin-top: 0; }
.hero-card { position: relative; border-radius: 9px; overflow: hidden; margin-bottom: 10px; color: #fff; min-height: 136px; display: flex; cursor: pointer; box-shadow: 0 4px 14px rgba(6,32,51,.28); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6,32,51,.76) 25%, rgba(6,32,51,.30) 68%, rgba(6,32,51,.18)); }
.hero-body { position: relative; padding: 12px; flex: 1; min-width: 0; }
.hero-label { font-size: .8rem; letter-spacing: .09em; opacity: .88; }
.hero-name { font-size: 1.58rem; font-weight: 700; margin: 2px 0 6px; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.hero-pill { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: .88rem; font-weight: 600; color: #fff; }
.hero-meta.lg { font-size: .95rem; margin-top: 6px; }
.hero-hint { margin-top: 9px; font-size: .78rem; opacity: .78; }
.hero-full { margin-top: 9px; border-top: 1px solid rgba(255,255,255,.28); padding-top: 7px; }
.hero-more { display: inline-block; margin-top: 10px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.45); padding: 6px 14px; border-radius: 999px; font-size: .88rem; font-weight: 600; cursor: pointer; }
.hero-pill.good { background: var(--good); }
.hero-pill.marginal { background: var(--warn); color: #5b4a00; }
.hero-pill.poor { background: var(--bad); }
.hero-meta { margin-top: 5px; font-size: .85rem; opacity: .96; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.ring-svg { width: 60px; height: 60px; flex: none; }
.hero-card .ring-svg { position: relative; margin: 14px 14px 0 0; }
.sol-ring .ring-svg circle:first-child { fill: rgba(11,42,74,.12); stroke: rgba(11,42,74,.15); }
.sol-ring .ring-svg text { fill: #0b2a4a; }
/* ---- Dark theme (deep-sea) ---- */
html[data-theme="dark"] { --navy: #dceefb; --ink: #dde6ea; --muted: #93a5b1; --line: #314a59; --bg: #1a2f3d; }
html[data-theme="dark"] .card, html[data-theme="dark"] .wall-card, html[data-theme="dark"] .catch-card, html[data-theme="dark"] .shop-item { background: #1a2b36; border-color: #314a59; color: #d7e5ef; }
html[data-theme="dark"] .tabbar { background: #1e303c; border-top-color: #314a59; }
html[data-theme="dark"] .tabbar button { color: #8fa9bc; }
html[data-theme="dark"] .tabbar button.active { color: #7cc4ff; }
html[data-theme="dark"] .btn-small { background: #1a2b36; }
html[data-theme="dark"] .btn-small.active { background: var(--teal); color: #fff; }
html[data-theme="dark"] .btn-ghost-wide { background: #1a2b36; }
html[data-theme="dark"] .chip { background: #1a2b36; color: #d7e5ef; }
html[data-theme="dark"] input, html[data-theme="dark"] select { background: #16262f; color: #e6f0f7; border-color: #314a59; }
html[data-theme="dark"] .search-results { background: #1a2b36; border-color: #314a59; }
html[data-theme="dark"] .search-item { color: #d7e5ef; border-bottom-color: #314a59; }
html[data-theme="dark"] .verdict.good { background: #14301d; border-color: #2f6b41; color: #d9f2df; }
html[data-theme="dark"] .verdict.marginal { background: #38300f; border-color: #7a6420; color: #f7ead0; }
html[data-theme="dark"] .verdict.poor { background: #3a1a18; border-color: #7c3a35; color: #f6d9d5; }
html[data-theme="dark"] .verdict.far { background: #16283a; border-color: #314a59; color: #cfe3f2; }
html[data-theme="dark"] .verdict small { color: #b9cdd9; }
html[data-theme="dark"] .wx-temp, html[data-theme="dark"] .wx-cell b, html[data-theme="dark"] .sea-big { color: #eaf4fb; }
html[data-theme="dark"] .wx-cond { color: #cfe3f2; }
html[data-theme="dark"] .wx-cell span, html[data-theme="dark"] .sea-row span, html[data-theme="dark"] .sea-row em { color: #8fa9bc; }
html[data-theme="dark"] .sea-row { border-top-color: #314a59; }
html[data-theme="dark"] .sea-row b { color: #eaf4fb; }
html[data-theme="dark"] .sol-ring .ring-svg text { fill: #eaf4fb; }
html[data-theme="dark"] .sol-ring .ring-svg circle:first-child { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.18); }
html[data-theme="dark"] .wx-table th, html[data-theme="dark"] .wx-table td { border-bottom-color: #314a59; color: #d7e5ef; }
html[data-theme="dark"] .day { background: #1a2b36; color: #d7e5ef; border-color: #314a59; }
html[data-theme="dark"] .day.good { background: #309a44; color: #fff; border-color: #309a44; }
html[data-theme="dark"] .day.marginal { background: #cca435; color: #5b4a00; border-color: #cca435; }
html[data-theme="dark"] .day.poor { background: #c24f3f; color: #fff; border-color: #c24f3f; }
html[data-theme="dark"] .day.far { background: #16283a; color: #8fa9bc; border-color: #314a59; }
html[data-theme="dark"] .pick-banner { background: #38300f; color: #f7ead0; }
html[data-theme="dark"] .leaflet-tile-pane { filter: brightness(0.55) saturate(0.75) contrast(1.08); }
html[data-theme="dark"] #map { background: #1e303c; }
.chartbox { position: relative; touch-action: pan-y; cursor: crosshair; }
.scrub-line {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: #5e2ea6; opacity: .85; pointer-events: none;
}
.scrub-tip {
  position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap;
  background: rgba(10, 42, 67, .93); color: #fff; border-radius: 999px;
  padding: 3px 9px; font-size: .8rem; font-weight: 600; pointer-events: none; z-index: 3;
}
#map { height: 250px; border-radius: 9px; border: 1px solid var(--line); z-index: 0; background: #7fb2dd; }
.map-wrap { position: relative; }
.map-wrap .search-box { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 1002; margin: 0; }
.map-wrap .search-box input { border: none; box-shadow: 0 4px 18px rgba(6, 32, 51, .35); }
.row-between { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 6px; }
.row-gap { display: flex; gap: 8px; }
.mini-title { font-size: 1rem; margin: 14px 0 6px; color: var(--navy); }
.row-between .mini-title { margin: 0; }
.btn-small {
  border: 1px solid var(--teal); color: var(--teal); background: #fff;
  border-radius: 999px; padding: 7px 13px; font-size: .88rem; cursor: pointer;
}
.btn-small.active { background: var(--teal); color: #fff; }
.btn-ghost-wide {
  width: 100%; margin: 4px 0 8px; padding: 10px;
  border: 1px dashed var(--teal); color: var(--teal); background: #fff;
  border-radius: 10px; font-size: .95rem; cursor: pointer;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.chip {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 8px 13px; font-size: .92rem; cursor: pointer;
}
.chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip .del { margin-left: 6px; opacity: .65; }
.ctx-place { font-size: 1.12rem; font-weight: 600; margin: 12px 0 2px; color: var(--navy); }
.ctx-pick-wrap { display: inline-flex; align-items: center; gap: 2px; margin: 12px 0 2px; max-width: 100%; }
.ctx-place-select {
  font-size: 1.12rem; font-weight: 600; color: var(--navy); background: transparent;
  border: none; padding: 2px 0; max-width: 100%; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.ctx-pick-arrow { color: var(--teal); font-size: 1rem; pointer-events: none; }
.ctx-updated { color: var(--muted); font-size: .85rem; margin: 0 0 6px; }
.days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.day {
  flex: 0 0 auto; border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 6px 10px; font-size: .85rem; cursor: pointer; text-align: center; line-height: 1.35;
}
.day.good { background: #33a748; color: #fff; border-color: #33a748; }
.day.marginal { background: #dab12c; color: #5b4a00; border-color: #dab12c; }
.day.poor { background: #cb4f3d; color: #fff; border-color: #cb4f3d; }
.day.far { background: #eef3f7; color: #5f7382; border-color: #d5dde4; }
.day.active { outline: none; box-shadow: inset 0 0 0 3px var(--navy); font-weight: 700; }
html[data-theme="dark"] .day.active { box-shadow: inset 0 0 0 3px #cfe3f2; }
.verdict { border-radius: 12px; padding: 13px 14px; font-size: 1.05rem; margin: 10px 0; }
.verdict.good { background: #e2f4e5; border: 1px solid #9fd3a8; }
.verdict.marginal { background: #fdf3d8; border: 1px solid #ecd28a; }
.verdict.poor { background: #fbe3e1; border: 1px solid #eda49d; }
.verdict.far { background: #eef3f8; border: 1px solid #c3d2df; }
.verdict small { display: block; margin-top: 3px; color: #444; font-size: .88rem; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 10px; margin: 6px 0; }
.card h3 { margin: 2px 0 8px; color: var(--navy); }
.card p { margin: 4px 0; line-height: 1.55; }
.table-card { overflow-x: auto; padding: 6px; }
.tide-events { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 1rem; margin-bottom: 8px; }
.note { color: var(--muted); font-size: .85rem; line-height: 1.5; }
.wx-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.wx-table th, .wx-table td { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.wx-table th { color: var(--muted); font-weight: 600; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shop-item { background: #fff; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; text-decoration: none; color: var(--ink); }
.shop-item img { width: 100%; height: 120px; object-fit: contain; background: #eef3f7; display: block; }
html[data-theme="dark"] .shop-item img { background: #1e303c; }
.shop-item .si-body { padding: 8px 10px 10px; }
.shop-item .si-name { font-size: .9rem; line-height: 1.35; min-height: 2.4em; }
.shop-item .si-price { color: var(--teal); font-weight: 600; margin-top: 4px; }
.me-card { text-align: center; }
.me-logo { width: 92px; height: 92px; border-radius: 20px; }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 600;
  display: flex; background: #fff; border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar button {
  flex: 1; border: 0; background: none; cursor: pointer;
  padding: 7px 0 6px; font-size: .8rem; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.tabbar button .tab-ico { font-size: 1.25rem; line-height: 1; }
.tabbar button.active { color: var(--navy); font-weight: 600; }
/* ---- Home week wall ---- */
.wall-card {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 12px; margin: 6px 0; cursor: pointer; width: 100%; text-align: left;
}
.wall-name { flex: 0 0 27%; font-weight: 600; color: var(--navy); font-size: .95rem; line-height: 1.3; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.wn-line { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.wn-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wn-pen { flex: 0 0 auto; font-size: .78rem; opacity: .75; }
.wn-tools { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.wall-days { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wcell { border-radius: 8px; text-align: center; font-size: 1rem; font-weight: 800; padding: 2px 0; min-height: 30px; display: flex; align-items: center; justify-content: center; background: #cfd8e0; color: #33506b; }
.wcell.good { background: var(--good); color: #fff; }
.wcell.marginal { background: var(--warn); color: #5b4a00; }
.wcell.poor { background: var(--bad); color: #fff; }
.wcell.today { outline: 2px solid var(--navy); outline-offset: 1px; }
.wcell.skel { background: linear-gradient(100deg, #c3d2de 40%, #dbe7f0 50%, #c3d2de 60%); background-size: 200% 100%; animation: wskel 1.15s linear infinite; color: transparent; }
html[data-theme="dark"] .wcell.skel { background: linear-gradient(100deg, #1b3448 40%, #2a4a63 50%, #1b3448 60%); background-size: 200% 100%; }
@keyframes wskel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .wcell.skel { animation: none; } }
.wall-card.editing { outline: 2px dashed var(--teal); }
/* ---- Custom thresholds panel (inside wall Edit mode) ---- */
#th-panel { margin-top: 12px; }
.th-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0 0; font-size: .92rem; color: var(--navy); }
.th-row select { font-size: 1rem; padding: 6px 12px; border-radius: 8px; border: 1px solid #b9c9d6; background: #fff; color: var(--navy); }
/* ---- AI summary card (below the wall) ---- */
.summary-card { margin-top: 14px; }
.summary-card .mini-title { margin-top: 0; }
.sum-lead { font-weight: 600; color: var(--navy); margin: 2px 0 8px; line-height: 1.45; }
.sum-line { margin: 5px 0; line-height: 1.45; font-size: .92rem; }
.pick-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #fdf3d8; border: 1px solid #ecd28a; border-radius: 10px;
  padding: 9px 11px; margin-bottom: 10px; font-size: .92rem;
}
/* ---- Account ---- */
#account-card input {
  width: 100%; padding: 10px; margin: 6px 0; font-size: 1rem;
  border: 1px solid var(--line); border-radius: 10px;
}
#acct-code-row { display: flex; gap: 8px; align-items: center; }
#acct-code-row input { flex: 1; letter-spacing: 4px; }
#acct-code-row button, #acct-send { white-space: nowrap; }
/* ---- Catches tab (full-page grid) ---- */
.catch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; padding: 6px 0 10px; }
.catch-card { text-decoration: none; color: inherit; }
.catch-thumb { display: block; position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 3/4; background: #0b2a4a; }
.catch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catch-play {
  position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px;
  background: rgba(11,42,74,.85); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .75rem;
}
.catch-cap { font-size: .85rem; font-weight: 600; color: var(--navy); margin-top: 5px; line-height: 1.3; }
.catch-tag { font-size: .7rem; color: var(--muted); }
td.sev { position: relative; font-weight: 600; text-align: left; padding-left: 8px; }
.sev-bar { position: absolute; left: 0; bottom: 0; height: 5px; display: block; border-radius: 0 3px 3px 0; background-image: linear-gradient(90deg, hsl(6,85%,82%) 0%, hsl(350,84%,57%) 34%, hsl(318,78%,40%) 67%, hsl(275,80%,24%) 100%); background-repeat: no-repeat; }


.sea-row.act span { width: 124px; }
.sea-row em { font-style: normal; margin-left: auto; font-weight: 600; color: #33506b; white-space: nowrap; }
.sea-row.act-bad { opacity: .55; }

/* ---- Liquid Glass pass (2026-11-07, Eric's request): frosted surfaces over a soft ocean gradient ---- */
body { background: linear-gradient(172deg, #d9e9f4 0%, #eef3f7 34%, #e9f2ec 72%, #e2eee9 100%) fixed; }
.card, .wall-card, .shop-item {
  background: rgba(255,255,255,.68);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-color: rgba(255,255,255,.7);
  box-shadow: 0 8px 28px rgba(10,40,70,.09), inset 0 1px 0 rgba(255,255,255,.65);
}
.tabbar {
  background: rgba(250,252,253,.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top-color: rgba(255,255,255,.65);
  box-shadow: 0 -6px 24px rgba(10,40,70,.08);
}
.map-wrap .search-box input {
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}
.search-results {
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
.search-item { background: transparent; }
.hero-more { background: rgba(255,255,255,.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn-small, .chip { background: rgba(255,255,255,.65); }
html[data-theme="dark"] body { background: linear-gradient(172deg, #1d3545 0%, #1a2f3d 38%, #162833 100%) fixed; }
html[data-theme="dark"] .card, html[data-theme="dark"] .wall-card, html[data-theme="dark"] .shop-item {
  background: rgba(17,36,53,.66);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
}
html[data-theme="dark"] .tabbar {
  background: rgba(28,46,58,.72);
  border-top-color: rgba(255,255,255,.09);
  box-shadow: 0 -6px 24px rgba(0,0,0,.35);
}
html[data-theme="dark"] .map-wrap .search-box input { background: rgba(15,34,49,.85); }
html[data-theme="dark"] .search-results { background: rgba(18,36,48,.9); }
html[data-theme="dark"] .search-item { background: transparent; }
html[data-theme="dark"] .btn-small, html[data-theme="dark"] .chip { background: rgba(18,36,48,.66); }

/* ---- Hero shade follows the spot's weather today (2026-11-07) ---- */
.hero-shade.wx-clear { background: linear-gradient(100deg, rgba(7,42,52,.62) 25%, rgba(150,98,22,.28) 68%, rgba(226,146,44,.16)); }
.hero-shade.wx-partly { background: linear-gradient(100deg, rgba(6,32,51,.70) 25%, rgba(18,78,88,.30) 68%, rgba(232,172,84,.15)); }
.hero-shade.wx-overcast { background: linear-gradient(100deg, rgba(37,47,57,.87) 25%, rgba(88,102,114,.46) 68%, rgba(122,132,142,.26)); }
.hero-shade.wx-fog { background: linear-gradient(100deg, rgba(50,59,65,.85) 25%, rgba(106,117,124,.50) 68%, rgba(140,150,156,.30)); }
.hero-shade.wx-rain { background: linear-gradient(100deg, rgba(7,25,47,.90) 25%, rgba(28,58,94,.52) 68%, rgba(38,78,118,.32)); }
.hero-shade.wx-storm { background: linear-gradient(100deg, rgba(15,13,39,.92) 25%, rgba(48,38,88,.56) 68%, rgba(62,50,112,.32)); }

/* ---- Empty wall slots (capacity 10, 2026-11-07) ---- */
.wall-card.empty { background: transparent; border: 1.5px dashed rgba(11,95,120,.35); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; justify-content: center; }
.wall-card.empty .wall-name.add { color: var(--muted); font-weight: 600; opacity: .8; }
html[data-theme="dark"] .wall-card.empty { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.28); }

/* ---- Hero spot picker + week trend (2026-11-07) ---- */
.hero-name-wrap { position: relative; display: block; max-width: calc(100% - 64px); cursor: pointer; }
.hero-name-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; appearance: none; -webkit-appearance: none; border: none; padding: 0; margin: 0; cursor: pointer; }
.hero-trend { border-bottom: 1px solid rgba(255,255,255,.18); padding-bottom: 7px; margin-bottom: 7px; }
.trend-days { margin: 5px 0 3px; max-width: 340px; }

/* ---- Wall spot delete badge (edit mode, 2026-11-07) ---- */
.wall-del { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; background: #d9534f; color: #fff; font-size: .7rem; font-weight: 600; flex: 0 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer; }

/* ---- Polish batch: SVG tab icons, chips scroll row, slim attribution, hero day/night (2026-11-07) ---- */
.tabbar button .tab-ico { display: inline-flex; }
.tab-ico svg { width: 23px; height: 23px; display: block; }
.chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; }
.leaflet-control-attribution { font-size: 9px; background: rgba(255,255,255,.55); color: #5f7382; padding: 1px 5px; max-width: 56%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leaflet-control-attribution a { color: #5f7382; }
html[data-theme="dark"] .leaflet-control-attribution { background: rgba(28,46,58,.55); color: #9fb6c4; }
.hero-card.hero-night .hero-bg { filter: brightness(.6) saturate(.85); }
.hero-card.hero-night .hero-shade { filter: brightness(.82); }
.hero-card.hero-dawn .hero-bg { filter: brightness(1.07) saturate(1.12); }

/* ---- Hero text legibility via soft shadow (lets the shade lighten on bright days, 2026-11-07) ---- */
.hero-label, .hero-name, .hero-meta, .hero-hint { text-shadow: 0 1px 8px rgba(4,24,38,.45); }

/* ---- Apple-style batch: filled tab icons, motion, iOS settings rows, pull-to-refresh (2026-11-07) ---- */
.tab-ico .ico-fill { display: none; }
.tabbar button.active .ico-fill { display: block; }
.tabbar button.active .ico-line { display: none; }
.view.active { animation: viewIn .28s ease both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.hero-full { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; padding-top: 0; border-top-width: 0; transition: max-height .38s ease, opacity .3s ease; }
.hero-full.open { max-height: 620px; opacity: 1; margin-top: 9px; padding-top: 7px; border-top-width: 1px; }
.tabbar button, .chip, .btn-small { transition: transform .12s ease; }
.tabbar button:active, .chip:active, .btn-small:active, .wall-card:active, .day:active { transform: scale(.965); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.set-row:first-child { padding-top: 2px; }
.set-row:last-child { border-bottom: none; padding-bottom: 2px; }
.set-label { font-weight: 600; color: var(--navy); font-size: .95rem; white-space: nowrap; }
.set-row .row-gap { flex-wrap: wrap; justify-content: flex-end; }
#ptr-ind { position: fixed; top: 0; left: 50%; width: 34px; height: 34px; margin-top: env(safe-area-inset-top); border-radius: 50%; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(6,32,51,.25); color: var(--navy); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translate(-50%,-70px); z-index: 3000; pointer-events: none; }
#ptr-ind.snap { transition: transform .25s ease, opacity .2s; }
#ptr-ind svg { width: 19px; height: 19px; }
#ptr-ind.spin svg { animation: ptrspin .8s linear infinite; }
@keyframes ptrspin { to { transform: rotate(360deg); } }
html[data-theme="dark"] #ptr-ind { background: rgba(17,36,53,.88); color: #bcd8ea; }

/* ---- Floating glass tab bar (iOS 26 style, Eric's reference, 2026-11-07) ---- */
.tabbar {
  left: 10px; right: 10px; max-width: 740px; margin: 0 auto;
  bottom: calc(10px + env(safe-area-inset-bottom));
  border: 1px solid rgba(255,255,255,.65); border-radius: 26px;
  box-shadow: 0 10px 30px rgba(6,32,51,.22), inset 0 1px 0 rgba(255,255,255,.5);
  padding: 6px;
}
html[data-theme="dark"] .tabbar { border-color: rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
.tabbar button { border-radius: 20px; }
.tabbar button.active { background: rgba(11,42,74,.10); }
html[data-theme="dark"] .tabbar button.active { background: rgba(150,180,200,.16); }
main { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

.chip-d { opacity: .62; font-size: .9em; }

/* ---- Sticky detail header + calendar + sea day-scroll (2026-11-07, z50) ---- */
.ctx { position: sticky; top: 0; z-index: 55; margin: 0 -12px; padding: 2px 12px 8px; background: rgba(238,244,248,.85); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid rgba(11,42,74,.08); }
html[data-theme="dark"] .ctx { background: rgba(28,46,58,.85); border-bottom-color: rgba(255,255,255,.08); }
.ctx-top { display: flex; align-items: center; gap: 10px; }
.ctx-lines { flex: 1; min-width: 0; }
.days-row .days { flex: 1; min-width: 0; }
.cal-btn { flex: 0 0 auto; width: 46px; height: 46px; border: 1px solid rgba(11,42,74,.14); border-radius: 8px; background: rgba(255,255,255,.72); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); box-shadow: 0 1px 4px rgba(6,32,51,.10); color: var(--navy); display: flex; align-items: center; justify-content: center; cursor: pointer; margin: 0; }
html[data-theme="dark"] .cal-btn { background: rgba(255,255,255,.10); color: #cfe3f2; border-color: rgba(255,255,255,.16); box-shadow: none; }
#cal-pop { position: fixed; right: 10px; z-index: 200; width: min(336px, 92vw); padding: 12px; border-radius: 12px; background: rgba(255,255,255,.92); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 14px 40px rgba(6,32,51,.28); }
html[data-theme="dark"] #cal-pop { background: rgba(14,30,46,.94); border-color: rgba(255,255,255,.12); }
.cal-head { font-weight: 700; color: var(--navy); margin-bottom: 6px; }
html[data-theme="dark"] .cal-head { color: #eef3f7; }
.cal-wk, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wk span { text-align: center; font-size: .7rem; color: var(--muted); padding: 2px 0; }
.cal-d { aspect-ratio: 1; border: 1px solid transparent; border-radius: 8px; background: transparent; font-size: .88rem; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.cal-d.good { background: #33a748; color: #fff; }
.cal-d.marginal { background: #dab12c; color: #5b4a00; }
.cal-d.poor { background: #cb4f3d; color: #fff; }
.cal-d.far { background: #eef3f7; color: #5f7382; }
html[data-theme="dark"] .cal-d.far { background: #16283a; color: #8fa9bc; }
.cal-d.off { visibility: hidden; }
.cal-d.today { box-shadow: inset 0 0 0 2px var(--navy); }
html[data-theme="dark"] .cal-d.today { box-shadow: inset 0 0 0 2px #cfe3f2; }
.cal-d.active { outline: none; box-shadow: inset 0 0 0 3px var(--navy); font-weight: 700; }
html[data-theme="dark"] .cal-d.active { box-shadow: inset 0 0 0 3px #cfe3f2; }
.seg { display: flex; background: rgba(11,42,74,.08); border-radius: 12px; padding: 3px; margin: 12px 0 2px; }
html[data-theme="dark"] .seg { background: rgba(255,255,255,.10); }
.seg button { flex: 1; border: 0; background: transparent; padding: 7px 0; border-radius: 8px; font-size: .9rem; color: var(--sub); cursor: pointer; font-family: inherit; }
.seg button.active { background: #fff; color: var(--navy); font-weight: 600; box-shadow: 0 1px 4px rgba(6,32,51,.18); }
html[data-theme="dark"] .seg button.active { background: #22405c; color: #eef3f7; }
.day-sec { scroll-margin-top: 142px; margin-top: 20px; }
.sec-head { display: block; margin: 0 0 8px; position: sticky; top: calc(var(--sec-top, 132px) + env(safe-area-inset-top)); z-index: 6; background: rgba(238, 245, 251, .98); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 7px 10px; border-radius: 10px; box-shadow: 0 1px 0 rgba(11, 42, 74, .08); }
.sec-temp { color: var(--sub); font-size: .88rem; font-weight: 600; margin: 0 auto; }
html[data-theme="dark"] .sec-temp { color: #a8c4da; }
.sec-v { margin-left: auto; }
html[data-theme="dark"] .sec-head { background: rgba(36, 60, 73, .98); }
.sec-date { font-weight: 700; color: var(--navy); font-size: 1rem; }
html[data-theme="dark"] .sec-date { color: #eef3f7; }
.sec-v { font-size: .72rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.sec-v.good { background: #33a748; color: #fff; }
.sec-v.marginal { background: #dab12c; color: #5b4a00; }
.sec-v.poor { background: #cb4f3d; color: #fff; }
.sec-ev { margin: 0 2px 8px; }

/* Seg control joins the sticky header on the Sea tab (Eric, z52): the ctx and
   the segmented control now stick together as one glass header. */
.sticky-head { position: sticky; top: 0; z-index: 55; margin: 0 -12px; padding: 2px 12px 8px; background: rgba(238,244,248,.85); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid rgba(11,42,74,.08); }
html[data-theme="dark"] .sticky-head { background: rgba(28,46,58,.85); border-bottom-color: rgba(255,255,255,.08); }
/* (z52 #view-sea .ctx static override removed in z54 — the Sea ctx is sticky again) */
.sticky-head .seg { margin: 8px 0 0; }
.day-sec { scroll-margin-top: 186px; }

/* Charts live in Conditions now (z53); the Sea header is slim again. */
.day-sec { scroll-margin-top: 196px; }

/* Type polish (z60): Inter carries Latin/digits; large titles sit tighter. */
.ctx-place-select, .sec-date, .hero-name, .cal-head, h3.mini-title { letter-spacing: -.01em; }

/* Shareable conditions card (z61) */
.share-btn { display: block; margin: 10px auto 0; padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(11,42,74,.22); background: rgba(255,255,255,.35); color: inherit; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
#share-pop { position: fixed; inset: 0; z-index: 700; background: rgba(6,25,40,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-items: center; justify-content: center; }
.share-box { background: rgba(255,255,255,.95); border-radius: 12px; padding: 14px; width: min(400px, 92vw); max-height: 92vh; overflow: auto; box-shadow: 0 18px 50px rgba(0,0,0,.35); text-align: center; }
html[data-theme="dark"] .share-box { background: rgba(36,60,73,.97); }
#share-img { width: 100%; border-radius: 10px; display: block; }
#share-hint { margin: 10px 0 0; }
.share-row { display: flex; gap: 8px; justify-content: center; margin-top: 10px; position: sticky; bottom: -14px; padding: 10px 0 14px; background: rgba(255,255,255,.95); }
html[data-theme="dark"] .share-row { background: rgba(36,60,73,.97); }

/* z65: two-section Tackle tab */
.merchant-line { font-size: .72rem; color: var(--accent); margin: 2px 0 8px; font-weight: 600; }
.si-pick { font-size: .72rem; color: var(--sub); line-height: 1.4; margin-top: 3px; }
.share-soon { text-align: center; color: var(--sub); font-size: .84rem; line-height: 1.5; padding: 16px 14px; border: 1.5px dashed rgba(11,42,74,.28); }
html[data-theme="dark"] .share-soon { border-color: rgba(207,227,242,.3); }

/* z72: day strip in the verdict card + slim AQI row */
.hstrip { display: flex; gap: 1.5px; margin: 9px 0 2px; }
.hs-cell { flex: 1; height: 15px; border-radius: 3px; background: #9db4c4; }
.hs-cell.c2 { background: #33a748; }
.hs-cell.c1 { background: #dab12c; }
.hs-cell.c0 { background: #cb4f3d; }
.hs-cell.out { opacity: .35; }
.hs-cell.gold { box-shadow: inset 0 3px 0 #f0a500; }
.hs-cell.now { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .95); }
.hs-cell.gold.now { box-shadow: inset 0 3px 0 #f0a500, inset 0 0 0 2px rgba(255, 255, 255, .95); }
.hstrip-axis { display: flex; justify-content: space-between; font-size: .6rem; opacity: .75; margin-bottom: 3px; }
/* z384: tape hour strip - 3-day track slides inside a clipped viewport */
.hstrip-vp { overflow: hidden; }
.hstrip-track { width: 300%; will-change: transform; }
.hstrip-axis2 { position: relative; height: 11px; margin-top: 1px; }
.hstrip-axis2 span { position: absolute; transform: translateX(-50%); font-size: .6rem; font-weight: 600; opacity: .75; white-space: nowrap; }
/* z385 (Eric): no gaps between the tape strip cells - one continuous band
   slides smoothly instead of stepping block by block. */
.hstrip-track .hstrip { gap: 0; }
.hstrip-track .hs-cell { border-radius: 0; }
#view-spots .info-screen .scr-grid { display: grid; gap: 10px; }
/* z386: big-number readout tiles (Eric's pick, mock L). Near-black
   Calendar-style tiles in BOTH themes; the Title carries the status
   colour (blue for tide, then good/warn/bad vs Eric's thresholds). */
.scr-tile { background: radial-gradient(ellipse 75% 60% at 50% 46%, rgba(124, 196, 255, .30), rgba(124, 196, 255, 0) 70%), linear-gradient(180deg, #1d3247, #101e2e); border-radius: 9px; padding: 7px 2px 6px; display: flex; flex-direction: column; align-items: center; box-shadow: inset 0 0 0 1px rgba(140, 190, 240, .35), 0 3px 10px rgba(8, 25, 44, .35); }
.scr-tile.st-good { background: radial-gradient(ellipse 75% 60% at 50% 46%, rgba(87, 185, 129, .32), rgba(87, 185, 129, 0) 70%), linear-gradient(180deg, #1d3247, #101e2e); }
.scr-tile.st-warn { background: radial-gradient(ellipse 75% 60% at 50% 46%, rgba(217, 181, 69, .32), rgba(217, 181, 69, 0) 70%), linear-gradient(180deg, #1d3247, #101e2e); }
.scr-tile.st-bad { background: radial-gradient(ellipse 75% 60% at 50% 46%, rgba(232, 115, 106, .34), rgba(232, 115, 106, 0) 70%), linear-gradient(180deg, #1d3247, #101e2e); }
.scr-tile .st-t { font-size: .62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #7cc4ff; line-height: 1.25; white-space: nowrap; } /* z394: nowrap + a touch smaller so the longest title (vi "Thủy triều") stays on one line */
.scr-tile.st-good .st-t { color: #57c46e; }
.scr-tile.st-warn .st-t { color: #e3c766; }
.scr-tile.st-bad .st-t { color: #f0866a; }
.scr-tile .st-n { font-size: 1.85rem; font-weight: 700; line-height: 1.12; color: #f3f8fb; white-space: nowrap; }
.scr-tile .st-u { font-size: .7rem; font-weight: 600; color: #9fb8cd; line-height: 1.25; white-space: nowrap; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .scr-tile .st-n { background-image: linear-gradient(180deg, #ffffff, #d3e2ea); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
/* z388 (Eric): in LIGHT mode the near-black tiles clash with the pale card -
   same blue family, softer mid-navy, so the row harmonises. */
/* z392 (Eric, mock M3 gem glow) supersedes the z388 light softening: the tiles are deep gem in both themes now (status glow + hairline + gradient number). */
/* z393 (Eric): in DARK mode the tiles go deeper still - darker base,
   softer glow - so they sit down into the dark card instead of blooming. */
html[data-theme="dark"] .scr-tile { background: radial-gradient(ellipse 75% 60% at 50% 46%, rgba(124, 196, 255, .22), rgba(124, 196, 255, 0) 70%), linear-gradient(180deg, #2a4553, #14242e); }
html[data-theme="dark"] .scr-tile.st-good { background: radial-gradient(ellipse 75% 60% at 50% 46%, rgba(48, 154, 68, .26), rgba(87, 185, 129, 0) 70%), linear-gradient(180deg, #2a4553, #14242e); }
html[data-theme="dark"] .scr-tile.st-warn { background: radial-gradient(ellipse 75% 60% at 50% 46%, rgba(204, 164, 53, .26), rgba(217, 181, 69, 0) 70%), linear-gradient(180deg, #2a4553, #14242e); }
html[data-theme="dark"] .scr-tile.st-bad { background: radial-gradient(ellipse 75% 60% at 50% 46%, rgba(194, 79, 63, .28), rgba(232, 115, 106, 0) 70%), linear-gradient(180deg, #2a4553, #14242e); }
/* z400 (Eric picked mock C, 2026-11-10): LIGHT mode tiles go pale glass -
   light base, deep-navy gradient numbers, darker status titles for contrast;
   the status glow stays as a sheen. Dark mode keeps the z392/z393 gem. */
html[data-theme="light"] .scr-tile { background: radial-gradient(ellipse 75% 60% at 50% 46%, rgba(124, 196, 255, .18), rgba(124, 196, 255, 0) 70%), linear-gradient(180deg, #e9f2f9, #cfdfec); box-shadow: inset 0 0 0 1px rgba(11, 42, 74, .16), 0 3px 10px rgba(8, 25, 44, .14); }
html[data-theme="light"] .scr-tile.st-good { background: radial-gradient(ellipse 75% 60% at 50% 46%, rgba(87, 185, 129, .20), rgba(87, 185, 129, 0) 70%), linear-gradient(180deg, #e9f2f9, #cfdfec); }
html[data-theme="light"] .scr-tile.st-warn { background: radial-gradient(ellipse 75% 60% at 50% 46%, rgba(217, 181, 69, .22), rgba(217, 181, 69, 0) 70%), linear-gradient(180deg, #e9f2f9, #cfdfec); }
html[data-theme="light"] .scr-tile.st-bad { background: radial-gradient(ellipse 75% 60% at 50% 46%, rgba(232, 115, 106, .22), rgba(232, 115, 106, 0) 70%), linear-gradient(180deg, #e9f2f9, #cfdfec); }
html[data-theme="light"] .scr-tile .st-t { color: #2f7fd0; }
html[data-theme="light"] .scr-tile.st-good .st-t { color: #2e7d4f; }
html[data-theme="light"] .scr-tile.st-warn .st-t { color: #a8861c; }
html[data-theme="light"] .scr-tile.st-bad .st-t { color: #c0392b; }
html[data-theme="light"] .scr-tile .st-n { background-image: linear-gradient(180deg, #123a5e, #1d5f8a); }
html[data-theme="light"] .scr-tile .st-u { color: #42617a; }
.hs-cell.cn { background: #8fa6b8; }
html[data-theme="dark"] .hs-cell.cn { background: #3d5a72; }
.aqi-row { display: flex; align-items: center; gap: 8px; font-size: .88rem; padding: 2px 0; }
.aqi-row b { font-size: 1.05rem; }
.aqi-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.aqi-sub { margin-left: auto; font-size: .72rem; color: var(--muted); }

/* z74: titles live inside cards; flush first title */
.card > .mini-title:first-child { margin-top: 0; }
.tide-events { font-size: .9rem; }

/* z75: stronger background-vs-card contrast (Eric) — deeper page wash, near-solid cards */
body { background: linear-gradient(172deg, #a9cbe4 0%, #c3d9e6 42%, #cfdfdd 78%, #c9ddd6 100%) fixed; }
.card, .wall-card, .shop-item {
  background: rgba(255,255,255,.95);
  border-color: rgba(11,42,74,.12);
  box-shadow: 0 3px 14px rgba(10,40,70,.16), inset 0 1px 0 rgba(255,255,255,.8);
}
.tabbar { background: rgba(255,255,255,.94); }
html[data-theme="dark"] body { background: linear-gradient(172deg, #1d3545 0%, #1a2f3d 55%, #162833 100%) fixed; }
html[data-theme="dark"] .card, html[data-theme="dark"] .wall-card, html[data-theme="dark"] .shop-item {
  background: rgba(26,50,72,.94);
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 3px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
}
html[data-theme="dark"] .tabbar { background: rgba(24,40,50,.95); }

/* z77: AQI row lives inside the weather card */
#wx-aqi .aqi-row { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 9px; }

/* z81: tide footer — legend left, station source small on the right */
#tide-note { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }

/* z83: account header (avatar) at the top of Me */
.acct-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.acct-avatar { width: 62px; height: 62px; flex: none; border-radius: 50%; overflow: hidden; border: 2px solid rgba(127,179,221,.55); background: #12314d; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.acct-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-initial { font-size: 1.5rem; font-weight: 700; color: #cfe3f2; }
.acct-id { min-width: 0; }
.acct-id p { margin: 0; }

/* z87: wind details live inside the weather card */
#wx-wind { margin-top: 10px; border-top: 1px solid rgba(127,179,221,.25); padding-top: 10px; }
#wx-wind:empty { display: none; }

/* z88: temperature trend inside the weather card */
#wx-trend { margin-top: 8px; }
.wx-sub { font-size: .82rem; font-weight: 600; opacity: .85; margin-bottom: 2px; }

/* z89: weather card compaction (Eric: smaller overall) */
#wx-card .wx-grid { gap: 9px 6px; }
#wx-card .wx-cell b { font-size: .95rem; }
#wx-card .wx-cell span { font-size: .76rem; }
#wx-card .compass-svg { width: 80px; height: 80px; }

/* z92: AQI as a pill in the weather card's top-right corner */
.wx-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wx-title-row .mini-title { margin: 0; }
.aqi-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; background: rgba(127,179,221,.13); border: 1px solid rgba(127,179,221,.28); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.aqi-pill .aqi-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* z93 tier-1: unified card titles, sea grid cells, tighter sticky header */
.card h3, .mini-title { font-size: 1rem; font-weight: 600; }
.card > h3:first-child { margin-top: 0; }
.sea-grid { margin-top: 6px; }
.wx-cell i { display: block; font-style: normal; font-size: .72rem; color: #5f7382; margin-top: 1px; }
html[data-theme="dark"] .wx-cell i { color: #8fa9bc; }
.ctx { padding-bottom: 6px; }
.day { padding: 4px 9px; line-height: 1.25; }
.cal-btn { width: 42px; height: 42px; }

/* z97: AQI as a big circular badge in the weather header */
.wx-aqi-slot { margin-left: auto; margin-right: 10px; }
.aqi-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.aqi-disc { width: 52px; height: 52px; border-radius: 50%; border: 3px solid #2f9e63; background: rgba(11,42,74,.06); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
html[data-theme="dark"] .aqi-disc { background: rgba(255,255,255,.07); }
.aqi-cap { font-size: .55rem; font-weight: 600; letter-spacing: .1em; color: #5f7382; }
html[data-theme="dark"] .aqi-cap { color: #8fa9bc; }
.aqi-disc b { font-size: 1.18rem; margin-top: 2px; }
.aqi-cat { font-size: .7rem; font-weight: 600; color: #5f7382; }
html[data-theme="dark"] .aqi-cat { color: #8fa9bc; }

/* z99: moon card, reference style */
.moon-hero { text-align: center; margin: 2px 0 0; }
.moon-big { width: 104px; height: 104px; }
.moon-name { text-align: center; font-weight: 600; font-size: 1.06rem; margin: 2px 0 0; color: var(--navy); }
html[data-theme="dark"] .moon-name { color: #eaf4fb; }
.moon-path { width: 100%; height: auto; display: block; }
.moon-stats { margin-top: 4px; }

/* z100: sun dial card */
.sun-dial { width: 100%; height: auto; display: block; }


/* z106: column labels live inside the sticky day header; sea tables fixed-layout so columns align */
.sec-head-row { display: flex; align-items: center; gap: 8px; }
.sec-cols { display: grid; grid-template-columns: 13% 24% 21% 21% 21%; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(11, 42, 74, .08); font-size: .78rem; font-weight: 600; color: var(--muted); text-align: center; }
html[data-theme="dark"] .sec-cols { border-top-color: rgba(255, 255, 255, .08); }
#sea-days .wx-table { table-layout: fixed; }
#sea-days .wx-table td { white-space: normal; }

/* z110: display-name editor in the account card */
#acct-who { cursor: pointer; }
#acct-name-edit { gap: 8px; align-items: center; }
#acct-name-in { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); font: inherit; background: #fff; color: var(--ink); }
html[data-theme="dark"] #acct-name-in { background: #1e303c; color: #eaf4fb; }

/* z111: sold-out items in the Tackle tab (live-synced from the website feed) */
.shop-item { position: relative; }
.si-soldout { position: absolute; top: 8px; left: 8px; background: #d9534f; color: #fff; font-weight: 600; font-size: .78rem; padding: 3px 9px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); z-index: 2; }
.shop-item.soldout img { filter: grayscale(.55); opacity: .8; }

/* z113: two-line cells in the Tides hourly tables */
.td-sub { font-size: .72rem; font-weight: 500; color: var(--muted); line-height: 1.3; margin-top: 1px; }
#sea-days .wx-table td { vertical-align: middle; }

/* z114: reference-style tiered cells in the Tides tables */
.td-top { font-size: .7rem; font-weight: 500; color: var(--muted); line-height: 1.3; }
.td-hum { color: #3f8fd2; font-weight: 600; }
.td-main { font-size: 1.3rem; font-weight: 600; line-height: 1.22; }
.td-main .u { font-size: .76rem; font-weight: 600; color: var(--sub); }
.td-main.wx-main { font-size: 1.12rem; }
.wx-ico-big { font-size: 1.28rem; }
.ev-low { color: #3f8f66; font-weight: 600; }
.ev-high { color: #3f8fd2; font-weight: 600; }
#sea-days .wx-table td { padding: 9px 4px; }
#sea-days tbody tr:nth-child(even) { background: rgba(96, 132, 165, .055); }

/* z115: tighter rows in the Tides tables (Eric: rows were too spread out) */
#sea-days .wx-table td { padding: 5px 4px; }
.td-main { font-size: 1.14rem; line-height: 1.15; }
.td-main.wx-main { font-size: 1.04rem; }
.wx-ico-big { font-size: 1.14rem; }
.td-top, .td-sub { line-height: 1.18; }
.td-sub { font-size: .7rem; }

/* z117: fixed three-row grid per cell — all main values share one baseline */
.cell3 { display: grid; grid-template-rows: 1.02rem auto minmax(1.02rem, auto); align-items: center; }
.cell3 .td-top, .cell3 .td-sub { overflow: hidden; }
.tm { font-size: .95rem; font-weight: 500; }
#sea-days .wx-table td { vertical-align: top; }

/* z118: even column rhythm — all sea-table cells left-aligned at one inset */
#sea-days .wx-table td { text-align: left; padding-left: 8px; }
.sec-cols span { text-align: left; padding-left: 8px; }

/* z120: current-hour marker in today's Tides table */
#sea-days tbody tr.now-row { background: rgba(63, 143, 210, .15); }
.now-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #63b3ff; margin-right: 4px; vertical-align: 2px; }

/* z121: tide column — big directional arrow as the main element */
.tide-main { line-height: 1.05; }
.tide-up { color: #3f8f66; font-size: 1.5rem; font-weight: 700; }
.tide-dn { color: #7d94a8; font-size: 1.5rem; font-weight: 700; }
.tide-flat { color: #7d94a8; font-size: 1.05rem; font-weight: 600; }
html[data-theme="dark"] .tide-up { color: #63bb8c; }
html[data-theme="dark"] .tide-dn, html[data-theme="dark"] .tide-flat { color: #8fa9bc; }

/* z122: shared right-edge severity strip in the wind cell (top = wind, bottom = wave) */
td.stripped { position: relative; }
.strip { position: absolute; right: 0; z-index: 0; display: block; pointer-events: none; }
.strip-wind { top: 0; height: 50%; }
.strip-wave { bottom: 0; height: 50%; }
td.stripped .cell3 { position: relative; z-index: 1; }

/* z123: blended single-strip trial (top colour = wind, bottom = wave, mixed in the middle) */
.strip-mix { top: 0; height: 100%; }

/* z126: proportional full-height cell fill (element-based; td background-size % is unreliable in WebKit) */
td.filled { position: relative; }
.cellfill { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; display: block; pointer-events: none; }
td.filled .cell3 { position: relative; z-index: 1; }

/* z131: single-hue blue page wash (no green drift) + crisper card edges */
body { background: linear-gradient(172deg, #a9cbe4 0%, #c3d9e6 42%, #c9d9e8 78%, #cfdfec 100%) fixed; }
.card, .wall-card, .shop-item { border-color: rgba(11, 42, 74, .20); box-shadow: 0 4px 16px rgba(10, 40, 70, .20), inset 0 1px 0 rgba(255, 255, 255, .8); }
html[data-theme="dark"] .card, html[data-theme="dark"] .wall-card, html[data-theme="dark"] .shop-item { border-color: rgba(255, 255, 255, .22); }

/* z132: tab bar as true frosted glass (translucent + blur, both themes) */
.tabbar { background: rgba(250, 252, 253, .66); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-color: rgba(11, 42, 74, .14); box-shadow: 0 10px 30px rgba(10, 40, 70, .18); }
html[data-theme="dark"] .tabbar { background: rgba(26, 44, 56, .62); border-color: rgba(255, 255, 255, .14); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }

/* z134: tide footer legend as icons (green line swatch + fish), station line removed */

/* z135: tide legend moves to the card header (right of the title) */
.card-head { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 6px; }
.card-head .mini-title { margin: 0; }

/* z136: legend fish becomes the outline icon in a neutral tone; only the swatch stays activity-green */

/* z137: feedback contact link in the Me footer */
.feedback-link { color: #2b6cb0; font-weight: 600; text-decoration: none; }
html[data-theme="dark"] .feedback-link { color: #63b3ff; }

/* z138: feedback link sized as a tappable row, not fine print */
.feedback-link { font-size: .95rem; display: inline-block; padding: 6px 2px; }

/* z139: sticky day header fully opaque, tone matched to the table body */
.sec-head { background: #f4f8fb; }
html[data-theme="dark"] .sec-head { background: rgb(36, 60, 73); }

/* z141: live wind badge on the map */

/* z142: merged chart card — one shared timeline, translucent scrub column */
#combo-lanes { position: relative; touch-action: pan-y; }
.lane-label { font-size: .8rem; font-weight: 600; color: var(--muted); margin: 8px 2px 1px; }
.lane-label:first-child { margin-top: 0; }
#combo-read { font-size: .88rem; font-weight: 600; color: var(--navy); padding: 1px 2px 7px; min-height: 1.25em; }
html[data-theme="dark"] #combo-read { color: #dcebf7; }
#combo-col { position: absolute; top: 0; bottom: 0; width: 4.03%; margin-left: -2.015%; background: rgba(38, 69, 95, .07); border-left: 1.5px solid rgba(38, 69, 95, .45); border-right: 1.5px solid rgba(38, 69, 95, .45); border-radius: 3px; pointer-events: none; z-index: 5; }
html[data-theme="dark"] #combo-col { background: rgba(255, 255, 255, .10); border-left-color: rgba(255, 255, 255, .5); border-right-color: rgba(255, 255, 255, .5); }
.hs-cell.sel { box-shadow: inset 0 0 0 2px #fff; }

/* z144: verdict headline + timeline inside the merged chart card */
#combo-verdict .verdict { background: transparent; border: none; box-shadow: none; padding: 3px 0 0; font-size: 1.18rem; font-weight: 700; color: var(--navy); }
html[data-theme="dark"] #combo-verdict .verdict { color: #eaf3fa; }
#combo-verdict .verdict.good { color: #3f8f66; }
#combo-verdict .verdict.marginal { color: #a87b0f; }
html[data-theme="dark"] #combo-verdict .verdict.marginal { color: #d9b545; }
#combo-verdict .verdict.poor { color: #c65f54; }
#combo-verdict .verdict.far { color: var(--muted); font-size: 1rem; }
#combo-verdict .verdict small { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); margin-top: 2px; }
#combo-strip .hstrip { margin-top: 7px; }
#combo-read { padding-bottom: 5px; }

/* z145: featured spots are map pins; Near me lives inside the map */
.spot-pin { background: transparent; border: none; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35)); }
.map-locate { position: absolute; right: 10px; bottom: 30px; z-index: 1002; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(11, 42, 74, .18); background: rgba(250, 252, 253, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #0b2a4a; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(6, 32, 51, .3); cursor: pointer; }
.map-locate svg { width: 22px; height: 22px; }
.map-locate:active { transform: scale(.94); }
html[data-theme="dark"] .map-locate { background: rgba(24, 42, 52, .82); color: #dcebf7; border-color: rgba(255, 255, 255, .2); }
.pin-ren { margin-left: 6px; border: 1px solid rgba(0, 0, 0, .25); background: #fff; color: #33506b; border-radius: 999px; width: 20px; height: 20px; font-size: .72rem; line-height: 1; cursor: pointer; vertical-align: middle; }
.pin-del { margin-left: 6px; border: 1px solid rgba(0, 0, 0, .25); background: #fff; color: #c0453f; border-radius: 999px; width: 20px; height: 20px; font-size: .72rem; line-height: 1; cursor: pointer; vertical-align: middle; }

/* z148: info-screen card (spot head + live readout) and a draggable hour strip */
.info-card { padding: 10px 12px; }
.info-card .ctx-top { margin: 0; }
.info-screen { margin-top: 8px; background: linear-gradient(180deg, #132c42, #0a1d2d); border-radius: 9px; padding: 9px 12px 11px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 4px 14px rgba(6, 32, 51, .22); }
.info-screen #combo-read { color: #eaf3fa; font-size: 1rem; padding: 0; min-height: 0; }
.scr-time { font-size: 1.24rem; font-weight: 700; letter-spacing: .01em; line-height: 1.15; }
.scr-fish { font-size: 1.02rem; }
.scr-grid { display: flex; gap: 7px; margin-top: 7px; }
.scr-cell { flex: 1 1 0; min-width: 0; background: rgba(255, 255, 255, .06); border-radius: 8px; padding: 5px 8px 6px; }
.scr-cell span { display: block; font-size: .6rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #8fb6d9; }
.scr-cell b { font-size: .97rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.strip-bar { touch-action: pan-y; cursor: grab; margin: 0 2px 10px; }
.strip-bar:active { cursor: grabbing; }
.strip-bar .hstrip { margin-top: 2px; }
/* z148 fix: screen values fit narrow (SE-width) screens */
.scr-cell b { font-size: .9rem; letter-spacing: -.01em; }
.scr-cell { padding: 5px 7px 6px; }

/* z149: the hour strip is a first-class drag surface — taller hit area, the
   page must not steal the gesture mid-drag */
.strip-bar { touch-action: none; padding: 7px 2px 5px; margin-bottom: 4px; }
.strip-bar .hs-cell.sel { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgba(38, 69, 95, .35); }
html[data-theme="dark"] .strip-bar .hs-cell.sel { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgba(255, 255, 255, .35); }

/* z150: spot head + calendar move onto the map */
.map-tools { position: absolute; right: 10px; bottom: 30px; z-index: 1002; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.map-tools .map-locate { position: static; }
.map-tools .cal-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(11, 42, 74, .18); background: rgba(250, 252, 253, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #0b2a4a; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(6, 32, 51, .3); cursor: pointer; padding: 0; }
html[data-theme="dark"] .map-tools .cal-btn { background: rgba(24, 42, 52, .82); color: #dcebf7; border-color: rgba(255, 255, 255, .2); }
.info-card { padding: 10px; }
.info-card .info-screen { margin-top: 0; }

/* z151: calendar button on the info screen's top-right corner */
.info-screen { position: relative; }

/* z153: fish markers — one fish on green days, three on green days with a
   fish-activity peak; same rule for the screen's green hour */
.day { position: relative; }
.scr-fish { letter-spacing: -4px; }

/* z155: long-press charge ring on the map */
.press-ring-wrap { background: none; border: none; }
.press-ring { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #2f9e63; background: rgba(47, 158, 99, .16); animation: pressGrow 1s linear forwards; }
@keyframes pressGrow { from { transform: scale(.3); opacity: .45; } to { transform: scale(1); opacity: 1; } }

/* z159: hero pager — finger-follow drag, position dots, slide-in */
.hero-card { touch-action: pan-y; }
.hero-dots { display: flex; gap: 5px; justify-content: center; margin-top: 8px; }
.hero-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.hero-dot.on { background: #fff; width: 16px; border-radius: 3px; }
@keyframes heroInL { from { transform: translateX(28px); opacity: .35; } to { transform: translateX(0); opacity: 1; } }
@keyframes heroInR { from { transform: translateX(-28px); opacity: .35; } to { transform: translateX(0); opacity: 1; } }

/* z160: motion polish — all transform/opacity, gentle and slow */
.hero-bg { animation: heroDrift 16s ease-in-out infinite alternate; }
@keyframes heroDrift { from { transform: scale(1) translateX(0); } to { transform: scale(1.07) translateX(-6px); } }
.ring-prog { animation: ringDraw .9s ease both; }
@keyframes ringDraw { from { stroke-dashoffset: 150.8; } }
#tide-chart svg, #wave-chart svg, #wind-chart svg { animation: chartIn .5s ease both; }
@keyframes chartIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#wall .wall-card { animation: wallIn .4s ease backwards; }
#wall .wall-card:nth-child(2) { animation-delay: .04s; }
#wall .wall-card:nth-child(3) { animation-delay: .08s; }
#wall .wall-card:nth-child(4) { animation-delay: .12s; }
#wall .wall-card:nth-child(5) { animation-delay: .16s; }
#wall .wall-card:nth-child(6) { animation-delay: .2s; }
#wall .wall-card:nth-child(7) { animation-delay: .24s; }
#wall .wall-card:nth-child(8) { animation-delay: .28s; }
#wall .wall-card:nth-child(9) { animation-delay: .32s; }
#wall .wall-card:nth-child(10) { animation-delay: .36s; }
@keyframes wallIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.scr-fish { display: inline-block; animation: fishBob 2.6s ease-in-out infinite; }
@keyframes fishBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-2.5px) rotate(5deg); } }
.pin-sel svg { animation: pinDrop .5s cubic-bezier(.2, 1.6, .4, 1) both; transform-origin: 50% 100%; }
@keyframes pinDrop { 0% { transform: translateY(-12px) scale(.92); } 60% { transform: translateY(1.5px) scale(1.02); } 100% { transform: translateY(0) scale(1); } }
.day.active { animation: dayPop .25s ease; }
@keyframes dayPop { 0% { transform: scale(.94); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* z161: the hero backdrop is the spot's own satellite map */
.hero-bg { z-index: 0; }
.hero-map { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: transparent; animation: heroDriftSoft 20s ease-in-out infinite alternate; }
.hero-map .leaflet-container { background: transparent; }
@keyframes heroDriftSoft { from { transform: scale(1); } to { transform: scale(1.045); } }
.hero-map-attr { position: absolute; right: 6px; bottom: 4px; z-index: 3; font-size: .55rem; color: rgba(255, 255, 255, .75); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); pointer-events: none; }

/* z162: explicit hero layer stack (map above photo, below shade and text) */
.hero-shade { z-index: 2; }
.hero-body { z-index: 4; }
.ring-svg { position: relative; z-index: 4; }

/* z163 (Eric): softer verdict palette on Home only - Conditions/Tides keep the root tones */

/* z164: Windy-style wind pennant on the map (replaces the dark pill badge) */
.wb-flag { position: absolute; left: 2px; top: -13px; width: 94px; height: 26px; transform-origin: -2px 13px; display: flex; align-items: center; justify-content: center; padding-left: 12px; box-sizing: border-box; font-size: .84rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35)); }
.wb-flag.good { background: #33a748; color: #fff; }
.wb-flag.warn { background: #dab12c; color: #5b4a00; }
.wb-flag.bad { background: #cb4f3d; color: #fff; }
.wb-txt.flip { transform: rotate(180deg); }

/* z165: the wave pennant (Windy's blue banner) */
.wb-flag.wave { background: #6cb4ee; color: #08304d; width: 112px; }

/* z166 (Eric): pennants smaller, tip blunted, wave flag graded by wave level */
.wb-flag { left: 2px; top: -11px; width: 78px; height: 22px; transform-origin: -2px 11px; padding-left: 10px; font-size: .76rem; clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%); }
.wb-flag.wave { width: 98px; }
.wb-flag.wave.wwarn { background: #2f7fd0; color: #fff; }
.wb-flag.wave.wbad { background: #cb4f3d; color: #fff; }

/* z167 (Eric): the scrub column loses its hard border rails - feathered edges */
#combo-col { border-left: none; border-right: none; background: linear-gradient(90deg, rgba(38, 69, 95, 0) 0%, rgba(38, 69, 95, .13) 30%, rgba(38, 69, 95, .13) 70%, rgba(38, 69, 95, 0) 100%); }
html[data-theme="dark"] #combo-col { background: linear-gradient(90deg, rgba(175, 200, 215, 0) 0%, rgba(175, 200, 215, .16) 30%, rgba(175, 200, 215, .16) 70%, rgba(175, 200, 215, 0) 100%); }

/* z168: same feathered column, a step deeper so the position reads at a glance */
#combo-col { background: linear-gradient(90deg, rgba(38, 69, 95, 0) 0%, rgba(38, 69, 95, .2) 30%, rgba(38, 69, 95, .2) 70%, rgba(38, 69, 95, 0) 100%); }
html[data-theme="dark"] #combo-col { background: linear-gradient(90deg, rgba(175, 200, 215, 0) 0%, rgba(175, 200, 215, .27) 30%, rgba(175, 200, 215, .27) 70%, rgba(175, 200, 215, 0) 100%); }

/* z169 (Eric): one top bar on the map - spot display merged with the search */
.map-topbar { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 1002; display: flex; flex-direction: column; gap: 6px; }
.map-spot-row { display: flex; gap: 6px; align-items: stretch; }
#info-head.map-spot-bar { position: static; flex: 1; min-width: 0; max-width: none; pointer-events: auto; }
#info-head.map-spot-bar .ctx-top { background: rgba(9, 24, 38, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 12px; padding: 7px 12px; box-shadow: 0 4px 18px rgba(6, 32, 51, .35); height: 100%; box-sizing: border-box; display: flex; align-items: center; }
#info-head.map-spot-bar .ctx-lines { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
#info-head.map-spot-bar .ctx-pick-wrap { flex: 1; min-width: 0; display: flex; align-items: center; }
#info-head.map-spot-bar .ctx-place-select { width: 100%; background: transparent; border: 0; color: #fff; font-size: 1rem; font-weight: 600; }
#info-head.map-spot-bar .ctx-pick-arrow { color: #fff; }
#info-head.map-spot-bar .ctx-updated { margin: 0; font-size: .64rem; color: rgba(255, 255, 255, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 54%; text-shadow: none; }
.map-search-btn { flex: none; width: 46px; border: 0; border-radius: 12px; background: rgba(9, 24, 38, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(6, 32, 51, .35); cursor: pointer; }
.map-topbar .search-box { position: relative; top: auto; left: auto; right: auto; margin: 0; }

/* z170 (Eric): pin icon before the spot name; name and small print share one line */
.ctx-pin-ico { color: var(--navy); display: inline-flex; flex: none; }
#info-head.map-spot-bar .ctx-pin-ico { color: #fff; }
#info-head.map-spot-bar .ctx-pick-wrap { gap: 6px; }
#info-head.map-spot-bar .ctx-place-select { -webkit-appearance: none; appearance: none; line-height: 1.25; padding: 1px 0; }
#info-head.map-spot-bar .ctx-updated { line-height: 1.25; }

/* z170b: force the small print onto the name's exact centreline */
#info-head.map-spot-bar .ctx-updated { display: flex; align-items: center; height: 22px; }
#info-head.map-spot-bar .ctx-pick-wrap { margin: 0; }

/* z171: merged compact Sun & Moon card */
.astro-cols { display: flex; gap: 14px; }
.astro-col { flex: 1; min-width: 0; }
.astro-viz { text-align: center; }
.astro-viz .sun-mini { width: 116px; height: 116px; }
.astro-viz .moon-big { width: 92px; height: 92px; }
.moon-name-s { font-weight: 600; font-size: .92rem; margin-top: 1px; }
.astro-stats { margin-top: 9px; display: flex; flex-direction: column; }
.a-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 4.5px 0; border-top: 1px dashed var(--line); font-size: .82rem; }
.a-stat span { color: var(--muted); font-size: .7rem; }
.a-stat b { font-weight: 600; white-space: nowrap; }

/* z172 (Eric, Windy style): flatten the layers - one flat surface per card,
   hairline dividers instead of boxes inside boxes */
#view-spots .info-card { background: transparent; border: none; box-shadow: none; padding: 0; overflow: visible; }
/* z261 (Eric): the wind/wave readout sticks to the top of Forecast while
   everything else scrolls under it, so scrubbing the hours below never
   loses the numbers. #map gets its own stacking context so Leaflet panes
   cannot paint over the stuck panel. */
#view-spots .spots-sticky-head { position: sticky; top: 8px; z-index: 500; }
#view-spots .spots-sticky-head .ctx { margin-top: 0; background: rgba(233,241,246,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 9px; padding: 6px; }
html[data-theme="dark"] #view-spots .spots-sticky-head .ctx { background: rgba(10,25,38,.88); }
/* z263 (Eric): the numbers screen, the selected-time line and the hour
   strip merge into ONE card sitting under the day strip - the whole
   sticky head is now: days, then this control card. */
#view-spots .merged-card { padding: 8px 10px 9px; margin-top: 6px; }
#view-spots .merged-card .info-screen { margin-top: 0; }
#view-spots .merged-card .strip-time { margin-top: 4px; }
/* z264 (Eric): compact the merged card - tighter inner spacing. */
#view-spots .merged-card .info-screen { padding: 7px 0 8px; } /* z387: side inset now comes from the merged card alone, so tile side margins equal the 10px tile gaps */
#view-spots .merged-card .strip-bar { padding: 3px 2px 1px; }
#view-spots .merged-card .hstrip { margin: 3px 0 1px; }
#view-spots .merged-card .hstrip-axis { margin-bottom: 0; }
#view-spots .merged-card .strip-bar { margin-bottom: 0; }
#map { z-index: 0; }
#view-spots .info-screen { background: #0d1f2e; border: 1px solid rgba(120, 160, 195, .18); box-shadow: none; border-radius: 9px; padding: 11px 14px 12px; margin-top: 0; }
#view-spots .info-screen .scr-time { border-bottom: 1px solid rgba(150, 190, 225, .14); padding-bottom: 8px; }
#view-spots .scr-grid { gap: 0; margin-top: 9px; }
#view-spots .scr-cell { background: transparent; border-radius: 0; padding: 1px 10px; border-left: 1px solid rgba(150, 190, 225, .16); }
#view-spots .scr-cell:first-child { border-left: none; padding-left: 0; }
#view-spots .scr-cell:last-child { padding-right: 0; }

/* z173 (Eric): selected time lives small + centred above the hour strip */
.strip-time { text-align: center; font-size: .84rem; font-weight: 700; color: var(--navy); height: 19px; line-height: 19px; margin: 0 0 1px; }
.strip-time .scr-fish { font-size: .8rem; }
html[data-theme="dark"] .strip-time { color: #dcebf7; }
#view-spots .scr-grid { margin-top: 0; }

/* z174 (Eric): tighter spacing around the strip time + strip */
.strip-time { height: 17px; line-height: 17px; margin: 0; font-size: .82rem; }
.strip-bar { padding: 3px 2px; margin-bottom: 2px; }
#view-spots .ctx { padding-bottom: 2px; }

/* z175 (Eric): soft verdict palette app-wide (both themes) + the info screen
   flips light in light mode */
.press-ring { border-color: #3f8f66; background: rgba(63, 143, 102, .16); }
html:not([data-theme="dark"]) #view-spots .info-screen { background: #e9f1f6; border-color: rgba(11, 42, 74, .10); }
html:not([data-theme="dark"]) #view-spots .info-screen #combo-read { color: #0b2a4a; }
html:not([data-theme="dark"]) #view-spots .scr-cell { border-left-color: rgba(11, 42, 74, .13); }
html:not([data-theme="dark"]) #view-spots .scr-cell span { color: #64809a; }

/* z176 (Eric): keep the map's contents inside its rounded corners; the Esri
   attribution becomes a small inset pill, never flush with the corner */
#map { overflow: hidden; }
.leaflet-control-attribution { margin: 0 5px 5px 0; border-radius: 5px; }
#map .leaflet-control-attribution { margin: 0 6px 6px 0; border-radius: 5px; }

/* z177 (Eric, Windy direction): the Home wall flattens into one hairline
   list, and each row's seven day cells merge into ONE continuous band */
#wall .wall-card { background: transparent; border: none; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; margin: 0; padding: 9px 4px; backdrop-filter: none; -webkit-backdrop-filter: none; }
#wall .wall-card:last-child { border-bottom: none; }
#wall .wall-card.empty { border: 1.5px dashed rgba(11, 95, 120, .35); border-radius: 9px; margin: 6px 0; }
#wall .wall-days { gap: 0; }
#wall .wcell { border-radius: 0; padding: 4px 0; }
#wall .wcell:first-child { border-radius: 8px 0 0 8px; }
#wall .wcell:last-child { border-radius: 0 8px 8px 0; }
#wall .wcell.good, #wall .wcell.marginal, #wall .wcell.poor { background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .06)); }
#wall .wcell.today { outline: none; box-shadow: inset 0 0 0 2px #fff; position: relative; z-index: 1; }

/* z178 (Eric): dark mode gets its own DEEP verdict palette - the soft light
   colours glare on the near-black ground. Light mode is untouched. */
html[data-theme="dark"] { --good: #309a44; --warn: #cca435; --bad: #c24f3f; }
html[data-theme="dark"] .day.good { background: #309a44; border-color: #309a44; }
html[data-theme="dark"] .day.marginal { background: #cca435; border-color: #cca435; }
html[data-theme="dark"] .day.poor { background: #c24f3f; border-color: #c24f3f; }
html[data-theme="dark"] .cal-d.good { background: #309a44; }
html[data-theme="dark"] .cal-d.marginal { background: #cca435; }
html[data-theme="dark"] .cal-d.poor { background: #c24f3f; }
html[data-theme="dark"] .sec-v.good { background: #309a44; }
html[data-theme="dark"] .sec-v.marginal { background: #cca435; }
html[data-theme="dark"] .sec-v.poor { background: #c24f3f; }
html[data-theme="dark"] .hs-cell.c2 { background: #309a44; }
html[data-theme="dark"] .hs-cell.c1 { background: #cca435; }
html[data-theme="dark"] .hs-cell.c0 { background: #c24f3f; }
html[data-theme="dark"] .wb-flag.good { background: #309a44; }
html[data-theme="dark"] .wb-flag.warn { background: #cca435; }
html[data-theme="dark"] .wb-flag.bad { background: #c24f3f; }
html[data-theme="dark"] .wb-flag.wave.wbad { background: #c24f3f; }
html[data-theme="dark"] #combo-verdict .verdict.good { color: #3f9063; }
html[data-theme="dark"] #combo-verdict .verdict.marginal { color: #a5853a; }
html[data-theme="dark"] #combo-verdict .verdict.poor { color: #c07a72; }
html[data-theme="dark"] .tide-up { color: #3f9063; }
html[data-theme="dark"] .ev-low { color: #3f9063; }

/* z179 (Eric): pure white text is half the glare - in dark mode the lettering
   on coloured blocks and the wall names soften to a tinted off-white */
html[data-theme="dark"] .wcell.good, html[data-theme="dark"] .wcell.poor,
html[data-theme="dark"] .day.good, html[data-theme="dark"] .day.poor,
html[data-theme="dark"] .cal-d.good, html[data-theme="dark"] .cal-d.poor,
html[data-theme="dark"] .sec-v.good, html[data-theme="dark"] .sec-v.poor,
html[data-theme="dark"] .wb-flag.good, html[data-theme="dark"] .wb-flag.bad,
html[data-theme="dark"] .hero-pill.good, html[data-theme="dark"] .hero-pill.poor { color: #e9f2ec; }
html[data-theme="dark"] .wall-name { color: #d7e5ef; }

/* z180 (Eric): wall day cells separate again - gaps back, every day is its
   own tap target (tap jumps to that spot on that day). Colours untouched,
   the rows stay flat. */
#wall .wall-days { gap: 4px; }
#wall .wcell { border-radius: 8px; cursor: pointer; }
#wall .wcell:first-child { border-radius: 8px; }
#wall .wcell:last-child { border-radius: 8px; }
#wall .wcell.today { box-shadow: inset 0 0 0 2px var(--navy); }
html[data-theme="dark"] #wall .wcell.today { box-shadow: inset 0 0 0 2px #e9f2ec; }

/* z181 (Eric): day displays get a dimensional finish - light falling from
   above, an inset top highlight, a shaded foot, a soft lift off the surface.
   Ring states (today / active day) keep their rings inside the same stack. */
#wall .wcell, #wall .wcell.good, #wall .wcell.marginal, #wall .wcell.poor,
.day, .day.good, .day.marginal, .day.poor,
.cal-d, .cal-d.good, .cal-d.marginal, .cal-d.poor {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .07) 46%, rgba(0, 0, 0, .05) 82%, rgba(0, 0, 0, .13));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 3px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .16);
}
#wall .wcell.today { box-shadow: inset 0 0 0 2px var(--navy), inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 3px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .16); }
html[data-theme="dark"] #wall .wcell.today { box-shadow: inset 0 0 0 2px #e9f2ec, inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 3px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .16); }
.day.active { box-shadow: inset 0 0 0 3px var(--navy), inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 3px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .16); }
html[data-theme="dark"] .day.active { box-shadow: inset 0 0 0 3px #cfe3f2, inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 3px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .16); }

/* z183 (Eric): wall rows are cards again - the z177 row flattening is
   undone. Cells stay separate and dimensional; colours stay as settled. */
#wall .wall-card { background: var(--card); border: 1px solid rgba(11, 42, 74, .20); border-radius: 9px; box-shadow: 0 4px 16px rgba(10, 40, 70, .20), inset 0 1px 0 rgba(255, 255, 255, .8); margin: 6px 0; padding: 8px 12px; backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }
#wall .wall-card:last-child { border-bottom: 1px solid rgba(11, 42, 74, .20); }
html[data-theme="dark"] #wall .wall-card { background: var(--card); border-color: rgba(255, 255, 255, .15); box-shadow: 0 3px 14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07); }
html[data-theme="dark"] #wall .wall-card:last-child { border-bottom-color: rgba(255, 255, 255, .15); }
#wall .wall-card.empty { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* z184 (Eric): the lettering on the date blocks is ENGRAVED into the key,
   not printed on it - a dark catch inside the top of each letter and a
   faint light catch below, so type and block read as one moulded piece. */
.day.good, .day.poor, #wall .wcell.good, #wall .wcell.poor, .cal-d.good, .cal-d.poor { text-shadow: 0 -1px 1px rgba(0, 0, 0, .28), 0 1px 1px rgba(255, 255, 255, .22); }
.day.marginal, #wall .wcell.marginal, .cal-d.marginal, .day.far, .cal-d { text-shadow: 0 1px 0 rgba(255, 255, 255, .32), 0 -1px 1px rgba(0, 0, 0, .16); }

/* z185 (Eric): engraved must read CONCAVE - the z184 blur made it look
   raised. Incised recipe: crisp (blur 0) dark catch inside the top edge,
   crisp light catch on the rim below each letter. */
.day.good, .day.poor, #wall .wcell.good, #wall .wcell.poor, .cal-d.good, .cal-d.poor { text-shadow: 0 -1px 0 rgba(0, 0, 0, .38), 0 1px 0 rgba(255, 255, 255, .30); }
.day.marginal, #wall .wcell.marginal, .cal-d.marginal, .day.far, .cal-d { text-shadow: 0 -1px 0 rgba(0, 0, 0, .22), 0 1px 0 rgba(255, 255, 255, .45); }

html[data-theme="dark"] .press-ring { border-color: #276349; background: rgba(39, 99, 73, .22); }

/* z188 (Eric): light-mode card surfaces trade pure white for a blue-family
   silver-white (#eef4f8) - cards sit IN the page wash instead of on it.
   Separation now comes from the border and a softened shadow. */
.card, .shop-item, .catch-card, .day { background-color: #e2ecf5; }
html:not([data-theme="dark"]) #wall .wall-card { background: #eef4f8; box-shadow: 0 3px 12px rgba(10, 40, 70, .14), inset 0 1px 0 rgba(255, 255, 255, .7); }

/* z190: Me menu - Windy-style icon rows; choices live inside each row. */
.menu-card { padding: 6px 0; }
.mrow + .mrow { border-top: 1px solid var(--line); }
.mrow-head { display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box; padding: 12px 16px; background: none; border: none; cursor: pointer; color: var(--ink); font: inherit; text-align: left; text-decoration: none; }
.mrow-ico { width: 34px; height: 34px; flex: none; border-radius: 10px; background: rgba(23, 105, 178, .1); display: flex; align-items: center; justify-content: center; font-size: 1.02rem; }
html[data-theme="dark"] .mrow-ico { background: rgba(255, 255, 255, .09); }
.mrow-label { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: .95rem; }
.mrow-val { color: var(--muted); font-size: .82rem; white-space: nowrap; min-width: 0; max-width: 56%; overflow: hidden; text-overflow: ellipsis; }
.mrow-chev { color: var(--muted); font-size: 1.2rem; line-height: 1; transition: transform .18s; }
.mrow.open .mrow-chev { transform: rotate(90deg); }
.mrow-body { display: none; padding: 2px 16px 14px 61px; }
.mrow.open .mrow-body { display: block; }
.mrow-body .note { margin: 0; }
.tip-item { display: flex; gap: 10px; padding: 7px 0; }
.tip-ico { font-size: 1.05rem; line-height: 1.3; flex: none; }
.tip-t { font-weight: 600; font-size: .9rem; }
.tip-b { color: var(--muted); font-size: .83rem; line-height: 1.5; }

/* z191: own-spot actions (share toggle / delete / report) + wall edit tools. */
.spot-actions { display: flex; gap: 8px; margin-top: 8px; }
.spot-actions .btn-small { flex: 1; }
.btn-small.danger { color: #b3402f; border-color: rgba(179, 64, 47, .45); }
html[data-theme="dark"] .btn-small.danger { color: #e08a7a; border-color: rgba(224, 138, 122, .45); }
.wall-share, .wall-favdel { cursor: pointer; padding: 0 2px; }
.wall-favdel { color: #71899b; } .wall-favdel svg { vertical-align: -2px; }

/* z192: About row inside the Me menu (owner card + member promo live here). */
.mrow-logo { width: 21px; height: 21px; border-radius: 50%; object-fit: cover; display: block; }
.about-body { text-align: center; }
.about-body .me-logo { margin-top: 4px; }
.about-name { margin: 8px 0 6px; }
.about-body p { text-align: left; line-height: 1.55; }
.about-promo { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); text-align: left; }
.about-promo h4 { margin: 0 0 6px; }
.about-promo p { margin: 0; }

/* z193: settings choices are iOS-style radio rows; About body drops its
   duplicate logo/name (both already in the row head). */
.opt-list { display: flex; flex-direction: column; }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; padding: 11px 2px; background: none; border: none; border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; font-size: .95rem; text-align: left; cursor: pointer; }
.opt-row:last-child { border-bottom: none; }
.opt-check { color: #1769b2; font-weight: 600; opacity: 0; flex: none; }
.opt-row.active .opt-check { opacity: 1; }
.opt-row.active { font-weight: 600; }
.about-body { text-align: left; }

/* z194: flag before each language name in the radio list. */
.opt-name { display: inline-flex; align-items: center; gap: 10px; }
.opt-flag { font-size: 1.05rem; line-height: 1; }

/* z196: search + locate stack on the map's right edge; favorite star at the
   top bar's right end (bar stretches across now). */
.map-tools .map-search-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(11, 42, 74, .18); background: rgba(250, 252, 253, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #0b2a4a; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(6, 32, 51, .3); cursor: pointer; padding: 0; }
.map-tools .map-search-btn:active { transform: scale(.94); }
html[data-theme="dark"] .map-tools .map-search-btn { background: rgba(24, 42, 52, .82); color: #dcebf7; border-color: rgba(255, 255, 255, .2); }
.fav-star { flex: none; width: 46px; border: 0; border-radius: 12px; background: rgba(9, 24, 38, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 18px rgba(6, 32, 51, .35); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.fav-star svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fav-star.on svg { fill: #f5b921; stroke: #f5b921; }
.fav-star:active { transform: scale(.94); }

/* z197 (Eric): dark-mode marginal blocks kept the light-mode dark-brown text
   (#5b4a00) on the deep ochre ground - muddy. They now take the same warm
   off-white the dark verdict banner uses for marginal. Light mode keeps
   dark text on the bright straw yellow, which is correct there. */
html[data-theme="dark"] .wcell.marginal, html[data-theme="dark"] .day.marginal,
html[data-theme="dark"] .cal-d.marginal, html[data-theme="dark"] .sec-v.marginal,
html[data-theme="dark"] .wb-flag.warn, html[data-theme="dark"] .hero-pill.marginal { color: #f7ead0; }

/* z200 (Eric): dark-mode body text still glared at display sizes - one step
   softer across the board (still ~9:1 on the card ground). Hero (photo
   ground), coloured verdict blocks and the tab accent keep their values. */
html[data-theme="dark"] { --navy: #c8ddef; --ink: #bfd4e3; --card: #1a2b36; }
html[data-theme="dark"] .card, html[data-theme="dark"] .wall-card,
html[data-theme="dark"] .catch-card, html[data-theme="dark"] .shop-item,
html[data-theme="dark"] .chip, html[data-theme="dark"] .search-item { color: #bfd4e3; }
html[data-theme="dark"] input, html[data-theme="dark"] select { color: #d3e3ee; }
html[data-theme="dark"] .sol-ring .ring-svg text { fill: #d3e5f2; }

/* z201: sun-path curve inside the Sun & Moon card; stats in their own row. */
.sunpath { width: 100%; height: auto; display: block; margin: 8px 0 0; }
.astro-stats-row { margin-top: 4px; }
.astro-stats-row .astro-stats { margin-top: 0; }

/* z202 (Eric): the moon phase name moves up onto the card title line -
   "Sun · Moon" left, phase name right, one baseline. */
.astro-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.moon-name-head { font-size: .95rem; font-weight: 600; white-space: nowrap; }

/* z203 (Eric): the sun dial and moon disc read uneven - they rendered at
   116px vs 92px. Both viewBoxes draw their disc at 104/120 units, so at
   one shared size the two circles match exactly, centres on one line. */
.astro-vizrow { align-items: center; }
.astro-viz .moon-big { width: 116px; height: 116px; }

/* z204: community catch photos - post form, privacy segmented control,
   feed cards with spot chip / report / delete. */
.catch-form { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 12px; margin: 8px 0 12px; display: flex; flex-direction: column; gap: 8px; }
.cf-preview { width: 100%; border-radius: 10px; display: block; }
.cf-in { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: .92rem; }
.cf-lab { font-size: .78rem; font-weight: 600; color: var(--muted); margin-top: 2px; }
.cf-priv { display: flex; gap: 6px; }
.cf-priv button { flex: 1; padding: 8px 4px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: .82rem; font-weight: 600; }
.cf-priv button.on { background: #0b2a4a; color: #fff; border-color: #0b2a4a; }
html[data-theme="dark"] .cf-priv button.on { background: #1d4e79; border-color: #1d4e79; }
.cf-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.cf-go { background: #0b2a4a; color: #fff; border-color: #0b2a4a; }
.cc-size { color: var(--muted); font-weight: 400; font-size: .78rem; }
.cc-meta { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }
.cc-loc { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 5px; min-height: 26px; }
.spot-chip { border: 1px solid var(--line); background: rgba(11,42,74,.06); color: var(--navy); border-radius: 999px; padding: 4px 10px; font-size: .74rem; font-weight: 600; }
.catch-area { font-size: .74rem; color: var(--muted); font-weight: 600; }
.cc-act { border: none; background: transparent; color: var(--muted); font-size: .78rem; padding: 4px 6px; }
#catch-demo-title { margin-top: 18px; }

/* z205: catch poster row, likes, full-screen viewer. */
.cc-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.cc-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.cc-av-init { display: inline-flex; align-items: center; justify-content: center; background: #0b2a4a; color: #fff; font-size: .78rem; font-weight: 600; }
.cc-name { font-size: .82rem; font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-time { margin-left: auto; font-size: .7rem; color: var(--muted); flex: none; }
.catch-thumb { cursor: pointer; }
.like-btn { border: none; background: transparent; font-size: .88rem; color: var(--muted); padding: 4px 6px; }
.like-btn.on { color: #e0245e; }
.clb { position: fixed; inset: 0; z-index: 999; background: #051626; padding: calc(env(safe-area-inset-top, 0px) + 48px) 14px calc(env(safe-area-inset-bottom, 0px) + 18px); overflow-y: auto; box-sizing: border-box; }
.clb-x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 12px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,.14); color: #fff; font-size: 1rem; }
.clb-img { width: 100%; max-height: 58vh; object-fit: contain; border-radius: 12px; background: #000; display: block; }
.clb-body { margin-top: 12px; color: #eaf3f9; }
.clb-body .cc-name { color: #eaf3f9; }
.clb-body .cc-time, .clb-body .cc-meta { color: #9db8c9; }
.clb-cap { font-size: 1.02rem; font-weight: 600; margin-top: 8px; }
.clb-cap .cc-size { color: #9db8c9; }
.clb-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.clb-actions .spot-chip { background: rgba(255,255,255,.12); color: #eaf3f9; border-color: transparent; }
.clb-actions .catch-area { color: #9db8c9; }
.clb-actions .cc-act, .clb-actions .like-btn { color: #cfe2ee; font-size: .95rem; }
.clb-actions .like-btn.on { color: #ff5c8a; }

/* z206: photo feed thumbs go landscape (Eric: catches are shot landscape);
   the demo VIDEO grid keeps its portrait 3/4. */
#catch-feed .catch-thumb { aspect-ratio: 4/3; }

/* z207: photo feed goes single-column (Eric's call after seeing both) with
   natural photo aspect - no cropping; comments live in the viewer. */
#catch-feed { grid-template-columns: 1fr; gap: 18px; }
#catch-feed .catch-thumb { aspect-ratio: auto; }
#catch-feed .catch-thumb img { height: auto; max-height: 430px; }
.cc-acts { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.clb-cmts { margin-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 12px; }
.clb-cmt-title { font-weight: 600; font-size: .92rem; color: #eaf3f9; margin-bottom: 4px; }
.clb-cmt-empty { color: #9db8c9; }
.cmt-row { margin: 10px 0; }
.cmt-body { color: #eaf3f9; font-size: .92rem; margin: 2px 0 0 33px; line-height: 1.45; word-break: break-word; }
.cmt-acts { margin-left: 33px; }
.cmt-acts .cc-act { color: #9db8c9; padding: 2px 4px; }
.clb-cmt-form { display: flex; gap: 8px; margin-top: 12px; }
.clb-cmt-form input { flex: 1; padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #eaf3f9; font-size: .92rem; }
.clb-cmt-form button { padding: 10px 16px; border-radius: 999px; border: none; background: #2f9e63; color: #fff; font-weight: 600; font-size: .9rem; }

/* z208: comment/like icons bigger (Eric circled them - too small on a
   full-width card); count text scales with the button. */
.like-btn { font-size: 1.32rem; padding: 8px 10px; line-height: 1; }
.cc-acts { gap: 6px; }

/* z209: the catch viewer follows the app theme (Eric: light mode showed a
   dark viewer). Light values are the base now; the original dark styling
   is kept under the dark-theme selector. Distance in the viewer meta now
   honours the units setting too (was hard-coded km). */
.clb { background: var(--bg); }
.clb-x { background: rgba(11, 42, 74, .08); color: var(--navy); }
.clb-img { background: #dfe9f0; }
.clb-body { color: var(--ink); }
.clb-body .cc-name { color: var(--navy); }
.clb-body .cc-time, .clb-body .cc-meta { color: var(--muted); }
.clb-cap .cc-size { color: var(--muted); }
.clb-actions .spot-chip { background: rgba(11, 42, 74, .06); color: var(--navy); border-color: var(--line); }
.clb-actions .catch-area { color: var(--muted); }
.clb-actions .cc-act, .clb-actions .like-btn { color: var(--muted); }
.clb-actions .like-btn.on { color: #e0245e; }
.clb-cmts { border-top-color: var(--line); }
.clb-cmt-title { color: var(--navy); }
.clb-cmt-empty { color: var(--muted); }
.cmt-body { color: var(--ink); }
.cmt-acts .cc-act { color: var(--muted); }
.clb-cmt-form input { border-color: var(--line); background: var(--card); color: var(--ink); }
html[data-theme="dark"] .clb { background: #051626; }
html[data-theme="dark"] .clb-x { background: rgba(255, 255, 255, .14); color: #fff; }
html[data-theme="dark"] .clb-img { background: #000; }
html[data-theme="dark"] .clb-body { color: #eaf3f9; }
html[data-theme="dark"] .clb-body .cc-name { color: #eaf3f9; }
html[data-theme="dark"] .clb-body .cc-time, html[data-theme="dark"] .clb-body .cc-meta { color: #9db8c9; }
html[data-theme="dark"] .clb-cap .cc-size { color: #9db8c9; }
html[data-theme="dark"] .clb-actions .spot-chip { background: rgba(255, 255, 255, .12); color: #eaf3f9; border-color: transparent; }
html[data-theme="dark"] .clb-actions .catch-area { color: #9db8c9; }
html[data-theme="dark"] .clb-actions .cc-act, html[data-theme="dark"] .clb-actions .like-btn { color: #cfe2ee; }
html[data-theme="dark"] .clb-actions .like-btn.on { color: #ff5c8a; }
html[data-theme="dark"] .clb-cmts { border-top-color: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .clb-cmt-title { color: #eaf3f9; }
html[data-theme="dark"] .clb-cmt-empty { color: #9db8c9; }
html[data-theme="dark"] .cmt-body { color: #eaf3f9; }
html[data-theme="dark"] .cmt-acts .cc-act { color: #9db8c9; }
html[data-theme="dark"] .clb-cmt-form input { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #eaf3f9; }

/* z210: catch cards get the app's card language (Eric: the plain white
   square looked pasted-on) - glass surface, border, radius, soft shadow,
   inner padding so head/photo/caption sit inside the card like the Home
   wall cards. Applies to the photo feed and the demo video grid alike. */
.catch-card { background: var(--card); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 6px 18px rgba(11, 42, 74, .10); padding: 10px; }
#catch-feed .catch-card, #catch-grid .catch-card { background: var(--card); }

/* z211: the wall section header becomes a proper header band (Eric circled
   it - title + Edit floated bare on the background). Same card language as
   the wall rows under it; Edit turns into a filled pill. */
.wall-head { background: var(--card); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 4px 14px rgba(11, 42, 74, .07); padding: 6px 6px 6px 14px; margin: 14px 0 8px; align-items: center; }
.wall-head .mini-title { margin: 0; font-size: 1.02rem; }
.wall-head #wall-edit { background: #0b2a4a; color: #fff; border: none; border-radius: 999px; padding: 8px 18px; font-weight: 600; font-size: .88rem; }
html[data-theme="dark"] .wall-head #wall-edit { background: #dceefb; color: #0b2a4a; }

/* z212: the spot action row leaves the page flow (Eric: the Private/Delete
   buttons sat there permanently) and becomes compact glass pills floating
   on the map's bottom-left, level with the search/locate stack. One-tap
   toggle/delete behaviour unchanged; curated spots never show it. */
.spot-actions { position: absolute; left: 10px; bottom: 86px; z-index: 1002; display: flex; gap: 8px; margin: 0; }
.spot-actions .btn-small { flex: none; border-radius: 999px; padding: 8px 13px; font-size: .82rem; font-weight: 600; background: rgba(250, 252, 253, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(11, 42, 74, .16); box-shadow: 0 6px 18px rgba(6, 32, 51, .25); color: #0b2a4a; }
.spot-actions .btn-small.danger { color: #b3402f; border-color: rgba(179, 64, 47, .35); }

/* z214: spot actions become icon buttons in the map top bar, left of the
   favorite star (Eric: the floating pills blocked the map). Same dark
   glass as the star button; labels live in the tooltip/title. */
.spot-actions { position: static; display: flex; gap: 6px; margin: 0; }
.spot-actions .btn-small { flex: none; width: 46px; height: 46px; border-radius: 12px; padding: 0; font-size: 1.08rem; line-height: 1; background: rgba(9, 24, 38, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 0; box-shadow: 0 4px 18px rgba(6, 32, 51, .35); color: #fff; display: flex; align-items: center; justify-content: center; }

/* z215: the time + coordinates leave the top bar (Eric: they crowded the
   spot name) and ride as a small centered pill at the map's bottom centre;
   the three top-bar icons shrink a step (46 -> 38px). */
.map-meta { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 1001; background: rgba(9, 24, 38, .72); color: #e8f1f7; font-size: .72rem; font-weight: 600; letter-spacing: .01em; padding: 5px 11px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px rgba(6, 32, 51, .25); }
.map-spot-row { gap: 5px; }
.fav-star { width: 38px; }
.fav-star svg { width: 17px; height: 17px; }
.spot-actions { gap: 5px; }
.spot-actions .btn-small { width: 38px; height: 38px; border-radius: 8px; font-size: .95rem; }

/* z216: attribution moves to the bottom-left corner (Eric), which also
   lifts the zoom control a step above it. Attribution stays - Esri's
   licence requires it - just slimmer on the left. */
#map .leaflet-control-attribution { margin: 0 0 10px 10px; max-width: 45%; }
#map .leaflet-control-zoom { margin-bottom: 14px; }

/* z217: the top-bar Delete button becomes a Home button (Eric: deletion
   moves into the spot picker, where it cannot be fat-fingered). The name
   in the bar is now a button opening a spot sheet; own spots carry a
   trash icon there, shown only while picking. */
.ctx-place-btn { font-family: inherit; text-align: left; }
.spot-sheet { position: fixed; inset: 0; z-index: 1005; background: rgba(4, 20, 32, .45); display: flex; align-items: flex-end; }
.spot-sheet-card { background: #f2f7fa; width: 100%; max-height: 64vh; overflow-y: auto; border-radius: 12px 12px 0 0; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(6, 32, 51, .3); }
html[data-theme="dark"] .spot-sheet-card { background: #0c1e2e; }
.spot-sheet-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--navy); font-size: 1rem; padding: 4px 0 8px; }
#spot-sheet-x { width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(11, 42, 74, .07); color: var(--navy); font-size: .95rem; }
.ss-row { display: flex; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ss-row:last-child { border-bottom: none; }
.ss-row.cur .ss-name { color: var(--teal); }
.ss-name { flex: 1; font-weight: 600; color: var(--ink); font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-ren { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: #71899b; display: inline-flex; align-items: center; justify-content: center; margin-right: 6px; }
.ss-del { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: #71899b; display: inline-flex; align-items: center; justify-content: center; }

/* z218: Edit pill softens to light glass (Eric: the solid navy was too
   heavy); the Home button's added state trades bright green for the deep
   sea green of the dark verdict trio. */
.wall-head #wall-edit { background: rgba(255, 255, 255, .78); color: #0b2a4a; border: 1px solid rgba(11, 42, 74, .16); }
html[data-theme="dark"] .wall-head #wall-edit { background: rgba(220, 238, 251, .14); color: #dceefb; border: 1px solid rgba(220, 238, 251, .25); }

/* z219: hide button on recommended rows in the spot sheet + the Settings
   restore list for hidden spots. */
.ss-hide { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: #5f7382; font-size: 1rem; }
.hidden-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.hidden-row:last-child { border-bottom: none; }
.hidden-name { flex: 1; font-weight: 600; }
.hidden-restore { flex: none; border: 1px solid rgba(11, 42, 74, .2); background: rgba(255, 255, 255, .6); color: #0b2a4a; border-radius: 999px; padding: 6px 14px; font-weight: 600; }
html[data-theme="dark"] .hidden-restore { background: rgba(220, 238, 251, .12); color: #dceefb; border-color: rgba(220, 238, 251, .25); }

/* z223: shop cards join the catches cards' surface (Eric: the pure-white
   shop cards should match the uploaded catch cards). Real --card colour,
   same radius and shadow, and no backdrop blur lightening them. */
.shop-item { background: var(--card); border-radius: 9px; box-shadow: 0 6px 18px rgba(11, 42, 74, .10); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* z225: Eric — swap the two round map buttons (locate on top, search
   below) and put more air between them. */
.map-tools { gap: 16px; }
.map-tools #locate-btn { order: -1; }

/* z226: a little more air under the zoom control (Eric asked again). */
#map .leaflet-control-zoom { margin-bottom: 22px; }

/* z235/z236 (Eric): rounded capsule pennant body; the z235 tail ribbons were tried, then cut at his word. */
.wb-flag { clip-path: none; border-radius: 11px; }


/* z237 (Eric): ribbons return as THE direction cue at the pennant tails
   (the z231 pin rays are deleted); three streamers fan out downwind and
   flutter at their own tempos. */
.wb-rib { position: absolute; right: -19px; width: 23px; height: 3.5px; border-radius: 2px; background: inherit; opacity: .85; transform-origin: 0 50%; pointer-events: none; }
.wb-rib.r1 { top: 3px; --br: -14deg; }
.wb-rib.r2 { top: 9.25px; --br: 0deg; }
.wb-rib.r3 { top: 15.5px; --br: 14deg; }
.wb-rib { transform: rotate(var(--br)); }
@keyframes ribflutter {
  from { transform: rotate(calc(var(--br) - var(--amp, 7deg))); }
  to { transform: rotate(calc(var(--br) + var(--amp, 7deg))); }
}
/* z304 (Eric): ribbon segments chain off the ribbon tip, each swinging
   wider and later than the one before - the phase lag down the chain is
   what makes it read as a traveling wave in cloth. */
.wb-seg { position: absolute; left: 100%; top: 0; height: 100%; border-radius: 2px; background: inherit; transform-origin: 0 50%; pointer-events: none; }
.wb-seg.s2 { width: 58%; }
.wb-seg.s3 { width: 52%; }
@keyframes segwave {
  from { transform: rotate(calc(var(--amp, 6deg) * -1)); }
  to { transform: rotate(var(--amp, 6deg)); }
}
/* z304: the pennant body itself flexes gently (skew along its own axis,
   keeping the downwind rotation from --fdeg) at the ribbons' tempo. */
@keyframes flagflex {
  from { transform: rotate(var(--fdeg, 0deg)) skewY(-1.6deg); }
  to { transform: rotate(var(--fdeg, 0deg)) skewY(1.6deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .wb-seg { animation: segwave 1s ease-in-out infinite alternate; }
  .wb-flag.waving { animation: flagflex var(--fdur, 2s) ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: no-preference) {
  .wb-rib.r1 { animation: ribflutter 1.9s ease-in-out -0.2s infinite alternate; }
  .wb-rib.r2 { animation: ribflutter 2.3s ease-in-out -0.6s infinite alternate; }
  .wb-rib.r3 { animation: ribflutter 2.1s ease-in-out -0.4s infinite alternate; }
}

/* z241 (Eric): the two flags speak differently - wind gets ribbons, the
   WAVE flag gets its pointed tail back, aiming where the waves travel. */
.wb-flag.wave { clip-path: polygon(0 0, 84% 0, 100% 30%, 100% 70%, 84% 100%, 0 100%); justify-content: center; padding-left: 2px; padding-right: 13%; }

/* z243: the star confirms itself with a pulse when a spot lands on Home. */
@keyframes starPulse { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }
.fav-star.pulse { animation: starPulse .45s ease; }

/* z244 (Eric): both flags, their lettering and the ribbons one size smaller -
   the cluster felt oversized against the map. */
.wb-flag { width: 66px; height: 19px; top: -10px; transform-origin: -2px 10px; padding-left: 8px; font-size: .65rem; border-radius: 10px; }
.wb-flag.wave { width: 83px; height: 19px; top: -10px; transform-origin: -2px 10px; font-size: .65rem; }
.wb-rib { right: -13px; width: 16px; height: 2.5px; }
.wb-rib.r1 { top: 1.5px; }
.wb-rib.r2 { top: 8px; }
.wb-rib.r3 { top: 15px; }

/* z245: Tides header actions - calendar steps one slot left, share sits at
   the far right; both reuse the .cal-btn shell so they read as a pair. */
.ctx-actions { display: flex; gap: 8px; flex: 0 0 auto; }

/* z248: wall drag-reorder grip (Edit mode) + the lifted card while dragging. */
.wall-card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.wall-grip { display: flex; align-items: center; justify-content: center; align-self: stretch; flex: 0 0 34px; color: #71899b; cursor: grab; touch-action: none; border-radius: 8px; }
.wall-grip:active { cursor: grabbing; }
.wall-card.dragging { position: relative; z-index: 6; box-shadow: 0 14px 30px rgba(4, 24, 40, .35); opacity: .97; animation: none; }

/* z251 (Eric): the Forecast combo card's share action is a small icon in
   the card's top-right corner, not a pill at the bottom. */
#combo-card { position: relative; }
.combo-share-ico { position: absolute; top: 6px; right: 8px; z-index: 5; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.72); border: 1px solid rgba(11,42,74,.14); color: #0b2a4a; backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); cursor: pointer; box-shadow: 0 4px 14px rgba(4,24,40,.18); }
html[data-theme="dark"] .combo-share-ico { background: rgba(255,255,255,.10); color: #cfe3f2; border-color: rgba(255,255,255,.16); box-shadow: none; }

/* z254 (Eric): Sea state - the headline value rides on the title row
   (title left, value right), so the card is slimmer and balanced. */
.sea-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sea-head .mini-title { margin: 0; }
.sea-head .sea-big { font-size: 1.35rem; margin: 0; white-space: nowrap; }
.sea-head .sea-big small { font-size: .8rem; margin-left: 6px; }

/* z270 (Eric): tab bar more transparent in BOTH themes - thinner colour
   wash over the existing blur(20px) saturate(180%) frosted glass. */
.tabbar { background: rgba(248,251,253,.55); }
.tabbar button.active { background: rgba(11,42,74,.07); }
html[data-theme="dark"] .tabbar { background: rgba(28,46,58,.55); }
html[data-theme="dark"] .tabbar button.active { background: rgba(124,196,255,.13); }

/* z273 (Eric, Robinhood reference video): the active-tab highlight is a
   single capsule that GLIDES between tabs, stretching like liquid while
   it travels; the tapped tab's icon pops with a spring. The per-button
   active backgrounds are retired (transparent) in favour of the glide. */
#tab-glide { position: absolute; border-radius: 20px; background: rgba(11,42,74,.07); pointer-events: none; z-index: 0; }
html[data-theme="dark"] #tab-glide { background: rgba(124,196,255,.13); }
.tabbar button { position: relative; z-index: 1; }
.tabbar button.active { background: transparent; }
html[data-theme="dark"] .tabbar button.active { background: transparent; }
@keyframes tabPop { 0% { transform: scale(1); } 35% { transform: scale(.78); } 60% { transform: scale(1.16); } 80% { transform: scale(.96); } 100% { transform: scale(1); } }
.tabbar button.pop .tab-ico { animation: tabPop .48s cubic-bezier(.3,1.3,.4,1) both; }
@media (prefers-reduced-motion: reduce) { .tabbar button.pop .tab-ico { animation: none; } }

/* z274 (Eric, Windy.app reference): (1) cards become same-hue translucent
   washes - separation by a half-step of lightness, borders fade, shadows
   soften, radius up a notch; (2) the page background gains a soft glow
   from the top so cards float over a scene, not a flat wall; (3) the
   info-screen inset box inside the merged card is dissolved - its stats
   sit straight on the card, divided by hairlines. Verdict colours and
   solid overlay sheets are deliberately untouched. */
:root { --card: rgba(240,246,251,.68); }
html[data-theme="dark"] { --card: rgba(36,60,73,.93); --line: #2c424e; }
.card, .wall-card { background: var(--card); }
html[data-theme="dark"] .card, html[data-theme="dark"] .wall-card { background: var(--card); }
.card, .wall-card, .shop-item, .catch-card, .wall-head { border-color: rgba(11,42,74,.10); box-shadow: 0 2px 10px rgba(10,40,70,.08); border-radius: 9px; }
html[data-theme="dark"] .card, html[data-theme="dark"] .wall-card, html[data-theme="dark"] .shop-item, html[data-theme="dark"] .catch-card, html[data-theme="dark"] .wall-head { border-color: rgba(255,255,255,.09); box-shadow: 0 2px 10px rgba(0,0,0,.28); }
body { background-image: radial-gradient(130% 60% at 50% -12%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 55%), linear-gradient(172deg, #a9cbe4 0%, #c3d9e6 42%, #c9d9e8 78%, #cfdfec 100%); background-attachment: fixed; }
html[data-theme="dark"] body { background-image: radial-gradient(130% 60% at 50% -12%, rgba(110,140,155,.22) 0%, rgba(110,140,155,0) 55%), linear-gradient(172deg, #1d3545 0%, #1a2f3d 55%, #162833 100%); background-attachment: fixed; }
#view-spots .merged-card { -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
.info-screen { background: transparent; border-color: transparent; box-shadow: none; }
.info-screen #combo-read { color: var(--navy); }
/* z274b: the wall cards and the Forecast info-screen take their surfaces
   from ID-scoped rules, so the z274 washes are restated at that weight. */
#wall .wall-card { background: var(--card); border-color: rgba(11,42,74,.10); border-radius: 9px; box-shadow: 0 2px 10px rgba(10,40,70,.08); }
html[data-theme="dark"] #wall .wall-card { background: var(--card); border-color: rgba(255,255,255,.09); box-shadow: 0 2px 10px rgba(0,0,0,.28); }
#view-spots .info-screen { background: transparent; border-color: transparent; box-shadow: none; }
html:not([data-theme="dark"]) #view-spots .info-screen { background: transparent; border-color: transparent; }
html:not([data-theme="dark"]) #wall .wall-card { background: var(--card); border-color: rgba(11,42,74,.10); box-shadow: 0 2px 10px rgba(10,40,70,.08); }

.acct-del { color: #c0392b; margin-left: 8px; }
html[data-theme="dark"] .acct-del { color: #e08a8a; }

/* z279: first-run 3-step setup (dots, chips, preset cards) */
.ob-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ob-dots { display: flex; gap: 6px; }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(120, 150, 175, .45); }
.ob-dot.on { background: #1769b2; }
html[data-theme="dark"] .ob-dot.on { background: #7cc4ff; }
.ob-skipall { background: none; border: none; color: #5b7a90; font-size: .85rem; padding: 4px 2px; cursor: pointer; }
html[data-theme="dark"] .ob-skipall { color: #9db8c9; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.ob-chip { border: 1px solid rgba(120, 150, 175, .45); background: transparent; color: inherit; border-radius: 999px; padding: 7px 13px; font-size: .9rem; cursor: pointer; }
.ob-chip.on { background: #0b2a4a; color: #fff; border-color: #0b2a4a; }
html[data-theme="dark"] .ob-chip.on { background: #dceefb; color: #0b2a4a; border-color: #dceefb; }
.ob-presets { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ob-preset { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid rgba(120, 150, 175, .45); background: transparent; color: inherit; border-radius: 12px; padding: 10px 14px; font-size: .95rem; cursor: pointer; text-align: left; }
.ob-preset span { opacity: .75; font-size: .85rem; }
.ob-preset.on { border-color: #1769b2; box-shadow: inset 0 0 0 1px #1769b2; }
html[data-theme="dark"] .ob-preset.on { border-color: #7cc4ff; box-shadow: inset 0 0 0 1px #7cc4ff; }

/* z281 (Eric): hide the white scroll line under horizontal scrollers -
   it shows while sliding the day strip and serves no purpose. */
.days, .table-card, .chips { scrollbar-width: none; }
.days::-webkit-scrollbar, .table-card::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; }

/* z284 native safe-area: sticky heads must clear the status bar / Dynamic Island
   in the edge-to-edge native shell (env inset is 0 in regular browsers, so no
   change there). */
.ctx { top: env(safe-area-inset-top, 0px); }
.sticky-head { top: env(safe-area-inset-top, 0px); }
#view-spots .spots-sticky-head { top: calc(8px + env(safe-area-inset-top, 0px)); }

/* z284: demote Delete account - it sat as a co-equal pill beside Sign out and
   was too easy to mis-tap. Now a quiet small text link on its own line below
   (still plainly visible in the Account card; the double-confirm is unchanged). */
#acct-delete.acct-del { display: block; margin: 14px 0 0 2px; padding: 4px 2px; background: none; border: none; box-shadow: none; font-size: .8rem; font-weight: 500; color: rgba(179, 64, 47, .72); text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="dark"] #acct-delete.acct-del { background: none; color: rgba(224, 122, 110, .75); }

/* z284: preset avatars + fishing level (account card) and level chip on catch cards */
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 7px 0 2px; }
.preset-btn { width: 44px; height: 44px; border-radius: 50%; padding: 0; border: 2px solid transparent; background: none; overflow: hidden; cursor: pointer; flex: 0 0 auto; }
.preset-btn img { width: 100%; height: 100%; display: block; }
.preset-btn.sel { border-color: var(--teal); }
.preset-btn.up { display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(127, 160, 184, .18); border: 1.5px dashed rgba(127, 160, 184, .45); }
.lvl-chip { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .65); color: var(--ink); font-size: .82rem; cursor: pointer; }
html[data-theme="dark"] .lvl-chip { background: rgba(18, 36, 48, .66); color: #d7e5ef; }
.lvl-chip.sel { background: var(--teal); border-color: var(--teal); color: #fff; }
.cc-lvl { font-size: .68rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: rgba(20, 112, 126, .18); color: #0e5a66; margin-left: 2px; white-space: nowrap; }
html[data-theme="dark"] .cc-lvl { background: rgba(46, 143, 160, .28); color: #a8d8de; }

/* z285: fishing level is a collapsed picker row - outside shows only the chosen value */
.acct-pick-head { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px; padding: 9px 2px; background: none; border: none; border-top: 1px solid rgba(127, 160, 184, .18); color: inherit; font-size: .95rem; cursor: pointer; text-align: left; }
.acct-pick-head #acct-level-label { font-weight: 600; }
.acct-pick-val { margin-left: auto; color: var(--muted); font-size: .9rem; }
html[data-theme="dark"] .acct-pick-val { color: #9db8c9; }
.acct-pick-chev { color: var(--muted); font-size: 1.05rem; }

/* z286: account card is identity only - level lives in the menu card, sign out
   gets its own full-width card, delete account sits quietly at the very bottom */
.signout-card { padding: 4px; }
.signout-btn { width: 100%; padding: 11px; background: none; border: none; font-size: .95rem; font-weight: 600; color: #14707e; cursor: pointer; }
html[data-theme="dark"] .signout-btn { color: #7fd0e0; }
.del-wrap { text-align: center; margin: 16px 0 2px; }
#acct-delete.acct-del { display: inline-block; margin: 0; }

/* z290: level icon lives big beside the identity block; the level row below is text only */
.acct-lvl-badge { margin-left: auto; align-self: center; font-size: 46px; line-height: 1; padding-left: 10px; }

/* z292: tab bar press-bounce pivots from the bottom edge */
.tabbar { transform-origin: 50% 100%; }

/* z294: page-title heads - big icon tile + larger, bolder title */
.view-head-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vtitle { font-size: 1.38rem; font-weight: 700; letter-spacing: .2px; margin: 0; color: var(--navy); }
html[data-theme="dark"] .vtitle { color: #dcecf7; }
.vtitle-ico { flex: 0 0 auto; font-size: 40px; line-height: 1; }
#view-shop .view-head-l { margin-bottom: 4px; }

/* z297: shop head - bigger gold cart, wider gap before the title */
.shop-head { gap: 20px; }
.vtitle-cart { color: #e89b1c; display: flex; }
.vtitle-cart svg { width: 54px; height: 54px; }
html[data-theme="dark"] .vtitle-cart { color: #ffc44d; }

/* z298: shop header + intro live in one card, same surface as the product cards */
.shop-head-card { padding: 16px; margin-bottom: 12px; }
.shop-head-card .shop-head { margin-bottom: 8px; }
.shop-intro { font-size: .93rem; line-height: 1.55; margin: 0; }

/* z299: catches header gets the same card treatment as the shop header */
.catch-head-card { padding: 16px; margin-bottom: 12px; }
.catch-head-card .row-between { margin: 0; }
/* z305 (Eric): AI quick entry atop Catches - one tap to a photo, then the
   AI fills species + size. z307 (Eric): merged INTO the head card as a
   hairline-separated action row - one card, two actions, feed starts
   higher. */
.ai-entry { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 2px 0; margin-top: 12px; border: none; border-top: 1px solid rgba(127, 160, 190, .28); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ai-entry:active { transform: scale(.99); }
.ai-entry-ico { font-size: 28px; line-height: 1; }
.ai-entry-tx { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ai-entry-tx b { font-size: 1rem; font-weight: 600; }
.ai-entry-tx small { font-size: .78rem; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-entry-go { font-size: 1.35rem; opacity: .45; }

/* z317 (Eric): the z316 solid slab hid the verdict colour, and the
   colour IS the weather information - so the selected day keeps its
   colour and takes a bold inset ring instead: navy in light mode,
   soft white in dark, over the usual dimensional stack. (The z280
   spotlight blocks are deleted above: retired for good.) */
.day.active {
  box-shadow: inset 0 0 0 3px var(--navy), inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 3px rgba(0, 0, 0, .15), 0 2px 5px rgba(11, 42, 74, .25);
}
html[data-theme="dark"] .day.active {
  /* z318 (Eric): the soft-white ring read as plain white - use the app's
     dark accent sky blue instead, clearly blue but not harsh. */
  box-shadow: inset 0 0 0 3px #7cc4ff, inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 3px rgba(0, 0, 0, .15), 0 2px 5px rgba(0, 0, 0, .4);
}

/* z320: social sign-in row (Apple black pill + Google GIS button) above
   the email-code form in the logged-out account card. */
#social-login { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 4px 0 12px; }
.social-btn.apple { display: flex; align-items: center; justify-content: center; gap: 8px; background: #000; color: #fff; border: none; border-radius: 999px; height: 44px; font-size: 1rem; font-weight: 600; cursor: pointer; }
#btn-google { display: flex; justify-content: center; min-height: 44px; }
.social-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .82rem; }
.social-or::before, .social-or::after { content: ""; flex: 1; border-top: 1px solid rgba(127, 160, 190, .35); }

/* z323 (Eric could not find photo upload): a full-width LABELLED button
   under the preset grid replaces the cryptic camera tile. */
.preset-upload-btn { display: block; width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed rgba(127, 160, 190, .55); background: transparent; color: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }

/* z324 (Eric): the Catches head shark and the AI-entry camera should be
   the same size, both a touch bigger (was 40px vs 28px). */
.vtitle-ico { font-size: 42px; }
.ai-entry-ico { font-size: 42px; }

/* z325: GPS location in the catch form + map in the catch viewer. */
.cf-gps-btn { display: block; width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed rgba(127, 160, 190, .55); background: transparent; color: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
.cf-map { position: relative; z-index: 0; height: 170px; border-radius: 12px; margin-top: 8px; overflow: hidden; }
.clb-map { position: relative; z-index: 0; height: 190px; border-radius: 12px; margin: 10px 0 2px; overflow: hidden; }

/* z326 (Eric's layout): Catches head card = big net-lift photo on the
   left, camera icon button + AI text on the right. */
.catch-promo { display: flex; align-items: stretch; gap: 14px; }
.catch-promo-img { width: 128px; min-height: 106px; object-fit: cover; border-radius: 9px; flex: 0 0 auto; }
.catch-promo-act { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: none; border: none; font: inherit; color: inherit; cursor: pointer; padding: 4px 0; }
.catch-promo-act:active { transform: scale(.99); }
.catch-promo-ico { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(47, 127, 208, .14); color: #1d5f9e; }
html[data-theme="dark"] .catch-promo-ico { background: rgba(124, 196, 255, .16); color: #7cc4ff; }
.catch-promo-act .ai-entry-tx { align-items: center; text-align: center; }

/* z327 (Eric): light-mode secondary text sat too close to the pale
   card colour - deepen the muted tone (light only; dark is settled)
   and stop fading whole activity rows to 55%. */
html:not([data-theme="dark"]) { --muted: #42617a; }
html:not([data-theme="dark"]) .wx-cell span,
html:not([data-theme="dark"]) .wx-cell i,
html:not([data-theme="dark"]) .sea-row span { color: #42617a; }
html:not([data-theme="dark"]) .sea-row.act-bad { opacity: .88; }

/* z328 (Eric's pick): the mascot cut-outs sit directly on the card -
   no photo frame, no background of their own. */
.catch-promo-img { width: 118px; min-height: 118px; object-fit: contain; border-radius: 0; }
.shop-promo { display: flex; align-items: center; gap: 14px; }
.shop-promo-img { width: 148px; height: 106px; object-fit: contain; flex: 0 0 auto; }
.shop-promo-tx { flex: 1; min-width: 0; }
.shop-promo-tx .shop-intro { margin: 6px 0 0; }

/* z329 (Eric): mascot bigger, camera a larger rounded SQUARE, text re-laid. */
.catch-promo-img { width: 148px; min-height: 148px; }
.catch-promo-ico { width: 74px; height: 74px; border-radius: 12px; }
.catch-promo-ico svg { width: 42px; height: 42px; }
.catch-promo-act .ai-entry-tx { margin-top: 13px; gap: 5px; }
#ai-entry-title { font-size: 1.14rem; }
#ai-entry-sub { line-height: 1.4; max-width: 200px; }
.catch-promo-act { min-width: 0; }
.catch-promo-act .ai-entry-tx { width: 100%; min-width: 0; }
#ai-entry-sub { max-width: 100%; }

/* z330 (Eric): Tackle head keeps title + first two sentences only,
   smaller; the merchant line moves to the page foot. */
.shop-promo-tx .shop-intro { font-size: .86rem; line-height: 1.45; }
.shop-foot { text-align: center; margin-top: 16px; font-size: .82rem; }

/* z331 (Eric): the camera tile reads as AI at a glance - gold sparkles
   plus an AI pill badge; the caption becomes title + keyword line. */
.catch-promo-ico { position: relative; }
.ai-spark { position: absolute; color: #e8a33d; pointer-events: none; }
.ai-spark.s1 { width: 21px; height: 21px; top: -9px; left: -9px; }
.ai-spark.s2 { width: 13px; height: 13px; top: -5px; right: -6px; }
.ai-badge { position: absolute; right: -10px; bottom: -8px; background: linear-gradient(135deg, #f5b93f, #e8890c); color: #3a2400; font-size: .68rem; font-weight: 700; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; box-shadow: 0 2px 7px rgba(6, 32, 56, .35); pointer-events: none; }
#ai-entry-sub { white-space: normal; overflow: visible; text-overflow: clip; font-size: .8rem; font-weight: 600; letter-spacing: .02em; }

/* z332 (Eric's final pick): his own lens icon image fills the tile. */
.catch-promo-ico { background: none; overflow: hidden; }
.catch-ai-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* z333 (Eric): icon enlarged a touch, spacing rebalanced. */
.catch-promo { gap: 18px; }
.catch-promo-ico { width: 82px; height: 82px; }
.catch-promo-act .ai-entry-tx { margin-top: 16px; }

/* z334 (Eric): icon sits closer to the caption. */
.catch-promo-act .ai-entry-tx { margin-top: 7px; }

/* z335 (Eric): icon smaller, tighter to the caption. */
.catch-promo-ico { width: 68px; height: 68px; }
.catch-promo-act .ai-entry-tx { margin-top: 4px; }

/* z337 (Eric): icon narrower than the caption lines under it. */
.catch-promo-ico { width: 58px; height: 58px; border-radius: 12px; }

/* z338 (Eric): the whole right block sits lower to balance the card. */
.catch-promo-act { transform: translateY(12px); }

/* z339 (Eric): a touch lower again. */
.catch-promo-act { transform: translateY(22px); }

/* z340 (Eric): verdict pill moves under the score ring; hero small print grows. */
.hero-right { display: flex; flex-direction: column; align-items: flex-end; flex: none; margin: 14px 14px 0 0; }
.hero-card .hero-right .ring-svg { margin: 0; }
.hero-right .hero-pill { margin-top: 8px; }
.hero-meta { font-size: .95rem; }
.hero-meta.lg { font-size: 1.06rem; }
.hero-hint { font-size: .9rem; opacity: .9; }

/* z341: the right column needs its own stacking layer, or the pill hides under the hero shade (the ring alone had z-index 4; the pill did not). */
.hero-right { position: relative; z-index: 4; }

/* z342 (Eric): analysis label to the card's bottom-right corner; name on top; pill back under the name. */
.hero-label-br { position: absolute; right: 14px; bottom: 27px; z-index: 4; margin: 0; text-align: right; }

/* z343 (Eric): hero back to the original — label on top, original small-print sizes. */
.hero-meta { font-size: .85rem; }
.hero-meta.lg { font-size: .95rem; }
.hero-hint { font-size: .78rem; opacity: .78; }

/* z349 (Eric): hero weather + activity lines a notch smaller, so the activity
   line fits on one line instead of wrapping to two. */
.hero-meta.lg { font-size: .86rem; }

/* z351: opt-in AI identify button (mirrors the GPS button's dashed style) */
.cf-ai-btn { display: block; width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed rgba(127, 190, 160, .65); background: transparent; color: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
.cf-ai-btn[disabled] { opacity: .55; cursor: default; }

/* z352: back-to-shop pill (only for visitors arriving from sfbaytackle.com) */
#back-shop { position: fixed; right: max(12px, calc(50% - 368px)); bottom: calc(98px + env(safe-area-inset-bottom)); z-index: 800; padding: 9px 14px; border-radius: 999px; background: rgba(9, 34, 58, .82); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, .22); color: #eaf4fc; font-size: .82rem; font-weight: 600; text-decoration: none; box-shadow: 0 8px 22px rgba(3, 18, 33, .35); }

/* z355 (Eric): wall head — title + gear as one unit; date strip below it,
   structurally mirroring the wall rows so each date sits over its column */
.wall-head2 { margin: 12px 0 2px; }
.wall-title-btn { display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 12px; margin: 0; cursor: pointer; color: var(--navy); font: inherit; text-align: left; }
html[data-theme="dark"] .wall-title-btn { color: #d7e5ef; }
.wall-title-btn .mini-title { margin: 0; }
.wall-title-btn:active { transform: scale(.98); }
.wall-gear { display: inline-flex; opacity: .72; flex: 0 0 auto; }
.wall-done { font-size: .84rem; font-weight: 600; color: var(--teal); white-space: nowrap; }
.wall-dates { display: flex; gap: 10px; padding: 3px 12px 0; }
.wd-spacer { flex: 0 0 27%; }
.wd-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wd { text-align: center; line-height: 1.3; color: var(--muted); }
.wd em { display: block; font-style: normal; font-size: .62rem; font-weight: 600; }
.wd b { display: block; font-size: .72rem; font-weight: 600; color: var(--navy); }
.wd.today em, .wd.today b { color: var(--teal); }
html[data-theme="dark"] .wd b { color: #c8ddef; }
html[data-theme="dark"] .wd.today em, html[data-theme="dark"] .wd.today b { color: #7cc4ff; }
.wall-note { margin: 8px 2px 0; padding: 9px 12px; border-radius: 10px; background: rgba(11, 95, 120, .10); color: var(--navy); font-size: .85rem; text-align: center; }
html[data-theme="dark"] .wall-note { background: rgba(124, 196, 255, .12); color: #d7e5ef; }

/* z356 variant A (Eric comparison trial): the date row becomes a header
   cap fused onto the FIRST wall card - one card, dates on top, verdict
   cells below. Dates are single-line (weekday already lives in the cells). */
#wall .wall-card.has-cap { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; }
.wrowflex { display: flex; align-items: center; gap: 10px; padding: 7px 12px 8px; }
.wcap { display: flex; gap: 10px; padding: 5px 12px 3px; background: rgba(11, 42, 74, .05); border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .wcap { background: rgba(255, 255, 255, .05); }
.wcap .wd b { font-size: .7rem; }

/* z358 (Eric): the cap dates ARE day cells - real .wcell elements with no
   verdict colour, so the dimensional finish (z181 gradient + shadow
   stack), height, radius and today ring are literally the same code as
   the cells below. Only the dark base tone is set (dark cells take
   their colour from verdict classes; a bare cell needs the navy base). */
.wcap { background: transparent; border-bottom: 0; padding: 8px 12px 2px; }
.wcap .wdate { font-size: .72rem; cursor: default; }
html[data-theme="dark"] .wcap .wdate { background: #22445c; color: #bfd4e3; }

/* z359 (Eric): the wall title moves INSIDE the first card's cap - the
   standalone header row is gone. The title + gear occupy the name-column
   zone of the cap; "this week" is dropped from the title. */
.wcap-title { flex: 0 0 27%; display: flex; align-items: center; gap: 4px; background: none; border: 0; padding: 2px 0; margin: 0; cursor: pointer; color: var(--navy); font: inherit; text-align: left; min-width: 0; }
html[data-theme="dark"] .wcap-title { color: #d7e5ef; }
.wcap-title .mini-title { margin: 0; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcap-title:active { transform: scale(.97); }
.wall-lonely { padding: 4px 12px 0; }
.wall-lonely .wcap-title { flex: 0 0 auto; }

/* z361 (Eric): in LIGHT mode the social sign-in bars use the providers'
   official light styles - Apple white (black text/logo, hairline border)
   and Google outline (rendered by GIS with theme "outline" in app.js) -
   instead of two heavy black bars on the pale card. Dark mode keeps the
   black pair unchanged. */
html:not([data-theme="dark"]) .social-btn.apple { background: #fff; color: #000; border: 1px solid rgba(11, 42, 74, .28); }
html:not([data-theme="dark"]) .social-btn.apple svg path { fill: #000; }

/* z362 (Eric): the Catches and Tackle header cards shrink ~30% - same
   layout and proportions, smaller mascots, tighter padding, so the
   content below starts higher. */
.catch-head-card { padding: 12px; }
.catch-promo { gap: 12px; }
.catch-promo-img { width: 104px; min-height: 104px; }
.catch-promo-ico { width: 52px; height: 52px; border-radius: 12px; }
.catch-promo-act .ai-entry-tx { margin-top: 8px; }
#ai-entry-title { font-size: 1.02rem; }
.shop-head-card { padding: 12px; }
.shop-promo { gap: 12px; }
.shop-promo-img { width: 104px; height: 74px; }
/* z362b: the act column's old +22px optical shift was tuned for the tall
   card; at the new size the column fills the row, so the shift pushed
   the sub-line out of the card. Back to a whisper of offset. */
.catch-promo-act { transform: translateY(4px); }

/* z363 (Eric): cards stay at the z362 size, but both mascot images go
   one size up (104 -> 118 wide) - the mascots felt small in the shrunk
   cards. Camera tile unchanged. */
.catch-promo-img { width: 118px; min-height: 118px; }
.shop-promo-img { width: 118px; height: 84px; }

/* z364 (Eric): the small sub-line under AI Fish ID is removed, and the
   camera tile + title close up into a single unit (app-icon style). */
#ai-entry-sub { display: none; }
.catch-promo-act { gap: 6px; }
.catch-promo-act .ai-entry-tx { margin-top: 0; }
/* z364b: the text box still flex-grows to fill the column, which left
   the title top-aligned and the icon+title unit riding high; pin it to
   its content so the unit truly centres. */
.catch-promo-act .ai-entry-tx { flex: 0 0 auto; }

/* z365 (Eric): the AI entry is a single baked LOGO image - the camera
   mark with the wordmark inside the graphic (per language, per theme).
   The old icon tile + HTML title spans are gone. */
.catch-ai-logo { height: 108px; width: auto; display: block; }
.catch-promo-act { gap: 0; }

/* z366 (Eric): left/right balance - the mascot hugs the card's left
   padding while the logo sat centred in its wider column, leaving the
   right side looking inset. Right-align the logo so its edge mirrors
   the mascot's. */
.catch-promo-act { align-items: flex-end; }

/* z371 (Eric picked type option B): elements that rendered bold only from
   the browser default (<b>, <strong>, headings, <th>) drop to 600 too,
   matching the declared-weight remap above. Class rules still win. */
b, strong, th, h1, h2, h3, h4, h5, h6 { font-weight: 600; }

/* z373 (Eric): Sun & Moon card rebuilt - two columns, disc centres on
   one line, section name under each disc, distance strip below. */
#astro-card .a2-cols { display: flex; gap: 12px; }
#astro-card .a2-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#astro-card .a2-div { width: 1px; background: var(--line); flex: none; }
#astro-card .a2-viz { height: 128px; display: flex; align-items: center; justify-content: center; }
#astro-card .a2-viz .sun-dial { width: 126px; height: 126px; }
#astro-card .a2-viz .moon-big { width: 64px; height: 64px; }
#astro-card .a2-name { text-align: center; font-size: 1rem; font-weight: 600; color: var(--navy); margin-top: 2px; }
html[data-theme="dark"] #astro-card .a2-name { color: #c8ddef; }
#astro-card .a2-grow { display: flex; flex-wrap: wrap; gap: 3px 9px; align-items: baseline; padding: 11px 0 0; }
#astro-card .a2-pair { display: inline-flex; gap: 5px; align-items: baseline; white-space: nowrap; flex-wrap: wrap; }
#astro-card .a2-grow span { color: var(--muted); font-size: .8rem; }
#astro-card .a2-grow b { font-weight: 600; font-size: .92rem; }
#astro-card .a2-age { font-size: .78em; font-weight: 400; color: var(--muted); }
#astro-card .a2-arc { margin-top: 2px; display: flex; flex-direction: column; gap: 0; line-height: 1.25; }
#astro-card .a2-arc-rise { font-size: .76rem; color: var(--muted); white-space: nowrap; }
#astro-card .a2-arc-rise b, #astro-card .a2-arc-set b { color: var(--ink); font-weight: 600; }
#astro-card .a2-arc-set { font-size: .76rem; color: var(--muted); text-align: right; }
#astro-card .a2-arc-ends { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); }
#astro-card .moon-path { width: 100%; height: auto; display: block; }
#astro-card .a2-dist { margin-top: 12px; border-radius: 12px; background: rgba(11, 42, 74, .05); text-align: center; padding: 9px 0 7px; }
html[data-theme="dark"] #astro-card .a2-dist { background: rgba(255, 255, 255, .05); }
#astro-card .a2-dist b { display: block; font-size: 1.32rem; font-weight: 600; }
#astro-card .a2-dist span { font-size: .78rem; color: var(--muted); }

/* z373 (Eric): the Alert Standard row is two-line by design - label on
   line one, the wind/gust/wave values full-width on line two - so no
   text-size choice can squeeze it into a wrapped mess. */

/* z372 (Eric): selective text size. html[data-fs] scales only roomy
   content text. Never scaled (fixed layouts / coloured date tiles):
   tab bar, day strip, wall cells, calendar, map flags, combo readout. */
html[data-fs="lg"] #wx-card .wx-temp { font-size: 2.25rem; }
html[data-fs="lg"] #wx-card .wx-cell b { font-size: 1.07rem; }
html[data-fs="lg"] #wx-card .wx-cell span { font-size: .86rem; }
html[data-fs="lg"] #wx-card .mini-title, html[data-fs="lg"] #solunar-card .mini-title, html[data-fs="lg"] #sea-card .mini-title, html[data-fs="lg"] #astro-card .mini-title { font-size: 1.1rem; }
html[data-fs="lg"] #solunar-card .sea-row span, html[data-fs="lg"] #sea-card .sea-row span { font-size: .95rem; width: 86px; }
html[data-fs="lg"] #solunar-card .sea-row b, html[data-fs="lg"] #sea-card .sea-row b { font-size: 1.1rem; }
html[data-fs="lg"] #solunar-card .sea-row em, html[data-fs="lg"] #sea-card .sea-row em { font-size: .95rem; }
html[data-fs="lg"] #sea-card .sea-big { font-size: 1.9rem; }
html[data-fs="lg"] #astro-card .a2-grow b { font-size: 1.02rem; }
html[data-fs="lg"] #astro-card .a2-grow span { font-size: .88rem; }
html[data-fs="lg"] #astro-card .a2-name { font-size: 1.08rem; }
html[data-fs="lg"] #astro-card .a2-dist b { font-size: 1.45rem; }
html[data-fs="lg"] #sea-days .wx-table td { font-size: .95rem; }
html[data-fs="lg"] .mrow-label { font-size: 1.02rem; }
html[data-fs="lg"] .mrow-val { font-size: .9rem; }
html[data-fs="lg"] .opt-row { font-size: 1.02rem; }
html[data-fs="lg"] .catch-cap { font-size: .95rem; }
html[data-fs="lg"] .cc-name { font-size: .9rem; }
html[data-fs="lg"] .cmt-body { font-size: 1.02rem; }
html[data-fs="xl"] #wx-card .wx-temp { font-size: 2.55rem; }
html[data-fs="xl"] #wx-card .wx-cell b { font-size: 1.21rem; }
html[data-fs="xl"] #wx-card .wx-cell span { font-size: .97rem; }
html[data-fs="xl"] #wx-card .mini-title, html[data-fs="xl"] #solunar-card .mini-title, html[data-fs="xl"] #sea-card .mini-title, html[data-fs="xl"] #astro-card .mini-title { font-size: 1.22rem; }
html[data-fs="xl"] #solunar-card .sea-row span, html[data-fs="xl"] #sea-card .sea-row span { font-size: 1.06rem; width: 100px; }
html[data-fs="xl"] #solunar-card .sea-row b, html[data-fs="xl"] #sea-card .sea-row b { font-size: 1.24rem; }
html[data-fs="xl"] #solunar-card .sea-row em, html[data-fs="xl"] #sea-card .sea-row em { font-size: 1.06rem; }
html[data-fs="xl"] #sea-card .sea-big { font-size: 2.15rem; }
html[data-fs="xl"] #astro-card .a2-grow b { font-size: 1.12rem; }
html[data-fs="xl"] #astro-card .a2-grow span { font-size: .96rem; }
html[data-fs="xl"] #astro-card .a2-name { font-size: 1.16rem; }
html[data-fs="xl"] #astro-card .a2-dist b { font-size: 1.58rem; }
html[data-fs="xl"] #sea-days .wx-table td { font-size: 1.05rem; }
html[data-fs="xl"] .mrow-label { font-size: 1.1rem; }
html[data-fs="xl"] .mrow-val { font-size: .98rem; }
html[data-fs="xl"] .opt-row { font-size: 1.1rem; }
html[data-fs="xl"] .catch-cap { font-size: 1.06rem; }
html[data-fs="xl"] .cc-name { font-size: .99rem; }
html[data-fs="xl"] .cmt-body { font-size: 1.14rem; }

/* z390 (Eric, mock C): Home wall letters unified WHITE in both themes with
   a micro shadow, so white on the ochre marginal cells stays readable.
   Wall only - the Forecast day strip and calendar keep their lettering. */
#wall .wcell.good, #wall .wcell.marginal, #wall .wcell.poor { color: #fff; text-shadow: 0 1px 2px rgba(60, 45, 5, .45); }
html[data-theme="dark"] #wall .wcell.good, html[data-theme="dark"] #wall .wcell.marginal, html[data-theme="dark"] #wall .wcell.poor { color: #e9f2ec; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }

/* z391 (Eric): the coloured DATE displays on the Forecast and Tides pages
   follow Home (z390) - unified white letters + micro shadow everywhere. */
.day.good, .day.marginal, .day.poor,
.cal-d.good, .cal-d.marginal, .cal-d.poor,
.sec-v.good, .sec-v.marginal, .sec-v.poor { color: #fff; text-shadow: 0 1px 2px rgba(60, 45, 5, .45); }
html[data-theme="dark"] .day.good, html[data-theme="dark"] .day.marginal, html[data-theme="dark"] .day.poor,
html[data-theme="dark"] .cal-d.good, html[data-theme="dark"] .cal-d.marginal, html[data-theme="dark"] .cal-d.poor,
html[data-theme="dark"] .sec-v.good, html[data-theme="dark"] .sec-v.marginal, html[data-theme="dark"] .sec-v.poor { color: #e9f2ec; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }

/* z395 (Eric, radius option B): card-family radius 14px -> 10px app-wide, readout tiles 19px -> 12px. Capsules/pills/tab bar keep their full rounding. */

/* z396 (Eric): ONE radius formula app-wide - cards 10px, medium surfaces (popups, sheets, banners, icon tiles) 12px, small elements (day buttons, wall cells, inputs 10, icon buttons) 8px. Capsules (tab bar, pills), circles (avatars, map buttons) and the app-icon squircle keep their own rounding. */


/* z398 (Eric): card radius settled at 9px - measured from his Windy.app screenshot (corner arc ~26.8px at 3x = ~8.9pt); cards and readout tiles now share the one 9px tier. */

/* z402 (Eric, 2026-11-10): the date displays on pages 2 and 3 go bold in
   every state, not just when selected - Forecast day strip (.day) and the
   Tides calendar cells (.cal-d) at weight 700 throughout. */
.day, .cal-d { font-weight: 700; }

/* z403 (Eric): weather tape card - sits between the sticky head and the
   combo chart card; hourly weather icons + wind-direction arrows sliding
   on the same 3-day tape as the hour strip (Windy.app reference). */
#wxtape-card { padding: 5px 0 3px; touch-action: none; cursor: grab; }
#wxtape-card:active { cursor: grabbing; }
.wxt-vp { overflow: hidden; }
.wxt-track { width: 300%; will-change: transform; }
.wxt-row { display: flex; }
.wxt-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 42px; border-radius: 6px; }
.wxt-ico { font-size: .95rem; line-height: 1.15; }
.wxt-arr { font-size: .68rem; font-weight: 700; line-height: 1.1; color: #2f7fd0; display: inline-block; }
html[data-theme="dark"] .wxt-arr { color: #7cc4ff; }
.wxt-cell.sel { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgba(38, 69, 95, .35); }
html[data-theme="dark"] .wxt-cell.sel { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgba(255, 255, 255, .35); }

/* z404: the fog emoji renders as a pale rectangular slab at tape size
   (Eric: "why are some of them square blocks?") - fog hours on the weather
   tape draw the classic three-bar fog symbol instead. */
.wxt-fog { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5px; height: 16px; }
.wxt-fog i { display: block; height: 2.5px; border-radius: 2px; background: #aebfd0; }
.wxt-fog i:nth-child(1) { width: 13px; }
.wxt-fog i:nth-child(2) { width: 8px; }
.wxt-fog i:nth-child(3) { width: 13px; }
html[data-theme="light"] .wxt-fog i { background: #5b7a94; }

/* z408 (Eric): weather tape density - icons/arrows render every 2 hours;
   the selected (centre) hour always shows its own, even on an odd hour. */
.wxt-cell.off .wxt-ico, .wxt-cell.off .wxt-arr { visibility: hidden; }
/* z416 (Eric): no centre exception - the tape is strictly 2-hourly, so the
   scrub centre never reveals an extra odd-hour icon. */


/* z411 (Eric): the weather tape is merged INTO the combo chart card, and the
   grey scrub column runs the full height of the merged card - weather row
   included - so the wx tape needs no jumping selection frame of its own. */
#combo-card > #wxtape-card { background: transparent; border: none; box-shadow: none; margin: 0; padding: 0 0 4px; border-radius: 0; position: relative; z-index: 6; }
#combo-col { top: 10px; bottom: 10px; width: calc((100% - 20px) * .0403); margin-left: 0; transform: translateX(-50%); }
.wxt-cell.sel { box-shadow: none; }
html[data-theme="dark"] .wxt-cell.sel { box-shadow: none; }

/* z413 (Eric picked B): ONE dark card colour everywhere - the deep slate of
   the catch cards at 85% opacity - all card surfaces driven by --card so
   the old split (header cards bluer than feed cards) cannot recur. */
html[data-theme="dark"] .card, html[data-theme="dark"] .wall-card, html[data-theme="dark"] .catch-card, html[data-theme="dark"] .shop-item, html[data-theme="dark"] .wall-head { background: var(--card); }

/* z415 (Eric): inside the merged card the weather row is a plain row of the
   card - no glass of its own (the backdrop-filter it inherited as a .card
   double-processed the surface into a blue band), the grey scrub column
   passes OVER it just like it does over the charts, and a hairline
   separates the row from the lanes below. */
#combo-card > #wxtape-card { z-index: 1; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid rgba(11, 42, 74, .10); }
html[data-theme="dark"] #combo-card > #wxtape-card { border-bottom-color: rgba(140, 180, 215, .18); }

/* z417 (Eric): tighten the merged card's top - the weather icons sit closer
   to the card edge; the scrub column's top follows the row. */
#combo-card { padding-top: 5px; }
#combo-col { top: 5px; }
.wxt-cell { justify-content: flex-start; padding-top: 2px; height: 40px; }

/* z421: the winning dark tab-bar rule still carried the old navy fill (the
   z419 remap missed it) and the bar's saturate(180%) backdrop re-blued the
   slate behind it - calm both down to the D2 family. */
html[data-theme="dark"] .tabbar { -webkit-backdrop-filter: blur(20px) saturate(135%); backdrop-filter: blur(20px) saturate(135%); }

/* z422 (Eric): the selected tab reads GREEN - label, icon and pill. */
.tabbar button.active { color: #00a64f; }
#tab-glide { background: rgba(0, 166, 79, .13); }
html[data-theme="dark"] .tabbar button.active { color: #2fe07a; background: rgba(47, 224, 122, .18); }
html[data-theme="dark"] #tab-glide { background: rgba(47, 224, 122, .18); }

/* z423 (Eric, design A): Catches and Tackle headers share one language -
   mascot left at 86px, a 1.32rem title + one short muted line; the Catches
   AI entry is a small wordless icon on the right. */
.catch-head-card, .shop-head-card { padding: 12px 14px; }
.catch-promo { align-items: center; gap: 12px; }
.catch-promo-img { width: 86px; height: 86px; min-height: 0; }
.catch-head-tx { flex: 1; min-width: 0; }
.head-title { font-size: 1.32rem; font-weight: 700; margin: 0; color: var(--ink); }
.head-intro { font-size: .85rem; line-height: 1.45; color: var(--muted); margin: 3px 0 0; }
.catch-ai-btn { flex: none; background: none; border: none; padding: 4px; cursor: pointer; font: inherit; color: inherit; }
.catch-ai-btn:active { transform: scale(.96); }
.catch-ai-logo { height: 46px; width: 46px; object-fit: contain; display: block; }
.shop-promo { align-items: center; gap: 12px; }
.shop-promo-img { width: 86px; height: auto; }
.shop-promo-tx .vtitle { font-size: 1.32rem; }
.shop-promo-tx .shop-intro { font-size: .85rem; margin-top: 3px; }

/* z427 (Eric picked A): date blocks get the gem finish - a vertical
   light-to-deep gradient plus a gloss top edge and a soft drop shadow.
   Applies to the Forecast day strip, the Tides calendar and the Home wall
   cells alike. Selection rings are re-stated WITH the gloss shadows so
   they survive. */
.day, .cal-d, #wall .wcell { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -8px 14px rgba(0,0,0,.16), 0 2px 5px rgba(0,0,0,.22); }
html[data-theme="light"] .day.good, html[data-theme="light"] .cal-d.good, html[data-theme="light"] #wall .wcell.good { background: linear-gradient(180deg, #4cbb62, #33a748 55%, #27853a); }
html[data-theme="light"] .day.marginal, html[data-theme="light"] .cal-d.marginal, html[data-theme="light"] #wall .wcell.marginal { background: linear-gradient(180deg, #e6c34c, #dab12c 55%, #b28f20); }
html[data-theme="light"] .day.poor, html[data-theme="light"] .cal-d.poor, html[data-theme="light"] #wall .wcell.poor { background: linear-gradient(180deg, #d96350, #cb4f3d 55%, #a53e30); }
html[data-theme="dark"] .day.good, html[data-theme="dark"] .cal-d.good, html[data-theme="dark"] #wall .wcell.good { background: linear-gradient(180deg, #45b85e, #309a44 55%, #257a37); }
html[data-theme="dark"] .day.marginal, html[data-theme="dark"] .cal-d.marginal, html[data-theme="dark"] #wall .wcell.marginal { background: linear-gradient(180deg, #e0bc4e, #cca435 55%, #a8872a); }
html[data-theme="dark"] .day.poor, html[data-theme="dark"] .cal-d.poor, html[data-theme="dark"] #wall .wcell.poor { background: linear-gradient(180deg, #d4654f, #c24f3f 55%, #9c3d30); }
.day.active, .cal-d.active { box-shadow: inset 0 0 0 3px var(--navy), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -8px 14px rgba(0,0,0,.16), 0 2px 5px rgba(0,0,0,.22); }
html[data-theme="dark"] .day.active, html[data-theme="dark"] .cal-d.active { box-shadow: inset 0 0 0 3px #cfe3f2, inset 0 1px 0 rgba(255,255,255,.35), inset 0 -8px 14px rgba(0,0,0,.16), 0 2px 5px rgba(0,0,0,.22); }
#wall .wcell.today { box-shadow: inset 0 0 0 2px #fff, inset 0 1px 0 rgba(255,255,255,.35), inset 0 -8px 14px rgba(0,0,0,.16), 0 2px 5px rgba(0,0,0,.22); }
/* z427 (Eric): no jumping selection box on the hour strip - the extended
   grey band marks the centre instead. */
.hs-cell.sel, .strip-bar .hs-cell.sel, html[data-theme="dark"] .strip-bar .hs-cell.sel { box-shadow: none; }
#strip-col { position: absolute; pointer-events: none; z-index: 3; background: linear-gradient(90deg, rgba(38, 69, 95, 0) 0%, rgba(38, 69, 95, .2) 30%, rgba(38, 69, 95, .2) 70%, rgba(38, 69, 95, 0) 100%); }
html[data-theme="dark"] #strip-col { background: linear-gradient(90deg, rgba(175, 200, 215, 0) 0%, rgba(175, 200, 215, .27) 30%, rgba(175, 200, 215, .27) 70%, rgba(175, 200, 215, 0) 100%); }
.merged-card { position: relative; }

/* z428: junction without a seam - the head segment ends exactly at its
   card's bottom edge, and the combo column reaches UP past its card's top
   edge instead; the sticky head (z 500) covers the column's tip wherever
   they overlap, so the two translucent gradients never stack. */
#combo-col { top: -14px; }

/* z429 (Eric): band extension reverted (it spanned two cards and never
   looked right); the column is back inside its own card, and the hour
   strip's selection box returns as a FIXED centre frame the tape slides
   under - no more hopping. The per-cell .sel shadow stays off (z427). */
#combo-col { top: 5px; }
#strip-frame { position: absolute; pointer-events: none; z-index: 3; border: 2px solid #fff; border-radius: 5px; box-shadow: 0 0 0 2px rgba(38, 69, 95, .35); }
html[data-theme="dark"] #strip-frame { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }

/* z434 (Eric picked A): the readout tiles go flat and quiet - the status
   glow halos and the four saturated title colours are what made them feel
   cheap. Flat slate, one neutral title colour, and the status survives as
   a small dot before the title. Light mode gets the same restraint. */
html[data-theme="dark"] .scr-tile, html[data-theme="dark"] .scr-tile.st-good, html[data-theme="dark"] .scr-tile.st-warn, html[data-theme="dark"] .scr-tile.st-bad { background: linear-gradient(180deg, #2c4757, #223947); box-shadow: inset 0 0 0 1px rgba(160, 190, 205, .22), 0 1px 3px rgba(0, 0, 0, .25); }
html[data-theme="dark"] .scr-tile .st-t, html[data-theme="dark"] .scr-tile.st-good .st-t, html[data-theme="dark"] .scr-tile.st-warn .st-t, html[data-theme="dark"] .scr-tile.st-bad .st-t { color: #9fb8cd; }
html[data-theme="light"] .scr-tile, html[data-theme="light"] .scr-tile.st-good, html[data-theme="light"] .scr-tile.st-warn, html[data-theme="light"] .scr-tile.st-bad { background: linear-gradient(180deg, #eef4f9, #d9e6f0); box-shadow: inset 0 0 0 1px rgba(11, 42, 74, .14), 0 1px 3px rgba(11, 42, 74, .08); }
html[data-theme="light"] .scr-tile .st-t, html[data-theme="light"] .scr-tile.st-good .st-t, html[data-theme="light"] .scr-tile.st-warn .st-t, html[data-theme="light"] .scr-tile.st-bad .st-t { color: #42617a; }
.scr-tile .st-t::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; background: #7cc4ff; }
.scr-tile.st-good .st-t::before { background: #2fe07a; }
.scr-tile.st-warn .st-t::before { background: #e3c766; }
.scr-tile.st-bad .st-t::before { background: #f0866a; }
html[data-theme="light"] .scr-tile .st-t::before { background: #2f7fd0; }
html[data-theme="light"] .scr-tile.st-good .st-t::before { background: #00a64f; }
html[data-theme="light"] .scr-tile.st-warn .st-t::before { background: #b28f20; }
html[data-theme="light"] .scr-tile.st-bad .st-t::before { background: #c0392b; }

/* z435 (Eric: try the frameless minimal too): the tile boxes go away
   entirely - four columns on the card surface separated by hairlines;
   titles return to their status colours, dots off. */
html[data-theme="dark"] .scr-tile, html[data-theme="dark"] .scr-tile.st-good, html[data-theme="dark"] .scr-tile.st-warn, html[data-theme="dark"] .scr-tile.st-bad, html[data-theme="light"] .scr-tile, html[data-theme="light"] .scr-tile.st-good, html[data-theme="light"] .scr-tile.st-warn, html[data-theme="light"] .scr-tile.st-bad { background: none; box-shadow: none; border-radius: 0; }
.scr-tile + .scr-tile { border-left: 1px solid rgba(160, 190, 205, .16); }
html[data-theme="light"] .scr-tile + .scr-tile { border-left-color: rgba(11, 42, 74, .12); }
.scr-tile .st-t::before { content: none; }
html[data-theme="dark"] .scr-tile .st-t { color: #7cc4ff; }
html[data-theme="dark"] .scr-tile.st-good .st-t { color: #57c46e; }
html[data-theme="dark"] .scr-tile.st-warn .st-t { color: #e3c766; }
html[data-theme="dark"] .scr-tile.st-bad .st-t { color: #f0866a; }
html[data-theme="light"] .scr-tile .st-t { color: #2f7fd0; }
html[data-theme="light"] .scr-tile.st-good .st-t { color: #2e7d4f; }
html[data-theme="light"] .scr-tile.st-warn .st-t { color: #a8861c; }
html[data-theme="light"] .scr-tile.st-bad .st-t { color: #c0392b; }

/* z436 (Eric): third theme - Apple-native WHITE. dataset.theme stays
   "light" so every light rule and JS light branch applies unchanged;
   data-variant="white" swaps the surfaces to iOS system colours:
   #F2F2F7 grouped page, pure-white cards, near-black ink, hairlines. */
html[data-variant="white"] { --bg: #f2f2f7; --ink: #14181d; --muted: #6e6e73; --line: #dcdce0; --card: #ffffff; --sub: #3a3a3c; }
html[data-variant="white"] .tabbar { background: rgba(255, 255, 255, .85); }
html[data-variant="white"] .sec-head { background: #ffffff; }
html[data-variant="white"] .ctx, html[data-variant="white"] .sticky-head { background: rgba(255, 255, 255, .88); }
html[data-variant="white"] .share-box, html[data-variant="white"] .share-row { background: #ffffff; }
html[data-variant="white"] body { background: #f2f2f7 fixed; }

/* z437 (Eric): the green active tab is retired - back to the pre-z422
   scheme he calls the dark-glass look: navy label/icon on a dark-tinted
   glass glide pill in light/white, sky-blue on a pale-blue pill in dark. */
.tabbar button.active { color: var(--navy); }
#tab-glide { background: rgba(11, 42, 74, .07); }
html[data-theme="dark"] .tabbar button.active { color: #7cc4ff; background: transparent; }
html[data-theme="dark"] #tab-glide { background: rgba(124, 196, 255, .13); }

/* z440 (Eric picked C): the Catches AI entry is now an inline line camera
   + gold sparkle drawn in the app's icon language - the baked navy-square
   badge is retired. Colour follows the theme via currentColor. */
.catch-ai-btn { color: #0b2a4a; }
html[data-theme="dark"] .catch-ai-btn { color: #cfe3f2; }
html[data-theme="light"] .catch-ai-svg .ai-spark { fill: #d9a514; }
.catch-ai-svg { display: block; }

/* z444 (Eric): the wall's today ring was a WHITE INSET ring in every theme -
   in light modes it melted into the white card and ate 2px of colour on all
   four sides, so today's cell read one size smaller than its neighbours.
   The ring moves OUTSIDE the cell (it sits in the 4px gap) and follows the
   theme: navy in light modes, soft white in dark. Colour area stays full. */
#wall .wcell.today { box-shadow: 0 0 0 2px var(--navy), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -8px 14px rgba(0,0,0,.16), 0 2px 5px rgba(0,0,0,.22); }
html[data-theme="dark"] #wall .wcell.today { box-shadow: 0 0 0 2px #e9f2ec, inset 0 1px 0 rgba(255,255,255,.35), inset 0 -8px 14px rgba(0,0,0,.16), 0 2px 5px rgba(0,0,0,.22); }

/* z448 TRIAL (Eric asked: the map's dark bars in light mode - too dark?
   lighter or more transparent?): in LIGHT modes the three floating map
   bars switch from the old dark-navy glass to the same white glass as
   the map's own control buttons - white ~85% + blur, navy ink, softer
   shadow. Dark mode keeps the dark glass (it sits on the slate there). */
html[data-theme="light"] #info-head.map-spot-bar .ctx-top { background: rgba(255, 255, 255, .85); box-shadow: 0 4px 14px rgba(6, 32, 51, .20); }
html[data-theme="light"] #info-head.map-spot-bar .ctx-place-select,
html[data-theme="light"] #info-head.map-spot-bar .ctx-pick-arrow,
html[data-theme="light"] #info-head.map-spot-bar .ctx-pin-ico { color: var(--navy); }
html[data-theme="light"] #info-head.map-spot-bar .ctx-updated { color: rgba(11, 42, 74, .62); }
html[data-theme="light"] .fav-star { background: rgba(255, 255, 255, .85); color: var(--navy); box-shadow: 0 4px 14px rgba(6, 32, 51, .20); }
html[data-theme="light"] .map-meta { background: rgba(255, 255, 255, .85); color: var(--navy); box-shadow: 0 4px 12px rgba(6, 32, 51, .18); }

/* z449 (Eric: the Esri attribution - smaller or gone?): it cannot be
   removed (Esri's tile licence requires the credit to stay visible),
   but it shrinks to the discreet minimum - 8px, translucent strip,
   muted ink - in both themes. */
.leaflet-control-attribution { font-size: 8px; line-height: 1.25; background: rgba(255, 255, 255, .38); color: rgba(70, 90, 105, .85); padding: 0 4px; }
.leaflet-control-attribution a { color: rgba(70, 90, 105, .85); }
html[data-theme="dark"] .leaflet-control-attribution { background: rgba(28, 46, 58, .38); color: rgba(159, 182, 196, .8); }
html[data-theme="dark"] .leaflet-control-attribution a { color: rgba(159, 182, 196, .8); }

/* z450 (Eric: the star sits small in its box - enlarge it): the
   favourite star glyph grows 21px -> 27px inside the same 38px button. */
.fav-star svg { width: 27px; height: 27px; }

/* z451 (Eric: the lock button joins the light set): in LIGHT modes the
   spot-action buttons (lock/report) take the same white glass as the
   star button and spot bar; the danger variant keeps its red ink. */
html[data-theme="light"] .spot-actions .btn-small { background: rgba(255, 255, 255, .85); box-shadow: 0 4px 14px rgba(6, 32, 51, .20); color: var(--navy); }
html[data-theme="light"] .spot-actions .btn-small.danger { color: #b3402f; }

/* z452: admin panel (owner-only; entry node is created by JS for admins only) */
.admin-panel { position: fixed; inset: 0; z-index: 900; overflow-y: auto; padding: calc(10px + env(safe-area-inset-top)) 10px 30px; background: var(--bg, #eef3f7); }
.admin-box { max-width: 560px; margin: 0 auto; }
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 4px; }
.admin-stat { text-align: center; }
.admin-stat-n { font-size: 1.3rem; font-weight: 700; }
.admin-stat-l { font-size: .68rem; color: var(--muted); }
.admin-h { margin: 14px 0 6px; font-size: .9rem; }
.admin-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.admin-hidden { color: #c0392b; font-weight: 700; }

/* z453: marketing opt-in rows + admin announce composer */
.mkt-row{display:flex;align-items:flex-start;gap:9px;width:100%;margin:12px 2px 2px;padding:0;background:none;border:0;cursor:pointer;text-align:left;color:var(--ink);font:inherit}
#me-mkt{margin:12px 0 2px;padding-top:12px;border-top:1px solid var(--line)}
.mkt-box{flex:0 0 auto;width:22px;height:22px;border-radius:6px;border:1.8px solid #9db4c4;background:#fff;display:flex;align-items:center;justify-content:center;margin-top:1px}
.mkt-box::after{content:"";font-size:14px;font-weight:700;color:#fff;line-height:1}
.mkt-row.on .mkt-box{background:var(--navy);border-color:var(--navy)}
.mkt-row.on .mkt-box::after{content:"✓"}
[data-theme="dark"] .mkt-box{background:rgba(255,255,255,.08)}
[data-theme="dark"] .mkt-row.on .mkt-box{background:#7cc4ff;border-color:#7cc4ff}
[data-theme="dark"] .mkt-row.on .mkt-box::after{color:#0b2a4a}
.mkt-tx{font-size:.92rem;line-height:1.35}
.mkt-sub{display:block;font-size:.78rem;color:var(--muted);margin-top:1px}
.admin-aud{display:flex;gap:8px;margin:4px 0 8px;flex-wrap:wrap}
.admin-aud .btn-small{opacity:.55}
.admin-aud .btn-small.aud-on{opacity:1;background:var(--navy);color:#fff;border-color:var(--navy)}
.admin-in{display:block;width:100%;box-sizing:border-box;margin:6px 0;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:inherit}
textarea.admin-in{resize:vertical}

/* z454: full-screen map mode */
.map-wrap.full { position: fixed; inset: 0; z-index: 900; background: #0a1c2c; }
.map-wrap.full #map { height: 100%; border: 0; border-radius: 0; }
.map-wrap.full .map-tools { bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }

/* z455 (Eric, 2026-11-10): the search button moves INTO the spot bar -
   one integrated pill (pin + name + arrow + search) - and the right
   column keeps only locate + expand. The favourite star grows to 44px
   so star / locate / expand share one centre line on the right edge.
   The pill background moves from .ctx-top onto #info-head itself; the
   JS renders the name block into #info-head-in beside the button. */
#info-head.map-spot-bar { display: flex; align-items: stretch; background: rgba(9, 24, 38, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 12px; box-shadow: 0 4px 18px rgba(6, 32, 51, .35); }
#info-head-in { flex: 1; min-width: 0; display: flex; }
#info-head.map-spot-bar .ctx-top { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; flex: 1; min-width: 0; }
html[data-theme="light"] #info-head.map-spot-bar { background: rgba(255, 255, 255, .85); box-shadow: 0 4px 14px rgba(6, 32, 51, .20); }
html[data-theme="light"] #info-head.map-spot-bar .ctx-top { background: transparent; box-shadow: none; }
#info-head .map-search-btn { position: static; flex: 0 0 auto; align-self: center; width: 38px; height: 38px; margin-right: 6px; border: 0; border-radius: 9px; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
#info-head .map-search-btn:active { transform: scale(.94); }
html[data-theme="light"] #info-head .map-search-btn { color: var(--navy); }
.fav-star { width: 44px; }

/* z457: the marketing tick sits at the TOP of the login form (above the social buttons) */
#acct-mkt{margin:12px 2px 12px}

/* z458: admin member-row delete button */
.admin-del{flex:none;background:none;border:0;color:#c0392b;font:inherit;font-size:.85rem;cursor:pointer;padding:2px 4px}
.admin-del:disabled{opacity:.5}

/* z462: Apple + Google sign-in buttons are exact twins (GIS large = 40px tall) */
.social-btn.apple{height:40px}

/* z464: while the map is full-screen, the Save-this-point button floats
   inside it as a centred pill above the coords pill (Eric: in the App
   Store build a dropped pin showed no save option until exiting full). */
.map-wrap.full #save-btn { position: absolute; left: 50%; transform: translateX(-50%); bottom: 52px; width: auto; margin: 0; padding: 11px 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(9, 24, 38, .78); color: #eef5f9; font-size: .95rem; font-weight: 600; z-index: 1002; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(6, 32, 51, .35); white-space: nowrap; }
html[data-theme="light"] .map-wrap.full #save-btn { background: rgba(255, 255, 255, .9); color: var(--navy); border-color: rgba(6, 32, 51, .12); }
/* z464b (Eric): in the App Store build the full-screen wrap escapes the
   safe-area padding <main> normally provides, so the map top bar slid
   under the iPhone status/signal bar and its star could not be tapped.
   In full mode the top bar drops by the top safe-area inset; the map
   itself still bleeds to the top edge. Web has inset 0, unchanged. */
.map-wrap.full .map-topbar { top: calc(10px + env(safe-area-inset-top, 0px)); }

/* z465 (Eric): the spot-picker chevron was a tiny text triangle users
   could not read as a control. It is now a drawn 21px chevron with its
   own padding, and it is itself tappable (opens the spot sheet), not
   just decoration next to the spot name. */
.ctx-pick-arrow { display: inline-flex; align-items: center; justify-content: center; padding: 2px 5px; margin-left: 1px; pointer-events: auto; cursor: pointer; flex: none; }

/* z467 (Eric): the three top-bar controls share ONE height again. z465's
   padded chevron (7px top/bottom) inflated the spot bar to ~49px while the
   share/report button kept its fixed 38px and the star only stretched in
   some browsers, so the row looked uneven. The chevron padding is cut to
   2px above, and the side buttons now stretch to the row height instead of
   carrying their own fixed height. */
.fav-star { align-self: stretch; }
.spot-actions .btn-small { height: auto; align-self: stretch; }

/* z471 (Eric, eBay-app reference video): the tab glide was a flat 7%
   tint and the pressed/active state barely read. It is now a real
   glass capsule: grey-glass body, bright top gloss, inner depth
   shading and a soft drop shadow, with backdrop blur+saturate so the
   page colour refracts through it. While a finger is on the bar
   (.bar-press) the capsule brightens and its shadow deepens, and the
   pressed button's icon swells slightly. Active label colours are
   unchanged (navy in light modes, sky in dark). */
#tab-glide {
  background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(163,183,205,.30) 46%, rgba(126,148,175,.36) 100%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -9px 15px rgba(88,112,142,.20), 0 3px 10px rgba(13,42,74,.18), 0 1px 3px rgba(13,42,74,.12);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  backdrop-filter: blur(8px) saturate(180%);
  transition: filter .15s ease, box-shadow .15s ease;
}
html[data-theme="dark"] #tab-glide {
  background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(158,192,228,.15) 46%, rgba(110,152,198,.20) 100%);
  border-color: rgba(255,255,255,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.40), inset 0 -9px 15px rgba(0,0,0,.28), 0 3px 10px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30);
}
.tabbar.bar-press #tab-glide {
  filter: brightness(1.10) saturate(1.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -9px 15px rgba(88,112,142,.24), 0 5px 14px rgba(13,42,74,.26), 0 2px 5px rgba(13,42,74,.16);
}
html[data-theme="dark"] .tabbar.bar-press #tab-glide {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.40), inset 0 -9px 15px rgba(0,0,0,.30), 0 5px 14px rgba(0,0,0,.50), 0 2px 5px rgba(0,0,0,.36);
}
.tabbar button .tab-ico { transition: transform .15s ease; }
.tabbar button:active .tab-ico { transform: scale(1.14); }

/* z472 (Eric): the z471 capsule still read too flat - he wants the
   eBay droplet: BIG, plump, convex. The capsule now outgrows the
   button (moveGlide pads it), carries a bright specular dome across
   its top, a deeper shaded belly and a larger soft shadow; while
   pressed it swells like a droplet under the finger. */
#tab-glide {
  background:
    radial-gradient(130% 95% at 50% -10%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.28) 52%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(168,188,212,.34) 48%, rgba(118,142,172,.44) 100%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 2px 2px rgba(255,255,255,1), inset 0 -12px 18px rgba(84,108,140,.28), inset 2px 0 6px rgba(255,255,255,.35), inset -2px 0 6px rgba(84,108,140,.12), 0 6px 16px rgba(13,42,74,.24), 0 2px 5px rgba(13,42,74,.16);
  transition: filter .15s ease, box-shadow .15s ease, transform .18s ease;
}
html[data-theme="dark"] #tab-glide {
  background:
    radial-gradient(130% 95% at 50% -10%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.14) 52%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(158,192,228,.17) 48%, rgba(104,146,196,.26) 100%);
  border-color: rgba(255,255,255,.38);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.5), inset 0 -12px 18px rgba(0,0,0,.38), inset 2px 0 6px rgba(255,255,255,.14), 0 6px 16px rgba(0,0,0,.5), 0 2px 5px rgba(0,0,0,.36);
}
.tabbar.bar-press #tab-glide { transform: scale(1.07); }
.tabbar button:active .tab-ico { transform: scale(1.22); }

/* z473 (Eric, two eBay stills): TWO states, like the reference.
   Released/active = a calm grey-glass pill (his photo 1) - the z472
   dome is toned back down. Pressed = a giant glass DROPLET blooms
   around the finger (his photo 2): a near-circular lens ~1.9x the
   button height, clearer than the bar's own frost, bright-rimmed,
   washing over the neighbouring tabs; the pressed button rides
   above it (.pressing, z 3) so its icon stays crisp inside. */
#tab-glide {
  background: linear-gradient(180deg, rgba(122,126,134,.13) 0%, rgba(122,126,134,.20) 100%);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -4px 8px rgba(92,98,108,.10), 0 1px 4px rgba(20,30,45,.08);
}
html[data-theme="dark"] #tab-glide {
  background: linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.09) 100%);
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -4px 8px rgba(0,0,0,.20), 0 1px 4px rgba(0,0,0,.25);
}
.tabbar.bar-press #tab-glide { transform: none; }
#tab-drop {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  pointer-events: none; z-index: 2; opacity: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.60), inset 0 -8px 18px rgba(120,130,145,.06), 0 8px 22px rgba(20,35,55,.12);
  -webkit-backdrop-filter: blur(1px) saturate(150%) brightness(1.05);
  backdrop-filter: blur(1px) saturate(150%) brightness(1.05);
  transform: translate(-50%, -50%) scale(.45);
  transition: transform .38s cubic-bezier(.3,1.45,.4,1), opacity .16s ease;
}
#tab-drop.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
html[data-theme="dark"] #tab-drop {
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 60%, rgba(255,255,255,.01) 100%);
  border-color: rgba(255,255,255,.28);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.35), inset 0 -8px 18px rgba(0,0,0,.18), 0 8px 22px rgba(0,0,0,.35);
}
.tabbar button.pressing { z-index: 3; }

/* z474 (Eric): a long press anywhere in the app triggered iOS text
   selection - the magnifier loupe over the Forecast tab in his
   screenshot - which fights every press interaction (tab droplet,
   map pin drop, scrub). The app shell is now non-selectable and the
   long-press callout is off; real text fields stay editable. */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }

/* z475 (Eric): the map long-press showed the iOS Copy callout too -
   Leaflet tiles are <img>s, and the callout honours the image's own
   chain; harden images and the Leaflet container explicitly, plus a
   contextmenu guard in initMap. The 1-second pin drop is pointer-
   driven and is not affected. */
img, .leaflet-container, .leaflet-pane, .leaflet-tile { -webkit-touch-callout: none; }
.leaflet-container { -webkit-user-select: none; user-select: none; }

/* z477 (Eric, Apple Phone reference): under the droplet the pressed
   tab turns Apple system blue, and the active tab takes the same
   blue (his screenshot: the selected Keypad tab is blue inside the
   grey pill). This supersedes the z437 navy for the light modes;
   the pill stays neutral grey, dark keeps its sky active colour. */
.tabbar button.active { color: #007AFF; }
.tabbar button.pressing { color: #007AFF; }
html[data-theme="dark"] .tabbar button.pressing { color: #7cc4ff; }

/* z490: drag lens. touch-action none keeps the horizontal gesture
   ours (no scroll steal / pointercancel mid-drag); while settling
   onto the released tab the lens position eases with a soft spring,
   during the drag itself left/top update instantly so the lens
   tracks the finger 1:1. */
.tabbar { touch-action: none; }
#tab-drop.settle { transition: left .22s cubic-bezier(.3,1.3,.4,1), top .22s cubic-bezier(.3,1.3,.4,1), transform .38s cubic-bezier(.3,1.45,.4,1), opacity .16s ease; }
/* z493 (Eric): readout type enlarged - titles, big numbers and units
   (the wave unit line carries the period, ft · 12.4s, so it grows too).
   Sizes are the ceiling that keeps the longest values (13.9) inside
   a tile at 4-across. */
.scr-tile .st-t { font-size: .8rem; }
.scr-tile .st-n { font-size: 33px; } /* z495: Eric - middle row 33px trial */
.scr-tile .st-u { font-size: 14px; } /* z496: Eric - unit row a touch smaller */

/* z512 (Eric): Apple-style BLACK theme. THEME "black" keeps data-theme="dark"
   (all dark rules + JS dark branches apply) and this variant layer repaints
   the navy surfaces to Apple's dark palette: true-black page, #1c1c1e cards,
   #2c2c2e raised elements, iOS label greys. */
html[data-variant="black"] { --navy: #f2f2f7; --ink: #f2f2f7; --muted: #98989f; --line: #2c2c2e; --bg: #000000; --card: #1c1c1e; }
html[data-variant="black"] .sec-head { background: #1c1c1e; }
html[data-variant="black"] .share-box, html[data-variant="black"] .share-row { background: #1c1c1e; }
html[data-variant="black"] body { background: #000000; }
html[data-variant="black"] .card, html[data-variant="black"] .wall-card, html[data-variant="black"] .catch-card, html[data-variant="black"] .shop-item { background: #1c1c1e; border-color: rgba(255,255,255,.09); color: #f2f2f7; }
html[data-variant="black"] .tabbar { background: rgba(28,28,30,.88); border-color: rgba(255,255,255,.1); }
html[data-variant="black"] input, html[data-variant="black"] select { background: #1c1c1e; border-color: #38383a; color: #f2f2f7; }
html[data-variant="black"] .btn-small, html[data-variant="black"] .chip { background: #2c2c2e; color: #f2f2f7; }
html[data-variant="black"] .search-results { background: #1c1c1e; border-color: #38383a; }
html[data-variant="black"] .verdict.far { background: #1c1c1e; border-color: #38383a; }
html[data-variant="black"] .day { background: #1c1c1e; border-color: #38383a; }
html[data-variant="black"] .day.far { background: #1c1c1e; color: #98989f; }
html[data-variant="black"] .wcell.skel { background: linear-gradient(100deg, #171718 40%, #262628 50%, #171718 60%); background-size: 200% 100%; }
html[data-variant="black"] #map { background: #000000; }
html[data-variant="black"] .leaflet-control-attribution { background: rgba(0,0,0,.55); color: #98989f; }
html[data-variant="black"] #ptr-ind { background: rgba(28,28,30,.92); color: #d1d1d6; }
html[data-variant="black"] .ctx { background: rgba(28,28,30,.9); border-bottom-color: rgba(255,255,255,.08); }
html[data-variant="black"] .wall-card.empty { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.22); }
html[data-variant="black"] .shop-item img { background: #2c2c2e; }
html[data-variant="black"] .map-wrap .search-box input { background: rgba(28,28,30,.9); }
html[data-variant="black"] .map-spot-bar { background: rgba(28,28,30,.92); }
html[data-variant="black"] .map-locate { background: rgba(28,28,30,.88); }
html[data-variant="black"] .sticky-head { background: rgba(28,28,30,.92); border-bottom-color: rgba(255,255,255,.08); }
html[data-variant="black"] #info-head.map-spot-bar .ctx-top { background: rgba(28,28,30,.92); box-shadow: 0 4px 18px rgba(0,0,0,.45); }
html[data-variant="black"] #view-spots .spots-sticky-head .ctx { background: rgba(28,28,30,.92); }

/* z520: animated weather canvas over the home hero backdrop (below the text) */
#hero-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

/* z522: ambient weather canvas over the Forecast satellite map */
#wxfx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1001; pointer-events: none; }

/* z524: Auto theme pairing rows (segmented pills inside the theme accordion) */
#theme-pair { padding: 4px 0 8px; }
.pair-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 2px; }
.pair-label { font-size: .95rem; color: var(--muted); }
.pair-opts { display: flex; gap: 6px; }
.pair-btn { font: inherit; font-size: .9rem; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.pair-btn.active { background: #007aff; border-color: transparent; color: #fff; font-weight: 600; }

/* ===== SURF TIDES v1: hide the fishing threshold selects (skill presets
   replace them), tide-band highlight, surf readout line, preset highlight */
label.th-row:has(> select#th-wind), label.th-row:has(> select#th-gust), label.th-row:has(> select#th-wave),
label.th-row:has(> select#win-start), label.th-row:has(> select#win-end),
label.th-row:has(> select#th-wind2), label.th-row:has(> select#th-gust2), label.th-row:has(> select#th-wave2),
label.th-row:has(> select#win-start2), label.th-row:has(> select#win-end2) { display: none !important; }
.wx-table td.tide-best { background: rgba(51, 167, 72, .16) !important; }
.surf-line { margin-top: 10px; padding: 9px 12px; border-radius: 9px; background: rgba(0, 113, 227, .10); font-size: 14px; font-weight: 600; }
.btn-small.on { background: #0071e3; color: #fff; }