/* ==========================================================================
   password.css — locked projects
   Figma: Design System › "Password form" and "Locked content";
   screens "Password — dialog / sheet" and "Password — locked <project>".
   Loaded on the homepage (dialog) and on every project page (locked state).
   ========================================================================== */

/* ---- Scroll lock while the dialog is open --------------------------------- */
html.is-scroll-locked,
html.is-scroll-locked body {
  overflow: hidden;
}

/* ---- Dialog (desktop) / bottom sheet (mobile) ------------------------------
   Native <dialog>: showModal() keeps focus inside, makes the page behind
   inert, and closes on Esc (homepage only). */
.password-dialog {
  width: min(30rem, 100% - 3rem);             /* 480 */
  max-width: none;
  max-height: calc(100% - 3rem);
  margin: auto;
  padding: var(--space-xl) 2.5rem 2.5rem;     /* 24 40 40 */
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface-white);
  color: var(--color-text-body);
  box-shadow: 0 24px 64px rgb(31 26 20 / 0.16);
  overflow: auto;
}

.password-dialog::backdrop {
  background: rgb(30 27 22 / 0.48);           /* #1E1B16 at 48% */
}

@media (max-width: 47.99rem) { /* bp: mobile (< 768px) — bottom sheet */
  .password-dialog {
    width: 100%;
    max-height: calc(100% - 2rem);
    margin: auto 0 0;                         /* stick to the bottom */
    padding: 0.75rem var(--space-xl) calc(2.5rem + env(safe-area-inset-bottom, 0px));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .password-dialog::before {                  /* handle */
    content: "";
    display: block;
    width: 2.5rem;
    height: 0.25rem;
    margin: 0 auto var(--space-xs);
    border-radius: var(--radius-pill);
    background: var(--color-border);
  }
}

.password-dialog__top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-xs);
}

/* ---- Form ------------------------------------------------------------------ */
.password-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);                       /* 24 */
}

.password-form__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.password-form__title {
  font-size: var(--type-h3);
  font-weight: 600;
}

.password-form__desc {
  color: var(--color-text-muted);
}

.password-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.password-field label {
  font-size: var(--type-body-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.password-field__control {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: var(--size-button-height);
  padding-inline: var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-surface-white);
  box-shadow: inset 0 0 0 1px var(--color-border);
  transition: box-shadow var(--duration) var(--ease-out);
}

/* Focused: 2px dark border (State=Focused) */
.password-field__control:focus-within {
  box-shadow: inset 0 0 0 2px var(--color-text-primary);
}

/* Error: 2px accent border (State=Error) */
.password-field__control:has(input[aria-invalid="true"]) {
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.password-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 1rem;                            /* 16px: no zoom on iOS */
}

.password-field input:focus {
  outline: none;                              /* the control shows focus */
}

.password-field__toggle {
  flex: none;
  padding: var(--space-2xs);
  border: 0;
  background: none;
  color: var(--color-text-primary);
  font-family: var(--font-heading);
  font-size: var(--type-body-sm);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.password-field__error {
  font-size: var(--type-body-sm);
  line-height: var(--leading-small);
  color: var(--color-accent);
}

.password-form__submit {
  width: 100%;
}

.password-form__submit[aria-busy="true"] {
  cursor: progress;
  opacity: 0.85;
}

.password-form__help {
  font-size: var(--type-body-sm);
  color: var(--color-text-muted);
}

.password-form__help a {
  font-weight: 600;
  color: var(--color-text-primary);
  text-underline-offset: 0.2em;
}

/* ---- Locked page --------------------------------------------------------------
   The server replaces the project content with partials/locked.html.
   Same dummy text on every project, blurred. */
.locked-content__text {
  max-width: 41rem;                           /* 656 */
  filter: blur(5px);                          /* ≈ Figma layer blur 10 */
  user-select: none;
  pointer-events: none;
}

/* Without JavaScript the dialog can't be modal: show it as a fixed overlay
   with the same tint, so the locked page looks the same. */
html:not(.js) .is-locked::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgb(30 27 22 / 0.48);
}

html:not(.js) .is-locked .password-dialog[open] {
  position: fixed;
  inset: 0;
  z-index: 11;
}

.is-locked {
  overflow: hidden;
}