/* Folio look for the web app (PREVIEW, branch design/folio-webapp-preview, 2026-10-21).
   NOT for release before Djoko approves Folio. theme.css holds the Folio numbers; this file only
   reaches the places that set a face or colour of their own. Loaded LAST in <head>.
   Same look as website/folio.css on design/folio-site-preview: Fraunces for headlines only (never
   below 17 px), Plus Jakarta Sans for all UI, one solid burgundy primary action, no gradient, no glow. */

/* ---- Headlines: Fraunces ---- */
.auth-title, .library-title, .library-empty-title, .pro-hero-title,
.ws-feat-title, .ws-placeholder-title,
#vt-phone h1, #vt-phone h2, #auth-overlay .auth-title {
  font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: -.01em !important;
}

/* ---- The phone shell: no gradient, Plus Jakarta Sans everywhere ---- */
#vt-phone { --p-grad: var(--p-accent); }
#vt-phone .p-mic { box-shadow: 0 4px 14px rgba(28,26,23,.16) !important; }
#vt-phone .p-mic.rec { background: var(--stop) !important; box-shadow: 0 4px 14px rgba(28,26,23,.16) !important; }

/* ---- Phone sign-in: its own token block, pointed at Folio ---- */
@media (max-width: 900px) {
  #auth-overlay {
    --p-accent: var(--accent); --p-ink: var(--ink); --p-ink2: var(--secondary); --p-muted: var(--muted); --p-faint: var(--faint);
    --p-page: var(--page); --p-card: var(--card); --p-hair2: var(--hair-2);
    font-family: var(--font-ui) !important;
  }
  :root[data-theme="dark"] #auth-overlay {
    --p-ink: var(--ink); --p-ink2: var(--secondary); --p-muted: var(--muted); --p-faint: var(--faint);
    --p-page: var(--page); --p-card: var(--card); --p-hair2: var(--hair-2);
  }
  #auth-overlay .auth-input, #auth-overlay .auth-submit, #auth-overlay .auth-google { font-family: var(--font-ui) !important; }
  :root[data-theme="dark"] #auth-overlay .auth-submit:disabled { background: var(--sunken-2); color: var(--muted); }
  body.vt-phone #vt-update, #vt-install [role="dialog"] { font-family: var(--font-ui) !important; }
}

/* ---- Dark: accent TEXT takes the light rose, backgrounds keep the deep burgundy ---- */
:root[data-theme="dark"] :is(.auth-sub a, .auth-toggle button, .ai-note-copy, #libitem-back) { color: var(--blue-w) !important; }

/* ---- The chip that marks "your choice" stays ink, never a second burgundy ---- */
.vt-chip.auto { border-color: rgba(14,122,90,.35); }
.vt-chip.locked { border-color: var(--hair-2); }

/* ---- ONE burgundy per screen: on Dictate it is the mic. Every other strong button is ink. ---- */
:root { --font-mono: var(--font-ui); }   /* Folio: Plus Jakarta Sans for all UI, the mono labels included */
#auth-overlay .p-auth-foot { font-family: var(--font-ui) !important; }
:is(#ws-done-btn, #ws-upgrade-btn, .ws-done-btn, .ws-upgrade-btn) { background: var(--ink) !important; color: var(--page) !important; box-shadow: none !important; }
.ws-nav-icon.active-dot, .toggle-pill.on, .ws-meter-fill { background: var(--ink) !important; }
.ws-meter-card { background: var(--sunken) !important; border-color: var(--hair) !important; }
.ws-meter-label, .ws-listening-row, .ws-cmd-chip.primary, .ws-install-btn { color: var(--secondary) !important; }
.ws-install-btn { border-color: var(--hair-2) !important; }
.ws-wv-bar, .wv-bar { background: var(--faint) !important; }

/* ---- Phone tab bar: the active tab is ink on a sunken pill; burgundy stays for the primary action ---- */
#vt-phone .p-tab.on .pill { background: var(--sunken-2) !important; color: var(--ink) !important; }
#vt-phone .p-tab.on .lbl { color: var(--ink) !important; }
/* ---- Phone, dark: accent TEXT on the near-black page takes the light rose (deep burgundy is ~2:1 there) ---- */
:root[data-theme="dark"] #vt-phone :is(.p-cap.acc, .p-tech.acc, .p-back, .p-text, .p-quiet, .p-link, .p-receipt .seelog),
:root[data-theme="dark"] #auth-overlay :is(.auth-error, .auth-toggle, .auth-toggle #pwa-toggle-btn) { color: var(--blue-w) !important; }

/* ---- Phone leftovers from the slate palette ---- */
#vt-phone .p-btn:disabled, #auth-overlay .auth-submit:disabled { background: var(--sunken-2) !important; color: var(--muted) !important; }
#vt-phone .p-chip.locked { border-color: var(--hair-2) !important; }
#vt-phone .p-upd { background: var(--ink) !important; color: var(--page) !important; }
#vt-phone .p-upd .p-btn { background: var(--page) !important; color: var(--ink) !important; }