/* Next Stops — inline-SVG chart table (rebuild Step 2).
 *
 * Replaces the Leaflet map's styling on this page. Everything is namespaced
 * under #ns-root .ns-chart-* deliberately: the design export ships generic
 * .cw-* / utility class names that would collide with the rest of the theme,
 * so none of those names are adopted here.
 *
 * Colours, widths and opacities that describe the CHART ITSELF are set as SVG
 * attributes in next-stops-chart.js, not here — they change per interaction
 * state, and one source of truth for them beats two. This file owns layout,
 * transitions and the things CSS is actually better at.
 *
 * These values are measured from the approved export and are final; the pending
 * "more colour" revision is scoped to the lower journal, not the chart.
 */

/* The chart replaces #ns-map inside .ns-stage; it inherits the same full-bleed
   footprint the Leaflet container had, including the parchment ground colour
   that used to show through between tiles. */
#ns-root #ns-chart {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  /* Chart-table ground, from the v2 export: a warmer paper than the flat
     #f4e7d0 it replaces, plus the export's own grain — a 19px dot screen with
     two soft washes (gold top-left, rust bottom-right) so the sea reads as
     printed paper rather than a solid fill. Colour only; no SVG layer value
     above or below this rule moves. */
  background-color: #F6ECD8;
  background-image:
    radial-gradient(rgba(58, 46, 34, .055) 1px, transparent 1px),
    radial-gradient(circle at 22% 18%, rgba(200, 168, 116, .22), transparent 62%),
    radial-gradient(circle at 82% 84%, rgba(184, 67, 31, .07), transparent 58%);
  background-size: 19px 19px, auto, auto;
  background-repeat: repeat;
  z-index: 1;
  overflow: hidden;
}

#ns-root .ns-chart-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* The pan/zoom group. This is the ONLY thing that moves when a voyage is
   selected — there is no real map, so framing is a single transform. */
#ns-root .ns-chart-zoom {
  transform-origin: 0 0;
  transition: transform 1.05s cubic-bezier(.32, .02, .24, 1);
  will-change: transform;
}

/* Basemap */
#ns-root .ns-chart-graticule {
  fill: none;
  stroke: #d8c39a;
  stroke-width: .9;
  opacity: .55;
}
#ns-root .ns-chart-land {
  fill: #e8d9b6;
  stroke: #c2a97c;
  stroke-width: 1.3;
  stroke-linejoin: round;
}

/* Routes. Stroke/width/opacity are written per-state by the JS; the transition
   is what makes hover and select read as a change rather than a jump. */
#ns-root .ns-chart-route,
#ns-root .ns-chart-bleed {
  pointer-events: none;
  transition: stroke .35s, opacity .35s, stroke-width .35s;
}
#ns-root .ns-chart-dot {
  pointer-events: none;
  transition: opacity .35s;
}

/* Draw-on reveal. pathLength="1" is set on each route in JS, which normalises
   every course to a dash length of 1 so all 19 draw at the same rate regardless
   of real-world distance. Per-route delay is set inline. */
@keyframes ns-chart-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
#ns-root .ns-chart-draw {
  stroke-dasharray: 1 1;
  animation: ns-chart-draw 1.5s ease-out both;
}

/* Hit targets: invisible fat strokes carrying all pointer + keyboard input.
   No focus ring by design — focusing a leg peeks it in (see hoverOn in the JS),
   and that lit route IS the focus indicator, matching the export. */
#ns-root .ns-chart-hit {
  cursor: pointer;
  fill: none;
}
#ns-root .ns-chart-hit:focus {
  outline: none;
}
#ns-root .ns-chart-hit:focus-visible {
  outline: none;
}

/* Loading / failure notice, centred in the chart area. Replaced by the SVG on
   success; on failure it stays and tells the truth, because the voyages are all
   still reachable from the journal below. */
#ns-root .ns-chart-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  font: 400 15px/1.6 'Nunito Sans', sans-serif;
  color: #6b5942;
  /* Matches the chart ground above (flat, without the grain) so the loading
     and failure panel sits on the same paper as its surround. */
  background: #F6ECD8;
  z-index: 2;
}
#ns-root .ns-chart-status--error {
  color: #8c2f13;
}

@media (prefers-reduced-motion: reduce) {
  #ns-root .ns-chart-zoom {
    transition: none;
  }
  #ns-root .ns-chart-route,
  #ns-root .ns-chart-bleed,
  #ns-root .ns-chart-dot {
    transition: none;
  }
  #ns-root .ns-chart-draw {
    animation: none;
    stroke-dasharray: none;
  }
}

/* ==========================================================================
   THE VESSEL MARKER (rebuild Step 4)

   Dreamworld's last known SPOT fix, drawn by next-stops-live.js as an SVG <g>
   inside the chart's zoom layer.

   These are deliberately NOT the .ns-live / .ns-live-dot / .ns-live-ring names
   still sitting in next-stops.css. Those belong to the retired Leaflet divIcon
   and are written for absolutely-positioned HTML — left/top/margin percentages
   mean nothing on an SVG circle, so reusing the names would inherit a rule set
   that cannot apply and would re-book .ns-live-dot for a second purpose. The
   look is ported; the selectors are new. (Deleting the dead ones is Step 6.)

   The dot's size lives on the r attribute in JS, not here: the marker's group
   carries a counter-scale so that r stays constant on screen at every zoom.
   ========================================================================== */

#ns-root .ns-vessel {
  cursor: pointer;
}

/* Teal on cream, never the gold-on-rust of the "where next?" beacon — one is a
   real vessel at a real coordinate, the other is aspiration. non-scaling-stroke
   holds the cream ring at 3px through the group's counter-scale. */
#ns-root .ns-vessel-dot {
  fill: #0B6E66;
  stroke: #FCF6EC;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

/* transform-box: fill-box is what makes transform-origin: center mean this
   circle's own centre rather than the SVG viewport's origin. */
#ns-root .ns-vessel-ring {
  fill: rgba(11, 110, 102, .45);
  transform-origin: center;
  transform-box: fill-box;
  animation: nsVesselPulse 2.8s ease-out infinite;
}

/* Timing and scale ported verbatim from the retired nsLive keyframe — the pulse
   a returning visitor already knows should be indistinguishable. */
@keyframes nsVesselPulse {
  0%        { transform: scale(1);   opacity: .7 }
  70%, 100% { transform: scale(3.6); opacity: 0 }
}

/* Older than 24h: muted and static. A week-old fix must never pulse like a live
   one — the animation is the thing that says "now". */
#ns-root .ns-vessel--stale .ns-vessel-dot {
  fill: #7d8d8a;
  stroke: #e6ddc8;
}
#ns-root .ns-vessel--stale .ns-vessel-ring {
  animation: none;
  opacity: 0;
}

#ns-root .ns-vessel:focus-visible {
  outline: 3px solid #0B6E66;
  outline-offset: 2px;
}

/* Unlike the drifting fish in next-stops-shell.css, this animation is paused to
   nothing rather than frozen in place. That rule exists to preserve negative
   animation-delays; this one has no delay to preserve, and a ring stopped
   mid-pulse at 3.6x would sit on the chart as an unexplained teal disc. */
@media (prefers-reduced-motion: reduce) {
  #ns-root .ns-vessel-ring {
    animation: none;
    opacity: .35;
  }
}

/* ---- #ns-card dressed for the vessel ------------------------------------
   The same card the chart fills for a voyage, re-slotted. Only the two things
   that would otherwise be wrong need overriding: the year, which a position
   does not have, and the era pill's rust, which would read as an era badge on
   what is actually a tracking state. */
#ns-root .ns-card--vessel .ns-card-year {
  display: none;
}
#ns-root .ns-card--vessel .ns-card-era {
  color: #0B6E66;
  background: rgba(11, 110, 102, .1);
}