/* Password gate — design.md: Password modal.
   Figma 444:30405 (+ 444:30363/30447/30489, its other states). A <dialog>, so the backdrop,
   focus trap, background inertness and Escape-to-close are the platform's rather than script's.
   The sheet is now Figma's own paper photo (js/modal.js: USE_PAPER_IMAGE), on request — it was
   originally drawn, not an image: a feTurbulence filter over a tan fill with the punch holes
   masked out and their recess shading echoing the spiral binding's. That SVG build is kept
   intact and unused in modal.js rather than deleted, in case of a revert. */

.pwgate {
  /* Strip the UA dialog chrome so only the torn sheet shows. */
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  overflow: visible;
  color: var(--color-modal-text);
}

.pwgate::backdrop {
  background: var(--color-modal-overlay);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
}

/* The page behind a modal should not scroll under it. */
body:has(.pwgate[open]) {
  overflow: hidden;
}

.pwgate__sheet {
  position: relative;
  /* Own stacking context (position + a real z-index, not just position alone) so
     .pwgate__paper's z-index: -1 below is contained here — paints behind this sheet's own
     content, not behind the page underneath it. Needed for the fix just below. */
  z-index: 0;
  width: 454px;
  height: 467px;
}

.pwgate__paper {
  position: absolute;
  /* Was relying on paper and .pwgate__content's children (.pwgate__title etc.) both being
     position: absolute for DOM order (paper first, then content) to decide paint order — holds
     on desktop, but the narrow-screen block further down switches title/sub/form/etc. to
     position: static, which paints ALL static content before ANY positioned content regardless
     of DOM order, so the (still-absolute) paper painted last and covered the now-static text
     completely — a real bug, reproduced with the pre-image-swap SVG sheet too, so not something
     the recent image change introduced. z-index: -1 makes "paper behind content" explicit and
     independent of what position each of them happens to use. */
  z-index: -1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* drop-shadow rather than box-shadow so the lift follows the torn outline and shows through
     the punched holes, instead of tracing a rectangle the sheet does not have. Applies the same
     way whether .pwgate__paper is the SVG sheet or (js/modal.js: USE_PAPER_IMAGE) the real photo
     below — both have real alpha at the torn edge/holes for it to trace. */
  filter: drop-shadow(0 12px 24px rgba(23, 23, 23, 0.22));
}

/* Figma's own paper photo (444:30405 etc.), swapped in for the hand-drawn SVG sheet on request —
   see js/modal.js's USE_PAPER_IMAGE. object-fit: fill matches the SVG's own
   preserveAspectRatio="none": stretch to the sheet's exact 454x467 box rather than crop/letterbox,
   which barely matters here since the source (455x468) is already almost that exact ratio. */
.pwgate__paper--image {
  object-fit: fill;
}

/* The grain is defined inside the dialog's own SVG, injected by js/modal.js, rather than borrowed
   from the hero's defs — the case study pages that also use this modal never load the hero. */
.pwgate__shape {
  fill: var(--color-modal-paper);
  filter: url(#pwgate-grain);
}

/* Close button — added on request; the original design only offered Escape/backdrop-click.
   Position approximates Figma 444:30405's own close glyph (node 497:75125), read off that frame:
   ~34px from the sheet's right edge, ~20px from its top, just clear of the top punched hole. */
.pwgate__close {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-modal-text);
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}

.pwgate__close svg {
  width: 14px;
  height: 14px;
}

.pwgate__close:hover {
  background: rgba(23, 23, 23, 0.06);
}

.pwgate__close:focus-visible {
  outline: 2px solid var(--color-modal-unlock);
  outline-offset: 2px;
}

.pwgate__content {
  position: absolute;
  inset: 0;
  font-family: var(--font-sans);
  color: var(--color-modal-text);
}

/* Offsets are measured from the Figma frame, normalised to a single 90px left inset — the
   original scatters content across 87.5–100.5px, which is placement drift rather than intent. */
.pwgate__title {
  position: absolute;
  left: 90px;
  top: 71.5px;
  width: 318px;
  margin: 0;
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-normal);
}

.pwgate__sub {
  position: absolute;
  left: 90px;
  top: 106.5px;
  width: 318px;
  margin: 0;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-normal);
}

.pwgate__form {
  position: absolute;
  left: 90px;
  top: 159.5px;
  margin: 0;
  display: flex;
  gap: var(--space-sm);
}

.pwgate__input {
  box-sizing: border-box;
  width: 201px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-modal-input-bg);
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--color-modal-text);
  /* No focus ring, on request — this used to be a 2px brown outline; removed outright rather
     than swapped for another color, since the field auto-focuses the instant the modal opens
     (js/modal.js), so a ring here was never really marking a deliberate tab-to action anyway.
     Set here rather than only on :focus-visible so it also overrides the browser's own default
     blue ring, not just ours. */
  outline: none;
}

/* Figma sets this 10px in #aaa, which is 2.22:1 — below AA and under the 12px floor the rest
   of the site keeps. Raised to the shared secondary-text token. See design.md. */
.pwgate__input::placeholder {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: 500;
  color: var(--color-modal-text-secondary);
  opacity: 1;
}

.pwgate__unlock {
  flex: none;
  width: 98px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-modal-unlock);
  color: var(--color-modal-input-bg);
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: 500;
  line-height: var(--leading-normal);
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.pwgate__unlock:hover { background: var(--color-modal-unlock-hover); }
.pwgate__unlock:active { background: var(--color-modal-unlock-press); }

.pwgate__unlock:focus-visible {
  outline: 2px solid var(--color-modal-unlock);
  outline-offset: 2px;
}

/* Sits in the empty band Figma leaves between the field and the divider, so showing it never
   moves anything else on the sheet. */
.pwgate__error {
  position: absolute;
  left: 90px;
  top: 200px;
  width: 318px;
  margin: 0;
  font-size: var(--text-micro);
  line-height: var(--leading-normal);
  color: var(--color-modal-error);
}

.pwgate__error[hidden] { display: none; }

.pwgate__rule {
  position: absolute;
  left: 90px;
  top: 356.5px;
  width: 311px;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--color-modal-rule);
}

.pwgate__reach {
  position: absolute;
  left: 90px;
  top: 370.5px;
  width: 318px;
  margin: 0;
  /* 15px is not on the type scale; it is the Figma value and is kept deliberately. */
  font-size: 15px;
  line-height: var(--leading-normal);
}

.pwgate__contact {
  position: absolute;
  left: 90px;
  top: 407.5px;
  margin: 0;
  display: flex;
  gap: 40px;
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
}

.pwgate__link { color: var(--color-modal-link); }

/* Reads as plain text next to the link, but still opens a mail client. */
.pwgate__email {
  color: var(--color-modal-text);
  text-decoration: none;
}

.pwgate__email:hover { text-decoration: underline; }

/* Wrong password: the field borders red and the row shakes, and nothing navigates. */
@keyframes pwgate-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

.pwgate.is-wrong .pwgate__form { animation: pwgate-shake 0.5s ease-in-out; }
.pwgate.is-wrong .pwgate__input { border-color: var(--color-modal-error); }

/* ── Narrow screens ──────────────────────────────────────────────────────── */

/* Not in Figma — the frame is desktop only. The sheet stops fitting at 454px wide, so the
   absolute placement is dropped and the content flows instead, keeping a left gutter clear of
   the punched holes. The paper stretches to whatever height the content needs. */
@media (max-width: 519px) {
  .pwgate__sheet {
    box-sizing: border-box;
    width: min(454px, calc(100vw - 32px));
    height: auto;
    padding: 40px 24px 40px 70px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .pwgate__content { position: static; display: contents; }

  .pwgate__title,
  .pwgate__sub,
  .pwgate__form,
  .pwgate__error,
  .pwgate__rule,
  .pwgate__reach,
  .pwgate__contact {
    position: static;
    left: auto;
    top: auto;
    width: auto;
  }

  .pwgate__form { flex-wrap: wrap; }
  .pwgate__input { width: 100%; }
  .pwgate__rule { margin-top: var(--space-sm); }
  .pwgate__contact { flex-wrap: wrap; gap: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
  .pwgate.is-wrong .pwgate__form { animation: none; }
  .pwgate__unlock { transition: none; }
}