/* Screen: statement — the receipt, where the boxes went, ideas, and "Back to port". */

.screen--statement.is-rerender {
  animation: none;
}

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

.stmt-title {
  font-size: var(--fs-xl);
}

.stmt-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  font-weight: 800;
  color: var(--ink-soft);
}

.stmt-route__port {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--ink);
}

.stmt-route__arrow {
  color: var(--ink-faint);
}

.stmt-route__days {
  margin-left: var(--sp-1);
}

/* ── Layout: receipt on the left, the story on the right ── */
.stmt-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'main side'
    'main mate';
  gap: var(--sp-4) var(--sp-5);
  align-items: start;
}

.stmt-main {
  grid-area: main;
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* Pip sits under the ideas on wide screens, under the receipt on narrow ones. */
.stmt-mate {
  grid-area: mate;
  min-width: 0;
}

.stmt-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

/* ── Receipt ── */
.stmt-receipt {
  width: 100%;
  max-width: 540px;
  font-size: var(--fs-md);
  border-top: 6px solid var(--sea-400);
}

.stmt-receipt .receipt__line {
  padding: 5px 0;
}

.stmt-receipt .receipt__label {
  align-items: baseline;
}

.stmt-line__days {
  font-weight: 700;
  color: var(--ink-faint);
  font-size: var(--fs-sm);
}

/* Lines "print" one after another the first time you see the receipt. */
.stmt-receipt.is-printing .receipt__line {
  animation: stmt-print var(--dur-3) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}

@keyframes stmt-print {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.stmt-kept {
  margin-top: var(--sp-1);
  font-size: var(--fs-2xl);
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.stmt-kept.is-good {
  color: var(--gain);
}

.stmt-kept.is-neutral {
  color: var(--loss);
  font-size: var(--fs-xl);
}

.stmt-perday {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  text-align: center;
}

.stmt-perday__main {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--sea-800);
}

.stmt-perday__main strong {
  font-weight: 900;
  color: var(--sea-700);
}

.stmt-perday__prev {
  margin: 0 !important;
  padding: 0.1em 0.8em;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 800;
  background: var(--loss-bg);
  color: var(--loss);
}

.stmt-perday__prev.is-up {
  background: var(--gain-bg);
  color: var(--gain);
}

/* "⭐ New best money a day!" ribbon across the top of the receipt */
.stmt-ribbon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-3)) var(--sp-4);
  padding: var(--sp-2) var(--sp-5);
  background: linear-gradient(90deg, var(--accent-400), var(--accent-200) 50%, var(--accent-400));
  color: var(--accent-700);
  font-weight: 900;
  font-size: var(--fs-md);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
  animation: stmt-ribbon-in 600ms var(--ease) 200ms both;
}

.stmt-ribbon__star {
  font-size: 1.3em;
  display: inline-block;
  animation: stmt-star 1.6s var(--ease) 600ms 2;
}

@keyframes stmt-ribbon-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes stmt-star {
  0%,
  100% {
    transform: rotate(0) scale(1);
  }
  50% {
    transform: rotate(18deg) scale(1.25);
  }
}

/* ── Cards on the right ── */
.stmt-card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  border: 1px solid var(--line);
  padding: var(--sp-3) var(--sp-4);
}

.stmt-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.stmt-card__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
}

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

.stmt-deliv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
}

.stmt-deliv + .stmt-deliv {
  border-top: 1px dashed var(--line);
  padding-top: var(--sp-2);
}

.stmt-deliv__emoji {
  font-size: 1.5em;
  line-height: 1;
}

.stmt-deliv__text {
  flex: 1 1 auto;
  min-width: 0;
}

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

.stmt-deliv__ok {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gain-bg);
  color: var(--gain);
  font-weight: 900;
}

.stmt-insights {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.stmt-insight {
  align-items: center;
  border-radius: var(--r-lg);
}

.stmt-insight .insight__icon {
  font-size: 1.8em;
}

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

.stmt-insight__label {
  font-size: var(--fs-xs);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.stmt-insight .insight__text {
  margin: 0 !important;
  font-size: var(--fs-md);
  line-height: 1.35;
}

/* Good news: warm and a little shiny */
.stmt-insight.insight--good {
  background: linear-gradient(135deg, #fff6df 0%, var(--gain-bg) 100%);
  border-left-color: var(--accent-500);
}

.stmt-insight.insight--good .stmt-insight__label {
  color: var(--accent-700);
}

.stmt-insight.insight--idea .stmt-insight__label {
  color: var(--accent-700);
}

.stmt-insight.insight--info {
  background: var(--sea-50);
  border-left-color: var(--sea-300);
}

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

.stmt-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--loss-bg);
  font-weight: 700;
}

.stmt-note--sea {
  background: var(--sea-50);
}

.stmt-note__icon {
  font-size: 1.4em;
  line-height: 1.2;
}

.stmt-go {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.stmt-next {
  text-align: center;
  font-weight: 800;
  color: var(--accent-700);
}

.stmt-go__btn {
  font-size: var(--fs-lg);
  min-height: 64px;
}

/* ── Smaller screens ── */
@media (max-width: 45em) {
  .stmt-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      'main'
      'mate'
      'side';
  }

  .stmt-receipt {
    max-width: none;
  }
}

@media (max-width: 37.5em) {
  .stmt-title {
    font-size: var(--fs-lg);
  }

  .stmt-receipt {
    font-size: var(--fs-base);
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }

  .stmt-kept {
    font-size: var(--fs-xl);
  }

  .stmt-kept.is-neutral {
    font-size: var(--fs-lg);
  }

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

  .stmt-insight .insight__text {
    font-size: var(--fs-base);
  }
}

/* ── Days, debt and rivals (WS-D) ─────────────────────── */
.stmt-deliv__mark {
  white-space: normal;
}

.stmt-deliv__deposit {
  font-size: 1.2em;
  line-height: 1;
}

/* The race card's second line: what winning cost, or the speed that would have won. */
.stmt-insight__more {
  margin-top: 2px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
}

.stmt-note--trip.is-missed {
  background: var(--loss-bg);
}

/* The 🧾 Bills card: outside the trip's "you kept", so it sits apart from the receipt. */
.stmt-bills__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stmt-bill + .stmt-bill {
  border-top: 1px dashed var(--line);
  padding-top: var(--sp-2);
}

.stmt-bill__day {
  font-size: var(--fs-sm);
  font-weight: 900;
  color: var(--sea-700);
}

.stmt-bill__lines {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
}

.stmt-bill__total {
  font-weight: 900;
}

.stmt-bills__month {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--sea-50);
  font-weight: 800;
  color: var(--sea-800);
}

.stmt-bills__note {
  margin-top: var(--sp-1);
}

/* ── UI-S2 (SPEC-2 §5.12, §8.6): her own boxes ─────────────────────── */
/* A sale of her own boxes: the 🛒 "Yours" chip (never colour alone) and what each box sold for. */
.stmt-deliv.is-own .stmt-deliv__text {
  flex: 1 1 8em;
}

.chip.stmt-deliv__own {
  background: var(--sand-100);
  border: 1px solid var(--sand-400);
  color: var(--ink);
  font-weight: 800;
}

/* The staircase: "Each box:" then each box's price, a bit less each time (first … last for lots over 4;
   🛟 where the floor paid). */
.stmt-sale {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px var(--sp-2);
  padding: 0 0 9px calc(30px + var(--sp-2));
}

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

.stmt-stairs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The 🛟 legend under the Delivered list (shown, not only in a tooltip). */
.stmt-floor-note {
  margin-top: var(--sp-2);
  color: var(--ink-soft);
  font-weight: 700;
}

.stmt-stair {
  padding: 0.05em 0.55em;
  border-radius: var(--r-sm);
  background: var(--sand-50);
  border: 1px solid var(--sand-200);
  font-size: var(--fs-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* Each step a little lower than the one before: the walk down, drawn. */
.stmt-stair:nth-child(2) {
  margin-bottom: -3px;
}

.stmt-stair:nth-child(3) {
  margin-bottom: -6px;
}

.stmt-stair:nth-child(4) {
  margin-bottom: -9px;
}

.stmt-stair.is-more {
  background: none;
  border-color: transparent;
}

.stmt-stair.is-floor {
  background: var(--loss-bg);
  border-color: var(--line);
}

/* The 🛒 card: three lines that add up (the sure part + what the boxes earned = what she kept). */
.stmt-own__lines {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stmt-own__line {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-weight: 800;
}

.stmt-own__icon {
  flex: none;
  width: 1.4em;
  text-align: center;
}

/* What moved the sure part ("🌬️ The surprise saved $31."): smaller, under it, outside the sum. */
.stmt-own__cause {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
}

.stmt-own__line.is-boxes.is-more .stmt-own__text {
  color: var(--gain);
}

.stmt-own__line.is-boxes.is-less .stmt-own__text,
.stmt-own__line.is-cost .stmt-own__text {
  color: var(--loss);
}

.stmt-own__line.is-kept {
  margin-top: var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 2px solid var(--ink);
  font-size: var(--fs-md);
  font-weight: 900;
}

.stmt-own__line.is-kept .stmt-own__icon::before {
  content: '=';
  color: var(--ink-soft);
}