/* =====================================================================
   Folio skin: v4 apps (onboarding_v4: apps home, dashboard, results,
   factories, compare). Loaded only with <html class="folio folio-v4">.
   Every rule is scoped to html.folio, so the default UI never changes.
   Order: tokens -> base -> binding rail -> shared components -> pages
   -> Tailwind utility bridge (the v4 markup is mostly Tailwind).
   ===================================================================== */

/* ---------- 1. Tokens: re-point the per-page :root variables ----------
   v4 pages declare --ink/--line/--paper/--orange-* in an inline :root that
   comes after tokens.css; html.folio is more specific, so these win. */
html.folio {
  --paper: #F7F3EC;
  --ink: #1D1915;
  --line: #E6DED1;
  --ink-soft: #4B443C;
  --orange-300: #F2A27F;
  --orange-400: #EC7650;
  --orange-500: #E4532C;
  --red-300: #F2A27F;
  --pink-200: #F6CDBF;
  --docsie-coral: #E4532C;
  --docsie-coral-hover: #B23D1B;
  --docsie-beige-light: #F1EBE1;
  --coral: #E4532C;
  --coral-deep: #E4532C;
  --sel: #FFF8F4;           /* selected row / tile wash (folio .tbl tr.sel) */
  --ember-hover: #D94A24;
  --ember-line: #F3C2B1;
}
html.folio .v4u-app,
html.folio .v4u-embedded,
html.folio .v4u-workspace,
html.folio .v4u-embedded .v4u-sticky {
  --v4u-accent: #E4532C;
  --v4u-accent-hover: #D94A24;
  font-family: var(--f-ui);
  color: var(--ink);
}

/* ---------- 2. Base ---------- */
/* folio-base.css loses its own body rule (its header comment closes early at "docsie-folio-*"), so re-assert it here. */
html.folio body { font-family: var(--f-ui); background-color: var(--paper) !important; color: var(--ink); -webkit-font-smoothing: antialiased; }
html.folio .aurora-effect,
html.folio .aurora { display: none !important; }
/* Paper grain: the only texture in Folio (folio.css body::after). */
html.folio body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
html.folio :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
html.folio .scrollbar-thin { scrollbar-color: var(--line-2) transparent; }
html.folio .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
html.folio .scrollbar-thin::-webkit-scrollbar-thumb { background: var(--line-2); }

/* ---------- 3. The binding rail (partials/app_sidebar.html, .v4u-side) ---------- */
html.folio .v4u-side {
  background: var(--binding);
  color: var(--binding-text);
  border-right: 1px solid #000;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04);
  scrollbar-width: none;
}
html.folio .v4u-side::-webkit-scrollbar { display: none; }
html.folio .v4u-brand { color: #F3E6D8; font-family: var(--f-display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
/* The black logo, drawn in the logo orange (#F37D45, logo-only). */
html.folio .v4u-brand img { filter: invert(55%) sepia(77%) saturate(935%) hue-rotate(331deg) brightness(99%) contrast(92%); }
html.folio .v4u-rail-toggle { color: #7D7266; }
html.folio .v4u-rail-toggle:hover { background: var(--binding-2); color: #fff; }
html.folio .v4u-nav { gap: 2px; }
html.folio .v4u-nav a {
  position: relative; color: var(--binding-text); font-size: 13px; font-weight: 500; border-radius: 9px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
html.folio .v4u-nav a svg { color: currentColor; }
html.folio .v4u-nav a:hover { background: var(--binding-2); color: #fff; }
html.folio .v4u-nav a.is-active,
html.folio .v4u-nav a.is-active:hover { background: var(--binding-2); color: #fff; font-weight: 600; }
html.folio .v4u-nav a.is-active svg { color: #fff; }
/* The ember marker sits on the rail's left edge (folio .rail a.on::before). */
html.folio .v4u-nav a.is-active::before {
  content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ember);
}
html.folio.v4u-rail-collapsed .v4u-nav a.is-active::before { left: -10px; }
html.folio .v4u-nav-upgrade { border-top-color: rgba(255,255,255,.08); }
html.folio .v4u-side .v4u-nav-upgrade a svg,
html.folio .v4u-side .v4u-nav-upgrade a svg.text-amber-500 { color: #F79B6E; }
html.folio .v4u-me { border-top-color: rgba(255,255,255,.08); }
html.folio .v4u-side .v4u-account:hover { background: var(--binding-2); }
html.folio .v4u-side .v4u-me-button .text-gray-900 { color: #F3E6D8; }
html.folio .v4u-side .v4u-me-button .text-gray-500,
html.folio .v4u-side .v4u-me-button .text-gray-400 { color: var(--binding-text); }
html.folio .v4u-avatar { background: #3A322A; color: #F3E6D8; font-family: var(--f-ui); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
html.folio .v4u-me-menu {
  background: var(--surface); border-color: var(--line); border-radius: 12px; box-shadow: var(--shadow-2); padding: 6px;
}
html.folio .v4u-me-menu a,
html.folio .v4u-me-menu button { color: var(--ink); font-size: 13px; border-radius: 7px; padding: 7px 10px; }
html.folio .v4u-me-menu a:hover,
html.folio .v4u-me-menu button:hover { background: var(--sunk); }
html.folio .v4u-me-sep { border-top-color: var(--line); margin-top: 5px; padding-top: 5px; }

/* ---------- 4. Shared v4 components (unlock_results_assets.html) ---------- */
html.folio .v4u-app:not(.v4u-side) { background: transparent; }
html.folio .v4u-top { background: rgba(247,243,236,.88); border-bottom-color: var(--line); }
html.folio .v4u-search svg { color: var(--muted); }
html.folio .v4u-search input { border-color: var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); }
html.folio .v4u-search input:focus { border-color: var(--ember); box-shadow: 0 0 0 3px var(--focus); }
html.folio .v4u-search kbd { font: 500 10.5px var(--f-mono); color: var(--muted); border-color: var(--line); border-bottom-width: 2px; border-radius: 4px; }
html.folio .v4u-new,
html.folio .v4u-secondary,
html.folio .v4u-outline,
html.folio .v4w-app-menu > button {
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
  font-weight: 600; box-shadow: 0 1px 0 rgba(40,25,10,.04);
}
html.folio .v4u-new:hover,
html.folio .v4u-secondary:hover,
html.folio .v4u-outline:hover,
html.folio .v4w-app-menu > button:hover { border-color: var(--faint); background: var(--surface); }
html.folio .v4u-primary {
  background: var(--ember); color: #fff; border-radius: var(--r-md); font-weight: 600;
  box-shadow: 0 1px 0 var(--ember-ink), 0 6px 14px -8px rgba(228,83,44,.8);
}
html.folio .v4u-primary:hover { background: var(--ember-hover); }
html.folio .v4u-lang { color: var(--ink-2); }
html.folio .v4u-lang select { border-color: var(--line-2); border-radius: var(--r-md); color: var(--ink); }
html.folio .v4u-crumbs,
html.folio .v4u-crumbs a { color: var(--muted); }
html.folio .v4u-crumbs a:hover { color: var(--ink); }
html.folio .v4u-h1 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
html.folio .v4u-card { background: var(--surface); border-color: var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
html.folio .v4u-card-head h2 { font: var(--t-title); color: var(--ink); }
html.folio .v4u-icon-lg { color: var(--ink-2); }
html.folio .v4u-icon { color: var(--muted); }
html.folio .v4u-chip { background: var(--sunk); color: var(--ink-2); }
html.folio .v4u-doc { border-color: var(--line); border-radius: 12px; }
html.folio .v4u-thumb { border-color: var(--line); background: var(--paper); }
html.folio .v4u-thumb-title { color: var(--ink-2); }
html.folio .v4u-thumb-page i { background: var(--sunk); }
html.folio .v4u-pill,
html.folio .v4u-free { background: var(--live-wash); color: var(--live); }
html.folio .v4u-link { color: var(--ink-2); }
html.folio .v4u-link-small { color: var(--muted); }
html.folio .v4u-lock { color: var(--ink-2); }
html.folio .v4u-lock:hover { background: var(--sunk); }
html.folio .v4u-divider { background: var(--line); }
html.folio .v4u-book { border-color: var(--line); border-radius: 12px; }
html.folio .v4u-book-head { background: var(--paper); }
html.folio .v4u-book-title { font: var(--t-book); color: var(--ink); }
html.folio .v4u-book-head .v4u-icon { color: var(--ink-2); }
html.folio .v4u-chevron { color: var(--muted); }
html.folio .v4u-guide { color: var(--ink); }
html.folio .v4u-guide:hover { background: var(--sel); }
html.folio .v4u-guide.is-locked { color: var(--ink-2); }
html.folio .v4u-dl { border-color: var(--line-2); color: var(--ink-2); font-family: var(--f-mono); font-weight: 500; }
html.folio .v4u-dl:hover { border-color: var(--ember); color: var(--ember-ink); }
html.folio .v4u-plans { background: var(--paper-2); border-color: var(--line); border-radius: var(--r-lg); }
html.folio .v4u-plan { background: var(--surface); border-color: var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
html.folio .v4u-plan.is-recommended { border-color: var(--ember); background: var(--surface); box-shadow: 0 0 0 3px var(--focus), var(--shadow-1); }
html.folio .v4u-plan-icon { background: var(--sunk); color: var(--ink-2); border-radius: 10px; }
html.folio .v4u-plan-icon.is-accent { background: var(--ember-wash); color: var(--ember); }
html.folio .v4u-badge { background: var(--ember); font-family: var(--f-ui); }
html.folio .v4u-check::before { color: var(--live); }
html.folio .v4u-sticky { background: rgba(255,255,255,.96); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -18px rgba(60,35,15,.35); }
html.folio .v4u-sticky-icon { background: var(--ember-wash); color: var(--ember); }
html.folio .v4u-reader { background: rgba(29,25,21,.32); backdrop-filter: blur(1.5px); }
html.folio .v4u-reader-panel { border-radius: 16px; box-shadow: var(--shadow-3); }
html.folio .v4u-prose { font: var(--t-prose); color: var(--ink); }
html.folio .v4u-prose h1,
html.folio .v4u-prose h2,
html.folio .v4u-prose h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
html.folio .v4u-prose img { border-color: var(--line); border-radius: 8px; }
html.folio .v4u-prose th,
html.folio .v4u-prose td { border-color: var(--line); }

/* App menu (partials/app_switcher.html) */
html.folio .v4w-app-menu > button { color: var(--ink); font-size: 12.5px; }
html.folio .v4w-app-menu nav { border-color: var(--line); border-radius: 12px; box-shadow: var(--shadow-2); padding: 6px; }
html.folio .v4w-app-menu nav a { color: var(--ink); border-radius: 7px; padding: 8px 10px; }
html.folio .v4w-app-menu nav a:hover { background: var(--sunk); }
html.folio .v4w-app-menu nav a[aria-current] { color: var(--ember-ink); background: var(--sel); font-weight: 600; }

/* The results workspace (unlock_results_assets.html, .v4w-*) */
html.folio .v4w-breadcrumb,
html.folio .v4w-breadcrumb a { color: var(--muted); }
html.folio .v4w-header h1 { font-family: var(--f-display); font-weight: 600; font-size: 26px; letter-spacing: -.015em; color: var(--ink); }
html.folio .v4w-header p { color: var(--muted); }
html.folio .v4w-video { background: var(--binding); border-radius: 10px; }
html.folio .v4w-tabs { border-bottom-color: var(--line); gap: 22px; }
html.folio .v4w-tabs > button,
html.folio .v4w-tabs > span,
html.folio .v4w-tabs > a { color: var(--muted); font-weight: 500; }
html.folio .v4w-tabs > .is-active { color: var(--ink); border-color: var(--ink); font-weight: 600; }
html.folio .v4w-ready { background: var(--live-wash); border-color: #CBE3D5; border-radius: 12px; }
html.folio .v4w-ready strong { color: #1F5139; }
html.folio .v4w-ready p,
html.folio .v4w-ready-actions span { color: #4F6E5C; }
html.folio .v4w-check { background: #D3E8DB; color: var(--live); }
html.folio .v4w-books,
html.folio .v4w-source,
html.folio .v4u-workspace .v4w-reader { background: var(--surface); border-color: var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
html.folio .v4w-books h2 { font: var(--t-title); font-size: 15px; color: var(--ink); border-bottom-color: var(--line); }
html.folio .v4w-book-heading { background: var(--paper); border-bottom-color: var(--line); }
html.folio .v4w-book-heading strong { font: var(--t-book); color: var(--ink); }
html.folio .v4w-book-heading small { color: var(--muted); }
html.folio .v4w-folder { color: var(--sp-ochre); }
html.folio .v4w-article { border-bottom-color: var(--line); }
html.folio .v4w-article strong { color: var(--ink); font-weight: 600; }
html.folio .v4w-article small,
html.folio .v4w-read-time { color: var(--muted); }
html.folio .v4w-article.is-selected { background: var(--sel); box-shadow: inset 3px 0 var(--ember); }
html.folio .v4w-document-icon { color: var(--faint); }
html.folio .v4w-reader-header,
html.folio .v4w-reader-toolbar { border-bottom-color: var(--line); color: var(--muted); }
html.folio .v4w-reader-title,
html.folio .v4w-reader-header strong { color: var(--ink); }
html.folio .v4w-reader h1,
html.folio .v4w-reader h2,
html.folio .v4w-source h2 { font-family: var(--f-display); font-weight: 600; color: var(--ink); }
html.folio .v4w-reader img { border-color: var(--line); border-radius: 8px; }
html.folio .v4w-download > div { border-color: var(--line); border-radius: 12px; box-shadow: var(--shadow-2); }
html.folio .v4w-download a:hover { background: var(--sunk); }

/* Chat bar (partials/chat_drawer.html) */
html.folio .v31-chat-bar { background: var(--surface); border-top-color: var(--line); color: var(--ink); border-radius: 14px 14px 0 0; box-shadow: 0 -10px 28px -18px rgba(60,35,15,.30); }
html.folio .v31-chat-topbar { background: var(--paper); border-color: var(--line); border-radius: 10px; }
html.folio .v31-chat-topbar-title { color: var(--ink); }
html.folio .v31-chat-topbar-title svg { color: var(--ember); }
html.folio .v31-chat-topbar-title .v31-chat-count { color: var(--muted); font-family: var(--f-mono); }
html.folio .v31-chat-topbar-button { color: var(--ink-2); }
html.folio .v31-chat-topbar-button:hover { background: var(--sunk); }
html.folio .v31-chat-input-row { border-color: var(--line-2); background: var(--surface); box-shadow: 0 1px 0 rgba(40,25,10,.04); }
html.folio .v31-chat-input-row:has(input:focus) { border-color: var(--ember); box-shadow: 0 0 0 3px var(--focus); }
html.folio .v31-chat-input-row input { color: var(--ink); }
html.folio .v31-chat-input-row input::placeholder { color: var(--faint); }
html.folio .v31-chat-send { background-color: var(--ember); box-shadow: 0 1px 0 var(--ember-ink); }
html.folio .v31-chat-send:hover:not(:disabled) { background-color: var(--ember-hover); }
html.folio .v31-chat-send:disabled { background-color: var(--ember-line); box-shadow: none; }
html.folio .v31-chat-message-user .v31-chat-message-content { background-color: var(--ink); color: #fff; }
html.folio .v31-chat-message-user .v31-chat-message-role,
html.folio .v31-chat-message-agent .v31-chat-message-role { color: var(--muted); }
html.folio .v31-chat-message-agent .v31-chat-message-content { color: var(--ink); border-color: var(--line); }
html.folio .v31-chat-sources-toggle,
html.folio .v31-chat-source { background: var(--sunk); color: var(--ink-2); border-color: var(--line); }
html.folio .v31-chat-sources-toggle:hover { background: var(--line); }
html.folio .v31-chat-auth { background: var(--sel); border-color: var(--ember-line); color: var(--ember-ink); }
html.folio .v31-chat-auth a,
html.folio .v31-chat-status a { color: var(--ember-ink); }
html.folio .v31-chat-status { color: var(--danger); }

/* Help widget and tours: closed shadow roots read these host variables. */
html.folio .__di-help-container { --primary-color: #E4532C; --primary-light: #FCEAE2; --primary-dark: #B23D1B; --font-family: var(--f-ui); }
html.folio .__guided-tour-container {
  --tourguide-font-family: var(--f-ui);
  --tourguide-text-color: #1D1915;
  --tourguide-muted-text-color: #887D70;
  --tourguide-accent-color: #E4532C;
  --tourguide-focus-color: #E4532C;
  --tourguide-border-color: #E6DED1;
  --tourguide-overlay-color: rgba(29, 25, 21, .32);
  --tourguide-step-border-radius: 14px;
  --tourguide-bullet-color: #F3C2B1;
  --tourguide-bullet-current-color: #E4532C;
  --tourguide-bullet-visited-color: #F2A27F;
  --tourguide-step-button-next-color: #E4532C;
  --tourguide-step-button-complete-color: #E4532C;
}

/* ---------- 5. Dashboard (dashboard.html): context column + main ---------- */
html.folio .sidebar { background: var(--paper-2); border-right-color: var(--line); }
html.folio .sidebar .sticky.bg-white { background: var(--paper-2); border-bottom-color: var(--line); }
html.folio .sidebar .rounded-lg.border.bg-gray-50 { background: var(--surface); border-color: var(--line); border-radius: 12px; }
html.folio .sidebar input[type="search"] { background: var(--surface); border-color: var(--line); border-radius: var(--r-md); height: 34px; }
html.folio .sidebar input[type="search"]:focus { border-color: var(--ember); box-shadow: 0 0 0 3px var(--focus); --tw-ring-color: transparent; }
html.folio .sidebar-item { position: relative; border-radius: var(--r-md); padding: 9px 10px; margin-bottom: 2px; }
html.folio .sidebar-item:hover { background: rgba(255,255,255,.6); }
html.folio .sidebar-item.active {
  background: var(--surface); border-left: 0; box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 0 0 1px var(--line);
}
html.folio .sidebar-item.active::before {
  content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ember);
}
html.folio .sidebar-item .text-sm.font-medium.text-gray-900 { font-weight: 600; font-size: 13px; }
html.folio .owner-avatar { background: var(--sunk) !important; color: var(--ink-2) !important; border-color: var(--line) !important; font-weight: 600; }
/* "New ..." creates: Folio's dark button ("one primary per view, dark for create"). */
html.folio .new-btn {
  background: var(--ink); border-radius: var(--r-md); font-size: 13.5px; font-weight: 600; padding: 9px 16px;
  box-shadow: 0 1px 0 #000, 0 6px 14px -9px rgba(29,25,21,.7);
}
html.folio .new-btn:hover { background: #000; transform: none; box-shadow: 0 1px 0 #000, 0 6px 14px -9px rgba(29,25,21,.7); }
html.folio .download-btn { border-radius: var(--r-md); }
html.folio .download-btn-primary { background: var(--ember); box-shadow: 0 1px 0 var(--ember-ink), 0 6px 14px -8px rgba(228,83,44,.8); }
html.folio .download-btn-primary:hover { background: var(--ember-hover); transform: none; box-shadow: 0 1px 0 var(--ember-ink); }
html.folio .download-btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
html.folio .download-btn-secondary:hover { background: var(--paper); }
html.folio .main-content { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
html.folio .main-content > h2,
html.folio .main-content h2.text-xl { font-family: var(--f-display); font-weight: 600; font-size: 24px; letter-spacing: -.015em; color: var(--ink); }
html.folio .main-content > svg.text-gray-300 { color: var(--line-2); }
html.folio .login-card { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-3); border-color: var(--line); }
html.folio .processing-gif-wrap { background: var(--paper-2); border-color: var(--line); }
html.folio .pptx-progress-bar { background: var(--ink); }

/* Page, result and dialog titles name content: Fraunces. */
html.folio h1.text-2xl.font-bold,
html.folio h1.text-2xl.font-semibold,
html.folio h2.text-2xl.font-bold,
html.folio h2.text-xl,
html.folio h3.text-xl { font-family: var(--f-display); font-weight: 600; letter-spacing: -.015em; }
html.folio h1.text-2xl.font-bold { font-size: 26px; }

/* My Documents (partials/my_documents_library.html) */
html.folio .mydocs-library h1#mydocs-title { font-size: 30px; letter-spacing: -.02em; }
html.folio .mydocs-chip { border-color: var(--line); background: var(--surface); color: var(--ink-2); font-size: 12.5px; }
html.folio .mydocs-chip:hover { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
html.folio .mydocs-chip.is-active { background: var(--ember-wash); border-color: var(--ember-line); color: var(--ember-ink); font-weight: 600; }
html.folio .mydocs-chip-count { font: var(--t-mono); color: var(--faint); }
html.folio .mydocs-chip.is-active .mydocs-chip-count { color: var(--ember); }
html.folio .mydocs-library .overflow-hidden.rounded-xl { border-color: var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
html.folio .mydocs-head { background: var(--paper); color: var(--muted); font: var(--t-overline); letter-spacing: .08em; border-bottom: 1px solid var(--line); }
html.folio .mydocs-row { border-top-color: var(--line); }
html.folio .mydocs-row:hover { background: #FFFCF8; }
html.folio .mydocs-row p.font-medium { font-weight: 600; }
/* Type badges: one neutral tag with a spine chip in the type's colour. */
html.folio .mydocs-badge { --c: var(--sp-slate); gap: 6px; background: var(--sunk); color: var(--ink-2); font-weight: 600; font-size: 11.5px; border-radius: 5px; }
html.folio .mydocs-badge::before { content: ""; width: 4px; height: 11px; border-radius: 1px; background: var(--c); box-shadow: inset -1px 0 0 rgba(0,0,0,.15); flex: none; }
html.folio .mydocs-badge--video-to-docs { --c: var(--sp-ember); }
html.folio .mydocs-badge--video-to-knowledge-base { --c: var(--sp-navy); }
html.folio .mydocs-badge--video-analysis { --c: var(--sp-slate); }
html.folio .mydocs-badge--video-to-presentation { --c: var(--sp-plum); }
html.folio .mydocs-badge--video-to-text { --c: var(--sp-ink); }
html.folio .mydocs-badge--video-to-course { --c: var(--sp-ochre); }
html.folio .mydocs-badge--shelf { --c: var(--sp-navy); }
html.folio .mydocs-badge--chat_doc { --c: var(--sp-teal); }
html.folio .mydocs-badge--import { --c: var(--sp-sage); }
html.folio .mydocs-badge--comparison { --c: var(--sp-plum); }
html.folio .mydocs-row .text-orange-500 { color: var(--sp-ember); }
html.folio .mydocs-row .text-indigo-500 { color: var(--sp-navy); }
html.folio .mydocs-row .text-sky-500 { color: var(--sp-teal); }
html.folio .mydocs-row .text-emerald-500 { color: var(--sp-sage); }
html.folio .mydocs-row .text-violet-500 { color: var(--sp-plum); }
html.folio .mydocs-status { font-weight: 600; font-size: 12px; }
html.folio .mydocs-status--locked { color: var(--ember); }
html.folio .mydocs-status--unlocked, html.folio .mydocs-status--ready { color: var(--live); }
html.folio .mydocs-status--processing { color: var(--info); }
html.folio .mydocs-status--failed { color: var(--danger); }
html.folio .mydocs-status--expired, html.folio .mydocs-status--none { color: var(--faint); }
html.folio .mydocs-skeleton { background: linear-gradient(90deg, var(--sunk) 25%, var(--line) 37%, var(--sunk) 63%); background-size: 400% 100%; }

/* Visitor app page (index.html: the upload flow before sign-in) */
html.folio .relative.z-20.flex.justify-end.bg-white.border-b { background: transparent; border-bottom-color: var(--line); }
html.folio h1.text-3xl.font-bold { font-family: var(--f-display); font-weight: 600; font-size: 36px; line-height: 1.1; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
html.folio .login-card { background: var(--surface); backdrop-filter: none; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-2); }
html.folio .login-card button.w-full.rounded-full { border-radius: 10px; }
html.folio .step-dot { background: var(--line-2); }
html.folio .step-dot.active,
html.folio .step-dot.completed { background: var(--ember); }
/* Disabled primaries: Folio dims the ember button instead of greying it out. */
html.folio button.bg-gray-400 { background-color: var(--ember); background-image: none; opacity: .42; box-shadow: none; }

/* ---------- 6. Apps home (launcher.html) ---------- */
html.folio .launcher-title { font-family: var(--f-display); font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
html.folio .launcher-title + p { color: var(--ink-2) !important; }
/* The catalogue sits on the paper itself: no frosted panel around it. */
html.folio .launcher-card { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; border-radius: 0; padding: 0; }
html.folio .value-props { gap: 40px; }
html.folio .value-prop strong { color: var(--ink); font-weight: 600; font-size: 14px; }
html.folio .value-prop span { color: var(--muted); font-size: 12.5px; }
html.folio .value-prop svg,
html.folio .value-prop svg circle { fill: var(--ink-2); }
html.folio .section-label { font: var(--t-overline); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
html.folio .launcher-card .section-label + p { color: var(--ink-2) !important; }

/* App tones become solid spine colours: each app is a little book. */
html.folio .tone-document { --tone: var(--sp-ember); --plate: var(--sp-ember); }
html.folio .tone-compare  { --tone: var(--sp-teal);  --plate: var(--sp-teal); }
html.folio .tone-course   { --tone: var(--sp-ochre); --plate: var(--sp-ochre); }
html.folio .tone-slides   { --tone: var(--sp-plum);  --plate: var(--sp-plum); }
html.folio .tone-kb       { --tone: var(--sp-navy);  --plate: var(--sp-navy); }
html.folio .tone-quiz     { --tone: var(--sp-sage);  --plate: var(--sp-sage); }
html.folio .tone-search   { --tone: var(--sp-slate); --plate: var(--sp-slate); }
html.folio .tone-text     { --tone: var(--sp-ink);   --plate: var(--sp-ink); }
html.folio [class*="tone-"] { --tone-wash: #FFFFFF; --tone-line: var(--line); --tint-shadow: rgba(60,35,15,.35); }

html.folio .app-card,
html.folio .orch-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
html.folio .app-card { padding: 16px 16px 15px; gap: 15px; }
html.folio .app-card:hover,
html.folio .app-card:focus-visible,
html.folio .orch-card:hover,
html.folio .orch-card:focus-visible { border-color: var(--line-2); box-shadow: var(--shadow-2); }
html.folio .app-card:focus-visible,
html.folio .orch-card:focus-visible { box-shadow: 0 0 0 3px var(--focus), var(--shadow-2); }
html.folio .app-plate,
html.folio .f-plate {
  background: var(--plate);
  border-radius: 4px 11px 11px 4px;
  box-shadow: inset 4px 0 0 rgba(0,0,0,.16), inset 5px 0 0 rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.14), 0 8px 16px -10px rgba(40,25,10,.6);
}
html.folio .app-badge { color: var(--ink); background: var(--surface); box-shadow: 0 0 0 2px var(--surface), 0 1px 3px rgba(40,25,10,.25); }
html.folio .app-name { font-family: var(--f-display); font-weight: 600; font-size: 16px; letter-spacing: -.01em; color: var(--ink); }
html.folio .app-blurb { color: var(--ink-2); font-size: 12.5px; }
html.folio .app-go { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); transition: color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); }
html.folio .app-card:hover .app-go,
html.folio .orch-card:hover .app-go { color: #fff; background: var(--ember); box-shadow: none; }
html.folio .orch-chat    { --orch-bg: var(--surface); --orch-line: var(--line); --orch-tone: var(--ink); --plate: var(--binding); }
html.folio .orch-factory { --orch-bg: var(--surface); --orch-line: var(--line); --orch-tone: var(--ink); --plate: var(--sp-clay); }
html.folio .orch-tag { font: var(--t-overline); letter-spacing: .08em; color: var(--muted); }
html.folio .orch-name { font-family: var(--f-display); font-weight: 600; font-size: 19px; letter-spacing: -.012em; color: var(--ink); }
html.folio .orch-blurb { color: var(--ink-2); font-size: 13px; }
html.folio .else-note { background: var(--paper-2); border-color: var(--line); border-radius: 12px; color: var(--ink); }
html.folio .else-note button { color: var(--ember-ink); font-weight: 600; }
html.folio .describe-card { background: var(--surface); border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); }
html.folio .describe-card textarea,
html.folio .signin-card input { border-color: var(--line-2); border-radius: var(--r-md); color: var(--ink); }
html.folio .describe-card textarea:focus,
html.folio .signin-card input:focus { border-color: var(--ember); box-shadow: 0 0 0 3px var(--focus); }
html.folio .else-btn {
  background: var(--ember); border-radius: var(--r-md); font-size: 13.5px; font-weight: 600;
  box-shadow: 0 1px 0 var(--ember-ink), 0 6px 14px -8px rgba(228,83,44,.8);
}
html.folio .else-btn:hover:not(:disabled) { background: var(--ember-hover); }
html.folio .signin-card { border-radius: 16px; box-shadow: var(--shadow-3); }

/* ---------- 7. Factories, Compare, app pages (_factory_base.html) ---------- */
html.folio .f-title { font-family: var(--f-display); font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
html.folio .f-muted { color: var(--ink-2); }
html.folio .f-card h2 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.012em; }
html.folio .f-card[class*="tone-"] p.font-semibold,
html.folio .f-choice[class*="tone-"] > span.font-semibold { font-family: var(--f-display); font-weight: 600; font-size: 16.5px; letter-spacing: -.01em; }
html.folio .f-card { background: var(--surface); border-color: var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); backdrop-filter: none; }
html.folio .f-card[style*="fffaf0"] { background: var(--draft-wash) !important; border-color: #EEDDB2 !important; box-shadow: none; }
html.folio .f-nav a { color: var(--ink-2); border-radius: var(--r-md); }
html.folio .f-nav a.is-active,
html.folio .f-nav a:hover { color: var(--ink); background: var(--sunk); }
html.folio .f-btn {
  border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  padding: 8px 14px; font-size: 13px; font-weight: 600; box-shadow: 0 1px 0 rgba(40,25,10,.04);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
html.folio .f-btn:hover { border-color: var(--faint); }
html.folio .f-btn-primary { background: var(--ember); border-color: var(--ember); color: #fff; box-shadow: 0 1px 0 var(--ember-ink), 0 6px 14px -8px rgba(228,83,44,.8); }
html.folio .f-btn-primary:hover { background: var(--ember-hover); border-color: var(--ember-hover); }
html.folio a.f-btn-primary[href$="/factories/new/"] { background: var(--ink); border-color: var(--ink); box-shadow: 0 1px 0 #000, 0 6px 14px -9px rgba(29,25,21,.7); }
html.folio a.f-btn-primary[href$="/factories/new/"]:hover { background: #000; border-color: #000; }
html.folio .f-btn:disabled { opacity: .45; box-shadow: none; }
html.folio .f-input,
html.folio .f-select,
html.folio .f-textarea { border-color: var(--line-2); border-radius: var(--r-md); color: var(--ink); background: var(--surface); font-size: 13.5px; }
html.folio .f-input::placeholder,
html.folio .f-textarea::placeholder { color: var(--faint); }
html.folio .f-input:focus,
html.folio .f-select:focus,
html.folio .f-textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--focus); }
html.folio .f-label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
html.folio .f-pill { background: var(--sunk); color: var(--ink-2); font-weight: 600; font-size: 11.5px; padding: 3px 9px; }
html.folio .f-pill--running, html.folio .f-pill--sampling, html.folio .f-pill--running_normally,
html.folio .f-pill--preparing, html.folio .f-pill--queued, html.folio .f-pill--slow { background: var(--info-wash); color: var(--info); }
html.folio .f-pill--done, html.folio .f-pill--completed { background: var(--live-wash); color: var(--live); }
html.folio .f-pill--failed { background: var(--danger-wash); color: var(--danger); }
html.folio .f-pill--awaiting_approval, html.folio .f-pill--approved,
html.folio .f-pill--paused, html.folio .f-pill--stalled { background: var(--draft-wash); color: var(--draft); }
html.folio .f-verdict--pass { background: var(--live-wash); color: var(--live); }
html.folio .f-verdict--review { background: var(--draft-wash); color: var(--draft); }
html.folio .f-bar,
html.folio .f-cat-bar { height: 6px; background: var(--sunk); border-radius: 4px; }
html.folio .f-bar > span { background: var(--ink); border-radius: 4px; }
html.folio .f-bar > span[style*="100%"] { background: var(--live); }
html.folio .f-table th { font: var(--t-overline); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--line); }
html.folio .f-table td { border-bottom-color: var(--line); color: var(--ink); height: 50px; }
html.folio .f-table td:nth-child(3) { font-family: var(--f-mono); font-size: 12px; }
html.folio .f-table tbody tr:hover td { background: #FFFCF8; }
html.folio .f-drop { border: 1.5px dashed var(--line-2); border-radius: 12px; background: var(--paper); }
html.folio .f-drop:hover { border-color: var(--faint); }
html.folio .f-drop.is-over { border-color: var(--ember); background: var(--sel); }
html.folio .f-doc { color: var(--ink); }
html.folio .f-doc h1,
html.folio .f-doc h2,
html.folio .f-doc h3 { font-family: var(--f-display); font-weight: 600; }
html.folio .f-doc code { background: var(--sunk); font-family: var(--f-mono); }
html.folio .f-doc img { border-color: var(--line); }
/* Choice tiles (Compare modes, the factory wizard): selection is ember. */
html.folio .f-choice { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 0 rgba(40,25,10,.03); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
html.folio .f-choice:hover:not(:disabled) { border-color: var(--line-2); }
html.folio .f-choice.is-selected { border-color: var(--ember); background: var(--sel); box-shadow: 0 0 0 1px var(--ember), 0 6px 18px -12px rgba(228,83,44,.6); }
html.folio .c-slot { border-color: var(--line); border-radius: 12px; background: var(--surface); }
html.folio .c-row-parties { color: var(--muted); }
/* Factory wizard steps */
html.folio .f-step-dot { border: 1.5px solid var(--line-2); background: var(--surface); color: var(--muted); font-family: var(--f-mono); font-weight: 500; font-size: 12px; }
html.folio .f-step.is-current .f-step-dot { background: var(--ember); border-color: var(--ember); color: #fff; box-shadow: 0 0 0 4px var(--focus); }
html.folio .f-step.is-done .f-step-dot { background: var(--live-wash); border-color: var(--live); color: var(--live); }
html.folio .f-step-label { color: var(--muted); font-weight: 500; }
html.folio .f-step.is-current .f-step-label { color: var(--ink); font-weight: 600; }
/* Factory detail */
html.folio .f-seg { background: var(--sunk); border: 0; border-radius: 9px; padding: 3px; }
html.folio .f-seg button { border-radius: 7px; color: var(--ink-2); font-weight: 500; font-size: 12.5px; }
html.folio .f-seg button.is-on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(40,25,10,.12); }
html.folio .f-matrix th { color: var(--muted); }
html.folio .f-matrix th a,
html.folio .f-file-link { color: var(--ink); }
html.folio .f-matrix th a:hover,
html.folio .f-file-link:hover { color: var(--ember-ink); }
html.folio .f-matrix .f-matrix-unit { background: var(--surface); }
html.folio .f-item-detail td { background: var(--paper); }
html.folio .f-legend { color: var(--ink-2); }

/* ---------- 8. Tailwind bridge: the utility classes the v4 markup uses ----------
   Neutral greys -> warm paper/ink; orange -> ember; blue/green/red/amber -> the
   Folio status families (info/live/danger/draft). Hover/focus variants too. */
/* text: ink scale */
html.folio .text-gray-900, html.folio .text-slate-900, html.folio .text-gray-800, html.folio .text-slate-800,
html.folio .hover\:text-gray-900:hover, html.folio .hover\:text-gray-800:hover { color: var(--ink); }
html.folio .text-gray-700, html.folio .text-slate-700, html.folio .text-gray-600, html.folio .text-slate-600,
html.folio .hover\:text-gray-700:hover, html.folio .hover\:text-gray-600:hover { color: var(--ink-2); }
html.folio .text-gray-500, html.folio .text-slate-500 { color: var(--muted); }
html.folio .text-gray-400, html.folio .text-slate-400 { color: #A09582; }
html.folio .text-gray-300, html.folio .text-slate-300 { color: var(--faint); }
/* surfaces */
html.folio .bg-gray-50, html.folio .bg-slate-50, html.folio .hover\:bg-gray-50:hover { background-color: var(--paper); }
html.folio .bg-gray-100, html.folio .bg-slate-100, html.folio .hover\:bg-gray-100:hover { background-color: var(--sunk); }
html.folio .bg-gray-200, html.folio .hover\:bg-gray-200:hover { background-color: var(--line); }
html.folio .bg-gray-300, html.folio .hover\:bg-gray-300:hover { background-color: var(--line-2); }
html.folio .bg-gray-400 { background-color: var(--faint); }
html.folio .bg-black\/50, html.folio .bg-black\/40, html.folio .bg-black\/60 { background-color: rgba(29,25,21,.38); }
/* lines */
html.folio .border-gray-100, html.folio .border-slate-100 { border-color: #EEE7DC; }
html.folio .border-gray-200, html.folio .border-slate-200 { border-color: var(--line); }
html.folio .border-gray-300, html.folio .border-slate-300, html.folio .hover\:border-gray-300:hover { border-color: var(--line-2); }
html.folio .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.folio .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line); }
/* ember: the one accent */
html.folio .bg-orange-500, html.folio .bg-orange-600 { background-color: var(--ember); }
html.folio .hover\:bg-orange-600:hover, html.folio .hover\:bg-orange-700:hover { background-color: var(--ember-hover); }
html.folio .bg-orange-50, html.folio .hover\:bg-orange-50:hover { background-color: var(--sel); }
html.folio .bg-orange-100, html.folio .hover\:bg-orange-100:hover, html.folio .hover\:bg-orange-200:hover { background-color: var(--ember-wash); }
html.folio .text-orange-400, html.folio .text-orange-500 { color: var(--ember); }
html.folio .text-orange-600, html.folio .text-orange-700, html.folio .text-orange-800, html.folio .text-orange-900 { color: var(--ember-ink); }
html.folio .hover\:text-orange-600:hover, html.folio .hover\:text-orange-700:hover, html.folio .hover\:text-orange-800:hover { color: #8F3015; }
html.folio .border-orange-400, html.folio .border-orange-500, html.folio .focus\:border-orange-500:focus, html.folio .focus\:border-orange-300:focus { border-color: var(--ember); }
html.folio .border-orange-200, html.folio .border-orange-300, html.folio .hover\:border-orange-300:hover, html.folio .hover\:border-orange-400:hover { border-color: var(--ember-line); }
html.folio .border-orange-100 { border-color: #F8DDD1; }
html.folio .focus\:ring-orange-500:focus, html.folio .focus\:ring-orange-200:focus, html.folio .focus\:ring-orange-300:focus,
html.folio .ring-orange-500, html.folio .ring-orange-200 { --tw-ring-color: rgba(228, 83, 44, .35); }
html.folio .accent-orange-500, html.folio input[type="checkbox"].text-orange-500 { accent-color: var(--ember); }
/* gradients: Folio has none on controls; primary buttons go solid ember */
html.folio .bg-gradient-to-r.from-orange-500,
html.folio .bg-gradient-to-br.from-orange-500,
html.folio .bg-gradient-to-r.from-orange-400:not(.h-full),
html.folio .bg-gradient-to-r.from-red-500 { background-image: none; background-color: var(--ember); box-shadow: 0 1px 0 var(--ember-ink), 0 6px 14px -8px rgba(228,83,44,.8); }
html.folio .bg-gradient-to-r.from-orange-500:hover,
html.folio .bg-gradient-to-br.from-orange-500:hover { background-color: var(--ember-hover); --tw-translate-y: 0; }
html.folio .h-full.bg-gradient-to-r.from-orange-400 { background-image: none; background-color: var(--ink); }
html.folio .bg-gradient-to-r.from-orange-50,
html.folio .bg-gradient-to-br.from-orange-50 { background-image: none; background-color: var(--paper-2); }
html.folio .bg-gradient-to-r.from-blue-500,
html.folio .bg-gradient-to-r.from-blue-600 { background-image: none; background-color: var(--ink); }
html.folio .bg-gradient-to-r.from-blue-500:hover,
html.folio .bg-gradient-to-r.from-blue-600:hover { background-color: #000; }
/* info (blue) */
html.folio .text-blue-500, html.folio .text-blue-600, html.folio .text-blue-700, html.folio .hover\:text-blue-700:hover { color: var(--info); }
html.folio .text-blue-800, html.folio .text-blue-900 { color: #1E3D61; }
html.folio .bg-blue-50, html.folio .bg-blue-50\/30, html.folio .bg-blue-50\/50 { background-color: var(--info-wash); }
html.folio .bg-blue-100 { background-color: #D7E3F1; }
html.folio .border-blue-100, html.folio .border-blue-200 { border-color: #CFDDF0; }
html.folio .bg-blue-500, html.folio .bg-blue-600 { background-color: var(--info); }
html.folio .hover\:bg-blue-600:hover, html.folio .hover\:bg-blue-700:hover { background-color: #24476E; }
/* live (green) */
html.folio .text-green-500, html.folio .text-green-600, html.folio .text-green-700,
html.folio .text-emerald-500, html.folio .text-emerald-600, html.folio .text-emerald-700 { color: var(--live); }
html.folio .text-green-800, html.folio .text-green-900, html.folio .text-emerald-800 { color: #1F5139; }
html.folio .bg-green-50, html.folio .bg-emerald-50 { background-color: var(--live-wash); }
html.folio .bg-green-100, html.folio .bg-emerald-100 { background-color: #D3E8DB; }
html.folio .border-green-200, html.folio .border-green-300, html.folio .border-emerald-200 { border-color: #CBE3D5; }
html.folio .bg-green-500, html.folio .bg-green-600, html.folio .bg-emerald-500, html.folio .bg-emerald-600 { background-color: var(--live); }
/* danger (red) */
html.folio .text-red-500, html.folio .text-red-600, html.folio .text-red-700,
html.folio .hover\:text-red-500:hover, html.folio .hover\:text-red-600:hover { color: var(--danger); }
html.folio .text-red-800, html.folio .text-red-900 { color: #7A1A12; }
html.folio .bg-red-50, html.folio .hover\:bg-red-50:hover { background-color: var(--danger-wash); }
html.folio .bg-red-100 { background-color: #F9D9D5; }
html.folio .border-red-200, html.folio .border-red-300 { border-color: #F5CFCB; }
html.folio .bg-red-500, html.folio .bg-red-600 { background-color: var(--danger); }
/* draft (amber/yellow) */
html.folio .text-amber-500, html.folio .text-amber-600, html.folio .text-amber-700,
html.folio .text-yellow-500, html.folio .text-yellow-600, html.folio .text-yellow-700 { color: var(--draft); }
html.folio .text-amber-800, html.folio .text-amber-900, html.folio .text-yellow-800 { color: #6E4C0B; }
html.folio .bg-amber-50, html.folio .bg-yellow-50 { background-color: var(--draft-wash); }
html.folio .bg-amber-100, html.folio .bg-yellow-100 { background-color: #F2E2BC; }
html.folio .border-amber-200, html.folio .border-amber-300, html.folio .border-yellow-200 { border-color: #EEDDB2; }
/* warm shadows */
html.folio .shadow-sm { --tw-shadow: 0 1px 0 rgba(40,25,10,.05); }
html.folio .shadow, html.folio .shadow-md { --tw-shadow: 0 1px 0 rgba(40,25,10,.03), 0 10px 30px -18px rgba(60,35,15,.35); }
html.folio .shadow-lg, html.folio .hover\:shadow-lg:hover, html.folio .shadow-xl { --tw-shadow: 0 1px 0 rgba(40,25,10,.04), 0 16px 40px -18px rgba(50,30,10,.45); }
html.folio .shadow-2xl { --tw-shadow: 0 2px 0 rgba(40,25,10,.03), 0 30px 80px -30px rgba(40,20,5,.55); }

/* =====================================================================
   v4 apps beside the shared rail (a Docsie account: partials/app_sidebar.html
   renders alpine/layout/folio_rail.html first). The binding is the rail;
   this sidebar becomes the apps' paper column, like Manager's context
   column. One logo and one account menu: both live on the rail.
   ===================================================================== */
html.folio body:has(.fo-app-rail) .v4u-side {
  background: var(--paper-2); color: var(--ink-2);
  border-right: 1px solid var(--line); box-shadow: none;
}
/* Fixed sidebar (results, app pages): start after the rail. The dashboard's sidebar is a flex column, which the body padding already moves. */
@media (min-width: 1024px) {
  html.folio body:has(.fo-app-rail) .v4u-side:not(.v4u-rail) { left: var(--fo-rail-w); }
  html.folio body:has(.fo-app-rail) .v4u-sticky { left: calc(var(--v4u-side) + var(--fo-rail-w)); }
}
html.folio body:has(.fo-app-rail) .v4u-brand { display: none; }
html.folio body:has(.fo-app-rail) .v4u-me { display: none; }
html.folio body:has(.fo-app-rail) .v4u-brand-row { align-items: center; padding: 2px 0 12px; }
html.folio body:has(.fo-app-rail) .v4u-col-title { padding: 0 8px; font: 600 19px/1.1 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
html.folio body:has(.fo-app-rail) .v4u-rail-toggle { margin-bottom: 0; color: var(--muted); }
html.folio body:has(.fo-app-rail) .v4u-rail-toggle:hover { background: var(--sunk); color: var(--ink); }

html.folio body:has(.fo-app-rail) .v4u-nav a { color: var(--ink-2); }
html.folio body:has(.fo-app-rail) .v4u-nav a svg { color: var(--muted); }
html.folio body:has(.fo-app-rail) .v4u-nav a:hover { background: var(--sunk); color: var(--ink); }
html.folio body:has(.fo-app-rail) .v4u-nav a:hover svg { color: var(--ink-2); }
html.folio body:has(.fo-app-rail) .v4u-nav a.is-active,
html.folio body:has(.fo-app-rail) .v4u-nav a.is-active:hover {
  background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 0 rgba(28,24,20,.05), inset 0 0 0 1px var(--line);
}
html.folio body:has(.fo-app-rail) .v4u-nav a.is-active svg { color: var(--ember); }
html.folio body:has(.fo-app-rail) .v4u-nav a.is-active::before { display: none; }
html.folio body:has(.fo-app-rail) .v4u-nav-upgrade { border-top-color: var(--line); }
html.folio body:has(.fo-app-rail) .v4u-side .v4u-nav-upgrade a svg,
html.folio body:has(.fo-app-rail) .v4u-side .v4u-nav-upgrade a svg.text-amber-500 { color: var(--ember); }

/* Collapsed beside the rail: a quiet icon strip on paper, the title hidden */
html.folio.v4u-rail-collapsed body:has(.fo-app-rail) .v4u-col-title { display: none; }
html.folio.v4u-rail-collapsed body:has(.fo-app-rail) .v4u-brand-row { padding-bottom: 8px; }
/* The launcher beside the rail: the rail carries the brand */
html.folio body:has(.fo-app-rail) .launcher-brand { visibility: hidden; }