/*
 * THE FACT BANDS, and inside each one the FACT GRID — cells of a field's name
 * over its value. The grid is the GROUP's, so a caption always sits over its own
 * run, and THE BLOCK MEASURES ITSELF (`constitution.md` §10): it declares its
 * own size container, so a record read in a 420px side panel lays out as one.
 *
 * THREE ACROSS IS THE CEILING, a reading rule rather than a fitting one: a
 * fourth column takes a name and its value under 200px.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  /* THE BANDS, A PEER RUNG APART. The two gaps are read against each other: the
     facts of one group are ITEMS INSIDE ONE GROUP — 8, `constitution.md` §2 —
     and a group is one block of 8s with 32 around it. */
  .lotics-record-facts {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-32);
    /* Every width question below is about this block, never about the window. */
    container: lotics-record-facts / inline-size;
  }

  .lotics-record-facts__group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  /* ONE COLUMN IS THE FLOOR and the two wider answers are the overrides: a
     container query no container answers is FALSE rather than unknown, so the
     narrow layout is the one that may not depend on a query at all. */
  .lotics-record-facts__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    column-gap: var(--lotics-space-24);
    row-gap: var(--lotics-space-8);
  }

  /* The disclosure is a word in the reading, so it starts where the facts do. */
  .lotics-record-facts__more {
    align-self: flex-start;
  }

  /*
   * ONE FACT — its name over what the record says in it, at the tight rung,
   * because the two are one thing.
   *
   * A grid item's automatic minimum is its MIN-CONTENT width, so a cell holding
   * a reference code with no spaces would push the grid wider than the page. It
   * gives way; the value inside it wraps.
   */
  .lotics-record-facts__fact {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-4);
  }

  /* THE VALUES THAT ARE READ ACROSS — a document, a pile, a level — take the
     grid's whole row rather than a third of it. */
  .lotics-record-facts__fact[data-span] {
    grid-column: 1 / -1;
  }

  /* WHAT THE RECORD SAYS IN THE FIELD — one reading, or a field and the line
     that qualifies it. */
  .lotics-record-facts__value {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  /* A UNIT IS THE FIELD'S WORD, NOT THE NUMBER'S, so it stands beside the box: a
     numeric field prints the figure it will read back, and no parser takes
     "8,200 kg" — the unit inside the value would commit 8.2. */
  .lotics-record-facts__field[data-unit] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-8);
  }

  .lotics-record-facts__control {
    flex: 1;
    min-width: 0;
  }

  .lotics-record-facts__unit {
    flex-shrink: 0;
  }

  /* A FIGURE STARTS UNDER ITS OWN LABEL — in a label-over-value cell the label
   *  IS the value's left edge, and the pair is read down, not across. ONE RIGHT
   *  EDGE IS A COLUMN'S LAW, NOT A CELL'S: a fact grid's neighbours across the row
   *  are a date, a party and a note, so an edge aligned to them compares an
   *  amount with nothing, and the surfaces that ARE a run of figures align it
   *  themselves (`MoneyCell`, `NumberCell`, `LedgerTotal`). */
  .lotics-record-facts__fact[data-figure] {
    /* THE FIGURE BEING TYPED TOO: an inline editor's `align` dresses its RESTING
       value only, so the cell states it and the control seated in it INHERITS
       it — every text the kit sets states its own alignment (`text.css`), so
       what is left to inherit is exactly that control. */
    text-align: start;
  }

  /* A FLAG'S ANSWER — the mark and its word on one line, at the tight rung: a
     mark that drifts from its word reads as a second fact. */
  .lotics-record-facts__flag {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  /* The gap under a level — the word the register puts in the column HEAD,
     because a fact has no head to put it in and a bare red number names
     nothing. */
  .lotics-record-facts__gap {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    /* IT STARTS WHERE THE READING STARTS — the cell's own edge, under the track
       above it and under the name above that. */
    justify-content: flex-start;
    gap: var(--lotics-space-8);
    min-width: 0;
  }

  /*
   * THE DOOR ON AN EDITABLE LINK — the arrow after the name, inside the field's
   * own surface. IT RESTS IN THE INK THE FIELD DEALS ITS GLYPHS and earns the
   * link colour under the pointer: the arrow lands a hair from the select's own
   * chevron, and two adjacent glyphs at two inks read as one being a mistake. It
   * STATES those two inks rather than inheriting them, because a button may not
   * nest in a press target and it therefore sits OUTSIDE the trailing slot.
   *
   * SQUARE AT THE CONTROL'S INNER HEIGHT, so a row of facts does not step in and
   * out as some of them gain a door.
   */
  .lotics-record-facts__door {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--lotics-control-content-height);
    height: var(--lotics-control-content-height);
    margin: 0;
    border: 0 solid var(--border);
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    appearance: none;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* The ink travels as the ICON's own property — the channel
       `inline_edit.css` deals its trailing adornments on. */
    --lotics-icon-color: var(--lotics-ink-inactive);
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  /* THE FIELD'S OWN LIFT, reached through the fact: the fact's box is the
     smallest one of ours that contains both glyphs. The ancestor carries no
     weight — `:where` — so the door's own two states below outrank it whichever
     rule a bundler emits last. */
  :where(.lotics-record-facts__fact:hover, .lotics-record-facts__fact:focus-within)
    .lotics-record-facts__door {
    --lotics-icon-color: var(--lotics-ink-default);
  }

  /* THE LINK INK IS EARNED, on the door itself and on nothing else. */
  .lotics-record-facts__door:hover,
  .lotics-record-facts__door:focus-visible {
    --lotics-icon-color: var(--lotics-accent);
  }

  .lotics-record-facts__door:hover {
    background-color: var(--lotics-wash-hover);
  }

  .lotics-record-facts__door:active {
    background-color: var(--lotics-wash-press);
  }

  .lotics-record-facts__door:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  /* TWO WHERE A SECOND COLUMN HOLDS A VALUE, and three where a third does. */
  @container lotics-record-facts (width >= 560px) {
    .lotics-record-facts__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container lotics-record-facts (width >= 900px) {
    .lotics-record-facts__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}