/* Workspace design tokens. Themes override colors, not individual components. */
:root {
  --bg: #fff; --sidebar: #f7f7f5; --surface: #fff; --soft: #f7f7f5; --hover: #efefed;
  --text: #37352f; --muted: #787774; --faint: #a6a5a2; --border: #e9e9e7;
  --accent: #2383e2; --selected: #e8f2fc; --selected-text: #1865a9;
  --red: #c4554d; --red-bg: #fbe9e7; --green: #448361; --green-bg: #edf3ec;
  --shadow: 0 4px 16px #00000014, 0 0 0 1px #00000008; --sidebar-width: 240px;
  color: var(--text); background: var(--bg); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 1.5; font-synthesis: none; -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 5px 10px; border: 1px solid transparent; border-radius: 4px; color: var(--text); background: var(--soft); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 100ms, color 100ms; }
button:hover { background: var(--hover); }
button:disabled { opacity: .4; cursor: not-allowed; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button svg { flex-shrink: 0; }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--faint); }
a:hover { text-decoration-color: var(--text); }
input, select, textarea { width: 100%; min-width: 0; color: var(--text); background: var(--soft); border: 1px solid var(--border); border-radius: 4px; padding: 7px 10px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent); }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
input[type='checkbox'], input[type='radio'] { width: 15px; height: 15px; flex: 0 0 15px; accent-color: var(--accent); margin: 0; padding: 0; box-shadow: none; }
input[type='color'] { width: 44px; height: 34px; padding: 3px; }
textarea { min-height: 130px; resize: vertical; line-height: 1.65; }
input[type='file'] { background: var(--surface); }
label { min-width: 0; }
form > label, .field, .translation-form label, .ticket-create-form label { display: grid; gap: 7px; font-size: 13px; font-weight: 500; }
h1, h2, h3, h4, p { overflow-wrap: anywhere; }
h1 { font-size: 40px; line-height: 1.2; font-weight: 700; margin: 0; }
h2 { font-size: 20px; line-height: 1.3; font-weight: 600; margin: 0; }
h3 { font-size: 17px; font-weight: 600; }
p { margin: 0 0 10px; }
hr { border: 0; border-top: 1px solid var(--border); margin: 8px 0; }
svg { display: inline-block; vertical-align: middle; }
kbd { font: 11px ui-monospace, monospace; color: var(--faint); white-space: nowrap; }
.muted, .page-subtitle { color: var(--muted); }
.eyebrow { color: var(--muted); font-size: 12px; font-weight: 500; margin: 0 0 8px; }
.primary-button, button[type='submit'] { color: #fff; background: var(--accent); border-color: var(--accent); }
.primary-button:hover, button[type='submit']:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.secondary-button, .secondary-link-button { color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; }
.secondary-link-button { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px; text-decoration: none; font-size: 13px; }
.text-button { background: transparent; }
.delete-note { color: var(--red); background: transparent; width: fit-content; }
.delete-note:hover { background: var(--red-bg); }
.icon-button { width: 28px; height: 28px; min-height: 28px; padding: 4px; border: 0; color: var(--muted); background: transparent; border-radius: 4px; flex: 0 0 28px; }
.icon-button:hover { color: var(--text); background: var(--hover); }
.is-favorite { color: #c99731; }
.is-favorite svg { fill: #f6db8b; }
.error-banner, .auth-error, .inline-error { color: var(--red); background: var(--red-bg); padding: 10px 12px; border-radius: 4px; font-size: 13px; }
.success-banner { color: var(--green); background: var(--green-bg); padding: 10px 12px; border-radius: 4px; font-size: 13px; }

/* Frame and sidebar */
.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; color: var(--text); background: var(--bg); }
.app-shell.sidebar-hidden { grid-template-columns: 0 minmax(0, 1fr); }
.workspace-main { grid-column: 2; min-width: 0; }
.sidebar { position: sticky; top: 0; z-index: 60; display: flex; flex-direction: column; height: 100dvh; width: var(--sidebar-width); padding: 6px 8px 10px; background: var(--sidebar); border-right: 1px solid var(--border); color: var(--text); overflow: hidden; }
.sidebar-hidden .sidebar { display: none; }
.workspace-brand-row { display: flex; align-items: center; gap: 0; padding: 5px 0 12px; }
.workspace-switcher { flex: 1; justify-content: flex-start; min-width: 0; gap: 7px; padding: 5px; background: transparent; }
.workspace-switcher strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }
.workspace-switcher > svg { margin-left: auto; }
.brand-mark { display: inline-grid; place-items: center; width: 23px; height: 23px; flex: 0 0 23px; color: var(--text); background: color-mix(in srgb, var(--text) 8%, var(--bg)); border-radius: 5px; }
.sidebar-scroll { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.workspace-tools { margin-bottom: 20px; }
.nav-item { display: flex; justify-content: flex-start; width: 100%; gap: 9px; min-height: 31px; padding: 5px 9px; background: transparent; color: var(--muted); font-size: 14px; border: 0; text-align: left; }
.nav-item > svg { color: var(--muted); }
.nav-item > span:not(.nav-count) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item kbd { margin-left: auto; }
.nav-item.is-active { color: var(--text); background: var(--hover); font-weight: 600; }
.nav-count { margin-left: auto; color: var(--faint); font-size: 12px; }
.nav-section { margin: 10px 0 22px; }
.nav-section-label { display: flex; align-items: center; justify-content: flex-start; gap: 5px; width: 100%; min-height: 26px; padding: 4px 9px; color: var(--muted); font-size: 12px; font-weight: 500; background: transparent; }
.static-label { margin: 0; }
.translation-selector { display: flex; align-items: center; padding: 0 8px; gap: 7px; color: var(--muted); }
.translation-selector select { padding: 5px 0; border-color: transparent; background: transparent; font-weight: 500; }
.book-tree { margin-left: 13px; border-left: 1px solid var(--border); padding-left: 4px; }
.current-book { padding-left: 27px; }
.sidebar-footer { padding-top: 8px; }
.sidebar-user { display: flex; gap: 8px; align-items: center; padding: 13px 7px 0; margin-top: 8px; border-top: 1px solid var(--border); }
.sidebar-user > div { min-width: 0; flex: 1; }
.sidebar-user strong, .sidebar-user small, .account-identity strong, .account-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user strong { font-size: 12px; font-weight: 500; }
.sidebar-user small { color: var(--faint); font-size: 11px; }
.sidebar-user > svg { color: var(--faint); }
.avatar { display: grid; place-items: center; height: 26px; width: 26px; flex: 0 0 26px; font-size: 12px; border-radius: 50%; color: #715a48; background: #eee5df; }
.workspace-account-menu { position: absolute; top: 45px; left: 8px; right: 8px; z-index: 65; padding: 6px; border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); background: var(--surface); }
.account-identity { display: flex; gap: 8px; align-items: center; padding: 8px 4px 12px; }
.account-identity > div { min-width: 0; }
.account-identity small { color: var(--muted); font-size: 11px; }
.workspace-account-menu > button { width: 100%; justify-content: flex-start; background: transparent; font-size: 13px; }
.workspace-account-menu > button:hover { background: var(--hover); }
.sidebar-scrim { display: none; }
.workspace-topbar { position: sticky; top: 0; z-index: 45; height: 46px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 16px; background: var(--bg); }
.topbar-path, .topbar-actions, .history-controls, .breadcrumbs, .breadcrumbs > button { display: flex; align-items: center; gap: 6px; min-width: 0; }
.topbar-path { flex: 1; }
.breadcrumbs { gap: 9px; font-size: 13px; white-space: nowrap; overflow: hidden; }
.breadcrumbs > button { padding: 3px 5px; background: transparent; font-size: 13px; font-weight: 400; }
.breadcrumbs > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.breadcrumb-divider { color: var(--faint); }
.topbar-actions { flex-shrink: 0; position: relative; }
.top-auth-actions { display: flex; gap: 5px; margin-right: 8px; }
.top-auth-actions button { font-size: 12px; min-height: 27px; }
.page-menu, .block-menu { position: absolute; z-index: 100; width: 270px; background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--border); padding: 6px; border-radius: 6px; color: var(--text); }
.page-menu { top: 35px; right: 0; }
.menu-caption { font-size: 11px; font-weight: 500; color: var(--muted); margin: 5px 8px 6px; }
.menu-item { display: flex; justify-content: flex-start; width: 100%; min-height: 30px; padding: 6px 9px; background: transparent; font-size: 13px; }
.menu-item:hover { background: var(--hover); }
.font-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 4px; }
.font-options button { display: grid; gap: 2px; padding: 7px 2px; background: transparent; }
.font-options strong { font-size: 22px; font-weight: 500; }
.font-options small { font: 10px -apple-system, sans-serif; }
.font-options .is-current { color: var(--accent); background: var(--selected); }
.menu-toggle { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; font-size: 13px; }
.impersonation-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 24px; background: #faf0d3; color: #7c6021; font-size: 12px; }
.impersonation-banner button { background: transparent; color: inherit; border: 1px solid #dfc885; font-size: 12px; }

/* Page canvas and reading */
.reader, .profile-page { width: 100%; max-width: 1400px; margin: 0 auto; padding: 48px 64px 100px; min-width: 0; min-height: calc(100dvh - 46px); }
.profile-page { display: grid; align-content: start; gap: 20px; }
.reader-header { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; min-width: 0; }
.profile-page > .reader-header { margin-bottom: 8px; }
.page-icon { width: 64px; height: 64px; display: flex; align-items: center; margin-bottom: 12px; color: var(--text); }
.page-subtitle { margin: 10px 0 0; font-size: 14px; }
.reader-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.reader-book-select { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.reader-book-select select { width: auto; max-width: 240px; background: transparent; border-color: transparent; padding: 4px; }
.reader-layout-tabs { display: inline-flex; gap: 2px; }
.reader-layout-tabs button { font-size: 12px; min-height: 26px; color: var(--muted); background: transparent; }
.reader-layout-tabs .is-current { color: var(--text); background: var(--hover); }
.strong-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-left: auto; }
.chapter-tabs { display: flex; flex-wrap: wrap; gap: 3px; width: 100%; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.chapter-tabs button { width: 29px; height: 28px; min-height: 28px; padding: 0; background: transparent; color: var(--muted); font-size: 12px; border-radius: 3px; font-variant-numeric: tabular-nums; }
.chapter-tabs button:hover { background: var(--hover); }
.chapter-tabs .is-current { color: var(--selected-text); background: var(--selected); font-weight: 600; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 310px); align-items: start; gap: 36px; }
.content-grid:has(.notes-panel:empty) { grid-template-columns: minmax(0, 780px); }
.chapter, .notes-panel { min-width: 0; }
.verse-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px; border: 0; padding: 2px 0; }
.verse-block-menu { position: absolute; left: -20px; top: 10px; width: 20px; height: 24px; min-height: 24px; padding: 2px; color: var(--faint); background: transparent; opacity: 0; }
.verse-row:hover .verse-block-menu, .verse-row:focus-within .verse-block-menu { opacity: 1; }
.verse-block-menu:hover { color: var(--text); background: var(--hover); }
.verse-button { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 7px 6px; border-radius: 3px; }
.verse-button:hover { background: var(--soft); }
.verse-row.selected .verse-button { background: var(--selected); }
.verse-number { display: inline-flex; justify-content: flex-start; align-items: baseline; height: 27px; width: 24px; min-height: 0; margin: 3px 0 0; padding: 1px 0; border: 0; background: transparent; color: var(--faint); font-size: 11px; font-weight: 400; line-height: 1.8; }
.verse-number:hover { color: var(--accent); background: transparent; }
.verse-row.selected .verse-number { color: var(--accent); }
.verse-text { font-size: 17px; line-height: 1.85; font-weight: 400; color: var(--text); user-select: text; overflow-wrap: anywhere; }
.verse-row.has-highlight .verse-text { text-decoration: underline; text-decoration-color: var(--verse-highlight-color); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.verse-actions { display: flex; align-items: center; gap: 2px; padding-top: 11px; }
.note-count, .mention-button, .crossref-button { min-height: 24px; padding: 2px 4px; color: var(--muted); background: transparent; border-radius: 3px; font-size: 11px; }
.note-count:hover, .mention-button:hover { background: var(--hover); color: var(--text); }
.strong-word { display: inline; }
.strong-number { display: inline; vertical-align: super; margin: 0 3px 0 2px; padding: 0; min-height: 0; border: 0; color: var(--accent); background: transparent; font: 9px -apple-system, sans-serif; cursor: pointer; }
.strong-number:hover { background: var(--selected); }
.notes-panel { position: sticky; top: 70px; max-height: calc(100dvh - 90px); display: grid; gap: 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 3px 5px 0; }
.note-form { display: grid; gap: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 16px; }
.note-form h2 { font-size: 15px; font-weight: 500; }
.note-form .eyebrow { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.note-form button[type='submit'] { width: fit-content; max-width: 100%; font-size: 12px; margin-top: 4px; }
.note-scope-toggle, .settings-toggle, .search-checkbox, .admin-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; color: var(--text); }
.note-scope-toggle { padding: 4px 0; }
.detected-refs { display: flex; flex-wrap: wrap; gap: 5px; font-size: 11px; color: var(--muted); margin: 0; }
.detected-refs:empty { display: none; }
.detected-ref-link { font-size: 11px; font-weight: 500; color: var(--selected-text); background: var(--selected); border-radius: 3px; padding: 1px 4px; min-height: 20px; }
.detected-ref-link:hover, .detected-ref-link[aria-expanded='true'] { box-shadow: inset 0 0 0 1px var(--accent); }
.verse-reference-preview { position: fixed; z-index: 105; width: min(360px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); outline: none; }
.verse-reference-preview:focus-visible { outline: 2px solid var(--accent); }
.verse-reference-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.verse-reference-preview-header strong { font-size: 14px; font-weight: 600; }
.verse-reference-preview-text { font-size: 15px; line-height: 1.7; white-space: pre-wrap; margin: 10px 0 14px; }
.verse-reference-open { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--accent); text-decoration: none; }
.verse-reference-open:hover { text-decoration: underline; }
.chapter-classic { column-count: 1; }
.classic-verse-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 8px; }
.classic-ghost-col { display: none; }
.classic-crossrefs { font-size: 11px; }

/* Popovers, notes, dictionaries */
.context-menu { position: fixed; z-index: 100; width: min(270px, calc(100vw - 24px)); padding: 5px; color: var(--text); border: 1px solid var(--border); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow); max-height: calc(100dvh - 24px); overflow: auto; }
.context-menu button { justify-content: flex-start; width: 100%; background: transparent; font-size: 13px; text-align: left; padding: 7px 9px; }
.context-menu button:hover { background: var(--hover); }
.highlight-picker { position: fixed; z-index: 101; display: grid; gap: 10px; width: min(320px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); }
.highlight-picker > strong { font-size: 12px; color: var(--muted); font-weight: 500; }
.highlight-color-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.highlight-color-grid button { position: relative; flex-direction: column; justify-content: flex-end; min-height: 48px; font-size: 10px; background: var(--surface); border: 1px solid var(--border); padding: 6px 2px; }
.highlight-color-grid button::before { content: ''; display: block; width: 20px; height: 15px; margin: 2px auto 4px; background: var(--highlight-color); border-radius: 3px; }
.note-panel, .strong-panel { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border); background: var(--surface); border-radius: 6px; min-width: 0; color: var(--text); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.note-panel-popup, .strong-panel-popup { position: fixed; top: 90px; right: 32px; z-index: 80; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 120px); box-shadow: var(--shadow); }
.note-panel-inline, .strong-panel-inline { grid-column: 1 / -1; margin: 5px 0 12px 34px; max-height: min(500px, 65dvh); }
.note-panel-sidebar, .strong-panel-sidebar { max-height: min(600px, 65dvh); }
.note-panel-header { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 13px; }
.note-panel-header > strong { font-weight: 500; }
.note-item { display: grid; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.note-item:last-child { border-bottom: 0; }
.note-item-global { border-left: 2px solid var(--accent); padding-left: 12px; }
.note-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 11px; color: var(--muted); }
.note-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.note-actions button, .note-actions a { font-size: 12px; }
.edit-note-form { display: grid; gap: 10px; }
.mention-entry { display: grid; gap: 7px; }
.mention-tag { width: fit-content; font-size: 11px; line-height: 1.5; padding: 1px 6px; border-radius: 3px; color: #6940a5; background: #f0e8f8; }
.mention-tag-sermon { color: #9f6b24; background: #fbf0df; }
.mention-tag-study { color: #28679c; background: #e7f0fa; }
.mention-tag-global { color: #397253; background: #e5f0e8; }
.mention-excerpt, .outline-source { font-size: 13px; line-height: 1.7; margin: 0; }
.outline-source { color: var(--muted); }
.mention-excerpt { padding-left: 10px; border-left: 2px solid var(--border); }
.mentioned-list { display: flex; flex-wrap: wrap; gap: 4px; }
.mentioned-list button { min-height: 23px; font-size: 11px; color: var(--selected-text); background: var(--selected); padding: 1px 6px; }
.strong-entry { display: grid; gap: 8px; }
.strong-entry-head { display: flex; align-items: center; justify-content: space-between; }
.strong-entry h2 { font-size: 32px; font-weight: 500; }
.strong-entry p { margin: 0; font-size: 14px; line-height: 1.7; }
.strong-occurrences { display: grid; gap: 8px; }
.strong-occurrence, .crossref-item { display: grid; justify-content: stretch; gap: 5px; padding: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; font-size: 13px; font-weight: 400; }
.strong-occurrence strong, .crossref-item strong { font-size: 12px; color: var(--accent); font-weight: 500; }
.strong-occurrence mark { color: var(--text); background: #f3dfa1; border-radius: 2px; padding: 0 2px; }
.crossref-score { font-size: 11px; color: var(--muted); }
.crossref-item { min-width: 0; border-radius: 4px; gap: 8px; }
.crossref-preview { max-height: min(260px, 40dvh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.crossref-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.crossref-preview-text { margin: 0 0 8px; white-space: pre-wrap; color: var(--text); font-size: 14px; line-height: 1.7; user-select: text; }
.crossref-preview-text:last-child { margin-bottom: 0; }
.crossref-verse-label { color: var(--muted); font-size: 11px; }
.crossref-preview-message { color: var(--muted); font-size: 12px; margin: 0; }
.change-log-item { display: grid; gap: 8px; border-bottom: 1px solid var(--border); padding: 8px 0; }
.diff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.diff-grid pre { background: var(--soft); border-radius: 3px; padding: 8px; overflow: auto; font-size: 11px; max-height: 260px; }

/* Document editor */
.markdown-editor { position: relative; display: grid; gap: 0; min-width: 0; }
.markdown-toolbar { display: flex; align-items: center; gap: 1px; flex-wrap: wrap; padding: 4px 0 6px; border-bottom: 1px solid var(--border); }
.toolbar-divider { width: 1px; height: 16px; background: var(--border); margin: 0 4px; }
.editor-mode-switch { display: flex; gap: 2px; margin-left: auto; }
.markdown-toolbar .editor-mode-button { display: flex; gap: 4px; background: transparent; font-size: 11px; min-height: 26px; padding: 3px 6px; color: var(--muted); }
.editor-mode-button[aria-pressed='true'], .markdown-toolbar .icon-button[aria-pressed='true'] { color: var(--text); background: var(--hover); }
.markdown-editor textarea { min-height: 170px; background: transparent; border: 0; border-radius: 0; resize: none; overflow: hidden; padding: 14px 2px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.8; box-shadow: none; }
.rich-text-host { min-width: 0; }
.note-form .rich-text-host, .edit-note-form .rich-text-host { padding-left: 48px; }
.rich-block-handle { display: flex; width: 48px; height: 26px; align-items: center; z-index: 70; padding-right: 2px; }
.rich-block-control { width: 23px; height: 26px; min-height: 26px; padding: 2px; border: 0; background: transparent; color: var(--faint); border-radius: 3px; flex: 0 0 23px; }
.rich-block-control:hover, .rich-block-control[aria-expanded='true'] { color: var(--text); background: var(--hover); }
.rich-block-control:last-child { cursor: grab; touch-action: none; }
.rich-block-handle[data-dragging='true'] .rich-block-control:last-child { cursor: grabbing; }
.block-action-menu { position: fixed; z-index: 100; width: min(268px, calc(100vw - 16px)); max-height: min(440px, calc(100dvh - 16px)); overflow-y: auto; overscroll-behavior: contain; padding: 5px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); }
.block-action-menu .menu-item { gap: 9px; }
.block-action-menu .menu-item[aria-checked='true'] { background: var(--hover); }
.block-action-menu hr { border: 0; border-top: 1px solid var(--border); margin: 5px 0; }
.block-style-check { margin-left: auto; }
.prosemirror-dropcursor-block { background: var(--accent); }
.rich-text-content { min-height: 170px; padding: 14px 2px; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.rich-text-content > :last-child { margin-bottom: 0; }
.rich-text-content p:empty::after { content: '\00a0'; }
.rich-text-content ul, .rich-text-content ol { padding-left: 26px; }
.rich-text-content li p { margin-bottom: 4px; }
.rich-text-content img { display: block; max-width: 100%; height: auto; margin: 12px 0; }
.rich-text-content table { border-collapse: collapse; width: 100%; table-layout: fixed; margin: 12px 0; }
.rich-text-content td, .rich-text-content th { border: 1px solid var(--border); padding: 7px 10px; vertical-align: top; min-width: 40px; }
.rich-text-content th { background: var(--soft); }
.rich-text-content .selectedCell { background: var(--selected); }
.rich-text-content .ProseMirror-selectednode { outline: 2px solid var(--accent); }
.rich-text-content pre { background: var(--soft); padding: 14px; border-radius: 4px; white-space: pre-wrap; }
.rich-text-content pre code { color: var(--text); background: transparent; padding: 0; }
.editor-status { padding: 12px 0; font-size: 12px; }
.outline-editor .markdown-editor textarea { min-height: 360px; font-size: 16px; }
.block-menu { top: 38px; left: 0; width: min(270px, 100%); max-height: 340px; overflow: auto; }
.block-menu .menu-item svg { width: 28px; height: 28px; padding: 5px; border: 1px solid var(--border); border-radius: 3px; }
.markdown-preview { min-width: 0; color: var(--text); line-height: 1.8; font-size: 14px; }
.markdown-editor .markdown-preview { min-height: 170px; padding: 14px 2px; }
.markdown-preview p { margin: 0 0 10px; }
.markdown-preview h1 { font-size: 26px; margin: 18px 0 10px; }
.markdown-preview h2 { font-size: 22px; margin: 16px 0 8px; }
.markdown-preview h3 { font-size: 18px; margin: 12px 0 6px; }
.markdown-preview h4 { font-size: 18px; margin: 12px 0 6px; }
.markdown-preview blockquote { border-left: 3px solid var(--text); padding: 4px 14px; margin: 12px 0; }
.markdown-preview code { color: #c4554d; background: var(--soft); padding: 2px 4px; border-radius: 3px; font-size: .85em; }
.markdown-code { padding: 14px; border-radius: 4px; overflow: auto; background: var(--soft); }
.markdown-code code { color: var(--text); padding: 0; }
.markdown-preview a, .markdown-link { color: var(--accent); }
.markdown-image { display: block; max-width: 100%; max-height: 480px; object-fit: contain; border-radius: 3px; margin: 12px 0; }
.markdown-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0; }
.markdown-table th, .markdown-table td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; font-weight: 400; overflow-wrap: anywhere; }
.markdown-table th { color: var(--muted); background: var(--soft); }
.outlines-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; }
.outline-list, .prayer-list { display: grid; align-content: start; gap: 5px; min-width: 0; max-height: calc(100dvh - 120px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; position: sticky; top: 70px; }
.outline-list > button, .prayer-list > button { justify-content: flex-start; width: 100%; background: transparent; color: var(--muted); font-size: 13px; }
.outline-list-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; gap: 2px; border-radius: 4px; }
.outline-list-item > button { display: grid; justify-content: stretch; gap: 4px; padding: 9px 8px; background: transparent; min-width: 0; text-align: left; }
.outline-list-item strong { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.outline-list-item span { font-size: 11px; color: var(--muted); }
.outline-list-item > a { display: grid; align-items: center; font-size: 10px; text-decoration: none; color: var(--muted); padding: 0 5px; }
.outline-list-item.active-outline, .prayer-list-item.active-outline { background: var(--hover); }
.outline-editor { display: grid; align-content: start; gap: 18px; min-width: 0; }
.outline-toolbar { display: grid; grid-template-columns: minmax(100px, 160px) minmax(100px, 1fr) auto; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.outline-toolbar select, .outline-toolbar input { background: transparent; border-color: transparent; }
.outline-title-input { font-size: 30px; font-weight: 700; background: transparent; border: 0; padding: 0; border-radius: 0; }
.outline-title-input:focus { box-shadow: none; }
.custom-fields { display: grid; gap: 6px; }
.custom-field-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) 28px; gap: 8px; align-items: center; }
.custom-field-row input { background: transparent; border-color: transparent; }
.custom-field-row input:first-child { color: var(--muted); }
.custom-fields > button { justify-self: start; font-size: 12px; background: transparent; border: 0; color: var(--muted); }
.outline-detail-card { max-width: 760px; }
.outline-detail-card h2 { font-size: 30px; margin: 20px 0 12px; }
.outline-detail-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.outline-detail-fields { display: grid; gap: 4px; margin-bottom: 24px; }
.outline-detail-fields p { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; margin: 0; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.outline-detail-fields strong { color: var(--muted); font-weight: 400; }

/* Collection index and standalone outline documents */
.profile-page.outlines-index, .profile-page.outline-document, .profile-page.outline-detail-page { max-width: 850px; padding: 72px 64px 100px; }
.profile-page.outline-document { width: 100%; max-width: none; margin: 0; }
.outlines-index .page-icon { height: 72px; margin-bottom: 18px; }
.outlines-index .page-icon svg { width: 56px; height: 56px; }
.outline-index-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.outline-index-toolbar .auth-tabs { border: 0; gap: 16px; }
.outline-index-toolbar > button { background: transparent; font-size: 12px; color: var(--muted); }
.outline-page-links { display: grid; align-content: start; gap: 2px; }
.outline-page-link { display: flex; align-items: flex-start; gap: 8px; width: fit-content; max-width: 100%; padding: 3px 4px; border-radius: 3px; text-decoration: none; font-size: 16px; font-weight: 500; line-height: 1.6; }
.outline-page-link svg { flex-shrink: 0; color: var(--muted); margin-top: 3px; }
.outline-page-link span { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; overflow-wrap: anywhere; }
.outline-page-link:hover { background: var(--hover); }
.outline-page-link:hover span { text-decoration-color: var(--text); }
.outline-nav-tree .nav-item { padding-left: 23px; text-decoration: none; font-weight: 400; }
.outline-nav-tree .is-active { font-weight: 500; }
.outline-document-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.outline-back-link { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 12px; text-decoration: none; }
.outline-document-actions button, .outline-document-actions a { font-size: 12px; }
.outline-document-actions .secondary-link-button { border-color: transparent; background: transparent; }
.outline-document-title { margin: 0; }
.outline-document-title .outline-title-input { display: block; width: 100%; min-height: 48px; height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; line-height: 1.2; resize: none; overflow: hidden; }
.outline-document-title .outline-title-input:focus { box-shadow: none; }
.outline-page-editor { gap: 16px; }
.outline-properties-toggle { display: flex; justify-content: flex-start; justify-self: start; flex-wrap: wrap; gap: 6px; padding: 2px 0; background: transparent; font-size: 12px; color: var(--muted); font-weight: 400; }
.outline-properties-toggle > span { max-width: 100%; overflow-wrap: anywhere; font-size: 11px; }
.outline-properties, .outline-body-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; }
.outline-properties { border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.outline-property { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 13px; }
.outline-property > span { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.outline-property input, .outline-property select { border-color: transparent; background: transparent; }
.outline-property input:hover, .outline-property select:hover { background: var(--soft); }
.outline-property.custom-field-row { grid-template-columns: 130px minmax(0, 1fr) 28px; }
.outline-add-property { justify-self: start; color: var(--muted); font-size: 12px; }
.outline-page-editor .markdown-editor textarea, .outline-page-editor .rich-text-content { font-size: 16px; line-height: 1.65; min-height: 50dvh; padding: 12px 0; }
.outline-page-editor .markdown-preview { font-size: 16px; line-height: 1.65; }
.outline-page-editor .markdown-toolbar { border: 0; }
.outline-document-footer { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 24px; }
.outline-document-footer button { font-size: 12px; }

/* Database views and properties */
.auth-tabs, .admin-tabs { display: flex; flex-wrap: wrap; gap: 2px 16px; border-bottom: 1px solid var(--border); margin: 0; }
.auth-tabs button, .admin-tabs button { min-height: 36px; padding: 7px 3px; background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-weight: 400; font-size: 13px; }
.auth-tabs .is-current, .admin-tabs .is-current { color: var(--text); border-bottom-color: var(--text); font-weight: 500; }
.compact-tabs { gap: 2px 12px; }
.settings-section { display: grid; gap: 16px; padding: 20px 0 26px; border-bottom: 1px solid var(--border); max-width: 850px; min-width: 0; }
.settings-section h2 { font-size: 17px; }
.settings-section .eyebrow { margin-bottom: 4px; }
.display-mode-list { display: flex; flex-wrap: wrap; gap: 8px; }
.display-mode-option { display: flex; gap: 8px; align-items: center; border: 1px solid var(--border); border-radius: 4px; padding: 9px 12px; font-size: 13px; }
.display-mode-option.is-selected { border-color: var(--accent); background: var(--selected); }
.theme-list { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-option { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }
.theme-option.is-selected { border-color: var(--accent); background: var(--selected); }
.theme-option strong { font-weight: 500; }
.theme-swatch { width: 24px; height: 18px; background: #fff; border: 1px solid #ddd; border-radius: 3px; }
.theme-swatch-dark .theme-swatch { background: #191919; }
.theme-swatch-forest .theme-swatch { background: #e9f0e8; }
.theme-swatch-sepia .theme-swatch { background: #f4eede; }
.theme-swatch-contrast .theme-swatch { border-color: #000; box-shadow: inset 10px 0 0 #000; }
.search-panel { display: grid; gap: 14px; }
.search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.search-row input { background: var(--surface); padding: 10px 12px; }
.search-options { margin-bottom: 6px; }
.advanced-search-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; padding: 10px 0 20px; border-bottom: 1px solid var(--border); }
.advanced-search-grid > label:not(.search-checkbox) { display: grid; gap: 7px; font-size: 12px; color: var(--muted); }
.search-results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 36px; }
.search-results-section { min-width: 0; }
.search-results-section h2 { padding: 10px 0; font-size: 15px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.search-result-item { display: grid; justify-content: stretch; text-align: left; width: 100%; padding: 12px 8px; background: transparent; border-bottom: 1px solid var(--border); border-radius: 0; gap: 4px; font-weight: 400; }
.search-result-item strong { font-size: 14px; font-weight: 500; }
.search-result-item > span { font-size: 11px; color: var(--muted); }
.search-result-item p { font-size: 13px; line-height: 1.7; margin: 2px 0 0; }
.translation-compare-list { display: grid; gap: 16px; }
.translation-compare-card { display: grid; gap: 10px; border-bottom: 1px solid var(--border); padding: 16px 0 24px; }
.translation-compare-card h2 { font-size: 18px; }
.translation-compare-card .eyebrow { font-size: 11px; }
.translation-compare-card button { justify-self: start; font-size: 12px; }
.translation-compare-text { font-size: 17px; line-height: 1.8; }
.translation-compare-card.is-current { border-left: 2px solid var(--accent); padding-left: 16px; }
.prayer-stats { display: flex; gap: 28px; padding: 0 0 20px; border-bottom: 1px solid var(--border); }
.prayer-stats article { display: flex; align-items: center; gap: 8px; }
.prayer-stats strong { font-size: 20px; font-weight: 500; }
.prayer-stats span { color: var(--muted); font-size: 12px; }
.prayer-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; }
.prayer-list-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 4px; border-bottom: 1px solid var(--border); }
.prayer-list-item > button:first-child { display: grid; gap: 4px; justify-content: stretch; text-align: left; background: transparent; min-width: 0; }
.prayer-list-item strong { font-size: 13px; font-weight: 500; }
.prayer-list-item span { font-size: 11px; color: var(--muted); }
.prayer-list-item > button:last-child { font-size: 10px; min-height: 24px; padding: 3px 6px; }
.prayer-editor, .prayer-answer-fields { display: grid; gap: 18px; align-content: start; min-width: 0; }
.prayer-editor > label:not(.prayer-answer-toggle), .prayer-answer-fields > label { display: grid; gap: 8px; color: var(--muted); font-size: 12px; }
.prayer-editor > label:first-child input { font-size: 24px; font-weight: 600; border: 0; background: transparent; padding: 0; }
.prayer-editor > label:first-child input:focus { box-shadow: none; }
.prayer-answer-fields { border-top: 1px solid var(--border); padding-top: 18px; }
.prayer-answer-toggle { display: flex; }
.prayer-editor .muted { font-size: 11px; margin: 0; }
.database-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; border-bottom: 1px solid var(--border); }
.database-toolbar .auth-tabs { flex: 1; border: 0; }
.database-filter { display: flex; align-items: center; gap: 5px; color: var(--accent); }
.database-filter select { width: auto; max-width: 150px; border-color: transparent; background: transparent; color: inherit; font-size: 12px; padding: 5px 0; }
.database-toolbar > button { min-height: 27px; font-size: 12px; margin-bottom: 4px; }
.database-table-scroll { overflow-x: auto; min-width: 0; }
.database-table { width: 100%; min-width: 580px; border-collapse: collapse; text-align: left; font-size: 13px; }
.database-table th { color: var(--muted); font-weight: 400; font-size: 12px; white-space: nowrap; }
.database-table th, .database-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.database-table th:last-child, .database-table td:last-child { border-right: 0; }
.database-table td:first-child { width: 45%; }
.database-table tbody tr:hover { background: var(--soft); }
.database-page-link { justify-content: flex-start; text-align: left; font-weight: 500; padding: 0; min-height: 22px; background: transparent; }
.database-page-link svg { color: var(--muted); }
.prayer-status { font-size: 11px; color: var(--selected-text); background: var(--selected); border-radius: 3px; padding: 2px 6px; white-space: nowrap; }
.prayer-status.is-answered { background: var(--green-bg); color: var(--green); }
.sheet-overlay { position: fixed; inset: 0; z-index: 130; display: flex; justify-content: flex-end; background: #00000030; }
.document-sheet { width: min(650px, 100%); height: 100dvh; color: var(--text); background: var(--bg); overflow-y: auto; overscroll-behavior: contain; box-shadow: -4px 0 24px #00000012; }
.sheet-topbar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; font-size: 12px; color: var(--muted); background: var(--bg); }
.sheet-body { padding: 36px 40px; }

/* Administration and tickets */
.admin-page { max-width: 1600px; }
.admin-grid, .admin-list, .translation-form, .reference-admin-stack, .reference-list, .highlight-color-admin, .highlight-color-list { display: grid; gap: 12px; min-width: 0; }
.admin-page .settings-section { max-width: none; padding-top: 4px; }
.admin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.admin-row > div:first-child { flex: 1 0 160px; min-width: 0; }
.admin-row strong, .admin-row span { display: block; font-size: 13px; overflow-wrap: anywhere; }
.admin-row span { color: var(--muted); font-size: 11px; }
.admin-row > input { width: 130px; }
.admin-row > select { width: 150px; }
.admin-row button { font-size: 12px; }
.password-reset { display: flex; flex-wrap: wrap; gap: 6px; }
.password-reset input { width: 135px; }
.group-create-row { display: flex; gap: 8px; flex-wrap: wrap; }
.group-create-row input { flex: 1 0 160px; }
.group-row { padding: 16px 0; border-bottom: 1px solid var(--border); display: grid; gap: 14px; }
.group-row-head { display: flex; gap: 8px; }
.group-row-head input { flex: 1; }
.permission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px 14px; }
.permission-item { padding: 6px 5px; font-size: 12px; }
.is-disabled { opacity: .5; }
.translation-row { border-bottom: 1px solid var(--border); padding: 12px 0 22px; display: grid; gap: 16px; min-width: 0; }
.translation-row-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; }
.translation-row-head strong, .translation-row-head span { display: block; }
.translation-row-head span { color: var(--muted); font-size: 11px; }
.translation-access-fieldset { margin: 0; border: 1px solid var(--border); border-radius: 4px; padding: 10px; min-width: 0; }
.translation-access-fieldset legend { font-size: 12px; color: var(--muted); padding: 0 5px; }
.json-editor { min-height: 260px; font-family: ui-monospace, monospace; font-size: 12px; }
.reference-admin-form { display: grid; gap: 12px; padding: 16px 0; border-top: 1px solid var(--border); }
.reference-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.reference-list > button, .reference-list-row { display: flex; justify-content: space-between; gap: 8px; padding: 9px; background: var(--surface); border-bottom: 1px solid var(--border); border-radius: 0; text-align: left; }
.reference-list > button span, .reference-list-row span { font-size: 12px; color: var(--muted); }
.reference-list-row { flex-wrap: wrap; }
.validation-errors { padding: 12px; background: var(--red-bg); color: var(--red); border-radius: 4px; font-size: 12px; }
.validation-errors p { margin: 5px 0; }
.highlight-color-form, .highlight-color-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--border); }
.highlight-color-form > input:not([type='color']), .highlight-color-row > input:not([type='color']) { flex: 1 0 120px; width: 120px; }
.highlight-color-preview { width: 24px; height: 24px; border-radius: 3px; background: var(--highlight-color); border: 1px solid #00000010; }
.highlight-color-code { width: 110px; display: grid; gap: 2px; }
.highlight-color-code strong { font-size: 12px; font-weight: 500; }
.highlight-color-code span { font-size: 10px; color: var(--muted); }
.ticket-create-form, .ticket-category-list { display: grid; gap: 12px; }
.ticket-form-grid, .ticket-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ticket-create-form button[type='submit'] { justify-self: start; }
.ticket-category-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-bottom: 1px solid var(--border); padding: 7px 0; }
.ticket-category-row > input { flex: 1 0 160px; }
.ticket-category-row > span { color: var(--muted); font-size: 11px; }
.report-row { display: grid; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.report-row p { margin: 0; font-size: 14px; }
.report-row span { font-size: 12px; color: var(--muted); }
.report-status { width: fit-content; padding: 2px 7px; border-radius: 4px; font-size: 11px; }
.report-row .report-status-new, .report-status-new { color: #245e9c; background: #dcecf9; }
.report-row .report-status-progress, .report-status-progress { color: #996020; background: #f9e8d3; }
.report-row .report-status-done, .report-status-done { color: #386f50; background: #dcece1; }
.ticket-messages { display: grid; gap: 8px; }
.ticket-message { display: grid; gap: 5px; border-left: 2px solid var(--border); padding: 5px 12px; }
.ticket-message span { color: var(--text); font-size: 13px; }
.ticket-reply-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }

/* Authentication */
.auth-shell { min-height: 100dvh; display: grid; align-content: center; justify-items: center; padding: 40px 24px; color: var(--text); background: var(--bg); }
.workspace-main > .auth-shell { min-height: calc(100dvh - 46px); }
.auth-panel { width: min(360px, 100%); background: transparent; }
.auth-panel h1 { font-size: 30px; margin-top: 15px; }
.auth-panel .page-icon { margin-bottom: 24px; }
.auth-panel .eyebrow { font-size: 14px; color: var(--text); }
.auth-panel .auth-tabs { margin-top: 20px; }
.account-form { display: grid; gap: 16px; margin-top: 24px; }
.account-form label { display: grid; gap: 6px; font-size: 12px; }
.account-form input { background: var(--surface); }
.auth-back { display: flex; align-items: center; gap: 6px; width: fit-content; margin-top: 22px; color: var(--muted); font-size: 12px; text-decoration: none; }
.loading-panel { text-align: center; }
.loading-panel .page-icon { justify-content: center; width: auto; }
.loading-panel h1 { font-size: 18px; }
.loading-spinner { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Quick navigation */
.command-overlay { position: fixed; inset: 0; z-index: 150; background: #0000003b; display: flex; justify-content: center; align-items: flex-start; padding: 15vh 20px 20px; }
.command-dialog { width: min(640px, 100%); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 18px 70px #00000040; overflow: hidden; }
.command-input { display: flex; align-items: center; padding: 12px 15px; gap: 12px; border-bottom: 1px solid var(--border); color: var(--muted); }
.command-input input { border: 0; background: transparent; padding: 5px 0; font-size: 17px; box-shadow: none; }
.command-results { max-height: 52dvh; overflow: auto; padding: 8px; }
.command-result { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; background: transparent; padding: 8px 12px; text-align: left; }
.command-result > span { display: grid; gap: 1px; flex: 1; }
.command-result strong { font-size: 14px; font-weight: 400; }
.command-result small { color: var(--muted); font-size: 11px; }
.command-result.is-current { background: var(--hover); }
.command-footer { display: flex; align-items: center; gap: 5px; padding: 10px 14px; background: var(--soft); color: var(--muted); border-top: 1px solid var(--border); font-size: 10px; }
.command-footer > span { border: 1px solid var(--border); border-radius: 3px; padding: 0 3px; }
.command-footer > span:not(:first-child) { margin-left: 10px; }
.empty-state { padding: 25px 16px; color: var(--muted); font-size: 13px; text-align: center; }

/* Theme palettes */
.theme-dark { color-scheme: dark; --bg: #191919; --sidebar: #202020; --surface: #252525; --soft: #222; --hover: #303030; --text: #d4d4d4; --muted: #9b9b9b; --faint: #777; --border: #323232; --accent: #529cca; --selected: #203747; --selected-text: #7dbce8; --red: #eb8077; --red-bg: #442c2b; --green: #8bb99e; --green-bg: #26382d; --shadow: 0 8px 24px #00000060, 0 0 0 1px #ffffff0a; }
.theme-forest { --bg: #fcfdfb; --sidebar: #f1f4ef; --surface: #fcfdfb; --soft: #f1f4ef; --hover: #e5ece2; --text: #303d32; --muted: #778472; --faint: #a3ac9e; --border: #e1e7de; --accent: #527e5b; --selected: #e8f0e5; --selected-text: #416c4a; }
.theme-sepia { --bg: #fbf8f1; --sidebar: #f3eee4; --surface: #fbf8f1; --soft: #f3eee4; --hover: #eae3d5; --text: #443f35; --muted: #8a8071; --faint: #b4a996; --border: #e9e1d3; --accent: #9a754b; --selected: #f1e7d5; --selected-text: #83603c; }
.theme-contrast { --bg: #fff; --sidebar: #f7f7f7; --surface: #fff; --soft: #eee; --hover: #ddd; --text: #000; --muted: #333; --faint: #555; --border: #777; --accent: #005cc5; --selected: #d4e7ff; --selected-text: #003a80; --shadow: 0 0 0 2px #000; }
.font-serif .verse-text, .font-serif .markdown-preview, .font-serif .markdown-editor textarea, .font-options .font-serif strong { font-family: Georgia, 'Times New Roman', serif; }
.font-serif .page-heading h1, .font-serif .outline-title-input { font-family: Georgia, 'Times New Roman', serif; }
.font-mono .verse-text, .font-mono .markdown-preview, .font-mono .markdown-editor textarea, .font-options .font-mono strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.font-mono .page-heading h1, .font-mono .outline-title-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.small-text .verse-text { font-size: 14px; }
.small-text .markdown-preview, .small-text .markdown-editor textarea { font-size: 12px; }
.full-width .reader, .full-width .profile-page { max-width: none; padding-left: 32px; padding-right: 32px; }
.theme-dark .mention-tag { color: #cab4e9; background: #3c304d; }
.theme-dark .mention-tag-sermon { color: #e3c18b; background: #493a26; }
.theme-dark .mention-tag-study { color: #9cc3e5; background: #293d50; }
.theme-dark .mention-tag-global { color: #9bc4a8; background: #2c4233; }
.theme-dark .report-row .report-status-new { background: #293f57; color: #a6c9f0; }
.theme-dark .report-row .report-status-progress { background: #503d26; color: #e7bc80; }
.theme-dark .report-row .report-status-done { background: #2c4434; color: #a0cfb0; }

/* Responsive and print */
@media (min-width: 1600px) { .reader, .profile-page { padding-left: 96px; padding-right: 96px; } }
@media (max-width: 1200px) {
  .reader, .profile-page { padding: 36px 36px 70px; }
  .content-grid { grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; }
  .outlines-grid { grid-template-columns: 190px minmax(0, 1fr); gap: 24px; }
  .prayer-grid { grid-template-columns: 250px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 900px) {
  .profile-page.outlines-index, .profile-page.outline-document, .profile-page.outline-detail-page { padding: 48px 36px 80px; }
  .app-shell, .app-shell.sidebar-hidden { grid-template-columns: minmax(0, 1fr); }
  .workspace-main { grid-column: 1; }
  .sidebar { display: none; position: fixed; left: 0; top: 0; bottom: 0; z-index: 120; width: 260px; }
  .sidebar.is-open { display: flex; box-shadow: var(--shadow); }
  .sidebar-scrim { position: fixed; display: block; inset: 0; width: 100%; height: 100%; border-radius: 0; background: #00000040; z-index: 110; }
  .workspace-topbar { padding: 0 12px; }
  .reader, .profile-page { padding: 32px 30px 70px; }
  .content-grid { grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; }
  .breadcrumbs { gap: 5px; }
  .breadcrumbs > button { max-width: 140px; }
}
@media (max-width: 680px) {
  .rich-text-host { padding-left: 28px; }
  .profile-page.outlines-index, .profile-page.outline-document, .profile-page.outline-detail-page { padding: 32px 22px 60px; }
  .outline-document-title .outline-title-input { font-size: 32px; }
  .outline-page-link { font-size: 15px; }
  .outline-property { grid-template-columns: 90px minmax(0, 1fr); gap: 8px; }
  .outline-property.custom-field-row { grid-template-columns: 90px minmax(0, 1fr) 28px; }
  .outline-document-actions .note-actions { gap: 4px; }
  .outline-document-actions button, .outline-document-actions a { font-size: 11px; padding: 4px 6px; }
  .reader, .profile-page, .full-width .reader, .full-width .profile-page { padding: 28px 20px 60px; }
  h1 { font-size: 32px; }
  .page-icon { height: 52px; margin-bottom: 8px; }
  .content-grid, .outlines-grid, .prayer-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .notes-panel { position: static; max-height: min(65dvh, 580px); border-top: 1px solid var(--border); padding-top: 16px; }
  .history-controls { display: none; }
  .breadcrumbs { font-size: 11px; }
  .breadcrumbs > button { max-width: 90px; font-size: 12px; white-space: nowrap; }
  .topbar-path { gap: 1px; }
  .topbar-actions { gap: 1px; }
  .top-auth-actions { gap: 2px; margin: 0 3px 0 0; }
  .top-auth-actions button { font-size: 11px; padding: 3px 6px; }
  .topbar-actions > .icon-button:first-of-type { display: none; }
  .workspace-topbar:has(.top-auth-actions) .breadcrumbs > span { display: none; }
  .reader-tools { gap: 8px; }
  .reader-book-select { flex: 1; }
  .reader-book-select select { max-width: 190px; }
  .reader-layout-tabs { order: 2; }
  .strong-toggle { margin: 0 0 0 auto; }
  .chapter-tabs { gap: 2px; padding: 9px 0; }
  .chapter-tabs button { width: 28px; height: 28px; }
  .verse-text { font-size: 16px; line-height: 1.85; }
  .verse-button { gap: 5px; grid-template-columns: 20px minmax(0, 1fr); padding: 6px 0; }
  .verse-number { width: 20px; }
  .verse-actions { flex-direction: column; gap: 1px; }
  .note-panel-popup, .strong-panel-popup { top: 64px; right: 12px; width: calc(100vw - 24px); max-height: calc(100dvh - 88px); }
  .note-panel-inline, .strong-panel-inline { margin-left: 0; }
  .outline-list, .prayer-list { position: static; max-height: 280px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
  .outline-toolbar { grid-template-columns: minmax(90px, 1fr) minmax(80px, 1fr) auto; }
  .custom-field-row { grid-template-columns: 100px minmax(0, 1fr) 28px; }
  .outline-title-input { font-size: 26px; }
  .advanced-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .prayer-stats { gap: 14px; flex-wrap: wrap; }
  .prayer-stats article { gap: 5px; }
  .prayer-stats span { font-size: 10px; }
  .prayer-stats strong { font-size: 18px; }
  .admin-tabs { gap: 2px 12px; }
  .admin-tabs button { font-size: 12px; }
  .admin-row > input, .admin-row > select { width: 100%; }
  .password-reset { width: 100%; }
  .password-reset input { flex: 1; width: 100px; }
  .permission-grid { grid-template-columns: minmax(0, 1fr); }
  .diff-grid { grid-template-columns: minmax(0, 1fr); }
  .display-mode-list, .theme-list { gap: 6px; }
  .theme-option { padding: 7px; }
  .command-overlay { padding: 10vh 12px 12px; }
  .command-input input { font-size: 15px; }
  .auth-shell { padding: 32px 24px; }
  .sheet-body { padding: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media print {
  .app-shell, .app-shell.sidebar-hidden { display: block; }
  .sidebar, .workspace-topbar, .notes-panel, .command-overlay, .context-menu, .highlight-picker, .impersonation-banner { display: none !important; }
  .reader, .profile-page { max-width: none; padding: 0; min-height: 0; }
  .content-grid { display: block; }
  .verse-actions, .chapter-tabs, .reader-layout-tabs, .strong-toggle, .reader-book-select, .outline-list, .outline-toolbar, .note-actions { display: none; }
  .verse-row { break-inside: avoid; }
  .theme-dark { --bg: #fff; --text: #000; --muted: #555; --border: #ddd; }
}