/*
 * The one anatomy under every screen shape: strip, toolbar, figures, register,
 * totals — a column at the section beat.
 *
 * The `selection` part carries NO rule: the bar it names positions itself
 * against the app's own positioned scroller (`selection_bar.css`), or a register
 * running past the fold would park its bar below it.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-shape-frame {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    min-width: 0;
    gap: var(--lotics-space-16);
  }

  .lotics-shape-frame__head,
  .lotics-shape-frame__strip,
  .lotics-shape-frame__toolbar,
  .lotics-shape-frame__figures,
  .lotics-shape-frame__register,
  .lotics-shape-frame__totals {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    min-width: 0;
  }

  .lotics-shape-frame__figures,
  .lotics-shape-frame__head {
    gap: var(--lotics-space-16);
  }

  /* THE SUBJECT, AND UNDER IT THE COLUMN THE SHAPE IS NAMED FOR where the width
     could not seat that column. The line starts on the identity's TEXT edge,
     past whatever gutter the mark took, so it reads as the subject's second line
     rather than as something under the picture. */
  .lotics-shape-frame__rider {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: var(--lotics-space-4);
  }

  .lotics-shape-frame__rider > :last-child {
    padding-inline-start: var(--lotics-shape-rider-indent);
  }

  /* THE REGISTER'S FOOT WHILE MORE IS COMING — centred as one statement: what
     the reader has and what they can do about it are the same sentence. No rule
     above it; a band not derived from the rows needs no boundary. */
  .lotics-shape-frame__more {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-shrink: 0;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  /* ONE CELL, WAITING. The bars stack the way the cell's own lines do and follow
     the column's alignment, so a money column's placeholder ends where its
     figures will. */
  .lotics-shape-frame__skeleton {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: var(--lotics-space-4);
  }

  .lotics-shape-frame__skeleton[data-align="right"] {
    align-items: flex-end;
  }

  /* A column that reserves a gutter for the row's MARK waits with the mark's own
     square in it, on the same gap the cell sets it on. */
  .lotics-shape-frame__skeleton[data-mark] {
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-lead-gap);
  }

  /* THE RECORD'S OWN BAND, pinned above the drawer's scrolling body, on the
     panel gutter so it lands on the edge the body's content sits on. It never
     scrolls away.

     The routed record's header grammar at a panel's width: identity (up in the
     bar), then the figure, then the acts, all ending on the record's own right
     edge. It WRAPS at a phone's width, and the pair BASELINES on their last
     line so a two-line figure block does not push the verb down. */
  .lotics-shape-frame__header {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-shrink: 0;
    min-width: 0;
    gap: var(--lotics-space-16);
    padding-inline: var(--lotics-space-16);
    padding-block-start: var(--lotics-space-8);
  }

  .lotics-shape-frame__acts {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  /* THE WAY OUT, LAST — inside the scrolling body, after the work. A fence
     pinned over the record would spend the panel's one permanent band on the act
     the reader is least likely to take. */
  .lotics-shape-frame__danger {
    margin-block-start: var(--lotics-space-24);
  }

  /* THE REGISTER'S LAST ROW, and the one rule under it — the same boundary the
     header band draws: it divides the rows from a figure DERIVED from them. The
     BAND form of this part sits outside the register and needs none. */
  .lotics-shape-frame__totals[data-row] {
    border-top: 1px solid var(--border);
  }

  /* WHERE EVERY RUN HAS ALREADY FOOTED, the closing row is the answer OVER those
     parts, and immediately under the last of them a reader could not tell the
     part from the whole. The air says a different kind of thing follows; the
     rule stays. */
  .lotics-shape-frame__totals[data-closing] {
    margin-block-start: var(--lotics-space-16);
  }
}