* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #000000;
  color: #c8d4dc;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem;
}

main { flex: 1; }

/* Per-spot block. Stacks vertically on the page; PAG first, Venice below.
   Subsequent spots get a hairline cyan rule above them so the boundary
   reads as intentional rather than as two cards crashing into each other. */
.spot {
  display: block;
}

.spot + .spot {
  margin-top: 1.6em;
  padding-top: 1.6em;
  border-top: 1px solid rgba(0, 206, 209, 0.18);
}

.spot-name {
  font-family: 'JetBrains Mono', monospace;
  color: #FF1493;
  font-size: 1.4em;
  margin-bottom: 0.6em;
  letter-spacing: 0.02em;
}

h1 {
  font-family: 'JetBrains Mono', monospace;
  color: #FF1493;
  font-size: 2em;
  margin-bottom: 0.2em;
}

.tagline {
  color: #00CED1;
  font-size: 1.2em;
  font-style: italic;
  margin-bottom: 2em;
}

.now {
  margin-bottom: 1.6em;
  padding: 1.2rem 1.4rem;
  background: #0a0a14;
  border: 1px solid #1a1a2e;
  border-radius: 8px;
}

.now-header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.now-title {
  font-family: 'JetBrains Mono', monospace;
  color: #FF1493;
  font-size: 1.2em;
  margin: 0;
}

.now-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto; /* push stale-pill to the right; score sits next to title */
}

.now-score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
}

.now-score-value {
  color: #7d8793;
  font-size: 0.85em;
  font-weight: 400;
}

.now-score-value::after {
  content: "/10";
  color: #7d8793;
  font-weight: 400;
}

.now-score-verdict {
  color: #7d8793;
  font-size: 0.82em;
  font-style: italic;
  letter-spacing: 0.04em;
}

.now-score-verdict[data-band="skip"]      { color: #7d8793; }
.now-score-verdict[data-band="marginal"]  { color: #c08842; }
.now-score-verdict[data-band="fun-sized"] { color: #00CED1; }
.now-score-verdict[data-band="go now"]    { color: #FF1493; font-weight: 600; }
.now-score-verdict[data-band="fires"]     { color: #FF1493; font-weight: 700; }

.stale-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c08842;
  border: 1px solid #c08842;
  border-radius: 3px;
  padding: 0.05rem 0.4rem;
  vertical-align: middle;
}

.now[data-stale] .metric-value,
.now[data-stale] .metric-tag,
.now[data-stale] .tide-value,
.now[data-stale] .now-wave {
  opacity: 0.5;
}

.now-body {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 1.4rem;
  align-items: start;
}

.now-data { min-width: 0; }

.now-map {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.now-map-svg {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
}

.now-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.metric-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72em;
  color: #7d8793;
  letter-spacing: 0.08em;
}

.metric-value {
  font-family: 'JetBrains Mono', monospace;
  color: #E0FFFF;
  font-size: 1.05em;
}

.metric-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72em;
  font-style: italic;
  color: #7d8793;
  letter-spacing: 0.04em;
  margin-top: 0.05rem;
  min-height: 1em; /* reserve space so layout doesn't jump when populated */
}

.metric-tag[data-quality="offshore"]  { color: #00CED1; }
.metric-tag[data-quality="onshore"]   { color: #c08842; }
.metric-tag[data-quality="sideshore"] { color: #7d8793; }

.tide-row {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding-top: 0.8rem;
  margin-bottom: 1rem;
  border-top: 1px dashed #1a1a2e;
}

.tide-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72em;
  color: #7d8793;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.tide-value {
  font-family: 'JetBrains Mono', monospace;
  color: #E0FFFF;
  font-size: 0.95em;
}

.tide-chunk { display: inline-block; white-space: nowrap; }

.wave-frame {
  position: relative;
  margin-bottom: 0.6rem;
}

/* Surfaced only when |Tm − Tp| ≥ 1.5s — i.e. when the buoy's average period
   meaningfully diverges from the dominant. Lets the rare signal explain
   itself instead of carrying a full-time legend for an ambient layer. */
.wave-mean-label {
  position: absolute;
  top: 0;
  right: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65em;
  font-style: italic;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

.wave-mean-label[hidden] { display: none; }

.now-wave {
  display: block;
  width: 100%;
  height: 80px;
}

/* Three superimposed components, painted bottom→top in DOM order. Colors
   align with the rest of the page (notes section + map): cyan = swell,
   pink = wind, muted white = mean (no concept slot of its own).
   Chop is wind-driven ripple, so it carries the pink wind color. */
.wave-chop  { stroke: #FF1493;                   stroke-width: 0.75; }
.wave-mean  { stroke: rgba(255, 255, 255, 0.4);  stroke-width: 1.5; }
.wave-swell { stroke: #00CED1;                   stroke-width: 2.5; }

.now-updated {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78em;
  color: #7d8793;
  margin: 0;
}

@media (max-width: 700px) {
  .now-body { grid-template-columns: 1fr; }
  .now-map-svg { max-width: 280px; margin: 0 auto; }

  /* Mobile reorder: data first, glossary last. The "how to read this" panel
     stays available but stops blocking the answer above the fold. */
  main { display: flex; flex-direction: column; }
  .notes { order: 10; }
}

@media (max-width: 480px) {
  .now-grid { gap: 0.5rem; }
  .metric-value { font-size: 0.95em; white-space: nowrap; }
}

/* Defensive: any future CSS animations/transitions inherit a near-instant duration
   when the user has requested reduced motion. The wave.js loop also self-disables. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* Inlined under the now-card, no chrome — hairline cyan rule, label + value
   stacked. Visual weight matches a footnote, not a competing card. */
.window {
  margin: -0.4em 0 1.6em;
  padding: 0.7rem 0 0;
  border-top: 1px solid rgba(0, 206, 209, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.window-label {
  font-family: 'JetBrains Mono', monospace;
  color: #FF1493;
  font-size: 0.78em;
  letter-spacing: 0.1em;
  text-transform: lowercase;
}

.window-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.window-when {
  font-family: 'JetBrains Mono', monospace;
  color: #E0FFFF;
  font-size: 1.15em;
  letter-spacing: 0.02em;
}

.window-when[data-empty] {
  color: #7d8793;
  font-style: italic;
  font-size: 0.95em;
}

.window-meta {
  font-family: 'JetBrains Mono', monospace;
  color: #7d8793;
  font-size: 0.82em;
  letter-spacing: 0.04em;
}

.outlook {
  margin-bottom: 1.6em;
  padding: 1.2rem 1.4rem;
  background: #0a0a14;
  border: 1px solid #1a1a2e;
  border-radius: 8px;
}

.outlook-title {
  font-family: 'JetBrains Mono', monospace;
  color: #FF1493;
  font-size: 1.2em;
  margin-bottom: 1rem;
}

.outlook-grid {
  display: grid;
  /* All 5 days in a single row. Body max-width fits 5×~150px comfortably;
     overflow-x is the safety net if the viewport is narrower than that. */
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 0.8rem;
  overflow-x: auto;
}

.outlook-day {
  background: #000;
  border: 1px solid #1a1a2e;
  border-radius: 6px;
  padding: 0.8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.outlook-day-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95em;
  color: #FF1493;
  margin-bottom: 0.3rem;
  letter-spacing: 0.04em;
}

/* Per-day rideable-hours count, derived in JS from data.score.forecast.
   Sits under the day name as the headline answer for that day; counts
   hours where score.overall >= RIDEABLE_SCORE_THRESHOLD (5, the
   "fun-sized" band). Truer than peak-of-hourly at multi-day horizons. */
.outlook-day-ridable {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82em;
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}

.outlook-day-ridable[data-state="rideable"] { color: #00CED1; }
.outlook-day-ridable[data-state="flat"]     { color: #7d8793; font-style: italic; }

/* Days 4-5 of the outlook: GFS-Wave skill drops past ~72h, so fade the
   card and surface a small "less certain" tag rather than laundering
   model noise as a confident forecast. */
.outlook-day[data-confidence="low"] { opacity: 0.65; }

.outlook-day-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7em;
  font-style: italic;
  color: #c08842;
  margin-bottom: 0.3rem;
  letter-spacing: 0.04em;
}

.outlook-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
}

.outlook-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7em;
  color: #7d8793;
  letter-spacing: 0.06em;
}

.outlook-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
  color: #E0FFFF;
  white-space: nowrap;
}

/* Tide row in the outlook: 2-4 events per day. Stack vertically with
   color-coded H/L markers — easier to scan than a long " · "-joined line. */
.outlook-tide-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78em;
  color: #c8d4dc;
  text-align: right;
  line-height: 1.4;
}

.outlook-tide-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  font-family: 'JetBrains Mono', monospace;
}

.tide-event {
  font-size: 0.78em;
  color: #c8d4dc;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.tide-event-kind {
  display: inline-block;
  width: 0.9em;
  text-align: center;
  margin-right: 0.15em;
  font-weight: 600;
}

.tide-event-kind[data-kind="H"] { color: #00CED1; }
.tide-event-kind[data-kind="L"] { color: #c08842; }

.outlook-empty {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82em;
  color: #7d8793;
  font-style: italic;
}

@media (max-width: 480px) {
  .outlook-grid { grid-template-columns: 1fr; gap: 0.5rem; }
  .outlook-day { padding: 0.6rem 0.7rem; }
  .outlook-value { font-size: 0.82em; }
}

.notes {
  margin-bottom: 1.6em;
  padding: 1rem 1.4rem;
  background: #0a0a14;
  border: 1px solid #1a1a2e;
  border-radius: 8px;
}

.notes-title {
  font-family: 'JetBrains Mono', monospace;
  color: #FF1493;
  font-size: 0.9em;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}

.notes-title::before { content: "// "; color: #7d8793; }

.notes-list {
  list-style: none;
  font-size: 0.82em;
  color: #c8d4dc;
}

/* Each row is positioned (not flex) so the text + inline em phrases flow
   as one continuous paragraph. The dot sits absolutely-positioned to the
   left, vertically aligned to the first line. */
.notes-list li {
  position: relative;
  padding-left: 1.1rem;
  line-height: 1.55;
  margin-bottom: 0.5rem;
}

.notes-list li:last-child { margin-bottom: 0; }

.notes-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.notes-list strong {
  font-family: 'JetBrains Mono', monospace;
  color: #E0FFFF;
  font-weight: 600;
  margin-right: 0.2em;
}

.notes-list em {
  font-style: italic;
  color: #E0FFFF;
}

.notes-cyan::before  { background: #00CED1; }
.notes-pink::before  { background: #FF1493; }
.notes-tide::before  { background: #7d8793; }
.notes-amber::before { background: #c08842; }

.status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78em;
  font-style: italic;
  color: #7d8793;
  letter-spacing: 0.02em;
  margin-top: 0.3em;
}

a { color: #00CED1; text-decoration: none; }
a:hover { text-decoration: underline; }

footer {
  border-top: 1px solid #1a1a2e;
  margin-top: 3em;
  padding-top: 1em;
  text-align: center;
  font-style: italic;
  color: #00CED1;
  font-size: 0.9em;
}