/**
 * @file
 * Modal SDC — reusable Canvas dialog.
 *
 * Figma desktop: 29999:57219 — 40px panel padding, 24px radius, coral title.
 * Figma mobile: 29999:57220 — 24px panel padding, full-width within viewport.
 *
 * Unscoped: <dialog> renders outside .layout-container.
 */

.hcp-modal {
  width: min(100%, var(--hcp-modal-width, 60rem));
  max-width: calc(100vw - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-charcoal);
  max-height: 95vh;
  overflow: hidden;
}

.hcp-modal:not([open]) {
  display: none;
}

.hcp-modal::backdrop {
  background: var(--color-overlay-dark);
  backdrop-filter: blur(7px);
}

.hcp-modal__panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-height: 95vh;
  padding: 40px;
  border-radius: var(--radius-2xl);
  background: var(--color-white);
  box-shadow: var(--shadow-header);
  overflow: hidden;
}

.hcp-modal__scroll {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#aect-results.hcp-modal .hcp-modal__scroll {
  overflow-y: visible;
  overscroll-behavior: auto;
}

/* Attack-free modal — Figma 29999:57090 > 29094:77688: 16 top / 40 sides / 40 bottom. */
#view-attack-free-status.hcp-modal .hcp-modal__panel {
  padding: 16px 40px 40px;
}

#view-attack-free-status.hcp-modal .hcp-modal__scroll {
  overflow-y: visible;
  overscroll-behavior: auto;
}

.hcp-modal__close {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  align-self: start;
  justify-self: end;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-dark-coral);
  cursor: pointer;
}

.hcp-modal__close:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-outer);
  outline-offset: var(--focus-ring-width);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-inner);
}

.hcp-modal__close svg {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
}

.hcp-modal__header {
  margin: 0;
}

.hcp-modal__title {
  margin: 0;
  padding: 0;
  color: var(--color-dark-coral);
  font-family: var(--font-agenda);
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  line-height: normal;
  font-feature-settings: "liga" 0;
}

.hcp-modal__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  min-width: 0;
}

.hcp-modal__content > * {
  min-width: 0;
  margin: 0;
}

.hcp-modal__content img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) {

  .hcp-modal__panel,
  #view-attack-free-status.hcp-modal .hcp-modal__panel {
    padding: 24px;
  }

  .hcp-modal__title {
    font-size: 24px;
  }

}

@media (prefers-reduced-motion: no-preference) {

  .hcp-modal[open] {
    animation: hcpModalFadeIn 0.2s ease-out;
  }

  .hcp-modal[open]::backdrop {
    animation: hcpModalBackdropIn 0.2s ease-out;
  }

}

@keyframes hcpModalFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hcpModalBackdropIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hcp-modal[open],
  .hcp-modal[open]::backdrop {
    animation: none;
  }

}

/* -------------------------------------------------------------------------
 * Attack-free status modal — Figma 29999:57090 > 29094:77688 (884px desktop).
 * Structure: modal title · columns (2× text-wysiwyg) · footnote text-wysiwyg.
 * ------------------------------------------------------------------------- */

#view-attack-free-status.hcp-modal .hcp-modal__content > .text-wysiwyg:first-child {
  display: none;
}

#view-attack-free-status .columns .columns__wrapper {
  gap: 0;
  align-items: center;
}

#view-attack-free-status .columns__col {
  position: relative;
  min-width: 0;
}

#view-attack-free-status .columns__col .text-wysiwyg p {
  margin: 0;
  line-height: normal;
  text-align: center;
}

#view-attack-free-status .columns__col .text-wysiwyg p:nth-child(1),
#view-attack-free-status .columns__col .text-wysiwyg p:nth-child(3) {
  color: var(--color-charcoal);
  font-family: var(--font-agenda);
  font-size: 20px;
}

#view-attack-free-status .columns__col .text-wysiwyg p:nth-child(1) {
  font-weight: var(--font-weight-bold);
}

#view-attack-free-status .columns__col .text-wysiwyg p:nth-child(2) {
  font-family: var(--font-tilt-neon);
  font-size: 28px;
  font-weight: 400;
}

#view-attack-free-status .columns__col .text-wysiwyg p:nth-child(3) {
  font-weight: var(--font-weight-normal);
}

#view-attack-free-status .hcp-modal__content > .text-wysiwyg:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#view-attack-free-status .hcp-modal__content > .text-wysiwyg:last-child p {
  margin: 0;
  color: var(--color-charcoal);
  font-family: var(--font-agenda);
  font-size: 16px;
  font-weight: var(--font-weight-normal);
  line-height: normal;
  text-align: left;
}

@media (min-width: 768px) {

  #view-attack-free-status .columns__col:first-child::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 71px;
    background: var(--color-steel);
    transform: translateY(-50%);
  }

}

@media (max-width: 767px) {

  #view-attack-free-status .columns .columns__wrapper {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: flex-start;
  }

  #view-attack-free-status .columns__col .text-wysiwyg p:nth-child(1),
  #view-attack-free-status .columns__col .text-wysiwyg p:nth-child(2),
  #view-attack-free-status .columns__col .text-wysiwyg p:last-child {
    text-align: left;
  }

  #view-attack-free-status .columns__col:first-child::after {
    content: "";
    position: absolute;
    top: 53%;
    left: 24px;
    width: 71px;
    height: 1px;
    background: var(--color-steel);
  }

}

/* Q8W results modal. */
#see-the-results-for-q8w.hcp-modal .hcp-modal__panel {
  padding: 16px 40px 40px;
}

#see-the-results-for-q8w .columns .columns__wrapper {
  gap: 0;
  align-items: center;
}

#see-the-results-for-q8w .columns__col {
  position: relative;
  min-width: 0;
}

#see-the-results-for-q8w .columns__col .text-wysiwyg p {
  margin: 0;
  line-height: normal;
  text-align: center;
}

#see-the-results-for-q8w .columns__col .text-wysiwyg .font-size-22 {
  font-size: 22px;
  font-weight: 400;
  line-height: normal;
}

#see-the-results-for-q8w .hcp-modal__content > .text-wysiwyg:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#see-the-results-for-q8w .text-wysiwyg.footnote-alignment {
  position: relative;
  right: 8px;
}

@media (max-width: 767px) {

  #see-the-results-for-q8w.hcp-modal .hcp-modal__panel {
    padding: 24px;
  }

  #see-the-results-for-q8w .columns .columns__wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
  }

  #see-the-results-for-q8w .columns__col .text-wysiwyg {
    width: 100%;
    margin-inline: 0;
    text-align: left;
  }

  #see-the-results-for-q8w .columns__col .text-wysiwyg h3,
  #see-the-results-for-q8w .columns__col .text-wysiwyg p {
    text-align: left;
  }

}

#aect-results.hcp-modal .hcp-modal__panel {
  padding: 16px 40px 40px;
}

#aect-results.hcp-modal .hcp-modal__header {
  margin: 0;
}

#aect-results .hcp-modal__content > .columns > .columns__wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
  align-items: flex-start;
}

@media (max-width: 1023px) {

  #aect-results .hcp-modal__content > .columns > .columns__wrapper {
    justify-content: flex-start;
  }

}

#aect-results .hcp-modal__content > .columns > .columns__wrapper > .columns__col {
  flex: 0 1 auto;
  min-width: 0;
}

#aect-results .columns .columns .columns__wrapper {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

#aect-results .hcp-image.patient-reported-percentage {
  width: auto;
  max-width: none;
  margin: 0;
}

#aect-results .hcp-image.patient-reported-percentage .hcp-image__img {
  width: auto;
  height: 46px;
  max-width: none;
  object-fit: contain;
  object-position: left center;
}

@media (min-width: 768px) {

  #aect-results .hcp-image.patient-reported-percentage .hcp-image__img--mobile {
    display: none;
  }

  #aect-results .hcp-image.patient-reported-percentage .hcp-image__img--desktop {
    display: block;
  }

}

#aect-results .columns .text-wysiwyg p {
  margin: 0;
  color: var(--color-charcoal);
  font-family: var(--font-agenda);
  line-height: normal;
  text-align: left;
}

#aect-results .columns .text-wysiwyg p span:first-of-type {
  display: block;
  font-size: 16px;
  font-weight: var(--font-weight-normal);
}

#aect-results .columns .text-wysiwyg p span:last-of-type {
  display: block;
  font-size: 20px;
  font-weight: var(--font-weight-normal);
}

#aect-results .columns .text-wysiwyg p strong {
  font-weight: var(--font-weight-bold);
}

#aect-results .hcp-modal__content > .text-wysiwyg:last-child p {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  color: var(--color-charcoal);
  font-family: var(--font-agenda);
  font-size: 16px;
  font-weight: var(--font-weight-normal);
  line-height: normal;
  text-align: left;
}

@media (max-width: 767px) {

  #aect-results.hcp-modal {
    width: min(100%, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
  }

  #aect-results.hcp-modal .hcp-modal__panel {
    padding: 24px;
  }

  #aect-results.hcp-modal .hcp-modal__scroll {
    gap: 12px;
  }

  #aect-results.hcp-modal .hcp-modal__header {
    margin: 0;
    padding: 0;
  }

  #aect-results .hcp-modal__content {
    gap: 12px;
    margin-top: 0;
  }

  #aect-results .hcp-modal__content > .columns > .columns__wrapper {
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }

  #aect-results .columns .columns .columns__wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  #aect-results .hcp-image.patient-reported-percentage {
    width: 95px;
    max-width: 95px;
    margin: 0 0 -1px;
  }

  #aect-results .hcp-modal__content > .columns > .columns__wrapper > .columns__col:last-child .hcp-image.patient-reported-percentage {
    width: 129px;
    max-width: 129px;
  }

  #aect-results .hcp-image.patient-reported-percentage .hcp-image__img--desktop {
    display: none;
  }

  #aect-results .hcp-image.patient-reported-percentage .hcp-image__img--mobile {
    display: block;
    width: 100%;
    height: 76px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }

  #aect-results .hcp-modal__content > .text-wysiwyg:last-child p {
    gap: 12px;
  }

  #aect-results .hcp-modal__content > .text-wysiwyg:last-child p br {
    display: none;
  }

  #aect-results .hcp-modal__content > .text-wysiwyg:last-child p span {
    display: block;
  }

}

/* Canvas editor — keep <dialog open> inline (non-modal) so editors can preview content.
 * .hcp-modal--canvas-preview is set by modal.js inside the preview iframe.
 * .user-logged-in .canvas-app matches the Canvas shell when styles apply at page level. */
.user-logged-in .canvas-app .hcp-modal,
.hcp-modal--canvas-preview {
  display: block !important;
  position: static;
  width: 100%;
  max-width: 100%;
  max-height: none;
  margin: var(--space-lg) 0 0;
  border: 1px solid pink;
  position: relative;

  &::before {
      content: "Modal";
      position: absolute;
      inset: 0;
      outline: 2px solid pink;
      color: red;
    }
}

.user-logged-in .canvas-app .hcp-modal::backdrop,
.hcp-modal--canvas-preview::backdrop {
  display: none;
}

.user-logged-in .canvas-app .hcp-modal__panel,
.hcp-modal--canvas-preview .hcp-modal__panel {
  max-height: none;
}

.user-logged-in .canvas-app .hcp-modal__scroll,
.hcp-modal--canvas-preview .hcp-modal__scroll {
  overflow: visible;
}

.user-logged-in .canvas-app .hcp-modal__close,
.hcp-modal--canvas-preview .hcp-modal__close {
  display: none;
}