concept-atlas-dense-explain 0.2.1 → 0.2.2

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 (4) hide show
  1. package/package.json +12 -3
  2. package/skill/assets/template/src/styles/concept-explain.css +2682 -2430
  3. package/skill/assets/template/src/views/NodeExplorer.jsx +668 -629
  4. package/skill/assets/template/src/views/RelationGraph.jsx +723 -708
package/skill/assets/template/src/styles/concept-explain.css CHANGED
@@ -1,2440 +1,2503 @@
1
- @charset "UTF-8";
2
-
3
- /* ==========================================================================
4
- THEME VARIABLES & DESIGN SYSTEM (Editorial / Knowledge Atlas Style)
5
- ========================================================================== */
6
-
7
- :root,
8
- [data-theme="dark"] {
9
- --theme-mode: "dark";
10
-
11
- /* Background layers - deep indigo slate for high-tech monograph feel */
12
- --bg-canvas: #090d16;
13
- --bg-surface: #0f172a;
14
- --bg-card: #151f32;
15
- --bg-card-hover: #1c2a44;
16
- --bg-subtle: #1e293b;
17
- --bg-highlight: rgba(56, 189, 248, 0.08);
18
-
19
- /* Borders & Dividers */
20
- --border-subtle: rgba(255, 255, 255, 0.08);
21
- --border-medium: rgba(255, 255, 255, 0.14);
22
- --border-strong: rgba(255, 255, 255, 0.24);
23
- --border-accent: rgba(99, 102, 241, 0.4);
24
-
25
- /* Typography Colors */
26
- --text-primary: #f8fafc;
27
- --text-secondary: #cbd5e1;
28
- --text-muted: #94a3b8;
29
- --text-dim: #64748b;
30
- --text-accent: #38bdf8;
31
-
32
- /* Accent & Category Semantic Tones */
33
- --primary: #6366f1;
34
- --primary-light: #818cf8;
35
- --primary-glow: rgba(99, 102, 241, 0.25);
36
-
37
- --accent-cyan: #06b6d4;
38
- --accent-emerald: #10b981;
39
- --accent-amber: #f59e0b;
40
- --accent-rose: #f43f5e;
41
- --accent-purple: #a855f7;
42
-
43
- /* Code & Syntax */
44
- --code-bg: #060911;
45
- --code-text: #34d399;
46
- --code-border: rgba(255, 255, 255, 0.1);
47
-
48
- /* Shadows & Depth */
49
- --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
50
- --shadow-md: 0 4px 16px -2px rgba(0, 0, 0, 0.5), 0 2px 6px -1px rgba(0, 0, 0, 0.4);
51
- --shadow-lg: 0 10px 30px -4px rgba(0, 0, 0, 0.6), 0 4px 12px -2px rgba(0, 0, 0, 0.4);
52
- --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.2);
53
-
54
- /* Knowledge Badge & Callouts */
55
- --callout-info-bg: rgba(56, 189, 248, 0.08);
56
- --callout-info-border: #38bdf8;
57
- --callout-warn-bg: rgba(245, 158, 11, 0.08);
58
- --callout-warn-border: #f59e0b;
59
- --callout-danger-bg: rgba(244, 63, 94, 0.08);
60
- --callout-danger-border: #f43f5e;
61
- --callout-success-bg: rgba(16, 185, 129, 0.08);
62
- --callout-success-border: #10b981;
63
-
64
- /* Graph background grid */
65
- --graph-grid: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
66
- }
67
-
68
- [data-theme="light"] {
69
- --theme-mode: "light";
70
-
71
- /* Background layers - warm parchment & crisp editorial paper */
72
- --bg-canvas: #f6f7f9;
73
- --bg-surface: #ffffff;
74
- --bg-card: #ffffff;
75
- --bg-card-hover: #f1f5f9;
76
- --bg-subtle: #f8fafc;
77
- --bg-highlight: rgba(37, 99, 235, 0.06);
78
-
79
- /* Borders & Dividers */
80
- --border-subtle: rgba(0, 0, 0, 0.06);
81
- --border-medium: rgba(0, 0, 0, 0.12);
82
- --border-strong: rgba(0, 0, 0, 0.2);
83
- --border-accent: rgba(79, 70, 229, 0.35);
84
-
85
- /* Typography Colors */
86
- --text-primary: #0f172a;
87
- --text-secondary: #334155;
88
- --text-muted: #64748b;
89
- --text-dim: #94a3b8;
90
- --text-accent: #2563eb;
91
-
92
- /* Accent & Category Semantic Tones */
93
- --primary: #4f46e5;
94
- --primary-light: #6366f1;
95
- --primary-glow: rgba(79, 70, 229, 0.18);
96
-
97
- --accent-cyan: #0891b2;
98
- --accent-emerald: #059669;
99
- --accent-amber: #d97706;
100
- --accent-rose: #e11d48;
101
- --accent-purple: #9333ea;
102
-
103
- /* Code & Syntax */
104
- --code-bg: #1e293b;
105
- --code-text: #38bdf8;
106
- --code-border: rgba(0, 0, 0, 0.08);
107
-
108
- /* Shadows & Depth */
109
- --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
110
- --shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
111
- --shadow-lg: 0 12px 32px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
112
- --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.12);
113
-
114
- /* Knowledge Badge & Callouts */
115
- --callout-info-bg: #eff6ff;
116
- --callout-info-border: #3b82f6;
117
- --callout-warn-bg: #fffbeb;
118
- --callout-warn-border: #f59e0b;
119
- --callout-danger-bg: #fff1f2;
120
- --callout-danger-border: #f43f5e;
121
- --callout-success-bg: #ecfdf5;
122
- --callout-success-border: #10b981;
123
-
124
- /* Graph background grid */
125
- --graph-grid: radial-gradient(circle, rgba(0, 0, 0, 0.07) 1px, transparent 1px);
126
- }
127
-
128
- /* ==========================================================================
129
- RESET & BASE TYPOGRAPHY
130
- ========================================================================== */
131
-
132
- * {
133
- box-sizing: border-box;
134
- margin: 0;
135
- padding: 0;
136
- }
137
-
138
- html, body {
139
- height: 100%;
140
- background: var(--bg-canvas);
141
- color: var(--text-primary);
142
- font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif;
143
- font-size: 14px;
144
- line-height: 1.6;
145
- letter-spacing: -0.01em;
146
- overflow: hidden;
147
- transition: background-color 0.3s ease, color 0.3s ease;
148
- -webkit-font-smoothing: antialiased;
149
- -moz-osx-font-smoothing: grayscale;
150
- }
151
-
152
- /* Editorial Title Font Styling */
153
- h1, h2, h3, .hero-title, .brand-title {
154
- font-family: 'Lora', 'Noto Serif SC', Georgia, serif;
155
- }
156
-
157
- button, input, select {
158
- font: inherit;
159
- color: inherit;
160
- }
161
-
162
- button {
163
- cursor: pointer;
164
- border: none;
165
- background: transparent;
166
- outline: none;
167
- }
168
-
169
- button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
170
- outline: 2px solid var(--accent-cyan);
171
- outline-offset: 3px;
172
- }
173
-
174
- .global-search { position: relative; display: flex; align-items: center; gap: 7px; min-width: 220px; margin-left: auto; color: var(--text-muted, #94a3b8); }
175
- .global-search input { width: 100%; border: 1px solid var(--line-subtle, rgba(148,163,184,.24)); border-radius: 8px; background: var(--surface-soft, rgba(15,23,42,.3)); color: inherit; padding: 7px 28px 7px 28px; }
176
- .global-search > svg { position: absolute; left: 9px; pointer-events: none; }
177
- .global-search > button { position: absolute; right: 5px; border: 0; background: transparent; color: inherit; padding: 3px; }
178
- .global-search-results { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; padding: 5px; border: 1px solid var(--line-subtle, rgba(148,163,184,.24)); border-radius: 10px; background: var(--surface-strong, #111827); box-shadow: 0 12px 30px rgba(0,0,0,.24); }
179
- .global-search-results button { display: grid; gap: 2px; width: 100%; border: 0; border-radius: 7px; background: transparent; color: var(--text-primary, #e2e8f0); text-align: left; padding: 8px; }
180
- .global-search-results button:hover { background: rgba(148,163,184,.12); }
181
- .global-search-results small { color: var(--text-muted, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
182
-
183
- /* Optional semantic layout primitives */
184
- .semantic-stack { display: flex; flex-direction: column; }
185
- .semantic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
186
- .semantic-split { display: grid; grid-template-columns: var(--split-ratio, 1fr 1fr); align-items: start; }
187
- .gap-sm { gap: 8px; } .gap-md { gap: 16px; } .gap-lg { gap: 28px; }
188
- .semantic-tabs details { border-bottom: 1px solid var(--border-subtle); padding: 8px 0; }
189
- .semantic-tabs summary { cursor: pointer; font-weight: 700; color: var(--text-primary); }
190
- .mermaid-tools { display: inline-flex; align-items: center; gap: 5px; }
191
- .mermaid-tools button { width: 22px; height: 22px; border: 1px solid var(--border-medium); border-radius: 4px; background: var(--bg-subtle); font-weight: 700; }
192
- .mermaid-tools button:hover { color: var(--primary); border-color: var(--primary); }
193
- .mermaid-canvas { overflow: hidden; min-height: 120px; display: grid; place-items: center; cursor: grab; }
194
- .mermaid-canvas-inner { display: inline-block; min-width: 100%; transform-origin: center center; transition: transform .15s ease; }
195
-
196
- /* Scrollbar beautification */
197
- ::-webkit-scrollbar {
198
- width: 6px;
199
- height: 6px;
200
- }
201
-
202
- ::-webkit-scrollbar-track {
203
- background: transparent;
204
- }
205
-
206
- ::-webkit-scrollbar-thumb {
207
- background: var(--border-medium);
208
- border-radius: 4px;
209
- }
210
-
211
- ::-webkit-scrollbar-thumb:hover {
212
- background: var(--border-strong);
213
- }
214
-
215
- /* ==========================================================================
216
- APP CONTAINER & HEADER
217
- ========================================================================== */
218
-
219
- .app-container {
220
- display: flex;
221
- flex-direction: column;
222
- height: 100vh;
223
- width: 100vw;
224
- background: var(--bg-canvas);
225
- }
226
-
227
- /* Header */
228
- .app-header {
229
- height: 60px;
230
- display: flex;
231
- align-items: center;
232
- justify-content: space-between;
233
- padding: 0 24px;
234
- background: var(--bg-surface);
235
- border-bottom: 1px solid var(--border-medium);
236
- z-index: 30;
237
- box-shadow: var(--shadow-sm);
238
- transition: background-color 0.3s ease, border-color 0.3s ease;
239
- }
240
-
241
- .brand-section {
242
- display: flex;
243
- align-items: center;
244
- gap: 14px;
245
- }
246
-
247
- .brand-logo-badge {
248
- display: flex;
249
- align-items: center;
250
- justify-content: center;
251
- width: 32px;
252
- height: 32px;
253
- border-radius: 8px;
254
- background: linear-gradient(135deg, var(--primary) 0%, #38bdf8 100%);
255
- color: #fff;
256
- box-shadow: var(--shadow-glow);
257
- }
258
-
259
- .brand-text-wrap {
260
- display: flex;
261
- align-items: baseline;
262
- gap: 10px;
263
- }
264
-
265
- .brand-title {
266
- font-size: 16px;
267
- font-weight: 700;
268
- letter-spacing: 0.02em;
269
- color: var(--text-primary);
270
- display: flex;
271
- align-items: center;
272
- }
273
-
274
- .brand-doc-title {
275
- font-size: 13px;
276
- font-weight: 500;
277
- color: var(--text-muted);
278
- border-left: 1px solid var(--border-medium);
279
- padding-left: 12px;
280
- max-width: 300px;
281
- white-space: nowrap;
282
- overflow: hidden;
283
- text-overflow: ellipsis;
284
- }
285
-
286
- .header-controls {
287
- display: flex;
288
- align-items: center;
289
- gap: 12px;
290
- }
291
-
292
- /* View switcher tabs */
293
- .view-tabs {
294
- display: flex;
295
- gap: 4px;
296
- background: var(--bg-canvas);
297
- padding: 4px;
298
- border-radius: 10px;
299
- border: 1px solid var(--border-subtle);
300
- }
301
-
302
- .view-tab {
303
- display: flex;
304
- align-items: center;
305
- gap: 7px;
306
- padding: 6px 14px;
307
- border-radius: 7px;
308
- font-size: 13px;
309
- font-weight: 600;
310
- color: var(--text-muted);
311
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
312
- }
313
-
314
- .view-tab:hover {
315
- color: var(--text-primary);
316
- background: rgba(125, 125, 125, 0.08);
317
- }
318
-
319
- .view-tab.active {
320
- background: var(--bg-surface);
321
- color: var(--primary);
322
- box-shadow: var(--shadow-sm);
323
- border: 1px solid var(--border-medium);
324
- }
325
-
326
- /* Theme Toggle Button */
327
- .theme-toggle-btn {
328
- display: flex;
329
- align-items: center;
330
- justify-content: center;
331
- width: 36px;
332
- height: 36px;
333
- border-radius: 9px;
334
- background: var(--bg-canvas);
335
- border: 1px solid var(--border-medium);
336
- color: var(--text-secondary);
337
- transition: all 0.2s ease;
338
- }
339
-
340
- .theme-toggle-btn:hover {
341
- color: var(--text-primary);
342
- border-color: var(--primary);
343
- background: var(--bg-highlight);
344
- transform: translateY(-1px);
345
- }
346
-
347
- /* Viewport Area */
348
- .app-main {
349
- flex: 1;
350
- min-height: 0;
351
- position: relative;
352
- }
353
-
354
- .app-toolbar {
355
- position: absolute;
356
- top: 14px;
357
- right: 18px;
358
- z-index: 100;
359
- display: flex;
360
- align-items: center;
361
- gap: 8px;
362
- padding: 5px;
363
- border: 1px solid var(--border-medium);
364
- border-radius: 10px;
365
- background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
366
- box-shadow: var(--shadow-md);
367
- backdrop-filter: blur(10px);
368
- }
369
-
370
- .app-toolbar .view-tabs {
371
- padding: 2px;
372
- }
373
-
374
- .app-toolbar .view-tab {
375
- padding: 5px 10px;
376
- font-size: 11px;
377
- }
378
-
379
- .app-toolbar .theme-toggle-btn {
380
- display: grid;
381
- place-items: center;
382
- width: 28px;
383
- height: 28px;
384
- border-radius: 6px;
385
- color: var(--text-muted);
386
- }
387
-
388
- .app-toolbar .theme-toggle-btn:hover {
389
- color: var(--text-primary);
390
- background: var(--bg-card-hover);
391
- }
392
-
393
- /* ==========================================================================
394
- NODE EXPLORER (3-COLUMN EDITORIAL KNOWLEDGE LAYOUT)
395
- ========================================================================== */
396
-
397
- .node-explorer-layout {
398
- display: grid;
399
- grid-template-columns: 280px 1fr 340px;
400
- height: 100%;
401
- min-height: 0;
402
- }
403
-
404
- .explorer-side {
405
- background: var(--bg-surface);
406
- overflow-y: auto;
407
- padding: 24px 18px;
408
- transition: background-color 0.3s ease;
409
- }
410
-
411
- .left-side {
412
- border-right: 1px solid var(--border-medium);
413
- }
414
-
415
- .right-side {
416
- border-left: 1px solid var(--border-medium);
417
- }
418
-
419
- .side-section {
420
- margin-bottom: 28px;
421
- }
422
-
423
- .compact-tree {
424
- margin-top: 8px;
425
- margin-bottom: 0;
426
- border-top: 1px solid var(--border-subtle);
427
- padding-top: 12px;
428
- }
429
-
430
- .compact-tree > summary {
431
- list-style: none;
432
- cursor: pointer;
433
- margin-bottom: 0;
434
- }
435
-
436
- .compact-tree > summary::-webkit-details-marker { display: none; }
437
- .compact-tree > summary::after {
438
- content: '＋';
439
- margin-left: auto;
440
- color: var(--text-dim);
441
- font-size: 13px;
442
- }
443
- .compact-tree[open] > summary { margin-bottom: 12px; }
444
- .compact-tree[open] > summary::after { content: '−'; }
445
-
446
- .side-label {
447
- display: flex;
448
- align-items: center;
449
- gap: 6px;
450
- font-size: 11px;
451
- font-weight: 700;
452
- color: var(--text-dim);
453
- text-transform: uppercase;
454
- letter-spacing: 0.08em;
455
- margin-bottom: 12px;
456
- }
457
-
458
- .side-label::before {
459
- content: "";
460
- display: inline-block;
461
- width: 4px;
462
- height: 12px;
463
- background: var(--primary);
464
- border-radius: 2px;
465
- }
466
-
467
- /* Left: Breadcrumbs Tree */
468
- .ancestor-breadcrumbs {
469
- display: flex;
470
- flex-direction: column;
471
- gap: 6px;
472
- position: relative;
473
- padding-left: 14px;
474
- }
475
-
476
- .ancestor-breadcrumbs::before {
477
- content: "";
478
- position: absolute;
479
- left: 4px;
480
- top: 10px;
481
- bottom: 10px;
482
- width: 2px;
483
- background: var(--border-medium);
484
- }
485
-
486
- .breadcrumb-node {
487
- display: flex;
488
- align-items: center;
489
- gap: 8px;
490
- padding: 7px 10px;
491
- border-radius: 8px;
492
- cursor: pointer;
493
- color: var(--text-secondary);
494
- font-size: 13px;
495
- transition: all 0.15s ease;
496
- background: transparent;
497
- border: 1px solid transparent;
498
- }
499
-
500
- .breadcrumb-node:hover {
501
- background: var(--bg-subtle);
502
- color: var(--text-primary);
503
- border-color: var(--border-subtle);
504
- }
505
-
506
- .breadcrumb-node.active {
507
- background: var(--bg-highlight);
508
- color: var(--primary);
509
- font-weight: 600;
510
- border-color: var(--border-accent);
511
- }
512
-
513
- .bc-level-pill {
514
- font-size: 10px;
515
- font-weight: 700;
516
- padding: 1px 6px;
517
- border-radius: 4px;
518
- border: 1px solid;
519
- font-family: monospace;
520
- }
521
-
522
- .bc-title {
523
- flex: 1;
524
- white-space: nowrap;
525
- overflow: hidden;
526
- text-overflow: ellipsis;
527
- }
528
-
529
- .bc-arrow {
530
- color: var(--text-dim);
531
- }
532
-
533
- .back-parent-btn {
534
- display: flex;
535
- align-items: center;
536
- gap: 8px;
537
- width: 100%;
538
- padding: 9px 12px;
539
- border-radius: 8px;
540
- background: var(--bg-subtle);
541
- border: 1px solid var(--border-medium);
542
- color: var(--text-secondary);
543
- font-size: 12px;
544
- font-weight: 600;
545
- transition: all 0.2s ease;
546
- }
547
-
548
- .back-parent-btn:hover {
549
- background: var(--bg-highlight);
550
- color: var(--primary);
551
- border-color: var(--primary);
552
- }
553
-
554
- /* Sibling List */
555
- .sibling-list {
556
- display: flex;
557
- flex-direction: column;
558
- gap: 4px;
559
- }
560
-
561
- .sibling-btn {
562
- display: flex;
563
- align-items: center;
564
- gap: 9px;
565
- padding: 7px 10px;
566
- border-radius: 7px;
567
- text-align: left;
568
- color: var(--text-secondary);
569
- font-size: 12px;
570
- font-weight: 500;
571
- transition: all 0.15s ease;
572
- }
573
-
574
- .sibling-btn:hover {
575
- background: var(--bg-subtle);
576
- color: var(--text-primary);
577
- transform: translateX(2px);
578
- }
579
-
580
- .sib-dot {
581
- width: 6px;
582
- height: 6px;
583
- border-radius: 50%;
584
- flex-shrink: 0;
585
- }
586
-
587
- .sib-title {
588
- flex: 1;
589
- white-space: nowrap;
590
- overflow: hidden;
591
- text-overflow: ellipsis;
592
- }
593
-
594
- .sib-lvl {
595
- font-size: 10px;
596
- font-weight: 600;
597
- color: var(--text-dim);
598
- font-family: monospace;
599
- }
600
-
601
- /* Navigation Hierarchy Tree */
602
- .concept-nav-tree {
603
- display: flex;
604
- flex-direction: column;
605
- gap: 2px;
606
- }
607
-
608
- .tree-node-item {
609
- display: flex;
610
- flex-direction: column;
611
- }
612
-
613
- .tree-node-btn {
614
- display: flex;
615
- align-items: center;
616
- gap: 7px;
617
- padding: 6px 10px;
618
- border-radius: 6px;
619
- text-align: left;
620
- color: var(--text-secondary);
621
- font-size: 12px;
622
- transition: all 0.15s;
623
- position: relative;
624
- }
625
-
626
- .tree-node-btn:hover {
627
- background: var(--bg-subtle);
628
- color: var(--text-primary);
629
- }
630
-
631
- .tree-node-btn.active {
632
- background: var(--bg-highlight);
633
- color: var(--primary);
634
- font-weight: 600;
635
- }
636
-
637
- .tree-node-btn.active::before {
638
- content: "";
639
- position: absolute;
640
- left: 0;
641
- top: 4px;
642
- bottom: 4px;
643
- width: 3px;
644
- background: var(--primary);
645
- border-radius: 0 2px 2px 0;
646
- }
647
-
648
- .node-bullet {
649
- width: 6px;
650
- height: 6px;
651
- border-radius: 50%;
652
- flex-shrink: 0;
653
- }
654
-
655
- .tree-title {
656
- flex: 1;
657
- white-space: nowrap;
658
- overflow: hidden;
659
- text-overflow: ellipsis;
660
- }
661
-
662
- .tree-level {
663
- font-size: 10px;
664
- font-weight: 600;
665
- color: var(--text-dim);
666
- font-family: monospace;
667
- }
668
-
669
- /* ==========================================================================
670
- MIDDLE COLUMN: KNOWLEDGE HERO & ARTICLE EXPLANATION
671
- ========================================================================== */
672
-
673
- .explorer-center {
674
- background: var(--bg-canvas);
675
- overflow-y: auto;
676
- padding: 32px 40px;
677
- transition: background-color 0.3s ease;
678
- }
679
-
680
- .center-scrollable {
681
- max-width: 860px;
682
- margin: 0 auto;
683
- }
684
-
685
- /* Toolbar */
686
- .center-toolbar {
687
- display: flex;
688
- align-items: center;
689
- justify-content: space-between;
690
- margin-bottom: 24px;
691
- padding-bottom: 14px;
692
- border-bottom: 1px solid var(--border-medium);
693
- }
694
-
695
- .node-id-tag {
696
- font-size: 11px;
697
- font-weight: 600;
698
- color: var(--text-dim);
699
- font-family: 'Fira Code', monospace;
700
- letter-spacing: 0.04em;
701
- }
702
-
703
- .node-id-tag code {
704
- color: var(--primary-light);
705
- background: var(--bg-surface);
706
- padding: 3px 8px;
707
- border-radius: 6px;
708
- border: 1px solid var(--border-subtle);
709
- }
710
-
711
- .level-indicators {
712
- display: flex;
713
- gap: 5px;
714
- }
715
-
716
- .level-pill {
717
- padding: 4px 9px;
718
- border-radius: 6px;
719
- font-size: 11px;
720
- font-weight: 700;
721
- background: var(--bg-surface);
722
- color: var(--text-dim);
723
- border: 1px solid var(--border-medium);
724
- transition: all 0.2s ease;
725
- }
726
-
727
- .level-pill:hover {
728
- border-color: var(--text-muted);
729
- color: var(--text-primary);
730
- }
731
-
732
- .level-pill.active {
733
- background: var(--primary);
734
- color: #fff;
735
- border-color: var(--primary);
736
- box-shadow: var(--shadow-sm);
737
- }
738
-
739
- .view-graph-btn {
740
- display: flex;
741
- align-items: center;
742
- gap: 6px;
743
- padding: 6px 14px;
744
- border-radius: 8px;
745
- background: var(--bg-surface);
746
- border: 1px solid var(--border-medium);
747
- color: var(--primary);
748
- font-size: 12px;
749
- font-weight: 600;
750
- box-shadow: var(--shadow-sm);
751
- transition: all 0.2s ease;
752
- }
753
-
754
- .view-graph-btn:hover {
755
- background: var(--primary);
756
- color: #fff;
757
- border-color: var(--primary);
758
- transform: translateY(-1px);
759
- }
760
-
761
- /* HERO EXPLANATORY CARD */
762
- .concept-hero-card {
763
- background: var(--bg-surface);
764
- border: 1px solid var(--border-medium);
765
- border-radius: 16px;
766
- padding: 32px 36px;
767
- margin-bottom: 28px;
768
- box-shadow: var(--shadow-md);
769
- position: relative;
770
- overflow: hidden;
771
- }
772
-
773
- .concept-hero-card::after {
774
- content: "";
775
- position: absolute;
776
- top: 0;
777
- left: 0;
778
- right: 0;
779
- height: 4px;
780
- background: linear-gradient(90deg, var(--primary) 0%, #38bdf8 50%, #34d399 100%);
781
- }
782
-
783
- .hero-level-banner {
784
- display: flex;
785
- align-items: center;
786
- gap: 10px;
787
- font-size: 12px;
788
- font-weight: 700;
789
- letter-spacing: 0.04em;
790
- margin-bottom: 14px;
791
- }
792
-
793
- .hero-level-banner .badge {
794
- background: var(--bg-highlight);
795
- padding: 4px 10px;
796
- border-radius: 6px;
797
- border: 1px solid var(--border-accent);
798
- }
799
-
800
- .hero-title {
801
- font-size: 32px;
802
- font-weight: 800;
803
- color: var(--text-primary);
804
- line-height: 1.25;
805
- margin-bottom: 14px;
806
- letter-spacing: -0.02em;
807
- }
808
-
809
- .hero-summary {
810
- font-size: 16px;
811
- color: var(--text-secondary);
812
- line-height: 1.7;
813
- margin-bottom: 24px;
814
- font-family: 'Lora', Georgia, serif;
815
- font-style: italic;
816
- }
817
-
818
- .hero-meta-chips {
819
- display: flex;
820
- flex-wrap: wrap;
821
- gap: 10px;
822
- margin-bottom: 24px;
823
- }
824
-
825
- .meta-chip {
826
- display: flex;
827
- align-items: center;
828
- gap: 8px;
829
- background: var(--bg-canvas);
830
- border: 1px solid var(--border-medium);
831
- padding: 6px 12px;
832
- border-radius: 8px;
833
- font-size: 12px;
834
- }
835
-
836
- .chip-label {
837
- font-weight: 700;
838
- color: var(--text-dim);
839
- font-size: 11px;
840
- text-transform: uppercase;
841
- letter-spacing: 0.05em;
842
- }
843
-
844
- .chip-value {
845
- color: var(--text-primary);
846
- font-weight: 500;
847
- }
848
-
849
- /* Local Flow Ribbon (Upstream -> Focus -> Downstream) */
850
- .local-flow-ribbon {
851
- display: flex;
852
- align-items: stretch;
853
- gap: 12px;
854
- background: var(--bg-canvas);
855
- border: 1px solid var(--border-medium);
856
- padding: 16px;
857
- border-radius: 12px;
858
- }
859
-
860
- .flow-box {
861
- flex: 1;
862
- display: flex;
863
- flex-direction: column;
864
- justify-content: center;
865
- gap: 4px;
866
- padding: 12px 14px;
867
- background: var(--bg-surface);
868
- border: 1px solid var(--border-medium);
869
- border-radius: 8px;
870
- font-size: 12px;
871
- transition: all 0.2s ease;
872
- }
873
-
874
- button.flow-box {
875
- text-align: left;
876
- }
877
-
878
- .flow-box.current-focus {
879
- border-color: var(--primary);
880
- background: var(--bg-highlight);
881
- box-shadow: var(--shadow-glow);
882
- }
883
-
884
- .flow-box.clickable:hover {
885
- background: var(--bg-subtle);
886
- border-color: var(--primary);
887
- transform: translateY(-2px);
888
- }
889
-
890
- .flow-box.disabled {
891
- opacity: 0.6;
892
- cursor: default;
893
- }
894
-
895
- .box-type {
896
- font-size: 10px;
897
- font-weight: 700;
898
- color: var(--text-dim);
899
- text-transform: uppercase;
900
- letter-spacing: 0.06em;
901
- }
902
-
903
- .box-title {
904
- font-weight: 700;
905
- color: var(--text-primary);
906
- white-space: nowrap;
907
- overflow: hidden;
908
- text-overflow: ellipsis;
909
- font-size: 13px;
910
- }
911
-
912
- .flow-arrow {
913
- display: flex;
914
- align-items: center;
915
- color: var(--text-dim);
916
- font-size: 16px;
917
- }
918
-
919
- .flow-node-list {
920
- display: flex;
921
- flex-direction: column;
922
- gap: 4px;
923
- margin-top: 6px;
924
- }
925
-
926
- .flow-node-link {
927
- display: flex;
928
- align-items: center;
929
- justify-content: space-between;
930
- gap: 6px;
931
- width: 100%;
932
- padding: 4px 6px;
933
- border-radius: 4px;
934
- color: var(--text-secondary);
935
- font-size: 12px;
936
- font-weight: 500;
937
- background: var(--bg-canvas);
938
- border: 1px solid var(--border-subtle);
939
- transition: all 0.15s ease;
940
- }
941
-
942
- .flow-node-link:hover {
943
- color: var(--primary);
944
- border-color: var(--primary);
945
- background: var(--bg-surface);
946
- }
947
-
948
- /* ==========================================================================
949
- CONTENT BLOCKS (Editorial Monograph Structure)
950
- ========================================================================== */
951
-
952
- .content-blocks {
953
- display: flex;
954
- flex-direction: column;
955
- gap: 14px;
956
- }
957
-
958
- .node-block {
959
- background: var(--bg-surface);
960
- border: 1px solid var(--border-medium);
961
- border-radius: 12px;
962
- padding: 24px 28px;
963
- box-shadow: var(--shadow-sm);
964
- transition: all 0.2s ease;
965
- }
966
-
967
- .node-block:hover {
968
- border-color: var(--border-strong);
969
- }
970
-
971
- .node-block.highlight-warn {
972
- border-left: 4px solid var(--accent-rose);
973
- background: var(--callout-danger-bg);
974
- }
975
-
976
- .block-head {
977
- display: flex;
978
- align-items: baseline;
979
- justify-content: space-between;
980
- margin-bottom: 14px;
981
- border-bottom: 1px solid var(--border-subtle);
982
- padding-bottom: 10px;
983
- }
984
-
985
- .block-head h2 {
986
- font-size: 18px;
987
- font-weight: 700;
988
- color: var(--text-primary);
989
- letter-spacing: -0.01em;
990
- }
991
-
992
- .block-head small {
993
- font-size: 12px;
994
- color: var(--text-dim);
995
- font-weight: 500;
996
- }
997
-
998
- .block-body {
999
- color: var(--text-secondary);
1000
- font-size: 14px;
1001
- line-height: 1.8;
1002
- }
1003
-
1004
- .impl-lang {
1005
- font-size: 11px;
1006
- font-weight: 700;
1007
- font-family: 'Fira Code', monospace;
1008
- text-transform: uppercase;
1009
- background: var(--bg-canvas);
1010
- padding: 3px 8px;
1011
- border-radius: 6px;
1012
- color: var(--primary);
1013
- border: 1px solid var(--border-medium);
1014
- }
1015
-
1016
- .code-block {
1017
- background: var(--code-bg);
1018
- padding: 18px 20px;
1019
- border-radius: 10px;
1020
- overflow-x: auto;
1021
- font-family: "Fira Code", monospace;
1022
- font-size: 13px;
1023
- line-height: 1.6;
1024
- color: var(--code-text);
1025
- border: 1px solid var(--code-border);
1026
- box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
1027
- }
1028
-
1029
- .example-item, .counterexample-item {
1030
- margin-top: 12px;
1031
- padding: 14px 18px;
1032
- border-radius: 8px;
1033
- background: var(--bg-canvas);
1034
- border: 1px solid var(--border-medium);
1035
- }
1036
-
1037
- .ex-title {
1038
- font-weight: 700;
1039
- color: var(--accent-emerald);
1040
- margin-bottom: 6px;
1041
- font-size: 13px;
1042
- }
1043
-
1044
- .cex-title {
1045
- font-weight: 700;
1046
- color: var(--accent-rose);
1047
- margin-bottom: 6px;
1048
- font-size: 13px;
1049
- }
1050
-
1051
- /* Subnode Grid for Drill-down */
1052
- .subnodes-grid {
1053
- display: grid;
1054
- grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
1055
- gap: 14px;
1056
- margin-top: 14px;
1057
- }
1058
-
1059
- .subnode-card {
1060
- background: var(--bg-canvas);
1061
- border: 1px solid var(--border-medium);
1062
- border-radius: 10px;
1063
- padding: 18px;
1064
- cursor: pointer;
1065
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1066
- display: flex;
1067
- flex-direction: column;
1068
- }
1069
-
1070
- .subnode-card:hover {
1071
- border-color: var(--primary);
1072
- background: var(--bg-surface);
1073
- transform: translateY(-3px);
1074
- box-shadow: var(--shadow-md);
1075
- }
1076
-
1077
- .sn-header {
1078
- display: flex;
1079
- justify-content: space-between;
1080
- align-items: center;
1081
- margin-bottom: 8px;
1082
- }
1083
-
1084
- .sn-level {
1085
- font-size: 11px;
1086
- font-weight: 800;
1087
- font-family: monospace;
1088
- }
1089
-
1090
- .sn-arrow {
1091
- color: var(--text-dim);
1092
- transition: transform 0.2s;
1093
- }
1094
-
1095
- .subnode-card:hover .sn-arrow {
1096
- color: var(--primary);
1097
- transform: translate(2px, -2px);
1098
- }
1099
-
1100
- .sn-title {
1101
- font-size: 15px;
1102
- font-weight: 700;
1103
- color: var(--text-primary);
1104
- margin-bottom: 6px;
1105
- }
1106
-
1107
- .sn-summary {
1108
- font-size: 12px;
1109
- color: var(--text-muted);
1110
- line-height: 1.5;
1111
- flex: 1;
1112
- }
1113
-
1114
- /* ==========================================================================
1115
- RIGHT COLUMN: CONTEXT INSPECTOR & LOCAL GRAPH LINKS
1116
- ========================================================================== */
1117
-
1118
- .inspector-container {
1119
- display: flex;
1120
- flex-direction: column;
1121
- gap: 24px;
1122
- }
1123
-
1124
- .inspector-head {
1125
- padding-bottom: 12px;
1126
- border-bottom: 1px solid var(--border-medium);
1127
- }
1128
-
1129
- .insp-title {
1130
- font-size: 14px;
1131
- font-weight: 700;
1132
- color: var(--text-primary);
1133
- }
1134
-
1135
- .insp-sub {
1136
- font-size: 11px;
1137
- color: var(--text-dim);
1138
- margin-top: 2px;
1139
- }
1140
-
1141
- .insp-group {
1142
- display: flex;
1143
- flex-direction: column;
1144
- gap: 10px;
1145
- }
1146
-
1147
- .insp-label {
1148
- font-size: 11px;
1149
- font-weight: 700;
1150
- color: var(--text-dim);
1151
- text-transform: uppercase;
1152
- letter-spacing: 0.08em;
1153
- }
1154
-
1155
- .insp-pill-list {
1156
- list-style: none;
1157
- display: flex;
1158
- flex-wrap: wrap;
1159
- gap: 6px;
1160
- }
1161
-
1162
- .insp-pill {
1163
- font-size: 12px;
1164
- font-weight: 500;
1165
- padding: 5px 12px;
1166
- border-radius: 6px;
1167
- background: var(--bg-canvas);
1168
- border: 1px solid var(--border-medium);
1169
- color: var(--text-secondary);
1170
- }
1171
-
1172
- .prereq-pill {
1173
- border-left: 3px solid var(--accent-amber);
1174
- }
1175
-
1176
- .boundary-card {
1177
- background: var(--bg-canvas);
1178
- border: 1px solid var(--border-medium);
1179
- padding: 12px 14px;
1180
- border-radius: 8px;
1181
- font-size: 12px;
1182
- }
1183
-
1184
- .b-title {
1185
- font-weight: 700;
1186
- color: var(--accent-amber);
1187
- margin-bottom: 4px;
1188
- }
1189
-
1190
- .b-content {
1191
- color: var(--text-secondary);
1192
- line-height: 1.5;
1193
- }
1194
-
1195
- .relation-links {
1196
- display: flex;
1197
- flex-direction: column;
1198
- gap: 8px;
1199
- }
1200
-
1201
- .relation-link-card {
1202
- background: var(--bg-canvas);
1203
- border: 1px solid var(--border-medium);
1204
- border-radius: 8px;
1205
- padding: 12px 14px;
1206
- cursor: pointer;
1207
- transition: all 0.2s ease;
1208
- }
1209
-
1210
- .relation-link-card:hover {
1211
- background: var(--bg-surface);
1212
- border-color: var(--primary);
1213
- transform: translateX(3px);
1214
- box-shadow: var(--shadow-sm);
1215
- }
1216
-
1217
- .rel-type-tag {
1218
- display: inline-block;
1219
- font-size: 10px;
1220
- font-weight: 700;
1221
- border-radius: 4px;
1222
- border: 1px solid;
1223
- padding: 2px 7px;
1224
- margin-bottom: 6px;
1225
- }
1226
-
1227
- .rel-target {
1228
- display: flex;
1229
- align-items: center;
1230
- justify-content: space-between;
1231
- font-size: 13px;
1232
- font-weight: 600;
1233
- color: var(--text-primary);
1234
- }
1235
-
1236
- .rel-desc {
1237
- font-size: 11px;
1238
- color: var(--text-muted);
1239
- margin-top: 4px;
1240
- line-height: 1.4;
1241
- }
1242
-
1243
- .glossary-dl dt {
1244
- font-weight: 700;
1245
- color: var(--primary);
1246
- font-size: 12px;
1247
- margin-top: 8px;
1248
- }
1249
-
1250
- .glossary-dl dd {
1251
- color: var(--text-secondary);
1252
- font-size: 12px;
1253
- margin-bottom: 10px;
1254
- line-height: 1.5;
1255
- }
1256
-
1257
- /* ==========================================================================
1258
- GLOBAL RELATION GRAPH VIEW
1259
- ========================================================================== */
1260
-
1261
- .relation-graph-layout {
1262
- display: grid;
1263
- grid-template-columns: 1fr 360px;
1264
- height: 100%;
1265
- position: relative;
1266
- }
1267
-
1268
- .graph-main {
1269
- position: relative;
1270
- height: 100%;
1271
- background: var(--bg-canvas);
1272
- background-image: var(--graph-grid);
1273
- background-size: 24px 24px;
1274
- overflow: hidden;
1275
- }
1276
-
1277
- .graph-control-bar {
1278
- position: absolute;
1279
- top: 20px;
1280
- left: 20px;
1281
- right: 20px;
1282
- z-index: 10;
1283
- display: flex;
1284
- align-items: center;
1285
- gap: 12px;
1286
- pointer-events: auto;
1287
- }
1288
-
1289
- .graph-mode-switch {
1290
- display: flex;
1291
- gap: 2px;
1292
- padding: 3px;
1293
- background: var(--bg-surface);
1294
- border: 1px solid var(--border-medium);
1295
- border-radius: 8px;
1296
- box-shadow: var(--shadow-sm);
1297
- }
1298
-
1299
- .graph-mode-switch button {
1300
- padding: 5px 10px;
1301
- border-radius: 5px;
1302
- color: var(--text-dim);
1303
- font-size: 11px;
1304
- font-weight: 700;
1305
- white-space: nowrap;
1306
- }
1307
-
1308
- .graph-mode-switch button:hover {
1309
- color: var(--text-primary);
1310
- }
1311
-
1312
- .graph-mode-switch button.active {
1313
- color: #fff;
1314
- background: var(--primary);
1315
- }
1316
-
1317
- .search-box {
1318
- display: flex;
1319
- align-items: center;
1320
- gap: 10px;
1321
- background: var(--bg-surface);
1322
- border: 1px solid var(--border-medium);
1323
- padding: 8px 14px;
1324
- border-radius: 10px;
1325
- width: 260px;
1326
- box-shadow: var(--shadow-sm);
1327
- transition: all 0.2s ease;
1328
- }
1329
-
1330
- .search-box:focus-within {
1331
- border-color: var(--primary);
1332
- box-shadow: var(--shadow-glow);
1333
- }
1334
-
1335
- .search-box input {
1336
- background: transparent;
1337
- border: none;
1338
- outline: none;
1339
- width: 100%;
1340
- color: var(--text-primary);
1341
- font-size: 13px;
1342
- }
1343
-
1344
- .search-icon {
1345
- color: var(--text-dim);
1346
- }
1347
-
1348
- .filter-group {
1349
- display: flex;
1350
- align-items: center;
1351
- gap: 8px;
1352
- background: var(--bg-surface);
1353
- border: 1px solid var(--border-medium);
1354
- padding: 7px 12px;
1355
- border-radius: 10px;
1356
- font-size: 12px;
1357
- box-shadow: var(--shadow-sm);
1358
- }
1359
-
1360
- .filter-group select {
1361
- background: transparent;
1362
- border: none;
1363
- outline: none;
1364
- color: var(--text-primary);
1365
- font-size: 12px;
1366
- font-weight: 500;
1367
- cursor: pointer;
1368
- }
1369
-
1370
- .filter-group select option {
1371
- background: var(--bg-surface);
1372
- color: var(--text-primary);
1373
- }
1374
-
1375
- .filter-label {
1376
- color: var(--text-dim);
1377
- font-weight: 600;
1378
- }
1379
-
1380
- .graph-legend-ribbon {
1381
- position: absolute;
1382
- bottom: 20px;
1383
- left: 20px;
1384
- display: flex;
1385
- align-items: center;
1386
- gap: 14px;
1387
- background: var(--bg-surface);
1388
- backdrop-filter: blur(12px);
1389
- border: 1px solid var(--border-medium);
1390
- padding: 8px 18px;
1391
- border-radius: 30px;
1392
- font-size: 11px;
1393
- box-shadow: var(--shadow-md);
1394
- }
1395
-
1396
- .legend-title {
1397
- color: var(--text-dim);
1398
- font-weight: 700;
1399
- text-transform: uppercase;
1400
- letter-spacing: 0.05em;
1401
- }
1402
-
1403
- .legend-items {
1404
- display: flex;
1405
- gap: 12px;
1406
- }
1407
-
1408
- .legend-item {
1409
- display: flex;
1410
- align-items: center;
1411
- gap: 5px;
1412
- color: var(--text-secondary);
1413
- }
1414
-
1415
- .legend-dot {
1416
- width: 8px;
1417
- height: 8px;
1418
- border-radius: 50%;
1419
- }
1420
-
1421
- .graph-svg {
1422
- width: 100%;
1423
- height: 100%;
1424
- cursor: grab;
1425
- }
1426
-
1427
- .graph-svg:active {
1428
- cursor: grabbing;
1429
- }
1430
-
1431
- /* SVG paths are open strokes; disabling the default fill prevents the
1432
- browser from closing them into grey polygons between connected nodes. */
1433
- .graph-edge {
1434
- fill: none;
1435
- stroke-linecap: round;
1436
- stroke-linejoin: round;
1437
- }
1438
-
1439
- .graph-edge-label {
1440
- pointer-events: none;
1441
- }
1442
-
1443
- /* ==========================================================================
1444
- CONCEPT DRAFT CANVAS
1445
- ========================================================================== */
1446
-
1447
- .explorer-center {
1448
- min-width: 0;
1449
- overflow: hidden;
1450
- padding: 16px 20px 20px;
1451
- background:
1452
- linear-gradient(rgba(56, 189, 248, 0.025) 1px, transparent 1px),
1453
- linear-gradient(90deg, rgba(56, 189, 248, 0.025) 1px, transparent 1px),
1454
- var(--bg-canvas);
1455
- background-size: 28px 28px;
1456
- }
1457
-
1458
- .center-scrollable {
1459
- width: 100%;
1460
- max-width: none;
1461
- height: 100%;
1462
- display: flex;
1463
- flex-direction: column;
1464
- }
1465
-
1466
- .center-toolbar {
1467
- flex: 0 0 auto;
1468
- gap: 10px;
1469
- min-height: 24px;
1470
- margin-bottom: 4px;
1471
- padding-bottom: 4px;
1472
- border-bottom: 0;
1473
- }
1474
-
1475
- .draft-floating-tools {
1476
- position: fixed;
1477
- right: 10px;
1478
- bottom: 10px;
1479
- z-index: 5;
1480
- display: flex;
1481
- align-items: center;
1482
- gap: 8px;
1483
- padding: 5px;
1484
- border: 1px solid var(--border-medium);
1485
- border-radius: 9px;
1486
- background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
1487
- box-shadow: var(--shadow-sm);
1488
- backdrop-filter: blur(8px);
1489
- opacity: 0.62;
1490
- transition: opacity 0.2s ease, transform 0.2s ease;
1491
- }
1492
-
1493
- .draft-floating-tools:hover,
1494
- .draft-floating-tools:focus-within {
1495
- opacity: 1;
1496
- transform: translateY(-2px);
1497
- }
1498
-
1499
- @media (max-width: 900px) {
1500
- .app-toolbar {
1501
- right: 10px;
1502
- }
1503
-
1504
- .draft-floating-tools {
1505
- top: auto;
1506
- right: 8px;
1507
- bottom: 8px;
1508
- }
1509
- }
1510
-
1511
- .draft-floating-tools .view-graph-btn {
1512
- margin: 0;
1513
- padding: 5px 9px;
1514
- }
1515
-
1516
- .draft-zoom-controls {
1517
- display: flex;
1518
- align-items: center;
1519
- gap: 3px;
1520
- padding: 3px;
1521
- border: 1px solid var(--border-medium);
1522
- border-radius: 8px;
1523
- background: var(--bg-surface);
1524
- box-shadow: var(--shadow-sm);
1525
- color: var(--text-muted);
1526
- font-size: 10px;
1527
- font-weight: 700;
1528
- }
1529
-
1530
- .draft-zoom-controls button {
1531
- display: grid;
1532
- place-items: center;
1533
- width: 24px;
1534
- height: 24px;
1535
- border-radius: 5px;
1536
- color: var(--text-muted);
1537
- }
1538
-
1539
- .draft-zoom-controls button:hover {
1540
- color: var(--text-primary);
1541
- background: var(--bg-card-hover);
1542
- }
1543
-
1544
- .draft-zoom-controls span {
1545
- min-width: 36px;
1546
- text-align: center;
1547
- }
1548
-
1549
- .draft-viewport {
1550
- flex: 1 1 auto;
1551
- min-height: 0;
1552
- position: relative;
1553
- overflow: hidden;
1554
- padding: 12px 10px 40px;
1555
- scrollbar-gutter: stable both-edges;
1556
- cursor: grab;
1557
- touch-action: none;
1558
- }
1559
-
1560
- .draft-viewport:active {
1561
- cursor: grabbing;
1562
- }
1563
-
1564
- .draft-viewport.is-dragging,
1565
- .draft-viewport.is-dragging * {
1566
- user-select: none !important;
1567
- }
1568
-
1569
- .draft-board {
1570
- min-width: 980px;
1571
- min-height: 100%;
1572
- position: relative;
1573
- transform-origin: top left;
1574
- padding: 4px 8px 28px;
1575
- user-select: none;
1576
- }
1577
-
1578
- .draft-board .node-block,
1579
- .draft-board .inline-inspector {
1580
- user-select: text;
1581
- }
1582
-
1583
- .draft-board .concept-hero-card {
1584
- margin-bottom: 18px;
1585
- padding: 22px 26px;
1586
- border-radius: 7px 12px 8px 10px;
1587
- border-style: solid;
1588
- box-shadow: 3px 4px 0 rgba(15, 23, 42, 0.12), var(--shadow-sm);
1589
- }
1590
-
1591
- .draft-board .hero-title {
1592
- font-size: 28px;
1593
- }
1594
-
1595
- .draft-board .hero-meta-chips {
1596
- margin-bottom: 0;
1597
- }
1598
-
1599
- .draft-board .content-blocks {
1600
- display: grid;
1601
- grid-template-columns: repeat(3, minmax(250px, 1fr));
1602
- align-items: start;
1603
- gap: 12px;
1604
- }
1605
-
1606
- .hierarchy-strip {
1607
- position: relative;
1608
- display: flex;
1609
- flex-direction: column;
1610
- gap: 6px;
1611
- flex: 0 0 auto;
1612
- width: 100%;
1613
- min-height: 38px;
1614
- margin: 0 0 10px;
1615
- padding: 0 2px 8px;
1616
- border-bottom: 1px solid var(--border-medium);
1617
- }
1618
-
1619
- .hierarchy-strip-main, .hierarchy-strip-children { display: flex; align-items: center; gap: 8px; min-width: 0; }
1620
- .hierarchy-strip-main { min-height: 30px; }
1621
- .hierarchy-strip-label { flex: 0 0 auto; color: var(--text-dim); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
1622
-
1623
- .hierarchy-strip-path,
1624
- .hierarchy-strip-children {
1625
- display: flex;
1626
- align-items: center;
1627
- gap: 2px;
1628
- }
1629
-
1630
- .hierarchy-strip-path {
1631
- min-width: 0;
1632
- flex: 1 1 auto;
1633
- overflow: hidden;
1634
- }
1635
-
1636
- .hierarchy-strip-path button,
1637
- .hierarchy-strip-path strong,
1638
- .hierarchy-strip-children button,
1639
- .hierarchy-strip-empty {
1640
- display: inline-flex;
1641
- align-items: center;
1642
- gap: 4px;
1643
- min-height: 26px;
1644
- padding: 3px 6px;
1645
- border-radius: 5px;
1646
- color: var(--text-secondary);
1647
- font-size: 11px;
1648
- }
1649
-
1650
- .hierarchy-strip-path button:hover,
1651
- .hierarchy-strip-children button:hover {
1652
- background: var(--bg-card-hover);
1653
- color: var(--text-primary);
1654
- }
1655
-
1656
- .hierarchy-strip-path span {
1657
- color: var(--text-dim);
1658
- font-family: 'Fira Code', monospace;
1659
- font-size: 9px;
1660
- }
1661
-
1662
- .hierarchy-strip-path strong {
1663
- border: 1px solid var(--border-accent);
1664
- background: var(--bg-highlight);
1665
- color: var(--text-primary);
1666
- }
1667
-
1668
- .hierarchy-strip-children {
1669
- padding-left: 0;
1670
- }
1671
-
1672
- .hierarchy-child-scroll { display: flex; gap: 5px; overflow-x: auto; min-width: 0; }
1673
-
1674
- .hierarchy-strip-children button {
1675
- border: 1px solid var(--border-subtle);
1676
- background: var(--bg-canvas);
1677
- color: var(--text-accent);
1678
- }
1679
-
1680
- .hierarchy-strip-children .hierarchy-parent-link {
1681
- border: 0;
1682
- background: transparent;
1683
- color: var(--text-muted);
1684
- }
1685
-
1686
- .hierarchy-strip-empty {
1687
- color: var(--text-dim);
1688
- font-style: italic;
1689
- }
1690
-
1691
- .hierarchy-navigator {
1692
- margin: 0 0 16px;
1693
- padding: 8px 10px;
1694
- border-top: 1px solid var(--border-subtle);
1695
- border-bottom: 1px solid var(--border-subtle);
1696
- background: color-mix(in srgb, var(--bg-surface) 84%, var(--primary) 16%);
1697
- }
1698
-
1699
- .hierarchy-nav-label {
1700
- margin-bottom: 6px;
1701
- color: var(--text-dim);
1702
- font-family: 'Fira Code', monospace;
1703
- font-size: 9px;
1704
- font-weight: 700;
1705
- letter-spacing: 0.08em;
1706
- text-transform: uppercase;
1707
- }
1708
-
1709
- .hierarchy-nav-track {
1710
- display: flex;
1711
- align-items: stretch;
1712
- gap: 8px;
1713
- }
1714
-
1715
- .hierarchy-nav-node,
1716
- .hierarchy-nav-current,
1717
- .hierarchy-nav-children {
1718
- display: flex;
1719
- flex: 1;
1720
- min-width: 0;
1721
- flex-direction: column;
1722
- justify-content: center;
1723
- padding: 7px 9px;
1724
- border: 1px solid var(--border-subtle);
1725
- border-radius: 6px;
1726
- background: var(--bg-canvas);
1727
- text-align: left;
1728
- }
1729
-
1730
- .hierarchy-nav-node:hover:not(:disabled) {
1731
- border-color: var(--primary-light);
1732
- background: var(--bg-card-hover);
1733
- }
1734
-
1735
- .hierarchy-nav-node small,
1736
- .hierarchy-nav-current small,
1737
- .hierarchy-nav-children small {
1738
- margin-bottom: 2px;
1739
- color: var(--text-dim);
1740
- font-size: 9px;
1741
- font-weight: 800;
1742
- }
1743
-
1744
- .hierarchy-nav-node span,
1745
- .hierarchy-nav-current span,
1746
- .hierarchy-nav-children > span {
1747
- overflow: hidden;
1748
- color: var(--text-primary);
1749
- font-size: 11px;
1750
- font-weight: 700;
1751
- text-overflow: ellipsis;
1752
- white-space: nowrap;
1753
- }
1754
-
1755
- .hierarchy-nav-current {
1756
- flex: 0 0 130px;
1757
- border-color: var(--border-accent);
1758
- background: var(--bg-highlight);
1759
- }
1760
-
1761
- .hierarchy-nav-arrow {
1762
- align-self: center;
1763
- flex: 0 0 auto;
1764
- color: var(--text-dim);
1765
- }
1766
-
1767
- .hierarchy-nav-children.is-disabled,
1768
- .hierarchy-nav-node.is-disabled {
1769
- opacity: 0.5;
1770
- }
1771
-
1772
- .hierarchy-child-links {
1773
- display: flex;
1774
- flex-wrap: wrap;
1775
- gap: 4px;
1776
- }
1777
-
1778
- .hierarchy-child-links button {
1779
- display: inline-flex;
1780
- align-items: center;
1781
- gap: 3px;
1782
- max-width: 100%;
1783
- padding: 2px 5px;
1784
- border: 1px solid var(--border-subtle);
1785
- border-radius: 4px;
1786
- color: var(--text-accent);
1787
- font-size: 10px;
1788
- }
1789
-
1790
- .hierarchy-child-links button:hover {
1791
- border-color: var(--primary-light);
1792
- background: var(--bg-card-hover);
1793
- }
1794
-
1795
- .draft-board .node-block {
1796
- min-width: 0;
1797
- padding: 16px 17px;
1798
- border-radius: 8px 11px 7px 10px;
1799
- box-shadow: 2px 3px 0 rgba(15, 23, 42, 0.09), var(--shadow-sm);
1800
- }
1801
-
1802
- .draft-board .node-block:nth-child(3n) {
1803
- transform: rotate(-0.2deg);
1804
- }
1805
-
1806
- .draft-board .node-block:nth-child(3n + 1) {
1807
- transform: rotate(0.15deg);
1808
- }
1809
-
1810
- .draft-board .drill-down-section,
1811
- .draft-board .custom-section {
1812
- grid-column: auto;
1813
- justify-self: start;
1814
- width: fit-content;
1815
- max-width: 100%;
1816
- min-width: 0;
1817
- }
1818
-
1819
- .draft-board .custom-section:has(.semantic-widget-absolute) {
1820
- position: static;
1821
- width: 0;
1822
- height: 0;
1823
- min-height: 0;
1824
- padding: 0;
1825
- border: 0;
1826
- overflow: visible;
1827
- box-shadow: none;
1828
- }
1829
-
1830
- .node-explorer-layout {
1831
- grid-template-columns: 220px minmax(0, 1fr);
1832
- }
1833
-
1834
- .node-explorer-layout .right-side {
1835
- display: none;
1836
- }
1837
-
1838
- .inline-inspector {
1839
- margin-top: 18px;
1840
- padding: 18px 20px;
1841
- border: 1px dashed var(--border-strong);
1842
- border-radius: 10px 7px 11px 8px;
1843
- background: color-mix(in srgb, var(--bg-surface) 86%, var(--primary) 14%);
1844
- box-shadow: 2px 3px 0 rgba(15, 23, 42, 0.08);
1845
- }
1846
-
1847
- .inline-inspector-head {
1848
- display: flex;
1849
- align-items: end;
1850
- justify-content: space-between;
1851
- gap: 16px;
1852
- margin-bottom: 14px;
1853
- padding-bottom: 10px;
1854
- border-bottom: 1px solid var(--border-subtle);
1855
- }
1856
-
1857
- .inline-inspector-head h2 {
1858
- margin-top: 2px;
1859
- font-size: 18px;
1860
- color: var(--text-primary);
1861
- }
1862
-
1863
- .inline-inspector-count {
1864
- color: var(--text-dim);
1865
- font-size: 11px;
1866
- white-space: nowrap;
1867
- }
1868
-
1869
- .inline-inspector-grid {
1870
- display: grid;
1871
- grid-template-columns: repeat(4, minmax(180px, 1fr));
1872
- gap: 14px;
1873
- }
1874
-
1875
- .inline-note-block {
1876
- min-width: 0;
1877
- }
1878
-
1879
- .inline-note-block > .insp-label {
1880
- display: block;
1881
- margin-bottom: 8px;
1882
- }
1883
-
1884
- .inline-pill-flow {
1885
- display: flex;
1886
- flex-wrap: wrap;
1887
- gap: 6px;
1888
- }
1889
-
1890
- .inline-boundary {
1891
- display: flex;
1892
- flex-direction: column;
1893
- gap: 3px;
1894
- padding: 8px 10px;
1895
- border-left: 2px solid var(--accent-amber);
1896
- background: var(--bg-canvas);
1897
- color: var(--text-secondary);
1898
- font-size: 11px;
1899
- }
1900
-
1901
- .inline-boundary + .inline-boundary {
1902
- margin-top: 6px;
1903
- }
1904
-
1905
- .inline-boundary b {
1906
- color: var(--accent-amber);
1907
- font-size: 11px;
1908
- }
1909
-
1910
- .relation-column {
1911
- display: flex;
1912
- flex-direction: column;
1913
- gap: 6px;
1914
- }
1915
-
1916
- .inline-relation {
1917
- display: block;
1918
- width: 100%;
1919
- padding: 7px 8px;
1920
- border: 1px solid var(--border-subtle);
1921
- border-radius: 6px;
1922
- background: var(--bg-canvas);
1923
- text-align: left;
1924
- }
1925
-
1926
- .inline-relation:hover {
1927
- border-color: var(--primary-light);
1928
- background: var(--bg-card-hover);
1929
- }
1930
-
1931
- .inline-relation-type {
1932
- display: block;
1933
- margin-bottom: 2px;
1934
- font-size: 10px;
1935
- font-weight: 800;
1936
- }
1937
-
1938
- .inline-relation-main {
1939
- display: flex;
1940
- align-items: center;
1941
- justify-content: space-between;
1942
- gap: 6px;
1943
- color: var(--text-primary);
1944
- font-size: 12px;
1945
- }
1946
-
1947
- .inline-relation small {
1948
- display: block;
1949
- margin-top: 3px;
1950
- color: var(--text-dim);
1951
- font-size: 10px;
1952
- line-height: 1.45;
1953
- }
1954
-
1955
- /* High-density MDX widgets */
1956
- .semantic-mermaid,
1957
- .semantic-relation-map,
1958
- .semantic-insight,
1959
- .semantic-note-grid {
1960
- min-width: 0;
1961
- }
1962
-
1963
- .draft-board .custom-section {
1964
- padding: 12px 14px;
1965
- }
1966
-
1967
- /* Layout primitives are orchestration layers, not another card around their children. */
1968
- .draft-board .custom-section:has(.semantic-grid),
1969
- .draft-board .custom-section:has(.semantic-split),
1970
- .draft-board .custom-section:has(.semantic-stack) {
1971
- padding: 0;
1972
- border: 0;
1973
- background: transparent;
1974
- box-shadow: none;
1975
- width: 100%;
1976
- }
1977
-
1978
- .draft-board .semantic-grid,
1979
- .draft-board .semantic-split {
1980
- width: 100%;
1981
- align-items: stretch;
1982
- }
1983
- .draft-board .semantic-grid { grid-template-columns: minmax(0, 1.35fr) minmax(250px, .9fr); }
1984
-
1985
- .draft-board .semantic-grid > .semantic-mermaid,
1986
- .draft-board .semantic-grid > .semantic-relation-map {
1987
- width: 100% !important;
1988
- max-width: none;
1989
- margin: 0;
1990
- padding: 14px 16px;
1991
- border: 1px solid var(--border-medium);
1992
- border-radius: 10px;
1993
- background: var(--bg-surface);
1994
- box-shadow: var(--shadow-sm);
1995
- }
1996
-
1997
- .semantic-relation-path {
1998
- width: 100%;
1999
- margin: 0 0 14px;
2000
- padding: 14px 16px;
2001
- border: 1px solid var(--border-medium);
2002
- border-radius: 10px;
2003
- background: var(--bg-surface);
2004
- box-shadow: var(--shadow-sm);
2005
- }
2006
- .relation-path-steps { display: flex; align-items: stretch; overflow-x: auto; padding: 2px 0 4px; }
2007
- .relation-path-node { flex: 1 0 150px; min-width: 150px; padding: 10px 12px; border: 1px solid var(--border-medium); border-top: 3px solid var(--accent-cyan); border-radius: 8px; background: var(--bg-card); }
2008
- .relation-path-node.tone-success { border-top-color: var(--accent-emerald); }
2009
- .relation-path-node.tone-warning { border-top-color: var(--accent-amber); }
2010
- .relation-path-node.tone-danger { border-top-color: var(--accent-rose); }
2011
- .relation-path-kicker, .relation-path-node strong, .relation-path-node small { display: block; }
2012
- .relation-path-kicker { color: var(--text-dim); font: 700 10px 'Fira Code', monospace; margin-bottom: 4px; }
2013
- .relation-path-node strong { color: var(--text-primary); font-size: 13px; }
2014
- .relation-path-node small { margin-top: 4px; color: var(--text-muted); font-size: 11px; }
2015
- .relation-path-edge { flex: 0 0 72px; display: grid; place-items: center; position: relative; color: var(--text-accent); font: 700 10px 'Fira Code', monospace; }
2016
- .relation-path-edge::before { content: ''; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 1px dashed var(--border-strong); }
2017
- .relation-path-edge span { z-index: 1; padding: 2px 4px; background: var(--bg-surface); }
2018
-
2019
- .draft-board .semantic-mermaid,
2020
- .draft-board .semantic-relation-map {
2021
- width: fit-content;
2022
- max-width: 100%;
2023
- overflow: visible;
2024
- }
2025
-
2026
- .draft-board .semantic-insight,
2027
- .draft-board .semantic-note-grid {
2028
- width: fit-content;
2029
- max-width: 100%;
2030
- }
2031
-
2032
- .semantic-widget-head {
2033
- display: flex;
2034
- align-items: center;
2035
- justify-content: space-between;
2036
- gap: 8px;
2037
- margin-bottom: 8px;
2038
- color: var(--text-primary);
2039
- font-size: 11px;
2040
- font-weight: 800;
2041
- }
2042
-
2043
- .semantic-widget-head code {
2044
- color: var(--text-dim);
2045
- font-family: 'Fira Code', monospace;
2046
- font-size: 9px;
2047
- }
2048
-
2049
- .mermaid-canvas {
2050
- min-height: 100px;
2051
- overflow: auto;
2052
- padding: 4px;
2053
- max-width: 100%;
2054
- min-width: 0;
2055
- }
2056
-
2057
- .mermaid-canvas svg {
2058
- max-width: none;
2059
- min-width: 100%;
2060
- height: auto;
2061
- }
2062
-
2063
- .mermaid-error {
2064
- margin: 0;
2065
- color: var(--accent-rose);
2066
- font-size: 11px;
2067
- white-space: pre-wrap;
2068
- }
2069
-
2070
- .relation-map-grid {
2071
- display: grid;
2072
- gap: 5px;
2073
- }
2074
-
2075
- .relation-map-row {
2076
- display: grid;
2077
- grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr);
2078
- gap: 8px;
2079
- align-items: center;
2080
- padding: 6px 8px;
2081
- border-bottom: 1px solid var(--border-subtle);
2082
- font-size: 11px;
2083
- }
2084
-
2085
- .relation-map-source { color: var(--text-secondary); }
2086
- .relation-map-target { color: var(--text-accent); font-weight: 700; }
2087
- .relation-map-arrow { color: var(--accent-amber); font-family: 'Fira Code', monospace; font-size: 10px; }
2088
- .relation-map-row small { grid-column: 1 / -1; color: var(--text-dim); }
2089
-
2090
- .semantic-insight {
2091
- padding: 12px 14px;
2092
- border-left: 3px solid var(--primary-light);
2093
- background: var(--bg-highlight);
2094
- }
2095
-
2096
- .insight-kicker { margin-bottom: 4px; color: var(--text-accent); font-size: 11px; font-weight: 800; }
2097
- .insight-body { color: var(--text-secondary); font-size: 12px; line-height: 1.55; }
2098
- .insight-warn { border-color: var(--accent-amber); background: var(--callout-warn-bg); }
2099
- .insight-warn .insight-kicker { color: var(--accent-amber); }
2100
- .insight-success { border-color: var(--accent-emerald); background: var(--callout-success-bg); }
2101
- .insight-success .insight-kicker { color: var(--accent-emerald); }
2102
-
2103
- .semantic-note-grid {
2104
- display: grid;
2105
- grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
2106
- gap: 8px;
2107
- }
2108
-
2109
- .semantic-note {
2110
- min-height: 54px;
2111
- padding: 8px 10px;
2112
- border: 1px solid var(--border-subtle);
2113
- border-radius: 4px 8px 5px 7px;
2114
- background: var(--bg-card);
2115
- box-shadow: 2px 2px 0 rgba(15, 23, 42, 0.08);
2116
- }
2117
-
2118
- .semantic-note strong,
2119
- .semantic-note span { display: block; }
2120
- .semantic-note strong { margin-bottom: 4px; color: var(--text-primary); font-size: 11px; }
2121
- .semantic-note span { color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
2122
-
2123
- @media (max-width: 1120px) {
2124
- .node-explorer-layout {
2125
- grid-template-columns: 190px minmax(0, 1fr);
2126
- }
2127
-
2128
- .draft-board .content-blocks {
2129
- grid-template-columns: repeat(2, minmax(250px, 1fr));
2130
- }
2131
-
2132
- .draft-board .drill-down-section,
2133
- .draft-board .custom-section {
2134
- grid-column: auto;
2135
- }
2136
-
2137
- .inline-inspector-grid {
2138
- grid-template-columns: repeat(2, minmax(180px, 1fr));
2139
- }
2140
- }
2141
-
2142
- @media (max-width: 760px) {
2143
- .node-explorer-layout { display: block; overflow-y: auto; }
2144
- .explorer-side { max-height: none; border: 0; }
2145
- .left-side { display: none; }
2146
- .explorer-center { padding: 16px 12px 18px; }
2147
- .hierarchy-strip { width: 100%; top: 4px; }
2148
- .draft-board { min-width: 0; }
2149
- .semantic-split { grid-template-columns: 1fr; }
2150
- .draft-board .semantic-grid { grid-template-columns: 1fr; }
2151
- .draft-board .content-blocks {
2152
- grid-template-columns: minmax(0, 1fr);
2153
- }
2154
- }
2155
-
2156
- @media (max-width: 760px) {
2157
- .relation-graph-layout { display: flex; flex-direction: column; }
2158
- .graph-main { min-height: 62vh; }
2159
- .graph-side-panel { max-height: 38vh; border-left: 0; border-top: 1px solid var(--border-medium); padding: 16px; }
2160
- .graph-control-bar { left: 10px; right: 10px; top: 10px; flex-wrap: wrap; gap: 6px; }
2161
- .graph-control-bar .filter-group { display: none; }
2162
- .graph-legend-ribbon { display: none; }
2163
- }
2164
-
2165
- .graph-side-panel {
2166
- background: var(--bg-surface);
2167
- border-left: 1px solid var(--border-medium);
2168
- padding: 28px 24px;
2169
- overflow-y: auto;
2170
- box-shadow: var(--shadow-lg);
2171
- transition: background-color 0.3s ease;
2172
- }
2173
-
2174
- .graph-inspector {
2175
- display: flex;
2176
- flex-direction: column;
2177
- gap: 16px;
2178
- }
2179
-
2180
- .panel-badge {
2181
- font-size: 11px;
2182
- font-weight: 800;
2183
- text-transform: uppercase;
2184
- letter-spacing: 0.06em;
2185
- }
2186
-
2187
- .panel-node-title {
2188
- font-size: 22px;
2189
- font-weight: 800;
2190
- color: var(--text-primary);
2191
- line-height: 1.3;
2192
- }
2193
-
2194
- .panel-summary {
2195
- font-size: 14px;
2196
- color: var(--text-secondary);
2197
- line-height: 1.6;
2198
- }
2199
-
2200
- .jump-explorer-btn {
2201
- display: flex;
2202
- align-items: center;
2203
- justify-content: center;
2204
- gap: 8px;
2205
- width: 100%;
2206
- padding: 12px;
2207
- border-radius: 10px;
2208
- background: var(--primary);
2209
- color: #fff;
2210
- font-weight: 700;
2211
- font-size: 13px;
2212
- box-shadow: var(--shadow-sm);
2213
- transition: all 0.2s ease;
2214
- }
2215
-
2216
- .jump-explorer-btn:hover {
2217
- background: var(--primary-light);
2218
- box-shadow: var(--shadow-glow);
2219
- transform: translateY(-1px);
2220
- }
2221
-
2222
- .panel-divider {
2223
- height: 1px;
2224
- background: var(--border-medium);
2225
- margin: 6px 0;
2226
- }
2227
-
2228
- .panel-section .section-title {
2229
- font-size: 11px;
2230
- font-weight: 700;
2231
- color: var(--text-dim);
2232
- text-transform: uppercase;
2233
- letter-spacing: 0.08em;
2234
- margin-bottom: 12px;
2235
- }
2236
-
2237
- .panel-rel-list {
2238
- display: flex;
2239
- flex-direction: column;
2240
- gap: 8px;
2241
- }
2242
-
2243
- .panel-rel-card {
2244
- background: var(--bg-canvas);
2245
- border: 1px solid var(--border-medium);
2246
- border-radius: 8px;
2247
- padding: 12px;
2248
- cursor: pointer;
2249
- transition: all 0.15s ease;
2250
- }
2251
-
2252
- .panel-rel-card:hover {
2253
- border-color: var(--primary);
2254
- background: var(--bg-subtle);
2255
- transform: translateX(2px);
2256
- }
2257
-
2258
- .rel-card-header {
2259
- display: flex;
2260
- justify-content: space-between;
2261
- align-items: center;
2262
- font-size: 10px;
2263
- margin-bottom: 4px;
2264
- }
2265
-
2266
- .rel-tag {
2267
- font-weight: 700;
2268
- }
2269
-
2270
- .rel-dir {
2271
- color: var(--text-dim);
2272
- }
2273
-
2274
- .rel-target-title {
2275
- font-size: 13px;
2276
- font-weight: 600;
2277
- color: var(--text-primary);
2278
- }
2279
-
2280
- .rel-target-desc {
2281
- font-size: 11px;
2282
- color: var(--text-muted);
2283
- margin-top: 4px;
2284
- }
2285
-
2286
- .io-capsule {
2287
- background: var(--bg-canvas);
2288
- border: 1px solid var(--border-medium);
2289
- padding: 12px 14px;
2290
- border-radius: 8px;
2291
- font-size: 12px;
2292
- display: flex;
2293
- flex-direction: column;
2294
- gap: 8px;
2295
- }
2296
-
2297
- .empty-inspector {
2298
- display: flex;
2299
- flex-direction: column;
2300
- align-items: center;
2301
- justify-content: center;
2302
- height: 320px;
2303
- color: var(--text-dim);
2304
- text-align: center;
2305
- gap: 14px;
2306
- font-size: 13px;
2307
- padding: 0 20px;
2308
- }
2309
-
2310
- .empty-subtext {
2311
- font-size: 12px;
2312
- color: var(--text-dim);
2313
- font-style: italic;
2314
- padding: 6px 0;
2315
- }
2316
-
2317
- /* ==========================================================================
2318
- SEMANTIC PRESENTATION COMPONENTS (Matrix, Compare, Callouts)
2319
- ========================================================================== */
2320
-
2321
- .semantic-learning-objectives,
2322
- .semantic-key-question,
2323
- .semantic-evidence,
2324
- .semantic-invariant,
2325
- .semantic-failure-mode {
2326
- border: 1px solid var(--line-subtle, rgba(148, 163, 184, .24));
2327
- border-radius: 12px;
2328
- padding: 12px 14px;
2329
- background: var(--surface-soft, rgba(15, 23, 42, .28));
2330
- }
2331
-
2332
- .semantic-learning-objectives ul { margin: 8px 0 0; padding-left: 20px; }
2333
- .semantic-learning-objectives li { margin: 4px 0; }
2334
- .semantic-key-question { display: flex; align-items: baseline; gap: 10px; border-color: rgba(56, 189, 248, .35); }
2335
- .semantic-key-question strong { color: var(--text-primary, #e2e8f0); }
2336
- .semantic-evidence { display: grid; gap: 7px; border-color: rgba(52, 211, 153, .3); }
2337
- .evidence-command { overflow-x: auto; color: #a7f3d0; }
2338
- .evidence-observes { color: var(--text-secondary, #cbd5e1); }
2339
- .semantic-invariant { border-color: rgba(129, 140, 248, .35); }
2340
- .semantic-invariant > div:last-child { margin-top: 6px; }
2341
- .semantic-failure-mode { border-color: rgba(251, 146, 60, .38); }
2342
- .semantic-failure-mode dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 8px 0 0; }
2343
- .semantic-failure-mode dt { color: var(--text-muted, #94a3b8); font-size: .8rem; }
2344
- .semantic-failure-mode dd { margin: 0; }
2345
- .failure-details { margin-top: 10px; }
2346
- .semantic-tradeoff { border: 1px solid rgba(250, 204, 21, .3); border-radius: 12px; padding: 12px 14px; background: var(--surface-soft, rgba(15,23,42,.24)); }
2347
- .tradeoff-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 8px; }
2348
- .tradeoff-option { display: grid; gap: 4px; padding: 9px; border-radius: 8px; background: rgba(148,163,184,.08); }
2349
- .tradeoff-option span { color: var(--text-secondary, #cbd5e1); font-size: .86rem; }
2350
- .tradeoff-option b { color: var(--text-muted, #94a3b8); font-size: .72rem; margin-right: 5px; }
2351
-
2352
- .semantic-callout {
2353
- padding: 16px 20px;
2354
- border-radius: 10px;
2355
- margin: 14px 0;
2356
- background: var(--callout-info-bg);
2357
- border-left: 4px solid var(--callout-info-border);
2358
- }
2359
-
2360
- .semantic-callout.callout-warn {
2361
- border-left-color: var(--callout-warn-border);
2362
- background: var(--callout-warn-bg);
2363
- }
2364
-
2365
- .semantic-callout.callout-danger {
2366
- border-left-color: var(--callout-danger-border);
2367
- background: var(--callout-danger-bg);
2368
- }
2369
-
2370
- .callout-title {
2371
- font-weight: 700;
2372
- margin-bottom: 6px;
2373
- color: var(--text-primary);
2374
- font-size: 14px;
2375
- }
2376
-
2377
- .callout-content {
2378
- color: var(--text-secondary);
2379
- font-size: 13px;
2380
- line-height: 1.6;
2381
- }
2382
-
2383
- .semantic-decision-matrix, .semantic-compare-table {
2384
- overflow-x: auto;
2385
- margin-top: 14px;
2386
- border-radius: 10px;
2387
- border: 1px solid var(--border-medium);
2388
- background: var(--bg-canvas);
2389
- }
2390
-
2391
- .matrix-title {
2392
- padding: 12px 16px;
2393
- font-weight: 700;
2394
- font-size: 13px;
2395
- color: var(--text-primary);
2396
- border-bottom: 1px solid var(--border-medium);
2397
- background: var(--bg-surface);
2398
- }
2399
-
2400
- .semantic-decision-matrix table, .semantic-compare-table table {
2401
- width: 100%;
2402
- border-collapse: collapse;
2403
- font-size: 13px;
2404
- }
2405
-
2406
- .semantic-decision-matrix th, .semantic-compare-table th {
2407
- background: var(--bg-surface);
2408
- padding: 10px 14px;
2409
- border-bottom: 1px solid var(--border-medium);
2410
- border-right: 1px solid var(--border-subtle);
2411
- text-align: left;
2412
- font-weight: 700;
2413
- color: var(--text-primary);
2414
- }
2415
-
2416
- .semantic-decision-matrix td, .semantic-compare-table td {
2417
- padding: 10px 14px;
2418
- border-bottom: 1px solid var(--border-subtle);
2419
- border-right: 1px solid var(--border-subtle);
2420
- color: var(--text-secondary);
2421
- }
2422
-
1
+ @charset "UTF-8";
2
+
3
+ /* ==========================================================================
4
+ THEME VARIABLES & DESIGN SYSTEM (Editorial / Knowledge Atlas Style)
5
+ ========================================================================== */
6
+
7
+ :root,
8
+ [data-theme="dark"] {
9
+ --theme-mode: "dark";
10
+
11
+ /* Background layers - deep indigo slate for high-tech monograph feel */
12
+ --bg-canvas: #090d16;
13
+ --bg-surface: #0f172a;
14
+ --bg-card: #151f32;
15
+ --bg-card-hover: #1c2a44;
16
+ --bg-subtle: #1e293b;
17
+ --bg-highlight: rgba(56, 189, 248, 0.08);
18
+
19
+ /* Borders & Dividers */
20
+ --border-subtle: rgba(255, 255, 255, 0.08);
21
+ --border-medium: rgba(255, 255, 255, 0.14);
22
+ --border-strong: rgba(255, 255, 255, 0.24);
23
+ --border-accent: rgba(99, 102, 241, 0.4);
24
+
25
+ /* Typography Colors */
26
+ --text-primary: #f8fafc;
27
+ --text-secondary: #cbd5e1;
28
+ --text-muted: #94a3b8;
29
+ --text-dim: #64748b;
30
+ --text-accent: #38bdf8;
31
+
32
+ /* Accent & Category Semantic Tones */
33
+ --primary: #6366f1;
34
+ --primary-light: #818cf8;
35
+ --primary-glow: rgba(99, 102, 241, 0.25);
36
+
37
+ --accent-cyan: #06b6d4;
38
+ --accent-emerald: #10b981;
39
+ --accent-amber: #f59e0b;
40
+ --accent-rose: #f43f5e;
41
+ --accent-purple: #a855f7;
42
+
43
+ /* Code & Syntax */
44
+ --code-bg: #060911;
45
+ --code-text: #34d399;
46
+ --code-border: rgba(255, 255, 255, 0.1);
47
+
48
+ /* Shadows & Depth - restrained, hairline-first. Offset shadows read as
49
+ printed paper rather than floating SaaS cards. */
50
+ --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.35);
51
+ --shadow-md: 0 2px 8px -4px rgba(0, 0, 0, 0.55);
52
+ --shadow-lg: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
53
+ --shadow-glow: none;
54
+ --shadow-card: 2px 3px 0 rgba(0, 0, 0, 0.45);
55
+ --shadow-pop: 3px 4px 0 rgba(0, 0, 0, 0.55);
56
+
57
+ /* Radius scale - differentiated by component weight, not one value everywhere */
58
+ --radius-1: 3px;
59
+ --radius-2: 4px;
60
+ --radius-3: 6px;
61
+ --radius-4: 8px;
62
+
63
+ /* Knowledge Badge & Callouts */
64
+ --callout-info-bg: rgba(56, 189, 248, 0.08);
65
+ --callout-info-border: #38bdf8;
66
+ --callout-warn-bg: rgba(245, 158, 11, 0.08);
67
+ --callout-warn-border: #f59e0b;
68
+ --callout-danger-bg: rgba(244, 63, 94, 0.08);
69
+ --callout-danger-border: #f43f5e;
70
+ --callout-success-bg: rgba(16, 185, 129, 0.08);
71
+ --callout-success-border: #10b981;
72
+
73
+ /* Graph background grid */
74
+ --graph-grid: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
75
+ }
76
+
77
+ [data-theme="light"] {
78
+ --theme-mode: "light";
79
+
80
+ /* Background layers - warm parchment & crisp editorial paper */
81
+ --bg-canvas: #f6f7f9;
82
+ --bg-surface: #ffffff;
83
+ --bg-card: #ffffff;
84
+ --bg-card-hover: #f1f5f9;
85
+ --bg-subtle: #f8fafc;
86
+ --bg-highlight: rgba(37, 99, 235, 0.06);
87
+
88
+ /* Borders & Dividers */
89
+ --border-subtle: rgba(0, 0, 0, 0.06);
90
+ --border-medium: rgba(0, 0, 0, 0.12);
91
+ --border-strong: rgba(0, 0, 0, 0.2);
92
+ --border-accent: rgba(79, 70, 229, 0.35);
93
+
94
+ /* Typography Colors */
95
+ --text-primary: #0f172a;
96
+ --text-secondary: #334155;
97
+ --text-muted: #64748b;
98
+ --text-dim: #94a3b8;
99
+ --text-accent: #2563eb;
100
+
101
+ /* Accent & Category Semantic Tones */
102
+ --primary: #4f46e5;
103
+ --primary-light: #6366f1;
104
+ --primary-glow: rgba(79, 70, 229, 0.18);
105
+
106
+ --accent-cyan: #0891b2;
107
+ --accent-emerald: #059669;
108
+ --accent-amber: #d97706;
109
+ --accent-rose: #e11d48;
110
+ --accent-purple: #9333ea;
111
+
112
+ /* Code & Syntax */
113
+ --code-bg: #1e293b;
114
+ --code-text: #38bdf8;
115
+ --code-border: rgba(0, 0, 0, 0.08);
116
+
117
+ /* Shadows & Depth */
118
+ --shadow-sm: 0 1px 1px rgba(15, 23, 42, 0.04);
119
+ --shadow-md: 0 2px 8px -4px rgba(15, 23, 42, 0.12);
120
+ --shadow-lg: 0 8px 24px -12px rgba(15, 23, 42, 0.14);
121
+ --shadow-glow: none;
122
+ --shadow-card: 2px 3px 0 rgba(15, 23, 42, 0.08);
123
+ --shadow-pop: 3px 4px 0 rgba(15, 23, 42, 0.12);
124
+
125
+ --radius-1: 3px;
126
+ --radius-2: 4px;
127
+ --radius-3: 6px;
128
+ --radius-4: 8px;
129
+
130
+ /* Knowledge Badge & Callouts */
131
+ --callout-info-bg: #eff6ff;
132
+ --callout-info-border: #3b82f6;
133
+ --callout-warn-bg: #fffbeb;
134
+ --callout-warn-border: #f59e0b;
135
+ --callout-danger-bg: #fff1f2;
136
+ --callout-danger-border: #f43f5e;
137
+ --callout-success-bg: #ecfdf5;
138
+ --callout-success-border: #10b981;
139
+
140
+ /* Graph background grid */
141
+ --graph-grid: radial-gradient(circle, rgba(0, 0, 0, 0.07) 1px, transparent 1px);
142
+ }
143
+
144
+ /* ==========================================================================
145
+ RESET & BASE TYPOGRAPHY
146
+ ========================================================================== */
147
+
148
+ * {
149
+ box-sizing: border-box;
150
+ margin: 0;
151
+ padding: 0;
152
+ }
153
+
154
+ html, body {
155
+ height: 100%;
156
+ background: var(--bg-canvas);
157
+ color: var(--text-primary);
158
+ font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif;
159
+ font-size: 14px;
160
+ line-height: 1.6;
161
+ letter-spacing: -0.01em;
162
+ overflow: hidden;
163
+ transition: background-color 0.3s ease, color 0.3s ease;
164
+ -webkit-font-smoothing: antialiased;
165
+ -moz-osx-font-smoothing: grayscale;
166
+ }
167
+
168
+ /* Editorial Title Font Styling */
169
+ h1, h2, h3, .hero-title, .brand-title {
170
+ font-family: 'Lora', 'Noto Serif SC', Georgia, serif;
171
+ }
172
+
173
+ button, input, select {
174
+ font: inherit;
175
+ color: inherit;
176
+ }
177
+
178
+ button {
179
+ cursor: pointer;
180
+ border: none;
181
+ background: transparent;
182
+ outline: none;
183
+ }
184
+
185
+ button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
186
+ outline: 2px solid var(--accent-cyan);
187
+ outline-offset: 3px;
188
+ }
189
+
190
+ .global-search { position: relative; display: flex; align-items: center; gap: 7px; min-width: 220px; margin-left: auto; color: var(--text-muted, #94a3b8); }
191
+ .global-search input { width: 100%; border: 1px solid var(--line-subtle, rgba(148,163,184,.24)); border-radius: 8px; background: var(--surface-soft, rgba(15,23,42,.3)); color: inherit; padding: 7px 28px 7px 28px; }
192
+ .global-search > svg { position: absolute; left: 9px; pointer-events: none; }
193
+ .global-search > button { position: absolute; right: 5px; border: 0; background: transparent; color: inherit; padding: 3px; }
194
+ .global-search-results { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; padding: 5px; border: 1px solid var(--line-subtle, rgba(148,163,184,.24)); border-radius: 10px; background: var(--surface-strong, #111827); box-shadow: 0 12px 30px rgba(0,0,0,.24); }
195
+ .global-search-results button { display: grid; gap: 2px; width: 100%; border: 0; border-radius: 7px; background: transparent; color: var(--text-primary, #e2e8f0); text-align: left; padding: 8px; }
196
+ .global-search-results button:hover { background: rgba(148,163,184,.12); }
197
+ .global-search-results small { color: var(--text-muted, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
198
+
199
+ /* Optional semantic layout primitives */
200
+ .semantic-stack { display: flex; flex-direction: column; }
201
+ .semantic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
202
+ .semantic-split { display: grid; grid-template-columns: var(--split-ratio, 1fr 1fr); align-items: start; }
203
+ .gap-sm { gap: 8px; } .gap-md { gap: 16px; } .gap-lg { gap: 28px; }
204
+ .semantic-tabs details { border-bottom: 1px solid var(--border-subtle); padding: 8px 0; }
205
+ .semantic-tabs summary { cursor: pointer; font-weight: 700; color: var(--text-primary); }
206
+ .mermaid-tools { display: inline-flex; align-items: center; gap: 5px; }
207
+ .mermaid-tools button { width: 22px; height: 22px; border: 1px solid var(--border-medium); border-radius: 4px; background: var(--bg-subtle); font-weight: 700; }
208
+ .mermaid-tools button:hover { color: var(--primary); border-color: var(--primary); }
209
+ .mermaid-canvas { overflow: hidden; min-height: 120px; display: grid; place-items: center; cursor: grab; }
210
+ .mermaid-canvas-inner { display: inline-block; min-width: 100%; transform-origin: center center; transition: transform .15s ease; }
211
+
212
+ /* Scrollbar beautification */
213
+ ::-webkit-scrollbar {
214
+ width: 6px;
215
+ height: 6px;
216
+ }
217
+
218
+ ::-webkit-scrollbar-track {
219
+ background: transparent;
220
+ }
221
+
222
+ ::-webkit-scrollbar-thumb {
223
+ background: var(--border-medium);
224
+ border-radius: 4px;
225
+ }
226
+
227
+ ::-webkit-scrollbar-thumb:hover {
228
+ background: var(--border-strong);
229
+ }
230
+
231
+ /* ==========================================================================
232
+ APP CONTAINER & HEADER
233
+ ========================================================================== */
234
+
235
+ .app-container {
236
+ display: flex;
237
+ flex-direction: column;
238
+ height: 100vh;
239
+ width: 100vw;
240
+ background: var(--bg-canvas);
241
+ }
242
+
243
+ /* Header */
244
+ .app-header {
245
+ height: 60px;
246
+ display: flex;
247
+ align-items: center;
248
+ justify-content: space-between;
249
+ padding: 0 24px;
250
+ background: var(--bg-surface);
251
+ border-bottom: 1px solid var(--border-medium);
252
+ z-index: 30;
253
+ box-shadow: var(--shadow-sm);
254
+ transition: background-color 0.3s ease, border-color 0.3s ease;
255
+ }
256
+
257
+ .brand-section {
258
+ display: flex;
259
+ align-items: center;
260
+ gap: 14px;
261
+ }
262
+
263
+ .brand-logo-badge {
264
+ display: flex;
265
+ align-items: center;
266
+ justify-content: center;
267
+ width: 32px;
268
+ height: 32px;
269
+ border-radius: 8px;
270
+ background: linear-gradient(135deg, var(--primary) 0%, #38bdf8 100%);
271
+ color: #fff;
272
+ box-shadow: var(--shadow-glow);
273
+ }
274
+
275
+ .brand-text-wrap {
276
+ display: flex;
277
+ align-items: baseline;
278
+ gap: 10px;
279
+ }
280
+
281
+ .brand-title {
282
+ font-size: 16px;
283
+ font-weight: 700;
284
+ letter-spacing: 0.02em;
285
+ color: var(--text-primary);
286
+ display: flex;
287
+ align-items: center;
288
+ }
289
+
290
+ .brand-doc-title {
291
+ font-size: 13px;
292
+ font-weight: 500;
293
+ color: var(--text-muted);
294
+ border-left: 1px solid var(--border-medium);
295
+ padding-left: 12px;
296
+ max-width: 300px;
297
+ white-space: nowrap;
298
+ overflow: hidden;
299
+ text-overflow: ellipsis;
300
+ }
301
+
302
+ .header-controls {
303
+ display: flex;
304
+ align-items: center;
305
+ gap: 12px;
306
+ }
307
+
308
+ /* View switcher tabs */
309
+ .view-tabs {
310
+ display: flex;
311
+ gap: 4px;
312
+ background: var(--bg-canvas);
313
+ padding: 4px;
314
+ border-radius: 10px;
315
+ border: 1px solid var(--border-subtle);
316
+ }
317
+
318
+ .view-tab {
319
+ display: flex;
320
+ align-items: center;
321
+ gap: 7px;
322
+ padding: 6px 14px;
323
+ border-radius: 7px;
324
+ font-size: 13px;
325
+ font-weight: 600;
326
+ color: var(--text-muted);
327
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
328
+ }
329
+
330
+ .view-tab:hover {
331
+ color: var(--text-primary);
332
+ background: rgba(125, 125, 125, 0.08);
333
+ }
334
+
335
+ .view-tab.active {
336
+ background: var(--bg-surface);
337
+ color: var(--primary);
338
+ box-shadow: var(--shadow-sm);
339
+ border: 1px solid var(--border-medium);
340
+ }
341
+
342
+ /* Theme Toggle Button */
343
+ .theme-toggle-btn {
344
+ display: flex;
345
+ align-items: center;
346
+ justify-content: center;
347
+ width: 36px;
348
+ height: 36px;
349
+ border-radius: 9px;
350
+ background: var(--bg-canvas);
351
+ border: 1px solid var(--border-medium);
352
+ color: var(--text-secondary);
353
+ transition: all 0.2s ease;
354
+ }
355
+
356
+ .theme-toggle-btn:hover {
357
+ color: var(--text-primary);
358
+ border-color: var(--primary);
359
+ background: var(--bg-highlight);
360
+ transform: translateY(-1px);
361
+ }
362
+
363
+ /* Viewport Area */
364
+ .app-main {
365
+ flex: 1;
366
+ min-height: 0;
367
+ position: relative;
368
+ }
369
+
370
+ .app-toolbar {
371
+ position: absolute;
372
+ top: 14px;
373
+ right: 18px;
374
+ z-index: 100;
375
+ display: flex;
376
+ align-items: center;
377
+ gap: 8px;
378
+ padding: 5px;
379
+ border: 1px solid var(--border-medium);
380
+ border-radius: 10px;
381
+ background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
382
+ box-shadow: var(--shadow-md);
383
+ backdrop-filter: blur(10px);
384
+ }
385
+
386
+ .app-toolbar .view-tabs {
387
+ padding: 2px;
388
+ }
389
+
390
+ .app-toolbar .view-tab {
391
+ padding: 5px 10px;
392
+ font-size: 11px;
393
+ }
394
+
395
+ .app-toolbar .theme-toggle-btn {
396
+ display: grid;
397
+ place-items: center;
398
+ width: 28px;
399
+ height: 28px;
400
+ border-radius: 6px;
401
+ color: var(--text-muted);
402
+ }
403
+
404
+ .app-toolbar .theme-toggle-btn:hover {
405
+ color: var(--text-primary);
406
+ background: var(--bg-card-hover);
407
+ }
408
+
409
+ /* ==========================================================================
410
+ NODE EXPLORER (3-COLUMN EDITORIAL KNOWLEDGE LAYOUT)
411
+ ========================================================================== */
412
+
413
+ .node-explorer-layout {
414
+ display: grid;
415
+ grid-template-columns: 280px 1fr 340px;
416
+ height: 100%;
417
+ min-height: 0;
418
+ }
419
+
420
+ .explorer-side {
421
+ background: var(--bg-surface);
422
+ overflow-y: auto;
423
+ padding: 24px 18px;
424
+ transition: background-color 0.3s ease;
425
+ }
426
+
427
+ .left-side {
428
+ border-right: 1px solid var(--border-medium);
429
+ }
430
+
431
+ .right-side {
432
+ border-left: 1px solid var(--border-medium);
433
+ }
434
+
435
+ .side-section {
436
+ margin-bottom: 28px;
437
+ }
438
+
439
+ .compact-tree {
440
+ margin-top: 8px;
441
+ margin-bottom: 0;
442
+ border-top: 1px solid var(--border-subtle);
443
+ padding-top: 12px;
444
+ }
445
+
446
+ .compact-tree > summary {
447
+ list-style: none;
448
+ cursor: pointer;
449
+ margin-bottom: 0;
450
+ }
451
+
452
+ .compact-tree > summary::-webkit-details-marker { display: none; }
453
+ .compact-tree > summary::after {
454
+ content: '＋';
455
+ margin-left: auto;
456
+ color: var(--text-dim);
457
+ font-size: 13px;
458
+ }
459
+ .compact-tree[open] > summary { margin-bottom: 12px; }
460
+ .compact-tree[open] > summary::after { content: '−'; }
461
+
462
+ .side-label {
463
+ display: flex;
464
+ align-items: center;
465
+ gap: 6px;
466
+ font-size: 11px;
467
+ font-weight: 700;
468
+ color: var(--text-dim);
469
+ text-transform: uppercase;
470
+ letter-spacing: 0.08em;
471
+ margin-bottom: 12px;
472
+ }
473
+
474
+ .side-label::before {
475
+ content: "";
476
+ display: inline-block;
477
+ width: 4px;
478
+ height: 12px;
479
+ background: var(--primary);
480
+ border-radius: 2px;
481
+ }
482
+
483
+ /* Left: Breadcrumbs Tree */
484
+ .ancestor-breadcrumbs {
485
+ display: flex;
486
+ flex-direction: column;
487
+ gap: 6px;
488
+ position: relative;
489
+ padding-left: 14px;
490
+ }
491
+
492
+ .ancestor-breadcrumbs::before {
493
+ content: "";
494
+ position: absolute;
495
+ left: 4px;
496
+ top: 10px;
497
+ bottom: 10px;
498
+ width: 2px;
499
+ background: var(--border-medium);
500
+ }
501
+
502
+ .breadcrumb-node {
503
+ display: flex;
504
+ align-items: center;
505
+ gap: 8px;
506
+ padding: 7px 10px;
507
+ border-radius: 8px;
508
+ cursor: pointer;
509
+ color: var(--text-secondary);
510
+ font-size: 13px;
511
+ transition: all 0.15s ease;
512
+ background: transparent;
513
+ border: 1px solid transparent;
514
+ }
515
+
516
+ .breadcrumb-node:hover {
517
+ background: var(--bg-subtle);
518
+ color: var(--text-primary);
519
+ border-color: var(--border-subtle);
520
+ }
521
+
522
+ .breadcrumb-node.active {
523
+ background: var(--bg-highlight);
524
+ color: var(--primary);
525
+ font-weight: 600;
526
+ border-color: var(--border-accent);
527
+ }
528
+
529
+ .bc-level-pill {
530
+ font-size: 10px;
531
+ font-weight: 700;
532
+ padding: 1px 6px;
533
+ border-radius: 4px;
534
+ border: 1px solid;
535
+ font-family: monospace;
536
+ }
537
+
538
+ .bc-title {
539
+ flex: 1;
540
+ white-space: nowrap;
541
+ overflow: hidden;
542
+ text-overflow: ellipsis;
543
+ }
544
+
545
+ .bc-arrow {
546
+ color: var(--text-dim);
547
+ }
548
+
549
+ .back-parent-btn {
550
+ display: flex;
551
+ align-items: center;
552
+ gap: 8px;
553
+ width: 100%;
554
+ padding: 9px 12px;
555
+ border-radius: 8px;
556
+ background: var(--bg-subtle);
557
+ border: 1px solid var(--border-medium);
558
+ color: var(--text-secondary);
559
+ font-size: 12px;
560
+ font-weight: 600;
561
+ transition: all 0.2s ease;
562
+ }
563
+
564
+ .back-parent-btn:hover {
565
+ background: var(--bg-highlight);
566
+ color: var(--primary);
567
+ border-color: var(--primary);
568
+ }
569
+
570
+ /* Sibling List */
571
+ .sibling-list {
572
+ display: flex;
573
+ flex-direction: column;
574
+ gap: 4px;
575
+ }
576
+
577
+ .sibling-btn {
578
+ display: flex;
579
+ align-items: center;
580
+ gap: 9px;
581
+ padding: 7px 10px;
582
+ border-radius: 7px;
583
+ text-align: left;
584
+ color: var(--text-secondary);
585
+ font-size: 12px;
586
+ font-weight: 500;
587
+ transition: all 0.15s ease;
588
+ }
589
+
590
+ .sibling-btn:hover {
591
+ background: var(--bg-subtle);
592
+ color: var(--text-primary);
593
+ transform: translateX(2px);
594
+ }
595
+
596
+ .sib-dot {
597
+ width: 6px;
598
+ height: 6px;
599
+ border-radius: 50%;
600
+ flex-shrink: 0;
601
+ }
602
+
603
+ .sib-title {
604
+ flex: 1;
605
+ white-space: nowrap;
606
+ overflow: hidden;
607
+ text-overflow: ellipsis;
608
+ }
609
+
610
+ .sib-lvl {
611
+ font-size: 10px;
612
+ font-weight: 600;
613
+ color: var(--text-dim);
614
+ font-family: monospace;
615
+ }
616
+
617
+ /* Navigation Hierarchy Tree */
618
+ .concept-nav-tree {
619
+ display: flex;
620
+ flex-direction: column;
621
+ gap: 2px;
622
+ }
623
+
624
+ .tree-node-item {
625
+ display: flex;
626
+ flex-direction: column;
627
+ }
628
+
629
+ .tree-node-btn {
630
+ display: flex;
631
+ align-items: center;
632
+ gap: 7px;
633
+ padding: 6px 10px;
634
+ border-radius: 6px;
635
+ text-align: left;
636
+ color: var(--text-secondary);
637
+ font-size: 12px;
638
+ transition: all 0.15s;
639
+ position: relative;
640
+ }
641
+
642
+ .tree-node-btn:hover {
643
+ background: var(--bg-subtle);
644
+ color: var(--text-primary);
645
+ }
646
+
647
+ .tree-node-btn.active {
648
+ background: var(--bg-highlight);
649
+ color: var(--primary);
650
+ font-weight: 600;
651
+ }
652
+
653
+ .tree-node-btn.active::before {
654
+ content: "";
655
+ position: absolute;
656
+ left: 0;
657
+ top: 4px;
658
+ bottom: 4px;
659
+ width: 3px;
660
+ background: var(--primary);
661
+ border-radius: 0 2px 2px 0;
662
+ }
663
+
664
+ .node-bullet {
665
+ width: 6px;
666
+ height: 6px;
667
+ border-radius: 50%;
668
+ flex-shrink: 0;
669
+ }
670
+
671
+ .tree-title {
672
+ flex: 1;
673
+ white-space: nowrap;
674
+ overflow: hidden;
675
+ text-overflow: ellipsis;
676
+ }
677
+
678
+ .tree-level {
679
+ font-size: 10px;
680
+ font-weight: 600;
681
+ color: var(--text-dim);
682
+ font-family: monospace;
683
+ }
684
+
685
+ /* ==========================================================================
686
+ MIDDLE COLUMN: KNOWLEDGE HERO & ARTICLE EXPLANATION
687
+ ========================================================================== */
688
+
689
+ .explorer-center {
690
+ background: var(--bg-canvas);
691
+ overflow-y: auto;
692
+ padding: 32px 40px;
693
+ transition: background-color 0.3s ease;
694
+ }
695
+
696
+ .center-scrollable {
697
+ max-width: 860px;
698
+ margin: 0 auto;
699
+ }
700
+
701
+ /* Toolbar */
702
+ .center-toolbar {
703
+ display: flex;
704
+ align-items: center;
705
+ justify-content: space-between;
706
+ margin-bottom: 24px;
707
+ padding-bottom: 14px;
708
+ border-bottom: 1px solid var(--border-medium);
709
+ }
710
+
711
+ .node-id-tag {
712
+ font-size: 11px;
713
+ font-weight: 600;
714
+ color: var(--text-dim);
715
+ font-family: 'Fira Code', monospace;
716
+ letter-spacing: 0.04em;
717
+ }
718
+
719
+ .node-id-tag code {
720
+ color: var(--primary-light);
721
+ background: var(--bg-surface);
722
+ padding: 3px 8px;
723
+ border-radius: 6px;
724
+ border: 1px solid var(--border-subtle);
725
+ }
726
+
727
+ .level-indicators {
728
+ display: flex;
729
+ gap: 5px;
730
+ }
731
+
732
+ .level-pill {
733
+ padding: 4px 9px;
734
+ border-radius: 6px;
735
+ font-size: 11px;
736
+ font-weight: 700;
737
+ background: var(--bg-surface);
738
+ color: var(--text-dim);
739
+ border: 1px solid var(--border-medium);
740
+ transition: all 0.2s ease;
741
+ }
742
+
743
+ .level-pill:hover {
744
+ border-color: var(--text-muted);
745
+ color: var(--text-primary);
746
+ }
747
+
748
+ .level-pill.active {
749
+ background: var(--primary);
750
+ color: #fff;
751
+ border-color: var(--primary);
752
+ box-shadow: var(--shadow-sm);
753
+ }
754
+
755
+ .view-graph-btn {
756
+ display: flex;
757
+ align-items: center;
758
+ gap: 6px;
759
+ padding: 6px 14px;
760
+ border-radius: 8px;
761
+ background: var(--bg-surface);
762
+ border: 1px solid var(--border-medium);
763
+ color: var(--primary);
764
+ font-size: 12px;
765
+ font-weight: 600;
766
+ box-shadow: var(--shadow-sm);
767
+ transition: all 0.2s ease;
768
+ }
769
+
770
+ .view-graph-btn:hover {
771
+ background: var(--primary);
772
+ color: #fff;
773
+ border-color: var(--primary);
774
+ transform: translateY(-1px);
775
+ }
776
+
777
+ /* HERO EXPLANATORY CARD */
778
+ .concept-hero-card {
779
+ background: var(--bg-surface);
780
+ border: 1px solid var(--border-medium);
781
+ border-radius: 16px;
782
+ padding: 32px 36px;
783
+ margin-bottom: 28px;
784
+ box-shadow: var(--shadow-md);
785
+ position: relative;
786
+ overflow: hidden;
787
+ }
788
+
789
+ .concept-hero-card::after {
790
+ content: "";
791
+ position: absolute;
792
+ top: 0;
793
+ left: 0;
794
+ right: 0;
795
+ height: 4px;
796
+ background: linear-gradient(90deg, var(--primary) 0%, #38bdf8 50%, #34d399 100%);
797
+ }
798
+
799
+ .hero-level-banner {
800
+ display: flex;
801
+ align-items: center;
802
+ gap: 10px;
803
+ font-size: 12px;
804
+ font-weight: 700;
805
+ letter-spacing: 0.04em;
806
+ margin-bottom: 14px;
807
+ }
808
+
809
+ .hero-level-banner .badge {
810
+ background: var(--bg-highlight);
811
+ padding: 4px 10px;
812
+ border-radius: 6px;
813
+ border: 1px solid var(--border-accent);
814
+ }
815
+
816
+ .hero-title {
817
+ font-size: 32px;
818
+ font-weight: 800;
819
+ color: var(--text-primary);
820
+ line-height: 1.25;
821
+ margin-bottom: 14px;
822
+ letter-spacing: -0.02em;
823
+ }
824
+
825
+ .hero-summary {
826
+ font-size: 16px;
827
+ color: var(--text-secondary);
828
+ line-height: 1.7;
829
+ margin-bottom: 24px;
830
+ font-family: 'Lora', Georgia, serif;
831
+ font-style: italic;
832
+ }
833
+
834
+ .hero-meta-chips {
835
+ display: flex;
836
+ flex-wrap: wrap;
837
+ gap: 10px;
838
+ margin-bottom: 24px;
839
+ }
840
+
841
+ .meta-chip {
842
+ display: flex;
843
+ align-items: center;
844
+ gap: 8px;
845
+ background: var(--bg-canvas);
846
+ border: 1px solid var(--border-medium);
847
+ padding: 6px 12px;
848
+ border-radius: 8px;
849
+ font-size: 12px;
850
+ }
851
+
852
+ .chip-label {
853
+ font-weight: 700;
854
+ color: var(--text-dim);
855
+ font-size: 11px;
856
+ text-transform: uppercase;
857
+ letter-spacing: 0.05em;
858
+ }
859
+
860
+ .chip-value {
861
+ color: var(--text-primary);
862
+ font-weight: 500;
863
+ }
864
+
865
+ /* Local Flow Ribbon (Upstream -> Focus -> Downstream) */
866
+ .local-flow-ribbon {
867
+ display: flex;
868
+ align-items: stretch;
869
+ gap: 12px;
870
+ background: var(--bg-canvas);
871
+ border: 1px solid var(--border-medium);
872
+ padding: 16px;
873
+ border-radius: 12px;
874
+ }
875
+
876
+ .flow-box {
877
+ flex: 1;
878
+ display: flex;
879
+ flex-direction: column;
880
+ justify-content: center;
881
+ gap: 4px;
882
+ padding: 12px 14px;
883
+ background: var(--bg-surface);
884
+ border: 1px solid var(--border-medium);
885
+ border-radius: 8px;
886
+ font-size: 12px;
887
+ transition: all 0.2s ease;
888
+ }
889
+
890
+ button.flow-box {
891
+ text-align: left;
892
+ }
893
+
894
+ .flow-box.current-focus {
895
+ border-color: var(--primary);
896
+ background: var(--bg-highlight);
897
+ box-shadow: var(--shadow-glow);
898
+ }
899
+
900
+ .flow-box.clickable:hover {
901
+ background: var(--bg-subtle);
902
+ border-color: var(--primary);
903
+ transform: translateY(-2px);
904
+ }
905
+
906
+ .flow-box.disabled {
907
+ opacity: 0.6;
908
+ cursor: default;
909
+ }
910
+
911
+ .box-type {
912
+ font-size: 10px;
913
+ font-weight: 700;
914
+ color: var(--text-dim);
915
+ text-transform: uppercase;
916
+ letter-spacing: 0.06em;
917
+ }
918
+
919
+ .box-title {
920
+ font-weight: 700;
921
+ color: var(--text-primary);
922
+ white-space: nowrap;
923
+ overflow: hidden;
924
+ text-overflow: ellipsis;
925
+ font-size: 13px;
926
+ }
927
+
928
+ .flow-arrow {
929
+ display: flex;
930
+ align-items: center;
931
+ color: var(--text-dim);
932
+ font-size: 16px;
933
+ }
934
+
935
+ .flow-node-list {
936
+ display: flex;
937
+ flex-direction: column;
938
+ gap: 4px;
939
+ margin-top: 6px;
940
+ }
941
+
942
+ .flow-node-link {
943
+ display: flex;
944
+ align-items: center;
945
+ justify-content: space-between;
946
+ gap: 6px;
947
+ width: 100%;
948
+ padding: 4px 6px;
949
+ border-radius: 4px;
950
+ color: var(--text-secondary);
951
+ font-size: 12px;
952
+ font-weight: 500;
953
+ background: var(--bg-canvas);
954
+ border: 1px solid var(--border-subtle);
955
+ transition: all 0.15s ease;
956
+ }
957
+
958
+ .flow-node-link:hover {
959
+ color: var(--primary);
960
+ border-color: var(--primary);
961
+ background: var(--bg-surface);
962
+ }
963
+
964
+ /* ==========================================================================
965
+ CONTENT BLOCKS (Editorial Monograph Structure)
966
+ ========================================================================== */
967
+
968
+ .content-blocks {
969
+ display: flex;
970
+ flex-direction: column;
971
+ gap: 14px;
972
+ }
973
+
974
+ .node-block {
975
+ background: var(--bg-surface);
976
+ border: 1px solid var(--border-medium);
977
+ border-radius: 12px;
978
+ padding: 24px 28px;
979
+ box-shadow: var(--shadow-sm);
980
+ transition: all 0.2s ease;
981
+ }
982
+
983
+ .node-block:hover {
984
+ border-color: var(--border-strong);
985
+ }
986
+
987
+ .node-block.highlight-warn {
988
+ border-left: 4px solid var(--accent-rose);
989
+ background: var(--callout-danger-bg);
990
+ }
991
+
992
+ .block-head {
993
+ display: flex;
994
+ align-items: baseline;
995
+ justify-content: space-between;
996
+ margin-bottom: 14px;
997
+ border-bottom: 1px solid var(--border-subtle);
998
+ padding-bottom: 10px;
999
+ }
1000
+
1001
+ .block-head h2 {
1002
+ font-size: 18px;
1003
+ font-weight: 700;
1004
+ color: var(--text-primary);
1005
+ letter-spacing: -0.01em;
1006
+ }
1007
+
1008
+ .block-head small {
1009
+ font-size: 12px;
1010
+ color: var(--text-dim);
1011
+ font-weight: 500;
1012
+ }
1013
+
1014
+ .block-body {
1015
+ color: var(--text-secondary);
1016
+ font-size: 14px;
1017
+ line-height: 1.8;
1018
+ }
1019
+
1020
+ .impl-lang {
1021
+ font-size: 11px;
1022
+ font-weight: 700;
1023
+ font-family: 'Fira Code', monospace;
1024
+ text-transform: uppercase;
1025
+ background: var(--bg-canvas);
1026
+ padding: 3px 8px;
1027
+ border-radius: 6px;
1028
+ color: var(--primary);
1029
+ border: 1px solid var(--border-medium);
1030
+ }
1031
+
1032
+ .code-block {
1033
+ background: var(--code-bg);
1034
+ padding: 18px 20px;
1035
+ border-radius: 10px;
1036
+ overflow-x: auto;
1037
+ font-family: "Fira Code", monospace;
1038
+ font-size: 13px;
1039
+ line-height: 1.6;
1040
+ color: var(--code-text);
1041
+ border: 1px solid var(--code-border);
1042
+ box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
1043
+ }
1044
+
1045
+ .example-item, .counterexample-item {
1046
+ margin-top: 12px;
1047
+ padding: 14px 18px;
1048
+ border-radius: 8px;
1049
+ background: var(--bg-canvas);
1050
+ border: 1px solid var(--border-medium);
1051
+ }
1052
+
1053
+ .ex-title {
1054
+ font-weight: 700;
1055
+ color: var(--accent-emerald);
1056
+ margin-bottom: 6px;
1057
+ font-size: 13px;
1058
+ }
1059
+
1060
+ .cex-title {
1061
+ font-weight: 700;
1062
+ color: var(--accent-rose);
1063
+ margin-bottom: 6px;
1064
+ font-size: 13px;
1065
+ }
1066
+
1067
+ /* Subnode Grid for Drill-down */
1068
+ .subnodes-grid {
1069
+ display: grid;
1070
+ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
1071
+ gap: 14px;
1072
+ margin-top: 14px;
1073
+ }
1074
+
1075
+ .subnode-card {
1076
+ background: var(--bg-canvas);
1077
+ border: 1px solid var(--border-medium);
1078
+ border-radius: 10px;
1079
+ padding: 18px;
1080
+ cursor: pointer;
1081
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1082
+ display: flex;
1083
+ flex-direction: column;
1084
+ }
1085
+
1086
+ .subnode-card:hover {
1087
+ border-color: var(--primary);
1088
+ background: var(--bg-surface);
1089
+ transform: translateY(-3px);
1090
+ box-shadow: var(--shadow-md);
1091
+ }
1092
+
1093
+ .sn-header {
1094
+ display: flex;
1095
+ justify-content: space-between;
1096
+ align-items: center;
1097
+ margin-bottom: 8px;
1098
+ }
1099
+
1100
+ .sn-level {
1101
+ font-size: 11px;
1102
+ font-weight: 800;
1103
+ font-family: monospace;
1104
+ }
1105
+
1106
+ .sn-arrow {
1107
+ color: var(--text-dim);
1108
+ transition: transform 0.2s;
1109
+ }
1110
+
1111
+ .subnode-card:hover .sn-arrow {
1112
+ color: var(--primary);
1113
+ transform: translate(2px, -2px);
1114
+ }
1115
+
1116
+ .sn-title {
1117
+ font-size: 15px;
1118
+ font-weight: 700;
1119
+ color: var(--text-primary);
1120
+ margin-bottom: 6px;
1121
+ }
1122
+
1123
+ .sn-summary {
1124
+ font-size: 12px;
1125
+ color: var(--text-muted);
1126
+ line-height: 1.5;
1127
+ flex: 1;
1128
+ }
1129
+
1130
+ /* ==========================================================================
1131
+ RIGHT COLUMN: CONTEXT INSPECTOR & LOCAL GRAPH LINKS
1132
+ ========================================================================== */
1133
+
1134
+ .inspector-container {
1135
+ display: flex;
1136
+ flex-direction: column;
1137
+ gap: 24px;
1138
+ }
1139
+
1140
+ .inspector-head {
1141
+ padding-bottom: 12px;
1142
+ border-bottom: 1px solid var(--border-medium);
1143
+ }
1144
+
1145
+ .insp-title {
1146
+ font-size: 14px;
1147
+ font-weight: 700;
1148
+ color: var(--text-primary);
1149
+ }
1150
+
1151
+ .insp-sub {
1152
+ font-size: 11px;
1153
+ color: var(--text-dim);
1154
+ margin-top: 2px;
1155
+ }
1156
+
1157
+ .insp-group {
1158
+ display: flex;
1159
+ flex-direction: column;
1160
+ gap: 10px;
1161
+ }
1162
+
1163
+ .insp-label {
1164
+ font-size: 11px;
1165
+ font-weight: 700;
1166
+ color: var(--text-dim);
1167
+ text-transform: uppercase;
1168
+ letter-spacing: 0.08em;
1169
+ }
1170
+
1171
+ .insp-pill-list {
1172
+ list-style: none;
1173
+ display: flex;
1174
+ flex-wrap: wrap;
1175
+ gap: 6px;
1176
+ }
1177
+
1178
+ .insp-pill {
1179
+ font-size: 12px;
1180
+ font-weight: 500;
1181
+ padding: 5px 12px;
1182
+ border-radius: 6px;
1183
+ background: var(--bg-canvas);
1184
+ border: 1px solid var(--border-medium);
1185
+ color: var(--text-secondary);
1186
+ }
1187
+
1188
+ .prereq-pill {
1189
+ border-left: 3px solid var(--accent-amber);
1190
+ }
1191
+
1192
+ .boundary-card {
1193
+ background: var(--bg-canvas);
1194
+ border: 1px solid var(--border-medium);
1195
+ padding: 12px 14px;
1196
+ border-radius: 8px;
1197
+ font-size: 12px;
1198
+ }
1199
+
1200
+ .b-title {
1201
+ font-weight: 700;
1202
+ color: var(--accent-amber);
1203
+ margin-bottom: 4px;
1204
+ }
1205
+
1206
+ .b-content {
1207
+ color: var(--text-secondary);
1208
+ line-height: 1.5;
1209
+ }
1210
+
1211
+ .relation-links {
1212
+ display: flex;
1213
+ flex-direction: column;
1214
+ gap: 8px;
1215
+ }
1216
+
1217
+ .relation-link-card {
1218
+ background: var(--bg-canvas);
1219
+ border: 1px solid var(--border-medium);
1220
+ border-radius: 8px;
1221
+ padding: 12px 14px;
1222
+ cursor: pointer;
1223
+ transition: all 0.2s ease;
1224
+ }
1225
+
1226
+ .relation-link-card:hover {
1227
+ background: var(--bg-surface);
1228
+ border-color: var(--primary);
1229
+ transform: translateX(3px);
1230
+ box-shadow: var(--shadow-sm);
1231
+ }
1232
+
1233
+ .rel-type-tag {
1234
+ display: inline-block;
1235
+ font-size: 10px;
1236
+ font-weight: 700;
1237
+ border-radius: 4px;
1238
+ border: 1px solid;
1239
+ padding: 2px 7px;
1240
+ margin-bottom: 6px;
1241
+ }
1242
+
1243
+ .rel-target {
1244
+ display: flex;
1245
+ align-items: center;
1246
+ justify-content: space-between;
1247
+ font-size: 13px;
1248
+ font-weight: 600;
1249
+ color: var(--text-primary);
1250
+ }
1251
+
1252
+ .rel-desc {
1253
+ font-size: 11px;
1254
+ color: var(--text-muted);
1255
+ margin-top: 4px;
1256
+ line-height: 1.4;
1257
+ }
1258
+
1259
+ .glossary-dl dt {
1260
+ font-weight: 700;
1261
+ color: var(--primary);
1262
+ font-size: 12px;
1263
+ margin-top: 8px;
1264
+ }
1265
+
1266
+ .glossary-dl dd {
1267
+ color: var(--text-secondary);
1268
+ font-size: 12px;
1269
+ margin-bottom: 10px;
1270
+ line-height: 1.5;
1271
+ }
1272
+
1273
+ /* ==========================================================================
1274
+ GLOBAL RELATION GRAPH VIEW
1275
+ ========================================================================== */
1276
+
1277
+ .relation-graph-layout {
1278
+ display: grid;
1279
+ grid-template-columns: 1fr 360px;
1280
+ height: 100%;
1281
+ position: relative;
1282
+ }
1283
+
1284
+ .graph-main {
1285
+ position: relative;
1286
+ height: 100%;
1287
+ background: var(--bg-canvas);
1288
+ background-image: var(--graph-grid);
1289
+ background-size: 24px 24px;
1290
+ overflow: hidden;
1291
+ }
1292
+
1293
+ .graph-control-bar {
1294
+ position: absolute;
1295
+ top: 20px;
1296
+ left: 20px;
1297
+ right: 20px;
1298
+ z-index: 10;
1299
+ display: flex;
1300
+ align-items: center;
1301
+ gap: 12px;
1302
+ pointer-events: auto;
1303
+ }
1304
+
1305
+ .graph-mode-switch {
1306
+ display: flex;
1307
+ gap: 2px;
1308
+ padding: 3px;
1309
+ background: var(--bg-surface);
1310
+ border: 1px solid var(--border-medium);
1311
+ border-radius: 8px;
1312
+ box-shadow: var(--shadow-sm);
1313
+ }
1314
+
1315
+ .graph-mode-switch button {
1316
+ padding: 5px 10px;
1317
+ border-radius: 5px;
1318
+ color: var(--text-dim);
1319
+ font-size: 11px;
1320
+ font-weight: 700;
1321
+ white-space: nowrap;
1322
+ }
1323
+
1324
+ .graph-mode-switch button:hover {
1325
+ color: var(--text-primary);
1326
+ }
1327
+
1328
+ .graph-mode-switch button.active {
1329
+ color: #fff;
1330
+ background: var(--primary);
1331
+ }
1332
+
1333
+ .search-box {
1334
+ display: flex;
1335
+ align-items: center;
1336
+ gap: 10px;
1337
+ background: var(--bg-surface);
1338
+ border: 1px solid var(--border-medium);
1339
+ padding: 8px 14px;
1340
+ border-radius: 10px;
1341
+ width: 260px;
1342
+ box-shadow: var(--shadow-sm);
1343
+ transition: all 0.2s ease;
1344
+ }
1345
+
1346
+ .search-box:focus-within {
1347
+ border-color: var(--primary);
1348
+ box-shadow: var(--shadow-glow);
1349
+ }
1350
+
1351
+ .search-box input {
1352
+ background: transparent;
1353
+ border: none;
1354
+ outline: none;
1355
+ width: 100%;
1356
+ color: var(--text-primary);
1357
+ font-size: 13px;
1358
+ }
1359
+
1360
+ .search-icon {
1361
+ color: var(--text-dim);
1362
+ }
1363
+
1364
+ .filter-group {
1365
+ display: flex;
1366
+ align-items: center;
1367
+ gap: 8px;
1368
+ background: var(--bg-surface);
1369
+ border: 1px solid var(--border-medium);
1370
+ padding: 7px 12px;
1371
+ border-radius: 10px;
1372
+ font-size: 12px;
1373
+ box-shadow: var(--shadow-sm);
1374
+ }
1375
+
1376
+ .filter-group select {
1377
+ background: transparent;
1378
+ border: none;
1379
+ outline: none;
1380
+ color: var(--text-primary);
1381
+ font-size: 12px;
1382
+ font-weight: 500;
1383
+ cursor: pointer;
1384
+ }
1385
+
1386
+ .filter-group select option {
1387
+ background: var(--bg-surface);
1388
+ color: var(--text-primary);
1389
+ }
1390
+
1391
+ .filter-label {
1392
+ color: var(--text-dim);
1393
+ font-weight: 600;
1394
+ }
1395
+
1396
+ .graph-legend-ribbon {
1397
+ position: absolute;
1398
+ bottom: 20px;
1399
+ left: 20px;
1400
+ display: flex;
1401
+ align-items: center;
1402
+ gap: 14px;
1403
+ background: var(--bg-surface);
1404
+ backdrop-filter: blur(12px);
1405
+ border: 1px solid var(--border-medium);
1406
+ padding: 8px 18px;
1407
+ border-radius: 30px;
1408
+ font-size: 11px;
1409
+ box-shadow: var(--shadow-md);
1410
+ }
1411
+
1412
+ .legend-title {
1413
+ color: var(--text-dim);
1414
+ font-weight: 700;
1415
+ text-transform: uppercase;
1416
+ letter-spacing: 0.05em;
1417
+ }
1418
+
1419
+ .legend-items {
1420
+ display: flex;
1421
+ gap: 12px;
1422
+ }
1423
+
1424
+ .legend-item {
1425
+ display: flex;
1426
+ align-items: center;
1427
+ gap: 5px;
1428
+ color: var(--text-secondary);
1429
+ }
1430
+
1431
+ .legend-dot {
1432
+ width: 8px;
1433
+ height: 8px;
1434
+ border-radius: 50%;
1435
+ }
1436
+
1437
+ .graph-svg {
1438
+ width: 100%;
1439
+ height: 100%;
1440
+ cursor: grab;
1441
+ }
1442
+
1443
+ .graph-svg:active {
1444
+ cursor: grabbing;
1445
+ }
1446
+
1447
+ /* SVG paths are open strokes; disabling the default fill prevents the
1448
+ browser from closing them into grey polygons between connected nodes. */
1449
+ .graph-edge {
1450
+ fill: none;
1451
+ stroke-linecap: round;
1452
+ stroke-linejoin: round;
1453
+ }
1454
+
1455
+ .graph-edge-label {
1456
+ pointer-events: none;
1457
+ }
1458
+
1459
+ /* ==========================================================================
1460
+ CONCEPT DRAFT CANVAS
1461
+ ========================================================================== */
1462
+
1463
+ .explorer-center {
1464
+ min-width: 0;
1465
+ overflow: hidden;
1466
+ padding: 16px 20px 20px;
1467
+ background:
1468
+ linear-gradient(rgba(56, 189, 248, 0.025) 1px, transparent 1px),
1469
+ linear-gradient(90deg, rgba(56, 189, 248, 0.025) 1px, transparent 1px),
1470
+ var(--bg-canvas);
1471
+ background-size: 28px 28px;
1472
+ }
1473
+
1474
+ .center-scrollable {
1475
+ width: 100%;
1476
+ max-width: none;
1477
+ height: 100%;
1478
+ display: flex;
1479
+ flex-direction: column;
1480
+ }
1481
+
1482
+ .center-toolbar {
1483
+ flex: 0 0 auto;
1484
+ gap: 10px;
1485
+ min-height: 24px;
1486
+ margin-bottom: 4px;
1487
+ padding-bottom: 4px;
1488
+ border-bottom: 0;
1489
+ }
1490
+
1491
+ .draft-floating-tools {
1492
+ position: fixed;
1493
+ right: 10px;
1494
+ bottom: 10px;
1495
+ z-index: 5;
1496
+ display: flex;
1497
+ align-items: center;
1498
+ gap: 8px;
1499
+ padding: 5px;
1500
+ border: 1px solid var(--border-medium);
1501
+ border-radius: 9px;
1502
+ background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
1503
+ box-shadow: var(--shadow-sm);
1504
+ backdrop-filter: blur(8px);
1505
+ opacity: 0.62;
1506
+ transition: opacity 0.2s ease, transform 0.2s ease;
1507
+ }
1508
+
1509
+ .draft-floating-tools:hover,
1510
+ .draft-floating-tools:focus-within {
1511
+ opacity: 1;
1512
+ transform: translateY(-2px);
1513
+ }
1514
+
1515
+ @media (max-width: 900px) {
1516
+ .app-toolbar {
1517
+ right: 10px;
1518
+ }
1519
+
1520
+ .draft-floating-tools {
1521
+ top: auto;
1522
+ right: 8px;
1523
+ bottom: 8px;
1524
+ }
1525
+ }
1526
+
1527
+ .draft-floating-tools .view-graph-btn {
1528
+ margin: 0;
1529
+ padding: 5px 9px;
1530
+ }
1531
+
1532
+ .draft-zoom-controls {
1533
+ display: flex;
1534
+ align-items: center;
1535
+ gap: 3px;
1536
+ padding: 3px;
1537
+ border: 1px solid var(--border-medium);
1538
+ border-radius: 8px;
1539
+ background: var(--bg-surface);
1540
+ box-shadow: var(--shadow-sm);
1541
+ color: var(--text-muted);
1542
+ font-size: 10px;
1543
+ font-weight: 700;
1544
+ }
1545
+
1546
+ .draft-zoom-controls button {
1547
+ display: grid;
1548
+ place-items: center;
1549
+ width: 24px;
1550
+ height: 24px;
1551
+ border-radius: 5px;
1552
+ color: var(--text-muted);
1553
+ }
1554
+
1555
+ .draft-zoom-controls button:hover {
1556
+ color: var(--text-primary);
1557
+ background: var(--bg-card-hover);
1558
+ }
1559
+
1560
+ .draft-zoom-controls span {
1561
+ min-width: 36px;
1562
+ text-align: center;
1563
+ }
1564
+
1565
+ .draft-viewport {
1566
+ flex: 1 1 auto;
1567
+ min-height: 0;
1568
+ position: relative;
1569
+ overflow: hidden;
1570
+ padding: 12px 10px 40px;
1571
+ scrollbar-gutter: stable both-edges;
1572
+ cursor: grab;
1573
+ touch-action: none;
1574
+ }
1575
+
1576
+ .draft-viewport:active {
1577
+ cursor: grabbing;
1578
+ }
1579
+
1580
+ .draft-viewport.is-dragging,
1581
+ .draft-viewport.is-dragging * {
1582
+ user-select: none !important;
1583
+ }
1584
+
1585
+ .draft-board {
1586
+ min-width: 980px;
1587
+ min-height: 100%;
1588
+ position: relative;
1589
+ transform-origin: top left;
1590
+ padding: 4px 8px 28px;
1591
+ user-select: none;
1592
+ }
1593
+
1594
+ .draft-board .node-block,
1595
+ .draft-board .inline-inspector {
1596
+ user-select: text;
1597
+ }
1598
+
1599
+ .draft-board .concept-hero-card {
1600
+ margin-bottom: 18px;
1601
+ padding: 22px 26px;
1602
+ border-radius: 7px 12px 8px 10px;
1603
+ border-style: solid;
1604
+ box-shadow: 3px 4px 0 rgba(15, 23, 42, 0.12), var(--shadow-sm);
1605
+ }
1606
+
1607
+ .draft-board .hero-title {
1608
+ font-size: 28px;
1609
+ }
1610
+
1611
+ .draft-board .hero-meta-chips {
1612
+ margin-bottom: 0;
1613
+ }
1614
+
1615
+ .draft-board .content-blocks {
1616
+ display: grid;
1617
+ grid-template-columns: repeat(3, minmax(250px, 1fr));
1618
+ align-items: start;
1619
+ gap: 12px;
1620
+ }
1621
+
1622
+ .hierarchy-strip {
1623
+ position: relative;
1624
+ display: flex;
1625
+ flex-direction: column;
1626
+ gap: 6px;
1627
+ flex: 0 0 auto;
1628
+ width: 100%;
1629
+ min-height: 38px;
1630
+ margin: 0 0 10px;
1631
+ padding: 0 2px 8px;
1632
+ border-bottom: 1px solid var(--border-medium);
1633
+ }
1634
+
1635
+ .hierarchy-strip-main, .hierarchy-strip-children { display: flex; align-items: center; gap: 8px; min-width: 0; }
1636
+ .hierarchy-strip-main { min-height: 30px; }
1637
+ .hierarchy-strip-label { flex: 0 0 auto; color: var(--text-dim); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
1638
+
1639
+ .hierarchy-strip-path,
1640
+ .hierarchy-strip-children {
1641
+ display: flex;
1642
+ align-items: center;
1643
+ gap: 2px;
1644
+ }
1645
+
1646
+ .hierarchy-strip-path {
1647
+ min-width: 0;
1648
+ flex: 1 1 auto;
1649
+ overflow: hidden;
1650
+ }
1651
+
1652
+ .hierarchy-strip-path button,
1653
+ .hierarchy-strip-path strong,
1654
+ .hierarchy-strip-children button,
1655
+ .hierarchy-strip-empty {
1656
+ display: inline-flex;
1657
+ align-items: center;
1658
+ gap: 4px;
1659
+ min-height: 26px;
1660
+ padding: 3px 6px;
1661
+ border-radius: 5px;
1662
+ color: var(--text-secondary);
1663
+ font-size: 11px;
1664
+ }
1665
+
1666
+ .hierarchy-strip-path button:hover,
1667
+ .hierarchy-strip-children button:hover {
1668
+ background: var(--bg-card-hover);
1669
+ color: var(--text-primary);
1670
+ }
1671
+
1672
+ .hierarchy-strip-path span {
1673
+ color: var(--text-dim);
1674
+ font-family: 'Fira Code', monospace;
1675
+ font-size: 9px;
1676
+ }
1677
+
1678
+ .hierarchy-strip-path strong {
1679
+ border: 1px solid var(--border-accent);
1680
+ background: var(--bg-highlight);
1681
+ color: var(--text-primary);
1682
+ }
1683
+
1684
+ .hierarchy-strip-children {
1685
+ padding-left: 0;
1686
+ }
1687
+
1688
+ .hierarchy-child-scroll { display: flex; gap: 5px; overflow-x: auto; min-width: 0; }
1689
+
1690
+ .hierarchy-strip-children button {
1691
+ border: 1px solid var(--border-subtle);
1692
+ background: var(--bg-canvas);
1693
+ color: var(--text-accent);
1694
+ }
1695
+
1696
+ .hierarchy-strip-children .hierarchy-parent-link {
1697
+ border: 0;
1698
+ background: transparent;
1699
+ color: var(--text-muted);
1700
+ }
1701
+
1702
+ .hierarchy-strip-empty {
1703
+ color: var(--text-dim);
1704
+ font-style: italic;
1705
+ }
1706
+
1707
+ .hierarchy-navigator {
1708
+ margin: 0 0 16px;
1709
+ padding: 8px 10px;
1710
+ border-top: 1px solid var(--border-subtle);
1711
+ border-bottom: 1px solid var(--border-subtle);
1712
+ background: color-mix(in srgb, var(--bg-surface) 84%, var(--primary) 16%);
1713
+ }
1714
+
1715
+ .hierarchy-nav-label {
1716
+ margin-bottom: 6px;
1717
+ color: var(--text-dim);
1718
+ font-family: 'Fira Code', monospace;
1719
+ font-size: 9px;
1720
+ font-weight: 700;
1721
+ letter-spacing: 0.08em;
1722
+ text-transform: uppercase;
1723
+ }
1724
+
1725
+ .hierarchy-nav-track {
1726
+ display: flex;
1727
+ align-items: stretch;
1728
+ gap: 8px;
1729
+ }
1730
+
1731
+ .hierarchy-nav-node,
1732
+ .hierarchy-nav-current,
1733
+ .hierarchy-nav-children {
1734
+ display: flex;
1735
+ flex: 1;
1736
+ min-width: 0;
1737
+ flex-direction: column;
1738
+ justify-content: center;
1739
+ padding: 7px 9px;
1740
+ border: 1px solid var(--border-subtle);
1741
+ border-radius: 6px;
1742
+ background: var(--bg-canvas);
1743
+ text-align: left;
1744
+ }
1745
+
1746
+ .hierarchy-nav-node:hover:not(:disabled) {
1747
+ border-color: var(--primary-light);
1748
+ background: var(--bg-card-hover);
1749
+ }
1750
+
1751
+ .hierarchy-nav-node small,
1752
+ .hierarchy-nav-current small,
1753
+ .hierarchy-nav-children small {
1754
+ margin-bottom: 2px;
1755
+ color: var(--text-dim);
1756
+ font-size: 9px;
1757
+ font-weight: 800;
1758
+ }
1759
+
1760
+ .hierarchy-nav-node span,
1761
+ .hierarchy-nav-current span,
1762
+ .hierarchy-nav-children > span {
1763
+ overflow: hidden;
1764
+ color: var(--text-primary);
1765
+ font-size: 11px;
1766
+ font-weight: 700;
1767
+ text-overflow: ellipsis;
1768
+ white-space: nowrap;
1769
+ }
1770
+
1771
+ .hierarchy-nav-current {
1772
+ flex: 0 0 130px;
1773
+ border-color: var(--border-accent);
1774
+ background: var(--bg-highlight);
1775
+ }
1776
+
1777
+ .hierarchy-nav-arrow {
1778
+ align-self: center;
1779
+ flex: 0 0 auto;
1780
+ color: var(--text-dim);
1781
+ }
1782
+
1783
+ .hierarchy-nav-children.is-disabled,
1784
+ .hierarchy-nav-node.is-disabled {
1785
+ opacity: 0.5;
1786
+ }
1787
+
1788
+ .hierarchy-child-links {
1789
+ display: flex;
1790
+ flex-wrap: wrap;
1791
+ gap: 4px;
1792
+ }
1793
+
1794
+ .hierarchy-child-links button {
1795
+ display: inline-flex;
1796
+ align-items: center;
1797
+ gap: 3px;
1798
+ max-width: 100%;
1799
+ padding: 2px 5px;
1800
+ border: 1px solid var(--border-subtle);
1801
+ border-radius: 4px;
1802
+ color: var(--text-accent);
1803
+ font-size: 10px;
1804
+ }
1805
+
1806
+ .hierarchy-child-links button:hover {
1807
+ border-color: var(--primary-light);
1808
+ background: var(--bg-card-hover);
1809
+ }
1810
+
1811
+ .draft-board .node-block {
1812
+ min-width: 0;
1813
+ padding: 16px 17px;
1814
+ border-radius: 8px 11px 7px 10px;
1815
+ box-shadow: 2px 3px 0 rgba(15, 23, 42, 0.09), var(--shadow-sm);
1816
+ }
1817
+
1818
+ .draft-board .node-block:nth-child(3n) {
1819
+ transform: rotate(-0.2deg);
1820
+ }
1821
+
1822
+ .draft-board .node-block:nth-child(3n + 1) {
1823
+ transform: rotate(0.15deg);
1824
+ }
1825
+
1826
+ .draft-board .drill-down-section,
1827
+ .draft-board .custom-section {
1828
+ grid-column: auto;
1829
+ justify-self: start;
1830
+ width: fit-content;
1831
+ max-width: 100%;
1832
+ min-width: 0;
1833
+ }
1834
+
1835
+ .draft-board .custom-section:has(.semantic-widget-absolute) {
1836
+ position: static;
1837
+ width: 0;
1838
+ height: 0;
1839
+ min-height: 0;
1840
+ padding: 0;
1841
+ border: 0;
1842
+ overflow: visible;
1843
+ box-shadow: none;
1844
+ }
1845
+
1846
+ .node-explorer-layout {
1847
+ grid-template-columns: 220px minmax(0, 1fr);
1848
+ }
1849
+
1850
+ .node-explorer-layout .right-side {
1851
+ display: none;
1852
+ }
1853
+
1854
+ .inline-inspector {
1855
+ margin-top: 18px;
1856
+ padding: 18px 20px;
1857
+ border: 1px dashed var(--border-strong);
1858
+ border-radius: 10px 7px 11px 8px;
1859
+ background: color-mix(in srgb, var(--bg-surface) 86%, var(--primary) 14%);
1860
+ box-shadow: 2px 3px 0 rgba(15, 23, 42, 0.08);
1861
+ }
1862
+
1863
+ .inline-inspector-head {
1864
+ display: flex;
1865
+ align-items: end;
1866
+ justify-content: space-between;
1867
+ gap: 16px;
1868
+ margin-bottom: 14px;
1869
+ padding-bottom: 10px;
1870
+ border-bottom: 1px solid var(--border-subtle);
1871
+ }
1872
+
1873
+ .inline-inspector-head h2 {
1874
+ margin-top: 2px;
1875
+ font-size: 18px;
1876
+ color: var(--text-primary);
1877
+ }
1878
+
1879
+ .inline-inspector-count {
1880
+ color: var(--text-dim);
1881
+ font-size: 11px;
1882
+ white-space: nowrap;
1883
+ }
1884
+
1885
+ .inline-inspector-grid {
1886
+ display: grid;
1887
+ grid-template-columns: repeat(4, minmax(180px, 1fr));
1888
+ gap: 14px;
1889
+ }
1890
+
1891
+ .inline-note-block {
1892
+ min-width: 0;
1893
+ }
1894
+
1895
+ .inline-note-block > .insp-label {
1896
+ display: block;
1897
+ margin-bottom: 8px;
1898
+ }
1899
+
1900
+ .inline-pill-flow {
1901
+ display: flex;
1902
+ flex-wrap: wrap;
1903
+ gap: 6px;
1904
+ }
1905
+
1906
+ .inline-boundary {
1907
+ display: flex;
1908
+ flex-direction: column;
1909
+ gap: 3px;
1910
+ padding: 8px 10px;
1911
+ border-left: 2px solid var(--accent-amber);
1912
+ background: var(--bg-canvas);
1913
+ color: var(--text-secondary);
1914
+ font-size: 11px;
1915
+ }
1916
+
1917
+ .inline-boundary + .inline-boundary {
1918
+ margin-top: 6px;
1919
+ }
1920
+
1921
+ .inline-boundary b {
1922
+ color: var(--accent-amber);
1923
+ font-size: 11px;
1924
+ }
1925
+
1926
+ .relation-column {
1927
+ display: flex;
1928
+ flex-direction: column;
1929
+ gap: 6px;
1930
+ }
1931
+
1932
+ .inline-relation {
1933
+ display: block;
1934
+ width: 100%;
1935
+ padding: 7px 8px;
1936
+ border: 1px solid var(--border-subtle);
1937
+ border-radius: 6px;
1938
+ background: var(--bg-canvas);
1939
+ text-align: left;
1940
+ }
1941
+
1942
+ .inline-relation:hover {
1943
+ border-color: var(--primary-light);
1944
+ background: var(--bg-card-hover);
1945
+ }
1946
+
1947
+ .inline-relation-type {
1948
+ display: block;
1949
+ margin-bottom: 2px;
1950
+ font-size: 10px;
1951
+ font-weight: 800;
1952
+ }
1953
+
1954
+ .inline-relation-main {
1955
+ display: flex;
1956
+ align-items: center;
1957
+ justify-content: space-between;
1958
+ gap: 6px;
1959
+ color: var(--text-primary);
1960
+ font-size: 12px;
1961
+ }
1962
+
1963
+ .inline-relation small {
1964
+ display: block;
1965
+ margin-top: 3px;
1966
+ color: var(--text-dim);
1967
+ font-size: 10px;
1968
+ line-height: 1.45;
1969
+ }
1970
+
1971
+ /* High-density MDX widgets */
1972
+ .semantic-mermaid,
1973
+ .semantic-relation-map,
1974
+ .semantic-insight,
1975
+ .semantic-note-grid {
1976
+ min-width: 0;
1977
+ }
1978
+
1979
+ .draft-board .custom-section {
1980
+ padding: 12px 14px;
1981
+ }
1982
+
1983
+ /* Layout primitives are orchestration layers, not another card around their children. */
1984
+ .draft-board .custom-section:has(.semantic-grid),
1985
+ .draft-board .custom-section:has(.semantic-split),
1986
+ .draft-board .custom-section:has(.semantic-stack) {
1987
+ padding: 0;
1988
+ border: 0;
1989
+ background: transparent;
1990
+ box-shadow: none;
1991
+ width: 100%;
1992
+ }
1993
+
1994
+ .draft-board .semantic-grid,
1995
+ .draft-board .semantic-split {
1996
+ width: 100%;
1997
+ align-items: stretch;
1998
+ }
1999
+ .draft-board .semantic-grid { grid-template-columns: minmax(0, 1.35fr) minmax(250px, .9fr); }
2000
+
2001
+ .draft-board .semantic-grid > .semantic-mermaid,
2002
+ .draft-board .semantic-grid > .semantic-relation-map {
2003
+ width: 100% !important;
2004
+ max-width: none;
2005
+ margin: 0;
2006
+ padding: 14px 16px;
2007
+ border: 1px solid var(--border-medium);
2008
+ border-radius: 10px;
2009
+ background: var(--bg-surface);
2010
+ box-shadow: var(--shadow-sm);
2011
+ }
2012
+
2013
+ .semantic-relation-path {
2014
+ width: 100%;
2015
+ margin: 0 0 14px;
2016
+ padding: 14px 16px;
2017
+ border: 1px solid var(--border-medium);
2018
+ border-radius: 10px;
2019
+ background: var(--bg-surface);
2020
+ box-shadow: var(--shadow-sm);
2021
+ }
2022
+ .relation-path-steps { display: flex; align-items: stretch; overflow-x: auto; padding: 2px 0 4px; }
2023
+ .relation-path-node { flex: 1 0 150px; min-width: 150px; padding: 10px 12px; border: 1px solid var(--border-medium); border-top: 3px solid var(--accent-cyan); border-radius: 8px; background: var(--bg-card); }
2024
+ .relation-path-node.tone-success { border-top-color: var(--accent-emerald); }
2025
+ .relation-path-node.tone-warning { border-top-color: var(--accent-amber); }
2026
+ .relation-path-node.tone-danger { border-top-color: var(--accent-rose); }
2027
+ .relation-path-kicker, .relation-path-node strong, .relation-path-node small { display: block; }
2028
+ .relation-path-kicker { color: var(--text-dim); font: 700 10px 'Fira Code', monospace; margin-bottom: 4px; }
2029
+ .relation-path-node strong { color: var(--text-primary); font-size: 13px; }
2030
+ .relation-path-node small { margin-top: 4px; color: var(--text-muted); font-size: 11px; }
2031
+ .relation-path-edge { flex: 0 0 72px; display: grid; place-items: center; position: relative; color: var(--text-accent); font: 700 10px 'Fira Code', monospace; }
2032
+ .relation-path-edge::before { content: ''; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 1px dashed var(--border-strong); }
2033
+ .relation-path-edge span { z-index: 1; padding: 2px 4px; background: var(--bg-surface); }
2034
+
2035
+ .draft-board .semantic-mermaid,
2036
+ .draft-board .semantic-relation-map {
2037
+ width: fit-content;
2038
+ max-width: 100%;
2039
+ overflow: visible;
2040
+ }
2041
+
2042
+ .draft-board .semantic-insight,
2043
+ .draft-board .semantic-note-grid {
2044
+ width: fit-content;
2045
+ max-width: 100%;
2046
+ }
2047
+
2048
+ .semantic-widget-head {
2049
+ display: flex;
2050
+ align-items: center;
2051
+ justify-content: space-between;
2052
+ gap: 8px;
2053
+ margin-bottom: 8px;
2054
+ color: var(--text-primary);
2055
+ font-size: 11px;
2056
+ font-weight: 800;
2057
+ }
2058
+
2059
+ .semantic-widget-head code {
2060
+ color: var(--text-dim);
2061
+ font-family: 'Fira Code', monospace;
2062
+ font-size: 9px;
2063
+ }
2064
+
2065
+ .mermaid-canvas {
2066
+ min-height: 100px;
2067
+ overflow: auto;
2068
+ padding: 4px;
2069
+ max-width: 100%;
2070
+ min-width: 0;
2071
+ }
2072
+
2073
+ .mermaid-canvas svg {
2074
+ max-width: none;
2075
+ min-width: 100%;
2076
+ height: auto;
2077
+ }
2078
+
2079
+ .mermaid-error {
2080
+ margin: 0;
2081
+ color: var(--accent-rose);
2082
+ font-size: 11px;
2083
+ white-space: pre-wrap;
2084
+ }
2085
+
2086
+ .relation-map-grid {
2087
+ display: grid;
2088
+ gap: 5px;
2089
+ }
2090
+
2091
+ .relation-map-row {
2092
+ display: grid;
2093
+ grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr);
2094
+ gap: 8px;
2095
+ align-items: center;
2096
+ padding: 6px 8px;
2097
+ border-bottom: 1px solid var(--border-subtle);
2098
+ font-size: 11px;
2099
+ }
2100
+
2101
+ .relation-map-source { color: var(--text-secondary); }
2102
+ .relation-map-target { color: var(--text-accent); font-weight: 700; }
2103
+ .relation-map-arrow { color: var(--accent-amber); font-family: 'Fira Code', monospace; font-size: 10px; }
2104
+ .relation-map-row small { grid-column: 1 / -1; color: var(--text-dim); }
2105
+
2106
+ .semantic-insight {
2107
+ padding: 12px 14px;
2108
+ border-left: 3px solid var(--primary-light);
2109
+ background: var(--bg-highlight);
2110
+ }
2111
+
2112
+ .insight-kicker { margin-bottom: 4px; color: var(--text-accent); font-size: 11px; font-weight: 800; }
2113
+ .insight-body { color: var(--text-secondary); font-size: 12px; line-height: 1.55; }
2114
+ .insight-warn { border-color: var(--accent-amber); background: var(--callout-warn-bg); }
2115
+ .insight-warn .insight-kicker { color: var(--accent-amber); }
2116
+ .insight-success { border-color: var(--accent-emerald); background: var(--callout-success-bg); }
2117
+ .insight-success .insight-kicker { color: var(--accent-emerald); }
2118
+
2119
+ .semantic-note-grid {
2120
+ display: grid;
2121
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
2122
+ gap: 8px;
2123
+ }
2124
+
2125
+ .semantic-note {
2126
+ min-height: 54px;
2127
+ padding: 8px 10px;
2128
+ border: 1px solid var(--border-subtle);
2129
+ border-radius: 4px 8px 5px 7px;
2130
+ background: var(--bg-card);
2131
+ box-shadow: 2px 2px 0 rgba(15, 23, 42, 0.08);
2132
+ }
2133
+
2134
+ .semantic-note strong,
2135
+ .semantic-note span { display: block; }
2136
+ .semantic-note strong { margin-bottom: 4px; color: var(--text-primary); font-size: 11px; }
2137
+ .semantic-note span { color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
2138
+
2139
+ @media (max-width: 1120px) {
2140
+ .node-explorer-layout {
2141
+ grid-template-columns: 190px minmax(0, 1fr);
2142
+ }
2143
+
2144
+ .draft-board .content-blocks {
2145
+ grid-template-columns: repeat(2, minmax(250px, 1fr));
2146
+ }
2147
+
2148
+ .draft-board .drill-down-section,
2149
+ .draft-board .custom-section {
2150
+ grid-column: auto;
2151
+ }
2152
+
2153
+ .inline-inspector-grid {
2154
+ grid-template-columns: repeat(2, minmax(180px, 1fr));
2155
+ }
2156
+ }
2157
+
2158
+ @media (max-width: 760px) {
2159
+ .node-explorer-layout { display: block; overflow-y: auto; }
2160
+ .explorer-side { max-height: none; border: 0; }
2161
+ .left-side { display: none; }
2162
+ .explorer-center { padding: 16px 12px 18px; }
2163
+ .hierarchy-strip { width: 100%; top: 4px; }
2164
+ .draft-board { min-width: 0; }
2165
+ .semantic-split { grid-template-columns: 1fr; }
2166
+ .draft-board .semantic-grid { grid-template-columns: 1fr; }
2167
+ .draft-board .content-blocks {
2168
+ grid-template-columns: minmax(0, 1fr);
2169
+ }
2170
+ }
2171
+
2172
+ @media (max-width: 760px) {
2173
+ .relation-graph-layout { display: flex; flex-direction: column; }
2174
+ .graph-main { min-height: 62vh; }
2175
+ .graph-side-panel { max-height: 38vh; border-left: 0; border-top: 1px solid var(--border-medium); padding: 16px; }
2176
+ .graph-control-bar { left: 10px; right: 10px; top: 10px; flex-wrap: wrap; gap: 6px; }
2177
+ .graph-control-bar .filter-group { display: none; }
2178
+ .graph-legend-ribbon { display: none; }
2179
+ }
2180
+
2181
+ .graph-side-panel {
2182
+ background: var(--bg-surface);
2183
+ border-left: 1px solid var(--border-medium);
2184
+ padding: 28px 24px;
2185
+ overflow-y: auto;
2186
+ box-shadow: var(--shadow-lg);
2187
+ transition: background-color 0.3s ease;
2188
+ }
2189
+
2190
+ .graph-inspector {
2191
+ display: flex;
2192
+ flex-direction: column;
2193
+ gap: 16px;
2194
+ }
2195
+
2196
+ .panel-badge {
2197
+ font-size: 11px;
2198
+ font-weight: 800;
2199
+ text-transform: uppercase;
2200
+ letter-spacing: 0.06em;
2201
+ }
2202
+
2203
+ .panel-node-title {
2204
+ font-size: 22px;
2205
+ font-weight: 800;
2206
+ color: var(--text-primary);
2207
+ line-height: 1.3;
2208
+ }
2209
+
2210
+ .panel-summary {
2211
+ font-size: 14px;
2212
+ color: var(--text-secondary);
2213
+ line-height: 1.6;
2214
+ }
2215
+
2216
+ .jump-explorer-btn {
2217
+ display: flex;
2218
+ align-items: center;
2219
+ justify-content: center;
2220
+ gap: 8px;
2221
+ width: 100%;
2222
+ padding: 12px;
2223
+ border-radius: 10px;
2224
+ background: var(--primary);
2225
+ color: #fff;
2226
+ font-weight: 700;
2227
+ font-size: 13px;
2228
+ box-shadow: var(--shadow-sm);
2229
+ transition: all 0.2s ease;
2230
+ }
2231
+
2232
+ .jump-explorer-btn:hover {
2233
+ background: var(--primary-light);
2234
+ box-shadow: var(--shadow-glow);
2235
+ transform: translateY(-1px);
2236
+ }
2237
+
2238
+ .panel-divider {
2239
+ height: 1px;
2240
+ background: var(--border-medium);
2241
+ margin: 6px 0;
2242
+ }
2243
+
2244
+ .panel-section .section-title {
2245
+ font-size: 11px;
2246
+ font-weight: 700;
2247
+ color: var(--text-dim);
2248
+ text-transform: uppercase;
2249
+ letter-spacing: 0.08em;
2250
+ margin-bottom: 12px;
2251
+ }
2252
+
2253
+ .panel-rel-list {
2254
+ display: flex;
2255
+ flex-direction: column;
2256
+ gap: 8px;
2257
+ }
2258
+
2259
+ .panel-rel-card {
2260
+ background: var(--bg-canvas);
2261
+ border: 1px solid var(--border-medium);
2262
+ border-radius: 8px;
2263
+ padding: 12px;
2264
+ cursor: pointer;
2265
+ transition: all 0.15s ease;
2266
+ }
2267
+
2268
+ .panel-rel-card:hover {
2269
+ border-color: var(--primary);
2270
+ background: var(--bg-subtle);
2271
+ transform: translateX(2px);
2272
+ }
2273
+
2274
+ .rel-card-header {
2275
+ display: flex;
2276
+ justify-content: space-between;
2277
+ align-items: center;
2278
+ font-size: 10px;
2279
+ margin-bottom: 4px;
2280
+ }
2281
+
2282
+ .rel-tag {
2283
+ font-weight: 700;
2284
+ }
2285
+
2286
+ .rel-dir {
2287
+ color: var(--text-dim);
2288
+ }
2289
+
2290
+ .rel-target-title {
2291
+ font-size: 13px;
2292
+ font-weight: 600;
2293
+ color: var(--text-primary);
2294
+ }
2295
+
2296
+ .rel-target-desc {
2297
+ font-size: 11px;
2298
+ color: var(--text-muted);
2299
+ margin-top: 4px;
2300
+ }
2301
+
2302
+ .io-capsule {
2303
+ background: var(--bg-canvas);
2304
+ border: 1px solid var(--border-medium);
2305
+ padding: 12px 14px;
2306
+ border-radius: 8px;
2307
+ font-size: 12px;
2308
+ display: flex;
2309
+ flex-direction: column;
2310
+ gap: 8px;
2311
+ }
2312
+
2313
+ .empty-inspector {
2314
+ display: flex;
2315
+ flex-direction: column;
2316
+ align-items: center;
2317
+ justify-content: center;
2318
+ height: 320px;
2319
+ color: var(--text-dim);
2320
+ text-align: center;
2321
+ gap: 14px;
2322
+ font-size: 13px;
2323
+ padding: 0 20px;
2324
+ }
2325
+
2326
+ .empty-subtext {
2327
+ font-size: 12px;
2328
+ color: var(--text-dim);
2329
+ font-style: italic;
2330
+ padding: 6px 0;
2331
+ }
2332
+
2333
+ /* ==========================================================================
2334
+ SEMANTIC PRESENTATION COMPONENTS (Matrix, Compare, Callouts)
2335
+ ========================================================================== */
2336
+
2337
+ .semantic-learning-objectives,
2338
+ .semantic-key-question,
2339
+ .semantic-evidence,
2340
+ .semantic-invariant,
2341
+ .semantic-failure-mode {
2342
+ border: 1px solid var(--line-subtle, rgba(148, 163, 184, .24));
2343
+ border-radius: 12px;
2344
+ padding: 12px 14px;
2345
+ background: var(--surface-soft, rgba(15, 23, 42, .28));
2346
+ }
2347
+
2348
+ .semantic-learning-objectives ul { margin: 8px 0 0; padding-left: 20px; }
2349
+ .semantic-learning-objectives li { margin: 4px 0; }
2350
+ .semantic-key-question { display: flex; align-items: baseline; gap: 10px; border-color: rgba(56, 189, 248, .35); }
2351
+ .semantic-key-question strong { color: var(--text-primary, #e2e8f0); }
2352
+ .semantic-evidence { display: grid; gap: 7px; border-color: rgba(52, 211, 153, .3); }
2353
+ .evidence-command { overflow-x: auto; color: #a7f3d0; }
2354
+ .evidence-observes { color: var(--text-secondary, #cbd5e1); }
2355
+ .semantic-invariant { border-color: rgba(129, 140, 248, .35); }
2356
+ .semantic-invariant > div:last-child { margin-top: 6px; }
2357
+ .semantic-failure-mode { border-color: rgba(251, 146, 60, .38); }
2358
+ .semantic-failure-mode dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 8px 0 0; }
2359
+ .semantic-failure-mode dt { color: var(--text-muted, #94a3b8); font-size: .8rem; }
2360
+ .semantic-failure-mode dd { margin: 0; }
2361
+ .failure-details { margin-top: 10px; }
2362
+ .semantic-tradeoff { border: 1px solid rgba(250, 204, 21, .3); border-radius: 12px; padding: 12px 14px; background: var(--surface-soft, rgba(15,23,42,.24)); }
2363
+ .tradeoff-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 8px; }
2364
+ .tradeoff-option { display: grid; gap: 4px; padding: 9px; border-radius: 8px; background: rgba(148,163,184,.08); }
2365
+ .tradeoff-option span { color: var(--text-secondary, #cbd5e1); font-size: .86rem; }
2366
+ .tradeoff-option b { color: var(--text-muted, #94a3b8); font-size: .72rem; margin-right: 5px; }
2367
+
2368
+ .semantic-callout {
2369
+ padding: 16px 20px;
2370
+ border-radius: 10px;
2371
+ margin: 14px 0;
2372
+ background: var(--callout-info-bg);
2373
+ border-left: 4px solid var(--callout-info-border);
2374
+ }
2375
+
2376
+ .semantic-callout.callout-warn {
2377
+ border-left-color: var(--callout-warn-border);
2378
+ background: var(--callout-warn-bg);
2379
+ }
2380
+
2381
+ .semantic-callout.callout-danger {
2382
+ border-left-color: var(--callout-danger-border);
2383
+ background: var(--callout-danger-bg);
2384
+ }
2385
+
2386
+ .callout-title {
2387
+ font-weight: 700;
2388
+ margin-bottom: 6px;
2389
+ color: var(--text-primary);
2390
+ font-size: 14px;
2391
+ }
2392
+
2393
+ .callout-content {
2394
+ color: var(--text-secondary);
2395
+ font-size: 13px;
2396
+ line-height: 1.6;
2397
+ }
2398
+
2399
+ .semantic-decision-matrix, .semantic-compare-table {
2400
+ overflow-x: auto;
2401
+ margin-top: 14px;
2402
+ border-radius: 10px;
2403
+ border: 1px solid var(--border-medium);
2404
+ background: var(--bg-canvas);
2405
+ }
2406
+
2407
+ .matrix-title {
2408
+ padding: 12px 16px;
2409
+ font-weight: 700;
2410
+ font-size: 13px;
2411
+ color: var(--text-primary);
2412
+ border-bottom: 1px solid var(--border-medium);
2413
+ background: var(--bg-surface);
2414
+ }
2415
+
2416
+ .semantic-decision-matrix table, .semantic-compare-table table {
2417
+ width: 100%;
2418
+ border-collapse: collapse;
2419
+ font-size: 13px;
2420
+ }
2421
+
2422
+ .semantic-decision-matrix th, .semantic-compare-table th {
2423
+ background: var(--bg-surface);
2424
+ padding: 10px 14px;
2425
+ border-bottom: 1px solid var(--border-medium);
2426
+ border-right: 1px solid var(--border-subtle);
2427
+ text-align: left;
2428
+ font-weight: 700;
2429
+ color: var(--text-primary);
2430
+ }
2431
+
2432
+ .semantic-decision-matrix td, .semantic-compare-table td {
2433
+ padding: 10px 14px;
2434
+ border-bottom: 1px solid var(--border-subtle);
2435
+ border-right: 1px solid var(--border-subtle);
2436
+ color: var(--text-secondary);
2437
+ }
2438
+
2423
2439
  .semantic-decision-matrix tr:last-child td, .semantic-compare-table tr:last-child td {
2424
2440
  border-bottom: none;
2425
2441
  }
2426
2442
 
2427
- .semantic-framework-model, .semantic-model-matrix, .semantic-model-formula, .semantic-model-pyramid, .semantic-model-funnel { margin-top: 14px; padding: 14px; border: 1px solid var(--border-medium); border-radius: 10px; background: var(--bg-canvas); }
2428
- .framework-model-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
2429
- .framework-model-type { color: var(--text-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
2430
- .framework-model-question { margin-bottom: 10px; color: var(--text-secondary); font-size: 12px; }
2431
- .framework-model-elements { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
2432
- .framework-model-element { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; padding: 10px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-surface); }
2443
+ .semantic-framework-model, .semantic-model-matrix, .semantic-model-formula {
2444
+ margin-top: 14px;
2445
+ padding: 14px;
2446
+ border: 1px solid var(--border-medium);
2447
+ border-radius: 10px;
2448
+ background: var(--bg-canvas);
2449
+ }
2450
+
2451
+ .framework-model-head {
2452
+ display: flex;
2453
+ align-items: center;
2454
+ justify-content: space-between;
2455
+ gap: 12px;
2456
+ margin-bottom: 10px;
2457
+ }
2458
+
2459
+ .framework-model-type {
2460
+ color: var(--text-muted);
2461
+ font-size: 11px;
2462
+ letter-spacing: .08em;
2463
+ text-transform: uppercase;
2464
+ }
2465
+
2466
+ .framework-model-question {
2467
+ margin-bottom: 10px;
2468
+ color: var(--text-secondary);
2469
+ font-size: 12px;
2470
+ }
2471
+
2472
+ .framework-model-elements {
2473
+ display: grid;
2474
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
2475
+ gap: 8px;
2476
+ }
2477
+
2478
+ .framework-model-element {
2479
+ display: grid;
2480
+ grid-template-columns: auto 1fr;
2481
+ gap: 3px 8px;
2482
+ padding: 10px;
2483
+ border: 1px solid var(--border-subtle);
2484
+ border-radius: 8px;
2485
+ background: var(--bg-surface);
2486
+ }
2487
+
2433
2488
  .framework-model-element strong { color: var(--text-primary); font-size: 13px; }
2434
2489
  .framework-model-element span:last-child { grid-column: 2; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
2435
2490
  .framework-model-index { color: var(--accent-cyan); font: 700 11px/1.4 ui-monospace, monospace; }
2436
2491
  .model-stages .framework-model-elements, .model-cycle .framework-model-elements { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
2437
- .model-matrix-grid { display: grid; grid-template-columns: 30px repeat(2, minmax(110px, 1fr)); grid-template-rows: 24px repeat(2, minmax(70px, 1fr)); gap: 5px; }
2492
+ .model-stages .framework-model-element:not(:last-child)::after { content: '→'; position: absolute; }
2493
+
2494
+ .model-matrix-grid {
2495
+ display: grid;
2496
+ grid-template-columns: 30px repeat(2, minmax(110px, 1fr));
2497
+ grid-template-rows: 24px repeat(2, minmax(70px, 1fr));
2498
+ gap: 5px;
2499
+ }
2500
+
2438
2501
  .model-matrix-axis { color: var(--text-muted); font-size: 11px; text-align: center; }
2439
2502
  .model-matrix-x { grid-column: 2 / 4; }
2440
2503
  .model-matrix-y { grid-row: 2 / 4; writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; }
@@ -2444,11 +2507,200 @@ button.flow-box {
2444
2507
  .tone-success { border-color: rgba(52, 211, 153, .45); }
2445
2508
  .tone-warn { border-color: rgba(251, 191, 36, .45); }
2446
2509
  .tone-danger { border-color: rgba(248, 113, 113, .45); }
2510
+
2447
2511
  .model-formula-expression { padding: 12px; border-radius: 8px; background: var(--bg-surface); color: var(--accent-cyan); text-align: center; font-size: 16px; }
2448
2512
  .model-formula-variables { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 10px 0 0; font-size: 12px; }
2449
2513
  .model-formula-variables dt { color: var(--accent-cyan); font-family: ui-monospace, monospace; }
2450
2514
  .model-formula-variables dd { margin: 0; color: var(--text-secondary); }
2515
+
2516
+ .semantic-model-pyramid, .semantic-model-funnel {
2517
+ margin-top: 14px;
2518
+ padding: 14px;
2519
+ border: 1px solid var(--border-medium);
2520
+ border-radius: 10px;
2521
+ background: var(--bg-canvas);
2522
+ }
2523
+
2451
2524
  .model-pyramid-levels, .model-funnel-steps { display: flex; flex-direction: column; align-items: center; gap: 5px; }
2452
- .model-pyramid-level, .model-funnel-step { display: flex; flex-direction: column; gap: 3px; width: var(--pyramid-width, var(--funnel-width)); padding: 9px 12px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--bg-surface); text-align: center; }
2525
+ .model-pyramid-level, .model-funnel-step {
2526
+ display: flex;
2527
+ flex-direction: column;
2528
+ gap: 3px;
2529
+ width: var(--pyramid-width, var(--funnel-width));
2530
+ padding: 9px 12px;
2531
+ border: 1px solid var(--border-subtle);
2532
+ border-radius: 7px;
2533
+ background: var(--bg-surface);
2534
+ text-align: center;
2535
+ }
2453
2536
  .model-pyramid-level strong, .model-funnel-step strong { color: var(--text-primary); font-size: 12px; }
2454
2537
  .model-pyramid-level span, .model-funnel-step span { color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
2538
+
2539
+ /* ==========================================================================
2540
+ DESIGN REFINEMENT — remove the generic "SaaS card kit" defaults.
2541
+ Oversized uniform radii, a soft grey shadow on every surface, glass blur,
2542
+ gradient decoration and tracked all-caps labels are the tells this pass
2543
+ removes. Surfaces are separated by hairlines and a single print-like
2544
+ offset shadow; radii follow the 3/4/6/8 scale so weight maps to hierarchy.
2545
+ ========================================================================== */
2546
+
2547
+ /* Chrome: solid surfaces instead of glass blur */
2548
+ .app-toolbar,
2549
+ .graph-legend-ribbon,
2550
+ .draft-floating-tools {
2551
+ background: var(--bg-surface);
2552
+ backdrop-filter: none;
2553
+ -webkit-backdrop-filter: none;
2554
+ box-shadow: var(--shadow-card);
2555
+ }
2556
+
2557
+ .app-toolbar,
2558
+ .graph-legend-ribbon,
2559
+ .draft-floating-tools { border-radius: var(--radius-3); }
2560
+
2561
+ .draft-floating-tools:hover,
2562
+ .draft-floating-tools:focus-within { transform: none; }
2563
+
2564
+ .view-tabs { border-radius: var(--radius-2); }
2565
+ .view-tab { border-radius: var(--radius-1); }
2566
+ .view-tab.active { box-shadow: none; border-color: var(--border-strong); }
2567
+ .theme-toggle-btn { border-radius: var(--radius-2); box-shadow: none; }
2568
+
2569
+ /* Hover shows state through color and rules, not nudged cards */
2570
+ .theme-toggle-btn:hover,
2571
+ .view-graph-btn:hover,
2572
+ .subnode-card:hover,
2573
+ .relation-link-card:hover,
2574
+ .panel-rel-card:hover,
2575
+ .sibling-btn:hover,
2576
+ .flow-box.clickable:hover,
2577
+ .jump-explorer-btn:hover { transform: none; }
2578
+ .subnode-card:hover .sn-arrow { transform: none; }
2579
+
2580
+ .brand-logo-badge {
2581
+ background: var(--primary);
2582
+ border-radius: var(--radius-2);
2583
+ box-shadow: none;
2584
+ }
2585
+
2586
+ /* Graph controls */
2587
+ .graph-mode-switch,
2588
+ .search-box,
2589
+ .filter-group {
2590
+ border-radius: var(--radius-3);
2591
+ box-shadow: none;
2592
+ }
2593
+ .graph-mode-switch button { border-radius: var(--radius-1); }
2594
+ .graph-legend-ribbon { border-radius: var(--radius-3); }
2595
+ .graph-side-panel { box-shadow: none; }
2596
+
2597
+ /* Labels: sentence case instead of tracked all-caps eyebrows */
2598
+ .side-label,
2599
+ .insp-label,
2600
+ .legend-title,
2601
+ .box-type,
2602
+ .chip-label,
2603
+ .impl-lang,
2604
+ .hierarchy-nav-label,
2605
+ .panel-badge,
2606
+ .panel-section .section-title,
2607
+ .framework-model-type {
2608
+ text-transform: none;
2609
+ letter-spacing: 0.01em;
2610
+ }
2611
+ .side-label { color: var(--text-secondary); }
2612
+ .side-label::before { width: 2px; height: 11px; border-radius: 1px; }
2613
+
2614
+ /* Navigation */
2615
+ .breadcrumb-node,
2616
+ .sibling-btn,
2617
+ .tree-node-btn,
2618
+ .hierarchy-nav-node,
2619
+ .hierarchy-nav-current,
2620
+ .hierarchy-nav-children { border-radius: var(--radius-2); }
2621
+ .tree-node-btn.active::before { border-radius: 0; }
2622
+
2623
+ /* Cards: radius hierarchy + hairline separation */
2624
+ .concept-hero-card {
2625
+ border-radius: var(--radius-4);
2626
+ box-shadow: var(--shadow-pop);
2627
+ }
2628
+ .concept-hero-card::after { display: none; }
2629
+
2630
+ .node-block,
2631
+ .draft-board .node-block {
2632
+ border-radius: var(--radius-3);
2633
+ box-shadow: var(--shadow-card);
2634
+ }
2635
+
2636
+ .example-item,
2637
+ .counterexample-item,
2638
+ .subnode-card,
2639
+ .relation-link-card,
2640
+ .boundary-card,
2641
+ .panel-rel-card,
2642
+ .io-capsule,
2643
+ .local-flow-ribbon,
2644
+ .code-block,
2645
+ .inline-inspector,
2646
+ .semantic-learning-objectives,
2647
+ .semantic-key-question,
2648
+ .semantic-evidence,
2649
+ .semantic-invariant,
2650
+ .semantic-failure-mode,
2651
+ .semantic-tradeoff,
2652
+ .semantic-framework-model,
2653
+ .semantic-model-matrix,
2654
+ .semantic-model-formula,
2655
+ .semantic-model-pyramid,
2656
+ .semantic-model-funnel,
2657
+ .semantic-relation-path,
2658
+ .relation-path-node,
2659
+ .model-matrix-cell,
2660
+ .model-formula-expression,
2661
+ .semantic-decision-matrix,
2662
+ .semantic-compare-table,
2663
+ .semantic-callout,
2664
+ .hierarchy-navigator { border-radius: var(--radius-3); }
2665
+
2666
+ .draft-board .semantic-grid > .semantic-mermaid,
2667
+ .draft-board .semantic-grid > .semantic-relation-map { border-radius: var(--radius-3); }
2668
+
2669
+ .meta-chip,
2670
+ .flow-box,
2671
+ .insp-pill,
2672
+ .inline-relation,
2673
+ .level-pill,
2674
+ .view-graph-btn,
2675
+ .framework-model-element,
2676
+ .model-pyramid-level,
2677
+ .model-funnel-step,
2678
+ .semantic-note { border-radius: var(--radius-2); }
2679
+
2680
+ .rel-type-tag,
2681
+ .bc-level-pill { border-radius: var(--radius-1); }
2682
+
2683
+ /* Depth: only note-like surfaces keep an offset shadow, nothing floats */
2684
+ .code-block { box-shadow: none; }
2685
+ .semantic-note { box-shadow: var(--shadow-card); }
2686
+ .subnode-card:hover { box-shadow: var(--shadow-card); }
2687
+ .flow-box.current-focus,
2688
+ .jump-explorer-btn { box-shadow: none; }
2689
+
2690
+ .inline-inspector {
2691
+ border-style: solid;
2692
+ border-color: var(--border-medium);
2693
+ box-shadow: var(--shadow-card);
2694
+ }
2695
+
2696
+ /* Widget chrome: the type tag becomes a quiet rule, not monospace data */
2697
+ .semantic-widget-head code {
2698
+ padding: 1px 5px;
2699
+ border: 1px solid var(--border-subtle);
2700
+ border-radius: var(--radius-1);
2701
+ color: var(--text-dim);
2702
+ font-family: inherit;
2703
+ font-size: 9px;
2704
+ font-weight: 700;
2705
+ letter-spacing: 0.03em;
2706
+ }