*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.login-body {
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    /* Tiled brand pattern with #f0f2f8 fallback if the image fails to load. */
    background: #f0f2f8 url("../img/repeating_background_inheritable.png") repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* ── Card ── */
.login-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.05);
    padding: 44px 40px 40px;
    width: 100%;
    max-width: 420px;
}

/* ── Logo ── */
.login-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 32px;
}

.login-logo {
    height: 56px;
    width: auto;
}

.login-brand {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -0.01em;
}

/* ── Headings ── */
.login-heading {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a2e;
    text-align: center;
    margin-bottom: 8px;
}

.login-sub {
    font-size: 16px;
    color: #6b7280;
    text-align: center;
    margin-bottom: 28px;
    line-height: 1.5;
}

/* ── Error banner ── */
.login-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 10px;
    padding: 13px 16px;
    font-size: 15px;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* ── Info banner (success / "check your email" messages) ── */
.login-info {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    border-radius: 10px;
    padding: 13px 16px;
    font-size: 15px;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* ── Sign In / Register tabs ── */
.login-tabs {
    display: flex;
    gap: 4px;
    background: #f3f4f6;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 16px;
}

.login-tab {
    flex: 1 1 50%;
    padding: 11px 14px;
    background: transparent;
    border: none;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    font-family: inherit;
    transition: background 120ms, color 120ms, box-shadow 120ms;
}

.login-tab:hover {
    color: #1a1a2e;
}

.login-tab-active {
    background: #ffffff;
    color: #1a1a2e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.login-tab:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* ── Password input with eye toggle ── */
/* The wrap is positioned relative so the eye button can sit absolutely
   inside the right edge of the input. The input itself reserves padding
   on the right so text doesn't run under the button. */
.field-input-wrap {
    position: relative;
}

.field-input-wrap .field-input {
    padding-right: 48px;
}

.field-eye-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #6b7280;
    border-radius: 6px;
    padding: 0;
}

.field-eye-btn:hover {
    background: #f3f4f6;
    color: #1a1a2e;
}

.field-eye-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Two SVGs nested in the button - show whichever matches the state. */
.field-eye-btn .eye-hide { display: none; }
.field-eye-btn[aria-pressed="true"] .eye-show { display: none; }
.field-eye-btn[aria-pressed="true"] .eye-hide { display: block; }

/* ── Field label + inline validation row ──
   Validation errors sit to the right of the field label rather than
   below the input, so showing one doesn't add a row to the card and
   resize it. The label takes its natural width on the left; the
   error text is right-aligned, stays on one line, and ellipsises if
   it ever runs out of room. */
.field-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

/* ── Per-field validation messages and help text ── */
.field-validation-msg {
    font-size: 13px;
    color: #dc2626;
    line-height: 1.4;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;  /* let the flex item shrink under its content size */
}

.field-help-msg {
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
    line-height: 1.4;
}

/* ── Forgot password link ── */
.login-forgot-link {
    font-size: 14px;
    color: #2563eb;
    text-decoration: none;
}

.login-forgot-link:hover {
    text-decoration: underline;
}

/* ── "Back to sign in" row used on /forgot-password, /reset-password,
      and /check-email below their primary action button. Right-aligns
      the link with a touch of breathing room from the button. */
.login-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* ── Reserved-height area below the password input ──
   Holds either the Forgot password link (Sign In tab, right-aligned)
   or the 2-line password complexity hint (Create Account tab,
   left-aligned). min-height matches the height of the longer
   content so the card doesn't resize when the user flips between
   tabs. The hint at 13px font and 1.4 line-height needs ~36px for
   two lines; we use 38px for a touch of breathing room. */
.field-help-area {
    min-height: 38px;
    margin-top: 4px;
}

.field-help-area .login-forgot-link {
    display: block;
    text-align: right;
}

.field-help-area .field-help-msg {
    margin-top: 0;
}

/* Re-assert the [hidden] semantics. Without this, the explicit
   `display: block` on .login-forgot-link above wins over the user
   agent's default rule for [hidden] elements, so the JS toggle
   wouldn't actually hide the link on the Create Account tab. */
.field-help-area .login-forgot-link[hidden],
.field-help-area .field-help-msg[hidden] {
    display: none;
}

/* ── Form ── */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field-label {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
}

.field-input {
    height: 50px;
    padding: 0 16px;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    font-size: 16px;
    color: #1a1a2e;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    width: 100%;
}

.field-input:focus {
    border-color: #7B35B5;
    box-shadow: 0 0 0 3px rgba(123, 53, 181, 0.12);
}

.field-input::placeholder {
    color: #9ca3af;
}

/* ── Buttons ── */
.btn {
    height: 52px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: 0.01em;
    width: 100%;
    transition: filter 0.15s ease, transform 0.1s ease;
    text-decoration: none;
    font-family: inherit;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: #7B35B5;
    color: #ffffff;
    margin-top: 4px;
}

.btn-primary:hover {
    filter: brightness(1.1);
}

.btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ── Divider ── */
.login-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 0;
    color: #9ca3af;
    font-size: 14px;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* ── Social buttons ── */
.btn-social {
    background: #ffffff;
    color: #1a1a2e;
    border: 1.5px solid #d1d5db;
    margin-top: 12px;
}

/* Google + Apple share one row to keep the card compact. */
.login-social-row {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.login-social-row .btn-social {
    flex: 1 1 50%;
    margin-top: 0;
}

.btn-social:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    filter: none;
}

.btn-apple {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}

.btn-apple:hover {
    background: #1c1c1e;
    filter: none;
}

/* ── Login: two-column layout (form left, brand right) ── */
/* Wider on desktop so the two columns each have breathing room. The
   default .login-card padding is replaced by per-side padding on each
   .login-side block so the brand-side tint can run edge-to-edge. */
.login-card-2col {
    max-width: 880px;
    padding: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.login-card-2col > .login-side {
    flex: 1 1 50%;
    padding: 32px 40px;
    min-width: 0;
}

/* Brand side: logo + welcome (centred in the upper area) plus the
   app store badges pinned to the bottom. The two zones are separate
   flex children so the brand-top can expand to fill while the badges
   stay anchored to the bottom of the column. */
.login-card-2col > .login-side-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #f7f9fc;
    gap: 0;
}

.login-brand-top {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
}

.login-card-2col > .login-side-brand .login-heading {
    margin-bottom: 0;
}

.login-card-2col > .login-side-brand .login-sub {
    margin-bottom: 0;
}

/* Mobile + tablet app store badges row at the foot of the brand
   column. Hover dims the links slightly for the standard tactile
   feedback on the official badge artwork. */
.login-app-stores {
    flex: 0 0 auto;
    width: 100%;
    padding-top: 24px;
}

.login-app-stores-title {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 12px;
    font-weight: 500;
}

.login-app-stores-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.login-app-store-link {
    display: inline-flex;
    transition: opacity 120ms;
}

.login-app-store-link:hover,
.login-app-store-link:focus-visible {
    opacity: 0.85;
}

.login-app-store-link img {
    height: 44px;
    width: auto;
    display: block;
}

.login-brand-logo {
    width: 100%;
    max-width: 240px;
    height: auto;
    display: block;
}

/* Stack the two sides on narrow viewports. Brand on top so the user
   sees Inheritable branding before scrolling to the form. */
@media (max-width: 719px) {
    .login-card-2col {
        max-width: 420px;
        flex-direction: column;
    }
    .login-card-2col > .login-side {
        padding: 28px 28px;
    }
    .login-card-2col > .login-side-brand {
        order: -1;
        padding-top: 36px;
        padding-bottom: 24px;
    }
    .login-brand-logo {
        max-width: 200px;
    }
}

/* ── Onboarding (post-sign-in basic details) ── */
/* The onboarding card uses the same 2-column shell as login (form left,
   brand right). Within the form, fields are laid out in a 2-column CSS
   grid so the card stays short enough to avoid scrolling. The phone
   block, language select, and Confirm button span both grid columns. */

/* "(Recommended)" / "(Optional)" hint sitting next to a field label. */
.field-label-meta {
    color: #6b7280;
    font-weight: 500;
    font-size: 13px;
    margin-left: 4px;
}

/* Red asterisk marking a required field, sitting after the label text.
   aria-hidden on the span keeps screen readers from announcing the
   asterisk literally - the input's `required` attribute already
   conveys requiredness to assistive tech. */
.field-required {
    color: #dc2626;
    font-weight: 700;
}

/* Form-level grid: two equal columns with consistent row + column gaps. */
.onboarding-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 14px;
}

/* Items that span the whole row (phone block, language select, Confirm). */
.onboarding-form .field-group-full {
    grid-column: 1 / -1;
}

/* Stack to single column on narrow viewports - matches the .login-card-2col
   stacking breakpoint above so the form column lines up with the brand
   column when the card itself stacks. */
@media (max-width: 719px) {
    .onboarding-form {
        grid-template-columns: 1fr;
    }
}

/* Phone country-code + number share one row inside their .field-group.
   CC is fixed-width so the number input takes the rest, mirroring how
   Key Contacts renders its phone field. */
.onboarding-phone-row {
    display: flex;
    gap: 10px;
}

.field-input-cc {
    flex: 0 0 96px;
    text-align: center;
}

.field-input-phone {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Passkey sign-in button (sits between the form and the OAuth row).
   Same chrome as .btn-social so it visually groups with Google / Apple
   but spans the full row width, signalling it's the primary
   alternative to the email/password form above. The fingerprint icon
   is tinted KC green to match the Settings -> Security passkey accent
   so a user who registered there sees a consistent visual cue. */
.btn-passkey {
    width: 100%;
    margin-top: 12px;
    padding: 11px 16px;
    background: #ffffff;
    color: #1a1a2e;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-passkey:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.btn-passkey:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-passkey.is-busy {
    opacity: 0.8;
    cursor: progress;
}

.btn-passkey .bi {
    font-size: 20px;
    color: #2E7D32; /* KC green - matches the Settings passkey accent */
}

.btn-passkey:hover .bi { color: #1B5E20; }