/* ============================================================================
   BUTTON HOVER — ONE HOVER FOR EVERY BUTTON ON THE SITE.

   WHAT IT IS
   A small white highlight over whatever fill the button has, plus a 1px lift.
   It is the hover the "Create new character" / "Upload new Build" buttons on
   the search pages always had (.kbtn), promoted to the site-wide standard.

   WHY THIS FILE EXISTS
   Before it, the hover was re-invented in ~30 stylesheets: -1px here and -2px
   there, `transform: scale(1.05)` on one remove button and `scale(1.1)` on the
   next, some growing a shadow, some swapping a background, some doing nothing
   at all. Two buttons sitting side by side in the same popup footer could
   answer the pointer differently. The rules were spread across base/, page/,
   create/ and component/ sheets, so there was nowhere to change it once.

   HOW IT IS BUILT
   The highlight is an overlay layer (::after), not `filter: brightness()`.
   brightness() multiplies colour channels and leaves alpha untouched: it
   brightens the gradient buttons well and does literally nothing to the
   translucent "glass" ones, because rgba(255,255,255,.15) scaled is still
   rgba(255,255,255,.15). That is precisely why the glass buttons had all grown
   their own `background: var(--overlay-xl)` hover — the shared effect did not
   reach them. A white overlay reads the same on a gradient fill, on glass and
   on a transparent outline, so one declaration covers every variant.

   It is also why the effect is NOT painted with `box-shadow: inset`, which
   would have sat below the label instead of over it: box-shadow is a single
   property, and setting it on :hover would wipe out the coloured glow the
   solid variants carry at rest (--shadow-primary and friends), making the
   glow vanish for exactly as long as the pointer is on the button.

   HOW TO USE IT
   Nothing. Add the button's class to the list below and it is done. Do NOT
   write a `:hover` for a button in a page or component sheet — that is what
   this file replaces, and a page sheet loads after this one, so a stray rule
   silently wins and that button drifts out of the system again.

   Buttons deliberately NOT in the list: pagination arrows (.next-btn,
   .previous-btn, .cm-page-btn), the calendar month arrows, the view toggle,
   tabs, and the small icon glyphs (.delete-tier, .edit-tier, .tag-vote-btn,
   chat's round .icon-btn, every close/remove ×). Those are controls, not
   buttons — a lift on a 28px round arrow reads as a wobble — and the two
   text-link buttons (.btn-keep, .btn-reply) keep their underline/tint because
   a highlight on a button with no fill highlights nothing.

   Loaded from fragments/head-styles.html, i.e. on every page, because the
   button classes it covers are spread across every sheet in the project
   (base/buttons.css itself is only linked by ~18 templates, so it could not be
   the home for this).
   ========================================================================== */

/* ── The buttons ──────────────────────────────────────────────────────
   Grouped by where the class is defined, so a new button is easy to slot in.
   Base variants (.btn-primary, .kbtn-ghost, .cm-btn-danger, …) are never worn
   without their base class, so listing the base is enough. */

.btn,                       /* base/buttons.css — the main system          */
.kbtn,                      /* page/search-kingdom.css — search pages      */
.modal-btn,                 /* base/popup-common.css                       */
.btn-create,
.btn-confirm-danger,
.cm-btn,                    /* page/commission-manager.css                 */
.cm-toggle-btn,
.cmi-btn,                   /* page/commission-manager-item.css            */
.chat-modal-btn,            /* page/chat.css                               */
.send-btn,
.problem-report-btn,        /* component/popup-report-problem.css          */
.btn-join,                  /* component/group-card.css                    */
.character-join-btn,        /* page/item/group.css                         */
.post-action-btn,           /* component/journal-card.css                  */
.media-action-btn,          /* component/media-card.css                    */
.mark-read-btn,             /* component/notification{,-bell}.css          */
.btn-delete,
.btn-add,                   /* base/buttons.css — worn with and without .btn */
.btn-add-item,              /* component/popup-add-new-tier.css            */
.btn-remove,
.btn-add-ticket,            /* component/popup-event-suggest.css           */
.btn-remove-ticket,
#addMaterialRow,            /* component/material-lines.css                */
.btn-accept,                /* page/group-manage.css                       */
.btn-decline,
.btn-profile,
.follow-btn,                /* page/item/cp-build.css                      */
.lineup-more-btn,           /* page/item/cp-event.css                      */
.btn-youtube,               /* page/media.css, page/item/media.css         */
.editor-btn,                /* page/journal.css                            */
.btn-login,                 /* page/login.css                              */
.btn-social,                /* page/login.css, page/register.css           */
.btn-signup,
.btn-resend {
    /* Anchor for the sheen. Buttons that are absolutely positioned in their
       own sheet keep that: those rules load after this one and win. */
    position: relative;
    transition: var(--btn-transition);
}

/* ── The highlight ────────────────────────────────────────────────────
   `inset: 0` covers the padding box, so a bordered button keeps its border
   colour un-tinted — the fill is what should light up, not the outline.
   `border-radius: inherit` follows pills, circles and 8px corners alike. */

.btn::after,
.kbtn::after,
.modal-btn::after,
.btn-create::after,
.btn-confirm-danger::after,
.cm-btn::after,
.cm-toggle-btn::after,
.cmi-btn::after,
.chat-modal-btn::after,
.send-btn::after,
.problem-report-btn::after,
.btn-join::after,
.character-join-btn::after,
.post-action-btn::after,
.media-action-btn::after,
.mark-read-btn::after,
.btn-delete::after,
.btn-add::after,
.btn-add-item::after,
.btn-remove::after,
.btn-add-ticket::after,
.btn-remove-ticket::after,
#addMaterialRow::after,
.btn-accept::after,
.btn-decline::after,
.btn-profile::after,
.follow-btn::after,
.lineup-more-btn::after,
.btn-youtube::after,
.editor-btn::after,
.btn-login::after,
.btn-social::after,
.btn-signup::after,
.btn-resend::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #fff;

    /* `plus-lighter` ADDS the layer's light to the fill instead of painting a
       white film over it, which is what makes this read as the same effect the
       .kbtn buttons always had rather than as a wash. Measured against the old
       `filter: brightness(1.12)` on the primary gradient: brightness gave
       rgb(235,86,212), this gives rgb(231,97,209) — the same button, the same
       amount brighter. A plain white overlay at the equivalent strength gave
       rgb(215,98,197): duller AND paler, because it lifts the dark channel
       most and drains the colour.

       It also rescues the two fills brightness() could not touch at all: the
       translucent glass buttons (unchanged under brightness, since alpha is
       untouched) and flat saturated fills like the YouTube red, where 255 x
       1.12 simply clips back to 255.

       Browsers without plus-lighter (pre-111 Chrome, pre-16 Safari) fall back
       to a normal white overlay at the same opacity — quieter, still a
       highlight, nothing breaks. */
    mix-blend-mode: plus-lighter;
    opacity: 0;
    /* The layer must never eat a click, and it must never be picked up as
       content by a flex/grid button — it is out of flow, so it is not. */
    pointer-events: none;
    transition: opacity var(--btn-hover-speed) ease;
}

.btn:hover::after,
.kbtn:hover::after,
.modal-btn:hover::after,
.btn-create:hover::after,
.btn-confirm-danger:hover::after,
.cm-btn:hover::after,
.cm-toggle-btn:hover::after,
.cmi-btn:hover::after,
.chat-modal-btn:hover::after,
.send-btn:hover::after,
.problem-report-btn:hover::after,
.btn-join:hover::after,
.character-join-btn:hover::after,
.post-action-btn:hover::after,
.media-action-btn:hover::after,
.mark-read-btn:hover::after,
.btn-delete:hover::after,
.btn-add:hover::after,
.btn-add-item:hover::after,
.btn-remove:hover::after,
.btn-add-ticket:hover::after,
.btn-remove-ticket:hover::after,
#addMaterialRow:hover::after,
.btn-accept:hover::after,
.btn-decline:hover::after,
.btn-profile:hover::after,
.follow-btn:hover::after,
.lineup-more-btn:hover::after,
.btn-youtube:hover::after,
.editor-btn:hover::after,
.btn-login:hover::after,
.btn-social:hover::after,
.btn-signup:hover::after,
.btn-resend:hover::after {
    opacity: var(--btn-hover-sheen);
}

/* ── The lift ─────────────────────────────────────────────────────────── */

.btn:hover,
.kbtn:hover,
.modal-btn:hover,
.btn-create:hover,
.btn-confirm-danger:hover,
.cm-btn:hover,
.cm-toggle-btn:hover,
.cmi-btn:hover,
.chat-modal-btn:hover,
.send-btn:hover,
.problem-report-btn:hover,
.btn-join:hover,
.character-join-btn:hover,
.post-action-btn:hover,
.media-action-btn:hover,
.mark-read-btn:hover,
.btn-delete:hover,
.btn-add:hover,
.btn-add-item:hover,
.btn-remove:hover,
.btn-add-ticket:hover,
.btn-remove-ticket:hover,
#addMaterialRow:hover,
.btn-accept:hover,
.btn-decline:hover,
.btn-profile:hover,
.follow-btn:hover,
.lineup-more-btn:hover,
.btn-youtube:hover,
.editor-btn:hover,
.btn-login:hover,
.btn-social:hover,
.btn-signup:hover,
.btn-resend:hover {
    transform: translateY(var(--btn-hover-lift));
}

/* ── Dead buttons stay dead ───────────────────────────────────────────
   A disabled button must not light up or lift, whichever way it was disabled:
   the native attribute, the `.is-disabled` class base/buttons.css already
   honours, or the `.disabled` class the .kbtn pagers use. Written as one
   compound selector list so it outranks the plain `:hover` rules above by
   specificity as well as by order. */

.btn:disabled:hover,          .btn[disabled]:hover,          .btn.is-disabled:hover,          .btn.disabled:hover,
.kbtn:disabled:hover,         .kbtn[disabled]:hover,         .kbtn.is-disabled:hover,         .kbtn.disabled:hover,
.modal-btn:disabled:hover,    .modal-btn[disabled]:hover,
.btn-create:disabled:hover,   .btn-confirm-danger:disabled:hover,   .btn-confirm-danger:not(.enabled):hover,
.cm-btn:disabled:hover,       .cm-toggle-btn.disabled:hover,
.cmi-btn:disabled:hover,      .chat-modal-btn:disabled:hover,
.send-btn:disabled:hover,     .problem-report-btn:disabled:hover,
.btn-join.full:hover,         .character-join-btn:disabled:hover,
.post-action-btn:disabled:hover,  .media-action-btn:disabled:hover,
.mark-read-btn:disabled:hover,    .btn-delete:disabled:hover,
.btn-add:disabled:hover,          .btn-add-item:disabled:hover,     .btn-remove:disabled:hover,
.btn-add-ticket:disabled:hover,   .btn-remove-ticket:disabled:hover,
#addMaterialRow.is-limit-reached:hover,
.btn-accept:disabled:hover,   .btn-decline:disabled:hover,
.follow-btn:disabled:hover,   .btn-youtube:disabled:hover,
.btn-login:disabled:hover,    .btn-social:disabled:hover,
.btn-signup:disabled:hover,   .btn-resend:disabled:hover {
    transform: none;
}

.btn:disabled:hover::after,          .btn[disabled]:hover::after,          .btn.is-disabled:hover::after,          .btn.disabled:hover::after,
.kbtn:disabled:hover::after,         .kbtn[disabled]:hover::after,         .kbtn.is-disabled:hover::after,         .kbtn.disabled:hover::after,
.modal-btn:disabled:hover::after,    .modal-btn[disabled]:hover::after,
.btn-create:disabled:hover::after,   .btn-confirm-danger:disabled:hover::after,   .btn-confirm-danger:not(.enabled):hover::after,
.cm-btn:disabled:hover::after,       .cm-toggle-btn.disabled:hover::after,
.cmi-btn:disabled:hover::after,      .chat-modal-btn:disabled:hover::after,
.send-btn:disabled:hover::after,     .problem-report-btn:disabled:hover::after,
.btn-join.full:hover::after,         .character-join-btn:disabled:hover::after,
.post-action-btn:disabled:hover::after,  .media-action-btn:disabled:hover::after,
.mark-read-btn:disabled:hover::after,    .btn-delete:disabled:hover::after,
.btn-add:disabled:hover::after,          .btn-add-item:disabled:hover::after,     .btn-remove:disabled:hover::after,
.btn-add-ticket:disabled:hover::after,   .btn-remove-ticket:disabled:hover::after,
#addMaterialRow.is-limit-reached:hover::after,
.btn-accept:disabled:hover::after,   .btn-decline:disabled:hover::after,
.follow-btn:disabled:hover::after,   .btn-youtube:disabled:hover::after,
.btn-login:disabled:hover::after,    .btn-social:disabled:hover::after,
.btn-signup:disabled:hover::after,   .btn-resend:disabled:hover::after {
    opacity: 0;
}

/* ── Reduced motion ───────────────────────────────────────────────────
   The lift is decoration; the highlight is the affordance. Drop the movement
   and keep the highlight, so the button still answers the pointer. */
@media (prefers-reduced-motion: reduce) {
    .btn:hover, .kbtn:hover, .modal-btn:hover, .btn-create:hover,
    .btn-confirm-danger:hover, .cm-btn:hover, .cm-toggle-btn:hover,
    .cmi-btn:hover, .chat-modal-btn:hover, .send-btn:hover,
    .problem-report-btn:hover, .btn-join:hover, .character-join-btn:hover,
    .post-action-btn:hover, .media-action-btn:hover, .mark-read-btn:hover,
    .btn-delete:hover, .btn-add:hover, .btn-add-item:hover, .btn-remove:hover,
    .btn-add-ticket:hover, .btn-remove-ticket:hover, #addMaterialRow:hover,
    .btn-accept:hover, .btn-decline:hover, .btn-profile:hover,
    .follow-btn:hover, .lineup-more-btn:hover, .btn-youtube:hover,
    .editor-btn:hover, .btn-login:hover, .btn-social:hover,
    .btn-signup:hover, .btn-resend:hover {
        transform: none;
    }
}