/* Lancea sign-in page — 2026 brand tokens, mirroring the app's app/ui/theme.css.
   Typefaces follow the public website: Plus Jakarta Sans for headings and the
   panel tagline, DM Sans at the website's 400/500 weights for everything else.
   Both are the Latin variable-weight files from @fontsource-variable (OFL). */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/dm-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand-primary: #1F8BFF;
  --brand-navy:    #060B35;
  --brand-white:   #FAFAFA;
  --brand-black:   #323335;
  --brand-sky:     #A3CFFF;
  --brand-royal:   #006FE6;
  --brand-gray:    #F0F0F0;

  --brand-panel: var(--brand-primary);

  --grad-light: linear-gradient(180deg, #A3CFFF 0%, #1F8BFF 100%);
  --grad-dark:  linear-gradient(180deg, #1F8BFF 0%, #060B35 100%);

  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'DM Sans', ui-sans-serif, system-ui, sans-serif;

  --text-dark:  var(--brand-black);
  --text-mid:   #4f5260;
  --text-light: #666a78;
  --text-on-dark: var(--brand-white);
  --footer-chip: rgba(6, 11, 53, 0.6);
  --border:     rgba(6, 11, 53, 0.14);
  --focus-ring: var(--brand-royal);
  --error-fg:   #b91c1c;
  --error-bg:   #fef2f2;
  --error-bdr:  #fecaca;
  --success-fg: #15803d;
  --success-bg: #f0fdf4;
  --success-bdr:#bbf7d0;

  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 12px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  font-family: var(--font-body);
  background: var(--brand-white);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font-family: inherit;
}

.signin-heading,
.forgot-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ─────────────────────────────────────────────────────
   Page layout: split panel
───────────────────────────────────────────────────── */

.page {
  display: flex;
  min-height: 100vh;
}

/* ─────────────────────────────────────────────────────
   Left (branded) panel
───────────────────────────────────────────────────── */

.left-panel {
  flex: 0 0 42%;
  background-color: var(--brand-panel);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14vh 4rem 3rem;
  position: relative;
  overflow: hidden;
}

.left-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  margin-bottom: 2.5rem;
}

/* Desktop vertical lockup. Both parts are CSS masks so the logo files stay the
   single source of truth and the panel token decides their colour. */
.brand-mark {
  width: 80px;
  height: 80px;
  background-color: var(--text-on-dark);
  -webkit-mask: url('assets/lancea-mark.svg') center / contain no-repeat;
  mask: url('assets/lancea-mark.svg') center / contain no-repeat;
}

/* lancea-wordmark-white.svg is 221x49 with the mark in its first 58 units;
   a right-aligned mask on a box 163 units wide shows only the letters. */
.brand-wordtype {
  --wordtype-height: 44px;
  height: var(--wordtype-height);
  width: calc(var(--wordtype-height) * 163 / 49);
  background-color: var(--text-on-dark);
  -webkit-mask: url('assets/lancea-wordmark-white.svg') right center / auto 100% no-repeat;
  mask: url('assets/lancea-wordmark-white.svg') right center / auto 100% no-repeat;
}

.wordmark {
  display: none;
  height: 32px;
  width: auto;
  flex-shrink: 0;
}

.left-header {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-on-dark);
  margin-bottom: 1.25rem;
}

.left-subheader {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-on-dark);
  margin-bottom: 3rem;
}

/* The dot wave. .panel-wave-still masks the website's artwork (dot-wave.svg,
   byte-identical, #1f8bff fills) and paints it white; it is what viewers see
   without JavaScript or with reduced motion. .panel-wave-live is the animated
   canvas (public/dot-wave.js) in the same box and transform, so its still
   frame is the same picture. The box keeps the website canvas's 1804:708
   aspect: the 1282-unit-wide artwork fitted to the width, with headroom above
   and below for the motion.
   The composition matches the design mockup and is measured in panel widths
   (cqw of .panel-wave, which spans the panel), so every panel size shows the
   same picture: the artwork is --wave-scale panel widths wide, turned
   --wave-angle clockwise about the box's bottom-left corner, which sits at
   --wave-x / --wave-y from the panel's bottom-left. That frames the artwork's
   left lobe, fold and ridge along the panel's lower edge, tall on the left and
   falling to the right. The masks fade the sheet toward its top and toward
   the panel's right edge. */
.panel-wave {
  --wave-scale: 3.6;
  --wave-angle: 28deg;
  --wave-x: -89.6cqw;
  --wave-y: -22cqw;
  --wave-fade-up: linear-gradient(to top, #000 35%, transparent 65%);
  --wave-fade-right: linear-gradient(to right, #000 60%, rgb(0 0 0 / 0.5) 100%);
  position: absolute;
  inset: 0;
  container-type: inline-size;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: var(--wave-fade-up), var(--wave-fade-right);
  -webkit-mask-composite: source-in;
  mask: var(--wave-fade-up), var(--wave-fade-right);
  mask-composite: intersect;
}

.panel-wave-art {
  position: absolute;
  left: var(--wave-x);
  bottom: var(--wave-y);
  width: calc(var(--wave-scale) * 100cqw);
  aspect-ratio: 1804 / 708;
  transform-origin: 0 100%;
  transform: rotate(var(--wave-angle));
}

.panel-wave-still {
  background-color: var(--text-on-dark);
  -webkit-mask: url('assets/dot-wave.svg') center / 100% auto no-repeat;
  mask: url('assets/dot-wave.svg') center / 100% auto no-repeat;
}

.panel-wave-live {
  color: var(--text-on-dark);
  visibility: hidden;
}

.panel-wave.is-live .panel-wave-live {
  visibility: visible;
}

.panel-wave.is-live .panel-wave-still {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .panel-wave.is-live .panel-wave-live {
    visibility: hidden;
  }

  .panel-wave.is-live .panel-wave-still {
    visibility: visible;
  }
}

.left-footer {
  /* Pinned to the bottom of the branded panel. The navy-tinted chip keeps the
     small text above 4.5:1 on the panel and over the wave's dots. */
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 8rem);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
  background: var(--footer-chip);
  font-size: 0.8125rem;
  color: var(--text-on-dark);
}

.footer-shield {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────
   Right (sign-in) panel
───────────────────────────────────────────────────── */

.right-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
}

.sign-in-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
}

/* Optional faint logomark watermark in the form panel's lower right (design
   Frame 2). Off by default: add the class to .right-panel to enable it. */
.right-panel.with-watermark::after {
  content: '';
  position: absolute;
  right: 3%;
  bottom: -4%;
  width: min(40vw, 26rem);
  aspect-ratio: 48 / 50;
  background-color: var(--brand-primary);
  opacity: 0.1;
  -webkit-mask: url('assets/lancea-mark.svg') center / contain no-repeat;
  mask: url('assets/lancea-mark.svg') center / contain no-repeat;
  pointer-events: none;
}

.signin-heading {
  font-size: 1.875rem;
  color: var(--text-dark);
  margin-bottom: 0.375rem;
}

.signin-subheading {
  font-size: 0.9375rem;
  color: var(--text-mid);
  margin-bottom: 1.75rem;
}

/* ─────────────────────────────────────────────────────
   Social / SSO buttons
───────────────────────────────────────────────────── */

.btn-google,
.btn-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.6875rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--brand-white);
  color: var(--text-dark);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  margin-bottom: 0.75rem;
}

.btn-google:hover,
.btn-sso:hover {
  background: var(--brand-gray);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.btn-google:focus-visible,
.btn-sso:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.google-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────
   Divider
───────────────────────────────────────────────────── */

.divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--text-light);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ─────────────────────────────────────────────────────
   Form fields
───────────────────────────────────────────────────── */

.field-group {
  margin-bottom: 1rem;
}

.field-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 0.375rem;
}

.field-group input[type="email"],
.field-group input[type="password"],
.field-group input[type="text"] {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  color: var(--text-dark);
  background: var(--brand-white);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field-group input:focus {
  border-color: var(--brand-royal);
  box-shadow: 0 0 0 3px rgba(0, 111, 230, 0.16);
}

/* Password field with toggle button */
.password-wrap {
  position: relative;
}

.password-wrap input {
  padding-right: 2.75rem;
}

.btn-show-password {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: color 0.15s;
}

.btn-show-password:hover {
  color: var(--text-mid);
}

.btn-show-password.active {
  color: var(--brand-royal);
}

.btn-show-password:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────
   Keep-signed-in + forgot-password row
───────────────────────────────────────────────────── */

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.625rem;
  margin-bottom: 0.5rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-mid);
  cursor: pointer;
  user-select: none;
}

.checkbox-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--brand-royal);
  cursor: pointer;
  flex-shrink: 0;
}

.forgot-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand-royal);
  text-decoration: none;
}

.forgot-link:hover {
  text-decoration: underline;
}

.forgot-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─────────────────────────────────────────────────────
   Error message
───────────────────────────────────────────────────── */

.error-message {
  font-size: 0.875rem;
  color: var(--error-fg);
  background: var(--error-bg);
  border: 1px solid var(--error-bdr);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  display: none;
}

.error-message a {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────
   Primary sign-in button
───────────────────────────────────────────────────── */

.btn-signin {
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: var(--radius);
  background: var(--brand-royal);
  color: var(--brand-white);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 1.25rem;
  transition: opacity 0.15s, box-shadow 0.15s;
}

.btn-signin:hover {
  background: var(--brand-navy);
  box-shadow: 0 4px 16px rgba(6, 11, 53, 0.32);
}

.btn-signin:active {
  opacity: 1;
  box-shadow: none;
}

.btn-signin:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────
   Legal footer
───────────────────────────────────────────────────── */

.legal-footer {
  font-size: 0.8125rem;
  color: var(--text-light);
  margin-top: 1.5rem;
  text-align: center;
  line-height: 1.55;
}

.legal-footer a {
  color: var(--brand-royal);
  text-decoration: none;
}

.legal-footer a:hover {
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────
   Forgot-password modal overlay
───────────────────────────────────────────────────── */

.forgot-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}

.forgot-overlay.hidden {
  display: none;
}

/* ─────────────────────────────────────────────────────
   "Signing you in…" overlay (shown during the redirect
   return + IAP handshake so the form doesn't flash)
───────────────────────────────────────────────────── */

.signing-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background: var(--brand-white);
}

.signing-overlay.hidden {
  display: none;
}

.signing-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: signing-spin 0.8s linear infinite;
}

@keyframes signing-spin {
  to {
    transform: rotate(360deg);
  }
}

.signing-text {
  color: var(--text-mid);
  font-size: 0.95rem;
}

.forgot-card {
  background: var(--brand-white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.forgot-card h3 {
  font-size: 1.25rem;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.forgot-card > p {
  font-size: 0.9375rem;
  color: var(--text-mid);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.forgot-message {
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  min-height: 0;
}

.forgot-message:empty {
  display: none;
}

.forgot-message.error {
  color: var(--error-fg);
  background: var(--error-bg);
  border: 1px solid var(--error-bdr);
}

.forgot-message.success {
  color: var(--success-fg);
  background: var(--success-bg);
  border: 1px solid var(--success-bdr);
}

.forgot-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.btn-secondary {
  padding: 0.5625rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--brand-white);
  color: var(--text-mid);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-secondary:hover {
  background: var(--brand-gray);
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.btn-primary {
  padding: 0.5625rem 1rem;
  border: none;
  border-radius: var(--radius);
  background: var(--brand-royal);
  color: var(--brand-white);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-primary:hover {
  background: var(--brand-navy);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────
   Responsive
───────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .page {
    flex-direction: column;
  }

  .left-panel {
    flex: none;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1.5rem 1.5rem 2rem;
    align-items: center;
  }

  .left-content {
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  .brand-mark,
  .brand-wordtype {
    display: none;
  }

  .wordmark {
    display: block;
  }

  /* Same composition, scaled to the band; a height-relative fade keeps the
     copy above the densest dots. */
  .panel-wave {
    --wave-fade-up: linear-gradient(to top, #000 10%, transparent 90%);
    opacity: 0.6;
  }

  .left-header {
    font-size: 1.5rem;
  }

  .left-subheader {
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
  }

  .logo-wrap {
    flex-direction: row;
    margin-bottom: 1.5rem;
  }

  /* The collapsed panel is only as tall as its in-flow content, so a footer
     pinned to its bottom edge would be drawn over the subheader. Relative
     (not static) keeps it in flow and above the wave. */
  .left-footer {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    max-width: 100%;
  }

  .right-panel {
    align-items: flex-start;
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .sign-in-card {
    max-width: 100%;
  }

  .left-subheader {
    display: none;
  }

  .left-footer {
    display: none;
  }
}