/* ============================================================================
   VideoForge — login/auth screens, post-house treatment.
   Loads after auth.css. Drops the orb background and the gradient wordmark so
   the first screen a user sees matches the app, in both light and dark.
   ============================================================================ */

:root {
    --ff-disp: 'Archivo', 'Helvetica Neue', sans-serif;
    --ff-ui:   'Inter Tight', -apple-system, sans-serif;
    --ff-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.vf-auth-body {
    background: var(--vf-bg);
    font-family: var(--ff-ui);
    position: relative;
}
/* Background effect: ambient.css. */

.vf-auth-card, .vf-auth-card--solo {
    position: relative; z-index: 1;
    background: var(--vf-card);
    border: 1px solid var(--vf-border);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(var(--shadow-rgb), calc(.5 * var(--shadow-k)));
}

.vf-auth-logo {
    font-family: var(--ff-disp); font-weight: 900; font-stretch: 106%;
    font-size: 2.1rem; letter-spacing: -.045em; background: none; -webkit-text-fill-color: var(--vf-text); color: var(--vf-text);
}
.vf-auth-logo span { color: var(--vf-accent); -webkit-text-fill-color: var(--vf-accent); }
/* Calibration bars under the wordmark — the same mark the landing opens with. */
.vf-auth-logo::after {
    content: ''; display: block; width: 28px; height: 4px; border-radius: 2px;
    margin: 12px auto 0;
    background: linear-gradient(90deg,
        var(--wash-1) 0 33.4%, var(--wash-2) 33.4% 66.7%, var(--wash-3) 66.7% 100%);
}
.vf-auth-sub {
    font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--vf-muted);
}

/* Tabs — a segmented control, not a gradient pill. */
.vf-tabs {
    border: 1px solid var(--vf-border); border-radius: 12px;
    background: transparent; padding: 0; gap: 0;
}
.vf-tab {
    border-radius: 10px; background: transparent; color: var(--vf-muted);
    font-family: var(--ff-ui); font-size: 15px; font-weight: 500;
    letter-spacing: 0; text-transform: none; padding: 11px 16px;
    border-right: 1px solid var(--vf-border);
    transition: background .18s, color .18s;
}
.vf-tab:last-child { border-right: 0; }
.vf-tab:hover { color: var(--vf-text); background: rgba(var(--elev),.04); }
.vf-tab.active {
    background: var(--vf-accent); color: var(--vf-accent-ink);
    box-shadow: none; font-weight: 600;
}

/* Fields */
.vf-field label {
    font-size: 14px; letter-spacing: 0; text-transform: none;
    color: var(--vf-muted); font-weight: 500;
}
.vf-field input, .vf-input-wrap input {
    border-radius: 12px; background: var(--vf-bg);
    border: 1px solid var(--vf-border); color: var(--vf-text);
    font-family: var(--ff-ui);
}
.vf-field input:focus, .vf-input-wrap input:focus {
    outline: none; border-color: var(--vf-accent); box-shadow: none;
}
.vf-eye { color: var(--vf-muted); }

/* Primary action */
.vf-btn, .vf-auth-form button[type="submit"], .vf-primary {
    border-radius: 10px !important;
    background: var(--vf-accent) !important; color: var(--vf-accent-ink) !important;
    font-family: var(--ff-ui); font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none;
    border: 0; box-shadow: none !important;
    position: relative; overflow: hidden;
    transition: color .2s;
}
.vf-btn:hover, .vf-auth-form button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(var(--accent-rgb),.26);
}
.vf-btn > *, .vf-auth-form button[type="submit"] > * { position: relative; z-index: 1; }

.vf-link, .vf-auth-form a { color: var(--vf-accent); text-decoration: none; }
.vf-link:hover, .vf-auth-form a:hover { text-decoration: underline; }

.vf-msg, .vf-error, .vf-note { border-radius: 12px; font-family: var(--ff-ui); }

/* Theme toggle — forge.css is not loaded here, so it carries its own styles
   (without the icon rules below, both sun and moon render at once). */
.vf-bar-btn {
    width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid var(--vf-border); background: transparent;
    color: var(--vf-muted); display: grid; place-items: center; cursor: pointer;
    transition: color .18s, background .18s, border-color .18s;
}
.vf-bar-btn:hover { color: var(--vf-text); background: rgba(var(--elev),.05); }
.vf-bar-btn .ico-moon { display: none; }
:root[data-theme="light"] .vf-bar-btn .ico-sun  { display: none; }
:root[data-theme="light"] .vf-bar-btn .ico-moon { display: block; }