Repository navigation
Expand file tree
/
Copy pathcomplementtdm.html
More file actions
7202 lines (6880 loc) · 417 KB
/
Copy pathcomplementtdm.html
File metadata and controls
7202 lines (6880 loc) · 417 KB
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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>mAb TDM (Eculizumab · Ravulizumab · Crovalimab)</title>
<!-- Built single-file artifact: complementtdm.html (build: 2026-09-30 19:58 UTC) -->
<style>
/* app.css (inlined) */
/* mAb TDM app styles */
:root {
--bg: #eef2f6;
--card: #ffffff;
--ink: #0f172a;
--muted: #64748b;
--line: #e2e8f0;
--accent: #0e7490;
--accent-dark: #155e75;
--ok: #16a34a;
--warn: #d97706;
--bad: #dc2626;
--radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--ink);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
line-height: 1.45;
}
header.app {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 10px 18px;
background: linear-gradient(90deg, #0c4a6e, #0e7490);
color: #f0f9ff;
flex-wrap: wrap;
}
header.app h1 { font-size: 17px; margin: 0; font-weight: 650; letter-spacing: .2px; }
header.app h1 .appver { font-size: 11.5px; font-weight: 400; color: #bae6fd; margin-left: 5px; }
header.app .sub { font-size: 12px; color: #bae6fd; }
header.app .actions { display: flex; gap: 8px; }
main.layout {
display: flex;
flex-direction: column;
gap: 14px;
padding: 14px 18px;
max-width: 1180px;
margin: 0 auto;
}
/* v0.11.0 — numbered workflow sections: 1 drug+patient, 2 data, 3 results */
.stepnum {
display: inline-flex; align-items: center; justify-content: center;
width: 19px; height: 19px; border-radius: 999px;
background: var(--accent); color: #fff;
font-size: 11.5px; font-weight: 700; margin-right: 7px;
vertical-align: 1px;
}
.card h2.sub-h { margin-top: 16px; }
/* session bar: the drug + key patient fields in one compact row */
.sess-row {
display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
}
.sess-field { flex: 1 1 128px; min-width: 118px; }
.sess-field.sess-drug { flex: 1.4 1 170px; }
.sess-field label.f, .sess-field .lbl-help { margin-top: 0; }
.sess-hint {
flex: 1.6 1 200px; font-size: 11.5px; color: var(--muted);
padding-bottom: 7px; min-height: 30px;
}
#drugHint { font-size: 11.5px; color: var(--muted); }
#morePatient { margin-top: 10px; }
#morePatient summary { font-weight: 500; }
/* v0.12.0 — folded trough target: the active value stays readable in the
summary; changing it requires an explicit open (prevents accidental edits) */
details.sess-fold {
border: 1px solid var(--line); border-radius: 8px; background: #f8fafc;
padding: 4px 10px;
}
details.sess-fold > summary {
cursor: pointer; font-size: 12.5px; font-weight: 650; color: #334155;
display: flex; align-items: center; gap: 7px; list-style: none; padding: 2px 0;
}
details.sess-fold > summary::-webkit-details-marker { display: none; }
details.sess-fold > summary::before { content: '\25B8'; color: var(--muted); font-size: 11px; }
details.sess-fold[open] > summary::before { content: '\25BE'; }
details.sess-fold .fold-lbl { color: var(--muted); font-weight: 600; }
details.sess-fold .fold-val { font-variant-numeric: tabular-nums; }
details.sess-fold .fold-edit { margin-left: auto; font-size: 11px; color: var(--accent); font-weight: 500; }
details.sess-fold[open] .fold-edit { visibility: hidden; }
details.sess-fold[open] { padding-bottom: 10px; }
/* v0.12.0 — log-scale toggle above the forecast chart */
.chart-head { display: flex; justify-content: flex-end; margin: 0 0 2px; }
.chart-log { margin: 0; font-size: 12px; color: var(--muted); }
.chart-log input { cursor: pointer; }
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
padding: 14px;
}
.card h2 {
font-size: 12.5px; text-transform: uppercase; letter-spacing: .8px;
color: var(--muted); margin: 0 0 10px;
}
.card h2 .hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
/* forms */
label.f { display: block; margin: 8px 0 3px; font-size: 12.5px; color: #334155; font-weight: 600; }
input[type="text"], input[type="number"], input[type="datetime-local"], input[type="date"], select {
width: 100%; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 7px;
font-size: 13.5px; background: #fff; color: var(--ink);
}
input:focus, select:focus { outline: 2px solid #67e8f9; border-color: var(--accent); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.check { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 13px; color: #334155; }
.check input { width: auto; }
button {
font: inherit; cursor: pointer; border-radius: 7px; border: 1px solid transparent;
padding: 7px 12px; background: #f1f5f9; color: var(--ink); font-weight: 600;
}
button:hover { background: #e2e8f0; }
button.primary { background: var(--accent); color: #fff; }
button.primary:hover { background: var(--accent-dark); }
button.small { padding: 3px 9px; font-size: 12px; font-weight: 500; }
button.linklike { background: none; border: none; color: var(--accent); text-decoration: underline; padding: 0; font-weight: 500; }
button:disabled { opacity: .5; cursor: default; }
/* A disabled advanced-fitting select must read as deliberately unavailable
rather than broken; the hint line beside it says why (v0.20.0). */
select:disabled { opacity: .55; cursor: not-allowed; background: #f1f5f9; }
.actions-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* tables */
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px;
color: var(--muted); padding: 5px 7px; border-bottom: 1.5px solid var(--line);
}
table.data td { padding: 5px 7px; border-bottom: 1px solid #f1f5f9; }
table.data tr.past td { color: #94a3b8; }
table.data td.num, table.data th.num { text-align: right; }
.tbl-wrap { overflow-x: auto; }
.badge {
display: inline-block; padding: 1.5px 8px; border-radius: 999px;
font-size: 11.5px; font-weight: 600;
}
.badge.ok { background: #dcfce7; color: #166534; }
/* v0.10.0 — fit diagnostics (GOF + EBE forest) */
.diag-open { font-size: 13px; padding: 5px 0; display: inline-block; }
.diag-hint { font-weight: 600; }
.diag-hint.ok { color: #15803d; }
.diag-hint.warn { color: #b45309; }
.diag-hint.bad { color: #b91c1c; }
.diag-h { margin: 10px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.diag-chart { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; background: #fbfdfe; }
.diag-res { margin-top: 10px; }
.res-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; margin-right: 6px; vertical-align: baseline; }
.res-dot.ok { background: #16a34a; }
.res-dot.warn { background: #d97706; }
.res-dot.bad { background: #dc2626; }
.res-row.hl { background: #ecfeff; }
.sk-bad { color: #b91c1c; }
.legend-note .sk-ok { color: #15803d; }
.legend-note .sk-warn { color: #b45309; }
.legend-note .sk-bad { color: #b91c1c; }
/* EBE forest rows */
.ebe-rows { padding: 4px 0; }
.ebe-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.ebe-name { flex: 0 0 88px; font-size: 12.5px; color: var(--ink); font-weight: 600; }
.ebe-track { flex: 1 1 auto; position: relative; height: 16px; background: #f1f5f9; border-radius: 4px; }
.ebe-zero { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: #94a3b8; border-radius: 1px; }
.ebe-bar { position: absolute; top: 4px; height: 8px; border-radius: 4px; }
.ebe-bar.ok { background: #86efac; }
.ebe-bar.warn { background: #fcd34d; }
.ebe-bar.bad { background: #fca5a5; }
.ebe-med { position: absolute; top: 1px; bottom: 1px; width: 3px; margin-left: -1.5px; border-radius: 1.5px; }
.ebe-med.ok { background: #15803d; }
.ebe-med.warn { background: #b45309; }
.ebe-med.bad { background: #b91c1c; }
.ebe-val { flex: 0 0 150px; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.ebe-val i { font-style: normal; font-weight: 400; color: #94a3b8; }
.ebe-val.ok { color: #15803d; }
.ebe-val.warn { color: #b45309; }
.ebe-val.bad { color: #b91c1c; }
/* v0.9.2 — shrinkage visual: compact per-eta informativeness bars */
.shrink-bars { margin: 6px 0 2px; padding: 8px 10px 7px; background: #f8fafc;
border: 1px solid var(--line); border-radius: var(--radius); }
.shrink-row { display: flex; align-items: center; gap: 8px; padding: 1.5px 0; }
.shrink-name { flex: 0 0 74px; font-size: 11.5px; color: var(--muted);
font-variant-numeric: tabular-nums; }
.shrink-track { flex: 1 1 auto; height: 7px; background: #e2e8f0;
border-radius: 4px; overflow: hidden; }
.shrink-fill { display: block; height: 100%; border-radius: 4px; }
.shrink-fill.ok { background: #16a34a; }
.shrink-fill.warn { background: #d97706; }
.shrink-fill.weak { background: #cbd5e1; }
.shrink-pct { flex: 0 0 40px; text-align: right; font-size: 11px;
font-weight: 650; font-variant-numeric: tabular-nums; }
.shrink-pct.ok { color: #15803d; }
.shrink-pct.warn { color: #b45309; }
.shrink-pct.weak { color: #94a3b8; }
.shrink-key { margin-top: 5px; font-size: 10.5px; color: #94a3b8; }
.shrink-key .sk-ok { color: #15803d; }
.shrink-key .sk-warn { color: #b45309; }
.shrink-key .sk-weak { color: #94a3b8; }
.badge.warn { background: #fef3c7; color: #92400e; }
.badge.bad { background: #fee2e2; color: #991b1b; }
.badge.info { background: #e0f2fe; color: #075985; }
.note {
background: #f8fafc; border: 1px solid var(--line); border-left: 3px solid var(--accent);
border-radius: 8px; padding: 8px 11px; font-size: 12.5px; color: #334155; margin-top: 10px;
}
.note.warn { border-left-color: var(--warn); background: #fffbeb; }
.note.bad { border-left-color: var(--bad); background: #fef2f2; }
#chartBox { position: relative; }
.legend-note { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.progress-wrap { margin: 10px 0 2px; display: none; }
.progress-wrap .bar { height: 7px; border-radius: 4px; background: #e2e8f0; overflow: hidden; }
.progress-wrap .bar > div { height: 100%; width: 0; background: var(--accent); transition: width .15s; }
.progress-wrap .msg { font-size: 12px; color: var(--muted); margin-top: 3px; }
.unit { text-transform: none; } /* uppercase headers turned µg/mL into ΜG/ML */
.plan-block { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--line); }
.plan-block .plan-title { font-size: 12.5px; color: #334155; font-weight: 600; }
.stale-banner {
display: none; margin: 0 0 10px; padding: 7px 11px; border-radius: 8px;
background: #fef3c7; color: #92400e; font-size: 12.5px; font-weight: 600;
}
.seg {
display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px;
background: #f1f5f9; border: 1px solid var(--line); border-radius: 9px; padding: 4px;
}
.seg-opt {
flex: 1; display: flex; align-items: center; gap: 7px; justify-content: center;
padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px;
color: #334155; background: transparent; user-select: none;
}
.seg-opt:has(input:checked) { background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.12); font-weight: 650; }
.seg-opt input { margin: 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 13px; }
.kv .k { color: var(--muted); }
.kv .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.result-meta { font-size: 12px; color: var(--muted); margin: 2px 0 10px; }
/* footer: short identity line on screen; full disclaimer prints with the report */
footer.app { padding: 4px 18px 14px; max-width: 1180px; margin: 0 auto; font-size: 11.5px; color: var(--muted); }
footer.app .disclaimer {
background: #f8fafc; border: 1px solid var(--line); border-radius: 8px;
padding: 8px 12px; margin-bottom: 8px;
}
footer.app .credit { font-size: 12.5px; color: #334155; margin-bottom: 8px; }
footer.app .credit a { color: #0e7490; text-decoration: none; }
footer.app .credit a:hover { text-decoration: underline; }
.advisory { margin-top: 6px; font-size: 12.5px; }
/* About modal */
[hidden] { display: none !important; }
.modal-backdrop {
position: fixed; inset: 0; z-index: 100;
background: rgba(15, 23, 42, .45);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.modal {
background: #fff; border: 1px solid var(--line); border-radius: 12px;
box-shadow: 0 12px 32px rgba(15, 23, 42, .22);
max-width: 640px; max-height: 82vh; overflow-y: auto;
padding: 16px 20px; position: relative;
}
.modal.modal-wide { max-width: 700px; }
.modal h2 { margin: 0 0 10px; font-size: 16px; color: var(--ink); }
.modal h3 { margin: 14px 0 4px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.modal p { font-size: 12.5px; color: #334155; margin: 6px 0; line-height: 1.5; }
.modal .src { font-size: 11.8px; color: var(--muted); }
.modal .src a { color: #0e7490; word-break: break-all; }
.modal .src a:hover { text-decoration: underline; }
.modal .about-model {
border: 1px solid var(--line); border-radius: 8px;
padding: 8px 12px; margin: 8px 0;
}
.modal .about-model b { color: var(--ink); }
.modal .about-photo {
display: flex; align-items: center; gap: 10px;
margin: 14px 0 2px; padding-top: 10px; border-top: 1px solid var(--line);
}
.modal .about-photo img { width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; }
.modal .about-photo span { font-size: 11.8px; color: var(--muted); line-height: 1.4; }
.modal-close {
position: absolute; top: 8px; right: 10px;
background: none; border: none; font-size: 20px; line-height: 1;
color: var(--muted); cursor: pointer; padding: 0 6px;
}
.modal-close:hover { color: var(--ink); }
/* prevent grid blow-out on narrow screens */
main.layout, main.layout > .card, table.data, input, select, .actions-inline, .row2 > div, .row3 > div { min-width: 0; }
details.help { margin: 8px 0; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px; padding: 6px 11px; }
details.help summary { cursor: pointer; font-size: 12.5px; font-weight: 650; color: #0c4a6e; }
details.help ul { margin: 7px 0 4px 18px; padding: 0; font-size: 12.5px; color: #334155; }
details.help li { margin: 4px 0; }
/* ---- novice usability (v0.8.0) ------------------------------------------ */
/* P1: four-step guide under the header */
.stepper {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
padding: 7px 18px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px;
font-size: 12.5px; color: #78350f;
}
.stepper.hidden { display: none; }
.stepper .step { display: flex; align-items: center; gap: 6px; opacity: .55; }
.stepper .step i {
font-style: normal; width: 17px; height: 17px; border-radius: 999px;
background: #f3f4f6; color: #78350f; border: 1px solid #fcd34d;
display: inline-flex; align-items: center; justify-content: center;
font-size: 10.5px; font-weight: 700;
}
.stepper .step.active { opacity: 1; font-weight: 650; }
.stepper .step.active i { background: #0e7490; border-color: #0e7490; color: #fff; }
.stepper .step.done { opacity: 1; }
.stepper .step.done i { background: #16a34a; border-color: #16a34a; color: #fff; }
.stepper .step.done { text-decoration: line-through; text-decoration-color: #a8a29e; }
.stepper .linklike { margin-left: auto; color: #92400e; font-size: 12px; }
/* P1/P5: run hint under the Run button (reason while not ready, expectation
line once ready) */
.run-hint { display: none; font-size: 12px; color: var(--muted); margin-top: 6px; }
.run-hint.show { display: block; }
.run-hint.show:not(.ready) { color: #92400e; font-weight: 600; }
/* P2: ⓘ help buttons + shared popover (tap/click/keyboard; native titles
remain for mouse hover) */
button.info {
width: 16px; height: 16px; padding: 0; margin: 0 0 0 2px;
border: 1px solid #7dd3fc; border-radius: 999px; background: #f0f9ff;
color: #0369a1; font-size: 10px; line-height: 1; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
vertical-align: middle;
}
button.info:hover { background: #e0f2fe; }
button.info:focus-visible { outline: 2px solid #0369a1; outline-offset: 1px; }
/* P2: label + ⓘ pairs (the button must NOT sit inside the label — clicking
the label text focuses the input, the ⓘ is a sibling control) */
.lbl-help { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.lbl-help label.f { margin-right: auto; }
#helpPop {
position: absolute; z-index: 120; display: none;
max-width: 260px; padding: 8px 11px; border-radius: 8px;
background: #0f172a; color: #f1f5f9; font-size: 12px; line-height: 1.45;
box-shadow: 0 6px 18px rgba(15, 23, 42, .3);
}
#helpPop.show { display: block; }
/* P4: undo toast (replaces the native confirm() dialog) */
.toast {
position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(8px);
z-index: 130; display: none;
background: #0f172a; color: #f1f5f9; padding: 9px 14px; border-radius: 9px;
font-size: 12.5px; box-shadow: 0 8px 22px rgba(15, 23, 42, .35);
opacity: 0; transition: opacity .18s, transform .18s;
}
.toast.show { display: block; opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .linklike { color: #7dd3fc; margin-left: 8px; }
/* P-badge is click-tappable too (opens the probability popover) */
.badge[data-help] { cursor: help; }
/* =========================================================================
* RESPONSIVE (v0.17.0) — two tiers, consolidated to one block each. Plain
* CSS custom properties can't be read inside an @media condition and this
* project has no build-time constant substitution (build.mjs just
* concatenates files), so "one number, many places" means one documented
* pair of literal breakpoints instead of a variable:
*
* 700px "compact" — light touch. Currently: form rows that pair a date
* with a number stack instead of forcing two columns
* that would otherwise get uncomfortably narrow.
* 560px "phone" — where the real restructuring happens: two-column
* grids collapse to one, row-wise comparison tables
* (trough table, regimen explorer) become stacked
* cards instead of scrolling sideways, the header's
* four action buttons become a 2x2 grid instead of an
* unpredictable wrap, and a few controls under a
* comfortable touch-target size get more tap area.
* (The SVG charts are handled separately, in
* src/chart.js + src/ui.js — they measure their own
* container's pixel width at render time rather than
* reading this breakpoint, since a chart's actual
* available width is its card's width minus padding,
* not the raw viewport width a CSS media query sees.)
* ========================================================================= */
@media (max-width: 700px) {
.sess-row { flex-direction: column; align-items: stretch; }
/* v0.46.0: in a column the flex-basis (128px / 170px) becomes a HEIGHT -- the 32px
* trough-target fold sat in a 128px box, ~400px of blank space on a phone. */
.sess-field, .sess-field.sess-drug { flex: 0 0 auto; }
.sess-hint { padding-bottom: 0; min-height: 0; }
.iv-controls input[type="number"] { width: 84px; }
}
@media (max-width: 560px) {
.row2, .row3 { grid-template-columns: 1fr; }
header.app, main.layout { padding-left: 10px; padding-right: 10px; }
.stepper { gap: 10px; padding: 6px 10px; }
/* Header: keep all four actions (About/Print/Export/Import) rather than
* collapsing to a menu — this is a clinical tool used a handful of times
* per session, and hiding "Print report" behind a hamburger tap, or
* risking a mistapped icon on export/import of patient data, costs more
* than a two-row button grid does. */
header.app .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
header.app .actions button { width: 100%; }
header.app h1 .appver { display: none; }
/* Row-wise comparison tables (trough table, regimen explorer): scrolling
* sideways to see a probability next to the dose it belongs to is worse
* than restyling to a card per row. The <table>/<tr>/<td> markup is
* unchanged (print, and any table without this class, is unaffected) —
* only the display type changes, driven by the data-label attribute
* already written onto each <td> at render time. */
table.data.responsive-cards thead { display: none; }
table.data.responsive-cards tbody tr {
display: block; border: 1px solid var(--line); border-radius: 8px;
padding: 8px 10px; margin-bottom: 8px;
}
table.data.responsive-cards tbody tr.iv-current { border-color: #b45309; }
table.data.responsive-cards tbody td {
display: flex; justify-content: space-between; align-items: baseline;
gap: 10px; padding: 4px 0; border-bottom: 1px solid #f1f5f9; text-align: right;
}
table.data.responsive-cards tbody td:last-child { border-bottom: none; }
table.data.responsive-cards tbody td::before {
content: attr(data-label); font-weight: 600; color: #475569;
text-align: left; flex-shrink: 0;
}
/* Touch targets measured under a comfortable tap size: padding added
* (not a visual resize) so the ⓘ popover buttons, modal close button and
* the stepper's "dismiss" link are easier to hit without a mouse. */
/* button.info is a fixed 16x16px box with box-sizing:border-box, so
* padding alone shrinks its glyph rather than growing the tap target —
* the dimensions themselves need to grow. */
button.info { width: 30px; height: 30px; font-size: 13px; margin: -7px 0 -7px 2px; }
.modal-close { padding: 10px 14px; top: 2px; right: 2px; }
.stepper .linklike { padding: 6px 4px; }
}
/* print: the app UI is replaced by the generated report sheet
(#reportSheet plus the print-only disclaimer footer) */
@media print {
body { background: #fff; font-size: 12px; }
.modal-backdrop { display: none !important; }
header.app, main.layout, form.inline, button { display: none !important; }
/* ephemeral UI layers live outside header/main — hide them explicitly */
#stepper, #helpPop, .toast, .run-hint { display: none !important; }
#reportSheet { display: block !important; }
#reportSheet .rp-chart svg { max-width: 100%; height: auto; }
.rp-table, .rp-kv { break-inside: avoid; }
.shrink-bars { background: #fff; border: 1px solid #e2e8f0; break-inside: avoid; }
.shrink-fill.ok { background: #15803d; }
.shrink-fill.warn { background: #b45309; }
.rp-shrink-h { font-size: 10.5px; color: #64748b; margin-bottom: 4px; }
.rp-shrink .shrink-track { background: #f1f5f9; }
/* v0.10.0 diagnostics print rules */
.rp-diag { break-inside: avoid; }
.rp-diag .diag-chart { border: 1px solid #e2e8f0; background: #fff; }
.rp-diag .res-row.hl { background: transparent; }
.rp-diag .ebe-track { background: #f1f5f9; }
.rp-diag .diag-h { color: #64748b; }
footer.app { display: block; font-size: 10px; padding: 4px 8px; }
footer.app .disclaimer { margin-bottom: 8px; }
}
/* report sheet (hidden on screen; printed via the rules above) */
#reportSheet { display: none; padding: 8px 4px; color: #0f172a; font-size: 12px; }
#reportSheet[hidden] { display: none !important; }
#reportSheet .rp-head { border-bottom: 2px solid #0e7490; padding-bottom: 6px; margin-bottom: 10px; }
#reportSheet .rp-title { font-size: 16px; font-weight: 700; color: #0f172a; }
#reportSheet .rp-sub { font-size: 10.5px; color: #64748b; margin-top: 2px; }
#reportSheet .rp-h { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #64748b; margin: 12px 0 4px; }
#reportSheet table { border-collapse: collapse; width: 100%; }
#reportSheet .rp-table th, #reportSheet .rp-table td,
#reportSheet .rp-kv td { border: 1px solid #e2e8f0; padding: 3px 7px; text-align: left; vertical-align: top; }
#reportSheet .rp-table th { background: #f1f5f9; font-weight: 650; }
#reportSheet .rp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
#reportSheet .rp-kv td:first-child { width: 34%; color: #64748b; }
#reportSheet .rp-note { font-size: 11px; color: #475569; margin: 4px 0; }
#reportSheet .rp-legend { font-size: 10.5px; color: #64748b; margin: 3px 0 6px; }
#reportSheet .rp-chart { border: 1px solid #e2e8f0; border-radius: 6px; padding: 4px; break-inside: avoid; }
#reportSheet .rp-findings { margin: 4px 0 8px 18px; padding: 0; }
#reportSheet .rp-findings li { margin: 3px 0; }
#reportSheet .rp-advice {
border: 1.5px solid #0e7490; border-radius: 8px; background: #f0f9ff;
padding: 8px 12px; min-height: 34px; white-space: normal; break-inside: avoid;
}
#reportSheet .rp-sign { margin-top: 14px; width: 100%; }
#reportSheet .rp-sign td { width: 50%; padding: 0 14px 0 0; vertical-align: bottom; border: none; }
#reportSheet .rp-sig-role { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: #64748b; }
#reportSheet .rp-sig-name { font-size: 12.5px; font-weight: 650; min-height: 16px; }
#reportSheet .rp-sig-line { border-bottom: 1px solid #0f172a; height: 34px; }
#reportSheet .rp-sig-cap { font-size: 10px; color: #64748b; margin-top: 2px; }
/* ======================================================================
* v0.13.0 — accessibility, autosave recovery, excluded samples, assumed
* troughs, and print fidelity for the diagnostics graphics.
* ====================================================================== */
/* The 5-95% interval used to be #94a3b8 on white = 2.56:1, failing WCAG AA,
* next to a full-contrast median — the typography said the median was the
* answer and the uncertainty a footnote. #475569 is 7.4:1. */
.ci-range { color: #475569; font-weight: 400; }
.empty-cell { color: #475569; padding: 8px 4px; }
table.data tr.past td { color: #52606d; }
.shrink-pct.weak, .shrink-key, .shrink-key .sk-weak { color: #52606d; }
.ebe-val i { color: #52606d; }
/* Samples kept on record but excluded from the likelihood */
table.data tr.obs-ex td { opacity: .62; }
table.data tr.obs-ex td b { text-decoration: line-through; }
.obs-note {
width: 100%; font-size: 12px; padding: 3px 6px;
border: 1px solid #cbd5e1; border-radius: 4px; background: #fffdf5;
}
/* A trough the app projected rather than one the clinician scheduled */
.tag-assumed {
display: inline-block; font-size: 10px; letter-spacing: .04em;
text-transform: uppercase; padding: 1px 5px; margin-left: 4px;
border: 1px solid #b45309; color: #b45309; border-radius: 3px; white-space: nowrap;
}
table.data tr.assumed td { background: #fffbeb; }
.rp-assumed td { background: #fffbeb !important; }
.rp-src { font-size: 10.5px; color: #52606d; }
/* Autosave recovery bar */
.restore-bar {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
padding: 9px 14px;
border: 1px solid #f59e0b; background: #fffbeb; border-radius: 6px; font-size: 13px;
}
.restore-bar .restore-actions { margin-left: auto; display: flex; gap: 8px; }
@media print {
/* The shrinkage tracks, EBE bars and residual dots are CSS background
* colours, so a default print (background graphics off) rendered them blank
* — while README promised they appear in the report. */
.shrink-fill, .shrink-track, .ebe-bar, .ebe-med, .ebe-zero, .res-dot,
.rp-assumed td, .badge, .iv-table tr.iv-current td {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.restore-bar { display: none !important; }
.iv-table { break-inside: avoid; }
}
/* ---- regimen explorer (v0.13.0 / v0.14.0) ---- */
.iv-controls {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px;
}
.iv-controls label.f { margin: 0; }
.iv-controls input[type="number"] { width: 110px; }
.iv-controls select { padding: 5px 8px; }
.iv-chart { margin: 6px 0 12px; }
.iv-table { margin-top: 6px; }
.iv-table tr.iv-current td { background: #fffbeb; }
.tag-current {
display: inline-block; font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
padding: 1px 5px; margin-left: 4px; border: 1px solid #b45309; color: #b45309;
border-radius: 3px; white-space: nowrap;
}
</style>
</head>
<body>
<header class="app no-print">
<div>
<h1>Therapeutic drug monitoring (eculizumab · ravulizumab · crovalimab) <span class="appver" id="titleVersion" title="Application version"></span></h1>
<div class="sub">Model-informed precision dosing of therapeutic monoclonal antibodies for complement-mediated diseases. Privacy note: this app runs locally on your computer after downloading the webpage. No data are stored or processed online. All calculations are performed locally on the device you are using this website on.</div>
</div>
<div class="actions">
<button id="btnGettingStarted" title="A short, step-by-step walkthrough for first-time use, opened in its own window">Getting started</button>
<button id="btnAbout" title="Version, model documentation, contact and research-use disclaimer">About</button>
<button id="btnPrint" class="primary" title="Generate an A4 report of this patient, dosing schedule, forecast and advice, with prepared-by and signature lines">Print report</button>
<button id="btnExport" title="Download this session as a JSON file (pseudonym only, no identifiers required)">Export session</button>
<button id="btnImport" title="Restore a previously exported session">Import session</button>
<input type="file" id="importFile" accept=".json" style="display:none">
</div>
</header>
<main class="layout">
<!-- Autosave recovery: offered, never applied silently. Lives inside
main.layout (not before it) so it gets the exact same width/centering
as the cards below via the same flex-stretch behaviour — it used to
sit outside <main> with its own independently-tuned max-width, which
only approximately matched the cards' actual box at any given
viewport width instead of matching it exactly. -->
<div class="restore-bar no-print" id="restoreBar" role="status" hidden>
<span id="restoreText"></span>
<span class="restore-actions">
<button class="primary" id="restoreYes" title="Load the autosaved doses and measurements back into the form">Restore</button>
<button id="restoreNo" title="Discard the autosaved session and start empty">Discard</button>
</span>
</div>
<!-- Novice stepper: guides the first case; each dot fills as the step is
done. Numbers match the numbered cards below (1 Drug & patient, 2
Dosing schedule & measured concentrations, 3 Forecast, 4 Regimen
explorer) — step 4 becomes reachable once a forecast exists, since
the explorer reuses that fit's own fitted parameters. Also moved
inside main.layout for the same width-matching reason as the
restore bar above. -->
<div class="stepper no-print" id="stepper">
<span class="step" data-step="wt"><i>1</i> Drug & weight</span>
<span class="step" data-step="dose"><i>2</i> Add doses & samples</span>
<span class="step" data-step="run"><i>3</i> Run forecast</span>
<span class="step" data-step="explore"><i>4</i> Explore regimen (optional)</span>
<button class="linklike" id="stepperDismiss" title="Hide this guide">dismiss</button>
</div>
<!-- ============ 1 · SESSION BAR: drug + patient ============ -->
<div class="card sessionbar" id="patientCard">
<h2><span class="stepnum">1</span> Drug & patient</h2>
<div class="sess-row">
<div class="sess-field sess-drug">
<label class="f" for="pt-drug">Drug / PK model</label>
<select id="pt-drug" title="Which drug's population PK model to use for this patient">
<option value="eculizumab">Eculizumab</option>
<option value="ravulizumab">Ravulizumab</option>
<option value="crovalimab">Crovalimab</option>
</select>
</div>
<div class="sess-field">
<div class="lbl-help">
<label class="f" for="pt-wt">Weight (kg)</label>
<button type="button" class="info" data-help="wt" aria-label="What is the weight field for?" aria-expanded="false" title="Body weight in kg (covariate on clearance and volumes)">ⓘ</button>
</div>
<input type="number" id="pt-wt" min="3" max="300" step="0.5" placeholder="e.g. 70" title="Body weight in kg (covariate on clearance and volumes)">
</div>
<div class="sess-field" id="ageRow" style="display:none">
<div class="lbl-help">
<label class="f" for="pt-age">Age (years)</label>
<button type="button" class="info" data-help="age" aria-label="What is the age field for?" aria-expanded="false" title="Age in years, a covariate of the SC absorption rate (crovalimab)">ⓘ</button>
</div>
<input type="number" id="pt-age" min="1" max="100" step="1" placeholder="e.g. 36" title="Age in years, a covariate of the SC absorption rate (crovalimab)">
</div>
<div class="sess-field" id="diseaseRow" style="display:none">
<label class="f" for="pt-disease">Disease</label>
<select id="pt-disease" title="Indication (shown when disease is a covariate of the model)">
<option value="PNH">PNH</option>
<option value="aHUS">aHUS</option>
</select>
</div>
<div class="sess-field sess-target">
<!-- folded on purpose: the active target is shown in the summary, so it
can be read at a glance but not changed by an accidental click -->
<details class="sess-fold" id="targetFold">
<summary title="Trough target used for P(trough > target). Fold open to change it.">
<span class="fold-lbl">Trough target</span>
<span class="fold-val" id="targetFoldVal">–</span>
<span class="fold-edit">change</span>
</summary>
<div class="lbl-help">
<label class="f" for="pt-target">Target trough (µg/mL)</label>
<button type="button" class="info" data-help="target" aria-label="What is the trough target?" aria-expanded="false" title="Target trough used for P(trough > target); left empty the drug's default applies">ⓘ</button>
</div>
<input type="number" id="pt-target" min="10" max="500" step="5" title="Target trough used for P(trough > target); left empty the drug's default applies">
<div class="legend-note" id="targetHint"></div>
</details>
</div>
</div>
<div class="legend-note" id="drugHint" style="margin:6px 0 0"></div>
<div class="row2" style="margin-top:4px">
<div>
<label class="f" for="pt-code">Patient ID/name (optional)</label>
<input type="text" id="pt-code" placeholder="e.g. ID001" autocomplete="off">
</div>
<div></div>
</div>
</div>
<!-- ============ 2 · DOSING & SAMPLES ============ -->
<div class="card" id="chartCard">
<h2><span class="stepnum">2</span> Dosing schedule & measured concentrations</h2>
<div class="seg no-print" id="modeSeg" title="Choose how the dosing schedule is entered">
<label class="seg-opt" title="Enter each dose and planned dose as a dated timeline (loading history, schedule changes)">
<input type="radio" name="schedMode" value="full" checked> Full schedule (history)</label>
<label class="seg-opt" title="Patient at steady state on a fixed maintenance dose + interval">
<input type="radio" name="schedMode" value="ss"> Steady state (dose + interval)</label>
</div>
<div id="fullDoseUI">
<div class="tbl-wrap"><table class="data" id="doseTable"></table></div>
<form class="inline no-print" id="doseForm" novalidate>
<div class="row3" style="margin-top:8px">
<div><label class="f" for="dose-dt">Date & time</label><input type="datetime-local" id="dose-dt" title="Scheduled date and time of the administration"></div>
<div><label class="f" for="dose-amt">Dose (mg)</label><input type="number" id="dose-amt" min="50" max="4000" step="any" placeholder="e.g. 900" title="Dose in mg"></div>
<div id="doseRouteWrap" style="display:none"><label class="f" for="dose-route">Route</label>
<select id="dose-route" title="Auto: the first dose is IV (loading), every later dose is SC. IV doses enter the central compartment directly; SC doses are absorbed via the depot compartment">
<option value="auto" selected>Auto (IV first, then SC)</option>
<option value="iv">IV</option>
<option value="sc">SC</option>
</select>
</div>
<div id="doseDurWrap" style="display:none">
<div class="lbl-help">
<label class="f" for="dose-dur">Infusion duration (min)</label>
<button type="button" class="info" data-help="infdur" aria-label="What does infusion duration affect?" aria-expanded="false" title="How long the IV infusion runs. Not applicable to SC doses. Leave blank to use the drug's own default.">ⓘ</button>
</div>
<input type="number" id="dose-dur" min="10" max="360" step="any" placeholder="e.g. 30" title="Infusion duration in minutes (10–360). Leave blank for the drug's default.">
</div>
<div style="align-self:end"><button class="primary" type="submit" id="doseAdd" style="width:100%" title="Add this dose to the schedule">Add dose</button></div>
</div>
</form>
<!-- Required in full-schedule mode: doses given before the first entered one
are otherwise read by the fit as slow elimination (falsely reassuring). -->
<div class="plan-block no-print" id="priorBlock">
<div class="lbl-help">
<span class="plan-title">Was the patient treated with this drug before the first dose entered above?</span>
<button type="button" class="info" data-help="prior" aria-label="Why does the app ask this?" aria-expanded="false" title="Doses missing from the start of the history make the patient look like a slow eliminator, which makes the forecast falsely reassuring.">ⓘ</button>
</div>
<div class="prior-opts" role="radiogroup" aria-label="Treated before the first entered dose">
<label class="check"><input type="radio" name="priorTx" value="no"> No, the first dose above is the first ever</label>
<label class="check"><input type="radio" name="priorTx" value="yes"> Yes, earlier doses are missing</label>
</div>
<div class="legend-note">If earlier doses are missing, enter them (then answer No), or use Steady state mode if the patient has been on the same regimen for months.</div>
</div>
<!-- Optional clinician-entered regimen for AFTER the last entered
dose. Drives the projected doses and the next-dose trough; left empty,
the app continues with the interval and dose found in the history. -->
<div class="plan-block no-print">
<div class="lbl-help">
<span class="plan-title">Planned regimen after the last entered dose (optional)</span>
<button type="button" class="info" data-help="plan" aria-label="What does the planned regimen do?" aria-expanded="false" title="The dose and interval you intend to give from now on. Used for the projected doses and the next-dose trough.">ⓘ</button>
</div>
<div class="row3">
<div><label class="f" for="plan-dose">Dose (mg)</label><input type="number" id="plan-dose" min="50" max="4000" step="any" placeholder="e.g. 900" title="Planned dose per administration, in mg"></div>
<div><label class="f" for="plan-interval">Every (days)</label><input type="number" id="plan-interval" min="1" max="365" step="1" placeholder="e.g. 21" title="Planned dosing interval in days"></div>
<div></div>
</div>
<div class="legend-note">Leave both empty to continue with the interval and dose found in the entered history.</div>
</div>
</div><!-- /fullDoseUI -->
<div id="ssDoseUI" style="display:none">
<div class="row3" style="margin-top:8px">
<div><label class="f" for="ss-dose">Dose (mg)</label><input type="number" id="ss-dose" min="50" max="4000" step="any" placeholder="e.g. 900" title="Maintenance dose per administration"></div>
<div><label class="f" for="ss-interval">Interval (days)</label><input type="number" id="ss-interval" min="1" max="90" step="1" placeholder="e.g. 14" title="Dosing interval in days (e.g. 14 = q2w)"></div>
<div><label class="f" for="ss-anchor">Latest dose on</label><input type="datetime-local" id="ss-anchor" title="Date and time of the most recent administration; this is day 0 of the forecast"></div>
<div id="ssDurWrap" style="display:none">
<div class="lbl-help">
<label class="f" for="ss-dur">Infusion duration (min)</label>
<button type="button" class="info" data-help="infdur" aria-label="What does infusion duration affect?" aria-expanded="false" title="Applied to every administration in this steady-state regimen. Leave blank to use the drug's own default.">ⓘ</button>
</div>
<input type="number" id="ss-dur" min="10" max="360" step="any" placeholder="e.g. 30" title="Infusion duration in minutes (10–360), applied to every dose in this regimen. Leave blank for the drug's default.">
</div>
</div>
<div class="legend-note" style="margin-top:6px">Previous cycles are simulated back to steady state; day 0 = the latest dose. To plan a regimen change, switch to “Full schedule”.</div>
</div>
<h2 class="sub-h">Measured concentrations <span class="hint" id="sampleHint"></span> <span style="float:right"><button class="linklike" id="tplClear" title="Remove all doses and measurements">clear all</button></span></h2>
<div class="tbl-wrap"><table class="data" id="obsTable"></table></div>
<form class="inline no-print" id="obsForm" novalidate>
<div class="row3" style="margin-top:8px">
<div><label class="f" for="obs-dt">Date & time</label><input type="datetime-local" id="obs-dt" title="Time the blood sample was drawn (trough just before the next dose, or a peak after it)"></div>
<div><label class="f" for="obs-val">Concentration (µg/mL)</label><input type="number" id="obs-val" min="0.01" max="10000" step="any" title="Measured serum concentration (1 µg/mL = 1 mg/L). Leave empty and tick '< LLOQ' for a below-quantitation sample."></div>
<div style="align-self:end;display:flex;gap:8px;align-items:center">
<label class="check" style="margin:0" title="Tick if the result was below the assay's lower limit of quantification (requires an LLOQ value)"><input type="checkbox" id="obs-lloq" title="Mark this sample as below the lower limit of quantification"> < LLOQ</label>
<button type="button" class="info" data-help="lloqbox" aria-label="What does below LLOQ mean?" aria-expanded="false" title="Tick if the result was below the assay's lower limit of quantification (requires an LLOQ value)">ⓘ</button>
<button class="primary" type="submit" id="obsAdd" style="flex:1" title="Add this measurement to the fit">Add</button>
</div>
</div>
</form>
<details class="help no-print" id="assayOptions">
<summary>Assay settings (LLOQ, error multiplier)</summary>
<div class="row2">
<div>
<div class="lbl-help">
<label class="f" for="pt-lloq">LLOQ (µg/mL, optional)</label>
<button type="button" class="info" data-help="lloq" aria-label="What is the LLOQ?" aria-expanded="false" title="Lower limit of quantification of your assay (needed for samples flagged below LLOQ)">ⓘ</button>
</div>
<input type="number" id="pt-lloq" min="1" max="100" step="1" placeholder="e.g. 10" title="Lower limit of quantification of your assay (needed for samples flagged below LLOQ)">
</div>
<div>
<div class="lbl-help">
<label class="f" for="pt-errmult">Assay error multiplier</label>
<button type="button" class="info" data-help="errmult" aria-label="What does the assay error multiplier do?" aria-expanded="false" title="Scales the model's residual error to your local assay; 1 = model as published">ⓘ</button>
</div>
<input type="number" id="pt-errmult" min="0.1" max="10" step="0.1" value="1" title="Scales the model's residual error to your local assay; 1 = model as published">
<div class="legend-note">Default 1. Leave unchanged unless your lab advises otherwise.</div>
</div>
</div>
</details>
</div>
<!-- ============ 3 · FORECAST & RESULTS ============ -->
<div class="card" id="resultsCard">
<h2><span class="stepnum">3</span> Forecast</h2>
<div class="stale-banner" id="staleBanner">Inputs changed. Press “Run forecast” to update.</div>
<div id="chartBox">
<div class="chart-head no-print">
<label class="check chart-log" title="Show the concentration axis on a logarithmic scale. Values stay in µg/mL; useful when the band or target spans more than about 10-fold">
<input type="checkbox" id="logY"> Log scale (y-axis)
</label>
</div>
<div id="chart"></div>
</div>
<div class="legend-note" id="chartCaption"></div>
<div class="progress-wrap" id="progress">
<div class="bar"><div id="progressBar"></div></div>
<div class="msg" id="progressMsg"></div>
</div>
<div class="actions-inline no-print" style="margin-top:10px">
<button class="primary" id="btnRun" style="flex:1" title="Run the Bayesian individualization (MAP + MCMC) and refresh the plot, trough table and advisories">Run forecast</button>
</div>
<div class="run-hint" id="runHint"></div>
<details class="help advanced no-print" id="advancedForecast">
<summary>Advanced fitting options</summary>
<div>
<div class="lbl-help">
<label class="f" for="pt-recency">Weight of older samples</label>
<button type="button" class="info" data-help="recency" aria-label="What does weighting of older samples do?" aria-expanded="false" title="Optional: give older measurements a larger residual error, so they influence the individual fit less than recent ones. Off by default.">ⓘ</button>
</div>
<select id="pt-recency" title="Optional: give older measurements a larger residual error, so they influence the individual fit less than recent ones. Off by default.">
<option value="off">Off (all samples weighted equally)</option>
<option value="low">Low (residual error up to ×1.5 for older samples)</option>
<option value="medium">Medium (up to ×2)</option>
<option value="high">High (up to ×3)</option>
</select>
<div class="legend-note" id="recencyHint"></div>
</div>
</details>
<details class="help no-print" id="howto">
<summary>How to read these results</summary>
<ul>
<li><b>Band (5–95%):</b> 90% plausible range for the true concentration. It does not include assay error, so a future measured value may fall outside it.</li>
<li><b>P(trough > target):</b> chance the true trough stays above your target, at your chosen dates.</li>
<li><b>Median trough [5–95%]:</b> the same distribution in µg/mL.</li>
</ul>
</details>
<div id="fitStatus"></div>
<div id="paramBlock"></div>
<div id="troughBlock"></div>
<div id="advisoryBlock"></div>
</div>
<!-- ============ 4 · REGIMEN EXPLORER ============
What this patient's own fitted parameters predict for a different dose
or interval. Always visible (like cards 2-3, it shows its own "nothing
yet" state rather than disappearing) so the four-step structure the
numbering establishes stays intact. Shows consequences; recommends
nothing — no candidate is ever marked as preferred. -->
<div class="card" id="regimenCard">
<h2><span class="stepnum">4</span> Regimen explorer
<button type="button" class="info" data-help="ivexplore" aria-label="About the regimen explorer" aria-expanded="false">ⓘ</button>
</h2>
<div class="iv-controls no-print">
<label class="f" for="iv-vary">Vary</label>
<select id="iv-vary" title="Which quantity to scan a range of candidates around. The other stays fixed at the value entered.">
<option value="interval">Interval</option>
<option value="dose">Dose</option>
</select>
<label class="f" for="iv-amt">Dose (mg)</label>
<input type="number" id="iv-amt" step="any" title="Dose per administration to evaluate, prefilled with the last dose entered">
<label class="f" for="iv-interval">Interval (days)</label>
<input type="number" id="iv-interval" step="any" title="Dosing interval to evaluate, prefilled with the interval derived from the entered schedule">
<button class="primary" id="iv-run" title="Evaluate candidates around these values using this patient's fitted parameters" disabled>Explore</button>
<span class="hint" id="iv-status"></span>
</div>
<div id="iv-out"><div class="note">Run a forecast in card 3 first. This explorer reuses that fit's own parameters.</div></div>
</div>
</main>
<!-- Fit diagnostics dialog: GOF scatter + EBE forest, opened from a button
next to the individualized parameters. Same modal pattern as About. -->
<div class="modal-backdrop" id="diagModal" hidden>
<div class="modal modal-wide" role="dialog" aria-modal="true" aria-labelledby="diagTitle">
<button class="modal-close" id="diagClose" title="Close">×</button>
<h2 id="diagTitle">Fit diagnostics</h2>
<div id="diagModalBody"></div>
</div>
</div>
<!-- Footer: short identity line on screen; the full research-use disclaimer
and model sources are in the About dialog and the printed report -->
<footer class="app">
<div class="credit">Model-informed precision dosing of therapeutic monoclonal antibodies for complement inhibition,
for research use only · Developed by <b>Rob ter Heine</b> ·
<a href="mailto:r.terheine@radboudumc.nl">r.terheine@radboudumc.nl</a> · v<span id="footerVersion"></span><br>
Research group: <a href="https://www.radboudumc.nl/en/research/research-groups/applied-pharmacometrics" target="_blank" rel="noopener">Radboud Applied Pharmacometrics</a>, Radboudumc, Nijmegen</div>
</footer>
<!-- Getting started: opened as a real second window (openGettingStarted() in
src/ui.js) so it can sit beside the app while someone follows along. This
modal is only the fallback for the rare case a popup blocker refuses
window.open() -- same pattern as the About modal below. -->
<div class="modal-backdrop" id="gettingStartedModal" hidden>
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="gettingStartedTitle">
<button class="modal-close" id="gettingStartedClose" title="Close">×</button>
<h2 id="gettingStartedTitle">Getting started</h2>
<div id="gettingStartedBody"></div>
</div>
</div>
<!-- About modal -->
<div class="modal-backdrop" id="aboutModal" hidden>
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="aboutTitle">
<button class="modal-close" id="aboutClose" title="Close">×</button>
<h2 id="aboutTitle">About this app</h2>
<div id="aboutBody"></div>
</div>
</div>
<!-- Report dialog: fields for the printed report (not shown on the main screen) -->
<div class="modal-backdrop" id="reportModal" hidden>
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="reportTitle">
<button class="modal-close" id="reportClose" title="Close">×</button>
<h2 id="reportTitle">Generate report</h2>
<p class="src">The report prints the current patient data, the last <b>run</b> forecast, model findings and the fields below. Both fields are optional and are kept in the session (and in exported session files) until you change them.</p>
<label class="f" for="rp-prepared">Prepared by (name, role)</label>
<input type="text" id="rp-prepared" placeholder="e.g. R. ter Heine, hospital pharmacist" autocomplete="off"
title="Who performed the calculations, printed in the report header and on the signature line">
<label class="f" for="rp-advice" style="margin-top:10px">Advice (free text, printed verbatim in the Advice section)</label>
<textarea id="rp-advice" rows="5" placeholder="e.g. Continue 1200 mg q2w; re-check trough before the dose on 12 Oct."
title="Your dose advice for the treating clinician. The model findings are printed separately above it. The advice itself is yours."></textarea>
<div class="actions-inline" style="margin-top:14px;display:flex;gap:8px">
<button class="primary" id="rp-generate" style="flex:1" title="Build the report sheet and open the print dialog">Generate report</button>
<button id="rp-cancel" title="Close without printing">Cancel</button>
</div>
</div>
</div>
<!-- Print-only report sheet: filled by renderReport() right before printing -->
<div id="reportSheet" hidden></div>
<!-- Undo toast (e.g. after clearing the schedule) -->
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script>
/* src/version.js (inlined) */
/* =========================================================================
* Single source of truth for the application version.
*
* Bump the string below whenever the app changes. It is consumed by
* src/ui.js (browser title, header, footer, About dialog, session export)
* and checked against package.json by build.mjs and tests/test_version.js,
* so the two can never silently drift apart.
* ========================================================================= */
(function (root) {
'use strict';
var ECU = root.ECU = root.ECU || {};
ECU.VERSION = '0.46.0';
})(typeof window !== 'undefined' ? window : globalThis);
</script>
<script>
/* src/model.js (inlined) */
/* =========================================================================
* mAb TDM — population PK model core (multi-drug)
*
* Each drug is a self-contained spec (parameters, variability, residual error,
* infusion duration, dosing/sampling hints). A "current drug" is selected via
* M.select(id); all model functions act on the current spec by default. The
* eculizumab spec remains the default and the historical top-level exports
* (THETA/OMEGA/SIGMA/...) stay as eculizumab aliases for backward compatibility.
*
* Sources:
* eculizumab: ter Avest M, et al. Model-Informed Precision Dosing of
* Eculizumab in Patients with Paroxysmal Nocturnal Hemoglobinuria.