/* enscribe-shell.css — shell-layer chrome for the live app shell (#214).
 *
 * The CSS a live shell needs that is NOT document CSS: the return-to-cover masthead (#206/#209)
 * and the edit-mode Write/Preview chrome (#203). Kept OUT of default.css on purpose (#206:
 * default.css is inlined verbatim into every single-page golden, so this shell/edit chrome would
 * churn them). A live shell <link>s THIS instead of hand-copying it into a <style> block.
 *
 * The masthead rules below are character-identical to publish-pages.js's BOOK_HOME_CSS — the
 * STATIC separate-pages build inlines that const into self-contained pages, the live shell links
 * this file; test/shell-assets.test.js guards that the two copies never drift. The edit-mode
 * rules are inert in read mode (they only bite when an edit view is mounted).
 *
 * Per #213 the core engine stays editor-agnostic and CodeMirror stays host-side; this chrome and
 * the default editor (src/shell/editor-codemirror.js) are the SHELL layer shipped alongside it.
 */

/* Return-to-cover masthead (#206/#209) — the scoped selector wins the cascade so the book title
 * reads as a prominent home link, not a muted rail link. */
.enscribe-layout--book .enscribe-toc a.enscribe-book-home { display: block; font-family: var(--enscribe-font-sans); font-weight: 700; font-size: 1rem; line-height: var(--enscribe-line-height-tight); color: var(--enscribe-text-primary); text-decoration: none; padding: 0 0 var(--enscribe-space-3); margin-bottom: var(--enscribe-space-3); border-left: 0; border-radius: 0; border-bottom: 1px solid var(--enscribe-border); }
.enscribe-layout--book .enscribe-toc a.enscribe-book-home:hover { color: var(--enscribe-link); }

/* Edit-mode Write/Preview chrome (#203). */
.enscribe-edit-main { display: flex; flex-direction: column; min-width: 0; }
.enscribe-edit-tabs { display: flex; align-items: center; gap: var(--enscribe-space-2, 0.5rem); border-bottom: 1px solid var(--enscribe-border, #e1e1e1); margin-bottom: var(--enscribe-space-4, 1rem); }
.enscribe-edit-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--enscribe-space-2, 0.5rem) var(--enscribe-space-3, 0.75rem); margin-bottom: -1px; font: inherit; font-family: var(--enscribe-font-sans); font-weight: 600; font-size: var(--enscribe-text-sm, 0.875rem); color: var(--enscribe-text-secondary, #555); cursor: pointer; }
.enscribe-edit-tab--active { color: var(--enscribe-text-primary, #1a1a1a); border-bottom-color: var(--enscribe-link, #0052cc); }
.enscribe-edit-status { margin-left: auto; font-size: var(--enscribe-text-xs, 0.75rem); font-style: italic; color: var(--enscribe-text-secondary, #555); }
/* #351 — the single-file Save button. `margin-left:auto` right-aligns the Save + status group; when a
   Save button precedes the status, the status sits just after it (a normal gap, not its own auto-push). */
.enscribe-edit-save { appearance: none; margin-left: auto; background: var(--enscribe-link, #0052cc); color: #fff; border: 0; border-radius: var(--enscribe-radius, 4px); padding: var(--enscribe-space-1, 0.25rem) var(--enscribe-space-3, 0.75rem); font: inherit; font-family: var(--enscribe-font-sans); font-weight: 600; font-size: var(--enscribe-text-sm, 0.875rem); cursor: pointer; }
.enscribe-edit-save:hover { filter: brightness(0.94); }
.enscribe-edit-save:disabled { opacity: 0.6; cursor: default; }
.enscribe-edit-save + .enscribe-edit-status { margin-left: var(--enscribe-space-2, 0.5rem); }
/* The SOURCE pane is width-matched to the PREVIEW pane's reading column (the preview carries
   `enscribe-body content`, so its render sits in the reading column). Without this the editor was
   full-width and toggling Write↔Preview jumped the text column; now both panes are the same width so
   the toggle is seamless. CodeMirror lays out within this constraint. */
.enscribe-edit-pane--source { max-width: var(--enscribe-content-width); margin-inline: auto; }
.enscribe-edit-pane--source .cm-editor { border: 1px solid var(--enscribe-border, #e1e1e1); border-radius: var(--enscribe-radius-sm, 2px); min-height: 65vh; font-size: 0.9rem; }
.enscribe-edit-pane--source .cm-scroller { font-family: var(--enscribe-font-mono, 'Source Code Pro', ui-monospace, monospace); }
.enscribe-edit-error { color: #b00020; font-style: italic; }