/* =============================================================================
 * cover-final-hardfix.css
 * --------------------------------------------------------------------------
 * The DEFINITIVE fix for the page cover hover/click bug. Loaded LAST in
 * index.html so it overrides every other layer (polish-final.css,
 * glass-spotlight.css, immersive-3d.css, premium-cover-whiteboard-final.css).
 *
 * Strategy:
 *   1. Force the cover, the image and any pseudo-elements to be FLAT.
 *      No transform, no scale, no parallax, no animation.
 *   2. Move the pointer-following light into a real child element
 *      .page-cover-light injected by js/cover-final-hardfix.js. This
 *      avoids the pseudo-element layering issues that caused the action
 *      buttons to become untappable in some browsers / zoom levels.
 *   3. .page-cover-actions sit at z-index: 30 and z-index: 31 for the
 *      buttons themselves with pointer-events: auto everywhere.
 *   4. A small invisible "bridge" makes the hover area continuous so the
 *      cursor never crosses a dead gap between cover and buttons.
 * ============================================================================= */

/* Base flat layout for the cover, regardless of theme/visual mode. */
.page-cover,
.page-cover:hover,
.page-cover.has-cover,
.page-cover.has-cover:hover {
  position: relative !important;
  transform: none !important;
  animation: none !important;
  overflow: hidden;
}
.page-cover img,
.page-cover:hover img,
.page-cover.has-cover:hover img {
  transform: none !important;
}

/* Kill any rogue pseudo-element so it cannot intercept clicks. The
 * pointer-following light is now a real child, not a pseudo. */
.page-cover::before,
.page-cover::after,
.page-cover.has-cover::before,
.page-cover.has-cover::after {
  pointer-events: none !important;
}

/* The real-child light. Stamped by js/cover-final-hardfix.js. Stays
 * BELOW the action buttons (.page-cover-actions sits at z=30). */
.page-cover-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 220ms ease;
  background: radial-gradient(
    420px 260px at var(--gs-mx, 50%) var(--gs-my, 50%),
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0.08) 38%,
    transparent 72%
  );
}
.page-cover:hover .page-cover-light,
.page-cover:focus-within .page-cover-light {
  opacity: 1;
}
[data-theme="light"] .page-cover-light {
  background: radial-gradient(
    420px 260px at var(--gs-mx, 50%) var(--gs-my, 50%),
    rgba(15, 18, 28, 0.10),
    rgba(15, 18, 28, 0.04) 38%,
    transparent 72%
  );
}

/* No light during reposition — the user is dragging, the surface should
 * feel stable and the only feedback should be from the image itself. */
.page-cover.cover-repositioning .page-cover-light {
  opacity: 0 !important;
}

/* Action buttons: always reachable. */
.page-cover-actions {
  position: absolute !important;
  right: max(14px, env(safe-area-inset-right, 0px)) !important;
  bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important;
  z-index: 30 !important;
  display: flex !important;
  gap: 8px !important;
  visibility: visible !important;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: auto !important;
  transition: opacity 160ms ease, transform 160ms ease;
}
.page-cover:hover .page-cover-actions,
.page-cover:focus-within .page-cover-actions,
.page-cover .page-cover-actions:hover,
.page-cover.cover-actions-visible .page-cover-actions,
.page-cover.cover-repositioning .page-cover-actions {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.cover-action-btn,
#cover-change,
#cover-reposition {
  position: relative !important;
  z-index: 31 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Invisible bridge so the cursor never falls into a dead corner gap
 * between the cover and the action group. The bridge MUST NOT block
 * clicks on the cover itself, so it sits behind the buttons (z=29) and
 * is purely a hover-keeper. */
.page-cover-actions::before {
  content: "";
  position: absolute;
  inset: -16px;
  z-index: -1;
  pointer-events: auto;
}

/* On touch devices buttons must be visible without hover. */
@media (hover: none) and (pointer: coarse) {
  .page-cover-actions {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* Reduced motion: kill all the animated affordances. */
@media (prefers-reduced-motion: reduce) {
  .page-cover-light,
  .page-cover-actions { transition: none !important; }
}