/*
 * THE RECORD'S MONEY STATEMENT. Every line is a `__row`, and `data-line` says
 * which rung it is on — a caption, a detail line, a group's sum, the premise
 * the rest is computed from, or the conclusion. One geometry, five roles, so a
 * consumer restyling "the money column" writes one selector.
 *
 * EVERY line shares the 8px text inset and the outdent that cancels it, so
 * labels and the money column sit on the container's own edge whether a row
 * peeks or not — the pressable door's wash simply fills the same padded box.
 *
 * Grouping reads by PROXIMITY: the gap between groups is decisively larger than
 * the gap inside one, or a line floats midway and belongs to neither. A rung
 * between, none within — a row's own 28px band already sets the beat inside a
 * group, and a gap on top of that would loosen it toward the between-group
 * distance and undo the ranking.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-ledger {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-16);
    margin-inline: calc(var(--lotics-row-wash-bleed) * -1);
    /* Its OWN size container: the one width-driven decision below asks how wide
       this statement is, never how wide the window is. */
    container: lotics-ledger / inline-size;
  }

  .lotics-ledger__group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  /* The premise and the conclusion frame the lines with the same air — the rule
     just sits on the other side of each. */
  .lotics-ledger__basis,
  .lotics-ledger__total {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-6);
  }

  .lotics-ledger__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    gap: var(--lotics-space-10);
    min-height: 28px;
    margin: 0;
    padding-block: 0;
    padding-inline: var(--lotics-row-wash-bleed);
    border: 0 solid var(--border);
    border-radius: 0;
    background-color: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    appearance: none;
    cursor: auto;
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  /* An unsummed group's caption LABELS the rows beneath it, so it takes only the
     height its xs text needs rather than sitting in a full band. */
  .lotics-ledger__row[data-line="head"] {
    min-height: 16px;
  }

  /* THE BASIS is the only line whose two sides can differ in height — its label
     may carry a stacked caption while the figure stays one line. Centring then
     measures the figure against the whole block and lands it in the gap between
     the label and its caption; on a shared baseline it sits on the label's FIRST
     line, which is the law `DetailRow` already follows for a wrapped label. */
  .lotics-ledger__row[data-line="basis"] {
    align-items: baseline;
  }

  /* The DOOR to a line's particulars. Its wash bleeds into the gutter the
     outdent opened rather than squeezing the text. */
  .lotics-ledger__row[data-peek] {
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
  }

  .lotics-ledger__row[data-peek]:hover {
    background-color: var(--lotics-wash-hover);
  }

  .lotics-ledger__row[data-peek]:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  /* The IDENTITY is what gives way; on a totals row the label itself is.
     NO `min-width: 0`: a flex item's own floor is its longest word, and a
     totals row's label is one or two of them — dropped below that the group's
     name wraps to three lines beside a figure that fits on one. A DETAIL row's
     label is clamped, and a clamped `Text` states the floor itself. */
  .lotics-ledger__label {
    flex-shrink: 1;
  }

  .lotics-ledger__row[data-line="head"] .lotics-ledger__label,
  .lotics-ledger__row[data-line="subtotal"] .lotics-ledger__label,
  .lotics-ledger__row[data-line="total"] .lotics-ledger__label,
  .lotics-ledger__identity {
    flex-grow: 1;
    flex-shrink: 1;
  }

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

  /* THE META YIELDS ENTIRELY BEFORE THE LABEL YIELDS AT ALL.
     A shrink RATIO (this was 3 against the label's 1) buys an order of magnitude,
     not an order of service: flexbox scales a shrink factor by the item's own
     width, so a caption longer than the label still handed part of the loss back
     to it, and a 375px ledger read "Ghi công … / nằm trong số còn phải t…" —
     both halves clipped, and the FIGURE squeezed along with them. Sized off the
     LEFTOVERS instead, the caption is served last: the label and the figure take
     their content width first, and only once the caption is down to nothing does
     the label start clipping. A caption qualifies a number; the label names it,
     and the name is what a reader needs when the row is too tight for both. */
  .lotics-ledger__meta {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    min-width: 0;
  }

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

  /* THE FIGURE AND THE LINK TAKE THEIR CONTENT WIDTH FIRST — the label and the
     caption above say so, and a row where only they name a floor hands the whole
     deficit to whichever of them gives way. A money string cut in half is a
     wrong number. */
  .lotics-ledger__value,
  .lotics-ledger__reference {
    flex-shrink: 0;
  }

  /* The caption IS the row's filler, so the spacer stands down while one is
     holding the row open — a SECOND filler would halve what the caption can
     show. It comes back the moment there is no caption, which is what keeps the
     figure on the right edge. */
  .lotics-ledger__row:has(.lotics-ledger__meta) .lotics-ledger__spacer {
    display: none;
  }

  /*
   * BELOW THIS THE ROW CANNOT SEAT A LABEL, A CAPTION AND A FIGURE AT ONCE.
   *
   * Derived, not chosen: the identity needs a flex column's usable floor (120),
   * a money column runs ~100, and a caption is not worth rendering under ~80 —
   * plus the row's own gaps. Under that the caption is taking room from the one
   * string the reader needs, so it goes entirely rather than shrinking to
   * nothing: yielding first is the right ORDER but not a floor.
   */
  @container lotics-ledger (width < 320px) {
    /* A DETAIL line's caption only. The premise's caption says HOW its figure
       was arrived at and stacks under the label rather than competing with it,
       so it is not what a narrow row is short of. */
    .lotics-ledger__row[data-line="detail"] .lotics-ledger__meta {
      display: none;
    }

    /* And the spacer takes the filling back, or the figure leaves the right
       edge on exactly the rows too narrow to spare it. */
    .lotics-ledger__row[data-line="detail"]:has(.lotics-ledger__meta) .lotics-ledger__spacer {
      display: block;
    }
  }
}