@kontourai/survey 0.5.2 → 0.6.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 (15) hide show
  1. package/README.md +34 -7
  2. package/bin/survey-review-mcp.mjs +7 -0
  3. package/dist/src/mcp/review-mcp-bin.d.ts +1 -0
  4. package/dist/src/mcp/review-mcp-bin.js +2 -0
  5. package/dist/src/mcp/review-mcp.d.ts +1 -0
  6. package/dist/src/mcp/review-mcp.js +599 -0
  7. package/dist/src/review-workbench/review-workbench-css.generated.d.ts +2 -0
  8. package/dist/src/review-workbench/review-workbench-css.generated.js +1795 -0
  9. package/dist/src/review-workbench/review-workbench-element.d.ts +45 -0
  10. package/dist/src/review-workbench/review-workbench-element.js +215 -0
  11. package/dist/src/review-workbench/review-workbench.css +196 -14
  12. package/dist/src/review-workbench/review-workbench.js +83 -19
  13. package/dist/src/review-workbench/review-workbench.standalone.css +196 -14
  14. package/example-data/mcp-review-session.json +878 -0
  15. package/package.json +14 -4
package/dist/src/review-workbench/review-workbench-css.generated.js ADDED
@@ -0,0 +1,1795 @@
1
+ // Generated by scripts/copy-review-workbench-package-assets.cjs from CSS sources.
2
+ // Do not edit directly; edit examples/review-workbench/review-workbench.css or vendor tokens instead.
3
+ /* eslint-disable */
4
+ export const REVIEW_WORKBENCH_CSS = `/* Bundled, scoped Survey Review Workbench styles for downstream embeds. Font loading is left to the host app. */
5
+ .survey-workbench-embed{
6
+ color-scheme: dark;
7
+
8
+ /* structure */
9
+ --k-bg: #0a0e13;
10
+ --k-panel: #111824;
11
+ --k-panel-raised: #16202d;
12
+ --k-line: rgba(150, 180, 210, 0.12);
13
+ --k-line-strong: rgba(150, 180, 210, 0.22);
14
+ --k-shadow: 0 26px 60px -42px rgba(0, 0, 0, 0.95);
15
+
16
+ /* text */
17
+ --k-text: #eef3f8;
18
+ --k-text-muted: #aebccb;
19
+ --k-text-faint: #72869b;
20
+
21
+ /* brand */
22
+ --k-brand: #5ce0c6;
23
+ --k-brand-contrast: #06080b;
24
+
25
+ /* semantic status scale */
26
+ --k-positive: #34d399;
27
+ --k-caution: #f3b14b;
28
+ --k-negative: #ff6f6f;
29
+ --k-neutral: #6f8095;
30
+ --k-active: #7aa2ff;
31
+ --k-positive-soft: color-mix(in oklab, var(--k-positive) 14%, transparent);
32
+ --k-caution-soft: color-mix(in oklab, var(--k-caution) 14%, transparent);
33
+ --k-negative-soft: color-mix(in oklab, var(--k-negative) 14%, transparent);
34
+ --k-active-soft: color-mix(in oklab, var(--k-active) 14%, transparent);
35
+
36
+ /* spacing */
37
+ --k-space-1: 4px;
38
+ --k-space-2: 8px;
39
+ --k-space-3: 12px;
40
+ --k-space-4: 16px;
41
+ --k-space-5: 24px;
42
+ --k-space-6: 32px;
43
+
44
+ /* radius */
45
+ --k-radius-sm: 9px;
46
+ --k-radius-md: 14px;
47
+
48
+ /* type */
49
+ --k-text-xs: 11px;
50
+ --k-text-sm: 12.5px;
51
+ --k-text-md: 14px;
52
+ --k-text-lg: 18px;
53
+ --k-text-xl: 22px;
54
+ --k-text-2xl: clamp(26px, 3.4vw, 38px);
55
+
56
+ /* fonts */
57
+ --k-font-display: "Fraunces", Georgia, "Times New Roman", serif;
58
+ --k-font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
59
+ --k-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
60
+
61
+ /* motion */
62
+ --k-ease: cubic-bezier(0.22, 1, 0.36, 1);
63
+ --k-dur: 0.16s;
64
+ }
65
+
66
+ .survey-workbench-embed[data-theme="light"]{
67
+ color-scheme: light;
68
+ --k-bg: #f5f4ef;
69
+ --k-panel: #ffffff;
70
+ --k-panel-raised: #fbfaf7;
71
+ --k-line: rgba(36, 40, 46, 0.12);
72
+ --k-line-strong: rgba(36, 40, 46, 0.20);
73
+ --k-shadow: 0 18px 50px -30px rgba(0, 0, 0, 0.25);
74
+ --k-text: #202124;
75
+ --k-text-muted: #5b626b;
76
+ --k-text-faint: #707782;
77
+ --k-brand-contrast: #ffffff;
78
+ --k-positive: #168257;
79
+ --k-caution: #8a5a00;
80
+ --k-negative: #c83b3b;
81
+ --k-neutral: #5f6975;
82
+ --k-active: #3f6fd6;
83
+ }
84
+
85
+
86
+ .survey-workbench-embed.theme-survey{
87
+ --k-bg: #06080b;
88
+ --k-brand: #5ce0c6;
89
+ --k-text-faint: #6f8095;
90
+ }
91
+
92
+ .survey-workbench-embed.theme-console{
93
+ --k-font-ui: "Aptos Narrow", "DIN Condensed", "IBM Plex Sans Condensed", "Gill Sans", sans-serif;
94
+ --k-font-display: "Aptos Narrow", "DIN Condensed", "IBM Plex Sans Condensed", "Gill Sans", sans-serif;
95
+ --k-radius-sm: 0;
96
+ --k-radius-md: 0;
97
+ --k-brand: #c9ff4a;
98
+ --k-brand-contrast: #11120f;
99
+ --k-bg: #11120f;
100
+ --k-panel: #191b16;
101
+ --k-panel-raised: #20231e;
102
+ --k-line: #3a4035;
103
+ --k-line-strong: #8ea36e;
104
+ --k-text: #f2f0e8;
105
+ --k-text-muted: #a6ab9c;
106
+ --k-text-faint: #747a6c;
107
+ --k-positive: #a6d37b;
108
+ --k-caution: #e8c15f;
109
+ --k-negative: #ee776f;
110
+ --k-active: #84d8c8;
111
+ }
112
+
113
+ .survey-workbench-embed.theme-flow{
114
+ --k-brand: #2f88a6;
115
+ }
116
+
117
+ .survey-workbench-embed.theme-surface{
118
+ --k-brand: #14a37a;
119
+ }
120
+
121
+ .survey-workbench-embed[data-theme="light"].theme-survey,
122
+ .survey-workbench-embed[data-theme="light"] .theme-survey{
123
+ --k-brand: #16806f;
124
+ }
125
+
126
+ .survey-workbench-embed[data-theme="light"].theme-console,
127
+ .survey-workbench-embed[data-theme="light"] .theme-console{
128
+ --k-brand: #6c9400;
129
+ --k-brand-contrast: #ffffff;
130
+ --k-bg: #f3f5eb;
131
+ --k-panel: #fbfcf7;
132
+ --k-panel-raised: #eef2e6;
133
+ --k-line: #ccd5bf;
134
+ --k-line-strong: #8fa36f;
135
+ --k-text: #1e2319;
136
+ --k-text-muted: #596250;
137
+ --k-text-faint: #77816d;
138
+ --k-positive: #2f7d32;
139
+ --k-caution: #8a6500;
140
+ --k-negative: #b93a36;
141
+ --k-active: #247f75;
142
+ }
143
+
144
+ .survey-workbench-embed[data-theme="light"].theme-flow,
145
+ .survey-workbench-embed[data-theme="light"] .theme-flow{
146
+ --k-brand: #1f6f88;
147
+ }
148
+
149
+ .survey-workbench-embed[data-theme="light"].theme-surface,
150
+ .survey-workbench-embed[data-theme="light"] .theme-surface{
151
+ --k-brand: #0f6b52;
152
+ }
153
+
154
+
155
+ /* Survey Review Workbench — "forensic review console" aesthetic.
156
+ Reviewers judge whether a proposed value should overwrite a verified one;
157
+ the visual language is built to highlight the value diff, the decision, the
158
+ confidence, and the provenance — in that order. */
159
+
160
+
161
+ .survey-workbench-embed{
162
+ color-scheme: dark;
163
+
164
+ /* Local aliases preserve the existing workbench selectors while the values
165
+ come from the shared Console Kit token contract. */
166
+ --ink-1000: var(--k-bg);
167
+ --ink-900: #0a0e13;
168
+ --ink-850: #0d1219;
169
+ --ink-800: var(--k-panel);
170
+ --ink-750: var(--k-panel-raised);
171
+ --ink-700: #1d2937;
172
+ --paper: var(--k-text);
173
+ --paper-dim: var(--k-text-muted);
174
+ --paper-faint: var(--k-text-faint);
175
+ --line: var(--k-line);
176
+ --line-strong: var(--k-line-strong);
177
+ --accent: var(--k-brand);
178
+ --accent-deep: color-mix(in srgb, var(--k-brand) 34%, var(--k-bg));
179
+ --proposed: var(--k-active);
180
+ --verify: var(--k-positive);
181
+ --hold: var(--k-caution);
182
+ --reject: var(--k-negative);
183
+ --radius: var(--k-radius-md);
184
+ --radius-sm: var(--k-radius-sm);
185
+
186
+ font-family: var(--k-font-ui);
187
+ background: var(--ink-1000);
188
+ color: var(--paper);
189
+ }
190
+
191
+ .survey-workbench-embed *{
192
+ box-sizing: border-box;
193
+ }
194
+
195
+ .survey-workbench-embed{
196
+ margin: 0;
197
+ min-width: 320px;
198
+ position: relative;
199
+ background:
200
+ radial-gradient(1100px 620px at 12% -8%, rgba(92, 224, 198, 0.12), transparent 60%),
201
+ radial-gradient(900px 560px at 100% 0%, rgba(122, 162, 255, 0.12), transparent 55%),
202
+ radial-gradient(800px 800px at 88% 110%, rgba(243, 177, 75, 0.07), transparent 60%),
203
+ linear-gradient(180deg, var(--ink-1000), var(--ink-900) 55%, var(--ink-1000));
204
+ background-attachment: fixed;
205
+ }
206
+
207
+ /* Grain + faint engineering grid for control-room atmosphere. */
208
+ .survey-workbench-embed::before{
209
+ content: "";
210
+ position: absolute;
211
+ inset: 0;
212
+ z-index: 0;
213
+ pointer-events: none;
214
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
215
+ opacity: 0.04;
216
+ mix-blend-mode: screen;
217
+ }
218
+
219
+ .survey-workbench-embed button,
220
+ .survey-workbench-embed textarea{
221
+ font: inherit;
222
+ }
223
+
224
+ .survey-workbench-embed h1,
225
+ .survey-workbench-embed h2,
226
+ .survey-workbench-embed h3,
227
+ .survey-workbench-embed p{
228
+ margin: 0;
229
+ }
230
+
231
+ .survey-workbench-embed .workbench{
232
+ position: relative;
233
+ z-index: 1;
234
+ container-type: inline-size;
235
+ min-height: 100vh;
236
+ padding: 22px 22px 50px;
237
+ }
238
+
239
+ .survey-workbench-embed .workbench-shell{
240
+ display: grid;
241
+ grid-template-rows: auto minmax(0, 1fr);
242
+ gap: 16px;
243
+ max-width: 1360px;
244
+ margin: 0 auto;
245
+ }
246
+
247
+ /* ---- Shared label vocabulary ------------------------------------------ */
248
+
249
+ .survey-workbench-embed .eyebrow,
250
+ .survey-workbench-embed .field-label,
251
+ .survey-workbench-embed .state-label{
252
+ color: var(--accent);
253
+ font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
254
+ font-size: 10.5px;
255
+ font-weight: 600;
256
+ letter-spacing: 0.18em;
257
+ text-transform: uppercase;
258
+ }
259
+
260
+ .survey-workbench-embed .field-label{
261
+ color: var(--paper-faint);
262
+ letter-spacing: 0.14em;
263
+ }
264
+
265
+ .survey-workbench-embed .field-value,
266
+ .survey-workbench-embed .meta-value{
267
+ overflow-wrap: anywhere;
268
+ word-break: break-word;
269
+ line-height: 1.4;
270
+ color: var(--paper);
271
+ }
272
+
273
+ /* ---- Top command bar -------------------------------------------------- */
274
+
275
+ .survey-workbench-embed .topbar{
276
+ display: grid;
277
+ grid-template-columns: minmax(0, 1fr);
278
+ gap: 12px;
279
+ align-items: center;
280
+ padding: 15px 17px;
281
+ border: 1px solid var(--line-strong);
282
+ border-radius: var(--radius);
283
+ background:
284
+ linear-gradient(135deg, rgba(92, 224, 198, 0.08), transparent 42%),
285
+ linear-gradient(180deg, var(--ink-800), var(--ink-850));
286
+ box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.03);
287
+ animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
288
+ }
289
+
290
+ .survey-workbench-embed .topbar > div{
291
+ min-width: 0;
292
+ }
293
+
294
+ .survey-workbench-embed .topbar .eyebrow::before{
295
+ content: "● ";
296
+ color: var(--verify);
297
+ }
298
+
299
+ .survey-workbench-embed h1{
300
+ margin-top: 6px;
301
+ font-family: "Fraunces", Georgia, "Times New Roman", serif;
302
+ font-optical-sizing: auto;
303
+ font-weight: 600;
304
+ font-size: clamp(21px, 2vw, 27px);
305
+ line-height: 1.08;
306
+ letter-spacing: -0.01em;
307
+ overflow-wrap: anywhere;
308
+ color: var(--paper);
309
+ }
310
+
311
+ .survey-workbench-embed .review-question{
312
+ max-width: 720px;
313
+ margin-top: 7px;
314
+ color: var(--paper-dim);
315
+ font-size: 13px;
316
+ line-height: 1.4;
317
+ }
318
+
319
+ .survey-workbench-embed .review-question strong{
320
+ color: var(--paper);
321
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
322
+ font-size: 0.95em;
323
+ }
324
+
325
+ .survey-workbench-embed .review-target-label{
326
+ margin-top: 4px;
327
+ }
328
+
329
+ .survey-workbench-embed .review-target-label strong{
330
+ color: var(--paper);
331
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
332
+ font-size: 13px;
333
+ font-weight: 600;
334
+ }
335
+
336
+ .survey-workbench-embed .meta-grid{
337
+ display: none;
338
+ grid-template-columns: repeat(4, minmax(110px, 1fr));
339
+ gap: 10px;
340
+ width: 100%;
341
+ }
342
+
343
+ .survey-workbench-embed .meta-item,
344
+ .survey-workbench-embed .field{
345
+ min-width: 0;
346
+ }
347
+
348
+ .survey-workbench-embed .meta-item{
349
+ padding: 11px 12px;
350
+ border: 1px solid var(--line);
351
+ border-radius: var(--radius-sm);
352
+ background: rgba(8, 12, 18, 0.55);
353
+ }
354
+
355
+ .survey-workbench-embed .meta-value{
356
+ margin-top: 6px;
357
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
358
+ font-size: 12px;
359
+ font-weight: 500;
360
+ line-height: 1.45;
361
+ color: var(--paper);
362
+ }
363
+
364
+ /* Status reads as a signal in the command bar. */
365
+ .survey-workbench-embed .meta-item:nth-child(2) .meta-value{
366
+ color: var(--accent);
367
+ font-weight: 600;
368
+ }
369
+
370
+ /* ---- Layout scaffold -------------------------------------------------- */
371
+
372
+ .survey-workbench-embed .queue-layout{
373
+ display: grid;
374
+ grid-template-columns: 280px minmax(0, 1fr);
375
+ gap: 16px;
376
+ align-items: start;
377
+ }
378
+
379
+ .survey-workbench-embed .queue-panel{
380
+ display: grid;
381
+ gap: 14px;
382
+ position: sticky;
383
+ top: 18px;
384
+ }
385
+
386
+ .survey-workbench-embed .active-review-strip{
387
+ display: none;
388
+ }
389
+
390
+ /* ---- Mobile queue progress bar (mobile only) -------------------------- */
391
+
392
+ .survey-workbench-embed .mobile-queue-bar{
393
+ display: none;
394
+ }
395
+
396
+ /* ---- Queue drawer backdrop -------------------------------------------- */
397
+
398
+ .survey-workbench-embed .queue-drawer-backdrop{
399
+ display: none;
400
+ position: absolute;
401
+ inset: 0;
402
+ z-index: 40;
403
+ background: rgba(0, 0, 0, 0.55);
404
+ backdrop-filter: blur(2px);
405
+ opacity: 0;
406
+ transition: opacity 0.22s ease;
407
+ pointer-events: none;
408
+ }
409
+
410
+ .survey-workbench-embed .queue-drawer-backdrop.is-visible{
411
+ opacity: 1;
412
+ pointer-events: auto;
413
+ }
414
+
415
+ /* ---- Queue drawer close button (mobile only) -------------------------- */
416
+
417
+ .survey-workbench-embed .queue-drawer-close{
418
+ display: none;
419
+ position: absolute;
420
+ top: 12px;
421
+ right: 12px;
422
+ width: 30px;
423
+ height: 30px;
424
+ border: 1px solid var(--line-strong);
425
+ border-radius: 999px;
426
+ background: rgba(8, 12, 18, 0.8);
427
+ color: var(--paper-faint);
428
+ cursor: pointer;
429
+ font-size: 14px;
430
+ line-height: 1;
431
+ align-items: center;
432
+ justify-content: center;
433
+ z-index: 2;
434
+ }
435
+
436
+ .survey-workbench-embed .queue-list,
437
+ .survey-workbench-embed .session-summary,
438
+ .survey-workbench-embed .session-audit{
439
+ border: 1px solid var(--line);
440
+ border-radius: var(--radius);
441
+ background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
442
+ padding: 14px;
443
+ box-shadow: 0 22px 50px -38px rgba(0, 0, 0, 0.9);
444
+ animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
445
+ animation-delay: 0.05s;
446
+ }
447
+
448
+ .survey-workbench-embed .queue-head{
449
+ display: grid;
450
+ grid-template-columns: minmax(0, 1fr) auto;
451
+ gap: 8px;
452
+ align-items: center;
453
+ margin-bottom: 14px;
454
+ }
455
+
456
+ .survey-workbench-embed .queue-head h2,
457
+ .survey-workbench-embed .session-summary h2,
458
+ .survey-workbench-embed .session-audit h2{
459
+ font-family: "Fraunces", Georgia, serif;
460
+ font-weight: 600;
461
+ font-size: 16px;
462
+ line-height: 1.1;
463
+ letter-spacing: -0.01em;
464
+ }
465
+
466
+ /* ---- Queue rows: status carried on data-queue-status ------------------ */
467
+
468
+ .survey-workbench-embed .queue-row{
469
+ display: grid;
470
+ grid-template-columns: minmax(0, 1fr) auto;
471
+ gap: 10px;
472
+ align-items: center;
473
+ width: 100%;
474
+ min-height: 54px;
475
+ border: 1px solid var(--line);
476
+ border-left: 3px solid var(--paper-faint);
477
+ border-radius: var(--radius-sm);
478
+ margin-top: 8px;
479
+ padding: 9px 10px;
480
+ background: rgba(8, 12, 18, 0.5);
481
+ color: var(--paper);
482
+ cursor: pointer;
483
+ text-align: left;
484
+ transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
485
+ }
486
+
487
+ .survey-workbench-embed .queue-row:hover{
488
+ transform: translateX(2px);
489
+ border-color: var(--line-strong);
490
+ background: rgba(16, 24, 34, 0.8);
491
+ }
492
+
493
+ .survey-workbench-embed .queue-row.is-active{
494
+ border-left-width: 3px;
495
+ background: linear-gradient(90deg, rgba(92, 224, 198, 0.12), rgba(8, 12, 18, 0.5) 60%);
496
+ box-shadow: inset 0 0 0 1px var(--line-strong);
497
+ }
498
+
499
+ .survey-workbench-embed .queue-row[data-queue-status="resolved"]{ border-left-color: var(--verify); }
500
+ .survey-workbench-embed .queue-row[data-queue-status="rejected"]{ border-left-color: var(--reject); }
501
+ .survey-workbench-embed .queue-row[data-queue-status="escalated"]{ border-left-color: var(--hold); }
502
+ .survey-workbench-embed .queue-row[data-queue-status="in-review"]{ border-left-color: var(--accent); }
503
+ .survey-workbench-embed .queue-row[data-queue-status="pending"]{ border-left-color: var(--paper-faint); }
504
+
505
+ .survey-workbench-embed .queue-row-main{
506
+ display: grid;
507
+ gap: 4px;
508
+ min-width: 0;
509
+ }
510
+
511
+ .survey-workbench-embed .queue-row-title,
512
+ .survey-workbench-embed .queue-row-target{
513
+ overflow-wrap: anywhere;
514
+ word-break: break-word;
515
+ }
516
+
517
+ .survey-workbench-embed .queue-row-title{
518
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
519
+ font-size: 12.5px;
520
+ font-weight: 600;
521
+ letter-spacing: -0.01em;
522
+ color: var(--paper);
523
+ }
524
+
525
+ .survey-workbench-embed .queue-row-target{
526
+ color: var(--paper-dim);
527
+ font-size: 12px;
528
+ }
529
+
530
+ /* ---- Status pills ----------------------------------------------------- */
531
+
532
+ .survey-workbench-embed .state-label{
533
+ min-width: 78px;
534
+ padding: 4px 9px;
535
+ border: 1px solid var(--line-strong);
536
+ border-radius: 999px;
537
+ text-align: center;
538
+ color: var(--paper-dim);
539
+ background: rgba(8, 12, 18, 0.6);
540
+ letter-spacing: 0.08em;
541
+ font-size: 9.5px;
542
+ }
543
+
544
+ .survey-workbench-embed .queue-row[data-queue-status="resolved"] .state-label{ color: var(--verify); border-color: rgba(52, 211, 153, 0.4); }
545
+ .survey-workbench-embed .queue-row[data-queue-status="rejected"] .state-label{ color: var(--reject); border-color: rgba(255, 111, 111, 0.4); }
546
+ .survey-workbench-embed .queue-row[data-queue-status="escalated"] .state-label{ color: var(--hold); border-color: rgba(243, 177, 75, 0.4); }
547
+ .survey-workbench-embed .queue-row[data-queue-status="in-review"] .state-label{ color: var(--accent); border-color: rgba(92, 224, 198, 0.4); }
548
+
549
+ .survey-workbench-embed .next-button{
550
+ min-height: 34px;
551
+ padding: 0 14px;
552
+ border: 1px solid var(--line-strong);
553
+ border-radius: 999px;
554
+ background: rgba(92, 224, 198, 0.08);
555
+ color: var(--accent);
556
+ cursor: pointer;
557
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
558
+ font-size: 11px;
559
+ font-weight: 600;
560
+ letter-spacing: 0.06em;
561
+ transition: background 0.16s ease, border-color 0.16s ease;
562
+ }
563
+
564
+ .survey-workbench-embed .next-button:hover{
565
+ background: rgba(92, 224, 198, 0.16);
566
+ border-color: var(--accent);
567
+ }
568
+
569
+ /* ---- Session summary: scoreboard tiles -------------------------------- */
570
+
571
+ .survey-workbench-embed .summary-grid{
572
+ display: grid;
573
+ grid-template-columns: repeat(2, minmax(0, 1fr));
574
+ gap: 10px;
575
+ margin-top: 12px;
576
+ }
577
+
578
+ .survey-workbench-embed .summary-grid .meta-item{
579
+ display: grid;
580
+ gap: 2px;
581
+ padding: 10px;
582
+ background: rgba(8, 12, 18, 0.6);
583
+ }
584
+
585
+ .survey-workbench-embed .summary-grid .meta-value{
586
+ font-family: "Fraunces", Georgia, serif;
587
+ font-size: 20px;
588
+ font-weight: 700;
589
+ line-height: 1;
590
+ color: var(--paper);
591
+ }
592
+
593
+ /* ---- Session audit: replayable resource trail ------------------------- */
594
+
595
+ .survey-workbench-embed .session-audit{
596
+ display: grid;
597
+ gap: 14px;
598
+ animation-delay: 0.08s;
599
+ }
600
+
601
+ .survey-workbench-embed .session-audit-head{
602
+ display: grid;
603
+ grid-template-columns: minmax(0, 1fr) auto;
604
+ gap: 8px;
605
+ align-items: start;
606
+ }
607
+
608
+ .survey-workbench-embed .session-audit-head h2{
609
+ margin-top: 5px;
610
+ overflow-wrap: anywhere;
611
+ }
612
+
613
+ .survey-workbench-embed .audit-grid{
614
+ grid-template-columns: repeat(2, minmax(0, 1fr));
615
+ }
616
+
617
+ .survey-workbench-embed .audit-grid .meta-value{
618
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
619
+ font-size: 11px;
620
+ line-height: 1.3;
621
+ }
622
+
623
+ .survey-workbench-embed .session-event-list{
624
+ display: grid;
625
+ gap: 8px;
626
+ margin: 0;
627
+ padding: 0;
628
+ list-style: none;
629
+ }
630
+
631
+ .survey-workbench-embed .session-event-list li{
632
+ display: grid;
633
+ grid-template-columns: 24px minmax(0, 1fr);
634
+ gap: 8px;
635
+ min-width: 0;
636
+ border: 1px solid var(--line);
637
+ border-radius: var(--radius-sm);
638
+ padding: 8px;
639
+ background: rgba(6, 9, 13, 0.45);
640
+ }
641
+
642
+ .survey-workbench-embed .event-sequence{
643
+ display: grid;
644
+ place-items: center;
645
+ width: 24px;
646
+ height: 24px;
647
+ border: 1px solid var(--line-strong);
648
+ border-radius: 999px;
649
+ color: var(--accent);
650
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
651
+ font-size: 10px;
652
+ font-weight: 700;
653
+ }
654
+
655
+ .survey-workbench-embed .session-event-list strong,
656
+ .survey-workbench-embed .session-event-list small{
657
+ display: block;
658
+ min-width: 0;
659
+ overflow-wrap: anywhere;
660
+ }
661
+
662
+ .survey-workbench-embed .session-event-list strong{
663
+ color: var(--paper);
664
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
665
+ font-size: 11px;
666
+ }
667
+
668
+ .survey-workbench-embed .session-event-list small{
669
+ margin-top: 3px;
670
+ color: var(--paper-faint);
671
+ font-size: 10.5px;
672
+ line-height: 1.35;
673
+ }
674
+
675
+ .survey-workbench-embed .session-export{
676
+ border-top: 1px solid var(--line);
677
+ padding-top: 12px;
678
+ }
679
+
680
+ .survey-workbench-embed .session-export summary{
681
+ cursor: pointer;
682
+ color: var(--accent);
683
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
684
+ font-size: 11px;
685
+ font-weight: 700;
686
+ letter-spacing: 0.06em;
687
+ }
688
+
689
+ .survey-workbench-embed .session-export pre{
690
+ max-height: 300px;
691
+ }
692
+
693
+ /* ---- Content grid ----------------------------------------------------- */
694
+
695
+ .survey-workbench-embed .content-grid{
696
+ display: grid;
697
+ grid-template-columns: minmax(0, 1fr);
698
+ grid-template-areas:
699
+ "focus"
700
+ "decision"
701
+ "candidates";
702
+ gap: 14px;
703
+ align-items: start;
704
+ }
705
+
706
+ .survey-workbench-embed .review-main{
707
+ display: grid;
708
+ gap: 14px;
709
+ min-width: 0;
710
+ }
711
+
712
+ /* ---- Active review focus ---------------------------------------------- */
713
+
714
+ .survey-workbench-embed .review-focus{
715
+ grid-area: focus;
716
+ display: grid;
717
+ gap: 12px;
718
+ min-width: 0;
719
+ border: 1px solid rgba(92, 224, 198, 0.28);
720
+ border-radius: var(--radius);
721
+ padding: 14px;
722
+ background:
723
+ linear-gradient(135deg, rgba(92, 224, 198, 0.12), transparent 34%),
724
+ linear-gradient(180deg, var(--ink-800), var(--ink-850));
725
+ box-shadow: 0 26px 60px -42px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.04);
726
+ }
727
+
728
+ .survey-workbench-embed .focus-head,
729
+ .survey-workbench-embed .focus-values{
730
+ display: grid;
731
+ gap: 10px;
732
+ }
733
+
734
+ .survey-workbench-embed .focus-head{
735
+ grid-template-columns: minmax(0, 1fr) auto;
736
+ align-items: center;
737
+ }
738
+
739
+ .survey-workbench-embed .focus-values{
740
+ grid-template-columns: repeat(2, minmax(0, 1fr));
741
+ }
742
+
743
+ .survey-workbench-embed .focus-value{
744
+ min-width: 0;
745
+ border: 1px solid var(--line);
746
+ border-radius: var(--radius-sm);
747
+ padding: 10px 12px;
748
+ background: rgba(6, 9, 13, 0.56);
749
+ }
750
+
751
+ .survey-workbench-embed .focus-value strong{
752
+ display: block;
753
+ margin-top: 6px;
754
+ color: var(--paper);
755
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
756
+ font-size: clamp(18px, 1.8vw, 25px);
757
+ line-height: 1.14;
758
+ overflow-wrap: anywhere;
759
+ }
760
+
761
+ .survey-workbench-embed .focus-value span:last-child{
762
+ display: block;
763
+ margin-top: 6px;
764
+ color: var(--paper-faint);
765
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
766
+ font-size: 11px;
767
+ }
768
+
769
+ .survey-workbench-embed .focus-value.is-proposed{
770
+ border-color: rgba(122, 162, 255, 0.34);
771
+ background: linear-gradient(180deg, rgba(122, 162, 255, 0.1), rgba(6, 9, 13, 0.56));
772
+ }
773
+
774
+ .survey-workbench-embed .focus-value.is-proposed strong{
775
+ color: var(--proposed);
776
+ }
777
+
778
+ .survey-workbench-embed .focus-evidence{
779
+ display: grid;
780
+ grid-template-columns: minmax(110px, 0.65fr) minmax(0, 1.2fr) minmax(0, 1.4fr);
781
+ gap: 10px;
782
+ margin: 0;
783
+ }
784
+
785
+ .survey-workbench-embed .focus-evidence .field{
786
+ border-top: 1px solid var(--line);
787
+ padding-top: 10px;
788
+ }
789
+
790
+ /* ---- Candidate comparison: the hero of the console -------------------- */
791
+
792
+ .survey-workbench-embed .candidate-grid{
793
+ grid-area: candidates;
794
+ display: grid;
795
+ grid-template-columns: repeat(2, minmax(0, 1fr));
796
+ gap: 12px;
797
+ position: relative;
798
+ }
799
+
800
+ /* "VS" diff marker between the two candidates. */
801
+ .survey-workbench-embed .candidate-grid::before{
802
+ content: "vs";
803
+ position: absolute;
804
+ top: 18px;
805
+ left: 50%;
806
+ transform: translateX(-50%);
807
+ z-index: 3;
808
+ width: 30px;
809
+ height: 30px;
810
+ display: grid;
811
+ place-items: center;
812
+ border-radius: 999px;
813
+ border: 1px solid var(--line-strong);
814
+ background: var(--ink-750);
815
+ color: var(--paper-faint);
816
+ font-family: "Fraunces", Georgia, serif;
817
+ font-style: italic;
818
+ font-size: 13px;
819
+ box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.9);
820
+ }
821
+
822
+ .survey-workbench-embed .candidate-card,
823
+ .survey-workbench-embed .payload-panel,
824
+ .survey-workbench-embed .surface-preview,
825
+ .survey-workbench-embed .decision-row{
826
+ border: 1px solid var(--line);
827
+ border-radius: var(--radius);
828
+ background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
829
+ box-shadow: 0 26px 60px -42px rgba(0, 0, 0, 0.95);
830
+ }
831
+
832
+ .survey-workbench-embed .candidate-card{
833
+ display: grid;
834
+ grid-template-rows: auto auto minmax(0, 1fr) auto;
835
+ gap: 11px;
836
+ min-height: auto;
837
+ padding: 14px;
838
+ position: relative;
839
+ overflow: hidden;
840
+ animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
841
+ animation-delay: 0.1s;
842
+ }
843
+
844
+ /* The proposed candidate (2nd card) is the incoming change — flag it. */
845
+ .survey-workbench-embed .candidate-card:nth-child(2){
846
+ border-color: rgba(122, 162, 255, 0.32);
847
+ }
848
+
849
+ .survey-workbench-embed .candidate-card:nth-child(2)::after{
850
+ content: "";
851
+ position: absolute;
852
+ inset: 0;
853
+ pointer-events: none;
854
+ background: radial-gradient(420px 200px at 80% -10%, rgba(122, 162, 255, 0.12), transparent 70%);
855
+ }
856
+
857
+ .survey-workbench-embed .candidate-card.is-selected{
858
+ border-color: rgba(52, 211, 153, 0.55);
859
+ box-shadow: 0 26px 60px -36px rgba(0, 0, 0, 0.95), inset 0 0 0 1px rgba(52, 211, 153, 0.35), inset 0 0 60px -30px rgba(52, 211, 153, 0.6);
860
+ }
861
+
862
+ .survey-workbench-embed .candidate-card.is-unselected{
863
+ opacity: 0.5;
864
+ filter: saturate(0.7);
865
+ }
866
+
867
+ .survey-workbench-embed .card-head{
868
+ display: flex;
869
+ gap: 10px;
870
+ justify-content: space-between;
871
+ align-items: flex-start;
872
+ position: relative;
873
+ z-index: 1;
874
+ }
875
+
876
+ .survey-workbench-embed .card-head .eyebrow{
877
+ color: var(--paper-faint);
878
+ font-size: 10px;
879
+ letter-spacing: 0.1em;
880
+ text-transform: uppercase;
881
+ overflow-wrap: anywhere;
882
+ word-break: break-word;
883
+ }
884
+
885
+ .survey-workbench-embed .role{
886
+ margin-top: 3px;
887
+ font-family: "Fraunces", Georgia, serif;
888
+ font-weight: 600;
889
+ font-size: 18px;
890
+ letter-spacing: -0.01em;
891
+ color: var(--paper);
892
+ }
893
+
894
+ .survey-workbench-embed .candidate-card:nth-child(2) .role{
895
+ color: var(--proposed);
896
+ }
897
+
898
+ .survey-workbench-embed .is-selected .state-label{
899
+ color: var(--verify);
900
+ border-color: rgba(52, 211, 153, 0.5);
901
+ background: rgba(52, 211, 153, 0.12);
902
+ }
903
+
904
+ /* The value — the single most important datapoint on the screen. */
905
+ .survey-workbench-embed .candidate-value{
906
+ position: relative;
907
+ z-index: 1;
908
+ border-block: 1px solid var(--line);
909
+ padding: 10px 0;
910
+ }
911
+
912
+ .survey-workbench-embed .candidate-value .field-value{
913
+ margin-top: 7px;
914
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
915
+ font-size: clamp(16px, 1.35vw, 20px);
916
+ font-weight: 600;
917
+ line-height: 1.22;
918
+ letter-spacing: 0;
919
+ color: var(--paper);
920
+ }
921
+
922
+ .survey-workbench-embed .candidate-card:nth-child(2) .candidate-value .field-value{
923
+ color: var(--proposed);
924
+ }
925
+
926
+ .survey-workbench-embed .is-selected .candidate-value .field-value{
927
+ color: var(--verify);
928
+ }
929
+
930
+ .survey-workbench-embed .field-stack{
931
+ display: grid;
932
+ gap: 9px;
933
+ position: relative;
934
+ z-index: 1;
935
+ align-content: start;
936
+ }
937
+
938
+ .survey-workbench-embed .field-value{
939
+ margin-top: 4px;
940
+ font-size: 12.5px;
941
+ }
942
+
943
+ /* Source refs / locators / ids read as data. */
944
+ .survey-workbench-embed .candidate-card .field-stack .field-value{
945
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
946
+ font-size: 11.5px;
947
+ color: var(--paper-dim);
948
+ }
949
+
950
+ /* Highlight extraction confidence (5th field in the stack) as a chip. */
951
+ .survey-workbench-embed .candidate-card .field-stack > .field:nth-child(5) .field-value{
952
+ display: inline-block;
953
+ margin-top: 5px;
954
+ padding: 4px 9px;
955
+ border: 1px solid rgba(92, 224, 198, 0.35);
956
+ border-radius: 999px;
957
+ background: rgba(92, 224, 198, 0.1);
958
+ color: var(--accent);
959
+ font-size: 11.5px;
960
+ font-weight: 600;
961
+ }
962
+
963
+ .survey-workbench-embed .excerpt{
964
+ border-left: 2px solid var(--accent-deep);
965
+ padding-left: 12px;
966
+ }
967
+
968
+ .survey-workbench-embed .excerpt .field-value{
969
+ font-style: italic;
970
+ color: var(--paper-dim) !important;
971
+ }
972
+
973
+ /* ---- Decision column -------------------------------------------------- */
974
+
975
+ .survey-workbench-embed .decision-column{
976
+ grid-area: decision;
977
+ display: grid;
978
+ grid-template-columns: minmax(0, 1fr);
979
+ gap: 12px;
980
+ animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
981
+ animation-delay: 0.15s;
982
+ }
983
+
984
+ .survey-workbench-embed .decision-row,
985
+ .survey-workbench-embed .payload-panel,
986
+ .survey-workbench-embed .surface-preview{
987
+ padding: 14px;
988
+ }
989
+
990
+ .survey-workbench-embed textarea{
991
+ display: block;
992
+ width: 100%;
993
+ min-height: 74px;
994
+ margin-top: 8px;
995
+ resize: vertical;
996
+ border: 1px solid var(--line-strong);
997
+ border-radius: var(--radius-sm);
998
+ padding: 10px;
999
+ color: var(--paper);
1000
+ background: rgba(6, 9, 13, 0.7);
1001
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
1002
+ font-size: 12px;
1003
+ line-height: 1.5;
1004
+ }
1005
+
1006
+ .survey-workbench-embed textarea::placeholder{
1007
+ color: var(--paper-faint);
1008
+ }
1009
+
1010
+ .survey-workbench-embed textarea:focus{
1011
+ border-color: var(--accent);
1012
+ outline: none;
1013
+ box-shadow: 0 0 0 3px rgba(92, 224, 198, 0.18);
1014
+ }
1015
+
1016
+ /* Decision actions — color-coded to outcome (accept / keep / reject). */
1017
+ .survey-workbench-embed .decision-buttons{
1018
+ display: grid;
1019
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1020
+ gap: 8px;
1021
+ margin-top: 0;
1022
+ }
1023
+
1024
+ .survey-workbench-embed .decision-button{
1025
+ min-height: 42px;
1026
+ border: 1px solid var(--line-strong);
1027
+ border-radius: var(--radius-sm);
1028
+ background: rgba(8, 12, 18, 0.6);
1029
+ color: var(--paper);
1030
+ cursor: pointer;
1031
+ font-weight: 700;
1032
+ font-size: 12px;
1033
+ letter-spacing: 0.01em;
1034
+ transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
1035
+ }
1036
+
1037
+ .survey-workbench-embed .decision-button:hover,
1038
+ .survey-workbench-embed .decision-button:focus{
1039
+ transform: translateY(-2px);
1040
+ outline: none;
1041
+ }
1042
+
1043
+ .survey-workbench-embed .decision-button:nth-child(1):hover{ border-color: var(--verify); box-shadow: 0 10px 24px -14px rgba(52, 211, 153, 0.8); }
1044
+ .survey-workbench-embed .decision-button:nth-child(2):hover{ border-color: var(--hold); box-shadow: 0 10px 24px -14px rgba(243, 177, 75, 0.8); }
1045
+ .survey-workbench-embed .decision-button:nth-child(3):hover{ border-color: var(--reject); box-shadow: 0 10px 24px -14px rgba(255, 111, 111, 0.8); }
1046
+
1047
+ .survey-workbench-embed .decision-button.is-active{
1048
+ color: var(--ink-1000);
1049
+ border-color: transparent;
1050
+ }
1051
+
1052
+ .survey-workbench-embed .decision-button:nth-child(1).is-active{ background: var(--verify); box-shadow: 0 14px 30px -14px rgba(52, 211, 153, 0.9); }
1053
+ .survey-workbench-embed .decision-button:nth-child(2).is-active{ background: var(--hold); box-shadow: 0 14px 30px -14px rgba(243, 177, 75, 0.9); }
1054
+ .survey-workbench-embed .decision-button:nth-child(3).is-active{ background: var(--reject); box-shadow: 0 14px 30px -14px rgba(255, 111, 111, 0.9); }
1055
+
1056
+ .survey-workbench-embed .effect{
1057
+ display: grid;
1058
+ gap: 7px;
1059
+ margin-top: 12px;
1060
+ border-top: 1px solid var(--line);
1061
+ padding-top: 11px;
1062
+ }
1063
+
1064
+ .survey-workbench-embed .effect .field-value{
1065
+ font-size: 12.5px;
1066
+ line-height: 1.45;
1067
+ color: var(--paper-dim);
1068
+ }
1069
+
1070
+ .survey-workbench-embed .feedback-tags{
1071
+ display: grid;
1072
+ gap: 8px;
1073
+ margin-top: 12px;
1074
+ border-top: 1px solid var(--line);
1075
+ padding-top: 11px;
1076
+ }
1077
+
1078
+ .survey-workbench-embed .tag-row{
1079
+ display: flex;
1080
+ flex-wrap: wrap;
1081
+ gap: 7px;
1082
+ }
1083
+
1084
+ .survey-workbench-embed .tag{
1085
+ border: 1px solid var(--line-strong);
1086
+ border-radius: 999px;
1087
+ padding: 5px 11px;
1088
+ background: rgba(122, 162, 255, 0.08);
1089
+ color: var(--proposed);
1090
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
1091
+ font-size: 11px;
1092
+ font-weight: 500;
1093
+ }
1094
+
1095
+ .survey-workbench-embed .tag.is-empty{
1096
+ background: rgba(8, 12, 18, 0.6);
1097
+ color: var(--paper-faint);
1098
+ }
1099
+
1100
+ /* ---- Surface preview dossier ------------------------------------------ */
1101
+
1102
+ .survey-workbench-embed .surface-preview{
1103
+ display: grid;
1104
+ gap: 11px;
1105
+ }
1106
+
1107
+ /* When surface-preview is a <details> element */
1108
+ .survey-workbench-embed details.surface-preview{
1109
+ display: block;
1110
+ }
1111
+
1112
+ .survey-workbench-embed details.surface-preview[open]{
1113
+ display: grid;
1114
+ gap: 11px;
1115
+ }
1116
+
1117
+ .survey-workbench-embed .surface-summary{
1118
+ display: flex;
1119
+ gap: 12px;
1120
+ justify-content: space-between;
1121
+ align-items: center;
1122
+ cursor: pointer;
1123
+ list-style: none;
1124
+ padding: 0;
1125
+ }
1126
+
1127
+ .survey-workbench-embed .surface-summary::-webkit-details-marker{
1128
+ display: none;
1129
+ }
1130
+
1131
+ .survey-workbench-embed .surface-summary::before{
1132
+ content: none;
1133
+ }
1134
+
1135
+ .survey-workbench-embed .surface-summary-label{
1136
+ font-family: "Fraunces", Georgia, serif;
1137
+ font-weight: 600;
1138
+ font-size: 16px;
1139
+ letter-spacing: -0.01em;
1140
+ color: var(--paper);
1141
+ }
1142
+
1143
+ .survey-workbench-embed .surface-summary-label::before{
1144
+ content: "› ";
1145
+ color: var(--accent);
1146
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
1147
+ font-size: 13px;
1148
+ }
1149
+
1150
+ .survey-workbench-embed details.surface-preview[open] .surface-summary-label::before{
1151
+ content: "⌄ ";
1152
+ }
1153
+
1154
+ .survey-workbench-embed .surface-head{
1155
+ display: flex;
1156
+ gap: 12px;
1157
+ justify-content: space-between;
1158
+ align-items: flex-start;
1159
+ }
1160
+
1161
+ .survey-workbench-embed .surface-head h2{
1162
+ font-family: "Fraunces", Georgia, serif;
1163
+ font-weight: 600;
1164
+ font-size: 16px;
1165
+ letter-spacing: -0.01em;
1166
+ }
1167
+
1168
+ .survey-workbench-embed .preview-disclaimer{
1169
+ border-left: 2px solid var(--hold);
1170
+ padding: 2px 0 2px 12px;
1171
+ color: var(--paper-dim);
1172
+ font-size: 12.5px;
1173
+ line-height: 1.5;
1174
+ }
1175
+
1176
+ .survey-workbench-embed .preview-disclaimer-footer{
1177
+ margin-top: 4px;
1178
+ border-left-color: var(--line);
1179
+ font-size: 11.5px;
1180
+ color: var(--paper-faint);
1181
+ }
1182
+
1183
+ .survey-workbench-embed .preview-section-grid{
1184
+ display: grid;
1185
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1186
+ gap: 8px;
1187
+ }
1188
+
1189
+ .survey-workbench-embed .preview-section{
1190
+ min-width: 0;
1191
+ border: 1px solid var(--line);
1192
+ border-radius: var(--radius-sm);
1193
+ padding: 10px 11px;
1194
+ background: rgba(6, 9, 13, 0.55);
1195
+ }
1196
+
1197
+ .survey-workbench-embed .preview-section h3{
1198
+ margin-bottom: 7px;
1199
+ color: var(--accent);
1200
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
1201
+ font-size: 10px;
1202
+ font-weight: 600;
1203
+ letter-spacing: 0.1em;
1204
+ text-transform: uppercase;
1205
+ }
1206
+
1207
+ .survey-workbench-embed .field-stack.compact{
1208
+ gap: 9px;
1209
+ }
1210
+
1211
+ .survey-workbench-embed .compact .field-value{
1212
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
1213
+ font-size: 12px;
1214
+ color: var(--paper-dim);
1215
+ }
1216
+
1217
+ .survey-workbench-embed .preview-section.is-neutral{
1218
+ border-style: dashed;
1219
+ border-color: var(--line);
1220
+ background: rgba(6, 9, 13, 0.35);
1221
+ }
1222
+
1223
+ .survey-workbench-embed .preview-section.is-neutral h3{
1224
+ color: var(--paper-faint);
1225
+ }
1226
+
1227
+ .survey-workbench-embed .reference-details{
1228
+ margin-top: 10px;
1229
+ border-top: 1px solid var(--line);
1230
+ padding-top: 8px;
1231
+ }
1232
+
1233
+ .survey-workbench-embed .reference-details summary{
1234
+ cursor: pointer;
1235
+ color: var(--paper-faint);
1236
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
1237
+ font-size: 10px;
1238
+ font-weight: 600;
1239
+ letter-spacing: 0.08em;
1240
+ text-transform: uppercase;
1241
+ }
1242
+
1243
+ .survey-workbench-embed .reference-details summary::-webkit-details-marker{
1244
+ display: none;
1245
+ }
1246
+
1247
+ .survey-workbench-embed .reference-details summary::before{
1248
+ content: "› ";
1249
+ color: var(--paper-faint);
1250
+ }
1251
+
1252
+ .survey-workbench-embed .reference-details[open] summary{
1253
+ color: var(--accent);
1254
+ }
1255
+
1256
+ .survey-workbench-embed .reference-details[open] summary::before{
1257
+ content: "⌄ ";
1258
+ color: var(--accent);
1259
+ }
1260
+
1261
+ .survey-workbench-embed .reference-details .field-stack{
1262
+ margin-top: 8px;
1263
+ }
1264
+
1265
+ /* ---- Decision payload: terminal readout, intentionally demoted -------- */
1266
+
1267
+ .survey-workbench-embed .payload-panel{
1268
+ background: linear-gradient(180deg, var(--ink-850), var(--ink-900));
1269
+ }
1270
+
1271
+ .survey-workbench-embed .payload-panel summary.field-label{
1272
+ cursor: pointer;
1273
+ list-style: none;
1274
+ }
1275
+
1276
+ .survey-workbench-embed .payload-panel summary.field-label::-webkit-details-marker{
1277
+ display: none;
1278
+ }
1279
+
1280
+ .survey-workbench-embed .payload-panel summary.field-label::before{
1281
+ content: "› ";
1282
+ color: var(--verify);
1283
+ }
1284
+
1285
+ .survey-workbench-embed pre{
1286
+ max-height: 280px;
1287
+ margin: 12px 0 0;
1288
+ overflow: auto;
1289
+ border: 1px solid var(--line);
1290
+ border-radius: var(--radius-sm);
1291
+ background: var(--ink-1000);
1292
+ padding: 11px;
1293
+ color: #b6f3df;
1294
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
1295
+ font-size: 11px;
1296
+ line-height: 1.55;
1297
+ white-space: pre-wrap;
1298
+ word-break: break-word;
1299
+ }
1300
+
1301
+ /* ---- Motion ----------------------------------------------------------- */
1302
+
1303
+ @keyframes rise {
1304
+ from {
1305
+ opacity: 0;
1306
+ transform: translateY(14px);
1307
+ }
1308
+ to {
1309
+ opacity: 1;
1310
+ transform: translateY(0);
1311
+ }
1312
+ }
1313
+
1314
+ @media (prefers-reduced-motion: reduce) {
1315
+ .survey-workbench-embed *{
1316
+ animation: none !important;
1317
+ transition: none !important;
1318
+ }
1319
+ }
1320
+
1321
+ /* ---- Responsive ------------------------------------------------------- */
1322
+
1323
+ @media (max-width: 980px) {
1324
+ .survey-workbench-embed .topbar,
1325
+ .survey-workbench-embed .focus-evidence,
1326
+ .survey-workbench-embed .candidate-grid{
1327
+ grid-template-columns: 1fr;
1328
+ }
1329
+
1330
+ .survey-workbench-embed .content-grid{
1331
+ grid-template-columns: 1fr;
1332
+ grid-template-areas:
1333
+ "focus"
1334
+ "decision"
1335
+ "candidates";
1336
+ }
1337
+
1338
+ .survey-workbench-embed .queue-layout{
1339
+ display: block;
1340
+ position: relative;
1341
+ }
1342
+
1343
+ .survey-workbench-embed .active-review-strip{
1344
+ display: grid;
1345
+ grid-template-columns: minmax(0, 1fr) auto;
1346
+ gap: 12px;
1347
+ align-items: center;
1348
+ border: 1px solid var(--line-strong);
1349
+ border-left: 3px solid var(--accent);
1350
+ border-radius: var(--radius);
1351
+ padding: 13px 14px;
1352
+ background:
1353
+ linear-gradient(90deg, rgba(92, 224, 198, 0.12), transparent 46%),
1354
+ linear-gradient(180deg, var(--ink-800), var(--ink-850));
1355
+ box-shadow: 0 18px 44px -36px rgba(0, 0, 0, 0.9);
1356
+ }
1357
+
1358
+ .survey-workbench-embed .active-review-copy,
1359
+ .survey-workbench-embed .active-review-actions,
1360
+ .survey-workbench-embed .active-review-decisions{
1361
+ min-width: 0;
1362
+ }
1363
+
1364
+ .survey-workbench-embed .active-review-copy{
1365
+ display: grid;
1366
+ gap: 4px;
1367
+ }
1368
+
1369
+ .survey-workbench-embed .active-review-copy strong{
1370
+ overflow-wrap: anywhere;
1371
+ color: var(--paper);
1372
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
1373
+ font-size: 13px;
1374
+ }
1375
+
1376
+ .survey-workbench-embed .active-review-copy span:last-child{
1377
+ overflow-wrap: anywhere;
1378
+ color: var(--paper-dim);
1379
+ font-size: 13px;
1380
+ }
1381
+
1382
+ .survey-workbench-embed .active-review-actions{
1383
+ display: grid;
1384
+ gap: 8px;
1385
+ justify-items: end;
1386
+ }
1387
+
1388
+ .survey-workbench-embed .active-review-decisions{
1389
+ grid-column: 1 / -1;
1390
+ display: grid;
1391
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1392
+ gap: 8px;
1393
+ }
1394
+
1395
+ .survey-workbench-embed .active-review-decisions .decision-button{
1396
+ min-height: 38px;
1397
+ padding: 7px 8px;
1398
+ font-size: 11px;
1399
+ }
1400
+
1401
+ .survey-workbench-embed .queue-drawer-backdrop{
1402
+ display: block;
1403
+ }
1404
+
1405
+ .survey-workbench-embed .queue-drawer-close{
1406
+ display: flex;
1407
+ }
1408
+
1409
+ .survey-workbench-embed .mobile-queue-bar{
1410
+ display: grid;
1411
+ grid-template-columns: minmax(0, 1fr) auto;
1412
+ gap: 12px;
1413
+ align-items: center;
1414
+ border: 1px solid var(--line-strong);
1415
+ border-left: 3px solid var(--accent);
1416
+ border-radius: var(--radius);
1417
+ padding: 11px 14px;
1418
+ margin-bottom: 14px;
1419
+ background:
1420
+ linear-gradient(90deg, rgba(92, 224, 198, 0.08), transparent 46%),
1421
+ linear-gradient(180deg, var(--ink-800), var(--ink-850));
1422
+ animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
1423
+ }
1424
+
1425
+ .survey-workbench-embed .mobile-queue-progress{
1426
+ display: grid;
1427
+ gap: 3px;
1428
+ min-width: 0;
1429
+ }
1430
+
1431
+ .survey-workbench-embed .mobile-queue-item-label{
1432
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
1433
+ font-size: 13px;
1434
+ font-weight: 600;
1435
+ color: var(--paper);
1436
+ overflow-wrap: anywhere;
1437
+ word-break: break-word;
1438
+ }
1439
+
1440
+ .survey-workbench-embed .mobile-queue-open{
1441
+ flex-shrink: 0;
1442
+ min-height: 34px;
1443
+ padding: 0 14px;
1444
+ border: 1px solid var(--line-strong);
1445
+ border-radius: 999px;
1446
+ background: rgba(92, 224, 198, 0.08);
1447
+ color: var(--accent);
1448
+ cursor: pointer;
1449
+ font-family: "IBM Plex Mono", ui-monospace, monospace;
1450
+ font-size: 11px;
1451
+ font-weight: 600;
1452
+ letter-spacing: 0.06em;
1453
+ transition: background 0.16s ease, border-color 0.16s ease;
1454
+ }
1455
+
1456
+ .survey-workbench-embed .mobile-queue-open:hover{
1457
+ background: rgba(92, 224, 198, 0.16);
1458
+ border-color: var(--accent);
1459
+ }
1460
+
1461
+ /* Higher specificity than the @container stacked-layout fallback below:
1462
+ on a narrow viewport the drawer must win even inside a narrow container. */
1463
+ .survey-workbench-embed .queue-layout .queue-panel{
1464
+ position: absolute;
1465
+ top: 0;
1466
+ left: 0;
1467
+ bottom: 0;
1468
+ width: min(320px, 90vw);
1469
+ z-index: 50;
1470
+ overflow-y: auto;
1471
+ overflow-x: hidden;
1472
+ transform: translateX(-105%);
1473
+ transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
1474
+ border-radius: 0 var(--radius) var(--radius) 0;
1475
+ padding-top: 50px;
1476
+ }
1477
+
1478
+ .survey-workbench-embed .queue-layout .queue-panel.is-open{
1479
+ transform: translateX(0);
1480
+ }
1481
+
1482
+ .survey-workbench-embed .content-grid{
1483
+ grid-area: content;
1484
+ }
1485
+
1486
+ .survey-workbench-embed .candidate-grid::before{
1487
+ display: none;
1488
+ }
1489
+
1490
+ .survey-workbench-embed .content-grid,
1491
+ .survey-workbench-embed .review-main,
1492
+ .survey-workbench-embed .candidate-grid,
1493
+ .survey-workbench-embed .decision-column{
1494
+ min-width: 0;
1495
+ }
1496
+
1497
+ .survey-workbench-embed .meta-grid{
1498
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1499
+ }
1500
+
1501
+ .survey-workbench-embed .candidate-card{
1502
+ min-height: auto;
1503
+ }
1504
+ }
1505
+
1506
+ @container (max-width: 1100px) {
1507
+ .survey-workbench-embed .topbar,
1508
+ .survey-workbench-embed .queue-layout,
1509
+ .survey-workbench-embed .focus-evidence{
1510
+ grid-template-columns: 1fr;
1511
+ }
1512
+
1513
+ .survey-workbench-embed .queue-layout{
1514
+ grid-template-areas:
1515
+ "content"
1516
+ "queue";
1517
+ }
1518
+
1519
+ .survey-workbench-embed .queue-panel{
1520
+ grid-area: queue;
1521
+ position: static;
1522
+ }
1523
+
1524
+ .survey-workbench-embed .content-grid{
1525
+ grid-area: content;
1526
+ grid-template-columns: 1fr;
1527
+ grid-template-areas:
1528
+ "focus"
1529
+ "decision"
1530
+ "candidates";
1531
+ }
1532
+
1533
+ .survey-workbench-embed .content-grid,
1534
+ .survey-workbench-embed .review-main,
1535
+ .survey-workbench-embed .candidate-grid,
1536
+ .survey-workbench-embed .decision-column{
1537
+ min-width: 0;
1538
+ }
1539
+ }
1540
+
1541
+ @container (max-width: 860px) {
1542
+ .survey-workbench-embed .candidate-grid,
1543
+ .survey-workbench-embed .focus-values,
1544
+ .survey-workbench-embed .preview-section-grid{
1545
+ grid-template-columns: 1fr;
1546
+ }
1547
+
1548
+ .survey-workbench-embed .candidate-grid::before{
1549
+ display: none;
1550
+ }
1551
+
1552
+ .survey-workbench-embed .candidate-card{
1553
+ min-height: auto;
1554
+ }
1555
+ }
1556
+
1557
+ @container (max-width: 620px) {
1558
+ .survey-workbench-embed .topbar .meta-grid{
1559
+ display: none;
1560
+ }
1561
+
1562
+ .survey-workbench-embed .decision-buttons,
1563
+ .survey-workbench-embed .summary-grid,
1564
+ .survey-workbench-embed .audit-grid{
1565
+ grid-template-columns: 1fr;
1566
+ }
1567
+ }
1568
+
1569
+ @media (max-width: 560px) {
1570
+ .survey-workbench-embed .workbench{
1571
+ padding: 14px 10px 36px;
1572
+ }
1573
+
1574
+ .survey-workbench-embed .workbench-shell{
1575
+ gap: 14px;
1576
+ }
1577
+
1578
+ .survey-workbench-embed .topbar,
1579
+ .survey-workbench-embed .active-review-strip,
1580
+ .survey-workbench-embed .queue-list,
1581
+ .survey-workbench-embed .session-summary,
1582
+ .survey-workbench-embed .session-audit,
1583
+ .survey-workbench-embed .candidate-card,
1584
+ .survey-workbench-embed .decision-row,
1585
+ .survey-workbench-embed .payload-panel,
1586
+ .survey-workbench-embed .surface-preview{
1587
+ border-radius: 10px;
1588
+ padding: 14px;
1589
+ }
1590
+
1591
+ .survey-workbench-embed .topbar{
1592
+ gap: 14px;
1593
+ }
1594
+
1595
+ .survey-workbench-embed .topbar .meta-grid{
1596
+ display: none;
1597
+ }
1598
+
1599
+ .survey-workbench-embed .active-review-strip{
1600
+ grid-template-columns: 1fr;
1601
+ gap: 10px;
1602
+ }
1603
+
1604
+ .survey-workbench-embed .active-review-actions{
1605
+ grid-template-columns: minmax(0, 1fr);
1606
+ justify-items: stretch;
1607
+ }
1608
+
1609
+ .survey-workbench-embed .active-review-actions .state-label{
1610
+ justify-self: start;
1611
+ }
1612
+
1613
+ .survey-workbench-embed .review-question{
1614
+ font-size: 13px;
1615
+ }
1616
+
1617
+ .survey-workbench-embed h1{
1618
+ font-size: 25px;
1619
+ line-height: 1.08;
1620
+ }
1621
+
1622
+ .survey-workbench-embed .summary-grid,
1623
+ .survey-workbench-embed .focus-values,
1624
+ .survey-workbench-embed .decision-buttons{
1625
+ grid-template-columns: 1fr;
1626
+ }
1627
+
1628
+ .survey-workbench-embed .queue-head,
1629
+ .survey-workbench-embed .queue-row,
1630
+ .survey-workbench-embed .surface-head,
1631
+ .survey-workbench-embed .card-head{
1632
+ display: grid;
1633
+ grid-template-columns: 1fr;
1634
+ }
1635
+
1636
+ .survey-workbench-embed .queue-head{
1637
+ align-items: stretch;
1638
+ }
1639
+
1640
+ .survey-workbench-embed .next-button{
1641
+ width: 100%;
1642
+ }
1643
+
1644
+ .survey-workbench-embed .queue-row{
1645
+ justify-items: start;
1646
+ }
1647
+
1648
+ .survey-workbench-embed .state-label{
1649
+ min-width: 0;
1650
+ max-width: 100%;
1651
+ justify-self: start;
1652
+ white-space: normal;
1653
+ }
1654
+
1655
+ .survey-workbench-embed .role{
1656
+ font-size: 19px;
1657
+ }
1658
+
1659
+ .survey-workbench-embed .review-focus{
1660
+ border-radius: 10px;
1661
+ padding: 14px;
1662
+ }
1663
+
1664
+ .survey-workbench-embed .focus-head{
1665
+ grid-template-columns: 1fr;
1666
+ }
1667
+
1668
+ .survey-workbench-embed .focus-value strong{
1669
+ font-size: clamp(16px, 5cqi, 22px);
1670
+ }
1671
+
1672
+ .survey-workbench-embed .candidate-value .field-value{
1673
+ font-size: clamp(15px, 4.5cqi, 20px);
1674
+ line-height: 1.12;
1675
+ }
1676
+
1677
+ .survey-workbench-embed .candidate-card .field-stack .field-value,
1678
+ .survey-workbench-embed .compact .field-value,
1679
+ .survey-workbench-embed pre{
1680
+ font-size: 11.5px;
1681
+ }
1682
+
1683
+ .survey-workbench-embed .field-label,
1684
+ .survey-workbench-embed .eyebrow{
1685
+ letter-spacing: 0.09em;
1686
+ }
1687
+
1688
+ .survey-workbench-embed .decision-button{
1689
+ min-height: 44px;
1690
+ }
1691
+
1692
+ .survey-workbench-embed pre{
1693
+ max-height: 360px;
1694
+ padding: 11px;
1695
+ }
1696
+ }
1697
+
1698
+ @media (max-width: 420px) {
1699
+ .survey-workbench-embed h1{
1700
+ font-size: 23px;
1701
+ line-height: 1.1;
1702
+ }
1703
+
1704
+ .survey-workbench-embed .topbar{
1705
+ padding: 12px;
1706
+ }
1707
+
1708
+ .survey-workbench-embed .topbar .meta-grid{
1709
+ gap: 8px;
1710
+ }
1711
+
1712
+ .survey-workbench-embed .topbar .meta-item{
1713
+ padding: 9px 10px;
1714
+ }
1715
+
1716
+ .survey-workbench-embed .candidate-card .field-stack .field-value,
1717
+ .survey-workbench-embed .compact .field-value{
1718
+ display: block;
1719
+ text-align: left;
1720
+ }
1721
+
1722
+ .survey-workbench-embed .decision-buttons{
1723
+ gap: 8px;
1724
+ }
1725
+
1726
+ .survey-workbench-embed .decision-button{
1727
+ min-height: 40px;
1728
+ padding: 8px 10px;
1729
+ font-size: 12px;
1730
+ }
1731
+
1732
+ .survey-workbench-embed .candidate-card .field-stack > .field:nth-child(5) .field-value{
1733
+ display: inline-block;
1734
+ }
1735
+ }
1736
+
1737
+ @media (max-width: 360px) {
1738
+ .survey-workbench-embed .workbench{
1739
+ padding-inline: 8px;
1740
+ }
1741
+
1742
+ .survey-workbench-embed .topbar,
1743
+ .survey-workbench-embed .active-review-strip,
1744
+ .survey-workbench-embed .queue-list,
1745
+ .survey-workbench-embed .session-summary,
1746
+ .survey-workbench-embed .session-audit,
1747
+ .survey-workbench-embed .review-focus,
1748
+ .survey-workbench-embed .candidate-card,
1749
+ .survey-workbench-embed .decision-row,
1750
+ .survey-workbench-embed .payload-panel,
1751
+ .survey-workbench-embed .surface-preview{
1752
+ padding: 12px;
1753
+ }
1754
+
1755
+ .survey-workbench-embed h1{
1756
+ font-size: 20px;
1757
+ }
1758
+
1759
+ .survey-workbench-embed .review-question{
1760
+ font-size: 12px;
1761
+ line-height: 1.35;
1762
+ }
1763
+
1764
+ .survey-workbench-embed .topbar .meta-grid{
1765
+ display: none;
1766
+ }
1767
+
1768
+ .survey-workbench-embed .review-focus{
1769
+ gap: 10px;
1770
+ }
1771
+
1772
+ .survey-workbench-embed .focus-value{
1773
+ padding: 10px;
1774
+ }
1775
+
1776
+ .survey-workbench-embed .focus-value strong{
1777
+ margin-top: 6px;
1778
+ font-size: 18px;
1779
+ line-height: 1.05;
1780
+ }
1781
+
1782
+ .survey-workbench-embed .focus-value span:last-child{
1783
+ margin-top: 6px;
1784
+ }
1785
+
1786
+ .survey-workbench-embed .candidate-value .field-value{
1787
+ font-size: 17px;
1788
+ }
1789
+ }
1790
+
1791
+
1792
+ .survey-workbench-embed {
1793
+ overflow: hidden;
1794
+ }`;
1795
+ export default REVIEW_WORKBENCH_CSS;