/*
 * [keystone_login] + its popup variant ([keystone_login_button] / the
 * `ks-login-trigger` CSS class) — scoped under .ks-login /
 * .ks-login-modal. Public pages never receive the shell's --ks-*
 * custom properties (those are injected on :root only at shell-render
 * time), so this hardcodes the admin design system's own non-colour
 * values by number, the same convention the candidates module's public
 * pages use for the identical reason.
 *
 * Light, flat design (requested directly, with a reference screenshot):
 * a warm cream card instead of the previous dark-navy one, no glows
 * (0.66.5 already removed those from the dark version; the new light
 * version never had any to begin with), the OS/browser's own UI font
 * instead of a web font, and an optional photo column on the right
 * (`.ks-login__image`'s own `background-image`, set inline per-
 * organisation by `LoginShortcode::panel()` from
 * `Settings → Branding → Login popup image`) — the card is a single
 * column with no image configured.
 *
 * `--c-accent` and `--c-card` are ALSO set inline, per request ("I'd
 * like to choose my own colour, logo") — `LoginShortcode::wrapOpenTag()`
 * writes them from `BrandingProfile::$accentColor`/`$loginCardColor` as a
 * `style` attribute on the wrapping `.ks-login`/`.ks-login-modal`
 * element, which always wins over this file's own fallback values
 * regardless of CSS load order (inline style beats any stylesheet rule
 * for the same property on the same element). The logo itself prefers
 * `BrandingProfile::$loginLogoUrl` over the main `$logoUrl` for the same
 * reason — a white/light main logo (designed for the dark admin-shell
 * sidebar) is invisible on this light card.
 */
.ks-login, .ks-login-modal {
  --c-accent: #2563eb;
  --c-card: #f6f1e7;
  --c-card-2: #ffffff;
  --c-fg: #6b6456;
  --c-fg-active: #241f17;
  --c-border: #e4ddcc;
  --c-danger: #b3261e;
  --c-danger-bg: #fbeae9;
  --c-radius: 16px;
  --c-radius-sm: 10px;
  /* The OS/browser's own UI font, not a web font — requested directly. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.ks-login *, .ks-login *::before, .ks-login *::after,
.ks-login-modal *, .ks-login-modal *::before, .ks-login-modal *::after { box-sizing: border-box; }

.ks-login {
  display: flex;
  justify-content: center;
  padding: 56px 16px;
}

.ks-login__panel {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--c-card);
  border-radius: var(--c-radius);
  padding: 40px 32px 32px;
  text-align: center;
  overflow: hidden;
}
/* A photo on the right turns the card into a two-column row; the form
   column keeps the exact same single-column width/padding either way,
   so adding or removing the image never reflows the form itself. */
.ks-login__panel--split {
  max-width: 760px;
  display: flex;
  align-items: stretch;
  text-align: left;
  padding: 0;
}
.ks-login__form-col { flex: 0 0 380px; padding: 40px 32px 32px; text-align: center; }
/* `min-width` matters as much as `flex: 1 1 auto` here: a background-
   image div has no intrinsic content, so it contributes 0 to a flex
   container's shrink-to-fit width (CSS sizing never counts background
   images, only <img> elements or an explicit width/min-width) — inside
   the popup, `.ks-login-modal__dialog` has no definite width of its own,
   so the split panel's width is itself shrink-to-fit, and without this
   floor the image column (and the whole second column) collapsed to 0
   width there even though it rendered fine on the full page (a direct
   <body> child, which does get a definite width). 320px, not 380px to
   match the form column exactly, keeps the combined 700px floor below
   the 720px breakpoint below so there's no dead zone where row layout
   is still active but narrower than the two columns' combined minimum. */
.ks-login__image { flex: 1 1 auto; background-size: cover; background-position: center; min-height: 320px; min-width: 320px; }
@media (max-width: 720px) {
  /* The photo column is a nice-to-have on a wide screen, not on a phone
     where it would just push the form below the fold — drop it rather
     than stack it. */
  .ks-login__panel--split { max-width: 380px; }
  .ks-login__image { display: none; }
  /* With the image gone, the form-col is the only child — its fixed
     380px basis (flex-shrink: 0, set for the two-column row) must be
     allowed to shrink again below ~412px-wide viewports, or the panel's
     own `overflow: hidden` clips it. */
  .ks-login__form-col { flex: 1 1 auto; }
}

.ks-login__logo { max-width: 180px; max-height: 56px; margin: 0 auto 24px; display: block; }
.ks-login__wordmark { font-size: 20px; font-weight: 700; color: var(--c-fg-active); margin-bottom: 24px; letter-spacing: -.01em; text-align: center; }

.ks-login__heading { font-size: 22px; font-weight: 700; color: var(--c-fg-active); margin: 0 0 6px; letter-spacing: -.01em; }
.ks-login__subheading { font-size: 14px; color: var(--c-fg); margin: 0 0 24px; line-height: 1.5; }

.ks-login__error {
  background: var(--c-danger-bg);
  color: var(--c-danger);
  border-radius: var(--c-radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin: 0 0 18px;
  text-align: left;
}

.ks-login__field { text-align: left; margin-bottom: 16px; }
.ks-login__field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-fg-active);
  margin-bottom: 6px;
}
.ks-login__input-wrap { position: relative; }
.ks-login__input-icon {
  position: absolute;
  left: 13px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--c-fg); pointer-events: none;
}
.ks-login__field input {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-sm);
  padding: 11px 13px 11px 38px;
  font-size: 14px;
  color: var(--c-fg-active);
  background: var(--c-card-2);
  transition: border-color .12s ease;
}
.ks-login__field input::placeholder { color: #a39c8a; }
.ks-login__field input:focus {
  outline: none;
  border-color: var(--c-accent);
}
/* Chrome/Safari paint an autofilled (or, in some versions, actively-
   matching-a-saved-credential) field with their own background + text
   colour that ignores this stylesheet until the field is blurred — the
   9999s background-color transition is the standard trick that defeats
   the forced repaint. */
.ks-login__field input:-webkit-autofill,
.ks-login__field input:-webkit-autofill:hover,
.ks-login__field input:-webkit-autofill:focus,
.ks-login__field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--c-fg-active);
  -webkit-box-shadow: 0 0 0px 1000px var(--c-card-2) inset;
  box-shadow: 0 0 0px 1000px var(--c-card-2) inset;
  caret-color: var(--c-fg-active);
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

.ks-login__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.ks-login__remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-fg); }
.ks-login__remember input { accent-color: var(--c-accent); width: 15px; height: 15px; }

.ks-login__submit {
  display: inline-block;
  width: 100%;
  background: var(--c-accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  letter-spacing: .01em;
  transition: filter .12s ease;
}
.ks-login__submit:hover { filter: brightness(0.92); color: #fff; }
.ks-login__submit--link { width: auto; display: inline-block; padding: 11px 28px; }

.ks-login__hint { font-size: 14px; color: var(--c-fg); margin: 0 0 20px; text-align: center; }
.ks-login__hint strong { color: var(--c-fg-active); }
.ks-login__lost { font-size: 13px; color: var(--c-fg); text-decoration: none; }
.ks-login__lost:hover { color: var(--c-fg-active); text-decoration: underline; }

/* ---- popup variant --------------------------------------------------- */

.ks-login-modal {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity .18s ease;
}
.ks-login-modal.is-open { opacity: 1; }
.ks-login-modal[hidden] { display: none; }
.ks-login-modal__backdrop { position: absolute; inset: 0; background: rgba(28, 23, 14, .55); }
.ks-login-modal__dialog {
  position: relative;
  max-width: 100%;
  transform: translateY(8px);
  transition: transform .18s ease;
}
.ks-login-modal.is-open .ks-login-modal__dialog { transform: translateY(0); }
.ks-login-modal .ks-login__panel { box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.ks-login__close {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .7);
  color: var(--c-fg-active); font-size: 20px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ks-login__close:hover { background: #fff; }
body.ks-login-modal-open { overflow: hidden; }

/* A theme-agnostic trigger for [keystone_login_button] — a plain pill
   button that reads reasonably in most header contexts without any
   theme-specific styling; a theme is always free to override `.ks-login
   -trigger` with its own look, since the class is also what makes a
   WordPress nav-menu "Custom Link" item open the popup. */
.ks-login__header-btn {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--c-accent, #2563eb);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.ks-login__header-btn:hover { filter: brightness(0.92); color: #fff; }