diagcalc 3.2.3 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +60 -6
- package/bin/diagcalc.js +147 -41
- package/docs/PROVENANCE.md +17 -0
- package/index.html +408 -92
- package/lib/README.md +98 -0
- package/lib/diagcalc-case.js +148 -0
- package/lib/diagcalc-core.js +557 -89
- package/lib/diagcalc-datasets.js +140 -1
- package/lib/diagcalc-geometry.js +27 -0
- package/lib/diagcalc-i18n.js +255 -0
- package/lib/diagcalc-meta.js +9 -0
- package/lib/diagcalc-presentation.js +278 -0
- package/lib/diagcalc-storage.js +45 -0
- package/lib/diagcalc-types.d.ts +59 -0
- package/package.json +18 -4
- package/script.js +1239 -275
- package/styles.css +2186 -325
- package/tui/index.js +83 -273
- package/tui/input.js +24 -0
- package/tui/presentation.js +168 -0
- package/tui/report.js +130 -0
- package/web/charts.js +339 -0
- package/web/results.js +234 -0
package/styles.css
CHANGED
|
@@ -1,57 +1,96 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
|
|
2
|
+
/* Glauca palette — github.com/tiagojct/glauca (Pruina light / Profundum dark).
|
|
3
|
+
The --log- and --crew- slot names are inherited from the prior Pequod theme
|
|
4
|
+
so the ~130 downstream references (and script.js canvas reads) keep working with
|
|
5
|
+
only the values changed. The neutral ramp is one fixed pale→deep cool scale
|
|
6
|
+
shared by both modes: light picks pale steps for surfaces + deep for ink,
|
|
7
|
+
dark inverts. Crew slots carry Glauca's blue mark plus the extended hues
|
|
8
|
+
(folium green, bacca red) and the blue-copper warm axis that diagcalc's
|
|
9
|
+
colour-coded metrics still need. */
|
|
10
|
+
/* Neutrals (glaucum/pruina/saxum): pale bloom → deep sea */
|
|
11
|
+
--log-50: #F0F4F6;
|
|
12
|
+
--log-100: #E8EEF2;
|
|
13
|
+
--log-150: #D9E2E7;
|
|
14
|
+
--log-200: #CDD7DC;
|
|
15
|
+
--log-300: #B7CDD6;
|
|
16
|
+
--log-400: #93B7C9;
|
|
17
|
+
--log-500: #6C93A8;
|
|
18
|
+
--log-600: #4D7391;
|
|
19
|
+
--log-700: #2A3540;
|
|
20
|
+
--log-800: #16303F;
|
|
21
|
+
--log-900: #171F26;
|
|
22
|
+
--log-950: #10161C;
|
|
23
|
+
|
|
24
|
+
/* Crew accents (light variants) — Glauca hues, deepened for AA on the pale ground */
|
|
25
|
+
--crew-ahab: #B34A44; /* bacca red — error / rule-out failed */
|
|
26
|
+
--crew-starbuck: #007AFF; /* dies blue — info / focus ring / pre-test marker */
|
|
27
|
+
--crew-queequeg: #0B62CF; /* accent blue — primary action */
|
|
28
|
+
--crew-pip: #8F5E08; /* copper — warning / threshold bands (AA text 5.0:1) */
|
|
29
|
+
--crew-ishmael: #55646D; /* cinis gray — muted / axis */
|
|
30
|
+
--crew-stubb: #B97435; /* copper — LR+ trace (mark, not text) */
|
|
31
|
+
--crew-tashtego: #307719; /* folium green — LR− / success (AA text 5.0:1) */
|
|
32
|
+
--crew-daggoo: #8F4F16; /* deep copper — sequential second-stage */
|
|
33
|
+
|
|
34
|
+
/* Semantic tokens — legacy Pequod slot names, Glauca values. */
|
|
35
|
+
--bg: var(--log-50);
|
|
36
|
+
--surface: var(--log-100);
|
|
37
|
+
--surface-soft: rgba(240, 244, 246, 0.92);
|
|
38
|
+
--border: var(--log-200);
|
|
39
|
+
--text: var(--log-800);
|
|
40
|
+
--text-strong: var(--log-900);
|
|
41
|
+
--text-muted: var(--crew-ishmael);
|
|
42
|
+
--primary: var(--crew-queequeg);
|
|
43
|
+
--primary-strong: var(--log-800);
|
|
44
|
+
--secondary: var(--crew-starbuck);
|
|
45
|
+
--success: var(--crew-tashtego);
|
|
46
|
+
--warning: var(--crew-pip);
|
|
47
|
+
--error: var(--crew-ahab);
|
|
48
|
+
--accent-warm: var(--crew-stubb);
|
|
49
|
+
--axis: var(--log-400);
|
|
50
|
+
|
|
51
|
+
/* Spacing scale — 4-pt grid. Use in padding/margin/gap to keep rhythm. */
|
|
52
|
+
--space-1: 0.25rem; /* 4px */
|
|
53
|
+
--space-2: 0.5rem; /* 8px */
|
|
54
|
+
--space-3: 0.75rem; /* 12px */
|
|
55
|
+
--space-4: 1rem; /* 16px */
|
|
56
|
+
--space-5: 1.5rem; /* 24px */
|
|
57
|
+
--space-6: 2rem; /* 32px */
|
|
58
|
+
--space-7: 3rem; /* 48px */
|
|
59
|
+
--space-8: 4rem; /* 64px */
|
|
60
|
+
|
|
61
|
+
/* Type scale — clamp-friendly steps. */
|
|
62
|
+
--text-xs: 0.75rem;
|
|
63
|
+
--text-sm: 0.875rem;
|
|
64
|
+
--text-base: 1rem;
|
|
65
|
+
--text-lg: 1.125rem;
|
|
66
|
+
--text-xl: 1.5rem;
|
|
67
|
+
--text-2xl: 2rem;
|
|
68
|
+
--text-3xl: 2.75rem;
|
|
69
|
+
|
|
70
|
+
/* Corner radii. */
|
|
71
|
+
--radius-1: 4px;
|
|
72
|
+
--radius-2: 6px;
|
|
73
|
+
--radius-3: 8px;
|
|
74
|
+
--radius-pill: 999px;
|
|
75
|
+
|
|
76
|
+
/* Motion */
|
|
77
|
+
--duration-fast: 120ms;
|
|
78
|
+
--duration-base: 200ms;
|
|
79
|
+
--duration-slow: 320ms;
|
|
80
|
+
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
81
|
+
|
|
82
|
+
/* Elevation — used sparingly for hover lifts only */
|
|
83
|
+
--shadow-1: 0 1px 2px rgba(16, 22, 28, 0.06), 0 1px 3px rgba(16, 22, 28, 0.04);
|
|
84
|
+
--shadow-2: 0 2px 4px rgba(16, 22, 28, 0.08), 0 4px 10px rgba(16, 22, 28, 0.06);
|
|
85
|
+
|
|
86
|
+
font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
3
87
|
font-feature-settings: normal;
|
|
4
|
-
/* Flexoki Color Scheme */
|
|
5
|
-
--base-100: #FFFCF0;
|
|
6
|
-
--base-200: #F2F0E5;
|
|
7
|
-
--base-300: #E6E4D9;
|
|
8
|
-
--base-400: #DAD8CE;
|
|
9
|
-
--base-500: #CECDC3;
|
|
10
|
-
--base-600: #B7B5AC;
|
|
11
|
-
--base-700: #878580;
|
|
12
|
-
--base-800: #575653;
|
|
13
|
-
--base-900: #403E3C;
|
|
14
|
-
--base-950: #282726;
|
|
15
|
-
--base-1000: #100F0F;
|
|
16
|
-
|
|
17
|
-
--red: #AF3029;
|
|
18
|
-
--orange: #BC5215;
|
|
19
|
-
--yellow: #AD8301;
|
|
20
|
-
--green: #66800B;
|
|
21
|
-
--cyan: #24837B;
|
|
22
|
-
--blue: #205EA6;
|
|
23
|
-
--purple: #5E409D;
|
|
24
|
-
--magenta: #A02F6F;
|
|
25
|
-
|
|
26
|
-
/* Semantic colors */
|
|
27
|
-
--primary-color: var(--blue);
|
|
28
|
-
--primary-dark: #1a4a7f;
|
|
29
|
-
--secondary-color: var(--cyan);
|
|
30
|
-
--background-color: var(--base-100);
|
|
31
|
-
--surface-color: var(--base-200);
|
|
32
|
-
--border-color: var(--base-400);
|
|
33
|
-
--text-color: var(--base-1000);
|
|
34
|
-
--muted-text: var(--base-800);
|
|
35
|
-
--success-color: var(--green);
|
|
36
|
-
--accent-warm: var(--orange);
|
|
37
|
-
--page-accent-cool: rgba(32, 94, 166, 0.08);
|
|
38
|
-
--page-accent-warm: rgba(188, 82, 21, 0.05);
|
|
39
|
-
--intro-gradient-end: rgba(230, 228, 217, 0.4);
|
|
40
|
-
--panel-bg: rgba(242, 240, 229, 0.8);
|
|
41
|
-
--panel-soft-bg: rgba(255, 252, 240, 0.82);
|
|
42
|
-
--highlight-bg: rgba(255, 252, 240, 0.66);
|
|
43
|
-
--matrix-bg: rgba(255, 252, 240, 0.9);
|
|
44
|
-
--heading-strong: var(--base-900);
|
|
45
|
-
--reference-bg: var(--base-300);
|
|
46
|
-
--reference-text: var(--base-800);
|
|
47
|
-
--reference-muted: var(--base-700);
|
|
48
88
|
}
|
|
49
89
|
|
|
50
90
|
body {
|
|
51
|
-
font-family: "
|
|
52
|
-
background-color: var(--
|
|
53
|
-
|
|
54
|
-
color: var(--text-color);
|
|
91
|
+
font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
92
|
+
background-color: var(--bg);
|
|
93
|
+
color: var(--text);
|
|
55
94
|
margin: 0;
|
|
56
95
|
padding: 0;
|
|
57
96
|
line-height: 1.6;
|
|
@@ -61,7 +100,29 @@ body {
|
|
|
61
100
|
.container {
|
|
62
101
|
width: min(1380px, 94vw);
|
|
63
102
|
margin: 0 auto;
|
|
64
|
-
padding:
|
|
103
|
+
padding: var(--space-5) 0 var(--space-6);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/* ── Unified keyboard focus ring ───────────────────────────────────────────
|
|
107
|
+
One rule for every interactive element. :focus-visible means the ring only
|
|
108
|
+
shows on keyboard navigation, never on mouse click — so the visual is
|
|
109
|
+
intentional, not noisy. Starbuck cyan, 2 px offset. */
|
|
110
|
+
:is(
|
|
111
|
+
button,
|
|
112
|
+
[type="text"],
|
|
113
|
+
[type="number"],
|
|
114
|
+
[type="date"],
|
|
115
|
+
[type="email"],
|
|
116
|
+
select,
|
|
117
|
+
summary,
|
|
118
|
+
a,
|
|
119
|
+
input[type="range"],
|
|
120
|
+
input[type="checkbox"],
|
|
121
|
+
[tabindex]
|
|
122
|
+
):focus-visible {
|
|
123
|
+
outline: 2px solid var(--secondary);
|
|
124
|
+
outline-offset: 2px;
|
|
125
|
+
border-radius: 4px;
|
|
65
126
|
}
|
|
66
127
|
|
|
67
128
|
footer {
|
|
@@ -70,113 +131,222 @@ footer {
|
|
|
70
131
|
padding: 1.5em;
|
|
71
132
|
margin-top: 3em;
|
|
72
133
|
background-color: transparent;
|
|
73
|
-
border-top: 1px solid var(--border
|
|
74
|
-
color: var(--muted
|
|
134
|
+
border-top: 1px solid var(--border);
|
|
135
|
+
color: var(--text-muted);
|
|
75
136
|
}
|
|
76
137
|
|
|
77
|
-
.
|
|
78
|
-
|
|
79
|
-
|
|
138
|
+
footer .privacy-note {
|
|
139
|
+
display: inline-block;
|
|
140
|
+
margin: 0.5rem auto;
|
|
141
|
+
padding: 0.45rem 0.9rem;
|
|
142
|
+
border-radius: 4px;
|
|
143
|
+
background-color: var(--surface-soft);
|
|
144
|
+
border: 1px solid var(--border);
|
|
145
|
+
color: var(--text);
|
|
146
|
+
font-size: 0.85rem;
|
|
147
|
+
font-weight: 500;
|
|
80
148
|
}
|
|
81
149
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
position:
|
|
150
|
+
/* ── App bar (v4.0) ─────────────────────────────────────────────────────── */
|
|
151
|
+
.app-bar {
|
|
152
|
+
position: sticky;
|
|
153
|
+
top: 0;
|
|
154
|
+
z-index: 100;
|
|
155
|
+
background: var(--surface);
|
|
156
|
+
border-bottom: 1px solid var(--border);
|
|
157
|
+
backdrop-filter: saturate(180%) blur(8px);
|
|
85
158
|
}
|
|
86
159
|
|
|
87
|
-
.
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
right: 0;
|
|
160
|
+
.app-bar-inner {
|
|
161
|
+
width: min(1380px, 94vw);
|
|
162
|
+
margin: 0 auto;
|
|
91
163
|
display: flex;
|
|
92
|
-
|
|
164
|
+
align-items: center;
|
|
165
|
+
justify-content: space-between;
|
|
166
|
+
gap: var(--space-4);
|
|
167
|
+
padding: var(--space-3) 0;
|
|
168
|
+
min-height: 3rem;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.app-bar-brand {
|
|
172
|
+
display: flex;
|
|
173
|
+
align-items: baseline;
|
|
174
|
+
gap: var(--space-3);
|
|
175
|
+
min-width: 0;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.brand-mark {
|
|
179
|
+
font-weight: 800;
|
|
180
|
+
font-size: var(--text-lg);
|
|
181
|
+
letter-spacing: 0.02em;
|
|
182
|
+
color: var(--text-strong);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.app-bar-version {
|
|
186
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
187
|
+
font-size: var(--text-xs);
|
|
188
|
+
font-variant-numeric: tabular-nums;
|
|
189
|
+
color: var(--text-muted);
|
|
190
|
+
letter-spacing: 0.02em;
|
|
191
|
+
align-self: center;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.app-bar-divider {
|
|
195
|
+
color: var(--text-muted);
|
|
196
|
+
font-weight: 600;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.app-bar-case {
|
|
200
|
+
font-size: var(--text-sm);
|
|
201
|
+
color: var(--text-muted);
|
|
202
|
+
white-space: nowrap;
|
|
203
|
+
overflow: hidden;
|
|
204
|
+
text-overflow: ellipsis;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.app-bar-case.has-case {
|
|
208
|
+
color: var(--text);
|
|
209
|
+
font-weight: 600;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.app-bar-controls {
|
|
213
|
+
display: flex;
|
|
214
|
+
align-items: center;
|
|
215
|
+
gap: var(--space-2);
|
|
216
|
+
flex-shrink: 0;
|
|
93
217
|
}
|
|
94
218
|
|
|
95
219
|
.theme-toggle {
|
|
96
220
|
width: auto;
|
|
97
|
-
padding:
|
|
98
|
-
background:
|
|
99
|
-
color: var(--text
|
|
100
|
-
border:
|
|
101
|
-
border-radius:
|
|
221
|
+
padding: var(--space-2) var(--space-3);
|
|
222
|
+
background: transparent;
|
|
223
|
+
color: var(--text);
|
|
224
|
+
border: 1px solid var(--border);
|
|
225
|
+
border-radius: var(--radius-1);
|
|
102
226
|
cursor: pointer;
|
|
103
|
-
font-size:
|
|
104
|
-
|
|
227
|
+
font-size: var(--text-base);
|
|
228
|
+
line-height: 1;
|
|
229
|
+
transition: background-color var(--duration-fast) var(--ease-out);
|
|
105
230
|
}
|
|
106
231
|
|
|
107
232
|
.theme-toggle:hover {
|
|
108
|
-
background-color: var(--
|
|
233
|
+
background-color: var(--surface-soft);
|
|
109
234
|
}
|
|
110
235
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
text-align: center;
|
|
236
|
+
.lang-picker {
|
|
237
|
+
display: inline-flex;
|
|
238
|
+
align-items: center;
|
|
115
239
|
}
|
|
116
240
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
241
|
+
.lang-picker select {
|
|
242
|
+
padding: var(--space-2) var(--space-3);
|
|
243
|
+
font-size: var(--text-sm);
|
|
244
|
+
width: auto;
|
|
245
|
+
border-radius: var(--radius-1);
|
|
246
|
+
border: 1px solid var(--border);
|
|
247
|
+
background-color: transparent;
|
|
248
|
+
color: var(--text);
|
|
249
|
+
cursor: pointer;
|
|
121
250
|
}
|
|
122
251
|
|
|
123
|
-
.
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
252
|
+
.visually-hidden {
|
|
253
|
+
position: absolute;
|
|
254
|
+
width: 1px;
|
|
255
|
+
height: 1px;
|
|
256
|
+
padding: 0;
|
|
257
|
+
margin: -1px;
|
|
258
|
+
overflow: hidden;
|
|
259
|
+
clip: rect(0, 0, 0, 0);
|
|
260
|
+
white-space: nowrap;
|
|
261
|
+
border: 0;
|
|
133
262
|
}
|
|
134
263
|
|
|
135
|
-
|
|
136
|
-
font-size:
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
264
|
+
h1 {
|
|
265
|
+
font-size: var(--text-2xl);
|
|
266
|
+
margin: 0 0 var(--space-3);
|
|
267
|
+
font-weight: 700;
|
|
268
|
+
letter-spacing: -0.01em;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
h2 {
|
|
272
|
+
font-size: var(--text-xl);
|
|
273
|
+
margin-bottom: var(--space-4);
|
|
274
|
+
color: var(--text-strong);
|
|
275
|
+
font-weight: 700;
|
|
276
|
+
letter-spacing: -0.01em;
|
|
141
277
|
}
|
|
142
278
|
|
|
143
|
-
|
|
279
|
+
/* ── About panel (formerly intro highlights) ───────────────────────────── */
|
|
280
|
+
.about-panel .about-grid {
|
|
144
281
|
display: grid;
|
|
145
|
-
grid-template-columns: repeat(
|
|
146
|
-
gap:
|
|
282
|
+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
283
|
+
gap: var(--space-4);
|
|
147
284
|
}
|
|
148
285
|
|
|
149
|
-
.
|
|
150
|
-
background-color: var(--
|
|
151
|
-
border:
|
|
152
|
-
border-radius:
|
|
153
|
-
padding:
|
|
154
|
-
box-shadow: none;
|
|
286
|
+
.about-card {
|
|
287
|
+
background-color: var(--surface-soft);
|
|
288
|
+
border: 1px solid var(--border);
|
|
289
|
+
border-radius: var(--radius-2);
|
|
290
|
+
padding: var(--space-4);
|
|
155
291
|
}
|
|
156
292
|
|
|
157
|
-
.
|
|
158
|
-
margin
|
|
159
|
-
font-size:
|
|
293
|
+
.about-card h3 {
|
|
294
|
+
margin: 0 0 var(--space-2);
|
|
295
|
+
font-size: var(--text-base);
|
|
296
|
+
color: var(--text-strong);
|
|
297
|
+
font-weight: 700;
|
|
160
298
|
}
|
|
161
299
|
|
|
162
|
-
.
|
|
163
|
-
margin
|
|
164
|
-
color: var(--muted
|
|
300
|
+
.about-card p {
|
|
301
|
+
margin: 0;
|
|
302
|
+
color: var(--text-muted);
|
|
303
|
+
font-size: var(--text-sm);
|
|
304
|
+
line-height: 1.55;
|
|
165
305
|
}
|
|
166
306
|
|
|
167
307
|
.workspace {
|
|
168
308
|
display: grid;
|
|
169
309
|
grid-template-columns: 1fr;
|
|
170
|
-
gap:
|
|
310
|
+
gap: var(--space-5);
|
|
171
311
|
align-items: start;
|
|
312
|
+
margin-top: var(--space-5);
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
@media (min-width: 960px) {
|
|
316
|
+
.workspace {
|
|
317
|
+
grid-template-columns: minmax(340px, 34%) 1fr;
|
|
318
|
+
}
|
|
319
|
+
.panel-results {
|
|
320
|
+
position: sticky;
|
|
321
|
+
top: calc(3rem + var(--space-4));
|
|
322
|
+
}
|
|
172
323
|
}
|
|
173
324
|
|
|
174
325
|
.panel {
|
|
175
|
-
background-color:
|
|
176
|
-
border:
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
326
|
+
background-color: transparent;
|
|
327
|
+
border-radius: 0;
|
|
328
|
+
padding: var(--space-4) 0;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.panel-form {
|
|
332
|
+
border-right: 1px solid var(--border);
|
|
333
|
+
padding-right: var(--space-5);
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
@media (max-width: 959px) {
|
|
337
|
+
.panel-form {
|
|
338
|
+
border-right: none;
|
|
339
|
+
border-bottom: 1px solid var(--border);
|
|
340
|
+
padding-right: 0;
|
|
341
|
+
padding-bottom: var(--space-5);
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.panel-form,
|
|
346
|
+
.panel-results {
|
|
347
|
+
display: flex;
|
|
348
|
+
flex-direction: column;
|
|
349
|
+
gap: var(--space-5);
|
|
180
350
|
}
|
|
181
351
|
|
|
182
352
|
.panel-heading {
|
|
@@ -195,7 +365,7 @@ h2 {
|
|
|
195
365
|
font-size: 0.74rem;
|
|
196
366
|
letter-spacing: 0.08em;
|
|
197
367
|
text-transform: uppercase;
|
|
198
|
-
color: var(--muted
|
|
368
|
+
color: var(--text-muted);
|
|
199
369
|
}
|
|
200
370
|
|
|
201
371
|
.resource-grid {
|
|
@@ -210,7 +380,7 @@ h2 {
|
|
|
210
380
|
}
|
|
211
381
|
|
|
212
382
|
.section-heading p {
|
|
213
|
-
color: var(--muted
|
|
383
|
+
color: var(--text-muted);
|
|
214
384
|
max-width: 640px;
|
|
215
385
|
}
|
|
216
386
|
|
|
@@ -238,43 +408,44 @@ form {
|
|
|
238
408
|
|
|
239
409
|
select {
|
|
240
410
|
padding: 0.85rem 1rem;
|
|
241
|
-
border: 2px solid var(--border
|
|
411
|
+
border: 2px solid var(--border);
|
|
242
412
|
border-radius: 4px;
|
|
243
|
-
background-color: var(--
|
|
244
|
-
color: var(--text
|
|
413
|
+
background-color: var(--bg);
|
|
414
|
+
color: var(--text);
|
|
245
415
|
font-size: 1rem;
|
|
416
|
+
font-family: inherit;
|
|
246
417
|
transition: border-color 0.2s;
|
|
247
418
|
cursor: pointer;
|
|
248
419
|
}
|
|
249
420
|
|
|
250
421
|
select:focus {
|
|
251
|
-
border-color: var(--primary
|
|
422
|
+
border-color: var(--primary);
|
|
252
423
|
outline: none;
|
|
253
424
|
}
|
|
254
425
|
|
|
255
426
|
optgroup {
|
|
256
427
|
font-weight: 600;
|
|
257
|
-
color: var(--
|
|
428
|
+
color: var(--text-strong);
|
|
258
429
|
font-style: normal;
|
|
259
430
|
}
|
|
260
431
|
|
|
261
432
|
option {
|
|
262
433
|
padding: 0.5rem;
|
|
263
|
-
color: var(--text
|
|
434
|
+
color: var(--text);
|
|
264
435
|
}
|
|
265
436
|
|
|
266
437
|
.help-text {
|
|
267
438
|
margin: 0;
|
|
268
439
|
font-size: 0.9rem;
|
|
269
|
-
color: var(--muted
|
|
440
|
+
color: var(--text-muted);
|
|
270
441
|
}
|
|
271
442
|
|
|
272
443
|
.confusion-matrix {
|
|
273
|
-
border: 2px solid var(--
|
|
444
|
+
border: 2px solid var(--log-150);
|
|
274
445
|
border-radius: 8px;
|
|
275
446
|
padding: 1.25rem;
|
|
276
447
|
margin: 0 0 2rem;
|
|
277
|
-
background-color: var(--
|
|
448
|
+
background-color: var(--surface-soft);
|
|
278
449
|
}
|
|
279
450
|
|
|
280
451
|
.confusion-matrix legend {
|
|
@@ -294,8 +465,8 @@ option {
|
|
|
294
465
|
padding: 0.75rem;
|
|
295
466
|
border-radius: 4px;
|
|
296
467
|
font-weight: 600;
|
|
297
|
-
color: var(--
|
|
298
|
-
background
|
|
468
|
+
color: var(--log-50);
|
|
469
|
+
background-color: var(--primary);
|
|
299
470
|
}
|
|
300
471
|
|
|
301
472
|
.grid-label {
|
|
@@ -305,50 +476,51 @@ option {
|
|
|
305
476
|
padding: 0.75rem;
|
|
306
477
|
border-radius: 4px;
|
|
307
478
|
font-weight: 600;
|
|
308
|
-
color: var(--
|
|
309
|
-
background:
|
|
479
|
+
color: var(--log-50);
|
|
480
|
+
background-color: var(--log-700);
|
|
310
481
|
text-align: center;
|
|
311
482
|
}
|
|
312
483
|
|
|
313
484
|
.grid-item {
|
|
314
485
|
text-align: center;
|
|
315
486
|
padding: 0.75rem;
|
|
316
|
-
background-color: var(--
|
|
487
|
+
background-color: var(--bg);
|
|
317
488
|
border-radius: 4px;
|
|
318
|
-
border: 2px solid var(--border
|
|
489
|
+
border: 2px solid var(--border);
|
|
319
490
|
box-shadow: none;
|
|
320
491
|
transition: border-color 0.2s ease;
|
|
321
492
|
}
|
|
322
493
|
|
|
323
494
|
.grid-item:hover {
|
|
324
|
-
border-color: var(--
|
|
495
|
+
border-color: var(--log-400);
|
|
325
496
|
}
|
|
326
497
|
|
|
327
|
-
/* Input Styling */
|
|
498
|
+
/* Input Styling — use JetBrains Mono for numeric input grids so digits align */
|
|
328
499
|
.grid-item input,
|
|
329
500
|
.preTestProb {
|
|
330
501
|
width: 100%;
|
|
331
502
|
padding: 0.85rem 1rem;
|
|
332
503
|
margin: 0;
|
|
333
|
-
border: 2px solid var(--border
|
|
504
|
+
border: 2px solid var(--border);
|
|
334
505
|
border-radius: 4px;
|
|
335
506
|
box-sizing: border-box;
|
|
336
507
|
transition: border-color 0.2s;
|
|
337
508
|
font-size: 1rem;
|
|
338
|
-
font-family:
|
|
339
|
-
|
|
340
|
-
color: var(--
|
|
509
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
510
|
+
font-variant-numeric: tabular-nums;
|
|
511
|
+
background-color: var(--bg);
|
|
512
|
+
color: var(--text);
|
|
341
513
|
}
|
|
342
514
|
|
|
343
515
|
.grid-item input::placeholder,
|
|
344
516
|
.preTestProb::placeholder {
|
|
345
|
-
color: var(--muted
|
|
517
|
+
color: var(--text-muted);
|
|
346
518
|
opacity: 1;
|
|
347
519
|
}
|
|
348
520
|
|
|
349
521
|
.grid-item input:focus,
|
|
350
522
|
.preTestProb:focus {
|
|
351
|
-
border-color: var(--primary
|
|
523
|
+
border-color: var(--primary);
|
|
352
524
|
outline: none;
|
|
353
525
|
box-shadow: none;
|
|
354
526
|
}
|
|
@@ -356,8 +528,8 @@ option {
|
|
|
356
528
|
/* Button Styles */
|
|
357
529
|
button {
|
|
358
530
|
width: 100%;
|
|
359
|
-
background: var(--primary
|
|
360
|
-
color: var(--
|
|
531
|
+
background: var(--primary);
|
|
532
|
+
color: var(--log-50);
|
|
361
533
|
padding: 0.9rem;
|
|
362
534
|
border: none;
|
|
363
535
|
border-radius: 4px;
|
|
@@ -369,21 +541,21 @@ button {
|
|
|
369
541
|
}
|
|
370
542
|
|
|
371
543
|
button:hover {
|
|
372
|
-
background-color: var(--primary-
|
|
544
|
+
background-color: var(--primary-strong);
|
|
373
545
|
transform: none;
|
|
374
546
|
box-shadow: none;
|
|
375
547
|
}
|
|
376
548
|
|
|
377
549
|
.secondary {
|
|
378
550
|
background: transparent;
|
|
379
|
-
color: var(--muted
|
|
380
|
-
border: 2px solid var(--border
|
|
551
|
+
color: var(--text-muted);
|
|
552
|
+
border: 2px solid var(--border);
|
|
381
553
|
box-shadow: none;
|
|
382
554
|
}
|
|
383
555
|
|
|
384
556
|
.secondary:hover {
|
|
385
|
-
background-color: var(--
|
|
386
|
-
border-color: var(--
|
|
557
|
+
background-color: var(--log-150);
|
|
558
|
+
border-color: var(--log-300);
|
|
387
559
|
box-shadow: none;
|
|
388
560
|
}
|
|
389
561
|
|
|
@@ -400,11 +572,11 @@ button:hover {
|
|
|
400
572
|
}
|
|
401
573
|
|
|
402
574
|
.feedback.success {
|
|
403
|
-
color: var(--success
|
|
575
|
+
color: var(--success);
|
|
404
576
|
}
|
|
405
577
|
|
|
406
578
|
.feedback.error {
|
|
407
|
-
color: var(--
|
|
579
|
+
color: var(--crew-ahab);
|
|
408
580
|
}
|
|
409
581
|
|
|
410
582
|
.results-section {
|
|
@@ -417,102 +589,324 @@ button:hover {
|
|
|
417
589
|
margin: 0;
|
|
418
590
|
}
|
|
419
591
|
|
|
420
|
-
.
|
|
592
|
+
/* ── Results hierarchy (v4.0) ───────────────────────────────────────────── */
|
|
593
|
+
|
|
594
|
+
.results-headline {
|
|
421
595
|
display: grid;
|
|
422
|
-
grid-template-columns: repeat(
|
|
423
|
-
gap:
|
|
424
|
-
|
|
596
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
597
|
+
column-gap: var(--space-5);
|
|
598
|
+
row-gap: var(--space-4);
|
|
425
599
|
}
|
|
426
600
|
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
601
|
+
@media (min-width: 540px) {
|
|
602
|
+
.results-headline {
|
|
603
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
604
|
+
}
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
.results-secondary {
|
|
433
608
|
display: grid;
|
|
434
|
-
|
|
609
|
+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
610
|
+
column-gap: var(--space-5);
|
|
611
|
+
row-gap: var(--space-4);
|
|
612
|
+
padding-top: var(--space-4);
|
|
613
|
+
border-top: 1px solid var(--border);
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
/* Result cards: no fills, no borders — typography and the inline bar/band
|
|
617
|
+
carry the visual signal. Minimal. */
|
|
618
|
+
.result-card {
|
|
619
|
+
background-color: transparent;
|
|
620
|
+
border: none;
|
|
621
|
+
border-radius: 0;
|
|
622
|
+
padding: 0;
|
|
623
|
+
display: flex;
|
|
624
|
+
flex-direction: column;
|
|
625
|
+
gap: var(--space-2);
|
|
626
|
+
position: relative;
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
.result-card:empty { display: none; }
|
|
630
|
+
|
|
631
|
+
.result-card h3 {
|
|
632
|
+
margin: 0;
|
|
633
|
+
font-size: var(--text-xs);
|
|
634
|
+
text-transform: uppercase;
|
|
635
|
+
letter-spacing: 0.06em;
|
|
636
|
+
font-weight: 600;
|
|
637
|
+
color: var(--text-muted);
|
|
638
|
+
line-height: 1.3;
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
/* Reserve two lines of label height in the headline strip so single-line
|
|
642
|
+
labels (Sensitivity, Specificity) align with two-line ones (Post-test
|
|
643
|
+
probability …) — values sit on a shared baseline across cards. */
|
|
644
|
+
.results-headline .result-card h3 {
|
|
645
|
+
min-height: calc(var(--text-xs) * 1.3 * 2);
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
.result-value {
|
|
649
|
+
font-size: var(--text-xl);
|
|
650
|
+
font-weight: 700;
|
|
651
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
652
|
+
font-variant-numeric: tabular-nums;
|
|
653
|
+
letter-spacing: -0.02em;
|
|
654
|
+
color: var(--text-strong);
|
|
655
|
+
margin: 0;
|
|
656
|
+
line-height: 1.05;
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
.result-ci {
|
|
660
|
+
font-size: var(--text-xs);
|
|
661
|
+
color: var(--text-muted);
|
|
662
|
+
font-variant-numeric: tabular-nums;
|
|
663
|
+
margin: 0;
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
.result-note {
|
|
667
|
+
margin: var(--space-1) 0 0;
|
|
668
|
+
font-size: var(--text-xs);
|
|
669
|
+
color: var(--text-muted);
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
.result-card--lg .result-value { font-size: var(--text-2xl); }
|
|
673
|
+
.result-card--sm .result-value { font-size: var(--text-lg); }
|
|
674
|
+
|
|
675
|
+
/* ── Bayesian update strip ─────────────────────────────────────────────── */
|
|
676
|
+
.bayesian-update {
|
|
677
|
+
display: flex;
|
|
678
|
+
flex-direction: column;
|
|
679
|
+
gap: var(--space-4);
|
|
680
|
+
padding: var(--space-4) 0;
|
|
681
|
+
border-top: 1px solid var(--border);
|
|
682
|
+
border-bottom: 1px solid var(--border);
|
|
435
683
|
}
|
|
436
684
|
|
|
437
|
-
.
|
|
685
|
+
.bayesian-update:empty {
|
|
438
686
|
display: none;
|
|
439
687
|
}
|
|
440
688
|
|
|
441
|
-
.
|
|
689
|
+
.bayesian-row {
|
|
442
690
|
display: grid;
|
|
443
|
-
grid-template-columns:
|
|
691
|
+
grid-template-columns: 6rem auto 1fr auto 4.5rem;
|
|
692
|
+
column-gap: var(--space-3);
|
|
444
693
|
align-items: center;
|
|
445
|
-
|
|
446
|
-
font-size: 0.95rem;
|
|
694
|
+
font-size: var(--text-sm);
|
|
447
695
|
}
|
|
448
696
|
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
697
|
+
@media (max-width: 600px) {
|
|
698
|
+
.bayesian-row {
|
|
699
|
+
grid-template-columns: 1fr auto auto;
|
|
700
|
+
grid-template-areas:
|
|
701
|
+
"label label lr"
|
|
702
|
+
"from axis to";
|
|
703
|
+
row-gap: var(--space-1);
|
|
704
|
+
}
|
|
705
|
+
.bayesian-row-label { grid-area: label; }
|
|
706
|
+
.bayesian-row-lr { grid-area: lr; }
|
|
707
|
+
.bayesian-row-from { grid-area: from; }
|
|
708
|
+
.bayesian-axis { grid-area: axis; }
|
|
709
|
+
.bayesian-row-to { grid-area: to; }
|
|
710
|
+
}
|
|
711
|
+
|
|
712
|
+
/* Below the 520 px mark the 3-row template above still squeezes the axis
|
|
713
|
+
into a half-width column. Stack everything onto its own line so the
|
|
714
|
+
pre-test → axis → post-test progression reads as a top-to-bottom flow. */
|
|
715
|
+
@media (max-width: 520px) {
|
|
716
|
+
.bayesian-row {
|
|
717
|
+
grid-template-columns: 1fr;
|
|
718
|
+
grid-template-areas:
|
|
719
|
+
"label"
|
|
720
|
+
"from"
|
|
721
|
+
"axis"
|
|
722
|
+
"to"
|
|
723
|
+
"lr";
|
|
724
|
+
row-gap: var(--space-2);
|
|
725
|
+
text-align: left;
|
|
726
|
+
}
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
.bayesian-row-label {
|
|
730
|
+
font-weight: 700;
|
|
731
|
+
color: var(--text);
|
|
452
732
|
}
|
|
453
733
|
|
|
454
|
-
.
|
|
734
|
+
.bayesian-row-from,
|
|
735
|
+
.bayesian-row-to {
|
|
736
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
737
|
+
font-variant-numeric: tabular-nums;
|
|
738
|
+
font-size: var(--text-sm);
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
.bayesian-row-from {
|
|
742
|
+
color: var(--text-muted);
|
|
743
|
+
text-align: right;
|
|
744
|
+
}
|
|
745
|
+
|
|
746
|
+
.bayesian-row-to {
|
|
747
|
+
color: var(--text-strong);
|
|
748
|
+
font-weight: 700;
|
|
749
|
+
text-align: left;
|
|
750
|
+
}
|
|
751
|
+
|
|
752
|
+
.bayesian-row-lr {
|
|
753
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
754
|
+
font-variant-numeric: tabular-nums;
|
|
755
|
+
color: var(--text-muted);
|
|
756
|
+
text-align: right;
|
|
757
|
+
font-size: var(--text-xs);
|
|
758
|
+
white-space: nowrap;
|
|
759
|
+
}
|
|
760
|
+
|
|
761
|
+
.bayesian-axis {
|
|
455
762
|
position: relative;
|
|
456
|
-
height:
|
|
457
|
-
background-color: var(--base-300);
|
|
458
|
-
border-radius: 2px;
|
|
459
|
-
overflow: hidden;
|
|
763
|
+
height: 1.5rem;
|
|
460
764
|
}
|
|
461
765
|
|
|
462
|
-
.
|
|
766
|
+
.bayesian-axis::before {
|
|
767
|
+
content: "";
|
|
463
768
|
position: absolute;
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
769
|
+
top: 50%;
|
|
770
|
+
left: 0;
|
|
771
|
+
right: 0;
|
|
772
|
+
height: 1px;
|
|
773
|
+
background-color: var(--border);
|
|
774
|
+
transform: translateY(-50%);
|
|
470
775
|
}
|
|
471
776
|
|
|
472
|
-
.
|
|
473
|
-
|
|
777
|
+
.bayesian-axis-trail {
|
|
778
|
+
position: absolute;
|
|
779
|
+
top: 50%;
|
|
780
|
+
height: 2px;
|
|
781
|
+
transform: translateY(-50%);
|
|
782
|
+
background-color: var(--text-muted);
|
|
474
783
|
}
|
|
475
784
|
|
|
476
|
-
.
|
|
477
|
-
|
|
785
|
+
.bayesian-row--warm .bayesian-axis-trail { background-color: var(--accent-warm); height: 3px; }
|
|
786
|
+
.bayesian-row--cool .bayesian-axis-trail { background-color: var(--success); height: 3px; }
|
|
787
|
+
|
|
788
|
+
/* Big, clearly visible arrowhead at the post end of the trail. */
|
|
789
|
+
.bayesian-axis-trail::after {
|
|
790
|
+
content: "";
|
|
791
|
+
position: absolute;
|
|
792
|
+
top: 50%;
|
|
793
|
+
right: -10px;
|
|
794
|
+
width: 0;
|
|
795
|
+
height: 0;
|
|
796
|
+
border-top: 7px solid transparent;
|
|
797
|
+
border-bottom: 7px solid transparent;
|
|
798
|
+
transform: translateY(-50%);
|
|
478
799
|
}
|
|
479
800
|
|
|
480
|
-
.
|
|
481
|
-
|
|
482
|
-
|
|
801
|
+
.bayesian-row--warm .bayesian-axis-trail::after { border-left: 11px solid var(--accent-warm); }
|
|
802
|
+
.bayesian-row--cool .bayesian-axis-trail::after { border-left: 11px solid var(--success); }
|
|
803
|
+
|
|
804
|
+
/* RTL: arrow points left when post-test < pre-test (e.g. negative test). */
|
|
805
|
+
.bayesian-axis.rtl .bayesian-axis-trail::after {
|
|
806
|
+
right: auto;
|
|
807
|
+
left: -10px;
|
|
808
|
+
border-left: none;
|
|
809
|
+
border-right: 11px solid;
|
|
483
810
|
}
|
|
484
811
|
|
|
485
|
-
.
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
812
|
+
.bayesian-row--warm .bayesian-axis.rtl .bayesian-axis-trail::after { border-right-color: var(--accent-warm); }
|
|
813
|
+
.bayesian-row--cool .bayesian-axis.rtl .bayesian-axis-trail::after { border-right-color: var(--success); }
|
|
814
|
+
|
|
815
|
+
.bayesian-axis-pre,
|
|
816
|
+
.bayesian-axis-post {
|
|
817
|
+
position: absolute;
|
|
818
|
+
top: 50%;
|
|
819
|
+
transform: translate(-50%, -50%);
|
|
820
|
+
border-radius: 50%;
|
|
494
821
|
}
|
|
495
822
|
|
|
496
|
-
.
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
823
|
+
.bayesian-axis-pre {
|
|
824
|
+
width: 10px;
|
|
825
|
+
height: 10px;
|
|
826
|
+
background: var(--bg);
|
|
827
|
+
border: 2px solid var(--text-muted);
|
|
828
|
+
z-index: 2;
|
|
500
829
|
}
|
|
501
830
|
|
|
502
|
-
.
|
|
503
|
-
|
|
504
|
-
|
|
831
|
+
.bayesian-axis-post {
|
|
832
|
+
width: 12px;
|
|
833
|
+
height: 12px;
|
|
834
|
+
z-index: 3;
|
|
835
|
+
border: 2px solid var(--bg);
|
|
505
836
|
}
|
|
506
837
|
|
|
507
|
-
.
|
|
508
|
-
|
|
509
|
-
|
|
838
|
+
.bayesian-row--warm .bayesian-axis-post { background-color: var(--accent-warm); }
|
|
839
|
+
.bayesian-row--cool .bayesian-axis-post { background-color: var(--success); }
|
|
840
|
+
|
|
841
|
+
/* ── Inline fill bar on percentage result cards ────────────────────────── */
|
|
842
|
+
.result-bar {
|
|
843
|
+
position: relative;
|
|
844
|
+
height: 3px;
|
|
845
|
+
border-radius: var(--radius-pill);
|
|
846
|
+
background-color: var(--border);
|
|
847
|
+
overflow: hidden;
|
|
848
|
+
margin: var(--space-1) 0 0;
|
|
510
849
|
}
|
|
511
850
|
|
|
512
|
-
.result-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
851
|
+
.result-bar-fill {
|
|
852
|
+
display: block;
|
|
853
|
+
height: 100%;
|
|
854
|
+
border-radius: var(--radius-pill);
|
|
855
|
+
background-color: var(--text-muted);
|
|
856
|
+
transition: width var(--duration-base) var(--ease-out);
|
|
857
|
+
}
|
|
858
|
+
|
|
859
|
+
.result-bar--neutral .result-bar-fill { background-color: var(--secondary); }
|
|
860
|
+
.result-bar--warm .result-bar-fill { background-color: var(--accent-warm); }
|
|
861
|
+
.result-bar--cool .result-bar-fill { background-color: var(--success); }
|
|
862
|
+
|
|
863
|
+
/* ── Clinical-utility band indicators on LR / DOR cards ────────────────── */
|
|
864
|
+
.result-band {
|
|
865
|
+
position: relative;
|
|
866
|
+
display: flex;
|
|
867
|
+
height: 6px;
|
|
868
|
+
border-radius: var(--radius-pill);
|
|
869
|
+
overflow: hidden;
|
|
870
|
+
margin: var(--space-1) 0 0;
|
|
871
|
+
}
|
|
872
|
+
|
|
873
|
+
.result-band-zone {
|
|
874
|
+
flex: 1 1 0;
|
|
875
|
+
position: relative;
|
|
876
|
+
}
|
|
877
|
+
|
|
878
|
+
/* LR+: weak → limited → useful → rule-in */
|
|
879
|
+
.result-band--lr-plus .result-band-zone--0 { background-color: rgba(168, 55, 50, 0.35); }
|
|
880
|
+
.result-band--lr-plus .result-band-zone--1 { background-color: rgba(202, 100, 53, 0.35); }
|
|
881
|
+
.result-band--lr-plus .result-band-zone--2 { background-color: rgba(106, 74, 0, 0.35); }
|
|
882
|
+
.result-band--lr-plus .result-band-zone--3 { background-color: rgba(23, 124, 85, 0.40); }
|
|
883
|
+
|
|
884
|
+
/* LR-: rule-out → useful → limited → weak */
|
|
885
|
+
.result-band--lr-minus .result-band-zone--0 { background-color: rgba(23, 124, 85, 0.40); }
|
|
886
|
+
.result-band--lr-minus .result-band-zone--1 { background-color: rgba(106, 74, 0, 0.35); }
|
|
887
|
+
.result-band--lr-minus .result-band-zone--2 { background-color: rgba(202, 100, 53, 0.35); }
|
|
888
|
+
.result-band--lr-minus .result-band-zone--3 { background-color: rgba(168, 55, 50, 0.35); }
|
|
889
|
+
|
|
890
|
+
/* DOR: poor → limited → useful → very strong */
|
|
891
|
+
.result-band--dor .result-band-zone--0 { background-color: rgba(168, 55, 50, 0.35); }
|
|
892
|
+
.result-band--dor .result-band-zone--1 { background-color: rgba(202, 100, 53, 0.35); }
|
|
893
|
+
.result-band--dor .result-band-zone--2 { background-color: rgba(106, 74, 0, 0.35); }
|
|
894
|
+
.result-band--dor .result-band-zone--3 { background-color: rgba(23, 124, 85, 0.40); }
|
|
895
|
+
|
|
896
|
+
.result-band-marker {
|
|
897
|
+
position: absolute;
|
|
898
|
+
top: 50%;
|
|
899
|
+
width: 3px;
|
|
900
|
+
height: 12px;
|
|
901
|
+
transform: translate(-50%, -50%);
|
|
902
|
+
border-radius: 1px;
|
|
903
|
+
background-color: var(--text-strong);
|
|
904
|
+
pointer-events: none;
|
|
905
|
+
z-index: 1;
|
|
906
|
+
}
|
|
907
|
+
|
|
908
|
+
[data-theme="dark"] .result-band-marker {
|
|
909
|
+
background-color: var(--log-50);
|
|
516
910
|
}
|
|
517
911
|
|
|
518
912
|
.interpretation {
|
|
@@ -520,11 +914,11 @@ button:hover {
|
|
|
520
914
|
}
|
|
521
915
|
|
|
522
916
|
.interpretation details {
|
|
523
|
-
border: 2px solid var(--
|
|
917
|
+
border: 2px solid var(--log-150);
|
|
524
918
|
border-radius: 4px;
|
|
525
919
|
padding: 1rem 1.25rem;
|
|
526
920
|
margin-bottom: 1rem;
|
|
527
|
-
background-color: var(--
|
|
921
|
+
background-color: var(--bg);
|
|
528
922
|
}
|
|
529
923
|
|
|
530
924
|
.interpretation summary {
|
|
@@ -534,15 +928,15 @@ button:hover {
|
|
|
534
928
|
|
|
535
929
|
.interpretation p {
|
|
536
930
|
margin: 0.5rem 0 0;
|
|
537
|
-
color: var(--muted
|
|
931
|
+
color: var(--text-muted);
|
|
538
932
|
}
|
|
539
933
|
|
|
540
934
|
/* Dataset Reference */
|
|
541
935
|
.dataset-reference {
|
|
542
936
|
margin-top: 1rem;
|
|
543
937
|
padding: 1rem;
|
|
544
|
-
background-color: var(--
|
|
545
|
-
border-left: 4px solid var(--primary
|
|
938
|
+
background-color: var(--surface);
|
|
939
|
+
border-left: 4px solid var(--primary);
|
|
546
940
|
border-radius: 4px;
|
|
547
941
|
font-size: 0.9rem;
|
|
548
942
|
}
|
|
@@ -550,26 +944,26 @@ button:hover {
|
|
|
550
944
|
.dataset-reference h4 {
|
|
551
945
|
margin: 0 0 0.5rem;
|
|
552
946
|
font-size: 0.95rem;
|
|
553
|
-
color: var(--
|
|
947
|
+
color: var(--text-strong);
|
|
554
948
|
}
|
|
555
949
|
|
|
556
950
|
.dataset-reference p {
|
|
557
951
|
margin: 0.25rem 0;
|
|
558
|
-
color: var(--
|
|
952
|
+
color: var(--text);
|
|
559
953
|
}
|
|
560
954
|
|
|
561
955
|
.dataset-reference .reference-citation {
|
|
562
956
|
font-style: italic;
|
|
563
|
-
color: var(--
|
|
957
|
+
color: var(--text-muted);
|
|
564
958
|
margin-top: 0.5rem;
|
|
565
959
|
}
|
|
566
960
|
|
|
567
961
|
/* Fagan Nomogram */
|
|
568
962
|
.fagan-nomogram {
|
|
569
|
-
background-color: var(--surface
|
|
963
|
+
background-color: var(--surface);
|
|
570
964
|
border-radius: 8px;
|
|
571
965
|
padding: 1.5rem;
|
|
572
|
-
border: 2px solid var(--border
|
|
966
|
+
border: 2px solid var(--border);
|
|
573
967
|
margin-bottom: 1.5rem;
|
|
574
968
|
text-align: center;
|
|
575
969
|
}
|
|
@@ -577,7 +971,7 @@ button:hover {
|
|
|
577
971
|
.fagan-nomogram h3 {
|
|
578
972
|
margin: 0 0 0.5rem;
|
|
579
973
|
font-size: 1.2rem;
|
|
580
|
-
color: var(--
|
|
974
|
+
color: var(--text-strong);
|
|
581
975
|
}
|
|
582
976
|
|
|
583
977
|
.fagan-nomogram canvas {
|
|
@@ -585,60 +979,1281 @@ button:hover {
|
|
|
585
979
|
width: 600px;
|
|
586
980
|
height: 400px;
|
|
587
981
|
margin-top: 1rem;
|
|
588
|
-
border: 1px solid var(--
|
|
982
|
+
border: 1px solid var(--log-150);
|
|
589
983
|
border-radius: 4px;
|
|
590
984
|
}
|
|
591
985
|
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
986
|
+
.fagan-summary {
|
|
987
|
+
display: grid;
|
|
988
|
+
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
|
989
|
+
gap: 0.5rem 0.75rem;
|
|
990
|
+
margin: 1rem auto 0;
|
|
991
|
+
max-width: 600px;
|
|
992
|
+
padding: 0.75rem 1rem;
|
|
993
|
+
background-color: var(--surface-soft);
|
|
994
|
+
border: 1px solid var(--border);
|
|
995
|
+
border-radius: 6px;
|
|
996
|
+
text-align: left;
|
|
595
997
|
}
|
|
596
998
|
|
|
597
|
-
.
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
background-color: var(--background-color);
|
|
999
|
+
.fagan-summary-item {
|
|
1000
|
+
display: flex;
|
|
1001
|
+
flex-direction: column;
|
|
1002
|
+
gap: 0.1rem;
|
|
1003
|
+
min-width: 0;
|
|
603
1004
|
}
|
|
604
1005
|
|
|
605
|
-
.
|
|
1006
|
+
.fagan-summary-item dt {
|
|
1007
|
+
font-size: 0.72rem;
|
|
606
1008
|
font-weight: 600;
|
|
607
|
-
|
|
1009
|
+
text-transform: uppercase;
|
|
1010
|
+
letter-spacing: 0.05em;
|
|
1011
|
+
color: var(--text-muted);
|
|
1012
|
+
margin: 0;
|
|
608
1013
|
}
|
|
609
1014
|
|
|
610
|
-
.
|
|
611
|
-
margin:
|
|
612
|
-
|
|
613
|
-
|
|
1015
|
+
.fagan-summary-item dd {
|
|
1016
|
+
margin: 0;
|
|
1017
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
1018
|
+
font-variant-numeric: tabular-nums;
|
|
1019
|
+
font-size: 1.05rem;
|
|
1020
|
+
font-weight: 700;
|
|
1021
|
+
color: var(--text);
|
|
1022
|
+
}
|
|
1023
|
+
|
|
1024
|
+
/* ── Unified disclosure marker ─────────────────────────────────────────────
|
|
1025
|
+
One thin outlined chevron for every collapsible panel: two 1.5 px strokes
|
|
1026
|
+
(border-right + border-bottom) rotated 45° so they form a right-pointing
|
|
1027
|
+
"›" rather than a filled triangle. Inherits text colour via currentColor.
|
|
1028
|
+
Rotates to point down on [open]. */
|
|
1029
|
+
.advanced-settings > summary::before,
|
|
1030
|
+
.history-panel > summary::before,
|
|
1031
|
+
.roc-panel > summary::before,
|
|
1032
|
+
.threshold-panel > summary::before,
|
|
1033
|
+
.sequential-test > summary::before,
|
|
1034
|
+
.prevalence-explorer > summary::before {
|
|
1035
|
+
content: "";
|
|
1036
|
+
display: inline-block;
|
|
1037
|
+
width: 6px;
|
|
1038
|
+
height: 6px;
|
|
1039
|
+
margin: 0 0.65em 2px 2px;
|
|
1040
|
+
border-right: 1.5px solid currentColor;
|
|
1041
|
+
border-bottom: 1.5px solid currentColor;
|
|
1042
|
+
transform: rotate(-45deg);
|
|
1043
|
+
vertical-align: middle;
|
|
1044
|
+
opacity: 0.55;
|
|
1045
|
+
transition: transform 0.15s ease;
|
|
1046
|
+
}
|
|
1047
|
+
|
|
1048
|
+
.advanced-settings[open] > summary::before,
|
|
1049
|
+
.history-panel[open] > summary::before,
|
|
1050
|
+
.roc-panel[open] > summary::before,
|
|
1051
|
+
.threshold-panel[open] > summary::before,
|
|
1052
|
+
.sequential-test[open] > summary::before,
|
|
1053
|
+
.prevalence-explorer[open] > summary::before {
|
|
1054
|
+
transform: rotate(45deg);
|
|
1055
|
+
margin-top: -2px;
|
|
1056
|
+
margin-bottom: 0;
|
|
614
1057
|
}
|
|
615
1058
|
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
1059
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1060
|
+
.advanced-settings > summary::before,
|
|
1061
|
+
.history-panel > summary::before,
|
|
1062
|
+
.roc-panel > summary::before,
|
|
1063
|
+
.threshold-panel > summary::before,
|
|
1064
|
+
.sequential-test > summary::before,
|
|
1065
|
+
.prevalence-explorer > summary::before {
|
|
1066
|
+
transition: none;
|
|
1067
|
+
}
|
|
619
1068
|
}
|
|
620
1069
|
|
|
621
|
-
|
|
622
|
-
|
|
1070
|
+
/* ── Summary tags (tool / reference) ───────────────────────────────────────
|
|
1071
|
+
Small badges inside disclosure summaries that mark which panels are
|
|
1072
|
+
interactive tools (filled, Queequeg) and which are read-only reference
|
|
1073
|
+
material (outlined, muted). Sit right after the chevron and before the
|
|
1074
|
+
summary's strong text. */
|
|
1075
|
+
.summary-tag {
|
|
1076
|
+
display: inline-block;
|
|
1077
|
+
margin-right: var(--space-3);
|
|
1078
|
+
padding: 2px var(--space-2);
|
|
1079
|
+
border-radius: 4px;
|
|
1080
|
+
font-size: 0.6875rem;
|
|
1081
|
+
font-weight: 600;
|
|
1082
|
+
text-transform: uppercase;
|
|
1083
|
+
letter-spacing: 0.08em;
|
|
1084
|
+
line-height: 1.4;
|
|
1085
|
+
vertical-align: 2px;
|
|
1086
|
+
white-space: nowrap;
|
|
623
1087
|
}
|
|
624
1088
|
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
display: inline-block;
|
|
629
|
-
cursor: help;
|
|
630
|
-
border-bottom: 1px dotted var(--base-600);
|
|
1089
|
+
.summary-tag--tool {
|
|
1090
|
+
background-color: var(--primary);
|
|
1091
|
+
color: var(--log-50);
|
|
631
1092
|
}
|
|
632
1093
|
|
|
633
|
-
.
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
1094
|
+
.summary-tag--ref {
|
|
1095
|
+
background-color: transparent;
|
|
1096
|
+
border: 1px solid var(--border);
|
|
1097
|
+
color: var(--text-muted);
|
|
1098
|
+
}
|
|
1099
|
+
|
|
1100
|
+
/* Advanced settings (inside the form panel) */
|
|
1101
|
+
.advanced-settings {
|
|
1102
|
+
margin-bottom: 1.25rem;
|
|
1103
|
+
border: 1px dashed var(--border);
|
|
1104
|
+
border-radius: 6px;
|
|
1105
|
+
padding: 0.75rem 1rem;
|
|
1106
|
+
background-color: var(--bg-elevated, transparent);
|
|
1107
|
+
}
|
|
1108
|
+
|
|
1109
|
+
.advanced-settings > summary {
|
|
1110
|
+
cursor: pointer;
|
|
1111
|
+
font-weight: 600;
|
|
1112
|
+
color: var(--text-muted);
|
|
1113
|
+
font-size: 0.85rem;
|
|
1114
|
+
text-transform: uppercase;
|
|
1115
|
+
letter-spacing: 0.06em;
|
|
1116
|
+
list-style: none;
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
.advanced-settings > summary::-webkit-details-marker {
|
|
1120
|
+
display: none;
|
|
1121
|
+
}
|
|
1122
|
+
|
|
1123
|
+
.advanced-settings .form-row {
|
|
1124
|
+
margin: 0.75rem 0 0;
|
|
1125
|
+
}
|
|
1126
|
+
|
|
1127
|
+
/* Calculation history panel */
|
|
1128
|
+
.history-panel {
|
|
1129
|
+
background-color: var(--surface);
|
|
1130
|
+
border: 2px solid var(--border);
|
|
1131
|
+
border-radius: 8px;
|
|
1132
|
+
padding: 1.25rem 1.5rem;
|
|
1133
|
+
margin-top: 1.5rem;
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
.history-panel > summary {
|
|
1137
|
+
cursor: pointer;
|
|
1138
|
+
font-weight: 600;
|
|
1139
|
+
color: var(--text-strong);
|
|
1140
|
+
font-size: 1.05rem;
|
|
1141
|
+
line-height: 1.4;
|
|
1142
|
+
list-style: none;
|
|
1143
|
+
}
|
|
1144
|
+
|
|
1145
|
+
.history-panel > summary::-webkit-details-marker {
|
|
1146
|
+
display: none;
|
|
1147
|
+
}
|
|
1148
|
+
|
|
1149
|
+
.history-list {
|
|
1150
|
+
list-style: none;
|
|
1151
|
+
margin: 1rem 0 0.75rem;
|
|
1152
|
+
padding: 0;
|
|
1153
|
+
display: flex;
|
|
1154
|
+
flex-direction: column;
|
|
1155
|
+
gap: 0.5rem;
|
|
1156
|
+
}
|
|
1157
|
+
|
|
1158
|
+
.history-item {
|
|
1159
|
+
display: grid;
|
|
1160
|
+
grid-template-columns: auto 1fr auto;
|
|
1161
|
+
gap: 0.75rem;
|
|
1162
|
+
align-items: center;
|
|
1163
|
+
background-color: var(--surface-soft);
|
|
1164
|
+
border: 1px solid var(--border);
|
|
1165
|
+
border-radius: 6px;
|
|
1166
|
+
padding: 0.65rem 0.85rem;
|
|
1167
|
+
}
|
|
1168
|
+
|
|
1169
|
+
.history-item input[type="checkbox"] {
|
|
1170
|
+
width: 1rem;
|
|
1171
|
+
height: 1rem;
|
|
1172
|
+
accent-color: var(--primary);
|
|
1173
|
+
cursor: pointer;
|
|
1174
|
+
}
|
|
1175
|
+
|
|
1176
|
+
.history-item-label {
|
|
1177
|
+
display: grid;
|
|
1178
|
+
gap: 0.15rem;
|
|
1179
|
+
cursor: pointer;
|
|
1180
|
+
min-width: 0;
|
|
1181
|
+
}
|
|
1182
|
+
|
|
1183
|
+
.history-item-title {
|
|
1184
|
+
font-weight: 700;
|
|
1185
|
+
color: var(--text);
|
|
1186
|
+
}
|
|
1187
|
+
|
|
1188
|
+
.history-item-meta,
|
|
1189
|
+
.history-item-stats {
|
|
1190
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
1191
|
+
font-variant-numeric: tabular-nums;
|
|
1192
|
+
font-size: 0.78rem;
|
|
1193
|
+
color: var(--text-muted);
|
|
1194
|
+
word-break: break-word;
|
|
1195
|
+
}
|
|
1196
|
+
|
|
1197
|
+
.history-item-date {
|
|
1198
|
+
font-size: 0.72rem;
|
|
1199
|
+
color: var(--text-muted);
|
|
1200
|
+
text-transform: uppercase;
|
|
1201
|
+
letter-spacing: 0.04em;
|
|
1202
|
+
}
|
|
1203
|
+
|
|
1204
|
+
.history-item-actions {
|
|
1205
|
+
display: flex;
|
|
1206
|
+
gap: 0.4rem;
|
|
1207
|
+
}
|
|
1208
|
+
|
|
1209
|
+
.history-item-actions button {
|
|
1210
|
+
width: auto;
|
|
1211
|
+
padding: 0.4rem 0.7rem;
|
|
1212
|
+
font-size: 0.85rem;
|
|
1213
|
+
}
|
|
1214
|
+
|
|
1215
|
+
.history-item-delete {
|
|
1216
|
+
padding: 0.4rem 0.6rem;
|
|
1217
|
+
color: var(--crew-ahab);
|
|
1218
|
+
border-color: var(--border);
|
|
1219
|
+
}
|
|
1220
|
+
|
|
1221
|
+
.history-item-delete:hover {
|
|
1222
|
+
background-color: var(--crew-ahab);
|
|
1223
|
+
color: var(--log-50);
|
|
1224
|
+
}
|
|
1225
|
+
|
|
1226
|
+
.history-compare-table {
|
|
1227
|
+
width: 100%;
|
|
1228
|
+
border-collapse: collapse;
|
|
1229
|
+
font-size: 0.88rem;
|
|
1230
|
+
margin: 0.5rem 0 1rem;
|
|
1231
|
+
}
|
|
1232
|
+
|
|
1233
|
+
.history-compare-table th,
|
|
1234
|
+
.history-compare-table td {
|
|
1235
|
+
padding: 0.45rem 0.7rem;
|
|
1236
|
+
text-align: left;
|
|
1237
|
+
border-bottom: 1px solid var(--border);
|
|
1238
|
+
}
|
|
1239
|
+
|
|
1240
|
+
.history-compare-table thead th {
|
|
1241
|
+
background-color: var(--surface-soft);
|
|
1242
|
+
font-size: 0.78rem;
|
|
1243
|
+
text-transform: uppercase;
|
|
1244
|
+
letter-spacing: 0.05em;
|
|
1245
|
+
color: var(--text-muted);
|
|
1246
|
+
border-bottom-width: 2px;
|
|
1247
|
+
}
|
|
1248
|
+
|
|
1249
|
+
.history-compare-table tbody th {
|
|
1250
|
+
font-weight: 600;
|
|
1251
|
+
color: var(--text-muted);
|
|
1252
|
+
font-size: 0.78rem;
|
|
1253
|
+
text-transform: uppercase;
|
|
1254
|
+
letter-spacing: 0.05em;
|
|
1255
|
+
}
|
|
1256
|
+
|
|
1257
|
+
.history-compare-table tbody td {
|
|
1258
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
1259
|
+
font-variant-numeric: tabular-nums;
|
|
1260
|
+
color: var(--text);
|
|
1261
|
+
font-weight: 600;
|
|
1262
|
+
}
|
|
1263
|
+
|
|
1264
|
+
.history-compare:empty {
|
|
1265
|
+
display: none;
|
|
1266
|
+
}
|
|
1267
|
+
|
|
1268
|
+
@media (max-width: 720px) {
|
|
1269
|
+
.history-item {
|
|
1270
|
+
grid-template-columns: auto 1fr;
|
|
1271
|
+
}
|
|
1272
|
+
.history-item-actions {
|
|
1273
|
+
grid-column: 1 / -1;
|
|
1274
|
+
justify-content: flex-end;
|
|
1275
|
+
}
|
|
1276
|
+
}
|
|
1277
|
+
|
|
1278
|
+
/* STARD critical-appraisal panel */
|
|
1279
|
+
.stard-panel .panel-kicker {
|
|
1280
|
+
color: var(--crew-pip);
|
|
1281
|
+
}
|
|
1282
|
+
|
|
1283
|
+
.stard-panel details {
|
|
1284
|
+
border: 2px solid var(--log-150);
|
|
1285
|
+
border-radius: 4px;
|
|
1286
|
+
padding: 0.85rem 1.1rem;
|
|
1287
|
+
margin-bottom: 0.75rem;
|
|
1288
|
+
background-color: var(--bg);
|
|
1289
|
+
}
|
|
1290
|
+
|
|
1291
|
+
.stard-panel summary {
|
|
1292
|
+
font-weight: 600;
|
|
1293
|
+
cursor: pointer;
|
|
1294
|
+
color: var(--text);
|
|
1295
|
+
}
|
|
1296
|
+
|
|
1297
|
+
.stard-panel details p {
|
|
1298
|
+
margin: 0.6rem 0 0;
|
|
1299
|
+
color: var(--text-muted);
|
|
1300
|
+
font-size: 0.92rem;
|
|
1301
|
+
line-height: 1.55;
|
|
1302
|
+
}
|
|
1303
|
+
|
|
1304
|
+
.stard-panel details em {
|
|
1305
|
+
font-style: italic;
|
|
1306
|
+
color: var(--text);
|
|
1307
|
+
}
|
|
1308
|
+
|
|
1309
|
+
/* Cohen's kappa companion panel */
|
|
1310
|
+
.kappa-panel .panel-kicker {
|
|
1311
|
+
color: var(--crew-tashtego);
|
|
1312
|
+
}
|
|
1313
|
+
|
|
1314
|
+
.kappa-matrix {
|
|
1315
|
+
margin-top: 0.5rem;
|
|
1316
|
+
margin-bottom: 1rem;
|
|
1317
|
+
}
|
|
1318
|
+
|
|
1319
|
+
.kappa-panel .form-actions {
|
|
1320
|
+
grid-template-columns: auto auto;
|
|
1321
|
+
justify-content: flex-start;
|
|
1322
|
+
gap: 0.75rem;
|
|
1323
|
+
}
|
|
1324
|
+
|
|
1325
|
+
.kappa-panel .form-actions button {
|
|
1326
|
+
width: auto;
|
|
1327
|
+
padding: 0.55rem 1.1rem;
|
|
1328
|
+
}
|
|
1329
|
+
|
|
1330
|
+
.kappa-result {
|
|
1331
|
+
display: grid;
|
|
1332
|
+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
1333
|
+
gap: 0.6rem;
|
|
1334
|
+
margin-top: 0.75rem;
|
|
1335
|
+
}
|
|
1336
|
+
|
|
1337
|
+
.kappa-result:empty {
|
|
1338
|
+
display: none;
|
|
1339
|
+
}
|
|
1340
|
+
|
|
1341
|
+
.kappa-stat {
|
|
1342
|
+
background-color: var(--surface-soft);
|
|
1343
|
+
border: 1px solid var(--border);
|
|
1344
|
+
border-radius: 6px;
|
|
1345
|
+
padding: 0.55rem 0.85rem;
|
|
1346
|
+
display: flex;
|
|
1347
|
+
flex-direction: column;
|
|
1348
|
+
gap: 0.2rem;
|
|
1349
|
+
}
|
|
1350
|
+
|
|
1351
|
+
.kappa-stat-label {
|
|
1352
|
+
font-size: 0.72rem;
|
|
1353
|
+
color: var(--text-muted);
|
|
1354
|
+
text-transform: uppercase;
|
|
1355
|
+
letter-spacing: 0.06em;
|
|
1356
|
+
font-weight: 600;
|
|
1357
|
+
}
|
|
1358
|
+
|
|
1359
|
+
.kappa-stat-value {
|
|
1360
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
1361
|
+
font-variant-numeric: tabular-nums;
|
|
1362
|
+
font-size: 1rem;
|
|
1363
|
+
font-weight: 700;
|
|
1364
|
+
color: var(--text);
|
|
1365
|
+
}
|
|
1366
|
+
|
|
1367
|
+
.kappa-error {
|
|
1368
|
+
color: var(--crew-ahab);
|
|
1369
|
+
font-weight: 600;
|
|
1370
|
+
margin: 0;
|
|
1371
|
+
}
|
|
1372
|
+
|
|
1373
|
+
/* ROC reconstruction panel */
|
|
1374
|
+
.roc-panel {
|
|
1375
|
+
background-color: var(--surface);
|
|
1376
|
+
border: 2px solid var(--border);
|
|
1377
|
+
border-radius: 8px;
|
|
1378
|
+
padding: 1.25rem 1.5rem;
|
|
1379
|
+
margin-top: 1.5rem;
|
|
1380
|
+
}
|
|
1381
|
+
|
|
1382
|
+
.roc-panel > summary {
|
|
1383
|
+
cursor: pointer;
|
|
1384
|
+
font-weight: 600;
|
|
1385
|
+
color: var(--text-strong);
|
|
1386
|
+
font-size: 1.05rem;
|
|
1387
|
+
line-height: 1.4;
|
|
1388
|
+
list-style: none;
|
|
1389
|
+
}
|
|
1390
|
+
|
|
1391
|
+
.roc-panel > summary::-webkit-details-marker {
|
|
1392
|
+
display: none;
|
|
1393
|
+
}
|
|
1394
|
+
|
|
1395
|
+
.roc-table-wrapper {
|
|
1396
|
+
overflow-x: auto;
|
|
1397
|
+
margin: 1rem 0;
|
|
1398
|
+
}
|
|
1399
|
+
|
|
1400
|
+
.roc-table {
|
|
1401
|
+
width: 100%;
|
|
1402
|
+
border-collapse: collapse;
|
|
1403
|
+
font-size: 0.9rem;
|
|
1404
|
+
}
|
|
1405
|
+
|
|
1406
|
+
.roc-table th,
|
|
1407
|
+
.roc-table td {
|
|
1408
|
+
padding: 0.45rem 0.5rem;
|
|
1409
|
+
text-align: center;
|
|
1410
|
+
border-bottom: 1px solid var(--border);
|
|
1411
|
+
}
|
|
1412
|
+
|
|
1413
|
+
.roc-table th {
|
|
1414
|
+
font-size: 0.72rem;
|
|
1415
|
+
text-transform: uppercase;
|
|
1416
|
+
letter-spacing: 0.05em;
|
|
1417
|
+
color: var(--text-muted);
|
|
1418
|
+
font-weight: 700;
|
|
1419
|
+
border-bottom-width: 2px;
|
|
1420
|
+
}
|
|
1421
|
+
|
|
1422
|
+
.roc-table input[type="number"] {
|
|
1423
|
+
width: 100%;
|
|
1424
|
+
min-width: 60px;
|
|
1425
|
+
padding: 0.4rem 0.5rem;
|
|
1426
|
+
border: 1px solid var(--border);
|
|
1427
|
+
border-radius: 4px;
|
|
1428
|
+
background-color: var(--bg);
|
|
1429
|
+
color: var(--text);
|
|
1430
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
1431
|
+
font-variant-numeric: tabular-nums;
|
|
1432
|
+
font-size: 0.9rem;
|
|
1433
|
+
}
|
|
1434
|
+
|
|
1435
|
+
.roc-table input[type="number"]:focus {
|
|
1436
|
+
border-color: var(--primary);
|
|
1437
|
+
outline: none;
|
|
1438
|
+
}
|
|
1439
|
+
|
|
1440
|
+
.roc-remove {
|
|
1441
|
+
width: auto;
|
|
1442
|
+
background: transparent;
|
|
1443
|
+
border: 1px solid var(--border);
|
|
1444
|
+
color: var(--crew-ahab);
|
|
1445
|
+
padding: 0.25rem 0.55rem;
|
|
1446
|
+
border-radius: 4px;
|
|
1447
|
+
font-size: 1rem;
|
|
1448
|
+
font-weight: 700;
|
|
1449
|
+
}
|
|
1450
|
+
|
|
1451
|
+
.roc-remove:hover {
|
|
1452
|
+
background-color: var(--crew-ahab);
|
|
1453
|
+
color: var(--log-50);
|
|
1454
|
+
}
|
|
1455
|
+
|
|
1456
|
+
.roc-panel .form-actions {
|
|
1457
|
+
display: flex;
|
|
1458
|
+
flex-wrap: wrap;
|
|
1459
|
+
justify-content: flex-start;
|
|
1460
|
+
gap: 0.75rem;
|
|
1461
|
+
margin: 0.5rem 0 1rem;
|
|
1462
|
+
}
|
|
1463
|
+
|
|
1464
|
+
/* Synthetic rows are scaffolding — fainter so the user can still tell them
|
|
1465
|
+
apart from rows they typed themselves. They become first-class as soon as
|
|
1466
|
+
the user edits any cell (the JS strips the class on input). */
|
|
1467
|
+
.roc-row--synthetic input[type="number"] {
|
|
1468
|
+
color: var(--text-muted);
|
|
1469
|
+
border-style: dashed;
|
|
1470
|
+
}
|
|
1471
|
+
|
|
1472
|
+
.roc-panel .form-actions button {
|
|
1473
|
+
width: auto;
|
|
1474
|
+
padding: 0.6rem 1rem;
|
|
1475
|
+
}
|
|
1476
|
+
|
|
1477
|
+
.roc-panel canvas {
|
|
1478
|
+
display: block;
|
|
1479
|
+
width: 100%;
|
|
1480
|
+
max-width: 480px;
|
|
1481
|
+
aspect-ratio: 1 / 1;
|
|
1482
|
+
height: auto;
|
|
1483
|
+
margin: 0 auto 1rem;
|
|
1484
|
+
border: 1px solid var(--log-150);
|
|
1485
|
+
border-radius: 4px;
|
|
1486
|
+
background: var(--bg);
|
|
1487
|
+
}
|
|
1488
|
+
|
|
1489
|
+
.roc-readout {
|
|
1490
|
+
display: grid;
|
|
1491
|
+
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
1492
|
+
gap: 0.6rem;
|
|
1493
|
+
margin-top: 0.5rem;
|
|
1494
|
+
}
|
|
1495
|
+
|
|
1496
|
+
.roc-flash {
|
|
1497
|
+
grid-column: 1 / -1;
|
|
1498
|
+
margin: 0;
|
|
1499
|
+
padding: 0.55rem 0.85rem;
|
|
1500
|
+
border-radius: 4px;
|
|
1501
|
+
background-color: var(--surface);
|
|
1502
|
+
border-left: 3px solid var(--secondary);
|
|
1503
|
+
color: var(--text);
|
|
1504
|
+
font-size: 0.85rem;
|
|
1505
|
+
line-height: 1.4;
|
|
1506
|
+
}
|
|
1507
|
+
|
|
1508
|
+
.roc-stat {
|
|
1509
|
+
background-color: var(--surface-soft);
|
|
1510
|
+
border: 1px solid var(--border);
|
|
1511
|
+
border-radius: 6px;
|
|
1512
|
+
padding: 0.6rem 0.85rem;
|
|
1513
|
+
display: flex;
|
|
1514
|
+
flex-direction: column;
|
|
1515
|
+
gap: 0.2rem;
|
|
1516
|
+
}
|
|
1517
|
+
|
|
1518
|
+
.roc-stat-label {
|
|
1519
|
+
font-size: 0.72rem;
|
|
1520
|
+
color: var(--text-muted);
|
|
1521
|
+
text-transform: uppercase;
|
|
1522
|
+
letter-spacing: 0.06em;
|
|
1523
|
+
font-weight: 600;
|
|
1524
|
+
}
|
|
1525
|
+
|
|
1526
|
+
.roc-stat-value {
|
|
1527
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
1528
|
+
font-variant-numeric: tabular-nums;
|
|
1529
|
+
font-size: 0.95rem;
|
|
1530
|
+
font-weight: 700;
|
|
1531
|
+
color: var(--text);
|
|
1532
|
+
}
|
|
1533
|
+
|
|
1534
|
+
/* Bias warnings callout */
|
|
1535
|
+
.bias-warnings {
|
|
1536
|
+
display: none;
|
|
1537
|
+
margin: 0 0 1rem;
|
|
1538
|
+
padding: 0.9rem 1.1rem;
|
|
1539
|
+
background-color: var(--surface);
|
|
1540
|
+
border: 1px solid var(--border);
|
|
1541
|
+
border-left: 4px solid var(--crew-pip);
|
|
1542
|
+
border-radius: 6px;
|
|
1543
|
+
color: var(--text);
|
|
1544
|
+
font-size: 0.92rem;
|
|
1545
|
+
}
|
|
1546
|
+
|
|
1547
|
+
.bias-warnings.visible {
|
|
1548
|
+
display: block;
|
|
1549
|
+
}
|
|
1550
|
+
|
|
1551
|
+
.bias-warnings-heading {
|
|
1552
|
+
margin: 0 0 0.4rem;
|
|
1553
|
+
font-weight: 700;
|
|
1554
|
+
color: var(--crew-pip);
|
|
1555
|
+
text-transform: uppercase;
|
|
1556
|
+
letter-spacing: 0.05em;
|
|
1557
|
+
font-size: 0.78rem;
|
|
1558
|
+
}
|
|
1559
|
+
|
|
1560
|
+
.bias-warnings-list {
|
|
1561
|
+
margin: 0;
|
|
1562
|
+
padding-left: 1.2rem;
|
|
1563
|
+
}
|
|
1564
|
+
|
|
1565
|
+
.bias-warnings-list li {
|
|
1566
|
+
margin-bottom: 0.35rem;
|
|
1567
|
+
}
|
|
1568
|
+
|
|
1569
|
+
.bias-warnings-list li:last-child {
|
|
1570
|
+
margin-bottom: 0;
|
|
1571
|
+
}
|
|
1572
|
+
|
|
1573
|
+
/* Pauker–Kassirer decision thresholds */
|
|
1574
|
+
.threshold-panel {
|
|
1575
|
+
background-color: var(--surface);
|
|
1576
|
+
border: 2px solid var(--border);
|
|
1577
|
+
border-radius: 8px;
|
|
1578
|
+
padding: 1.25rem 1.5rem;
|
|
1579
|
+
margin-top: 1.5rem;
|
|
1580
|
+
}
|
|
1581
|
+
|
|
1582
|
+
.threshold-panel > summary {
|
|
1583
|
+
cursor: pointer;
|
|
1584
|
+
font-weight: 600;
|
|
1585
|
+
color: var(--text-strong);
|
|
1586
|
+
font-size: 1.05rem;
|
|
1587
|
+
line-height: 1.4;
|
|
1588
|
+
list-style: none;
|
|
1589
|
+
}
|
|
1590
|
+
|
|
1591
|
+
.threshold-panel > summary::-webkit-details-marker {
|
|
1592
|
+
display: none;
|
|
1593
|
+
}
|
|
1594
|
+
|
|
1595
|
+
.threshold-input {
|
|
1596
|
+
margin: 1rem 0 1.25rem;
|
|
1597
|
+
}
|
|
1598
|
+
|
|
1599
|
+
.threshold-input label {
|
|
1600
|
+
display: flex;
|
|
1601
|
+
justify-content: space-between;
|
|
1602
|
+
align-items: baseline;
|
|
1603
|
+
font-weight: 600;
|
|
1604
|
+
margin-bottom: 0.5rem;
|
|
1605
|
+
color: var(--text);
|
|
1606
|
+
}
|
|
1607
|
+
|
|
1608
|
+
.threshold-input output {
|
|
1609
|
+
font-family: "JetBrains Mono", ui-monospace, monospace;
|
|
1610
|
+
font-variant-numeric: tabular-nums;
|
|
1611
|
+
color: var(--crew-pip);
|
|
1612
|
+
font-weight: 700;
|
|
1613
|
+
font-size: 1.05rem;
|
|
1614
|
+
}
|
|
1615
|
+
|
|
1616
|
+
.threshold-input input[type="range"] {
|
|
1617
|
+
width: 100%;
|
|
1618
|
+
height: 1.5rem;
|
|
1619
|
+
-webkit-appearance: none;
|
|
1620
|
+
appearance: none;
|
|
1621
|
+
background: transparent;
|
|
1622
|
+
cursor: pointer;
|
|
1623
|
+
}
|
|
1624
|
+
|
|
1625
|
+
.threshold-input input[type="range"]::-webkit-slider-runnable-track {
|
|
1626
|
+
height: 6px;
|
|
1627
|
+
background: var(--log-150);
|
|
1628
|
+
border-radius: 3px;
|
|
1629
|
+
}
|
|
1630
|
+
|
|
1631
|
+
.threshold-input input[type="range"]::-webkit-slider-thumb {
|
|
1632
|
+
-webkit-appearance: none;
|
|
1633
|
+
appearance: none;
|
|
1634
|
+
width: 18px;
|
|
1635
|
+
height: 18px;
|
|
1636
|
+
background: var(--crew-pip);
|
|
1637
|
+
border-radius: 50%;
|
|
1638
|
+
margin-top: -6px;
|
|
1639
|
+
cursor: pointer;
|
|
1640
|
+
transition: transform 0.1s;
|
|
1641
|
+
}
|
|
1642
|
+
|
|
1643
|
+
.threshold-input input[type="range"]::-webkit-slider-thumb:hover {
|
|
1644
|
+
transform: scale(1.1);
|
|
1645
|
+
}
|
|
1646
|
+
|
|
1647
|
+
.threshold-input input[type="range"]::-moz-range-track {
|
|
1648
|
+
height: 6px;
|
|
1649
|
+
background: var(--log-150);
|
|
1650
|
+
border-radius: 3px;
|
|
1651
|
+
}
|
|
1652
|
+
|
|
1653
|
+
.threshold-input input[type="range"]::-moz-range-thumb {
|
|
1654
|
+
width: 18px;
|
|
1655
|
+
height: 18px;
|
|
1656
|
+
background: var(--crew-pip);
|
|
1657
|
+
border: none;
|
|
1658
|
+
border-radius: 50%;
|
|
1659
|
+
cursor: pointer;
|
|
1660
|
+
}
|
|
1661
|
+
|
|
1662
|
+
/* :focus ring handled globally by the :focus-visible block near the top. */
|
|
1663
|
+
|
|
1664
|
+
.threshold-gauge {
|
|
1665
|
+
position: relative;
|
|
1666
|
+
display: flex;
|
|
1667
|
+
height: 28px;
|
|
1668
|
+
border-radius: 4px;
|
|
1669
|
+
overflow: hidden;
|
|
1670
|
+
border: 1px solid var(--border);
|
|
1671
|
+
margin: 1rem 0 0.5rem;
|
|
1672
|
+
}
|
|
1673
|
+
|
|
1674
|
+
.threshold-zone {
|
|
1675
|
+
height: 100%;
|
|
1676
|
+
flex-grow: 0;
|
|
1677
|
+
flex-shrink: 0;
|
|
1678
|
+
min-width: 0;
|
|
1679
|
+
}
|
|
1680
|
+
|
|
1681
|
+
.threshold-zone-no { background-color: var(--crew-ahab); opacity: 0.6; }
|
|
1682
|
+
.threshold-zone-test { background-color: var(--crew-pip); opacity: 0.55; }
|
|
1683
|
+
.threshold-zone-treat { background-color: var(--crew-tashtego); opacity: 0.6; }
|
|
1684
|
+
|
|
1685
|
+
.threshold-marker {
|
|
1686
|
+
position: absolute;
|
|
1687
|
+
top: -4px;
|
|
1688
|
+
bottom: -4px;
|
|
1689
|
+
width: 2px;
|
|
1690
|
+
transform: translateX(-50%);
|
|
1691
|
+
pointer-events: none;
|
|
1692
|
+
}
|
|
1693
|
+
|
|
1694
|
+
.threshold-marker-pt {
|
|
1695
|
+
background-color: var(--log-900);
|
|
1696
|
+
}
|
|
1697
|
+
|
|
1698
|
+
.threshold-marker-pt::after {
|
|
1699
|
+
content: "Pt";
|
|
1700
|
+
position: absolute;
|
|
1701
|
+
top: -1.1rem;
|
|
1702
|
+
left: 50%;
|
|
1703
|
+
transform: translateX(-50%);
|
|
1704
|
+
font-size: 0.7rem;
|
|
1705
|
+
font-weight: 700;
|
|
1706
|
+
color: var(--log-900);
|
|
1707
|
+
font-family: "JetBrains Mono", ui-monospace, monospace;
|
|
1708
|
+
}
|
|
1709
|
+
|
|
1710
|
+
.threshold-marker-pre {
|
|
1711
|
+
background-color: var(--crew-queequeg);
|
|
1712
|
+
width: 3px;
|
|
1713
|
+
}
|
|
1714
|
+
|
|
1715
|
+
.threshold-marker-pre::after {
|
|
1716
|
+
content: "▼";
|
|
1717
|
+
position: absolute;
|
|
1718
|
+
bottom: -0.95rem;
|
|
1719
|
+
left: 50%;
|
|
1720
|
+
transform: translateX(-50%);
|
|
1721
|
+
font-size: 0.7rem;
|
|
1722
|
+
color: var(--crew-queequeg);
|
|
1723
|
+
}
|
|
1724
|
+
|
|
1725
|
+
[data-theme="dark"] .threshold-marker-pt {
|
|
1726
|
+
background-color: var(--log-100);
|
|
1727
|
+
}
|
|
1728
|
+
|
|
1729
|
+
[data-theme="dark"] .threshold-marker-pt::after {
|
|
1730
|
+
color: var(--log-100);
|
|
1731
|
+
}
|
|
1732
|
+
|
|
1733
|
+
.threshold-legend {
|
|
1734
|
+
display: flex;
|
|
1735
|
+
flex-wrap: wrap;
|
|
1736
|
+
gap: 0.75rem 1.25rem;
|
|
1737
|
+
margin: 1.5rem 0 1rem;
|
|
1738
|
+
font-size: 0.78rem;
|
|
1739
|
+
color: var(--text-muted);
|
|
1740
|
+
}
|
|
1741
|
+
|
|
1742
|
+
.threshold-legend span {
|
|
1743
|
+
display: inline-flex;
|
|
1744
|
+
align-items: center;
|
|
1745
|
+
gap: 0.4rem;
|
|
1746
|
+
}
|
|
1747
|
+
|
|
1748
|
+
.threshold-swatch {
|
|
1749
|
+
display: inline-block;
|
|
1750
|
+
width: 12px;
|
|
1751
|
+
height: 12px;
|
|
1752
|
+
border-radius: 2px;
|
|
1753
|
+
}
|
|
1754
|
+
|
|
1755
|
+
.threshold-swatch.threshold-zone-no { background-color: var(--crew-ahab); opacity: 0.6; }
|
|
1756
|
+
.threshold-swatch.threshold-zone-test { background-color: var(--crew-pip); opacity: 0.55; }
|
|
1757
|
+
.threshold-swatch.threshold-zone-treat { background-color: var(--crew-tashtego); opacity: 0.6; }
|
|
1758
|
+
.threshold-swatch-pt { background-color: var(--log-900); }
|
|
1759
|
+
.threshold-swatch-pre { background-color: var(--crew-queequeg); }
|
|
1760
|
+
|
|
1761
|
+
[data-theme="dark"] .threshold-swatch-pt { background-color: var(--log-100); }
|
|
1762
|
+
|
|
1763
|
+
.threshold-readout {
|
|
1764
|
+
display: grid;
|
|
1765
|
+
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
1766
|
+
gap: 0.6rem;
|
|
1767
|
+
margin-top: 0.75rem;
|
|
1768
|
+
}
|
|
1769
|
+
|
|
1770
|
+
.threshold-stat {
|
|
1771
|
+
background-color: var(--surface-soft);
|
|
1772
|
+
border: 1px solid var(--border);
|
|
1773
|
+
border-radius: 6px;
|
|
1774
|
+
padding: 0.6rem 0.85rem;
|
|
1775
|
+
display: flex;
|
|
1776
|
+
flex-direction: column;
|
|
1777
|
+
gap: 0.2rem;
|
|
1778
|
+
}
|
|
1779
|
+
|
|
1780
|
+
.threshold-stat-label {
|
|
1781
|
+
font-size: 0.72rem;
|
|
1782
|
+
color: var(--text-muted);
|
|
1783
|
+
text-transform: uppercase;
|
|
1784
|
+
letter-spacing: 0.06em;
|
|
1785
|
+
font-weight: 600;
|
|
1786
|
+
}
|
|
1787
|
+
|
|
1788
|
+
.threshold-stat-value {
|
|
1789
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
1790
|
+
font-variant-numeric: tabular-nums;
|
|
1791
|
+
font-size: 1rem;
|
|
1792
|
+
font-weight: 700;
|
|
1793
|
+
color: var(--text);
|
|
1794
|
+
}
|
|
1795
|
+
|
|
1796
|
+
/* Sequential / chained second test */
|
|
1797
|
+
.sequential-test {
|
|
1798
|
+
background-color: var(--surface);
|
|
1799
|
+
border: 2px solid var(--border);
|
|
1800
|
+
border-radius: 8px;
|
|
1801
|
+
padding: 1.25rem 1.5rem;
|
|
1802
|
+
margin-top: 1.5rem;
|
|
1803
|
+
}
|
|
1804
|
+
|
|
1805
|
+
.sequential-test > summary {
|
|
1806
|
+
cursor: pointer;
|
|
1807
|
+
font-weight: 600;
|
|
1808
|
+
color: var(--text-strong);
|
|
1809
|
+
font-size: 1.05rem;
|
|
1810
|
+
line-height: 1.4;
|
|
1811
|
+
list-style: none;
|
|
1812
|
+
}
|
|
1813
|
+
|
|
1814
|
+
.sequential-test > summary::-webkit-details-marker {
|
|
1815
|
+
display: none;
|
|
1816
|
+
}
|
|
1817
|
+
|
|
1818
|
+
.sequential-controls {
|
|
1819
|
+
margin: 1rem 0 1.25rem;
|
|
1820
|
+
}
|
|
1821
|
+
|
|
1822
|
+
.sequential-controls label {
|
|
1823
|
+
display: flex;
|
|
1824
|
+
flex-direction: column;
|
|
1825
|
+
gap: 0.5rem;
|
|
1826
|
+
font-weight: 600;
|
|
1827
|
+
color: var(--text);
|
|
1828
|
+
}
|
|
1829
|
+
|
|
1830
|
+
.sequential-controls select {
|
|
1831
|
+
margin-top: 0.25rem;
|
|
1832
|
+
}
|
|
1833
|
+
|
|
1834
|
+
.sequential-pretest {
|
|
1835
|
+
margin: 0.85rem 0 0;
|
|
1836
|
+
padding: 0.65rem 0.85rem;
|
|
1837
|
+
background-color: var(--surface-soft);
|
|
1838
|
+
border: 1px solid var(--border);
|
|
1839
|
+
border-left: 4px solid var(--crew-daggoo);
|
|
1840
|
+
border-radius: 4px;
|
|
1841
|
+
font-size: 0.9rem;
|
|
1842
|
+
color: var(--text);
|
|
1843
|
+
}
|
|
1844
|
+
|
|
1845
|
+
.sequential-pretest:empty {
|
|
1846
|
+
display: none;
|
|
1847
|
+
}
|
|
1848
|
+
|
|
1849
|
+
.confusion-matrix.sequential-matrix {
|
|
1850
|
+
margin-top: 0.5rem;
|
|
1851
|
+
margin-bottom: 1rem;
|
|
1852
|
+
}
|
|
1853
|
+
|
|
1854
|
+
.sequential-results:empty {
|
|
1855
|
+
display: none;
|
|
1856
|
+
}
|
|
1857
|
+
|
|
1858
|
+
/* Prevalence sensitivity explorer */
|
|
1859
|
+
.prevalence-explorer {
|
|
1860
|
+
background-color: var(--surface);
|
|
1861
|
+
border: 2px solid var(--border);
|
|
1862
|
+
border-radius: 8px;
|
|
1863
|
+
padding: 1.25rem 1.5rem;
|
|
1864
|
+
margin-top: 1.5rem;
|
|
1865
|
+
}
|
|
1866
|
+
|
|
1867
|
+
.prevalence-explorer > summary {
|
|
1868
|
+
cursor: pointer;
|
|
1869
|
+
font-weight: 600;
|
|
1870
|
+
color: var(--text-strong);
|
|
1871
|
+
font-size: 1.05rem;
|
|
1872
|
+
line-height: 1.4;
|
|
1873
|
+
list-style: none;
|
|
1874
|
+
}
|
|
1875
|
+
|
|
1876
|
+
.prevalence-explorer > summary::-webkit-details-marker {
|
|
1877
|
+
display: none;
|
|
1878
|
+
}
|
|
1879
|
+
|
|
1880
|
+
.prevalence-explorer .help-text {
|
|
1881
|
+
margin: 0.75rem 0 1rem;
|
|
1882
|
+
}
|
|
1883
|
+
|
|
1884
|
+
.prevalence-controls {
|
|
1885
|
+
margin: 1rem 0 1.25rem;
|
|
1886
|
+
}
|
|
1887
|
+
|
|
1888
|
+
.prevalence-controls label {
|
|
1889
|
+
display: flex;
|
|
1890
|
+
justify-content: space-between;
|
|
1891
|
+
align-items: baseline;
|
|
1892
|
+
font-weight: 600;
|
|
1893
|
+
margin-bottom: 0.6rem;
|
|
1894
|
+
color: var(--text);
|
|
1895
|
+
}
|
|
1896
|
+
|
|
1897
|
+
.prevalence-controls output {
|
|
1898
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
1899
|
+
font-variant-numeric: tabular-nums;
|
|
1900
|
+
color: var(--primary);
|
|
1901
|
+
font-weight: 700;
|
|
1902
|
+
font-size: 1.05rem;
|
|
1903
|
+
}
|
|
1904
|
+
|
|
1905
|
+
.prevalence-controls input[type="range"] {
|
|
1906
|
+
width: 100%;
|
|
1907
|
+
height: 1.5rem;
|
|
1908
|
+
-webkit-appearance: none;
|
|
1909
|
+
appearance: none;
|
|
1910
|
+
background: transparent;
|
|
1911
|
+
cursor: pointer;
|
|
1912
|
+
}
|
|
1913
|
+
|
|
1914
|
+
.prevalence-controls input[type="range"]::-webkit-slider-runnable-track {
|
|
1915
|
+
height: 6px;
|
|
1916
|
+
background: var(--log-150);
|
|
1917
|
+
border-radius: 3px;
|
|
1918
|
+
}
|
|
1919
|
+
|
|
1920
|
+
.prevalence-controls input[type="range"]::-webkit-slider-thumb {
|
|
1921
|
+
-webkit-appearance: none;
|
|
1922
|
+
appearance: none;
|
|
1923
|
+
width: 18px;
|
|
1924
|
+
height: 18px;
|
|
1925
|
+
background: var(--primary);
|
|
1926
|
+
border-radius: 50%;
|
|
1927
|
+
margin-top: -6px;
|
|
1928
|
+
cursor: pointer;
|
|
1929
|
+
transition: background-color 0.2s, transform 0.1s;
|
|
1930
|
+
}
|
|
1931
|
+
|
|
1932
|
+
.prevalence-controls input[type="range"]::-webkit-slider-thumb:hover {
|
|
1933
|
+
background: var(--crew-starbuck);
|
|
1934
|
+
transform: scale(1.1);
|
|
1935
|
+
}
|
|
1936
|
+
|
|
1937
|
+
.prevalence-controls input[type="range"]::-moz-range-track {
|
|
1938
|
+
height: 6px;
|
|
1939
|
+
background: var(--log-150);
|
|
1940
|
+
border-radius: 3px;
|
|
1941
|
+
}
|
|
1942
|
+
|
|
1943
|
+
.prevalence-controls input[type="range"]::-moz-range-thumb {
|
|
1944
|
+
width: 18px;
|
|
1945
|
+
height: 18px;
|
|
1946
|
+
background: var(--primary);
|
|
1947
|
+
border: none;
|
|
1948
|
+
border-radius: 50%;
|
|
1949
|
+
cursor: pointer;
|
|
1950
|
+
}
|
|
1951
|
+
|
|
1952
|
+
/* :focus ring handled globally by the :focus-visible block near the top. */
|
|
1953
|
+
|
|
1954
|
+
.prevalence-readout {
|
|
1955
|
+
display: grid;
|
|
1956
|
+
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
1957
|
+
gap: 0.75rem;
|
|
1958
|
+
margin: 1rem 0 1.25rem;
|
|
1959
|
+
}
|
|
1960
|
+
|
|
1961
|
+
.prevalence-stat {
|
|
1962
|
+
background-color: var(--surface-soft);
|
|
1963
|
+
border: 1px solid var(--border);
|
|
1964
|
+
border-radius: 6px;
|
|
1965
|
+
padding: 0.65rem 0.85rem;
|
|
1966
|
+
display: flex;
|
|
1967
|
+
flex-direction: column;
|
|
1968
|
+
gap: 0.2rem;
|
|
1969
|
+
}
|
|
1970
|
+
|
|
1971
|
+
.prevalence-stat-label {
|
|
1972
|
+
font-size: 0.72rem;
|
|
1973
|
+
color: var(--text-muted);
|
|
1974
|
+
text-transform: uppercase;
|
|
1975
|
+
letter-spacing: 0.06em;
|
|
1976
|
+
font-weight: 600;
|
|
1977
|
+
}
|
|
1978
|
+
|
|
1979
|
+
.prevalence-stat-value {
|
|
1980
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
1981
|
+
font-variant-numeric: tabular-nums;
|
|
1982
|
+
font-size: 1.2rem;
|
|
1983
|
+
font-weight: 700;
|
|
1984
|
+
color: var(--text);
|
|
1985
|
+
}
|
|
1986
|
+
|
|
1987
|
+
.prevalence-explorer canvas {
|
|
1988
|
+
width: 100%;
|
|
1989
|
+
max-width: 600px;
|
|
1990
|
+
height: 320px;
|
|
1991
|
+
border: 1px solid var(--log-150);
|
|
1992
|
+
border-radius: 4px;
|
|
1993
|
+
background: var(--bg);
|
|
1994
|
+
display: block;
|
|
1995
|
+
margin: 0 auto;
|
|
1996
|
+
}
|
|
1997
|
+
|
|
1998
|
+
/* ── Threshold explorer demo ────────────────────────────────────────────── */
|
|
1999
|
+
|
|
2000
|
+
.threshold-demo {
|
|
2001
|
+
background-color: var(--surface);
|
|
2002
|
+
border: 2px solid var(--border);
|
|
2003
|
+
border-radius: 8px;
|
|
2004
|
+
padding: 1.25rem 1.5rem;
|
|
2005
|
+
margin-top: 1.5rem;
|
|
2006
|
+
}
|
|
2007
|
+
|
|
2008
|
+
.threshold-demo > summary {
|
|
2009
|
+
cursor: pointer;
|
|
2010
|
+
font-weight: 600;
|
|
2011
|
+
color: var(--text-strong);
|
|
2012
|
+
font-size: 1.05rem;
|
|
2013
|
+
line-height: 1.4;
|
|
2014
|
+
list-style: none;
|
|
2015
|
+
}
|
|
2016
|
+
|
|
2017
|
+
.threshold-demo > summary::-webkit-details-marker {
|
|
2018
|
+
display: none;
|
|
2019
|
+
}
|
|
2020
|
+
|
|
2021
|
+
.threshold-demo .help-text {
|
|
2022
|
+
margin: 0.75rem 0 1rem;
|
|
2023
|
+
}
|
|
2024
|
+
|
|
2025
|
+
.threshold-demo canvas {
|
|
2026
|
+
width: 100%;
|
|
2027
|
+
max-width: 600px;
|
|
2028
|
+
height: 200px;
|
|
2029
|
+
border: 1px solid var(--log-150);
|
|
2030
|
+
border-radius: 4px;
|
|
2031
|
+
background: var(--bg);
|
|
2032
|
+
display: block;
|
|
2033
|
+
margin: 0 auto;
|
|
2034
|
+
}
|
|
2035
|
+
|
|
2036
|
+
.threshold-demo-controls {
|
|
2037
|
+
margin: 1rem 0 1.25rem;
|
|
2038
|
+
}
|
|
2039
|
+
|
|
2040
|
+
.threshold-demo-controls label {
|
|
2041
|
+
display: flex;
|
|
2042
|
+
justify-content: space-between;
|
|
2043
|
+
align-items: baseline;
|
|
2044
|
+
font-weight: 600;
|
|
2045
|
+
margin-bottom: 0.6rem;
|
|
2046
|
+
color: var(--text);
|
|
2047
|
+
}
|
|
2048
|
+
|
|
2049
|
+
.threshold-demo-controls output {
|
|
2050
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
2051
|
+
font-variant-numeric: tabular-nums;
|
|
2052
|
+
color: var(--primary);
|
|
2053
|
+
font-weight: 700;
|
|
2054
|
+
font-size: 1.05rem;
|
|
2055
|
+
}
|
|
2056
|
+
|
|
2057
|
+
.threshold-demo-controls input[type="range"] {
|
|
2058
|
+
width: 100%;
|
|
2059
|
+
height: 1.5rem;
|
|
2060
|
+
-webkit-appearance: none;
|
|
2061
|
+
appearance: none;
|
|
2062
|
+
background: transparent;
|
|
2063
|
+
cursor: pointer;
|
|
2064
|
+
}
|
|
2065
|
+
|
|
2066
|
+
.threshold-demo-controls input[type="range"]::-webkit-slider-runnable-track {
|
|
2067
|
+
height: 6px;
|
|
2068
|
+
background: var(--log-150);
|
|
2069
|
+
border-radius: 3px;
|
|
2070
|
+
}
|
|
2071
|
+
|
|
2072
|
+
.threshold-demo-controls input[type="range"]::-webkit-slider-thumb {
|
|
2073
|
+
-webkit-appearance: none;
|
|
2074
|
+
appearance: none;
|
|
2075
|
+
width: 18px;
|
|
2076
|
+
height: 18px;
|
|
2077
|
+
background: var(--primary);
|
|
2078
|
+
border-radius: 50%;
|
|
2079
|
+
margin-top: -6px;
|
|
2080
|
+
cursor: pointer;
|
|
2081
|
+
transition: background-color 0.2s, transform 0.1s;
|
|
2082
|
+
}
|
|
2083
|
+
|
|
2084
|
+
.threshold-demo-controls input[type="range"]::-webkit-slider-thumb:hover {
|
|
2085
|
+
background: var(--crew-starbuck);
|
|
2086
|
+
transform: scale(1.1);
|
|
2087
|
+
}
|
|
2088
|
+
|
|
2089
|
+
.threshold-demo-controls input[type="range"]::-moz-range-track {
|
|
2090
|
+
height: 6px;
|
|
2091
|
+
background: var(--log-150);
|
|
2092
|
+
border-radius: 3px;
|
|
2093
|
+
}
|
|
2094
|
+
|
|
2095
|
+
.threshold-demo-controls input[type="range"]::-moz-range-thumb {
|
|
2096
|
+
width: 18px;
|
|
2097
|
+
height: 18px;
|
|
2098
|
+
background: var(--primary);
|
|
2099
|
+
border: none;
|
|
2100
|
+
border-radius: 50%;
|
|
2101
|
+
cursor: pointer;
|
|
2102
|
+
}
|
|
2103
|
+
|
|
2104
|
+
.threshold-demo-stats {
|
|
2105
|
+
display: grid;
|
|
2106
|
+
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
2107
|
+
gap: 0.75rem;
|
|
2108
|
+
margin: 1rem 0 1.25rem;
|
|
2109
|
+
}
|
|
2110
|
+
|
|
2111
|
+
.threshold-demo-stat {
|
|
2112
|
+
background-color: var(--surface-soft);
|
|
2113
|
+
border: 1px solid var(--border);
|
|
2114
|
+
border-radius: 6px;
|
|
2115
|
+
padding: 0.65rem 0.85rem;
|
|
2116
|
+
display: flex;
|
|
2117
|
+
flex-direction: column;
|
|
2118
|
+
gap: 0.2rem;
|
|
2119
|
+
}
|
|
2120
|
+
|
|
2121
|
+
.threshold-demo-stat-label {
|
|
2122
|
+
font-size: 0.72rem;
|
|
2123
|
+
color: var(--text-muted);
|
|
2124
|
+
text-transform: uppercase;
|
|
2125
|
+
letter-spacing: 0.06em;
|
|
2126
|
+
font-weight: 600;
|
|
2127
|
+
}
|
|
2128
|
+
|
|
2129
|
+
.threshold-demo-stat-value {
|
|
2130
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
2131
|
+
font-variant-numeric: tabular-nums;
|
|
2132
|
+
font-size: 1.2rem;
|
|
2133
|
+
font-weight: 700;
|
|
2134
|
+
color: var(--text);
|
|
2135
|
+
}
|
|
2136
|
+
|
|
2137
|
+
.threshold-demo-stat-sub {
|
|
2138
|
+
font-size: 0.68rem;
|
|
2139
|
+
color: var(--text-muted);
|
|
2140
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
2141
|
+
}
|
|
2142
|
+
|
|
2143
|
+
.threshold-demo-matrix {
|
|
2144
|
+
display: grid;
|
|
2145
|
+
grid-template-columns: 80px 1fr 1fr;
|
|
2146
|
+
grid-template-rows: 32px 1fr 1fr;
|
|
2147
|
+
gap: 1px;
|
|
2148
|
+
background: var(--border);
|
|
2149
|
+
border-radius: 6px;
|
|
2150
|
+
overflow: hidden;
|
|
2151
|
+
font-size: 0.85rem;
|
|
2152
|
+
margin: 1rem 0;
|
|
2153
|
+
}
|
|
2154
|
+
|
|
2155
|
+
.threshold-demo-cell {
|
|
2156
|
+
background: var(--surface);
|
|
2157
|
+
padding: 0.75rem;
|
|
2158
|
+
display: flex;
|
|
2159
|
+
flex-direction: column;
|
|
2160
|
+
justify-content: center;
|
|
2161
|
+
align-items: center;
|
|
2162
|
+
gap: 0.25rem;
|
|
2163
|
+
}
|
|
2164
|
+
|
|
2165
|
+
.threshold-demo-cell.head {
|
|
2166
|
+
background: var(--surface-soft);
|
|
2167
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
2168
|
+
font-size: 0.68rem;
|
|
2169
|
+
color: var(--text-muted);
|
|
2170
|
+
letter-spacing: 0.04em;
|
|
2171
|
+
text-transform: uppercase;
|
|
2172
|
+
}
|
|
2173
|
+
|
|
2174
|
+
.threshold-demo-cell-n {
|
|
2175
|
+
font-size: 1.4rem;
|
|
2176
|
+
font-weight: 700;
|
|
2177
|
+
font-variant-numeric: tabular-nums;
|
|
2178
|
+
color: var(--text);
|
|
2179
|
+
letter-spacing: -0.01em;
|
|
2180
|
+
}
|
|
2181
|
+
|
|
2182
|
+
.threshold-demo-cell.tp .threshold-demo-cell-n { color: var(--success); }
|
|
2183
|
+
.threshold-demo-cell.tn .threshold-demo-cell-n { color: var(--success); }
|
|
2184
|
+
.threshold-demo-cell.fp .threshold-demo-cell-n { color: var(--error); }
|
|
2185
|
+
.threshold-demo-cell.fn .threshold-demo-cell-n { color: var(--error); }
|
|
2186
|
+
|
|
2187
|
+
.threshold-demo-cell-meta {
|
|
2188
|
+
font-size: 0.68rem;
|
|
2189
|
+
color: var(--text-muted);
|
|
2190
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
2191
|
+
}
|
|
2192
|
+
|
|
2193
|
+
.threshold-demo-note {
|
|
2194
|
+
font-size: 0.85rem;
|
|
2195
|
+
color: var(--text);
|
|
2196
|
+
margin-top: 0.75rem;
|
|
2197
|
+
min-height: 2.2rem;
|
|
2198
|
+
line-height: 1.5;
|
|
2199
|
+
}
|
|
2200
|
+
|
|
2201
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2202
|
+
.threshold-demo-controls input[type="range"]::-webkit-slider-thumb {
|
|
2203
|
+
transition: none;
|
|
2204
|
+
}
|
|
2205
|
+
}
|
|
2206
|
+
|
|
2207
|
+
/* References Section */
|
|
2208
|
+
.references {
|
|
2209
|
+
margin-top: 0;
|
|
2210
|
+
}
|
|
2211
|
+
|
|
2212
|
+
.references details {
|
|
2213
|
+
border: 2px solid var(--log-150);
|
|
2214
|
+
border-radius: 4px;
|
|
2215
|
+
padding: 1rem 1.25rem;
|
|
2216
|
+
margin-bottom: 1rem;
|
|
2217
|
+
background-color: var(--bg);
|
|
2218
|
+
}
|
|
2219
|
+
|
|
2220
|
+
.references summary {
|
|
2221
|
+
font-weight: 600;
|
|
2222
|
+
cursor: pointer;
|
|
2223
|
+
}
|
|
2224
|
+
|
|
2225
|
+
.reference-list {
|
|
2226
|
+
margin: 1rem 0 0;
|
|
2227
|
+
padding-left: 1.5rem;
|
|
2228
|
+
color: var(--text-muted);
|
|
2229
|
+
}
|
|
2230
|
+
|
|
2231
|
+
.reference-list li {
|
|
2232
|
+
margin-bottom: 0.75rem;
|
|
2233
|
+
line-height: 1.6;
|
|
2234
|
+
}
|
|
2235
|
+
|
|
2236
|
+
.reference-list strong {
|
|
2237
|
+
color: var(--text-strong);
|
|
2238
|
+
}
|
|
2239
|
+
|
|
2240
|
+
/* Tooltip */
|
|
2241
|
+
.tooltip {
|
|
2242
|
+
position: relative;
|
|
2243
|
+
display: inline-block;
|
|
2244
|
+
cursor: help;
|
|
2245
|
+
border-bottom: 1px dotted var(--log-400);
|
|
2246
|
+
}
|
|
2247
|
+
|
|
2248
|
+
.tooltip .tooltip-text {
|
|
2249
|
+
visibility: hidden;
|
|
2250
|
+
width: 280px;
|
|
2251
|
+
background-color: var(--log-950);
|
|
2252
|
+
color: var(--log-50);
|
|
2253
|
+
text-align: left;
|
|
2254
|
+
border-radius: 6px;
|
|
2255
|
+
padding: 0.75rem;
|
|
2256
|
+
position: absolute;
|
|
642
2257
|
z-index: 1000;
|
|
643
2258
|
bottom: 125%;
|
|
644
2259
|
left: 50%;
|
|
@@ -647,7 +2262,7 @@ button:hover {
|
|
|
647
2262
|
transition: opacity 0.3s;
|
|
648
2263
|
font-size: 0.85rem;
|
|
649
2264
|
line-height: 1.4;
|
|
650
|
-
border: 2px solid var(--
|
|
2265
|
+
border: 2px solid var(--log-950);
|
|
651
2266
|
}
|
|
652
2267
|
|
|
653
2268
|
.tooltip .tooltip-text::after {
|
|
@@ -658,7 +2273,7 @@ button:hover {
|
|
|
658
2273
|
margin-left: -5px;
|
|
659
2274
|
border-width: 5px;
|
|
660
2275
|
border-style: solid;
|
|
661
|
-
border-color: var(--
|
|
2276
|
+
border-color: var(--log-950) transparent transparent transparent;
|
|
662
2277
|
}
|
|
663
2278
|
|
|
664
2279
|
.tooltip:hover .tooltip-text,
|
|
@@ -667,61 +2282,45 @@ button:hover {
|
|
|
667
2282
|
opacity: 1;
|
|
668
2283
|
}
|
|
669
2284
|
|
|
670
|
-
/* Dark Mode */
|
|
2285
|
+
/* Dark Mode — Glauca Profundum */
|
|
671
2286
|
[data-theme="dark"] {
|
|
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
|
-
--border-color: var(--base-400);
|
|
699
|
-
--text-color: var(--base-1000);
|
|
700
|
-
--muted-text: var(--base-800);
|
|
701
|
-
--success-color: var(--green);
|
|
702
|
-
--accent-warm: var(--orange);
|
|
703
|
-
--page-accent-cool: rgba(67, 133, 190, 0.14);
|
|
704
|
-
--page-accent-warm: rgba(218, 112, 44, 0.08);
|
|
705
|
-
--intro-gradient-end: rgba(28, 27, 26, 0.6);
|
|
706
|
-
--panel-bg: rgba(28, 27, 26, 0.86);
|
|
707
|
-
--panel-soft-bg: rgba(40, 39, 38, 0.9);
|
|
708
|
-
--highlight-bg: rgba(28, 27, 26, 0.82);
|
|
709
|
-
--matrix-bg: rgba(16, 15, 15, 0.82);
|
|
710
|
-
--heading-strong: var(--text-color);
|
|
711
|
-
--reference-bg: var(--base-300);
|
|
712
|
-
--reference-text: var(--text-color);
|
|
713
|
-
--reference-muted: var(--muted-text);
|
|
2287
|
+
/* Crew accents (dark variants) — Glauca hues, brightened for the Profundum ground */
|
|
2288
|
+
--crew-ahab: #E08C8C; /* bacca red */
|
|
2289
|
+
--crew-starbuck: #8FD0FF; /* dies bright — info / focus ring */
|
|
2290
|
+
--crew-queequeg: #3D97FF; /* accent — primary action */
|
|
2291
|
+
--crew-pip: #DCB36A; /* copper — warning / threshold bands */
|
|
2292
|
+
--crew-ishmael: #8C8C8C; /* cinis — Glauca's exact dark muted (5.4:1) */
|
|
2293
|
+
--crew-stubb: #E0A878; /* copper — LR+ trace */
|
|
2294
|
+
--crew-tashtego: #7FC95F; /* folium bright — LR− / success */
|
|
2295
|
+
--crew-daggoo: #D3A26E; /* copper mid — sequential second-stage */
|
|
2296
|
+
|
|
2297
|
+
/* Semantic tokens — legacy slot names, Glauca Profundum values. */
|
|
2298
|
+
--bg: var(--log-950);
|
|
2299
|
+
--surface: var(--log-900);
|
|
2300
|
+
--surface-soft: rgba(16, 22, 28, 0.9);
|
|
2301
|
+
--border: var(--log-700);
|
|
2302
|
+
--text: var(--log-100);
|
|
2303
|
+
--text-strong: var(--log-100);
|
|
2304
|
+
--text-muted: var(--crew-ishmael);
|
|
2305
|
+
--primary: var(--crew-queequeg);
|
|
2306
|
+
--primary-strong: var(--log-100);
|
|
2307
|
+
--secondary: var(--crew-starbuck);
|
|
2308
|
+
--success: var(--crew-tashtego);
|
|
2309
|
+
--warning: var(--crew-pip);
|
|
2310
|
+
--error: var(--crew-ahab);
|
|
2311
|
+
--accent-warm: var(--crew-stubb);
|
|
2312
|
+
--axis: var(--log-300);
|
|
714
2313
|
}
|
|
715
2314
|
|
|
716
2315
|
a {
|
|
717
|
-
color: var(--primary
|
|
2316
|
+
color: var(--primary);
|
|
718
2317
|
text-decoration: none;
|
|
719
|
-
border-bottom: 1px solid var(--
|
|
2318
|
+
border-bottom: 1px solid var(--border);
|
|
720
2319
|
}
|
|
721
2320
|
|
|
722
2321
|
a:hover {
|
|
723
|
-
color: var(--primary-
|
|
724
|
-
border-bottom-color: var(--primary-
|
|
2322
|
+
color: var(--primary-strong);
|
|
2323
|
+
border-bottom-color: var(--primary-strong);
|
|
725
2324
|
}
|
|
726
2325
|
|
|
727
2326
|
@media (max-width: 720px) {
|
|
@@ -736,29 +2335,19 @@ a:hover {
|
|
|
736
2335
|
margin-bottom: 1rem;
|
|
737
2336
|
}
|
|
738
2337
|
|
|
2338
|
+
/* Keep the matrix as a 3-column grid on mobile (narrow label column +
|
|
2339
|
+
two flex input columns). Earlier rules collapsed to 2 columns and
|
|
2340
|
+
hid the row labels — users lost the Test +/Test − context entirely. */
|
|
739
2341
|
.grid-container {
|
|
740
|
-
grid-template-columns:
|
|
741
|
-
gap: 0.
|
|
2342
|
+
grid-template-columns: minmax(48px, max-content) 1fr 1fr;
|
|
2343
|
+
gap: 0.4rem;
|
|
742
2344
|
}
|
|
743
2345
|
|
|
744
2346
|
.grid-header,
|
|
745
2347
|
.grid-label {
|
|
746
|
-
font-size:
|
|
747
|
-
padding: 0.
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
.grid-container .empty {
|
|
751
|
-
display: none;
|
|
752
|
-
}
|
|
753
|
-
|
|
754
|
-
.grid-container span:nth-child(2),
|
|
755
|
-
.grid-container span:nth-child(3) {
|
|
756
|
-
grid-column: span 1;
|
|
757
|
-
}
|
|
758
|
-
|
|
759
|
-
.grid-container label,
|
|
760
|
-
.grid-container .grid-item {
|
|
761
|
-
grid-column: span 1;
|
|
2348
|
+
font-size: var(--text-xs);
|
|
2349
|
+
padding: 0.4rem;
|
|
2350
|
+
line-height: 1.2;
|
|
762
2351
|
}
|
|
763
2352
|
|
|
764
2353
|
.form-actions {
|
|
@@ -806,6 +2395,245 @@ a:hover {
|
|
|
806
2395
|
}
|
|
807
2396
|
}
|
|
808
2397
|
|
|
2398
|
+
@media print {
|
|
2399
|
+
/* Force a clean light theme regardless of the user's current setting */
|
|
2400
|
+
:root,
|
|
2401
|
+
[data-theme="dark"] {
|
|
2402
|
+
--bg: #FFFFFF;
|
|
2403
|
+
--surface: #FFFFFF;
|
|
2404
|
+
--surface-soft: #FFFFFF;
|
|
2405
|
+
--text: #000000;
|
|
2406
|
+
--text-strong: #000000;
|
|
2407
|
+
--text-muted: #444444;
|
|
2408
|
+
--border: #999999;
|
|
2409
|
+
}
|
|
2410
|
+
|
|
2411
|
+
@page {
|
|
2412
|
+
size: A4 portrait;
|
|
2413
|
+
margin: 14mm;
|
|
2414
|
+
}
|
|
2415
|
+
|
|
2416
|
+
body {
|
|
2417
|
+
background-image: none !important;
|
|
2418
|
+
color: #000;
|
|
2419
|
+
font-size: 10pt;
|
|
2420
|
+
line-height: 1.4;
|
|
2421
|
+
}
|
|
2422
|
+
|
|
2423
|
+
.container {
|
|
2424
|
+
width: 100%;
|
|
2425
|
+
padding: 0;
|
|
2426
|
+
}
|
|
2427
|
+
|
|
2428
|
+
/* Hide everything interactive or not essential for the handout */
|
|
2429
|
+
.theme-toggle,
|
|
2430
|
+
.header-controls,
|
|
2431
|
+
.form-actions,
|
|
2432
|
+
.feedback,
|
|
2433
|
+
.advanced-settings,
|
|
2434
|
+
.secondary,
|
|
2435
|
+
button,
|
|
2436
|
+
.results-actions,
|
|
2437
|
+
.bias-warnings,
|
|
2438
|
+
#prevalenceExplorer,
|
|
2439
|
+
#sequentialTest,
|
|
2440
|
+
#thresholdPanel,
|
|
2441
|
+
#rocPanel,
|
|
2442
|
+
#historyPanel,
|
|
2443
|
+
.kappa-panel,
|
|
2444
|
+
.interpretation,
|
|
2445
|
+
.stard-panel,
|
|
2446
|
+
.dataset-reference,
|
|
2447
|
+
#datasetSelect,
|
|
2448
|
+
label[for="datasetSelect"],
|
|
2449
|
+
#dataset-help,
|
|
2450
|
+
footer,
|
|
2451
|
+
script {
|
|
2452
|
+
display: none !important;
|
|
2453
|
+
}
|
|
2454
|
+
|
|
2455
|
+
/* Show the form values but as a printable summary, not the inputs */
|
|
2456
|
+
.workspace {
|
|
2457
|
+
display: block;
|
|
2458
|
+
}
|
|
2459
|
+
|
|
2460
|
+
/* Style inputs as static printable text */
|
|
2461
|
+
.grid-item input,
|
|
2462
|
+
.preTestProb,
|
|
2463
|
+
select {
|
|
2464
|
+
border: 1px solid #999 !important;
|
|
2465
|
+
background: #FFF !important;
|
|
2466
|
+
color: #000 !important;
|
|
2467
|
+
box-shadow: none !important;
|
|
2468
|
+
-webkit-appearance: none;
|
|
2469
|
+
appearance: none;
|
|
2470
|
+
padding: 0.3rem 0.5rem;
|
|
2471
|
+
}
|
|
2472
|
+
|
|
2473
|
+
.grid-header {
|
|
2474
|
+
background: #000 !important;
|
|
2475
|
+
color: #FFF !important;
|
|
2476
|
+
}
|
|
2477
|
+
|
|
2478
|
+
.grid-label {
|
|
2479
|
+
background: #444 !important;
|
|
2480
|
+
color: #FFF !important;
|
|
2481
|
+
}
|
|
2482
|
+
|
|
2483
|
+
/* Force collapsibles open so their content prints */
|
|
2484
|
+
details {
|
|
2485
|
+
display: block !important;
|
|
2486
|
+
}
|
|
2487
|
+
|
|
2488
|
+
details > *:not(summary) {
|
|
2489
|
+
display: revert !important;
|
|
2490
|
+
}
|
|
2491
|
+
|
|
2492
|
+
details summary {
|
|
2493
|
+
list-style: none;
|
|
2494
|
+
cursor: default;
|
|
2495
|
+
font-weight: 700;
|
|
2496
|
+
margin-bottom: 0.4rem;
|
|
2497
|
+
}
|
|
2498
|
+
|
|
2499
|
+
.panel {
|
|
2500
|
+
background: transparent;
|
|
2501
|
+
border: none;
|
|
2502
|
+
padding: 0;
|
|
2503
|
+
backdrop-filter: none;
|
|
2504
|
+
page-break-inside: avoid;
|
|
2505
|
+
}
|
|
2506
|
+
|
|
2507
|
+
.panel-results {
|
|
2508
|
+
margin-top: 1rem;
|
|
2509
|
+
}
|
|
2510
|
+
|
|
2511
|
+
.intro {
|
|
2512
|
+
border-bottom: 1px solid #000;
|
|
2513
|
+
background: transparent;
|
|
2514
|
+
}
|
|
2515
|
+
|
|
2516
|
+
.intro .container {
|
|
2517
|
+
padding: 0 0 0.5rem;
|
|
2518
|
+
}
|
|
2519
|
+
|
|
2520
|
+
.intro-highlights {
|
|
2521
|
+
display: none;
|
|
2522
|
+
}
|
|
2523
|
+
|
|
2524
|
+
h1 {
|
|
2525
|
+
font-size: 18pt;
|
|
2526
|
+
margin: 0 0 0.25rem;
|
|
2527
|
+
}
|
|
2528
|
+
|
|
2529
|
+
h2 {
|
|
2530
|
+
font-size: 13pt;
|
|
2531
|
+
margin: 1rem 0 0.5rem;
|
|
2532
|
+
}
|
|
2533
|
+
|
|
2534
|
+
.lead,
|
|
2535
|
+
.tag,
|
|
2536
|
+
.panel-kicker {
|
|
2537
|
+
display: none;
|
|
2538
|
+
}
|
|
2539
|
+
|
|
2540
|
+
.results-headline,
|
|
2541
|
+
.results-secondary {
|
|
2542
|
+
display: grid;
|
|
2543
|
+
grid-template-columns: repeat(4, 1fr);
|
|
2544
|
+
gap: 0.4rem;
|
|
2545
|
+
margin-bottom: 0.5rem;
|
|
2546
|
+
}
|
|
2547
|
+
|
|
2548
|
+
.results-secondary {
|
|
2549
|
+
grid-template-columns: repeat(3, 1fr);
|
|
2550
|
+
}
|
|
2551
|
+
|
|
2552
|
+
.result-card {
|
|
2553
|
+
background: #FFFFFF;
|
|
2554
|
+
border: 1px solid #BBB;
|
|
2555
|
+
padding: 0.4rem 0.6rem;
|
|
2556
|
+
page-break-inside: avoid;
|
|
2557
|
+
box-shadow: none;
|
|
2558
|
+
}
|
|
2559
|
+
|
|
2560
|
+
.result-card h3 {
|
|
2561
|
+
font-size: 8pt;
|
|
2562
|
+
color: #000;
|
|
2563
|
+
}
|
|
2564
|
+
|
|
2565
|
+
.result-card--lg .result-value {
|
|
2566
|
+
font-size: 13pt;
|
|
2567
|
+
}
|
|
2568
|
+
|
|
2569
|
+
.result-value {
|
|
2570
|
+
font-size: 11pt;
|
|
2571
|
+
}
|
|
2572
|
+
|
|
2573
|
+
.result-ci,
|
|
2574
|
+
.result-note {
|
|
2575
|
+
color: #333;
|
|
2576
|
+
font-size: 8.5pt;
|
|
2577
|
+
}
|
|
2578
|
+
|
|
2579
|
+
.bayesian-update {
|
|
2580
|
+
page-break-inside: avoid;
|
|
2581
|
+
background: #FFF;
|
|
2582
|
+
border: 1px solid #BBB;
|
|
2583
|
+
padding: 0.4rem 0.6rem;
|
|
2584
|
+
margin: 0.4rem 0;
|
|
2585
|
+
}
|
|
2586
|
+
|
|
2587
|
+
.bayesian-axis-trail { background: #444 !important; }
|
|
2588
|
+
.bayesian-axis-pre { background: #FFF; border-color: #444; }
|
|
2589
|
+
.bayesian-axis-post { background: #000 !important; border-color: #FFF; }
|
|
2590
|
+
.bayesian-axis-pre-label, .bayesian-axis-post-label { color: #000; }
|
|
2591
|
+
|
|
2592
|
+
.result-bar { background: #EEE; border-color: #CCC; }
|
|
2593
|
+
.result-bar-fill { background: #444 !important; }
|
|
2594
|
+
|
|
2595
|
+
.result-band { border-color: #CCC; }
|
|
2596
|
+
.result-band-zone { background: #EEE !important; }
|
|
2597
|
+
.result-band-marker { background: #000 !important; border-color: #FFF; }
|
|
2598
|
+
|
|
2599
|
+
.fagan-nomogram {
|
|
2600
|
+
page-break-inside: avoid;
|
|
2601
|
+
background: #FFF;
|
|
2602
|
+
border: 1px solid #BBB;
|
|
2603
|
+
}
|
|
2604
|
+
|
|
2605
|
+
.fagan-summary {
|
|
2606
|
+
background: #FFF;
|
|
2607
|
+
border: 1px solid #BBB;
|
|
2608
|
+
}
|
|
2609
|
+
|
|
2610
|
+
.references {
|
|
2611
|
+
page-break-before: auto;
|
|
2612
|
+
}
|
|
2613
|
+
|
|
2614
|
+
.references details {
|
|
2615
|
+
background: transparent;
|
|
2616
|
+
border: 1px solid #DDD;
|
|
2617
|
+
}
|
|
2618
|
+
|
|
2619
|
+
.references details[open] summary {
|
|
2620
|
+
margin-bottom: 0.5rem;
|
|
2621
|
+
}
|
|
2622
|
+
|
|
2623
|
+
a {
|
|
2624
|
+
color: #000;
|
|
2625
|
+
border-bottom: none;
|
|
2626
|
+
text-decoration: none;
|
|
2627
|
+
}
|
|
2628
|
+
|
|
2629
|
+
a[href^="http"]::after {
|
|
2630
|
+
content: " (" attr(href) ")";
|
|
2631
|
+
font-size: 8pt;
|
|
2632
|
+
color: #555;
|
|
2633
|
+
word-break: break-all;
|
|
2634
|
+
}
|
|
2635
|
+
}
|
|
2636
|
+
|
|
809
2637
|
@media (prefers-reduced-motion: reduce) {
|
|
810
2638
|
*,
|
|
811
2639
|
*::before,
|
|
@@ -816,3 +2644,36 @@ a:hover {
|
|
|
816
2644
|
scroll-behavior: auto !important;
|
|
817
2645
|
}
|
|
818
2646
|
}
|
|
2647
|
+
|
|
2648
|
+
/* Charts must not impose their intrinsic bitmap width on a grid track. */
|
|
2649
|
+
.workspace, .resource-grid {
|
|
2650
|
+
grid-template-columns: minmax(0, 1fr);
|
|
2651
|
+
}
|
|
2652
|
+
.panel, details, .roc-table-wrap {
|
|
2653
|
+
min-width: 0;
|
|
2654
|
+
}
|
|
2655
|
+
.fagan-nomogram canvas, .prevalence-explorer canvas {
|
|
2656
|
+
display: block;
|
|
2657
|
+
width: 100%;
|
|
2658
|
+
max-width: 600px;
|
|
2659
|
+
height: auto;
|
|
2660
|
+
aspect-ratio: 3 / 2;
|
|
2661
|
+
box-sizing: border-box;
|
|
2662
|
+
}
|
|
2663
|
+
.threshold-demo canvas {
|
|
2664
|
+
width: 100%;
|
|
2665
|
+
height: auto;
|
|
2666
|
+
aspect-ratio: 3 / 1;
|
|
2667
|
+
box-sizing: border-box;
|
|
2668
|
+
}
|
|
2669
|
+
.roc-panel canvas {
|
|
2670
|
+
box-sizing: border-box;
|
|
2671
|
+
}
|
|
2672
|
+
@media (min-width: 960px) {
|
|
2673
|
+
.workspace {
|
|
2674
|
+
grid-template-columns: minmax(340px, 34%) minmax(0, 1fr);
|
|
2675
|
+
}
|
|
2676
|
+
.resource-grid {
|
|
2677
|
+
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
|
|
2678
|
+
}
|
|
2679
|
+
}
|