/* ============================================================
   app-field-display — read-only display value (the
   <app-field-display> tag helper). The display-only peer of
   app-textbox: a standalone labelled value, label above / value
   below, sharing app-textbox's vertical rhythm so it lines up with
   editable fields. Static text, not an input. Themed from semantic
   tokens only.
   ============================================================ */
@layer components {
    .app-field-display {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        width: 100%;
    }

    /* Same label treatment as app-textbox__label so a read-only value and an
       editable field read as the same kind of thing. */
    .app-field-display__label {
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
    }

    /* Value occupies the same 2rem height as a text input so a row mixing
       displays and inputs aligns; text vertically centres within it. */
    .app-field-display__value {
        display: flex;
        align-items: center;
        min-height: 2rem;
        font-size: var(--fs-ui);
        color: var(--color-ink);
        overflow-wrap: break-word;
    }
}