@nomideusz/svelte-calendar 0.6.9 → 0.7.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.
Files changed (18) hide show
  1. package/README.md +88 -2
  2. package/dist/calendar/Calendar.svelte +129 -47
  3. package/dist/primitives/DayHeader.svelte +5 -5
  4. package/dist/primitives/EmptySlot.svelte +4 -4
  5. package/dist/primitives/EventBlock.svelte +13 -13
  6. package/dist/primitives/NowIndicator.svelte +1 -1
  7. package/dist/primitives/TimeGutter.svelte +4 -4
  8. package/dist/views/agenda/AgendaDay.svelte +35 -157
  9. package/dist/views/agenda/AgendaWeek.svelte +20 -109
  10. package/dist/views/mobile/MobileDay.svelte +3 -3
  11. package/dist/views/mobile/MobileWeek.svelte +4 -4
  12. package/dist/views/planner/PlannerDay.svelte +21 -135
  13. package/dist/views/planner/PlannerWeek.svelte +39 -99
  14. package/dist/views/shared/context.svelte.d.ts +0 -1
  15. package/dist/views/shared/context.svelte.js +0 -1
  16. package/package.json +14 -14
  17. package/widget/svelte-calendar.css +196 -380
  18. package/widget/widget.js +1882 -1659
package/widget/svelte-calendar.css CHANGED
@@ -17,12 +17,12 @@
17
17
  touch-action: pan-x;
18
18
  cursor: default;
19
19
  scrollbar-width: thin;
20
- scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.08)) transparent;
20
+ scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
21
21
  }
22
22
  .fs--auto.svelte-mrwdy7 .fs-scroll:where(.svelte-mrwdy7) { height: auto; overflow: visible; }
23
23
  .fs-scroll.svelte-mrwdy7::-webkit-scrollbar { height: 5px; }
24
24
  .fs-scroll.svelte-mrwdy7::-webkit-scrollbar-thumb {
25
- background: var(--dt-scrollbar, rgba(0, 0, 0, 0.08));
25
+ background: var(--dt-scrollbar, rgba(0, 0, 0, 0.1));
26
26
  border-radius: 4px;
27
27
  }
28
28
  .fs-scroll.svelte-mrwdy7::-webkit-scrollbar-track { background: transparent; }
@@ -39,11 +39,11 @@
39
39
  position: absolute;
40
40
  top: 0;
41
41
  height: 100%;
42
- border-left: 1px solid var(--dt-border-day, rgba(148, 163, 184, 0.14));
42
+ border-left: 1px solid var(--dt-border-day, rgba(0, 0, 0, 0.14));
43
43
  box-sizing: border-box;
44
44
  }
45
45
  .fs-day.svelte-mrwdy7:first-of-type { border-left: none; }
46
- .fs-today.svelte-mrwdy7 { background: var(--dt-today-bg, rgba(239, 68, 68, 0.025)); }
46
+ .fs-today.svelte-mrwdy7 { background: var(--dt-today-bg, rgba(37, 99, 235, 0.04)); }
47
47
  .fs-past.svelte-mrwdy7 { opacity: 0.7; }
48
48
 
49
49
  /* ─── Disabled day ───────────────────────────────── */
@@ -53,8 +53,8 @@
53
53
  45deg,
54
54
  transparent,
55
55
  transparent 6px,
56
- var(--dt-border, rgba(148, 163, 184, 0.07)) 6px,
57
- var(--dt-border, rgba(148, 163, 184, 0.07)) 7px
56
+ var(--dt-border, rgba(0, 0, 0, 0.08)) 6px,
57
+ var(--dt-border, rgba(0, 0, 0, 0.08)) 7px
58
58
  ) !important;
59
59
  }
60
60
 
@@ -66,8 +66,8 @@
66
66
  z-index: 3;
67
67
  background: repeating-linear-gradient(
68
68
  -45deg,
69
- color-mix(in srgb, var(--dt-text, rgba(148, 163, 184, 0.85)) 4%, transparent),
70
- color-mix(in srgb, var(--dt-text, rgba(148, 163, 184, 0.85)) 4%, transparent) 4px,
69
+ color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent),
70
+ color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 4px,
71
71
  transparent 4px,
72
72
  transparent 8px
73
73
  );
@@ -81,7 +81,7 @@
81
81
 
82
82
  .fs-blocked-label.svelte-mrwdy7 {
83
83
  font: 500 9px/1 var(--dt-sans, system-ui, sans-serif);
84
- color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
84
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
85
85
  text-transform: uppercase;
86
86
  letter-spacing: 0.04em;
87
87
  white-space: nowrap;
@@ -111,14 +111,14 @@
111
111
  top: 18px;
112
112
  bottom: 0;
113
113
  width: 1px;
114
- background: var(--dt-border, rgba(148, 163, 184, 0.07));
114
+ background: var(--dt-border, rgba(0, 0, 0, 0.08));
115
115
  }
116
116
  .fs-tick-lb.svelte-mrwdy7 {
117
117
  position: absolute;
118
118
  top: 2px;
119
119
  left: 5px;
120
120
  font: 500 10px/1 var(--dt-mono, ui-monospace, monospace);
121
- color: var(--dt-text-3, rgba(100, 116, 139, 0.7));
121
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
122
122
  white-space: nowrap;
123
123
  pointer-events: none;
124
124
  }
@@ -146,7 +146,7 @@
146
146
  left: 0;
147
147
  width: 2px;
148
148
  background: var(--dt-accent, #2563eb);
149
- box-shadow: 0 0 8px var(--dt-glow, rgba(239, 68, 68, 0.35));
149
+ box-shadow: 0 0 8px var(--dt-glow, rgba(37, 99, 235, 0.25));
150
150
  }
151
151
  .fs-now-tag.svelte-mrwdy7 {
152
152
  position: absolute;
@@ -155,7 +155,7 @@
155
155
  font: 700 11px/1 var(--dt-mono, ui-monospace, monospace);
156
156
  color: var(--dt-accent, #2563eb);
157
157
  background: color-mix(in srgb, var(--dt-bg, #ffffff) 92%, var(--dt-accent, #2563eb));
158
- border: 1px solid var(--dt-accent-dim, rgba(239, 68, 68, 0.18));
158
+ border: 1px solid var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
159
159
  padding: 3px 6px;
160
160
  border-radius: 4px;
161
161
  white-space: nowrap;
@@ -167,78 +167,6 @@
167
167
  font-size: 10px;
168
168
  }
169
169
 
170
- /* ─── Floating date label ────────────────────────── */
171
- .fs-date-label.svelte-mrwdy7 {
172
- position: absolute;
173
- top: 22px;
174
- left: 50%;
175
- transform: translateX(-50%);
176
- z-index: 20;
177
- font: 600 11px/1 var(--dt-sans, system-ui, sans-serif);
178
- letter-spacing: 0.04em;
179
- text-transform: uppercase;
180
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
181
- background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
182
- backdrop-filter: blur(6px);
183
- -webkit-backdrop-filter: blur(6px);
184
- padding: 8px 16px;
185
- border-radius: 8px;
186
- border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
187
- pointer-events: none;
188
- white-space: nowrap;
189
- }
190
-
191
- /* ─── Navigation pills ────────────────────────────── */
192
- .fs-nav.svelte-mrwdy7 {
193
- position: absolute;
194
- top: 22px;
195
- right: 14px;
196
- z-index: 20;
197
- display: flex;
198
- gap: 2px;
199
- background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
200
- backdrop-filter: blur(6px);
201
- -webkit-backdrop-filter: blur(6px);
202
- border-radius: 8px;
203
- padding: 2px;
204
- border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
205
- }
206
- .fs-nav-pill.svelte-mrwdy7 {
207
- border: none;
208
- background: transparent;
209
- color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
210
- cursor: pointer;
211
- font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
212
- padding: 6px 12px;
213
- border-radius: 6px;
214
- letter-spacing: 0.04em;
215
- text-transform: uppercase;
216
- transition: background 100ms, color 100ms;
217
- display: inline-flex;
218
- align-items: center;
219
- justify-content: center;
220
- }
221
- .fs-nav-pill.svelte-mrwdy7:hover {
222
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
223
- }
224
- .fs-nav-today.svelte-mrwdy7 {
225
- max-width: 60px;
226
- overflow: hidden;
227
- white-space: nowrap;
228
- transition: max-width 250ms ease, padding 250ms ease, opacity 200ms ease;
229
- }
230
- .fs-nav-today--hidden.svelte-mrwdy7 {
231
- max-width: 0;
232
- padding-left: 0;
233
- padding-right: 0;
234
- opacity: 0;
235
- pointer-events: none;
236
- }
237
- .fs-nav-pill.svelte-mrwdy7:focus-visible {
238
- outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
239
- outline-offset: 2px;
240
- }
241
-
242
170
  /* ─── All-day strip ─────────────────────────────── */
243
171
  .fs-allday.svelte-mrwdy7 {
244
172
  position: absolute;
@@ -290,7 +218,7 @@
290
218
  .fs-ad-title.svelte-mrwdy7 {
291
219
  font-size: 0.7rem;
292
220
  font-weight: 500;
293
- color: var(--dt-text, #e2e8f0);
221
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
294
222
  max-width: 120px;
295
223
  overflow: hidden;
296
224
  text-overflow: ellipsis;
@@ -298,7 +226,7 @@
298
226
 
299
227
  .fs-ad-span.svelte-mrwdy7 {
300
228
  font-size: 0.6rem;
301
- color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
229
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
302
230
  flex-shrink: 0;
303
231
  }
304
232
 
@@ -394,7 +322,7 @@
394
322
  }
395
323
  .fs-ev-title.svelte-mrwdy7 {
396
324
  font: 600 13px/1.15 var(--dt-sans, system-ui, sans-serif);
397
- color: var(--dt-text, rgba(226, 232, 240, 0.92));
325
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
398
326
  overflow: hidden;
399
327
  text-overflow: ellipsis;
400
328
  white-space: nowrap;
@@ -403,14 +331,14 @@
403
331
  }
404
332
  .fs-ev-time.svelte-mrwdy7 {
405
333
  font: 400 10px/1 var(--dt-mono, ui-monospace, monospace);
406
- color: var(--dt-text-2, rgba(148, 163, 184, 0.72));
334
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
407
335
  opacity: 0.7;
408
336
  white-space: nowrap;
409
337
  flex-shrink: 0;
410
338
  }
411
339
  .fs-ev-sub.svelte-mrwdy7 {
412
340
  font: 400 11px/1 var(--dt-sans, system-ui, sans-serif);
413
- color: var(--dt-text-2, rgba(148, 163, 184, 0.72));
341
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
414
342
  opacity: 0.6;
415
343
  white-space: nowrap;
416
344
  overflow: hidden;
@@ -420,7 +348,7 @@
420
348
  }
421
349
  .fs-ev-loc.svelte-mrwdy7 {
422
350
  font: 400 10px/1 var(--dt-sans, system-ui, sans-serif);
423
- color: var(--dt-text-3, rgba(148, 163, 184, 0.5));
351
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
424
352
  white-space: nowrap;
425
353
  overflow: hidden;
426
354
  text-overflow: ellipsis;
@@ -465,9 +393,8 @@
465
393
  overflow-y: auto;
466
394
  overflow-x: hidden;
467
395
  box-sizing: border-box;
468
- padding-top: 48px;
469
396
  scrollbar-width: thin;
470
- scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.08)) transparent;
397
+ scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
471
398
  }
472
399
  .wg--auto.svelte-j4rvbp .wg-body:where(.svelte-j4rvbp) { overflow-y: visible; }
473
400
 
@@ -488,7 +415,7 @@
488
415
  }
489
416
 
490
417
  .wg-week--current.svelte-j4rvbp {
491
- background: var(--dt-today-bg, rgba(239, 68, 68, 0.02));
418
+ background: var(--dt-today-bg, rgba(37, 99, 235, 0.04));
492
419
  border: 2.5px solid var(--dt-accent, #2563eb);
493
420
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dt-accent, #2563eb) 15%, transparent);
494
421
  }
@@ -512,7 +439,7 @@
512
439
  position: relative;
513
440
  min-height: 170px;
514
441
  padding: 4px 4px 8px;
515
- border-right: 1px solid var(--dt-border, rgba(0, 0, 0, 0.06));
442
+ border-right: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
516
443
  cursor: pointer;
517
444
  transition: background 0.15s;
518
445
  }
@@ -520,8 +447,8 @@
520
447
  .wg-cell.svelte-j4rvbp:last-child { border-right: none; }
521
448
  .wg-cell.svelte-j4rvbp:hover { background: var(--dt-hover, rgba(0, 0, 0, 0.015)); }
522
449
 
523
- .wg-cell--today.svelte-j4rvbp { background: var(--dt-today-bg, rgba(239, 68, 68, 0.03)); }
524
- .wg-cell--today.svelte-j4rvbp:hover { background: rgba(239, 68, 68, 0.05); }
450
+ .wg-cell--today.svelte-j4rvbp { background: var(--dt-today-bg, rgba(37, 99, 235, 0.04)); }
451
+ .wg-cell--today.svelte-j4rvbp:hover { background: color-mix(in srgb, var(--dt-accent, #2563eb) 6%, transparent); }
525
452
 
526
453
  /* Dim all cells by default; current week overrides to full brightness */
527
454
  .wg-cell.svelte-j4rvbp { opacity: 0.55; }
@@ -540,8 +467,8 @@
540
467
  45deg,
541
468
  transparent,
542
469
  transparent 6px,
543
- var(--dt-border, rgba(0, 0, 0, 0.06)) 6px,
544
- var(--dt-border, rgba(0, 0, 0, 0.06)) 7px
470
+ var(--dt-border, rgba(0, 0, 0, 0.08)) 6px,
471
+ var(--dt-border, rgba(0, 0, 0, 0.08)) 7px
545
472
  ) !important;
546
473
  }
547
474
 
@@ -554,8 +481,8 @@
554
481
  border-radius: 3px;
555
482
  background: repeating-linear-gradient(
556
483
  -45deg,
557
- color-mix(in srgb, var(--dt-text, rgba(0,0,0,0.85)) 4%, transparent),
558
- color-mix(in srgb, var(--dt-text, rgba(0,0,0,0.85)) 4%, transparent) 3px,
484
+ color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent),
485
+ color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 3px,
559
486
  transparent 3px,
560
487
  transparent 6px
561
488
  );
@@ -565,7 +492,7 @@
565
492
 
566
493
  .wg-blocked-label.svelte-j4rvbp {
567
494
  font: 500 8px/1 var(--dt-sans, system-ui, sans-serif);
568
- color: var(--dt-text-3, rgba(0, 0, 0, 0.3));
495
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
569
496
  text-transform: uppercase;
570
497
  letter-spacing: 0.04em;
571
498
  white-space: nowrap;
@@ -590,11 +517,11 @@
590
517
  font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
591
518
  letter-spacing: 0.04em;
592
519
  text-transform: uppercase;
593
- color: var(--dt-text-3, rgba(0, 0, 0, 0.3));
520
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
594
521
  }
595
522
 
596
523
  .wg-week--current.svelte-j4rvbp .wg-day-wd:where(.svelte-j4rvbp) {
597
- color: var(--dt-text-2, rgba(0, 0, 0, 0.5));
524
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
598
525
  }
599
526
 
600
527
  .wg-cell-hd--today.svelte-j4rvbp .wg-day-wd:where(.svelte-j4rvbp) {
@@ -604,11 +531,11 @@
604
531
 
605
532
  .wg-day-num.svelte-j4rvbp {
606
533
  font: 700 14px / 1 var(--dt-sans, system-ui, sans-serif);
607
- color: var(--dt-text, rgba(0, 0, 0, 0.85));
534
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
608
535
  }
609
536
 
610
537
  .wg-week--current.svelte-j4rvbp .wg-day-num:where(.svelte-j4rvbp) {
611
- color: var(--dt-text, rgba(0, 0, 0, 0.95));
538
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
612
539
  }
613
540
 
614
541
  .wg-day-num--today.svelte-j4rvbp {
@@ -626,13 +553,13 @@
626
553
  font: 800 22px / 1 var(--dt-sans, system-ui, sans-serif);
627
554
  letter-spacing: 0.02em;
628
555
  text-transform: uppercase;
629
- color: color-mix(in srgb, var(--dt-text, rgba(255,255,255,0.85)) 4%, transparent);
556
+ color: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent);
630
557
  pointer-events: none;
631
558
  white-space: nowrap;
632
559
  }
633
560
 
634
561
  .wg-week--current.svelte-j4rvbp .wg-cell-month:where(.svelte-j4rvbp) {
635
- color: color-mix(in srgb, var(--dt-text, rgba(255,255,255,0.85)) 8%, transparent);
562
+ color: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 8%, transparent);
636
563
  }
637
564
 
638
565
  /* ─── All-day / multi-day events ─────────────────── */
@@ -690,7 +617,7 @@
690
617
 
691
618
  .wg-ad-title.svelte-j4rvbp {
692
619
  font: 500 10px / 1.1 var(--dt-sans, system-ui, sans-serif);
693
- color: var(--dt-text, rgba(0, 0, 0, 0.85));
620
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
694
621
  white-space: nowrap;
695
622
  overflow: hidden;
696
623
  text-overflow: ellipsis;
@@ -779,14 +706,14 @@
779
706
 
780
707
  .wg-ev-time.svelte-j4rvbp {
781
708
  font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
782
- color: var(--dt-text-3, rgba(0, 0, 0, 0.4));
709
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
783
710
  flex-shrink: 0;
784
711
  white-space: nowrap;
785
712
  }
786
713
 
787
714
  .wg-ev-title.svelte-j4rvbp {
788
715
  font: 500 12px / 1.1 var(--dt-sans, system-ui, sans-serif);
789
- color: var(--dt-text, rgba(0, 0, 0, 0.85));
716
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
790
717
  white-space: nowrap;
791
718
  overflow: hidden;
792
719
  text-overflow: ellipsis;
@@ -794,7 +721,7 @@
794
721
 
795
722
  .wg-ev-loc.svelte-j4rvbp {
796
723
  font: 400 9px / 1 var(--dt-sans, system-ui, sans-serif);
797
- color: var(--dt-text-3, rgba(0, 0, 0, 0.35));
724
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
798
725
  white-space: nowrap;
799
726
  overflow: hidden;
800
727
  text-overflow: ellipsis;
@@ -803,56 +730,13 @@
803
730
 
804
731
  .wg-ev-more.svelte-j4rvbp {
805
732
  font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
806
- color: var(--dt-text-3, rgba(0, 0, 0, 0.35));
733
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
807
734
  padding: 2px 8px;
808
735
  cursor: pointer;
809
736
  }
810
737
 
811
738
  .wg-ev-more.svelte-j4rvbp:hover {
812
- color: var(--dt-text-2, rgba(0, 0, 0, 0.55));
813
- }
814
-
815
- /* ─── Navigation pill ────────────────────────────── */
816
- .wg-nav.svelte-j4rvbp {
817
- position: absolute;
818
- top: 22px;
819
- right: 14px;
820
- z-index: 20;
821
- display: flex;
822
- gap: 2px;
823
- background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
824
- backdrop-filter: blur(6px);
825
- -webkit-backdrop-filter: blur(6px);
826
- border-radius: 8px;
827
- padding: 2px;
828
- border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
829
- animation: svelte-j4rvbp-wg-nav-in 200ms ease both;
830
- }
831
- @keyframes svelte-j4rvbp-wg-nav-in {
832
- from { opacity: 0; transform: translateY(-6px); }
833
- to { opacity: 1; transform: translateY(0); }
834
- }
835
- .wg-nav-pill.svelte-j4rvbp {
836
- border: none;
837
- background: transparent;
838
- color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
839
- cursor: pointer;
840
- font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
841
- padding: 6px 12px;
842
- border-radius: 6px;
843
- letter-spacing: 0.04em;
844
- text-transform: uppercase;
845
- transition: background 100ms, color 100ms;
846
- display: inline-flex;
847
- align-items: center;
848
- justify-content: center;
849
- }
850
- .wg-nav-pill.svelte-j4rvbp:hover {
851
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
852
- }
853
- .wg-nav-pill.svelte-j4rvbp:focus-visible {
854
- outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
855
- outline-offset: 2px;
739
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
856
740
  }
857
741
 
858
742
  /* ─── Focus-visible ──────────────────────────────── */
@@ -872,78 +756,6 @@
872
756
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
873
757
  }
874
758
 
875
- /* ═══ Floating date label ═══ */
876
- .ag-date-label.svelte-n8lbn1 {
877
- position: absolute;
878
- top: 10px;
879
- left: 50%;
880
- transform: translateX(-50%);
881
- z-index: 20;
882
- font: 600 11px/1 var(--dt-sans, system-ui, sans-serif);
883
- letter-spacing: 0.04em;
884
- text-transform: uppercase;
885
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
886
- background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
887
- backdrop-filter: blur(6px);
888
- -webkit-backdrop-filter: blur(6px);
889
- padding: 8px 16px;
890
- border-radius: 8px;
891
- border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
892
- pointer-events: none;
893
- white-space: nowrap;
894
- }
895
-
896
- /* ═══ Floating nav pills ═══ */
897
- .ag-nav.svelte-n8lbn1 {
898
- position: absolute;
899
- top: 10px;
900
- right: 14px;
901
- z-index: 20;
902
- display: flex;
903
- gap: 2px;
904
- background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
905
- backdrop-filter: blur(6px);
906
- -webkit-backdrop-filter: blur(6px);
907
- border-radius: 8px;
908
- padding: 2px;
909
- border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
910
- }
911
- .ag-nav-pill.svelte-n8lbn1 {
912
- border: none;
913
- background: transparent;
914
- color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
915
- cursor: pointer;
916
- font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
917
- padding: 6px 12px;
918
- border-radius: 6px;
919
- letter-spacing: 0.04em;
920
- text-transform: uppercase;
921
- transition: background 100ms, color 100ms;
922
- display: inline-flex;
923
- align-items: center;
924
- justify-content: center;
925
- }
926
- .ag-nav-pill.svelte-n8lbn1:hover {
927
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
928
- }
929
- .ag-nav-today.svelte-n8lbn1 {
930
- max-width: 60px;
931
- overflow: hidden;
932
- white-space: nowrap;
933
- transition: max-width 250ms ease, padding 250ms ease, opacity 200ms ease;
934
- }
935
- .ag-nav-today--hidden.svelte-n8lbn1 {
936
- max-width: 0;
937
- padding-left: 0;
938
- padding-right: 0;
939
- opacity: 0;
940
- pointer-events: none;
941
- }
942
- .ag-nav-pill.svelte-n8lbn1:focus-visible {
943
- outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
944
- outline-offset: 2px;
945
- }
946
-
947
759
  /* ═══ Container ═══ */
948
760
  .ag.svelte-n8lbn1 {
949
761
  position: relative;
@@ -955,7 +767,7 @@
955
767
  width: 100%;
956
768
  min-width: 0;
957
769
  box-sizing: border-box;
958
- color: var(--dt-text, rgba(255, 255, 255, 0.92));
770
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
959
771
  font-family: var(--dt-sans, system-ui, sans-serif);
960
772
  }
961
773
 
@@ -966,8 +778,8 @@
966
778
  135deg,
967
779
  transparent,
968
780
  transparent 6px,
969
- color-mix(in srgb, var(--dt-text, rgba(255, 255, 255, 0.92)) 4%, transparent) 6px,
970
- color-mix(in srgb, var(--dt-text, rgba(255, 255, 255, 0.92)) 4%, transparent) 12px
781
+ color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 6px,
782
+ color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 12px
971
783
  );
972
784
  }
973
785
 
@@ -980,12 +792,11 @@
980
792
  flex-direction: column;
981
793
  overflow-y: auto;
982
794
  overflow-x: hidden;
983
- padding-top: 44px;
795
+ padding-top: 8px;
984
796
  scrollbar-width: thin;
985
797
  scrollbar-color: var(--dt-border) transparent;
986
798
  }
987
799
  .ag--auto.svelte-n8lbn1 .ag-body:where(.svelte-n8lbn1) { overflow-y: visible; min-height: auto; }
988
- .ag--mobile.svelte-n8lbn1 .ag-body:where(.svelte-n8lbn1) { padding-top: 8px; }
989
800
  .ag-body.svelte-n8lbn1::-webkit-scrollbar {
990
801
  width: 4px;
991
802
  }
@@ -1000,13 +811,13 @@
1000
811
  align-items: center;
1001
812
  gap: 8px;
1002
813
  padding: 6px 16px;
1003
- border-bottom: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
814
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
1004
815
  }
1005
816
  .ag-allday-label.svelte-n8lbn1 {
1006
817
  font: 600 10px/1 var(--dt-sans, system-ui, sans-serif);
1007
818
  text-transform: uppercase;
1008
819
  letter-spacing: 0.06em;
1009
- color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
820
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1010
821
  white-space: nowrap;
1011
822
  flex-shrink: 0;
1012
823
  }
@@ -1047,7 +858,7 @@
1047
858
  }
1048
859
  .ag-allday-title.svelte-n8lbn1 {
1049
860
  font: 500 0.75rem/1.2 var(--dt-sans, system-ui, sans-serif);
1050
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
861
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
1051
862
  white-space: nowrap;
1052
863
  }
1053
864
 
@@ -1057,7 +868,7 @@
1057
868
  align-items: stretch;
1058
869
  border-radius: 10px;
1059
870
  background: color-mix(in srgb, var(--ev-color) 15%, var(--dt-surface, var(--dt-bg, #ffffff)));
1060
- border: 1px solid color-mix(in srgb, var(--ev-color) 10%, var(--dt-border, rgba(255, 255, 255, 0.06)));
871
+ border: 1px solid color-mix(in srgb, var(--ev-color) 10%, var(--dt-border, rgba(0, 0, 0, 0.08)));
1061
872
  overflow: hidden;
1062
873
  cursor: pointer;
1063
874
  transition: background 150ms, border-color 150ms;
@@ -1116,22 +927,22 @@
1116
927
  }
1117
928
  .ag-card-meta.svelte-n8lbn1 {
1118
929
  font-size: 11px;
1119
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
930
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1120
931
  font-family: var(--dt-mono, monospace);
1121
932
  line-height: 1;
1122
933
  }
1123
934
  .ag-card-dur.svelte-n8lbn1 {
1124
935
  margin-left: 6px;
1125
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
936
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1126
937
  }
1127
938
  .ag-card-sub.svelte-n8lbn1 {
1128
939
  font-size: 11px;
1129
- color: var(--dt-text-2, rgba(255, 255, 255, 0.45));
940
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1130
941
  line-height: 1;
1131
942
  }
1132
943
  .ag-card-loc.svelte-n8lbn1 {
1133
944
  font-size: 10px;
1134
- color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
945
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1135
946
  line-height: 1;
1136
947
  }
1137
948
  .ag-card-tags.svelte-n8lbn1 {
@@ -1198,7 +1009,7 @@
1198
1009
  .ag-card-order.svelte-n8lbn1 {
1199
1010
  font-size: 10px;
1200
1011
  font-weight: 700;
1201
- color: var(--dt-text-3, rgba(255, 255, 255, 0.2));
1012
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1202
1013
  font-family: var(--dt-mono, monospace);
1203
1014
  flex-shrink: 0;
1204
1015
  }
@@ -1237,7 +1048,7 @@
1237
1048
  }
1238
1049
  .ag--mobile.svelte-n8lbn1 .ag-q-status:where(.svelte-n8lbn1) {
1239
1050
  border-right: none;
1240
- border-bottom: 1px solid var(--dt-border, rgba(255, 255, 255, 0.06));
1051
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
1241
1052
  padding-bottom: 10px;
1242
1053
  margin-bottom: 8px;
1243
1054
  overflow-y: visible;
@@ -1272,15 +1083,12 @@
1272
1083
  .ag--mobile.svelte-n8lbn1 .ag-card--plan:where(.svelte-n8lbn1) .ag-card-title:where(.svelte-n8lbn1) {
1273
1084
  font-size: 15px;
1274
1085
  }
1275
- .ag--mobile.svelte-n8lbn1 .ag-nav-pill:where(.svelte-n8lbn1) {
1276
- padding: 10px 16px;
1277
- }
1278
1086
  .ag-q-label.svelte-n8lbn1 {
1279
1087
  font-size: 8px;
1280
1088
  font-weight: 600;
1281
1089
  letter-spacing: 0.14em;
1282
1090
  text-transform: uppercase;
1283
- color: var(--dt-text-3, rgba(255, 255, 255, 0.25));
1091
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1284
1092
  margin-bottom: 8px;
1285
1093
  padding: 0 12px;
1286
1094
  font-family: var(--dt-sans, system-ui, sans-serif);
@@ -1292,13 +1100,13 @@
1292
1100
  flex: 1;
1293
1101
  font-size: 13px;
1294
1102
  font-weight: 300;
1295
- color: var(--dt-text-3, rgba(255, 255, 255, 0.25));
1103
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1296
1104
  }
1297
1105
 
1298
1106
  /* ── NOW column (includes Done above) ── */
1299
1107
  .ag-q-status.svelte-n8lbn1 {
1300
1108
  padding: 0 10px 0 14px;
1301
- border-right: 1px solid var(--dt-border, rgba(255, 255, 255, 0.06));
1109
+ border-right: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
1302
1110
  display: flex;
1303
1111
  flex-direction: column;
1304
1112
  overflow-y: auto;
@@ -1310,7 +1118,7 @@
1310
1118
  .ag-q-done-section.svelte-n8lbn1 {
1311
1119
  margin-bottom: 10px;
1312
1120
  padding-bottom: 8px;
1313
- border-bottom: 1px solid var(--dt-border, rgba(255, 255, 255, 0.06));
1121
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
1314
1122
  }
1315
1123
  .ag-q-clock.svelte-n8lbn1 {
1316
1124
  font-size: 10px;
@@ -1355,7 +1163,7 @@
1355
1163
  font-size: 11px;
1356
1164
  font-weight: 600;
1357
1165
  line-height: 1.2;
1358
- color: var(--dt-text, rgba(255, 255, 255, 0.92));
1166
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
1359
1167
  white-space: nowrap;
1360
1168
  overflow: hidden;
1361
1169
  text-overflow: ellipsis;
@@ -1364,12 +1172,12 @@
1364
1172
  .ag-q-now-time.svelte-n8lbn1 {
1365
1173
  font-size: 9px;
1366
1174
  font-family: var(--dt-mono, monospace);
1367
- color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
1175
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1368
1176
  margin-bottom: 6px;
1369
1177
  }
1370
1178
  .ag-q-now-track.svelte-n8lbn1 {
1371
1179
  height: 2px;
1372
- background: var(--dt-border, rgba(255, 255, 255, 0.06));
1180
+ background: var(--dt-border, rgba(0, 0, 0, 0.08));
1373
1181
  border-radius: 1px;
1374
1182
  overflow: hidden;
1375
1183
  }
@@ -1386,7 +1194,7 @@
1386
1194
  .ag-q-free-label.svelte-n8lbn1 {
1387
1195
  font-size: 12px;
1388
1196
  font-weight: 300;
1389
- color: var(--dt-text-3, rgba(255, 255, 255, 0.25));
1197
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1390
1198
  margin-bottom: 2px;
1391
1199
  }
1392
1200
 
@@ -1424,18 +1232,18 @@
1424
1232
  }
1425
1233
  .ag-q-done-check.svelte-n8lbn1 {
1426
1234
  font-size: 9px;
1427
- color: var(--dt-success, rgba(120, 200, 140, 0.7));
1235
+ color: var(--dt-success, rgba(22, 163, 74, 0.7));
1428
1236
  flex-shrink: 0;
1429
1237
  }
1430
1238
  .ag-q-done-title.svelte-n8lbn1 {
1431
1239
  font-size: 10px;
1432
1240
  line-height: 1.2;
1433
- color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
1241
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1434
1242
  white-space: nowrap;
1435
1243
  overflow: hidden;
1436
1244
  text-overflow: ellipsis;
1437
1245
  text-decoration: line-through;
1438
- text-decoration-color: var(--dt-text-3, rgba(255, 255, 255, 0.15));
1246
+ text-decoration-color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1439
1247
  }
1440
1248
 
1441
1249
  /* ═══ Past Day: "The Log" ═══ */
@@ -1454,7 +1262,7 @@
1454
1262
  align-items: center;
1455
1263
  gap: 10px;
1456
1264
  padding: 8px 0;
1457
- border-bottom: 1px solid var(--dt-border, rgba(255, 255, 255, 0.04));
1265
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
1458
1266
  cursor: pointer;
1459
1267
  transition: opacity 150ms;
1460
1268
  }
@@ -1477,13 +1285,13 @@
1477
1285
  }
1478
1286
  .ag-log-check.svelte-n8lbn1 {
1479
1287
  font-size: 10px;
1480
- color: var(--dt-success, rgba(120, 200, 140, 0.5));
1288
+ color: var(--dt-success, rgba(22, 163, 74, 0.7));
1481
1289
  flex-shrink: 0;
1482
1290
  }
1483
1291
  .ag-log-time.svelte-n8lbn1 {
1484
1292
  font-size: 11px;
1485
1293
  font-family: var(--dt-mono, monospace);
1486
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
1294
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1487
1295
  width: 64px;
1488
1296
  flex-shrink: 0;
1489
1297
  }
@@ -1498,18 +1306,18 @@
1498
1306
  font-size: 13px;
1499
1307
  font-weight: 500;
1500
1308
  line-height: 1.2;
1501
- color: var(--dt-text-2, rgba(255, 255, 255, 0.55));
1309
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1502
1310
  flex: 1;
1503
1311
  white-space: nowrap;
1504
1312
  overflow: hidden;
1505
1313
  text-overflow: ellipsis;
1506
1314
  text-decoration: line-through;
1507
- text-decoration-color: var(--dt-border, rgba(255, 255, 255, 0.08));
1315
+ text-decoration-color: var(--dt-border, rgba(0, 0, 0, 0.08));
1508
1316
  }
1509
1317
  .ag-log-dur.svelte-n8lbn1 {
1510
1318
  font-size: 10px;
1511
1319
  font-family: var(--dt-mono, monospace);
1512
- color: var(--dt-text-3, rgba(255, 255, 255, 0.2));
1320
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1513
1321
  flex-shrink: 0;
1514
1322
  }
1515
1323
 
@@ -1549,14 +1357,14 @@
1549
1357
  .ag-compact-row-time.svelte-n8lbn1 {
1550
1358
  font-size: 11px;
1551
1359
  font-family: var(--dt-mono, monospace);
1552
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
1360
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1553
1361
  min-width: 64px;
1554
1362
  flex-shrink: 0;
1555
1363
  }
1556
1364
  .ag-compact-row-title.svelte-n8lbn1 {
1557
1365
  font-size: 12px;
1558
1366
  font-weight: 500;
1559
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
1367
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1560
1368
  flex: 1;
1561
1369
  white-space: nowrap;
1562
1370
  overflow: hidden;
@@ -1566,12 +1374,12 @@
1566
1374
  .ag-compact-row-dur.svelte-n8lbn1 {
1567
1375
  font-size: 10px;
1568
1376
  font-family: var(--dt-mono, monospace);
1569
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
1377
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1570
1378
  flex-shrink: 0;
1571
1379
  }
1572
1380
  .ag-compact-row-sub.svelte-n8lbn1 {
1573
1381
  font-size: 10px;
1574
- color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
1382
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1575
1383
  flex-shrink: 0;
1576
1384
  }
1577
1385
  .ag-compact-row-tag.svelte-n8lbn1 {
@@ -1605,57 +1413,6 @@
1605
1413
  display: none;
1606
1414
  }
1607
1415
 
1608
- /* ═══ Floating nav pills ═══ */
1609
- .ag-nav.svelte-uhwfyj {
1610
- position: absolute;
1611
- top: 10px;
1612
- right: 14px;
1613
- z-index: 20;
1614
- display: flex;
1615
- gap: 2px;
1616
- background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
1617
- backdrop-filter: blur(6px);
1618
- -webkit-backdrop-filter: blur(6px);
1619
- border-radius: 8px;
1620
- padding: 2px;
1621
- border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
1622
- }
1623
- .ag-nav-pill.svelte-uhwfyj {
1624
- border: none;
1625
- background: transparent;
1626
- color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
1627
- cursor: pointer;
1628
- font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
1629
- padding: 6px 12px;
1630
- border-radius: 6px;
1631
- letter-spacing: 0.04em;
1632
- text-transform: uppercase;
1633
- transition: background 100ms, color 100ms;
1634
- display: inline-flex;
1635
- align-items: center;
1636
- justify-content: center;
1637
- }
1638
- .ag-nav-pill.svelte-uhwfyj:hover {
1639
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
1640
- }
1641
- .ag-nav-today.svelte-uhwfyj {
1642
- max-width: 60px;
1643
- overflow: hidden;
1644
- white-space: nowrap;
1645
- transition: max-width 250ms ease, padding 250ms ease, opacity 200ms ease;
1646
- }
1647
- .ag-nav-today--hidden.svelte-uhwfyj {
1648
- max-width: 0;
1649
- padding-left: 0;
1650
- padding-right: 0;
1651
- opacity: 0;
1652
- pointer-events: none;
1653
- }
1654
- .ag-nav-pill.svelte-uhwfyj:focus-visible {
1655
- outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
1656
- outline-offset: 2px;
1657
- }
1658
-
1659
1416
  /* ═══ Container ═══ */
1660
1417
  .ag.svelte-uhwfyj {
1661
1418
  position: relative;
@@ -1667,7 +1424,7 @@
1667
1424
  width: 100%;
1668
1425
  min-width: 0;
1669
1426
  box-sizing: border-box;
1670
- color: var(--dt-text, rgba(255, 255, 255, 0.92));
1427
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
1671
1428
  font-family: var(--dt-sans, system-ui, sans-serif);
1672
1429
  }
1673
1430
  .ag--auto.svelte-uhwfyj {
@@ -1682,7 +1439,7 @@
1682
1439
  overflow-y: auto;
1683
1440
  overflow-x: hidden;
1684
1441
  box-sizing: border-box;
1685
- padding-top: 44px;
1442
+ padding-top: 8px;
1686
1443
  scrollbar-width: thin;
1687
1444
  scrollbar-color: var(--dt-border) transparent;
1688
1445
  }
@@ -1736,7 +1493,7 @@
1736
1493
  }
1737
1494
  .ag-allday-title.svelte-uhwfyj {
1738
1495
  font: 500 0.7rem/1.2 var(--dt-sans, system-ui, sans-serif);
1739
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
1496
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
1740
1497
  white-space: nowrap;
1741
1498
  }
1742
1499
 
@@ -1746,7 +1503,7 @@
1746
1503
  align-items: stretch;
1747
1504
  border-radius: 6px;
1748
1505
  background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, var(--dt-bg, #ffffff)));
1749
- border: 1px solid color-mix(in srgb, var(--ev-color) 8%, var(--dt-border, rgba(255, 255, 255, 0.06)));
1506
+ border: 1px solid color-mix(in srgb, var(--ev-color) 8%, var(--dt-border, rgba(0, 0, 0, 0.08)));
1750
1507
  overflow: hidden;
1751
1508
  cursor: pointer;
1752
1509
  transition: background 150ms, border-color 150ms;
@@ -1800,13 +1557,13 @@
1800
1557
  display: flex;
1801
1558
  align-items: center;
1802
1559
  font-size: 11px;
1803
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
1560
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1804
1561
  font-family: var(--dt-mono, monospace);
1805
1562
  line-height: 1;
1806
1563
  }
1807
1564
  .ag-card-dur.svelte-uhwfyj {
1808
1565
  margin-left: 6px;
1809
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
1566
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1810
1567
  }
1811
1568
  .ag-card-eta.svelte-uhwfyj {
1812
1569
  margin-left: auto;
@@ -1818,12 +1575,12 @@
1818
1575
  }
1819
1576
  .ag-card-sub.svelte-uhwfyj {
1820
1577
  font-size: 11px;
1821
- color: var(--dt-text-2, rgba(255, 255, 255, 0.45));
1578
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1822
1579
  line-height: 1;
1823
1580
  }
1824
1581
  .ag-card-loc.svelte-uhwfyj {
1825
1582
  font-size: 10px;
1826
- color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
1583
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1827
1584
  line-height: 1;
1828
1585
  }
1829
1586
  .ag-card-tags.svelte-uhwfyj {
@@ -1841,7 +1598,7 @@
1841
1598
  }
1842
1599
  .ag-card-progress.svelte-uhwfyj {
1843
1600
  height: 3px;
1844
- background: var(--dt-border, rgba(255, 255, 255, 0.06));
1601
+ background: var(--dt-border, rgba(0, 0, 0, 0.08));
1845
1602
  border-radius: 2px;
1846
1603
  overflow: hidden;
1847
1604
  margin-top: 2px;
@@ -1855,7 +1612,7 @@
1855
1612
 
1856
1613
  /* ═══ Week day groups ═══ */
1857
1614
  .ag-wday.svelte-uhwfyj {
1858
- border-bottom: 1px solid var(--dt-border, rgba(255, 255, 255, 0.06));
1615
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
1859
1616
  }
1860
1617
  .ag-wday--today.svelte-uhwfyj {
1861
1618
  background: color-mix(in srgb, var(--dt-accent, #2563eb) 2%, transparent);
@@ -1911,10 +1668,10 @@
1911
1668
  border-radius: 3px;
1912
1669
  }
1913
1670
  .ag-wday-badge--muted.svelte-uhwfyj {
1914
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
1671
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1915
1672
  background: color-mix(
1916
1673
  in srgb,
1917
- var(--dt-text-2, rgba(255, 255, 255, 0.5)) 10%,
1674
+ var(--dt-text-2, rgba(0, 0, 0, 0.54)) 10%,
1918
1675
  transparent
1919
1676
  );
1920
1677
  }
@@ -1925,13 +1682,13 @@
1925
1682
  .ag-wday-date.svelte-uhwfyj {
1926
1683
  font-size: 11px;
1927
1684
  font-family: var(--dt-mono, monospace);
1928
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
1685
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1929
1686
  }
1930
1687
 
1931
1688
  .ag-wday-empty.svelte-uhwfyj {
1932
1689
  padding: 2px 20px 6px;
1933
1690
  font-size: 11px;
1934
- color: var(--dt-text-3, rgba(255, 255, 255, 0.2));
1691
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1935
1692
  font-style: italic;
1936
1693
  }
1937
1694
 
@@ -1967,7 +1724,7 @@
1967
1724
  }
1968
1725
  .ag-wday-past-line.svelte-uhwfyj {
1969
1726
  font-size: 10px;
1970
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
1727
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1971
1728
  padding: 6px 0 0;
1972
1729
  opacity: 0.5;
1973
1730
  }
@@ -2008,7 +1765,7 @@
2008
1765
  .ag-compact-time.svelte-uhwfyj {
2009
1766
  font-size: 11px;
2010
1767
  font-family: var(--dt-mono, monospace);
2011
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
1768
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
2012
1769
  min-width: 40px;
2013
1770
  flex-shrink: 0;
2014
1771
  white-space: nowrap;
@@ -2016,7 +1773,7 @@
2016
1773
  .ag-compact-title.svelte-uhwfyj {
2017
1774
  font-size: 12px;
2018
1775
  font-weight: 500;
2019
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
1776
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
2020
1777
  flex: 1;
2021
1778
  min-width: 0;
2022
1779
  white-space: nowrap;
@@ -2027,13 +1784,13 @@
2027
1784
  .ag-compact-dur.svelte-uhwfyj {
2028
1785
  font-size: 10px;
2029
1786
  font-family: var(--dt-mono, monospace);
2030
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
1787
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
2031
1788
  flex-shrink: 0;
2032
1789
  white-space: nowrap;
2033
1790
  }
2034
1791
  .ag-compact-sub.svelte-uhwfyj {
2035
1792
  font-size: 10px;
2036
- color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
1793
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
2037
1794
  flex-shrink: 0;
2038
1795
  white-space: nowrap;
2039
1796
  overflow: hidden;
@@ -2042,7 +1799,7 @@
2042
1799
  }
2043
1800
  .ag-compact-loc.svelte-uhwfyj {
2044
1801
  font-size: 9px;
2045
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
1802
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
2046
1803
  flex-shrink: 0;
2047
1804
  white-space: nowrap;
2048
1805
  overflow: hidden;
@@ -2107,9 +1864,6 @@
2107
1864
  .ag--mobile.svelte-uhwfyj .ag-compact-time:where(.svelte-uhwfyj) {
2108
1865
  font-size: 12px;
2109
1866
  }
2110
- .ag--mobile.svelte-uhwfyj .ag-nav-pill:where(.svelte-uhwfyj) {
2111
- padding: 10px 16px;
2112
- }
2113
1867
  .ag--mobile.svelte-uhwfyj .ag-wslot-cards--multi:where(.svelte-uhwfyj) {
2114
1868
  grid-template-columns: 1fr;
2115
1869
  }
@@ -2134,7 +1888,7 @@
2134
1888
  padding: 4px 8px;
2135
1889
  overflow-x: auto;
2136
1890
  scrollbar-width: none;
2137
- border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.06));
1891
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
2138
1892
  flex-shrink: 0;
2139
1893
  align-items: center;
2140
1894
  }
@@ -2198,7 +1952,7 @@
2198
1952
  overflow-x: hidden;
2199
1953
  -webkit-overflow-scrolling: touch;
2200
1954
  scrollbar-width: thin;
2201
- scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.08)) transparent;
1955
+ scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
2202
1956
  position: relative;
2203
1957
  padding-top: 8px;
2204
1958
  }
@@ -2385,7 +2139,7 @@
2385
2139
 
2386
2140
  .mb-ev-loc.svelte-zbkzcp {
2387
2141
  font: 400 10px/1 var(--dt-sans, system-ui, sans-serif);
2388
- color: var(--dt-text-3, rgba(0, 0, 0, 0.3));
2142
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
2389
2143
  white-space: nowrap;
2390
2144
  overflow: hidden;
2391
2145
  text-overflow: ellipsis;
@@ -2460,7 +2214,7 @@
2460
2214
  overflow-y: auto;
2461
2215
  -webkit-overflow-scrolling: touch;
2462
2216
  scrollbar-width: thin;
2463
- scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.08)) transparent;
2217
+ scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
2464
2218
  }
2465
2219
  .mw--auto.svelte-1d18hkf .mw-list:where(.svelte-1d18hkf) { overflow-y: visible; }
2466
2220
 
@@ -2476,7 +2230,7 @@
2476
2230
  text-align: left;
2477
2231
  width: 100%;
2478
2232
  -webkit-tap-highlight-color: transparent;
2479
- border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.06));
2233
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
2480
2234
  min-height: 56px;
2481
2235
  }
2482
2236
  .mw-row.svelte-1d18hkf:last-child {
@@ -2570,7 +2324,7 @@
2570
2324
 
2571
2325
  .mw-empty.svelte-1d18hkf {
2572
2326
  font: 400 12px/1 var(--dt-sans, system-ui, sans-serif);
2573
- color: var(--dt-text-3, rgba(0, 0, 0, 0.25));
2327
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
2574
2328
  font-style: italic;
2575
2329
  }
2576
2330
 
@@ -2662,7 +2416,7 @@
2662
2416
  /* ─── Chevron ────────────────────────────────────── */
2663
2417
  .mw-chevron.svelte-1d18hkf {
2664
2418
  flex-shrink: 0;
2665
- color: var(--dt-text-3, rgba(0, 0, 0, 0.2));
2419
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
2666
2420
  position: relative;
2667
2421
  z-index: 1;
2668
2422
  pointer-events: none;
@@ -2684,7 +2438,7 @@
2684
2438
  overflow: clip;
2685
2439
  display: flex;
2686
2440
  flex-direction: column;
2687
- border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
2441
+ border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
2688
2442
  box-sizing: border-box;
2689
2443
  }
2690
2444
  .cal--auto.svelte-1b53e7w {
@@ -2693,38 +2447,105 @@
2693
2447
  }
2694
2448
 
2695
2449
 
2696
- /* ── Floating pills ── */
2450
+ /* ── Desktop header ── */
2451
+ .cal-hd.svelte-1b53e7w {
2452
+ display: flex;
2453
+ align-items: center;
2454
+ gap: 8px;
2455
+ padding: 8px 12px;
2456
+ min-height: 48px;
2457
+ box-sizing: border-box;
2458
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
2459
+ flex-shrink: 0;
2460
+ }
2461
+
2462
+ .cal-hd-side.svelte-1b53e7w {
2463
+ display: flex;
2464
+ align-items: center;
2465
+ gap: 4px;
2466
+ flex: 1;
2467
+ min-width: 0;
2468
+ }
2469
+
2470
+ .cal-hd-side--end.svelte-1b53e7w {
2471
+ justify-content: flex-end;
2472
+ }
2473
+
2474
+ .cal-hd-title.svelte-1b53e7w {
2475
+ font: 600 14px/1.2 var(--dt-sans, system-ui, sans-serif);
2476
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
2477
+ white-space: nowrap;
2478
+ overflow: hidden;
2479
+ text-overflow: ellipsis;
2480
+ }
2481
+
2482
+ .cal-hd-btn.svelte-1b53e7w {
2483
+ display: flex;
2484
+ align-items: center;
2485
+ justify-content: center;
2486
+ width: 28px;
2487
+ height: 28px;
2488
+ border: none;
2489
+ background: transparent;
2490
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
2491
+ border-radius: 6px;
2492
+ cursor: pointer;
2493
+ transition: background 120ms, color 120ms;
2494
+ }
2495
+
2496
+ .cal-hd-btn.svelte-1b53e7w:hover {
2497
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
2498
+ background: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 8%, transparent);
2499
+ }
2500
+
2501
+ .cal-hd-btn.svelte-1b53e7w:focus-visible,
2502
+ .cal-hd-today.svelte-1b53e7w:focus-visible,
2503
+ .cal-pill.svelte-1b53e7w:focus-visible {
2504
+ outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
2505
+ outline-offset: 2px;
2506
+ }
2507
+
2508
+ .cal-hd-today.svelte-1b53e7w {
2509
+ font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
2510
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
2511
+ background: transparent;
2512
+ border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
2513
+ padding: 6px 10px;
2514
+ border-radius: 6px;
2515
+ cursor: pointer;
2516
+ white-space: nowrap;
2517
+ margin-right: 2px;
2518
+ transition: background 120ms, color 120ms, border-color 120ms;
2519
+ }
2520
+
2521
+ .cal-hd-today.svelte-1b53e7w:hover {
2522
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
2523
+ border-color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
2524
+ }
2525
+
2697
2526
  .cal-pills.svelte-1b53e7w {
2698
- position: absolute;
2699
- top: 22px;
2700
- bottom: auto;
2701
- left: 10px;
2702
- z-index: 20;
2703
2527
  display: flex;
2704
2528
  gap: 2px;
2705
2529
  background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
2706
- backdrop-filter: blur(6px);
2707
- -webkit-backdrop-filter: blur(6px);
2708
2530
  border-radius: 8px;
2709
2531
  padding: 2px;
2710
- border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
2532
+ border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
2533
+ flex-shrink: 0;
2711
2534
  }
2712
2535
 
2713
2536
  .cal-pill.svelte-1b53e7w {
2714
2537
  border: none;
2715
2538
  background: transparent;
2716
- color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
2539
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
2717
2540
  cursor: pointer;
2718
- font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
2719
- padding: 6px 12px;
2541
+ font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
2542
+ padding: 5px 12px;
2720
2543
  border-radius: 6px;
2721
- letter-spacing: 0.04em;
2722
- text-transform: uppercase;
2723
2544
  transition: background 100ms, color 100ms;
2724
2545
  }
2725
2546
 
2726
2547
  .cal-pill.svelte-1b53e7w:hover {
2727
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
2548
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
2728
2549
  }
2729
2550
 
2730
2551
  .cal-pill--active.svelte-1b53e7w {
@@ -2732,11 +2553,6 @@
2732
2553
  color: var(--dt-btn-text, #fff);
2733
2554
  }
2734
2555
 
2735
- .cal-pill.svelte-1b53e7w:focus-visible {
2736
- outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
2737
- outline-offset: 2px;
2738
- }
2739
-
2740
2556
  .cal-body.svelte-1b53e7w {
2741
2557
  flex: 1;
2742
2558
  min-height: 0;
@@ -2753,7 +2569,7 @@
2753
2569
  justify-content: center;
2754
2570
  height: 100%;
2755
2571
  font: 400 13px / 1 var(--dt-sans, system-ui, sans-serif);
2756
- color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
2572
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
2757
2573
  }
2758
2574
 
2759
2575
  .cal-loading.svelte-1b53e7w {
@@ -2782,7 +2598,7 @@
2782
2598
  align-items: center;
2783
2599
  gap: 4px;
2784
2600
  padding: 8px 8px 6px;
2785
- border-bottom: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
2601
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
2786
2602
  flex-shrink: 0;
2787
2603
  min-height: 44px;
2788
2604
  }
@@ -2807,7 +2623,7 @@
2807
2623
  height: 32px;
2808
2624
  border: none;
2809
2625
  background: transparent;
2810
- color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
2626
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
2811
2627
  border-radius: 50%;
2812
2628
  cursor: pointer;
2813
2629
  transition: background 120ms, color 120ms;
@@ -2815,11 +2631,11 @@
2815
2631
  flex-shrink: 0;
2816
2632
  }
2817
2633
  .cal-m-nav.svelte-1b53e7w:hover {
2818
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
2819
- background: color-mix(in srgb, var(--dt-text, rgba(226, 232, 240, 0.85)) 8%, transparent);
2634
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
2635
+ background: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 8%, transparent);
2820
2636
  }
2821
2637
  .cal-m-nav.svelte-1b53e7w:active {
2822
- background: var(--dt-accent-dim, rgba(239, 68, 68, 0.12));
2638
+ background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
2823
2639
  }
2824
2640
  .cal-m-nav.svelte-1b53e7w:focus-visible {
2825
2641
  outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
@@ -2832,13 +2648,13 @@
2832
2648
  background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
2833
2649
  border-radius: 8px;
2834
2650
  padding: 2px;
2835
- border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
2651
+ border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
2836
2652
  flex-shrink: 0;
2837
2653
  }
2838
2654
  .cal-m-pill.svelte-1b53e7w {
2839
2655
  border: none;
2840
2656
  background: transparent;
2841
- color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
2657
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
2842
2658
  cursor: pointer;
2843
2659
  font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
2844
2660
  padding: 5px 10px;
@@ -2849,7 +2665,7 @@
2849
2665
  -webkit-tap-highlight-color: transparent;
2850
2666
  }
2851
2667
  .cal-m-pill.svelte-1b53e7w:hover {
2852
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
2668
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
2853
2669
  }
2854
2670
  .cal-m-pill--active.svelte-1b53e7w {
2855
2671
  background: var(--dt-accent, #2563eb);
@@ -2860,7 +2676,7 @@
2860
2676
  flex: 1;
2861
2677
  text-align: center;
2862
2678
  font: 600 14px / 1.2 var(--dt-sans, system-ui, sans-serif);
2863
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
2679
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
2864
2680
  white-space: nowrap;
2865
2681
  overflow: hidden;
2866
2682
  text-overflow: ellipsis;