:root {
    /* Main colors — ScribeOps "datasheet" palette (matches landing/). */
    --primary-color: #5980a6;
    /* steel-blue accent */
    --primary-hover: #597ea3;
    --primary-light: #eef6ff;
    --primary-dark: #416180;
    --accent-color: #416180;
    /* deep steel — strong/emphasis in the source pane */

    /* Text colors */
    --text-color: #1d1f20;
    /* ink */
    --text-light: #5d5d60;
    /* neutral-700 */
    --text-muted: #7a7a7d;
    /* neutral-600 */

    /* Background colors */
    --bg-color: #f2f2f3;
    /* technical ground */
    --bg-light: #f5f5f8;
    /* neutral-100 — panels */
    --bg-dark: #e9e9ea;
    /* surface — hover/UI elements */

    /* UI colors */
    --border-color: color-mix(in srgb, #1d1f20 24%, transparent);
    /* hairline divider */
    --hover-color: #e7e7ea;
    /* neutral-200 */
    --active-color: #e9e9ea;
    /* surface */
    --error-color: #c0453a;
    /* muted rust */
    --success-color: #3f7a5a;
    /* muted green */
    --warning-color: #a8811f;
    /* muted amber */

    /* Shadows — soft ink, not black */
    --shadow-sm: 0 1px 2px rgba(29, 31, 32, 0.06);
    --shadow-md: 0 2px 6px rgba(29, 31, 32, 0.10);
    --shadow-lg: 0 6px 18px rgba(29, 31, 32, 0.14);

    /* Fonts — self-hosted in css/fonts/ (Barlow / Barlow Condensed /
       IBM Plex Mono, OFL). No third-party origin is contacted. */
    --font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-heading: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    --font-size-base: 16px;
    --line-height-text: 1.55;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    /* Toolbar rhythm: buttons inside a group, and groups from each other.
       The 1:4 ratio is what makes the grouping read as deliberate. */
    --toolbar-gap: 4px;
    --toolbar-group-gap: 16px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Layout */
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 50px;
    --toolbar-height: 48px;
    --format-toolbar-height: 40px;
    --statusbar-height: 30px;
    --border-radius: 0;

    /* Transitions */
    --transition-speed: 0.2s;
    --transition-timing: ease-in-out;

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(89, 128, 166, 0.4);
}

/* Dark theme colors (class-based approach). The same datasheet palette
   inverted to ink-on-dark: the steel accent stays, text lifts to the light
   neutrals, and surfaces sit on the ink base. Status colors are desaturated
   rather than neon. */
:root.dark-theme {
    --primary-color: #6b93b8;
    --primary-hover: #7fa4c6;
    --primary-light: #2c455d;
    --primary-dark: #7fa4c6;

    --text-color: #e9e9ea;
    --text-light: #b7b7ba;
    --text-muted: #98989b;

    --bg-color: #1d1f20;
    --bg-light: #26282a;
    --bg-dark: #303234;

    --border-color: #3a3d3f;
    --hover-color: #303234;
    --active-color: #3a3d3f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.6);

    --focus-ring: 0 0 0 3px rgba(107, 147, 184, 0.5);

    --error-color: #d98274;
    --success-color: #7fb892;
    --warning-color: #d9bd68;
}

/* Reset and base styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    height: 100%;
}

body {
    font-family: var(--font-family);
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: var(--line-height-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Prevent scrolling on the body */
}

/* Improved focus styles for accessibility */
:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

:focus:not(:focus-visible) {
    box-shadow: none;
}

:focus-visible {
    box-shadow: var(--focus-ring);
}

/* Placeholders inherit the muted token so search/find fields stay legible in
   both themes (the browser default gray fails AA on the ink background). */
input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* Stronger focus indicators */
.btn:focus-visible,
.format-btn:focus-visible,
.file-item:focus-visible,
.document-title-input:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

/* Improve editor focus states */
.editor-source:focus-visible,
.editor-wysiwyg:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: -3px;
}

/* Dark theme adjustments */
:root.dark-theme .btn:focus-visible,
:root.dark-theme .format-btn:focus-visible,
:root.dark-theme .file-item:focus-visible {
    outline-color: var(--primary-dark);
}

/* Specific element contrast fixes */
:root.dark-theme .autosave-status {
    color: var(--text-light);
    font-weight: 500;
    /* Slightly bolder */
}

:root.dark-theme .document-stats {
    color: var(--text-light);
}

:root.dark-theme .btn,
:root.dark-theme .format-btn {
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
}

:root.dark-theme .btn:hover,
:root.dark-theme .format-btn:hover {
    background-color: var(--active-color);
}

:root.dark-theme .btn.active,
:root.dark-theme .format-btn.active {
    background-color: var(--primary-color);
    color: var(--bg-color);
    border-color: var(--primary-color);
}

/* Improve link contrast in dark mode */
:root.dark-theme .editor-wysiwyg a {
    color: var(--primary-dark);
    /* Lighter steel for better contrast */
    text-decoration: underline;
    /* Add underline for better visibility */
}

/* Improve code block contrast */
:root.dark-theme .editor-wysiwyg code {
    background-color: var(--bg-dark);
    color: var(--text-color);
}

/* Main layout structure */
.app-container {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* Navigation sidebar */
.nav-sidebar {
    flex: 0 0 var(--sidebar-width);
    background-color: var(--bg-light);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: flex-basis var(--transition-speed) var(--transition-timing),
        opacity var(--transition-speed) var(--transition-timing);
    overflow: hidden;
    z-index: 10;
}

.nav-sidebar.collapsed {
    flex: 0 0 var(--sidebar-collapsed-width);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-color);
    height: var(--toolbar-height);
    background-color: var(--bg-light);
}

.app-logo {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-toggle {
    padding: var(--space-xs);
    background: transparent;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    transition: transform var(--transition-speed);
}

.collapsed .sidebar-toggle {
    transform: rotate(180deg);
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
}

.workspace-section,
.files-section {
    margin-bottom: var(--space-lg);
}

.workspace-section h3,
.files-section h3,
.storage-info h3 {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.workspace-selector {
    margin-bottom: var(--space-md);
}

.workspace-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-color);
    cursor: pointer;
    transition: background-color var(--transition-speed);
}

.workspace-btn:hover {
    background-color: var(--hover-color);
}

.workspace-btn.active {
    background-color: var(--primary-light);
    color: var(--primary-color);
    border-color: var(--primary-light);
}

.files-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.file-actions-mini {
    display: flex;
    gap: var(--space-xs);
}

.files-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
    max-height: 50vh;
    overflow-y: auto;
}

.file-item {
    display: flex;
    align-items: center;
    padding: var(--space-sm);
    border-radius: 3px;
    cursor: pointer;
    transition: background-color var(--transition-speed);
    position: relative;
    margin-bottom: 2px;
}

.file-item:hover {
    background-color: var(--hover-color);
}

.file-item.active {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

.file-item.active .file-name {
    font-weight: 500;
}

.file-icon {
    margin-right: var(--space-sm);
    font-size: 1rem;
}

.file-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
}

.file-actions {
    display: none;
    gap: var(--space-xs);
    margin-left: var(--space-sm);
}

.file-item:hover .file-actions {
    display: flex;
}

/* Main content area */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-color);
}

/* Main toolbar */
.main-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-md);
    height: 45px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-color);
}

.document-info {
    display: flex;
    align-items: center;
}

.document-title-input {
    font-size: 1.05rem;
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    background-color: transparent;
    color: var(--text-color);
}

.document-title-input:hover {
    border-color: var(--border-color);
}

.document-title-input:focus {
    border-color: var(--primary-color);
    background-color: var(--bg-color);
}

.document-status {
    margin-left: var(--space-sm);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: var(--bg-light);
    color: var(--text-light);
    display: inline-block;
}

.main-actions,
.view-options {
    display: flex;
    gap: var(--space-sm);
}

/* Format toolbar */
.format-toolbar {
    display: flex;
    align-items: center;
    gap: var(--toolbar-group-gap);
    padding: 4px var(--space-md);
    height: var(--format-toolbar-height);
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-color);
    flex-wrap: wrap;
}

/* Buttons inside a group used to sit flush against each other: this was a
   flex row with no gap and no button margins, so 13 of 19 adjacent pairs
   touched at 0px. Whitespace between flex items collapses, so the spacing
   has to be declared. */
.format-group {
    display: flex;
    align-items: center;
    gap: var(--toolbar-gap);
}

.format-group.right-aligned {
    margin-left: auto;
    margin-right: 0;
}

/* Editor container */
.editor-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-color);
}

/* Side-by-side layout */
.side-by-side-layout {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.editor-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.source-panel {
    border-right: 1px solid var(--border-color);
}

.panel-header {
    padding: 7px var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background-color: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
}

/* Editor views */
.editor-source-container {
    position: relative;
    flex: 1;
    overflow: hidden;
}

/* Virtualized: a spacer sets the scroll height, only the visible window of
   numbers is in the DOM (heights are set inline from the textarea's
   computed line height so the gutter never drifts) */
.line-numbers {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    overflow: hidden;
    background-color: var(--bg-light);
    border-right: 1px solid var(--border-color);
    text-align: right;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-muted);
    user-select: none;
    z-index: 1;
}

.line-numbers-window {
    position: absolute;
    left: 0;
    right: 0;
}

.line-numbers .ln {
    padding: 0 var(--space-sm);
}

.editor-source {
    position: absolute;
    top: 0;
    left: 60px;
    width: calc(100% - 60px);
    height: 100%;
    padding: var(--space-md) var(--space-md) var(--space-md) 10px;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.5;
    border: none;
    resize: none;
    /* The highlight layer behind renders the text; the textarea keeps only
       its caret and selection. No-wrap keeps overlay alignment pixel-exact. */
    background-color: transparent;
    color: transparent;
    caret-color: var(--text-color);
    white-space: pre;
    tab-size: 4;
    z-index: 0;
}

/* Syntax-highlight layer behind the textarea (7.2). Shares every metric with
   .editor-source so each source line occupies exactly one visual line. */
.source-highlight-layer {
    position: absolute;
    top: 0;
    left: 60px;
    width: calc(100% - 60px);
    height: 100%;
    margin: 0;
    padding: var(--space-md) var(--space-md) var(--space-md) 10px;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre;
    overflow: hidden;
    tab-size: 4;
    background-color: var(--bg-color);
    color: var(--text-color);
    pointer-events: none;
    z-index: 0;
}

/* Focus mode (7.3): dim every source line except the caret's line. Non-current
   lines drop to a desaturated gray (grayscale + slightly transparent) so the
   effect is unmistakable, while the caret line keeps full color — readable,
   never invisible. */
.source-highlight-layer .srcline {
    transition: opacity 0.15s ease, filter 0.15s ease;
}

.source-highlight-layer .srcline.dimmed {
    opacity: 0.6;
    filter: grayscale(0.75);
}

/* Source token colors — light theme. The muted UI tokens are deliberately
   light for chrome surfaces, but they fail AA at 14px on the paper ground, so
   the source highlighter uses its own darker, AA-passing palette (7.5a). */
.source-highlight-layer .tok-heading,
.source-highlight-layer .tok-heading-text { color: #1f5c8a; }
.source-highlight-layer .tok-heading-text { font-weight: 600; }
.source-highlight-layer .tok-strong { color: #1d1f20; font-weight: 700; }
.source-highlight-layer .tok-emphasis { color: #2c455d; font-style: italic; }
.source-highlight-layer .tok-code,
.source-highlight-layer .tok-codeblock { color: #1a5c3f; }
.source-highlight-layer .tok-math,
.source-highlight-layer .tok-math-block { color: #7a4a00; }
.source-highlight-layer .tok-quote { color: #4a4a4e; }
.source-highlight-layer .tok-list { color: #1f5c8a; }
.source-highlight-layer .tok-link { color: #1f5c8a; text-decoration: underline; }
.source-highlight-layer .tok-strike { color: #5d5d60; text-decoration: line-through; }
.source-highlight-layer .tok-frontmatter { color: #4a4a4e; }
.source-highlight-layer .tok-hr { color: #5d5d60; }

/* Source token colors — dark theme. Brighter than the muted UI tokens so the
   syntax stays clearly legible on the ink background (7.5a follow-up). */
:root.dark-theme .source-highlight-layer .tok-heading,
:root.dark-theme .source-highlight-layer .tok-heading-text { color: #8fb5d4; }
:root.dark-theme .source-highlight-layer .tok-strong { color: #e9e9ea; font-weight: 700; }
:root.dark-theme .source-highlight-layer .tok-emphasis { color: #8fb5d4; font-style: italic; }
:root.dark-theme .source-highlight-layer .tok-code,
:root.dark-theme .source-highlight-layer .tok-codeblock { color: #93c9a8; }
:root.dark-theme .source-highlight-layer .tok-math,
:root.dark-theme .source-highlight-layer .tok-math-block { color: #e6c979; }
:root.dark-theme .source-highlight-layer .tok-quote { color: #b7b7ba; }
:root.dark-theme .source-highlight-layer .tok-list { color: #8fb5d4; }
:root.dark-theme .source-highlight-layer .tok-link { color: #8fb5d4; }
:root.dark-theme .source-highlight-layer .tok-strike { color: #b7b7ba; text-decoration: line-through; }
:root.dark-theme .source-highlight-layer .tok-frontmatter { color: #b7b7ba; }
:root.dark-theme .source-highlight-layer .tok-hr { color: #b7b7ba; }

.editor-wysiwyg {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    padding: var(--space-xl);
    background-color: var(--bg-color);
    max-width: 900px;
    margin: 0 auto;
}

/* View modes */
.side-by-side-layout.wysiwyg-only .source-panel {
    display: none;
}

.side-by-side-layout.wysiwyg-only .preview-panel {
    width: 100%;
}

.side-by-side-layout.source-only .preview-panel {
    display: none;
}

.side-by-side-layout.source-only .source-panel {
    width: 100%;
}

/* Status bar */
.editor-statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--space-md);
    height: var(--statusbar-height);
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-light);
    font-size: 0.8rem;
    color: var(--text-light);
}

.document-stats {
    display: flex;
    gap: var(--space-lg);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    height: 32px;
    padding: 0 var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background-color: transparent;
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 20ms ease-in;
    white-space: nowrap;
}

.btn:hover {
    background-color: var(--hover-color);
    border-color: var(--text-muted);
}

.btn:active,
.btn.active {
    background-color: var(--active-color);
}

.btn-small {
    height: 28px;
    padding: 0 var(--space-sm);
    font-size: 0.8rem;
}

/* Segmented control: the mode buttons deliberately share borders, so the
   -1px margins that cancel the parent's gap are intentional, not drift. */
.btn-mode {
    border-radius: 0;
    margin: 0 -1px;
}

.btn-mode:first-child {
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    margin-left: 0;
}

.btn-mode:last-child {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    margin-right: 0;
}

.btn-mode.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    z-index: 1;
}

.icon-btn {
    width: 32px;
    padding: 0;
}

.format-btn {
    height: 32px;
    min-width: 30px;
    padding: 0 6px;
    font-size: 14px;
    border-radius: 3px;
}

/* Theme toggle button */
.theme-toggle-btn {
    margin-left: var(--space-sm);
}

/* Saved state — tinted pill instead of a saturated fill, so the header reads
   title-first and the badge does not compete for attention (7.9). */
body:not(.modified) .document-status {
    background-color: rgba(63, 122, 90, 0.14);
    color: var(--success-color);
}

/* Modified/Draft state */
body.modified .document-status {
    background-color: rgba(168, 129, 31, 0.16);
    color: var(--warning-color);
}

/* Dark theme: the amber tint text must stay light to read on dark surfaces */
:root.dark-theme body.modified .document-status {
    color: var(--warning-color);
}

/* Remove the dot indicator since we're using background colors now */
.modified .document-status::before {
    content: none;
}

/* Loading overlay */
.editor-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

:root.dark-theme .editor-loading {
    background-color: rgba(29, 31, 32, 0.85);
}

/* Branded first-load screen (7.13): the wordmark leads, the progress bar and
   status line carry the cue while the wasm streams in. */
.loading-brand {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-color);
    margin: 0 0 var(--space-lg);
}

#loading-label {
    margin: 0 0 var(--space-xs);
    font-size: 0.85rem;
    color: var(--text-light);
}

.spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--primary-color);
    animation: spin 1s linear infinite;
    margin-bottom: var(--space-md);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* First-load progress bar (7.13) */
.load-progress {
    width: 200px;
    height: 4px;
    background-color: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    margin-top: var(--space-sm);
}

.load-progress-fill {
    height: 100%;
    width: 0%;
    background-color: var(--primary-color);
    border-radius: 2px;
    transition: width 0.15s ease;
}

/* Error display */
.editor-error {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-xl);
    z-index: 101;
    text-align: center;
}

.editor-error h3 {
    color: var(--error-color);
    margin-bottom: var(--space-md);
}

/* Dialog */
.dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.dialog[hidden] {
    display: none;
}

.dialog-content {
    background-color: var(--bg-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-lg);
}

.dialog-content h3 {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
}

.shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.shortcut-group h4 {
    margin-bottom: var(--space-sm);
    color: var(--text-light);
}

.shortcut-group dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    align-items: center;
}

.shortcut-group dt {
    text-align: right;
    white-space: nowrap;
}

kbd {
    display: inline-block;
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--text-color);
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

/* Compact dialogs created by DialogManager (confirm/prompt/choice) */
.dialog-content-small {
    max-width: 440px;
}

.dialog-message {
    white-space: pre-line;
    line-height: 1.5;
    margin-bottom: var(--space-sm);
}

.dialog-input {
    width: 100%;
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 0.95rem;
}

.dialog-input:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -1px;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.btn-primary:hover {
    background-color: var(--primary-color);
    filter: brightness(1.1);
}

.dialog-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 50vh;
    overflow-y: auto;
    margin-top: var(--space-sm);
}

.dialog-list-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.dialog-list-item:hover {
    background-color: var(--hover-color);
    border-color: var(--primary-color);
}

.dialog-list-detail {
    color: var(--text-light);
    font-size: 0.8rem;
    white-space: nowrap;
}

.storage-quota {
    color: var(--text-light);
    font-size: 0.8rem;
}

.btn-danger {
    background-color: var(--error-color);
    border-color: var(--error-color);
    color: #fff;
}

.btn-danger:hover {
    background-color: var(--error-color);
    filter: brightness(1.1);
}

/* Markdown rendering styles - Notion-like */
.editor-wysiwyg h1,
.editor-wysiwyg h2,
.editor-wysiwyg h3,
.editor-wysiwyg h4,
.editor-wysiwyg h5,
.editor-wysiwyg h6 {
    font-family: var(--font-heading);
    margin-top: 1.4em;
    margin-bottom: 0.3em;
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 600;
}

.editor-wysiwyg h1 {
    font-size: 1.875em;
    border-bottom: none;
}

.editor-wysiwyg h2 {
    font-size: 1.5em;
    border-bottom: none;
}

.editor-wysiwyg h3 {
    font-size: 1.25em;
}

.editor-wysiwyg h4 {
    font-size: 1.1em;
}

.editor-wysiwyg p {
    margin: 0.5em 0;
}

.editor-wysiwyg ul,
.editor-wysiwyg ol {
    margin-left: 1.5em;
    margin-bottom: 1em;
}

.editor-wysiwyg li+li {
    margin-top: 0.25em;
}

.editor-wysiwyg blockquote {
    border-left: 3px solid var(--border-color);
    margin: 0.5em 0;
    padding-left: 14px;
    color: var(--text-light);
}

.editor-wysiwyg pre {
    background-color: var(--bg-light);
    border-radius: 4px;
    padding: 16px;
    overflow-x: auto;
    margin: 0.5em 0;
    font-family: var(--font-mono);
    font-size: 0.9em;
    line-height: 1.5;
}

.editor-wysiwyg code {
    font-family: var(--font-mono);
    font-size: 85%;
    background-color: var(--bg-light);
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

.editor-wysiwyg pre code {
    background-color: transparent;
    padding: 0;
    font-size: 1em;
}

.editor-wysiwyg a {
    color: var(--primary-color);
    text-decoration: none;
}

.editor-wysiwyg a:hover {
    text-decoration: underline;
}

.editor-wysiwyg img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em 0;
    border-radius: 3px;
}

.editor-wysiwyg hr {
    height: 1px;
    border: none;
    background-color: var(--border-color);
    margin: 2em 0;
}

.editor-wysiwyg table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1em;
    overflow-x: auto;
    display: block;
}

.editor-wysiwyg table th,
.editor-wysiwyg table td {
    border: 1px solid var(--border-color);
    padding: 0.5em 1em;
}

.editor-wysiwyg table th {
    background-color: var(--bg-light);
    font-weight: 600;
}

.editor-wysiwyg table tr:nth-child(even) {
    background-color: var(--bg-light);
}

/* Notion-like blocks styling */
.editor-wysiwyg p,
.editor-wysiwyg h1,
.editor-wysiwyg h2,
.editor-wysiwyg h3,
.editor-wysiwyg h4,
.editor-wysiwyg h5,
.editor-wysiwyg h6,
.editor-wysiwyg ul,
.editor-wysiwyg ol,
.editor-wysiwyg blockquote,
.editor-wysiwyg pre {
    padding: 3px 2px;
    margin: 1px 0;
    line-height: 1.5;
}

.editor-wysiwyg p:hover,
.editor-wysiwyg h1:hover,
.editor-wysiwyg h2:hover,
.editor-wysiwyg h3:hover,
.editor-wysiwyg h4:hover,
.editor-wysiwyg h5:hover,
.editor-wysiwyg h6:hover,
.editor-wysiwyg blockquote:hover,
.editor-wysiwyg ul:hover,
.editor-wysiwyg ol:hover {
    background-color: var(--hover-color);
    border-radius: 3px;
}

/* 7.12 — reading-pane typography. The "Notion-like blocks" rule above flattens
   every block to margin:1px / line-height:1.5; restore a writing-app rhythm:
   a ~72ch measure, a comfortable 1.65 body line-height, paragraph/list
   spacing, and breathing room before headings. Font sizes stay put (export
   pins h1=30px, and the modular scale is already deliberate). */
.editor-wysiwyg {
    max-width: 72ch;
}

.editor-wysiwyg p {
    line-height: 1.65;
    margin: 0 0 1em;
}

.editor-wysiwyg ul,
.editor-wysiwyg ol {
    line-height: 1.65;
    margin: 0 0 1em 1.5em;
}

.editor-wysiwyg li {
    margin-bottom: 0.3em;
}

.editor-wysiwyg blockquote {
    line-height: 1.65;
    margin: 0 0 1em;
}

.editor-wysiwyg h1 { margin-top: 1.6em; margin-bottom: 0.5em; }
.editor-wysiwyg h2 { margin-top: 1.4em; margin-bottom: 0.4em; }
.editor-wysiwyg h3 { margin-top: 1.2em; margin-bottom: 0.35em; }
.editor-wysiwyg h4,
.editor-wysiwyg h5,
.editor-wysiwyg h6 { margin-top: 1em; margin-bottom: 0.3em; }
.editor-wysiwyg h1:first-child,
.editor-wysiwyg h2:first-child { margin-top: 0; }

/* Improved scrollbar styling */
.editor-source::-webkit-scrollbar,
.editor-wysiwyg::-webkit-scrollbar,
.dialog-content::-webkit-scrollbar,
.files-list::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.editor-source::-webkit-scrollbar-track,
.editor-wysiwyg::-webkit-scrollbar-track,
.dialog-content::-webkit-scrollbar-track,
.files-list::-webkit-scrollbar-track {
    background: transparent;
}

.editor-source::-webkit-scrollbar-thumb,
.editor-wysiwyg::-webkit-scrollbar-thumb,
.dialog-content::-webkit-scrollbar-thumb,
.files-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.editor-source::-webkit-scrollbar-thumb:hover,
.editor-wysiwyg::-webkit-scrollbar-thumb:hover,
.dialog-content::-webkit-scrollbar-thumb:hover,
.files-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* Screen reader only class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* The highlight overlay behind the textarea provides the background. The
   textarea must stay transparent even while focused — an opaque background
   here would cover the colored text and blank the editor (7.2 regression). */
.editor-source:focus-within {
    background-color: transparent;
}

.line-active {
    background-color: var(--primary-light);
}

/* No JavaScript message */
.noscript-message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-xl);
    text-align: center;
    z-index: 9999;
}

/* Sync scrolling indicator */
.sync-scroll-active .panel-header::after {
    content: "• Sync";
    color: var(--primary-color);
    margin-left: var(--space-sm);
    font-size: 0.8rem;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: var(--space-lg);
    color: var(--text-light);
}

.empty-state p {
    margin-bottom: var(--space-md);
}

.create-file-btn {
    margin: 0 auto;
}

/* Storage info */
.storage-info {
    padding: var(--space-md) 0;
    border-top: 1px solid var(--border-color);
}

.storage-stats {
    margin: var(--space-md) 0;
    font-size: 0.85rem;
}

.stats-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-xs);
}

.storage-usage {
    display: block;
    margin-top: var(--space-sm);
}

.usage-bar {
    height: 6px;
    background-color: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--space-xs);
}

.usage-fill {
    height: 100%;
    background-color: var(--primary-color);
}

.usage-text {
    font-size: 0.8rem;
    color: var(--text-light);
    text-align: right;
    display: block;
}

.storage-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* Privacy trust signal (7.5) — the local-first guarantee, always visible */
.privacy-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-sm);
    font-size: 0.78rem;
    color: var(--text-light);
}

.privacy-note svg {
    flex: 0 0 auto;
    color: var(--success-color);
}

/* Collapsed sidebar state */
.nav-sidebar.collapsed .sidebar-content {
    display: none;
}

.nav-sidebar.collapsed .app-logo {
    display: none;
}

.nav-sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* Make sure file actions are fully clickable */
.file-actions button {
    z-index: 2;
}

/* Responsive styles */
@media (max-width: 992px) {
    .nav-sidebar {
        position: absolute;
        height: 100%;
        z-index: 100;
        box-shadow: var(--shadow-md);
        transform: translateX(0);
        transition: transform var(--transition-speed) var(--transition-timing);
    }

    .nav-sidebar.collapsed {
        transform: translateX(calc(-1 * var(--sidebar-width) + var(--sidebar-collapsed-width)));
    }

    .format-toolbar {
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
    .main-toolbar {
        flex-wrap: wrap;
        height: auto;
        padding: var(--space-xs);
    }

    .document-info {
        width: 100%;
        margin-bottom: var(--space-sm);
    }

    .format-toolbar {
        height: auto;
        padding: var(--space-xs);
    }

    .format-group {
        margin-right: var(--space-sm);
    }

    .side-by-side-layout {
        flex-direction: column;
    }

    .source-panel,
    .preview-panel {
        height: 50%;
        width: 100%;
    }

    .source-panel {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .document-stats {
        flex-wrap: wrap;
        gap: var(--space-md);
    }
}

@media (max-width: 576px) {

    .main-actions,
    .view-options {
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .btn {
        padding: 0 var(--space-sm);
        font-size: 0.8rem;
    }
}

/* Autosave status */
.autosave-status {
    font-size: 0.8rem;
    color: var(--text-light);
    padding: var(--space-xs);
    transition: opacity 0.2s ease;
}

.autosave-status.error {
    color: var(--error-color);
}

/* Panel resize handle */
.panel-resize-handle {
    position: absolute;
    top: 0;
    right: -5px;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
}

@media (max-width: 768px) {
    .panel-resize-handle {
        top: auto;
        right: 0;
        bottom: -5px;
        width: 100%;
        height: 10px;
        cursor: row-resize;
    }
}

/* Editor inactive overlay */
.editor-inactive-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.editor-inactive-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.editor-source:focus~.editor-inactive-overlay,
.editor-wysiwyg:focus~.editor-inactive-overlay {
    opacity: 0;
    pointer-events: none;
}

/* Improve focus indication for editors */
.editor-source:focus,
.editor-wysiwyg:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

/* Add improved tooltip system */
.tooltip {
    position: absolute;
    background-color: var(--text-color);
    color: white;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1000;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
}

.tooltip.visible {
    opacity: 0.9;
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--text-color) transparent transparent transparent;
}

.tooltip.tooltip-top::after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent var(--text-color) transparent;
}

/* Toast notification system */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    max-width: 300px;
    z-index: 1000;
}

.toast {
    background-color: var(--bg-dark);
    color: var(--text-color);
    padding: 12px 16px;
    border-radius: 4px;
    margin-top: 8px;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    position: relative;
    border-left: 3px solid var(--primary-color);
    font-size: 0.9rem;
    animation: slide-in 0.3s ease;
}

.toast.fade-out {
    animation: fade-out 0.3s ease forwards;
}

.toast.success {
    border-left-color: var(--success-color);
}

.toast.error {
    border-left-color: var(--error-color);
}

.toast.warning {
    border-left-color: var(--warning-color);
}

.toast-icon {
    margin-right: 8px;
}

.toast-close {
    position: absolute;
    right: 8px;
    top: 8px;
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-action {
    margin: 0 20px 0 12px;
    padding: 4px 10px;
    white-space: nowrap;
    flex: 0 0 auto;
    background: none;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 0.85em;
    font-family: inherit;
}

.toast-action:hover {
    background-color: var(--primary-color);
    color: #fff;
}

@keyframes slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Progress bar (for autosave, etc.) */
.progress-bar {
    width: 100%;
    height: 3px;
    background-color: var(--border-color);
    position: relative;
    overflow: hidden;
    border-radius: 3px;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--primary-color);
    position: absolute;
    left: 0;
    top: 0;
    transition: width 0.3s ease;
}

.progress-bar.indeterminate .progress-bar-fill {
    width: 30%;
    animation: indeterminate-progress 1.5s infinite cubic-bezier(0.65, 0.815, 0.735, 0.395);
}

@keyframes indeterminate-progress {
    0% {
        left: -30%;
    }

    100% {
        left: 100%;
    }
}

/* Focus mode styles */
body.focus-mode .nav-sidebar,
body.focus-mode .format-toolbar,
body.focus-mode .editor-statusbar {
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.focus-mode .main-toolbar {
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

body.focus-mode .main-toolbar:hover,
body.focus-mode:hover .nav-sidebar,
body.focus-mode:hover .format-toolbar,
body.focus-mode:hover .editor-statusbar {
    opacity: 1;
}

body.focus-mode .editor-wysiwyg {
    max-width: 750px;
    /* Narrower for better focus */
}

/* Focus mode button styling */
#focus-mode-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Add a subtle indicator when focus mode is active */
body.focus-mode .editor-container::before {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-color);
    z-index: 10;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 0.7;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 0.7;
    }
}

.format-toolbar,
.editor-statusbar,
.main-toolbar {
    transition: opacity var(--transition-speed) var(--transition-timing);
}

/* Modify focus mode CSS to not hide sidebar completely */
body.focus-mode .nav-sidebar {
    opacity: 0.05;
    /* Very subtle but still barely visible */
}

body.focus-mode .nav-sidebar:hover {
    opacity: 1;
}

/* Add a subtle transition when entering/exiting focus mode */
.main-content {
    transition: background-color 0.3s ease;
}

body.focus-mode .main-content {
    background-color: var(--bg-color);
    /* Slightly adjusted background for focus mode */
}

/* Syntax highlighting and code block styling */

/* Enhanced code block container */
.editor-wysiwyg pre {
    position: relative;
    border-radius: 6px;
    margin: 1em 0;
    padding: 1em;
    overflow: auto;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: 0.9em;
    line-height: 1.5;
}

.editor-wysiwyg pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    font-size: 1em;
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
}

/* Code block actions container */
.code-block-actions {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    display: flex;
    align-items: center;
    gap: 0.5em;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Show actions on hover */
pre:hover .code-block-actions {
    opacity: 1;
}

/* Language indicator */
.code-language-indicator {
    font-size: 0.75rem;
    padding: 0.2em 0.5em;
    border-radius: 3px;
    background-color: var(--bg-dark);
    color: var(--text-light);
    text-transform: lowercase;
    font-family: var(--font-mono);
}

/* Copy button */
.code-copy-btn {
    background-color: var(--bg-dark);
    border: none;
    border-radius: 3px;
    color: var(--text-light);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.code-copy-btn:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

.code-copy-btn.copied {
    background-color: var(--success-color);
    color: white;
}

/* Ensure code blocks are visible in dark mode */
:root.dark-theme .editor-wysiwyg pre {
    background-color: var(--bg-dark);
    border-color: var(--border-color);
}

:root.dark-theme .code-language-indicator {
    background-color: var(--active-color);
    color: var(--text-light);
}

:root.dark-theme .code-copy-btn {
    background-color: var(--active-color);
    color: var(--text-light);
}

:root.dark-theme .code-copy-btn:hover {
    background-color: var(--primary-dark);
    color: var(--bg-color);
}

/* Make sure the line numbers don't get highlighted */
.editor-wysiwyg pre .line-numbers-rows {
    border-right: 1px solid var(--border-color);
    opacity: 0.75;
}

/* Specific language styling adjustments */
.editor-wysiwyg pre code.language-rust .keyword,
.editor-wysiwyg pre code.language-rust .function {
    font-weight: 500;
}

.editor-wysiwyg pre code.language-json .property {
    color: #5998a6;
}

/* Improve accessibility */
.code-copy-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Make sure the copy button is visible for keyboard navigation even without hover */
.code-copy-btn:focus-visible {
    opacity: 1;
}

pre:focus-within .code-block-actions {
    opacity: 1;
}

/* Add line numbers plugin styling */
.editor-wysiwyg pre.line-numbers {
    padding-left: 3.8em;
    counter-reset: linenumber;
}

.editor-wysiwyg pre.line-numbers>code {
    position: relative;
    white-space: inherit;
}

.line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.8em;
    width: 3em;
    /* works for line-numbers below 1000 lines */
    letter-spacing: -1px;
    border-right: 1px solid #999;
    user-select: none;
}

.line-numbers-rows>span {
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows>span:before {
    content: counter(linenumber);
    color: var(--text-muted);
    display: block;
    padding-right: 0.8em;
    text-align: right;
}
/* ============================================================
   Phase 2 — output story & product polish
   ============================================================ */

/* YAML frontmatter metadata block */
.editor-wysiwyg .frontmatter {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--space-sm) var(--space-md);
    margin: 0 0 var(--space-md);
    font-size: 0.85em;
}

.editor-wysiwyg .frontmatter .frontmatter-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    margin-bottom: var(--space-xs);
}

.editor-wysiwyg .frontmatter table {
    display: table;
    width: auto;
    margin: 0;
}

.editor-wysiwyg .frontmatter table th,
.editor-wysiwyg .frontmatter table td {
    border: none;
    padding: 2px 12px 2px 0;
    text-align: left;
}

.editor-wysiwyg .frontmatter table th {
    background: none;
    color: var(--text-light);
    font-weight: 500;
    white-space: nowrap;
    vertical-align: top;
}

.editor-wysiwyg .frontmatter table tr:nth-child(even) {
    background: none;
}

.editor-wysiwyg .frontmatter pre {
    margin: 0;
    padding: var(--space-sm);
    border: none;
}

/* Math (KaTeX) */
.editor-wysiwyg .math-display {
    display: block;
    margin: 1em 0;
    text-align: center;
    overflow-x: auto;
    padding: var(--space-xs) 0;
}

.editor-wysiwyg .math-inline .katex {
    font-size: 1.05em;
}

/* Task-list checkboxes are interactive in the preview */
.editor-wysiwyg input[type="checkbox"] {
    cursor: pointer;
    margin-right: 0.4em;
    accent-color: var(--primary-color);
}

.editor-wysiwyg input[type="checkbox"]:disabled {
    cursor: default;
}

/* Attachment images that no longer resolve */
.editor-wysiwyg img.attachment-missing {
    min-height: 40px;
    min-width: 120px;
    background-color: var(--bg-light);
    border: 1px dashed var(--border-color);
}

/* Find & replace bar */
.find-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-light);
    flex-wrap: wrap;
}

.find-bar[hidden] {
    display: none;
}

.find-bar-input {
    height: 28px;
    padding: 0 var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 0.85rem;
    width: 180px;
}

.find-bar-input:focus {
    border-color: var(--primary-color);
}

.find-count {
    font-size: 0.8rem;
    color: var(--text-light);
    min-width: 64px;
}

#find-case-btn.active {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* Sidebar file search */
.files-search {
    margin-bottom: var(--space-sm);
}

.files-search input {
    width: 100%;
    height: 28px;
    padding: 0 var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 0.85rem;
}

.files-search input:focus {
    border-color: var(--primary-color);
}

/* Document outline */
.outline-section {
    margin-bottom: var(--space-lg);
}

.outline-section h3 {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.outline-list {
    display: flex;
    flex-direction: column;
    max-height: 35vh;
    overflow-y: auto;
}

.outline-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 3px var(--space-sm);
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--text-color);
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.outline-item:hover {
    background-color: var(--hover-color);
}

.outline-level-2 { padding-left: calc(var(--space-sm) + 12px); }
.outline-level-3 { padding-left: calc(var(--space-sm) + 24px); }
.outline-level-4 { padding-left: calc(var(--space-sm) + 36px); }
.outline-level-5 { padding-left: calc(var(--space-sm) + 48px); }
.outline-level-6 { padding-left: calc(var(--space-sm) + 60px); }

.outline-empty {
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: var(--space-xs) var(--space-sm);
}

/* Status bar: word-goal button + reading time */
.statusbar-stat-btn {
    border: none;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    padding: 0;
    height: auto;
    cursor: pointer;
    text-decoration: underline dotted transparent;
    transition: text-decoration-color var(--transition-speed);
}

.statusbar-stat-btn:hover {
    text-decoration-color: var(--text-light);
}

.statusbar-stat-btn.goal-reached {
    color: var(--success-color);
    font-weight: 600;
}

/* Shared (read-only) document banner */
.share-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--primary-light);
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

/* Mobile single-pane toggle (FAB) */
.mobile-pane-toggle {
    display: none;
    position: fixed;
    right: 16px;
    bottom: calc(var(--statusbar-height) + 16px);
    z-index: 500;
    height: 44px;
    padding: 0 var(--space-md);
    border-radius: 22px;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-lg);
    font-size: 0.9rem;
}

.mobile-pane-toggle:hover,
.mobile-pane-toggle:active {
    background-color: var(--primary-hover);
}

@media (max-width: 768px) {
    .mobile-pane-toggle {
        display: flex;
    }

    /* Single pane: panels take the full height when a mode class is set */
    .side-by-side-layout.source-only .source-panel,
    .side-by-side-layout.wysiwyg-only .preview-panel {
        height: 100%;
    }

    .editor-wysiwyg {
        padding: var(--space-md);
    }

    /* Toolbars scroll horizontally instead of wrapping forever */
    .format-toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .format-toolbar .format-group {
        flex: 0 0 auto;
    }

    /* Comfortable tap targets */
    .btn {
        min-height: 40px;
    }

    .format-btn {
        min-height: 36px;
        min-width: 36px;
    }

    .find-bar-input {
        width: 120px;
    }
}


/* U2 — Touch targets. Keyed off the pointer, not the viewport: a 15" laptop
   with a touchscreen needs these as much as a phone does. 44x44 is the Apple
   HIG / WCAG 2.5.5 figure; the wider gap keeps neighbours from being one
   continuous strip under a fingertip. */
@media (pointer: coarse) {
    .format-btn,
    .format-overflow-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0 var(--space-sm);
    }

    .format-group {
        gap: 6px;
    }

    .btn {
        min-height: 44px;
    }

    .format-toolbar {
        height: auto;
    }
}

/* Keep the right-aligned Sync Scroll button the same height as the rest of
   the bar now that format buttons are 32px. */
.format-toolbar .btn-small {
    height: 32px;
}

/* U5 — Mobile chrome budget. Below 576px the floating pane toggle
   (#mobile-pane-toggle) already owns switching between source and preview,
   and side-by-side is not a layout this width can show — so the three mode
   buttons are pure duplication costing a whole toolbar row. Focus mode and
   the theme toggle stay. */
@media (max-width: 576px) {
    .view-options .btn-mode {
        display: none;
    }
}

/* U6 — Scroll affordance for the horizontally scrolling format toolbar.
   The two `local` gradients mask the shadows away at each end, so a shadow
   only appears on the side that actually has more content. */
.format-toolbar {
    background-image:
        linear-gradient(to right, var(--bg-color) 40%, rgba(0, 0, 0, 0)),
        linear-gradient(to left, var(--bg-color) 40%, rgba(0, 0, 0, 0)),
        linear-gradient(to right, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0)),
        linear-gradient(to left, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* U3 — Compact labels so the whole toolbar fits. Below this width the full
   labels overflow the bar and push Focus Mode and the theme toggle off the
   right edge, where nothing can reach them. */
.btn-label-short {
    display: none;
}

@media (max-width: 1500px) {
    .btn-label-full {
        display: none;
    }

    .btn-label-short {
        display: inline;
    }

    /* Shorten rather than hide: an icon-only button is a blank square on a
       system with no emoji font, and this one is not worth that risk. The
       label costs ~35px, so take it back from padding across the bar — the
       8px gap between buttons already does the separating work. */
    .main-toolbar .btn {
        padding: 0 var(--space-sm);
    }
}

/* Print stylesheet: Ctrl+P produces a clean document (2.3) */
@media print {

    .nav-sidebar,
    .main-toolbar,
    .format-toolbar,
    .editor-statusbar,
    .find-bar,
    .share-banner,
    .source-panel,
    .panel-header,
    .toast-container,
    .mobile-pane-toggle,
    .code-block-actions,
    .editor-loading,
    .dialog {
        display: none !important;
    }

    html,
    body {
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
    }

    /* Note: no bare .editor-panel here — it would re-show .source-panel
       (equal specificity, later rule wins) */
    .app-container,
    .main-content,
    .editor-container,
    .side-by-side-layout,
    .preview-panel {
        display: block !important;
        position: static !important;
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .editor-wysiwyg {
        display: block !important;
        position: static !important;
        height: auto !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
        color: #000 !important;
        background: #fff !important;
    }

    /* New page before top-level sections (but not a leading heading).
       Headings live inside .md-block wrappers (incremental rendering). */
    .editor-wysiwyg .md-block:not(:first-child)>h1,
    .editor-wysiwyg .md-block:not(:first-child)>h2 {
        break-before: page;
    }

    .editor-wysiwyg pre,
    .editor-wysiwyg blockquote,
    .editor-wysiwyg table,
    .editor-wysiwyg .mermaid-diagram,
    .editor-wysiwyg .frontmatter {
        break-inside: avoid;
    }

    .editor-wysiwyg pre {
        white-space: pre-wrap;
        word-break: break-word;
        border: 1px solid #ddd !important;
    }

    .editor-wysiwyg a {
        color: #000 !important;
        text-decoration: underline;
    }
}

/* High-contrast overrides (moved out of ThemeManager, which used to inject
   these as a fresh <style> element on every theme change) */
.high-contrast {
    --focus-ring: 0 0 0 3px #FFFF00 !important;
}

.high-contrast.dark-theme {
    --text-color: #FFFFFF !important;
    --text-light: #FFFFFF !important;
    --text-muted: #E0E0E0 !important;
    --primary-color: #00BFFF !important;
}

.high-contrast:not(.dark-theme) {
    --text-color: #000000 !important;
    --text-light: #000000 !important;
    --primary-color: #0000FF !important;
    --bg-light: #FFFFFF !important;
}

.high-contrast .btn,
.high-contrast .format-btn {
    border: 2px solid currentColor !important;
}

/* ============================================================
   Phase 7 — command palette (Ctrl+P)
   ============================================================ */
.command-palette {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 15, 15, 0.3);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
    z-index: 1200;
}

.command-palette[hidden] {
    display: none;
}

.command-palette-content {
    width: 100%;
    max-width: 600px;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.command-palette-input {
    width: 100%;
    height: 52px;
    padding: 0 var(--space-md);
    border: none;
    border-bottom: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--text-color);
    font-size: 1rem;
    font-family: inherit;
}

.command-palette-input:focus {
    outline: none;
    box-shadow: none;
}

.command-palette-input::placeholder {
    color: var(--text-muted);
}

.command-palette-list {
    max-height: 55vh;
    overflow-y: auto;
    padding: var(--space-xs) 0 var(--space-md);
}

.command-palette-group {
    padding: var(--space-sm) var(--space-md) 2px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.command-palette-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
}

.command-palette-item.selected {
    background-color: var(--primary-light);
}

.command-palette-label {
    color: var(--text-color);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.command-palette-item.selected .command-palette-label {
    color: var(--primary-color);
}

.command-palette-item kbd {
    font-size: 0.7rem;
    color: var(--text-muted);
    flex: 0 0 auto;
}

.command-palette-empty {
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ============================================================
   Phase 7 — mobile chrome budget (7.4)
   ============================================================ */
.main-actions {
    position: relative;
}

.more-menu-btn {
    display: none;
}

.more-menu,
.format-overflow-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 140px;
    padding: 4px;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    z-index: 600;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.more-menu[hidden],
.format-overflow-menu[hidden] {
    display: none;
}

.more-menu-item {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}

/* Below 600px: collapse the five file actions into the ⋯ menu, and hide the
   line-number gutter (re-enable via body.gutter-visible — the palette's
   "Toggle line numbers" command). */
@media (max-width: 600px) {
    .main-actions > .btn:not(.more-menu-btn) {
        display: none;
    }

    .more-menu-btn {
        display: inline-flex;
    }

    .line-numbers {
        display: none;
    }

    .editor-source,
    .source-highlight-layer {
        left: 0;
        width: 100%;
        padding-left: var(--space-md);
    }

    body.gutter-visible .line-numbers {
        display: block;
    }

    body.gutter-visible .editor-source,
    body.gutter-visible .source-highlight-layer {
        left: 60px;
        width: calc(100% - 60px);
        padding-left: 10px;
    }
}

/* Status bar: wrap instead of clipping on narrow screens, with a compact
   stats row so it usually stays on one line; the mobile pane FAB moves up to
   clear the (possibly two-row) bar. */
@media (max-width: 768px) {
    .editor-statusbar {
        height: auto;
        min-height: var(--statusbar-height);
        flex-wrap: wrap;
        gap: 2px 8px;
        padding: 4px var(--space-md);
    }

    .document-stats {
        gap: var(--space-sm);
        font-size: 0.75rem;
    }

    .mobile-pane-toggle {
        bottom: 56px;
    }
}

/* ============================================================
   Phase 7 — first-run onboarding (7.6)
   ============================================================ */

.onboarding {
    position: fixed;
    top: calc(var(--toolbar-height) + var(--format-toolbar-height) + 12px);
    right: 16px;
    z-index: 400;
    width: 264px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-color);
}

.onboarding-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}

.onboarding-title {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.onboarding-close {
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 15px;
}

.onboarding-steps {
    list-style: none;
    margin: 0;
    padding: 10px 12px;
}

.onboarding-steps li {
    position: relative;
    padding: 7px 0 7px 24px;
    color: var(--text-muted);
}

.onboarding-steps li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 13px;
    height: 13px;
    border: 1px solid var(--border-color);
    background: transparent;
}

.onboarding-steps li.done {
    color: var(--text-color);
}

.onboarding-steps li.done::before {
    content: '✓';
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--bg-color);
    font-size: 10px;
    line-height: 13px;
    text-align: center;
}

.onboarding-foot {
    padding: 6px 12px;
    border-top: 1px solid var(--border-color);
    font-size: 0.62rem;
    color: var(--text-muted);
    text-align: right;
}

@media (max-width: 768px) {
    .onboarding {
        width: calc(100% - 24px);
        right: 12px;
        top: calc(var(--toolbar-height) + 8px);
    }
}

/* ============================================================
   Phase 7 — toolbar density & hierarchy (7.9)
   ============================================================ */

/* Demote the secondary file actions (Save/Export/Share) so New/Open carry
   the weight and the header reads title-first. */
.btn-quiet {
    color: var(--text-muted);
}

.btn-quiet:hover {
    color: var(--text-color);
    background-color: var(--hover-color);
}

/* The advanced format groups collapse into a ⋯ menu below 1100px so the
   format bar stays on one row instead of wrapping. The wrapper is display:none
   above the breakpoint so it contributes no flex gap to the toolbar. */
.format-overflow {
    position: relative;
    display: none;
}

@media (max-width: 1100px) {
    .format-group-collapsible {
        display: none;
    }

    .format-overflow {
        display: block;
    }
}

/* ============================================================
   Phase 7 — polish batch (7.11)
   ============================================================ */

/* Status-bar right side: keyboard shortcuts + brand/home link. */
.statusbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

/* Runtimenotes Labs branding + back-to-landing link in the footer (7.11). */
.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.75rem;
}

.footer-brand a {
    color: var(--text-light);
    text-decoration: none;
}

.footer-brand a:hover {
    color: var(--primary-color);
}

.footer-brand .footer-home {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-color);
}

.footer-sep {
    color: var(--text-muted);
}

/* Word-count goal surfaced as a chip when active (7.11). */
.statusbar-stat-btn.has-goal {
    background: var(--primary-light);
    color: var(--primary-dark);
    border: 1px solid var(--primary-color);
    border-radius: 999px;
    padding: 1px var(--space-sm);
    text-decoration: none;
}

.statusbar-stat-btn.has-goal.goal-reached {
    background: var(--success-color);
    color: var(--bg-color);
    border-color: var(--success-color);
}