paneltir 0.6.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/dist/style.css ADDED
@@ -0,0 +1,1973 @@
1
+ /* src/styles/base.css */
2
+ .pt-theme-root {
3
+ --pt-radius-panel: 14px;
4
+ --pt-radius-card: 11px;
5
+ --pt-radius-control: 11px;
6
+ --pt-radius-square: 8px;
7
+ --pt-radius-pill: 999px;
8
+ --pt-density: 1;
9
+ --pt-space-xs: calc(6px * var(--pt-density));
10
+ --pt-space-sm: calc(8px * var(--pt-density));
11
+ --pt-space-md: calc(10px * var(--pt-density));
12
+ --pt-space-lg: calc(12px * var(--pt-density));
13
+ --pt-space-page: calc(16px * var(--pt-density));
14
+ --pt-border-width: 1px;
15
+ --pt-font-family:
16
+ -apple-system,
17
+ ui-rounded,
18
+ system-ui,
19
+ sans-serif;
20
+ --pt-font-family-display: var(--pt-font-family);
21
+ --pt-font-mono:
22
+ ui-monospace,
23
+ SFMono-Regular,
24
+ Menlo,
25
+ Consolas,
26
+ monospace;
27
+ --pt-font-size-base: 15px;
28
+ --pt-line-height-base: 1.45;
29
+ --pt-label-tracking: 1.6px;
30
+ position: relative;
31
+ min-height: 100%;
32
+ font-family: var(--pt-font-family);
33
+ font-size: var(--pt-font-size-base);
34
+ line-height: var(--pt-line-height-base);
35
+ color: var(--pt-color-ink);
36
+ background: var(--pt-color-ground);
37
+ background-image:
38
+ linear-gradient(
39
+ to bottom,
40
+ var(--pt-color-ground-raised),
41
+ var(--pt-color-ground) 300px);
42
+ overflow-x: hidden;
43
+ }
44
+ .pt-theme-root,
45
+ .pt-theme-root *,
46
+ .pt-theme-root *::before,
47
+ .pt-theme-root *::after {
48
+ box-sizing: border-box;
49
+ }
50
+ .pt-sr-only {
51
+ position: absolute;
52
+ width: 1px;
53
+ height: 1px;
54
+ padding: 0;
55
+ margin: -1px;
56
+ overflow: hidden;
57
+ clip-path: inset(50%);
58
+ white-space: nowrap;
59
+ border: 0;
60
+ }
61
+ .pt-theme-root :focus-visible {
62
+ outline: 2px solid var(--pt-color-accent);
63
+ outline-offset: 2px;
64
+ }
65
+ @media (prefers-reduced-motion: reduce) {
66
+ .pt-theme-root *,
67
+ .pt-theme-root *::before,
68
+ .pt-theme-root *::after {
69
+ animation-duration: 0.01ms !important;
70
+ animation-iteration-count: 1 !important;
71
+ transition-duration: 0.01ms !important;
72
+ scroll-behavior: auto !important;
73
+ }
74
+ }
75
+
76
+ /* src/styles/primitives.css */
77
+ .pt-btn {
78
+ position: relative;
79
+ display: inline-flex;
80
+ align-items: center;
81
+ justify-content: center;
82
+ gap: 9px;
83
+ padding: 11px 20px;
84
+ border: var(--pt-border-width) solid var(--pt-color-line);
85
+ border-radius: var(--pt-radius-control);
86
+ background: var(--pt-color-panel);
87
+ color: var(--pt-color-ink);
88
+ font: inherit;
89
+ font-size: 13px;
90
+ font-weight: 600;
91
+ letter-spacing: var(--pt-label-tracking);
92
+ text-transform: uppercase;
93
+ text-decoration: none;
94
+ cursor: pointer;
95
+ transition:
96
+ color 0.15s ease,
97
+ border-color 0.15s ease,
98
+ background-color 0.15s ease;
99
+ }
100
+ .pt-btn:hover {
101
+ border-color: var(--pt-color-accent);
102
+ }
103
+ .pt-btn--sm {
104
+ padding: 8px 14px;
105
+ font-size: 11.5px;
106
+ }
107
+ .pt-btn--primary {
108
+ background: var(--pt-color-accent);
109
+ border-color: var(--pt-color-accent);
110
+ color: var(--pt-color-accent-ink);
111
+ }
112
+ .pt-btn[disabled] {
113
+ opacity: 0.45;
114
+ cursor: not-allowed;
115
+ }
116
+ .pt-btn[disabled]:hover {
117
+ border-color: var(--pt-color-line);
118
+ }
119
+ .pt-hud {
120
+ position: relative;
121
+ }
122
+ .pt-section {
123
+ position: relative;
124
+ padding: clamp(44px, 7vw, 78px) 0;
125
+ border-top: var(--pt-border-width) solid var(--pt-color-line-faint);
126
+ }
127
+ .pt-eyebrow {
128
+ display: inline-flex;
129
+ align-items: center;
130
+ gap: 9px;
131
+ margin: 0 0 16px;
132
+ font-family: var(--pt-font-mono);
133
+ font-size: 11px;
134
+ letter-spacing: 0.22em;
135
+ text-transform: uppercase;
136
+ color: var(--pt-color-accent);
137
+ }
138
+ .pt-h2 {
139
+ margin: 0;
140
+ font-family: var(--pt-font-family-display);
141
+ font-size: clamp(1.4rem, 3.2vw, 2rem);
142
+ font-weight: 700;
143
+ letter-spacing: 0.01em;
144
+ text-transform: uppercase;
145
+ }
146
+ .pt-sub {
147
+ margin: 12px 0 0;
148
+ max-width: 64ch;
149
+ font-size: 14.5px;
150
+ line-height: 1.65;
151
+ color: var(--pt-color-ink-dim);
152
+ }
153
+
154
+ /* src/components/Header/Header.css */
155
+ .pt-header {
156
+ position: sticky;
157
+ top: 0;
158
+ z-index: 40;
159
+ display: flex;
160
+ align-items: center;
161
+ gap: var(--pt-space-md);
162
+ padding: var(--pt-space-sm) var(--pt-space-page);
163
+ padding-top: calc(var(--pt-space-sm) + env(safe-area-inset-top));
164
+ background: color-mix(in srgb, var(--pt-color-ground) 72%, transparent);
165
+ backdrop-filter: blur(12px);
166
+ -webkit-backdrop-filter: blur(12px);
167
+ border-bottom: 1px solid var(--pt-color-line-faint);
168
+ }
169
+ .pt-header__wordmark {
170
+ font-size: 13px;
171
+ font-weight: 700;
172
+ letter-spacing: 3.4px;
173
+ text-transform: uppercase;
174
+ color: var(--pt-color-ink);
175
+ white-space: nowrap;
176
+ }
177
+ .pt-header__spacer {
178
+ flex: 1 1 auto;
179
+ }
180
+ .pt-header__status {
181
+ font-size: 12.5px;
182
+ color: var(--pt-color-ink-dim);
183
+ white-space: nowrap;
184
+ }
185
+ .pt-header__controls {
186
+ display: flex;
187
+ align-items: center;
188
+ gap: var(--pt-space-sm);
189
+ }
190
+ .pt-header__link {
191
+ font-size: 12.5px;
192
+ color: var(--pt-color-ink-dim);
193
+ background: none;
194
+ border: none;
195
+ cursor: pointer;
196
+ text-decoration: none;
197
+ white-space: nowrap;
198
+ padding: 0;
199
+ font-family: inherit;
200
+ }
201
+ .pt-header__link:hover {
202
+ color: var(--pt-color-ink);
203
+ }
204
+
205
+ /* src/components/AlertBanner/AlertBanner.css */
206
+ .pt-alert {
207
+ width: 100%;
208
+ padding: var(--pt-space-md) var(--pt-space-page);
209
+ background: color-mix(in srgb, var(--pt-color-danger) 12%, var(--pt-color-ground));
210
+ border-bottom: 1px solid var(--pt-color-danger);
211
+ }
212
+ .pt-alert__message {
213
+ margin: 0;
214
+ font-size: 14px;
215
+ white-space: pre-wrap;
216
+ color: var(--pt-color-ink);
217
+ }
218
+ .pt-alert__action {
219
+ background: none;
220
+ border: none;
221
+ padding: 0;
222
+ color: var(--pt-color-accent);
223
+ text-decoration: underline;
224
+ cursor: pointer;
225
+ font: inherit;
226
+ }
227
+
228
+ /* src/components/StatTiles/StatTiles.css */
229
+ .pt-stat-grid {
230
+ display: grid;
231
+ grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
232
+ gap: var(--pt-space-sm);
233
+ }
234
+ .pt-stat-tile {
235
+ background: var(--pt-color-panel);
236
+ border: 1px solid var(--pt-color-line-faint);
237
+ border-radius: var(--pt-radius-panel);
238
+ padding: var(--pt-space-md);
239
+ }
240
+ .pt-stat-tile__value {
241
+ font-size: 23px;
242
+ font-weight: 700;
243
+ line-height: 1;
244
+ font-variant-numeric: tabular-nums;
245
+ color: var(--pt-color-ink);
246
+ }
247
+ .pt-stat-tile__value.is-calm {
248
+ color: var(--pt-color-ink-dim);
249
+ }
250
+ .pt-stat-tile__value.is-danger {
251
+ color: var(--pt-color-danger);
252
+ }
253
+ .pt-stat-tile__value.is-warning {
254
+ color: var(--pt-color-warning);
255
+ }
256
+ .pt-stat-tile__value.is-success {
257
+ color: var(--pt-color-success);
258
+ }
259
+ .pt-stat-tile__label {
260
+ margin-top: 4px;
261
+ font-size: 10.5px;
262
+ letter-spacing: 0.5px;
263
+ text-transform: uppercase;
264
+ color: var(--pt-color-ink-faint);
265
+ }
266
+
267
+ /* src/components/HealthPills/HealthPills.css */
268
+ .pt-health-row {
269
+ display: flex;
270
+ flex-wrap: wrap;
271
+ gap: var(--pt-space-sm);
272
+ }
273
+ .pt-health-pill {
274
+ display: inline-flex;
275
+ align-items: center;
276
+ gap: 6px;
277
+ padding: 4px 10px;
278
+ border-radius: var(--pt-radius-pill);
279
+ background: var(--pt-color-panel);
280
+ border: 1px solid var(--pt-color-line-faint);
281
+ font-size: 12px;
282
+ }
283
+ .pt-health-pill::before {
284
+ content: "";
285
+ width: 6px;
286
+ height: 6px;
287
+ flex: 0 0 auto;
288
+ border-radius: 50%;
289
+ background: var(--pt-color-neutral);
290
+ }
291
+ .pt-health-pill--ok::before {
292
+ background: var(--pt-color-success);
293
+ }
294
+ .pt-health-pill--warning::before {
295
+ background: var(--pt-color-warning);
296
+ }
297
+ .pt-health-pill--bad::before {
298
+ background: var(--pt-color-danger);
299
+ }
300
+ .pt-health-pill--unknown::before {
301
+ background: var(--pt-color-neutral);
302
+ }
303
+ .pt-health-pill__label {
304
+ color: var(--pt-color-ink-dim);
305
+ }
306
+ .pt-health-pill__value {
307
+ color: var(--pt-color-ink);
308
+ font-weight: 700;
309
+ }
310
+
311
+ /* src/components/FilterChips/FilterChips.css */
312
+ .pt-filter-row {
313
+ display: flex;
314
+ gap: var(--pt-space-sm);
315
+ overflow-x: auto;
316
+ scrollbar-width: none;
317
+ padding-bottom: 2px;
318
+ }
319
+ .pt-filter-row::-webkit-scrollbar {
320
+ display: none;
321
+ }
322
+ .pt-filter-chip {
323
+ flex: 0 0 auto;
324
+ display: inline-flex;
325
+ align-items: center;
326
+ gap: 6px;
327
+ padding: 6px 12px;
328
+ border-radius: var(--pt-radius-pill);
329
+ border: 1px solid var(--pt-color-line-faint);
330
+ background: var(--pt-color-panel);
331
+ color: var(--pt-color-ink);
332
+ font-size: 13px;
333
+ font-family: inherit;
334
+ cursor: pointer;
335
+ }
336
+ .pt-filter-chip__count {
337
+ color: var(--pt-color-ink-faint);
338
+ font-size: 11.5px;
339
+ }
340
+ .pt-filter-chip.is-active {
341
+ background: var(--pt-color-accent);
342
+ color: var(--pt-color-accent-ink);
343
+ border-color: var(--pt-color-accent);
344
+ font-weight: 700;
345
+ }
346
+ .pt-filter-chip.is-active .pt-filter-chip__count {
347
+ color: var(--pt-color-accent-ink);
348
+ opacity: 0.7;
349
+ }
350
+
351
+ /* src/components/Board/Board.css */
352
+ .pt-board {
353
+ display: flex;
354
+ gap: var(--pt-space-lg);
355
+ overflow-x: auto;
356
+ scroll-snap-type: x proximity;
357
+ padding: 0 var(--pt-space-page) var(--pt-space-page);
358
+ }
359
+ .pt-board--dragging {
360
+ scroll-snap-type: none;
361
+ }
362
+ .pt-column {
363
+ flex: 0 0 min(80vw, 300px);
364
+ scroll-snap-align: start;
365
+ background: var(--pt-color-panel);
366
+ border: var(--pt-border-width) solid var(--pt-color-line-faint);
367
+ border-radius: var(--pt-radius-panel);
368
+ max-height: calc(100vh - 250px);
369
+ display: flex;
370
+ flex-direction: column;
371
+ }
372
+ .pt-column__header {
373
+ display: flex;
374
+ align-items: center;
375
+ gap: 6px;
376
+ padding: var(--pt-space-md);
377
+ border-bottom: var(--pt-border-width) solid var(--pt-color-line-faint);
378
+ }
379
+ .pt-column__title {
380
+ font-size: 12px;
381
+ font-family: var(--pt-font-family-display);
382
+ letter-spacing: var(--pt-label-tracking);
383
+ text-transform: uppercase;
384
+ color: var(--pt-color-ink);
385
+ font-weight: 700;
386
+ }
387
+ .pt-column__count {
388
+ color: var(--pt-color-ink-faint);
389
+ font-size: 12px;
390
+ font-variant-numeric: tabular-nums;
391
+ }
392
+ .pt-column__spacer {
393
+ flex: 1 1 auto;
394
+ }
395
+ .pt-column__add {
396
+ width: 22px;
397
+ height: 22px;
398
+ border-radius: var(--pt-radius-square);
399
+ border: 1px solid var(--pt-color-line-faint);
400
+ background: var(--pt-color-raised);
401
+ color: var(--pt-color-ink-dim);
402
+ cursor: pointer;
403
+ line-height: 1;
404
+ }
405
+ .pt-column__list {
406
+ flex: 1 1 auto;
407
+ overflow-y: auto;
408
+ padding: var(--pt-space-md);
409
+ display: flex;
410
+ flex-direction: column;
411
+ gap: var(--pt-space-sm);
412
+ }
413
+ .pt-card-placeholder {
414
+ border: 1px dashed var(--pt-color-line);
415
+ border-radius: var(--pt-radius-card);
416
+ min-height: 46px;
417
+ }
418
+ .pt-card {
419
+ position: relative;
420
+ background: var(--pt-color-raised);
421
+ border-radius: var(--pt-radius-card);
422
+ padding: var(--pt-space-sm) var(--pt-space-sm) var(--pt-space-sm) calc(var(--pt-space-sm) + 6px);
423
+ cursor: pointer;
424
+ }
425
+ .pt-card::before {
426
+ content: "";
427
+ position: absolute;
428
+ left: 0;
429
+ top: 0;
430
+ bottom: 0;
431
+ width: 3px;
432
+ border-radius: var(--pt-radius-card) 0 0 var(--pt-radius-card);
433
+ background: var(--pt-card-stripe, var(--pt-color-neutral));
434
+ }
435
+ .pt-card--dragging-source {
436
+ opacity: 0.35;
437
+ }
438
+ .pt-card__row {
439
+ display: flex;
440
+ align-items: center;
441
+ gap: 6px;
442
+ }
443
+ .pt-card__grip {
444
+ border: none;
445
+ background: none;
446
+ color: var(--pt-color-ink-faint);
447
+ cursor: grab;
448
+ padding: 2px 4px;
449
+ touch-action: none;
450
+ }
451
+ .pt-card__title {
452
+ font-size: 14px;
453
+ font-weight: 600;
454
+ color: var(--pt-color-ink);
455
+ }
456
+ .pt-card__tags {
457
+ display: flex;
458
+ flex-wrap: wrap;
459
+ gap: 4px;
460
+ margin-top: 6px;
461
+ }
462
+ .pt-tag {
463
+ font-size: 10.5px;
464
+ padding: 2px 8px;
465
+ border-radius: var(--pt-radius-pill);
466
+ border: 1px solid var(--pt-color-line);
467
+ color: var(--pt-color-ink-dim);
468
+ }
469
+ .pt-tag--danger {
470
+ color: var(--pt-color-danger);
471
+ border-color: var(--pt-color-danger);
472
+ }
473
+ .pt-tag--warning {
474
+ color: var(--pt-color-warning);
475
+ border-color: var(--pt-color-warning);
476
+ }
477
+ .pt-tag--success {
478
+ color: var(--pt-color-success);
479
+ border-color: var(--pt-color-success);
480
+ }
481
+ .pt-tag--emphasize {
482
+ background: var(--pt-color-accent);
483
+ color: var(--pt-color-accent-ink);
484
+ border-color: var(--pt-color-accent);
485
+ font-weight: 700;
486
+ }
487
+ .pt-card__progress {
488
+ margin-top: 6px;
489
+ font-size: 11.5px;
490
+ font-variant-numeric: tabular-nums;
491
+ color: var(--pt-color-ink-dim);
492
+ }
493
+ .pt-card__progress.is-complete {
494
+ color: var(--pt-color-success);
495
+ }
496
+ .pt-board__clone-layer {
497
+ position: fixed;
498
+ inset: 0;
499
+ pointer-events: none;
500
+ z-index: 500;
501
+ }
502
+ .pt-card--clone {
503
+ position: fixed;
504
+ top: 0;
505
+ left: 0;
506
+ pointer-events: none;
507
+ opacity: 0.95;
508
+ box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
509
+ will-change: transform;
510
+ }
511
+ [data-pt-form=ledger] .pt-board {
512
+ gap: var(--pt-space-page);
513
+ }
514
+ [data-pt-form=ledger] .pt-column {
515
+ background: none;
516
+ border: none;
517
+ border-top: 2px solid var(--pt-color-accent);
518
+ border-radius: 0;
519
+ }
520
+ [data-pt-form=ledger] .pt-column__header {
521
+ padding: var(--pt-space-md) var(--pt-space-xs) var(--pt-space-sm);
522
+ border-bottom: var(--pt-border-width) solid var(--pt-color-line);
523
+ }
524
+ [data-pt-form=ledger] .pt-column__title {
525
+ font-weight: 600;
526
+ font-size: 11.5px;
527
+ }
528
+ [data-pt-form=ledger] .pt-column__count {
529
+ font-family: var(--pt-font-family-display);
530
+ }
531
+ [data-pt-form=ledger] .pt-column__add {
532
+ border-radius: 0;
533
+ background: none;
534
+ border-color: var(--pt-color-line);
535
+ }
536
+ [data-pt-form=ledger] .pt-column__list {
537
+ padding: 0 var(--pt-space-xs);
538
+ gap: 0;
539
+ }
540
+ [data-pt-form=ledger] .pt-card {
541
+ background: none;
542
+ border-radius: 0;
543
+ border-bottom: var(--pt-border-width) solid var(--pt-color-line-faint);
544
+ padding: var(--pt-space-md) var(--pt-space-xs) var(--pt-space-md) var(--pt-space-lg);
545
+ }
546
+ [data-pt-form=ledger] .pt-card:hover {
547
+ background: var(--pt-color-panel);
548
+ }
549
+ [data-pt-form=ledger] .pt-card::before {
550
+ top: calc(var(--pt-space-md) + 5px);
551
+ bottom: auto;
552
+ width: 5px;
553
+ height: 5px;
554
+ border-radius: 0;
555
+ transform: rotate(45deg);
556
+ }
557
+ [data-pt-form=ledger] .pt-card__title {
558
+ font-family: var(--pt-font-family-display);
559
+ font-weight: 500;
560
+ letter-spacing: 0.01em;
561
+ }
562
+ [data-pt-form=ledger] .pt-card-placeholder {
563
+ border: none;
564
+ border-bottom: var(--pt-border-width) dashed var(--pt-color-line);
565
+ border-radius: 0;
566
+ }
567
+ [data-pt-form=ledger] .pt-card__tags {
568
+ gap: 0;
569
+ margin-top: 5px;
570
+ }
571
+ [data-pt-form=ledger] .pt-tag {
572
+ border: none;
573
+ border-radius: 0;
574
+ padding: 0;
575
+ font-family: var(--pt-font-family-display);
576
+ font-size: 10px;
577
+ letter-spacing: var(--pt-label-tracking);
578
+ text-transform: uppercase;
579
+ }
580
+ [data-pt-form=ledger] .pt-tag + .pt-tag::before {
581
+ content: "\b7";
582
+ margin: 0 6px;
583
+ color: var(--pt-color-ink-faint);
584
+ }
585
+ [data-pt-form=ledger] .pt-tag--emphasize {
586
+ background: none;
587
+ color: var(--pt-color-accent);
588
+ font-weight: 700;
589
+ }
590
+ [data-pt-form=ledger] .pt-card__progress {
591
+ font-family: var(--pt-font-family-display);
592
+ }
593
+ [data-pt-form=ledger] .pt-card--clone {
594
+ background: var(--pt-color-panel);
595
+ box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
596
+ }
597
+
598
+ /* src/components/DetailSheet/DetailSheet.css */
599
+ .pt-sheet-backdrop {
600
+ position: fixed;
601
+ inset: 0;
602
+ background: color-mix(in srgb, var(--pt-color-ground) 55%, transparent);
603
+ backdrop-filter: blur(4px);
604
+ -webkit-backdrop-filter: blur(4px);
605
+ display: flex;
606
+ align-items: flex-end;
607
+ justify-content: center;
608
+ z-index: 600;
609
+ }
610
+ .pt-sheet {
611
+ background: var(--pt-color-ground-raised);
612
+ border: 1px solid var(--pt-color-line-faint);
613
+ width: 100%;
614
+ max-height: 88vh;
615
+ overflow-y: auto;
616
+ border-radius: calc(var(--pt-radius-panel) + 2px) calc(var(--pt-radius-panel) + 2px) 0 0;
617
+ padding: var(--pt-space-page);
618
+ padding-bottom: calc(var(--pt-space-page) + env(safe-area-inset-bottom));
619
+ }
620
+ .pt-sheet__handle {
621
+ width: 36px;
622
+ height: 4px;
623
+ border-radius: var(--pt-radius-pill);
624
+ background: var(--pt-color-line);
625
+ margin: 0 auto 12px;
626
+ }
627
+ @media (min-width: 760px) {
628
+ .pt-sheet-backdrop {
629
+ align-items: center;
630
+ }
631
+ .pt-sheet {
632
+ width: 640px;
633
+ max-width: calc(100vw - 48px);
634
+ border-radius: var(--pt-radius-panel);
635
+ }
636
+ .pt-sheet__handle {
637
+ display: none;
638
+ }
639
+ }
640
+ .pt-detail-section {
641
+ margin-bottom: var(--pt-space-lg);
642
+ }
643
+ .pt-detail-section__title {
644
+ font-size: 11px;
645
+ letter-spacing: 1.5px;
646
+ text-transform: uppercase;
647
+ color: var(--pt-color-ink-faint);
648
+ margin: 0 0 6px;
649
+ font-weight: 600;
650
+ }
651
+ .pt-detail-section__subtitle {
652
+ text-transform: none;
653
+ letter-spacing: 0;
654
+ }
655
+
656
+ /* src/components/Guide/Guide.css */
657
+ .pt-guide {
658
+ position: relative;
659
+ margin: var(--pt-space-md) var(--pt-space-page);
660
+ padding: var(--pt-space-md) var(--pt-space-lg);
661
+ background: var(--pt-color-panel);
662
+ border: var(--pt-border-width) solid var(--pt-color-line);
663
+ border-left: 3px solid var(--pt-color-accent);
664
+ border-radius: var(--pt-radius-panel);
665
+ }
666
+ .pt-guide__head {
667
+ display: flex;
668
+ align-items: baseline;
669
+ gap: var(--pt-space-sm);
670
+ }
671
+ .pt-guide__title {
672
+ margin: 0;
673
+ flex: 1 1 auto;
674
+ font-family: var(--pt-font-family-display);
675
+ font-size: 13.5px;
676
+ font-weight: 700;
677
+ color: var(--pt-color-ink);
678
+ }
679
+ .pt-guide__step {
680
+ flex: none;
681
+ font-size: 11px;
682
+ font-variant-numeric: tabular-nums;
683
+ color: var(--pt-color-ink-faint);
684
+ }
685
+ .pt-guide__body {
686
+ margin-top: 5px;
687
+ font-size: 13px;
688
+ line-height: 1.5;
689
+ color: var(--pt-color-ink-dim);
690
+ }
691
+ .pt-guide__body p {
692
+ margin: 0 0 6px;
693
+ }
694
+ .pt-guide__body p:last-child {
695
+ margin-bottom: 0;
696
+ }
697
+ .pt-guide__body code {
698
+ font-size: 12px;
699
+ padding: 1px 5px;
700
+ border-radius: var(--pt-radius-square);
701
+ background: var(--pt-color-raised);
702
+ color: var(--pt-color-ink);
703
+ }
704
+ .pt-guide__actions {
705
+ display: flex;
706
+ flex-wrap: wrap;
707
+ gap: var(--pt-space-sm);
708
+ margin-top: var(--pt-space-md);
709
+ }
710
+ .pt-guide__do,
711
+ .pt-guide__dismiss {
712
+ font: inherit;
713
+ font-size: 12px;
714
+ padding: 6px 12px;
715
+ border-radius: var(--pt-radius-control);
716
+ cursor: pointer;
717
+ }
718
+ .pt-guide__do {
719
+ border: none;
720
+ background: var(--pt-color-accent);
721
+ color: var(--pt-color-accent-ink);
722
+ font-weight: 700;
723
+ }
724
+ .pt-guide__dismiss {
725
+ border: var(--pt-border-width) solid var(--pt-color-line);
726
+ background: none;
727
+ color: var(--pt-color-ink-dim);
728
+ }
729
+ .pt-guide__dismiss:hover {
730
+ color: var(--pt-color-ink);
731
+ }
732
+ @media (max-width: 640px) {
733
+ .pt-guide {
734
+ margin-inline: var(--pt-space-sm);
735
+ }
736
+ }
737
+
738
+ /* src/components/Setup/SetupGuide.css */
739
+ .pt-setup__list {
740
+ list-style: none;
741
+ margin: 0;
742
+ padding: 0;
743
+ }
744
+ .pt-setup__item {
745
+ display: flex;
746
+ gap: var(--pt-space-sm);
747
+ padding: var(--pt-space-md) 0;
748
+ border-bottom: var(--pt-border-width) solid var(--pt-color-line-faint);
749
+ }
750
+ .pt-setup__item:last-child {
751
+ border-bottom: none;
752
+ }
753
+ .pt-setup__mark {
754
+ flex: none;
755
+ width: 9px;
756
+ height: 9px;
757
+ margin-top: 5px;
758
+ border-radius: var(--pt-radius-pill);
759
+ background: var(--pt-color-neutral);
760
+ }
761
+ .pt-setup__item.is-ok .pt-setup__mark {
762
+ background: var(--pt-color-success);
763
+ }
764
+ .pt-setup__item.is-missing .pt-setup__mark {
765
+ background: var(--pt-color-warning);
766
+ }
767
+ .pt-setup__main {
768
+ flex: 1 1 auto;
769
+ min-width: 0;
770
+ }
771
+ .pt-setup__label {
772
+ display: flex;
773
+ flex-wrap: wrap;
774
+ align-items: baseline;
775
+ gap: var(--pt-space-sm);
776
+ margin: 0;
777
+ font-size: 13.5px;
778
+ font-weight: 600;
779
+ color: var(--pt-color-ink);
780
+ }
781
+ .pt-setup__state {
782
+ font-size: 11px;
783
+ font-weight: 500;
784
+ letter-spacing: var(--pt-label-tracking);
785
+ text-transform: uppercase;
786
+ color: var(--pt-color-ink-faint);
787
+ }
788
+ .pt-setup__item.is-ok .pt-setup__state {
789
+ color: var(--pt-color-success);
790
+ }
791
+ .pt-setup__item.is-missing .pt-setup__state {
792
+ color: var(--pt-color-warning);
793
+ }
794
+ .pt-setup__var {
795
+ margin: 3px 0 0;
796
+ font-size: 11.5px;
797
+ font-variant-numeric: tabular-nums;
798
+ color: var(--pt-color-ink-faint);
799
+ }
800
+ .pt-setup__enables {
801
+ margin: 4px 0 0;
802
+ font-size: 12.5px;
803
+ line-height: 1.45;
804
+ color: var(--pt-color-ink-dim);
805
+ }
806
+ .pt-setup__fix {
807
+ margin-top: var(--pt-space-sm);
808
+ padding: var(--pt-space-sm) var(--pt-space-md);
809
+ background: var(--pt-color-raised);
810
+ border-radius: var(--pt-radius-card);
811
+ font-size: 12.5px;
812
+ line-height: 1.5;
813
+ color: var(--pt-color-ink-dim);
814
+ }
815
+ .pt-setup__fix-title {
816
+ margin: 0 0 4px;
817
+ font-size: 10.5px;
818
+ letter-spacing: var(--pt-label-tracking);
819
+ text-transform: uppercase;
820
+ color: var(--pt-color-ink-faint);
821
+ }
822
+ .pt-setup__fix ol,
823
+ .pt-setup__fix ul {
824
+ margin: 0;
825
+ padding-left: 18px;
826
+ }
827
+ .pt-setup__fix li {
828
+ margin-bottom: 3px;
829
+ }
830
+ .pt-setup__fix code {
831
+ font-size: 12px;
832
+ padding: 1px 5px;
833
+ border-radius: var(--pt-radius-square);
834
+ background: var(--pt-color-panel);
835
+ color: var(--pt-color-ink);
836
+ overflow-wrap: anywhere;
837
+ }
838
+ .pt-setup__ready {
839
+ margin: var(--pt-space-md) 0 0;
840
+ font-size: 12.5px;
841
+ color: var(--pt-color-success);
842
+ }
843
+
844
+ /* src/components/Notifications/Notifications.css */
845
+ .pt-bell {
846
+ position: relative;
847
+ display: inline-flex;
848
+ }
849
+ .pt-bell__button {
850
+ position: relative;
851
+ display: inline-flex;
852
+ align-items: center;
853
+ justify-content: center;
854
+ width: 30px;
855
+ height: 26px;
856
+ padding: 0;
857
+ border: var(--pt-border-width) solid var(--pt-color-line);
858
+ border-radius: var(--pt-radius-control);
859
+ background: none;
860
+ color: var(--pt-color-ink-dim);
861
+ cursor: pointer;
862
+ }
863
+ .pt-bell__button:hover,
864
+ .pt-bell__button[aria-expanded=true] {
865
+ color: var(--pt-color-ink);
866
+ border-color: var(--pt-color-line);
867
+ }
868
+ .pt-bell__button.has-unread {
869
+ color: var(--pt-color-accent);
870
+ border-color: var(--pt-color-accent);
871
+ }
872
+ .pt-bell__icon {
873
+ display: inline-flex;
874
+ }
875
+ .pt-bell__count {
876
+ position: absolute;
877
+ top: -6px;
878
+ right: -6px;
879
+ min-width: 15px;
880
+ padding: 0 3px;
881
+ border-radius: var(--pt-radius-pill);
882
+ background: var(--pt-color-accent);
883
+ color: var(--pt-color-accent-ink);
884
+ font-size: 10px;
885
+ font-weight: 700;
886
+ line-height: 15px;
887
+ text-align: center;
888
+ font-variant-numeric: tabular-nums;
889
+ }
890
+ .pt-bell__panel {
891
+ position: absolute;
892
+ top: calc(100% + 8px);
893
+ right: 0;
894
+ z-index: 40;
895
+ width: min(92vw, 340px);
896
+ max-height: min(70vh, 460px);
897
+ overflow-y: auto;
898
+ padding: var(--pt-space-sm);
899
+ background: var(--pt-color-ground-raised);
900
+ border: var(--pt-border-width) solid var(--pt-color-line);
901
+ border-radius: var(--pt-radius-panel);
902
+ box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
903
+ }
904
+ .pt-bell__head {
905
+ display: flex;
906
+ align-items: baseline;
907
+ gap: var(--pt-space-sm);
908
+ padding: var(--pt-space-xs) var(--pt-space-sm) var(--pt-space-sm);
909
+ }
910
+ .pt-bell__title {
911
+ flex: 1 1 auto;
912
+ margin: 0;
913
+ font-family: var(--pt-font-family-display);
914
+ font-size: 11px;
915
+ letter-spacing: var(--pt-label-tracking);
916
+ text-transform: uppercase;
917
+ color: var(--pt-color-ink-faint);
918
+ }
919
+ .pt-bell__all {
920
+ flex: none;
921
+ padding: 0;
922
+ border: none;
923
+ background: none;
924
+ font: inherit;
925
+ font-size: 11.5px;
926
+ color: var(--pt-color-accent);
927
+ cursor: pointer;
928
+ }
929
+ .pt-bell__empty {
930
+ margin: 0;
931
+ padding: var(--pt-space-sm) var(--pt-space-sm) var(--pt-space-md);
932
+ font-size: 12.5px;
933
+ color: var(--pt-color-ink-dim);
934
+ }
935
+ .pt-bell__list {
936
+ list-style: none;
937
+ margin: 0;
938
+ padding: 0;
939
+ }
940
+ .pt-bell__item {
941
+ display: flex;
942
+ gap: var(--pt-space-sm);
943
+ width: 100%;
944
+ padding: var(--pt-space-sm);
945
+ border: none;
946
+ border-radius: var(--pt-radius-card);
947
+ background: none;
948
+ font: inherit;
949
+ text-align: left;
950
+ cursor: pointer;
951
+ }
952
+ .pt-bell__item:hover {
953
+ background: var(--pt-color-panel);
954
+ }
955
+ .pt-bell__mark {
956
+ flex: none;
957
+ width: 7px;
958
+ height: 7px;
959
+ margin-top: 6px;
960
+ border-radius: var(--pt-radius-pill);
961
+ background: var(--pt-color-neutral);
962
+ }
963
+ .pt-bell__item.is-attention .pt-bell__mark {
964
+ background: var(--pt-color-warning);
965
+ }
966
+ .pt-bell__body {
967
+ display: block;
968
+ min-width: 0;
969
+ }
970
+ .pt-bell__item-title {
971
+ display: block;
972
+ font-size: 13px;
973
+ font-weight: 600;
974
+ color: var(--pt-color-ink);
975
+ }
976
+ .pt-bell__detail {
977
+ display: block;
978
+ margin-top: 2px;
979
+ font-size: 12.5px;
980
+ line-height: 1.45;
981
+ color: var(--pt-color-ink-dim);
982
+ }
983
+ .pt-bell__at {
984
+ display: block;
985
+ margin-top: 3px;
986
+ font-size: 11px;
987
+ font-variant-numeric: tabular-nums;
988
+ color: var(--pt-color-ink-faint);
989
+ }
990
+
991
+ /* src/components/CopyBlock/CopyBlock.css */
992
+ .pt-copy {
993
+ display: block;
994
+ }
995
+ .pt-copy__head {
996
+ display: flex;
997
+ justify-content: space-between;
998
+ align-items: flex-start;
999
+ gap: 12px;
1000
+ margin-bottom: 8px;
1001
+ }
1002
+ .pt-copy__meta {
1003
+ min-width: 0;
1004
+ }
1005
+ .pt-copy__label {
1006
+ margin: 0;
1007
+ font-size: 12px;
1008
+ font-weight: 600;
1009
+ letter-spacing: 0.06em;
1010
+ text-transform: uppercase;
1011
+ color: var(--pt-color-ink);
1012
+ }
1013
+ .pt-copy__note {
1014
+ margin: 5px 0 0;
1015
+ font-size: 12px;
1016
+ line-height: 1.6;
1017
+ color: var(--pt-color-ink-faint);
1018
+ }
1019
+ .pt-copy__body {
1020
+ border: var(--pt-border-width) solid var(--pt-color-line);
1021
+ border-radius: var(--pt-radius-control);
1022
+ background: var(--pt-color-raised);
1023
+ }
1024
+ .pt-copy__text {
1025
+ margin: 0;
1026
+ padding: 12px 14px;
1027
+ max-height: 320px;
1028
+ overflow: auto;
1029
+ font-family:
1030
+ ui-monospace,
1031
+ SFMono-Regular,
1032
+ Menlo,
1033
+ Consolas,
1034
+ monospace;
1035
+ font-size: 12px;
1036
+ line-height: 1.65;
1037
+ color: var(--pt-color-ink-dim);
1038
+ white-space: pre;
1039
+ tab-size: 2;
1040
+ }
1041
+ .pt-copy__button {
1042
+ flex: none;
1043
+ margin-left: auto;
1044
+ padding: 5px 11px;
1045
+ border: var(--pt-border-width) solid var(--pt-color-line);
1046
+ border-radius: var(--pt-radius-control);
1047
+ background: var(--pt-color-panel);
1048
+ color: var(--pt-color-ink-dim);
1049
+ font: inherit;
1050
+ font-size: 11px;
1051
+ letter-spacing: 0.08em;
1052
+ text-transform: uppercase;
1053
+ cursor: pointer;
1054
+ }
1055
+ .pt-copy__button:hover {
1056
+ color: var(--pt-color-ink);
1057
+ border-color: var(--pt-color-ink-faint);
1058
+ }
1059
+ .pt-copy__button:focus-visible {
1060
+ outline: 2px solid var(--pt-color-accent);
1061
+ outline-offset: 2px;
1062
+ }
1063
+
1064
+ /* src/panel/panel.css */
1065
+ .pt-panel-page {
1066
+ max-width: 1120px;
1067
+ margin: 0 auto;
1068
+ padding: var(--pt-space-page);
1069
+ display: grid;
1070
+ gap: var(--pt-space-lg);
1071
+ }
1072
+ .pt-panel-section {
1073
+ gap: 22px;
1074
+ padding-top: clamp(30px, 5vw, 52px);
1075
+ padding-bottom: clamp(10px, 3vw, 22px);
1076
+ }
1077
+ .pt-panel-brand {
1078
+ display: inline-flex;
1079
+ align-items: center;
1080
+ gap: 9px;
1081
+ color: inherit;
1082
+ text-decoration: none;
1083
+ }
1084
+ .pt-panel-text {
1085
+ margin: 0;
1086
+ font-size: 13.5px;
1087
+ line-height: 1.62;
1088
+ color: var(--pt-color-ink-dim);
1089
+ }
1090
+ .pt-panel-mono {
1091
+ margin: 0;
1092
+ font-family: var(--pt-font-mono);
1093
+ font-size: 12px;
1094
+ color: var(--pt-color-ink-dim);
1095
+ overflow-wrap: anywhere;
1096
+ }
1097
+ .pt-panel-row {
1098
+ display: flex;
1099
+ flex-wrap: wrap;
1100
+ gap: 8px;
1101
+ }
1102
+ .pt-cap-list {
1103
+ display: grid;
1104
+ gap: 12px;
1105
+ }
1106
+ .pt-panel-page > *,
1107
+ .pt-cap-list > * {
1108
+ min-width: 0;
1109
+ }
1110
+ @media (min-width: 900px) {
1111
+ .pt-cap-list {
1112
+ grid-template-columns: repeat(2, 1fr);
1113
+ }
1114
+ .pt-cap-list > :first-child {
1115
+ grid-column: 1 / -1;
1116
+ }
1117
+ }
1118
+ .pt-cap {
1119
+ min-width: 0;
1120
+ padding: 20px;
1121
+ border: 1px solid var(--pt-color-line);
1122
+ background: var(--pt-color-panel);
1123
+ }
1124
+ .pt-cap__title {
1125
+ margin: 0;
1126
+ font-size: 15px;
1127
+ font-weight: 700;
1128
+ letter-spacing: 0.04em;
1129
+ text-transform: uppercase;
1130
+ }
1131
+ .pt-cap__summary {
1132
+ margin: 8px 0 0;
1133
+ font-size: 13.5px;
1134
+ line-height: 1.6;
1135
+ color: var(--pt-color-ink-dim);
1136
+ }
1137
+ .pt-cap__list {
1138
+ margin: 14px 0 0;
1139
+ padding: 0;
1140
+ list-style: none;
1141
+ display: grid;
1142
+ gap: 9px;
1143
+ }
1144
+ .pt-cap__list li {
1145
+ position: relative;
1146
+ padding-left: 18px;
1147
+ font-size: 13px;
1148
+ line-height: 1.58;
1149
+ color: var(--pt-color-ink-dim);
1150
+ }
1151
+ .pt-cap__list li::before {
1152
+ content: "";
1153
+ position: absolute;
1154
+ left: 0;
1155
+ top: 8px;
1156
+ width: 7px;
1157
+ height: 7px;
1158
+ background: var(--pt-color-accent);
1159
+ clip-path: polygon(0 0, 100% 0, 100% 100%);
1160
+ }
1161
+ .pt-cap__code {
1162
+ margin-top: 16px;
1163
+ }
1164
+ .pt-cap__caption {
1165
+ margin: 0 0 7px;
1166
+ font-family: var(--pt-font-mono);
1167
+ font-size: 10.5px;
1168
+ letter-spacing: 0.16em;
1169
+ text-transform: uppercase;
1170
+ color: var(--pt-color-ink-faint);
1171
+ }
1172
+ .pt-cap__code pre {
1173
+ margin: 0;
1174
+ max-width: 100%;
1175
+ padding: 13px 15px;
1176
+ white-space: pre-wrap;
1177
+ overflow-wrap: anywhere;
1178
+ border: 1px solid var(--pt-color-line-faint);
1179
+ background: var(--pt-color-ground-raised);
1180
+ font-family: var(--pt-font-mono);
1181
+ font-size: 12px;
1182
+ line-height: 1.65;
1183
+ color: var(--pt-color-ink-dim);
1184
+ }
1185
+ .pt-logo-grid {
1186
+ display: grid;
1187
+ gap: 12px;
1188
+ grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
1189
+ }
1190
+ .pt-logo-tile {
1191
+ margin: 0;
1192
+ padding: 16px;
1193
+ border: 1px solid var(--pt-color-line);
1194
+ background: var(--pt-color-panel);
1195
+ }
1196
+ .pt-logo-tile__art {
1197
+ display: grid;
1198
+ place-items: center;
1199
+ height: 128px;
1200
+ border: 1px solid var(--pt-color-line-faint);
1201
+ background: var(--pt-color-ground);
1202
+ background-image:
1203
+ linear-gradient(var(--pt-color-line-faint) 1px, transparent 1px),
1204
+ linear-gradient(
1205
+ 90deg,
1206
+ var(--pt-color-line-faint) 1px,
1207
+ transparent 1px);
1208
+ background-size: 16px 16px;
1209
+ }
1210
+ .pt-logo-tile__name {
1211
+ margin: 13px 0 0;
1212
+ font-size: 13.5px;
1213
+ font-weight: 700;
1214
+ letter-spacing: 0.06em;
1215
+ text-transform: uppercase;
1216
+ }
1217
+ .pt-logo-tile__note {
1218
+ margin: 5px 0 0;
1219
+ font-size: 12.5px;
1220
+ line-height: 1.55;
1221
+ color: var(--pt-color-ink-faint);
1222
+ }
1223
+ .pt-input,
1224
+ .pt-textarea {
1225
+ width: 100%;
1226
+ padding: 10px 12px;
1227
+ border: 1px solid var(--pt-color-line);
1228
+ background: var(--pt-color-ground-raised);
1229
+ color: var(--pt-color-ink);
1230
+ font: inherit;
1231
+ font-size: 14px;
1232
+ border-radius: var(--pt-radius-control);
1233
+ }
1234
+ .pt-textarea {
1235
+ resize: vertical;
1236
+ line-height: 1.55;
1237
+ }
1238
+ .pt-input:focus-visible,
1239
+ .pt-textarea:focus-visible {
1240
+ border-color: var(--pt-color-accent);
1241
+ }
1242
+ .pt-flag {
1243
+ display: inline-block;
1244
+ margin-top: 8px;
1245
+ padding: 2px 8px;
1246
+ border: 1px solid var(--pt-color-warning, var(--pt-color-line));
1247
+ border-radius: var(--pt-radius-pill);
1248
+ font-family: var(--pt-font-mono);
1249
+ font-size: 10px;
1250
+ letter-spacing: 0.1em;
1251
+ text-transform: uppercase;
1252
+ color: var(--pt-color-warning);
1253
+ }
1254
+ .pt-meaning {
1255
+ margin-top: 10px;
1256
+ padding-left: 11px;
1257
+ border-left: 2px solid var(--pt-color-accent);
1258
+ }
1259
+ .pt-checks {
1260
+ margin: 0 0 12px;
1261
+ padding: 0;
1262
+ list-style: none;
1263
+ display: grid;
1264
+ gap: 8px;
1265
+ }
1266
+ .pt-checks li {
1267
+ display: flex;
1268
+ align-items: flex-start;
1269
+ gap: 10px;
1270
+ }
1271
+ .pt-checks label {
1272
+ display: flex;
1273
+ align-items: flex-start;
1274
+ gap: 9px;
1275
+ flex: 1;
1276
+ font-size: 13.5px;
1277
+ line-height: 1.5;
1278
+ color: var(--pt-color-ink-dim);
1279
+ cursor: pointer;
1280
+ }
1281
+ .pt-checks input[type=checkbox] {
1282
+ margin-top: 2px;
1283
+ accent-color: var(--pt-color-accent);
1284
+ }
1285
+ .pt-checks .is-done {
1286
+ text-decoration: line-through;
1287
+ color: var(--pt-color-ink-faint);
1288
+ }
1289
+ .pt-remove {
1290
+ border: 0;
1291
+ background: none;
1292
+ color: var(--pt-color-ink-faint);
1293
+ font-size: 17px;
1294
+ line-height: 1;
1295
+ cursor: pointer;
1296
+ padding: 0 4px;
1297
+ }
1298
+ .pt-remove:hover {
1299
+ color: var(--pt-color-danger);
1300
+ }
1301
+ .pt-compose {
1302
+ display: flex;
1303
+ gap: 8px;
1304
+ align-items: center;
1305
+ }
1306
+ .pt-compose .pt-input {
1307
+ flex: 1;
1308
+ }
1309
+ .pt-note {
1310
+ margin-bottom: 12px;
1311
+ padding-left: 11px;
1312
+ border-left: 2px solid var(--pt-color-line);
1313
+ }
1314
+ .pt-note__meta {
1315
+ margin: 0 0 4px;
1316
+ font-family: var(--pt-font-mono);
1317
+ font-size: 10.5px;
1318
+ letter-spacing: 0.12em;
1319
+ text-transform: uppercase;
1320
+ color: var(--pt-color-accent);
1321
+ }
1322
+ .pt-sheet-actions {
1323
+ display: flex;
1324
+ justify-content: space-between;
1325
+ gap: 10px;
1326
+ margin-top: 22px;
1327
+ padding-top: 16px;
1328
+ border-top: 1px solid var(--pt-color-line-faint);
1329
+ }
1330
+ .pt-danger {
1331
+ border-color: var(--pt-color-danger);
1332
+ color: var(--pt-color-danger);
1333
+ }
1334
+ .pt-danger::after {
1335
+ background: var(--pt-color-danger);
1336
+ }
1337
+ .pt-danger:hover {
1338
+ color: var(--pt-color-accent-ink);
1339
+ border-color: var(--pt-color-danger);
1340
+ }
1341
+ .pt-lang {
1342
+ padding: 4px 9px;
1343
+ border: 1px solid var(--pt-color-line);
1344
+ background: transparent;
1345
+ color: var(--pt-color-ink-faint);
1346
+ font: inherit;
1347
+ font-size: 11px;
1348
+ font-weight: 600;
1349
+ letter-spacing: 0.1em;
1350
+ cursor: pointer;
1351
+ border-radius: var(--pt-radius-square);
1352
+ }
1353
+ .pt-lang.is-on {
1354
+ border-color: var(--pt-color-accent);
1355
+ color: var(--pt-color-accent);
1356
+ }
1357
+ .pt-runs {
1358
+ margin: 0;
1359
+ padding: 0;
1360
+ list-style: none;
1361
+ display: grid;
1362
+ gap: 10px;
1363
+ }
1364
+ .pt-run {
1365
+ padding: 15px 17px;
1366
+ border: 1px solid var(--pt-color-line);
1367
+ background: var(--pt-color-panel);
1368
+ }
1369
+ .pt-run__meta {
1370
+ margin: 0 0 7px;
1371
+ font-family: var(--pt-font-mono);
1372
+ font-size: 10.5px;
1373
+ letter-spacing: 0.13em;
1374
+ text-transform: uppercase;
1375
+ color: var(--pt-color-accent);
1376
+ }
1377
+ .pt-run__cards {
1378
+ margin: 9px 0 0;
1379
+ font-size: 12px;
1380
+ line-height: 1.5;
1381
+ color: var(--pt-color-ink-faint);
1382
+ }
1383
+ .pt-run__cards span {
1384
+ font-family: var(--pt-font-mono);
1385
+ letter-spacing: 0.1em;
1386
+ text-transform: uppercase;
1387
+ font-size: 10px;
1388
+ }
1389
+ .pt-stamps {
1390
+ margin-top: 10px;
1391
+ font-family: var(--pt-font-mono);
1392
+ font-size: 11.5px;
1393
+ color: var(--pt-color-ink-faint);
1394
+ }
1395
+ .pt-warn {
1396
+ margin: 8px 0 0;
1397
+ padding: 9px 11px;
1398
+ border-left: 2px solid var(--pt-color-danger);
1399
+ background: var(--pt-color-ground-raised);
1400
+ font-size: 12.5px;
1401
+ line-height: 1.5;
1402
+ color: var(--pt-color-danger);
1403
+ }
1404
+ .pt-analysis {
1405
+ gap: 30px;
1406
+ }
1407
+ .pt-analysis__stage {
1408
+ margin: 14px 0 0;
1409
+ font-family: var(--pt-font-mono);
1410
+ font-size: 12px;
1411
+ letter-spacing: 0.08em;
1412
+ text-transform: uppercase;
1413
+ color: var(--pt-color-ink-faint);
1414
+ }
1415
+ .pt-analysis__stage strong {
1416
+ color: var(--pt-color-accent);
1417
+ }
1418
+ .pt-analysis__split {
1419
+ display: grid;
1420
+ gap: 12px;
1421
+ }
1422
+ @media (min-width: 860px) {
1423
+ .pt-analysis__split {
1424
+ grid-template-columns: 1fr 1fr;
1425
+ }
1426
+ }
1427
+ .pt-analysis__list {
1428
+ margin: 14px 0 0;
1429
+ padding: 0;
1430
+ list-style: none;
1431
+ display: grid;
1432
+ gap: 9px;
1433
+ }
1434
+ .pt-analysis__goal {
1435
+ display: flex;
1436
+ justify-content: space-between;
1437
+ align-items: baseline;
1438
+ gap: 12px;
1439
+ font-size: 13.5px;
1440
+ line-height: 1.5;
1441
+ color: var(--pt-color-ink-dim);
1442
+ }
1443
+ .pt-analysis__goal.is-primary {
1444
+ color: var(--pt-color-ink);
1445
+ }
1446
+ .pt-analysis__goal.is-off,
1447
+ .pt-analysis__goal.is-off .pt-analysis__weight {
1448
+ color: var(--pt-color-ink-faint);
1449
+ text-decoration: line-through;
1450
+ }
1451
+ .pt-analysis__weight {
1452
+ flex: none;
1453
+ font-family: var(--pt-font-mono);
1454
+ font-size: 10px;
1455
+ letter-spacing: 0.12em;
1456
+ text-transform: uppercase;
1457
+ color: var(--pt-color-accent);
1458
+ }
1459
+ .pt-analysis__goal.is-secondary .pt-analysis__weight {
1460
+ color: var(--pt-color-ink-faint);
1461
+ }
1462
+ .pt-metric-grid {
1463
+ display: grid;
1464
+ gap: 12px;
1465
+ margin-top: 20px;
1466
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
1467
+ }
1468
+ .pt-metric {
1469
+ padding: 16px 18px;
1470
+ border: 1px solid var(--pt-color-line);
1471
+ background: var(--pt-color-panel);
1472
+ color: var(--pt-color-ink-faint);
1473
+ }
1474
+ .pt-metric__label {
1475
+ margin: 0;
1476
+ font-family: var(--pt-font-mono);
1477
+ font-size: 10.5px;
1478
+ letter-spacing: 0.14em;
1479
+ text-transform: uppercase;
1480
+ color: var(--pt-color-ink-faint);
1481
+ }
1482
+ .pt-metric__value {
1483
+ margin: 8px 0 0;
1484
+ font-size: 30px;
1485
+ font-weight: 700;
1486
+ letter-spacing: -0.01em;
1487
+ color: var(--pt-color-ink);
1488
+ }
1489
+ .pt-metric__unit {
1490
+ font-size: 14px;
1491
+ font-weight: 500;
1492
+ color: var(--pt-color-ink-faint);
1493
+ }
1494
+ .pt-metric__delta {
1495
+ margin: 4px 0 0;
1496
+ font-size: 12.5px;
1497
+ }
1498
+ .pt-metric__delta.is-with {
1499
+ color: var(--pt-color-success);
1500
+ }
1501
+ .pt-metric__delta.is-against {
1502
+ color: var(--pt-color-danger);
1503
+ }
1504
+ .pt-metric__since {
1505
+ color: var(--pt-color-ink-faint);
1506
+ }
1507
+ .pt-metric__spark {
1508
+ display: block;
1509
+ margin-top: 12px;
1510
+ overflow: visible;
1511
+ }
1512
+ .pt-metric__point {
1513
+ fill: var(--pt-color-accent);
1514
+ }
1515
+ .pt-metric__note {
1516
+ margin: 10px 0 0;
1517
+ font-size: 12px;
1518
+ line-height: 1.5;
1519
+ color: var(--pt-color-ink-faint);
1520
+ }
1521
+ .pt-strategy-grid {
1522
+ display: grid;
1523
+ gap: 12px;
1524
+ margin-top: 20px;
1525
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
1526
+ }
1527
+ .pt-strategy {
1528
+ padding: 18px;
1529
+ border: 1px solid var(--pt-color-line);
1530
+ background: var(--pt-color-panel);
1531
+ }
1532
+ .pt-strategy.is-chosen {
1533
+ border-color: var(--pt-color-accent);
1534
+ }
1535
+ .pt-strategy__title {
1536
+ margin: 0 0 8px;
1537
+ font-size: 15px;
1538
+ font-weight: 700;
1539
+ letter-spacing: 0.03em;
1540
+ text-transform: uppercase;
1541
+ }
1542
+ .pt-strategy__meters {
1543
+ margin: 14px 0 0;
1544
+ display: grid;
1545
+ gap: 7px;
1546
+ }
1547
+ .pt-strategy__meters div {
1548
+ display: grid;
1549
+ grid-template-columns: 62px 1fr;
1550
+ align-items: center;
1551
+ gap: 10px;
1552
+ }
1553
+ .pt-strategy__meters dt {
1554
+ font-family: var(--pt-font-mono);
1555
+ font-size: 10px;
1556
+ letter-spacing: 0.12em;
1557
+ text-transform: uppercase;
1558
+ color: var(--pt-color-ink-faint);
1559
+ }
1560
+ .pt-strategy__meters dd {
1561
+ margin: 0;
1562
+ display: flex;
1563
+ align-items: center;
1564
+ gap: 8px;
1565
+ font-size: 12px;
1566
+ color: var(--pt-color-ink-dim);
1567
+ }
1568
+ .pt-strategy__track {
1569
+ flex: 1;
1570
+ height: 5px;
1571
+ background: var(--pt-color-raised);
1572
+ border: 1px solid var(--pt-color-line-faint);
1573
+ }
1574
+ .pt-strategy__fill {
1575
+ display: block;
1576
+ height: 100%;
1577
+ background: var(--pt-color-accent);
1578
+ opacity: 0.75;
1579
+ }
1580
+ .pt-strategy__horizon {
1581
+ margin: 14px 0 0;
1582
+ font-family: var(--pt-font-mono);
1583
+ font-size: 11px;
1584
+ letter-spacing: 0.1em;
1585
+ text-transform: uppercase;
1586
+ color: var(--pt-color-accent);
1587
+ }
1588
+ .pt-analysis__suggestions {
1589
+ margin: 20px 0 0;
1590
+ padding: 0;
1591
+ list-style: none;
1592
+ display: grid;
1593
+ gap: 10px;
1594
+ }
1595
+ .pt-suggestion {
1596
+ padding: 15px 17px;
1597
+ border: 1px solid var(--pt-color-line);
1598
+ border-left-width: 3px;
1599
+ background: var(--pt-color-panel);
1600
+ }
1601
+ .pt-suggestion.is-high {
1602
+ border-left-color: var(--pt-color-danger);
1603
+ }
1604
+ .pt-suggestion.is-medium {
1605
+ border-left-color: var(--pt-color-warning);
1606
+ }
1607
+ .pt-suggestion.is-low {
1608
+ border-left-color: var(--pt-color-neutral);
1609
+ }
1610
+ .pt-suggestion__meta {
1611
+ margin: 0 0 7px;
1612
+ font-family: var(--pt-font-mono);
1613
+ font-size: 10.5px;
1614
+ letter-spacing: 0.13em;
1615
+ text-transform: uppercase;
1616
+ color: var(--pt-color-ink-faint);
1617
+ }
1618
+ .pt-suggestion .pt-panel-row {
1619
+ margin-top: 11px;
1620
+ }
1621
+ .pt-views {
1622
+ display: inline-flex;
1623
+ gap: 4px;
1624
+ margin-right: 6px;
1625
+ }
1626
+ .pt-analysis__nav {
1627
+ display: flex;
1628
+ flex-wrap: wrap;
1629
+ gap: 6px;
1630
+ margin-top: 18px;
1631
+ border-bottom: 1px solid var(--pt-color-line);
1632
+ padding-bottom: 10px;
1633
+ }
1634
+ .pt-analysis__tab {
1635
+ display: inline-flex;
1636
+ align-items: center;
1637
+ gap: 7px;
1638
+ padding: 7px 13px;
1639
+ border: 1px solid var(--pt-color-line);
1640
+ background: transparent;
1641
+ color: var(--pt-color-ink-dim);
1642
+ font: inherit;
1643
+ font-family: var(--pt-font-mono);
1644
+ font-size: 11px;
1645
+ letter-spacing: 0.12em;
1646
+ text-transform: uppercase;
1647
+ cursor: pointer;
1648
+ border-radius: var(--pt-radius-control);
1649
+ }
1650
+ .pt-analysis__tab:hover {
1651
+ color: var(--pt-color-ink);
1652
+ border-color: var(--pt-color-ink-faint);
1653
+ }
1654
+ .pt-analysis__tab.is-on {
1655
+ border-color: var(--pt-color-accent);
1656
+ color: var(--pt-color-ink);
1657
+ background: var(--pt-color-raised);
1658
+ }
1659
+ .pt-analysis__open {
1660
+ display: inline-flex;
1661
+ align-items: center;
1662
+ justify-content: center;
1663
+ min-width: 17px;
1664
+ height: 17px;
1665
+ padding: 0 4px;
1666
+ border: 1px solid var(--pt-color-warning);
1667
+ color: var(--pt-color-warning);
1668
+ font-size: 10px;
1669
+ letter-spacing: 0;
1670
+ }
1671
+ .pt-analysis__minor {
1672
+ margin: 26px 0 0;
1673
+ font-family: var(--pt-font-mono);
1674
+ font-size: 11px;
1675
+ letter-spacing: 0.14em;
1676
+ text-transform: uppercase;
1677
+ color: var(--pt-color-ink-faint);
1678
+ }
1679
+ .pt-analysis__empty {
1680
+ margin: 16px 0 0;
1681
+ padding: 14px 16px;
1682
+ border: 1px dashed var(--pt-color-line);
1683
+ font-size: 13px;
1684
+ line-height: 1.6;
1685
+ color: var(--pt-color-ink-faint);
1686
+ }
1687
+ .pt-analysis__link {
1688
+ padding: 0;
1689
+ border: 0;
1690
+ background: none;
1691
+ font: inherit;
1692
+ color: var(--pt-color-ink);
1693
+ text-align: left;
1694
+ text-decoration: underline;
1695
+ text-decoration-color: var(--pt-color-line);
1696
+ text-underline-offset: 3px;
1697
+ cursor: pointer;
1698
+ }
1699
+ .pt-analysis__link:hover {
1700
+ color: var(--pt-color-accent);
1701
+ text-decoration-color: currentColor;
1702
+ }
1703
+ .pt-analysis__from {
1704
+ display: inline-block;
1705
+ margin-right: 8px;
1706
+ font-family: var(--pt-font-mono);
1707
+ font-size: 9.5px;
1708
+ letter-spacing: 0.14em;
1709
+ text-transform: uppercase;
1710
+ color: var(--pt-color-ink-faint);
1711
+ }
1712
+ .pt-fact-grid {
1713
+ display: grid;
1714
+ gap: 10px;
1715
+ margin-top: 20px;
1716
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
1717
+ }
1718
+ .pt-fact {
1719
+ padding: 14px 16px;
1720
+ border: 1px solid var(--pt-color-line);
1721
+ background: var(--pt-color-panel);
1722
+ }
1723
+ .pt-fact__label {
1724
+ margin: 0;
1725
+ font-family: var(--pt-font-mono);
1726
+ font-size: 10px;
1727
+ letter-spacing: 0.14em;
1728
+ text-transform: uppercase;
1729
+ color: var(--pt-color-ink-faint);
1730
+ }
1731
+ .pt-fact__value {
1732
+ margin: 6px 0 0;
1733
+ font-size: 26px;
1734
+ font-weight: 700;
1735
+ line-height: 1.1;
1736
+ color: var(--pt-color-ink);
1737
+ }
1738
+ .pt-choice-grid {
1739
+ display: grid;
1740
+ gap: 12px;
1741
+ margin-top: 20px;
1742
+ grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
1743
+ }
1744
+ .pt-choice {
1745
+ padding: 17px 18px;
1746
+ border: 1px solid var(--pt-color-line);
1747
+ border-left-width: 3px;
1748
+ border-left-color: var(--pt-color-warning);
1749
+ background: var(--pt-color-panel);
1750
+ }
1751
+ .pt-choice.is-decided {
1752
+ border-left-color: var(--pt-color-accent);
1753
+ }
1754
+ .pt-choice__question {
1755
+ margin: 7px 0 0;
1756
+ font-size: 14.5px;
1757
+ font-weight: 600;
1758
+ line-height: 1.45;
1759
+ color: var(--pt-color-ink);
1760
+ }
1761
+ .pt-choice__state {
1762
+ margin: 0;
1763
+ font-family: var(--pt-font-mono);
1764
+ font-size: 10px;
1765
+ letter-spacing: 0.12em;
1766
+ text-transform: uppercase;
1767
+ color: var(--pt-color-ink-faint);
1768
+ }
1769
+ .pt-choice.is-decided .pt-choice__state {
1770
+ color: var(--pt-color-accent);
1771
+ }
1772
+ .pt-choice__why {
1773
+ margin: 8px 0 0;
1774
+ font-size: 12.5px;
1775
+ line-height: 1.6;
1776
+ color: var(--pt-color-ink-faint);
1777
+ }
1778
+ .pt-choice__options {
1779
+ margin-top: 13px;
1780
+ }
1781
+ .pt-choice__detail {
1782
+ margin: 12px 0 0;
1783
+ padding-left: 11px;
1784
+ border-left: 2px solid var(--pt-color-line);
1785
+ font-size: 12.5px;
1786
+ line-height: 1.6;
1787
+ color: var(--pt-color-ink-dim);
1788
+ }
1789
+ .pt-choice__reopen {
1790
+ margin-top: 12px;
1791
+ padding: 0;
1792
+ border: 0;
1793
+ background: none;
1794
+ font-family: var(--pt-font-mono);
1795
+ font-size: 10.5px;
1796
+ letter-spacing: 0.12em;
1797
+ text-transform: uppercase;
1798
+ color: var(--pt-color-ink-faint);
1799
+ cursor: pointer;
1800
+ }
1801
+ .pt-choice__reopen:hover {
1802
+ color: var(--pt-color-danger);
1803
+ }
1804
+ .pt-rival-grid {
1805
+ display: grid;
1806
+ gap: 12px;
1807
+ margin-top: 16px;
1808
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
1809
+ }
1810
+ .pt-rival {
1811
+ padding: 16px 18px;
1812
+ border: 1px solid var(--pt-color-line);
1813
+ background: var(--pt-color-panel);
1814
+ }
1815
+ .pt-rival__name {
1816
+ margin: 0 0 10px;
1817
+ font-size: 14px;
1818
+ font-weight: 700;
1819
+ letter-spacing: 0.04em;
1820
+ text-transform: uppercase;
1821
+ color: var(--pt-color-ink);
1822
+ }
1823
+ .pt-rival__line {
1824
+ margin: 0 0 8px;
1825
+ font-size: 12.5px;
1826
+ line-height: 1.6;
1827
+ color: var(--pt-color-ink-dim);
1828
+ }
1829
+ .pt-rival__line:last-child {
1830
+ margin-bottom: 0;
1831
+ }
1832
+ .pt-rival__tag {
1833
+ display: block;
1834
+ font-family: var(--pt-font-mono);
1835
+ font-size: 9.5px;
1836
+ letter-spacing: 0.14em;
1837
+ text-transform: uppercase;
1838
+ color: var(--pt-color-ink-faint);
1839
+ }
1840
+ .pt-rival__line.is-gap .pt-rival__tag {
1841
+ color: var(--pt-color-accent);
1842
+ }
1843
+ .pt-marketplace {
1844
+ gap: 26px;
1845
+ }
1846
+ .pt-marketplace__status {
1847
+ margin-top: 16px;
1848
+ align-items: center;
1849
+ gap: 12px;
1850
+ }
1851
+ .pt-marketplace__age,
1852
+ .pt-marketplace__project,
1853
+ .pt-marketplace__detail,
1854
+ .pt-marketplace__source {
1855
+ font-family: var(--pt-font-mono);
1856
+ font-size: 11px;
1857
+ letter-spacing: 0.06em;
1858
+ color: var(--pt-color-ink-faint);
1859
+ }
1860
+ .pt-marketplace__project {
1861
+ margin: 0 0 4px;
1862
+ }
1863
+ .pt-marketplace__detail {
1864
+ margin: 0 0 4px;
1865
+ letter-spacing: 0;
1866
+ text-transform: none;
1867
+ line-height: 1.6;
1868
+ }
1869
+ .pt-marketplace__source {
1870
+ margin: 18px 0 0;
1871
+ word-break: break-all;
1872
+ }
1873
+ .pt-marketplace__filters {
1874
+ margin: 16px 0 0;
1875
+ }
1876
+ .pt-tool-grid {
1877
+ display: grid;
1878
+ gap: 12px;
1879
+ margin-top: 18px;
1880
+ grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
1881
+ }
1882
+ .pt-tool {
1883
+ display: flex;
1884
+ flex-direction: column;
1885
+ gap: 9px;
1886
+ padding: 17px 18px;
1887
+ border: 1px solid var(--pt-color-line);
1888
+ border-left-width: 3px;
1889
+ border-left-color: var(--pt-color-line);
1890
+ background: var(--pt-color-panel);
1891
+ }
1892
+ .pt-tool.is-active {
1893
+ border-left-color: var(--pt-color-success);
1894
+ }
1895
+ .pt-tool.is-disabled {
1896
+ border-left-color: var(--pt-color-neutral);
1897
+ }
1898
+ .pt-tool.is-misconfigured {
1899
+ border-left-color: var(--pt-color-danger);
1900
+ }
1901
+ .pt-tool.is-unknown {
1902
+ border-left-color: var(--pt-color-warning);
1903
+ }
1904
+ .pt-tool__head {
1905
+ display: flex;
1906
+ justify-content: space-between;
1907
+ align-items: baseline;
1908
+ gap: 12px;
1909
+ }
1910
+ .pt-tool__name {
1911
+ margin: 0;
1912
+ font-size: 15px;
1913
+ font-weight: 700;
1914
+ letter-spacing: 0.03em;
1915
+ color: var(--pt-color-ink);
1916
+ }
1917
+ .pt-tool__state {
1918
+ flex: none;
1919
+ font-family: var(--pt-font-mono);
1920
+ font-size: 10px;
1921
+ letter-spacing: 0.12em;
1922
+ text-transform: uppercase;
1923
+ color: var(--pt-color-ink-faint);
1924
+ }
1925
+ .pt-tool.is-active .pt-tool__state {
1926
+ color: var(--pt-color-success);
1927
+ }
1928
+ .pt-tool.is-misconfigured .pt-tool__state {
1929
+ color: var(--pt-color-danger);
1930
+ }
1931
+ .pt-tool__meta {
1932
+ margin: 0;
1933
+ font-family: var(--pt-font-mono);
1934
+ font-size: 11px;
1935
+ color: var(--pt-color-ink-faint);
1936
+ }
1937
+ .pt-tool__id {
1938
+ color: var(--pt-color-accent);
1939
+ }
1940
+ .pt-tool__version.is-unknown {
1941
+ border-bottom: 1px dotted currentColor;
1942
+ cursor: help;
1943
+ }
1944
+ .pt-tool__repo {
1945
+ color: var(--pt-color-ink-faint);
1946
+ text-decoration: underline;
1947
+ text-underline-offset: 3px;
1948
+ }
1949
+ .pt-tool__repo:hover {
1950
+ color: var(--pt-color-ink);
1951
+ }
1952
+ .pt-tool__tags {
1953
+ display: flex;
1954
+ flex-wrap: wrap;
1955
+ gap: 6px;
1956
+ margin: 0;
1957
+ }
1958
+ .pt-tool__tag {
1959
+ padding: 2px 8px;
1960
+ border: 1px solid var(--pt-color-line-faint);
1961
+ border-radius: var(--pt-radius-pill);
1962
+ font-family: var(--pt-font-mono);
1963
+ font-size: 10px;
1964
+ letter-spacing: 0.08em;
1965
+ text-transform: uppercase;
1966
+ color: var(--pt-color-ink-faint);
1967
+ }
1968
+ .pt-tool__actions {
1969
+ margin-top: auto;
1970
+ padding-top: 4px;
1971
+ }
1972
+
1973
+ /* src/style.css */