/* ═══════════════════════════════════════════════════════════════════════════
   VideoForge — FORGE LAYER
   Loads after style.css and auth.css. style.css carries the palette and the
   light/dark tokens; this file rebuilds the parts that carry the most weight:

     · the top bar (one control cluster + account menu)
     · the step rail
     · the in-app hero
     · buttons, cards, inputs, drawer, modals

   Rules of the house: readable sizes (nothing under 13px), sentence case,
   real contrast, soft corners. Monospace is only for numbers.
   Everything here is additive, so screens this file does not name still work.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --ff-disp: 'Archivo', 'Helvetica Neue', sans-serif;
    --ff-ui:   'Inter Tight', -apple-system, sans-serif;
    --ff-mono: 'JetBrains Mono', ui-monospace, monospace;
    --cut:     cubic-bezier(.22,1,.36,1);
    --bar-h:   64px;
    /* The bar hugs the screen edges; the work column below stays centred. */
    --edge:    clamp(18px, 2.4vw, 44px);
}

body {
    font-family: var(--ff-ui);
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
    transition: background .3s ease, color .3s ease;
}

/* Ambient is ambient.css now — this file no longer has anything to suppress. */

/* ═══════════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════════ */
.header {
    height: var(--bar-h);
    padding: 0 var(--edge);
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}
/* The chip is injected by auth.js and the theme button by forge.js, so DOM
   order is a race. Flex order pins the layout regardless of who lands first. */
.header-top { gap: 12px; }
.header-top .logo-row       { order: 0; }
.header-top #vf-stage-readout { order: 1; margin-right: auto; }
.header-top #vf-account-chip  { order: 2; }
.header-top #vf-theme-btn     { order: 3; }
.header-top .project-menu-btn { order: 4; }

.logo-row { gap: 11px; }
.logo-mark {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--accent); border: 0; box-shadow: none;
    display: grid; place-items: center;
}
.logo-mark:hover { box-shadow: none; opacity: .9; }
.logo-mark svg { width: 18px; height: 18px; }
.logo-mark svg path { stroke: var(--accent-ink); stroke-width: 2; }

.logo-text {
    font-family: var(--ff-disp); font-weight: 800; font-stretch: 104%;
    font-size: 19px; letter-spacing: -.025em; line-height: 1;
    background: none; -webkit-text-fill-color: var(--text); color: var(--text);
}
.logo-badge { display: none; }

/* Live stage readout — plain sentence case, filled by forge.js */
#vf-stage-readout {
    display: flex; align-items: center; gap: 9px;
    margin-left: 18px; padding-left: 18px;
    border-left: 1px solid var(--border);
    font-size: 14px; color: var(--text-muted); white-space: nowrap;
}
#vf-stage-readout b { color: var(--text); font-weight: 600; }
#vf-stage-readout .vf-live-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
    animation: vf-pulse 2s ease-in-out infinite;
}
@keyframes vf-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 900px) { #vf-stage-readout { display: none; } }

/* ── Control cluster ─────────────────────────────────────────── */
#vf-account-chip,
#vf-account-chip.in-header {
    position: static; margin: 0; padding: 4px;
    display: flex; align-items: center; gap: 2px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: none; backdrop-filter: none;
    font-family: var(--ff-ui); overflow: visible;
}
#vf-account-chip .vf-balance-cell {
    display: flex; align-items: baseline; gap: 7px;
    padding: 6px 12px; border-radius: 8px; border: 0;
    cursor: pointer; transition: background .18s;
}
#vf-account-chip .vf-balance-cell:hover { background: var(--surface-2); }
#vf-account-chip .vf-balance-lab { font-size: 13px; color: var(--text-muted); }
#vf-account-chip .vf-balance {
    font-family: var(--ff-mono); font-size: 14px; font-weight: 600;
    color: var(--green); font-variant-numeric: tabular-nums; line-height: 1.2;
}
#vf-account-chip .vf-balance.low { color: var(--warn); }

#vf-account-chip .vf-ico {
    width: 34px; height: 34px; border: 0; border-radius: 8px;
    background: transparent; color: var(--text-muted);
    display: grid; place-items: center; cursor: pointer; position: relative;
    transition: color .18s, background .18s;
}
#vf-account-chip .vf-ico:hover { color: var(--text); background: var(--surface-2); }
#vf-account-chip .vf-ico svg { width: 17px; height: 17px; }
#vf-account-chip .vf-ico.is-open { color: var(--accent); background: var(--surface-3); }

#vf-account-chip .vf-bell-badge {
    position: absolute; top: 3px; right: 3px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--accent); color: var(--accent-ink);
    font-family: var(--ff-ui); font-size: 10px; font-weight: 700;
    line-height: 16px; text-align: center; box-shadow: none;
}

/* Account menu */
#vf-account-menu {
    position: absolute; top: calc(var(--bar-h) + 4px); right: var(--edge); z-index: 9600;
    min-width: 250px; display: none; flex-direction: column; overflow: hidden;
    background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 22px 54px rgba(var(--shadow-rgb), calc(.34 * var(--shadow-k)));
}
#vf-account-menu.open { display: flex; }
#vf-account-menu .vf-menu-id { padding: 14px 16px; border-bottom: 1px solid var(--border); }
#vf-account-menu .vf-menu-lab { font-size: 13px; color: var(--text-dim); margin-bottom: 3px; }
#vf-account-menu .vf-email {
    font-size: 14px; color: var(--text); font-weight: 500;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#vf-account-menu button,
#vf-account-menu a {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 16px; border: 0; background: transparent;
    color: var(--text-muted); font-family: var(--ff-ui); font-size: 14.5px;
    text-align: left; text-decoration: none; cursor: pointer;
    transition: background .16s, color .16s;
}
#vf-account-menu button:hover, #vf-account-menu a:hover { background: var(--surface); color: var(--text); }
#vf-account-menu .accent { color: var(--accent); font-weight: 600; }
#vf-account-menu .danger:hover { color: var(--red); }
#vf-account-menu svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .8; }

/* Theme toggle + projects button share the cluster's language */
.vf-bar-btn, .project-menu-btn {
    width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-muted); backdrop-filter: none;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; margin-left: 8px;
    transition: color .18s, background .18s, border-color .18s;
}
.vf-bar-btn:hover, .project-menu-btn:hover {
    transform: none; box-shadow: none;
    color: var(--text); background: var(--surface); border-color: var(--border-2);
}
.vf-bar-btn svg, .project-menu-btn svg { width: 17px; height: 17px; }
.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; }

#vf-notif-panel {
    top: calc(var(--bar-h) + 6px); right: var(--edge); border-radius: 14px;
    background: var(--bg-2); border-color: var(--border);
    font-family: var(--ff-ui); backdrop-filter: none;
}

@media (max-width: 620px) {
    #vf-account-chip .vf-balance-lab { display: none; }
    #vf-account-menu { right: 12px; left: 12px; min-width: 0; }
}

/* Phones: the bar must always end with the projects button on screen.
   Every piece shrinks, nothing wraps, nothing gets pushed past the edge —
   the drawer and theme buttons were the first casualties before. */
@media (max-width: 700px) {
    .header { padding: 0 12px; }
    .header-top { gap: 8px; }
    .header-top > * { flex-shrink: 0; }
    .logo-row { gap: 8px; }
    .logo-mark { width: 30px; height: 30px; border-radius: 8px; }
    .logo-text { font-size: 17px; }
    #vf-account-chip { padding: 3px; }
    #vf-account-chip .vf-balance-cell { padding: 6px 8px; }
    .vf-bar-btn, .project-menu-btn { width: 34px; height: 34px; margin-left: 0; border-radius: 9px; }
}
/* Below ~470px the wordmark goes; the accent logo mark still says who we
   are, and the balance + all four controls keep full touch targets. */
@media (max-width: 470px) {
    .logo-text { display: none; }
    #vf-account-chip .vf-ico { width: 30px; height: 30px; }
    #vf-account-chip .vf-balance { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.app-container { max-width: 920px; padding: calc(var(--bar-h) + 40px) 24px 90px; }
@media (max-width: 700px) { .app-container { padding: calc(var(--bar-h) + 26px) 18px 70px; } }

/* style.css breaks the landing step out to a wider measure, which put the hero
   and the step rail on two different left edges. One measure instead. */
@media (min-width: 1060px) {
    #step-landing.step-section { width: auto; max-width: none; margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   STEP RAIL
   ═══════════════════════════════════════════════════════════════ */
.step-bar {
    margin-bottom: 44px; padding: 6px;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--bg-2); justify-content: stretch;
}
.step-item { flex: 1; min-width: 0; }
.step-chip {
    width: 100%; border: 0; border-radius: 10px; background: transparent;
    backdrop-filter: none; padding: 9px 8px; gap: 9px;
    justify-content: center; transition: background .3s var(--transition);
}
.step-dot {
    width: 21px; height: 21px; border-radius: 50%;
    border: 1.5px solid var(--border-2); background: transparent;
    font-family: var(--ff-ui); font-size: 11px; font-weight: 700; color: var(--text-dim);
}
.step-label { font-family: var(--ff-ui); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--text-dim); text-transform: none; }
.step-line { display: none; }

.step-chip:has(.step-dot.current) { background: rgba(var(--accent-rgb),.10); border: 0; box-shadow: none; transform: none; }
.step-chip:has(.step-dot.current) .step-label { color: var(--accent); font-weight: 600; text-shadow: none; }
.step-dot.current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: none; }
.step-dot.current::after { display: none; }

.step-chip:has(.step-dot.done) { background: transparent; border: 0; }
.step-chip:has(.step-dot.done) .step-label { color: var(--text-muted); }
.step-dot.done { background: var(--green); border-color: var(--green); color: var(--accent-ink); box-shadow: none; }
.step-dot.active { border-color: var(--accent); background: transparent; color: var(--accent); }

@media (max-width: 820px) {
    .step-chip { padding: 9px 4px; }
    .step-chip:not(:has(.step-dot.current)) .step-label { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   IN-APP HERO
   The home screen is the engine's control room: copy and actions on
   the left, the machine running on the right.
   ═══════════════════════════════════════════════════════════════ */
.landing-hero, .landing-hero--v2 { text-align: left; padding: 6px 0 0; }
.hero-icon, .pulse-glow { display: none !important; }

.hero-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px; align-items: start;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } }

.hero-cta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ghost-btn--lg { padding: 14px 22px; font-size: 15px; }

/* A line of text where a pill of four cells used to be. It opens with the
   calibration bars — powder, lilac, blush. */
.hero-eyebrow {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; color: var(--text-dim); margin-bottom: 24px;
}
.hero-eyebrow::before {
    content: ''; width: 24px; height: 4px; border-radius: 2px; flex-shrink: 0;
    background: linear-gradient(90deg,
        var(--wash-1) 0 33.4%, var(--wash-2) 33.4% 66.7%, var(--wash-3) 66.7% 100%);
}
.hero-live-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim);
    flex-shrink: 0; animation: vf-pulse 2s ease-in-out infinite;
}

/* ── The engine panel ─────────────────────────────────────────────
   Same instrument as the landing page's: five stage nodes on a rail,
   the execution log underneath. Working breathes periwinkle; done
   settles powder. */
.engine {
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--bg-2); overflow: hidden;
    font-family: var(--ff-mono);
    box-shadow: var(--lift), var(--shadow-2);
}
.engine-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 15px; border-bottom: 1px solid var(--border);
    font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-dim);
}
.engine-bar .engine-live {
    display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted);
}
.engine-bar .hero-live-dot { background: var(--accent); }

.engine-stages { padding: 7px 15px 9px; }
.engine-stage {
    position: relative; display: flex; align-items: center; gap: 12px;
    padding: 8px 0 8px 24px; font-size: 12px;
}
.engine-stage::before {
    content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px;
    background: var(--border);
}
.engine-stage:first-child::before { top: 50%; }
.engine-stage:last-child::before  { bottom: 50%; }
.engine-stage i {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 11px; height: 11px; border-radius: 50%;
    border: 1.5px solid var(--border-2); background: var(--bg-2);
    transition: border-color .35s, background .35s, box-shadow .35s;
}
.engine-stage b { font-weight: 500; color: var(--text-dim); flex: 1; transition: color .3s; }
.engine-stage span {
    font-size: 11px; color: var(--text-dim);
    font-variant-numeric: tabular-nums; transition: color .3s;
}
.engine-stage.on i {
    border-color: var(--accent); background: var(--accent);
    animation: vf-node-breathe 1.6s ease-in-out infinite;
}
.engine-stage.on b { color: var(--text); }
.engine-stage.on span { color: var(--accent); }
.engine-stage.done i { border-color: var(--green); background: var(--green); animation: none; }
.engine-stage.done b { color: var(--text-muted); }
@keyframes vf-node-breathe {
    0%, 100% { box-shadow: 0 0 0 3px var(--accent-glow); }
    50%      { box-shadow: 0 0 0 6px var(--accent-glow); }
}

.engine-log {
    border-top: 1px solid var(--border); background: var(--bg-3);
    padding: 9px 15px; height: 92px; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 5px;
}
.engine-log div {
    font-size: 10.5px; line-height: 1.4; color: var(--text-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    animation: vf-log-in .32s var(--cut);
}
.engine-log div b { color: var(--text-muted); font-weight: 500; }
@keyframes vf-log-in { from { opacity: 0; transform: translateY(7px); } }

.hero-title, .hero-title--xl {
    font-family: var(--ff-disp); font-weight: 900; font-stretch: 106%;
    font-size: clamp(30px, 4.8vw, 50px); line-height: 1.04; letter-spacing: -.035em;
    text-transform: none; margin-bottom: 20px; min-height: 0;
    /* Ink at the top falling into the accent at the baseline — colour in the
       headline itself, not beside it. */
    background: linear-gradient(160deg, var(--text) 38%, var(--accent) 115%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--accent);
}
.hero-title .cursor { width: 3px; height: .8em; background: var(--accent); -webkit-text-fill-color: var(--accent); margin-left: 5px; }
.hero-desc, .hero-desc--xl { font-size: 17px; color: var(--text-muted); line-height: 1.68; max-width: 52ch; margin: 0 0 32px; }

/* What happens next: three hairline rows, no cards. It is an ordered list
   because the order is the information. */
.hero-flow {
    display: block; margin-top: 44px; padding: 0; border: 0;
    border-top: 1px solid var(--border); list-style: none; max-width: 460px;
}
.hero-flow li {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 0; border-bottom: 1px solid var(--border);
    font-size: 15px; color: var(--text-muted);
}
.hero-flow-num {
    font-family: var(--ff-mono); font-size: 12px; color: var(--text-dim);
    width: 18px; flex-shrink: 0; letter-spacing: 0;
    background: none; border: 0; border-radius: 0; height: auto;
    display: inline-block; text-align: left;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.cta-btn, .cta-btn--xl {
    /* An indigo→violet gradient that drifts slowly — alive, not flashing. */
    background: linear-gradient(120deg, var(--accent), var(--purple), var(--accent));
    background-size: 220% 100%;
    animation: vf-grad-pan 8s ease-in-out infinite alternate;
    color: var(--accent-ink);
    border-radius: var(--radius-sm); border: 0;
    box-shadow: 0 4px 18px var(--accent-glow);
    font-family: var(--ff-ui); font-weight: 600; font-size: 15px;
    letter-spacing: 0; text-transform: none; padding: 13px 24px;
    position: relative; overflow: hidden;
    transition: transform .2s var(--cut), box-shadow .2s, opacity .2s;
}
@keyframes vf-grad-pan { from { background-position: 0% 0; } to { background-position: 100% 0; } }
/* .slide-up starts at opacity 0 and relies on its slideUp animation to become
   visible; the gradient drift above would win the cascade and cancel it,
   leaving the button permanently invisible — so run both together here. */
.cta-btn.slide-up {
    animation: vf-grad-pan 8s ease-in-out infinite alternate,
               slideUp 0.7s var(--transition) forwards;
    animation-delay: 0s, var(--delay, 0s);
}
.cta-btn--xl { padding: 15px 30px; font-size: 16px; }
.cta-btn::before, .cta-btn::after { display: none; }
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px var(--accent-glow); color: var(--accent-ink); }
/* A sheen passes over the fill once per hover — the same light that moves
   through the landing page's buttons. It never loops while the cursor rests. */
.cta-btn::after {
    display: block; content: ''; position: absolute; top: -4px; bottom: -4px;
    left: -60%; width: 44%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
    transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.cta-btn:hover::after { animation: vf-sheen .7s var(--cut); }
@keyframes vf-sheen { from { left: -60%; opacity: 1; } to { left: 118%; opacity: 1; } }
.cta-btn:active { transform: none; }
.cta-btn:disabled { opacity: .35; transform: none !important; box-shadow: none !important; }
.cta-btn--danger { background: var(--red); color: #fff; }

.ghost-btn {
    border-radius: var(--radius-sm); border: 1px solid var(--border-2);
    background: transparent; color: var(--text-muted);
    font-family: var(--ff-ui); font-size: 14px; font-weight: 500;
    padding: 9px 16px; backdrop-filter: none;
    transition: color .18s, border-color .18s, background .18s;
}
.ghost-btn:hover { color: var(--text); background: var(--surface); transform: none; box-shadow: none; }
.ghost-btn--accent {
    color: var(--accent);
    border-color: rgba(var(--accent-rgb),.35);
    background: rgba(var(--accent-rgb),.10);
    font-weight: 600;
}
.ghost-btn--accent:hover { background: rgba(var(--accent-rgb),.18); color: var(--accent); }
.ghost-btn--danger { color: var(--red); border-color: rgba(var(--red-rgb),.4); }

/* ═══════════════════════════════════════════════════════════════
   ICONS
   Everything the UI used to draw with emoji is now an inline SVG that
   inherits currentColor (see icons.js). These rules only handle sizing
   and alignment — the colour always comes from the surrounding text.
   ═══════════════════════════════════════════════════════════════ */
.vf-ico { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }

/* The emoji they replaced were sized with font-size, which does nothing to
   an SVG — each container needs a real box now. */
.qp-detail-visual-icon {
    font-size: 0; filter: none;
    display: grid; place-items: center;
    color: var(--text-muted);
}
.qp-detail-visual-icon .vf-ico { width: 34px; height: 34px; vertical-align: 0; }

.modal-icon {
    font-size: 0; line-height: 0; margin-bottom: 14px;
    display: grid; place-items: center;
    width: 46px; height: 46px; margin-left: auto; margin-right: auto;
    border-radius: 50%; background: var(--surface-2); color: var(--text);
}
.modal-icon .vf-ico { width: 22px; height: 22px; vertical-align: 0; }

.sf-icon, .music-ai-icon, .fallback-icon, .generation-choice-ic {
    font-size: 0; display: inline-grid; place-items: center; color: inherit;
}
.sf-icon .vf-ico { width: 18px; height: 18px; vertical-align: 0; }
.music-ai-icon .vf-ico, .generation-choice-ic .vf-ico { width: 20px; height: 20px; vertical-align: 0; }
.fallback-icon .vf-ico { width: 22px; height: 22px; vertical-align: 0; }

.vf-modal-icon { font-size: 0; }
.vf-modal-icon .vf-ico { width: 24px; height: 24px; vertical-align: 0; }

/* ═══════════════════════════════════════════════════════════════
   DEPTH
   With no accent hue, elevation is the only thing left that can build
   hierarchy — so it has to be real. Every raised surface gets three
   things: a value step away from what it sits on, a lit top edge, and a
   shadow sized to how far off the page it is meant to float.
   ═══════════════════════════════════════════════════════════════ */

/* The main work panel. It used to be a translucent blur over the page,
   which at these values meant "the same grey, slightly blurred". */
.card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: var(--lift), var(--shadow-2);
    transition: box-shadow .3s var(--cut), border-color .3s, transform .3s var(--cut);
}
.card:hover { box-shadow: var(--lift), var(--shadow-3); border-color: var(--border); }

/* Wells: fields, drop targets and anything the eye should read as cut into
   the panel rather than sitting on it. Inverted lighting — dark edge on top. */
.card input[type="text"], .card input[type="search"], .card input[type="email"],
.card input[type="number"], .card textarea, .card select,
.upload-zone, .script-input, .title-input {
    background: var(--bg-3);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 2px rgba(var(--shadow-rgb), calc(.18 * var(--shadow-k)));
}
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12),
                inset 0 1px 2px rgba(var(--shadow-rgb), calc(.10 * var(--shadow-k)));
}

/* The step rail floats above the page, so it gets the panel treatment too. */
.step-bar { box-shadow: var(--lift), var(--shadow-1); }

/* Modals sit furthest from the page and get the deepest shadow in the set. */
.qp-modal, .modal-card, .vf-modal { box-shadow: var(--lift), var(--shadow-4); }

/* Selectable tiles: flat at rest, lifted on hover, pressed when chosen.
   The state is legible without a single drop of colour. */
.qp-option, .voice-source-btn, .provider-card, .voice-card, .style-card {
    box-shadow: var(--shadow-1);
    transition: transform .22s var(--cut), box-shadow .22s var(--cut),
                border-color .22s, background .22s;
}
.qp-option:hover, .voice-source-btn:hover, .provider-card:hover,
.voice-card:hover, .style-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--lift), var(--shadow-2);
}
.qp-option.selected, .voice-source-btn.active, .provider-card.active,
.voice-card.selected, .style-card.selected {
    transform: none;
    box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-1);
}

/* ═══════════════════════════════════════════════════════════════
   SURFACES
   ═══════════════════════════════════════════════════════════════ */
.project-drawer { background: var(--bg-2); border-left: 1px solid var(--border); backdrop-filter: none; }
.project-drawer-title { font-family: var(--ff-disp); font-weight: 800; font-size: 21px; letter-spacing: -.025em; text-transform: none; }
/* The calibration bars under the drawer title — same mark as everywhere. */
.project-drawer-title::after {
    content: ''; display: block; width: 28px; height: 4px; border-radius: 2px;
    margin-top: 9px;
    background: linear-gradient(90deg,
        var(--wash-1) 0 33.4%, var(--wash-2) 33.4% 66.7%, var(--wash-3) 66.7% 100%);
}
.project-drawer-subtitle, .project-drawer-note { font-size: 14px; color: var(--text-muted); }
.project-search-input {
    border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border);
    font-family: var(--ff-ui); font-size: 14px; color: var(--text);
}
.project-search-input:focus { border-color: var(--accent); outline: none; }

/* Quality picker */
.qp-modal { border-radius: 18px; background: var(--bg-2); border: 1px solid var(--border); }
.qp-title { font-family: var(--ff-disp); font-weight: 800; font-size: 26px; text-transform: none; letter-spacing: -.03em; }
.qp-sub { font-size: 15px; color: var(--text-muted); }
.qp-option {
    border-radius: 12px; border: 1px solid var(--border); background: var(--bg);
    transition: background .22s, border-color .22s;
}
.qp-option::before { display: none; }
.qp-option:hover { background: var(--surface); border-color: var(--border-2); }
.qp-option.selected { background: rgba(var(--accent-rgb),.08); border-color: var(--accent); }
.qp-option-name { font-family: var(--ff-ui); font-weight: 600; font-size: 16px; text-transform: none; letter-spacing: -.015em; }
.qp-option-pill, .qp-option-badge {
    border-radius: 999px; font-family: var(--ff-ui); font-size: 12px;
    font-weight: 600; letter-spacing: 0; text-transform: none; padding: 3px 10px;
}
.qp-close { border-radius: 9px; }

/* ── Selection: ember means "selected", teal means "done" ── */
.voice-source-btn, .provider-card, .voice-card, .voice-row {
    border-radius: 12px; border-color: var(--border); background: var(--bg-2);
    transition: border-color .2s, background .2s;
}
.voice-source-btn:hover, .provider-card:hover, .voice-card:hover, .voice-row:hover {
    transform: none; border-color: var(--border-2); background: var(--surface);
}
.voice-source-btn.active, .provider-card.active, .voice-card.selected, .voice-row.selected {
    border-color: var(--accent); background: rgba(var(--accent-rgb),.08); box-shadow: none;
}
.voice-source-btn span, .provider-card span { font-family: var(--ff-ui); font-weight: 600; font-size: 16px; letter-spacing: -.015em; }
.voice-source-btn small, .provider-card small, .voice-card small, .voice-row small { color: var(--text-muted); font-size: 13.5px; }
.voice-source-btn.active small, .provider-card.active small { color: var(--accent); }

/* Inputs */
input[type="text"], input[type="search"], input[type="email"], input[type="number"], textarea, select {
    border-radius: var(--radius-sm) !important; font-family: var(--ff-ui); font-size: 15px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent) !important; }
::placeholder { color: var(--text-dim); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(var(--elev),.18); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--elev),.3); }

/* Footer */
.footer {
    font-family: var(--ff-ui); font-size: 14px; letter-spacing: 0;
    text-transform: none; color: var(--text-dim);
}

/* Loading overlay */
#vf-loading-overlay { background: var(--bg); font-family: var(--ff-ui); }
.vf-loading-brand {
    font-family: var(--ff-disp); font-weight: 900; font-stretch: 106%;
    font-size: 28px; letter-spacing: -.035em; text-transform: none;
    background: none; -webkit-text-fill-color: var(--text); color: var(--text);
}
/* The calibration bars — powder, lilac, blush — under the wordmark while
   the app loads: the monitor warming up before the programme. */
.vf-loading-brand::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-spinner { border-radius: 50%; border-color: var(--border); border-top-color: var(--accent); }
.vf-loading-text { font-family: var(--ff-ui); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENTS
   The pieces the work screens are actually built from. Before this
   they were flat grey rectangles that all sat at the same value, which
   is what made the app read as a document rather than a tool.
   ═══════════════════════════════════════════════════════════════ */

/* ── Segmented choice (voiceover source, provider, style) ──────────
   Two states that must be unmistakable at a glance: chosen sits in a
   filled well with a solid ring; not-chosen is a plain raised tile. */
.voice-source-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.voice-source-btn {
    background: var(--bg-2);
    border: 1px solid var(--border);
    padding: 15px 17px; min-height: 0;
}
.voice-source-btn span { font-size: 15px; font-weight: 650; margin-bottom: 3px; }
.voice-source-btn.active {
    background: rgba(var(--accent-rgb),.08);
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.voice-source-btn.active small { color: var(--text-muted); }
/* Disabled is a real state here — TTS can be unavailable — so it has to
   read as unavailable rather than merely quiet. */
.voice-source-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.voice-source-btn:disabled:hover { transform: none; box-shadow: none; }

/* ── Drop zones ────────────────────────────────────────────────────
   A dashed well cut into the panel, with the dashes tightening and the
   icon lifting as you approach. Loaded is solid — the target is filled. */
.drop-zone {
    border: 1.5px dashed var(--border-2);
    background: var(--bg-3);
    border-radius: 14px; padding: 30px 16px;
    box-shadow: inset 0 1px 2px rgba(var(--shadow-rgb), calc(.14 * var(--shadow-k)));
    transition: border-color .22s var(--cut), background .22s var(--cut),
                transform .22s var(--cut), box-shadow .22s var(--cut);
}
.drop-zone:hover {
    border-color: var(--accent);
    background: var(--surface-2);
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}
.drop-zone.loaded {
    border-style: solid; border-color: var(--accent);
    background: var(--bg-3);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.drop-icon { color: var(--text-dim); }
.drop-zone:hover .drop-icon { color: var(--text); transform: scale(1.08); }
.drop-zone.loaded .drop-icon { color: var(--text); }

/* ── Chips ─────────────────────────────────────────────────────────
   The selected chip was white text on a fill that is white in the dark
   theme — the label vanished. Fills always pair with --accent-ink. */
.niche-chip {
    padding: 8px 14px; font-size: 13px; font-weight: 500;
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--text-muted);
    box-shadow: var(--shadow-1);
    transition: transform .18s var(--cut), background .18s, color .18s,
                border-color .18s, box-shadow .18s;
}
.niche-chip:hover {
    color: var(--text); border-color: var(--border-2);
    background: var(--surface-2); transform: translateY(-1px);
}
.niche-chip.selected {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
    box-shadow: var(--shadow-2);
    font-weight: 600;
}
.niche-chip.selected:hover { background: var(--accent); color: var(--accent-ink); }

/* ── Field labels ──────────────────────────────────────────────────
   Small mono caps with a rule, so a form reads as a set of labelled
   fields rather than a wall of sentences. */
.input-label, .field-label {
    font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-dim);
}
/* Hints live inside the label element, so they inherit the caps treatment
   unless they opt out. A sentence set in tracked-out mono caps is unreadable. */
.field-label .niche-optional, .input-label small, .field-label small {
    font-family: var(--ff-ui); font-size: 13px; font-weight: 400;
    letter-spacing: 0; text-transform: none; color: var(--text-dim);
    margin-left: 10px;
}

/* ── Panel headings ────────────────────────────────────────────────
   The card title was 17px next to 15px body — not enough of a step to
   register as a heading. */
.card-title {
    font-family: var(--ff-disp); font-weight: 800; font-stretch: 104%;
    font-size: 22px; letter-spacing: -.025em; margin-bottom: 6px;
}
.card-subtitle { font-size: 14.5px; color: var(--text-muted); margin-bottom: 24px; }

/* ── Project cards ─────────────────────────────────────────────────
   These were a near-invisible wash over the drawer. They are the main
   thing in that panel, so they get to be real cards. */
/* Each card carries a file-tab rail in one of the grade hues — powder,
   lilac, blush, rotating — so the drawer reads as a drawer of colour-tabbed
   folders rather than a stack of grey slabs. */
.project-item {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--wash-1);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
}
.project-item:nth-child(3n+2) { border-left-color: var(--wash-2); }
.project-item:nth-child(3n)   { border-left-color: var(--wash-3); }
.project-item:hover {
    background: var(--bg-2);
    border-color: var(--border-2);
    box-shadow: var(--lift), var(--shadow-2);
}
.project-item.is-selected { box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-1); }

/* The drawer is a raised sheet over the page, not a tinted overlay. */
.project-drawer { box-shadow: var(--shadow-4); }
.project-drawer-head { border-bottom: 1px solid var(--border); }

/* Status pills: state through weight and a well, never through hue. */
.project-status, .proj-badge {
    font-family: var(--ff-mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
    background: var(--surface-2); color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px;
}