@kage-core/kage-graph-mcp 1.3.0 → 2.0.0

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.
package/viewer/styles.css DELETED
@@ -1,2878 +0,0 @@
1
- :root {
2
- color-scheme: dark;
3
- --bg: #050806;
4
- --surface: #08110d;
5
- --surface-soft: #0d1913;
6
- --surface-strong: #12251b;
7
- --surface-overlay: rgba(20, 26, 38, 0.92);
8
- --accent: #6ad7ff;
9
- --accent-strong: #8be4ff;
10
- --accent-soft: rgba(106, 215, 255, 0.10);
11
- --terminal: #b9fbc0;
12
- --terminal-strong: #41ff8f;
13
- --terminal-dim: #6ea77d;
14
- --text: #d7f9df;
15
- --muted: #7fa88a;
16
- --line: #1c3b29;
17
- --line-strong: #2f6f48;
18
- --brand: #41ff8f;
19
- --brand-soft: rgba(65, 255, 143, 0.10);
20
- --brand-glow: 0 0 18px rgba(65, 255, 143, 0.32), 0 0 44px rgba(65, 255, 143, 0.16);
21
- --brand-glow-strong: 0 0 22px rgba(65, 255, 143, 0.48), 0 0 64px rgba(65, 255, 143, 0.22);
22
- --memory: #41ff8f;
23
- --memory-soft: #071d10;
24
- --code: #6ad7ff;
25
- --code-soft: #102633;
26
- --warn: #ffd166;
27
- --warn-soft: rgba(255, 209, 102, 0.12);
28
- --danger: #ff6b6b;
29
- --danger-soft: rgba(255, 107, 107, 0.12);
30
- --ok: #6dd58c;
31
- --ok-soft: rgba(109, 213, 140, 0.12);
32
- --edge: #6d8f79;
33
- --shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
34
- }
35
-
36
- * { box-sizing: border-box; }
37
-
38
- body {
39
- margin: 0;
40
- min-width: 320px;
41
- background: #050806;
42
- color: var(--text);
43
- font: 14px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
44
- }
45
-
46
- button, input, select { font: inherit; }
47
- h1, h2, p { margin: 0; }
48
- h1 { font-size: clamp(20px, 2vw, 28px); line-height: 1; letter-spacing: 0; }
49
- h2 {
50
- color: var(--terminal);
51
- font-size: 14px;
52
- letter-spacing: 0;
53
- text-shadow: 0 0 10px rgba(65, 255, 143, 0.18);
54
- text-transform: none;
55
- }
56
-
57
- .viewer-shell {
58
- min-height: 100vh;
59
- display: grid;
60
- grid-template-columns: 236px minmax(0, 1fr);
61
- background:
62
- radial-gradient(circle at 0 0, rgba(65, 255, 143, 0.15), transparent 320px),
63
- linear-gradient(180deg, rgba(65, 255, 143, 0.06), transparent 300px),
64
- #050806;
65
- }
66
-
67
- .repo-sidebar {
68
- position: sticky;
69
- top: 0;
70
- height: 100vh;
71
- display: grid;
72
- grid-template-rows: auto auto minmax(0, 1fr) auto;
73
- gap: 22px;
74
- padding: 22px 16px;
75
- border-right: 1px solid rgba(65, 255, 143, 0.13);
76
- background:
77
- radial-gradient(circle at 0 0, rgba(65, 255, 143, 0.12), transparent 230px),
78
- #070d0a;
79
- box-shadow: inset -1px 0 0 rgba(65, 255, 143, 0.12), 12px 0 48px rgba(65, 255, 143, 0.045);
80
- }
81
-
82
- .sidebar-brand {
83
- display: inline-flex;
84
- align-items: center;
85
- gap: 10px;
86
- color: var(--text);
87
- font-size: 17px;
88
- font-weight: 850;
89
- text-decoration: none;
90
- }
91
-
92
- .brand-mark {
93
- width: 32px;
94
- height: 32px;
95
- display: inline-flex;
96
- align-items: center;
97
- justify-content: center;
98
- border-radius: 8px;
99
- background: rgba(65, 255, 143, 0.13);
100
- border: 1px solid rgba(65, 255, 143, 0.26);
101
- color: var(--terminal-strong);
102
- box-shadow: var(--brand-glow);
103
- text-shadow: 0 0 12px rgba(65, 255, 143, 0.70);
104
- }
105
-
106
- .repo-card {
107
- display: grid;
108
- gap: 7px;
109
- padding: 14px;
110
- border: 1px solid rgba(65, 255, 143, 0.12);
111
- border-radius: 10px;
112
- background: rgba(13, 25, 19, 0.62);
113
- }
114
-
115
- .repo-card span,
116
- .repo-card em {
117
- color: var(--terminal-dim);
118
- font-size: 11px;
119
- font-style: normal;
120
- }
121
-
122
- .repo-card span {
123
- font-weight: 800;
124
- text-transform: uppercase;
125
- }
126
-
127
- .repo-card strong {
128
- color: var(--text);
129
- font-size: 14px;
130
- overflow-wrap: anywhere;
131
- }
132
-
133
- .viewer-main {
134
- min-width: 0;
135
- }
136
-
137
- .app-header {
138
- display: grid;
139
- grid-template-columns: minmax(320px, 1fr) auto;
140
- grid-template-areas:
141
- "brand status"
142
- "brand autoload";
143
- gap: 10px 20px;
144
- align-items: center;
145
- padding: 24px 32px;
146
- border-bottom: 1px solid var(--line);
147
- background: rgba(5, 8, 6, 0.84);
148
- backdrop-filter: blur(16px);
149
- position: sticky;
150
- top: 0;
151
- z-index: 10;
152
- }
153
-
154
- .brand-block {
155
- grid-area: brand;
156
- min-width: 280px;
157
- max-width: 780px;
158
- }
159
- .eyebrow {
160
- display: inline-flex;
161
- margin-bottom: 4px;
162
- color: var(--terminal-strong);
163
- font-size: 10px;
164
- font-weight: 800;
165
- letter-spacing: 0.08em;
166
- text-transform: uppercase;
167
- }
168
- .brand-block h1::before {
169
- content: "";
170
- }
171
- .brand-block h1 {
172
- color: var(--terminal-strong);
173
- text-shadow: 0 0 18px rgba(65, 255, 143, 0.46), 0 0 42px rgba(65, 255, 143, 0.18);
174
- }
175
- .app-header p {
176
- margin-top: 8px;
177
- color: var(--muted);
178
- font-size: 13px;
179
- overflow-wrap: anywhere;
180
- }
181
-
182
- .viewer-sections {
183
- display: grid;
184
- gap: 8px;
185
- align-content: start;
186
- }
187
-
188
- .viewer-section {
189
- display: inline-flex;
190
- align-items: center;
191
- justify-content: flex-start;
192
- min-height: 40px;
193
- padding: 0 12px;
194
- border: 1px solid transparent;
195
- border-radius: 8px;
196
- background: transparent;
197
- box-shadow: none;
198
- color: var(--terminal-dim);
199
- font-size: 14px;
200
- font-weight: 720;
201
- text-decoration: none;
202
- }
203
-
204
- .sidebar-secondary {
205
- display: none;
206
- }
207
- .viewer-section:hover {
208
- border-color: rgba(65, 255, 143, 0.30);
209
- color: var(--terminal-strong);
210
- }
211
- .viewer-section.active,
212
- .viewer-section[aria-selected="true"],
213
- .viewer-section[aria-current="page"] {
214
- border-color: var(--terminal-strong);
215
- background: rgba(65, 255, 143, 0.10);
216
- color: var(--brand);
217
- box-shadow: inset 0 0 0 1px rgba(65, 255, 143, 0.20), var(--brand-glow);
218
- text-shadow: 0 0 10px rgba(65, 255, 143, 0.45);
219
- }
220
-
221
- .sidebar-links {
222
- display: grid;
223
- gap: 6px;
224
- padding-top: 14px;
225
- border-top: 1px solid rgba(65, 255, 143, 0.10);
226
- }
227
- .sidebar-links a {
228
- color: var(--terminal-dim);
229
- font-size: 12px;
230
- font-weight: 700;
231
- text-decoration: none;
232
- }
233
- .sidebar-links a:hover { color: var(--terminal-strong); }
234
-
235
- .status-strip {
236
- grid-area: status;
237
- display: none;
238
- flex-wrap: wrap;
239
- gap: 8px;
240
- justify-content: flex-start;
241
- }
242
-
243
- .autoload-status {
244
- grid-area: autoload;
245
- display: none;
246
- align-items: center;
247
- min-height: 26px;
248
- padding: 3px 9px;
249
- border: 1px solid var(--line);
250
- border-radius: 4px;
251
- background: #040805;
252
- color: var(--warn);
253
- font-size: 11px;
254
- font-weight: 760;
255
- white-space: nowrap;
256
- }
257
- .autoload-status.ok {
258
- border-color: var(--line-strong);
259
- color: var(--terminal-strong);
260
- }
261
-
262
- .status-pill, .detail-kind {
263
- display: inline-flex;
264
- align-items: center;
265
- gap: 7px;
266
- min-height: 24px;
267
- padding: 3px 8px;
268
- border: 1px solid var(--line-strong);
269
- border-radius: 4px;
270
- background: rgba(13, 25, 19, 0.92);
271
- color: var(--muted);
272
- font-size: 11px;
273
- font-weight: 750;
274
- white-space: nowrap;
275
- }
276
- .status-pill strong { color: var(--brand); }
277
- .status-pill.warn strong { color: var(--warn); }
278
- .status-pill.code strong { color: var(--code); }
279
- .status-pill.memory strong { color: var(--memory); }
280
- .status-pill.memory {
281
- border-color: rgba(65, 255, 143, 0.35);
282
- box-shadow: 0 0 18px rgba(65, 255, 143, 0.10);
283
- }
284
-
285
- .file-picker, button {
286
- display: inline-flex;
287
- align-items: center;
288
- justify-content: center;
289
- min-height: 34px;
290
- padding: 0 13px;
291
- border: 1px solid var(--terminal-strong);
292
- border-radius: 4px;
293
- background: #07130d;
294
- color: var(--terminal-strong);
295
- cursor: pointer;
296
- white-space: nowrap;
297
- font-weight: 780;
298
- box-shadow: inset 0 0 0 1px rgba(65, 255, 143, 0.10);
299
- }
300
- .file-picker { grid-area: picker; }
301
- .app-header .file-picker { display: none; }
302
- .file-picker:hover, button:hover { background: #0d1f15; }
303
- .file-picker input {
304
- position: absolute;
305
- width: 1px;
306
- height: 1px;
307
- overflow: hidden;
308
- clip: rect(0, 0, 0, 0);
309
- }
310
- .file-picker > span {
311
- display: inline;
312
- margin: 0;
313
- color: var(--terminal-strong) !important;
314
- font-size: inherit;
315
- font-weight: inherit;
316
- }
317
-
318
- .layout {
319
- position: relative;
320
- display: grid;
321
- grid-template-columns: minmax(0, 1fr);
322
- grid-template-areas: "dashboard";
323
- gap: 24px;
324
- padding: 32px;
325
- min-height: calc(100vh - 78px);
326
- align-items: start;
327
- }
328
-
329
- .layout > * { min-width: 0; }
330
-
331
- .dashboard-panel {
332
- grid-area: dashboard;
333
- display: none;
334
- min-height: calc(100vh - 134px);
335
- padding: 0;
336
- border: 0;
337
- border-radius: 0;
338
- background: transparent;
339
- box-shadow: none;
340
- overflow: visible;
341
- }
342
-
343
- body.viewer-section-overview .dashboard-panel { display: block; }
344
- body.viewer-section-overview .graph-panel { display: none; }
345
- body.viewer-section-overview .workspace-shell { display: none; }
346
- body.viewer-section-graph .dashboard-panel { display: none; }
347
- body.viewer-page-overview .layout { grid-template-areas: "dashboard"; }
348
- body.viewer-page-graph .layout {
349
- grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
350
- grid-template-areas: "graph workspace";
351
- align-items: stretch;
352
- }
353
- body.viewer-page-memory .layout,
354
- body.viewer-page-owners .layout,
355
- body.viewer-page-intel .layout,
356
- body.viewer-page-review .layout,
357
- body.viewer-page-data .layout {
358
- grid-template-areas: "workspace";
359
- }
360
- body.viewer-page-memory .graph-panel,
361
- body.viewer-page-owners .graph-panel,
362
- body.viewer-page-intel .graph-panel,
363
- body.viewer-page-review .graph-panel,
364
- body.viewer-page-data .graph-panel {
365
- display: none;
366
- }
367
-
368
- .dashboard-hero {
369
- display: grid;
370
- grid-template-columns: minmax(0, 1fr) auto;
371
- gap: 20px;
372
- align-items: start;
373
- margin-bottom: 18px;
374
- padding: 24px;
375
- border: 1px solid rgba(65, 255, 143, 0.12);
376
- border-radius: 14px;
377
- background: linear-gradient(135deg, rgba(13, 25, 19, 0.94), rgba(8, 17, 13, 0.72));
378
- }
379
- .dashboard-kicker {
380
- display: inline-flex;
381
- margin-bottom: 8px;
382
- color: var(--terminal-dim);
383
- font-size: 11px;
384
- font-weight: 820;
385
- text-transform: uppercase;
386
- }
387
- .dashboard-hero h2 {
388
- max-width: 880px;
389
- color: var(--text);
390
- font-size: clamp(28px, 3.6vw, 48px);
391
- line-height: 1.04;
392
- text-transform: none;
393
- letter-spacing: 0;
394
- }
395
- .dashboard-hero p {
396
- max-width: 760px;
397
- margin-top: 10px;
398
- color: var(--muted);
399
- font-size: 14px;
400
- }
401
- .dashboard-actions {
402
- display: flex;
403
- flex-wrap: wrap;
404
- justify-content: flex-end;
405
- gap: 8px;
406
- }
407
- .dashboard-actions button,
408
- .dashboard-actions a,
409
- .dashboard-card button,
410
- .dashboard-card a {
411
- display: inline-flex;
412
- align-items: center;
413
- justify-content: center;
414
- min-height: 32px;
415
- padding: 0 13px;
416
- border: 1px solid rgba(65, 255, 143, 0.22);
417
- border-radius: 4px;
418
- border-color: rgba(65, 255, 143, 0.22);
419
- background: rgba(65, 255, 143, 0.08);
420
- box-shadow: none;
421
- color: var(--terminal-strong);
422
- font-weight: 780;
423
- text-decoration: none;
424
- white-space: nowrap;
425
- }
426
-
427
- .trust-hero {
428
- display: grid;
429
- grid-template-columns: minmax(170px, 250px) minmax(0, 1fr);
430
- gap: 30px;
431
- align-items: center;
432
- margin-bottom: 18px;
433
- padding: 24px 28px;
434
- border: 1px solid rgba(65, 255, 143, 0.24);
435
- border-radius: 14px;
436
- background:
437
- radial-gradient(circle at 0 0, rgba(65, 255, 143, 0.12), transparent 380px),
438
- linear-gradient(135deg, rgba(8, 17, 13, 0.96), rgba(10, 16, 22, 0.82));
439
- box-shadow: var(--shadow);
440
- }
441
- .trust-hero[data-status="warn"] { border-color: rgba(255, 209, 102, 0.34); }
442
- .trust-hero[data-status="alert"] { border-color: rgba(255, 107, 107, 0.38); }
443
- .trust-hero[data-status="idle"] { border-color: var(--line); }
444
- .trust-hero-eyebrow {
445
- display: block;
446
- color: var(--terminal-dim);
447
- font-size: 11px;
448
- font-weight: 800;
449
- letter-spacing: 0.14em;
450
- text-transform: uppercase;
451
- }
452
- .trust-hero-number { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; }
453
- .trust-hero-number strong {
454
- font-size: 60px;
455
- line-height: 1;
456
- color: var(--terminal-strong);
457
- text-shadow: 0 0 24px rgba(65, 255, 143, 0.38);
458
- }
459
- .trust-hero[data-status="warn"] .trust-hero-number strong { color: var(--warn); text-shadow: 0 0 24px rgba(255, 209, 102, 0.32); }
460
- .trust-hero[data-status="alert"] .trust-hero-number strong { color: var(--danger); text-shadow: 0 0 24px rgba(255, 107, 107, 0.32); }
461
- .trust-hero[data-status="idle"] .trust-hero-number strong { color: var(--muted); text-shadow: none; }
462
- .trust-hero-number span { font-size: 19px; color: var(--muted); }
463
- .trust-hero-note { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; max-width: 250px; }
464
- .trust-hero-note code { color: var(--accent); background: var(--accent-soft); padding: 1px 6px; border-radius: 5px; font-size: 11.5px; }
465
- .trust-hero-bars { display: grid; gap: 15px; }
466
- .trust-bar {
467
- display: grid;
468
- grid-template-columns: minmax(0, 1fr) 52px;
469
- grid-template-areas: "label value" "track value";
470
- align-items: center;
471
- gap: 4px 14px;
472
- }
473
- .trust-bar-label { grid-area: label; color: var(--text); font-size: 13px; }
474
- .trust-bar-track { grid-area: track; height: 8px; border-radius: 999px; background: rgba(215, 249, 223, 0.07); overflow: hidden; }
475
- .trust-bar-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--accent)); box-shadow: 0 0 12px rgba(65, 255, 143, 0.3); transition: width 0.5s ease; }
476
- .trust-bar-value { grid-area: value; text-align: right; color: var(--terminal-strong); font-size: 15px; font-weight: 800; }
477
- @media (max-width: 860px) {
478
- .trust-hero { grid-template-columns: 1fr; gap: 20px; }
479
- .trust-hero-note { max-width: none; }
480
- }
481
-
482
- .suppression-shelf {
483
- margin-bottom: 18px;
484
- padding: 20px 24px;
485
- border: 1px solid rgba(255, 209, 102, 0.34);
486
- border-radius: 14px;
487
- background:
488
- radial-gradient(circle at 0 0, rgba(255, 209, 102, 0.08), transparent 360px),
489
- linear-gradient(135deg, rgba(24, 18, 8, 0.92), rgba(16, 14, 10, 0.82));
490
- }
491
- .suppression-shelf[hidden] { display: none; }
492
- .suppression-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
493
- .suppression-eyebrow { display: block; color: var(--warn); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
494
- .suppression-head h2 { margin-top: 5px; color: var(--text); text-shadow: none; font-size: 17px; }
495
- .suppression-flag {
496
- flex: none;
497
- color: var(--warn);
498
- font-size: 11px;
499
- font-weight: 800;
500
- text-transform: uppercase;
501
- letter-spacing: 0.08em;
502
- padding: 5px 10px;
503
- border: 1px solid rgba(255, 209, 102, 0.4);
504
- border-radius: 999px;
505
- background: var(--warn-soft);
506
- }
507
- .suppression-sub { margin: 8px 0 14px; color: var(--muted); font-size: 12.5px; line-height: 1.45; max-width: 760px; }
508
- .suppression-list { display: grid; gap: 8px; }
509
- .suppression-item {
510
- display: grid;
511
- grid-template-columns: minmax(0, 1fr) auto;
512
- align-items: center;
513
- gap: 16px;
514
- padding: 11px 14px;
515
- border: 1px solid rgba(255, 209, 102, 0.16);
516
- border-radius: 9px;
517
- background: rgba(8, 17, 13, 0.5);
518
- }
519
- .suppression-item-title { color: var(--text); font-size: 13.5px; font-weight: 650; overflow-wrap: anywhere; }
520
- .suppression-item-reason { color: var(--warn); font-size: 12px; text-align: right; opacity: 0.92; }
521
- .suppression-more { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
522
- .suppression-more code { color: var(--accent); background: var(--accent-soft); padding: 1px 5px; border-radius: 5px; }
523
-
524
- .dashboard-stats {
525
- display: grid;
526
- grid-template-columns: repeat(3, minmax(0, 1fr));
527
- gap: 18px;
528
- margin-bottom: 22px;
529
- }
530
- .dashboard-stat {
531
- min-height: 120px;
532
- padding: 20px 22px;
533
- border: 1px solid rgba(65, 255, 143, 0.12);
534
- border-radius: 10px;
535
- background: rgba(8, 17, 13, 0.82);
536
- }
537
- .dashboard-stat strong {
538
- display: block;
539
- color: var(--terminal-strong);
540
- margin-top: 12px;
541
- font-size: 28px;
542
- line-height: 1.05;
543
- }
544
- .dashboard-stat span {
545
- display: block;
546
- color: var(--terminal-dim);
547
- font-size: 12px;
548
- font-weight: 760;
549
- text-transform: uppercase;
550
- }
551
- .dashboard-stat em {
552
- display: block;
553
- margin-top: 12px;
554
- color: var(--muted);
555
- font-size: 13px;
556
- font-style: normal;
557
- line-height: 1.35;
558
- }
559
- .dashboard-stat-ok { border-color: rgba(65, 255, 143, 0.22); }
560
- .dashboard-stat-warn { border-color: rgba(255, 209, 102, 0.28); }
561
- .dashboard-stat-warn strong { color: var(--warn); }
562
- .dashboard-stat-code strong { color: var(--code); }
563
-
564
- .repo-xray {
565
- margin-bottom: 22px;
566
- padding: 22px;
567
- border: 1px solid rgba(106, 215, 255, 0.20);
568
- border-radius: 10px;
569
- background:
570
- linear-gradient(135deg, rgba(7, 19, 18, 0.92), rgba(10, 14, 24, 0.76));
571
- }
572
-
573
- .repo-xray-head {
574
- display: flex;
575
- align-items: start;
576
- justify-content: space-between;
577
- gap: 18px;
578
- margin-bottom: 10px;
579
- }
580
-
581
- .repo-xray-head span {
582
- display: block;
583
- color: var(--code);
584
- font-size: 11px;
585
- font-weight: 820;
586
- text-transform: uppercase;
587
- }
588
-
589
- .repo-xray-head h2 {
590
- margin-top: 5px;
591
- color: var(--text);
592
- font-size: 24px;
593
- line-height: 1.12;
594
- }
595
-
596
- .repo-xray-head strong {
597
- flex: 0 0 auto;
598
- color: var(--terminal-strong);
599
- font-size: 12px;
600
- text-transform: uppercase;
601
- }
602
-
603
- .repo-xray > p {
604
- max-width: 900px;
605
- color: var(--muted);
606
- font-size: 13px;
607
- line-height: 1.45;
608
- }
609
-
610
- .repo-xray-layers {
611
- display: grid;
612
- grid-template-columns: repeat(3, minmax(0, 1fr));
613
- gap: 12px;
614
- margin-top: 16px;
615
- }
616
-
617
- .repo-xray-layer {
618
- min-height: 190px;
619
- padding: 14px;
620
- border: 1px solid rgba(65, 255, 143, 0.12);
621
- border-radius: 8px;
622
- background: rgba(6, 16, 11, 0.76);
623
- }
624
-
625
- .repo-xray-layer-head {
626
- display: flex;
627
- justify-content: space-between;
628
- gap: 10px;
629
- margin-bottom: 12px;
630
- }
631
-
632
- .repo-xray-layer-head strong {
633
- display: block;
634
- color: var(--terminal-strong);
635
- font-size: 13px;
636
- }
637
-
638
- .repo-xray-layer-head span {
639
- display: block;
640
- margin-top: 4px;
641
- color: var(--terminal-dim);
642
- font-size: 11px;
643
- line-height: 1.35;
644
- }
645
-
646
- .repo-xray-layer-head em {
647
- color: var(--code);
648
- font-size: 16px;
649
- font-style: normal;
650
- font-weight: 820;
651
- }
652
-
653
- .repo-xray-items {
654
- display: grid;
655
- gap: 8px;
656
- }
657
-
658
- .repo-xray-item {
659
- width: 100%;
660
- min-width: 0;
661
- display: grid;
662
- align-items: stretch;
663
- justify-content: stretch;
664
- gap: 8px;
665
- padding: 10px;
666
- border: 1px solid rgba(65, 255, 143, 0.10);
667
- border-radius: 6px;
668
- background: rgba(1, 8, 6, 0.56);
669
- color: var(--muted);
670
- text-align: left;
671
- white-space: normal;
672
- }
673
-
674
- .repo-xray-item span { min-width: 0; }
675
-
676
- .repo-xray-item strong {
677
- display: block;
678
- color: var(--text);
679
- font-size: 12px;
680
- overflow-wrap: anywhere;
681
- }
682
-
683
- .repo-xray-item em {
684
- display: block;
685
- margin-top: 3px;
686
- color: var(--terminal-dim);
687
- font-size: 10px;
688
- font-style: normal;
689
- line-height: 1.35;
690
- overflow-wrap: anywhere;
691
- }
692
-
693
- .repo-xray-item i {
694
- display: block;
695
- height: 4px;
696
- border-radius: 999px;
697
- background: var(--terminal-strong);
698
- }
699
-
700
- .repo-xray-item-watch i { background: var(--warn); }
701
- .repo-xray-item-risk i { background: var(--danger); }
702
-
703
- .dashboard-charts {
704
- display: grid;
705
- grid-template-columns: repeat(3, minmax(0, 1fr));
706
- gap: 18px;
707
- margin-bottom: 22px;
708
- }
709
-
710
- .metric-card {
711
- min-height: 178px;
712
- padding: 18px;
713
- border: 1px solid rgba(65, 255, 143, 0.13);
714
- border-radius: 8px;
715
- background: rgba(6, 16, 11, 0.86);
716
- overflow: hidden;
717
- }
718
-
719
- .metric-card-ok { border-color: rgba(65, 255, 143, 0.24); }
720
- .metric-card-code { border-color: rgba(106, 215, 255, 0.24); }
721
- .metric-card-warn { border-color: rgba(255, 209, 102, 0.28); }
722
- .metric-card-danger { border-color: rgba(255, 91, 91, 0.28); }
723
-
724
- .metric-card-head {
725
- display: flex;
726
- justify-content: space-between;
727
- gap: 10px;
728
- color: var(--terminal-dim);
729
- font-size: 10px;
730
- font-weight: 820;
731
- text-transform: uppercase;
732
- }
733
-
734
- .metric-card-head strong {
735
- color: var(--terminal-strong);
736
- text-align: right;
737
- overflow-wrap: anywhere;
738
- }
739
-
740
- .metric-card-warn .metric-card-head strong { color: var(--warn); }
741
- .metric-card-danger .metric-card-head strong { color: var(--danger); }
742
-
743
- .metric-visual {
744
- display: grid;
745
- grid-template-columns: 72px minmax(0, 1fr);
746
- gap: 12px;
747
- align-items: center;
748
- margin-top: 12px;
749
- }
750
-
751
- .metric-donut {
752
- --value: 0;
753
- width: 70px;
754
- height: 70px;
755
- display: grid;
756
- place-items: center;
757
- border-radius: 50%;
758
- background:
759
- radial-gradient(circle at center, #06100b 0 58%, transparent 59%),
760
- conic-gradient(var(--terminal-strong) calc(var(--value) * 1%), rgba(65, 255, 143, 0.12) 0);
761
- }
762
-
763
- .metric-card-warn .metric-donut {
764
- background:
765
- radial-gradient(circle at center, #06100b 0 58%, transparent 59%),
766
- conic-gradient(var(--warn) calc(var(--value) * 1%), rgba(255, 209, 102, 0.12) 0);
767
- }
768
-
769
- .metric-donut span {
770
- color: var(--text);
771
- font-size: 13px;
772
- font-weight: 840;
773
- }
774
-
775
- .metric-visual p,
776
- .metric-card em {
777
- margin: 0;
778
- color: var(--muted);
779
- font-size: 11px;
780
- font-style: normal;
781
- line-height: 1.4;
782
- }
783
-
784
- .metric-card em {
785
- display: block;
786
- margin-top: 10px;
787
- color: var(--terminal-dim);
788
- }
789
-
790
- .metric-bars {
791
- display: grid;
792
- gap: 9px;
793
- margin-top: 12px;
794
- }
795
-
796
- .metric-bar {
797
- display: grid;
798
- grid-template-columns: minmax(0, 1fr) auto;
799
- gap: 8px;
800
- color: var(--muted);
801
- font-size: 11px;
802
- }
803
-
804
- .metric-bar strong {
805
- color: var(--text);
806
- font-size: 11px;
807
- overflow-wrap: anywhere;
808
- }
809
-
810
- .metric-bar i {
811
- grid-column: 1 / -1;
812
- display: block;
813
- height: 5px;
814
- border-radius: 999px;
815
- background: var(--terminal-strong);
816
- }
817
-
818
- .metric-bar-warn i { background: var(--warn); }
819
- .metric-bar-danger i { background: var(--danger); }
820
-
821
- .dashboard-grid {
822
- display: grid;
823
- grid-template-columns: repeat(3, minmax(0, 1fr));
824
- gap: 18px;
825
- }
826
- .dashboard-card {
827
- min-height: 238px;
828
- display: flex;
829
- flex-direction: column;
830
- gap: 13px;
831
- padding: 22px;
832
- border: 1px solid rgba(65, 255, 143, 0.12);
833
- border-radius: 10px;
834
- background: rgba(8, 17, 13, 0.78);
835
- }
836
- .dashboard-card-head {
837
- display: flex;
838
- align-items: center;
839
- justify-content: space-between;
840
- gap: 10px;
841
- color: var(--terminal-dim);
842
- font-size: 11px;
843
- font-weight: 820;
844
- text-transform: uppercase;
845
- }
846
- .dashboard-card-head strong {
847
- color: var(--code);
848
- font-size: 10px;
849
- }
850
- .dashboard-card h3 {
851
- color: var(--terminal);
852
- font-size: 19px;
853
- line-height: 1.2;
854
- text-shadow: 0 0 9px rgba(65, 255, 143, 0.16);
855
- }
856
- .dashboard-card p {
857
- color: var(--muted);
858
- font-size: 12px;
859
- }
860
- .dashboard-card ul {
861
- flex: 1;
862
- display: grid;
863
- align-content: start;
864
- gap: 7px;
865
- margin: 0;
866
- padding: 0;
867
- list-style: none;
868
- }
869
- .dashboard-card li {
870
- display: flex;
871
- justify-content: space-between;
872
- gap: 10px;
873
- padding-top: 9px;
874
- border-top: 1px solid rgba(65, 255, 143, 0.10);
875
- color: var(--muted);
876
- font-size: 12px;
877
- }
878
- .dashboard-card li strong {
879
- color: var(--terminal);
880
- overflow-wrap: anywhere;
881
- }
882
- .dashboard-card li span {
883
- color: var(--terminal-dim);
884
- text-align: right;
885
- overflow-wrap: anywhere;
886
- }
887
-
888
- #dashboardReview {
889
- display: none;
890
- }
891
-
892
- .workspace-shell {
893
- grid-area: workspace;
894
- position: relative;
895
- z-index: 1;
896
- width: 100%;
897
- min-height: calc(100vh - 134px);
898
- display: grid;
899
- grid-template-rows: minmax(0, 1fr);
900
- gap: 14px;
901
- opacity: 1;
902
- pointer-events: auto;
903
- transform: none;
904
- transition: none;
905
- }
906
-
907
- .workspace-body {
908
- min-height: 0;
909
- height: 100%;
910
- display: grid;
911
- gap: 14px;
912
- }
913
-
914
- .workspace-body > * {
915
- grid-area: auto;
916
- min-height: 0;
917
- display: none;
918
- }
919
-
920
- .control-panel, .graph-panel, .details-panel, .graph-insights-panel, .table-panel, .review-panel, .proof-panel, .intelligence-panel, .memory-panel, .owners-panel {
921
- border: 1px solid var(--line);
922
- border-radius: 6px;
923
- background: rgba(8, 17, 13, 0.94);
924
- box-shadow: var(--shadow);
925
- }
926
-
927
- .control-panel,
928
- .graph-panel,
929
- .memory-panel {
930
- border-color: rgba(65, 255, 143, 0.22);
931
- box-shadow: var(--shadow), 0 0 34px rgba(65, 255, 143, 0.055);
932
- }
933
-
934
- .control-panel {
935
- min-height: 0;
936
- overflow: auto;
937
- padding: 12px;
938
- }
939
-
940
- .graph-insights-panel {
941
- min-height: 0;
942
- overflow: hidden;
943
- padding: 0;
944
- }
945
-
946
- .graph-insights {
947
- height: auto;
948
- max-height: 360px;
949
- overflow: auto;
950
- display: grid;
951
- grid-template-columns: repeat(2, minmax(0, 1fr));
952
- gap: 8px;
953
- padding: 0 10px 12px;
954
- }
955
-
956
- .journey-actions {
957
- display: grid;
958
- gap: 8px;
959
- margin: 10px 0 0;
960
- }
961
-
962
- .journey-actions button,
963
- .advanced-controls summary {
964
- width: 100%;
965
- min-height: 34px;
966
- border: 1px solid rgba(65, 255, 143, 0.20);
967
- border-radius: 4px;
968
- background: rgba(65, 255, 143, 0.055);
969
- color: var(--terminal-strong);
970
- font-size: 12px;
971
- font-weight: 760;
972
- text-align: left;
973
- }
974
-
975
- .journey-actions button {
976
- padding: 0 10px;
977
- box-shadow: none;
978
- }
979
-
980
- .journey-actions button.active,
981
- .graph-action-card.active {
982
- border-color: rgba(65, 255, 143, 0.70);
983
- background: rgba(65, 255, 143, 0.12);
984
- }
985
-
986
- .advanced-controls {
987
- margin-top: 12px;
988
- }
989
-
990
- .advanced-controls summary {
991
- display: flex;
992
- align-items: center;
993
- cursor: pointer;
994
- padding: 0 10px;
995
- }
996
-
997
- .advanced-controls label,
998
- .advanced-controls .toggle-control {
999
- margin-top: 10px;
1000
- }
1001
-
1002
- .graph-action-card p {
1003
- margin: 10px 0;
1004
- color: var(--muted);
1005
- font-size: 11px;
1006
- line-height: 1.45;
1007
- }
1008
-
1009
- .graph-action-card button {
1010
- width: 100%;
1011
- min-height: 30px;
1012
- margin-top: 10px;
1013
- box-shadow: none;
1014
- }
1015
-
1016
- .graph-insights .metric-card {
1017
- min-height: 118px;
1018
- padding: 11px;
1019
- }
1020
-
1021
- .graph-insights .metric-visual {
1022
- grid-template-columns: 56px minmax(0, 1fr);
1023
- gap: 10px;
1024
- }
1025
-
1026
- .graph-insights .metric-donut {
1027
- width: 54px;
1028
- height: 54px;
1029
- }
1030
-
1031
- .path-insight-card p {
1032
- margin: 12px 0 0;
1033
- color: var(--muted);
1034
- font-size: 11px;
1035
- line-height: 1.45;
1036
- }
1037
-
1038
- .path-suggestion {
1039
- margin-top: 10px;
1040
- color: var(--terminal-dim);
1041
- font-size: 11px;
1042
- }
1043
-
1044
- .path-suggestion-button {
1045
- width: 100%;
1046
- display: grid;
1047
- gap: 4px;
1048
- padding: 9px;
1049
- border-color: rgba(106, 215, 255, 0.24);
1050
- background: rgba(106, 215, 255, 0.06);
1051
- box-shadow: none;
1052
- text-align: left;
1053
- white-space: normal;
1054
- }
1055
-
1056
- .path-suggestion-button strong,
1057
- .path-suggestion-button span {
1058
- overflow-wrap: anywhere;
1059
- }
1060
-
1061
- .path-suggestion-button strong { color: var(--code); }
1062
- .path-suggestion-button span { color: var(--terminal-dim); font-size: 11px; }
1063
-
1064
- body.viewer-page-graph .workspace-body {
1065
- display: block;
1066
- }
1067
- body.viewer-page-graph .control-panel,
1068
- body.viewer-page-graph .graph-insights-panel { display: none; }
1069
- body.viewer-page-graph .control-panel { display: block; }
1070
- body.viewer-page-graph .details-panel { display: flex; }
1071
- body.viewer-page-graph:not(.has-selection) .details-panel { display: none; }
1072
- body.viewer-page-graph .workspace-shell {
1073
- min-height: 0;
1074
- height: calc(100vh - 176px);
1075
- max-height: calc(100vh - 176px);
1076
- overflow: auto;
1077
- overscroll-behavior: contain;
1078
- }
1079
- body.viewer-page-graph .metrics-grid { display: none; }
1080
- body.viewer-page-graph .control-panel,
1081
- body.viewer-page-graph .details-panel { margin-bottom: 16px; }
1082
- body.viewer-page-graph .graph-panel {
1083
- min-height: 0;
1084
- height: calc(100vh - 176px);
1085
- }
1086
- body.viewer-page-graph .graph-canvas-wrap,
1087
- body.viewer-page-graph #graphCanvas,
1088
- body.viewer-page-graph .three-graph,
1089
- body.viewer-page-graph #graphSvg {
1090
- min-height: 0;
1091
- }
1092
- body.viewer-page-review .workspace-body {
1093
- grid-template-columns: minmax(0, 1fr);
1094
- align-items: stretch;
1095
- }
1096
- body.viewer-page-review .review-panel {
1097
- display: block;
1098
- }
1099
- body.viewer-page-review .proof-panel { display: none; }
1100
- body.viewer-page-owners .workspace-body,
1101
- body.viewer-page-intel .workspace-body { grid-template-columns: minmax(0, 1fr); }
1102
- body.viewer-page-memory .workspace-body {
1103
- grid-template-columns: minmax(0, 1fr);
1104
- align-items: stretch;
1105
- height: auto;
1106
- }
1107
- body.viewer-page-memory.has-selection .workspace-body {
1108
- grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
1109
- }
1110
- body.viewer-page-memory .memory-panel,
1111
- body.viewer-page-owners .owners-panel,
1112
- body.viewer-page-intel .intelligence-panel { display: block; }
1113
- body.viewer-page-memory .memory-panel {
1114
- order: 0;
1115
- min-height: 0;
1116
- }
1117
- body.viewer-page-memory .details-panel { order: 1; display: none; }
1118
- body.viewer-page-memory.has-selection .details-panel {
1119
- display: flex;
1120
- max-height: calc(100vh - 176px);
1121
- min-height: 0;
1122
- position: sticky;
1123
- top: 146px;
1124
- }
1125
- body.viewer-page-data .workspace-body {
1126
- grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(300px, 360px);
1127
- align-items: stretch;
1128
- }
1129
- body.viewer-page-data .entities-panel,
1130
- body.viewer-page-data .edges-panel { display: block; }
1131
- body.viewer-page-data .details-panel {
1132
- display: flex;
1133
- max-height: calc(100vh - 176px);
1134
- }
1135
-
1136
- body.viewer-page-memory .workspace-shell,
1137
- body.viewer-page-intel .workspace-shell,
1138
- body.viewer-page-owners .workspace-shell,
1139
- body.viewer-page-review .workspace-shell,
1140
- body.viewer-page-data .workspace-shell {
1141
- min-height: calc(100vh - 176px);
1142
- height: auto;
1143
- max-height: none;
1144
- overflow: visible;
1145
- overscroll-behavior: auto;
1146
- }
1147
-
1148
- .workspace-shell .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
1149
-
1150
- @media (min-width: 1121px) {
1151
- body.viewer-page-graph .control-panel {
1152
- display: block;
1153
- }
1154
- .control-panel label, .control-panel button { margin-top: 0; }
1155
- }
1156
-
1157
- .control-panel label { display: block; margin-top: 12px; }
1158
- .control-panel .toggle-control {
1159
- display: flex;
1160
- align-items: center;
1161
- gap: 9px;
1162
- min-height: 38px;
1163
- padding: 0 10px;
1164
- border: 1px solid var(--line);
1165
- border-radius: 4px;
1166
- background: #030604;
1167
- }
1168
- .control-panel .toggle-control input {
1169
- width: 15px;
1170
- min-height: 15px;
1171
- accent-color: var(--terminal-strong);
1172
- }
1173
- .control-panel .toggle-control span {
1174
- margin: 0;
1175
- color: var(--terminal-dim);
1176
- line-height: 1.2;
1177
- }
1178
- label span {
1179
- display: block;
1180
- margin-bottom: 6px;
1181
- color: var(--terminal-dim);
1182
- font-size: 11px;
1183
- font-weight: 760;
1184
- text-transform: uppercase;
1185
- }
1186
-
1187
- input, select {
1188
- width: 100%;
1189
- min-height: 38px;
1190
- border: 1px solid var(--line);
1191
- border-radius: 4px;
1192
- padding: 0 10px;
1193
- background: #030604;
1194
- color: var(--text);
1195
- }
1196
- input::placeholder { color: #4e7458; }
1197
- input:focus, select:focus, button:focus, .file-picker:focus-within {
1198
- outline: 2px solid rgba(65, 255, 143, 0.35);
1199
- outline-offset: 1px;
1200
- }
1201
- .control-panel button { width: 100%; margin-top: 12px; }
1202
- .journey-actions button,
1203
- .advanced-controls summary,
1204
- .graph-action-card button { margin-top: 0; }
1205
-
1206
- .path-finder {
1207
- display: grid;
1208
- gap: 8px;
1209
- margin: 0 0 2px;
1210
- padding: 10px;
1211
- border: 1px solid rgba(106, 215, 255, 0.26);
1212
- border-radius: 4px;
1213
- background: rgba(5, 16, 18, 0.58);
1214
- }
1215
-
1216
- .inspector-path-finder {
1217
- display: none !important;
1218
- }
1219
- .path-finder-header {
1220
- display: flex;
1221
- align-items: center;
1222
- justify-content: space-between;
1223
- gap: 10px;
1224
- }
1225
- .path-finder-header span {
1226
- margin: 0;
1227
- color: var(--code);
1228
- font-size: 11px;
1229
- font-weight: 820;
1230
- letter-spacing: 0.06em;
1231
- text-transform: uppercase;
1232
- }
1233
- .path-finder-header button {
1234
- width: auto;
1235
- min-height: 26px;
1236
- padding: 0 9px;
1237
- border-color: var(--line);
1238
- color: var(--terminal-dim);
1239
- font-size: 10px;
1240
- }
1241
- .path-finder-inputs {
1242
- display: grid;
1243
- grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 92px;
1244
- gap: 8px;
1245
- }
1246
- .path-finder-inputs input,
1247
- .path-finder-inputs button {
1248
- margin: 0;
1249
- }
1250
- .path-status {
1251
- color: var(--terminal-dim);
1252
- font-size: 11px;
1253
- overflow-wrap: anywhere;
1254
- }
1255
- .path-status.ok { color: var(--terminal-strong); }
1256
- .path-status.warn { color: var(--warn); }
1257
- .path-result {
1258
- display: none;
1259
- max-height: 138px;
1260
- overflow: auto;
1261
- padding-right: 2px;
1262
- }
1263
- .path-result.visible {
1264
- display: grid;
1265
- gap: 6px;
1266
- }
1267
- .path-step {
1268
- width: 100%;
1269
- min-height: 0;
1270
- display: grid;
1271
- gap: 3px;
1272
- margin: 0;
1273
- padding: 7px 8px;
1274
- border-color: rgba(106, 215, 255, 0.24);
1275
- background: rgba(106, 215, 255, 0.045);
1276
- color: var(--text);
1277
- text-align: left;
1278
- white-space: normal;
1279
- box-shadow: none;
1280
- }
1281
- .path-step:hover {
1282
- border-color: var(--code);
1283
- background: rgba(106, 215, 255, 0.085);
1284
- }
1285
- .path-step strong {
1286
- color: var(--code);
1287
- font-size: 11px;
1288
- overflow-wrap: anywhere;
1289
- }
1290
- .path-step span {
1291
- margin: 0;
1292
- color: var(--terminal-dim);
1293
- font-size: 10px;
1294
- font-weight: 740;
1295
- overflow-wrap: anywhere;
1296
- text-transform: none;
1297
- }
1298
-
1299
- .panel-heading {
1300
- display: flex;
1301
- align-items: center;
1302
- justify-content: space-between;
1303
- gap: 10px;
1304
- padding: 11px 12px 0;
1305
- margin-bottom: 10px;
1306
- }
1307
- .panel-heading.compact { padding: 0; margin-bottom: 12px; }
1308
- .panel-heading span, #workspaceMode, #selectionStatus {
1309
- color: var(--terminal-dim);
1310
- font-size: 11px;
1311
- font-variant-numeric: tabular-nums;
1312
- }
1313
- .panel-heading h2 {
1314
- color: var(--terminal-strong);
1315
- text-shadow: 0 0 10px rgba(65, 255, 143, 0.28);
1316
- }
1317
-
1318
- .metrics-grid {
1319
- display: grid;
1320
- grid-template-columns: repeat(6, minmax(0, 1fr));
1321
- gap: 8px;
1322
- margin-bottom: 12px;
1323
- }
1324
- .metric {
1325
- min-height: 58px;
1326
- padding: 9px;
1327
- border: 1px solid var(--line);
1328
- border-radius: 4px;
1329
- background: #06100b;
1330
- }
1331
- .metric strong {
1332
- display: block;
1333
- color: var(--terminal-strong);
1334
- font-size: 17px;
1335
- line-height: 1.1;
1336
- overflow-wrap: anywhere;
1337
- }
1338
- .metric span {
1339
- display: block;
1340
- margin-top: 5px;
1341
- color: var(--terminal-dim);
1342
- font-size: 10px;
1343
- font-weight: 760;
1344
- text-transform: uppercase;
1345
- }
1346
-
1347
- .legend {
1348
- display: flex;
1349
- flex-wrap: wrap;
1350
- gap: 12px;
1351
- margin-top: 12px;
1352
- padding-top: 12px;
1353
- border-top: 1px solid var(--line);
1354
- color: var(--muted);
1355
- font-size: 11px;
1356
- font-weight: 720;
1357
- }
1358
- .legend span { display: flex; align-items: center; gap: 8px; }
1359
- .dot { width: 12px; height: 8px; border-radius: 2px; display: inline-block; }
1360
- .memory-dot { background: var(--memory); }
1361
- .code-dot { background: var(--code); }
1362
- .line { width: 24px; height: 2px; display: inline-block; background: var(--edge); }
1363
-
1364
- .graph-panel {
1365
- grid-area: graph;
1366
- position: relative;
1367
- min-height: 640px;
1368
- overflow: hidden;
1369
- display: grid;
1370
- grid-template-rows: auto minmax(0, 1fr);
1371
- box-shadow: var(--shadow), 0 0 0 1px rgba(65, 255, 143, 0.08), 0 0 58px rgba(65, 255, 143, 0.11);
1372
- }
1373
-
1374
- .graph-toolbar {
1375
- display: flex;
1376
- justify-content: space-between;
1377
- align-items: center;
1378
- gap: 12px;
1379
- padding: 11px 12px;
1380
- border-bottom: 1px solid var(--line);
1381
- background:
1382
- radial-gradient(circle at 8% 0, rgba(65, 255, 143, 0.14), transparent 42%),
1383
- linear-gradient(180deg, #0b1710, #07110c);
1384
- }
1385
- .graph-toolbar p { color: var(--terminal-dim); font-size: 11px; margin-top: 3px; }
1386
- .graph-actions { display: inline-flex; align-items: center; gap: 6px; }
1387
- .graph-actions button { min-width: 40px; min-height: 34px; padding: 0 10px; }
1388
- .interaction-hint {
1389
- display: inline-flex;
1390
- align-items: center;
1391
- padding-right: 6px;
1392
- color: var(--terminal-dim);
1393
- font-size: 11px;
1394
- font-weight: 700;
1395
- white-space: nowrap;
1396
- }
1397
-
1398
- .graph-canvas-wrap {
1399
- position: relative;
1400
- min-height: 600px;
1401
- width: 100%;
1402
- height: 100%;
1403
- overflow: hidden;
1404
- background:
1405
- radial-gradient(circle at 52% 46%, rgba(65, 255, 143, 0.13), transparent 44%),
1406
- radial-gradient(circle at 18% 26%, rgba(65, 255, 143, 0.09), transparent 32%),
1407
- #020503;
1408
- box-shadow: inset 0 0 80px rgba(65, 255, 143, 0.09);
1409
- }
1410
-
1411
- #graphCanvas, .three-graph {
1412
- width: 100%;
1413
- height: 100%;
1414
- min-height: 600px;
1415
- display: block;
1416
- }
1417
-
1418
- #graphCanvas {
1419
- cursor: grab;
1420
- }
1421
-
1422
- #graphCanvas:active { cursor: grabbing; }
1423
-
1424
- .three-graph {
1425
- position: absolute;
1426
- inset: 0;
1427
- display: none;
1428
- cursor: grab;
1429
- background:
1430
- linear-gradient(rgba(65, 255, 143, 0.035) 1px, transparent 1px),
1431
- linear-gradient(90deg, rgba(65, 255, 143, 0.035) 1px, transparent 1px),
1432
- radial-gradient(circle at 52% 46%, rgba(106, 215, 255, 0.10), transparent 46%),
1433
- #020503;
1434
- background-size: 34px 34px, 34px 34px, 100% 100%, 100% 100%;
1435
- }
1436
- .three-graph canvas {
1437
- display: block;
1438
- width: 100% !important;
1439
- height: 100% !important;
1440
- }
1441
- .three-graph:active { cursor: grabbing; }
1442
- .three-status {
1443
- position: absolute;
1444
- inset: 0;
1445
- display: grid;
1446
- place-items: center;
1447
- color: var(--terminal-dim);
1448
- font-weight: 780;
1449
- }
1450
- .graph-canvas-wrap.mode-3d #graphCanvas { display: none; }
1451
- .graph-canvas-wrap.mode-3d .three-graph { display: block; }
1452
- .graph-canvas-wrap.mode-2d .three-graph { display: none; }
1453
-
1454
- #graphSvg {
1455
- width: 100%;
1456
- height: 100%;
1457
- min-height: 600px;
1458
- display: block;
1459
- cursor: grab;
1460
- background:
1461
- linear-gradient(rgba(65, 255, 143, 0.035) 1px, transparent 1px),
1462
- linear-gradient(90deg, rgba(65, 255, 143, 0.035) 1px, transparent 1px),
1463
- radial-gradient(circle at 52% 46%, rgba(65, 255, 143, 0.10), transparent 44%),
1464
- #020503;
1465
- background-size: 28px 28px, 28px 28px, 100% 100%, 100% 100%;
1466
- }
1467
- #graphSvg.fallback-graph { display: none; }
1468
- #graphSvg.dragging { cursor: grabbing; }
1469
- #arrow path { fill: var(--edge); }
1470
- .graph-tooltip {
1471
- position: absolute;
1472
- z-index: 5;
1473
- display: none;
1474
- max-width: min(320px, calc(100% - 28px));
1475
- padding: 10px 12px;
1476
- border: 1px solid rgba(65, 255, 143, 0.28);
1477
- border-radius: 4px;
1478
- background: rgba(2, 5, 3, 0.94);
1479
- box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(65, 255, 143, 0.06);
1480
- backdrop-filter: blur(12px);
1481
- color: var(--text);
1482
- pointer-events: none;
1483
- }
1484
- .graph-tooltip.visible { display: block; }
1485
- .tt-name {
1486
- color: var(--terminal);
1487
- font-weight: 820;
1488
- overflow-wrap: anywhere;
1489
- }
1490
- .tt-type {
1491
- margin-top: 4px;
1492
- font-size: 10px;
1493
- font-weight: 800;
1494
- letter-spacing: 0.10em;
1495
- text-transform: uppercase;
1496
- }
1497
- .tt-summary {
1498
- margin-top: 7px;
1499
- color: var(--muted);
1500
- font-size: 11px;
1501
- overflow-wrap: anywhere;
1502
- }
1503
- .tt-conns {
1504
- margin-top: 7px;
1505
- padding-top: 7px;
1506
- border-top: 1px solid rgba(65, 255, 143, 0.16);
1507
- color: var(--terminal-dim);
1508
- font-size: 10px;
1509
- font-weight: 760;
1510
- }
1511
- .lane-label {
1512
- fill: rgba(185, 251, 192, 0.34);
1513
- font-size: 12px;
1514
- font-weight: 900;
1515
- letter-spacing: 0.16em;
1516
- pointer-events: none;
1517
- }
1518
-
1519
- .empty-state {
1520
- position: absolute;
1521
- inset: 54px 0 0;
1522
- display: grid;
1523
- place-content: center;
1524
- gap: 6px;
1525
- color: var(--muted);
1526
- text-align: center;
1527
- pointer-events: none;
1528
- }
1529
- .empty-state strong { color: var(--terminal); font-size: 18px; }
1530
- .empty-state.hidden { display: none; }
1531
-
1532
- .details-panel {
1533
- flex-direction: column;
1534
- height: 100%;
1535
- max-height: none;
1536
- min-height: 0;
1537
- overflow: hidden;
1538
- padding: 12px;
1539
- }
1540
- .details-empty { color: var(--terminal-dim); }
1541
- #selectionDetails {
1542
- flex: 1 1 auto;
1543
- min-height: 0;
1544
- max-height: min(52vh, 460px);
1545
- overflow: auto;
1546
- overscroll-behavior: contain;
1547
- padding-right: 2px;
1548
- }
1549
-
1550
- .inspector-path-finder {
1551
- flex: 0 0 auto;
1552
- margin-top: 12px;
1553
- }
1554
- body:not(.has-code-selection) .inspector-path-finder { display: none; }
1555
- .detail-title { margin-bottom: 8px; color: var(--text); font-weight: 780; font-size: 17px; overflow-wrap: anywhere; }
1556
- .detail-kind { margin-bottom: 10px; color: var(--terminal-strong); background: #07130d; }
1557
- .detail-row { padding: 9px 0; border-top: 1px solid var(--line); }
1558
- .detail-row dt { margin: 0 0 4px; color: var(--terminal-dim); font-size: 11px; font-weight: 760; text-transform: uppercase; }
1559
- .detail-row dd {
1560
- max-height: 150px;
1561
- margin: 0;
1562
- color: var(--text);
1563
- overflow: auto;
1564
- overflow-wrap: anywhere;
1565
- white-space: pre-wrap;
1566
- }
1567
- .detail-section {
1568
- margin-top: 12px;
1569
- padding-top: 12px;
1570
- border-top: 1px solid var(--line);
1571
- min-height: 0;
1572
- }
1573
- .detail-section-title {
1574
- margin-bottom: 8px;
1575
- color: var(--terminal-dim);
1576
- font-size: 11px;
1577
- font-weight: 800;
1578
- text-transform: uppercase;
1579
- }
1580
- .detail-section-list {
1581
- max-height: 260px;
1582
- overflow: auto;
1583
- overscroll-behavior: contain;
1584
- padding-right: 2px;
1585
- }
1586
- .detail-link {
1587
- width: 100%;
1588
- display: grid;
1589
- gap: 4px;
1590
- min-height: 0;
1591
- margin-top: 8px;
1592
- padding: 9px;
1593
- border-color: rgba(216, 255, 95, 0.28);
1594
- background: rgba(216, 255, 95, 0.045);
1595
- color: var(--text);
1596
- text-align: left;
1597
- white-space: normal;
1598
- box-shadow: none;
1599
- }
1600
- .detail-link:hover { background: rgba(216, 255, 95, 0.085); }
1601
- .detail-link-title {
1602
- color: var(--terminal);
1603
- font-weight: 820;
1604
- overflow-wrap: anywhere;
1605
- }
1606
- .detail-link-meta {
1607
- color: var(--warn);
1608
- font-size: 10px;
1609
- font-weight: 760;
1610
- text-transform: uppercase;
1611
- overflow-wrap: anywhere;
1612
- }
1613
- .detail-link-body {
1614
- display: -webkit-box;
1615
- -webkit-box-orient: vertical;
1616
- -webkit-line-clamp: 3;
1617
- color: var(--muted);
1618
- font-size: 11px;
1619
- overflow: hidden;
1620
- overflow-wrap: anywhere;
1621
- }
1622
- .detail-more {
1623
- margin-top: 9px;
1624
- color: var(--terminal-dim);
1625
- font-size: 11px;
1626
- }
1627
-
1628
- .table-panel { min-height: 0; overflow: hidden; }
1629
- .review-panel, .proof-panel, .intelligence-panel, .memory-panel, .owners-panel { min-height: 0; overflow: visible; }
1630
- body.viewer-page-memory .memory-panel,
1631
- body.viewer-page-review .review-panel,
1632
- body.viewer-page-data .table-panel {
1633
- display: flex;
1634
- flex-direction: column;
1635
- }
1636
- .list { height: calc(100% - 48px); overflow: auto; padding: 0 8px 10px; }
1637
- .review-list, .proof-list, .memory-list, .owners-list {
1638
- height: auto;
1639
- overflow: visible;
1640
- padding: 0 10px 12px;
1641
- }
1642
- .intelligence-list {
1643
- height: auto;
1644
- overflow: visible;
1645
- padding: 0 14px 16px;
1646
- display: grid;
1647
- grid-template-columns: repeat(3, minmax(0, 1fr));
1648
- gap: 16px;
1649
- align-content: start;
1650
- }
1651
- .intel-guide {
1652
- grid-column: 1 / -1;
1653
- display: grid;
1654
- grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
1655
- gap: 12px;
1656
- align-items: center;
1657
- padding: 12px 14px;
1658
- border: 1px solid rgba(65, 255, 143, 0.18);
1659
- border-radius: 8px;
1660
- background: rgba(65, 255, 143, 0.05);
1661
- }
1662
- .intel-guide strong {
1663
- color: var(--terminal-strong);
1664
- font-size: 13px;
1665
- }
1666
- .intel-guide span {
1667
- color: var(--terminal-dim);
1668
- font-size: 12px;
1669
- line-height: 1.45;
1670
- }
1671
- .intel-deep-grid {
1672
- grid-column: 1 / -1;
1673
- display: grid;
1674
- grid-template-columns: repeat(2, minmax(0, 1fr));
1675
- gap: 14px;
1676
- }
1677
-
1678
- .intel-deep-drawer {
1679
- grid-column: 1 / -1;
1680
- border: 1px solid rgba(65, 255, 143, 0.16);
1681
- border-radius: 8px;
1682
- background: rgba(4, 13, 8, 0.72);
1683
- overflow: hidden;
1684
- }
1685
-
1686
- .intel-deep-drawer summary {
1687
- min-height: 46px;
1688
- display: flex;
1689
- align-items: center;
1690
- justify-content: space-between;
1691
- gap: 12px;
1692
- padding: 0 14px;
1693
- color: var(--terminal-strong);
1694
- cursor: pointer;
1695
- }
1696
-
1697
- .intel-deep-drawer summary em {
1698
- color: var(--terminal-dim);
1699
- font-size: 12px;
1700
- font-style: normal;
1701
- }
1702
-
1703
- .intel-deep-drawer .intel-deep-grid {
1704
- padding: 14px;
1705
- }
1706
-
1707
- .proof-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
1708
- .memory-overview,
1709
- .owners-summary,
1710
- .review-overview,
1711
- .proof-overview {
1712
- display: grid;
1713
- grid-template-columns: repeat(3, minmax(0, 1fr));
1714
- gap: 8px;
1715
- padding: 0 10px 10px;
1716
- }
1717
-
1718
- .memory-overview,
1719
- .review-overview,
1720
- .proof-overview {
1721
- grid-template-columns: repeat(2, minmax(0, 1fr));
1722
- }
1723
-
1724
- body.viewer-page-memory .memory-overview {
1725
- display: none;
1726
- }
1727
-
1728
- body.viewer-page-memory .memory-list {
1729
- height: auto;
1730
- min-height: 280px;
1731
- flex: 0 0 auto;
1732
- overflow: visible;
1733
- }
1734
-
1735
- .memory-governance {
1736
- flex: 0 0 auto;
1737
- min-height: 0;
1738
- margin: 0 10px 12px;
1739
- border: 1px solid rgba(65, 255, 143, 0.18);
1740
- border-radius: 8px;
1741
- background: rgba(4, 13, 8, 0.76);
1742
- overflow: hidden;
1743
- }
1744
-
1745
- .memory-governance[open] {
1746
- max-height: min(56vh, 620px);
1747
- overflow: auto;
1748
- overscroll-behavior: contain;
1749
- }
1750
-
1751
- .memory-governance summary {
1752
- min-height: 40px;
1753
- display: flex;
1754
- align-items: center;
1755
- justify-content: space-between;
1756
- gap: 12px;
1757
- padding: 0 12px;
1758
- cursor: pointer;
1759
- color: var(--terminal-strong);
1760
- font-size: 12px;
1761
- font-weight: 800;
1762
- }
1763
-
1764
- .memory-governance summary em {
1765
- color: var(--terminal-dim);
1766
- font-size: 10px;
1767
- font-style: normal;
1768
- font-weight: 760;
1769
- text-transform: uppercase;
1770
- }
1771
-
1772
- .memory-governance > section {
1773
- margin: 10px;
1774
- }
1775
-
1776
- .memory-lifecycle {
1777
- margin: 0 10px 12px;
1778
- padding: 12px;
1779
- border: 1px solid rgba(65, 255, 143, 0.18);
1780
- border-radius: 8px;
1781
- background:
1782
- linear-gradient(180deg, rgba(65, 255, 143, 0.07), rgba(65, 255, 143, 0.025)),
1783
- rgba(5, 12, 8, 0.86);
1784
- box-shadow: inset 0 0 0 1px rgba(65, 255, 143, 0.05);
1785
- }
1786
-
1787
- .memory-review-actions {
1788
- margin: 0 10px 12px;
1789
- padding: 12px;
1790
- border: 1px solid rgba(65, 255, 143, 0.22);
1791
- border-radius: 8px;
1792
- background:
1793
- radial-gradient(circle at top right, rgba(65, 255, 143, 0.12), transparent 42%),
1794
- rgba(4, 13, 8, 0.88);
1795
- box-shadow: 0 0 26px rgba(65, 255, 143, 0.06), inset 0 0 0 1px rgba(65, 255, 143, 0.05);
1796
- }
1797
-
1798
- .memory-action-list {
1799
- display: grid;
1800
- grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
1801
- gap: 10px;
1802
- margin-top: 12px;
1803
- }
1804
-
1805
- .memory-action {
1806
- border: 1px solid rgba(65, 255, 143, 0.17);
1807
- border-radius: 8px;
1808
- background: rgba(2, 10, 6, 0.82);
1809
- padding: 12px;
1810
- transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
1811
- }
1812
-
1813
- .memory-action[role="button"] { cursor: pointer; }
1814
-
1815
- .memory-action[role="button"]:hover,
1816
- .memory-action[role="button"]:focus-visible {
1817
- border-color: rgba(65, 255, 143, 0.38);
1818
- box-shadow: 0 0 22px rgba(65, 255, 143, 0.12);
1819
- transform: translateY(-1px);
1820
- outline: none;
1821
- }
1822
-
1823
- .memory-action-warn { border-color: rgba(255, 209, 102, 0.24); }
1824
- .memory-action-ok { border-color: rgba(65, 255, 143, 0.26); }
1825
- .memory-action-info { border-color: rgba(106, 215, 255, 0.22); }
1826
-
1827
- .memory-action-head {
1828
- display: flex;
1829
- align-items: start;
1830
- justify-content: space-between;
1831
- gap: 10px;
1832
- }
1833
-
1834
- .memory-action-head span {
1835
- border: 1px solid rgba(65, 255, 143, 0.18);
1836
- border-radius: 999px;
1837
- color: var(--accent);
1838
- font-size: 10px;
1839
- font-weight: 800;
1840
- letter-spacing: 0;
1841
- padding: 3px 7px;
1842
- text-transform: uppercase;
1843
- white-space: nowrap;
1844
- }
1845
-
1846
- .memory-action-head strong {
1847
- color: var(--terminal-strong);
1848
- font-size: 12px;
1849
- line-height: 1.35;
1850
- text-align: right;
1851
- overflow-wrap: anywhere;
1852
- }
1853
-
1854
- .memory-action p,
1855
- .memory-action em {
1856
- display: block;
1857
- color: var(--muted);
1858
- font-size: 11px;
1859
- line-height: 1.45;
1860
- margin: 10px 0 0;
1861
- overflow-wrap: anywhere;
1862
- }
1863
-
1864
- .memory-action em {
1865
- color: var(--terminal-strong);
1866
- font-style: normal;
1867
- }
1868
-
1869
- .session-capture {
1870
- margin: 0 10px 12px;
1871
- padding: 12px;
1872
- border: 1px solid rgba(106, 215, 255, 0.18);
1873
- border-radius: 8px;
1874
- background:
1875
- linear-gradient(180deg, rgba(106, 215, 255, 0.07), rgba(65, 255, 143, 0.02)),
1876
- rgba(5, 12, 10, 0.86);
1877
- box-shadow: inset 0 0 0 1px rgba(106, 215, 255, 0.04);
1878
- }
1879
-
1880
- .session-capture-list {
1881
- display: grid;
1882
- grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
1883
- gap: 10px;
1884
- margin-top: 12px;
1885
- }
1886
-
1887
- .session-capture-card {
1888
- border: 1px solid rgba(106, 215, 255, 0.16);
1889
- border-radius: 8px;
1890
- background: rgba(3, 11, 10, 0.82);
1891
- padding: 12px;
1892
- }
1893
-
1894
- .session-capture-head {
1895
- display: flex;
1896
- align-items: flex-start;
1897
- justify-content: space-between;
1898
- gap: 10px;
1899
- }
1900
-
1901
- .session-capture-head strong {
1902
- display: block;
1903
- color: var(--terminal-strong);
1904
- font-size: 12px;
1905
- overflow-wrap: anywhere;
1906
- }
1907
-
1908
- .session-capture-head span,
1909
- .session-capture-card p {
1910
- color: var(--muted);
1911
- font-size: 11px;
1912
- line-height: 1.45;
1913
- }
1914
-
1915
- .session-capture-head em {
1916
- color: var(--accent);
1917
- font-size: 11px;
1918
- font-style: normal;
1919
- white-space: nowrap;
1920
- }
1921
-
1922
- .session-capture-meta {
1923
- display: flex;
1924
- flex-wrap: wrap;
1925
- gap: 6px;
1926
- margin-top: 10px;
1927
- }
1928
-
1929
- .session-capture-meta span {
1930
- border: 1px solid rgba(106, 215, 255, 0.16);
1931
- border-radius: 999px;
1932
- background: rgba(106, 215, 255, 0.05);
1933
- color: var(--muted);
1934
- font-size: 10px;
1935
- padding: 4px 6px;
1936
- overflow-wrap: anywhere;
1937
- }
1938
-
1939
- .lifecycle-head {
1940
- display: flex;
1941
- align-items: start;
1942
- justify-content: space-between;
1943
- gap: 12px;
1944
- margin-bottom: 10px;
1945
- }
1946
-
1947
- .lifecycle-head h3 {
1948
- margin: 0;
1949
- color: var(--terminal-strong);
1950
- font-size: 13px;
1951
- text-shadow: 0 0 12px rgba(65, 255, 143, 0.30);
1952
- }
1953
-
1954
- .lifecycle-head p {
1955
- margin-top: 3px;
1956
- color: var(--muted);
1957
- font-size: 11px;
1958
- }
1959
-
1960
- .lifecycle-head span {
1961
- min-width: max-content;
1962
- padding: 4px 8px;
1963
- border: 1px solid rgba(65, 255, 143, 0.22);
1964
- border-radius: 999px;
1965
- color: var(--terminal-strong);
1966
- font-size: 10px;
1967
- font-weight: 800;
1968
- }
1969
-
1970
- .lifecycle-summary {
1971
- display: grid;
1972
- grid-template-columns: repeat(3, minmax(0, 1fr));
1973
- gap: 8px;
1974
- margin-bottom: 10px;
1975
- }
1976
-
1977
- .lifecycle-step {
1978
- display: grid;
1979
- grid-template-columns: 24px minmax(0, 1fr) auto;
1980
- gap: 6px 8px;
1981
- align-items: center;
1982
- padding: 9px;
1983
- border: 1px solid rgba(65, 255, 143, 0.12);
1984
- border-radius: 6px;
1985
- background: rgba(8, 17, 13, 0.82);
1986
- }
1987
-
1988
- .lifecycle-step strong {
1989
- width: 24px;
1990
- height: 24px;
1991
- display: grid;
1992
- place-items: center;
1993
- border-radius: 50%;
1994
- background: rgba(65, 255, 143, 0.12);
1995
- color: var(--terminal-strong);
1996
- }
1997
-
1998
- .lifecycle-step span {
1999
- color: var(--terminal);
2000
- font-size: 11px;
2001
- font-weight: 820;
2002
- }
2003
-
2004
- .lifecycle-step em {
2005
- color: var(--code);
2006
- font-size: 12px;
2007
- font-style: normal;
2008
- font-weight: 820;
2009
- }
2010
-
2011
- .lifecycle-step p {
2012
- grid-column: 1 / -1;
2013
- color: var(--muted);
2014
- font-size: 10px;
2015
- line-height: 1.35;
2016
- }
2017
-
2018
- .lifecycle-list {
2019
- display: grid;
2020
- gap: 8px;
2021
- max-height: 360px;
2022
- overflow: auto;
2023
- padding-right: 2px;
2024
- }
2025
-
2026
- .lifecycle-card {
2027
- padding: 10px;
2028
- border: 1px solid rgba(65, 255, 143, 0.13);
2029
- border-radius: 7px;
2030
- background: rgba(8, 17, 13, 0.76);
2031
- }
2032
-
2033
- .lifecycle-card-head {
2034
- display: flex;
2035
- justify-content: space-between;
2036
- gap: 10px;
2037
- }
2038
-
2039
- .lifecycle-card-head strong {
2040
- display: block;
2041
- color: var(--terminal-strong);
2042
- font-size: 12px;
2043
- overflow-wrap: anywhere;
2044
- }
2045
-
2046
- .lifecycle-card-head span {
2047
- display: block;
2048
- margin-top: 2px;
2049
- color: var(--terminal-dim);
2050
- font-size: 10px;
2051
- }
2052
-
2053
- .lifecycle-card-head button {
2054
- min-height: 28px;
2055
- padding: 0 10px;
2056
- border: 1px solid rgba(65, 255, 143, 0.22);
2057
- border-radius: 4px;
2058
- background: rgba(65, 255, 143, 0.08);
2059
- color: var(--terminal-strong);
2060
- font-weight: 780;
2061
- }
2062
-
2063
- .lifecycle-card > p {
2064
- margin: 8px 0 10px;
2065
- color: var(--muted);
2066
- font-size: 11px;
2067
- line-height: 1.4;
2068
- }
2069
-
2070
- .lifecycle-flow {
2071
- display: grid;
2072
- grid-template-columns: repeat(4, minmax(0, 1fr));
2073
- gap: 7px;
2074
- }
2075
-
2076
- .lifecycle-cell {
2077
- min-height: 72px;
2078
- padding: 8px;
2079
- border: 1px solid rgba(65, 255, 143, 0.10);
2080
- border-radius: 5px;
2081
- background: rgba(5, 12, 8, 0.70);
2082
- }
2083
-
2084
- .lifecycle-cell span {
2085
- display: block;
2086
- margin-bottom: 5px;
2087
- color: var(--terminal-dim);
2088
- font-size: 9px;
2089
- font-weight: 850;
2090
- text-transform: uppercase;
2091
- }
2092
-
2093
- .lifecycle-cell strong {
2094
- display: block;
2095
- color: var(--text);
2096
- font-size: 10px;
2097
- line-height: 1.35;
2098
- overflow-wrap: anywhere;
2099
- }
2100
-
2101
- .memory-overview .metric-card,
2102
- .owners-summary .metric-card,
2103
- .review-overview .metric-card,
2104
- .proof-overview .metric-card {
2105
- min-height: 132px;
2106
- padding: 11px;
2107
- }
2108
-
2109
- .memory-overview .metric-visual,
2110
- .owners-summary .metric-visual,
2111
- .review-overview .metric-visual,
2112
- .proof-overview .metric-visual {
2113
- grid-template-columns: 58px minmax(0, 1fr);
2114
- gap: 10px;
2115
- }
2116
-
2117
- .memory-overview .metric-donut,
2118
- .owners-summary .metric-donut,
2119
- .review-overview .metric-donut,
2120
- .proof-overview .metric-donut {
2121
- width: 56px;
2122
- height: 56px;
2123
- }
2124
-
2125
- .memory-list {
2126
- display: grid;
2127
- gap: 12px;
2128
- align-content: start;
2129
- height: auto;
2130
- overflow: visible;
2131
- padding: 0 14px 16px;
2132
- }
2133
- .memory-hero {
2134
- margin: 0 10px 10px;
2135
- padding: 12px;
2136
- border: 1px solid rgba(65, 255, 143, 0.16);
2137
- border-radius: 8px;
2138
- background: rgba(65, 255, 143, 0.045);
2139
- }
2140
- .memory-hero strong {
2141
- display: block;
2142
- color: var(--terminal-strong);
2143
- font-size: 13px;
2144
- }
2145
- .memory-hero span {
2146
- display: block;
2147
- margin-top: 5px;
2148
- color: var(--terminal-dim);
2149
- font-size: 12px;
2150
- line-height: 1.4;
2151
- }
2152
- .memory-stats {
2153
- display: grid;
2154
- grid-template-columns: repeat(4, minmax(0, 1fr));
2155
- gap: 12px;
2156
- padding: 0 14px 14px;
2157
- }
2158
- .memory-stats div {
2159
- min-height: 72px;
2160
- padding: 12px;
2161
- border: 1px solid rgba(65, 255, 143, 0.12);
2162
- border-radius: 8px;
2163
- background: rgba(3, 8, 5, 0.74);
2164
- }
2165
- .memory-stats strong {
2166
- display: block;
2167
- color: var(--terminal-strong);
2168
- font-size: 18px;
2169
- }
2170
- .memory-stats span {
2171
- display: block;
2172
- margin-top: 4px;
2173
- color: var(--terminal-dim);
2174
- font-size: 10px;
2175
- font-weight: 760;
2176
- text-transform: uppercase;
2177
- }
2178
- .memory-toolbar {
2179
- display: grid;
2180
- grid-template-columns: minmax(0, 1fr) 150px;
2181
- gap: 12px;
2182
- padding: 0 14px 14px;
2183
- }
2184
-
2185
- .memory-row {
2186
- width: 100%;
2187
- display: grid;
2188
- grid-template-columns: minmax(0, 1fr);
2189
- gap: 8px;
2190
- align-items: start;
2191
- min-height: 96px;
2192
- padding: 16px;
2193
- border: 1px solid rgba(65, 255, 143, 0.12);
2194
- border-radius: 8px;
2195
- background: rgba(6, 16, 11, 0.88);
2196
- color: var(--text);
2197
- text-align: left;
2198
- white-space: normal;
2199
- cursor: pointer;
2200
- box-shadow: none;
2201
- }
2202
- .memory-row:hover,
2203
- .memory-row.selected,
2204
- .memory-row[aria-selected="true"] {
2205
- border-color: var(--terminal-strong);
2206
- background: rgba(65, 255, 143, 0.12);
2207
- box-shadow: 0 0 22px rgba(65, 255, 143, 0.14);
2208
- }
2209
- .memory-row-main {
2210
- display: flex;
2211
- justify-content: space-between;
2212
- gap: 10px;
2213
- }
2214
- .memory-row strong {
2215
- color: var(--terminal);
2216
- font-size: 14px;
2217
- text-shadow: 0 0 9px rgba(65, 255, 143, 0.14);
2218
- overflow-wrap: anywhere;
2219
- }
2220
- .memory-row-main em {
2221
- color: var(--memory);
2222
- font-size: 11px;
2223
- font-weight: 760;
2224
- font-style: normal;
2225
- white-space: nowrap;
2226
- }
2227
- .memory-row-meta,
2228
- .memory-row-target {
2229
- color: var(--muted);
2230
- font-size: 12px;
2231
- line-height: 1.35;
2232
- overflow-wrap: anywhere;
2233
- }
2234
- .memory-row-meta {
2235
- display: -webkit-box;
2236
- min-height: 30px;
2237
- overflow: hidden;
2238
- -webkit-box-orient: vertical;
2239
- -webkit-line-clamp: 2;
2240
- }
2241
- .memory-row-target { color: var(--terminal-dim); }
2242
-
2243
- .owners-list {
2244
- display: grid;
2245
- grid-template-columns: repeat(3, minmax(0, 1fr));
2246
- gap: 10px;
2247
- align-content: start;
2248
- height: auto;
2249
- overflow: visible;
2250
- padding: 0 10px 12px;
2251
- }
2252
- .owner-card {
2253
- min-height: 130px;
2254
- padding: 13px;
2255
- border: 1px solid rgba(65, 255, 143, 0.12);
2256
- border-radius: 10px;
2257
- background: rgba(6, 16, 11, 0.88);
2258
- }
2259
- .owner-head {
2260
- display: flex;
2261
- justify-content: space-between;
2262
- gap: 10px;
2263
- }
2264
- .owner-head strong {
2265
- color: var(--text);
2266
- overflow-wrap: anywhere;
2267
- }
2268
- .owner-head span,
2269
- .owner-stats,
2270
- .owner-card p {
2271
- color: var(--terminal-dim);
2272
- font-size: 11px;
2273
- }
2274
- .owner-stats { margin-top: 9px; }
2275
- .owner-card p { margin-top: 9px; color: var(--muted); }
2276
- .owner-silos {
2277
- grid-column: 1 / -1;
2278
- display: grid;
2279
- gap: 8px;
2280
- margin-top: 4px;
2281
- }
2282
- .owner-silos h3 {
2283
- margin: 8px 0 0;
2284
- color: var(--terminal);
2285
- font-size: 13px;
2286
- }
2287
- .owner-silo-row {
2288
- width: 100%;
2289
- display: grid;
2290
- grid-template-columns: minmax(0, 1fr) auto;
2291
- gap: 10px;
2292
- padding: 10px 12px;
2293
- border-color: rgba(255, 209, 102, 0.25);
2294
- background: rgba(255, 209, 102, 0.05);
2295
- box-shadow: none;
2296
- text-align: left;
2297
- }
2298
- .owner-silo-row strong { overflow-wrap: anywhere; }
2299
- .owner-silo-row span {
2300
- color: var(--warn);
2301
- font-size: 11px;
2302
- white-space: nowrap;
2303
- }
2304
- .intel-card {
2305
- min-height: 250px;
2306
- padding: 18px;
2307
- border: 1px solid var(--line);
2308
- border-radius: 8px;
2309
- background: #06100b;
2310
- overflow: hidden;
2311
- }
2312
- .intel-card-head {
2313
- display: flex;
2314
- align-items: flex-start;
2315
- justify-content: space-between;
2316
- gap: 12px;
2317
- }
2318
- .intel-card h3 {
2319
- margin: 0;
2320
- color: var(--terminal);
2321
- font-size: 15px;
2322
- letter-spacing: 0;
2323
- overflow-wrap: anywhere;
2324
- }
2325
- .intel-card-head span {
2326
- display: block;
2327
- margin-top: 4px;
2328
- color: var(--terminal-dim);
2329
- font-size: 10px;
2330
- font-weight: 760;
2331
- text-transform: uppercase;
2332
- }
2333
- .intel-card-head strong {
2334
- flex: 0 0 auto;
2335
- color: var(--terminal-strong);
2336
- font-size: 20px;
2337
- line-height: 1;
2338
- text-align: right;
2339
- max-width: 42%;
2340
- overflow-wrap: anywhere;
2341
- }
2342
- .intel-metric-label {
2343
- margin-top: 5px;
2344
- color: var(--terminal-dim);
2345
- font-size: 10px;
2346
- font-weight: 760;
2347
- text-align: right;
2348
- text-transform: uppercase;
2349
- }
2350
- .intel-highlight {
2351
- margin: 14px 0 0;
2352
- color: var(--text);
2353
- font-size: 13px;
2354
- line-height: 1.45;
2355
- overflow-wrap: anywhere;
2356
- }
2357
- .intel-action {
2358
- margin: 12px 0 0;
2359
- padding: 11px;
2360
- border-left: 2px solid var(--terminal-strong);
2361
- background: rgba(65, 255, 143, 0.06);
2362
- color: var(--terminal-dim);
2363
- font-size: 12px;
2364
- line-height: 1.4;
2365
- }
2366
- .intel-action b {
2367
- display: inline-block;
2368
- margin-right: 6px;
2369
- color: var(--terminal-strong);
2370
- text-transform: uppercase;
2371
- }
2372
- .intel-card ul {
2373
- margin: 9px 0 0;
2374
- padding: 0;
2375
- list-style: none;
2376
- }
2377
- .intel-card li {
2378
- padding-top: 8px;
2379
- color: var(--muted);
2380
- font-size: 12px;
2381
- line-height: 1.35;
2382
- overflow-wrap: anywhere;
2383
- }
2384
- .intel-card li strong {
2385
- display: block;
2386
- margin-bottom: 2px;
2387
- }
2388
- .intel-card li span {
2389
- display: block;
2390
- }
2391
- .intel-card strong { color: var(--terminal-strong); }
2392
- .intel-section {
2393
- min-height: 230px;
2394
- padding: 11px;
2395
- border: 1px solid rgba(65, 255, 143, 0.24);
2396
- border-radius: 4px;
2397
- background: linear-gradient(180deg, rgba(13, 25, 19, 0.96), rgba(5, 11, 8, 0.96));
2398
- overflow: hidden;
2399
- }
2400
- .intel-section-header {
2401
- display: flex;
2402
- align-items: flex-start;
2403
- justify-content: space-between;
2404
- gap: 10px;
2405
- }
2406
- .intel-section-header h3 {
2407
- margin: 0;
2408
- color: var(--terminal);
2409
- font-size: 12px;
2410
- letter-spacing: 0;
2411
- }
2412
- .intel-section-header span {
2413
- display: block;
2414
- margin-top: 3px;
2415
- color: var(--terminal-dim);
2416
- font-size: 10px;
2417
- font-weight: 760;
2418
- text-transform: uppercase;
2419
- }
2420
- .intel-section-header strong {
2421
- flex: 0 0 auto;
2422
- color: var(--terminal-strong);
2423
- font-size: 11px;
2424
- }
2425
- .intel-section-summary {
2426
- margin: 8px 0 10px;
2427
- color: var(--muted);
2428
- font-size: 11px;
2429
- overflow-wrap: anywhere;
2430
- }
2431
- .intel-section-list {
2432
- display: grid;
2433
- gap: 7px;
2434
- }
2435
- .intel-row {
2436
- width: 100%;
2437
- display: grid;
2438
- grid-template-columns: minmax(0, 1fr);
2439
- gap: 5px;
2440
- min-height: 0;
2441
- padding: 8px;
2442
- border-color: var(--line);
2443
- background: rgba(3, 6, 4, 0.55);
2444
- color: var(--text);
2445
- text-align: left;
2446
- white-space: normal;
2447
- box-shadow: none;
2448
- cursor: default;
2449
- }
2450
- .intel-row.clickable { cursor: pointer; }
2451
- .intel-row.clickable:hover {
2452
- border-color: var(--terminal-strong);
2453
- background: rgba(65, 255, 143, 0.075);
2454
- }
2455
- .intel-row-main {
2456
- display: flex;
2457
- align-items: baseline;
2458
- justify-content: space-between;
2459
- gap: 8px;
2460
- min-width: 0;
2461
- }
2462
- .intel-row-main strong {
2463
- min-width: 0;
2464
- color: var(--text);
2465
- font-size: 11px;
2466
- overflow: hidden;
2467
- text-overflow: ellipsis;
2468
- white-space: nowrap;
2469
- }
2470
- .intel-row-main em {
2471
- flex: 0 0 auto;
2472
- color: var(--terminal-strong);
2473
- font-size: 10px;
2474
- font-style: normal;
2475
- }
2476
- .intel-row-meta {
2477
- color: var(--terminal-dim);
2478
- font-size: 10px;
2479
- overflow: hidden;
2480
- display: -webkit-box;
2481
- -webkit-box-orient: vertical;
2482
- -webkit-line-clamp: 2;
2483
- white-space: normal;
2484
- }
2485
- .intel-row-bar {
2486
- display: block;
2487
- height: 4px;
2488
- overflow: hidden;
2489
- border-radius: 999px;
2490
- background: rgba(65, 255, 143, 0.10);
2491
- }
2492
- .intel-row-bar i {
2493
- display: block;
2494
- height: 100%;
2495
- border-radius: inherit;
2496
- background: var(--terminal-strong);
2497
- }
2498
- .intel-row-warn .intel-row-main em,
2499
- .intel-row-warn .intel-row-bar i { color: var(--warn); background: var(--warn); }
2500
- .intel-row-danger .intel-row-main em,
2501
- .intel-row-danger .intel-row-bar i { color: var(--danger); background: var(--danger); }
2502
- .review-item {
2503
- padding: 10px 0;
2504
- border-top: 1px solid var(--line);
2505
- }
2506
- .review-list { height: auto; }
2507
- .review-title {
2508
- color: var(--terminal);
2509
- font-weight: 820;
2510
- text-shadow: 0 0 9px rgba(65, 255, 143, 0.14);
2511
- overflow-wrap: anywhere;
2512
- }
2513
- .review-meta, .review-risks {
2514
- margin-top: 4px;
2515
- color: var(--terminal-dim);
2516
- font-size: 11px;
2517
- }
2518
- .review-summary {
2519
- margin-top: 6px;
2520
- color: var(--text);
2521
- overflow-wrap: anywhere;
2522
- }
2523
- .review-artifact {
2524
- margin-top: 10px;
2525
- border-top: 1px solid var(--line);
2526
- padding-top: 10px;
2527
- }
2528
- .review-artifact summary {
2529
- color: var(--terminal-strong);
2530
- cursor: pointer;
2531
- font-weight: 780;
2532
- }
2533
- .review-artifact pre {
2534
- margin: 10px 0 0;
2535
- white-space: pre-wrap;
2536
- color: var(--muted);
2537
- font-size: 11px;
2538
- }
2539
- .proof-list {
2540
- display: grid;
2541
- grid-template-columns: repeat(3, minmax(0, 1fr));
2542
- gap: 8px;
2543
- align-content: start;
2544
- height: auto;
2545
- overflow: visible;
2546
- padding: 0 10px 12px;
2547
- }
2548
- .proof-item {
2549
- min-height: 62px;
2550
- padding: 10px;
2551
- border: 1px solid var(--line);
2552
- border-radius: 4px;
2553
- background: #06100b;
2554
- }
2555
- .proof-item strong {
2556
- display: block;
2557
- color: var(--terminal-strong);
2558
- font-size: 18px;
2559
- }
2560
- .proof-item span {
2561
- display: block;
2562
- margin-top: 5px;
2563
- color: var(--terminal-dim);
2564
- font-size: 10px;
2565
- font-weight: 760;
2566
- text-transform: uppercase;
2567
- }
2568
- .proof-ledger-item {
2569
- grid-column: span 1;
2570
- min-height: 132px;
2571
- background: linear-gradient(180deg, rgba(12, 34, 23, 0.92), rgba(5, 16, 11, 0.96));
2572
- }
2573
- .proof-ledger-item.is-ok {
2574
- border-color: rgba(53, 246, 159, 0.34);
2575
- box-shadow: 0 0 18px rgba(53, 246, 159, 0.08);
2576
- }
2577
- .proof-ledger-item.is-warn {
2578
- border-color: rgba(255, 211, 105, 0.36);
2579
- }
2580
- .proof-ledger-item code {
2581
- display: block;
2582
- margin-top: 10px;
2583
- padding: 8px;
2584
- border: 1px solid var(--line);
2585
- border-radius: 4px;
2586
- overflow: auto;
2587
- color: var(--terminal-strong);
2588
- background: rgba(0, 0, 0, 0.22);
2589
- font-size: 10px;
2590
- white-space: nowrap;
2591
- }
2592
- .proof-ledger-item p {
2593
- margin: 9px 0 0;
2594
- color: var(--terminal-muted);
2595
- font-size: 11px;
2596
- line-height: 1.45;
2597
- }
2598
-
2599
- .debug-guide {
2600
- margin: 0 10px 10px;
2601
- padding: 10px 12px;
2602
- border: 1px solid rgba(65, 255, 143, 0.12);
2603
- border-radius: 8px;
2604
- background: rgba(65, 255, 143, 0.045);
2605
- color: var(--terminal-dim);
2606
- font-size: 11px;
2607
- line-height: 1.4;
2608
- }
2609
-
2610
- .debug-overview {
2611
- display: grid;
2612
- grid-template-columns: repeat(3, minmax(0, 1fr));
2613
- gap: 8px;
2614
- padding: 0 10px 10px;
2615
- }
2616
-
2617
- body.viewer-page-data .debug-overview {
2618
- grid-template-columns: 1fr;
2619
- }
2620
-
2621
- .debug-overview .metric-card {
2622
- min-height: 132px;
2623
- padding: 11px;
2624
- }
2625
-
2626
- .debug-overview .metric-visual {
2627
- grid-template-columns: 58px minmax(0, 1fr);
2628
- gap: 10px;
2629
- }
2630
-
2631
- .debug-overview .metric-donut {
2632
- width: 56px;
2633
- height: 56px;
2634
- }
2635
-
2636
- .table-panel .list { height: calc(100% - 96px); }
2637
- .entities-panel .list { height: calc(100% - 250px); }
2638
- .list-item {
2639
- width: 100%;
2640
- display: grid;
2641
- gap: 4px;
2642
- padding: 10px 8px;
2643
- border: 0;
2644
- border-top: 1px solid var(--line);
2645
- border-radius: 0;
2646
- background: transparent;
2647
- color: inherit;
2648
- text-align: left;
2649
- cursor: pointer;
2650
- }
2651
- .list-item:hover, .list-item.selected { background: rgba(65, 255, 143, 0.08); }
2652
- .item-title {
2653
- color: var(--terminal);
2654
- font-weight: 780;
2655
- text-shadow: 0 0 9px rgba(65, 255, 143, 0.14);
2656
- overflow-wrap: anywhere;
2657
- }
2658
- .item-meta { color: var(--terminal-dim); font-size: 11px; overflow-wrap: anywhere; }
2659
- .list-note {
2660
- padding: 12px 8px;
2661
- border-top: 1px solid var(--line);
2662
- color: var(--warn);
2663
- font-size: 11px;
2664
- line-height: 1.4;
2665
- }
2666
-
2667
- .edge-line { stroke: var(--edge); stroke-width: 1.35; marker-end: url(#arrow); opacity: 0.50; }
2668
- .edge-line.memory-code-link {
2669
- stroke: #d8ff5f;
2670
- stroke-width: 2.2;
2671
- opacity: 0.88;
2672
- filter: drop-shadow(0 0 7px rgba(216, 255, 95, 0.42));
2673
- }
2674
- .edge-line.filtered { opacity: 0.05; }
2675
- .edge-line.selected, .edge-line.connected { stroke: var(--terminal-strong); stroke-width: 2.8; opacity: 1; }
2676
- .edge-line.review-low-confidence { stroke-dasharray: 5 4; stroke: var(--warn); }
2677
- .edge-line.review-missing-evidence { opacity: 0.34; stroke-dasharray: 3 5; }
2678
- .edge-line.review-invalidated { stroke: #68716c; stroke-dasharray: 2 5; }
2679
- .edge-hit { stroke: transparent; stroke-width: 18; cursor: pointer; }
2680
-
2681
- .node { cursor: pointer; }
2682
- .node-body {
2683
- stroke-width: 1.5;
2684
- rx: 4;
2685
- filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.38));
2686
- }
2687
- .node.graph-memory .node-body {
2688
- fill: var(--memory-soft);
2689
- stroke: var(--memory);
2690
- filter: drop-shadow(0 0 10px rgba(65, 255, 143, 0.46)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.38));
2691
- }
2692
- .node.graph-code .node-body {
2693
- fill: var(--code-soft);
2694
- stroke: var(--code);
2695
- }
2696
- .node.graph-unknown .node-body {
2697
- fill: #151b18;
2698
- stroke: var(--terminal-dim);
2699
- }
2700
- .node.dependency-node .node-body {
2701
- fill: #101714;
2702
- stroke: #506c5a;
2703
- }
2704
- .node.dependency-node .node-title,
2705
- .node.dependency-node .node-type {
2706
- fill: #8aa394;
2707
- }
2708
- .node.selected .node-body, .node.connected .node-body {
2709
- stroke: var(--terminal-strong);
2710
- stroke-width: 2.8;
2711
- }
2712
- .node.filtered { opacity: 0.10; }
2713
- .node-title {
2714
- fill: var(--text);
2715
- font-size: 12px;
2716
- font-weight: 800;
2717
- pointer-events: none;
2718
- }
2719
- .node-type {
2720
- fill: var(--terminal-dim);
2721
- font-size: 9px;
2722
- font-weight: 760;
2723
- letter-spacing: 0.06em;
2724
- text-transform: uppercase;
2725
- pointer-events: none;
2726
- }
2727
- .node-port {
2728
- fill: var(--terminal-strong);
2729
- opacity: 0.88;
2730
- pointer-events: none;
2731
- }
2732
-
2733
- @media (max-width: 1120px) {
2734
- .viewer-shell {
2735
- grid-template-columns: 1fr;
2736
- }
2737
- .repo-sidebar {
2738
- position: relative;
2739
- height: auto;
2740
- grid-template-rows: auto auto auto auto;
2741
- border-right: 0;
2742
- border-bottom: 1px solid rgba(65, 255, 143, 0.13);
2743
- }
2744
- .viewer-sections {
2745
- grid-template-columns: repeat(4, minmax(0, 1fr));
2746
- }
2747
- .sidebar-links {
2748
- grid-template-columns: repeat(4, auto);
2749
- justify-content: start;
2750
- }
2751
- .app-header {
2752
- grid-template-columns: 1fr;
2753
- grid-template-areas:
2754
- "brand"
2755
- "status"
2756
- "autoload"
2757
- "picker";
2758
- align-items: stretch;
2759
- padding: 12px 14px;
2760
- }
2761
- .brand-block h1 { font-size: 24px; }
2762
- .app-header p { font-size: 12px; }
2763
- .status-strip { justify-content: flex-start; }
2764
- .status-pill { min-height: 24px; padding: 3px 8px; }
2765
- .layout {
2766
- grid-template-columns: 1fr;
2767
- grid-template-areas:
2768
- "dashboard"
2769
- "graph"
2770
- "workspace";
2771
- }
2772
- body.viewer-page-overview .layout,
2773
- body.viewer-page-memory .layout,
2774
- body.viewer-page-owners .layout,
2775
- body.viewer-page-intel .layout,
2776
- body.viewer-page-review .layout,
2777
- body.viewer-page-data .layout {
2778
- grid-template-columns: 1fr;
2779
- grid-template-areas: "workspace";
2780
- }
2781
- body.viewer-page-overview .layout { grid-template-areas: "dashboard"; }
2782
- body.viewer-page-graph .layout {
2783
- grid-template-columns: 1fr;
2784
- grid-template-areas:
2785
- "graph"
2786
- "workspace";
2787
- }
2788
- .dashboard-panel { min-height: 620px; padding: 18px; }
2789
- .dashboard-hero { grid-template-columns: 1fr; }
2790
- .dashboard-actions { justify-content: flex-start; }
2791
- .dashboard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
2792
- .repo-xray-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2793
- .dashboard-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2794
- .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2795
- .lifecycle-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2796
- .intelligence-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2797
- .workspace-shell {
2798
- width: 100%;
2799
- min-height: 0;
2800
- }
2801
- .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
2802
- body.viewer-page-graph .control-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
2803
- .graph-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2804
- body.viewer-page-memory .workspace-body,
2805
- body.viewer-page-review .workspace-body,
2806
- body.viewer-page-data .workspace-body {
2807
- grid-template-columns: 1fr;
2808
- }
2809
- .control-panel .panel-heading, .metrics-grid, .path-finder, .legend { grid-column: 1 / -1; }
2810
- .control-panel label, .control-panel button { margin-top: 0; }
2811
- .graph-panel { min-height: 620px; }
2812
- #graphCanvas, .three-graph, .graph-canvas-wrap, #graphSvg { min-height: 560px; }
2813
- .details-panel {
2814
- height: 100%;
2815
- }
2816
- .detail-section-list { max-height: 220px; }
2817
- }
2818
-
2819
- @media (max-width: 620px) {
2820
- .app-header { padding: 10px 12px; gap: 6px; }
2821
- .layout { padding: 8px; gap: 8px; }
2822
- .repo-sidebar { padding: 10px 12px; gap: 8px; grid-template-rows: auto auto; }
2823
- .repo-card, .sidebar-links { display: none; }
2824
- .viewer-sections { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
2825
- .viewer-sections a { min-height: 34px; padding: 8px 6px; text-align: center; }
2826
- .status-strip { gap: 6px; }
2827
- .file-picker { display: none; }
2828
- .brand-block h1 { font-size: 22px; }
2829
- .app-header p { font-size: 11px; }
2830
- .dashboard-panel { min-height: 560px; padding: 14px; }
2831
- .dashboard-hero h2 { font-size: 26px; }
2832
- .dashboard-stats, .repo-xray-layers, .dashboard-charts, .dashboard-grid { grid-template-columns: 1fr; }
2833
- .dashboard-card { min-height: 0; }
2834
- body.viewer-page-graph .control-panel { grid-template-columns: 1fr; }
2835
- body.viewer-page-graph .workspace-shell { max-height: none; }
2836
- .metrics-grid { grid-template-columns: 1fr 1fr; }
2837
- .proof-list { grid-template-columns: 1fr 1fr; }
2838
- .memory-overview,
2839
- .lifecycle-summary,
2840
- .lifecycle-flow,
2841
- .owners-summary,
2842
- .review-overview,
2843
- .proof-overview,
2844
- .debug-overview,
2845
- .graph-insights { grid-template-columns: 1fr; }
2846
- .memory-list,
2847
- .owners-list,
2848
- .review-list,
2849
- .proof-list { height: auto; max-height: none; }
2850
- .entities-panel .list { height: auto; max-height: 460px; }
2851
- .intelligence-list { grid-template-columns: 1fr; }
2852
- .intel-guide { grid-template-columns: 1fr; }
2853
- .intel-deep-grid { grid-template-columns: 1fr; }
2854
- .path-finder-inputs { grid-template-columns: 1fr; }
2855
- .graph-toolbar { align-items: flex-start; flex-direction: column; }
2856
- .graph-actions { width: 100%; }
2857
- .interaction-hint { flex: 1; white-space: normal; }
2858
- .owners-list { grid-template-columns: 1fr; }
2859
- .memory-row, .owner-silo-row { grid-template-columns: 1fr; }
2860
- .memory-row span, .owner-silo-row span { white-space: normal; }
2861
- .graph-panel { min-height: 520px; }
2862
- #graphCanvas, .three-graph, .graph-canvas-wrap, #graphSvg { min-height: 430px; }
2863
- }
2864
-
2865
- /* Site cleanup: text-size floor, hide repo card on mobile to declutter, no x-scroll. */
2866
- html, body { overflow-x: hidden; max-width: 100vw; }
2867
-
2868
- @media (max-width: 620px) {
2869
- .autoload-status { font-size: 11px; }
2870
- .item-meta,
2871
- .detail-row dt,
2872
- .intel-row-meta,
2873
- .path-suggestion-button span,
2874
- .graph-toolbar p,
2875
- .interaction-hint {
2876
- font-size: 12px;
2877
- }
2878
- }