/* Crew › Money — your position, the crew total, a centred balance bar per
 * member, settle up; then the money screens. After the festival the
 * settle-up transfers lead. Side by side once <main> has room.
 */

@layer components {
  .money-columns {
    display: grid;
    gap: var(--block-space-l) var(--inline-space-l);
    align-items: start;

    @container main (width > 46rem) {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);

      & .money-columns__lead { grid-column: 1 / -1; }
    }
  }

  /* The money screens: one list, even when Trip's rows go two-up. */
  .money-links .trip-list {
    display: block;
  }

  .money-section__label {
    margin-block-end: 0.5rem;
    color: var(--color-ink-muted);
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .money-section__empty {
    color: var(--color-ink-muted);
  }

  .money-transfers {
    display: grid;
    gap: 0.75rem;

    @container main (width > 46rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @container main (width > 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .money-position {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .money-position__value {
    margin: 0;
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1.125rem;

    & strong {
      font-size: 1.875rem;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }
  }

  .money-position__crew {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: 0.875rem;
  }

  .money-position__settle {
    justify-self: start;
  }

  /* ── Balance bars: centred, owed to the right, owing to the left ── */

  .balance-bars {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .balance-bars__row {
    display: grid;
    grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 4.5rem;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
  }

  .balance-bars__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .balance-bars__track {
    position: relative;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--color-ink) 8%, transparent);

    &::before {
      content: "";
      position: absolute;
      inset-block: -0.25rem;
      inset-inline-start: 50%;
      width: 1px;
      background: var(--color-border-interactive);
    }
  }

  .balance-bars__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    width: calc(var(--fraction) * 50%);
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    background: var(--color-positive);
  }

  .balance-bars__fill--negative {
    inset-inline-start: auto;
    inset-inline-end: 50%;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    background: var(--color-negative);
  }

  .balance-bars__amount {
    text-align: end;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .balance-bars__amount--positive { color: var(--color-positive); }
  .balance-bars__amount--negative { color: var(--color-negative); }
}