/* =============================================================================
 * components/button.css — see design-system-spec.md §6.3
 * =============================================================================
 *
 * Partials: templates/components/button.html. Variants:
 *   .btn--primary    terracotta, main CTA (legacy; migrate consumers to --paper)
 *   .btn--secondary  cream surface with border
 *   .btn--ghost      transparent, accent text
 *   .btn--danger     error-red, destructive actions
 *   .btn--dark       charcoal, used on dark hero cards
 *   .btn--paper      cream-200 paper cut-out with bold charcoal text — the
 *                    project-wide primary CTA per the login design reference
 *                    ([docs/design-references/Learner/login.html]) and the
 *                    `feedback_no_orange_buttons` rule. Terracotta appears
 *                    only on :focus-visible.
 * ============================================================================= */

.btn {
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--space-2) var(--space-5);
    /* One button shape platform-wide (owner, 2026-08-02): every .btn
     * takes the capsule pill; shape now codes action-vs-input (fields
     * keep the soft radius-md rectangle). The login screen is
     * untouched — auth/ uses its own .auth-submit, not .btn. */
    border-radius: 999px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition:
        background var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.btn:active {
    transform: scale(0.98);
}

.btn--primary {
    background: var(--color-accent);
    color: white;
}

.btn--primary:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn--secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn--secondary:hover {
    background: var(--color-surface-elevated);
    transform: translateY(-1px);
}

.btn--ghost {
    background: transparent;
    color: var(--color-accent-text);
}

.btn--ghost:hover {
    background: var(--cream-200);
}

.btn--danger {
    background: var(--color-error);
    color: white;
}

.btn--danger:hover {
    background: var(--error-700);
    transform: translateY(-1px);
}

.btn--dark {
    background: var(--charcoal-800);
    color: var(--cream-100);
}

.btn--dark:hover {
    background: var(--charcoal-700);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}


/* --- .btn--paper: cream paper cut-out primary CTA ------------------
 * Reads as a piece of the page's paper punched through whatever surface
 * it sits on. Matches the login mock's .auth-submit: `--color-bg` fill
 * so it echoes the page canvas, `--charcoal-200` border, ExtraBold
 * charcoal text, slight negative tracking. No shadow at rest — the
 * surrounding layout handles composition. Terracotta is reserved for
 * the :focus-visible ring. Overrides the base .btn's font-weight and
 * border-radius; padding bumps slightly for the heavier weight. */

.btn--paper {
    padding: var(--space-3) var(--space-5);
    background: var(--color-bg);
    color: var(--charcoal-900);
    border: 1px solid var(--charcoal-200);
    /* Was the login mock's radius-md; the capsule pill is the platform
     * button shape since 2026-08-02 (owner) — a declared divergence
     * from the sealed login reference, which keeps its own screen. */
    border-radius: 999px;
    font-weight: var(--weight-extrabold);
    letter-spacing: -0.005em;
    text-decoration: none;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.btn--paper:hover {
    background: var(--cream-50);
    border-color: var(--charcoal-300);
    /* Keep charcoal text on hover — base.css's a:hover paints
     * anchor text terracotta, which bleeds through without an
     * explicit override on this class. No orange on button fills
     * or text (feedback_no_orange_buttons). */
    color: var(--charcoal-900);
}

.btn--paper:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

.btn--paper svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    transition: transform var(--transition-fast) var(--ease-out-quart);
}

.btn--paper:hover svg {
    transform: translateX(2px);
}


/* --- .btn--paper-sm: small variant of the paper cut-out CTA ---------
 * Used inline in dense admin contexts (e.g. the Send Reminder button
 * on the Attention Needed row of the admin Overview). Same paper
 * cut-out aesthetic as .btn--paper (terracotta never on the fill;
 * border + cream surface + ExtraBold charcoal text); just smaller
 * padding and font-size so it fits beside same-row content without
 * dominating it. Pairs visually with .admin-training-row__date
 * (text-xs ExtraBold) on the right edge of the card above. */

.btn--paper-sm {
    /* Self-contained small variant of .btn--paper — applies the same
     * paper cut-out aesthetic (cream surface, charcoal-200 border,
     * radius-md, ExtraBold charcoal-900 text) at smaller padding +
     * font-size. Templates can use just `class="btn btn--paper-sm"`
     * without combining with `.btn--paper`; the visual is identical
     * to .btn--paper, just smaller. */
    padding: 6px var(--space-3);
    font-size: var(--text-xs);
    background: var(--color-surface);
    color: var(--charcoal-900);
    border: 1px solid var(--charcoal-200);
    border-radius: 999px;
    font-weight: var(--weight-extrabold);
    letter-spacing: -0.005em;
    text-decoration: none;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.btn--paper-sm:hover {
    background: var(--cream-50);
    border-color: var(--charcoal-300);
    color: var(--charcoal-900);
}

.btn--paper-sm:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}


/* --- .btn--paper-download: download-icon variant --------------------
 * Same paper cut-out aesthetic as .btn--paper / .btn--paper-sm; the
 * only difference is the hover icon affordance. The base
 * .btn--paper:hover svg translates +2px on X (right-arrow CTAs like
 * Generate / Activate / Continue feel right when the icon nudges
 * forward). Download icons are vertical glyphs — the inbox-arrow
 * points down, so the hover should nudge down to match. This
 * modifier overrides only that one rule. */

.btn--paper-download:hover svg {
    transform: translateY(2px);
}

/* --- Reports design-language layer (owner round 5, 2026-08-01) ------
 * On the fully melted Reports page the warm-white paper fill is the
 * strongest surface left, so the paper buttons step down one to
 * cream-100 there. Enumerated per screen, never blanket — the base
 * shell above stays for every other surface; the shipped cream-50
 * hover survives unchanged. */
.admin-overview--reports .btn--paper,
.admin-overview--reports .btn--paper-sm {
    background: var(--cream-100);
}

/* One slim box for every paper button on the page (owner round 6,
 * 2026-08-01: 32px read clumsy, and the history buttons ran taller
 * than the cards'). Also the a-vs-button fix: an <a> inherits the
 * page line-height while a <button> takes the UA's, so without the
 * explicit box identical classes render different heights. */
.admin-overview--reports .btn--paper-sm {
    box-sizing: border-box;
    height: 28px;
    line-height: 1;
    justify-content: center;
}

/* The Analytics header's Reports button sits beside the date-range
 * capsule, so it takes the capsule's box instead of the CTA's (owner
 * round 2, 2026-08-01: the full paper CTA read too big next to the
 * toggle): same 36px min-height, full radius, the chips' semibold
 * text-sm register. Round 3 (owner, same day: "should it still be
 * white?"): the fill steps to the capsule's own cream-200 ground —
 * the outlined register the Reports Generate cards settled on (a
 * cream-100 paper fill still reads white on screen); the hairline
 * alone draws the boundary, hover darkens the border only. */
.admin-overview--analytics .btn--paper {
    box-sizing: border-box;
    min-height: 36px;
    padding: 5px var(--space-4);
    border-radius: 999px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-normal);
    background: var(--cream-200);
}

.admin-overview--analytics .btn--paper:hover {
    background: var(--cream-200);
    border-color: var(--charcoal-300);
}

/* Motion matches the chips it sits beside (owner round 3: the CTA
 * motion read clunky here): no icon nudge on hover, no press scale —
 * colour/border transitions only, like the capsule's own options. */
.admin-overview--analytics .btn--paper:hover svg {
    transform: none;
}

.admin-overview--analytics .btn--paper:active {
    transform: none;
}

/* The two "Create a campaign template" buttons (Library header;
 * Campaigns catalog head) predate that capsule canon and kept the
 * full CTA box — Library's extra height even dragged its title ~4px
 * off the shared line (the owner's alignment catch, 2026-08-02,
 * round 7; Campaigns followed by owner call the same day: "the
 * library one is now better, change that as well"). Same capsule as
 * the Analytics header button: 36px box, pill radius, semibold,
 * cream-200 ground, border-only hover, no CTA motion. Scoped to the
 * two spots — every other paper button (Search, the composer dock,
 * confirm dialogs) keeps its own register. */
/* The People header pair (Bulk import / Invite user) joined
 * 2026-08-02 (owner: the last header corner still on the old small
 * pill); the explicit font-size lifts their paper-sm text-xs to the
 * capsule's text-sm. */
.admin-overview--library .library__create-path,
.admin-overview--campaigns .admin-overview__catalog-actions .btn--paper,
.admin-overview--people .people-header-actions .btn--paper-sm {
    box-sizing: border-box;
    min-height: 36px;
    padding: 5px var(--space-4);
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-normal);
    background: var(--cream-200);
}

.admin-overview--library .library__create-path:hover,
.admin-overview--campaigns .admin-overview__catalog-actions .btn--paper:hover,
.admin-overview--people .people-header-actions .btn--paper-sm:hover {
    background: var(--cream-200);
    border-color: var(--charcoal-300);
}

.admin-overview--library .library__create-path:hover svg,
.admin-overview--campaigns .admin-overview__catalog-actions .btn--paper:hover svg,
.admin-overview--people .people-header-actions .btn--paper-sm:hover svg {
    transform: none;
}

.admin-overview--library .library__create-path:active,
.admin-overview--campaigns .admin-overview__catalog-actions .btn--paper:active,
.admin-overview--people .people-header-actions .btn--paper-sm:active {
    transform: none;
}