/* ──────────────────────────────────────────────────────────────────────────
   QuickAccess.css — bottom-right floating shortcut cluster.

   Extends the bottom-right utility row to the LEFT of the cookie trigger, so
   PDF / share sit alongside the cookie & accessibility buttons without
   colliding with the scroll-to-top button (which stacks above them). Round
   icon buttons that open the very same modals as the action rail
   (see Modal.js, data-modal).

   Layout reference (distance from the right viewport edge, all bottom:20px):
     ax-trigger          right: 20px  → occupies  20–68px
     cookie-trigger      right: 76px  → occupies  76–124px
     review-prompt star  right:132px  → occupies 132–180px   (ReviewPrompt.css)
     quick-access        right:188px  → occupies 188–…        (extends further left)

   The review star is suppressed on the home page / embeds, leaving a small gap
   there — acceptable, and far better than overlapping it everywhere else.

   Icons render via CSS mask so the single-colour toolbar SVGs inherit
   currentColor and recolour cleanly on hover.
   ────────────────────────────────────────────────────────────────────────── */

.wiki-quick-access {
    position: fixed;
    bottom: 20px;
    right: 188px;                 /* 20 ax + 56 cookie + 56 review-star + 8 gap */
    z-index: 9000;
    display: flex;
    flex-direction: row-reverse;  /* first item (PDF) nearest the review star */
    gap: 8px;
    pointer-events: none;         /* spacing only; buttons re-enable below */
}

.wiki-quick-access-item {
    pointer-events: auto;
    position: relative;
    width: 48px;
    height: 48px;
    padding: 0;
    background: #fff;
    color: #212529;
    border: 2px solid #ced4da;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wiki-quick-access-item:hover,
.wiki-quick-access-item:focus-visible {
    background: #f0f4ff;
    border-color: #005fcc;
    color: #005fcc;
    box-shadow: 0 4px 16px rgba(0, 95, 204, .22);
    outline: none;
}

.wiki-quick-access-item:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* Icon as a mask so it adopts the button's text colour. */
.wiki-quick-access-icon {
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: var(--qa-icon) center / contain no-repeat;
            mask: var(--qa-icon) center / contain no-repeat;
}

/* Label rises above the button on hover / focus (sideways would run off the
   right edge / over the cookie button). */
.wiki-quick-access-label {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    white-space: nowrap;
    background: #212529;
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

.wiki-quick-access-label::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #212529;
}

.wiki-quick-access-item:hover .wiki-quick-access-label,
.wiki-quick-access-item:focus-visible .wiki-quick-access-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Match the bottom-right stack's mobile offsets (see Accessibility.css). The
   review star keeps right:132px on mobile, so 188px still clears it. */
@media (max-width: 600px) {
    .wiki-quick-access {
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .wiki-quick-access-item,
    .wiki-quick-access-label { transition: none; }
}

@media print {
    .wiki-quick-access { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Shared hover tooltips for the OTHER bottom-right floating pills
   (accessibility, scroll-to-top, cookie, Google-review).

   These previously only had the browser's delayed native `title` tooltip.
   Give them the same instant label bubble as the quick-access buttons, sourced
   straight from each button's aria-label (no extra markup needed). The native
   `title` is removed in PHP so the two don't stack up.

   Right-aligned (right:0) so a long label grows leftward instead of off the
   right viewport edge — every one of these hugs the right corner.
   ────────────────────────────────────────────────────────────────────────── */
.ax-trigger::after,
.scroll-to-top::after,
.cookie-trigger::after,
.review-trigger::after {
    content: attr(aria-label);
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    white-space: nowrap;
    background: #212529;
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
    pointer-events: none;
}

/* Downward arrow, centred under the 48px button (24px in from the right). */
.ax-trigger::before,
.scroll-to-top::before,
.cookie-trigger::before,
.review-trigger::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    right: 18px;
    border: 6px solid transparent;
    border-top-color: #212529;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
    pointer-events: none;
}

.ax-trigger:hover,    .ax-trigger:focus-visible,
.scroll-to-top:hover, .scroll-to-top:focus-visible,
.cookie-trigger:hover,.cookie-trigger:focus-visible,
.review-trigger:hover,.review-trigger:focus-visible {
    z-index: 9200;   /* lift the hovered pill (and its tooltip) above neighbours */
}

.ax-trigger:hover::after,     .ax-trigger:focus-visible::after,
.scroll-to-top:hover::after,  .scroll-to-top:focus-visible::after,
.cookie-trigger:hover::after, .cookie-trigger:focus-visible::after,
.review-trigger:hover::after, .review-trigger:focus-visible::after,
.ax-trigger:hover::before,     .ax-trigger:focus-visible::before,
.scroll-to-top:hover::before,  .scroll-to-top:focus-visible::before,
.cookie-trigger:hover::before, .cookie-trigger:focus-visible::before,
.review-trigger:hover::before, .review-trigger:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .ax-trigger::after,     .ax-trigger::before,
    .scroll-to-top::after,  .scroll-to-top::before,
    .cookie-trigger::after, .cookie-trigger::before,
    .review-trigger::after, .review-trigger::before { transition: none; }
}

@media print {
    .ax-trigger::after,     .ax-trigger::before,
    .scroll-to-top::after,  .scroll-to-top::before,
    .cookie-trigger::after, .cookie-trigger::before,
    .review-trigger::after, .review-trigger::before { display: none; }
}