/* Nova skin — sign in / sign up / forgot page (nova/site/login.ejs). KCEX-style split card on a
   white page: promo panel left, form right. Light palette scoped to .ap; header stays dark. */
.nova-field--hp { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* :root lifts these over nova-lk.css's html.lk-html body { background: var(--ink) }, which
   otherwise left the page behind the form (and under Safari's toolbar) dark. */
:root:has(body.nova-authp-body), :root body.nova-authp-body, :root body.nova-authp-body .nova-shell { background: #fff; }
body.nova-authp-body .lk-header { background-color: var(--ink) !important; border-bottom-color: var(--line) !important; backdrop-filter: none; }

.ap {
  --ap-ink: #141414;
  --ap-muted: rgba(20, 20, 20, .56);
  --ap-faint: rgba(20, 20, 20, .38);
  --ap-line: #e2e2e5;
  --ap-line-hover: #b9b9be;
  --ap-off: #ececee;
  --ap-accent: var(--signal-2);
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 62px); padding: 64px 24px; background: #fff; color: var(--ap-ink);
}
.ap-card {
  display: grid; grid-template-columns: 394px minmax(0, 1fr); box-sizing: border-box;
  width: 895px; max-width: 100%; height: 596px;
  border: 1px solid var(--ap-line); border-radius: 16px; overflow: hidden; background: #fff;
}
/* Sign up: fixed 895×525 — tighter vertical rhythm so every field (promo open too) fits. */
.ap-card--register { height: 525px; }
.ap-card--register .ap-promo { padding: 24px; }
.ap-card--register .ap-promo__art { width: 264px; }
.ap-card--register .ap-promo__head { margin-top: 24px; }
.ap-card--register .ap-promo__foot { margin-top: 32px; }
.ap-card--register .ap-form { padding: 28px 50px 20px; overflow-y: auto; }
.ap-card--register .ap-pane { gap: 8px; margin: auto 0; }
/* The math question is inside its field, so the sign up card drops the label to stay 525px. */
.ap-card--register .ap-field--math .ap-field__label { display: none; }
.ap-card--register .ap-title { margin-bottom: 8px; }
.ap-card--register .ap-field { gap: 4px; }
.ap-card--register .ap-input:not(#_) { height: 40px; }
.ap-card--register .ap-hint { margin-top: -2px; }
.ap-card--register .ap-check { margin-top: 0; }
.ap-card--register .ap-error { margin-top: -4px; }
.ap-card--register .ap-submit { height: 44px; margin-top: 4px; }
.ap-card--register .ap-alt { margin-top: 0; }

/* Promo panel */
.ap-promo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px;
  background: var(--ink); color: var(--bone); text-align: center;
}
.ap-promo__art { display: block; width: 294px; height: auto; border-radius: var(--radius-lg); }
.ap-promo__head { margin: 40px 0 16px; font-size: 16px; font-weight: 600; }
.ap-promo__fees { display: grid; grid-template-columns: auto auto; gap: 4px 24px; margin: 0; font-size: 14px; }
.ap-promo__fees div { display: flex; gap: 8px; justify-content: flex-end; }
.ap-promo__fees div:nth-child(even) { justify-content: flex-start; }
.ap-promo__fees dt { color: var(--bone); }
.ap-promo__fees dd { margin: 0; color: var(--signal); font-weight: 600; }
.ap-promo__foot { margin: 56px 0 0; font-size: 16px; line-height: 1.6; }
.ap-promo__foot b { color: var(--signal); font-weight: 600; }

/* Form panel */
.ap-form { display: flex; flex-direction: column; padding: 47px 50px 40px; background: #fff; }
.ap-pane { display: flex; flex-direction: column; gap: 24px; }
.ap-pane[hidden] { display: none; }
.ap-title { margin: 0 0 32px; font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--ap-ink); }
.ap-lede { margin: -40px 0 0; font-size: 14px; line-height: 1.5; color: var(--ap-muted); }
.ap-creds { display: flex; flex-direction: column; gap: 24px; }
.ap-creds[hidden] { display: none; }

.ap-field { display: flex; flex-direction: column; gap: 10px; }
.ap-field[hidden] { display: none; }
.ap-field__label { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 500; color: var(--ap-muted); }
.ap-field__box { position: relative; display: flex; align-items: center; }
.ap-hint { font-size: 12px; line-height: 1.4; color: var(--ap-faint); }
.ap-field__box.is-invalid + .ap-hint { color: var(--down); }

/* :not(#_) + !important beat the skin-wide dark body.nova input border rules. */
.ap-input:not(#_) {
  width: 100%; height: 48px; box-sizing: border-box; margin: 0; padding: 0 44px 0 12px; appearance: none;
  border: 1px solid var(--ap-line) !important; border-radius: var(--radius); background: #fff; color: var(--ap-ink);
  font: inherit; font-size: 14px; font-weight: 500; outline: none; transition: border-color .16s ease;
}
.ap-input::placeholder { color: var(--ap-faint); font-weight: 400; }
.ap-input:not(#_):hover { border-color: var(--ap-line-hover) !important; }
.ap-input:not(#_):focus { border-color: var(--ap-ink) !important; }
.ap-field__box.is-invalid .ap-input:not(#_) { border-color: var(--down) !important; }
.ap-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 48px #fff inset; -webkit-text-fill-color: var(--ap-ink); }

.ap-field__btn {
  position: absolute; right: 10px; display: grid; place-items: center; width: 28px; height: 28px;
  padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--ap-faint); cursor: pointer;
}
.ap-field__btn[hidden] { display: none; }
.ap-field__btn:hover { color: var(--ap-ink); }
.ap-field__btn span { display: grid; }
.ap-eye-on, .ap-field__btn.is-shown .ap-eye { display: none !important; }
.ap-field__btn.is-shown .ap-eye-on { display: grid !important; }

.ap-link { color: var(--ap-accent); font-weight: 500; text-decoration: none; }
.ap-link:hover { text-decoration: underline; }
.ap-link--btn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }

.ap-check { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: center; margin: -8px 0 0; font-size: 12px; line-height: 1.4; color: var(--ap-muted); cursor: pointer; }
.ap-check + .ap-check { margin-top: -16px; }
.ap-check input {
  position: relative; width: 16px; height: 16px; margin: 0; box-sizing: border-box; appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--ap-line-hover); border-radius: 50%; background: #fff; cursor: pointer;
}
.ap-check input:checked { background: var(--ap-ink); border-color: var(--ap-ink); }
.ap-check input:checked::after {
  content: ""; position: absolute; left: 4px; top: 1.5px; width: 3.5px; height: 7px;
  border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg);
}

.ap-error { margin: -8px 0 0; font-size: 12px; line-height: 1.4; color: var(--down); }
.ap-error.is-ok { color: var(--ap-accent); }
.ap-error[hidden] { display: none; }

.ap-submit {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; margin-top: 24px;
  border: 0; border-radius: 999px; background: var(--ap-ink); color: #fff;
  font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color .16s ease;
}
.ap-submit:hover { background: #2a2a2c; }
.ap-submit:disabled { background: var(--ap-off); color: var(--ap-faint); cursor: not-allowed; }
.ap-submit[data-busy="1"] { pointer-events: none; }
.ap-alt { margin: -4px 0 0; text-align: center; font-size: 14px; color: var(--ap-muted); }

@media (max-width: 960px) and (min-width: 768px) {
  .ap-card { grid-template-columns: 340px minmax(0, 1fr); }
  .ap-promo__art { width: 260px; }
  .ap-form { padding: 40px 32px; }
}

/* Collapsed promo code: a text toggle with a chevron, the field opens under it. */
.ap-promo-code__toggle {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 0; border: 0; background: none;
  font: inherit; font-size: 14px; color: var(--ap-muted); cursor: pointer;
}
.ap-promo-code__toggle:hover { color: var(--ap-ink); }
.ap-promo-code__toggle svg { transition: transform .16s ease; }
.ap-promo-code.is-open .ap-promo-code__toggle svg { transform: rotate(180deg); }
.ap-field__box[hidden] { display: none; }

/* Support button on the white auth page: black circle, white icon. */
body.nova-authp-body .nsw-fab { background: var(--ap-ink, #141414); color: #fff; }
body.nova-authp-body .nsw-fab:hover { background: #2a2a2c; }

/* Math security check: the question sits inside the field on the left, the answer after it. */
.ap-math__q { position: absolute; left: 12px; font-size: 14px; font-weight: 500; color: var(--ap-ink); pointer-events: none; }
.ap-math__in:not(#_) { padding-left: 72px; }