/* C2 — Season goals (src/ui/components/seasonGoals.js): the statement's 🎯 card (stmt-sg), the picker
   (sg-picker, one choice a row, each ≥ 44 px tall), the port's note (port-sg), and the Passport's 🎯 tab
   (sg-now, sg-history, the goal stamps' ring). A goal met is warm; a goal not met is neutral, never red.
   No animation beyond the screen's own fade. */

/* The goal stamps' ink: a target's red-orange on cream, the kind's emoji in a 🎯 ring. */
.pp-ink-goal {
  --pp-ink: var(--accent-700);
  --pp-ink-bg: var(--accent-100);
}

.pp-ink-goal .pp-stamp__ring {
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--pp-ink), inset 0 0 0 9px #fff, inset 0 0 0 11px var(--accent-400);
}

.pp-ink-goal.pp-stamp--sm .pp-stamp__ring,
.pp-ink-goal .pp-stamp--sm .pp-stamp__ring {
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--pp-ink);
}

/* ── The statement's 🎯 card ── */
.stmt-sg {
  border-top: 5px solid var(--accent-400);
}

.stmt-sg.is-progress {
  border-top-width: 1px;
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}

.stmt-sg.is-progress .stmt-card__title {
  font-size: var(--fs-base);
}

.stmt-sg p {
  margin: var(--sp-1) 0 0;
}

.sg-mine {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--loss-bg);
}

.sg-mine.is-met {
  background: var(--accent-100);
}

.sg-mine__did {
  font-weight: 700;
}

.sg-mine__met {
  color: var(--gain);
  white-space: nowrap;
}

.sg-others__title {
  margin-top: var(--sp-3) !important;
}

.sg-others {
  list-style: none;
  margin: var(--sp-1) 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.sg-other {
  color: var(--ink-soft);
}

.sg-other.is-met {
  color: var(--ink);
  font-weight: 700;
}

.sg-perday {
  margin-top: var(--sp-2) !important;
  color: var(--ink-soft);
}

.sg-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-3);
}

.sg-offer p {
  flex: 1 1 14em;
  margin: 0;
}

.sg-offer__picked {
  font-weight: 700;
}

/* ── The picker (the game's modal) ── */
.sg-picker__sub {
  margin: 0 0 var(--sp-3);
}

.sg-choices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.sg-choice {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sg-choice:hover {
  border-color: var(--accent-400);
  box-shadow: var(--shadow-2);
}

.sg-choice.is-on {
  border-color: var(--accent-600);
  background: var(--accent-100);
}

.sg-choice--none {
  border-style: dashed;
  justify-content: center;
}

.sg-choice__emoji {
  flex: none;
  font-size: 1.6rem;
  line-height: 1;
}

.sg-choice__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sg-choice__idea {
  font-weight: 800;
}

.sg-choice__goal {
  overflow-wrap: anywhere;
}

/* ── The port's note, beside the Bills card ── */
.port-sg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 2px solid var(--line);
  box-shadow: var(--shadow-1);
}

.port-sg.is-open {
  border-color: var(--accent-400);
}

.port-sg__icon {
  font-size: 1.5em;
  line-height: 1;
}

.port-sg__text {
  flex: 1 1 12em;
  margin: 0;
  min-width: 0;
  font-weight: 700;
}

/* ── The Passport's 🎯 tab ── */
.pp-goals {
  display: grid;
  gap: var(--sp-4);
}

.sg-now {
  border-top: 6px solid var(--accent-400);
}

.sg-now__head {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-md);
}

.sg-now p {
  margin: var(--sp-1) 0;
}

.sg-now__title {
  font-weight: 800;
}

.sg-met {
  margin: 0;
  font-weight: 800;
}

.sg-history__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-md);
}

.sg-history__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.sg-history__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--loss-bg);
}

.sg-history__row.is-met {
  background: var(--accent-100);
}

.sg-history__when {
  font-weight: 800;
}

.sg-history__line {
  flex-basis: 100%;
}

.pp-back__seasons {
  list-style: none;
  margin: var(--sp-2) 0;
  padding: 0;
  display: grid;
  gap: 2px;
}