/* ── C8: Chapter 5's promises (docs/roadmap/C8-chapter-5.md §8): the port's 📃 Promises card, the offer's
   sheet, the job's and Other ports' chips, the departure footer's lines and the statement's Promises block.
   Calm by design: sea and sand, never red; buttons ≥ 44 px; rows wrap at 390 and 320 px. */

.promises-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 2px solid var(--line);
  box-shadow: var(--shadow-1);
  min-width: 0;
}

.promises-card__title {
  font-size: var(--fs-md);
  font-weight: 900;
  margin: 0;
}

.promises-card__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.promises-card__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--sand-50);
  min-width: 0;
}

.promises-card__row.is-here {
  background: var(--sea-50);
}

.promises-card__icon {
  font-size: 1.3em;
  line-height: 1.2;
}

.promises-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.promises-card__text {
  margin: 0;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.promises-card__next {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.promises-card__offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
}

.promises-card__offer-text {
  margin: 0;
  font-weight: 800;
  min-width: 0;
  overflow-wrap: anywhere;
}

.promises-card__look {
  min-height: 44px;
}

/* The offer's sheet: its lines, then why she can't sign (when she can't). */
.offer-sheet__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-weight: 700;
}

.offer-sheet__lines li {
  overflow-wrap: anywhere;
}

.offer-sheet__why {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--sand-50);
  font-weight: 700;
  color: var(--ink-soft);
}

/* ✉️ The sheet's bid part (slice 3): "Open to bids", the rival's face, today's board, her three prices as
   big buttons stacked full width (the price, then "Wins N in 10" and the dots), and the tie rule. */
.offer-sheet__bid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 2px dashed var(--line);
}

.offer-sheet__bid-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-weight: 700;
}

.offer-sheet__bid-lines li {
  overflow-wrap: anywhere;
}

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

.offer-sheet__bid-btn {
  min-height: 44px;
  height: auto;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  border-radius: var(--r-lg);
  padding: 0.5em 1em;
  white-space: normal;
  text-align: left;
}

.offer-sheet__bid-price {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-md);
  font-weight: 900;
}

.offer-sheet__bid-odds {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink);
  min-width: 0;
}

.offer-sheet__bid-wins {
  font-weight: 900;
  white-space: nowrap;
}

.offer-sheet__tie {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

/* The job card's chip, and the Other ports row's chip (words). */
.job-card__promise {
  background: var(--sand-100);
  color: var(--sea-900);
}

.port-dest__promise {
  background: var(--sand-100);
  color: var(--sea-900);
  font-weight: 800;
  /* FINAL review: beside a rival's face at 320 px the chip's words wrap (.chip is nowrap), never past the panel. */
  white-space: normal;
  text-align: end;
  max-width: 100%;
}

/* The departure footer's lines (a certain miss names its fee; calm slate, never red). */
.depart-forecast__promise.is-miss {
  color: var(--ink);
}

/* The statement's 📃 Promises block: one row a note, its emoji first (its own style, not an insight card). */
.stmt-promises__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.stmt-promises__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-weight: 700;
  min-width: 0;
}

.stmt-promises__icon {
  font-size: 1.2em;
  line-height: 1.3;
}

.stmt-promises__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 35em) {
  .promises-card__offer {
    flex-direction: column;
    align-items: stretch;
  }

  .promises-card__look {
    width: 100%;
  }
}

/* ── C8 slice 2: ❤️ hearts. The port header's meter (a chip beside the nation's), the logbook's ❤️ Trust tab
   (one row a nation) and the 📃 Steady or swinging? chart: her pay a flat line with square marks, the
   board's pay round dots (shapes as well as colors), a dashed gap between them. */
.hearts-meter {
  white-space: nowrap;
  letter-spacing: 1px;
  line-height: 1.2;
}

.port-head__hearts {
  font-size: var(--fs-sm);
}

.trust-hearts__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--sp-2) var(--sp-3);
}

.trust-nation {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--sand-50);
  min-width: 0;
}

.trust-nation.is-home {
  background: var(--sea-50);
}

.trust-nation__emoji {
  font-size: 1.3em;
  line-height: 1.3;
}

.trust-nation__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.trust-nation__head {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-2);
}

.trust-nation__name {
  font-weight: 900;
}

.trust-nation__line {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

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

.steady-legend {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--ink-soft);
}

.steady-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.steady-legend__key {
  display: inline-block;
  width: 12px;
  height: 12px;
}

.is-steady .steady-legend__key {
  background: var(--sea-600);
  border-radius: 2px;
  box-shadow: -8px 0 0 -4px var(--sea-600), 8px 0 0 -4px var(--sea-600);
}

.is-board .steady-legend__key {
  background: var(--accent-500);
  border: 2px solid var(--accent-700);
  border-radius: 50%;
}

.steady-row {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--sand-50);
  min-width: 0;
}

.steady-row__run {
  font-weight: 900;
  overflow-wrap: anywhere;
}

.steady-chart {
  max-width: 26rem;
  margin: var(--sp-1) 0;
}

.steady-chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

.steady-chart__trips {
  display: grid;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-faint);
  text-align: center;
}

.steady-chart__zero {
  stroke: var(--line-strong);
  stroke-width: 1.5;
}

.steady-chart__steady {
  stroke: var(--sea-600);
  stroke-width: 4;
  stroke-linecap: round;
}

.steady-chart__mark {
  fill: var(--sea-600);
}

.steady-chart__gap {
  stroke: var(--ink-faint);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.steady-chart__dot {
  fill: var(--accent-500);
  stroke: var(--accent-700);
  stroke-width: 2;
}

.steady-row__nums {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.steady-row__pay {
  color: var(--sea-700);
}

.steady-row__board {
  color: var(--accent-700);
}

.steady-caption {
  margin: 0;
  font-weight: 800;
  color: var(--ink-soft);
}

/* ── C8 slice 4: 🙏 a port's request on the Promises card: its words, then "🙏 I promise" (wraps under the
   words at 390 and 320 px). A promised one reads like a contract's row, with no button. */
.promises-card__request {
  flex-wrap: wrap;
  align-items: center;
}

.promises-card__request .promises-card__body {
  flex: 1 1 10em; /* beside its 🙏 even at 320 px; the button wraps under them */
}

.promises-card__promise {
  min-height: 44px;
  margin-left: auto;
}

/* ── C8 slice 5: 🛍️ orders on the Promises card: her orders read like a contract's row (its words, then the sure
   price); the far region's order puts "🛍️ Take the order" after its words, wrapping under them at 390 and
   320 px, as the 🙏 row does. */
.promises-card__order.is-offer {
  flex-wrap: wrap;
  align-items: center;
}

.promises-card__order.is-offer .promises-card__body {
  flex: 1 1 10em;
}

.promises-card__take {
  min-height: 44px;
  margin-left: auto;
}

/* The 🛒 shop's order row on the open good: one full-width button that buys what the order lacks. */
.shop-order {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}

.shop-order__buy {
  min-height: 44px;
  width: 100%;
}

.shop-order__why {
  margin: 0;
  font-weight: 700;
  color: var(--ink-soft);
}

/* The departure footer's order line ("🛍️ Order: $2,280 for sure."), under the sum it is part of. */
.depart-own__order {
  margin-top: var(--sp-1) !important;
  font-size: var(--fs-base);
}

/* ── C8 slice 6: 📌 the job a nation keeps for her. The card's line wears the "here" sea (it is on this board);
   the job card's chip is words, with the same sea so the kid can match the two. */
.job-card__promise[data-promise='trusted'] {
  background: var(--sea-50);
  color: var(--sea-900);
}

/* ── C8 fix round: what days in port would break, said before she taps: under the board's Wait button
   ("📃 Waiting a day misses your Gearhaven trip. Fee: $280.") and on a refit's shipyard card ("📃 This refit
   misses …"). Plain words in the ink colour, never red; they wrap at 320 px. */
.port-promise-lines {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.port-promise-lines__line {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.port-board__promise {
  margin: 0 0 var(--sp-2);
}

.sy-offer__promise {
  margin-top: var(--sp-1);
}