/* ── The chart ─────────────────────────────────────────────────────────────
   Real geometry, projected by build.py, now sitting on the dark band. Land is
   a pale translucent wash, water is a shade lighter than the band it sits on,
   and the only cyan on it is the track you are actually being offered.
   ------------------------------------------------------------------------ */

.chart { position: relative; display: grid; justify-items: center; width: 100%; }

.chart__svg {
  width: 100%;
  height: auto;
  max-height: 42svh;
  overflow: hidden; /* the mainland runs past the frame on purpose — clip it */
}
@media (min-width: 64rem) {
  .chart__svg { max-height: min(72svh, 700px); }
}

/* Water and land -------------------------------------------------------- */
.chart__water { fill: var(--sea); fill-opacity: 0.34; stroke: none; }

.chart__land path {
  fill: var(--foam);
  fill-opacity: 0.13;
  stroke: rgba(232, 241, 245, 0.36);
  stroke-width: 0.8;
  stroke-linejoin: round;
}

/* Depth contours -------------------------------------------------------- */
.chart__contour {
  fill: none;
  stroke: rgba(232, 241, 245, 0.16);
  stroke-width: 0.5;
  stroke-dasharray: 2 2.6;
}

/* Soundings ------------------------------------------------------------- */
.chart__sounding {
  fill: var(--foam-3);
  font-family: var(--mono);
  font-size: 6.5px;
  letter-spacing: 0.02em;
  opacity: 0.8;
  text-anchor: middle;
}

/* Track lines ----------------------------------------------------------- */
.chart__track {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.chart__track.is-active {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.85s var(--ease-out), opacity 0.2s linear;
}

/* Destinations ---------------------------------------------------------- */
.chart__place-halo { fill: var(--cyan); opacity: 0; transition: opacity var(--dur) var(--ease); }
.chart__place-dot {
  fill: var(--navy);
  stroke: var(--foam-2);
  stroke-width: 1;
  transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease);
}
.chart__place-label {
  fill: var(--foam-2);
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.03em;
  transition: fill var(--dur) var(--ease);
}

.chart__place.is-active .chart__place-halo { opacity: 0.22; }
.chart__place.is-active .chart__place-dot { fill: var(--cyan); stroke: var(--cyan); }
.chart__place.is-active .chart__place-label { fill: var(--cyan); }

/* A couple of labels would otherwise run into the coastline. */
.chart__place[data-place="klaipeda"] .chart__place-label,
.chart__place[data-place="minge"] .chart__place-label {
  text-anchor: end;
  transform: translateX(-16px);
}

/* Home port ------------------------------------------------------------- */
.chart__home-dot { fill: var(--foam); }
.chart__home-ring { fill: none; stroke: var(--foam); stroke-width: 0.9; }
.chart__home-pulse { fill: none; stroke: var(--foam); stroke-width: 0.9; opacity: 0; }
.chart__home-label {
  fill: var(--foam);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* Chart furniture ------------------------------------------------------- */
.chart__rose-n { fill: var(--foam-2); }
.chart__rose-label,
.chart__scale text {
  fill: var(--foam-3);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-anchor: middle;
}
.chart__scale text:last-of-type { text-anchor: end; }
.chart__scale line { stroke: var(--foam-3); stroke-width: 0.8; }

/* ── Draft diagram ─────────────────────────────────────────────────────────
   Sits on a white card, so this one keeps the light-ground ink values. Same
   drawing language: the boat's 0.80 m draft against the depth of the water
   she actually floats in. 40 units = 1 metre.
   ------------------------------------------------------------------------ */

.draft__water { fill: var(--cyan); opacity: 0.12; }
.draft__waterline { stroke: var(--sea); stroke-width: 1; }
.draft__bed { fill: none; stroke: var(--ink-3); stroke-width: 1.4; }
.draft__hatch path { stroke: var(--ink-3); stroke-width: 6; stroke-dasharray: 1 7; opacity: 0.5; }

.draft__hull { fill: var(--navy); stroke: var(--navy); stroke-width: 1.2; stroke-linejoin: round; }
.draft__deck { stroke: var(--navy); stroke-width: 3; stroke-linecap: round; }
.draft__screen { fill: var(--cyan); fill-opacity: 0.35; stroke: var(--navy); stroke-width: 1.4; stroke-linejoin: round; }
.draft__top { stroke: var(--navy); stroke-width: 3; stroke-linecap: round; }
.draft__centre { stroke: #fff; stroke-width: 0.7; stroke-dasharray: 6 3 1 3; opacity: 0.55; }
.draft__ext { stroke: var(--ink-3); stroke-width: 0.7; stroke-dasharray: 3 3; opacity: 0.6; fill: none; }

.draft__ruler line { stroke: var(--rule-light); stroke-width: 1; }
.draft__ticks line { stroke: var(--ink-3); stroke-width: 1; }
.draft__ticks text { fill: var(--ink-3); font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; }

/* Cyan marks the draft — the number that decides where this boat can go.
   Beam and depth stay neutral so only one figure is emphasised. */
.draft__call line { stroke: var(--sea-2); stroke-width: 1; }
.draft__call circle { fill: var(--sea-2); }
.draft__call text { fill: var(--sea-2); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; }

.draft__call--draft line { stroke: var(--cyan-3); stroke-width: 1.4; }
.draft__call--draft circle { fill: var(--cyan-3); }
.draft__call--draft text { fill: var(--cyan-3); font-weight: 500; }

.draft__call--depth line { stroke: var(--ink-3); stroke-dasharray: 3 3; }
.draft__call--depth circle { fill: var(--ink-3); }
.draft__call--depth text { fill: var(--ink-3); }

.draft__call--beam line { stroke: var(--ink-3); }
.draft__call--beam circle { fill: var(--ink-3); }
.draft__call--beam text { fill: var(--ink-3); }