/* ASCENT login page — responsive sign-on (Issue #23).
   Rewritten mobile-first from the design team's finalized responsive spec
   (2026-09-23) + real media assets. Every value
   below traces to that spec; do not hand-tune — reconcile with the spec if the
   design changes. Self-contained (not signin.juji.css) so the shared sign-on
   shell (signup / 2FA / recovery) is unaffected and to avoid the color-token PR.

   Layout by width:
     < 560px  mobile  = stacked, mobile image on top (400x424)
     560-859  tablet  = stacked, tablet image on top (752x440)
     >= 860   desktop = side-by-side, form left + video right (685x1009)
     >= 1280  wide    = form gets wider side padding */

/* NOTE: these use the ASCENT design values (from the design team). We
   intentionally do NOT reference juji-tokens.css yet — that file is still the
   Pass-1 capture of the OLD Juji palette (teal brand, #3C4253 text), not the
   ASCENT palette. Once the shared tokens gain ASCENT colors, swap the values
   below to var(--color-*). */
:root {
  /* colors (ASCENT design — final spec) */
  --ascent-purple:      #a100ff;   /* Brand accent — logo, links */
  --ascent-dark:        #030712;   /* Text/primary + primary/SSO button */
  --ascent-dark-hover:  #1f2937;
  --ascent-text:        #030712;   /* Text/primary */
  --ascent-subtext:     #4b5563;   /* Text/secondary — subtitle, legal */
  --ascent-muted:       #9ca3af;   /* placeholder */
  --ascent-gray-btn:    #E5E7EB;   /* inactive "Continue with email" bg */
  --ascent-gray-btn-fg: #687076;
  --ascent-border:      #d1d5db;   /* input border */
  --ascent-error:       #d64545;
  --ascent-pad:         8px;       /* panel gap / media padding */
  --ascent-media-bg:    #0d1520;   /* video card backdrop */
}

* { box-sizing: border-box; }

body.ascent-login {
  margin: 0;
  min-width: 320px;
  font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ascent-text);
  background: #fff;
}

/* ════════════════════════════════════════════════════════════════
   BASE (mobile-first) — stacked, mobile image on top.  < 560px
   ════════════════════════════════════════════════════════════════ */
.ascent-login__wrap {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

/* mobile image asset: native 400x424, fills width minus 8px side/top padding */
.ascent-login__media-mobile {
  display: block;
  margin: var(--ascent-pad) var(--ascent-pad) 0;
  width: calc(100% - var(--ascent-pad) * 2);
  aspect-ratio: 400 / 424;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

/* tablet + desktop media hidden on mobile */
.ascent-login__media-tablet,
.ascent-login__right { display: none; }

/* form column */
.ascent-login__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  padding: 48px 0 2.5rem;
}

/* panel: centered, max 400px */
.ascent-login__panel {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* logo (32 x 34.13) */
.ascent-login__logo { margin: 0 0 1.25rem; line-height: 0; }
.ascent-login__logo img { display: block; width: 32px; height: 34px; }

/* heading + subtitle */
.ascent-login__heading-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* Header/h1: Graphik-Medium 500; 24/32/-0.6 on mobile (grows at >=560) */
.ascent-login__title {
  margin: 0 0 0.75rem;
  font-family: "Graphik-Medium", sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.6px;
  color: var(--ascent-text);
}
/* tagline: Graphik 400; 14/20 on mobile (grows at >=560) */
.ascent-login__subtitle {
  margin: 0 0 2.5rem;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ascent-subtext);
}

/* ---- form ---- */
.ascent-login__form {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
}

/* fields container: 20px between email unit and password unit; 2rem to button */
.ascent-login__fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 2rem;
}

/* each label+input unit: 6px internal gap */
.ascent-login__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ascent-login__field.is-hidden { display: none; }

/* Body S Med: Graphik-Medium 500, 14/20 */
.ascent-login__label {
  margin: 0;
  font-family: "Graphik-Medium", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--ascent-text);
}

/* input: padding 8/12, 1px #d1d5db, radius 8; Body S Reg 14/20 */
.ascent-login__input {
  width: 100%;
  padding: 8px 12px;
  font-family: "Graphik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ascent-text);
  background: #fff;
  border: 1px solid var(--ascent-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s;
}
.ascent-login__input::placeholder { color: var(--ascent-muted); }
.ascent-login__input:focus { border-color: var(--ascent-border); }

/* no-access / auth error notice (sits under the email input, inside its unit) */
.ascent-login__notice { margin: 0; font-size: 14px; line-height: 20px; }
.ascent-login__notice:empty { display: none; }
/* no-access / auth error: red message; "Request access" is a purple link. */
.ascent-login__error { color: var(--ascent-error); }
.ascent-login__error a {
  color: var(--ascent-purple);
  text-decoration: underline;
  text-decoration-style: solid;
}

/* button: 44px, radius 8, bg #030712; label S Med. 1.5rem to legal footer */
.ascent-login__btn {
  width: 100%;
  height: 44px;
  padding: 8px 12px;
  margin: 0 0 1.5rem;
  border: none;
  border-radius: 8px;
  font-family: "Graphik-Medium", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  background: var(--ascent-dark);
  cursor: pointer;
  transition: background 0.15s ease;
}
.ascent-login__btn:hover { background: var(--ascent-dark-hover); }
/* inactive/neutral — empty email ("Continue with email") */
.ascent-login__btn.is-inactive {
  background: var(--ascent-gray-btn);
  color: var(--ascent-gray-btn-fg);
}

/* legal footer: Body 14/20 on mobile (grows at >=560); links purple underline.
   Two-line wrap is driven by the explicit <br> in the markup (no CSS hack). */
.ascent-login__legal {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: var(--ascent-subtext);
}
.ascent-login__legal a {
  font-family: "Graphik-Medium", sans-serif;
  font-weight: 500;
  color: var(--ascent-purple);
  text-decoration: underline;
  text-decoration-style: solid;
}

/* ════════════════════════════════════════════════════════════════
   TABLET — 560px to 859px : stacked, tablet image (752x440) on top,
   larger type.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 560px) and (max-width: 859px) {
  .ascent-login__media-mobile { display: none; }
  .ascent-login__media-tablet {
    display: block;
    margin: var(--ascent-pad) var(--ascent-pad) 0;
    width: calc(100% - var(--ascent-pad) * 2);
    aspect-ratio: 752 / 440;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
  }
  .ascent-login__panel { padding: 0 24px; }
  .ascent-login__title {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.75px;
  }
  .ascent-login__subtitle { font-size: 16px; line-height: 24px; }
  .ascent-login__legal    { font-size: 16px; line-height: 24px; }
}

/* ════════════════════════════════════════════════════════════════
   DESKTOP — 860px+ : side-by-side, form left + video card right.
   Video card: native 685x1009, flex:0 1 685px (shrinks below ~1181px
   viewport). Form: flex-grow, min-width 480px, panel 400px centered.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 860px) {
  .ascent-login__wrap {
    flex-direction: row;
    align-items: center;
    gap: var(--ascent-pad);
    padding: var(--ascent-pad) var(--ascent-pad) var(--ascent-pad) 0;
    /* Fixed to the viewport height so the video card shrinks to fit the screen
       (never overflows / pushes the form off-screen) and the form group stays
       vertically centered — including on short windows. (Per design review,
       2026-09-28.) */
    height: 100svh;
    overflow: hidden;
    /* Cap the whole row and center it so on very large monitors the form and
       video stay grouped (video not pinned to the right edge) with even side
       margins, instead of drifting apart. Keeps the 1440 look; lets the video
       scale up a bit before the cap. (Per design review, 2026-09-28.) */
    max-width: 2000px;
    margin: 0 auto;
  }

  .ascent-login__media-mobile,
  .ascent-login__media-tablet { display: none; }

  .ascent-login__left {
    /* Grow to share the row at normal widths, but cap the form column so on
       very large screens it doesn't balloon and push the video far away — the
       form + video stay grouped. (Per design review, 2026-09-28.) */
    flex: 1 1 auto;
    min-width: 480px;
    max-width: 815px;
    height: 100svh;
    /* Center the form vertically; if the window is too short for the content,
       the form scrolls internally instead of the whole page. */
    overflow-y: auto;
    padding: 2.5rem 0;
    align-items: center;
    justify-content: center;
  }
  .ascent-login__panel { width: 400px; max-width: 400px; padding: 0; }

  .ascent-login__title {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.75px;
  }
  .ascent-login__subtitle { font-size: 16px; line-height: 24px; }
  .ascent-login__legal    { font-size: 16px; line-height: 24px; }

  /* video card: flex-basis 685px (native width), no grow, shrinks once the
     form has consumed its share of the row. */
  .ascent-login__right {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 685px;
    min-width: 0;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: var(--ascent-media-bg);
  }
  .ascent-login__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* ════════════════════════════════════════════════════════════════
   LARGE DESKTOP — 1280px+ : wider form side padding.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .ascent-login__left { padding: 2.5rem 8rem; }
}