/* Beach conditions page. Builds on styles.css tokens (--blue, --sand, --sea, --panel-solid...). */

:root {
  --tide-strong: #1685ff;
  --tide-good: #82c5ff;
  --tide-weak: #4a5564;
  --night: rgba(130, 197, 255, 0.07);
}

/* ---------- hero ---------- */
.conditions-hero {
  min-height: 0;
  padding-bottom: 48px;
}

.conditions-hero h1 {
  margin-bottom: 18px;
}

.conditions-hero .hero-copy {
  max-width: 760px;
}

.stale-banner,
.load-error {
  max-width: 760px;
  margin: 8px 0 0;
  padding: 12px 16px;
  color: var(--ink);
  background: rgba(242, 109, 79, 0.12);
  border: 1px solid rgba(242, 109, 79, 0.5);
  border-radius: 8px;
  font-weight: 700;
}

.load-error {
  margin: 24px auto;
  width: min(1180px, calc(100% - 44px));
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}

.quick-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: rgba(10, 15, 20, 0.82);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.quick-card:nth-child(3) {
  border-left-color: var(--sand);
}

.quick-k {
  color: var(--sand);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.quick-card strong {
  font-size: 1.12rem;
  line-height: 1.15;
}

.quick-s {
  color: var(--muted);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- region bar ---------- */
.region-bar {
  position: sticky;
  top: 71px;
  z-index: 15;
  padding: 10px 40px;
  background: rgba(5, 6, 7, 0.9);
  border-block: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.region-bar-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.region-bar-label {
  color: var(--quiet);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.region-switch {
  display: inline-flex;
  padding: 3px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}

.region-switch button {
  min-height: 40px;
  padding: 8px 16px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 7px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.region-switch button[aria-pressed="true"] {
  color: #04101e;
  background: linear-gradient(180deg, #66b7ff, var(--blue));
}

.region-switch button:focus-visible,
.region-jump a:focus-visible,
.chart-scroll:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 2px;
}

.region-jump {
  display: flex;
  gap: 4px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.region-jump a {
  padding: 8px 10px;
  color: var(--muted);
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.region-jump a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}

.cond-band {
  scroll-margin-top: 130px;
}

.cond-band.content-band {
  padding-block: 72px;
}

.tides-band {
  background: linear-gradient(180deg, #090e13, #06090c);
}

/* ---------- shared bits ---------- */
.conf,
.basis,
.new-badge,
.minus-tag,
.light {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.conf-high { color: var(--sea); }
.conf-med { color: var(--sand); }
.conf-lowmed { color: #c7a873; opacity: 0.85; }
.conf-low { color: var(--quiet); }

.basis {
  color: var(--quiet);
  border-color: var(--line-strong);
}

.basis-confirmed {
  color: var(--blue-soft);
  border-color: rgba(130, 197, 255, 0.55);
  background: rgba(22, 133, 255, 0.1);
}

.tide-strong-text { color: var(--tide-strong); font-weight: 900; }
.tide-good-text { color: var(--tide-good); font-weight: 800; }
.tide-weak-text { color: var(--muted); font-weight: 700; }

.muted-note {
  max-width: 820px;
  margin: 16px 0 0;
  color: var(--quiet);
  font-size: 0.95rem;
}

.sub-head {
  margin: 34px 0 14px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

/* ---------- top pick ---------- */
.pick-card {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.7fr);
  gap: 28px;
  padding: 30px;
  background:
    linear-gradient(135deg, rgba(22, 133, 255, 0.16), rgba(22, 133, 255, 0.02) 55%),
    var(--panel-solid);
  border: 1px solid rgba(130, 197, 255, 0.35);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.pick-main h3 {
  margin-bottom: 14px;
  font-size: 2.3rem;
  line-height: 1;
}

.pick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.pick-main p {
  margin: 0;
  color: var(--muted);
  font-size: 1.04rem;
}

.pick-facts {
  display: grid;
  gap: 2px;
  margin: 0;
  align-content: start;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.pick-facts div {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.pick-facts div:last-child {
  border-bottom: 0;
}

.pick-facts dt {
  color: var(--quiet);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pick-facts dd {
  margin: 2px 0 0;
  font-size: 1.12rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ---------- ranked list ---------- */
.rank-list {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.rank-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 22px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.rank-n {
  color: var(--sand);
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rank-card:first-child .rank-n {
  color: var(--blue-soft);
}

.rank-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}

.rank-top h3 {
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.2;
}

.rank-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 8px 0 10px;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rank-body p {
  margin: 0;
  max-width: 820px;
  color: var(--muted);
}

.later-note {
  min-height: 0;
  margin-top: 22px;
  border-left: 3px solid var(--sand);
}

.later-note p,
.changes-grid .field-note p {
  margin: 0;
}

/* ---------- tide chart ---------- */
.chart-shell {
  padding: 18px 18px 14px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.chart-scroll {
  overflow-x: auto;
  border-radius: 6px;
}

.tide-svg {
  display: block;
}

.tide-svg .night { fill: var(--night); }
.tide-svg .grid { stroke: rgba(247, 244, 236, 0.08); stroke-width: 1; }
.tide-svg .grid.zero { stroke: rgba(242, 109, 79, 0.45); stroke-dasharray: 4 4; }
.tide-svg .day-line { stroke: rgba(247, 244, 236, 0.12); }
.tide-svg .axis { fill: var(--quiet); font-size: 11px; font-family: inherit; }
.tide-svg .day-label { fill: var(--muted); font-weight: 800; font-size: 12px; }
.tide-svg .curve { fill: none; stroke: var(--sea); stroke-width: 2.2; }
.tide-svg .curve-fill { fill: rgba(99, 212, 208, 0.08); }
.tide-svg .low-dot { stroke: #050607; stroke-width: 1.5; }
.tide-svg .low-dot.tide-strong { fill: var(--tide-strong); }
.tide-svg .low-dot.tide-good { fill: var(--tide-good); }
.tide-svg .low-dot.tide-weak { fill: var(--tide-weak); }
.tide-svg .low-label { fill: var(--muted); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tide-svg .low-label.good { fill: var(--ink); font-weight: 900; }
.tide-svg .now-line { stroke: var(--sand); stroke-width: 1.5; stroke-dasharray: 3 3; }
.tide-svg .now-label { fill: var(--sand); font-size: 11px; font-weight: 900; }

.tide-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.85rem;
}

.tide-legend i {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  border-radius: 3px;
  vertical-align: -1px;
}

.tide-legend i.tide-strong { background: var(--tide-strong); }
.tide-legend i.tide-good { background: var(--tide-good); }
.tide-legend i.tide-weak { background: var(--tide-weak); }
.tide-legend i.night-key { background: rgba(130, 197, 255, 0.22); }

.strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.strip-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

.strip-d {
  color: var(--quiet);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.strip-bar {
  width: 100%;
  height: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.strip-bar i {
  display: block;
  width: 46%;
  border-radius: 4px 4px 0 0;
}

.strip-bar i.tide-strong { background: var(--tide-strong); }
.strip-bar i.tide-good { background: var(--tide-good); }
.strip-bar i.tide-weak { background: var(--tide-weak); }

.strip-t {
  color: var(--muted);
  font-size: 0.8rem;
}

/* ---------- swell ---------- */
.buoy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.buoy-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  color: var(--ink);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.buoy-card:hover,
.buoy-card:focus-visible {
  border-color: var(--blue-soft);
  transform: translateY(-1px);
}

.buoy-card .card-label {
  margin: 0;
}

.buoy-card strong {
  font-size: 1.08rem;
}

.buoy-row {
  color: var(--muted);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.buoy-row em {
  display: inline-block;
  min-width: 42px;
  color: var(--quiet);
  font-style: normal;
  font-weight: 800;
}

.cond-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.cond-col .card-label {
  display: block;
  margin-bottom: 8px;
}

.cond-col p {
  margin: 0;
  color: var(--muted);
}

/* ---------- erosion reports ---------- */
.report-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.report {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.report-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--sand);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.new-badge {
  color: var(--blue-soft);
  background: rgba(22, 133, 255, 0.12);
}

.report-body h3 {
  margin-bottom: 6px;
  font-size: 1.12rem;
}

.report-body p {
  margin: 0 0 8px;
  max-width: 820px;
  color: var(--muted);
}

.report-src {
  font-size: 0.88rem;
}

.report-src a,
.source-list a,
.load-error a {
  color: var(--blue-soft);
}

.changes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}

.changes-grid .field-note {
  min-height: 0;
}

.changes-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.changes-list li + li {
  margin-top: 8px;
}

/* ---------- low-tide table ---------- */
.table-shell {
  overflow-x: auto;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.low-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.low-table th {
  padding: 14px 16px;
  color: var(--quiet);
  font-size: 0.74rem;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
}

.low-table td {
  padding: 13px 16px;
  vertical-align: top;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.low-table tr:last-child td {
  border-bottom: 0;
}

.lt-rank {
  color: var(--sand);
  font-size: 1.2rem;
  font-weight: 900;
}

.lt-h {
  display: block;
  font-size: 1.04rem;
}

.lt-t {
  display: block;
  color: var(--muted);
  font-size: 0.86rem;
}

.minus-tag {
  display: flex;
  width: max-content;
  margin-top: 5px;
  color: var(--danger);
}

.light {
  color: var(--quiet);
  border-color: var(--line-strong);
}

.light-day {
  color: var(--ink);
  border-color: var(--ink);
}

.light-dusk {
  color: var(--sand);
}

.light-inline,
.swipe-hint {
  display: none;
}

/* ---------- history & sources ---------- */
.history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.small-h2 {
  margin-bottom: 18px;
  font-size: 1.9rem;
}

.history-list,
.source-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-list li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 0;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}

.hist-run {
  color: var(--ink);
  font-weight: 800;
}

.history-list em {
  color: var(--sand);
  font-style: normal;
  font-weight: 900;
}

.source-list li {
  padding: 6px 0;
  font-size: 0.94rem;
}

.disclaimer {
  margin: 40px 0 0;
  padding-top: 20px;
  color: var(--quiet);
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

/* ---------- responsive ---------- */
@media (max-width: 1150px) {
  .region-bar {
    top: 0;
    padding-inline: 22px;
  }
}

@media (max-width: 1050px) {

  .pick-card,
  .history-grid {
    grid-template-columns: 1fr;
  }

  .cond-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .quick-grid,
  .changes-grid {
    grid-template-columns: 1fr;
  }

  .region-bar {
    position: sticky;
    top: 0;
    padding: 8px 14px;
  }

  .region-bar-label,
  .region-jump {
    display: none;
  }

  .region-switch {
    width: 100%;
  }

  .region-switch button {
    flex: 1;
    padding-inline: 8px;
  }

  .cond-band.content-band {
    padding: 52px 18px;
  }

  .pick-card {
    padding: 20px;
    gap: 18px;
  }

  .pick-main h3 {
    font-size: 1.7rem;
  }

  .rank-card {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px;
  }

  .rank-n {
    font-size: 1.4rem;
  }

  .chart-shell {
    padding: 12px 10px 10px;
  }

  .strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .report {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .low-table th,
  .low-table td {
    padding: 11px 10px;
  }

  .low-table .lt-light {
    display: none;
  }

  .light-inline {
    display: flex;
    width: max-content;
    margin-top: 5px;
  }

  .swipe-hint {
    display: block;
    margin: 0 0 8px;
    color: var(--quiet);
    font-size: 0.82rem;
    font-weight: 700;
  }
}

/* ---------- v2: views, beach picker, day cards, track record ---------- */
button.quick-card {
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
}

button.quick-card:hover,
button.quick-card:focus-visible {
  border-color: var(--blue-soft);
  transform: translateY(-1px);
  outline: none;
}

.quick-card.quick-gold {
  border-left-color: var(--sand);
}

.region-bar-inner {
  justify-content: space-between;
}

.view-tabs {
  display: inline-flex;
  gap: 4px;
}

.view-tabs button {
  min-height: 44px;
  padding: 8px 18px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.view-tabs button[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--sand);
}

.view-tabs button:hover {
  color: var(--ink);
}

.view-tabs button:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 2px;
}

.beach-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.beach-picker label {
  color: var(--sand);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.beach-picker select {
  width: 100%;
  min-height: 50px;
  padding: 10px 40px 10px 14px;
  color: var(--ink);
  background:
    linear-gradient(45deg, transparent 50%, var(--blue-soft) 50%) calc(100% - 20px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--blue-soft) 50%, transparent 50%) calc(100% - 14px) 50% / 6px 6px no-repeat,
    var(--panel-solid);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.beach-picker select:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 2px;
}

.station-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.station-note strong {
  color: var(--ink);
}

.tide-svg .high-dot {
  fill: var(--sea);
}

.day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.day-card {
  min-width: 0;
  padding: 16px 18px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.day-card.day-good {
  border-color: rgba(130, 197, 255, 0.45);
  background:
    linear-gradient(180deg, rgba(22, 133, 255, 0.1), transparent 60%),
    var(--panel-solid);
}

.day-card header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.day-card header strong {
  font-size: 1.05rem;
}

.day-sun {
  color: var(--quiet);
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.day-card ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.day-card li {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 5px 0;
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.day-card .tt {
  color: var(--quiet);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.day-card .is-high .th {
  color: var(--muted);
}

.day-card .tv {
  font-weight: 700;
}

.track-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.track-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.track-stat span {
  color: var(--quiet);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.track-stat strong {
  font-size: 1.8rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.track-stat em {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
}

.track-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.track-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.track-body strong {
  display: block;
  font-size: 1.04rem;
}

.track-meta {
  color: var(--quiet);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.track-body p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.grade {
  display: inline-flex;
  justify-content: center;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.grade-hit { color: var(--sea); background: rgba(99, 212, 208, 0.1); }
.grade-partial { color: var(--sand); }
.grade-miss { color: var(--danger); }
.grade-pending { color: var(--quiet); }
.grade-upcoming { color: var(--blue-soft); border-style: dashed; }

@media (max-width: 1050px) {
  .track-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .region-bar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .view-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .view-tabs button {
    min-height: 40px;
  }

  .track-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .track-stat:last-child {
    grid-column: 1 / -1;
  }

  .track-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .track-row .grade,
  .track-row .basis {
    width: max-content;
  }

  .day-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- v3: surf ---------- */
:root {
  --band-small: #4a5564;
  --band-mod: #63d4d0;
  --band-big: #d7bd83;
  --band-huge: #f26d4f;
}

.update-schedule {
  margin: -6px 0 16px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.surf-rank {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.surf-row {
  display: grid;
  grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) 64px 92px;
  gap: 14px;
  align-items: center;
  min-height: 40px;
  padding: 6px 10px;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.surf-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.surf-row.is-selected {
  background: rgba(22, 133, 255, 0.1);
  border-color: rgba(130, 197, 255, 0.45);
}

.surf-row:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 1px;
}

.surf-name {
  min-width: 0;
  font-weight: 800;
  font-size: 0.95rem;
}

.surf-bar {
  height: 14px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.surf-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
}

.band-small { background: var(--band-small); }
.band-mod { background: var(--band-mod); }
.band-big { background: var(--band-big); }
.band-huge { background: var(--band-huge); }

.surf-val {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.surf-meta {
  color: var(--quiet);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.surf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.85rem;
}

.surf-legend i {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  border-radius: 3px;
  vertical-align: -1px;
}

.surf-detail {
  display: grid;
  gap: 16px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.surf-detail .beach-picker {
  max-width: 420px;
}

.surf-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.tide-svg .surf-line { fill: none; stroke: var(--blue-soft); stroke-width: 2.4; }
.tide-svg .surf-fc { stroke-dasharray: 6 5; opacity: 0.85; }
.tide-svg .surf-fill { fill: rgba(130, 197, 255, 0.1); }
.tide-svg .hitide { fill: rgba(215, 189, 131, 0.22); }

.tide-legend i.surf-key {
  height: 3px;
  width: 16px;
  vertical-align: 3px;
  background: var(--blue-soft);
}

.tide-legend i.surf-key-fc {
  background: repeating-linear-gradient(90deg, var(--blue-soft) 0 5px, transparent 5px 8px);
}

.tide-legend i.hitide-key {
  background: rgba(215, 189, 131, 0.4);
}

.lows-note {
  margin: -6px 0 14px;
}

@media (max-width: 1050px) {
  .surf-row {
    grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) 56px 84px;
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .surf-rank {
    padding: 6px;
  }

  .surf-row {
    grid-template-columns: minmax(0, 1fr) 86px;
    grid-template-areas: "name val" "bar meta";
    gap: 5px 12px;
    min-height: 0;
    padding: 8px;
  }

  .surf-meta {
    white-space: nowrap;
  }

  .surf-name { grid-area: name; }
  .surf-val { grid-area: val; }
  .surf-bar { grid-area: bar; height: 10px; }
  .surf-meta { grid-area: meta; text-align: right; font-size: 0.78rem; }

  .surf-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .surf-stats .track-stat:last-child {
    grid-column: auto;
  }
}

.surf-detail > * {
  min-width: 0;
}

/* ---------- how to read ---------- */
.howto-band {
  padding: 18px 40px 0;
  background: #080b0f;
}

.howto {
  width: min(1180px, 100%);
  margin: 0 auto;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.howto summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  color: var(--blue-soft);
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.howto summary::-webkit-details-marker {
  display: none;
}

.howto summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.3rem;
  line-height: 1;
}

.howto[open] summary::after {
  content: "−";
}

.howto summary:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 2px;
  border-radius: 10px;
}

.howto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px 24px;
  padding: 4px 18px 20px;
}

.howto-grid h3 {
  margin-bottom: 6px;
  color: var(--sand);
  font-size: 0.98rem;
}

.howto-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.howto-grid strong {
  color: var(--ink);
}

@media (max-width: 1050px) {
  .howto-band {
    padding-inline: 22px;
  }
}

@media (max-width: 640px) {
  .howto-band {
    padding: 14px 14px 0;
  }
}

/* ---------- QA fixes ---------- */
.surf-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.surf-sort span {
  margin-right: 4px;
  color: var(--quiet);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.surf-sort button {
  min-height: 40px;
  padding: 8px 14px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}

.surf-sort button[aria-pressed="true"] {
  color: #04101e;
  background: var(--blue-soft);
  border-color: var(--blue-soft);
}

.surf-sort button:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 2px;
}

.surf-na {
  color: var(--quiet);
  font-size: 0.8rem;
  font-weight: 700;
}

.source-list a {
  display: inline-block;
  padding-block: 8px;
}

.report-src a {
  display: inline-block;
  padding-block: 10px;
}

.quick-k,
.conf,
.basis,
.new-badge,
.minus-tag,
.light,
.grade,
.pick-facts dt,
.track-stat span,
.strip-d,
.day-card .tt {
  font-size: 0.8rem;
}