/* ============================================================================
   DevPlan — account module (change-password dialog)
   Self-contained. Same rule as styles.css: NO literal colour anywhere in this
   file. Every colour is a var() defined in styles.css, so both themes work for
   free. The scrim is the one case that needs a per-theme choice — see below.
   Mobile first: at 390px the dialog is a full-width bottom sheet with 50px
   buttons. Inputs inherit .input (16px), so iOS never zooms on focus.
   ========================================================================= */

/* ---------------------------------------------------------------- shell -- */

.acct-modal {
  position: fixed;
  inset: 0;
  /* above .chrome (20) and .preview-banner (30) */
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);

  /* Dimming with tokens only. In light mode the darkest token is --text; in
     dark mode it is --surface-sunk. Picking per theme keeps the scrim dark in
     both, which a single token cannot do. Alpha comes from opacity, so no
     rgba() literal is needed. */
  --acct-scrim: var(--text);
  --acct-scrim-alpha: .45;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .acct-modal {
    --acct-scrim: var(--surface-sunk);
    --acct-scrim-alpha: .74;
  }
}

/* Explicit override wins over the media query in both directions. */
:root[data-theme="dark"] .acct-modal {
  --acct-scrim: var(--surface-sunk);
  --acct-scrim-alpha: .74;
}
:root[data-theme="light"] .acct-modal {
  --acct-scrim: var(--text);
  --acct-scrim-alpha: .45;
}

.acct-modal__scrim {
  position: absolute;
  inset: 0;
  background: var(--acct-scrim);
  opacity: var(--acct-scrim-alpha);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: acct-fade 160ms ease-out;
}

.acct-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 440px;
  max-height: calc(100dvh - var(--gutter) * 2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  animation: acct-pop 170ms cubic-bezier(.2, .8, .3, 1);
}

.acct-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 6px 20px;
}

.acct-modal__title {
  flex: 1 1 auto;
  margin: 6px 0 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}

.acct-modal__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--speed) ease, color var(--speed) ease;
}
.acct-modal__close:hover {
  color: var(--text);
  background: var(--surface-2);
}
.acct-modal__close:active { background: var(--surface-sunk); }

/* The scrolling part, so a small landscape phone can still reach the buttons. */
.acct-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 20px 20px;
}

.acct-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* ----------------------------------------------------------------- form -- */

.acct-pw__intro {
  margin: 0 0 18px;
  line-height: 1.5;
}
.acct-pw__intro strong {
  color: var(--text);
  font-weight: 600;
  overflow-wrap: anywhere;      /* long addresses must not widen the sheet */
}

.acct-pw__form .field { margin-bottom: 16px; }

/* Quiet, but a real 46px target — this gets tapped on a phone. */
.acct-pw__reveal {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin: -6px 0 6px;
  padding: 0 12px 0 0;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--speed) ease;
}
.acct-pw__reveal:hover { color: var(--text); }
.acct-pw__reveal[aria-pressed="true"] { color: var(--accent); }

/* An error must never sit flush against the button about to be pressed again. */
.acct-pw__msg {
  display: block;
  margin: 2px 0 4px;
  line-height: 1.45;
}

.acct-pw__blocked {
  margin: 0;
  line-height: 1.5;
}

/* -------------------------------------------------------------- success -- */

.acct-pw__done-status {
  padding: 6px 0 2px;
  text-align: center;
}

.acct-pw__done-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ok);
  background: var(--ok-wash);
  border: 1px solid var(--ok);
  border-radius: 50%;
}

.acct-pw__done-text {
  margin: 0;
  color: var(--text);
  line-height: 1.5;
}

.acct-pw__done .acct-modal__foot { justify-content: center; }
.acct-pw__done .btn { min-width: 140px; }

/* ------------------------------------------------------------- motion --- */

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

@keyframes acct-pop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
}

@keyframes acct-sheet {
  from { transform: translateY(100%); }
}

/* -------------------------------------------------------------- mobile -- */
/* At 390px this is a sheet: full width, anchored to the bottom where the thumb
   is, clear of the iOS home indicator. */

@media (max-width: 560px) {
  .acct-modal {
    padding: 0;
    align-items: flex-end;
  }

  .acct-modal__dialog {
    max-width: none;
    max-height: 92dvh;
    border-width: 1px 0 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: acct-sheet 200ms cubic-bezier(.2, .8, .3, 1);
  }

  .acct-modal__head { padding: 16px 12px 4px 18px; }
  .acct-modal__title { font-size: 1.15rem; }

  .acct-modal__body {
    padding: 4px 18px calc(18px + env(safe-area-inset-bottom));
  }

  /* Stacked, full width, and the primary action sits lowest — closest to the
     thumb — while keeping DOM order equal to visual order. */
  .acct-modal__foot {
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }
  .acct-modal__foot .btn {
    width: 100%;
    min-height: 50px;
  }

  .acct-pw__form .field { margin-bottom: 18px; }
  .acct-pw__done .btn { min-width: 0; }
}

/* A grab handle reads as "this sheet can be dismissed" on touch devices. */
@media (max-width: 560px) and (pointer: coarse) {
  .acct-modal__dialog::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    width: 38px;
    height: 4px;
    margin-left: -19px;
    background: var(--border-strong);
    border-radius: 999px;
  }
  .acct-modal__head { padding-top: 20px; }
}