/* =========================================================
   @tidal-connect-plus/chrome — LOGIN surface
   Second pinned shared surface (after the chrome). Self-contained + BEM-scoped.

   Depends ONLY on the canonical kit tokens.css (brand / colour / font / radius /
   duration tokens) — NEVER on tidal-design.css. Every class is .tdl-login__* so it
   shares ZERO names with tidal-design.css's flat .tdl-card / .tdl-btn / .tdl-alert /
   .tdl-eyebrow / .tdl-label / .tdl-body-sm / .tdl-muted (and the generic .title /
   .body inside its alert). A product still loading tidal-design.css cannot collide
   with anything here.

   Login-only design tokens are declared SCOPED TO .tdl-login (never :root) and under
   private --tdl-login-* names, so they neither leak nor collide with a host design.css
   :root token of the same purpose. They are NOT promoted into canonical tokens.css.
   ========================================================= */

.tdl-login {
  /* login-scoped design tokens (off :root, private names — no leak, no collision).
     Canonical tokens used below (--tdl-bg / --tdl-accent / --tdl-accent-fg / --tdl-fg-2 /
     --tdl-fg-3 / --tdl-fg-4 / --tdl-surf-1 / --tdl-hairline / --tdl-hairline-2 /
     --tdl-radius-md / --tdl-radius-lg / --tdl-dur-fast / --tdl-warn / --tdl-font-body /
     --tdl-font-display) all come from the kit's tokens.css. */
  --tdl-login-fs-2xs:           10px;
  --tdl-login-fs-sm:            14px;
  --tdl-login-lh-body:          1.55;
  --tdl-login-tracking-eyebrow: 0.18em;
  --tdl-login-tracking-label:   0.12em;
  --tdl-login-hero-glow:
    radial-gradient(70% 90% at 95% 100%,
      var(--tdl-accent) 0%,
      rgba(255, 64, 0, 0.45) 18%,
      rgba(255, 64, 0, 0.08) 45%,
      rgba(0, 0, 0, 0) 65%),
    var(--tdl-bg);

  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--tdl-bg);
}

.tdl-login__card {
  width: 100%;
  max-width: 480px;
  text-align: center;
  background: var(--tdl-login-hero-glow);
  border: 1px solid var(--tdl-hairline);
  border-radius: var(--tdl-radius-lg);
  overflow: hidden;
  padding: 56px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tdl-login__eyebrow {
  font-family: var(--tdl-font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--tdl-login-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tdl-accent);
  margin-bottom: 18px;
}

.tdl-login__logo {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
}

.tdl-login__body {
  font-family: var(--tdl-font-body);
  font-size: var(--tdl-login-fs-sm);
  line-height: var(--tdl-login-lh-body);
  color: var(--tdl-fg-2);
  margin-top: 16px;
  margin-bottom: 28px;
  max-width: 38ch;
}
.tdl-login__body--with-alert { margin-bottom: 18px; }

/* —— Alert (scoped; replaces flat .tdl-alert/.tdl-alert-warn + bare .title/.body) —— */
.tdl-login__alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  margin-bottom: 28px;
  padding: 14px 16px;
  border: 1px solid var(--tdl-hairline-2);
  border-left: 3px solid var(--tdl-fg-4);
  border-radius: var(--tdl-radius-md);
  background: var(--tdl-surf-1);
}
.tdl-login__alert--warn { border-left-color: var(--tdl-warn); }
.tdl-login__alert--warn .tdl-login__alert-title { color: var(--tdl-warn); }
.tdl-login__alert-title {
  font-family: var(--tdl-font-display);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tdl-login__alert-body {
  font-family: var(--tdl-font-body);
  font-size: var(--tdl-login-fs-sm);
  color: var(--tdl-fg-2);
  margin-top: 4px;
}

/* —— Button (scoped; replaces flat .tdl-btn/.tdl-btn-primary/.tdl-btn-lg) ——
   Login uses exactly one button: primary, large. Flattened into one rule. */
.tdl-login__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--tdl-font-display);
  font-weight: 700;
  text-transform: uppercase;
  padding: 14px 22px;
  font-size: 12px;
  letter-spacing: 0.14em;
  border: 1px solid var(--tdl-accent);
  border-radius: var(--tdl-radius-md);
  background: var(--tdl-accent);
  color: var(--tdl-accent-fg);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: background var(--tdl-dur-fast), border-color var(--tdl-dur-fast),
              color var(--tdl-dur-fast), opacity var(--tdl-dur-fast), transform var(--tdl-dur-fast);
}
.tdl-login__btn:hover:not(:disabled) { background: #ff5a1f; border-color: #ff5a1f; }
.tdl-login__btn:focus-visible { outline: 2px solid var(--tdl-accent); outline-offset: 2px; }
.tdl-login__btn:active:not(:disabled) { transform: translateY(1px); }
.tdl-login__btn:disabled,
.tdl-login__btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }

/* —— Footer label (scoped; replaces flat .tdl-label.tdl-muted) —— */
.tdl-login__footer {
  font-family: var(--tdl-font-display);
  font-weight: 900;
  font-size: var(--tdl-login-fs-2xs);
  letter-spacing: var(--tdl-login-tracking-label);
  text-transform: uppercase;
  color: var(--tdl-fg-3);
  margin-top: 22px;
}