@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/IBMPlexMono-Medium.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Kalam';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/Kalam-Regular.woff2') format('woff2');
}
:root {
--bg-main: #1e1e1e;
--bg-sidebar: #252526;
--bg-tab-bar: #2d2d30;
--bg-elevated: #333337;
--bg-hover: #2a2a2d;
--bg-input: #3c3c3c;
--accent: #007acc;
--accent-hover: #1f8fd6;
--text: #d4d4d4;
--text-muted: #cccccc;
--text-dim: #8a8a8a;
--border: #3a3a3d;
--danger: #e06060;
--view-switcher-bg: #3a3a3f;
--scrollbar-thumb: #444;
/* Background for "active" rows (selected category, etc.). In dark mode the
convention is "lighter = active"; the light-theme override below flips
to "darker = active" so the selection still pops on a pale page. */
--bg-active: var(--bg-elevated);
/* Strong shadow under modals/popovers — heavy on dark, soft on light. */
--shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.6);
--shadow-popover: 0 4px 14px rgba(0, 0, 0, 0.5);
--shadow-card: 0 6px 20px rgba(0, 0, 0, 0.5);
--shadow-drag: 0 8px 22px rgba(0, 0, 0, 0.45);
/* Subtle hover overlay over tabs/chips — lightens dark bg, darkens light bg. */
--bg-hover-overlay: rgba(255, 255, 255, 0.1);
--ui-font: ui-sans-serif, system-ui, sans-serif;
--mono-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Light variant — toggled by adding `light` class to (an inline
script in index.html reads localStorage and applies it before paint to
avoid a dark flash). The list-style themes (sections paper, stickies
cork, cards) keep their own palettes regardless of the app theme. */
:root.light {
--bg-main: #ffffff;
--bg-sidebar: #e6e6e6;
--bg-tab-bar: #d6d6d6;
--bg-elevated: #f8f8f8;
--bg-hover: #cfcfcf;
--bg-input: #ffffff;
--accent: #0066b8;
--accent-hover: #0073cc;
--text: #1f1f1f;
--text-muted: #424242;
--text-dim: #6e6e6e;
--border: #b8b8b8;
--danger: #c83232;
--view-switcher-bg: #c8c8c8;
--scrollbar-thumb: #a8a8a8;
/* Active rows go DARKER than the sidebar/hover so they read as pressed
into the page — opposite of dark mode's "lighter = active". */
--bg-active: #b0b0b0;
--shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.18);
--shadow-popover: 0 4px 14px rgba(0, 0, 0, 0.14);
--shadow-card: 0 6px 20px rgba(0, 0, 0, 0.15);
--shadow-drag: 0 8px 22px rgba(0, 0, 0, 0.18);
--bg-hover-overlay: rgba(0, 0, 0, 0.06);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
height: 100%;
background: var(--bg-main);
color: var(--text);
font-family: var(--ui-font);
font-size: 13px;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
#offline-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
background: #b91c1c;
color: #fff;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
text-align: center;
letter-spacing: 0.02em;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
body.offline #app { padding-top: 28px; }
/* Offline mode — hide all write affordances. */
body.offline #add-category-btn,
body.offline #add-note-btn,
body.offline #wb-add-btn,
body.offline #ls-add-btn,
body.offline #ls-add-item-btn,
body.offline #ls-import-btn,
body.offline #files-upload-btn,
body.offline #files-edit-btn,
body.offline #files-drop,
body.offline #images-upload-btn,
body.offline #images-edit-btn,
body.offline #images-hint,
body.offline #image-add-btn,
body.offline .tab-close,
body.offline .wb-tab-close { display: none !important; }
body.offline #wb-canvas { pointer-events: none; }
body.offline #wb-toolbar button { pointer-events: none; opacity: 0.5; }
/* Cold-launch cache prepaint: content is shown read-only until the live boot
data lands (see prepaintFromCache). Block the edit controls but leave the
scroll containers interactive so cached content stays readable/scrollable.
The notes editor (CodeMirror) and page editor are gated in JS. */
body.boot-loading #lists-view textarea,
body.boot-loading #lists-view input,
body.boot-loading #lists-view button,
body.boot-loading #wb-canvas,
body.boot-loading #flow-canvas { pointer-events: none; }
button {
font-family: inherit;
font-size: inherit;
color: var(--text);
background: transparent;
border: 1px solid transparent;
cursor: pointer;
padding: 4px 10px;
border-radius: 3px;
}
button:hover { background: var(--bg-hover); }
button:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
input {
font-family: inherit;
font-size: inherit;
color: var(--text);
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 3px;
padding: 6px 8px;
}
input:focus { outline: none; border-color: var(--accent); }
/* ---------- Login page ---------- */
body.login-page {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
body.login-page #login-form {
background: var(--bg-sidebar);
border: 1px solid var(--border);
border-radius: 6px;
padding: 28px 28px 22px;
width: min(340px, 92vw);
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: var(--shadow-modal);
}
body.login-page #login-form h1 {
margin: 0 0 6px;
font-size: 20px;
font-weight: 500;
color: var(--text);
text-align: center;
letter-spacing: 0.3px;
}
body.login-page #password-input {
width: 100%;
padding: 8px 10px;
}
body.login-page #login-form button {
background: var(--accent);
color: #fff;
border: 1px solid var(--accent);
padding: 8px 12px;
font-weight: 500;
}
body.login-page #login-form button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
body.login-page #login-error {
min-height: 18px;
font-size: 12px;
color: var(--danger);
text-align: center;
}
body.login-page #login-error:empty { min-height: 0; }
/* ---------- App layout ---------- */
body.app-page { overflow: hidden; }
#app {
display: grid;
grid-template-columns: 240px 1fr;
height: 100vh;
height: 100dvh;
width: 100vw;
}
/* ---------- Sidebar ---------- */
#sidebar {
background: var(--bg-sidebar);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
}
#sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px 8px 14px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-dim);
border-bottom: 1px solid var(--border);
flex: 0 0 auto;
}
.sidebar-header-actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
.sidebar-brand {
display: inline-flex;
align-items: center;
gap: 6px;
}
.sidebar-logo {
width: 18px;
height: 18px;
border-radius: 4px;
display: block;
}
#open-default-btn {
width: 22px;
height: 22px;
padding: 0;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
border: 1px solid transparent;
border-radius: 3px;
}
#open-default-btn svg { display: block; }
#open-default-btn:hover { background: var(--bg-hover); color: var(--text); }
#open-default-btn:disabled { opacity: 0.35; cursor: default; }
#open-default-btn:disabled:hover { background: transparent; color: var(--text-muted); }
#add-category-btn {
width: 22px;
height: 22px;
padding: 0;
font-size: 16px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
}
#sidebar-collapse-btn {
width: 22px;
height: 22px;
padding: 0;
font-size: 11px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
}
#category-reorder-btn {
width: 22px;
height: 22px;
padding: 0;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
border: 1px solid transparent;
border-radius: 3px;
}
#category-reorder-btn svg { display: block; }
#category-reorder-btn[aria-pressed="true"] {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
#category-list {
list-style: none;
margin: 0;
padding: 4px 0;
overflow-y: auto;
flex: 1 1 auto;
}
#sidebar-footer {
flex: 0 0 auto;
height: 28px;
padding: 0 10px;
background: var(--bg-tab-bar);
border-top: 1px solid var(--border);
display: flex;
align-items: center;
}
.category-item {
display: flex;
align-items: center;
gap: 4px;
/* Left padding grows per nesting level so sub-categories indent. */
padding: 6px 6px 6px calc(14px + var(--depth, 0) * 16px);
cursor: pointer;
color: var(--text-muted);
user-select: none;
border-left: 2px solid transparent;
}
.category-item:hover { background: var(--bg-hover); color: var(--text); }
.category-item.active {
/* The current category reads from the stronger bg + bold name alone (no
accent chevron). No left accent bar — the colored-category rule below
still uses the left edge for the category colour swatch. `--bg-active`
flips lighter/darker per theme so the selection always stands out. */
background: var(--bg-active);
color: var(--text);
font-weight: 600;
}
.category-item.archived {
font-style: italic;
opacity: 0.55;
}
.category-item.archived.active { opacity: 0.8; }
.category-item.colored {
border-left-width: 4px;
border-left-color: var(--item-color);
padding-left: calc(12px + var(--depth, 0) * 16px);
}
.category-item.colored.active {
border-left-color: var(--item-color);
}
.category-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Expand/collapse control, shown only on rows that have children. It sits to
the right of the name and rotates to point down when expanded. */
.category-toggle {
flex: 0 0 auto;
margin-left: 6px;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 1;
color: var(--text-muted);
cursor: pointer;
transition: transform 120ms ease, color 120ms;
user-select: none;
-webkit-tap-highlight-color: transparent; /* no grey tap box on mobile */
}
.category-item:hover .category-toggle,
.category-toggle:hover { color: var(--text); }
.category-item.expanded .category-toggle { transform: rotate(90deg); }
/* In reorder mode the whole row is a drag target (no grip handle): plain
clicks no longer activate, and names aren't selectable while dragging. The
list stops scrolling on touch so a row drag isn't hijacked by the scroller. */
#sidebar.reordering .category-item { cursor: grab; touch-action: none; }
#sidebar.reordering .category-name { pointer-events: none; user-select: none; }
.category-item.dragging-floating {
/* Semi-transparent so the highlighted nest-target row shows through. */
opacity: 0.55;
background: var(--bg-elevated);
border-radius: 4px;
box-shadow: var(--shadow-drag);
pointer-events: none;
}
/* Neutral gap left where the dragged row was lifted from. The destination is
shown by .category-drop-line, so this stays subtle to avoid two indicators. */
.category-placeholder {
list-style: none;
margin: 0;
background: var(--bg-hover);
border-radius: 4px;
opacity: 0.5;
}
/* Insertion line: marks where the dragged category will drop. */
.category-drop-line {
position: fixed;
height: 2px;
background: var(--accent);
border-radius: 1px;
pointer-events: none;
z-index: 60;
}
.category-drop-line::before {
content: '';
position: absolute;
left: -3px;
top: -3px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
}
/* Row highlighted while a dragged category hovers it to nest as a child:
a strong accent-tinted fill plus a ring, so it clearly reads as the target. */
.category-item.nest-target {
background: color-mix(in srgb, var(--accent) 35%, transparent);
box-shadow: inset 0 0 0 2px var(--accent);
border-radius: 4px;
color: var(--text);
}
.category-name-edit {
flex: 1 1 auto;
min-width: 0;
background: var(--bg-input);
border: 1px solid var(--accent);
border-radius: 2px;
color: var(--text);
font: inherit;
padding: 1px 4px;
}
/* ---------- Main ---------- */
#main {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
background: var(--bg-main);
}
#notes-view, #files-view, #images-view, #whiteboard-view, #flows-view {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
#notes-view[hidden], #files-view[hidden], #images-view[hidden], #whiteboard-view[hidden],
#flows-view[hidden], #lists-view[hidden], #pages-view[hidden] { display: none; }
/* Empty-state placeholder: shown in place of the editor when a view has no
items yet. The tab bar (with its + button) stays visible; everything else
in the view is hidden via the per-view rules below. */
.view-empty-msg {
display: none;
flex: 1 1 auto;
min-height: 0;
align-items: center;
justify-content: center;
text-align: center;
color: var(--text-dim);
font-size: 15px;
padding: 32px;
}
.view-empty-msg .vem-plus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.4em;
height: 1.4em;
margin: 0 0.15em;
border-radius: 4px;
background: var(--bg-active);
color: var(--text);
font-weight: 600;
}
.is-empty > .view-empty-msg { display: flex; }
#notes-view.is-empty #editor-host { display: none; }
#notes-view.is-empty #status-bar { display: none; }
#lists-view.is-empty #ls-host,
#lists-view.is-empty #ls-status-bar { display: none; }
#whiteboard-view.is-empty #wb-toolbar,
#whiteboard-view.is-empty #wb-canvas-host { display: none; }
#flows-view.is-empty #flow-toolbar,
#flows-view.is-empty #flow-canvas { display: none; }
#pages-view.is-empty #page-toolbar,
#pages-view.is-empty #page-editor,
#pages-view.is-empty #page-source { display: none; }
#view-switcher {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 0;
padding: 6px 10px;
background: var(--view-switcher-bg);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.view-switcher-tabs {
display: flex;
flex: 1 1 0;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
}
.view-switcher-tabs::-webkit-scrollbar { display: none; }
#view-switcher button {
flex: 0 0 auto;
padding: 4px 14px;
font-size: 12px;
border: 1px solid;
border-right-width: 0;
border-radius: 0;
color: #111827;
cursor: pointer;
}
#view-switcher .view-switcher-tabs button[data-view]:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#view-switcher .view-switcher-tabs button[data-view]:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right-width: 1px;
}
/* Per-view colour: pastel fill when inactive, full hue when active.
Border stays the full hue across both states. Active also goes bold
so the selection still reads at a glance. */
#view-switcher button[data-view="notes"] { background: #fef3c7; border-color: #fbbf24; }
#view-switcher button[data-view="lists"] { background: #d1fae5; border-color: #34d399; }
#view-switcher button[data-view="whiteboards"] { background: #ede9fe; border-color: #a78bfa; }
#view-switcher button[data-view="images"] { background: #ccfbf1; border-color: #14b8a6; }
#view-switcher button[data-view="flows"] { background: #e0e7ff; border-color: #818cf8; }
#view-switcher button[data-view="files"] { background: #e0f2fe; border-color: #38bdf8; }
#view-switcher button[data-view="pages"] { background: #ffe4e6; border-color: #fb7185; }
#view-switcher button[data-view="notes"].active { background: #fbbf24; }
#view-switcher button[data-view="lists"].active { background: #34d399; }
#view-switcher button[data-view="whiteboards"].active { background: #a78bfa; }
#view-switcher button[data-view="images"].active { background: #14b8a6; }
#view-switcher button[data-view="flows"].active { background: #818cf8; }
#view-switcher button[data-view="files"].active { background: #38bdf8; }
#view-switcher button[data-view="pages"].active { background: #fb7185; }
#view-switcher button:hover { filter: brightness(0.95); }
#view-switcher button.active { color: #0b1220; font-weight: 700; }
/* Desktop default: glyph first, then label, with a small gap. The mobile
@media block below switches to icon-only by hiding the label. */
#view-switcher button {
display: inline-flex;
align-items: center;
gap: 6px;
}
#view-switcher .view-icon {
display: inline-flex;
align-items: center;
}
#view-switcher .view-icon svg { display: block; width: 16px; height: 16px; }
/* ---------- Tab bar ---------- */
#tab-bar {
background: var(--bg-tab-bar);
border-bottom: 1px solid var(--border);
display: flex;
align-items: stretch;
min-width: 0;
height: 34px;
}
#tab-list {
display: flex;
flex: 0 1 auto;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
}
.tab.tab-dragging {
opacity: 0.6;
cursor: grabbing;
}
.tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 10px 0 14px;
min-width: 120px;
max-width: 200px;
height: 100%;
background: var(--bg-sidebar);
color: var(--text-dim);
border-right: 1px solid var(--border);
cursor: pointer;
user-select: none;
white-space: nowrap;
flex: 0 0 auto;
position: relative;
font-size: 12px;
overflow: hidden;
}
.tab-title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tab-title-edit {
flex: 1 1 auto;
min-width: 0;
background: var(--bg-input);
border: 1px solid var(--accent);
border-radius: 2px;
color: var(--text);
font: inherit;
padding: 1px 4px;
}
.tab:hover { background: var(--bg-tab-bar); color: var(--text-muted); }
.tab.active {
background: var(--bg-elevated);
color: var(--text);
box-shadow: inset 0 2px 0 0 var(--accent);
z-index: 1;
}
.tab.active:hover { background: var(--bg-elevated); }
.tab.colored { box-shadow: inset 0 -3px 0 0 var(--item-color); }
.tab.active.colored {
box-shadow: inset 0 2px 0 0 var(--accent), inset 0 -3px 0 0 var(--item-color);
}
.tab-close {
flex: 0 0 auto;
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 3px;
font-size: 14px;
color: var(--text-dim);
line-height: 1;
}
.tab-close:hover { background: var(--bg-hover-overlay); color: var(--text); }
.tab-sync-dot {
flex: 0 0 auto;
width: 7px;
height: 7px;
border-radius: 50%;
margin-right: 6px;
background: transparent;
}
.tab.sync-synced .tab-sync-dot { background: #22c55e; opacity: 0.55; }
.tab.sync-dirty .tab-sync-dot { background: #f59e0b; }
.tab.sync-offline .tab-sync-dot { background: #6b7280; }
#add-note-btn {
flex: 0 0 auto;
align-self: center;
width: 26px;
height: 24px;
margin: 0 4px 0 6px;
padding: 0;
font-size: 16px;
line-height: 1;
color: var(--text-muted);
border-radius: 3px;
}
/* Tab bar scrollbar */
#tab-list::-webkit-scrollbar { height: 6px; }
#tab-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
#tab-list::-webkit-scrollbar-track { background: transparent; }
/* Category list scrollbar */
#category-list::-webkit-scrollbar { width: 8px; }
#category-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
#category-list::-webkit-scrollbar-track { background: transparent; }
/* ---------- Editor host ---------- */
#editor-host {
position: relative;
flex: 1 1 0;
width: 100%;
min-width: 0;
min-height: 0;
overflow: hidden;
background: var(--bg-main);
font-family: var(--mono-font);
}
#editor-host .cm-editor {
height: 100%;
width: 100%;
}
#editor-host .cm-scroller { font-family: var(--mono-font); }
/* ---------- Notes rendered preview (markdown) ----------
Occupies the same flex slot as #editor-host. Styling deliberately mirrors
GitHub's rendered-markdown look (github-markdown-css) — the most widely
recognized "this is what markdown looks like" — adapted to the app's
light/dark palette via the --md-* tokens below. */
#note-preview {
flex: 1 1 0;
width: 100%;
min-width: 0;
min-height: 0;
overflow: auto;
background: var(--bg-main);
color: var(--text);
padding: 24px 28px 64px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.6;
word-wrap: break-word;
/* GitHub-dark tones (default); flipped for light below. */
--md-border: var(--border);
--md-code-bg: rgba(110, 118, 129, 0.18);
--md-block-bg: #161b22;
--md-block-border: #30363d;
--md-quote: var(--text-dim);
--md-row-alt: rgba(255, 255, 255, 0.03);
}
:root.light #note-preview {
--md-code-bg: rgba(175, 184, 193, 0.2);
--md-block-bg: #f6f8fa;
--md-block-border: #d0d7de;
--md-row-alt: rgba(0, 0, 0, 0.03);
}
#note-preview[hidden] { display: none; }
#notes-view.is-empty #note-preview { display: none; }
#note-preview > *:first-child { margin-top: 0; }
#note-preview > *:last-child { margin-bottom: 0; }
#note-preview h1,
#note-preview h2,
#note-preview h3,
#note-preview h4,
#note-preview h5,
#note-preview h6 {
margin: 24px 0 16px;
font-weight: 600;
line-height: 1.25;
}
#note-preview h1 { font-size: 2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--md-border); }
#note-preview h2 { font-size: 1.5em; padding-bottom: 0.3em; border-bottom: 1px solid var(--md-border); }
#note-preview h3 { font-size: 1.25em; }
#note-preview h4 { font-size: 1em; }
#note-preview h5 { font-size: 0.875em; }
#note-preview h6 { font-size: 0.85em; color: var(--text-dim); }
#note-preview p,
#note-preview blockquote,
#note-preview ul,
#note-preview ol,
#note-preview pre,
#note-preview table { margin: 0 0 16px; }
#note-preview a { color: var(--accent); text-decoration: none; }
#note-preview a:hover { text-decoration: underline; }
#note-preview strong { font-weight: 600; }
#note-preview ul,
#note-preview ol { padding-left: 2em; }
#note-preview li + li { margin-top: 0.25em; }
#note-preview li > ul,
#note-preview li > ol { margin: 0.25em 0 0; }
/* GFM task lists: marked emits … with no class,
so target the checkbox directly to drop the bullet and align the box. */
#note-preview li:has(> input[type="checkbox"]) { list-style: none; }
#note-preview li > input[type="checkbox"] { margin: 0 0.5em 0 -1.4em; vertical-align: middle; }
#note-preview blockquote {
padding: 0 1em;
border-left: 0.25em solid var(--md-block-border);
color: var(--md-quote);
}
#note-preview code {
font-family: var(--mono-font);
font-size: 85%;
padding: 0.2em 0.4em;
background: var(--md-code-bg);
border-radius: 6px;
}
#note-preview pre {
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background: var(--md-block-bg);
border: 1px solid var(--md-block-border);
border-radius: 6px;
}
#note-preview pre code {
padding: 0;
font-size: 100%;
background: none;
border-radius: 0;
}
#note-preview table {
border-collapse: collapse;
display: block;
width: max-content;
max-width: 100%;
overflow: auto;
}
#note-preview th,
#note-preview td { padding: 6px 13px; border: 1px solid var(--md-border); }
#note-preview th { font-weight: 600; background: var(--md-row-alt); }
#note-preview tr:nth-child(2n) td { background: var(--md-row-alt); }
#note-preview hr {
height: 0.25em;
margin: 24px 0;
border: 0;
background: var(--md-border);
}
#note-preview img { max-width: 100%; }
/* ---------- Status bar ---------- */
#status-bar {
display: flex;
align-items: center;
gap: 10px;
height: 28px;
padding: 0 10px;
background: var(--bg-tab-bar);
border-bottom: 1px solid var(--border);
color: var(--text-muted);
font-size: 11px;
flex: 0 0 auto;
}
#status-bar[hidden] { display: none; }
/* The per-tab sync dot already shows saved / unsaved / offline, so the
redundant "Saved"/"Saving…" text is hidden on both Notes and Lists (the
elements stay since JS still writes to them; errors now use a modal). */
#save-status, #ls-save-status { display: none; }
/* Shared top action bar used across views (Notes & Lists keep their own
id-scoped rules which happen to match; Whiteboard/Flows/Files/Images rely on
this generic version). A spacer pushes the button cluster to the right. */
.action-bar {
display: flex;
align-items: center;
gap: 8px;
height: 28px;
padding: 0 10px;
background: var(--bg-tab-bar);
border-bottom: 1px solid var(--border);
color: var(--text-muted);
font-size: 11px;
flex: 0 0 auto;
}
.action-bar[hidden] { display: none; }
/* The save-status text is hidden, so the action-bar buttons sit at the left;
the spacer is collapsed (display:none avoids leaving a gap behind it). */
.action-bar-spacer { display: none; }
.action-bar #save-status, .action-bar #ls-save-status, .action-bar #wb-status { flex: 0 0 auto; color: var(--text-dim); }
.action-bar > button {
background: transparent;
color: var(--text-dim);
border: 1px solid var(--border);
border-radius: 3px;
font: inherit;
font-size: 12px;
line-height: 1;
padding: 3px 7px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
}
.action-bar > button:hover { background: var(--bg-hover); color: var(--text); }
.action-bar > button:active { border-color: var(--accent); color: var(--text); }
.action-bar > button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.action-bar > button svg { display: block; width: 14px; height: 14px; }
/* #language-picker shares the generic #status-bar button styling. */
body.offline #language-picker { display: none; }
/* All notes status-bar controls share a bordered icon-button look so the
boxes are visible at rest and match the lists status bar style. The
aria-pressed=true rule highlights toggles (e.g. wrap) when active. */
#status-bar button {
background: transparent;
color: var(--text-dim);
border: 1px solid var(--border);
border-radius: 3px;
font: inherit;
font-size: 11px;
padding: 2px 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
#status-bar button:hover { background: var(--bg-hover); color: var(--text); }
#status-bar button:active { border-color: var(--accent); color: var(--text); }
#status-bar button[aria-pressed="true"] {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
#status-bar button svg { display: block; }
/* Popout (↗) and copy-link icons live in every toolbar — give them the
same bordered box so the icon family is consistent everywhere. */
.popout-btn,
.copy-link-btn {
background: transparent;
color: var(--text-dim);
border: 1px solid var(--border);
border-radius: 3px;
font: inherit;
font-size: 13px;
line-height: 1;
padding: 2px 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.popout-btn:hover, .copy-link-btn:hover { background: var(--bg-hover); color: var(--text); }
.popout-btn:active, .copy-link-btn:active { border-color: var(--accent); color: var(--text); }
.copy-link-btn svg, .popout-btn svg { display: block; }
/* Brief visual confirmation after click — JS toggles .copied for ~1s. */
.copy-link-btn.copied { color: var(--accent); border-color: var(--accent); }
/* The popout-btn ↗ is a text glyph; everything else in these bars is a
14x14 SVG. Bumping its font-size to 16px gives the glyph similar
visual weight. Also wins specificity over the per-bar #-button rules
so notes / lists / whiteboard / pages all render the same size. */
#status-bar .popout-btn,
#ls-status-bar .popout-btn,
#wb-toolbar .popout-btn,
#flow-toolbar .popout-btn,
#page-toolbar .popout-btn {
font-size: 16px;
padding: 2px 6px;
}
#ls-status-bar .copy-link-btn {
font-size: 13px;
padding: 2px 6px;
}
@media (max-width: 768px) {
/* Unified mobile icon-button sizing across every toolbar: 36px tall,
22px SVG, consistent padding so notes / lists / whiteboard / pages
all share the same tap-target footprint. Each toolbar's per-bar
popout/copy-link rule sets desktop font-size to 16px, which has
higher specificity than the bare class — so we have to repeat the
same scoped selectors here for the mobile size to actually win. */
#status-bar button,
.popout-btn,
.copy-link-btn,
#status-bar .popout-btn,
#status-bar .copy-link-btn,
#ls-status-bar .popout-btn,
#ls-status-bar .copy-link-btn,
#wb-toolbar .popout-btn,
#wb-toolbar .copy-link-btn,
#flow-toolbar .popout-btn,
#flow-toolbar .copy-link-btn,
#page-toolbar .popout-btn,
#page-toolbar .copy-link-btn {
padding: 4px 10px;
min-height: 36px;
font-size: 22px;
}
#status-bar button svg,
.popout-btn svg,
.copy-link-btn svg {
width: 22px;
height: 22px;
}
}
/* Standalone (read-only single-item) view: hide every chrome element so the
item fills the viewport. Activated by the deep-link form ?v=[. */
body.standalone #sidebar,
body.standalone #sidebar-backdrop,
body.standalone #sidebar-toggle,
body.standalone #tab-bar,
body.standalone #ls-tab-bar,
body.standalone #wb-tab-bar,
body.standalone #flow-tab-bar,
body.standalone #flow-toolbar,
body.standalone #image-tab-bar,
body.standalone #page-tab-bar,
body.standalone #status-bar,
body.standalone #ls-status-bar,
body.standalone #wb-toolbar,
body.standalone #page-toolbar,
body.standalone #ls-actions,
body.standalone #view-switcher {
display: none !important;
}
body.standalone #ls-host { padding-top: 12px; }
body.standalone #wb-canvas-host { height: 100vh; }
body.standalone #wb-canvas,
body.standalone .ls-text,
body.standalone .ls-checkbox,
body.standalone #ls-title,
body.standalone .ls-add-row,
body.standalone .ls-section-title,
body.standalone .ls-collapse-toggle {
pointer-events: none;
}
body.standalone #ls-title,
body.standalone .ls-text { user-select: text; }
body.standalone #app { grid-template-columns: 1fr; }
#standalone-exit {
position: fixed;
top: 10px;
right: 12px;
z-index: 1000;
display: none;
background: var(--bg-elevated);
color: var(--text);
border: 1px solid var(--border);
border-radius: 14px;
font: inherit;
font-size: 11px;
padding: 4px 10px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
opacity: 0.7;
transition: opacity 120ms;
}
#standalone-exit:hover { opacity: 1; }
body.standalone #standalone-exit { display: inline-block; }
/* #theme-picker shares the generic #status-bar button styling above. */
#menu-btn {
width: 24px;
height: 22px;
padding: 0;
font-size: 14px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 3px;
color: var(--text-muted);
background: transparent;
}
#menu-btn:hover { background: var(--bg-hover); color: var(--text); }
#menu-btn[aria-expanded="true"] { background: var(--bg-hover); color: var(--text); }
/* ---------- Context menu ---------- */
#context-menu {
position: absolute;
min-width: 140px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 4px;
box-shadow: var(--shadow-popover);
padding: 4px 0;
/* Above the mobile sidebar (z-index: 60) and the sidebar backdrop. */
z-index: 9999;
color: var(--text);
font-size: 12px;
}
#context-menu[hidden] { display: none; }
#context-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#context-menu li,
#context-menu .menu-item,
#context-menu .context-menu-item {
display: block;
width: 100%;
padding: 6px 14px;
cursor: pointer;
white-space: nowrap;
user-select: none;
text-align: left;
background: transparent;
color: var(--text);
border: none;
border-radius: 0;
font: inherit;
}
#context-menu li:hover,
#context-menu .menu-item:hover,
#context-menu .context-menu-item:hover { background: var(--accent); color: #fff; }
#context-menu .context-menu-sep {
height: 1px;
background: var(--border);
margin: 4px 0;
}
#context-menu .context-menu-info {
padding: 4px 14px 6px;
font-size: 11px;
color: var(--text-dim);
font-family: var(--mono-font);
letter-spacing: 0.4px;
user-select: text;
cursor: default;
}
#context-menu .context-menu-version {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px 6px 14px;
}
#context-menu .context-menu-version-label {
flex: 1 1 auto;
font-size: 11px;
color: var(--text-dim);
font-family: var(--mono-font);
letter-spacing: 0.4px;
user-select: text;
}
#context-menu .context-menu-version-btn {
flex: 0 0 auto;
width: 22px;
height: 22px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-dim);
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
}
#context-menu .context-menu-version-btn:hover {
background: var(--bg-hover);
color: var(--text);
border-color: var(--border);
}
/* Update-available state: solid accent fill + a slow pulse so it draws the eye. */
#context-menu .context-menu-version-btn.has-update {
color: #fff;
background: var(--accent);
border-color: var(--accent);
animation: cn-pulse-update 1.6s ease-in-out infinite;
}
#context-menu .context-menu-version-btn.has-update:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
}
@keyframes cn-pulse-update {
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 122, 204, 0.55); }
50% { box-shadow: 0 0 0 5px rgba(0, 122, 204, 0); }
}
/* ---------- Inline rename input (used by JS when editing tab/category names) ---------- */
.inline-rename {
background: var(--bg-input);
border: 1px solid var(--accent);
border-radius: 2px;
color: var(--text);
font: inherit;
padding: 1px 4px;
width: 100%;
min-width: 0;
}
/* ---------- Files view ---------- */
#files-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 0 10px;
background: var(--bg-tab-bar);
border-bottom: 1px solid var(--border);
flex: 0 0 auto;
height: 28px;
}
#files-toolbar button {
font-size: 12px;
padding: 3px 10px;
border: 1px solid var(--border);
border-radius: 3px;
background: transparent;
color: var(--text-dim);
}
#files-toolbar button:hover { background: var(--bg-hover); color: var(--text); }
#files-edit-btn.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
#files-grid {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 14px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
align-content: start;
}
#files-grid::-webkit-scrollbar { width: 8px; }
#files-grid::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
#files-grid::-webkit-scrollbar-track { background: transparent; }
.files-empty {
grid-column: 1 / -1;
text-align: center;
color: var(--text-dim);
padding: 32px 16px;
font-size: 13px;
}
.file-tile {
display: flex;
flex-direction: column;
background: var(--bg-sidebar);
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
cursor: pointer;
position: relative;
transition: border-color 0.15s, transform 0.1s;
}
.file-tile:hover { border-color: var(--accent); }
.file-tile:active { transform: scale(0.98); }
.file-preview {
width: 100%;
aspect-ratio: 1 / 1;
background: var(--bg-main);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-bottom: 1px solid var(--border);
}
.file-preview img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.file-icon-text {
font-family: var(--mono-font);
font-size: 16px;
font-weight: 600;
color: var(--text-dim);
letter-spacing: 1px;
padding: 0 6px;
word-break: break-all;
text-align: center;
}
.file-meta {
padding: 6px 8px 8px;
font-size: 11px;
min-width: 0;
}
.file-name {
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-size {
color: var(--text-dim);
font-size: 10px;
margin-top: 2px;
}
.file-tile.edit-mode { cursor: default; }
.file-tile.edit-mode:hover { border-color: var(--border); }
.file-tile.edit-mode:active { transform: none; }
.file-delete {
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
padding: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.65);
color: #fff;
font-size: 14px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.file-delete:hover { background: var(--danger); border-color: var(--danger); }
#files-drop {
flex: 0 0 auto;
margin: 0 14px 14px;
padding: 14px;
border: 2px dashed var(--border);
border-radius: 6px;
text-align: center;
color: var(--text-dim);
font-size: 12px;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
#files-drop.drag-over {
border-color: var(--accent);
background: rgba(0, 122, 204, 0.08);
color: var(--text);
}
#files-upload-status {
margin-top: 6px;
font-size: 11px;
color: var(--text);
min-height: 14px;
}
/* ---------- Images view ---------- */
#images-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 0 10px;
background: var(--bg-tab-bar);
border-bottom: 1px solid var(--border);
flex: 0 0 auto;
height: 28px;
}
#images-hint {
flex: 1 1 auto;
font-size: 11px;
color: var(--text-dim);
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#images-toolbar button {
font-size: 12px;
padding: 3px 10px;
border: 1px solid var(--border);
border-radius: 3px;
background: transparent;
color: var(--text-dim);
}
#images-toolbar button:hover { background: var(--bg-hover); color: var(--text); }
#images-edit-btn.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
#images-column {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 14px;
display: flex;
flex-direction: column;
gap: 14px;
align-items: center;
}
#images-column::-webkit-scrollbar { width: 8px; }
#images-column::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
#images-column::-webkit-scrollbar-track { background: transparent; }
#images-column.drag-over {
background: rgba(40, 42, 117, 0.06);
outline: 2px dashed var(--accent);
outline-offset: -8px;
}
.images-empty {
margin: 40px auto;
text-align: center;
color: var(--text-dim);
font-size: 13px;
max-width: 360px;
line-height: 1.5;
}
.image-card {
position: relative;
width: 100%;
max-width: 900px;
background: var(--bg-sidebar);
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.image-card img {
display: block;
width: 100%;
max-height: 80vh;
object-fit: contain;
background: var(--bg-main);
}
.image-meta {
padding: 6px 10px;
font-size: 11px;
color: var(--text-dim);
display: flex;
justify-content: space-between;
gap: 8px;
border-top: 1px solid var(--border);
}
.image-meta .image-size { color: var(--text-dim); }
.image-card .image-delete {
position: absolute;
top: 8px;
right: 8px;
width: 26px;
height: 26px;
padding: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.65);
color: #fff;
font-size: 16px;
line-height: 1;
display: none;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.25);
cursor: pointer;
}
.image-card .image-delete:hover { background: var(--danger); border-color: var(--danger); }
.image-card.edit-mode .image-delete { display: inline-flex; }
#images-status {
flex: 0 0 auto;
padding: 4px 14px 10px;
font-size: 11px;
color: var(--text);
min-height: 16px;
text-align: center;
}
/* ---------- Flows view ---------- */
:root {
--flow-conn: #94a3b8;
--flow-canvas-bg: #f1f5f9;
}
:root.light {
--flow-conn: #94a3b8;
--flow-canvas-bg: #f1f5f9;
}
#flow-tab-bar,
#image-tab-bar {
background: var(--bg-tab-bar);
border-bottom: 1px solid var(--border);
display: flex;
align-items: stretch;
min-width: 0;
height: 34px;
flex: 0 0 auto;
}
#flow-tab-list,
#image-tab-list {
display: flex;
flex: 0 1 auto;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
}
#flow-tab-list::-webkit-scrollbar,
#image-tab-list::-webkit-scrollbar { height: 6px; }
#flow-tab-list::-webkit-scrollbar-thumb,
#image-tab-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
#flow-tab-list::-webkit-scrollbar-track,
#image-tab-list::-webkit-scrollbar-track { background: transparent; }
#flow-add-btn,
#image-add-btn {
flex: 0 0 auto;
align-self: center;
width: 26px;
height: 24px;
margin: 0 4px 0 6px;
padding: 0;
font-size: 16px;
line-height: 1;
color: var(--text-muted);
border-radius: 3px;
}
#flow-toolbar {
display: flex;
align-items: center;
gap: 6px;
padding: 0 10px;
background: var(--bg-tab-bar);
border-bottom: 1px solid var(--border);
flex: 0 0 auto;
height: 28px;
}
/* Editing-mode hint sits to the right; the tool buttons stay left. */
#flow-status { margin-left: auto; font-size: 11px; color: var(--text-dim); }
#flow-toolbar button {
font-size: 12px;
padding: 3px 10px;
border: 1px solid var(--border);
border-radius: 3px;
background: transparent;
color: var(--text-dim);
line-height: 1.4;
}
#flow-toolbar button:hover { background: var(--bg-hover); color: var(--text); }
#flow-edit-toggle.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
#flow-edit-toggle.active:hover { background: var(--accent); color: #fff; opacity: 0.9; }
#flow-zoom-label {
font-size: 11px;
color: var(--text-dim);
min-width: 38px;
text-align: center;
}
#flow-canvas {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
background: var(--flow-canvas-bg);
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
#flow-canvas input, #flow-canvas textarea { user-select: text; -webkit-user-select: text; }
#flow-canvas.panning { cursor: grabbing; }
#flow-canvas.panning * { cursor: grabbing !important; }
#flow-stage {
position: relative;
transform-origin: 0 0;
}
/* View-only mode: hide affordances and stop boxes from looking clickable. */
#flow-stage.flow-readonly .flow-box { cursor: default; }
.flow-empty {
position: absolute;
top: 60px;
left: 0;
right: 0;
text-align: center;
color: var(--text-dim);
font-size: 13px;
}
.flow-conn-layer {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
overflow: visible;
}
.flow-conn {
fill: none;
stroke: var(--flow-conn);
stroke-width: 2;
}
.flow-conn-goto {
stroke: #818cf8;
stroke-dasharray: 5 4;
}
.flow-inbound {
fill: none;
stroke: #818cf8;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.flow-endcap {
fill: var(--flow-canvas-bg);
stroke: var(--flow-conn);
stroke-width: 2;
}
.flow-shape {
fill: #ffffff;
stroke: #94a3b8;
stroke-width: 1.6;
}
.flow-shape.selected {
stroke: #6366f1;
stroke-width: 2.4;
}
.flow-plus,
.flow-detach {
position: absolute;
width: 22px;
height: 22px;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid var(--flow-conn);
background: #fff;
color: #475569;
font-size: 15px;
line-height: 1;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.flow-plus:hover { background: #818cf8; border-color: #818cf8; color: #fff; }
.flow-detach {
width: 18px;
height: 18px;
font-size: 12px;
border-color: #818cf8;
color: #6366f1;
}
.flow-detach:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
/* boxes — transparent HTML hit/content layer over the SVG shape */
.flow-box {
position: absolute;
box-sizing: border-box;
cursor: pointer;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.flow-box-inner {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
overflow: hidden;
text-align: center;
}
.flow-box-title {
font-size: 12.5px;
font-weight: 600;
line-height: 16px;
color: #1e293b;
white-space: normal;
overflow-wrap: anywhere;
}
.flow-box-desc {
font-size: 10.5px;
color: #64748b;
line-height: 14px;
white-space: normal;
overflow-wrap: anywhere;
}
.flow-add-conn {
position: absolute;
right: -9px;
bottom: -9px;
width: 18px;
height: 18px;
padding: 0;
border-radius: 50%;
border: 1px solid var(--flow-conn);
background: #fff;
color: #475569;
font-size: 12px;
line-height: 1;
display: none;
align-items: center;
justify-content: center;
z-index: 4;
}
.flow-box:hover .flow-add-conn { display: flex; }
.flow-add-conn:hover { background: #818cf8; border-color: #818cf8; color: #fff; }
/* connect-to-existing mode: every box is a target */
#flow-stage.flow-connecting .flow-box { cursor: crosshair; }
#flow-stage.flow-connecting .flow-box.connect-target { outline: 1px dashed #c7d2fe; outline-offset: 2px; }
#flow-stage.flow-connecting .flow-box.connect-target:hover { outline: 2px dashed #818cf8; }
.flow-conn-label,
.flow-conn-label-edit {
position: absolute;
transform: translate(-50%, -50%);
font-size: 10px;
font-weight: 600;
z-index: 3;
}
.flow-conn-label {
background: var(--flow-canvas-bg);
color: #475569;
padding: 1px 6px;
border-radius: 8px;
white-space: nowrap;
cursor: text;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
}
.flow-conn-label:hover { background: #e2e8f0; }
.flow-conn-label-edit {
padding: 1px 4px;
width: 120px;
z-index: 5;
border: 1px solid #818cf8;
border-radius: 6px;
background: #fff;
color: #1e293b;
}
.flow-badge {
position: absolute;
transform: translate(-50%, 0);
z-index: 3;
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
border: 1px solid #818cf8;
background: #eef2ff;
color: #4338ca;
white-space: nowrap;
max-width: 170px;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.flow-badge:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.flow-comment {
position: absolute;
transform: translate(0, -50%);
z-index: 3;
max-width: 180px;
background: #fefce8;
border: 1px solid #facc15;
border-radius: 4px 8px 8px 8px;
padding: 4px 8px;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.flow-comment-text {
font-size: 10.5px;
color: #713f12;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
white-space: pre-wrap;
}
.flow-insert-menu {
position: fixed;
z-index: 5000;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow-card);
padding: 4px;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 180px;
}
.flow-insert-opt {
padding: 6px 10px;
border: none;
background: transparent;
color: var(--text);
font-size: 12.5px;
border-radius: 5px;
text-align: left;
cursor: pointer;
}
.flow-insert-opt:hover { background: var(--bg-hover); }
.flow-popover,
.flow-comment-pop {
position: fixed;
z-index: 5000;
width: 252px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow-card);
padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.flow-pop-title {
font-size: 13px;
font-weight: 600;
padding: 5px 7px;
border: 1px solid var(--border);
border-radius: 5px;
background: var(--bg-main);
color: var(--text);
}
.flow-pop-desc,
.flow-comment-pop textarea {
font-size: 12px;
padding: 5px 7px;
border: 1px solid var(--border);
border-radius: 5px;
background: var(--bg-main);
color: var(--text);
resize: vertical;
font-family: inherit;
}
.flow-pop-heading {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-dim);
margin-bottom: -4px;
}
.flow-pop-shapes {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.flow-shape-opt {
width: 32px;
height: 30px;
padding: 0;
border: 1px solid var(--border);
border-radius: 5px;
background: var(--bg-main);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.flow-shape-opt:hover { background: var(--bg-hover); color: var(--text); }
.flow-shape-opt.selected {
border-color: var(--accent);
color: var(--accent);
background: var(--bg-hover);
}
.flow-pop-color {
font-size: 12px;
padding: 6px;
border: 1px solid var(--border);
border-radius: 5px;
background: var(--bg-main);
color: var(--text);
}
.flow-pop-color:hover { background: var(--bg-hover); }
.flow-pop-delete,
.flow-comment-del {
font-size: 12px;
padding: 6px;
border: 1px solid var(--danger);
border-radius: 5px;
background: transparent;
color: var(--danger);
}
.flow-pop-delete:hover,
.flow-comment-del:hover { background: var(--danger); color: #fff; }
body.offline #flow-add-btn,
body.offline #flow-toolbar button,
body.offline .flow-plus,
body.offline .flow-add-conn,
body.offline .flow-detach,
body.offline .flow-badge { display: none !important; }
/* ---------- Color picker ---------- */
#color-picker {
position: absolute;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: var(--shadow-card);
padding: 8px;
/* sits above the flow / page / comment popovers (z-index: 5000) so the
palette is interactable when opened from inside one of those */
z-index: 5100;
}
#color-picker[hidden] { display: none; }
.color-grid {
display: grid;
grid-template-columns: repeat(5, 24px);
gap: 6px;
}
.color-swatch {
width: 24px;
height: 24px;
padding: 0;
border: 2px solid transparent;
border-radius: 4px;
cursor: pointer;
transition: transform 0.1s;
}
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.selected { border-color: var(--accent); }
.color-clear {
display: block;
width: 100%;
margin-top: 8px;
padding: 4px 8px;
font-size: 11px;
color: var(--text-dim);
background: transparent;
border: 1px solid var(--border);
border-radius: 3px;
cursor: pointer;
}
.color-clear:hover { color: var(--text); background: var(--bg-hover); }
.color-custom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 8px;
padding: 4px 8px;
font-size: 11px;
color: var(--text-dim);
border: 1px solid var(--border);
border-radius: 3px;
}
.color-custom input[type="color"] {
width: 28px;
height: 20px;
padding: 0;
border: 1px solid var(--border);
border-radius: 3px;
background: transparent;
cursor: pointer;
}
/* ---------- Help modal ---------- */
#help-modal {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
}
#help-modal[hidden] { display: none; }
.help-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
}
.help-panel {
position: relative;
width: min(720px, 92vw);
max-height: 86vh;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow-modal);
display: flex;
flex-direction: column;
overflow: hidden;
}
.help-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--bg-tab-bar);
}
#help-close {
width: 26px;
height: 26px;
padding: 0;
font-size: 18px;
line-height: 1;
border-radius: 4px;
color: var(--text-dim);
}
#help-close:hover { background: var(--bg-hover); color: var(--text); }
.help-body {
padding: 14px 18px 18px;
overflow-y: auto;
font-size: 12.5px;
color: var(--text);
line-height: 1.55;
}
.help-body::-webkit-scrollbar { width: 8px; }
.help-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
.help-body::-webkit-scrollbar-track { background: transparent; }
.help-body section { margin-top: 14px; }
.help-body section:first-child { margin-top: 0; }
.help-body h3 {
margin: 0 0 6px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--accent);
font-weight: 600;
}
.help-body ul { margin: 0; padding-left: 18px; }
.help-body li { margin: 2px 0; }
.help-body code {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 3px;
padding: 0 4px;
font-family: var(--mono-font);
font-size: 11.5px;
}
.help-body kbd {
display: inline-block;
background: var(--bg-input);
border: 1px solid var(--border);
border-bottom-width: 2px;
border-radius: 3px;
padding: 0 5px;
font-family: var(--mono-font);
font-size: 11px;
color: var(--text);
min-width: 14px;
text-align: center;
}
.help-body a {
color: var(--accent-hover);
text-decoration: none;
border-bottom: 1px dotted var(--accent-hover);
}
.help-body a:hover { color: var(--text); border-bottom-color: var(--text); }
.help-keys {
margin-top: 4px;
border-collapse: collapse;
font-size: 12px;
}
.help-keys td {
padding: 4px 12px 4px 0;
vertical-align: top;
}
.help-keys tr td:first-child { white-space: nowrap; color: var(--text-muted); }
/* --- Alerts panel (push alert log) --- */
#alerts-modal {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
}
#alerts-modal[hidden] { display: none; }
.alerts-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
}
.alerts-panel {
position: relative;
width: min(520px, 92vw);
max-height: 86vh;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow-modal);
display: flex;
flex-direction: column;
overflow: hidden;
}
.alerts-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--bg-tab-bar);
}
.alerts-header-actions { display: flex; align-items: center; gap: 6px; }
#alerts-clear {
font-size: 11.5px;
padding: 3px 8px;
border-radius: 4px;
color: var(--text-dim);
border: 1px solid var(--border);
}
#alerts-clear:hover { background: var(--bg-hover); color: var(--text); }
#alerts-close {
width: 26px;
height: 26px;
padding: 0;
font-size: 18px;
line-height: 1;
border-radius: 4px;
color: var(--text-dim);
}
#alerts-close:hover { background: var(--bg-hover); color: var(--text); }
.alerts-body {
padding: 6px 0;
overflow-y: auto;
}
.alerts-body::-webkit-scrollbar { width: 8px; }
.alerts-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
.alerts-body::-webkit-scrollbar-track { background: transparent; }
.alerts-empty {
padding: 24px 18px;
text-align: center;
font-size: 12.5px;
color: var(--text-dim);
}
.alert-item {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 9px 14px;
border-bottom: 1px solid var(--border);
}
.alert-item:last-child { border-bottom: none; }
.alert-item.has-link { cursor: pointer; }
.alert-item.has-link:hover { background: var(--bg-hover); }
.alert-item.unseen { border-left: 3px solid var(--accent); padding-left: 11px; }
/* Severity: high = red rail (wins over the unseen accent); low = muted. */
.alert-item.level-high { border-left: 3px solid #e5484d; padding-left: 11px; }
.alert-item.level-low { opacity: 0.7; }
.alert-item.level-low .alert-item-title { font-weight: 500; }
.alert-item-main { flex: 1; min-width: 0; }
.alert-item-title {
font-size: 12.5px;
font-weight: 600;
color: var(--text);
word-break: break-word;
}
.alert-item.has-link .alert-item-title { color: var(--accent-hover); }
.alert-item-body {
margin-top: 2px;
font-size: 12px;
color: var(--text);
white-space: pre-wrap;
word-break: break-word;
}
.alert-item-meta {
margin-top: 3px;
font-size: 10.5px;
color: var(--text-dim);
}
.alert-item-del {
flex: none;
width: 22px;
height: 22px;
padding: 0;
font-size: 15px;
line-height: 1;
border-radius: 4px;
color: var(--text-dim);
}
.alert-item-del:hover { background: var(--bg-hover); color: var(--text); }
/* Unseen-alert dot on the sidebar menu button. */
#menu-btn.has-alerts { position: relative; }
#menu-btn.has-alerts::after {
content: '';
position: absolute;
top: 1px;
right: 1px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
}
.help-note { color: var(--text-dim); font-size: 11.5px; margin: 6px 0 0; }
/* ---------- Whiteboard ---------- */
#wb-tab-bar {
background: var(--bg-tab-bar);
border-bottom: 1px solid var(--border);
display: flex;
align-items: stretch;
min-width: 0;
height: 34px;
flex: 0 0 auto;
}
#wb-tab-list {
display: flex;
flex: 0 1 auto;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
}
#wb-tab-list::-webkit-scrollbar { height: 6px; }
#wb-tab-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
#wb-tab-list::-webkit-scrollbar-track { background: transparent; }
#wb-add-btn {
flex: 0 0 auto;
align-self: center;
width: 26px;
height: 24px;
margin: 0 4px 0 6px;
padding: 0;
font-size: 16px;
line-height: 1;
color: var(--text-muted);
border-radius: 3px;
}
#wb-toolbar {
flex: 0 0 auto;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
padding: 6px 12px;
background: var(--bg-tab-bar);
border-bottom: 1px solid var(--border);
min-height: 44px;
}
#wb-tools, #wb-sizes, #wb-actions {
display: flex;
align-items: center;
gap: 4px;
}
#wb-toolbar button {
font-size: 12px;
padding: 3px 10px;
border: 1px solid var(--border);
border-radius: 3px;
background: var(--bg-elevated);
color: var(--text-muted);
}
#wb-tools button,
#wb-actions button,
#wb-toolbar #wb-color-btn,
#wb-toolbar #wb-grid-btn {
width: 32px;
height: 32px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
#wb-tools button svg,
#wb-actions button svg,
#wb-grid-btn svg { display: block; width: 26px; height: 26px; }
#wb-color-grid { width: 26px; height: 26px; }
#wb-toolbar button:hover { background: var(--bg-hover); color: var(--text); }
#wb-toolbar button.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
#wb-sizes button {
width: 32px;
height: 32px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
#wb-sizes .wb-dot {
display: block;
width: var(--d);
height: var(--d);
background: currentColor;
border-radius: 50%;
}
#wb-color-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 2px;
border-radius: 3px;
overflow: hidden;
}
#wb-color-grid span:nth-child(1) { background: #ef4444; }
#wb-color-grid span:nth-child(2) { background: #eab308; }
#wb-color-grid span:nth-child(3) { background: #3b82f6; }
#wb-color-grid span:nth-child(4) { background: #22c55e; }
#wb-toolbar button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
#wb-toolbar button:disabled:hover { background: var(--bg-elevated); color: var(--text-muted); }
/* Tool-conditional controls */
#wb-toolbar.tool-select #wb-sizes,
#wb-toolbar.tool-select #wb-color-btn { display: none; }
#wb-toolbar.tool-eraser #wb-color-btn { display: none; }
#wb-toolbar:not(.tool-select) #wb-delete-btn { display: none; }
#wb-toolbar.tool-lines #wb-sizes,
#wb-toolbar.tool-lines #wb-color-btn { display: none; }
#wb-toolbar.tool-pan #wb-sizes,
#wb-toolbar.tool-pan #wb-color-btn { display: none; }
/* Select-mode editor: when something is selected, surface the option groups
that apply to the selection so the user can edit colour/size/font/etc. in
place. The base `tool-select` rules above hide these — these rules
re-enable them only when the toolbar carries the matching `sel-*` class. */
#wb-toolbar.tool-select.has-selection.sel-stroke #wb-sizes,
#wb-toolbar.tool-select.has-selection.sel-shape #wb-sizes { display: inline-flex; }
#wb-toolbar.tool-select.has-selection.sel-stroke #wb-color-btn,
#wb-toolbar.tool-select.has-selection.sel-shape #wb-color-btn,
#wb-toolbar.tool-select.has-selection.sel-text #wb-color-btn { display: inline-flex; }
#wb-toolbar.tool-select.has-selection.sel-shape #wb-shapes { display: inline-flex; }
#wb-toolbar.tool-select.has-selection.sel-text #wb-fonts,
#wb-toolbar.tool-select.has-selection.sel-text #wb-text-sizes { display: inline-flex; }
/* Line-spacing options (only shown when lines tool active) */
#wb-grid-sizes {
display: none;
align-items: center;
gap: 4px;
}
#wb-toolbar.tool-lines #wb-grid-sizes { display: inline-flex; }
#wb-grid-sizes button {
height: 28px;
min-width: 28px;
padding: 0 6px;
font-size: 11px;
font-weight: 600;
}
/* Shape options (only shown when the shape tool is active). */
#wb-shapes {
display: none;
align-items: center;
gap: 2px;
}
#wb-toolbar.tool-box #wb-shapes { display: inline-flex; }
#wb-shapes button {
width: 28px;
height: 28px;
padding: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
}
#wb-shapes button:hover { background: var(--bg-hover); color: var(--text); }
#wb-shapes button.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
#wb-shapes svg { width: 18px; height: 16px; }
@media (max-width: 768px) {
#wb-shapes button { width: 36px; height: 36px; }
#wb-shapes svg { width: 22px; height: 22px; }
}
/* Text-tool options (font + size). Only shown when the text tool is active.
Stroke-size doesn't apply to text, so hide #wb-sizes in that mode. */
#wb-fonts, #wb-text-sizes {
display: none;
align-items: center;
gap: 2px;
}
#wb-toolbar.tool-text #wb-fonts,
#wb-toolbar.tool-text #wb-text-sizes { display: inline-flex; }
#wb-toolbar.tool-text #wb-sizes { display: none; }
#wb-fonts button {
width: 30px;
height: 28px;
padding: 0;
font-size: 13px;
color: var(--text-muted);
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
}
#wb-text-sizes button {
width: 26px;
height: 28px;
padding: 0;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
}
#wb-fonts button:hover, #wb-text-sizes button:hover {
background: var(--bg-hover); color: var(--text);
}
#wb-fonts button.active, #wb-text-sizes button.active {
background: var(--accent); color: #fff; border-color: var(--accent);
}
/* Inline text-entry input that hovers over the canvas while the user types.
#wb-canvas-host already has position:relative. */
.wb-text-entry {
position: absolute;
z-index: 5;
margin: 0;
padding: 1px 4px;
background: rgba(255, 255, 255, 0.92);
color: inherit;
border: 1px dashed var(--accent);
border-radius: 2px;
outline: none;
min-width: 60px;
line-height: 1.2;
}
#wb-canvas.text { cursor: text; }
@media (max-width: 768px) {
#wb-fonts button { width: 36px; height: 36px; font-size: 14px; }
#wb-text-sizes button { width: 36px; height: 36px; font-size: 14px; }
}
/* Toolbar group separator */
.wb-sep {
display: inline-block;
width: 1px;
height: 24px;
background: var(--border);
margin: 0 4px;
}
#wb-canvas.select { cursor: default; }
#wb-canvas.select.dragging { cursor: grabbing; }
#wb-canvas.box { cursor: crosshair; }
#wb-status {
margin-left: auto;
font-size: 11px;
color: var(--text-dim);
}
#wb-canvas-host {
flex: 1 1 0;
min-height: 0;
overflow: hidden;
background: #ffffff;
position: relative;
}
#wb-canvas {
background: #ffffff;
cursor: crosshair;
touch-action: none;
display: block;
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
will-change: transform;
}
#wb-canvas.eraser { cursor: cell; }
#wb-canvas.pan { cursor: grab; }
#wb-canvas.pan.panning { cursor: grabbing; }
/* ---------- Mobile / narrow-screen ---------- */
#sidebar-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 50;
}
#sidebar-toggle {
display: none;
position: fixed;
top: 4px;
left: 6px;
z-index: 70;
width: 36px;
height: 28px;
padding: 0;
font-size: 16px;
line-height: 1;
background: var(--bg-elevated);
color: var(--text);
border: 1px solid var(--border);
border-radius: 4px;
}
/* Same ▶ glyph on desktop and mobile — mirrors the in-sidebar ◀ collapse
button so opening / closing the sidebar uses the same visual cue. */
/* Desktop collapsed state: hide sidebar, expose the floating toggle. */
@media (min-width: 769px) {
body.sidebar-collapsed #app { grid-template-columns: 1fr; }
body.sidebar-collapsed #sidebar { display: none; }
body.sidebar-collapsed #sidebar-toggle {
/* Match the in-sidebar ◀ collapse button so the pair looks symmetric. */
display: block;
top: 6px;
left: 8px;
width: 22px;
height: 22px;
font-size: 11px;
}
body.sidebar-collapsed.offline #sidebar-toggle { top: 36px; }
/* Reserve space at the top-left of the view-switcher so the floating
toggle button doesn't sit on top of the leftmost tab. */
body.sidebar-collapsed #view-switcher { padding-left: 36px; }
}
@media (pointer: coarse) {
/* Suppress iOS native long-press text-selection on tappable rows */
.category-item, .tab, #wb-tab-list .tab, #flow-tab-list .tab, #image-tab-list .tab {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
/* iOS Safari (and Chrome on iOS) auto-zooms when a focused form control
has a computed font-size below 16px. Force every native text input to
>=16px on touch devices so the page doesn't jump on focus. CodeMirror
uses contenteditable, not , so it isn't affected by this rule. */
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], input[type="url"],
input[type="tel"], input[type="date"], input[type="time"],
input:not([type]), textarea, select {
font-size: 16px;
}
}
@media (max-width: 768px) {
#sidebar-toggle {
display: block;
top: 6px;
height: 36px;
width: 36px;
font-size: 22px;
}
body.sidebar-open #sidebar-toggle { display: none; }
body.offline #sidebar-toggle { top: 42px; }
/* In-sidebar ◀ collapse arrow stays visible on mobile too so the
"open ▶ / close ◀" pair is symmetric across both layouts. */
#sidebar-collapse-btn { width: 36px; height: 36px; font-size: 22px; }
/* Taller top bars + icon-only view-switcher tabs (saves horizontal space
so all five fit, often without needing the pin-to-hide menu). */
#view-switcher { padding: 8px 10px 8px 56px; }
#view-switcher button { padding: 8px 10px; font-size: 14px; }
#view-switcher .view-icon { display: inline-flex; align-items: center; }
#view-switcher .view-label { display: none; }
#view-switcher .view-icon svg { width: 22px; height: 22px; }
#tab-bar, #wb-tab-bar, #flow-tab-bar, #ls-tab-bar { min-height: 44px; height: 44px; }
#tab-list .tab, #wb-tab-list .tab, #flow-tab-list .tab, #ls-tab-list .tab {
min-height: 40px; padding: 0 14px; font-size: 14px;
}
#add-note-btn, #wb-add-btn, #flow-add-btn, #ls-add-btn, #page-add-btn { width: 36px; height: 36px; font-size: 22px; }
#add-category-btn { width: 36px; height: 36px; font-size: 22px; }
/* Sidebar brand: bigger logo + tap-friendly home button on mobile. */
.sidebar-logo { width: 28px; height: 28px; border-radius: 6px; }
#open-default-btn { width: 36px; height: 36px; }
#open-default-btn svg { width: 20px; height: 20px; }
#app {
grid-template-columns: 1fr;
}
#sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 260px;
max-width: 80vw;
z-index: 60;
transform: translateX(-100%);
transition: transform 0.18s ease-out;
box-shadow: var(--shadow-card);
}
body.sidebar-open #sidebar { transform: translateX(0); }
body:not(.sidebar-open) #sidebar-backdrop { display: none; }
/* Bigger touch targets */
.category-item { min-height: 44px; padding: 8px 14px 8px calc(14px + var(--depth, 0) * 16px); font-size: 14px; }
/* Bigger collapse-button touch target on mobile. */
.category-toggle { width: 40px; height: 40px; font-size: 30px; margin-left: 4px; }
.tab-close { padding: 6px; }
/* Whiteboard toolbar buttons match the rest of the app on mobile:
36px-tall buttons with 22x22 SVGs (notes/lists icon size). The text
buttons in #wb-grid-sizes / #wb-text-sizes / #wb-fonts share the
same 36px height for a consistent tap-target row. */
#wb-tools button,
#wb-actions button,
#wb-toolbar #wb-color-btn,
#wb-toolbar #wb-grid-btn { width: 36px; height: 36px; }
#wb-tools button svg,
#wb-actions button svg,
#wb-grid-btn svg { width: 22px; height: 22px; }
#wb-color-grid { width: 22px; height: 22px; }
#wb-sizes button { width: 36px; height: 36px; }
#wb-grid-sizes button { min-width: 36px; height: 36px; font-size: 14px; }
#menu-btn {
width: 36px;
height: 36px;
font-size: 22px;
border-color: var(--border);
}
/* Bigger swatches need bigger grid cells, otherwise they overflow past the
picker's right edge (the column track stays at 24px even as the children
grow to 36px). */
.color-grid { grid-template-columns: repeat(5, 36px); }
.color-swatch { width: 36px; height: 36px; }
/* Lift status bar and sidebar footer over the iOS Safari floating URL pill /
search overlay. --bottom-overlay is set from JS (window.visualViewport)
and equals the live overlay height; falls back to env(safe-area-inset-bottom)
when JS hasn't measured yet. */
/* Only the sidebar footer is bottom-docked and needs lifting over the iOS
Safari pill. The status bar moved to the top, so adding bottom inset to it
just inflated its height (and grew further when --bottom-overlay changed
on input focus). It uses the uniform --bar-h instead. */
#sidebar-footer {
padding-bottom: max(env(safe-area-inset-bottom), var(--bottom-overlay, 0px));
height: calc(48px + max(env(safe-area-inset-bottom), var(--bottom-overlay, 0px)));
}
/* Notes status bar mirrors the lists status bar on mobile: bigger tap
targets, save-status hidden so the controls fill the row, and the set
centred so it sits with equal margin either side. */
#status-bar {
gap: 8px;
justify-content: center;
}
#status-bar #save-status { display: none; }
/* Lists options bar mobile sizing lives in its own @media block after the
base #ls-status-bar rules (further down in this file) so source order
wins — placing it here would be overridden by the base rules. */
#offline-banner { font-size: 13px; padding: 8px 12px; }
body.offline #app { padding-top: 36px; }
}
/* ---------- Lists ---------- */
#lists-view {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1 1 0;
}
#ls-tab-bar {
background: var(--bg-tab-bar);
border-bottom: 1px solid var(--border);
display: flex;
align-items: stretch;
min-width: 0;
height: 34px;
flex: 0 0 auto;
}
#ls-tab-list {
display: flex;
flex: 0 1 auto;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
}
#ls-tab-list::-webkit-scrollbar { height: 6px; }
#ls-tab-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
#ls-tab-list::-webkit-scrollbar-track { background: transparent; }
#ls-add-btn {
flex: 0 0 auto;
align-self: center;
width: 26px;
height: 24px;
margin: 0 4px 0 6px;
padding: 0;
font-size: 16px;
line-height: 1;
color: var(--text-muted);
border-radius: 3px;
border: 1px solid transparent;
background: transparent;
cursor: pointer;
}
#ls-add-btn:hover { background: var(--bg-hover); color: var(--text); }
#ls-host {
flex: 1 1 0;
min-height: 0;
overflow-y: auto;
padding: 14px 18px 24px;
display: flex;
flex-direction: column;
gap: 6px;
}
#ls-title {
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
color: var(--text);
font: inherit;
font-size: 20px;
font-weight: 600;
padding: 4px 6px;
margin-bottom: 4px;
width: 100%;
min-width: 0;
}
#ls-title::placeholder { color: var(--text-dim); font-weight: 400; }
#ls-title:focus { outline: none; border-color: var(--border); background: var(--bg-input); }
#ls-items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.ls-item {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 6px;
border-radius: 4px;
}
.ls-item:hover { background: var(--bg-hover); }
.ls-item.checked .ls-text { text-decoration: line-through; color: var(--text-dim); }
/* --- Per-item descriptions (toggled per list via the toolbar) --- */
/* Hidden entirely unless the list has descriptions enabled. */
.ls-desc, .ls-desc-add { display: none; }
/* When on: title goes bold, and the row wraps so the description sits on its
own line beneath it (indented to line up past the checkbox/number). The
description inherits the item's text colour and is muted via opacity, so it
adapts to every list style/theme without per-style colour rules. */
#lists-view.descriptions-on .ls-item { flex-wrap: wrap; }
#lists-view.descriptions-on .ls-text { font-weight: 600; }
#lists-view.descriptions-on .ls-desc-add { display: inline-block; }
#lists-view.descriptions-on .ls-item.has-desc .ls-desc-add,
#lists-view.descriptions-on .ls-item.editing-desc .ls-desc-add { display: none; }
#lists-view.descriptions-on .ls-item.has-desc .ls-desc,
#lists-view.descriptions-on .ls-item.editing-desc .ls-desc { display: block; }
.ls-desc {
flex-basis: 100%;
box-sizing: border-box;
width: calc(100% - 26px);
margin: 1px 0 2px 26px;
padding: 3px 5px;
font: inherit;
font-size: 12px;
font-weight: 400;
line-height: 1.4;
color: inherit;
opacity: 0.8;
resize: none;
overflow: hidden;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
}
.ls-desc:focus {
outline: none;
opacity: 1;
background: rgba(127, 127, 127, 0.10);
border-color: rgba(127, 127, 127, 0.35);
}
.ls-desc::placeholder { opacity: 0.6; }
.ls-desc-add {
flex-basis: 100%;
width: max-content;
margin: 0 0 2px 26px;
padding: 1px 3px;
font-size: 11px;
color: inherit;
opacity: 0.55;
background: transparent;
border: none;
border-radius: 3px;
cursor: pointer;
text-align: left;
}
.ls-desc-add:hover { opacity: 0.95; text-decoration: underline; }
.ls-check {
flex: 0 0 auto;
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--accent);
}
.ls-num {
flex: 0 0 auto;
min-width: 1.4em;
text-align: right;
color: var(--text-dim);
font-variant-numeric: tabular-nums;
font-size: 13px;
user-select: none;
}
.ls-num:empty { display: none; }
.ls-text {
flex: 1 1 auto;
background: transparent;
border: 1px solid transparent;
border-radius: 3px;
color: var(--text);
font: inherit;
font-size: 14px;
line-height: 1.4;
padding: 4px 6px;
min-width: 0;
/* Now a ]