/* =============================================================================
   login.css — full-screen split login page (left form / right illustration).
   Scoped under ``body.login-split`` so it only restyles the login route and
   never leaks into the rest of the app. Loaded AFTER styles.css, so these
   rules override the shared ``.auth-*`` / ``.input`` / ``.btn`` defaults for
   this page only. All functional DOM hooks (IDs + the ``.auth-title`` /
   ``.auth-subtitle`` / ``.auth-card-head`` / ``.login-provider-card`` /
   ``.login-workspace-*`` classes auth.js drives) are preserved — this file is
   presentation only.
   ========================================================================== */

body.login-split{
  /* Design tokens (brand indigo family + neutral field palette). */
  --indigo-deep:#0d0d2b;
  --indigo:#3730a3;
  --indigo-hover:#2d2585;
  --indigo-bright:#6366f1;
  --fg:#1a1a2e;
  --fg-muted:#5a5a7a;
  --field-fill:#f0f0f8;
  --field-line:#e2e2ee;

  margin:0;
  min-height:100vh;
  display:flex;
  align-items:stretch;
  background:#fff;
  color:var(--fg);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Wordmark shared by both panels. */
.login-split .login-wordmark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--fg);
}
.login-split .login-ymark{
  width:28px;
  height:28px;
  flex:0 0 auto;
  color:var(--fg);
}
.login-split .login-wordmark-text{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500;
  font-size:1.55rem;
  letter-spacing:0.08em;
  line-height:1;
  color:var(--fg);
}

/* ---------------------------------------------------------------- LEFT PANEL */
.login-split .login-left{
  flex:0 0 44%;
  max-width:44%;
  background:#fff;
  display:flex;
  flex-direction:column;
  padding:40px 44px 28px;
  box-sizing:border-box;
}

.login-split .login-brand{
  flex:0 0 auto;
}
/* Centred brand directly above the heading. */
.login-split .login-brand--centered{
  display:flex;
  justify-content:center;
  margin:0 0 22px;
}
.login-split .login-brand--centered .login-wordmark-text{
  font-size:1.7rem;
}
.login-split .login-brand--centered .login-ymark{
  width:30px;
  height:30px;
}

/* Neutralise the shared .auth-shell box model (styles.css gives it a 400px
   max-width + centring + padding meant for the old centred card); here it only
   carries the .auth-redirect-pending visibility toggle. */
.login-split .login-main.auth-shell{
  max-width:none;
  margin:0;
  padding:24px 0;
}

/* Centred form column. */
.login-split .login-main{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  padding:24px 0;
}
.login-split .login-formwrap{
  width:100%;
  max-width:380px;
  margin:0 auto;
}

.login-split .auth-card-head{
  margin:0 0 24px;
}
.login-split .auth-title{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:600;               /* more weight so the serif heading reads clearly */
  font-size:2.05rem;
  line-height:1.12;
  letter-spacing:0.005em;
  color:var(--fg);
  margin:0 0 6px;
}
.login-split .auth-subtitle{
  font-size:0.875rem;
  color:var(--fg-muted);
  margin:0;
  line-height:1.45;
}

/* Fields. */
.login-split .auth-form{
  display:block;
}
/* styles.css makes #loginCredentials a grid with a 14px gap, which stacked on
   top of the label's margin and left a large label→field gap on login only.
   Make it block so login matches the tight register label→field spacing. */
.login-split #loginCredentials{
  display:block;
  gap:0;
}
.login-split .label{
  display:block;
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--fg-muted);
  margin:16px 0 4px;          /* tight gap between the label and its field */
}
/* Keep parenthetical hints inside a label in normal case (not uppercased). */
.login-split .label .cqc-autofill-hint,
.login-split .label .muted{ text-transform:none; letter-spacing:normal; }
.login-split #loginCredentials > .label:first-child{ margin-top:0; }

.login-split .input{
  width:100%;
  max-width:380px;
  height:40px;
  box-sizing:border-box;
  background:var(--field-fill);
  background-image:none;          /* kill the base gradient */
  border:1px solid transparent;   /* borderless at rest — border shows on focus */
  border-radius:6px;
  padding:0 14px;
  font-family:inherit;
  font-size:0.9375rem;            /* 15px, Inter */
  font-weight:400;
  color:var(--fg);
  line-height:1.4;
  box-shadow:none;                /* flat — no inset "3D" highlight */
  transition:border-color .14s, box-shadow .14s, background .14s;
}
.login-split .input::placeholder{ color:#a8a8c0; font-weight:400; }
/* Dropdowns ("Your position") — same rounded, borderless-at-rest control as the text inputs (not the native
   square-edged select): native arrow hidden, indigo chevron, placeholder grey while nothing is chosen. Stays a real
   <select> for keyboard / screen readers / mobile pickers. */
.login-split select.input{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%234338ca'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px 16px;
}
.login-split select.input:focus,
.login-split select.input:focus-visible{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%234338ca'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px 16px;
}
.login-split select.input:invalid{ color:#a8a8c0; }
.login-split select.input option{ color:var(--fg); }

/* App-styled dropdown (auth.js _enhanceAuthSelect) — rounded button + floating rounded listbox, replacing the OS-drawn
   square list of a native <select>. The real <select> stays in the DOM, visually hidden. */
.login-split .authsel{ position:relative; width:100%; }
.login-split .authsel-native{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; left:0; top:0;
}
.login-split .authsel-btn{
  display:flex; align-items:center; text-align:left; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%234338ca'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px 16px;
}
.login-split .authsel-btn:focus,
.login-split .authsel-btn:focus-visible{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%234338ca'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px 16px;
}
.login-split .authsel.open .authsel-btn{ background-color:#fff; border-color:var(--indigo-bright); }
.login-split .authsel-btn.is-placeholder{ color:#a8a8c0; }
.login-split .authsel-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.login-split .authsel-menu{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:50;
  margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid #e2e4ef; border-radius:12px;
  box-shadow:0 18px 40px -16px rgba(18,10,143,0.28);
  max-height:min(300px, 60vh); overflow:auto;
}
.login-split .authsel-menu[hidden]{ display:none; }
.login-split .authsel-opt{
  padding:10px 12px; border-radius:8px; cursor:pointer;
  font-size:0.9375rem; line-height:1.35; color:var(--fg);
}
.login-split .authsel-opt.is-active{ background:#f0f1fb; }
.login-split .authsel-opt[aria-selected="true"]{ background:#e6e8fb; color:var(--indigo); font-weight:600; }
.login-split .input:focus,
.login-split .input:focus-visible{
  outline:none;
  background:#fff;
  border-color:var(--indigo-bright);
  box-shadow:0 0 0 3px rgba(99,102,241,0.18);
}

/* Forgot-password row — left-aligned, sits just above the submit button. */
.login-split .login-forgot-row{
  display:flex;
  justify-content:flex-start;
  margin:12px 0 0;
}
.login-split .login-forgot-row .auth-link{ color:#4f46e5; }
.login-split .auth-link{
  color:var(--indigo-bright);
  font-size:0.8125rem;
  font-weight:500;
  text-decoration:none;
}
.login-split .auth-link:hover{ text-decoration:underline; }
.login-split .auth-linkbtn{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  color:var(--indigo-bright);
  font:inherit;
  font-size:0.8125rem;
  font-weight:500;
}
.login-split .auth-linkbtn:hover{ text-decoration:underline; }

/* Primary submit. */
.login-split .auth-submit{
  width:100%;
  margin-top:18px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--indigo);
  border:1px solid var(--indigo);
  border-radius:6px;
  color:#fff;
  font-family:inherit;
  font-size:0.95rem;
  font-weight:600;
  letter-spacing:0.01em;
  box-shadow:none;
  cursor:pointer;
  transition:background .14s, border-color .14s;
}
.login-split .auth-submit:hover{
  background:var(--indigo-hover);
  border-color:var(--indigo-hover);
  transform:none;
}
.login-split .auth-submit:disabled{
  opacity:0.65;
  cursor:default;
}
/* Visible keyboard focus for the action controls (a11y). */
.login-split .auth-submit:focus-visible,
.login-split .login-signup-btn:focus-visible,
.login-split .cqc-lookup-btn:focus-visible{
  outline:2px solid var(--indigo);
  outline-offset:2px;
}

/* Error box. */
.login-split .auth-error{
  margin:14px 0 0;
  padding:10px 12px;
  border-radius:6px;
  background:#fdecec;
  border:1px solid #f5c2c2;
  color:#9f1239;
  font-size:0.8125rem;
  line-height:1.4;
}

/* Remember-me. */
.login-split .auth-remember-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  font-size:0.875rem;          /* 14px */
  color:#1a1a2e;
  cursor:pointer;
}
.login-split .auth-remember-row input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:#3730a3;
}
.login-split .auth-remember-hint{
  margin:6px 0 0 24px;
  font-size:0.8125rem;         /* 13px */
  color:#6e6e8a;               /* darkened from #8888a8 to meet WCAG AA (4.9:1) */
  line-height:1.4;
}

/* 2FA challenge. */
.login-split .tfa-recovery-toggle{ margin-top:12px; font-size:0.8125rem; }
.login-split .tfa-recovery-toggle summary{
  cursor:pointer;
  color:var(--indigo-bright);
  font-weight:500;
}
.login-split .hint{
  font-size:0.8125rem;
  color:var(--fg-muted);
  margin:0 0 12px;
  line-height:1.45;
}

/* Workspace picker (provider cards). Inherit the shared card styling from
   styles.css; just realign the heading typography + widen the column a touch. */
.login-split.workspace-picker .login-formwrap{ max-width:424px; }
.login-split .login-workspace-title{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:400;
  font-size:1.6rem;
  color:var(--fg);
  margin:0 0 4px;
}
.login-split .login-workspace-subtitle{
  font-size:0.8125rem;
  color:var(--fg-muted);
  margin:0;
}

/* Footer — "Don't have an account?" prompt + Sign up / free trial button. */
.login-split .login-foot{
  flex:0 0 auto;
  max-width:384px;
  margin:20px auto 0;
  width:100%;
  text-align:center;
  font-size:0.8125rem;
  color:var(--fg-muted);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
/* Space below the prompt so the button's focus outline never overlaps it. */
.login-split .login-foot-prompt{ display:block; margin-bottom:10px; }
/* Secondary (outline) sign-up button. */
.login-split .login-signup-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  /* Fixed min-width so the short "Log in" (register page) and the longer
     "Sign up / free trial" (login page) render at the same size. */
  min-width:184px;
  padding:0 14px;
  border:1.5px solid var(--indigo);
  border-radius:6px;
  background:#fff;
  color:var(--indigo);
  font-family:inherit;
  font-size:0.9rem;
  font-weight:600;
  text-decoration:none;
  transition:background .14s, color .14s;
}
.login-split .login-signup-btn:hover{
  background:var(--indigo);
  color:#fff;
}
.login-split .login-foot-demo{ font-size:0.75rem; }

/* ----------------------------------------------- REGISTER-SPECIFIC (shared) */
/* The register form is wider (two-column name pairs) than the login card. */
/* Register (both signup tabs) uses a wider column than the login card so the
   two-column name pairs have room; its fields fill the column (the 380px cap is
   a login-only spec, lifted here). */
.login-split .login-formwrap--wide{ max-width:540px; }
.login-split--signup .input{ max-width:none; }

/* Signup-type tab strip — brand the active tab. */
.login-split .auth-tab.is-active{ color:var(--indigo); }

/* CQC "Look up" button sits beside its input — match field height + radius. */
.login-split .cqc-lookup-btn{
  min-height:40px;
  border-radius:6px;
  border:1.5px solid var(--field-line);
  background:#fff;
  color:var(--indigo);
  font-weight:600;
  box-shadow:none;
}
.login-split .cqc-lookup-btn:hover{
  border-color:var(--indigo);
  background:#fff;
  transform:none;
}

/* Locked (readonly) CQC-sourced inputs — clearly recessed + a padlock glyph so
   they're unmistakably distinct from the editable fields the user must type in. */
.login-split .input[readonly]{
  background-color:#e2e4ef;
  color:#6e6e8a;
  cursor:not-allowed;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236e6e8a'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='5'%20y='11'%20width='14'%20height='9'%20rx='2'/%3E%3Cpath%20d='M8%2011V8a4%204%200%200%201%208%200v3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:15px 15px;
  padding-right:36px;
}
.login-split .input[readonly]::placeholder{ color:#9a9ab5; }

/* Field-status badge in labels — the SAME "Read-only" cue on every official CQC-sourced field on both signup tabs
   (pairs with the recessed fill + padlock on .input[readonly]). */
.login-split .field-badge{
  display:inline-block;
  vertical-align:middle;
  margin-left:6px;
  padding:1px 6px;
  border-radius:4px;
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:0.04em;
  line-height:1.6;
}
.login-split .field-badge--readonly{ background:#e2e4ef; color:#565676; }
.login-split .field-badge[hidden]{ display:none; }
.login-split .cqc-readonly-note{ margin:0 0 4px; }

/* Password show/hide toggle. */
.login-split .login-pw-wrap{ position:relative; }
.login-split .login-pw-wrap .input{ padding-right:44px; }
.login-split .login-pw-toggle{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:none;
  border:none;
  border-radius:0 6px 6px 0;
  color:#6e6e8a;
  cursor:pointer;
}
.login-split .login-pw-toggle:hover{ color:var(--fg); }
.login-split .login-pw-toggle:focus-visible{ outline:2px solid var(--indigo); outline-offset:-2px; }
.login-split .pw-icon{ display:block; }
.login-split .pw-icon[hidden]{ display:none; }

/* Authorisation attestation row. */
.login-split .auth-authorisation{
  margin-top:14px;
  font-size:0.8125rem;
  line-height:1.45;
  color:var(--fg-muted);
}
.login-split .auth-authorisation input[type="checkbox"]{
  width:16px;
  height:16px;
  margin-top:1px;
  accent-color:var(--indigo);
}
.login-split .auth-authorisation a{ color:var(--indigo-bright); font-weight:500; }
.login-split .required-star{ color:#d6336c; }
.login-split .auth-captcha{ margin-top:14px; }
.login-split .cqc-lookup-status{ margin-top:8px; }

/* Bottom meta nav (Status · Privacy · Terms · Support). */
.login-split .login-nav{
  flex:0 0 auto;
  margin-top:24px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 14px;
  font-size:0.75rem;
}
.login-split .login-nav a{
  color:var(--fg-muted);
  text-decoration:none;
}
.login-split .login-nav a:hover{ color:var(--fg); text-decoration:underline; }

/* --------------------------------------------------------------- RIGHT PANEL */
.login-split .login-right{
  flex:1 1 56%;
  position:relative;
  overflow:hidden;
  background-color:#eef0ec;
  background-image:url('/ui/static/assets/login-splash.jpg');
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
}
/* Gradient so the top-left mark stays legible over the illustration. */
.login-split .login-right::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(240,242,238,0.72) 0%, transparent 55%);
  pointer-events:none;
}
.login-split .login-right-brand{
  position:absolute;
  top:40px;
  left:44px;
  z-index:1;
}
.login-split .login-right-brand .login-wordmark-text{
  font-weight:600;
  color:var(--fg);
}
.login-split .login-right-tag{
  margin:8px 0 0 38px;
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:0.8rem;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(26,26,46,0.6);
}

/* ------------------------------------------------------------------- MOBILE */
/* Drop the illustration panel and give the form the full screen (the centred
   brand above the heading carries it). The login page switches at 1120px; the
   sign-up page drops its image even sooner (1320px) since its form is denser. */
@media (max-width:1120px){
  .login-split .login-right{ display:none; }
  .login-split .login-left{
    flex:1 1 100%;
    max-width:100%;
    padding:32px 22px 24px;
  }
  .login-split .login-main{ padding:20px 0; }
}
/* Sign-up page: drop the image much sooner (its form column is wider, so the
   split only shows when the 44% panel can hold the ~540px form). */
@media (max-width:1440px){
  .login-split--signup .login-right{ display:none; }
  .login-split--signup .login-left{
    flex:1 1 100%;
    max-width:100%;
    padding:32px 22px 24px;
  }
  .login-split--signup .login-main{ padding:20px 0; }
}

@media (max-width:420px){
  .login-split .login-left{ padding:24px 18px 20px; }
  .login-split .auth-title{ font-size:1.75rem; }
}

/* 2FA code step: the instruction, the "Authenticator code" title and the recovery link sit centred over the centred
   six code boxes; the trust-this-computer checkbox and its note stay left-aligned (easier to read when wrapped). */
#tfaChallengeForm > .hint,
#tfaChallengeForm > label.label,
#tfaChallengeForm > .tfa-recovery-toggle > summary { text-align: center; }
/* Once opened, the recovery code field reads normally (left-aligned label above a full-width input). */
#tfaChallengeForm > .tfa-recovery-toggle[open] > summary { margin-bottom: 8px; }