/* ============================================================================
   DentalDoor — sign in.

   A single precomposited scene sits behind the authentication card. Keeping
   the backdrop static avoids browser compositor faults that can place a
   transformed foreground plate above native password UI and form controls.
   ========================================================================= */

:root{
  --dd-login-ink:#0d2f42;
  --dd-login-muted:#5d7f8e;
  --dd-login-teal:#369dbf;
  --dd-login-teal-deep:#1e6e8c;
  --dd-login-field:rgba(236,246,251,.76);
  --dd-login-field-line:rgba(24,86,110,.16);
  --login-card-radius: var(--radius-md, 8px);
  --login-control-radius: var(--radius-md, 8px);
}

.dd-login-page{
  margin:0;
  min-height:100svh;
  font-family:var(--dd-sans);
  color:var(--dd-login-ink);
  /* the flat fallback under the artwork: if no plate ever loads, the page is
     still a calm sky rather than a white void */
  background:linear-gradient(180deg,#bfe0f4 0%,#d9ecf7 42%,#e9f4fa 100%);
  overflow-x:hidden;
}

/* ── scene ─────────────────────────────────────────────────────────────── */
.dd-login{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(76px,11vh,120px) 18px clamp(40px,7vh,72px);
  isolation:isolate;
}
.dd-login__scene{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    var(--login-backdrop-gradient),
    url('../assets/login/login-backdrop.webp') center center / cover no-repeat;
}

/* ── stable authentication surface ────────────────────────────────────── */
.dd-login__cardlayer{
  position:relative;
  z-index:10;
  width:100%;
  max-width:560px;
  /* Keep interactive text in its own stable stacking context */
  transform:none;
}

/* A quiet, one-time entrance. The ready class is added after the initial
   hidden frame has committed, so the card never flashes before animating.
   No hover selector touches this wrapper, which keeps the form stable once
   the transition has completed. */
.dd-login__cardlayer--entering{
  opacity:0;
  transform:translate3d(0,10px,0);
}
body.dd-login-ready .dd-login__cardlayer--entering{
  opacity:1;
  transform:none;
  transition:
    opacity .48s ease-out,
    transform .62s cubic-bezier(.22,.72,.24,1);
}
.dd-login__card{
  position:relative;
  isolation:isolate;
  border-radius:var(--login-card-radius, 8px);
  padding:clamp(28px,3.6vw,42px) clamp(24px,3.4vw,40px) clamp(28px,3.4vw,38px);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:
    0 32px 80px -28px rgba(10,52,72,.35),
    0 1px 0 rgba(255,255,255,.9) inset;
  /* A nearly opaque glass tint gives the same appearance without sampling
     fourteen moving layers through backdrop-filter. That combination can
     evict/rebuild the card's compositor surface on pointer movement. */
  background:linear-gradient(168deg,rgba(255,255,255,.97) 0%,rgba(238,247,252,.95) 58%,rgba(230,243,251,.97) 100%);
}
.dd-login__card > *{
  position:relative;
  z-index:1;
}

.dd-login__cardhead{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:clamp(16px,2.4vw,26px);
}
.dd-login__mark{
  width:clamp(132px,13vw,164px);
  height:auto;
  display:block;
  shape-rendering:geometricPrecision;
  text-rendering:geometricPrecision;
  image-rendering:-webkit-optimize-contrast;
}
.dd-login__workspace{
  flex:0 0 auto;
  font-size:12px; font-weight:600; text-decoration:none;
  color:var(--dd-login-teal-deep);
  padding:7px 13px; border-radius:var(--login-control-radius, 8px);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(47,134,166,.28);
  letter-spacing:.01em;
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.dd-login__workspace:hover{
  background:#fff;
  border-color:rgba(47,134,166,.52);
  box-shadow:0 2px 8px rgba(47,134,166,.12);
}

.dd-login__title{
  font-family:var(--dd-serif);
  font-weight:400;
  font-size:clamp(30px,4.4vw,44px);
  line-height:1.04;
  letter-spacing:-.018em;
  text-align:center;
  margin:0 0 8px;
  color:#0c3247;
}
.dd-login__lede{
  text-align:center;
  font-size:clamp(13px,1.15vw,14.5px);
  line-height:1.5;
  color:var(--dd-login-muted);
  margin:0 0 clamp(18px,2.6vw,26px);
}

/* ── fields ────────────────────────────────────────────────────────────── */
.dd-login__form{ display:block; }
.dd-field{ position:relative; margin-bottom:14px; }
.dd-field__label{
  /* visible to assistive tech only: the design uses placeholders, but a
     placeholder is not a label */
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.dd-field__icon{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:19px; height:19px; color:#507688; pointer-events:none;
}
.dd-field__icon svg{ width:100%; height:100%; display:block; }
.dd-field__input{
  width:100%;
  height:52px;
  padding:0 48px 0 46px;
  border-radius:var(--login-control-radius, 8px);
  border:1px solid var(--dd-login-field-line);
  background:var(--dd-login-field);
  color:var(--dd-login-ink);
  font-size:15px;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.dd-field__input::placeholder{ color:#648695; }
.dd-field__input:hover{
  background:rgba(242,249,252,.92);
  border-color:rgba(47,134,166,.35);
}
.dd-field__input:focus{
  outline:none;
  background:#ffffff;
  border-color:var(--dd-login-teal);
  box-shadow:0 0 0 3.5px rgba(54,157,191,.18), 0 2px 6px rgba(10,52,72,.04);
}
.dd-field__reveal{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; display:grid; place-items:center;
  border:0; border-radius:var(--radius-sm, 6px); background:transparent; cursor:pointer;
  color:#507688;
}
.dd-field__reveal:hover{ background:rgba(255,255,255,.8); color:var(--dd-login-teal-deep); }
.dd-field__reveal:focus-visible{ outline:2px solid var(--dd-login-teal); outline-offset:2px; }
.dd-field__eye{ width:19px; height:19px; display:block; }
.dd-field__eye--off{ display:none; }
.dd-field__reveal[aria-pressed="true"] .dd-field__eye{ display:none; }
.dd-field__reveal[aria-pressed="true"] .dd-field__eye--off{ display:block; }

.dd-field__error{
  display:none;
  margin:6px 2px 0;
  font-size:12px;
  font-weight:500;
  color:#a4392f;
}
.dd-field.dd-is-invalid .dd-field__input{
  border-color:rgba(164,57,47,.55);
  background:rgba(253,243,242,.9);
}
.dd-field.dd-is-invalid .dd-field__error{ display:block; }

.dd-login__forgot{
  display:block; width:max-content; margin-left:auto;
  font-size:13px; font-weight:600; text-decoration:none;
  color:var(--dd-login-teal-deep);
  padding:2px 2px 0;
  transition:color .15s ease;
}
.dd-login__forgot:hover{ color:var(--dd-login-teal); text-decoration:underline; }

.dd-login__status{
  display:none;
  margin:0 0 14px;
  padding:11px 14px;
  border-radius:var(--login-control-radius, 8px);
  font-size:13px;
  background:rgba(253,240,238,.92);
  border:1px solid rgba(164,57,47,.28);
  color:#8d322a;
}
.dd-login__status.dd-is-visible{ display:block; }

/* ── submit ────────────────────────────────────────────────────────────── */
.dd-login__submit{
  position:relative;
  width:100%;
  height:52px;
  margin-top:clamp(18px,2.2vw,24px);
  display:flex; align-items:center; justify-content:center; gap:10px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:var(--login-control-radius, 8px);
  cursor:pointer;
  font-size:15.5px; font-weight:650; letter-spacing:-.01em; color:#fff;
  background:linear-gradient(135deg,var(--dd-login-teal) 0%,var(--dd-login-teal-deep) 100%);
  box-shadow:
    0 10px 24px -6px rgba(28,101,128,.48),
    0 2px 6px rgba(28,101,128,.18);
  transition:transform .18s ease, box-shadow .24s ease, filter .2s ease;
}
.dd-login__submit:hover{
  transform:translateY(-1.5px);
  filter:brightness(1.04);
  box-shadow:
    0 14px 28px -6px rgba(28,101,128,.56),
    0 4px 10px rgba(28,101,128,.24);
}
.dd-login__submit:hover .dd-login__submit-arrow{ transform:translateX(3px); }
.dd-login__submit:active{ transform:translateY(0); box-shadow:0 4px 12px -2px rgba(28,101,128,.4); }
.dd-login__submit:focus-visible{ outline:2px solid #10465c; outline-offset:3px; }
.dd-login__submit[disabled]{ cursor:default; filter:saturate(.6) brightness(.98); transform:none; }
.dd-login__submit-arrow{
  position:absolute; right:20px; width:20px; height:20px; display:block;
  transition:transform .2s ease;
}
.dd-login__submit-arrow svg{ width:100%; height:100%; display:block; }
.dd-login__submit[disabled] .dd-login__submit-arrow{ opacity:.35; }

/* ── register ──────────────────────────────────────────────────────────── */
/* two rules rather than a band behind the text: the card is translucent, so
   any solid fill behind the label shows as a patch against the glass */
.dd-login__divider{
  display:flex; align-items:center; gap:12px;
  margin:clamp(22px,2.8vw,28px) 0 14px;
  font-size:12.5px;
  font-weight:500;
  color:#678796;
}
.dd-login__divider::before,
.dd-login__divider::after{
  content:''; flex:1 1 auto; height:1px; background:rgba(24,86,110,.16);
}
.dd-login__divider span{ flex:0 0 auto; }
.dd-login__register{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  border-radius:var(--login-control-radius, 8px);
  text-decoration:none;
  color:inherit;
  background:rgba(226,242,250,.68);
  border:1px solid rgba(24,86,110,.13);
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.dd-login__register:hover{
  background:rgba(236,247,252,.95);
  border-color:rgba(47,134,166,.35);
  box-shadow:0 8px 20px -6px rgba(10,52,72,.10);
  transform:translateY(-1px);
}
.dd-login__register:hover .dd-login__register-arrow{ transform:translateX(3px); }
.dd-login__register-icon{ width:26px; height:26px; flex:0 0 26px; color:#4a7183; }
.dd-login__register-icon svg{ width:100%; height:100%; display:block; }
.dd-login__register-copy{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dd-login__register-copy strong{ font-size:13.5px; font-weight:670; color:#123c50; }
.dd-login__register-copy span{ font-size:13.5px; font-weight:640; color:var(--dd-login-teal-deep); }
.dd-login__register-arrow{
  margin-left:auto; width:19px; height:19px; color:var(--dd-login-teal-deep);
  transition:transform .2s ease;
}
.dd-login__register-arrow svg{ width:100%; height:100%; display:block; }

/* ── header ────────────────────────────────────────────────────────────────
   .dd-page-header and friends are defined in forms.css, which this page does
   not load (it would drag in the whole demo/contact form system). Only the
   few rules the header actually needs are restated here. */
.dd-page-header{
  position:fixed; inset:0 0 auto 0; height:80px;
  z-index:140; pointer-events:none;
}
.dd-page-actions{
  position:fixed; right:24px; top:18px;
  display:flex; align-items:center; gap:8px;
  pointer-events:auto;
  z-index:150;
}
.dd-page-action{
  min-height:38px;
  padding:0 16px;
  border:1px solid rgba(47,134,166,.26);
  border-radius:var(--radius-md, 8px);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--dd-login-teal-deep);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  box-shadow:0 2px 6px rgba(10,52,72,.06);
  transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dd-page-action:hover{
  background:#ffffff;
  border-color:rgba(47,134,166,.52);
  box-shadow:0 4px 12px rgba(47,134,166,.14);
  transform:translateY(-1px);
}
.dd-page-action:active{
  transform:translateY(0);
}
.dd-page-action--primary{
  background:linear-gradient(135deg,var(--dd-login-teal) 0%,var(--dd-login-teal-deep) 100%);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 4px 14px -2px rgba(28,101,128,.35);
}
.dd-page-action--primary:hover{
  background:linear-gradient(135deg,var(--dd-login-teal-deep) 0%,#144e64 100%);
  border-color:rgba(255,255,255,.5);
  box-shadow:0 8px 20px -4px rgba(28,101,128,.45);
  transform:translateY(-1px);
}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .dd-page-actions{ right:12px; top:12px; gap:6px; }
  .dd-page-action{ min-height:34px; padding:0 12px; font-size:12px; border-radius:var(--radius-md, 8px); }
  .dd-login{ padding:clamp(66px,10vh,92px) 14px 30px; }
  .dd-login__card{ border-radius:var(--login-card-radius, 8px); }
  .dd-field__input{ height:50px; font-size:16px; border-radius:var(--login-control-radius, 8px); }   /* 16px stops iOS zooming on focus */
  .dd-login__submit{ height:50px; border-radius:var(--login-control-radius, 8px); }
  .dd-login__workspace{ font-size:11.5px; padding:7px 11px; border-radius:var(--login-control-radius, 8px); }
}

/* ── reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .dd-login__cardlayer--entering{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .dd-login__submit{ transition:none; }
}


/* The wordmark in the card head is the way back to the home page, now that
   the fixed page logo is gone. */
.dd-login__markline{
  flex:0 0 auto; display:block; border-radius:8px;
  text-decoration:none; outline-offset:3px;
  transition:transform .2s ease, filter .2s ease;
}
.dd-login__markline:hover{
  opacity:1;
  filter:brightness(1.04);
}
.dd-login__markline:focus-visible{
  outline:2px solid var(--dd-login-teal-deep);
  opacity:1;
}

@media (prefers-reduced-motion: reduce){
  .dd-login__scene,
  .dd-login__card{ opacity:1; transform:none; transition:none; }
}

/* ======================================================================
   TOUCH TARGETS
   Measured on the live page at 390x844: the forgot link was 16px tall, the
   password eye 38, the workspace pill 34 and the wordmark link 36 - all
   under the 44px minimum. Each is expanded with a transparent ::after
   rather than by growing the control, so the finger target grows and the
   design does not move a pixel.
   ====================================================================== */
.dd-login__forgot,
.dd-login__workspace,
.dd-login__markline{ position:relative; }
.dd-login__forgot::after,
.dd-login__workspace::after,
.dd-login__markline::after{
  content:''; position:absolute; left:0; right:0;
  top:50%; transform:translateY(-50%); height:44px;
}
/* the forgot link is the smallest, so it also reaches sideways */
.dd-login__forgot::after{ left:-12px; right:-6px; }

.dd-field__reveal{ width:44px; height:44px; right:8px; }

/* ======================================================================
   TIGHT PHONES  (<=380px)
   At 320x568 the card measured 566px tall in a 568px viewport and the
   registration block fell below the fold, while the wordmark and the
   Workspace pill were fighting over one 292px row. This trims the vertical
   rhythm and lets the card head wrap instead of crushing.
   ====================================================================== */
@media (max-width:380px){
  /* 14px, not 12: at 12 the card grows 4px and the page picks up a real 2px
     horizontal scroll at 320 and 360 (bisected - reverting this one
     declaration alone clears it). The vertical trim below is what this
     breakpoint is actually for. */
  .dd-login{ padding:52px 14px 24px; }
  .dd-login__card{ padding:20px 17px 22px; border-radius:var(--login-card-radius, 8px); }

  .dd-login__cardhead{ gap:10px; margin-bottom:13px; }
  .dd-login__mark{ width:116px; }
  .dd-login__workspace{ font-size:11px; padding:7px 11px; }

  .dd-login__title{ font-size:27px; }
  .dd-login__lede{ font-size:12.5px; margin-bottom:15px; }

  .dd-login__divider{ margin:18px 0 11px; }
  .dd-login__register{ gap:11px; padding:12px 13px; border-radius:var(--login-control-radius, 8px); }
  .dd-login__register-copy strong,
  .dd-login__register-copy span{ font-size:12.5px; }
  .dd-login__register-icon{ flex:0 0 auto; }
  .dd-login__submit{ height:50px; margin-top:16px; }
}

/* ======================================================================
   LANDSCAPE PHONES
   844x390 put a 556px card in a 390px viewport. The top padding is the
   cheapest thing to give back, and the card does not need to be centred
   when it is taller than the screen.
   ====================================================================== */
@media (max-height:520px) and (orientation:landscape){
  .dd-login{ padding:16px 16px 20px; align-items:start; }
  .dd-login__card{ padding:20px clamp(18px,3vw,30px) 22px; }
  .dd-login__title{ font-size:28px; }
  .dd-login__lede{ margin-bottom:14px; }
  .dd-login__divider{ margin:16px 0 10px; }
}


/* ===== dd-login-mobile-stable-card-v1 =====
   On phones the scenery may breathe subtly, but the form is a fixed reading
   surface. JS also zeros CARD_DEPTH at this breakpoint; this CSS is the hard
   safety lock so touch/ambient motion can never move the login form. */
@media (max-width:700px){
  .dd-login{
    min-height:100svh;
    place-items:center;
  }
  .dd-login__cardlayer{
    transform:none !important;
    will-change:auto;
  }
}

/* ===== dd-login-mobile-fluid-type-v1 =====
   Mobile login typography is governed by one responsive scale instead of
   narrow-phone one-offs. This keeps the hierarchy consistent from compact
   phones through larger mobile screens while retaining 16px inputs to avoid
   Safari's focus zoom. */
@media (max-width:700px){
  .dd-login__card{
    --dd-login-type-title:clamp(2.1rem,8.8vw,2.4rem);
    --dd-login-type-lede:clamp(.82rem,3.55vw,.9rem);
    --dd-login-type-ui:clamp(.78rem,3.25vw,.86rem);
    --dd-login-type-meta:clamp(.72rem,3vw,.8rem);
    --dd-login-type-register:clamp(.76rem,3.2vw,.84rem);
    padding:
      clamp(1.35rem,5.8vw,1.75rem)
      clamp(1.05rem,5vw,1.55rem)
      clamp(1.35rem,5.8vw,1.65rem);
  }

  .dd-login__cardhead{
    gap:clamp(.55rem,2.8vw,.85rem);
    margin-bottom:clamp(.85rem,3.8vw,1.1rem);
  }

  .dd-login__mark{
    width:clamp(7.15rem,31vw,8rem);
  }

  .dd-login__workspace{
    font-size:var(--dd-login-type-meta);
    line-height:1;
    padding:clamp(.45rem,2vw,.55rem) clamp(.65rem,3vw,.85rem);
  }

  .dd-login__title{
    font-size:var(--dd-login-type-title);
    line-height:.98;
    letter-spacing:-.025em;
    margin-bottom:clamp(.4rem,1.7vw,.55rem);
  }

  .dd-login__lede{
    max-width:29ch;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:clamp(1rem,4.5vw,1.3rem);
    font-size:var(--dd-login-type-lede);
    line-height:1.42;
  }

  .dd-field{
    margin-bottom:clamp(.7rem,3vw,.85rem);
  }

  .dd-field__input{
    min-height:clamp(3.2rem,13.5vw,3.45rem);
    height:auto;
    font-size:1rem;
    line-height:1.2;
  }

  .dd-login__forgot{
    font-size:var(--dd-login-type-meta);
    line-height:1.25;
  }

  .dd-login__submit{
    min-height:clamp(3.15rem,13.5vw,3.45rem);
    height:auto;
    margin-top:clamp(.9rem,4vw,1.15rem);
    font-size:var(--dd-login-type-ui);
  }

  .dd-login__divider{
    margin:clamp(.95rem,4vw,1.2rem) 0 clamp(.65rem,2.8vw,.85rem);
    font-size:var(--dd-login-type-meta);
  }

  .dd-login__register{
    gap:clamp(.6rem,2.8vw,.8rem);
    padding:clamp(.72rem,3vw,.9rem) clamp(.72rem,3.2vw,.95rem);
  }

  .dd-login__register-copy{
    gap:.12rem;
  }

  .dd-login__register-copy strong{
    font-size:var(--dd-login-type-register);
    line-height:1.18;
    font-weight:670;
  }

  .dd-login__register-copy span{
    font-size:var(--dd-login-type-register);
    line-height:1.18;
    font-weight:620;
  }
}

/* Compact phones keep the same scale; only spatial density tightens. */
@media (max-width:380px){
  .dd-login__title{font-size:var(--dd-login-type-title);}
  .dd-login__lede{font-size:var(--dd-login-type-lede);}
  .dd-login__workspace{font-size:var(--dd-login-type-meta);}
  .dd-login__register-copy strong,
  .dd-login__register-copy span{font-size:var(--dd-login-type-register);}
}


/* ===== dd-login-mobile-first-paint-lock-v1 =====
   Keep the reading surface centered from the very first paint. On mobile the
   entrance is opacity-only; no transform is allowed on either the card or its
   parallax wrapper, so reload cannot visually settle into position. */
@media (max-width:700px){
  .dd-login{
    justify-items:center;
  }
  .dd-login__cardlayer{
    width:min(100%,560px);
    margin-inline:auto;
    justify-self:center;
    transform:none !important;
  }
  .dd-login__card{ transform:none !important; }
}