/* Screen: voyage — the ship sails, Day / Fuel / Cash tick, one surprise card (Chapter 3).
   Landscape: big map with a side panel (stops, ship's log). Portrait and phones: map on top. */

.screen--voyage {
  gap: var(--sp-3);
}

/* ── HUD ───────────────────────────────────────────────── */
.voyage-hud {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto;
  grid-template-areas:
    'title day fuel cash actions'
    'strip strip strip strip strip';
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  border: 1px solid rgba(13, 48, 71, 0.06);
}

.voyage-hud__title {
  grid-area: title;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.voyage-hud__title .screen__title {
  font-size: var(--fs-xl);
  gap: var(--sp-2);
}

.voyage-hud__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  margin: 0 !important;
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.hud-stat--day {
  grid-area: day;
}

.hud-stat--fuel {
  grid-area: fuel;
}

.hud-stat--cash {
  grid-area: cash;
}

.voyage-hud__strip {
  grid-area: strip;
  min-width: 0;
}

.voyage-hud__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.hud-stat {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.hud-stat__emoji {
  flex: none;
  font-size: 1.7rem;
  line-height: 1;
}

.hud-stat__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.hud-stat__label {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--ink-soft);
  line-height: 1.2;
  white-space: nowrap;
}

.hud-stat__value {
  font-size: var(--fs-md);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}

.hud-cash {
  font-size: var(--fs-lg);
  color: var(--gain);
  transition: color var(--dur-2) var(--ease);
}

.hud-cash.is-down {
  color: var(--loss);
}

.hud-bar {
  display: block;
  height: 8px;
  margin-top: 4px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}

.hud-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--sea-500);
  transition: width var(--dur-3) var(--ease);
}

.hud-bar--fuel .hud-bar__fill {
  background: var(--accent-500);
}

.voyage-fast.is-on {
  --btn-bg: var(--accent-100);
  --btn-border: var(--accent-500);
  --btn-shadow: var(--accent-600);
  --btn-fg: var(--accent-700);
}

/* ── Body: map and ship + side panel ───────────────────── */
.voyage-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: var(--sp-3);
  align-items: start;
}

.voyage-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

/* The 🗺️/⛴️ switch only shows where the map and the ship cannot both fit (phones, portrait tablets). */
.voyage-views {
  display: none;
}

.voyage-map {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* The map and the ship under it stay on screen on short landscape screens. */
  max-width: max(320px, calc((100dvh - 400px) * 10 / 7));
  margin: 0 auto;
}

/* The ship's side view with the cargo still on board. */
.voyage-ship {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: max(320px, calc((100dvh - 400px) * 10 / 7));
  margin: 0 auto;
  padding: var(--sp-2) var(--sp-3) 0;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--sea-50) 0%, var(--sea-100) 100%);
  box-shadow: var(--shadow-2);
  border: 1px solid rgba(13, 48, 71, 0.06);
  overflow: hidden;
}

.voyage-ship__art {
  display: flex;
  justify-content: center;
  width: 100%;
}

.voyage-ship__art > .voyage-stage {
  width: 100%;
  max-width: 560px;
  height: auto;
  max-height: 160px;
}

.voyage-map .map {
  width: 100%;
}

.voyage-map .map-ship {
  filter: drop-shadow(0 2px 3px rgba(13, 48, 71, 0.35));
}

/* A bigger ship on the voyage map: it is the star of this screen. Her disc grows less, so it stays off
   the port names along the way. */
.voyage-map .map-ship > * {
  transform: scale(1.5);
}

.voyage-map .map-ship > .map-ship-halo {
  transform: scale(1.2);
}

/* The status line sits between the map and the ship (so it shows in both phone views), over the
   bottom edge of the map. */
.voyage-status {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  align-self: center;
  gap: var(--sp-2);
  max-width: calc(100% - 2 * var(--sp-3));
  margin: calc(-24px - var(--sp-3)) 0 0 !important;
  padding: var(--sp-1) var(--sp-4) var(--sp-1) var(--sp-3);
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-2);
  font-weight: 900;
  font-size: var(--fs-md);
  line-height: 1.3;
  text-align: center;
}

/* Entering pirate or stormy waters: the status line turns into a calm banner for a few seconds. It
   never covers the map or the ship. */
.voyage-status.is-zone {
  padding-left: var(--sp-4);
  background: #fff6df;
  border-color: var(--accent-500);
  animation: voyage-zone-in var(--dur-3) var(--ease);
}

.voyage-status.is-zone.is-storm {
  background: var(--sea-50);
  border-color: var(--sea-500);
}

.voyage-status.is-still {
  animation: none;
}

@keyframes voyage-zone-in {
  from {
    opacity: 0.3;
    transform: translateY(6px) scale(0.96);
  }
}

.voyage-status__emoji {
  font-size: 1.3em;
}

.voyage-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

.voyage-tip:empty {
  display: none;
}

.voyage-tip .mate {
  max-width: none;
}

.voyage-panel {
  padding: var(--sp-3) var(--sp-4);
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  border: 1px solid rgba(13, 48, 71, 0.06);
}

.voyage-panel__title {
  font-size: var(--fs-base);
  margin-bottom: var(--sp-2);
}

/* Stops ①②③ */
.voyage-stops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.voyage-stop {
  --stop-color: var(--stop-1);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'badge name'
    'badge state'
    '. due'
    '. race';
  align-items: center;
  column-gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-md);
  border: 2px solid transparent;
}

.voyage-stop .stop-badge,
.voyage-stop__flag {
  grid-area: badge;
}

.voyage-stop__name {
  grid-area: name;
  font-weight: 900;
  line-height: 1.2;
}

.voyage-stop__state {
  grid-area: state;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--ink-faint);
  line-height: 1.2;
}

.voyage-stop__due {
  grid-area: due;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--ink-soft);
  line-height: 1.3;
}

.voyage-stop__due.is-late .voyage-stop__due-status {
  padding: 0 0.4em;
  border-radius: var(--r-sm);
  background: var(--accent-100);
  color: var(--accent-700);
}

.voyage-stop__race {
  grid-area: race;
  display: flex;
  flex-direction: column;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--sea-800);
  line-height: 1.3;
}

.voyage-stop__race.is-ahead span + span,
.voyage-stop__race.is-won {
  color: var(--gain);
}

/* The trip's chips and money when home. */
.voyage-trip[hidden] {
  display: none;
}

.voyage-trip__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.voyage-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.voyage-chip {
  font-size: var(--fs-xs);
  font-weight: 900;
}

.voyage-home {
  margin: 0 !important;
  font-weight: 900;
  color: var(--sea-800);
  line-height: 1.3;
}

.voyage-stop.is-here {
  border-color: var(--stop-color);
  background: color-mix(in srgb, var(--stop-color) 8%, #ffffff);
}

.voyage-stop.is-here .voyage-stop__state {
  color: var(--ink);
}

.voyage-stop.is-done .voyage-stop__state {
  color: var(--gain);
}

/* Ship's log */
.voyage-log__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.voyage-log__item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  animation: log-in var(--dur-3) var(--ease) both;
}

/* Lines already shown stay put when a new one arrives. */
.voyage-log__item.is-old {
  animation: none;
}

.voyage-log__item:first-child:not(.is-start) .voyage-log__text {
  color: var(--ink);
}

.voyage-log__item .voyage-log__text {
  min-width: 0;
  overflow-wrap: anywhere; /* long port names and big text wrap inside the log */
  color: var(--ink-soft);
}

@keyframes log-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.voyage-log__day {
  padding: 0 0.45em;
  border-radius: var(--r-pill);
  background: var(--sea-100);
  color: var(--sea-800);
  font-size: var(--fs-xs);
  font-weight: 900;
  white-space: nowrap;
}

/* ── The surprise card ─────────────────────────────────── */
.event-modal {
  width: min(680px, 100%);
}

.event-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.event-card__top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.event-card__emoji {
  flex: none;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--sea-100);
  font-size: 2.6rem;
  line-height: 1;
}

.event-modal--danger .event-card__emoji {
  background: var(--accent-100);
}

.event-modal--opportunity .event-card__emoji {
  background: var(--gain-bg);
}

.event-card__text {
  margin: 0 !important;
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1.35;
}

.event-card__cover {
  margin: 0 !important;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  border: 2px solid var(--sea-300);
  background: var(--sea-50);
  font-weight: 800;
  font-size: var(--fs-base);
}

.event-card__tip .mate {
  max-width: none;
}

.event-card__ask {
  margin: 0 !important;
  font-weight: 900;
  font-size: var(--fs-base);
  color: var(--sea-700);
}

.event-card__answers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-3);
}

.event-answer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  min-height: 64px;
  padding: var(--sp-3);
  border: 3px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  text-align: left;
  font-size: var(--fs-sm);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--line);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.event-answer:hover {
  border-color: var(--sea-400);
}

.event-answer:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--line);
}

.event-answer:disabled {
  cursor: default;
  opacity: 0.6;
  transform: none;
}

.event-answer__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.event-answer__emoji {
  font-size: 1.7rem;
  line-height: 1;
}

.event-answer__label {
  font-size: var(--fs-md);
  font-weight: 900;
  line-height: 1.2;
}

.event-answer__odds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  font-weight: 800;
}

.event-answer__odds.is-sure {
  color: var(--gain);
}

.event-answer__tag {
  font-weight: 900;
  color: var(--ink-soft);
}

.event-answer__line {
  font-weight: 700;
  line-height: 1.3;
}

.event-answer__line.is-risk {
  color: var(--ink-soft);
}

.event-outcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}

.event-outcome__big {
  margin: 0 !important;
  font-size: 3.4rem;
  line-height: 1;
}

.event-outcome__lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.event-outcome__line {
  margin: 0 !important;
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: 1.35;
}

.event-outcome__line.is-first {
  font-size: var(--fs-lg);
  font-weight: 900;
}

.event-outcome.is-good .event-outcome__line.is-first {
  color: var(--gain);
}

.event-outcome__line.is-helper {
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--accent-100);
  color: var(--accent-700);
  font-weight: 900;
}

.event-card__words {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  min-width: 0;
}

.event-round__chip {
  background: var(--accent-100);
  color: var(--accent-700);
  font-weight: 900;
}

.event-outcome__go,
.event-round__next {
  margin-top: var(--sp-2);
  min-width: 220px;
}

.event-answer__line {
  overflow-wrap: anywhere;
}

/* ── Portrait tablets: map on top, stops and log side by side ── */
@media (max-width: 60em) {
  .voyage-hud {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      'title title actions'
      'day fuel cash'
      'strip strip strip';
  }

  .voyage-hud__actions {
    justify-content: flex-end;
  }

  .voyage-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .voyage-map,
  .voyage-ship {
    max-width: none;
  }

  .voyage-ship__art > .voyage-stage {
    max-height: 240px;
  }

  .voyage-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: start;
  }

  .voyage-tip {
    grid-column: 1 / -1;
  }
}

/* ── Up to 768 px: a 🗺️/⛴️ switch swaps the map and the ship ── */
@media (max-width: 48em) {
  .voyage-views {
    display: flex;
    align-self: center;
    gap: 0;
    padding: 3px;
    border-radius: var(--r-pill);
    background: var(--card);
    box-shadow: var(--shadow-1);
    border: 2px solid var(--line);
  }

  .voyage-views__btn {
    min-height: 44px;
    padding: var(--sp-1) var(--sp-4);
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .voyage-views__btn.is-on {
    background: var(--sea-600);
    color: #ffffff;
  }

  .voyage-main[data-view='map'] .voyage-ship,
  .voyage-main[data-view='ship'] .voyage-map {
    display: none;
  }

  .voyage-main[data-view='ship'] .voyage-ship {
    padding-top: var(--sp-4);
  }

  /* The ship view has no map above the status line to tuck it under. */
  .voyage-main[data-view='ship'] .voyage-status {
    margin-top: 0 !important;
  }

  .voyage-ship__art > .voyage-stage {
    max-height: none;
  }
}

/* ── Phones ────────────────────────────────────────────── */
@media (max-width: 37.5em) {
  .voyage-hud {
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--r-md);
  }

  .voyage-hud__title .screen__title {
    font-size: var(--fs-lg);
  }

  .voyage-hud {
    align-items: start;
  }

  /* Each stat: "📅 Spring" on top, the number under it, then its bar. */
  .hud-stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'emoji label'
      'value value'
      'bar bar';
    align-items: center;
    column-gap: 4px;
  }

  .hud-stat__body {
    display: contents;
  }

  .hud-stat__emoji {
    grid-area: emoji;
    font-size: 1rem;
  }

  .hud-stat__label {
    grid-area: label;
  }

  .hud-stat__value {
    grid-area: value;
    font-size: var(--fs-sm);
    white-space: normal;
    overflow-wrap: anywhere; /* very big text: "$19,438" may break rather than overlap */
  }

  .hud-cash {
    font-size: var(--fs-md);
  }

  .hud-bar {
    grid-area: bar;
  }

  .hud-fuel__of {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 800;
    color: var(--ink-soft);
  }

  .voyage-fast .btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .voyage-fast {
    padding: 0;
    width: var(--tap);
  }

  .voyage-status {
    margin-top: calc(-16px - var(--sp-3)) !important;
    padding: 2px var(--sp-3) 2px var(--sp-2);
    font-size: var(--fs-sm);
  }

  .voyage-side {
    display: flex;
    align-items: stretch;
  }

  .event-card__emoji {
    width: 56px;
    height: 56px;
    font-size: 2rem;
  }

  .event-card__text {
    font-size: var(--fs-base);
  }

  .event-outcome__go {
    min-width: 0;
    width: 100%;
  }
}

/* ═══ UI-V2: the crossing and her own boxes (SPEC-2 §3.6, §5.5, §5.11, §6.3, §8.6 lane V) ═══════════════ */

/* Out on the ocean the map is the ocean chart: the same frame as the map. */
.voyage-map .chart-frame--voyage {
  width: 100%;
}

.voyage-map .chart-frame--voyage .chart {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}

.voyage-map .chart .map-ship {
  filter: drop-shadow(0 2px 3px rgba(13, 48, 71, 0.35));
}

/* Her own boxes under their stop: on board, then what they sold for. */
.voyage-stop {
  grid-template-areas:
    'badge name'
    'badge state'
    '. due'
    '. race'
    '. own';
}

.voyage-stop__own {
  grid-area: own;
  display: flex;
  flex-direction: column;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--sea-800);
  line-height: 1.3;
}

.voyage-stop__own-line.is-sold {
  color: var(--gain);
}

/* The deck view: the sale's staircase beside the ship (each box a bit less; 🛟 where the floor held);
   under it on phones. */
.voyage-ship {
  flex-wrap: wrap;
}

.voyage-sale {
  width: 100%;
}

@media (min-width: 37.51em) {
  .voyage-ship.has-sale {
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: var(--sp-2);
  }

  .voyage-ship.has-sale .voyage-ship__art {
    flex: 1 1 58%;
    min-width: 0;
  }

  .voyage-ship.has-sale .voyage-sale {
    flex: 1 1 42%;
    min-width: 0;
    align-self: center;
  }
}

.voyage-sale[hidden] {
  display: none;
}

.voyage-sale__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: var(--sp-1) 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.85);
}

.voyage-sale__title,
.voyage-sale__sold,
.voyage-sale__walk {
  margin: 0 !important;
  line-height: 1.25;
}

.voyage-sale__title {
  font-size: var(--fs-xs);
  font-weight: 900;
  color: var(--ink-soft);
}

.voyage-sale__sold {
  font-weight: 900;
  color: var(--gain);
}

.voyage-sale__walk {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-soft);
}

.voyage-sale__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 76px;
}

.voyage-sale__step {
  flex: 1 1 0;
  min-width: 0;
  max-width: 64px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.voyage-sale__price {
  min-height: 1.2em;
  font-size: var(--fs-xs);
  font-weight: 900;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.voyage-sale__bar {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  /* Its height is its price against the first box's (renderSale sets --k), under the price label. */
  height: calc((100% - 1.3em) * var(--k, 1));
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--gain-bg);
  border: 2px solid var(--gain);
  border-bottom: 0;
}

.voyage-sale__step.is-floor .voyage-sale__bar {
  background: var(--accent-100);
  border-color: var(--accent-400);
}

.voyage-sale__box {
  font-size: var(--fs-sm);
  line-height: 1.4;
}

/* The merchant's card: a chip like round 2's, the sure line and the guess. */
.event-merchant__chip {
  background: var(--gain-bg);
  color: var(--gain);
}

.event-answer__line.is-sure {
  color: var(--gain);
}

.event-answer__line.is-hope {
  color: var(--ink-soft);
}
/* A crossing's fuel ("$1,193 of $1,193") on wide screens: "of …" may move under the amount rather than run
   into Cash. It breaks only at the space before "of" (a text node of its own, outside the span), so the
   words never run together; phones keep their own rule ("of …" on its own line, above). */
@media (min-width: 37.51em) {
  .hud-stat--fuel .hud-stat__value {
    white-space: normal;
  }

  .hud-fuel__of {
    white-space: nowrap;
  }
}
/* ═══ end UI-V2 ═══ */

/* ── C4: cover that remembers: a quiet note under a chance that would raise cover's price (eventView note) ── */
.event-answer__line.is-note {
  font-weight: 600;
  color: var(--ink-soft);
}

/* ── C9: the voyage stage's caption and the 🗺️ view's strip (styles/components/scene.css draws them) ── */
@media (max-width: 48em) {
  /* In 🗺️ view the deck is hidden: the scene shows in a short strip under the status line, opening and
     closing with a short height change (none under reduced motion: base.css cuts transitions). */
  .voyage-main[data-view='map'] .voyage-scene-strip {
    display: block;
    max-height: 0;
    margin-top: calc(-1 * var(--sp-3)) !important;
    overflow: hidden;
    transition: max-height var(--dur-2) var(--ease), margin-top var(--dur-2) var(--ease);
  }

  .voyage-main[data-view='map'] .voyage-scene-strip.is-open {
    max-height: 56px;
    margin-top: 0 !important;
  }
}
/* ── end C9 ── */