/*
 * THE FIELD'S VERTICAL RHYTHM, and it is one number: the annotation gutter. The
 * label leads, the control follows one `sm` rung down, and everything the field
 * has to SAY sits under that control at the same rung, so every field in a grid
 * has the same one block above its control.
 *
 * The trailing `md` separates one field from the next, and belongs to the field
 * because a GRID states its column gutter alone (`Stack gapX`). `control-first`
 * re-places the SAME five parts rather than writing a second anatomy.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-form-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    padding-bottom: var(--lotics-space-16);
  }

  /* THE FIELD THAT TAKES THE ROW. `1 / -1` reaches the last line of the grid
     whatever it is, including the `auto-fill` count nobody can name. Outside a
     grid it is inert: `grid-column` says nothing to a flex child. */
  .lotics-form-field[data-span] {
    grid-column: 1 / -1;
  }

  .lotics-form-field__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
  }

  .lotics-form-field__label {
    flex-shrink: 1;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-tight-sm);
    letter-spacing: var(--lotics-tracking-sm);
    font-weight: var(--lotics-weight-medium);
    color: var(--lotics-ink-default);
    /* A native `<label for>` reaches the control, but a field SETS A VALUE and the
       pointer is reserved for what acts. */
    cursor: default;
  }

  /* The marker keeps ONE line and never shrinks — the label is what yields. */
  .lotics-form-field__mark {
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-tight-sm);
    letter-spacing: var(--lotics-tracking-sm);
    font-weight: var(--lotics-weight-regular);
    color: var(--lotics-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .lotics-form-field__description,
  .lotics-form-field__warning,
  .lotics-form-field__error {
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-sm);
    letter-spacing: var(--lotics-tracking-sm);
    font-weight: var(--lotics-weight-regular);
    margin: 0;
  }

  .lotics-form-field__description {
    min-width: 0;
    margin-top: var(--lotics-space-8);
    color: var(--lotics-ink-muted);
  }

  .lotics-form-field__warning {
    margin-top: var(--lotics-space-8);
    color: var(--lotics-ink-warning);
  }

  .lotics-form-field__error {
    margin-top: var(--lotics-space-8);
    color: var(--lotics-ink-danger);
  }

  /* The part that holds the CALLER's control — a flex column with stretched
     children, which is what every consumer wrote its field against. */
  .lotics-form-field__control {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    margin-top: var(--lotics-space-8);
  }

  /* CONTROL-FIRST — the boolean row: column one is the control, across both text
     rows. The trailing rung is one step in, because a toggle carries no box of
     its own. */
  .lotics-form-field[data-layout="control-first"] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--lotics-space-8);
    align-items: center;
    padding-bottom: var(--lotics-space-8);
  }

  .lotics-form-field[data-layout="control-first"] .lotics-form-field__header {
    grid-column: 2;
    grid-row: 1;
  }

  /* Beside the control rather than under it: the parts are placed by the grid, so
     the DOM order the stacked layout needs costs this one nothing. */
  .lotics-form-field[data-layout="control-first"] .lotics-form-field__description {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }

  .lotics-form-field[data-layout="control-first"] .lotics-form-field__control {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-top: 0;
  }

  /* One line of words centres on the control; two hang from its top. */
  .lotics-form-field[data-layout="control-first"][data-described] .lotics-form-field__control {
    align-self: start;
  }

  .lotics-form-field[data-layout="control-first"] .lotics-form-field__warning,
  .lotics-form-field[data-layout="control-first"] .lotics-form-field__error {
    grid-column: 1 / -1;
  }
}