/**
 * @file
 * HCP Full Modal component styles.
 *
 * Extends existing external-link-popup styles for consistent appearance.
 */

/* Modal overlay */
.hcp-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* CHR-9 (DONI-663) QA 2026-08-07 (round 3): Figma's gate scrim composites
   * to a neutral ~rgb(152,152,152) over white — the steel #515861 at 60%
   * tint left a blue-grey cast and let coral page colour punch through
   * harder than the Interstitials frame shows. Fixed here to a flat
   * rgba(0,0,0,0.40), which matches that sampled composite over WHITE.
   *
   * ✏️ CORRECTED 2026-08-08 (round 4, DONI-663). The flat black-40% value
   * above only matched because it was sampled from a FLAT WHITE region of
   * the PNG export — a sample point that cannot reveal a backdrop blur,
   * since blurring a flat colour still looks like that flat colour. QA's
   * "background appears blurred" report sent this back to the scrim's
   * actual Figma layer, read via get_design_context (not a screenshot
   * crop) on BOTH frames — 29999:57087 (desktop) and 29999:57100 (mobile).
   * Both resolve to the same wrapper node
   * (`7.3 D - Request a Rep - Thank You Pop-up` / `Pop-up`) with:
   *
   *   background:       rgba(109, 109, 109, 0.70)
   *   backdrop-filter:  blur(7px)
   *
   * rgba(109,109,109,0.70) composites to ~rgb(152,152,152) over WHITE too
   * — 109×0.7 + 255×0.3 = 152.8 — which is why round 3's flat-black
   * approximation looked correct there and only diverged over the coral
   * bands the gate also sits above (black-40% desaturates coral toward
   * brown; the true grey-70% desaturates it toward a lighter neutral).
   * A build with zero backdrop-filter was confirmed by getComputedStyle
   * (`backdrop-filter: none`) and by an alpha-unblend test: dividing a
   * with-overlay screenshot by 0.6 (the old formula's transmittance) and
   * comparing Laplacian edge variance against a no-overlay baseline of the
   * same region recovered the baseline within ~0.2%, i.e. the only
   * softening in the old build was contrast loss from a flat tint, not an
   * actual filter. Leave-site interstitial keeps its own steel rule in
   * external-link-popup.css; only the gate overlay changes here. */
  background: rgba(109, 109, 109, 0.70);
  backdrop-filter: blur(7px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal dialog - inherits from external-link-popup styles */
.hcp-modal-dialog.external-link-popup.external-link-popup-id-modal-home_splash.ui-dialog {
  max-height: 90vh;
  overflow-y: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* =====================================================================
 * CHR-9 (DONI-663) — the gate's measured geometry.
 *
 * WHY THIS BLOCK EXISTS AND IS SO LONG A SELECTOR. The gate borrows its
 * look from css/base/external-link-popup.css by wearing that module's
 * classes (see the comment block at the top of js/hcp-modal.js). Those
 * rules were written for the leaving-site interstitial and its 893px
 * card; the gate is a different frame with different numbers, and there
 * IS a real `external_link_popup` entity with the id `modal_home_splash`
 * (project/config/hcp_nxt/external_link_popup.external_link_popup
 * .modal_home_splash.yml), so editing those shared rules in place would
 * have moved a second dialog nobody measured. Everything specific to the
 * gate is therefore overridden here, anchored on `.hcp-modal-dialog`,
 * which only the gate has.
 *
 * The selectors mirror the base file's chain because they have to: the
 * shared rules reach (0,9,0) via `.button:nth-child(1)`, and this file
 * loads in the `component` group while that one is in `base`, so
 * matching that specificity is enough to win (`C-013` — order is
 * hcp_nxt.libraries.yml order, and group beats declaration order).
 *
 * MEASURED, from file TJC7pZhPM2o5S0wuc1tnVI, label `Interstitials`
 * 29999:57058:
 *   29999:57087  desktop 1440x634 — card 1252x234 at x=94 y=200,
 *                padding 40, radius 24, gap 24, no max-width;
 *                buttons 252 and 281 wide, h48, pill, BOTH FILLED
 *                Dark Coral, Agenda Bold 19
 *   29999:57100  mobile  375x812  — card 343x341 at x=16, padding 24,
 *                gap 24, radius 24; buttons 295x48, gap 24, stacked
 * Do not re-derive these; do not open Figma to check them.
 *
 * ONE WIDTH FORMULA, NOT TWO. `min(1252px, 100% - 32px)` is 1252 at 1440
 * (x = 94) and 343 at 375 (x = 16) — both sign-off widths exactly
 * (`C-023`) — and it is monotonic in between with no jump at the 991px
 * breakpoint the base file uses. The alternative, a fixed 188px gutter
 * above 992px, is precisely the shape `C-023` names as the most likely
 * way to break a width nobody looks at.
 *
 * HEIGHT IS NOT SET. Figma's 234 / 341 were measured against Figma's
 * wording; this gate keeps the shipped attestation (`C-056`), which is
 * longer and wraps to more lines. Pinning the height would clip
 * regulated copy, so the card is left to size to its content and the
 * height differs from the frame by exactly that much.
 * ===================================================================== */
.hcp-modal-dialog.external-link-popup.external-link-popup-id-modal-home_splash.ui-dialog {
  width: min(1252px, 100% - 32px);
  /* The frame has no max-width; the cap above lives in `width` instead so
   * this genuinely reads as "no max-width" and the base file's 893px is
   * off. */
  max-width: none;
  /* 🔎 Drupal CORE's dialog.css sets `min-width: 92%` AND `max-width: 92%`
   * on `.ui-dialog:not(.ui-dialog-off-canvas)` below 48em. That, not the
   * `width: 90% !important` in css/base/external-link-popup.css, is what
   * actually decided the mobile width — the card measured 345 at 375
   * (= 92% of 375) both before this ticket and after `width` was first
   * corrected here, because a min-width clamp beats a used width and
   * neither the old rule nor the new one was ever the winner. Releasing
   * only the `!important` looked correct and changed nothing. */
  min-width: 0;
  padding: 40px;
  gap: 24px;
  border-radius: 24px;

  /* Two boxes jQuery UI puts inside every `.ui-dialog`, which this markup
   * is not but wears the classes of. Neither is in the frame, and between
   * them they added 64px of vertical space the card's own `gap: 24px` is
   * supposed to be the whole of, and — via that 24px margin-RIGHT on a
   * `width: 100%` buttonset — pushed the centred button row 24px left of
   * the card's centre. Measured before this rule at 1440: content padding
   * `16px 0`, buttonset margin `16px 24px 16px 0`, card 337 tall with the
   * buttons centred on 696 against a card centre of 720. */
  .hcp-modal-content.external-link-popup-content.ui-dialog-content.ui-widget-content {
    padding: 0;

    /* CHR-9 (DONI-663) QA 2026-08-07 — heading did not match Figma.
     *
     * The shared external-link-popup rule paints h3 as Tilt Neon 32 / STEEL
     * / weight 400 (leave-site interstitial). The gate's headline is the
     * Desktop/H3 token instead: Agenda Bold 28, weight 700, CHARCOAL
     * #1d2d3a (design-tokens.json 29999:57084; ink sampled off the 2×
     * export of 29999:57087 as ~rgb(31,47,60), glyph height ~26.5 design
     * px). Measured frame height for the headline box is 34 — Agenda 28
     * at the project's 1.2 display line-height is 33.6, which fits;
     * Tilt Neon 32 rendered at 51px here and was the miss.
     *
     * Scoped under `.hcp-modal-dialog` so leave-site keeps Tilt Neon. */
    .external-link-popup-body h3 {
      color: var(--color-charcoal);
      font-family: var(--font-agenda);
      font-size: var(--fs-28, 28px);
      font-weight: 700;
      line-height: var(--line-height-display, 1.2);
    }

    @media (max-width: 991px) {
      .external-link-popup-body h3 {
        /* Mobile headline box is 29 tall (29999:57100). Agenda Bold 26 is
         * 303px wide for this title and wraps inside the 295px content
         * column (343 card − 2×24 pad); 24px is 279 wide (one line) and
         * 24 × 1.2 = 28.8 ≈ the measured 29. */
        font-size: 24px;
      }
    }
  }

  .ui-dialog-buttonpane.ui-widget-content.ui-helper-clearfix .ui-dialog-buttonset {
    margin: 0;
    /* Figma gives 24 for the stacked mobile buttons and 24 for the card's
     * own gap. The desktop row gap is the one number on this ticket that
     * was not measured separately; 24 is used for consistency with both. */
    gap: 24px;

    .button {
      /* BOTH buttons are filled Dark Coral in the frame — the shared
       * external-link-popup rule paints one outline; see comment above.
       *
       * Desktop (29999:57087): label sits in a flex-1 column (180px on
       * the 252px "Yes, proceed" pill), text centred in that column,
       * then 8px, then a 24px chevron — not a tight centred pair. */
      display: grid;
      grid-template-columns: minmax(0, 1fr) 24px;
      column-gap: 8px;
      align-items: center;
      box-sizing: border-box;
      height: 48px;
      padding: 12px 16px 10px 24px;
      background: var(--color-coral);
      color: var(--color-white);
      border: 0;
      font-family: var(--font-agenda);
      font-size: 19px;
      font-weight: 700;
      line-height: normal;
      text-align: center;
      flex: none;
    }

    .button.hcp-modal-patient-site-btn {
      text-decoration: none;
    }

    /* The trailing glyph follows the fill. White chevron on Dark Coral;
     * class-targeted so button order cannot re-skin them. */
    .button.hcp-modal-continue-btn::after,
    .button.hcp-modal-patient-site-btn::after {
      grid-column: 2;
      background-image: url("../../images/icons/chevron-right.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    .button.hcp-modal-continue-btn {
      width: 252px;
    }

    .button.hcp-modal-patient-site-btn {
      width: 281px;
    }
  }

  @media (max-width: 991px) {
    padding: 24px;
    gap: 24px;

    .ui-dialog-buttonpane.ui-widget-content.ui-helper-clearfix .ui-dialog-buttonset {
      flex-direction: column;
      align-items: stretch;
      gap: 24px;

      .button.hcp-modal-continue-btn,
      .button.hcp-modal-patient-site-btn {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 24px;
        column-gap: 8px;
        width: 100%;
        max-width: 100%;
      }
    }
  }
}

/* Ensure modal is hidden by default */
.hcp-modal-overlay[style*="display:none"],
.hcp-modal-overlay[style*="display: none"] {
  display: none !important;
}

/* Show modal when active */
.hcp-modal-overlay.hcp-modal-show {
  display: flex !important;
}

/* Focus management */
.hcp-modal-dialog:focus {
  outline: 2px solid var(--color-primary, var(--color-nav-active));
  outline-offset: 2px;
}

/* Enhanced button styling for accessibility */
.hcp-modal-buttonpane .button:focus {
  outline: 2px solid var(--color-primary, var(--color-nav-active));
  outline-offset: 2px;
}

.hcp-modal-buttonpane .button:focus-visible {
  outline: 2px solid var(--color-primary, var(--color-nav-active));
  outline-offset: 2px;
}

/* Ensure proper stacking context */
.hcp-modal-overlay {
  isolation: isolate;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .hcp-modal-overlay {
    background: rgba(0, 0, 0, 0.85);
  }

  .hcp-modal-dialog {
    border: 3px solid;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .hcp-modal-overlay {
    transition: none;
  }

  .hcp-modal-dialog {
    transition: none;
    animation: none;
  }
}

/* Animation for modal entrance */
@media (prefers-reduced-motion: no-preference) {
  .hcp-modal-overlay {
    transition: opacity 0.2s ease-in-out;
  }

  .hcp-modal-overlay.hcp-modal-show {
    animation: hcpModalFadeIn 0.2s ease-in-out;
  }

  .hcp-modal-dialog {
    animation: hcpModalSlideIn 0.3s ease-out;
  }
}

@keyframes hcpModalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* CHR-9 (DONI-663). These keyframes carry the CENTRING as well as the
 * slide, and they have to.
 *
 * The dialog is centred by `transform: translate(-50%, -50%)` against
 * `top: 50%; left: 50%` (see the rule at :23). An animation that also
 * declares `transform` does not compose with that — it REPLACES it for
 * the whole 0.3s it runs. So while this animation played, the dialog was
 * positioned with no centring offset at all and its top-left corner sat
 * at the viewport centre.
 *
 * Measured at 375: during the entrance the dialog rendered at x=187.5,
 * 345px wide — 158px past the right edge of a 375px viewport, with the
 * Continue and Go-to-patient-site buttons off-screen. It then snapped to
 * the correct x=15 when the animation ended and the rule's transform
 * took over again. A 300ms flash on desktop; on mobile, 300ms in which
 * the only two controls of a compliance gate are unreachable.
 *
 * Writing the -50%/-50% into both keyframes keeps the slide and keeps
 * the centring for every frame of it.
 *
 * 🔎 Nearly missed: this browser reports `document.visibilityState ===
 * "hidden"` and THROTTLES animations, so the computed transform sat
 * frozen at the `from` keyframe. That first looked like a stuck
 * measurement rather than a defect. It is a real defect — the frozen
 * value is exactly the frame a real user sees first. Confirming it meant
 * re-measuring with `animation: none` to separate the resting position
 * (correct) from the animated one (not). */
@keyframes hcpModalSlideIn {
  from {
    transform: translate(-50%, calc(-50% - 20px));
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}