/*
 * A REFERENCE AS A FIELD VALUE. The box this sheet paints is the one around the
 * kit's own inline field — the popover's anchor and the caller's `ref` target —
 * so it must be exactly the field's box and nothing more: no ground, no border,
 * no gutter of its own.
 *
 * Everything else here is the PEEK's own grammar: the facts band, one fact's
 * value cell, and the two verb groups in the footer.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-reference-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  /* THE RESTING VALUE — the marker and the record's code on one line. */
  .lotics-reference-field__display {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: var(--lotics-space-6);
  }

  .lotics-reference-field__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-12);
  }

  /* One fact's value cell: the value, then any verb ABOUT it. */
  .lotics-reference-field__fact {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: var(--lotics-space-6);
  }

  .lotics-reference-field__fact-value {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
  }

  /* LEFT acts on the LINK, RIGHT on the RECORD it points at — two groups, one
     geometry, so the footer has one shape wherever both appear. */
  .lotics-reference-field__link-verbs,
  .lotics-reference-field__record-verbs {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    gap: var(--lotics-space-8);
  }
}