styles.css

/* ==========================================================================
   Draft Bench Plugin Stylesheet (BUILT)
   ==========================================================================

   This file is generated from component files in styles/.
   Do not edit directly. Edit the component files, then run:
     npm run build:css

   Components: 13
*/


/* --------------------------------------------------------------------------
   VARIABLES.CSS  (109 lines, 3.92 KB)
   -------------------------------------------------------------------------- */

/*
 * CSS custom properties for Draft Bench.
 *
 * Two layers:
 *
 *   1. `.dbench-scope` — plugin-internal scales (spacing, radius,
 *      transitions) used by modals and other scoped UI. Not
 *      user-configurable; lives class-scoped so it doesn't leak into
 *      unrelated parts of the DOM.
 *   2. `body` — per-note-type styling (scene/draft typography,
 *      colors, archival cue). Declared at body scope so Style Settings
 *      overrides (injected at body or body[data-style-settings]
 *      specificity) can cleanly take precedence. Consumed in
 *      `notes.css` via `.dbench-scene ...` / `.dbench-draft ...`
 *      selectors that read these variables by inheritance.
 *
 * Color values reference Obsidian's native variables so the plugin
 * inherits the user's theme automatically.
 */

.dbench-scope {
	/* Spacing scale */
	--dbench-spacing-xs: 4px;
	--dbench-spacing-sm: 8px;
	--dbench-spacing-md: 12px;
	--dbench-spacing-lg: 16px;
	--dbench-spacing-xl: 24px;

	/* Border-radius scale */
	--dbench-radius-xs: 2px;
	--dbench-radius-sm: 4px;
	--dbench-radius-md: 6px;
	--dbench-radius-lg: 8px;

	/* Transition scale */
	--dbench-transition-fast: 100ms ease-out;
	--dbench-transition-normal: 200ms ease-out;
	--dbench-transition-slow: 300ms ease-out;
}

body {
	/*
	 * Scene and draft typography — shared across both leaf types.
	 * Defaults match the user's theme (no visible change unless
	 * overridden via Style Settings or a CSS snippet).
	 */
	--dbench-scene-font-family: inherit;
	--dbench-scene-font-size: inherit;
	--dbench-scene-line-height: inherit;
	--dbench-scene-max-width: var(--file-line-width);

	/*
	 * Scene-leaf only. Defaults to "match theme" — the consuming
	 * rules apply these values but the values themselves are the
	 * same Obsidian vars the theme already uses, so no visible
	 * change until the user customizes.
	 */
	--dbench-scene-background: var(--background-primary);
	--dbench-scene-text-color: var(--text-normal);

	/*
	 * Draft-leaf only. The border-left is the archival cue that
	 * motivated leaf tagging in the first place — subtle default
	 * that reads sensibly in light and dark themes. Background and
	 * text color default to "match theme" as above.
	 */
	--dbench-draft-background: var(--background-primary);
	--dbench-draft-text-color: var(--text-normal);
	--dbench-draft-border-left: 3px solid var(--text-faint);

	/*
	 * Status color palette. The D3 leaf restyle (#30) dropped per-
	 * status colors from the Manuscript view; these variables remain
	 * because the Manuscript Builder's status filter pills (#25) still
	 * use them to indicate the toggle state per status. The Style
	 * Settings exposures for the four named statuses were dropped
	 * alongside the leaf restyle; theme authors override these only
	 * by editing the CSS directly. `--dbench-status-default` is the
	 * fallback for out-of-vocabulary status values.
	 */
	--dbench-status-brainstorm: #5b8cd6;
	--dbench-status-idea: #5b8cd6;
	--dbench-status-draft: #9aa0a6;
	--dbench-status-revision: #d4a443;
	--dbench-status-final: #74b275;
	--dbench-status-default: var(--text-muted);

	/*
	 * Manuscript Builder Preview tab. Tunes the underline-pattern
	 * tabs in the Builder modal and the Preview tab's rendered
	 * prose. Per docs/planning/manuscript-builder-preview.md § 8;
	 * applied in manuscript-builder.css, exposed via
	 * style-settings.css.
	 *
	 * Preview tunes the in-Obsidian review register, NOT the final
	 * compiled PDF / ODT / DOCX output (those go through pdfmake /
	 * docx generators on a different rendering pipeline). Writers
	 * wanting to verify the final compile should compile to disk
	 * and open the file.
	 */
	--dbench-tab-active-accent: var(--interactive-accent);
	--dbench-preview-font-family: var(--font-text);
	--dbench-preview-font-size: var(--font-text-size);
	--dbench-preview-line-height: var(--line-height-normal);
	--dbench-preview-max-width: none;
	--dbench-preview-paragraph-spacing: 1em;
	--dbench-preview-text-align: left;
}


/* End of variables.css */

/* --------------------------------------------------------------------------
   STYLE-SETTINGS.CSS  (155 lines, 6.07 KB)
   -------------------------------------------------------------------------- */

/*
 * Style Settings manifest for Draft Bench.
 *
 * Parsed by the Style Settings community plugin
 * (mgmeyers/obsidian-style-settings). When that plugin is installed,
 * a UI under Settings → Style Settings → Draft Bench exposes the
 * variables declared here, writing overrides to a body-level style
 * block. The variable defaults live in variables.css; this file only
 * declares the UI surface.
 *
 * When Style Settings isn't installed, this CSS comment block has no
 * effect — the variables still have their default values, and users
 * can still override via a personal CSS snippet.
 */

/* @settings

name: Draft Bench
id: draft-bench
settings:
    -
        id: dbench-typography-heading
        title: Scene and draft typography
        description: Applies to both scene and draft leaves. Scene- and draft-specific color overrides are below.
        type: heading
        level: 1
        collapsed: false
    -
        id: --dbench-scene-font-family
        title: Font family
        description: Font for scene and draft note bodies. Use "inherit" to match your theme.
        type: variable-text
        default: inherit
    -
        id: --dbench-scene-font-size
        title: Font size
        description: 1em / 16px / 1.1rem / etc. Use "inherit" to match your theme.
        type: variable-text
        default: inherit
    -
        id: --dbench-scene-line-height
        title: Line height
        description: 1.5, 1.6, 1.8, etc. Use "inherit" to match your theme.
        type: variable-text
        default: inherit
    -
        id: --dbench-scene-max-width
        title: Reading width
        description: "Max content width. Only applied when Obsidian's Readable line length is on. Override to 65ch, 800px, or none for a different behavior on scene and draft leaves."
        type: variable-text
        default: "var(--file-line-width)"
    -
        id: dbench-scene-heading
        title: Scene leaf
        description: Scene-specific appearance.
        type: heading
        level: 1
        collapsed: true
    -
        id: --dbench-scene-background
        title: Background color
        description: CSS color value. Use "var(--background-primary)" to match your theme.
        type: variable-text
        default: "var(--background-primary)"
    -
        id: --dbench-scene-text-color
        title: Text color
        description: CSS color value. Use "var(--text-normal)" to match your theme.
        type: variable-text
        default: "var(--text-normal)"
    -
        id: dbench-draft-heading
        title: Draft leaf (archival)
        description: Draft-specific appearance. Distinguishing archived snapshots from the live scene helps writers avoid accidentally editing archives.
        type: heading
        level: 1
        collapsed: true
    -
        id: --dbench-draft-background
        title: Background color
        description: CSS color value. "var(--background-secondary)" gives a subtle archival tint.
        type: variable-text
        default: "var(--background-primary)"
    -
        id: --dbench-draft-text-color
        title: Text color
        description: CSS color value. "var(--text-muted)" dims draft text.
        type: variable-text
        default: "var(--text-normal)"
    -
        id: --dbench-draft-border-left
        title: Border-left (archival cue)
        description: CSS border shorthand. Default is a thin theme-muted line. Set to "none" to remove.
        type: variable-text
        default: "3px solid var(--text-faint)"
    -
        id: dbench-manuscript-builder-preview-heading
        title: Manuscript Builder Preview
        description: "Tunes the Preview tab in the Manuscript Builder modal. Note: Preview is for in-Obsidian review only; it is NOT a faithful render of the final compiled PDF / ODT / DOCX output (those go through different rendering pipelines). Compile to disk and open the file to check the exported result."
        type: heading
        level: 1
        collapsed: true
    -
        id: --dbench-tab-active-accent
        title: Tab active color
        description: Underline and active-text color for the Build / Preview tab strip. Defaults to your theme's interactive accent.
        type: variable-text
        default: "var(--interactive-accent)"
    -
        id: --dbench-preview-font-family
        title: Preview font family
        description: Font for Preview body. Many writers prefer a serif (e.g., Crimson, Garamond, Caslon) for prose review even when their regular note font is sans-serif.
        type: variable-text
        default: "var(--font-text)"
    -
        id: --dbench-preview-font-size
        title: Preview font size
        description: Body font size in Preview. 1em / 16px / 1.1rem / etc.
        type: variable-text
        default: "var(--font-text-size)"
    -
        id: --dbench-preview-line-height
        title: Preview line height
        description: Line spacing in Preview. A major readability lever for long-form prose; 1.6 - 1.8 reads comfortably for most serifs.
        type: variable-text
        default: "var(--line-height-normal)"
    -
        id: --dbench-preview-max-width
        title: Preview reading width
        description: Optional max-width constraint on the Preview column. Defaults to "none" (fills the modal). Set to "45em" or similar for a constrained 65-75 character reading column.
        type: variable-text
        default: none
    -
        id: --dbench-preview-paragraph-spacing
        title: Preview paragraph spacing
        description: Gap between paragraphs in Preview. 1em is roughly one blank line; tighten to 0.5em for denser prose, loosen to 1.5em for airier.
        type: variable-text
        default: 1em
    -
        id: --dbench-preview-text-align
        title: Preview text alignment
        description: Body text alignment in Preview. "Justify" can read more book-like for serif fonts but may produce wide gaps without hyphenation.
        type: variable-select
        allowEmpty: false
        default: left
        options:
            -
                label: Left
                value: left
            -
                label: Justify
                value: justify

*/


/* End of style-settings.css */

/* --------------------------------------------------------------------------
   BASE.CSS  (40 lines, 0.75 KB)
   -------------------------------------------------------------------------- */

/*
 * Base utilities, animations, and shared primitives for Draft Bench.
 *
 * Component-specific styles live in their own files (control-center.css,
 * modals.css, notes.css, etc.). This file holds only the pieces those
 * components reference.
 */

/*
 * Loading-state spinner animation. Reused by any loading surface
 * (Control Center first-scan, picker modals, batch operations).
 */

@keyframes dbench-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.dbench-spinner {
	animation: dbench-spin 1s linear infinite;
}

/*
 * Utility classes. Prefixed with dbench- for namespace isolation.
 * Keep minimal: prefer semantic component classes elsewhere.
 */

.dbench-hidden {
	display: none;
}

.dbench-clickable {
	cursor: pointer;
}


/* End of base.css */

/* --------------------------------------------------------------------------
   NOTES.CSS  (73 lines, 2.38 KB)
   -------------------------------------------------------------------------- */

/*
 * Per-note-type styling for plugin-managed editor leaves.
 *
 * Classes are applied by ui/leaf-styles.ts based on `dbench-type`:
 * `.dbench-project`, `.dbench-scene`, `.dbench-draft` (each paired
 * with its `.draft-bench-*` long-form sibling).
 *
 * Variables are declared at `body` scope in variables.css and
 * exposed via the Style Settings manifest in style-settings.css so
 * users can override them without writing a CSS snippet. Defaults
 * read sensibly in Obsidian's default light and dark themes, and
 * match theme vars where possible (meaning no visible change by
 * default — the plugin doesn't fight the theme unless the user
 * customizes).
 */

/* ---- Shared typography for scene and draft leaves ---- */

.dbench-scene .cm-editor,
.dbench-scene .markdown-preview-view,
.dbench-draft .cm-editor,
.dbench-draft .markdown-preview-view {
	font-family: var(--dbench-scene-font-family);
	font-size: var(--dbench-scene-font-size);
	line-height: var(--dbench-scene-line-height);
}

/*
 * Max-width (reading width) is gated on `body.is-readable-line-width`
 * so Obsidian's "Readable line length" toggle keeps authority. When
 * off, we don't apply any max-width and Obsidian's no-cap default
 * stands. When on, our rule takes over at higher specificity, using
 * `--dbench-scene-max-width` (default: `var(--file-line-width)`, the
 * same variable Obsidian uses). Users can override our var via Style
 * Settings to give scene and draft leaves a different reading width
 * from the rest of their vault.
 */

body.is-readable-line-width .dbench-scene .cm-sizer,
body.is-readable-line-width .dbench-scene .markdown-preview-sizer,
body.is-readable-line-width .dbench-draft .cm-sizer,
body.is-readable-line-width .dbench-draft .markdown-preview-sizer {
	max-width: var(--dbench-scene-max-width);
}

/* ---- Scene leaf colors ---- */

.dbench-scene .markdown-source-view,
.dbench-scene .markdown-reading-view {
	background-color: var(--dbench-scene-background);
}

.dbench-scene .cm-editor,
.dbench-scene .markdown-preview-view {
	color: var(--dbench-scene-text-color);
}

/* ---- Draft leaf colors + archival cue ---- */

.dbench-draft {
	border-left: var(--dbench-draft-border-left);
}

.dbench-draft .markdown-source-view,
.dbench-draft .markdown-reading-view {
	background-color: var(--dbench-draft-background);
}

.dbench-draft .cm-editor,
.dbench-draft .markdown-preview-view {
	color: var(--dbench-draft-text-color);
}


/* End of notes.css */

/* --------------------------------------------------------------------------
   MANUSCRIPT-BUILDER.CSS  (456 lines, 14.16 KB)
   -------------------------------------------------------------------------- */

/*
 * Manuscript Builder modal — dedicated surface for editing a
 * project's compile presets and triggering a compile run.
 *
 * Layout: header (title + project read-out + preset picker + buttons),
 * body (stack of collapsible form sections — Metadata, Inclusion,
 * Output, Content handling, Last compile).
 *
 * Replaces the retired Control Center modal's compile-tab content.
 * Section renderers (under src/ui/manuscript-builder/sections/) use
 * `.dbench-manuscript-builder__*` classes consistently with this
 * file; the legacy `.dbench-compile-tab__*` namespace was retired
 * with the Control Center.
 */

/*
 * Modal width override. Obsidian's default modal (~600-700px) is
 * too narrow for Setting rows with multi-line descriptions —
 * "Destination" truncates to "Des...", descriptions wrap every few
 * words. 960px gives the body comfortable room; `min(... , 92vw)`
 * keeps the modal responsive on smaller viewports.
 */
.dbench-manuscript-builder-modal {
	width: min(960px, 92vw);
}

/*
 * Close button stacking. The sticky header inside .modal-content
 * has z-index: 1 (so scrolled content doesn't bleed through its
 * opaque background). Without an explicit z-index on the close
 * button, the sticky header's stacking context can paint over it
 * once the writer scrolls. Scoped via the modal class so we don't
 * touch other plugins' modals.
 */
.dbench-manuscript-builder-modal .modal-close-button {
	z-index: 2;
}

.dbench-manuscript-builder {
	display: flex;
	flex-direction: column;
	gap: var(--dbench-spacing-lg);
}

.dbench-manuscript-builder__title {
	margin: 0;
	font-size: var(--h2-size);
}

/*
 * Sticky region: title, project + preset header, tab strip. Pins to
 * the top of the modal's scroll container so the writer can switch
 * projects, presets, and tabs from any scroll position when the
 * Preview tab's prose is long. Per
 * docs/planning/manuscript-builder-preview.md § 6 "long-scroll
 * consideration": the sticky-header pattern was flagged as a cheap
 * mitigation for the deep-scroll case where the header would
 * otherwise scroll out of reach.
 *
 * Opaque background so scrolled content doesn't show through. The
 * tab strip's existing bottom border serves as the visible boundary
 * between the sticky region and the scrolling body, so the sticky
 * container itself doesn't need its own border.
 */
.dbench-manuscript-builder__sticky-header {
	display: flex;
	flex-direction: column;
	gap: var(--dbench-spacing-md);
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--background-primary);
}

/*
 * Dock-to-leaf button. Top-right of the sticky header, visually
 * adjacent to the modal's close button. Only rendered when the
 * host (currently only the modal) provides a dock handler — the
 * leaf doesn't show a "convert to modal" affordance (passive
 * reverse path per the #27 design ratification). `position: sticky`
 * on the parent already establishes a containing block for the
 * absolute positioning here.
 *
 * The sticky header's z-index 1 keeps the dock button above
 * scrolled content; the modal close button at z-index 2 stays
 * above this when scrolled to the very top.
 */
.dbench-manuscript-builder__dock-button {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	color: var(--text-muted);
	background: transparent;
	border: none;
	border-radius: var(--dbench-radius-sm);
	cursor: pointer;
}

.dbench-manuscript-builder__dock-button:hover {
	color: var(--text-normal);
	background: var(--background-modifier-hover);
}

.dbench-manuscript-builder__dock-button:focus-visible {
	outline: 2px solid var(--interactive-accent);
	outline-offset: 1px;
}

.dbench-manuscript-builder__header {
	display: flex;
	flex-direction: column;
	gap: var(--dbench-spacing-sm);
	padding-bottom: var(--dbench-spacing-md);
	border-bottom: 1px solid var(--background-modifier-border);
}

.dbench-manuscript-builder__project-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dbench-spacing-sm);
}

.dbench-manuscript-builder__project-icon {
	display: inline-flex;
	align-items: center;
	color: var(--text-muted);
}

.dbench-manuscript-builder__project-picker {
	flex: 1 1 auto;
	min-width: 12em;
}

.dbench-manuscript-builder__preset-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dbench-spacing-sm);
}

.dbench-manuscript-builder__preset-picker {
	flex: 1 1 auto;
	min-width: 12em;
}

.dbench-manuscript-builder__preset-empty {
	flex: 1 1 auto;
	color: var(--text-muted);
	font-style: italic;
}

.dbench-manuscript-builder__buttons {
	display: flex;
	gap: var(--dbench-spacing-sm);
}

/*
 * Tab strip (Build / Preview). Underline pattern per
 * docs/planning/manuscript-builder-preview.md § 1: plain text labels,
 * 2px accent-colored underline beneath the active tab; the strip's
 * 1px bottom border is overlapped by 1px (negative margin on the
 * active underline) so the active tab visually punches through the
 * strip's border.
 *
 * --dbench-tab-active-accent is the Style Settings hook for theme
 * authors who want the underline / active-text color to differ from
 * Obsidian's global accent. Defaults to --interactive-accent.
 */
.dbench-manuscript-builder__tabs {
	display: flex;
	gap: var(--dbench-spacing-md);
	border-bottom: 1px solid var(--background-modifier-border);
}

.dbench-manuscript-builder__tab {
	margin: 0;
	padding: 10px 16px;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--text-muted);
	font-size: var(--font-ui-medium);
	cursor: pointer;
	transition: color 0.12s, border-color 0.12s;
}

.dbench-manuscript-builder__tab:hover:not(.dbench-manuscript-builder__tab--active) {
	color: var(--text-normal);
}

.dbench-manuscript-builder__tab:focus-visible {
	outline: 2px solid var(--interactive-accent);
	outline-offset: -2px;
}

.dbench-manuscript-builder__tab--active {
	color: var(--dbench-tab-active-accent);
	border-bottom-color: var(--dbench-tab-active-accent);
}

.dbench-manuscript-builder__tab-body {
	display: flex;
	flex-direction: column;
	gap: var(--dbench-spacing-md);
}

/*
 * Preview typography toolbar styling lives in styles/preview-toolbar.css
 * since it is shared between the Builder Preview tab and the Manuscript
 * view's Continuous mode (per docs/planning/manuscript-view-continuous-mode.md § 6).
 */

/*
 * Preview tab body container. The class hook lets theme authors
 * target Preview-rendered prose (serif font, justified text,
 * narrower reading column, etc.) without affecting the Build tab's
 * form fields. Typography is tuned via the --dbench-preview-* vars
 * exposed through Style Settings (declared in variables.css, UI
 * surface in style-settings.css). Per § 8 of the planning doc.
 *
 * Reminder: these variables tune Preview *display*, not the final
 * compiled PDF / ODT / DOCX output. The compile pipelines run
 * through pdfmake / docx generators on a different rendering path.
 */
.dbench-manuscript-builder__preview {
	display: flex;
	flex-direction: column;
	max-width: var(--dbench-preview-max-width);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	font-family: var(--dbench-preview-font-family);
	font-size: var(--dbench-preview-font-size);
	line-height: var(--dbench-preview-line-height);
	text-align: var(--dbench-preview-text-align);
}

/*
 * text-align is also re-applied here because Obsidian's prose
 * styling sets `text-align: start` on rendered paragraphs at a
 * specificity higher than the inherited value from .__preview;
 * relying on inheritance alone leaves the Style Settings
 * justify / left choice ineffective.
 */
.dbench-manuscript-builder__preview .markdown-rendered p {
	margin-block-end: var(--dbench-preview-paragraph-spacing);
	text-align: var(--dbench-preview-text-align);
}

/*
 * Rendering-state spinner. Per
 * docs/planning/manuscript-builder-preview.md § 3, the spinner
 * appears only when the compile + render takes longer than 250ms,
 * implemented via a setTimeout cleared on completion. The icon
 * reuses the shared `dbench-spinner` utility from base.css.
 */
.dbench-manuscript-builder__preview-spinner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--dbench-spacing-sm);
	padding: var(--dbench-spacing-xl) var(--dbench-spacing-lg);
	color: var(--text-muted);
}

.dbench-manuscript-builder__preview-spinner-icon {
	display: inline-flex;
	align-items: center;
}

/*
 * Preview empty states: no presets, no scenes, filters excluded
 * everything, render error. Per
 * docs/planning/manuscript-builder-preview.md § 7. Visual register
 * matches the parent `__empty` block; the dedicated class hook lets
 * theme authors tune Preview empty states (e.g., dim more, add
 * illustration) without affecting the Build tab's empty states.
 */
.dbench-manuscript-builder__preview-empty {
	display: flex;
	flex-direction: column;
	gap: var(--dbench-spacing-sm);
	padding: var(--dbench-spacing-xl) var(--dbench-spacing-lg);
	text-align: center;
	color: var(--text-muted);
}

.dbench-manuscript-builder__preview-empty-message {
	margin: 0;
	font-weight: var(--font-semibold);
	color: var(--text-normal);
}

.dbench-manuscript-builder__preview-empty-hint {
	margin: 0;
	font-size: var(--font-ui-small);
}

.dbench-manuscript-builder__empty {
	display: flex;
	flex-direction: column;
	gap: var(--dbench-spacing-sm);
	padding: var(--dbench-spacing-xl) var(--dbench-spacing-lg);
	text-align: center;
	color: var(--text-muted);
}

.dbench-manuscript-builder__empty-message {
	margin: 0;
	font-weight: var(--font-semibold);
	color: var(--text-normal);
}

.dbench-manuscript-builder__empty-hint {
	margin: 0;
	font-size: var(--font-ui-small);
}

/*
 * Status-filter chip layout (Inclusion section). The chip is a
 * plain <label> + checkbox + text; this rule lays them out
 * horizontally. Native checkbox styling carries the visual weight
 * (per ui-reference.md § 0).
 */
.dbench-manuscript-builder__status-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dbench-spacing-sm);
	align-items: center;
}

/*
 * Toggleable filter pill. Each chip wraps a visually-hidden
 * <input type="checkbox"> plus the status label. Outlined by default;
 * fills with a color-mix tint of the per-status `--dbench-status-<status>`
 * variable when the underlying checkbox is :checked.
 *
 * Tinted-fill rather than full-saturation: the brand-color variables
 * (#5b8cd6, #9aa0a6, #d4a443, #74b275) are mid-tone foreground colors
 * that don't reach WCAG AA contrast against either white or dark text
 * if used as full-saturation backgrounds. The color-mix tint pattern
 * (mirroring the Manuscript view's read-only chip) keeps the brand
 * color readable as text on its own tinted background, preserves
 * Style Settings overrides (foreground variable change shifts both
 * text and bg), and signals "selected" clearly.
 */
.dbench-manuscript-builder__status-chip {
	display: inline-flex;
	align-items: center;
	padding: 3px var(--dbench-spacing-md);
	border: 1px solid var(--background-modifier-border);
	border-radius: 999px;
	color: var(--text-muted);
	background: transparent;
	font-size: var(--font-smallest);
	line-height: 1.4;
	cursor: pointer;
	user-select: none;
	transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.dbench-manuscript-builder__status-chip-label {
	text-transform: lowercase;
	letter-spacing: 0.02em;
}

/* Visually hide the checkbox while keeping it focusable for screen
   readers and keyboard navigation. Sits as a sibling of its paired
   `.dbench-manuscript-builder__status-chip` so sibling combinators
   below can transfer state. Standard sr-only pattern.

   Selector specificity matters here: Obsidian's app.css ships a bare
   `input[type="radio"], input[type="checkbox"]` rule (specificity
   0-1-1) that sets `width` / `height` / `appearance` / etc. on every
   checkbox in the renderer. A plain `.dbench-manuscript-builder__
   status-chip-input` class selector is only 0-1-0, so Obsidian's rule
   wins on specificity and the checkbox reappears at native size.
   Wrapping with the parent class (`.status-chips input[type="checkbox"]`,
   0-2-1) clears Obsidian's rule outright. */
.dbench-manuscript-builder__status-chips input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Hover: subtle text-color lift for unselected chips. */
.dbench-manuscript-builder__status-chip-input:not(:checked)
	+ .dbench-manuscript-builder__status-chip:hover {
	color: var(--text-normal);
}

/* Keyboard focus: input takes focus; sibling combinator transfers the
   visual indicator to the chip. `:focus-visible` (not `:focus-within`
   or plain `:focus`) preserves the keyboard-only outline. */
.dbench-manuscript-builder__status-chip-input:focus-visible
	+ .dbench-manuscript-builder__status-chip {
	outline: 2px solid var(--interactive-accent);
	outline-offset: 2px;
}

/*
 * Selected state. Per-status color is set via the data-status overrides
 * below; this base rule applies the color-mix derivation pattern so any
 * status that ends up with a `color` value (set or default) gets a
 * matching tinted background.
 */
.dbench-manuscript-builder__status-chip-input:checked
	+ .dbench-manuscript-builder__status-chip {
	color: var(--dbench-status-default);
	border-color: currentcolor;
	background: color-mix(in srgb, currentcolor 22%, transparent);
}

.dbench-manuscript-builder__status-chip-input:checked
	+ .dbench-manuscript-builder__status-chip[data-status="brainstorm"],
.dbench-manuscript-builder__status-chip-input:checked
	+ .dbench-manuscript-builder__status-chip[data-status="idea"] {
	color: var(--dbench-status-brainstorm);
}

.dbench-manuscript-builder__status-chip-input:checked
	+ .dbench-manuscript-builder__status-chip[data-status="draft"] {
	color: var(--dbench-status-draft);
}

.dbench-manuscript-builder__status-chip-input:checked
	+ .dbench-manuscript-builder__status-chip[data-status="revision"] {
	color: var(--dbench-status-revision);
}

.dbench-manuscript-builder__status-chip-input:checked
	+ .dbench-manuscript-builder__status-chip[data-status="final"] {
	color: var(--dbench-status-final);
}

/* Monospace styling for textarea inputs (e.g., excludes wikilinks). */
.dbench-manuscript-builder__monospace {
	font-family: var(--font-monospace);
}


/* End of manuscript-builder.css */

/* --------------------------------------------------------------------------
   PREVIEW-TOOLBAR.CSS  (94 lines, 2.54 KB)
   -------------------------------------------------------------------------- */

/*
 * Preview typography toolbar — shared between the Manuscript Builder
 * Preview tab and the Manuscript view's Continuous mode (per
 * docs/planning/manuscript-view-continuous-mode.md § 6). Four controls:
 * text alignment (Left / Justify), reading width (Full / Med / Narrow),
 * font size (- N px +), font family dropdown. Each writes to
 * plugin.settings.previewTypography and applies via inline
 * `--dbench-preview-*` overrides on a host scope element.
 *
 * Class hooks use a neutral `dbench-preview-toolbar` block prefix so
 * the same toolbar can mount in either surface without semantic drift.
 */
.dbench-preview-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dbench-spacing-md);
	padding-top: var(--dbench-spacing-sm);
	border-top: 1px solid var(--background-modifier-border-hover);
}

.dbench-preview-toolbar__group {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--dbench-radius-md);
	overflow: hidden;
}

.dbench-preview-toolbar__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 28px;
	padding: 0 var(--dbench-spacing-sm);
	margin: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--text-muted);
	font-size: var(--font-ui-small);
	cursor: pointer;
	box-shadow: none;
	transition: color 0.12s, background 0.12s;
}

.dbench-preview-toolbar__button + .dbench-preview-toolbar__button {
	border-left: 1px solid var(--background-modifier-border);
}

.dbench-preview-toolbar__button:hover:not(:disabled) {
	color: var(--text-normal);
	background: var(--background-modifier-hover);
}

.dbench-preview-toolbar__button:focus-visible {
	outline: 2px solid var(--interactive-accent);
	outline-offset: -2px;
}

.dbench-preview-toolbar__button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.dbench-preview-toolbar__button--active {
	color: var(--text-on-accent);
	background: var(--interactive-accent);
}

.dbench-preview-toolbar__button--active:hover:not(:disabled) {
	color: var(--text-on-accent);
	background: var(--interactive-accent-hover);
}

.dbench-preview-toolbar__value {
	display: inline-flex;
	align-items: center;
	min-width: 3.5em;
	padding: 0 var(--dbench-spacing-sm);
	color: var(--text-muted);
	font-size: var(--font-ui-small);
	font-variant-numeric: tabular-nums;
	border-left: 1px solid var(--background-modifier-border);
	border-right: 1px solid var(--background-modifier-border);
	justify-content: center;
}

.dbench-preview-toolbar__select {
	height: 28px;
	min-width: 11em;
}


/* End of preview-toolbar.css */

/* --------------------------------------------------------------------------
   WELCOME-MODAL.CSS  (94 lines, 2.21 KB)
   -------------------------------------------------------------------------- */

/*
 * Onboarding welcome modal. Single-screen layout: brand mark + title +
 * tagline at top, pitch paragraph, three vertically-stacked CTAs, text
 * link to the wiki Getting Started page in the footer.
 *
 * Inherit-first per ui-reference § 0: native modal chrome carries the
 * modal frame, close button, and backdrop. Custom CSS is limited to
 * layout (centered column, button stack), brand-mark sizing, and
 * spacing. No custom colors, fonts, or borders — those follow the
 * theme.
 */

.dbench-welcome-modal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dbench-spacing-xl);
	padding: var(--dbench-spacing-lg) var(--dbench-spacing-md);
	max-width: 440px;
	margin: 0 auto;
}

.dbench-welcome-modal__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dbench-spacing-sm);
	text-align: center;
}

/*
 * Brand-mark sizing. Larger here than the manuscript-leaf empty state
 * (72px) since the welcome modal is a focal first-run experience.
 * Accent-tinted via `currentcolor` stroke on the SVG plus
 * `color: var(--text-accent)` here.
 */
.dbench-welcome-modal__brand-mark {
	width: 96px;
	height: 96px;
	color: var(--text-accent);
	opacity: 0.85;
}

.dbench-welcome-modal__title {
	margin: 0;
	font-size: var(--h2-size);
	color: var(--text-normal);
}

.dbench-welcome-modal__tagline {
	margin: 0;
	color: var(--text-muted);
	font-style: italic;
}

.dbench-welcome-modal__pitch {
	display: flex;
	flex-direction: column;
	gap: var(--dbench-spacing-md);
	color: var(--text-normal);
	line-height: 1.55;
	text-align: center;
}

.dbench-welcome-modal__pitch p {
	margin: 0;
}

.dbench-welcome-modal__actions {
	display: flex;
	flex-direction: column;
	gap: var(--dbench-spacing-sm);
	width: 100%;
}

/*
 * Vertical-stacked buttons take full available width so the three CTAs
 * read as a clear primary list. The first carries `.mod-cta` for native
 * primary-action styling; the other two are plain native buttons. No
 * custom button colors — theme owns those.
 */
.dbench-welcome-modal__action {
	width: 100%;
	padding: var(--dbench-spacing-sm) var(--dbench-spacing-md);
}

.dbench-welcome-modal__footer {
	text-align: center;
}

.dbench-welcome-modal__docs-link {
	color: var(--text-accent);
}


/* End of welcome-modal.css */

/* --------------------------------------------------------------------------
   IMPORT-WIZARD.CSS  (513 lines, 11.88 KB)
   -------------------------------------------------------------------------- */

/*
 * Scrivener import wizard (multi-step modal).
 *
 * BEM root: `dbench-import-wizard`. Per the wizards-reference doc:
 * header + step indicator + body + footer as the four persistent
 * regions; only the body changes between steps. DB's first wizard;
 * styled standalone (no shared wizard chrome yet).
 */

/* stylelint-disable-next-line selector-class-pattern -- targets Obsidian's modal-content class */
.dbench-import-wizard .modal-content {
	padding: 0;
	max-height: 85vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.dbench-import-wizard__content {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: var(--dbench-spacing-lg);
	padding: var(--dbench-spacing-lg);
	min-width: min(480px, 92vw);
	max-width: min(720px, 92vw);
}

/* Tighten the Obsidian Setting component when used inside the wizard.
 *  Default vertical padding is generous (good for sparse settings tabs);
 *  inside a multi-step wizard with several Settings it adds up. */
/* stylelint-disable-next-line selector-class-pattern -- targets Obsidian's setting-item class */
.dbench-import-wizard .setting-item {
	padding-top: var(--dbench-spacing-sm);
	padding-bottom: var(--dbench-spacing-sm);
	border-top: none;
}

/* ---- Header ---- */

.dbench-import-wizard__header {
	display: flex;
	align-items: baseline;
	gap: var(--dbench-spacing-sm);
}

.dbench-import-wizard__title {
	margin: 0;
	font-size: var(--font-ui-large);
	font-weight: var(--font-semibold);
	color: var(--text-normal);
}

/* ---- Step indicator ---- */

.dbench-import-wizard__step-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: var(--dbench-spacing-md) 0;
	border-top: 1px solid var(--background-modifier-border);
	border-bottom: 1px solid var(--background-modifier-border);
}

.dbench-import-wizard__step {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--background-modifier-border);
	color: var(--text-muted);
	font-size: var(--font-smallest);
	font-weight: var(--font-semibold);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
	transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.dbench-import-wizard__step--active {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
	transform: scale(1.1);
}

.dbench-import-wizard__step--completed {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
}

.dbench-import-wizard__step-connector {
	flex: 0 0 48px;
	height: 2px;
	background: var(--background-modifier-border);
	margin: 0 4px;
	transition: background-color 120ms ease;
}

.dbench-import-wizard__step-connector--completed {
	background: var(--interactive-accent);
}

/* ---- Body (step content area) ---- */

.dbench-import-wizard__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--dbench-spacing-md);
	overflow-y: auto;

	/* `min-height: 0` is required for flex children to shrink below
	 *  their intrinsic content size; without it `overflow-y: auto`
	 *  doesn't kick in because the flex item just grows. */
	min-height: 0;

	/* Bottom fade hints that content continues past the fold even
	 *  when the scrollbar is too subtle to notice. The shadow is
	 *  inset on the body's bottom edge; visible whether or not
	 *  there's more to scroll, but it doesn't lie — it just signals
	 *  "this is a scroll container". */
	box-shadow: inset 0 -12px 12px -12px var(--background-modifier-border);
}

.dbench-import-wizard__placeholder {
	color: var(--text-faint);
	font-style: italic;
	padding: var(--dbench-spacing-md) 0;
}

/* ---- Source step ---- */

.dbench-import-wizard__help-text {
	color: var(--text-muted);
	font-size: var(--font-ui-small);
	line-height: 1.5;
	margin: 0;
}

.dbench-import-wizard__empty-state {
	color: var(--text-muted);
	font-size: var(--font-ui-small);
	font-style: italic;
	padding: var(--dbench-spacing-md);
	border: 1px dashed var(--background-modifier-border);
	border-radius: var(--dbench-radius-md);
	margin: 0;
}

.dbench-import-wizard__selection {
	display: flex;
	align-items: center;
	gap: var(--dbench-spacing-sm);
	padding: var(--dbench-spacing-sm) var(--dbench-spacing-md);
	background: var(--background-secondary);
	border-radius: var(--dbench-radius-md);
	min-height: 40px;
}

.dbench-import-wizard__selection-icon {
	color: var(--interactive-accent);
	font-weight: var(--font-semibold);
	flex-shrink: 0;
}

.dbench-import-wizard__selection-path {
	color: var(--text-normal);
	font-family: var(--font-monospace);
	font-size: var(--font-ui-small);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dbench-import-wizard__selection-empty {
	color: var(--text-faint);
	font-style: italic;
}

.dbench-import-wizard__hint {
	color: var(--text-faint);
	font-size: var(--font-ui-small);
	margin: 0;
}

.dbench-import-wizard__dropzone {
	display: grid;
	place-items: center;
	min-height: 200px;
	padding: var(--dbench-spacing-xl);
	border: 2px dashed var(--background-modifier-border);
	border-radius: var(--dbench-radius-md);
	background: var(--background-primary);
	transition: border-color 120ms ease, background-color 120ms ease;
}

.dbench-import-wizard__dropzone--clickable {
	cursor: pointer;
}

.dbench-import-wizard__dropzone--clickable:hover {
	border-color: var(--interactive-accent);
	background: var(--background-modifier-hover);
}

.dbench-import-wizard__dropzone--active {
	border-color: var(--interactive-accent);
	background: var(--background-modifier-hover);
}

.dbench-import-wizard__dropzone-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dbench-spacing-sm);
	pointer-events: none;
	text-align: center;
}

.dbench-import-wizard__dropzone-icon {
	color: var(--text-muted);
}

/* stylelint-disable-next-line selector-class-pattern -- targets Obsidian's svg-icon class */
.dbench-import-wizard__dropzone-icon .svg-icon {
	width: 32px;
	height: 32px;
}

.dbench-import-wizard__dropzone-text {
	color: var(--text-normal);
	font-size: var(--font-ui-medium);
	font-weight: var(--font-semibold);
}

.dbench-import-wizard__dropzone-subtext {
	color: var(--text-muted);
	font-size: var(--font-ui-small);
}

.dbench-import-wizard__source-picker-input {
	display: none;
}

.dbench-import-wizard__source-section-title {
	margin: var(--dbench-spacing-sm) 0 0;
	font-size: var(--font-ui-small);
	font-weight: var(--font-semibold);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---- Parse step ---- */

.dbench-import-wizard__progress {
	color: var(--text-muted);
	font-style: italic;
	padding: var(--dbench-spacing-md) 0;
	margin: 0;
}

.dbench-import-wizard__error {
	color: var(--text-error);
	font-size: var(--font-ui-small);
	margin: 0;
}

.dbench-import-wizard__summary {
	display: flex;
	flex-direction: column;
	gap: var(--dbench-spacing-sm);
}

.dbench-import-wizard__summary-title {
	margin: 0;
	font-size: var(--font-ui-medium);
	font-weight: var(--font-semibold);
	color: var(--text-normal);
}

.dbench-import-wizard__summary-list {
	margin: 0;
	padding-left: var(--dbench-spacing-lg);
	color: var(--text-normal);
}

.dbench-import-wizard__summary-row {
	font-size: var(--font-ui-small);
	line-height: 1.5;
}

.dbench-import-wizard__validation {
	font-size: var(--font-ui-small);
	margin: 0;
}

.dbench-import-wizard__validation--ok {
	color: var(--text-muted);
}

.dbench-import-wizard__validation--error {
	color: var(--text-error);
}

/* ---- Hierarchy step ---- */

.dbench-import-wizard__hier-summary {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dbench-spacing-xs);
}

.dbench-import-wizard__hier-badge {
	font-size: var(--font-smallest);
	color: var(--text-muted);
	background: var(--background-modifier-border);
	border-radius: var(--dbench-radius-sm);
	padding: 2px var(--dbench-spacing-xs);
	font-variant-numeric: tabular-nums;
}

.dbench-import-wizard__hier-tree {
	max-height: 360px;
	overflow-y: auto;
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--dbench-radius-md);
	padding: var(--dbench-spacing-sm);
	background: var(--background-secondary);
}

.dbench-import-wizard__hier-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: var(--dbench-spacing-sm);
	align-items: center;
	padding: var(--dbench-spacing-xs) 0;
	font-size: var(--font-ui-small);
}

.dbench-import-wizard__hier-title {
	color: var(--text-normal);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dbench-import-wizard__hier-itemtype {
	color: var(--text-faint);
	font-family: var(--font-monospace);
	font-size: var(--font-smallest);
}

.dbench-import-wizard__hier-target {
	font-size: var(--font-ui-small);
}

/* ---- Metadata step ---- */

.dbench-import-wizard__meta-section-title {
	margin: 0;
	font-size: var(--font-ui-small);
	font-weight: var(--font-semibold);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.dbench-import-wizard__meta-table {
	display: flex;
	flex-direction: column;
	gap: var(--dbench-spacing-xs);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--dbench-radius-md);
	padding: var(--dbench-spacing-sm);
	background: var(--background-secondary);
}

.dbench-import-wizard__meta-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: var(--dbench-spacing-sm);
	align-items: center;
	font-size: var(--font-ui-small);
}

.dbench-import-wizard__meta-row-name {
	color: var(--text-normal);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dbench-import-wizard__meta-row-count {
	color: var(--text-faint);
	font-family: var(--font-monospace);
	font-size: var(--font-smallest);
	font-variant-numeric: tabular-nums;
}

.dbench-import-wizard__meta-row-target-cell {
	display: flex;
	flex-direction: column;
	gap: var(--dbench-spacing-xs);
	align-items: stretch;
	min-width: 14rem;
}

.dbench-import-wizard__meta-target {
	font-size: var(--font-ui-small);
	width: 100%;
}

.dbench-import-wizard__meta-new-name {
	width: 100%;
	font-size: var(--font-ui-small);
}

/* ---- Preview step ---- */

.dbench-import-wizard__preview-section-title {
	margin: var(--dbench-spacing-md) 0 var(--dbench-spacing-xs);
	font-size: var(--font-ui-medium);
	font-weight: var(--font-semibold);
	color: var(--text-normal);
}

.dbench-import-wizard__preview-section-title:first-child {
	margin-top: 0;
}

.dbench-import-wizard__warning-row {
	font-size: var(--font-ui-small);
	color: var(--text-accent);
	line-height: 1.5;
}

.dbench-import-wizard__error-title {
	font-weight: var(--font-semibold);
}

.dbench-import-wizard__preview-tree {
	max-height: 360px;
	overflow-y: auto;
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--dbench-radius-md);
	padding: var(--dbench-spacing-sm);
	background: var(--background-secondary);
	font-family: var(--font-monospace);
	font-size: var(--font-smallest);
}

.dbench-import-wizard__preview-row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--dbench-spacing-sm);
	align-items: baseline;
	padding: 1px 0;
	color: var(--text-muted);
}

.dbench-import-wizard__preview-icon {
	color: var(--text-faint);
	font-variant-numeric: tabular-nums;
	min-width: 2.5rem;
}

.dbench-import-wizard__preview-row--folder .dbench-import-wizard__preview-icon,
.dbench-import-wizard__preview-row--project-note .dbench-import-wizard__preview-icon {
	color: var(--text-normal);
}

.dbench-import-wizard__preview-path {
	color: var(--text-normal);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- Footer ---- */

.dbench-import-wizard__footer {
	display: flex;
	align-items: center;
	gap: var(--dbench-spacing-sm);
	padding-top: var(--dbench-spacing-sm);
	border-top: 1px solid var(--background-modifier-border);
}

.dbench-import-wizard__footer-left {
	display: flex;
	gap: var(--dbench-spacing-xs);
}

.dbench-import-wizard__footer-right {
	display: flex;
	gap: var(--dbench-spacing-xs);
	margin-left: auto;
}

.dbench-import-wizard__btn {
	padding: 6px 14px;
	font-size: var(--font-ui-medium);
	cursor: pointer;
}

.dbench-import-wizard__btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}


/* End of import-wizard.css */

/* --------------------------------------------------------------------------
   REORDER-MODAL.CSS  (103 lines, 2.31 KB)
   -------------------------------------------------------------------------- */

/*
 * Scene reordering modal (keyboard-first).
 *
 * Per spec § Scene reordering: a scrollable list of scenes in current
 * dbench-order with per-row move affordances. The list has role=listbox
 * and each row role=option; roving tabindex is handled in TS, this file
 * only styles the visual layout and focus cues.
 */

.dbench-reorder-modal__hint {
	color: var(--text-muted);
	font-size: var(--font-smaller);
	margin: var(--dbench-spacing-sm) 0 var(--dbench-spacing-md);
}

.dbench-reorder-modal__list {
	list-style: none;
	margin: 0 0 var(--dbench-spacing-md);
	padding: 0;
	max-height: 50vh;
	overflow-y: auto;
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--dbench-radius-md);
}

.dbench-reorder-modal__row {
	display: flex;
	gap: var(--dbench-spacing-sm);
	align-items: center;
	padding: var(--dbench-spacing-sm) var(--dbench-spacing-md);
	border-top: 2px solid transparent;
	border-bottom: 1px solid var(--background-modifier-border);
	cursor: default;
	outline: none;
}

.dbench-reorder-modal__row:last-child {
	border-bottom: none;
}

.dbench-reorder-modal__row:focus {
	background-color: var(--background-modifier-hover);
	box-shadow: inset 2px 0 0 var(--interactive-accent);
}

.dbench-reorder-modal__row[aria-selected="true"] {
	background-color: var(--background-modifier-hover);
}

.dbench-reorder-modal__row--dragging {
	opacity: 0.5;
}

.dbench-reorder-modal__row--drop-before {
	border-top-color: var(--interactive-accent);
}

.dbench-reorder-modal__row--drop-after {
	border-bottom-color: var(--interactive-accent);
	border-bottom-width: 2px;
}

.dbench-reorder-modal__handle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	cursor: grab;
	padding: var(--dbench-spacing-xs);
}

.dbench-reorder-modal__handle:active {
	cursor: grabbing;
}

.dbench-reorder-modal__position {
	flex: 0 0 auto;
	min-width: 2.5em;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

.dbench-reorder-modal__title {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dbench-reorder-modal__status {
	flex: 0 0 auto;
	color: var(--text-muted);
	font-size: var(--font-smaller);
	text-transform: capitalize;
}

.dbench-reorder-modal__empty {
	padding: var(--dbench-spacing-lg);
	color: var(--text-muted);
	text-align: center;
}


/* End of reorder-modal.css */

/* --------------------------------------------------------------------------
   MANUSCRIPT-VIEW.CSS  (1071 lines, 29.82 KB)
   -------------------------------------------------------------------------- */

/*
 * Manuscript workspace-leaf view.
 *
 * Per D-07, the leaf hosts the Project summary, Manuscript list, and
 * toolbar in the right sidebar. Section layout uses the section-base
 * primitive (see src/ui/manuscript-view/sections/section-base.ts);
 * this file owns the view-level container, empty state, and section
 * chrome. Section bodies each own their internal layout via their
 * own rules (project-summary, manuscript-list) under the shared
 * section prefix.
 *
 * Conventions: all classes use the `.dbench-manuscript-view__`
 * short-form BEM prefix. Theme variables only (no locally-defined
 * custom properties) so the leaf adapts to every Obsidian theme.
 */

.dbench-manuscript-view {
	padding: var(--dbench-spacing-md);
	height: 100%;
	overflow-y: auto;
}

/*
 * Empty state — shown when no project is selected. Two variants by
 * vault state: a welcome with CTA when no projects exist, and a
 * compact picker prompt when projects exist but none is active.
 */

.dbench-manuscript-view__empty {
	display: flex;
	flex-direction: column;
	gap: var(--dbench-spacing-md);
	align-items: center;
	text-align: center;
	padding: var(--dbench-spacing-xl) var(--dbench-spacing-md);
}

/* Brand mark — accent-tinted (Direction B empty-state option 2).
   `currentcolor` stroke inherits from the rule's color; setting
   color to var(--text-accent) tints the whole mark without
   hard-coding a palette. Opacity softens it so the heading below
   retains primary focus. */
.dbench-manuscript-view__empty-mark {
	width: 72px;
	height: 72px;
	color: var(--text-accent);
	opacity: 0.7;
}

.dbench-manuscript-view__empty-heading {
	margin: 0;
	font-size: var(--h3-size);
	color: var(--text-normal);
}

.dbench-manuscript-view__empty-body {
	margin: 0;
	max-width: 260px;
	color: var(--text-muted);
	line-height: 1.5;
}

.dbench-manuscript-view__empty-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dbench-spacing-sm);
	justify-content: center;
}

.dbench-manuscript-view__empty-cta {
	align-self: center;
}

.dbench-manuscript-view__empty-footnote {
	margin: 0;
	padding-top: var(--dbench-spacing-md);
	color: var(--text-faint);
	font-size: var(--font-smaller);
	border-top: 1px solid var(--background-modifier-border);
}

.dbench-manuscript-view__empty-picker {
	width: 100%;
}

/*
 * Content wrapper — shown when a project is selected. Holds the
 * stack of sections plus any top-level view chrome (title, toolbar).
 */

.dbench-manuscript-view__content {
	display: flex;
	flex-direction: column;
	gap: var(--dbench-spacing-md);
}

.dbench-manuscript-view__project-title {
	margin: 0;
	font-size: var(--h3-size);
	color: var(--text-normal);
}

.dbench-manuscript-view__placeholder {
	margin: 0;
	color: var(--text-faint);
	font-size: var(--font-smaller);
	font-style: italic;
}

/*
 * Section primitive — collapsible accordion with chevron + header +
 * body. Matches the ARIA accordion pattern; roving tabindex is
 * handled in TypeScript.
 */

.dbench-manuscript-view__section {
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--dbench-radius-md);
	background-color: var(--background-primary);
}

.dbench-manuscript-view__section-header {
	display: flex;
	align-items: center;
	gap: var(--dbench-spacing-sm);
	padding: var(--dbench-spacing-sm) var(--dbench-spacing-md);
	cursor: pointer;
	user-select: none;
	outline: none;
	min-height: 44px;
}

.dbench-manuscript-view__section-header:focus {
	box-shadow: inset 2px 0 0 var(--interactive-accent);
}

.dbench-manuscript-view__section-chevron,
.dbench-manuscript-view__section-icon {
	display: inline-flex;
	align-items: center;
	color: var(--text-muted);
	flex: 0 0 auto;
}

/* Small-caps treatment, D3 restyle (#30): muted text-color and
   smallest font-size to match the Manuscript Builder's section
   dividers in the Build tab. */
.dbench-manuscript-view__section-title {
	flex: 1 1 auto;
	font-size: var(--font-smallest);
	font-weight: var(--font-semibold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
}

.dbench-manuscript-view__section-summary {
	flex: 0 0 auto;
	color: var(--text-muted);
	font-size: var(--font-smaller);
	font-variant-numeric: tabular-nums;
}

.dbench-manuscript-view__section-body {
	padding: var(--dbench-spacing-md);
	border-top: 1px solid var(--background-modifier-border);
}

.dbench-manuscript-view__section-body--collapsed {
	display: none;
}

/*
 * Project picker header + toolbar. Header hosts the project dropdown;
 * toolbar sits just below it with the four primary actions.
 */

.dbench-manuscript-view__header {
	display: flex;
	align-items: center;
	margin-bottom: var(--dbench-spacing-sm);
}

.dbench-manuscript-view__picker {
	flex: 1 1 auto;
	min-width: 0;
}

.dbench-manuscript-view__header-button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: var(--dbench-spacing-xs);
	padding: var(--dbench-spacing-xs);
	min-width: 32px;
	min-height: 32px;
	background: var(--interactive-normal);
	color: var(--text-muted);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--dbench-radius-sm);
	cursor: pointer;
}

.dbench-manuscript-view__header-button:hover {
	background: var(--interactive-hover);
	color: var(--text-normal);
}

/*
 * Tab strip (List / Continuous). Mirrors the Manuscript Builder tab
 * pattern (see styles/manuscript-builder.css) so writers experience
 * one consistent affordance across the two surfaces. Reuses the
 * --dbench-tab-active-accent Style Settings hook from the Builder.
 *
 * Per docs/planning/manuscript-view-continuous-mode.md § 1: plain text
 * labels with a 2px accent-colored underline beneath the active tab;
 * the strip's 1px bottom border is overlapped by 1px (negative margin
 * on the active underline) so the active tab visually punches through
 * the strip's border.
 */
.dbench-manuscript-view__tabs {
	display: flex;
	gap: var(--dbench-spacing-md);
	margin-bottom: var(--dbench-spacing-sm);
	border-bottom: 1px solid var(--background-modifier-border);
}

.dbench-manuscript-view__tab {
	margin: 0;
	padding: 8px 14px;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--text-muted);
	font-size: var(--font-ui-medium);
	cursor: pointer;
	transition: color 0.12s, border-color 0.12s;
}

.dbench-manuscript-view__tab:hover:not(.dbench-manuscript-view__tab--active) {
	color: var(--text-normal);
}

.dbench-manuscript-view__tab:focus-visible {
	outline: 2px solid var(--interactive-accent);
	outline-offset: -2px;
}

.dbench-manuscript-view__tab--active {
	color: var(--dbench-tab-active-accent);
	border-bottom-color: var(--dbench-tab-active-accent);
}

/*
 * Continuous mode container. Holds the shared preview-typography
 * toolbar and the rendered prose body. The continuous body itself
 * inherits the `--dbench-preview-*` CSS variables applied inline by
 * `applyPreviewTypography()`; the actual prose rendering lands in
 * step 6 of docs/planning/manuscript-view-continuous-mode.md.
 */
.dbench-manuscript-view__continuous {
	display: flex;
	flex-direction: column;
	gap: var(--dbench-spacing-md);
}

.dbench-manuscript-view__continuous-body {
	display: flex;
	flex-direction: column;
	max-width: var(--dbench-preview-max-width);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	font-family: var(--dbench-preview-font-family);
	font-size: var(--dbench-preview-font-size);
	text-align: var(--dbench-preview-text-align);
}

.dbench-manuscript-view__continuous-prose {
	display: flex;
	flex-direction: column;
	gap: var(--dbench-spacing-md);
}

/*
 * Heading affordance: pipeline-emitted title headings (chapter /
 * scene / sub-scene) carry `data-source-path` and a click-handler.
 * The cursor + hover treatment signals that they're navigation,
 * matching the wikilink convention writers already know. Writer-
 * authored H2/H3s inside scene bodies don't carry the attribute
 * and stay inert.
 */
.dbench-manuscript-view__continuous-heading--clickable {
	cursor: pointer;
	transition: color 0.12s;
}

.dbench-manuscript-view__continuous-heading--clickable:hover {
	color: var(--text-accent);
}

/*
 * Rendering-state spinner. Per
 * docs/planning/manuscript-view-continuous-mode.md § 5, the spinner
 * appears only when the compile + render takes longer than 250ms,
 * implemented via a setTimeout cleared on completion. The icon
 * reuses the shared `dbench-spinner` utility from base.css.
 */
.dbench-manuscript-view__continuous-spinner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--dbench-spacing-sm);
	padding: var(--dbench-spacing-xl) var(--dbench-spacing-lg);
	color: var(--text-muted);
}

.dbench-manuscript-view__continuous-spinner-icon {
	display: inline-flex;
	align-items: center;
}

/*
 * Continuous-mode empty / error states. Mirrors the parent `__empty`
 * block's tone (centered, muted) but uses dedicated class hooks so
 * theme authors can tune Continuous-specific empties without
 * affecting the no-projects welcome state.
 */
.dbench-manuscript-view__continuous-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dbench-spacing-xs);
	padding: var(--dbench-spacing-xl) var(--dbench-spacing-lg);
	color: var(--text-muted);
	text-align: center;
}

.dbench-manuscript-view__continuous-empty-message {
	margin: 0;
	color: var(--text-normal);
	font-size: var(--font-ui-medium);
}

.dbench-manuscript-view__continuous-empty-hint {
	margin: 0;
	font-size: var(--font-ui-small);
}

/*
 * Compile CTA — primary project action, promoted out of the 3-button
 * toolbar row so it reads as the "finish line" action. `.mod-cta`
 * supplies Obsidian's native accent treatment; the row here just
 * handles spacing + full-width layout.
 */
.dbench-manuscript-view__compile-cta-row {
	margin-bottom: var(--dbench-spacing-xs);
}

/*
 * Compile CTA layout — full-width inside its row, with a tiny gap
 * between icon and label. Visual fill comes from Obsidian's stock
 * `.mod-cta` (solid accent), unmodified. The earlier Direction B
 * gradient + shadow override was removed in the D3 restyle (#30) to
 * align the leaf with the Manuscript Builder's minimal aesthetic.
 */
.dbench-manuscript-view__compile-cta.mod-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--dbench-spacing-xs);
	width: 100%;
	padding: var(--dbench-spacing-xs) var(--dbench-spacing-sm);
	min-height: 30px;
	cursor: pointer;
}

.dbench-manuscript-view__compile-cta-icon {
	display: inline-flex;
	align-items: center;
}

.dbench-manuscript-view__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dbench-spacing-xs);
	margin-bottom: var(--dbench-spacing-sm);
}

.dbench-manuscript-view__toolbar-button {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dbench-spacing-xs);
	padding: var(--dbench-spacing-xs) var(--dbench-spacing-sm);
	min-height: 32px;
	background-color: var(--interactive-normal);
	color: var(--text-normal);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--dbench-radius-sm);
	cursor: pointer;
	font-size: var(--font-smaller);
}

.dbench-manuscript-view__toolbar-button:hover {
	background-color: var(--interactive-hover);
}

.dbench-manuscript-view__toolbar-icon {
	display: inline-flex;
	align-items: center;
	color: var(--text-muted);
}

.dbench-manuscript-view__toolbar-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * Project summary section — meta rows, word-count hero, status
 * breakdown. Mirrors the modal's former Project tab layout but
 * tightened for the narrower sidebar width.
 */

.dbench-manuscript-view__meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--dbench-spacing-xs) var(--dbench-spacing-sm);
	margin: 0 0 var(--dbench-spacing-xs);
}

.dbench-manuscript-view__meta-label {
	color: var(--text-muted);
	font-size: var(--font-smaller);
}

.dbench-manuscript-view__meta-value {
	margin: 0;
	font-variant-numeric: tabular-nums;
	word-break: break-word;
}

/*
 * Details disclosure for technical metadata (Shape + Identifier).
 * Native `<details>` element so theme inheritance handles the
 * summary row + chevron rotation without custom JS. Inner meta grid
 * carries the `--details` modifier so its top margin collapses into
 * the summary row instead of stacking awkwardly.
 */
.dbench-manuscript-view__details {
	margin: 0 0 var(--dbench-spacing-md);
}

.dbench-manuscript-view__details-summary {
	color: var(--text-faint);
	font-size: var(--font-smaller);
	cursor: pointer;
	padding: var(--dbench-spacing-xs) 0;
}

.dbench-manuscript-view__details-summary:hover {
	color: var(--text-muted);
}

.dbench-manuscript-view__meta--details {
	margin: var(--dbench-spacing-xs) 0 0;
}

.dbench-manuscript-view__word-counts-body {
	margin-bottom: var(--dbench-spacing-sm);
}

.dbench-manuscript-view__word-counts-total {
	display: flex;
	align-items: baseline;
	gap: var(--dbench-spacing-xs);
	margin-bottom: var(--dbench-spacing-sm);
}

/*
 * Modest treatment for the "N words" display on targetless projects.
 * Previously used `--h3-size` which rendered an oversized "0" on
 * fresh projects ("0 WORDS!" felt shouty). Now sized inline with
 * the rest of the section text; semibold alone conveys the primary-
 * info weight.
 */
.dbench-manuscript-view__word-counts-total-value {
	font-size: var(--font-ui-medium);
	font-weight: var(--font-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--text-normal);
}

.dbench-manuscript-view__word-counts-total-label {
	color: var(--text-muted);
	font-size: var(--font-smaller);
}

.dbench-manuscript-view__progress-hero {
	margin-bottom: var(--dbench-spacing-sm);
}

.dbench-manuscript-view__progress-label {
	font-variant-numeric: tabular-nums;
	margin-bottom: var(--dbench-spacing-xs);
	font-size: var(--font-smaller);
}

.dbench-manuscript-view__progress-track {
	background-color: var(--background-modifier-border);
	border-radius: 1px;
	height: 2px;
	overflow: hidden;
}

.dbench-manuscript-view__progress-fill {
	/* Solid accent fill — D3 restyle dropped the Direction B gradient
	   in favor of a hairline track that doesn't compete with the
	   numeric progress label above it. */
	background: var(--interactive-accent);
	height: 100%;
	border-radius: inherit;
	transition: width 120ms ease;
}

.dbench-manuscript-view__progress-hero--overage .dbench-manuscript-view__progress-fill {
	background: var(--color-orange, #e0800c);
}

.dbench-manuscript-view__status-breakdown {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--dbench-spacing-xs) var(--dbench-spacing-sm);
	margin: 0;
}

.dbench-manuscript-view__breakdown-status {
	color: var(--text-muted);
	text-transform: capitalize;
}

.dbench-manuscript-view__status-value {
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-size: var(--font-smaller);
}

/*
 * Manuscript list — ordered scene list with per-row order number,
 * title link, status pill, word / progress badge, and draft count.
 */

.dbench-manuscript-view__scene-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dbench-manuscript-view__scene-row {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	gap: var(--dbench-spacing-xs) var(--dbench-spacing-sm);
	align-items: baseline;
	padding: var(--dbench-spacing-xs) var(--dbench-spacing-xs);
	margin: 0 calc(var(--dbench-spacing-xs) * -1);
	border-bottom: 1px solid var(--background-modifier-border);
	transition: background-color 120ms ease;
}

.dbench-manuscript-view__scene-row:last-child {
	border-bottom: none;
}

.dbench-manuscript-view__scene-row:hover {
	background-color: var(--background-modifier-hover);
}

/* Scene-order number rendered as plain tabular-numeric text. The
   D3 restyle (#30) dropped the Direction B capsule treatment. */
.dbench-manuscript-view__scene-order {
	min-width: 22px;
	color: var(--text-faint);
	font-size: var(--font-smallest);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Layout-only rules; color + hover styling come from `.internal-link`
 * applied alongside this class on the <a> element. */
.dbench-manuscript-view__scene-title {
	grid-column: 2;
	grid-row: 1;
	font-weight: var(--font-semibold);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dbench-manuscript-view__scene-words {
	grid-column: 4;
	grid-row: 1;
	min-width: 56px;
	color: var(--text-muted);
	font-size: var(--font-smaller);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.dbench-manuscript-view__scene-words-label {
	font-size: var(--font-smallest);
}

/*
 * Status label — inline small-caps muted text rendered on each scene
 * row, sub-scene row, and chapter card header. The D3 restyle (#30)
 * dropped the Direction B chip-pill treatment with semantic-status
 * colors in favor of a single muted-text rendering. The
 * `data-status` attribute is preserved on the element for forward-
 * compat queries but no longer drives any color rule.
 *
 * Layout (grid placement on scene rows) lives on context-scoped
 * selectors so the label travels cleanly between scene rows and
 * other surfaces.
 */
.dbench-manuscript-view__status-label {
	font-size: var(--font-smallest);
	font-variant: small-caps;
	letter-spacing: 0.06em;
	color: var(--text-muted);
	white-space: nowrap;
}

.dbench-manuscript-view__scene-row .dbench-manuscript-view__status-label {
	grid-column: 3;
	grid-row: 1;
}

/* Optional second-line content under the scene title. Two independent
   fields can render: `dbench-subtitle` (italic tagline register) and
   `dbench-synopsis` (regular description register, Scrivener corkboard
   text). The row flips to multi-row layout via the corresponding
   modifier classes; both can apply together (subtitle row 2, synopsis
   row 3). Order capsule spans all rows via `grid-row: 1 / -1` so
   `grid-template-rows` count drives the span automatically. */
.dbench-manuscript-view__scene-row--has-subtitle,
.dbench-manuscript-view__scene-row--has-synopsis {
	grid-template-rows: auto auto;
}

.dbench-manuscript-view__scene-row--has-subtitle.dbench-manuscript-view__scene-row--has-synopsis {
	grid-template-rows: auto auto auto;
}

.dbench-manuscript-view__scene-row--has-subtitle .dbench-manuscript-view__scene-order,
.dbench-manuscript-view__scene-row--has-synopsis .dbench-manuscript-view__scene-order {
	grid-row: 1 / -1;
	align-self: baseline;
}

.dbench-manuscript-view__scene-subtitle,
.dbench-manuscript-view__scene-synopsis {
	grid-column: 2 / 5;
	color: var(--text-muted);
	font-size: var(--font-smaller);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Subtitle is the italic tagline register; synopsis is regular weight
   so the two read as distinct registers when both apply. Auto-placed
   into rows 2 / 3 in DOM order: subtitle is appended first by the
   row builder, so it lands in row 2 when present. */
.dbench-manuscript-view__scene-subtitle {
	font-style: italic;
}

/*
 * Chapter cards (chapter-aware projects). Each card is a collapsible
 * section with a header row (chevron + order + title + status +
 * word-count rollup) and a body holding the chapter's scene rows.
 * Per § 5 of chapter-type.md, the chapter rollup is chapter body's
 * `## Draft` plus the sum of child scenes' `## Draft`. Hierarchy:
 *
 *     dbench-manuscript-view__chapter-list
 *       dbench-manuscript-view__chapter-card[--expanded]
 *         dbench-manuscript-view__chapter-header  (clickable toggle)
 *           __chapter-chevron / __chapter-order / __chapter-title /
 *           __status-label / __chapter-words
 *         dbench-manuscript-view__chapter-body[--collapsed]
 *           dbench-manuscript-view__scene-list
 *             dbench-manuscript-view__scene-row * N
 */
.dbench-manuscript-view__chapter-list {
	display: flex;
	flex-direction: column;
	gap: var(--dbench-spacing-sm);
}

.dbench-manuscript-view__chapter-card {
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--dbench-radius-md);
	background: var(--background-secondary);
	overflow: hidden;
}

.dbench-manuscript-view__chapter-header {
	display: grid;
	grid-template-columns: auto auto 1fr auto auto;
	align-items: center;
	gap: var(--dbench-spacing-sm);
	padding: var(--dbench-spacing-sm) var(--dbench-spacing-md);
	cursor: pointer;
	transition: background-color 120ms ease;
}

.dbench-manuscript-view__chapter-header:hover {
	background-color: var(--background-modifier-hover);
}

.dbench-manuscript-view__chapter-header:focus-visible {
	outline: 2px solid var(--interactive-accent);
	outline-offset: -2px;
}

.dbench-manuscript-view__chapter-chevron {
	display: grid;
	place-items: center;
	color: var(--text-muted);
}

.dbench-manuscript-view__chapter-order {
	min-width: 26px;
	color: var(--text-faint);
	font-size: var(--font-smallest);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.dbench-manuscript-view__chapter-title {
	font-weight: var(--font-semibold);
	font-size: var(--font-ui-medium);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dbench-manuscript-view__chapter-words {
	min-width: 56px;
	color: var(--text-muted);
	font-size: var(--font-smaller);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.dbench-manuscript-view__chapter-action {
	flex: 0 0 auto;
	padding: var(--size-2-1, 2px);
	color: var(--text-muted);
}

.dbench-manuscript-view__chapter-action:hover {
	color: var(--text-normal);
}

/* Optional `dbench-synopsis` rendered between the chapter header and
   body. Visible whether the card is collapsed or expanded — synopsis
   is corkboard-style annotation, the writer wants the gist even when
   scene-list details are hidden. Description register: regular
   weight muted text (distinct from `dbench-subtitle`'s italic
   tagline register on scene rows; chapter cards don't currently
   render subtitle so no italic counterpart needed here). */
.dbench-manuscript-view__chapter-synopsis {
	padding: 0 var(--dbench-spacing-md) var(--dbench-spacing-sm);
	color: var(--text-muted);
	font-size: var(--font-smaller);
}

.dbench-manuscript-view__chapter-body {
	padding: 0 var(--dbench-spacing-md) var(--dbench-spacing-sm);
	border-top: 1px solid var(--background-modifier-border);
	max-height: 2000px;
	opacity: 1;
	overflow: hidden;
	transition:
		max-height 220ms ease,
		opacity 160ms ease,
		padding-top 220ms ease,
		padding-bottom 220ms ease,
		border-top-color 220ms ease;
}

.dbench-manuscript-view__chapter-body--collapsed {
	max-height: 0;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-top-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.dbench-manuscript-view__chapter-body {
		transition: none;
	}
}

/* Scene rows nested inside a chapter card sit flush with the card's
 * inner padding and lose their last-child border-bottom-none rule
 * since the card's own border closes the visual frame. */
.dbench-manuscript-view__chapter-body .dbench-manuscript-view__scene-row:first-child {
	border-top: none;
}

/*
 * Scene cards (hierarchical scenes — those with sub-scenes). Visually
 * mirror the chapter-card pattern one level deeper, per
 * [sub-scene-type.md § 6](../../docs/planning/sub-scene-type.md):
 * collapsible card with a header (chevron + order + title + status +
 * scene-rollup word count + "New sub-scene" affordance) and a body
 * holding sub-scene rows. Default styles closely mirror chapter-card;
 * the BEM classes are distinct so themes can tune per level.
 *
 * Scene cards live in two contexts:
 *   - Inside a chapter-card body (chapter-aware projects). Three-level
 *     hierarchy: chapter card > scene card > sub-scene rows.
 *   - At the top of the manuscript list (chapter-less projects with
 *     mixed-shape scenes). Two-level hierarchy: scene card > sub-scene
 *     rows, alongside flat scene rows for sub-scene-less scenes.
 *
 * Hierarchy:
 *
 *     dbench-manuscript-view__scene-card[--expanded]
 *       dbench-manuscript-view__scene-card-header  (clickable toggle)
 *         __scene-card-chevron / __scene-card-order /
 *         __scene-card-title / __status-label /
 *         __scene-card-words / __scene-card-action
 *       dbench-manuscript-view__scene-card-body[--collapsed]
 *         dbench-manuscript-view__sub-scene-list
 *           dbench-manuscript-view__sub-scene-row * N
 */
.dbench-manuscript-view__scene-card {
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--dbench-radius-md);
	background: var(--background-secondary);
	overflow: hidden;
}

.dbench-manuscript-view__scene-card-header {
	display: grid;
	grid-template-columns: auto auto 1fr auto auto auto;
	align-items: center;
	gap: var(--dbench-spacing-sm);
	padding: var(--dbench-spacing-sm) var(--dbench-spacing-md);
	cursor: pointer;
	transition: background-color 120ms ease;
}

.dbench-manuscript-view__scene-card-header:hover {
	background-color: var(--background-modifier-hover);
}

.dbench-manuscript-view__scene-card-header:focus-visible {
	outline: 2px solid var(--interactive-accent);
	outline-offset: -2px;
}

.dbench-manuscript-view__scene-card-chevron {
	display: grid;
	place-items: center;
	color: var(--text-muted);
}

.dbench-manuscript-view__scene-card-order {
	min-width: 26px;
	color: var(--text-faint);
	font-size: var(--font-smallest);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.dbench-manuscript-view__scene-card-title {
	font-weight: var(--font-semibold);
	font-size: var(--font-ui-medium);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dbench-manuscript-view__scene-card-words {
	min-width: 56px;
	color: var(--text-muted);
	font-size: var(--font-smaller);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.dbench-manuscript-view__scene-card-action {
	flex: 0 0 auto;
	padding: var(--size-2-1, 2px);
	color: var(--text-muted);
}

.dbench-manuscript-view__scene-card-action:hover {
	color: var(--text-normal);
}

/* Optional `dbench-synopsis` rendered between the scene-card header
   and body — same rationale as `__chapter-synopsis`. */
.dbench-manuscript-view__scene-card-synopsis {
	padding: 0 var(--dbench-spacing-md) var(--dbench-spacing-sm);
	color: var(--text-muted);
	font-size: var(--font-smaller);
}

.dbench-manuscript-view__scene-card-body {
	padding: 0 var(--dbench-spacing-md) var(--dbench-spacing-sm);
	border-top: 1px solid var(--background-modifier-border);
	max-height: 2000px;
	opacity: 1;
	overflow: hidden;
	transition:
		max-height 220ms ease,
		opacity 160ms ease,
		padding-top 220ms ease,
		padding-bottom 220ms ease,
		border-top-color 220ms ease;
}

.dbench-manuscript-view__scene-card-body--collapsed {
	max-height: 0;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-top-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.dbench-manuscript-view__scene-card-body {
		transition: none;
	}
}

/*
 * Sub-scene rows. Mirror scene-row layout one level deeper; sit inside
 * a scene-card body. Slightly tighter than scene-rows for the deeper
 * indentation level.
 */
.dbench-manuscript-view__sub-scene-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dbench-manuscript-view__sub-scene-row {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: baseline;
	gap: var(--dbench-spacing-xs) var(--dbench-spacing-sm);
	padding: var(--dbench-spacing-xs) 0;
	border-top: 1px solid var(--background-modifier-border);
}

.dbench-manuscript-view__sub-scene-row:first-child {
	border-top: none;
}

.dbench-manuscript-view__sub-scene-row--has-subtitle,
.dbench-manuscript-view__sub-scene-row--has-synopsis {
	grid-template-rows: auto auto;
}

.dbench-manuscript-view__sub-scene-row--has-subtitle.dbench-manuscript-view__sub-scene-row--has-synopsis {
	grid-template-rows: auto auto auto;
}

.dbench-manuscript-view__sub-scene-row--has-subtitle .dbench-manuscript-view__sub-scene-order,
.dbench-manuscript-view__sub-scene-row--has-synopsis .dbench-manuscript-view__sub-scene-order {
	grid-row: 1 / -1;
	align-self: baseline;
}

.dbench-manuscript-view__sub-scene-order {
	min-width: 22px;
	color: var(--text-faint);
	font-size: var(--font-smallest);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.dbench-manuscript-view__sub-scene-title {
	grid-column: 2;
	grid-row: 1;
	font-size: var(--font-ui-small);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dbench-manuscript-view__sub-scene-row .dbench-manuscript-view__status-label {
	grid-column: 3;
	grid-row: 1;
}

.dbench-manuscript-view__sub-scene-words {
	grid-column: 4;
	grid-row: 1;
	min-width: 56px;
	color: var(--text-muted);
	font-size: var(--font-smallest);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.dbench-manuscript-view__sub-scene-subtitle,
.dbench-manuscript-view__sub-scene-synopsis {
	grid-column: 2 / 5;
	color: var(--text-muted);
	font-size: var(--font-smallest);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Subtitle is the italic tagline register; synopsis is regular weight.
   Auto-placed into rows 2 / 3 in DOM order: subtitle is appended first
   by the row builder, so it lands in row 2 when present. */
.dbench-manuscript-view__sub-scene-subtitle {
	font-style: italic;
}

/* Scene cards nested inside a chapter card lose the top-rule between
 * sibling scene rows / cards in the same body since the scene-card's
 * own border closes the visual frame. */
.dbench-manuscript-view__chapter-body .dbench-manuscript-view__scene-card:first-child {
	border-top: 1px solid var(--background-modifier-border);
}

/* Archived rows (status is in settings.hiddenStatuses) are filtered
 * from the list by default; the toolbar's "Show archived" toggle
 * reveals them with muted-opacity treatment. The opacity-only
 * approach lets writers re-discover archived items at a glance
 * (still navigable, still readable) without competing with the
 * active manuscript work for visual weight. Hover restores full
 * opacity so the row's title is easy to click. */
.dbench-manuscript-view__scene-row--archived,
.dbench-manuscript-view__sub-scene-row--archived {
	opacity: 0.55;
}

.dbench-manuscript-view__scene-row--archived:hover,
.dbench-manuscript-view__sub-scene-row--archived:hover {
	opacity: 0.9;
}

.dbench-manuscript-view__chapter-card--archived,
.dbench-manuscript-view__scene-card--archived {
	opacity: 0.55;
}

.dbench-manuscript-view__chapter-card--archived:hover,
.dbench-manuscript-view__scene-card--archived:hover {
	opacity: 0.9;
}


/* End of manuscript-view.css */

/* --------------------------------------------------------------------------
   SETTINGS-TAB.CSS  (228 lines, 5.67 KB)
   -------------------------------------------------------------------------- */

/*
 * Plugin settings tab styling.
 *
 * Sections and primary controls inherit Obsidian's native Setting
 * layout. Two Draft-Bench-specific composites live here:
 *
 *   1. Collapsible top-level sections (`<details>`/`<summary>` per #18)
 *      with a custom chevron and a right-aligned section description.
 *   2. The Statuses vocabulary editor: an ordered list of rows with
 *      drag handles, an inline text input, a default badge on the
 *      first row, and a remove button per row.
 *
 * Plus a section-level info-box pattern for in-section explanatory
 * text, kept short on individual `setDesc()` lines and consolidated
 * here for shared concepts (e.g., the {project}/{chapter}/{scene}
 * token semantics in the Folders section).
 */

/*
 * Collapsible <details> sections.
 *
 * Each top-level section is a real <details> element (no JS toggle
 * logic; the browser handles open/close natively). The native marker
 * is hidden and replaced with a CSS chevron that rotates on open.
 * Section description sits right-aligned on the summary line so the
 * writer can scan section purpose at a glance.
 */

.dbench-settings-section {
	margin: var(--dbench-spacing-lg) 0;
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--dbench-radius-md);
	background-color: var(--background-secondary);
}

.dbench-settings-section > summary {
	display: flex;
	align-items: baseline;
	gap: var(--dbench-spacing-sm);
	padding: var(--dbench-spacing-md) var(--dbench-spacing-lg);
	font-weight: var(--font-semibold);
	cursor: pointer;
	user-select: none;
	border-radius: var(--dbench-radius-md);
}

.dbench-settings-section > summary:hover {
	background-color: var(--background-modifier-hover);
}

/* Hide the native marker so we can draw our own. */
.dbench-settings-section > summary::-webkit-details-marker {
	display: none;
}

.dbench-settings-section > summary::marker {
	content: "";
}

.dbench-settings-section > summary::before {
	content: "›";
	color: var(--text-muted);
	font-family: var(--font-monospace);
	font-size: var(--font-ui-medium);
	transition: transform var(--dbench-transition-fast);
	display: inline-block;
	min-width: 1ch;
}

.dbench-settings-section[open] > summary::before {
	transform: rotate(90deg);
}

.dbench-settings-section__desc {
	color: var(--text-muted);
	margin-left: auto;
	font-weight: var(--font-normal);
	font-size: var(--font-ui-small);
}

.dbench-settings-section__content {
	padding: 0 var(--dbench-spacing-lg) var(--dbench-spacing-md);
}

/*
 * Section-level info box — explanatory or cross-referencing text that
 * applies to multiple settings in a section, kept out of individual
 * `setDesc()` lines to prevent setDesc bloat.
 */

.dbench-info-box {
	padding: var(--dbench-spacing-sm) var(--dbench-spacing-md);
	margin: var(--dbench-spacing-md) 0;
	background-color: var(--background-primary-alt);
	border-left: 3px solid var(--background-modifier-border);
	border-radius: var(--dbench-radius-sm);
	color: var(--text-muted);
	font-size: var(--font-ui-small);
	line-height: var(--line-height-tight);
}

.dbench-info-box code {
	background-color: var(--code-background);
	color: var(--code-normal);
	padding: 0 var(--dbench-spacing-xs);
	border-radius: var(--dbench-radius-xs);
	font-family: var(--font-monospace);
	font-size: 0.9em;
}

.dbench-statuses__list {
	list-style: none;
	margin: 0 0 var(--dbench-spacing-md);
	padding: 0;
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--dbench-radius-md);
}

.dbench-statuses__row {
	display: flex;
	gap: var(--dbench-spacing-sm);
	align-items: center;
	padding: var(--dbench-spacing-sm) var(--dbench-spacing-md);
	border-top: 2px solid transparent;
	border-bottom: 1px solid var(--background-modifier-border);
	outline: none;
}

.dbench-statuses__row:last-child {
	border-bottom: none;
}

.dbench-statuses__row:focus {
	background-color: var(--background-modifier-hover);
	box-shadow: inset 2px 0 0 var(--interactive-accent);
}

.dbench-statuses__row[aria-selected="true"] {
	background-color: var(--background-modifier-hover);
}

.dbench-statuses__row--dragging {
	opacity: 0.5;
}

.dbench-statuses__row--drop-before {
	border-top-color: var(--interactive-accent);
}

.dbench-statuses__row--drop-after {
	border-bottom-color: var(--interactive-accent);
	border-bottom-width: 2px;
}

.dbench-statuses__handle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	cursor: grab;
	padding: var(--dbench-spacing-xs);
}

.dbench-statuses__handle:active {
	cursor: grabbing;
}

.dbench-statuses__input {
	flex: 1 1 auto;
	min-width: 0;
}

.dbench-statuses__badge {
	flex: 0 0 auto;
	padding: 0 var(--dbench-spacing-sm);
	color: var(--text-muted);
	background-color: var(--background-modifier-hover);
	border-radius: var(--dbench-radius-sm);
	font-size: var(--font-smaller);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.dbench-statuses__remove,
.dbench-statuses__hide {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--dbench-spacing-xs);
	color: var(--text-muted);
	background: transparent;
	border: none;
	cursor: pointer;
}

.dbench-statuses__remove:hover:not(:disabled) {
	color: var(--text-error);
}

.dbench-statuses__remove:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.dbench-statuses__hide:hover {
	color: var(--text-normal);
}

.dbench-statuses__hide--on {
	color: var(--text-accent);
}

.dbench-statuses__add {
	display: inline-block;
	margin-bottom: var(--dbench-spacing-md);
}

/*
 * Remove-status modal: confirmation layout lives in the shared modal
 * frame; only the contextual "no alternatives" note needs a muted style.
 */
.dbench-remove-status-modal__note {
	color: var(--text-muted);
	font-size: var(--font-smaller);
}


/* End of settings-tab.css */

/* ==========================================================================
   BUILD SUMMARY
   ==========================================================================

   Components: 11
   Total:      2936 lines, 81.73 KB
   - variables.css: 109 lines, 3.92 KB
   - style-settings.css: 155 lines, 6.07 KB
   - base.css: 40 lines, 0.75 KB
   - notes.css: 73 lines, 2.38 KB
   - manuscript-builder.css: 456 lines, 14.16 KB
   - preview-toolbar.css: 94 lines, 2.54 KB
   - welcome-modal.css: 94 lines, 2.21 KB
   - import-wizard.css: 513 lines, 11.88 KB
   - reorder-modal.css: 103 lines, 2.31 KB
   - manuscript-view.css: 1071 lines, 29.82 KB
   - settings-tab.css: 228 lines, 5.67 KB
*/

/* End of generated stylesheet */