/*
 * Same tokens as quiz.css / progress.css — see quiz.css's header
 * comment. Input styling mirrors UK Course Finder's .ukcf-field
 * pattern (50px height, 10px radius, tan border, brown focus ring).
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@600;700&family=Raleway:wght@400;500;600&display=swap');

.tst-auth-card {
    --tst-bg: #EEE9E5;
    --tst-card-bg: #ffffff;
    --tst-border: #DED1C5;
    --tst-border-light: #EFEAE6;
    --tst-text: #54595F;
    --tst-text-muted: #7A7A7A;
    --tst-accent: #3A3835;
    --tst-teal: #0E9484;
    --tst-teal-light: #D7F0EC;
    --tst-accent-light: #E5E3E0;
    --tst-incorrect: #b5675a;
    --tst-radius: 16px;
    --tst-radius-sm: 10px;

    max-width: 420px;
    margin: 0 auto;
    font-family: 'Raleway', sans-serif !important;
    color: var(--tst-text) !important;
    background: var(--tst-card-bg) !important;
    padding: 32px !important;
    border-radius: var(--tst-radius) !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .06) !important;
}

.tst-auth-card .tst-auth-section-label {
    font-family: 'Cormorant SC', serif !important;
    font-weight: 600 !important;
    font-size: 22px !important;
    color: var(--tst-text) !important;
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--tst-border-light) !important;
}

.tst-auth-card form {
    display: flex;
    flex-direction: column;
}

.tst-auth-card .tst-field {
    display: block;
    width: 100%;
    margin-bottom: 14px;
}

.tst-auth-card label {
    display: block;
    width: 100%;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--tst-text) !important;
    margin-bottom: 10px;
}

.tst-auth-card input[type="email"],
.tst-auth-card input[type="password"],
.tst-auth-card .tst-password-wrap input[type="text"] {
    display: block;
    width: 100%;
    height: 50px;
    font-family: 'Raleway', sans-serif !important;
    font-size: 16px !important;
    padding: 0 18px !important;
    border: 1px solid var(--tst-border) !important;
    border-radius: var(--tst-radius-sm) !important;
    background: var(--tst-card-bg) !important;
    color: var(--tst-text) !important;
    box-sizing: border-box;
}

.tst-auth-card input:focus {
    outline: none !important;
    border-color: var(--tst-accent) !important;
    box-shadow: 0 0 0 2px rgba(138, 106, 74, 0.2) !important;
}

.tst-auth-card .tst-password-wrap {
    position: relative;
}

.tst-auth-card .tst-password-wrap input {
    padding-right: 60px !important; /* room for the toggle button so it never sits over typed text */
}

.tst-auth-card .tst-password-toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    font-family: 'Raleway', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--tst-accent) !important;
    cursor: pointer;
}

.tst-auth-card .tst-auth-btn {
    font-family: 'Raleway', sans-serif !important;
    height: 48px;
    padding: 0 28px !important;
    border-radius: 2px !important;
    border: 1px solid var(--tst-text) !important;
    cursor: pointer;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.tst-auth-card .tst-auth-btn-primary {
    background: var(--tst-bg) !important;
    color: var(--tst-text) !important;
    border-color: var(--tst-text) !important;
}

.tst-auth-card .tst-auth-btn-primary:hover {
    background: transparent !important;
}

.tst-auth-card .tst-auth-error {
    background: #fbeeec !important;
    color: var(--tst-incorrect) !important;
    border: 1px solid #f0d5d0 !important;
    border-radius: var(--tst-radius-sm) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    margin-bottom: 16px;
}

.tst-auth-card .tst-auth-note {
    font-size: 14px !important;
    color: var(--tst-text-muted) !important;
    margin: -8px 0 18px;
}

.tst-auth-card .tst-auth-success {
    background: var(--tst-teal-light) !important;
    color: var(--tst-teal) !important;
    border: 1px solid var(--tst-teal) !important;
    border-radius: var(--tst-radius-sm) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    margin-bottom: 16px;
}

.tst-auth-card .tst-auth-forgot-link {
    text-align: center;
    margin: 16px 0 0;
}

.tst-auth-card .tst-auth-forgot-link a {
    font-family: 'Raleway', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--tst-text-muted) !important;
    text-decoration: underline !important;
}

.tst-auth-card .tst-auth-prompt {
    max-width: 420px;
    margin: 0 auto;
}

.tst-auth-card .tst-auth-register-toggle {
    margin-top: 16px;
}

.tst-auth-prompt .tst-auth-register-link {
    text-align: center;
    margin: 16px 0 0;
}

.tst-auth-prompt .tst-auth-register-link a {
    font-family: 'Raleway', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    /* hardcoded, not var(--tst-accent) — this link sits as a sibling
       of .tst-auth-card, not nested inside it, so it's genuinely
       outside the scope where that custom property is declared and
       would silently fail to resolve (falling back to the browser's
       default link blue, which is exactly what shipped here the
       first time before this was caught) */
    color: #3A3835 !important;
    text-decoration: underline !important;
}

.tst-auth-card .tst-auth-register-toggle summary {
    font-family: 'Raleway', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tst-accent) !important;
    cursor: pointer;
    text-align: center;
    padding: 8px 0 !important;
    list-style: none !important;
}

.tst-auth-card .tst-auth-register-toggle summary::-webkit-details-marker {
    display: none;
}

.tst-auth-card .tst-auth-register-toggle summary::before {
    content: '+  ';
}

.tst-auth-card .tst-auth-register-toggle[open] summary::before {
    content: '\2212 \0020 ';
}

.tst-auth-card .tst-auth-register-toggle .tst-auth-card {
    margin-top: 14px;
}

/* No visible focus/click ring anywhere in the login/register forms */
.tst-auth-card *:focus,
.tst-auth-card *:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}