/* ==========================================================================
   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 values are byte-identical to
   the colours those files already hardcoded, including the cyan accent: this is
   a theming fix, not a rebrand. (Folio's brand primary is indigo #6366f1 and
   the workspace's cyan predates the product themes — worth reconciling, but not
   inside a change whose job is to make light mode work.)

   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 — the workspace's long-standing cyan */
  --folio-ws-accent: #00d9ff;
  --folio-ws-border: rgba(0, 217, 255, 0.15);
  --folio-ws-border-strong: rgba(0, 217, 255, 0.3);
  --folio-ws-tint: rgba(0, 217, 255, 0.1);
  --folio-ws-tint-strong: rgba(0, 217, 255, 0.2);

  /* Status */
  --folio-ws-success: #10b981;
  --folio-ws-warning: #fbbf24;
  --folio-reader-bg: #0a0a14;
  --folio-reader-text: #e5e7eb;
  --folio-reader-heading: #f9fafb;
  --folio-reader-rule: rgba(0, 217, 255, 0.1);
}

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;

  /* Cyan at #00d9ff is 1.6:1 on white — unreadable. The light accent is the
     same hue taken to a tone that passes AA for text and borders. */
  --folio-ws-accent: #0e7490;  /* cyan-700, 5.36:1 on white */
  --folio-ws-border: rgba(15, 23, 42, 0.12);
  --folio-ws-border-strong: rgba(14, 116, 144, 0.45);
  --folio-ws-tint: rgba(14, 116, 144, 0.08);
  --folio-ws-tint-strong: rgba(14, 116, 144, 0.16);

  --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: rgba(0, 217, 255, 0.1);
}

/* 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 h5 { 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; }
.folio-workspace-areas { display: flex; gap: .3rem; padding: .35rem 1rem; border-bottom: 1px solid var(--folio-ws-border); background: var(--folio-ws-panel); }
.folio-workspace-areas button { min-height: 44px; padding: .55rem 1.1rem; border: 0; border-radius: .45rem; background: transparent; color: var(--folio-ws-muted); font: inherit; cursor: pointer; }
.folio-workspace-areas button[aria-pressed=true] { color: var(--folio-ws-heading); background: var(--folio-ws-tint-strong); font-weight: 700; }
.folio-workspace-areas button:focus-visible { outline: 2px solid var(--folio-ws-accent); outline-offset: 1px; }
.folio-book-overview { border-bottom: 1px solid var(--folio-ws-border); }
.folio-book-overview > summary { color: var(--folio-ws-muted); font-size: .8rem; cursor: pointer; padding: .45rem 1.5rem; }
.folio-focus .folio-book-overview { display: none; }
.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; }
.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-picker { display: none !important; }
.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 h5 { font-size: 1rem; white-space: normal; line-height: 1.3; overflow: visible; }
  .studio-workspace-container .workspace-actions { margin-left: auto; }
  .folio-workspace-areas { padding: .2rem .75rem; }
  .folio-workspace-areas button { flex: 1; padding-inline: .5rem; font-size: .85rem; }
  .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-picker { display: flex !important; align-items: center; gap: .6rem; margin: .5rem 0 !important; font-size: .8rem; }
  .folio-tool-picker select { flex: 1; }
  .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; }
.folio-step-summary, .folio-step-progress { display: none; }
.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] .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; accent-color: var(--folio-ws-accent); }
  [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-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; }