/* ============ BayCast fishing-page DARK module ============ */
/* Used by /port-phillip-bay/, /western-port/, /gippsland/, /portland-discovery/ */

.fish-wrap{ max-width: 1280px; margin: 0 auto; padding: 14px; }

/* === Top map === */
.fish-map-wrap{ position: relative; }
.fish-map{
  height: 380px;
  border-radius: 12px;
  border: 1px solid var(--bc-line);
  background: #060d1a;
}
@media (max-width: 700px){ .fish-map{ height: 280px; } }

/* === Unit toggle === */
.unit-toggle{
  display:inline-flex; gap:0;
  border:1px solid var(--bc-line-strong);
  border-radius: 18px; overflow:hidden;
  background:rgba(255,255,255,.04);
  font-size:12px;
}
.unit-toggle button{
  background:transparent; border:0; padding:6px 14px; cursor:pointer;
  font-weight:700; color: var(--bc-text-soft);
}
.unit-toggle button.active{ background: var(--bc-yellow); color: var(--bc-navy); }

/* === Generated bar === */
.fish-meta-bar{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  padding: 10px 4px;
  font-size: 13px; color: var(--bc-text-soft);
}
.fish-meta-bar .gen{ font-variant-numeric: tabular-nums; }
.fish-meta-bar .refresh{
  margin-left:auto;
  background: var(--bc-yellow); color: var(--bc-navy); border:0;
  border-radius: 8px; padding: 6px 14px; font-weight: 700; cursor: pointer;
  font-size: 12px;
}
.fish-meta-bar .refresh:hover{ background: var(--bc-yellow-dim); }

/* ====================================================
   SPOT CARD — full-screen-ish app style
   ==================================================== */
.spot-card{
  background: var(--bc-card);
  border: 1px solid var(--bc-line);
  border-radius: 14px;
  padding: 0;
  margin: 14px 0;
  overflow: hidden;
}

/* --- Header strip with name + GO badge + LIVE pill --- */
.spot-card .spot-head{
  padding: 14px 18px 10px;
  display:flex; align-items:center; gap:12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--bc-line);
  background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 100%);
}
.spot-card h3{
  margin:0; font-size: 20px; color: #fff; font-weight: 800;
  letter-spacing: -0.01em;
}
.spot-card .sub{
  font-size: 12px; color: var(--bc-text-soft); margin-top: 2px;
}
.spot-card .live-pill{
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--bc-live);
  border-radius: 14px;
  color: var(--bc-live);
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
}
.spot-card .live-pill::before{
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bc-live); box-shadow: 0 0 6px var(--bc-live);
  animation: bc-pulse 1.6s ease-in-out infinite;
}
@keyframes bc-pulse { 50% { opacity: 0.4; } }

/* GO badge (in head) */
.go-badge{
  padding: 4px 10px; border-radius: 14px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase;
}
.go-badge.go      { background: rgba(46,209,120,.18); color: var(--bc-go); }
.go-badge.caution { background: rgba(255,167,38,.18); color: var(--bc-caution); }
.go-badge.nogo    { background: rgba(239,83,80,.18);  color: var(--bc-nogo); }
.go-badge.loading { background: rgba(255,255,255,.06); color: var(--bc-text-soft); }

/* --- Conditions strip: barometer / humidity / dew / UV / sunrise / sunset / moon --- */
.cond-strip{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  padding: 12px 18px;
  border-bottom: 1px solid var(--bc-line);
}
.cond-cell{
  padding: 4px 8px;
  border-right: 1px solid var(--bc-line);
}
.cond-cell:last-child{ border-right: 0; }
.cond-cell .lbl{
  font-size: 9.5px; color: var(--bc-text-soft);
  text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700;
}
.cond-cell .v{
  margin-top: 4px;
  color: #fff; font-weight: 700;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.cond-cell .vsub{
  font-size: 10.5px; color: var(--bc-text-soft);
  margin-top: 2px;
}
.cond-cell .baro-mini{
  display: inline-block; height: 12px; width: 36px;
  vertical-align: middle; margin-left: 4px;
}
@media (max-width: 900px){
  .cond-strip{ grid-template-columns: repeat(4, 1fr); padding: 12px 12px; }
  .cond-cell{ padding: 6px 6px; border-right: 0; border-bottom: 1px dashed var(--bc-line); }
}
@media (max-width: 480px){
  .cond-strip{ grid-template-columns: repeat(2, 1fr); }
}

/* --- Day strip: Today / Thu / Fri / Sat / Sun / Mon / Tue --- */
.day-strip{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--bc-line);
  overflow-x: auto;
}
.day-cell{
  padding: 8px 10px;
  border: 1px solid var(--bc-line);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  min-width: 0;
}
.day-cell:hover{ background: rgba(255,255,255,.06); }
.day-cell.active{
  border-color: var(--bc-yellow);
  background: rgba(246,194,59,.08);
}
.day-cell .dl{
  font-size: 10.5px; color: var(--bc-text-soft);
  text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700;
}
.day-cell .ds{ font-size: 10px; color: var(--bc-text-faint); margin-top: 1px; }
.day-cell .dvals{
  margin-top: 5px;
  display:flex; align-items:center; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.day-cell .dmax{ font-weight: 800; color: #fff; font-size: 16px; }
.day-cell .dmin{ font-weight: 600; color: var(--bc-text-soft); font-size: 13px; }
.day-cell .dwind{
  margin-top: 4px;
  font-size: 11px; color: var(--bc-text-soft);
  display:flex; align-items:center; gap: 4px;
}
.day-cell .dwind .arr{ display:inline-block; transform-origin:center; font-size: 11px; }
@media (max-width: 700px){
  .day-strip{ padding: 8px 10px; gap: 6px; }
  .day-cell{ padding: 6px 6px; }
  .day-cell .dmax{ font-size: 14px; }
  .day-cell .dmin{ font-size: 12px; }
}

/* --- Wind chart panel with 1/3/5/7 toggle --- */
.wind-panel{
  padding: 14px 18px 18px;
  border-bottom: 1px solid var(--bc-line);
}
.wind-panel-head{
  display:flex; align-items:center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.wind-panel-head .title{
  font-size: 13px; color: #fff; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase;
}
.wind-panel-head .title .accent{ color: var(--bc-yellow); }
.range-toggle{
  display: inline-flex; gap: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--bc-line-strong);
  border-radius: 8px; padding: 3px;
}
.range-toggle button{
  background: transparent; border: 0;
  padding: 4px 10px; border-radius: 5px; cursor: pointer;
  color: var(--bc-text-soft); font-size: 11px; font-weight: 700;
  letter-spacing: 0.4px;
}
.range-toggle button.active{ background: var(--bc-yellow); color: var(--bc-navy); }
.wind-panel-head .now{
  margin-left: auto; font-size: 12px; color: var(--bc-text-soft);
  font-variant-numeric: tabular-nums;
}
.wind-panel-head .now b{ color: #fff; font-weight: 700; }

.wind-chart{
  position: relative;
  width: 100%;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--bc-line);
  border-radius: 8px;
  overflow: hidden;
}
.wind-chart canvas{ display: block; width: 100%; height: 220px; }
@media (max-width: 700px){ .wind-chart canvas{ height: 180px; } }

.wind-legend{
  display:flex; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; font-size: 10.5px; color: var(--bc-text-soft);
}
.wind-legend .swatch{
  display:inline-flex; align-items:center; gap: 4px;
}
.wind-legend .swatch::before{
  content:''; width:12px; height:8px; border-radius: 2px;
}
.wl-0::before{ background: #5a6982; }
.wl-1::before{ background: #2ed178; }
.wl-2::before{ background: #b6d72a; }
.wl-3::before{ background: #f6c23b; }
.wl-4::before{ background: #ff8c2a; }
.wl-5::before{ background: #ef5350; }
.wl-6::before{ background: #b14cff; }

/* --- Tide panel --- */
.tide-panel{
  padding: 14px 18px;
  border-bottom: 1px solid var(--bc-line);
}
.tide-panel-head{
  display:flex; align-items:center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.tide-panel-head .title{
  font-size: 13px; color: #fff; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase;
}
.tide-now{
  margin-left: auto;
  display:flex; gap: 14px; align-items: center;
  font-size: 12px; color: var(--bc-text-soft);
}
.tide-now b{ color: #fff; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tide-extrema{
  display:flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--bc-text-soft);
}
.tide-extrema .x{
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 10px; border-radius: 12px; background: rgba(255,255,255,.04);
}
.tide-extrema .x.h{ color: #2ed178; }
.tide-extrema .x.l{ color: #ff8c2a; }
.tide-chart{
  position: relative; width: 100%;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--bc-line);
  border-radius: 8px;
  margin-top: 10px;
  overflow: hidden;
}
.tide-chart canvas{ display: block; width: 100%; height: 130px; }

/* --- Swell panel (only on Gippsland + Portland) --- */
.swell-panel{
  padding: 14px 18px;
  border-bottom: 1px solid var(--bc-line);
  display:flex; gap: 24px; flex-wrap: wrap;
}
.swell-panel .title{
  font-size: 13px; color: #fff; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase;
  margin-bottom: 8px; width: 100%;
}
.swell-stat{ display:flex; flex-direction: column; gap: 4px; }
.swell-stat .l{ font-size: 11px; color: var(--bc-text-soft); text-transform: uppercase; letter-spacing: 0.5px; }
.swell-stat .v{ font-size: 22px; color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.swell-stat .vs{ font-size: 11px; color: var(--bc-text-soft); }

/* --- Bite forecast at bottom --- */
.bite-strip{
  padding: 12px 18px 16px;
  display:flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.bite-strip .title{
  font-size: 11px; color: var(--bc-yellow); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
}
.bite-strip .days{ display:flex; gap: 6px; flex-wrap: wrap; }
.bite-strip .bd{
  padding: 5px 9px; border-radius: 6px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.04);
}
.bite-strip .bd.go      { background: rgba(46,209,120,.18); color: var(--bc-go); }
.bite-strip .bd.caution { background: rgba(255,167,38,.18); color: var(--bc-caution); }
.bite-strip .bd.nogo    { background: rgba(239,83,80,.18);  color: var(--bc-nogo); }
.bite-strip .bd .day{ display:inline-block; font-weight: 700; margin-right: 4px; opacity: .85; }

/* === 7-day region grid (statewide overview) === */
.region7{
  display: grid; grid-template-columns: 160px repeat(7, 1fr);
  gap: 1px; background: var(--bc-line);
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--bc-line);
  margin-top: 10px;
  font-size: 12px;
}
.region7 .rh, .region7 .rc{
  background: var(--bc-card); padding: 8px 8px; text-align: center;
}
.region7 .rh{ background: var(--bc-navy-3); color: #fff; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.region7 .rh.spot{ text-align: left; padding-left: 12px; background: var(--bc-navy); color: var(--bc-yellow); }
.region7 .rc.spotname{ text-align:left; padding-left:12px; font-weight:700; color: #fff; background: rgba(255,255,255,.02); }
.region7 .rc.go      { background: rgba(46,209,120,.22); color: var(--bc-go); font-weight:700; }
.region7 .rc.caution { background: rgba(255,167,38,.22); color: var(--bc-caution); font-weight:700; }
.region7 .rc.nogo    { background: rgba(239,83,80,.22);  color: var(--bc-nogo); font-weight:700; }
@media (max-width: 700px){
  .region7{ grid-template-columns: 110px repeat(7, 1fr); font-size: 11px; }
  .region7 .rh, .region7 .rc{ padding: 5px 4px; }
  .region7 .rh.spot, .region7 .rc.spotname{ padding-left: 8px; font-size: 10.5px; }
}

/* page H1 / lede on dark */
.fish-h1{
  font-size: clamp(22px, 4.5vw, 30px);
  margin: 8px 4px 6px;
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.fish-lede{
  font-size: clamp(14px, 2vw, 16px);
  color: var(--bc-text-soft);
  margin: 0 4px 8px;
  line-height: 1.55;
}
.fish-section-h{
  margin: 22px 4px 6px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}