/* ============================================================================
   daily-report.css — the map's POINT FORECAST TABLE and its sheet (W3; app
   2.0.3 daily_report_sheet.dart, the coordinate-table revisions).

   ── THE ALIGNMENT CONTRACT IS THE ROW, NOT SIX CONSTANTS ──────────────────
   Each table row is ONE flex row whose first cell (the rail) is sticky, so
   the label and its columns share a height because they are the same box.
   The app pins six heights to keep a frozen Flutter rail beside a scrolling
   column list; CSS has no such seam, so none of those numbers live here.

   ── TOKENS ARE theme-tokens.css's ─────────────────────────────────────────
   --text, --text-muted, --line, --line-strong, --surface, --surface-sunken,
   --accent, --accent-text, --accent-tint. Both themes come free.

   ── THE TWO SHAPES OF THE SHEET ───────────────────────────────────────────
   Phone (< 900 px): a bottom sheet with HALF and FULL detents; the grip (the
   handle AND the title bar, ≥ 44 px) drags it both ways, a tap toggles, down
   from half dismisses (js/daily-report.js mountSheetGrip sets the height).
   Desktop: a right-side panel the height of the map that stops short of the
   right-hand chrome — the model / layer pills and the control column — by
   --right-chrome (measured by js/map-stack.js), so it covers neither and
   moves nothing.
   ========================================================================== */

/* ── the sheet shell ─────────────────────────────────────────────────────── */
.drsheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: 55vh; max-height: 94vh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -8px 28px -14px rgba(0, 0, 0, 0.45);
}
.drsheet[hidden] { display: none; }
.drsheet__grip {
  flex: 0 0 auto; min-height: 44px; cursor: grab; touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.drsheet__grip:active { cursor: grabbing; }
.drsheet__grip:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.drsheet__handle {
  display: block; width: 34px; height: 4px; border-radius: 2px; background: var(--line-strong);
  margin: 6px auto 0; padding: 0; border: 0; cursor: inherit;
}
.drsheet__handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.drsheet__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 14px 8px; border-bottom: 1px solid var(--line);
}
.drsheet__where { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.drsheet__close {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 13px; padding: 4px 6px; border-radius: 3px;
}
.drsheet__close:hover { color: var(--text); }
.drsheet__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.drsheet__full {
  font-size: 13px; font-weight: 600; color: var(--accent-text); text-decoration: none; margin-left: auto;
}
.drsheet__full:hover { text-decoration: underline; }
.drsheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 0 20px; }

@media (min-width: 900px) {
  .drsheet {
    left: auto; right: calc(var(--right-chrome, 56px) + 12px); bottom: auto;
    top: var(--map-top, 68px); height: calc(100dvh - var(--map-top, 68px) - var(--timeline-h, 0px)) !important;
    max-height: none; width: min(640px, 52vw);
    border: 1px solid var(--line-strong); border-top: 0; border-radius: 0 0 4px 4px;
  }
  .drsheet__grip { cursor: default; touch-action: auto; }
  .drsheet__handle { display: none; }
}

/* ── the table ───────────────────────────────────────────────────────────── */
.pt { display: flex; flex-direction: column; gap: 10px; }
.pt__head { padding: 0 16px; }
.pt__title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; -webkit-user-select: none; user-select: none; }
.pt__frame { margin: 2px 0 0; font-size: 11px; color: var(--text-muted); }
.pt__selectors { padding: 0 16px; min-height: 30px; display: flex; align-items: center; }
.pt__caption { margin: -4px 0 0; padding: 0 16px; font-size: 11px; color: var(--text-muted); }
.pt__jumprow { display: flex; justify-content: space-between; align-items: center; height: 26px; padding: 0 16px; }
.pt__jumps { display: flex; gap: 4px; }
.pt__jumps[hidden] { visibility: hidden; display: flex; }
.pt__jump {
  width: 28px; height: 22px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--surface-sunken); color: var(--text); cursor: pointer;
  font: 700 14px/1 var(--font-sans, "Inter", system-ui, sans-serif); padding: 0;
}
.pt__jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* the sticky axis: the DAY strip over the HOUR row, scrolled with the table */
.pt__axis {
  --slot: 46px; --rail: 64px;
  position: sticky; top: 0; z-index: 4; display: flex; background: var(--surface);
  border-bottom: 1px solid var(--line-strong); margin: 0 16px;
}
.pt__axisrail { flex: 0 0 var(--rail); width: var(--rail); background: var(--surface); position: relative; z-index: 2; }
.pt__axiswrap { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.pt__days { position: relative; height: 24px; }
.pt__day {
  position: absolute; left: 4px; top: 0; height: 24px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; white-space: nowrap; will-change: transform;
}
.pt__day.is-locked { color: var(--text-muted); }
.pt__day[hidden] { display: none; }
.pt__lock {
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-text);
}
.pt__hours { display: flex; height: 18px; will-change: transform; }
.pt__hour {
  flex: 0 0 var(--slot); width: var(--slot); text-align: center; font: 500 10px/18px var(--font-sans, "Inter", system-ui, sans-serif);
  color: var(--text-muted); white-space: nowrap;
}
.pt__hour.is-daystart { border-left: 1px solid var(--line-strong); }
.pt__hour--measure { flex: none; width: auto; }   /* the measurer: the label's own font, not the column's width */
.pt__hour.is-selected { background: var(--accent-tint); color: var(--text); font-weight: 700; }

/* the scroller + the grid of rows */
/* ⚠ THE SCROLLPORT STARTS AT THE RAIL'S LEFT EDGE — margin, never padding.
   A scroll container's padding is INSIDE its scrollport, so with
   `padding: 0 16px` the columns scrolled into the 16 px gutter left of the
   sticky rail (which sticks at left: 0 of the content box) and fragments of
   bars, text and the tide note showed there (Grant, desktop panel). With the
   inset as margin the scrollport's left edge IS the rail's left edge, so
   nothing can be painted left of the rail at any scroll position; the rail
   itself is opaque and topmost in the row, so nothing shows under it. */
.pt__scroll { overflow-x: auto; overflow-y: hidden; margin: 0 16px; padding: 0; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.pt__scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pt__grid { --slot: 46px; --rail: 64px; position: relative; width: max-content; min-width: 100%; }
.pt__row { display: flex; align-items: stretch; position: relative; min-height: var(--rowh, 30px); }
.pt__row + .pt__row { border-top: 1px solid var(--line); }
.pt__rail {
  position: sticky; left: 0; z-index: 3; flex: 0 0 var(--rail); width: var(--rail);
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 2px 6px 2px 0; background-color: var(--surface); box-sizing: border-box;
  border-right: 1px solid var(--line);
  /* above every column layer: the cells, the gridlines, the now line (z 1),
     the selection shading — the second guarantee after the scrollport edge */
}
.pt__railname { font: 700 11px/1.15 var(--font-sans, "Inter", system-ui, sans-serif); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.pt__railunit { font: 500 10px/1.15 var(--font-sans, "Inter", system-ui, sans-serif); color: var(--text-muted); white-space: nowrap; }
.pt__track { display: flex; position: relative; }
.pt__track--full { position: relative; flex: 1 1 auto; }
.pt__cell {
  flex: 0 0 var(--slot); width: var(--slot); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  padding: 3px 0; white-space: nowrap; overflow: visible;
}
.pt__cell.is-daystart { border-left: 1px solid var(--line-strong); }
.pt__cell.is-selected { background: var(--accent-tint); }
.pt__cell.is-elapsed { opacity: 0.6; }
.pt__cell.is-locked { opacity: 1; }
.pt__pending { color: var(--text-muted); font-size: 11px; }
.pt__v { font: 600 12px/1.2 var(--font-sans, "Inter", system-ui, sans-serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt__v--small { font-size: 11px; }
.pt__v--off { color: var(--text-muted); font-weight: 500; }   /* an hour this row's model does not publish */
.pt__row--small .pt__cell { padding: 2px 0; }
.pt__row.is-plus .pt__v { color: var(--text-muted); }
.pt__curcell { display: inline-flex; align-items: center; gap: 2px; }
.pt__arrow { display: inline-block; vertical-align: middle; }
.pt__arrow path { stroke: var(--text-muted); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.pt__arrow--cur path { stroke: var(--text-muted); }
.pt__arrow--wind path { stroke-width: 2; }

/* WAVE: bars at 75 % of the column, the shared horizon scale, gridlines */
.pt__row--wave .pt__cell { align-items: stretch; padding: 4px 0 0; }
.pt__gridlines { position: absolute; inset: 4px 0 0 0; pointer-events: none; }
.pt__gridline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); }
.pt__bar { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.pt__bar .pt__arrow--wave { position: absolute; left: 50%; transform: translateX(-50%); top: 0; }
.pt__barfill { display: block; width: 75%; border-radius: 2px 2px 0 0; opacity: 0.92; }
.pt__railticks { position: absolute; inset: 4px 0 0 0; pointer-events: none; }
.pt__tick {
  position: absolute; right: 8px; transform: translateY(-50%);
  font: 500 9px/1 var(--font-sans, "Inter", system-ui, sans-serif); color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.pt__row--wave .pt__rail { position: sticky; justify-content: flex-start; padding-top: 6px; }

/* WIND: the palette arrow + compass over the speed, the gust beneath */
.pt__windcell { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.1; }
.pt__windtop { display: inline-flex; align-items: center; gap: 2px; }
.pt__compass { font: 500 10px/1.2 var(--font-sans, "Inter", system-ui, sans-serif); color: var(--text-muted); }
.pt__windspd { font: 700 12px/1.25 var(--font-sans, "Inter", system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.pt__gust { font: 500 10px/1.2 var(--font-sans, "Inter", system-ui, sans-serif); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* the dashed NOW line, through every row */
.pt__now { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--accent-text); opacity: 0.8; pointer-events: none; z-index: 1; }
.pt__now[hidden] { display: none; }

/* the tide row */
.pt__row--tide .pt__track--full { display: flex; align-items: center; }
.dr__tide { display: block; }
.dr__tideline { stroke: var(--accent); stroke-width: 2; fill: none; }
.dr__tidefill { fill: var(--accent); fill-opacity: 0.16; }
.dr__tidedot { fill: var(--accent); }
.dr__tidelbl { font-size: 8px; fill: var(--text-muted); }
.dr__tidenote { margin: 0; padding: 8px 10px; font-size: 12px; color: var(--text-muted); font-style: italic; white-space: nowrap; }
/* a row-level message is PINNED to the visible area of its row: sticky to
   the scrollport's left edge, just after the rail, whatever the scroll */
.pt__track--full .dr__tidenote { position: sticky; left: calc(var(--rail) + 8px); display: inline-block; }
.pt__retry {
  appearance: none; border: 1px solid var(--line-strong); background: none; color: var(--accent-text);
  font: 600 11px/1 var(--font-sans, "Inter", system-ui, sans-serif); padding: 3px 8px; border-radius: 999px; cursor: pointer; font-style: normal;
}

/* the sky icon, the blurb, sun / moon, the locked note, the sources */
.dr__sky { display: block; color: var(--text); }
.dr__blurb { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; }
.dr__blurb[hidden] { display: none; }
.dr__blurbh { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); }
.dr__sum { margin: 0; font-size: 14px; line-height: 1.45; }
.dr__line { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.dr__loading, .dr__err { margin: 0; padding: 0 16px; font-size: 13px; color: var(--text-muted); }
.dr__sun {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px 12px;
  margin: 0 16px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 3px;
}
.dr__sun dt { font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); }
.dr__sun dd { margin: 1px 0 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.dr__locked { margin: 0; padding: 0 16px; font-size: 12px; color: var(--text-muted); }
.dr__locked a { color: var(--accent-text); }
.pt__foot { padding: 0 16px; display: flex; flex-direction: column; gap: 2px; }
.pt__foot p { margin: 0; font-size: 10px; color: var(--text-muted); }

/* ── the compact model selectors (css/forecast.css .fcm — the map page does
   not load that sheet, so the rules the pickers need travel here) ─────── */
.fcm-row { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fcm { position: relative; display: inline-block; }
.fcm__trigger {
  display: inline-flex; align-items: center; gap: 2px; min-height: 24px;
  padding: 3px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--accent, #12A594); background: var(--accent-tint, rgba(18, 165, 148, 0.10));
  color: var(--text-2, var(--text-muted));
  font: 600 12px/1.2 var(--font-sans, "Inter", system-ui, sans-serif);
  white-space: nowrap;
}
.fcm__trigger:focus-visible { outline: 2px solid var(--accent, #12A594); outline-offset: 2px; }
.fcm__prefix { color: var(--text-2, var(--text-muted)); font-weight: 600; }
.fcm__name { color: var(--accent-text, var(--accent, #12A594)); font-weight: 700; }
.fcm__chevron {
  display: inline-block; width: 18px; text-align: center; line-height: 1;
  transform: translateY(-2px); transition: transform 160ms ease;
  color: var(--accent-text, var(--accent, #12A594));
}
.fcm__trigger[aria-expanded='true'] .fcm__chevron { transform: translateY(1px) rotate(180deg); }
.fcm__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: max-content; min-width: 240px; max-width: 280px; box-sizing: border-box;
  padding: 6px; background: var(--surface, #fff);
  border: 1px solid var(--line, #E3E9F0); border-radius: var(--r-lg, 12px);
  box-shadow: 0 10px 28px rgba(10, 22, 40, 0.14);
}
:root[data-theme='dark'] .fcm__panel { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); }
.fcm__panel[hidden] { display: none; }
.fcm__title {
  margin: 6px 10px 4px; font: 700 11px/1.2 var(--font-sans, "Inter", system-ui, sans-serif);
  color: var(--text-2, var(--text-muted)); text-transform: uppercase; letter-spacing: 0.06em; text-align: left;
}
.fcm__list { display: flex; flex-direction: column; gap: 1px; }
.fcm__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 44px; box-sizing: border-box; padding: 5px 10px;
  border: 0; border-radius: var(--r-md, 8px); background: none;
  text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.fcm__row:hover, .fcm__row:focus-visible { background: var(--surface-sunken, #F4F7FA); }
.fcm__row:focus-visible { outline: 2px solid var(--accent, #12A594); outline-offset: -2px; }
.fcm__rowtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
.fcm__rowname { font: 500 14px/1.25 var(--font-sans, "Inter", system-ui, sans-serif); color: var(--text-1, var(--text)); white-space: nowrap; }
.fcm__rowsub { font: 500 12px/1.25 var(--font-sans, "Inter", system-ui, sans-serif); color: var(--text-2, var(--text-muted)); white-space: nowrap; }
.fcm__check { visibility: hidden; flex: none; color: var(--accent-text, var(--accent, #12A594)); font-weight: 700; font-size: 14px; }
.fcm__row[aria-selected='true'] { background: var(--accent-tint, rgba(18, 165, 148, 0.10)); }
.fcm__row[aria-selected='true'] .fcm__rowname { color: var(--accent-text, var(--accent, #12A594)); font-weight: 600; }
.fcm__row[aria-selected='true'] .fcm__check { visibility: visible; }
.fcm__trigger[data-busy] .fcm__chevron { animation: fcm-spin 0.8s linear infinite; }
@keyframes fcm-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .pt__scroll { scroll-behavior: auto; }
  .drsheet { transition: none !important; }
}

/* ⚠ THE SEARCH PIN OUTLIVED THE SEARCH BOX. The inline map control is gone —
   it covered the mode row — and the NAV's search now drives the map. The pin it
   drops is still map chrome and still needs a style. */
.mapsearch__pin {
  width: 14px; height: 14px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.6);
}