/*
 * ONE ALIGNMENT LAW: the row TOP-ALIGNS and each cell centres within the first
 * CONTROL LINE, so a tall value block (a multi-control stack, annotations) never
 * drags the label toward the block's centre.
 *
 * The control band and the label column are per-row NUMBERS, so they arrive as
 * custom properties the sheet reads. `--lotics-detail-row-lead` is what centring
 * ONE label line would have cost: the label pads down by it and then top-aligns,
 * so a single line lands exactly where centring put it while every extra line
 * grows downward instead of dragging the value's first line up with it.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@import "./detail_table.css";

@layer lotics.components {
  .lotics-detail-row {
    --lotics-detail-row-lead: max(
      0px,
      calc((var(--lotics-detail-row-min-height) - var(--lotics-leading-tight-sm)) / 2)
    );
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    min-width: 0;
    min-height: var(--lotics-detail-row-min-height);
    gap: var(--lotics-space-8);
  }

  /* A label-over-value BLOCK: the band moves to the value row, so the row itself
     carries none. */
  .lotics-detail-row[data-stacked] {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: var(--lotics-space-4);
  }

  .lotics-detail-row__label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-width: 0;
    min-height: var(--lotics-detail-row-min-height);
    padding-top: var(--lotics-detail-row-lead);
  }

  /* Spread mode's label does NOT shrink: both items are floorless, so with
   *  shrink on both the flex algorithm splits the deficit and the LABEL collapses
   *  to a sliver. The value wraps for free, so it is the one that gives way. */
  .lotics-detail-row__label[data-variant="spread"] {
    flex: 1 0 auto;
  }

  .lotics-detail-row__label[data-variant="form"] {
    flex: 0 0 auto;
    width: var(--lotics-detail-row-label-width);
  }

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

  .lotics-detail-row__value[data-variant="spread"] {
    flex: 0 1 auto;
  }

  /* Form mode: the value column FILLS the row so every inline editor spans the
     SAME width. */
  .lotics-detail-row__value[data-variant="form"] {
    flex: 1 1 0%;
  }

  /* The rhythm `FieldAnnotations` puts between its own lines, between the
     control line and the block beneath it. */
  .lotics-detail-row__value[data-annotated] {
    gap: var(--lotics-space-2);
  }

  /* Stacked mode's value block sizes to its content, because the row around it
     is the column now. */
  .lotics-detail-row__value[data-stacked] {
    flex: 0 0 auto;
  }

  /* The first line of the value cell — the control centres in it exactly like
     the label cell does. */
  .lotics-detail-row__control {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 0;
    min-height: var(--lotics-detail-row-min-height);
  }

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

  /* A FLAT value (no painted chip) centres its text in the control band, leaving
   *  invisible slack below it — tuck the annotations up by that slack so the
   *  perceived gap matches a chip row's. */
  .lotics-detail-row__annotations[data-flat] {
    margin-top: calc(var(--lotics-detail-row-lead) * -1);
  }
}