/* ══════════════════════════════════════════════════════════════
EDITOR TOOLBAR (segmented control + word count)
══════════════════════════════════════════════════════════════ */
.editor-toolbar {
display: flex; align-items: center;
padding: 6px 16px;
background: var(--bg-surface); border-bottom: 1px solid var(--border);
flex-shrink: 0; gap: 12px;
}
.md-segmented {
display: flex; align-items: center;
background: var(--bg-elevated); border: 1px solid var(--border);
border-radius: var(--radius-md); padding: 3px; gap: 2px;
}
.md-seg-btn {
padding: 5px 13px; border-radius: var(--radius-sm);
font-size: 12px; font-weight: 500;
color: var(--text-secondary);
transition: background var(--transition), color var(--transition);
white-space: nowrap; display: flex; align-items: center; gap: 5px;
}
.md-seg-btn svg { width: 12px; height: 12px; }
.md-seg-btn:hover { color: var(--text-primary); }
.md-seg-btn.active {
background: var(--bg-surface); color: var(--accent);
box-shadow: var(--shadow-sm);
}
/* ══════════════════════════════════════════════════════════════
EDITOR AREA
══════════════════════════════════════════════════════════════ */
.editor-area { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
/* Floating card editor — fills height, centered with all-around margins.
overflow:hidden clips textarea/preview to the card border-radius.
.remote-notice and the add-comment FAB are siblings in .editor-area
instead of children here, specifically so overflow:hidden doesn't clip
them. position:relative is only for .comment-margin-layer, a child that
deliberately DOES want to be clipped to the card (a comment scrolled out
of view should disappear, not float outside the card). */
.editor-wrap {
position: relative;
/* Flex child: fill remaining height inside .editor-area */
flex: 1;
min-height: 0;
/* Floating card look */
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
/* Grid: single-column by default (write or preview mode).
.mode-split overrides to two columns below.
Row 1 = formatting toolbar (auto height); Row 2 = editor/preview (fills rest). */
display: grid;
/* minmax(0, 1fr), not a bare 1fr — a bare fr track's automatic minimum
is its content's min-content size, so an unbreakable long line (a URL,
a fenced code block with no wrap points) could otherwise force this
whole card wider than its intended measure before overflow:hidden ever
gets a chance to clip it. minmax(0, ...) lets the track (and this grid
item's own box) shrink to the specified width regardless, so it's
always .note-preview/.note-live's own overflow-x:auto that handles
long content, never the card growing around it. */
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
gap: 0;
/* Comfortable writing width on desktop. Split mode overrides below. */
width: min(100% - 2rem, 900px);
margin-inline: auto;
margin-block: 1rem;
}
/* Split mode: two equal columns, wider card to give each pane room. */
.editor-wrap.mode-split {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
width: min(100% - 2rem, 1400px);
}
#note-editor {
/* Fill the grid cell fully — grid-template-rows handles height */
width: 100%; height: 100%; min-height: 0;
padding: 1.25rem 1rem;
background: var(--bg-surface); border: none; resize: none; overflow-y: auto;
color: var(--text-primary); font-size: 15px; line-height: 1.7;
letter-spacing: 0.01em;
font-family: var(--font-ui); outline: none;
/* Explicit rather than left to the browser default (which tracks `color`
anyway) — removes any ambiguity across the 7 themes/OS dark-mode heuristics. */
caret-color: var(--text-primary);
transition: font-family var(--transition), box-shadow var(--transition);
}
#note-editor.monospace { font-family: var(--font-mono); font-size: 14px; }
#note-editor.remote-typing { box-shadow: inset 0 0 0 2px rgba(245,166,35,0.15); }
#note-editor::placeholder { color: var(--text-muted); }
/* Focus mode — dims everything except a band around the caret. --focus-y/
--focus-band are set in ui.js from the caret's actual measured pixel
position; the defaults here only apply before the first measurement. */
#note-editor.focus-mode {
--focus-y: 50%;
--focus-band: 48px;
-webkit-mask-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.35) 0,
rgba(0, 0, 0, 0.35) calc(var(--focus-y) - var(--focus-band)),
rgba(0, 0, 0, 1) calc(var(--focus-y) - var(--focus-band) / 2),
rgba(0, 0, 0, 1) calc(var(--focus-y) + var(--focus-band) / 2),
rgba(0, 0, 0, 0.35) calc(var(--focus-y) + var(--focus-band)),
rgba(0, 0, 0, 0.35) 100%
);
mask-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.35) 0,
rgba(0, 0, 0, 0.35) calc(var(--focus-y) - var(--focus-band)),
rgba(0, 0, 0, 1) calc(var(--focus-y) - var(--focus-band) / 2),
rgba(0, 0, 0, 1) calc(var(--focus-y) + var(--focus-band) / 2),
rgba(0, 0, 0, 0.35) calc(var(--focus-y) + var(--focus-band)),
rgba(0, 0, 0, 0.35) 100%
);
}
@media (min-width: 768px) {
/* Generous padding; max() formula keeps readable text ≤ 800px wide on large panes */
#note-editor { padding: 2rem max(5%, calc((100% - 800px) / 2)); font-size: 16px; }
}
/* Typewriter mode — top/bottom padding equal to half the editor's own
viewport height, so the caret's line can always be scrolled to center,
even on the first/last line. --typewriter-pad is set in ui.js from the
editor's actual measured clientHeight. */
#note-editor.typewriter-mode {
padding-top: var(--typewriter-pad, 40vh);
padding-bottom: var(--typewriter-pad, 40vh);
}
/* Split mode: 1px border divider between editor and preview panes.
The old .split-mode selector is kept as a fallback alias. */
.editor-wrap.mode-split #note-editor,
.editor-wrap.split-mode #note-editor {
border-right: 1px solid var(--border);
}
/* Markdown preview */
.note-preview {
/* Fill the grid cell fully — independent scroll */
width: 100%; height: 100%; min-height: 0;
padding: 1.25rem 1rem;
background: var(--bg-surface); color: var(--text-primary);
font-size: 15px; line-height: 1.7; letter-spacing: 0.01em;
font-family: var(--font-ui); overflow-y: auto;
/* Deliberately no blanket scroll-behavior:smooth here — it would animate
*every* scrollTop assignment, including the Split-mode proportional
sync handlers' (ui/editor.js's _wireScrollSync), whose intermediate
animation-frame scroll events fire after the handler's re-entrancy lock
has already cleared and get fed back into the opposite pane as if they
were user scrolling — reintroducing the exact jitter the sync handlers
are meant to prevent. TOC/footnote anchor clicks get their smoothness
explicitly instead, via a dedicated click handler (see
_wireInternalAnchorScroll in ui/editor.js) that calls
scrollIntoView({behavior:'smooth'}) only for that one interaction. */
}
.note-preview.monospace { font-family: var(--font-mono); font-size: 14px; }
.note-preview.hidden { display: none; }
@media (min-width: 768px) {
/* Generous padding; max() keeps readable text ≤ 800px wide on large panes.
font-size matches #note-editor's and .note-live's own 768px bump so
Write/Live/Preview stay visually identical at this breakpoint. */
.note-preview { padding: 2rem max(5%, calc((100% - 800px) / 2)); font-size: 16px; }
}
/* Typora-style editable live-preview surface (CodeMirror 6 mounts inside).
Same grid-cell fill + padding scheme as .note-preview so switching between
the rendered pane and the live pane is visually seamless. */
.note-live {
width: 100%; height: 100%; min-height: 0;
padding: 1.25rem 1rem;
background: var(--bg-surface); color: var(--text-primary);
font-size: 15px; line-height: 1.7; letter-spacing: 0.01em; font-family: var(--font-ui);
overflow: hidden; /* CM6's own .cm-scroller scrolls */
}
.note-live.hidden { display: none; }
.note-live .cm-editor { height: 100%; }
/* No blanket scroll-behavior:smooth here either, for the same reason as
.note-preview above — this scroller is also driven by the Split-mode
sync handlers (live-editor.js's wireScrollSync). The [TOC] widget's own
click handler opts into smooth scrolling explicitly and only for itself
(see _scrollPosIntoView's `smooth` option). */
.note-live .cm-md-inlinecode {
font-family: var(--font-mono); font-size: 0.9em;
background: var(--bg-elevated); border-radius: 4px; padding: 1px 3px;
}
.note-live .cm-md-highlight {
background: color-mix(in srgb, var(--yellow) 35%, transparent);
border-radius: 3px;
}
.note-live .cm-md-checklist-progress {
display: inline-block; font-size: 11.5px; font-weight: 600;
color: var(--text-secondary); background: var(--bg-elevated);
border-radius: 100px; padding: 2px 9px; margin: 0.5em 0 0.2em;
}
.note-live .cm-md-blockquote {
border-left: 3px solid var(--border);
padding-left: 0.8em;
color: var(--text-secondary);
}
/* Nesting depth (> > >) reads as increasing indent, not a flat single
border — a line inside N nested blockquotes carries every depth's class
(see the _seamless plugin's Blockquote handling), and since these are
declared in increasing order, the deepest one wins the cascade. */
.note-live .cm-md-blockquote-2 { padding-left: 1.6em; }
.note-live .cm-md-blockquote-3 { padding-left: 2.4em; }
.note-live .cm-md-blockquote-4 { padding-left: 3.2em; }
/* Fenced code block — background box, applied per-line since this surface
styles lines rather than wrapping a
around the block (the lines
stay individually editable). --bg-elevated, not --bg-surface: .note-live
itself is already --bg-surface (see its own rule above), and a code
block painted the same colour as the surface it sits on has no visible
background at all — it used to read as a bare top/bottom rule floating
over plain text, not a box. --bg-elevated is the same "one step up from
the surrounding surface" relationship .note-preview pre has against the
page's own --bg-base. No left/right border on purpose (see the
blockquote-combination rules below) — a genuinely contrasting background
band plus top/bottom caps on the first/last line reads just as clearly as
a boxed border, without a border-left to fight over when the block is
nested inside a blockquote/alert. */
.note-live .cm-md-codeblock {
background: var(--bg-elevated);
padding-left: 16px; padding-right: 16px;
font-family: var(--font-mono); font-size: 0.9em;
}
.note-live .cm-md-codeblock-first {
border-top: 1px solid var(--border);
border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md);
padding-top: 10px;
}
.note-live .cm-md-codeblock-last {
border-bottom: 1px solid var(--border);
border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md);
padding-bottom: 10px;
}
/* A fenced code block nested inside a blockquote (or GFM alert) carries
both the quote's own line class and the codeblock's — since both are
single-class rules, plain cascade order would let whichever is declared
last simply clobber the other's padding-left/border-left instead of the
two combining (confirmed: this is what broke it before this fix). These
higher-specificity combined selectors make the codeblock's own indent
additive on top of the quote's, so the block still reads as "inside" the
quote (its colored left border) while keeping its own background band. */
.note-live .cm-md-blockquote.cm-md-codeblock { padding-left: calc(0.8em + 16px); }
.note-live .cm-md-blockquote-2.cm-md-codeblock { padding-left: calc(1.6em + 16px); }
.note-live .cm-md-blockquote-3.cm-md-codeblock { padding-left: calc(2.4em + 16px); }
.note-live .cm-md-blockquote-4.cm-md-codeblock { padding-left: calc(3.2em + 16px); }
.note-live .cm-md-alert.cm-md-codeblock { padding-left: calc(0.8em + 16px); }
/* Opt-in code-block line numbers — each fenced-code line is already its own
real .cm-line element here (unlike the static preview, which needs a
separate gutter overlay to stay Prism-safe — see styles/editor.css's
.code-line-numbers-gutter), so a plain inline ::before counter is enough:
no absolute positioning, it just flows before the line's own text. */
body.code-line-numbers .note-live .cm-md-codeblock-first { counter-reset: codeline; }
body.code-line-numbers .note-live .cm-md-codeblock { padding-left: 0; }
/* Only content lines get a visible number — the fence-delimiter lines
(first/last) keep the box styling but stay un-numbered (see
cm-md-codeblock-content in live-editor.js). */
body.code-line-numbers .note-live .cm-md-codeblock-content::before {
counter-increment: codeline; content: counter(codeline);
display: inline-block; width: 2em; padding-left: 16px; margin-right: 12px;
text-align: right; color: var(--text-muted); user-select: none;
}
.note-live .cm-md-bullet { color: var(--text-secondary); margin-right: 0.35em; }
.note-live .cm-md-checkbox {
accent-color: var(--accent);
margin-right: 0.45em; vertical-align: middle; cursor: pointer;
}
.note-live .cm-md-hr {
display: inline-block; width: 100%; height: 2px;
background: var(--border); border-radius: 1px; vertical-align: middle;
}
.note-live .cm-md-image {
max-width: 100%; height: auto; border-radius: var(--radius-sm);
display: block; margin: 0.4em 0;
min-height: 1.6em; min-width: 3em;
background: var(--bg-elevated);
}
.note-live .cm-md-image.cm-md-image-broken {
border: 1px dashed var(--border); box-sizing: border-box;
}
/* GFM tables — a real
, built from the GFM Table syntax-tree nodes
markdownLanguage already parses (same GFM extension task lists come from)
and swapped in as a whole-block replace widget; matches .note-preview's
own table styling. */
.note-live .cm-md-table-wrap { margin: 0.4em 0; overflow-x: auto; }
.note-live .cm-md-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.note-live .cm-md-table th, .note-live .cm-md-table td { border: 1px solid var(--border); padding: 6px 12px; text-align: left; }
.note-live .cm-md-table th { background: var(--bg-elevated); font-weight: 600; }
.note-live .cm-md-table tbody tr:nth-child(even) td { background: var(--bg-elevated); opacity: 0.7; }
/* Editable cell affordance — each cell is its own contenteditable island
(see live-editor.js's _TableWidget), so a focus ring is the only signal
a user gets that a cell is directly typeable. */
.note-live .cm-md-table th[contenteditable="true"], .note-live .cm-md-table td[contenteditable="true"] { cursor: text; }
.note-live .cm-md-table th[contenteditable="true"]:hover, .note-live .cm-md-table td[contenteditable="true"]:hover { background: var(--accent-dim); }
.note-live .cm-md-table th[contenteditable="true"]:focus, .note-live .cm-md-table td[contenteditable="true"]:focus {
outline: 2px solid var(--accent); outline-offset: -2px; background: var(--bg-surface); opacity: 1;
}
/* GitHub-style alerts — > [!NOTE]/[!TIP]/[!IMPORTANT]/[!WARNING]/[!CAUTION].
Matches .note-preview's .md-alert colours; the border lives on the line
decoration itself (cm-md-alert-) rather than a wrapping div, since
this surface styles per-line, not per-block. */
.note-live .cm-md-alert {
border-left: 3px solid var(--border); padding-left: 0.8em;
}
.note-live .cm-md-alert-title { font-weight: 600; }
.note-live .cm-md-alert-note { border-left-color: var(--blue); }
.note-live .cm-md-alert-title-note { color: var(--blue); }
.note-live .cm-md-alert-tip { border-left-color: var(--green); }
.note-live .cm-md-alert-title-tip { color: var(--green); }
.note-live .cm-md-alert-important { border-left-color: var(--accent); }
.note-live .cm-md-alert-title-important { color: var(--accent); }
.note-live .cm-md-alert-warning { border-left-color: var(--yellow); }
.note-live .cm-md-alert-title-warning { color: var(--yellow); }
.note-live .cm-md-alert-caution { border-left-color: var(--red); }
.note-live .cm-md-alert-title-caution { color: var(--red); }
/* Footnotes — a superscript reference marker inline, and a small "1."-style
label on the definition line. No relocated "Footnotes" section here (this
is an editable surface; the static/export renderer's real footnotes
section covers that view). */
.note-live .cm-md-footnote-ref {
font-size: 0.75em; color: var(--accent); font-weight: 600;
}
.note-live .cm-md-footnote-ref-interactive { cursor: pointer; border-radius: 3px; }
.note-live .cm-md-footnote-ref-interactive:hover { text-decoration: underline; }
.note-live .cm-md-footnote-def-marker {
font-size: 0.85em; font-weight: 600; color: var(--text-secondary);
}
/* Footnote preview popover (src/footnote-popover.js) — click/tap a
reference to read its text inline instead of jumping to the bottom.
Shared between the static preview and the Live surface; appended
directly to (position: absolute against the page, not either
editor pane) so it isn't clipped by a scrollable pane's overflow. */
.footnote-popover {
position: absolute; z-index: 50;
max-width: min(360px, calc(100vw - 24px));
background: var(--bg-elevated); border: 1px solid var(--border);
border-radius: var(--radius-md); padding: 10px 12px;
box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.5;
animation: footnote-popover-in 0.12s ease;
}
.footnote-popover p:first-child { margin-top: 0; }
.footnote-popover p:last-child { margin-bottom: 0; }
@keyframes footnote-popover-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
.footnote-popover { animation: none; }
}
/* Remote collaborator carets (Google-Docs style) */
.note-live .cm-remote-caret {
position: relative;
border-left: 2px solid;
margin-left: -1px;
}
.note-live .cm-remote-caret-label {
position: absolute;
top: -1.35em; left: -2px;
padding: 0 5px;
border-radius: 3px 3px 3px 0;
font-size: 10px; font-weight: 600; line-height: 1.5;
color: #fff; white-space: nowrap;
pointer-events: none;
/* Must outrank the scroll rail (z-index 5) and every other in-editor
float it can render near/under except comments, which now sit above
this label (z-index 22, see .comment-margin-layer below) by
deliberate choice — a comment marking a range must never be hidden
under a collaborator's cursor label passing through that same spot.
Stays well below the panel/modal/toast tiers (120+) since it's still
in-document, not a global overlay. */
z-index: 21;
}
/* A remote collaborator's selected text range — background color set inline
per-device (color-mix from colorForDevice()) since it's dynamic, same
pattern as the caret's border/label colors above. */
.note-live .cm-remote-selection { border-radius: 2px; }
@media (min-width: 768px) {
.note-live { padding: 2rem max(5%, calc((100% - 800px) / 2)); font-size: 16px; }
}
/* No border-left here: #note-editor already carries the split divider via
its border-right, and doubling them reads as a 2px line. */
.note-live.monospace { font-family: var(--font-mono); font-size: 14px; }
.note-preview h1,.note-preview h2,.note-preview h3,
.note-preview h4,.note-preview h5,.note-preview h6 { margin: 1.2em 0 0.5em; line-height: 1.25; }
.note-preview h1 { font-size: 1.6em; font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
.note-preview h2 { font-size: 1.35em; font-weight: 600; }
.note-preview h3 { font-size: 1.15em; font-weight: 600; }
.note-preview h4 { font-size: 1.05em; font-weight: 600; }
.note-preview h5,.note-preview h6 { font-size: 1em; font-weight: 600; color: var(--text-secondary); }
.note-preview p { margin: 0.6em 0; }
.note-preview ul,.note-preview ol { margin: 0.6em 0; padding-left: 1.6em; }
.note-preview li { margin: 0.15em 0; }
.note-preview a { color: var(--accent); }
.note-preview img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 0.4em 0; display: block; }
.note-preview img.img-broken {
min-height: 2.4em; min-width: 4em; background: var(--bg-elevated);
border: 1px dashed var(--border); box-sizing: border-box;
}
.note-preview a.syncpad-file-link-broken {
color: var(--text-muted); text-decoration: line-through; cursor: default;
}
.note-preview li > ul, .note-preview li > ol { margin: 0.2em 0; }
.note-preview code {
font-family: var(--font-mono); font-size: 0.9em;
background: var(--bg-elevated); padding: 1px 6px; border-radius: var(--radius-sm);
}
.note-preview pre {
background: var(--bg-surface); border: 1px solid var(--border);
border-radius: var(--radius-md); padding: 14px 16px; overflow-x: auto; margin: 0.8em 0;
max-width: 100%; /* never wider than the content measure, even on narrow/mobile widths */
position: relative; /* anchors the line-numbers gutter below, when shown */
}
/* Extra headroom only when a language label is actually present (the badge
sits at top:8px, always visible — without this, its ~10px height crowds
right up against the first code line at the default 14px padding-top).
Blocks with no language (a plain ``` fence) keep the tighter default. */
.note-preview pre.code-block:has(.code-block-lang) { padding-top: 26px; }
body.code-line-numbers .note-preview pre.code-block:has(.code-block-lang) .code-line-numbers-gutter {
padding-top: 26px;
}
/* Opt-in code-block line numbers (Settings > Editor preferences). A gutter
*sibling* to , not wrapper spans inside it — Prism.highlightAllUnder()
replaces 's entire innerHTML with its own tokenized markup for any
language it recognizes, which would silently destroy per-line wrappers
living inside it. Hidden by default; toggled on via a body-level class
the same way read-only-mode is (see src/ui/editor.js's setCodeLineNumbers). */
.note-preview .code-line-numbers-gutter { display: none; }
body.code-line-numbers .note-preview .code-line-numbers-gutter {
display: block; position: absolute; top: 0; left: 0; bottom: 0;
width: 2.4em; padding-top: 14px; text-align: right; padding-right: 10px;
color: var(--text-muted); font-family: var(--font-mono); font-size: 0.85em;
user-select: none; counter-reset: codeline;
border-right: 1px solid var(--border);
}
body.code-line-numbers .note-preview .code-line-numbers-gutter span {
display: block; line-height: 1.55; counter-increment: codeline;
}
body.code-line-numbers .note-preview .code-line-numbers-gutter span::before {
content: counter(codeline);
}
body.code-line-numbers .note-preview pre.code-block code {
display: block; padding-left: calc(2.4em + 10px + 10px);
}
/* Language label (top-left, always visible) and copy button (top-right,
hover/focus-revealed) — both float over the