/* Living Ocean V1 — evidence chips, tones and the timeline "now" tick (plan §4.3, §5.4).
 *
 * Colour carries one meaning each: cyan = intelligence (MODELED, INTERPOLATED),
 * amber = caution (older run, stale report), neutral = everything that makes no
 * claim; OFFICIAL (an authority's own product) is neutral too, set apart by its double rule.
 * There is NO GREEN in this file: nothing on this page is VERIFIED.
 * The base .ev, .ev-observed, .ev-modeled and .ev-none rules stay in
 * coastal-map.html; this file only adds the new classes and tones.
 */

:root {
  --ev-cyan: var(--cyan, #35c7ff);
  --ev-amber: var(--amber, #ffb020);
  --ev-text: var(--text, #eaf7fd);
  --ev-muted: var(--muted, #9fc0d2);
  --ev-dim: var(--dim, #70889a);
  --ev-bg: var(--bg, #0a1420);
}

/* INTERPOLATED: a method on MODELED → cyan, but dotted and unfilled so it never reads as a node value. */
.ev-interpolated {
  color: var(--ev-cyan);
  background: transparent;
  border: 1px dotted rgba(53, 199, 255, .75);
}

/* ILLUSTRATIVE: a visual device → dim, italic, unfilled. */
.ev-illustrative {
  color: var(--ev-dim);
  background: transparent;
  border: 1px solid rgba(112, 136, 154, .34);
  font-style: italic;
  font-weight: 700;
}

/* CONTEXT: background that makes no claim → neutral, quiet. */
.ev-context {
  color: var(--ev-muted);
  background: rgba(159, 192, 210, .08);
  border: 1px solid rgba(159, 192, 210, .28);
}

/* NO RECORD: an absence, not a claim → neutral, like NOT ESTABLISHED but dotted. */
.ev-norecord {
  color: var(--ev-dim);
  background: rgba(112, 136, 154, .10);
  border: 1px dotted rgba(112, 136, 154, .55);
}

/* RECORD INCONSISTENT: a refused record → neutral, never styled as a risk colour. */
.ev-inconsistent {
  color: var(--ev-dim);
  background: rgba(112, 136, 154, .12);
  border: 1px solid rgba(112, 136, 154, .34);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* OFFICIAL: an authority's own product, shown as issued → pure neutral with a double rule (a seal), never a colour.
 * Amber and red belong to the hazard the product describes (the storm stages), not to the class; the verified-status
 * colour would claim VERIFIED, which AYON Ecosystem does not claim for another authority's product. */
.ev-official {
  color: #f2f2f2;
  background: rgba(242, 242, 242, .06);
  border: 1px solid rgba(242, 242, 242, .7);
  box-shadow: inset 0 0 0 1px var(--ev-bg), inset 0 0 0 2px rgba(242, 242, 242, .4);
}

/* Tones for non-evidence chips (run age, observation freshness). */
.tone-neutral {
  color: var(--ev-text);
  background: rgba(226, 249, 255, .08);
  border: 1px solid rgba(226, 249, 255, .22);
}
.tone-muted {
  color: var(--ev-dim);
  background: rgba(112, 136, 154, .12);
  border: 1px solid rgba(112, 136, 154, .34);
}
.tone-amber {
  color: var(--ev-amber);
  background: rgba(255, 176, 32, .14);
  border: 1px solid rgba(255, 176, 32, .40);
}

/* Timeline "now" tick: the viewer's own clock, placed by `left: calc(var(--now-pos) * 100%)`.
 * It is a thin neutral line with a small label; it never uses the cyan of the selected stop,
 * so the present time is not confused with a modeled valid time. */
.tl-track { position: relative; }
.tl-now {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: calc(var(--now-pos, 0) * 100%);
  width: 0;
  pointer-events: none;
  z-index: 2;
}
.tl-now-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--ev-text);
  opacity: .85;
  border-radius: 1px;
  box-shadow: 0 0 0 1px var(--ev-bg);
}
.tl-now-label {
  position: absolute;
  top: -18px;
  left: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ev-text);
  background: var(--ev-bg);
  border: 1px solid rgba(226, 249, 255, .22);
  border-radius: 999px;
  padding: 1px 7px;
}
/* Stops already in the past are quieter; the selected stop keeps its own style. */
.stop.past { opacity: .72; }
.stop .rel { font-size: 10px; font-weight: 600; color: var(--ev-muted); }

@media (prefers-reduced-motion: reduce) {
  .tl-now, .tl-now-tick, .tl-now-label { transition: none; }
}