/* The 🛒 Dock shop (src/ui/components/shop.js, UI-P2; SPEC-2 §5.13, §8.6 lane P): one good open at a
   time, the places to sell it (days as ⛴️ pips, a fuzzy band, the 📰 and cause chips), the stepper and
   her own boxes. Calm colors: a loss is slate, never red; the chosen row is the sea's blue with a ✅. */

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

/* ── Header ─────────────────────────────────────────────── */
.shop__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--sand-50);
  border: 2px solid var(--sand-200);
}

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

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

.shop__spend {
  font-size: var(--fs-md);
  font-weight: 900;
  color: var(--gain);
}

.shop__bank {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 2px dashed var(--sand-200);
}

.shop__bank-text {
  flex: 1 1 220px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--loss);
}

.shop__nothing {
  padding: var(--sp-3) var(--sp-4);
}

/* ── Goods: closed rows and the open card ──────────────── */
.shop-goods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.shop-good__open {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.shop-good__open:hover {
  border-color: var(--sea-300);
  background: var(--sea-50);
}

.shop-good__emoji {
  font-size: 1.6em;
  line-height: 1;
}

.shop-good__name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  font-weight: 900;
}

.shop-good__cold {
  font-size: var(--fs-xs);
}

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

.shop-good__pile.is-few {
  color: var(--loss);
}

.shop-good__not-now {
  margin-left: auto;
  padding: 0.05em 0.6em;
  border-radius: var(--r-pill);
  background: var(--loss-bg);
  color: var(--loss);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.shop-good.is-not-now .shop-good__emoji {
  filter: grayscale(0.4);
}

/* The open good: a card of its own. */
.shop-good.is-open .shop-good__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 3px solid var(--sea-400);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-2);
  min-width: 0;
}

.shop-good__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  font-size: var(--fs-lg);
  outline-offset: 4px;
}

.shop-good__price {
  font-weight: 900;
}

.shop-good__stock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
}

.shop-good__sell-at {
  margin-top: var(--sp-1);
  font-weight: 900;
}

.shop-good__sell-at .muted {
  font-weight: 700;
  font-size: var(--fs-sm);
}

/* ── Places to sell it ──────────────────────────────────── */
.shop-dests {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.shop-dest__pick {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.shop-dest__pick:hover {
  border-color: var(--sea-300);
}

.shop-dest.is-chosen .shop-dest__pick {
  border-color: var(--sea-600);
  background: var(--sea-50);
  box-shadow: inset 0 0 0 1px var(--sea-600);
}

.shop-dest__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-2);
}

.shop-dest__text {
  font-weight: 900;
  overflow-wrap: anywhere;
}

.shop-dest__chosen {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--sea-700);
}

.shop-dest__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  min-width: 0;
}

.shop-dest__band {
  display: block;
}

.shop-dest__lock {
  margin: var(--sp-1) 0 0 var(--sp-3);
  padding: 0.2em 0.8em;
  border-left: 4px solid var(--sea-400);
  font-weight: 800;
  color: var(--sea-800);
  overflow-wrap: anywhere;
}

/* ⛴️ pips: one a day at sea (the number is in the row's sentence). */
.shop-pips {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
}

.shop-pips__dots {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 13em;
}

.shop-pips__pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sea-500);
}

/* A cause chip and the 📰 word chip. */
.shop-cause,
.shop-news {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.05em 0.6em;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.shop-cause {
  background: var(--sand-100);
  color: #6d5530;
}

.shop-news {
  background: var(--sea-100);
  color: var(--sea-800);
}

.shop-news.is-old,
.shop-news.is-veryOld {
  background: var(--loss-bg);
  color: var(--loss);
}

/* The fuzzy band: narrow on today's prices, wide on old news. Drawn, no digits. */
.shop-band {
  position: relative;
  display: block;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--sea-50);
  border: 1px solid var(--sea-200);
  overflow: hidden;
}

.shop-band__fuzz {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  background: radial-gradient(closest-side, rgba(31, 111, 158, 0.7), rgba(31, 111, 158, 0.08));
}

.shop-band.is-news .shop-band__fuzz {
  background: radial-gradient(closest-side, rgba(91, 107, 122, 0.7), rgba(91, 107, 122, 0.08));
}

.shop-band__mark {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--sea-800);
}

/* ── The stepper: [−] Buy 4 · $1,862 [+] ───────────────── */
.shop-buy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

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

.shop-buy__go {
  flex: 1 1 auto;
  min-width: 0;
}

.shop-buy__go .btn__label {
  white-space: normal;
}

.shop-buy__step {
  flex: none;
}

.shop-buy__why {
  font-weight: 700;
  color: var(--loss);
}

.shop-buy.is-blocked {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--loss-bg);
}

.shop-buy.is-blocked .shop-buy__why {
  flex: 1 1 200px;
}

/* The price staircase behind Why?: one bar a box, each a little higher. */
.shop-stairs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2) 0;
}

.shop-stairs__title {
  font-weight: 800;
}

.shop-stairs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-2);
}

.shop-stairs__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  width: 4.2em;
  height: 5.2em;
}

.shop-stairs__bar {
  display: block;
  width: 100%;
  max-height: 3.4em;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--accent-200);
  border: 2px solid var(--accent-400);
  border-bottom: none;
}

.shop-stairs__price {
  font-size: var(--fs-xs);
  font-weight: 800;
}

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

/* ── Her own boxes ──────────────────────────────────────── */
.shop-lots {
  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 dashed var(--accent-400);
}

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

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

.shop-lot__what {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  min-width: 0;
  font-weight: 800;
}

.shop-lot__boxes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
}

.shop-lot__box {
  display: inline-grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 6px;
  background: var(--accent-100);
  border: 2px solid var(--accent-400);
  font-size: 0.9em;
  line-height: 1;
}

.shop-sellback__text {
  font-weight: 700;
}

@media (max-width: 35em) {
  .shop__head,
  .shop-good.is-open .shop-good__card,
  .shop-lots {
    padding: var(--sp-3);
  }

  .shop-good__title {
    font-size: var(--fs-md);
  }

  .shop-good__not-now {
    margin-left: 0;
  }
}