/*
 * THE EDITABLE MONEY BAND. Every money column is right-aligned and the closing
 * total lands on the AMOUNT column, so the band can be added up by eye — which
 * is why the total row is built from the line's own trailing slots rather than
 * nudged into place.
 *
 * THE FORK is a container query, not a measurement: this band lives in drawers
 * as often as on pages, so the question is how wide the BAND is, never how wide
 * the window is. Below 520 the name takes its own line and the arithmetic sits
 * under it, still ending on the amount column — a two-line row on purpose,
 * which is a different thing from a derived value that fell off the end of a
 * one-line row, and the tell is exactly that the amounts still share an edge
 * with the total.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-charge-lines {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-8);
    container: lotics-charge-lines / inline-size;
  }

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

  .lotics-charge-lines__body {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    gap: var(--lotics-space-16);
  }

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

  .lotics-charge-lines__extra {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 200px;
    padding-top: var(--lotics-space-4);
  }

  /* The arithmetic block never gives: its slots are the columns the total
     closes, so a squeeze has to come out of the NAME beside it. */
  .lotics-charge-lines__maths {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
    gap: var(--lotics-space-4);
  }

  .lotics-charge-lines__qty {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    width: 76px;
  }

  /* The one slot that DOES give — the operator is a glyph, not a column, and
     letting it close up is what keeps the money columns on their edges when the
     arithmetic overflows a narrow band. */
  .lotics-charge-lines__op {
    display: block;
    flex-shrink: 1;
    width: 14px;
  }

  .lotics-charge-lines__price {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    width: 132px;
  }

  /*
   * THE COLUMN IS SIZED BY THE MONEY, and the money is a grouped đồng figure:
   * 110px of text for `1.140.000.000 ₫` and for the signed `− 500.000.000 ₫`
   * at the band's rung (measured, 14px Inter), plus the control inset either
   * side. At 124 the closing total of a real record came out as `1.180.030.00`
   * over `0 ₫` — two numbers where the reader needs one, which is not a layout
   * fault but a WRONG FIGURE.
   */
  .lotics-charge-lines__amount {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    width: 128px;
  }

  /* A value standing where an editor stands lines up WITH it, rather than
     sitting where the editor's frame would have been. */
  .lotics-charge-lines__value {
    display: block;
    padding-inline: var(--lotics-control-text-inset);
  }

  /* AND A MONEY STRING IS ONE TOKEN. A figure and what it is counted in are
     halves of one number, so the run never breaks — not at the space the
     formatter puts before the ₫, and not between two digits, which `Text`'s own
     `overflow-wrap: break-word` does the moment a column is a pixel short and
     which prints a DIFFERENT figure. What gives instead is the NAME beside it
     (`__label`, which wraps); below that the operator closes up, and the figure
     is the last thing on the row to move.

     Two of our own classes because the rule it overrides is `Text`'s own, at
     the same weight: a tie between two component sheets is decided by whichever
     the bundler emitted last, which is not a rule anything can rely on — the
     same escalation the clamp below is written with. */
  .lotics-charge-lines__maths .lotics-charge-lines__value {
    white-space: nowrap;
  }

  .lotics-charge-lines__action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    width: 32px;
  }

  .lotics-charge-lines__warning {
    display: block;
    padding-top: var(--lotics-space-2);
  }

  .lotics-charge-lines__total {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    gap: var(--lotics-space-16);
    padding-top: var(--lotics-space-8);
    border-top: 1px solid var(--border);
  }

  /* AND THE CLOSING ROW'S BOX GROWS. The total is the biggest figure the band
     will ever print, and it is printed a weight up — so the column sized for a
     line's amount is the one place a sum can still run out of room. It grows
     LEFTWARDS, into the word beside it: the slot's right edge is where the
     line's is, which is the edge the band is added up on, and the label is the
     thing with nothing to lose. */
  .lotics-charge-lines__total .lotics-charge-lines__amount {
    width: auto;
    min-width: 128px;
  }

  .lotics-charge-lines__total-label {
    display: block;
    flex: 1;
    min-width: 0;
  }

  .lotics-charge-lines__commit {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: flex-start;
    padding-top: var(--lotics-space-4);
  }

  .lotics-charge-lines__empty {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    padding-block: var(--lotics-space-8);
  }

  @container lotics-charge-lines (width < 520px) {
    .lotics-charge-lines__body {
      flex-direction: column;
      align-items: stretch;
      gap: var(--lotics-space-4);
    }

    /* A grow along a COLUMN's main axis divides HEIGHT, so the identity drops
       its share and takes the band's full width from the stretch instead. */
    .lotics-charge-lines__identity {
      flex: none;
    }

    /* THE GUTTERS PAY FOR THE MONEY, THEN THE QUANTITY, THEN THE OPERATOR. 343
       is a record's column on a phone, and the slots inside it come to
       56 + 14 + 108 + 128 + 32 and four gutters of 2 — three over, which the
       operator closes up by, because it is the one slot that gives. Every one
       of those pixels is found beside the money columns rather than taken out
       of them, where a đồng figure would break. */
    .lotics-charge-lines__maths {
      justify-content: flex-end;
      gap: var(--lotics-space-2);
    }

    /* 48 fitted an integer and clipped `28,9` — 33px of text in the 30 left
       after the inset and border, on 4 of 7 lines of a real record. A quantity
       with one decimal is the ordinary case wherever goods are sold by weight;
       56 seats four glyphs and a unit's worth of slack, and is what the money
       columns beside it leave. */
    .lotics-charge-lines__qty {
      width: 56px;
    }

    /* 90px of text for an eight-figure đồng unit price (measured), plus the
       inset. At 104 the price a coordinator types broke on the width where the
       row has already given the name a line of its own. */
    .lotics-charge-lines__price {
      width: 108px;
    }

    /* The warning follows the row through the fork, on the column's own beat:
       the rung the stacked body is spaced on, plus the 2px the warning carries
       in both forks. Stated as one padding because a column's `gap` would also
       come between the identity and the arithmetic, which have their own. */
    .lotics-charge-lines__warning {
      padding-top: var(--lotics-space-6);
    }

    /*
     * THE NAME AND ITS QUALIFIER STOP CLAMPING. Wide, they share the row with
     * the arithmetic and a cap keeps a pathological name from pushing it down
     * the page; here they have the band to themselves and a wrap costs the row
     * nothing, while an ellipsis costs a charge its name.
     *
     * Three of our own classes because `Text` states its clamp on two — the
     * unclamp has to outrank it, and a tie between two component sheets is
     * decided by whichever the bundler emitted last.
     */
    .lotics-charge-lines__line .lotics-charge-lines__identity .lotics-charge-lines__label,
    .lotics-charge-lines__line .lotics-charge-lines__identity .lotics-charge-lines__meta {
      -webkit-line-clamp: none;
      line-clamp: none;
    }
  }
}