/* The sea-state panel on a coastal station's card
   (static/js/open_map_sea_state.js, base/sea_state.py).

   Its own file rather than more rows in open_map.css, for the reason the
   weather block's stylesheet gives: the script that draws it is loaded by the
   open map and by nothing else, so the CSS that paints it should be too, and a
   stylesheet that is one feature's is a stylesheet that can be removed with
   the feature.

   The palette is the page's own tokens with hard-coded fallbacks, and every
   colour has a `body.dark-mode` partner — this page's dark mode is a class on
   <body>, not a media query.

   Nothing in here reserves space. The panel either exists with content in it
   or was never appended: an inland station has no element to style, which is
   the whole design of the feature and the reason there is no `:empty` rule
   anywhere below. */

.sea-state {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--r-sm, 6px);
  background: var(--surface-2, #f8fafc);
}

body.dark-mode .sea-state {
  border-color: #374151;
  background: #1f2937;
}

.sea-state__title {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-1, #1f2937);
}

body.dark-mode .sea-state__title { color: #e5e7eb; }

.sea-state__lede {
  margin: 0 0 8px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-3, #6b7280);
}

body.dark-mode .sea-state__lede { color: #9ca3af; }

/* --- the "now" strip ---------------------------------------------------- */
/* A wrapping row rather than a fixed grid: between one and four tiles are
   drawn, because a variable the model had nothing for is left out entirely
   rather than shown empty. A grid with four columns would leave holes where
   the absent ones would have been, which is the appearance this feature is
   built to avoid. */
.sea-state__now {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 10px;
}

.sea-state__tile {
  display: flex;
  flex-direction: column;
  min-width: 6.5em;
}

.sea-state__tile-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-3, #6b7280);
}

body.dark-mode .sea-state__tile-label { color: #9ca3af; }

.sea-state__tile-value {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink-1, #1f2937);
  font-variant-numeric: tabular-nums;
}

body.dark-mode .sea-state__tile-value { color: #f3f4f6; }

.sea-state__tile-unit {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-3, #6b7280);
}

body.dark-mode .sea-state__tile-unit { color: #9ca3af; }

/* --- the two dials ------------------------------------------------------ */

.sea-state__dirs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0 0 6px;
}

.sea-state__dir {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sea-state__dir-words {
  display: flex;
  flex-direction: column;
}

.sea-state__dir-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-3, #6b7280);
}

body.dark-mode .sea-state__dir-label { color: #9ca3af; }

.sea-state__dir-text {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-1, #1f2937);
}

body.dark-mode .sea-state__dir-text { color: #f3f4f6; }

.sea-dial {
  width: 2.4em;
  height: 2.4em;
  flex: none;
}

.sea-dial__ring {
  fill: none;
  stroke: var(--line, #d1d5db);
  stroke-width: 1.4;
}

body.dark-mode .sea-dial__ring { stroke: #4b5563; }

.sea-dial__north {
  stroke: var(--ink-3, #9ca3af);
  stroke-width: 1.4;
  stroke-linecap: round;
  fill: none;
}

body.dark-mode .sea-dial__north { stroke: #6b7280; }

/* One arrow, painted the same hue as the wave series so the dial and the
   chart read as the same statement. */
.sea-dial__arrow {
  stroke: var(--brand-blue-deep, #1f6f93);
  fill: var(--brand-blue-deep, #1f6f93);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.dark-mode .sea-dial__arrow { stroke: #58a6ff; fill: #58a6ff; }

/* The current's dial takes the current's colour, so the two directions are
   never mistaken for one another at a glance. Keyed on the CONVENTION rather
   than on position: a cell that answers with currents and no waves draws one
   dial, and it must still be the current's colour. */
.sea-state__dir--towards .sea-dial__arrow {
  stroke: #0f766e;
  fill: #0f766e;
}

body.dark-mode .sea-state__dir--towards .sea-dial__arrow {
  stroke: #5eead4;
  fill: #5eead4;
}

/* --- the words under the numbers ---------------------------------------- */

.sea-state__convention,
.sea-state__warning,
.sea-state__caveat,
.sea-state__source {
  margin: 6px 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-3, #6b7280);
}

body.dark-mode .sea-state__convention,
body.dark-mode .sea-state__warning,
body.dark-mode .sea-state__caveat,
body.dark-mode .sea-state__source { color: #9ca3af; }

/* The convention note is the one sentence that stops a reader taking two
   arrows that look alike to mean the same thing, so it is not styled as fine
   print. */
.sea-state__convention {
  color: var(--ink-2, #4b5563);
  border-left: 3px solid var(--brand-blue-deep, #1f6f93);
  padding-left: 8px;
}

body.dark-mode .sea-state__convention {
  color: #d1d5db;
  border-left-color: #58a6ff;
}

.sea-state__warning { color: #b45309; }
body.dark-mode .sea-state__warning { color: #fbbf24; }

.sea-state__caveat { font-style: italic; }

.sea-state__source a { color: inherit; }