/* Forecast panel: weather, wind, swell, tides, moon and the best surf window per trip day. */
.fc-btn {
  position: fixed; z-index: 4;
  right: calc(max(var(--frame), env(safe-area-inset-right)) + 14px);
  bottom: calc(max(var(--frame), env(safe-area-inset-bottom)) + 14px);
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  background: rgba(18,10,28,.35); border: 1px solid var(--hairline); color: var(--ivory-dim);
  cursor: pointer; display: grid; place-items: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .3s, color .3s, border-color .3s;
}
.fc-btn:hover { color: var(--ivory); border-color: var(--ivory-dim); }
.fc-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
body[data-scene="hammock"] .fc-btn { background: rgba(255,255,255,.35); }

.forecast { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; }
.forecast[hidden] { display: none; }
.fc-backdrop { position: absolute; inset: 0; background: rgba(10,6,16,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fc-panel {
  position: relative; width: min(100%, 1380px); max-height: calc(100dvh - 32px);
  overflow: auto; -webkit-overflow-scrolling: touch;
  background: rgba(18,10,28,.82); border: 1px solid rgba(239,231,214,.22); border-radius: 18px;
  color: #efe7d6; padding: clamp(16px, 3vw, 28px);
  font-family: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  animation: fc-in .5s cubic-bezier(.2,.7,.2,1);
}
@keyframes fc-in { from { opacity: 0; transform: translateY(12px); } }
.fc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.fc-title { font-size: .72rem; letter-spacing: .36em; text-transform: uppercase; color: rgba(239,231,214,.7); }
.fc-title b { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 1.6rem; letter-spacing: .02em; text-transform: none; color: #efe7d6; margin-right: 14px; }
.fc-close { background: none; border: 1px solid rgba(239,231,214,.3); color: rgba(239,231,214,.8); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.fc-close:hover { color: #efe7d6; border-color: #efe7d6; }
.fc-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; }

.fc-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); grid-auto-rows: auto; gap: 10px; }
.fc-day { border: 1px solid rgba(239,231,214,.16); border-radius: 14px; padding: 12px 12px 10px; min-width: 0; display: flex; flex-direction: column; gap: 10px; background: rgba(239,231,214,.03); }
/* the eight sections share row tracks across cards, so Surf, Wind, Swell… line up */
@supports (grid-template-rows: subgrid) {
  .fc-day { display: grid; grid-template-rows: subgrid; grid-row: span 8; row-gap: 10px; align-content: start; }
}
.fc-day.today { border-color: rgba(239,231,214,.45); }
.fc-date { display: flex; align-items: baseline; justify-content: space-between; }
.fc-date b { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.55rem; }
.fc-date span { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(239,231,214,.6); }
.fc-wx { display: flex; align-items: center; gap: 10px; }
.fc-wx svg { width: 34px; height: 34px; flex: none; fill: none; stroke: #efe7d6; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.fc-temp { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; line-height: 1; }
.fc-temp small { font-size: .95rem; color: rgba(239,231,214,.6); margin-left: 4px; }
.fc-cond { font-size: .78rem; color: rgba(239,231,214,.75); line-height: 1.25; }
.fc-row { display: grid; grid-template-columns: 46px 1fr; gap: 6px; font-size: .78rem; line-height: 1.35; align-items: start; min-width: 0; }
.fc-row > div, .fc-row > ul { min-width: 0; }
.fc-row label { font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(239,231,214,.55); padding-top: .25em; }
.fc-best { border-top: 1px solid rgba(239,231,214,.14); border-bottom: 1px solid rgba(239,231,214,.14); padding: 8px 0; }
.fc-best b { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.35rem; display: block; line-height: 1.05; }
.fc-best span { color: rgba(239,231,214,.72); font-size: .74rem; }
.fc-tides ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
.fc-tides li { white-space: nowrap; }
.fc-tides li i { font-style: normal; display: inline-block; width: 1em; color: rgba(239,231,214,.55); }
.fc-moon { display: flex; align-items: center; gap: 8px; }
.fc-moon svg { width: 18px; height: 18px; flex: none; }
.fc-dim { color: rgba(239,231,214,.45); }
.fc-note { margin-top: 16px; font-size: .66rem; letter-spacing: .08em; color: rgba(239,231,214,.45); line-height: 1.5; }
.fc-status { padding: 40px 0; text-align: center; font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(239,231,214,.6); }
.fc-status .ring { width: 26px; height: 26px; margin: 0 auto 14px; border-radius: 50%; border: 1px solid rgba(239,231,214,.25); border-top-color: #efe7d6; animation: fc-spin 1s linear infinite; }
@keyframes fc-spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .forecast { padding: 10px; }
  .fc-panel { border-radius: 14px; }
  .fc-days { grid-template-columns: 1fr; }
}