@nomideusz/svelte-calendar 0.6.9 → 0.7.1

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 +34 -137
  13. package/dist/views/planner/PlannerWeek.svelte +73 -101
  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 +209 -382
  18. package/widget/widget.js +2444 -1686
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
 
@@ -313,7 +241,10 @@
313
241
  display: flex;
314
242
  align-items: center;
315
243
  justify-content: center;
316
- transition: box-shadow 120ms, background 120ms;
244
+ /* top/height only: lane reflow animates on drop; left/width stay instant so
245
+ mount-time width measurement and infinite-scroll rebases don't slide cards */
246
+ transition: box-shadow 120ms, background 120ms,
247
+ top 180ms cubic-bezier(0.2, 0.8, 0.2, 1), height 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
317
248
  }
318
249
  .fs-event.svelte-mrwdy7:hover {
319
250
  background: color-mix(in srgb, var(--ev-color) 25%, var(--dt-surface, var(--dt-bg, #ffffff)));
@@ -335,7 +266,15 @@
335
266
  z-index: 50;
336
267
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
337
268
  cursor: grabbing;
338
- transition: none;
269
+ /* fast ease toward the snapped cursor position */
270
+ transition: left 80ms ease-out, width 80ms ease-out;
271
+ }
272
+
273
+ @media (prefers-reduced-motion: reduce) {
274
+ .fs-event.svelte-mrwdy7,
275
+ .fs-event--dragging.svelte-mrwdy7 {
276
+ transition: box-shadow 120ms, background 120ms;
277
+ }
339
278
  }
340
279
  .fs-event--cancelled.svelte-mrwdy7 {
341
280
  opacity: 0.5;
@@ -394,7 +333,7 @@
394
333
  }
395
334
  .fs-ev-title.svelte-mrwdy7 {
396
335
  font: 600 13px/1.15 var(--dt-sans, system-ui, sans-serif);
397
- color: var(--dt-text, rgba(226, 232, 240, 0.92));
336
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
398
337
  overflow: hidden;
399
338
  text-overflow: ellipsis;
400
339
  white-space: nowrap;
@@ -403,14 +342,14 @@
403
342
  }
404
343
  .fs-ev-time.svelte-mrwdy7 {
405
344
  font: 400 10px/1 var(--dt-mono, ui-monospace, monospace);
406
- color: var(--dt-text-2, rgba(148, 163, 184, 0.72));
345
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
407
346
  opacity: 0.7;
408
347
  white-space: nowrap;
409
348
  flex-shrink: 0;
410
349
  }
411
350
  .fs-ev-sub.svelte-mrwdy7 {
412
351
  font: 400 11px/1 var(--dt-sans, system-ui, sans-serif);
413
- color: var(--dt-text-2, rgba(148, 163, 184, 0.72));
352
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
414
353
  opacity: 0.6;
415
354
  white-space: nowrap;
416
355
  overflow: hidden;
@@ -420,7 +359,7 @@
420
359
  }
421
360
  .fs-ev-loc.svelte-mrwdy7 {
422
361
  font: 400 10px/1 var(--dt-sans, system-ui, sans-serif);
423
- color: var(--dt-text-3, rgba(148, 163, 184, 0.5));
362
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
424
363
  white-space: nowrap;
425
364
  overflow: hidden;
426
365
  text-overflow: ellipsis;
@@ -465,9 +404,8 @@
465
404
  overflow-y: auto;
466
405
  overflow-x: hidden;
467
406
  box-sizing: border-box;
468
- padding-top: 48px;
469
407
  scrollbar-width: thin;
470
- scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.08)) transparent;
408
+ scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
471
409
  }
472
410
  .wg--auto.svelte-j4rvbp .wg-body:where(.svelte-j4rvbp) { overflow-y: visible; }
473
411
 
@@ -488,7 +426,7 @@
488
426
  }
489
427
 
490
428
  .wg-week--current.svelte-j4rvbp {
491
- background: var(--dt-today-bg, rgba(239, 68, 68, 0.02));
429
+ background: var(--dt-today-bg, rgba(37, 99, 235, 0.04));
492
430
  border: 2.5px solid var(--dt-accent, #2563eb);
493
431
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dt-accent, #2563eb) 15%, transparent);
494
432
  }
@@ -512,7 +450,7 @@
512
450
  position: relative;
513
451
  min-height: 170px;
514
452
  padding: 4px 4px 8px;
515
- border-right: 1px solid var(--dt-border, rgba(0, 0, 0, 0.06));
453
+ border-right: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
516
454
  cursor: pointer;
517
455
  transition: background 0.15s;
518
456
  }
@@ -520,8 +458,8 @@
520
458
  .wg-cell.svelte-j4rvbp:last-child { border-right: none; }
521
459
  .wg-cell.svelte-j4rvbp:hover { background: var(--dt-hover, rgba(0, 0, 0, 0.015)); }
522
460
 
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); }
461
+ .wg-cell--today.svelte-j4rvbp { background: var(--dt-today-bg, rgba(37, 99, 235, 0.04)); }
462
+ .wg-cell--today.svelte-j4rvbp:hover { background: color-mix(in srgb, var(--dt-accent, #2563eb) 6%, transparent); }
525
463
 
526
464
  /* Dim all cells by default; current week overrides to full brightness */
527
465
  .wg-cell.svelte-j4rvbp { opacity: 0.55; }
@@ -540,8 +478,8 @@
540
478
  45deg,
541
479
  transparent,
542
480
  transparent 6px,
543
- var(--dt-border, rgba(0, 0, 0, 0.06)) 6px,
544
- var(--dt-border, rgba(0, 0, 0, 0.06)) 7px
481
+ var(--dt-border, rgba(0, 0, 0, 0.08)) 6px,
482
+ var(--dt-border, rgba(0, 0, 0, 0.08)) 7px
545
483
  ) !important;
546
484
  }
547
485
 
@@ -554,8 +492,8 @@
554
492
  border-radius: 3px;
555
493
  background: repeating-linear-gradient(
556
494
  -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,
495
+ color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent),
496
+ color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 3px,
559
497
  transparent 3px,
560
498
  transparent 6px
561
499
  );
@@ -565,7 +503,7 @@
565
503
 
566
504
  .wg-blocked-label.svelte-j4rvbp {
567
505
  font: 500 8px/1 var(--dt-sans, system-ui, sans-serif);
568
- color: var(--dt-text-3, rgba(0, 0, 0, 0.3));
506
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
569
507
  text-transform: uppercase;
570
508
  letter-spacing: 0.04em;
571
509
  white-space: nowrap;
@@ -590,11 +528,11 @@
590
528
  font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
591
529
  letter-spacing: 0.04em;
592
530
  text-transform: uppercase;
593
- color: var(--dt-text-3, rgba(0, 0, 0, 0.3));
531
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
594
532
  }
595
533
 
596
534
  .wg-week--current.svelte-j4rvbp .wg-day-wd:where(.svelte-j4rvbp) {
597
- color: var(--dt-text-2, rgba(0, 0, 0, 0.5));
535
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
598
536
  }
599
537
 
600
538
  .wg-cell-hd--today.svelte-j4rvbp .wg-day-wd:where(.svelte-j4rvbp) {
@@ -604,11 +542,11 @@
604
542
 
605
543
  .wg-day-num.svelte-j4rvbp {
606
544
  font: 700 14px / 1 var(--dt-sans, system-ui, sans-serif);
607
- color: var(--dt-text, rgba(0, 0, 0, 0.85));
545
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
608
546
  }
609
547
 
610
548
  .wg-week--current.svelte-j4rvbp .wg-day-num:where(.svelte-j4rvbp) {
611
- color: var(--dt-text, rgba(0, 0, 0, 0.95));
549
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
612
550
  }
613
551
 
614
552
  .wg-day-num--today.svelte-j4rvbp {
@@ -626,13 +564,13 @@
626
564
  font: 800 22px / 1 var(--dt-sans, system-ui, sans-serif);
627
565
  letter-spacing: 0.02em;
628
566
  text-transform: uppercase;
629
- color: color-mix(in srgb, var(--dt-text, rgba(255,255,255,0.85)) 4%, transparent);
567
+ color: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent);
630
568
  pointer-events: none;
631
569
  white-space: nowrap;
632
570
  }
633
571
 
634
572
  .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);
573
+ color: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 8%, transparent);
636
574
  }
637
575
 
638
576
  /* ─── All-day / multi-day events ─────────────────── */
@@ -690,7 +628,7 @@
690
628
 
691
629
  .wg-ad-title.svelte-j4rvbp {
692
630
  font: 500 10px / 1.1 var(--dt-sans, system-ui, sans-serif);
693
- color: var(--dt-text, rgba(0, 0, 0, 0.85));
631
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
694
632
  white-space: nowrap;
695
633
  overflow: hidden;
696
634
  text-overflow: ellipsis;
@@ -779,14 +717,14 @@
779
717
 
780
718
  .wg-ev-time.svelte-j4rvbp {
781
719
  font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
782
- color: var(--dt-text-3, rgba(0, 0, 0, 0.4));
720
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
783
721
  flex-shrink: 0;
784
722
  white-space: nowrap;
785
723
  }
786
724
 
787
725
  .wg-ev-title.svelte-j4rvbp {
788
726
  font: 500 12px / 1.1 var(--dt-sans, system-ui, sans-serif);
789
- color: var(--dt-text, rgba(0, 0, 0, 0.85));
727
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
790
728
  white-space: nowrap;
791
729
  overflow: hidden;
792
730
  text-overflow: ellipsis;
@@ -794,7 +732,7 @@
794
732
 
795
733
  .wg-ev-loc.svelte-j4rvbp {
796
734
  font: 400 9px / 1 var(--dt-sans, system-ui, sans-serif);
797
- color: var(--dt-text-3, rgba(0, 0, 0, 0.35));
735
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
798
736
  white-space: nowrap;
799
737
  overflow: hidden;
800
738
  text-overflow: ellipsis;
@@ -803,56 +741,13 @@
803
741
 
804
742
  .wg-ev-more.svelte-j4rvbp {
805
743
  font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
806
- color: var(--dt-text-3, rgba(0, 0, 0, 0.35));
744
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
807
745
  padding: 2px 8px;
808
746
  cursor: pointer;
809
747
  }
810
748
 
811
749
  .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;
750
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
856
751
  }
857
752
 
858
753
  /* ─── Focus-visible ──────────────────────────────── */
@@ -872,78 +767,6 @@
872
767
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
873
768
  }
874
769
 
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
770
  /* ═══ Container ═══ */
948
771
  .ag.svelte-n8lbn1 {
949
772
  position: relative;
@@ -955,7 +778,7 @@
955
778
  width: 100%;
956
779
  min-width: 0;
957
780
  box-sizing: border-box;
958
- color: var(--dt-text, rgba(255, 255, 255, 0.92));
781
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
959
782
  font-family: var(--dt-sans, system-ui, sans-serif);
960
783
  }
961
784
 
@@ -966,8 +789,8 @@
966
789
  135deg,
967
790
  transparent,
968
791
  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
792
+ color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 6px,
793
+ color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 12px
971
794
  );
972
795
  }
973
796
 
@@ -980,12 +803,11 @@
980
803
  flex-direction: column;
981
804
  overflow-y: auto;
982
805
  overflow-x: hidden;
983
- padding-top: 44px;
806
+ padding-top: 8px;
984
807
  scrollbar-width: thin;
985
808
  scrollbar-color: var(--dt-border) transparent;
986
809
  }
987
810
  .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
811
  .ag-body.svelte-n8lbn1::-webkit-scrollbar {
990
812
  width: 4px;
991
813
  }
@@ -1000,13 +822,13 @@
1000
822
  align-items: center;
1001
823
  gap: 8px;
1002
824
  padding: 6px 16px;
1003
- border-bottom: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
825
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
1004
826
  }
1005
827
  .ag-allday-label.svelte-n8lbn1 {
1006
828
  font: 600 10px/1 var(--dt-sans, system-ui, sans-serif);
1007
829
  text-transform: uppercase;
1008
830
  letter-spacing: 0.06em;
1009
- color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
831
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1010
832
  white-space: nowrap;
1011
833
  flex-shrink: 0;
1012
834
  }
@@ -1047,7 +869,7 @@
1047
869
  }
1048
870
  .ag-allday-title.svelte-n8lbn1 {
1049
871
  font: 500 0.75rem/1.2 var(--dt-sans, system-ui, sans-serif);
1050
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
872
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
1051
873
  white-space: nowrap;
1052
874
  }
1053
875
 
@@ -1057,7 +879,7 @@
1057
879
  align-items: stretch;
1058
880
  border-radius: 10px;
1059
881
  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)));
882
+ border: 1px solid color-mix(in srgb, var(--ev-color) 10%, var(--dt-border, rgba(0, 0, 0, 0.08)));
1061
883
  overflow: hidden;
1062
884
  cursor: pointer;
1063
885
  transition: background 150ms, border-color 150ms;
@@ -1116,22 +938,22 @@
1116
938
  }
1117
939
  .ag-card-meta.svelte-n8lbn1 {
1118
940
  font-size: 11px;
1119
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
941
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1120
942
  font-family: var(--dt-mono, monospace);
1121
943
  line-height: 1;
1122
944
  }
1123
945
  .ag-card-dur.svelte-n8lbn1 {
1124
946
  margin-left: 6px;
1125
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
947
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1126
948
  }
1127
949
  .ag-card-sub.svelte-n8lbn1 {
1128
950
  font-size: 11px;
1129
- color: var(--dt-text-2, rgba(255, 255, 255, 0.45));
951
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1130
952
  line-height: 1;
1131
953
  }
1132
954
  .ag-card-loc.svelte-n8lbn1 {
1133
955
  font-size: 10px;
1134
- color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
956
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1135
957
  line-height: 1;
1136
958
  }
1137
959
  .ag-card-tags.svelte-n8lbn1 {
@@ -1198,7 +1020,7 @@
1198
1020
  .ag-card-order.svelte-n8lbn1 {
1199
1021
  font-size: 10px;
1200
1022
  font-weight: 700;
1201
- color: var(--dt-text-3, rgba(255, 255, 255, 0.2));
1023
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1202
1024
  font-family: var(--dt-mono, monospace);
1203
1025
  flex-shrink: 0;
1204
1026
  }
@@ -1237,7 +1059,7 @@
1237
1059
  }
1238
1060
  .ag--mobile.svelte-n8lbn1 .ag-q-status:where(.svelte-n8lbn1) {
1239
1061
  border-right: none;
1240
- border-bottom: 1px solid var(--dt-border, rgba(255, 255, 255, 0.06));
1062
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
1241
1063
  padding-bottom: 10px;
1242
1064
  margin-bottom: 8px;
1243
1065
  overflow-y: visible;
@@ -1272,15 +1094,12 @@
1272
1094
  .ag--mobile.svelte-n8lbn1 .ag-card--plan:where(.svelte-n8lbn1) .ag-card-title:where(.svelte-n8lbn1) {
1273
1095
  font-size: 15px;
1274
1096
  }
1275
- .ag--mobile.svelte-n8lbn1 .ag-nav-pill:where(.svelte-n8lbn1) {
1276
- padding: 10px 16px;
1277
- }
1278
1097
  .ag-q-label.svelte-n8lbn1 {
1279
1098
  font-size: 8px;
1280
1099
  font-weight: 600;
1281
1100
  letter-spacing: 0.14em;
1282
1101
  text-transform: uppercase;
1283
- color: var(--dt-text-3, rgba(255, 255, 255, 0.25));
1102
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1284
1103
  margin-bottom: 8px;
1285
1104
  padding: 0 12px;
1286
1105
  font-family: var(--dt-sans, system-ui, sans-serif);
@@ -1292,13 +1111,13 @@
1292
1111
  flex: 1;
1293
1112
  font-size: 13px;
1294
1113
  font-weight: 300;
1295
- color: var(--dt-text-3, rgba(255, 255, 255, 0.25));
1114
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1296
1115
  }
1297
1116
 
1298
1117
  /* ── NOW column (includes Done above) ── */
1299
1118
  .ag-q-status.svelte-n8lbn1 {
1300
1119
  padding: 0 10px 0 14px;
1301
- border-right: 1px solid var(--dt-border, rgba(255, 255, 255, 0.06));
1120
+ border-right: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
1302
1121
  display: flex;
1303
1122
  flex-direction: column;
1304
1123
  overflow-y: auto;
@@ -1310,7 +1129,7 @@
1310
1129
  .ag-q-done-section.svelte-n8lbn1 {
1311
1130
  margin-bottom: 10px;
1312
1131
  padding-bottom: 8px;
1313
- border-bottom: 1px solid var(--dt-border, rgba(255, 255, 255, 0.06));
1132
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
1314
1133
  }
1315
1134
  .ag-q-clock.svelte-n8lbn1 {
1316
1135
  font-size: 10px;
@@ -1355,7 +1174,7 @@
1355
1174
  font-size: 11px;
1356
1175
  font-weight: 600;
1357
1176
  line-height: 1.2;
1358
- color: var(--dt-text, rgba(255, 255, 255, 0.92));
1177
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
1359
1178
  white-space: nowrap;
1360
1179
  overflow: hidden;
1361
1180
  text-overflow: ellipsis;
@@ -1364,12 +1183,12 @@
1364
1183
  .ag-q-now-time.svelte-n8lbn1 {
1365
1184
  font-size: 9px;
1366
1185
  font-family: var(--dt-mono, monospace);
1367
- color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
1186
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1368
1187
  margin-bottom: 6px;
1369
1188
  }
1370
1189
  .ag-q-now-track.svelte-n8lbn1 {
1371
1190
  height: 2px;
1372
- background: var(--dt-border, rgba(255, 255, 255, 0.06));
1191
+ background: var(--dt-border, rgba(0, 0, 0, 0.08));
1373
1192
  border-radius: 1px;
1374
1193
  overflow: hidden;
1375
1194
  }
@@ -1386,7 +1205,7 @@
1386
1205
  .ag-q-free-label.svelte-n8lbn1 {
1387
1206
  font-size: 12px;
1388
1207
  font-weight: 300;
1389
- color: var(--dt-text-3, rgba(255, 255, 255, 0.25));
1208
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1390
1209
  margin-bottom: 2px;
1391
1210
  }
1392
1211
 
@@ -1424,18 +1243,18 @@
1424
1243
  }
1425
1244
  .ag-q-done-check.svelte-n8lbn1 {
1426
1245
  font-size: 9px;
1427
- color: var(--dt-success, rgba(120, 200, 140, 0.7));
1246
+ color: var(--dt-success, rgba(22, 163, 74, 0.7));
1428
1247
  flex-shrink: 0;
1429
1248
  }
1430
1249
  .ag-q-done-title.svelte-n8lbn1 {
1431
1250
  font-size: 10px;
1432
1251
  line-height: 1.2;
1433
- color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
1252
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1434
1253
  white-space: nowrap;
1435
1254
  overflow: hidden;
1436
1255
  text-overflow: ellipsis;
1437
1256
  text-decoration: line-through;
1438
- text-decoration-color: var(--dt-text-3, rgba(255, 255, 255, 0.15));
1257
+ text-decoration-color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1439
1258
  }
1440
1259
 
1441
1260
  /* ═══ Past Day: "The Log" ═══ */
@@ -1454,7 +1273,7 @@
1454
1273
  align-items: center;
1455
1274
  gap: 10px;
1456
1275
  padding: 8px 0;
1457
- border-bottom: 1px solid var(--dt-border, rgba(255, 255, 255, 0.04));
1276
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
1458
1277
  cursor: pointer;
1459
1278
  transition: opacity 150ms;
1460
1279
  }
@@ -1477,13 +1296,13 @@
1477
1296
  }
1478
1297
  .ag-log-check.svelte-n8lbn1 {
1479
1298
  font-size: 10px;
1480
- color: var(--dt-success, rgba(120, 200, 140, 0.5));
1299
+ color: var(--dt-success, rgba(22, 163, 74, 0.7));
1481
1300
  flex-shrink: 0;
1482
1301
  }
1483
1302
  .ag-log-time.svelte-n8lbn1 {
1484
1303
  font-size: 11px;
1485
1304
  font-family: var(--dt-mono, monospace);
1486
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
1305
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1487
1306
  width: 64px;
1488
1307
  flex-shrink: 0;
1489
1308
  }
@@ -1498,18 +1317,18 @@
1498
1317
  font-size: 13px;
1499
1318
  font-weight: 500;
1500
1319
  line-height: 1.2;
1501
- color: var(--dt-text-2, rgba(255, 255, 255, 0.55));
1320
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1502
1321
  flex: 1;
1503
1322
  white-space: nowrap;
1504
1323
  overflow: hidden;
1505
1324
  text-overflow: ellipsis;
1506
1325
  text-decoration: line-through;
1507
- text-decoration-color: var(--dt-border, rgba(255, 255, 255, 0.08));
1326
+ text-decoration-color: var(--dt-border, rgba(0, 0, 0, 0.08));
1508
1327
  }
1509
1328
  .ag-log-dur.svelte-n8lbn1 {
1510
1329
  font-size: 10px;
1511
1330
  font-family: var(--dt-mono, monospace);
1512
- color: var(--dt-text-3, rgba(255, 255, 255, 0.2));
1331
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1513
1332
  flex-shrink: 0;
1514
1333
  }
1515
1334
 
@@ -1549,14 +1368,14 @@
1549
1368
  .ag-compact-row-time.svelte-n8lbn1 {
1550
1369
  font-size: 11px;
1551
1370
  font-family: var(--dt-mono, monospace);
1552
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
1371
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1553
1372
  min-width: 64px;
1554
1373
  flex-shrink: 0;
1555
1374
  }
1556
1375
  .ag-compact-row-title.svelte-n8lbn1 {
1557
1376
  font-size: 12px;
1558
1377
  font-weight: 500;
1559
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
1378
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1560
1379
  flex: 1;
1561
1380
  white-space: nowrap;
1562
1381
  overflow: hidden;
@@ -1566,12 +1385,12 @@
1566
1385
  .ag-compact-row-dur.svelte-n8lbn1 {
1567
1386
  font-size: 10px;
1568
1387
  font-family: var(--dt-mono, monospace);
1569
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
1388
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1570
1389
  flex-shrink: 0;
1571
1390
  }
1572
1391
  .ag-compact-row-sub.svelte-n8lbn1 {
1573
1392
  font-size: 10px;
1574
- color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
1393
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1575
1394
  flex-shrink: 0;
1576
1395
  }
1577
1396
  .ag-compact-row-tag.svelte-n8lbn1 {
@@ -1605,57 +1424,6 @@
1605
1424
  display: none;
1606
1425
  }
1607
1426
 
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
1427
  /* ═══ Container ═══ */
1660
1428
  .ag.svelte-uhwfyj {
1661
1429
  position: relative;
@@ -1667,7 +1435,7 @@
1667
1435
  width: 100%;
1668
1436
  min-width: 0;
1669
1437
  box-sizing: border-box;
1670
- color: var(--dt-text, rgba(255, 255, 255, 0.92));
1438
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
1671
1439
  font-family: var(--dt-sans, system-ui, sans-serif);
1672
1440
  }
1673
1441
  .ag--auto.svelte-uhwfyj {
@@ -1682,7 +1450,7 @@
1682
1450
  overflow-y: auto;
1683
1451
  overflow-x: hidden;
1684
1452
  box-sizing: border-box;
1685
- padding-top: 44px;
1453
+ padding-top: 8px;
1686
1454
  scrollbar-width: thin;
1687
1455
  scrollbar-color: var(--dt-border) transparent;
1688
1456
  }
@@ -1736,7 +1504,7 @@
1736
1504
  }
1737
1505
  .ag-allday-title.svelte-uhwfyj {
1738
1506
  font: 500 0.7rem/1.2 var(--dt-sans, system-ui, sans-serif);
1739
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
1507
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
1740
1508
  white-space: nowrap;
1741
1509
  }
1742
1510
 
@@ -1746,7 +1514,7 @@
1746
1514
  align-items: stretch;
1747
1515
  border-radius: 6px;
1748
1516
  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)));
1517
+ border: 1px solid color-mix(in srgb, var(--ev-color) 8%, var(--dt-border, rgba(0, 0, 0, 0.08)));
1750
1518
  overflow: hidden;
1751
1519
  cursor: pointer;
1752
1520
  transition: background 150ms, border-color 150ms;
@@ -1800,13 +1568,13 @@
1800
1568
  display: flex;
1801
1569
  align-items: center;
1802
1570
  font-size: 11px;
1803
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
1571
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1804
1572
  font-family: var(--dt-mono, monospace);
1805
1573
  line-height: 1;
1806
1574
  }
1807
1575
  .ag-card-dur.svelte-uhwfyj {
1808
1576
  margin-left: 6px;
1809
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
1577
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1810
1578
  }
1811
1579
  .ag-card-eta.svelte-uhwfyj {
1812
1580
  margin-left: auto;
@@ -1818,12 +1586,12 @@
1818
1586
  }
1819
1587
  .ag-card-sub.svelte-uhwfyj {
1820
1588
  font-size: 11px;
1821
- color: var(--dt-text-2, rgba(255, 255, 255, 0.45));
1589
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1822
1590
  line-height: 1;
1823
1591
  }
1824
1592
  .ag-card-loc.svelte-uhwfyj {
1825
1593
  font-size: 10px;
1826
- color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
1594
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1827
1595
  line-height: 1;
1828
1596
  }
1829
1597
  .ag-card-tags.svelte-uhwfyj {
@@ -1841,7 +1609,7 @@
1841
1609
  }
1842
1610
  .ag-card-progress.svelte-uhwfyj {
1843
1611
  height: 3px;
1844
- background: var(--dt-border, rgba(255, 255, 255, 0.06));
1612
+ background: var(--dt-border, rgba(0, 0, 0, 0.08));
1845
1613
  border-radius: 2px;
1846
1614
  overflow: hidden;
1847
1615
  margin-top: 2px;
@@ -1855,7 +1623,7 @@
1855
1623
 
1856
1624
  /* ═══ Week day groups ═══ */
1857
1625
  .ag-wday.svelte-uhwfyj {
1858
- border-bottom: 1px solid var(--dt-border, rgba(255, 255, 255, 0.06));
1626
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
1859
1627
  }
1860
1628
  .ag-wday--today.svelte-uhwfyj {
1861
1629
  background: color-mix(in srgb, var(--dt-accent, #2563eb) 2%, transparent);
@@ -1911,10 +1679,10 @@
1911
1679
  border-radius: 3px;
1912
1680
  }
1913
1681
  .ag-wday-badge--muted.svelte-uhwfyj {
1914
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
1682
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1915
1683
  background: color-mix(
1916
1684
  in srgb,
1917
- var(--dt-text-2, rgba(255, 255, 255, 0.5)) 10%,
1685
+ var(--dt-text-2, rgba(0, 0, 0, 0.54)) 10%,
1918
1686
  transparent
1919
1687
  );
1920
1688
  }
@@ -1925,13 +1693,13 @@
1925
1693
  .ag-wday-date.svelte-uhwfyj {
1926
1694
  font-size: 11px;
1927
1695
  font-family: var(--dt-mono, monospace);
1928
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
1696
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1929
1697
  }
1930
1698
 
1931
1699
  .ag-wday-empty.svelte-uhwfyj {
1932
1700
  padding: 2px 20px 6px;
1933
1701
  font-size: 11px;
1934
- color: var(--dt-text-3, rgba(255, 255, 255, 0.2));
1702
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1935
1703
  font-style: italic;
1936
1704
  }
1937
1705
 
@@ -1967,7 +1735,7 @@
1967
1735
  }
1968
1736
  .ag-wday-past-line.svelte-uhwfyj {
1969
1737
  font-size: 10px;
1970
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
1738
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1971
1739
  padding: 6px 0 0;
1972
1740
  opacity: 0.5;
1973
1741
  }
@@ -2008,7 +1776,7 @@
2008
1776
  .ag-compact-time.svelte-uhwfyj {
2009
1777
  font-size: 11px;
2010
1778
  font-family: var(--dt-mono, monospace);
2011
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
1779
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
2012
1780
  min-width: 40px;
2013
1781
  flex-shrink: 0;
2014
1782
  white-space: nowrap;
@@ -2016,7 +1784,7 @@
2016
1784
  .ag-compact-title.svelte-uhwfyj {
2017
1785
  font-size: 12px;
2018
1786
  font-weight: 500;
2019
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
1787
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
2020
1788
  flex: 1;
2021
1789
  min-width: 0;
2022
1790
  white-space: nowrap;
@@ -2027,13 +1795,13 @@
2027
1795
  .ag-compact-dur.svelte-uhwfyj {
2028
1796
  font-size: 10px;
2029
1797
  font-family: var(--dt-mono, monospace);
2030
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
1798
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
2031
1799
  flex-shrink: 0;
2032
1800
  white-space: nowrap;
2033
1801
  }
2034
1802
  .ag-compact-sub.svelte-uhwfyj {
2035
1803
  font-size: 10px;
2036
- color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
1804
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
2037
1805
  flex-shrink: 0;
2038
1806
  white-space: nowrap;
2039
1807
  overflow: hidden;
@@ -2042,7 +1810,7 @@
2042
1810
  }
2043
1811
  .ag-compact-loc.svelte-uhwfyj {
2044
1812
  font-size: 9px;
2045
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
1813
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
2046
1814
  flex-shrink: 0;
2047
1815
  white-space: nowrap;
2048
1816
  overflow: hidden;
@@ -2107,9 +1875,6 @@
2107
1875
  .ag--mobile.svelte-uhwfyj .ag-compact-time:where(.svelte-uhwfyj) {
2108
1876
  font-size: 12px;
2109
1877
  }
2110
- .ag--mobile.svelte-uhwfyj .ag-nav-pill:where(.svelte-uhwfyj) {
2111
- padding: 10px 16px;
2112
- }
2113
1878
  .ag--mobile.svelte-uhwfyj .ag-wslot-cards--multi:where(.svelte-uhwfyj) {
2114
1879
  grid-template-columns: 1fr;
2115
1880
  }
@@ -2134,7 +1899,7 @@
2134
1899
  padding: 4px 8px;
2135
1900
  overflow-x: auto;
2136
1901
  scrollbar-width: none;
2137
- border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.06));
1902
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
2138
1903
  flex-shrink: 0;
2139
1904
  align-items: center;
2140
1905
  }
@@ -2198,7 +1963,7 @@
2198
1963
  overflow-x: hidden;
2199
1964
  -webkit-overflow-scrolling: touch;
2200
1965
  scrollbar-width: thin;
2201
- scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.08)) transparent;
1966
+ scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
2202
1967
  position: relative;
2203
1968
  padding-top: 8px;
2204
1969
  }
@@ -2385,7 +2150,7 @@
2385
2150
 
2386
2151
  .mb-ev-loc.svelte-zbkzcp {
2387
2152
  font: 400 10px/1 var(--dt-sans, system-ui, sans-serif);
2388
- color: var(--dt-text-3, rgba(0, 0, 0, 0.3));
2153
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
2389
2154
  white-space: nowrap;
2390
2155
  overflow: hidden;
2391
2156
  text-overflow: ellipsis;
@@ -2460,7 +2225,7 @@
2460
2225
  overflow-y: auto;
2461
2226
  -webkit-overflow-scrolling: touch;
2462
2227
  scrollbar-width: thin;
2463
- scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.08)) transparent;
2228
+ scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
2464
2229
  }
2465
2230
  .mw--auto.svelte-1d18hkf .mw-list:where(.svelte-1d18hkf) { overflow-y: visible; }
2466
2231
 
@@ -2476,7 +2241,7 @@
2476
2241
  text-align: left;
2477
2242
  width: 100%;
2478
2243
  -webkit-tap-highlight-color: transparent;
2479
- border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.06));
2244
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
2480
2245
  min-height: 56px;
2481
2246
  }
2482
2247
  .mw-row.svelte-1d18hkf:last-child {
@@ -2570,7 +2335,7 @@
2570
2335
 
2571
2336
  .mw-empty.svelte-1d18hkf {
2572
2337
  font: 400 12px/1 var(--dt-sans, system-ui, sans-serif);
2573
- color: var(--dt-text-3, rgba(0, 0, 0, 0.25));
2338
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
2574
2339
  font-style: italic;
2575
2340
  }
2576
2341
 
@@ -2662,7 +2427,7 @@
2662
2427
  /* ─── Chevron ────────────────────────────────────── */
2663
2428
  .mw-chevron.svelte-1d18hkf {
2664
2429
  flex-shrink: 0;
2665
- color: var(--dt-text-3, rgba(0, 0, 0, 0.2));
2430
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
2666
2431
  position: relative;
2667
2432
  z-index: 1;
2668
2433
  pointer-events: none;
@@ -2684,7 +2449,7 @@
2684
2449
  overflow: clip;
2685
2450
  display: flex;
2686
2451
  flex-direction: column;
2687
- border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
2452
+ border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
2688
2453
  box-sizing: border-box;
2689
2454
  }
2690
2455
  .cal--auto.svelte-1b53e7w {
@@ -2693,38 +2458,105 @@
2693
2458
  }
2694
2459
 
2695
2460
 
2696
- /* ── Floating pills ── */
2461
+ /* ── Desktop header ── */
2462
+ .cal-hd.svelte-1b53e7w {
2463
+ display: flex;
2464
+ align-items: center;
2465
+ gap: 8px;
2466
+ padding: 8px 12px;
2467
+ min-height: 48px;
2468
+ box-sizing: border-box;
2469
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
2470
+ flex-shrink: 0;
2471
+ }
2472
+
2473
+ .cal-hd-side.svelte-1b53e7w {
2474
+ display: flex;
2475
+ align-items: center;
2476
+ gap: 4px;
2477
+ flex: 1;
2478
+ min-width: 0;
2479
+ }
2480
+
2481
+ .cal-hd-side--end.svelte-1b53e7w {
2482
+ justify-content: flex-end;
2483
+ }
2484
+
2485
+ .cal-hd-title.svelte-1b53e7w {
2486
+ font: 600 14px/1.2 var(--dt-sans, system-ui, sans-serif);
2487
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
2488
+ white-space: nowrap;
2489
+ overflow: hidden;
2490
+ text-overflow: ellipsis;
2491
+ }
2492
+
2493
+ .cal-hd-btn.svelte-1b53e7w {
2494
+ display: flex;
2495
+ align-items: center;
2496
+ justify-content: center;
2497
+ width: 28px;
2498
+ height: 28px;
2499
+ border: none;
2500
+ background: transparent;
2501
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
2502
+ border-radius: 6px;
2503
+ cursor: pointer;
2504
+ transition: background 120ms, color 120ms;
2505
+ }
2506
+
2507
+ .cal-hd-btn.svelte-1b53e7w:hover {
2508
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
2509
+ background: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 8%, transparent);
2510
+ }
2511
+
2512
+ .cal-hd-btn.svelte-1b53e7w:focus-visible,
2513
+ .cal-hd-today.svelte-1b53e7w:focus-visible,
2514
+ .cal-pill.svelte-1b53e7w:focus-visible {
2515
+ outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
2516
+ outline-offset: 2px;
2517
+ }
2518
+
2519
+ .cal-hd-today.svelte-1b53e7w {
2520
+ font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
2521
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
2522
+ background: transparent;
2523
+ border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
2524
+ padding: 6px 10px;
2525
+ border-radius: 6px;
2526
+ cursor: pointer;
2527
+ white-space: nowrap;
2528
+ margin-right: 2px;
2529
+ transition: background 120ms, color 120ms, border-color 120ms;
2530
+ }
2531
+
2532
+ .cal-hd-today.svelte-1b53e7w:hover {
2533
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
2534
+ border-color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
2535
+ }
2536
+
2697
2537
  .cal-pills.svelte-1b53e7w {
2698
- position: absolute;
2699
- top: 22px;
2700
- bottom: auto;
2701
- left: 10px;
2702
- z-index: 20;
2703
2538
  display: flex;
2704
2539
  gap: 2px;
2705
2540
  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
2541
  border-radius: 8px;
2709
2542
  padding: 2px;
2710
- border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
2543
+ border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
2544
+ flex-shrink: 0;
2711
2545
  }
2712
2546
 
2713
2547
  .cal-pill.svelte-1b53e7w {
2714
2548
  border: none;
2715
2549
  background: transparent;
2716
- color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
2550
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
2717
2551
  cursor: pointer;
2718
- font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
2719
- padding: 6px 12px;
2552
+ font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
2553
+ padding: 5px 12px;
2720
2554
  border-radius: 6px;
2721
- letter-spacing: 0.04em;
2722
- text-transform: uppercase;
2723
2555
  transition: background 100ms, color 100ms;
2724
2556
  }
2725
2557
 
2726
2558
  .cal-pill.svelte-1b53e7w:hover {
2727
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
2559
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
2728
2560
  }
2729
2561
 
2730
2562
  .cal-pill--active.svelte-1b53e7w {
@@ -2732,11 +2564,6 @@
2732
2564
  color: var(--dt-btn-text, #fff);
2733
2565
  }
2734
2566
 
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
2567
  .cal-body.svelte-1b53e7w {
2741
2568
  flex: 1;
2742
2569
  min-height: 0;
@@ -2753,7 +2580,7 @@
2753
2580
  justify-content: center;
2754
2581
  height: 100%;
2755
2582
  font: 400 13px / 1 var(--dt-sans, system-ui, sans-serif);
2756
- color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
2583
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
2757
2584
  }
2758
2585
 
2759
2586
  .cal-loading.svelte-1b53e7w {
@@ -2782,7 +2609,7 @@
2782
2609
  align-items: center;
2783
2610
  gap: 4px;
2784
2611
  padding: 8px 8px 6px;
2785
- border-bottom: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
2612
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
2786
2613
  flex-shrink: 0;
2787
2614
  min-height: 44px;
2788
2615
  }
@@ -2807,7 +2634,7 @@
2807
2634
  height: 32px;
2808
2635
  border: none;
2809
2636
  background: transparent;
2810
- color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
2637
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
2811
2638
  border-radius: 50%;
2812
2639
  cursor: pointer;
2813
2640
  transition: background 120ms, color 120ms;
@@ -2815,11 +2642,11 @@
2815
2642
  flex-shrink: 0;
2816
2643
  }
2817
2644
  .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);
2645
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
2646
+ background: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 8%, transparent);
2820
2647
  }
2821
2648
  .cal-m-nav.svelte-1b53e7w:active {
2822
- background: var(--dt-accent-dim, rgba(239, 68, 68, 0.12));
2649
+ background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
2823
2650
  }
2824
2651
  .cal-m-nav.svelte-1b53e7w:focus-visible {
2825
2652
  outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
@@ -2832,13 +2659,13 @@
2832
2659
  background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
2833
2660
  border-radius: 8px;
2834
2661
  padding: 2px;
2835
- border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
2662
+ border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
2836
2663
  flex-shrink: 0;
2837
2664
  }
2838
2665
  .cal-m-pill.svelte-1b53e7w {
2839
2666
  border: none;
2840
2667
  background: transparent;
2841
- color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
2668
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
2842
2669
  cursor: pointer;
2843
2670
  font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
2844
2671
  padding: 5px 10px;
@@ -2849,7 +2676,7 @@
2849
2676
  -webkit-tap-highlight-color: transparent;
2850
2677
  }
2851
2678
  .cal-m-pill.svelte-1b53e7w:hover {
2852
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
2679
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
2853
2680
  }
2854
2681
  .cal-m-pill--active.svelte-1b53e7w {
2855
2682
  background: var(--dt-accent, #2563eb);
@@ -2860,7 +2687,7 @@
2860
2687
  flex: 1;
2861
2688
  text-align: center;
2862
2689
  font: 600 14px / 1.2 var(--dt-sans, system-ui, sans-serif);
2863
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
2690
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
2864
2691
  white-space: nowrap;
2865
2692
  overflow: hidden;
2866
2693
  text-overflow: ellipsis;