/* Top bar extras (src/ui/components/topbar.js, WS-D): the 🧾 bills stat and the notes row (the next
   unlock, and "Keep cash ready for bill day." in calm slate when cash is short). */

.topbar__notes {
  grid-area: next;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-width: 0;
}

.topbar__notes .topbar__next {
  grid-area: auto;
}

.topbar__bill-short {
  padding: 0.15em 0.8em;
  border-radius: var(--r-pill);
  background: var(--loss-bg);
  color: var(--loss);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.topbar__stat.is-bill .topbar__stat-value {
  color: var(--sea-800);
}

.topbar__stat.is-bill.is-short .topbar__stat-value,
.topbar__stat.is-bill.is-short .topbar__stat-label {
  color: var(--loss);
}

/* ── UI-S2 (SPEC-2 D55, §3.8): the region chip and the ocean's goal chip ── */
.topbar__notes {
  align-items: center;
}

/* Where she is once a far region is open: the region, then a far region's season (words, no number). */
.topbar__region {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5em;
  min-width: 0;
  padding: 0.15em 0.8em;
  border-radius: var(--r-pill);
  background: var(--sea-50);
  border: 1px solid var(--sea-200);
  color: var(--sea-800);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.topbar__region-season {
  color: var(--sea-700);
  font-weight: 700;
}

.topbar__region.has-season .topbar__region-season::before {
  content: '·';
  margin-right: 0.5em;
  color: var(--sea-400);
}

/* The goal chip sits in the next-unlock chip's slot; in port it opens the ocean chart. */
.topbar__goal {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  max-width: 100%;
  text-align: left;
}

.topbar__goal.is-button {
  min-height: var(--tap);
  padding: 0.2em 0.6em 0.2em 0.9em;
  border: 2px solid var(--accent-200);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 800;
  cursor: pointer;
}

.topbar__goal.is-button:hover {
  background: var(--accent-200);
}

.topbar__goal.is-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.topbar__goal-go {
  font-size: 1.3em;
  line-height: 1;
}

/* Phones at home (the switch-on review): the region chip ("🏝️ The Five Isles": words, no season) and the
   goal chip do not fit on one row, and a second row pushes the screen below it (🦦 Tilly's Buy or Swap)
   under the fold. While the goal chip shows, the home chip gives way: the port and its map say she is
   home. A far region's chip (with its season) stays. */
@media (max-width: 37.5em) {
  .topbar__region[data-region='home']:has(+ .topbar__goal) {
    display: none;
  }
}