CERAI_AR/index.html at main · Ethical-Tech-CoLab/CERAI_AR · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <link rel="icon" type="image/svg+xml" href="etc-icon.svg">
    <link rel="icon" type="image/png" sizes="256x256" href="etc-icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CERAI — Civilian Evacuation Risk Anticipation Index</title>
<style>
:root {
  --bg: #0d1b2a;
  --bg2: #1a2d42;
  --bg3: #1e3450;
  --bg4: #243d5c;
  --purple: #7b2d8b;
  --purple2: #9b3dab;
  --accent: #c87dd4;
  --text: #e8eef4;
  --text2: #a0b4c8;
  --border: #2a4060;
  --green: #27ae60;
  --yellow: #f39c12;
  --orange: #e67e22;
  --red: #c0392b;
  --extreme: #8e44ad;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;font-size:13px}
a{color:var(--accent)}
h1{font-size:1.6rem;font-weight:700;letter-spacing:.5px}
h2{font-size:1.1rem;font-weight:600;color:var(--accent);margin-bottom:8px}
h3{font-size:.9rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}

.header{background:linear-gradient(135deg,#0d1b2a 0%,#1a1040 50%,#1a0d2e 100%);border-bottom:2px solid var(--purple);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.header-left{display:flex;align-items:center;gap:14px}
.logo{width:44px;height:44px;background:linear-gradient(135deg,var(--purple),var(--purple2));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:900;color:#fff;letter-spacing:-1px;flex-shrink:0}
.header-sub{font-size:.75rem;color:var(--text2);margin-top:2px}
.header-right{text-align:right}
.badge{display:inline-block;background:rgba(123,45,139,.3);border:1px solid var(--purple);color:var(--accent);font-size:.7rem;padding:3px 10px;border-radius:20px;margin-bottom:4px}

.disclaimer{background:rgba(123,45,139,.15);border-bottom:1px solid rgba(123,45,139,.4);padding:8px 24px;font-size:.72rem;color:var(--text2);text-align:center}

.alert-banner{background:rgba(231,76,60,.2);border:1px solid #e74c3c;border-radius:6px;padding:10px 14px;margin:8px 24px;display:flex;align-items:center;justify-content:space-between;font-size:.8rem;color:#e74c3c}
.alert-banner button{background:transparent;border:none;color:#e74c3c;cursor:pointer;font-size:1.1rem;padding:0 4px}

.btn-clear{padding:5px 11px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text2);font-size:.75rem;cursor:pointer;transition:all .2s}
.btn-clear:hover{border-color:var(--text2);color:var(--text)}

.input-panel{padding:20px 24px;overflow-y:auto;border-right:1px solid var(--border)}
.cat-section{margin-bottom:10px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.cat-header{background:var(--bg3);padding:10px 14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;transition:background .15s}
.cat-header:hover{background:var(--bg4)}
.cat-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.85rem}
.cat-weight{font-size:.72rem;color:var(--text2);background:rgba(123,45,139,.3);padding:2px 8px;border-radius:10px}
.cat-score-preview{font-size:.78rem;font-weight:700;padding:2px 8px;border-radius:4px}
.cat-arrow{font-size:.8rem;color:var(--text2);transition:transform .2s}
.cat-arrow.open{transform:rotate(180deg)}
.cat-body{padding:14px;background:var(--bg);display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:600px){.cat-body{grid-template-columns:1fr}}
.cat-body.closed{display:none}
.subsection-label{grid-column:1/-1;font-size:.7rem;font-weight:700;color:var(--purple2);text-transform:uppercase;letter-spacing:.8px;padding:4px 0 2px;border-bottom:1px solid var(--border);margin-bottom:2px}
.field{display:flex;flex-direction:column;gap:3px}
.field.full{grid-column:1/-1}
.field label{font-size:.75rem;color:var(--text2);font-weight:500;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.field input[type=range]{width:100%;accent-color:var(--purple2);height:4px;cursor:pointer}
.range-row{display:flex;align-items:center;gap:8px}
.range-val{min-width:32px;text-align:right;font-size:.8rem;font-weight:600;color:var(--accent)}
.field select,.field input[type=number]{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:5px;font-size:.8rem;outline:none;transition:border-color .2s}
.field select:focus,.field input[type=number]:focus{border-color:var(--purple2)}
.field select option{background:var(--bg3)}
.field input[type=text]{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:5px;font-size:.8rem;outline:none;transition:border-color .2s}
.field input[type=text]:focus{border-color:var(--purple2)}

.src-cred{font-size:.65rem;background:var(--bg4);border:1px solid var(--border);color:var(--text2);padding:1px 4px;border-radius:3px;cursor:pointer;width:auto;flex-shrink:0;display:none;margin-left:4px}
.src-cred.shown{display:inline-block}
.fresh-tag{font-size:.62rem;padding:1px 5px;border-radius:3px;background:rgba(39,174,96,.2);border:1px solid #27ae60;color:#27ae60;margin-left:4px}
.fresh-tag-amber{background:rgba(243,156,18,.2);border-color:#f39c12;color:#f39c12}
.fresh-tag-red{background:rgba(192,57,43,.2);border-color:#c0392b;color:#c0392b}

.q{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:var(--bg4);color:var(--text2);font-size:9px;font-weight:700;cursor:help;position:relative;vertical-align:middle;margin-left:3px;flex-shrink:0}

.output-panel{padding:16px;background:var(--bg2);overflow-y:auto;max-height:100vh}
@media(max-width:960px){.output-panel{position:static;max-height:none;width:100%;border-top:1px solid var(--border)}}

.conf-bar{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:10px 12px;margin-bottom:12px;font-size:.75rem}
.conf-bar-track{height:6px;background:var(--bg4);border-radius:3px;margin-top:6px;overflow:hidden}
.conf-bar-fill{height:100%;border-radius:3px;transition:width .4s}

.out-panel{border-radius:8px;border:1px solid var(--border);margin-bottom:12px;overflow:hidden}
.out-panel-header{padding:10px 14px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--border)}
.out-panel-body{padding:12px 14px;background:var(--bg)}
.panel-a .out-panel-header{border-left:4px solid #7b52d4;background:rgba(123,82,212,.1)}
.panel-b .out-panel-header{border-left:4px solid #e67e22;background:rgba(230,126,34,.1)}
.panel-c .out-panel-header{border-left:4px solid #1abc9c;background:rgba(26,188,156,.1)}

.gauge-container{text-align:center;margin-bottom:10px}
.gauge-wrap{position:relative;display:inline-block}
.gauge-label-top{font-size:.72rem;color:var(--text2);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;text-align:center}
.score-display{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap}
.score-number{font-size:2.2rem;font-weight:900;line-height:1;letter-spacing:-1px}
.score-pct{font-size:.9rem;font-weight:600;color:var(--text2)}
.risk-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-top:2px}

.spectrum-bar{position:relative;height:18px;border-radius:4px;margin:8px 0 4px;background:linear-gradient(to right,#27ae60 0%,#8bc34a 30%,#f39c12 50%,#e67e22 65%,#c0392b 75%,#8b0000 100%)}
.spectrum-pointer{position:absolute;bottom:-10px;transform:translateX(-50%);font-size:13px;color:#fff;transition:left .4s ease;line-height:1}
.spectrum-labels{display:flex;justify-content:space-between;font-size:.55rem;color:var(--text2);margin-top:14px;padding:0 2px}

.traj-box{display:flex;align-items:center;gap:8px;font-size:.78rem;padding:6px 10px;background:var(--bg3);border-radius:5px;margin-top:8px}
.traj-arrow{font-size:1rem;font-weight:700}
.time-thresh{font-size:.72rem;color:var(--text2);margin-top:6px;font-style:italic}

.mini-gauge-row{margin-bottom:10px}
.mini-gauge-label{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;margin-bottom:4px}
.mini-gauge-track{height:12px;background:var(--bg3);border-radius:6px;overflow:hidden}
.mini-gauge-fill{height:100%;border-radius:6px;transition:width .4s}
.mini-gauge-val{font-size:.8rem;font-weight:700;color:var(--accent)}

.constraint-flag{font-size:.75rem;background:rgba(230,126,34,.15);border:1px solid rgba(230,126,34,.4);color:#e67e22;padding:6px 10px;border-radius:5px;margin-top:8px}
.combined-feas{text-align:center;padding:10px 0;font-size:2.2rem;font-weight:900;letter-spacing:-1px;line-height:1}
.feas-note{font-size:.68rem;color:var(--text2);font-style:italic;margin-top:6px}

.briefing-section{margin-bottom:12px}
.briefing-section h4{font-size:.72rem;font-weight:700;color:var(--purple2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;padding-bottom:3px;border-bottom:1px solid rgba(42,64,96,.5)}
.briefing-section p{font-size:.77rem;color:var(--text);line-height:1.6}
.briefing-section ul{padding-left:16px}
.briefing-section ul li{font-size:.75rem;color:var(--text2);margin-bottom:3px;line-height:1.5}

.ihl-article{display:inline-block;background:rgba(123,45,139,.3);border:1px solid rgba(123,45,139,.5);color:var(--accent);padding:2px 7px;border-radius:3px;margin:2px 3px 2px 0;font-size:.68rem}

.analogue-card{background:var(--bg3);border:1px solid var(--border);border-radius:5px;padding:8px 10px;margin-bottom:6px}
.analogue-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;margin-bottom:4px}
.analogue-name{font-size:.75rem;font-weight:600;flex:1;line-height:1.3}
.analogue-score{font-size:.82rem;font-weight:700;flex-shrink:0}
.analogue-meta{font-size:.68rem;color:var(--text2);line-height:1.5}
.sim-bar{display:inline-block;height:4px;background:var(--purple2);border-radius:2px;vertical-align:middle;margin:0 3px}

.whatif-box{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:10px 12px;margin-top:8px}
.whatif-label{font-size:.7rem;color:var(--text2);font-style:italic;margin-bottom:8px}
.whatif-select{width:100%;background:var(--bg4);border:1px solid var(--border);color:var(--text);padding:5px 8px;border-radius:5px;font-size:.78rem;margin-bottom:8px}
.whatif-result{font-size:.75rem;background:var(--bg4);border-radius:4px;padding:6px 8px;color:var(--accent);min-height:32px;margin-top:6px}


.assessment-summary{max-width:1400px;margin:0 auto;background:var(--bg3);border-bottom:2px solid var(--border);padding:10px 24px;display:flex;flex-wrap:wrap;align-items:stretch;gap:0}
.assessment-summary-label{font-size:.65rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px}
.assessment-summary-val{font-size:1.35rem;font-weight:800;line-height:1}
.assessment-summary-sub{font-size:.65rem;color:var(--text2);margin-top:3px}
.assessment-summary-cell{flex:1;padding:8px 16px;border-right:1px solid var(--border);display:flex;flex-direction:column;justify-content:center}
.assessment-summary-cell:last-child{border-right:none}
.assessment-summary-title{font-size:.68rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.8px;padding:8px 0 6px 0;flex:0 0 100%}

.action-btns{display:flex;gap:8px;margin-bottom:10px}
.btn-export{flex:1;padding:9px;background:linear-gradient(135deg,var(--purple),var(--purple2));border:none;border-radius:6px;color:#fff;font-size:.8rem;font-weight:600;cursor:pointer;transition:opacity .2s}
.btn-export:hover{opacity:.85}
.btn-lock{flex:1;padding:9px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text2);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s}
.btn-lock:hover{border-color:var(--text);color:var(--text)}

.snapshot-list{font-size:.73rem;background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:8px;margin-bottom:10px;display:none}
.snapshot-item{display:flex;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(42,64,96,.4)}
.snapshot-item:last-child{border-bottom:none}
.snapshot-del{background:transparent;border:none;color:#e74c3c;cursor:pointer;font-size:.9rem;padding:0 4px}

.panel{margin:0 24px 12px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.panel-header{background:var(--bg3);padding:12px 16px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none}
.panel-header:hover{background:var(--bg4)}
.panel-header h2{margin:0;font-size:.9rem}
.panel-arrow{font-size:.8rem;color:var(--text2);transition:transform .2s}
.panel-arrow.open{transform:rotate(180deg)}
.panel-body{padding:16px;background:var(--bg);display:none}
.panel-body.open{display:block}

.hist-table{width:100%;border-collapse:collapse;font-size:.75rem}
.hist-table th{background:var(--bg3);padding:8px 10px;text-align:left;color:var(--text2);font-weight:600;border-bottom:1px solid var(--border);white-space:nowrap}
.hist-table td{padding:7px 10px;border-bottom:1px solid rgba(42,64,96,.5);vertical-align:top;line-height:1.4}
.hist-table tr:hover td{background:rgba(30,52,80,.5)}
.risk-chip{display:inline-block;padding:2px 8px;border-radius:3px;font-weight:700;font-size:.72rem}

.meth-section{margin-bottom:16px}
.meth-section h3{color:var(--accent);font-size:.82rem;margin-bottom:6px;border-bottom:1px solid var(--border);padding-bottom:4px}
.meth-section p{font-size:.78rem;color:var(--text2);line-height:1.6;margin-bottom:6px}
.formula-box{background:var(--bg3);border:1px solid var(--border);border-radius:5px;padding:10px 14px;font-family:monospace;font-size:.75rem;color:#a0d4ff;margin:8px 0;overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:.72rem;margin-top:6px}
.data-table th{background:var(--bg3);padding:6px 10px;text-align:left;color:var(--text2);border-bottom:1px solid var(--border)}
.data-table td{padding:5px 10px;border-bottom:1px solid rgba(42,64,96,.4);color:var(--text2)}
.limitations li{font-size:.78rem;color:var(--text2);margin-left:16px;margin-bottom:4px;line-height:1.5}
.citation{background:var(--bg3);border-left:3px solid var(--purple);padding:10px 14px;border-radius:0 5px 5px 0;font-size:.78rem;color:var(--text2);margin-top:8px}

.sources-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:8px}
.source-chip{background:var(--bg3);border:1px solid var(--border);border-radius:5px;padding:8px 10px;font-size:.72rem}
.source-chip strong{color:var(--accent);display:block;margin-bottom:2px}

.fin-filter{font-size:.78rem}
.fin-filter .field{margin-bottom:8px}
.fin-result{background:var(--bg3);border-radius:5px;padding:8px 10px;font-size:.78rem;margin-top:8px}
.fin-note{font-size:.68rem;color:var(--text2);font-style:italic;margin-top:6px}

.api-config-body .field{margin-bottom:8px}
.gdelt-article{background:var(--bg3);border-radius:5px;padding:8px;margin-bottom:6px;font-size:.75rem}
.gdelt-article a{color:var(--accent);text-decoration:none}
.gdelt-article .gdelt-meta{font-size:.68rem;color:var(--text2);margin-top:3px}

.footer{text-align:center;padding:20px;font-size:.72rem;color:var(--text2);border-top:1px solid var(--border);margin:0 24px 24px;background:var(--bg2);border-radius:0 0 8px 8px}

.r-low{color:#27ae60}.r-moderate{color:#f1c40f}.r-elevated{color:#f39c12}
.r-high{color:#e67e22}.r-critical{color:#e74c3c}.r-extreme{color:#c0392b}

/* Monte Carlo Panel */
.mc-run-btn{width:100%;padding:10px;background:linear-gradient(135deg,var(--purple),var(--purple2));border:none;border-radius:6px;color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;transition:opacity .2s;letter-spacing:.3px;margin-bottom:8px}
.mc-run-btn:hover{opacity:.85}
.mc-run-btn:disabled{opacity:.5;cursor:not-allowed}
.mc-loading{text-align:center;color:var(--text2);font-size:.78rem;padding:8px 0;display:none}
.mc-results{display:none}
.mc-result-row{padding:5px 0;border-bottom:1px solid rgba(42,64,96,.4);font-size:.78rem;line-height:1.5}
.mc-result-row:last-child{border-bottom:none}
.mc-interpretation{margin-top:8px;padding:8px 10px;border:1px solid rgba(123,45,139,.3);border-radius:5px;font-size:.75rem;line-height:1.6;color:var(--text)}
.mc-hist-summary{font-size:.73rem;color:var(--text2);margin:8px 0 5px}
.mc-table{width:100%;border-collapse:collapse;font-size:.7rem}
.mc-table th{background:var(--bg3);padding:6px 8px;text-align:left;color:var(--text2);font-weight:600;border-bottom:1px solid var(--border);white-space:nowrap;font-size:.67rem}
.mc-table td{padding:5px 8px;border-bottom:1px solid rgba(42,64,96,.4);vertical-align:top;line-height:1.4}
.mc-table tr:hover td{background:rgba(30,52,80,.4)}
.mc-class-above{color:var(--accent);font-weight:600}
.mc-class-borderline{color:#f39c12;font-weight:600}
.mc-class-below{color:var(--text2)}
.mc-note{font-size:.67rem;color:var(--text2);font-style:italic;margin-top:10px;line-height:1.55;padding:7px 9px;background:var(--bg3);border-radius:4px;border:1px solid var(--border)}
.mc-section-title{font-size:.7rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.7px;margin:10px 0 5px;padding-bottom:3px;border-bottom:1px solid rgba(42,64,96,.5)}

.update-btn{width:100%;padding:10px;background:linear-gradient(135deg,var(--purple),var(--purple2));border:none;border-radius:6px;color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;margin-top:8px;transition:opacity .2s;letter-spacing:.3px}
.update-btn:hover{opacity:.85}

.tab-bar{display:flex;border-bottom:2px solid var(--border);margin-bottom:0}
.tab-btn{padding:9px 14px;font-size:.75rem;font-weight:600;color:var(--text2);background:transparent;border:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;white-space:nowrap;text-transform:uppercase;letter-spacing:.5px}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--purple2);background:rgba(123,45,139,.08)}
.tab-btn:hover:not(.active){color:var(--text);background:rgba(255,255,255,.04)}
.tab-content{display:none;padding:14px;background:var(--bg)}
.tab-content.active{display:block}
.tab-panel{border-radius:8px;border:1px solid var(--border);margin-bottom:12px;overflow:hidden}
.tab-panel-header{padding:10px 14px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--border)}
.dim1-header{border-left:4px solid #7b52d4;background:rgba(123,82,212,.1);color:#c87dd4}
.dim2-header{border-left:4px solid #e67e22;background:rgba(230,126,34,.1);color:#e67e22}
.dim3-header{border-left:4px solid #1abc9c;background:rgba(26,188,156,.1);color:#1abc9c}

.btn-load-scenario{padding:7px 18px;border-radius:6px;border:1px solid var(--purple2);background:rgba(123,45,139,.2);color:var(--accent);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s}
.btn-load-scenario:hover{background:rgba(123,45,139,.35);color:#fff}
.preset-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:10000;display:flex;align-items:center;justify-content:center}
.preset-modal{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:20px 24px;width:620px;max-width:95vw;max-height:80vh;overflow-y:auto;position:relative}
.preset-modal h2{color:var(--accent);font-size:1rem;margin-bottom:14px}
.preset-modal-close{position:absolute;top:14px;right:16px;background:transparent;border:none;color:var(--text2);font-size:1.2rem;cursor:pointer;padding:0 4px}
.preset-modal-close:hover{color:var(--text)}
.preset-band{margin-bottom:14px}
.preset-band-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:4px 8px;border-radius:4px;margin-bottom:8px;display:inline-block}
.pb-extreme{background:rgba(192,57,43,.2);color:#e74c3c;border:1px solid rgba(192,57,43,.4)}
.pb-high{background:rgba(230,126,34,.2);color:#e67e22;border:1px solid rgba(230,126,34,.4)}
.pb-moderate{background:rgba(39,174,96,.2);color:#27ae60;border:1px solid rgba(39,174,96,.4)}
.pb-lower{background:rgba(52,152,219,.2);color:#3498db;border:1px solid rgba(52,152,219,.4)}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;margin-top:6px}
.preset-modal-btn{padding:7px 10px;border-radius:5px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-size:.78rem;cursor:pointer;text-align:left;transition:all .15s;line-height:1.3}
.preset-modal-btn:hover{background:var(--bg4);border-color:var(--purple2);color:#fff}
.preset-modal-btn .p-year{font-size:.65rem;color:var(--text2);display:block;margin-top:2px}

.src-wrap{display:inline-flex;align-items:center;margin-left:auto}
.src-btn{font-size:.62rem;color:transparent;cursor:pointer;padding:1px 5px;border-radius:3px;transition:all .15s;white-space:nowrap;border:1px solid transparent;background:transparent;user-select:none}
.field:hover .src-btn,.src-btn.active{color:var(--text2);background:var(--bg3);border-color:var(--border)}
#cerai-tooltip{position:fixed;background:#1a2d42;border:1px solid #2a4060;color:#e8eef4;padding:8px 11px;border-radius:6px;font-size:11px;line-height:1.6;width:250px;white-space:normal;z-index:99999;pointer-events:none;display:none;max-width:90vw;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.output-hero{background:var(--bg2);border-bottom:2px solid var(--border);max-width:1400px;margin:0 auto}
.output-hero-topbar{display:flex;align-items:stretch;background:var(--bg3);border-bottom:1px solid var(--border)}
.output-hero-topbar .tab-bar{border-bottom:none;flex:1}
.output-hero-actions{display:flex;align-items:center;gap:8px;padding:6px 16px;flex-shrink:0}
.inputs-section{max-width:1400px;margin:0 auto 0;border-bottom:1px solid var(--border)}
.inputs-section-header{background:var(--bg3);padding:10px 24px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;border-bottom:1px solid var(--border)}
.inputs-section-header:hover{background:var(--bg4)}
.inputs-section-header h2{margin:0;font-size:.9rem}
.inputs-toggle-btn{font-size:.75rem;color:var(--text2);background:transparent;border:1px solid var(--border);border-radius:4px;cursor:pointer;padding:3px 10px}
.inputs-toggle-btn:hover{color:var(--text);border-color:var(--text2)}
.inputs-body{padding:20px 24px}
.inputs-body.closed{display:none}
#conf-compact{font-size:.72rem;color:var(--text2);margin-left:16px}
</style>
</head>
<body>

<!-- HEADER -->
<div class="header">
  <div class="header-left">
    <div class="logo">CE</div>
    <div>
      <h1>CERAI</h1>
      <div class="header-sub">Civilian Evacuation Risk Anticipation Index &nbsp;&middot;&nbsp; Research Prototype v3.0</div>
    </div>
  </div>
  <div class="header-right">
    <div class="badge">PhD Research &mdash; NYU School of Law</div>
    <div style="font-size:.72rem;color:var(--text2)">Teresa Cantero &nbsp;&middot;&nbsp; International Humanitarian Law &nbsp;&middot;&nbsp; 2026</div>
  </div>
</div>

<!-- DISCLAIMER -->
<div class="disclaimer">
  This tool is a <strong>research prototype for PhD purposes only</strong>. It does not replace human judgment, legal expertise, or operational assessment. Risk scores are indicative only and must be interpreted by qualified humanitarian and legal professionals. Historical case data compiled for academic research (Teresa Cantero, NYU School of Law, 2026). Extended case set developed with AI research assistance.
</div>

<!-- ALERT BANNER -->
<div id="alert-banner" class="alert-banner" style="display:none">
  <span id="alert-text"></span>
  <button onclick="dismissAlert()">&#215;</button>
</div>

<!-- OUTPUT HERO -->
<div class="output-hero">
  <div class="output-hero-topbar">
    <div class="tab-bar">
      <button class="tab-btn active" id="tab-btn-1" onclick="switchTab(1)">Endangerment</button>
      <button class="tab-btn" id="tab-btn-2" onclick="switchTab(2)">Feasibility</button>
      <button class="tab-btn" id="tab-btn-3" onclick="switchTab(3)">Decision Support</button>
    </div>
    <div class="output-hero-actions">
      <button class="btn-load-scenario" onclick="openPresetModal()">Load Historical Scenario</button>
      <button class="btn-clear" onclick="clearAll()">Clear All</button>
    </div>
  </div>

  <!-- ASSESSMENT SUMMARY PANEL -->
  <div class="assessment-summary" id="assessment-summary">
    <div class="assessment-summary-title">Assessment Summary</div>
    <div class="assessment-summary-cell">
      <div class="assessment-summary-label">Threat Environment Score <span class="q" data-tip="Final endangerment score after Dimension 3 vulnerability multiplier has been applied. Identical to the value shown on the Endangerment gauge.">?</span></div>
      <div class="assessment-summary-val" id="summary-endang" style="color:var(--text2)">&#8212;</div>
      <div class="assessment-summary-sub">Post-multiplier endangerment (D1 × D3)</div>
    </div>
    <div class="assessment-summary-cell">
      <div class="assessment-summary-label">Feasibility Score <span class="q" data-tip="Composite feasibility score from Zone Exit, Route Conditions, and Protection at Destination sub-scores. Identical to the value shown on the Feasibility gauge.">?</span></div>
      <div class="assessment-summary-val" id="summary-feas" style="color:var(--text2)">&#8212;</div>
      <div class="assessment-summary-sub">Zone exit · Route · Protection at destination</div>
    </div>
    <div class="assessment-summary-cell">
      <div class="assessment-summary-label">Vulnerability Multiplier <span class="q" data-tip="Dimension 3 multiplier derived from population vulnerability profile. Range: 0.70× (low vulnerability) to 1.30× (high vulnerability). Applied to base endangerment score.">?</span></div>
      <div class="assessment-summary-val" id="summary-mult" style="color:#9b59b6">&#8212;</div>
      <div class="assessment-summary-sub" id="summary-mult-sub">Dimension 3 multiplier — amplifies both dimensions</div>
    </div>
  </div>

  <div style="padding:0 24px 16px">

  <!-- TAB 1: ENDANGERMENT -->
  <div class="tab-content active" id="tab-1">
    <div class="tab-panel">
      <div class="tab-panel-header dim1-header">ENDANGERMENT ASSESSMENT &mdash; Dimension 1
        <div style="font-size:.67rem;font-weight:400;color:var(--text2);margin-top:2px">Assessing the danger civilians face if they remain</div>
      </div>
      <div style="padding:12px 14px;background:var(--bg)">
        <div class="gauge-label-top">ENDANGERMENT SCORE</div>
        <div class="gauge-container">
          <div class="gauge-wrap">
            <svg id="gauge-svg" width="240" height="145" viewBox="0 0 260 155">
              <defs>
                <linearGradient id="gaugeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" style="stop-color:#27ae60"/>
                  <stop offset="30%" style="stop-color:#8bc34a"/>
                  <stop offset="50%" style="stop-color:#f39c12"/>
                  <stop offset="65%" style="stop-color:#e67e22"/>
                  <stop offset="75%" style="stop-color:#c0392b"/>
                  <stop offset="100%" style="stop-color:#8b0000"/>
                </linearGradient>
              </defs>
              <path d="M 20 135 A 110 110 0 0 1 240 135" fill="none" stroke="#2a4060" stroke-width="18" stroke-linecap="round"/>
              <path id="gauge-arc" d="M 20 135 A 110 110 0 0 1 240 135" fill="none" stroke="url(#gaugeGrad)" stroke-width="18" stroke-linecap="round" stroke-dasharray="345.4" stroke-dashoffset="345.4" style="transition:stroke-dashoffset .6s ease"/>
              <line id="gauge-needle" x1="130" y1="135" x2="130" y2="38" stroke="#fff" stroke-width="2.5" stroke-linecap="round" style="transform-origin:130px 135px;transform:rotate(-90deg);transition:transform .6s ease"/>
              <circle cx="130" cy="135" r="6" fill="var(--purple2)"/>
              <text x="14" y="152" fill="#a0b4c8" font-size="9" text-anchor="middle">0</text>
              <text x="65" y="48" fill="#a0b4c8" font-size="9" text-anchor="middle">25</text>
              <text x="130" y="25" fill="#a0b4c8" font-size="9" text-anchor="middle">50</text>
              <text x="195" y="48" fill="#a0b4c8" font-size="9" text-anchor="middle">75</text>
              <text x="246" y="152" fill="#a0b4c8" font-size="9" text-anchor="middle">100</text>
              <!-- IHL THRESHOLD MARKER at 75% -->
              <line x1="193" y1="57" x2="182" y2="75" stroke="#f39c12" stroke-width="2" stroke-linecap="round"/>
              <circle cx="193" cy="57" r="3" fill="#f39c12"/>
              <text x="210" y="55" fill="#f39c12" font-size="8" text-anchor="start">IHL 75%</text>
            </svg>
            <div class="score-display">
              <div><span class="score-number" id="score-number" style="color:#e8eef4">&#8212;</span><span class="score-pct">%</span></div>
              <div class="risk-label" id="risk-label">ENTER DATA</div>
            </div>
          </div>
        </div>

        <!-- SPECTRUM BAR -->
        <div class="spectrum-bar">
          <span class="spectrum-pointer" id="spectrum-ptr" style="left:50%">&#9650;</span>
          <div style="position:absolute;left:75%;top:0;width:2px;height:100%;background:#f39c12;opacity:.8"></div>
          <div style="position:absolute;left:75%;top:-18px;transform:translateX(-50%);font-size:.58rem;color:#f39c12;white-space:nowrap" title="Above this threshold, conditions engage the general protection obligations — AP I Arts. 51/57/58 in international armed conflict; Common Art. 3 and AP II Art. 17 in non-international armed conflict">IHL 75%</div>
        </div>
        <div class="spectrum-labels">
          <span>Manageable</span><span>Elevated</span><span>Severe</span><span>Extreme</span><span>Critical</span>
        </div>

        <!-- TRAJECTORY -->
        <div class="traj-box">
          <span class="traj-arrow" id="traj-arrow" style="color:var(--text2)">&#8594;</span>
          <span id="traj-label" style="font-size:.78rem;color:var(--text2)">Current Trajectory: Insufficient History</span>
        </div>
        <div id="traj-explanation" style="font-size:.7rem;color:var(--text2);margin-top:4px;padding:4px 8px;font-style:italic;line-height:1.5">Insufficient session history to calculate trajectory. Trajectory updates as inputs are adjusted over time or when ACLED data is connected.</div>
        <div class="time-thresh" id="time-thresh" style="display:none"></div>

        <!-- IHL TRIGGERS -->
        <div style="margin-top:8px;padding:8px 10px;background:var(--bg3);border-radius:5px;border:1px solid var(--border)">
          <div style="font-size:.68rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px">IHL Obligations Triggered</div>
          <div id="ihl-content" style="color:var(--text2);font-size:.72rem">Enter scenario data to see triggered IHL obligations.</div>
        </div>

        <!-- DIMENSION 3 RANGE — ENDANGERMENT -->
        <div id="endag-range" style="font-size:.7rem;color:var(--text2);margin-top:8px;padding:6px 8px;background:var(--bg3);border-radius:4px;line-height:1.5;display:none"></div>
      </div>
    </div>
  </div>

  <!-- TAB 2: FEASIBILITY -->
  <div class="tab-content" id="tab-2">
    <div class="tab-panel">
      <div class="tab-panel-header dim2-header">FEASIBILITY ASSESSMENT &mdash; Dimension 2
        <div style="font-size:.67rem;font-weight:400;color:var(--text2);margin-top:2px">Assessing whether organised movement is possible</div>
      </div>
      <div style="padding:12px 14px;background:var(--bg)">
        <div class="gauge-label-top">FEASIBILITY SCORE</div>
        <div class="gauge-container">
          <div class="gauge-wrap">
            <svg id="feas-gauge-svg" width="240" height="145" viewBox="0 0 260 155">
              <defs>
                <linearGradient id="feasGaugeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" style="stop-color:#c0392b"/>
                  <stop offset="25%" style="stop-color:#e67e22"/>
                  <stop offset="50%" style="stop-color:#f39c12"/>
                  <stop offset="70%" style="stop-color:#8bc34a"/>
                  <stop offset="100%" style="stop-color:#27ae60"/>
                </linearGradient>
              </defs>
              <path d="M 20 135 A 110 110 0 0 1 240 135" fill="none" stroke="#2a4060" stroke-width="18" stroke-linecap="round"/>
              <path id="feas-gauge-arc" d="M 20 135 A 110 110 0 0 1 240 135" fill="none" stroke="url(#feasGaugeGrad)" stroke-width="18" stroke-linecap="round" stroke-dasharray="345.4" stroke-dashoffset="345.4" style="transition:stroke-dashoffset .6s ease"/>
              <line id="feas-gauge-needle" x1="130" y1="135" x2="130" y2="38" stroke="#fff" stroke-width="2.5" stroke-linecap="round" style="transform-origin:130px 135px;transform:rotate(-90deg);transition:transform .6s ease"/>
              <circle cx="130" cy="135" r="6" fill="var(--purple2)"/>
              <text x="14" y="152" fill="#a0b4c8" font-size="9" text-anchor="middle">0</text>
              <text x="65" y="48" fill="#a0b4c8" font-size="9" text-anchor="middle">25</text>
              <text x="130" y="25" fill="#a0b4c8" font-size="9" text-anchor="middle">50</text>
              <text x="195" y="48" fill="#a0b4c8" font-size="9" text-anchor="middle">75</text>
              <text x="246" y="152" fill="#a0b4c8" font-size="9" text-anchor="middle">100</text>
            </svg>
            <div class="score-display">
              <div><span class="score-number" id="feas-number" style="color:#e8eef4">&#8212;</span><span class="score-pct">%</span></div>
              <div class="risk-label" id="feas-label" style="margin-top:2px">ENTER DATA</div>
            </div>
          </div>
        </div>

        <div style="margin:8px 0 4px;font-size:.68rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.6px">Sub-scores</div>
        <div class="mini-gauge-row">
          <div class="mini-gauge-label">
            <span>Zone Exit Conditions <span class="q" id="zone-q" data-tip="Zone exit feasibility factors: Corridor Status, Armed Group Consent (Zone), UXO/Mine Load in Zone, Imminent Attack indicators. High feasibility = open corridors, consent granted, no UXO, no imminent threat.">?</span></span>
            <span class="mini-gauge-val" id="zone-val">&#8212;</span>
          </div>
          <div class="mini-gauge-track"><div class="mini-gauge-fill" id="zone-bar" style="width:0%;background:#27ae60"></div></div>
          <div id="zone-detail" style="font-size:.63rem;color:var(--text2);margin-top:2px;margin-bottom:4px"></div>
        </div>
        <div class="mini-gauge-row">
          <div class="mini-gauge-label">
            <span>Route Conditions <span class="q" id="route-q" data-tip="Route feasibility factors: Transport Sufficiency, Distance to Safety, Communication Reliability, Notice Time, Mine Load on Routes, Weather, Daylight. High feasibility = sufficient transport, short distance, good comms, long notice, clear routes, good weather.">?</span></span>
            <span class="mini-gauge-val" id="route-val">&#8212;</span>
          </div>
          <div class="mini-gauge-track"><div class="mini-gauge-fill" id="route-bar" style="width:0%;background:#27ae60"></div></div>
          <div id="route-detail" style="font-size:.63rem;color:var(--text2);margin-top:2px;margin-bottom:4px"></div>
        </div>
        <div class="mini-gauge-row">
          <div class="mini-gauge-label">
            <span>Protection at Destination <span class="q" id="dest-q" data-tip="Whether movement would constitute protection under IHL. GC IV Art. 49 requires transfer to safe conditions, not merely movement away from danger — an evacuation to an unsafe or non-viable destination does not fulfil the legal protection obligation.">?</span></span>
            <span class="mini-gauge-val" id="dest-val">&#8212;</span>
          </div>
          <div class="mini-gauge-track"><div class="mini-gauge-fill" id="dest-bar" style="width:0%;background:#27ae60"></div></div>
          <div id="dest-detail" style="font-size:.63rem;color:var(--text2);margin-top:2px;margin-bottom:4px"></div>
        </div>
        <div class="constraint-flag" id="constraint-flag">Enter data to identify primary constraint</div>
        <div class="feas-note">Feasibility reflects current reported conditions. Verify with ground sources before operational decisions.</div>

        <!-- DIMENSION 3 RANGE — FEASIBILITY -->
        <div id="feas-range" style="font-size:.7rem;color:var(--text2);margin-top:8px;padding:6px 8px;background:var(--bg3);border-radius:4px;line-height:1.5;display:none"></div>
      </div>
    </div>
  </div>

  <!-- TAB 3: DECISION SUPPORT -->
  <div class="tab-content" id="tab-3">
    <div class="tab-panel">
      <div class="tab-panel-header dim3-header">DECISION SUPPORT BRIEFING
        <div style="font-size:.67rem;font-weight:400;color:var(--text2);margin-top:2px">For humanitarian coordinators and political decision-makers</div>
      </div>
      <div style="padding:12px 14px;background:var(--bg)">
        <div class="briefing-section">
          <h4>Situation Summary</h4>
          <p id="brief-summary">Enter scenario data to generate situation summary.</p>
        </div>

        <div class="briefing-section">
          <h4>IHL Assessment</h4>
          <div id="brief-ihl">Enter data to generate IHL assessment.</div>
        </div>

        <div class="briefing-section">
          <h4>Endangerment vs Feasibility Gap Analysis</h4>
          <p id="brief-gap">Enter data to generate gap analysis.</p>
        </div>

        <div class="briefing-section">
          <h4>What This Model Cannot Assess</h4>
          <ul>
            <li>Political will of parties to the conflict</li>
            <li>Real-time actor behaviour and command decisions</li>
            <li>Ongoing negotiation status between parties</li>
            <li>Legal constraints on movement specific to individuals</li>
            <li>Individual household circumstances and vulnerabilities</li>
          </ul>
        </div>

        <div class="briefing-section">
          <h4>Interactive What-If Pressure Test</h4>
          <div class="whatif-box">
            <div class="whatif-label">Pressure Test &mdash; For Analytical Purposes Only. Not a recommendation.</div>
            <select id="whatif-var" class="whatif-select" onchange="updateWhatIf()">
              <option value="">Select a variable to test...</option>
            </select>
            <div id="whatif-slider-row" style="display:none">
              <label style="font-size:.72rem;color:var(--text2)" id="whatif-slider-label">Value</label>
              <div class="range-row">
                <input type="range" id="whatif-slider" oninput="runWhatIf()" style="flex:1">
                <span class="range-val" id="whatif-slider-val">-</span>
              </div>
            </div>
            <div class="whatif-result" id="whatif-result">Select a variable above to begin pressure testing.</div>
          </div>
        </div>

        <div class="briefing-section">
          <h4>Monte Carlo Sensitivity Analysis</h4>
          <div style="font-size:.7rem;color:var(--text2);margin-bottom:8px">Testing output robustness under weight uncertainty (1,000 iterations)</div>
          <button class="mc-run-btn" id="mc-run-btn" onclick="runMonteCarloSim()">Run Simulation</button>
          <div class="mc-loading" id="mc-loading">Running 1,000 iterations&hellip;<span id="mc-long-note" style="display:none;color:#f39c12;margin-left:6px">Large simulation — results loading.</span></div>
          <div class="mc-results" id="mc-results">
            <div class="mc-section-title">Current Assessment Results</div>
            <div style="background:var(--bg3);border:1px solid var(--border);border-radius:5px;padding:8px 10px;margin-bottom:8px">
              <div class="mc-result-row" id="mc-endang-result"></div>
              <div class="mc-result-row" id="mc-feas-result"></div>
              <div class="mc-result-row" id="mc-robustness"></div>
            </div>
            <div class="mc-interpretation" id="mc-interpretation"></div>
            <div class="mc-section-title" style="margin-top:12px">Historical Case Robustness Table</div>
            <div class="mc-hist-summary" id="mc-hist-summary"></div>
            <div style="overflow-x:auto">
              <table class="mc-table">
                <thead>
                  <tr>
                    <th>Case Name</th>
                    <th>Ground Truth Risk</th>
                    <th>Mean MC Score</th>
                    <th>90% CI</th>
                    <th>% Above Threshold</th>
                    <th>Classification</th>
                  </tr>
                </thead>
                <tbody id="mc-hist-tbody"></tbody>
              </table>
            </div>
            <div class="mc-note">Monte Carlo simulation: 1,000 iterations per run. Each iteration draws weights from a uniform distribution &#177;20% of the researcher-assigned values, renormalised within each dimension. Uncertainty ranges reflect the absence of AHP expert validation — they are not empirically derived. After AHP validation, uncertainty ranges would reflect actual expert disagreement rather than assumed &#177;20% bands, producing more meaningful confidence intervals. Results should be interpreted as a sensitivity check on weight assumptions, not as statistically validated confidence intervals.</div>
          </div>
        </div>

        <div class="briefing-section">
          <h4>Historical Precedent Comparator</h4>
          <div style="background:var(--bg3);border:1px solid var(--border);border-radius:5px;padding:8px 10px;margin-bottom:8px;font-size:.72rem;color:var(--text2)">
            <strong style="color:var(--accent)">Precedent-surfacing tool, not validation:</strong> This comparator surfaces historical cases whose documented conditions most closely resemble the current input profile across five comparator dimensions (threat, population, operations, political, destination). It is not a validation tool — the comparator and the model share their initialising data, so comparator output cannot be used to assess CERAI's accuracy. The purpose is to make case-based reasoning explicit: to surface which documented operations the current situation resembles, so the institutional memory of those operations can inform present judgment.
            <br><br>Note: the comparator currently encodes historical cases using five variables (threat profile, population characteristics, operational conditions, political consent, and destination capacity) derived from the original case documentation. This encoding predates the three-dimension restructure of CERAI v3. Recoding to the three-dimension framework is a documented next step requiring researcher review of each case encoding. The five-variable encoding remains a valid approximation for precedent-surfacing purposes and does not affect the scoring calculation, which uses the three-dimension architecture throughout.
          </div>
          <div id="analogues-content">
            <div style="color:var(--text2);font-size:.75rem">Enter scenario data to find comparable historical evacuations.</div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- ACTION BUTTONS -->
  <div class="action-btns">
    <button class="btn-export" onclick="exportAssessment()">Export Assessment</button>
    <button class="btn-lock" onclick="lockAssessment()">Lock Assessment</button>
  </div>
  <div class="snapshot-list" id="snapshot-list"></div>

  </div><!-- /padding wrapper -->
</div><!-- /output-hero -->

<!-- INPUTS SECTION -->
<div class="inputs-section">
  <div class="inputs-section-header" onclick="toggleInputsSection()">
    <h2>Assessment Inputs</h2>
    <span id="conf-compact"></span>
    <button class="inputs-toggle-btn" id="inputs-toggle-btn" onclick="event.stopPropagation();toggleInputsSection()">Collapse &#9650;</button>
  </div>
  <div class="inputs-body" id="inputs-body">

  <!-- CONFIDENCE BAR -->
  <div class="conf-bar">
    <div style="display:flex;align-items:center;justify-content:space-between">
      <span style="font-size:.75rem;font-weight:600">Assessment Confidence <span class="q" data-tip="Confidence is calculated as the percentage of fields populated with user-entered or API-sourced data rather than precautionary defaults. Per AP I Art. 57, when information is incomplete the model applies high-risk precautionary defaults. Higher confidence means the assessment is grounded in specific data rather than worst-case assumptions.">?</span></span>
      <span id="conf-pct" style="font-size:.8rem;font-weight:700">--%</span>
    </div>
    <div id="conf-note" style="font-size:.68rem;color:var(--text2);margin-top:3px">Enter data to calculate confidence</div>
    <div class="conf-bar-track">
      <div class="conf-bar-fill" id="conf-fill" style="width:0%;background:#27ae60"></div>
    </div>
  </div>

  <!-- Location -->
  <div class="field full" style="margin-bottom:12px">
    <label>Location / Area of Assessment <span class="q" data-tip="Free-text location name used in exports and API calls. Does not affect scoring. Used to label reports and fetch weather/ACLED data.">?</span></label>
    <input type="text" id="locationInput" placeholder="e.g. Mariupol, Ukraine" oninput="calcScore()" onkeydown="if(event.key==='Enter'){event.preventDefault();geocodeLocation()}">
    <div id="location-status" style="font-size:.68rem;color:var(--text2);margin-top:4px"></div>
  </div>

  <!-- SECTION 1: THREAT & HOSTILITIES -->
  <div class="cat-section" id="sec-threat">
    <div class="cat-header" onclick="toggleCat('threat')">
      <div class="cat-title"><span>Threat Environment &mdash; Dimension 1</span><span class="cat-weight">Dimension 1</span></div>
      <div style="display:flex;align-items:center;gap:8px">
        <span class="cat-score-preview" id="prev-threat">&#8212;</span>
        <span class="cat-arrow open" id="arr-threat">&#9660;</span>
      </div>
    </div>
    <div class="cat-body" id="body-threat">
      <div class="field">
        <label>Hostility Intensity (1-10) <span class="q" data-tip="Overall intensity of armed hostilities in or near the assessed area on a 1-10 scale. Higher values indicate more intense ongoing combat or bombardment. Primary input for endangerment. Source in live deployment: ACLED event frequency and fatality data.">?</span>
          <select class="src-cred" data-field="hostilityIntensity"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <div class="range-row">
          <input type="range" min="1" max="10" value="5" id="hostilityIntensity" oninput="updateRange(this,'rv-hostility');dirtyFields.add('hostilityIntensity');calcScore()">
          <span class="range-val" id="rv-hostility">5</span>
        </div>
      </div>
      <div class="field">
        <label>Armed Group Proximity (km) <span class="q" data-tip="Distance in km between nearest armed group and civilian population. Zero indicates direct contact or encirclement. Closer proximity dramatically increases targeting risk. Source: ACLED/UNOSAT geolocated event data.">?</span>
          <select class="src-cred" data-field="armedProximity"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <div class="range-row">
          <input type="range" min="0" max="50" value="25" id="armedProximity" oninput="updateRange(this,'rv-prox');dirtyFields.add('armedProximity');calcScore()">
          <span class="range-val" id="rv-prox">25</span>
        </div>
      </div>
      <div class="field">
        <label>Imminent Attack Indicators <span class="q" data-tip="Assessment of whether an attack on civilians is imminent. Confirmed indicators include specific intelligence, massing of forces, or historical patterns. This single variable can trigger AP I Art. 57 precautionary obligations. Source: ACLED, UN OCHA situational reports.">?</span>
          <select class="src-cred" data-field="imminentAttack"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="imminentAttack" onchange="dirtyFields.add('imminentAttack');calcScore()">
          <option value="none">None</option><option value="suspected">Suspected</option><option value="confirmed">Confirmed</option>
        </select>
      </div>
      <div class="field">
        <label>Retaliation Risk Against Civilians <span class="q" data-tip="Risk that civilians will face targeted retaliation based on ethnicity, religion, or perceived affiliation. High retaliation risk triggers AP I Art. 51 and may constitute a war crime under Rome Statute Art. 8. Source: UN Special Advisers, HRW, OHCHR reports.">?</span>
          <select class="src-cred" data-field="retaliationRisk"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="retaliationRisk" onchange="dirtyFields.add('retaliationRisk');calcScore()">
          <option value="low">Low</option><option value="medium">Medium</option><option value="high">High</option>
        </select>
      </div>
      <div class="field">
        <label>Chemical / Biological Threat <span class="q" data-tip="Presence or suspected use of chemical or biological weapons. Confirmed use triggers absolute prohibition under CWC and customary IHL. Even suspected use sharply raises endangerment due to mass casualty potential. Source: OPCW, UN Secretary-General mechanism.">?</span>
          <select class="src-cred" data-field="chemBioThreat"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="chemBioThreat" onchange="dirtyFields.add('chemBioThreat');calcScore()">
          <option value="no">No</option><option value="suspected">Suspected</option><option value="confirmed">Confirmed</option>
        </select>
      </div>
      <div class="field">
        <label>Conflict Escalation Risk <span class="q" data-tip="Assessment of the likelihood that the conflict will intensify in the near term (days to weeks). Critical escalation risk indicates trajectory toward encirclement or siege. Feeds directly into endangerment trajectory calculation. Source: GCRI, ACLED trend analysis.">?</span>
          <select class="src-cred" data-field="escalationRisk"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="escalationRisk" onchange="dirtyFields.add('escalationRisk');calcScore()">
          <option value="low">Low</option><option value="medium">Medium</option><option value="high">High</option><option value="critical">Critical</option>
        </select>
      </div>
      <div class="field">
        <label>Non-Conflict Life Hazards <span class="q" data-tip="Risk to life from non-combat hazards: flooding, earthquake, industrial accident, epidemic. Compounds endangerment independently of armed threat. Source: GDACS, WHO, OCHA situation reports.">?</span>
          <select class="src-cred" data-field="nonConflictHazard"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="nonConflictHazard" onchange="dirtyFields.add('nonConflictHazard');calcScore()">
          <option value="low">Low</option><option value="medium">Medium</option><option value="high">High</option>
        </select>
      </div>
      <div class="field">
        <label>Food &amp; Water Availability (IPC) <span class="q" data-tip="Food and water access on the IPC scale: 1=Adequate, 2=Stressed, 3=Crisis, 4=Emergency, 5=Famine. IPC 4+ constitutes a humanitarian emergency independently triggering evacuation obligations under GCIV Art. 54. Source: FEWS NET, IPC global platform.">?</span>
          <select class="src-cred" data-field="foodWaterIPC"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <div class="range-row">
          <input type="range" min="1" max="5" value="2" id="foodWaterIPC" oninput="updateRange(this,'rv-ipc');dirtyFields.add('foodWaterIPC');calcScore()">
          <span class="range-val" id="rv-ipc">2</span>
        </div>
      </div>
      <div class="field">
        <label>Energy &amp; Power Availability <span class="q" data-tip="Access to electricity and fuel. None indicates blackout conditions which eliminate medical equipment function, heating in cold climates, communications, and water pumping. Compounds vulnerability particularly for medical-dependent civilians. Source: UNHCR shelter cluster, WHO health cluster.">?</span>
          <select class="src-cred" data-field="energyAvail"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="energyAvail" onchange="dirtyFields.add('energyAvail');calcScore()">
          <option value="full">Full</option><option value="partial">Partial</option><option value="none">None</option>
        </select>
      </div>
    </div>
  </div>

  <!-- SECTION 2: INFRASTRUCTURE & ACCESS -->
  <div class="cat-section" id="sec-infra">
    <div class="cat-header" onclick="toggleCat('infra')">
      <div class="cat-title"><span>Infrastructure &amp; Access &mdash; Dimension 2</span><span class="cat-weight">Dimension 2</span></div>
      <div style="display:flex;align-items:center;gap:8px">
        <span class="cat-score-preview" id="prev-infra">&#8212;</span>
        <span class="cat-arrow open" id="arr-infra">&#9660;</span>
      </div>
    </div>
    <div class="cat-body" id="body-infra">
      <div class="subsection-label">A &mdash; Endangered Zone Conditions</div>
      <div class="field">
        <label>Corridor Status <span class="q" data-tip="Status of evacuation corridors or humanitarian routes out of the endangered zone. Closed corridors constitute a key indicator of encirclement. Contested corridors are subject to attack and do not provide reliable safety. Source: OCHA Access Monitoring and Reporting Framework.">?</span>
          <select class="src-cred" data-field="corridorStatus"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="corridorStatus" onchange="dirtyFields.add('corridorStatus');calcScore()">
          <option value="open">Open</option><option value="contested">Contested</option><option value="closed">Closed</option>
        </select>
      </div>
      <div class="field">
        <label>Armed Group Consent (Zone) <span class="q" data-tip="Whether armed groups controlling the evacuation zone have consented to civilian departure. Denial of consent may constitute a war crime under GCIV Art. 49 if civilians are thereby trapped in danger. Source: ICRC negotiations, OCHA humanitarian access reports.">?</span>
          <select class="src-cred" data-field="agConsentZone"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="agConsentZone" onchange="dirtyFields.add('agConsentZone');calcScore()">
          <option value="yes">Yes</option><option value="unknown">Unknown</option><option value="no">No</option>
        </select>
      </div>
      <div class="field">
        <label>UXO/Mine Load (Zone) <span class="q" data-tip="Contamination of the evacuation zone itself with mines, IEDs or unexploded ordnance. High contamination in the zone makes movement from origin points dangerous before evacuees reach formal routes. Source: HALO Trust, UNMAS, iMMAP data.">?</span>
          <select class="src-cred" data-field="mineLoadZone"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="mineLoadZone" onchange="dirtyFields.add('mineLoadZone');calcScore()">
          <option value="low">Low</option><option value="medium">Medium</option><option value="high">High</option>
        </select>
      </div>
      <div class="field">
        <label>Imminent Attack (Zone) <span class="q" data-tip="Whether an imminent attack on the evacuation zone is indicated. Duplicates the threat section value for zone-specific routing of the feasibility sub-score, since a confirmed attack makes zone exit conditions unfeasible regardless of route quality.">?</span></label>
        <select id="imminentAttackZone" onchange="dirtyFields.add('imminentAttackZone');calcScore()">
          <option value="none">None</option><option value="suspected">Suspected</option><option value="confirmed">Confirmed</option>
        </select>
      </div>

      <div class="subsection-label">B &mdash; Route Conditions</div>
      <div class="field">
        <label>Transport Sufficiency <span class="q" data-tip="Whether sufficient transport assets exist to move the civilian population to safety. Insufficient transport may require multiple trips, extending exposure time. None means civilian self-evacuation on foot is the only option. Source: IOM DTM, UNHCR logistics cluster.">?</span>
          <select class="src-cred" data-field="transportSuff"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="transportSuff" onchange="dirtyFields.add('transportSuff');calcScore()">
          <option value="sufficient">Sufficient</option><option value="partial">Partial</option><option value="none">None</option>
        </select>
      </div>
      <div class="field">
        <label>Distance to Safety (km) <span class="q" data-tip="Distance in km to the nearest location that can be considered safe. Longer distances increase exposure time, fuel requirements, and the probability of breakdown or attack en route. Source: OSM routing, UNOSAT damage mapping.">?</span>
          <select class="src-cred" data-field="distanceSafe"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <input type="number" id="distanceSafe" value="50" min="1" max="2000" oninput="dirtyFields.add('distanceSafe');calcScore()" placeholder="km">
      </div>
      <div class="field">
        <label>Comms Reliability (1-10) <span class="q" data-tip="Reliability of civilian communications (phone, internet, radio) on a 1-10 scale. Poor communications prevent civilians from receiving evacuation warnings and routes, and prevent organisations from coordinating. Source: NetBlocks, Cloudflare Radar, GSMA.">?</span>
          <select class="src-cred" data-field="commReliability"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <div class="range-row">
          <input type="range" min="1" max="10" value="6" id="commReliability" oninput="updateRange(this,'rv-comm');dirtyFields.add('commReliability');calcScore()">
          <span class="range-val" id="rv-comm">6</span>
        </div>
      </div>
      <div class="field">
        <label>Notice Time <span class="q" data-tip="Lead time given to civilians before the evacuation must begin. Hours of notice prevents vulnerable populations from preparing, creating mobility gaps. AP I Art. 57(2)(c) requires effective advance warning to civilians.">?</span>
          <select class="src-cred" data-field="noticeTime"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="noticeTime" onchange="dirtyFields.add('noticeTime');calcScore()">
          <option value="weeks">Weeks</option><option value="days">Days</option><option value="hours">Hours</option>
        </select>
      </div>
      <div class="field">
        <label>UXO/Mine Load (Route) <span class="q" data-tip="Contamination of evacuation routes with mines, IEDs, or unexploded ordnance. High route contamination may make the route impassable for vehicles and deadly for pedestrians. Source: HALO Trust, UNMAS, iMMAP data.">?</span>
          <select class="src-cred" data-field="mineLoad"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="mineLoad" onchange="dirtyFields.add('mineLoad');calcScore()">
          <option value="low">Low</option><option value="medium">Medium</option><option value="high">High</option>
        </select>
      </div>
      <div class="field">
        <label>Weather Conditions <span class="q" data-tip="Prevailing weather along evacuation routes. Adverse weather increases risk of hypothermia, vehicle accidents, and slows movement. In cold climates, adverse winter conditions have directly caused civilian deaths during evacuations (e.g. East Aleppo 2016 at -4C). Source: Open-Meteo API.">?</span>
          <span class="fresh-tag" id="fresh-weather" style="display:none">Live</span>
        </label>
        <select id="weather" onchange="dirtyFields.add('weather');calcScore()">
          <option value="favourable">Favourable</option><option value="neutral">Neutral</option><option value="adverse">Adverse</option>
        </select>
      </div>
      <div class="field">
        <label>Daylight Available <span class="q" data-tip="Available daylight for the evacuation operation. Night-only operations dramatically increase accident risk, reduce civilian willingness to move, and complicate military deconfliction. Some operations require night movement to avoid targeting.">?</span>
          <select class="src-cred" data-field="daylight"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="daylight" onchange="dirtyFields.add('daylight');calcScore()">
          <option value="full">Full Daylight</option><option value="partial">Partial</option><option value="night">Night Only</option>
        </select>
      </div>

      <div class="subsection-label">C &mdash; Protection at Destination</div>
      <div class="field">
        <label>Shelter Availability <span class="q" data-tip="Whether the receiving location has sufficient shelter capacity for the evacuating population. Insufficient shelter creates secondary protection crises, particularly for vulnerable groups. Source: UNHCR shelter cluster, IOM DTM site assessments.">?</span>
          <select class="src-cred" data-field="shelterAvail"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="shelterAvail" onchange="dirtyFields.add('shelterAvail');calcScore()">
          <option value="sufficient">Sufficient</option><option value="partial">Partial</option><option value="none">None</option>
        </select>
      </div>
      <div class="field">
        <label>Medical Capacity (Dest.) <span class="q" data-tip="Medical capacity at the receiving location relative to anticipated needs of the evacuating population. None indicates the receiving location cannot treat casualties, trauma, or chronic conditions. Source: WHO health cluster, MSF assessments.">?</span>
          <select class="src-cred" data-field="medCapacity"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="medCapacity" onchange="dirtyFields.add('medCapacity');calcScore()">
          <option value="sufficient">Sufficient</option><option value="partial">Partial</option><option value="none">None</option>
        </select>
      </div>
      <div class="field">
        <label>Destination Security (1-10) <span class="q" data-tip="Security conditions at the receiving location on a 1-10 scale where 10 is fully secure. Low destination security means evacuees may face renewed danger upon arrival, negating the benefit of evacuation.">?</span>
          <select class="src-cred" data-field="destSecurity"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <div class="range-row">
          <input type="range" min="1" max="10" value="7" id="destSecurity" oninput="updateRange(this,'rv-dsec');dirtyFields.add('destSecurity');calcScore()">
          <span class="range-val" id="rv-dsec">7</span>
        </div>
      </div>
      <div class="field">
        <label>Destination Willingness <span class="q" data-tip="Whether the receiving community or authority is willing to receive evacuees. Refusal of entry constitutes a protection crisis and may violate non-refoulement obligations under the Refugee Convention.">?</span>
          <select class="src-cred" data-field="destWillingness"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="destWillingness" onchange="dirtyFields.add('destWillingness');calcScore()">
          <option value="yes">Yes</option><option value="unknown">Unknown</option><option value="no">No</option>
        </select>
      </div>
      <div class="field">
        <label>Armed Group Consent (Dest.) <span class="q" data-tip="Whether armed groups controlling the receiving area have consented to receiving evacuees. Without consent, evacuees may be stopped, returned, or targeted at checkpoints on arrival.">?</span>
          <select class="src-cred" data-field="agConsentDest"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="agConsentDest" onchange="dirtyFields.add('agConsentDest');calcScore()">
          <option value="yes">Yes</option><option value="unknown">Unknown</option><option value="no">No</option>
        </select>
      </div>
    </div>
  </div>

  <!-- SECTION 3: POLITICAL & LEGAL CONSENT -->
  <div class="cat-section" id="sec-pol">
    <div class="cat-header" onclick="toggleCat('pol')">
      <div class="cat-title"><span>Political &amp; Legal Consent &mdash; Dimension 2</span><span class="cat-weight">Dimension 2</span></div>
      <div style="display:flex;align-items:center;gap:8px">
        <span class="cat-score-preview" id="prev-pol">&#8212;</span>
        <span class="cat-arrow open" id="arr-pol">&#9660;</span>
      </div>
    </div>
    <div class="cat-body" id="body-pol">
      <div class="field">
        <label>Government Consent <span class="q" data-tip="Whether the recognised government or controlling authority has formally consented to the evacuation. Absence of consent does not eliminate IHL obligations but significantly complicates operational planning. Source: diplomatic channels, UN OCHA.">?</span>
          <select class="src-cred" data-field="govConsent"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="govConsent" onchange="dirtyFields.add('govConsent');calcScore()">
          <option value="yes">Yes</option><option value="unknown">Unknown</option><option value="no">No</option>
        </select>
      </div>
      <div class="field">
        <label>Active Ceasefire <span class="q" data-tip="Whether an active and respected ceasefire is in place. Disputed ceasefires are treated as high risk because violations have caused mass casualties in evacuation operations (e.g. East Ghouta 2018, Sumy 2022). Source: ICRC, UN monitoring missions.">?</span>
          <select class="src-cred" data-field="ceasefire"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="ceasefire" onchange="dirtyFields.add('ceasefire');calcScore()">
          <option value="yes">Yes</option><option value="disputed">Disputed</option><option value="no">No</option>
        </select>
      </div>
      <div class="field">
        <label>Forced Transfer Risk <span class="q" data-tip="Risk that the evacuation is or will become a forced transfer or deportation rather than a voluntary protective evacuation. Forced transfer is a grave breach under GCIV Art. 147 and a war crime under Rome Statute Art. 8(2)(a)(vii). Source: HRW, OHCHR, UN SR reports.">?</span>
          <select class="src-cred" data-field="forcedTransfer"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="forcedTransfer" onchange="dirtyFields.add('forcedTransfer');calcScore()">
          <option value="low">Low</option><option value="medium">Medium</option><option value="high">High</option>
        </select>
      </div>
      <div class="field">
        <label>UN/UNSC Authorisation <span class="q" data-tip="Whether the evacuation has UN Security Council authorisation or a relevant UN resolution. Not required for voluntary protective evacuations but strengthens legal basis and may enable peacekeeping escort. N/A is the most common status. Source: UN OCHA, Security Council resolutions.">?</span>
          <select class="src-cred" data-field="unAuth"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="unAuth" onchange="dirtyFields.add('unAuth');calcScore()">
          <option value="yes">Yes</option><option value="na">N/A</option><option value="no">No</option>
        </select>
      </div>
    </div>
  </div>

  <!-- SECTION 4: CIVILIAN POPULATION -->
  <div class="cat-section" id="sec-pop">
    <div class="cat-header" onclick="toggleCat('pop')">
      <div class="cat-title"><span>Civilian Population</span><span class="cat-weight">Dim. 1 + 3</span></div>
      <div style="display:flex;align-items:center;gap:8px">
        <span class="cat-score-preview" id="prev-pop">&#8212;</span>
        <span class="cat-arrow open" id="arr-pop">&#9660;</span>
      </div>
    </div>
    <div class="cat-body" id="body-pop">
      <div class="field">
        <label>Total Civilian Population <span class="q" data-tip="Total civilian population in the affected area. Used to calculate financial feasibility filter and scale operational estimates. Does not directly affect endangerment or feasibility scores but is used in the export report and operational briefing.">?</span>
          <select class="src-cred" data-field="totalPop"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <input type="number" id="totalPop" value="10000" min="1" oninput="dirtyFields.add('totalPop');calcScore()" placeholder="e.g. 50000">
      </div>
      <div class="field">
        <label>Vulnerable Populations (%) <span class="q" data-tip="Percentage of the population with heightened vulnerability: elderly, disabled, critically ill, unaccompanied minors, pregnant women. Higher percentages require more resources per capita and slower movement. Protected under GCIV Art. 16 and AP I Arts. 77-78.">?</span>
          <select class="src-cred" data-field="vulnerablePct"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <div class="range-row">
          <input type="range" min="0" max="100" value="30" id="vulnerablePct" oninput="updateRange(this,'rv-vuln');dirtyFields.add('vulnerablePct');calcScore()">
          <span class="range-val" id="rv-vuln">30%</span>
        </div>
      </div>
      <div class="field">
        <label>Willing to Evacuate (%) <span class="q" data-tip="Percentage of the population willing to evacuate if an organised evacuation were offered. High willingness in a dangerous context is an indicator that civilians themselves perceive high risk. Low willingness may indicate distrust, attachment to property, or contested consent.">?</span>
          <select class="src-cred" data-field="willingEvac"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <div class="range-row">
          <input type="range" min="0" max="100" value="50" id="willingEvac" oninput="updateRange(this,'rv-will');dirtyFields.add('willingEvac');calcScore()">
          <span class="range-val" id="rv-will">50%</span>
        </div>
      </div>
      <div class="field">
        <label>Documentation Issues (%) <span class="q" data-tip="Percentage of the population lacking adequate identity documents (no ID, stateless, contested nationality). High documentation issues slow or block passage through checkpoints, increasing exposure time and risk of detention. Source: UNHCR protection monitoring.">?</span>
          <select class="src-cred" data-field="docIssues"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <div class="range-row">
          <input type="range" min="0" max="100" value="20" id="docIssues" oninput="updateRange(this,'rv-doc');dirtyFields.add('docIssues');calcScore()">
          <span class="range-val" id="rv-doc">20%</span>
        </div>
      </div>
    </div>
  </div>

  <!-- SECTION 5: VULNERABILITY PROFILE -->
  <div class="cat-section" id="sec-vuln">
    <div class="cat-header" onclick="toggleCat('vuln')">
      <div class="cat-title"><span>Vulnerability Profile &mdash; Dimension 3</span><span class="cat-weight">Dimension 3</span></div>
      <div style="display:flex;align-items:center;gap:8px">
        <span class="cat-score-preview" id="prev-vuln">&#8212;</span>
        <span class="cat-arrow open" id="arr-vuln">&#9660;</span>
      </div>
    </div>
    <div class="cat-body" id="body-vuln">
      <div class="field">
        <label>Children Under 12 (%) <span class="q" data-tip="Percentage of the population aged under 12 years. Children require specific protection under AP I Art. 77-78 and GCIV Art. 24. High child populations increase the vulnerability multiplier, amplifying both endangerment and feasibility scores.">?</span>
          <select class="src-cred" data-field="childrenPct"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <div class="range-row">
          <input type="range" min="0" max="100" value="25" id="childrenPct" oninput="updateRange(this,'rv-child');dirtyFields.add('childrenPct');calcScore()">
          <span class="range-val" id="rv-child">25%</span>
        </div>
      </div>
      <div class="field">
        <label>Elderly Over 65 (%) <span class="q" data-tip="Percentage of the population aged over 65 years. Elderly populations have reduced mobility, higher medical needs, and greater reluctance to leave. High elderly proportions increase the vulnerability multiplier.">?</span>
          <select class="src-cred" data-field="elderlyPct"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <div class="range-row">
          <input type="range" min="0" max="100" value="15" id="elderlyPct" oninput="updateRange(this,'rv-elderly');dirtyFields.add('elderlyPct');calcScore()">
          <span class="range-val" id="rv-elderly">15%</span>
        </div>
      </div>
      <div class="field">
        <label>GBV Risk <span class="q" data-tip="Gender-based violence risk during evacuation. High GBV risk increases vulnerability particularly for women and girls at checkpoints and in transit. Must be considered in corridor design and escort arrangements. Source: UN Women, UNFPA protection monitoring.">?</span>
          <select class="src-cred" data-field="gbvRisk"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="gbvRisk" onchange="dirtyFields.add('gbvRisk');calcScore()">
          <option value="low">Low</option><option value="medium">Medium</option><option value="high">High</option>
        </select>
      </div>
      <div class="field">
        <label>Prior Evacuation Experience <span class="q" data-tip="Whether the population has prior experience with organised evacuations. Experienced populations understand procedures, trust organisations, and move more efficiently. None increases vulnerability multiplier because first-time evacuees face higher risks of error and panic.">?</span>
          <select class="src-cred" data-field="priorEvacExp"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="priorEvacExp" onchange="dirtyFields.add('priorEvacExp');calcScore()">
          <option value="none">None</option><option value="some">Some</option><option value="experienced">Experienced</option>
        </select>
      </div>
      <div class="field full">
        <label>Financial Resources &amp; Mobility <span class="q" data-tip="Financial capacity of the civilian population to self-evacuate if organised evacuation fails. Very limited resources mean civilians cannot pay for private transport, fuel, accommodation, or bribes at checkpoints. Intersects strongly with vulnerability and documentation issues.">?</span>
          <select class="src-cred" data-field="financialResources"><option value="0.9" selected>NGO Field Report</option><option value="0.7">Unverified/Unknown Source</option><option value="0.8">Media Report</option><option value="1.0">UN Verified</option><option value="1.0">ICRC Verified</option><option value="0.85">Government Official (treat with caution)</option></select>
        </label>
        <select id="financialResources" onchange="dirtyFields.add('financialResources');calcScore()">
          <option value="very-limited">Very Limited</option><option value="limited">Limited</option><option value="moderate">Moderate</option><option value="sufficient">Sufficient</option>
        </select>
      </div>
    </div>
  </div>