fraim 2.0.161 → 2.0.162

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.
@@ -0,0 +1,354 @@
1
+ /* ===========================================================================
2
+ Issue #512 S6 — Review experience (R7), Learnings over sleep-on-learnings
3
+ (R9), and Reverse mentoring (R10). Additive stylesheet linked after
4
+ styles.css so it can build on the existing Hub token system without
5
+ touching the shipped rules. Tokens: --accent, --accent-strong,
6
+ --accent-soft, --muted, --line, --surface, --text, --done, --warn,
7
+ --danger.
8
+ =========================================================================== */
9
+
10
+ /* ── R7: completion card + format-derived artifact strip (in the thread) ── */
11
+ .review-completion {
12
+ margin: 4px 22px 14px;
13
+ display: flex;
14
+ flex-direction: column;
15
+ gap: 10px;
16
+ }
17
+ .review-card {
18
+ background: rgba(255, 255, 255, 0.86);
19
+ border: 1px solid rgba(31, 67, 125, 0.14);
20
+ border-radius: 16px;
21
+ padding: 14px 16px;
22
+ display: flex;
23
+ flex-direction: column;
24
+ gap: 8px;
25
+ box-shadow: 0 4px 12px rgba(35, 30, 23, 0.05);
26
+ }
27
+ .review-card .rc-heading {
28
+ font-size: 15px;
29
+ font-weight: 700;
30
+ color: var(--text);
31
+ }
32
+ .review-card .rc-row {
33
+ display: grid;
34
+ grid-template-columns: 110px minmax(0, 1fr);
35
+ gap: 10px;
36
+ align-items: baseline;
37
+ }
38
+ .review-card .rc-k {
39
+ font-size: 11px;
40
+ font-weight: 700;
41
+ text-transform: uppercase;
42
+ letter-spacing: 0.06em;
43
+ color: var(--muted);
44
+ }
45
+ .review-card .rc-v {
46
+ font-size: 14px;
47
+ color: var(--text);
48
+ line-height: 1.45;
49
+ }
50
+ .rc-artifact-strip {
51
+ display: flex;
52
+ flex-wrap: wrap;
53
+ gap: 8px;
54
+ }
55
+ .rc-art-btn {
56
+ background: var(--accent);
57
+ color: #fff;
58
+ border: none;
59
+ border-radius: 10px;
60
+ padding: 8px 14px;
61
+ font-size: 13px;
62
+ font-weight: 600;
63
+ }
64
+ .rc-art-btn:hover { background: var(--accent-strong); }
65
+ .rc-art-btn.ghost {
66
+ background: transparent;
67
+ color: var(--text);
68
+ border: 1px solid var(--line);
69
+ font-weight: 500;
70
+ }
71
+ .rc-art-btn.ghost:hover { background: var(--soft); }
72
+
73
+ /* ── R7.7: unified action bar — review actions sit beside the always-on
74
+ coaching chips inside the coach panel. The chips/input never disappear. ── */
75
+ .review-actions {
76
+ display: flex;
77
+ flex-wrap: wrap;
78
+ align-items: center;
79
+ gap: 8px;
80
+ margin-bottom: 10px;
81
+ padding-bottom: 10px;
82
+ border-bottom: 1px dashed var(--line);
83
+ }
84
+ .review-actions .rb-approve {
85
+ background: var(--done, #2e7d32);
86
+ color: #fff;
87
+ border: none;
88
+ border-radius: 10px;
89
+ padding: 8px 16px;
90
+ font-size: 13px;
91
+ font-weight: 700;
92
+ }
93
+ .review-actions .rb-approve:hover { filter: brightness(0.94); }
94
+ .review-actions .rb-secondary {
95
+ background: var(--warn, #f57c00);
96
+ border: none;
97
+ border-radius: 10px;
98
+ padding: 8px 14px;
99
+ font-size: 13px;
100
+ font-weight: 600;
101
+ color: #fff;
102
+ }
103
+ .review-actions .rb-secondary:hover { filter: brightness(0.94); }
104
+ .review-actions .rb-handoff {
105
+ font-size: 12px;
106
+ color: var(--muted);
107
+ flex: 1 1 220px;
108
+ min-width: 0;
109
+ }
110
+
111
+ /* ── R9: Learnings surface (Share learnings + Bless/Skip proposals) ── */
112
+ .learn-head-row {
113
+ display: flex;
114
+ align-items: flex-start;
115
+ justify-content: space-between;
116
+ gap: 12px;
117
+ margin-bottom: 12px;
118
+ }
119
+ .learn-head-row .lh-title {
120
+ font-size: 16px;
121
+ font-weight: 700;
122
+ color: var(--text);
123
+ }
124
+ .learn-head-row .lh-sub {
125
+ font-size: 13px;
126
+ color: var(--muted);
127
+ margin-top: 2px;
128
+ }
129
+ .lh-run {
130
+ flex-shrink: 0;
131
+ background: var(--accent);
132
+ color: #fff;
133
+ border: none;
134
+ border-radius: 12px;
135
+ padding: 9px 16px;
136
+ font-size: 13px;
137
+ font-weight: 600;
138
+ box-shadow: var(--shadow);
139
+ }
140
+ .lh-run:hover { background: var(--accent-strong); }
141
+
142
+ .learn-list {
143
+ display: flex;
144
+ flex-direction: column;
145
+ gap: 12px;
146
+ }
147
+ .learn-prop {
148
+ background: var(--surface);
149
+ border: 1px solid var(--line);
150
+ border-radius: 16px;
151
+ padding: 14px 16px;
152
+ display: flex;
153
+ flex-direction: column;
154
+ gap: 8px;
155
+ transition: opacity 160ms ease;
156
+ }
157
+ .learn-prop.resolved { opacity: 0.45; }
158
+ .learn-prop .lp-head {
159
+ display: flex;
160
+ align-items: center;
161
+ gap: 10px;
162
+ }
163
+ .learn-prop .lp-scope {
164
+ font-size: 10px;
165
+ font-weight: 700;
166
+ padding: 2px 8px;
167
+ border-radius: 6px;
168
+ text-transform: uppercase;
169
+ letter-spacing: 0.04em;
170
+ flex-shrink: 0;
171
+ }
172
+ .learn-prop .lp-scope.scope-org { background: var(--accent-soft); color: var(--accent-strong); }
173
+ .learn-prop .lp-scope.scope-mgr { background: #ede5ff; color: #6b4c92; }
174
+ .learn-prop .lp-scope.scope-proj { background: #e3f0e8; color: #2e7d4f; }
175
+ .learn-prop .lp-title {
176
+ font-size: 14px;
177
+ font-weight: 600;
178
+ color: var(--text);
179
+ }
180
+ .learn-prop .lp-body {
181
+ font-size: 13px;
182
+ color: var(--text);
183
+ line-height: 1.5;
184
+ }
185
+ .learn-prop .lp-example {
186
+ font-size: 13px;
187
+ color: var(--muted);
188
+ font-style: italic;
189
+ border-left: 3px solid var(--line);
190
+ padding-left: 10px;
191
+ }
192
+ .learn-prop .lp-actions {
193
+ display: flex;
194
+ align-items: center;
195
+ gap: 8px;
196
+ flex-wrap: wrap;
197
+ margin-top: 2px;
198
+ }
199
+
200
+ /* #533 #3: per-card edit/delete + per-section add + inline editor. */
201
+ .learn-prop .lp-head .lp-title { flex: 1; min-width: 0; }
202
+ .learn-prop .lp-act {
203
+ width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line);
204
+ background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1;
205
+ display: none; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
206
+ }
207
+ .learn-prop:hover .lp-act, .learn-prop:focus-within .lp-act { display: inline-flex; }
208
+ .learn-prop .lp-act:hover { color: var(--accent); border-color: var(--accent); }
209
+ .learn-prop .lp-act-del:hover { color: var(--danger, #d2261f); border-color: var(--danger, #d2261f); }
210
+ .learn-prop .lp-edit { display: flex; flex-direction: column; gap: 8px; }
211
+ .learn-prop .lp-edit-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
212
+ .learn-prop .lp-edit-cat, .learn-prop .lp-edit-prio {
213
+ font: inherit; font-size: 12px; padding: 6px 8px; border: 1px solid var(--line);
214
+ border-radius: 8px; background: var(--surface); color: var(--text);
215
+ }
216
+ .learn-prop .lp-edit-title {
217
+ flex: 1; min-width: 140px; font: inherit; font-size: 13px; padding: 7px 10px;
218
+ border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text);
219
+ }
220
+ .learn-prop .lp-edit-body {
221
+ width: 100%; min-height: 90px; box-sizing: border-box; resize: vertical; font: inherit;
222
+ font-size: 13px; line-height: 1.5; padding: 8px 10px; border: 1px solid var(--line);
223
+ border-radius: 8px; background: var(--surface); color: var(--text);
224
+ }
225
+ .learn-prop .lp-edit-title:focus, .learn-prop .lp-edit-body:focus { outline: none; border-color: var(--accent); }
226
+ .learn-prop .lp-edit-bar { display: flex; align-items: center; gap: 10px; }
227
+ .learn-prop .lp-confirm { font-size: 12px; color: var(--text); margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
228
+ .lp-add-btn {
229
+ align-self: flex-start; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--accent);
230
+ background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 7px 14px; cursor: pointer;
231
+ }
232
+ .lp-add-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
233
+ .learn-prop .lp-bless {
234
+ background: var(--done, #2e7d32);
235
+ color: #fff;
236
+ border: none;
237
+ border-radius: 9px;
238
+ padding: 6px 14px;
239
+ font-size: 12px;
240
+ font-weight: 700;
241
+ }
242
+ .learn-prop .lp-skip {
243
+ background: transparent;
244
+ border: 1px solid var(--line);
245
+ color: var(--text);
246
+ border-radius: 9px;
247
+ padding: 6px 14px;
248
+ font-size: 12px;
249
+ font-weight: 600;
250
+ }
251
+ .learn-prop .lp-bless:disabled,
252
+ .learn-prop .lp-skip:disabled { cursor: default; opacity: 0.7; }
253
+ .learn-prop .lp-scope-note {
254
+ font-size: 11px;
255
+ color: var(--muted);
256
+ }
257
+
258
+ /* #521 R7: promote-to-scope buttons on project candidates */
259
+ .learn-prop .lp-promote-label { font-size: 11px; font-weight: 600; color: var(--muted); }
260
+ .learn-prop .lp-promote {
261
+ border: 1px solid var(--line);
262
+ background: var(--surface);
263
+ color: var(--text);
264
+ border-radius: 9px;
265
+ padding: 6px 12px;
266
+ font-size: 12px;
267
+ font-weight: 600;
268
+ }
269
+ .learn-prop .lp-promote.scope-proj { border-color: rgba(46,125,50,.5); }
270
+ .learn-prop .lp-promote.scope-mgr { border-color: rgba(139,95,191,.5); }
271
+ .learn-prop .lp-promote.scope-org { border-color: rgba(0,113,227,.5); }
272
+ .learn-prop .lp-promote.done { background: var(--done, #2e7d32); color: #fff; border-color: transparent; }
273
+ .learn-prop .lp-promote:disabled { cursor: default; opacity: 0.7; }
274
+
275
+ /* ── R10: Reverse mentoring items (Got it / Dismiss) ── */
276
+ .rev-item {
277
+ background: var(--surface);
278
+ border: 1px solid var(--line);
279
+ border-radius: 16px;
280
+ padding: 14px 16px;
281
+ display: flex;
282
+ flex-direction: column;
283
+ gap: 8px;
284
+ transition: opacity 160ms ease;
285
+ }
286
+ .rev-item .rev-from {
287
+ display: flex;
288
+ align-items: center;
289
+ gap: 8px;
290
+ font-size: 13px;
291
+ font-weight: 600;
292
+ color: var(--text);
293
+ }
294
+ .rev-item .rev-av {
295
+ width: 24px;
296
+ height: 24px;
297
+ border-radius: 8px;
298
+ background: var(--accent-soft);
299
+ color: var(--accent-strong);
300
+ display: inline-flex;
301
+ align-items: center;
302
+ justify-content: center;
303
+ font-size: 10px;
304
+ font-weight: 700;
305
+ }
306
+ .rev-item .rev-msg {
307
+ font-size: 14px;
308
+ color: var(--text);
309
+ line-height: 1.5;
310
+ }
311
+ .rev-item .rev-actions {
312
+ display: flex;
313
+ gap: 8px;
314
+ }
315
+ .rev-item .rev-gotit {
316
+ background: var(--accent);
317
+ color: #fff;
318
+ border: none;
319
+ border-radius: 9px;
320
+ padding: 6px 14px;
321
+ font-size: 12px;
322
+ font-weight: 600;
323
+ }
324
+ .rev-item .rev-gotit:hover { background: var(--accent-strong); }
325
+ .rev-item .rev-dismiss {
326
+ background: transparent;
327
+ border: 1px solid var(--line);
328
+ color: var(--text);
329
+ border-radius: 9px;
330
+ padding: 6px 14px;
331
+ font-size: 12px;
332
+ font-weight: 500;
333
+ }
334
+ .rev-item .rev-dismiss:hover { background: var(--soft); }
335
+
336
+ /* ── R9: project-scoped learnings panel (over the workspace conversation) ── */
337
+ .proj-learnings-panel {
338
+ position: absolute;
339
+ inset: 0;
340
+ background: var(--bg);
341
+ overflow-y: auto;
342
+ z-index: 5;
343
+ }
344
+ .proj-learnings-panel .pl-back {
345
+ background: transparent;
346
+ border: 1px solid var(--line);
347
+ border-radius: 10px;
348
+ padding: 7px 14px;
349
+ font-size: 13px;
350
+ font-weight: 600;
351
+ color: var(--text);
352
+ }
353
+ .proj-learnings-panel .pl-back:hover { background: var(--soft); }
354
+ .workspace-conv { position: relative; }