/* ============================================================================
   fc-controls.css — the SHARED web forecast controls (js/fc-controls.js) and
   hourly chart (js/fc-chart.js). Surf loads it first; marine and weather
   (Stages 3-4) load the same file rather than restyling their own. Tokens
   only, so dark theme is the token swap.
   ========================================================================== */

/* ── shared day controls (fc-controls.js) ───────────────────────────────── */
.fcc { display: flex; flex-direction: column; gap: 10px; }
.fcc-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fcc-span {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: var(--surface-sunken); border: 1px solid var(--line);
}
.fcc-span__btn {
  border: 0; background: none; border-radius: 999px; padding: 6px 14px; cursor: pointer;
  font: 600 13px var(--font-sans, "Inter", sans-serif); color: var(--text-2, var(--text-secondary));
}
.fcc-span__btn[aria-pressed='true'] { background: var(--bg); color: var(--text); box-shadow: var(--shadow-sm); }
.fcc-span__btn:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 1px; }
/* rev K §1: a list row's mode — the switch (signed in) or a small row heading
   (signed out) — at the row's start; the slot keeps one height either way */
.fcc-rowmode { flex: none; display: flex; align-items: center; min-height: 36px; }
.fcc-rowlabel { font: 700 13px var(--font-sans, "Inter", sans-serif); color: var(--text); white-space: nowrap; }
.fcc-seg { flex: none; }
.fcc-seg .fcc-span__btn { white-space: nowrap; }
.fcc-nav { display: inline-flex; gap: 6px; }
.fcc-arrow {
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer;
}
.fcc-arrow:disabled { opacity: 0.35; cursor: default; }
.fcc-arrow:not(:disabled):hover { border-color: var(--accent); color: var(--accent-text); }
.fcc-now {
  border: 1px solid var(--accent); background: var(--accent-tint); color: var(--accent-text);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
  font: 600 13px var(--font-sans, "Inter", sans-serif);
}
.fcc-now:disabled { border-color: var(--line); background: none; color: var(--text-2, var(--text-secondary)); cursor: default; }
.fcc-rail { overflow-x: auto; scrollbar-width: thin; padding: 4px 2px 6px; }
.fcc-days { display: flex; gap: 0; position: relative; width: max-content; }
.fcc-day {
  display: block; flex: none; width: 108px; padding: 10px 8px; margin: 0 3px; cursor: pointer;
  text-align: center; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
}
/* ⚠ THE WHOLE CARD IS THE HIGHLIGHT; three-day mode joins three cards into
   one wrapper (squared inner corners, no gaps), so the selection reads as
   ONE range rather than three picks. */
.fcc-day[aria-pressed='true'] { background: var(--accent-tint); border-color: var(--accent); }
.fcc-day[aria-pressed='true'][data-edge='first'] { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; border-right-width: 0; }
.fcc-day[aria-pressed='true'][data-edge='mid'] { border-radius: 0; margin: 0; border-left-width: 0; border-right-width: 0; }
.fcc-day[aria-pressed='true'][data-edge='last'] { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; border-left-width: 0; }
.fcc-day[data-cursor='true'] .fcp-day__dow { color: var(--accent-text); }
.fcc-day:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
/* one card layout for open AND locked days: weekday, then date, then the
   card's third line (range + rating, or the Fetch+ mark) — rev A §5 */
.fcc-daycard { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 76px; }
.fcc-daycard__dow { font: 700 13px/1.2 var(--font-sans, "Inter", sans-serif); color: var(--text); }
.fcc-daycard__date { font: 500 12px/1.2 var(--font-sans, "Inter", sans-serif); color: var(--text-2, var(--text-secondary)); }
.fcc-day[data-cursor='true'] .fcc-daycard__dow { color: var(--accent-text); }
/* ⚠ LOCKED: the same box, muted, with the Fetch+ mark — never blank, never
   a floating band over the strip. */
.fcc-day--locked { background: var(--surface-sunken); border-style: dashed; border-color: var(--line-strong); }
.fcc-day--locked .fcc-daycard__dow,
.fcc-day--locked .fcc-daycard__date { color: var(--text-muted); }
.fcc-day--locked:hover { border-color: var(--brand-teal); }
/* rev J §2: a calendar day the forecast does not cover — the same box,
   selectable, saying so plainly (fc-controls calendarDays) */
.fcc-daycard__nodata { margin-top: 6px; font: 600 12px/1.2 var(--font-sans, "Inter", sans-serif); color: var(--text-muted); }
.fcc-lock { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; }
.fcc-lock__ic { width: 12px; height: 12px; color: var(--brand-teal); }
:root[data-theme='dark'] .fcc-lock__ic { color: var(--brand-teal-bright); }
.fcc-lock__pill {
  padding: 3px 8px; border-radius: 999px; background: var(--brand-teal); color: #fff;
  font: 700 10px/1 var(--font-sans, "Inter", sans-serif); letter-spacing: 0.02em;
}
:root[data-theme='dark'] .fcc-lock__pill { background: var(--brand-teal-bright); color: var(--ink-on-bright); }

/* ── the shared chart (fc-chart.js) ─────────────────────────────────────── */
.fcx { position: relative; width: 100%; touch-action: pan-y; cursor: crosshair; outline: none; }
.fcx:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); border-radius: 8px; }
.fcx__svg { display: block; overflow: visible; }
.fcx__svg text { font-family: var(--font-sans, "Inter", system-ui, sans-serif); }
/* rev O — STANDING WEB RULE: hourly charts shade night (sunset → sunrise).
   Light: the live stacked chart's ink at 5.5%; dark: black at 22% (the same
   pair .fcp-stack__night uses), as tokens. */
:root { --fcx-night: color-mix(in srgb, var(--ch-ink) 5.5%, transparent); }
:root[data-theme='dark'] { --fcx-night: rgba(0, 0, 0, 0.22); }
.fcx__night { fill: var(--fcx-night); }
.fcx__grid { stroke: var(--ch-grid); stroke-width: 1; }
.fcx__ytick, .fcx__yunit { font-size: 10px; fill: var(--fcp-faint-text, var(--text-muted)); }
.fcx__xtick { font-size: 10px; fill: var(--fcp-faint-text, var(--text-muted)); }
/* QA 2 §1: the day labels stand out from the hour ticks — bold, the full text
   colour (not muted), a size up. Every chart (surf, marine, weather, the Daily
   Check Wide card) draws them through mountHourChart. */
.fcx__xdate { font-size: 11px; font-weight: 700; fill: var(--text); }
.fcx__zone { font-size: 9px; font-weight: 600; fill: var(--fcp-faint-text, var(--text-muted)); }
.fcx__daysep { stroke: var(--ch-grid); stroke-width: 1; stroke-dasharray: 3 3; }
.fcx__selcol { fill: var(--ch-surf); opacity: 0.08; }
.fcx__sel { stroke: var(--accent); stroke-width: 1.5; opacity: 0.95; }
.fcx__now { stroke: var(--ch-now); stroke-width: 1.2; }
.fcx__nowpill rect { fill: var(--ch-now); }
.fcx__nowtext { font-size: 9px; font-weight: 700; fill: var(--ch-card); }
.fcx__badge rect { fill: var(--accent); }
.fcx__badgetext { font-size: 10.5px; font-weight: 700; fill: var(--on-accent, #fff); }
:root[data-theme='dark'] .fcx__badgetext { fill: var(--ink-on-bright); }
:root[data-theme='dark'] .fcx__badge rect { fill: var(--accent-text); }
.fcx__band { fill: var(--accent); opacity: 0.14; }
.fcx__over { fill: var(--text); }
.fcx__overval { font-size: 10px; font-weight: 700; fill: var(--text); }
.fcx__msg { font-size: 12px; fill: var(--text-2, var(--text-secondary)); }


/* ── the designed dropdown (fc-controls.js mountDropdown) ────────────────────
   Trigger, chevron, panel and rows are css/nav.css's .navtab / .navmenu rules;
   only what a SELECT needs on top of a menu lives here. */
.fcc-dd__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text);
  font-weight: 600; cursor: pointer; max-width: 260px;
}
.fcc-dd__trigger[aria-expanded='true'] { background: var(--surface-sunken); }
.fcc-dd__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fcc-dd__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcc-dd__panel { top: calc(100% + 4px); padding-top: 8px; }
.fcc-dd__row { flex-direction: row; align-items: center; justify-content: space-between; }
.fcc-dd__row[aria-selected='true'] { background: var(--accent-tint); }
.fcc-dd__row[aria-selected='true'] .navmenu__row-name { color: var(--accent-text); }
.fcc-dd__row[aria-selected='true']::after { content: '✓'; color: var(--accent-text); font-weight: 700; }

/* ── share (fc-controls.js shareButton) ─────────────────────────────────── */
.fcc-share__wrap { position: relative; display: inline-flex; align-items: center; }
.fcc-share {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text);
}
.fcc-share:hover { border-color: var(--accent); color: var(--accent-text); }
.fcc-share:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fcc-share__ic { width: 18px; height: 18px; }
.fcc-share__note {
  position: absolute; top: calc(100% + 6px); right: 0; white-space: nowrap; z-index: 5;
  padding: 4px 10px; border-radius: 8px; background: var(--text); color: var(--bg);
  font: 600 12px var(--font-sans, "Inter", sans-serif);
}
.fcc-share__note:empty { display: none; }

/* a text control in the day-controls row (e.g. "Reveal ideal window"):
   the 1 day / 3 days toggle's height, radius and type, the arrows' border */
.fcc-btn {
  height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text);
  font: 600 13px var(--font-sans, "Inter", sans-serif);
}
.fcc-btn[hidden] { display: none; }
.fcc-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.fcc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* rev B §4: the shared ‹ › stepper — in the day bar and in every chart card */
.fcc-stepper { display: inline-flex; gap: 6px; }
.fcc-stepper--card { margin-left: auto; gap: 4px; }
.fcc-stepper--card .fcc-arrow { width: 28px; height: 28px; font-size: 16px; }
.fcc-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── the chart area's two columns (fc-controls.js forecastColumns) ───────── */
.fcc-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.fcc-cols__main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fcc-cols__sticky { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1100px) {
  .fcc-cols {
    grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
    grid-template-areas: 'main side';
  }
  .fcc-cols__main { grid-area: main; }
  .fcc-cols__side { grid-area: side; align-self: stretch; }
  /* sticky inside the columns wrapper: it holds through the whole main column
     and leaves with it.
     ⚠ NO INNER SCROLL (rev I follow-up). Rev D capped this to the viewport
     with max-height + overflow-y: auto, which gave the column its own
     vertical scrollbar. The cards now sit at their natural height; a column
     taller than the viewport stays reachable because forecastColumns() drives
     --fcc-sticky-top from the scroll position (rev M §2): pinned under the
     header until the reveal anchor's 1/3 line, then 1:1 up to
     viewport − column height − margin, so its BOTTOM rides the viewport
     bottom. */
  .fcc-cols__sticky {
    position: sticky; top: var(--fcc-sticky-top, calc(var(--nav-h, 68px) + 12px));
  }
}

/* ── the Wave Height map preview (js/map-preview.js) ─────────────────────── */
.mpv { gap: 8px; }
.mpv__unit { font-size: 11px; font-weight: 600; color: var(--text-2, var(--text-secondary)); }
.mpv__view {
  position: relative; display: block; width: 100%; aspect-ratio: 1.6; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  background: var(--surface-sunken);   /* the neutral ground when the basemap is refused */
}
.mpv__view:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* layer order = the full map's: base tiles, field (+ arrows), occlusion, marker */
.mpv__tiles, .mpv__layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.mpv__tiles img { position: absolute; max-width: none; }
.mpv__marker {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(10, 22, 40, 0.35);
}
.mpv__status {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0;
  font: 600 12px var(--font-sans, "Inter", sans-serif); color: var(--text-2, var(--text-secondary));
}
.mpv__status[hidden] { display: none; }
.mpv__status--loading {
  background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--bg) 50%, var(--surface-sunken) 100%);
  background-size: 200% 100%; animation: mpv-skel 1.4s ease-in-out infinite;
}
@keyframes mpv-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .mpv__status--loading { animation: none; } }
/* the full map's legend stops, compact: one swatch per stop, alternate labels */
.mpv__legend { display: flex; gap: 1px; }
.mpv__stop { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.mpv__sw { display: block; width: 100%; height: 7px; }
.mpv__stop:first-child .mpv__sw { border-radius: 3px 0 0 3px; }
.mpv__stop:last-child .mpv__sw { border-radius: 0 3px 3px 0; }
.mpv__lbl { margin-top: 2px; font-size: 9.5px; line-height: 1.1; color: var(--text-2, var(--text-secondary));
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.mpv__when { font-size: 11px; color: var(--text-2, var(--text-secondary)); }

/* ── fixed readout lanes (fc-chart.js readoutLanes) ──────────────────────── */
.fcx-readout { display: flex; flex-direction: column; min-width: 0; }
.fcx-readout--end { align-items: flex-end; text-align: right; }
.fcx-lane {
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.fcx-lane--main { height: 40px; line-height: 40px; }
.fcx-lane--sub { height: 18px; line-height: 18px; font-size: 12px; color: var(--text-2, var(--text-secondary)); }
.fcx-lane--reserve { visibility: hidden; }
.fcx-lane > * { vertical-align: middle; }
.fcx-lane * { transition: none; }

/* rev F §1: "Back to now" in the day-controls row — the row's button shape,
   accent while there is something to reset, greyed (but holding its space,
   so the row never shifts) when the selection is already now */
.fcc-btn.fcc-now:not(:disabled) { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-text); }
.fcc-btn.fcc-now:disabled { opacity: 0.55; cursor: default; }

/* ── Nearby Buoys (js/nearby-buoys.js) — one card per wave buoy (rev H) ──
   Every line has a fixed box (reserved where empty), so a card is one height
   always; live readings, never following the chart selection. */
.nb { display: flex; flex-direction: column; gap: 8px; }
.nb-heading { margin: 4px 2px 0; font: 700 15px/1.2 var(--font-sans, "Inter", sans-serif); color: var(--text); }
.nb-list { display: flex; flex-direction: column; gap: 10px; }
.nb-card {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg, 12px);
  background: var(--bg); color: var(--text); text-decoration: none;
}
.nb-card:hover { border-color: var(--accent); }
.nb-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nb-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; height: 20px; }
.nb-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 15px/20px var(--font-sans, "Inter", sans-serif);
}
.nb-dist { flex: none; font: 600 12px var(--font-sans, "Inter", sans-serif); color: var(--text-2, var(--text-secondary)); font-variant-numeric: tabular-nums; }
.nb-when { margin: 0; height: 16px; font-size: 12px; line-height: 16px; color: var(--text-2, var(--text-secondary));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.nb-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 4px; }
.nb-col { min-width: 0; }
.nb-lbl { margin: 0 0 2px; height: 16px; font: 600 11px/16px var(--font-sans, "Inter", sans-serif);
  color: var(--text-2, var(--text-secondary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-big { margin: 0; height: 32px; font: 800 26px/32px var(--font-sans, "Inter", sans-serif); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-big small { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--text-2, var(--text-secondary)); }
.nb-sub { margin: 0; height: 17px; font-size: 12.5px; line-height: 17px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.nb-reserve { visibility: hidden; }
.nb-link { margin-top: 2px; height: 18px; font: 600 13px/18px var(--font-sans, "Inter", sans-serif); color: var(--accent-text); }
.nb-card:hover .nb-link { text-decoration: underline; }
.nb-card--skeleton {
  height: 170px; border-color: transparent;
  background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--bg) 50%, var(--surface-sunken) 100%);
  background-size: 200% 100%; animation: mpv-skel 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .nb-card--skeleton { animation: none; } }
.nb-empty { margin: 0; font-size: 13px; color: var(--text-2, var(--text-secondary)); }

/* rev I follow-up: a compact card-HEADER button (top right, level with the
   title) — the chart cards' header controls' family: 28 px, hairline border,
   pill, on the card ground; accent on hover */
.fcc-hbar-end { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.fcc-hbtn {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; flex: none;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--text);
  font: 600 12px var(--font-sans, "Inter", sans-serif); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.fcc-hbtn:hover { border-color: var(--accent); color: var(--accent-text); }
.fcc-hbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nb-headrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 2px 0; }
.nb-headrow .nb-heading { margin: 0; }
/* Stage 3a §3: the marine type filter sits between the title and Explore
   Buoys; the row wraps rather than squeezing at narrow side widths */
.nb-headrow:has(.nb-filter) { flex-wrap: wrap; }
.nb-filter { margin-left: auto; }
.nb-filter .fcc-dd__trigger { font-size: 12px; padding-top: 4px; padding-bottom: 4px; }

/* Stage 4 rev A: the Radar preview's honest "no site in range" state — the
   card frame stays (basemap where it loads), the message says why */
.mpv__status--empty { padding: 0 16px; text-align: center; font-size: 13px; font-weight: 600;
  color: var(--text-2, var(--text-secondary)); background: color-mix(in srgb, var(--surface-sunken) 82%, transparent); }