/* ============================================================
   HCDrawer — shared slide-out panel styles.
   Single source of truth for EVERY right-side detail drawer on the
   site. Extracted in v2.26.0 under the Componentization Law, which
   replaced eleven independent implementations that disagreed on
   five separate axes:

     z-index      401 (blood/diets/fasting/food/supplements)
                  vs 999 (brain/gut/heart/longevity/stress/water)
     overlay a    .5 (blood) vs .55 (the other ten)
     motion       .32s keyframe ANIMATION (food)
                  vs .34s (supplements) vs .35s transform transition
     Esc-to-close present on 5 of 11
     scroll-lock  present on 4 of 11
     panel bg     #fff (5) vs var(--hc-surface-200) (6)

   Those axes were NOT random drift — they split cleanly into two
   design generations. The older family is z-index 401 + hardcoded
   #fff (blood, diets, fasting, food, supplements); the newer is
   z-index 999 + tokenized var(--hc-surface-200) (brain, gut, heart,
   longevity, stress, water). This component standardizes on the
   NEWER family's surface token, because hardcoding #fff violates the
   design-token rule — so the five older pages will brighten-to-token
   rather than the six newer pages regressing to a literal.

   THE OCCLUSION FIX (the bug that motivated this):
   .hcnav is position:sticky; top:0; height:60px; z-index:9000 and
   shares the root stacking context with these fixed panels. At 401
   or 999 every drawer painted UNDERNEATH the navbar, and because the
   close button sits at top:1.25rem (~y 20-56px) it landed entirely
   inside the nav's 0-60px band and could not be clicked. The panel
   now sits ABOVE the nav (9100) so the close button is always
   reachable. Approved by Mike as option 1 of 3 on 2026-07-25.

   TOKENS (set per page or per instance, never hardcode):
     --dacc   accent colour for the close-button focus ring
     --dw     panel width  (default: min(680px, 100vw))

   Do not add page-specific drawer CSS anywhere else. If a page needs
   a different width, pass the `width` prop to window.HCDrawer.
   ============================================================ */

.hcdrawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 9090;
  background: rgba(6, 15, 32, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s cubic-bezier(.32, 0, .15, 1);
}

.hcdrawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.hcdrawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9100;
  width: var(--dw, min(680px, 100vw));
  background: var(--hc-surface-200, #EEF2F7);
  box-shadow: -24px 0 64px rgba(5, 12, 26, .22);
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.32, 0, .15, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

.hcdrawer.open {
  transform: translateX(0);
}

/* Hidden from the a11y tree and from tab order while closed. The panel
   stays MOUNTED so the transform transition has a frame to animate
   from — conditional mounting is what silently killed the slide-in on
   supplements.html (it rendered with .open already applied). */
.hcdrawer[aria-hidden="true"] {
  visibility: hidden;
}

.hcdrawer.open {
  visibility: visible;
}

/* ---- Close button ---------------------------------------------- */
/* Sits over the panel's coloured header on every page, so it is white
   on a translucent scrim rather than themed. */
.hcdrawer-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s cubic-bezier(.25, 1, .5, 1),
              transform .18s cubic-bezier(.25, 1, .5, 1);
}

.hcdrawer-close:hover {
  background: rgba(255, 255, 255, .3);
  transform: scale(1.06);
}

.hcdrawer-close:active {
  transform: scale(.96);
}

.hcdrawer-close:focus-visible {
  outline: 2px solid var(--dacc, #fff);
  outline-offset: 2px;
}

/* ---- Dark mode -------------------------------------------------- */
/* Toggled pages pick this up via body.dark (js/theme.js). */
body.dark .hcdrawer {
  background: var(--hc-ink-750, #0B1422);
  box-shadow: -24px 0 64px rgba(0, 0, 0, .5);
}

/* Natively-dark pages (heart.html, plaque.html) never toggle body.dark,
   so they opt in explicitly instead of inheriting. Kept here rather
   than in those pages so drawer surface colour lives in ONE file. */
.hcdrawer[data-surface="dark"] {
  background: var(--hc-ink-750, #0B1422);
  box-shadow: -24px 0 64px rgba(0, 0, 0, .5);
}

/* ---- Mobile ----------------------------------------------------- */
@media (max-width: 560px) {
  .hcdrawer {
    width: 100vw;
  }

  .hcdrawer-close {
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px; /* >=40px touch target on small screens */
  }
}

/* ---- Reduced motion --------------------------------------------- */
/* Cross-fade instead of sliding. The panel must still leave the tab
   order when closed, so visibility is driven by [aria-hidden] above
   and is deliberately not animated here. */
@media (prefers-reduced-motion: reduce) {
  .hcdrawer {
    transition: opacity .01s linear;
    transform: none;
    opacity: 0;
  }

  .hcdrawer.open {
    transform: none;
    opacity: 1;
  }

  .hcdrawer-overlay {
    transition: none;
  }

  .hcdrawer-close,
  .hcdrawer-close:hover,
  .hcdrawer-close:active {
    transition: none;
    transform: none;
  }
}