/* ── Piclu primitives ───────────────────────────────────────────────────
 *
 * Locked-geometry primitives. Every list-row, button-icon, chip, and field
 * across the app composes these — per-component CSS does not redefine
 * geometry. This is the discipline that prevents the per-button drift
 * (oval play buttons, off-center glyphs) that surfaced before the revamp.
 *
 * Hierarchy of files:
 *   1. normalize.css   browser-default reset
 *   2. tokens.css      values
 *   3. primitives.css  ← you are here
 *   4. components.css  per-page composites that ride these primitives
 *   5. style.css       page chrome, layout
 *
 * The shape rules below are deliberately tight. If a consumer needs
 * different geometry, prefer adding a modifier class here over inventing
 * one-off CSS in components.css. Drift creeps in via "I'll just override
 * one prop" — keep that resistance high.
 */

/* ── List row ─────────────────────────────────────────────────────────── */

.list-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

/* ── Inline row (utility) ─────────────────────────────────────────────── */

.row-inline {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ── Icon button ─────────────────────────────────────────────────────────
 *
 * Square, content-centered. The aspect-ratio + grid-place-items combo
 * fixes both the oval-on-content-swap bug AND the off-center glyph bug
 * — content can change (▶ → ■, mic → loader) without geometry drift.
 *
 * line-height: 1 prevents inherited body line-height from pushing text
 * glyphs off-center. SVG icons get vertical-align: middle so they sit
 * on the cross-axis center even when nested in inline contexts.
 *
 * Three sizes (sm / md / lg). Default is md. Add .btn-icon-circle to round.
 */

.btn-icon {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    width: 36px;
    /* flex-shrink: 0 + min-width pin the geometry inside flex containers
     * (e.g., .list-row). Without these, a long sibling text could shrink
     * the icon button below 36px, and aspect-ratio would dutifully drop
     * the height proportionally — silently re-introducing the original
     * "buttons of inconsistent size across rows" failure mode. */
    flex-shrink: 0;
    min-width: 36px;
    line-height: 1;
    padding: 0;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    color: var(--color-fg);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--motion-quick), border-color var(--motion-quick);
}

.btn-icon:hover { background: var(--color-surface); }
.btn-icon:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--color-accent); }
.btn-icon:disabled { cursor: not-allowed; opacity: 0.5; }
.btn-icon svg { width: 60%; height: 60%; vertical-align: middle; display: block; }

.btn-icon-sm { width: 28px; min-width: 28px; }
.btn-icon-md { width: 36px; min-width: 36px; }   /* explicit default for symmetry */
.btn-icon-lg { width: 44px; min-width: 44px; }

.btn-icon-circle { border-radius: 50%; }

/* Accent variant — used for primary play / send actions on the home. */
.btn-icon.is-accent {
    background: var(--color-accent);
    color: var(--color-bg);
    border-color: var(--color-accent);
}
.btn-icon.is-accent:hover { background: var(--color-accent-soft); border-color: var(--color-accent-soft); }

/* Quiet variant — for low-attention controls like row-level archive. */
.btn-icon.is-quiet {
    background: transparent;
    border-color: transparent;
    color: var(--color-fg-muted);
}
.btn-icon.is-quiet:hover { color: var(--color-fg); background: var(--color-surface); }

/* ── Chip ────────────────────────────────────────────────────────────────
 *
 * Pill-shaped tag with locked vertical alignment. Variants:
 *   - default: subtle, on-surface
 *   - .chip-soft: lower-contrast (used for secondary attribution)
 *   - .chip-accent: accent-tinted (used for in-flight / live state)
 */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1.4;
    background: var(--color-surface);
    color: var(--color-fg-muted);
    border: 1px solid var(--color-border);
    white-space: nowrap;
}

.chip-soft {
    background: var(--color-surface);
    color: var(--color-fg-muted);
    border-color: transparent;
}

.chip-accent {
    background: var(--color-accent-quiet);
    color: var(--color-accent);
    border-color: transparent;
}

/* ── Field ───────────────────────────────────────────────────────────────
 *
 * Input + adjacent action button locked at the same height with no
 * baseline drift. Used by the capture strip and any input-with-action
 * composite. The implicit guarantee: if you put an .input and a .btn-icon
 * inside a .field, they line up.
 */

.field {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    width: 100%;
}

.field .input,
.field input[type="text"],
.field input[type="search"],
.field textarea {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    color: var(--color-fg);
    font-family: inherit;
    font-size: var(--text-base);
    line-height: 1.4;
}

.field textarea {
    height: auto;
    min-height: 44px;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    resize: vertical;
}

.field .input:focus,
.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

.field .btn-icon {
    width: 44px;
    border-radius: var(--radius-md);
}

/* ── Visually-hidden helper (sr-only style) ────────────────────────────── */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}