/* ===================================================================
   Moby — Customer Login / Auth pages
   Shared tokens (colors, fonts, radii) live in _layout.css, loaded
   globally via _layout.html. This file is auth-page-specific only.
   =================================================================== */

/* Colours this sheet alone uses, named so none of them is a bare hex.
   Same values as before — this changed no pixel. */
:root {
  --role-choice-line         : #E3E9EC;
  --role-choice-selected-line: #1F7A8C;
  --role-choice-label-ink    : #14282F;
  --btn-uae-pass-bg          : #0F2A4A;
}

.auth {
  flex: 1;
  display: flex;
  background: var(--paper);
}

.auth-grid {
  display: grid;
  grid-template-columns: 1fr;
  flex: 1;
}

@media (min-width: 900px) {
  .auth-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===================================================================
   Left visual panel — hidden on mobile, shown from tablet up
   =================================================================== */
.auth-visual {
  display: none;
  position: relative;
  background-color: var(--hero-ground);
  /* Dominant surface is --ink; the accent is --teal, and only the accent
     follows brand_color.
     Two hardcoded hexes used to be here — classic's --ink and an 82/18 mix
     of it with --teal — so the panel painted classic's #0E1F2D over moby
     (#12263A) and slate (#1B2733) alike. Reading --ink fixes that.
     It briefly read var(--sidebar-bg, var(--ink)) instead, which made the
     DOMINANT colour follow brand_color. That was wrong twice over: the
     field is documented in its own Settings hint as "buttons, active
     states, and nav highlights" — an accent, not a surface — and the
     launch client's brand sheet is explicit that Primary Navy is the
     dominant colour and Primary Teal "only as a premium accent". A
     teal-derived panel inverted their hierarchy. --teal is still
     overridden by brand_color, so the highlight and the top stop do carry
     the org's colour; the ground it sits on stays the theme's navy. */
  background-image:
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--teal) 18%, transparent), transparent 55%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--hero-ground) 82%, var(--teal) 18%) 0%,
      var(--hero-ground) 70%);
  padding: 64px;
  align-items: center;
}

@media (min-width: 900px) {
  .auth-visual { display: flex; }
}

.auth-visual-content {
  max-width: 380px;
}

.auth-shield {
  width: 56px;
  height: 48px;
  color: var(--teal);
  margin-bottom: 32px;
}

/* The org's own logo, where it has one. This panel renders on the ORG's
   own portal domain, so the .auth-shield bull head above —
   Moby's own mark — reads to their customers as somebody else's brand.
   Sized to the same optical weight rather than the same box: a wordmark is
   wide where the mark is square, and object-fit stops it stretching. */
.auth-shield-logo {
  display: block;
  max-width: 200px;
  max-height: 48px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 32px;
}

.auth-visual-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.15;
  color: var(--hero-ink);
  margin: 0 0 16px;
}

/* Only where the words are the ORG's own. The platform's eight headlines
   (tenant login, both reset-password pages, choose-role, affiliate…) get
   their line break from a literal <br>, which an org cannot use: its text
   is escaped, so a typed <br> would show as characters. pre-line lets a
   newline do that job instead — and stays off the shared class, so those
   eight keep collapsing whitespace exactly as they do now. */
.auth-visual-headline--own {
  white-space: pre-line;
}

.auth-visual-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-on-dark);
  margin: 0;
}

/* ===================================================================
   Right form panel
   =================================================================== */
.auth-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 32px;
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
}

.auth-header { margin-bottom: 32px; }

.auth-brand {
  text-align: center;
  margin-bottom: 28px;
}

/* The org's own wordmark in the card header, where it has one — the same
   substitution .auth-shield-logo makes in the panel to the left, at the
   card's smaller scale. Fixed height/width (not max-*) so object-fit
   scales a small SVG UP instead of leaving it floating tiny, same as
   .brand-logo in customer/_layout.css; centred, because .auth-brand is. */
.auth-brand .brand-logo {
  display: block;
  height: 34px;
  width: 170px;
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
}

.auth-org-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.2px;
  color: var(--ink);
}

.auth-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 6px;
}

.auth-header p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* ===================================================================
   Form — login-specific overrides (shared base is in _layout.css)
   =================================================================== */
.form-group {
  margin-bottom: 18px;
  position: relative; /* needed for password-toggle absolute positioning */
}

.form-control {
  background: var(--white); /* login uses white; app forms use --paper */
}

.password-field .form-control {
  padding-inline-end: 42px;
}

.pw-wrap {
  position: relative;
}
.pw-wrap .form-control {
  padding-inline-end: 42px;
}
.toggle-password:hover { color: var(--ink); }
.toggle-password:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

/* Strength meter — in common/_components.css, which every page rendering
   one loads. This copy filled the bar with --amber/--green where the
   admin copy used --strength-fair/--strength-strong: one meter, two
   colours for the same password. */

.auth-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  font-size: 13px;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  cursor: pointer;
}

.remember-me input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
  cursor: pointer;
}

.auth-options a {
  color: var(--teal-deep);
  font-weight: 600;
  text-decoration: none;
}
.auth-options a:hover { text-decoration: underline; }

/* ===================================================================
   Footer links
   =================================================================== */
.auth-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}

.auth-footer a {
  font-size: 12.5px;
  color: var(--text-secondary);
  text-decoration: none;
}
.auth-footer a:hover { color: var(--ink); text-decoration: underline; }

/* ===================================================================
   Role chooser — only rendered when one email opens more than one live
   account (index/login_choose_role.html). Each row is itself the submit
   button, so picking a hat is one tap with no second confirm.
   =================================================================== */
.role-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.role-choice {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label chevron"
    "blurb chevron";
  align-items: center;
  gap: 2px 12px;
  width: 100%;
  padding: 16px 18px;
  text-align: start;
  background: var(--surface);
  border: 1px solid var(--line, var(--role-choice-line));
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.role-choice:hover,
.role-choice:focus-visible {
  border-color: var(--teal, var(--role-choice-selected-line));
  box-shadow: 0 0 0 3px rgba(31, 122, 140, .12);
  outline: none;
}

.role-choice-label {
  grid-area: label;
  font-size: 15px;
  font-weight: 650;
  color: var(--ink, var(--role-choice-label-ink));
}

.role-choice-blurb {
  grid-area: blurb;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.role-choice-chevron {
  grid-area: chevron;
  font-size: 18px;
  color: var(--text-secondary);
}

/* Not a status and not a theme colour — UAE Pass's own navy, the same
   reason .chip--stripe keeps Stripe's indigo. A federated sign-in button
   that isn't the provider's colour reads as a phishing page. */
.btn-uae-pass { background: var(--btn-uae-pass-bg); display: inline-block; }