/* ── Login Page ── */
/* t_b18d4d80d66b: lilypad/lotus brand backdrop — the company brand motif from the
   main landing (indivd.com), recolored to the Measured Leap deep-field treatment
   (static/img/lilypad/measured-leap-field-*.png). Sits behind the card; the card
   itself stays opaque surface-white so contrast/AA is unchanged. */
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-4);
  background-color: var(--color-field);
  background-image:
    linear-gradient(rgba(35, 0, 69, 0.30), rgba(35, 0, 69, 0.30)),
    url("/static/img/lilypad/measured-leap-field-1280x845.png");
  background-size: cover, cover;
  background-position: center, center;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  .login-container {
    background-image:
      linear-gradient(rgba(35, 0, 69, 0.30), rgba(35, 0, 69, 0.30)),
      url("/static/img/lilypad/measured-leap-field-2560x1690@2x.png");
  }
}

.login-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  width: 100%;
  max-width: 420px;
  text-align: center;
  color: var(--color-text);
}

/* ── Login card logo (t_811b458e division login, kept by t_e6271d749be7) ──
   The canary frog-face SVG stands in its dark-field rounded tile. The interim
   lockup-img treatment from the first cut is retired — the wordmark would
   duplicate the "Indivd Analytics" h1 right below it. */
.login-card .logo {
  width: 48px;
  height: 48px;
  background: var(--color-field);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}

.login-card .logo svg {
  width: 34px;
  height: 34px;
  display: block;
}

.login-card h1 {
  color: var(--color-text);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}

.login-card .subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-8);
}

/* ── Buttons — Measured Primary CTA tokens (t_78ccf4fe0246, chairman-approved
   2026-09-21). Same token block as console style.css — one CTA system across
   surfaces. This page stays self-contained: no app.css/theme.css button rules
   are loaded here. */
.btn {
  box-sizing: border-box; /* width:100% (btn-block) must INCLUDE padding or the button overflows the card's right edge */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) 22px;
  border-radius: var(--cta-radius, 10px);
  border: none;
  font-size: var(--font-size-sm);
  font-weight: var(--cta-weight, 600);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--cta-ease, 160ms ease-out), box-shadow var(--cta-ease, 160ms ease-out);
  min-height: 44px; /* AA touch target */
  text-decoration: none;
  box-shadow: var(--cta-shadow-rest, 0 1px 2px rgba(35, 0, 69, 0.10));
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── CTA tokens (t_78ccf4fe0246, chairman-approved) — defined LOCALLY so the
   login page stays self-contained (it loads theme.css but no other surface's
   tokens). Values mirror the console block exactly. */
:root {
  --cta-primary-bg: #6F00CE;
  --cta-primary-bg-hover: #6200B5;
  --cta-primary-bg-active: #55009B;
  --cta-primary-ink: #FFFFFF;
  --cta-radius: 10px;
  --cta-weight: 600;
  --cta-focus: 2px solid #6F00CE;
  --cta-focus-offset: 2px;
  --cta-shadow-rest: 0 1px 2px rgba(35, 0, 69, 0.10);
  --cta-shadow-hover: 0 4px 14px rgba(35, 0, 69, 0.16);
  --cta-ease: 160ms ease-out;
}

.btn-primary {
  background: var(--cta-primary-bg);
  color: var(--cta-primary-ink);
}

.btn-primary:active:not(:disabled) {
  background: var(--cta-primary-bg-active);
  box-shadow: none;
}

/* ── OIDC login button — Measured Leap CTA (t_e6271d749be7) ──────────────────
   Board-approved treatment: canary LEAP button with ink label + canonical frog
   mark in ink (deep-field rim keeps the Indivd purple family present). Rest and
   hover both pass AA — the previous purple-on-purple old-frog glyph is retired.
   Button label wording ("Sign in to Indivd Analytics") comes from t_811b458e.

   Markup is an <a> — use aria-hidden on decoration. The ::before embeds the
   canonical Measured Leap frog glyph (measured-leap-mark.svg, inlined so the
   button stays self-contained like the rest of this file). */
#oidc-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--cta-primary-bg);        /* #6F00CE — the Measured Primary */
  color: var(--cta-primary-ink);            /* white 600 label — 8.18:1 */
  box-shadow: var(--cta-shadow-rest);
}
#oidc-login-btn::before {
  content: "";
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2044%2044%22%3E%3Cg%20transform%3D%22translate%285.6%205.1%29%22%3E%3Cpath%20d%3D%22M%2014.369%209.114%20C%209.656%2011.269%207.379%2015.027%204.5%2018.95%20C%204.36%2019.14%204.503%2019.37%204.068%2019.268%20C%203.563%2018.642%207.304%2013.951%207.926%2013.274%20C%2011.13%209.787%2015.031%208.308%2019.358%206.7%20L%2021.874%205.096%20C%2020.269%207.702%2016.924%207.945%2014.369%209.114%20Z%20M%2019.644%209.007%20C%2020.984%208.714%2020.657%209.817%2019.561%2010.279%20C%2017.828%2011.009%2018.664%209.221%2019.644%209.007%20Z%20M%2020.338%2012.541%20C%2020.812%2013.383%2017.632%2014.507%2018.471%2012.728%20C%2018.801%2012.027%2020.079%2012.079%2020.338%2012.541%20Z%20M%2016.324%2010.667%20C%2017.261%2012.662%2013.392%2012.769%2014.726%2011.329%20C%2014.895%2011.146%2016.141%2010.536%2016.324%2010.667%20Z%20M%2015.1%2014.75%20C%2016.026%2014.613%2016.093%2015.972%2014.996%2016.326%20C%2013.258%2016.886%2014.164%2014.888%2015.1%2014.75%20Z%20M%2011.205%2014.713%20C%2010.878%2014.153%2011.511%2013.142%2012.085%2013.053%20C%2013.674%2012.805%2013.025%2015.328%2011.579%2015.026%20Z%20M%207.714%2011.99%20C%206.834%2011.767%207.566%2010.62%208.22%2010.519%20C%209.29%2010.354%208.643%2012.225%207.714%2011.989%20Z%20M%2011.029%209.153%20C%2010.719%208.147%2011.971%207.526%2012.801%207.965%20C%2013.116%208.425%2011.464%209.772%2011.029%209.153%20Z%20M%2015.324%2031.337%20C%2013.172%2031.782%2011.108%2032.167%208.938%2031.587%20L%209.188%2031.251%20L%2017.002%2030.746%20Z%20M%2027.834%204.421%20C%2027.961%204.446%2028.862%205.073%2028.893%205.129%20C%2028.993%205.312%2028.913%205.563%2028.929%205.769%20C%2028.024%204.997%2026.809%204.759%2025.906%205.684%20C%2025.451%206.151%2025.574%206.944%2024.899%206.781%20C%2024.779%205.288%2026.474%204.151%2027.834%204.421%20Z%20M%2027.498%207.621%20C%2026.375%208.764%2025.103%206.487%2026.685%206.318%20C%2027.392%206.242%2028.132%206.976%2027.498%207.621%20Z%20M%2029.098%2020.449%20C%2029.331%2019.506%2030.962%2019.821%2031.296%2019.324%20C%2031.932%2018.377%2030.412%2017.505%2029.602%2018.004%20C%2029.438%2018.106%2029.369%2018.459%2029.187%2018.599%20C%2028.544%2019.091%2027.834%2019.463%2027.252%2020.113%20C%2027.219%2019.011%2029.081%2018.659%2029.237%2018.139%20C%2029.605%2016.915%2027.907%2016.829%2027.257%2017.504%20C%2027.078%2017.69%2027.07%2017.977%2026.913%2018.171%20C%2025.988%2019.314%2024.198%2020.545%2024.895%2022.226%20L%2024.563%2022.308%20C%2024.121%2020.143%2025.111%2017.606%2026.155%2015.722%20C%2028.315%2011.822%2033.49%208.242%2032.962%203.322%20C%2032.642%200.335%2029.314%201.828%2028.785%201.357%20C%2028.705%201.285%2028.785%200.816%2028.425%200.622%20C%2027.839%200.412%2027.248%200.218%2026.652%200.04%20C%2024.642%20-0.266%2024.347%201.246%2023.228%202.318%20C%2021.815%203.671%2016.398%204.265%2014.316%204.842%20C%2010.626%205.863%207.63%207.439%205.682%2010.85%20C%204.825%2012.35%204.413%2014.091%203.479%2015.556%20C%203.305%2015.434%203.392%2015.016%203.415%2014.816%20C%203.543%2013.688%205.279%2010.881%205.945%209.764%20C%206.223%209.296%206.77%209.137%206.598%208.409%20C%206.556%208.232%205.485%208.017%205.276%208.002%20C%201.522%207.744%200.144%2014.874%200.028%2017.659%20C%20-0.014%2018.677%20-0.211%2021.163%201.544%2020.362%20C%202.148%2020.087%202.046%2019.128%202.554%2018.764%20C%202.539%2019.651%202.084%2021.691%202.543%2022.404%20C%202.973%2023.07%206.251%2024.139%207.097%2024.579%20C%207.527%2024.801%208.369%2025.601%208.557%2025.656%20C%209.037%2025.796%2011.017%2025.346%2011.703%2025.338%20C%2012.003%2025.335%2012.35%2025.514%2012.712%2025.521%20C%2014.302%2025.548%2015.766%2025.483%2017.338%2025.852%20L%2015.736%2026.026%20C%2013.557%2025.609%2011.415%2025.66%209.24%2026.069%20C%206.933%2026.503%202.934%2027.993%204.064%2031%20C%205.665%2032.027%207.047%2033.05%208.933%2033.535%20C%2011.729%2034.254%2016.535%2034.025%2019.44%2033.615%20C%2020.456%2033.473%2023.78%2032.315%2024.536%2032.797%20C%2024.716%2032.911%2024.611%2033.743%2025.486%2033.798%20C%2027.139%2033.901%2027.42%2031.552%2025.974%2031.421%20C%2025.35%2031.365%2024.465%2031.695%2023.635%2031.589%20C%2023.402%2031.559%2023.148%2031.499%2023.387%2031.253%20C%2024.585%2030.76%2025.621%2030.194%2026.989%2030.418%20C%2027.481%2030.498%2027.809%2030.901%2028.345%2030.925%20C%2030.128%2031.006%2030.015%2028.412%2028.495%2028.218%20C%2027.657%2028.11%2027.615%2028.61%2027.343%2028.652%20C%2026.738%2028.746%2025.526%2028.345%2024.838%2028.392%20C%2024.012%2028.448%2022.847%2028.96%2022.043%2029.225%20C%2021.951%2028.776%2022.157%2028.935%2022.374%2028.806%20C%2022.834%2028.534%2025.046%2027.8%2025.508%2027.757%20C%2025.791%2027.731%2026.14%2027.919%2026.496%2027.892%20C%2028.062%2027.776%2027.326%2025.124%2025.723%2025.584%20C%2025.293%2025.708%2025.367%2026.144%2024.943%2026.317%20C%2024.216%2026.613%2023.176%2026.482%2022.313%2026.882%20C%2021.52%2027.249%2021.133%2027.977%2020.533%2028.551%20C%2020.717%2027.789%2021.343%2026.983%2021.174%2026.144%20C%2021.121%2025.882%2020.159%2024.457%2019.928%2024.177%20C%2018.398%2022.323%2013.683%2020.315%2011.325%2019.825%20C%2010.593%2019.673%209.838%2019.637%209.105%2019.522%20C%2011.815%2019.417%2011.087%2019.049%209.552%2017.894%20C%209.395%2017.777%209.025%2017.553%209.523%2017.584%20C%2010.666%2017.764%2011.338%2019.275%2011.97%2019.684%20C%2013.397%2020.607%2016.296%2020.851%2018.336%2022.234%20C%2018.71%2022.487%2018.899%2023.034%2019.4%2022.961%20C%2019.597%2022.931%2021.137%2021.855%2021.177%2021.685%20C%2021.009%2020.093%2020.664%2018.526%2020.397%2016.952%20C%2020.337%2016.594%2020.497%2016.752%2020.697%2016.738%20C%2020.956%2017.961%2021.246%2019.185%2021.493%2020.412%20C%2021.577%2020.832%2021.493%2021.262%2021.578%2021.677%20C%2022.045%2023.946%2023.741%2024.744%2025.952%2024.294%20C%2027.132%2024.054%2030.239%2021.377%2031.02%2021.462%20C%2031.509%2021.515%2031.859%2022.217%2032.64%2021.562%20C%2033.593%2020.762%2032.297%2019.582%2031.258%2019.696%20C%2030.605%2019.769%2029.858%2020.524%2029.098%2020.449%20Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#oidc-login-btn:hover:not(:disabled) {
  background: var(--cta-primary-bg-hover);  /* value step #6200B5 (9.60:1) */
  box-shadow: var(--cta-shadow-hover);
  transform: translateY(-1px);
}
#oidc-login-btn:active:not(:disabled) {
  background: var(--cta-primary-bg-active);
  box-shadow: none;
  transform: none;
}
#oidc-login-btn:focus-visible {
  outline: var(--cta-focus);
  outline-offset: var(--cta-focus-offset);
}

/* ── "Use a different account" (t_f18e42efcc4f) ─────────────────────────────
   Secondary account-switch affordance on the login page. Forcing the IdP
   account picker (prompt=select_account) means the user can always switch
   identities even when an IdP session is still cached. Rendered as a quiet
   text link below the primary CTA. */
.switch-account-btn {
  display: block;
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  min-height: 44px; /* AA touch target */
  line-height: 44px;
}
.switch-account-btn:hover {
  color: var(--color-primary);
}
.switch-account-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── "Request a demo / see the platform preview" (t_5a944e00, T2 — B-P2) ───
   A SECONDARY, non-auth evaluation affordance for prospects on the login page.
   Quiet-text and visually subordinate to the primary sign-in CTA: this is a
   link to the landing #start / proof-of-value entry, never an auth action and
   never an access grant. Keeps "Explore the platform →" from dead-ending a
   prospect on a bare credential wall. */
.request-demo-btn {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-decoration: none;
  line-height: 1.4;
}
.request-demo-btn:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.request-demo-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* ── Mobile hit-area only (t_247a9edb, WCAG 2.5.8) ──────────────────────────
   The request-demo link intentionally renders as quiet xs/muted text (~17px
   tall) below the sign-in CTA — but on <768px it must still expose a >=44px
   tappable target. min-height + flex centring enlarge ONLY the invisible hit
   box (no padding options/background/border): visible typography/colour stay
   identical and the card's geometry is unchanged. Desktop (>767px) keeps the
   previous single row with no extra hit area. */
@media (max-width: 767px) {
  .request-demo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
}

.btn-primary:hover:not(:disabled) {
  background: var(--cta-primary-bg-hover);  /* value step #6200B5 — CTA hierarchy hover */
  box-shadow: var(--cta-shadow-hover);
  transform: translateY(-1px);
}

.btn-primary:focus-visible {
  outline: var(--cta-focus);
  outline-offset: var(--cta-focus-offset);
}

.btn-block {
  width: 100%;
}

.login-card .btn {
  margin-top: var(--space-4);
}

/* ── Token input ── */
#token-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  min-height: 44px; /* AA touch target */
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  margin-bottom: var(--space-2);
}

#token-input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

#token-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.divider {
  position: relative;
  text-align: center;
  margin: var(--space-5) 0;
}

.divider span {
  background: var(--color-surface);
  padding: 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  position: relative;
  z-index: 1;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
}

.error-msg {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: rgba(255,107,107,0.1);
  border-radius: var(--radius-md);
}

/* T1 (t_ccd050cc): escalation + Re-check surface under a state-aware denial.
   Rendered by login.js into #login-escalation; links/button sit below the
   message. Subordinate (secondary) so it never outshines the Sign-in CTA. */
.login-escalation {
  color: var(--color-text-secondary, #888);
  font-size: var(--font-size-sm);
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: transparent;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.login-escalation a {
  color: var(--color-link, #6F00CE);
  text-decoration: underline;
}
.btn-secondary {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: center;
}
.btn-secondary:hover { background: rgba(111,0,206,0.06); }
/* ══════════════════════════════════════════════════════════════════════════
   EMAIL-FIRST IdP-routing login (t_ef788bd4) — STRUCTURAL layout only.
   Behaviour/flow owned by coder (login.html + login.js); the common-provider
   button marks / Google / Microsoft / Zitadel visuals are owned by brand-designer
   (card t_053d4d4a) and land on top of these structural rules. These reuse the
   existing Measured Primary token block — no new component system.
   ══════════════════════════════════════════════════════════════════════════ */

.login-field-label {
  display: block;
  text-align: left;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
}

#login-email {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  margin-bottom: 0;
}
#login-email:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
#login-email::placeholder { color: var(--color-text-muted); opacity: 1; }

#login-continue { margin-top: var(--space-3); }

.login-divider {
  position: relative;
  text-align: center;
  margin: var(--space-6) 0 var(--space-3);
}
.login-divider span {
  background: var(--color-surface);
  padding: 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  position: relative;
  z-index: 1;
}
.login-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
}

/* Common-provider quick row (Phase A). Structural grid; the per-provider marks
   and words are the brand-designer's token pass (t_053d4d4a). */
.common-provider-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.idp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--cta-radius, 10px);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--cta-weight, 600);
  cursor: pointer;
  transition: background var(--cta-ease, 160ms ease-out), box-shadow var(--cta-ease, 160ms ease-out);
}
.idp-btn:hover { background: rgba(111,0,206,0.06); box-shadow: var(--cta-shadow-hover, 0 4px 14px rgba(35,0,69,.16)); }
.idp-btn:focus-visible { outline: var(--cta-focus, 2px solid #6F00CE); outline-offset: 2px; }

/* Phase B render surface. */
#login-phase-b { margin-top: var(--space-4); }
#login-phase-b .login-org-context {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
}
.login-phase-hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}
#login-phase-b .idp-login-btn { margin-top: 0; }
#login-phase-b .btn + .btn { margin-top: var(--space-3); }