Hugging Face's logo

Spaces:
spark-ds549
/
Claims2
Sleeping

App Files Community
kyu30 commited on
Commit
ea50ef3
Β·
1 Parent(s): b7025ff

styling

Browse files
Files changed (2) hide show
  1. index.html +764 -52
  2. styles.css +842 -933
index.html CHANGED
@@ -1,59 +1,771 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8" />
5
- <title>Native Ads Claim Mapping</title>
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
7
- <!-- Optional: absolute API origin when this page is not served with a same-origin /api/* proxy (see vercel.json). Leave empty to use same-origin /api first, then localhost:8001 when on loopback. Example only if needed: https://your-backend.vercel.app -->
8
- <meta name="claims-api-base" content="" />
9
- <link rel="stylesheet" href="styles.css" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  </head>
11
  <body>
12
- <main class="app">
13
- <header class="app-header">
14
- <h1>Paragraph-Level Claim Mapping</h1>
15
- <p>
16
- Paste an article below.
17
- </p>
18
- </header>
19
-
20
- <section class="input-section">
21
- <label for="article-input" class="field-label">Article text</label>
22
- <textarea id="article-input" class="text-input" rows="10" placeholder="Paste article text here… Separate paragraphs with a blank line."></textarea>
23
-
24
- <div class="controls">
25
- <button id="analyze-btn" class="primary-btn">Analyze paragraphs</button>
26
- <span id="status" class="status-text"></span>
27
- </div>
28
- </section>
29
-
30
- <section class="results-section">
31
- <h2>Paragraph ↔ Claim mappings</h2>
32
- <div id="results-container" class="results-container">
33
- <p class="placeholder">No results yet. Paste an article and click β€œAnalyze paragraphs”.</p>
34
- </div>
35
- </section>
36
-
37
- <section class="results-section">
38
- <h2>Pending taxonomy proposals (human approval)</h2>
39
- <div class="reviewer-row">
40
- <label for="reviewer-name" class="field-label">Reviewer name</label>
41
- <input
42
- id="reviewer-name"
43
- class="text-input reviewer-input"
44
- type="text"
45
- maxlength="120"
46
- placeholder="Your name (stored locally in this browser)"
47
- autocomplete="name"
48
- />
49
- </div>
50
- <div id="proposals-container" class="results-container">
51
- <p class="placeholder">No pending proposals yet.</p>
52
- </div>
53
- </section>
54
- </main>
55
-
56
- <script src="script.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
57
  </body>
58
  </html>
59
-
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CLAIMS 2.0 β€” Redesigned</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --bg: #080c18;
12
+ --bg-1: #0d1424;
13
+ --bg-2: #111827;
14
+ --border: rgba(255,255,255,0.07);
15
+ --border-mid: rgba(255,255,255,0.12);
16
+ --text: #f1f5f9;
17
+ --text-2: #94a3b8;
18
+ --text-3: #64748b;
19
+
20
+ --teal: #0d9488;
21
+ --teal-bg: rgba(13,148,136,0.1);
22
+ --teal-border: rgba(13,148,136,0.35);
23
+ --teal-text: #5eead4;
24
+
25
+ --amber: #d97706;
26
+ --amber-bg: rgba(217,119,6,0.1);
27
+ --amber-border: rgba(217,119,6,0.35);
28
+ --amber-text: #fcd34d;
29
+
30
+ --green: #059669;
31
+ --green-bg: rgba(5,150,105,0.12);
32
+ --green-border: rgba(5,150,105,0.4);
33
+ --green-text: #34d399;
34
+
35
+ --red: #dc2626;
36
+ --red-bg: rgba(220,38,38,0.1);
37
+ --red-border: rgba(220,38,38,0.35);
38
+ --red-text: #f87171;
39
+
40
+ --blue: #3b82f6;
41
+ --blue-bg: rgba(59,130,246,0.1);
42
+ --blue-border: rgba(59,130,246,0.35);
43
+ --blue-text: #93c5fd;
44
+
45
+ --purple-bg: rgba(139,92,246,0.1);
46
+ --purple-border:rgba(139,92,246,0.35);
47
+ --purple-text: #c4b5fd;
48
+
49
+ --r: 12px;
50
+ --r-sm: 8px;
51
+ }
52
+
53
+ * { box-sizing: border-box; margin: 0; padding: 0; }
54
+
55
+ body {
56
+ background: var(--bg);
57
+ color: var(--text);
58
+ font-family: 'DM Sans', system-ui, sans-serif;
59
+ font-size: 14px;
60
+ line-height: 1.6;
61
+ min-height: 100vh;
62
+ }
63
+
64
+ .shell {
65
+ max-width: 1080px;
66
+ margin: 0 auto;
67
+ padding: 28px 20px 60px;
68
+ }
69
+
70
+ /* ── HEADER ── */
71
+ .header {
72
+ border: 1px solid var(--border-mid);
73
+ border-radius: 20px;
74
+ padding: 20px 24px;
75
+ background: var(--bg-1);
76
+ position: relative;
77
+ overflow: hidden;
78
+ margin-bottom: 20px;
79
+ }
80
+ .header::before {
81
+ content: '';
82
+ position: absolute;
83
+ top: 0; left: 0; right: 0;
84
+ height: 2px;
85
+ background: linear-gradient(90deg, var(--teal), var(--blue), var(--amber));
86
+ }
87
+ .header-inner {
88
+ display: flex;
89
+ align-items: flex-start;
90
+ justify-content: space-between;
91
+ gap: 16px;
92
+ flex-wrap: wrap;
93
+ }
94
+ .header-title {
95
+ font-size: 20px;
96
+ font-weight: 600;
97
+ letter-spacing: -0.01em;
98
+ }
99
+ .header-sub {
100
+ font-size: 13px;
101
+ color: var(--text-2);
102
+ margin-top: 3px;
103
+ }
104
+ .stats-row {
105
+ display: flex;
106
+ gap: 10px;
107
+ flex-wrap: wrap;
108
+ margin-top: 16px;
109
+ }
110
+ .stat-chip {
111
+ display: flex;
112
+ align-items: center;
113
+ gap: 7px;
114
+ padding: 5px 12px;
115
+ border-radius: 999px;
116
+ border: 1px solid var(--border);
117
+ background: var(--bg-2);
118
+ font-size: 12px;
119
+ color: var(--text-2);
120
+ }
121
+ .stat-chip strong {
122
+ font-weight: 600;
123
+ color: var(--text);
124
+ }
125
+ .stat-dot {
126
+ width: 6px; height: 6px;
127
+ border-radius: 50%;
128
+ flex-shrink: 0;
129
+ }
130
+
131
+ /* ── INPUT SECTION ── */
132
+ .input-section {
133
+ border: 1px solid var(--border);
134
+ border-radius: var(--r);
135
+ background: var(--bg-1);
136
+ padding: 16px;
137
+ margin-bottom: 20px;
138
+ }
139
+ .field-label {
140
+ font-size: 11px;
141
+ font-weight: 500;
142
+ letter-spacing: 0.1em;
143
+ text-transform: uppercase;
144
+ color: var(--text-3);
145
+ margin-bottom: 8px;
146
+ display: block;
147
+ }
148
+ .text-input {
149
+ width: 100%;
150
+ min-height: 140px;
151
+ background: rgba(0,0,0,0.3);
152
+ border: 1px solid var(--border);
153
+ border-radius: var(--r-sm);
154
+ color: var(--text);
155
+ font-family: 'DM Sans', sans-serif;
156
+ font-size: 14px;
157
+ padding: 12px 14px;
158
+ resize: vertical;
159
+ outline: none;
160
+ transition: border-color 0.15s;
161
+ }
162
+ .text-input:focus {
163
+ border-color: rgba(59,130,246,0.5);
164
+ box-shadow: 0 0 0 3px rgba(59,130,246,0.08);
165
+ }
166
+ .text-input::placeholder { color: var(--text-3); }
167
+ .controls { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
168
+ .btn-primary {
169
+ background: linear-gradient(135deg, #2563eb, #4f46e5);
170
+ color: #fff;
171
+ border: none;
172
+ border-radius: 999px;
173
+ padding: 8px 20px;
174
+ font-family: 'DM Sans', sans-serif;
175
+ font-size: 13px;
176
+ font-weight: 500;
177
+ letter-spacing: 0.05em;
178
+ text-transform: uppercase;
179
+ cursor: pointer;
180
+ transition: filter 0.15s, transform 0.15s;
181
+ box-shadow: 0 4px 16px rgba(37,99,235,0.4);
182
+ }
183
+ .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
184
+ .status { font-size: 12px; color: var(--text-3); }
185
+
186
+ /* ── SECTION TITLE ── */
187
+ .section-title {
188
+ font-size: 11px;
189
+ font-weight: 600;
190
+ letter-spacing: 0.12em;
191
+ text-transform: uppercase;
192
+ color: var(--text-3);
193
+ margin: 24px 0 10px;
194
+ display: flex;
195
+ align-items: center;
196
+ gap: 8px;
197
+ }
198
+ .section-title::after {
199
+ content: '';
200
+ flex: 1;
201
+ height: 1px;
202
+ background: var(--border);
203
+ }
204
+
205
+ /* ── PARAGRAPH RESULT CARD ── */
206
+ .para-card {
207
+ border: 1px solid var(--border);
208
+ border-radius: var(--r);
209
+ background: var(--bg-1);
210
+ overflow: hidden;
211
+ margin-bottom: 14px;
212
+ transition: border-color 0.15s;
213
+ }
214
+ .para-card:hover { border-color: var(--border-mid); }
215
+
216
+ .para-card-header {
217
+ display: flex;
218
+ align-items: center;
219
+ gap: 12px;
220
+ padding: 12px 16px;
221
+ background: rgba(255,255,255,0.02);
222
+ border-bottom: 1px solid var(--border);
223
+ }
224
+ .para-num {
225
+ width: 30px; height: 30px;
226
+ border-radius: 8px;
227
+ background: var(--blue-bg);
228
+ border: 1px solid var(--blue-border);
229
+ display: flex;
230
+ align-items: center;
231
+ justify-content: center;
232
+ font-family: 'DM Mono', monospace;
233
+ font-size: 13px;
234
+ font-weight: 500;
235
+ color: var(--blue-text);
236
+ flex-shrink: 0;
237
+ }
238
+ .para-card-title { font-size: 13px; font-weight: 500; }
239
+ .para-card-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
240
+
241
+ .para-grid {
242
+ display: grid;
243
+ grid-template-columns: 1fr 1fr 1fr;
244
+ gap: 0;
245
+ }
246
+ .para-col {
247
+ padding: 14px 16px;
248
+ border-right: 1px solid var(--border);
249
+ }
250
+ .para-col:last-child { border-right: none; }
251
+
252
+ .col-label {
253
+ font-size: 10px;
254
+ font-weight: 600;
255
+ letter-spacing: 0.1em;
256
+ text-transform: uppercase;
257
+ color: var(--text-3);
258
+ margin-bottom: 10px;
259
+ }
260
+
261
+ /* paragraph text column */
262
+ .para-text-block {
263
+ font-size: 13px;
264
+ line-height: 1.65;
265
+ color: var(--text-2);
266
+ border-left: 2px solid var(--blue-border);
267
+ padding-left: 10px;
268
+ }
269
+
270
+ /* claim block */
271
+ .claim-block {
272
+ padding: 10px 12px;
273
+ border-radius: var(--r-sm);
274
+ border: 1px solid;
275
+ margin-bottom: 8px;
276
+ background: transparent;
277
+ }
278
+ .claim-block:last-child { margin-bottom: 0; }
279
+
280
+ .claim-block--sub {
281
+ border-color: var(--teal-border);
282
+ background: var(--teal-bg);
283
+ }
284
+ .claim-block--super {
285
+ border-color: var(--amber-border);
286
+ background: var(--amber-bg);
287
+ }
288
+
289
+ .claim-type-tag {
290
+ display: inline-flex;
291
+ align-items: center;
292
+ gap: 5px;
293
+ padding: 2px 8px;
294
+ border-radius: 999px;
295
+ font-size: 10px;
296
+ font-weight: 600;
297
+ letter-spacing: 0.07em;
298
+ text-transform: uppercase;
299
+ margin-bottom: 6px;
300
+ }
301
+ .claim-type-tag--sub {
302
+ background: var(--teal-bg);
303
+ border: 1px solid var(--teal-border);
304
+ color: var(--teal-text);
305
+ }
306
+ .claim-type-tag--super {
307
+ background: var(--amber-bg);
308
+ border: 1px solid var(--amber-border);
309
+ color: var(--amber-text);
310
+ }
311
+ .claim-id-badge {
312
+ font-family: 'DM Mono', monospace;
313
+ font-size: 11px;
314
+ font-weight: 500;
315
+ opacity: 0.8;
316
+ }
317
+ .claim-text {
318
+ font-size: 13px;
319
+ line-height: 1.5;
320
+ color: var(--text);
321
+ margin-top: 4px;
322
+ }
323
+
324
+ /* similarity bar */
325
+ .sim-row {
326
+ display: flex;
327
+ align-items: center;
328
+ gap: 8px;
329
+ margin-top: 8px;
330
+ }
331
+ .sim-label {
332
+ font-size: 10px;
333
+ color: var(--text-3);
334
+ white-space: nowrap;
335
+ }
336
+ .sim-bar-wrap {
337
+ flex: 1;
338
+ height: 3px;
339
+ background: rgba(255,255,255,0.08);
340
+ border-radius: 99px;
341
+ overflow: hidden;
342
+ }
343
+ .sim-bar-fill {
344
+ height: 100%;
345
+ border-radius: 99px;
346
+ background: linear-gradient(90deg, var(--teal), #22d3ee);
347
+ transition: width 0.4s;
348
+ }
349
+ .sim-bar-fill--amber {
350
+ background: linear-gradient(90deg, var(--amber), #fbbf24);
351
+ }
352
+ .sim-val {
353
+ font-family: 'DM Mono', monospace;
354
+ font-size: 11px;
355
+ font-weight: 500;
356
+ color: var(--text-2);
357
+ min-width: 28px;
358
+ text-align: right;
359
+ }
360
+
361
+ .topic-chip {
362
+ display: inline-flex;
363
+ align-items: center;
364
+ gap: 4px;
365
+ padding: 2px 8px;
366
+ border-radius: 999px;
367
+ font-size: 10px;
368
+ font-weight: 600;
369
+ letter-spacing: 0.06em;
370
+ text-transform: uppercase;
371
+ margin-top: 6px;
372
+ }
373
+ .topic-chip--none {
374
+ background: var(--red-bg);
375
+ border: 1px solid var(--red-border);
376
+ color: var(--red-text);
377
+ }
378
+ .topic-chip--match {
379
+ background: var(--green-bg);
380
+ border: 1px solid var(--green-border);
381
+ color: var(--green-text);
382
+ }
383
+ .no-match-note {
384
+ font-size: 12px;
385
+ color: var(--text-3);
386
+ font-style: italic;
387
+ }
388
+
389
+ /* ── PROPOSAL SECTION ── */
390
+ .proposals-container {
391
+ border: 1px solid var(--border);
392
+ border-radius: var(--r);
393
+ background: var(--bg-1);
394
+ overflow: hidden;
395
+ }
396
+
397
+ .reviewer-row {
398
+ display: flex;
399
+ align-items: center;
400
+ gap: 12px;
401
+ padding: 12px 16px;
402
+ border-bottom: 1px solid var(--border);
403
+ background: rgba(255,255,255,0.02);
404
+ }
405
+ .reviewer-input {
406
+ flex: 1;
407
+ max-width: 280px;
408
+ background: rgba(0,0,0,0.3);
409
+ border: 1px solid var(--border);
410
+ border-radius: var(--r-sm);
411
+ color: var(--text);
412
+ font-family: 'DM Sans', sans-serif;
413
+ font-size: 13px;
414
+ padding: 7px 12px;
415
+ outline: none;
416
+ transition: border-color 0.15s;
417
+ }
418
+ .reviewer-input:focus { border-color: rgba(59,130,246,0.5); }
419
+ .reviewer-input::placeholder { color: var(--text-3); }
420
+
421
+ .proposal-card {
422
+ padding: 16px;
423
+ border-bottom: 1px solid var(--border);
424
+ transition: background 0.15s;
425
+ }
426
+ .proposal-card:last-child { border-bottom: none; }
427
+ .proposal-card:hover { background: rgba(255,255,255,0.02); }
428
+
429
+ .proposal-header {
430
+ display: flex;
431
+ align-items: center;
432
+ gap: 10px;
433
+ margin-bottom: 12px;
434
+ }
435
+ .proposal-icon {
436
+ width: 32px; height: 32px;
437
+ border-radius: 8px;
438
+ background: var(--amber-bg);
439
+ border: 1px solid var(--amber-border);
440
+ display: flex; align-items: center; justify-content: center;
441
+ font-size: 14px;
442
+ flex-shrink: 0;
443
+ }
444
+ .proposal-type { font-size: 13px; font-weight: 600; }
445
+ .proposal-id {
446
+ font-family: 'DM Mono', monospace;
447
+ font-size: 11px;
448
+ color: var(--text-3);
449
+ margin-top: 2px;
450
+ }
451
+
452
+ .proposal-body {
453
+ font-size: 13px;
454
+ line-height: 1.6;
455
+ color: var(--text-2);
456
+ padding: 10px 12px;
457
+ background: rgba(0,0,0,0.2);
458
+ border-radius: var(--r-sm);
459
+ border: 1px solid var(--border);
460
+ margin-bottom: 12px;
461
+ }
462
+
463
+ .merge-detail {
464
+ display: grid;
465
+ grid-template-columns: 1fr 1fr;
466
+ gap: 8px;
467
+ margin-bottom: 12px;
468
+ }
469
+ .merge-item {
470
+ padding: 8px 12px;
471
+ border-radius: var(--r-sm);
472
+ border: 1px solid var(--border);
473
+ background: rgba(0,0,0,0.15);
474
+ }
475
+ .merge-item-label {
476
+ font-size: 10px;
477
+ font-weight: 600;
478
+ letter-spacing: 0.08em;
479
+ text-transform: uppercase;
480
+ color: var(--text-3);
481
+ margin-bottom: 4px;
482
+ }
483
+ .merge-item-id {
484
+ font-family: 'DM Mono', monospace;
485
+ font-size: 11px;
486
+ color: var(--text-2);
487
+ margin-bottom: 3px;
488
+ }
489
+ .merge-item-text { font-size: 12px; color: var(--text); }
490
+
491
+ .score-row {
492
+ display: flex;
493
+ align-items: center;
494
+ gap: 10px;
495
+ padding: 8px 12px;
496
+ border-radius: var(--r-sm);
497
+ background: var(--green-bg);
498
+ border: 1px solid var(--green-border);
499
+ margin-bottom: 12px;
500
+ }
501
+ .score-label { font-size: 12px; color: var(--text-2); }
502
+ .score-val {
503
+ font-family: 'DM Mono', monospace;
504
+ font-size: 14px;
505
+ font-weight: 500;
506
+ color: var(--green-text);
507
+ margin-left: auto;
508
+ }
509
+ .score-note { font-size: 11px; color: var(--text-3); }
510
+
511
+ .proposal-actions {
512
+ display: flex;
513
+ gap: 8px;
514
+ align-items: center;
515
+ }
516
+ .btn-approve {
517
+ padding: 7px 16px;
518
+ border-radius: 999px;
519
+ border: 1px solid var(--green-border);
520
+ background: var(--green-bg);
521
+ color: var(--green-text);
522
+ font-family: 'DM Sans', sans-serif;
523
+ font-size: 12px;
524
+ font-weight: 500;
525
+ letter-spacing: 0.05em;
526
+ text-transform: uppercase;
527
+ cursor: pointer;
528
+ transition: filter 0.15s, transform 0.15s;
529
+ }
530
+ .btn-approve:hover { filter: brightness(1.2); transform: translateY(-1px); }
531
+
532
+ .btn-reject {
533
+ padding: 7px 16px;
534
+ border-radius: 999px;
535
+ border: 1px solid var(--red-border);
536
+ background: var(--red-bg);
537
+ color: var(--red-text);
538
+ font-family: 'DM Sans', sans-serif;
539
+ font-size: 12px;
540
+ font-weight: 500;
541
+ letter-spacing: 0.05em;
542
+ text-transform: uppercase;
543
+ cursor: pointer;
544
+ transition: filter 0.15s, transform 0.15s;
545
+ }
546
+ .btn-reject:hover { filter: brightness(1.2); transform: translateY(-1px); }
547
+
548
+ .btn-apply {
549
+ padding: 7px 16px;
550
+ border-radius: 999px;
551
+ border: 1px solid var(--blue-border);
552
+ background: var(--blue-bg);
553
+ color: var(--blue-text);
554
+ font-family: 'DM Sans', sans-serif;
555
+ font-size: 12px;
556
+ font-weight: 500;
557
+ letter-spacing: 0.05em;
558
+ text-transform: uppercase;
559
+ cursor: pointer;
560
+ margin-left: auto;
561
+ transition: filter 0.15s, transform 0.15s;
562
+ }
563
+ .btn-apply:hover { filter: brightness(1.2); transform: translateY(-1px); }
564
+
565
+ .empty-note {
566
+ padding: 20px 16px;
567
+ font-size: 13px;
568
+ color: var(--text-3);
569
+ text-align: center;
570
+ }
571
+
572
+ @media (max-width: 640px) {
573
+ .para-grid { grid-template-columns: 1fr; }
574
+ .para-col { border-right: none; border-bottom: 1px solid var(--border); }
575
+ .para-col:last-child { border-bottom: none; }
576
+ .merge-detail { grid-template-columns: 1fr; }
577
+ }
578
+ </style>
579
  </head>
580
  <body>
581
+ <div class="shell">
582
+
583
+ <!-- HEADER -->
584
+ <div class="header">
585
+ <div class="header-inner">
586
+ <div>
587
+ <div class="header-title">Paragraph ↔ Claim Mapping</div>
588
+ <div class="header-sub">CLAIMS 2.0 Β· Greenwashing discourse validation Β· Native advertising corpus</div>
589
+ </div>
590
+ </div>
591
+ <div class="stats-row">
592
+ <div class="stat-chip">
593
+ <span class="stat-dot" style="background:#3b82f6"></span>
594
+ <strong>20</strong> paragraphs
595
+ </div>
596
+ <div class="stat-chip">
597
+ <span class="stat-dot" style="background:var(--teal)"></span>
598
+ <strong>31</strong> subclaims
599
+ </div>
600
+ <div class="stat-chip">
601
+ <span class="stat-dot" style="background:var(--amber)"></span>
602
+ <strong>18</strong> superclaims
603
+ </div>
604
+ <div class="stat-chip">
605
+ <span class="stat-dot" style="background:#a855f7"></span>
606
+ <strong>3</strong> pending proposals
607
+ </div>
608
+ </div>
609
+ </div>
610
+
611
+ <!-- INPUT -->
612
+ <div class="input-section">
613
+ <label class="field-label">Article Text</label>
614
+ <textarea class="text-input" placeholder="Paste article text here… Separate paragraphs with a blank line."></textarea>
615
+ <div class="controls">
616
+ <button class="btn-primary">Analyze Paragraphs</button>
617
+ <span class="status">20 paragraphs loaded</span>
618
+ </div>
619
+ </div>
620
+
621
+ <!-- RESULTS -->
622
+ <div class="section-title">Paragraph ↔ Claim Mappings</div>
623
+
624
+ <!-- Card 1 -->
625
+ <div class="para-card">
626
+ <div class="para-card-header">
627
+ <div class="para-num">1</div>
628
+ <div>
629
+ <div class="para-card-title">Paragraph 1 of 20</div>
630
+ <div class="para-card-sub">Maps below apply only to this paragraph.</div>
631
+ </div>
632
+ </div>
633
+ <div class="para-grid">
634
+ <div class="para-col">
635
+ <div class="col-label">Paragraph Text</div>
636
+ <div class="para-text-block">
637
+ Amid the climate crisis, the private and the public sectors are seeking strategies for achieving net-zero emissions. But their road maps are often different, and it's not clear who should be leading the way.
638
+ </div>
639
+ </div>
640
+ <div class="para-col">
641
+ <div class="col-label">Subclaim(s)</div>
642
+ <div class="claim-block claim-block--sub">
643
+ <div>
644
+ <span class="claim-type-tag claim-type-tag--sub">Subclaim <span class="claim-id-badge">NC_89</span></span>
645
+ </div>
646
+ <div class="claim-text">CCS is essential to achieving net-zero emissions targets</div>
647
+ <div class="sim-row">
648
+ <span class="sim-label">Similarity</span>
649
+ <div class="sim-bar-wrap"><div class="sim-bar-fill" style="width:2%"></div></div>
650
+ <span class="sim-val">0.02</span>
651
+ </div>
652
+ </div>
653
+ </div>
654
+ <div class="para-col">
655
+ <div class="col-label">Superclaim(s)</div>
656
+ <div class="claim-block claim-block--super">
657
+ <div>
658
+ <span class="claim-type-tag claim-type-tag--super">Superclaim <span class="claim-id-badge">SC_25</span></span>
659
+ </div>
660
+ <div class="claim-text">Limits of alternative zero-emission aviation fuels due to technical challenges</div>
661
+ <div class="topic-chip topic-chip--none">⚠ Unique Topic (βˆ’1)</div>
662
+ </div>
663
+ </div>
664
+ </div>
665
+ </div>
666
+
667
+ <!-- Card 2 -->
668
+ <div class="para-card">
669
+ <div class="para-card-header">
670
+ <div class="para-num">2</div>
671
+ <div>
672
+ <div class="para-card-title">Paragraph 2 of 20</div>
673
+ <div class="para-card-sub">Maps below apply only to this paragraph.</div>
674
+ </div>
675
+ </div>
676
+ <div class="para-grid">
677
+ <div class="para-col">
678
+ <div class="col-label">Paragraph Text</div>
679
+ <div class="para-text-block">
680
+ For this custom research, Atlantic Insights, the marketing research team at The Atlantic, partnered with Southern Company to survey 318 public- and private-sector officials, from CEOs to policymakers and elected representatives.
681
+ </div>
682
+ </div>
683
+ <div class="para-col">
684
+ <div class="col-label">Subclaim(s)</div>
685
+ <div class="claim-block claim-block--sub">
686
+ <div>
687
+ <span class="claim-type-tag claim-type-tag--sub">Subclaim <span class="claim-id-badge">NC_175</span></span>
688
+ </div>
689
+ <div class="claim-text">Establishment of specialized research centers to promote fossil fuel technology and an ambiguous 'energy transition'</div>
690
+ <div class="sim-row">
691
+ <span class="sim-label">Similarity</span>
692
+ <div class="sim-bar-wrap"><div class="sim-bar-fill" style="width:54%"></div></div>
693
+ <span class="sim-val">0.54</span>
694
+ </div>
695
+ </div>
696
+ </div>
697
+ <div class="para-col">
698
+ <div class="col-label">Superclaim(s)</div>
699
+ <div class="claim-block claim-block--super">
700
+ <div>
701
+ <span class="claim-type-tag claim-type-tag--super">Superclaim <span class="claim-id-badge">SC_2</span></span>
702
+ </div>
703
+ <div class="claim-text">Oil is important for the energy transition</div>
704
+ <div class="topic-chip topic-chip--none">⚠ No BERTopic row</div>
705
+ </div>
706
+ </div>
707
+ </div>
708
+ </div>
709
+
710
+ <!-- PROPOSALS -->
711
+ <div class="section-title" style="margin-top:28px">Pending Taxonomy Proposals <span style="background:rgba(139,92,246,0.15);border:1px solid rgba(139,92,246,0.35);color:#c4b5fd;font-size:10px;padding:2px 8px;border-radius:999px;letter-spacing:0.06em;font-weight:600;margin-left:4px">Human Approval</span></div>
712
+
713
+ <div class="proposals-container">
714
+ <div class="reviewer-row">
715
+ <label class="field-label" style="margin:0;white-space:nowrap">Reviewer Name</label>
716
+ <input type="text" class="reviewer-input" placeholder="Your name (stored locally)" />
717
+ </div>
718
+
719
+ <!-- Proposal card -->
720
+ <div class="proposal-card">
721
+ <div class="proposal-header">
722
+ <div class="proposal-icon">⇄</div>
723
+ <div>
724
+ <div class="proposal-type">Merge Superclaims</div>
725
+ <div class="proposal-id">prop_ee21aba40d</div>
726
+ </div>
727
+ </div>
728
+
729
+ <div class="proposal-body">
730
+ Maximizing upsides β€” Although ending routine flaring is a big step forward, the Moho Nord project strove to develop other positive environmental impacts.
731
+ </div>
732
+
733
+ <div class="merge-detail">
734
+ <div class="merge-item">
735
+ <div class="merge-item-label">Keep (canonical)</div>
736
+ <div class="merge-item-id">SC_39</div>
737
+ <div class="merge-item-text">Biomonitoring and advanced environmental monitoring as green credentials</div>
738
+ </div>
739
+ <div class="merge-item">
740
+ <div class="merge-item-label">Merge away</div>
741
+ <div class="merge-item-id">SC_9</div>
742
+ <div class="merge-item-text">Biomonitoring and advanced environmental monitoring as green credentials</div>
743
+ </div>
744
+ </div>
745
+
746
+ <div class="score-row">
747
+ <span class="sim-label">TF-IDF Cosine Similarity</span>
748
+ <div class="sim-bar-wrap" style="flex:1">
749
+ <div class="sim-bar-fill sim-bar-fill--amber" style="width:100%"></div>
750
+ </div>
751
+ <span class="score-val">1.000</span>
752
+ </div>
753
+ <div style="font-size:12px;color:var(--text-3);margin-bottom:12px">
754
+ High TF-IDF cosine similarity between superclaim texts (1.00) β€” consider merging superclaims.
755
+ </div>
756
+
757
+ <div class="proposal-actions">
758
+ <button class="btn-approve">βœ“ Approve</button>
759
+ <button class="btn-reject">βœ• Reject</button>
760
+ <button class="btn-apply">Apply to CSV β†’</button>
761
+ </div>
762
+ </div>
763
+
764
+ <div class="empty-note">
765
+ No further proposals. Run the taxonomy diagnosis pipeline to generate new proposals.
766
+ </div>
767
+ </div>
768
+
769
+ </div>
770
  </body>
771
  </html>
 
styles.css CHANGED
@@ -1,933 +1,842 @@
1
- :root {
2
- --bg: #050816;
3
- --bg-elevated: #0b1020;
4
- --accent: #3b82f6;
5
- --accent-soft: rgba(59, 130, 246, 0.12);
6
- --accent-strong: rgba(59, 130, 246, 0.3);
7
- --text: #f9fafb;
8
- --text-muted: #9ca3af;
9
- --border-subtle: rgba(148, 163, 184, 0.3);
10
- --danger: #f97373;
11
- --radius-lg: 18px;
12
- --radius-md: 10px;
13
- --shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.85);
14
- --shadow-subtle: 0 18px 35px rgba(15, 23, 42, 0.55);
15
- --transition-fast: 150ms ease-out;
16
- }
17
-
18
- *,
19
- *::before,
20
- *::after {
21
- box-sizing: border-box;
22
- }
23
-
24
- body {
25
- margin: 0;
26
- min-height: 100vh;
27
- font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
28
- "Segoe UI", sans-serif;
29
- background: radial-gradient(circle at top, #0b1120 0, #020617 45%, #000 100%);
30
- color: var(--text);
31
- -webkit-font-smoothing: antialiased;
32
- }
33
-
34
- .app {
35
- max-width: 1120px;
36
- margin: 32px auto;
37
- padding: 24px;
38
- }
39
-
40
- .app-header {
41
- background: linear-gradient(135deg, #020617, #020617 40%, #020617 60%);
42
- border-radius: 28px;
43
- padding: 22px 26px 20px;
44
- border: 1px solid rgba(148, 163, 184, 0.35);
45
- box-shadow: var(--shadow-soft);
46
- position: relative;
47
- overflow: hidden;
48
- }
49
-
50
- .app-header::before {
51
- content: "";
52
- position: absolute;
53
- inset: 0;
54
- background: radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.25), transparent 55%),
55
- radial-gradient(circle at 80% 0%, rgba(129, 140, 248, 0.25), transparent 60%);
56
- opacity: 0.9;
57
- pointer-events: none;
58
- }
59
-
60
- .app-header h1,
61
- .app-header p {
62
- position: relative;
63
- z-index: 1;
64
- }
65
-
66
- .app-header h1 {
67
- margin: 0 0 6px;
68
- font-size: 24px;
69
- letter-spacing: 0.02em;
70
- }
71
-
72
- .app-header p {
73
- margin: 0;
74
- font-size: 14px;
75
- color: var(--text-muted);
76
- }
77
-
78
- .input-section {
79
- margin-top: 24px;
80
- padding: 18px 18px 16px;
81
- background: radial-gradient(circle at top left, #020617, #020617 40%, #020617 100%);
82
- border-radius: var(--radius-lg);
83
- border: 1px solid var(--border-subtle);
84
- box-shadow: var(--shadow-subtle);
85
- }
86
-
87
- .field-label {
88
- display: block;
89
- margin-bottom: 8px;
90
- font-size: 13px;
91
- text-transform: uppercase;
92
- letter-spacing: 0.08em;
93
- color: var(--text-muted);
94
- }
95
-
96
- .text-input {
97
- width: 100%;
98
- resize: vertical;
99
- min-height: 160px;
100
- max-height: 340px;
101
- padding: 12px 14px;
102
- font-size: 14px;
103
- color: var(--text);
104
- background: rgba(15, 23, 42, 0.9);
105
- border-radius: var(--radius-md);
106
- border: 1px solid rgba(55, 65, 81, 0.9);
107
- outline: none;
108
- box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.6);
109
- transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
110
- background var(--transition-fast), transform var(--transition-fast);
111
- }
112
-
113
- .text-input:focus {
114
- border-color: var(--accent);
115
- box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.7),
116
- 0 18px 40px rgba(15, 23, 42, 0.9);
117
- background: rgba(15, 23, 42, 0.96);
118
- transform: translateY(-1px);
119
- }
120
-
121
- .controls {
122
- display: flex;
123
- align-items: center;
124
- gap: 10px;
125
- margin-top: 12px;
126
- }
127
-
128
- .primary-btn {
129
- border: none;
130
- border-radius: 999px;
131
- padding: 8px 18px;
132
- font-size: 14px;
133
- font-weight: 500;
134
- letter-spacing: 0.03em;
135
- text-transform: uppercase;
136
- cursor: pointer;
137
- background: linear-gradient(135deg, #3b82f6, #6366f1);
138
- color: white;
139
- box-shadow: 0 16px 30px rgba(37, 99, 235, 0.55);
140
- display: inline-flex;
141
- align-items: center;
142
- gap: 6px;
143
- transition: transform var(--transition-fast), box-shadow var(--transition-fast),
144
- filter var(--transition-fast);
145
- }
146
-
147
- .primary-btn:hover {
148
- transform: translateY(-1px) translateZ(0);
149
- box-shadow: 0 22px 45px rgba(59, 130, 246, 0.75);
150
- filter: brightness(1.05);
151
- }
152
-
153
- .primary-btn:active {
154
- transform: translateY(0);
155
- box-shadow: 0 12px 24px rgba(59, 130, 246, 0.6);
156
- filter: brightness(0.97);
157
- }
158
-
159
- .primary-btn:disabled {
160
- opacity: 0.6;
161
- cursor: default;
162
- transform: none;
163
- box-shadow: none;
164
- }
165
-
166
- .status-text {
167
- font-size: 12px;
168
- color: var(--text-muted);
169
- }
170
-
171
- .results-section {
172
- margin-top: 22px;
173
- }
174
-
175
- .results-section h2 {
176
- margin: 0 0 10px;
177
- font-size: 16px;
178
- letter-spacing: 0.05em;
179
- text-transform: uppercase;
180
- color: var(--text-muted);
181
- }
182
-
183
- .reviewer-row {
184
- display: grid;
185
- grid-template-columns: 160px 1fr;
186
- gap: 12px;
187
- align-items: center;
188
- margin: 0 0 12px;
189
- }
190
-
191
- .reviewer-row .field-label {
192
- margin: 0;
193
- }
194
-
195
- .reviewer-input {
196
- min-height: auto;
197
- max-height: none;
198
- height: 44px;
199
- resize: none;
200
- padding: 10px 12px;
201
- }
202
-
203
- .results-container {
204
- background: radial-gradient(circle at top, #020617, #020617 40%, #020617 100%);
205
- border-radius: var(--radius-lg);
206
- border: 1px solid var(--border-subtle);
207
- box-shadow: var(--shadow-subtle);
208
- padding: 10px 14px 12px;
209
- max-height: 460px;
210
- overflow: auto;
211
- }
212
-
213
- /* Pending proposals should feel lighter/less tall than main results. */
214
- #proposals-container.results-container {
215
- padding: 10px 12px;
216
- max-height: 340px;
217
- }
218
-
219
- .pending-proposal-card {
220
- margin: 0;
221
- }
222
-
223
- .pending-proposal-top {
224
- padding: 10px 12px 0;
225
- }
226
-
227
- .pending-proposal-body {
228
- padding: 10px 12px 12px;
229
- font-size: 13px;
230
- }
231
-
232
- .pending-proposal-actions {
233
- display: flex;
234
- gap: 10px;
235
- padding: 0 12px 12px;
236
- }
237
-
238
- .action-btn {
239
- border: 1px solid rgba(71, 85, 105, 0.65);
240
- background: rgba(15, 23, 42, 0.85);
241
- color: var(--text);
242
- border-radius: 999px;
243
- padding: 7px 12px;
244
- font-size: 12px;
245
- letter-spacing: 0.04em;
246
- text-transform: uppercase;
247
- cursor: pointer;
248
- transition: transform var(--transition-fast), box-shadow var(--transition-fast),
249
- border-color var(--transition-fast), background var(--transition-fast);
250
- }
251
-
252
- .action-btn:hover {
253
- transform: translateY(-1px);
254
- border-color: rgba(96, 165, 250, 0.55);
255
- box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
256
- }
257
-
258
- .action-btn:active {
259
- transform: translateY(0);
260
- }
261
-
262
- .action-btn:disabled {
263
- opacity: 0.55;
264
- cursor: default;
265
- transform: none;
266
- box-shadow: none;
267
- }
268
-
269
- .action-btn--danger {
270
- border-color: rgba(248, 113, 113, 0.55);
271
- }
272
-
273
- .action-btn--accent {
274
- border-color: rgba(59, 130, 246, 0.65);
275
- background: rgba(37, 99, 235, 0.18);
276
- }
277
-
278
- .placeholder {
279
- margin: 0;
280
- font-size: 13px;
281
- color: var(--text-muted);
282
- }
283
-
284
- .results-table {
285
- width: 100%;
286
- border-collapse: collapse;
287
- font-size: 13px;
288
- }
289
-
290
- .results-table thead {
291
- position: sticky;
292
- top: 0;
293
- z-index: 1;
294
- background: linear-gradient(to bottom, #020617, rgba(15, 23, 42, 0.95));
295
- }
296
-
297
- .results-table th,
298
- .results-table td {
299
- padding: 8px 10px;
300
- vertical-align: top;
301
- text-align: left;
302
- }
303
-
304
- .results-table th {
305
- font-size: 11px;
306
- text-transform: uppercase;
307
- letter-spacing: 0.08em;
308
- color: var(--text-muted);
309
- border-bottom: 1px solid rgba(51, 65, 85, 0.9);
310
- }
311
-
312
- /* Row striping and hover highlighting removed for plain rows */
313
-
314
- .sentence-cell {
315
- min-width: 220px;
316
- max-width: 320px;
317
- }
318
-
319
- .results-ledger {
320
- display: flex;
321
- flex-direction: column;
322
- gap: 20px;
323
- }
324
-
325
- .paragraph-result-card {
326
- margin: 0;
327
- padding: 0 0 2px;
328
- border-radius: var(--radius-lg);
329
- border: 1px solid rgba(71, 85, 105, 0.75);
330
- background: linear-gradient(165deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.72));
331
- box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
332
- overflow: hidden;
333
- }
334
-
335
- .paragraph-result-header {
336
- display: flex;
337
- align-items: flex-start;
338
- gap: 12px;
339
- padding: 12px 14px;
340
- background: rgba(30, 41, 59, 0.55);
341
- border-bottom: 1px solid rgba(71, 85, 105, 0.65);
342
- }
343
-
344
- .paragraph-result-badge {
345
- flex-shrink: 0;
346
- display: inline-flex;
347
- align-items: center;
348
- justify-content: center;
349
- min-width: 32px;
350
- height: 32px;
351
- padding: 0 8px;
352
- border-radius: 10px;
353
- font-size: 14px;
354
- font-weight: 700;
355
- color: #e0e7ff;
356
- background: rgba(59, 130, 246, 0.25);
357
- border: 1px solid rgba(96, 165, 250, 0.45);
358
- }
359
-
360
- .paragraph-result-header-text {
361
- min-width: 0;
362
- flex: 1;
363
- }
364
-
365
- .paragraph-result-title {
366
- font-size: 13px;
367
- font-weight: 600;
368
- color: #f1f5f9;
369
- letter-spacing: 0.02em;
370
- }
371
-
372
- .paragraph-result-sub {
373
- margin-top: 4px;
374
- font-size: 11px;
375
- color: var(--text-muted);
376
- line-height: 1.35;
377
- }
378
-
379
- .results-table--in-card {
380
- margin: 0;
381
- border-radius: 0;
382
- }
383
-
384
- .results-table--in-card thead {
385
- background: rgba(15, 23, 42, 0.98);
386
- }
387
-
388
- .results-table--in-card th,
389
- .results-table--in-card td {
390
- padding: 10px 12px;
391
- }
392
-
393
- .paragraph-cell {
394
- background: rgba(15, 23, 42, 0.5);
395
- border-left: 3px solid rgba(59, 130, 246, 0.5);
396
- padding-left: 14px;
397
- line-height: 1.55;
398
- box-shadow: inset 0 0 0 1px rgba(51, 65, 85, 0.4);
399
- border-radius: 0 10px 10px 0;
400
- }
401
-
402
- .collapse-peer-superclaims {
403
- margin-top: 10px;
404
- padding: 12px 12px 10px;
405
- border-radius: var(--radius-md);
406
- background: linear-gradient(
407
- 145deg,
408
- rgba(15, 23, 42, 0.95) 0%,
409
- rgba(15, 23, 42, 0.78) 50%,
410
- rgba(6, 78, 59, 0.12) 100%
411
- );
412
- border: 1px solid rgba(52, 211, 153, 0.22);
413
- border-left: 3px solid rgba(45, 212, 191, 0.65);
414
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
415
- }
416
-
417
- .collapse-peer-superclaims-title {
418
- display: flex;
419
- align-items: center;
420
- gap: 8px;
421
- font-size: 11px;
422
- font-weight: 700;
423
- text-transform: uppercase;
424
- letter-spacing: 0.08em;
425
- color: #ecfdf5;
426
- margin-bottom: 6px;
427
- }
428
-
429
- .collapse-peer-superclaims-title::before {
430
- content: "";
431
- flex-shrink: 0;
432
- width: 8px;
433
- height: 8px;
434
- border-radius: 50%;
435
- background: radial-gradient(circle at 30% 30%, #6ee7b7, #059669);
436
- box-shadow: 0 0 14px rgba(52, 211, 153, 0.55);
437
- }
438
-
439
- .collapse-peer-superclaims-hint {
440
- margin: 0 0 10px;
441
- font-size: 11px;
442
- color: #94a3b8;
443
- line-height: 1.45;
444
- padding: 8px 10px;
445
- border-radius: 8px;
446
- background: rgba(2, 6, 23, 0.35);
447
- border: 1px solid rgba(51, 65, 85, 0.45);
448
- }
449
-
450
- .collapse-peer-superclaims-hint strong {
451
- color: #e2e8f0;
452
- font-weight: 600;
453
- }
454
-
455
- .collapse-sc-target-list {
456
- margin: 0;
457
- padding: 0;
458
- list-style: none;
459
- display: flex;
460
- flex-direction: column;
461
- gap: 8px;
462
- color: var(--text-muted);
463
- }
464
-
465
- .collapse-sc-target-item {
466
- margin: 0;
467
- padding: 10px 10px 10px 12px;
468
- border-radius: 8px;
469
- background: rgba(2, 6, 23, 0.45);
470
- border: 1px solid rgba(71, 85, 105, 0.5);
471
- border-left: 2px solid rgba(59, 130, 246, 0.45);
472
- transition: border-color var(--transition-fast), background var(--transition-fast);
473
- }
474
-
475
- .collapse-sc-target-item:hover {
476
- background: rgba(15, 23, 42, 0.65);
477
- border-color: rgba(96, 165, 250, 0.35);
478
- }
479
-
480
- .collapse-sc-target-line {
481
- font-size: 12px;
482
- margin-bottom: 0;
483
- }
484
-
485
- .collapse-sc-target-text {
486
- font-size: 11px;
487
- color: #cbd5e1;
488
- line-height: 1.4;
489
- margin-top: 6px;
490
- padding-top: 6px;
491
- border-top: 1px solid rgba(51, 65, 85, 0.5);
492
- }
493
-
494
- .collapse-sc-target-meta {
495
- margin-top: 4px;
496
- font-size: 10px;
497
- color: var(--text-muted);
498
- }
499
-
500
- .collapse-peer-superclaims-stale {
501
- margin: 0 0 8px;
502
- font-size: 11px;
503
- color: #fcd34d;
504
- line-height: 1.4;
505
- }
506
-
507
- .collapse-peer-superclaims-stale code {
508
- font-size: 10px;
509
- color: #fde68a;
510
- }
511
-
512
- .collapse-cluster-hint {
513
- margin-top: 8px;
514
- padding: 10px 12px;
515
- font-size: 11px;
516
- line-height: 1.45;
517
- border-radius: var(--radius-md);
518
- }
519
-
520
- .collapse-cluster-hint code {
521
- font-size: 10px;
522
- }
523
-
524
- .collapse-cluster-hint--error {
525
- color: #fecaca;
526
- background: rgba(127, 29, 29, 0.22);
527
- border: 1px solid rgba(248, 113, 113, 0.38);
528
- }
529
-
530
- .collapse-cluster-hint--error code {
531
- color: #fca5a5;
532
- }
533
-
534
- .collapse-cluster-hint--muted {
535
- color: #fde68a;
536
- background: rgba(120, 53, 15, 0.2);
537
- border: 1px solid rgba(251, 191, 36, 0.35);
538
- }
539
-
540
- .collapse-cluster-hint--muted code,
541
- .collapse-cluster-hint--muted strong {
542
- color: #fef3c7;
543
- }
544
-
545
- .collapse-mapping-badge {
546
- display: inline-block;
547
- margin-left: 6px;
548
- padding: 1px 6px;
549
- border-radius: 4px;
550
- font-size: 9px;
551
- font-weight: 600;
552
- text-transform: uppercase;
553
- letter-spacing: 0.04em;
554
- color: #a7f3d0;
555
- background: rgba(16, 185, 129, 0.15);
556
- border: 1px solid rgba(52, 211, 153, 0.35);
557
- vertical-align: middle;
558
- }
559
-
560
- .collapse-peer-superclaims.collapse-peer-superclaims--empty {
561
- font-size: 12px;
562
- color: #94a3b8;
563
- margin-top: 0;
564
- padding: 12px 14px;
565
- text-align: center;
566
- line-height: 1.45;
567
- border-left-color: rgba(100, 116, 139, 0.45);
568
- border-color: rgba(71, 85, 105, 0.45);
569
- background: rgba(15, 23, 42, 0.72);
570
- }
571
-
572
- .sentence-chip {
573
- display: inline-flex;
574
- padding: 6px 8px;
575
- border-radius: 999px;
576
- background: rgba(15, 23, 42, 0.9);
577
- border: 1px solid rgba(51, 65, 85, 0.95);
578
- box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65);
579
- }
580
-
581
- .sentence-chip span {
582
- font-size: 12px;
583
- color: #e5e7eb;
584
- }
585
-
586
- .claims-list {
587
- margin: 0;
588
- padding: 0;
589
- list-style: none;
590
- display: flex;
591
- flex-direction: column;
592
- gap: 8px;
593
- }
594
-
595
- .claim-pill {
596
- padding: 0;
597
- }
598
-
599
- .claim-label {
600
- font-size: 11px;
601
- font-weight: 600;
602
- text-transform: uppercase;
603
- letter-spacing: 0.09em;
604
- color: var(--text-muted);
605
- margin-bottom: 4px;
606
- }
607
-
608
- .claim-text {
609
- font-size: 13px;
610
- color: #e5e7eb;
611
- }
612
-
613
- .claim-meta {
614
- margin-top: 4px;
615
- font-size: 11px;
616
- color: var(--text-muted);
617
- }
618
-
619
- .collapse-block {
620
- margin-top: 8px;
621
- }
622
-
623
- .collapse-meta {
624
- display: block;
625
- line-height: 1.45;
626
- }
627
-
628
- .collapse-badge {
629
- display: inline-block;
630
- margin-bottom: 4px;
631
- padding: 2px 8px;
632
- border-radius: 999px;
633
- font-size: 10px;
634
- font-weight: 600;
635
- letter-spacing: 0.06em;
636
- text-transform: uppercase;
637
- color: #fef3c7;
638
- background: rgba(234, 179, 8, 0.2);
639
- border: 1px solid rgba(250, 204, 21, 0.45);
640
- }
641
-
642
- .collapse-badge-quiet {
643
- color: var(--text-muted);
644
- background: rgba(51, 65, 85, 0.5);
645
- border-color: rgba(100, 116, 139, 0.6);
646
- font-weight: 500;
647
- }
648
-
649
- .collapse-topic-label {
650
- font-size: 11px;
651
- color: var(--text-muted);
652
- margin-bottom: 4px;
653
- }
654
-
655
- .collapse-peers {
656
- font-size: 12px;
657
- color: #e5e7eb;
658
- }
659
-
660
- .collapse-peers .claim-id {
661
- margin-right: 4px;
662
- }
663
-
664
- .collapse-more {
665
- display: inline-block;
666
- margin-top: 8px;
667
- padding: 4px 10px;
668
- color: #cbd5e1;
669
- font-size: 11px;
670
- font-weight: 500;
671
- border-radius: 999px;
672
- background: rgba(15, 23, 42, 0.9);
673
- border: 1px solid rgba(71, 85, 105, 0.55);
674
- }
675
-
676
- .collapse-meta code {
677
- font-size: 10px;
678
- color: #a5b4fc;
679
- }
680
-
681
- .hierarchy-confidence {
682
- display: inline-flex;
683
- align-items: center;
684
- gap: 6px;
685
- flex-wrap: wrap;
686
- font-size: 11px;
687
- color: #94a3b8;
688
- margin-bottom: 8px;
689
- padding: 6px 10px;
690
- border-radius: 8px;
691
- background: rgba(2, 6, 23, 0.4);
692
- border: 1px solid rgba(51, 65, 85, 0.55);
693
- }
694
-
695
- .hierarchy-confidence strong {
696
- color: #5eead4;
697
- font-weight: 700;
698
- font-variant-numeric: tabular-nums;
699
- letter-spacing: 0.02em;
700
- }
701
-
702
- .claim-id {
703
- font-weight: 600;
704
- color: #d1d5db;
705
- }
706
-
707
- .no-match {
708
- font-size: 12px;
709
- color: var(--text-muted);
710
- }
711
-
712
- .no-match strong {
713
- color: #e5e7eb;
714
- }
715
-
716
- .error-text {
717
- color: var(--danger);
718
- }
719
-
720
- @media (max-width: 768px) {
721
- .app {
722
- margin: 16px auto;
723
- padding: 14px;
724
- }
725
-
726
- .app-header {
727
- border-radius: 22px;
728
- padding: 18px 16px 16px;
729
- }
730
-
731
- .results-ledger {
732
- gap: 16px;
733
- }
734
-
735
- .paragraph-result-header {
736
- padding: 10px 12px;
737
- }
738
-
739
- .results-table--in-card {
740
- display: table;
741
- width: 100%;
742
- }
743
-
744
- .results-table--in-card thead {
745
- display: table-header-group;
746
- }
747
-
748
- .results-table--in-card tbody {
749
- display: table-row-group;
750
- }
751
-
752
- .results-table--in-card tr {
753
- display: table-row;
754
- }
755
-
756
- .results-table--in-card th,
757
- .results-table--in-card td {
758
- display: table-cell;
759
- }
760
-
761
- .results-table--in-card tbody tr {
762
- border-bottom: 1px solid rgba(51, 65, 85, 0.5);
763
- }
764
-
765
- .results-table--in-card tbody tr:last-child {
766
- border-bottom: none;
767
- }
768
-
769
- .results-table--in-card td {
770
- padding: 8px 10px;
771
- }
772
- }
773
-
774
- .proposal-merge-claims {
775
- display: grid;
776
- grid-template-columns: 1fr 1fr;
777
- gap: 12px;
778
- margin: 0 0 12px;
779
- }
780
-
781
- @media (max-width: 640px) {
782
- .proposal-merge-claims {
783
- grid-template-columns: 1fr;
784
- }
785
- }
786
-
787
- .proposal-merge-claim {
788
- padding: 12px;
789
- border-radius: var(--radius-md);
790
- background: linear-gradient(160deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.65));
791
- border: 1px solid rgba(71, 85, 105, 0.55);
792
- box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
793
- }
794
-
795
- .proposal-merge-claim:first-child {
796
- border-left: 3px solid rgba(52, 211, 153, 0.75);
797
- }
798
-
799
- .proposal-merge-claim:last-child {
800
- border-left: 3px solid rgba(251, 191, 36, 0.65);
801
- }
802
-
803
- .proposal-merge-label {
804
- display: block;
805
- font-size: 10px;
806
- font-weight: 700;
807
- text-transform: uppercase;
808
- letter-spacing: 0.08em;
809
- color: #94a3b8;
810
- margin-bottom: 8px;
811
- }
812
-
813
- .proposal-merge-claim:first-child .proposal-merge-label {
814
- color: #6ee7b7;
815
- }
816
-
817
- .proposal-merge-claim:last-child .proposal-merge-label {
818
- color: #fcd34d;
819
- }
820
-
821
- .proposal-merge-body {
822
- font-size: 13px;
823
- line-height: 1.5;
824
- color: #e5e7eb;
825
- margin-bottom: 8px;
826
- }
827
-
828
- .proposal-merge-id {
829
- display: block;
830
- font-size: 10px;
831
- padding: 4px 8px;
832
- border-radius: 6px;
833
- background: rgba(2, 6, 23, 0.55);
834
- border: 1px solid rgba(51, 65, 85, 0.65);
835
- color: #a5b4fc;
836
- word-break: break-all;
837
- }
838
-
839
- .proposal-line {
840
- font-size: 12px;
841
- color: #cbd5e1;
842
- line-height: 1.5;
843
- margin-top: 6px;
844
- }
845
-
846
- .proposal-line:first-child {
847
- margin-top: 0;
848
- }
849
-
850
- .proposal-merge-claims + .proposal-line {
851
- margin-top: 10px;
852
- padding-top: 10px;
853
- border-top: 1px solid rgba(51, 65, 85, 0.45);
854
- }
855
-
856
- .proposal-line code {
857
- font-size: 11px;
858
- color: #a5b4fc;
859
- }
860
-
861
- .proposal-line strong {
862
- color: #e2e8f0;
863
- font-weight: 600;
864
- }
865
-
866
- .proposal-reason {
867
- margin-top: 10px;
868
- padding: 10px 12px;
869
- border-radius: 8px;
870
- background: rgba(30, 27, 75, 0.35);
871
- border: 1px solid rgba(99, 102, 241, 0.25);
872
- color: #e0e7ff;
873
- }
874
-
875
- .proposal-section {
876
- margin-bottom: 12px;
877
- }
878
-
879
- .proposal-section:last-child {
880
- margin-bottom: 0;
881
- }
882
-
883
- .proposal-section-heading {
884
- font-size: 10px;
885
- font-weight: 700;
886
- text-transform: uppercase;
887
- letter-spacing: 0.08em;
888
- color: #94a3b8;
889
- margin-bottom: 6px;
890
- }
891
-
892
- .proposal-section-body {
893
- font-size: 13px;
894
- line-height: 1.5;
895
- color: #e5e7eb;
896
- padding: 10px 12px;
897
- border-radius: var(--radius-md);
898
- background: rgba(15, 23, 42, 0.55);
899
- border: 1px solid rgba(51, 65, 85, 0.5);
900
- }
901
-
902
- .proposal-section-body--superclaim {
903
- border-left: 3px solid rgba(129, 140, 248, 0.6);
904
- }
905
-
906
- .proposal-paragraph {
907
- font-size: 13px;
908
- line-height: 1.55;
909
- color: #e5e7eb;
910
- padding: 10px 12px;
911
- border-radius: var(--radius-md);
912
- background: rgba(15, 23, 42, 0.5);
913
- border: 1px solid rgba(51, 65, 85, 0.5);
914
- max-height: 8rem;
915
- overflow: auto;
916
- }
917
-
918
- .proposal-empty-hint {
919
- margin-top: 0.75rem;
920
- max-width: 52rem;
921
- font-size: 0.9rem;
922
- line-height: 1.45;
923
- opacity: 0.88;
924
- }
925
-
926
- .proposal-empty-hint a {
927
- color: inherit;
928
- text-decoration: underline;
929
- }
930
-
931
- .proposal-empty-hint code {
932
- font-size: 0.86em;
933
- }
 
1
+ /* ═══════════════════════════════════════════════════════════════
2
+ CLAIMS 2.0 Β· Redesigned styles.css
3
+ Drop-in replacement β€” all original class names preserved
4
+ ═══════════════════════════════════════════════════════════════ */
5
+
6
+ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');
7
+
8
+ :root {
9
+ /* backgrounds */
10
+ --bg: #080c18;
11
+ --bg-elevated: #0d1424;
12
+ --bg-2: #111827;
13
+
14
+ /* accent / brand */
15
+ --accent: #3b82f6;
16
+ --accent-soft: rgba(59,130,246,0.1);
17
+ --accent-strong: rgba(59,130,246,0.3);
18
+
19
+ /* text */
20
+ --text: #f1f5f9;
21
+ --text-muted: #94a3b8;
22
+ --text-dim: #64748b;
23
+
24
+ /* borders */
25
+ --border-subtle: rgba(255,255,255,0.07);
26
+ --border-mid: rgba(255,255,255,0.12);
27
+
28
+ /* semantic: subclaim = teal */
29
+ --teal: #0d9488;
30
+ --teal-bg: rgba(13,148,136,0.1);
31
+ --teal-border: rgba(13,148,136,0.35);
32
+ --teal-text: #5eead4;
33
+
34
+ /* semantic: superclaim = amber */
35
+ --amber: #d97706;
36
+ --amber-bg: rgba(217,119,6,0.1);
37
+ --amber-border: rgba(217,119,6,0.35);
38
+ --amber-text: #fcd34d;
39
+
40
+ /* semantic: approved */
41
+ --green: #059669;
42
+ --green-bg: rgba(5,150,105,0.12);
43
+ --green-border: rgba(5,150,105,0.4);
44
+ --green-text: #34d399;
45
+
46
+ /* semantic: rejected / danger */
47
+ --danger: #dc2626;
48
+ --danger-bg: rgba(220,38,38,0.1);
49
+ --danger-border: rgba(220,38,38,0.35);
50
+ --danger-text: #f87171;
51
+
52
+ /* radii */
53
+ --radius-lg: 14px;
54
+ --radius-md: 9px;
55
+
56
+ /* shadows (lighter than before) */
57
+ --shadow-soft: 0 12px 32px rgba(0,0,0,0.5);
58
+ --shadow-subtle: 0 6px 18px rgba(0,0,0,0.3);
59
+
60
+ --transition-fast: 150ms ease-out;
61
+ }
62
+
63
+ *, *::before, *::after { box-sizing: border-box; }
64
+
65
+ body {
66
+ margin: 0;
67
+ min-height: 100vh;
68
+ font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
69
+ background: radial-gradient(circle at top, #0d1424 0, #06091a 40%, #000 100%);
70
+ color: var(--text);
71
+ -webkit-font-smoothing: antialiased;
72
+ }
73
+
74
+ /* ── APP SHELL ─────────────────────────────────────────── */
75
+
76
+ .app {
77
+ max-width: 1120px;
78
+ margin: 28px auto;
79
+ padding: 20px;
80
+ }
81
+
82
+ /* ── HEADER ─────────────────────────────────────────────── */
83
+
84
+ .app-header {
85
+ background: var(--bg-elevated);
86
+ border-radius: 20px;
87
+ padding: 20px 24px 18px;
88
+ border: 1px solid var(--border-mid);
89
+ box-shadow: var(--shadow-soft);
90
+ position: relative;
91
+ overflow: hidden;
92
+ margin-bottom: 20px;
93
+ }
94
+
95
+ /* rainbow accent line at very top */
96
+ .app-header::before {
97
+ content: '';
98
+ position: absolute;
99
+ top: 0; left: 0; right: 0;
100
+ height: 2px;
101
+ background: linear-gradient(90deg, var(--teal), var(--accent), var(--amber));
102
+ pointer-events: none;
103
+ }
104
+
105
+ /* subtle glow */
106
+ .app-header::after {
107
+ content: '';
108
+ position: absolute;
109
+ inset: 0;
110
+ background:
111
+ radial-gradient(circle at 0% 0%, rgba(96,165,250,0.12), transparent 55%),
112
+ radial-gradient(circle at 90% 0%, rgba(129,140,248,0.12), transparent 55%);
113
+ pointer-events: none;
114
+ }
115
+
116
+ .app-header h1,
117
+ .app-header p { position: relative; z-index: 1; }
118
+
119
+ .app-header h1 {
120
+ margin: 0 0 5px;
121
+ font-size: 22px;
122
+ font-weight: 600;
123
+ letter-spacing: -0.01em;
124
+ }
125
+
126
+ .app-header p {
127
+ margin: 0;
128
+ font-size: 13px;
129
+ color: var(--text-muted);
130
+ }
131
+
132
+ /* stats chips row (add to your header HTML if desired) */
133
+ .stats-row {
134
+ display: flex;
135
+ gap: 8px;
136
+ flex-wrap: wrap;
137
+ margin-top: 14px;
138
+ position: relative;
139
+ z-index: 1;
140
+ }
141
+
142
+ .stat-chip {
143
+ display: inline-flex;
144
+ align-items: center;
145
+ gap: 6px;
146
+ padding: 4px 12px;
147
+ border-radius: 999px;
148
+ border: 1px solid var(--border-subtle);
149
+ background: var(--bg-2);
150
+ font-size: 12px;
151
+ color: var(--text-muted);
152
+ }
153
+
154
+ .stat-chip strong {
155
+ font-weight: 600;
156
+ color: var(--text);
157
+ }
158
+
159
+ .stat-dot {
160
+ width: 6px; height: 6px;
161
+ border-radius: 50%;
162
+ flex-shrink: 0;
163
+ }
164
+
165
+ /* ── INPUT SECTION ──────────────────────────────────────── */
166
+
167
+ .input-section {
168
+ margin-top: 20px;
169
+ padding: 16px;
170
+ background: var(--bg-elevated);
171
+ border-radius: var(--radius-lg);
172
+ border: 1px solid var(--border-subtle);
173
+ box-shadow: var(--shadow-subtle);
174
+ }
175
+
176
+ .field-label {
177
+ display: block;
178
+ margin-bottom: 8px;
179
+ font-size: 11px;
180
+ text-transform: uppercase;
181
+ letter-spacing: 0.1em;
182
+ font-weight: 500;
183
+ color: var(--text-dim);
184
+ }
185
+
186
+ .text-input {
187
+ width: 100%;
188
+ resize: vertical;
189
+ min-height: 160px;
190
+ max-height: 340px;
191
+ padding: 12px 14px;
192
+ font-size: 14px;
193
+ font-family: 'DM Sans', sans-serif;
194
+ color: var(--text);
195
+ background: rgba(0,0,0,0.3);
196
+ border-radius: var(--radius-md);
197
+ border: 1px solid var(--border-subtle);
198
+ outline: none;
199
+ transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
200
+ }
201
+
202
+ .text-input:focus {
203
+ border-color: rgba(59,130,246,0.5);
204
+ box-shadow: 0 0 0 3px rgba(59,130,246,0.08);
205
+ }
206
+
207
+ .text-input::placeholder { color: var(--text-dim); }
208
+
209
+ .controls {
210
+ display: flex;
211
+ align-items: center;
212
+ gap: 10px;
213
+ margin-top: 12px;
214
+ }
215
+
216
+ .primary-btn {
217
+ border: none;
218
+ border-radius: 999px;
219
+ padding: 8px 20px;
220
+ font-size: 13px;
221
+ font-family: 'DM Sans', sans-serif;
222
+ font-weight: 500;
223
+ letter-spacing: 0.05em;
224
+ text-transform: uppercase;
225
+ cursor: pointer;
226
+ background: linear-gradient(135deg, #2563eb, #4f46e5);
227
+ color: #fff;
228
+ box-shadow: 0 4px 18px rgba(37,99,235,0.4);
229
+ display: inline-flex;
230
+ align-items: center;
231
+ gap: 6px;
232
+ transition: transform var(--transition-fast), filter var(--transition-fast);
233
+ }
234
+
235
+ .primary-btn:hover {
236
+ transform: translateY(-1px);
237
+ filter: brightness(1.08);
238
+ }
239
+
240
+ .primary-btn:active {
241
+ transform: translateY(0);
242
+ filter: brightness(0.97);
243
+ }
244
+
245
+ .primary-btn:disabled {
246
+ opacity: 0.5;
247
+ cursor: default;
248
+ transform: none;
249
+ }
250
+
251
+ .status-text {
252
+ font-size: 12px;
253
+ color: var(--text-dim);
254
+ }
255
+
256
+ /* ── RESULTS SECTION HEADER ─────────────────────────────── */
257
+
258
+ .results-section { margin-top: 24px; }
259
+
260
+ .results-section h2 {
261
+ margin: 0 0 10px;
262
+ font-size: 11px;
263
+ font-weight: 600;
264
+ letter-spacing: 0.1em;
265
+ text-transform: uppercase;
266
+ color: var(--text-dim);
267
+ display: flex;
268
+ align-items: center;
269
+ gap: 8px;
270
+ }
271
+
272
+ .results-section h2::after {
273
+ content: '';
274
+ flex: 1;
275
+ height: 1px;
276
+ background: var(--border-subtle);
277
+ }
278
+
279
+ /* ── REVIEWER ROW ───────────────────────────────────────── */
280
+
281
+ .reviewer-row {
282
+ display: grid;
283
+ grid-template-columns: 140px 1fr;
284
+ gap: 12px;
285
+ align-items: center;
286
+ margin-bottom: 12px;
287
+ }
288
+
289
+ .reviewer-row .field-label { margin: 0; }
290
+
291
+ .reviewer-input {
292
+ min-height: auto;
293
+ max-height: none;
294
+ height: 40px;
295
+ resize: none;
296
+ padding: 8px 12px;
297
+ }
298
+
299
+ /* ── RESULTS CONTAINER ──────────────────────────────────── */
300
+
301
+ .results-container {
302
+ background: var(--bg-elevated);
303
+ border-radius: var(--radius-lg);
304
+ border: 1px solid var(--border-subtle);
305
+ box-shadow: var(--shadow-subtle);
306
+ padding: 10px 14px 12px;
307
+ max-height: 460px;
308
+ overflow: auto;
309
+ }
310
+
311
+ #proposals-container.results-container {
312
+ padding: 0;
313
+ max-height: 400px;
314
+ overflow: hidden;
315
+ }
316
+
317
+ /* ── PENDING PROPOSAL CARD ──────────────────────────────── */
318
+
319
+ .pending-proposal-card {
320
+ margin: 0;
321
+ border-bottom: 1px solid var(--border-subtle);
322
+ transition: background var(--transition-fast);
323
+ }
324
+
325
+ .pending-proposal-card:last-child { border-bottom: none; }
326
+ .pending-proposal-card:hover { background: rgba(255,255,255,0.02); }
327
+
328
+ .pending-proposal-top {
329
+ display: flex;
330
+ align-items: center;
331
+ gap: 10px;
332
+ padding: 12px 16px 0;
333
+ }
334
+
335
+ .pending-proposal-body {
336
+ padding: 10px 16px 12px;
337
+ font-size: 13px;
338
+ line-height: 1.6;
339
+ color: var(--text-muted);
340
+ background: rgba(0,0,0,0.18);
341
+ border-top: 1px solid var(--border-subtle);
342
+ border-bottom: 1px solid var(--border-subtle);
343
+ margin: 8px 0;
344
+ }
345
+
346
+ .pending-proposal-actions {
347
+ display: flex;
348
+ gap: 8px;
349
+ padding: 0 16px 14px;
350
+ }
351
+
352
+ /* ── ACTION BUTTONS ────────────────────────────────────── */
353
+
354
+ .action-btn {
355
+ border-radius: 999px;
356
+ padding: 7px 14px;
357
+ font-size: 12px;
358
+ font-family: 'DM Sans', sans-serif;
359
+ font-weight: 500;
360
+ letter-spacing: 0.05em;
361
+ text-transform: uppercase;
362
+ cursor: pointer;
363
+ transition: filter var(--transition-fast), transform var(--transition-fast);
364
+ /* default neutral style */
365
+ border: 1px solid var(--border-mid);
366
+ background: rgba(255,255,255,0.04);
367
+ color: var(--text-muted);
368
+ }
369
+
370
+ .action-btn:hover {
371
+ transform: translateY(-1px);
372
+ filter: brightness(1.15);
373
+ }
374
+
375
+ .action-btn:active { transform: translateY(0); }
376
+
377
+ .action-btn:disabled {
378
+ opacity: 0.45;
379
+ cursor: default;
380
+ transform: none;
381
+ }
382
+
383
+ /* approve = green */
384
+ .action-btn:first-child {
385
+ border-color: var(--green-border);
386
+ background: var(--green-bg);
387
+ color: var(--green-text);
388
+ }
389
+
390
+ /* reject = red */
391
+ .action-btn--danger {
392
+ border-color: var(--danger-border);
393
+ background: var(--danger-bg);
394
+ color: var(--danger-text);
395
+ }
396
+
397
+ /* apply = blue */
398
+ .action-btn--accent {
399
+ border-color: var(--accent-strong);
400
+ background: var(--accent-soft);
401
+ color: #93c5fd;
402
+ margin-left: auto;
403
+ }
404
+
405
+ .placeholder {
406
+ margin: 0;
407
+ font-size: 13px;
408
+ color: var(--text-dim);
409
+ text-align: center;
410
+ padding: 16px;
411
+ }
412
+
413
+ /* ── RESULTS TABLE ────��─────────────────────────────────── */
414
+
415
+ .results-table {
416
+ width: 100%;
417
+ border-collapse: collapse;
418
+ font-size: 13px;
419
+ }
420
+
421
+ .results-table thead {
422
+ position: sticky;
423
+ top: 0;
424
+ z-index: 1;
425
+ background: var(--bg-elevated);
426
+ }
427
+
428
+ .results-table th,
429
+ .results-table td {
430
+ padding: 9px 11px;
431
+ vertical-align: top;
432
+ text-align: left;
433
+ }
434
+
435
+ .results-table th {
436
+ font-size: 10px;
437
+ font-weight: 600;
438
+ text-transform: uppercase;
439
+ letter-spacing: 0.1em;
440
+ color: var(--text-dim);
441
+ border-bottom: 1px solid var(--border-subtle);
442
+ }
443
+
444
+ .sentence-cell {
445
+ min-width: 220px;
446
+ max-width: 320px;
447
+ }
448
+
449
+ /* ── RESULTS LEDGER ─────────────────────────────────────── */
450
+
451
+ .results-ledger {
452
+ display: flex;
453
+ flex-direction: column;
454
+ gap: 14px;
455
+ }
456
+
457
+ /* ── PARAGRAPH RESULT CARD ──────────────────────────────── */
458
+
459
+ .paragraph-result-card {
460
+ margin: 0;
461
+ border-radius: var(--radius-lg);
462
+ border: 1px solid var(--border-subtle);
463
+ background: var(--bg-elevated);
464
+ box-shadow: var(--shadow-subtle);
465
+ overflow: hidden;
466
+ transition: border-color var(--transition-fast);
467
+ }
468
+
469
+ .paragraph-result-card:hover { border-color: var(--border-mid); }
470
+
471
+ .paragraph-result-header {
472
+ display: flex;
473
+ align-items: center;
474
+ gap: 12px;
475
+ padding: 12px 16px;
476
+ background: rgba(255,255,255,0.02);
477
+ border-bottom: 1px solid var(--border-subtle);
478
+ }
479
+
480
+ .paragraph-result-badge {
481
+ flex-shrink: 0;
482
+ display: inline-flex;
483
+ align-items: center;
484
+ justify-content: center;
485
+ min-width: 32px;
486
+ height: 32px;
487
+ padding: 0 8px;
488
+ border-radius: 9px;
489
+ font-size: 13px;
490
+ font-weight: 600;
491
+ font-family: 'DM Mono', monospace;
492
+ color: #93c5fd;
493
+ background: var(--accent-soft);
494
+ border: 1px solid var(--accent-strong);
495
+ }
496
+
497
+ .paragraph-result-header-text { min-width: 0; flex: 1; }
498
+
499
+ .paragraph-result-title {
500
+ font-size: 13px;
501
+ font-weight: 600;
502
+ color: var(--text);
503
+ }
504
+
505
+ .paragraph-result-sub {
506
+ margin-top: 3px;
507
+ font-size: 11px;
508
+ color: var(--text-dim);
509
+ }
510
+
511
+ .results-table--in-card { margin: 0; }
512
+
513
+ .results-table--in-card thead {
514
+ background: rgba(0,0,0,0.2);
515
+ }
516
+
517
+ .results-table--in-card th,
518
+ .results-table--in-card td {
519
+ padding: 10px 14px;
520
+ }
521
+
522
+ /* paragraph text column accent */
523
+ .paragraph-cell {
524
+ border-left: 2px solid var(--accent-strong);
525
+ padding-left: 12px;
526
+ line-height: 1.6;
527
+ color: var(--text-muted);
528
+ font-size: 13px;
529
+ }
530
+
531
+ /* ── CLAIM PILLS ────────────────────────────────────────── */
532
+
533
+ .claims-list {
534
+ margin: 0; padding: 0;
535
+ list-style: none;
536
+ display: flex;
537
+ flex-direction: column;
538
+ gap: 8px;
539
+ }
540
+
541
+ .claim-pill { padding: 0; }
542
+
543
+ .claim-label {
544
+ font-size: 10px;
545
+ font-weight: 600;
546
+ text-transform: uppercase;
547
+ letter-spacing: 0.09em;
548
+ color: var(--text-dim);
549
+ margin-bottom: 4px;
550
+ }
551
+
552
+ .claim-text {
553
+ font-size: 13px;
554
+ color: var(--text);
555
+ line-height: 1.5;
556
+ }
557
+
558
+ .claim-meta {
559
+ margin-top: 4px;
560
+ font-size: 11px;
561
+ color: var(--text-muted);
562
+ }
563
+
564
+ /* ── CLAIM ID BADGE ─────────────────────────────────────── */
565
+
566
+ .claim-id {
567
+ font-family: 'DM Mono', monospace;
568
+ font-weight: 500;
569
+ color: var(--text-muted);
570
+ font-size: 11px;
571
+ }
572
+
573
+ /* Subclaim chip β€” teal */
574
+ .claim-type-tag {
575
+ display: inline-flex;
576
+ align-items: center;
577
+ gap: 4px;
578
+ padding: 2px 8px;
579
+ border-radius: 999px;
580
+ font-size: 10px;
581
+ font-weight: 600;
582
+ letter-spacing: 0.07em;
583
+ text-transform: uppercase;
584
+ margin-bottom: 5px;
585
+ }
586
+
587
+ .claim-type-tag--sub {
588
+ background: var(--teal-bg);
589
+ border: 1px solid var(--teal-border);
590
+ color: var(--teal-text);
591
+ }
592
+
593
+ .claim-type-tag--super {
594
+ background: var(--amber-bg);
595
+ border: 1px solid var(--amber-border);
596
+ color: var(--amber-text);
597
+ }
598
+
599
+ /* ── SIMILARITY BAR ─────────────────────────────────────── */
600
+
601
+ .sim-row {
602
+ display: flex;
603
+ align-items: center;
604
+ gap: 8px;
605
+ margin-top: 7px;
606
+ }
607
+
608
+ .sim-label {
609
+ font-size: 10px;
610
+ color: var(--text-dim);
611
+ white-space: nowrap;
612
+ }
613
+
614
+ .sim-bar-wrap {
615
+ flex: 1;
616
+ height: 3px;
617
+ background: rgba(255,255,255,0.06);
618
+ border-radius: 99px;
619
+ overflow: hidden;
620
+ }
621
+
622
+ .sim-bar-fill {
623
+ height: 100%;
624
+ border-radius: 99px;
625
+ background: linear-gradient(90deg, var(--teal), #22d3ee);
626
+ }
627
+
628
+ .sim-bar-fill--amber {
629
+ background: linear-gradient(90deg, var(--amber), #fbbf24);
630
+ }
631
+
632
+ .sim-val {
633
+ font-family: 'DM Mono', monospace;
634
+ font-size: 11px;
635
+ font-weight: 500;
636
+ color: var(--text-muted);
637
+ min-width: 30px;
638
+ text-align: right;
639
+ }
640
+
641
+ /* ── TOPIC CHIPS ────────────────────────────────────────── */
642
+
643
+ .topic-chip {
644
+ display: inline-flex;
645
+ align-items: center;
646
+ gap: 4px;
647
+ padding: 2px 8px;
648
+ border-radius: 999px;
649
+ font-size: 10px;
650
+ font-weight: 600;
651
+ letter-spacing: 0.06em;
652
+ text-transform: uppercase;
653
+ margin-top: 5px;
654
+ }
655
+
656
+ .topic-chip--none {
657
+ background: var(--danger-bg);
658
+ border: 1px solid var(--danger-border);
659
+ color: var(--danger-text);
660
+ }
661
+
662
+ .topic-chip--match {
663
+ background: var(--green-bg);
664
+ border: 1px solid var(--green-border);
665
+ color: var(--green-text);
666
+ }
667
+
668
+ /* ── COLLAPSE / TAXONOMY WIDGETS ───────────────────────── */
669
+
670
+ .collapse-block { margin-top: 8px; }
671
+
672
+ .collapse-badge {
673
+ display: inline-block;
674
+ margin-bottom: 4px;
675
+ padding: 2px 9px;
676
+ border-radius: 999px;
677
+ font-size: 10px;
678
+ font-weight: 600;
679
+ letter-spacing: 0.06em;
680
+ text-transform: uppercase;
681
+ color: var(--amber-text);
682
+ background: var(--amber-bg);
683
+ border: 1px solid var(--amber-border);
684
+ }
685
+
686
+ .collapse-badge-quiet {
687
+ color: var(--text-dim);
688
+ background: rgba(51,65,85,0.4);
689
+ border-color: rgba(100,116,139,0.5);
690
+ font-weight: 500;
691
+ }
692
+
693
+ .collapse-meta { display: block; line-height: 1.45; }
694
+ .collapse-topic-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
695
+ .collapse-peers { font-size: 12px; color: var(--text); }
696
+ .collapse-peers .claim-id { margin-right: 4px; }
697
+ .collapse-more { color: var(--text-dim); font-size: 11px; }
698
+ .collapse-meta code { font-size: 10px; color: #a5b4fc; font-family: 'DM Mono', monospace; }
699
+
700
+ .hierarchy-confidence {
701
+ font-size: 11px;
702
+ color: var(--text-muted);
703
+ margin-bottom: 8px;
704
+ }
705
+
706
+ .hierarchy-confidence strong {
707
+ color: var(--teal-text);
708
+ font-weight: 600;
709
+ }
710
+
711
+ .collapse-peer-superclaims {
712
+ margin-top: 8px;
713
+ padding: 10px 12px 8px;
714
+ border-radius: var(--radius-md);
715
+ background: rgba(0,0,0,0.25);
716
+ border: 1px solid var(--border-subtle);
717
+ }
718
+
719
+ .collapse-peer-superclaims-title {
720
+ font-size: 10px;
721
+ font-weight: 600;
722
+ text-transform: uppercase;
723
+ letter-spacing: 0.07em;
724
+ color: var(--amber-text);
725
+ margin-bottom: 4px;
726
+ }
727
+
728
+ .collapse-peer-superclaims-hint {
729
+ margin: 0 0 8px;
730
+ font-size: 11px;
731
+ color: var(--text-muted);
732
+ line-height: 1.4;
733
+ }
734
+
735
+ .collapse-sc-target-list { margin: 0; padding-left: 18px; color: var(--text-muted); }
736
+ .collapse-sc-target-item { margin-bottom: 10px; }
737
+ .collapse-sc-target-item:last-child { margin-bottom: 4px; }
738
+ .collapse-sc-target-line { font-size: 12px; margin-bottom: 2px; }
739
+ .collapse-sc-target-text { font-size: 11px; color: #cbd5e1; line-height: 1.35; margin-top: 2px; }
740
+ .collapse-sc-target-meta { margin-top: 4px; font-size: 10px; color: var(--text-dim); }
741
+
742
+ .collapse-peer-superclaims-stale {
743
+ margin: 0 0 8px;
744
+ font-size: 11px;
745
+ color: #fcd34d;
746
+ line-height: 1.4;
747
+ }
748
+
749
+ .collapse-peer-superclaims-stale code {
750
+ font-size: 10px;
751
+ color: #fde68a;
752
+ font-family: 'DM Mono', monospace;
753
+ }
754
+
755
+ .collapse-stale-cluster-msg {
756
+ margin-top: 8px;
757
+ padding: 10px;
758
+ font-size: 11px;
759
+ line-height: 1.45;
760
+ color: #fecaca;
761
+ background: rgba(127,29,29,0.18);
762
+ border: 1px solid var(--danger-border);
763
+ border-radius: var(--radius-md);
764
+ }
765
+
766
+ .collapse-stale-cluster-msg code {
767
+ font-size: 10px;
768
+ color: #fca5a5;
769
+ font-family: 'DM Mono', monospace;
770
+ }
771
+
772
+ .collapse-mapping-badge {
773
+ display: inline-block;
774
+ margin-left: 6px;
775
+ padding: 1px 6px;
776
+ border-radius: 4px;
777
+ font-size: 9px;
778
+ font-weight: 600;
779
+ text-transform: uppercase;
780
+ letter-spacing: 0.04em;
781
+ color: var(--green-text);
782
+ background: var(--green-bg);
783
+ border: 1px solid var(--green-border);
784
+ vertical-align: middle;
785
+ }
786
+
787
+ .collapse-peer-superclaims--empty {
788
+ font-size: 11px;
789
+ color: var(--text-dim);
790
+ margin-top: 6px;
791
+ }
792
+
793
+ /* ── MISC ───────────────────────────────────────────────── */
794
+
795
+ .sentence-chip {
796
+ display: inline-flex;
797
+ padding: 5px 9px;
798
+ border-radius: 999px;
799
+ background: rgba(0,0,0,0.3);
800
+ border: 1px solid var(--border-subtle);
801
+ }
802
+
803
+ .sentence-chip span { font-size: 12px; color: var(--text-muted); }
804
+
805
+ .no-match { font-size: 12px; color: var(--text-dim); }
806
+ .no-match strong { color: var(--text-muted); }
807
+
808
+ .error-text { color: var(--danger-text); }
809
+
810
+ .proposal-empty-hint {
811
+ margin-top: 0.75rem;
812
+ max-width: 52rem;
813
+ font-size: 0.875rem;
814
+ line-height: 1.45;
815
+ opacity: 0.85;
816
+ }
817
+
818
+ .proposal-empty-hint a { color: inherit; text-decoration: underline; }
819
+
820
+ .proposal-empty-hint code {
821
+ font-size: 0.83em;
822
+ font-family: 'DM Mono', monospace;
823
+ }
824
+
825
+ /* ── RESPONSIVE ─────────────────────────────────────────── */
826
+
827
+ @media (max-width: 768px) {
828
+ .app { margin: 14px auto; padding: 12px; }
829
+ .app-header { border-radius: 16px; padding: 16px 14px; }
830
+ .results-ledger { gap: 10px; }
831
+ .paragraph-result-header { padding: 10px 12px; }
832
+
833
+ .results-table--in-card { display: table; width: 100%; }
834
+ .results-table--in-card thead { display: table-header-group; }
835
+ .results-table--in-card tbody { display: table-row-group; }
836
+ .results-table--in-card tr { display: table-row; }
837
+ .results-table--in-card th,
838
+ .results-table--in-card td { display: table-cell; padding: 8px 10px; }
839
+ .results-table--in-card tbody tr { border-bottom: 1px solid var(--border-subtle); }
840
+ .results-table--in-card tbody tr:last-child { border-bottom: none; }
841
+ }
842
+