/*
 * THE CHRONOLOGICAL LEDGER — an anchor, the movements, and the balance as of
 * each one. It mirrors `Ledger`'s outdent and row rhythm so a page using both
 * reads as one design language; the rules are its own, because a component's
 * sheet never reaches into another's anatomy.
 *
 * Two money columns rather than one, each with a FIXED floor, so the amounts
 * and the balances each keep ONE right edge down the whole run whatever an
 * individual figure's digit count.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-running-ledger {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    margin-inline: calc(var(--lotics-row-wash-bleed) * -1);
  }

  .lotics-running-ledger__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    gap: var(--lotics-space-10);
    min-height: 28px;
    padding-inline: var(--lotics-row-wash-bleed);
  }

  /* The ANCHOR's two sides can differ in height — its label may carry a date
     under it while the figure stays one line — so the figure sits on the
     label's FIRST line rather than in the gap under it. */
  .lotics-running-ledger__row[data-line="opening"] {
    align-items: baseline;
    margin-bottom: var(--lotics-space-4);
  }

  .lotics-running-ledger__identity {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
  }

  /* NO `min-width: 0` — a flex item's floor is its longest word, and the closing
     line's label is one. A movement's label is clamped and states the floor
     itself. */
  .lotics-running-ledger__label {
    flex-shrink: 1;
  }

  .lotics-running-ledger__row[data-line="closing"] .lotics-running-ledger__label {
    flex-grow: 1;
  }

  .lotics-running-ledger__date {
    flex-shrink: 0;
    width: 72px;
  }

  .lotics-running-ledger__spacer {
    display: block;
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
  }

  /* The anchor's own figure, and the movement's link out — served before the
     identity, which is the item that says it may give way. */
  .lotics-running-ledger__value,
  .lotics-running-ledger__reference {
    flex-shrink: 0;
  }

  .lotics-running-ledger__amount {
    min-width: 90px;
  }

  .lotics-running-ledger__balance {
    min-width: 100px;
  }

  /* The closing line frames the run the way `LedgerTotal` frames a statement:
     its rule above, the same air on both sides of it. */
  .lotics-running-ledger__total {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-6);
    margin-top: var(--lotics-space-6);
  }
}