1.detector-lab-page {
2 background: var(--color-cream);
3 overflow: hidden;
4}
5
6.detector-main-shell {
7 height: 100vh;
8 min-height: 0;
9}
10
11.detector-workbench {
12 --detector-sidebar-width: 320px;
13 height: 100vh;
14 min-height: 0;
15 background: var(--color-cream);
16}
17
18.detector-fixture-nav {
19 position: fixed;
20 inset: 0 auto 0 0;
21 z-index: 10;
22 display: flex;
23 flex-direction: column;
24 width: var(--detector-sidebar-width);
25 border-right: 1px solid var(--color-mist);
26 background: var(--color-paper);
27}
28
29.detector-nav-head {
30 flex-shrink: 0;
31 padding: var(--spacing-md);
32 border-bottom: 1px solid var(--color-mist);
33}
34
35.detector-home-link {
36 display: inline-flex;
37 align-items: center;
38 gap: 9px;
39 color: var(--color-ink);
40 text-decoration: none;
41}
42
43.detector-home-link span {
44 display: grid;
45 place-items: center;
46 width: 24px;
47 height: 24px;
48 border-radius: 6px;
49 background: var(--color-ink);
50 color: var(--color-paper);
51 font-family: var(--font-body);
52 font-weight: 700;
53 line-height: 1;
54}
55
56.detector-home-link strong {
57 color: var(--color-ink);
58 font-family: var(--font-display);
59 font-size: 1.125rem;
60 font-weight: 600;
61}
62
63.detector-nav-head h1 {
64 margin-top: var(--spacing-md);
65 font-family: var(--font-body);
66 font-size: 1.25rem;
67 font-weight: 800;
68 line-height: 1.15;
69 letter-spacing: 0;
70}
71
72.detector-nav-head > p {
73 margin-top: 6px;
74 color: var(--color-charcoal);
75 font-size: 0.875rem;
76 line-height: 1.45;
77}
78
79.detector-summary-grid {
80 display: grid;
81 grid-template-columns: repeat(2, minmax(0, 1fr));
82 margin-top: var(--spacing-md);
83 border: 1px solid var(--color-mist);
84}
85
86.detector-summary-grid div {
87 min-width: 0;
88 padding: 10px;
89 border-right: 1px solid var(--color-mist);
90 border-bottom: 1px solid var(--color-mist);
91}
92
93.detector-summary-grid div:nth-child(2n) {
94 border-right: 0;
95}
96
97.detector-summary-grid div:nth-last-child(-n + 2) {
98 border-bottom: 0;
99}
100
101.detector-summary-grid dt,
102.detector-panel-label,
103.detector-nav-group h2,
104.detector-live-stats dt {
105 font-family: var(--font-mono);
106 font-size: 0.6875rem;
107 font-weight: 500;
108 letter-spacing: 0.08em;
109 text-transform: uppercase;
110 color: var(--color-ash);
111}
112
113.detector-summary-grid dd {
114 margin-top: 4px;
115 overflow-wrap: anywhere;
116 color: var(--color-ink);
117 font-size: 1rem;
118 font-weight: 700;
119 line-height: 1.15;
120}
121
122.detector-nav-scroll {
123 min-height: 0;
124 overflow: auto;
125 padding-bottom: var(--spacing-md);
126}
127
128.detector-nav-group {
129 padding: var(--spacing-sm);
130 border-bottom: 1px solid var(--color-mist);
131}
132
133.detector-nav-group:last-child {
134 border-bottom: 0;
135}
136
137.detector-nav-list {
138 display: grid;
139 gap: 4px;
140 margin-top: 10px;
141}
142
143.detector-fixture-button {
144 display: grid;
145 grid-template-columns: minmax(0, 1fr) auto;
146 gap: var(--spacing-sm);
147 align-items: center;
148 width: 100%;
149 min-height: 38px;
150 padding: 8px 10px;
151 border: 1px solid transparent;
152 border-radius: 6px;
153 background: transparent;
154 color: var(--color-charcoal);
155 text-align: left;
156 cursor: pointer;
157 transition:
158 background var(--duration-fast) var(--ease-out),
159 border-color var(--duration-fast) var(--ease-out),
160 color var(--duration-fast) var(--ease-out);
161}
162
163.detector-fixture-button:hover {
164 background: var(--color-cream);
165 color: var(--color-ink);
166}
167
168.detector-fixture-button:focus-visible {
169 outline: 2px solid var(--color-accent);
170 outline-offset: 2px;
171}
172
173.detector-fixture-button[aria-pressed="true"] {
174 background: var(--color-ink);
175 border-color: var(--color-ink);
176 color: var(--color-paper);
177}
178
179.detector-fixture-button span:first-child {
180 overflow: hidden;
181 text-overflow: ellipsis;
182 white-space: nowrap;
183 font-weight: 700;
184}
185
186.detector-fixture-button span:last-child {
187 min-width: 2ch;
188 font-family: var(--font-mono);
189 font-size: 0.75rem;
190 color: currentColor;
191 text-align: right;
192 opacity: 0.72;
193}
194
195.detector-workspace {
196 display: flex;
197 flex-direction: column;
198 min-width: 0;
199 height: 100vh;
200 min-height: 0;
201 margin-left: var(--detector-sidebar-width);
202 overflow: hidden;
203}
204
205.detector-preview-head {
206 position: relative;
207 z-index: 8;
208 display: flex;
209 flex-shrink: 0;
210 justify-content: space-between;
211 gap: var(--spacing-md);
212 align-items: center;
213 min-height: 72px;
214 padding: 12px var(--spacing-md);
215 border-bottom: 1px solid var(--color-mist);
216 background: var(--color-paper);
217}
218
219.detector-preview-head h2,
220.detector-panel-head h2,
221.detector-table-panel h2 {
222 font-family: var(--font-body);
223 font-size: 1rem;
224 font-weight: 800;
225 line-height: 1.2;
226 letter-spacing: 0;
227 color: var(--color-ink);
228}
229
230.detector-preview-head p:not(.detector-panel-label) {
231 max-width: 78ch;
232 margin-top: 4px;
233 color: var(--color-charcoal);
234 font-size: 0.875rem;
235 line-height: 1.45;
236}
237
238.detector-preview-actions {
239 display: flex;
240 align-items: center;
241 gap: var(--spacing-xs);
242 flex-shrink: 0;
243}
244
245.detector-preview-actions a,
246.detector-preview-actions button {
247 display: inline-flex;
248 align-items: center;
249 justify-content: center;
250 min-height: 34px;
251 padding: 0 12px;
252 border: 1px solid var(--color-mist);
253 border-radius: 6px;
254 background: var(--color-paper);
255 color: var(--color-ink);
256 font-size: 0.8125rem;
257 font-weight: 700;
258 text-decoration: none;
259 white-space: nowrap;
260 cursor: pointer;
261 transition:
262 border-color var(--duration-fast) var(--ease-out),
263 color var(--duration-fast) var(--ease-out);
264}
265
266.detector-preview-actions a:hover,
267.detector-preview-actions button:hover {
268 border-color: var(--color-accent);
269 color: var(--color-accent);
270}
271
272.detector-content-grid {
273 display: grid;
274 grid-template-columns: minmax(0, 1fr) 320px;
275 gap: var(--spacing-sm);
276 padding: var(--spacing-sm);
277 align-items: start;
278}
279
280.detector-preview-column,
281.detector-metric-panel,
282.detector-table-panel {
283 min-width: 0;
284 border: 1px solid var(--color-mist);
285 background: var(--color-paper);
286}
287
288.detector-frame-wrap {
289 background: oklch(95% 0.004 350);
290}
291
292.detector-frame-wrap iframe {
293 display: block;
294 width: 100%;
295 height: max(360px, calc(100vh - 156px));
296 min-height: 0;
297 border: 0;
298 background: var(--color-paper);
299}
300
301.detector-workspace-scroll {
302 flex: 1 1 auto;
303 min-height: 0;
304 overflow: auto;
305}
306
307.detector-metrics {
308 position: sticky;
309 top: var(--spacing-sm);
310 display: grid;
311 gap: var(--spacing-sm);
312 max-height: calc(100vh - 104px);
313 overflow: auto;
314}
315
316.detector-metric-panel {
317 overflow: hidden;
318}
319
320.detector-panel-head {
321 padding: var(--spacing-sm);
322 border-bottom: 1px solid var(--color-mist);
323}
324
325.detector-live-stats {
326 display: grid;
327 grid-template-columns: repeat(2, minmax(0, 1fr));
328}
329
330.detector-live-stats div {
331 padding: var(--spacing-sm);
332 border-right: 1px solid var(--color-mist);
333 border-bottom: 1px solid var(--color-mist);
334}
335
336.detector-live-stats div:nth-child(2n) {
337 border-right: 0;
338}
339
340.detector-live-stats dd {
341 margin-top: 4px;
342 font-size: 1.125rem;
343 font-weight: 800;
344 color: var(--color-ink);
345}
346
347.detector-rule-pills {
348 display: flex;
349 flex-wrap: wrap;
350 gap: 6px;
351 padding: var(--spacing-sm);
352}
353
354.detector-rule-pill,
355.detector-empty-pill {
356 display: inline-flex;
357 align-items: center;
358 gap: 6px;
359 max-width: 100%;
360 padding: 5px 7px;
361 border: 1px solid var(--color-mist);
362 border-radius: 6px;
363 background: var(--color-cream);
364 color: var(--color-charcoal);
365 font-size: 0.75rem;
366 line-height: 1.2;
367}
368
369.detector-rule-pill code {
370 min-width: 0;
371 padding: 0;
372 overflow: hidden;
373 background: transparent;
374 color: var(--color-ink);
375 text-overflow: ellipsis;
376 white-space: nowrap;
377}
378
379.detector-rule-pill span {
380 font-family: var(--font-mono);
381 color: var(--color-accent);
382}
383
384.detector-empty-pill {
385 color: var(--color-ash);
386}
387
388.detector-tables {
389 display: grid;
390 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
391 gap: var(--spacing-sm);
392 padding: 0 var(--spacing-sm) var(--spacing-sm);
393}
394
395.detector-table-panel header {
396 display: flex;
397 justify-content: space-between;
398 gap: var(--spacing-md);
399 padding: var(--spacing-sm);
400 border-bottom: 1px solid var(--color-mist);
401}
402
403.detector-table-panel header p:not(.detector-panel-label) {
404 max-width: 28ch;
405 color: var(--color-ash);
406 font-size: 0.8125rem;
407 line-height: 1.45;
408 text-align: right;
409}
410
411.detector-table-scroll {
412 max-height: 420px;
413 overflow: auto;
414}
415
416.detector-table-panel table {
417 width: 100%;
418 min-width: 620px;
419 border-collapse: collapse;
420 font-size: 0.8125rem;
421}
422
423.detector-table-panel th,
424.detector-table-panel td {
425 padding: 8px 10px;
426 border-bottom: 1px solid var(--color-mist);
427 color: var(--color-charcoal);
428 text-align: left;
429 vertical-align: top;
430}
431
432.detector-table-panel th {
433 position: sticky;
434 top: 0;
435 z-index: 1;
436 background: var(--color-paper);
437 font-family: var(--font-mono);
438 font-size: 0.6875rem;
439 font-weight: 500;
440 letter-spacing: 0.04em;
441 text-transform: uppercase;
442 color: var(--color-ash);
443}
444
445.detector-table-panel td code {
446 padding: 0;
447 background: transparent;
448 color: var(--color-ink);
449 font-size: 0.8125rem;
450}
451
452@media (max-width: 1180px) {
453 .detector-workbench {
454 --detector-sidebar-width: 280px;
455 }
456
457 .detector-content-grid {
458 grid-template-columns: minmax(0, 1fr);
459 }
460
461 .detector-metrics {
462 position: static;
463 grid-template-columns: repeat(2, minmax(0, 1fr));
464 max-height: none;
465 overflow: visible;
466 }
467}
468
469@media (max-width: 860px) {
470 .detector-lab-page {
471 overflow: auto;
472 }
473
474 .detector-main-shell,
475 .detector-workbench,
476 .detector-workspace {
477 height: auto;
478 min-height: 100vh;
479 overflow: visible;
480 }
481
482 .detector-fixture-nav {
483 position: static;
484 width: auto;
485 border-right: 0;
486 border-bottom: 1px solid var(--color-mist);
487 }
488
489 .detector-nav-scroll {
490 max-height: 340px;
491 }
492
493 .detector-workspace {
494 margin-left: 0;
495 }
496
497 .detector-workspace-scroll {
498 overflow: visible;
499 }
500
501 .detector-preview-head {
502 position: static;
503 flex-direction: column;
504 align-items: stretch;
505 }
506
507 .detector-preview-actions {
508 flex-wrap: wrap;
509 }
510
511 .detector-metrics,
512 .detector-tables {
513 grid-template-columns: 1fr;
514 }
515
516 .detector-frame-wrap iframe {
517 height: 560px;
518 }
519
520 .detector-table-panel header {
521 flex-direction: column;
522 }
523
524 .detector-table-panel header p:not(.detector-panel-label) {
525 max-width: none;
526 text-align: left;
527 }
528}
529
530@media (max-width: 520px) {
531 .detector-nav-head,
532 .detector-content-grid,
533 .detector-tables {
534 padding-left: var(--spacing-sm);
535 padding-right: var(--spacing-sm);
536 }
537
538 .detector-summary-grid,
539 .detector-live-stats {
540 grid-template-columns: 1fr;
541 }
542
543 .detector-summary-grid div,
544 .detector-live-stats div {
545 border-right: 0;
546 }
547
548 .detector-summary-grid div:nth-last-child(2) {
549 border-bottom: 1px solid var(--color-mist);
550 }
551}