/* ── C7: the 🛖 shed card (src/ui/components/shed.js; docs/roadmap/C7-markets-and-news.md §3.2, §9): inside the
   🛒 tab, under the Dock shop. Its piles wrap; one action open at a time; buttons full width under 30em. Calm
   colors: a reason is slate, never red. Also the statement's words-only rent line (.stmt-own__rent). */

.shed {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 2px solid var(--sand-200);
}

.shed__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

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

.shed__rent,
.shed__since,
.shed__owed {
  font-weight: 700;
}

.shed__owed {
  font-weight: 900;
}

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

.shed-piles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.shed-pile {
  padding: 0.2em 0.8em;
  border-radius: var(--r-pill);
  background: var(--sand-50);
  border: 2px solid var(--sand-200);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.shed-why__list {
  margin: 0;
  padding-left: 1.2em;
  font-weight: 700;
}

.shed-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.shed-act .btn__label {
  white-space: normal;
}

.shed-detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 2px dashed var(--sand-200);
}

.shed-picks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.shed-pick {
  min-height: var(--tap);
  padding: var(--sp-1) var(--sp-3);
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}

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

.shed-rows,
.shed-dests {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.shed-row__keep .btn__label {
  white-space: normal;
}

.shed-dest__pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-2);
  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;
}

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

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

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

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

.shed-step__go {
  flex: 1 1 auto;
  min-width: 0;
}

.shed-step__go .btn__label {
  white-space: normal;
}

.shed-step__step {
  flex: none;
}

.shed-step__why {
  font-weight: 700;
  color: var(--loss);
}

.shed-note {
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* The statement's 🛒 card: the rent she paid to keep boxes from her shed (words only, outside the sum). */
.stmt-own__rent {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
}

@media (max-width: 30em) {
  .shed {
    padding: var(--sp-3);
  }

  .shed-act,
  .shed-row__keep {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* ── Slice 6: the departure's 🛖 switches (depart.js renderShedLanding; C7 §3.5): a panel under the forecast, one
   switch a lot that may go into her shed at its stop. On small phones it follows the forecast (the side's
   children are laid out by `order` there). */
.depart-shed {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-4);
}

@media (max-width: 37.5em) {
  .depart-shed {
    order: 3;
  }
}