@nomideusz/svelte-calendar 1.4.3 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +13 -0
  2. package/dist/calendar/Calendar.svelte +2 -2
  3. package/dist/calendar/Calendar.svelte.d.ts +7 -0
  4. package/dist/views/agenda/AgendaDay.svelte +20 -7
  5. package/dist/views/agenda/AgendaWeek.svelte +10 -4
  6. package/dist/views/mobile/MobileDay.svelte +7 -2
  7. package/dist/views/mobile/MobileWeek.svelte +6 -3
  8. package/dist/views/month/MonthGrid.svelte +7 -3
  9. package/dist/views/planner/PlannerScroll.svelte +8 -5
  10. package/dist/views/planner/PlannerWeek.svelte +7 -3
  11. package/package.json +1 -1
  12. package/widget/widget.js +117 -211
package/widget/widget.js CHANGED
@@ -1,6 +1,6 @@
1
- globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Container ──────────────────────────────────── */\n\t.tw.svelte-j4rvbp {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\toverflow: hidden;\n\t\tuser-select: none;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tbackground: var(--dt-paper, none), var(--dt-bg, #efebe9);\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t.tw--auto.svelte-j4rvbp { overflow: visible; }\n\n\t/* ─── Scroll container ───────────────────────────── */\n\t.tw-scroll.svelte-j4rvbp {\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow-y: auto;\n\t\toverflow-x: auto;\n\t\t/* Horizontal stays contained (a sideways swipe must not trigger the\n\t\t browser's back navigation); vertical chains to the page, so a wheel\n\t\t over a page-embedded calendar scrolls on once the grid ends. */\n\t\toverscroll-behavior-x: contain;\n\t\toverscroll-behavior-y: auto;\n\t\tscrollbar-width: thin;\n\t\tscrollbar-color: var(--dt-scrollbar, rgba(15, 15, 15, 0.1)) transparent;\n\t}\n\t.tw--auto.svelte-j4rvbp .tw-scroll:where(.svelte-j4rvbp) { overflow-y: visible; }\n\t.tw-scroll.svelte-j4rvbp::-webkit-scrollbar { width: 5px; height: 5px; }\n\t.tw-scroll.svelte-j4rvbp::-webkit-scrollbar-thumb {\n\t\tbackground: var(--dt-scrollbar, rgba(15, 15, 15, 0.1));\n\t\tborder-radius: 0;\n\t}\n\t.tw-scroll.svelte-j4rvbp::-webkit-scrollbar-track { background: transparent; }\n\n\t.tw-inner.svelte-j4rvbp {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\twidth: 100%;\n\t}\n\n\t/* ─── Sticky top (header + all-day) ──────────────── */\n\t.tw-top.svelte-j4rvbp {\n\t\tposition: sticky;\n\t\ttop: 0;\n\t\tz-index: 30;\n\t\tbackground: var(--dt-paper, none), var(--dt-bg, #efebe9);\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\n\t/* ─── Day header row ─────────────────────────────── */\n\t.tw-head.svelte-j4rvbp {\n\t\tdisplay: flex;\n\t}\n\n\t.tw-corner.svelte-j4rvbp {\n\t\tflex-shrink: 0;\n\t\tposition: sticky;\n\t\tleft: 0;\n\t\tz-index: 2;\n\t\tbackground: var(--dt-paper, none), var(--dt-bg, #efebe9);\n\t}\n\n\t.tw-hd.svelte-j4rvbp {\n\t\tflex: 1 1 0;\n\t\tmin-width: var(--tw-col-min, 110px);\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tpadding: 14px 4px 12px;\n\t\tborder-left: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\n\t.tw-hd-wd.svelte-j4rvbp {\n\t\tfont: 500 12px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.tw-hd--today.svelte-j4rvbp .tw-hd-wd:where(.svelte-j4rvbp) {\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t}\n\n\t/* The day number is the typography of the grid: large, regular weight. */\n\t.tw-hd-num.svelte-j4rvbp {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tfont: 400 40px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-stretch: 90%;\n\t\tletter-spacing: -0.02em;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\t/* Today: the numeral in the accent, nothing else. */\n\t.tw-hd-num--today.svelte-j4rvbp {\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t}\n\n\t.tw-hd-custom.svelte-j4rvbp {\n\t\tmax-width: 100%;\n\t\toverflow: hidden;\n\t}\n\n\t/* ─── All-day strip ──────────────────────────────── */\n\t.tw-allday.svelte-j4rvbp {\n\t\tdisplay: flex;\n\t\tborder-top: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\n\t.tw-ad-gutter.svelte-j4rvbp {\n\t\tflex-shrink: 0;\n\t\t/* The padding sits inside the gutter's width, so the all-day cells\n\t\t start where the day columns and headers start. */\n\t\tbox-sizing: border-box;\n\t\tposition: sticky;\n\t\tleft: 0;\n\t\tz-index: 2;\n\t\tbackground: var(--dt-paper, none), var(--dt-bg, #efebe9);\n\t\tdisplay: flex;\n\t\talign-items: flex-start;\n\t\tjustify-content: flex-end;\n\t\tpadding: 6px 8px 6px 0;\n\t}\n\t.tw-ad-gutter-lb.svelte-j4rvbp {\n\t\tfont: 500 12px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\ttext-align: right;\n\t}\n\n\t.tw-ad-cell.svelte-j4rvbp {\n\t\tflex: 1 1 0;\n\t\tmin-width: var(--tw-col-min, 110px);\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 2px;\n\t\tpadding: 4px 0 5px;\n\t\tborder-left: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\t.tw-ad-cell--today.svelte-j4rvbp { background: var(--dt-today-bg, rgba(29, 79, 215, 0.04)); }\n\n\t.tw-ad.svelte-j4rvbp {\n\t\tappearance: none;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tpadding: 0 10px;\n\t\tmin-height: 36px;\n\t\tborder: none;\n\t\tborder-radius: 0;\n\t\t/* The paper's grain runs through the band (multiply keeps the colour). */\n\t\tbackground: var(--dt-paper, none) var(--ev-color);\n\t\tbackground-blend-mode: multiply;\n\t\tcolor: var(--dt-btn-text, #fff);\n\t\tcursor: pointer;\n\t\toverflow: hidden;\n\t\ttext-align: left;\n\t\ttransition: filter 0.12s;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t.tw-ad.svelte-j4rvbp:hover {\n\t\tfilter: brightness(1.08);\n\t}\n\t/* A span continues across its days as one band: no edge between segments. */\n\t.tw-ad--mid.svelte-j4rvbp,\n\t.tw-ad--end.svelte-j4rvbp:not(.tw-ad--start) {\n\t\tmargin-left: -1px;\n\t}\n\t.tw-ad--selected.svelte-j4rvbp {\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);\n\t}\n\t.tw-ad--cancelled.svelte-j4rvbp .tw-ad-title:where(.svelte-j4rvbp) {\n\t\ttext-decoration: line-through;\n\t}\n\t.tw-ad--cancelled.svelte-j4rvbp {\n\t\tbackground: color-mix(in srgb, var(--ev-color) 55%, var(--dt-bg, #efebe9));\n\t}\n\t.tw-ad.svelte-j4rvbp:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\n\t.tw-ad-title.svelte-j4rvbp {\n\t\tfont: 500 13.5px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: inherit;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tunicode-bidi: plaintext;\n\t\ttext-align: left;\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t}\n\t/* …but it sits on the calendar's side, by the bar */\n\t.tw-ad-title.svelte-j4rvbp:dir(rtl) { text-align: right; }\n\t.tw-ad-span.svelte-j4rvbp {\n\t\tfont: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: inherit;\n\t\topacity: 0.75;\n\t\tflex-shrink: 0;\n\t}\n\t.tw-ad--mid.svelte-j4rvbp .tw-ad-title:where(.svelte-j4rvbp),\n\t.tw-ad--end.svelte-j4rvbp:not(.tw-ad--start) .tw-ad-title:where(.svelte-j4rvbp) {\n\t\tvisibility: hidden;\n\t}\n\t.tw-ad-gutter.svelte-j4rvbp + .tw-ad-cell:where(.svelte-j4rvbp) .tw-ad-title:where(.svelte-j4rvbp) {\n\t\tvisibility: visible;\n\t}\n\t.tw-ad-span.svelte-j4rvbp,\n\t.tw-ad-cont.svelte-j4rvbp,\n\t.tw-ad-arrow.svelte-j4rvbp {\n\t\tdisplay: none;\n\t}\n\t.tw-ad-arrow.svelte-j4rvbp {\n\t\tdisplay: none;\n\t\tcolor: inherit;\n\t\topacity: 0.75;\n\t\tflex-shrink: 0;\n\t}\n\t.tw-ad-arrow.svelte-j4rvbp { margin-left: auto; }\n\n\t.tw-ad-more.svelte-j4rvbp {\n\t\tappearance: none;\n\t\tbackground: none;\n\t\tborder: none;\n\t\tborder-radius: 0;\n\t\ttext-align: left;\n\t\talign-self: flex-start;\n\t\tfont: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\tpadding: 2px 6px;\n\t\tcursor: pointer;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t.tw-ad-more.svelte-j4rvbp:hover { color: var(--dt-text, rgba(15, 15, 15, 0.87)); }\n\t.tw-ad-more.svelte-j4rvbp:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);\n\t}\n\n\t/* ─── Grid body ──────────────────────────────────── */\n\t.tw-body.svelte-j4rvbp {\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t}\n\t.tw-body--unplaced.svelte-j4rvbp {\n\t\tvisibility: hidden;\n\t\tanimation: svelte-j4rvbp-tw-reveal 0s 1.5s forwards;\n\t}\n\t@keyframes svelte-j4rvbp-tw-reveal { to { visibility: visible; } }\n\n\t/* ─── Time gutter ────────────────────────────────── */\n\t.tw-gutter.svelte-j4rvbp {\n\t\tflex-shrink: 0;\n\t\tposition: sticky;\n\t\tleft: 0;\n\t\tz-index: 20;\n\t\tbackground: var(--dt-paper, none), var(--dt-bg, #efebe9);\n\t\tborder-right: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\n\t/* Timetable hour: the numeral carries the rank, the suffix sits raised\n\t and small beside it. */\n\t.tw-gutter-lb.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tleft: 6px;\n\t\tright: 0;\n\t\ttransform: translateY(-50%);\n\t\tdisplay: flex;\n\t\talign-items: flex-start;\n\t\tgap: 2px;\n\t\tfont: 400 26px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-stretch: 85%;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tletter-spacing: -0.02em;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t}\n\t.tw-gutter-lb.svelte-j4rvbp::after {\n\t\tcontent: '';\n\t\tflex: 1;\n\t\tmin-width: 6px;\n\t\theight: 1px;\n\t\tmargin-left: 5px;\n\t\talign-self: center;\n\t\tbackground: var(--dt-border-day, rgba(15, 15, 15, 0.3));\n\t}\n\t/* The first hour has no room above its line: it hangs below it, the\n\t tick still on the line. */\n\t.tw-gutter-lb.svelte-j4rvbp:first-child { transform: none; }\n\t.tw-gutter-lb.svelte-j4rvbp:first-child::after { align-self: flex-start; }\n\t.tw-gutter-lb--under.svelte-j4rvbp {\n\t\tvisibility: hidden;\n\t}\n\t.tw-gutter-lb.svelte-j4rvbp small:where(.svelte-j4rvbp) {\n\t\tfont-size: 10px;\n\t\tfont-weight: 500;\n\t\tline-height: 1;\n\t\tletter-spacing: 0;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\n\t/* The clock beside the now line, and the drag's edges while it lasts —\n\t both sit on the surface so they cover the hour label beneath. */\n\t.tw-gutter-now.svelte-j4rvbp,\n\t.tw-gutter-drag.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tright: 3px;\n\t\ttransform: translateY(-50%);\n\t\tpadding: 2px 4px;\n\t\tborder-radius: 0;\n\t\tbackground: var(--dt-surface, var(--dt-bg, #efebe9));\n\t\tfont: 500 11px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t\twhite-space: nowrap;\n\t\tz-index: 2;\n\t}\n\t/* The clock is a reversed plate on the accent, like a board's live time. */\n\t.tw-gutter-now.svelte-j4rvbp {\n\t\tbackground: var(--dt-accent, #1d4fd7);\n\t\tcolor: var(--dt-btn-text, #ffffff);\n\t}\n\n\t/* ─── Columns wrapper ────────────────────────────── */\n\t.tw-cols.svelte-j4rvbp {\n\t\tflex: 1;\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t\tmin-width: 0;\n\t}\n\n\t/* ─── Guide lines ────────────────────────────────── */\n\t.tw-lines.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tpointer-events: none;\n\t\t/* Above the columns' background washes, below blocked/events/now */\n\t\tz-index: 1;\n\t}\n\t.tw-line.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 1px;\n\t\tbackground: var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\t.tw-line--half.svelte-j4rvbp { opacity: 0.4; }\n\t.tw-now-week.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 0;\n\t\tborder-top: 2px solid var(--dt-accent, #1d4fd7);\n\t\topacity: 0.85;\n\t\ttransform: translateY(-1px);\n\t}\n\n\t/* ─── Day column ─────────────────────────────────── */\n\t.tw-col.svelte-j4rvbp {\n\t\tflex: 1 1 0;\n\t\tmin-width: var(--tw-col-min, 110px);\n\t\tposition: relative;\n\t\tborder-left: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tbox-sizing: border-box;\n\t}\n\t.tw-col.svelte-j4rvbp:focus-visible {\n\t\toutline: 2px solid var(--dt-text, #0f0f0f);\n\t\toutline-offset: -2px;\n\t}\n\t/* The gutter's right border already bounds the first column */\n\t.tw-lines.svelte-j4rvbp + .tw-col:where(.svelte-j4rvbp) { border-left: none; }\n\n\t/* --tw-col-wash: the column's ground, repeated under an event that the\n\t now line crosses (that event is opaque, so the line runs beneath it). */\n\t.tw-col.svelte-j4rvbp { background: var(--tw-col-wash, transparent); }\n\t.tw-col--today.svelte-j4rvbp { --tw-col-wash: var(--dt-today-bg, rgba(29, 79, 215, 0.04)); }\n\t/* Dim past days with a wash, never a subtree opacity (event contrast) */\n\t.tw-col--past.svelte-j4rvbp {\n\t\t--tw-col-wash: color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent);\n\t}\n\t/* What has already happened steps back; a cancelled block keeps its own look. */\n\t.tw-ev--past.svelte-j4rvbp:not(.tw-ev--cancelled) {\n\t\topacity: 0.78;\n\t}\n\t.tw-col--weekend.svelte-j4rvbp:not(.tw-col--today):not(.tw-col--past) {\n\t\t--tw-col-wash: var(--dt-weekend-bg, rgba(15, 15, 15, 0.012));\n\t}\n\t.tw-col--disabled.svelte-j4rvbp {\n\t\tbackground: repeating-linear-gradient(\n\t\t\t45deg,\n\t\t\ttransparent,\n\t\t\ttransparent 6px,\n\t\t\tvar(--dt-border, rgba(15, 15, 15, 0.08)) 6px,\n\t\t\tvar(--dt-border, rgba(15, 15, 15, 0.08)) 7px\n\t\t) !important;\n\t}\n\n\t/* ─── Blocked slot overlay ───────────────────────── */\n\t.tw-blocked.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tz-index: 2;\n\t\tbackground: repeating-linear-gradient(\n\t\t\t-45deg,\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent),\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 4px,\n\t\t\ttransparent 4px,\n\t\t\ttransparent 8px\n\t\t);\n\t\tpointer-events: none;\n\t\tdisplay: flex;\n\t\talign-items: flex-start;\n\t\tjustify-content: center;\n\t\toverflow: hidden;\n\t}\n\t.tw-blocked-lb.svelte-j4rvbp {\n\t\tfont: 500 11px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.04em;\n\t\twhite-space: nowrap;\n\t\tpadding-top: 4px;\n\t}\n\n\t/* ─── Now line ───────────────────────────────────── */\n\t/* Under the events (z 6): the one it crosses is opaque (.tw-ev--on-now),\n\t so the line never strikes through a title. The dot stays on top. */\n\t.tw-now.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 0;\n\t\tborder-top: 2px solid var(--dt-accent, #1d4fd7);\n\t\tz-index: 5;\n\t\tpointer-events: none;\n\t\ttransform: translateY(-1px);\n\t}\n\t.tw-now-dot.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tleft: -4px;\n\t\twidth: 8px;\n\t\theight: 8px;\n\t\tmargin-top: -4px;\n\t\tborder-radius: 50%;\n\t\tbackground: var(--dt-accent, #1d4fd7);\n\t\tz-index: 12;\n\t\tpointer-events: none;\n\t}\n\n\t/* ─── Events ─────────────────────────────────────── */\n\t.tw-ev.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tz-index: 6;\n\t\tborder-radius: 0;\n\t\tbackground: transparent;\n\t\tdisplay: flex;\n\t\talign-items: stretch;\n\t\toverflow: hidden;\n\t\tcursor: grab;\n\t\t/* Pointer drags move the event, never scroll the grid */\n\t\ttouch-action: none;\n\t\ttransition: box-shadow 120ms, background 120ms;\n\t\tbox-sizing: border-box;\n\t\tmin-height: 24px;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t.tw-ev.svelte-j4rvbp:hover {\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t\tz-index: 8;\n\t}\n\t/* Short blocks keep duration-proportional height, but get a 44px\n\t transparent hit-slop so clicks/taps still land. */\n\t.tw-ev--short.svelte-j4rvbp { overflow: visible; }\n\t.tw-ev--short.svelte-j4rvbp::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\theight: 44px;\n\t}\n\t.tw-ev--selected.svelte-j4rvbp {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t\tz-index: 9;\n\t}\n\t.tw-ev--current.svelte-j4rvbp {\n\t\tbackground: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));\n\t}\n\t/* An event the now line crosses lays its column's ground (and its own\n\t wash) over the paper, so the line passes beneath its text. */\n\t.tw-ev.tw-ev--on-now.svelte-j4rvbp {\n\t\tbackground:\n\t\t\tlinear-gradient(var(--tw-ev-wash, transparent), var(--tw-ev-wash, transparent)),\n\t\t\tlinear-gradient(var(--tw-col-wash, transparent), var(--tw-col-wash, transparent)),\n\t\t\tvar(--dt-paper, none),\n\t\t\tvar(--dt-bg, #efebe9);\n\t}\n\t.tw-ev--on-now.tw-ev--current.svelte-j4rvbp { --tw-ev-wash: var(--dt-accent-dim, rgba(29, 79, 215, 0.12)); }\n\t.tw-ev--on-now.svelte-j4rvbp:hover { --tw-ev-wash: var(--dt-hover, rgba(15, 15, 15, 0.04)); }\n\t.tw-ev--resizing.svelte-j4rvbp {\n\t\tz-index: 50;\n\t\tbox-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);\n\t\tcursor: ns-resize;\n\t}\n\t/* Origin of an in-flight move: still there, clearly no longer the subject. */\n\t.tw-ev--moving.svelte-j4rvbp {\n\t\topacity: 0.3;\n\t\tpointer-events: none;\n\t\tbox-shadow: none;\n\t}\n\t/* Status treatments: token-level dims + a non-opacity signal\n\t (strikethrough / border style) — consistent with the other views. */\n\t/* Printed states: a cancelled class is struck through and stays on the\n\t grid; a tentative one is set in grey with a dashed bar. */\n\t.tw-ev--cancelled.svelte-j4rvbp .tw-ev-title:where(.svelte-j4rvbp) {\n\t\ttext-decoration: line-through;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.tw-ev--cancelled.svelte-j4rvbp .tw-ev-stripe:where(.svelte-j4rvbp) { opacity: 0.45; /* decorative bar only */ }\n\t.tw-ev--tentative.svelte-j4rvbp .tw-ev-title:where(.svelte-j4rvbp),\n\t.tw-ev--full.svelte-j4rvbp .tw-ev-title:where(.svelte-j4rvbp) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.tw-ev--tentative.svelte-j4rvbp .tw-ev-stripe:where(.svelte-j4rvbp),\n\t.tw-ev--limited.svelte-j4rvbp .tw-ev-stripe:where(.svelte-j4rvbp) {\n\t\tbackground: repeating-linear-gradient(\n\t\t\t180deg,\n\t\t\tvar(--ev-color) 0 4px,\n\t\t\ttransparent 4px 7px\n\t\t);\n\t}\n\t.tw-ev--full.svelte-j4rvbp .tw-ev-stripe:where(.svelte-j4rvbp) { opacity: 0.45; }\n\t.tw-ev--readonly.svelte-j4rvbp { cursor: default; }\n\n\t.tw-ev-stripe.svelte-j4rvbp {\n\t\twidth: 3px;\n\t\tbackground: var(--ev-color);\n\t\tflex-shrink: 0;\n\t}\n\n\t.tw-ev-body.svelte-j4rvbp {\n\t\tcontainer: tw-ev / inline-size;\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t\tpadding: 3px 7px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 1px;\n\t\toverflow: hidden;\n\t}\n\t/* Compact (< ~35min at default zoom): one line, \"Title 9:00\". The title\n\t wins the room: the time wraps onto a second line, which the block\n\t clips, before the title is cut; a title too long alone ellipsizes. */\n\t.tw-ev--compact.svelte-j4rvbp .tw-ev-body:where(.svelte-j4rvbp) {\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t\talign-content: flex-start;\n\t\talign-items: baseline;\n\t\tgap: 24px 5px;\n\t\tpadding-top: 2px;\n\t\tpadding-bottom: 0;\n\t}\n\t.tw-ev--compact.svelte-j4rvbp .tw-ev-title:where(.svelte-j4rvbp) { flex: 0 1 auto; min-width: 0; }\n\t.tw-ev--compact.svelte-j4rvbp .tw-ev-end:where(.svelte-j4rvbp) { display: none; }\n\n\t/* Title first, time under it; both one size, rank by weight and ink. */\n\t.tw-ev-time.svelte-j4rvbp {\n\t\torder: 1;\n\t\tfont: 400 14px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t\tflex-shrink: 0;\n\t}\n\t/* A narrow overlap column keeps the start time whole and drops the end. */\n\t@container tw-ev (max-width: 104px) {\n\t\t.tw-ev-end.svelte-j4rvbp { display: none; }\n\t}\n\n\t.tw-ev-title.svelte-j4rvbp {\n\t\torder: 0;\n\t\tfont: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t/* A Latin title in an RTL calendar keeps its own direction, so the\n\t\t ellipsis cuts its end, not its start. */\n\t\tunicode-bidi: plaintext;\n\t\ttext-align: left;\n\t}\n\t/* …but it sits on the calendar's side, by the bar */\n\t.svelte-j4rvbp:is(.tw-ev-title:where(.svelte-j4rvbp), .tw-ev-loc:where(.svelte-j4rvbp)):dir(rtl) { text-align: right; }\n\t/* A block tall enough for two title lines over the time wraps the title\n\t to two. The parts flow in a wrapping column, so a room that no longer\n\t fits under them moves into a second column the block clips: it gives\n\t way whole, before the title is cut, instead of being sliced. */\n\t.tw-ev--tall.svelte-j4rvbp .tw-ev-body:where(.svelte-j4rvbp) {\n\t\tflex-wrap: wrap;\n\t\tcolumn-gap: 16px;\n\t}\n\t.tw-ev--tall.svelte-j4rvbp :is(.tw-ev-title:where(.svelte-j4rvbp), .tw-ev-time:where(.svelte-j4rvbp), .tw-ev-loc:where(.svelte-j4rvbp)) { width: 100%; }\n\t.tw-ev--tall.svelte-j4rvbp .tw-ev-title:where(.svelte-j4rvbp) {\n\t\tdisplay: -webkit-box;\n\t\t-webkit-box-orient: vertical;\n\t\t-webkit-line-clamp: 2;\n\t\tline-clamp: 2;\n\t\twhite-space: normal;\n\t\toverflow-wrap: break-word; /* a word wider than an overlap lane breaks, not clips */\n\t\thyphens: auto; /* …and hyphenates where the host page declares a lang */\n\t}\n\n\t.tw-ev-loc.svelte-j4rvbp {\n\t\torder: 2;\n\t\tfont: 400 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tunicode-bidi: plaintext;\n\t\ttext-align: left;\n\t}\n\n\t.tw-ev-live.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\ttop: 4px;\n\t\tright: 4px;\n\t\twidth: 7px;\n\t\theight: 7px;\n\t\tborder-radius: 50%;\n\t\tbackground: var(--ev-color, var(--dt-accent));\n\t\tanimation: svelte-j4rvbp-tw-pulse 2s ease-in-out infinite;\n\t}\n\t@keyframes svelte-j4rvbp-tw-pulse {\n\t\t0%, 100% { opacity: 1; }\n\t\t50% { opacity: 0.4; }\n\t}\n\n\t/* ─── Resize handles ─────────────────────────────── */\n\t/* Resizing lives only on the centered grip column. The old full-width\n\t edge bands (12–20px of inward slop each) covered short events\n\t entirely — min block height is 24px, so every grab meant to move\n\t started a resize instead. The grip is the visible affordance;\n\t everything else on the block drags to move. */\n\t.tw-ev-handle.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t\twidth: 44px;\n\t\theight: 8px;\n\t\tz-index: 2;\n\t\tcursor: ns-resize;\n\t\ttouch-action: none;\n\t}\n\t.tw-ev-handle--start.svelte-j4rvbp { top: 0; }\n\t.tw-ev-handle--end.svelte-j4rvbp { bottom: 0; }\n\t/* Hit-slop: ≥20px effective, extending inward so overflow clipping\n\t can't cut it off. */\n\t.tw-ev-handle.svelte-j4rvbp::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 20px;\n\t}\n\t.tw-ev-handle--start.svelte-j4rvbp::before { top: 0; }\n\t.tw-ev-handle--end.svelte-j4rvbp::before { bottom: 0; }\n\t/* Short events: shrink the slop so a move-grab area survives */\n\t.tw-ev--short.svelte-j4rvbp .tw-ev-handle:where(.svelte-j4rvbp)::before { height: 12px; }\n\t.tw-ev-handle.svelte-j4rvbp::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t\twidth: 20px;\n\t\theight: 3px;\n\t\tborder-radius: 0;\n\t\tbackground: var(--ev-color);\n\t\topacity: 0;\n\t\ttransition: opacity 120ms;\n\t}\n\t.tw-ev-handle--start.svelte-j4rvbp::after { top: 1px; }\n\t.tw-ev-handle--end.svelte-j4rvbp::after { bottom: 1px; }\n\t.tw-ev.svelte-j4rvbp:hover .tw-ev-handle:where(.svelte-j4rvbp)::after,\n\t.tw-ev.svelte-j4rvbp:focus-within .tw-ev-handle:where(.svelte-j4rvbp)::after,\n\t.tw-ev.svelte-j4rvbp:focus-visible .tw-ev-handle:where(.svelte-j4rvbp)::after,\n\t.tw-ev--resizing.svelte-j4rvbp .tw-ev-handle:where(.svelte-j4rvbp)::after,\n\t.tw-ev--selected.svelte-j4rvbp .tw-ev-handle:where(.svelte-j4rvbp)::after { opacity: 0.55; }\n\t/* Pointer on the grip column itself: brighten so the hit zone reads */\n\t.tw-ev-handle.svelte-j4rvbp:hover::after { opacity: 0.9; }\n\t/* Coarse pointers can't hover — show the grips persistently */\n\t@media (hover: none) {\n\t\t.tw-ev-handle.svelte-j4rvbp::after { opacity: 0.55; }\n\t}\n\n\t/* ─── Move / create ghost ────────────────────────── */\n\t.tw-ghost.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tleft: 1px;\n\t\tright: 3px;\n\t\tz-index: 40;\n\t\tborder-radius: 0;\n\t\tbackground: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, var(--dt-bg, #efebe9)));\n\t\toutline: 1px solid color-mix(in srgb, var(--ev-color) 45%, transparent);\n\t\tbox-shadow: 0 6px 18px color-mix(in srgb, var(--ev-color) 24%, rgba(0, 0, 0, 0.22));\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 1px;\n\t\tpadding: 3px 6px;\n\t\toverflow: hidden;\n\t\tpointer-events: none;\n\t\tcursor: grabbing;\n\t\tbox-sizing: border-box;\n\t}\n\t.tw-ghost--create.svelte-j4rvbp {\n\t\tbackground: color-mix(in srgb, var(--ev-color) 12%, transparent);\n\t\toutline: 1px dashed color-mix(in srgb, var(--ev-color) 60%, transparent);\n\t\tbox-shadow: none;\n\t}\n\t.tw-ghost-time.svelte-j4rvbp {\n\t\tfont: 500 12.5px/1.15 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--ev-color, var(--dt-accent, #1d4fd7));\n\t\twhite-space: nowrap;\n\t}\n\t.tw-ghost-title.svelte-j4rvbp {\n\t\tfont: 500 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t/* ─── Empty overlay ──────────────────────────────── */\n\t.tw-empty.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpointer-events: none;\n\t\tz-index: 4;\n\t}\n\n\t/* ─── Focus-visible ──────────────────────────────── */\n\t/* box-shadow instead of outline: outlines get clipped by the\n\t overflow: hidden scroll container. */\n\t.tw-ev.svelte-j4rvbp:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t\tz-index: 9;\n\t}\n\n\t/* ─── Reduced motion ─────────────────────────────── */\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.tw-ev.svelte-j4rvbp,\n\t\t.tw-ad.svelte-j4rvbp,\n\t\t.tw-ev-handle.svelte-j4rvbp::after {\n\t\t\ttransition: none;\n\t\t}\n\t\t.tw-ev-live.svelte-j4rvbp { animation: none; }\n\t}\n\n\t/* ─── Container ──────────────────────────────────── */\n\t.wg.svelte-l8xuza {\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tuser-select: none;\n\t\tfont-variant-numeric: tabular-nums;\n\t}\n\t.wg--auto.svelte-l8xuza { overflow: visible; }\n\n\t/* ─── Scrollable body ────────────────────────────── */\n\t.wg-body.svelte-l8xuza {\n\t\tflex: 1;\n\t\toverflow-y: auto;\n\t\t/* The prepend is compensated by hand (handleUserScroll); the browser's\n\t\t anchoring on top of it moved the content twice. */\n\t\toverflow-anchor: none;\n\t\t/* Seven columns scroll horizontally at narrow widths instead of squishing */\n\t\toverflow-x: auto;\n\t\tbox-sizing: border-box;\n\t\tscrollbar-width: thin;\n\t\tscrollbar-color: var(--dt-scrollbar, rgba(15, 15, 15, 0.1)) transparent;\n\t}\n\t.wg--auto.svelte-l8xuza .wg-body:where(.svelte-l8xuza) { overflow-y: visible; }\n\n\t.wg-body.svelte-l8xuza::-webkit-scrollbar { width: 4px; }\n\t.wg-body.svelte-l8xuza::-webkit-scrollbar-thumb {\n\t\tbackground: var(--dt-scrollbar, rgba(15, 15, 15, 0.1));\n\t\tborder-radius: 0;\n\t}\n\t.wg-body.svelte-l8xuza::-webkit-scrollbar-track { background: transparent; }\n\n\t.wg-probe.svelte-l8xuza {\n\t\tposition: absolute;\n\t\tvisibility: hidden;\n\t\theight: 0;\n\t\toverflow: hidden;\n\t\tpointer-events: none;\n\t}\n\n\t/* ─── Week row ───────────────────────────────────── */\n\t.wg-week.svelte-l8xuza {\n\t\tdisplay: flex;\n\t\tborder-radius: 0;\n\t\tmargin: var(--wg-row-margin, 12px) 8px;\n\t\tborder: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\toverflow: hidden;\n\t}\n\n\t.wg-week--current.svelte-l8xuza {\n\t\tbackground: var(--dt-today-bg, rgba(29, 79, 215, 0.04));\n\t\t/* The current row's frame is a day rule, not the accent */\n\t\tborder-color: var(--dt-border-day, rgba(15, 15, 15, 0.3));\n\t}\n\n\t/* ─── Week body ──────────────────────────────────── */\n\t.wg-week-body.svelte-l8xuza {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t/* ─── Day columns ────────────────────────────────── */\n\t.wg-days.svelte-l8xuza {\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t}\n\n\t.wg-cell.svelte-l8xuza {\n\t\tflex: 1;\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmin-width: 90px;\n\t\tbox-sizing: border-box;\n\t\tpadding: 4px 4px 8px;\n\t\tborder-right: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tcursor: pointer;\n\t\ttransition: background 0.15s;\n\t}\n\n\t.wg-cell.svelte-l8xuza:last-child { border-right: none; }\n\t/* The inset is on the contents, not the cell's padding: flex adds padding\n\t to a basis-0 cell, and that one column would come out wider. */\n\t.wg-cell--month.svelte-l8xuza .wg-cell-events:where(.svelte-l8xuza),\n\t.wg-cell--month.svelte-l8xuza .wg-allday:where(.svelte-l8xuza) { margin-left: var(--wg-month-inset, 22px); }\n\n\t/* ─── Month labels (vertical, read bottom-to-top) ─── */\n\t.wg-month.svelte-l8xuza {\n\t\tflex: 0 0 22px;\n\t\twriting-mode: vertical-rl;\n\t\ttransform: rotate(180deg);\n\t\ttext-align: end; /* the rotation puts the end at the top */\n\t\tpadding: 6px 0;\n\t\tfont: 500 12px / 22px var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\tcolor: var(--dt-text-3, rgba(15, 15, 15, 0.38));\n\t}\n\t.wg-week--current.svelte-l8xuza .wg-month:where(.svelte-l8xuza),\n\t.wg-month--start.svelte-l8xuza {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\t.wg-month--inset.svelte-l8xuza {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 2px;\n\t\tpointer-events: none;\n\t}\n\t.wg-cell.svelte-l8xuza:hover { background: var(--dt-hover, rgba(15, 15, 15, 0.015)); }\n\n\t.wg-cell--today.svelte-l8xuza { background: var(--dt-today-bg, rgba(29, 79, 215, 0.04)); }\n\t.wg-cell--drop.svelte-l8xuza {\n\t\tbackground: var(--dt-accent-dim, rgba(29, 79, 215, 0.12)) !important;\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\t.wg-cell--today.svelte-l8xuza:hover { background: var(--dt-hover, rgba(15, 15, 15, 0.04)); }\n\n\t/* Non-current weeks sit on the same paper; only the header ink softens,\n\t and past events print a shade lighter. */\n\t.wg-week.svelte-l8xuza:not(.wg-week--current) .wg-day-num:where(.svelte-l8xuza) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.wg-cell--past.svelte-l8xuza .wg-ev:where(.svelte-l8xuza):not(.wg-ev--cancelled) {\n\t\topacity: 0.78;\n\t}\n\n\t/* equalDays: when no cells are marked past, all are full brightness */\n\n\t.wg-cell--weekend.svelte-l8xuza { background: var(--dt-weekend-bg, rgba(15, 15, 15, 0.012)); }\n\n\t/* ─── Disabled cell ──────────────────────────────── */\n\t.wg-cell--disabled.svelte-l8xuza {\n\t\tbackground: repeating-linear-gradient(\n\t\t\t45deg,\n\t\t\ttransparent,\n\t\t\ttransparent 6px,\n\t\t\tvar(--dt-border, rgba(15, 15, 15, 0.08)) 6px,\n\t\t\tvar(--dt-border, rgba(15, 15, 15, 0.08)) 7px\n\t\t) !important;\n\t}\n\n\t/* ─── Blocked slot indicator ─────────────────────── */\n\t/* A band on the time axis, behind the chips */\n\t.wg-blocked.svelte-l8xuza {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbox-sizing: border-box;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\talign-items: flex-start;\n\t\tgap: 3px;\n\t\tpadding: 2px 4px;\n\t\tborder-radius: 0;\n\t\tbackground: repeating-linear-gradient(\n\t\t\t-45deg,\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent),\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 3px,\n\t\t\ttransparent 3px,\n\t\t\ttransparent 6px\n\t\t);\n\t}\n\n\t.wg-blocked-label.svelte-l8xuza {\n\t\tfont: 500 11px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.04em;\n\t\twhite-space: nowrap;\n\t}\n\n\t/* ─── Custom day header ──────────────────────────── */\n\t.wg-cell-custom-header.svelte-l8xuza {\n\t\tpadding: 0 4px 2px;\n\t}\n\n\t/* ─── Cell header (day label top-right) ──────────── */\n\t.wg-cell-hd.svelte-l8xuza {\n\t\talign-self: flex-end;\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 4px;\n\t\tpadding: 3px 7px;\n\t\tmargin: 1px 0 2px;\n\t\tborder-radius: 0;\n\t}\n\n\t.wg-day-wd.svelte-l8xuza {\n\t\tfont: 500 12px / 1 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--dt-text-3, rgba(15, 15, 15, 0.38));\n\t}\n\n\t.wg-week--current.svelte-l8xuza .wg-day-wd:where(.svelte-l8xuza) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\n\t.wg-day-num.svelte-l8xuza {\n\t\tfont: 400 15px / 1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\n\t.wg-week--current.svelte-l8xuza .wg-day-num:where(.svelte-l8xuza) {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\n\t/* Today's pill — after the week rules above, which it must beat */\n\t.wg-cell-hd--today.svelte-l8xuza .wg-day-wd:where(.svelte-l8xuza),\n\t.wg-cell-hd--today.svelte-l8xuza .wg-day-num:where(.svelte-l8xuza) {\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t}\n\t.wg-cell-hd--today.svelte-l8xuza .wg-day-num:where(.svelte-l8xuza) {\n\t\tbox-shadow: inset 0 -2px 0 var(--dt-accent, #1d4fd7);\n\t\tpadding-bottom: 2px;\n\t}\n\n\t/* ─── All-day / multi-day events ─────────────────── */\n\t.wg-allday.svelte-l8xuza {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--wg-chip-gap, 3px);\n\t\tmargin-top: var(--wg-chip-gap, 3px);\n\t\tflex-shrink: 0;\n\t}\n\n\t.wg-ad.svelte-l8xuza {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 3px;\n\t\tpadding: 0 5px;\n\t\theight: var(--wg-chip-h, 22px);\n\t\tbox-sizing: border-box;\n\t\tflex-shrink: 0;\n\t\tborder-radius: 0;\n\t\tborder: none;\n\t\tbackground: var(--ev-color);\n\t\tcolor: var(--dt-btn-text, #fff);\n\t\tcursor: pointer;\n\t\toverflow: hidden;\n\t\ttransition: filter 0.12s;\n\t\tmin-height: 18px;\n\t}\n\n\t.wg-ad--drag-preview.svelte-l8xuza {\n\t\tposition: relative;\n\t\tz-index: 8;\n\t\topacity: 0.95;\n\t\tpointer-events: none;\n\t\tcursor: grabbing;\n\t}\n\n\t.wg-ad.svelte-l8xuza:hover {\n\t\tfilter: brightness(1.08);\n\t}\n\n\t.wg-ad--selected.svelte-l8xuza {\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);\n\t}\n\n\t.wg-ad.svelte-l8xuza:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\n\t.wg-ad-title.svelte-l8xuza {\n\t\tfont: 500 13.5px / 1.1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: inherit;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tflex: 1;\n\t}\n\n\t.wg-ad-cont.svelte-l8xuza {\n\t\tdisplay: flex;\n\t\tcolor: inherit;\n\t\tflex-shrink: 0;\n\t}\n\n\t.wg-ad-arrow.svelte-l8xuza {\n\t\tdisplay: flex;\n\t\tcolor: inherit;\n\t\tflex-shrink: 0;\n\t\tmargin-left: auto;\n\t}\n\n\t/* ─── Events ─────────────────────────────────────── */\n\t/* The day's time axis: chips carry their own margin-top (chipTops), and\n\t the area fills the cell, so the all-day bars line up at the bottom. */\n\t.wg-cell-events.svelte-l8xuza {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tflex: 1 0 auto;\n\t\tmin-height: var(--wg-time-h, 100px);\n\t}\n\n\t.wg-now.svelte-l8xuza {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tz-index: 2;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 3px;\n\t\ttransform: translateY(-50%);\n\t\tpointer-events: none;\n\t}\n\t.wg-now.svelte-l8xuza::after {\n\t\tcontent: '';\n\t\tflex: 1;\n\t\tborder-top: 2px solid var(--dt-accent, #1d4fd7);\n\t}\n\t.wg-now-time.svelte-l8xuza {\n\t\tfont: 500 11px / 1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tpadding: 2px 4px;\n\t\tborder-radius: 0;\n\t\tbackground: var(--dt-accent, #1d4fd7);\n\t\tcolor: var(--dt-btn-text, #fff);\n\t}\n\t/* Where a dragged-in class would land: the now-line's shape, dashed */\n\t.wg-drop.svelte-l8xuza {\n\t\tz-index: 3;\n\t}\n\t.wg-drop.svelte-l8xuza::after {\n\t\tborder-top-style: dashed;\n\t}\n\n\t.wg-ev.svelte-l8xuza {\n\t\tposition: relative; /* above the blocked bands */\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-wrap: nowrap;\n\t\tgap: 0 5px;\n\t\theight: var(--wg-chip-h, 22px);\n\t\tbox-sizing: border-box;\n\t\tflex-shrink: 0;\n\t\t/* 3px bar + 6px, and 3px on the right: 12px in all (CHIP_PAD_X) */\n\t\tpadding: 0 3px 0 9px;\n\t\tborder-radius: 0;\n\t\tbackground: transparent;\n\t\tcursor: pointer;\n\t\toverflow: hidden;\n\t\ttransition: background 0.12s, box-shadow 0.12s;\n\t}\n\t/* The start bar on the leading edge */\n\t.wg-ev.svelte-l8xuza::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tinset: 0 auto 0 0;\n\t\twidth: 3px;\n\t\tbackground: var(--ev-color);\n\t}\n\n\t.wg-ev.svelte-l8xuza:hover {\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\n\t.wg-ev--drag-preview.svelte-l8xuza {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tz-index: 8;\n\t\topacity: 0.95;\n\t\tpointer-events: none;\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t\tcursor: grabbing;\n\t}\n\n\t.wg-ev--selected.svelte-l8xuza {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t}\n\n\t.wg-ev--current.svelte-l8xuza {\n\t\tbackground: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));\n\t}\n\n\t/* Printed states: struck through, grey, or a dashed bar — never a tint */\n\t.wg-ev--cancelled.svelte-l8xuza .wg-ev-title:where(.svelte-l8xuza) {\n\t\ttext-decoration: line-through;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.wg-ev--cancelled.svelte-l8xuza::before,\n\t.wg-ev--full.svelte-l8xuza::before {\n\t\topacity: 0.45;\n\t}\n\t.wg-ev--tentative.svelte-l8xuza .wg-ev-title:where(.svelte-l8xuza),\n\t.wg-ev--full.svelte-l8xuza .wg-ev-title:where(.svelte-l8xuza) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.wg-ev--tentative.svelte-l8xuza::before,\n\t.wg-ev--limited.svelte-l8xuza::before {\n\t\tbackground: repeating-linear-gradient(180deg, var(--ev-color) 0 4px, transparent 4px 7px);\n\t}\n\t.wg-ev--readonly.svelte-l8xuza {\n\t\tcursor: default;\n\t}\n\n\t.wg-ev-time.svelte-l8xuza {\n\t\tfont: 400 14px / 1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tflex-shrink: 0;\n\t\twhite-space: nowrap;\n\t}\n\n\t.wg-ev-title.svelte-l8xuza {\n\t\tfont: 500 15px / 1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tmin-width: 0;\n\t\tflex: 1 1 auto;\n\t\t/* A Latin title in RTL keeps its own direction: the ellipsis cuts its end */\n\t\tunicode-bidi: plaintext;\n\t\ttext-align: left;\n\t}\n\t/* …but it sits on the calendar's side, by the bar */\n\t.wg-ev-title.svelte-l8xuza:dir(rtl) { text-align: right; }\n\n\t.wg-ev-loc.svelte-l8xuza {\n\t\tfont: 400 12.5px / 1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t\tflex-shrink: 0; /* shown only when measured to fit — never squeezed */\n\t}\n\n\t.wg-ev-more.svelte-l8xuza {\n\t\t/* Real button — reset chrome, keep the quiet-link look */\n\t\tappearance: none;\n\t\tbackground: none;\n\t\tborder: none;\n\t\tborder-radius: 0;\n\t\ttext-align: left;\n\t\talign-self: flex-start;\n\t\tfont: 400 12.5px / 1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\tpadding: 2px 8px;\n\t\tcursor: pointer;\n\t\tflex-shrink: 0;\n\t}\n\n\t.wg-ev-more.svelte-l8xuza:hover {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\n\t.wg-ev-more.svelte-l8xuza:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);\n\t}\n\n\t/* ─── Focus-visible ──────────────────────────────── */\n\t.wg-cell.svelte-l8xuza:focus-visible {\n\t\toutline: 2px solid var(--dt-text, #0f0f0f);\n\t\toutline-offset: -2px;\n\t}\n\n\t.wg-ev.svelte-l8xuza:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\n\t.wg-ev--dragging.svelte-l8xuza {\n\t\tcursor: grabbing;\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t}\n\n\t/* ═══ Container ═══ */\n\t.ag.svelte-n8lbn1 {\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tmin-width: 0;\n\t\tbox-sizing: border-box;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tfont-family: var(--dt-sans, system-ui, sans-serif);\n\t}\n\n\t.ag--auto.svelte-n8lbn1 { height: auto; overflow: visible; }\n\n\t/* Button UA reset for interactive cards/rows (real <button>s for a11y).\n\t Placed first so later component rules override it.\n\t user-select is scoped here (not on .ag) so event text stays copyable. */\n\t.ag-card.svelte-n8lbn1,\n\t.ag-allday-chip.svelte-n8lbn1,\n\t.ag-compact-row.svelte-n8lbn1,\n\t.ag-q-now.svelte-n8lbn1,\n\t.ag-q-done-item.svelte-n8lbn1,\n\t.ag-log-row.svelte-n8lbn1,\n\t.ag-q-done-toggle.svelte-n8lbn1 {\n\t\tfont: inherit;\n\t\tcolor: inherit;\n\t\ttext-align: left;\n\t\tbackground: none;\n\t\tborder: none;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\tbox-sizing: border-box;\n\t\tuser-select: none;\n\t}\n\n\t.ag--disabled.svelte-n8lbn1 {\n\t\tbackground-image: repeating-linear-gradient(\n\t\t\t135deg,\n\t\t\ttransparent,\n\t\t\ttransparent 6px,\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 6px,\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 12px\n\t\t);\n\t}\n\n\t/* ═══ Body ═══ */\n\t.ag-body.svelte-n8lbn1 {\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\tmin-width: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\toverscroll-behavior: contain;\n\t\tpadding-top: 8px;\n\t\tscrollbar-width: thin;\n\t\tscrollbar-color: var(--dt-border) transparent;\n\t}\n\n\t/* ═══ In-view date header ═══ */\n\t.ag-day-head.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 8px;\n\t\tpadding: 0 16px 6px;\n\t\tflex-shrink: 0;\n\t}\n\t/* The planner's header type: the day number is the typography (40/400,\n\t narrowed), the weekday a tracked 12/500 label; today takes the accent. */\n\t.ag-day-head-num.svelte-n8lbn1 {\n\t\tfont: 400 40px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-stretch: 90%;\n\t\tletter-spacing: -0.02em;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tmargin-inline-end: 4px;\n\t}\n\t.ag-day-head-badge.svelte-n8lbn1,\n\t.ag-day-head-name.svelte-n8lbn1 {\n\t\tfont: 500 12px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t.ag-day-head--today.svelte-n8lbn1 .ag-day-head-num:where(.svelte-n8lbn1),\n\t.ag-day-head--today.svelte-n8lbn1 .ag-day-head-name:where(.svelte-n8lbn1),\n\t.ag-day-head-badge.svelte-n8lbn1 {\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-day-head.svelte-n8lbn1 .ag-day-head-badge--muted:where(.svelte-n8lbn1) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t.ag-day-head-date.svelte-n8lbn1 {\n\t\tfont: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t.ag--auto.svelte-n8lbn1 .ag-body:where(.svelte-n8lbn1) { overflow-y: visible; min-height: auto; }\n\t.ag-body.svelte-n8lbn1::-webkit-scrollbar {\n\t\twidth: 4px;\n\t}\n\t.ag-body.svelte-n8lbn1::-webkit-scrollbar-thumb {\n\t\tbackground: var(--dt-border);\n\t\tborder-radius: 0;\n\t}\n\n\t/* ═══ All-day strip ═══ */\n\t.ag-allday.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t\tpadding: 6px 16px;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\t.ag-allday-label.svelte-n8lbn1 {\n\t\tfont: 500 12px/1 var(--dt-sans, system-ui, sans-serif);\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.08em;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\twhite-space: nowrap;\n\t\tflex-shrink: 0;\n\t}\n\t.ag-allday-items.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 6px;\n\t}\n\t/* An all-day event is a solid band in its colour — no tint, no dot, no pill. */\n\t.ag-allday-chip.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 5px;\n\t\tpadding: 4px 10px;\n\t\tborder-radius: 0;\n\t\tborder: none;\n\t\tbackground: var(--ev-color);\n\t\tcolor: var(--dt-btn-text, #fff);\n\t\tcursor: pointer;\n\t}\n\t@media (pointer: coarse) {\n\t\t.ag-allday-chip.svelte-n8lbn1 {\n\t\t\tmin-height: 44px;\n\t\t}\n\t\t.ag-q-done-item.svelte-n8lbn1 {\n\t\t\tmin-height: 44px;\n\t\t\talign-items: center;\n\t\t}\n\t}\n\t.ag-allday-chip.svelte-n8lbn1:hover,\n\t.ag-allday-chip.svelte-n8lbn1:active {\n\t\tfilter: brightness(1.08);\n\t}\n\t.ag-allday-chip.svelte-n8lbn1:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-allday-chip--selected.svelte-n8lbn1 {\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);\n\t}\n\t.ag-allday-dot.svelte-n8lbn1 {\n\t\tdisplay: none;\n\t}\n\t.ag-allday-title.svelte-n8lbn1 {\n\t\tfont: 500 13.5px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: inherit;\n\t\twhite-space: nowrap;\n\t}\n\n\t/* ═══ Shared: event card ═══ */\n\t/* Paper, not a tinted card: a 3px start bar in the event colour, a\n\t hairline rule beneath, ink text. Hover is a wash, selection a ring. */\n\t.ag-card.svelte-n8lbn1 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: stretch;\n\t\tborder-radius: 0;\n\t\tbackground: transparent;\n\t\tborder: none;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));\n\t\toverflow: hidden;\n\t\tcursor: pointer;\n\t\ttransition: background 150ms, box-shadow 150ms;\n\t}\n\t.ag-card.svelte-n8lbn1::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: 3px;\n\t\tbackground: var(--ev-color);\n\t}\n\t.ag-card.svelte-n8lbn1:hover,\n\t.ag-card.svelte-n8lbn1:active {\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t.ag-card.svelte-n8lbn1:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-card--selected.svelte-n8lbn1 {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t}\n\t.ag-card--cancelled.svelte-n8lbn1 .ag-card-title:where(.svelte-n8lbn1) {\n\t\ttext-decoration: line-through;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.ag-card--cancelled.svelte-n8lbn1::before,\n\t.ag-card--full.svelte-n8lbn1::before {\n\t\topacity: 0.45;\n\t}\n\t.ag-card--tentative.svelte-n8lbn1 .ag-card-title:where(.svelte-n8lbn1),\n\t.ag-card--limited.svelte-n8lbn1 .ag-card-title:where(.svelte-n8lbn1),\n\t.ag-card--full.svelte-n8lbn1 .ag-card-title:where(.svelte-n8lbn1) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.ag-card--tentative.svelte-n8lbn1::before,\n\t.ag-card--limited.svelte-n8lbn1::before {\n\t\tbackground: repeating-linear-gradient(180deg, var(--ev-color) 0 4px, transparent 4px 7px);\n\t}\n\t/* Planner scale: title 15/500, time 14 tabular in ink, meta 12.5 in ink-2.\n\t The body keeps a reading measure so meta never drifts across a wide row. */\n\t.ag-card-body.svelte-n8lbn1 {\n\t\tpadding: 10px 12px 10px 15px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 3px;\n\t\tmin-width: 0;\n\t\tmax-width: 44rem;\n\t\tflex: 1;\n\t}\n\t.ag-card-top.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 12px;\n\t\tmin-width: 0;\n\t}\n\t.ag-card-title.svelte-n8lbn1 {\n\t\tfont: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tword-break: break-word;\n\t\tmin-width: 0;\n\t}\n\t.ag-card-meta.svelte-n8lbn1 {\n\t\tfont: 400 14px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\t.ag-card-dur.svelte-n8lbn1,\n\t.ag-card-eta.svelte-n8lbn1,\n\t.ag-card-sub.svelte-n8lbn1,\n\t.ag-card-loc.svelte-n8lbn1,\n\t.ag-card-tag.svelte-n8lbn1 {\n\t\tfont: 400 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t.ag-card-dur.svelte-n8lbn1 {\n\t\tmargin-left: 8px;\n\t}\n\t.ag-card-tags.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\tcolumn-gap: 10px;\n\t\trow-gap: 2px;\n\t\tflex-wrap: wrap;\n\t}\n\t.ag-card-tag.svelte-n8lbn1 {\n\t\twhite-space: nowrap;\n\t}\n\n\t/* ── Queue card variant ── */\n\t.ag-card--q.svelte-n8lbn1 {\n\t\ttransition: background 150ms, box-shadow 150ms;\n\t}\n\t.ag-compact-row--queue.svelte-n8lbn1 {\n\t\tmargin: 0;\n\t}\n\t.ag-card-eta.svelte-n8lbn1 {\n\t\tflex-shrink: 0;\n\t\twhite-space: nowrap;\n\t\tfont-variant-numeric: tabular-nums;\n\t}\n\t/* The next one up: its countdown in ink. Size stays on the scale — the\n\t happening-now item is the largest thing in the queue. */\n\t.ag-card--hero.svelte-n8lbn1 .ag-card-eta:where(.svelte-n8lbn1) {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\n\t/* ── Plan card variant ── */\n\n\t.ag-card--plan.svelte-n8lbn1 .ag-card-body:where(.svelte-n8lbn1) {\n\t\tpadding: 12px 14px;\n\t}\n\t.ag-card-order.svelte-n8lbn1 {\n\t\tfont: 400 14px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tmin-width: 18px;\n\t\tflex-shrink: 0;\n\t}\n\t.ag-card--plan.svelte-n8lbn1 .ag-card-top:where(.svelte-n8lbn1) {\n\t\tgap: 10px;\n\t}\n\t/* Everything under the title aligns past the order number — the\n\t subtitle, location, time and tags share one left edge. */\n\t.ag-card--plan.svelte-n8lbn1 .ag-card-sub:where(.svelte-n8lbn1),\n\t.ag-card--plan.svelte-n8lbn1 .ag-card-loc:where(.svelte-n8lbn1),\n\t.ag-card--plan.svelte-n8lbn1 .ag-card-meta:where(.svelte-n8lbn1),\n\t.ag-card--plan.svelte-n8lbn1 .ag-card-tags:where(.svelte-n8lbn1) {\n\t\tpadding-left: 28px;\n\t}\n\n\t/* ═══ The Queue: 2-column grid ═══ */\n\t.ag-q.svelte-n8lbn1 {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr 1.8fr;\n\t\tgap: 0;\n\t\tflex: 1;\n\t\tpadding: 8px 0 10px;\n\t\tmin-height: 0;\n\t}\n\t/* Mobile: one column in reading order — what's happening now first, then\n\t \"Up next\", then the finished ones. The status column dissolves\n\t (display: contents) so its Now and Done parts can sit either side of\n\t the queue. */\n\t/* Horizontal swipes are ours (day navigation); the browser keeps\n\t vertical scrolling and pinch-zoom. */\n\t.ag--mobile.svelte-n8lbn1,\n\t.ag--mobile.svelte-n8lbn1 .ag-body:where(.svelte-n8lbn1) {\n\t\ttouch-action: pan-y pinch-zoom;\n\t}\n\t.ag--mobile.svelte-n8lbn1 .ag-q:where(.svelte-n8lbn1) {\n\t\tgrid-template-columns: 1fr;\n\t\tmin-height: auto;\n\t\tpadding-inline: 16px;\n\t}\n\t.ag--mobile.svelte-n8lbn1 .ag-q-status:where(.svelte-n8lbn1) {\n\t\tdisplay: contents;\n\t}\n\t.ag--mobile.svelte-n8lbn1 .ag-q-queue:where(.svelte-n8lbn1) {\n\t\torder: 2;\n\t\toverflow-y: visible;\n\t\tpadding: 12px 0 16px;\n\t}\n\t.ag--mobile.svelte-n8lbn1 .ag-q-done-section:where(.svelte-n8lbn1) {\n\t\torder: 3;\n\t}\n\t/* Mobile: larger touch targets; type is already on the planner scale. */\n\t.ag--mobile.svelte-n8lbn1 .ag-card-body:where(.svelte-n8lbn1) {\n\t\tpadding: 14px 16px;\n\t}\n\t.ag--mobile.svelte-n8lbn1 .ag-log-row:where(.svelte-n8lbn1) {\n\t\tpadding: 12px 0;\n\t}\n\t.ag--mobile.svelte-n8lbn1 .ag-q-done-item:where(.svelte-n8lbn1) {\n\t\tpadding: 8px 0;\n\t}\n\t/* Section labels set like the planner's weekday: 12/500, tracked, ink-2. */\n\t.ag-q-label.svelte-n8lbn1 {\n\t\tfont: 500 12px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tmargin-bottom: 8px;\n\t\tpadding: 0 12px;\n\t}\n\t.ag-q-empty.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tflex: 1;\n\t\tfont-size: 14px;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\n\t/* ── NOW column (includes Done above) ── */\n\t.ag-q-status.svelte-n8lbn1 {\n\t\tpadding: 0 10px 0 14px;\n\t\tborder-right: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\toverflow-y: auto;\n\t\tscrollbar-width: none;\n\t}\n\t.ag-q-status.svelte-n8lbn1::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n\t.ag-q-done-toggle.svelte-n8lbn1 {\n\t\talign-self: flex-start;\n\t\tmargin-top: 2px;\n\t\tpadding: 3px 8px;\n\t\tborder: 1px solid var(--dt-border);\n\t\tborder-radius: 0;\n\t\tbackground: none;\n\t\tfont-family: var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tfont-size: 12.5px;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tcursor: pointer;\n\t}\n\t.ag-q-done-toggle.svelte-n8lbn1:hover,\n\t.ag-q-done-toggle.svelte-n8lbn1:active {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tborder-color: var(--dt-border-day, rgba(15, 15, 15, 0.6));\n\t}\n\t.ag-q-done-toggle.svelte-n8lbn1:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);\n\t}\n\t.ag-q-now-sub.svelte-n8lbn1 {\n\t\tfont: 400 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tmargin-bottom: 4px;\n\t}\n\t.ag-q-done-section.svelte-n8lbn1 {\n\t\tmargin-top: 12px;\n\t\tpadding-top: 10px;\n\t\tborder-top: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\t.ag-q-clock.svelte-n8lbn1 {\n\t\tfont: 500 12px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t\tmargin-left: 4px;\n\t}\n\t/* The one happening now is the most prominent thing on the day: the\n\t largest title in the view and the 12% accent wash the system reserves\n\t for the current event. */\n\t.ag-q-now.svelte-n8lbn1 {\n\t\tposition: relative;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\tpadding: 12px 12px 12px 15px;\n\t\tmargin-bottom: 8px;\n\t\tborder-radius: 0;\n\t\tbackground: var(--dt-accent-dim, color-mix(in srgb, var(--dt-accent, #1d4fd7) 12%, transparent));\n\t\tborder: none;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));\n\t\tcursor: pointer;\n\t\ttransition: background 150ms, box-shadow 150ms;\n\t}\n\t.ag-q-now.svelte-n8lbn1::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: 3px;\n\t\tbackground: var(--ev-color, var(--dt-accent));\n\t}\n\t.ag-q-now.svelte-n8lbn1:hover,\n\t.ag-q-now.svelte-n8lbn1:active {\n\t\tbackground:\n\t\t\tlinear-gradient(var(--dt-hover, rgba(15, 15, 15, 0.04)), var(--dt-hover, rgba(15, 15, 15, 0.04))),\n\t\t\tvar(--dt-accent-dim, color-mix(in srgb, var(--dt-accent, #1d4fd7) 12%, transparent));\n\t}\n\t.ag-q-now.svelte-n8lbn1:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-q-now--selected.svelte-n8lbn1 {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color, var(--dt-accent));\n\t}\n\t.ag-q-now-dot.svelte-n8lbn1 {\n\t\twidth: 8px;\n\t\theight: 8px;\n\t\tborder-radius: 50%;\n\t\tbackground: var(--ev-color, var(--dt-accent, #1d4fd7));\n\t\tmargin-bottom: 8px;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.ag-q-now-fill.svelte-n8lbn1 {\n\t\t\ttransition: none;\n\t\t}\n\t}\n\t.ag-q-now-title.svelte-n8lbn1 {\n\t\tfont: 500 20px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tdisplay: -webkit-box;\n\t\t-webkit-box-orient: vertical;\n\t\t-webkit-line-clamp: 2;\n\t\tline-clamp: 2;\n\t\toverflow: hidden;\n\t\tword-break: break-word;\n\t\tmargin-bottom: 4px;\n\t}\n\t.ag-q-now-time.svelte-n8lbn1 {\n\t\tfont: 400 14px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tmargin-bottom: 10px;\n\t}\n\t.ag-q-now-track.svelte-n8lbn1 {\n\t\theight: 2px;\n\t\tbackground: var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tborder-radius: 0;\n\t\toverflow: hidden;\n\t}\n\t.ag-q-now-fill.svelte-n8lbn1 {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tbackground: var(--ev-color, var(--dt-accent, #1d4fd7));\n\t\tborder-radius: 0;\n\t\ttransform-origin: left;\n\t\ttransition: transform 1s linear;\n\t}\n\t.ag-q-free.svelte-n8lbn1 {\n\t\tpadding: 8px 10px;\n\t\tmargin-right: 10px;\n\t}\n\t.ag-q-free-label.svelte-n8lbn1 {\n\t\tfont: 400 15px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tmargin-bottom: 2px;\n\t}\n\n\t/* ── NEXT: hero center column ── */\n\t.ag-q-queue.svelte-n8lbn1 {\n\t\tpadding: 0 16px;\n\t\toverflow-y: auto;\n\t\tscrollbar-width: none;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 8px;\n\t}\n\t.ag-q-queue.svelte-n8lbn1::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n\n\n\t.ag-q-done-item.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 8px;\n\t\tpadding: 4px 0;\n\t\twidth: 100%;\n\t\tcursor: pointer;\n\t}\n\t.ag-q-done-item.svelte-n8lbn1:hover .ag-q-done-title:where(.svelte-n8lbn1),\n\t.ag-q-done-item.svelte-n8lbn1:active .ag-q-done-title:where(.svelte-n8lbn1),\n\t.ag-q-done-item--selected.svelte-n8lbn1 .ag-q-done-title:where(.svelte-n8lbn1) {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\t.ag-q-done-item.svelte-n8lbn1:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t\tborder-radius: 0;\n\t}\n\t.ag-q-done-check.svelte-n8lbn1 {\n\t\tfont-size: 12.5px;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tflex-shrink: 0;\n\t}\n\t/* Finished: quieter ink, no strike (strikethrough means cancelled). */\n\t.ag-q-done-title.svelte-n8lbn1 {\n\t\tfont: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttransition: color 150ms;\n\t}\n\n\t/* ═══ Past Day: \"The Log\" ═══\n\t Dim comes from text tokens only (single layer) — no subtree opacity. */\n\t.ag-log.svelte-n8lbn1 {\n\t\tflex: 1;\n\t\tpadding: 8px 20px 12px;\n\t\toverflow-y: auto;\n\t\tscrollbar-width: none;\n\t}\n\t.ag-log.svelte-n8lbn1::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n\t.ag-log-row.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 10px;\n\t\tpadding: 8px 0;\n\t\twidth: 100%;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tcursor: pointer;\n\t}\n\t.ag-log-row.svelte-n8lbn1:last-child {\n\t\tborder-bottom: none;\n\t}\n\t.ag-log-row.svelte-n8lbn1:hover .ag-log-title:where(.svelte-n8lbn1),\n\t.ag-log-row.svelte-n8lbn1:active .ag-log-title:where(.svelte-n8lbn1),\n\t.ag-log-row--selected.svelte-n8lbn1 .ag-log-title:where(.svelte-n8lbn1) {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\t.ag-log-row.svelte-n8lbn1:hover,\n\t.ag-log-row.svelte-n8lbn1:active {\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t.ag-log-row.svelte-n8lbn1:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t\tborder-radius: 0;\n\t}\n\t.ag-log-row--selected.svelte-n8lbn1 {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t\tborder-radius: 0;\n\t}\n\t.ag-log-check.svelte-n8lbn1 {\n\t\tfont-size: 12.5px;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tflex-shrink: 0;\n\t}\n\t.ag-log-time.svelte-n8lbn1 {\n\t\tfont: 400 14px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tmin-width: 4.6em;\n\t\tflex-shrink: 0;\n\t}\n\t/* The colour dot of a past row becomes its 3px start bar (dimmed: it is over). */\n\t.ag-log-dot.svelte-n8lbn1 {\n\t\talign-self: stretch;\n\t\twidth: 3px;\n\t\tborder-radius: 0;\n\t\tflex-shrink: 0;\n\t\topacity: 0.45;\n\t}\n\t/* A past day is over, not struck out: quieter ink, sized like the planner.\n\t Strikethrough is kept for cancelled events only. */\n\t.ag-log-title.svelte-n8lbn1 {\n\t\tfont: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tflex: 0 1 auto;\n\t\tmin-width: 0;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttransition: color 150ms;\n\t\ttext-align: left;\n\t}\n\t.ag-log-row--cancelled.svelte-n8lbn1 .ag-log-title:where(.svelte-n8lbn1) {\n\t\ttext-decoration: line-through;\n\t}\n\t.ag-log-dur.svelte-n8lbn1 {\n\t\tfont: 400 12.5px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tflex-shrink: 0;\n\t}\n\n\t/* ═══ Compact Day ═══ */\n\t.ag-compact-list.svelte-n8lbn1 {\n\t\tflex: 1;\n\t\tpadding: 8px 20px 12px;\n\t\toverflow-y: auto;\n\t\tscrollbar-width: none;\n\t}\n\t.ag-compact-list.svelte-n8lbn1::-webkit-scrollbar { display: none; }\n\t/* A compact row: 3px start bar, hairline beneath, ink text. */\n\t.ag-compact-row.svelte-n8lbn1 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 10px;\n\t\tpadding: 5px 0 5px 11px;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));\n\t\tcursor: pointer;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t}\n\t.ag-compact-row.svelte-n8lbn1::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: 3px;\n\t\tbackground: var(--ev-color, var(--dt-accent));\n\t}\n\t.ag-compact-row--selected.svelte-n8lbn1 {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t}\n\t.ag-compact-row.svelte-n8lbn1:hover .ag-compact-row-title:where(.svelte-n8lbn1),\n\t.ag-compact-row.svelte-n8lbn1:active .ag-compact-row-title:where(.svelte-n8lbn1) { color: var(--dt-text); }\n\t.ag-compact-row.svelte-n8lbn1:hover,\n\t.ag-compact-row.svelte-n8lbn1:active {\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t.ag-compact-row.svelte-n8lbn1:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-compact-row-time.svelte-n8lbn1 {\n\t\tfont: 400 14px/1.3 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tmin-width: 4.6em;\n\t\tflex-shrink: 0;\n\t\twhite-space: nowrap;\n\t}\n\t/* Title + subtitle + tags cluster, sized to its content so the meta and\n\t duration sit beside the title instead of across a wide row. One line\n\t while it fits; on mobile the metadata wraps to a second line under the\n\t title instead of crushing it. */\n\t.ag-compact-row-main.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 10px;\n\t\tflex: 0 1 auto;\n\t\tmin-width: 0;\n\t}\n\t.ag--mobile.svelte-n8lbn1 .ag-compact-row-main:where(.svelte-n8lbn1) {\n\t\tflex: 1;\n\t\tflex-wrap: wrap;\n\t\trow-gap: 2px;\n\t}\n\t/* Mobile: size the title by its content when deciding line breaks — a long\n\t title claims the first line whole (ellipsizing only against the full row)\n\t and pushes subtitle/tags down instead of truncating at 35%. */\n\t.ag--mobile.svelte-n8lbn1 .ag-compact-row-title:where(.svelte-n8lbn1) {\n\t\tflex-basis: auto;\n\t}\n\t/* On its own wrapped line the subtitle gets the full width */\n\t.ag--mobile.svelte-n8lbn1 .ag-compact-row-sub:where(.svelte-n8lbn1) {\n\t\tmax-width: 100%;\n\t}\n\t.ag-compact-row-title.svelte-n8lbn1 {\n\t\tfont: 500 15px/1.3 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tflex: 0 1 auto;\n\t\t/* The title is the row's identity — never let subtitle/tags/duration\n\t\t squeeze it out on narrow screens (min-width: 0 resolves to 0px). */\n\t\tmin-width: 6em;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttransition: color 150ms;\n\t\ttext-align: left;\n\t}\n\t.ag-compact-row-dur.svelte-n8lbn1,\n\t.ag-compact-row-sub.svelte-n8lbn1,\n\t.ag-compact-row-tag.svelte-n8lbn1 {\n\t\tfont: 400 12.5px/1.3 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\twhite-space: nowrap;\n\t}\n\t.ag-compact-row-dur.svelte-n8lbn1 {\n\t\tfont-variant-numeric: tabular-nums;\n\t\tflex-shrink: 0;\n\t}\n\t.ag-compact-row-sub.svelte-n8lbn1 {\n\t\tflex-shrink: 3;\n\t\tmin-width: 0;\n\t\tmax-width: 45%;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.ag-compact-row-tag.svelte-n8lbn1 {\n\t\tflex-shrink: 1;\n\t\tmin-width: 2.5em;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.ag-compact-row--cancelled.svelte-n8lbn1 .ag-compact-row-title:where(.svelte-n8lbn1) {\n\t\ttext-decoration: line-through;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.ag-compact-row--cancelled.svelte-n8lbn1::before { opacity: 0.45; }\n\t.ag-compact-row--tentative.svelte-n8lbn1 .ag-compact-row-title:where(.svelte-n8lbn1) { color: var(--dt-text-2, rgba(15, 15, 15, 0.54)); }\n\t.ag-compact-row--tentative.svelte-n8lbn1::before {\n\t\tbackground: repeating-linear-gradient(180deg, var(--ev-color) 0 4px, transparent 4px 7px);\n\t}\n\t/* Mobile: larger touch targets for compact rows */\n\t.ag--mobile.svelte-n8lbn1 .ag-compact-row:where(.svelte-n8lbn1) { padding: 8px 0 8px 11px; }\n\t.ag--mobile.svelte-n8lbn1 .ag-day-head:where(.svelte-n8lbn1) { padding: 0 16px 8px; }\n\n\t/* ═══ Future Day: \"The Plan\" ═══ */\n\t.ag-plan.svelte-n8lbn1 {\n\t\tflex: 1;\n\t\tpadding: 8px 20px 12px;\n\t\toverflow-y: auto;\n\t\tscrollbar-width: none;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 6px;\n\t}\n\t.ag-plan.svelte-n8lbn1::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n\n\t/* ═══ Container ═══ */\n\t.ag.svelte-uhwfyj {\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tuser-select: none;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tmin-width: 0;\n\t\tbox-sizing: border-box;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tfont-family: var(--dt-sans, system-ui, sans-serif);\n\t}\n\t.ag--auto.svelte-uhwfyj {\n\t\theight: auto;\n\t\toverflow: visible;\n\t}\n\n\t/* Button UA reset for interactive cards/rows (real <button>s for a11y).\n\t Placed first so later component rules override it. */\n\t.ag-card.svelte-uhwfyj,\n\t.ag-allday-chip.svelte-uhwfyj,\n\t.ag-compact.svelte-uhwfyj,\n\t.ag-compact-more.svelte-uhwfyj,\n\t.ag-past-toggle.svelte-uhwfyj {\n\t\tfont: inherit;\n\t\tcolor: inherit;\n\t\ttext-align: left;\n\t\tbackground: none;\n\t\tborder: none;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* ═══ Body ═══ */\n\t.ag-body.svelte-uhwfyj {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\tbox-sizing: border-box;\n\t\t/* No padding-top here: the sticky day headers pin at the scrollport\n\t\t edge, and container padding would leave a see-through band above\n\t\t them where scrolled cards bleed out. */\n\t\tscrollbar-width: thin;\n\t\tscrollbar-color: var(--dt-border) transparent;\n\t}\n\t.ag-wday.svelte-uhwfyj:first-child .ag-wday-head:where(.svelte-uhwfyj) {\n\t\tpadding-top: 12px;\n\t}\n\t.ag--auto.svelte-uhwfyj .ag-body:where(.svelte-uhwfyj) {\n\t\toverflow-y: visible;\n\t}\n\t.ag-body.svelte-uhwfyj::-webkit-scrollbar {\n\t\twidth: 4px;\n\t}\n\t.ag-body.svelte-uhwfyj::-webkit-scrollbar-thumb {\n\t\tbackground: var(--dt-border);\n\t\tborder-radius: 0;\n\t}\n\n\t/* ═══ All-day chips ═══ */\n\t.ag-allday.svelte-uhwfyj {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 4px;\n\t\tpadding: 4px 14px 6px;\n\t}\n\t/* An all-day event is a solid band in its colour — no tint, no dot, no pill. */\n\t.ag-allday-chip.svelte-uhwfyj {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 6px;\n\t\tpadding: 4px 10px;\n\t\tborder-radius: 0;\n\t\tborder: none;\n\t\tbackground: var(--ev-color);\n\t\tcolor: var(--dt-btn-text, #fff);\n\t\tcursor: pointer;\n\t}\n\t.ag-allday-chip.svelte-uhwfyj:hover,\n\t.ag-allday-chip.svelte-uhwfyj:active {\n\t\tfilter: brightness(1.08);\n\t}\n\t.ag-allday-chip.svelte-uhwfyj:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-allday-chip--selected.svelte-uhwfyj {\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);\n\t}\n\t.ag-allday-dot.svelte-uhwfyj {\n\t\tdisplay: none;\n\t}\n\t.ag-allday-title.svelte-uhwfyj {\n\t\tfont: 500 13.5px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: inherit;\n\t\twhite-space: nowrap;\n\t}\n\t.ag-allday-span.svelte-uhwfyj {\n\t\tfont: 400 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: inherit;\n\t\twhite-space: nowrap;\n\t}\n\n\t/* ═══ Shared: event card ═══ */\n\t/* Paper, not a tinted card: a 3px start bar in the event colour, a\n\t hairline rule beneath, ink text. Hover is a wash, selection a ring. */\n\t.ag-card.svelte-uhwfyj {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\t/* A <button> shrinks to its content; the NOW card sits outside the\n\t\t stretching slot column, so it claims the row explicitly. */\n\t\twidth: 100%;\n\t\talign-items: stretch;\n\t\tborder-radius: 0;\n\t\tbackground: transparent;\n\t\tborder: none;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));\n\t\toverflow: hidden;\n\t\tcursor: pointer;\n\t\ttransition: background 150ms, box-shadow 150ms;\n\t}\n\t.ag-card.svelte-uhwfyj::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: 3px;\n\t\tbackground: var(--ev-color);\n\t}\n\t.ag-card.svelte-uhwfyj:hover,\n\t.ag-card.svelte-uhwfyj:active {\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t.ag-card.svelte-uhwfyj:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-card--selected.svelte-uhwfyj {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t}\n\t.ag-card--cancelled.svelte-uhwfyj .ag-card-title:where(.svelte-uhwfyj) {\n\t\ttext-decoration: line-through;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.ag-card--cancelled.svelte-uhwfyj::before,\n\t.ag-card--full.svelte-uhwfyj::before {\n\t\topacity: 0.45;\n\t}\n\t.ag-card--tentative.svelte-uhwfyj .ag-card-title:where(.svelte-uhwfyj),\n\t.ag-card--limited.svelte-uhwfyj .ag-card-title:where(.svelte-uhwfyj),\n\t.ag-card--full.svelte-uhwfyj .ag-card-title:where(.svelte-uhwfyj) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.ag-card--tentative.svelte-uhwfyj::before,\n\t.ag-card--limited.svelte-uhwfyj::before {\n\t\tbackground: repeating-linear-gradient(180deg, var(--ev-color) 0 4px, transparent 4px 7px);\n\t}\n\t/* Planner scale: title 15/500, time 14 tabular in ink, meta 12.5 in ink-2.\n\t The body keeps a reading measure so meta never drifts across a wide row. */\n\t.ag-card-body.svelte-uhwfyj {\n\t\tpadding: 8px 10px 8px 13px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 3px;\n\t\tmin-width: 0;\n\t\tmax-width: 44rem;\n\t\tflex: 1;\n\t}\n\t.ag-card-title.svelte-uhwfyj {\n\t\tfont: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tword-break: break-word;\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t\tdisplay: -webkit-box;\n\t\t-webkit-box-orient: vertical;\n\t\t-webkit-line-clamp: 2;\n\t\tline-clamp: 2;\n\t\toverflow: hidden;\n\t}\n\t.ag-card-meta.svelte-uhwfyj {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tflex-wrap: wrap;\n\t\tcolumn-gap: 8px;\n\t\trow-gap: 2px;\n\t\tfont: 400 14px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\t.ag-card-dur.svelte-uhwfyj,\n\t.ag-card-eta.svelte-uhwfyj,\n\t.ag-card-sub.svelte-uhwfyj,\n\t.ag-card-loc.svelte-uhwfyj,\n\t.ag-card-tag.svelte-uhwfyj {\n\t\tfont: 400 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t.ag-card-tags.svelte-uhwfyj {\n\t\tdisplay: flex;\n\t\tcolumn-gap: 10px;\n\t\trow-gap: 2px;\n\t\tflex-wrap: wrap;\n\t}\n\t.ag-card-tag.svelte-uhwfyj {\n\t\twhite-space: nowrap;\n\t}\n\t.ag-card-progress.svelte-uhwfyj {\n\t\theight: 3px;\n\t\tbackground: var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tborder-radius: 0;\n\t\toverflow: hidden;\n\t\tmargin-top: 2px;\n\t}\n\t.ag-card-progress-fill.svelte-uhwfyj {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tbackground: var(--ev-color, var(--dt-accent));\n\t\tborder-radius: 0;\n\t\ttransform-origin: left;\n\t\ttransition: transform 1s linear;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.ag-card-progress-fill.svelte-uhwfyj {\n\t\t\ttransition: none;\n\t\t}\n\t}\n\n\t/* ═══ Week day groups ═══ */\n\t.ag-wday.svelte-uhwfyj {\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\t.ag-wday.svelte-uhwfyj:last-child {\n\t\tborder-bottom: none;\n\t}\n\t.ag-wday--today.svelte-uhwfyj {\n\t\tbackground: color-mix(in srgb, var(--dt-accent, #1d4fd7) 2%, transparent);\n\t}\n\t/* Past days: quieter ink from the text tokens, no subtree opacity */\n\t.ag-wday--past.svelte-uhwfyj .ag-wday-num:where(.svelte-uhwfyj) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t.ag-wday--past.svelte-uhwfyj .ag-wday-head:where(.svelte-uhwfyj) {\n\t\tpadding: 8px 20px 2px;\n\t}\n\t.ag-wday--disabled.svelte-uhwfyj {\n\t\tposition: relative;\n\t}\n\t.ag-wday--disabled.svelte-uhwfyj::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tbackground: repeating-linear-gradient(\n\t\t\t135deg,\n\t\t\ttransparent,\n\t\t\ttransparent 4px,\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 8%, transparent) 4px,\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 8%, transparent) 8px\n\t\t);\n\t\tpointer-events: none;\n\t}\n\t.ag-wday-custom-header.svelte-uhwfyj {\n\t\tpadding: 2px 0 4px;\n\t}\n\n\t.ag-wday-head--click.svelte-uhwfyj,\n\t.ag-wday-empty--click.svelte-uhwfyj {\n\t\tcursor: pointer;\n\t}\n\t.ag-wday-head--click.svelte-uhwfyj:focus-visible,\n\t.ag-wday-empty--click.svelte-uhwfyj:focus-visible {\n\t\toutline: 2px solid var(--dt-text, #0f0f0f);\n\t\toutline-offset: -2px;\n\t\tborder-radius: 0;\n\t}\n\t.ag-wday-head.svelte-uhwfyj {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\t\tpadding: 8px 20px;\n\t\tposition: sticky;\n\t\ttop: 0;\n\t\tbackground: var(--dt-bg, #efebe9);\n\t\tz-index: 1;\n\t\t/* Own compositor layer: without it, fast (async) scrolling repaints\n\t\t the pinned header a frame late and a gap flashes above it. */\n\t\ttransform: translateZ(0);\n\t\twill-change: transform;\n\t}\n\t.ag-wday-head-left.svelte-uhwfyj {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 8px;\n\t}\n\t/* The planner's header type: the day number is the typography (40/400,\n\t narrowed), the weekday a tracked 12/500 label; today takes the accent. */\n\t.ag-wday-num.svelte-uhwfyj {\n\t\tfont: 400 40px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-stretch: 90%;\n\t\tletter-spacing: -0.02em;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tmargin-inline-end: 4px;\n\t}\n\t.ag-wday-badge.svelte-uhwfyj,\n\t.ag-wday-name.svelte-uhwfyj {\n\t\tfont: 500 12px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t.ag-wday--today.svelte-uhwfyj .ag-wday-num:where(.svelte-uhwfyj),\n\t.ag-wday--today.svelte-uhwfyj .ag-wday-name:where(.svelte-uhwfyj),\n\t.ag-wday-badge.svelte-uhwfyj {\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-wday.svelte-uhwfyj .ag-wday-badge--muted:where(.svelte-uhwfyj) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t/* Set like the weekday beside it, so the heading reads in one case */\n\t.ag-wday-date.svelte-uhwfyj {\n\t\tfont: 400 12px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\n\t.ag-wday-empty.svelte-uhwfyj {\n\t\tpadding: 2px 20px 8px;\n\t\tfont-size: 12.5px;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\n\t/* Expanded day */\n\t.ag-wday-expanded.svelte-uhwfyj {\n\t\tpadding: 0 20px 10px;\n\t}\n\t.ag-wslot.svelte-uhwfyj {\n\t\tmargin-bottom: 4px;\n\t}\n\t.ag-wslot-header.svelte-uhwfyj {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 8px;\n\t\tpadding: 2px 0;\n\t}\n\t.ag-wslot-now.svelte-uhwfyj {\n\t\tfont: 500 12px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-wslot-cards.svelte-uhwfyj {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 4px;\n\t}\n\t.ag-wslot-cards--multi.svelte-uhwfyj {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n\t\tgap: 4px;\n\t}\n\t.ag-wday-past-line.svelte-uhwfyj {\n\t\tfont-size: 12.5px;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tpadding: 6px 0 0;\n\t}\n\t.ag-wday-past-line--summary.svelte-uhwfyj {\n\t\tpadding: 0 20px 8px;\n\t}\n\t/* \"✓ N completed\" is a disclosure — tap to reveal the finished events */\n\t.ag-past-toggle.svelte-uhwfyj {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tgap: 5px;\n\t\tcursor: pointer;\n\t\tmin-height: 32px;\n\t\ttransition: color 150ms;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t.ag-past-toggle.svelte-uhwfyj:hover,\n\t.ag-past-toggle.svelte-uhwfyj:active {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\t.ag-past-toggle.svelte-uhwfyj:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);\n\t\tborder-radius: 0;\n\t}\n\t.ag-past-chevron.svelte-uhwfyj {\n\t\ttransition: transform 120ms;\n\t}\n\t.ag-past-chevron--open.svelte-uhwfyj {\n\t\ttransform: rotate(180deg);\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.ag-past-chevron.svelte-uhwfyj { transition: none; }\n\t}\n\t/* Revealed completed events: quieter ink (single token layer). Strikethrough\n\t is kept for cancelled only, so \"done\" and \"called off\" never read alike. */\n\t.ag-compact--done.svelte-uhwfyj .ag-compact-title:where(.svelte-uhwfyj),\n\t.ag-compact--done.svelte-uhwfyj .ag-compact-time:where(.svelte-uhwfyj) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t.ag-compact--done.svelte-uhwfyj::before {\n\t\topacity: 0.45;\n\t}\n\n\t/* Compact day events */\n\t.ag-wday-compact.svelte-uhwfyj {\n\t\tpadding: 0 20px 8px;\n\t}\n\t/* A compact row: 3px start bar, hairline beneath, ink text. */\n\t.ag-compact.svelte-uhwfyj {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 10px;\n\t\tpadding: 5px 0 5px 11px;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));\n\t\tcursor: pointer;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t}\n\t.ag-compact.svelte-uhwfyj::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: 3px;\n\t\tbackground: var(--ev-color, var(--dt-accent));\n\t}\n\t.ag-compact--selected.svelte-uhwfyj {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t}\n\t.ag-compact.svelte-uhwfyj:hover .ag-compact-title:where(.svelte-uhwfyj),\n\t.ag-compact.svelte-uhwfyj:active .ag-compact-title:where(.svelte-uhwfyj) {\n\t\tcolor: var(--dt-text);\n\t}\n\t.ag-compact.svelte-uhwfyj:hover,\n\t.ag-compact.svelte-uhwfyj:active {\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t.ag-compact.svelte-uhwfyj:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-compact-time.svelte-uhwfyj {\n\t\tfont: 400 14px/1.3 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tmin-width: 4.4em;\n\t\tflex-shrink: 0;\n\t\twhite-space: nowrap;\n\t}\n\t/* Title + location + subtitle + tags cluster, sized to its content so the\n\t meta and duration sit beside the title instead of across a wide row.\n\t One line while it fits; on mobile the metadata wraps to a second line\n\t instead of crushing the title. */\n\t.ag-compact-main.svelte-uhwfyj {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 10px;\n\t\tflex: 0 1 auto;\n\t\tmin-width: 0;\n\t}\n\t.ag--mobile.svelte-uhwfyj .ag-compact-main:where(.svelte-uhwfyj) {\n\t\tflex: 1;\n\t\tflex-wrap: wrap;\n\t\trow-gap: 2px;\n\t}\n\t/* Mobile: size the title by its content when deciding line breaks — a long\n\t title claims the first line whole (ellipsizing only against the full row)\n\t and pushes location/subtitle/tags down instead of truncating at 35%. */\n\t.ag--mobile.svelte-uhwfyj .ag-compact-title:where(.svelte-uhwfyj) {\n\t\tflex-basis: auto;\n\t}\n\t/* On their own wrapped line the metadata gets the full width — the tight\n\t desktop caps would truncate it beside empty space. */\n\t.ag--mobile.svelte-uhwfyj .ag-compact-loc:where(.svelte-uhwfyj),\n\t.ag--mobile.svelte-uhwfyj .ag-compact-sub:where(.svelte-uhwfyj) {\n\t\tmax-width: 100%;\n\t}\n\t.ag-compact-title.svelte-uhwfyj {\n\t\tfont: 500 15px/1.3 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tflex: 0 1 auto;\n\t\t/* The title is the row's identity — never let subtitle/tags/duration\n\t\t squeeze it out on narrow screens (min-width: 0 resolves to 0px). */\n\t\tmin-width: 6em;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttransition: color 150ms;\n\t}\n\t.ag-compact-dur.svelte-uhwfyj,\n\t.ag-compact-sub.svelte-uhwfyj,\n\t.ag-compact-loc.svelte-uhwfyj,\n\t.ag-compact-tag.svelte-uhwfyj {\n\t\tfont: 400 12.5px/1.3 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\twhite-space: nowrap;\n\t}\n\t.ag-compact-dur.svelte-uhwfyj {\n\t\tfont-variant-numeric: tabular-nums;\n\t\tflex-shrink: 0;\n\t}\n\t.ag-compact-sub.svelte-uhwfyj {\n\t\tflex-shrink: 3;\n\t\tmin-width: 0;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tmax-width: 160px;\n\t}\n\t.ag-compact-loc.svelte-uhwfyj {\n\t\tflex-shrink: 3;\n\t\tmin-width: 0;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tmax-width: 140px;\n\t}\n\t.ag-compact--cancelled.svelte-uhwfyj .ag-compact-title:where(.svelte-uhwfyj) {\n\t\ttext-decoration: line-through;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.ag-compact--cancelled.svelte-uhwfyj::before,\n\t.ag-compact--full.svelte-uhwfyj::before {\n\t\topacity: 0.45;\n\t}\n\t.ag-compact--tentative.svelte-uhwfyj .ag-compact-title:where(.svelte-uhwfyj),\n\t.ag-compact--limited.svelte-uhwfyj .ag-compact-title:where(.svelte-uhwfyj),\n\t.ag-compact--full.svelte-uhwfyj .ag-compact-title:where(.svelte-uhwfyj) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.ag-compact--tentative.svelte-uhwfyj::before,\n\t.ag-compact--limited.svelte-uhwfyj::before {\n\t\tbackground: repeating-linear-gradient(180deg, var(--ev-color) 0 4px, transparent 4px 7px);\n\t}\n\t.ag-compact-tag.svelte-uhwfyj {\n\t\tflex-shrink: 1;\n\t\tmin-width: 2.5em;\n\t\tmax-width: 120px;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.ag-compact-more.svelte-uhwfyj {\n\t\tfont-size: 12.5px;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tpadding: 4px 0 0 11px;\n\t\tcursor: pointer;\n\t\tdisplay: block;\n\t}\n\t.ag-compact-more.svelte-uhwfyj:hover,\n\t.ag-compact-more.svelte-uhwfyj:active {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\t.ag-compact-more.svelte-uhwfyj:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);\n\t\tborder-radius: 0;\n\t}\n\n\t/* ═══ Day-drop drag ═══ */\n\t.ag-card--drag.svelte-uhwfyj {\n\t\topacity: 0.4;\n\t}\n\t.ag-wday--drop.svelte-uhwfyj {\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t\tbox-shadow: inset 0 0 0 1px var(--dt-accent, #1d4fd7);\n\t}\n\n\t/* ═══ Timetable columns (desktop) ═══ */\n\t.ag--cols.svelte-uhwfyj .ag-body:where(.svelte-uhwfyj) {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(var(--ag-cols, 7), minmax(0, 1fr));\n\t}\n\t/* Columns stretch to the tallest day, so the separator runs full height */\n\t.ag--cols.svelte-uhwfyj .ag-wday:where(.svelte-uhwfyj) {\n\t\tborder-bottom: none;\n\t\tborder-inline-start: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tmin-width: 0;\n\t}\n\t.ag--cols.svelte-uhwfyj .ag-wday:where(.svelte-uhwfyj):first-child {\n\t\tborder-inline-start: none;\n\t}\n\t/* Uniform head padding — the :first-child top bump would misalign columns.\n\t Also overrides the past-day head variant (extra class = higher specificity). */\n\t.ag--cols.svelte-uhwfyj .ag-wday:where(.svelte-uhwfyj) .ag-wday-head:where(.svelte-uhwfyj) {\n\t\tpadding: 12px 10px 8px;\n\t}\n\t/* Badge + name + date won't fit one line in a ~160px column */\n\t.ag--cols.svelte-uhwfyj .ag-wday-head-left:where(.svelte-uhwfyj) {\n\t\tflex-wrap: wrap;\n\t\trow-gap: 2px;\n\t}\n\t.ag--cols.svelte-uhwfyj .ag-wday-expanded:where(.svelte-uhwfyj),\n\t.ag--cols.svelte-uhwfyj .ag-wday-compact:where(.svelte-uhwfyj),\n\t.ag--cols.svelte-uhwfyj .ag-wday-empty:where(.svelte-uhwfyj),\n\t.ag--cols.svelte-uhwfyj .ag-wday-past-line--summary:where(.svelte-uhwfyj) {\n\t\tpadding-left: 10px;\n\t\tpadding-right: 10px;\n\t}\n\t.ag--cols.svelte-uhwfyj .ag-allday:where(.svelte-uhwfyj) {\n\t\tpadding-left: 10px;\n\t\tpadding-right: 10px;\n\t}\n\t/* Narrow cards: long titles get a third line, meta wraps instead of clipping */\n\t.ag--cols.svelte-uhwfyj .ag-card-title:where(.svelte-uhwfyj) {\n\t\t-webkit-line-clamp: 3;\n\t\tline-clamp: 3;\n\t}\n\t.ag--cols.svelte-uhwfyj .ag-card-meta:where(.svelte-uhwfyj) {\n\t\tflex-wrap: wrap;\n\t\trow-gap: 3px;\n\t}\n\n\t/* ═══ Mobile adaptations ═══ */\n\t/* Horizontal swipes are ours (week navigation); the browser keeps\n\t vertical scrolling and pinch-zoom. */\n\t.ag--mobile.svelte-uhwfyj,\n\t.ag--mobile.svelte-uhwfyj .ag-body:where(.svelte-uhwfyj) {\n\t\ttouch-action: pan-y pinch-zoom;\n\t}\n\t.ag--mobile.svelte-uhwfyj .ag-wday-head:where(.svelte-uhwfyj) {\n\t\tpadding: 12px 16px;\n\t}\n\t.ag--mobile.svelte-uhwfyj .ag-wday-expanded:where(.svelte-uhwfyj) {\n\t\tpadding: 0 16px 12px;\n\t}\n\t.ag--mobile.svelte-uhwfyj .ag-wday-compact:where(.svelte-uhwfyj) {\n\t\tpadding: 0 16px 12px;\n\t}\n\t/* Type is already on the planner scale; phones only get bigger targets. */\n\t.ag--mobile.svelte-uhwfyj .ag-card-body:where(.svelte-uhwfyj) {\n\t\tpadding: 12px 14px;\n\t}\n\t.ag--mobile.svelte-uhwfyj .ag-compact:where(.svelte-uhwfyj) {\n\t\tpadding: 8px 0 8px 11px;\n\t}\n\t.ag--mobile.svelte-uhwfyj .ag-compact-more:where(.svelte-uhwfyj) {\n\t\tpadding-top: 6px;\n\t}\n\t.ag--mobile.svelte-uhwfyj .ag-wslot-cards--multi:where(.svelte-uhwfyj) {\n\t\tgrid-template-columns: 1fr;\n\t}\n\n\t/* ─── Container ──────────────────────────────────── */\n\t.mb.svelte-zbkzcp {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tuser-select: none;\n\t\tfont-variant-numeric: tabular-nums;\n\t\toverflow: hidden;\n\t\tbackground: var(--dt-bg, #efebe9);\n\t\t-webkit-tap-highlight-color: transparent;\n\t\ttouch-action: pan-y pinch-zoom;\n\t}\n\t.mb--auto.svelte-zbkzcp { overflow: visible; }\n\n\t/* ─── Swipe wrapper (follows the finger) ─────────── */\n\t.mb-swipe.svelte-zbkzcp {\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tposition: relative;\n\t}\n\t.mb-swipe--animate.svelte-zbkzcp {\n\t\ttransition: transform 180ms ease;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.mb-swipe--animate.svelte-zbkzcp { transition: none; }\n\t}\n\n\t/* ─── All-day bar ────────────────────────────────── */\n\t.mb-allday.svelte-zbkzcp {\n\t\tdisplay: flex;\n\t\tgap: 4px;\n\t\tpadding: 4px 8px;\n\t\toverflow-x: auto;\n\t\tscrollbar-width: none;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tflex-shrink: 0;\n\t\talign-items: center;\n\t}\n\t.mb-allday.svelte-zbkzcp::-webkit-scrollbar { display: none; }\n\t.mb-allday--expanded.svelte-zbkzcp {\n\t\tflex-wrap: wrap;\n\t\toverflow-x: visible;\n\t}\n\n\t.mb-allday-chip.svelte-zbkzcp {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tpadding: 4px 8px;\n\t\tmin-height: 32px;\n\t\tborder-radius: 0;\n\t\tbackground: var(--ev-color);\n\t\tcolor: var(--dt-btn-text, #fff);\n\t\tborder: none;\n\t\tcursor: pointer;\n\t\tflex-shrink: 0;\n\t\ttransition: filter 120ms;\n\t\t-webkit-tap-highlight-color: transparent;\n\t\tmax-width: 160px;\n\t\tposition: relative;\n\t}\n\t/* Hit-slop: 44px effective touch target */\n\t.mb-allday-chip.svelte-zbkzcp::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\theight: 44px;\n\t}\n\t.mb-allday-chip.svelte-zbkzcp:hover,\n\t.mb-allday-chip.svelte-zbkzcp:active {\n\t\tfilter: brightness(1.08);\n\t}\n\t.mb-allday-chip--selected.svelte-zbkzcp {\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);\n\t}\n\t.mb-allday-chip.svelte-zbkzcp:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\n\t/* The band is the colour; no dot. */\n\t.mb-allday-dot.svelte-zbkzcp {\n\t\tdisplay: none;\n\t}\n\n\t.mb-allday-title.svelte-zbkzcp {\n\t\tfont: 500 13.5px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: inherit;\n\t\twhite-space: nowrap;\n\t\tmax-width: 100px;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t.mb-allday-span.svelte-zbkzcp {\n\t\tfont: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: inherit;\n\t\topacity: 0.75;\n\t}\n\n\t.mb-allday-more.svelte-zbkzcp {\n\t\tfont: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\twhite-space: nowrap;\n\t\tflex-shrink: 0;\n\t\tpadding: 0 6px;\n\t\tmin-height: 32px;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tcursor: pointer;\n\t\tposition: relative;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t.mb-allday-more.svelte-zbkzcp::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\theight: 44px;\n\t}\n\t.mb-allday-more.svelte-zbkzcp:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);\n\t}\n\n\t/* ─── Grid ───────────────────────────────────────── */\n\t.mb-grid.svelte-zbkzcp {\n\t\tflex: 1;\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\toverscroll-behavior: contain;\n\t\t-webkit-overflow-scrolling: touch;\n\t\tscrollbar-width: thin;\n\t\tscrollbar-color: var(--dt-scrollbar, rgba(15, 15, 15, 0.1)) transparent;\n\t\tposition: relative;\n\t\tpadding-top: 8px;\n\t}\n\t.mb--auto.svelte-zbkzcp .mb-grid:where(.svelte-zbkzcp) { overflow-y: visible; }\n\t.mb-grid.svelte-zbkzcp:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-text, #0f0f0f);\n\t}\n\n\t.mb-grid-inner.svelte-zbkzcp {\n\t\tposition: relative;\n\t\tmin-width: 100%;\n\t}\n\n\t/* ─── Empty state ────────────────────────────────── */\n\t.mb-empty.svelte-zbkzcp {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpointer-events: none;\n\t\tz-index: 4;\n\t}\n\t.mb-empty-text.svelte-zbkzcp {\n\t\tfont: 500 13px/1.4 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\n\t/* ─── Hour row ───────────────────────────────────── */\n\t.mb-hour.svelte-zbkzcp {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tdisplay: flex;\n\t\talign-items: flex-start;\n\t}\n\n\t/* The first hour has no room above its line: it sits on it, unclipped */\n\t.mb-hour.svelte-zbkzcp:first-child .mb-hour-label:where(.svelte-zbkzcp) { top: 0; }\n\t.mb-hour-label--under.svelte-zbkzcp {\n\t\tvisibility: hidden;\n\t}\n\t.mb-hour-label.svelte-zbkzcp small:where(.svelte-zbkzcp) {\n\t\tfont-size: 10px;\n\t\tfont-weight: 500;\n\t\tvertical-align: top;\n\t\tmargin-left: 1px;\n\t\tletter-spacing: 0;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.mb-hour-label.svelte-zbkzcp {\n\t\twidth: 40px;\n\t\t/* border-box keeps the label inside the 40px gutter that events\n\t\t start at — content-box pushed digits flush under the event edge */\n\t\tbox-sizing: border-box;\n\t\tflex-shrink: 0;\n\t\tfont: 400 15px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-stretch: 90%;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tletter-spacing: -0.02em;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\ttext-align: right;\n\t\tpadding-right: 8px;\n\t\tpadding-top: 0;\n\t\tposition: relative;\n\t\ttop: -6px;\n\t}\n\n\t.mb-hour-line.svelte-zbkzcp {\n\t\tflex: 1;\n\t\theight: 1px;\n\t\tbackground: var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\n\t.mb-hour--blocked.svelte-zbkzcp {\n\t\tbackground: repeating-linear-gradient(\n\t\t\t-45deg,\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 3%, transparent),\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 3%, transparent) 4px,\n\t\t\ttransparent 4px,\n\t\t\ttransparent 8px\n\t\t);\n\t}\n\n\t.mb-blocked-label.svelte-zbkzcp {\n\t\tposition: absolute;\n\t\tleft: 44px;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\tfont: 500 11px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.04em;\n\t}\n\n\t/* ─── Now line ───────────────────────────────────── */\n\t/* No stacking context of its own: the plate and the dot sit above the\n\t events, the line under them (the event it crosses is opaque), so the\n\t line never strikes through a title. */\n\t.mb-now.svelte-zbkzcp {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tpointer-events: none;\n\t}\n\n\t/* The clock is a reversed plate on the accent, as in the desktop gutter. */\n\t.mb-now-label.svelte-zbkzcp {\n\t\tposition: relative;\n\t\tz-index: 10;\n\t\twidth: 40px;\n\t\tbox-sizing: border-box;\n\t\tflex-shrink: 0;\n\t\tpadding: 0 4px 0 0;\n\t\ttext-align: right;\n\t\twhite-space: nowrap;\n\t}\n\t.mb-now-label.svelte-zbkzcp::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tright: -4px;\n\t\ttop: 50%;\n\t\twidth: 8px;\n\t\theight: 8px;\n\t\tmargin-top: -4px;\n\t\tborder-radius: 50%;\n\t\tbackground: var(--dt-accent, #1d4fd7);\n\t}\n\t.mb-now-label.svelte-zbkzcp span:where(.svelte-zbkzcp) {\n\t\tdisplay: inline-block;\n\t\tpadding: 2px 3px;\n\t\tborder-radius: 0;\n\t\tbackground: var(--dt-accent, #1d4fd7);\n\t\tfont: 500 11px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-btn-text, #ffffff);\n\t}\n\n\t.mb-now-line.svelte-zbkzcp {\n\t\tflex: 1;\n\t\theight: 0;\n\t\tborder-top: 2px solid var(--dt-accent, #1d4fd7);\n\t\tbox-shadow: none;\n\t\tposition: relative;\n\t\tz-index: 4;\n\t}\n\n\t/* ─── Events ─────────────────────────────────────── */\n\t.mb-event.svelte-zbkzcp {\n\t\tposition: absolute;\n\t\tz-index: 5;\n\t\tborder-radius: 0;\n\t\tcursor: pointer;\n\t\tbackground: transparent;\n\t\tborder: none;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\talign-items: stretch;\n\t\toverflow: hidden;\n\t\ttransition: box-shadow 120ms, background 120ms;\n\t\ttext-align: left;\n\t\tpadding: 0;\n\t\t-webkit-tap-highlight-color: transparent;\n\t\tmin-height: 24px;\n\t}\n\t.mb-event.svelte-zbkzcp:hover,\n\t.mb-event.svelte-zbkzcp:active {\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t/* Short blocks keep their duration-proportional height, but get a 44px\n\t transparent hit-slop so taps still land. */\n\t.mb-event--short.svelte-zbkzcp {\n\t\toverflow: visible;\n\t}\n\t.mb-event--short.svelte-zbkzcp::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\theight: 44px;\n\t}\n\t.mb-event--short.svelte-zbkzcp .mb-ev-body:where(.svelte-zbkzcp) {\n\t\tpadding-top: 2px;\n\t\tpadding-bottom: 2px;\n\t}\n\t.mb-event--selected.svelte-zbkzcp {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t}\n\t/* The event in progress is the one the now line crosses: its wash is\n\t laid over the paper, opaque, so the line runs beneath its text. */\n\t.mb-event.mb-event--current.svelte-zbkzcp {\n\t\tbackground:\n\t\t\tlinear-gradient(var(--dt-accent-dim, rgba(29, 79, 215, 0.12)), var(--dt-accent-dim, rgba(29, 79, 215, 0.12))),\n\t\t\tvar(--dt-paper, none),\n\t\t\tvar(--dt-bg, #efebe9);\n\t}\n\t.mb-event.mb-event--current.svelte-zbkzcp:hover,\n\t.mb-event.mb-event--current.svelte-zbkzcp:active {\n\t\tbackground:\n\t\t\tlinear-gradient(var(--dt-hover, rgba(15, 15, 15, 0.04)), var(--dt-hover, rgba(15, 15, 15, 0.04))),\n\t\t\tvar(--dt-paper, none),\n\t\t\tvar(--dt-bg, #efebe9);\n\t}\n\t/* Printed states: a cancelled class is struck through; a tentative or\n\t limited one is set in grey with a dashed bar — never a bare opacity. */\n\t.mb-event--cancelled.svelte-zbkzcp .mb-ev-title:where(.svelte-zbkzcp) {\n\t\ttext-decoration: line-through;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.mb-event--cancelled.svelte-zbkzcp .mb-ev-stripe:where(.svelte-zbkzcp) {\n\t\topacity: 0.45; /* decorative bar only */\n\t}\n\t.mb-event--tentative.svelte-zbkzcp .mb-ev-title:where(.svelte-zbkzcp),\n\t.mb-event--full.svelte-zbkzcp .mb-ev-title:where(.svelte-zbkzcp) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.mb-event--tentative.svelte-zbkzcp .mb-ev-stripe:where(.svelte-zbkzcp),\n\t.mb-event--limited.svelte-zbkzcp .mb-ev-stripe:where(.svelte-zbkzcp) {\n\t\tbackground: repeating-linear-gradient(\n\t\t\t180deg,\n\t\t\tvar(--ev-color) 0 4px,\n\t\t\ttransparent 4px 7px\n\t\t);\n\t}\n\t.mb-event--full.svelte-zbkzcp .mb-ev-stripe:where(.svelte-zbkzcp) {\n\t\topacity: 0.45;\n\t}\n\t.mb-event--resizing.svelte-zbkzcp {\n\t\tz-index: 50;\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t\tcursor: ns-resize;\n\t}\n\n\t/* ─── Resize handles ─────────────────────────────── */\n\t/* Resizing lives only on the centered grip column. The old full-width\n\t edge bands (24px of inward slop each) covered short events entirely —\n\t min block height is 24px, so any tap near an edge risked starting a\n\t resize. The grip is persistently visible on touch (hover:none below),\n\t so the smaller target stays discoverable; taps elsewhere open. */\n\t.mb-ev-handle.svelte-zbkzcp {\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t\twidth: 56px;\n\t\theight: 10px;\n\t\tz-index: 2;\n\t\tcursor: ns-resize;\n\t\ttouch-action: none;\n\t}\n\t.mb-ev-handle--start.svelte-zbkzcp { top: 0; }\n\t.mb-ev-handle--end.svelte-zbkzcp { bottom: 0; }\n\t/* Hit-slop: ≥24px effective, extending inward so the block's\n\t overflow clipping can't cut it off. */\n\t.mb-ev-handle.svelte-zbkzcp::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 24px;\n\t}\n\t.mb-ev-handle--start.svelte-zbkzcp::before { top: 0; }\n\t.mb-ev-handle--end.svelte-zbkzcp::before { bottom: 0; }\n\t.mb-ev-handle.svelte-zbkzcp::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t\twidth: 24px;\n\t\theight: 3px;\n\t\tborder-radius: 0;\n\t\tbackground: var(--ev-color);\n\t\topacity: 0;\n\t\ttransition: opacity 120ms;\n\t}\n\t.mb-ev-handle--start.svelte-zbkzcp::after { top: 2px; }\n\t.mb-ev-handle--end.svelte-zbkzcp::after { bottom: 2px; }\n\t.mb-event.svelte-zbkzcp:hover .mb-ev-handle:where(.svelte-zbkzcp)::after,\n\t.mb-event.svelte-zbkzcp:focus-within .mb-ev-handle:where(.svelte-zbkzcp)::after,\n\t.mb-event--resizing.svelte-zbkzcp .mb-ev-handle:where(.svelte-zbkzcp)::after,\n\t.mb-event--selected.svelte-zbkzcp .mb-ev-handle:where(.svelte-zbkzcp)::after { opacity: 0.55; }\n\t/* Finger on the grip column itself: brighten so the hit zone reads */\n\t.mb-ev-handle.svelte-zbkzcp:hover::after { opacity: 0.9; }\n\t/* Touch devices have no hover — show the handles persistently. */\n\t@media (hover: none) {\n\t\t.mb-ev-handle.svelte-zbkzcp::after { opacity: 0.55; }\n\t}\n\n\t/* ─── Drag-to-create ghost ───────────────────────── */\n\t.mb-create-ghost.svelte-zbkzcp {\n\t\tposition: absolute;\n\t\tleft: 40px;\n\t\tright: 4px;\n\t\tz-index: 40;\n\t\tborder-radius: 0;\n\t\tbackground: color-mix(in srgb, var(--dt-accent, #1d4fd7) 12%, transparent);\n\t\tborder: 1px dashed color-mix(in srgb, var(--dt-accent, #1d4fd7) 55%, transparent);\n\t\tdisplay: flex;\n\t\talign-items: flex-start;\n\t\toverflow: hidden;\n\t\tpointer-events: none;\n\t}\n\t.mb-create-ghost-time.svelte-zbkzcp {\n\t\tfont: 500 11px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t\tpadding: 4px 8px;\n\t\twhite-space: nowrap;\n\t}\n\n\t.mb-ev-stripe.svelte-zbkzcp {\n\t\twidth: 3px;\n\t\tbackground: var(--ev-color);\n\t\tflex-shrink: 0;\n\t\tborder-radius: 0;\n\t}\n\n\t.mb-ev-body.svelte-zbkzcp {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t\tpadding: 4px 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 1px;\n\t\tjustify-content: center;\n\t}\n\n\t.mb-ev-title.svelte-zbkzcp {\n\t\tfont: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t.mb-ev-time.svelte-zbkzcp {\n\t\tfont: 400 14px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\n\t.mb-ev-sub.svelte-zbkzcp {\n\t\tfont: 400 12.5px/1.1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t.mb-ev-loc.svelte-zbkzcp {\n\t\tfont: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t.mb-ev-tags.svelte-zbkzcp {\n\t\tdisplay: flex;\n\t\tgap: 4px;\n\t\tmargin-top: 2px;\n\t}\n\n\t.mb-ev-tag.svelte-zbkzcp {\n\t\tfont: 500 11px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--ev-color, var(--dt-accent));\n\t\tbackground: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, transparent);\n\t\tpadding: 2px 5px;\n\t\tborder-radius: 0;\n\t\twhite-space: nowrap;\n\t}\n\n\t.mb-ev-live.svelte-zbkzcp {\n\t\tposition: absolute;\n\t\ttop: 6px;\n\t\tright: 6px;\n\t\twidth: 7px;\n\t\theight: 7px;\n\t\tborder-radius: 50%;\n\t\tbackground: var(--ev-color, var(--dt-accent));\n\t\tanimation: svelte-zbkzcp-mb-pulse 2s ease-in-out infinite;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.mb-ev-live.svelte-zbkzcp { animation: none; }\n\t}\n\t.mb-ev-next-badge.svelte-zbkzcp {\n\t\tposition: absolute;\n\t\ttop: 4px;\n\t\tright: 4px;\n\t\tfont: 500 11px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--ev-color, var(--dt-accent));\n\t\tbackground: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, transparent);\n\t\tpadding: 2px 5px;\n\t\tborder-radius: 0;\n\t\twhite-space: nowrap;\n\t}\n\n\t@keyframes svelte-zbkzcp-mb-pulse {\n\t\t0%, 100% { opacity: 1; }\n\t\t50% { opacity: 0.4; }\n\t}\n\n\t/* ─── Focus ──────────────────────────────────────── */\n\t.mb-event.svelte-zbkzcp:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\n\t/* ─── Container ──────────────────────────────────── */\n\t.mw.svelte-1d18hkf {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tuser-select: none;\n\t\tfont-variant-numeric: tabular-nums;\n\t\toverflow: hidden;\n\t\tbackground: var(--dt-bg, #efebe9);\n\t\t-webkit-tap-highlight-color: transparent;\n\t\ttouch-action: pan-y pinch-zoom;\n\t}\n\t.mw--auto.svelte-1d18hkf { overflow: visible; }\n\n\t/* ─── Scrollable day list ────────────────────────── */\n\t.mw-list.svelte-1d18hkf {\n\t\tflex: 1;\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\toverscroll-behavior: contain;\n\t\t-webkit-overflow-scrolling: touch;\n\t\tscrollbar-width: thin;\n\t\tscrollbar-color: var(--dt-scrollbar, rgba(15, 15, 15, 0.1)) transparent;\n\t}\n\t.mw--auto.svelte-1d18hkf .mw-list:where(.svelte-1d18hkf) { overflow-y: visible; }\n\t.mw-list--animate.svelte-1d18hkf {\n\t\ttransition: transform 180ms ease;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.mw-list--animate.svelte-1d18hkf { transition: none; }\n\t}\n\n\t/* ─── Day row ────────────────────────────────────── */\n\t.mw-row.svelte-1d18hkf {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 12px;\n\t\tposition: relative;\n\t\t/* border-box: width 100% + padding otherwise overflows the list by\n\t\t 24px, which iOS turns into a horizontal pan that clips the date\n\t\t column off the left edge */\n\t\tbox-sizing: border-box;\n\t\tpadding: 10px 12px;\n\t\tbackground: transparent;\n\t\ttransition: background 120ms;\n\t\ttext-align: left;\n\t\twidth: 100%;\n\t\t-webkit-tap-highlight-color: transparent;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tmin-height: 56px;\n\t}\n\t.mw-row.svelte-1d18hkf:last-child {\n\t\tborder-bottom: none;\n\t}\n\t.mw-row.svelte-1d18hkf:has(.mw-row-target:where(.svelte-1d18hkf):active) {\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t.mw-row--today.svelte-1d18hkf {\n\t\tbackground: color-mix(in srgb, var(--dt-accent, #1d4fd7) 4%, transparent);\n\t}\n\t/* Token-based dim (not subtree opacity) so past rows stay legible/tappable */\n\t.mw-row--past.svelte-1d18hkf {\n\t\tbackground: color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 3%, transparent);\n\t}\n\t.mw-row--past.svelte-1d18hkf .mw-ev-title,\n\t.mw-row--past.svelte-1d18hkf .mw-ev-time,\n\t.mw-row--past.svelte-1d18hkf .mw-day-num:where(.svelte-1d18hkf) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.mw-row--disabled.svelte-1d18hkf {\n\t\tbackground-image: repeating-linear-gradient(\n\t\t\t135deg,\n\t\t\ttransparent,\n\t\t\ttransparent 6px,\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 6px,\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 12px\n\t\t);\n\t}\n\t.mw-row-target.svelte-1d18hkf {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tz-index: 0;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tcursor: pointer;\n\t\tpadding: 0;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t.mw-row-target.svelte-1d18hkf:disabled {\n\t\tcursor: default;\n\t}\n\t.mw-row-target.svelte-1d18hkf:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-text, #0f0f0f);\n\t}\n\n\t/* ─── Date column ────────────────────────────────── */\n\t.mw-date.svelte-1d18hkf {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\twidth: 40px;\n\t\tflex-shrink: 0;\n\t\tgap: 2px;\n\t\tposition: relative;\n\t\tz-index: 1;\n\t\tpointer-events: none;\n\t}\n\n\t.mw-day-name.svelte-1d18hkf {\n\t\tfont: 500 12px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.mw-day-name--today.svelte-1d18hkf {\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t}\n\n\t/* The date is the typography: large and regular, narrowed like the planner's */\n\t.mw-day-num.svelte-1d18hkf {\n\t\tfont: 400 22px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-stretch: 90%;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tletter-spacing: -0.02em;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\t.mw-day-num--today.svelte-1d18hkf {\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t}\n\n\t/* ─── Events column ──────────────────────────────── */\n\t/* pointer-events pass through to the full-row target underneath;\n\t only the chips (and \"+N more\") re-capture them. */\n\t.mw-events.svelte-1d18hkf {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 4px;\n\t\tposition: relative;\n\t\tz-index: 2;\n\t\tpointer-events: none;\n\t}\n\n\t.mw-empty.svelte-1d18hkf {\n\t\tfont: 400 13px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\n\t/* ─── Event chip ─────────────────────────────────── */\n\t.mw-ev.svelte-1d18hkf {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 0;\n\t\tmin-height: 44px;\n\t\tborder-radius: 0;\n\t\tbackground: transparent;\n\t\toverflow: hidden;\n\t\tcursor: pointer;\n\t\ttransition: background 120ms;\n\t\t-webkit-tap-highlight-color: transparent;\n\t\tborder: none;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));\n\t\ttext-align: left;\n\t\tpadding: 0;\n\t\tpointer-events: auto;\n\t}\n\t.mw-ev.svelte-1d18hkf:hover,\n\t.mw-ev.svelte-1d18hkf:active {\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t.mw-ev--selected.svelte-1d18hkf {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t}\n\t.mw-ev--current.svelte-1d18hkf {\n\t\tbackground: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));\n\t}\n\t/* All day: a solid band on the event colour, no tint. */\n\t.mw-ev--allday.svelte-1d18hkf {\n\t\tbackground: var(--dt-paper, none) var(--ev-color);\n\t\tbackground-blend-mode: multiply;\n\t\tcolor: var(--dt-btn-text, #fff);\n\t}\n\t.mw-ev--allday.svelte-1d18hkf:hover,\n\t.mw-ev--allday.svelte-1d18hkf:active {\n\t\tbackground: var(--dt-paper, none) var(--ev-color);\n\t\tfilter: brightness(1.08);\n\t}\n\t.mw-ev--allday.svelte-1d18hkf .mw-ev-title:where(.svelte-1d18hkf),\n\t.mw-ev--allday.svelte-1d18hkf .mw-ev-time:where(.svelte-1d18hkf) {\n\t\tcolor: inherit;\n\t}\n\t.mw-ev--allday.mw-ev--selected.svelte-1d18hkf {\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);\n\t}\n\t/* Printed states: a cancelled class is struck through; a tentative or\n\t limited one is set in grey with a dashed bar — never a bare opacity. */\n\t.mw-ev--cancelled.svelte-1d18hkf .mw-ev-title:where(.svelte-1d18hkf) {\n\t\ttext-decoration: line-through;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.mw-ev--cancelled.svelte-1d18hkf .mw-ev-stripe:where(.svelte-1d18hkf) {\n\t\topacity: 0.45; /* decorative bar only */\n\t}\n\t.mw-ev--tentative.svelte-1d18hkf .mw-ev-title:where(.svelte-1d18hkf),\n\t.mw-ev--full.svelte-1d18hkf .mw-ev-title:where(.svelte-1d18hkf) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.mw-ev--tentative.svelte-1d18hkf .mw-ev-stripe:where(.svelte-1d18hkf),\n\t.mw-ev--limited.svelte-1d18hkf .mw-ev-stripe:where(.svelte-1d18hkf) {\n\t\tbackground: repeating-linear-gradient(\n\t\t\t180deg,\n\t\t\tvar(--ev-color) 0 4px,\n\t\t\ttransparent 4px 7px\n\t\t);\n\t}\n\t.mw-ev--full.svelte-1d18hkf .mw-ev-stripe:where(.svelte-1d18hkf) {\n\t\topacity: 0.45;\n\t}\n\n\t.mw-ev-stripe.svelte-1d18hkf {\n\t\twidth: 3px;\n\t\talign-self: stretch;\n\t\tbackground: var(--ev-color, var(--dt-accent));\n\t\tflex-shrink: 0;\n\t\tborder-radius: 0;\n\t}\n\n\t.mw-ev-body.svelte-1d18hkf {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t\tpadding: 5px 8px;\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 6px;\n\t}\n\n\t.mw-ev-title.svelte-1d18hkf {\n\t\tfont: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t}\n\n\t.mw-ev-time.svelte-1d18hkf {\n\t\tfont: 400 14px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t\tflex-shrink: 0;\n\t}\n\n\t.mw-ev-more.svelte-1d18hkf {\n\t\tfont: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\tpadding: 2px 4px;\n\t\tmin-height: 32px;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tcursor: pointer;\n\t\ttext-align: left;\n\t\talign-self: flex-start;\n\t\tposition: relative;\n\t\tpointer-events: auto;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t@media (pointer: coarse) {\n\t\t.mw-ev-more.svelte-1d18hkf {\n\t\t\tmin-height: 44px;\n\t\t\tmin-width: 44px;\n\t\t}\n\t}\n\t.mw-ev-more.svelte-1d18hkf:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);\n\t}\n\n\t/* ─── Chevron ────────────────────────────────────── */\n\t.mw-chevron.svelte-1d18hkf {\n\t\tflex-shrink: 0;\n\t\tcolor: var(--dt-text-3, rgba(15, 15, 15, 0.38));\n\t\tposition: relative;\n\t\tz-index: 1;\n\t\tpointer-events: none;\n\t}\n\n\t/* ─── Focus ──────────────────────────────────────── */\n\t.mw-ev.svelte-1d18hkf:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\n\t.mg.svelte-pvjuld {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tbackground: var(--dt-bg);\n\t\tcolor: var(--dt-text);\n\t\tfont-family: var(--dt-sans);\n\t\toverflow: hidden;\n\t\tcontainer-type: inline-size;\n\t}\n\t.mg--auto.svelte-pvjuld {\n\t\theight: auto;\n\t}\n\n\t.mg-head.svelte-pvjuld {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(7, 1fr);\n\t\tborder-bottom: 1px solid var(--dt-border);\n\t\tflex: none;\n\t}\n\t.mg-head-cell.svelte-pvjuld {\n\t\tpadding: 6px 8px;\n\t\tfont: 500 12px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.08em;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\n\t.mg-body.svelte-pvjuld {\n\t\tflex: 1;\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(7, 1fr);\n\t\t/* 56px floor + scroll backstop: a 6-row month compresses instead of clipping its last week */\n\t\tgrid-template-rows: repeat(var(--mg-rows, 5), minmax(56px, 1fr));\n\t\tmin-height: 0;\n\t\toverflow-y: auto;\n\t}\n\t.mg--auto.svelte-pvjuld .mg-body:where(.svelte-pvjuld) {\n\t\tgrid-template-rows: repeat(var(--mg-rows, 5), minmax(88px, auto));\n\t}\n\t.mg-row.svelte-pvjuld {\n\t\tdisplay: contents;\n\t}\n\n\t.mg-cell.svelte-pvjuld {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 3px;\n\t\tpadding: 6px;\n\t\tborder-right: 1px solid var(--dt-border-day);\n\t\tborder-bottom: 1px solid var(--dt-border-day);\n\t\tmin-width: 0;\n\t\toverflow: hidden;\n\t\ttext-align: left;\n\t}\n\t.mg-cell.svelte-pvjuld:nth-child(7n) {\n\t\tborder-right: none;\n\t}\n\t.mg-cell--weekend.svelte-pvjuld {\n\t\tbackground: var(--dt-weekend-bg, rgba(15, 15, 15, 0.02));\n\t}\n\t/* Dim only the day number for adjacent-month cells — their events stay\n\t legible. text-2, not text-3: a 22px numeral still needs 4.5:1. */\n\t.mg-cell--out.svelte-pvjuld {\n\t\tbackground: var(--dt-surface, transparent);\n\t}\n\t.mg-cell--out.svelte-pvjuld .mg-daynum:where(.svelte-pvjuld) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t.mg-cell--today.svelte-pvjuld {\n\t\tbackground: var(--dt-today-bg);\n\t}\n\t.mg-cell--expanded.svelte-pvjuld .mg-chips:where(.svelte-pvjuld) {\n\t\toverflow-y: auto;\n\t}\n\t.mg-cell--disabled.svelte-pvjuld {\n\t\topacity: 0.35;\n\t\tpointer-events: none;\n\t}\n\t.mg-cell--clickable.svelte-pvjuld {\n\t\tcursor: pointer;\n\t}\n\t.mg-cell--clickable.svelte-pvjuld:hover {\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t.mg-cell.svelte-pvjuld:focus-visible {\n\t\toutline: 2px solid var(--dt-text, #0f0f0f);\n\t\toutline-offset: -2px;\n\t}\n\n\t/* Starts where the weekday name above it starts (6px cell + 2px = the\n\t header's 8px), and is only as wide as its digits, so today's rule is too. */\n\t.mg-daynum.svelte-pvjuld {\n\t\tflex: none;\n\t\talign-self: flex-start;\n\t\tpadding: 0 2px;\n\t\tfont-family: var(--dt-sans, system-ui, sans-serif);\n\t\tfont-size: 22px;\n\t\tfont-weight: 400;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text);\n\t\theight: 26px;\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t}\n\t/* Today: accent numeral on a 2px rule — the same mark in every view. */\n\t.mg-daynum--today.svelte-pvjuld {\n\t\tcolor: var(--dt-accent);\n\t\tbox-shadow: inset 0 -2px 0 var(--dt-accent);\n\t}\n\n\t.mg-chips.svelte-pvjuld {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 2px;\n\t\tmin-height: 0;\n\t\toverflow: hidden;\n\t}\n\t.mg-chip.svelte-pvjuld {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 5px;\n\t\tborder: none;\n\t\tbackground: none;\n\t\tpadding: 1px 4px;\n\t\tborder-radius: 0;\n\t\tfont: 400 12.5px/1.3 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text);\n\t\tcursor: pointer;\n\t\tmin-width: 0;\n\t\ttext-align: left;\n\t}\n\t.mg-chip.svelte-pvjuld:hover {\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t.mg-chip.svelte-pvjuld:focus-visible {\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t\toutline: none;\n\t}\n\t.mg-chip--selected.svelte-pvjuld {\n\t\tbackground: var(--dt-accent-dim);\n\t}\n\t.mg-chip--cancelled.svelte-pvjuld {\n\t\ttext-decoration: line-through;\n\t}\n\t.mg-chip--cancelled.svelte-pvjuld .mg-chip-title:where(.svelte-pvjuld) {\n\t\tcolor: var(--dt-text-2);\n\t}\n\t.mg-chip--cancelled.svelte-pvjuld .mg-chip-dot:where(.svelte-pvjuld) {\n\t\topacity: 0.5;\n\t}\n\t.mg-chip-dot.svelte-pvjuld {\n\t\tflex: none;\n\t\talign-self: stretch;\n\t\twidth: 3px;\n\t\tborder-radius: 0;\n\t\tbackground: var(--mg-chip-color);\n\t}\n\t.mg-chip-time.svelte-pvjuld {\n\t\tflex: none;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text-2);\n\t}\n\t.mg-chip-title.svelte-pvjuld {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\t/* A Latin title in RTL keeps its own direction: the ellipsis cuts its end */\n\t\tunicode-bidi: plaintext;\n\t\ttext-align: left;\n\t}\n\t/* …but it sits on the calendar's side, by the bar */\n\t.mg-chip-title.svelte-pvjuld:dir(rtl) { text-align: right; }\n\t.mg-more.svelte-pvjuld {\n\t\talign-self: flex-start;\n\t\tborder: none;\n\t\tbackground: none;\n\t\tpadding: 1px 4px;\n\t\tborder-radius: 0;\n\t\tfont: 400 12.5px/1.3 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text-2);\n\t\tcursor: pointer;\n\t}\n\t.mg-more.svelte-pvjuld:hover {\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t\tcolor: var(--dt-text);\n\t}\n\t.mg-more.svelte-pvjuld:focus-visible {\n\t\tbox-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);\n\t\toutline: none;\n\t}\n\n\t/* Container-based (the calendar adapts to its box, not the viewport) */\n\t@container (max-width: 640px) {\n\t\t.mg-chip-time.svelte-pvjuld {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t@media (hover: none) {\n\t\t.mg-chip.svelte-pvjuld,\n\t\t.mg-more.svelte-pvjuld {\n\t\t\tmin-height: 30px;\n\t\t}\n\t}\n\n\t/* ── Dots mode (mobile) ─────────────────────────────\n\t Cells are too narrow for text chips, so events render as colored\n\t dots in a wrapping row. The cell itself stays the tap target\n\t (day drill-down) and its label counts the events; dots are aria-hidden. */\n\t.mg--dots.svelte-pvjuld .mg-chips:where(.svelte-pvjuld) {\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t\talign-items: center;\n\t\tgap: 3px;\n\t}\n\t/* The cell is the target: at least a 44px tap, dots never take the hit. */\n\t.mg--dots.svelte-pvjuld .mg-cell:where(.svelte-pvjuld) {\n\t\tmin-height: 44px;\n\t}\n\t.mg--dots.svelte-pvjuld .mg-chips:where(.svelte-pvjuld) {\n\t\tpointer-events: none;\n\t}\n\t.mg--dots.svelte-pvjuld .mg-chip:where(.svelte-pvjuld) {\n\t\tpadding: 3px;\n\t\tmin-height: 0;\n\t}\n\t.mg--dots.svelte-pvjuld .mg-chip-title:where(.svelte-pvjuld),\n\t.mg--dots.svelte-pvjuld .mg-chip-time:where(.svelte-pvjuld) {\n\t\tdisplay: none;\n\t}\n\t/* Marks are circles, like every dot in the calendar */\n\t.mg--dots.svelte-pvjuld .mg-chip-dot:where(.svelte-pvjuld) {\n\t\talign-self: center;\n\t\twidth: 7px;\n\t\theight: 7px;\n\t\tborder-radius: 50%;\n\t}\n\t.mg--dots.svelte-pvjuld .mg-more:where(.svelte-pvjuld) {\n\t\tpadding: 0 3px;\n\t\tmin-height: 0;\n\t\talign-self: center;\n\t\tfont-size: 11px;\n\t}\n\n\t.cal.svelte-1b53e7w {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\tmin-width: 0;\n\t\theight: var(--cal-h, 600px);\n\t\tbackground: var(--dt-paper, none), var(--dt-bg, inherit);\n\t\tborder-radius: var(--cal-r, 0);\n\t\toverflow: clip;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tborder: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tbox-sizing: border-box;\n\t}\n\t.cal--auto.svelte-1b53e7w {\n\t\theight: auto;\n\t\toverflow: visible;\n\t}\n\n\n\t/* ── Header: the period set large as the page's title, the view switch as\n\t plain text, Today ‹ › in 2px ink frames, one rule to the grid. ── */\n\t.cal-hd.svelte-1b53e7w {\n\t\t/* Controls take a small corner that follows the calendar's own radius */\n\t\t--cal-ctl-r: clamp(4px, calc(var(--cal-r, 0px) / 2), 8px);\n\t\t--cal-ctl-h: 36px;\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\talign-items: center;\n\t\tgap: 10px 24px;\n\t\tpadding: 14px 16px 12px;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tflex-shrink: 0;\n\t\tbox-sizing: border-box;\n\t\tfont-family: var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\n\t.cal-hd-title.svelte-1b53e7w {\n\t\tflex: 1 1 auto;\n\t\tmin-width: 0;\n\t\tfont: 400 32px/1.1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-stretch: 90%;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tletter-spacing: -0.02em;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t.cal-sr.svelte-1b53e7w {\n\t\tposition: absolute;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\tmargin: -1px;\n\t\tpadding: 0;\n\t\toverflow: hidden;\n\t\tclip-path: inset(50%);\n\t\twhite-space: nowrap;\n\t\tborder: 0;\n\t}\n\n\t.cal-hd-nav.svelte-1b53e7w {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t}\n\t.cal-hd-nav.svelte-1b53e7w:empty {\n\t\tdisplay: none;\n\t}\n\n\t.cal-hd-today.svelte-1b53e7w,\n\t.cal-hd-btn.svelte-1b53e7w {\n\t\tbox-sizing: border-box;\n\t\theight: var(--cal-ctl-h);\n\t\tborder: 2px solid var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tborder-radius: var(--cal-ctl-r);\n\t\tbackground: transparent;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tcursor: pointer;\n\t\ttransition: background-color 120ms, opacity 120ms;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t.cal-hd-today.svelte-1b53e7w {\n\t\tpadding: 0 14px;\n\t\tfont: 400 15px/1 var(--dt-sans, system-ui, sans-serif);\n\t\twhite-space: nowrap;\n\t}\n\t.cal-hd-btn.svelte-1b53e7w {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t\twidth: var(--cal-ctl-h);\n\t\tpadding: 0;\n\t}\n\t/* The chevrons point along the reading direction */\n\t.cal-hd-btn.svelte-1b53e7w:dir(rtl) svg:where(.svelte-1b53e7w) {\n\t\ttransform: scaleX(-1);\n\t}\n\t.cal-hd-today.svelte-1b53e7w:hover:not(:disabled),\n\t.cal-hd-btn.svelte-1b53e7w:hover {\n\t\tbackground: var(--dt-hover, color-mix(in srgb, currentColor 6%, transparent));\n\t}\n\t.cal-hd-today.svelte-1b53e7w:active:not(:disabled),\n\t.cal-hd-btn.svelte-1b53e7w:active {\n\t\tbackground: color-mix(in srgb, var(--dt-text, #0f0f0f) 12%, transparent);\n\t}\n\t/* Today is already in view: the frame stays, quietly */\n\t.cal-hd-today.svelte-1b53e7w:disabled {\n\t\topacity: 0.4;\n\t\tcursor: default;\n\t}\n\n\t.cal-hd-today.svelte-1b53e7w:focus-visible,\n\t.cal-hd-btn.svelte-1b53e7w:focus-visible,\n\t.cal-pill.svelte-1b53e7w:focus-visible {\n\t\toutline: 2px solid var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\toutline-offset: 2px;\n\t}\n\n\t/* View switch: plain text; the chosen one is ink over a 2px ink rule.\n\t The accent keeps its three jobs. */\n\t.cal-pills.svelte-1b53e7w {\n\t\tdisplay: flex;\n\t\tgap: 16px;\n\t\tflex-shrink: 0;\n\t}\n\t/* A hairline between the view-type and the day/week/month rows */\n\t.cal-pills--labels.svelte-1b53e7w + .cal-pills:where(.svelte-1b53e7w) {\n\t\talign-self: stretch;\n\t\talign-items: center;\n\t\tpadding-inline-start: 24px;\n\t\tborder-inline-start: 1px solid var(--dt-border, rgba(15, 15, 15, 0.12));\n\t}\n\t.cal-pill.svelte-1b53e7w {\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\tcursor: pointer;\n\t\tfont: 400 15px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tmin-height: var(--cal-ctl-h);\n\t\t/* 4px of air for the focus ring, given back so the row keeps its rhythm */\n\t\tpadding: 0 4px;\n\t\tmargin: 0 -4px;\n\t\tborder-radius: 0;\n\t\twhite-space: nowrap;\n\t\ttext-decoration: underline 2px transparent;\n\t\ttext-underline-offset: 7px;\n\t\ttransition: color 120ms, text-decoration-color 120ms;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t/* :not(--active) — iOS keeps :hover stuck after a tap */\n\t.cal-pill.svelte-1b53e7w:hover:not(.cal-pill--active) {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\ttext-decoration-color: var(--dt-border-day, var(--dt-border, rgba(15, 15, 15, 0.3)));\n\t}\n\t.cal-pill--active.svelte-1b53e7w {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\ttext-decoration-color: currentColor;\n\t}\n\n\t/* Compact (mobile) header: same drawing, smaller title, tighter gaps */\n\t.cal-hd--mobile.svelte-1b53e7w {\n\t\t--cal-ctl-h: 40px;\n\t\tgap: 8px 12px;\n\t\tpadding: 10px 8px 8px;\n\t}\n\t.cal-hd--mobile.svelte-1b53e7w .cal-hd-title:where(.svelte-1b53e7w) {\n\t\tfont-size: 22px;\n\t}\n\t.cal-hd--mobile.svelte-1b53e7w .cal-pills:where(.svelte-1b53e7w) {\n\t\tgap: 12px;\n\t}\n\t.cal-hd--mobile.svelte-1b53e7w .cal-pill:where(.svelte-1b53e7w) {\n\t\tfont-size: 14px;\n\t}\n\t.cal-hd--mobile.svelte-1b53e7w .cal-hd-today:where(.svelte-1b53e7w) {\n\t\tpadding: 0 10px;\n\t\tfont-size: 14px;\n\t}\n\t.cal-hd--mobile.svelte-1b53e7w .cal-hd-nav:where(.svelte-1b53e7w) {\n\t\tgap: 6px;\n\t\tmargin-inline-start: auto;\n\t}\n\t/* Narrow containers: the title takes its own row above the controls */\n\t.cal-hd--stack.svelte-1b53e7w .cal-hd-title:where(.svelte-1b53e7w):not(:empty) {\n\t\tflex-basis: 100%;\n\t}\n\n\t@media (pointer: coarse) {\n\t\t.cal-hd.svelte-1b53e7w {\n\t\t\t--cal-ctl-h: 44px;\n\t\t}\n\t\t.cal-pill.svelte-1b53e7w {\n\t\t\tmin-width: 44px;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.cal-hd-today.svelte-1b53e7w,\n\t\t.cal-hd-btn.svelte-1b53e7w,\n\t\t.cal-pill.svelte-1b53e7w {\n\t\t\ttransition: none;\n\t\t}\n\t}\n\n\t.cal-body.svelte-1b53e7w {\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t}\n\t.cal--auto.svelte-1b53e7w .cal-body:where(.svelte-1b53e7w) {\n\t\toverflow: visible;\n\t}\n\t.cal-body--unmeasured.svelte-1b53e7w {\n\t\tvisibility: hidden;\n\t\tanimation: svelte-1b53e7w-cal-reveal 0s 1.5s forwards;\n\t}\n\t@keyframes svelte-1b53e7w-cal-reveal { to { visibility: visible; } }\n\n\t.cal-empty.svelte-1b53e7w {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\theight: 100%;\n\t\tfont: 400 13px / 1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-3, rgba(15, 15, 15, 0.38));\n\t}\n\n\t.cal-loading.svelte-1b53e7w {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 2px;\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\ttransparent 0%,\n\t\t\tvar(--dt-accent, #1d4fd7) 50%,\n\t\t\ttransparent 100%\n\t\t);\n\t\tanimation: svelte-1b53e7w-cal-slide 1.2s ease-in-out infinite;\n\t}\n\n\t@keyframes svelte-1b53e7w-cal-slide {\n\t\t0% { transform: translateX(-100%); }\n\t\t100% { transform: translateX(100%); }\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.cal-loading.svelte-1b53e7w {\n\t\t\tanimation: none;\n\t\t\tbackground: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));\n\t\t}\n\t}\n\n/*$vite$:1*/";
1
+ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Container ──────────────────────────────────── */\n\t.tw.svelte-j4rvbp {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\toverflow: hidden;\n\t\tuser-select: none;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tbackground: var(--dt-paper, none), var(--dt-bg, #efebe9);\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t.tw--auto.svelte-j4rvbp { overflow: visible; }\n\n\t/* ─── Scroll container ───────────────────────────── */\n\t.tw-scroll.svelte-j4rvbp {\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow-y: auto;\n\t\toverflow-x: auto;\n\t\t/* Horizontal stays contained (a sideways swipe must not trigger the\n\t\t browser's back navigation); vertical chains to the page, so a wheel\n\t\t over a page-embedded calendar scrolls on once the grid ends. */\n\t\toverscroll-behavior-x: contain;\n\t\toverscroll-behavior-y: auto;\n\t\tscrollbar-width: thin;\n\t\tscrollbar-color: var(--dt-scrollbar, rgba(15, 15, 15, 0.1)) transparent;\n\t}\n\t.tw--auto.svelte-j4rvbp .tw-scroll:where(.svelte-j4rvbp) { overflow-y: visible; }\n\t.tw-scroll.svelte-j4rvbp::-webkit-scrollbar { width: 5px; height: 5px; }\n\t.tw-scroll.svelte-j4rvbp::-webkit-scrollbar-thumb {\n\t\tbackground: var(--dt-scrollbar, rgba(15, 15, 15, 0.1));\n\t\tborder-radius: 0;\n\t}\n\t.tw-scroll.svelte-j4rvbp::-webkit-scrollbar-track { background: transparent; }\n\n\t.tw-inner.svelte-j4rvbp {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\twidth: 100%;\n\t}\n\n\t/* ─── Sticky top (header + all-day) ──────────────── */\n\t.tw-top.svelte-j4rvbp {\n\t\tposition: sticky;\n\t\ttop: 0;\n\t\tz-index: 30;\n\t\tbackground: var(--dt-paper, none), var(--dt-bg, #efebe9);\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\n\t/* ─── Day header row ─────────────────────────────── */\n\t.tw-head.svelte-j4rvbp {\n\t\tdisplay: flex;\n\t}\n\n\t.tw-corner.svelte-j4rvbp {\n\t\tflex-shrink: 0;\n\t\tposition: sticky;\n\t\tleft: 0;\n\t\tz-index: 2;\n\t\tbackground: var(--dt-paper, none), var(--dt-bg, #efebe9);\n\t}\n\n\t.tw-hd.svelte-j4rvbp {\n\t\tflex: 1 1 0;\n\t\tmin-width: var(--tw-col-min, 110px);\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tpadding: 14px 4px 12px;\n\t\tborder-left: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\n\t.tw-hd-wd.svelte-j4rvbp {\n\t\tfont: 500 12px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.tw-hd--today.svelte-j4rvbp .tw-hd-wd:where(.svelte-j4rvbp) {\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t}\n\n\t/* The day number is the typography of the grid: large, regular weight. */\n\t.tw-hd-num.svelte-j4rvbp {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tfont: 400 40px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-stretch: 90%;\n\t\tletter-spacing: -0.02em;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\t/* Today: the numeral in the accent, nothing else. */\n\t.tw-hd-num--today.svelte-j4rvbp {\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t}\n\n\t.tw-hd-custom.svelte-j4rvbp {\n\t\tmax-width: 100%;\n\t\toverflow: hidden;\n\t}\n\n\t/* ─── All-day strip ──────────────────────────────── */\n\t.tw-allday.svelte-j4rvbp {\n\t\tdisplay: flex;\n\t\tborder-top: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\n\t.tw-ad-gutter.svelte-j4rvbp {\n\t\tflex-shrink: 0;\n\t\t/* The padding sits inside the gutter's width, so the all-day cells\n\t\t start where the day columns and headers start. */\n\t\tbox-sizing: border-box;\n\t\tposition: sticky;\n\t\tleft: 0;\n\t\tz-index: 2;\n\t\tbackground: var(--dt-paper, none), var(--dt-bg, #efebe9);\n\t\tdisplay: flex;\n\t\talign-items: flex-start;\n\t\tjustify-content: flex-end;\n\t\tpadding: 6px 8px 6px 0;\n\t}\n\t.tw-ad-gutter-lb.svelte-j4rvbp {\n\t\tfont: 500 12px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\ttext-align: right;\n\t}\n\n\t.tw-ad-cell.svelte-j4rvbp {\n\t\tflex: 1 1 0;\n\t\tmin-width: var(--tw-col-min, 110px);\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 2px;\n\t\tpadding: 4px 0 5px;\n\t\tborder-left: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\t.tw-ad-cell--today.svelte-j4rvbp { background: var(--dt-today-bg, rgba(29, 79, 215, 0.04)); }\n\n\t.tw-ad.svelte-j4rvbp {\n\t\tappearance: none;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tpadding: 0 10px;\n\t\tmin-height: 36px;\n\t\tborder: none;\n\t\tborder-radius: 0;\n\t\t/* The paper's grain runs through the band (multiply keeps the colour). */\n\t\tbackground: var(--dt-paper, none) var(--ev-color);\n\t\tbackground-blend-mode: multiply;\n\t\tcolor: var(--dt-btn-text, #fff);\n\t\tcursor: pointer;\n\t\toverflow: hidden;\n\t\ttext-align: left;\n\t\ttransition: filter 0.12s;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t.tw-ad.svelte-j4rvbp:hover {\n\t\tfilter: brightness(1.08);\n\t}\n\t/* A span continues across its days as one band: no edge between segments. */\n\t.tw-ad--mid.svelte-j4rvbp,\n\t.tw-ad--end.svelte-j4rvbp:not(.tw-ad--start) {\n\t\tmargin-left: -1px;\n\t}\n\t.tw-ad--selected.svelte-j4rvbp {\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);\n\t}\n\t.tw-ad--cancelled.svelte-j4rvbp .tw-ad-title:where(.svelte-j4rvbp) {\n\t\ttext-decoration: line-through;\n\t}\n\t.tw-ad--cancelled.svelte-j4rvbp {\n\t\tbackground: color-mix(in srgb, var(--ev-color) 55%, var(--dt-bg, #efebe9));\n\t}\n\t.tw-ad.svelte-j4rvbp:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\n\t.tw-ad-title.svelte-j4rvbp {\n\t\tfont: 500 13.5px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: inherit;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tunicode-bidi: plaintext;\n\t\ttext-align: left;\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t}\n\t/* …but it sits on the calendar's side, by the bar */\n\t.tw-ad-title.svelte-j4rvbp:dir(rtl) { text-align: right; }\n\t.tw-ad-span.svelte-j4rvbp {\n\t\tfont: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: inherit;\n\t\topacity: 0.75;\n\t\tflex-shrink: 0;\n\t}\n\t.tw-ad--mid.svelte-j4rvbp .tw-ad-title:where(.svelte-j4rvbp),\n\t.tw-ad--end.svelte-j4rvbp:not(.tw-ad--start) .tw-ad-title:where(.svelte-j4rvbp) {\n\t\tvisibility: hidden;\n\t}\n\t.tw-ad-gutter.svelte-j4rvbp + .tw-ad-cell:where(.svelte-j4rvbp) .tw-ad-title:where(.svelte-j4rvbp) {\n\t\tvisibility: visible;\n\t}\n\t.tw-ad-span.svelte-j4rvbp,\n\t.tw-ad-cont.svelte-j4rvbp,\n\t.tw-ad-arrow.svelte-j4rvbp {\n\t\tdisplay: none;\n\t}\n\t.tw-ad-arrow.svelte-j4rvbp {\n\t\tdisplay: none;\n\t\tcolor: inherit;\n\t\topacity: 0.75;\n\t\tflex-shrink: 0;\n\t}\n\t.tw-ad-arrow.svelte-j4rvbp { margin-left: auto; }\n\n\t.tw-ad-more.svelte-j4rvbp {\n\t\tappearance: none;\n\t\tbackground: none;\n\t\tborder: none;\n\t\tborder-radius: 0;\n\t\ttext-align: left;\n\t\talign-self: flex-start;\n\t\tfont: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\tpadding: 2px 6px;\n\t\tcursor: pointer;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t.tw-ad-more.svelte-j4rvbp:hover { color: var(--dt-text, rgba(15, 15, 15, 0.87)); }\n\t.tw-ad-more.svelte-j4rvbp:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);\n\t}\n\n\t/* ─── Grid body ──────────────────────────────────── */\n\t.tw-body.svelte-j4rvbp {\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t}\n\t.tw-body--unplaced.svelte-j4rvbp {\n\t\tvisibility: hidden;\n\t\tanimation: svelte-j4rvbp-tw-reveal 0s 1.5s forwards;\n\t}\n\t@keyframes svelte-j4rvbp-tw-reveal { to { visibility: visible; } }\n\n\t/* ─── Time gutter ────────────────────────────────── */\n\t.tw-gutter.svelte-j4rvbp {\n\t\tflex-shrink: 0;\n\t\tposition: sticky;\n\t\tleft: 0;\n\t\tz-index: 20;\n\t\tbackground: var(--dt-paper, none), var(--dt-bg, #efebe9);\n\t\tborder-right: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\n\t/* Timetable hour: the numeral carries the rank, the suffix sits raised\n\t and small beside it. */\n\t.tw-gutter-lb.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tleft: 6px;\n\t\tright: 0;\n\t\ttransform: translateY(-50%);\n\t\tdisplay: flex;\n\t\talign-items: flex-start;\n\t\tgap: 2px;\n\t\tfont: 400 26px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-stretch: 85%;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tletter-spacing: -0.02em;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t}\n\t.tw-gutter-lb.svelte-j4rvbp::after {\n\t\tcontent: '';\n\t\tflex: 1;\n\t\tmin-width: 6px;\n\t\theight: 1px;\n\t\tmargin-left: 5px;\n\t\talign-self: center;\n\t\tbackground: var(--dt-border-day, rgba(15, 15, 15, 0.3));\n\t}\n\t/* The first hour has no room above its line: it hangs below it, the\n\t tick still on the line. */\n\t.tw-gutter-lb.svelte-j4rvbp:first-child { transform: none; }\n\t.tw-gutter-lb.svelte-j4rvbp:first-child::after { align-self: flex-start; }\n\t.tw-gutter-lb--under.svelte-j4rvbp {\n\t\tvisibility: hidden;\n\t}\n\t.tw-gutter-lb.svelte-j4rvbp small:where(.svelte-j4rvbp) {\n\t\tfont-size: 10px;\n\t\tfont-weight: 500;\n\t\tline-height: 1;\n\t\tletter-spacing: 0;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\n\t/* The clock beside the now line, and the drag's edges while it lasts —\n\t both sit on the surface so they cover the hour label beneath. */\n\t.tw-gutter-now.svelte-j4rvbp,\n\t.tw-gutter-drag.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tright: 3px;\n\t\ttransform: translateY(-50%);\n\t\tpadding: 2px 4px;\n\t\tborder-radius: 0;\n\t\tbackground: var(--dt-surface, var(--dt-bg, #efebe9));\n\t\tfont: 500 11px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t\twhite-space: nowrap;\n\t\tz-index: 2;\n\t}\n\t/* The clock is a reversed plate on the accent, like a board's live time. */\n\t.tw-gutter-now.svelte-j4rvbp {\n\t\tbackground: var(--dt-accent, #1d4fd7);\n\t\tcolor: var(--dt-btn-text, #ffffff);\n\t}\n\n\t/* ─── Columns wrapper ────────────────────────────── */\n\t.tw-cols.svelte-j4rvbp {\n\t\tflex: 1;\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t\tmin-width: 0;\n\t}\n\n\t/* ─── Guide lines ────────────────────────────────── */\n\t.tw-lines.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tpointer-events: none;\n\t\t/* Above the columns' background washes, below blocked/events/now */\n\t\tz-index: 1;\n\t}\n\t.tw-line.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 1px;\n\t\tbackground: var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\t.tw-line--half.svelte-j4rvbp { opacity: 0.4; }\n\t.tw-now-week.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 0;\n\t\tborder-top: 2px solid var(--dt-accent, #1d4fd7);\n\t\topacity: 0.85;\n\t\ttransform: translateY(-1px);\n\t}\n\n\t/* ─── Day column ─────────────────────────────────── */\n\t.tw-col.svelte-j4rvbp {\n\t\tflex: 1 1 0;\n\t\tmin-width: var(--tw-col-min, 110px);\n\t\tposition: relative;\n\t\tborder-left: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tbox-sizing: border-box;\n\t}\n\t.tw-col.svelte-j4rvbp:focus-visible {\n\t\toutline: 2px solid var(--dt-text, #0f0f0f);\n\t\toutline-offset: -2px;\n\t}\n\t/* The gutter's right border already bounds the first column */\n\t.tw-lines.svelte-j4rvbp + .tw-col:where(.svelte-j4rvbp) { border-left: none; }\n\n\t/* --tw-col-wash: the column's ground, repeated under an event that the\n\t now line crosses (that event is opaque, so the line runs beneath it). */\n\t.tw-col.svelte-j4rvbp { background: var(--tw-col-wash, transparent); }\n\t.tw-col--today.svelte-j4rvbp { --tw-col-wash: var(--dt-today-bg, rgba(29, 79, 215, 0.04)); }\n\t/* Dim past days with a wash, never a subtree opacity (event contrast) */\n\t.tw-col--past.svelte-j4rvbp {\n\t\t--tw-col-wash: color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent);\n\t}\n\t/* What has already happened steps back; a cancelled block keeps its own look. */\n\t.tw-ev--past.svelte-j4rvbp:not(.tw-ev--cancelled) {\n\t\topacity: 0.78;\n\t}\n\t.tw-col--weekend.svelte-j4rvbp:not(.tw-col--today):not(.tw-col--past) {\n\t\t--tw-col-wash: var(--dt-weekend-bg, rgba(15, 15, 15, 0.012));\n\t}\n\t.tw-col--disabled.svelte-j4rvbp {\n\t\tbackground: repeating-linear-gradient(\n\t\t\t45deg,\n\t\t\ttransparent,\n\t\t\ttransparent 6px,\n\t\t\tvar(--dt-border, rgba(15, 15, 15, 0.08)) 6px,\n\t\t\tvar(--dt-border, rgba(15, 15, 15, 0.08)) 7px\n\t\t) !important;\n\t}\n\n\t/* ─── Blocked slot overlay ───────────────────────── */\n\t.tw-blocked.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tz-index: 2;\n\t\tbackground: repeating-linear-gradient(\n\t\t\t-45deg,\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent),\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 4px,\n\t\t\ttransparent 4px,\n\t\t\ttransparent 8px\n\t\t);\n\t\tpointer-events: none;\n\t\tdisplay: flex;\n\t\talign-items: flex-start;\n\t\tjustify-content: center;\n\t\toverflow: hidden;\n\t}\n\t.tw-blocked-lb.svelte-j4rvbp {\n\t\tfont: 500 11px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.04em;\n\t\twhite-space: nowrap;\n\t\tpadding-top: 4px;\n\t}\n\n\t/* ─── Now line ───────────────────────────────────── */\n\t/* Under the events (z 6): the one it crosses is opaque (.tw-ev--on-now),\n\t so the line never strikes through a title. The dot stays on top. */\n\t.tw-now.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 0;\n\t\tborder-top: 2px solid var(--dt-accent, #1d4fd7);\n\t\tz-index: 5;\n\t\tpointer-events: none;\n\t\ttransform: translateY(-1px);\n\t}\n\t.tw-now-dot.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tleft: -4px;\n\t\twidth: 8px;\n\t\theight: 8px;\n\t\tmargin-top: -4px;\n\t\tborder-radius: 50%;\n\t\tbackground: var(--dt-accent, #1d4fd7);\n\t\tz-index: 12;\n\t\tpointer-events: none;\n\t}\n\n\t/* ─── Events ─────────────────────────────────────── */\n\t.tw-ev.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tz-index: 6;\n\t\tborder-radius: 0;\n\t\tbackground: transparent;\n\t\t/* eventFill: a wash in the event's colour; hover/current set background-color under it */\n\t\t--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);\n\t\tbackground-image: linear-gradient(var(--_fill), var(--_fill));\n\t\tdisplay: flex;\n\t\talign-items: stretch;\n\t\toverflow: hidden;\n\t\tcursor: grab;\n\t\t/* Pointer drags move the event, never scroll the grid */\n\t\ttouch-action: none;\n\t\ttransition: box-shadow 120ms, background 120ms;\n\t\tbox-sizing: border-box;\n\t\tmin-height: 24px;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t.tw-ev.svelte-j4rvbp:hover {\n\t\tbackground-color: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t\tz-index: 8;\n\t}\n\t/* Short blocks keep duration-proportional height, but get a 44px\n\t transparent hit-slop so clicks/taps still land. */\n\t.tw-ev--short.svelte-j4rvbp { overflow: visible; }\n\t.tw-ev--short.svelte-j4rvbp::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\theight: 44px;\n\t}\n\t.tw-ev--selected.svelte-j4rvbp {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t\tz-index: 9;\n\t}\n\t.tw-ev--current.svelte-j4rvbp {\n\t\tbackground-color: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));\n\t}\n\t/* An event the now line crosses lays its column's ground (and its own\n\t wash) over the paper, so the line passes beneath its text. */\n\t.tw-ev.tw-ev--on-now.svelte-j4rvbp {\n\t\tbackground:\n\t\t\tlinear-gradient(var(--_fill), var(--_fill)),\n\t\t\tlinear-gradient(var(--tw-ev-wash, transparent), var(--tw-ev-wash, transparent)),\n\t\t\tlinear-gradient(var(--tw-col-wash, transparent), var(--tw-col-wash, transparent)),\n\t\t\tvar(--dt-paper, none),\n\t\t\tvar(--dt-bg, #efebe9);\n\t}\n\t.tw-ev--on-now.tw-ev--current.svelte-j4rvbp { --tw-ev-wash: var(--dt-accent-dim, rgba(29, 79, 215, 0.12)); }\n\t.tw-ev--on-now.svelte-j4rvbp:hover { --tw-ev-wash: var(--dt-hover, rgba(15, 15, 15, 0.04)); }\n\t.tw-ev--resizing.svelte-j4rvbp {\n\t\tz-index: 50;\n\t\tbox-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);\n\t\tcursor: ns-resize;\n\t}\n\t/* Origin of an in-flight move: still there, clearly no longer the subject. */\n\t.tw-ev--moving.svelte-j4rvbp {\n\t\topacity: 0.3;\n\t\tpointer-events: none;\n\t\tbox-shadow: none;\n\t}\n\t/* Status treatments: token-level dims + a non-opacity signal\n\t (strikethrough / border style) — consistent with the other views. */\n\t/* Printed states: a cancelled class is struck through and stays on the\n\t grid; a tentative one is set in grey with a dashed bar. */\n\t.tw-ev--cancelled.svelte-j4rvbp .tw-ev-title:where(.svelte-j4rvbp) {\n\t\ttext-decoration: line-through;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.tw-ev--cancelled.svelte-j4rvbp .tw-ev-stripe:where(.svelte-j4rvbp) { opacity: 0.45; /* decorative bar only */ }\n\t.tw-ev--tentative.svelte-j4rvbp .tw-ev-title:where(.svelte-j4rvbp),\n\t.tw-ev--full.svelte-j4rvbp .tw-ev-title:where(.svelte-j4rvbp) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.tw-ev--tentative.svelte-j4rvbp .tw-ev-stripe:where(.svelte-j4rvbp),\n\t.tw-ev--limited.svelte-j4rvbp .tw-ev-stripe:where(.svelte-j4rvbp) {\n\t\tbackground: repeating-linear-gradient(\n\t\t\t180deg,\n\t\t\tvar(--ev-color) 0 4px,\n\t\t\ttransparent 4px 7px\n\t\t);\n\t}\n\t.tw-ev--full.svelte-j4rvbp .tw-ev-stripe:where(.svelte-j4rvbp) { opacity: 0.45; }\n\t.tw-ev--readonly.svelte-j4rvbp { cursor: default; }\n\n\t.tw-ev-stripe.svelte-j4rvbp {\n\t\twidth: var(--dt-ev-bar, 3px);\n\t\tbackground: var(--ev-color);\n\t\tflex-shrink: 0;\n\t}\n\n\t.tw-ev-body.svelte-j4rvbp {\n\t\tcontainer: tw-ev / inline-size;\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t\tpadding: 3px 7px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 1px;\n\t\toverflow: hidden;\n\t}\n\t/* Compact (< ~35min at default zoom): one line, \"Title 9:00\". The title\n\t wins the room: the time wraps onto a second line, which the block\n\t clips, before the title is cut; a title too long alone ellipsizes. */\n\t.tw-ev--compact.svelte-j4rvbp .tw-ev-body:where(.svelte-j4rvbp) {\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t\talign-content: flex-start;\n\t\talign-items: baseline;\n\t\tgap: 24px 5px;\n\t\tpadding-top: 2px;\n\t\tpadding-bottom: 0;\n\t}\n\t.tw-ev--compact.svelte-j4rvbp .tw-ev-title:where(.svelte-j4rvbp) { flex: 0 1 auto; min-width: 0; }\n\t.tw-ev--compact.svelte-j4rvbp .tw-ev-end:where(.svelte-j4rvbp) { display: none; }\n\n\t/* Title first, time under it; both one size, rank by weight and ink. */\n\t.tw-ev-time.svelte-j4rvbp {\n\t\torder: 1;\n\t\tfont: 400 14px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t\tflex-shrink: 0;\n\t}\n\t/* A narrow overlap column keeps the start time whole and drops the end. */\n\t@container tw-ev (max-width: 104px) {\n\t\t.tw-ev-end.svelte-j4rvbp { display: none; }\n\t}\n\n\t.tw-ev-title.svelte-j4rvbp {\n\t\torder: 0;\n\t\tfont: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t/* A Latin title in an RTL calendar keeps its own direction, so the\n\t\t ellipsis cuts its end, not its start. */\n\t\tunicode-bidi: plaintext;\n\t\ttext-align: left;\n\t}\n\t/* …but it sits on the calendar's side, by the bar */\n\t.svelte-j4rvbp:is(.tw-ev-title:where(.svelte-j4rvbp), .tw-ev-loc:where(.svelte-j4rvbp)):dir(rtl) { text-align: right; }\n\t/* A block tall enough for two title lines over the time wraps the title\n\t to two. The parts flow in a wrapping column, so a room that no longer\n\t fits under them moves into a second column the block clips: it gives\n\t way whole, before the title is cut, instead of being sliced. */\n\t.tw-ev--tall.svelte-j4rvbp .tw-ev-body:where(.svelte-j4rvbp) {\n\t\tflex-wrap: wrap;\n\t\tcolumn-gap: 16px;\n\t}\n\t.tw-ev--tall.svelte-j4rvbp :is(.tw-ev-title:where(.svelte-j4rvbp), .tw-ev-time:where(.svelte-j4rvbp), .tw-ev-loc:where(.svelte-j4rvbp)) { width: 100%; }\n\t.tw-ev--tall.svelte-j4rvbp .tw-ev-title:where(.svelte-j4rvbp) {\n\t\tdisplay: -webkit-box;\n\t\t-webkit-box-orient: vertical;\n\t\t-webkit-line-clamp: 2;\n\t\tline-clamp: 2;\n\t\twhite-space: normal;\n\t\toverflow-wrap: break-word; /* a word wider than an overlap lane breaks, not clips */\n\t\thyphens: auto; /* …and hyphenates where the host page declares a lang */\n\t}\n\n\t.tw-ev-loc.svelte-j4rvbp {\n\t\torder: 2;\n\t\tfont: 400 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tunicode-bidi: plaintext;\n\t\ttext-align: left;\n\t}\n\n\t.tw-ev-live.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\ttop: 4px;\n\t\tright: 4px;\n\t\twidth: 7px;\n\t\theight: 7px;\n\t\tborder-radius: 50%;\n\t\tbackground: var(--ev-color, var(--dt-accent));\n\t\tanimation: svelte-j4rvbp-tw-pulse 2s ease-in-out infinite;\n\t}\n\t@keyframes svelte-j4rvbp-tw-pulse {\n\t\t0%, 100% { opacity: 1; }\n\t\t50% { opacity: 0.4; }\n\t}\n\n\t/* ─── Resize handles ─────────────────────────────── */\n\t/* Resizing lives only on the centered grip column. The old full-width\n\t edge bands (12–20px of inward slop each) covered short events\n\t entirely — min block height is 24px, so every grab meant to move\n\t started a resize instead. The grip is the visible affordance;\n\t everything else on the block drags to move. */\n\t.tw-ev-handle.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t\twidth: 44px;\n\t\theight: 8px;\n\t\tz-index: 2;\n\t\tcursor: ns-resize;\n\t\ttouch-action: none;\n\t}\n\t.tw-ev-handle--start.svelte-j4rvbp { top: 0; }\n\t.tw-ev-handle--end.svelte-j4rvbp { bottom: 0; }\n\t/* Hit-slop: ≥20px effective, extending inward so overflow clipping\n\t can't cut it off. */\n\t.tw-ev-handle.svelte-j4rvbp::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 20px;\n\t}\n\t.tw-ev-handle--start.svelte-j4rvbp::before { top: 0; }\n\t.tw-ev-handle--end.svelte-j4rvbp::before { bottom: 0; }\n\t/* Short events: shrink the slop so a move-grab area survives */\n\t.tw-ev--short.svelte-j4rvbp .tw-ev-handle:where(.svelte-j4rvbp)::before { height: 12px; }\n\t.tw-ev-handle.svelte-j4rvbp::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t\twidth: 20px;\n\t\theight: 3px;\n\t\tborder-radius: 0;\n\t\tbackground: var(--ev-color);\n\t\topacity: 0;\n\t\ttransition: opacity 120ms;\n\t}\n\t.tw-ev-handle--start.svelte-j4rvbp::after { top: 1px; }\n\t.tw-ev-handle--end.svelte-j4rvbp::after { bottom: 1px; }\n\t.tw-ev.svelte-j4rvbp:hover .tw-ev-handle:where(.svelte-j4rvbp)::after,\n\t.tw-ev.svelte-j4rvbp:focus-within .tw-ev-handle:where(.svelte-j4rvbp)::after,\n\t.tw-ev.svelte-j4rvbp:focus-visible .tw-ev-handle:where(.svelte-j4rvbp)::after,\n\t.tw-ev--resizing.svelte-j4rvbp .tw-ev-handle:where(.svelte-j4rvbp)::after,\n\t.tw-ev--selected.svelte-j4rvbp .tw-ev-handle:where(.svelte-j4rvbp)::after { opacity: 0.55; }\n\t/* Pointer on the grip column itself: brighten so the hit zone reads */\n\t.tw-ev-handle.svelte-j4rvbp:hover::after { opacity: 0.9; }\n\t/* Coarse pointers can't hover — show the grips persistently */\n\t@media (hover: none) {\n\t\t.tw-ev-handle.svelte-j4rvbp::after { opacity: 0.55; }\n\t}\n\n\t/* ─── Move / create ghost ────────────────────────── */\n\t.tw-ghost.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tleft: 1px;\n\t\tright: 3px;\n\t\tz-index: 40;\n\t\tborder-radius: 0;\n\t\tbackground: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, var(--dt-bg, #efebe9)));\n\t\toutline: 1px solid color-mix(in srgb, var(--ev-color) 45%, transparent);\n\t\tbox-shadow: 0 6px 18px color-mix(in srgb, var(--ev-color) 24%, rgba(0, 0, 0, 0.22));\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 1px;\n\t\tpadding: 3px 6px;\n\t\toverflow: hidden;\n\t\tpointer-events: none;\n\t\tcursor: grabbing;\n\t\tbox-sizing: border-box;\n\t}\n\t.tw-ghost--create.svelte-j4rvbp {\n\t\tbackground: color-mix(in srgb, var(--ev-color) 12%, transparent);\n\t\toutline: 1px dashed color-mix(in srgb, var(--ev-color) 60%, transparent);\n\t\tbox-shadow: none;\n\t}\n\t.tw-ghost-time.svelte-j4rvbp {\n\t\tfont: 500 12.5px/1.15 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--ev-color, var(--dt-accent, #1d4fd7));\n\t\twhite-space: nowrap;\n\t}\n\t.tw-ghost-title.svelte-j4rvbp {\n\t\tfont: 500 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t/* ─── Empty overlay ──────────────────────────────── */\n\t.tw-empty.svelte-j4rvbp {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpointer-events: none;\n\t\tz-index: 4;\n\t}\n\n\t/* ─── Focus-visible ──────────────────────────────── */\n\t/* box-shadow instead of outline: outlines get clipped by the\n\t overflow: hidden scroll container. */\n\t.tw-ev.svelte-j4rvbp:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t\tz-index: 9;\n\t}\n\n\t/* ─── Reduced motion ─────────────────────────────── */\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.tw-ev.svelte-j4rvbp,\n\t\t.tw-ad.svelte-j4rvbp,\n\t\t.tw-ev-handle.svelte-j4rvbp::after {\n\t\t\ttransition: none;\n\t\t}\n\t\t.tw-ev-live.svelte-j4rvbp { animation: none; }\n\t}\n\n\t/* ─── Container ──────────────────────────────────── */\n\t.wg.svelte-l8xuza {\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tuser-select: none;\n\t\tfont-variant-numeric: tabular-nums;\n\t}\n\t.wg--auto.svelte-l8xuza { overflow: visible; }\n\n\t/* ─── Scrollable body ────────────────────────────── */\n\t.wg-body.svelte-l8xuza {\n\t\tflex: 1;\n\t\toverflow-y: auto;\n\t\t/* The prepend is compensated by hand (handleUserScroll); the browser's\n\t\t anchoring on top of it moved the content twice. */\n\t\toverflow-anchor: none;\n\t\t/* Seven columns scroll horizontally at narrow widths instead of squishing */\n\t\toverflow-x: auto;\n\t\tbox-sizing: border-box;\n\t\tscrollbar-width: thin;\n\t\tscrollbar-color: var(--dt-scrollbar, rgba(15, 15, 15, 0.1)) transparent;\n\t}\n\t.wg--auto.svelte-l8xuza .wg-body:where(.svelte-l8xuza) { overflow-y: visible; }\n\n\t.wg-body.svelte-l8xuza::-webkit-scrollbar { width: 4px; }\n\t.wg-body.svelte-l8xuza::-webkit-scrollbar-thumb {\n\t\tbackground: var(--dt-scrollbar, rgba(15, 15, 15, 0.1));\n\t\tborder-radius: 0;\n\t}\n\t.wg-body.svelte-l8xuza::-webkit-scrollbar-track { background: transparent; }\n\n\t.wg-probe.svelte-l8xuza {\n\t\tposition: absolute;\n\t\tvisibility: hidden;\n\t\theight: 0;\n\t\toverflow: hidden;\n\t\tpointer-events: none;\n\t}\n\n\t/* ─── Week row ───────────────────────────────────── */\n\t.wg-week.svelte-l8xuza {\n\t\tdisplay: flex;\n\t\tborder-radius: 0;\n\t\tmargin: var(--wg-row-margin, 12px) 8px;\n\t\tborder: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\toverflow: hidden;\n\t}\n\n\t.wg-week--current.svelte-l8xuza {\n\t\tbackground: var(--dt-today-bg, rgba(29, 79, 215, 0.04));\n\t\t/* The current row's frame is a day rule, not the accent */\n\t\tborder-color: var(--dt-border-day, rgba(15, 15, 15, 0.3));\n\t}\n\n\t/* ─── Week body ──────────────────────────────────── */\n\t.wg-week-body.svelte-l8xuza {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t/* ─── Day columns ────────────────────────────────── */\n\t.wg-days.svelte-l8xuza {\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t}\n\n\t.wg-cell.svelte-l8xuza {\n\t\tflex: 1;\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmin-width: 90px;\n\t\tbox-sizing: border-box;\n\t\tpadding: 4px 4px 8px;\n\t\tborder-right: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tcursor: pointer;\n\t\ttransition: background 0.15s;\n\t}\n\n\t.wg-cell.svelte-l8xuza:last-child { border-right: none; }\n\t/* The inset is on the contents, not the cell's padding: flex adds padding\n\t to a basis-0 cell, and that one column would come out wider. */\n\t.wg-cell--month.svelte-l8xuza .wg-cell-events:where(.svelte-l8xuza),\n\t.wg-cell--month.svelte-l8xuza .wg-allday:where(.svelte-l8xuza) { margin-left: var(--wg-month-inset, 22px); }\n\n\t/* ─── Month labels (vertical, read bottom-to-top) ─── */\n\t.wg-month.svelte-l8xuza {\n\t\tflex: 0 0 22px;\n\t\twriting-mode: vertical-rl;\n\t\ttransform: rotate(180deg);\n\t\ttext-align: end; /* the rotation puts the end at the top */\n\t\tpadding: 6px 0;\n\t\tfont: 500 12px / 22px var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\tcolor: var(--dt-text-3, rgba(15, 15, 15, 0.38));\n\t}\n\t.wg-week--current.svelte-l8xuza .wg-month:where(.svelte-l8xuza),\n\t.wg-month--start.svelte-l8xuza {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\t.wg-month--inset.svelte-l8xuza {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 2px;\n\t\tpointer-events: none;\n\t}\n\t.wg-cell.svelte-l8xuza:hover { background: var(--dt-hover, rgba(15, 15, 15, 0.015)); }\n\n\t.wg-cell--today.svelte-l8xuza { background: var(--dt-today-bg, rgba(29, 79, 215, 0.04)); }\n\t.wg-cell--drop.svelte-l8xuza {\n\t\tbackground: var(--dt-accent-dim, rgba(29, 79, 215, 0.12)) !important;\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\t.wg-cell--today.svelte-l8xuza:hover { background: var(--dt-hover, rgba(15, 15, 15, 0.04)); }\n\n\t/* Non-current weeks sit on the same paper; only the header ink softens,\n\t and past events print a shade lighter. */\n\t.wg-week.svelte-l8xuza:not(.wg-week--current) .wg-day-num:where(.svelte-l8xuza) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.wg-cell--past.svelte-l8xuza .wg-ev:where(.svelte-l8xuza):not(.wg-ev--cancelled) {\n\t\topacity: 0.78;\n\t}\n\n\t/* equalDays: when no cells are marked past, all are full brightness */\n\n\t.wg-cell--weekend.svelte-l8xuza { background: var(--dt-weekend-bg, rgba(15, 15, 15, 0.012)); }\n\n\t/* ─── Disabled cell ──────────────────────────────── */\n\t.wg-cell--disabled.svelte-l8xuza {\n\t\tbackground: repeating-linear-gradient(\n\t\t\t45deg,\n\t\t\ttransparent,\n\t\t\ttransparent 6px,\n\t\t\tvar(--dt-border, rgba(15, 15, 15, 0.08)) 6px,\n\t\t\tvar(--dt-border, rgba(15, 15, 15, 0.08)) 7px\n\t\t) !important;\n\t}\n\n\t/* ─── Blocked slot indicator ─────────────────────── */\n\t/* A band on the time axis, behind the chips */\n\t.wg-blocked.svelte-l8xuza {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbox-sizing: border-box;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\talign-items: flex-start;\n\t\tgap: 3px;\n\t\tpadding: 2px 4px;\n\t\tborder-radius: 0;\n\t\tbackground: repeating-linear-gradient(\n\t\t\t-45deg,\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent),\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 3px,\n\t\t\ttransparent 3px,\n\t\t\ttransparent 6px\n\t\t);\n\t}\n\n\t.wg-blocked-label.svelte-l8xuza {\n\t\tfont: 500 11px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.04em;\n\t\twhite-space: nowrap;\n\t}\n\n\t/* ─── Custom day header ──────────────────────────── */\n\t.wg-cell-custom-header.svelte-l8xuza {\n\t\tpadding: 0 4px 2px;\n\t}\n\n\t/* ─── Cell header (day label top-right) ──────────── */\n\t.wg-cell-hd.svelte-l8xuza {\n\t\talign-self: flex-end;\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 4px;\n\t\tpadding: 3px 7px;\n\t\tmargin: 1px 0 2px;\n\t\tborder-radius: 0;\n\t}\n\n\t.wg-day-wd.svelte-l8xuza {\n\t\tfont: 500 12px / 1 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--dt-text-3, rgba(15, 15, 15, 0.38));\n\t}\n\n\t.wg-week--current.svelte-l8xuza .wg-day-wd:where(.svelte-l8xuza) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\n\t.wg-day-num.svelte-l8xuza {\n\t\tfont: 400 15px / 1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\n\t.wg-week--current.svelte-l8xuza .wg-day-num:where(.svelte-l8xuza) {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\n\t/* Today's pill — after the week rules above, which it must beat */\n\t.wg-cell-hd--today.svelte-l8xuza .wg-day-wd:where(.svelte-l8xuza),\n\t.wg-cell-hd--today.svelte-l8xuza .wg-day-num:where(.svelte-l8xuza) {\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t}\n\t.wg-cell-hd--today.svelte-l8xuza .wg-day-num:where(.svelte-l8xuza) {\n\t\tbox-shadow: inset 0 -2px 0 var(--dt-accent, #1d4fd7);\n\t\tpadding-bottom: 2px;\n\t}\n\n\t/* ─── All-day / multi-day events ─────────────────── */\n\t.wg-allday.svelte-l8xuza {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--wg-chip-gap, 3px);\n\t\tmargin-top: var(--wg-chip-gap, 3px);\n\t\tflex-shrink: 0;\n\t}\n\n\t.wg-ad.svelte-l8xuza {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 3px;\n\t\tpadding: 0 5px;\n\t\theight: var(--wg-chip-h, 22px);\n\t\tbox-sizing: border-box;\n\t\tflex-shrink: 0;\n\t\tborder-radius: 0;\n\t\tborder: none;\n\t\tbackground: var(--ev-color);\n\t\tcolor: var(--dt-btn-text, #fff);\n\t\tcursor: pointer;\n\t\toverflow: hidden;\n\t\ttransition: filter 0.12s;\n\t\tmin-height: 18px;\n\t}\n\n\t.wg-ad--drag-preview.svelte-l8xuza {\n\t\tposition: relative;\n\t\tz-index: 8;\n\t\topacity: 0.95;\n\t\tpointer-events: none;\n\t\tcursor: grabbing;\n\t}\n\n\t.wg-ad.svelte-l8xuza:hover {\n\t\tfilter: brightness(1.08);\n\t}\n\n\t.wg-ad--selected.svelte-l8xuza {\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);\n\t}\n\n\t.wg-ad.svelte-l8xuza:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\n\t.wg-ad-title.svelte-l8xuza {\n\t\tfont: 500 13.5px / 1.1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: inherit;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tflex: 1;\n\t}\n\n\t.wg-ad-cont.svelte-l8xuza {\n\t\tdisplay: flex;\n\t\tcolor: inherit;\n\t\tflex-shrink: 0;\n\t}\n\n\t.wg-ad-arrow.svelte-l8xuza {\n\t\tdisplay: flex;\n\t\tcolor: inherit;\n\t\tflex-shrink: 0;\n\t\tmargin-left: auto;\n\t}\n\n\t/* ─── Events ─────────────────────────────────────── */\n\t/* The day's time axis: chips carry their own margin-top (chipTops), and\n\t the area fills the cell, so the all-day bars line up at the bottom. */\n\t.wg-cell-events.svelte-l8xuza {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tflex: 1 0 auto;\n\t\tmin-height: var(--wg-time-h, 100px);\n\t}\n\n\t.wg-now.svelte-l8xuza {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tz-index: 2;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 3px;\n\t\ttransform: translateY(-50%);\n\t\tpointer-events: none;\n\t}\n\t.wg-now.svelte-l8xuza::after {\n\t\tcontent: '';\n\t\tflex: 1;\n\t\tborder-top: 2px solid var(--dt-accent, #1d4fd7);\n\t}\n\t.wg-now-time.svelte-l8xuza {\n\t\tfont: 500 11px / 1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tpadding: 2px 4px;\n\t\tborder-radius: 0;\n\t\tbackground: var(--dt-accent, #1d4fd7);\n\t\tcolor: var(--dt-btn-text, #fff);\n\t}\n\t/* Where a dragged-in class would land: the now-line's shape, dashed */\n\t.wg-drop.svelte-l8xuza {\n\t\tz-index: 3;\n\t}\n\t.wg-drop.svelte-l8xuza::after {\n\t\tborder-top-style: dashed;\n\t}\n\n\t.wg-ev.svelte-l8xuza {\n\t\tposition: relative; /* above the blocked bands */\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-wrap: nowrap;\n\t\tgap: 0 5px;\n\t\theight: var(--wg-chip-h, 22px);\n\t\tbox-sizing: border-box;\n\t\tflex-shrink: 0;\n\t\t/* 3px bar + 6px, and 3px on the right: 12px in all (CHIP_PAD_X) */\n\t\tpadding: 0 3px 0 9px;\n\t\tborder-radius: 0;\n\t\tbackground: transparent;\n\t\t/* eventFill: a wash in the event's colour; hover/current set background-color under it */\n\t\t--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);\n\t\tbackground-image: linear-gradient(var(--_fill), var(--_fill));\n\t\tcursor: pointer;\n\t\toverflow: hidden;\n\t\ttransition: background 0.12s, box-shadow 0.12s;\n\t}\n\t/* The start bar on the leading edge */\n\t.wg-ev.svelte-l8xuza::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tinset: 0 auto 0 0;\n\t\twidth: var(--dt-ev-bar, 3px);\n\t\tbackground: var(--ev-color);\n\t}\n\n\t.wg-ev.svelte-l8xuza:hover {\n\t\tbackground-color: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\n\t.wg-ev--drag-preview.svelte-l8xuza {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tz-index: 8;\n\t\topacity: 0.95;\n\t\tpointer-events: none;\n\t\tbackground-color: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t\tcursor: grabbing;\n\t}\n\n\t.wg-ev--selected.svelte-l8xuza {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t}\n\n\t.wg-ev--current.svelte-l8xuza {\n\t\tbackground-color: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));\n\t}\n\n\t/* Printed states: struck through, grey, or a dashed bar — never a tint */\n\t.wg-ev--cancelled.svelte-l8xuza .wg-ev-title:where(.svelte-l8xuza) {\n\t\ttext-decoration: line-through;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.wg-ev--cancelled.svelte-l8xuza::before,\n\t.wg-ev--full.svelte-l8xuza::before {\n\t\topacity: 0.45;\n\t}\n\t.wg-ev--tentative.svelte-l8xuza .wg-ev-title:where(.svelte-l8xuza),\n\t.wg-ev--full.svelte-l8xuza .wg-ev-title:where(.svelte-l8xuza) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.wg-ev--tentative.svelte-l8xuza::before,\n\t.wg-ev--limited.svelte-l8xuza::before {\n\t\tbackground: repeating-linear-gradient(180deg, var(--ev-color) 0 4px, transparent 4px 7px);\n\t}\n\t.wg-ev--readonly.svelte-l8xuza {\n\t\tcursor: default;\n\t}\n\n\t.wg-ev-time.svelte-l8xuza {\n\t\tfont: 400 14px / 1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tflex-shrink: 0;\n\t\twhite-space: nowrap;\n\t}\n\n\t.wg-ev-title.svelte-l8xuza {\n\t\tfont: 500 15px / 1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tmin-width: 0;\n\t\tflex: 1 1 auto;\n\t\t/* A Latin title in RTL keeps its own direction: the ellipsis cuts its end */\n\t\tunicode-bidi: plaintext;\n\t\ttext-align: left;\n\t}\n\t/* …but it sits on the calendar's side, by the bar */\n\t.wg-ev-title.svelte-l8xuza:dir(rtl) { text-align: right; }\n\n\t.wg-ev-loc.svelte-l8xuza {\n\t\tfont: 400 12.5px / 1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t\tflex-shrink: 0; /* shown only when measured to fit — never squeezed */\n\t}\n\n\t.wg-ev-more.svelte-l8xuza {\n\t\t/* Real button — reset chrome, keep the quiet-link look */\n\t\tappearance: none;\n\t\tbackground: none;\n\t\tborder: none;\n\t\tborder-radius: 0;\n\t\ttext-align: left;\n\t\talign-self: flex-start;\n\t\tfont: 400 12.5px / 1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\tpadding: 2px 8px;\n\t\tcursor: pointer;\n\t\tflex-shrink: 0;\n\t}\n\n\t.wg-ev-more.svelte-l8xuza:hover {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\n\t.wg-ev-more.svelte-l8xuza:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);\n\t}\n\n\t/* ─── Focus-visible ──────────────────────────────── */\n\t.wg-cell.svelte-l8xuza:focus-visible {\n\t\toutline: 2px solid var(--dt-text, #0f0f0f);\n\t\toutline-offset: -2px;\n\t}\n\n\t.wg-ev.svelte-l8xuza:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\n\t.wg-ev--dragging.svelte-l8xuza {\n\t\tcursor: grabbing;\n\t\tbackground-color: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t}\n\n\t/* ═══ Container ═══ */\n\t.ag.svelte-n8lbn1 {\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tmin-width: 0;\n\t\tbox-sizing: border-box;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tfont-family: var(--dt-sans, system-ui, sans-serif);\n\t}\n\n\t.ag--auto.svelte-n8lbn1 { height: auto; overflow: visible; }\n\n\t/* Button UA reset for interactive cards/rows (real <button>s for a11y).\n\t Placed first so later component rules override it.\n\t user-select is scoped here (not on .ag) so event text stays copyable. */\n\t.ag-card.svelte-n8lbn1,\n\t.ag-allday-chip.svelte-n8lbn1,\n\t.ag-compact-row.svelte-n8lbn1,\n\t.ag-q-now.svelte-n8lbn1,\n\t.ag-q-done-item.svelte-n8lbn1,\n\t.ag-log-row.svelte-n8lbn1,\n\t.ag-q-done-toggle.svelte-n8lbn1 {\n\t\tfont: inherit;\n\t\tcolor: inherit;\n\t\ttext-align: left;\n\t\tbackground: none;\n\t\tborder: none;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\tbox-sizing: border-box;\n\t\tuser-select: none;\n\t}\n\n\t.ag--disabled.svelte-n8lbn1 {\n\t\tbackground-image: repeating-linear-gradient(\n\t\t\t135deg,\n\t\t\ttransparent,\n\t\t\ttransparent 6px,\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 6px,\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 12px\n\t\t);\n\t}\n\n\t/* ═══ Body ═══ */\n\t.ag-body.svelte-n8lbn1 {\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\tmin-width: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\toverscroll-behavior: contain;\n\t\tpadding-top: 8px;\n\t\tscrollbar-width: thin;\n\t\tscrollbar-color: var(--dt-border) transparent;\n\t}\n\n\t/* ═══ In-view date header ═══ */\n\t.ag-day-head.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 8px;\n\t\tpadding: 0 16px 6px;\n\t\tflex-shrink: 0;\n\t}\n\t/* The planner's header type: the day number is the typography (40/400,\n\t narrowed), the weekday a tracked 12/500 label; today takes the accent. */\n\t.ag-day-head-num.svelte-n8lbn1 {\n\t\tfont: 400 40px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-stretch: 90%;\n\t\tletter-spacing: -0.02em;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tmargin-inline-end: 4px;\n\t}\n\t.ag-day-head-badge.svelte-n8lbn1,\n\t.ag-day-head-name.svelte-n8lbn1 {\n\t\tfont: 500 12px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t.ag-day-head--today.svelte-n8lbn1 .ag-day-head-num:where(.svelte-n8lbn1),\n\t.ag-day-head--today.svelte-n8lbn1 .ag-day-head-name:where(.svelte-n8lbn1),\n\t.ag-day-head-badge.svelte-n8lbn1 {\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-day-head.svelte-n8lbn1 .ag-day-head-badge--muted:where(.svelte-n8lbn1) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t.ag-day-head-date.svelte-n8lbn1 {\n\t\tfont: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t.ag--auto.svelte-n8lbn1 .ag-body:where(.svelte-n8lbn1) { overflow-y: visible; min-height: auto; }\n\t.ag-body.svelte-n8lbn1::-webkit-scrollbar {\n\t\twidth: 4px;\n\t}\n\t.ag-body.svelte-n8lbn1::-webkit-scrollbar-thumb {\n\t\tbackground: var(--dt-border);\n\t\tborder-radius: 0;\n\t}\n\n\t/* ═══ All-day strip ═══ */\n\t.ag-allday.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t\tpadding: 6px 16px;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\t.ag-allday-label.svelte-n8lbn1 {\n\t\tfont: 500 12px/1 var(--dt-sans, system-ui, sans-serif);\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.08em;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\twhite-space: nowrap;\n\t\tflex-shrink: 0;\n\t}\n\t.ag-allday-items.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 6px;\n\t}\n\t/* An all-day event is a solid band in its colour — no tint, no dot, no pill. */\n\t.ag-allday-chip.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 5px;\n\t\tpadding: 4px 10px;\n\t\tborder-radius: 0;\n\t\tborder: none;\n\t\tbackground: var(--ev-color);\n\t\tcolor: var(--dt-btn-text, #fff);\n\t\tcursor: pointer;\n\t}\n\t@media (pointer: coarse) {\n\t\t.ag-allday-chip.svelte-n8lbn1 {\n\t\t\tmin-height: 44px;\n\t\t}\n\t\t.ag-q-done-item.svelte-n8lbn1 {\n\t\t\tmin-height: 44px;\n\t\t\talign-items: center;\n\t\t}\n\t}\n\t.ag-allday-chip.svelte-n8lbn1:hover,\n\t.ag-allday-chip.svelte-n8lbn1:active {\n\t\tfilter: brightness(1.08);\n\t}\n\t.ag-allday-chip.svelte-n8lbn1:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-allday-chip--selected.svelte-n8lbn1 {\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);\n\t}\n\t.ag-allday-dot.svelte-n8lbn1 {\n\t\tdisplay: none;\n\t}\n\t.ag-allday-title.svelte-n8lbn1 {\n\t\tfont: 500 13.5px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: inherit;\n\t\twhite-space: nowrap;\n\t}\n\n\t/* ═══ Shared: event card ═══ */\n\t/* Paper, not a tinted card: a 3px start bar in the event colour, a\n\t hairline rule beneath, ink text. Hover is a wash, selection a ring. */\n\t.ag-card.svelte-n8lbn1 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: stretch;\n\t\tborder-radius: 0;\n\t\tbackground: transparent;\n\t\t/* eventFill: a wash in the event's colour; hover/current set background-color under it */\n\t\t--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);\n\t\tbackground-image: linear-gradient(var(--_fill), var(--_fill));\n\t\tborder: none;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));\n\t\toverflow: hidden;\n\t\tcursor: pointer;\n\t\ttransition: background 150ms, box-shadow 150ms;\n\t}\n\t.ag-card.svelte-n8lbn1::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: var(--dt-ev-bar, 3px);\n\t\tbackground: var(--ev-color);\n\t}\n\t.ag-card.svelte-n8lbn1:hover,\n\t.ag-card.svelte-n8lbn1:active {\n\t\tbackground-color: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t.ag-card.svelte-n8lbn1:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-card--selected.svelte-n8lbn1 {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t}\n\t.ag-card--cancelled.svelte-n8lbn1 .ag-card-title:where(.svelte-n8lbn1) {\n\t\ttext-decoration: line-through;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.ag-card--cancelled.svelte-n8lbn1::before,\n\t.ag-card--full.svelte-n8lbn1::before {\n\t\topacity: 0.45;\n\t}\n\t.ag-card--tentative.svelte-n8lbn1 .ag-card-title:where(.svelte-n8lbn1),\n\t.ag-card--limited.svelte-n8lbn1 .ag-card-title:where(.svelte-n8lbn1),\n\t.ag-card--full.svelte-n8lbn1 .ag-card-title:where(.svelte-n8lbn1) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.ag-card--tentative.svelte-n8lbn1::before,\n\t.ag-card--limited.svelte-n8lbn1::before {\n\t\tbackground: repeating-linear-gradient(180deg, var(--ev-color) 0 4px, transparent 4px 7px);\n\t}\n\t/* Planner scale: title 15/500, time 14 tabular in ink, meta 12.5 in ink-2.\n\t The body keeps a reading measure so meta never drifts across a wide row. */\n\t.ag-card-body.svelte-n8lbn1 {\n\t\tpadding: 10px 12px 10px 15px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 3px;\n\t\tmin-width: 0;\n\t\tmax-width: 44rem;\n\t\tflex: 1;\n\t}\n\t.ag-card-top.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 12px;\n\t\tmin-width: 0;\n\t}\n\t.ag-card-title.svelte-n8lbn1 {\n\t\tfont: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tword-break: break-word;\n\t\tmin-width: 0;\n\t}\n\t.ag-card-meta.svelte-n8lbn1 {\n\t\tfont: 400 14px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\t.ag-card-dur.svelte-n8lbn1,\n\t.ag-card-eta.svelte-n8lbn1,\n\t.ag-card-sub.svelte-n8lbn1,\n\t.ag-card-loc.svelte-n8lbn1,\n\t.ag-card-tag.svelte-n8lbn1 {\n\t\tfont: 400 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t.ag-card-dur.svelte-n8lbn1 {\n\t\tmargin-left: 8px;\n\t}\n\t.ag-card-tags.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\tcolumn-gap: 10px;\n\t\trow-gap: 2px;\n\t\tflex-wrap: wrap;\n\t}\n\t.ag-card-tag.svelte-n8lbn1 {\n\t\twhite-space: nowrap;\n\t}\n\n\t/* ── Queue card variant ── */\n\t.ag-card--q.svelte-n8lbn1 {\n\t\ttransition: background 150ms, box-shadow 150ms;\n\t}\n\t.ag-compact-row--queue.svelte-n8lbn1 {\n\t\tmargin: 0;\n\t}\n\t.ag-card-eta.svelte-n8lbn1 {\n\t\tflex-shrink: 0;\n\t\twhite-space: nowrap;\n\t\tfont-variant-numeric: tabular-nums;\n\t}\n\t/* The next one up: its countdown in ink. Size stays on the scale — the\n\t happening-now item is the largest thing in the queue. */\n\t.ag-card--hero.svelte-n8lbn1 .ag-card-eta:where(.svelte-n8lbn1) {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\n\t/* ── Plan card variant ── */\n\n\t.ag-card--plan.svelte-n8lbn1 .ag-card-body:where(.svelte-n8lbn1) {\n\t\tpadding: 12px 14px;\n\t}\n\t.ag-card-order.svelte-n8lbn1 {\n\t\tfont: 400 14px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tmin-width: 18px;\n\t\tflex-shrink: 0;\n\t}\n\t.ag-card--plan.svelte-n8lbn1 .ag-card-top:where(.svelte-n8lbn1) {\n\t\tgap: 10px;\n\t}\n\t/* Everything under the title aligns past the order number — the\n\t subtitle, location, time and tags share one left edge. */\n\t.ag-card--plan.svelte-n8lbn1 .ag-card-sub:where(.svelte-n8lbn1),\n\t.ag-card--plan.svelte-n8lbn1 .ag-card-loc:where(.svelte-n8lbn1),\n\t.ag-card--plan.svelte-n8lbn1 .ag-card-meta:where(.svelte-n8lbn1),\n\t.ag-card--plan.svelte-n8lbn1 .ag-card-tags:where(.svelte-n8lbn1) {\n\t\tpadding-left: 28px;\n\t}\n\n\t/* ═══ The Queue: 2-column grid ═══ */\n\t.ag-q.svelte-n8lbn1 {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr 1.8fr;\n\t\tgap: 0;\n\t\tflex: 1;\n\t\tpadding: 8px 0 10px;\n\t\tmin-height: 0;\n\t}\n\t/* Mobile: one column in reading order — what's happening now first, then\n\t \"Up next\", then the finished ones. The status column dissolves\n\t (display: contents) so its Now and Done parts can sit either side of\n\t the queue. */\n\t/* Horizontal swipes are ours (day navigation); the browser keeps\n\t vertical scrolling and pinch-zoom. */\n\t.ag--mobile.svelte-n8lbn1,\n\t.ag--mobile.svelte-n8lbn1 .ag-body:where(.svelte-n8lbn1) {\n\t\ttouch-action: pan-y pinch-zoom;\n\t}\n\t.ag--mobile.svelte-n8lbn1 .ag-q:where(.svelte-n8lbn1) {\n\t\tgrid-template-columns: 1fr;\n\t\tmin-height: auto;\n\t\tpadding-inline: 16px;\n\t}\n\t.ag--mobile.svelte-n8lbn1 .ag-q-status:where(.svelte-n8lbn1) {\n\t\tdisplay: contents;\n\t}\n\t.ag--mobile.svelte-n8lbn1 .ag-q-queue:where(.svelte-n8lbn1) {\n\t\torder: 2;\n\t\toverflow-y: visible;\n\t\tpadding: 12px 0 16px;\n\t}\n\t.ag--mobile.svelte-n8lbn1 .ag-q-done-section:where(.svelte-n8lbn1) {\n\t\torder: 3;\n\t}\n\t/* Mobile: larger touch targets; type is already on the planner scale. */\n\t.ag--mobile.svelte-n8lbn1 .ag-card-body:where(.svelte-n8lbn1) {\n\t\tpadding: 14px 16px;\n\t}\n\t.ag--mobile.svelte-n8lbn1 .ag-log-row:where(.svelte-n8lbn1) {\n\t\tpadding: 12px 0;\n\t}\n\t.ag--mobile.svelte-n8lbn1 .ag-q-done-item:where(.svelte-n8lbn1) {\n\t\tpadding: 8px 0;\n\t}\n\t/* Section labels set like the planner's weekday: 12/500, tracked, ink-2. */\n\t.ag-q-label.svelte-n8lbn1 {\n\t\tfont: 500 12px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tmargin-bottom: 8px;\n\t\tpadding: 0 12px;\n\t}\n\t.ag-q-empty.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tflex: 1;\n\t\tfont-size: 14px;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\n\t/* ── NOW column (includes Done above) ── */\n\t.ag-q-status.svelte-n8lbn1 {\n\t\tpadding: 0 10px 0 14px;\n\t\tborder-right: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\toverflow-y: auto;\n\t\tscrollbar-width: none;\n\t}\n\t.ag-q-status.svelte-n8lbn1::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n\t.ag-q-done-toggle.svelte-n8lbn1 {\n\t\talign-self: flex-start;\n\t\tmargin-top: 2px;\n\t\tpadding: 3px 8px;\n\t\tborder: 1px solid var(--dt-border);\n\t\tborder-radius: 0;\n\t\tbackground: none;\n\t\tfont-family: var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tfont-size: 12.5px;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tcursor: pointer;\n\t}\n\t.ag-q-done-toggle.svelte-n8lbn1:hover,\n\t.ag-q-done-toggle.svelte-n8lbn1:active {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tborder-color: var(--dt-border-day, rgba(15, 15, 15, 0.6));\n\t}\n\t.ag-q-done-toggle.svelte-n8lbn1:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);\n\t}\n\t.ag-q-now-sub.svelte-n8lbn1 {\n\t\tfont: 400 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tmargin-bottom: 4px;\n\t}\n\t.ag-q-done-section.svelte-n8lbn1 {\n\t\tmargin-top: 12px;\n\t\tpadding-top: 10px;\n\t\tborder-top: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\t.ag-q-clock.svelte-n8lbn1 {\n\t\tfont: 500 12px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t\tmargin-left: 4px;\n\t}\n\t/* The one happening now is the most prominent thing on the day: the\n\t largest title in the view and the 12% accent wash the system reserves\n\t for the current event. */\n\t.ag-q-now.svelte-n8lbn1 {\n\t\tposition: relative;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\tpadding: 12px 12px 12px 15px;\n\t\tmargin-bottom: 8px;\n\t\tborder-radius: 0;\n\t\tbackground: var(--dt-accent-dim, color-mix(in srgb, var(--dt-accent, #1d4fd7) 12%, transparent));\n\t\t/* eventFill: a wash in the event's colour; hover/current set background-color under it */\n\t\t--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);\n\t\tbackground-image: linear-gradient(var(--_fill), var(--_fill));\n\t\tborder: none;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));\n\t\tcursor: pointer;\n\t\ttransition: background 150ms, box-shadow 150ms;\n\t}\n\t.ag-q-now.svelte-n8lbn1::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: var(--dt-ev-bar, 3px);\n\t\tbackground: var(--ev-color, var(--dt-accent));\n\t}\n\t.ag-q-now.svelte-n8lbn1:hover,\n\t.ag-q-now.svelte-n8lbn1:active {\n\t\tbackground:\n\t\t\tlinear-gradient(var(--_fill), var(--_fill)),\n\t\t\tlinear-gradient(var(--dt-hover, rgba(15, 15, 15, 0.04)), var(--dt-hover, rgba(15, 15, 15, 0.04))),\n\t\t\tvar(--dt-accent-dim, color-mix(in srgb, var(--dt-accent, #1d4fd7) 12%, transparent));\n\t}\n\t.ag-q-now.svelte-n8lbn1:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-q-now--selected.svelte-n8lbn1 {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color, var(--dt-accent));\n\t}\n\t.ag-q-now-dot.svelte-n8lbn1 {\n\t\twidth: 8px;\n\t\theight: 8px;\n\t\tborder-radius: 50%;\n\t\tbackground: var(--ev-color, var(--dt-accent, #1d4fd7));\n\t\tmargin-bottom: 8px;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.ag-q-now-fill.svelte-n8lbn1 {\n\t\t\ttransition: none;\n\t\t}\n\t}\n\t.ag-q-now-title.svelte-n8lbn1 {\n\t\tfont: 500 20px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tdisplay: -webkit-box;\n\t\t-webkit-box-orient: vertical;\n\t\t-webkit-line-clamp: 2;\n\t\tline-clamp: 2;\n\t\toverflow: hidden;\n\t\tword-break: break-word;\n\t\tmargin-bottom: 4px;\n\t}\n\t.ag-q-now-time.svelte-n8lbn1 {\n\t\tfont: 400 14px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tmargin-bottom: 10px;\n\t}\n\t.ag-q-now-track.svelte-n8lbn1 {\n\t\theight: 2px;\n\t\tbackground: var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tborder-radius: 0;\n\t\toverflow: hidden;\n\t}\n\t.ag-q-now-fill.svelte-n8lbn1 {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tbackground: var(--ev-color, var(--dt-accent, #1d4fd7));\n\t\tborder-radius: 0;\n\t\ttransform-origin: left;\n\t\ttransition: transform 1s linear;\n\t}\n\t.ag-q-free.svelte-n8lbn1 {\n\t\tpadding: 8px 10px;\n\t\tmargin-right: 10px;\n\t}\n\t.ag-q-free-label.svelte-n8lbn1 {\n\t\tfont: 400 15px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tmargin-bottom: 2px;\n\t}\n\n\t/* ── NEXT: hero center column ── */\n\t.ag-q-queue.svelte-n8lbn1 {\n\t\tpadding: 0 16px;\n\t\toverflow-y: auto;\n\t\tscrollbar-width: none;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 8px;\n\t}\n\t.ag-q-queue.svelte-n8lbn1::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n\n\n\t.ag-q-done-item.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 8px;\n\t\tpadding: 4px 0;\n\t\twidth: 100%;\n\t\tcursor: pointer;\n\t}\n\t.ag-q-done-item.svelte-n8lbn1:hover .ag-q-done-title:where(.svelte-n8lbn1),\n\t.ag-q-done-item.svelte-n8lbn1:active .ag-q-done-title:where(.svelte-n8lbn1),\n\t.ag-q-done-item--selected.svelte-n8lbn1 .ag-q-done-title:where(.svelte-n8lbn1) {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\t.ag-q-done-item.svelte-n8lbn1:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t\tborder-radius: 0;\n\t}\n\t.ag-q-done-check.svelte-n8lbn1 {\n\t\tfont-size: 12.5px;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tflex-shrink: 0;\n\t}\n\t/* Finished: quieter ink, no strike (strikethrough means cancelled). */\n\t.ag-q-done-title.svelte-n8lbn1 {\n\t\tfont: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttransition: color 150ms;\n\t}\n\n\t/* ═══ Past Day: \"The Log\" ═══\n\t Dim comes from text tokens only (single layer) — no subtree opacity. */\n\t.ag-log.svelte-n8lbn1 {\n\t\tflex: 1;\n\t\tpadding: 8px 20px 12px;\n\t\toverflow-y: auto;\n\t\tscrollbar-width: none;\n\t}\n\t.ag-log.svelte-n8lbn1::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n\t.ag-log-row.svelte-n8lbn1 {\n\t\t/* eventFill: a wash in the event's colour; hover/current set background-color under it */\n\t\t--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);\n\t\tbackground-image: linear-gradient(var(--_fill), var(--_fill));\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 10px;\n\t\tpadding: 8px 0;\n\t\twidth: 100%;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tcursor: pointer;\n\t}\n\t.ag-log-row.svelte-n8lbn1:last-child {\n\t\tborder-bottom: none;\n\t}\n\t.ag-log-row.svelte-n8lbn1:hover .ag-log-title:where(.svelte-n8lbn1),\n\t.ag-log-row.svelte-n8lbn1:active .ag-log-title:where(.svelte-n8lbn1),\n\t.ag-log-row--selected.svelte-n8lbn1 .ag-log-title:where(.svelte-n8lbn1) {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\t.ag-log-row.svelte-n8lbn1:hover,\n\t.ag-log-row.svelte-n8lbn1:active {\n\t\tbackground-color: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t.ag-log-row.svelte-n8lbn1:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t\tborder-radius: 0;\n\t}\n\t.ag-log-row--selected.svelte-n8lbn1 {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t\tborder-radius: 0;\n\t}\n\t.ag-log-check.svelte-n8lbn1 {\n\t\tfont-size: 12.5px;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tflex-shrink: 0;\n\t}\n\t.ag-log-time.svelte-n8lbn1 {\n\t\tfont: 400 14px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tmin-width: 4.6em;\n\t\tflex-shrink: 0;\n\t}\n\t/* The colour dot of a past row becomes its 3px start bar (dimmed: it is over). */\n\t.ag-log-dot.svelte-n8lbn1 {\n\t\talign-self: stretch;\n\t\twidth: var(--dt-ev-bar, 3px);\n\t\tborder-radius: 0;\n\t\tflex-shrink: 0;\n\t\topacity: 0.45;\n\t}\n\t/* A past day is over, not struck out: quieter ink, sized like the planner.\n\t Strikethrough is kept for cancelled events only. */\n\t.ag-log-title.svelte-n8lbn1 {\n\t\tfont: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tflex: 0 1 auto;\n\t\tmin-width: 0;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttransition: color 150ms;\n\t\ttext-align: left;\n\t}\n\t.ag-log-row--cancelled.svelte-n8lbn1 .ag-log-title:where(.svelte-n8lbn1) {\n\t\ttext-decoration: line-through;\n\t}\n\t.ag-log-dur.svelte-n8lbn1 {\n\t\tfont: 400 12.5px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tflex-shrink: 0;\n\t}\n\n\t/* ═══ Compact Day ═══ */\n\t.ag-compact-list.svelte-n8lbn1 {\n\t\tflex: 1;\n\t\tpadding: 8px 20px 12px;\n\t\toverflow-y: auto;\n\t\tscrollbar-width: none;\n\t}\n\t.ag-compact-list.svelte-n8lbn1::-webkit-scrollbar { display: none; }\n\t/* A compact row: 3px start bar, hairline beneath, ink text. */\n\t.ag-compact-row.svelte-n8lbn1 {\n\t\t/* eventFill: a wash in the event's colour; hover/current set background-color under it */\n\t\t--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);\n\t\tbackground-image: linear-gradient(var(--_fill), var(--_fill));\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 10px;\n\t\tpadding: 5px 0 5px 11px;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));\n\t\tcursor: pointer;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t}\n\t.ag-compact-row.svelte-n8lbn1::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: var(--dt-ev-bar, 3px);\n\t\tbackground: var(--ev-color, var(--dt-accent));\n\t}\n\t.ag-compact-row--selected.svelte-n8lbn1 {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t}\n\t.ag-compact-row.svelte-n8lbn1:hover .ag-compact-row-title:where(.svelte-n8lbn1),\n\t.ag-compact-row.svelte-n8lbn1:active .ag-compact-row-title:where(.svelte-n8lbn1) { color: var(--dt-text); }\n\t.ag-compact-row.svelte-n8lbn1:hover,\n\t.ag-compact-row.svelte-n8lbn1:active {\n\t\tbackground-color: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t.ag-compact-row.svelte-n8lbn1:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-compact-row-time.svelte-n8lbn1 {\n\t\tfont: 400 14px/1.3 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tmin-width: 4.6em;\n\t\tflex-shrink: 0;\n\t\twhite-space: nowrap;\n\t}\n\t/* Title + subtitle + tags cluster, sized to its content so the meta and\n\t duration sit beside the title instead of across a wide row. One line\n\t while it fits; on mobile the metadata wraps to a second line under the\n\t title instead of crushing it. */\n\t.ag-compact-row-main.svelte-n8lbn1 {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 10px;\n\t\tflex: 0 1 auto;\n\t\tmin-width: 0;\n\t}\n\t.ag--mobile.svelte-n8lbn1 .ag-compact-row-main:where(.svelte-n8lbn1) {\n\t\tflex: 1;\n\t\tflex-wrap: wrap;\n\t\trow-gap: 2px;\n\t}\n\t/* Mobile: size the title by its content when deciding line breaks — a long\n\t title claims the first line whole (ellipsizing only against the full row)\n\t and pushes subtitle/tags down instead of truncating at 35%. */\n\t.ag--mobile.svelte-n8lbn1 .ag-compact-row-title:where(.svelte-n8lbn1) {\n\t\tflex-basis: auto;\n\t}\n\t/* On its own wrapped line the subtitle gets the full width */\n\t.ag--mobile.svelte-n8lbn1 .ag-compact-row-sub:where(.svelte-n8lbn1) {\n\t\tmax-width: 100%;\n\t}\n\t.ag-compact-row-title.svelte-n8lbn1 {\n\t\tfont: 500 15px/1.3 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tflex: 0 1 auto;\n\t\t/* The title is the row's identity — never let subtitle/tags/duration\n\t\t squeeze it out on narrow screens (min-width: 0 resolves to 0px). */\n\t\tmin-width: 6em;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttransition: color 150ms;\n\t\ttext-align: left;\n\t}\n\t.ag-compact-row-dur.svelte-n8lbn1,\n\t.ag-compact-row-sub.svelte-n8lbn1,\n\t.ag-compact-row-tag.svelte-n8lbn1 {\n\t\tfont: 400 12.5px/1.3 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\twhite-space: nowrap;\n\t}\n\t.ag-compact-row-dur.svelte-n8lbn1 {\n\t\tfont-variant-numeric: tabular-nums;\n\t\tflex-shrink: 0;\n\t}\n\t.ag-compact-row-sub.svelte-n8lbn1 {\n\t\tflex-shrink: 3;\n\t\tmin-width: 0;\n\t\tmax-width: 45%;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.ag-compact-row-tag.svelte-n8lbn1 {\n\t\tflex-shrink: 1;\n\t\tmin-width: 2.5em;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.ag-compact-row--cancelled.svelte-n8lbn1 .ag-compact-row-title:where(.svelte-n8lbn1) {\n\t\ttext-decoration: line-through;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.ag-compact-row--cancelled.svelte-n8lbn1::before { opacity: 0.45; }\n\t.ag-compact-row--tentative.svelte-n8lbn1 .ag-compact-row-title:where(.svelte-n8lbn1) { color: var(--dt-text-2, rgba(15, 15, 15, 0.54)); }\n\t.ag-compact-row--tentative.svelte-n8lbn1::before {\n\t\tbackground: repeating-linear-gradient(180deg, var(--ev-color) 0 4px, transparent 4px 7px);\n\t}\n\t/* Mobile: larger touch targets for compact rows */\n\t.ag--mobile.svelte-n8lbn1 .ag-compact-row:where(.svelte-n8lbn1) { padding: 8px 0 8px 11px; }\n\t.ag--mobile.svelte-n8lbn1 .ag-day-head:where(.svelte-n8lbn1) { padding: 0 16px 8px; }\n\n\t/* ═══ Future Day: \"The Plan\" ═══ */\n\t.ag-plan.svelte-n8lbn1 {\n\t\tflex: 1;\n\t\tpadding: 8px 20px 12px;\n\t\toverflow-y: auto;\n\t\tscrollbar-width: none;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 6px;\n\t}\n\t.ag-plan.svelte-n8lbn1::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n\n\t/* ═══ Container ═══ */\n\t.ag.svelte-uhwfyj {\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tuser-select: none;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tmin-width: 0;\n\t\tbox-sizing: border-box;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tfont-family: var(--dt-sans, system-ui, sans-serif);\n\t}\n\t.ag--auto.svelte-uhwfyj {\n\t\theight: auto;\n\t\toverflow: visible;\n\t}\n\n\t/* Button UA reset for interactive cards/rows (real <button>s for a11y).\n\t Placed first so later component rules override it. */\n\t.ag-card.svelte-uhwfyj,\n\t.ag-allday-chip.svelte-uhwfyj,\n\t.ag-compact.svelte-uhwfyj,\n\t.ag-compact-more.svelte-uhwfyj,\n\t.ag-past-toggle.svelte-uhwfyj {\n\t\tfont: inherit;\n\t\tcolor: inherit;\n\t\ttext-align: left;\n\t\tbackground: none;\n\t\tborder: none;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* ═══ Body ═══ */\n\t.ag-body.svelte-uhwfyj {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\tbox-sizing: border-box;\n\t\t/* No padding-top here: the sticky day headers pin at the scrollport\n\t\t edge, and container padding would leave a see-through band above\n\t\t them where scrolled cards bleed out. */\n\t\tscrollbar-width: thin;\n\t\tscrollbar-color: var(--dt-border) transparent;\n\t}\n\t.ag-wday.svelte-uhwfyj:first-child .ag-wday-head:where(.svelte-uhwfyj) {\n\t\tpadding-top: 12px;\n\t}\n\t.ag--auto.svelte-uhwfyj .ag-body:where(.svelte-uhwfyj) {\n\t\toverflow-y: visible;\n\t}\n\t.ag-body.svelte-uhwfyj::-webkit-scrollbar {\n\t\twidth: 4px;\n\t}\n\t.ag-body.svelte-uhwfyj::-webkit-scrollbar-thumb {\n\t\tbackground: var(--dt-border);\n\t\tborder-radius: 0;\n\t}\n\n\t/* ═══ All-day chips ═══ */\n\t.ag-allday.svelte-uhwfyj {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 4px;\n\t\tpadding: 4px 14px 6px;\n\t}\n\t/* An all-day event is a solid band in its colour — no tint, no dot, no pill. */\n\t.ag-allday-chip.svelte-uhwfyj {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 6px;\n\t\tpadding: 4px 10px;\n\t\tborder-radius: 0;\n\t\tborder: none;\n\t\tbackground: var(--ev-color);\n\t\tcolor: var(--dt-btn-text, #fff);\n\t\tcursor: pointer;\n\t}\n\t.ag-allday-chip.svelte-uhwfyj:hover,\n\t.ag-allday-chip.svelte-uhwfyj:active {\n\t\tfilter: brightness(1.08);\n\t}\n\t.ag-allday-chip.svelte-uhwfyj:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-allday-chip--selected.svelte-uhwfyj {\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);\n\t}\n\t.ag-allday-dot.svelte-uhwfyj {\n\t\tdisplay: none;\n\t}\n\t.ag-allday-title.svelte-uhwfyj {\n\t\tfont: 500 13.5px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: inherit;\n\t\twhite-space: nowrap;\n\t}\n\t.ag-allday-span.svelte-uhwfyj {\n\t\tfont: 400 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: inherit;\n\t\twhite-space: nowrap;\n\t}\n\n\t/* ═══ Shared: event card ═══ */\n\t/* Paper, not a tinted card: a 3px start bar in the event colour, a\n\t hairline rule beneath, ink text. Hover is a wash, selection a ring. */\n\t.ag-card.svelte-uhwfyj {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\t/* A <button> shrinks to its content; the NOW card sits outside the\n\t\t stretching slot column, so it claims the row explicitly. */\n\t\twidth: 100%;\n\t\talign-items: stretch;\n\t\tborder-radius: 0;\n\t\tbackground: transparent;\n\t\t/* eventFill: a wash in the event's colour; hover/current set background-color under it */\n\t\t--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);\n\t\tbackground-image: linear-gradient(var(--_fill), var(--_fill));\n\t\tborder: none;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));\n\t\toverflow: hidden;\n\t\tcursor: pointer;\n\t\ttransition: background 150ms, box-shadow 150ms;\n\t}\n\t.ag-card.svelte-uhwfyj::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: var(--dt-ev-bar, 3px);\n\t\tbackground: var(--ev-color);\n\t}\n\t.ag-card.svelte-uhwfyj:hover,\n\t.ag-card.svelte-uhwfyj:active {\n\t\tbackground-color: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t.ag-card.svelte-uhwfyj:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-card--selected.svelte-uhwfyj {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t}\n\t.ag-card--cancelled.svelte-uhwfyj .ag-card-title:where(.svelte-uhwfyj) {\n\t\ttext-decoration: line-through;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.ag-card--cancelled.svelte-uhwfyj::before,\n\t.ag-card--full.svelte-uhwfyj::before {\n\t\topacity: 0.45;\n\t}\n\t.ag-card--tentative.svelte-uhwfyj .ag-card-title:where(.svelte-uhwfyj),\n\t.ag-card--limited.svelte-uhwfyj .ag-card-title:where(.svelte-uhwfyj),\n\t.ag-card--full.svelte-uhwfyj .ag-card-title:where(.svelte-uhwfyj) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.ag-card--tentative.svelte-uhwfyj::before,\n\t.ag-card--limited.svelte-uhwfyj::before {\n\t\tbackground: repeating-linear-gradient(180deg, var(--ev-color) 0 4px, transparent 4px 7px);\n\t}\n\t/* Planner scale: title 15/500, time 14 tabular in ink, meta 12.5 in ink-2.\n\t The body keeps a reading measure so meta never drifts across a wide row. */\n\t.ag-card-body.svelte-uhwfyj {\n\t\tpadding: 8px 10px 8px 13px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 3px;\n\t\tmin-width: 0;\n\t\tmax-width: 44rem;\n\t\tflex: 1;\n\t}\n\t.ag-card-title.svelte-uhwfyj {\n\t\tfont: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tword-break: break-word;\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t\tdisplay: -webkit-box;\n\t\t-webkit-box-orient: vertical;\n\t\t-webkit-line-clamp: 2;\n\t\tline-clamp: 2;\n\t\toverflow: hidden;\n\t}\n\t.ag-card-meta.svelte-uhwfyj {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tflex-wrap: wrap;\n\t\tcolumn-gap: 8px;\n\t\trow-gap: 2px;\n\t\tfont: 400 14px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\t.ag-card-dur.svelte-uhwfyj,\n\t.ag-card-eta.svelte-uhwfyj,\n\t.ag-card-sub.svelte-uhwfyj,\n\t.ag-card-loc.svelte-uhwfyj,\n\t.ag-card-tag.svelte-uhwfyj {\n\t\tfont: 400 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t.ag-card-tags.svelte-uhwfyj {\n\t\tdisplay: flex;\n\t\tcolumn-gap: 10px;\n\t\trow-gap: 2px;\n\t\tflex-wrap: wrap;\n\t}\n\t.ag-card-tag.svelte-uhwfyj {\n\t\twhite-space: nowrap;\n\t}\n\t.ag-card-progress.svelte-uhwfyj {\n\t\theight: 3px;\n\t\tbackground: var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tborder-radius: 0;\n\t\toverflow: hidden;\n\t\tmargin-top: 2px;\n\t}\n\t.ag-card-progress-fill.svelte-uhwfyj {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tbackground: var(--ev-color, var(--dt-accent));\n\t\tborder-radius: 0;\n\t\ttransform-origin: left;\n\t\ttransition: transform 1s linear;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.ag-card-progress-fill.svelte-uhwfyj {\n\t\t\ttransition: none;\n\t\t}\n\t}\n\n\t/* ═══ Week day groups ═══ */\n\t.ag-wday.svelte-uhwfyj {\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\t.ag-wday.svelte-uhwfyj:last-child {\n\t\tborder-bottom: none;\n\t}\n\t.ag-wday--today.svelte-uhwfyj {\n\t\tbackground: color-mix(in srgb, var(--dt-accent, #1d4fd7) 2%, transparent);\n\t}\n\t/* Past days: quieter ink from the text tokens, no subtree opacity */\n\t.ag-wday--past.svelte-uhwfyj .ag-wday-num:where(.svelte-uhwfyj) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t.ag-wday--past.svelte-uhwfyj .ag-wday-head:where(.svelte-uhwfyj) {\n\t\tpadding: 8px 20px 2px;\n\t}\n\t.ag-wday--disabled.svelte-uhwfyj {\n\t\tposition: relative;\n\t}\n\t.ag-wday--disabled.svelte-uhwfyj::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tbackground: repeating-linear-gradient(\n\t\t\t135deg,\n\t\t\ttransparent,\n\t\t\ttransparent 4px,\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 8%, transparent) 4px,\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 8%, transparent) 8px\n\t\t);\n\t\tpointer-events: none;\n\t}\n\t.ag-wday-custom-header.svelte-uhwfyj {\n\t\tpadding: 2px 0 4px;\n\t}\n\n\t.ag-wday-head--click.svelte-uhwfyj,\n\t.ag-wday-empty--click.svelte-uhwfyj {\n\t\tcursor: pointer;\n\t}\n\t.ag-wday-head--click.svelte-uhwfyj:focus-visible,\n\t.ag-wday-empty--click.svelte-uhwfyj:focus-visible {\n\t\toutline: 2px solid var(--dt-text, #0f0f0f);\n\t\toutline-offset: -2px;\n\t\tborder-radius: 0;\n\t}\n\t.ag-wday-head.svelte-uhwfyj {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\t\tpadding: 8px 20px;\n\t\tposition: sticky;\n\t\ttop: 0;\n\t\tbackground: var(--dt-bg, #efebe9);\n\t\tz-index: 1;\n\t\t/* Own compositor layer: without it, fast (async) scrolling repaints\n\t\t the pinned header a frame late and a gap flashes above it. */\n\t\ttransform: translateZ(0);\n\t\twill-change: transform;\n\t}\n\t.ag-wday-head-left.svelte-uhwfyj {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 8px;\n\t}\n\t/* The planner's header type: the day number is the typography (40/400,\n\t narrowed), the weekday a tracked 12/500 label; today takes the accent. */\n\t.ag-wday-num.svelte-uhwfyj {\n\t\tfont: 400 40px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-stretch: 90%;\n\t\tletter-spacing: -0.02em;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tmargin-inline-end: 4px;\n\t}\n\t.ag-wday-badge.svelte-uhwfyj,\n\t.ag-wday-name.svelte-uhwfyj {\n\t\tfont: 500 12px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t.ag-wday--today.svelte-uhwfyj .ag-wday-num:where(.svelte-uhwfyj),\n\t.ag-wday--today.svelte-uhwfyj .ag-wday-name:where(.svelte-uhwfyj),\n\t.ag-wday-badge.svelte-uhwfyj {\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-wday.svelte-uhwfyj .ag-wday-badge--muted:where(.svelte-uhwfyj) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t/* Set like the weekday beside it, so the heading reads in one case */\n\t.ag-wday-date.svelte-uhwfyj {\n\t\tfont: 400 12px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\n\t.ag-wday-empty.svelte-uhwfyj {\n\t\tpadding: 2px 20px 8px;\n\t\tfont-size: 12.5px;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\n\t/* Expanded day */\n\t.ag-wday-expanded.svelte-uhwfyj {\n\t\tpadding: 0 20px 10px;\n\t}\n\t.ag-wslot.svelte-uhwfyj {\n\t\tmargin-bottom: 4px;\n\t}\n\t.ag-wslot-header.svelte-uhwfyj {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 8px;\n\t\tpadding: 2px 0;\n\t}\n\t.ag-wslot-now.svelte-uhwfyj {\n\t\tfont: 500 12px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-wslot-cards.svelte-uhwfyj {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 4px;\n\t}\n\t.ag-wslot-cards--multi.svelte-uhwfyj {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n\t\tgap: 4px;\n\t}\n\t.ag-wday-past-line.svelte-uhwfyj {\n\t\tfont-size: 12.5px;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tpadding: 6px 0 0;\n\t}\n\t.ag-wday-past-line--summary.svelte-uhwfyj {\n\t\tpadding: 0 20px 8px;\n\t}\n\t/* \"✓ N completed\" is a disclosure — tap to reveal the finished events */\n\t.ag-past-toggle.svelte-uhwfyj {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tgap: 5px;\n\t\tcursor: pointer;\n\t\tmin-height: 32px;\n\t\ttransition: color 150ms;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t.ag-past-toggle.svelte-uhwfyj:hover,\n\t.ag-past-toggle.svelte-uhwfyj:active {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\t.ag-past-toggle.svelte-uhwfyj:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);\n\t\tborder-radius: 0;\n\t}\n\t.ag-past-chevron.svelte-uhwfyj {\n\t\ttransition: transform 120ms;\n\t}\n\t.ag-past-chevron--open.svelte-uhwfyj {\n\t\ttransform: rotate(180deg);\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.ag-past-chevron.svelte-uhwfyj { transition: none; }\n\t}\n\t/* Revealed completed events: quieter ink (single token layer). Strikethrough\n\t is kept for cancelled only, so \"done\" and \"called off\" never read alike. */\n\t.ag-compact--done.svelte-uhwfyj .ag-compact-title:where(.svelte-uhwfyj),\n\t.ag-compact--done.svelte-uhwfyj .ag-compact-time:where(.svelte-uhwfyj) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t.ag-compact--done.svelte-uhwfyj::before {\n\t\topacity: 0.45;\n\t}\n\n\t/* Compact day events */\n\t.ag-wday-compact.svelte-uhwfyj {\n\t\tpadding: 0 20px 8px;\n\t}\n\t/* A compact row: 3px start bar, hairline beneath, ink text. */\n\t.ag-compact.svelte-uhwfyj {\n\t\t/* eventFill: a wash in the event's colour; hover/current set background-color under it */\n\t\t--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);\n\t\tbackground-image: linear-gradient(var(--_fill), var(--_fill));\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 10px;\n\t\tpadding: 5px 0 5px 11px;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));\n\t\tcursor: pointer;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t}\n\t.ag-compact.svelte-uhwfyj::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: var(--dt-ev-bar, 3px);\n\t\tbackground: var(--ev-color, var(--dt-accent));\n\t}\n\t.ag-compact--selected.svelte-uhwfyj {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t}\n\t.ag-compact.svelte-uhwfyj:hover .ag-compact-title:where(.svelte-uhwfyj),\n\t.ag-compact.svelte-uhwfyj:active .ag-compact-title:where(.svelte-uhwfyj) {\n\t\tcolor: var(--dt-text);\n\t}\n\t.ag-compact.svelte-uhwfyj:hover,\n\t.ag-compact.svelte-uhwfyj:active {\n\t\tbackground-color: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t.ag-compact.svelte-uhwfyj:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\t.ag-compact-time.svelte-uhwfyj {\n\t\tfont: 400 14px/1.3 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tmin-width: 4.4em;\n\t\tflex-shrink: 0;\n\t\twhite-space: nowrap;\n\t}\n\t/* Title + location + subtitle + tags cluster, sized to its content so the\n\t meta and duration sit beside the title instead of across a wide row.\n\t One line while it fits; on mobile the metadata wraps to a second line\n\t instead of crushing the title. */\n\t.ag-compact-main.svelte-uhwfyj {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 10px;\n\t\tflex: 0 1 auto;\n\t\tmin-width: 0;\n\t}\n\t.ag--mobile.svelte-uhwfyj .ag-compact-main:where(.svelte-uhwfyj) {\n\t\tflex: 1;\n\t\tflex-wrap: wrap;\n\t\trow-gap: 2px;\n\t}\n\t/* Mobile: size the title by its content when deciding line breaks — a long\n\t title claims the first line whole (ellipsizing only against the full row)\n\t and pushes location/subtitle/tags down instead of truncating at 35%. */\n\t.ag--mobile.svelte-uhwfyj .ag-compact-title:where(.svelte-uhwfyj) {\n\t\tflex-basis: auto;\n\t}\n\t/* On their own wrapped line the metadata gets the full width — the tight\n\t desktop caps would truncate it beside empty space. */\n\t.ag--mobile.svelte-uhwfyj .ag-compact-loc:where(.svelte-uhwfyj),\n\t.ag--mobile.svelte-uhwfyj .ag-compact-sub:where(.svelte-uhwfyj) {\n\t\tmax-width: 100%;\n\t}\n\t.ag-compact-title.svelte-uhwfyj {\n\t\tfont: 500 15px/1.3 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tflex: 0 1 auto;\n\t\t/* The title is the row's identity — never let subtitle/tags/duration\n\t\t squeeze it out on narrow screens (min-width: 0 resolves to 0px). */\n\t\tmin-width: 6em;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttransition: color 150ms;\n\t}\n\t.ag-compact-dur.svelte-uhwfyj,\n\t.ag-compact-sub.svelte-uhwfyj,\n\t.ag-compact-loc.svelte-uhwfyj,\n\t.ag-compact-tag.svelte-uhwfyj {\n\t\tfont: 400 12.5px/1.3 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\twhite-space: nowrap;\n\t}\n\t.ag-compact-dur.svelte-uhwfyj {\n\t\tfont-variant-numeric: tabular-nums;\n\t\tflex-shrink: 0;\n\t}\n\t.ag-compact-sub.svelte-uhwfyj {\n\t\tflex-shrink: 3;\n\t\tmin-width: 0;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tmax-width: 160px;\n\t}\n\t.ag-compact-loc.svelte-uhwfyj {\n\t\tflex-shrink: 3;\n\t\tmin-width: 0;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tmax-width: 140px;\n\t}\n\t.ag-compact--cancelled.svelte-uhwfyj .ag-compact-title:where(.svelte-uhwfyj) {\n\t\ttext-decoration: line-through;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.ag-compact--cancelled.svelte-uhwfyj::before,\n\t.ag-compact--full.svelte-uhwfyj::before {\n\t\topacity: 0.45;\n\t}\n\t.ag-compact--tentative.svelte-uhwfyj .ag-compact-title:where(.svelte-uhwfyj),\n\t.ag-compact--limited.svelte-uhwfyj .ag-compact-title:where(.svelte-uhwfyj),\n\t.ag-compact--full.svelte-uhwfyj .ag-compact-title:where(.svelte-uhwfyj) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.ag-compact--tentative.svelte-uhwfyj::before,\n\t.ag-compact--limited.svelte-uhwfyj::before {\n\t\tbackground: repeating-linear-gradient(180deg, var(--ev-color) 0 4px, transparent 4px 7px);\n\t}\n\t.ag-compact-tag.svelte-uhwfyj {\n\t\tflex-shrink: 1;\n\t\tmin-width: 2.5em;\n\t\tmax-width: 120px;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.ag-compact-more.svelte-uhwfyj {\n\t\tfont-size: 12.5px;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t\tpadding: 4px 0 0 11px;\n\t\tcursor: pointer;\n\t\tdisplay: block;\n\t}\n\t.ag-compact-more.svelte-uhwfyj:hover,\n\t.ag-compact-more.svelte-uhwfyj:active {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\t.ag-compact-more.svelte-uhwfyj:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);\n\t\tborder-radius: 0;\n\t}\n\n\t/* ═══ Day-drop drag ═══ */\n\t.ag-card--drag.svelte-uhwfyj {\n\t\topacity: 0.4;\n\t}\n\t.ag-wday--drop.svelte-uhwfyj {\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t\tbox-shadow: inset 0 0 0 1px var(--dt-accent, #1d4fd7);\n\t}\n\n\t/* ═══ Timetable columns (desktop) ═══ */\n\t.ag--cols.svelte-uhwfyj .ag-body:where(.svelte-uhwfyj) {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(var(--ag-cols, 7), minmax(0, 1fr));\n\t}\n\t/* Columns stretch to the tallest day, so the separator runs full height */\n\t.ag--cols.svelte-uhwfyj .ag-wday:where(.svelte-uhwfyj) {\n\t\tborder-bottom: none;\n\t\tborder-inline-start: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tmin-width: 0;\n\t}\n\t.ag--cols.svelte-uhwfyj .ag-wday:where(.svelte-uhwfyj):first-child {\n\t\tborder-inline-start: none;\n\t}\n\t/* Uniform head padding — the :first-child top bump would misalign columns.\n\t Also overrides the past-day head variant (extra class = higher specificity). */\n\t.ag--cols.svelte-uhwfyj .ag-wday:where(.svelte-uhwfyj) .ag-wday-head:where(.svelte-uhwfyj) {\n\t\tpadding: 12px 10px 8px;\n\t}\n\t/* Badge + name + date won't fit one line in a ~160px column */\n\t.ag--cols.svelte-uhwfyj .ag-wday-head-left:where(.svelte-uhwfyj) {\n\t\tflex-wrap: wrap;\n\t\trow-gap: 2px;\n\t}\n\t.ag--cols.svelte-uhwfyj .ag-wday-expanded:where(.svelte-uhwfyj),\n\t.ag--cols.svelte-uhwfyj .ag-wday-compact:where(.svelte-uhwfyj),\n\t.ag--cols.svelte-uhwfyj .ag-wday-empty:where(.svelte-uhwfyj),\n\t.ag--cols.svelte-uhwfyj .ag-wday-past-line--summary:where(.svelte-uhwfyj) {\n\t\tpadding-left: 10px;\n\t\tpadding-right: 10px;\n\t}\n\t.ag--cols.svelte-uhwfyj .ag-allday:where(.svelte-uhwfyj) {\n\t\tpadding-left: 10px;\n\t\tpadding-right: 10px;\n\t}\n\t/* Narrow cards: long titles get a third line, meta wraps instead of clipping */\n\t.ag--cols.svelte-uhwfyj .ag-card-title:where(.svelte-uhwfyj) {\n\t\t-webkit-line-clamp: 3;\n\t\tline-clamp: 3;\n\t}\n\t.ag--cols.svelte-uhwfyj .ag-card-meta:where(.svelte-uhwfyj) {\n\t\tflex-wrap: wrap;\n\t\trow-gap: 3px;\n\t}\n\n\t/* ═══ Mobile adaptations ═══ */\n\t/* Horizontal swipes are ours (week navigation); the browser keeps\n\t vertical scrolling and pinch-zoom. */\n\t.ag--mobile.svelte-uhwfyj,\n\t.ag--mobile.svelte-uhwfyj .ag-body:where(.svelte-uhwfyj) {\n\t\ttouch-action: pan-y pinch-zoom;\n\t}\n\t.ag--mobile.svelte-uhwfyj .ag-wday-head:where(.svelte-uhwfyj) {\n\t\tpadding: 12px 16px;\n\t}\n\t.ag--mobile.svelte-uhwfyj .ag-wday-expanded:where(.svelte-uhwfyj) {\n\t\tpadding: 0 16px 12px;\n\t}\n\t.ag--mobile.svelte-uhwfyj .ag-wday-compact:where(.svelte-uhwfyj) {\n\t\tpadding: 0 16px 12px;\n\t}\n\t/* Type is already on the planner scale; phones only get bigger targets. */\n\t.ag--mobile.svelte-uhwfyj .ag-card-body:where(.svelte-uhwfyj) {\n\t\tpadding: 12px 14px;\n\t}\n\t.ag--mobile.svelte-uhwfyj .ag-compact:where(.svelte-uhwfyj) {\n\t\tpadding: 8px 0 8px 11px;\n\t}\n\t.ag--mobile.svelte-uhwfyj .ag-compact-more:where(.svelte-uhwfyj) {\n\t\tpadding-top: 6px;\n\t}\n\t.ag--mobile.svelte-uhwfyj .ag-wslot-cards--multi:where(.svelte-uhwfyj) {\n\t\tgrid-template-columns: 1fr;\n\t}\n\n\t/* ─── Container ──────────────────────────────────── */\n\t.mb.svelte-zbkzcp {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tuser-select: none;\n\t\tfont-variant-numeric: tabular-nums;\n\t\toverflow: hidden;\n\t\tbackground: var(--dt-bg, #efebe9);\n\t\t-webkit-tap-highlight-color: transparent;\n\t\ttouch-action: pan-y pinch-zoom;\n\t}\n\t.mb--auto.svelte-zbkzcp { overflow: visible; }\n\n\t/* ─── Swipe wrapper (follows the finger) ─────────── */\n\t.mb-swipe.svelte-zbkzcp {\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tposition: relative;\n\t}\n\t.mb-swipe--animate.svelte-zbkzcp {\n\t\ttransition: transform 180ms ease;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.mb-swipe--animate.svelte-zbkzcp { transition: none; }\n\t}\n\n\t/* ─── All-day bar ────────────────────────────────── */\n\t.mb-allday.svelte-zbkzcp {\n\t\tdisplay: flex;\n\t\tgap: 4px;\n\t\tpadding: 4px 8px;\n\t\toverflow-x: auto;\n\t\tscrollbar-width: none;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tflex-shrink: 0;\n\t\talign-items: center;\n\t}\n\t.mb-allday.svelte-zbkzcp::-webkit-scrollbar { display: none; }\n\t.mb-allday--expanded.svelte-zbkzcp {\n\t\tflex-wrap: wrap;\n\t\toverflow-x: visible;\n\t}\n\n\t.mb-allday-chip.svelte-zbkzcp {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tpadding: 4px 8px;\n\t\tmin-height: 32px;\n\t\tborder-radius: 0;\n\t\tbackground: var(--ev-color);\n\t\tcolor: var(--dt-btn-text, #fff);\n\t\tborder: none;\n\t\tcursor: pointer;\n\t\tflex-shrink: 0;\n\t\ttransition: filter 120ms;\n\t\t-webkit-tap-highlight-color: transparent;\n\t\tmax-width: 160px;\n\t\tposition: relative;\n\t}\n\t/* Hit-slop: 44px effective touch target */\n\t.mb-allday-chip.svelte-zbkzcp::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\theight: 44px;\n\t}\n\t.mb-allday-chip.svelte-zbkzcp:hover,\n\t.mb-allday-chip.svelte-zbkzcp:active {\n\t\tfilter: brightness(1.08);\n\t}\n\t.mb-allday-chip--selected.svelte-zbkzcp {\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);\n\t}\n\t.mb-allday-chip.svelte-zbkzcp:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\n\t/* The band is the colour; no dot. */\n\t.mb-allday-dot.svelte-zbkzcp {\n\t\tdisplay: none;\n\t}\n\n\t.mb-allday-title.svelte-zbkzcp {\n\t\tfont: 500 13.5px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: inherit;\n\t\twhite-space: nowrap;\n\t\tmax-width: 100px;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t.mb-allday-span.svelte-zbkzcp {\n\t\tfont: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: inherit;\n\t\topacity: 0.75;\n\t}\n\n\t.mb-allday-more.svelte-zbkzcp {\n\t\tfont: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\twhite-space: nowrap;\n\t\tflex-shrink: 0;\n\t\tpadding: 0 6px;\n\t\tmin-height: 32px;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tcursor: pointer;\n\t\tposition: relative;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t.mb-allday-more.svelte-zbkzcp::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\theight: 44px;\n\t}\n\t.mb-allday-more.svelte-zbkzcp:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);\n\t}\n\n\t/* ─── Grid ───────────────────────────────────────── */\n\t.mb-grid.svelte-zbkzcp {\n\t\tflex: 1;\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\toverscroll-behavior: contain;\n\t\t-webkit-overflow-scrolling: touch;\n\t\tscrollbar-width: thin;\n\t\tscrollbar-color: var(--dt-scrollbar, rgba(15, 15, 15, 0.1)) transparent;\n\t\tposition: relative;\n\t\tpadding-top: 8px;\n\t}\n\t.mb--auto.svelte-zbkzcp .mb-grid:where(.svelte-zbkzcp) { overflow-y: visible; }\n\t.mb-grid.svelte-zbkzcp:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-text, #0f0f0f);\n\t}\n\n\t.mb-grid-inner.svelte-zbkzcp {\n\t\tposition: relative;\n\t\tmin-width: 100%;\n\t}\n\n\t/* ─── Empty state ────────────────────────────────── */\n\t.mb-empty.svelte-zbkzcp {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpointer-events: none;\n\t\tz-index: 4;\n\t}\n\t.mb-empty-text.svelte-zbkzcp {\n\t\tfont: 500 13px/1.4 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\n\t/* ─── Hour row ───────────────────────────────────── */\n\t.mb-hour.svelte-zbkzcp {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tdisplay: flex;\n\t\talign-items: flex-start;\n\t}\n\n\t/* The first hour has no room above its line: it sits on it, unclipped */\n\t.mb-hour.svelte-zbkzcp:first-child .mb-hour-label:where(.svelte-zbkzcp) { top: 0; }\n\t.mb-hour-label--under.svelte-zbkzcp {\n\t\tvisibility: hidden;\n\t}\n\t.mb-hour-label.svelte-zbkzcp small:where(.svelte-zbkzcp) {\n\t\tfont-size: 10px;\n\t\tfont-weight: 500;\n\t\tvertical-align: top;\n\t\tmargin-left: 1px;\n\t\tletter-spacing: 0;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.mb-hour-label.svelte-zbkzcp {\n\t\twidth: 40px;\n\t\t/* border-box keeps the label inside the 40px gutter that events\n\t\t start at — content-box pushed digits flush under the event edge */\n\t\tbox-sizing: border-box;\n\t\tflex-shrink: 0;\n\t\tfont: 400 15px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-stretch: 90%;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tletter-spacing: -0.02em;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\ttext-align: right;\n\t\tpadding-right: 8px;\n\t\tpadding-top: 0;\n\t\tposition: relative;\n\t\ttop: -6px;\n\t}\n\n\t.mb-hour-line.svelte-zbkzcp {\n\t\tflex: 1;\n\t\theight: 1px;\n\t\tbackground: var(--dt-border, rgba(15, 15, 15, 0.08));\n\t}\n\n\t.mb-hour--blocked.svelte-zbkzcp {\n\t\tbackground: repeating-linear-gradient(\n\t\t\t-45deg,\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 3%, transparent),\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 3%, transparent) 4px,\n\t\t\ttransparent 4px,\n\t\t\ttransparent 8px\n\t\t);\n\t}\n\n\t.mb-blocked-label.svelte-zbkzcp {\n\t\tposition: absolute;\n\t\tleft: 44px;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\tfont: 500 11px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.04em;\n\t}\n\n\t/* ─── Now line ───────────────────────────────────── */\n\t/* No stacking context of its own: the plate and the dot sit above the\n\t events, the line under them (the event it crosses is opaque), so the\n\t line never strikes through a title. */\n\t.mb-now.svelte-zbkzcp {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tpointer-events: none;\n\t}\n\n\t/* The clock is a reversed plate on the accent, as in the desktop gutter. */\n\t.mb-now-label.svelte-zbkzcp {\n\t\tposition: relative;\n\t\tz-index: 10;\n\t\twidth: 40px;\n\t\tbox-sizing: border-box;\n\t\tflex-shrink: 0;\n\t\tpadding: 0 4px 0 0;\n\t\ttext-align: right;\n\t\twhite-space: nowrap;\n\t}\n\t.mb-now-label.svelte-zbkzcp::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tright: -4px;\n\t\ttop: 50%;\n\t\twidth: 8px;\n\t\theight: 8px;\n\t\tmargin-top: -4px;\n\t\tborder-radius: 50%;\n\t\tbackground: var(--dt-accent, #1d4fd7);\n\t}\n\t.mb-now-label.svelte-zbkzcp span:where(.svelte-zbkzcp) {\n\t\tdisplay: inline-block;\n\t\tpadding: 2px 3px;\n\t\tborder-radius: 0;\n\t\tbackground: var(--dt-accent, #1d4fd7);\n\t\tfont: 500 11px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-btn-text, #ffffff);\n\t}\n\n\t.mb-now-line.svelte-zbkzcp {\n\t\tflex: 1;\n\t\theight: 0;\n\t\tborder-top: 2px solid var(--dt-accent, #1d4fd7);\n\t\tbox-shadow: none;\n\t\tposition: relative;\n\t\tz-index: 4;\n\t}\n\n\t/* ─── Events ─────────────────────────────────────── */\n\t.mb-event.svelte-zbkzcp {\n\t\tposition: absolute;\n\t\tz-index: 5;\n\t\tborder-radius: 0;\n\t\tcursor: pointer;\n\t\tbackground: transparent;\n\t\t/* eventFill: a wash in the event's colour; hover/current set background-color under it */\n\t\t--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);\n\t\tbackground-image: linear-gradient(var(--_fill), var(--_fill));\n\t\tborder: none;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\talign-items: stretch;\n\t\toverflow: hidden;\n\t\ttransition: box-shadow 120ms, background 120ms;\n\t\ttext-align: left;\n\t\tpadding: 0;\n\t\t-webkit-tap-highlight-color: transparent;\n\t\tmin-height: 24px;\n\t}\n\t.mb-event.svelte-zbkzcp:hover,\n\t.mb-event.svelte-zbkzcp:active {\n\t\tbackground-color: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t/* Short blocks keep their duration-proportional height, but get a 44px\n\t transparent hit-slop so taps still land. */\n\t.mb-event--short.svelte-zbkzcp {\n\t\toverflow: visible;\n\t}\n\t.mb-event--short.svelte-zbkzcp::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\theight: 44px;\n\t}\n\t.mb-event--short.svelte-zbkzcp .mb-ev-body:where(.svelte-zbkzcp) {\n\t\tpadding-top: 2px;\n\t\tpadding-bottom: 2px;\n\t}\n\t.mb-event--selected.svelte-zbkzcp {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t}\n\t/* The event in progress is the one the now line crosses: its wash is\n\t laid over the paper, opaque, so the line runs beneath its text. */\n\t.mb-event.mb-event--current.svelte-zbkzcp {\n\t\tbackground:\n\t\t\tlinear-gradient(var(--_fill), var(--_fill)),\n\t\t\tlinear-gradient(var(--dt-accent-dim, rgba(29, 79, 215, 0.12)), var(--dt-accent-dim, rgba(29, 79, 215, 0.12))),\n\t\t\tvar(--dt-paper, none),\n\t\t\tvar(--dt-bg, #efebe9);\n\t}\n\t.mb-event.mb-event--current.svelte-zbkzcp:hover,\n\t.mb-event.mb-event--current.svelte-zbkzcp:active {\n\t\tbackground:\n\t\t\tlinear-gradient(var(--_fill), var(--_fill)),\n\t\t\tlinear-gradient(var(--dt-hover, rgba(15, 15, 15, 0.04)), var(--dt-hover, rgba(15, 15, 15, 0.04))),\n\t\t\tvar(--dt-paper, none),\n\t\t\tvar(--dt-bg, #efebe9);\n\t}\n\t/* Printed states: a cancelled class is struck through; a tentative or\n\t limited one is set in grey with a dashed bar — never a bare opacity. */\n\t.mb-event--cancelled.svelte-zbkzcp .mb-ev-title:where(.svelte-zbkzcp) {\n\t\ttext-decoration: line-through;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.mb-event--cancelled.svelte-zbkzcp .mb-ev-stripe:where(.svelte-zbkzcp) {\n\t\topacity: 0.45; /* decorative bar only */\n\t}\n\t.mb-event--tentative.svelte-zbkzcp .mb-ev-title:where(.svelte-zbkzcp),\n\t.mb-event--full.svelte-zbkzcp .mb-ev-title:where(.svelte-zbkzcp) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.mb-event--tentative.svelte-zbkzcp .mb-ev-stripe:where(.svelte-zbkzcp),\n\t.mb-event--limited.svelte-zbkzcp .mb-ev-stripe:where(.svelte-zbkzcp) {\n\t\tbackground: repeating-linear-gradient(\n\t\t\t180deg,\n\t\t\tvar(--ev-color) 0 4px,\n\t\t\ttransparent 4px 7px\n\t\t);\n\t}\n\t.mb-event--full.svelte-zbkzcp .mb-ev-stripe:where(.svelte-zbkzcp) {\n\t\topacity: 0.45;\n\t}\n\t.mb-event--resizing.svelte-zbkzcp {\n\t\tz-index: 50;\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t\tcursor: ns-resize;\n\t}\n\n\t/* ─── Resize handles ─────────────────────────────── */\n\t/* Resizing lives only on the centered grip column. The old full-width\n\t edge bands (24px of inward slop each) covered short events entirely —\n\t min block height is 24px, so any tap near an edge risked starting a\n\t resize. The grip is persistently visible on touch (hover:none below),\n\t so the smaller target stays discoverable; taps elsewhere open. */\n\t.mb-ev-handle.svelte-zbkzcp {\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t\twidth: 56px;\n\t\theight: 10px;\n\t\tz-index: 2;\n\t\tcursor: ns-resize;\n\t\ttouch-action: none;\n\t}\n\t.mb-ev-handle--start.svelte-zbkzcp { top: 0; }\n\t.mb-ev-handle--end.svelte-zbkzcp { bottom: 0; }\n\t/* Hit-slop: ≥24px effective, extending inward so the block's\n\t overflow clipping can't cut it off. */\n\t.mb-ev-handle.svelte-zbkzcp::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 24px;\n\t}\n\t.mb-ev-handle--start.svelte-zbkzcp::before { top: 0; }\n\t.mb-ev-handle--end.svelte-zbkzcp::before { bottom: 0; }\n\t.mb-ev-handle.svelte-zbkzcp::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t\twidth: 24px;\n\t\theight: 3px;\n\t\tborder-radius: 0;\n\t\tbackground: var(--ev-color);\n\t\topacity: 0;\n\t\ttransition: opacity 120ms;\n\t}\n\t.mb-ev-handle--start.svelte-zbkzcp::after { top: 2px; }\n\t.mb-ev-handle--end.svelte-zbkzcp::after { bottom: 2px; }\n\t.mb-event.svelte-zbkzcp:hover .mb-ev-handle:where(.svelte-zbkzcp)::after,\n\t.mb-event.svelte-zbkzcp:focus-within .mb-ev-handle:where(.svelte-zbkzcp)::after,\n\t.mb-event--resizing.svelte-zbkzcp .mb-ev-handle:where(.svelte-zbkzcp)::after,\n\t.mb-event--selected.svelte-zbkzcp .mb-ev-handle:where(.svelte-zbkzcp)::after { opacity: 0.55; }\n\t/* Finger on the grip column itself: brighten so the hit zone reads */\n\t.mb-ev-handle.svelte-zbkzcp:hover::after { opacity: 0.9; }\n\t/* Touch devices have no hover — show the handles persistently. */\n\t@media (hover: none) {\n\t\t.mb-ev-handle.svelte-zbkzcp::after { opacity: 0.55; }\n\t}\n\n\t/* ─── Drag-to-create ghost ───────────────────────── */\n\t.mb-create-ghost.svelte-zbkzcp {\n\t\tposition: absolute;\n\t\tleft: 40px;\n\t\tright: 4px;\n\t\tz-index: 40;\n\t\tborder-radius: 0;\n\t\tbackground: color-mix(in srgb, var(--dt-accent, #1d4fd7) 12%, transparent);\n\t\tborder: 1px dashed color-mix(in srgb, var(--dt-accent, #1d4fd7) 55%, transparent);\n\t\tdisplay: flex;\n\t\talign-items: flex-start;\n\t\toverflow: hidden;\n\t\tpointer-events: none;\n\t}\n\t.mb-create-ghost-time.svelte-zbkzcp {\n\t\tfont: 500 11px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t\tpadding: 4px 8px;\n\t\twhite-space: nowrap;\n\t}\n\n\t.mb-ev-stripe.svelte-zbkzcp {\n\t\twidth: var(--dt-ev-bar, 3px);\n\t\tbackground: var(--ev-color);\n\t\tflex-shrink: 0;\n\t\tborder-radius: 0;\n\t}\n\n\t.mb-ev-body.svelte-zbkzcp {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t\tpadding: 4px 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 1px;\n\t\tjustify-content: center;\n\t}\n\n\t.mb-ev-title.svelte-zbkzcp {\n\t\tfont: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t.mb-ev-time.svelte-zbkzcp {\n\t\tfont: 400 14px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\n\t.mb-ev-sub.svelte-zbkzcp {\n\t\tfont: 400 12.5px/1.1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t.mb-ev-loc.svelte-zbkzcp {\n\t\tfont: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t.mb-ev-tags.svelte-zbkzcp {\n\t\tdisplay: flex;\n\t\tgap: 4px;\n\t\tmargin-top: 2px;\n\t}\n\n\t.mb-ev-tag.svelte-zbkzcp {\n\t\tfont: 500 11px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--ev-color, var(--dt-accent));\n\t\tbackground: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, transparent);\n\t\tpadding: 2px 5px;\n\t\tborder-radius: 0;\n\t\twhite-space: nowrap;\n\t}\n\n\t.mb-ev-live.svelte-zbkzcp {\n\t\tposition: absolute;\n\t\ttop: 6px;\n\t\tright: 6px;\n\t\twidth: 7px;\n\t\theight: 7px;\n\t\tborder-radius: 50%;\n\t\tbackground: var(--ev-color, var(--dt-accent));\n\t\tanimation: svelte-zbkzcp-mb-pulse 2s ease-in-out infinite;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.mb-ev-live.svelte-zbkzcp { animation: none; }\n\t}\n\t.mb-ev-next-badge.svelte-zbkzcp {\n\t\tposition: absolute;\n\t\ttop: 4px;\n\t\tright: 4px;\n\t\tfont: 500 11px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--ev-color, var(--dt-accent));\n\t\tbackground: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, transparent);\n\t\tpadding: 2px 5px;\n\t\tborder-radius: 0;\n\t\twhite-space: nowrap;\n\t}\n\n\t@keyframes svelte-zbkzcp-mb-pulse {\n\t\t0%, 100% { opacity: 1; }\n\t\t50% { opacity: 0.4; }\n\t}\n\n\t/* ─── Focus ──────────────────────────────────────── */\n\t.mb-event.svelte-zbkzcp:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\n\t/* ─── Container ──────────────────────────────────── */\n\t.mw.svelte-1d18hkf {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tuser-select: none;\n\t\tfont-variant-numeric: tabular-nums;\n\t\toverflow: hidden;\n\t\tbackground: var(--dt-bg, #efebe9);\n\t\t-webkit-tap-highlight-color: transparent;\n\t\ttouch-action: pan-y pinch-zoom;\n\t}\n\t.mw--auto.svelte-1d18hkf { overflow: visible; }\n\n\t/* ─── Scrollable day list ────────────────────────── */\n\t.mw-list.svelte-1d18hkf {\n\t\tflex: 1;\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\toverscroll-behavior: contain;\n\t\t-webkit-overflow-scrolling: touch;\n\t\tscrollbar-width: thin;\n\t\tscrollbar-color: var(--dt-scrollbar, rgba(15, 15, 15, 0.1)) transparent;\n\t}\n\t.mw--auto.svelte-1d18hkf .mw-list:where(.svelte-1d18hkf) { overflow-y: visible; }\n\t.mw-list--animate.svelte-1d18hkf {\n\t\ttransition: transform 180ms ease;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.mw-list--animate.svelte-1d18hkf { transition: none; }\n\t}\n\n\t/* ─── Day row ────────────────────────────────────── */\n\t.mw-row.svelte-1d18hkf {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 12px;\n\t\tposition: relative;\n\t\t/* border-box: width 100% + padding otherwise overflows the list by\n\t\t 24px, which iOS turns into a horizontal pan that clips the date\n\t\t column off the left edge */\n\t\tbox-sizing: border-box;\n\t\tpadding: 10px 12px;\n\t\tbackground: transparent;\n\t\ttransition: background 120ms;\n\t\ttext-align: left;\n\t\twidth: 100%;\n\t\t-webkit-tap-highlight-color: transparent;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tmin-height: 56px;\n\t}\n\t.mw-row.svelte-1d18hkf:last-child {\n\t\tborder-bottom: none;\n\t}\n\t.mw-row.svelte-1d18hkf:has(.mw-row-target:where(.svelte-1d18hkf):active) {\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t.mw-row--today.svelte-1d18hkf {\n\t\tbackground: color-mix(in srgb, var(--dt-accent, #1d4fd7) 4%, transparent);\n\t}\n\t/* Token-based dim (not subtree opacity) so past rows stay legible/tappable */\n\t.mw-row--past.svelte-1d18hkf {\n\t\tbackground: color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 3%, transparent);\n\t}\n\t.mw-row--past.svelte-1d18hkf .mw-ev-title,\n\t.mw-row--past.svelte-1d18hkf .mw-ev-time,\n\t.mw-row--past.svelte-1d18hkf .mw-day-num:where(.svelte-1d18hkf) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.mw-row--disabled.svelte-1d18hkf {\n\t\tbackground-image: repeating-linear-gradient(\n\t\t\t135deg,\n\t\t\ttransparent,\n\t\t\ttransparent 6px,\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 6px,\n\t\t\tcolor-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 12px\n\t\t);\n\t}\n\t.mw-row-target.svelte-1d18hkf {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tz-index: 0;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tcursor: pointer;\n\t\tpadding: 0;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t.mw-row-target.svelte-1d18hkf:disabled {\n\t\tcursor: default;\n\t}\n\t.mw-row-target.svelte-1d18hkf:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-text, #0f0f0f);\n\t}\n\n\t/* ─── Date column ────────────────────────────────── */\n\t.mw-date.svelte-1d18hkf {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\twidth: 40px;\n\t\tflex-shrink: 0;\n\t\tgap: 2px;\n\t\tposition: relative;\n\t\tz-index: 1;\n\t\tpointer-events: none;\n\t}\n\n\t.mw-day-name.svelte-1d18hkf {\n\t\tfont: 500 12px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tletter-spacing: 0.08em;\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.mw-day-name--today.svelte-1d18hkf {\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t}\n\n\t/* The date is the typography: large and regular, narrowed like the planner's */\n\t.mw-day-num.svelte-1d18hkf {\n\t\tfont: 400 22px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-stretch: 90%;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tletter-spacing: -0.02em;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\t.mw-day-num--today.svelte-1d18hkf {\n\t\tcolor: var(--dt-accent, #1d4fd7);\n\t}\n\n\t/* ─── Events column ──────────────────────────────── */\n\t/* pointer-events pass through to the full-row target underneath;\n\t only the chips (and \"+N more\") re-capture them. */\n\t.mw-events.svelte-1d18hkf {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 4px;\n\t\tposition: relative;\n\t\tz-index: 2;\n\t\tpointer-events: none;\n\t}\n\n\t.mw-empty.svelte-1d18hkf {\n\t\tfont: 400 13px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\n\t/* ─── Event chip ─────────────────────────────────── */\n\t.mw-ev.svelte-1d18hkf {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 0;\n\t\tmin-height: 44px;\n\t\tborder-radius: 0;\n\t\tbackground: transparent;\n\t\t/* eventFill: a wash in the event's colour; hover/current set background-color under it */\n\t\t--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);\n\t\tbackground-image: linear-gradient(var(--_fill), var(--_fill));\n\t\toverflow: hidden;\n\t\tcursor: pointer;\n\t\ttransition: background 120ms;\n\t\t-webkit-tap-highlight-color: transparent;\n\t\tborder: none;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));\n\t\ttext-align: left;\n\t\tpadding: 0;\n\t\tpointer-events: auto;\n\t}\n\t.mw-ev.svelte-1d18hkf:hover,\n\t.mw-ev.svelte-1d18hkf:active {\n\t\tbackground-color: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t.mw-ev--selected.svelte-1d18hkf {\n\t\tbox-shadow: inset 0 0 0 1px var(--ev-color);\n\t}\n\t.mw-ev--current.svelte-1d18hkf {\n\t\tbackground-color: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));\n\t}\n\t/* All day: a solid band on the event colour, no tint. */\n\t.mw-ev--allday.svelte-1d18hkf {\n\t\tbackground: var(--dt-paper, none) var(--ev-color);\n\t\tbackground-blend-mode: multiply;\n\t\tcolor: var(--dt-btn-text, #fff);\n\t}\n\t.mw-ev--allday.svelte-1d18hkf:hover,\n\t.mw-ev--allday.svelte-1d18hkf:active {\n\t\tbackground: var(--dt-paper, none) var(--ev-color);\n\t\tfilter: brightness(1.08);\n\t}\n\t.mw-ev--allday.svelte-1d18hkf .mw-ev-title:where(.svelte-1d18hkf),\n\t.mw-ev--allday.svelte-1d18hkf .mw-ev-time:where(.svelte-1d18hkf) {\n\t\tcolor: inherit;\n\t}\n\t.mw-ev--allday.mw-ev--selected.svelte-1d18hkf {\n\t\tbox-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);\n\t}\n\t/* Printed states: a cancelled class is struck through; a tentative or\n\t limited one is set in grey with a dashed bar — never a bare opacity. */\n\t.mw-ev--cancelled.svelte-1d18hkf .mw-ev-title:where(.svelte-1d18hkf) {\n\t\ttext-decoration: line-through;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.mw-ev--cancelled.svelte-1d18hkf .mw-ev-stripe:where(.svelte-1d18hkf) {\n\t\topacity: 0.45; /* decorative bar only */\n\t}\n\t.mw-ev--tentative.svelte-1d18hkf .mw-ev-title:where(.svelte-1d18hkf),\n\t.mw-ev--full.svelte-1d18hkf .mw-ev-title:where(.svelte-1d18hkf) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t}\n\t.mw-ev--tentative.svelte-1d18hkf .mw-ev-stripe:where(.svelte-1d18hkf),\n\t.mw-ev--limited.svelte-1d18hkf .mw-ev-stripe:where(.svelte-1d18hkf) {\n\t\tbackground: repeating-linear-gradient(\n\t\t\t180deg,\n\t\t\tvar(--ev-color) 0 4px,\n\t\t\ttransparent 4px 7px\n\t\t);\n\t}\n\t.mw-ev--full.svelte-1d18hkf .mw-ev-stripe:where(.svelte-1d18hkf) {\n\t\topacity: 0.45;\n\t}\n\n\t.mw-ev-stripe.svelte-1d18hkf {\n\t\twidth: var(--dt-ev-bar, 3px);\n\t\talign-self: stretch;\n\t\tbackground: var(--ev-color, var(--dt-accent));\n\t\tflex-shrink: 0;\n\t\tborder-radius: 0;\n\t}\n\n\t.mw-ev-body.svelte-1d18hkf {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t\tpadding: 5px 8px;\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 6px;\n\t}\n\n\t.mw-ev-title.svelte-1d18hkf {\n\t\tfont: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t}\n\n\t.mw-ev-time.svelte-1d18hkf {\n\t\tfont: 400 14px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\twhite-space: nowrap;\n\t\tflex-shrink: 0;\n\t}\n\n\t.mw-ev-more.svelte-1d18hkf {\n\t\tfont: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\tpadding: 2px 4px;\n\t\tmin-height: 32px;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tcursor: pointer;\n\t\ttext-align: left;\n\t\talign-self: flex-start;\n\t\tposition: relative;\n\t\tpointer-events: auto;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t@media (pointer: coarse) {\n\t\t.mw-ev-more.svelte-1d18hkf {\n\t\t\tmin-height: 44px;\n\t\t\tmin-width: 44px;\n\t\t}\n\t}\n\t.mw-ev-more.svelte-1d18hkf:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);\n\t}\n\n\t/* ─── Chevron ────────────────────────────────────── */\n\t.mw-chevron.svelte-1d18hkf {\n\t\tflex-shrink: 0;\n\t\tcolor: var(--dt-text-3, rgba(15, 15, 15, 0.38));\n\t\tposition: relative;\n\t\tz-index: 1;\n\t\tpointer-events: none;\n\t}\n\n\t/* ─── Focus ──────────────────────────────────────── */\n\t.mw-ev.svelte-1d18hkf:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t}\n\n\t.mg.svelte-pvjuld {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tbackground: var(--dt-bg);\n\t\tcolor: var(--dt-text);\n\t\tfont-family: var(--dt-sans);\n\t\toverflow: hidden;\n\t\tcontainer-type: inline-size;\n\t}\n\t.mg--auto.svelte-pvjuld {\n\t\theight: auto;\n\t}\n\n\t.mg-head.svelte-pvjuld {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(7, 1fr);\n\t\tborder-bottom: 1px solid var(--dt-border);\n\t\tflex: none;\n\t}\n\t.mg-head-cell.svelte-pvjuld {\n\t\tpadding: 6px 8px;\n\t\tfont: 500 12px/1.2 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.08em;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\n\t.mg-body.svelte-pvjuld {\n\t\tflex: 1;\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(7, 1fr);\n\t\t/* 56px floor + scroll backstop: a 6-row month compresses instead of clipping its last week */\n\t\tgrid-template-rows: repeat(var(--mg-rows, 5), minmax(56px, 1fr));\n\t\tmin-height: 0;\n\t\toverflow-y: auto;\n\t}\n\t.mg--auto.svelte-pvjuld .mg-body:where(.svelte-pvjuld) {\n\t\tgrid-template-rows: repeat(var(--mg-rows, 5), minmax(88px, auto));\n\t}\n\t.mg-row.svelte-pvjuld {\n\t\tdisplay: contents;\n\t}\n\n\t.mg-cell.svelte-pvjuld {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 3px;\n\t\tpadding: 6px;\n\t\tborder-right: 1px solid var(--dt-border-day);\n\t\tborder-bottom: 1px solid var(--dt-border-day);\n\t\tmin-width: 0;\n\t\toverflow: hidden;\n\t\ttext-align: left;\n\t}\n\t.mg-cell.svelte-pvjuld:nth-child(7n) {\n\t\tborder-right: none;\n\t}\n\t.mg-cell--weekend.svelte-pvjuld {\n\t\tbackground: var(--dt-weekend-bg, rgba(15, 15, 15, 0.02));\n\t}\n\t/* Dim only the day number for adjacent-month cells — their events stay\n\t legible. text-2, not text-3: a 22px numeral still needs 4.5:1. */\n\t.mg-cell--out.svelte-pvjuld {\n\t\tbackground: var(--dt-surface, transparent);\n\t}\n\t.mg-cell--out.svelte-pvjuld .mg-daynum:where(.svelte-pvjuld) {\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.66));\n\t}\n\t.mg-cell--today.svelte-pvjuld {\n\t\tbackground: var(--dt-today-bg);\n\t}\n\t.mg-cell--expanded.svelte-pvjuld .mg-chips:where(.svelte-pvjuld) {\n\t\toverflow-y: auto;\n\t}\n\t.mg-cell--disabled.svelte-pvjuld {\n\t\topacity: 0.35;\n\t\tpointer-events: none;\n\t}\n\t.mg-cell--clickable.svelte-pvjuld {\n\t\tcursor: pointer;\n\t}\n\t.mg-cell--clickable.svelte-pvjuld:hover {\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t.mg-cell.svelte-pvjuld:focus-visible {\n\t\toutline: 2px solid var(--dt-text, #0f0f0f);\n\t\toutline-offset: -2px;\n\t}\n\n\t/* Starts where the weekday name above it starts (6px cell + 2px = the\n\t header's 8px), and is only as wide as its digits, so today's rule is too. */\n\t.mg-daynum.svelte-pvjuld {\n\t\tflex: none;\n\t\talign-self: flex-start;\n\t\tpadding: 0 2px;\n\t\tfont-family: var(--dt-sans, system-ui, sans-serif);\n\t\tfont-size: 22px;\n\t\tfont-weight: 400;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text);\n\t\theight: 26px;\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t}\n\t/* Today: accent numeral on a 2px rule — the same mark in every view. */\n\t.mg-daynum--today.svelte-pvjuld {\n\t\tcolor: var(--dt-accent);\n\t\tbox-shadow: inset 0 -2px 0 var(--dt-accent);\n\t}\n\n\t.mg-chips.svelte-pvjuld {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 2px;\n\t\tmin-height: 0;\n\t\toverflow: hidden;\n\t}\n\t.mg-chip.svelte-pvjuld {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 5px;\n\t\tborder: none;\n\t\tbackground: none;\n\t\t/* eventFill: a wash in the event's colour; hover/current set background-color under it */\n\t\t--_fill: color-mix(in srgb, var(--mg-chip-color) var(--dt-ev-fill, 0%), transparent);\n\t\tbackground-image: linear-gradient(var(--_fill), var(--_fill));\n\t\tpadding: 1px 4px;\n\t\tborder-radius: 0;\n\t\tfont: 400 12.5px/1.3 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text);\n\t\tcursor: pointer;\n\t\tmin-width: 0;\n\t\ttext-align: left;\n\t}\n\t.mg-chip.svelte-pvjuld:hover {\n\t\tbackground-color: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t}\n\t.mg-chip.svelte-pvjuld:focus-visible {\n\t\tbox-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);\n\t\toutline: none;\n\t}\n\t.mg-chip--selected.svelte-pvjuld {\n\t\tbackground-color: var(--dt-accent-dim);\n\t}\n\t.mg-chip--cancelled.svelte-pvjuld {\n\t\ttext-decoration: line-through;\n\t}\n\t.mg-chip--cancelled.svelte-pvjuld .mg-chip-title:where(.svelte-pvjuld) {\n\t\tcolor: var(--dt-text-2);\n\t}\n\t.mg-chip--cancelled.svelte-pvjuld .mg-chip-dot:where(.svelte-pvjuld) {\n\t\topacity: 0.5;\n\t}\n\t.mg-chip-dot.svelte-pvjuld {\n\t\tflex: none;\n\t\talign-self: stretch;\n\t\twidth: var(--dt-ev-bar, 3px);\n\t\tborder-radius: 0;\n\t\tbackground: var(--mg-chip-color);\n\t}\n\t.mg-chip-time.svelte-pvjuld {\n\t\tflex: none;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text-2);\n\t}\n\t.mg-chip-title.svelte-pvjuld {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\t/* A Latin title in RTL keeps its own direction: the ellipsis cuts its end */\n\t\tunicode-bidi: plaintext;\n\t\ttext-align: left;\n\t}\n\t/* …but it sits on the calendar's side, by the bar */\n\t.mg-chip-title.svelte-pvjuld:dir(rtl) { text-align: right; }\n\t.mg-more.svelte-pvjuld {\n\t\talign-self: flex-start;\n\t\tborder: none;\n\t\tbackground: none;\n\t\tpadding: 1px 4px;\n\t\tborder-radius: 0;\n\t\tfont: 400 12.5px/1.3 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tcolor: var(--dt-text-2);\n\t\tcursor: pointer;\n\t}\n\t.mg-more.svelte-pvjuld:hover {\n\t\tbackground: var(--dt-hover, rgba(15, 15, 15, 0.04));\n\t\tcolor: var(--dt-text);\n\t}\n\t.mg-more.svelte-pvjuld:focus-visible {\n\t\tbox-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);\n\t\toutline: none;\n\t}\n\n\t/* Container-based (the calendar adapts to its box, not the viewport) */\n\t@container (max-width: 640px) {\n\t\t.mg-chip-time.svelte-pvjuld {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t@media (hover: none) {\n\t\t.mg-chip.svelte-pvjuld,\n\t\t.mg-more.svelte-pvjuld {\n\t\t\tmin-height: 30px;\n\t\t}\n\t}\n\n\t/* ── Dots mode (mobile) ─────────────────────────────\n\t Cells are too narrow for text chips, so events render as colored\n\t dots in a wrapping row. The cell itself stays the tap target\n\t (day drill-down) and its label counts the events; dots are aria-hidden. */\n\t.mg--dots.svelte-pvjuld .mg-chips:where(.svelte-pvjuld) {\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t\talign-items: center;\n\t\tgap: 3px;\n\t}\n\t/* The cell is the target: at least a 44px tap, dots never take the hit. */\n\t.mg--dots.svelte-pvjuld .mg-cell:where(.svelte-pvjuld) {\n\t\tmin-height: 44px;\n\t}\n\t.mg--dots.svelte-pvjuld .mg-chips:where(.svelte-pvjuld) {\n\t\tpointer-events: none;\n\t}\n\t.mg--dots.svelte-pvjuld .mg-chip:where(.svelte-pvjuld) {\n\t\tpadding: 3px;\n\t\tbackground-image: none; /* a mark, not a chip: no eventFill wash */\n\t\tmin-height: 0;\n\t}\n\t.mg--dots.svelte-pvjuld .mg-chip-title:where(.svelte-pvjuld),\n\t.mg--dots.svelte-pvjuld .mg-chip-time:where(.svelte-pvjuld) {\n\t\tdisplay: none;\n\t}\n\t/* Marks are circles, like every dot in the calendar */\n\t.mg--dots.svelte-pvjuld .mg-chip-dot:where(.svelte-pvjuld) {\n\t\talign-self: center;\n\t\twidth: 7px;\n\t\theight: 7px;\n\t\tborder-radius: 50%;\n\t}\n\t.mg--dots.svelte-pvjuld .mg-more:where(.svelte-pvjuld) {\n\t\tpadding: 0 3px;\n\t\tmin-height: 0;\n\t\talign-self: center;\n\t\tfont-size: 11px;\n\t}\n\n\t.cal.svelte-1b53e7w {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\tmin-width: 0;\n\t\theight: var(--cal-h, 600px);\n\t\tbackground: var(--dt-paper, none), var(--dt-bg, inherit);\n\t\tborder-radius: var(--cal-r, 0);\n\t\toverflow: clip;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tborder: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tbox-sizing: border-box;\n\t}\n\t.cal--auto.svelte-1b53e7w {\n\t\theight: auto;\n\t\toverflow: visible;\n\t}\n\n\n\t/* ── Header: the period set large as the page's title, the view switch as\n\t plain text, Today ‹ › in 2px ink frames, one rule to the grid. ── */\n\t.cal-hd.svelte-1b53e7w {\n\t\t/* Controls take a small corner that follows the calendar's own radius */\n\t\t--cal-ctl-r: clamp(4px, calc(var(--cal-r, 0px) / 2), 8px);\n\t\t--cal-ctl-h: 36px;\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\talign-items: center;\n\t\tgap: 10px 24px;\n\t\tpadding: 14px 16px 12px;\n\t\tborder-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));\n\t\tflex-shrink: 0;\n\t\tbox-sizing: border-box;\n\t\tfont-family: var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t}\n\n\t.cal-hd-title.svelte-1b53e7w {\n\t\tflex: 1 1 auto;\n\t\tmin-width: 0;\n\t\tfont: 400 32px/1.1 var(--dt-sans, system-ui, sans-serif);\n\t\tfont-stretch: 90%;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tletter-spacing: -0.02em;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t.cal-sr.svelte-1b53e7w {\n\t\tposition: absolute;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\tmargin: -1px;\n\t\tpadding: 0;\n\t\toverflow: hidden;\n\t\tclip-path: inset(50%);\n\t\twhite-space: nowrap;\n\t\tborder: 0;\n\t}\n\n\t.cal-hd-nav.svelte-1b53e7w {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t}\n\t.cal-hd-nav.svelte-1b53e7w:empty {\n\t\tdisplay: none;\n\t}\n\n\t.cal-hd-today.svelte-1b53e7w,\n\t.cal-hd-btn.svelte-1b53e7w {\n\t\tbox-sizing: border-box;\n\t\theight: var(--cal-ctl-h);\n\t\tborder: 2px solid var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tborder-radius: var(--cal-ctl-r);\n\t\tbackground: transparent;\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\tcursor: pointer;\n\t\ttransition: background-color 120ms, opacity 120ms;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t.cal-hd-today.svelte-1b53e7w {\n\t\tpadding: 0 14px;\n\t\tfont: 400 15px/1 var(--dt-sans, system-ui, sans-serif);\n\t\twhite-space: nowrap;\n\t}\n\t.cal-hd-btn.svelte-1b53e7w {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t\twidth: var(--cal-ctl-h);\n\t\tpadding: 0;\n\t}\n\t/* The chevrons point along the reading direction */\n\t.cal-hd-btn.svelte-1b53e7w:dir(rtl) svg:where(.svelte-1b53e7w) {\n\t\ttransform: scaleX(-1);\n\t}\n\t.cal-hd-today.svelte-1b53e7w:hover:not(:disabled),\n\t.cal-hd-btn.svelte-1b53e7w:hover {\n\t\tbackground: var(--dt-hover, color-mix(in srgb, currentColor 6%, transparent));\n\t}\n\t.cal-hd-today.svelte-1b53e7w:active:not(:disabled),\n\t.cal-hd-btn.svelte-1b53e7w:active {\n\t\tbackground: color-mix(in srgb, var(--dt-text, #0f0f0f) 12%, transparent);\n\t}\n\t/* Today is already in view: the frame stays, quietly */\n\t.cal-hd-today.svelte-1b53e7w:disabled {\n\t\topacity: 0.4;\n\t\tcursor: default;\n\t}\n\n\t.cal-hd-today.svelte-1b53e7w:focus-visible,\n\t.cal-hd-btn.svelte-1b53e7w:focus-visible,\n\t.cal-pill.svelte-1b53e7w:focus-visible {\n\t\toutline: 2px solid var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\toutline-offset: 2px;\n\t}\n\n\t/* View switch: plain text; the chosen one is ink over a 2px ink rule.\n\t The accent keeps its three jobs. */\n\t.cal-pills.svelte-1b53e7w {\n\t\tdisplay: flex;\n\t\tgap: 16px;\n\t\tflex-shrink: 0;\n\t}\n\t/* A hairline between the view-type and the day/week/month rows */\n\t.cal-pills--labels.svelte-1b53e7w + .cal-pills:where(.svelte-1b53e7w) {\n\t\talign-self: stretch;\n\t\talign-items: center;\n\t\tpadding-inline-start: 24px;\n\t\tborder-inline-start: 1px solid var(--dt-border, rgba(15, 15, 15, 0.12));\n\t}\n\t.cal-pill.svelte-1b53e7w {\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tcolor: var(--dt-text-2, rgba(15, 15, 15, 0.54));\n\t\tcursor: pointer;\n\t\tfont: 400 15px/1 var(--dt-sans, system-ui, sans-serif);\n\t\tmin-height: var(--cal-ctl-h);\n\t\t/* 4px of air for the focus ring, given back so the row keeps its rhythm */\n\t\tpadding: 0 4px;\n\t\tmargin: 0 -4px;\n\t\tborder-radius: 0;\n\t\twhite-space: nowrap;\n\t\ttext-decoration: underline 2px transparent;\n\t\ttext-underline-offset: 7px;\n\t\ttransition: color 120ms, text-decoration-color 120ms;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t/* :not(--active) — iOS keeps :hover stuck after a tap */\n\t.cal-pill.svelte-1b53e7w:hover:not(.cal-pill--active) {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\ttext-decoration-color: var(--dt-border-day, var(--dt-border, rgba(15, 15, 15, 0.3)));\n\t}\n\t.cal-pill--active.svelte-1b53e7w {\n\t\tcolor: var(--dt-text, rgba(15, 15, 15, 0.87));\n\t\ttext-decoration-color: currentColor;\n\t}\n\n\t/* Compact (mobile) header: same drawing, smaller title, tighter gaps */\n\t.cal-hd--mobile.svelte-1b53e7w {\n\t\t--cal-ctl-h: 40px;\n\t\tgap: 8px 12px;\n\t\tpadding: 10px 8px 8px;\n\t}\n\t.cal-hd--mobile.svelte-1b53e7w .cal-hd-title:where(.svelte-1b53e7w) {\n\t\tfont-size: 22px;\n\t}\n\t.cal-hd--mobile.svelte-1b53e7w .cal-pills:where(.svelte-1b53e7w) {\n\t\tgap: 12px;\n\t}\n\t.cal-hd--mobile.svelte-1b53e7w .cal-pill:where(.svelte-1b53e7w) {\n\t\tfont-size: 14px;\n\t}\n\t.cal-hd--mobile.svelte-1b53e7w .cal-hd-today:where(.svelte-1b53e7w) {\n\t\tpadding: 0 10px;\n\t\tfont-size: 14px;\n\t}\n\t.cal-hd--mobile.svelte-1b53e7w .cal-hd-nav:where(.svelte-1b53e7w) {\n\t\tgap: 6px;\n\t\tmargin-inline-start: auto;\n\t}\n\t/* Narrow containers: the title takes its own row above the controls */\n\t.cal-hd--stack.svelte-1b53e7w .cal-hd-title:where(.svelte-1b53e7w):not(:empty) {\n\t\tflex-basis: 100%;\n\t}\n\n\t@media (pointer: coarse) {\n\t\t.cal-hd.svelte-1b53e7w {\n\t\t\t--cal-ctl-h: 44px;\n\t\t}\n\t\t.cal-pill.svelte-1b53e7w {\n\t\t\tmin-width: 44px;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.cal-hd-today.svelte-1b53e7w,\n\t\t.cal-hd-btn.svelte-1b53e7w,\n\t\t.cal-pill.svelte-1b53e7w {\n\t\t\ttransition: none;\n\t\t}\n\t}\n\n\t.cal-body.svelte-1b53e7w {\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t}\n\t.cal--auto.svelte-1b53e7w .cal-body:where(.svelte-1b53e7w) {\n\t\toverflow: visible;\n\t}\n\t.cal-body--unmeasured.svelte-1b53e7w {\n\t\tvisibility: hidden;\n\t\tanimation: svelte-1b53e7w-cal-reveal 0s 1.5s forwards;\n\t}\n\t@keyframes svelte-1b53e7w-cal-reveal { to { visibility: visible; } }\n\n\t.cal-empty.svelte-1b53e7w {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\theight: 100%;\n\t\tfont: 400 13px / 1 var(--dt-sans, system-ui, sans-serif);\n\t\tcolor: var(--dt-text-3, rgba(15, 15, 15, 0.38));\n\t}\n\n\t.cal-loading.svelte-1b53e7w {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 2px;\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\ttransparent 0%,\n\t\t\tvar(--dt-accent, #1d4fd7) 50%,\n\t\t\ttransparent 100%\n\t\t);\n\t\tanimation: svelte-1b53e7w-cal-slide 1.2s ease-in-out infinite;\n\t}\n\n\t@keyframes svelte-1b53e7w-cal-slide {\n\t\t0% { transform: translateX(-100%); }\n\t\t100% { transform: translateX(100%); }\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.cal-loading.svelte-1b53e7w {\n\t\t\tanimation: none;\n\t\t\tbackground: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));\n\t\t}\n\t}\n\n/*$vite$:1*/";
2
2
  (function() {
3
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/shared/utils.js
3
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/shared/utils.js
4
4
  var is_array = Array.isArray;
5
5
  var index_of = Array.prototype.indexOf;
6
6
  var includes = Array.prototype.includes;
@@ -42,8 +42,7 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
42
42
  reject
43
43
  };
44
44
  }
45
- //#endregion
46
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/constants.js
45
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/constants.js
47
46
  /**
48
47
  * An effect that does not destroy its child effects when it reruns.
49
48
  * Runs as part of render effects, i.e. not eagerly as part of tree traversal or effect flushing.
@@ -84,8 +83,7 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
84
83
  message = "The reaction that called `getAbortSignal()` was re-run or destroyed";
85
84
  }();
86
85
  var IS_XHTML = !!globalThis.document?.contentType && /* @__PURE__ */ globalThis.document.contentType.includes("xml");
87
- //#endregion
88
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/constants.js
86
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/constants.js
89
87
  var HYDRATION_ERROR = {};
90
88
  var UNINITIALIZED = Symbol("uninitialized");
91
89
  var NAMESPACE_HTML = "http://www.w3.org/1999/xhtml";
@@ -108,8 +106,7 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
108
106
  function svelte_boundary_reset_noop() {
109
107
  console.warn(`https://svelte.dev/e/svelte_boundary_reset_noop`);
110
108
  }
111
- //#endregion
112
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/hydration.js
109
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/hydration.js
113
110
  /** @import { TemplateNode } from '#client' */
114
111
  /**
115
112
  * Use this variable to guard everything related to hydration code so it can be treeshaken out
@@ -187,8 +184,7 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
187
184
  }
188
185
  return node.data;
189
186
  }
190
- //#endregion
191
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/reactivity/equality.js
187
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/reactivity/equality.js
192
188
  /** @import { Equals } from '#client' */
193
189
  /** @type {Equals} */
194
190
  function equals(value) {
@@ -221,8 +217,7 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
221
217
  function set_context_after_init() {
222
218
  throw new Error(`https://svelte.dev/e/set_context_after_init`);
223
219
  }
224
- //#endregion
225
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/errors.js
220
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/errors.js
226
221
  /**
227
222
  * Cannot create a `$derived(...)` with an `await` expression outside of an effect tree
228
223
  * @returns {never}
@@ -306,14 +301,12 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
306
301
  function svelte_boundary_reset_onerror() {
307
302
  throw new Error(`https://svelte.dev/e/svelte_boundary_reset_onerror`);
308
303
  }
309
- //#endregion
310
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/flags/index.js
304
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/flags/index.js
311
305
  /** True if experimental.async=true */
312
306
  var async_mode_flag = false;
313
307
  /** True if we're not certain that we only have Svelte 5 code in the compilation */
314
308
  var legacy_mode_flag = false;
315
- //#endregion
316
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/shared/context.js
309
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/shared/context.js
317
310
  /**
318
311
  * @typedef {{ p: Context | null, c: Map<unknown, unknown> | null }} Context
319
312
  */
@@ -335,8 +328,7 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
335
328
  if (context === null) lifecycle_outside_component(name);
336
329
  return context.c ??= new Map(get_parent_context(context) || void 0);
337
330
  }
338
- //#endregion
339
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/context.js
331
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/context.js
340
332
  /** @import { ComponentContext, DevStackEntry, Effect } from '#client' */
341
333
  /** @type {ComponentContext | null} */
342
334
  var component_context = null;
@@ -433,8 +425,7 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
433
425
  function is_runes() {
434
426
  return !legacy_mode_flag || component_context !== null && component_context.l === null;
435
427
  }
436
- //#endregion
437
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/task.js
428
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/task.js
438
429
  /** @type {Array<() => void>} */
439
430
  var micro_tasks = [];
440
431
  function run_micro_tasks() {
@@ -460,8 +451,7 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
460
451
  function flush_tasks() {
461
452
  while (micro_tasks.length > 0) run_micro_tasks();
462
453
  }
463
- //#endregion
464
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/reactivity/status.js
454
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/reactivity/status.js
465
455
  /** @import { Derived, Signal } from '#client' */
466
456
  var STATUS_MASK = ~(DIRTY | MAYBE_DIRTY | CLEAN);
467
457
  /**
@@ -479,8 +469,7 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
479
469
  if ((derived.f & 512) !== 0 || derived.deps === null) set_signal_status(derived, CLEAN);
480
470
  else set_signal_status(derived, MAYBE_DIRTY);
481
471
  }
482
- //#endregion
483
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/reactivity/utils.js
472
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/reactivity/utils.js
484
473
  /** @import { Effect } from '#client' */
485
474
  /**
486
475
  * @param {Effect} effect
@@ -492,8 +481,7 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
492
481
  else if ((effect.f & 4096) !== 0) maybe_dirty_effects.add(effect);
493
482
  set_signal_status(effect, CLEAN);
494
483
  }
495
- //#endregion
496
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/elements/bindings/shared.js
484
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/elements/bindings/shared.js
497
485
  /**
498
486
  * @template T
499
487
  * @param {() => T} fn
@@ -510,8 +498,7 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
510
498
  set_active_effect(previous_effect);
511
499
  }
512
500
  }
513
- //#endregion
514
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/reactivity/async.js
501
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/reactivity/async.js
515
502
  /** @import { Blocker, Effect, Source, Value } from '#client' */
516
503
  /**
517
504
  * @param {Blocker[]} blockers
@@ -802,8 +789,7 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
802
789
  if (derived.effects === null) return;
803
790
  for (const e of derived.effects) if (e.teardown && e.fn !== null) update_effect(e);
804
791
  }
805
- //#endregion
806
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/reactivity/batch.js
792
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/reactivity/batch.js
807
793
  /** @import { Fork } from 'svelte' */
808
794
  /** @import { Derived, Effect, Reaction, Source, Value } from '#client' */
809
795
  /** @type {Batch | null} */
@@ -1570,8 +1556,7 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
1570
1556
  e = e.next;
1571
1557
  }
1572
1558
  }
1573
- //#endregion
1574
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/reactivity/sources.js
1559
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/reactivity/sources.js
1575
1560
  /** @import { Derived, Effect, Source, Value } from '#client' */
1576
1561
  /** @type {Set<Effect>} */
1577
1562
  var eager_effects = /* @__PURE__ */ new Set();
@@ -1897,8 +1882,7 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
1897
1882
  }
1898
1883
  });
1899
1884
  }
1900
- //#endregion
1901
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/operations.js
1885
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/operations.js
1902
1886
  /** @import { Effect, TemplateNode } from '#client' */
1903
1887
  /** @type {Window} */
1904
1888
  var $window;
@@ -2123,8 +2107,7 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
2123
2107
  }
2124
2108
  throw error;
2125
2109
  }
2126
- //#endregion
2127
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/reactivity/effects.js
2110
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/reactivity/effects.js
2128
2111
  /** @import { Blocker, ComponentContext, ComponentContextLegacy, Derived, Effect, TemplateNode, TransitionManager } from '#client' */
2129
2112
  /**
2130
2113
  * @param {'$effect' | '$effect.pre' | '$inspect'} rune
@@ -2510,15 +2493,13 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
2510
2493
  node = next;
2511
2494
  }
2512
2495
  }
2513
- //#endregion
2514
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/legacy.js
2496
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/legacy.js
2515
2497
  /**
2516
2498
  * @type {Set<Value> | null}
2517
2499
  * @deprecated
2518
2500
  */
2519
2501
  var captured_signals = null;
2520
- //#endregion
2521
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/runtime.js
2502
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/runtime.js
2522
2503
  /** @import { Derived, Effect, Reaction, Source, Value } from '#client' */
2523
2504
  var is_destroying_effect = false;
2524
2505
  /** @param {boolean} value */
@@ -2895,8 +2876,7 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
2895
2876
  function is_passive_event(name) {
2896
2877
  return PASSIVE_EVENTS.includes(name);
2897
2878
  }
2898
- //#endregion
2899
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/elements/events.js
2879
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/elements/events.js
2900
2880
  /**
2901
2881
  * Used on elements, as a map of event type -> event handler,
2902
2882
  * and on events themselves to track which element handled an event
@@ -3063,8 +3043,7 @@ globalThis.__DAY_CALENDAR_CSS__ = ":host{display:block}\n\t/* ─── Containe
3063
3043
  set_active_effect(previous_effect);
3064
3044
  }
3065
3045
  }
3066
- //#endregion
3067
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/reconciler.js
3046
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/reconciler.js
3068
3047
  var policy = globalThis?.window?.trustedTypes && /* @__PURE__ */ globalThis.window.trustedTypes.createPolicy("svelte-trusted-html", {
3069
3048
  /** @param {string} html */
3070
3049
  createHTML: (html) => {
@@ -3082,8 +3061,7 @@ createHTML: (html) => {
3082
3061
  elem.innerHTML = create_trusted_html(html.replaceAll("<!>", "<!---->"));
3083
3062
  return elem.content;
3084
3063
  }
3085
- //#endregion
3086
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/template.js
3064
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/template.js
3087
3065
  /** @import { Effect, EffectNodes, TemplateNode } from '#client' */
3088
3066
  /** @import { TemplateStructure } from './types' */
3089
3067
  /**
@@ -3182,8 +3160,7 @@ createHTML: (html) => {
3182
3160
  if (anchor === null) return;
3183
3161
  anchor.before(dom);
3184
3162
  }
3185
- //#endregion
3186
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/reactivity/create-subscriber.js
3163
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/reactivity/create-subscriber.js
3187
3164
  /**
3188
3165
  * Returns a `subscribe` function that integrates external event-based systems with Svelte's reactivity.
3189
3166
  * It's particularly useful for integrating with web APIs like `MediaQuery`, `IntersectionObserver`, or `WebSocket`.
@@ -3255,8 +3232,7 @@ createHTML: (html) => {
3255
3232
  }
3256
3233
  };
3257
3234
  }
3258
- //#endregion
3259
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/blocks/boundary.js
3235
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/blocks/boundary.js
3260
3236
  /** @import { Effect, Source, TemplateNode, } from '#client' */
3261
3237
  /**
3262
3238
  * @typedef {{
@@ -3636,8 +3612,7 @@ createHTML: (html) => {
3636
3612
  });
3637
3613
  }
3638
3614
  };
3639
- //#endregion
3640
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/render.js
3615
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/render.js
3641
3616
  /** @import { ComponentContext, Effect, EffectNodes, TemplateNode } from '#client' */
3642
3617
  /** @import { Component, ComponentType, SvelteComponent, MountOptions } from '../../index.js' */
3643
3618
  /**
@@ -3779,8 +3754,7 @@ createHTML: (html) => {
3779
3754
  }
3780
3755
  return Promise.resolve();
3781
3756
  }
3782
- //#endregion
3783
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/blocks/branches.js
3757
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/blocks/branches.js
3784
3758
  /** @import { Effect, TemplateNode } from '#client' */
3785
3759
  /**
3786
3760
  * @typedef {{ effect: Effect, fragment: DocumentFragment }} Branch
@@ -3927,8 +3901,7 @@ createHTML: (html) => {
3927
3901
  }
3928
3902
  }
3929
3903
  };
3930
- //#endregion
3931
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/blocks/if.js
3904
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/blocks/if.js
3932
3905
  /** @import { TemplateNode } from '#client' */
3933
3906
  /**
3934
3907
  * @param {TemplateNode} node
@@ -3973,8 +3946,7 @@ createHTML: (html) => {
3973
3946
  if (!has_branch) update_branch(-1, null);
3974
3947
  }, flags);
3975
3948
  }
3976
- //#endregion
3977
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/blocks/each.js
3949
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/blocks/each.js
3978
3950
  /** @import { EachItem, EachOutroGroup, EachState, Effect, EffectNodes, MaybeSource, TemplateNode, TransitionManager } from '#client' */
3979
3951
  /** @import { Batch } from '../../reactivity/batch.js'; */
3980
3952
  /**
@@ -4389,8 +4361,7 @@ createHTML: (html) => {
4389
4361
  if (next === null) state.effect.last = prev;
4390
4362
  else next.prev = prev;
4391
4363
  }
4392
- //#endregion
4393
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/blocks/snippet.js
4364
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/blocks/snippet.js
4394
4365
  /** @import { Snippet } from 'svelte' */
4395
4366
  /** @import { TemplateNode } from '#client' */
4396
4367
  /** @import { Getters } from '#shared' */
@@ -4408,8 +4379,7 @@ createHTML: (html) => {
4408
4379
  branches.ensure(snippet, snippet && ((anchor) => snippet(anchor, ...args)));
4409
4380
  }, EFFECT_TRANSPARENT);
4410
4381
  }
4411
- //#endregion
4412
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/blocks/svelte-component.js
4382
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/blocks/svelte-component.js
4413
4383
  /** @import { TemplateNode, Dom } from '#client' */
4414
4384
  /**
4415
4385
  * @template P
@@ -4443,8 +4413,7 @@ createHTML: (html) => {
4443
4413
  branches.ensure(component, component && ((target) => render_fn(target, component)));
4444
4414
  }, EFFECT_TRANSPARENT);
4445
4415
  }
4446
- //#endregion
4447
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/timing.js
4416
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/timing.js
4448
4417
  /** @import { Raf } from '#client' */
4449
4418
  var now = () => performance.now();
4450
4419
  /** @type {Raf} */
@@ -4453,8 +4422,7 @@ createHTML: (html) => {
4453
4422
  now: () => now(),
4454
4423
  tasks: /* @__PURE__ */ new Set()
4455
4424
  };
4456
- //#endregion
4457
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/loop.js
4425
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/loop.js
4458
4426
  /** @import { TaskCallback, Task, TaskEntry } from '#client' */
4459
4427
  /**
4460
4428
  * @returns {void}
@@ -4491,8 +4459,7 @@ createHTML: (html) => {
4491
4459
  }
4492
4460
  };
4493
4461
  }
4494
- //#endregion
4495
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/elements/transitions.js
4462
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/elements/transitions.js
4496
4463
  /** @import { AnimateFn, Animation, AnimationConfig, EachItem, Effect, EffectNodes, TransitionFn, TransitionManager } from '#client' */
4497
4464
  /**
4498
4465
  * @param {Element} element
@@ -4824,8 +4791,7 @@ createHTML: (html) => {
4824
4791
  t: () => get_t()
4825
4792
  };
4826
4793
  }
4827
- //#endregion
4828
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/elements/attachments.js
4794
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/elements/attachments.js
4829
4795
  /** @import { Effect } from '#client' */
4830
4796
  /**
4831
4797
  * @param {Element} node
@@ -4848,8 +4814,7 @@ createHTML: (html) => {
4848
4814
  }
4849
4815
  });
4850
4816
  }
4851
- //#endregion
4852
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/shared/attributes.js
4817
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/shared/attributes.js
4853
4818
  var whitespace = [..." \n\r\f\xA0\v"];
4854
4819
  /**
4855
4820
  * @param {any} value
@@ -4958,8 +4923,7 @@ createHTML: (html) => {
4958
4923
  }
4959
4924
  return value == null ? null : String(value);
4960
4925
  }
4961
- //#endregion
4962
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/elements/class.js
4926
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/elements/class.js
4963
4927
  /**
4964
4928
  * @param {Element} dom
4965
4929
  * @param {boolean | number} is_html
@@ -4985,8 +4949,7 @@ createHTML: (html) => {
4985
4949
  }
4986
4950
  return next_classes;
4987
4951
  }
4988
- //#endregion
4989
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/elements/style.js
4952
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/elements/style.js
4990
4953
  /**
4991
4954
  * @param {Element & ElementCSSInlineStyle} dom
4992
4955
  * @param {Record<string, any>} prev
@@ -5025,8 +4988,7 @@ createHTML: (html) => {
5025
4988
  }
5026
4989
  return next_styles;
5027
4990
  }
5028
- //#endregion
5029
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/elements/attributes.js
4991
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/elements/attributes.js
5030
4992
  /** @import { Blocker, Effect } from '#client' */
5031
4993
  var IS_CUSTOM_ELEMENT = Symbol("is custom element");
5032
4994
  var IS_HTML = Symbol("is html");
@@ -5080,8 +5042,7 @@ createHTML: (html) => {
5080
5042
  }
5081
5043
  return setters;
5082
5044
  }
5083
- //#endregion
5084
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/elements/bindings/this.js
5045
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/dom/elements/bindings/this.js
5085
5046
  /** @import { ComponentContext, Effect } from '#client' */
5086
5047
  /**
5087
5048
  * @param {any} bound_value
@@ -5132,8 +5093,7 @@ createHTML: (html) => {
5132
5093
  });
5133
5094
  return element_or_component;
5134
5095
  }
5135
- //#endregion
5136
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/reactivity/store.js
5096
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/reactivity/store.js
5137
5097
  /**
5138
5098
  * Whether or not the prop currently being read is a store binding, as in
5139
5099
  * `<Child bind:x={$y} />`. If it is, we treat the prop as mutable even in
@@ -5157,8 +5117,7 @@ createHTML: (html) => {
5157
5117
  is_store_binding = previous_is_store_binding;
5158
5118
  }
5159
5119
  }
5160
- //#endregion
5161
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/reactivity/props.js
5120
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/client/reactivity/props.js
5162
5121
  /** @import { Derived, Effect, Source } from './types.js' */
5163
5122
  /**
5164
5123
  * The proxy handler for rest props (i.e. `const { x, ...rest } = $props()`).
@@ -5394,8 +5353,7 @@ createHTML: (html) => {
5394
5353
  m: []
5395
5354
  };
5396
5355
  }
5397
- //#endregion
5398
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/reactivity/map.js
5356
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/reactivity/map.js
5399
5357
  /** @import { Source } from '#client' */
5400
5358
  /**
5401
5359
  * A reactive version of the built-in [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object.
@@ -5604,8 +5562,7 @@ createHTML: (html) => {
5604
5562
  return super.size;
5605
5563
  }
5606
5564
  };
5607
- //#endregion
5608
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/reactivity/reactive-value.js
5565
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/reactivity/reactive-value.js
5609
5566
  /**
5610
5567
  * @template T
5611
5568
  */
@@ -5626,8 +5583,7 @@ createHTML: (html) => {
5626
5583
  return this.#fn();
5627
5584
  }
5628
5585
  };
5629
- //#endregion
5630
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/reactivity/media-query.js
5586
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/reactivity/media-query.js
5631
5587
  var parenthesis_regex = /\(.+\)/;
5632
5588
  var non_parenthesized_keywords = /* @__PURE__ */ new Set([
5633
5589
  "all",
@@ -5667,8 +5623,7 @@ createHTML: (html) => {
5667
5623
  super(() => q.matches, (update) => on(q, "change", update));
5668
5624
  }
5669
5625
  };
5670
- //#endregion
5671
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/disclose-version.js
5626
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/internal/disclose-version.js
5672
5627
  if (typeof window !== "undefined") ((window.__svelte ??= {}).v ??= /* @__PURE__ */ new Set()).add("5");
5673
5628
  -(Math.pow(10, 8) * 24 * 60 * 60 * 1e3);
5674
5629
  /**
@@ -5689,8 +5644,7 @@ createHTML: (html) => {
5689
5644
  * a constructor argument.
5690
5645
  */
5691
5646
  var constructFromSymbol = Symbol.for("constructDateFrom");
5692
- //#endregion
5693
- //#region node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/constructFrom.js
5647
+ // node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/constructFrom.js
5694
5648
  /**
5695
5649
  * @name constructFrom
5696
5650
  * @category Generic Helpers
@@ -5732,8 +5686,7 @@ createHTML: (html) => {
5732
5686
  if (date instanceof Date) return new date.constructor(value);
5733
5687
  return new Date(value);
5734
5688
  }
5735
- //#endregion
5736
- //#region node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/toDate.js
5689
+ // node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/toDate.js
5737
5690
  /**
5738
5691
  * @name toDate
5739
5692
  * @category Common Helpers
@@ -5775,8 +5728,7 @@ createHTML: (html) => {
5775
5728
  function toDate$1(argument, context) {
5776
5729
  return constructFrom(context || argument, argument);
5777
5730
  }
5778
- //#endregion
5779
- //#region node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/addDays.js
5731
+ // node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/addDays.js
5780
5732
  /**
5781
5733
  * The {@link addDays} function options.
5782
5734
  */
@@ -5828,14 +5780,12 @@ createHTML: (html) => {
5828
5780
  _date.setDate(_date.getDate() + amount);
5829
5781
  return _date;
5830
5782
  }
5831
- //#endregion
5832
- //#region node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/_lib/defaultOptions.js
5783
+ // node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/_lib/defaultOptions.js
5833
5784
  var defaultOptions = {};
5834
5785
  function getDefaultOptions() {
5835
5786
  return defaultOptions;
5836
5787
  }
5837
- //#endregion
5838
- //#region node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/startOfWeek.js
5788
+ // node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/startOfWeek.js
5839
5789
  /**
5840
5790
  * The {@link startOfWeek} function options.
5841
5791
  */
@@ -5876,8 +5826,7 @@ createHTML: (html) => {
5876
5826
  _date.setHours(0, 0, 0, 0);
5877
5827
  return _date;
5878
5828
  }
5879
- //#endregion
5880
- //#region node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/_lib/getTimezoneOffsetInMilliseconds.js
5829
+ // node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/_lib/getTimezoneOffsetInMilliseconds.js
5881
5830
  /**
5882
5831
  * Google Chrome as of 67.0.3396.87 introduced timezones with offset that includes seconds.
5883
5832
  * They usually appear for dates that denote time before the timezones were introduced
@@ -5895,14 +5844,12 @@ createHTML: (html) => {
5895
5844
  utcDate.setUTCFullYear(_date.getFullYear());
5896
5845
  return +date - +utcDate;
5897
5846
  }
5898
- //#endregion
5899
- //#region node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/_lib/normalizeDates.js
5847
+ // node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/_lib/normalizeDates.js
5900
5848
  function normalizeDates(context, ...dates) {
5901
5849
  const normalize = constructFrom.bind(null, context || dates.find((date) => typeof date === "object"));
5902
5850
  return dates.map(normalize);
5903
5851
  }
5904
- //#endregion
5905
- //#region node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/startOfDay.js
5852
+ // node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/startOfDay.js
5906
5853
  /**
5907
5854
  * The {@link startOfDay} function options.
5908
5855
  */
@@ -5933,8 +5880,7 @@ createHTML: (html) => {
5933
5880
  _date.setHours(0, 0, 0, 0);
5934
5881
  return _date;
5935
5882
  }
5936
- //#endregion
5937
- //#region node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/differenceInCalendarDays.js
5883
+ // node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/differenceInCalendarDays.js
5938
5884
  /**
5939
5885
  * The {@link differenceInCalendarDays} function options.
5940
5886
  */
@@ -5977,8 +5923,7 @@ createHTML: (html) => {
5977
5923
  const earlierTimestamp = +earlierStartOfDay - getTimezoneOffsetInMilliseconds$1(earlierStartOfDay);
5978
5924
  return Math.round((laterTimestamp - earlierTimestamp) / millisecondsInDay);
5979
5925
  }
5980
- //#endregion
5981
- //#region node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/getHours.js
5926
+ // node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/getHours.js
5982
5927
  /**
5983
5928
  * The {@link getHours} function options.
5984
5929
  */
@@ -6003,8 +5948,7 @@ createHTML: (html) => {
6003
5948
  function getHours(date, options) {
6004
5949
  return toDate$1(date, options?.in).getHours();
6005
5950
  }
6006
- //#endregion
6007
- //#region node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/getMinutes.js
5951
+ // node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/getMinutes.js
6008
5952
  /**
6009
5953
  * The {@link getMinutes} function options.
6010
5954
  */
@@ -6029,8 +5973,7 @@ createHTML: (html) => {
6029
5973
  function getMinutes(date, options) {
6030
5974
  return toDate$1(date, options?.in).getMinutes();
6031
5975
  }
6032
- //#endregion
6033
- //#region node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/getSeconds.js
5976
+ // node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/getSeconds.js
6034
5977
  /**
6035
5978
  * @name getSeconds
6036
5979
  * @category Second Helpers
@@ -6051,8 +5994,7 @@ createHTML: (html) => {
6051
5994
  function getSeconds(date) {
6052
5995
  return toDate$1(date).getSeconds();
6053
5996
  }
6054
- //#endregion
6055
- //#region src/lib/core/time.ts
5997
+ // src/lib/core/time.ts
6056
5998
  /**
6057
5999
  * Core time constants and pure date-math utilities.
6058
6000
  *
@@ -6355,8 +6297,7 @@ createHTML: (html) => {
6355
6297
  const m = mins % 60;
6356
6298
  return m > 0 ? `${h}h ${m}m` : `${h}h`;
6357
6299
  }
6358
- //#endregion
6359
- //#region src/lib/views/shared/context.svelte.ts
6300
+ // src/lib/views/shared/context.svelte.ts
6360
6301
  function useCalendarContext() {
6361
6302
  const raw = getContext("calendar");
6362
6303
  const disabledSet = /* @__PURE__ */ user_derived(() => new Set(raw?.disabledDates?.map((d) => sod(d.getTime())) ?? []));
@@ -6451,8 +6392,7 @@ createHTML: (html) => {
6451
6392
  announce: (text) => raw?.announce(text)
6452
6393
  };
6453
6394
  }
6454
- //#endregion
6455
- //#region src/lib/views/shared/EventContent.svelte
6395
+ // src/lib/views/shared/EventContent.svelte
6456
6396
  function EventContent($$anchor, $$props) {
6457
6397
  push($$props, true);
6458
6398
  const ctx = useCalendarContext();
@@ -6476,8 +6416,7 @@ createHTML: (html) => {
6476
6416
  append($$anchor, fragment);
6477
6417
  pop();
6478
6418
  }
6479
- //#endregion
6480
- //#region node_modules/.pnpm/date-fns-tz@3.2.0_date-fns@4.4.0/node_modules/date-fns-tz/dist/esm/_lib/tzTokenizeDate/index.js
6419
+ // node_modules/.pnpm/date-fns-tz@3.2.0_date-fns@4.4.0/node_modules/date-fns-tz/dist/esm/_lib/tzTokenizeDate/index.js
6481
6420
  /**
6482
6421
  * Returns the [year, month, day, hour, minute, seconds] tokens of the provided
6483
6422
  * `date` as it will be rendered in the `timeZone`.
@@ -6554,8 +6493,7 @@ createHTML: (html) => {
6554
6493
  });
6555
6494
  return dtfCache[timeZone];
6556
6495
  }
6557
- //#endregion
6558
- //#region node_modules/.pnpm/date-fns-tz@3.2.0_date-fns@4.4.0/node_modules/date-fns-tz/dist/esm/_lib/newDateUTC/index.js
6496
+ // node_modules/.pnpm/date-fns-tz@3.2.0_date-fns@4.4.0/node_modules/date-fns-tz/dist/esm/_lib/newDateUTC/index.js
6559
6497
  /**
6560
6498
  * Use instead of `new Date(Date.UTC(...))` to support years below 100 which doesn't work
6561
6499
  * otherwise due to the nature of the
@@ -6569,8 +6507,7 @@ createHTML: (html) => {
6569
6507
  utcDate.setUTCHours(hour, minute, second, millisecond);
6570
6508
  return utcDate;
6571
6509
  }
6572
- //#endregion
6573
- //#region node_modules/.pnpm/date-fns-tz@3.2.0_date-fns@4.4.0/node_modules/date-fns-tz/dist/esm/_lib/tzParseTimezone/index.js
6510
+ // node_modules/.pnpm/date-fns-tz@3.2.0_date-fns@4.4.0/node_modules/date-fns-tz/dist/esm/_lib/tzParseTimezone/index.js
6574
6511
  var MILLISECONDS_IN_HOUR$1 = 36e5;
6575
6512
  var MILLISECONDS_IN_MINUTE$1 = 6e4;
6576
6513
  var patterns$1 = {
@@ -6640,8 +6577,7 @@ createHTML: (html) => {
6640
6577
  return false;
6641
6578
  }
6642
6579
  }
6643
- //#endregion
6644
- //#region node_modules/.pnpm/date-fns-tz@3.2.0_date-fns@4.4.0/node_modules/date-fns-tz/dist/esm/_lib/getTimezoneOffsetInMilliseconds/index.js
6580
+ // node_modules/.pnpm/date-fns-tz@3.2.0_date-fns@4.4.0/node_modules/date-fns-tz/dist/esm/_lib/getTimezoneOffsetInMilliseconds/index.js
6645
6581
  /**
6646
6582
  * Google Chrome as of 67.0.3396.87 introduced timezones with offset that includes seconds.
6647
6583
  * They usually appear for dates that denote time before the timezones were introduced
@@ -6658,12 +6594,10 @@ createHTML: (html) => {
6658
6594
  utcDate.setUTCFullYear(date.getFullYear());
6659
6595
  return +date - +utcDate;
6660
6596
  }
6661
- //#endregion
6662
- //#region node_modules/.pnpm/date-fns-tz@3.2.0_date-fns@4.4.0/node_modules/date-fns-tz/dist/esm/_lib/tzPattern/index.js
6597
+ // node_modules/.pnpm/date-fns-tz@3.2.0_date-fns@4.4.0/node_modules/date-fns-tz/dist/esm/_lib/tzPattern/index.js
6663
6598
  /** Regex to identify the presence of a time zone specifier in a date string */
6664
6599
  var tzPattern = /(Z|[+-]\d{2}(?::?\d{2})?| UTC| [a-zA-Z]+\/[a-zA-Z_]+(?:\/[a-zA-Z_]+)?)$/;
6665
- //#endregion
6666
- //#region node_modules/.pnpm/date-fns-tz@3.2.0_date-fns@4.4.0/node_modules/date-fns-tz/dist/esm/toDate/index.js
6600
+ // node_modules/.pnpm/date-fns-tz@3.2.0_date-fns@4.4.0/node_modules/date-fns-tz/dist/esm/toDate/index.js
6667
6601
  var MILLISECONDS_IN_HOUR = 36e5;
6668
6602
  var MILLISECONDS_IN_MINUTE = 6e4;
6669
6603
  var DEFAULT_ADDITIONAL_DIGITS = 2;
@@ -6959,8 +6893,7 @@ createHTML: (html) => {
6959
6893
  if (seconds != null && (seconds < 0 || seconds >= 60)) return false;
6960
6894
  return true;
6961
6895
  }
6962
- //#endregion
6963
- //#region node_modules/.pnpm/date-fns-tz@3.2.0_date-fns@4.4.0/node_modules/date-fns-tz/dist/esm/toZonedTime/index.js
6896
+ // node_modules/.pnpm/date-fns-tz@3.2.0_date-fns@4.4.0/node_modules/date-fns-tz/dist/esm/toZonedTime/index.js
6964
6897
  /**
6965
6898
  * @name toZonedTime
6966
6899
  * @category Time Zone Helpers
@@ -6994,8 +6927,7 @@ createHTML: (html) => {
6994
6927
  resultDate.setHours(d.getUTCHours(), d.getUTCMinutes(), d.getUTCSeconds(), d.getUTCMilliseconds());
6995
6928
  return resultDate;
6996
6929
  }
6997
- //#endregion
6998
- //#region node_modules/.pnpm/date-fns-tz@3.2.0_date-fns@4.4.0/node_modules/date-fns-tz/dist/esm/fromZonedTime/index.js
6930
+ // node_modules/.pnpm/date-fns-tz@3.2.0_date-fns@4.4.0/node_modules/date-fns-tz/dist/esm/fromZonedTime/index.js
6999
6931
  /**
7000
6932
  * @name fromZonedTime
7001
6933
  * @category Time Zone Helpers
@@ -7029,8 +6961,7 @@ createHTML: (html) => {
7029
6961
  const offsetMilliseconds = tzParseTimezone(timeZone, new Date(utc));
7030
6962
  return new Date(utc + offsetMilliseconds);
7031
6963
  }
7032
- //#endregion
7033
- //#region src/lib/core/timezone.ts
6964
+ // src/lib/core/timezone.ts
7034
6965
  /**
7035
6966
  * Timezone utilities — convert between IANA timezones and local time.
7036
6967
  *
@@ -7096,8 +7027,7 @@ createHTML: (html) => {
7096
7027
  if (adapter.deleteEvent) wrapped.deleteEvent = (id) => adapter.deleteEvent(id);
7097
7028
  return wrapped;
7098
7029
  }
7099
- //#endregion
7100
- //#region src/lib/core/clock.svelte.ts
7030
+ // src/lib/core/clock.svelte.ts
7101
7031
  function createClock(timezone) {
7102
7032
  const now = () => timezone ? toZonedTime(Date.now(), timezone).getTime() : Date.now();
7103
7033
  const t0 = now();
@@ -7142,8 +7072,7 @@ createHTML: (html) => {
7142
7072
  destroy
7143
7073
  };
7144
7074
  }
7145
- //#endregion
7146
- //#region node_modules/.pnpm/@chenglou+pretext@0.0.9/node_modules/@chenglou/pretext/dist/generated/bidi-data.js
7075
+ // node_modules/.pnpm/@chenglou+pretext@0.0.9/node_modules/@chenglou/pretext/dist/generated/bidi-data.js
7147
7076
  var latin1BidiTypes = [
7148
7077
  "BN",
7149
7078
  "BN",
@@ -10974,8 +10903,7 @@ createHTML: (html) => {
10974
10903
  "BN"
10975
10904
  ]
10976
10905
  ];
10977
- //#endregion
10978
- //#region node_modules/.pnpm/@chenglou+pretext@0.0.9/node_modules/@chenglou/pretext/dist/bidi.js
10906
+ // node_modules/.pnpm/@chenglou+pretext@0.0.9/node_modules/@chenglou/pretext/dist/bidi.js
10979
10907
  function classifyCodePoint(codePoint) {
10980
10908
  if (codePoint <= 255) return latin1BidiTypes[codePoint];
10981
10909
  let lo = 0;
@@ -11106,8 +11034,7 @@ createHTML: (html) => {
11106
11034
  for (let i = 0; i < segStarts.length; i++) segLevels[i] = bidiLevels[segStarts[i]];
11107
11035
  return segLevels;
11108
11036
  }
11109
- //#endregion
11110
- //#region node_modules/.pnpm/@chenglou+pretext@0.0.9/node_modules/@chenglou/pretext/dist/analysis.js
11037
+ // node_modules/.pnpm/@chenglou+pretext@0.0.9/node_modules/@chenglou/pretext/dist/analysis.js
11111
11038
  var collapsibleWhitespaceRunRe = /[ \t\n\r\f]+/g;
11112
11039
  var needsWhitespaceNormalizationRe = /[\t\n\r\f]| {2,}|^ | $/;
11113
11040
  function normalizeWhitespaceNormal(text) {
@@ -12227,8 +12154,7 @@ createHTML: (html) => {
12227
12154
  ...wordBreak === "keep-all" ? mergeKeepAllTextSegments(normalized, mergedSegmentation, profile) : mergedSegmentation
12228
12155
  };
12229
12156
  }
12230
- //#endregion
12231
- //#region node_modules/.pnpm/@chenglou+pretext@0.0.9/node_modules/@chenglou/pretext/dist/measurement.js
12157
+ // node_modules/.pnpm/@chenglou+pretext@0.0.9/node_modules/@chenglou/pretext/dist/measurement.js
12232
12158
  var measureContext = null;
12233
12159
  var segmentMetricCaches = /* @__PURE__ */ new Map();
12234
12160
  var cachedEngineProfile = null;
@@ -12393,8 +12319,7 @@ createHTML: (html) => {
12393
12319
  emojiCorrection: needsEmojiCorrection ? getEmojiCorrection(font) : 0
12394
12320
  };
12395
12321
  }
12396
- //#endregion
12397
- //#region node_modules/.pnpm/@chenglou+pretext@0.0.9/node_modules/@chenglou/pretext/dist/line-break.js
12322
+ // node_modules/.pnpm/@chenglou+pretext@0.0.9/node_modules/@chenglou/pretext/dist/line-break.js
12398
12323
  function isDiscretionaryLineEnd(kinds, endSegmentIndex, endGraphemeIndex) {
12399
12324
  return endGraphemeIndex === 0 && endSegmentIndex > 0 && endSegmentIndex < kinds.length && kinds[endSegmentIndex - 1] === "soft-hyphen";
12400
12325
  }
@@ -12843,8 +12768,7 @@ createHTML: (html) => {
12843
12768
  lastLineWidth
12844
12769
  };
12845
12770
  }
12846
- //#endregion
12847
- //#region node_modules/.pnpm/@chenglou+pretext@0.0.9/node_modules/@chenglou/pretext/dist/layout.js
12771
+ // node_modules/.pnpm/@chenglou+pretext@0.0.9/node_modules/@chenglou/pretext/dist/layout.js
12848
12772
  function createEmptyPrepared(includeSegments) {
12849
12773
  if (includeSegments) return {
12850
12774
  widths: [],
@@ -13068,8 +12992,7 @@ createHTML: (html) => {
13068
12992
  const s = getComputedStyle(el);
13069
12993
  return `${s.fontStyle} ${s.fontWeight} ${s.fontSize} ${s.fontFamily}`;
13070
12994
  }
13071
- //#endregion
13072
- //#region src/lib/views/shared/format.ts
12995
+ // src/lib/views/shared/format.ts
13073
12996
  function fmtTime(d, locale) {
13074
12997
  return fmtTime$1(d, locale);
13075
12998
  }
@@ -13119,8 +13042,7 @@ createHTML: (html) => {
13119
13042
  day: "numeric"
13120
13043
  });
13121
13044
  }
13122
- //#endregion
13123
- //#region src/lib/views/shared/opening-top.ts
13045
+ // src/lib/views/shared/opening-top.ts
13124
13046
  /**
13125
13047
  * Where a time grid opens: the y (grid px, 0 = first visible hour) to put at
13126
13048
  * the top of the scroller so no event is sliced there.
@@ -13157,8 +13079,7 @@ createHTML: (html) => {
13157
13079
  }
13158
13080
  return Math.max(0, y);
13159
13081
  }
13160
- //#endregion
13161
- //#region src/lib/views/planner/PlannerWeek.svelte
13082
+ // src/lib/views/planner/PlannerWeek.svelte
13162
13083
  var root_1$7 = /* @__PURE__ */ from_html(`<span class="tw-ad-cont svelte-j4rvbp" aria-hidden="true"><svg viewBox="0 0 8 8" width="8" height="8" class="svelte-j4rvbp"><path d="M5.5 1.5 2.5 4l3 2.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" class="svelte-j4rvbp"></path></svg></span>`);
13163
13084
  var root_2$7 = /* @__PURE__ */ from_html(`<span class="tw-ad-span svelte-j4rvbp" aria-hidden="true"> </span>`);
13164
13085
  var root_3$7 = /* @__PURE__ */ from_html(`<span class="tw-ad-arrow svelte-j4rvbp" aria-hidden="true"><svg viewBox="0 0 8 8" width="8" height="8" class="svelte-j4rvbp"><path d="M2.5 1.5 5.5 4l-3 2.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" class="svelte-j4rvbp"></path></svg></span>`);
@@ -14472,8 +14393,7 @@ createHTML: (html) => {
14472
14393
  "focusin",
14473
14394
  "keydown"
14474
14395
  ]);
14475
- //#endregion
14476
- //#region src/lib/views/planner/Planner.svelte
14396
+ // src/lib/views/planner/Planner.svelte
14477
14397
  var rest_excludes$2 = /* @__PURE__ */ new Set([
14478
14398
  "$$slots",
14479
14399
  "$$events",
@@ -14486,8 +14406,7 @@ createHTML: (html) => {
14486
14406
  return mode();
14487
14407
  } }, () => rest));
14488
14408
  }
14489
- //#endregion
14490
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/easing/index.js
14409
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/easing/index.js
14491
14410
  /**
14492
14411
  * Cubic scaling, decelerate towards end.
14493
14412
  *
@@ -14498,8 +14417,7 @@ createHTML: (html) => {
14498
14417
  const f = t - 1;
14499
14418
  return f * f * f + 1;
14500
14419
  }
14501
- //#endregion
14502
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/animate/index.js
14420
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/animate/index.js
14503
14421
  /** @import { FlipParams, AnimationConfig } from './public.js' */
14504
14422
  /**
14505
14423
  * The flip function calculates the start and end position of an element and animates between them, translating the x and y values.
@@ -14551,8 +14469,7 @@ createHTML: (html) => {
14551
14469
  }
14552
14470
  return zoom;
14553
14471
  }
14554
- //#endregion
14555
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/transition/index.js
14472
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/transition/index.js
14556
14473
  /** @param {number} t */
14557
14474
  function cubic_out(t) {
14558
14475
  const f = t - 1;
@@ -14633,8 +14550,7 @@ createHTML: (html) => {
14633
14550
  }
14634
14551
  return [transition(to_send, to_receive, false), transition(to_receive, to_send, true)];
14635
14552
  }
14636
- //#endregion
14637
- //#region node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/motion/index.js
14553
+ // node_modules/.pnpm/svelte@5.57.2/node_modules/svelte/src/motion/index.js
14638
14554
  /**
14639
14555
  * A [media query](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery) that matches if the user [prefers reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).
14640
14556
  *
@@ -14660,8 +14576,7 @@ createHTML: (html) => {
14660
14576
  * @since 5.7.0
14661
14577
  */
14662
14578
  var prefersReducedMotion = /*@__PURE__*/ new MediaQuery("(prefers-reduced-motion: reduce)");
14663
- //#endregion
14664
- //#region src/lib/views/shared/chip-fit.svelte.ts
14579
+ // src/lib/views/shared/chip-fit.svelte.ts
14665
14580
  function createChipFit(options) {
14666
14581
  let width = /* @__PURE__ */ state(0);
14667
14582
  let fonts = /* @__PURE__ */ state(proxy({}));
@@ -14715,8 +14630,7 @@ createHTML: (html) => {
14715
14630
  }
14716
14631
  };
14717
14632
  }
14718
- //#endregion
14719
- //#region src/lib/views/planner/PlannerScroll.svelte
14633
+ // src/lib/views/planner/PlannerScroll.svelte
14720
14634
  var allDaySegmentContent = ($$anchor, seg = noop) => {
14721
14635
  var fragment = root_4$6();
14722
14636
  var node = first_child(fragment);
@@ -15863,8 +15777,7 @@ createHTML: (html) => {
15863
15777
  }
15864
15778
  };
15865
15779
  }
15866
- //#endregion
15867
- //#region src/lib/views/agenda/AgendaDay.svelte
15780
+ // src/lib/views/agenda/AgendaDay.svelte
15868
15781
  var root$4 = /* @__PURE__ */ from_html(`<span class="ag-day-head-badge svelte-n8lbn1"> </span>`);
15869
15782
  var root_1$5 = /* @__PURE__ */ from_html(`<span class="ag-day-head-badge ag-day-head-badge--muted svelte-n8lbn1"> </span>`);
15870
15783
  var root_2$5 = /* @__PURE__ */ from_html(`<div><span class="ag-day-head-num svelte-n8lbn1"> </span> <!> <span class="ag-day-head-name svelte-n8lbn1"> </span> <span class="ag-day-head-date svelte-n8lbn1"> </span></div>`);
@@ -16683,8 +16596,7 @@ createHTML: (html) => {
16683
16596
  "touchend",
16684
16597
  "click"
16685
16598
  ]);
16686
- //#endregion
16687
- //#region src/lib/views/agenda/AgendaWeek.svelte
16599
+ // src/lib/views/agenda/AgendaWeek.svelte
16688
16600
  var root$3 = /* @__PURE__ */ from_html(`<span class="ag-card-eta svelte-uhwfyj"> </span>`);
16689
16601
  var root_1$4 = /* @__PURE__ */ from_html(`<span class="ag-card-sub svelte-uhwfyj"> </span>`);
16690
16602
  var root_2$4 = /* @__PURE__ */ from_html(`<span class="ag-card-loc svelte-uhwfyj"> </span>`);
@@ -17497,8 +17409,7 @@ createHTML: (html) => {
17497
17409
  "touchend",
17498
17410
  "keydown"
17499
17411
  ]);
17500
- //#endregion
17501
- //#region src/lib/views/agenda/Agenda.svelte
17412
+ // src/lib/views/agenda/Agenda.svelte
17502
17413
  var rest_excludes$1 = /* @__PURE__ */ new Set([
17503
17414
  "$$slots",
17504
17415
  "$$events",
@@ -17521,8 +17432,7 @@ createHTML: (html) => {
17521
17432
  });
17522
17433
  append($$anchor, fragment);
17523
17434
  }
17524
- //#endregion
17525
- //#region src/lib/views/mobile/MobileDay.svelte
17435
+ // src/lib/views/mobile/MobileDay.svelte
17526
17436
  var root_1$3 = /* @__PURE__ */ from_html(`<span class="mb-allday-span svelte-zbkzcp"> </span>`);
17527
17437
  var root_2$3 = /* @__PURE__ */ from_html(`<button type="button"><span class="mb-allday-dot svelte-zbkzcp"></span> <span class="mb-allday-title svelte-zbkzcp"> </span> <!></button>`);
17528
17438
  var root_3$3 = /* @__PURE__ */ from_html(`<button type="button" class="mb-allday-more svelte-zbkzcp"> </button>`);
@@ -18306,8 +18216,7 @@ createHTML: (html) => {
18306
18216
  "keydown",
18307
18217
  "contextmenu"
18308
18218
  ]);
18309
- //#endregion
18310
- //#region src/lib/views/mobile/MobileWeek.svelte
18219
+ // src/lib/views/mobile/MobileWeek.svelte
18311
18220
  var root$2 = /* @__PURE__ */ from_html(`<span> </span>`);
18312
18221
  var root_1$2 = /* @__PURE__ */ from_html(`<span class="mw-empty svelte-1d18hkf"> </span>`);
18313
18222
  var root_2$2 = /* @__PURE__ */ from_html(`<span class="mw-ev-title svelte-1d18hkf"> </span> <span class="mw-ev-time svelte-1d18hkf"> </span>`, 1);
@@ -18622,8 +18531,7 @@ createHTML: (html) => {
18622
18531
  "click",
18623
18532
  "keydown"
18624
18533
  ]);
18625
- //#endregion
18626
- //#region src/lib/views/mobile/Mobile.svelte
18534
+ // src/lib/views/mobile/Mobile.svelte
18627
18535
  var rest_excludes = /* @__PURE__ */ new Set([
18628
18536
  "$$slots",
18629
18537
  "$$events",
@@ -18646,8 +18554,7 @@ createHTML: (html) => {
18646
18554
  });
18647
18555
  append($$anchor, fragment);
18648
18556
  }
18649
- //#endregion
18650
- //#region src/lib/views/month/MonthGrid.svelte
18557
+ // src/lib/views/month/MonthGrid.svelte
18651
18558
  var root$1 = /* @__PURE__ */ from_html(`<div class="mg-head-cell svelte-pvjuld" role="columnheader"> </div>`);
18652
18559
  var root_1$1 = /* @__PURE__ */ from_html(`<span><span class="mg-chip-dot svelte-pvjuld"></span></span>`);
18653
18560
  var root_2$1 = /* @__PURE__ */ from_html(`<button type="button"><!></button>`);
@@ -19034,8 +18941,7 @@ createHTML: (html) => {
19034
18941
  "focusin",
19035
18942
  "keydown"
19036
18943
  ]);
19037
- //#endregion
19038
- //#region src/lib/adapters/errors.ts
18944
+ // src/lib/adapters/errors.ts
19039
18945
  /**
19040
18946
  * The two refusals the calendar tells apart when a write fails.
19041
18947
  *
@@ -19068,8 +18974,7 @@ createHTML: (html) => {
19068
18974
  function isNotFoundError(e) {
19069
18975
  return e instanceof EventNotFoundError || e instanceof Error && /not found/i.test(e.message);
19070
18976
  }
19071
- //#endregion
19072
- //#region src/lib/engine/event-store.svelte.ts
18977
+ // src/lib/engine/event-store.svelte.ts
19073
18978
  function createEventStore(adapter) {
19074
18979
  const getAdapter = typeof adapter === "function" ? adapter : () => adapter;
19075
18980
  let eventMap = new SvelteMap();
@@ -19224,8 +19129,7 @@ createHTML: (html) => {
19224
19129
  }
19225
19130
  };
19226
19131
  }
19227
- //#endregion
19228
- //#region src/lib/engine/view-state.svelte.ts
19132
+ // src/lib/engine/view-state.svelte.ts
19229
19133
  function inferMode(view) {
19230
19134
  if (view.startsWith("day")) return "day";
19231
19135
  if (view.startsWith("month")) return "month";
@@ -19329,8 +19233,7 @@ createHTML: (html) => {
19329
19233
  }
19330
19234
  };
19331
19235
  }
19332
- //#endregion
19333
- //#region src/lib/engine/selection.svelte.ts
19236
+ // src/lib/engine/selection.svelte.ts
19334
19237
  function createSelection() {
19335
19238
  let selectedId = /* @__PURE__ */ state(null);
19336
19239
  let hoveredId = /* @__PURE__ */ state(null);
@@ -19373,8 +19276,7 @@ createHTML: (html) => {
19373
19276
  }
19374
19277
  };
19375
19278
  }
19376
- //#endregion
19377
- //#region src/lib/engine/drag.svelte.ts
19279
+ // src/lib/engine/drag.svelte.ts
19378
19280
  function createDragState() {
19379
19281
  let mode = /* @__PURE__ */ state("none");
19380
19282
  let payload = /* @__PURE__ */ state(null);
@@ -19486,8 +19388,7 @@ createHTML: (html) => {
19486
19388
  --dt-mono: ui-monospace, 'SFMono-Regular', monospace;
19487
19389
  `
19488
19390
  };
19489
- //#endregion
19490
- //#region src/lib/theme/auto.ts
19391
+ // src/lib/theme/auto.ts
19491
19392
  function parseColor(raw) {
19492
19393
  if (!raw || raw === "transparent" || raw === "rgba(0, 0, 0, 0)") return null;
19493
19394
  const rgba = raw.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
@@ -20070,8 +19971,7 @@ createHTML: (html) => {
20070
19971
  document.removeEventListener("animationend", onTransitionEnd);
20071
19972
  };
20072
19973
  }
20073
- //#endregion
20074
- //#region src/lib/calendar/Calendar.svelte
19974
+ // src/lib/calendar/Calendar.svelte
20075
19975
  var defaultViews = [
20076
19976
  {
20077
19977
  id: "day-planner",
@@ -20761,7 +20661,7 @@ createHTML: (html) => {
20761
20661
  bind_this(div, ($$value) => set(calEl, $$value), () => get(calEl));
20762
20662
  template_effect(() => {
20763
20663
  classes = set_class(div, 1, "cal svelte-1b53e7w", null, classes, { "cal--auto": heightProp() === "auto" });
20764
- set_style(div, `${get(effectiveTheme) ?? ""}; ${heightProp() === "auto" ? "" : `--cal-h: ${heightProp()}px;`} --cal-r: ${borderRadius() ?? ""}px`);
20664
+ set_style(div, `${get(effectiveTheme) ?? ""}; ${heightProp() === "auto" ? "" : `--cal-h: ${heightProp()}px;`} --cal-r: ${borderRadius() ?? ""}px;${$$props.eventFill == null ? "" : ` --dt-ev-fill: ${$$props.eventFill * 100}%;`}${$$props.eventBar == null ? "" : ` --dt-ev-bar: ${$$props.eventBar}px;`}`);
20765
20665
  set_attribute(div, "aria-label", get(L).calendar);
20766
20666
  set_attribute(div, "aria-busy", store.loading || void 0);
20767
20667
  set_attribute(div, "dir", get(resolvedDir));
@@ -20774,8 +20674,7 @@ createHTML: (html) => {
20774
20674
  pop();
20775
20675
  }
20776
20676
  delegate(["keydown", "click"]);
20777
- //#endregion
20778
- //#region src/lib/adapters/memory.ts
20677
+ // src/lib/adapters/memory.ts
20779
20678
  var counter = 0;
20780
20679
  function uid() {
20781
20680
  return `mem-${Date.now()}-${++counter}`;
@@ -20835,8 +20734,7 @@ createHTML: (html) => {
20835
20734
  }
20836
20735
  };
20837
20736
  }
20838
- //#endregion
20839
- //#region src/lib/widget/CalendarWidget.svelte
20737
+ // src/lib/widget/CalendarWidget.svelte
20840
20738
  function CalendarWidget($$anchor, $$props) {
20841
20739
  push($$props, true);
20842
20740
  /** Events endpoint — fetched as `GET {api}?start=…&end=…` (ISO instants); answers an array of events or `{ events: [...] }` */
@@ -20855,6 +20753,7 @@ createHTML: (html) => {
20855
20753
  /** Days shown in week mode, e.g. "3" or "5" */
20856
20754
  /** Compact agenda rendering: "true" */
20857
20755
  /** IANA timezone, e.g. "Europe/Warsaw" */
20756
+ /** Minimum day-column width in px for the week grid (default: 110) — a narrower container scrolls sideways */
20858
20757
  let theme = prop($$props, "theme", 3, "auto"), view = prop($$props, "view", 3, "week-planner"), height = prop($$props, "height", 3, "600"), mondaystart = prop($$props, "mondaystart", 3, "true");
20859
20758
  const heightValue = /* @__PURE__ */ user_derived(() => {
20860
20759
  const trimmed = height().trim();
@@ -20872,6 +20771,11 @@ createHTML: (html) => {
20872
20771
  const n = parseInt($$props.days, 10);
20873
20772
  return Number.isNaN(n) || n < 1 || n > 7 ? void 0 : n;
20874
20773
  });
20774
+ const minColumnWidthValue = /* @__PURE__ */ user_derived(() => {
20775
+ if (!$$props.mincolumnwidth) return void 0;
20776
+ const n = parseInt($$props.mincolumnwidth, 10);
20777
+ return Number.isNaN(n) || n < 0 ? void 0 : n;
20778
+ });
20875
20779
  function parseHeaders(json) {
20876
20780
  if (!json) return void 0;
20877
20781
  try {
@@ -20985,13 +20889,15 @@ createHTML: (html) => {
20985
20889
  },
20986
20890
  get timezone() {
20987
20891
  return get($4);
20892
+ },
20893
+ get minColumnWidth() {
20894
+ return get(minColumnWidthValue);
20988
20895
  }
20989
20896
  });
20990
20897
  }
20991
20898
  pop();
20992
20899
  }
20993
- //#endregion
20994
- //#region src/lib/widget/widget.ts
20900
+ // src/lib/widget/widget.ts
20995
20901
  /**
20996
20902
  * Widget entry point — registers <day-calendar> as a custom element.
20997
20903
  *
@@ -21047,7 +20953,8 @@ createHTML: (html) => {
21047
20953
  "mobile",
21048
20954
  "days",
21049
20955
  "compact",
21050
- "timezone"
20956
+ "timezone",
20957
+ "mincolumnwidth"
21051
20958
  ];
21052
20959
  /**
21053
20960
  * Attribute values as reactive props for `mount()`. A plain .ts module has
@@ -21126,5 +21033,4 @@ createHTML: (html) => {
21126
21033
  }
21127
21034
  };
21128
21035
  if (!customElements.get("day-calendar")) customElements.define("day-calendar", DayCalendarElement);
21129
- //#endregion
21130
21036
  })();