/* ==========================================================================
   [cbtt_login] — reskins wp_login_form()'s stock markup onto cbtt-ui, without
   rebuilding the form (that would drop core's authenticate()/nonce/remember-
   me wiring, and with it every 2FA/login-limiter plugin hooking the standard
   IDs). Depends on cbtt-ui.css (card/button/field primitives) — see
   core/design/ui_assets.php for the dependency chain.
   ========================================================================== */

.cbtt-login {
    display: flex;
    justify-content: center;
    padding: 24px 16px;
}

.cbtt-login__card {
    width: 100%;
    max-width: 360px;
    box-shadow: none; /* flat-surface rule, DESIGN-SYSTEM.md */
}

.cbtt-login p {
    margin: 0 0 16px;
}

.cbtt-login label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cbtt-text, #1f2733);
}

.cbtt-login input[type="text"],
.cbtt-login input[type="password"] {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--cbtt-border, #e6e1d7);
    border-radius: var(--cbtt-radius-md, 11px);
    background: var(--cbtt-surface, #ffffff);
    color: var(--cbtt-text, #1f2733);
    font-family: inherit;
    font-size: var(--cbtt-fs-sm, 0.875rem);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.cbtt-login input[type="text"]:focus-visible,
.cbtt-login input[type="password"]:focus-visible {
    outline: none;
    border-color: var(--cbtt-teal, #0193aa);
    box-shadow: var(--cbtt-focus-ring, 0 0 0 3px rgba(1, 147, 170, 0.15));
}

.cbtt-login .login-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--cbtt-fs-sm, 0.875rem);
    font-weight: 400;
}
.cbtt-login .login-remember label {
    display: inline;
    margin: 0;
    font-weight: 400;
}
.cbtt-login .login-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.cbtt-login .login-submit {
    margin-bottom: 0;
}
.cbtt-login .login-submit input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px, not the admin's 40 — this one is a frontend tap target
       (UX-GUIDELINES 9.6 / DESIGN-SYSTEM Mobile 5), and it is the single
       button on a page students open on a phone. */
    min-height: 44px;
    width: 100%;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--cbtt-radius-md, 11px);
    background: var(--cbtt-primary, #003f86);
    color: var(--cbtt-on-primary, #ffffff);
    font-family: inherit;
    font-size: var(--cbtt-fs-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease;
}
.cbtt-login .login-submit input[type="submit"]:hover {
    background: var(--cbtt-primary-hover, #002b57);
}
.cbtt-login .login-submit input[type="submit"]:focus-visible {
    outline: 2px solid var(--cbtt-teal, #0193aa);
    outline-offset: 2px;
    box-shadow: var(--cbtt-focus-ring, 0 0 0 3px rgba(1, 147, 170, 0.15));
}