/*
 * Zeemarq auth shell brand surface.
 *
 * Loaded after style.css + portal-overrides.css on resources/views/auth/
 * auth_layout.blade.php only. Recolours and re-types the legacy `.login-*`
 * structure onto v2.0 tokens — Bone canvas, a quiet Bone/white card, an
 * Instrument Serif display title, Navy links, and the single Copper action
 * (the submit button inherits Copper-700 from portal-overrides.css). It does
 * NOT restructure the layout; the proven centred-card flow is preserved so
 * the change is colour/type only and cannot break the form.
 *
 * Covers: login, forgot-password, verify-email, verify-email-notice,
 * two-factor/challenge — every view that extends auth_layout.
 */

.login-body {
    background: var(--zmq-bone);
    color: var(--zmq-ink);
    font-family: var(--zmq-font-body);
    min-height: 100vh;
}

/* The card */
.login-wrapper .loginbox {
    background: var(--zmq-white);
    border: 1px solid var(--zmq-slate-200);
    border-radius: var(--zmq-radius);
    box-shadow: 0 1px 2px rgba(14, 16, 20, 0.04);
}

/* Display title (the "Sign in" / "Reset password" heading) */
.login-body .login-right-wrap h1,
.login-body > .login-wrapper h1,
.login-body .zmq-welcome__title {
    font-family: var(--zmq-font-display);
    font-weight: 400;
    color: var(--zmq-navy);
    letter-spacing: -0.01em;
}

.login-body .account-subtitle {
    color: var(--zmq-slate-500);
    font-family: var(--zmq-font-body);
}

/* Labels + fields */
.login-body .form-control-label,
.login-body label {
    color: var(--zmq-ink);
    font-family: var(--zmq-font-body);
}
.login-body .form-control {
    /* Slate-500 resting border clears WCAG 2.2 SC 1.4.11 non-text contrast
       (>= 3:1 against the White card); Slate-200 was only 1.49:1. */
    border: 1px solid var(--zmq-slate-500);
    color: var(--zmq-ink);
    font-family: var(--zmq-font-body);
}

/* Secondary text links read Navy, hover Copper-700 (the card already carries
   the one Copper element on its submit button; link hover borrows the warmth
   without competing as a second solid copper surface). */
.login-body a,
.login-body .forgot-link,
.login-body .dont-have a {
    color: var(--zmq-navy);
}
.login-body a:hover,
.login-body .forgot-link:hover,
.login-body .dont-have a:hover {
    color: var(--zmq-copper-700);
}
.login-body .dont-have {
    color: var(--zmq-slate-500);
}

/* The vendored `.login-right` chain sets these to #a0a0a0 (2.6:1 on the white
   card) and outspecifies the `.login-body` rules above, so the AA fix must match
   its specificity. Links read Navy (~10:1), secondary text Slate-500 (~6:1) (#1298). */
.login-wrapper .loginbox .login-right .forgotpass a,
.login-wrapper .loginbox .login-right .dont-have a {
    color: var(--zmq-navy);
}
.login-wrapper .loginbox .login-right .forgotpass a:hover,
.login-wrapper .loginbox .login-right .dont-have a:hover {
    color: var(--zmq-copper-700);
}
.login-wrapper .loginbox .login-right .dont-have {
    color: var(--zmq-slate-500);
}

/* Alerts on the auth surface stay on-palette (Verdigris confirm / Madder halt)
   instead of the Bootstrap defaults. */
.login-body .alert-success {
    background: var(--zmq-bone);
    border: 1px solid var(--zmq-verdigris);
    color: var(--zmq-ink);
}
.login-body .alert-danger {
    background: var(--zmq-bone);
    border: 1px solid var(--zmq-madder);
    color: var(--zmq-ink);
}

/* Password reveal toggle — now a real <button> for keyboard operation (#835).
   Reset the native button chrome so it still reads as the legacy icon
   affordance, and guarantee a >= 24x24 CSS px hit target (WCAG 2.5.8). The
   vendored `.login-wrapper .loginbox .toggle-password` rule keeps it absolutely
   positioned at the field's right edge; we only neutralise button styling and
   add the focus ring. */
.login-body .toggle-password {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    color: var(--zmq-slate-500);
}
.login-body .toggle-password:hover {
    color: var(--zmq-ink);
}
.login-body .toggle-password:focus-visible {
    outline: 2px solid var(--zmq-copper);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip-to-content link — reveal on focus on the Navy field so it is visible
   over the Bone canvas (the auth shell did not previously style its reveal). */
.skip-to-content:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    padding: 8px 12px;
    background: var(--zmq-navy);
    color: var(--zmq-bone);
    border-radius: 4px;
    z-index: 1100;
    font-family: var(--zmq-font-body);
}