/* ==========================================================================
   PASSWORD MODAL
   --------------------------------------------------------------------------
   Figma "Password Modal Card", node 755:15789 (380 x 303).

   SELF-CONTAINED, like footer.css: values live on .pw-modal rather than
   reaching for design tokens, so the block can drop onto any page including
   the standalone case-study stylesheets. Scoping them to the block keeps
   them from colliding with same-named tokens.
   ========================================================================== */

.pw-modal {
  --pw-card:      #3A3A3F;
  --pw-edge:      rgba(255, 255, 255, 0.08);
  --pw-rule:      rgba(255, 255, 255, 0.25);
  --pw-label:     rgba(255, 255, 255, 0.8);
  --pw-hint:      rgba(255, 255, 255, 0.4);
  --pw-close:     #858C94;
  --pw-arrow:     #89898C;
  --pw-cta:       #A6A6A9;

  /* The dialog itself is only a positioning shell - the card carries the
     chrome - so the UA's default border/padding/background are cleared. */
  width: min(380px, calc(100vw - 2.5rem));
  max-width: none;
  padding: 0;
  border: 0;
  background: none;
  color: #FFFFFF;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  overflow: visible;
}

.pw-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

/* --- the card ------------------------------------------------------- */
.pw-modal__card {
  position: relative;
  /* 37 top / 40 sides / 40 bottom around a 300-wide column = 380 x 303.
     The frame's 1px edge is an inset ring, not a border: a real border sits
     outside an auto height and inside the 380 width, which would make the
     card 305 tall and its column 298 rather than the frame's 303 and 300. */
  padding: 37px 40px 40px;
  box-shadow: inset 0 0 0 1px var(--pw-edge);
  background-color: var(--pw-card);
}

.pw-modal__close {
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  /* The glyph is 12 in the frame; the target around it is a full 44 so it
     stays tappable, hung off the frame's corner without moving the glyph. */
  width: 44px;
  height: 44px;
  margin: -16px -16px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pw-close);
  cursor: pointer;
}
.pw-modal__close svg { width: 12px; height: 12px; display: block; }
.pw-modal__close:hover { color: #FFFFFF; }

.pw-modal__title {
  margin: 0;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;                    /* the frame's 36 on 30 */
  color: #FFFFFF;
}

/* --- password field --------------------------------------------------- */
.pw-modal__form {
  margin: 40px 0 0;                    /* the frame's gap under the title */
}

.pw-modal__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 29px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pw-rule);
}

.pw-modal__input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #FFFFFF;
  font: inherit;
  font-size: 14px;
  line-height: normal;
}
.pw-modal__input::placeholder { color: var(--pw-label); opacity: 1; }
.pw-modal__input:focus { outline: none; }
/* The rule is the field's focus affordance, since the input has no box. */
.pw-modal__field:focus-within { border-bottom-color: #FFFFFF; }

.pw-modal__submit {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pw-arrow);
  cursor: pointer;
}
.pw-modal__submit svg { width: 16px; height: 16px; display: block; }
.pw-modal__submit:hover { color: #FFFFFF; }

.pw-modal__hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.25;
  color: var(--pw-hint);
}
/* Wrong password. The frame draws no error state, so this reuses the hint
   slot rather than inventing a new element and changing the card's height. */
.pw-modal__hint[data-state="error"] { color: #FF9A8B; }

/* --- send email request ---------------------------------------------- */
.pw-modal__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-top: 58px;                    /* fields block ends at 128, CTA at 186 */
  padding: 8px 12px;
  border-radius: 32px;
  background-color: var(--pw-cta);
  color: var(--pw-card);
  font-family: "Source Sans 3", "Source Sans Pro", inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
}
.pw-modal__cta:hover { background-color: #FFFFFF; }

/* Respect a reduced-motion preference for the open transition. */
@media (prefers-reduced-motion: no-preference) {
  .pw-modal[open] { animation: pw-modal-in 160ms ease-out; }
  @keyframes pw-modal-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
  }
}