/* ==========================================================================
   Folio authoring surfaces — theme tokens
   --------------------------------------------------------------------------
   Light mode was built for Folio's front door (StudioDashboard, NewBookWizard)
   and stopped at the door of the app itself. BookWorkspace, BookReader,
   ChapterEditor, OutlinePanel and the export/publish dialogs each carried
   40-70 hardcoded dark colours and zero CSS variables, so turning on light mode
   lit up the dashboard and left the screen an author actually works in as dark
   navy — with dialogs to match.

   These tokens are that missing layer. The DARK surface and text values are
   byte-identical to the colours those files already hardcoded. The accent was the
   suite's old cyan until FOL-N8 (UX deep dive, 2026-10-23): it is Folio's indigo
   now, read from Folio's product tokens below, so the home, the wizard, the library
   and the workspace share one accent. The :root values are the same shades, for
   the dialogs, which render outside the product scope.

   Declared on :root so every Folio surface reads the same names. NewBookWizard
   and StudioDashboard keep their own --folio-studio-* block scoped to
   .gixo-studio; the names and values agree, so the more specific one simply
   wins inside the wizard.
   ========================================================================== */

:root {
  /* Surfaces */
  --folio-ws-panel: #111827;
  --folio-ws-panel-soft: rgba(17, 24, 39, 0.6);
  --folio-ws-panel-raised: rgba(17, 24, 39, 0.8);
  --folio-ws-overlay: rgba(15, 15, 30, 0.9);

  /* Text */
  --folio-ws-heading: #f9fafb;
  --folio-ws-text: #e5e7eb;
  --folio-ws-muted: #9ca3af;
  --folio-ws-subtle: #6b7280;

  /* Accent — Folio's indigo-400 (--product-primary-lighten): 5.15:1 as text on the
     studio surface, and #111827 panel ink on it as a fill is 5.7:1. */
  --folio-ws-accent: #818cf8;
  --folio-ws-border: color-mix(in srgb, var(--folio-ws-accent) 15%, transparent);
  --folio-ws-border-strong: color-mix(in srgb, var(--folio-ws-accent) 30%, transparent);
  --folio-ws-tint: color-mix(in srgb, var(--folio-ws-accent) 10%, transparent);
  --folio-ws-tint-strong: color-mix(in srgb, var(--folio-ws-accent) 20%, transparent);

  /* Status */
  --folio-ws-success: #10b981;
  --folio-ws-warning: #fbbf24;
  --folio-reader-bg: #0a0a14;
  --folio-reader-text: #e5e7eb;
  --folio-reader-heading: #f9fafb;
  --folio-reader-rule: color-mix(in srgb, var(--folio-ws-accent) 10%, transparent);
}

html[data-theme="light"] {
  --folio-ws-panel: #ffffff;
  --folio-ws-panel-soft: rgba(255, 255, 255, 0.92);
  --folio-ws-panel-raised: #ffffff;
  --folio-ws-overlay: rgba(248, 250, 252, 0.92);

  --folio-ws-heading: #0f172a;
  --folio-ws-text: #1e293b;
  --folio-ws-muted: #475569;   /* slate-600, AA on white */
  --folio-ws-subtle: #64748b;

  /* Folio's light indigo-600 (the light scope's --product-primary-lighten): 6.3:1 as
     text on white, and white panel ink on it as a fill is 6.3:1. */
  --folio-ws-accent: #4f46e5;
  --folio-ws-border: rgba(15, 23, 42, 0.12);
  --folio-ws-border-strong: color-mix(in srgb, var(--folio-ws-accent) 45%, transparent);
  --folio-ws-tint: color-mix(in srgb, var(--folio-ws-accent) 8%, transparent);
  --folio-ws-tint-strong: color-mix(in srgb, var(--folio-ws-accent) 16%, transparent);

  --folio-ws-success: #047857;
  --folio-ws-warning: #b45309;
  --folio-reader-bg: #f8fafc;
  --folio-reader-text: #1f2937;
  --folio-reader-heading: #0f172a;
  --folio-reader-rule: rgba(15, 23, 42, 0.12);
}

/* ==========================================================================
   Reader modes. The reader is where an author proofreads tens of thousands of
   words, and it offered font-bigger/font-smaller and nothing else — no light,
   no sepia, no serif — on a hardcoded #0a0a14 with cyan chapter numbers.

   These are set per reader via data-reading-mode, independent of the app theme:
   someone who works in dark mode may still want to proofread on paper.
   ========================================================================== */

[data-reading-mode="light"] {
  --folio-reader-bg: #f3f4f6;
  --folio-reader-text: #1f2937;
  --folio-reader-heading: #0f172a;
  --folio-reader-rule: rgba(15, 23, 42, 0.12);
}

[data-reading-mode="sepia"] {
  --folio-reader-bg: #efe6d5;
  --folio-reader-text: #43382a;
  --folio-reader-heading: #2d251a;
  --folio-reader-rule: rgba(67, 56, 42, 0.18);
}

[data-reading-mode="dark"] {
  --folio-reader-bg: #0a0a14;
  --folio-reader-text: #e5e7eb;
  --folio-reader-heading: #f9fafb;
  --folio-reader-rule: color-mix(in srgb, var(--folio-ws-accent) 10%, transparent);
}

/* FOL-N8: inside Folio's product scope (MainLayout's wrapper on every Folio page) the
   accent family reads Folio's product tokens, so a change to Folio's brand in
   product-themes.css reaches the workspace too. The light scope remaps
   --product-primary-lighten to #4f46e5, so one declaration serves both themes. Declared
   on the scope, not :root, because the tokens only exist there. */
.product-scope--folio {
  --folio-ws-accent: var(--product-primary-lighten, #818cf8);
  --folio-ws-border: color-mix(in srgb, var(--folio-ws-accent) 15%, transparent);
  --folio-ws-border-strong: color-mix(in srgb, var(--folio-ws-accent) 30%, transparent);
  --folio-ws-tint: color-mix(in srgb, var(--folio-ws-accent) 10%, transparent);
  --folio-ws-tint-strong: color-mix(in srgb, var(--folio-ws-accent) 20%, transparent);
  --folio-reader-rule: color-mix(in srgb, var(--folio-ws-accent) 10%, transparent);
}

html[data-theme="light"] .product-scope--folio {
  --folio-ws-border: rgba(15, 23, 42, 0.12);
  --folio-ws-border-strong: color-mix(in srgb, var(--folio-ws-accent) 45%, transparent);
  --folio-ws-tint: color-mix(in srgb, var(--folio-ws-accent) 8%, transparent);
  --folio-ws-tint-strong: color-mix(in srgb, var(--folio-ws-accent) 16%, transparent);
  --folio-reader-rule: rgba(15, 23, 42, 0.12);
}

/* Chapter prose has always been Georgia, and stays that way by default — this is a
   theming change, not a typography one. The toggle offers the other direction for
   authors who prefer to proofread in a sans face. */
[data-reading-face="sans"] .chapter-body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Author studio dialogs use the Folio route stylesheet; the app does not load the
   global Razor isolation bundle. Keep all rules within this product surface. */
.folio-author-studio { max-width: 72rem; overflow-wrap: anywhere; }
.folio-author-studio .folio-studio-modes, .folio-author-studio .folio-studio-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: .8rem 0; }
.folio-author-studio .folio-structure-grid { display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(18rem, 1.5fr); gap: 1.5rem; }
.folio-author-studio label { display: block; margin: .85rem 0; }
.folio-author-studio input:not([type=checkbox]):not(.mud-input-slot), .folio-author-studio select, .folio-author-studio textarea { display: block; width: 100%; min-width: 0; border: 1px solid var(--mud-palette-divider); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); padding: .65rem; border-radius: .35rem; }
.folio-author-studio textarea { min-height: 6rem; resize: vertical; }
.folio-author-studio input[type=checkbox] { margin-right: .5rem; }
.folio-author-studio button:where(:not(.mud-button-root):not(.mud-icon-button)) { border: 1px solid var(--mud-palette-divider); margin: .25rem 0; padding: .65rem .85rem; border-radius: .35rem; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); cursor: pointer; min-height: 44px; }
.folio-author-studio button[aria-pressed=true] { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); font-weight: 700; }
.folio-author-studio button:disabled { opacity: .5; cursor: wait; }
.folio-author-studio :is(button, summary, input, textarea, select):focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.folio-author-studio details { border-bottom: 1px solid var(--mud-palette-divider); padding: .7rem 0; }
.folio-author-studio summary { cursor: pointer; padding: .3rem 0; }
.folio-author-studio fieldset { padding: .5rem; margin: .6rem 0; max-height: 16rem; overflow: auto; }
.folio-author-studio blockquote { border-left: 3px solid var(--mud-palette-primary); margin: .6rem 0; padding: .6rem; white-space: pre-wrap; }
.folio-author-studio .folio-blocks { max-height: 20rem; overflow: auto; border: 1px solid var(--mud-palette-divider); padding: .5rem; }
.folio-author-studio .folio-source-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 28rem; overflow: auto; }
.folio-author-studio img { max-width: 100%; height: auto; }
.folio-author-studio h3 { font-size: 1.1rem; margin: 1.2rem 0 .65rem; }
.folio-author-studio ul { padding-left: 1.4rem; }
.folio-author-studio p { margin: .6rem 0; }
@media (max-width: 700px) { .folio-author-studio .folio-structure-grid { grid-template-columns: minmax(0, 1fr); } }

/* Writing workspace: one manuscript, with persistent contextual tools. */
.gixo-studio.studio-workspace-container { padding-top: var(--gixo-shell-appbar-height, 72px); background: var(--folio-ws-panel); }
.studio-workspace-container .workspace-header { gap: 1rem; padding: .6rem 1rem; }
.studio-workspace-container .workspace-title { flex: 1; gap: .4rem; }
.studio-workspace-container .workspace-title h1 { max-width: none; font-size: 1.08rem; }
.studio-workspace-container .workspace-actions { flex: 0 0 auto; gap: .35rem; flex-wrap: nowrap; }
.folio-save-state { color: var(--folio-ws-muted); font-size: .8rem; white-space: nowrap; }
.studio-workspace-container .workspace-mobile-strip { padding: .15rem .75rem; }
.studio-workspace-container .workspace-mobile-strip .mud-button-root { flex-basis: auto; min-height: 44px; }
.studio-workspace-container .chapter-panel { background: var(--folio-ws-panel); }
.studio-workspace-container .chapter-header.folio-chapter-context { padding: .5rem 1.25rem; border-bottom: 1px solid var(--folio-ws-border); }
.folio-chapter-context > summary { cursor: pointer; color: var(--folio-ws-muted); font-size: .82rem; }
.folio-chapter-context > summary span { margin-left: .7rem; }
.studio-workspace-container .chapter-editor-content { padding: .5rem 1rem 1rem; }
.studio-workspace-container .chapter-editor-header { padding: .7rem 1rem; }
.studio-workspace-container .outline-panel { width: 17rem; flex-shrink: 0; align-self: flex-start; top: 8rem; }
.studio-workspace-container .outline-panel.collapsed { width: 60px; }
.folio-with-tools .outline-panel { display: none; }
/* FOL-U5: Parts and scenes works on the chapter open in the manuscript, chosen in the outline rail, so the
   rail stays beside Publisher tools on a desktop. Check my book keeps the wider manuscript. */
.folio-with-tools.folio-with-publisher-tools .outline-panel { display: flex; }
.folio-with-tools.folio-focus .chapter-panel { max-width: none; }
.folio-author-pane { flex: 0 0 clamp(24rem, 42vw, 38rem); min-width: 0; align-self: flex-start; position: sticky; top: calc(var(--mud-appbar-height, 64px) + 4rem); max-height: calc(100dvh - var(--mud-appbar-height, 64px) - 4rem); border-left: 1px solid var(--folio-ws-border-strong); background: var(--folio-ws-panel); z-index: 105; }
.folio-author-pane[hidden], .folio-tool[hidden], .folio-author-studio [hidden] { display: none !important; }
.folio-author-studio { width: 100%; max-width: none; display: flex; flex-direction: column; max-height: inherit; color: var(--folio-ws-text); font-size: .9rem; }
.folio-tool-header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .8rem 1rem .4rem; }
.folio-tool-header h2 { font-size: 1.2rem; margin: 0; font-weight: 650; }
.folio-eyebrow { color: var(--folio-ws-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; }
.folio-author-studio .folio-return { font-size: .75rem; padding: .45rem .55rem; }
.folio-tool-navigation { padding: 0 1rem; border-bottom: 1px solid var(--folio-ws-border); }
.folio-author-studio .folio-studio-modes { flex-wrap: wrap; gap: .3rem; margin: .3rem 0 .6rem; }
.folio-author-studio .folio-studio-modes button { flex: 1; font-size: .75rem; padding: .45rem .5rem; white-space: nowrap; }
.folio-tool-body { overflow-y: auto; min-height: 0; padding: .65rem 1rem 1.5rem; overscroll-behavior: contain; }
.folio-author-studio .folio-tool-fields { border: 0; padding: 0; margin: 0; max-height: none; overflow: visible; min-width: 0; }
.folio-author-studio .folio-draft-hint, .folio-author-studio .folio-draft-status { font-size: .75rem; color: var(--folio-ws-muted); }
.folio-author-studio .folio-primary { color: var(--folio-ws-panel); background: var(--folio-ws-accent); border-color: var(--folio-ws-accent); font-weight: 650; }
.folio-author-studio .folio-passage { display: flex; flex-direction: column; text-align: left; width: 100%; gap: .2rem; }
.folio-passage small { font-size: .7rem; color: var(--folio-ws-muted); }
.folio-author-studio .folio-selection-preview { background: var(--folio-ws-panel-soft); padding: .7rem; }
.folio-author-studio .folio-empty-state { border: 1px solid var(--folio-ws-border-strong); border-radius: .6rem; padding: 1rem; background: var(--folio-ws-tint); }
.folio-publish-progress { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); list-style: none; gap: .45rem; padding: 0 !important; counter-reset: publish; }
.folio-publish-progress li { padding: .5rem; border-radius: .4rem; background: var(--folio-ws-panel-soft); font-size: .8rem; border: 1px solid var(--folio-ws-border); }
.folio-publish-progress li::before { counter-increment: publish; content: counter(publish) '. '; color: var(--folio-ws-muted); }
.folio-publish-progress li[data-complete=true] { border-color: var(--folio-ws-success); }
.folio-reference-import { padding: 1rem; border: 1px dashed var(--folio-ws-border-strong); border-radius: .6rem; }
.folio-reference-card { padding: .7rem; border: 1px solid var(--folio-ws-border); border-radius: .5rem; margin: .5rem 0; }
.folio-author-studio .workspace-editions-band { padding: 0; background: transparent; }
.folio-author-studio .workspace-editions-inner { padding: 0; }
.folio-author-studio .workspace-edition-toolbar { flex-wrap: wrap; }
::highlight(folio-evidence) { background: #fde68a; color: #172033; }
@media (max-width: 960px) {
  .studio-workspace-container .workspace-header { position: static; flex-wrap: wrap; padding: .4rem .75rem; gap: .1rem; }
  .studio-workspace-container .workspace-title { flex-basis: 100%; }
  .studio-workspace-container .workspace-title h1 { font-size: 1rem; white-space: normal; line-height: 1.3; overflow: visible; }
  .studio-workspace-container .workspace-actions { margin-left: auto; }
  .folio-author-pane { position: fixed; top: var(--gixo-shell-appbar-height, 56px); bottom: 0; left: 0; right: 0; height: calc(100dvh - var(--gixo-shell-appbar-height, 56px)); max-height: calc(100dvh - var(--gixo-shell-appbar-height, 56px)); width: 100%; z-index: 145; border: 0; }
  .folio-author-studio { height: 100%; max-height: 100%; min-height: 0; }
  .folio-author-studio .folio-studio-modes { display: none; }
  .folio-tool-header { padding: .6rem 1rem .2rem; }
  .folio-tool-body { padding-top: .4rem; }
  .studio-workspace-container .chapter-editor-content { padding: .35rem .5rem; }
  .studio-workspace-container .chapter-header.folio-chapter-context { padding: .4rem 1rem; }
  .folio-chapter-context > summary span { display: none; }
  .studio-workspace-container .chapter-editor-mobile-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .25rem; }
  .studio-workspace-container .chapter-editor-mobile-actions .mud-button-root { min-width: 0; font-size: .7rem; padding: .35rem .15rem; min-height: 44px; }
  .studio-workspace-container .chapter-editor-mobile-actions .mud-button-icon-start { display: none; }
}
.studio-workspace-container .workspace-header { top: var(--gixo-shell-appbar-height, 72px); }
.folio-author-studio .source-picker-card, .folio-author-studio .source-summary-card, .folio-author-studio .source-recent-item { background: var(--folio-ws-panel-soft); color: var(--folio-ws-text); }
[data-testid=folio-create-wizard] .text-gradient { font-size: 2.1rem !important; line-height: 1.2; }
[data-testid=folio-create-wizard] .studio-stepper-wrapper { padding: .7rem 0; margin: .8rem 0 1rem; }
[data-testid=folio-create-wizard] .studio-custom-stepper { justify-content: flex-start; gap: .5rem; }
[data-testid=folio-create-wizard] .studio-custom-stepper button { min-height: 44px; padding: .65rem 1rem; border: 1px solid var(--folio-ws-border); font: inherit; cursor: pointer; color: var(--folio-studio-text); }
[data-testid=folio-create-wizard] .studio-custom-stepper button:disabled { cursor: default; opacity: .6; }
[data-testid=folio-create-wizard] .studio-custom-stepper button:focus-visible { outline: 2px solid var(--folio-ws-accent); outline-offset: 2px; }
/* FOL-N7/FOL-N8: the step line and its bar are the wizard's only "where am I" since the five step buttons went,
   so they show at every width (this rule hid them above 700px), and the bar is drawn in Folio's accent rather
   than the browser's default green. */
[data-testid=folio-create-wizard] .folio-step-summary { display: block; color: var(--folio-studio-text); font-size: .85rem; }
[data-testid=folio-create-wizard] .folio-step-progress { display: block; width: 100%; height: .35rem; margin-top: .65rem; border: 0; border-radius: 999px; overflow: hidden; -webkit-appearance: none; appearance: none; background: var(--folio-ws-tint-strong); accent-color: var(--folio-ws-accent); }
[data-testid=folio-create-wizard] .folio-step-progress::-webkit-progress-bar { background: var(--folio-ws-tint-strong); }
[data-testid=folio-create-wizard] .folio-step-progress::-webkit-progress-value { background: var(--folio-ws-accent); }
[data-testid=folio-create-wizard] .folio-step-progress::-moz-progress-bar { background: var(--folio-ws-accent); }
.folio-plan-options > summary { cursor: pointer; color: var(--folio-studio-muted); padding: .65rem 0; }
.folio-planner-note { color: var(--folio-studio-muted); font-size: .8rem; margin-top: .8rem; }
@media(max-width: 700px) {
  [data-testid=folio-create-wizard] > .mud-container { padding: 1rem .5rem !important; }
  [data-testid=folio-create-wizard] .studio-gradient-primary { padding: 1rem !important; }
  [data-testid=folio-create-wizard] .text-gradient { font-size: 1.7rem !important; }
  [data-testid=folio-create-wizard] .studio-custom-stepper { display: none; }
  [data-testid=folio-create-wizard] .studio-stepper-wrapper { margin: .25rem 0 .7rem; }
}
.folio-author-studio button:disabled { cursor: not-allowed; }
.folio-author-studio :is(input:not([type=checkbox]):not(.mud-input-slot),select) { min-height: 44px; }

.folio-tool-header, .folio-tool-navigation { flex-shrink: 0; }
.folio-author-studio .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Folio routes load this sheet directly; the application scoped bundle is landing-only. */
.folio-book-worklist { min-width: 0; }
.folio-book-worklist .folio-worklist-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .75rem; margin-block: 1rem; }
.folio-book-worklist .folio-worklist-filters label { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.folio-book-worklist .folio-worklist-filters input, .folio-book-worklist .folio-worklist-filters select { width: 100%; min-width: 0; }
.folio-book-worklist article { border: 1px solid var(--mud-palette-lines-default, #d1d5db); border-radius: .5rem; padding: 1rem; margin-block: .75rem; overflow-wrap: anywhere; }
.folio-book-worklist article h4 { margin-top: 0; }
.folio-book-worklist article blockquote { margin-inline: 0; padding-inline-start: .75rem; border-inline-start: 3px solid var(--mud-palette-lines-default, #d1d5db); white-space: pre-wrap; }
.folio-book-worklist article button { margin: .25rem .5rem .25rem 0; }

.folio-with-tools .chapter-editor-header-row { flex-wrap: wrap; }
.folio-with-tools .chapter-editor-title-row { flex-wrap: wrap; min-width: 0; }
.folio-with-tools .chapter-editor-header-actions { margin-left: auto; flex-shrink: 0; }
.folio-publish-progress li[data-complete=true]::before { content: "✓ "; color: var(--folio-ws-success); }

.folio-author-studio .folio-passage > * { align-self: stretch; text-align: left; }

/* Separate manuscript completion, editorial review and exact-file proof state. */
.folio-readiness-summary { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem 1rem; padding:.35rem 1rem; font-size:.78rem; background:var(--folio-ws-panel); color:var(--folio-ws-muted); }
.folio-readiness-summary button { padding:.3rem .4rem; min-height:36px; border:0; border-radius:.35rem; background:transparent; color:var(--folio-ws-heading); font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.folio-readiness-summary button:focus-visible { outline:2px solid var(--folio-ws-accent); outline-offset:2px; }
.studio-workspace-container .workspace-title h1 { margin:0; font-weight:650; line-height:1.3; }
@media(max-width:700px) { .folio-readiness-summary { gap:.1rem .55rem; padding:.15rem .75rem; } .folio-readiness-summary button { min-height:44px; } }

/* ==========================================================================
   UI review, 2026-10-19 (Folio).
   ========================================================================== */

/* FOL-U3: the one line a primary action shows when a click finds something missing. */
.folio-next-hint, .folio-missing-hint { color: var(--folio-ws-warning); font-size: .875rem; line-height: 1.4; margin: .5rem 0 0; }
.folio-next-hint:focus, .folio-missing-hint:focus, .folio-export-blockers:focus, .folio-export-failure:focus { outline: none; }
.edition-missing-hint { color: var(--mud-palette-warning); font-size: .875rem; margin: 0 0 .75rem; }
.language-selection-section:focus { outline: none; }

/* FOL-U13: a failed export says so inside the dialog, above its settings. */
.folio-export-failure { border: 1px solid var(--mud-palette-error); border-radius: .5rem; padding: .75rem 1rem; color: var(--mud-palette-text-primary); background: var(--mud-palette-surface); }

/* FOL-U16: the audiobook and translation editions as two cards. */
.folio-edition-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.folio-edition-card { border: 1px solid var(--folio-ws-border-strong); border-radius: .6rem; padding: 1rem; background: var(--folio-ws-panel-soft); min-width: 0; }
.folio-edition-card-head { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .75rem; }
.folio-edition-card-icon { color: var(--folio-ws-accent); font-size: 2rem; flex-shrink: 0; }
.folio-edition-card h3.workspace-edition-title { margin: 0 0 .25rem; font-size: 1rem; }
.folio-edition-card-copy { color: var(--folio-ws-muted); font-size: .85rem; margin: 0; }
.folio-edition-card .editions-panel { margin-top: 1rem; }
.folio-edition-card .audiobook-editions-list { margin-top: 1rem; }

/* FOL-U19: the readiness line carries the book's kind and the drafting capacity. */
.folio-readiness-summary .folio-readiness-kind { color: var(--folio-ws-heading); font-weight: 650; }
.folio-readiness-summary .folio-readiness-capacity { margin-left: auto; }

/* FOL-U22: the floating Support tab covered right-edge controls in the workspace and the reader.
   Support stays in the navigation drawer and the account menu there. */
body:has(.studio-workspace-container, [data-testid=folio-reader]) .support-launcher-tab { display: none; }
/* FOL-N17 (UX deep dive, 2026-10-23): on a phone the tab also covered the new-book wizard's text. */
@media (max-width: 600px) {
  body:has([data-testid=folio-create-wizard]) .support-launcher-tab { display: none; }
}

/* FOL-U22: the reader's key hint shows for a few seconds, then fades and stops taking clicks. */
.folio-reader-hint { animation: folio-reader-hint-fade .6s ease 6s forwards; }
@keyframes folio-reader-hint-fade { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .folio-reader-hint { animation-duration: .01s; } }

/* FOL-U9: the Story Bible dialog is the one editor; an entry's review state and chapters sit in its details. */
.story-bible-entry { margin-bottom: .75rem; }
.story-bible-entry-row { display: flex; gap: 8px; align-items: flex-start; }
.story-bible-review { margin: .25rem 0 0; }
.story-bible-review > summary { cursor: pointer; font-size: .85rem; color: var(--mud-palette-text-secondary); }
.story-bible-review-body { display: grid; gap: .5rem; margin-top: .5rem; padding: .5rem 0 .5rem .75rem; border-left: 2px solid var(--mud-palette-lines-default); }
.story-bible-review-body p { margin: 0; font-size: .85rem; }
.story-bible-review-body blockquote { margin: 0; padding-left: .75rem; border-left: 2px solid var(--mud-palette-primary); font-style: italic; }
.story-bible-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .5rem; }
.story-bible-review-body label { display: grid; gap: .25rem; font-size: .8rem; color: var(--mud-palette-text-secondary); }
.story-bible-review-body :is(select, input, textarea) { font: inherit; font-size: .875rem; color: var(--mud-palette-text-primary); background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: .375rem; padding: .375rem .5rem; min-width: 0; }
.story-bible-review-body textarea { min-height: 3.5rem; resize: vertical; }
.story-bible-review-body :is(select, input, textarea):focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.story-bible-review-stale { color: var(--mud-palette-warning); }
.story-bible-review-missing { color: var(--mud-palette-error); }
.story-bible-review-status:empty { display: none; }
.story-bible-history ul { margin: .25rem 0 0; padding-left: 1.25rem; font-size: .8rem; color: var(--mud-palette-text-secondary); }

/* FOL-U10: the kind question in the blank-book and import dialogs. */
.folio-kind-picker { display: grid; gap: .5rem; }
.folio-kind-question { margin: 0; font-weight: 600; color: var(--mud-palette-text-primary); }
.folio-kind-optional { margin-left: .35rem; font-weight: 400; font-size: .8rem; color: var(--mud-palette-text-secondary); }
.folio-kind-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.folio-kind-option { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; padding: .6rem .4rem; border: 1px solid var(--mud-palette-lines-default); border-radius: .5rem; background: transparent; color: var(--mud-palette-text-primary); font: inherit; text-align: center; cursor: pointer; }
.folio-kind-option:hover { border-color: var(--mud-palette-primary); }
.folio-kind-option[aria-pressed=true] { border-color: var(--mud-palette-primary); box-shadow: inset 0 0 0 1px var(--mud-palette-primary); }
.folio-kind-option:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.folio-kind-page { color: var(--mud-palette-text-secondary); line-height: 0; }
.folio-kind-option[aria-pressed=true] .folio-kind-page { color: var(--mud-palette-primary); }
.folio-kind-page svg { width: 2.5rem; height: 3.25rem; }
.folio-kind-name { font-weight: 600; font-size: .9rem; }
.folio-kind-hint, .folio-kind-note { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.folio-kind-note { margin: 0; }

/* FOL-U22: a workspace menu's items sit in one focus wrapper; it keeps MudMenu's divider spacing and draws no ring itself. */
.folio-menu-focus { outline: none; }
.folio-menu-focus > .mud-divider { margin: 4px 0; }

/* UI review rest: folio (FOL-U5, FOL-U21) */
.folio-tool-navigation { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
/* FOL-N11: Publisher tools opens on tiles, each a name and one sentence; inside a tool, one way back and its name. */
.folio-author-studio .folio-tool-back { font-size: .8rem; padding: .45rem .7rem; }
.folio-tool-current { margin: 0; font-weight: 650; color: var(--folio-ws-heading); }
.folio-tool-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: .6rem; }
.folio-author-studio .folio-tool-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; margin: 0; padding: .85rem .95rem; text-align: left; border-radius: .6rem; }
.folio-author-studio .folio-tool-tile:hover, .folio-author-studio .folio-tool-tile:focus-visible { border-color: var(--folio-ws-accent); background: var(--folio-ws-tint); }
.folio-tool-tile strong { font-size: .95rem; color: var(--folio-ws-heading); }
.folio-tool-tile span { font-size: .8rem; color: var(--folio-ws-muted); line-height: 1.4; }
.folio-more-tools { margin-top: 1rem; }
.folio-more-tools > summary { cursor: pointer; font-weight: 600; padding: .5rem 0; min-height: 44px; display: flex; align-items: center; }
.folio-author-studio .folio-open-chapter { color: var(--folio-ws-muted); font-size: .8rem; margin: 0 0 .6rem; }
.folio-check-my-book { display: flex; flex-direction: column; gap: .6rem; }
.folio-check-my-book > .folio-primary { align-self: flex-start; min-height: 44px; padding: .55rem 1rem; }
.folio-check-intro, .folio-check-note { color: var(--folio-ws-muted); font-size: .82rem; margin: 0; }
.folio-check-status { margin: 0; font-size: .85rem; }
/* FOL-N12: a kept finding in a chapter edited after the check says it may be out of date. */
.folio-check-stale { font-size: .75rem; color: var(--folio-ws-warning); font-weight: 600; }
.folio-check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.folio-check-item { padding: .7rem .8rem; border: 1px solid var(--folio-ws-border); border-radius: .5rem; background: var(--folio-ws-panel-soft); display: flex; flex-direction: column; gap: .3rem; }
.folio-check-item p { margin: 0; }
.folio-check-meta { color: var(--folio-ws-muted); font-size: .75rem; }
.folio-check-item blockquote { margin: 0; padding-left: .7rem; border-left: 3px solid var(--folio-ws-border-strong); color: var(--folio-ws-muted); }
.folio-check-item button { align-self: flex-start; }
.folio-book-worklist { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--folio-ws-border); }
.folio-book-worklist h3 { font-size: .95rem; margin: 0 0 .3rem; }
.studio-workspace-container .folio-mobile-bar { flex-wrap: nowrap; align-items: center; gap: .25rem; padding: .15rem .5rem; border-bottom: 1px solid var(--folio-ws-border); background: var(--folio-ws-panel); }
.studio-workspace-container .folio-mobile-bar .mud-button-root { flex: 0 0 auto; min-height: 44px; }
.folio-mobile-progress { margin-right: auto; font-size: .8rem; color: var(--folio-ws-muted); white-space: nowrap; }

/* FOL-N9 (UX deep dive, 2026-10-23): Folio's one book card (FolioBookCard), on the Folio home's "Your books" and on
   /studio's "All books". The frame, title and meta line are the suite's .brand-card; these rules lay out the print
   page, the progress line and the actions, in both themes. */
.folio-book-card { gap: .6rem; min-width: 0; }
.folio-book-card__open { display: flex; flex-direction: column; gap: .5rem; color: inherit; text-decoration: none; border-radius: 10px; }
.folio-book-card__open:focus-visible { outline: 2px solid var(--folio-ws-accent); outline-offset: 3px; }
.folio-book-card__open:hover .brand-card__title { text-decoration: underline; }
.folio-book-card__thumb { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center top; border-radius: 8px; border: 1px solid var(--mud-palette-lines-default); background: #eef2f6; }
.folio-book-card__open:hover .folio-book-card__thumb { border-color: var(--folio-ws-accent); }
.folio-book-card__team { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; }
.folio-book-card__progress { display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; color: var(--mud-palette-text-secondary); }
html[data-theme="light"] .folio-book-card__progress { color: #334155; }
.folio-book-card__actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }
.folio-book-card__actions .mud-button-root { min-height: 36px; }
.folio-book-card__status { margin: 0; font-size: .8rem; color: var(--mud-palette-text-secondary); }