aizip-dev commited on
Commit
34df3c0
·
verified ·
1 Parent(s): fcbb39d

Unified font and UI size

Browse files
Files changed (1) hide show
  1. static/styles.css +329 -148
static/styles.css CHANGED
@@ -12,13 +12,34 @@
12
  --highlight: #FFFBEB;
13
  --model-a-color: #92B4F4;
14
  --model-b-color: #F8ADA7;
 
 
 
15
  --query-background: #F0F7FF;
16
  --query-border: #D1E3F8;
17
  --query-text: #2E5AAC;
18
  --insufficient-alert-bg: #fff0f0;
19
  --insufficient-alert-border: #f78989;
20
  --insufficient-alert-text: #b92020;
21
- --text-md: 17px; /* Adjusted from 17px to make everything slightly smaller */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  }
23
 
24
  /* Dark Mode */
@@ -36,6 +57,9 @@
36
  --highlight: #3D3825;
37
  --model-a-color: #5A85C7;
38
  --model-b-color: #C47A74;
 
 
 
39
  --query-background: #2A3F5C;
40
  --query-border: #3A5277;
41
  --query-text: #A9C2E8;
@@ -48,7 +72,7 @@
48
  /* Global Styles */
49
  body, .gradio-container {
50
  background-color: var(--background-main);
51
- font-size: 16px; /* Adjusted base font size */
52
  overflow-x: hidden !important;
53
  color: var(--text-dark);
54
  }
@@ -66,21 +90,21 @@ body, .gradio-container {
66
  padding-bottom: 0 !important;
67
  }
68
 
69
- /* Increase markdown text size */
70
  .gradio-markdown p,
71
  .gradio-markdown li,
72
  .gradio-markdown ul,
73
  .gradio-markdown ol {
74
- font-size: var(--text-md) !important; /* Use the variable for markdown text */
75
- line-height: 1.5 !important;
76
- margin-bottom: 0.5em !important;
77
  }
78
 
79
  /* Special styles for intro instruction text */
80
  .gradio-markdown p:has(em):has(strong) {
81
- font-size: 1.3em !important; /* Slightly reduced from 1.4em */
82
- line-height: 1.5 !important;
83
- margin-bottom: 8px !important;
84
  }
85
 
86
  .gradio-row {
@@ -94,16 +118,16 @@ body, .gradio-container {
94
 
95
  .tab-nav {
96
  background-color: var(--background-light) !important;
97
- padding: 5px 10px !important;
98
  border-radius: 8px 8px 0 0 !important;
99
  border-bottom: 1px solid var(--border-light) !important;
100
  }
101
 
102
  .tab-nav button {
103
- font-size: 1.15em !important; /* Reduced from 1.2em */
104
  font-weight: 600 !important;
105
- padding: 10px 25px !important;
106
- margin: 0 6px !important;
107
  border-radius: 6px 6px 0 0 !important;
108
  border: none !important;
109
  background-color: transparent !important;
@@ -126,21 +150,24 @@ body, .gradio-container {
126
  border: none !important;
127
  }
128
 
129
- /* Common Typography */
130
  h1 {
131
- font-size: 1.7em !important; /* Reduced from 1.8em */
132
  color: var(--primary) !important;
133
- margin: 10px 0 5px 0 !important;
134
  padding: 0 !important;
 
 
135
  }
136
 
137
  h3,
138
  .section-heading {
139
- font-size: 1.25em !important; /* Reduced from 1.3em */
140
  font-weight: 600 !important;
141
- margin: 5px 0 2px 0 !important;
142
  padding: 0 !important;
143
  color: var(--text-dark) !important;
 
144
  }
145
 
146
  .orange-title {
@@ -150,14 +177,14 @@ h3,
150
 
151
  /* Common Dividers */
152
  hr {
153
- margin: 5px 0 !important;
154
  border: none !important;
155
  height: 1px !important;
156
  background-color: var(--border-light) !important;
157
  }
158
 
159
  .results-reveal-area hr {
160
- margin: 25px 0 20px 0 !important;
161
  width: 100% !important;
162
  }
163
 
@@ -167,14 +194,14 @@ hr {
167
  display: flex !important;
168
  align-items: center !important;
169
  overflow: visible !important;
170
- min-height: 45px !important; /* Reduced from 48px */
171
  white-space: normal !important;
172
  }
173
 
174
  #query-title-row h3 {
175
  margin: 0 !important;
176
  padding: 0 !important;
177
- line-height: 1.3 !important;
178
  flex-grow: 0 !important;
179
  flex-shrink: 0 !important;
180
  white-space: normal !important;
@@ -186,13 +213,13 @@ hr {
186
  #query-container {
187
  display: flex !important;
188
  align-items: stretch !important;
189
- gap: 10px !important; /* Reduced from 12px */
190
  overflow: visible !important;
191
  }
192
 
193
  .query-box-row {
194
  background-color: var(--query-background) !important;
195
- padding: 12px 16px !important; /* Reduced from 14px 18px */
196
  border-radius: 6px !important;
197
  border: 1px solid var(--query-border) !important;
198
  margin: 0 !important;
@@ -201,7 +228,7 @@ hr {
201
  max-width: 70% !important;
202
  overflow: visible !important;
203
  display: flex !important;
204
- min-height: 55px !important; /* Reduced from 60px */
205
  height: auto !important;
206
  }
207
 
@@ -213,18 +240,18 @@ hr {
213
  overflow: visible !important;
214
  width: 100% !important;
215
  display: block !important;
216
- text-align: left !important; /* Default left alignment for regular questions */
217
  }
218
 
219
  .empty-query {
220
- text-align: center !important; /* Center alignment only for the initial question */
221
  }
222
 
223
  .query-text p {
224
- font-size: 1.25em !important; /* Reduced from 1.3em */
225
  font-weight: 600 !important;
226
  color: var(--query-text) !important;
227
- line-height: 1.4 !important;
228
  margin: 0 !important;
229
  padding: 0 !important;
230
  background-color: transparent !important;
@@ -237,37 +264,40 @@ hr {
237
  overflow: visible !important;
238
  }
239
 
240
- /* Buttons */
241
  .query-button,
242
- .context-toggle-button {
 
243
  background-color: var(--background-light) !important;
244
  color: var(--text-medium) !important;
245
  border: 1px solid var(--border-light) !important;
246
  border-radius: 6px !important;
247
  font-weight: 500 !important;
248
  transition: all 0.2s ease !important;
249
- font-size: 1.05em !important; /* Reduced from 1.1em */
 
250
  }
251
 
252
  .query-button {
253
- padding: 0 20px !important; /* Reduced from 0 24px */
254
  flex: 0 0 auto !important;
255
  display: flex !important;
256
  align-items: center !important;
257
  justify-content: center !important;
258
- min-height: 55px !important; /* Reduced from 60px */
259
  white-space: nowrap !important;
260
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
261
  }
262
 
263
- .context-toggle-button {
264
- padding: 5px 10px !important; /* Reduced from 6px 12px */
265
- font-size: 0.95em !important; /* Reduced from 1.0em */
266
- height: 32px !important; /* Reduced from 36px */
 
267
  line-height: 1 !important;
268
  width: auto !important;
269
  min-width: 0 !important;
270
- max-width: 160px !important; /* Reduced from 180px */
271
  margin: 0 !important;
272
  cursor: pointer !important;
273
  }
@@ -279,28 +309,43 @@ hr {
279
  border-color: var(--primary) !important;
280
  }
281
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
282
  /* Action Buttons */
283
  #submit-button,
284
  #try-another-btn {
285
  background-color: var(--primary) !important;
286
  color: white !important;
287
- padding: 12px 30px !important; /* Reduced from 14px 36px */
288
  border-radius: 6px !important;
289
  font-weight: 600 !important;
290
- font-size: 1.2em !important; /* Reduced from 1.25em */
 
291
  transition: all 0.2s ease !important;
292
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
293
  border: none !important;
294
  }
295
 
296
  #submit-button {
297
- margin-top: 15px !important; /* Reduced from 18px */
298
  }
299
 
300
  #try-another-btn {
301
  width: 100% !important;
302
  max-width: 100% !important;
303
- margin: 10px auto !important; /* Reduced from 12px */
304
  display: block !important;
305
  }
306
 
@@ -311,10 +356,10 @@ hr {
311
  }
312
 
313
  .control-buttons button {
314
- margin: 0 10px !important; /* Reduced from 0 12px */
315
- font-size: 1.05em !important; /* Reduced from 1.1em */
316
  border-radius: 6px !important;
317
- padding: 8px 16px !important; /* Reduced from 10px 19px */
318
  transition: all 0.2s ease !important;
319
  }
320
 
@@ -323,7 +368,8 @@ hr {
323
  background-color: transparent !important;
324
  font-style: normal !important;
325
  color: var(--text-medium) !important;
326
- font-size: 1.05em !important; /* Reduced from 1.1em */
 
327
  }
328
 
329
  .context-topic {
@@ -338,21 +384,27 @@ hr {
338
  .topic-label {
339
  font-weight: 600 !important;
340
  color: var(--text-medium) !important;
341
- margin-right: 6px !important; /* Reduced from 7px */
342
  }
343
 
344
- #context-header-row {
 
345
  display: flex !important;
346
  justify-content: space-between !important;
347
  align-items: center !important;
348
  }
349
 
 
 
 
 
350
  .context-title {
351
  margin: 0 !important;
352
  padding: 0 !important;
353
- font-size: 1.25em !important; /* Reduced from 1.3em */
354
  font-weight: 600 !important;
355
  color: var(--text-dark) !important;
 
356
  }
357
 
358
  .context-items-container {
@@ -363,11 +415,11 @@ hr {
363
  .context-item {
364
  border: 1px solid var(--border-light);
365
  background-color: var(--background-light);
366
- padding: 12px; /* Reduced from 14px */
367
  border-radius: 6px;
368
- margin-bottom: 8px; /* Reduced from 10px */
369
- font-size: 1.05em; /* Reduced from 1.1em */
370
- line-height: 1.5;
371
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
372
  }
373
 
@@ -378,9 +430,10 @@ hr {
378
  .chunk-header {
379
  font-weight: 600;
380
  color: var(--query-text);
381
- margin-bottom: 8px; /* Reduced from 10px */
382
- padding-bottom: 5px; /* Reduced from 6px */
383
  border-bottom: 1px solid var(--query-border);
 
384
  }
385
 
386
  .highlight {
@@ -396,29 +449,31 @@ hr {
396
  border: 2px solid var(--insufficient-alert-border);
397
  background-color: var(--insufficient-alert-bg);
398
  color: var(--insufficient-alert-text);
399
- padding: 12px; /* Reduced from 14px */
400
  border-radius: 6px;
401
- margin-bottom: 12px; /* Reduced from 14px */
402
- font-size: 1.05em; /* Reduced from 1.1em */
 
403
  }
404
 
405
  .insufficient-alert strong {
406
  display: inline-flex !important;
407
  align-items: center !important;
408
- margin-bottom: 5px; /* Reduced from 6px */
409
- font-size: 1.15em !important; /* Reduced from 1.2em */
410
  font-weight: 600 !important;
411
  }
412
 
413
  .insufficient-alert strong svg {
414
- margin-right: 8px !important; /* Reduced from 10px */
415
- width: 1.1em !important; /* Reduced from 1.2em */
416
- height: 1.1em !important; /* Reduced from 1.2em */
417
  }
418
 
419
  .insufficient-alert p {
420
  margin: 0;
421
- font-size: 1.05em; /* Reduced from 1.1em */
 
422
  }
423
 
424
  /* Summary Cards */
@@ -428,7 +483,7 @@ hr {
428
  }
429
 
430
  #summary-containers {
431
- margin-top: 10px !important; /* Reduced from 12px */
432
  }
433
 
434
  #main-interface-area > div:nth-child(7) > div {
@@ -444,10 +499,10 @@ hr {
444
  }
445
 
446
  #main-interface-area > p:first-of-type {
447
- font-size: var(--text-md) !important;
448
- margin: 0 0 8px 0 !important; /* Reduced from 0 0 10px 0 */
449
  padding: 0 !important;
450
- line-height: 1.4 !important;
451
  color: var(--text-medium) !important;
452
  }
453
 
@@ -457,11 +512,11 @@ hr {
457
  background-color: var(--background-light) !important;
458
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
459
  margin: 0 !important;
460
- padding: 12px !important; /* Reduced from 14px */
461
  display: flex !important;
462
  flex-direction: column !important;
463
  height: auto !important;
464
- min-height: 200px !important; /* Reduced from 220px */
465
  overflow: visible !important;
466
  }
467
 
@@ -473,6 +528,24 @@ hr {
473
  border-left: 3px solid var(--model-b-color) !important;
474
  }
475
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
476
  .summary-card .gr-form,
477
  .summary-card .gr-form > div {
478
  margin: 0 !important;
@@ -484,18 +557,19 @@ hr {
484
 
485
  .summary-card .gr-input-label,
486
  .feedback-section .gr-input-label {
487
- font-size: 1.15em !important; /* Reduced from 1.2em */
488
  font-weight: 600 !important;
489
  color: var(--text-dark) !important;
 
490
  }
491
 
492
  .summary-card .gr-input-label {
493
- margin: 0 0 5px 0 !important; /* Reduced from 0 0 6px 0 */
494
  padding: 0 !important;
495
  }
496
 
497
  .feedback-section .gr-input-label {
498
- margin-bottom: 0.6em !important; /* Reduced from 0.72em */
499
  }
500
 
501
  .summary-card .gr-textbox {
@@ -510,10 +584,10 @@ hr {
510
  background-color: transparent !important;
511
  border: none !important;
512
  color: var(--text-dark) !important;
513
- font-size: 1.15em !important; /* Reduced from 1.2em */
514
- line-height: 1.4 !important;
515
  height: auto !important;
516
- min-height: 160px !important; /* Reduced from 180px */
517
  padding: 0 !important;
518
  margin: 0 !important;
519
  width: 100% !important;
@@ -521,19 +595,20 @@ hr {
521
  overflow-y: visible !important;
522
  }
523
 
524
- /* Voting Section */
525
  .vote-button {
526
  flex-grow: 1;
527
- margin: 0 5px 5px 5px !important; /* Reduced from 0 6px 6px 6px */
528
- font-size: 1.1em !important; /* Reduced from 1.15em */
529
- padding: 12px 16px !important; /* Reduced from 14px 18px */
530
  border-radius: 6px !important;
531
  transition: all 0.2s ease !important;
532
  background-color: var(--background-light) !important;
533
  border: 1px solid var(--border-light) !important;
534
- min-height: 55px !important; /* Reduced from 60px */
535
  font-weight: 500 !important;
536
  color: var(--text-dark) !important;
 
537
  }
538
 
539
  .vote-button:hover:not(.vote-button-neither) {
@@ -570,27 +645,28 @@ hr {
570
 
571
  /* Feedback Section */
572
  .feedback-section {
573
- padding: 3px 0 !important; /* Reduced from 4px 0 */
574
  background-color: transparent !important;
575
- margin: 3px 0 !important; /* Reduced from 4px 0 */
576
- font-size: 1.05em; /* Reduced from 1.1em */
577
  border: none !important;
578
  box-shadow: none !important;
579
  }
580
 
581
  .feedback-section .gr-check-radio {
582
- font-size: 1.1em !important; /* Reduced from 1.15em */
583
  }
584
 
585
  .feedback-section .gr-check-radio span {
586
- font-size: 1.1em !important; /* Reduced from 1.15em */
587
  color: var(--text-dark) !important;
 
588
  }
589
 
590
  .feedback-section input[type="checkbox"] {
591
- width: 18px !important; /* Reduced from 20px */
592
- height: 18px !important; /* Reduced from 20px */
593
- margin-right: 6px !important; /* Reduced from 7px */
594
  }
595
 
596
  .feedback-section input[type="checkbox"]:checked {
@@ -601,22 +677,24 @@ hr {
601
 
602
  /* Model Reveal */
603
  .model-reveal {
604
- font-size: 1.15em !important; /* Reduced from 1.2em */
605
  text-align: center !important;
606
  font-weight: 600 !important;
607
  background-color: transparent !important;
608
  padding: 0 !important;
609
  border: none !important;
 
610
  }
611
 
612
  .model-reveal span {
613
- font-size: 1.3em !important; /* Reduced from 1.4em */
614
  display: flex !important;
615
  align-items: center !important;
616
  justify-content: center !important;
617
  width: 100% !important;
618
- padding: 25px 16px !important; /* Reduced from 30px 18px */
619
- min-height: 55px !important; /* Reduced from 60px */
 
620
  }
621
 
622
  .model-a-reveal span {
@@ -629,7 +707,7 @@ hr {
629
 
630
  /* DataFrames and Tables */
631
  .gr-dataframe table {
632
- font-size: 1.05em !important;
633
  border-collapse: separate !important;
634
  border-spacing: 0 !important;
635
  overflow: hidden !important;
@@ -637,9 +715,11 @@ hr {
637
 
638
  .gr-dataframe th,
639
  .gr-dataframe td {
640
- padding: 8px 10px !important;
641
  border: none !important;
642
  border-bottom: 1px solid var(--border-light) !important;
 
 
643
  }
644
 
645
  .gr-dataframe th {
@@ -649,7 +729,7 @@ hr {
649
  }
650
 
651
  .gradio-container .prose {
652
- line-height: 1.4 !important;
653
  margin: 0 !important;
654
  padding: 0 !important;
655
  }
@@ -661,7 +741,7 @@ hr {
661
  border-spacing: 0 !important;
662
  border: none !important;
663
  width: 100% !important;
664
- margin: 16px 0 !important; /* Reduced from 19px 0 */
665
  overflow: hidden !important;
666
  }
667
 
@@ -675,6 +755,7 @@ hr {
675
  display: inline-flex !important;
676
  align-items: center !important;
677
  font-weight: 500 !important;
 
678
  }
679
 
680
  .model-link:hover {
@@ -684,7 +765,7 @@ hr {
684
 
685
  .external-icon {
686
  display: inline-block !important;
687
- margin-left: 5px !important; /* Reduced from 6px */
688
  opacity: 0.6 !important;
689
  transition: opacity 0.2s !important;
690
  }
@@ -693,9 +774,37 @@ hr {
693
  opacity: 1 !important;
694
  }
695
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
696
  /* Special styling for the Elo ratings info box */
697
  #leaderboard-info {
698
- margin: 16px 0 !important; /* Reduced from 18px 0 */
699
  padding: 0 !important;
700
  background-color: rgba(255, 236, 224, 0.5) !important;
701
  border: none !important;
@@ -703,42 +812,43 @@ hr {
703
 
704
  #leaderboard-info > div {
705
  margin: 0 !important;
706
- padding: 12px 16px !important; /* REDUCED from 18px - less padding top/bottom for grey box */
707
  background-color: var(--background-light) !important;
708
  border: none !important;
709
  }
710
 
711
  #leaderboard-info h3 {
712
  margin-top: 0 !important;
713
- margin-bottom: 10px !important; /* Reduced from 12px */
714
  color: var(--primary) !important;
715
- font-size: 1.3em !important; /* Reduced from 1.35em */
 
716
  }
717
 
718
  #leaderboard-info p {
719
- margin-bottom: 8px !important; /* Reduced from 10px */
720
- line-height: 1.5 !important;
721
  font-size: var(--text-md) !important;
722
  }
723
 
724
  #leaderboard-info ul {
725
- margin-bottom: 10px; /* Reduced from 12px */
726
- padding-left: 20px; /* Reduced from 24px */
727
  }
728
 
729
  #leaderboard-info li {
730
- margin-bottom: 4px; /* Reduced from 5px */
731
- line-height: 1.4;
732
  font-size: var(--text-md) !important;
733
  }
734
 
735
- /* Leaderboard Table Specific Styles - Adjusted size */
736
  .leaderboard-table {
737
  width: 100% !important;
738
  border-collapse: separate !important;
739
  border-spacing: 0 !important;
740
- font-size: 1.05em !important; /* Reduced from 1.1em */
741
- margin-top: 16px !important; /* Reduced from 18px */
742
  overflow: hidden !important;
743
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
744
  border-radius: 8px !important;
@@ -758,9 +868,10 @@ hr {
758
  border: none !important;
759
  border-bottom: 1px solid var(--border-light) !important;
760
  text-align: left !important;
761
- padding: 10px 12px !important; /* Reduced from 12px 14px */
762
  background-color: var(--background-main) !important;
763
  font-size: var(--text-md) !important;
 
764
  }
765
 
766
  /* Header row styling */
@@ -768,8 +879,8 @@ hr {
768
  background-color: #FFF1E6 !important;
769
  color: var(--text-dark) !important;
770
  font-weight: 600 !important;
771
- font-size: 1.05em !important; /* Reduced from 1.1em */
772
- padding: 12px !important; /* Reduced from 14px */
773
  border: none !important;
774
  border-bottom: 1px solid var(--border-light) !important;
775
  }
@@ -793,7 +904,7 @@ hr {
793
 
794
  .leaderboard-table .confidence-value {
795
  color: var(--text-medium) !important;
796
- font-size: 0.9em !important;
797
  font-weight: normal !important;
798
  }
799
 
@@ -812,18 +923,20 @@ hr {
812
  /* Blockquote styling */
813
  .gradio-container .prose blockquote,
814
  .gradio-container-5-28-0 .prose blockquote {
815
- margin: 3px 0 !important; /* Reduced from 4px 0 */
816
- border-left: 12px solid var(--border-color-primary) !important; /* Reduced from 14px */
817
- padding-left: calc(var(--size-2) * 1.1) !important; /* Reduced */
818
  font-style: normal !important;
819
  color: var(--text-dark) !important;
 
 
820
  }
821
 
822
  /* Spacing for Markdown content */
823
  span.svelte-7ddecg p {
824
- line-height: 1.7 !important; /* Reduced from 1.8 */
825
  margin-top: 0 !important;
826
- margin-bottom: 0.5em !important; /* Reduced from 0.6em */
827
  }
828
 
829
  .html-container.svelte-phx28p.padding {
@@ -837,14 +950,14 @@ html {
837
 
838
  /* For the query section scroll margin */
839
  #query-section {
840
- scroll-margin-top: 20px; /* Reduced from 24px */
841
  }
842
 
843
- /* FAQ Section Styles - Improved left alignment */
844
  #faq-toggle-row {
845
  width: 100% !important;
846
- margin-top: 8px !important; /* Reduced from 10px */
847
- margin-bottom: 8px !important; /* Reduced from 10px */
848
  padding-left: 0 !important;
849
  margin-left: 0 !important;
850
  text-align: left !important;
@@ -857,8 +970,8 @@ html {
857
  color: var(--primary) !important;
858
  background-color: transparent !important;
859
  border: none !important;
860
- padding: 6px 0 !important; /* Reduced from 8px 0 */
861
- font-size: 1.1em !important; /* Reduced from 1.15em */
862
  font-weight: 500 !important;
863
  text-align: left !important;
864
  justify-content: flex-start !important;
@@ -871,6 +984,7 @@ html {
871
  width: auto !important;
872
  display: inline-flex !important;
873
  align-items: center !important;
 
874
  }
875
 
876
  /* Hover effect for FAQ toggle - just underline */
@@ -882,37 +996,37 @@ html {
882
  #faq-content {
883
  background-color: var(--background-light) !important;
884
  border-radius: 6px !important;
885
- padding: 10px 16px !important; /* REDUCED from 16px 20px - less padding for the FAQ content box */
886
- margin-top: 5px !important; /* Reduced from 6px */
887
- margin-bottom: 15px !important; /* Reduced from 18px */
888
  border: 1px solid var(--border-light) !important;
889
  width: 70% !important;
890
  }
891
 
892
  .faq-text {
893
  color: var(--text-medium) !important;
894
- font-size: 1.05em !important; /* Reduced from 1.1em */
 
895
  }
896
 
897
  .faq-text p {
898
- margin-bottom: 12px !important; /* Reduced from 14px */
899
- line-height: 1.5 !important; /* Reduced from 1.6 */
900
  color: var(--text-medium) !important;
901
  font-size: var(--text-md) !important;
902
  }
903
 
904
  .faq-text ul {
905
- margin-top: 8px !important; /* Reduced from 10px */
906
- margin-bottom: 10px !important; /* Reduced from 12px */
907
- padding-left: 25px !important; /* Reduced from 30px */
908
  list-style-type: circle !important;
909
  }
910
 
911
  .faq-text li {
912
- margin-bottom: 8px !important; /* Reduced from 10px */
913
  color: var(--text-medium) !important;
914
  font-size: var(--text-md) !important;
915
- line-height: 1.5 !important;
916
  }
917
 
918
  /* Empty State and Initial State Styles */
@@ -920,8 +1034,9 @@ html {
920
  color: var(--text-medium) !important;
921
  font-style: italic !important;
922
  text-align: center !important;
923
- padding: 20px !important; /* Reduced from 24px */
924
- font-size: 1.15em !important; /* Reduced from 1.2em */
 
925
  }
926
 
927
  /* Get a Question Button - initially more prominent */
@@ -929,11 +1044,12 @@ html {
929
  background-color: var(--primary) !important;
930
  color: white !important;
931
  font-weight: 600 !important;
932
- padding: 10px 20px !important; /* Reduced from 12px 24px */
933
  border-radius: 6px !important;
934
  transition: all 0.2s ease !important;
935
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
936
- font-size: 1.25em !important; /* Reduced from 1.3em */
 
937
  }
938
 
939
  .initial-button:hover {
@@ -949,6 +1065,55 @@ html {
949
  display: block !important;
950
  }
951
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
952
  /* Responsive Styles */
953
  @media screen and (max-width: 768px) {
954
  #query-container {
@@ -958,7 +1123,7 @@ html {
958
  .query-box-row {
959
  flex: 1 1 100% !important;
960
  max-width: 100% !important;
961
- margin-bottom: 10px !important; /* Reduced from 12px */
962
  }
963
 
964
  .query-button {
@@ -966,28 +1131,44 @@ html {
966
  }
967
 
968
  .vote-button {
969
- font-size: 1.05em !important; /* Reduced from 1.08em */
970
- padding: 10px 8px !important; /* Reduced from 12px 10px */
971
  }
972
 
973
  .summary-card {
974
- margin-bottom: 15px !important; /* Reduced from 18px */
975
  }
976
 
977
  #main-interface-area > div:nth-child(7) > div {
978
  flex-direction: column !important;
979
  }
 
 
 
 
 
 
 
 
 
 
 
980
  }
981
 
982
  @media screen and (max-width: 480px) {
983
  #main-interface-area > div:nth-child(10) > div {
984
  display: grid !important;
985
  grid-template-columns: 1fr 1fr !important;
986
- gap: 8px !important; /* Reduced from 10px */
987
  }
988
 
989
  .vote-button {
990
  margin: 0 !important;
991
- padding: 8px 5px !important; /* Reduced from 10px 6px */
 
 
 
 
 
992
  }
993
  }
 
12
  --highlight: #FFFBEB;
13
  --model-a-color: #92B4F4;
14
  --model-b-color: #F8ADA7;
15
+ --reference-color: #10B981; /* Green-500 */
16
+ --reference-light: #F0FDF4; /* Green-50 */
17
+ --reference-text: #065F46; /* Green-800 */
18
  --query-background: #F0F7FF;
19
  --query-border: #D1E3F8;
20
  --query-text: #2E5AAC;
21
  --insufficient-alert-bg: #fff0f0;
22
  --insufficient-alert-border: #f78989;
23
  --insufficient-alert-text: #b92020;
24
+
25
+ /* Unified Typography Scale - Smaller */
26
+ --text-xs: 0.75rem; /* 12px - Small text, captions */
27
+ --text-sm: 0.875rem; /* 14px - Base body text */
28
+ --text-md: 1rem; /* 16px - Emphasized body text */
29
+ --text-lg: 1.125rem; /* 18px - Large text, small headings */
30
+ --text-xl: 1.375rem; /* 22px - Main headings */
31
+
32
+ /* Consistent Line Heights */
33
+ --leading-tight: 1.3;
34
+ --leading-normal: 1.5;
35
+ --leading-relaxed: 1.6;
36
+
37
+ /* Consistent Spacing - Proportionally Smaller */
38
+ --space-xs: 0.25rem; /* 4px */
39
+ --space-sm: 0.5rem; /* 8px */
40
+ --space-md: 0.625rem; /* 10px */
41
+ --space-lg: 0.875rem; /* 14px */
42
+ --space-xl: 1.25rem; /* 20px */
43
  }
44
 
45
  /* Dark Mode */
 
57
  --highlight: #3D3825;
58
  --model-a-color: #5A85C7;
59
  --model-b-color: #C47A74;
60
+ --reference-color: #10B981; /* Keep green in dark mode */
61
+ --reference-light: #1F2937; /* Dark gray for dark mode */
62
+ --reference-text: #34D399; /* Light green for dark mode text */
63
  --query-background: #2A3F5C;
64
  --query-border: #3A5277;
65
  --query-text: #A9C2E8;
 
72
  /* Global Styles */
73
  body, .gradio-container {
74
  background-color: var(--background-main);
75
+ font-size: var(--text-sm); /* Now 14px base */
76
  overflow-x: hidden !important;
77
  color: var(--text-dark);
78
  }
 
90
  padding-bottom: 0 !important;
91
  }
92
 
93
+ /* Unified Typography */
94
  .gradio-markdown p,
95
  .gradio-markdown li,
96
  .gradio-markdown ul,
97
  .gradio-markdown ol {
98
+ font-size: var(--text-sm) !important;
99
+ line-height: var(--leading-normal) !important;
100
+ margin-bottom: var(--space-sm) !important;
101
  }
102
 
103
  /* Special styles for intro instruction text */
104
  .gradio-markdown p:has(em):has(strong) {
105
+ font-size: var(--text-md) !important;
106
+ line-height: var(--leading-normal) !important;
107
+ margin-bottom: var(--space-sm) !important;
108
  }
109
 
110
  .gradio-row {
 
118
 
119
  .tab-nav {
120
  background-color: var(--background-light) !important;
121
+ padding: var(--space-sm) var(--space-md) !important;
122
  border-radius: 8px 8px 0 0 !important;
123
  border-bottom: 1px solid var(--border-light) !important;
124
  }
125
 
126
  .tab-nav button {
127
+ font-size: var(--text-md) !important;
128
  font-weight: 600 !important;
129
+ padding: var(--space-md) var(--space-xl) !important;
130
+ margin: 0 var(--space-sm) !important;
131
  border-radius: 6px 6px 0 0 !important;
132
  border: none !important;
133
  background-color: transparent !important;
 
150
  border: none !important;
151
  }
152
 
153
+ /* Unified Headings */
154
  h1 {
155
+ font-size: var(--text-xl) !important;
156
  color: var(--primary) !important;
157
+ margin: var(--space-md) 0 var(--space-sm) 0 !important;
158
  padding: 0 !important;
159
+ line-height: var(--leading-tight) !important;
160
+ font-weight: 700 !important;
161
  }
162
 
163
  h3,
164
  .section-heading {
165
+ font-size: var(--text-lg) !important;
166
  font-weight: 600 !important;
167
+ margin: var(--space-sm) 0 var(--space-xs) 0 !important;
168
  padding: 0 !important;
169
  color: var(--text-dark) !important;
170
+ line-height: var(--leading-tight) !important;
171
  }
172
 
173
  .orange-title {
 
177
 
178
  /* Common Dividers */
179
  hr {
180
+ margin: var(--space-sm) 0 !important;
181
  border: none !important;
182
  height: 1px !important;
183
  background-color: var(--border-light) !important;
184
  }
185
 
186
  .results-reveal-area hr {
187
+ margin: var(--space-xl) 0 var(--space-lg) 0 !important;
188
  width: 100% !important;
189
  }
190
 
 
194
  display: flex !important;
195
  align-items: center !important;
196
  overflow: visible !important;
197
+ min-height: 40px !important;
198
  white-space: normal !important;
199
  }
200
 
201
  #query-title-row h3 {
202
  margin: 0 !important;
203
  padding: 0 !important;
204
+ line-height: var(--leading-tight) !important;
205
  flex-grow: 0 !important;
206
  flex-shrink: 0 !important;
207
  white-space: normal !important;
 
213
  #query-container {
214
  display: flex !important;
215
  align-items: stretch !important;
216
+ gap: var(--space-md) !important;
217
  overflow: visible !important;
218
  }
219
 
220
  .query-box-row {
221
  background-color: var(--query-background) !important;
222
+ padding: var(--space-md) var(--space-lg) !important;
223
  border-radius: 6px !important;
224
  border: 1px solid var(--query-border) !important;
225
  margin: 0 !important;
 
228
  max-width: 70% !important;
229
  overflow: visible !important;
230
  display: flex !important;
231
+ min-height: 48px !important;
232
  height: auto !important;
233
  }
234
 
 
240
  overflow: visible !important;
241
  width: 100% !important;
242
  display: block !important;
243
+ text-align: left !important;
244
  }
245
 
246
  .empty-query {
247
+ text-align: center !important;
248
  }
249
 
250
  .query-text p {
251
+ font-size: var(--text-lg) !important;
252
  font-weight: 600 !important;
253
  color: var(--query-text) !important;
254
+ line-height: var(--leading-normal) !important;
255
  margin: 0 !important;
256
  padding: 0 !important;
257
  background-color: transparent !important;
 
264
  overflow: visible !important;
265
  }
266
 
267
+ /* Unified Button Styles */
268
  .query-button,
269
+ .context-toggle-button,
270
+ .reference-toggle-button {
271
  background-color: var(--background-light) !important;
272
  color: var(--text-medium) !important;
273
  border: 1px solid var(--border-light) !important;
274
  border-radius: 6px !important;
275
  font-weight: 500 !important;
276
  transition: all 0.2s ease !important;
277
+ font-size: var(--text-sm) !important;
278
+ line-height: var(--leading-tight) !important;
279
  }
280
 
281
  .query-button {
282
+ padding: 0 var(--space-lg) !important;
283
  flex: 0 0 auto !important;
284
  display: flex !important;
285
  align-items: center !important;
286
  justify-content: center !important;
287
+ min-height: 48px !important;
288
  white-space: nowrap !important;
289
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
290
  }
291
 
292
+ .context-toggle-button,
293
+ .reference-toggle-button {
294
+ padding: var(--space-sm) var(--space-md) !important;
295
+ font-size: var(--text-xs) !important;
296
+ height: 28px !important;
297
  line-height: 1 !important;
298
  width: auto !important;
299
  min-width: 0 !important;
300
+ max-width: 140px !important;
301
  margin: 0 !important;
302
  cursor: pointer !important;
303
  }
 
309
  border-color: var(--primary) !important;
310
  }
311
 
312
+ /* Reference Toggle Button - specific styling */
313
+ .reference-toggle-button:hover {
314
+ background-color: var(--reference-light) !important;
315
+ color: var(--reference-color) !important;
316
+ border-color: var(--reference-color) !important;
317
+ }
318
+
319
+ .reference-toggle-button.showing-reference {
320
+ background-color: var(--reference-light) !important;
321
+ color: var(--reference-color) !important;
322
+ border-color: var(--reference-color) !important;
323
+ font-weight: 600 !important;
324
+ }
325
+
326
  /* Action Buttons */
327
  #submit-button,
328
  #try-another-btn {
329
  background-color: var(--primary) !important;
330
  color: white !important;
331
+ padding: var(--space-md) var(--space-xl) !important;
332
  border-radius: 6px !important;
333
  font-weight: 600 !important;
334
+ font-size: var(--text-md) !important;
335
+ line-height: var(--leading-tight) !important;
336
  transition: all 0.2s ease !important;
337
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
338
  border: none !important;
339
  }
340
 
341
  #submit-button {
342
+ margin-top: var(--space-lg) !important;
343
  }
344
 
345
  #try-another-btn {
346
  width: 100% !important;
347
  max-width: 100% !important;
348
+ margin: var(--space-md) auto !important;
349
  display: block !important;
350
  }
351
 
 
356
  }
357
 
358
  .control-buttons button {
359
+ margin: 0 var(--space-md) !important;
360
+ font-size: var(--text-sm) !important;
361
  border-radius: 6px !important;
362
+ padding: var(--space-sm) var(--space-lg) !important;
363
  transition: all 0.2s ease !important;
364
  }
365
 
 
368
  background-color: transparent !important;
369
  font-style: normal !important;
370
  color: var(--text-medium) !important;
371
+ font-size: var(--text-sm) !important;
372
+ line-height: var(--leading-normal) !important;
373
  }
374
 
375
  .context-topic {
 
384
  .topic-label {
385
  font-weight: 600 !important;
386
  color: var(--text-medium) !important;
387
+ margin-right: var(--space-sm) !important;
388
  }
389
 
390
+ #context-header-row,
391
+ #model-comparison-header {
392
  display: flex !important;
393
  justify-content: space-between !important;
394
  align-items: center !important;
395
  }
396
 
397
+ #model-comparison-header {
398
+ margin-bottom: var(--space-lg) !important;
399
+ }
400
+
401
  .context-title {
402
  margin: 0 !important;
403
  padding: 0 !important;
404
+ font-size: var(--text-lg) !important;
405
  font-weight: 600 !important;
406
  color: var(--text-dark) !important;
407
+ line-height: var(--leading-tight) !important;
408
  }
409
 
410
  .context-items-container {
 
415
  .context-item {
416
  border: 1px solid var(--border-light);
417
  background-color: var(--background-light);
418
+ padding: var(--space-md);
419
  border-radius: 6px;
420
+ margin-bottom: var(--space-sm);
421
+ font-size: var(--text-md);
422
+ line-height: var(--leading-normal);
423
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
424
  }
425
 
 
430
  .chunk-header {
431
  font-weight: 600;
432
  color: var(--query-text);
433
+ margin-bottom: var(--space-sm);
434
+ padding-bottom: var(--space-sm);
435
  border-bottom: 1px solid var(--query-border);
436
+ font-size: var(--text-sm);
437
  }
438
 
439
  .highlight {
 
449
  border: 2px solid var(--insufficient-alert-border);
450
  background-color: var(--insufficient-alert-bg);
451
  color: var(--insufficient-alert-text);
452
+ padding: var(--space-md);
453
  border-radius: 6px;
454
+ margin-bottom: var(--space-md);
455
+ font-size: var(--text-sm);
456
+ line-height: var(--leading-normal);
457
  }
458
 
459
  .insufficient-alert strong {
460
  display: inline-flex !important;
461
  align-items: center !important;
462
+ margin-bottom: var(--space-sm) !important;
463
+ font-size: var(--text-md) !important;
464
  font-weight: 600 !important;
465
  }
466
 
467
  .insufficient-alert strong svg {
468
+ margin-right: var(--space-sm) !important;
469
+ width: 1.1em !important;
470
+ height: 1.1em !important;
471
  }
472
 
473
  .insufficient-alert p {
474
  margin: 0;
475
+ font-size: var(--text-sm);
476
+ line-height: var(--leading-normal);
477
  }
478
 
479
  /* Summary Cards */
 
483
  }
484
 
485
  #summary-containers {
486
+ margin-top: var(--space-md) !important;
487
  }
488
 
489
  #main-interface-area > div:nth-child(7) > div {
 
499
  }
500
 
501
  #main-interface-area > p:first-of-type {
502
+ font-size: var(--text-sm) !important;
503
+ margin: 0 0 var(--space-sm) 0 !important;
504
  padding: 0 !important;
505
+ line-height: var(--leading-normal) !important;
506
  color: var(--text-medium) !important;
507
  }
508
 
 
512
  background-color: var(--background-light) !important;
513
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
514
  margin: 0 !important;
515
+ padding: var(--space-md) !important;
516
  display: flex !important;
517
  flex-direction: column !important;
518
  height: auto !important;
519
+ min-height: 180px !important;
520
  overflow: visible !important;
521
  }
522
 
 
528
  border-left: 3px solid var(--model-b-color) !important;
529
  }
530
 
531
+ /* Reference Answer Card */
532
+ .reference-card {
533
+ border-left: 3px solid var(--reference-color) !important;
534
+ background-color: var(--reference-light) !important;
535
+ margin-top: var(--space-lg) !important;
536
+ }
537
+
538
+ .reference-card .gr-input-label {
539
+ color: var(--reference-text) !important;
540
+ font-weight: 600 !important;
541
+ }
542
+
543
+ /* Reference Section */
544
+ #reference-section {
545
+ margin-top: var(--space-lg) !important;
546
+ transition: all 0.3s ease !important;
547
+ }
548
+
549
  .summary-card .gr-form,
550
  .summary-card .gr-form > div {
551
  margin: 0 !important;
 
557
 
558
  .summary-card .gr-input-label,
559
  .feedback-section .gr-input-label {
560
+ font-size: var(--text-md) !important;
561
  font-weight: 600 !important;
562
  color: var(--text-dark) !important;
563
+ line-height: var(--leading-tight) !important;
564
  }
565
 
566
  .summary-card .gr-input-label {
567
+ margin: 0 0 var(--space-sm) 0 !important;
568
  padding: 0 !important;
569
  }
570
 
571
  .feedback-section .gr-input-label {
572
+ margin-bottom: var(--space-md) !important;
573
  }
574
 
575
  .summary-card .gr-textbox {
 
584
  background-color: transparent !important;
585
  border: none !important;
586
  color: var(--text-dark) !important;
587
+ font-size: var(--text-md) !important;
588
+ line-height: var(--leading-normal) !important;
589
  height: auto !important;
590
+ min-height: 140px !important;
591
  padding: 0 !important;
592
  margin: 0 !important;
593
  width: 100% !important;
 
595
  overflow-y: visible !important;
596
  }
597
 
598
+ /* Unified Voting Section */
599
  .vote-button {
600
  flex-grow: 1;
601
+ margin: 0 var(--space-sm) var(--space-sm) var(--space-sm) !important;
602
+ font-size: var(--text-sm) !important;
603
+ padding: var(--space-md) var(--space-lg) !important;
604
  border-radius: 6px !important;
605
  transition: all 0.2s ease !important;
606
  background-color: var(--background-light) !important;
607
  border: 1px solid var(--border-light) !important;
608
+ min-height: 48px !important;
609
  font-weight: 500 !important;
610
  color: var(--text-dark) !important;
611
+ line-height: var(--leading-tight) !important;
612
  }
613
 
614
  .vote-button:hover:not(.vote-button-neither) {
 
645
 
646
  /* Feedback Section */
647
  .feedback-section {
648
+ padding: var(--space-xs) 0 !important;
649
  background-color: transparent !important;
650
+ margin: var(--space-xs) 0 !important;
651
+ font-size: var(--text-sm);
652
  border: none !important;
653
  box-shadow: none !important;
654
  }
655
 
656
  .feedback-section .gr-check-radio {
657
+ font-size: var(--text-sm) !important;
658
  }
659
 
660
  .feedback-section .gr-check-radio span {
661
+ font-size: var(--text-sm) !important;
662
  color: var(--text-dark) !important;
663
+ line-height: var(--leading-normal) !important;
664
  }
665
 
666
  .feedback-section input[type="checkbox"] {
667
+ width: 16px !important;
668
+ height: 16px !important;
669
+ margin-right: var(--space-sm) !important;
670
  }
671
 
672
  .feedback-section input[type="checkbox"]:checked {
 
677
 
678
  /* Model Reveal */
679
  .model-reveal {
680
+ font-size: var(--text-md) !important;
681
  text-align: center !important;
682
  font-weight: 600 !important;
683
  background-color: transparent !important;
684
  padding: 0 !important;
685
  border: none !important;
686
+ line-height: var(--leading-tight) !important;
687
  }
688
 
689
  .model-reveal span {
690
+ font-size: var(--text-lg) !important;
691
  display: flex !important;
692
  align-items: center !important;
693
  justify-content: center !important;
694
  width: 100% !important;
695
+ padding: var(--space-xl) var(--space-lg) !important;
696
+ min-height: 48px !important;
697
+ line-height: var(--leading-tight) !important;
698
  }
699
 
700
  .model-a-reveal span {
 
707
 
708
  /* DataFrames and Tables */
709
  .gr-dataframe table {
710
+ font-size: var(--text-sm) !important;
711
  border-collapse: separate !important;
712
  border-spacing: 0 !important;
713
  overflow: hidden !important;
 
715
 
716
  .gr-dataframe th,
717
  .gr-dataframe td {
718
+ padding: var(--space-sm) var(--space-md) !important;
719
  border: none !important;
720
  border-bottom: 1px solid var(--border-light) !important;
721
+ font-size: var(--text-sm) !important;
722
+ line-height: var(--leading-normal) !important;
723
  }
724
 
725
  .gr-dataframe th {
 
729
  }
730
 
731
  .gradio-container .prose {
732
+ line-height: var(--leading-normal) !important;
733
  margin: 0 !important;
734
  padding: 0 !important;
735
  }
 
741
  border-spacing: 0 !important;
742
  border: none !important;
743
  width: 100% !important;
744
+ margin: var(--space-lg) 0 !important;
745
  overflow: hidden !important;
746
  }
747
 
 
755
  display: inline-flex !important;
756
  align-items: center !important;
757
  font-weight: 500 !important;
758
+ font-size: var(--text-md) !important;
759
  }
760
 
761
  .model-link:hover {
 
765
 
766
  .external-icon {
767
  display: inline-block !important;
768
+ margin-left: var(--space-sm) !important;
769
  opacity: 0.6 !important;
770
  transition: opacity 0.2s !important;
771
  }
 
774
  opacity: 1 !important;
775
  }
776
 
777
+ .form-link {
778
+ color: var(--text-dark) !important;
779
+ text-decoration: none !important;
780
+ border-bottom: 1px dotted var(--border-light) !important;
781
+ transition: color 0.2s, border-color 0.2s !important;
782
+ padding: 2px 0 !important;
783
+ display: inline-flex !important;
784
+ align-items: center !important;
785
+ font-weight: 500 !important;
786
+ }
787
+
788
+ .form-link:hover {
789
+ color: #FF5500 !important;
790
+ border-color: #FF5500 !important;
791
+ }
792
+
793
+ .form-link::after {
794
+ content: " ↗";
795
+ display: inline-block !important;
796
+ margin-left: 5px !important;
797
+ opacity: 0.6 !important;
798
+ transition: opacity 0.2s !important;
799
+ }
800
+
801
+ .form-link:hover::after {
802
+ opacity: 1 !important;
803
+ }
804
+
805
  /* Special styling for the Elo ratings info box */
806
  #leaderboard-info {
807
+ margin: var(--space-lg) 0 !important;
808
  padding: 0 !important;
809
  background-color: rgba(255, 236, 224, 0.5) !important;
810
  border: none !important;
 
812
 
813
  #leaderboard-info > div {
814
  margin: 0 !important;
815
+ padding: var(--space-md) var(--space-lg) !important;
816
  background-color: var(--background-light) !important;
817
  border: none !important;
818
  }
819
 
820
  #leaderboard-info h3 {
821
  margin-top: 0 !important;
822
+ margin-bottom: var(--space-md) !important;
823
  color: var(--primary) !important;
824
+ font-size: var(--text-lg) !important;
825
+ line-height: var(--leading-tight) !important;
826
  }
827
 
828
  #leaderboard-info p {
829
+ margin-bottom: var(--space-sm) !important;
830
+ line-height: var(--leading-normal) !important;
831
  font-size: var(--text-md) !important;
832
  }
833
 
834
  #leaderboard-info ul {
835
+ margin-bottom: var(--space-md);
836
+ padding-left: var(--space-lg);
837
  }
838
 
839
  #leaderboard-info li {
840
+ margin-bottom: var(--space-xs);
841
+ line-height: var(--leading-normal);
842
  font-size: var(--text-md) !important;
843
  }
844
 
845
+ /* Leaderboard Table Specific Styles */
846
  .leaderboard-table {
847
  width: 100% !important;
848
  border-collapse: separate !important;
849
  border-spacing: 0 !important;
850
+ font-size: var(--text-md) !important;
851
+ margin-top: var(--space-lg) !important;
852
  overflow: hidden !important;
853
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
854
  border-radius: 8px !important;
 
868
  border: none !important;
869
  border-bottom: 1px solid var(--border-light) !important;
870
  text-align: left !important;
871
+ padding: var(--space-md) !important;
872
  background-color: var(--background-main) !important;
873
  font-size: var(--text-md) !important;
874
+ line-height: var(--leading-normal) !important;
875
  }
876
 
877
  /* Header row styling */
 
879
  background-color: #FFF1E6 !important;
880
  color: var(--text-dark) !important;
881
  font-weight: 600 !important;
882
+ font-size: var(--text-md) !important;
883
+ padding: var(--space-md) !important;
884
  border: none !important;
885
  border-bottom: 1px solid var(--border-light) !important;
886
  }
 
904
 
905
  .leaderboard-table .confidence-value {
906
  color: var(--text-medium) !important;
907
+ font-size: var(--text-xs) !important;
908
  font-weight: normal !important;
909
  }
910
 
 
923
  /* Blockquote styling */
924
  .gradio-container .prose blockquote,
925
  .gradio-container-5-28-0 .prose blockquote {
926
+ margin: var(--space-xs) 0 !important;
927
+ border-left: 12px solid var(--border-color-primary) !important;
928
+ padding-left: calc(var(--size-2) * 1.1) !important;
929
  font-style: normal !important;
930
  color: var(--text-dark) !important;
931
+ font-size: var(--text-sm) !important;
932
+ line-height: var(--leading-normal) !important;
933
  }
934
 
935
  /* Spacing for Markdown content */
936
  span.svelte-7ddecg p {
937
+ line-height: var(--leading-relaxed) !important;
938
  margin-top: 0 !important;
939
+ margin-bottom: var(--space-sm) !important;
940
  }
941
 
942
  .html-container.svelte-phx28p.padding {
 
950
 
951
  /* For the query section scroll margin */
952
  #query-section {
953
+ scroll-margin-top: var(--space-lg);
954
  }
955
 
956
+ /* FAQ Section Styles */
957
  #faq-toggle-row {
958
  width: 100% !important;
959
+ margin-top: var(--space-sm) !important;
960
+ margin-bottom: var(--space-sm) !important;
961
  padding-left: 0 !important;
962
  margin-left: 0 !important;
963
  text-align: left !important;
 
970
  color: var(--primary) !important;
971
  background-color: transparent !important;
972
  border: none !important;
973
+ padding: var(--space-sm) 0 !important;
974
+ font-size: var(--text-md) !important;
975
  font-weight: 500 !important;
976
  text-align: left !important;
977
  justify-content: flex-start !important;
 
984
  width: auto !important;
985
  display: inline-flex !important;
986
  align-items: center !important;
987
+ line-height: var(--leading-tight) !important;
988
  }
989
 
990
  /* Hover effect for FAQ toggle - just underline */
 
996
  #faq-content {
997
  background-color: var(--background-light) !important;
998
  border-radius: 6px !important;
999
+ padding: var(--space-md) var(--space-lg) !important;
1000
+ margin-bottom: var(--space-lg) !important;
 
1001
  border: 1px solid var(--border-light) !important;
1002
  width: 70% !important;
1003
  }
1004
 
1005
  .faq-text {
1006
  color: var(--text-medium) !important;
1007
+ font-size: var(--text-sm) !important;
1008
+ line-height: var(--leading-normal) !important;
1009
  }
1010
 
1011
  .faq-text p {
1012
+ margin-bottom: var(--space-md) !important;
1013
+ line-height: var(--leading-normal) !important;
1014
  color: var(--text-medium) !important;
1015
  font-size: var(--text-md) !important;
1016
  }
1017
 
1018
  .faq-text ul {
1019
+ margin-top: var(--space-sm) !important;
1020
+ margin-bottom: var(--space-md) !important;
1021
+ padding-left: var(--space-xl) !important;
1022
  list-style-type: circle !important;
1023
  }
1024
 
1025
  .faq-text li {
1026
+ margin-bottom: var(--space-sm) !important;
1027
  color: var(--text-medium) !important;
1028
  font-size: var(--text-md) !important;
1029
+ line-height: var(--leading-normal) !important;
1030
  }
1031
 
1032
  /* Empty State and Initial State Styles */
 
1034
  color: var(--text-medium) !important;
1035
  font-style: italic !important;
1036
  text-align: center !important;
1037
+ padding: var(--space-lg) !important;
1038
+ font-size: var(--text-md) !important;
1039
+ line-height: var(--leading-normal) !important;
1040
  }
1041
 
1042
  /* Get a Question Button - initially more prominent */
 
1044
  background-color: var(--primary) !important;
1045
  color: white !important;
1046
  font-weight: 600 !important;
1047
+ padding: var(--space-md) var(--space-lg) !important;
1048
  border-radius: 6px !important;
1049
  transition: all 0.2s ease !important;
1050
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
1051
+ font-size: var(--text-lg) !important;
1052
+ line-height: var(--leading-tight) !important;
1053
  }
1054
 
1055
  .initial-button:hover {
 
1065
  display: block !important;
1066
  }
1067
 
1068
+ /* Reference Answer Styles - Direct spacing control */
1069
+ #reference-toggle-row {
1070
+ margin-top: var(--space-md) !important;
1071
+ }
1072
+
1073
+ #reference-toggle-row .faq-toggle-button {
1074
+ font-size: var(--text-md) !important;
1075
+ padding: var(--space-sm) 0 !important;
1076
+ margin: 0 !important;
1077
+ }
1078
+
1079
+ #reference-content {
1080
+ margin-top: calc(-1 * var(--space-md)) !important;
1081
+ margin-bottom: 0px !important;
1082
+ }
1083
+
1084
+ /* When reference content is visible, add a tiny bit more space under toggle */
1085
+ #reference-content[style="block"] {
1086
+ margin-top: 0px !important;
1087
+ }
1088
+
1089
+ /* Reduce any default spacing on the reference content row */
1090
+ div[id="reference-content"] {
1091
+ padding-top: 0 !important;
1092
+ padding-bottom: 0 !important;
1093
+ }
1094
+
1095
+ /* Specific styling for reference answer text */
1096
+ #reference-content .faq-text,
1097
+ #reference-content .faq-text p {
1098
+ background-color: transparent !important;
1099
+ border: none !important;
1100
+ padding: 0 !important;
1101
+ border-radius: 0 !important;
1102
+ margin: 0 !important;
1103
+ box-shadow: none !important;
1104
+ color: var(--text-dark) !important;
1105
+ font-size: var(--text-md) !important;
1106
+ line-height: var(--leading-normal) !important;
1107
+ }
1108
+
1109
+ /* Dark mode support */
1110
+ @media (prefers-color-scheme: dark) {
1111
+ #reference-content .faq-text {
1112
+ background-color: transparent !important;
1113
+ color: var(--text-dark) !important;
1114
+ }
1115
+ }
1116
+
1117
  /* Responsive Styles */
1118
  @media screen and (max-width: 768px) {
1119
  #query-container {
 
1123
  .query-box-row {
1124
  flex: 1 1 100% !important;
1125
  max-width: 100% !important;
1126
+ margin-bottom: var(--space-md) !important;
1127
  }
1128
 
1129
  .query-button {
 
1131
  }
1132
 
1133
  .vote-button {
1134
+ font-size: var(--text-md) !important;
1135
+ padding: var(--space-md) var(--space-sm) !important;
1136
  }
1137
 
1138
  .summary-card {
1139
+ margin-bottom: var(--space-lg) !important;
1140
  }
1141
 
1142
  #main-interface-area > div:nth-child(7) > div {
1143
  flex-direction: column !important;
1144
  }
1145
+
1146
+ /* Reference card responsiveness */
1147
+ .reference-card {
1148
+ margin-bottom: var(--space-lg) !important;
1149
+ }
1150
+
1151
+ #model-comparison-header {
1152
+ flex-direction: column !important;
1153
+ align-items: flex-start !important;
1154
+ gap: var(--space-md) !important;
1155
+ }
1156
  }
1157
 
1158
  @media screen and (max-width: 480px) {
1159
  #main-interface-area > div:nth-child(10) > div {
1160
  display: grid !important;
1161
  grid-template-columns: 1fr 1fr !important;
1162
+ gap: var(--space-sm) !important;
1163
  }
1164
 
1165
  .vote-button {
1166
  margin: 0 !important;
1167
+ padding: var(--space-sm) var(--space-xs) !important;
1168
+ }
1169
+
1170
+ .reference-toggle-button {
1171
+ max-width: 100% !important;
1172
+ font-size: var(--text-xs) !important;
1173
  }
1174
  }