/* 🦦 Tilly's Parts Boat on the screens (WS-D lane UI-T, SPEC-2 §2b.11): her boat on the map, the 🦦 badge on
   the top bar's Shipyard button, the port's calm line and destination chip, the shipyard's Tilly tab and her
   borrow-or-wait block. Calm by design (SPEC-2 §2b.14): no glow, no sparkle, no motion, no rarity colours;
   her green is the boat's paint, never a "rare" frame. */

/* ── The map ───────────────────────────────────────────── */
.map-tilly__emoji {
  font-size: 13px;
}

.map-tilly {
  filter: drop-shadow(0 1px 1.5px rgba(13, 48, 71, 0.3));
}

/* Her visit is in the news: a faded boat with a dashed outline where she will dock (no motion). */
.map-tilly.is-coming {
  opacity: 0.6;
  filter: none;
}

.map-tilly.is-coming .map-tilly__art > path:first-of-type {
  fill: #eaf6ee;
  stroke-dasharray: 3 2;
}

.map--compact .map-tilly__emoji {
  font-size: 14px;
}

/* ── The top bar's Shipyard button: a 🦦 badge (no number) ── */
.topbar__btn.has-badge {
  position: relative;
}

.topbar__btn-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #3c9a5f;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}

/* ── The port: her line, her chip on a destination ──────── */
.port-tilly {
  display: inline-block;
  margin-top: var(--sp-1);
  padding: 0.2em 0.8em;
  border-radius: var(--r-md); /* it may wrap on a phone: a soft box, not a pill */
  background: #eef3f1;
  border: 1px solid #c9d8d1;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.chip.port-tilly-chip {
  background: #eef3f1;
  border: 1px solid #c9d8d1;
  border-radius: var(--r-md);
  color: var(--ink-soft);
  white-space: normal;
}

/* ── The shipyard: the 🦦 Tilly tab ─────────────────────── */
.sy-tilly__hello {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 2px solid #c9d8d1;
  box-shadow: var(--shadow-1);
}

.sy-tilly__portrait {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #eaf6ee;
  border: 3px solid #3c9a5f;
  font-size: 2.2rem;
  line-height: 1;
}

.sy-tilly__words {
  min-width: 0;
}

.sy-tilly__greeting {
  font-weight: 900;
  color: var(--ink);
}

.sy-tilly__until {
  font-weight: 700;
  color: var(--ink-soft);
}

.sy-tilly__next {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
}

.sy-tilly__thanks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.sy-offer__chip {
  margin: 0 !important;
}

.chip.sy-tilly-chip {
  background: #eef3f1;
  border: 1px solid #c9d8d1;
  color: var(--ink-soft);
}

.sy-offer__note.is-tilly {
  color: var(--ink-soft);
}

.sy-saveup.is-tilly .sy-saveup__line.is-wait {
  color: var(--ink-soft);
}

/* Her tab makes four: where the shop column is narrower than four tabs in a row (two columns from 900 px,
   up to about 1,180 px), each tab stacks its emoji above its word, as on a phone (shipyard.css), so the row
   never scrolls sideways. */
.sy-shop:has(.sy-tab.is-tilly) {
  container-type: inline-size;
}

@container (max-width: 37.5em) {
  .sy-tabs:has(.sy-tab.is-tilly) {
    border-radius: var(--r-lg);
  }

  .sy-tabs:has(.sy-tab.is-tilly) .sy-tab {
    flex: 1 1 0;
    flex-direction: column;
    white-space: normal;
    gap: 2px;
    min-width: 0;
    padding: 0.3em 0.4em;
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    line-height: 1.1;
  }
}

/* The swap sheet: a short row's own block. */
.swap-sheet__short {
  font-weight: 800;
  color: var(--ink-soft);
}

/* A row whose part only Tilly brings: her calm note under its change line. */
.swap-row.has-note {
  grid-template-areas:
    'name go'
    'change go'
    'note go';
}

.swap-row__note {
  grid-area: note;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
}

@media (max-width: 35em) {
  .swap-row.has-note {
    grid-template-areas:
      'name'
      'change'
      'note'
      'go';
  }
}

@media (max-width: 37.5em) {
  .sy-tilly__hello {
    padding: var(--sp-2) var(--sp-3);
  }

  .sy-tilly__portrait {
    width: 52px;
    height: 52px;
    font-size: 1.8rem;
  }
}