/*
 * Atom B2B reskin - the shared code sign-in page (views/ld-login/signin.html) for a B2B supplier (LdBrand::b2b()).
 * Loaded after /scripts/css/client/learndirect/ld-login.css and re-colours it from the supplier's saved colours
 * (--b-* from AtomTheme::head()), the way the brand forks' ld-login-theme.css files do.
 * Adds the white logo plate, the Light / Dark / Device switch and dark mode (canvas boards Main BMet + Dark-signin-bmet).
 */

.ldl.ldl-brand-b2b {
  --navy: var(--b-btn); --royal: var(--b-link); --mint: var(--b-hi); --info-soft: var(--b-soft);
  --focus: 0 0 0 3px #ffffff, 0 0 0 6px var(--b-btn);
  --pulse: var(--b-glow); --pulse-0: rgba(0, 0, 0, 0);
  --hero: var(--b-band-bg);
}
.ldl.ldl-brand-b2b .ldl-headline em { background: linear-gradient(90deg, var(--b-hi), #ffffff); -webkit-background-clip: text; background-clip: text; }
.ldl.ldl-brand-b2b .ldl-brand::after { background: radial-gradient(closest-side, var(--b-glow), rgba(0, 0, 0, 0)); opacity: .3; }
.ldl.ldl-brand-b2b .ldl-stepper i.on { background: linear-gradient(120deg, var(--b-btn) 0%, var(--b-hi) 100%); }
.ldl.ldl-brand-b2b .ldl-account-ini { background: linear-gradient(140deg, var(--b-btn) 0%, var(--b-band) 60%, var(--b-side2) 100%); }
.ldl.ldl-brand-b2b .ldl-dest-box { border-color: var(--b-hi); }

/* Supplier logos are drawn for white: a white plate on the brand panel. No logo: the name in text. */
.ldl .ldl-plate { align-self: flex-start; display: inline-flex; align-items: center; background: #fff; border-radius: 14px; padding: 10px 16px; }
.ldl .ldl-plate img { height: 56px; width: auto; max-width: 260px; object-fit: contain; display: block; }
/* The supplier's logo for dark backgrounds (AtomBrandLogo) replaces the plate in dark mode */
.ldl .ldl-logo-dk { display: none; align-self: flex-start; height: 56px; width: auto; max-width: 260px; object-fit: contain; }
:root[data-theme="dark"] .ldl .ldl-plate.ldl-has-dk { display: none; }
:root[data-theme="dark"] .ldl .ldl-logo-dk { display: block; }
.ldl .ldl-wordmark-solo { color: #fff; max-width: 18ch; }

/* Light / Dark / Device switch (atom-theme.js fills #ldl-tr), top right of the form side. */
.ldl .ldl-tr { position: absolute; top: 16px; right: 24px; display: flex; align-items: center; gap: 10px; }
.ldl .ldl-tr .atom-tg { background: var(--surface-2); border-color: var(--border); }
.ldl .ldl-tr .atom-tg button { color: var(--text-3); }
.ldl .ldl-tr .atom-tg button[aria-pressed="true"] { background: #fff; color: #0c1330; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.ldl .ldl-tr .atom-tg svg { width: 16px; height: 16px; stroke-width: 1.8; }

/* The sign-in link pages render inside notemplate.html's wrappers (.page-wrapper top padding, .container width): let the page fill the window. */
:has(.ldl.ldl-brand-b2b) { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; }
/* Long site addresses on the "Next time you sign in" card wrap instead of pushing the page wide. */
/* the masked email moves to its own line as a whole and only breaks when it is wider than the card */
.ldl.ldl-brand-b2b .ldl-howto strong, .ldl.ldl-brand-b2b .ldl-sub strong { overflow-wrap: anywhere; display: inline-block; max-width: 100%; }

@media (max-width: 860px) {
  .ldl .ldl-plate img, .ldl .ldl-logo-dk { height: 40px; }
  .ldl .ldl-tr { position: static; align-self: flex-end; margin: -6px 0 -10px; }
}

/* ---------- Dark: Wayne's palette (bg #05061F, card #0A0E33). Meaning colours keep their meaning. ---------- */
:root[data-theme="dark"], :root[data-theme="dark"] body { background: #05061F !important; }
:root[data-theme="dark"] .ldl.ldl-brand-b2b {
  --bg: #05061F; --surface: #0A0E33; --surface-2: #121845; --border: rgba(255, 255, 255, .10); --border-strong: rgba(255, 255, 255, .22);
  --text: #E8EBF7; --text-2: #C9CFE6; --text-3: #9AA6C8; --text-4: #6F7AA3;
  --danger: #FF6B81; --danger-soft: rgba(255, 107, 129, .14); --info-soft: var(--b-soft);
  --success: #2FBF7F; --success-soft: rgba(47, 191, 127, .16); --warning: #FFC94D; --warning-soft: rgba(255, 201, 77, .14);
  --focus: 0 0 0 3px #05061F, 0 0 0 6px var(--b-link); --e-2: 0 8px 24px -10px rgba(0, 0, 0, .6);
  --navy: var(--b-head); --royal: var(--b-link); --pri: var(--b-btn); --priH: var(--b-btn-h); --priI: var(--b-btn-ink);
  color-scheme: dark;
}
:root[data-theme="dark"] .ldl.ldl-brand-b2b a:hover, :root[data-theme="dark"] .ldl.ldl-brand-b2b .ldl-link:hover { color: #fff; }
:root[data-theme="dark"] .ldl.ldl-brand-b2b .ldl-btn-primary { background: var(--pri); color: var(--priI); }
:root[data-theme="dark"] .ldl.ldl-brand-b2b .ldl-btn-primary:hover { background: var(--priH); color: var(--priI); }
:root[data-theme="dark"] .ldl.ldl-brand-b2b .ldl-btn-quiet { background: transparent; }
:root[data-theme="dark"] .ldl.ldl-brand-b2b .ldl-switch-opt.is-on { background: #fff; color: #0c1330; box-shadow: none; }
:root[data-theme="dark"] .ldl.ldl-brand-b2b .ldl-dest-icon { background: var(--pri); color: var(--priI); }
:root[data-theme="dark"] .ldl.ldl-brand-b2b .ldl-dest-box { border-color: var(--border-strong); }
:root[data-theme="dark"] .ldl.ldl-brand-b2b .ldl-notice-error { color: #FFB3C0; border-color: rgba(255, 107, 129, .35); }
:root[data-theme="dark"] .ldl.ldl-brand-b2b .ldl-tr .atom-tg { background: rgba(255, 255, 255, .08); }