@atlashub/smartstack-cli 4.22.0 → 4.24.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.
Files changed (36) hide show
  1. package/package.json +1 -1
  2. package/templates/skills/ba-design-ui/SKILL.md +91 -0
  3. package/templates/skills/ba-design-ui/steps/step-01-screens.md +177 -0
  4. package/templates/skills/ba-design-ui/steps/step-02-wireframes.md +140 -0
  5. package/templates/skills/ba-design-ui/steps/step-03-navigation.md +134 -0
  6. package/templates/skills/ba-generate-html/SKILL.md +0 -1
  7. package/templates/skills/ba-generate-html/html/ba-interactive.html +950 -1055
  8. package/templates/skills/ba-generate-html/html/src/scripts/01-data-init.js +1 -2
  9. package/templates/skills/ba-generate-html/html/src/scripts/02-navigation.js +0 -1
  10. package/templates/skills/ba-generate-html/html/src/scripts/03-render-cadrage.js +0 -39
  11. package/templates/skills/ba-generate-html/html/src/scripts/05-render-specs.js +0 -1
  12. package/templates/skills/ba-generate-html/html/src/scripts/07-render-handoff.js +0 -1
  13. package/templates/skills/ba-generate-html/html/src/scripts/08-editing.js +133 -135
  14. package/templates/skills/ba-generate-html/html/src/scripts/10-comments.js +199 -199
  15. package/templates/skills/ba-generate-html/html/src/scripts/11-review-panel.js +165 -166
  16. package/templates/skills/ba-generate-html/html/src/styles/05-modules.css +444 -454
  17. package/templates/skills/ba-generate-html/html/src/template.html +0 -49
  18. package/templates/skills/ba-generate-html/references/data-build.md +176 -182
  19. package/templates/skills/ba-generate-html/references/data-mapping.md +295 -299
  20. package/templates/skills/ba-generate-html/steps/step-01-collect.md +4 -22
  21. package/templates/skills/ba-generate-html/steps/step-02-build-data.md +2 -11
  22. package/templates/skills/ba-review/SKILL.md +16 -1
  23. package/templates/skills/ba-review/steps/step-01-apply.md +60 -10
  24. package/templates/skills/business-analyse/SKILL.md +19 -15
  25. package/templates/skills/business-analyse/steps/step-03-specify.md +9 -38
  26. package/templates/skills/derive-prd/SKILL.md +9 -9
  27. package/templates/skills/derive-prd/references/acceptance-criteria.md +166 -116
  28. package/templates/skills/derive-prd/references/entity-domain-mapping.md +5 -5
  29. package/templates/skills/derive-prd/references/handoff-file-templates.md +12 -12
  30. package/templates/skills/derive-prd/references/handoff-mappings.md +13 -14
  31. package/templates/skills/derive-prd/references/handoff-seeddata-generation.md +1 -1
  32. package/templates/skills/derive-prd/references/readiness-scoring.md +41 -50
  33. package/templates/skills/derive-prd/schemas/handoff-schema.json +2 -2
  34. package/templates/skills/derive-prd/steps/step-00-validate.md +73 -52
  35. package/templates/skills/derive-prd/steps/step-01-transform.md +86 -43
  36. package/templates/skills/ba-generate-html/html/src/partials/cadrage-risks.html +0 -48
package/templates/skills/ba-generate-html/html/src/styles/05-modules.css CHANGED
@@ -1,454 +1,444 @@
1
- /* ============================================
2
- USE CASE LIST
3
- ============================================ */
4
- .uc-list { list-style: none; }
5
-
6
- .uc-item {
7
- background: var(--bg-card);
8
- border: 1px solid var(--border);
9
- border-radius: 8px;
10
- padding: 1rem 1.25rem;
11
- margin-bottom: 0.75rem;
12
- transition: border-color var(--transition-fast);
13
- }
14
- .uc-item:hover { border-color: var(--border-light); }
15
-
16
- .uc-header {
17
- display: flex;
18
- align-items: center;
19
- gap: 0.75rem;
20
- margin-bottom: 0.5rem;
21
- }
22
- .uc-id {
23
- font-size: 0.7rem;
24
- font-weight: 700;
25
- color: var(--primary-light);
26
- background: rgba(99,102,241,0.1);
27
- padding: 0.15rem 0.5rem;
28
- border-radius: 4px;
29
- }
30
- .uc-title { font-weight: 600; color: var(--text-bright); flex: 1; }
31
- .uc-actions { display: flex; gap: 0.3rem; opacity: 0; transition: opacity var(--transition-fast); }
32
- .uc-item:hover .uc-actions { opacity: 1; }
33
-
34
- .uc-detail { font-size: 0.875rem; color: var(--text); }
35
- .uc-detail-label { color: var(--text-muted); font-size: 0.75rem; font-weight: 600; margin-top: 0.5rem; }
36
-
37
- .uc-actors {
38
- display: flex; gap: 0.4rem; margin-top: 0.3rem; flex-wrap: wrap;
39
- }
40
- .uc-actor {
41
- font-size: 0.7rem;
42
- padding: 0.1rem 0.4rem;
43
- background: rgba(6,182,212,0.1);
44
- color: var(--accent);
45
- border-radius: 4px;
46
- border: 1px solid rgba(6,182,212,0.2);
47
- }
48
-
49
- /* ============================================
50
- BUSINESS RULE LIST
51
- ============================================ */
52
- .br-item {
53
- display: flex;
54
- align-items: flex-start;
55
- gap: 0.75rem;
56
- padding: 0.75rem 1rem;
57
- background: var(--bg-card);
58
- border: 1px solid var(--border);
59
- border-radius: 8px;
60
- margin-bottom: 0.5rem;
61
- }
62
- .br-category {
63
- font-size: 0.65rem;
64
- font-weight: 700;
65
- text-transform: uppercase;
66
- padding: 0.15rem 0.4rem;
67
- border-radius: 4px;
68
- flex-shrink: 0;
69
- min-width: 70px;
70
- text-align: center;
71
- }
72
- .br-cat-validation { background: rgba(99,102,241,0.15); color: var(--primary-light); }
73
- .br-cat-calculation { background: rgba(234,179,8,0.15); color: #facc15; }
74
- .br-cat-workflow { background: rgba(249,115,22,0.15); color: var(--secondary); }
75
- .br-cat-security { background: rgba(239,68,68,0.15); color: #f87171; }
76
- .br-cat-data { background: rgba(6,182,212,0.15); color: var(--accent); }
77
- .br-text { flex: 1; font-size: 0.875rem; }
78
-
79
- /* ============================================
80
- STAKEHOLDER TABLE
81
- ============================================ */
82
- .stakeholder-grid {
83
- display: grid;
84
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
85
- gap: 1rem;
86
- }
87
- .stakeholder-card {
88
- background: var(--bg-card);
89
- border: 1px solid var(--border);
90
- border-radius: 10px;
91
- padding: 1rem;
92
- }
93
- .stakeholder-card:hover { border-color: var(--border-light); }
94
- .stakeholder-role { font-weight: 600; color: var(--text-bright); margin-bottom: 0.25rem; }
95
- .stakeholder-function { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; }
96
- .stakeholder-tasks { list-style: none; }
97
- .stakeholder-tasks li {
98
- font-size: 0.8rem;
99
- padding: 0.15rem 0;
100
- color: var(--text);
101
- }
102
- .stakeholder-tasks li::before { content: "- "; color: var(--primary-light); }
103
- .stakeholder-meta {
104
- display: flex; gap: 0.75rem; margin-top: 0.5rem; padding-top: 0.5rem;
105
- border-top: 1px solid var(--border);
106
- }
107
- .stakeholder-meta span { font-size: 0.7rem; color: var(--text-muted); }
108
-
109
- /* ============================================
110
- PROCESS FLOW
111
- ============================================ */
112
- .process-flow {
113
- display: flex;
114
- align-items: center;
115
- gap: 0.25rem;
116
- overflow-x: auto;
117
- padding: 1rem 0;
118
- }
119
- .process-step {
120
- background: var(--bg-card);
121
- border: 1px solid var(--border);
122
- border-radius: 8px;
123
- padding: 0.75rem 1rem;
124
- min-width: 140px;
125
- text-align: center;
126
- flex-shrink: 0;
127
- }
128
- .process-step:hover { border-color: var(--primary); }
129
- .process-step-number {
130
- font-size: 0.65rem;
131
- color: var(--primary-light);
132
- font-weight: 700;
133
- }
134
- .process-step-label { font-size: 0.8rem; color: var(--text-bright); font-weight: 500; }
135
- .process-arrow { color: var(--text-muted); font-size: 1.2rem; flex-shrink: 0; }
136
-
137
- /* ============================================
138
- RISK TABLE
139
- ============================================ */
140
- .risk-item {
141
- display: grid;
142
- grid-template-columns: auto 1fr auto auto;
143
- gap: 1rem;
144
- align-items: center;
145
- padding: 0.75rem 1rem;
146
- background: var(--bg-card);
147
- border: 1px solid var(--border);
148
- border-radius: 8px;
149
- margin-bottom: 0.5rem;
150
- }
151
- .risk-level {
152
- width: 10px; height: 10px;
153
- border-radius: 50%;
154
- }
155
- .risk-critical { background: var(--error); }
156
- .risk-medium { background: var(--warning); }
157
- .risk-low { background: var(--success); }
158
- .risk-text { font-size: 0.875rem; }
159
- .risk-probability, .risk-impact {
160
- font-size: 0.7rem;
161
- color: var(--text-muted);
162
- text-align: center;
163
- }
164
-
165
- /* ============================================
166
- MODULE CARDS (Decomposition)
167
- ============================================ */
168
- .module-grid {
169
- display: grid;
170
- grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
171
- gap: 1rem;
172
- }
173
- .module-card {
174
- background: var(--bg-card);
175
- border: 1px solid var(--border);
176
- border-radius: 10px;
177
- padding: 1rem;
178
- cursor: pointer;
179
- transition: all var(--transition-fast);
180
- position: relative;
181
- }
182
- .module-card:hover { border-color: var(--primary); }
183
- .module-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99,102,241,0.2); }
184
- .module-card-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.5rem; }
185
- .module-card-code { font-weight: 700; color: var(--text-bright); font-size: 1rem; }
186
- .module-card-type {
187
- font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
188
- padding: 0.15rem 0.5rem; border-radius: 4px;
189
- background: rgba(99,102,241,0.1); color: var(--primary-light);
190
- }
191
- .module-card-desc { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; }
192
- .module-card-meta { display: flex; gap: 0.75rem; font-size: 0.7rem; color: var(--text-muted); }
193
- .module-card-meta span { display: flex; align-items: center; gap: 0.2rem; }
194
- .module-card-remove {
195
- position: absolute; top: 0.5rem; right: 0.5rem;
196
- background: none; border: none; color: var(--text-muted);
197
- cursor: pointer; font-size: 0.8rem; opacity: 0;
198
- transition: opacity var(--transition-fast);
199
- }
200
- .module-card:hover .module-card-remove { opacity: 1; }
201
- .module-card-remove:hover { color: var(--error); }
202
-
203
- /* ============================================
204
- TABS (Module Specification)
205
- ============================================ */
206
- .tab-bar {
207
- display: flex;
208
- gap: 0;
209
- border-bottom: 1px solid var(--border);
210
- margin-bottom: 1.5rem;
211
- overflow-x: auto;
212
- }
213
- .tab-btn {
214
- padding: 0.6rem 1rem;
215
- background: none;
216
- border: none;
217
- border-bottom: 2px solid transparent;
218
- color: var(--text-muted);
219
- font-size: 0.8rem;
220
- font-family: inherit;
221
- cursor: pointer;
222
- white-space: nowrap;
223
- transition: all var(--transition-fast);
224
- }
225
- .tab-btn:hover { color: var(--text-bright); background: var(--bg-hover); }
226
- .tab-btn.active { color: var(--primary-light); border-bottom-color: var(--primary); font-weight: 500; }
227
- .tab-panel { display: none; }
228
- .tab-panel.active { display: block; }
229
-
230
- /* ============================================
231
- ENTITY TABLE
232
- ============================================ */
233
- .entity-block {
234
- background: var(--bg-card);
235
- border: 1px solid var(--border);
236
- border-radius: 10px;
237
- margin-bottom: 1rem;
238
- overflow: hidden;
239
- }
240
- .entity-header {
241
- display: flex; align-items: center; justify-content: space-between;
242
- padding: 0.75rem 1rem;
243
- background: var(--bg-hover);
244
- border-bottom: 1px solid var(--border);
245
- }
246
- .entity-name { font-weight: 600; color: var(--text-bright); }
247
- .entity-desc { font-size: 0.8rem; color: var(--text-muted); }
248
- .attr-table { width: 100%; border-collapse: collapse; }
249
- .attr-table th {
250
- text-align: left; font-size: 0.7rem; text-transform: uppercase;
251
- letter-spacing: 0.05em; color: var(--text-muted); padding: 0.5rem 0.75rem;
252
- border-bottom: 1px solid var(--border); font-weight: 600;
253
- }
254
- .attr-table td {
255
- padding: 0.5rem 0.75rem; font-size: 0.85rem;
256
- border-bottom: 1px solid rgba(51,65,85,0.3);
257
- }
258
- .attr-required { color: var(--error); font-weight: 700; }
259
-
260
- /* ============================================
261
- DEPENDENCY VISUALIZATION
262
- ============================================ */
263
- .dep-graph {
264
- display: flex; flex-direction: column; gap: 1.5rem;
265
- padding: 1.5rem; background: var(--bg-card); border: 1px solid var(--border);
266
- border-radius: 10px;
267
- }
268
- .dep-layer {
269
- display: flex; align-items: center; gap: 1rem;
270
- }
271
- .dep-layer-label {
272
- font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;
273
- letter-spacing: 0.05em; min-width: 80px; font-weight: 600;
274
- }
275
- .dep-layer-modules { display: flex; gap: 0.75rem; flex-wrap: wrap; }
276
- .dep-module {
277
- padding: 0.4rem 0.8rem; border-radius: 6px;
278
- background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.3);
279
- color: var(--primary-light); font-size: 0.8rem; font-weight: 500;
280
- }
281
- .dep-arrow {
282
- text-align: center; color: var(--text-muted); font-size: 1.2rem;
283
- padding-left: 80px;
284
- }
285
-
286
- /* ============================================
287
- STAT CARDS (Handoff)
288
- ============================================ */
289
- .stat-grid {
290
- display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
291
- gap: 1rem; margin-bottom: 1.5rem;
292
- }
293
- .stat-card {
294
- background: var(--bg-card); border: 1px solid var(--border);
295
- border-radius: 10px; padding: 1rem; text-align: center;
296
- }
297
- .stat-value { font-size: 1.8rem; font-weight: 700; color: var(--text-bright); }
298
- .stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }
299
-
300
- /* ============================================
301
- CONSOLIDATION
302
- ============================================ */
303
- .interaction-item {
304
- display: flex; align-items: center; gap: 0.75rem;
305
- padding: 0.75rem 1rem; background: var(--bg-card);
306
- border: 1px solid var(--border); border-radius: 8px;
307
- margin-bottom: 0.5rem; font-size: 0.85rem;
308
- }
309
- .interaction-arrow { color: var(--primary-light); font-weight: 700; font-size: 1.1rem; }
310
- .interaction-type {
311
- font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
312
- padding: 0.15rem 0.4rem; border-radius: 4px;
313
- background: rgba(6,182,212,0.1); color: var(--accent);
314
- }
315
- .e2e-flow {
316
- display: flex; align-items: center; gap: 0.3rem;
317
- overflow-x: auto; padding: 1rem 0;
318
- }
319
- .e2e-step {
320
- padding: 0.5rem 0.75rem; border-radius: 6px; text-align: center;
321
- font-size: 0.75rem; flex-shrink: 0;
322
- background: var(--bg-card); border: 1px solid var(--border);
323
- }
324
- .e2e-step-module { font-weight: 600; color: var(--primary-light); font-size: 0.65rem; }
325
- .e2e-step-action { color: var(--text-bright); }
326
-
327
- /* ============================================
328
- DATA MODEL (Consolidation)
329
- ============================================ */
330
- .dm-summary {
331
- display: flex; gap: 1.5rem; margin-bottom: 1.5rem;
332
- padding: 1rem 1.5rem; background: var(--bg-card);
333
- border: 1px solid var(--border); border-radius: 10px;
334
- }
335
- .dm-summary-item { display: flex; align-items: baseline; gap: 0.4rem; }
336
- .dm-summary-value { font-size: 1.4rem; font-weight: 700; color: var(--text-bright); }
337
- .dm-summary-label { font-size: 0.8rem; color: var(--text-muted); }
338
- .dm-module-group { margin-bottom: 1.5rem; }
339
- .dm-module-header {
340
- display: flex; align-items: center; justify-content: space-between;
341
- padding: 0.5rem 0; margin-bottom: 0.75rem;
342
- border-bottom: 2px solid var(--primary);
343
- }
344
- .dm-module-name { font-weight: 700; color: var(--primary-light); font-size: 1rem; }
345
- .dm-module-count { font-size: 0.75rem; color: var(--text-muted); }
346
- .dm-entity-grid {
347
- display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem;
348
- }
349
- .dm-entity-card {
350
- background: var(--bg-card); border: 1px solid var(--border);
351
- border-radius: 10px; overflow: hidden;
352
- transition: border-color var(--transition-fast);
353
- }
354
- .dm-entity-card:hover { border-color: var(--border-light); }
355
- .dm-entity-header {
356
- display: flex; align-items: center; justify-content: space-between;
357
- padding: 0.6rem 0.75rem; background: var(--bg-hover);
358
- border-bottom: 1px solid var(--border);
359
- }
360
- .dm-entity-name { font-weight: 600; color: var(--text-bright); font-size: 0.95rem; }
361
- .dm-entity-attr-count {
362
- font-size: 0.65rem; color: var(--text-muted);
363
- background: rgba(99,102,241,0.1); padding: 0.1rem 0.4rem; border-radius: 4px;
364
- }
365
- .dm-entity-desc {
366
- padding: 0.5rem 0.75rem; font-size: 0.8rem; color: var(--text-muted);
367
- border-bottom: 1px solid var(--border);
368
- }
369
- .dm-attr-table { width: 100%; border-collapse: collapse; }
370
- .dm-attr-table th {
371
- text-align: left; font-size: 0.65rem; text-transform: uppercase;
372
- letter-spacing: 0.05em; color: var(--text-muted); padding: 0.4rem 0.75rem;
373
- border-bottom: 1px solid var(--border); font-weight: 600;
374
- }
375
- .dm-attr-table td { padding: 0.35rem 0.75rem; font-size: 0.8rem; border-bottom: 1px solid rgba(51,65,85,0.2); }
376
- .dm-attr-name { font-weight: 500; color: var(--text-bright); white-space: nowrap; }
377
- .dm-attr-desc { color: var(--text-muted); }
378
- .dm-relations {
379
- padding: 0.5rem 0.75rem; border-top: 1px solid var(--border);
380
- background: rgba(6,182,212,0.03);
381
- }
382
- .dm-relations-title {
383
- font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
384
- color: var(--accent); font-weight: 600; margin-bottom: 0.3rem;
385
- }
386
- .dm-relation-item {
387
- font-size: 0.8rem; color: var(--text); padding: 0.15rem 0;
388
- padding-left: 0.75rem; border-left: 2px solid var(--accent);
389
- margin-bottom: 0.2rem;
390
- }
391
-
392
- /* ============================================
393
- STRUCTURE TAB (Sections/Resources)
394
- ============================================ */
395
- .struct-section {
396
- background: var(--bg-card);
397
- border: 1px solid var(--border);
398
- border-radius: 10px;
399
- margin-bottom: 1rem;
400
- overflow: hidden;
401
- }
402
- .struct-section-header {
403
- display: flex;
404
- align-items: center;
405
- gap: 0.75rem;
406
- padding: 0.75rem 1rem;
407
- background: var(--bg-hover);
408
- border-bottom: 1px solid var(--border);
409
- }
410
- .struct-section-code {
411
- font-weight: 600;
412
- color: var(--text-bright);
413
- font-size: 0.95rem;
414
- }
415
- .struct-section-desc {
416
- flex: 1;
417
- font-size: 0.8rem;
418
- color: var(--text-muted);
419
- }
420
- .struct-section-badge {
421
- font-size: 0.65rem;
422
- color: var(--text-muted);
423
- background: rgba(99,102,241,0.1);
424
- padding: 0.1rem 0.5rem;
425
- border-radius: 4px;
426
- white-space: nowrap;
427
- }
428
- .struct-resources {
429
- padding: 0.5rem 0;
430
- }
431
- .struct-resource {
432
- display: flex;
433
- align-items: baseline;
434
- gap: 0.5rem;
435
- padding: 0.35rem 1rem 0.35rem 1.5rem;
436
- font-size: 0.85rem;
437
- transition: background var(--transition-fast);
438
- }
439
- .struct-resource:hover {
440
- background: var(--bg-hover);
441
- }
442
- .struct-resource-icon {
443
- color: var(--primary-light);
444
- font-size: 0.7rem;
445
- flex-shrink: 0;
446
- }
447
- .struct-resource-name {
448
- font-weight: 500;
449
- color: var(--text-bright);
450
- }
451
- .struct-resource-desc {
452
- font-size: 0.8rem;
453
- color: var(--text-muted);
454
- }
1
+ /* ============================================
2
+ USE CASE LIST
3
+ ============================================ */
4
+ .uc-list { list-style: none; }
5
+
6
+ .uc-item {
7
+ background: var(--bg-card);
8
+ border: 1px solid var(--border);
9
+ border-radius: 8px;
10
+ padding: 1rem 1.25rem;
11
+ margin-bottom: 0.75rem;
12
+ transition: border-color var(--transition-fast);
13
+ }
14
+ .uc-item:hover { border-color: var(--border-light); }
15
+
16
+ .uc-header {
17
+ display: flex;
18
+ align-items: center;
19
+ gap: 0.75rem;
20
+ margin-bottom: 0.5rem;
21
+ }
22
+ .uc-id {
23
+ font-size: 0.7rem;
24
+ font-weight: 700;
25
+ color: var(--primary-light);
26
+ background: rgba(99,102,241,0.1);
27
+ padding: 0.15rem 0.5rem;
28
+ border-radius: 4px;
29
+ }
30
+ .uc-title { font-weight: 600; color: var(--text-bright); flex: 1; }
31
+ .uc-actions { display: flex; gap: 0.3rem; opacity: 0; transition: opacity var(--transition-fast); }
32
+ .uc-item:hover .uc-actions { opacity: 1; }
33
+
34
+ .uc-detail { font-size: 0.875rem; color: var(--text); }
35
+ .uc-detail-label { color: var(--text-muted); font-size: 0.75rem; font-weight: 600; margin-top: 0.5rem; }
36
+
37
+ .uc-actors {
38
+ display: flex; gap: 0.4rem; margin-top: 0.3rem; flex-wrap: wrap;
39
+ }
40
+ .uc-actor {
41
+ font-size: 0.7rem;
42
+ padding: 0.1rem 0.4rem;
43
+ background: rgba(6,182,212,0.1);
44
+ color: var(--accent);
45
+ border-radius: 4px;
46
+ border: 1px solid rgba(6,182,212,0.2);
47
+ }
48
+
49
+ /* ============================================
50
+ BUSINESS RULE LIST
51
+ ============================================ */
52
+ .br-item {
53
+ display: flex;
54
+ align-items: flex-start;
55
+ gap: 0.75rem;
56
+ padding: 0.75rem 1rem;
57
+ background: var(--bg-card);
58
+ border: 1px solid var(--border);
59
+ border-radius: 8px;
60
+ margin-bottom: 0.5rem;
61
+ }
62
+ .br-category {
63
+ font-size: 0.65rem;
64
+ font-weight: 700;
65
+ text-transform: uppercase;
66
+ padding: 0.15rem 0.4rem;
67
+ border-radius: 4px;
68
+ flex-shrink: 0;
69
+ min-width: 70px;
70
+ text-align: center;
71
+ }
72
+ .br-cat-validation { background: rgba(99,102,241,0.15); color: var(--primary-light); }
73
+ .br-cat-calculation { background: rgba(234,179,8,0.15); color: #facc15; }
74
+ .br-cat-workflow { background: rgba(249,115,22,0.15); color: var(--secondary); }
75
+ .br-cat-security { background: rgba(239,68,68,0.15); color: #f87171; }
76
+ .br-cat-data { background: rgba(6,182,212,0.15); color: var(--accent); }
77
+ .br-text { flex: 1; font-size: 0.875rem; }
78
+
79
+ /* ============================================
80
+ STAKEHOLDER TABLE
81
+ ============================================ */
82
+ .stakeholder-grid {
83
+ display: grid;
84
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
85
+ gap: 1rem;
86
+ }
87
+ .stakeholder-card {
88
+ background: var(--bg-card);
89
+ border: 1px solid var(--border);
90
+ border-radius: 10px;
91
+ padding: 1rem;
92
+ }
93
+ .stakeholder-card:hover { border-color: var(--border-light); }
94
+ .stakeholder-role { font-weight: 600; color: var(--text-bright); margin-bottom: 0.25rem; }
95
+ .stakeholder-function { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; }
96
+ .stakeholder-tasks { list-style: none; }
97
+ .stakeholder-tasks li {
98
+ font-size: 0.8rem;
99
+ padding: 0.15rem 0;
100
+ color: var(--text);
101
+ }
102
+ .stakeholder-tasks li::before { content: "- "; color: var(--primary-light); }
103
+ .stakeholder-meta {
104
+ display: flex; gap: 0.75rem; margin-top: 0.5rem; padding-top: 0.5rem;
105
+ border-top: 1px solid var(--border);
106
+ }
107
+ .stakeholder-meta span { font-size: 0.7rem; color: var(--text-muted); }
108
+
109
+ /* ============================================
110
+ PROCESS FLOW
111
+ ============================================ */
112
+ .process-flow {
113
+ display: flex;
114
+ align-items: center;
115
+ gap: 0.25rem;
116
+ overflow-x: auto;
117
+ padding: 1rem 0;
118
+ }
119
+ .process-step {
120
+ background: var(--bg-card);
121
+ border: 1px solid var(--border);
122
+ border-radius: 8px;
123
+ padding: 0.75rem 1rem;
124
+ min-width: 140px;
125
+ text-align: center;
126
+ flex-shrink: 0;
127
+ }
128
+ .process-step:hover { border-color: var(--primary); }
129
+ .process-step-number {
130
+ font-size: 0.65rem;
131
+ color: var(--primary-light);
132
+ font-weight: 700;
133
+ }
134
+ .process-step-label { font-size: 0.8rem; color: var(--text-bright); font-weight: 500; }
135
+ .process-arrow { color: var(--text-muted); font-size: 1.2rem; flex-shrink: 0; }
136
+
137
+ /* ============================================
138
+ display: grid;
139
+ grid-template-columns: auto 1fr auto auto;
140
+ gap: 1rem;
141
+ align-items: center;
142
+ padding: 0.75rem 1rem;
143
+ background: var(--bg-card);
144
+ border: 1px solid var(--border);
145
+ border-radius: 8px;
146
+ margin-bottom: 0.5rem;
147
+ }
148
+ width: 10px; height: 10px;
149
+ border-radius: 50%;
150
+ }
151
+ font-size: 0.7rem;
152
+ color: var(--text-muted);
153
+ text-align: center;
154
+ }
155
+ /* ============================================
156
+ MODULE CARDS (Decomposition)
157
+ ============================================ */
158
+ .module-grid {
159
+ display: grid;
160
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
161
+ gap: 1rem;
162
+ }
163
+ .module-card {
164
+ background: var(--bg-card);
165
+ border: 1px solid var(--border);
166
+ border-radius: 10px;
167
+ padding: 1rem;
168
+ cursor: pointer;
169
+ transition: all var(--transition-fast);
170
+ position: relative;
171
+ }
172
+ .module-card:hover { border-color: var(--primary); }
173
+ .module-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99,102,241,0.2); }
174
+ .module-card-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.5rem; }
175
+ .module-card-code { font-weight: 700; color: var(--text-bright); font-size: 1rem; }
176
+ .module-card-type {
177
+ font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
178
+ padding: 0.15rem 0.5rem; border-radius: 4px;
179
+ background: rgba(99,102,241,0.1); color: var(--primary-light);
180
+ }
181
+ .module-card-desc { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; }
182
+ .module-card-meta { display: flex; gap: 0.75rem; font-size: 0.7rem; color: var(--text-muted); }
183
+ .module-card-meta span { display: flex; align-items: center; gap: 0.2rem; }
184
+ .module-card-remove {
185
+ position: absolute; top: 0.5rem; right: 0.5rem;
186
+ background: none; border: none; color: var(--text-muted);
187
+ cursor: pointer; font-size: 0.8rem; opacity: 0;
188
+ transition: opacity var(--transition-fast);
189
+ }
190
+ .module-card:hover .module-card-remove { opacity: 1; }
191
+ .module-card-remove:hover { color: var(--error); }
192
+
193
+ /* ============================================
194
+ TABS (Module Specification)
195
+ ============================================ */
196
+ .tab-bar {
197
+ display: flex;
198
+ gap: 0;
199
+ border-bottom: 1px solid var(--border);
200
+ margin-bottom: 1.5rem;
201
+ overflow-x: auto;
202
+ }
203
+ .tab-btn {
204
+ padding: 0.6rem 1rem;
205
+ background: none;
206
+ border: none;
207
+ border-bottom: 2px solid transparent;
208
+ color: var(--text-muted);
209
+ font-size: 0.8rem;
210
+ font-family: inherit;
211
+ cursor: pointer;
212
+ white-space: nowrap;
213
+ transition: all var(--transition-fast);
214
+ }
215
+ .tab-btn:hover { color: var(--text-bright); background: var(--bg-hover); }
216
+ .tab-btn.active { color: var(--primary-light); border-bottom-color: var(--primary); font-weight: 500; }
217
+ .tab-panel { display: none; }
218
+ .tab-panel.active { display: block; }
219
+
220
+ /* ============================================
221
+ ENTITY TABLE
222
+ ============================================ */
223
+ .entity-block {
224
+ background: var(--bg-card);
225
+ border: 1px solid var(--border);
226
+ border-radius: 10px;
227
+ margin-bottom: 1rem;
228
+ overflow: hidden;
229
+ }
230
+ .entity-header {
231
+ display: flex; align-items: center; justify-content: space-between;
232
+ padding: 0.75rem 1rem;
233
+ background: var(--bg-hover);
234
+ border-bottom: 1px solid var(--border);
235
+ }
236
+ .entity-name { font-weight: 600; color: var(--text-bright); }
237
+ .entity-desc { font-size: 0.8rem; color: var(--text-muted); }
238
+ .attr-table { width: 100%; border-collapse: collapse; }
239
+ .attr-table th {
240
+ text-align: left; font-size: 0.7rem; text-transform: uppercase;
241
+ letter-spacing: 0.05em; color: var(--text-muted); padding: 0.5rem 0.75rem;
242
+ border-bottom: 1px solid var(--border); font-weight: 600;
243
+ }
244
+ .attr-table td {
245
+ padding: 0.5rem 0.75rem; font-size: 0.85rem;
246
+ border-bottom: 1px solid rgba(51,65,85,0.3);
247
+ }
248
+ .attr-required { color: var(--error); font-weight: 700; }
249
+
250
+ /* ============================================
251
+ DEPENDENCY VISUALIZATION
252
+ ============================================ */
253
+ .dep-graph {
254
+ display: flex; flex-direction: column; gap: 1.5rem;
255
+ padding: 1.5rem; background: var(--bg-card); border: 1px solid var(--border);
256
+ border-radius: 10px;
257
+ }
258
+ .dep-layer {
259
+ display: flex; align-items: center; gap: 1rem;
260
+ }
261
+ .dep-layer-label {
262
+ font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;
263
+ letter-spacing: 0.05em; min-width: 80px; font-weight: 600;
264
+ }
265
+ .dep-layer-modules { display: flex; gap: 0.75rem; flex-wrap: wrap; }
266
+ .dep-module {
267
+ padding: 0.4rem 0.8rem; border-radius: 6px;
268
+ background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.3);
269
+ color: var(--primary-light); font-size: 0.8rem; font-weight: 500;
270
+ }
271
+ .dep-arrow {
272
+ text-align: center; color: var(--text-muted); font-size: 1.2rem;
273
+ padding-left: 80px;
274
+ }
275
+
276
+ /* ============================================
277
+ STAT CARDS (Handoff)
278
+ ============================================ */
279
+ .stat-grid {
280
+ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
281
+ gap: 1rem; margin-bottom: 1.5rem;
282
+ }
283
+ .stat-card {
284
+ background: var(--bg-card); border: 1px solid var(--border);
285
+ border-radius: 10px; padding: 1rem; text-align: center;
286
+ }
287
+ .stat-value { font-size: 1.8rem; font-weight: 700; color: var(--text-bright); }
288
+ .stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }
289
+
290
+ /* ============================================
291
+ CONSOLIDATION
292
+ ============================================ */
293
+ .interaction-item {
294
+ display: flex; align-items: center; gap: 0.75rem;
295
+ padding: 0.75rem 1rem; background: var(--bg-card);
296
+ border: 1px solid var(--border); border-radius: 8px;
297
+ margin-bottom: 0.5rem; font-size: 0.85rem;
298
+ }
299
+ .interaction-arrow { color: var(--primary-light); font-weight: 700; font-size: 1.1rem; }
300
+ .interaction-type {
301
+ font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
302
+ padding: 0.15rem 0.4rem; border-radius: 4px;
303
+ background: rgba(6,182,212,0.1); color: var(--accent);
304
+ }
305
+ .e2e-flow {
306
+ display: flex; align-items: center; gap: 0.3rem;
307
+ overflow-x: auto; padding: 1rem 0;
308
+ }
309
+ .e2e-step {
310
+ padding: 0.5rem 0.75rem; border-radius: 6px; text-align: center;
311
+ font-size: 0.75rem; flex-shrink: 0;
312
+ background: var(--bg-card); border: 1px solid var(--border);
313
+ }
314
+ .e2e-step-module { font-weight: 600; color: var(--primary-light); font-size: 0.65rem; }
315
+ .e2e-step-action { color: var(--text-bright); }
316
+
317
+ /* ============================================
318
+ DATA MODEL (Consolidation)
319
+ ============================================ */
320
+ .dm-summary {
321
+ display: flex; gap: 1.5rem; margin-bottom: 1.5rem;
322
+ padding: 1rem 1.5rem; background: var(--bg-card);
323
+ border: 1px solid var(--border); border-radius: 10px;
324
+ }
325
+ .dm-summary-item { display: flex; align-items: baseline; gap: 0.4rem; }
326
+ .dm-summary-value { font-size: 1.4rem; font-weight: 700; color: var(--text-bright); }
327
+ .dm-summary-label { font-size: 0.8rem; color: var(--text-muted); }
328
+ .dm-module-group { margin-bottom: 1.5rem; }
329
+ .dm-module-header {
330
+ display: flex; align-items: center; justify-content: space-between;
331
+ padding: 0.5rem 0; margin-bottom: 0.75rem;
332
+ border-bottom: 2px solid var(--primary);
333
+ }
334
+ .dm-module-name { font-weight: 700; color: var(--primary-light); font-size: 1rem; }
335
+ .dm-module-count { font-size: 0.75rem; color: var(--text-muted); }
336
+ .dm-entity-grid {
337
+ display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem;
338
+ }
339
+ .dm-entity-card {
340
+ background: var(--bg-card); border: 1px solid var(--border);
341
+ border-radius: 10px; overflow: hidden;
342
+ transition: border-color var(--transition-fast);
343
+ }
344
+ .dm-entity-card:hover { border-color: var(--border-light); }
345
+ .dm-entity-header {
346
+ display: flex; align-items: center; justify-content: space-between;
347
+ padding: 0.6rem 0.75rem; background: var(--bg-hover);
348
+ border-bottom: 1px solid var(--border);
349
+ }
350
+ .dm-entity-name { font-weight: 600; color: var(--text-bright); font-size: 0.95rem; }
351
+ .dm-entity-attr-count {
352
+ font-size: 0.65rem; color: var(--text-muted);
353
+ background: rgba(99,102,241,0.1); padding: 0.1rem 0.4rem; border-radius: 4px;
354
+ }
355
+ .dm-entity-desc {
356
+ padding: 0.5rem 0.75rem; font-size: 0.8rem; color: var(--text-muted);
357
+ border-bottom: 1px solid var(--border);
358
+ }
359
+ .dm-attr-table { width: 100%; border-collapse: collapse; }
360
+ .dm-attr-table th {
361
+ text-align: left; font-size: 0.65rem; text-transform: uppercase;
362
+ letter-spacing: 0.05em; color: var(--text-muted); padding: 0.4rem 0.75rem;
363
+ border-bottom: 1px solid var(--border); font-weight: 600;
364
+ }
365
+ .dm-attr-table td { padding: 0.35rem 0.75rem; font-size: 0.8rem; border-bottom: 1px solid rgba(51,65,85,0.2); }
366
+ .dm-attr-name { font-weight: 500; color: var(--text-bright); white-space: nowrap; }
367
+ .dm-attr-desc { color: var(--text-muted); }
368
+ .dm-relations {
369
+ padding: 0.5rem 0.75rem; border-top: 1px solid var(--border);
370
+ background: rgba(6,182,212,0.03);
371
+ }
372
+ .dm-relations-title {
373
+ font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
374
+ color: var(--accent); font-weight: 600; margin-bottom: 0.3rem;
375
+ }
376
+ .dm-relation-item {
377
+ font-size: 0.8rem; color: var(--text); padding: 0.15rem 0;
378
+ padding-left: 0.75rem; border-left: 2px solid var(--accent);
379
+ margin-bottom: 0.2rem;
380
+ }
381
+
382
+ /* ============================================
383
+ STRUCTURE TAB (Sections/Resources)
384
+ ============================================ */
385
+ .struct-section {
386
+ background: var(--bg-card);
387
+ border: 1px solid var(--border);
388
+ border-radius: 10px;
389
+ margin-bottom: 1rem;
390
+ overflow: hidden;
391
+ }
392
+ .struct-section-header {
393
+ display: flex;
394
+ align-items: center;
395
+ gap: 0.75rem;
396
+ padding: 0.75rem 1rem;
397
+ background: var(--bg-hover);
398
+ border-bottom: 1px solid var(--border);
399
+ }
400
+ .struct-section-code {
401
+ font-weight: 600;
402
+ color: var(--text-bright);
403
+ font-size: 0.95rem;
404
+ }
405
+ .struct-section-desc {
406
+ flex: 1;
407
+ font-size: 0.8rem;
408
+ color: var(--text-muted);
409
+ }
410
+ .struct-section-badge {
411
+ font-size: 0.65rem;
412
+ color: var(--text-muted);
413
+ background: rgba(99,102,241,0.1);
414
+ padding: 0.1rem 0.5rem;
415
+ border-radius: 4px;
416
+ white-space: nowrap;
417
+ }
418
+ .struct-resources {
419
+ padding: 0.5rem 0;
420
+ }
421
+ .struct-resource {
422
+ display: flex;
423
+ align-items: baseline;
424
+ gap: 0.5rem;
425
+ padding: 0.35rem 1rem 0.35rem 1.5rem;
426
+ font-size: 0.85rem;
427
+ transition: background var(--transition-fast);
428
+ }
429
+ .struct-resource:hover {
430
+ background: var(--bg-hover);
431
+ }
432
+ .struct-resource-icon {
433
+ color: var(--primary-light);
434
+ font-size: 0.7rem;
435
+ flex-shrink: 0;
436
+ }
437
+ .struct-resource-name {
438
+ font-weight: 500;
439
+ color: var(--text-bright);
440
+ }
441
+ .struct-resource-desc {
442
+ font-size: 0.8rem;
443
+ color: var(--text-muted);
444
+ }