/* ============================================================================
   BUTTONS — one base class + variants. Reuse rules:
   - Always pair `.btn` with ONE variant: <button class="btn btn-primary">.
   - Size is a separate modifier: add `.btn-small`.
   - Never restyle buttons in page CSS; add/extend a variant here instead.
   - All colors come from root.css tokens so themes restyle buttons for free.
   - NO `:hover` IN THIS FILE. Every button on the site — these variants and the
     three dozen one-off button classes in the page and component sheets — shares
     a single hover, and it lives in base/button-hover.css: a small highlight and
     a 1px lift. Each variant here used to carry its own (`translateY(-2px)` plus
     a bigger shadow for the solid ones, a background swap for the glass ones),
     which is how the site ended up with a dozen slightly different answers to the
     same pointer. Set the fill here; the reaction is not this file's business.
   ========================================================================== */

/* ── Base (layout + behavior only, no colors) ─────────────────────── */

.btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    transition: var(--btn-transition);
    white-space: nowrap;
    word-break: auto-phrase;
    /* A button's label is ALWAYS centered. A native <button> centers by default,
       but `<a class="btn">` / `<label class="btn">` inherit the surrounding
       text-align instead, and any stretched button (`flex: 1` in a modal footer,
       `width: 100%` in a sidebar) then reads as left-aligned text in a wide box.
       Both properties are here so it holds whether the button lays out as a
       block or as a flex container. */
    text-align: center;
    justify-content: center;
}

/* ── Disabled ─────────────────────────────────────────────────────────
   Every variant at once, so a dead button reads as dead whatever colour it
   started as. Buttons that cannot be used are DISABLED rather than hidden in
   several places (Follow and Message while a block is in place, the spent
   actions in a chat row), and until this rule existed they were painted in
   full colour with the hover lift still armed - indistinguishable from a
   working button until the click did nothing.

   `filter: grayscale()` is what drains the gradients: `opacity` alone left the
   red Block button plainly red, just paler.

   Cancelling the hover is NOT done here any more: base/button-hover.css owns
   both the lift and the highlight, so it also owns switching them off for a
   disabled button (it covers :disabled, [disabled], .is-disabled and .disabled).
   A `transform: none` here would be a second place to keep in sync. */
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
    opacity: 0.45;
    filter: grayscale(0.75);
    box-shadow: none;
    cursor: not-allowed;
}

/* ── Solid variants (gradient fill + glow) ────────────────────────── */

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-primary);
}

.btn-success {
    background: var(--gradient-success);
    color: white;
    box-shadow: var(--shadow-success);
}

.btn-danger {
    background: var(--gradient-danger);
    color: white;
    box-shadow: var(--shadow-danger);
}

.btn-warning {
    background: var(--gradient-warning);
    color: white;
}

/* ── Neutral glass variants ───────────────────────────────────────────
   .btn-secondary / .btn-cancel / .btn-upload share one look on purpose:
   a translucent "glass" button. Keep them grouped — one rule to change. */

.btn-secondary,
.btn-cancel,
.btn-upload {
    background: var(--overlay-lg);
    color: white;
    border: var(--glass-border);
}

/* ── Gold outline variants (edit / draft actions) ─────────────────── */

.btn-edit,
.btn-draft {
    background: var(--gold-bg);
    color: white;
    border: 2px solid var(--gold-border);
}

.btn-edit {
    display: block;
    text-align: center;
}

/* ── Danger outline (soft delete button in lists/sidebars) ────────── */

.btn-delete {
    width: 100%;
    margin-bottom: 0.5rem;
    background: var(--danger-bg-hover);
    border: 2px solid var(--danger-border);
    color: white;
}

/* ── Misc ─────────────────────────────────────────────────────────── */

.btn-upload-box {
    background: var(--overlay-md);
    border: 0.5px solid var(--overlay-xl);
    border-radius: var(--radius-lg);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* File inputs must stay rendered (not display:none) or the browser cannot
   focus them to show the "please upload a file" bubble on a required field —
   it throws "An invalid form control is not focusable" and blocks submit.
   So: transparent overlay across the label instead of hiding it. */

.btn-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.btn-upload .file-input-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.btn-add {
    padding: 0.8rem 1.5rem;
    background: var(--overlay-lg);
    border: var(--glass-border);
    color: white;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--btn-transition);
    font-weight: 600;
    margin-top: 1rem;
}

/* ── Size modifier ────────────────────────────────────────────────── */

.btn-small {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
}

/* RESPONSIVE FIX: this used to be `display: block`. The picker's trigger is a
   <label class="btn btn-upload">, and .btn sets padding but no display - inside
   the flex box above the label is blockified by flex layout, but the moment the
   box became a plain block the label fell back to `display: inline`. Vertical
   padding on an inline box does not grow its line, so the button's 1rem top and
   bottom padding painted straight over the field label above it and over the
   "Max 8MB" help text below (most visible on the report-a-problem screenshot
   field, which is where this was caught). Staying a flex container - just
   stacked - keeps the label a block box and keeps the 12px gap. */
@media (max-width: 900px) {
    .btn-upload-box {
        flex-direction: column;
        align-items: stretch;
    }
}