/* --------------------------------------------------------------------------
   THE TIDE PANEL (static/js/open_map_tide.js, 2026-09-04).

   Its own stylesheet rather than more rules in open_map.css, following the
   weather block next door: it is a self-contained panel on a station card and
   nothing else on the page shares a rule with it.

   NOTHING HERE IS AN ERROR COLOUR. "No tidal signal in this gauge's own
   record" is the ORDINARY answer — most gauges on this map are a long way
   from tidewater — and a refusal painted red would read as a broken panel on
   the great majority of stations it appears on. The single tinted element is
   the marine model's displacement warning, which is a caveat on an answer
   that stands, not a failure. The one piece of emphasis is the row of the
   constituent table the verdict actually rests on, because a table where
   every row looks equally load-bearing hides the argument.
   -------------------------------------------------------------------------- */

.tide-card {
  margin: 4px 20px 20px; padding: 14px 16px;
  border: 1px solid var(--line, #d9dde1); border-radius: 8px;
  background: var(--surface-2, #f7f9fa);
}
.tide-card__title { margin: 0 0 6px; font-size: 0.95rem; font-weight: 600; }
.tide-card__subhead {
  margin: 0 0 4px; font-size: 0.85rem; font-weight: 600;
  color: var(--ink-2, #4b5156);
}
.tide-card__lede { margin: 0 0 8px; font-size: 0.85rem; line-height: 1.5; }
.tide-card__working {
  margin: 0 0 8px; font-size: 0.78rem; color: var(--ink-3, #6b7280);
  font-variant-numeric: tabular-nums;
}
/* A sentence the source insists travels with its numbers. Set in from the
   left and given the card's full ink, rather than the amber box it used to
   wear: a fill plus a coloured edge on a paragraph is a highlighter, and the
   amber said "severity" about a sentence that is a qualifier. The indent and
   the full ink keep it attached to the numbers above and unskippable. */
.tide-card__warning {
  margin: 8px 0 0; padding: 0 0 0 12px; font-size: 0.78rem; line-height: 1.45;
  color: var(--ink, #1A1A19);
}
.tide-card__section { margin-top: 14px; }
.tide-card__heading {
  margin: 0 0 4px; font-size: 0.82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-2, #4b5156);
}
.tide-card__note, .tide-card__method {
  margin: 4px 0 0; font-size: 0.75rem; line-height: 1.5;
  color: var(--ink-3, #6b7280);
}
.tide-card__method { margin: 2px 0 0; }
.tide-card__source {
  margin: 12px 0 0; font-size: 0.72rem; color: var(--ink-3, #6b7280);
}

/* The constituent table. Narrow, tabular figures, and scrollable on its own
   rather than widening the popup — the panel lives in a fixed-width window. */
.tide-card__table {
  margin: 8px 0 0; border-collapse: collapse; font-size: 0.76rem;
  font-variant-numeric: tabular-nums; width: 100%;
}
.tide-card__table caption {
  text-align: left; font-size: 0.72rem; color: var(--ink-3, #6b7280);
  padding-bottom: 4px;
}
.tide-card__table th, .tide-card__table td {
  text-align: left; padding: 3px 8px 3px 0;
  border-bottom: 1px solid var(--line, #e5e8ea);
}
.tide-card__table thead th {
  font-weight: 600; color: var(--ink-3, #6b7280);
}
.tide-card__table tbody th { font-weight: 600; }
/* The constituent the verdict rests on. M2 is lunar and separable in a
   fortnight; the others are reported and take no part in the decision, and
   this is the only visual statement of that difference. */
.tide-card__row--decides th, .tide-card__row--decides td {
  font-weight: 600; color: var(--ink-1, #1f2937);
}

body.dark-mode .tide-card { background: #23303c; border-color: var(--line, #444); }
body.dark-mode .tide-card a { color: #7fb8ff; }
body.dark-mode .tide-card__table th,
body.dark-mode .tide-card__table td { border-bottom-color: #3a4a58; }
body.dark-mode .tide-card__row--decides th,
body.dark-mode .tide-card__row--decides td { color: #e8eef4; }

@media (max-width: 640px) { .tide-card { margin: 4px 12px 16px; } }