/* static/css/pages/login.css
   Login / registration — full-bleed per-customer hero photo with a bottom
   dark-glass form panel. Re-skinned from legacy login-hero.css onto the design
   system. STANDALONE page: loads tokens + base + components + this file, NO
   compat.css, so it renders the true PDF brand directly.

   Spacing uses --space-* tokens. Bespoke hero layout geometry (140/180/200/240/100/120px
   gutters, 100vh scrims, 152px display title) is kept as named page-local custom vars
   (--login-gutter-*) — no single --space token spans them. Everything with a semantic
   token (color, font, radius, motion, glass alpha) references the token. */

/* Page-local display type + glass constants (no semantic token spans these). */
.login-hero{
  --login-intro-fs:clamp(1.55rem, 1.05rem + 2.4vw, 3.5rem);   /* ~24.7px → 56px */
  --login-title-fs:clamp(4rem, 1.6rem + 11.6vw, 9.52rem);     /* ~88px → 152px  */
  --login-glass:color-mix(in srgb, var(--th-ink) 45%, transparent);
  --login-scrim:color-mix(in srgb, var(--th-ink) 30%, transparent);
  --login-gutter-top:140px;        /* mobile/base hero top offset (form over hero photo) */
  --login-gutter-top-lg:200px;     /* desktop hero top offset */
  --login-gutter-x-lg:180px;       /* desktop side gutter */
  --login-gutter-x-xl:240px;       /* wide-desktop side gutter */
  --login-gutter-bottom-lg:100px;  /* desktop hero bottom */
  --login-gutter-bottom-xl:120px;  /* wide-desktop hero bottom */
}

/* Body setup */
body.login-hero{
  margin:0; padding:0;
  min-height:100vh; position:relative; overflow-x:hidden;
  font-family:var(--font-body);
}

/* Hero background layers */
.hero-background{ position:fixed; inset:0; width:100%; height:100%; z-index:0; }
.hero-image{
  position:absolute; inset:0; width:100%; height:100%;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.hero-overlay{ position:absolute; inset:0; width:100%; height:100%; background-color:var(--login-scrim); }
.hero-gradient{
  position:absolute; bottom:0; left:0; width:100%; height:50%;
  background:linear-gradient(to top, var(--th-ink) 0%, transparent 100%);
}

/* Logo */
.hero-logo{ position:absolute; top:48px; left:50%; transform:translateX(-50%); z-index:10; }
.hero-logo img{ height:55px; width:auto; }

/* Hero content */
.hero-content{
  position:relative; z-index:5; min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:var(--login-gutter-top) var(--space-s) var(--space-s);
  color:var(--th-white);
}

/* Hero text */
.hero-text{ text-align:left; }
.hero-intro{
  font-family:var(--font-heading); font-size:var(--login-intro-fs); font-weight:400;
  margin:0 0 var(--space-2xs) calc(-1 * var(--space-3xs)); color:var(--th-white);
}
.hero-title{
  font-family:var(--font-heading); font-size:var(--login-title-fs); font-weight:800;
  margin:0; line-height:1.1; color:var(--th-white);
}
.hero-description{
  font-family:var(--font-body); font-size:var(--fs-base); font-weight:400;
  line-height:1.6; margin:var(--space-m) 0 0 0; max-width:798px; color:var(--th-white);
}
.hero-description p{ margin:0 0 var(--space-xs) 0; }
.hero-description p:last-child{ margin-bottom:0; }
.welcome-heading{
  font-family:var(--font-heading); font-size:var(--fs-lg); font-weight:600;
  margin:0 0 var(--space-s) 0; color:var(--th-white);
}

/* Mobile CTA */
.hero-cta{ margin-top:auto; }
.cta-heading{ font-family:var(--font-heading); font-size:var(--fs-lg); font-weight:600; margin:0 0 var(--space-l) 0; color:var(--th-white); }
.cta-buttons{ display:flex; gap:var(--space-s); flex-wrap:wrap; }

/* Buttons: adopt .th-btn; scope on-dark variants under .login-hero.
   Primary = cornflower brand CTA (component default). Secondary/ghost stay
   white for legibility on the dark glass / over the photo. Only the on-dark
   colours are overridden here — geometry (36px, --radius-xs) is inherited from
   button.css, so the hero follows the app automatically. Icon rotation is kept. */
.login-hero .th-btn{ gap:var(--space-xs); white-space:nowrap; }
.login-hero .th-btn svg{ flex-shrink:0; transform:rotate(-90deg); }
.login-hero .th-btn--secondary{ --btn-fg:var(--th-white); --btn-border:var(--th-white); }
.login-hero .th-btn--secondary:hover{ background:color-mix(in srgb, var(--th-white) 10%, transparent); }
.login-hero .th-btn--ghost{ --btn-fg:var(--th-white); }
.login-hero .th-btn--ghost:hover{ text-decoration:underline; }

/* Dark-glass backdrop */
.dark-glass-backdrop{
  background-color:var(--login-glass);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border-radius:var(--radius-lg); padding:var(--space-l); color:var(--th-white);
}
.dark-glass-backdrop a,
.dark-glass-backdrop h1,
.dark-glass-backdrop h2,
.dark-glass-backdrop h3,
.dark-glass-backdrop label{ color:var(--th-white); }

/* Desktop login form */
.login-form-container{ margin-top:auto; }
.form-heading{ font-family:var(--font-heading); font-size:var(--fs-lg); font-weight:600; margin:0 0 var(--space-s) 0; }
.form-subheading{ font-family:var(--font-body); font-size:var(--fs-base); font-weight:400; margin:0 0 var(--space-m) 0; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2xs); margin-bottom:0; }
.form-field{ display:flex; flex-direction:column; }
.form-field label{ font-family:var(--font-body); font-size:var(--fs-xs); font-weight:400; margin-bottom:var(--space-2xs); }

/* White inputs — adopt .th-field, follow the app's 6px corner (no longer pills);
   re-point --field-* colours and padding for the on-dark glass look (scoped,
   per spec decision 4: scope rather than fight specificity).
   --field-fg states this page's intent explicitly; it is no longer a rescue.
   History worth knowing: these fields sit inside `.hero-content`/
   `.dark-glass-backdrop`, which set `color:var(--th-white)`, and until
   2026-08-27 components/field.css declared no `color` at all — so a field's
   inherited ink here was WHITE on a white fill, and the plain
   `color:var(--th-ink)` that used to sit in this block was the only thing
   keeping the form readable. It won on selector weight, which made it look
   deletable. field.css now declares `color:var(--field-fg)` on every field with
   a :root default of --color-text (= --th-ink), so inheritance never gets a look
   in: removing the line below resolves to the same ink. Kept for clarity about
   intent, alongside the other four --field-* re-points. */
.login-hero .th-field{
  --field-bg:var(--th-white);
  --field-border-color:transparent;
  --field-fg:var(--th-ink);
  --field-pad:14px 18px;
  --field-fs:var(--fs-base);
  --field-focus-border:var(--color-action);
  font-family:var(--font-body);
}
.login-hero .th-field::placeholder{ color:var(--color-text-muted); opacity:1; }

.form-actions{ display:flex; gap:var(--space-s); margin-top:var(--space-s); }
.terms-checkbox{ display:flex; align-items:center; gap:var(--space-xs); margin:var(--space-s) 0; font-family:var(--font-body); font-size:var(--fs-sm); }
.terms-checkbox input[type="checkbox"]{ width:22px; height:22px; cursor:pointer; }
.terms-checkbox label{ cursor:pointer; margin:0; }
.form-footer{ text-align:center; margin-top:var(--space-s); font-family:var(--font-body); font-size:var(--fs-sm); }
.form-footer a{ text-decoration:underline; }

/* Utility */
.hidden{ display:none !important; }
.mobile-only{ display:block; }
.desktop-only{ display:none; }

/* Messages */
#login-message,
#registration-message{
  margin-top:var(--space-s); font-family:var(--font-body); font-size:var(--fs-xs);
  font-weight:600; letter-spacing:0.12px; color:var(--color-error); text-align:left;
}
/* Full-width white-glass secondary buttons (resend / forgot). #forgot-password-btn
   previously relied on styles.css .button, which this standalone page drops.
   Hand-rolled, not a .th-btn variant — they don't inherit the button component,
   so keep their radius/padding in step with it by hand. */
#resend-verify-btn,
#forgot-password-btn{
  width:100%; margin-top:var(--space-xs);
  background-color:color-mix(in srgb, var(--th-white) 20%, transparent);
  color:var(--th-white); border:1px solid var(--th-white);
  padding:var(--space-2xs) var(--space-s); border-radius:var(--radius-xs);
  font-family:var(--font-body); font-size:var(--fs-sm); cursor:pointer;
}
#resend-verify-btn:hover,
#forgot-password-btn:hover{ background-color:color-mix(in srgb, var(--th-white) 30%, transparent); }
#login-link-message{ margin-top:var(--space-xs); font-family:var(--font-body); font-size:var(--fs-sm); min-height:1.4em; }
/* #forgot-password-message previously relied on styles.css .content. */
#resend-message,
#forgot-password-message{ margin-top:var(--space-xs); font-family:var(--font-body); font-size:var(--fs-sm); text-align:center; }

/* Language selector — the shared language_switcher component
   (components/dropdown.css). Login only fixes its placement top-right on the
   hero; the control itself (trigger + menu) is identical to every other page. */
.lang-switcher{ position:fixed; top:1rem; right:1rem; z-index:100; }

/* Mobile (default is mobile; explicit block matches legacy max-width:1023 tweaks) */
@media (max-width:1023px){
  .hero-content{ box-sizing:border-box; min-height:100vh; height:auto; padding:0 var(--space-s) var(--space-l); overflow-x:hidden; }
  .hero-text{ margin-top:var(--login-gutter-top); }
  .hero-description{ font-size:var(--fs-sm); line-height:1.7; }
}

/* Desktop */
@media (min-width:1024px){
  .mobile-only{ display:none; }
  .desktop-only{ display:block; }
  .hero-logo{ left:180px; transform:none; top:54px; }
  .hero-content{ padding:var(--login-gutter-top-lg) var(--login-gutter-x-lg) var(--login-gutter-bottom-lg); justify-content:flex-start; box-sizing:border-box; min-height:100vh; height:auto; }
  .hero-text{ margin-bottom:var(--space-xl); }
  .hero-intro{ margin-left:0; }
  .hero-title{ margin-left:calc(-1 * var(--space-2xs)); }
  .hero-description{ font-size:var(--fs-base); margin-top:var(--space-l); }
  .welcome-heading{ font-size:var(--fs-xl); }
  .login-form-container{ max-width:600px; margin-top:0; }
  .form-heading{ margin-bottom:var(--space-m); }
  .form-row{ margin-bottom:var(--space-s); }
  .form-actions{ margin-top:var(--space-m); }
  .login-hero .th-btn{ min-width:124px; justify-content:center; }
}

/* Large desktop (re-anchored 1440 → 1240; same large-gutter geometry) */
@media (min-width:1240px){
  .hero-content{ padding:var(--login-gutter-top-lg) var(--login-gutter-x-xl) var(--login-gutter-bottom-xl); }
}