/* Direct editing shares the reader's typography and neutral paper. */
.editor-mode-control select { max-width: 155px; padding: 7px 10px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 9px; font: 600 12px var(--sans); }
.direct-editor { width: calc(100% - 32px); margin: 16px auto; height: calc(100dvh - 112px); overflow: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 35px #00000006; }
.direct-prose { outline: none; padding: 34px clamp(20px,4vw,64px) 120px; min-height: 100%; font-size: var(--reader-size); white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; caret-color: var(--accent-strong); }
.direct-prose > :first-child { margin-top: 0; }
.direct-prose p { min-height: 1.6em; }
.direct-prose img { max-width: 100%; max-height: 65vh; object-fit: contain; vertical-align: middle; cursor: zoom-in; }
.direct-image { display: inline-block; max-width: 100%; }
.direct-prose pre { white-space: pre-wrap; }
.direct-prose table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.direct-prose td, .direct-prose th { position: relative; min-width: 60px; vertical-align: top; }
.direct-prose td p, .direct-prose th p { margin: 0; }
.direct-prose .selectedCell::after { content: ''; position: absolute; inset: 0; background: #5687ff25; pointer-events: none; }
.ProseMirror-selectednode { outline: 2px solid var(--accent); border-radius: 4px; }
.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-gapcursor { display: none; }
.direct-protected { padding: 12px 16px; border: 1px dashed var(--line); border-radius: 10px; margin: 1em 0; color: var(--muted); font: 12px/1.5 var(--sans); }
.direct-protected pre { margin: 8px 0; max-height: 180px; overflow: auto; }
.direct-protected button, .direct-table-tools button, .direct-formula-dialog button { color: var(--ink); background: var(--paper); border: 1px solid var(--line); padding: 7px 10px; border-radius: 7px; cursor: pointer; font: 600 12px var(--sans); }
.direct-table-tools { position: fixed; z-index: 40; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 9px; width: max-content; max-width: calc(100vw - 20px); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 5px 25px #0002; }
.direct-formula-dialog { width: min(560px,90vw); border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: var(--paper); padding: 24px; }
.direct-formula-dialog::backdrop { background: #0005; }
.direct-formula-dialog label { display: block; font: 600 16px var(--sans); }
.direct-formula-dialog textarea, .direct-formula-dialog input { display: block; box-sizing: border-box; width: 100%; margin: 16px 0; padding: 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 7px; }
.direct-formula-dialog textarea { min-height: 140px; }
/* KaTeX uses positioned nested fraction boxes. Keep its own metrics and enough
   block padding rather than applying the reader's prose line height to them. */
.prose .katex { text-indent: 0; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.prose .katex-display { padding: 14px 4px; margin: 1em 0; }
.direct-math { max-width: 100%; cursor: text; }
div.direct-math { overflow: auto; padding-block: 6px; }
span.direct-math { display: inline-block; vertical-align: baseline; }
.direct-editor[hidden], .direct-table-tools[hidden], .editor-mode-control[hidden] { display: none; }
body.direct-editing #paged-navigation { display: none; }
@media (max-width:820px) { .direct-editor { width: calc(100% - 16px); height: calc(100dvh - 145px); } .direct-prose { padding: 24px 20px 120px; } }
@media print { .direct-editor, .direct-table-tools, .editor-mode-control { display: none !important; } }
.direct-task { list-style: none; display: flex; align-items: baseline; gap: 8px; }
.direct-task > div { flex: 1; min-width: 0; }
.direct-task > input { accent-color: var(--accent-strong); }
.ProseMirror-gapcursor { position: absolute; pointer-events: none; }
.ProseMirror-gapcursor::after { content: ''; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid currentColor; animation: direct-cursor-blink 1.1s steps(2,start) infinite; }
.ProseMirror-focused .ProseMirror-gapcursor { display: block; }
.direct-prose { position: relative; }
@keyframes direct-cursor-blink { to { visibility: hidden; } }
/* Optional Markdown source; direct editing is the default. */
.editor-mode-control { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.editor-mode-control button { border: 0; border-radius: 7px; padding: 5px 9px; font: 650 12px var(--sans); color: var(--muted); background: transparent; cursor: pointer; transition: background .15s,color .15s; }
.editor-mode-control button[aria-pressed=true] { background: var(--accent-strong); color: white; box-shadow: 0 2px 5px #0001; }
.editor-mode-control button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#editor-insert-menu { width: min(420px,calc(100vw - 16px)); padding: 12px; overflow-y: auto; }
.format-compact-control { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 3px 9px; font: 550 12px var(--sans); color: var(--muted); }
#editor-insert-menu .editor-insert-group > div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
#editor-insert-menu [data-markdown-command] { min-width: 0; height: auto; display: flex; align-items: center; gap: 9px; padding: 10px 8px; text-align: left; white-space: normal; }
.format-glyph { flex: 0 0 28px; font-size: 15px; text-align: center; color: var(--accent-strong); }
.format-description { display: grid; gap: 4px; }
.format-description strong { font: 650 13px/1.3 var(--sans); color: var(--ink); }
.format-description small { font: 400 11px/1.5 var(--sans); color: var(--muted); }
#editor-insert-menu.compact-formatting { width: 270px; }
#editor-insert-menu.compact-formatting .format-description { display: none; }
#editor-insert-menu.compact-formatting .editor-insert-group > div { display: flex; flex-wrap: wrap; }
#editor-insert-menu.compact-formatting [data-markdown-command] { padding: 7px; }
.image-picker-status { display: inline-flex; align-items: center; gap: 6px; font: 12px var(--sans); color: var(--muted); }
.image-picker-status::before { content: ''; width: 10px; height: 10px; border: 2px solid var(--line); border-top-color: var(--accent-strong); border-radius: 50%; animation: luma-scan-spin .9s linear infinite; }
.image-picker-status[hidden] { display: none; }
/* Explicitly match display formulas in reader and editor. Inline formulas keep
   the native KaTeX baseline. Reading-mode columns must not left-align a block. */
.prose .katex-display, .prose .katex-display > .katex { display: block; width: 100%; text-align: center; }
.prose .katex-display > .katex > .katex-html { display: inline-block; text-align: initial; }
html { --syntax-keyword: #7b3294; --syntax-string: #287641; --syntax-number: #a25816; --syntax-comment: #677384; --syntax-function: #1d61b5; --code-selection: #a7c7ef77; }
html.dark { --syntax-keyword: #d4a2f4; --syntax-string: #a1d69c; --syntax-number: #efbc8a; --syntax-comment: #9aa7b8; --syntax-function: #96c9ff; --code-selection: #44668c88; }
.code-document { height: 100%; min-height: 400px; display: grid; grid-template-rows: auto minmax(0,1fr); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.code-document-header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font: 600 12px var(--sans); border-bottom: 1px solid var(--line); }
.code-document-header > span:nth-child(2) { color: var(--muted); font-weight: 400; }
.code-document-header button { margin-left: auto; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--paper); cursor: pointer; }
.code-document-header button[aria-pressed=true] { background: var(--code); }
#code-editor { min-height: 0; overflow: hidden; }
body[data-document-kind=code] #content { height: calc(100dvh - 108px); min-height: 350px; padding: 12px; columns: auto; }
.code-format-option { display: flex; align-items: center; gap: 6px; padding: 5px 10px; font: 12px var(--sans); }
@media (max-width:560px) { #editor-insert-menu .editor-insert-group > div { grid-template-columns: 1fr; } body[data-document-kind=code] #content { height: calc(100dvh - 160px); } .image-picker-status { max-width: 130px; font-size: 10px; } }

#code-edit-control input { position: static; width: 13px; height: 13px; margin: 0; clip-path: none; accent-color: var(--accent-strong); }

.editor-mode-control { padding: 0; border: 0; background: transparent; }
#show-markdown { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); background: var(--paper); }
#show-markdown[aria-pressed=true] { background: var(--accent-strong); color: white; }