/* ── Piclu Components ────────────────────────────────────────────────────
 *
 * Charter posture: quiet competence. Buttons are verbs. Empty states are
 * factual. Errors instructive. No theatre, no gradients, no animation
 * beyond a single calm pulse on the live recording indicator.
 *
 * Each class name maps to existing markup so HTML doesn't need rewriting in
 * this commit; commits 2–4 polish copy and structure.
 */

/* ── Button ──────────────────────────────────────────────────────────────
 *
 * Default <button> = primary (terracotta on cream). Variants: .secondary,
 * .linky (inline link-button), .btn-primary (CTA-shaped link). */

button,
.btn {
    appearance: none;
    background: var(--color-accent);
    color: var(--color-bg);
    border: 1px solid transparent;
    padding: 10px 18px;
    font: var(--weight-medium) var(--text-base)/1 var(--font-sans);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--motion-quick), border-color var(--motion-quick), box-shadow var(--motion-quick);
    align-self: flex-start;
}

button:hover,
.btn:hover {
    background: var(--color-accent-soft);
}

button:focus-visible,
.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

button:disabled,
.btn:disabled {
    background: transparent;
    color: var(--color-fg-muted);
    border-color: var(--color-border-strong);
    cursor: not-allowed;
}

button.secondary,
.btn.secondary {
    background: transparent;
    color: var(--color-fg);
    border-color: var(--color-border-strong);
}
button.secondary:hover,
.btn.secondary:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-quiet);
}
button.secondary:disabled,
.btn.secondary:disabled {
    color: var(--color-fg-muted);
    border-color: var(--color-border);
    background: transparent;
}

button.linky,
.btn.linky {
    background: none;
    color: var(--color-fg-muted);
    border: 0;
    padding: 0;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    align-self: auto;
}
button.linky:hover,
.btn.linky:hover {
    color: var(--color-accent);
    background: none;
}
button.linky:focus-visible,
.btn.linky:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

/* Inline list-row buttons (recordings) */
.btn-play,
.btn-delete {
    background: transparent;
    color: var(--color-fg);
    border: 1px solid var(--color-border-strong);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font: var(--weight-medium) var(--text-sm)/1 var(--font-sans);
    cursor: pointer;
    transition: background var(--motion-quick), border-color var(--motion-quick);
    align-self: auto;
}
.btn-play:hover    { border-color: var(--color-accent); background: transparent; }
.btn-play:focus-visible,
.btn-delete:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* margin-left:auto = end-align inside .rec-row's flex container. Reusing
 * .btn-delete in another context that already auto-aligns will produce a
 * surprise right-shift. */
.btn-delete        { color: var(--color-err); margin-left: auto; }
.btn-delete:hover  { border-color: var(--color-err); background: var(--color-err-bg); }

/* Two-tap delete confirmation: same button transforms in place to a filled
 * red Delete within a 3-second window. No layout shift, no extra controls
 * — charter §5.1 quiet competence. Click again confirms; blur, Escape, or
 * the timer all cancel and revert. Hover on the armed state DARKENS so the
 * user gets direct-manipulation feedback that the next click destroys. */
.btn-delete.confirming {
    background: var(--color-err);
    color: var(--color-bg);
    border-color: var(--color-err);
}
.btn-delete.confirming:hover {
    background: #803629;
    border-color: #803629;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* CTA-shaped anchor (login CTA, recordings empty-state → /devices).
 * Overrides for color and text-decoration are explicit on each pseudo-state
 * because the generic `a` and `a:hover` rules in style.css would otherwise
 * win on specificity and wipe the cream-on-teal text. */
.btn-primary {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-bg);
    padding: 10px 18px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font: var(--weight-medium) var(--text-base)/1 var(--font-sans);
    transition: background var(--motion-quick), box-shadow var(--motion-quick);
}
.btn-primary:hover {
    background: var(--color-accent-soft);
    color: var(--color-bg);
    text-decoration: none;
}
.btn-primary:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* ── Input ──────────────────────────────────────────────────────────── */

input[type=text],
input[type=password],
input[type=email] {
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    color: var(--color-fg);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font: var(--text-base)/1.4 var(--font-sans);
    transition: border-color var(--motion-quick), box-shadow var(--motion-quick);
    width: 100%;
}
input[type=text]:focus-visible,
input[type=password]:focus-visible,
input[type=email]:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

label {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font: var(--text-sm)/1.4 var(--font-sans);
    color: var(--color-fg-muted);
}

/* Input + inline action button (e.g., Show/Hide password). The action sits
 * inside the input's visual bounds so the field still reads as one control. */
.input-with-action {
    position: relative;
    display: block;
}
.input-with-action input {
    padding-right: 60px;
}
.input-with-action .linky {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-sm);
}

/* ── Card / .step ────────────────────────────────────────────────────── */

.card,
.step {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-card);
}

/* ── Pill (status-strip badge) ──────────────────────────────────────── */

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font: var(--weight-medium) var(--text-sm)/1 var(--font-sans);
}
.pill.recording { background: var(--color-accent-quiet); color: var(--color-accent); }
.pill.recording::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    animation: piclu-pulse 1.6s ease-in-out infinite;
}

@keyframes piclu-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
    .pill.recording::before { animation: none; }
}

/* ── Chip (filter) ──────────────────────────────────────────────────── */

.chip {
    background: transparent;
    color: var(--color-fg);
    border: 1px solid var(--color-border-strong);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font: var(--weight-regular) var(--text-sm)/1 var(--font-sans);
    cursor: pointer;
    transition: border-color var(--motion-quick), background var(--motion-quick), color var(--motion-quick);
    align-self: auto;
}
.chip:hover { border-color: var(--color-accent); background: transparent; }
.chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.chip.active {
    background: var(--color-fg);
    color: var(--color-bg);
    border-color: var(--color-fg);
}

/* ── List row (recordings) ──────────────────────────────────────────── */

.rec-row {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.rec-row:last-child { border-bottom: 0; }

.row-meta {
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
}

.day-header {
    margin: var(--space-5) 0 var(--space-2);
    font: var(--weight-semibold) var(--text-sm)/1.3 var(--font-sans);
    color: var(--color-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.trunc-badge {
    padding: 3px 10px;
    background: var(--color-warn-bg);
    color: var(--color-warn);
    border-radius: var(--radius-pill);
    font: var(--weight-medium) var(--text-xs)/1 var(--font-sans);
}

/* ── Result panel (claim feedback / BLE checklist) ──────────────────── */

.result {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font: var(--text-sm)/var(--leading-body) var(--font-sans);
    word-break: break-word;
}
.result.error   { background: var(--color-err-bg);  border-color: var(--color-err);   color: var(--color-err); }
.result.ok      { background: var(--color-ok-bg);   border-color: var(--color-ok);    color: var(--color-ok); }
.result.neutral { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-fg); }

.result dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-4);
}
.result dt { color: var(--color-fg-muted); }
.result dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    word-break: break-all;
}
.result .psk-mask { font-family: var(--font-mono); }

/* ── Empty / error full-panel states ────────────────────────────────── */

.empty-state {
    text-align: center;
    padding: var(--space-7) var(--space-4);
    color: var(--color-fg-muted);
}
.empty-state .empty-headline {
    font-size: var(--text-md);
    color: var(--color-fg);
    margin-bottom: var(--space-3);
}
.empty-state p { margin-bottom: var(--space-3); }

.error-state {
    background: var(--color-err-bg);
    color: var(--color-err);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-err);
}

/* ── Privacy frame (recordings header banner) ───────────────────────── */

.privacy-frame {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    background: var(--color-accent-quiet);
    border-radius: var(--radius-md);
    color: var(--color-fg);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}
/* The dismiss link sits on the pale teal-grey privacy-frame background, not
 * on cream — bumping to --color-fg keeps it readable in outdoor lighting and
 * preserves the audited-pair invariant. */
.privacy-frame .linky { color: var(--color-fg); }
.privacy-frame .linky:hover { color: var(--color-accent); }

/* ── Utilities ──────────────────────────────────────────────────────── */

.muted       { color: var(--color-fg-muted); font-size: var(--text-sm); }
.hidden      { display: none !important; }
.row         { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.footer-note { margin-top: var(--space-6); font-size: var(--text-xs); color: var(--color-fg-muted); }