/* Sysman dialogs: "Contact us" and "Upload your audio file" (markup built by js/modals.js).
   Figma: "Modal for contact form" / "Modal for audio form", 1200x814, and their error states, 1200x862.
   Two 600px panels (photo | white form) with a 24px outer radius. The error state adds red asterisks to the
   required labels and a red "*required" note under Submit, which makes the dialog 48px taller.

   Not in the design, added here: the backdrop, the close button, focus/filled/drag-over/file-chosen states,
   the "not connected"/server/progress messages and the sent view, the hidden honeypot field, the optional
   Turnstile box (visible only when Cloudflare asks for a click), and the layouts for smaller screens:
     761-1231   the photo panel gives up width first; 761-960 also narrows the form panel
     <=760, or <=500 tall   full-screen form, no photo panel */

/* Page scroll is locked while a dialog is open; js/modals.js pads <body> (and pulls in the homepage's
   navbar) by the scrollbar's width, if any */
html.has-modal {
  overflow: hidden;
}

.modal {
  width: 1200px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--white);
  color: var(--black);
}

.modal[open] {
  display: flex;
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  .modal[open] {
    animation: modal-in 0.2s ease-out;
  }

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

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes modal-fade {
  from {
    opacity: 0;
  }
}

/* ---------- Close button (not in the design) ---------- */

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--grey);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.modal__close:hover {
  background: var(--light-grey);
  color: var(--black);
}

.modal__close svg {
  width: 24px;
  height: 24px;
}

/* ---------- Left panel ---------- */

.modal__media {
  position: relative;
  flex: 1 1 600px;
  min-width: 0;
  overflow: hidden;
}

/* Contact: the globe photo (unrotated, no overlay), the logo and the address */
.modal__media--contact {
  background: #0f3663;
}

.modal__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Figma scales the logo group with the panel (its centre stays at 49.263% of the height) and stretches it
   vertically; this keeps that centre but draws the logo at its true aspect ratio (255 x 42.48). */
.modal__logo {
  position: absolute;
  top: 49.263%;
  left: 50%;
  width: 255px;
  max-width: calc(100% - 32px);
  height: auto;
  transform: translate(-50%, -50%);
}

/* Top-anchored at 729 in both states; it moves up only when the panel is shorter than the design */
.modal__address {
  position: absolute;
  top: min(729px, calc(100% - 85px));
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--white);
  font-style: normal;
  text-align: center;
}

.modal__address span {
  white-space: pre;
}

/* Audio: the CTA's circles photo under a straight red overlay, and the red ring with the audio-file glyph */
.modal__media--audio {
  background:
    linear-gradient(180deg, rgba(231, 45, 56, 0) 0%, #e72d38 100%),
    url("../assets/img/cta-bg.webp") center / cover no-repeat,
    #e1e5ea;
  background-blend-mode: overlay, normal;
}

.modal__ring {
  position: absolute;
  top: min(287px, calc(50% - 120px));
  left: 50%;
  width: 240px;
  height: 240px;
  transform: translateX(-50%);
}

/* ---------- Right panel: the form ---------- */

.modal__panel {
  flex: 0 0 600px;
  min-width: 0;
  padding: 40px 80px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
}

.modal__body,
.modal__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.modal__form {
  width: 100%;
}

/* 8/500 */
.modal__title {
  font-size: 36px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: -0.022em;
  text-align: center;
  text-wrap: balance;
}

.modal__intro {
  width: 100%;
  color: var(--grey);
  text-align: center;
}

/* Fields: a 2px #f1f1f1 inside stroke, so the text sits 24px in from the left and 16px from the top.
   The label is drawn where a placeholder would be (so the error state's red asterisk can be real text).
   Once the field has a value it stays visible as a small caption at the top of the field (not in the design;
   the empty states are the designed ones and don't change). */
.modal .field {
  position: relative;
  width: 100%;
}

.modal .field__input {
  display: block;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 14px 22px;
  border: 2px solid var(--light-grey);
  border-radius: var(--radius-button);
  background: var(--white);
  color: var(--black);
  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.014em;
  appearance: none;
  transition: border-color 0.15s ease;
  scroll-margin-block: 8px; /* when focus scrolls a field into view, its focus ring isn't cut off */
}

.modal .field__input--area {
  height: 240px;
  resize: none;
}

.modal .field__input:focus {
  border-color: var(--blue);
  outline: none;
}

/* A filled field that fails validation (e.g. a malformed email); empty ones keep the design's plain look */
.modal .field__input[aria-invalid="true"]:not(:placeholder-shown) {
  border-color: var(--red);
}

/* ...and when it has focus it keeps the red border, so it needs a focus ring of its own */
.modal .field__input[aria-invalid="true"]:not(:placeholder-shown):focus {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.modal .field__label,
.modal .field__file-text {
  color: var(--grey);
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.014em;
  white-space: nowrap;
}

.modal .field__label {
  position: absolute;
  top: 16px;
  right: 24px;
  left: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Filled (typed, pasted or autofilled): the label becomes a 12/16 caption 8px from the top, in line with the
   text, and the value moves down under it (caption 8-24, value 24-48 in the 56px field). It keeps the error
   state's red asterisk. The :-webkit-autofill copies also cover a suggestion the browser is only previewing
   (no value yet); they are separate rules so a browser that doesn't know that selector still reads the first. */
.modal .field__input:not(:placeholder-shown) {
  padding-top: 22px;
  padding-bottom: 6px;
}

.modal .field__input:-webkit-autofill {
  padding-top: 22px;
  padding-bottom: 6px;
}

.modal .field__input:not(:placeholder-shown) + .field__label {
  top: 2px;
  padding-top: 6px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
}

.modal .field__input:-webkit-autofill + .field__label {
  top: 2px;
  padding-top: 6px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
}

/* The message scrolls, so its caption sits on a white band (from the top border down to 24, then fading out by
   30) that hides the lines scrolled up under it. Its first line starts at 28 (text at about 32), below the
   fade. The scroll-padding keeps the caret's line below the band when the keyboard scrolls the box. */
.modal .field__input--area:not(:placeholder-shown) {
  padding-top: 26px;
  padding-bottom: 14px;
  scroll-padding-top: 26px;
}

.modal .field__input--area:not(:placeholder-shown) + .field__label {
  padding-bottom: 6px;
  background: linear-gradient(var(--white) 22px, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .modal .field__label {
    transition: top 0.15s ease, padding-top 0.15s ease, font-size 0.15s ease, line-height 0.15s ease;
  }
}

/* Red asterisks: error state only */
.modal .field__req {
  display: none;
  color: var(--red);
}

.modal__form.is-invalid .field__req {
  display: inline;
}

/* Under the upload box (not in the design; the user asked on 2026-09-25 that no patient information be uploaded
   for the trial). 12px under the box instead of the form's 24px gap, so it reads as part of the upload field. */
.modal__notice {
  width: 100%;
  margin-top: -12px;
  color: var(--grey);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.013em;
  text-align: center;
  text-wrap: balance;
}

.modal__notice strong {
  color: var(--black);
  font-weight: 500;
}

/* The file box: the whole 440x240 box is the <label> of a visually hidden file input */
.modal .field--file {
  height: 240px;
  border: 2px solid var(--light-grey);
  border-radius: var(--radius-button);
  background: var(--white);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.modal .field--file:has(.field__file:focus) {
  border-color: var(--blue);
}

.modal .field--file.is-dragover {
  border-color: var(--grey);
  background: #f8fafc;
}

.modal .field__file-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
  padding: 14px 22px;
  cursor: pointer;
}

.modal .field__drop {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 0;
  padding-inline: 24px;
}

.modal .field__cloud {
  width: 87px;
  height: 63px;
}

.modal .field--file.has-file .field__cloud {
  visibility: hidden;
}

/* Chosen file: name, size and a Remove button, over the drop area. Clicks on the text fall through to the
   label underneath, so the rest of the box still opens the picker to replace the file. */
.modal .field__chosen {
  position: absolute;
  top: 50px;
  right: 24px;
  bottom: 8px;
  left: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
}

.modal .field__chosen-name {
  max-width: 100%;
  overflow: hidden;
  color: var(--black);
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.014em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal .field__chosen-size {
  color: var(--grey);
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.013em;
}

.modal .field__remove {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--red);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.013em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  pointer-events: auto;
}

.modal .field__remove:hover {
  color: #d21f2a;
}

/* Submit: .button--primary at a fixed 200px */
.modal__submit {
  width: 200px;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.modal__submit[aria-disabled="true"] {
  opacity: 0.7;
  cursor: progress;
}

/* "*required" (13/24/400, red) and the other short validation lines.
   This and the message below are scrolled into view when they appear; the margin keeps them clear of the
   panel's edge. */
.modal__note {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--red);
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.014em;
  text-align: center;
  scroll-margin-block: 32px;
}

/* "This form isn't connected yet…" / "Something went wrong…", the server's own messages and the upload's
   progress (not in the design). Tabular figures keep "Uploading your file: 42%" from jittering. */
.modal__message {
  width: 100%;
  color: var(--grey);
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.013em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  scroll-margin-block: 32px;
}

/* The honeypot field (see js/modals.js): out of the layout and out of sight, but not display:none, which some
   bots skip */
.modal__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Cloudflare Turnstile, only when js/modals.js has a site key (not in the design). While it works invisibly it
   takes no room (like the honeypot); when Cloudflare needs a click it sits above Submit at the form's width. */
.modal__turnstile {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.modal__turnstile.is-interactive {
  position: static;
  width: 100%;
  height: auto;
  overflow: visible;
  clip-path: none;
}

.modal__message a {
  color: var(--black);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* After a successful send (only once an endpoint is set) */
.modal__sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  text-align: center;
}

.modal__sent:focus {
  outline: none;
}

.modal__sent-text {
  color: var(--grey);
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.014em;
}

.modal [hidden] {
  display: none;
}

/* ---------- Smaller screens (no designs; our own judgement) ---------- */

/* Tablet: a narrower form panel, so the photo panel keeps a useful width */
@media (max-width: 960px) {
  .modal__panel {
    flex-basis: 440px;
    padding: 40px;
  }

  .modal__title {
    font-size: 32px;
    line-height: 38px;
  }
}

/* Most laptop windows are shorter than the 814px design: a shorter message/file box and less padding, so
   the whole form usually fits without scrolling (the panel scrolls when it doesn't) */
@media (max-height: 860px) {
  .modal__panel {
    padding-block: 32px;
  }

  .modal .field__input--area,
  .modal .field--file {
    height: 176px;
  }
}

/* Phones, and landscape screens too short for the two panels: a full-screen form */
@media (max-width: 760px), (max-height: 500px) {
  .modal {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }

  .modal__media {
    display: none;
  }

  /* The top 64px is a white band that stays put while the form scrolls under it, so nothing slides under
     the close button. It lives inside the panel so it doesn't cover a scrollbar and can still be swiped;
     scroll-padding keeps a focused field from landing underneath it. */
  .modal__panel {
    flex: 1 1 auto;
    padding: 0 var(--gutter) 40px;
    scroll-padding-top: 64px;
  }

  .modal__panel::before {
    content: "";
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    height: 64px;
    margin-inline: calc(-1 * var(--gutter));
    background: var(--white);
  }

  .modal__body {
    max-width: 440px;
    margin-inline: auto;
  }

  .modal__close {
    top: 10px;
    right: calc(var(--gutter) - 10px);
    z-index: 2; /* above the band */
  }

  .modal__title {
    font-size: 32px;
    line-height: 38px;
  }
}

@media (max-width: 640px) {
  .modal .field__input--area,
  .modal .field--file {
    height: 176px;
  }
}