/* Costs: the shared money tally (public/money.js).
   Kept out of styles.css so the two can change without stepping on each
   other. Everything takes its colour from the look's tokens, so a beach trip's
   costs are beach-coloured like the rest of it. */

.money-you .row .v { font-variant-numeric: tabular-nums; }

.money-cost {
  padding: var(--s4) 0;
  border-top: 1px solid var(--rule);
}
.money-cost:first-of-type { border-top: 0; padding-top: var(--s2); }

.money-cost-head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}
.money-cost-head h3 { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.money-cost-head .amt { font-size: 18px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.money-cost > .meta { margin-top: 4px; }

.money-shares { margin-top: var(--s3); }

/* Name and amount on one line, where it stands and the button on the next:
   on a phone that keeps the name from being squeezed. A wide screen gets it
   all on one line, below. */
.money-share {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'who amt' 'state btn';
  align-items: center;
  column-gap: var(--s3);
  row-gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.money-share:last-child { border-bottom: 0; }
.money-share .who { grid-area: who; min-width: 0; overflow-wrap: anywhere; }
.money-share .amt { grid-area: amt; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.money-share .state { grid-area: state; color: var(--ink-3); font-size: 14px; white-space: nowrap; }
.money-share button { grid-area: btn; justify-self: end; min-height: 40px; }
.money-share .drift { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--mango); }
.money-share.paid .state { color: var(--flag-safe); }
.money-share.paid .state::before { content: '✓ '; }
.money-share.mine {
  background: var(--accent-soft);
  margin: 0 calc(-1 * var(--s2));
  padding-left: var(--s2);
  padding-right: var(--s2);
  border-radius: 6px;
  border-bottom-color: transparent;
}
.money-share.mine .who { font-weight: 600; }

/* Wide enough: one line each, in fixed columns, so the amounts stand in a
   column whether or not a row has a button. */
@media (min-width: 560px) {
  .money-share {
    grid-template-columns: minmax(0, 1fr) 7.5em 9.5em 7.5em;
    grid-template-areas: 'who amt state btn';
  }
  .money-share .state { text-align: right; }
}

.money-host { margin-top: var(--s3); }
button.danger { background: var(--alert); border-color: var(--alert); color: var(--on-accent); }

.money-form { margin-top: var(--s2); }
.money-form .pill-list { margin-top: var(--s2); }