lutaml 0.10.7 → 0.10.8

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 (20) hide show
  1. checksums.yaml +4 -4
  2. data/.rubocop_todo.yml +2 -40
  3. data/lib/lutaml/uml_repository/static_site/generator.rb +30 -0
  4. data/lib/lutaml/version.rb +1 -1
  5. data/templates/static_site/assets/images/lutaml-full.svg +1 -0
  6. data/templates/static_site/assets/images/lutaml-icon.svg +1 -0
  7. data/templates/static_site/assets/scripts/ui/sidebar.js +57 -148
  8. data/templates/static_site/assets/styles/00-variables.css +128 -128
  9. data/templates/static_site/assets/styles/01-reset.css +20 -30
  10. data/templates/static_site/assets/styles/02-base.css +105 -110
  11. data/templates/static_site/assets/styles/03-layout.css +51 -101
  12. data/templates/static_site/assets/styles/04-components.css +636 -587
  13. data/templates/static_site/assets/styles/05-utilities.css +8 -74
  14. data/templates/static_site/assets/styles/06-diagrams.css +42 -293
  15. data/templates/static_site/components/content.liquid +225 -322
  16. data/templates/static_site/components/header.liquid +99 -119
  17. data/templates/static_site/components/sidebar.liquid +69 -39
  18. data/templates/static_site/multi_file.liquid +9 -6
  19. data/templates/static_site/single_file.liquid +9 -4
  20. metadata +3 -1
data/templates/static_site/assets/styles/04-components.css CHANGED
@@ -1,856 +1,905 @@
1
- /* Component Styles */
1
+ /* Components — LutaML Branded */
2
2
 
3
- /* App Title */
4
- .app-title {
5
- font-size: var(--font-size-xl);
6
- font-weight: var(--font-weight-bold);
7
- margin: 0;
8
- }
3
+ /* ========== Sidebar ========== */
9
4
 
10
- .app-title a {
11
- color: var(--color-header-text);
12
- text-decoration: none;
5
+ .sidebar-branding {
6
+ display: flex;
7
+ align-items: center;
8
+ gap: var(--space-2);
9
+ padding: var(--space-4);
10
+ border-bottom: 1px solid var(--border-light);
13
11
  }
14
12
 
15
- .app-title a:hover {
16
- opacity: 0.9;
13
+ .branding-logo {
14
+ width: 28px;
15
+ height: 28px;
16
+ flex-shrink: 0;
17
+ display: flex;
18
+ align-items: center;
19
+ justify-content: center;
17
20
  }
18
21
 
19
- /* Buttons */
20
- .sidebar-toggle {
21
- display: none;
22
- padding: var(--space-sm);
23
- color: var(--color-header-text);
24
- border-radius: var(--border-radius);
22
+ .branding-logo svg {
23
+ width: 100%;
24
+ height: 100%;
25
25
  }
26
26
 
27
- .sidebar-toggle:hover {
28
- background-color: rgba(255, 255, 255, 0.1);
27
+ .branding-text {
28
+ display: flex;
29
+ flex-direction: column;
30
+ line-height: 1.2;
31
+ min-width: 0;
29
32
  }
30
33
 
31
- .icon-button {
32
- padding: var(--space-sm);
33
- border-radius: var(--border-radius);
34
- color: var(--color-text-secondary);
35
- transition: all var(--transition-fast);
34
+ .branding-title {
35
+ font-size: var(--text-sm);
36
+ font-weight: 600;
37
+ color: var(--text-primary);
38
+ white-space: nowrap;
39
+ overflow: hidden;
40
+ text-overflow: ellipsis;
36
41
  }
37
42
 
38
- .icon-button:hover {
39
- background-color: var(--color-bg-tertiary);
40
- color: var(--color-text);
43
+ .branding-subtitle {
44
+ font-size: var(--text-xs);
45
+ color: var(--text-muted);
46
+ font-weight: 400;
41
47
  }
42
48
 
43
- .theme-toggle {
44
- padding: var(--space-sm);
45
- color: var(--color-header-text);
46
- border-radius: var(--border-radius);
49
+ /* Overview Button */
50
+ .overview-btn {
51
+ display: flex;
52
+ align-items: center;
53
+ gap: var(--space-2);
54
+ width: 100%;
55
+ padding: var(--space-2) var(--space-3);
56
+ font-size: var(--text-sm);
57
+ font-weight: 500;
58
+ color: var(--text-secondary);
59
+ border-radius: var(--radius-md);
60
+ cursor: pointer;
61
+ transition: all var(--transition-fast);
47
62
  }
48
63
 
49
- .theme-toggle:hover {
50
- background-color: rgba(255, 255, 255, 0.1);
64
+ .overview-btn:hover {
65
+ background: var(--bg-hover);
66
+ color: var(--text-primary);
51
67
  }
52
68
 
53
- .link-button {
54
- color: var(--color-link);
55
- background: none;
56
- border: none;
57
- cursor: pointer;
58
- padding: 0;
59
- text-align: left;
69
+ .overview-btn.active {
70
+ background: var(--color-primary-alpha);
71
+ color: var(--color-primary);
60
72
  }
61
73
 
62
- .link-button:hover {
63
- color: var(--color-link-hover);
64
- text-decoration: underline;
74
+ /* Sidebar Sections */
75
+ .sidebar-section {
76
+ padding: var(--space-4);
77
+ border-bottom: 1px solid var(--border-light);
65
78
  }
66
79
 
67
- /* Search Component */
68
- .search-wrapper {
69
- position: relative;
80
+ .section-header {
70
81
  display: flex;
71
82
  align-items: center;
72
- gap: var(--space-sm);
73
- width: 100%;
74
- }
75
-
76
- .search-icon {
77
- position: absolute;
78
- left: var(--space-md);
79
- color: var(--color-text-secondary);
80
- pointer-events: none;
83
+ justify-content: space-between;
84
+ margin-bottom: var(--space-3);
81
85
  }
82
86
 
83
- .search-input {
84
- flex: 1;
85
- padding: var(--space-sm) var(--space-md);
86
- padding-left: calc(var(--space-md) * 3);
87
- padding-right: calc(var(--space-md) * 5);
88
- border: 1px solid var(--color-border);
89
- border-radius: var(--border-radius);
90
- background-color: var(--color-bg);
91
- color: var(--color-text);
92
- outline: none;
93
- transition: all var(--transition-fast);
87
+ .section-title {
88
+ font-size: var(--text-xs);
89
+ font-weight: 600;
90
+ text-transform: uppercase;
91
+ letter-spacing: 0.05em;
92
+ color: var(--text-muted);
94
93
  }
95
94
 
96
- .search-input:focus {
97
- border-color: var(--color-accent);
98
- box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
99
- }
95
+ /* ========== Package Tree — matching lutaml-xsd SchemaTreeNode ========== */
100
96
 
101
- .search-clear {
102
- position: absolute;
103
- right: calc(var(--space-md) * 3);
104
- padding: var(--space-xs);
105
- color: var(--color-text-secondary);
106
- border-radius: var(--border-radius);
97
+ .tree-node {
98
+ user-select: none;
107
99
  }
108
100
 
109
- .search-clear:hover {
110
- background-color: var(--color-bg-tertiary);
101
+ .tree-node-content {
102
+ display: flex;
103
+ align-items: center;
104
+ gap: var(--space-1);
105
+ padding: var(--space-1) var(--space-2);
106
+ border-radius: var(--radius-sm);
107
+ cursor: pointer;
108
+ transition: background var(--transition-fast);
111
109
  }
112
110
 
113
- .search-hint {
114
- position: absolute;
115
- right: var(--space-md);
116
- font-size: var(--font-size-xs);
117
- color: var(--color-text-muted);
118
- pointer-events: none;
111
+ .tree-node-content:hover {
112
+ background: var(--bg-hover);
119
113
  }
120
114
 
121
- /* Search Results Overlay */
122
- .search-results-overlay {
123
- position: absolute;
124
- top: calc(100% + var(--space-sm));
125
- left: 0;
126
- right: 0;
127
- max-height: 60vh;
128
- background-color: var(--color-bg);
129
- border: 1px solid var(--color-border);
130
- border-radius: var(--border-radius-lg);
131
- box-shadow: var(--shadow-xl);
132
- overflow: hidden;
133
- z-index: var(--z-search-overlay);
115
+ .tree-node-content.selected {
116
+ background: var(--color-primary-alpha);
117
+ color: var(--color-primary);
134
118
  }
135
119
 
136
- .search-results-header {
120
+ .tree-toggle {
121
+ width: 16px;
122
+ height: 16px;
137
123
  display: flex;
138
- justify-content: space-between;
139
124
  align-items: center;
140
- padding: var(--space-sm) var(--space-md);
141
- background-color: var(--color-bg-secondary);
142
- border-bottom: 1px solid var(--color-border);
143
- font-size: var(--font-size-sm);
144
- color: var(--color-text-secondary);
125
+ justify-content: center;
126
+ padding: 0;
127
+ color: var(--text-muted);
128
+ transition: transform var(--transition-fast);
129
+ flex-shrink: 0;
145
130
  }
146
131
 
147
- .search-hint-text {
148
- font-size: var(--font-size-xs);
149
- color: var(--color-text-muted);
132
+ .tree-toggle svg.expanded {
133
+ transform: rotate(90deg);
150
134
  }
151
135
 
152
- .search-results-list {
153
- max-height: 50vh;
154
- overflow-y: auto;
136
+ .tree-toggle-placeholder {
137
+ width: 16px;
138
+ flex-shrink: 0;
155
139
  }
156
140
 
157
- .search-result-item {
141
+ .tree-icon {
142
+ color: var(--text-muted);
158
143
  display: flex;
159
144
  align-items: center;
160
- gap: var(--space-md);
161
- padding: var(--space-md);
145
+ flex-shrink: 0;
146
+ }
147
+
148
+ .tree-label {
149
+ flex: 1;
150
+ font-size: var(--text-sm);
151
+ font-weight: 500;
152
+ white-space: nowrap;
153
+ overflow: hidden;
154
+ text-overflow: ellipsis;
155
+ text-align: left;
156
+ background: none;
157
+ border: none;
162
158
  cursor: pointer;
163
- border-bottom: 1px solid var(--color-border-light);
164
- transition: background-color var(--transition-fast);
159
+ color: inherit;
160
+ padding: 0;
161
+ font-family: inherit;
165
162
  }
166
163
 
167
- .search-result-item:hover,
168
- .search-result-item.selected {
169
- background-color: var(--color-sidebar-hover);
164
+ .tree-label:hover {
165
+ color: var(--color-primary);
170
166
  }
171
167
 
172
- .search-result-item.selected {
173
- background-color: var(--color-sidebar-active);
168
+ .tree-node-content.selected .tree-label {
169
+ color: var(--color-primary);
174
170
  }
175
171
 
176
- .result-icon {
177
- flex-shrink: 0;
178
- width: 24px;
179
- height: 24px;
180
- display: flex;
181
- align-items: center;
182
- justify-content: center;
183
- border-radius: var(--border-radius);
184
- font-size: var(--font-size-sm);
172
+ .tree-stereotype {
173
+ font-size: var(--text-xs);
174
+ color: var(--text-muted);
175
+ font-style: italic;
185
176
  }
186
177
 
187
- .result-icon[data-type="class"] {
188
- background-color: #e3f2fd;
189
- color: #1976d2;
178
+ .tree-count {
179
+ font-size: var(--text-xs);
180
+ color: var(--text-muted);
181
+ background: var(--bg-primary);
182
+ padding: 1px 5px;
183
+ border-radius: var(--radius-sm);
184
+ flex-shrink: 0;
190
185
  }
191
186
 
192
- .result-icon[data-type="attribute"] {
193
- background-color: #f3e5f5;
194
- color: #7b1fa2;
187
+ .tree-children {
188
+ margin-top: var(--space-1);
189
+ padding-left: var(--space-4);
195
190
  }
196
191
 
197
- .result-icon[data-type="association"] {
198
- background-color: #e8f5e9;
199
- color: #388e3c;
192
+ /* Tree group (Classes under a package) */
193
+ .tree-group {
194
+ margin-bottom: var(--space-1);
200
195
  }
201
196
 
202
- .result-icon[data-type="package"] {
203
- background-color: #fff3e0;
204
- color: #f57c00;
197
+ .tree-group-label {
198
+ display: flex;
199
+ align-items: center;
200
+ gap: var(--space-1);
201
+ padding: var(--space-1) var(--space-2);
202
+ font-size: var(--text-xs);
203
+ font-weight: 500;
204
+ color: var(--text-muted);
205
205
  }
206
206
 
207
- .result-info {
208
- flex: 1;
209
- min-width: 0;
207
+ .tree-group-items {
208
+ margin-top: var(--space-1);
210
209
  }
211
210
 
212
- .result-name {
211
+ /* Tree item (leaf — class/datatype/enum) */
212
+ .tree-item {
213
213
  display: flex;
214
214
  align-items: center;
215
- gap: var(--space-sm);
216
- font-weight: var(--font-weight-medium);
217
- margin-bottom: var(--space-xs);
215
+ gap: var(--space-2);
216
+ padding: var(--space-1) var(--space-2);
217
+ padding-left: calc(var(--space-2) + 20px);
218
+ border-radius: var(--radius-sm);
219
+ cursor: pointer;
220
+ transition: background var(--transition-fast);
218
221
  }
219
222
 
220
- .result-path {
221
- font-size: var(--font-size-sm);
222
- color: var(--color-text-secondary);
223
- white-space: nowrap;
224
- overflow: hidden;
225
- text-overflow: ellipsis;
223
+ .tree-item:hover {
224
+ background: var(--bg-hover);
226
225
  }
227
226
 
228
- .result-type-badge {
229
- font-size: var(--font-size-xs);
230
- padding: 0.15em 0.5em;
231
- background-color: var(--color-bg-tertiary);
232
- border-radius: var(--border-radius);
233
- color: var(--color-text-secondary);
227
+ .tree-item.selected {
228
+ background: var(--color-primary-alpha);
234
229
  }
235
230
 
236
- .result-score {
237
- width: 60px;
238
- height: 4px;
239
- background-color: var(--color-bg-tertiary);
240
- border-radius: 2px;
231
+ .tree-item-label {
232
+ flex: 1;
233
+ font-size: var(--text-sm);
234
+ white-space: nowrap;
241
235
  overflow: hidden;
236
+ text-overflow: ellipsis;
242
237
  }
243
238
 
244
- .score-bar {
245
- height: 100%;
246
- background: linear-gradient(90deg, var(--color-success), var(--color-accent));
247
- transition: width var(--transition-base);
239
+ /* Stats Grid */
240
+ .stats-grid {
241
+ display: grid;
242
+ grid-template-columns: repeat(3, 1fr);
243
+ gap: var(--space-2);
244
+ text-align: center;
248
245
  }
249
246
 
250
- .search-no-results {
251
- padding: var(--space-xl);
252
- text-align: center;
253
- color: var(--color-text-secondary);
247
+ .stat-item {
248
+ display: flex;
249
+ flex-direction: column;
250
+ gap: 2px;
254
251
  }
255
252
 
256
- .search-suggestion {
257
- font-size: var(--font-size-sm);
258
- color: var(--color-text-muted);
259
- margin-top: var(--space-sm);
253
+ .stat-value {
254
+ font-size: var(--text-lg);
255
+ font-weight: 600;
256
+ color: var(--text-primary);
260
257
  }
261
258
 
262
- /* Tree Navigation */
263
- .tree-node {
264
- user-select: none;
259
+ .stat-label {
260
+ font-size: var(--text-xs);
261
+ color: var(--text-muted);
265
262
  }
266
263
 
267
- .node-header {
264
+ /* Sidebar Footer */
265
+ .sidebar-footer {
266
+ padding: var(--space-3) var(--space-4);
267
+ border-top: 1px solid var(--border-light);
268
268
  display: flex;
269
269
  align-items: center;
270
- gap: var(--space-xs);
271
- padding: var(--space-xs) 0;
272
- border-radius: var(--border-radius);
273
- transition: background-color var(--transition-fast);
270
+ gap: var(--space-3);
274
271
  }
275
272
 
276
- .node-header:hover {
277
- background-color: var(--color-sidebar-hover);
278
- }
279
-
280
- .tree-node.selected > .node-header {
281
- background-color: var(--color-sidebar-active);
282
- }
283
-
284
- .expand-icon {
285
- flex-shrink: 0;
286
- width: 20px;
273
+ .lutaml-logo {
287
274
  height: 20px;
275
+ flex-shrink: 0;
276
+ opacity: 0.7;
288
277
  display: flex;
289
278
  align-items: center;
290
- justify-content: center;
291
- transition: transform var(--transition-fast);
292
- color: var(--color-text-secondary);
293
279
  }
294
280
 
295
- .expand-icon.expanded svg {
296
- transform: rotate(90deg);
281
+ .lutaml-logo svg {
282
+ height: 100%;
283
+ width: auto;
297
284
  }
298
285
 
299
- .no-icon {
300
- flex-shrink: 0;
301
- width: 20px;
286
+ .footer-text {
287
+ font-size: var(--text-xs);
288
+ color: var(--text-muted);
289
+ line-height: 1.3;
302
290
  }
303
291
 
304
- .package-icon,
305
- .class-icon {
306
- flex-shrink: 0;
307
- color: var(--color-text-secondary);
292
+ .footer-text a {
293
+ color: var(--color-primary);
294
+ text-decoration: none;
308
295
  }
309
296
 
310
- .node-label,
311
- .class-label {
312
- flex: 1;
313
- text-align: left;
314
- padding: var(--space-xs) var(--space-sm);
315
- border-radius: var(--border-radius);
316
- transition: background-color var(--transition-fast);
317
- color: var(--color-text);
318
- font-size: var(--font-size-sm);
319
- }
297
+ .footer-text a:hover { text-decoration: underline; }
298
+
299
+ /* ========== Header ========== */
320
300
 
321
- .node-label:hover,
322
- .class-label:hover {
323
- background-color: var(--color-bg-tertiary);
301
+ .sidebar-toggle {
302
+ display: none;
303
+ align-items: center;
304
+ justify-content: center;
324
305
  }
325
306
 
326
- .node-label.active,
327
- .class-label.active {
328
- background-color: var(--color-accent);
329
- color: white;
330
- font-weight: var(--font-weight-medium);
307
+ .home-btn {
308
+ width: 32px;
309
+ height: 32px;
310
+ padding: 0;
311
+ color: var(--text-secondary);
312
+ display: flex;
313
+ align-items: center;
314
+ justify-content: center;
315
+ border-radius: var(--radius-md);
331
316
  }
332
317
 
333
- .count-badge {
334
- flex-shrink: 0;
335
- font-size: var(--font-size-xs);
336
- color: var(--color-text-muted);
337
- padding: 0.15em 0.5em;
338
- background-color: var(--color-bg-tertiary);
339
- border-radius: var(--border-radius);
318
+ .home-btn:hover {
319
+ background: var(--bg-hover);
320
+ color: var(--text-primary);
340
321
  }
341
322
 
342
- .node-children {
343
- margin-left: var(--space-md);
323
+ .header-breadcrumb {
324
+ font-size: var(--text-sm);
325
+ color: var(--text-secondary);
326
+ font-weight: 500;
344
327
  }
345
328
 
346
- /* Class Nodes */
347
- .class-node {
329
+ /* Search Trigger */
330
+ .search-trigger {
348
331
  display: flex;
349
332
  align-items: center;
350
- gap: var(--space-xs);
351
- padding: var(--space-xs);
352
- margin-left: calc(var(--space-md) + 20px);
353
- border-radius: var(--border-radius);
333
+ gap: var(--space-2);
334
+ width: 100%;
335
+ padding: var(--space-2) var(--space-3);
336
+ background: var(--bg-secondary);
337
+ border: 1px solid var(--border-light);
338
+ border-radius: var(--radius-md);
339
+ color: var(--text-muted);
340
+ font-size: var(--text-sm);
354
341
  cursor: pointer;
355
- transition: background-color var(--transition-fast);
342
+ transition: all var(--transition-fast);
356
343
  }
357
344
 
358
- .class-node:hover {
359
- background-color: var(--color-sidebar-hover);
345
+ .search-trigger:hover {
346
+ background: var(--bg-hover);
347
+ border-color: var(--border-medium);
360
348
  }
361
349
 
362
- .class-node.selected {
363
- background-color: var(--color-sidebar-active);
350
+ .search-placeholder { flex: 1; text-align: left; }
351
+
352
+ /* Header icon buttons */
353
+ .icon-btn {
354
+ width: 32px;
355
+ height: 32px;
356
+ padding: 0;
357
+ display: flex;
358
+ align-items: center;
359
+ justify-content: center;
360
+ color: var(--text-secondary);
361
+ border-radius: var(--radius-md);
362
+ transition: all var(--transition-fast);
364
363
  }
365
364
 
366
- .class-type-badge {
367
- font-size: var(--font-size-xs);
368
- padding: 0.1em 0.4em;
369
- background-color: var(--color-bg-tertiary);
370
- color: var(--color-text-muted);
371
- border-radius: var(--border-radius);
365
+ .icon-btn:hover {
366
+ background: var(--bg-hover);
367
+ color: var(--text-primary);
372
368
  }
373
369
 
374
- /* Breadcrumb */
375
- .breadcrumb-item {
376
- display: inline-flex;
377
- align-items: center;
378
- gap: var(--space-xs);
370
+ /* ========== Search Modal ========== */
371
+
372
+ .search-modal-overlay {
373
+ position: fixed;
374
+ inset: 0;
375
+ background: var(--bg-overlay);
376
+ display: flex;
377
+ align-items: flex-start;
378
+ justify-content: center;
379
+ z-index: var(--z-search-overlay);
380
+ animation: fadeIn var(--transition-fast);
379
381
  }
380
382
 
381
- .breadcrumb-separator {
382
- color: var(--color-text-muted);
383
- margin: 0 var(--space-xs);
383
+ .search-modal {
384
+ width: 100%;
385
+ max-width: 560px;
386
+ background: var(--bg-elevated);
387
+ border-radius: var(--radius-xl);
388
+ box-shadow: var(--shadow-lg);
389
+ overflow: hidden;
390
+ animation: slideUp var(--transition-slow);
384
391
  }
385
392
 
386
- /* Entity Header */
387
- .entity-header {
393
+ .search-input-wrapper {
388
394
  display: flex;
389
395
  align-items: center;
390
- gap: var(--space-md);
391
- margin-bottom: var(--space-lg);
392
- padding-bottom: var(--space-md);
393
- border-bottom: 2px solid var(--color-border);
396
+ gap: var(--space-3);
397
+ padding: var(--space-4);
398
+ border-bottom: 1px solid var(--border-light);
394
399
  }
395
400
 
396
- .entity-name {
397
- font-size: var(--font-size-3xl);
398
- margin: 0;
401
+ .search-input {
402
+ flex: 1;
403
+ border: none;
404
+ background: none;
405
+ font-size: var(--text-base);
406
+ color: var(--text-primary);
407
+ outline: none;
408
+ font-family: var(--font-sans);
399
409
  }
400
410
 
401
- .entity-type-badge {
402
- padding: 0.3em 0.8em;
403
- background-color: var(--color-accent);
404
- color: white;
405
- border-radius: var(--border-radius);
406
- font-size: var(--font-size-sm);
407
- font-weight: var(--font-weight-medium);
408
- }
411
+ .search-input::placeholder { color: var(--text-muted); }
409
412
 
410
- .abstract-badge {
411
- padding: 0.3em 0.8em;
412
- background-color: var(--color-warning);
413
- color: white;
414
- border-radius: var(--border-radius);
415
- font-size: var(--font-size-sm);
413
+ .search-results {
414
+ max-height: 400px;
415
+ overflow-y: auto;
416
416
  }
417
417
 
418
- /* Entity Metadata */
419
- .entity-metadata {
420
- background-color: var(--color-bg-secondary);
421
- padding: var(--space-md);
422
- border-radius: var(--border-radius-lg);
423
- margin-bottom: var(--space-lg);
418
+ .search-loading,
419
+ .search-empty {
420
+ padding: var(--space-8);
421
+ text-align: center;
422
+ color: var(--text-muted);
424
423
  }
425
424
 
426
- /* Definition/Description */
427
- .entity-definition {
428
- margin-bottom: var(--space-xl);
425
+ .search-results-list {
426
+ padding: var(--space-2);
429
427
  }
430
428
 
431
- .definition-content {
432
- background-color: var(--color-bg-secondary);
433
- padding: var(--space-lg);
434
- border-radius: var(--border-radius-lg);
435
- border-left: 4px solid var(--color-accent);
436
- line-height: var(--line-height-relaxed);
429
+ .search-result {
430
+ display: flex;
431
+ align-items: center;
432
+ gap: var(--space-3);
433
+ padding: var(--space-2) var(--space-3);
434
+ border-radius: var(--radius-md);
435
+ cursor: pointer;
436
+ transition: background var(--transition-fast);
437
437
  }
438
438
 
439
- /* Sections */
440
- .section {
441
- margin-bottom: var(--space-2xl);
439
+ .search-result:hover,
440
+ .search-result.focused {
441
+ background: var(--bg-hover);
442
442
  }
443
443
 
444
- .section h3 {
445
- margin-bottom: var(--space-md);
446
- padding-bottom: var(--space-sm);
447
- border-bottom: 2px solid var(--color-border);
444
+ .result-icon {
445
+ color: var(--text-muted);
446
+ display: flex;
447
+ align-items: center;
448
448
  }
449
449
 
450
- .section h4 {
451
- margin-top: var(--space-lg);
452
- margin-bottom: var(--space-sm);
453
- font-size: var(--font-size-base);
454
- color: var(--color-text-secondary);
450
+ .result-content {
451
+ flex: 1;
452
+ display: flex;
453
+ flex-direction: column;
454
+ gap: 2px;
455
+ min-width: 0;
455
456
  }
456
457
 
457
- /* Tables */
458
- .data-table {
459
- width: 100%;
460
- border: 1px solid var(--color-border);
461
- border-radius: var(--border-radius-lg);
458
+ .result-name {
459
+ font-size: var(--text-sm);
460
+ font-weight: 500;
461
+ color: var(--text-primary);
462
+ white-space: nowrap;
462
463
  overflow: hidden;
464
+ text-overflow: ellipsis;
463
465
  }
464
466
 
465
- .table-wrapper {
466
- overflow-x: auto;
467
- margin: var(--space-md) 0;
468
- border-radius: var(--border-radius-lg);
469
- border: 1px solid var(--color-border);
470
- }
471
-
472
- .table-wrapper .data-table {
473
- border: none;
474
- margin: 0;
467
+ .result-path {
468
+ font-size: var(--text-xs);
469
+ color: var(--text-muted);
475
470
  }
476
471
 
477
- .data-table thead {
478
- background-color: var(--color-primary);
479
- color: white;
472
+ .search-footer {
473
+ padding: var(--space-3) var(--space-4);
474
+ border-top: 1px solid var(--border-light);
475
+ background: var(--bg-secondary);
480
476
  }
481
477
 
482
- .data-table th {
483
- padding: var(--space-md);
484
- text-align: left;
485
- font-weight: var(--font-weight-semibold);
486
- font-size: var(--font-size-sm);
478
+ .search-hints {
479
+ display: flex;
480
+ gap: var(--space-4);
481
+ font-size: var(--text-xs);
482
+ color: var(--text-muted);
487
483
  }
488
484
 
489
- .data-table td {
490
- padding: var(--space-md);
491
- border-bottom: 1px solid var(--color-border-light);
485
+ .search-hints kbd {
486
+ padding: 2px 5px;
487
+ font-family: var(--font-mono);
488
+ font-size: 10px;
489
+ background: var(--bg-elevated);
490
+ border: 1px solid var(--border-medium);
491
+ border-radius: var(--radius-sm);
492
+ margin-right: 2px;
492
493
  }
493
494
 
494
- .data-table tbody tr:last-child td {
495
- border-bottom: none;
496
- }
495
+ /* ========== Welcome Screen ========== */
497
496
 
498
- .data-table tbody tr {
499
- transition: background-color var(--transition-fast);
497
+ .view-welcome {
498
+ max-width: 640px;
499
+ margin: 0 auto;
500
+ padding: var(--space-12) var(--space-4);
501
+ text-align: center;
500
502
  }
501
503
 
502
- .data-table tbody tr:hover {
503
- background-color: var(--color-bg-secondary);
504
+ .welcome-logo {
505
+ width: 48px;
506
+ height: 48px;
507
+ margin: 0 auto var(--space-4);
508
+ display: flex;
509
+ align-items: center;
510
+ justify-content: center;
504
511
  }
505
512
 
506
- .data-table tbody tr.clickable-row {
507
- cursor: pointer;
513
+ .welcome-logo svg {
514
+ width: 100%;
515
+ height: 100%;
508
516
  }
509
517
 
510
- .cell-description {
511
- font-size: var(--font-size-xs);
512
- color: var(--color-text-secondary);
513
- margin-top: var(--space-xs);
518
+ .welcome-title {
519
+ font-size: var(--text-3xl);
520
+ font-weight: 600;
521
+ margin-bottom: var(--space-2);
514
522
  }
515
523
 
516
- /* Badges */
517
- .stereotype-badge,
518
- .stereotype-tag {
519
- display: inline-block;
520
- padding: 0.2em 0.6em;
521
- margin-right: var(--space-xs);
522
- background-color: #e3f2fd;
523
- color: #1976d2;
524
- border-radius: var(--border-radius);
525
- font-size: var(--font-size-xs);
526
- font-weight: var(--font-weight-medium);
524
+ .welcome-subtitle {
525
+ font-size: var(--text-lg);
526
+ color: var(--text-secondary);
527
+ margin-bottom: var(--space-8);
527
528
  }
528
529
 
529
- .stereotype-prefix {
530
- font-size: var(--font-size-xs);
531
- color: var(--color-text-muted);
532
- font-weight: var(--font-weight-normal);
533
- margin-right: 0.25em;
530
+ .welcome-stats {
531
+ display: grid;
532
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
533
+ gap: var(--space-3);
534
+ margin-bottom: var(--space-8);
534
535
  }
535
536
 
536
- .type-badge {
537
- padding: 0.2em 0.5em;
538
- background-color: var(--color-bg-tertiary);
539
- border-radius: var(--border-radius);
540
- font-size: var(--font-size-xs);
541
- font-weight: var(--font-weight-medium);
537
+ .welcome-stat {
538
+ background: var(--bg-secondary);
539
+ border-radius: var(--radius-lg);
540
+ padding: var(--space-5);
542
541
  }
543
542
 
544
- .visibility-badge {
545
- padding: 0.2em 0.5em;
546
- border-radius: var(--border-radius);
547
- font-size: var(--font-size-xs);
543
+ .welcome-stat-value {
544
+ font-size: var(--text-2xl);
545
+ font-weight: 600;
546
+ color: var(--color-primary);
548
547
  }
549
548
 
550
- .visibility-badge[data-visibility="public"] {
551
- background-color: #e8f5e9;
552
- color: #2e7d32;
549
+ .welcome-stat-label {
550
+ font-size: var(--text-xs);
551
+ color: var(--text-muted);
552
+ text-transform: uppercase;
553
+ letter-spacing: 0.05em;
554
+ margin-top: var(--space-1);
553
555
  }
554
556
 
555
- .visibility-badge[data-visibility="private"] {
556
- background-color: #ffebee;
557
- color: #c62828;
557
+ .welcome-actions {
558
+ font-size: var(--text-sm);
559
+ color: var(--text-muted);
558
560
  }
559
561
 
560
- .visibility-badge[data-visibility="protected"] {
561
- background-color: #fff3e0;
562
- color: #ef6c00;
563
- }
562
+ /* ========== Entity Header ========== */
564
563
 
565
- .modifier-badge {
566
- padding: 0.2em 0.5em;
567
- margin-right: var(--space-xs);
568
- background-color: var(--color-bg-tertiary);
569
- border-radius: var(--border-radius);
570
- font-size: var(--font-size-xs);
571
- color: var(--color-text-secondary);
572
- }
573
-
574
- .aggregation-badge {
575
- padding: 0.2em 0.5em;
576
- background-color: #f3e5f5;
577
- color: #7b1fa2;
578
- border-radius: var(--border-radius);
579
- font-size: var(--font-size-xs);
580
- }
581
-
582
- /* Lists */
583
- .package-list,
584
- .diagram-list,
585
- .literals-list,
586
- .inheritance-list {
564
+ .entity-header {
587
565
  display: flex;
588
- flex-direction: column;
589
- gap: var(--space-sm);
566
+ align-items: flex-start;
567
+ gap: var(--space-4);
568
+ margin-bottom: var(--space-6);
569
+ padding-bottom: var(--space-4);
570
+ border-bottom: 1px solid var(--border-light);
590
571
  }
591
572
 
592
- .package-item,
593
- .diagram-item,
594
- .literal-item,
595
- .inheritance-item {
596
- display: flex;
597
- align-items: center;
598
- gap: var(--space-sm);
599
- padding: var(--space-md);
600
- background-color: var(--color-bg-secondary);
601
- border-radius: var(--border-radius-lg);
602
- transition: all var(--transition-fast);
573
+ .entity-title {
574
+ flex: 1;
575
+ min-width: 0;
603
576
  }
604
577
 
605
- .package-item,
606
- .inheritance-item {
607
- cursor: pointer;
578
+ .entity-name {
579
+ font-size: var(--text-2xl);
580
+ font-weight: 600;
581
+ margin: 0;
582
+ line-height: var(--leading-tight);
608
583
  }
609
584
 
610
- .package-item:hover,
611
- .inheritance-item:hover {
612
- background-color: var(--color-bg-tertiary);
613
- transform: translateX(4px);
585
+ .entity-subtitle {
586
+ font-size: var(--text-sm);
587
+ color: var(--text-muted);
588
+ margin-top: var(--space-1);
614
589
  }
615
590
 
616
- .item-icon {
591
+ .entity-badge {
592
+ padding: 0.25rem 0.75rem;
593
+ font-size: var(--text-xs);
594
+ font-weight: 500;
595
+ border-radius: var(--radius-md);
596
+ text-transform: uppercase;
597
+ letter-spacing: 0.025em;
617
598
  flex-shrink: 0;
618
- color: var(--color-accent);
599
+ margin-top: var(--space-1);
619
600
  }
620
601
 
621
- .item-name {
622
- flex: 1;
623
- font-weight: var(--font-weight-medium);
624
- }
602
+ .badge-package { background: var(--badge-package-bg); color: var(--badge-package); }
603
+ .badge-class { background: var(--badge-class-bg); color: var(--badge-class); }
604
+ .badge-enum { background: var(--badge-enum-bg); color: var(--badge-enum); }
605
+ .badge-datatype { background: var(--badge-datatype-bg); color: var(--badge-datatype); }
606
+ .badge-interface { background: var(--badge-interface-bg); color: var(--badge-interface); }
607
+ .badge-diagram { background: var(--badge-diagram-bg); color: var(--badge-diagram); }
608
+ .badge-abstract { background: var(--badge-abstract-bg); color: var(--badge-abstract); }
625
609
 
626
- .item-count,
627
- .diagram-type {
628
- font-size: var(--font-size-sm);
629
- color: var(--color-text-secondary);
630
- }
610
+ /* ========== Entity Metadata ========== */
631
611
 
632
- /* Statistics Grid */
633
- .stats-grid {
634
- display: grid;
635
- grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
636
- gap: var(--space-lg);
637
- margin: var(--space-2xl) 0;
612
+ .entity-metadata {
613
+ display: flex;
614
+ flex-wrap: wrap;
615
+ gap: var(--space-3) var(--space-6);
616
+ margin-bottom: var(--space-6);
617
+ font-size: var(--text-sm);
638
618
  }
639
619
 
640
- .stat-card {
641
- text-align: center;
642
- padding: var(--space-xl);
643
- background-color: var(--color-bg-secondary);
644
- border-radius: var(--border-radius-lg);
645
- transition: transform var(--transition-base);
620
+ .metadata-item {
621
+ display: flex;
622
+ gap: var(--space-2);
623
+ align-items: baseline;
646
624
  }
647
625
 
648
- .stat-card:hover {
649
- transform: translateY(-2px);
650
- box-shadow: var(--shadow-md);
626
+ .metadata-label {
627
+ font-weight: 500;
628
+ color: var(--text-muted);
629
+ font-size: var(--text-xs);
630
+ text-transform: uppercase;
631
+ letter-spacing: 0.03em;
651
632
  }
652
633
 
653
- .stat-value {
654
- font-size: var(--font-size-3xl);
655
- font-weight: var(--font-weight-bold);
656
- color: var(--color-accent);
657
- margin-bottom: var(--space-xs);
634
+ .metadata-value {
635
+ color: var(--text-secondary);
658
636
  }
659
637
 
660
- .stat-label {
661
- font-size: var(--font-size-sm);
662
- color: var(--color-text-secondary);
663
- text-transform: uppercase;
664
- letter-spacing: 0.5px;
638
+ /* Definition */
639
+ .entity-definition {
640
+ margin-bottom: var(--space-8);
665
641
  }
666
642
 
667
- /* Welcome Screen */
668
- .view-welcome {
669
- text-align: center;
670
- padding: var(--space-2xl);
643
+ .definition-content {
644
+ background: var(--bg-secondary);
645
+ padding: var(--space-4) var(--space-5);
646
+ border-radius: var(--radius-lg);
647
+ border-left: 3px solid var(--color-primary);
648
+ line-height: var(--leading-relaxed);
649
+ font-size: var(--text-sm);
650
+ color: var(--text-secondary);
671
651
  }
672
652
 
673
- .welcome-content h1 {
674
- margin-bottom: var(--space-md);
675
- }
653
+ /* ========== Sections ========== */
676
654
 
677
- .welcome-description {
678
- font-size: var(--font-size-lg);
679
- color: var(--color-text-secondary);
680
- margin-bottom: var(--space-2xl);
655
+ .section {
656
+ margin-bottom: var(--space-8);
681
657
  }
682
658
 
683
- .welcome-actions {
684
- margin-top: var(--space-2xl);
685
- padding: var(--space-xl);
686
- background-color: var(--color-bg-secondary);
687
- border-radius: var(--border-radius-lg);
659
+ .section-title {
660
+ font-size: var(--text-sm);
661
+ font-weight: 600;
662
+ text-transform: uppercase;
663
+ letter-spacing: 0.05em;
664
+ color: var(--text-muted);
665
+ margin-bottom: var(--space-3);
666
+ display: flex;
667
+ align-items: center;
668
+ gap: var(--space-2);
688
669
  }
689
670
 
690
- .keyboard-hint {
691
- display: inline-flex;
692
- gap: var(--space-xs);
671
+ .section-count {
672
+ font-size: var(--text-xs);
673
+ color: var(--text-muted);
674
+ background: var(--bg-secondary);
675
+ padding: 1px 6px;
676
+ border-radius: var(--radius-sm);
677
+ font-weight: 500;
693
678
  }
694
679
 
695
- /* Parameters */
696
- .parameters {
697
- margin-top: var(--space-xs);
698
- font-size: var(--font-size-xs);
699
- color: var(--color-text-secondary);
700
- }
680
+ /* ========== Data Table ========== */
701
681
 
702
- .param-label {
703
- margin-right: var(--space-xs);
682
+ .data-table {
683
+ width: 100%;
684
+ border-collapse: collapse;
685
+ font-size: var(--text-sm);
704
686
  }
705
687
 
706
- .param-item {
707
- margin-right: var(--space-sm);
688
+ .data-table th,
689
+ .data-table td {
690
+ padding: var(--space-2) var(--space-3);
691
+ text-align: left;
692
+ border-bottom: 1px solid var(--border-light);
708
693
  }
709
694
 
710
- /* Role name in associations */
711
- .role-name {
712
- font-size: var(--font-size-sm);
713
- color: var(--color-text-muted);
714
- font-style: italic;
695
+ .data-table th {
696
+ font-weight: 500;
697
+ color: var(--text-secondary);
698
+ background: var(--bg-secondary);
699
+ font-size: var(--text-xs);
700
+ text-transform: uppercase;
701
+ letter-spacing: 0.03em;
715
702
  }
716
703
 
717
- /* Loading state */
718
- .sidebar-loading {
719
- padding: var(--space-xl);
720
- text-align: center;
721
- color: var(--color-text-secondary);
704
+ .data-table tr:hover td {
705
+ background: var(--bg-hover);
722
706
  }
723
707
 
724
- /* Stereotypes cell */
725
- .stereotypes-cell {
726
- display: flex;
727
- flex-wrap: wrap;
728
- gap: var(--space-xs);
708
+ .data-table tr.clickable-row { cursor: pointer; }
709
+
710
+ .table-wrapper {
711
+ overflow-x: auto;
712
+ border: 1px solid var(--border-light);
713
+ border-radius: var(--radius-lg);
729
714
  }
730
715
 
731
- .count-value {
732
- color: var(--color-text-secondary);
733
- font-variant-numeric: tabular-nums;
716
+ .table-wrapper .data-table { margin: 0; }
717
+
718
+ /* ========== Links ========== */
719
+
720
+ .link-button {
721
+ color: var(--color-primary);
722
+ background: none;
723
+ border: none;
724
+ cursor: pointer;
725
+ padding: 0;
726
+ font-size: inherit;
727
+ font-family: inherit;
728
+ text-align: left;
734
729
  }
735
730
 
736
- /* Literal description */
737
- .literal-description {
738
- margin-left: var(--space-md);
739
- font-size: var(--font-size-sm);
740
- color: var(--color-text-secondary);
731
+ .link-button:hover {
732
+ color: var(--color-primary-dark);
733
+ text-decoration: underline;
741
734
  }
742
735
 
743
- /* Type link and styling */
744
736
  .type-link {
745
- color: var(--color-link);
737
+ color: var(--color-primary);
746
738
  background: none;
747
739
  border: none;
748
740
  cursor: pointer;
749
741
  padding: 0;
750
- text-decoration: underline;
751
- font-family: monospace;
742
+ font-family: var(--font-mono);
743
+ font-size: inherit;
752
744
  }
753
745
 
754
746
  .type-link:hover {
755
- color: var(--color-link-hover);
747
+ color: var(--color-primary-dark);
748
+ text-decoration: underline;
756
749
  }
757
750
 
758
751
  .uml-basic-type {
759
- color: #1976d2;
760
- font-weight: var(--font-weight-medium);
752
+ color: var(--color-teal);
753
+ font-weight: 500;
761
754
  }
762
755
 
763
756
  .type-unresolved {
764
- color: #c62828;
765
- font-weight: var(--font-weight-medium);
766
- font-family: monospace;
757
+ color: var(--color-orange);
758
+ font-weight: 500;
759
+ font-family: var(--font-mono);
760
+ }
761
+
762
+ /* ========== List Items ========== */
763
+
764
+ .item-list {
765
+ display: flex;
766
+ flex-direction: column;
767
+ gap: var(--space-1);
767
768
  }
768
769
 
769
- /* Inherited items styling */
770
- .inherited-attributes-table,
771
- .inherited-associations-table {
772
- opacity: 0.9;
773
- font-size: var(--font-size-sm);
770
+ .list-item {
771
+ display: flex;
772
+ align-items: center;
773
+ gap: var(--space-3);
774
+ padding: var(--space-2) var(--space-3);
775
+ border-radius: var(--radius-md);
776
+ cursor: pointer;
777
+ transition: all var(--transition-fast);
778
+ font-size: var(--text-sm);
774
779
  }
775
780
 
776
- .inherited-attributes-table tbody tr,
777
- .inherited-associations-table tbody tr {
778
- background-color: var(--color-bg-secondary);
781
+ .list-item:hover {
782
+ background: var(--bg-hover);
779
783
  }
780
784
 
781
- .inherited-from-cell {
782
- background-color: var(--color-bg-tertiary);
783
- font-style: italic;
785
+ .list-item-icon {
786
+ color: var(--text-muted);
787
+ flex-shrink: 0;
788
+ }
789
+
790
+ .list-item-name {
791
+ flex: 1;
792
+ font-weight: 500;
793
+ color: var(--text-primary);
784
794
  white-space: nowrap;
785
- min-width: 120px;
795
+ overflow: hidden;
796
+ text-overflow: ellipsis;
786
797
  }
787
798
 
788
- .inherited-link {
789
- color: var(--color-text-secondary);
790
- font-size: var(--font-size-sm);
791
- font-weight: var(--font-weight-medium);
799
+ .list-item-meta {
800
+ font-size: var(--text-xs);
801
+ color: var(--text-muted);
802
+ flex-shrink: 0;
792
803
  }
793
804
 
794
- .inherited-link:hover {
795
- color: var(--color-link);
805
+ /* ========== Inheritance ========== */
806
+
807
+ .inheritance-group {
808
+ margin-bottom: var(--space-6);
796
809
  }
797
810
 
798
- /* Make inherited tables more compact */
799
- .inherited-attributes-table th,
800
- .inherited-associations-table th {
801
- font-size: var(--font-size-xs);
802
- padding: var(--space-sm);
811
+ .inheritance-header {
812
+ display: flex;
813
+ align-items: center;
814
+ gap: var(--space-2);
815
+ padding: var(--space-2) var(--space-3);
816
+ background: var(--bg-secondary);
817
+ border-left: 3px solid var(--color-primary);
818
+ border-radius: 0 var(--radius-md) var(--radius-md) 0;
819
+ margin-bottom: var(--space-3);
820
+ font-size: var(--text-sm);
821
+ font-weight: 500;
822
+ color: var(--text-secondary);
803
823
  }
804
824
 
805
- .inherited-attributes-table td,
806
- .inherited-associations-table td {
807
- padding: var(--space-sm);
808
- font-size: var(--font-size-sm);
825
+ /* ========== Empty State ========== */
826
+
827
+ .empty-state {
828
+ padding: var(--space-8);
829
+ text-align: center;
830
+ color: var(--text-muted);
831
+ font-size: var(--text-sm);
809
832
  }
810
833
 
811
- /* Inheritance section */
812
- .inheritance-list {
813
- display: flex;
814
- flex-direction: column;
815
- gap: var(--space-md);
834
+ .info-message {
835
+ padding: var(--space-3) var(--space-4);
836
+ background: var(--color-primary-alpha);
837
+ border-radius: var(--radius-md);
838
+ font-size: var(--text-sm);
839
+ color: var(--color-primary);
840
+ margin-bottom: var(--space-4);
816
841
  }
817
842
 
818
- .inheritance-meta {
819
- margin-left: var(--space-lg);
820
- font-size: var(--font-size-sm);
821
- color: var(--color-text-secondary);
822
- display: flex;
823
- gap: var(--space-md);
843
+ /* ========== Cell Helpers ========== */
844
+
845
+ .cell-description {
846
+ font-size: var(--text-xs);
847
+ color: var(--text-muted);
848
+ margin-top: var(--space-1);
824
849
  }
825
850
 
826
- .inheritance-path, .inheritance-attrs {
827
- font-size: var(--font-size-xs);
851
+ .visibility-badge {
852
+ display: inline-block;
853
+ padding: 0.125rem 0.375rem;
854
+ font-size: var(--text-xs);
855
+ border-radius: var(--radius-sm);
828
856
  }
829
857
 
830
- /* Inherited group styling */
831
- .inherited-group {
832
- margin-bottom: var(--space-xl);
858
+ .visibility-badge[data-visibility="public"] { background: var(--color-green-alpha); color: var(--color-green); }
859
+ .visibility-badge[data-visibility="private"] { background: var(--color-red-alpha); color: var(--color-red); }
860
+ .visibility-badge[data-visibility="protected"] { background: var(--color-orange-alpha); color: var(--color-orange); }
861
+
862
+ .modifier-badge {
863
+ display: inline-block;
864
+ padding: 0.1rem 0.4rem;
865
+ font-size: var(--text-xs);
866
+ background: var(--bg-secondary);
867
+ border-radius: var(--radius-sm);
868
+ color: var(--text-muted);
869
+ margin-right: var(--space-1);
833
870
  }
834
871
 
835
- .inherited-group-header {
836
- display: flex;
837
- align-items: center;
838
- gap: var(--space-sm);
839
- padding: var(--space-md);
840
- background-color: var(--color-bg-secondary);
841
- border-left: 4px solid var(--color-accent);
842
- margin-bottom: var(--space-md);
843
- font-size: var(--font-size-base);
844
- font-weight: var(--font-weight-semibold);
872
+ .stereotype-tag {
873
+ display: inline-block;
874
+ padding: 0.1rem 0.4rem;
875
+ font-size: var(--text-xs);
876
+ font-weight: 500;
877
+ background: var(--badge-interface-bg);
878
+ color: var(--badge-interface);
879
+ border-radius: var(--radius-sm);
880
+ margin-right: var(--space-1);
845
881
  }
846
882
 
847
- .inherited-group-header .link-button {
848
- font-size: var(--font-size-lg);
849
- font-weight: var(--font-weight-bold);
850
- color: var(--color-accent);
883
+ /* ========== Search Results View ========== */
884
+
885
+ .result-group {
886
+ margin-bottom: var(--space-6);
851
887
  }
852
888
 
853
- .inherited-group-header .link-button:hover {
854
- text-decoration: none;
855
- opacity: 0.8;
856
- }
889
+ .result-group-title {
890
+ font-size: var(--text-sm);
891
+ font-weight: 600;
892
+ text-transform: uppercase;
893
+ letter-spacing: 0.05em;
894
+ color: var(--text-muted);
895
+ margin-bottom: var(--space-3);
896
+ }
897
+
898
+ /* Inherited tables */
899
+ .inherited-table {
900
+ font-size: var(--text-sm);
901
+ opacity: 0.92;
902
+ }
903
+
904
+ .inherited-table th { font-size: var(--text-xs); }
905
+ .inherited-table td { padding: var(--space-2); }