@rigel-cms/rigel 0.0.0-stage → 0.1.3-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/LICENSE +203 -0
  2. package/README.md +16 -2
  3. package/package.json +83 -4
  4. package/src/article-body.ts +60 -0
  5. package/src/article-render.ts +87 -0
  6. package/src/config.ts +103 -0
  7. package/src/content.ts +5 -0
  8. package/src/editor/App.svelte +981 -0
  9. package/src/editor/assets/rigelcms-icon.png +0 -0
  10. package/src/editor/assets/sidebar/LICENSE +21 -0
  11. package/src/editor/assets/sidebar/book-open.svg +1 -0
  12. package/src/editor/assets/sidebar/calendar.svg +1 -0
  13. package/src/editor/assets/sidebar/chart-bar.svg +1 -0
  14. package/src/editor/assets/sidebar/file-text.svg +1 -0
  15. package/src/editor/assets/sidebar/files.svg +1 -0
  16. package/src/editor/assets/sidebar/folder.svg +1 -0
  17. package/src/editor/assets/sidebar/folders.svg +1 -0
  18. package/src/editor/assets/sidebar/gear.svg +1 -0
  19. package/src/editor/assets/sidebar/globe.svg +1 -0
  20. package/src/editor/assets/sidebar/heart.svg +1 -0
  21. package/src/editor/assets/sidebar/house.svg +1 -0
  22. package/src/editor/assets/sidebar/images.svg +1 -0
  23. package/src/editor/assets/sidebar/layout.svg +1 -0
  24. package/src/editor/assets/sidebar/list.svg +1 -0
  25. package/src/editor/assets/sidebar/magnifying-glass.svg +1 -0
  26. package/src/editor/assets/sidebar/megaphone.svg +1 -0
  27. package/src/editor/assets/sidebar/newspaper.svg +1 -0
  28. package/src/editor/assets/sidebar/pencil-simple.svg +1 -0
  29. package/src/editor/assets/sidebar/shopping-bag.svg +1 -0
  30. package/src/editor/assets/sidebar/sidebar-simple.svg +1 -0
  31. package/src/editor/assets/sidebar/square-half.svg +1 -0
  32. package/src/editor/assets/sidebar/squares-four.svg +1 -0
  33. package/src/editor/assets/sidebar/tag.svg +1 -0
  34. package/src/editor/assets/sidebar/user.svg +1 -0
  35. package/src/editor/assets/sidebar/users.svg +1 -0
  36. package/src/editor/blocks/bulleted-list.ts +2 -0
  37. package/src/editor/blocks/code.ts +1 -0
  38. package/src/editor/blocks/divider.ts +14 -0
  39. package/src/editor/blocks/h1.ts +2 -0
  40. package/src/editor/blocks/h2.ts +2 -0
  41. package/src/editor/blocks/h3.ts +2 -0
  42. package/src/editor/blocks/h4.ts +2 -0
  43. package/src/editor/blocks/h5.ts +2 -0
  44. package/src/editor/blocks/h6.ts +2 -0
  45. package/src/editor/blocks/image.ts +34 -0
  46. package/src/editor/blocks/index.ts +40 -0
  47. package/src/editor/blocks/numbered-list.ts +2 -0
  48. package/src/editor/blocks/paragraph.ts +1 -0
  49. package/src/editor/blocks/quote.ts +1 -0
  50. package/src/editor/blocks/table.ts +5 -0
  51. package/src/editor/lib/ActionDialog.svelte +51 -0
  52. package/src/editor/lib/BlockEditor.svelte +614 -0
  53. package/src/editor/lib/CollectionPanel.svelte +103 -0
  54. package/src/editor/lib/DatePicker.svelte +106 -0
  55. package/src/editor/lib/Field.svelte +80 -0
  56. package/src/editor/lib/Icon.svelte +34 -0
  57. package/src/editor/lib/ImagePicker.svelte +264 -0
  58. package/src/editor/lib/MarkdownEditor.svelte +206 -0
  59. package/src/editor/lib/MenuEditor.svelte +209 -0
  60. package/src/editor/lib/PreviewFrame.svelte +45 -0
  61. package/src/editor/lib/PropertiesTabs.svelte +15 -0
  62. package/src/editor/lib/ReferenceSelect.svelte +17 -0
  63. package/src/editor/lib/SchemaField.svelte +156 -0
  64. package/src/editor/lib/SchemaPanel.svelte +189 -0
  65. package/src/editor/lib/Select.svelte +138 -0
  66. package/src/editor/lib/SeoGuidance.svelte +21 -0
  67. package/src/editor/lib/Settings.svelte +183 -0
  68. package/src/editor/lib/Shortcuts.svelte +29 -0
  69. package/src/editor/lib/SidebarIcon.svelte +8 -0
  70. package/src/editor/lib/SitePreview.svelte +51 -0
  71. package/src/editor/lib/TopBar.svelte +165 -0
  72. package/src/editor/lib/UnsavedChanges.svelte +38 -0
  73. package/src/editor/lib/VisualEditor.svelte +492 -0
  74. package/src/editor/lib/calendar.ts +55 -0
  75. package/src/editor/lib/github-auth.ts +117 -0
  76. package/src/editor/lib/github-backend.ts +263 -0
  77. package/src/editor/lib/icons.ts +111 -0
  78. package/src/editor/lib/images.ts +195 -0
  79. package/src/editor/lib/markdown.ts +71 -0
  80. package/src/editor/lib/media-library.ts +39 -0
  81. package/src/editor/lib/menu-tree.ts +37 -0
  82. package/src/editor/lib/preview-frame.ts +29 -0
  83. package/src/editor/lib/rich-markdown.ts +30 -0
  84. package/src/editor/lib/schema-edit.ts +110 -0
  85. package/src/editor/lib/settings.ts +103 -0
  86. package/src/editor/lib/slugify.ts +10 -0
  87. package/src/editor/lib/storage.ts +17 -0
  88. package/src/editor/lib/store.svelte.ts +33 -0
  89. package/src/editor/main.ts +9 -0
  90. package/src/editor/styles.css +1281 -0
  91. package/src/env.d.ts +22 -0
  92. package/src/index.ts +128 -0
  93. package/src/manifest/collections.ts +27 -0
  94. package/src/manifest/frontmatter.ts +56 -0
  95. package/src/manifest/loader.ts +14 -0
  96. package/src/manifest/menu.ts +46 -0
  97. package/src/manifest/navigation.ts +94 -0
  98. package/src/manifest/references.ts +39 -0
  99. package/src/manifest/seo.ts +15 -0
  100. package/src/manifest/types.ts +76 -0
  101. package/src/media-types.ts +21 -0
  102. package/src/preview-urls.ts +12 -0
  103. package/src/preview.ts +175 -0
  104. package/src/routes/local-api.ts +42 -0
  105. package/src/routes/local-documents.ts +83 -0
  106. package/src/routes/local-media.ts +124 -0
  107. package/src/routes/local-menu.ts +81 -0
  108. package/src/routes/local-post.ts +80 -0
  109. package/src/routes/manifest.json.ts +15 -0
  110. package/src/routes/media-files.ts +126 -0
  111. package/src/routes/media-validation.ts +37 -0
  112. package/src/routes/media.json.ts +12 -0
  113. package/src/routes/rigel-page.astro +25 -0
  114. package/src/routes/serialize.ts +139 -0
  115. package/src/schema/docs.ts +33 -0
  116. package/src/schema/paths.ts +136 -0
  117. package/src/schema/store.ts +141 -0
  118. package/src/schema/types.ts +81 -0
  119. package/src/schema/validate.ts +327 -0
  120. package/src/vite/manifest-plugin.ts +182 -0
@@ -0,0 +1,1281 @@
1
+ .rigel, .rigel *, .rigel *::before, .rigel *::after { box-sizing: border-box; }
2
+ .rigel {
3
+ --rigel-50: #EFFBFF;
4
+ --rigel-100: #D9F4FF;
5
+ --rigel-200: #ADE8FF;
6
+ --rigel-300: #72D8FF;
7
+ --rigel-400: #36BFFF;
8
+ --rigel-500: #079AF2;
9
+ --rigel-600: #0075CC;
10
+ --rigel-700: #005AA3;
11
+ --rigel-800: #084B85;
12
+ --rigel-900: #0C3E6B;
13
+ --rigel-950: #062644;
14
+ --space-50: #F8FAFC;
15
+ --space-100: #F1F5F9;
16
+ --space-200: #E2E8F0;
17
+ --space-300: #CBD5E1;
18
+ --space-400: #94A3B8;
19
+ --space-500: #64748B;
20
+ --space-600: #475569;
21
+ --space-700: #334155;
22
+ --space-800: #1E293B;
23
+ --space-900: #111C2E;
24
+ --space-950: #080F1C;
25
+ }
26
+
27
+ .rigel.connection-shell { align-items: center; justify-content: center; padding: 1.5rem; min-height: 100dvh; }
28
+ .rigel .connection-card { flex: none; width: 100%; max-width: 560px; margin: 0; padding: 2rem; background: var(--panel); border: 1px solid var(--border); overflow-wrap: anywhere; }
29
+ .rigel .connection-card h1 { margin: 1rem 0; font-size: 1.75rem; line-height: 1.2; }
30
+ .rigel .connection-card p { margin: 1rem 0; }
31
+ .rigel .connection-card :is(button, a.primary) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.625rem 1rem; font: inherit; text-decoration: none; text-align: center; }
32
+ .rigel .connection-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
33
+ .rigel .connection-note { color: var(--text-muted); font-size: 0.8125rem; }
34
+ .rigel .connection-error { color: var(--danger); }
35
+ .rigel .github-session { margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--border-control); background: var(--surface-raised); }
36
+ .rigel .github-session p { margin: 0 0 0.75rem; }
37
+ .rigel .github-reconnect { min-height: 44px; }
38
+ @media (max-width: 480px) { .rigel.connection-shell { padding: 1rem; } .rigel .connection-card { padding: 1.25rem; } }
39
+
40
+ /* Shell layout — applied only to the editor shell, not modal backdrops */
41
+ .rigel:not(.rigel-modal-backdrop) {
42
+ display: flex;
43
+ min-height: 100vh;
44
+ background: var(--background);
45
+ }
46
+
47
+ /* Tokens — both shell AND modal backdrops */
48
+ .rigel {
49
+ color-scheme: light;
50
+ --background: var(--space-50);
51
+ --surface: #FFFFFF;
52
+ --surface-raised: var(--space-100);
53
+ --text: var(--space-950);
54
+ --text-muted: var(--space-600);
55
+ --border-subtle: var(--space-300);
56
+ --border-control: var(--space-500);
57
+ --accent: var(--rigel-700);
58
+ --accent-hover: var(--rigel-800);
59
+ --accent-active: var(--rigel-900);
60
+ --on-accent: #FFFFFF;
61
+ --link: var(--rigel-800);
62
+ --accent-soft: var(--rigel-100);
63
+ --on-accent-soft: var(--rigel-900);
64
+ --focus-ring: var(--rigel-700);
65
+ --success: #166534;
66
+ --success-soft: #DCFCE7;
67
+ --warning: #92400E;
68
+ --warning-soft: #FEF3C7;
69
+ --danger: #991B1B;
70
+ --danger-soft: #FEE2E2;
71
+ --bg: var(--background);
72
+ --panel: var(--surface);
73
+ --border: var(--border-subtle);
74
+ --text-2: var(--text-muted);
75
+ --text-3: var(--text-muted);
76
+
77
+ --radius: 0;
78
+ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
79
+ --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
80
+ --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.16);
81
+ --sidebar-w: 256px;
82
+
83
+ font: 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
84
+ color: var(--text);
85
+ }
86
+
87
+ /* ── Sidebar rail ──────────────────────── */
88
+ .rigel > aside {
89
+ width: var(--sidebar-w);
90
+ flex-shrink: 0;
91
+ background: var(--panel);
92
+ border-right: 1px solid var(--border);
93
+ padding: 0;
94
+ display: flex;
95
+ flex-direction: column;
96
+ gap: 0;
97
+ height: 100vh;
98
+ height: 100dvh;
99
+ box-sizing: border-box;
100
+ overflow: hidden;
101
+ position: sticky;
102
+ top: 0;
103
+ }
104
+ .rigel .rail-scroll {
105
+ flex: 1;
106
+ min-height: 0;
107
+ overflow-y: auto;
108
+ display: flex;
109
+ flex-direction: column;
110
+ border-top: 1px solid var(--border);
111
+ padding-block: 0.75rem;
112
+ }
113
+ .rigel .brand {
114
+ display: flex;
115
+ align-items: center;
116
+ gap: 0.5rem;
117
+ font-weight: 700;
118
+ font-size: 0.9375rem;
119
+ letter-spacing: -0.01em;
120
+ padding: 1rem 0.75rem;
121
+ color: var(--text);
122
+ text-decoration: none;
123
+ border-radius: 0;
124
+ cursor: pointer;
125
+ }
126
+ .rigel .brand:focus-visible {
127
+ outline: 3px solid var(--focus-ring);
128
+ outline-offset: 3px;
129
+ }
130
+ .rigel aside > button {
131
+ display: flex;
132
+ align-items: center;
133
+ width: 100%;
134
+ text-align: left;
135
+ padding: 0.4375rem 0.625rem;
136
+ border: none;
137
+ background: none;
138
+ border-radius: 0;
139
+ cursor: pointer;
140
+ font-size: 0.875rem;
141
+ color: var(--text-2);
142
+ transition: background 0.1s;
143
+ font-weight: 500;
144
+ flex-shrink: 0;
145
+ }
146
+ .rigel aside > button:hover { background: var(--surface-raised); color: var(--text); }
147
+ .rigel aside > button.active {
148
+ background: var(--accent-soft);
149
+ color: var(--on-accent-soft);
150
+ font-weight: 600;
151
+ }
152
+ .rigel .rail-scroll > button {
153
+ display: flex;
154
+ align-items: center;
155
+ width: calc(100% - 1.25rem);
156
+ text-align: left;
157
+ padding: 0.625rem 0.625rem;
158
+ margin: 0.25rem 0.625rem;
159
+ border: none;
160
+ background: none;
161
+ border-radius: 0;
162
+ cursor: pointer;
163
+ font-size: 0.875rem;
164
+ color: var(--text-2);
165
+ transition: background 0.1s;
166
+ font-weight: 500;
167
+ flex-shrink: 0;
168
+ }
169
+ .rigel .rail-scroll > button:hover { background: var(--surface-raised); color: var(--text); }
170
+ .rigel .sidebar-asset-icon { display: inline-block; width: 18px; height: 18px; flex-shrink: 0; background-color: currentColor; mask-image: var(--sidebar-icon); mask-position: center; mask-size: contain; mask-repeat: no-repeat; }
171
+ .rigel .rail-scroll > button { gap: 0.625rem; }
172
+ .rigel aside > button.sidebar-toggle { gap: 0.625rem; width: calc(100% - 1.5rem); margin: 0 0.75rem 0.5rem; padding: 0.625rem; font-size: 0.75rem; }
173
+ @media (min-width: 768px) {
174
+ .rigel.sidebar-collapsed { --sidebar-w: 64px; }
175
+ .rigel.sidebar-collapsed .brand { justify-content: center; padding-inline: 0.5rem; }
176
+ .rigel.sidebar-collapsed .brand > span,
177
+ .rigel.sidebar-collapsed .sidebar-label,
178
+ .rigel.sidebar-collapsed .search-trigger kbd,
179
+ .rigel.sidebar-collapsed .user-btn > .user-details,
180
+ .rigel.sidebar-collapsed .user-btn > .user-menu-icon { display: none; }
181
+ .rigel.sidebar-collapsed .rail-scroll > button,
182
+ .rigel.sidebar-collapsed .search-trigger,
183
+ .rigel.sidebar-collapsed .sidebar-toggle { justify-content: center; }
184
+ .rigel.sidebar-collapsed .sidebar-heading { height: 1px; font-size: 0; padding: 0; margin: 0.75rem 0.625rem; border-top: 1px solid var(--border-subtle); }
185
+ .rigel.sidebar-collapsed .aside-foot { padding: 0.75rem 0.5rem; }
186
+ .rigel.sidebar-collapsed .user-btn { padding: 0.25rem; justify-content: center; }
187
+ }
188
+ @media (max-width: 767px) {
189
+ .rigel aside > button.sidebar-toggle { display: none; }
190
+ }
191
+ @media (forced-colors: active) {
192
+ .rigel .sidebar-asset-icon { forced-color-adjust: none; background-color: CanvasText; }
193
+ }
194
+ .rigel .sidebar-heading { margin: 1.5rem 0 0.375rem; padding: 0 0.75rem; color: var(--text-3); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; }
195
+ .rigel .sidebar-separator { width: 100%; margin: 0.75rem 0; border: 0; border-top: 1px solid var(--border-subtle); flex-shrink: 0; }
196
+ .rigel .rail-scroll > button.active {
197
+ background: var(--accent-soft);
198
+ color: var(--on-accent-soft);
199
+ font-weight: 600;
200
+ }
201
+ .rigel .search-trigger {
202
+ display: flex;
203
+ align-items: center;
204
+ gap: 0.5rem;
205
+ width: calc(100% - 1.5rem);
206
+ padding: 0.4375rem 0.625rem;
207
+ margin: 0.25rem 0.75rem 1.5rem;
208
+ background: var(--bg);
209
+ border: 1px solid var(--border-control);
210
+ border-radius: 0;
211
+ color: var(--text-3);
212
+ font-size: 0.8125rem;
213
+ font-weight: 400;
214
+ cursor: pointer;
215
+ font-family: inherit;
216
+ }
217
+ .rigel .search-trigger:hover { border-color: var(--text-3); }
218
+ .rigel .search-trigger kbd {
219
+ margin-left: auto;
220
+ font: 600 0.6875rem ui-monospace, monospace;
221
+ background: var(--panel);
222
+ border: 1px solid var(--border);
223
+ border-radius: 0;
224
+ padding: 0.0625rem 0.3125rem;
225
+ color: var(--text-2);
226
+ }
227
+ .rigel .magnifier { font-size: 0.9375rem; }
228
+
229
+ .rigel .aside-foot {
230
+ margin-top: auto;
231
+ padding: 1rem 0.75rem;
232
+ border-top: 1px solid var(--border);
233
+ }
234
+ .rigel .user-menu-wrap { position: relative; }
235
+ .rigel .user-btn {
236
+ display: flex;
237
+ align-items: center;
238
+ gap: 0.5rem;
239
+ width: 100%;
240
+ padding: 0.4375rem 0.5rem;
241
+ border: none;
242
+ background: none;
243
+ border-radius: 0;
244
+ cursor: pointer;
245
+ font-size: 0.875rem;
246
+ font-weight: 500;
247
+ color: var(--text);
248
+ text-align: left;
249
+ }
250
+ .rigel .user-btn:hover { background: var(--surface-raised); }
251
+ .rigel .avatar {
252
+ width: 36px;
253
+ height: 36px;
254
+ border-radius: 50%;
255
+ border: 1px solid var(--border-control);
256
+ overflow: hidden;
257
+ background: var(--accent);
258
+ color: var(--on-accent);
259
+ font-size: 0.6875rem;
260
+ font-weight: 700;
261
+ display: flex;
262
+ align-items: center;
263
+ justify-content: center;
264
+ flex-shrink: 0;
265
+ }
266
+ .rigel .avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
267
+ .rigel .uname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
268
+ .rigel .user-details { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 0.125rem; }
269
+ .rigel .user-details small { color: var(--text-muted); font-size: 0.75rem; font-weight: 400; }
270
+ .rigel .user-details strong, .rigel .user-details small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
271
+ .rigel .user-menu-icon { display: flex; align-items: center; color: var(--text-muted); }
272
+ .rigel aside:has(.user-menu) { overflow: visible; z-index: 30; }
273
+ .rigel .user-menu {
274
+ position: absolute;
275
+ bottom: 0;
276
+ left: calc(100% + 1rem);
277
+ width: 256px;
278
+ background: var(--panel);
279
+ border: 1px solid var(--border);
280
+ border-radius: 0;
281
+ box-shadow: var(--shadow-md);
282
+ padding: 0.25rem;
283
+ z-index: 10;
284
+ }
285
+ .rigel .user-menu button {
286
+ display: flex;
287
+ justify-content: flex-start;
288
+ align-items: center;
289
+ width: 100%;
290
+ padding: 0.4375rem 0.625rem;
291
+ border: none;
292
+ background: none;
293
+ border-radius: 0;
294
+ cursor: pointer;
295
+ font-size: 0.8125rem;
296
+ color: var(--text);
297
+ text-align: left;
298
+ font-weight: 500;
299
+ }
300
+ .rigel .user-menu button:hover:not(:disabled) { background: var(--surface-raised); }
301
+ .rigel .user-menu button.muted { color: var(--text-3); cursor: default; }
302
+ .rigel .user-menu .soon {
303
+ margin-left: auto;
304
+ font-size: 0.625rem;
305
+ background: var(--bg);
306
+ padding: 0.125rem 0.375rem;
307
+ border-radius: 0;
308
+ letter-spacing: 0.02em;
309
+ }
310
+ .rigel .user-menu-head {
311
+ display: flex; align-items: center; gap: 0.75rem;
312
+ padding: 0.4375rem 0.625rem;
313
+ font-size: 0.8125rem;
314
+ color: var(--text-2);
315
+ }
316
+ .rigel .user-menu-head strong { color: var(--text); }
317
+ .rigel .user-menu .divider {
318
+ height: 1px;
319
+ background: var(--border);
320
+ margin: 0.25rem 0;
321
+ }
322
+ .rigel .user-menu a {
323
+ display: flex;
324
+ align-items: center;
325
+ width: 100%;
326
+ padding: 0.4375rem 0.625rem;
327
+ font-size: 0.8125rem;
328
+ color: var(--text);
329
+ text-decoration: none;
330
+ border-radius: 0;
331
+ font-weight: 500;
332
+ box-sizing: border-box;
333
+ }
334
+ .rigel .user-menu a:hover { background: var(--surface-raised); }
335
+ @media (max-width: 600px) {
336
+ .rigel .user-menu { left: 0; bottom: calc(100% + 0.5rem); width: min(256px, calc(100vw - 2rem)); }
337
+ }
338
+ .rigel .rigel-modal table.keys { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
339
+ .rigel .rigel-modal table.keys td { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
340
+ .rigel .rigel-modal table.keys tr:last-child td { border-bottom: none; }
341
+ .rigel .rigel-modal table.keys kbd {
342
+ font: 600 0.75rem ui-monospace, monospace;
343
+ background: var(--bg);
344
+ border: 1px solid var(--border);
345
+ border-radius: 0;
346
+ padding: 0.1875rem 0.5rem;
347
+ }
348
+
349
+ /* ── Content column ────────────────────── */
350
+ .rigel .content.with-preview { display: grid; grid-template-columns: minmax(0, var(--editor-split)) 10px minmax(0, var(--preview-split)); align-items: start; }
351
+ .rigel .preview-divider { position: sticky; top: 0; height: 100dvh; cursor: col-resize; touch-action: none; background: var(--panel); border-inline: 1px solid var(--border); }
352
+ .rigel .preview-divider:hover, .rigel .preview-divider:focus-visible, .rigel .resizing-preview .preview-divider { background: var(--border-control); }
353
+ .rigel .preview-divider:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
354
+ .rigel .resizing-preview { cursor: col-resize; user-select: none; }
355
+ .rigel .resizing-preview iframe { pointer-events: none; }
356
+ .rigel .site-preview { position: sticky; top: 0; min-width: 0; height: 100dvh; display: flex; flex-direction: column; padding: 1.5rem 1rem; border-left: 1px solid var(--border); background: var(--panel); }
357
+ .rigel .preview-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
358
+
359
+ .rigel .preview-heading span, .rigel .site-preview small { color: var(--text-muted); font-size: 0.75rem; }
360
+ .rigel .site-preview p { overflow-wrap: anywhere; font-size: 0.8125rem; }
361
+ .rigel .site-preview .preview-error { color: var(--danger); }
362
+ .rigel .site-preview iframe { flex: 1; width: 100%; min-height: 300px; border: 1px solid var(--border); background: white; }
363
+ .rigel .site-preview small { padding-top: 0.75rem; }
364
+ .rigel .preview-retry { align-self: start; }
365
+ @media (max-width: 1050px) {
366
+ .rigel .preview-divider { display: none; }
367
+ .rigel .content.with-preview { grid-template-columns: minmax(0, 1fr); }
368
+ .rigel .site-preview { position: static; height: 70dvh; border-left: 0; border-top: 1px solid var(--border); }
369
+ }
370
+ @media (max-width: 600px) {
371
+ .rigel:not(.rigel-modal-backdrop) { flex-direction: column; }
372
+ .rigel > aside { position: static; width: 100%; height: auto; }
373
+ .rigel .rail-scroll { flex-direction: row; flex-wrap: wrap; }
374
+ .rigel .sidebar-heading { flex-basis: 100%; margin-top: 0.75rem; }
375
+ .rigel .rail-scroll > button { width: auto; gap: 0.5rem; }
376
+ .rigel .aside-foot { padding: 0.5rem 0.75rem; }
377
+ .rigel main { padding: 1rem; width: 100%; }
378
+ .rigel section, .rigel .list-item { padding-inline: 0.75rem; min-width: 0; }
379
+ .rigel .markdown-editor button { max-width: 100%; overflow-wrap: anywhere; }
380
+ .rigel .image-field { flex-wrap: wrap; }
381
+ }
382
+ .rigel .content {
383
+ flex: 1;
384
+ min-width: 0;
385
+ display: flex;
386
+ flex-direction: column;
387
+ }
388
+ .rigel .titlebar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
389
+ .rigel .titlebar h2 { min-width: 0; overflow-wrap: anywhere; }
390
+ .rigel .titlebar > button { flex-shrink: 0; }
391
+ .rigel .editor-actions { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
392
+ .rigel .editor-actions .back { display: flex; min-width: 0; margin: 0; }
393
+ .rigel .editor-actions .back button, .rigel .editor-actions .save-button { height: 2.25rem; padding: 0.5rem 0.75rem; border-width: 1px; border-style: solid; font-family: inherit; font-size: 0.8125rem; font-weight: 500; line-height: 1.25; }
394
+ .rigel .editor-actions .back button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
395
+ .rigel .editor-actions .save-button { border-color: transparent; }
396
+ .rigel .editor-actions .save-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; flex-shrink: 0; }
397
+ .rigel .save-status {
398
+ font-size: 0.75rem;
399
+ color: var(--text-3);
400
+ min-width: 62px;
401
+ text-align: right;
402
+ }
403
+ .rigel .save-status.saving { color: var(--accent); }
404
+ .rigel .save-status.saved { color: var(--success); }
405
+ .rigel .save-status.dirty { color: var(--warning); }
406
+ .rigel .save-status.error { color: var(--danger); }
407
+ .rigel .save-toast { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 150; display: flex; align-items: flex-start; gap: 0.75rem; width: min(42rem, calc(100% - 2rem)); padding: 1rem; border: 1px solid var(--danger); background: var(--panel); color: var(--text); box-shadow: var(--shadow-lg); }
408
+ .rigel .save-toast-content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
409
+ .rigel .save-toast strong { color: var(--danger); font-size: 0.875rem; }
410
+ .rigel .save-toast p { margin: 0.375rem 0 0.75rem; font-size: 0.8125rem; }
411
+ .rigel .save-toast > .icon-btn { flex-shrink: 0; }
412
+ .rigel .icon-btn {
413
+ display: flex;
414
+ align-items: center;
415
+ justify-content: center;
416
+ width: 26px;
417
+ height: 26px;
418
+ border: 1px solid var(--border-control);
419
+ background: var(--panel);
420
+ border-radius: 0;
421
+ color: var(--text-2);
422
+ cursor: pointer;
423
+ }
424
+ .rigel .icon-btn:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
425
+
426
+ .rigel .user-menu button svg, .rigel .user-menu a svg { flex-shrink: 0; opacity: 0.65; }
427
+ .rigel .rigel-icon { display: block; flex-shrink: 0; }
428
+ .rigel .pico { display: flex; align-items: center; justify-content: center; }
429
+
430
+ .rigel .user-menu a, .rigel .user-menu button { gap: 0.5rem; }
431
+ .rigel main {
432
+ flex: 1;
433
+ padding: 1.5rem 1.75rem 4rem;
434
+ min-width: 0;
435
+ }
436
+ .rigel main.wide { max-width: 100%; }
437
+ .rigel .menu-details { max-width: 720px; }
438
+ .rigel main:not(.wide) { max-width: 720px; }
439
+
440
+ /* ── Buttons ───────────────────────────── */
441
+ .rigel .primary {
442
+ padding: 0.4375rem 1rem;
443
+ border: none;
444
+ border-radius: 0;
445
+ background: var(--accent);
446
+ color: var(--on-accent);
447
+ font-weight: 600;
448
+ font-size: 0.8125rem;
449
+ cursor: pointer;
450
+ box-shadow: var(--shadow-sm);
451
+ transition: background 0.1s, transform 0.05s;
452
+ }
453
+ .rigel .primary:hover:not(:disabled) { background: var(--accent-hover); }
454
+ .rigel .primary:active:not(:disabled) { background: var(--accent-active); transform: scale(0.98); }
455
+ .rigel .primary:disabled {
456
+ background: var(--surface-raised);
457
+ color: var(--text-3);
458
+ cursor: default;
459
+ box-shadow: none;
460
+ }
461
+ .rigel .danger-btn {
462
+ padding: 0.4375rem 0.875rem;
463
+ border: 1px solid var(--danger);
464
+ background: var(--panel);
465
+ color: var(--danger);
466
+ border-radius: 0;
467
+ font-weight: 600;
468
+ font-size: 0.8125rem;
469
+ cursor: pointer;
470
+ }
471
+ .rigel .danger-btn:hover { background: var(--danger-soft); }
472
+
473
+ /* ── Palette ───────────────────────────── */
474
+ .rigel aside:has(.palette-backdrop) { z-index: 100; }
475
+ .rigel .palette-backdrop {
476
+ position: fixed;
477
+ inset: 0;
478
+ background: color-mix(in srgb, var(--space-950) 30%, transparent);
479
+ backdrop-filter: blur(2px);
480
+ z-index: 100;
481
+ display: flex;
482
+ justify-content: center;
483
+ padding-top: 10dvh;
484
+ }
485
+ .rigel .palette {
486
+ background: var(--panel);
487
+ border: 1px solid var(--border-subtle);
488
+ border-radius: 0;
489
+ box-shadow: var(--shadow-lg);
490
+ width: min(640px, 92vw);
491
+ height: fit-content;
492
+ max-height: 75dvh;
493
+ display: flex;
494
+ flex-direction: column;
495
+ }
496
+ .rigel .palette-search {
497
+ display: flex;
498
+ align-items: center;
499
+ gap: 0.75rem;
500
+ padding: 1rem 1.25rem;
501
+ border-bottom: 1px solid var(--border-subtle);
502
+ color: var(--text-muted);
503
+ flex-shrink: 0;
504
+ }
505
+ .rigel .palette input[type="search"] {
506
+ flex: 1;
507
+ min-width: 0;
508
+ border: none;
509
+ border-radius: 0;
510
+ padding: 0.25rem 0;
511
+ font: inherit;
512
+ font-size: 1rem;
513
+ background: transparent;
514
+ color: var(--text);
515
+ }
516
+ .rigel .palette kbd {
517
+ font: 0.6875rem ui-monospace, monospace;
518
+ padding: 0.125rem 0.375rem;
519
+ border: 1px solid var(--border-subtle);
520
+ border-radius: 0;
521
+ background: var(--surface-raised);
522
+ color: var(--text-muted);
523
+ }
524
+ .rigel .palette ul { list-style: none; margin: 0; padding: 0.5rem; overflow-y: auto; min-height: 0; }
525
+ .rigel .palette li button {
526
+ display: flex;
527
+ flex-direction: column;
528
+ align-items: flex-start;
529
+ gap: 0.125rem;
530
+ width: 100%;
531
+ padding: 0.625rem 0.75rem;
532
+ border: none;
533
+ background: none;
534
+ border-radius: 0;
535
+ cursor: pointer;
536
+ font: inherit;
537
+ font-size: 0.9375rem;
538
+ font-weight: 500;
539
+ color: var(--text);
540
+ text-align: left;
541
+ overflow-wrap: anywhere;
542
+ transition: background 0.1s;
543
+ }
544
+ .rigel .palette input:focus-visible { outline: none; box-shadow: none; }
545
+ .rigel .palette-search:focus-within { border-bottom-color: var(--focus-ring); }
546
+ .rigel .palette li button[aria-selected="true"],
547
+ .rigel .palette li button:hover,
548
+ .rigel .palette li button:focus-visible { background: var(--accent-soft); color: var(--on-accent-soft); }
549
+ .rigel .palette .hint { color: var(--text-muted); font-size: 0.75rem; font-weight: 400; }
550
+ .rigel .palette li button[aria-selected="true"] .hint,
551
+ .rigel .palette li button:hover .hint,
552
+ .rigel .palette li button:focus-visible .hint { color: var(--on-accent-soft); }
553
+ .rigel .palette .empty { padding: 2rem 1rem; color: var(--text-muted); text-align: center; font-size: 0.875rem; }
554
+ .rigel .palette-footer {
555
+ display: flex;
556
+ flex-wrap: wrap;
557
+ gap: 1rem;
558
+ padding: 0.625rem 1rem;
559
+ border-top: 1px solid var(--border-subtle);
560
+ border-radius: 0;
561
+ background: var(--bg);
562
+ color: var(--text-muted);
563
+ font-size: 0.6875rem;
564
+ flex-shrink: 0;
565
+ }
566
+ .rigel .palette-footer span { display: inline-flex; align-items: center; gap: 0.375rem; }
567
+
568
+ /* ── Section cards / fields ────────────── */
569
+ .rigel section {
570
+ background: var(--panel);
571
+ border: 1px solid var(--border);
572
+ border-radius: 0;
573
+ padding: 1rem 1.25rem 1.25rem;
574
+ margin-top: 1rem;
575
+ box-shadow: var(--shadow-sm);
576
+ }
577
+ .rigel h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
578
+ .rigel h3 {
579
+ font-size: 0.6875rem;
580
+ font-weight: 700;
581
+ text-transform: uppercase;
582
+ letter-spacing: 0.07em;
583
+ color: var(--text-3);
584
+ margin: 0 0 0.25rem;
585
+ }
586
+ .rigel label { display: block; margin-top: 1rem; }
587
+ .rigel label > span {
588
+ display: block;
589
+ font-size: 0.75rem;
590
+ font-weight: 600;
591
+ color: var(--text-2);
592
+ margin-bottom: 0.375rem;
593
+ }
594
+ .rigel input[type="text"],
595
+ .rigel input[type="number"],
596
+ .rigel input[type="date"],
597
+ .rigel input[type="url"],
598
+ .rigel input[type="search"],
599
+ .rigel input[type="password"],
600
+
601
+ .rigel textarea {
602
+ width: 100%;
603
+ padding: 0.5rem 0.75rem;
604
+ border: 1px solid var(--border-control);
605
+ border-radius: 0;
606
+ font: inherit;
607
+ box-sizing: border-box;
608
+ background: var(--panel);
609
+ color: var(--text);
610
+ transition: border-color 0.1s, box-shadow 0.1s;
611
+ }
612
+ .rigel textarea { resize: vertical; }
613
+ .rigel input[type="number"] { appearance: textfield; }
614
+ .rigel input[type="number"]::-webkit-inner-spin-button,
615
+ .rigel input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
616
+ .rigel input:focus,
617
+ .rigel textarea:focus {
618
+ border-color: var(--accent);
619
+ }
620
+ .rigel input::placeholder, .rigel textarea::placeholder { color: var(--text-muted); opacity: 1; }
621
+ .rigel textarea.mono {
622
+ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
623
+ font-size: 0.8125rem;
624
+ line-height: 1.6;
625
+ }
626
+ .rigel label.inline { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
627
+ .rigel label.inline span { margin: 0; font-size: 0.875rem; }
628
+ .rigel label.inline input { width: 1rem; height: 1rem; margin: 0; flex-shrink: 0; accent-color: var(--accent); }
629
+
630
+ /* ── Lists ─────────────────────────────── */
631
+ .rigel .field-label { font-size: 0.75rem; font-weight: 600; color: var(--text-2); margin: 1rem 0 0.5rem; }
632
+ .rigel .list-item {
633
+ border: 1px solid var(--border);
634
+ border-radius: 0;
635
+ padding: 0.875rem 1rem 0.25rem;
636
+ margin-bottom: 0.5rem;
637
+ background: var(--bg);
638
+ }
639
+ .rigel .add, .rigel .remove {
640
+ border: none;
641
+ border-radius: 0;
642
+ padding: 0.375rem 0.75rem;
643
+ font-size: 0.8125rem;
644
+ font-weight: 500;
645
+ cursor: pointer;
646
+ margin-top: 0.25rem;
647
+ }
648
+ .rigel .add { background: var(--panel); border: 1px dashed var(--border-control); color: var(--text-2); }
649
+ .rigel .add:hover { border-color: var(--accent); color: var(--accent); }
650
+ .rigel .remove { background: none; color: var(--danger); padding-left: 0; opacity: 0.75; }
651
+ .rigel .remove:hover { opacity: 1; }
652
+
653
+ /* ── Table card ────────────────────────── */
654
+ .rigel .table-card {
655
+ background: var(--panel);
656
+ border: 1px solid var(--border);
657
+ border-radius: 0;
658
+ box-shadow: var(--shadow-sm);
659
+ overflow: hidden;
660
+ margin-top: 1.25rem;
661
+ }
662
+ .rigel table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; }
663
+ .rigel .thumbnail-column { width: 1%; }
664
+ .rigel .table-thumbnail { width: 32px; height: 32px; object-fit: cover; vertical-align: middle; }
665
+ .rigel .table-avatar-placeholder { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-raised); color: var(--text-3); border: 1px solid var(--border-subtle); }
666
+ .rigel .table-sort, .rigel .table-link { background: none; border: none; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
667
+
668
+ .rigel thead th {
669
+ background: var(--bg);
670
+ color: var(--text-3);
671
+ font-size: 0.6875rem;
672
+ font-weight: 700;
673
+ text-transform: uppercase;
674
+ letter-spacing: 0.06em;
675
+ text-align: left;
676
+ padding: 0.625rem 1rem;
677
+ border-bottom: 1px solid var(--border);
678
+ cursor: pointer;
679
+ user-select: none;
680
+ white-space: nowrap;
681
+ }
682
+ .rigel th:hover { color: var(--text-2); }
683
+ .rigel th .arrow { color: var(--accent); }
684
+ .rigel td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text); }
685
+
686
+ .rigel tbody tr { cursor: pointer; transition: background 0.06s; }
687
+ .rigel tbody tr:last-child td { border-bottom: none; }
688
+ .rigel tbody tr:hover { background: var(--accent-soft); }
689
+
690
+ .rigel tbody tr:hover td { color: var(--on-accent-soft); }
691
+
692
+ /* ── Badges / misc — editor ────────────── */
693
+ .rigel .badge {
694
+ background: var(--warning-soft);
695
+ color: var(--warning);
696
+ font-size: 0.625rem;
697
+ font-weight: 700;
698
+ text-transform: uppercase;
699
+ letter-spacing: 0.04em;
700
+ padding: 0.1875rem 0.4375rem;
701
+ border-radius: 0;
702
+ }
703
+ .rigel .back { margin: 0 0 1rem; }
704
+ .rigel .back button {
705
+ background: transparent; border: 1px solid var(--border-control); padding: 0.5rem 0.75rem;
706
+ border-radius: 0; color: var(--text); font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer;
707
+ }
708
+ .rigel .back button:hover { background: var(--surface-raised); }
709
+
710
+ /* ── Image field ───────────────────────── */
711
+ .rigel .image-field { display: flex; align-items: center; gap: 0.75rem; }
712
+ .rigel .image-field .preview {
713
+ width: 132px; height: 76px; object-fit: cover;
714
+ border-radius: 0; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
715
+ }
716
+ .rigel .image-field .preview.empty {
717
+ display: flex; align-items: center; justify-content: center;
718
+ color: var(--text-3); font-size: 0.75rem; background: var(--bg); box-shadow: none;
719
+ }
720
+ .rigel .image-field button {
721
+ padding: 0.4375rem 0.875rem; border: 1px solid var(--border-control); background: var(--panel);
722
+ border-radius: 0; cursor: pointer; font-size: 0.8125rem; font-weight: 500; color: var(--text);
723
+ box-shadow: var(--shadow-sm);
724
+ }
725
+
726
+ .rigel .seo-length { margin: 0.375rem 0 0.75rem; }
727
+ .rigel .seo-length-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; margin: 0.375rem 0 0; font-size: 0.75rem; color: var(--text-muted); }
728
+ .rigel .seo-length-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
729
+ .rigel .seo-length-track { height: 4px; overflow: hidden; background: var(--border-subtle); }
730
+ .rigel .seo-length-fill { display: block; height: 100%; background: var(--text-muted); }
731
+ .rigel .seo-length[data-tone="danger"] .seo-length-fill { background: var(--danger); }
732
+ .rigel .seo-length[data-tone="warning"] .seo-length-fill { background: var(--warning); }
733
+ .rigel .seo-length[data-tone="success"] .seo-length-fill { background: var(--success); }
734
+ .rigel .seo-fields .image-field { display: grid; grid-template-columns: max-content 1fr; width: 100%; max-width: 400px; }
735
+ .rigel .seo-fields .image-field .preview { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 1200 / 628; object-fit: cover; object-position: center; }
736
+ .rigel .seo-fields .image-field button { justify-self: start; }
737
+
738
+ /* ── Body editor ───────────────────────── */
739
+ .rigel .body-editor { border: 1px solid var(--border-control); border-radius: 0; margin-top: 0.5rem; }
740
+ .rigel .body-toolbar {
741
+ display: flex; gap: 0.25rem; padding: 0.375rem;
742
+ background: var(--bg); border-bottom: 1px solid var(--border);
743
+ }
744
+ .rigel:not(.rigel-inline) .block-editor > .body-toolbar:not(.image-toolbar) { position: sticky; top: 0; z-index: 2; }
745
+ .rigel :is(.body-toolbar, .format-group) > button {
746
+ padding: 0.3125rem 0.75rem; border: none; background: none; border-radius: 0;
747
+ font-size: 0.8125rem; font-weight: 500; color: var(--text-2); cursor: pointer;
748
+ }
749
+ .rigel :is(.body-toolbar, .format-group) > button.active { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); }
750
+ .rigel .body-editor textarea { border: none; border-radius: 0; }
751
+ .rigel .body-editor textarea:focus { box-shadow: none; }
752
+ .rigel .markdown-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-subtle); }
753
+ .rigel .markdown-heading .field-label { margin: 0; }
754
+ .rigel .markdown-modes { display: flex; gap: 2px; }
755
+ .rigel .markdown-modes button { border: 0; background: transparent; color: var(--text-2); padding: 0.25rem 0.5rem; font: inherit; font-size: 0.75rem; cursor: pointer; }
756
+ .rigel .markdown-modes button[aria-pressed=true] { background: var(--surface-raised); color: var(--text); }
757
+ .rigel .markdown-editor .formatting-toolbar { flex-wrap: wrap; align-items: center; gap: 0.25rem; padding: 0.375rem 0.5rem; background: var(--panel); }
758
+ .rigel .formatting-toolbar .format-group { display: flex; gap: 2px; border-left: 1px solid var(--border-subtle); padding-left: 0.25rem; }
759
+ .rigel :is(.formatting-toolbar, .format-group) > button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; flex-shrink: 0; }
760
+ .rigel .formatting-toolbar .select-trigger { height: 32px; padding: 0.25rem 0.5rem; border: 0; }
761
+ .rigel :is(.formatting-toolbar, .format-group, .block-float) > button:hover:not(:disabled), .rigel .markdown-modes button:hover { background: var(--surface-raised); }
762
+ .rigel :is(.formatting-toolbar, .format-group) > button[aria-pressed=true] { background: var(--accent-soft); color: var(--on-accent-soft); }
763
+ .rigel :is(.formatting-toolbar, .format-group) > button:disabled { opacity: 0.35; cursor: default; }
764
+ .rigel .markdown-visual { position: relative; }
765
+ .rigel .markdown-link { position: absolute; left: 0.5rem; right: 0.5rem; z-index: 5; padding: 0.75rem; background: var(--panel); color: var(--text); border: 1px solid var(--border-control); border-radius: 0; box-shadow: var(--shadow-sm); }
766
+ .rigel .markdown-link > label { display: block; margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 500; line-height: 1.5; color: var(--text-2); }
767
+ .rigel .markdown-link-controls { display: flex; align-items: center; gap: 0.5rem; }
768
+ .rigel .markdown-link-controls input { flex: 1 1 0; min-width: 0; height: 32px; border-radius: 0; }
769
+ .rigel .markdown-link-controls button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border-control); border-radius: 0; background: var(--panel); color: var(--text); cursor: pointer; }
770
+ .rigel .markdown-link-controls button:hover:not(:disabled) { background: var(--surface-raised); }
771
+ .rigel .markdown-link-controls button:disabled { opacity: 0.35; cursor: default; }
772
+ @media (pointer: coarse) { .rigel :is(.formatting-toolbar, .format-group) > button { width: 40px; height: 40px; } }
773
+ .rigel .markdown-warning { padding: 0 1rem; color: var(--text-2); }
774
+ .rigel .rich-text { padding: 0; }
775
+ .rigel .rich-text .ProseMirror { padding: 0.875rem 1rem; min-height: 220px; white-space: pre-wrap; overflow-wrap: anywhere; position: relative; }
776
+ .rigel .rich-text .ProseMirror:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
777
+ .rigel .rich-text .ProseMirror-selectednode { outline: 3px solid var(--accent); }
778
+ .rigel .rich-text .ProseMirror li { position: relative; }
779
+ .rigel .rich-text blockquote { margin-inline: 0; padding-left: 1rem; border-left: 3px solid var(--border-control); }
780
+
781
+ .rigel .md-preview { padding: 0.875rem 1rem; min-height: 220px; font-size: 0.9375rem; line-height: 1.65; }
782
+ .rigel .md-preview h1 { font-size: 1.5rem; margin: 0.75rem 0 0.375rem; }
783
+ .rigel .md-preview h2 { font-size: 1.25rem; margin: 0.75rem 0 0.375rem; }
784
+ .rigel .md-preview h3 { font-size: 1.0625rem; text-transform: none; letter-spacing: 0; color: var(--text); margin: 0.75rem 0 0.25rem; }
785
+ .rigel .md-preview p { margin: 0.5rem 0; }
786
+ .rigel .md-preview code { background: var(--bg); padding: 0.125rem 0.3125rem; border-radius: 0; font-size: 0.8125rem; }
787
+ .rigel .md-preview pre { background: var(--surface-raised); color: var(--text); padding: 0.875rem 1rem; border-radius: 0; overflow-x: auto; }
788
+ .rigel .md-preview pre code { background: none; padding: 0; color: inherit; }
789
+ .rigel .md-preview img { max-width: 100%; border-radius: 0; }
790
+ .rigel .md-preview a { color: var(--link); }
791
+
792
+ /* ── Modals (escape .rigel grid) ───────── */
793
+ .rigel-modal-backdrop.rigel {
794
+ position: fixed; inset: 0; background: color-mix(in srgb, var(--space-950) 45%, transparent);
795
+ backdrop-filter: blur(2px);
796
+ display: flex; align-items: center; justify-content: center; z-index: 200;
797
+ font: 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
798
+ color: var(--text);
799
+ }
800
+ .rigel-modal-backdrop + .rigel-modal-backdrop { z-index: 201; }
801
+
802
+ .rigel-modal-backdrop.rigel:is(.action-dialog, .unsaved-dialog) {
803
+ align-items: flex-start;
804
+ padding-top: 10dvh;
805
+ }
806
+ .rigel-modal-backdrop:is(.action-dialog, .unsaved-dialog) .rigel-modal {
807
+ max-height: calc(90dvh - 1rem);
808
+ }
809
+
810
+ .rigel .rigel-modal, .rigel-modal {
811
+ background: var(--panel); border-radius: 0; padding: 1.25rem;
812
+ width: min(520px, 92vw); max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow-lg);
813
+ }
814
+ .rigel .rigel-modal h2 { margin: 0 0 0.375rem; font-size: 1.0625rem; }
815
+ .rigel .media-library { width: 100%; min-width: 0; }
816
+ .rigel .outlined, .rigel .image-picker input::file-selector-button {
817
+ padding: 0.4375rem 0.875rem; border: 1px solid var(--border-control); border-radius: 0;
818
+ background: var(--panel); color: var(--text); font: inherit; font-size: 0.8125rem; cursor: pointer;
819
+ }
820
+ .rigel .outlined:hover:not(:disabled), .rigel .image-picker input::file-selector-button:hover { background: var(--surface-raised); }
821
+ .rigel .outlined:disabled, .rigel .image-picker .tabs button:disabled, .rigel .image-picker .thumb:disabled { opacity: 0.5; cursor: default; }
822
+ .rigel .image-picker input::file-selector-button { margin-right: 0.75rem; }
823
+ .rigel.image-dialog { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 1rem; border: none; }
824
+ .rigel.image-dialog:not([open]) { display: none; }
825
+ .rigel.image-dialog::backdrop { background: transparent; }
826
+ .rigel .image-picker { width: min(760px, 100%); }
827
+ .rigel .media-head, .rigel .media-tools, .rigel .media-actions { display: flex; align-items: center; gap: 0.75rem; }
828
+ .rigel .media-head { justify-content: space-between; margin: calc(1rem * -1) calc(1.25rem * -1) 0; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
829
+ .rigel .media-head h2 { margin: 0; font-size: 1rem; }
830
+ .rigel .media-tools { align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem; border: 1px solid var(--border-control); background: var(--panel); }
831
+ .rigel .media-views { display: flex; flex-shrink: 0; margin-inline-end: 1rem; }
832
+ .rigel .media-views button { display: inline-flex; align-items: center; justify-content: center; padding-inline: 0.5rem; }
833
+ .rigel .media-views button + button { border-left: 0; }
834
+ .rigel .media-views button[aria-pressed=true] { background: var(--accent-soft); color: var(--on-accent-soft); }
835
+ .rigel .media-tools .media-select { position: relative; max-width: 100%; min-width: 0; }
836
+
837
+ .rigel .media-tools .media-search { width: 13rem; max-width: 100%; min-width: 0; margin: 0 0 0 auto; flex: 0 1 13rem; }
838
+ .rigel .media-table table { table-layout: fixed; }
839
+ .rigel .media-table th { cursor: default; white-space: normal; }
840
+ .rigel .media-table :is(th, td) { padding: 0.625rem; overflow-wrap: anywhere; }
841
+ .rigel .media-table th:first-child { width: 48%; }
842
+ .rigel .media-file { display: flex; align-items: center; gap: 0.625rem; text-align: left; width: 100%; }
843
+ .rigel .media-file img { width: 48px; height: 40px; object-fit: cover; flex-shrink: 0; }
844
+ .rigel .media-file-icon { display: flex; min-height: 120px; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1rem; color: var(--text-muted); overflow-wrap: anywhere; }
845
+ .rigel .media-file span { min-width: 0; overflow-wrap: anywhere; }
846
+ .rigel .media-file[aria-pressed=true] { color: var(--on-accent-soft); background: var(--accent-soft); }
847
+ .rigel :is(.image-picker, .media-library) .thumb[aria-pressed=true] { border-color: var(--accent); }
848
+ @media (max-width: 600px) {
849
+ .rigel .media-tools .media-search { flex: 1 1 100%; width: 100%; }
850
+ .rigel .media-table :is(th, td) { padding: 0.375rem; font-size: 0.75rem; }
851
+ .rigel .media-table th:first-child { width: 40%; }
852
+ .rigel .media-file { flex-direction: column; align-items: flex-start; }
853
+ }
854
+ .rigel .media-actions {
855
+ justify-content: flex-end; gap: 0.75rem;
856
+ margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border);
857
+ }
858
+ .rigel .media-selection { margin-top: 1rem; }
859
+ .rigel .media-preview > img { display: block; max-width: 100%; max-height: 300px; margin: 0 auto 1rem; }
860
+ .rigel .media-button-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; flex-shrink: 0; }
861
+ .rigel .media-actions.with-media-path { flex-wrap: wrap; }
862
+ .rigel .media-download { flex-shrink: 0; white-space: nowrap; text-decoration: none; }
863
+ .rigel .media-path { flex: 1; min-width: 0; margin: 0; padding: 0.5rem 0; overflow-x: auto; white-space: pre; font: 0.75rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
864
+ .rigel .media-path code { font: inherit; }
865
+ .rigel .media-path:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
866
+ .rigel .media-meta { border-top: 1px solid var(--border-subtle); padding-top: 0.5rem; }
867
+ .rigel .media-meta label { margin-top: 0.75rem; }
868
+ .rigel .media-details { min-width: 0; }
869
+ .rigel .image-picker:has(.media-editing) { width: min(1040px, 100%); }
870
+ .rigel .media-selection.media-editing { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; }
871
+ .rigel .media-editing .media-preview { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
872
+ .rigel .media-editing .media-preview > img { max-height: 60dvh; }
873
+ .rigel .media-editing .media-meta { border-top: 0; padding-top: 0; }
874
+ .rigel .media-editing .media-meta label:first-child { margin-top: 0; }
875
+ .rigel .media-editing > .media-actions { grid-column: 1 / -1; margin-top: 0; }
876
+ @media (max-width: 700px) {
877
+ .rigel .media-selection.media-editing { grid-template-columns: minmax(0, 1fr); }
878
+ .rigel .media-editing .media-preview > img { max-height: 35dvh; }
879
+ .rigel .with-media-path .media-button-actions { flex-basis: 100%; justify-content: flex-end; }
880
+ }
881
+ .rigel .image-picker input[type=file] { width: 100%; color: var(--text); }
882
+ .rigel .rigel-modal .tabs {
883
+ display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.75rem 0 1rem;
884
+ padding: 0.25rem; background: var(--bg); border-radius: 0;
885
+ }
886
+ .rigel .rigel-modal .tabs button {
887
+ flex: 1; padding: 0.4375rem 0.875rem; border: none; background: transparent;
888
+ border-radius: 0; cursor: pointer; font-size: 0.8125rem; font-weight: 500;
889
+ color: var(--text-2); text-transform: capitalize;
890
+ }
891
+ .rigel .rigel-modal .tabs button:hover { color: var(--text); }
892
+ .rigel .rigel-modal .tabs button.active { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); }
893
+ .rigel .rigel-modal .search-row { display: flex; gap: 0.5rem; }
894
+ .rigel .rigel-modal .search-row input { flex: 1; }
895
+ .rigel .rigel-modal .search-row button,
896
+ .rigel .rigel-modal button.primary {
897
+ padding: 0.4375rem 1rem; border: none; border-radius: 0;
898
+ background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 0.8125rem; cursor: pointer;
899
+ }
900
+ .rigel .rigel-modal .search-row button:hover:not(:disabled),
901
+ .rigel .rigel-modal button.primary:hover:not(:disabled) { background: var(--accent-hover); }
902
+ .rigel .rigel-modal .search-row button:active:not(:disabled),
903
+ .rigel .rigel-modal button.primary:active:not(:disabled) { background: var(--accent-active); }
904
+ .rigel .rigel-modal .search-row button:disabled,
905
+ .rigel .rigel-modal button.primary:disabled { background: var(--surface-raised); color: var(--text-muted); cursor: default; }
906
+ .rigel :is(.image-picker, .media-library) .grid {
907
+ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 1rem; margin-top: 1rem;
908
+ }
909
+ .rigel :is(.image-picker, .media-library) .thumb {
910
+ border: 2px solid transparent; border-radius: 0; overflow: hidden;
911
+ padding: 0; cursor: pointer; background: none; aspect-ratio: 3 / 2;
912
+ transition: border-color 0.1s, transform 0.1s;
913
+ }
914
+ .rigel :is(.image-picker, .media-library) .thumb:hover { border-color: var(--accent); transform: translateY(-1px); }
915
+ .rigel :is(.image-picker, .media-library) .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
916
+ .rigel :is(.image-picker, .media-library) .grid figure { margin: 0; min-width: 0; }
917
+ .rigel :is(.image-picker, .media-library) .grid .thumb { width: 100%; }
918
+ .rigel :is(.image-picker, .media-library) .grid figcaption { font-size: 0.75rem; color: var(--text-2); overflow-wrap: anywhere; }
919
+ .rigel :is(.image-picker, .media-library) .grid figcaption a { color: var(--link); }
920
+ .rigel .rigel-modal .hint { color: var(--text-2); font-size: 0.8125rem; }
921
+ .rigel .rigel-modal .error { color: var(--danger); font-size: 0.8125rem; }
922
+
923
+ /* ── Settings modal ────────────────────── */
924
+ .rigel .settings-modal { padding: 0; width: min(720px, 94vw); }
925
+ .rigel .settings-head {
926
+ display: flex;
927
+ align-items: center;
928
+ justify-content: space-between;
929
+ padding: 1rem 1.25rem;
930
+ border-bottom: 1px solid var(--border);
931
+ }
932
+ .rigel .settings-head h2 { margin: 0; font-size: 1rem; }
933
+ .rigel .settings-head .close,
934
+ .rigel .media-head .close {
935
+ border: none; background: none; cursor: pointer;
936
+ color: var(--text-3); font-size: 0.875rem; padding: 0.25rem 0.375rem;
937
+ border-radius: 0;
938
+ }
939
+ .rigel .settings-head .close:hover, .rigel .media-head .close:hover { background: var(--surface-raised); color: var(--text); }
940
+ .rigel .settings-body { display: grid; grid-template-columns: 208px 1fr; min-height: 380px; }
941
+ .rigel .settings-nav {
942
+ border-right: 1px solid var(--border);
943
+ padding: 1rem 0.75rem;
944
+ display: flex;
945
+ flex-direction: column;
946
+ gap: 0.5rem;
947
+ }
948
+ .rigel .settings-nav button {
949
+ display: flex; align-items: center; gap: 0.75rem;
950
+ width: 100%; padding: 0.75rem; border: none; background: none;
951
+ border-radius: 0; cursor: pointer; font-size: 0.875rem; font-weight: 500;
952
+ color: var(--text-2); text-align: left;
953
+ }
954
+ .rigel .settings-nav button:hover { background: var(--surface-raised); color: var(--text); }
955
+ .rigel .settings-nav button.active { background: var(--accent-soft); color: var(--on-accent-soft); font-weight: 600; }
956
+ .rigel .settings-nav .pico { width: 24px; flex-shrink: 0; }
957
+ .rigel .settings-pane { padding: 1.25rem 1.5rem 1.25rem; }
958
+ .rigel .settings-pane h3 {
959
+ font-size: 0.875rem; font-weight: 600; text-transform: none;
960
+ letter-spacing: 0; color: var(--text); margin: 0 0 0.75rem;
961
+ }
962
+ .rigel .settings-pane fieldset { border: none; padding: 0; margin: 0 0 1rem; }
963
+ .rigel .settings-pane fieldset.accessibility-options { margin-top: 1.5rem; }
964
+ .rigel .accessibility-options label.inline { margin-top: 0; }
965
+ .rigel .theme-options {
966
+ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem;
967
+ padding: 0.25rem; border: 1px solid var(--border-control); border-radius: 0;
968
+ background: var(--surface-raised);
969
+ }
970
+ .rigel .theme-option { position: relative; margin: 0; cursor: pointer; }
971
+ .rigel .theme-option input {
972
+ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
973
+ opacity: 0; cursor: pointer; accent-color: var(--accent);
974
+ }
975
+ .rigel .theme-option span {
976
+ display: block; padding: 0.5rem; margin: 0; text-align: center;
977
+ border: 1px solid transparent; border-radius: 0; font-size: 0.875rem; color: var(--text-muted);
978
+ }
979
+ .rigel .theme-option input:checked + span {
980
+ background: var(--accent-soft); color: var(--on-accent-soft); border-color: var(--accent);
981
+ }
982
+ .rigel .theme-option input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
983
+ .rigel label.inline input.switch {
984
+ appearance: none; position: relative; width: 2.25rem; height: 1.25rem;
985
+ border: 1px solid var(--border-control); border-radius: 0;
986
+ background: var(--border-control); cursor: pointer;
987
+ }
988
+ .rigel label.inline input.switch::before {
989
+ content: ""; position: absolute; top: 1px; left: 1px;
990
+ width: 1rem; height: 1rem; border-radius: 0; background: var(--surface);
991
+ box-shadow: var(--shadow-sm); transition: transform 0.15s ease;
992
+ }
993
+ .rigel label.inline input.switch:checked { background: var(--accent); border-color: var(--accent); }
994
+ .rigel label.inline input.switch:checked::before { transform: translateX(1rem); }
995
+ @media (prefers-reduced-motion: reduce) {
996
+ .rigel label.inline input.switch::before { transition: none; }
997
+
998
+ }
999
+ @media (forced-colors: active) {
1000
+ .rigel label.inline input.switch { appearance: auto; }
1001
+ .rigel label.inline input.switch::before { display: none; }
1002
+ }
1003
+ .rigel .settings-pane .clear-data { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
1004
+ .rigel .settings-pane .clear-data button:disabled { opacity: 0.5; cursor: not-allowed; }
1005
+ .rigel .settings-pane legend {
1006
+ font-size: 0.75rem; font-weight: 600; color: var(--text-2);
1007
+ margin-bottom: 0.5rem; padding: 0;
1008
+ }
1009
+ .rigel .settings-pane label.radio { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.375rem; }
1010
+ .rigel .settings-pane label.radio input { width: 0.875rem; height: 0.875rem; margin: 0; flex-shrink: 0; accent-color: var(--accent); }
1011
+ .rigel .settings-pane label.radio span { margin: 0; font-size: 0.875rem; color: var(--text); }
1012
+
1013
+ .rigel .settings-pane .media-settings-section {
1014
+ margin: 0; padding: 0; background: none; border: none; border-radius: 0; box-shadow: none;
1015
+ }
1016
+
1017
+ .rigel .stock-key { margin-top: 1rem; }
1018
+ .rigel .stock-key-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.375rem; }
1019
+ .rigel .stock-key-head h4 { margin: 0; font-size: 0.8125rem; }
1020
+ .rigel .stock-key-head label { margin: 0; }
1021
+ .rigel .stock-key-head a { color: var(--link); font-size: 0.75rem; }
1022
+ .rigel .secret-input { position: relative; }
1023
+ .rigel .schema-color { display: flex; align-items: center; gap: 0.5rem; }
1024
+ .rigel .schema-color input[type="color"] { width: 2.5rem; height: 2.5rem; padding: 0.25rem; border: 1px solid var(--border-control); background: var(--panel); cursor: pointer; }
1025
+ .rigel .schema-color input[type="text"] { width: 8rem; min-width: 0; }
1026
+ .rigel textarea.schema-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
1027
+ .rigel .secret-input input {
1028
+ min-width: 0; height: 2.5rem; padding-inline-end: 2.75rem;
1029
+ font-family: ui-monospace, monospace; box-shadow: var(--shadow-sm);
1030
+ }
1031
+ .rigel .secret-input input::placeholder { color: var(--text-2); opacity: 1; }
1032
+
1033
+ .rigel .secret-input button {
1034
+ position: absolute; inset-inline-end: 0.25rem; top: 50%; transform: translateY(-50%);
1035
+ display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
1036
+ border: none; border-radius: 0; background: transparent; color: var(--text-2); cursor: pointer;
1037
+ }
1038
+ .rigel .secret-input button:hover { color: var(--text); background: var(--bg); }
1039
+ .rigel :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
1040
+ .rigel .secret-input input[aria-invalid="true"] { border-color: var(--danger); }
1041
+
1042
+
1043
+ /* ── Dark theme (opt-in via Settings → Appearance) ─ */
1044
+ .rigel .welcome {
1045
+ display: flex;
1046
+ flex-direction: column;
1047
+ align-items: center;
1048
+ justify-content: center;
1049
+ text-align: center;
1050
+ gap: 0.75rem;
1051
+ padding: 4rem 1.5rem;
1052
+ color: var(--text-2);
1053
+ }
1054
+ .rigel .welcome img { margin-bottom: 0.5rem; opacity: 0.9; }
1055
+ .rigel .welcome h2 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin: 0; }
1056
+ .rigel .welcome p { margin: 0; font-size: 1rem; }
1057
+ .rigel .welcome .welcome-hint { margin-top: 1.5rem; font-size: 0.875rem; color: var(--text-3); }
1058
+
1059
+ [data-theme="dark"] .rigel {
1060
+ color-scheme: dark;
1061
+ --background: var(--space-950);
1062
+ --surface: var(--space-900);
1063
+ --surface-raised: var(--space-800);
1064
+ --text: var(--space-50);
1065
+ --text-muted: #B6C5D8;
1066
+ --border-subtle: var(--space-700);
1067
+ --border-control: #71839C;
1068
+ --accent: var(--rigel-300);
1069
+ --accent-hover: var(--rigel-200);
1070
+ --accent-active: var(--rigel-400);
1071
+ --on-accent: var(--space-950);
1072
+ --link: var(--rigel-300);
1073
+ --accent-soft: var(--rigel-950);
1074
+ --on-accent-soft: var(--rigel-200);
1075
+ --focus-ring: var(--rigel-300);
1076
+ --success: #86EFAC;
1077
+ --success-soft: #052E16;
1078
+ --warning: #FCD34D;
1079
+ --warning-soft: #451A03;
1080
+ --danger: #FCA5A5;
1081
+ --danger-soft: #450A0A;
1082
+ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
1083
+ --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
1084
+ --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
1085
+ }
1086
+
1087
+ [data-contrast="high"] .rigel {
1088
+ --background: #FFFFFF;
1089
+ --surface: #FFFFFF;
1090
+ --text: #000000;
1091
+ --text-muted: var(--space-800);
1092
+ --border-subtle: var(--space-600);
1093
+ --border-control: var(--space-800);
1094
+ }
1095
+ [data-theme="dark"][data-contrast="high"] .rigel {
1096
+ --background: #000000;
1097
+ --surface: #000000;
1098
+ --text: #FFFFFF;
1099
+ --text-muted: var(--space-200);
1100
+ --border-subtle: var(--space-300);
1101
+ --border-control: var(--space-50);
1102
+ }
1103
+
1104
+ /* ── Schema document editor ───────────────────────────── */
1105
+ .rigel .content.visual { height: 100dvh; overflow: hidden; }
1106
+ .rigel main.visual-pane { display: flex; flex-direction: column; min-height: 0; padding: 1rem 1.5rem 1.25rem; max-width: 100%; }
1107
+ .rigel .visual-editor { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--border); background: var(--panel); }
1108
+ .rigel .visual-editor.with-panel { grid-template-columns: minmax(0, 1fr) 8px var(--properties-width, 340px); }
1109
+ .rigel .properties-divider { cursor: col-resize; touch-action: none; background: var(--panel); border-inline: 1px solid var(--border); }
1110
+ .rigel .properties-divider:hover, .rigel .properties-divider:focus-visible, .rigel .resizing-properties .properties-divider { background: var(--accent); }
1111
+ .rigel .resizing-properties { user-select: none; cursor: col-resize; }
1112
+ .rigel .resizing-properties iframe { pointer-events: none; }
1113
+ .rigel .visual-canvas { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
1114
+ .rigel .visual-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
1115
+ .rigel .visual-hint { flex: 1; min-width: 12rem; color: var(--text-3); font-size: 0.75rem; }
1116
+ .rigel .visual-actions { display: flex; align-items: center; gap: 0.75rem; }
1117
+ .rigel a.visual-live:any-link { display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; }
1118
+ .rigel .mode-toggle { display: inline-flex; border: 1px solid var(--border-control); }
1119
+ .rigel .mode-toggle button { border: 0; border-radius: 0; background: transparent; color: var(--text-2); padding: 0.25rem 0.625rem; font-size: 0.75rem; cursor: pointer; }
1120
+ .rigel .mode-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
1121
+ .rigel .canvas-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; }
1122
+ .rigel .canvas-stage iframe { display: block; flex: 1; min-height: 0; width: 100%; height: 100%; border: 0; background: #fff; }
1123
+ .rigel .inline-editor { position: absolute; z-index: 5; border: 2px solid var(--accent); border-radius: 0; background: #fff; color: #080f1c; padding: 0 0.25rem; font-family: inherit; box-shadow: 0 4px 16px rgb(8 15 28 / 18%); }
1124
+ .rigel .visual-error { margin: 1.5rem; font-size: 0.875rem; color: var(--text-2); max-width: 44ch; }
1125
+ .rigel .schema-panel { border-left: 1px solid var(--border); overflow-y: auto; min-height: 0; padding: 1rem; background: var(--panel); }
1126
+ .rigel .schema-panel section { border: 0; padding: 0 0 1rem; }
1127
+ .rigel .custom-select { min-width: 0; max-width: 100%; }
1128
+ .rigel .block-editor { position: relative; margin-top: 1rem; border: 1px solid var(--border-control); }
1129
+ .rigel .block-editor [hidden] { display: none !important; }
1130
+ .rigel.rigel-inline { display: block; position: fixed; top: 0; left: 0; width: 100%; min-height: 0; height: 0; padding: 0; background: transparent; pointer-events: none; z-index: 120; }
1131
+ .rigel.rigel-inline .block-editor { margin: 0; border: 0; }
1132
+ .rigel.rigel-inline .block-editor > [role="alert"] { position: fixed; inset: 8px 8px auto; padding: 0.75rem; background: var(--danger-soft); color: var(--danger); pointer-events: auto; }
1133
+ .rigel.rigel-inline :is(.body-toolbar, .block-handle, .block-insert, .block-menu, .block-slash, .markdown-link, .block-markdown-view) { pointer-events: auto; }
1134
+ .rigel.rigel-inline .block-editor .body-toolbar, .rigel .block-editor .body-toolbar.image-toolbar { position: fixed; inset: auto; width: max-content; max-width: calc(100vw - 16px); margin: 0; padding: 0.25rem; gap: 0.25rem; border: 1px solid var(--border-control); box-shadow: var(--shadow-lg); z-index: 120; }
1135
+ .rigel.rigel-inline :where(.block-editor .body-toolbar) > button { width: 32px; height: 32px; padding: 0; background: transparent; color: var(--text); border: 0; }
1136
+ .rigel.rigel-inline .block-handle { position: fixed; width: 24px; height: 28px; }
1137
+ .rigel.rigel-inline .markdown-link, .rigel .block-editor .markdown-link { position: fixed; inset: auto; width: 340px; max-width: calc(100vw - 16px); z-index: 121; }
1138
+ .rigel.rigel-inline .block-markdown-view { position: fixed; inset: 12px; max-height: calc(100vh - 24px); overflow: auto; padding: 0.5rem; border: 1px solid var(--border-control); background: var(--panel); }
1139
+ .rigel-article-content:focus { outline: 0; }
1140
+ :is(.rigel .block-content, .rigel-article-content)::highlight(rigel-link-selection), :is(.rigel .block-content, .rigel-article-content) ::highlight(rigel-link-selection) { background-color: Highlight; color: HighlightText; }
1141
+ .rigel-article-content:focus-visible > [data-rigel-active-block] { outline: 3px solid Highlight; outline-offset: 3px; }
1142
+ .rigel-article-content .block-bold { font-weight: 700; }
1143
+ .rigel-article-content .block-italic { font-style: italic; }
1144
+ .rigel-article-content .block-strike { text-decoration: line-through; }
1145
+ :is(.rigel .block-content, .rigel-article-content) .block-underline { text-decoration: underline; }
1146
+ :is(.rigel .block-content, .rigel-article-content) .block-underline-strike { text-decoration: underline line-through; }
1147
+ [data-rigel-richtext].rigel-article-content .block-code { display: block; white-space: pre-wrap; overflow-x: auto; background-color: var(--rigel-code-background-color); padding: var(--rigel-code-padding); margin: var(--rigel-code-margin); border: var(--rigel-code-border); border-radius: var(--rigel-code-border-radius); color: var(--rigel-code-color); font-family: var(--rigel-code-font-family); font-size: var(--rigel-code-font-size); font-weight: var(--rigel-code-font-weight); line-height: var(--rigel-code-line-height); letter-spacing: var(--rigel-code-letter-spacing); }
1148
+ .rigel-article-content .block-table-scroll { overflow-x: auto; }
1149
+ .rigel-article-content .block-table-selected { outline: 2px solid Highlight; outline-offset: -2px; }
1150
+ .rigel-article-content > p:has(> br:only-child)::before { content: "Type / to choose a block"; position: absolute; pointer-events: none; font-style: italic; }
1151
+ .rigel .article-state { max-height: 12rem; overflow: auto; flex-shrink: 0; }
1152
+ .rigel .block-content { min-height: 16rem; padding: 1rem 1rem 1rem 2.5rem; overflow-wrap: anywhere; line-height: 1.7; }
1153
+ .rigel .block-content:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
1154
+ .rigel .block-content > :first-child { margin-top: 0; }
1155
+ .rigel .block-content > * { margin: 0 0 1rem; }
1156
+ .rigel .block-bold { font-weight: 700; }
1157
+ .rigel .block-italic { font-style: italic; }
1158
+ .rigel .block-strike { text-decoration: line-through; }
1159
+ .rigel .block-inline-code { font-family: ui-monospace, monospace; background: var(--surface-raised); padding: 0.125rem; }
1160
+ .rigel .block-editor .formatting-toolbar { position: sticky; top: 0; z-index: 3; flex-wrap: wrap; align-items: center; background: var(--panel); }
1161
+ .rigel .block-editor .toolbar-separator { width: 1px; height: 1.25rem; margin-inline: 0.25rem; background: var(--border-subtle); flex-shrink: 0; }
1162
+ .rigel .block-editor .formatting-toolbar :is(.block-add, .block-history) { width: auto; padding: 0.25rem 0.5rem; }
1163
+ .rigel .block-surface { position: relative; }
1164
+ .rigel .block-editor .block-content :is(h1,h2,h3,h4,h5,h6) { line-height: 1.3; margin: 1.25rem 0 0.75rem; text-transform: none; letter-spacing: normal; }
1165
+ .rigel .block-editor .block-content h1 { font-size: 1.75rem; }
1166
+ .rigel .block-editor .block-content h2 { font-size: 1.5rem; }
1167
+ .rigel .block-editor .block-content h3 { font-size: 1.25rem; }
1168
+ .rigel .block-editor .block-content h4 { font-size: 1rem; }
1169
+ .rigel .block-editor .block-content h5 { font-size: 0.875rem; }
1170
+ .rigel .block-editor .block-content h6 { font-size: 0.75rem; }
1171
+ .rigel .block-content :is(ul,ol) { padding-left: 1.5rem; }
1172
+ .rigel .block-content blockquote { margin-left: 0; padding: 0.75rem; border: 1px solid var(--border-control); background: var(--surface-raised); }
1173
+ .rigel .block-content .block-code { display: block; white-space: pre-wrap; padding: 0.75rem; font-family: ui-monospace, monospace; background: var(--surface-raised); }
1174
+ .rigel .block-content img { max-width: 100%; height: auto; }
1175
+ .rigel .block-content figure { margin-inline: 0; }
1176
+ .rigel .block-content figcaption { font-size: 0.75rem; color: var(--text-2); }
1177
+ .rigel .block-content table { width: 100%; border-collapse: collapse; }
1178
+ .rigel .block-table-scroll { overflow-x: auto; }
1179
+ .rigel .block-content .block-table-selected { background: var(--accent-soft); }
1180
+ .rigel .block-content :is(th,td) { border: 1px solid var(--border-control); padding: 0.5rem; min-width: 3rem; vertical-align: top; text-align: left; }
1181
+ .rigel .block-content th { background: var(--surface-raised); font-weight: 700; }
1182
+ .rigel .block-content :is(th,td) p { margin: 0; }
1183
+ .rigel .block-table-controls { display: flex; flex-direction: column; align-items: stretch; }
1184
+ .rigel .block-table-controls button { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem; border: 0; background: var(--panel); color: var(--text); font: inherit; font-size: 0.8125rem; text-align: left; white-space: nowrap; cursor: pointer; }
1185
+ .rigel .block-table-controls button:hover:not(:disabled) { background: var(--accent-soft); color: var(--on-accent-soft); }
1186
+ .rigel .block-table-controls button:disabled { opacity: 0.35; cursor: default; }
1187
+ .rigel .block-table-controls label.inline { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0; padding: 0.5rem; border-top: 1px solid var(--border-subtle); font-size: 0.8125rem; }
1188
+ .rigel .block-table-controls label.inline input.switch { flex-shrink: 0; margin-left: auto; }
1189
+ .rigel .block-content > p:has(> br:only-child)::before { content: "Type / to choose a block"; position: absolute; color: var(--text-2); pointer-events: none; }
1190
+ .rigel .block-handle { position: absolute; left: 2px; width: 28px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--border-control); color: var(--text); cursor: grab; touch-action: none; }
1191
+ .rigel .block-insert { position: fixed; z-index: 119; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: var(--panel); border: 1px solid var(--border-control); color: var(--text); cursor: pointer; }
1192
+ .rigel .block-insert:hover { background: var(--surface-raised); }
1193
+ .rigel .block-drop-indicator { position: absolute; left: 2.5rem; right: 0.5rem; height: 3px; background: var(--accent); pointer-events: none; }
1194
+ .rigel :is(.block-menu, .block-slash) { width: 224px; max-width: calc(100vw - 16px); max-height: 280px; overflow-y: auto; padding: 0.5rem; border: 1px solid var(--border-control); background: var(--panel); color: var(--text); box-shadow: var(--shadow-lg); }
1195
+ .rigel .block-menu { position: fixed; inset: auto; margin: 0; }
1196
+ .rigel .block-slash { position: fixed; inset: auto; margin: 0; }
1197
+ .rigel .block-markdown { margin: 0; padding: 1rem; overflow: auto; white-space: pre-wrap; font: 0.8125rem/1.7 ui-monospace, monospace; }
1198
+ .rigel :is(.block-menu, .block-slash) > button { display: block; width: 100%; text-align: left; padding: 0.5rem; background: var(--panel); border: 0; color: var(--text); font: inherit; font-size: 0.8125rem; cursor: pointer; }
1199
+ .rigel :is(.block-menu, .block-slash) > button:is(:hover,[aria-selected=true]) { background: var(--accent-soft); color: var(--on-accent-soft); }
1200
+ .rigel .block-format-menu > button { display: flex; align-items: center; gap: 0.75rem; }
1201
+ .rigel .block-format-menu > button > span { flex: 1; }
1202
+ .rigel .block-format-menu > button[aria-checked=true] { background: var(--accent-soft); color: var(--on-accent-soft); }
1203
+ .rigel .block-float { display: flex; position: fixed; z-index: 120; padding: 0.25rem; gap: 0.25rem; background: var(--panel); border: 1px solid var(--border-control); box-shadow: var(--shadow-lg); }
1204
+ .rigel .block-float button { display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; padding: 0; color: var(--text); background: var(--panel); border: 0; cursor: pointer; }
1205
+ .rigel .block-float button[aria-pressed=true] { background: var(--accent-soft); color: var(--on-accent-soft); }
1206
+ .rigel .custom-select > select { display: none; border-radius: 0; }
1207
+ .rigel .select-label { display: block; margin: 1rem 0 0.375rem; color: var(--text-2); font-size: 0.75rem; font-weight: 600; }
1208
+ .rigel .select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; min-width: 0; padding: 0.5rem 0.75rem; border: 1px solid var(--border-control); background: var(--panel); color: var(--text); font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer; }
1209
+ .rigel .select-trigger > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
1210
+ .rigel .select-trigger > .rigel-icon { flex-shrink: 0; }
1211
+ .rigel .select-trigger.icon-only { width: 32px; padding: 0; justify-content: center; }
1212
+ .rigel .select-trigger:hover:not(:disabled) { background: var(--surface-raised); }
1213
+ .rigel .select-trigger:disabled { opacity: 0.5; cursor: default; }
1214
+ .rigel .select-menu { position: fixed; inset: auto; margin: 0; padding: 0.25rem; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border-control); background: var(--panel); color: var(--text); font: inherit; font-size: 0.8125rem; box-shadow: var(--shadow-lg); }
1215
+ .rigel .select-menu::backdrop { background: transparent; }
1216
+ .rigel .date-popover { position: fixed; inset: auto; width: 21rem; margin: 0; padding: 0.75rem; overflow: auto; border: 1px solid var(--border-control); background: var(--panel); color: var(--text); font: inherit; box-shadow: var(--shadow-lg); }
1217
+ .rigel .date-popover::backdrop { background: transparent; }
1218
+ .rigel .date-header { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.5rem; }
1219
+ .rigel .date-header .custom-select { flex: 1; min-width: 0; }
1220
+ .rigel .date-header > input { width: 4.5rem; padding-inline: 0.5rem; }
1221
+ .rigel .date-header > button, .rigel .date-grid button { display: grid; place-items: center; height: 40px; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
1222
+ .rigel .date-header > button { width: 32px; flex-shrink: 0; }
1223
+ .rigel .date-previous svg { transform: rotate(180deg); }
1224
+ .rigel .date-grid { width: 100%; margin: 0; table-layout: fixed; border-collapse: collapse; }
1225
+ .rigel .date-grid :is(th, td) { padding: 0; border: 0; text-align: center; background: transparent; }
1226
+ .rigel .date-grid th { height: 32px; color: var(--text-2); font-size: 0.75rem; font-weight: 500; text-transform: none; letter-spacing: normal; }
1227
+ .rigel .date-grid tr { background: transparent; }
1228
+ .rigel .date-grid button { width: 100%; font-size: 0.8125rem; }
1229
+ .rigel .date-grid button[aria-current="date"] { box-shadow: inset 0 0 0 1px var(--accent); }
1230
+ .rigel .date-header > button:hover:not(:disabled), .rigel .date-grid button:hover { background: var(--surface-raised); }
1231
+ .rigel .date-grid td[aria-selected="true"] button { background: var(--accent); color: var(--on-accent); }
1232
+ .rigel .date-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border-subtle); }
1233
+ .rigel .date-popover .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
1234
+ .rigel .select-option { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 2.25rem; padding: 0.5rem 0.625rem; cursor: pointer; overflow-wrap: anywhere; }
1235
+ .rigel .select-option.active { background: var(--accent-soft); color: var(--on-accent-soft); }
1236
+ .rigel .select-option > .rigel-icon { flex-shrink: 0; }
1237
+ .rigel .select-option > span:not(.select-check) { flex: 1; }
1238
+ .rigel .select-option[aria-disabled="true"] { opacity: 0.5; cursor: default; }
1239
+ .rigel .select-check { width: 1rem; flex-shrink: 0; color: var(--accent); }
1240
+ .rigel .select-empty { margin: 0; padding: 0.5rem; color: var(--text-2); }
1241
+ .rigel .add-section .custom-select { flex: 1; }
1242
+ @media (max-width: 767px) { .rigel .select-option { min-height: 2.75rem; } }
1243
+ .rigel .page-properties-header { position: sticky; top: 0; z-index: 2; padding-top: 0.5rem; margin-top: -0.5rem; background: var(--panel); }
1244
+ .rigel .panel-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-control); }
1245
+ .rigel .panel-tabs button { flex: 1; padding: 0.5rem 0.75rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-2); font: inherit; font-size: 0.8125rem; cursor: pointer; }
1246
+ .rigel .panel-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
1247
+ .rigel .document-form, .rigel main:has(> .document-form) > :is(.editor-actions, .titlebar) { max-width: 720px; }
1248
+ .rigel .document-form .schema-panel { border: 0; padding: 0; overflow: visible; background: transparent; }
1249
+ .rigel .document-form section { background: transparent; box-shadow: none; }
1250
+ .rigel .document-form .panel-note { display: none; }
1251
+ .rigel .document-form [data-schema-path="photo"] .preview { width: 5rem; height: 5rem; object-fit: cover; }
1252
+
1253
+ .rigel .schema-panel h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 0.5rem; }
1254
+ .rigel .panel-note { margin: 0 0 0.75rem; font-size: 0.75rem; color: var(--text-3); }
1255
+ .rigel .shared-badge { display: flex; align-items: center; gap: 0.375rem; margin: 0 0 0.75rem; padding: 0.5rem; border: 1px solid var(--accent); color: var(--text-2); font-size: 0.75rem; }
1256
+ .rigel .structure-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
1257
+ .rigel .structure-list li { display: flex; align-items: stretch; border: 1px solid var(--border); }
1258
+ .rigel .structure-list li.active { border-color: var(--accent); }
1259
+ .rigel .structure-row { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; border: 0; border-radius: 0; background: transparent; color: var(--text); padding: 0.5rem; text-align: left; cursor: pointer; font-size: 0.8125rem; }
1260
+ .rigel .structure-actions, .rigel .schema-item-actions { display: flex; align-items: center; }
1261
+ .rigel .structure-actions button, .rigel .schema-item-actions button { border: 0; border-left: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--text-2); min-width: 26px; height: 100%; padding: 0 0.25rem; cursor: pointer; }
1262
+ .rigel .structure-actions button:disabled, .rigel .schema-item-actions button:disabled { opacity: 0.35; cursor: default; }
1263
+ .rigel .add-section { display: flex; gap: 0.5rem; }
1264
+ .rigel .add-section select { flex: 1; min-width: 0; }
1265
+ .rigel .schema-key { font-family: ui-monospace, monospace; font-size: 0.6875rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
1266
+ .rigel .selected-path { margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-2); }
1267
+ .rigel .schema-object { border: 1px solid var(--border); padding: 0.5rem; margin: 0.5rem 0; }
1268
+ .rigel .schema-object legend { padding: 0 0.25rem; font-size: 0.75rem; color: var(--text-3); }
1269
+ .rigel .schema-item { border: 1px solid var(--border); margin-top: 0.5rem; padding: 0.5rem; }
1270
+ .rigel .schema-item-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.75rem; color: var(--text-2); }
1271
+ .rigel .schema-item-head .schema-key { margin-left: auto; }
1272
+ .rigel .schema-label { display: block; font-size: 0.75rem; color: var(--text-2); margin-bottom: 0.25rem; }
1273
+ @media (max-width: 1100px) {
1274
+ .rigel .visual-editor.with-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 42%; }
1275
+ .rigel .properties-divider { display: none; }
1276
+ .rigel .schema-panel { border-left: 0; border-top: 1px solid var(--border); }
1277
+ }
1278
+ @media (max-width: 767px) {
1279
+ .rigel main.visual-pane { padding: 0.75rem; }
1280
+ .rigel .visual-editor.with-panel { grid-template-rows: minmax(0, 1fr) 50%; }
1281
+ }