/* Form controls and the standalone auth page.
   Kept out of components.css deliberately: the frontend-redesign branch has
   large pending changes there, and these rules are additive. */

.rk-auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: var(--rk-bg);
}

.rk-auth-card {
    width: 100%;
    max-width: 22rem;
    background: var(--rk-surface);
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius-lg, 18px);
    box-shadow: var(--rk-shadow-md, 0 4px 24px rgba(0, 0, 0, 0.08));
    padding: 2rem 1.75rem;
}

.rk-auth-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--rk-text);
    margin-bottom: .35rem;
}

.rk-auth-title { font-size: 1.375rem; font-weight: 650; letter-spacing: -0.01em; margin: .75rem 0 .25rem; }
.rk-auth-sub   { color: var(--rk-text-secondary); font-size: .875rem; margin-bottom: 1.5rem; }

.rk-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.rk-field label { font-size: .8125rem; font-weight: 550; color: var(--rk-text-secondary); }

.rk-input {
    width: 100%;
    font: inherit;
    color: var(--rk-text);
    background: var(--rk-surface-sunken);
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius-sm, 10px);
    padding: .6rem .7rem;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.rk-input:focus {
    outline: none;
    background: var(--rk-surface);
    border-color: var(--rk-accent);
    box-shadow: 0 0 0 3px var(--rk-accent-tint);
}

.rk-auth-error {
    background: var(--rk-danger-tint);
    color: var(--rk-danger-ink);
    border-radius: var(--rk-radius-sm, 10px);
    padding: .6rem .7rem;
    font-size: .8125rem;
    margin-bottom: 1rem;
}

.rk-auth-submit { width: 100%; justify-content: center; margin-top: .25rem; }