/**
 * Login/signup — two-panel card (brand/system panel + form panel) built on
 * tokens.css. Only the classes views/auth.php actually uses are here.
 */
body {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    background-color: var(--bg);
    background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 0);
    background-size: 14px 14px;
    color: var(--text);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--s-5);
    margin: 0;
    transition: background-color var(--dur-base) ease, color var(--dur-base) ease;
}
body.dark {
    background-image: none;
    background-color: var(--bg);
}

.auth-shell {
    display: flex;
    width: 100%;
    max-width: 860px;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: authFadeIn var(--dur-slow) var(--ease) forwards;
}

@keyframes authFadeIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-info-panel {
    flex: 1;
    min-width: 0;
    padding: var(--s-6) var(--s-5);
    background: linear-gradient(160deg, var(--accent), var(--accent-active));
    /* var(--on-accent), not a hardcoded white — defined per palette for
       both light and dark mode (this panel has no body.dark variant of its
       own, it's always on the accent gradient), so it already pairs
       correctly with every palette's accent, e.g. Graphite's light-mode
       accent is a light saturated orange that tokens.css's own comment
       says needs dark text "regardless of overall theme." */
    color: var(--on-accent);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-3);
}

.auth-info-panel .brand-badge { color: var(--on-accent); }

.auth-info-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-top: var(--s-3);
}

.auth-info-sub {
    font-size: var(--fs-sm);
    opacity: 0.85;
    line-height: var(--lh-base);
}

.auth-info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-top: var(--s-3);
}

.auth-info-list li {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.auth-info-list i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.9;
}

.login-card {
    flex: 1;
    min-width: 0;
    background: var(--card);
    padding: var(--s-6) var(--s-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-sub { font-size: var(--fs-sm); color: var(--muted); text-align: center; margin-bottom: var(--s-4); font-weight: 600; }

.tabs {
    display: flex; gap: 4px; padding: 4px; margin-bottom: var(--s-5);
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.tab {
    flex: 1; padding: var(--s-2) var(--s-3); text-align: center; cursor: pointer;
    border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
    border: 1px solid transparent; background: transparent; transition: all var(--dur-fast) ease;
    /* These two are <button> elements now (they were non-focusable <div>s, so
       the Sign Up tab could not be reached by keyboard at all). A button does
       not inherit the page font family, and this view does not load base.css
       where that reset lives — so without this the tabs render in the UA's
       default button font. */
    font-family: inherit;
    line-height: inherit;
}
.tab.active {
    background: var(--card); color: var(--accent); box-shadow: var(--shadow-sm);
    border: 1px solid var(--border); font-weight: 700;
}
body.dark .tab.active { background: var(--accent); color: var(--on-accent); border-color: transparent; }

input[type="text"], input[type="password"] {
    width: 100%; padding: 10px var(--s-4); height: 42px; margin-bottom: var(--s-4);
    border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card);
    color: var(--text); font-size: var(--fs-sm); font-family: inherit; outline: none;
    transition: all var(--dur-fast) ease; box-sizing: border-box;
}
input[type="text"]:focus, input[type="password"]:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--card);
}

button.submitBtn {
    width: 100%; padding: var(--s-3); border-radius: var(--r-md);
    background: var(--accent); border: none;
    color: var(--on-accent); font-weight: 700; font-size: var(--fs-md); cursor: pointer;
    box-shadow: 0 4px 14px var(--accent-glow); transition: all var(--dur-base) ease;
}
button.submitBtn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 6px 18px var(--accent-glow); }
button.submitBtn:disabled { opacity: .75; cursor: not-allowed; transform: none; }

.auth-field-row { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: var(--s-4); }
.auth-field-row label { font-size: var(--fs-xs); font-weight: 600; color: var(--text); margin-bottom: 4px; }
.auth-input-wrap { display: flex; width: 100%; position: relative; gap: var(--s-2); }
.auth-input-no-margin { margin-bottom: 0 !important; flex: 1; }

.peekBtn {
    width: 42px; height: 42px; border-radius: var(--r-md); border: 1px solid var(--border);
    background: var(--surface); display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--muted); flex-shrink: 0; transition: all var(--dur-fast) ease;
}
.peekBtn:hover { color: var(--text); background: var(--surface-2); }

.auth-msg {
    text-align: center; margin-bottom: var(--s-4); font-size: var(--fs-xs); font-weight: 600;
    padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); border: 1px solid transparent;
}
.auth-msg.error { color: var(--red); background: var(--red-soft); border-color: transparent; }
.auth-msg.success { color: var(--green); background: var(--green-soft); border-color: transparent; }

#authThemeBtn {
    position: fixed; top: var(--s-4); right: var(--s-4); width: 38px; height: 38px; padding: 0;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center; color: var(--muted);
    cursor: pointer; box-shadow: var(--shadow-sm); transition: all var(--dur-fast) ease;
    z-index: 10;
}
#authThemeBtn:hover { color: var(--text); border-color: var(--border-strong); }

@media (max-width: 760px) {
    .auth-shell {
        flex-direction: column;
        max-width: 420px;
    }
    .auth-info-panel {
        padding: var(--s-5) var(--s-5) var(--s-4);
    }
    .auth-info-list { display: none; }
}