Full document, spreadsheet, slideshow, and diagram tooling
1/* ========================================================
2 Docs — Local-first Office Suite
3 Aesthetic: Refined Editorial + Industrial Utility
4 No external font dependencies — system fonts only.
5 ======================================================== */
6
7/* --- Tokens --- */
8:root {
9 --color-bg: #f5f3f0;
10 --color-bg: oklch(0.965 0.005 75);
11 --color-surface: #ede9e4;
12 --color-surface: oklch(0.935 0.008 75);
13 --color-surface-alt: #e7e2dc;
14 --color-surface-alt: oklch(0.915 0.01 75);
15 --color-text: #221812;
16 --color-text: oklch(0.22 0.02 55);
17 --color-text-muted: #655c56;
18 --color-text-muted: oklch(0.48 0.015 55);
19 --color-text-faint: #8b8581;
20 --color-text-faint: oklch(0.62 0.01 55);
21 --color-accent: #ab413e;
22 --color-accent: oklch(0.52 0.14 25);
23 --color-accent-hover:#972e2d;
24 --color-accent-hover:oklch(0.46 0.14 25);
25 --color-teal: #006e6f;
26 --color-teal: oklch(0.48 0.1 195);
27 --color-teal-light: #bae0e0;
28 --color-teal-light: oklch(0.88 0.04 195);
29 --color-border: #d7d4cf;
30 --color-border: oklch(0.87 0.008 75);
31 --color-border-strong:#bbb7b0;
32 --color-border-strong:oklch(0.78 0.01 75);
33 --color-grid-line: #cecac3;
34 --color-grid-line: oklch(0.84 0.01 75);
35 --color-grid-header-line: #c9c3bc;
36 --color-grid-header-line: oklch(0.82 0.012 75);
37 --color-hover: #e9e4dd;
38 --color-hover: oklch(0.92 0.01 75);
39 --color-focus: #006e6f4d;
40 --color-focus: oklch(0.48 0.1 195 / 0.3);
41 --color-success: #1c985a;
42 --color-success: oklch(0.6 0.14 155);
43 --color-warning: #cd9c1f;
44 --color-warning: oklch(0.72 0.14 85);
45 --color-danger: #bd413f;
46 --color-danger: oklch(0.55 0.16 25);
47 --color-encrypted: #187c49;
48 --color-encrypted: oklch(0.52 0.12 155);
49
50 --font-display: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
51 --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
52 --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
53
54 --space-xs: 0.25rem;
55 --space-sm: 0.5rem;
56 --space-md: 1rem;
57 --space-lg: 1.5rem;
58 --space-xl: 2.5rem;
59 --space-2xl: 4rem;
60
61 --radius-sm: 3px;
62 --radius-md: 6px;
63 --radius-lg: 10px;
64 --radius-pill: 9999px;
65
66 --shadow-sm: 0 1px 2px #2218120f;
67 --shadow-sm: 0 1px 2px oklch(0.22 0.02 55 / 0.06);
68 --shadow-md: 0 2px 8px #22181214;
69 --shadow-md: 0 2px 8px oklch(0.22 0.02 55 / 0.08);
70 --shadow-lg: 0 8px 24px #2218121a;
71 --shadow-lg: 0 8px 24px oklch(0.22 0.02 55 / 0.1);
72
73 --transition-fast: 120ms ease-out;
74 --transition-med: 200ms ease-out;
75
76 --color-text-secondary: #655c56;
77 --color-text-secondary: oklch(0.48 0.015 55);
78 --color-bg-secondary: #ede9e4;
79 --color-bg-secondary: oklch(0.935 0.008 75);
80 --color-surface-raised: #eeeae5;
81 --color-surface-raised: oklch(0.94 0.008 75);
82
83 /* Colors that need dark-mode overrides but are used inline */
84 --color-btn-primary-text: #f7f5f1;
85 --color-btn-primary-text: oklch(0.97 0.005 75);
86 --color-collab-text: #f7f5f1;
87 --color-collab-text: oklch(0.97 0.005 75);
88 --color-cursor-label: #f7f5f1;
89 --color-cursor-label: oklch(0.97 0.005 75);
90 --color-cell-editor-bg: #fcfcfa;
91 --color-cell-editor-bg: oklch(0.99 0.002 75);
92 --color-modal-backdrop: #22181280;
93 --color-modal-backdrop: oklch(0.22 0.02 55 / 0.5);
94 --color-btn-active-bg: #ab413e14;
95 --color-btn-active-bg: oklch(0.52 0.14 25 / 0.08);
96
97 /* Comment highlight */
98 --color-comment-bg: #f7e2b8;
99 --color-comment-bg: oklch(0.92 0.06 85);
100 --color-comment-border: #cd9c1f;
101 --color-comment-border: oklch(0.72 0.14 85);
102 --color-comment-bg-hover: #f0d49b;
103 --color-comment-bg-hover: oklch(0.88 0.08 85);
104
105 /* Search highlight */
106 --color-search-match: #fcd176;
107 --color-search-match: oklch(0.88 0.12 85);
108 --color-search-match-active: #ef852e;
109 --color-search-match-active: oklch(0.72 0.16 55);
110 --color-search-match-text: #f7f5f1;
111 --color-search-match-text: oklch(0.97 0.005 75);
112
113 /* Range selection */
114 --color-range-bg: #006e6f1f;
115 --color-range-bg: oklch(0.48 0.1 195 / 0.12);
116 --color-range-header-bg: #006e6f26;
117 --color-range-header-bg: oklch(0.48 0.1 195 / 0.15);
118 --color-merge-active-bg: #006e6f1a;
119 --color-merge-active-bg: oklch(0.48 0.1 195 / 0.1);
120
121 /* Color swatch */
122 --color-swatch-height: 4px;
123 --color-highlight-default: #ffefb1;
124 --color-highlight-default: oklch(0.95 0.08 95);
125
126 /* Shadows (use dark base) */
127 --shadow-color: #221812;
128 --shadow-color: oklch(0.22 0.02 55);
129
130 /* Z-Index Scale — documented stacking context hierarchy.
131 Grid-internal micro-stacking (0-6) uses literal values.
132 Everything above uses these tokens for consistency. */
133 --z-component: 10; /* toolbar, cell editor, diagram panels */
134 --z-float: 50; /* dropdowns, block handle, version badge */
135 --z-popover: 60; /* comment popover, block context menu */
136 --z-sticky: 80; /* sort indicator, validation dropdown */
137 --z-overlay: 100; /* resize lines, autocomplete, slash menu */
138 --z-tooltip: 200; /* tooltips, link preview, suggestions */
139 --z-drop: 300; /* drop zone overlay, notification toast */
140 --z-panel: 900; /* gallery sidebar, floating panels */
141 --z-modal: 1000; /* modal dialog, print preview, presenter */
142 --z-above-modal: 1100; /* formula tooltip, find-replace overlay */
143 --z-menu: 9999; /* context menu, command palette */
144 --z-skip: 10000;/* skip-to-content link */
145}
146
147/* --- Dark theme --- */
148[data-theme="dark"] {
149 color-scheme: dark;
150 --color-bg: #0f0d0b;
151 --color-bg: oklch(0.16 0.005 75);
152 --color-surface: #181612;
153 --color-surface: oklch(0.20 0.008 75);
154 --color-surface-alt: #221f1a;
155 --color-surface-alt: oklch(0.24 0.01 75);
156 --color-text: #dbd7d0;
157 --color-text: oklch(0.88 0.01 75);
158 --color-text-muted: #938e89;
159 --color-text-muted: oklch(0.65 0.01 75);
160 --color-text-faint: #837e78;
161 --color-text-faint: oklch(0.62 0.008 75);
162 --color-text-secondary: #938e89;
163 --color-text-secondary: oklch(0.65 0.01 75);
164 --color-bg-secondary: #181612;
165 --color-bg-secondary: oklch(0.20 0.008 75);
166 --color-surface-raised: #1d1a17;
167 --color-surface-raised: oklch(0.22 0.008 75);
168 --color-accent: #cd605a;
169 --color-accent: oklch(0.62 0.14 25);
170 --color-accent-hover: #b84d49;
171 --color-accent-hover: oklch(0.56 0.14 25);
172 --color-teal: #0f9293;
173 --color-teal: oklch(0.60 0.1 195);
174 --color-teal-light: #0b2f2f;
175 --color-teal-light: oklch(0.28 0.04 195);
176 --color-border: #2b2825;
177 --color-border: oklch(0.28 0.008 75);
178 --color-border-strong:#46423d;
179 --color-border-strong:oklch(0.38 0.01 75);
180 --color-grid-line: #262420;
181 --color-grid-line: oklch(0.26 0.008 75);
182 --color-grid-header-line: #312d28;
183 --color-grid-header-line: oklch(0.30 0.01 75);
184 --color-hover: #201c18;
185 --color-hover: oklch(0.23 0.01 75);
186 --color-focus: #0f92934d;
187 --color-focus: oklch(0.60 0.1 195 / 0.3);
188 --color-success: #33a868;
189 --color-success: oklch(0.65 0.14 155);
190 --color-warning: #cd9c1f;
191 --color-warning: oklch(0.72 0.14 85);
192 --color-danger: #ce514d;
193 --color-danger: oklch(0.60 0.16 25);
194 --color-encrypted: #3f9b65;
195 --color-encrypted: oklch(0.62 0.12 155);
196
197 --shadow-sm: 0 1px 2px #0100004d;
198 --shadow-sm: 0 1px 2px oklch(0.05 0.005 75 / 0.3);
199 --shadow-md: 0 2px 8px #01000066;
200 --shadow-md: 0 2px 8px oklch(0.05 0.005 75 / 0.4);
201 --shadow-lg: 0 8px 24px #01000080;
202 --shadow-lg: 0 8px 24px oklch(0.05 0.005 75 / 0.5);
203
204 --color-btn-primary-text: #f7f5f1;
205 --color-btn-primary-text: oklch(0.97 0.005 75);
206 --color-collab-text: #f7f5f1;
207 --color-collab-text: oklch(0.97 0.005 75);
208 --color-cursor-label: #f7f5f1;
209 --color-cursor-label: oklch(0.97 0.005 75);
210 --color-cell-editor-bg: #13110f;
211 --color-cell-editor-bg: oklch(0.18 0.005 75);
212 --color-modal-backdrop: #010000b3;
213 --color-modal-backdrop: oklch(0.05 0.005 75 / 0.7);
214 --color-btn-active-bg: #cd605a26;
215 --color-btn-active-bg: oklch(0.62 0.14 25 / 0.15);
216
217 --color-highlight-default: #563e00;
218 --color-highlight-default: oklch(0.38 0.08 85);
219
220 --color-comment-bg: #372c15;
221 --color-comment-bg: oklch(0.30 0.04 85);
222 --color-comment-border: #7d5e07;
223 --color-comment-border: oklch(0.50 0.10 85);
224 --color-comment-bg-hover: #46381a;
225 --color-comment-bg-hover: oklch(0.35 0.05 85);
226
227 --color-search-match: #4d3600;
228 --color-search-match: oklch(0.35 0.08 85);
229 --color-search-match-active: #964d09;
230 --color-search-match-active: oklch(0.50 0.12 55);
231 --color-search-match-text: #f7f5f1;
232 --color-search-match-text: oklch(0.97 0.005 75);
233
234 --color-range-bg: #0f929326;
235 --color-range-bg: oklch(0.60 0.1 195 / 0.15);
236 --color-range-header-bg: #0f929333;
237 --color-range-header-bg: oklch(0.60 0.1 195 / 0.20);
238 --color-merge-active-bg: #0f929326;
239 --color-merge-active-bg: oklch(0.60 0.1 195 / 0.15);
240}
241
242@media (prefers-color-scheme: dark) {
243 :root:not([data-theme="light"]) {
244 color-scheme: dark;
245 --color-bg: #0f0d0b;
246 --color-bg: oklch(0.16 0.005 75);
247 --color-surface: #181612;
248 --color-surface: oklch(0.20 0.008 75);
249 --color-surface-alt: #221f1a;
250 --color-surface-alt: oklch(0.24 0.01 75);
251 --color-text: #dbd7d0;
252 --color-text: oklch(0.88 0.01 75);
253 --color-text-muted: #938e89;
254 --color-text-muted: oklch(0.65 0.01 75);
255 --color-text-faint: #837e78;
256 --color-text-faint: oklch(0.62 0.008 75);
257 --color-text-secondary: #938e89;
258 --color-text-secondary: oklch(0.65 0.01 75);
259 --color-bg-secondary: #181612;
260 --color-bg-secondary: oklch(0.20 0.008 75);
261 --color-surface-raised: #1d1a17;
262 --color-surface-raised: oklch(0.22 0.008 75);
263 --color-accent: #cd605a;
264 --color-accent: oklch(0.62 0.14 25);
265 --color-accent-hover: #b84d49;
266 --color-accent-hover: oklch(0.56 0.14 25);
267 --color-teal: #0f9293;
268 --color-teal: oklch(0.60 0.1 195);
269 --color-teal-light: #0b2f2f;
270 --color-teal-light: oklch(0.28 0.04 195);
271 --color-border: #2b2825;
272 --color-border: oklch(0.28 0.008 75);
273 --color-border-strong:#46423d;
274 --color-border-strong:oklch(0.38 0.01 75);
275 --color-grid-line: #262420;
276 --color-grid-line: oklch(0.26 0.008 75);
277 --color-grid-header-line: #312d28;
278 --color-grid-header-line: oklch(0.30 0.01 75);
279 --color-hover: #201c18;
280 --color-hover: oklch(0.23 0.01 75);
281 --color-focus: #0f92934d;
282 --color-focus: oklch(0.60 0.1 195 / 0.3);
283 --color-success: #33a868;
284 --color-success: oklch(0.65 0.14 155);
285 --color-warning: #cd9c1f;
286 --color-warning: oklch(0.72 0.14 85);
287 --color-danger: #ce514d;
288 --color-danger: oklch(0.60 0.16 25);
289 --color-encrypted: #3f9b65;
290 --color-encrypted: oklch(0.62 0.12 155);
291
292 --shadow-sm: 0 1px 2px #0100004d;
293 --shadow-sm: 0 1px 2px oklch(0.05 0.005 75 / 0.3);
294 --shadow-md: 0 2px 8px #01000066;
295 --shadow-md: 0 2px 8px oklch(0.05 0.005 75 / 0.4);
296 --shadow-lg: 0 8px 24px #01000080;
297 --shadow-lg: 0 8px 24px oklch(0.05 0.005 75 / 0.5);
298
299 --color-btn-primary-text: #f7f5f1;
300 --color-btn-primary-text: oklch(0.97 0.005 75);
301 --color-collab-text: #f7f5f1;
302 --color-collab-text: oklch(0.97 0.005 75);
303 --color-cursor-label: #f7f5f1;
304 --color-cursor-label: oklch(0.97 0.005 75);
305 --color-cell-editor-bg: #13110f;
306 --color-cell-editor-bg: oklch(0.18 0.005 75);
307 --color-modal-backdrop: #010000b3;
308 --color-modal-backdrop: oklch(0.05 0.005 75 / 0.7);
309 --color-btn-active-bg: #cd605a26;
310 --color-btn-active-bg: oklch(0.62 0.14 25 / 0.15);
311
312 --color-highlight-default: #563e00;
313 --color-highlight-default: oklch(0.38 0.08 85);
314
315 --color-comment-bg: #372c15;
316 --color-comment-bg: oklch(0.30 0.04 85);
317 --color-comment-border: #7d5e07;
318 --color-comment-border: oklch(0.50 0.10 85);
319 --color-comment-bg-hover: #46381a;
320 --color-comment-bg-hover: oklch(0.35 0.05 85);
321
322 --color-search-match: #4d3600;
323 --color-search-match: oklch(0.35 0.08 85);
324 --color-search-match-active: #964d09;
325 --color-search-match-active: oklch(0.50 0.12 55);
326 --color-search-match-text: #f7f5f1;
327 --color-search-match-text: oklch(0.97 0.005 75);
328
329 --color-range-bg: #0f929326;
330 --color-range-bg: oklch(0.60 0.1 195 / 0.15);
331 --color-range-header-bg: #0f929333;
332 --color-range-header-bg: oklch(0.60 0.1 195 / 0.20);
333 --color-merge-active-bg: #0f929326;
334 --color-merge-active-bg: oklch(0.60 0.1 195 / 0.15);
335 }
336}
337
338/* --- Reduced motion: disable transitions/animations for users who prefer it --- */
339@media (prefers-contrast: more) {
340 :root {
341 --color-text-muted: #433831;
342 --color-text-muted: oklch(0.35 0.02 55);
343 --color-text-faint: #544b45;
344 --color-text-faint: oklch(0.42 0.015 55);
345 --color-border: #9c9792;
346 --color-border: oklch(0.68 0.01 75);
347 --color-border-strong: #76716a;
348 --color-border-strong: oklch(0.55 0.012 75);
349 --color-grid-line: #9d9790;
350 --color-grid-line: oklch(0.68 0.012 75);
351 --color-grid-header-line: #8c857c;
352 --color-grid-header-line: oklch(0.62 0.015 75);
353 --color-hover: #d7d0c6;
354 --color-hover: oklch(0.86 0.015 75);
355 --color-focus: #006e6f99;
356 --color-focus: oklch(0.48 0.1 195 / 0.6);
357 }
358 [data-theme="dark"] {
359 --color-text-muted: #bbb7b0;
360 --color-text-muted: oklch(0.78 0.01 75);
361 --color-text-faint: #a8a49e;
362 --color-text-faint: oklch(0.72 0.01 75);
363 --color-border: #59554f;
364 --color-border: oklch(0.45 0.01 75);
365 --color-border-strong: #76716a;
366 --color-border-strong: oklch(0.55 0.012 75);
367 --color-grid-line: #514c46;
368 --color-grid-line: oklch(0.42 0.012 75);
369 --color-grid-header-line: #635d54;
370 --color-grid-header-line: oklch(0.48 0.015 75);
371 --color-hover: #2d2821;
372 --color-hover: oklch(0.28 0.015 75);
373 --color-focus: #0f929399;
374 --color-focus: oklch(0.60 0.1 195 / 0.6);
375 }
376}
377
378@media (prefers-reduced-motion: reduce) {
379 :root {
380 --transition-fast: 0ms;
381 --transition-med: 0ms;
382 }
383 *, *::before, *::after {
384 animation-duration: 0.01ms !important;
385 animation-iteration-count: 1 !important;
386 transition-duration: 0.01ms !important;
387 scroll-behavior: auto !important;
388 }
389}
390
391/* --- Reset --- */
392*, *::before, *::after { box-sizing: border-box; margin: 0; }
393
394/* Prevent zoom on input focus on mobile (iOS double-tap-to-zoom) */
395input, select, textarea {
396 touch-action: manipulation;
397}
398
399html {
400 font-size: clamp(15px, 1vw + 12px, 17px);
401 -webkit-font-smoothing: antialiased;
402 -moz-osx-font-smoothing: grayscale;
403 color-scheme: light dark;
404 overflow-x: hidden;
405}
406
407body {
408 font-family: var(--font-body);
409 color: var(--color-text);
410 background: var(--color-bg);
411 line-height: 1.55;
412 min-height: 100dvh;
413 overflow-x: hidden;
414 max-width: 100vw;
415 transition: background-color var(--transition-med), color var(--transition-med);
416}
417
418/* Smooth transitions for theme switching on key surfaces */
419.app-topbar,
420.toolbar,
421.formula-bar,
422.sheet-tabs,
423.docs-footer,
424.modal,
425.find-bar,
426.comment-popover,
427.toolbar-dropdown-menu,
428.toolbar-overflow-menu,
429.new-menu,
430.more-menu-panel,
431.doc-item,
432.folder-card,
433.sort-menu,
434.search-input,
435.modal-backdrop,
436.landing-header,
437.editor-container,
438.sheet-container {
439 transition: background-color var(--transition-med), border-color var(--transition-med), color var(--transition-med);
440}
441
442/* --- Theme toggle button --- */
443.theme-toggle {
444 padding: 0.4rem;
445 border-radius: var(--radius-sm);
446 background: transparent;
447 border: none;
448 color: var(--color-text-muted);
449 cursor: pointer;
450 display: inline-flex;
451 align-items: center;
452 justify-content: center;
453 transition: all var(--transition-fast);
454 font-size: 1rem;
455 line-height: 1;
456}
457.theme-toggle:hover {
458 color: var(--color-text);
459 background: var(--color-hover);
460}
461
462/* --- Typography --- */
463h1, h2, h3, h4, h5, h6 {
464 font-family: var(--font-display);
465 font-weight: 600;
466 line-height: 1.2;
467 letter-spacing: -0.01em;
468}
469
470h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
471h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
472h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
473
474a {
475 color: var(--color-teal);
476 text-decoration-thickness: 1px;
477 text-underline-offset: 2px;
478 transition: color var(--transition-fast);
479}
480a:hover { color: var(--color-accent); }
481
482code, pre {
483 font-family: var(--font-mono);
484 font-size: 0.9em;
485}
486
487/* --- Buttons --- */
488.btn {
489 display: inline-flex;
490 align-items: center;
491 gap: var(--space-sm);
492 padding: 0.55rem 1.2rem;
493 font-family: var(--font-body);
494 font-size: 0.875rem;
495 font-weight: 500;
496 border: 1px solid transparent;
497 border-radius: var(--radius-sm);
498 cursor: pointer;
499 transition: all var(--transition-fast);
500 text-decoration: none;
501 line-height: 1.3;
502}
503.btn:active { transform: scale(0.98); }
504
505.btn-primary {
506 background: var(--color-accent);
507 color: var(--color-btn-primary-text);
508 border-color: var(--color-accent);
509}
510.btn-primary:hover {
511 background: var(--color-accent-hover);
512 border-color: var(--color-accent-hover);
513 color: var(--color-btn-primary-text);
514}
515
516.btn-secondary {
517 background: transparent;
518 color: var(--color-text);
519 border-color: var(--color-border-strong);
520}
521.btn-secondary:hover {
522 background: var(--color-hover);
523 border-color: var(--color-text-muted);
524}
525
526.btn-ghost {
527 background: transparent;
528 color: var(--color-text-muted);
529 padding: 0.4rem 0.7rem;
530}
531.btn-ghost:hover {
532 color: var(--color-text);
533 background: var(--color-hover);
534}
535
536.btn-icon {
537 padding: 0.4rem;
538 border-radius: var(--radius-sm);
539 background: transparent;
540 border: none;
541 color: var(--color-text-muted);
542 cursor: pointer;
543 display: inline-flex;
544 align-items: center;
545 justify-content: center;
546 transition: all var(--transition-fast);
547 font-size: 16px;
548 line-height: 1;
549 min-width: 28px;
550 min-height: 28px;
551}
552.btn-icon:hover { color: var(--color-text); background: var(--color-hover); }
553.btn-icon.active { color: var(--color-accent); background: var(--color-btn-active-bg); }
554.btn-icon:focus-visible {
555 outline: 2px solid var(--color-accent);
556 outline-offset: 1px;
557}
558.btn-icon.btn-disabled {
559 opacity: 0.35;
560 cursor: default;
561 pointer-events: none;
562}
563
564/* --- Styled Tooltips --- */
565[data-tooltip] {
566 position: relative;
567}
568[data-tooltip]::after {
569 content: attr(data-tooltip);
570 position: absolute;
571 bottom: calc(100% + 6px);
572 left: 50%;
573 transform: translateX(-50%);
574 padding: 4px 8px;
575 border-radius: var(--radius-sm);
576 background: #161616;
577 background: oklch(0.2 0 0);
578 color: #eeeeee;
579 color: oklch(0.95 0 0);
580 font-size: 11px;
581 font-weight: 500;
582 line-height: 1.3;
583 white-space: nowrap;
584 pointer-events: none;
585 opacity: 0;
586 transition: opacity var(--transition-fast);
587 z-index: var(--z-menu);
588}
589[data-tooltip]:hover::after {
590 opacity: 1;
591 transition-delay: 400ms;
592}
593[data-tooltip]:active::after {
594 opacity: 0;
595 transition-delay: 0ms;
596}
597/* Bottom variant for topbar buttons */
598[data-tooltip-pos="bottom"]::after {
599 bottom: auto;
600 top: calc(100% + 6px);
601}
602/* Dark mode tooltip */
603[data-theme="dark"] [data-tooltip]::after {
604 background: #cecece;
605 background: oklch(0.85 0 0);
606 color: #0b0b0b;
607 color: oklch(0.15 0 0);
608}
609@media (prefers-color-scheme: dark) {
610 :root:not([data-theme="light"]) [data-tooltip]::after {
611 background: #cecece;
612 background: oklch(0.85 0 0);
613 color: #0b0b0b;
614 color: oklch(0.15 0 0);
615 }
616}
617
618/* --- Landing Page --- */
619.landing {
620 max-width: min(64rem, 100%);
621 margin: 0 auto;
622 padding: var(--space-2xl) var(--space-lg);
623 min-width: 0;
624 box-sizing: border-box;
625}
626
627.landing-header {
628 padding-bottom: var(--space-2xl);
629 border-bottom: 1px solid var(--color-border);
630}
631
632.brand {
633 display: flex;
634 align-items: center;
635 gap: var(--space-md);
636 margin-bottom: var(--space-sm);
637}
638
639.brand-name {
640 font-family: var(--font-display);
641 font-size: clamp(2.4rem, 5vw, 3.6rem);
642 font-weight: 700;
643 letter-spacing: -0.03em;
644 color: var(--color-text);
645}
646
647.brand-badge {
648 font-family: var(--font-mono);
649 font-size: 0.65rem;
650 font-weight: 600;
651 letter-spacing: 0.1em;
652 text-transform: uppercase;
653 color: var(--color-encrypted);
654 background: var(--color-teal-light);
655 padding: 0.2rem 0.55rem;
656 border-radius: var(--radius-sm);
657}
658
659.landing-actions {
660 display: flex;
661 flex-wrap: wrap;
662 gap: var(--space-sm);
663 margin-top: var(--space-lg);
664}
665
666.new-dropdown {
667 position: relative;
668}
669
670.new-btn {
671 display: inline-flex;
672 align-items: center;
673 gap: 0.5rem;
674 padding: 0.55rem 1rem;
675 background: var(--color-accent);
676 color: var(--color-btn-primary-text);
677 border: 1px solid var(--color-accent);
678 border-radius: var(--radius-md);
679 font: inherit;
680 font-size: 0.95rem;
681 font-weight: 600;
682 cursor: pointer;
683 transition: background var(--transition-fast), border-color var(--transition-fast);
684}
685.new-btn:hover {
686 background: var(--color-accent-hover);
687 border-color: var(--color-accent-hover);
688}
689.new-btn-plus {
690 font-size: 1.15rem;
691 line-height: 1;
692}
693.new-btn-caret {
694 font-size: 0.7rem;
695 opacity: 0.85;
696}
697
698.new-menu {
699 display: none;
700 position: absolute;
701 top: calc(100% + 4px);
702 left: 0;
703 min-width: 200px;
704 background: var(--color-surface);
705 border: 1px solid var(--color-border);
706 border-radius: var(--radius-md);
707 box-shadow: var(--shadow-md);
708 z-index: var(--z-overlay);
709 padding: var(--space-xs);
710 flex-direction: column;
711}
712.new-dropdown.open .new-menu {
713 display: flex;
714}
715
716.new-menu-item {
717 display: flex;
718 align-items: center;
719 gap: var(--space-sm);
720 padding: var(--space-sm) var(--space-md);
721 background: none;
722 border: none;
723 border-radius: var(--radius-sm);
724 color: var(--color-text);
725 font: inherit;
726 font-size: 0.9rem;
727 text-align: left;
728 cursor: pointer;
729 transition: background var(--transition-fast);
730}
731.new-menu-item:hover:not(:disabled) {
732 background: var(--color-hover);
733}
734
735.new-menu-item-disabled {
736 opacity: 0.45;
737 cursor: default;
738 pointer-events: auto;
739}
740.new-menu-item-disabled .new-menu-badge {
741 margin-left: auto;
742 font-size: 0.7rem;
743 padding: 1px 6px;
744 border-radius: var(--radius-sm);
745 background: var(--color-border);
746 color: var(--color-text-muted);
747 text-transform: uppercase;
748 letter-spacing: 0.03em;
749}
750
751.new-menu-icon {
752 font-size: 1rem;
753 width: 1.25rem;
754 text-align: center;
755 color: var(--color-text-muted);
756}
757
758.daily-note-btn {
759 display: inline-flex;
760 align-items: center;
761 gap: 0.5rem;
762 padding: 0.55rem 1rem;
763 background: transparent;
764 color: var(--color-text);
765 border: 1px solid var(--color-border-strong);
766 border-radius: var(--radius-md);
767 font: inherit;
768 font-size: 0.95rem;
769 font-weight: 500;
770 cursor: pointer;
771 transition: background var(--transition-fast), border-color var(--transition-fast);
772}
773.daily-note-btn:hover {
774 background: var(--color-hover);
775 border-color: var(--color-text-muted);
776}
777.daily-note-icon {
778 color: var(--color-accent);
779 font-size: 1rem;
780 line-height: 1;
781}
782
783/* Document list */
784/* ========================================================
785 Recent Documents (#116)
786 ======================================================== */
787
788.recent-section {
789 margin-bottom: var(--space-lg);
790}
791
792.recent-heading {
793 font-family: var(--font-body);
794 font-size: 0.75rem;
795 font-weight: 600;
796 letter-spacing: 0.08em;
797 text-transform: uppercase;
798 color: var(--color-text-faint);
799 margin-bottom: var(--space-sm);
800}
801
802.recent-list {
803 display: flex;
804 gap: var(--space-sm);
805 overflow-x: auto;
806 padding-bottom: var(--space-xs);
807 max-width: 100%;
808 min-width: 0;
809 -webkit-overflow-scrolling: touch;
810}
811
812.recent-card {
813 display: flex;
814 flex-direction: column;
815 gap: 4px;
816 min-width: 140px;
817 max-width: 180px;
818 padding: var(--space-sm) var(--space-md);
819 background: var(--color-surface);
820 border: 1px solid var(--color-border);
821 border-radius: var(--radius-md);
822 text-decoration: none;
823 color: var(--color-text);
824 transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
825}
826
827.recent-card:hover {
828 border-color: var(--color-border-strong);
829 box-shadow: var(--shadow-sm);
830}
831
832.recent-card-icon {
833 font-size: 1.25rem;
834}
835
836.recent-card-name {
837 font-size: 0.8rem;
838 font-weight: 500;
839 overflow: hidden;
840 text-overflow: ellipsis;
841 white-space: nowrap;
842}
843
844.recent-card-type {
845 font-size: 0.65rem;
846 text-transform: uppercase;
847 letter-spacing: 0.05em;
848 color: var(--color-text-faint);
849}
850
851/* --- Pinned section --- */
852.pinned-section {
853 margin-top: var(--space-lg);
854}
855.pinned-heading {
856 font-family: var(--font-body);
857 font-size: 0.7rem;
858 font-weight: 600;
859 text-transform: uppercase;
860 letter-spacing: 0.08em;
861 color: var(--color-text-faint);
862 margin-bottom: var(--space-sm);
863}
864.pinned-list {
865 display: flex;
866 gap: var(--space-sm);
867 overflow-x: auto;
868 padding-bottom: var(--space-sm);
869 max-width: 100%;
870 min-width: 0;
871 -webkit-overflow-scrolling: touch;
872}
873.pinned-card {
874 display: flex;
875 flex-direction: column;
876 gap: var(--space-xs);
877 min-width: 140px;
878 max-width: 180px;
879 padding: var(--space-sm) var(--space-md);
880 border: 1px solid var(--color-border);
881 border-radius: var(--radius-md);
882 text-decoration: none;
883 color: inherit;
884 transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
885 background: var(--color-bg-elevated);
886}
887.pinned-card:hover {
888 box-shadow: var(--shadow-md);
889 border-color: var(--color-accent);
890}
891.pinned-card-icon { font-size: 1.2rem; }
892.pinned-card-name {
893 font-size: 0.8rem;
894 font-weight: 500;
895 overflow: hidden;
896 text-overflow: ellipsis;
897 white-space: nowrap;
898}
899.pinned-card-type {
900 font-size: 0.65rem;
901 text-transform: uppercase;
902 letter-spacing: 0.05em;
903 color: var(--color-text-faint);
904}
905
906/* --- View toggle --- */
907.view-toggle {
908 display: flex;
909 align-items: center;
910 justify-content: center;
911 width: 32px;
912 height: 32px;
913 border: 1px solid var(--color-border);
914 border-radius: var(--radius-sm);
915 background: var(--color-bg);
916 cursor: pointer;
917 color: var(--color-text-secondary);
918 transition: border-color var(--transition-fast), color var(--transition-fast);
919}
920.view-toggle:hover {
921 border-color: var(--color-accent);
922 color: var(--color-accent);
923}
924.view-icon { fill: currentColor; }
925
926.doc-section {
927 margin-top: var(--space-2xl);
928}
929
930.doc-section-title {
931 font-family: var(--font-body);
932 font-size: 0.75rem;
933 font-weight: 600;
934 letter-spacing: 0.08em;
935 text-transform: uppercase;
936 color: var(--color-text-faint);
937 margin-bottom: var(--space-md);
938}
939
940.doc-list {
941 display: flex;
942 flex-direction: column;
943 gap: 1px;
944 background: var(--color-border);
945 border-radius: var(--radius-md);
946 overflow: hidden;
947}
948
949/* Grid view */
950.doc-list.grid-view {
951 display: grid;
952 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
953 gap: var(--space-md);
954 background: transparent;
955 overflow: visible;
956}
957.doc-grid-card {
958 display: flex;
959 flex-direction: column;
960 gap: var(--space-xs);
961 padding: var(--space-md);
962 border: 1px solid var(--color-border);
963 border-radius: var(--radius-md);
964 text-decoration: none;
965 color: inherit;
966 background: var(--color-bg);
967 transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
968 position: relative;
969}
970.doc-grid-card:hover {
971 box-shadow: var(--shadow-md);
972 border-color: var(--color-accent);
973}
974.doc-grid-card-header {
975 display: flex;
976 justify-content: space-between;
977 align-items: center;
978}
979.doc-grid-card-header .doc-item-icon { font-size: 1.5rem; }
980.doc-grid-card-name {
981 font-size: 0.85rem;
982 font-weight: 500;
983 overflow: hidden;
984 text-overflow: ellipsis;
985 white-space: nowrap;
986}
987.doc-grid-card-footer {
988 display: flex;
989 justify-content: space-between;
990 align-items: center;
991 margin-top: auto;
992}
993.doc-grid-card-footer .doc-item-type {
994 font-size: 0.65rem;
995 text-transform: uppercase;
996 letter-spacing: 0.05em;
997 color: var(--color-text-faint);
998}
999.doc-grid-card-footer .doc-item-date {
1000 font-size: 0.65rem;
1001 color: var(--color-text-faint);
1002}
1003.doc-grid-card-actions {
1004 display: none;
1005 position: absolute;
1006 bottom: var(--space-xs);
1007 right: var(--space-xs);
1008 gap: 2px;
1009}
1010.doc-grid-card:hover .doc-grid-card-actions {
1011 display: flex;
1012}
1013
1014.doc-item {
1015 display: flex;
1016 align-items: center;
1017 gap: var(--space-md);
1018 padding: var(--space-md) var(--space-lg);
1019 background: var(--color-surface);
1020 text-decoration: none;
1021 color: inherit;
1022 transition: background var(--transition-fast);
1023}
1024.doc-item:hover {
1025 background: var(--color-hover);
1026 color: inherit;
1027}
1028
1029.doc-item-icon {
1030 font-size: 1.2rem;
1031 opacity: 0.6;
1032}
1033
1034.doc-item-name {
1035 font-weight: 500;
1036 flex: 1;
1037}
1038
1039.doc-item-type {
1040 font-family: var(--font-mono);
1041 font-size: 0.7rem;
1042 letter-spacing: 0.05em;
1043 text-transform: uppercase;
1044 color: var(--color-text-faint);
1045}
1046
1047.doc-item-date {
1048 font-size: 0.8rem;
1049 color: var(--color-text-muted);
1050}
1051
1052/* --- Document Tags (#133) --- */
1053.doc-item-tags {
1054 display: inline-flex;
1055 gap: 4px;
1056 flex-shrink: 0;
1057}
1058
1059.doc-tag-pill {
1060 display: inline-block;
1061 padding: 1px 6px;
1062 font-size: 0.7rem;
1063 border-radius: 9px;
1064 background: var(--color-surface-raised);
1065 color: var(--color-text-muted);
1066 white-space: nowrap;
1067}
1068
1069.tag-filter-bar {
1070 display: flex;
1071 align-items: center;
1072 gap: 6px;
1073 padding: 8px 0;
1074 flex-wrap: wrap;
1075}
1076
1077.tag-filter-label {
1078 font-size: 0.8rem;
1079 color: var(--color-text-muted);
1080 margin-right: 2px;
1081}
1082
1083.tag-filter-pill {
1084 padding: 2px 10px;
1085 font-size: 0.75rem;
1086 border: 1px solid var(--color-border);
1087 border-radius: 12px;
1088 background: transparent;
1089 color: var(--color-text);
1090 cursor: pointer;
1091 transition: background var(--transition-fast), border-color var(--transition-fast);
1092}
1093
1094.tag-filter-pill:hover {
1095 background: var(--color-surface-raised);
1096}
1097
1098.tag-filter-pill.active {
1099 background: var(--color-accent);
1100 color: var(--color-btn-primary-text);
1101 border-color: var(--color-accent);
1102}
1103
1104.doc-item-delete,
1105.doc-item-duplicate,
1106.doc-item-move,
1107.doc-item-tag-edit {
1108 opacity: 0;
1109 transition: opacity var(--transition-fast);
1110}
1111.doc-item:hover .doc-item-delete,
1112.doc-item:hover .doc-item-duplicate,
1113.doc-item:hover .doc-item-move,
1114.doc-item:hover .doc-item-tag-edit { opacity: 1; }
1115
1116/* Touch devices: always show action buttons (no hover state) */
1117@media (hover: none) {
1118 .doc-item-delete,
1119 .doc-item-duplicate,
1120 .doc-item-move,
1121 .doc-item-tag-edit {
1122 opacity: 0.7;
1123 }
1124}
1125
1126/* Star button */
1127.doc-star {
1128 font-size: 1.1rem;
1129 line-height: 1;
1130 color: var(--color-text-faint);
1131 cursor: pointer;
1132 transition: color var(--transition-fast);
1133 flex-shrink: 0;
1134}
1135.doc-star:hover {
1136 color: var(--color-warning);
1137}
1138
1139.empty-state {
1140 text-align: left;
1141 padding: var(--space-xl) 0;
1142 color: var(--color-text-muted);
1143 font-size: 0.95rem;
1144}
1145.empty-state strong {
1146 display: block;
1147 color: var(--color-text);
1148 font-weight: 600;
1149 margin-bottom: var(--space-xs);
1150}
1151
1152/* --- Document toolbar (search, sort, folders) --- */
1153.doc-toolbar {
1154 display: flex;
1155 align-items: center;
1156 justify-content: space-between;
1157 gap: var(--space-md);
1158 margin-bottom: var(--space-md);
1159 flex-wrap: wrap;
1160}
1161
1162.doc-toolbar-actions {
1163 display: flex;
1164 flex-wrap: wrap;
1165 align-items: center;
1166 gap: var(--space-sm);
1167}
1168
1169/* Breadcrumbs */
1170.doc-breadcrumbs {
1171 display: flex;
1172 align-items: center;
1173 gap: var(--space-xs);
1174 font-size: 0.85rem;
1175}
1176
1177.breadcrumb-link {
1178 background: none;
1179 border: none;
1180 color: var(--color-accent);
1181 cursor: pointer;
1182 font: inherit;
1183 padding: 0;
1184 text-decoration: underline;
1185 text-underline-offset: 2px;
1186}
1187.breadcrumb-link:hover {
1188 color: var(--color-accent-hover);
1189}
1190
1191.breadcrumb-sep {
1192 color: var(--color-text-faint);
1193}
1194
1195.breadcrumb-current {
1196 font-weight: 600;
1197 color: var(--color-text);
1198}
1199
1200/* Search */
1201.search-box {
1202 position: relative;
1203 display: flex;
1204 align-items: center;
1205}
1206
1207.search-input {
1208 width: 180px;
1209 padding: var(--space-xs) var(--space-sm);
1210 padding-right: 1.8rem;
1211 border: 1px solid var(--color-border);
1212 border-radius: var(--radius-sm);
1213 background: var(--color-surface);
1214 color: var(--color-text);
1215 font: inherit;
1216 font-size: 0.85rem;
1217 transition: border-color var(--transition-fast), width var(--transition-med);
1218}
1219.search-input:focus {
1220 outline: none;
1221 border-color: var(--color-accent);
1222 width: 240px;
1223}
1224
1225.search-clear {
1226 position: absolute;
1227 right: 4px;
1228 top: 50%;
1229 transform: translateY(-50%);
1230 background: none;
1231 border: none;
1232 color: var(--color-text-faint);
1233 cursor: pointer;
1234 font-size: 1rem;
1235 line-height: 1;
1236 padding: 2px;
1237}
1238.search-clear:hover {
1239 color: var(--color-text);
1240}
1241
1242.no-results {
1243 padding: var(--space-lg) 0;
1244 color: var(--color-text-muted);
1245 font-size: 0.9rem;
1246}
1247
1248/* Sort dropdown */
1249.sort-dropdown {
1250 position: relative;
1251}
1252
1253.sort-btn {
1254 display: flex;
1255 align-items: center;
1256 gap: var(--space-xs);
1257 padding: var(--space-xs) var(--space-sm);
1258 border: 1px solid var(--color-border);
1259 border-radius: var(--radius-sm);
1260 background: var(--color-surface);
1261 color: var(--color-text-muted);
1262 font: inherit;
1263 font-size: 0.8rem;
1264 cursor: pointer;
1265 white-space: nowrap;
1266 transition: border-color var(--transition-fast);
1267}
1268.sort-btn:hover {
1269 border-color: var(--color-border-strong);
1270}
1271
1272.sort-menu {
1273 display: none;
1274 position: absolute;
1275 top: 100%;
1276 right: 0;
1277 margin-top: 4px;
1278 min-width: 160px;
1279 background: var(--color-surface);
1280 border: 1px solid var(--color-border);
1281 border-radius: var(--radius-md);
1282 box-shadow: var(--shadow-md);
1283 z-index: var(--z-overlay);
1284 overflow: hidden;
1285}
1286.sort-menu.open {
1287 display: flex;
1288 flex-direction: column;
1289}
1290
1291.sort-option {
1292 padding: var(--space-sm) var(--space-md);
1293 background: none;
1294 border: none;
1295 color: var(--color-text);
1296 font: inherit;
1297 font-size: 0.85rem;
1298 text-align: left;
1299 cursor: pointer;
1300 transition: background var(--transition-fast);
1301}
1302.sort-option:hover {
1303 background: var(--color-hover);
1304}
1305
1306/* More menu (overflow actions: folder / import / backup) */
1307.more-menu {
1308 position: relative;
1309}
1310
1311.more-btn {
1312 display: inline-flex;
1313 align-items: center;
1314 justify-content: center;
1315 padding: var(--space-xs) var(--space-sm);
1316 border: 1px solid var(--color-border);
1317 border-radius: var(--radius-sm);
1318 background: var(--color-surface);
1319 color: var(--color-text-muted);
1320 font: inherit;
1321 cursor: pointer;
1322 transition: border-color var(--transition-fast), color var(--transition-fast);
1323}
1324.more-btn:hover {
1325 border-color: var(--color-border-strong);
1326 color: var(--color-text);
1327}
1328
1329.more-menu-panel {
1330 display: none;
1331 position: absolute;
1332 top: 100%;
1333 right: 0;
1334 margin-top: 4px;
1335 min-width: 200px;
1336 background: var(--color-surface);
1337 border: 1px solid var(--color-border);
1338 border-radius: var(--radius-md);
1339 box-shadow: var(--shadow-md);
1340 /* Raise above .table-toolbar (also z-overlay=100) so opening the kebab
1341 overflow while the cursor is inside a table doesn't leave the cell
1342 background picker bleeding over "Code block" etc. See #714. */
1343 z-index: var(--z-tooltip);
1344 padding: var(--space-xs);
1345 flex-direction: column;
1346}
1347.more-menu.open .more-menu-panel {
1348 display: flex;
1349}
1350
1351.more-menu-item {
1352 display: flex;
1353 align-items: center;
1354 gap: var(--space-sm);
1355 padding: var(--space-sm) var(--space-md);
1356 background: none;
1357 border: none;
1358 border-radius: var(--radius-sm);
1359 color: var(--color-text);
1360 font: inherit;
1361 font-size: 0.85rem;
1362 text-align: left;
1363 cursor: pointer;
1364 transition: background var(--transition-fast);
1365 white-space: nowrap;
1366}
1367.more-menu-item:hover {
1368 background: var(--color-hover);
1369}
1370
1371.more-menu-icon {
1372 width: 1.25rem;
1373 text-align: center;
1374 color: var(--color-text-muted);
1375}
1376
1377.more-menu-sep {
1378 height: 1px;
1379 margin: var(--space-xs) 0;
1380 background: var(--color-border);
1381}
1382
1383/* Folder grid */
1384.folder-grid {
1385 display: grid;
1386 grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
1387 gap: var(--space-sm);
1388 margin-bottom: var(--space-md);
1389}
1390
1391.folder-card {
1392 display: flex;
1393 flex-direction: column;
1394 gap: var(--space-xs);
1395 padding: var(--space-md);
1396 background: var(--color-surface);
1397 border: 1px solid var(--color-border);
1398 border-radius: var(--radius-md);
1399 cursor: pointer;
1400 transition: all var(--transition-fast);
1401 position: relative;
1402}
1403.folder-card:hover {
1404 border-color: var(--color-border-strong);
1405 background: var(--color-hover);
1406}
1407/* ── Forge Workspaces ── */
1408
1409.forge-section {
1410 margin-bottom: var(--space-lg);
1411}
1412.forge-section-heading {
1413 font-size: 0.85rem;
1414 font-weight: 600;
1415 text-transform: uppercase;
1416 letter-spacing: 0.05em;
1417 color: var(--color-text-faint);
1418 margin: 0 0 var(--space-sm) 0;
1419}
1420.forge-workspace-grid {
1421 display: grid;
1422 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
1423 gap: var(--space-sm);
1424}
1425.forge-workspace-card {
1426 display: flex;
1427 flex-direction: column;
1428 gap: var(--space-xs);
1429 padding: var(--space-md);
1430 background: var(--color-surface);
1431 border: 1px solid oklch(0.45 0.06 250);
1432 border-radius: var(--radius-md);
1433 cursor: pointer;
1434 transition: all var(--transition-fast);
1435 text-decoration: none;
1436 color: inherit;
1437}
1438.forge-workspace-card:hover {
1439 border-color: oklch(0.6 0.12 250);
1440 background: var(--color-hover);
1441}
1442.forge-workspace-card-header {
1443 display: flex;
1444 justify-content: space-between;
1445 align-items: center;
1446}
1447.forge-workspace-card-type {
1448 font-size: 0.7rem;
1449 font-weight: 500;
1450 text-transform: uppercase;
1451 letter-spacing: 0.04em;
1452 color: oklch(0.65 0.1 250);
1453}
1454.forge-workspace-card-time {
1455 font-size: 0.7rem;
1456 color: var(--color-text-faint);
1457}
1458.forge-workspace-card-name {
1459 font-weight: 500;
1460 font-size: 0.9rem;
1461 line-height: 1.3;
1462 overflow: hidden;
1463 text-overflow: ellipsis;
1464 display: -webkit-box;
1465 -webkit-line-clamp: 2;
1466 -webkit-box-orient: vertical;
1467}
1468.forge-workspace-card-footer {
1469 display: flex;
1470 gap: var(--space-sm);
1471 align-items: center;
1472 font-size: 0.7rem;
1473 color: var(--color-text-faint);
1474 min-height: 1em;
1475}
1476.forge-workspace-card-versions {
1477 background: oklch(0.3 0.03 250);
1478 padding: 1px 6px;
1479 border-radius: var(--radius-sm);
1480 font-size: 0.65rem;
1481}
1482.forge-workspace-card-label {
1483 overflow: hidden;
1484 text-overflow: ellipsis;
1485 white-space: nowrap;
1486 flex: 1;
1487}
1488
1489/* ── Forge Note Button (in doc editor) ── */
1490
1491.forge-archive {
1492 margin-top: var(--space-sm);
1493}
1494.forge-archive-summary {
1495 font-size: 0.75rem;
1496 color: var(--color-text-faint);
1497 cursor: pointer;
1498 padding: var(--space-xs) 0;
1499}
1500.forge-archive-summary:hover {
1501 color: var(--color-text);
1502}
1503.forge-workspace-card--done {
1504 opacity: 0.6;
1505 border-color: var(--color-border);
1506}
1507.forge-workspace-card--done:hover {
1508 opacity: 0.8;
1509}
1510
1511.forge-note-btn {
1512 position: fixed;
1513 bottom: var(--space-lg);
1514 right: var(--space-lg);
1515 padding: var(--space-xs) var(--space-md);
1516 background: oklch(0.3 0.05 250);
1517 color: oklch(0.8 0.05 250);
1518 border: 1px solid oklch(0.45 0.06 250);
1519 border-radius: var(--radius-md);
1520 font-size: 0.8rem;
1521 font-weight: 500;
1522 cursor: pointer;
1523 transition: all var(--transition-fast);
1524 z-index: 100;
1525}
1526.forge-note-btn:hover {
1527 background: oklch(0.35 0.08 250);
1528 border-color: oklch(0.6 0.12 250);
1529}
1530
1531.folder-card-icon {
1532 font-size: 1.4rem;
1533}
1534
1535.folder-card-name {
1536 font-weight: 500;
1537 font-size: 0.9rem;
1538 overflow: hidden;
1539 text-overflow: ellipsis;
1540 white-space: nowrap;
1541}
1542
1543.folder-card-count {
1544 font-size: 0.75rem;
1545 color: var(--color-text-faint);
1546}
1547
1548.folder-card-actions {
1549 position: absolute;
1550 top: var(--space-xs);
1551 right: var(--space-xs);
1552 display: flex;
1553 gap: 2px;
1554 opacity: 0;
1555 transition: opacity var(--transition-fast);
1556}
1557.folder-card:hover .folder-card-actions {
1558 opacity: 1;
1559}
1560
1561/* Trash section */
1562.trash-section {
1563 margin-top: var(--space-xl);
1564 padding-top: var(--space-md);
1565 border-top: 1px solid var(--color-border);
1566}
1567
1568.trash-toggle {
1569 display: flex;
1570 align-items: center;
1571 gap: var(--space-sm);
1572 background: none;
1573 border: none;
1574 color: var(--color-text-muted);
1575 font: inherit;
1576 font-size: 0.85rem;
1577 cursor: pointer;
1578 padding: var(--space-xs) 0;
1579}
1580.trash-toggle:hover {
1581 color: var(--color-text);
1582}
1583
1584.trash-toggle-icon {
1585 font-size: 0.7rem;
1586 transition: transform var(--transition-fast);
1587}
1588
1589.trash-count {
1590 font-size: 0.75rem;
1591 color: var(--color-text-faint);
1592}
1593
1594.trash-actions {
1595 padding: 0.5rem 0;
1596 display: flex;
1597 justify-content: flex-end;
1598}
1599
1600.trash-item {
1601 opacity: 0.6;
1602}
1603.trash-item:hover {
1604 opacity: 0.85;
1605}
1606
1607.trash-name {
1608 text-decoration: line-through;
1609}
1610
1611.btn-sm {
1612 padding: var(--space-xs) var(--space-sm);
1613 font-size: 0.75rem;
1614}
1615
1616.btn-secondary {
1617 padding: var(--space-xs) var(--space-md);
1618 border: 1px solid var(--color-border);
1619 border-radius: var(--radius-sm);
1620 background: var(--color-surface);
1621 color: var(--color-text);
1622 font: inherit;
1623 font-size: 0.85rem;
1624 cursor: pointer;
1625 transition: all var(--transition-fast);
1626}
1627.btn-secondary:hover {
1628 border-color: var(--color-border-strong);
1629 background: var(--color-hover);
1630}
1631
1632.btn-primary {
1633 padding: var(--space-xs) var(--space-md);
1634 border: 1px solid transparent;
1635 border-radius: var(--radius-sm);
1636 background: var(--color-accent);
1637 color: var(--color-btn-primary-text);
1638 font: inherit;
1639 font-size: 0.85rem;
1640 cursor: pointer;
1641 transition: all var(--transition-fast);
1642}
1643.btn-primary:hover {
1644 background: var(--color-accent-hover);
1645}
1646
1647.btn-danger {
1648 padding: var(--space-xs) var(--space-md);
1649 border: 1px solid transparent;
1650 border-radius: var(--radius-sm);
1651 background: var(--color-danger);
1652 color: var(--color-btn-primary-text);
1653 font: inherit;
1654 font-size: 0.85rem;
1655 cursor: pointer;
1656 transition: all var(--transition-fast);
1657}
1658.btn-danger:hover {
1659 opacity: 0.85;
1660}
1661
1662/* Modal backdrop */
1663.modal-backdrop {
1664 position: fixed;
1665 inset: 0;
1666 background: var(--color-modal-backdrop);
1667 display: flex;
1668 align-items: center;
1669 justify-content: center;
1670 z-index: var(--z-modal);
1671 overflow-y: auto;
1672 padding: var(--space-md);
1673 box-sizing: border-box;
1674 -webkit-overflow-scrolling: touch;
1675}
1676
1677.modal {
1678 background: var(--color-surface);
1679 border: 1px solid var(--color-border);
1680 border-radius: var(--radius-lg);
1681 padding: var(--space-xl);
1682 box-shadow: var(--shadow-lg);
1683 max-width: 400px;
1684 width: 90%;
1685}
1686.modal h2 {
1687 font-family: var(--font-display);
1688 font-size: 1.3rem;
1689 margin-bottom: var(--space-sm);
1690}
1691.modal p {
1692 font-size: 0.9rem;
1693 color: var(--color-text-muted);
1694 margin-bottom: var(--space-md);
1695}
1696
1697/* Username modal */
1698.username-input,
1699.folder-name-input {
1700 width: 100%;
1701 padding: var(--space-sm) var(--space-md);
1702 border: 1px solid var(--color-border);
1703 border-radius: var(--radius-sm);
1704 background: var(--color-bg);
1705 color: var(--color-text);
1706 font: inherit;
1707 font-size: 0.95rem;
1708 margin-bottom: var(--space-md);
1709}
1710.username-input:focus,
1711.folder-name-input:focus {
1712 outline: none;
1713 border-color: var(--color-accent);
1714}
1715
1716/* Handle typeahead suggestions */
1717.handle-suggestions {
1718 position: absolute;
1719 left: 0;
1720 right: 0;
1721 bottom: 100%;
1722 z-index: 1001;
1723 background: var(--color-surface);
1724 border: 1px solid var(--color-border);
1725 border-radius: var(--radius-md);
1726 margin-bottom: 4px;
1727 max-height: 280px;
1728 overflow-y: auto;
1729 box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3);
1730}
1731.handle-suggestion {
1732 display: flex;
1733 align-items: center;
1734 gap: var(--space-sm);
1735 padding: var(--space-sm) var(--space-md);
1736 cursor: pointer;
1737 transition: background 0.1s;
1738}
1739.handle-suggestion:hover,
1740.handle-suggestion.active {
1741 background: var(--color-hover);
1742}
1743.suggestion-avatar {
1744 width: 32px;
1745 height: 32px;
1746 border-radius: 50%;
1747 flex-shrink: 0;
1748 object-fit: cover;
1749}
1750.suggestion-avatar-placeholder {
1751 background: var(--color-border);
1752}
1753.suggestion-text {
1754 display: flex;
1755 flex-direction: column;
1756 min-width: 0;
1757}
1758.suggestion-name {
1759 font-weight: 500;
1760 font-size: 0.9rem;
1761 overflow: hidden;
1762 text-overflow: ellipsis;
1763 white-space: nowrap;
1764}
1765.suggestion-handle {
1766 font-size: 0.8rem;
1767 color: var(--color-text-secondary);
1768 overflow: hidden;
1769 text-overflow: ellipsis;
1770 white-space: nowrap;
1771}
1772
1773#username-modal {
1774 background: var(--color-bg);
1775}
1776.username-modal {
1777 overflow: visible;
1778 max-width: 440px;
1779 border: none;
1780 box-shadow: none;
1781}
1782.welcome-tagline {
1783 color: var(--color-text-secondary);
1784 font-size: 0.95rem;
1785 margin-bottom: var(--space-md);
1786}
1787.welcome-features {
1788 list-style: none;
1789 padding: 0;
1790 margin: 0 0 var(--space-lg);
1791 font-size: 0.85rem;
1792 color: var(--color-text-muted);
1793 line-height: 1.6;
1794}
1795.welcome-features li::before {
1796 content: "\2713\00a0";
1797 color: var(--color-accent);
1798 font-weight: 600;
1799}
1800.welcome-signin-label {
1801 font-size: 0.85rem;
1802 font-weight: 500;
1803 color: var(--color-text-secondary);
1804 margin-bottom: var(--space-sm);
1805}
1806.handle-input-wrapper {
1807 position: relative;
1808 margin-bottom: var(--space-md);
1809}
1810.handle-input-wrapper .username-input {
1811 margin-bottom: 0;
1812}
1813
1814.username-modal-actions,
1815.folder-modal-actions,
1816.move-modal-actions {
1817 display: flex;
1818 justify-content: flex-end;
1819 gap: var(--space-sm);
1820}
1821
1822/* Setup screen */
1823.setup-modal {
1824 max-width: 480px;
1825}
1826.setup-modal h3 {
1827 font-size: 0.8rem;
1828 font-weight: 600;
1829 text-transform: uppercase;
1830 letter-spacing: 0.04em;
1831 color: var(--color-text-muted);
1832 margin-bottom: var(--space-xs);
1833}
1834.setup-capabilities,
1835.setup-limitations {
1836 list-style: none;
1837 padding: 0;
1838 margin: 0 0 var(--space-md);
1839 font-size: 0.85rem;
1840 color: var(--color-text-muted);
1841 line-height: 1.6;
1842}
1843.setup-capabilities li::before {
1844 content: "\2713\00a0";
1845 color: var(--color-accent);
1846 font-weight: 600;
1847}
1848.setup-limitations li::before {
1849 content: "\2022\00a0";
1850 color: var(--color-text-faint);
1851}
1852.setup-disclaimer {
1853 border-top: 1px solid var(--color-border);
1854 padding-top: var(--space-sm);
1855 margin-bottom: var(--space-md);
1856}
1857.setup-disclaimer p {
1858 font-size: 0.78rem;
1859 color: var(--color-text-faint);
1860 line-height: 1.5;
1861 margin: 0;
1862}
1863.setup-modal .btn-primary {
1864 width: 100%;
1865}
1866.setup-preview-banner {
1867 background: var(--color-accent);
1868 color: var(--color-bg);
1869 font-size: 0.75rem;
1870 font-weight: 600;
1871 text-align: center;
1872 padding: var(--space-xs) var(--space-sm);
1873 border-radius: var(--radius-sm);
1874 margin-bottom: var(--space-md);
1875}
1876
1877/* Waitlist modal */
1878.waitlist-modal {
1879 max-width: 460px;
1880 text-align: center;
1881}
1882.waitlist-modal h2 {
1883 margin-bottom: var(--space-sm);
1884}
1885.waitlist-handle {
1886 font-size: 0.95rem;
1887 font-weight: 600;
1888 color: var(--color-accent);
1889 margin-bottom: var(--space-md);
1890}
1891.waitlist-message {
1892 font-size: 0.9rem;
1893 color: var(--color-text-secondary);
1894 line-height: 1.5;
1895 margin-bottom: var(--space-md);
1896}
1897.waitlist-cta {
1898 font-size: 0.9rem;
1899 color: var(--color-text);
1900 line-height: 1.5;
1901 margin-bottom: var(--space-md);
1902}
1903.waitlist-cta a {
1904 color: var(--color-accent);
1905 font-weight: 600;
1906 text-decoration: none;
1907}
1908.waitlist-cta a:hover {
1909 text-decoration: underline;
1910}
1911.waitlist-source {
1912 font-size: 0.8rem;
1913 color: var(--color-text-muted);
1914 line-height: 1.5;
1915 margin-bottom: var(--space-lg);
1916}
1917.waitlist-source a {
1918 color: var(--color-text-secondary);
1919 text-decoration: underline;
1920}
1921.waitlist-actions {
1922 display: flex;
1923 justify-content: center;
1924}
1925.waitlist-actions .btn-primary {
1926 text-decoration: none;
1927 display: inline-flex;
1928 align-items: center;
1929}
1930
1931/* Move to folder modal */
1932.move-folder-list {
1933 display: flex;
1934 flex-direction: column;
1935 gap: 2px;
1936 margin-bottom: var(--space-md);
1937 max-height: 300px;
1938 overflow-y: auto;
1939}
1940
1941.move-option {
1942 padding: var(--space-sm) var(--space-md);
1943 background: none;
1944 border: 1px solid var(--color-border);
1945 border-radius: var(--radius-sm);
1946 color: var(--color-text);
1947 font: inherit;
1948 font-size: 0.9rem;
1949 text-align: left;
1950 cursor: pointer;
1951 transition: all var(--transition-fast);
1952}
1953.move-option:hover {
1954 background: var(--color-hover);
1955 border-color: var(--color-border-strong);
1956}
1957.move-option.active {
1958 border-color: var(--color-accent);
1959 background: var(--color-btn-active-bg);
1960}
1961
1962.move-empty {
1963 font-size: 0.85rem;
1964 color: var(--color-text-muted);
1965 padding: var(--space-md);
1966}
1967
1968/* User badge in topbar */
1969.user-badge {
1970 display: none;
1971 align-items: center;
1972 gap: var(--space-xs);
1973 padding: var(--space-xs) var(--space-sm);
1974 background: var(--color-surface-alt);
1975 border: 1px solid var(--color-border);
1976 border-radius: var(--radius-pill);
1977 font-size: 0.8rem;
1978 color: var(--color-text-muted);
1979 cursor: pointer;
1980 transition: all var(--transition-fast);
1981 white-space: nowrap;
1982}
1983.user-badge:hover {
1984 background: var(--color-hover);
1985 color: var(--color-text);
1986 border-color: var(--color-accent);
1987}
1988.user-badge .user-avatar {
1989 width: 22px;
1990 height: 22px;
1991 border-radius: 50%;
1992 flex-shrink: 0;
1993}
1994
1995/* Doc owner in list */
1996.doc-item-owner {
1997 font-size: 0.75rem;
1998 color: var(--color-text-muted);
1999 margin-left: var(--space-xs);
2000 white-space: nowrap;
2001}
2002.doc-item-owner::before {
2003 content: 'by ';
2004}
2005
2006/* --- Encryption indicator --- */
2007.encryption-bar {
2008 display: flex;
2009 align-items: center;
2010 gap: var(--space-sm);
2011 font-family: var(--font-mono);
2012 font-size: 0.7rem;
2013 color: var(--color-encrypted);
2014 padding: var(--space-sm) 0;
2015 letter-spacing: 0.02em;
2016}
2017
2018.encryption-dot {
2019 width: 6px;
2020 height: 6px;
2021 border-radius: 50%;
2022 background: var(--color-encrypted);
2023 animation: pulse 3s ease-in-out infinite;
2024}
2025
2026@keyframes pulse {
2027 0%, 100% { opacity: 0.4; }
2028 50% { opacity: 1; }
2029}
2030
2031.instance-info-btn {
2032 margin-left: auto;
2033 background: none;
2034 border: 1px solid var(--color-border);
2035 border-radius: 50%;
2036 width: 18px;
2037 height: 18px;
2038 font-family: var(--font-mono);
2039 font-size: 0.6rem;
2040 font-weight: 600;
2041 color: var(--color-text-muted);
2042 cursor: pointer;
2043 display: flex;
2044 align-items: center;
2045 justify-content: center;
2046 padding: 0;
2047 line-height: 1;
2048 flex-shrink: 0;
2049}
2050.instance-info-btn:hover {
2051 border-color: var(--color-text-muted);
2052 color: var(--color-text);
2053}
2054
2055.instance-info-panel {
2056 max-width: 480px;
2057 width: 90vw;
2058}
2059.instance-info-panel h3 {
2060 font-family: var(--font-display);
2061 font-size: 1.1rem;
2062 font-weight: 600;
2063 margin: 0 0 var(--space-sm);
2064 color: var(--color-text);
2065}
2066.instance-info-panel .info-summary {
2067 font-size: 0.85rem;
2068 color: var(--color-text-muted);
2069 margin: 0 0 var(--space-md);
2070 line-height: 1.5;
2071}
2072.instance-info-panel .info-section-label {
2073 font-family: var(--font-mono);
2074 font-size: 0.65rem;
2075 font-weight: 600;
2076 text-transform: uppercase;
2077 letter-spacing: 0.08em;
2078 color: var(--color-text-faint);
2079 margin: var(--space-md) 0 var(--space-xs);
2080}
2081.instance-info-panel ul {
2082 list-style: none;
2083 padding: 0;
2084 margin: 0 0 var(--space-sm);
2085}
2086.instance-info-panel li {
2087 font-size: 0.8rem;
2088 color: var(--color-text);
2089 padding: var(--space-xs) 0;
2090 display: flex;
2091 align-items: baseline;
2092 gap: var(--space-sm);
2093}
2094.instance-info-panel li::before {
2095 flex-shrink: 0;
2096 font-size: 0.7rem;
2097}
2098.instance-info-panel .info-capabilities li::before {
2099 content: '\2713';
2100 color: var(--color-success);
2101}
2102.instance-info-panel .info-limitations li::before {
2103 content: '\2014';
2104 color: var(--color-text-faint);
2105}
2106.instance-info-panel .info-notice {
2107 font-size: 0.8rem;
2108 color: var(--color-text-muted);
2109 background: var(--color-surface);
2110 border-radius: var(--radius-sm);
2111 padding: var(--space-sm) var(--space-md);
2112 margin-top: var(--space-md);
2113 line-height: 1.5;
2114}
2115.instance-info-panel .info-flavor-badge {
2116 font-family: var(--font-mono);
2117 font-size: 0.6rem;
2118 font-weight: 600;
2119 text-transform: uppercase;
2120 letter-spacing: 0.08em;
2121 color: var(--color-encrypted);
2122 background: var(--color-teal-light);
2123 padding: 0.15rem 0.45rem;
2124 border-radius: var(--radius-sm);
2125 margin-left: var(--space-sm);
2126}
2127
2128.site-footer {
2129 margin-top: var(--space-2xl);
2130 padding-top: var(--space-lg);
2131 border-top: 1px solid var(--color-border);
2132}
2133.site-footer-links {
2134 font-size: 0.75rem;
2135 color: var(--color-text-faint);
2136 padding: var(--space-sm) 0;
2137 line-height: 1.8;
2138}
2139.site-footer-links a {
2140 color: var(--color-text-muted);
2141 text-decoration: none;
2142}
2143.site-footer-links a:hover {
2144 color: var(--color-text);
2145 text-decoration: underline;
2146}
2147.footer-sep {
2148 margin: 0 0.3em;
2149 color: var(--color-text-faint);
2150}
2151
2152.desktop-download {
2153 margin-top: var(--space-md);
2154 text-align: center;
2155}
2156
2157.desktop-download-btn {
2158 display: inline-flex;
2159 align-items: center;
2160 gap: var(--space-xs);
2161 padding: var(--space-xs) var(--space-md);
2162 font-size: 0.8rem;
2163 font-family: var(--font-mono);
2164 color: var(--color-text-muted);
2165 border: 1px solid var(--color-border);
2166 border-radius: var(--radius);
2167 text-decoration: none;
2168 transition: border-color var(--transition-fast), color var(--transition-fast);
2169}
2170
2171.desktop-download-btn:hover {
2172 color: var(--color-text);
2173 border-color: var(--color-text-muted);
2174}
2175
2176.desktop-download-version {
2177 opacity: 0.6;
2178 font-size: 0.75rem;
2179}
2180
2181/* --- App Shell (docs + sheets) --- */
2182.app-shell {
2183 display: flex;
2184 flex-direction: column;
2185 height: 100dvh;
2186 overflow: hidden;
2187}
2188
2189.app-topbar {
2190 display: flex;
2191 align-items: center;
2192 gap: var(--space-md);
2193 padding: var(--space-sm) var(--space-md);
2194 padding-left: max(var(--space-md), env(safe-area-inset-left));
2195 padding-right: max(var(--space-md), env(safe-area-inset-right));
2196 border-bottom: 1px solid var(--color-border);
2197 background: var(--color-surface);
2198 flex-shrink: 0;
2199}
2200
2201/* Electron traffic light padding — macOS hiddenInset titlebar */
2202.is-electron .app-topbar {
2203 padding-left: 96px;
2204 -webkit-app-region: drag;
2205}
2206
2207.is-electron .app-topbar button,
2208.is-electron .app-topbar input,
2209.is-electron .app-topbar a,
2210.is-electron .app-topbar select,
2211.is-electron .app-topbar .collab-avatars {
2212 -webkit-app-region: no-drag;
2213}
2214
2215.is-electron .brand {
2216 padding-left: 88px;
2217}
2218
2219.app-logo {
2220 font-family: var(--font-display);
2221 font-weight: 700;
2222 font-size: 1rem;
2223 color: var(--color-text);
2224 text-decoration: none;
2225 letter-spacing: -0.02em;
2226}
2227.app-logo:hover { color: var(--color-accent); }
2228
2229.doc-title-input {
2230 font-family: var(--font-body);
2231 font-size: 0.9rem;
2232 font-weight: 500;
2233 border: none;
2234 background: transparent;
2235 color: var(--color-text);
2236 padding: 0.3rem 0.5rem;
2237 border-radius: var(--radius-sm);
2238 outline: none;
2239 min-width: 12rem;
2240 transition: background var(--transition-fast);
2241}
2242.doc-title-input:hover { background: var(--color-hover); }
2243.doc-title-input:focus { background: var(--color-surface-alt); }
2244
2245.topbar-spacer { flex: 1; }
2246
2247.status-indicator {
2248 display: flex;
2249 align-items: center;
2250 gap: var(--space-xs);
2251 font-family: var(--font-mono);
2252 font-size: 0.65rem;
2253 color: var(--color-text-faint);
2254 letter-spacing: 0.02em;
2255}
2256.status-dot {
2257 width: 5px;
2258 height: 5px;
2259 border-radius: 50%;
2260 background: var(--color-text-faint);
2261}
2262.status-dot.connected { background: var(--color-success); }
2263.status-dot.encrypted { background: var(--color-encrypted); }
2264
2265.collab-avatars {
2266 display: flex;
2267 align-items: center;
2268}
2269.collab-avatar {
2270 width: 24px;
2271 height: 24px;
2272 border-radius: 50%;
2273 display: flex;
2274 align-items: center;
2275 justify-content: center;
2276 font-size: 0.65rem;
2277 font-weight: 600;
2278 color: var(--color-collab-text);
2279 margin-left: -4px;
2280 border: 2px solid var(--color-surface);
2281}
2282.collab-avatar:first-child { margin-left: 0; }
2283
2284/* --- Toolbar (Google Docs-style) --- */
2285.toolbar {
2286 display: flex;
2287 align-items: center;
2288 gap: 2px;
2289 padding: var(--space-xs) var(--space-md);
2290 border-bottom: 1px solid var(--color-border);
2291 background: var(--color-bg);
2292 flex-shrink: 0;
2293 flex-wrap: wrap;
2294}
2295
2296.toolbar.gdocs-toolbar {
2297 min-height: 40px;
2298 padding: 0 var(--space-sm);
2299 gap: 2px;
2300 flex-wrap: wrap;
2301 overflow: visible;
2302}
2303
2304.toolbar-group {
2305 display: flex;
2306 align-items: center;
2307 gap: 1px;
2308}
2309
2310.toolbar-sep {
2311 width: 1px;
2312 height: 24px;
2313 background: var(--color-border);
2314 margin: 0 4px;
2315 flex-shrink: 0;
2316}
2317
2318/* Google Docs-style toolbar button */
2319.tb-btn {
2320 display: inline-flex;
2321 align-items: center;
2322 justify-content: center;
2323 width: 28px;
2324 height: 28px;
2325 padding: 0;
2326 border: none;
2327 border-radius: var(--radius-sm);
2328 background: transparent;
2329 color: var(--color-text-muted);
2330 cursor: pointer;
2331 font-size: 14px;
2332 line-height: 1;
2333 transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
2334 flex-shrink: 0;
2335}
2336.tb-btn:active {
2337 transform: scale(0.95);
2338}
2339.tb-btn:hover {
2340 color: var(--color-text);
2341 background: #eeeeee;
2342 background: oklch(0.95 0 0);
2343}
2344.tb-btn:active,
2345.tb-btn.active {
2346 color: var(--color-accent);
2347 background: #c1dcf0;
2348 background: oklch(0.88 0.04 240);
2349}
2350
2351/* Dark mode hover/active overrides for toolbar buttons */
2352[data-theme="dark"] .tb-btn:hover {
2353 background: #222222;
2354 background: oklch(0.25 0 0);
2355}
2356[data-theme="dark"] .tb-btn:active,
2357[data-theme="dark"] .tb-btn.active {
2358 background: #14242f;
2359 background: oklch(0.25 0.03 240);
2360}
2361
2362@media (prefers-color-scheme: dark) {
2363 :root:not([data-theme="light"]) .tb-btn:hover {
2364 background: #222222;
2365 background: oklch(0.25 0 0);
2366 }
2367 :root:not([data-theme="light"]) .tb-btn:active,
2368 :root:not([data-theme="light"]) .tb-btn.active {
2369 background: #14242f;
2370 background: oklch(0.25 0.03 240);
2371 }
2372}
2373
2374/* Text-style toolbar buttons (smaller font for text labels) */
2375.tb-btn-text {
2376 font-size: 11px;
2377 font-weight: 600;
2378 font-family: var(--font-body);
2379 letter-spacing: -0.02em;
2380 width: auto;
2381 padding: 0 5px;
2382}
2383
2384.tb-btn-underline {
2385 text-decoration: underline;
2386}
2387.tb-btn-strike {
2388 text-decoration: line-through;
2389}
2390.tb-btn-code {
2391 font-family: var(--font-mono);
2392 font-size: 11px;
2393 font-weight: 500;
2394}
2395
2396/* Compact toolbar selects (Google Docs-style) */
2397.tb-select {
2398 font-family: var(--font-body);
2399 font-size: 13px;
2400 padding: 2px 18px 2px 6px;
2401 height: 28px;
2402 border: 1px solid transparent;
2403 border-radius: var(--radius-sm);
2404 background: transparent;
2405 color: var(--color-text);
2406 cursor: pointer;
2407 outline: none;
2408 transition: border-color var(--transition-fast), background var(--transition-fast);
2409 -webkit-appearance: none;
2410 appearance: none;
2411 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
2412 background-repeat: no-repeat;
2413 background-position: right 4px center;
2414 background-size: 8px;
2415}
2416.tb-select:hover {
2417 border-color: var(--color-border);
2418 background-color: #eeeeee;
2419 background-color: oklch(0.95 0 0);
2420}
2421.tb-select:focus {
2422 border-color: var(--color-border-strong);
2423}
2424.tb-select-narrow {
2425 width: 52px;
2426 padding-right: 16px;
2427}
2428
2429[data-theme="dark"] .tb-select:hover {
2430 background-color: #222222;
2431 background-color: oklch(0.25 0 0);
2432}
2433@media (prefers-color-scheme: dark) {
2434 :root:not([data-theme="light"]) .tb-select:hover {
2435 background-color: #222222;
2436 background-color: oklch(0.25 0 0);
2437 }
2438}
2439
2440/* Color picker wrapper (shows swatch under icon) */
2441.tb-color-wrap {
2442 position: relative;
2443 display: inline-flex;
2444 align-items: center;
2445 justify-content: center;
2446 width: 28px;
2447 height: 28px;
2448 border-radius: var(--radius-sm);
2449 cursor: pointer;
2450 transition: background var(--transition-fast);
2451}
2452.tb-color-wrap:hover {
2453 background: #eeeeee;
2454 background: oklch(0.95 0 0);
2455}
2456[data-theme="dark"] .tb-color-wrap:hover {
2457 background: #222222;
2458 background: oklch(0.25 0 0);
2459}
2460@media (prefers-color-scheme: dark) {
2461 :root:not([data-theme="light"]) .tb-color-wrap:hover {
2462 background: #222222;
2463 background: oklch(0.25 0 0);
2464 }
2465}
2466.tb-color {
2467 position: absolute;
2468 inset: 0;
2469 width: 100%;
2470 height: 100%;
2471 opacity: 0;
2472 cursor: pointer;
2473 border: none;
2474 padding: 0;
2475}
2476.tb-color-label {
2477 font-size: 14px;
2478 font-weight: 700;
2479 line-height: 1;
2480 color: var(--color-text-muted);
2481 pointer-events: none;
2482 position: relative;
2483 top: -4px;
2484}
2485.tb-color-swatch {
2486 position: absolute;
2487 bottom: 2px;
2488 left: 5px;
2489 right: 5px;
2490 height: var(--color-swatch-height, 4px);
2491 border-radius: 1px;
2492 background: var(--color-text);
2493 pointer-events: none;
2494}
2495.tb-color-swatch-highlight {
2496 background: var(--color-highlight-default);
2497}
2498
2499/* Color palette dropdown (v0.58.0) — preset colors beside each picker */
2500.tb-color-palette-toggle {
2501 position: absolute;
2502 right: -8px;
2503 bottom: 0;
2504 width: 12px;
2505 height: 12px;
2506 padding: 0;
2507 border: none;
2508 background: transparent;
2509 color: var(--color-text-faint);
2510 font-size: 10px;
2511 line-height: 1;
2512 cursor: pointer;
2513 border-radius: 2px;
2514 z-index: 2;
2515}
2516.tb-color-palette-toggle:hover {
2517 color: var(--color-text);
2518 background: var(--color-bg-hover, oklch(0.92 0 0));
2519}
2520[data-theme="dark"] .tb-color-palette-toggle:hover {
2521 background: oklch(0.3 0 0);
2522}
2523.tb-color-palette {
2524 position: absolute;
2525 top: 100%;
2526 left: 0;
2527 margin-top: 4px;
2528 padding: 6px;
2529 background: var(--color-bg);
2530 border: 1px solid var(--color-border);
2531 border-radius: var(--radius-md);
2532 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
2533 display: grid;
2534 grid-template-columns: repeat(7, 20px);
2535 gap: 4px;
2536 z-index: 30;
2537}
2538.tb-color-palette[hidden] {
2539 display: none;
2540}
2541.tb-color-palette-swatch {
2542 width: 20px;
2543 height: 20px;
2544 padding: 0;
2545 border: 1px solid var(--color-border);
2546 border-radius: 3px;
2547 cursor: pointer;
2548 transition: transform 0.08s ease-out;
2549}
2550.tb-color-palette-swatch:hover,
2551.tb-color-palette-swatch:focus-visible {
2552 transform: scale(1.15);
2553 outline: 2px solid var(--color-accent, oklch(0.62 0.18 240));
2554 outline-offset: 1px;
2555}
2556
2557/* Inline SVG toolbar icons */
2558.tb-icon {
2559 width: 16px;
2560 height: 16px;
2561 display: block;
2562 fill: none;
2563 stroke: currentColor;
2564 stroke-width: 1.5;
2565 stroke-linecap: round;
2566 stroke-linejoin: round;
2567}
2568/* Inline in buttons */
2569.tb-btn .tb-icon {
2570 display: block;
2571}
2572/* Inline in dropdown items */
2573.item-icon .tb-icon,
2574.dd-icon .tb-icon {
2575 display: block;
2576}
2577
2578/* Legacy toolbar select/color (non-gdocs toolbars) */
2579.toolbar select {
2580 font-family: var(--font-body);
2581 font-size: 0.8rem;
2582 padding: 0.3rem 0.5rem;
2583 border: 1px solid var(--color-border);
2584 border-radius: var(--radius-sm);
2585 background: var(--color-bg);
2586 color: var(--color-text);
2587 cursor: pointer;
2588}
2589.toolbar select:hover { border-color: var(--color-border-strong); }
2590.toolbar select:focus-visible {
2591 outline: 2px solid var(--color-accent);
2592 outline-offset: 1px;
2593}
2594
2595.toolbar input[type="color"] {
2596 width: 24px;
2597 height: 24px;
2598 border: 1px solid var(--color-border);
2599 border-radius: var(--radius-sm);
2600 cursor: pointer;
2601 padding: 1px;
2602}
2603.toolbar input[type="color"]:focus-visible {
2604 outline: 2px solid var(--color-accent);
2605 outline-offset: 1px;
2606}
2607
2608/* --- Docs Editor --- */
2609.editor-container {
2610 flex: 1;
2611 overflow-y: auto;
2612 padding: var(--space-xl) var(--space-lg);
2613 display: flex;
2614 justify-content: center;
2615 position: relative;
2616}
2617
2618/* Toolbar must sit above editor-container's stacking context so dropdowns aren't clipped */
2619.toolbar {
2620 position: relative;
2621 z-index: var(--z-component);
2622}
2623
2624.editor-wrapper {
2625 width: 100%;
2626 max-width: 48rem;
2627}
2628
2629.tiptap {
2630 outline: none;
2631 min-height: 60vh;
2632 font-family: var(--font-display);
2633 font-size: 1.05rem;
2634 line-height: 1.7;
2635 color: var(--color-text);
2636}
2637
2638.tiptap > *:first-child { margin-top: 0; }
2639
2640.tiptap h1 { font-size: 2rem; margin: 1.8em 0 0.6em; }
2641.tiptap h2 { font-size: 1.5rem; margin: 1.5em 0 0.5em; }
2642.tiptap h3 { font-size: 1.2rem; margin: 1.3em 0 0.4em; }
2643
2644.tiptap p { margin: 0.6em 0; }
2645
2646.tiptap ul, .tiptap ol {
2647 padding-left: 1.4em;
2648 margin: 0.5em 0;
2649}
2650
2651.tiptap blockquote {
2652 border-left: 3px solid var(--color-accent);
2653 padding-left: var(--space-md);
2654 margin: 1em 0;
2655 color: var(--color-text-muted);
2656 font-style: italic;
2657}
2658
2659.tiptap pre {
2660 background: var(--color-surface-alt);
2661 padding: var(--space-md);
2662 border-radius: var(--radius-md);
2663 overflow-x: auto;
2664 margin: 1em 0;
2665}
2666.tiptap pre code {
2667 background: none;
2668 padding: 0;
2669 font-size: 0.85rem;
2670}
2671
2672.tiptap code {
2673 background: var(--color-surface-alt);
2674 padding: 0.15em 0.35em;
2675 border-radius: var(--radius-sm);
2676 font-size: 0.88em;
2677}
2678
2679.tiptap a {
2680 color: var(--color-teal);
2681 cursor: pointer;
2682}
2683
2684.tiptap img {
2685 max-width: 100%;
2686 height: auto;
2687 border-radius: var(--radius-md);
2688 margin: 1em 0;
2689}
2690
2691.tiptap hr {
2692 border: none;
2693 border-top: 1px solid var(--color-border);
2694 margin: 2em 0;
2695}
2696
2697.tiptap table {
2698 border-collapse: collapse;
2699 width: 100%;
2700 margin: 1em 0;
2701}
2702.tiptap th, .tiptap td {
2703 border: 1px solid var(--color-border);
2704 padding: 0.5em 0.7em;
2705 text-align: left;
2706}
2707.tiptap th {
2708 background: var(--color-surface);
2709 font-weight: 600;
2710 font-family: var(--font-body);
2711 font-size: 0.85rem;
2712}
2713
2714.tiptap ul[data-type="taskList"] {
2715 list-style: none;
2716 padding-left: 0;
2717 margin: 0.5em 0;
2718}
2719.tiptap ul[data-type="taskList"] li {
2720 display: flex;
2721 align-items: flex-start;
2722 gap: 0.375rem;
2723 margin-bottom: 0.15em;
2724}
2725/* Kill paragraph margins inside task items so text aligns with checkbox */
2726.tiptap ul[data-type="taskList"] li > div > p {
2727 margin: 0;
2728}
2729.tiptap ul[data-type="taskList"] li > label {
2730 /* Center 16px checkbox within the line: (line-height * 1em - 16px) / 2 ≈ 4.4px */
2731 margin-top: calc((1.55em - 16px) / 2);
2732 flex-shrink: 0;
2733 line-height: 0;
2734}
2735
2736/* Task list checkbox styling */
2737.tiptap ul[data-type="taskList"] li > label input[type="checkbox"] {
2738 -webkit-appearance: none;
2739 appearance: none;
2740 width: 16px;
2741 height: 16px;
2742 border: 1.5px solid var(--color-border-strong);
2743 border-radius: 3px;
2744 background: var(--color-bg);
2745 cursor: pointer;
2746 pointer-events: auto;
2747 position: relative;
2748 display: block;
2749 flex-shrink: 0;
2750 margin: 0;
2751 transition: background var(--transition-fast), border-color var(--transition-fast);
2752}
2753.tiptap ul[data-type="taskList"] li > label input[type="checkbox"]:hover {
2754 border-color: var(--color-accent);
2755 background: var(--color-hover);
2756}
2757.tiptap ul[data-type="taskList"] li > label input[type="checkbox"]:checked {
2758 background: var(--color-accent);
2759 border-color: var(--color-accent);
2760}
2761.tiptap ul[data-type="taskList"] li > label input[type="checkbox"]:checked::after {
2762 content: '';
2763 position: absolute;
2764 left: 3.5px;
2765 top: 0.5px;
2766 width: 5.5px;
2767 height: 9px;
2768 border: solid var(--color-btn-primary-text);
2769 border-width: 0 2px 2px 0;
2770 transform: rotate(45deg);
2771}
2772.tiptap ul[data-type="taskList"] li > label input[type="checkbox"]:focus-visible {
2773 outline: 2px solid var(--color-focus);
2774 outline-offset: 1px;
2775}
2776/* Nested task lists */
2777.tiptap ul[data-type="taskList"] ul[data-type="taskList"] {
2778 margin-top: 0.15em;
2779 margin-bottom: 0;
2780}
2781/* Checked task items: muted text */
2782.tiptap ul[data-type="taskList"] li[data-checked="true"] > div {
2783 color: var(--color-text-muted);
2784 text-decoration: line-through;
2785 text-decoration-color: var(--color-text-faint);
2786}
2787
2788/* Collaboration cursors */
2789.collaboration-cursor__caret {
2790 position: relative;
2791 border-left: 2px solid;
2792 border-right: none;
2793 margin-left: -1px;
2794 margin-right: -1px;
2795 pointer-events: none;
2796 word-break: normal;
2797}
2798.collaboration-cursor__label {
2799 position: absolute;
2800 bottom: 100%;
2801 left: -1px;
2802 font-family: var(--font-mono);
2803 font-size: 0.6rem;
2804 font-weight: 600;
2805 padding: 1px 5px;
2806 border-radius: 3px 3px 3px 0;
2807 white-space: nowrap;
2808 color: var(--color-cursor-label);
2809 user-select: none;
2810 pointer-events: none;
2811}
2812
2813.tiptap .is-empty::before {
2814 content: attr(data-placeholder);
2815 float: left;
2816 color: var(--color-text-faint);
2817 pointer-events: none;
2818 height: 0;
2819 font-style: italic;
2820}
2821
2822/* --- Sheets Spreadsheet --- */
2823.sheets-app {
2824 display: flex;
2825 flex-direction: column;
2826 height: 100dvh;
2827 overflow: hidden;
2828}
2829
2830.formula-bar {
2831 display: flex;
2832 align-items: center;
2833 gap: var(--space-sm);
2834 padding: var(--space-xs) var(--space-md);
2835 border-bottom: 1px solid var(--color-border);
2836 background: var(--color-bg);
2837 flex-shrink: 0;
2838}
2839
2840.cell-address {
2841 font-family: var(--font-mono);
2842 font-size: 0.8rem;
2843 font-weight: 500;
2844 width: 5rem;
2845 text-align: center;
2846 padding: 0.3rem;
2847 background: var(--color-surface);
2848 border: 1px solid var(--color-border);
2849 border-radius: var(--radius-sm);
2850 color: var(--color-text);
2851}
2852
2853.formula-input {
2854 flex: 1;
2855 font-family: var(--font-mono);
2856 font-size: 0.85rem;
2857 padding: 0.3rem 0.6rem;
2858 border: 1px solid var(--color-border);
2859 border-radius: var(--radius-sm);
2860 background: var(--color-bg);
2861 color: var(--color-text);
2862 outline: none;
2863}
2864.formula-input:focus {
2865 border-color: var(--color-teal);
2866 box-shadow: 0 0 0 2px var(--color-focus);
2867}
2868
2869.sheet-body {
2870 display: flex;
2871 flex: 1;
2872 min-height: 0;
2873 overflow: hidden;
2874}
2875
2876.sheet-main {
2877 display: flex;
2878 flex-direction: column;
2879 flex: 1;
2880 min-width: 0;
2881 overflow: hidden;
2882}
2883
2884.sheet-container {
2885 flex: 1;
2886 overflow: auto;
2887 position: relative;
2888 scrollbar-width: thin;
2889 scrollbar-color: #bbb7b0 transparent;
2890 scrollbar-color: oklch(0.78 0.01 75) transparent;
2891}
2892
2893[data-theme="dark"] .sheet-container {
2894 scrollbar-color: #3e3a35 transparent;
2895 scrollbar-color: oklch(0.35 0.01 75) transparent;
2896}
2897
2898@media (prefers-color-scheme: dark) {
2899 :root:not([data-theme="light"]) .sheet-container {
2900 scrollbar-color: #3e3a35 transparent;
2901 scrollbar-color: oklch(0.35 0.01 75) transparent;
2902 }
2903}
2904
2905/* WebKit scrollbar styling — matches .sheet-tabs. Thin thumb that fills
2906 the full track width, so there's no gap around the visible scrollbar. */
2907.sheet-container::-webkit-scrollbar {
2908 width: 6px;
2909 height: 6px;
2910}
2911
2912.sheet-container::-webkit-scrollbar-track {
2913 background: transparent;
2914}
2915
2916.sheet-container::-webkit-scrollbar-thumb {
2917 background: #bbb7b0;
2918 background: oklch(0.78 0.01 75);
2919 border-radius: 3px;
2920}
2921
2922.sheet-container::-webkit-scrollbar-thumb:hover {
2923 background: #9c9792;
2924 background: oklch(0.68 0.01 75);
2925}
2926
2927[data-theme="dark"] .sheet-container::-webkit-scrollbar-thumb {
2928 background: #3e3a35;
2929 background: oklch(0.35 0.01 75);
2930}
2931
2932[data-theme="dark"] .sheet-container::-webkit-scrollbar-thumb:hover {
2933 background: #59554f;
2934 background: oklch(0.45 0.01 75);
2935}
2936
2937.sheet-container::-webkit-scrollbar-corner {
2938 background: transparent;
2939}
2940
2941.sheet-grid {
2942 border-collapse: separate;
2943 border-spacing: 0;
2944 table-layout: fixed;
2945 font-family: var(--font-mono);
2946 font-size: 0.8rem;
2947 user-select: none;
2948 width: max-content;
2949}
2950
2951/*
2952 * #698 — keyboard focus indicator for the grid itself.
2953 * The grid table carries tabindex=0 so Tab from the toolbar / formula bar
2954 * lands here. The native outline would draw around the entire table body
2955 * (visually noisy); the selected cell already has its own teal outline
2956 * (`.sheet-grid td.selected`), so the grid-level focus ring is scoped to
2957 * keyboard-only activation (data-a11y-focus is set on Tab-press by the
2958 * inline script in index.html).
2959 */
2960.sheet-grid:focus { outline: none; }
2961[data-a11y-focus] .sheet-grid:focus-visible {
2962 outline: 2px solid var(--color-teal);
2963 outline-offset: -2px;
2964}
2965
2966.sheet-grid th {
2967 background: var(--color-surface);
2968 border: none;
2969 border-right: 1px solid var(--color-grid-header-line);
2970 border-bottom: 1px solid var(--color-grid-header-line);
2971 padding: 0.25rem 0.5rem;
2972 font-weight: 500;
2973 font-size: 0.7rem;
2974 color: var(--color-text-muted);
2975 position: sticky;
2976 z-index: 2;
2977 text-align: center;
2978 min-width: 3rem;
2979 height: 26px;
2980 box-sizing: border-box;
2981}
2982
2983/* Column resize handle in header */
2984.sheet-grid thead th .col-resize-handle {
2985 position: absolute;
2986 top: 0;
2987 right: -3px;
2988 width: 6px;
2989 height: 100%;
2990 cursor: col-resize;
2991 z-index: 5;
2992}
2993.sheet-grid thead th .col-resize-handle:hover,
2994.sheet-grid thead th .col-resize-handle.resizing {
2995 background: var(--color-teal);
2996 opacity: 0.5;
2997}
2998
2999/* Resize indicator line while dragging */
3000.col-resize-indicator {
3001 position: absolute;
3002 top: 0;
3003 width: 2px;
3004 height: 100%;
3005 background: var(--color-teal);
3006 z-index: var(--z-overlay);
3007 pointer-events: none;
3008 opacity: 0.7;
3009}
3010
3011.sheet-grid th.corner {
3012 position: sticky;
3013 left: 0;
3014 top: 0;
3015 z-index: 6;
3016 width: 3rem;
3017 min-width: 3rem;
3018}
3019
3020.sheet-grid thead th {
3021 top: 0;
3022 position: sticky;
3023 z-index: 3;
3024 background: var(--color-surface);
3025 cursor: s-resize;
3026}
3027.sheet-grid thead th.corner { cursor: default; }
3028
3029/* Column header resize handle */
3030.sheet-grid thead th .col-resize-handle {
3031 position: absolute;
3032 top: 0;
3033 right: -3px;
3034 width: 6px;
3035 height: 100%;
3036 cursor: col-resize;
3037 z-index: 5;
3038}
3039.sheet-grid thead th .col-resize-handle:hover,
3040.sheet-grid thead th .col-resize-handle.active {
3041 background: var(--color-teal);
3042 opacity: 0.5;
3043}
3044
3045/* Column resize guide line */
3046.col-resize-guide {
3047 position: absolute;
3048 top: 0;
3049 width: 2px;
3050 height: 100%;
3051 background: var(--color-teal);
3052 opacity: 0.6;
3053 z-index: 20;
3054 pointer-events: none;
3055}
3056
3057/* Row resize handle (mirrors column resize handle pattern) */
3058.sheet-grid th.row-header .row-resize-handle {
3059 position: absolute;
3060 bottom: -3px;
3061 left: 0;
3062 width: 100%;
3063 height: 6px;
3064 cursor: row-resize;
3065 z-index: 5;
3066}
3067.sheet-grid th.row-header .row-resize-handle:hover,
3068.sheet-grid th.row-header .row-resize-handle.active {
3069 background: var(--color-teal);
3070 opacity: 0.5;
3071}
3072
3073/* Row resize guide line */
3074.row-resize-guide {
3075 position: absolute;
3076 left: 0;
3077 height: 2px;
3078 width: 100%;
3079 background: var(--color-teal);
3080 z-index: var(--z-overlay);
3081 pointer-events: none;
3082 opacity: 0.7;
3083}
3084
3085/* Hidden row/column indicators */
3086.hidden-row-indicator { height: 12px; }
3087.hidden-row-indicator td { padding: 0 !important; border: none !important; }
3088.hidden-row-indicator-line {
3089 height: 6px;
3090 background: var(--color-teal);
3091 opacity: 0.6;
3092 cursor: pointer;
3093 border-radius: 3px;
3094 transition: opacity var(--transition-fast), height var(--transition-fast);
3095 position: relative;
3096}
3097.hidden-row-indicator-line:hover {
3098 opacity: 1;
3099 height: 10px;
3100}
3101.hidden-row-indicator-line::after {
3102 content: 'Click to unhide';
3103 position: absolute;
3104 left: 50%;
3105 top: -22px;
3106 transform: translateX(-50%);
3107 font-size: 0.6rem;
3108 font-family: var(--font-body);
3109 color: var(--color-bg);
3110 background: var(--color-text);
3111 padding: 2px 6px;
3112 border-radius: 3px;
3113 white-space: nowrap;
3114 opacity: 0;
3115 pointer-events: none;
3116 transition: opacity var(--transition-fast);
3117}
3118.hidden-row-indicator-line:hover::after { opacity: 1; }
3119.hidden-col-boundary {
3120 border-right: 2px solid var(--color-teal) !important;
3121 position: relative;
3122}
3123
3124/* Clickable column unhide indicator (matches row indicator pattern) */
3125.hidden-col-indicator {
3126 position: absolute;
3127 top: 0;
3128 right: -6px;
3129 width: 12px;
3130 height: 100%;
3131 cursor: pointer;
3132 z-index: 6;
3133 display: flex;
3134 align-items: center;
3135 justify-content: center;
3136}
3137.hidden-col-indicator-bar {
3138 width: 6px;
3139 height: 100%;
3140 background: var(--color-teal);
3141 opacity: 0.6;
3142 border-radius: 3px;
3143 transition: opacity var(--transition-fast), width var(--transition-fast);
3144}
3145.hidden-col-indicator:hover .hidden-col-indicator-bar {
3146 opacity: 1;
3147 width: 8px;
3148}
3149.hidden-col-indicator::after {
3150 content: 'Click to unhide';
3151 position: absolute;
3152 top: 100%;
3153 left: 50%;
3154 transform: translateX(-50%);
3155 margin-top: 4px;
3156 font-size: 0.6rem;
3157 font-family: var(--font-body);
3158 color: var(--color-bg);
3159 background: var(--color-text);
3160 padding: 2px 6px;
3161 border-radius: 3px;
3162 white-space: nowrap;
3163 opacity: 0;
3164 pointer-events: none;
3165 transition: opacity var(--transition-fast);
3166 z-index: 20;
3167}
3168.hidden-col-indicator:hover::after { opacity: 1; }
3169.hidden-row-boundary {
3170 border-bottom: 2px solid var(--color-teal) !important;
3171 position: relative;
3172}
3173
3174.sheet-grid .row-header {
3175 position: sticky;
3176 left: 0;
3177 z-index: 1;
3178 width: 3rem;
3179 min-width: 3rem;
3180 text-align: center;
3181 cursor: e-resize;
3182 background: var(--color-surface);
3183}
3184
3185.sheet-grid td {
3186 border: none;
3187 padding: 0;
3188 height: 26px;
3189 min-height: 26px;
3190 box-sizing: border-box;
3191 position: relative;
3192 overflow: hidden;
3193 background: var(--color-bg);
3194 /* Grid lines via box-shadow instead of borders — avoids double-line
3195 artifacts from border-collapse/separate + sticky + background-clip
3196 interactions. Shadows render on top of backgrounds reliably. */
3197 box-shadow: inset -1px 0 0 var(--color-grid-line),
3198 inset 0 -1px 0 var(--color-grid-line);
3199}
3200
3201/* All rows rendered — browser scrolls natively, no virtual scroll spacers needed */
3202
3203.sheet-grid td .cell-display {
3204 padding: 0.15rem 0.4rem;
3205 width: 100%;
3206 height: 100%;
3207 display: flex;
3208 align-items: center;
3209 overflow: hidden;
3210 white-space: nowrap;
3211 text-overflow: ellipsis;
3212 cursor: cell;
3213}
3214
3215/* Cell overflow text: when the next cell is empty, allow text to visually spill over */
3216.sheet-grid td.cell-overflow .cell-display {
3217 overflow: visible;
3218 z-index: 1;
3219 position: relative;
3220}
3221
3222/* When the adjacent cell has content, show ellipsis instead of overflow */
3223.sheet-grid td.cell-overflow-clip .cell-display {
3224 text-overflow: ellipsis;
3225}
3226
3227.sheet-grid td.selected {
3228 outline: 2px solid var(--color-teal);
3229 outline-offset: -1px;
3230 z-index: 1;
3231}
3232
3233/* Multi-cell selection range highlight */
3234.sheet-grid td.in-range {
3235 background: #53c2c11f !important;
3236 background: oklch(0.75 0.1 195 / 0.12) !important;
3237}
3238[data-theme="dark"] .sheet-grid td.in-range {
3239 background: #00656633 !important;
3240 background: oklch(0.45 0.1 195 / 0.2) !important;
3241}
3242@media (prefers-color-scheme: dark) {
3243 :root:not([data-theme="light"]) .sheet-grid td.in-range {
3244 background: #00656633 !important;
3245 background: oklch(0.45 0.1 195 / 0.2) !important;
3246 }
3247}
3248
3249/* Array formula spill range */
3250.sheet-grid td.spill-source,
3251.sheet-grid td.spill-target {
3252 border: 1px dashed #2784d580;
3253 border: 1px dashed oklch(0.6 0.15 250 / 0.5);
3254}
3255.sheet-grid td.spill-target .cell-display {
3256 color: #717171;
3257 color: oklch(0.55 0 0);
3258}
3259[data-theme="dark"] .sheet-grid td.spill-target .cell-display {
3260 color: #9e9e9e;
3261 color: oklch(0.7 0 0);
3262}
3263@media (prefers-color-scheme: dark) {
3264 :root:not([data-theme="light"]) .sheet-grid td.spill-target .cell-display {
3265 color: #9e9e9e;
3266 color: oklch(0.7 0 0);
3267 }
3268}
3269
3270/* --- Rich cell types --- */
3271.cell-checkbox {
3272 cursor: pointer;
3273 font-size: 1.1em;
3274 user-select: none;
3275 display: flex;
3276 align-items: center;
3277 justify-content: center;
3278 width: 100%;
3279}
3280.cell-rating {
3281 display: flex;
3282 gap: 1px;
3283 align-items: center;
3284 width: 100%;
3285}
3286.cell-rating-star {
3287 cursor: pointer;
3288 color: #9e9e9e;
3289 color: oklch(0.7 0 0);
3290 font-size: 1em;
3291 line-height: 1;
3292 user-select: none;
3293 transition: color var(--transition-fast);
3294}
3295.cell-rating-star.filled {
3296 color: #d9a514;
3297 color: oklch(0.75 0.15 85);
3298}
3299.cell-rating-star:hover {
3300 color: #f2b200;
3301 color: oklch(0.8 0.18 85);
3302}
3303.cell-progress {
3304 display: flex;
3305 align-items: center;
3306 gap: 0.3rem;
3307 width: 100%;
3308 min-width: 60px;
3309}
3310.cell-progress-bar {
3311 height: 0.6rem;
3312 border-radius: 3px;
3313 transition: width var(--transition-med);
3314 flex-shrink: 0;
3315}
3316.cell-progress-label {
3317 font-size: 0.7rem;
3318 color: #808080;
3319 color: oklch(0.6 0 0);
3320 white-space: nowrap;
3321}
3322
3323/* --- Image Cell Styles --- */
3324.cell-image-container { display: flex; align-items: center; justify-content: center; padding: 2px; min-height: 24px; }
3325.cell-image-container img { border-radius: 2px; }
3326
3327/* --- Pivot Table Styles --- */
3328.pivot-section { padding: var(--space-sm) var(--space-md); }
3329.pivot-section:empty { display: none; }
3330.pivot-container {
3331 position: relative;
3332 border: 1px solid var(--color-border);
3333 border-radius: var(--radius-md);
3334 padding: var(--space-md);
3335 background: var(--color-bg);
3336 margin-bottom: var(--space-md);
3337 overflow-x: auto;
3338}
3339.pivot-container h4 { margin: 0 0 var(--space-sm) 0; font-size: 0.9rem; }
3340.pivot-actions {
3341 position: absolute; top: var(--space-xs); right: var(--space-xs);
3342 display: flex; gap: var(--space-xs);
3343}
3344.pivot-actions button {
3345 font-size: 0.75rem; padding: 2px 8px; border-radius: var(--radius-sm);
3346 border: 1px solid var(--color-border); background: var(--color-bg); cursor: pointer;
3347}
3348.pivot-actions button:hover { background: var(--color-bg-hover); }
3349.pivot-table {
3350 width: 100%; border-collapse: collapse; font-size: 0.8rem;
3351}
3352.pivot-table th, .pivot-table td {
3353 border: 1px solid var(--color-border); padding: 4px 8px; text-align: right;
3354}
3355.pivot-table th { background: var(--color-bg-secondary); font-weight: 600; text-align: left; }
3356.pivot-table td.pivot-row-header { font-weight: 600; text-align: left; background: var(--color-bg-secondary); }
3357.pivot-table td.pivot-total { font-weight: 600; background: #f6ede0; }
3358.pivot-table td.pivot-total { font-weight: 600; background: oklch(0.95 0.02 80); }
3359[data-theme="dark"] .pivot-table td.pivot-total { background: #272117; }
3360[data-theme="dark"] .pivot-table td.pivot-total { background: oklch(0.25 0.02 80); }
3361.pivot-table tfoot td { font-weight: 600; background: var(--color-bg-secondary); }
3362
3363/* --- Database View Styles --- */
3364.database-view-section { padding: var(--space-sm) var(--space-md); }
3365.database-view-section:empty { display: none; }
3366.db-view-toolbar {
3367 display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md);
3368 padding: var(--space-xs) var(--space-sm);
3369 border: 1px solid var(--color-border); border-radius: var(--radius-md);
3370 background: var(--color-bg-secondary);
3371}
3372.db-view-toolbar select, .db-view-toolbar button {
3373 font-size: 0.8rem; padding: 4px 8px; border-radius: var(--radius-sm);
3374 border: 1px solid var(--color-border); background: var(--color-bg);
3375}
3376.db-view-close { margin-left: auto; cursor: pointer; }
3377
3378/* Kanban */
3379.kanban-board {
3380 display: flex; gap: var(--space-md); overflow-x: auto; padding-bottom: var(--space-sm);
3381 min-height: 200px;
3382}
3383.kanban-column {
3384 min-width: 220px; max-width: 280px; flex-shrink: 0;
3385 background: var(--color-bg-secondary); border-radius: var(--radius-md);
3386 padding: var(--space-sm);
3387}
3388.kanban-column-header {
3389 font-weight: 600; font-size: 0.85rem; margin-bottom: var(--space-sm);
3390 padding-bottom: var(--space-xs); border-bottom: 2px solid var(--color-border);
3391 display: flex; justify-content: space-between; align-items: center;
3392}
3393.kanban-column-count {
3394 font-size: 0.7rem; color: var(--color-text-secondary);
3395 background: var(--color-bg); border-radius: 99px; padding: 1px 6px;
3396}
3397.kanban-card {
3398 background: var(--color-bg); border: 1px solid var(--color-border);
3399 border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm);
3400 margin-bottom: var(--space-xs); cursor: pointer; font-size: 0.8rem;
3401 transition: box-shadow var(--transition-fast);
3402}
3403.kanban-card:hover { box-shadow: 0 2px 8px #0000001a; }
3404.kanban-card:hover { box-shadow: 0 2px 8px oklch(0 0 0 / 0.1); }
3405.kanban-card-title { font-weight: 600; margin-bottom: 2px; }
3406.kanban-card-field { color: var(--color-text-secondary); font-size: 0.75rem; }
3407
3408/* Gallery */
3409.gallery-grid {
3410 display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
3411 gap: var(--space-md);
3412}
3413.gallery-card {
3414 background: var(--color-bg); border: 1px solid var(--color-border);
3415 border-radius: var(--radius-md); padding: var(--space-md);
3416 cursor: pointer; transition: box-shadow var(--transition-fast);
3417}
3418.gallery-card:hover { box-shadow: 0 2px 8px #0000001a; }
3419.gallery-card:hover { box-shadow: 0 2px 8px oklch(0 0 0 / 0.1); }
3420.gallery-card-title { font-weight: 600; font-size: 0.9rem; margin-bottom: var(--space-xs); }
3421.gallery-card-field { font-size: 0.8rem; color: var(--color-text-secondary); }
3422.gallery-card-field-label { font-weight: 500; }
3423
3424/* Calendar */
3425.calendar-view { max-width: 900px; }
3426.calendar-month-header {
3427 font-size: 1rem; font-weight: 600; margin: var(--space-md) 0 var(--space-sm);
3428 display: flex; align-items: center; gap: var(--space-sm);
3429}
3430.calendar-month-nav { font-size: 0.85rem; cursor: pointer; background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 2px 8px; }
3431.calendar-view .calendar-grid {
3432 display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
3433 background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
3434}
3435.calendar-view .calendar-day-header {
3436 background: var(--color-bg-secondary); padding: 4px; text-align: center;
3437 font-size: 0.75rem; font-weight: 600;
3438}
3439.calendar-view .calendar-day {
3440 background: var(--color-bg); min-height: 80px; padding: 4px;
3441 font-size: 0.75rem; vertical-align: top;
3442}
3443.calendar-view .calendar-day.calendar-day-other { opacity: 0.4; }
3444.calendar-view .calendar-day-number { font-weight: 600; margin-bottom: 2px; }
3445.calendar-view .calendar-event {
3446 background: #7ee3d0; color: #002922;
3447 background: oklch(0.85 0.1 180); color: oklch(0.25 0.05 180);
3448 border-radius: 3px; padding: 1px 4px; margin-bottom: 1px;
3449 font-size: 0.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
3450 cursor: pointer;
3451}
3452[data-theme="dark"] .calendar-view .calendar-event { background: #004a3c; color: #abd9cf; }
3453[data-theme="dark"] .calendar-view .calendar-event { background: oklch(0.35 0.1 180); color: oklch(0.85 0.05 180); }
3454.calendar-view .calendar-event:hover { opacity: 0.8; }
3455
3456/* --- Form Builder Styles --- */
3457.form-builder-main { max-width: 720px; margin: 0 auto; padding: var(--space-md); }
3458.form-builder-toolbar {
3459 display: flex; gap: var(--space-sm); margin-bottom: var(--space-md);
3460 padding: var(--space-sm); border: 1px solid var(--color-border);
3461 border-radius: var(--radius-md); background: var(--color-bg-secondary);
3462}
3463.form-header { margin-bottom: var(--space-md); }
3464.form-description {
3465 width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
3466 padding: var(--space-sm); font-size: 0.9rem; resize: vertical;
3467 background: var(--color-bg); color: var(--color-text);
3468}
3469.form-question-card {
3470 border: 1px solid var(--color-border); border-radius: var(--radius-md);
3471 padding: var(--space-md); margin-bottom: var(--space-sm);
3472 background: var(--color-bg); transition: border-color var(--transition-fast);
3473}
3474.form-question-card:focus-within { border-color: var(--color-accent); }
3475.form-question-header {
3476 display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-sm);
3477}
3478.form-question-number {
3479 width: 24px; height: 24px; border-radius: 50%; background: var(--color-accent);
3480 color: white; display: flex; align-items: center; justify-content: center;
3481 font-size: 0.75rem; font-weight: 600; flex-shrink: 0;
3482}
3483.form-question-type-badge {
3484 font-size: 0.7rem; padding: 2px 6px; border-radius: 99px;
3485 background: var(--color-bg-secondary); color: var(--color-text-secondary);
3486}
3487.form-question-label, .form-question-desc {
3488 width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
3489 padding: var(--space-xs) var(--space-sm); font-size: 0.9rem;
3490 margin-bottom: var(--space-xs); background: var(--color-bg); color: var(--color-text);
3491}
3492.form-question-label { font-weight: 500; }
3493.form-question-desc { font-size: 0.8rem; color: var(--color-text-secondary); }
3494.form-question-required-label { font-size: 0.75rem; display: flex; align-items: center; gap: 4px; }
3495.form-question-header button {
3496 background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
3497 padding: 2px 6px; cursor: pointer; font-size: 0.8rem;
3498}
3499.form-question-header button:hover { background: var(--color-bg-hover); }
3500.form-question-header button:disabled { opacity: 0.3; cursor: default; }
3501.form-question-options { margin-top: var(--space-xs); }
3502.form-option-row {
3503 display: flex; align-items: center; gap: var(--space-xs); margin-bottom: 4px;
3504}
3505.form-option-input {
3506 flex: 1; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
3507 padding: 4px 8px; font-size: 0.8rem; background: var(--color-bg); color: var(--color-text);
3508}
3509.form-option-remove, .form-add-option {
3510 font-size: 0.75rem; background: none; border: 1px solid var(--color-border);
3511 border-radius: var(--radius-sm); padding: 2px 6px; cursor: pointer;
3512}
3513.form-add-option { margin-top: 4px; }
3514.form-question-type-grid {
3515 display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xs);
3516}
3517.form-type-btn {
3518 display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm);
3519 border: 1px solid var(--color-border); border-radius: var(--radius-sm);
3520 background: var(--color-bg); cursor: pointer; font-size: 0.85rem;
3521}
3522.form-type-btn:hover { background: var(--color-bg-hover); border-color: var(--color-accent); }
3523.form-type-icon { font-size: 1.1rem; width: 24px; text-align: center; }
3524
3525/* Form preview */
3526.form-preview-container { max-width: 600px; margin: 0 auto; }
3527.form-preview-desc { color: var(--color-text-secondary); margin-bottom: var(--space-md); }
3528.form-preview-question { margin-bottom: var(--space-md); }
3529.form-preview-label { font-weight: 500; display: block; margin-bottom: 4px; }
3530.form-required-mark { color: #de3b3d; }
3531.form-required-mark { color: oklch(0.6 0.2 25); }
3532.form-preview-hint { font-size: 0.8rem; color: var(--color-text-secondary); margin: 2px 0 6px; }
3533.form-preview-input, .form-preview-textarea, .form-preview-select {
3534 width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
3535 padding: var(--space-xs) var(--space-sm); font-size: 0.9rem;
3536 background: var(--color-bg); color: var(--color-text);
3537}
3538.form-preview-radio, .form-preview-checkbox {
3539 display: block; padding: 4px 0; font-size: 0.9rem; cursor: pointer;
3540}
3541.form-preview-rating, .form-preview-scale { display: flex; gap: 4px; }
3542.form-rating-star {
3543 font-size: 1.5rem; background: none; border: none; cursor: pointer;
3544 color: var(--color-border); transition: color var(--transition-fast);
3545}
3546.form-rating-star:hover, .form-rating-star.active { color: #dfa11a; }
3547.form-rating-star:hover, .form-rating-star.active { color: oklch(0.75 0.15 80); }
3548.form-scale-btn {
3549 width: 32px; height: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
3550 background: var(--color-bg); cursor: pointer; font-size: 0.85rem;
3551}
3552.form-scale-btn:hover, .form-scale-btn.active {
3553 background: var(--color-accent); color: white; border-color: var(--color-accent);
3554}
3555.form-preview-error { color: #de3b3d; font-size: 0.8rem; min-height: 1.2em; }
3556.form-preview-error { color: oklch(0.6 0.2 25); font-size: 0.8rem; min-height: 1.2em; }
3557.form-preview-actions { margin-top: var(--space-lg); }
3558
3559/* File upload question */
3560.form-file-upload { margin-top: var(--space-xs); }
3561.form-file-input {
3562 display: block;
3563 width: 100%;
3564 padding: var(--space-sm);
3565 border: 2px dashed var(--color-border);
3566 border-radius: var(--radius-sm, 4px);
3567 background: var(--color-bg);
3568 cursor: pointer;
3569 font-size: 0.85rem;
3570}
3571.form-file-input:hover { border-color: var(--color-accent); }
3572.form-file-input:disabled { opacity: 0.5; cursor: wait; }
3573.form-file-status { font-size: 0.8rem; margin-top: 4px; min-height: 1.2em; }
3574.form-file-uploading { color: var(--color-text-secondary); }
3575.form-file-success { color: oklch(0.6 0.18 145); }
3576.form-file-error { color: oklch(0.6 0.2 25); }
3577.form-file-name { font-weight: 500; }
3578.form-file-size { color: var(--color-text-secondary); }
3579.form-file-link { color: var(--color-accent); text-decoration: underline; }
3580
3581.sheet-grid td.editing .cell-display { display: none; }
3582
3583.cell-editor {
3584 position: absolute;
3585 top: 0;
3586 left: 0;
3587 min-width: 100%;
3588 min-height: 100%;
3589 font-family: var(--font-mono);
3590 font-size: 0.8rem;
3591 padding: 0.15rem 0.4rem;
3592 border: 2px solid var(--color-teal);
3593 border-radius: 1px;
3594 outline: none;
3595 background: var(--color-cell-editor-bg);
3596 color: var(--color-text);
3597 z-index: var(--z-component);
3598 box-shadow: 0 2px 8px #006e6f26;
3599 box-shadow: 0 2px 8px oklch(0.48 0.1 195 / 0.15);
3600 box-sizing: border-box;
3601}
3602.cell-editor::placeholder {
3603 color: var(--color-text-faint);
3604 font-style: italic;
3605}
3606
3607/* --- Frozen panes --- */
3608.sheet-grid td.frozen-row,
3609.sheet-grid td.frozen-col,
3610.sheet-grid td.frozen-corner {
3611 position: sticky;
3612 background: var(--color-bg);
3613 /* Force own compositing layer — prevents WebKit/Blink from dropping the
3614 background paint of sticky cells during fast scrolling (oklch + custom
3615 properties exacerbate the bug). */
3616 -webkit-backface-visibility: hidden;
3617 backface-visibility: hidden;
3618}
3619
3620[data-theme="dark"] .sheet-grid td.frozen-row,
3621[data-theme="dark"] .sheet-grid td.frozen-col,
3622[data-theme="dark"] .sheet-grid td.frozen-corner {
3623 background: var(--color-bg);
3624}
3625
3626@media (prefers-color-scheme: dark) {
3627 :root:not([data-theme="light"]) .sheet-grid td.frozen-row,
3628 :root:not([data-theme="light"]) .sheet-grid td.frozen-col,
3629 :root:not([data-theme="light"]) .sheet-grid td.frozen-corner {
3630 background: var(--color-bg);
3631 }
3632}
3633
3634.sheet-grid td.frozen-row {
3635 z-index: 3;
3636}
3637
3638.sheet-grid td.frozen-col {
3639 z-index: 2;
3640}
3641
3642.sheet-grid td.frozen-corner {
3643 z-index: 4;
3644}
3645
3646/* Frozen column headers (thead th) that are also sticky-left need z-index 5
3647 so they stay above frozen-corner cells (z-index 4) during scrolling. */
3648.sheet-grid thead th.frozen-col {
3649 z-index: 5;
3650}
3651
3652/* Frozen row headers need z-index 4 so they stay above frozen-row cells (z-index 3)
3653 when scrolling horizontally. They're sticky in both directions (left from .row-header,
3654 top from inline style). */
3655.sheet-grid th.row-header.frozen-row {
3656 z-index: 4;
3657 background: var(--color-surface);
3658}
3659
3660/* Freeze boundary: thicker line with shadow for clear visual separation */
3661.sheet-grid td.freeze-border-bottom,
3662.sheet-grid th.freeze-border-bottom {
3663 border-bottom: 2px solid #006e6f99;
3664 border-bottom: 2px solid oklch(0.48 0.1 195 / 0.6);
3665 box-shadow: 0 2px 4px #006e6f26;
3666 box-shadow: 0 2px 4px oklch(0.48 0.1 195 / 0.15);
3667}
3668
3669.sheet-grid td.freeze-border-right,
3670.sheet-grid th.freeze-border-right {
3671 border-right: 2px solid #006e6f99;
3672 border-right: 2px solid oklch(0.48 0.1 195 / 0.6);
3673 box-shadow: 2px 0 4px #006e6f26;
3674 box-shadow: 2px 0 4px oklch(0.48 0.1 195 / 0.15);
3675}
3676
3677/* Corner cells with both borders need combined box-shadow (CSS overwrites, not combines) */
3678.sheet-grid td.freeze-border-bottom.freeze-border-right,
3679.sheet-grid th.freeze-border-bottom.freeze-border-right {
3680 box-shadow: 2px 0 4px #006e6f26, 0 2px 4px #006e6f26;
3681 box-shadow: 2px 0 4px oklch(0.48 0.1 195 / 0.15), 0 2px 4px oklch(0.48 0.1 195 / 0.15);
3682}
3683
3684[data-theme="dark"] .sheet-grid td.freeze-border-bottom,
3685[data-theme="dark"] .sheet-grid th.freeze-border-bottom {
3686 border-bottom-color: #0f9293b3;
3687 border-bottom-color: oklch(0.6 0.1 195 / 0.7);
3688 box-shadow: 0 2px 6px #00000066;
3689 box-shadow: 0 2px 6px oklch(0.05 0.005 195 / 0.4);
3690}
3691
3692[data-theme="dark"] .sheet-grid td.freeze-border-right,
3693[data-theme="dark"] .sheet-grid th.freeze-border-right {
3694 border-right-color: #0f9293b3;
3695 border-right-color: oklch(0.6 0.1 195 / 0.7);
3696 box-shadow: 2px 0 6px #00000066;
3697 box-shadow: 2px 0 6px oklch(0.05 0.005 195 / 0.4);
3698}
3699
3700[data-theme="dark"] .sheet-grid td.freeze-border-bottom.freeze-border-right,
3701[data-theme="dark"] .sheet-grid th.freeze-border-bottom.freeze-border-right {
3702 box-shadow: 2px 0 6px #00000066, 0 2px 6px #00000066;
3703 box-shadow: 2px 0 6px oklch(0.05 0.005 195 / 0.4), 0 2px 6px oklch(0.05 0.005 195 / 0.4);
3704}
3705
3706@media (prefers-color-scheme: dark) {
3707 :root:not([data-theme="light"]) .sheet-grid td.freeze-border-bottom,
3708 :root:not([data-theme="light"]) .sheet-grid th.freeze-border-bottom {
3709 border-bottom-color: #0f9293b3;
3710 border-bottom-color: oklch(0.6 0.1 195 / 0.7);
3711 box-shadow: 0 2px 6px #00000066;
3712 box-shadow: 0 2px 6px oklch(0.05 0.005 195 / 0.4);
3713 }
3714 :root:not([data-theme="light"]) .sheet-grid td.freeze-border-right,
3715 :root:not([data-theme="light"]) .sheet-grid th.freeze-border-right {
3716 border-right-color: #0f9293b3;
3717 border-right-color: oklch(0.6 0.1 195 / 0.7);
3718 box-shadow: 2px 0 6px #00000066;
3719 box-shadow: 2px 0 6px oklch(0.05 0.005 195 / 0.4);
3720 }
3721 :root:not([data-theme="light"]) .sheet-grid td.freeze-border-bottom.freeze-border-right,
3722 :root:not([data-theme="light"]) .sheet-grid th.freeze-border-bottom.freeze-border-right {
3723 box-shadow: 2px 0 6px #00000066, 0 2px 6px #00000066;
3724 box-shadow: 2px 0 6px oklch(0.05 0.005 195 / 0.4), 0 2px 6px oklch(0.05 0.005 195 / 0.4);
3725 }
3726}
3727
3728
3729/* Active state for freeze toolbar buttons */
3730.btn-icon.freeze-active,
3731.tb-btn.freeze-active {
3732 color: var(--color-teal);
3733 background: var(--color-teal-light);
3734}
3735
3736/* Cursor during column resize */
3737body.col-resizing,
3738body.col-resizing * {
3739 cursor: col-resize !important;
3740 user-select: none !important;
3741}
3742
3743/* Cell formatting classes */
3744.cell-bold { font-weight: 600; }
3745.cell-italic { font-style: italic; }
3746.cell-align-left { justify-content: flex-start; }
3747.cell-align-center { justify-content: center; }
3748.cell-align-right { justify-content: flex-end; }
3749
3750/* Sheet tabs — fixed-height strip with horizontally scrollable tabs
3751 and a sticky "add sheet" button that stays visible while scrolling. */
3752.sheet-tabs {
3753 display: flex;
3754 align-items: center;
3755 flex-wrap: nowrap;
3756 gap: var(--space-xs);
3757 padding: var(--space-xs) var(--space-sm);
3758 border-top: 1px solid var(--color-border);
3759 background: var(--color-surface);
3760 flex-shrink: 0;
3761 overflow-x: auto;
3762 overflow-y: hidden;
3763 scrollbar-width: thin;
3764 scrollbar-color: oklch(0.78 0.01 75) transparent;
3765}
3766[data-theme="dark"] .sheet-tabs {
3767 scrollbar-color: oklch(0.35 0.01 75) transparent;
3768}
3769@media (prefers-color-scheme: dark) {
3770 :root:not([data-theme="light"]) .sheet-tabs {
3771 scrollbar-color: oklch(0.35 0.01 75) transparent;
3772 }
3773}
3774
3775/* Thin scrollbar matched to .sheet-container — no transparent border so
3776 the thumb fills the track, no "gappy" look. */
3777.sheet-tabs::-webkit-scrollbar {
3778 height: 6px;
3779}
3780.sheet-tabs::-webkit-scrollbar-track {
3781 background: transparent;
3782}
3783.sheet-tabs::-webkit-scrollbar-thumb {
3784 background: oklch(0.78 0.01 75);
3785 border-radius: 3px;
3786}
3787.sheet-tabs::-webkit-scrollbar-thumb:hover {
3788 background: oklch(0.68 0.01 75);
3789}
3790[data-theme="dark"] .sheet-tabs::-webkit-scrollbar-thumb {
3791 background: oklch(0.35 0.01 75);
3792}
3793[data-theme="dark"] .sheet-tabs::-webkit-scrollbar-thumb:hover {
3794 background: oklch(0.45 0.01 75);
3795}
3796.sheet-tabs::-webkit-scrollbar-corner {
3797 background: transparent;
3798}
3799
3800.sheet-tab {
3801 font-family: var(--font-body);
3802 font-size: 0.75rem;
3803 font-weight: 500;
3804 padding: var(--space-xs) var(--space-sm);
3805 background: transparent;
3806 border: 1px solid transparent;
3807 border-radius: var(--radius-sm);
3808 color: var(--color-text-muted);
3809 cursor: pointer;
3810 transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
3811 position: relative;
3812 flex-shrink: 0;
3813 white-space: nowrap;
3814 line-height: 1.4;
3815}
3816.sheet-tab:hover { background: var(--color-hover); color: var(--color-text); }
3817.sheet-tab.active {
3818 background: var(--color-bg);
3819 color: var(--color-text);
3820 border-color: var(--color-border);
3821}
3822
3823/* Sheet tab drag reorder */
3824.sheet-tab.dragging {
3825 opacity: 0.4;
3826}
3827
3828.sheet-tab.drag-over-left::before {
3829 content: '';
3830 position: absolute;
3831 left: -2px;
3832 top: 2px;
3833 bottom: 2px;
3834 width: 2px;
3835 background: var(--color-teal);
3836 border-radius: 1px;
3837}
3838
3839.sheet-tab.drag-over-right::after {
3840 content: '';
3841 position: absolute;
3842 right: -2px;
3843 top: 2px;
3844 bottom: 2px;
3845 width: 2px;
3846 background: var(--color-teal);
3847 border-radius: 1px;
3848}
3849
3850/* Sticky "add sheet" button — stays pinned to the right edge of the
3851 visible strip even while the tab list is scrolled. Uses a ::before
3852 gradient to softly fade tabs out as they scroll underneath, instead
3853 of hard-stopping at a box-shadow edge. */
3854.sheet-tab-add {
3855 position: sticky;
3856 right: 0;
3857 flex-shrink: 0;
3858 font-size: 0.9rem;
3859 line-height: 1;
3860 padding: var(--space-xs) var(--space-sm);
3861 margin-left: auto;
3862 background: var(--color-surface);
3863 border: 1px solid transparent;
3864 color: var(--color-text-muted);
3865 cursor: pointer;
3866 border-radius: var(--radius-sm);
3867 transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
3868}
3869.sheet-tab-add::before {
3870 content: '';
3871 position: absolute;
3872 top: 0;
3873 bottom: 0;
3874 right: 100%;
3875 width: 24px;
3876 pointer-events: none;
3877 background: linear-gradient(to right, transparent, var(--color-surface));
3878}
3879.sheet-tab-add:hover {
3880 background: var(--color-hover);
3881 color: var(--color-text);
3882 border-color: var(--color-border);
3883}
3884.sheet-tab-add:hover::before {
3885 background: linear-gradient(to right, transparent, var(--color-hover));
3886}
3887
3888/* Sheet tab color bar — colored underline indicator */
3889.sheet-tab-color-bar {
3890 position: absolute;
3891 left: 0;
3892 right: 0;
3893 bottom: 0;
3894 height: 3px;
3895 border-radius: 0 0 var(--radius-sm) var(--radius-sm);
3896 pointer-events: none;
3897}
3898
3899/* Sheet tab label (inside button, next to color bar) */
3900.sheet-tab-label {
3901 position: relative;
3902 z-index: 1;
3903}
3904
3905/* Inline rename input */
3906.sheet-tab-rename {
3907 outline: none;
3908 border: 1px solid var(--color-teal);
3909 border-radius: 2px;
3910 padding: 0 2px;
3911 background: var(--color-bg);
3912 color: var(--color-text);
3913 font: inherit;
3914 min-width: 2em;
3915 cursor: text;
3916}
3917
3918/* Sheet tab color picker popup */
3919.sheet-tab-color-picker {
3920 display: flex;
3921 flex-wrap: wrap;
3922 gap: 4px;
3923 padding: 6px;
3924 background: var(--color-surface);
3925 border: 1px solid var(--color-border);
3926 border-radius: var(--radius-md);
3927 box-shadow: var(--shadow-lg);
3928 width: 148px;
3929}
3930
3931.sheet-tab-color-swatch {
3932 width: 24px;
3933 height: 24px;
3934 border: 2px solid transparent;
3935 border-radius: var(--radius-sm);
3936 cursor: pointer;
3937 padding: 0;
3938 transition: border-color var(--transition-fast), transform var(--transition-fast);
3939}
3940.sheet-tab-color-swatch:hover {
3941 transform: scale(1.15);
3942 border-color: var(--color-text-muted);
3943}
3944.sheet-tab-color-swatch.selected {
3945 border-color: var(--color-teal);
3946}
3947
3948/* "No color" swatch */
3949.sheet-tab-color-none {
3950 background: var(--color-bg);
3951 color: var(--color-text-muted);
3952 font-size: 0.7rem;
3953 line-height: 20px;
3954 text-align: center;
3955 border-color: var(--color-border);
3956}
3957
3958/* --- Utility classes --- */
3959.sr-only {
3960 position: absolute;
3961 width: 1px;
3962 height: 1px;
3963 padding: 0;
3964 margin: -1px;
3965 overflow: hidden;
3966 clip: rect(0, 0, 0, 0);
3967 border: 0;
3968}
3969
3970.flex { display: flex; }
3971.items-center { align-items: center; }
3972.gap-sm { gap: var(--space-sm); }
3973.gap-md { gap: var(--space-md); }
3974
3975/* --- Key entry modal --- */
3976.modal-overlay {
3977 position: fixed;
3978 inset: 0;
3979 background: var(--color-modal-backdrop);
3980 display: flex;
3981 align-items: center;
3982 justify-content: center;
3983 z-index: var(--z-overlay);
3984 backdrop-filter: blur(4px);
3985}
3986
3987.modal {
3988 background: var(--color-bg);
3989 border: 1px solid var(--color-border);
3990 border-radius: var(--radius-lg);
3991 padding: var(--space-xl);
3992 max-width: 28rem;
3993 width: 90vw;
3994 box-shadow: var(--shadow-lg);
3995}
3996
3997.modal h2 {
3998 margin-bottom: var(--space-sm);
3999}
4000
4001.modal p {
4002 color: var(--color-text-muted);
4003 font-size: 0.9rem;
4004 margin-bottom: var(--space-lg);
4005}
4006
4007.modal input[type="text"],
4008.modal input[type="password"] {
4009 width: 100%;
4010 padding: 0.6rem 0.8rem;
4011 font-family: var(--font-mono);
4012 font-size: 0.85rem;
4013 border: 1px solid var(--color-border);
4014 border-radius: var(--radius-sm);
4015 background: var(--color-surface);
4016 color: var(--color-text);
4017 outline: none;
4018 margin-bottom: var(--space-md);
4019}
4020.modal input:focus {
4021 border-color: var(--color-teal);
4022 box-shadow: 0 0 0 2px var(--color-focus);
4023}
4024
4025.modal-actions {
4026 display: flex;
4027 gap: var(--space-sm);
4028 justify-content: flex-end;
4029}
4030
4031/* --- Keyboard Shortcuts Modal --- */
4032.shortcuts-modal {
4033 max-width: 36rem;
4034 max-height: 80vh;
4035 overflow-y: auto;
4036}
4037
4038.shortcuts-modal h2 {
4039 font-family: var(--font-display);
4040 font-size: 1.3rem;
4041 margin-bottom: var(--space-lg);
4042 display: flex;
4043 align-items: center;
4044 justify-content: space-between;
4045}
4046
4047.shortcuts-modal-close {
4048 background: transparent;
4049 border: none;
4050 color: var(--color-text-muted);
4051 cursor: pointer;
4052 font-size: 1.2rem;
4053 padding: var(--space-xs);
4054 border-radius: var(--radius-sm);
4055 line-height: 1;
4056}
4057.shortcuts-modal-close:hover {
4058 color: var(--color-text);
4059 background: var(--color-hover);
4060}
4061
4062/* --- Toolbar Dropdowns --- */
4063.toolbar-dropdown {
4064 position: relative;
4065 display: inline-flex;
4066}
4067
4068.toolbar-dropdown-toggle {
4069 padding: 0 5px;
4070 border-radius: var(--radius-sm);
4071 background: transparent;
4072 border: none;
4073 color: var(--color-text-muted);
4074 cursor: pointer;
4075 display: inline-flex;
4076 align-items: center;
4077 gap: 0.2rem;
4078 font-size: 14px;
4079 height: 28px;
4080 transition: all var(--transition-fast);
4081 white-space: nowrap;
4082}
4083.toolbar-dropdown-toggle:hover {
4084 color: var(--color-text);
4085 background: var(--color-hover);
4086}
4087.toolbar-dropdown-toggle.active {
4088 color: var(--color-accent);
4089 background: var(--color-btn-active-bg);
4090}
4091.toolbar-dropdown-toggle .caret {
4092 font-size: 0.55rem;
4093 opacity: 0.5;
4094 margin-left: 0.1rem;
4095}
4096
4097.toolbar-dropdown-menu {
4098 display: none;
4099 position: absolute;
4100 top: 100%;
4101 left: 0;
4102 z-index: var(--z-float);
4103 min-width: 10rem;
4104 padding: var(--space-xs) 0;
4105 margin-top: 2px;
4106 background: var(--color-surface);
4107 border: 1px solid var(--color-border);
4108 border-radius: var(--radius-md);
4109 box-shadow: 0 4px 16px #2218121f, 0 1px 3px #2218120f;
4110 box-shadow: 0 4px 16px oklch(0.22 0.02 55 / 0.12), 0 1px 3px oklch(0.22 0.02 55 / 0.06);
4111}
4112.toolbar-dropdown.open .toolbar-dropdown-menu {
4113 display: block;
4114}
4115
4116.toolbar-dropdown-item {
4117 display: flex;
4118 align-items: center;
4119 gap: var(--space-sm);
4120 width: 100%;
4121 padding: 0.35rem 0.75rem;
4122 border: none;
4123 background: transparent;
4124 color: var(--color-text);
4125 font-family: var(--font-body);
4126 font-size: 0.8rem;
4127 cursor: pointer;
4128 text-align: left;
4129 transition: background var(--transition-fast);
4130 white-space: nowrap;
4131}
4132.toolbar-dropdown-item:hover {
4133 background: var(--color-hover);
4134}
4135.toolbar-dropdown-item.active {
4136 color: var(--color-accent);
4137 font-weight: 600;
4138}
4139.toolbar-dropdown-item .item-icon {
4140 width: 1.2rem;
4141 text-align: center;
4142 flex-shrink: 0;
4143 display: inline-flex;
4144 align-items: center;
4145 justify-content: center;
4146}
4147.toolbar-dropdown-item .item-label {
4148 flex: 1;
4149}
4150.toolbar-dropdown-item .item-shortcut {
4151 font-family: var(--font-mono);
4152 font-size: 0.65rem;
4153 color: var(--color-text-faint);
4154 margin-left: var(--space-sm);
4155}
4156
4157.toolbar-dropdown-divider {
4158 height: 1px;
4159 background: var(--color-border);
4160 margin: var(--space-xs) 0;
4161}
4162
4163/* --- Overflow / More Menu --- */
4164.toolbar-overflow {
4165 position: relative;
4166 display: inline-flex;
4167}
4168.toolbar-overflow-toggle {
4169 padding: 0 6px;
4170 border-radius: var(--radius-sm);
4171 background: transparent;
4172 border: none;
4173 color: var(--color-text-muted);
4174 cursor: pointer;
4175 display: inline-flex;
4176 align-items: center;
4177 gap: 0.25rem;
4178 font-size: 14px;
4179 height: 28px;
4180 transition: all var(--transition-fast);
4181 white-space: nowrap;
4182}
4183.toolbar-overflow-toggle:hover {
4184 color: var(--color-text);
4185 background: var(--color-hover);
4186}
4187
4188.toolbar-overflow-menu {
4189 display: none;
4190 position: absolute;
4191 top: 100%;
4192 right: 0;
4193 z-index: var(--z-float);
4194 min-width: 13rem;
4195 padding: var(--space-xs) 0;
4196 margin-top: 2px;
4197 background: var(--color-surface);
4198 border: 1px solid var(--color-border);
4199 border-radius: var(--radius-md);
4200 box-shadow: var(--shadow-md);
4201}
4202.toolbar-overflow.open .toolbar-overflow-menu {
4203 display: block;
4204}
4205
4206/* --- Toolbar layout (flat, single-row) --- */
4207.toolbar {
4208 position: relative;
4209}
4210
4211/* Gdocs toolbar dropdown/overflow toggles: hover/active match .tb-btn states */
4212.gdocs-toolbar .toolbar-dropdown-toggle:hover,
4213.gdocs-toolbar .toolbar-overflow-toggle:hover {
4214 background: #eeeeee;
4215 background: oklch(0.95 0 0);
4216}
4217.gdocs-toolbar .toolbar-dropdown-toggle.active {
4218 background: #c1dcf0;
4219 background: oklch(0.88 0.04 240);
4220}
4221[data-theme="dark"] .gdocs-toolbar .toolbar-dropdown-toggle:hover,
4222[data-theme="dark"] .gdocs-toolbar .toolbar-overflow-toggle:hover {
4223 background: #222222;
4224 background: oklch(0.25 0 0);
4225}
4226[data-theme="dark"] .gdocs-toolbar .toolbar-dropdown-toggle.active {
4227 background: #14242f;
4228 background: oklch(0.25 0.03 240);
4229}
4230@media (prefers-color-scheme: dark) {
4231 :root:not([data-theme="light"]) .gdocs-toolbar .toolbar-dropdown-toggle:hover,
4232 :root:not([data-theme="light"]) .gdocs-toolbar .toolbar-overflow-toggle:hover {
4233 background: #222222;
4234 background: oklch(0.25 0 0);
4235 }
4236 :root:not([data-theme="light"]) .gdocs-toolbar .toolbar-dropdown-toggle.active {
4237 background: #14242f;
4238 background: oklch(0.25 0.03 240);
4239 }
4240}
4241
4242.shortcut-category { margin-bottom: var(--space-lg); }
4243
4244.shortcut-category-title {
4245 font-family: var(--font-body);
4246 font-size: 0.7rem;
4247 font-weight: 600;
4248 letter-spacing: 0.08em;
4249 text-transform: uppercase;
4250 color: var(--color-text-faint);
4251 margin-bottom: var(--space-sm);
4252 padding-bottom: var(--space-xs);
4253 border-bottom: 1px solid var(--color-border);
4254}
4255
4256.shortcut-row {
4257 display: flex;
4258 align-items: center;
4259 justify-content: space-between;
4260 padding: var(--space-xs) 0;
4261 font-size: 0.85rem;
4262}
4263
4264.shortcut-label { color: var(--color-text); }
4265.shortcut-keys { display: flex; align-items: center; gap: 3px; }
4266
4267.shortcut-key {
4268 font-family: var(--font-mono);
4269 font-size: 0.7rem;
4270 font-weight: 500;
4271 background: var(--color-surface);
4272 border: 1px solid var(--color-border);
4273 border-radius: var(--radius-sm);
4274 padding: 0.15rem 0.4rem;
4275 color: var(--color-text-muted);
4276 min-width: 1.4rem;
4277 text-align: center;
4278}
4279
4280/* --- Word/Character Count Footer --- */
4281.docs-footer {
4282 display: flex;
4283 align-items: center;
4284 gap: var(--space-lg);
4285 padding: var(--space-xs) var(--space-md);
4286 border-top: 1px solid var(--color-border);
4287 background: var(--color-surface);
4288 flex-shrink: 0;
4289 font-family: var(--font-mono);
4290 font-size: 0.65rem;
4291 color: var(--color-text-faint);
4292 letter-spacing: 0.02em;
4293}
4294
4295/* --- Autosave Indicator --- */
4296.save-indicator {
4297 display: flex;
4298 align-items: center;
4299 gap: var(--space-xs);
4300 min-width: 12ch;
4301 font-family: var(--font-mono);
4302 font-size: 0.65rem;
4303 color: var(--color-text-faint);
4304 letter-spacing: 0.02em;
4305 transition: color var(--transition-fast);
4306}
4307.save-indicator.saving { color: var(--color-warning); }
4308.save-indicator.unsaved { color: var(--color-accent); }
4309.save-indicator.saved { color: var(--color-text-faint); }
4310
4311/* --- Improved Range Selection (#18) --- */
4312.sheet-grid td.in-range {
4313 background: var(--color-range-bg);
4314}
4315
4316.sheet-grid td.range-top { border-top: 2px solid var(--color-teal); }
4317.sheet-grid td.range-bottom { border-bottom: 2px solid var(--color-teal); }
4318.sheet-grid td.range-left { border-left: 2px solid var(--color-teal); }
4319.sheet-grid td.range-right { border-right: 2px solid var(--color-teal); }
4320
4321/* --- Drag-to-Fill Handle --- */
4322.sheet-grid td.has-fill-handle {
4323 overflow: visible;
4324}
4325.fill-handle {
4326 position: absolute;
4327 bottom: -4px;
4328 right: -4px;
4329 width: 7px;
4330 height: 7px;
4331 background: var(--color-teal);
4332 cursor: crosshair;
4333 z-index: 6;
4334 border: 1px solid var(--color-bg);
4335 pointer-events: auto;
4336}
4337@media (prefers-color-scheme: dark) {
4338 :root:not([data-theme="light"]) .fill-handle {
4339 border-color: var(--color-bg);
4340 }
4341}
4342.sheet-grid td.fill-preview {
4343 background: #c7eded;
4344 background: oklch(0.92 0.04 195);
4345 outline: 1px dashed var(--color-teal);
4346 outline-offset: -1px;
4347}
4348[data-theme="dark"] .sheet-grid td.fill-preview {
4349 background: #032728;
4350 background: oklch(0.25 0.04 195);
4351}
4352@media (prefers-color-scheme: dark) {
4353 :root:not([data-theme="light"]) .sheet-grid td.fill-preview {
4354 background: #032728;
4355 background: oklch(0.25 0.04 195);
4356 }
4357}
4358
4359/* Header hover states */
4360.sheet-grid th[data-col]:hover,
4361.sheet-grid th.row-header:hover {
4362 background: #e2e9ee;
4363 background: oklch(0.93 0.01 240);
4364}
4365[data-theme="dark"] .sheet-grid th[data-col]:hover,
4366[data-theme="dark"] .sheet-grid th.row-header:hover {
4367 background: #171b1f;
4368 background: oklch(0.22 0.01 240);
4369}
4370@media (prefers-color-scheme: dark) {
4371 :root:not([data-theme="light"]) .sheet-grid th[data-col]:hover,
4372 :root:not([data-theme="light"]) .sheet-grid th.row-header:hover {
4373 background: #171b1f;
4374 background: oklch(0.22 0.01 240);
4375 }
4376}
4377
4378.sheet-grid th.col-selected {
4379 /* Layer semi-transparent teal onto solid surface so sticky headers don't go transparent */
4380 background: linear-gradient(var(--color-range-header-bg), var(--color-range-header-bg)), var(--color-surface);
4381 color: var(--color-teal);
4382}
4383
4384.sheet-grid th.row-selected {
4385 background: linear-gradient(var(--color-range-header-bg), var(--color-range-header-bg)), var(--color-surface);
4386 color: var(--color-teal);
4387}
4388
4389/* --- Cell Merge (#11) --- */
4390.btn-icon.merge-active,
4391.tb-btn.merge-active {
4392 color: var(--color-teal);
4393 background: var(--color-merge-active-bg);
4394}
4395
4396.sheet-grid td.merged-cell {
4397 z-index: 1;
4398 overflow: visible;
4399 background: var(--color-bg);
4400}
4401
4402
4403/* --- Format Painter (#active state) --- */
4404.tb-btn.format-painter-active,
4405.tb-btn#tb-format-painter.active {
4406 color: var(--color-accent);
4407 background: #c1dcf0;
4408 background: oklch(0.88 0.04 240);
4409}
4410
4411[data-theme="dark"] .tb-btn#tb-format-painter.active {
4412 background: #14242f;
4413 background: oklch(0.25 0.03 240);
4414}
4415
4416@media (prefers-color-scheme: dark) {
4417 :root:not([data-theme="light"]) .tb-btn#tb-format-painter.active {
4418 background: #14242f;
4419 background: oklch(0.25 0.03 240);
4420 }
4421}
4422
4423body.format-painter-active,
4424body.format-painter-active .sheet-grid td {
4425 cursor: crosshair !important;
4426}
4427
4428/* --- Responsive --- */
4429@media (max-width: 640px) {
4430 .landing-actions { flex-direction: column; align-items: stretch; }
4431 .new-dropdown, .new-btn, .daily-note-btn { width: 100%; justify-content: center; }
4432 .new-menu { left: 0; right: 0; }
4433 .editor-container { padding: var(--space-md); }
4434 .shortcuts-modal { max-width: 95vw; }
4435 .docs-footer { gap: var(--space-md); }
4436}
4437
4438/* --- Inline Comments --- */
4439.tiptap .comment-mark {
4440 background: var(--color-comment-bg);
4441 border-bottom: 2px solid var(--color-comment-border);
4442 cursor: pointer;
4443 border-radius: 1px;
4444 transition: background var(--transition-fast);
4445}
4446.tiptap .comment-mark:hover {
4447 background: var(--color-comment-bg-hover);
4448}
4449
4450.comment-popover {
4451 position: fixed;
4452 z-index: var(--z-popover);
4453 min-width: 14rem;
4454 max-width: 22rem;
4455 padding: var(--space-sm) var(--space-md);
4456 background: var(--color-bg);
4457 border: 1px solid var(--color-border);
4458 border-radius: var(--radius-md);
4459 box-shadow: var(--shadow-lg);
4460 font-family: var(--font-body);
4461 font-size: 0.85rem;
4462}
4463
4464.comment-popover-header {
4465 display: flex;
4466 align-items: baseline;
4467 gap: var(--space-sm);
4468 margin-bottom: var(--space-xs);
4469}
4470
4471.comment-popover-author {
4472 font-weight: 600;
4473 font-size: 0.8rem;
4474 color: var(--color-text);
4475}
4476
4477.comment-popover-time {
4478 font-family: var(--font-mono);
4479 font-size: 0.65rem;
4480 color: var(--color-text-faint);
4481}
4482
4483.comment-popover-text {
4484 color: var(--color-text);
4485 line-height: 1.5;
4486 margin-bottom: var(--space-sm);
4487 word-wrap: break-word;
4488}
4489
4490.comment-popover-actions {
4491 display: flex;
4492 gap: var(--space-xs);
4493 justify-content: flex-end;
4494 border-top: 1px solid var(--color-border);
4495 padding-top: var(--space-xs);
4496}
4497
4498.comment-resolve-btn {
4499 color: var(--color-success);
4500 font-size: 0.75rem;
4501}
4502.comment-resolve-btn:hover {
4503 color: var(--color-text);
4504}
4505
4506.comment-delete-btn {
4507 color: var(--color-danger);
4508 font-size: 0.75rem;
4509}
4510.comment-delete-btn:hover {
4511 color: var(--color-text);
4512}
4513
4514
4515/* --- Toast notifications --- */
4516.toast-notification {
4517 position: fixed;
4518 bottom: 2rem;
4519 left: 50%;
4520 transform: translateX(-50%) translateY(1rem);
4521 background: var(--color-text);
4522 color: var(--color-bg);
4523 font-family: var(--font-body);
4524 font-size: 0.85rem;
4525 padding: 0.6rem 1.2rem;
4526 border-radius: var(--radius-md);
4527 box-shadow: var(--shadow-lg);
4528 opacity: 0;
4529 transition: opacity var(--transition-med), transform var(--transition-med);
4530 z-index: var(--z-tooltip);
4531 pointer-events: none;
4532}
4533.toast-notification.toast-visible {
4534 opacity: 1;
4535 transform: translateX(-50%) translateY(0);
4536}
4537.toast-notification.toast-error {
4538 background: var(--color-danger);
4539}
4540.toast-notification.toast-interactive {
4541 pointer-events: auto;
4542}
4543.toast-undo {
4544 font-weight: 700;
4545 text-decoration: underline;
4546 cursor: pointer;
4547 margin-left: 0.75rem;
4548 opacity: 0.9;
4549}
4550.toast-undo:hover {
4551 opacity: 1;
4552}
4553
4554/* --- Offline indicator badge --- */
4555.offline-badge {
4556 position: fixed;
4557 top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
4558 right: calc(env(safe-area-inset-right, 0px) + 0.75rem);
4559 display: none;
4560 align-items: center;
4561 gap: 0.4rem;
4562 padding: 0.35rem 0.7rem;
4563 background: var(--color-warning, #d9974a);
4564 color: #fff;
4565 font-family: var(--font-body);
4566 font-size: 0.75rem;
4567 font-weight: 600;
4568 border-radius: var(--radius-sm, 4px);
4569 box-shadow: var(--shadow-md);
4570 z-index: var(--z-tooltip);
4571 pointer-events: none;
4572 user-select: none;
4573}
4574.offline-badge-dot {
4575 display: inline-block;
4576 width: 0.5rem;
4577 height: 0.5rem;
4578 border-radius: 50%;
4579 background: #fff;
4580 animation: offline-badge-pulse 2s ease-in-out infinite;
4581}
4582@keyframes offline-badge-pulse {
4583 0%, 100% { opacity: 1; }
4584 50% { opacity: 0.5; }
4585}
4586
4587/* --- Drag-and-drop import overlay --- */
4588.drop-overlay {
4589 position: fixed;
4590 inset: 0;
4591 z-index: var(--z-drop);
4592 background: var(--color-modal-backdrop);
4593 backdrop-filter: blur(2px);
4594 display: flex;
4595 align-items: center;
4596 justify-content: center;
4597 animation: drop-overlay-in 150ms ease-out;
4598}
4599
4600@keyframes drop-overlay-in {
4601 from { opacity: 0; }
4602 to { opacity: 1; }
4603}
4604
4605.drop-overlay-content {
4606 display: flex;
4607 flex-direction: column;
4608 align-items: center;
4609 gap: var(--space-md);
4610 padding: var(--space-2xl);
4611 border: 2px dashed var(--color-teal);
4612 border-radius: var(--radius-lg);
4613 background: var(--color-surface);
4614 box-shadow: var(--shadow-lg);
4615 pointer-events: none;
4616}
4617
4618.drop-overlay-icon {
4619 font-size: 3rem;
4620 line-height: 1;
4621}
4622
4623.drop-overlay-text {
4624 font-family: var(--font-display);
4625 font-size: 1.4rem;
4626 font-weight: 600;
4627 color: var(--color-text);
4628}
4629
4630.drop-overlay-hint {
4631 font-size: 0.85rem;
4632 color: var(--color-text-muted);
4633}
4634
4635/* --- Find & Replace Bar --- */
4636.find-bar {
4637 position: absolute;
4638 top: 0;
4639 right: var(--space-md);
4640 z-index: var(--z-float);
4641 background: var(--color-bg);
4642 border: 1px solid var(--color-border);
4643 border-top: none;
4644 border-radius: 0 0 var(--radius-md) var(--radius-md);
4645 box-shadow: 0 4px 16px #2218121f;
4646 box-shadow: 0 4px 16px oklch(0.22 0.02 55 / 0.12);
4647 padding: var(--space-sm) var(--space-md);
4648 display: flex;
4649 flex-direction: column;
4650 gap: var(--space-xs);
4651 min-width: 22rem;
4652 max-width: 32rem;
4653 animation: find-bar-slide 150ms ease-out;
4654}
4655
4656@keyframes find-bar-slide {
4657 from { opacity: 0; transform: translateY(-8px); }
4658 to { opacity: 1; transform: translateY(0); }
4659}
4660
4661[data-theme="dark"] .find-bar {
4662 box-shadow: 0 4px 16px #01000080;
4663 box-shadow: 0 4px 16px oklch(0.05 0.005 75 / 0.5);
4664}
4665
4666@media (prefers-color-scheme: dark) {
4667 :root:not([data-theme="light"]) .find-bar {
4668 box-shadow: 0 4px 16px #01000080;
4669 box-shadow: 0 4px 16px oklch(0.05 0.005 75 / 0.5);
4670 }
4671}
4672
4673.find-bar-row {
4674 display: flex;
4675 align-items: center;
4676 gap: var(--space-xs);
4677}
4678
4679.find-bar-input {
4680 flex: 1;
4681 font-family: var(--font-body);
4682 font-size: 0.85rem;
4683 padding: 0.35rem 0.6rem;
4684 border: 1px solid var(--color-border);
4685 border-radius: var(--radius-sm);
4686 background: var(--color-surface);
4687 color: var(--color-text);
4688 outline: none;
4689 min-width: 0;
4690}
4691.find-bar-input:focus {
4692 border-color: var(--color-teal);
4693 box-shadow: 0 0 0 2px var(--color-focus);
4694}
4695
4696.find-bar-count {
4697 font-family: var(--font-mono);
4698 font-size: 0.7rem;
4699 color: var(--color-text-faint);
4700 white-space: nowrap;
4701 min-width: 4rem;
4702 text-align: center;
4703}
4704
4705.find-bar-btn {
4706 padding: 0.3rem 0.5rem !important;
4707 font-size: 0.75rem !important;
4708 white-space: nowrap;
4709 border-radius: var(--radius-sm);
4710 transition: background var(--transition-fast), color var(--transition-fast);
4711}
4712
4713.find-bar-replace {
4714 padding-left: 0;
4715}
4716
4717/* Search highlight decorations */
4718.search-match {
4719 background: var(--color-search-match);
4720 border-radius: 1px;
4721}
4722
4723.search-match-active {
4724 background: var(--color-search-match-active);
4725 color: var(--color-search-match-text);
4726 border-radius: 1px;
4727}
4728
4729@media (max-width: 640px) {
4730 .find-bar {
4731 left: 0;
4732 right: 0;
4733 min-width: 0;
4734 max-width: none;
4735 border-radius: 0;
4736 }
4737}
4738
4739/* --- Page Break --- */
4740.tiptap .page-break {
4741 position: relative;
4742 margin: 1.5em 0;
4743 border: none;
4744 text-align: center;
4745 page-break-after: always;
4746 break-after: page;
4747 pointer-events: none;
4748}
4749.tiptap .page-break::before {
4750 content: '';
4751 display: block;
4752 border-top: 2px dashed var(--color-border-strong);
4753}
4754.tiptap .page-break::after {
4755 content: 'Page Break';
4756 display: inline-block;
4757 position: relative;
4758 top: -0.75em;
4759 background: var(--color-bg);
4760 padding: 0 0.75em;
4761 font-family: var(--font-body);
4762 font-size: 0.65rem;
4763 font-weight: 600;
4764 letter-spacing: 0.06em;
4765 text-transform: uppercase;
4766 color: var(--color-text-faint);
4767}
4768.tiptap .page-break.ProseMirror-selectednode {
4769 pointer-events: auto;
4770}
4771.tiptap .page-break.ProseMirror-selectednode::before {
4772 border-color: var(--color-accent);
4773}
4774
4775/* Dropdown icon-text variant (smaller icon for text symbols) */
4776.dd-icon-text {
4777 font-size: 13px;
4778}
4779
4780/* --- Toggle Block (collapsible section) #131 --- */
4781.tiptap .toggle-block {
4782 border: 1px solid var(--color-border);
4783 border-radius: var(--radius-md);
4784 padding: 0.5rem 0.75rem;
4785 margin: 0.75em 0;
4786}
4787
4788.tiptap .toggle-block[open] {
4789 padding-bottom: 0.75rem;
4790}
4791
4792.tiptap .toggle-summary {
4793 cursor: pointer;
4794 font-weight: 600;
4795 padding: 0.25rem 0;
4796 list-style: disclosure-closed;
4797}
4798
4799.tiptap .toggle-block[open] > .toggle-summary {
4800 list-style: disclosure-open;
4801 margin-bottom: 0.5rem;
4802}
4803
4804/* --- Footnotes (#122) --- */
4805.tiptap .footnote-marker {
4806 cursor: pointer;
4807 color: var(--color-accent);
4808 font-size: 0.75em;
4809 vertical-align: super;
4810 line-height: 0;
4811 padding: 0 1px;
4812 font-weight: 600;
4813}
4814
4815.tiptap .footnote-marker:hover {
4816 text-decoration: underline;
4817}
4818
4819.tiptap .footnote-marker.ProseMirror-selectednode {
4820 outline: 2px solid var(--color-accent);
4821 border-radius: 2px;
4822}
4823
4824/* Minimap */
4825.minimap {
4826 position: fixed;
4827 right: 0;
4828 top: 60px;
4829 bottom: 0;
4830 width: 140px;
4831 background: var(--color-surface);
4832 border-left: 1px solid var(--color-border);
4833 overflow: hidden;
4834 z-index: var(--z-component);
4835 font-size: 0.65rem;
4836 line-height: 1.3;
4837}
4838
4839.minimap-viewport {
4840 position: absolute;
4841 right: 0;
4842 left: 0;
4843 background: #5e93ca1a;
4844 background: oklch(0.65 0.1 250 / 0.1);
4845 border: 1px solid #5e93ca4d;
4846 border: 1px solid oklch(0.65 0.1 250 / 0.3);
4847 border-radius: 2px;
4848 pointer-events: none;
4849 transition: top var(--transition-fast), height var(--transition-fast);
4850}
4851
4852.minimap-headings {
4853 padding: 8px 10px;
4854 cursor: pointer;
4855}
4856
4857.minimap-heading {
4858 padding: 2px 0;
4859 color: var(--color-text-muted);
4860 white-space: nowrap;
4861 overflow: hidden;
4862 text-overflow: ellipsis;
4863 transition: color var(--transition-fast);
4864}
4865.minimap-heading:hover {
4866 color: var(--color-text);
4867}
4868.minimap-heading[data-level="1"] { font-weight: 600; color: var(--color-text); }
4869.minimap-heading[data-level="2"] { padding-left: 8px; }
4870.minimap-heading[data-level="3"] { padding-left: 16px; font-size: 0.6rem; }
4871
4872.footnote-section {
4873 border-top: 1px solid var(--color-border);
4874 margin-top: 2rem;
4875 padding-top: 1rem;
4876 font-size: 0.875rem;
4877 color: var(--color-text-muted);
4878}
4879
4880.footnote-section h4 {
4881 font-size: 0.75rem;
4882 text-transform: uppercase;
4883 letter-spacing: 0.05em;
4884 margin: 0 0 0.5rem;
4885 color: var(--color-text-muted);
4886}
4887
4888.footnote-section ol {
4889 margin: 0;
4890 padding-left: 1.5rem;
4891}
4892
4893.footnote-section li {
4894 margin-bottom: 0.25rem;
4895}
4896
4897/* --- Resizable Images (#118) --- */
4898.tiptap .resizable-image-wrapper {
4899 margin: 0.75em 0;
4900 line-height: 0;
4901}
4902
4903.tiptap .resizable-image-wrapper[data-align="left"] {
4904 text-align: left;
4905}
4906
4907.tiptap .resizable-image-wrapper[data-align="center"] {
4908 text-align: center;
4909}
4910
4911.tiptap .resizable-image-wrapper[data-align="right"] {
4912 text-align: right;
4913}
4914
4915.tiptap .resizable-image-container {
4916 display: inline-block;
4917 position: relative;
4918 line-height: 0;
4919}
4920
4921.tiptap .resizable-image-container img {
4922 display: block;
4923 max-width: 100%;
4924 border-radius: var(--radius-sm, 4px);
4925}
4926
4927.tiptap .resizable-image-wrapper.selected .resizable-image-container {
4928 outline: 2px solid var(--color-accent);
4929 border-radius: var(--radius-sm, 4px);
4930}
4931
4932/* Resize handles — only visible when selected */
4933.tiptap .resize-handle {
4934 display: none;
4935 position: absolute;
4936 width: 10px;
4937 height: 10px;
4938 background: var(--color-accent);
4939 border: 1px solid var(--color-bg);
4940 border-radius: 2px;
4941 z-index: var(--z-component);
4942}
4943
4944.tiptap .resizable-image-wrapper.selected .resize-handle {
4945 display: block;
4946}
4947
4948.tiptap .resize-handle-nw { top: -5px; left: -5px; cursor: nw-resize; }
4949.tiptap .resize-handle-ne { top: -5px; right: -5px; cursor: ne-resize; }
4950.tiptap .resize-handle-sw { bottom: -5px; left: -5px; cursor: sw-resize; }
4951.tiptap .resize-handle-se { bottom: -5px; right: -5px; cursor: se-resize; }
4952
4953/* --- Print styles --- */
4954@media print {
4955 .app-topbar,
4956 .toolbar,
4957 .docs-footer,
4958 .find-bar,
4959 .comment-popover,
4960 .toast-notification {
4961 display: none !important;
4962 }
4963
4964 .editor-container {
4965 overflow: visible !important;
4966 padding: 0 !important;
4967 }
4968
4969 .editor-wrapper {
4970 max-width: none !important;
4971 }
4972
4973 .tiptap .page-break {
4974 margin: 0;
4975 visibility: hidden;
4976 page-break-before: always;
4977 break-before: page;
4978 }
4979 .tiptap .page-break::before,
4980 .tiptap .page-break::after {
4981 display: none;
4982 }
4983}
4984
4985/* ========================================================
4986 Context Menu
4987 ======================================================== */
4988
4989.context-menu {
4990 position: fixed;
4991 z-index: var(--z-menu);
4992 min-width: 12rem;
4993 padding: var(--space-xs) 0;
4994 background: var(--color-bg);
4995 border: 1px solid var(--color-border);
4996 border-radius: var(--radius-md);
4997 box-shadow: var(--shadow-lg);
4998 font-family: var(--font-body);
4999 font-size: 0.8rem;
5000 color: var(--color-text);
5001 outline: none;
5002}
5003
5004.context-menu-item {
5005 display: flex;
5006 align-items: center;
5007 gap: var(--space-sm);
5008 width: 100%;
5009 padding: 0.35rem 0.75rem;
5010 border: none;
5011 background: transparent;
5012 color: var(--color-text);
5013 font-family: var(--font-body);
5014 font-size: 0.8rem;
5015 cursor: pointer;
5016 text-align: left;
5017 transition: background var(--transition-fast);
5018 white-space: nowrap;
5019 outline: none;
5020}
5021
5022.context-menu-item:hover,
5023.context-menu-item:focus-visible {
5024 background: var(--color-hover);
5025}
5026
5027.context-menu-item.disabled {
5028 color: var(--color-text-faint);
5029 cursor: default;
5030}
5031
5032.context-menu-item.disabled:hover,
5033.context-menu-item.disabled:focus-visible {
5034 background: transparent;
5035}
5036
5037.context-menu-icon {
5038 width: 1.2rem;
5039 text-align: center;
5040 flex-shrink: 0;
5041 display: inline-flex;
5042 align-items: center;
5043 justify-content: center;
5044 font-size: 0.85rem;
5045}
5046
5047.context-menu-label {
5048 flex: 1;
5049}
5050
5051.context-menu-shortcut {
5052 font-family: var(--font-mono);
5053 font-size: 0.65rem;
5054 color: var(--color-text-faint);
5055 margin-left: var(--space-md);
5056}
5057
5058.context-menu-separator {
5059 height: 1px;
5060 background: var(--color-border);
5061 margin: var(--space-xs) 0;
5062}
5063
5064/* ========================================================
5065 Print Preview Modal
5066 ======================================================== */
5067
5068.print-preview-overlay {
5069 position: fixed;
5070 inset: 0;
5071 z-index: var(--z-modal);
5072 background: var(--color-modal-backdrop);
5073 display: flex;
5074 align-items: flex-start;
5075 justify-content: center;
5076 padding: var(--space-xl);
5077 overflow-y: auto;
5078}
5079
5080.print-preview-container {
5081 background: var(--color-bg);
5082 border-radius: var(--radius-lg);
5083 box-shadow: var(--shadow-lg);
5084 max-width: 900px;
5085 width: 100%;
5086 max-height: 90vh;
5087 display: flex;
5088 flex-direction: column;
5089}
5090
5091.print-preview-header {
5092 display: flex;
5093 align-items: center;
5094 justify-content: space-between;
5095 padding: var(--space-md) var(--space-lg);
5096 border-bottom: 1px solid var(--color-border);
5097}
5098
5099.print-preview-header h2 {
5100 font-family: var(--font-display);
5101 font-size: 1.1rem;
5102 font-weight: 600;
5103 margin: 0;
5104}
5105
5106.print-preview-options {
5107 display: flex;
5108 gap: var(--space-md);
5109 padding: var(--space-sm) var(--space-lg);
5110 border-bottom: 1px solid var(--color-border);
5111 flex-wrap: wrap;
5112}
5113
5114.print-preview-options label {
5115 display: flex;
5116 align-items: center;
5117 gap: var(--space-xs);
5118 font-size: 0.8rem;
5119 color: var(--color-text-muted);
5120}
5121
5122.print-preview-options select {
5123 font-size: 0.8rem;
5124 padding: 2px 6px;
5125 border: 1px solid var(--color-border);
5126 border-radius: var(--radius-sm);
5127 background: var(--color-bg);
5128 color: var(--color-text);
5129}
5130
5131.print-preview-body {
5132 flex: 1;
5133 overflow-y: auto;
5134 padding: var(--space-lg);
5135 background: var(--color-surface-alt);
5136}
5137
5138.print-preview-body iframe {
5139 width: 100%;
5140 min-height: 600px;
5141 border: 1px solid var(--color-border);
5142 border-radius: var(--radius-sm);
5143 background: var(--color-bg);
5144}
5145
5146.print-preview-footer {
5147 display: flex;
5148 justify-content: flex-end;
5149 gap: var(--space-sm);
5150 padding: var(--space-md) var(--space-lg);
5151 border-top: 1px solid var(--color-border);
5152}
5153
5154/* Enhanced print styles */
5155@media print {
5156 .context-menu,
5157 .print-preview-overlay {
5158 display: none !important;
5159 }
5160
5161 /* Sheets: hide UI chrome */
5162 .sheets-toolbar,
5163 .tab-bar,
5164 .formula-bar,
5165 .sheets-footer {
5166 display: none !important;
5167 }
5168
5169 .spreadsheet-container {
5170 overflow: visible !important;
5171 }
5172}
5173
5174/* ========================================================
5175 Charts Section
5176 ======================================================== */
5177
5178.charts-section {
5179 display: flex;
5180 flex-wrap: wrap;
5181 gap: var(--space-md);
5182 padding: var(--space-md);
5183}
5184
5185.charts-section:empty {
5186 display: none;
5187}
5188
5189.chart-container {
5190 position: relative;
5191 border: 1px solid var(--color-border);
5192 border-radius: var(--radius-md);
5193 padding: var(--space-md);
5194 background: var(--color-bg);
5195 max-width: 600px;
5196 width: 100%;
5197 margin: 0 auto;
5198}
5199
5200.chart-container canvas {
5201 width: 100% !important;
5202 max-height: 400px;
5203}
5204
5205.chart-actions {
5206 display: flex;
5207 gap: var(--space-xs);
5208 position: absolute;
5209 top: var(--space-xs);
5210 right: var(--space-xs);
5211 opacity: 0;
5212 transition: opacity var(--transition-fast);
5213}
5214
5215.chart-container:hover .chart-actions {
5216 opacity: 1;
5217}
5218
5219.chart-actions button {
5220 background: var(--color-surface);
5221 border: 1px solid var(--color-border);
5222 border-radius: var(--radius-sm);
5223 padding: 2px 8px;
5224 font-size: 0.75rem;
5225 cursor: pointer;
5226 color: var(--color-text-muted);
5227 transition: background var(--transition-fast), color var(--transition-fast);
5228}
5229
5230.chart-actions button:hover {
5231 background: var(--color-hover);
5232 color: var(--color-text);
5233}
5234
5235/* Dark mode chart background */
5236[data-theme="dark"] .chart-container {
5237 background: var(--color-surface);
5238}
5239
5240/* ========================================================
5241 Chart / Sort / Filter Dialogs (Modal)
5242 ======================================================== */
5243
5244.sheet-dialog-overlay {
5245 position: fixed;
5246 inset: 0;
5247 background: var(--color-modal-backdrop);
5248 z-index: var(--z-overlay);
5249 display: flex;
5250 align-items: center;
5251 justify-content: center;
5252}
5253
5254.sheet-dialog {
5255 background: var(--color-bg);
5256 border: 1px solid var(--color-border);
5257 border-radius: var(--radius-lg);
5258 box-shadow: var(--shadow-lg);
5259 padding: var(--space-lg);
5260 min-width: 340px;
5261 max-width: 480px;
5262 width: 90vw;
5263 font-family: var(--font-body);
5264}
5265
5266.sheet-dialog h3 {
5267 margin: 0 0 var(--space-md);
5268 font-family: var(--font-display);
5269 font-size: 1.1rem;
5270 color: var(--color-text);
5271}
5272
5273.sheet-dialog label {
5274 display: block;
5275 margin-bottom: var(--space-xs);
5276 font-size: 0.85rem;
5277 color: var(--color-text-muted);
5278}
5279
5280.sheet-dialog input,
5281.sheet-dialog select {
5282 width: 100%;
5283 padding: var(--space-xs) var(--space-sm);
5284 border: 1px solid var(--color-border);
5285 border-radius: var(--radius-sm);
5286 background: var(--color-bg);
5287 color: var(--color-text);
5288 font-family: var(--font-mono);
5289 font-size: 0.85rem;
5290 margin-bottom: var(--space-sm);
5291 box-sizing: border-box;
5292}
5293
5294.sheet-dialog-actions {
5295 display: flex;
5296 justify-content: flex-end;
5297 gap: var(--space-sm);
5298 margin-top: var(--space-md);
5299}
5300
5301.sheet-dialog-actions button {
5302 padding: var(--space-xs) var(--space-md);
5303 border: 1px solid var(--color-border);
5304 border-radius: var(--radius-sm);
5305 cursor: pointer;
5306 font-size: 0.85rem;
5307 background: var(--color-surface);
5308 color: var(--color-text);
5309 transition: background var(--transition-fast);
5310}
5311
5312.sheet-dialog-actions button:hover {
5313 background: var(--color-hover);
5314}
5315
5316.sheet-dialog-actions button.btn-primary {
5317 background: var(--color-accent);
5318 color: var(--color-btn-primary-text);
5319 border-color: var(--color-accent);
5320}
5321
5322.sheet-dialog-actions button.btn-primary:hover {
5323 background: var(--color-accent-hover);
5324}
5325
5326/* ========================================================
5327 Paste Special Dialog
5328 ======================================================== */
5329
5330.paste-special-dialog {
5331 min-width: 280px;
5332 max-width: 360px;
5333}
5334
5335.paste-special-options {
5336 display: flex;
5337 flex-direction: column;
5338 gap: var(--space-xs);
5339 margin-bottom: var(--space-md);
5340}
5341
5342.paste-special-option {
5343 display: flex;
5344 align-items: center;
5345 gap: var(--space-sm);
5346 padding: var(--space-xs) var(--space-sm);
5347 border-radius: var(--radius-sm);
5348 cursor: pointer;
5349 font-size: 0.9rem;
5350 color: var(--color-text);
5351 transition: background var(--transition-fast);
5352 margin-bottom: 0;
5353}
5354
5355.paste-special-option:hover {
5356 background: var(--color-hover);
5357}
5358
5359.paste-special-option input[type="radio"] {
5360 width: auto;
5361 margin: 0;
5362 accent-color: var(--color-accent);
5363}
5364
5365.paste-special-option span {
5366 font-family: var(--font-body);
5367}
5368
5369/* Sort level rows */
5370.sort-level {
5371 display: flex;
5372 gap: var(--space-sm);
5373 align-items: center;
5374 margin-bottom: var(--space-sm);
5375}
5376
5377.sort-level select {
5378 flex: 1;
5379 margin-bottom: 0;
5380}
5381
5382.sort-level .sort-level-label {
5383 font-size: 0.8rem;
5384 color: var(--color-text-muted);
5385 min-width: 60px;
5386}
5387
5388/* ========================================================
5389 Column Filter UI
5390 ======================================================== */
5391
5392.sheet-grid thead th.filter-active::after {
5393 content: '\25BC';
5394 font-size: 0.55rem;
5395 color: var(--color-teal);
5396 margin-left: 2px;
5397 vertical-align: middle;
5398}
5399
5400.sheet-grid thead th .filter-arrow {
5401 display: inline-block;
5402 cursor: pointer;
5403 font-size: 0.6rem;
5404 margin-left: 2px;
5405 color: var(--color-text-faint);
5406 vertical-align: middle;
5407 transition: color var(--transition-fast);
5408}
5409
5410.sheet-grid thead th .filter-arrow:hover {
5411 color: var(--color-accent);
5412}
5413
5414.filter-dropdown {
5415 position: absolute;
5416 top: 100%;
5417 left: 0;
5418 min-width: 160px;
5419 max-height: 240px;
5420 overflow-y: auto;
5421 background: var(--color-bg);
5422 border: 1px solid var(--color-border);
5423 border-radius: var(--radius-md);
5424 box-shadow: var(--shadow-md);
5425 z-index: var(--z-sticky);
5426 padding: var(--space-xs) 0;
5427 font-size: 0.8rem;
5428}
5429
5430.filter-dropdown label {
5431 display: flex;
5432 align-items: center;
5433 gap: var(--space-xs);
5434 padding: var(--space-xs) var(--space-sm);
5435 cursor: pointer;
5436 transition: background var(--transition-fast);
5437}
5438
5439.filter-dropdown label:hover {
5440 background: var(--color-hover);
5441}
5442
5443.filter-dropdown .filter-actions {
5444 display: flex;
5445 justify-content: space-between;
5446 padding: var(--space-xs) var(--space-sm);
5447 border-top: 1px solid var(--color-border);
5448 margin-top: var(--space-xs);
5449}
5450
5451.filter-dropdown .filter-actions button {
5452 background: none;
5453 border: none;
5454 color: var(--color-accent);
5455 cursor: pointer;
5456 font-size: 0.75rem;
5457 padding: 2px 4px;
5458}
5459
5460.filter-dropdown .filter-actions button:hover {
5461 text-decoration: underline;
5462}
5463
5464/* Filter mode active state on toolbar button */
5465#tb-filter.active {
5466 background: var(--color-btn-active-bg);
5467 color: var(--color-accent);
5468}
5469
5470/* Hidden rows via filter */
5471.sheet-grid tr.filter-hidden {
5472 display: none;
5473}
5474
5475/* --- Striped Rows --- */
5476.sheet-grid tr .striped-row {
5477 background: #e6e4e199;
5478 background: oklch(0.92 0.005 75 / 0.6);
5479}
5480[data-theme="dark"] .sheet-grid tr .striped-row {
5481 background: #211f1d80;
5482 background: oklch(0.24 0.005 75 / 0.5);
5483}
5484@media (prefers-color-scheme: dark) {
5485 :root:not([data-theme="light"]) .sheet-grid tr .striped-row {
5486 background: #211f1d80;
5487 background: oklch(0.24 0.005 75 / 0.5);
5488 }
5489}
5490
5491/* --- Wrap Text --- */
5492.sheet-grid td .cell-display.cell-wrap {
5493 white-space: normal;
5494 word-wrap: break-word;
5495 overflow-wrap: break-word;
5496 overflow: visible;
5497}
5498
5499/* --- Validation Invalid --- */
5500.sheet-grid td.validation-invalid {
5501 outline: 2px solid var(--color-danger);
5502 outline-offset: -2px;
5503}
5504.sheet-grid td.validation-invalid::after {
5505 content: '';
5506 position: absolute;
5507 top: 0;
5508 right: 0;
5509 width: 0;
5510 height: 0;
5511 border-left: 6px solid transparent;
5512 border-top: 6px solid var(--color-danger);
5513}
5514
5515/* --- Validation Dropdown Arrow --- */
5516.sheet-grid td .cell-dropdown-arrow {
5517 position: absolute;
5518 right: 2px;
5519 top: 50%;
5520 transform: translateY(-50%);
5521 width: 14px;
5522 height: 14px;
5523 display: flex;
5524 align-items: center;
5525 justify-content: center;
5526 font-size: 0.6rem;
5527 color: var(--color-text-faint);
5528 cursor: pointer;
5529 border-radius: 2px;
5530 opacity: 0;
5531 transition: opacity var(--transition-fast);
5532}
5533.sheet-grid td:hover .cell-dropdown-arrow,
5534.sheet-grid td.selected .cell-dropdown-arrow {
5535 opacity: 1;
5536}
5537.sheet-grid td .cell-dropdown-arrow:hover {
5538 background: var(--color-hover);
5539 color: var(--color-text);
5540}
5541
5542/* --- Validation Dropdown Menu --- */
5543.validation-dropdown {
5544 position: fixed;
5545 z-index: var(--z-sticky);
5546 min-width: 8rem;
5547 max-height: 12rem;
5548 overflow-y: auto;
5549 background: var(--color-bg);
5550 border: 1px solid var(--color-border);
5551 border-radius: var(--radius-md);
5552 box-shadow: var(--shadow-lg);
5553 padding: var(--space-xs) 0;
5554}
5555.validation-dropdown-item {
5556 display: block;
5557 width: 100%;
5558 padding: var(--space-xs) var(--space-sm);
5559 text-align: left;
5560 font-family: var(--font-mono);
5561 font-size: 0.8rem;
5562 color: var(--color-text);
5563 background: none;
5564 border: none;
5565 cursor: pointer;
5566}
5567.validation-dropdown-item:hover {
5568 background: var(--color-hover);
5569}
5570
5571/* --- Conditional Formatting Modal --- */
5572.cf-modal {
5573 max-width: 32rem;
5574}
5575.cf-modal h2 {
5576 font-family: var(--font-display);
5577 font-size: 1.1rem;
5578 margin: 0 0 var(--space-md);
5579 display: flex;
5580 justify-content: space-between;
5581 align-items: center;
5582}
5583.cf-rule-list {
5584 list-style: none;
5585 padding: 0;
5586 margin: 0 0 var(--space-md);
5587}
5588.cf-rule-item {
5589 display: flex;
5590 align-items: center;
5591 gap: var(--space-sm);
5592 padding: var(--space-xs) var(--space-sm);
5593 border: 1px solid var(--color-border);
5594 border-radius: var(--radius-sm);
5595 margin-bottom: var(--space-xs);
5596 font-size: 0.8rem;
5597 font-family: var(--font-mono);
5598}
5599.cf-rule-item .cf-rule-preview {
5600 width: 1.5rem;
5601 height: 1.5rem;
5602 border-radius: 3px;
5603 flex-shrink: 0;
5604 border: 1px solid var(--color-border);
5605}
5606.cf-rule-item .cf-rule-text {
5607 flex: 1;
5608}
5609.cf-rule-item button {
5610 background: none;
5611 border: none;
5612 cursor: pointer;
5613 color: var(--color-text-faint);
5614 font-size: 0.75rem;
5615 padding: 0.15rem 0.3rem;
5616 border-radius: var(--radius-sm);
5617}
5618.cf-rule-item button:hover {
5619 color: var(--color-danger);
5620 background: var(--color-hover);
5621}
5622.cf-add-form {
5623 display: flex;
5624 flex-direction: column;
5625 gap: var(--space-sm);
5626}
5627.cf-add-form label {
5628 font-family: var(--font-body);
5629 font-size: 0.8rem;
5630 color: var(--color-text-muted);
5631}
5632.cf-add-form select,
5633.cf-add-form input {
5634 font-family: var(--font-mono);
5635 font-size: 0.8rem;
5636 padding: var(--space-xs) var(--space-sm);
5637 border: 1px solid var(--color-border);
5638 border-radius: var(--radius-sm);
5639 background: var(--color-bg);
5640 color: var(--color-text);
5641}
5642.cf-add-form .cf-color-row {
5643 display: flex;
5644 gap: var(--space-sm);
5645 align-items: center;
5646}
5647.cf-add-form .cf-color-row input[type="color"] {
5648 width: 2rem;
5649 height: 1.5rem;
5650 padding: 0;
5651 border: 1px solid var(--color-border);
5652 cursor: pointer;
5653}
5654.cf-add-form .cf-value-row {
5655 display: flex;
5656 gap: var(--space-sm);
5657}
5658.cf-add-form .cf-value-row input {
5659 flex: 1;
5660}
5661.cf-add-form .cf-btn-row {
5662 display: flex;
5663 gap: var(--space-sm);
5664 justify-content: flex-end;
5665}
5666.cf-add-form button {
5667 padding: var(--space-xs) var(--space-md);
5668 border-radius: var(--radius-sm);
5669 font-family: var(--font-body);
5670 font-size: 0.8rem;
5671 cursor: pointer;
5672 border: 1px solid var(--color-border);
5673 background: var(--color-surface);
5674 color: var(--color-text);
5675}
5676.cf-add-form button.cf-btn-primary {
5677 background: var(--color-accent);
5678 color: var(--color-btn-primary-text);
5679 border-color: var(--color-accent);
5680}
5681.cf-add-form button.cf-btn-primary:hover {
5682 background: var(--color-accent-hover);
5683}
5684
5685/* --- Data Validation Modal --- */
5686.dv-modal {
5687 max-width: 28rem;
5688}
5689.dv-modal h2 {
5690 font-family: var(--font-display);
5691 font-size: 1.1rem;
5692 margin: 0 0 var(--space-md);
5693 display: flex;
5694 justify-content: space-between;
5695 align-items: center;
5696}
5697.dv-form {
5698 display: flex;
5699 flex-direction: column;
5700 gap: var(--space-sm);
5701}
5702.dv-form label {
5703 font-family: var(--font-body);
5704 font-size: 0.8rem;
5705 color: var(--color-text-muted);
5706}
5707.dv-form select,
5708.dv-form input {
5709 font-family: var(--font-mono);
5710 font-size: 0.8rem;
5711 padding: var(--space-xs) var(--space-sm);
5712 border: 1px solid var(--color-border);
5713 border-radius: var(--radius-sm);
5714 background: var(--color-bg);
5715 color: var(--color-text);
5716}
5717.dv-form .dv-btn-row {
5718 display: flex;
5719 gap: var(--space-sm);
5720 justify-content: flex-end;
5721 margin-top: var(--space-sm);
5722}
5723.dv-form button {
5724 padding: var(--space-xs) var(--space-md);
5725 border-radius: var(--radius-sm);
5726 font-family: var(--font-body);
5727 font-size: 0.8rem;
5728 cursor: pointer;
5729 border: 1px solid var(--color-border);
5730 background: var(--color-surface);
5731 color: var(--color-text);
5732}
5733.dv-form button.dv-btn-primary {
5734 background: var(--color-accent);
5735 color: var(--color-btn-primary-text);
5736 border-color: var(--color-accent);
5737}
5738.dv-form button.dv-btn-primary:hover {
5739 background: var(--color-accent-hover);
5740}
5741.dv-form button.dv-btn-danger {
5742 color: var(--color-danger);
5743}
5744.dv-form button.dv-btn-danger:hover {
5745 background: #bd413f14;
5746 background: oklch(0.55 0.16 25 / 0.08);
5747}
5748/* ========================================================
5749 Version History Sidebar
5750 ======================================================== */
5751
5752.editor-with-sidebar {
5753 display: flex;
5754 flex: 1;
5755 min-height: 0;
5756 overflow: hidden;
5757}
5758
5759.editor-with-sidebar .editor-container {
5760 flex: 1;
5761 min-width: 0;
5762}
5763
5764.version-sidebar {
5765 position: relative;
5766 width: 300px;
5767 border-left: 1px solid var(--color-border);
5768 background: var(--color-surface);
5769 display: flex;
5770 flex-direction: column;
5771 overflow: hidden;
5772 flex-shrink: 0;
5773}
5774
5775.version-sidebar-header {
5776 display: flex;
5777 align-items: center;
5778 justify-content: space-between;
5779 padding: var(--space-sm) var(--space-md);
5780 border-bottom: 1px solid var(--color-border);
5781}
5782
5783.version-sidebar-header h3 {
5784 margin: 0;
5785 font-size: 0.875rem;
5786 font-weight: 600;
5787 font-family: var(--font-body);
5788 color: var(--color-text);
5789}
5790
5791.version-sidebar-close {
5792 font-size: 1.25rem;
5793 color: var(--color-text-muted);
5794}
5795
5796.version-list {
5797 flex: 1;
5798 overflow-y: auto;
5799 padding: var(--space-xs) 0;
5800}
5801
5802.version-empty {
5803 padding: var(--space-lg);
5804 text-align: center;
5805 color: var(--color-text-faint);
5806 font-size: 0.8125rem;
5807}
5808
5809.version-item {
5810 display: flex;
5811 flex-direction: column;
5812 gap: 2px;
5813 width: 100%;
5814 padding: var(--space-sm) var(--space-md);
5815 border: none;
5816 background: none;
5817 text-align: left;
5818 cursor: pointer;
5819 border-bottom: 1px solid var(--color-border);
5820 transition: background var(--transition-fast);
5821 font-family: var(--font-body);
5822}
5823
5824.version-item:hover {
5825 background: var(--color-hover);
5826}
5827
5828.version-time {
5829 font-size: 0.75rem;
5830 color: var(--color-text);
5831 font-weight: 500;
5832}
5833
5834.version-meta {
5835 display: flex;
5836 gap: var(--space-sm);
5837 font-size: 0.6875rem;
5838 color: var(--color-text-muted);
5839}
5840
5841.version-author {
5842 color: var(--color-text-faint);
5843}
5844
5845.version-wc {
5846 color: var(--color-text-faint);
5847}
5848
5849.version-delta {
5850 font-weight: 600;
5851}
5852
5853.version-delta.positive {
5854 color: var(--color-success);
5855}
5856
5857.version-delta.negative {
5858 color: var(--color-danger);
5859}
5860
5861.version-preview {
5862 display: flex;
5863 flex-direction: column;
5864 position: absolute;
5865 inset: 0;
5866 background: var(--color-surface);
5867 z-index: 2;
5868}
5869
5870.version-preview-header {
5871 display: flex;
5872 align-items: center;
5873 justify-content: space-between;
5874 padding: var(--space-sm) var(--space-md);
5875 border-bottom: 1px solid var(--color-border);
5876 gap: var(--space-sm);
5877}
5878
5879.version-preview-content {
5880 flex: 1;
5881 overflow-y: auto;
5882 padding: var(--space-md);
5883}
5884
5885.version-preview-text {
5886 font-family: var(--font-body);
5887 font-size: 0.875rem;
5888 line-height: 1.6;
5889 color: var(--color-text);
5890 white-space: pre-wrap;
5891}
5892
5893.btn-primary.btn-sm {
5894 padding: var(--space-xs) var(--space-sm);
5895 font-size: 0.75rem;
5896 background: var(--color-accent);
5897 color: var(--color-btn-primary-text);
5898 border: none;
5899 border-radius: var(--radius-sm);
5900 cursor: pointer;
5901 white-space: nowrap;
5902}
5903
5904.btn-primary.btn-sm:hover {
5905 background: var(--color-accent-hover);
5906}
5907
5908/* ========================================================
5909 Suggesting Mode
5910 ======================================================== */
5911
5912.suggesting-toggle {
5913 display: flex;
5914 align-items: center;
5915}
5916
5917.suggesting-toggle-btn {
5918 display: flex;
5919 align-items: center;
5920 gap: 4px;
5921 padding: 3px 8px;
5922 border: 1px solid var(--color-border);
5923 border-radius: var(--radius-sm);
5924 background: none;
5925 cursor: pointer;
5926 font-family: var(--font-body);
5927 font-size: 0.75rem;
5928 color: var(--color-text-muted);
5929 transition: all var(--transition-fast);
5930}
5931
5932.suggesting-toggle-btn:hover {
5933 background: var(--color-hover);
5934}
5935
5936.suggesting-toggle-btn.active {
5937 background: #b7e6b7;
5938 background: oklch(0.88 0.08 145);
5939 border-color: #1c985a;
5940 border-color: oklch(0.6 0.14 155);
5941 color: #00391b;
5942 color: oklch(0.3 0.08 155);
5943}
5944
5945[data-theme="dark"] .suggesting-toggle-btn.active {
5946 background: #102719;
5947 background: oklch(0.25 0.04 155);
5948 border-color: #2a7449;
5949 border-color: oklch(0.5 0.1 155);
5950 color: #a0caad;
5951 color: oklch(0.8 0.06 155);
5952}
5953
5954.suggesting-toggle-icon {
5955 font-size: 0.875rem;
5956}
5957
5958/* Suggestion marks in the editor */
5959.suggestion-insert {
5960 text-decoration: underline;
5961 text-decoration-color: #1c985a;
5962 text-decoration-color: oklch(0.6 0.14 155);
5963 text-decoration-thickness: 2px;
5964 text-underline-offset: 2px;
5965 background: #1c985a14;
5966 background: oklch(0.6 0.14 155 / 0.08);
5967 border-radius: 1px;
5968 cursor: pointer;
5969 position: relative;
5970}
5971
5972.suggestion-delete {
5973 text-decoration: line-through;
5974 text-decoration-color: #bd413f;
5975 text-decoration-color: oklch(0.55 0.16 25);
5976 text-decoration-thickness: 2px;
5977 background: #bd413f14;
5978 background: oklch(0.55 0.16 25 / 0.08);
5979 color: var(--color-text-muted);
5980 border-radius: 1px;
5981 cursor: pointer;
5982 position: relative;
5983}
5984
5985[data-theme="dark"] .suggestion-insert {
5986 text-decoration-color: #33a868;
5987 text-decoration-color: oklch(0.65 0.14 155);
5988 background: #33a8681f;
5989 background: oklch(0.65 0.14 155 / 0.12);
5990}
5991
5992[data-theme="dark"] .suggestion-delete {
5993 text-decoration-color: #ce514d;
5994 text-decoration-color: oklch(0.60 0.16 25);
5995 background: #ce514d1f;
5996 background: oklch(0.60 0.16 25 / 0.12);
5997}
5998
5999/* Suggestion popover (similar to comment popover) */
6000.suggestion-popover {
6001 position: fixed;
6002 z-index: var(--z-tooltip);
6003 background: var(--color-surface);
6004 border: 1px solid var(--color-border);
6005 border-radius: var(--radius-md);
6006 box-shadow: var(--shadow-md);
6007 padding: var(--space-sm);
6008 min-width: 180px;
6009 max-width: 260px;
6010 font-family: var(--font-body);
6011}
6012
6013.suggestion-popover-header {
6014 display: flex;
6015 flex-wrap: wrap;
6016 gap: var(--space-xs);
6017 margin-bottom: var(--space-xs);
6018 font-size: 0.75rem;
6019}
6020
6021.suggestion-popover-author {
6022 font-weight: 600;
6023 color: var(--color-text);
6024}
6025
6026.suggestion-popover-time {
6027 color: var(--color-text-faint);
6028}
6029
6030.suggestion-popover-type {
6031 padding: 1px 6px;
6032 border-radius: var(--radius-sm);
6033 font-size: 0.6875rem;
6034 font-weight: 500;
6035}
6036
6037.suggestion-popover-actions {
6038 display: flex;
6039 gap: var(--space-xs);
6040}
6041
6042.suggestion-accept-btn {
6043 color: var(--color-success) !important;
6044 font-size: 0.75rem;
6045}
6046
6047.suggestion-reject-btn {
6048 color: var(--color-danger) !important;
6049 font-size: 0.75rem;
6050}
6051
6052.suggestion-popover-bulk {
6053 display: flex;
6054 gap: var(--space-xs);
6055 border-top: 1px solid var(--color-border);
6056 margin-top: var(--space-xs);
6057 padding-top: var(--space-xs);
6058}
6059
6060.suggestion-accept-all-btn,
6061.suggestion-reject-all-btn {
6062 font-size: 0.6875rem;
6063 color: var(--color-text-muted) !important;
6064}
6065
6066.suggestion-accept-all-btn:hover { color: var(--color-success) !important; }
6067.suggestion-reject-all-btn:hover { color: var(--color-danger) !important; }
6068
6069/* ========================================================
6070 Offline Indicator
6071 ======================================================== */
6072
6073.status-dot.offline {
6074 background: var(--color-warning);
6075}
6076
6077.status-indicator .offline-badge {
6078 background: #cd9c1f26;
6079 background: oklch(0.72 0.14 85 / 0.15);
6080 color: #8d6000;
6081 color: oklch(0.52 0.14 85);
6082 padding: 1px 6px;
6083 border-radius: var(--radius-sm);
6084 font-size: 0.6875rem;
6085 font-weight: 500;
6086}
6087
6088/* ========================================================
6089 Accessibility — Skip Link
6090 ======================================================== */
6091
6092.skip-link {
6093 position: absolute;
6094 top: -100%;
6095 left: 0;
6096 background: var(--color-accent);
6097 color: var(--color-btn-primary-text);
6098 padding: var(--space-sm) var(--space-md);
6099 z-index: var(--z-skip);
6100 font-size: 0.9rem;
6101 font-weight: 600;
6102 text-decoration: none;
6103 border-radius: 0 0 var(--radius-sm) 0;
6104 transition: top var(--transition-fast);
6105}
6106
6107.skip-link:focus {
6108 top: 0;
6109}
6110
6111/* ========================================================
6112 Accessibility — Focus Visible Outlines
6113 Only show on keyboard navigation, not mouse clicks.
6114 ======================================================== */
6115
6116/* Suppress focus outlines for mouse/touch — preserve :focus-visible for keyboard */
6117*:focus:not(:focus-visible) {
6118 outline: none;
6119}
6120
6121/* Global keyboard focus ring — visible on Tab navigation */
6122*:focus-visible {
6123 outline: 2px solid var(--color-focus);
6124 outline-offset: 2px;
6125 border-radius: var(--radius-sm);
6126}
6127
6128/* Tighter offset for buttons and toolbar controls */
6129button:focus-visible,
6130.tb-btn:focus-visible,
6131.toolbar-dropdown-toggle:focus-visible,
6132.toolbar-overflow-toggle:focus-visible {
6133 outline-offset: 1px;
6134}
6135
6136/* Flush offset for form elements */
6137input:focus-visible,
6138select:focus-visible,
6139textarea:focus-visible {
6140 outline-offset: 0;
6141}
6142
6143/* Opt-out: elements with existing strong focus indicators or that manage their own focus */
6144.tiptap:focus-visible,
6145.cell-editor:focus-visible,
6146.sheet-tab-rename:focus-visible,
6147.inline-text-edit textarea:focus-visible,
6148.cmd-palette-input:focus-visible,
6149.context-menu:focus-visible {
6150 outline: none;
6151}
6152
6153/* Opt-out: inputs with box-shadow focus rings already */
6154.formula-input:focus-visible,
6155.modal input:focus-visible,
6156.modal input[type="password"]:focus-visible,
6157.find-bar-input:focus-visible,
6158.print-preview-sidebar select:focus-visible {
6159 outline: none;
6160}
6161
6162/* Non-focus outlines (cell selection, validation) */
6163.sheet-grid td.selected { outline: 2px solid var(--color-teal); outline-offset: -1px; }
6164.sheet-grid td.validation-invalid { outline: 2px solid var(--color-danger); outline-offset: -2px; }
6165
6166/* ========================================================
6167 View-Only Badge
6168 ======================================================== */
6169
6170.view-only-badge {
6171 background: var(--color-warning);
6172 color: var(--color-text);
6173 font-size: 0.75rem;
6174 font-weight: 600;
6175 text-align: center;
6176 padding: var(--space-xs) var(--space-md);
6177 letter-spacing: 0.05em;
6178 text-transform: uppercase;
6179 font-family: var(--font-mono);
6180}
6181
6182/* ========================================================
6183 Share Dialog
6184 ======================================================== */
6185
6186.share-dialog-backdrop {
6187 position: fixed;
6188 inset: 0;
6189 background: var(--color-modal-backdrop);
6190 display: flex;
6191 align-items: center;
6192 justify-content: center;
6193 z-index: var(--z-modal);
6194}
6195
6196.share-dialog {
6197 max-width: 480px;
6198 width: 90%;
6199}
6200
6201.share-dialog-header {
6202 display: flex;
6203 align-items: center;
6204 justify-content: space-between;
6205 margin-bottom: var(--space-md);
6206}
6207
6208.share-dialog-header h2 {
6209 font-family: var(--font-display);
6210 font-size: 1.2rem;
6211 margin: 0;
6212}
6213
6214.share-dialog-close {
6215 font-size: 1.2rem;
6216}
6217
6218.share-dialog-body {
6219 display: flex;
6220 flex-direction: column;
6221 gap: var(--space-md);
6222}
6223
6224.share-link-row {
6225 display: flex;
6226 gap: var(--space-sm);
6227}
6228
6229.share-link-input {
6230 flex: 1;
6231 padding: var(--space-sm) var(--space-md);
6232 border: 1px solid var(--color-border);
6233 border-radius: var(--radius-sm);
6234 background: var(--color-bg);
6235 color: var(--color-text);
6236 font: inherit;
6237 font-size: 0.85rem;
6238 font-family: var(--font-mono);
6239 overflow: hidden;
6240 text-overflow: ellipsis;
6241}
6242
6243/* ========================================================
6244 Document Outline Sidebar
6245 ======================================================== */
6246
6247.outline-sidebar {
6248 position: relative;
6249 width: 240px;
6250 border-right: 1px solid var(--color-border);
6251 background: var(--color-surface);
6252 display: flex;
6253 flex-direction: column;
6254 overflow: hidden;
6255 flex-shrink: 0;
6256 transition: width var(--transition-med), opacity var(--transition-med);
6257}
6258
6259.outline-sidebar-header {
6260 display: flex;
6261 align-items: center;
6262 justify-content: space-between;
6263 padding: var(--space-sm) var(--space-md);
6264 border-bottom: 1px solid var(--color-border);
6265}
6266
6267.outline-sidebar-header h3 {
6268 margin: 0;
6269 font-size: 0.875rem;
6270 font-weight: 600;
6271 font-family: var(--font-body);
6272 color: var(--color-text);
6273}
6274
6275.outline-sidebar-close {
6276 font-size: 1.25rem;
6277 color: var(--color-text-muted);
6278}
6279
6280.outline-list {
6281 flex: 1;
6282 overflow-y: auto;
6283 padding: var(--space-xs) 0;
6284}
6285
6286.outline-empty {
6287 padding: var(--space-lg);
6288 text-align: center;
6289 color: var(--color-text-faint);
6290 font-size: 0.8125rem;
6291}
6292
6293.outline-item {
6294 display: block;
6295 width: 100%;
6296 padding: var(--space-xs) var(--space-md);
6297 border: none;
6298 background: none;
6299 text-align: left;
6300 cursor: pointer;
6301 font-family: var(--font-body);
6302 font-size: 0.8125rem;
6303 color: var(--color-text-muted);
6304 transition: background var(--transition-fast), color var(--transition-fast);
6305 white-space: nowrap;
6306 overflow: hidden;
6307 text-overflow: ellipsis;
6308}
6309
6310.share-mode-row,
6311.share-expiry-row {
6312 display: flex;
6313 align-items: center;
6314 gap: var(--space-sm);
6315}
6316
6317.share-mode-label,
6318.share-expiry-label {
6319 font-size: 0.85rem;
6320 color: var(--color-text-muted);
6321 display: flex;
6322 align-items: center;
6323 gap: var(--space-sm);
6324}
6325
6326.share-mode-label select,
6327.share-expiry-label select {
6328 padding: var(--space-xs) var(--space-sm);
6329 border: 1px solid var(--color-border);
6330 border-radius: var(--radius-sm);
6331 background: var(--color-surface);
6332 color: var(--color-text);
6333 font: inherit;
6334 font-size: 0.85rem;
6335 cursor: pointer;
6336}
6337
6338/* ========================================================
6339 Mobile More Button (hidden on desktop)
6340 ======================================================== */
6341
6342.toolbar-mobile-more {
6343 display: none;
6344}
6345
6346/* ========================================================
6347 Mobile Responsive — Tablet (max-width: 768px)
6348 ======================================================== */
6349
6350@media (max-width: 768px) {
6351 /* Hide non-essential toolbar items on mobile */
6352 .toolbar-mobile-hide {
6353 display: none !important;
6354 }
6355
6356 /* Show mobile more button */
6357 .toolbar-mobile-more,
6358 .mobile-more-btn {
6359 display: inline-flex;
6360 }
6361
6362 /* Larger touch targets for toolbar buttons (44x44px minimum) */
6363 .tb-btn {
6364 width: 44px;
6365 height: 44px;
6366 min-width: 44px;
6367 min-height: 44px;
6368 }
6369
6370 .toolbar-dropdown-toggle,
6371 .toolbar-overflow-toggle {
6372 min-width: 44px;
6373 min-height: 44px;
6374 }
6375
6376 /* Larger touch targets for icon buttons in topbar/inline controls */
6377 .btn-icon {
6378 min-width: 44px;
6379 min-height: 44px;
6380 padding: 0.5rem;
6381 }
6382
6383 /* Topbar wraps on narrow screens so buttons don't overflow horizontally */
6384 .app-topbar {
6385 flex-wrap: wrap;
6386 row-gap: var(--space-xs);
6387 }
6388
6389 /* Toolbar allow wrapping with wider gap for touch */
6390 .toolbar.gdocs-toolbar {
6391 height: auto;
6392 flex-wrap: wrap;
6393 padding: var(--space-xs);
6394 gap: 4px;
6395 }
6396
6397 /* Editor full-width on mobile */
6398 .editor-wrapper {
6399 max-width: 100%;
6400 padding: 0 var(--space-sm);
6401 }
6402
6403 .editor-container {
6404 padding: var(--space-md) var(--space-sm);
6405 }
6406
6407 /* Responsive formula bar */
6408 .formula-bar {
6409 flex-wrap: wrap;
6410 gap: var(--space-xs);
6411 font-size: 0.9rem;
6412 }
6413
6414 .formula-input,
6415 .formula-input-wrap {
6416 min-width: 0;
6417 width: 100%;
6418 flex: 1 1 100%;
6419 font-size: 0.9rem;
6420 overflow-x: auto;
6421 }
6422
6423 /* Sheet container: horizontal scroll with sticky column A */
6424 .sheet-container {
6425 overflow-x: auto;
6426 -webkit-overflow-scrolling: touch;
6427 }
6428
6429 .sheet-grid th:first-child,
6430 .sheet-grid td:first-child {
6431 position: sticky;
6432 left: 0;
6433 z-index: 2;
6434 background: var(--color-surface);
6435 }
6436
6437 /* Larger fonts for readability */
6438 .doc-title-input {
6439 font-size: 1rem;
6440 }
6441
6442 /* Top bar compact layout */
6443 .app-topbar {
6444 padding: var(--space-xs) var(--space-sm);
6445 gap: var(--space-sm);
6446 flex-wrap: wrap;
6447 }
6448 /* Preserve electron traffic-light padding even on narrow windows */
6449 .is-electron .app-topbar {
6450 padding-left: 96px;
6451 }
6452
6453 .status-indicator {
6454 font-size: 0.6rem;
6455 }
6456
6457 /* Landing page adjustments */
6458 .landing {
6459 padding: var(--space-lg) var(--space-md);
6460 }
6461
6462 .landing-actions {
6463 flex-direction: column;
6464 align-items: stretch;
6465 }
6466
6467 .doc-toolbar {
6468 flex-direction: column;
6469 align-items: stretch;
6470 }
6471
6472 .doc-toolbar-actions {
6473 flex-wrap: wrap;
6474 }
6475
6476 .search-input {
6477 width: 100%;
6478 }
6479 .search-input:focus {
6480 width: 100%;
6481 }
6482
6483 .version-badge {
6484 font-size: 0.55rem;
6485 bottom: 0.25rem;
6486 right: 0.5rem;
6487 }
6488
6489 /* Sidebars overlay on tablet/mobile */
6490 .outline-sidebar {
6491 position: absolute;
6492 left: 0;
6493 top: 0;
6494 bottom: 0;
6495 z-index: 20;
6496 width: 260px;
6497 box-shadow: var(--shadow-lg);
6498 }
6499
6500 .version-sidebar {
6501 position: absolute;
6502 right: 0;
6503 top: 0;
6504 bottom: 0;
6505 z-index: 20;
6506 width: 300px;
6507 max-width: 85vw;
6508 box-shadow: var(--shadow-lg);
6509 }
6510
6511 /* Link preview tooltip constrained to viewport */
6512 .link-preview-tooltip {
6513 max-width: calc(100vw - 2rem);
6514 left: 1rem !important;
6515 right: 1rem;
6516 }
6517}
6518
6519/* ========================================================
6520 Mobile Responsive — Phone (max-width: 480px)
6521 ======================================================== */
6522
6523@media (max-width: 480px) {
6524 /* Full-screen modals */
6525 .modal {
6526 max-width: 100%;
6527 width: 100%;
6528 height: 100%;
6529 border-radius: 0;
6530 display: flex;
6531 flex-direction: column;
6532 }
6533
6534 .modal-backdrop {
6535 align-items: stretch;
6536 }
6537
6538 .share-dialog {
6539 max-width: 100%;
6540 width: 100%;
6541 border-radius: 0;
6542 }
6543
6544 /* Even larger touch targets */
6545 .tb-btn {
6546 width: 48px;
6547 height: 48px;
6548 }
6549
6550 /* Compact topbar */
6551 .app-topbar {
6552 padding: var(--space-xs);
6553 gap: var(--space-xs);
6554 }
6555 .is-electron .app-topbar {
6556 padding-left: 96px;
6557 }
6558
6559 .doc-title-input {
6560 min-width: 8rem;
6561 font-size: 0.95rem;
6562 }
6563
6564 /* Slightly larger body font */
6565 body {
6566 font-size: 1rem;
6567 }
6568
6569 .version-badge {
6570 display: none;
6571 }
6572
6573 /* Sidebars full-width on phones */
6574 .outline-sidebar,
6575 .version-sidebar {
6576 width: 100%;
6577 max-width: 100%;
6578 }
6579
6580 /* Find/replace bar stacks vertically */
6581 .search-replace-bar {
6582 flex-direction: column;
6583 gap: var(--space-xs);
6584 }
6585
6586 .search-replace-bar input {
6587 width: 100%;
6588 }
6589
6590 /* Compact save status */
6591 .save-status {
6592 font-size: 0.65rem;
6593 }
6594
6595 /* Toolbar dropdowns: full-width overlay */
6596 .toolbar-dropdown-content {
6597 position: fixed;
6598 left: 0;
6599 right: 0;
6600 top: auto;
6601 width: 100%;
6602 max-height: 60vh;
6603 overflow-y: auto;
6604 border-radius: 0;
6605 }
6606
6607 /* Command palette: slightly taller on phones for easier reach */
6608 .cmd-palette {
6609 max-height: 70vh;
6610 }
6611}
6612
6613.outline-item:hover {
6614 background: var(--color-hover);
6615 color: var(--color-text);
6616}
6617
6618.outline-item[data-level="1"] {
6619 padding-left: var(--space-md);
6620 font-weight: 600;
6621 color: var(--color-text);
6622}
6623
6624.outline-item[data-level="2"] {
6625 padding-left: calc(var(--space-md) + var(--space-md));
6626 font-weight: 500;
6627}
6628
6629.outline-item[data-level="3"] {
6630 padding-left: calc(var(--space-md) + var(--space-md) + var(--space-md));
6631 font-weight: 400;
6632 font-size: 0.75rem;
6633}
6634
6635/* ========================================================
6636 Table Toolbar (Floating)
6637 ======================================================== */
6638
6639.table-toolbar {
6640 position: fixed;
6641 z-index: var(--z-overlay);
6642 display: flex;
6643 align-items: center;
6644 gap: 2px;
6645 padding: 4px 6px;
6646 background: var(--color-surface);
6647 border: 1px solid var(--color-border);
6648 border-radius: var(--radius-md);
6649 box-shadow: var(--shadow-md);
6650 font-family: var(--font-body);
6651}
6652
6653.table-tb-btn {
6654 display: inline-flex;
6655 align-items: center;
6656 justify-content: center;
6657 width: 28px;
6658 height: 28px;
6659 border: none;
6660 border-radius: var(--radius-sm);
6661 background: none;
6662 color: var(--color-text-muted);
6663 cursor: pointer;
6664 transition: all var(--transition-fast);
6665}
6666
6667.table-tb-btn:hover {
6668 background: var(--color-hover);
6669 color: var(--color-text);
6670}
6671
6672.table-tb-btn .tb-icon {
6673 width: 14px;
6674 height: 14px;
6675}
6676
6677.table-tb-sep {
6678 width: 1px;
6679 height: 20px;
6680 background: var(--color-border);
6681 margin: 0 2px;
6682}
6683
6684.table-tb-color-wrap {
6685 position: relative;
6686 display: inline-flex;
6687 align-items: center;
6688 gap: 2px;
6689}
6690
6691.table-tb-color {
6692 width: 24px;
6693 height: 24px;
6694 border: 1px solid var(--color-border);
6695 border-radius: var(--radius-sm);
6696 cursor: pointer;
6697 padding: 0;
6698 background: none;
6699}
6700
6701.table-tb-color-label {
6702 font-size: 0.625rem;
6703 color: var(--color-text-faint);
6704 font-weight: 600;
6705 pointer-events: none;
6706}
6707
6708/* ========================================================
6709 Link Preview Tooltip
6710 ======================================================== */
6711
6712.link-preview-tooltip {
6713 position: fixed;
6714 z-index: var(--z-tooltip);
6715 background: var(--color-surface);
6716 border: 1px solid var(--color-border);
6717 border-radius: var(--radius-md);
6718 box-shadow: var(--shadow-md);
6719 padding: var(--space-sm);
6720 min-width: 200px;
6721 max-width: 320px;
6722 font-family: var(--font-body);
6723}
6724
6725.link-preview-url {
6726 font-size: 0.75rem;
6727 color: var(--color-teal);
6728 margin-bottom: var(--space-xs);
6729 word-break: break-all;
6730 line-height: 1.3;
6731}
6732
6733.link-preview-actions {
6734 display: flex;
6735 gap: var(--space-xs);
6736}
6737
6738.link-preview-btn {
6739 font-size: 0.75rem;
6740 padding: 2px 8px;
6741}
6742
6743/* ========================================================
6744 Focus/Zen Mode
6745 ======================================================== */
6746
6747.zen-mode .app-topbar {
6748 opacity: 0;
6749 height: 0;
6750 padding: 0;
6751 overflow: hidden;
6752 transition: all var(--transition-med);
6753}
6754
6755.zen-mode .toolbar {
6756 opacity: 0;
6757 height: 0;
6758 padding: 0;
6759 overflow: hidden;
6760 transition: all var(--transition-med);
6761}
6762
6763.zen-mode .docs-footer {
6764 opacity: 0;
6765 height: 0;
6766 padding: 0;
6767 overflow: hidden;
6768 transition: all var(--transition-med);
6769}
6770
6771.zen-mode .editor-wrapper {
6772 max-width: none;
6773 transition: max-width var(--transition-med);
6774}
6775
6776.zen-mode .editor-container {
6777 padding: var(--space-xl) var(--space-2xl);
6778}
6779
6780.zen-mode .outline-sidebar {
6781 display: none !important;
6782}
6783
6784.zen-mode .version-sidebar {
6785 display: none !important;
6786}
6787
6788.zen-exit-btn {
6789 position: fixed;
6790 top: var(--space-md);
6791 right: var(--space-md);
6792 z-index: var(--z-drop);
6793 padding: 6px 14px;
6794 border: 1px solid var(--color-border);
6795 border-radius: var(--radius-md);
6796 background: var(--color-surface);
6797 color: var(--color-text-muted);
6798 font-family: var(--font-body);
6799 font-size: 0.75rem;
6800 cursor: pointer;
6801 opacity: 0.5;
6802 transition: opacity var(--transition-fast);
6803 box-shadow: var(--shadow-sm);
6804}
6805
6806.zen-exit-btn:hover {
6807 opacity: 1;
6808 color: var(--color-text);
6809 background: var(--color-hover);
6810}
6811
6812/* Smooth transitions for entering/exiting zen */
6813.app-topbar,
6814.toolbar,
6815.docs-footer,
6816.editor-wrapper {
6817 transition: all var(--transition-med);
6818}
6819
6820/* ========================================================
6821 Status Bar (selection aggregate stats)
6822 ======================================================== */
6823
6824.status-bar {
6825 display: flex;
6826 align-items: center;
6827 justify-content: space-between;
6828 padding: 2px var(--space-sm);
6829 border-top: 1px solid var(--color-border);
6830 background: var(--color-surface);
6831 flex-shrink: 0;
6832 min-height: 24px;
6833 transition: background-color var(--transition-med), border-color var(--transition-med);
6834}
6835
6836.status-bar-info {
6837 display: flex;
6838 align-items: center;
6839 gap: var(--space-sm);
6840 font-family: var(--font-mono);
6841 font-size: 0.65rem;
6842 color: var(--color-text-faint);
6843}
6844
6845.status-bar-cell-ref {
6846 padding: 1px 4px;
6847 border-radius: 2px;
6848 background: var(--color-surface-alt);
6849 color: var(--color-text-muted);
6850 font-weight: 500;
6851}
6852
6853.status-bar-dim {
6854 color: var(--color-text-faint);
6855}
6856
6857.status-bar-freeze {
6858 padding: 1px 6px;
6859 border-radius: 2px;
6860 background: #53c2c126;
6861 background: oklch(0.75 0.1 195 / 0.15);
6862 color: #00686a;
6863 color: oklch(0.45 0.12 195);
6864 font-weight: 500;
6865 font-family: var(--font-body);
6866 font-size: 0.65rem;
6867 cursor: pointer;
6868 transition: background var(--transition-fast);
6869}
6870.status-bar-freeze:hover {
6871 background: #53c2c140;
6872 background: oklch(0.75 0.1 195 / 0.25);
6873}
6874
6875[data-theme="dark"] .status-bar-freeze {
6876 background: #0047474d;
6877 background: oklch(0.35 0.08 195 / 0.3);
6878 color: #41b2b2;
6879 color: oklch(0.7 0.1 195);
6880}
6881[data-theme="dark"] .status-bar-freeze:hover {
6882 background: #00474773;
6883 background: oklch(0.35 0.08 195 / 0.45);
6884}
6885@media (prefers-color-scheme: dark) {
6886 :root:not([data-theme="light"]) .status-bar-freeze {
6887 background: #0047474d;
6888 background: oklch(0.35 0.08 195 / 0.3);
6889 color: #41b2b2;
6890 color: oklch(0.7 0.1 195);
6891 }
6892 :root:not([data-theme="light"]) .status-bar-freeze:hover {
6893 background: #00474773;
6894 background: oklch(0.35 0.08 195 / 0.45);
6895 }
6896}
6897
6898.status-bar-range {
6899 padding: 1px 4px;
6900 border-radius: 2px;
6901 background: var(--color-surface-alt);
6902 color: var(--color-text-muted);
6903 font-weight: 500;
6904}
6905
6906.status-bar-mode {
6907 color: var(--color-text-faint);
6908}
6909
6910.status-bar-cells {
6911 color: var(--color-text-faint);
6912}
6913
6914.status-bar-stats {
6915 display: flex;
6916 align-items: center;
6917 gap: var(--space-md);
6918 font-family: var(--font-body);
6919 font-size: 0.7rem;
6920 color: var(--color-text-muted);
6921 user-select: text;
6922}
6923
6924.status-bar-stat {
6925 display: inline-flex;
6926 align-items: center;
6927 gap: 3px;
6928 white-space: nowrap;
6929 cursor: pointer;
6930 padding: 1px 4px;
6931 border-radius: 2px;
6932 transition: background var(--transition-fast);
6933}
6934
6935.status-bar-stat:hover {
6936 background: var(--color-hover);
6937}
6938
6939.status-bar-stat-label {
6940 font-weight: 500;
6941 color: var(--color-text-faint);
6942 text-transform: uppercase;
6943 font-size: 0.6rem;
6944 letter-spacing: 0.04em;
6945}
6946
6947.status-bar-stat-value {
6948 font-family: var(--font-mono);
6949 font-size: 0.7rem;
6950 color: var(--color-text);
6951}
6952
6953/* Copy feedback on stat click */
6954.status-bar-stat.copied {
6955 background: #1c985a26;
6956 background: oklch(0.6 0.14 155 / 0.15);
6957}
6958
6959.status-bar-stat.copied .status-bar-stat-value {
6960 color: var(--color-success);
6961}
6962
6963[data-theme="dark"] .status-bar {
6964 background: var(--color-surface);
6965 border-top-color: var(--color-border);
6966}
6967
6968/* ========================================================
6969 Formula Auto-Complete
6970 ======================================================== */
6971
6972.formula-autocomplete {
6973 position: absolute;
6974 z-index: var(--z-modal);
6975 min-width: 240px;
6976 max-width: 380px;
6977 max-height: 260px;
6978 overflow-y: auto;
6979 background: var(--color-bg);
6980 border: 1px solid var(--color-border-strong);
6981 border-radius: var(--radius-md);
6982 box-shadow: var(--shadow-md);
6983 padding: 2px 0;
6984 font-family: var(--font-body);
6985}
6986
6987.formula-autocomplete-item {
6988 display: flex;
6989 flex-direction: column;
6990 padding: 4px 10px;
6991 cursor: pointer;
6992 transition: background-color var(--transition-fast);
6993}
6994
6995.formula-autocomplete-item:hover,
6996.formula-autocomplete-item.selected {
6997 background: var(--color-hover);
6998}
6999
7000.formula-autocomplete-item.selected {
7001 background: var(--color-teal-light);
7002}
7003
7004.formula-autocomplete-name {
7005 font-weight: 600;
7006 font-size: 0.8rem;
7007 color: var(--color-text);
7008}
7009
7010.formula-autocomplete-signature {
7011 font-family: var(--font-mono);
7012 font-size: 0.7rem;
7013 color: var(--color-text-muted);
7014 margin-top: 1px;
7015}
7016
7017[data-theme="dark"] .formula-autocomplete {
7018 background: var(--color-surface);
7019 border-color: var(--color-border-strong);
7020}
7021
7022[data-theme="dark"] .formula-autocomplete-item.selected {
7023 background: var(--color-teal-light);
7024}
7025
7026/* ========================================================
7027 Formula Syntax Highlighting
7028 ======================================================== */
7029
7030/* Overlay container for formula bar highlighting */
7031.formula-input-wrap {
7032 position: relative;
7033 flex: 1;
7034 display: flex;
7035}
7036
7037.formula-input-wrap .formula-input {
7038 /* Override flex:1 from base — the wrap handles flex now */
7039 flex: 1;
7040 background: transparent;
7041 position: relative;
7042 z-index: 1;
7043 /* Make the text invisible (the highlight layer shows it) when formula */
7044 caret-color: var(--color-text);
7045}
7046
7047.formula-input-wrap .formula-input:focus {
7048 /* Keep focus ring on the input */
7049 border-color: var(--color-teal);
7050 box-shadow: 0 0 0 2px var(--color-focus);
7051}
7052
7053.formula-highlight-layer {
7054 position: absolute;
7055 top: 0;
7056 left: 0;
7057 right: 0;
7058 bottom: 0;
7059 pointer-events: none;
7060 font-family: var(--font-mono);
7061 font-size: 0.85rem;
7062 padding: 0.3rem 0.6rem;
7063 overflow: hidden;
7064 white-space: nowrap;
7065 border: 1px solid transparent;
7066 border-radius: var(--radius-sm);
7067 z-index: 0;
7068 color: transparent;
7069 display: flex;
7070 align-items: center;
7071}
7072
7073/* When highlight layer is active, make input text transparent
7074 so highlighted text shows through */
7075.formula-input-wrap .formula-input.formula-highlighting {
7076 color: transparent;
7077}
7078
7079/* Token colors — Light theme */
7080.formula-token-cell_ref {
7081 color: #0071df;
7082 color: oklch(0.55 0.2 250);
7083}
7084
7085.formula-token-function {
7086 color: #773ac1;
7087 color: oklch(0.5 0.2 300);
7088}
7089
7090.formula-token-string {
7091 color: #00792f;
7092 color: oklch(0.5 0.15 150);
7093}
7094
7095.formula-token-number {
7096 color: #ae5600;
7097 color: oklch(0.55 0.15 60);
7098}
7099
7100.formula-token-boolean {
7101 color: #773ac1;
7102 color: oklch(0.5 0.2 300);
7103}
7104
7105.formula-token-operator {
7106 color: var(--color-text);
7107}
7108
7109.formula-token-paren {
7110 color: var(--color-text-muted);
7111}
7112
7113.formula-token-error {
7114 color: #cc272e;
7115 color: oklch(0.55 0.2 25);
7116 font-weight: 600;
7117}
7118
7119.formula-token-whitespace {
7120 /* Preserve whitespace width */
7121 white-space: pre;
7122}
7123
7124.formula-token-identifier,
7125.formula-token-unknown {
7126 color: var(--color-text);
7127}
7128
7129/* Token colors — Dark theme */
7130[data-theme="dark"] .formula-token-cell_ref {
7131 color: #00a1ff;
7132 color: oklch(0.7 0.2 250);
7133}
7134
7135[data-theme="dark"] .formula-token-function {
7136 color: #ad87ed;
7137 color: oklch(0.7 0.15 300);
7138}
7139
7140[data-theme="dark"] .formula-token-string {
7141 color: #4cb86a;
7142 color: oklch(0.7 0.15 150);
7143}
7144
7145[data-theme="dark"] .formula-token-number {
7146 color: #e18528;
7147 color: oklch(0.7 0.15 60);
7148}
7149
7150[data-theme="dark"] .formula-token-boolean {
7151 color: #ad87ed;
7152 color: oklch(0.7 0.15 300);
7153}
7154
7155[data-theme="dark"] .formula-token-error {
7156 color: #f14d4c;
7157 color: oklch(0.65 0.2 25);
7158}
7159
7160/* Matching paren highlight */
7161.formula-token-paren-match {
7162 background: var(--color-teal-light);
7163 border-radius: 2px;
7164}
7165
7166/* ========================================================
7167 Range Highlight Overlays
7168 ======================================================== */
7169
7170.range-highlight-overlay {
7171 position: absolute;
7172 inset: 0;
7173 pointer-events: none;
7174 z-index: 5;
7175 box-sizing: border-box;
7176}
7177
7178/* ========================================================
7179 Formula Tooltip (Parameter Hints)
7180 ======================================================== */
7181
7182.formula-tooltip {
7183 position: fixed;
7184 z-index: var(--z-above-modal);
7185 min-width: 200px;
7186 max-width: 420px;
7187 padding: 6px 10px;
7188 background: var(--color-bg);
7189 border: 1px solid var(--color-border-strong);
7190 border-radius: var(--radius-md);
7191 box-shadow: var(--shadow-md);
7192 font-family: var(--font-body);
7193 font-size: 0.78rem;
7194 line-height: 1.45;
7195 color: var(--color-text);
7196}
7197
7198.formula-tooltip-signature {
7199 font-family: var(--font-mono);
7200 font-size: 0.8rem;
7201 margin-bottom: 3px;
7202 white-space: nowrap;
7203 overflow-x: auto;
7204}
7205
7206.formula-tooltip-fn {
7207 color: #773ac1;
7208 color: oklch(0.5 0.2 300);
7209 font-weight: 700;
7210}
7211
7212.formula-tooltip-param {
7213 color: var(--color-text-muted);
7214}
7215
7216.formula-tooltip-param-active {
7217 color: var(--color-text);
7218 font-weight: 700;
7219 text-decoration: underline;
7220 text-decoration-color: var(--color-teal);
7221 text-underline-offset: 2px;
7222}
7223
7224.formula-tooltip-optional {
7225 color: var(--color-text-faint);
7226}
7227
7228.formula-tooltip-param-desc {
7229 font-size: 0.75rem;
7230 color: var(--color-text-muted);
7231 margin-bottom: 2px;
7232 padding-left: 2px;
7233}
7234
7235.formula-tooltip-param-desc strong {
7236 color: var(--color-text);
7237 font-weight: 600;
7238}
7239
7240.formula-tooltip-desc {
7241 font-size: 0.72rem;
7242 color: var(--color-text-faint);
7243 border-top: 1px solid var(--color-border);
7244 margin-top: 3px;
7245 padding-top: 3px;
7246}
7247
7248/* Dark theme for tooltip */
7249[data-theme="dark"] .formula-tooltip {
7250 background: var(--color-surface);
7251 border-color: var(--color-border-strong);
7252}
7253
7254[data-theme="dark"] .formula-tooltip-fn {
7255 color: #ad87ed;
7256 color: oklch(0.7 0.15 300);
7257}
7258
7259/* prefers-color-scheme fallback for syntax highlighting */
7260@media (prefers-color-scheme: dark) {
7261 :root:not([data-theme="light"]) .formula-token-cell_ref {
7262 color: #00a1ff;
7263 color: oklch(0.7 0.2 250);
7264 }
7265 :root:not([data-theme="light"]) .formula-token-function {
7266 color: #ad87ed;
7267 color: oklch(0.7 0.15 300);
7268 }
7269 :root:not([data-theme="light"]) .formula-token-string {
7270 color: #4cb86a;
7271 color: oklch(0.7 0.15 150);
7272 }
7273 :root:not([data-theme="light"]) .formula-token-number {
7274 color: #e18528;
7275 color: oklch(0.7 0.15 60);
7276 }
7277 :root:not([data-theme="light"]) .formula-token-boolean {
7278 color: #ad87ed;
7279 color: oklch(0.7 0.15 300);
7280 }
7281 :root:not([data-theme="light"]) .formula-token-error {
7282 color: #f14d4c;
7283 color: oklch(0.65 0.2 25);
7284 }
7285 :root:not([data-theme="light"]) .formula-tooltip {
7286 background: var(--color-surface);
7287 border-color: var(--color-border-strong);
7288 }
7289 :root:not([data-theme="light"]) .formula-tooltip-fn {
7290 color: #ad87ed;
7291 color: oklch(0.7 0.15 300);
7292 }
7293}
7294
7295/* ========================================================
7296 Cell Notes
7297 ======================================================== */
7298
7299.cell-note-indicator {
7300 position: absolute;
7301 top: 0;
7302 right: 0;
7303 width: 0;
7304 height: 0;
7305 border-style: solid;
7306 border-width: 0 7px 7px 0;
7307 border-color: transparent var(--color-teal) transparent transparent;
7308 pointer-events: none;
7309 z-index: 1;
7310}
7311
7312.cell-note-tooltip {
7313 position: absolute;
7314 z-index: calc(var(--z-modal) + 1);
7315 max-width: 280px;
7316 padding: 6px 10px;
7317 background: var(--color-surface-alt);
7318 border: 1px solid var(--color-border-strong);
7319 border-radius: var(--radius-md);
7320 box-shadow: var(--shadow-md);
7321 font-family: var(--font-body);
7322 font-size: 0.75rem;
7323 color: var(--color-text);
7324 line-height: 1.4;
7325 white-space: pre-wrap;
7326 word-wrap: break-word;
7327 pointer-events: none;
7328}
7329
7330[data-theme="dark"] .cell-note-indicator {
7331 border-color: transparent var(--color-teal) transparent transparent;
7332}
7333
7334[data-theme="dark"] .cell-note-tooltip {
7335 background: var(--color-surface-alt);
7336 border-color: var(--color-border-strong);
7337}
7338
7339/* Cell with note needs relative positioning for the indicator */
7340td[data-id].has-note {
7341 position: relative;
7342}
7343
7344/* ========================================================
7345 Error Tooltips (#208)
7346 ======================================================== */
7347
7348.cell-error {
7349 color: var(--color-red) !important;
7350}
7351
7352.error-tooltip {
7353 position: absolute;
7354 z-index: calc(var(--z-modal) + 2);
7355 max-width: 300px;
7356 padding: 8px 12px;
7357 background: var(--color-surface-alt);
7358 border: 1px solid var(--color-red);
7359 border-radius: var(--radius-md);
7360 box-shadow: var(--shadow-md);
7361 font-family: var(--font-body);
7362 font-size: 0.75rem;
7363 color: var(--color-text);
7364 line-height: 1.4;
7365 pointer-events: none;
7366}
7367
7368.error-tooltip-title {
7369 font-weight: 700;
7370 color: var(--color-red);
7371 margin-bottom: 2px;
7372}
7373
7374.error-tooltip-desc {
7375 margin-bottom: 4px;
7376}
7377
7378.error-tooltip-hint {
7379 font-style: italic;
7380 opacity: 0.8;
7381}
7382
7383/* ========================================================
7384 Date Picker (#123)
7385 ======================================================== */
7386
7387.date-picker {
7388 background: var(--color-surface);
7389 border: 1px solid var(--color-border-strong);
7390 border-radius: var(--radius-md);
7391 box-shadow: var(--shadow-lg);
7392 padding: 8px;
7393 width: 224px;
7394 font-family: var(--font-body);
7395 font-size: 0.75rem;
7396}
7397
7398.dp-header {
7399 display: flex;
7400 align-items: center;
7401 justify-content: space-between;
7402 margin-bottom: 6px;
7403}
7404
7405.dp-title {
7406 font-weight: 600;
7407 font-size: 0.8rem;
7408}
7409
7410.dp-nav {
7411 background: none;
7412 border: none;
7413 cursor: pointer;
7414 padding: 2px 6px;
7415 border-radius: var(--radius-sm);
7416 color: var(--color-text);
7417 font-size: 0.65rem;
7418}
7419
7420.dp-nav:hover {
7421 background: var(--color-surface-alt);
7422}
7423
7424.dp-grid {
7425 display: grid;
7426 grid-template-columns: repeat(7, 1fr);
7427 gap: 1px;
7428 text-align: center;
7429}
7430
7431.dp-day-header {
7432 font-weight: 600;
7433 color: var(--color-text-faint);
7434 padding: 4px 0;
7435 font-size: 0.65rem;
7436}
7437
7438.dp-empty {
7439 padding: 4px;
7440}
7441
7442.dp-day {
7443 background: none;
7444 border: none;
7445 padding: 4px;
7446 cursor: pointer;
7447 border-radius: var(--radius-sm);
7448 color: var(--color-text);
7449 font-size: 0.75rem;
7450 line-height: 1.6;
7451}
7452
7453.dp-day:hover {
7454 background: var(--color-surface-alt);
7455}
7456
7457.dp-today {
7458 font-weight: 700;
7459 outline: 1px solid var(--color-accent);
7460 outline-offset: -1px;
7461}
7462
7463.dp-selected {
7464 background: var(--color-accent) !important;
7465 color: white;
7466}
7467
7468.dp-footer {
7469 margin-top: 6px;
7470 text-align: center;
7471}
7472
7473.dp-today-btn {
7474 background: none;
7475 border: none;
7476 cursor: pointer;
7477 color: var(--color-accent);
7478 font-size: 0.7rem;
7479 font-weight: 600;
7480}
7481
7482.dp-today-btn:hover {
7483 text-decoration: underline;
7484}
7485
7486/* ========================================================
7487 Onboarding Tooltip
7488 ======================================================== */
7489
7490.onboarding-overlay {
7491 position: fixed;
7492 inset: 0;
7493 z-index: var(--z-tooltip);
7494 display: flex;
7495 align-items: center;
7496 justify-content: center;
7497 background: #2218124d;
7498 background: oklch(0.22 0.02 55 / 0.3);
7499 backdrop-filter: blur(2px);
7500 animation: onboarding-fade-in 200ms ease-out;
7501}
7502
7503@keyframes onboarding-fade-in {
7504 from { opacity: 0; }
7505 to { opacity: 1; }
7506}
7507
7508.onboarding-card {
7509 background: var(--color-bg);
7510 border: 1px solid var(--color-border);
7511 border-radius: var(--radius-lg);
7512 box-shadow: 0 12px 40px #22181226;
7513 box-shadow: 0 12px 40px oklch(0.22 0.02 55 / 0.15);
7514 padding: var(--space-lg) var(--space-xl);
7515 max-width: 22rem;
7516 width: 90vw;
7517 animation: onboarding-slide-up 250ms ease-out;
7518}
7519
7520@keyframes onboarding-slide-up {
7521 from { opacity: 0; transform: translateY(12px); }
7522 to { opacity: 1; transform: translateY(0); }
7523}
7524
7525.onboarding-title {
7526 font-family: var(--font-display);
7527 font-size: 1.1rem;
7528 font-weight: 600;
7529 color: var(--color-text);
7530 margin-bottom: var(--space-md);
7531}
7532
7533.onboarding-tips {
7534 list-style: none;
7535 padding: 0;
7536 display: flex;
7537 flex-direction: column;
7538 gap: var(--space-sm);
7539}
7540
7541.onboarding-tip {
7542 display: flex;
7543 align-items: flex-start;
7544 gap: var(--space-sm);
7545 font-size: 0.82rem;
7546 line-height: 1.45;
7547 color: var(--color-text-muted);
7548}
7549
7550.onboarding-tip kbd {
7551 display: inline-block;
7552 font-family: var(--font-mono);
7553 font-size: 0.7rem;
7554 padding: 1px 5px;
7555 background: var(--color-surface-alt);
7556 border: 1px solid var(--color-border);
7557 border-radius: 3px;
7558 color: var(--color-text);
7559 white-space: nowrap;
7560 line-height: 1.4;
7561}
7562
7563.onboarding-dismiss {
7564 display: block;
7565 width: 100%;
7566 margin-top: var(--space-md);
7567 padding: 0.45rem 0;
7568 border: none;
7569 border-radius: var(--radius-sm);
7570 background: var(--color-teal);
7571 color: var(--color-btn-primary-text);
7572 font-family: var(--font-body);
7573 font-size: 0.82rem;
7574 font-weight: 500;
7575 cursor: pointer;
7576 transition: background var(--transition-fast);
7577}
7578
7579.onboarding-dismiss:hover {
7580 background: var(--color-teal-light);
7581 color: var(--color-teal);
7582}
7583
7584[data-theme="dark"] .onboarding-overlay {
7585 background: #01000080;
7586 background: oklch(0.05 0.005 75 / 0.5);
7587}
7588
7589[data-theme="dark"] .onboarding-card {
7590 box-shadow: 0 12px 40px #01000080;
7591 box-shadow: 0 12px 40px oklch(0.05 0.005 75 / 0.5);
7592}
7593
7594/* ========================================================
7595 Empty State Watermark
7596 ======================================================== */
7597
7598.empty-state-watermark {
7599 position: absolute;
7600 inset: 0;
7601 display: flex;
7602 align-items: center;
7603 justify-content: center;
7604 pointer-events: none;
7605 z-index: 0;
7606}
7607
7608.empty-state-text {
7609 font-family: var(--font-body);
7610 font-size: 0.9rem;
7611 color: var(--color-text-faint);
7612 opacity: 0.5;
7613 text-align: center;
7614 line-height: 1.6;
7615 max-width: 24rem;
7616 padding: var(--space-lg);
7617}
7618
7619.empty-state-text kbd {
7620 display: inline-block;
7621 font-family: var(--font-mono);
7622 font-size: 0.75rem;
7623 padding: 1px 5px;
7624 background: var(--color-surface-alt);
7625 border: 1px solid var(--color-border);
7626 border-radius: 3px;
7627 color: var(--color-text-muted);
7628 opacity: 0.8;
7629}
7630
7631/* --- Markdown Source View --- */
7632.markdown-source-textarea {
7633 width: 100%;
7634 max-width: 48rem;
7635 min-height: 60vh;
7636 margin: 0 auto;
7637 padding: var(--space-lg);
7638 font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
7639 font-size: 0.95rem;
7640 line-height: 1.7;
7641 color: var(--color-text);
7642 background: var(--color-surface);
7643 border: 1px solid var(--color-border);
7644 border-radius: var(--radius-sm);
7645 resize: vertical;
7646 outline: none;
7647 tab-size: 4;
7648 box-sizing: border-box;
7649}
7650
7651.markdown-source-textarea:focus {
7652 border-color: var(--color-teal);
7653}
7654
7655[data-theme="dark"] .markdown-source-textarea {
7656 background: var(--color-surface-alt);
7657 color: var(--color-text);
7658 border-color: var(--color-border);
7659}
7660
7661[data-theme="dark"] .markdown-source-textarea:focus {
7662 border-color: var(--color-teal);
7663}
7664
7665/* Active state for the MD toggle button */
7666#btn-md-toggle.active {
7667 background: var(--color-teal);
7668 color: var(--color-btn-primary-text);
7669}
7670
7671/* Markdown mode indicator in the status area */
7672.md-mode-indicator {
7673 font-size: 0.75rem;
7674 color: var(--color-text-secondary);
7675 opacity: 0.7;
7676 margin-left: var(--space-sm);
7677}
7678
7679/* ========================================================
7680 Notion-style Editing: Slash Menu, Block Handles, Polish
7681 ======================================================== */
7682
7683/* --- Slash Command Menu --- */
7684.slash-menu {
7685 position: fixed;
7686 z-index: var(--z-overlay);
7687 background: var(--color-surface);
7688 border: 1px solid var(--color-border);
7689 border-radius: var(--radius-md);
7690 box-shadow: var(--shadow-lg);
7691 max-height: 320px;
7692 width: 300px;
7693 overflow-y: auto;
7694 padding: var(--space-xs) 0;
7695 font-family: var(--font-body);
7696}
7697
7698.slash-menu-category {
7699 font-size: 0.7rem;
7700 font-weight: 600;
7701 text-transform: uppercase;
7702 letter-spacing: 0.06em;
7703 color: var(--color-text-muted);
7704 padding: var(--space-sm) var(--space-md) var(--space-xs);
7705}
7706
7707.slash-menu-item {
7708 display: flex;
7709 align-items: center;
7710 gap: var(--space-sm);
7711 width: 100%;
7712 padding: var(--space-sm) var(--space-md);
7713 border: none;
7714 background: none;
7715 cursor: pointer;
7716 text-align: left;
7717 font-size: 0.875rem;
7718 color: var(--color-text);
7719 border-radius: 0;
7720 transition: background-color var(--transition-fast);
7721}
7722
7723.slash-menu-item:hover,
7724.slash-menu-item-selected {
7725 background: var(--color-hover);
7726}
7727
7728.slash-menu-item-icon {
7729 display: flex;
7730 align-items: center;
7731 justify-content: center;
7732 width: 28px;
7733 height: 28px;
7734 border-radius: var(--radius-sm);
7735 background: var(--color-surface-alt);
7736 font-size: 0.8rem;
7737 font-weight: 600;
7738 flex-shrink: 0;
7739 color: var(--color-text-muted);
7740}
7741
7742.slash-menu-item-body {
7743 display: flex;
7744 flex-direction: column;
7745 min-width: 0;
7746 flex: 1;
7747}
7748
7749.slash-menu-item-name {
7750 font-weight: 500;
7751 line-height: 1.3;
7752}
7753
7754.slash-menu-item-desc {
7755 font-size: 0.75rem;
7756 color: var(--color-text-muted);
7757 line-height: 1.3;
7758}
7759
7760.slash-menu-item-shortcut {
7761 font-size: 0.7rem;
7762 color: var(--color-text-faint);
7763 font-family: var(--font-mono);
7764 flex-shrink: 0;
7765}
7766
7767.slash-menu-empty {
7768 padding: var(--space-md);
7769 text-align: center;
7770 color: var(--color-text-muted);
7771 font-size: 0.85rem;
7772}
7773
7774/* --- Block Handle --- */
7775.block-handle {
7776 position: fixed;
7777 z-index: var(--z-float);
7778 display: flex;
7779 align-items: center;
7780 gap: 2px;
7781 opacity: 0;
7782 transition: opacity var(--transition-fast);
7783}
7784
7785.block-handle[style*="display: flex"] {
7786 opacity: 1;
7787}
7788
7789.block-handle-grip,
7790.block-handle-add {
7791 display: flex;
7792 align-items: center;
7793 justify-content: center;
7794 width: 20px;
7795 height: 24px;
7796 border: none;
7797 background: none;
7798 cursor: pointer;
7799 border-radius: var(--radius-sm);
7800 color: var(--color-text-faint);
7801 font-size: 1rem;
7802 padding: 0;
7803 transition: background-color var(--transition-fast), color var(--transition-fast);
7804}
7805
7806.block-handle-grip:hover,
7807.block-handle-add:hover {
7808 background: var(--color-hover);
7809 color: var(--color-text-muted);
7810}
7811
7812.block-handle-grip {
7813 cursor: grab;
7814 font-size: 1.1rem;
7815 letter-spacing: -1px;
7816}
7817
7818.block-handle-add {
7819 font-size: 1.1rem;
7820 font-weight: 300;
7821}
7822
7823/* --- Block Context Menu --- */
7824.block-context-menu {
7825 position: fixed;
7826 z-index: var(--z-popover);
7827 background: var(--color-surface);
7828 border: 1px solid var(--color-border);
7829 border-radius: var(--radius-md);
7830 box-shadow: var(--shadow-md);
7831 min-width: 160px;
7832 padding: var(--space-xs) 0;
7833}
7834
7835.block-context-sub-header {
7836 font-size: 0.7rem;
7837 font-weight: 600;
7838 text-transform: uppercase;
7839 letter-spacing: 0.06em;
7840 color: var(--color-text-muted);
7841 padding: var(--space-sm) var(--space-md) var(--space-xs);
7842}
7843
7844.block-context-item {
7845 display: flex;
7846 align-items: center;
7847 gap: var(--space-sm);
7848 width: 100%;
7849 padding: var(--space-sm) var(--space-md);
7850 border: none;
7851 background: none;
7852 cursor: pointer;
7853 text-align: left;
7854 font-size: 0.85rem;
7855 color: var(--color-text);
7856 transition: background-color var(--transition-fast);
7857}
7858
7859.block-context-item:hover {
7860 background: var(--color-hover);
7861}
7862
7863.block-context-icon {
7864 width: 18px;
7865 text-align: center;
7866 flex-shrink: 0;
7867 color: var(--color-text-muted);
7868}
7869
7870.block-context-label {
7871 flex: 1;
7872}
7873
7874/* --- Block-level Visual Polish --- */
7875
7876/* Add left margin to editor content for block handle space */
7877.ProseMirror {
7878 padding-left: 40px;
7879}
7880
7881/* Subtle hover highlight on blocks */
7882.ProseMirror > * {
7883 transition: background-color var(--transition-fast);
7884 border-left: 2px solid transparent;
7885 padding-left: var(--space-xs);
7886 margin-left: calc(-1 * var(--space-xs) - 2px);
7887}
7888
7889/* Current block (with cursor) gets a subtle left accent */
7890.ProseMirror > .has-focus,
7891.ProseMirror > *:hover {
7892 background: #006e6f08;
7893 background: oklch(0.48 0.1 195 / 0.03);
7894}
7895
7896.ProseMirror > .has-focus {
7897 border-left-color: var(--color-teal);
7898}
7899
7900/* Smooth reorder transitions */
7901.ProseMirror > * {
7902 transition: background-color var(--transition-fast),
7903 border-color var(--transition-fast),
7904 transform var(--transition-med);
7905}
7906
7907/* Notion-style placeholder styling */
7908.ProseMirror p.is-empty::before {
7909 color: var(--color-text-faint);
7910 font-style: italic;
7911 pointer-events: none;
7912}
7913
7914.ProseMirror.is-empty p.is-empty:first-child::before {
7915 color: var(--color-text-muted);
7916}
7917
7918/* --- Hide block handle and slash menu in zen/print mode --- */
7919.zen-mode .block-handle,
7920.zen-mode .block-context-menu {
7921 display: none !important;
7922}
7923
7924@media print {
7925 .block-handle,
7926 .block-context-menu,
7927 .slash-menu {
7928 display: none !important;
7929 }
7930 .ProseMirror > * {
7931 border-left: none;
7932 margin-left: 0;
7933 }
7934 .ProseMirror {
7935 padding-left: 0;
7936 }
7937}
7938
7939/* --- Dark mode overrides --- */
7940[data-theme="dark"] .slash-menu {
7941 background: var(--color-surface);
7942 border-color: var(--color-border);
7943}
7944
7945[data-theme="dark"] .slash-menu-item-icon {
7946 background: var(--color-surface-alt);
7947}
7948
7949[data-theme="dark"] .slash-menu-item:hover,
7950[data-theme="dark"] .slash-menu-item-selected {
7951 background: var(--color-hover);
7952}
7953
7954[data-theme="dark"] .block-context-menu {
7955 background: var(--color-surface);
7956 border-color: var(--color-border);
7957}
7958
7959[data-theme="dark"] .block-context-item:hover {
7960 background: var(--color-hover);
7961}
7962
7963[data-theme="dark"] .ProseMirror > .has-focus,
7964[data-theme="dark"] .ProseMirror > *:hover {
7965 background: #0f92930d;
7966 background: oklch(0.60 0.1 195 / 0.05);
7967}
7968
7969@media (prefers-color-scheme: dark) {
7970 :root:not([data-theme="light"]) .slash-menu {
7971 background: var(--color-surface);
7972 border-color: var(--color-border);
7973 }
7974 :root:not([data-theme="light"]) .slash-menu-item-icon {
7975 background: var(--color-surface-alt);
7976 }
7977 :root:not([data-theme="light"]) .slash-menu-item:hover,
7978 :root:not([data-theme="light"]) .slash-menu-item-selected {
7979 background: var(--color-hover);
7980 }
7981 :root:not([data-theme="light"]) .block-context-menu {
7982 background: var(--color-surface);
7983 border-color: var(--color-border);
7984 }
7985 :root:not([data-theme="light"]) .block-context-item:hover {
7986 background: var(--color-hover);
7987 }
7988 :root:not([data-theme="light"]) .ProseMirror > .has-focus,
7989 :root:not([data-theme="light"]) .ProseMirror > *:hover {
7990 background: #0f92930d;
7991 background: oklch(0.60 0.1 195 / 0.05);
7992 }
7993}
7994
7995/* ==========================================================
7996 Command Palette (Cmd+K / Ctrl+K)
7997 ========================================================== */
7998
7999.cmd-palette-backdrop {
8000 position: fixed;
8001 inset: 0;
8002 background: var(--color-modal-backdrop);
8003 display: flex;
8004 align-items: flex-start;
8005 justify-content: center;
8006 padding-top: min(20vh, 160px);
8007 z-index: var(--z-menu);
8008 opacity: 0;
8009 transition: opacity var(--transition-fast);
8010}
8011
8012.cmd-palette-backdrop.cmd-palette-open {
8013 opacity: 1;
8014}
8015
8016.cmd-palette {
8017 background: var(--color-surface);
8018 border: 1px solid var(--color-border);
8019 border-radius: var(--radius-lg);
8020 box-shadow: var(--shadow-lg);
8021 width: 90%;
8022 max-width: 600px;
8023 max-height: 60vh;
8024 display: flex;
8025 flex-direction: column;
8026 overflow: hidden;
8027 transform: translateY(-8px) scale(0.98);
8028 transition: transform var(--transition-fast), opacity var(--transition-fast);
8029 opacity: 0;
8030}
8031
8032.cmd-palette-backdrop.cmd-palette-open .cmd-palette {
8033 transform: translateY(0) scale(1);
8034 opacity: 1;
8035}
8036
8037.cmd-palette-input {
8038 width: 100%;
8039 padding: var(--space-md) var(--space-lg);
8040 border: none;
8041 border-bottom: 1px solid var(--color-border);
8042 background: transparent;
8043 color: var(--color-text);
8044 font: inherit;
8045 font-size: 1.05rem;
8046 outline: none;
8047}
8048
8049.cmd-palette-input::placeholder {
8050 color: var(--color-text-faint);
8051}
8052
8053.cmd-palette-results {
8054 overflow-y: auto;
8055 flex: 1;
8056 padding: var(--space-xs) 0;
8057}
8058
8059.cmd-palette-category {
8060 padding: var(--space-sm) var(--space-lg) var(--space-xs);
8061 font-family: var(--font-body);
8062 font-size: 0.7rem;
8063 font-weight: 600;
8064 text-transform: uppercase;
8065 letter-spacing: 0.05em;
8066 color: var(--color-text-faint);
8067}
8068
8069.cmd-palette-item {
8070 display: flex;
8071 align-items: center;
8072 gap: var(--space-sm);
8073 padding: var(--space-sm) var(--space-lg);
8074 cursor: pointer;
8075 color: var(--color-text);
8076 font-size: 0.9rem;
8077 transition: background var(--transition-fast);
8078}
8079
8080.cmd-palette-item:hover,
8081.cmd-palette-item-selected {
8082 background: var(--color-hover);
8083}
8084
8085.cmd-palette-item-selected {
8086 background: var(--color-hover);
8087}
8088
8089.cmd-palette-item-icon {
8090 flex-shrink: 0;
8091 width: 1.5rem;
8092 text-align: center;
8093 font-size: 0.95rem;
8094 color: var(--color-text-muted);
8095}
8096
8097.cmd-palette-item-label {
8098 flex: 1;
8099 min-width: 0;
8100 overflow: hidden;
8101 text-overflow: ellipsis;
8102 white-space: nowrap;
8103}
8104
8105.cmd-palette-item-shortcut {
8106 flex-shrink: 0;
8107 font-size: 0.75rem;
8108 font-family: var(--font-mono);
8109 color: var(--color-text-faint);
8110 background: var(--color-surface-alt);
8111 padding: 2px 6px;
8112 border-radius: var(--radius-sm);
8113 border: 1px solid var(--color-border);
8114}
8115
8116.cmd-palette-empty {
8117 padding: var(--space-xl) var(--space-lg);
8118 text-align: center;
8119 color: var(--color-text-faint);
8120 font-size: 0.9rem;
8121}
8122
8123@media print {
8124 .cmd-palette-backdrop {
8125 display: none !important;
8126 }
8127}
8128
8129/* ========================================================
8130 Save Dot Indicator
8131 ======================================================== */
8132
8133.save-dot {
8134 display: inline-block;
8135 width: 8px;
8136 height: 8px;
8137 border-radius: 50%;
8138 flex-shrink: 0;
8139 transition: background-color var(--transition-fast);
8140}
8141
8142.save-dot--saved {
8143 background-color: var(--color-success);
8144}
8145
8146.save-dot--saving {
8147 background-color: var(--color-warning);
8148 animation: save-dot-pulse 1s ease-in-out infinite;
8149}
8150
8151.save-dot--error {
8152 background-color: var(--color-danger);
8153 animation: save-dot-pulse 0.6s ease-in-out infinite;
8154}
8155
8156@keyframes save-dot-pulse {
8157 0%, 100% { opacity: 1; }
8158 50% { opacity: 0.4; }
8159}
8160
8161/* ========================================================
8162 Version Panel (slide-in from right)
8163 ======================================================== */
8164
8165.version-panel {
8166 position: fixed;
8167 top: 0;
8168 right: -320px;
8169 width: 320px;
8170 height: 100vh;
8171 background: var(--color-surface);
8172 border-left: 1px solid var(--color-border);
8173 box-shadow: var(--shadow-lg);
8174 display: flex;
8175 flex-direction: column;
8176 z-index: var(--z-panel);
8177 transition: right var(--transition-med);
8178 overflow: hidden;
8179}
8180
8181.version-panel.open {
8182 right: 0;
8183}
8184
8185.version-panel-header {
8186 display: flex;
8187 align-items: center;
8188 justify-content: space-between;
8189 padding: var(--space-sm) var(--space-md);
8190 border-bottom: 1px solid var(--color-border);
8191 flex-shrink: 0;
8192}
8193
8194.version-panel-header h3 {
8195 margin: 0;
8196 font-size: 0.875rem;
8197 font-weight: 600;
8198 font-family: var(--font-body);
8199 color: var(--color-text);
8200}
8201
8202.version-panel-close {
8203 font-size: 1.25rem;
8204 color: var(--color-text-muted);
8205}
8206
8207.version-panel-list {
8208 flex: 1;
8209 overflow-y: auto;
8210 padding: var(--space-xs) 0;
8211}
8212
8213.version-panel-item {
8214 display: flex;
8215 flex-direction: column;
8216 gap: 2px;
8217 width: 100%;
8218 padding: var(--space-sm) var(--space-md);
8219 border-bottom: 1px solid var(--color-border);
8220 cursor: pointer;
8221 transition: background var(--transition-fast);
8222 font-family: var(--font-body);
8223 position: relative;
8224}
8225
8226.version-panel-item:hover {
8227 background: var(--color-hover);
8228}
8229
8230.version-panel-item:focus-visible {
8231 outline: 2px solid var(--color-teal);
8232 outline-offset: -2px;
8233}
8234
8235.version-panel-item-top {
8236 display: flex;
8237 align-items: center;
8238 gap: var(--space-sm);
8239}
8240
8241.version-panel-time {
8242 font-size: 0.75rem;
8243 color: var(--color-text);
8244 font-weight: 500;
8245}
8246
8247.version-panel-named-badge {
8248 display: inline-block;
8249 padding: 1px 6px;
8250 font-size: 0.625rem;
8251 font-weight: 600;
8252 color: var(--color-teal);
8253 background: var(--color-teal-light);
8254 border-radius: var(--radius-sm);
8255 text-transform: uppercase;
8256 letter-spacing: 0.03em;
8257}
8258
8259.version-panel-item-meta {
8260 display: flex;
8261 gap: var(--space-sm);
8262 font-size: 0.6875rem;
8263 color: var(--color-text-muted);
8264}
8265
8266.version-panel-author {
8267 color: var(--color-text-faint);
8268}
8269.version-panel-author--forge {
8270 color: oklch(0.65 0.1 250);
8271 font-weight: 500;
8272}
8273
8274.version-panel-count {
8275 color: var(--color-text-faint);
8276}
8277
8278.version-panel-delta {
8279 font-weight: 600;
8280}
8281
8282.version-panel-delta.positive {
8283 color: var(--color-success);
8284}
8285
8286.version-panel-delta.negative {
8287 color: var(--color-danger);
8288}
8289
8290.version-panel-name-btn {
8291 position: absolute;
8292 right: var(--space-sm);
8293 top: 50%;
8294 transform: translateY(-50%);
8295 background: none;
8296 border: none;
8297 color: var(--color-text-faint);
8298 cursor: pointer;
8299 font-size: 0.875rem;
8300 opacity: 0;
8301 transition: opacity var(--transition-fast);
8302 padding: 2px 4px;
8303 border-radius: var(--radius-sm);
8304}
8305
8306.version-panel-item:hover .version-panel-name-btn {
8307 opacity: 1;
8308}
8309
8310.version-panel-name-btn:hover {
8311 color: var(--color-text);
8312 background: var(--color-hover);
8313}
8314
8315.version-panel-preview {
8316 display: flex;
8317 flex-direction: column;
8318 position: absolute;
8319 inset: 0;
8320 background: var(--color-surface);
8321 z-index: 2;
8322}
8323
8324.version-panel-preview-header {
8325 display: flex;
8326 align-items: center;
8327 justify-content: space-between;
8328 padding: var(--space-sm) var(--space-md);
8329 border-bottom: 1px solid var(--color-border);
8330 gap: var(--space-sm);
8331 flex-shrink: 0;
8332}
8333
8334.version-panel-preview-content {
8335 flex: 1;
8336 overflow-y: auto;
8337 padding: var(--space-md);
8338}
8339
8340@media print {
8341 .version-panel {
8342 display: none !important;
8343 }
8344}
8345
8346/* ========================================================
8347 Diff Panel (slide-in from right, compare versions)
8348 ======================================================== */
8349
8350.diff-panel {
8351 position: fixed;
8352 top: 0;
8353 right: -380px;
8354 width: 380px;
8355 height: 100vh;
8356 background: var(--color-surface);
8357 border-left: 1px solid var(--color-border);
8358 box-shadow: var(--shadow-lg);
8359 display: flex;
8360 flex-direction: column;
8361 z-index: var(--z-panel);
8362 transition: right var(--transition-med);
8363 overflow: hidden;
8364}
8365
8366.diff-panel.open {
8367 right: 0;
8368}
8369
8370.diff-panel-header {
8371 display: flex;
8372 align-items: center;
8373 justify-content: space-between;
8374 padding: var(--space-sm) var(--space-md);
8375 border-bottom: 1px solid var(--color-border);
8376 flex-shrink: 0;
8377}
8378
8379.diff-panel-header h3 {
8380 margin: 0;
8381 font-size: 0.875rem;
8382 font-weight: 600;
8383 font-family: var(--font-body);
8384 color: var(--color-text);
8385}
8386
8387.diff-panel-close {
8388 font-size: 1.25rem;
8389 color: var(--color-text-muted);
8390}
8391
8392.diff-panel-controls {
8393 display: flex;
8394 align-items: flex-end;
8395 gap: var(--space-sm);
8396 padding: var(--space-sm) var(--space-md);
8397 border-bottom: 1px solid var(--color-border);
8398 flex-shrink: 0;
8399 flex-wrap: wrap;
8400}
8401
8402.diff-panel-select-group {
8403 display: flex;
8404 flex-direction: column;
8405 gap: 2px;
8406 flex: 1;
8407 min-width: 0;
8408}
8409
8410.diff-panel-label {
8411 font-size: 0.625rem;
8412 font-weight: 600;
8413 text-transform: uppercase;
8414 letter-spacing: 0.05em;
8415 color: var(--color-text-faint);
8416 font-family: var(--font-body);
8417}
8418
8419.diff-panel-select {
8420 font-size: 0.75rem;
8421 font-family: var(--font-body);
8422 padding: 4px 6px;
8423 border: 1px solid var(--color-border);
8424 border-radius: var(--radius-sm);
8425 background: var(--color-bg);
8426 color: var(--color-text);
8427 min-width: 0;
8428 width: 100%;
8429 cursor: pointer;
8430}
8431
8432.diff-panel-select:focus-visible {
8433 outline: 2px solid var(--color-teal);
8434 outline-offset: -1px;
8435}
8436
8437.diff-panel-arrow {
8438 color: var(--color-text-faint);
8439 font-size: 0.875rem;
8440 padding-bottom: 4px;
8441 flex-shrink: 0;
8442}
8443
8444.diff-panel-run {
8445 flex-shrink: 0;
8446 white-space: nowrap;
8447}
8448
8449.diff-panel-stats {
8450 display: flex;
8451 gap: var(--space-md);
8452 padding: var(--space-xs) var(--space-md);
8453 border-bottom: 1px solid var(--color-border);
8454 font-size: 0.75rem;
8455 font-family: var(--font-body);
8456 font-weight: 600;
8457 flex-shrink: 0;
8458}
8459
8460.diff-stat-add {
8461 color: var(--color-success);
8462}
8463
8464.diff-stat-del {
8465 color: var(--color-danger);
8466}
8467
8468.diff-stat-forge {
8469 margin-left: auto;
8470 padding: 1px 6px;
8471 border-radius: 3px;
8472 background: oklch(0.92 0.04 250);
8473 color: oklch(0.45 0.1 250);
8474 font-size: 0.6875rem;
8475 font-weight: 600;
8476 text-transform: uppercase;
8477 letter-spacing: 0.04em;
8478}
8479
8480.diff-option--forge {
8481 color: oklch(0.45 0.1 250);
8482 font-weight: 500;
8483}
8484
8485.diff-panel-body {
8486 flex: 1;
8487 overflow-y: auto;
8488 padding: var(--space-md);
8489}
8490
8491.diff-panel-empty {
8492 color: var(--color-text-faint);
8493 font-size: 0.8125rem;
8494 font-family: var(--font-body);
8495 text-align: center;
8496 padding: var(--space-xl) var(--space-md);
8497}
8498
8499.diff-panel-content {
8500 font-family: var(--font-display);
8501 font-size: 0.875rem;
8502 line-height: 1.7;
8503 color: var(--color-text);
8504 word-wrap: break-word;
8505}
8506
8507.diff-equal {
8508 color: var(--color-text);
8509}
8510
8511.diff-insert {
8512 background: oklch(0.92 0.08 155);
8513 color: oklch(0.28 0.06 155);
8514 padding: 1px 2px;
8515 border-radius: 2px;
8516}
8517
8518.diff-delete {
8519 background: oklch(0.92 0.08 25);
8520 color: oklch(0.38 0.08 25);
8521 text-decoration: line-through;
8522 padding: 1px 2px;
8523 border-radius: 2px;
8524}
8525
8526@media (prefers-color-scheme: dark) {
8527 :root:not([data-theme="light"]) {
8528 .diff-insert {
8529 background: oklch(0.28 0.06 155);
8530 color: oklch(0.85 0.08 155);
8531 }
8532
8533 .diff-delete {
8534 background: oklch(0.28 0.06 25);
8535 color: oklch(0.78 0.08 25);
8536 }
8537 }
8538}
8539
8540@media print {
8541 .diff-panel {
8542 display: none !important;
8543 }
8544}
8545
8546/* ========================================================
8547 Print Preview Dialog
8548 ======================================================== */
8549
8550.print-preview-backdrop {
8551 position: fixed;
8552 inset: 0;
8553 background: var(--color-modal-backdrop);
8554 z-index: var(--z-above-modal);
8555 display: flex;
8556 align-items: center;
8557 justify-content: center;
8558}
8559
8560.print-preview-dialog {
8561 background: var(--color-bg);
8562 border: 1px solid var(--color-border);
8563 border-radius: var(--radius-lg);
8564 box-shadow: var(--shadow-lg);
8565 display: flex;
8566 width: 90vw;
8567 max-width: 960px;
8568 height: 80vh;
8569 max-height: 720px;
8570 overflow: hidden;
8571}
8572
8573.print-preview-sidebar {
8574 width: 260px;
8575 min-width: 260px;
8576 padding: var(--space-lg);
8577 border-right: 1px solid var(--color-border);
8578 overflow-y: auto;
8579 display: flex;
8580 flex-direction: column;
8581 gap: var(--space-sm);
8582}
8583
8584.print-preview-sidebar h3 {
8585 margin: 0 0 var(--space-sm);
8586 font-family: var(--font-display);
8587 font-size: 1.1rem;
8588 color: var(--color-text);
8589}
8590
8591.print-preview-sidebar label {
8592 display: block;
8593 margin-bottom: var(--space-xs);
8594 font-size: 0.8rem;
8595 color: var(--color-text-muted);
8596 font-weight: 500;
8597}
8598
8599.print-preview-sidebar select {
8600 width: 100%;
8601 padding: var(--space-xs) var(--space-sm);
8602 border: 1px solid var(--color-border);
8603 border-radius: var(--radius-sm);
8604 background: var(--color-bg);
8605 color: var(--color-text);
8606 font-family: var(--font-body);
8607 font-size: 0.82rem;
8608 margin-bottom: var(--space-xs);
8609}
8610
8611.print-preview-sidebar select:focus {
8612 border-color: var(--color-teal);
8613 outline: none;
8614 box-shadow: 0 0 0 2px var(--color-focus);
8615}
8616
8617.print-preview-radio-group {
8618 display: flex;
8619 gap: var(--space-md);
8620 margin-bottom: var(--space-xs);
8621}
8622
8623.print-preview-radio-group label {
8624 display: inline-flex;
8625 align-items: center;
8626 gap: 0.3rem;
8627 font-size: 0.82rem;
8628 color: var(--color-text);
8629 cursor: pointer;
8630 margin-bottom: 0;
8631}
8632
8633.print-preview-radio-group input[type="radio"] {
8634 margin: 0;
8635 accent-color: var(--color-teal);
8636}
8637
8638.print-preview-checkbox {
8639 display: flex;
8640 align-items: center;
8641 gap: 0.4rem;
8642 margin-bottom: var(--space-xs);
8643}
8644
8645.print-preview-checkbox input[type="checkbox"] {
8646 margin: 0;
8647 accent-color: var(--color-teal);
8648}
8649
8650.print-preview-checkbox label {
8651 font-size: 0.82rem;
8652 color: var(--color-text);
8653 margin-bottom: 0;
8654 cursor: pointer;
8655}
8656
8657.print-preview-actions {
8658 display: flex;
8659 gap: var(--space-sm);
8660 margin-top: auto;
8661 padding-top: var(--space-md);
8662 border-top: 1px solid var(--color-border);
8663}
8664
8665.print-preview-actions button {
8666 flex: 1;
8667 padding: var(--space-xs) var(--space-md);
8668 border: 1px solid var(--color-border);
8669 border-radius: var(--radius-sm);
8670 cursor: pointer;
8671 font-size: 0.85rem;
8672 font-family: var(--font-body);
8673 background: var(--color-surface);
8674 color: var(--color-text);
8675 transition: background var(--transition-fast);
8676}
8677
8678.print-preview-actions button:hover {
8679 background: var(--color-hover);
8680}
8681
8682.print-preview-actions button.btn-primary {
8683 background: var(--color-accent);
8684 color: var(--color-btn-primary-text);
8685 border-color: var(--color-accent);
8686}
8687
8688.print-preview-actions button.btn-primary:hover {
8689 background: var(--color-accent-hover);
8690}
8691
8692.print-preview-content {
8693 flex: 1;
8694 overflow: auto;
8695 background: var(--color-surface-alt);
8696 padding: var(--space-lg);
8697 display: flex;
8698 align-items: flex-start;
8699 justify-content: center;
8700}
8701
8702.print-preview-page {
8703 background: #fff;
8704 box-shadow: var(--shadow-md);
8705 border-radius: 2px;
8706 overflow: hidden;
8707 transform-origin: top center;
8708}
8709
8710.print-preview-page iframe {
8711 border: none;
8712 width: 100%;
8713 height: 100%;
8714 display: block;
8715}
8716
8717@media (max-width: 640px) {
8718 .print-preview-dialog {
8719 flex-direction: column;
8720 width: 100%;
8721 max-width: 100%;
8722 height: 100%;
8723 max-height: 100%;
8724 border-radius: 0;
8725 }
8726
8727 .print-preview-sidebar {
8728 width: 100%;
8729 min-width: 0;
8730 border-right: none;
8731 border-bottom: 1px solid var(--color-border);
8732 max-height: 40vh;
8733 overflow-y: auto;
8734 }
8735}
8736
8737/* Wiki links */
8738a.wiki-link {
8739 color: var(--color-teal);
8740 text-decoration: none;
8741 border-bottom: 1px dashed var(--color-teal);
8742 cursor: pointer;
8743 padding: 0 0.1em;
8744 border-radius: 2px;
8745 transition: background var(--transition-fast);
8746}
8747a.wiki-link:hover {
8748 background: #a0dbda33;
8749 background: oklch(0.85 0.06 195 / 0.2);
8750}
8751a.wiki-link[href="#"] {
8752 color: var(--color-text-faint);
8753 border-bottom-color: var(--color-text-faint);
8754 font-style: italic;
8755}
8756
8757/* ── Mermaid diagram blocks ──────────────────────────────────────────── */
8758
8759.mermaid-block {
8760 border: 1px solid var(--color-border);
8761 border-radius: var(--radius-md);
8762 overflow: hidden;
8763 margin: var(--space-md) 0;
8764 background: var(--color-surface-raised, var(--color-surface));
8765}
8766
8767.mermaid-toolbar {
8768 display: flex;
8769 align-items: center;
8770 gap: var(--space-xs);
8771 padding: var(--space-xs) var(--space-sm);
8772 background: var(--color-surface);
8773 border-bottom: 1px solid var(--color-border);
8774 font-size: 0.78rem;
8775}
8776
8777.mermaid-label {
8778 font-weight: 600;
8779 color: var(--color-text-secondary);
8780 font-size: 0.75rem;
8781 text-transform: uppercase;
8782 letter-spacing: 0.04em;
8783 flex: 1;
8784}
8785
8786.mermaid-btn {
8787 padding: 2px 8px;
8788 font-size: 0.78rem;
8789 border-radius: var(--radius-sm);
8790 border: 1px solid var(--color-border);
8791 background: var(--color-surface-raised, var(--color-surface));
8792 color: var(--color-text);
8793 cursor: pointer;
8794 line-height: 1.4;
8795}
8796.mermaid-btn:hover { background: var(--color-teal); color: #fff; border-color: var(--color-teal); }
8797.mermaid-btn-danger:hover { background: var(--color-danger, #d94a4a); border-color: var(--color-danger, #d94a4a); }
8798
8799.mermaid-preview {
8800 padding: var(--space-md);
8801 display: flex;
8802 justify-content: center;
8803 min-height: 60px;
8804 overflow-x: auto;
8805}
8806.mermaid-preview svg { max-width: 100%; height: auto; }
8807.mermaid-preview-loading { opacity: 0.5; }
8808.mermaid-preview-error { padding: var(--space-sm); }
8809
8810.mermaid-error {
8811 background: color-mix(in oklch, var(--color-danger, #d94a4a) 10%, transparent);
8812 border: 1px solid var(--color-danger, #d94a4a);
8813 border-radius: var(--radius-sm);
8814 padding: var(--space-sm);
8815 color: var(--color-danger, #d94a4a);
8816 font-size: 0.85rem;
8817 width: 100%;
8818}
8819.mermaid-error pre { margin: var(--space-xs) 0 0; font-size: 0.78rem; white-space: pre-wrap; overflow-wrap: anywhere; }
8820
8821.mermaid-editor-wrap {
8822 border-top: 1px solid var(--color-border);
8823}
8824.mermaid-code-input {
8825 width: 100%;
8826 box-sizing: border-box;
8827 padding: var(--space-sm);
8828 font-family: monospace;
8829 font-size: 0.85rem;
8830 background: var(--color-surface);
8831 color: var(--color-text);
8832 border: none;
8833 outline: none;
8834 resize: vertical;
8835 min-height: 120px;
8836 line-height: 1.5;
8837}
8838.mermaid-code-input:focus { background: var(--color-surface-raised, var(--color-surface)); }
8839
8840/* Dark mode: invert mermaid SVG text colours if using default theme */
8841[data-theme="dark"] .mermaid-preview svg text { fill: var(--color-text) !important; }
8842
8843/* Version badge — z-index must exceed sticky cells (max 5) and sheet UI
8844 but stay below modals/dialogs (1000+). */
8845.version-badge {
8846 position: fixed;
8847 bottom: 0.5rem;
8848 right: 0.75rem;
8849 font-size: 0.65rem;
8850 font-family: ui-monospace, 'SF Mono', monospace;
8851 color: var(--color-text-faint, #808080);
8852 opacity: 0.5;
8853 pointer-events: none;
8854 z-index: var(--z-float);
8855 user-select: none;
8856}
8857
8858/* Apps with a bottom UI strip (sheets tab strip, etc.) push the version
8859 badge above that strip so it doesn't overlap. */
8860body:has(.sheets-app) .version-badge {
8861 bottom: 3rem;
8862}
8863
8864/* ── AI Chat Sidebar ─────────────────────────────────────────────────── */
8865
8866.ai-chat-sidebar {
8867 position: relative;
8868 width: 400px;
8869 border-left: 1px solid var(--color-border);
8870 background: var(--color-surface);
8871 display: flex;
8872 flex-direction: column;
8873 overflow: hidden;
8874 flex-shrink: 0;
8875}
8876
8877/* --- Position modes: side (default) / bottom / popup --- */
8878
8879.ai-chat-sidebar[data-pos="bottom"] {
8880 position: fixed;
8881 left: 0;
8882 right: 0;
8883 bottom: 0;
8884 top: auto;
8885 width: 100%;
8886 height: 360px;
8887 min-height: 200px;
8888 max-height: 85vh;
8889 border-left: none;
8890 border-top: 1px solid var(--color-border);
8891 box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
8892 z-index: var(--z-tooltip);
8893 resize: vertical;
8894}
8895
8896[data-theme="dark"] .ai-chat-sidebar[data-pos="bottom"] {
8897 box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
8898}
8899
8900.ai-chat-sidebar[data-pos="popup"] {
8901 position: fixed;
8902 right: 24px;
8903 bottom: 24px;
8904 top: auto;
8905 left: auto;
8906 width: 440px;
8907 height: min(640px, calc(100vh - 48px));
8908 min-width: 320px;
8909 min-height: 320px;
8910 max-width: calc(100vw - 48px);
8911 max-height: calc(100vh - 48px);
8912 border: 1px solid var(--color-border);
8913 border-radius: var(--radius-md);
8914 box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
8915 z-index: var(--z-tooltip);
8916 resize: both;
8917}
8918
8919[data-theme="dark"] .ai-chat-sidebar[data-pos="popup"] {
8920 box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
8921}
8922
8923.ai-chat-position-btn {
8924 position: relative;
8925}
8926
8927.ai-chat-header {
8928 display: flex;
8929 align-items: center;
8930 justify-content: space-between;
8931 padding: var(--space-sm) var(--space-md);
8932 border-bottom: 1px solid var(--color-border);
8933 gap: var(--space-sm);
8934}
8935
8936.ai-chat-header-left {
8937 display: flex;
8938 align-items: center;
8939 gap: var(--space-sm);
8940 min-width: 0;
8941}
8942
8943.ai-chat-title {
8944 font-size: 0.875rem;
8945 font-weight: 600;
8946 font-family: var(--font-body);
8947 color: var(--color-text);
8948 white-space: nowrap;
8949}
8950
8951.ai-chat-model-badge {
8952 font-size: 0.7rem;
8953 color: var(--color-text-muted);
8954 background: var(--color-hover);
8955 padding: 1px 6px;
8956 border-radius: var(--radius-sm);
8957 white-space: nowrap;
8958 overflow: hidden;
8959 text-overflow: ellipsis;
8960 max-width: 120px;
8961}
8962
8963.ai-chat-header-actions {
8964 display: flex;
8965 align-items: center;
8966 gap: 2px;
8967}
8968
8969.ai-chat-close {
8970 font-size: 1.25rem;
8971 color: var(--color-text-muted);
8972}
8973
8974/* Settings panel */
8975
8976.ai-chat-settings {
8977 padding: var(--space-sm) var(--space-md);
8978 border-bottom: 1px solid var(--color-border);
8979 background: var(--color-bg);
8980 display: flex;
8981 flex-direction: column;
8982 gap: var(--space-sm);
8983}
8984
8985.ai-chat-settings-field {
8986 display: flex;
8987 flex-direction: column;
8988 gap: 2px;
8989}
8990
8991.ai-chat-settings-field label {
8992 font-size: 0.75rem;
8993 font-weight: 500;
8994 color: var(--color-text-muted);
8995}
8996
8997.ai-chat-hint {
8998 font-weight: 400;
8999 opacity: 0.7;
9000}
9001
9002.ai-chat-settings-field input[type="text"],
9003.ai-chat-settings-field input[type="password"],
9004.ai-chat-settings-field select {
9005 font-size: 0.8125rem;
9006 padding: 4px 8px;
9007 border: 1px solid var(--color-border);
9008 border-radius: var(--radius-sm);
9009 background: var(--color-surface);
9010 color: var(--color-text);
9011 font-family: ui-monospace, 'SF Mono', monospace;
9012}
9013
9014.ai-chat-settings-field select {
9015 font-family: var(--font-body);
9016}
9017
9018.ai-chat-model-custom {
9019 margin-top: 4px;
9020}
9021
9022/* #675 — endpoint validation helper + error text. */
9023.ai-chat-endpoint-hint {
9024 margin: 2px 0 0;
9025 font-size: 0.7rem;
9026 color: var(--color-text-faint);
9027 line-height: 1.3;
9028}
9029.ai-chat-endpoint-hint code {
9030 font-family: ui-monospace, 'SF Mono', monospace;
9031 font-size: 0.95em;
9032 padding: 0 3px;
9033 background: var(--color-surface-alt, var(--color-surface));
9034 border-radius: 2px;
9035}
9036.ai-chat-endpoint-error {
9037 margin: 2px 0 0;
9038 font-size: 0.7rem;
9039 color: var(--color-danger, #d32f2f);
9040 line-height: 1.3;
9041}
9042.ai-chat-settings-field input[aria-invalid="true"] {
9043 border-color: var(--color-danger, #d32f2f);
9044}
9045
9046.ai-chat-context-row {
9047 flex-direction: row;
9048 align-items: center;
9049}
9050
9051.ai-chat-toggle-label {
9052 display: flex;
9053 align-items: center;
9054 gap: var(--space-xs);
9055 font-size: 0.8125rem;
9056 color: var(--color-text);
9057 cursor: pointer;
9058}
9059
9060.ai-chat-toggle-label input[type="checkbox"] {
9061 accent-color: var(--color-accent);
9062}
9063
9064.ai-chat-advanced {
9065 margin-top: var(--space-xs);
9066 font-size: 0.8125rem;
9067 color: var(--color-text-muted);
9068}
9069
9070.ai-chat-advanced summary {
9071 cursor: pointer;
9072 user-select: none;
9073}
9074
9075.ai-chat-advanced .ai-chat-settings-field {
9076 margin-top: var(--space-xs);
9077}
9078
9079/* Message area */
9080
9081.ai-chat-messages {
9082 flex: 1;
9083 overflow-y: auto;
9084 padding: var(--space-sm);
9085 display: flex;
9086 flex-direction: column;
9087 gap: var(--space-sm);
9088}
9089
9090.ai-chat-empty {
9091 display: flex;
9092 flex-direction: column;
9093 align-items: center;
9094 justify-content: center;
9095 flex: 1;
9096 text-align: center;
9097 gap: var(--space-xs);
9098 padding: var(--space-xl);
9099}
9100
9101.ai-chat-empty-icon {
9102 font-size: 2rem;
9103 opacity: 0.5;
9104}
9105
9106.ai-chat-empty-text {
9107 font-size: 0.9375rem;
9108 font-weight: 500;
9109 color: var(--color-text);
9110}
9111
9112.ai-chat-empty-hint {
9113 font-size: 0.8125rem;
9114 color: var(--color-text-muted);
9115 max-width: 240px;
9116}
9117
9118/* Chat bubbles */
9119
9120.ai-chat-bubble {
9121 padding: var(--space-sm) var(--space-md);
9122 border-radius: var(--radius-md);
9123 font-size: 0.875rem;
9124 line-height: 1.55;
9125 word-break: break-word;
9126 max-width: 100%;
9127}
9128
9129.ai-chat-bubble--user {
9130 background: var(--color-accent);
9131 color: white;
9132 align-self: flex-end;
9133 border-bottom-right-radius: 4px;
9134 max-width: 85%;
9135}
9136
9137.ai-chat-bubble--assistant {
9138 background: var(--color-hover);
9139 color: var(--color-text);
9140 align-self: flex-start;
9141 border-bottom-left-radius: 4px;
9142}
9143
9144.ai-chat-thinking {
9145 display: inline-flex;
9146 align-items: center;
9147 gap: 4px;
9148 padding: 2px 0;
9149}
9150
9151.ai-thinking-dot {
9152 width: 6px;
9153 height: 6px;
9154 border-radius: 50%;
9155 background: var(--color-text-muted);
9156 animation: ai-bounce 1.4s ease-in-out infinite;
9157}
9158
9159.ai-thinking-dot:nth-child(2) {
9160 animation-delay: 0.16s;
9161}
9162
9163.ai-thinking-dot:nth-child(3) {
9164 animation-delay: 0.32s;
9165}
9166
9167@keyframes ai-bounce {
9168 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
9169 40% { transform: scale(1); opacity: 1; }
9170}
9171
9172/* Code blocks in AI responses */
9173
9174.ai-code-block {
9175 background: var(--color-bg);
9176 border: 1px solid var(--color-border);
9177 border-radius: var(--radius-sm);
9178 padding: var(--space-sm);
9179 margin: var(--space-xs) 0;
9180 overflow-x: auto;
9181 font-family: ui-monospace, 'SF Mono', monospace;
9182 font-size: 0.8125rem;
9183 line-height: 1.4;
9184 white-space: pre-wrap;
9185}
9186
9187.ai-inline-code {
9188 background: var(--color-bg);
9189 border: 1px solid var(--color-border);
9190 border-radius: 3px;
9191 padding: 1px 4px;
9192 font-family: ui-monospace, 'SF Mono', monospace;
9193 font-size: 0.85em;
9194}
9195
9196/* Headers in AI responses */
9197
9198.ai-chat-bubble .ai-h {
9199 margin: var(--space-sm) 0 var(--space-xs);
9200 line-height: 1.3;
9201}
9202
9203.ai-chat-bubble h1.ai-h { font-size: 1.1rem; }
9204.ai-chat-bubble h2.ai-h { font-size: 1rem; }
9205.ai-chat-bubble h3.ai-h { font-size: 0.9375rem; }
9206.ai-chat-bubble h4.ai-h,
9207.ai-chat-bubble h5.ai-h,
9208.ai-chat-bubble h6.ai-h { font-size: 0.875rem; }
9209
9210/* Tables in AI responses */
9211
9212.ai-table {
9213 border-collapse: collapse;
9214 width: 100%;
9215 margin: var(--space-xs) 0;
9216 font-size: 0.8125rem;
9217}
9218
9219.ai-table th,
9220.ai-table td {
9221 border: 1px solid var(--color-border);
9222 padding: 3px 6px;
9223 text-align: left;
9224}
9225
9226.ai-table th {
9227 background: var(--color-surface-alt);
9228 font-weight: 600;
9229}
9230
9231.ai-table tr:nth-child(even) td {
9232 background: var(--color-bg);
9233}
9234
9235/* Lists in AI responses */
9236
9237.ai-list {
9238 margin: var(--space-xs) 0;
9239 padding-left: 1.25em;
9240}
9241
9242.ai-list li {
9243 margin-bottom: 2px;
9244}
9245
9246/* Horizontal rule in AI responses */
9247
9248.ai-hr {
9249 border: none;
9250 border-top: 1px solid var(--color-border);
9251 margin: var(--space-sm) 0;
9252}
9253
9254/* Links in AI responses */
9255
9256.ai-chat-bubble a {
9257 color: var(--color-accent);
9258 text-decoration: underline;
9259 text-underline-offset: 2px;
9260}
9261
9262.ai-chat-bubble a:hover {
9263 color: var(--color-accent-hover);
9264}
9265
9266/* Input area */
9267
9268.ai-chat-input-area {
9269 padding: var(--space-sm) var(--space-md);
9270 border-top: 1px solid var(--color-border);
9271 background: var(--color-surface);
9272}
9273
9274.ai-chat-input-row {
9275 display: flex;
9276 align-items: flex-end;
9277 gap: var(--space-xs);
9278}
9279
9280.ai-chat-input {
9281 flex: 1;
9282 resize: none;
9283 border: 1px solid var(--color-border);
9284 border-radius: var(--radius-md);
9285 padding: 8px 12px;
9286 font-size: 0.875rem;
9287 font-family: var(--font-body);
9288 line-height: 1.4;
9289 background: var(--color-bg);
9290 color: var(--color-text);
9291 min-height: 36px;
9292 max-height: 120px;
9293 transition: border-color var(--transition-fast);
9294}
9295
9296.ai-chat-input:focus {
9297 border-color: var(--color-accent);
9298}
9299
9300.ai-chat-input::placeholder {
9301 color: var(--color-text-muted);
9302}
9303
9304.ai-chat-send,
9305.ai-chat-stop {
9306 flex-shrink: 0;
9307 width: 36px;
9308 height: 36px;
9309 border: none;
9310 border-radius: var(--radius-md);
9311 cursor: pointer;
9312 display: flex;
9313 align-items: center;
9314 justify-content: center;
9315 transition: background var(--transition-fast), opacity var(--transition-fast);
9316}
9317
9318.ai-chat-send {
9319 background: var(--color-accent);
9320 color: white;
9321}
9322
9323.ai-chat-send:hover {
9324 opacity: 0.85;
9325}
9326
9327.ai-chat-send:disabled {
9328 opacity: 0.4;
9329 cursor: default;
9330}
9331
9332.ai-chat-stop {
9333 background: var(--color-error, #f14d4c);
9334 color: white;
9335 font-size: 1rem;
9336}
9337
9338.ai-chat-stop:hover {
9339 opacity: 0.85;
9340}
9341
9342/* AI action cards */
9343
9344.ai-action-card {
9345 margin: var(--space-xs) var(--space-md);
9346 padding: var(--space-sm);
9347 border: 1px solid var(--color-border);
9348 border-radius: var(--radius-md);
9349 background: var(--color-surface);
9350 font-size: 0.8125rem;
9351}
9352
9353.ai-action-card-desc {
9354 display: flex;
9355 align-items: center;
9356 gap: var(--space-xs);
9357 color: var(--color-text);
9358 margin-bottom: var(--space-xs);
9359}
9360
9361.ai-action-card-desc .tb-icon {
9362 flex-shrink: 0;
9363 color: var(--color-accent);
9364}
9365
9366.ai-action-card-buttons {
9367 display: flex;
9368 gap: var(--space-xs);
9369}
9370
9371.ai-action-btn {
9372 padding: 3px 10px;
9373 border: 1px solid var(--color-border);
9374 border-radius: var(--radius-sm);
9375 background: var(--color-bg);
9376 color: var(--color-text);
9377 font-size: 0.75rem;
9378 cursor: pointer;
9379 transition: background var(--transition-fast), border-color var(--transition-fast);
9380}
9381
9382.ai-action-btn:hover {
9383 border-color: var(--color-accent);
9384}
9385
9386.ai-action-btn--apply {
9387 background: var(--color-accent);
9388 color: white;
9389 border-color: var(--color-accent);
9390}
9391
9392.ai-action-btn--apply:hover {
9393 opacity: 0.85;
9394}
9395
9396.ai-action-btn--suggest {
9397 background: #7bc27e;
9398 background: oklch(0.75 0.12 145);
9399 color: white;
9400 border-color: #7bc27e;
9401 border-color: oklch(0.75 0.12 145);
9402}
9403
9404.ai-action-btn--suggest:hover {
9405 opacity: 0.85;
9406}
9407
9408.ai-action-btn--dismiss {
9409 color: var(--color-text-muted);
9410}
9411
9412.ai-action-card-status {
9413 font-size: 0.75rem;
9414 color: var(--color-text-muted);
9415 font-style: italic;
9416}
9417
9418.ai-action-card--applied {
9419 border-color: var(--color-accent);
9420 opacity: 0.7;
9421}
9422
9423.ai-action-card--suggested {
9424 border-color: #7bc27e;
9425 border-color: oklch(0.75 0.12 145);
9426 opacity: 0.7;
9427}
9428
9429.ai-action-card--dismissed {
9430 opacity: 0.4;
9431}
9432
9433/* AI chat onboarding banner (shown when no endpoint is configured) */
9434.ai-chat-onboarding {
9435 margin: var(--space-sm) var(--space-md);
9436 padding: var(--space-sm) var(--space-md);
9437 border: 1px solid var(--color-accent);
9438 border-radius: var(--radius-md);
9439 background: color-mix(in oklch, var(--color-accent) 8%, var(--color-surface));
9440 font-size: 0.8125rem;
9441 color: var(--color-text);
9442 display: flex;
9443 flex-direction: column;
9444 gap: var(--space-xs);
9445}
9446
9447.ai-chat-onboarding-title {
9448 font-weight: 600;
9449 font-size: 0.875rem;
9450}
9451
9452.ai-chat-onboarding-body {
9453 color: var(--color-text-muted);
9454 line-height: 1.4;
9455}
9456
9457.ai-chat-onboarding-cta {
9458 align-self: flex-start;
9459 padding: 4px 12px;
9460 border: 1px solid var(--color-accent);
9461 border-radius: var(--radius-sm);
9462 background: var(--color-accent);
9463 color: white;
9464 font-size: 0.75rem;
9465 cursor: pointer;
9466 transition: opacity var(--transition-fast);
9467}
9468
9469.ai-chat-onboarding-cta:hover {
9470 opacity: 0.85;
9471}
9472
9473/* AI chat parse-error note (non-fatal action parse failures) */
9474.ai-chat-parse-errors {
9475 margin: var(--space-xs) var(--space-md);
9476 padding: var(--space-xs) var(--space-sm);
9477 border: 1px solid var(--color-warning, #d97706);
9478 border-left-width: 3px;
9479 border-radius: var(--radius-sm);
9480 background: color-mix(in oklch, var(--color-warning, #d97706) 6%, var(--color-surface));
9481 color: var(--color-text);
9482 font-size: 0.75rem;
9483}
9484
9485.ai-chat-parse-errors-title {
9486 font-weight: 600;
9487 margin-bottom: 2px;
9488}
9489
9490.ai-chat-parse-errors ul {
9491 margin: 0;
9492 padding-left: 1.1rem;
9493 color: var(--color-text-muted);
9494}
9495
9496/* AI chat error bubble */
9497.ai-chat-bubble--error {
9498 border: 1px solid var(--color-error, #f14d4c);
9499 background: color-mix(in oklch, var(--color-error, #f14d4c) 6%, var(--color-surface));
9500}
9501
9502.ai-chat-error {
9503 color: var(--color-error, #f14d4c);
9504 font-size: 0.8125rem;
9505}
9506
9507.zen-mode .ai-chat-sidebar {
9508 display: none !important;
9509}
9510
9511@media (max-width: 768px) {
9512 .ai-chat-sidebar {
9513 position: fixed;
9514 top: 0;
9515 right: 0;
9516 bottom: 0;
9517 width: 100%;
9518 z-index: var(--z-tooltip);
9519 }
9520}
9521
9522/* ── Wireframe Component Palette ──────────────────────────────── */
9523
9524.wireframe-dropdown { position: relative; }
9525.wireframe-menu {
9526 position: absolute;
9527 top: 100%;
9528 left: 0;
9529 z-index: 50;
9530 background: var(--color-surface);
9531 border: 1px solid var(--color-border);
9532 border-radius: var(--radius-sm, 4px);
9533 box-shadow: 0 4px 12px rgba(0,0,0,0.1);
9534 padding: 4px;
9535 min-width: 140px;
9536 max-height: 320px;
9537 overflow-y: auto;
9538}
9539.wireframe-category {
9540 font-size: 0.68rem;
9541 font-weight: 600;
9542 text-transform: uppercase;
9543 letter-spacing: 0.05em;
9544 color: var(--color-text-faint);
9545 padding: 6px 8px 2px;
9546}
9547.wireframe-item {
9548 display: block;
9549 width: 100%;
9550 text-align: left;
9551 border: none;
9552 background: transparent;
9553 color: var(--color-text);
9554 font-size: 0.78rem;
9555 padding: 4px 8px;
9556 border-radius: 3px;
9557 cursor: pointer;
9558}
9559.wireframe-item:hover { background: var(--color-surface-alt); }
9560
9561/* ── Modal dialog (promise-based prompt/confirm) — #109 ─────────── */
9562
9563.modal-dialog-backdrop {
9564 position: fixed;
9565 inset: 0;
9566 background: rgba(0, 0, 0, 0.4);
9567 display: flex;
9568 align-items: center;
9569 justify-content: center;
9570 z-index: var(--z-modal, 10000);
9571 animation: modal-fade-in 0.12s ease-out;
9572}
9573
9574[data-theme="dark"] .modal-dialog-backdrop {
9575 background: rgba(0, 0, 0, 0.6);
9576}
9577
9578@keyframes modal-fade-in {
9579 from { opacity: 0; }
9580 to { opacity: 1; }
9581}
9582
9583.modal-dialog {
9584 background: var(--color-surface);
9585 color: var(--color-text);
9586 border: 1px solid var(--color-border);
9587 border-radius: var(--radius-lg);
9588 box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
9589 padding: var(--space-lg);
9590 min-width: 320px;
9591 max-width: 480px;
9592 width: calc(100% - var(--space-xl));
9593 display: flex;
9594 flex-direction: column;
9595 gap: var(--space-md);
9596 animation: modal-dialog-in 0.15s ease-out;
9597}
9598
9599@keyframes modal-dialog-in {
9600 from { transform: translateY(-8px); opacity: 0; }
9601 to { transform: translateY(0); opacity: 1; }
9602}
9603
9604.modal-dialog-title {
9605 font-size: 1rem;
9606 font-weight: 600;
9607 line-height: 1.3;
9608}
9609
9610.modal-dialog-message {
9611 color: var(--color-text-muted);
9612 font-size: 0.875rem;
9613 line-height: 1.4;
9614 white-space: pre-wrap;
9615}
9616
9617.modal-dialog-input {
9618 width: 100%;
9619 padding: var(--space-sm);
9620 border: 1px solid var(--color-border);
9621 border-radius: var(--radius-md);
9622 background: var(--color-bg);
9623 color: var(--color-text);
9624 font-size: 0.875rem;
9625 font-family: inherit;
9626}
9627
9628.modal-dialog-input:focus {
9629 outline: none;
9630 border-color: var(--color-accent);
9631 box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-accent) 30%, transparent);
9632}
9633
9634.modal-dialog-footer {
9635 display: flex;
9636 justify-content: flex-end;
9637 gap: var(--space-sm);
9638}
9639
9640.modal-dialog-ok,
9641.modal-dialog-cancel {
9642 padding: 6px 14px;
9643 border: 1px solid var(--color-border);
9644 border-radius: var(--radius-md);
9645 background: var(--color-bg);
9646 color: var(--color-text);
9647 font-size: 0.8125rem;
9648 font-family: inherit;
9649 cursor: pointer;
9650 transition: background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
9651}
9652
9653.modal-dialog-cancel:hover {
9654 background: var(--color-surface-alt);
9655}
9656
9657.modal-dialog-ok {
9658 background: var(--color-accent);
9659 color: white;
9660 border-color: var(--color-accent);
9661}
9662
9663.modal-dialog-ok:hover {
9664 opacity: 0.88;
9665}
9666
9667.modal-dialog-ok--destructive {
9668 background: var(--color-error, #f14d4c);
9669 border-color: var(--color-error, #f14d4c);
9670}
9671
9672.modal-dialog-ok:focus-visible,
9673.modal-dialog-cancel:focus-visible {
9674 outline: 2px solid var(--color-accent);
9675 outline-offset: 2px;
9676}
9677
9678/* ── Electron traffic-light padding (landing page, supplements rules at line ~1850) ── */
9679.is-electron .landing-header .brand {
9680 padding-left: 88px;
9681}
9682
9683/* ── Slides Editor ──────────────────────────────────────────────────── */
9684
9685.slides-app {
9686 display: flex;
9687 flex-direction: column;
9688 height: 100vh;
9689 overflow: hidden;
9690}
9691
9692.slides-main {
9693 display: flex;
9694 flex: 1;
9695 overflow: hidden;
9696}
9697
9698/* Left: thumbnail panel */
9699.slides-panel {
9700 width: 200px;
9701 flex-shrink: 0;
9702 border-right: 1px solid var(--color-border);
9703 background: var(--color-surface);
9704 display: flex;
9705 flex-direction: column;
9706 overflow: hidden;
9707}
9708
9709.slides-thumbnail-list {
9710 flex: 1;
9711 overflow-y: auto;
9712 padding: var(--space-sm);
9713 display: flex;
9714 flex-direction: column;
9715 gap: var(--space-xs);
9716}
9717
9718.slides-thumbnail {
9719 aspect-ratio: 16/9;
9720 border: 2px solid var(--color-border);
9721 border-radius: var(--radius-sm);
9722 background: var(--color-bg);
9723 cursor: pointer;
9724 display: flex;
9725 align-items: center;
9726 justify-content: center;
9727 font-size: 0.65rem;
9728 color: var(--color-text-muted);
9729 transition: border-color var(--transition-fast);
9730 position: relative;
9731 overflow: hidden;
9732}
9733
9734.slides-thumbnail:hover {
9735 border-color: var(--color-border-strong);
9736}
9737
9738.slides-thumbnail.active {
9739 border-color: var(--color-teal);
9740}
9741
9742.slides-thumbnail-number {
9743 position: absolute;
9744 top: 2px;
9745 left: 4px;
9746 font-size: 0.55rem;
9747 color: var(--color-text-faint);
9748}
9749
9750.slides-add-btn {
9751 margin: var(--space-sm);
9752 padding: var(--space-xs) var(--space-sm);
9753 border: 1px dashed var(--color-border-strong);
9754 border-radius: var(--radius-sm);
9755 background: transparent;
9756 color: var(--color-text-muted);
9757 cursor: pointer;
9758 font-size: 0.75rem;
9759 transition: background var(--transition-fast);
9760}
9761
9762.slides-add-btn:hover {
9763 background: var(--color-hover);
9764}
9765
9766/* Center: canvas area */
9767.slides-canvas-area {
9768 flex: 1;
9769 display: flex;
9770 flex-direction: column;
9771 overflow: hidden;
9772}
9773
9774.slides-toolbar {
9775 display: flex;
9776 align-items: center;
9777 gap: var(--space-sm);
9778 padding: var(--space-xs) var(--space-sm);
9779 border-bottom: 1px solid var(--color-border);
9780 background: var(--color-surface);
9781 flex-wrap: wrap;
9782}
9783
9784.slides-layout-select,
9785.slides-theme-select,
9786.slides-transition-select {
9787 padding: 3px 6px;
9788 border: 1px solid var(--color-border);
9789 border-radius: var(--radius-sm);
9790 background: var(--color-bg);
9791 color: var(--color-text);
9792 font-size: 0.75rem;
9793}
9794
9795.slides-canvas-wrapper {
9796 flex: 1;
9797 display: flex;
9798 align-items: center;
9799 justify-content: center;
9800 background: var(--color-surface-alt);
9801 padding: var(--space-lg);
9802 overflow: auto;
9803}
9804
9805.slides-canvas {
9806 width: 960px;
9807 height: 540px;
9808 max-width: 100%;
9809 background: white;
9810 border-radius: var(--radius-md);
9811 box-shadow: var(--shadow-lg);
9812 position: relative;
9813 overflow: hidden;
9814}
9815
9816[data-theme="dark"] .slides-canvas {
9817 background: #24211c;
9818 background: oklch(0.25 0.01 75);
9819}
9820
9821/* Right: notes panel */
9822.slides-notes-panel {
9823 width: 240px;
9824 flex-shrink: 0;
9825 border-left: 1px solid var(--color-border);
9826 background: var(--color-surface);
9827 display: flex;
9828 flex-direction: column;
9829 padding: var(--space-sm);
9830}
9831
9832.slides-notes-title {
9833 font-size: 0.75rem;
9834 font-weight: 600;
9835 color: var(--color-text-muted);
9836 text-transform: uppercase;
9837 letter-spacing: 0.05em;
9838 margin-bottom: var(--space-xs);
9839}
9840
9841.slides-notes-input {
9842 flex: 1;
9843 resize: none;
9844 border: 1px solid var(--color-border);
9845 border-radius: var(--radius-sm);
9846 padding: var(--space-xs);
9847 font-family: var(--font-body);
9848 font-size: 0.8rem;
9849 color: var(--color-text);
9850 background: var(--color-bg);
9851}
9852
9853/* Slide elements */
9854.slide-element {
9855 position: absolute;
9856 cursor: move;
9857 user-select: none;
9858}
9859
9860.slide-element.selected {
9861 outline: 2px solid var(--color-teal);
9862 outline-offset: 1px;
9863}
9864
9865.slide-element-text {
9866 min-width: 40px;
9867 min-height: 20px;
9868 padding: 4px 8px;
9869}
9870
9871.slide-element-text[contenteditable="true"] {
9872 cursor: text;
9873 outline: 1px dashed var(--color-border-strong);
9874}
9875
9876/* ── Presenter Overlay ──────────────────────────────────────────────── */
9877
9878.presenter-overlay {
9879 position: fixed;
9880 inset: 0;
9881 z-index: var(--z-modal);
9882 background: #030303;
9883 background: oklch(0.10 0 0);
9884 color: #dedede;
9885 color: oklch(0.90 0 0);
9886 display: flex;
9887}
9888
9889.presenter-current {
9890 flex: 1;
9891 display: flex;
9892 align-items: center;
9893 justify-content: center;
9894 padding: var(--space-lg);
9895}
9896
9897.presenter-current .slides-canvas {
9898 width: 100%;
9899 height: 100%;
9900 max-width: none;
9901}
9902
9903.presenter-sidebar {
9904 width: 320px;
9905 display: flex;
9906 flex-direction: column;
9907 border-left: 1px solid #2e2e2e;
9908 border-left: 1px solid oklch(0.30 0 0);
9909 background: #090909;
9910 background: oklch(0.14 0 0);
9911}
9912
9913.presenter-next {
9914 padding: var(--space-sm);
9915 border-bottom: 1px solid #2e2e2e;
9916 border-bottom: 1px solid oklch(0.30 0 0);
9917}
9918
9919.presenter-next h4 {
9920 font-size: 0.7rem;
9921 text-transform: uppercase;
9922 color: #808080;
9923 color: oklch(0.60 0 0);
9924 margin-bottom: var(--space-xs);
9925}
9926
9927.presenter-next-preview {
9928 aspect-ratio: 16/9;
9929 background: #161616;
9930 background: oklch(0.20 0 0);
9931 border-radius: var(--radius-sm);
9932 overflow: hidden;
9933}
9934
9935.presenter-notes {
9936 flex: 1;
9937 padding: var(--space-sm);
9938 overflow-y: auto;
9939 font-size: 0.85rem;
9940 line-height: 1.5;
9941 color: #bebebe;
9942 color: oklch(0.80 0 0);
9943}
9944
9945.presenter-controls {
9946 display: flex;
9947 align-items: center;
9948 gap: var(--space-sm);
9949 padding: var(--space-sm);
9950 border-top: 1px solid #2e2e2e;
9951 border-top: 1px solid oklch(0.30 0 0);
9952}
9953
9954.presenter-timer {
9955 font-family: var(--font-mono);
9956 font-size: 1.2rem;
9957 color: #9e9e9e;
9958 color: oklch(0.70 0 0);
9959}
9960
9961.presenter-progress {
9962 font-size: 0.8rem;
9963 color: #808080;
9964 color: oklch(0.60 0 0);
9965 margin-left: auto;
9966}
9967
9968/* ── Diagrams / Whiteboard ──────────────────────────────────────────── */
9969
9970.diagrams-app {
9971 display: flex;
9972 flex-direction: column;
9973 height: 100vh;
9974 overflow: hidden;
9975}
9976
9977.diagrams-main {
9978 flex: 1;
9979 display: flex;
9980 position: relative;
9981 overflow: hidden;
9982}
9983
9984.diagrams-toolbar {
9985 position: absolute;
9986 top: var(--space-sm);
9987 left: 50%;
9988 transform: translateX(-50%);
9989 display: flex;
9990 align-items: center;
9991 gap: 2px;
9992 padding: 4px 8px;
9993 background: var(--color-surface);
9994 border: 1px solid var(--color-border);
9995 border-radius: var(--radius-lg);
9996 box-shadow: var(--shadow-md);
9997 z-index: var(--z-component);
9998}
9999
10000.diagrams-tool.active {
10001 background: var(--color-btn-active-bg);
10002 color: var(--color-accent);
10003}
10004
10005.diagrams-zoom-label {
10006 font-size: 0.7rem;
10007 font-family: var(--font-mono);
10008 color: var(--color-text-muted);
10009 min-width: 3em;
10010 text-align: center;
10011}
10012
10013.diagrams-canvas-area {
10014 flex: 1;
10015 overflow: hidden;
10016 cursor: crosshair;
10017}
10018
10019.diagrams-canvas {
10020 width: 100%;
10021 height: 100%;
10022 display: block;
10023}
10024
10025.diagrams-grid {
10026 pointer-events: none;
10027}
10028
10029.diagrams-layer {
10030 pointer-events: all;
10031}
10032
10033/* Properties panel */
10034.diagrams-props-title {
10035 font-size: 0.7rem;
10036 text-transform: uppercase;
10037 letter-spacing: 0.05em;
10038 color: var(--color-text-muted);
10039 margin-bottom: var(--space-sm);
10040}
10041
10042.diagrams-prop-label {
10043 display: block;
10044 font-size: 0.75rem;
10045 color: var(--color-text-muted);
10046 margin-bottom: var(--space-xs);
10047}
10048
10049.diagrams-prop-input {
10050 width: 100%;
10051 padding: 3px 6px;
10052 border: 1px solid var(--color-border);
10053 border-radius: var(--radius-sm);
10054 background: var(--color-bg);
10055 color: var(--color-text);
10056 font-size: 0.8rem;
10057 margin-top: 2px;
10058}
10059
10060.diagram-shape.selected rect,
10061.diagram-shape.selected ellipse,
10062.diagram-shape.selected polygon,
10063.diagram-shape.selected path {
10064 stroke: var(--color-teal);
10065}
10066
10067.resize-handle {
10068 fill: white;
10069 stroke: var(--color-teal);
10070 stroke-width: 1.5;
10071 cursor: pointer;
10072}
10073
10074.marquee-rect {
10075 fill: var(--color-teal);
10076 fill-opacity: 0.08;
10077 stroke: var(--color-teal);
10078 stroke-width: 1;
10079 stroke-dasharray: 4 3;
10080 pointer-events: none;
10081}
10082
10083.creation-preview {
10084 pointer-events: none;
10085}
10086.creation-preview rect,
10087.creation-preview ellipse,
10088.creation-preview polygon {
10089 fill: var(--color-teal);
10090 fill-opacity: 0.06;
10091 stroke: var(--color-teal);
10092 stroke-width: 1.5;
10093 stroke-dasharray: 6 3;
10094}
10095
10096.arrow-preview {
10097 stroke: var(--color-text-muted);
10098 stroke-width: 1.5;
10099 stroke-dasharray: 6 3;
10100 pointer-events: none;
10101}
10102
10103.arrow-hover-target rect,
10104.arrow-hover-target ellipse,
10105.arrow-hover-target polygon {
10106 stroke: var(--color-teal);
10107 stroke-dasharray: 4 2;
10108}
10109
10110.rotation-handle {
10111 fill: white;
10112 stroke: var(--color-primary);
10113 stroke-width: 1.5;
10114 cursor: grab;
10115}
10116.rotation-handle:active { cursor: grabbing; }
10117
10118.rotation-line {
10119 pointer-events: none;
10120}
10121
10122.freehand-preview {
10123 pointer-events: none;
10124}
10125
10126.inline-text-edit textarea {
10127 width: 100%;
10128 height: 100%;
10129 border: none;
10130 background: transparent;
10131 resize: none;
10132 outline: none;
10133 text-align: center;
10134 color: var(--color-text);
10135 padding: 4px;
10136 box-sizing: border-box;
10137}
10138
10139.diagram-arrow {
10140 cursor: pointer;
10141}
10142
10143/* Style panel (right sidebar) */
10144.diagrams-style-panel {
10145 position: absolute;
10146 top: var(--space-sm);
10147 right: var(--space-sm);
10148 width: 220px;
10149 background: var(--color-surface);
10150 border: 1px solid var(--color-border);
10151 border-radius: var(--radius-md);
10152 box-shadow: var(--shadow-md);
10153 padding: var(--space-sm);
10154 z-index: var(--z-component);
10155}
10156
10157.diagrams-style-row {
10158 display: flex;
10159 gap: var(--space-sm);
10160 margin-bottom: var(--space-xs);
10161}
10162.diagrams-style-row label {
10163 flex: 1;
10164 display: flex;
10165 flex-direction: column;
10166 font-size: 0.7rem;
10167 color: var(--color-text-muted);
10168 gap: 2px;
10169}
10170.diagrams-style-row input[type="color"] {
10171 width: 100%;
10172 height: 24px;
10173 border: 1px solid var(--color-border);
10174 border-radius: var(--radius-sm);
10175 padding: 1px;
10176 cursor: pointer;
10177 background: none;
10178}
10179.diagrams-style-row select,
10180.diagrams-style-row input[type="number"] {
10181 width: 100%;
10182 padding: 2px 4px;
10183 border: 1px solid var(--color-border);
10184 border-radius: var(--radius-sm);
10185 background: var(--color-bg);
10186 color: var(--color-text);
10187 font-size: 0.75rem;
10188}
10189.diagrams-style-row input[type="range"] {
10190 width: 100%;
10191 accent-color: var(--color-primary);
10192}
10193
10194/* Toolbar divider for diagrams */
10195.diagrams-toolbar .toolbar-divider {
10196 width: 1px;
10197 height: 20px;
10198 background: var(--color-border);
10199 margin: 0 4px;
10200}
10201
10202/* Context menu */
10203.diagrams-context-menu {
10204 position: fixed;
10205 background: var(--color-surface);
10206 border: 1px solid var(--color-border);
10207 border-radius: var(--radius-md);
10208 box-shadow: var(--shadow-lg);
10209 padding: 4px 0;
10210 z-index: var(--z-overlay);
10211 min-width: 160px;
10212}
10213.diagrams-context-menu button {
10214 display: flex;
10215 align-items: center;
10216 gap: var(--space-sm);
10217 width: 100%;
10218 padding: 6px 12px;
10219 border: none;
10220 background: none;
10221 color: var(--color-text);
10222 font-size: 0.8rem;
10223 cursor: pointer;
10224 text-align: left;
10225}
10226.diagrams-context-menu button:hover {
10227 background: var(--color-btn-hover-bg);
10228}
10229.diagrams-context-menu .menu-divider {
10230 height: 1px;
10231 background: var(--color-border);
10232 margin: 4px 0;
10233}
10234.diagrams-context-menu .shortcut {
10235 margin-left: auto;
10236 font-size: 0.65rem;
10237 color: var(--color-text-muted);
10238}
10239
10240/* Snap guides */
10241.snap-guide {
10242 stroke: var(--color-teal);
10243 stroke-width: 0.5;
10244 stroke-dasharray: 3 2;
10245 pointer-events: none;
10246}
10247
10248/* Shortcuts dialog */
10249.diagrams-shortcuts-dialog {
10250 position: fixed;
10251 top: 50%;
10252 left: 50%;
10253 transform: translate(-50%, -50%);
10254 background: var(--color-surface);
10255 border: 1px solid var(--color-border);
10256 border-radius: var(--radius-lg);
10257 box-shadow: var(--shadow-lg);
10258 padding: var(--space-lg);
10259 z-index: var(--z-tooltip);
10260 max-width: 480px;
10261 width: 90vw;
10262 max-height: 80vh;
10263 overflow-y: auto;
10264}
10265.diagrams-shortcuts-dialog h2 {
10266 font-size: 1rem;
10267 margin-bottom: var(--space-md);
10268}
10269.diagrams-shortcuts-dialog .shortcut-row {
10270 display: flex;
10271 justify-content: space-between;
10272 padding: 4px 0;
10273 font-size: 0.8rem;
10274 border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
10275}
10276.diagrams-shortcuts-dialog kbd {
10277 background: var(--color-bg);
10278 border: 1px solid var(--color-border);
10279 border-radius: var(--radius-sm);
10280 padding: 1px 6px;
10281 font-family: var(--font-mono);
10282 font-size: 0.7rem;
10283}
10284.diagrams-shortcuts-overlay {
10285 position: fixed;
10286 inset: 0;
10287 background: rgba(0,0,0,0.3);
10288 z-index: calc(var(--z-tooltip) - 1);
10289}
10290
10291/* ── Comments Sidebar ───────────────────────────────────────────────── */
10292
10293.comments-sidebar {
10294 width: 300px;
10295 flex-shrink: 0;
10296 border-left: 1px solid var(--color-border);
10297 background: var(--color-surface);
10298 display: flex;
10299 flex-direction: column;
10300 overflow: hidden;
10301}
10302
10303.comments-header {
10304 display: flex;
10305 align-items: center;
10306 justify-content: space-between;
10307 padding: var(--space-sm) var(--space-md);
10308 border-bottom: 1px solid var(--color-border);
10309}
10310
10311.comments-header h3 {
10312 font-size: 0.8rem;
10313 font-weight: 600;
10314 text-transform: uppercase;
10315 letter-spacing: 0.04em;
10316 color: var(--color-text-muted);
10317}
10318
10319.comments-list {
10320 flex: 1;
10321 overflow-y: auto;
10322 padding: var(--space-sm);
10323}
10324
10325.comment-thread {
10326 border: 1px solid var(--color-border);
10327 border-radius: var(--radius-md);
10328 padding: var(--space-sm);
10329 margin-bottom: var(--space-sm);
10330 background: var(--color-bg);
10331 transition: border-color var(--transition-fast);
10332}
10333
10334.comment-thread:hover {
10335 border-color: var(--color-border-strong);
10336}
10337
10338.comment-thread.resolved {
10339 opacity: 0.5;
10340}
10341
10342.comment-author {
10343 font-size: 0.75rem;
10344 font-weight: 600;
10345 color: var(--color-text);
10346}
10347
10348.comment-time {
10349 font-size: 0.65rem;
10350 color: var(--color-text-faint);
10351 margin-left: var(--space-xs);
10352}
10353
10354.comment-body {
10355 font-size: 0.8rem;
10356 color: var(--color-text);
10357 margin-top: var(--space-xs);
10358 line-height: 1.45;
10359}
10360
10361.comment-reply-input {
10362 width: 100%;
10363 margin-top: var(--space-xs);
10364 padding: 4px 6px;
10365 border: 1px solid var(--color-border);
10366 border-radius: var(--radius-sm);
10367 font-size: 0.75rem;
10368 background: var(--color-surface);
10369 color: var(--color-text);
10370}
10371
10372.comment-actions {
10373 display: flex;
10374 gap: var(--space-xs);
10375 margin-top: var(--space-xs);
10376}
10377
10378.comment-actions button {
10379 font-size: 0.65rem;
10380 padding: 2px 6px;
10381 border: 1px solid var(--color-border);
10382 border-radius: var(--radius-sm);
10383 background: transparent;
10384 color: var(--color-text-muted);
10385 cursor: pointer;
10386}
10387
10388.comment-actions button:hover {
10389 background: var(--color-hover);
10390}
10391
10392/* ── Follow Mode ────────────────────────────────────────────────────── */
10393
10394.follow-banner {
10395 position: fixed;
10396 top: var(--space-sm);
10397 left: 50%;
10398 transform: translateX(-50%);
10399 padding: 6px 16px;
10400 background: var(--color-teal);
10401 color: var(--color-btn-primary-text);
10402 border-radius: 999px;
10403 font-size: 0.75rem;
10404 font-weight: 600;
10405 z-index: var(--z-overlay);
10406 display: flex;
10407 align-items: center;
10408 gap: var(--space-sm);
10409 box-shadow: var(--shadow-md);
10410}
10411
10412.follow-banner button {
10413 background: transparent;
10414 border: 1px solid currentColor;
10415 color: inherit;
10416 border-radius: var(--radius-sm);
10417 padding: 2px 8px;
10418 cursor: pointer;
10419 font-size: 0.7rem;
10420}
10421
10422/* ── Split View ─────────────────────────────────────────────────────── */
10423
10424.split-container {
10425 display: grid;
10426 width: 100%;
10427 height: 100%;
10428 overflow: hidden;
10429}
10430
10431.split-pane {
10432 overflow: auto;
10433 border-right: 1px solid var(--color-border);
10434 position: relative;
10435}
10436
10437.split-pane:last-child {
10438 border-right: none;
10439}
10440
10441.split-handle {
10442 width: 4px;
10443 background: var(--color-border);
10444 cursor: col-resize;
10445 transition: background var(--transition-fast);
10446}
10447
10448.split-handle:hover {
10449 background: var(--color-teal);
10450}
10451
10452/* ── Focus / Typewriter Mode ────────────────────────────────────────── */
10453
10454.typewriter-mode .tiptap .ProseMirror {
10455 padding-top: 40vh;
10456 padding-bottom: 40vh;
10457}
10458
10459.typewriter-mode .tiptap .ProseMirror .is-active-node {
10460 opacity: 1;
10461}
10462
10463.typewriter-mode .tiptap .ProseMirror > *:not(.is-active-node) {
10464 opacity: 0.4;
10465 transition: opacity var(--transition-med);
10466}
10467
10468/* ── Responsive: Slides ─────────────────────────────────────────────── */
10469
10470@media (max-width: 768px) {
10471 .slides-panel {
10472 width: 120px;
10473 }
10474 .slides-notes-panel {
10475 display: none;
10476 }
10477 .slides-canvas {
10478 width: 100%;
10479 height: auto;
10480 aspect-ratio: 16/9;
10481 }
10482 .presenter-sidebar {
10483 width: 200px;
10484 }
10485 .diagrams-toolbar {
10486 flex-wrap: wrap;
10487 gap: 1px;
10488 padding: 2px 4px;
10489 }
10490 .comments-sidebar {
10491 position: fixed;
10492 top: 0;
10493 right: 0;
10494 bottom: 0;
10495 width: 100%;
10496 z-index: var(--z-tooltip);
10497 }
10498}
10499
10500@media (max-width: 480px) {
10501 .slides-panel {
10502 display: none;
10503 }
10504 /* When toggled open on phone, render as full-screen overlay above canvas */
10505 .slides-panel.slides-panel--mobile-open {
10506 display: flex;
10507 position: fixed;
10508 top: 0;
10509 left: 0;
10510 bottom: 0;
10511 width: 75vw;
10512 max-width: 280px;
10513 z-index: var(--z-tooltip);
10514 box-shadow: var(--shadow-lg);
10515 background: var(--color-surface);
10516 }
10517 .presenter-sidebar {
10518 display: none;
10519 }
10520 .diagrams-props {
10521 width: 160px;
10522 }
10523}
10524
10525/* Hide the mobile-only panel toggle on desktop */
10526.slides-panel-toggle {
10527 display: none;
10528}
10529@media (max-width: 480px) {
10530 .slides-panel-toggle {
10531 display: inline-flex;
10532 }
10533}
10534
10535/* ============================================================
10536 Syntax Highlighting (lowlight / highlight.js class-based)
10537 ============================================================ */
10538
10539.tiptap pre {
10540 position: relative;
10541}
10542
10543.tiptap pre code .hljs-comment,
10544.tiptap pre code .hljs-quote {
10545 color: var(--color-text-faint);
10546 font-style: italic;
10547}
10548
10549.tiptap pre code .hljs-keyword,
10550.tiptap pre code .hljs-selector-tag,
10551.tiptap pre code .hljs-built_in,
10552.tiptap pre code .hljs-type {
10553 color: #8c54b2;
10554 color: oklch(0.55 0.15 310);
10555}
10556[data-theme="dark"] .tiptap pre code .hljs-keyword,
10557[data-theme="dark"] .tiptap pre code .hljs-selector-tag,
10558[data-theme="dark"] .tiptap pre code .hljs-built_in,
10559[data-theme="dark"] .tiptap pre code .hljs-type {
10560 color: #bf8ae6;
10561 color: oklch(0.72 0.14 310);
10562}
10563
10564.tiptap pre code .hljs-string,
10565.tiptap pre code .hljs-addition {
10566 color: #2f7434;
10567 color: oklch(0.50 0.12 145);
10568}
10569[data-theme="dark"] .tiptap pre code .hljs-string,
10570[data-theme="dark"] .tiptap pre code .hljs-addition {
10571 color: #6cb26f;
10572 color: oklch(0.70 0.12 145);
10573}
10574
10575.tiptap pre code .hljs-number,
10576.tiptap pre code .hljs-literal {
10577 color: #a34d00;
10578 color: oklch(0.52 0.14 55);
10579}
10580[data-theme="dark"] .tiptap pre code .hljs-number,
10581[data-theme="dark"] .tiptap pre code .hljs-literal {
10582 color: #de8f57;
10583 color: oklch(0.72 0.12 55);
10584}
10585
10586.tiptap pre code .hljs-title,
10587.tiptap pre code .hljs-section {
10588 color: #0465af;
10589 color: oklch(0.50 0.14 250);
10590}
10591[data-theme="dark"] .tiptap pre code .hljs-title,
10592[data-theme="dark"] .tiptap pre code .hljs-section {
10593 color: #67aaed;
10594 color: oklch(0.72 0.12 250);
10595}
10596
10597.tiptap pre code .hljs-name,
10598.tiptap pre code .hljs-selector-id,
10599.tiptap pre code .hljs-selector-class {
10600 color: #007172;
10601 color: oklch(0.48 0.12 195);
10602}
10603[data-theme="dark"] .tiptap pre code .hljs-name,
10604[data-theme="dark"] .tiptap pre code .hljs-selector-id,
10605[data-theme="dark"] .tiptap pre code .hljs-selector-class {
10606 color: #39abab;
10607 color: oklch(0.68 0.1 195);
10608}
10609
10610.tiptap pre code .hljs-attr,
10611.tiptap pre code .hljs-attribute {
10612 color: #906a21;
10613 color: oklch(0.55 0.1 80);
10614}
10615[data-theme="dark"] .tiptap pre code .hljs-attr,
10616[data-theme="dark"] .tiptap pre code .hljs-attribute {
10617 color: #c69e58;
10618 color: oklch(0.72 0.1 80);
10619}
10620
10621.tiptap pre code .hljs-deletion {
10622 color: #b94642;
10623 color: oklch(0.55 0.15 25);
10624}
10625[data-theme="dark"] .tiptap pre code .hljs-deletion {
10626 color: #e97871;
10627 color: oklch(0.70 0.14 25);
10628}
10629
10630.tiptap pre code .hljs-regexp,
10631.tiptap pre code .hljs-link {
10632 color: #007e5e;
10633 color: oklch(0.52 0.12 170);
10634}
10635
10636.tiptap pre code .hljs-meta,
10637.tiptap pre code .hljs-meta .hljs-keyword,
10638.tiptap pre code .hljs-meta .hljs-string {
10639 color: var(--color-text-muted);
10640}
10641
10642.tiptap pre code .hljs-emphasis {
10643 font-style: italic;
10644}
10645
10646.tiptap pre code .hljs-strong {
10647 font-weight: 700;
10648}
10649
10650/* Code block language label */
10651.tiptap pre[data-language]::before {
10652 content: attr(data-language);
10653 position: absolute;
10654 top: 0.25rem;
10655 right: 0.5rem;
10656 font-size: 0.65rem;
10657 font-family: var(--font-mono);
10658 color: var(--color-text-faint);
10659 text-transform: uppercase;
10660 letter-spacing: 0.05em;
10661 pointer-events: none;
10662}
10663
10664/* ============================================================
10665 Table of Contents
10666 ============================================================ */
10667
10668.toc-list {
10669 list-style: none;
10670 padding-left: 0;
10671 margin: 1em 0;
10672 border-left: 2px solid var(--color-border);
10673 padding-left: var(--space-md);
10674}
10675
10676.toc-list ul {
10677 list-style: none;
10678 padding-left: var(--space-lg);
10679 margin: 0;
10680}
10681
10682.toc-list li {
10683 margin: 0.25em 0;
10684}
10685
10686.toc-list a {
10687 color: var(--color-text-muted);
10688 text-decoration: none;
10689 font-size: 0.9rem;
10690 transition: color var(--transition-fast);
10691}
10692
10693.toc-list a:hover {
10694 color: var(--color-teal);
10695 text-decoration: underline;
10696}
10697
10698/* ============================================================
10699 Calendar — E2EE Collaborative Calendar
10700 ============================================================ */
10701
10702/* --- Calendar tokens --- */
10703:root {
10704 --cal-cell-min: 120px;
10705 --cal-cell-min-tablet: 90px;
10706 --cal-cell-min-mobile: 60px;
10707 --cal-hour-height: 60px;
10708 --cal-gutter-width: 60px;
10709 --cal-now-color: #bd413f;
10710 --cal-now-color: oklch(0.55 0.16 25);
10711
10712 /* Event palette — 8 hues keyed to oklch for both themes */
10713 --cal-ev-red: #c75450;
10714 --cal-ev-red: oklch(0.56 0.14 25);
10715 --cal-ev-orange: #c47525;
10716 --cal-ev-orange: oklch(0.60 0.14 60);
10717 --cal-ev-gold: #a88a1a;
10718 --cal-ev-gold: oklch(0.62 0.12 90);
10719 --cal-ev-green: #3a8a4e;
10720 --cal-ev-green: oklch(0.55 0.12 150);
10721 --cal-ev-teal: #0f7e7f;
10722 --cal-ev-teal: oklch(0.52 0.10 195);
10723 --cal-ev-blue: #3d6ea5;
10724 --cal-ev-blue: oklch(0.52 0.10 250);
10725 --cal-ev-purple: #7c549e;
10726 --cal-ev-purple: oklch(0.50 0.12 310);
10727 --cal-ev-slate: #6a6560;
10728 --cal-ev-slate: oklch(0.50 0.01 75);
10729}
10730
10731[data-theme="dark"] {
10732 --cal-now-color: #ce514d;
10733 --cal-now-color: oklch(0.60 0.16 25);
10734
10735 --cal-ev-red: #d06b67;
10736 --cal-ev-red: oklch(0.62 0.14 25);
10737 --cal-ev-orange: #d08e45;
10738 --cal-ev-orange: oklch(0.66 0.12 60);
10739 --cal-ev-gold: #c0a230;
10740 --cal-ev-gold: oklch(0.70 0.12 90);
10741 --cal-ev-green: #4faa65;
10742 --cal-ev-green: oklch(0.65 0.12 150);
10743 --cal-ev-teal: #2fa0a0;
10744 --cal-ev-teal: oklch(0.62 0.10 195);
10745 --cal-ev-blue: #5f92c4;
10746 --cal-ev-blue: oklch(0.62 0.10 250);
10747 --cal-ev-purple: #9e78be;
10748 --cal-ev-purple: oklch(0.60 0.12 310);
10749 --cal-ev-slate: #8a857f;
10750 --cal-ev-slate: oklch(0.60 0.01 75);
10751}
10752
10753
10754/* ── App Layout ──────────────────────────────────────────────────────── */
10755
10756.calendar-app {
10757 display: flex;
10758 flex-direction: column;
10759 height: 100dvh;
10760 overflow: hidden;
10761 overscroll-behavior: none; /* prevent pull-to-refresh / rubber-band on mobile */
10762}
10763
10764.calendar-main {
10765 position: relative;
10766 flex: 1;
10767 display: flex;
10768 flex-direction: column;
10769 min-height: 0; /* allow flex children to shrink below content size */
10770}
10771
10772/* Calendar body: sidebar + grid wrapper */
10773.cal-body {
10774 flex: 1;
10775 display: flex;
10776 min-height: 0;
10777 overflow: hidden;
10778}
10779
10780/* ── Mini Calendar Sidebar ──────────────────────────────────────────── */
10781
10782.cal-sidebar {
10783 width: 200px;
10784 flex-shrink: 0;
10785 border-right: 1px solid var(--color-border);
10786 padding: var(--space-sm);
10787 overflow-y: auto;
10788 transition: width var(--transition-fast), padding var(--transition-fast), border var(--transition-fast);
10789}
10790
10791.cal-sidebar-hidden {
10792 width: 0;
10793 padding: 0;
10794 border-right: none;
10795 overflow: hidden;
10796}
10797
10798.cal-mini-header {
10799 display: flex;
10800 align-items: center;
10801 justify-content: space-between;
10802 margin-bottom: var(--space-xs);
10803}
10804
10805.cal-mini-title {
10806 font-size: 0.75rem;
10807 font-weight: 600;
10808 color: var(--color-text);
10809}
10810
10811.cal-mini-nav {
10812 background: none;
10813 border: none;
10814 color: var(--color-text-muted);
10815 cursor: pointer;
10816 font-size: 0.6rem;
10817 padding: 2px 4px;
10818 border-radius: var(--radius-sm);
10819 line-height: 1;
10820}
10821
10822.cal-mini-nav:hover {
10823 background: var(--color-hover);
10824 color: var(--color-text);
10825}
10826
10827.cal-mini-grid {
10828 display: grid;
10829 grid-template-columns: repeat(7, 1fr);
10830 gap: 1px;
10831}
10832
10833.cal-mini-dow {
10834 font-size: 0.55rem;
10835 color: var(--color-text-muted);
10836 text-align: center;
10837 padding: 2px 0;
10838 font-weight: 600;
10839}
10840
10841.cal-mini-day {
10842 display: flex;
10843 flex-direction: column;
10844 align-items: center;
10845 justify-content: center;
10846 font-size: 0.65rem;
10847 padding: 2px 0;
10848 border: none;
10849 background: none;
10850 color: var(--color-text);
10851 cursor: pointer;
10852 border-radius: var(--radius-sm);
10853 line-height: 1.2;
10854 position: relative;
10855}
10856
10857.cal-mini-day:hover {
10858 background: var(--color-hover);
10859}
10860
10861.cal-mini-other {
10862 color: var(--color-text-muted);
10863 opacity: 0.5;
10864}
10865
10866.cal-mini-today {
10867 font-weight: 700;
10868 color: var(--color-accent);
10869}
10870
10871.cal-mini-selected {
10872 background: var(--color-accent);
10873 color: var(--color-on-accent, #fff);
10874}
10875
10876.cal-mini-selected:hover {
10877 background: var(--color-accent);
10878 opacity: 0.9;
10879}
10880
10881.cal-mini-dot {
10882 width: 3px;
10883 height: 3px;
10884 border-radius: 50%;
10885 background: var(--color-accent);
10886 position: absolute;
10887 bottom: 1px;
10888}
10889
10890.cal-mini-selected .cal-mini-dot {
10891 background: var(--color-on-accent, #fff);
10892}
10893
10894/* Keyboard shortcuts reference */
10895.cal-sidebar-shortcuts {
10896 margin-top: var(--space-md);
10897 padding-top: var(--space-sm);
10898 border-top: 1px solid var(--color-border);
10899}
10900
10901.cal-shortcuts-title {
10902 font-size: 0.6rem;
10903 font-weight: 600;
10904 color: var(--color-text-muted);
10905 text-transform: uppercase;
10906 letter-spacing: 0.05em;
10907 margin-bottom: var(--space-xs);
10908}
10909
10910.cal-shortcut {
10911 font-size: 0.65rem;
10912 color: var(--color-text-muted);
10913 padding: 1px 0;
10914 display: flex;
10915 align-items: center;
10916 gap: var(--space-xs);
10917}
10918
10919.cal-shortcut kbd {
10920 font-family: var(--font-mono, monospace);
10921 font-size: 0.6rem;
10922 padding: 0 3px;
10923 border: 1px solid var(--color-border);
10924 border-radius: 2px;
10925 background: var(--color-surface);
10926 min-width: 1.2em;
10927 text-align: center;
10928}
10929
10930.cal-sidebar-toggle svg {
10931 display: block;
10932}
10933
10934/* Hide sidebar on mobile */
10935@media (max-width: 767px) {
10936 .cal-sidebar {
10937 display: none;
10938 }
10939}
10940
10941/* Calendar grid container — fills remaining space below toolbar.
10942 overflow: hidden here so each view child handles its own scroll. */
10943.calendar-app .calendar-grid {
10944 flex: 1;
10945 display: flex;
10946 flex-direction: column;
10947 min-height: 0;
10948 overflow: hidden;
10949}
10950
10951
10952/* ── Toolbar ─────────────────────────────────────────────────────────── */
10953
10954.cal-toolbar {
10955 display: flex;
10956 align-items: center;
10957 padding: var(--space-sm) var(--space-md);
10958 padding-left: max(var(--space-md), env(safe-area-inset-left));
10959 padding-right: max(var(--space-md), env(safe-area-inset-right));
10960 gap: var(--space-md);
10961 border-bottom: 1px solid var(--color-border);
10962 background: var(--color-surface);
10963 flex-shrink: 0;
10964}
10965
10966.cal-nav-group {
10967 display: flex;
10968 align-items: center;
10969 gap: var(--space-sm);
10970}
10971
10972.cal-nav-btn {
10973 display: inline-flex;
10974 align-items: center;
10975 justify-content: center;
10976 padding: 0.3rem 0.65rem;
10977 border: 1px solid var(--color-border);
10978 border-radius: var(--radius-sm);
10979 background: transparent;
10980 color: var(--color-text-muted);
10981 font-family: var(--font-body);
10982 font-size: 0.8rem;
10983 cursor: pointer;
10984 transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
10985 line-height: 1.3;
10986 min-height: 28px;
10987}
10988
10989.cal-nav-btn:hover {
10990 background: var(--color-hover);
10991 color: var(--color-text);
10992 border-color: var(--color-border-strong);
10993}
10994
10995.cal-nav-btn:active {
10996 transform: scale(0.98);
10997}
10998
10999.cal-nav-btn:focus-visible {
11000 outline: 2px solid var(--color-accent);
11001 outline-offset: 1px;
11002}
11003
11004/* Search input */
11005.cal-search-wrapper {
11006 position: relative;
11007 display: flex;
11008 align-items: center;
11009}
11010
11011.cal-search-input {
11012 width: 160px;
11013 padding: 0.3rem 1.6rem 0.3rem 0.5rem;
11014 border: 1px solid var(--color-border);
11015 border-radius: var(--radius-sm);
11016 background: transparent;
11017 color: var(--color-text);
11018 font-family: var(--font-body);
11019 font-size: 0.8rem;
11020 line-height: 1.3;
11021 min-height: 28px;
11022 transition: border-color var(--transition-fast), width var(--transition-fast);
11023}
11024
11025.cal-search-input::placeholder {
11026 color: var(--color-text-muted);
11027 opacity: 0.7;
11028}
11029
11030.cal-search-input:focus {
11031 outline: none;
11032 border-color: var(--color-accent);
11033 width: 220px;
11034}
11035
11036.cal-search-clear {
11037 position: absolute;
11038 right: 4px;
11039 top: 50%;
11040 transform: translateY(-50%);
11041 border: none;
11042 background: none;
11043 color: var(--color-text-muted);
11044 font-size: 1rem;
11045 cursor: pointer;
11046 padding: 0 4px;
11047 line-height: 1;
11048}
11049
11050.cal-search-clear:hover {
11051 color: var(--color-text);
11052}
11053
11054.cal-date-label {
11055 font-family: var(--font-display);
11056 font-size: 1.2rem;
11057 color: var(--color-text);
11058 white-space: nowrap;
11059 user-select: none;
11060 margin-left: var(--space-xs);
11061}
11062
11063.cal-view-group {
11064 display: flex;
11065 align-items: center;
11066 gap: 2px;
11067 margin-left: auto;
11068 border: 1px solid var(--color-border);
11069 border-radius: var(--radius-sm);
11070 overflow: hidden;
11071}
11072
11073.cal-view-btn {
11074 display: inline-flex;
11075 align-items: center;
11076 justify-content: center;
11077 padding: 0.3rem 0.7rem;
11078 border: none;
11079 background: transparent;
11080 color: var(--color-text-muted);
11081 font-family: var(--font-body);
11082 font-size: 0.75rem;
11083 font-weight: 500;
11084 text-transform: uppercase;
11085 letter-spacing: 0.04em;
11086 cursor: pointer;
11087 transition: background var(--transition-fast), color var(--transition-fast);
11088 line-height: 1.3;
11089 min-height: 28px;
11090}
11091
11092.cal-view-btn:hover {
11093 background: var(--color-hover);
11094 color: var(--color-text);
11095}
11096
11097.cal-view-btn.active {
11098 background: var(--color-accent);
11099 color: var(--color-btn-primary-text);
11100}
11101
11102.cal-view-btn:focus-visible {
11103 outline: 2px solid var(--color-accent);
11104 outline-offset: -2px;
11105}
11106
11107
11108/* ── Month View ──────────────────────────────────────────────────────── */
11109
11110.cal-month-grid {
11111 display: grid;
11112 grid-template-columns: repeat(7, 1fr);
11113 /* First row (day-of-week header) is compact; remaining rows share space equally */
11114 grid-template-rows: auto;
11115 grid-auto-rows: 1fr;
11116 flex: 1;
11117 overflow: hidden;
11118 touch-action: pan-y; /* allow vertical touch gestures; we capture swipe at touchend */
11119}
11120
11121/* Week number variant: 8 columns (wk + 7 days) */
11122.cal-month-grid-weeknums {
11123 grid-template-columns: 28px repeat(7, 1fr);
11124}
11125
11126.cal-week-num-header {
11127 position: sticky;
11128 top: 0;
11129 z-index: var(--z-component);
11130 padding: var(--space-xs) 2px;
11131 font-family: var(--font-display);
11132 font-size: 0.6rem;
11133 font-weight: 600;
11134 text-transform: uppercase;
11135 letter-spacing: 0.04em;
11136 color: var(--color-text-muted);
11137 background: var(--color-surface);
11138 border-bottom: 1px solid var(--color-border-strong);
11139 text-align: center;
11140 user-select: none;
11141}
11142
11143.cal-week-num {
11144 display: flex;
11145 align-items: center;
11146 justify-content: center;
11147 font-size: 0.62rem;
11148 font-weight: 500;
11149 color: var(--color-text-muted);
11150 border-bottom: 1px solid var(--color-border);
11151 user-select: none;
11152 opacity: 0.7;
11153}
11154
11155.cal-month-header {
11156 display: contents;
11157}
11158
11159.cal-month-header-cell {
11160 position: sticky;
11161 top: 0;
11162 z-index: var(--z-component);
11163 padding: var(--space-xs) var(--space-sm);
11164 font-family: var(--font-display);
11165 font-size: 0.7rem;
11166 font-weight: 600;
11167 text-transform: uppercase;
11168 letter-spacing: 0.06em;
11169 color: var(--color-text-muted);
11170 background: var(--color-surface);
11171 border-bottom: 1px solid var(--color-border-strong);
11172 text-align: center;
11173 user-select: none;
11174}
11175
11176.cal-day-cell {
11177 border-right: 1px solid var(--color-border);
11178 border-bottom: 1px solid var(--color-border);
11179 padding: var(--space-xs);
11180 cursor: pointer;
11181 transition: background var(--transition-fast);
11182 overflow: hidden;
11183 position: relative;
11184}
11185
11186/* Grid overflow clips the last column's right border naturally */
11187
11188.cal-day-cell:hover {
11189 background: var(--color-hover);
11190}
11191
11192.cal-day-number {
11193 display: inline-flex;
11194 align-items: center;
11195 justify-content: center;
11196 font-size: 0.78rem;
11197 font-weight: 600;
11198 color: var(--color-text);
11199 width: 1.6em;
11200 height: 1.6em;
11201 line-height: 1;
11202 margin-bottom: var(--space-xs);
11203 border-radius: 50%;
11204 user-select: none;
11205}
11206
11207.cal-day-today .cal-day-number {
11208 background: var(--color-teal);
11209 color: #f7f5f1;
11210 color: oklch(0.97 0.005 75);
11211}
11212
11213.cal-day-other-month {
11214 opacity: 0.38;
11215}
11216
11217.cal-day-other-month:hover {
11218 opacity: 0.55;
11219}
11220
11221.cal-event-pill {
11222 display: block;
11223 padding: 1px 5px;
11224 margin-bottom: 2px;
11225 border-radius: var(--radius-sm);
11226 font-size: 0.68rem;
11227 line-height: 1.4;
11228 font-family: var(--font-body);
11229 color: #f7f5f1;
11230 color: oklch(0.97 0.005 75);
11231 background: var(--pill-color, var(--cal-ev-teal));
11232 white-space: nowrap;
11233 overflow: hidden;
11234 text-overflow: ellipsis;
11235 cursor: pointer;
11236 transition: filter var(--transition-fast);
11237}
11238
11239.cal-event-pill:hover {
11240 filter: brightness(1.1);
11241}
11242
11243[data-theme="dark"] .cal-event-pill {
11244 color: #f7f5f1;
11245 color: oklch(0.97 0.005 75);
11246}
11247
11248/* Multi-day event rendering */
11249.cal-event-pill.event-multi-start {
11250 border-radius: var(--radius-sm) 0 0 var(--radius-sm);
11251 margin-right: 0;
11252}
11253.cal-event-pill.event-multi-middle {
11254 border-radius: 0;
11255 margin-left: 0;
11256 margin-right: 0;
11257}
11258.cal-event-pill.event-multi-end {
11259 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
11260 margin-left: 0;
11261}
11262
11263/* Drag-and-drop event rescheduling */
11264.cal-event-pill.cal-dragging {
11265 opacity: 0.4;
11266}
11267.cal-day-cell.cal-drag-over {
11268 background: oklch(0.85 0.08 220 / 0.3);
11269 outline: 2px dashed oklch(0.6 0.1 220);
11270 outline-offset: -2px;
11271}
11272[data-theme="dark"] .cal-day-cell.cal-drag-over {
11273 background: oklch(0.3 0.06 220 / 0.4);
11274 outline-color: oklch(0.55 0.1 220);
11275}
11276
11277/* Drop overlay for .ics file import */
11278.cal-drop-overlay {
11279 position: absolute;
11280 inset: 0;
11281 background: oklch(0.95 0.02 220 / 0.92);
11282 display: flex;
11283 align-items: center;
11284 justify-content: center;
11285 z-index: 100;
11286 border: 3px dashed oklch(0.6 0.1 220);
11287 border-radius: var(--radius-lg);
11288 pointer-events: none;
11289}
11290[data-theme="dark"] .cal-drop-overlay {
11291 background: oklch(0.15 0.02 220 / 0.92);
11292 border-color: oklch(0.5 0.1 220);
11293}
11294.cal-drop-overlay-inner {
11295 display: flex;
11296 flex-direction: column;
11297 align-items: center;
11298 gap: 0.5rem;
11299 font-size: 1.1rem;
11300 font-weight: 600;
11301 color: oklch(0.4 0.08 220);
11302}
11303[data-theme="dark"] .cal-drop-overlay-inner {
11304 color: oklch(0.8 0.06 220);
11305}
11306.cal-drop-icon { font-size: 2.5rem; }
11307
11308.cal-more-link {
11309 display: block;
11310 padding: 1px 5px;
11311 font-size: 0.65rem;
11312 color: var(--color-text-muted);
11313 cursor: pointer;
11314 transition: color var(--transition-fast);
11315 user-select: none;
11316}
11317
11318.cal-more-link:hover {
11319 color: var(--color-text);
11320}
11321
11322
11323/* ── Week View ───────────────────────────────────────────────────────── */
11324
11325.cal-week-grid {
11326 display: grid;
11327 grid-template-columns: var(--cal-gutter-width) repeat(7, 1fr);
11328 grid-template-rows: auto auto 1fr;
11329 flex: 1;
11330 min-height: 0;
11331 overflow: hidden;
11332}
11333
11334.cal-week-header {
11335 display: contents;
11336}
11337
11338.cal-week-header-cell {
11339 padding: var(--space-xs) var(--space-sm);
11340 font-family: var(--font-display);
11341 font-size: 0.7rem;
11342 font-weight: 600;
11343 text-transform: uppercase;
11344 letter-spacing: 0.06em;
11345 color: var(--color-text-muted);
11346 text-align: center;
11347 border-bottom: 1px solid var(--color-border);
11348 background: var(--color-surface);
11349 user-select: none;
11350}
11351
11352.cal-week-header-cell.is-today {
11353 color: var(--color-teal);
11354}
11355
11356.cal-week-day-name {
11357 display: block;
11358 font-size: 0.65rem;
11359 font-weight: 600;
11360 text-transform: uppercase;
11361 letter-spacing: 0.06em;
11362}
11363
11364.cal-week-header-gutter {
11365 grid-row: 1;
11366 grid-column: 1;
11367 border-bottom: 1px solid var(--color-border);
11368 background: var(--color-surface);
11369}
11370
11371.cal-week-header-date {
11372 display: block;
11373 font-size: 1.3rem;
11374 font-family: var(--font-display);
11375 font-weight: 400;
11376 letter-spacing: normal;
11377 text-transform: none;
11378 line-height: 1.2;
11379}
11380
11381.cal-week-header-cell.is-today .cal-week-header-date {
11382 display: inline-flex;
11383 align-items: center;
11384 justify-content: center;
11385 width: 1.6em;
11386 height: 1.6em;
11387 border-radius: 50%;
11388 background: var(--color-teal);
11389 color: #f7f5f1;
11390 color: oklch(0.97 0.005 75);
11391}
11392
11393/* All-day row */
11394.cal-allday-bar {
11395 display: contents;
11396}
11397
11398.cal-allday-gutter {
11399 grid-column: 1;
11400 padding: var(--space-xs);
11401 font-size: 0.6rem;
11402 color: var(--color-text-faint);
11403 text-transform: uppercase;
11404 letter-spacing: 0.04em;
11405 border-bottom: 1px solid var(--color-border-strong);
11406 background: var(--color-surface);
11407 display: flex;
11408 align-items: center;
11409 justify-content: center;
11410}
11411
11412.cal-allday-cell {
11413 border-right: 1px solid var(--color-border);
11414 border-bottom: 1px solid var(--color-border-strong);
11415 padding: var(--space-xs);
11416 min-height: 2rem;
11417 background: var(--color-bg);
11418}
11419
11420.cal-allday-cell:last-child {
11421 border-right: none;
11422}
11423
11424/* Time body — scrollable region */
11425.cal-week-body {
11426 grid-column: 1 / -1;
11427 display: grid;
11428 grid-template-columns: var(--cal-gutter-width) repeat(7, 1fr);
11429 overflow-y: auto;
11430 overscroll-behavior: contain; /* prevent scroll chaining to body */
11431 -webkit-overflow-scrolling: touch;
11432 scrollbar-width: thin;
11433 scrollbar-color: var(--color-border) transparent;
11434}
11435
11436.cal-time-gutter {
11437 width: var(--cal-gutter-width);
11438}
11439
11440.cal-hour-label {
11441 height: var(--cal-hour-height);
11442 display: flex;
11443 align-items: flex-start;
11444 justify-content: flex-end;
11445 padding: 0 var(--space-sm) 0 0;
11446 font-size: 0.65rem;
11447 font-family: var(--font-mono);
11448 color: var(--color-text-faint);
11449 position: relative;
11450 top: -0.45em;
11451 user-select: none;
11452}
11453
11454.cal-day-column {
11455 position: relative;
11456 border-right: 1px solid var(--color-border);
11457}
11458
11459.cal-day-column:last-child {
11460 border-right: none;
11461}
11462
11463.cal-hour-row {
11464 height: var(--cal-hour-height);
11465 border-bottom: 1px solid var(--color-border);
11466}
11467
11468.cal-hour-row-half {
11469 height: calc(var(--cal-hour-height) / 2);
11470 border-bottom: 1px dashed var(--color-border);
11471 border-bottom-color: #d7d4cf66;
11472 border-bottom-color: oklch(0.87 0.008 75 / 0.4);
11473}
11474
11475[data-theme="dark"] .cal-hour-row-half {
11476 border-bottom-color: #2b282566;
11477 border-bottom-color: oklch(0.28 0.008 75 / 0.4);
11478}
11479
11480/* Event blocks — absolute positioned in day columns */
11481.cal-event-block {
11482 position: absolute;
11483 left: 2px;
11484 right: 2px;
11485 border-radius: var(--radius-sm);
11486 padding: 3px 6px;
11487 font-size: 0.7rem;
11488 font-family: var(--font-body);
11489 line-height: 1.3;
11490 color: #f7f5f1;
11491 color: oklch(0.97 0.005 75);
11492 background: var(--pill-color, var(--cal-ev-teal));
11493 overflow: hidden;
11494 cursor: pointer;
11495 z-index: 1;
11496 transition: box-shadow var(--transition-fast), filter var(--transition-fast);
11497 border-left: 3px solid rgba(0, 0, 0, 0.15);
11498}
11499
11500.cal-event-block:hover {
11501 box-shadow: var(--shadow-md);
11502 filter: brightness(1.08);
11503 z-index: 2;
11504}
11505
11506.cal-event-block-title {
11507 font-weight: 600;
11508 white-space: nowrap;
11509 overflow: hidden;
11510 text-overflow: ellipsis;
11511}
11512
11513.cal-event-block-time {
11514 font-size: 0.6rem;
11515 opacity: 0.85;
11516 white-space: nowrap;
11517}
11518
11519/* Current time indicator */
11520.cal-now-line {
11521 position: absolute;
11522 left: 0;
11523 right: 0;
11524 height: 2px;
11525 background: var(--cal-now-color);
11526 z-index: 3;
11527 pointer-events: none;
11528}
11529
11530.cal-now-line::before {
11531 content: '';
11532 position: absolute;
11533 left: -4px;
11534 top: -3px;
11535 width: 8px;
11536 height: 8px;
11537 border-radius: 50%;
11538 background: var(--cal-now-color);
11539}
11540
11541
11542/* ── Day View ────────────────────────────────────────────────────────── */
11543
11544.cal-day-grid {
11545 display: grid;
11546 grid-template-columns: var(--cal-gutter-width) 1fr;
11547 grid-template-rows: auto auto 1fr;
11548 flex: 1;
11549 min-height: 0;
11550 overflow: hidden;
11551}
11552
11553.cal-day-header {
11554 grid-column: 1 / -1;
11555 padding: var(--space-xs) var(--space-md);
11556 font-family: var(--font-display);
11557 font-size: 0.8rem;
11558 font-weight: 600;
11559 color: var(--color-text-muted);
11560 text-transform: uppercase;
11561 letter-spacing: 0.06em;
11562 border-bottom: 1px solid var(--color-border);
11563 background: var(--color-surface);
11564 user-select: none;
11565}
11566
11567.cal-day-header-date {
11568 font-size: 1.4rem;
11569 font-weight: 400;
11570 text-transform: none;
11571 letter-spacing: normal;
11572 color: var(--color-text);
11573 margin-left: var(--space-sm);
11574}
11575
11576.cal-day-header.is-today .cal-day-header-date {
11577 display: inline-flex;
11578 align-items: center;
11579 justify-content: center;
11580 width: 1.6em;
11581 height: 1.6em;
11582 border-radius: 50%;
11583 background: var(--color-teal);
11584 color: #f7f5f1;
11585 color: oklch(0.97 0.005 75);
11586}
11587
11588/* Day view all-day bar */
11589.cal-day-allday-gutter {
11590 grid-column: 1;
11591 padding: var(--space-xs);
11592 font-size: 0.6rem;
11593 color: var(--color-text-faint);
11594 text-transform: uppercase;
11595 letter-spacing: 0.04em;
11596 border-bottom: 1px solid var(--color-border-strong);
11597 background: var(--color-surface);
11598 display: flex;
11599 align-items: center;
11600 justify-content: center;
11601}
11602
11603.cal-day-allday-cell {
11604 grid-column: 2;
11605 border-bottom: 1px solid var(--color-border-strong);
11606 padding: var(--space-xs);
11607 min-height: 2rem;
11608 background: var(--color-bg);
11609}
11610
11611/* Day view scrollable body */
11612.cal-day-body {
11613 grid-column: 1 / -1;
11614 display: grid;
11615 grid-template-columns: var(--cal-gutter-width) 1fr;
11616 overflow-y: auto;
11617 overscroll-behavior: contain;
11618 -webkit-overflow-scrolling: touch;
11619 scrollbar-width: thin;
11620 scrollbar-color: var(--color-border) transparent;
11621}
11622
11623/* Reuses .cal-time-gutter, .cal-hour-label, .cal-hour-row,
11624 .cal-hour-row-half, .cal-day-column, .cal-event-block,
11625 .cal-now-line from week view */
11626
11627
11628/* ── Agenda View ─────────────────────────────────────────────────────── */
11629
11630.cal-agenda {
11631 flex: 1;
11632 overflow-y: auto;
11633 overscroll-behavior: contain;
11634 -webkit-overflow-scrolling: touch;
11635 padding: var(--space-md) var(--space-lg);
11636 scrollbar-width: thin;
11637 scrollbar-color: var(--color-border) transparent;
11638}
11639
11640.cal-date-group {
11641 margin-bottom: var(--space-md);
11642}
11643
11644.cal-date-header {
11645 font-family: var(--font-display);
11646 font-size: 0.85rem;
11647 font-weight: 600;
11648 color: var(--color-text);
11649 padding-bottom: var(--space-xs);
11650 margin-bottom: var(--space-xs);
11651 margin-top: var(--space-md);
11652 border-bottom: 1px solid var(--color-border);
11653 user-select: none;
11654}
11655
11656.cal-date-group:first-child .cal-date-header {
11657 margin-top: 0;
11658}
11659
11660.cal-date-header-today {
11661 color: var(--color-teal);
11662}
11663
11664.cal-agenda-item {
11665 display: flex;
11666 align-items: flex-start;
11667 gap: var(--space-sm);
11668 padding: var(--space-sm) var(--space-sm);
11669 border-radius: var(--radius-sm);
11670 cursor: pointer;
11671 transition: background var(--transition-fast);
11672}
11673
11674.cal-agenda-item:hover {
11675 background: var(--color-hover);
11676}
11677
11678.cal-agenda-dot {
11679 flex-shrink: 0;
11680 width: 8px;
11681 height: 8px;
11682 border-radius: 50%;
11683 margin-top: 0.35em;
11684 /* background set inline via style attr */
11685}
11686
11687.cal-agenda-time {
11688 flex-shrink: 0;
11689 width: 6.5em;
11690 font-size: 0.78rem;
11691 font-family: var(--font-mono);
11692 color: var(--color-text-muted);
11693 white-space: nowrap;
11694}
11695
11696.cal-agenda-content {
11697 flex: 1;
11698 min-width: 0;
11699}
11700
11701.cal-agenda-title {
11702 font-size: 0.88rem;
11703 font-weight: 500;
11704 color: var(--color-text);
11705 line-height: 1.3;
11706}
11707
11708.cal-agenda-desc {
11709 font-size: 0.78rem;
11710 color: var(--color-text-muted);
11711 line-height: 1.4;
11712 white-space: nowrap;
11713 overflow: hidden;
11714 text-overflow: ellipsis;
11715 margin-top: 1px;
11716}
11717
11718.cal-agenda-empty {
11719 display: flex;
11720 flex-direction: column;
11721 align-items: center;
11722 justify-content: center;
11723 padding: var(--space-2xl) var(--space-md);
11724 color: var(--color-text-faint);
11725 font-size: 0.9rem;
11726 text-align: center;
11727 user-select: none;
11728}
11729
11730.cal-agenda-empty-icon {
11731 font-size: 2rem;
11732 margin-bottom: var(--space-sm);
11733 opacity: 0.5;
11734}
11735
11736
11737/* ── Event Modal ─────────────────────────────────────────────────────── */
11738
11739.event-modal {
11740 max-width: 480px;
11741 width: 90%;
11742 max-height: calc(100dvh - 2rem);
11743 overflow-y: auto;
11744 padding: var(--space-lg);
11745 background: var(--color-bg);
11746 border: 1px solid var(--color-border);
11747 border-radius: var(--radius-lg);
11748 box-shadow: var(--shadow-lg);
11749 position: relative;
11750 -webkit-overflow-scrolling: touch;
11751}
11752
11753.event-modal-title {
11754 font-family: var(--font-display);
11755 font-size: 1.2rem;
11756 margin: 0 0 var(--space-md);
11757 color: var(--color-text);
11758 padding-right: 2.5rem;
11759}
11760
11761.event-modal-close {
11762 position: absolute;
11763 top: var(--space-sm);
11764 right: var(--space-sm);
11765 width: 36px;
11766 height: 36px;
11767 display: inline-flex;
11768 align-items: center;
11769 justify-content: center;
11770 background: transparent;
11771 color: var(--color-text-muted);
11772 border: none;
11773 border-radius: var(--radius-sm);
11774 font-size: 1.4rem;
11775 line-height: 1;
11776 cursor: pointer;
11777 transition: background var(--transition-fast), color var(--transition-fast);
11778}
11779.event-modal-close:hover {
11780 background: var(--color-hover);
11781 color: var(--color-text);
11782}
11783
11784.event-modal-field {
11785 display: flex;
11786 flex-direction: column;
11787 gap: var(--space-xs);
11788 margin-bottom: var(--space-md);
11789}
11790
11791.event-modal-field label {
11792 font-size: 0.72rem;
11793 font-weight: 600;
11794 color: var(--color-text-muted);
11795 text-transform: uppercase;
11796 letter-spacing: 0.04em;
11797 user-select: none;
11798}
11799
11800.event-modal-field input[type="text"],
11801.event-modal-field input[type="date"],
11802.event-modal-field input[type="time"],
11803.event-modal-field input[type="datetime-local"],
11804.event-modal-field textarea,
11805.event-modal-field select {
11806 width: 100%;
11807 padding: 0.5rem 0.7rem;
11808 font-family: var(--font-body);
11809 font-size: 0.85rem;
11810 border: 1px solid var(--color-border);
11811 border-radius: var(--radius-sm);
11812 background: var(--color-surface);
11813 color: var(--color-text);
11814 outline: none;
11815 transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
11816}
11817
11818.event-modal-field input:focus,
11819.event-modal-field textarea:focus,
11820.event-modal-field select:focus {
11821 border-color: var(--color-teal);
11822 box-shadow: 0 0 0 2px var(--color-focus);
11823}
11824
11825.event-modal-field textarea {
11826 resize: vertical;
11827 min-height: 3.5rem;
11828 line-height: 1.5;
11829}
11830
11831.event-modal-checkbox {
11832 flex-direction: row;
11833 align-items: center;
11834}
11835
11836.event-modal-checkbox input[type="checkbox"] {
11837 width: auto;
11838 margin: 0;
11839}
11840
11841.event-modal-checkbox label {
11842 margin: 0;
11843}
11844
11845.event-modal-row {
11846 display: flex;
11847 gap: var(--space-sm);
11848}
11849
11850.event-modal-row > .event-modal-field {
11851 flex: 1;
11852 min-width: 0;
11853}
11854
11855/* Color swatches */
11856.event-color-picker {
11857 display: flex;
11858 gap: var(--space-sm);
11859 flex-wrap: wrap;
11860}
11861
11862.event-color-swatch {
11863 width: 24px;
11864 height: 24px;
11865 border-radius: 50%;
11866 border: 2px solid transparent;
11867 cursor: pointer;
11868 transition: border-color var(--transition-fast), transform var(--transition-fast);
11869 padding: 0;
11870}
11871
11872.event-color-swatch:hover {
11873 transform: scale(1.15);
11874}
11875
11876.event-color-swatch.active {
11877 border-color: var(--color-text);
11878 box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-text-muted);
11879}
11880
11881.event-color-swatch:focus-visible {
11882 outline: 2px solid var(--color-accent);
11883 outline-offset: 2px;
11884}
11885
11886/* Modal actions */
11887.event-modal-actions {
11888 display: flex;
11889 gap: var(--space-sm);
11890 justify-content: flex-end;
11891 margin-top: var(--space-lg);
11892 padding-top: var(--space-md);
11893 border-top: 1px solid var(--color-border);
11894}
11895
11896
11897/* ── Dark Mode — calendar-specific adjustments ───────────────────────── */
11898
11899[data-theme="dark"] .cal-event-block {
11900 border-left-color: rgba(255, 255, 255, 0.1);
11901}
11902
11903[data-theme="dark"] .cal-event-pill,
11904[data-theme="dark"] .cal-event-block {
11905 /* Slightly lower saturation in dark mode for comfort */
11906 filter: saturate(0.9);
11907}
11908
11909[data-theme="dark"] .cal-event-pill:hover {
11910 filter: saturate(0.9) brightness(1.12);
11911}
11912
11913[data-theme="dark"] .cal-event-block:hover {
11914 filter: saturate(0.9) brightness(1.1);
11915}
11916
11917
11918/* ── Settings Popover ────────────────────────────────────────────────── */
11919
11920.cal-settings-popover {
11921 position: fixed;
11922 z-index: 200;
11923 background: var(--color-surface);
11924 border: 1px solid var(--color-border);
11925 border-radius: var(--radius, 6px);
11926 padding: var(--space-sm) var(--space-md);
11927 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
11928 min-width: 200px;
11929}
11930
11931.cal-settings-title {
11932 font-size: 0.7rem;
11933 font-weight: 600;
11934 color: var(--color-text-muted);
11935 text-transform: uppercase;
11936 letter-spacing: 0.05em;
11937 margin-bottom: var(--space-sm);
11938}
11939
11940.cal-settings-row {
11941 display: flex;
11942 align-items: center;
11943 justify-content: space-between;
11944 gap: var(--space-md);
11945 padding: var(--space-xs) 0;
11946 font-size: 0.8rem;
11947 color: var(--color-text);
11948 cursor: default;
11949}
11950
11951.cal-settings-select {
11952 font-size: 0.75rem;
11953 padding: 2px 6px;
11954 border: 1px solid var(--color-border);
11955 border-radius: 4px;
11956 background: var(--color-bg);
11957 color: var(--color-text);
11958 cursor: pointer;
11959}
11960
11961.cal-settings-select:focus {
11962 outline: 2px solid var(--color-focus);
11963 outline-offset: 1px;
11964}
11965
11966
11967/* ── Event Hover Preview ─────────────────────────────────────────────── */
11968
11969.cal-event-preview {
11970 position: fixed;
11971 z-index: 210;
11972 background: var(--color-surface);
11973 border: 1px solid var(--color-border);
11974 border-radius: var(--radius, 6px);
11975 padding: var(--space-sm) var(--space-md);
11976 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
11977 max-width: 250px;
11978 pointer-events: auto;
11979}
11980
11981.cal-preview-title {
11982 font-weight: 600;
11983 font-size: 0.8rem;
11984 color: var(--color-text);
11985 margin-bottom: 2px;
11986}
11987
11988.cal-preview-time {
11989 font-size: 0.72rem;
11990 color: var(--color-text-muted);
11991 margin-bottom: 4px;
11992}
11993
11994.cal-preview-desc {
11995 font-size: 0.7rem;
11996 color: var(--color-text-faint);
11997 line-height: 1.4;
11998 white-space: pre-line;
11999 overflow: hidden;
12000 text-overflow: ellipsis;
12001 display: -webkit-box;
12002 -webkit-line-clamp: 3;
12003 -webkit-box-orient: vertical;
12004}
12005
12006
12007/* ── Reminder rows (event modal) ─────────────────────────────────────── */
12008
12009.event-reminder-rows {
12010 display: flex;
12011 flex-direction: column;
12012 gap: var(--space-xs);
12013}
12014
12015.event-reminder-row {
12016 display: flex;
12017 align-items: center;
12018 gap: var(--space-xs);
12019}
12020
12021.event-reminder-row .reminder-select {
12022 flex: 1;
12023}
12024
12025.btn-remove-reminder {
12026 background: none;
12027 border: none;
12028 color: var(--color-text-secondary);
12029 font-size: 1.2rem;
12030 cursor: pointer;
12031 padding: 0 4px;
12032 line-height: 1;
12033}
12034.btn-remove-reminder:hover {
12035 color: var(--color-danger, #d94a4a);
12036}
12037
12038.btn-add-reminder {
12039 background: none;
12040 border: 1px dashed var(--color-border);
12041 border-radius: var(--radius-sm);
12042 padding: var(--space-xs) var(--space-sm);
12043 color: var(--color-text-secondary);
12044 cursor: pointer;
12045 font-size: 0.85rem;
12046 margin-top: var(--space-xs);
12047}
12048.btn-add-reminder:hover {
12049 border-color: var(--color-teal);
12050 color: var(--color-teal);
12051}
12052
12053/* ── Subscription list (settings popover) ────────────────────────────── */
12054
12055.cal-settings-divider {
12056 border: none;
12057 border-top: 1px solid var(--color-border);
12058 margin: var(--space-sm) 0;
12059}
12060
12061.cal-sub-list {
12062 display: flex;
12063 flex-direction: column;
12064 gap: var(--space-xs);
12065 margin-bottom: var(--space-sm);
12066}
12067
12068.cal-sub-empty {
12069 color: var(--color-text-secondary);
12070 font-size: 0.85rem;
12071 padding: var(--space-xs) 0;
12072}
12073
12074.cal-sub-item {
12075 display: flex;
12076 align-items: center;
12077 gap: var(--space-xs);
12078 padding: var(--space-xs) 0;
12079}
12080
12081.cal-sub-dot {
12082 width: 10px;
12083 height: 10px;
12084 border-radius: 50%;
12085 flex-shrink: 0;
12086}
12087
12088.cal-sub-name {
12089 flex: 1;
12090 font-size: 0.85rem;
12091 overflow: hidden;
12092 text-overflow: ellipsis;
12093 white-space: nowrap;
12094}
12095
12096.cal-sub-toggle {
12097 display: flex;
12098 align-items: center;
12099 gap: 4px;
12100 font-size: 0.8rem;
12101 color: var(--color-text-secondary);
12102 cursor: pointer;
12103}
12104
12105.cal-sub-toggle-label {
12106 font-size: 0.75rem;
12107}
12108
12109.cal-sub-sync,
12110.cal-sub-delete {
12111 background: none;
12112 border: none;
12113 cursor: pointer;
12114 color: var(--color-text-secondary);
12115 font-size: 1rem;
12116 padding: 0 2px;
12117}
12118.cal-sub-sync:hover { color: var(--color-teal); }
12119.cal-sub-delete:hover { color: var(--color-danger, #d94a4a); }
12120
12121.btn-add-subscription {
12122 background: none;
12123 border: 1px dashed var(--color-border);
12124 border-radius: var(--radius-sm);
12125 padding: var(--space-xs) var(--space-sm);
12126 color: var(--color-text-secondary);
12127 cursor: pointer;
12128 font-size: 0.85rem;
12129 width: 100%;
12130}
12131.btn-add-subscription:hover {
12132 border-color: var(--color-teal);
12133 color: var(--color-teal);
12134}
12135
12136/* ── Subscription modal ──────────────────────────────────────────────── */
12137
12138.sub-modal {
12139 background: var(--color-surface);
12140 border-radius: var(--radius-lg);
12141 padding: var(--space-lg);
12142 width: min(440px, 90vw);
12143 max-height: 80vh;
12144 overflow-y: auto;
12145 box-shadow: var(--shadow-lg);
12146}
12147
12148.sub-modal h2 {
12149 margin: 0 0 var(--space-md);
12150 font-size: 1.1rem;
12151}
12152
12153/* ── External event overlay ──────────────────────────────────────────── */
12154
12155.cal-event-external {
12156 opacity: 0.75;
12157 border-style: dashed !important;
12158}
12159
12160/* ── Notification banner ─────────────────────────────────────────────── */
12161
12162.cal-notif-banner {
12163 display: flex;
12164 align-items: center;
12165 gap: var(--space-sm);
12166 padding: var(--space-xs) var(--space-md);
12167 background: var(--color-surface-raised, var(--color-surface));
12168 border: 1px solid var(--color-border);
12169 border-radius: var(--radius-sm);
12170 margin: var(--space-xs) var(--space-md);
12171 font-size: 0.85rem;
12172}
12173
12174.cal-notif-banner .btn-sm {
12175 padding: 2px 10px;
12176 font-size: 0.8rem;
12177}
12178
12179.cal-notif-row {
12180 display: flex;
12181 align-items: center;
12182 justify-content: space-between;
12183 padding: var(--space-xs) 0;
12184 font-size: 0.85rem;
12185}
12186
12187.cal-notif-toggle-btn {
12188 padding: 2px 10px;
12189 font-size: 0.8rem;
12190 border-radius: var(--radius-sm);
12191 border: 1px solid var(--color-border);
12192 background: var(--color-surface-raised, var(--color-surface));
12193 color: var(--color-text);
12194 cursor: pointer;
12195}
12196.cal-notif-toggle-btn:hover:not(:disabled) {
12197 background: var(--color-teal);
12198 color: #fff;
12199 border-color: var(--color-teal);
12200}
12201.cal-notif-toggle-btn:disabled {
12202 opacity: 0.5;
12203 cursor: not-allowed;
12204}
12205
12206/* ── Keyboard-focused event pill ─────────────────────────────────────── */
12207
12208.cal-event-pill:focus-visible,
12209.cal-event-block:focus-visible {
12210 outline: 2px solid var(--color-teal);
12211 outline-offset: 1px;
12212 z-index: 5;
12213}
12214
12215
12216/* ── Print ───────────────────────────────────────────────────────────── */
12217
12218@media print {
12219 .cal-toolbar,
12220 .cal-now-line {
12221 display: none !important;
12222 }
12223
12224 .cal-day-cell {
12225 min-height: 80px !important;
12226 break-inside: avoid;
12227 }
12228
12229 .cal-event-pill,
12230 .cal-event-block {
12231 -webkit-print-color-adjust: exact;
12232 print-color-adjust: exact;
12233 }
12234}
12235
12236
12237/* ── Responsive: Tablet (768px) ──────────────────────────────────────── */
12238
12239@media (max-width: 768px) {
12240 .cal-toolbar {
12241 flex-wrap: wrap;
12242 padding: var(--space-xs) var(--space-sm);
12243 gap: var(--space-sm);
12244 }
12245
12246 .cal-nav-group {
12247 order: 1;
12248 flex: 1 1 100%;
12249 }
12250
12251 .cal-view-group {
12252 order: 2;
12253 margin-left: 0;
12254 flex: 1 1 100%;
12255 justify-content: center;
12256 }
12257
12258 .cal-date-label {
12259 font-size: 1.05rem;
12260 }
12261
12262 /* Month grid — smaller cells */
12263 .cal-month-grid {
12264 grid-auto-rows: 1fr;
12265 }
12266
12267 .cal-day-cell {
12268 padding: 2px;
12269 }
12270
12271 .cal-day-number {
12272 font-size: 0.72rem;
12273 }
12274
12275 .cal-event-pill {
12276 font-size: 0.62rem;
12277 padding: 0 3px;
12278 }
12279
12280 /* Week/day — narrower gutter */
12281 .cal-week-grid,
12282 .cal-week-body {
12283 grid-template-columns: 48px repeat(7, 1fr);
12284 }
12285
12286 .cal-day-grid,
12287 .cal-day-body {
12288 grid-template-columns: 48px 1fr;
12289 }
12290
12291 .cal-hour-label {
12292 font-size: 0.6rem;
12293 padding-right: var(--space-xs);
12294 }
12295
12296 /* Event modal full-width */
12297 .event-modal {
12298 max-width: 100%;
12299 width: 100%;
12300 border-radius: var(--radius-md);
12301 margin-bottom: var(--space-md);
12302 }
12303
12304 .event-modal-row {
12305 flex-direction: column;
12306 gap: 0;
12307 }
12308
12309 /* Hide week numbers on tablet */
12310 .cal-week-num,
12311 .cal-week-num-header {
12312 display: none;
12313 }
12314 .cal-month-grid-weeknums {
12315 grid-template-columns: repeat(7, 1fr);
12316 }
12317
12318 /* Shrink search input */
12319 .cal-search-input {
12320 width: 120px;
12321 }
12322 .cal-search-input:focus {
12323 width: 160px;
12324 }
12325
12326 /* Agenda — less padding */
12327 .cal-agenda {
12328 padding: var(--space-sm) var(--space-md);
12329 }
12330}
12331
12332
12333/* ── Responsive: Mobile (480px) ──────────────────────────────────────── */
12334
12335@media (max-width: 480px) {
12336 .cal-toolbar {
12337 padding: var(--space-xs);
12338 gap: var(--space-xs);
12339 }
12340
12341 .cal-nav-btn {
12342 padding: 0.25rem 0.5rem;
12343 font-size: 0.72rem;
12344 min-height: 32px;
12345 min-width: 32px;
12346 }
12347
12348 .cal-view-btn {
12349 padding: 0.25rem 0.5rem;
12350 font-size: 0.68rem;
12351 min-height: 32px;
12352 }
12353
12354 .cal-date-label {
12355 font-size: 0.95rem;
12356 }
12357
12358 /* Month grid — compact: no pills, just dots */
12359 .cal-month-grid {
12360 grid-auto-rows: 1fr;
12361 }
12362
12363 .cal-day-cell {
12364 padding: 1px;
12365 }
12366
12367 .cal-month-header-cell {
12368 font-size: 0.6rem;
12369 padding: var(--space-xs) 2px;
12370 }
12371
12372 /* Abbreviated day names handled by JS (S M T W T F S),
12373 but ensure cells don't overflow */
12374 .cal-month-header-cell {
12375 overflow: hidden;
12376 text-overflow: ellipsis;
12377 }
12378
12379 .cal-day-number {
12380 font-size: 0.68rem;
12381 width: 1.4em;
12382 height: 1.4em;
12383 }
12384
12385 /* Hide event pills on very small screens — show dot indicator */
12386 .cal-event-pill {
12387 width: 5px;
12388 height: 5px;
12389 border-radius: 50%;
12390 padding: 0;
12391 font-size: 0;
12392 line-height: 0;
12393 display: inline-block;
12394 margin: 0 1px 1px 0;
12395 vertical-align: top;
12396 }
12397
12398 .cal-more-link {
12399 font-size: 0;
12400 width: 5px;
12401 height: 5px;
12402 border-radius: 50%;
12403 background: var(--color-text-faint);
12404 display: inline-block;
12405 padding: 0;
12406 margin: 0 1px 1px 0;
12407 }
12408
12409 /* Week view — horizontal scroll */
12410 .cal-week-grid {
12411 overflow-x: auto;
12412 -webkit-overflow-scrolling: touch;
12413 min-width: 600px;
12414 }
12415
12416 /* Day view — full width, narrow gutter */
12417 .cal-day-grid,
12418 .cal-day-body {
12419 grid-template-columns: 40px 1fr;
12420 }
12421
12422 .cal-hour-label {
12423 font-size: 0.55rem;
12424 }
12425
12426 /* Agenda — full width, most comfortable mobile view */
12427 .cal-agenda {
12428 padding: var(--space-xs) var(--space-sm);
12429 }
12430
12431 .cal-agenda-time {
12432 width: 5em;
12433 font-size: 0.72rem;
12434 }
12435
12436 .cal-agenda-title {
12437 font-size: 0.82rem;
12438 }
12439
12440 .cal-agenda-desc {
12441 display: none;
12442 }
12443
12444 /* Modal — full width, fills viewport, scrollable body */
12445 .event-modal {
12446 padding: var(--space-md);
12447 padding-top: calc(var(--space-md) + env(safe-area-inset-top, 0));
12448 padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0));
12449 border-radius: 0;
12450 max-height: 100dvh;
12451 min-height: 100dvh;
12452 width: 100%;
12453 max-width: 100%;
12454 margin: 0;
12455 }
12456
12457 .event-modal h3 {
12458 font-size: 1.05rem;
12459 }
12460
12461 .event-modal-field input,
12462 .event-modal-field textarea,
12463 .event-modal-field select {
12464 font-size: 16px; /* prevents iOS zoom on focus */
12465 }
12466
12467 .event-modal-actions {
12468 flex-wrap: wrap;
12469 }
12470
12471 .event-modal-close {
12472 top: calc(env(safe-area-inset-top, 0) + var(--space-xs));
12473 right: var(--space-xs);
12474 width: 44px;
12475 height: 44px;
12476 font-size: 1.6rem;
12477 }
12478}
12479
12480
12481/* ── Smooth theme transitions ────────────────────────────────────────── */
12482
12483.cal-toolbar,
12484.cal-month-header-cell,
12485.cal-day-cell,
12486.cal-week-header-cell,
12487.cal-allday-cell,
12488.cal-day-header,
12489.event-modal {
12490 transition: background-color var(--transition-med), border-color var(--transition-med), color var(--transition-med);
12491}
12492
12493
12494/* ── Element Animation Keyframes (slides presenter) ──────────────── */
12495
12496@keyframes atmos-fade-in { from { opacity: 0; } to { opacity: 1; } }
12497@keyframes atmos-fade-out { from { opacity: 1; } to { opacity: 0; } }
12498@keyframes atmos-slide-in-left { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
12499@keyframes atmos-slide-in-right { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
12500@keyframes atmos-slide-in-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
12501@keyframes atmos-slide-in-down { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
12502@keyframes atmos-slide-out-left { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }
12503@keyframes atmos-slide-out-right { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
12504@keyframes atmos-slide-out-up { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
12505@keyframes atmos-slide-out-down { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
12506@keyframes atmos-zoom-in { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
12507@keyframes atmos-zoom-out { from { transform: scale(1); opacity: 1; } to { transform: scale(0.5); opacity: 0; } }
12508@keyframes atmos-bounce-in { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.05); } 70% { transform: scale(0.95); } 100% { transform: scale(1); opacity: 1; } }
12509@keyframes atmos-spin-in { from { transform: rotate(-180deg) scale(0); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } }
12510
12511/* ── Data Bars (conditional formatting) ───────────────────────────── */
12512
12513.cf-data-bar {
12514 position: absolute;
12515 bottom: 0;
12516 height: 100%;
12517 opacity: 0.3;
12518 pointer-events: none;
12519 transition: width 0.2s ease;
12520}
12521.cf-data-bar.cf-data-bar--negative { right: 50%; }
12522.cf-data-bar.cf-data-bar--positive { left: 50%; }
12523.cf-data-bar.cf-data-bar--all-positive { left: 0; }
12524
12525/* ── Icon Sets (conditional formatting) ───────────────────────────── */
12526
12527.cf-icon-set { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: middle; }
12528
12529/* ── Layers Panel (diagrams) ──────────────────────────────────────── */
12530
12531.layers-panel {
12532 position: absolute;
12533 right: 0;
12534 top: var(--topbar-h, 48px);
12535 bottom: 0;
12536 width: 220px;
12537 background: var(--color-surface);
12538 border-left: 1px solid var(--color-border);
12539 overflow-y: auto;
12540 z-index: 20;
12541 display: flex;
12542 flex-direction: column;
12543 padding: var(--space-xs);
12544 gap: var(--space-xs);
12545}
12546
12547.layers-panel h3 {
12548 margin: 0;
12549 font-size: 0.85rem;
12550 font-weight: 600;
12551 text-transform: uppercase;
12552 letter-spacing: 0.04em;
12553 color: var(--color-text-muted);
12554}
12555
12556.layer-item {
12557 display: flex;
12558 align-items: center;
12559 gap: var(--space-xs);
12560 padding: 4px 6px;
12561 border-radius: var(--radius-sm, 4px);
12562 font-size: 0.82rem;
12563 cursor: pointer;
12564 user-select: none;
12565}
12566.layer-item:hover { background: var(--color-surface-alt); }
12567.layer-item.layer-item--active { background: var(--color-teal-light); }
12568.layer-item .layer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
12569.layer-item .layer-toggle { opacity: 0.5; cursor: pointer; font-size: 0.9rem; }
12570.layer-item .layer-toggle:hover { opacity: 1; }
12571.layer-item .layer-toggle--hidden { opacity: 0.25; }
12572.layer-item .layer-toggle--locked { color: var(--color-accent); }
12573
12574.layers-panel .layers-add-btn {
12575 font-size: 0.78rem;
12576 padding: 4px 8px;
12577 border: 1px dashed var(--color-border);
12578 border-radius: var(--radius-sm, 4px);
12579 background: transparent;
12580 color: var(--color-text-muted);
12581 cursor: pointer;
12582 text-align: center;
12583}
12584.layers-panel .layers-add-btn:hover {
12585 border-color: var(--color-text-muted);
12586 color: var(--color-text);
12587}
12588
12589/* ── Type Filter Bar (landing) ────────────────────────────────────── */
12590
12591.type-filter-bar {
12592 display: flex;
12593 gap: var(--space-xs);
12594 padding: var(--space-xs) 0;
12595 overflow-x: auto;
12596 -webkit-overflow-scrolling: touch;
12597}
12598
12599.type-filter-btn {
12600 display: inline-flex;
12601 align-items: center;
12602 gap: 4px;
12603 padding: 4px 12px;
12604 border: 1px solid var(--color-border);
12605 border-radius: 999px;
12606 background: transparent;
12607 color: var(--color-text-muted);
12608 font-size: 0.78rem;
12609 cursor: pointer;
12610 white-space: nowrap;
12611 transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
12612}
12613.type-filter-btn:hover {
12614 border-color: var(--color-text-muted);
12615 color: var(--color-text);
12616}
12617.type-filter-btn.type-filter-btn--active {
12618 background: var(--color-accent);
12619 border-color: var(--color-accent);
12620 color: #fff;
12621}
12622.type-filter-btn .type-filter-count {
12623 font-size: 0.7rem;
12624 opacity: 0.7;
12625}
12626
12627/* ── Shortcut Customization Panel ─────────────────────────────────── */
12628
12629.shortcuts-settings-panel {
12630 max-width: 600px;
12631 margin: 0 auto;
12632}
12633
12634.shortcut-row {
12635 display: flex;
12636 align-items: center;
12637 gap: var(--space-sm);
12638 padding: 6px 0;
12639 border-bottom: 1px solid var(--color-border);
12640}
12641.shortcut-row:last-child { border-bottom: none; }
12642
12643.shortcut-label {
12644 flex: 1;
12645 font-size: 0.85rem;
12646}
12647.shortcut-label .shortcut-desc {
12648 display: block;
12649 font-size: 0.75rem;
12650 color: var(--color-text-muted);
12651}
12652
12653.shortcut-combo {
12654 display: inline-flex;
12655 align-items: center;
12656 gap: 2px;
12657 padding: 2px 8px;
12658 border: 1px solid var(--color-border);
12659 border-radius: var(--radius-sm, 4px);
12660 background: var(--color-surface);
12661 font-family: var(--font-mono, monospace);
12662 font-size: 0.78rem;
12663 min-width: 80px;
12664 text-align: center;
12665 cursor: pointer;
12666}
12667.shortcut-combo:hover { border-color: var(--color-accent); }
12668.shortcut-combo.shortcut-combo--recording {
12669 border-color: var(--color-accent);
12670 background: var(--color-accent);
12671 color: #fff;
12672}
12673.shortcut-combo--conflict { border-color: #c33; color: #c33; }
12674
12675.shortcut-reset-btn {
12676 font-size: 0.72rem;
12677 padding: 2px 6px;
12678 border: none;
12679 background: transparent;
12680 color: var(--color-text-muted);
12681 cursor: pointer;
12682}
12683.shortcut-reset-btn:hover { color: var(--color-accent); }
12684
12685/* ── Slides Panel Tabs ────────────────────────────────────────── */
12686
12687.slides-panel-tabs {
12688 display: flex;
12689 gap: 0;
12690 border-bottom: 1px solid var(--color-border);
12691 margin-bottom: var(--space-xs);
12692}
12693.slides-panel-tab {
12694 flex: 1;
12695 padding: 6px 0;
12696 border: none;
12697 background: transparent;
12698 font-size: 0.78rem;
12699 font-weight: 500;
12700 color: var(--color-text-muted);
12701 cursor: pointer;
12702 border-bottom: 2px solid transparent;
12703 transition: color var(--transition-fast), border-color var(--transition-fast);
12704}
12705.slides-panel-tab:hover { color: var(--color-text); }
12706.slides-panel-tab--active {
12707 color: var(--color-accent);
12708 border-bottom-color: var(--color-accent);
12709}
12710
12711.slides-anim-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 200px; }
12712.anim-row {
12713 display: flex;
12714 align-items: center;
12715 gap: 4px;
12716 padding: 4px 6px;
12717 border-radius: var(--radius-sm, 4px);
12718 background: var(--color-surface);
12719 font-size: 0.8rem;
12720}
12721.anim-row:hover { background: var(--color-surface-alt); }
12722.anim-effect { font-weight: 500; }
12723.anim-remove { margin-left: auto; opacity: 0.5; }
12724.anim-remove:hover { opacity: 1; color: var(--color-accent); }
12725.slides-anim-controls {
12726 display: flex;
12727 gap: 4px;
12728 margin-top: var(--space-xs);
12729 flex-wrap: wrap;
12730}
12731.slides-anim-controls select { font-size: 0.78rem; flex: 1; min-width: 80px; }
12732.slides-anim-hint { font-size: 0.78rem; color: var(--color-text-muted); margin: var(--space-xs) 0; }
12733
12734/* ── Slide Thumbnail Drag-to-Reorder ──────────────────────────── */
12735
12736.slides-thumbnail.dragging { opacity: 0.4; }
12737.slides-thumbnail.drag-over-top { border-top: 3px solid var(--color-accent); }
12738.slides-thumbnail.drag-over-bottom { border-bottom: 3px solid var(--color-accent); }
12739.slides-thumbnail { cursor: grab; transition: opacity 0.15s; }
12740.slides-thumbnail:active { cursor: grabbing; }
12741
12742/* ── Presence / Who's Online Sidebar ─────────────────────────── */
12743
12744.presence-sidebar {
12745 position: fixed;
12746 right: 0;
12747 top: var(--topbar-h, 48px);
12748 width: 240px;
12749 max-height: calc(100vh - var(--topbar-h, 48px));
12750 background: var(--color-surface);
12751 border-left: 1px solid var(--color-border);
12752 overflow-y: auto;
12753 z-index: 30;
12754 padding: var(--space-sm);
12755 display: flex;
12756 flex-direction: column;
12757 gap: var(--space-xs);
12758 box-shadow: -2px 0 8px rgba(0,0,0,0.05);
12759}
12760
12761.presence-sidebar h3 {
12762 margin: 0;
12763 font-size: 0.85rem;
12764 font-weight: 600;
12765 color: var(--color-text-muted);
12766 text-transform: uppercase;
12767 letter-spacing: 0.04em;
12768}
12769
12770.presence-user {
12771 display: flex;
12772 align-items: center;
12773 gap: var(--space-xs);
12774 padding: 6px 8px;
12775 border-radius: var(--radius-sm, 4px);
12776}
12777.presence-user:hover { background: var(--color-surface-alt); }
12778
12779.presence-avatar {
12780 width: 28px;
12781 height: 28px;
12782 border-radius: 50%;
12783 display: flex;
12784 align-items: center;
12785 justify-content: center;
12786 color: #fff;
12787 font-weight: 600;
12788 font-size: 0.75rem;
12789 flex-shrink: 0;
12790}
12791
12792.presence-info {
12793 flex: 1;
12794 min-width: 0;
12795}
12796.presence-name {
12797 font-size: 0.82rem;
12798 font-weight: 500;
12799 overflow: hidden;
12800 text-overflow: ellipsis;
12801 white-space: nowrap;
12802}
12803.presence-status {
12804 font-size: 0.7rem;
12805 color: var(--color-text-muted);
12806}
12807.presence-dot {
12808 width: 8px;
12809 height: 8px;
12810 border-radius: 50%;
12811 flex-shrink: 0;
12812}
12813.presence-dot--active { background: #4caf50; }
12814.presence-dot--stale { background: #ff9800; }
12815
12816/* ── Content Search Results (landing) ─────────────────────────── */
12817
12818.content-search-header {
12819 font-size: 0.8rem;
12820 font-weight: 600;
12821 color: var(--color-text-muted);
12822 text-transform: uppercase;
12823 letter-spacing: 0.04em;
12824 padding: var(--space-xs) 0;
12825 border-top: 1px solid var(--color-border);
12826 margin-top: var(--space-sm);
12827 display: flex;
12828 align-items: center;
12829 gap: var(--space-xs);
12830}
12831.content-search-count {
12832 font-size: 0.7rem;
12833 background: var(--color-surface-alt);
12834 padding: 1px 6px;
12835 border-radius: 999px;
12836}
12837.content-search-list { display: flex; flex-direction: column; gap: 2px; }
12838.content-search-item {
12839 display: flex;
12840 flex-direction: column;
12841 gap: 2px;
12842 padding: 8px 10px;
12843 border-radius: var(--radius-sm, 4px);
12844 text-decoration: none;
12845 color: var(--color-text);
12846 transition: background var(--transition-fast);
12847}
12848.content-search-item:hover { background: var(--color-surface-alt); }
12849.content-search-name { font-size: 0.85rem; font-weight: 500; }
12850.content-search-snippet {
12851 font-size: 0.78rem;
12852 color: var(--color-text-muted);
12853 overflow: hidden;
12854 text-overflow: ellipsis;
12855 white-space: nowrap;
12856}
12857.content-search-snippet mark {
12858 background: var(--color-teal-light);
12859 color: var(--color-text);
12860 border-radius: 2px;
12861 padding: 0 2px;
12862}
12863.content-search-meta { font-size: 0.7rem; color: var(--color-text-faint); }
12864
12865.content-search-header--forge {
12866 color: oklch(0.45 0.1 250);
12867 font-weight: 600;
12868}
12869
12870.content-search-item--forge {
12871 border-left: 3px solid oklch(0.65 0.1 250);
12872 padding-left: 8px;
12873}
12874
12875.content-search-badge {
12876 margin-left: 8px;
12877 padding: 1px 6px;
12878 border-radius: 3px;
12879 font-size: 0.65rem;
12880 font-weight: 600;
12881 text-transform: uppercase;
12882 letter-spacing: 0.04em;
12883 vertical-align: 1px;
12884}
12885
12886.content-search-badge--forge {
12887 background: oklch(0.92 0.04 250);
12888 color: oklch(0.45 0.1 250);
12889}
12890
12891/* ── Batch Action Bar (landing multi-select) ──────────────────── */
12892
12893.batch-action-bar {
12894 position: fixed;
12895 bottom: var(--space-md, 16px);
12896 left: 50%;
12897 transform: translateX(-50%);
12898 display: flex;
12899 align-items: center;
12900 gap: var(--space-xs);
12901 padding: 8px 16px;
12902 background: var(--color-text);
12903 color: var(--color-bg);
12904 border-radius: 999px;
12905 box-shadow: 0 4px 16px rgba(0,0,0,0.2);
12906 z-index: 100;
12907 font-size: 0.82rem;
12908 animation: atmos-fade-in 0.15s ease;
12909}
12910.batch-count { font-weight: 600; margin-right: var(--space-xs); }
12911.batch-btn {
12912 border: none;
12913 background: rgba(255,255,255,0.15);
12914 color: inherit;
12915 padding: 4px 10px;
12916 border-radius: 999px;
12917 font-size: 0.78rem;
12918 cursor: pointer;
12919 white-space: nowrap;
12920 transition: background 0.15s;
12921}
12922.batch-btn:hover { background: rgba(255,255,255,0.25); }
12923.batch-btn--danger:hover { background: rgba(220,50,50,0.6); }
12924
12925/* ── Footnote Footer ──────────────────────────────────────────── */
12926
12927.footnote-footer { margin-top: 2rem; padding-top: 0; }
12928.footnote-divider { border: none; border-top: 1px solid var(--color-border); margin: 0 0 0.75rem 0; width: 40%; }
12929.footnote-list { margin: 0; padding-left: 1.5em; font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.6; }
12930.footnote-entry { margin-bottom: 4px; }
12931.footnote-backref { color: var(--color-accent); text-decoration: none; font-weight: 600; cursor: pointer; }
12932.footnote-backref:hover { text-decoration: underline; }
12933.footnote-content { color: var(--color-text); }
12934.footnote-marker { cursor: help; color: var(--color-accent); font-weight: 600; }
12935.footnote-highlight { background: var(--color-teal-light); border-radius: 2px; transition: background 0.3s; }
12936
12937/* ── Suggestions Panel ────────────────────────────────────────── */
12938
12939.suggestions-panel { padding: var(--space-sm); }
12940.suggestions-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-xs); }
12941.suggestions-count { font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted); }
12942.suggestions-bulk { display: flex; gap: 4px; }
12943.suggestions-empty { font-size: 0.82rem; color: var(--color-text-muted); text-align: center; padding: var(--space-md) 0; }
12944.suggestions-list { display: flex; flex-direction: column; gap: 6px; }
12945
12946.suggestion-item {
12947 padding: 8px 10px;
12948 border-radius: var(--radius-sm, 4px);
12949 border-left: 3px solid var(--color-border);
12950 background: var(--color-surface);
12951}
12952.suggestion-item--insert { border-left-color: #2ecc71; }
12953.suggestion-item--delete { border-left-color: #e74c3c; }
12954.suggestion-meta { font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 2px; }
12955.suggestion-type { font-weight: 600; }
12956.suggestion-item--insert .suggestion-type { color: #2ecc71; }
12957.suggestion-item--delete .suggestion-type { color: #e74c3c; }
12958.suggestion-preview { font-size: 0.82rem; margin-bottom: 4px; color: var(--color-text); }
12959.suggestion-actions { display: flex; gap: 4px; }
12960.suggestion-accept { background: #2ecc71; color: #fff; border: none; border-radius: 3px; padding: 2px 8px; font-size: 0.72rem; cursor: pointer; }
12961.suggestion-accept:hover { background: #27ae60; }
12962.suggestion-reject { background: #e74c3c; color: #fff; border: none; border-radius: 3px; padding: 2px 8px; font-size: 0.72rem; cursor: pointer; }
12963.suggestion-reject:hover { background: #c0392b; }
12964.suggestions-accept-all { background: #2ecc71; color: #fff; border: none; border-radius: 3px; padding: 3px 8px; font-size: 0.72rem; cursor: pointer; }
12965.suggestions-reject-all { background: #e74c3c; color: #fff; border: none; border-radius: 3px; padding: 3px 8px; font-size: 0.72rem; cursor: pointer; }
12966
12967/* ── Form Response Analytics ──────────────────────────────────── */
12968
12969.analytics-summary { display: flex; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-sm) 0; }
12970.analytics-stat { text-align: center; padding: var(--space-sm) var(--space-md); background: var(--color-surface); border-radius: var(--radius-sm, 4px); }
12971.analytics-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--color-text); display: block; }
12972.analytics-stat-label { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
12973.analytics-chart { margin: var(--space-sm) 0; padding: var(--space-sm); background: var(--color-surface); border-radius: var(--radius-sm, 4px); }
12974.analytics-chart h4 { margin: 0 0 var(--space-xs); font-size: 0.85rem; }
12975
12976/* ── Math Block (KaTeX) ───────────────────────────────────────── */
12977
12978.math-block-wrapper {
12979 position: relative;
12980 margin: 1em 0;
12981 padding: 12px 16px;
12982 border: 1px solid var(--color-border);
12983 border-radius: var(--radius-sm, 4px);
12984 background: var(--color-surface);
12985 cursor: pointer;
12986}
12987.math-block-wrapper:hover { border-color: var(--color-text-muted); }
12988.math-block-output { min-height: 1.5em; overflow-x: auto; }
12989.math-block-output .katex-display { margin: 0.5em 0; }
12990.math-placeholder { color: var(--color-text-faint); font-style: italic; font-size: 0.85rem; }
12991.math-error { color: #c33; font-size: 0.8rem; font-family: var(--font-mono, monospace); }
12992.math-block-toolbar {
12993 position: absolute;
12994 top: 4px;
12995 right: 4px;
12996 display: flex;
12997 gap: 4px;
12998}
12999.math-block-btn {
13000 padding: 2px 8px;
13001 border: 1px solid var(--color-border);
13002 border-radius: 3px;
13003 background: var(--color-bg);
13004 color: var(--color-text-muted);
13005 font-size: 0.72rem;
13006 cursor: pointer;
13007}
13008.math-block-btn:hover { background: var(--color-surface-alt); color: var(--color-text); }
13009.math-block-editor {
13010 width: 100%;
13011 min-height: 60px;
13012 margin-top: 8px;
13013 padding: 8px;
13014 border: 1px solid var(--color-border);
13015 border-radius: 3px;
13016 background: var(--color-bg);
13017 color: var(--color-text);
13018 font-family: var(--font-mono, monospace);
13019 font-size: 0.85rem;
13020 resize: vertical;
13021}
13022
13023/* TOC Block */
13024.toc-block-wrapper {
13025 position: relative;
13026 margin: 1em 0;
13027 padding: 16px 20px;
13028 border: 1px solid var(--color-border);
13029 border-radius: var(--radius-sm, 4px);
13030 background: var(--color-surface);
13031}
13032.toc-block-wrapper:hover { border-color: var(--color-text-muted); }
13033.toc-block-header {
13034 font-size: 0.75rem;
13035 font-weight: 600;
13036 text-transform: uppercase;
13037 letter-spacing: 0.05em;
13038 color: var(--color-text-muted);
13039 margin-bottom: 8px;
13040}
13041.toc-block-content .toc-list {
13042 margin: 0;
13043 padding: 0;
13044 list-style: none;
13045}
13046.toc-block-content .toc-list ul {
13047 margin: 0;
13048 padding-left: 1.25em;
13049 list-style: none;
13050}
13051.toc-block-content .toc-item { margin: 2px 0; }
13052.toc-block-content .toc-item a {
13053 color: var(--color-primary);
13054 text-decoration: none;
13055 font-size: 0.9rem;
13056 line-height: 1.6;
13057 border-bottom: 1px solid transparent;
13058 transition: border-color 0.15s;
13059}
13060.toc-block-content .toc-item a:hover {
13061 border-bottom-color: var(--color-primary);
13062}
13063.toc-block-content .toc-level-1 a { font-weight: 600; }
13064.toc-block-content .toc-level-2 a { font-weight: 500; }
13065.toc-block-empty {
13066 color: var(--color-text-faint);
13067 font-style: italic;
13068 font-size: 0.85rem;
13069}