/* ==========================================================================
   COMPONENT — Buttons
   .btn-primary / .btn-secondary / .btn-icon / .btn-ghost are the app's own
   button set (distinct from the site chrome's .button, see site-chrome.css).

   No gradients carry a label. A gradient background makes the text on it
   impossible to contrast-check from CSS — the audit can only list it and ask
   a human to squint — and the primary CTA is the last element on the page
   that should be exempt from measurement. Solid --accent-solid, white on it
   at 5.48:1, and 4.55:1 even in the hover state.
   ========================================================================== */

.btn-primary,
.btn-secondary,
.btn-ghost {
    padding: 0.7rem 1.25rem;
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-weight: var(--fw-semibold);
    font-size: var(--text-sm);
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary {
    background: var(--accent-solid);
    color: var(--text-on-accent);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    box-shadow: var(--shadow-md);
}

/* Cancel state of the run button. Same geometry so the label swap does not
   reflow the toolbar mid-run. Dark ink on the red fill: white on it is
   2.52:1 and would fail outright. */
.btn-primary.is-cancel {
    background: var(--error-solid);
    color: var(--text-on-solid);
}
.btn-primary.is-cancel:hover:not(:disabled) {
    background: #FF9494;
    color: var(--text-on-solid);
}

.btn-secondary {
    background: var(--surface-3);
    color: var(--text-primary);
    border-color: var(--border-default);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--surface-4);
    border-color: var(--border-strong);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
    padding: 0.4rem 0.7rem;
    min-height: 34px;
}
.btn-ghost:hover:not(:disabled) {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled,
.btn-icon:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

/* ---- Icon buttons in the content header -------------------------------- */
.btn-icon {
    padding: 0.45rem 0.7rem;
    min-height: 36px;
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}
.btn-icon:hover:not(:disabled) {
    background: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.btn-label { font-size: var(--text-sm); }

/* A link that has to behave like a control — the shared-report "Run your own"
   and the sidebar upgrade nudge. Both were bare inline links measuring 21px
   and 15px tall. */
.btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--accent-border);
    background: var(--accent-bg);
    color: var(--accent-fg);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.btn-link:hover {
    background: rgba(173, 182, 255, 0.22);
    border-color: var(--accent-fg);
    color: var(--accent-fg);
}

/* ---- Touch sizing ------------------------------------------------------
   WCAG 2.2 AA 2.5.8 is 24x24; 44x44 is the AAA target and the one worth
   hitting on a phone. Applied by width rather than `pointer: coarse` because
   a coarse pointer is not the only way a 32px button is hard to hit. */
@media (max-width: 768px) {
    .btn-primary,
    .btn-secondary,
    .btn-link { min-height: var(--hit-min); }

    .btn-icon {
        min-height: var(--hit-min);
        min-width: var(--hit-min);
        padding: 0.5rem 0.8rem;
    }

    .btn-ghost { min-height: var(--hit-min); }
}