/* ============================================================
   calendar.css
   Calendar tab styles, consolidated from CSS-in-JS modules.

   Loaded once via a stylesheet link in app.html instead of being
   re-injected on every render through DOM-emitted style tags.
   The selector surface is unchanged from the prior JS-string
   versions; classes here are calendar-prefixed and don't collide
   with other tabs (Tailwind utilities are independent).

   Sections:
     1. Layout shell + mobile breakpoints   (was CalendarResponsiveStyles)
     2. Mobile month + stacked views        (was CalendarMobileStyles)
     3. Week header chrome                  (was WeekHeaderStyles)
   ============================================================ */

/* ============================================================
   1. Layout shell + mobile breakpoints
   ============================================================ */

.calendar-layout {
    display: flex;

    /* Stack the full-width top bar above the calendar body (view + sidebar)
       so the bar spans the entire content panel rather than just the view. */
    flex-direction: column;

    /* Fill the content panel exactly. The old viewport math
       (calc(100vh - 100px)) assumed a fixed 100px of top chrome,
       but the real panel is 100dvh minus the (now variable, 34-42px)
       topbar - so the layout fell ~60px short and left a strip of
       the panel uncovered at the bottom. With the no-accounts lock
       on (inset: 0 within this box) that strip showed through below
       the lock: a white stripe on email, and the real week grid -
       out of phase with the lock's faux grid - on calendar.
       height: 100% fills the parent regardless of topbar size, so
       the lock reaches the bottom edge. */
    height: 100%;

    /* The whole calendar tab shares the Dashboard/Email grey canvas. Surfaces
       inside (top bar, view grids, sidebar) read this token so they all match
       in both themes; the layout itself is transparent so the content panel's
       grey shows through. Light: #F8F9FA. Dark: the panel colour. */
    --cal-surface: #f8f9fa;

    background: transparent;

    /* No gap between the top bar and the body - the bar carries its own
       bottom border. The view/sidebar gutter lives on .calendar-body. */
    gap: 0;

    /* Flush with the content panel - the sidebar carries
       its own bottom-left curve so the layout no longer
       needs outer padding. */
    padding: 0;
    position: relative;
}

[data-theme='dark'] .calendar-layout {
    --cal-surface: var(--bg-primary);
}

/* The row beneath the full-width top bar: the active day/week/month view on
   the left and the sidebar (mini-month, calendars) on the right. */
.calendar-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    gap: 12px;
    overflow: hidden;
}

.calendar-mobile-sidebar-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgb(212 175 55 / 85%), rgb(79 70 229 / 90%));
    backdrop-filter: blur(24px);
    color: white;
    border: 1px solid rgb(255 255 255 / 20%);
    cursor: pointer;
    box-shadow:
        0 2px 8px rgb(212 175 55 / 25%),
        0 6px 20px rgb(212 175 55 / 20%),
        inset 0 1px 0 rgb(255 255 255 / 20%);
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-mobile-sidebar-toggle:active {
    transform: scale(0.93);
}

.calendar-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 50%);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.calendar-mobile-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile stacked view - hidden on desktop */
.calendar-mobile-stacked {
    display: none;
}

@media (width <= 768px) {
    .calendar-layout {
        padding: 0;
        gap: 0;
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 100px);
    }

    /* Hide desktop elements on mobile */
    .calendar-mobile-sidebar-toggle,
    .calendar-mobile-overlay,
    .calendar-week-header,
    .calendar-body,
    .calendar-sidebar,
    .calendar-main {
        display: none !important;
    }

    /* Show mobile stacked view */
    .calendar-mobile-stacked {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 12px;

        /* Clear the fixed create-event FAB (plus the device safe-area) so the
           last section isn't hidden underneath it. */
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
        gap: 16px;
        overflow-y: auto;
    }

    .calendar-mobile-section {
        background: rgb(255 255 255 / 72%);
        backdrop-filter: blur(24px);
        border-radius: 16px;
        border: 1px solid rgb(255 255 255 / 45%);
        box-shadow: 0 2px 16px rgb(0 0 0 / 6%);
        overflow: hidden;
    }

    [data-theme='dark'] .calendar-mobile-section {
        background: rgb(30 30 30 / 65%);
        border-color: rgb(255 255 255 / 8%);
        box-shadow: 0 2px 16px rgb(0 0 0 / 25%);
    }

    .calendar-mobile-week-section {
        display: flex;
        flex-direction: column;
    }

    .calendar-mobile-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        border-bottom: 1px solid rgb(0 0 0 / 4%);
        letter-spacing: -0.01em;
    }

    [data-theme='dark'] .calendar-mobile-section-header {
        border-bottom-color: rgb(255 255 255 / 4%);
    }

    .calendar-mobile-today-btn {
        padding: 5px 11px;
        background: rgb(255 255 255 / 72%);
        backdrop-filter: blur(12px);
        border: 1px solid rgb(255 255 255 / 45%);
        border-radius: 8px;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
    }

    [data-theme='dark'] .calendar-mobile-today-btn {
        background: rgb(30 30 30 / 65%);
        border-color: rgb(255 255 255 / 8%);
    }

    .calendar-mobile-today-btn:active {
        transform: scale(0.96);
    }

    /* Compact month view for mobile stacked */
    .calendar-mobile-section .calendar-month-view {
        padding: 12px;
    }

    /* Compact week view for mobile stacked */
    .calendar-mobile-week-section .calendar-week-view {
        max-height: 300px;
        overflow-y: auto;
    }
}

@media (width <= 480px) {
    .calendar-mobile-stacked {
        padding: 8px;
        gap: 12px;
    }
}

/* ============================================================
   2a. Mobile month view
   ============================================================ */

.mobile-month-section {
    display: none;
}

@media (width <= 768px) {
    .mobile-month-section {
        display: block;
        border-top: 1px solid var(--border-light);
        background: var(--bg-primary);
    }

    .mobile-month-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        background: rgb(255 255 255 / 60%);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgb(0 0 0 / 4%);
    }

    [data-theme='dark'] .mobile-month-header {
        background: rgb(255 255 255 / 4%);
        border-bottom-color: rgb(255 255 255 / 4%);
    }

    .mobile-month-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .mobile-month-nav {
        display: flex;
        gap: 8px;
    }

    .mobile-month-nav-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: rgb(255 255 255 / 72%);
        backdrop-filter: blur(12px);
        border: 1px solid rgb(255 255 255 / 45%);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
    }

    [data-theme='dark'] .mobile-month-nav-btn {
        background: rgb(30 30 30 / 65%);
        border-color: rgb(255 255 255 / 8%);
    }

    .mobile-month-nav-btn:hover {
        background: rgb(212 175 55 / 6%);
        color: var(--brand-primary);
    }

    .mobile-month-nav-btn:active {
        transform: scale(0.93);
    }

    /* Mobile month grid - fluid columns so the grid always fits
       the viewport. The previous fixed-width columns
       (50px x 7 + gaps) overflowed narrow phones, sending the
       last column(s) off-screen because the parent only scrolls
       vertically. */
    .mobile-month-section .calendar-month-view {
        padding: 8px !important;
        overflow: hidden !important;
    }

    .mobile-month-section .calendar-month-grid {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        grid-auto-rows: 60px !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .mobile-month-section .calendar-day-cell {
        width: auto !important;
        min-width: 0 !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        padding: 4px !important;
        overflow: hidden !important;
    }

    .mobile-month-section .calendar-day-header {
        width: auto !important;
        min-width: 0 !important;
        font-size: 10px !important;
        text-align: center !important;
    }

    /* Compact day headers grid */
    .mobile-month-section .calendar-month-view > div > div:first-child {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .mobile-month-section .calendar-day-number {
        font-size: 12px !important;
    }

    .mobile-month-section .calendar-event-badge {
        padding: 1px 2px !important;
    }

    .mobile-month-section .calendar-event-time,
    .mobile-month-section .calendar-event-title {
        font-size: 8px !important;
    }

    .mobile-month-section .calendar-event-more {
        font-size: 8px !important;
    }
}

@media (width <= 480px) {
    /* Narrow phones: keep fluid columns but reduce row height so
       cells stay readable. Column widths still flex to viewport. */
    .mobile-month-section .calendar-month-grid {
        grid-auto-rows: 52px !important;
        gap: 3px !important;
    }

    .mobile-month-section .calendar-day-cell {
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        padding: 3px !important;
    }
}

/* ============================================================
   2b. Mobile stacked view
   ============================================================ */

/* Navigation Row: Arrows + Date + View Toggle */
.calendar-mobile-nav-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.calendar-mobile-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 45%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

[data-theme='dark'] .calendar-mobile-nav-btn {
    background: rgb(30 30 30 / 65%);
    border-color: rgb(255 255 255 / 8%);
}

.calendar-mobile-nav-btn:active {
    background: rgb(212 175 55 / 6%);
    color: var(--brand-primary);
    transform: scale(0.93);
}

.calendar-mobile-view-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 60px;
    text-align: center;
}

.calendar-mobile-view-toggle {
    display: flex;
    background: rgb(0 0 0 / 4%);
    border: 1px solid rgb(0 0 0 / 4%);
    border-radius: 10px;
    padding: 2px;
    gap: 2px;
    margin-left: auto;
}

[data-theme='dark'] .calendar-mobile-view-toggle {
    background: rgb(255 255 255 / 6%);
    border-color: rgb(255 255 255 / 4%);
}

.calendar-mobile-view-btn {
    padding: 6px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.calendar-mobile-view-btn:active {
    transform: scale(0.96);
}

.calendar-mobile-view-btn.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow:
        0 1px 3px rgb(0 0 0 / 8%),
        0 1px 2px rgb(0 0 0 / 4%);
}

[data-theme='dark'] .calendar-mobile-view-btn.active {
    background: rgb(255 255 255 / 12%);
}

.calendar-mobile-view-btn:not(.active):hover {
    color: var(--text-primary);
}

/* Toolbar Row: Search + Action Icons */
.calendar-mobile-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgb(0 0 0 / 4%);
    margin-bottom: 8px;
}

[data-theme='dark'] .calendar-mobile-toolbar {
    border-bottom-color: rgb(255 255 255 / 4%);
}

.calendar-mobile-search-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 45%);
    border-radius: 10px;
    padding: 8px 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme='dark'] .calendar-mobile-search-wrapper {
    background: rgb(30 30 30 / 65%);
    border-color: rgb(255 255 255 / 8%);
}

.calendar-mobile-search-wrapper:focus-within {
    border-color: rgba(var(--brand-primary-rgb), 0.4);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1);
}

.calendar-mobile-search-wrapper svg {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.calendar-mobile-search-input {
    flex: 1;
    border: none;
    background: none;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
    font-family: inherit;
    min-width: 0;
}

.calendar-mobile-search-input::placeholder {
    color: var(--text-tertiary);
}

.calendar-mobile-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-mobile-toolbar-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 45%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

[data-theme='dark'] .calendar-mobile-toolbar-btn {
    background: rgb(30 30 30 / 65%);
    border-color: rgb(255 255 255 / 8%);
}

.calendar-mobile-toolbar-btn:active {
    background: rgb(212 175 55 / 6%);
    color: var(--brand-primary);
    transform: scale(0.93);
}

.calendar-mobile-today-link {
    padding: 6px 14px;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 45%);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

[data-theme='dark'] .calendar-mobile-today-link {
    background: rgb(30 30 30 / 65%);
    border-color: rgb(255 255 255 / 8%);
}

.calendar-mobile-today-link:active {
    background: rgb(212 175 55 / 6%);
    color: var(--brand-primary);
    transform: scale(0.96);
}

.calendar-mobile-month-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.calendar-mobile-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-mobile-view-container {
    min-height: 300px;
}

.calendar-mobile-view-container .calendar-week-view,
.calendar-mobile-view-container .calendar-month-view,
.calendar-mobile-view-container .calendar-day-view {
    max-height: 400px;
    overflow-y: auto;
}

/* Hide redundant day view date header on mobile - date already shown in nav row */
.calendar-mobile-view-container .calendar-day-view > div > div:first-child {
    display: none;
}

/* ============================================================
   3. Week header chrome
   ============================================================ */

.calendar-week-header {
    display: flex;
    align-items: center;

    /* Nav + view switcher on the left, action icons (timezone / find-a-time /
       booking / settings / provider cube) pushed to the right. On desktop the
       right edge is padded clear of the app's top-right cut-out bay (see the
       @media block below) so the provider cube lands just before it. */
    justify-content: space-between;
    padding: 0 12px;
    border-bottom: 1px solid rgb(0 0 0 / 4%);

    /* Compact week-header chrome - kept slim at 44px to match the Email tab's
       top bar as it renders for the user. An earlier change bumped this to
       52px to chase the --email-header-height variable and line the gear up
       with the email gear, but that made the calendar bar visibly taller than
       the email one, so it's back to the slim height. */
    height: 44px;
    min-height: 44px;
    max-height: 44px;

    /* Transparent so the shared grey canvas shows through (the bar sits above
       the body, nothing scrolls under it). backdrop-filter is retained only
       for the stacking context the dropdowns rely on - see below. */
    background: transparent;
    backdrop-filter: blur(16px);

    /* `backdrop-filter` already promotes this element to a stacking
       context; without an explicit z-index it sits at the equivalent
       of z-index 0, which trapped the timezone / settings dropdowns
       beneath the week grid's events (z-index 5-20) and the current-
       time indicator (z-index 20). Pinning the header above any of
       its siblings in the calendar-main column lets the dropdown's
       own z-index: 1000 actually take effect. */
    position: relative;
    z-index: 50;
}

[data-theme='dark'] .calendar-week-header {
    border-bottom-color: rgb(255 255 255 / 4%);
    background: transparent;
}

/* Desktop: pad the header's right edge clear of the app's top-right
   cut-out bay so the right-aligned action icons (…, provider cube last)
   land just before it instead of sliding underneath. --topbar-cutout-w
   is the measured cut-out width (AppInterface._trackCutoutWidth); the
   fallback covers the cluster before the first measurement lands. */
@media (width >= 769px) {
    .calendar-week-header {
        padding-right: calc(var(--topbar-cutout-w, 210px) + 10px);
    }
}

.calendar-week-header-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Mini-month day cells: quiet hover tint. Replaces the inline
   onmouseover/onmouseout handlers removed in the CSP (data-cal-*) migration.
   Today keeps its filled brand circle (excluded here); the selected day's
   ring sits over a transparent fill, so it still takes the tint on hover.
   !important overrides the per-cell inline `background: transparent`. */
.cal-mini-day:not(.is-today):hover {
    background: var(--bg-hover) !important;
}

.calendar-week-header-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.calendar-week-nav-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 45%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

[data-theme='dark'] .calendar-week-nav-btn {
    background: rgb(30 30 30 / 65%);
    border-color: rgb(255 255 255 / 8%);
}

.calendar-week-nav-btn:hover {
    background: rgb(212 175 55 / 6%);
    border-color: rgb(212 175 55 / 20%);
    color: var(--brand-primary);
}

.calendar-week-nav-btn:active {
    transform: scale(0.92);
}

.calendar-week-today-btn {
    height: 24px;
    padding: 0 9px;

    /* Small extra gap (on top of the row's 6px) so the Today button and the
       view toggle that follows it sit a touch further right of the date title. */
    margin-left: 10px;
    border-radius: 7px;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);
    border: 1px solid var(--brand-primary);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-primary);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

[data-theme='dark'] .calendar-week-today-btn {
    background: rgb(30 30 30 / 65%);
    border-color: var(--brand-primary);
}

.calendar-week-today-btn:hover {
    background: var(--brand-light, rgb(20 51 210 / 8%));
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.calendar-week-today-btn:active {
    transform: scale(0.93);
}

/* Leading "+" new-event button - primary action, sized to match the Email
   tab's icon-only compose button (.email-compose-icon-btn: 34px square, 9px
   radius) so the two tabs' primary actions read at the same scale. */
.calendar-week-add-btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: var(--brand-gradient, var(--brand-primary));
    box-shadow: 0 1px 3px rgb(20 51 210 / 22%);
    transition:
        filter 0.15s ease,
        transform 0.06s ease;
    margin-right: 2px;
}

.calendar-week-add-btn:hover {
    filter: brightness(1.06);
}

.calendar-week-add-btn:active {
    transform: scale(0.93);
}

/* Day / Week / Month pill toggle - mirrors the Email tab's
   .email-detail-tabs pill, calendar-namespaced and scaled to the 44px bar. */

/* Calendar view switcher: a single hover/focus-expand dropdown (mirrors the
   email tab's view-mode changer). At rest only the active view's row shows
   (icon + label); hovering or focusing the control drops the other views
   down beneath it, and clicking one switches. The resting surface AND the
   active-row treatment match the email control: an elevated pill with a soft
   shadow, aqua-accent (--brand-accent) text/icons, and an aqua-tinted active
   row. Shared by the grid view switcher and the timeline zoom picker, so
   restyling here keeps both toggles identical to the email view-mode changer. */

/* The control sizes to the ACTIVE option's icon + label (adaptive width), just
   like the email tab's view-mode changer: the active row sits in normal flow,
   the rest live in an overlay that never widens or heightens the header. */
.calendar-view-menu {
    position: relative;
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    height: 30px;
    padding: 2px;

    /* Resting surface matches the email view-mode control: an elevated
       background with a soft shadow. The var adapts per theme, so no
       light/dark-specific overrides are needed. */
    background: var(--bg-elevated);

    /* NB: var(--border-light) is the full "1px solid <color>" shorthand, so it
       is used WITHOUT a "1px solid" prefix (that would expand to invalid CSS). */
    border: var(--border-light);
    border-radius: 9px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
    z-index: 5;
}

.calendar-view-menu-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    padding: 0 10px;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: var(--brand-accent, #2596be);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.calendar-view-menu-btn:hover {
    background: rgba(var(--brand-accent-rgb, 37, 150, 190), 0.12);
}

.calendar-view-menu-btn.active {
    background: rgba(var(--brand-accent-rgb, 37, 150, 190), 0.14);
    color: var(--brand-accent, #2596be);
}

.calendar-view-menu-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: inherit;
}

.calendar-view-menu-icon svg {
    width: 15px;
    height: 15px;
}

/* Non-active rows drop into an overlay flush under the control, sized to the
   widest option; left-aligned by default (for menus in the header's left
   cluster, so they never run off-screen). */
.calendar-view-menu-pop {
    position: absolute;
    top: 100%;
    left: -1px;
    right: auto;
    min-width: 100%;
    width: max-content;
    margin-top: 3px;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 2px;
    background: var(--bg-elevated);
    border: var(--border-light);
    border-radius: 9px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
    z-index: 60;
}

/* Transparent bridge over the 3px gap so moving the cursor down to an option
   doesn't drop the hover (matches the email view-mode changer). */
.calendar-view-menu-pop::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    height: 5px;
}

.calendar-view-menu-pop .calendar-view-menu-btn {
    width: 100%;
}

.calendar-view-menu:hover .calendar-view-menu-pop,
.calendar-view-menu:focus-within .calendar-view-menu-pop {
    display: flex;
}

/* View menus in the RIGHT cluster (between the search field and the "More"
   menu - the Agenda/Day/Week/Month/Year switcher, or the timeline zoom picker)
   right-align their overlay to stay inside the header. */
.calendar-week-header-actions .calendar-view-menu-pop {
    left: auto;
    right: -1px;
}

/* Drag-to-create selection band. Painted (position: fixed, body-level) while
   the user click-drags across an empty day/week grid to mark out a new event's
   time range; removed on release when the quick-create popover opens. */
.calendar-create-selection {
    position: fixed;
    z-index: 9999;
    box-sizing: border-box;
    padding: 3px 6px;
    border: 1.5px solid var(--brand-primary);
    border-radius: 6px;
    background: color-mix(in srgb, var(--brand-primary) 22%, transparent);
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    pointer-events: none;
    box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}

[data-theme='dark'] .calendar-create-selection {
    background: color-mix(in srgb, var(--brand-primary) 30%, transparent);
    color: #fff;
}

.calendar-week-header-subtitle {
    font-size: 12px;
    color: var(--text-tertiary);
}

.calendar-week-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Header search: collapsed to a magnifier icon button (styled by
   .calendar-settings-btn). Pressing it swaps the WHOLE top bar for a single
   search field - .calendar-week-header--search below - hiding every other
   header control. Clicking out before submitting collapses back to the icon;
   Enter opens the results view (CalendarSearchResultsView). */
.calendar-week-header--search {
    /* The bar holds exactly one child (the search field row), so the base
       header's space-between is irrelevant; keep it stretching full-width. */
    justify-content: stretch;
}

.calendar-header-search-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0 4px;
}

.calendar-header-search-icon {
    flex-shrink: 0;
    color: var(--text-tertiary);
}

.calendar-header-search-input {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
}

.calendar-header-search-input::placeholder {
    color: var(--text-tertiary);
}

/* The browser's own clear (x) control would double up with our close button. */
.calendar-header-search-input::-webkit-search-cancel-button {
    display: none;
}

.calendar-header-search-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.calendar-header-search-close:hover {
    background: rgb(0 0 0 / 5%);
    color: var(--text-primary);
}

[data-theme='dark'] .calendar-header-search-close:hover {
    background: rgb(255 255 255 / 8%);
}

/* ---- Demo onboarding callout: "two views" bubble under the layout switcher ----
   Kabiri-blue floating bubble explaining the Calendar (event-focused) vs
   Timeline (task-focused) surfaces, fixed-positioned by
   CalendarTab._maybeShowDemoViewsCallout. Same pattern as the email tab's
   .demo-email-callout. Demo-only, dismissible. */
.demo-calendar-callout {
    position: fixed;
    z-index: 1300;
    max-width: 264px;
    background: var(--brand-primary, #1433d2);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgb(0 0 0 / 22%);
    animation: demoCalendarCalloutIn 200ms ease-out;
}

.demo-calendar-callout-arrow {
    position: absolute;
    top: -6px;
    right: 18px;
    width: 13px;
    height: 13px;
    background: var(--brand-primary, #1433d2);
    transform: rotate(45deg);
    border-radius: 3px;
}

.demo-calendar-callout-body {
    position: relative;
    padding: 13px 15px;
}

.demo-calendar-callout-body strong {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}

.demo-calendar-callout-body p {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.5;
    opacity: 0.92;
}

.demo-calendar-callout-dismiss {
    background: rgb(255 255 255 / 18%);
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 7px;
    cursor: pointer;
}

.demo-calendar-callout-dismiss:hover {
    background: rgb(255 255 255 / 28%);
}

@keyframes demoCalendarCalloutIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.calendar-timezone-wrapper {
    position: relative;
}

.calendar-timezone-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 45%);
    border-radius: 7px;
    font-size: 11px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

[data-theme='dark'] .calendar-timezone-btn {
    background: rgb(30 30 30 / 65%);
    border-color: rgb(255 255 255 / 8%);
}

.calendar-timezone-btn:hover {
    background: rgb(212 175 55 / 6%);
    border-color: rgb(212 175 55 / 20%);
    color: var(--brand-primary);
}

.calendar-timezone-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;

    /* Opaque surface: the dropdown floats over the week grid, so a
       translucent fill let the events show through and made the list
       hard to read. Solid background keeps it legible. */
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow:
        0 8px 32px rgb(0 0 0 / 12%),
        0 0 0 0.5px rgb(0 0 0 / 4%);
    z-index: 1000;
    min-width: 320px;
    max-height: 400px;
    overflow-y: auto;
}

[data-theme='dark'] .calendar-timezone-dropdown {
    background: var(--bg-primary);
    border-color: rgb(255 255 255 / 8%);
    box-shadow: 0 8px 32px rgb(0 0 0 / 35%);
}

/* Booking-links dropdown — opened from the calendar icon in the week
   header, immediately left of the settings gear. Mirrors the timezone
   and settings dropdowns: anchored to its wrapper, opaque surface so it
   reads clearly over the week grid. The booking panel inside drops its
   own card chrome (it now lives in the dropdown's surface). */
.calendar-booking-wrapper {
    position: relative;
}

.calendar-booking-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow:
        0 8px 32px rgb(0 0 0 / 12%),
        0 0 0 0.5px rgb(0 0 0 / 4%);
    z-index: 1000;
    min-width: 320px;
    max-height: 480px;
    overflow-y: auto;
}

[data-theme='dark'] .calendar-booking-dropdown {
    border-color: rgb(255 255 255 / 8%);
    box-shadow: 0 8px 32px rgb(0 0 0 / 35%);
}

.calendar-booking-dropdown .booking-panel {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.calendar-booking-dropdown::-webkit-scrollbar {
    width: 6px;
}

.calendar-booking-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.calendar-booking-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.calendar-booking-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

.calendar-timezone-dropdown::-webkit-scrollbar {
    width: 6px;
}

.calendar-timezone-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.calendar-timezone-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.calendar-timezone-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

.timezone-region-header {
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-hover);
    position: sticky;
    top: 0;
}

.timezone-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 8px);
    padding: 7px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    border-radius: 8px;
    margin: 1px 4px;
}

.timezone-item:hover {
    background: rgb(0 0 0 / 4%);
}

[data-theme='dark'] .timezone-item:hover {
    background: rgb(255 255 255 / 6%);
}

.timezone-item.active {
    background: rgb(212 175 55 / 8%);
}

.timezone-item-label {
    font-size: 12px;
    color: var(--text-primary);
}

.timezone-item.active .timezone-item-label {
    color: var(--brand-primary);
    font-weight: 600;
}

.timezone-item-offset {
    font-size: 11px;
    color: var(--text-tertiary);
}

.calendar-create-btn {
    padding: 7px 14px;
    background: var(--brand-gradient);
    backdrop-filter: var(--glass-blur);
    color: white;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    font-family: inherit;
    box-shadow:
        0 1px 3px rgb(0 0 0 / 12%),
        0 6px 20px rgb(0 0 0 / 10%),
        inset 0 1px 0 rgb(255 255 255 / 20%);
    position: relative;
    overflow: hidden;
}

.calendar-create-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgb(255 255 255 / 18%), transparent);
    border-radius: 12px 12px 0 0;
    pointer-events: none;
}

.calendar-create-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 2px 6px rgb(0 0 0 / 15%),
        0 8px 24px rgb(0 0 0 / 12%),
        inset 0 1px 0 rgb(255 255 255 / 25%);
}

.calendar-create-btn:active {
    transform: translateY(0) scale(0.98);
}

[data-theme='dark'] .calendar-create-btn {
    box-shadow:
        0 1px 3px rgb(212 175 55 / 30%),
        0 6px 20px rgb(212 175 55 / 25%),
        inset 0 1px 0 rgb(255 255 255 / 15%);
}

[data-theme='dark'] .calendar-create-btn:hover {
    box-shadow:
        0 2px 6px rgb(212 175 55 / 35%),
        0 8px 24px rgb(212 175 55 / 30%),
        inset 0 1px 0 rgb(255 255 255 / 20%);
}

/* Mirror the Email tab's .icon-btn chrome so the gear/refresh
   buttons sitting next to the platform icons look identical across
   tabs - transparent ground, 30x30 hit area, 18x18 glyph. */
.calendar-settings-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-settings-btn:hover {
    background: rgb(0 0 0 / 5%);
    color: var(--text-primary);
}

[data-theme='dark'] .calendar-settings-btn:hover {
    background: rgb(255 255 255 / 8%);
}

.calendar-settings-btn:active {
    background: rgb(0 0 0 / 8%);
    transform: scale(0.94);
}

[data-theme='dark'] .calendar-settings-btn:active {
    background: rgb(255 255 255 / 10%);
}

/* ============================================================
   Header action buttons (Settings + Booking link) sit inline to the
   right of the timezone selector. The wrapper stays the positioning
   context for the dropdowns those buttons open.
   ============================================================ */

.calendar-header-overflow {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* ============================================================
   Kebab (⋮) "More" menu - holds the Find a time / Booking link
   actions that used to sit inline in the header. Anchored under the
   More button (left edge of the overflow wrapper).
   ============================================================ */

.calendar-more-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow:
        0 8px 32px rgb(0 0 0 / 12%),
        0 0 0 0.5px rgb(0 0 0 / 4%);
    z-index: 1000;
    min-width: 180px;
    padding: 6px;
}

[data-theme='dark'] .calendar-more-menu {
    border-color: rgb(255 255 255 / 8%);
    box-shadow: 0 8px 32px rgb(0 0 0 / 35%);
}

.calendar-more-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.calendar-more-menu-item svg {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.calendar-more-menu-item:hover {
    background: rgb(0 0 0 / 5%);
}

[data-theme='dark'] .calendar-more-menu-item:hover {
    background: rgb(255 255 255 / 8%);
}

.calendar-more-menu-item:active {
    background: rgb(0 0 0 / 8%);
}

[data-theme='dark'] .calendar-more-menu-item:active {
    background: rgb(255 255 255 / 10%);
}

/* ============================================================
   Quick-create popover (Phase 3b)
   ============================================================ */

.kabiri-quick-create-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;

    /* Transparent - the popover is a quick affordance, not a modal sheet,
       so the underlying calendar should still be visible to give the user
       context for where they're creating. The backdrop only exists to
       capture stray clicks that should dismiss the popover. */
    background: transparent;
}

.kabiri-quick-create-popover {
    position: fixed;
    z-index: 1201;
    width: 280px;
    max-width: calc(100vw - 24px);

    /* Clamp to the visible viewport so the popover never bleeds off
       the bottom of the screen when the cursor is low. The internal
       layout scrolls (see overflow-y below); the actions row stays
       reachable via the sticky rule lower down. */
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgb(0 0 0 / 18%);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Save / Cancel row pinned to the bottom of the scroll container so
   the user never has to scroll just to commit the new event. The
   surrounding popover provides the padded gutters; we paint our own
   matching background so content scrolling underneath doesn't show
   through the row. */
.kabiri-quick-create-popover .kabiri-quick-create-actions {
    position: sticky;
    bottom: -12px; /* cancel the popover's bottom padding */
    margin: 0 -12px -12px; /* extend across the popover's side gutters */
    padding: 10px 12px 12px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-light);
}

.kabiri-quick-create-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Drag handle: the header lets the user reposition the popover. Wired up in
   QuickCreatePopover._enableDrag (skipped on the mobile bottom-sheet layout,
   so this class is only present where dragging actually works). */
.kabiri-quick-create-header.is-draggable {
    /* Custom dark hand outlined in white so the drag cursor stays visible in
       both light and dark mode (the native `grab` hand renders white/low
       contrast on some platforms, disappearing on the light backdrop). Falls
       back to native grab if the data-URI cursor is unsupported. */
    cursor:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 32 32'%3E%3Cpath d='M10 14V7a2 2 0 0 1 4 0v6h1V5a2 2 0 0 1 4 0v8h1V7a2 2 0 0 1 4 0v10c0 5-3 9-8 9h-1c-3 0-5-1-6.5-3.5L8 24l-3.2-4.2a2 2 0 0 1 3.1-2.5L10 20z' fill='%231f2937' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E")
            10 6,
        grab;
    touch-action: none;
    user-select: none;
}

.kabiri-quick-create-header.is-dragging {
    cursor:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 32 32'%3E%3Cpath d='M10 16v-3a2 2 0 0 1 4 0v2h1v-4a2 2 0 0 1 4 0v4h1v-3a2 2 0 0 1 4 0v5c0 5-3 9-8 9h-1c-3 0-5-1-6.5-3.5L8 24l-3.2-4.2a2 2 0 0 1 3.1-2.5L10 21z' fill='%231f2937' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E")
            10 8,
        grabbing;
}

.kabiri-quick-create-when {
    font-size: 12px;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kabiri-quick-create-close {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    line-height: 0;
    border-radius: 6px;
}

.kabiri-quick-create-close:active {
    background: rgb(0 0 0 / 6%);
}

/* Entry-type chips (Event / Task / Out of office / Focus). Mirror the
   Today button's blue-accent active state for a consistent calendar look.
   All four chips share one row: nowrap keeps them on a single line and the
   equal-width basis lets the only long label ("Out of office") wrap inside
   its own chip rather than spilling onto a second row. */
.kabiri-quick-create-categories {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
}

.kabiri-quick-create-cat {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 5px 6px;
    border: 1px solid var(--border-light);
    border-radius: 7px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.25;
    transition: all 0.15s ease;
}

.kabiri-quick-create-cat:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.kabiri-quick-create-cat.active {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    background: var(--brand-light, rgb(20 51 210 / 8%));
}

.kabiri-quick-create-title {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
}

.kabiri-quick-create-title:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.12);
}

/* Natural-language parse hint: shows the date/time recognised from the title
   ("Lunch tomorrow 1pm" -> "↳ Tomorrow · 1:00 – 2:00 PM"). */
.kabiri-quick-create-nl-hint {
    margin: 4px 2px 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kabiri-quick-create-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.kabiri-quick-create-more {
    background: transparent;
    border: none;
    color: var(--brand-primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 0;
}

.kabiri-quick-create-save {
    padding: 8px 16px;
    background: var(--brand-gradient);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.kabiri-quick-create-save:active {
    transform: scale(0.97);
}

/* Time row - start / end pickers sit side-by-side under the title.
   The dash takes whatever font colour the popover does so it tracks
   light / dark themes without an extra rule. */
.kabiri-quick-create-time-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.kabiri-quick-create-time {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-sizing: border-box;
    outline: none;

    /* Native time pickers ignore most font/styling but the chrome
       around them benefits from the same border-radius treatment. */
}

.kabiri-quick-create-time:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.12);
}

.kabiri-quick-create-time-dash {
    color: var(--text-tertiary);
    font-size: 13px;
}

/* Time combobox - text field backed by a 15-minute dropdown, mirroring the
   full create-event modal's picker (see .event-timepicker* in
   CreateEventModal.js) so the quick popover offers the same slot list. */
.kabiri-quick-create-timepicker {
    position: relative;
    flex: 1;
    min-width: 0;
}

.kabiri-quick-create-timepicker .kabiri-quick-create-time {
    width: 100%;
    cursor: pointer;
}

.kabiri-quick-create-time-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
    padding: 4px;
}

.kabiri-quick-create-time-option {
    padding: 6px 10px;
    font-size: 13px;
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.kabiri-quick-create-time-option:hover,
.kabiri-quick-create-time-option.active {
    background: var(--bg-hover);
}

.kabiri-quick-create-time-option.selected {
    color: var(--brand-primary);
    font-weight: 600;
}

/* Guests row - chip strip + add input share a single line that wraps
   when the chip count gets long. Each chip is initials-only; the full
   name + email surfaces via the chip's `title` attribute on hover, so
   the row stays compact even with several attendees. */
.kabiri-quick-create-guests-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.kabiri-quick-create-guests {
    display: contents;
}

.kabiri-quick-create-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 13px;
    color: white;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;

    /* Subtle press feedback so the click-to-remove gesture reads. */
    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease;
}

.kabiri-quick-create-chip:hover {
    box-shadow: 0 0 0 2px rgb(0 0 0 / 8%);
}

.kabiri-quick-create-chip:active {
    transform: scale(0.94);
}

.kabiri-quick-create-guest-input {
    flex: 1;
    min-width: 100px;
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-sizing: border-box;
    outline: none;
}

.kabiri-quick-create-guest-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.12);
}

/* Contact suggestions surfaced beneath the guest input as the user types.
   Sits in normal flow directly under the guests row so the popover simply
   grows downward - up to MAX_GUEST_SUGGESTIONS rows, then scrolls. */
.kabiri-quick-create-guest-suggestions {
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-primary);
    box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
}

.kabiri-quick-create-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-primary);
}

.kabiri-quick-create-suggestion:hover,
.kabiri-quick-create-suggestion:focus {
    background: var(--bg-hover);
    outline: none;
}

.kabiri-quick-create-suggestion-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kabiri-quick-create-suggestion-name {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kabiri-quick-create-suggestion-email {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kabiri-quick-create-suggestion-source {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 10px;
}

/* Task-mode fields (due date + time + priority). The popover renders both
   the event group (time-row + guests) and the task group up front; which one
   shows is driven entirely by the root's data-category, so switching the
   chip needs no JS beyond setting the attribute. Default: task group hidden,
   event group shown. */
.kabiri-quick-create-task-fields {
    display: none;
    flex-direction: column;
    gap: 8px;
}

.kabiri-quick-create-popover[data-category='task'] .kabiri-quick-create-task-fields {
    display: flex;
}

/* In task mode the event-only rows (and the guest suggestions) drop out. */
.kabiri-quick-create-popover[data-category='task'] .kabiri-quick-create-time-row,
.kabiri-quick-create-popover[data-category='task'] .kabiri-quick-create-guests-row,
.kabiri-quick-create-popover[data-category='task'] .kabiri-quick-create-guest-suggestions {
    display: none;
}

/* Due date + time on one line, mirroring the add-task sheet's due row. */
.kabiri-quick-create-task-due-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The due date/time controls reuse EventDateTimePicker, so they ship the same
   .event-* class names the add sheet styles under #desktop-todo-panel. Re-scope
   those rules to the popover here so the pickers look right even when the Tasks
   panel (which injects that CSS) hasn't been opened this session. */
.kabiri-quick-create-task-fields .event-date-input,
.kabiri-quick-create-task-fields .event-time-input {
    height: 34px;
    border: 1px solid var(--border-light);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 0 10px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}

.kabiri-quick-create-task-fields .event-date-input {
    flex: 1 1 auto;
    min-width: 0;
}

.kabiri-quick-create-task-fields .event-time-input {
    width: 104px;
}

.kabiri-quick-create-task-fields .event-date-input:focus,
.kabiri-quick-create-task-fields .event-time-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgb(20 51 210 / 12%);
}

.kabiri-quick-create-task-fields .event-timepicker {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
}

.kabiri-quick-create-task-fields .event-timepicker-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
    padding: 4px;
}

.kabiri-quick-create-task-fields .event-timepicker-option {
    padding: 6px 10px;
    font-size: 13px;
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.kabiri-quick-create-task-fields .event-timepicker-option:hover,
.kabiri-quick-create-task-fields .event-timepicker-option.active {
    background: var(--bg-hover);
}

.kabiri-quick-create-task-fields .event-timepicker-option.selected {
    color: var(--brand-primary);
    font-weight: 600;
}

.kabiri-quick-create-task-fields .event-datepicker {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.kabiri-quick-create-task-fields .event-datepicker-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    text-align: left;
    cursor: pointer;
}

.kabiri-quick-create-task-fields .event-datepicker-trigger span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kabiri-quick-create-task-fields .event-datepicker-trigger svg {
    flex-shrink: 0;
    color: var(--text-tertiary);
}

.kabiri-quick-create-task-fields .event-datepicker-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 10;
    width: 248px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
    padding: 10px;
}

.kabiri-quick-create-task-fields .event-datepicker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.kabiri-quick-create-task-fields .event-datepicker-month {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.kabiri-quick-create-task-fields .event-datepicker-nav {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.kabiri-quick-create-task-fields .event-datepicker-nav:hover {
    background: var(--bg-hover);
}

.kabiri-quick-create-task-fields .event-datepicker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.kabiri-quick-create-task-fields .event-datepicker-weekdays span {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
}

.kabiri-quick-create-task-fields .event-datepicker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.kabiri-quick-create-task-fields .event-datepicker-day {
    aspect-ratio: 1;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kabiri-quick-create-task-fields .event-datepicker-day.empty {
    visibility: hidden;
    cursor: default;
}

.kabiri-quick-create-task-fields .event-datepicker-day:hover:not(.empty) {
    background: var(--bg-hover);
}

.kabiri-quick-create-task-fields .event-datepicker-day.today {
    border: 1.5px solid var(--brand-primary);
}

.kabiri-quick-create-task-fields .event-datepicker-day.selected {
    background: var(--brand-primary);
    color: #fff;
    font-weight: 700;
}

/* Priority dropdown reuses renderPriorityField (.tasks-prio* + .pv2-priority*).
   That markup is normally styled by the Tasks panel's injected CSS; re-scope the
   essentials here so the field renders correctly inside the popover regardless
   of whether that panel has mounted. Hide its redundant "Priority" label - the
   icon + value already read clearly in the compact popover. */
.kabiri-quick-create-task-fields .tasks-panel-field > .pv2-field-label {
    display: none;
}

.kabiri-quick-create-task-fields .tasks-prio {
    position: relative;
}

.kabiri-quick-create-task-fields .tasks-prio-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.kabiri-quick-create-task-fields .tasks-prio-trigger:focus {
    outline: 0;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgb(20 51 210 / 12%);
}

.kabiri-quick-create-task-fields .tasks-prio-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.kabiri-quick-create-task-fields .tasks-prio-chevron {
    flex-shrink: 0;
    color: var(--text-tertiary);
}

.kabiri-quick-create-task-fields .tasks-prio-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 11;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
    padding: 4px;
}

.kabiri-quick-create-task-fields .tasks-prio-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}

.kabiri-quick-create-task-fields .tasks-prio-opt:hover {
    background: var(--bg-hover);
}

.kabiri-quick-create-task-fields .tasks-prio-opt.is-selected {
    background: rgb(20 51 210 / 8%);
    font-weight: 600;
}

.kabiri-quick-create-task-fields .pv2-priority {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.kabiri-quick-create-task-fields .pv2-priority--low {
    color: #16a34a;
}

.kabiri-quick-create-task-fields .pv2-priority--medium {
    color: #f59e0b;
}

.kabiri-quick-create-task-fields .pv2-priority--high {
    color: #ea580c;
}

.kabiri-quick-create-task-fields .pv2-priority--urgent {
    color: #dc2626;
}

/* Selection highlight on the week / day grid. Sits inside the grid
   container at z-index 4 - above the empty hour cells (no explicit
   z-index) but below rendered events (z-index 5+) so a busy slot
   doesn't get obscured by the band. pointer-events:none keeps the
   underlying click handlers reachable - the highlight is purely
   visual. */
.kabiri-quick-create-highlight {
    position: absolute;
    z-index: 4;
    background: rgb(66 133 244 / 18%);
    border: 1.5px solid rgb(66 133 244 / 85%);
    border-radius: 6px;
    pointer-events: none;

    /* Smooth height/top updates while the user drags the time pickers
       so the band glides between values instead of jumping. */
    transition:
        top 0.12s ease,
        height 0.12s ease,
        left 0.12s ease,
        width 0.12s ease;
}

[data-theme='dark'] .kabiri-quick-create-highlight {
    background: rgb(138 180 248 / 22%);
    border-color: rgb(138 180 248 / 90%);
}

/* On narrow viewports, present as a bottom sheet rather than a floating
   bubble - fingers don't reach popovers stranded mid-grid. Extended from
   <=480 to <=640 so landscape phones and small phablets also drop the
   bubble. The inset + safe-area calc keeps the sheet visible above the
   home-bar on iOS. */
@media (width <= 640px) {
    .kabiri-quick-create-popover {
        position: fixed !important;
        inset: auto 12px max(12px, env(safe-area-inset-bottom, 0px) + 12px) !important;
        width: auto !important;
        max-width: none !important;
        border-radius: 16px;

        /* Lift onto the GPU so the slide-in feels native; the
           translateY default is 0 because the sheet is already
           positioned at the bottom of the screen. */
        animation: kabiriQuickCreateSheetIn 220ms cubic-bezier(0.32, 0.72, 0.32, 1);
    }

    @keyframes kabiriQuickCreateSheetIn {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .kabiri-quick-create-backdrop {
        /* Dim the calendar a bit so the sheet reads as the active
           surface - the desktop popover stays transparent because
           the bubble has the user's full attention already. */
        background: rgb(0 0 0 / 35%);
    }
}

/* ============================================================
   Mobile drawer (Phase 3a)
   ============================================================ */

/* Backdrop sits below the drawer, above all calendar surfaces. Hidden by
   default; .open fades it in. Tap-to-dismiss is on the element itself. */
.kabiri-mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 50%);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    display: none;
}

.kabiri-mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 90vw);
    max-width: 100vw;
    z-index: 1101;
    background: var(--bg-primary);
    box-shadow: -8px 0 32px rgb(0 0 0 / 18%);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    outline: none;
}

.kabiri-mobile-drawer.open {
    transform: translateX(0);
}

.kabiri-mobile-drawer-backdrop.open {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* The drawer is a mobile-only surface. Hide on desktop so a stray .open
   from cross-tab navigation never leaks across breakpoints. */
@media (width > 768px) {
    .kabiri-mobile-drawer,
    .kabiri-mobile-drawer-backdrop {
        display: none !important;
    }
}

.kabiri-mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.kabiri-mobile-drawer-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.kabiri-mobile-drawer-close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.kabiri-mobile-drawer-close:active {
    background: rgb(0 0 0 / 6%);
}

.kabiri-mobile-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px 24px;
    -webkit-overflow-scrolling: touch;
}

.kabiri-mobile-drawer-section {
    margin-bottom: 20px;
}

.kabiri-mobile-drawer-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.kabiri-mobile-drawer-segmented {
    display: flex;
    gap: 6px;
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 4px;
}

.kabiri-mobile-drawer-segmented-btn {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.18s;
    font-family: inherit;
}

.kabiri-mobile-drawer-segmented-btn.active {
    background: var(--brand-gradient);
    color: white;
}

.kabiri-mobile-drawer-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.kabiri-mobile-drawer-option-label {
    font-size: 14px;
    color: var(--text-primary);
}

.kabiri-mobile-drawer-tz-list {
    max-height: 50vh;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    background: var(--bg-secondary);
    -webkit-overflow-scrolling: touch;
}

.kabiri-mobile-drawer-tz-region {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-hover);
}

.kabiri-mobile-drawer-tz-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--text-primary);
    font-size: 13px;
    border-bottom: 1px solid var(--border-light);
}

.kabiri-mobile-drawer-tz-item:last-child {
    border-bottom: none;
}

.kabiri-mobile-drawer-tz-item.active {
    background: rgba(var(--brand-primary-rgb), 0.08);
    color: var(--brand-primary);
    font-weight: 600;
}

.kabiri-mobile-drawer-tz-offset {
    font-size: 11px;
    color: var(--text-tertiary);
    flex-shrink: 0;
    margin-left: 12px;
}

/* Touch feedback for cells / event chips that suppress the OS tap-highlight.
   Several views set `-webkit-tap-highlight-color: transparent` (calendar
   month / day / week event chips, reauth banner buttons) to avoid the dark
   blue flash on iOS / Android. Without a replacement the user gets zero
   feedback when tapping. These :active rules add a subtle press state on
   pointer-coarse devices only - desktop hover styles continue to handle
   the mouse case. */
@media (pointer: coarse) {
    .calendar-day-cell:active {
        background: rgb(0 0 0 / 4%);
    }

    [data-theme='dark'] .calendar-day-cell:active {
        background: rgb(255 255 255 / 6%);
    }

    .calendar-week-cell:active {
        background: rgb(212 175 55 / 6%);
    }

    .calendar-week-event-positioned:active,
    .calendar-day-cell-event:active,
    .calendar-event-badge:active {
        opacity: 0.78;
        transform: scale(0.985);
    }
}

/* Hide the chat-bridge "pending event" banner whenever a calendar modal is
   visible. Without this the banner sits behind the modal backdrop and
   re-appears each time the modal closes - the banner is only meant to
   surface when the user is *between* flows, not while they're already
   editing. Uses :has() (Chrome 105+, FF 121+, Safari 15.4+); the codebase
   already relies on similarly-modern CSS in the calendar styles. */
body:has(#create-event-modal),
body:has(#event-detail-modal),
body:has(.event-modal-backdrop),
body:has(.edm-backdrop) {
    .kabiri-pending-event-banner {
        display: none !important;
    }
}

.calendar-settings-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;

    /* Opaque surface so the settings float legibly over the week grid
       (matches the timezone and booking-links dropdowns). */
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow:
        0 8px 32px rgb(0 0 0 / 12%),
        0 0 0 0.5px rgb(0 0 0 / 4%);
    z-index: 1000;
    min-width: 280px;
    padding: 12px;
}

[data-theme='dark'] .calendar-settings-dropdown {
    background: var(--bg-primary);
    border-color: rgb(255 255 255 / 8%);
    box-shadow: 0 8px 32px rgb(0 0 0 / 35%);
}

.calendar-settings-section {
    margin-bottom: 16px;
}

.calendar-settings-section:last-child {
    margin-bottom: 0;
}

.calendar-settings-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.calendar-settings-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.calendar-settings-option-label {
    font-size: 13px;
    color: var(--text-primary);
}

.calendar-settings-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: rgb(0 0 0 / 9%);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
}

[data-theme='dark'] .calendar-settings-toggle {
    background: rgb(255 255 255 / 10%);
}

.calendar-settings-toggle.active {
    background: #34c759;
}

.calendar-settings-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 1px 3px rgb(0 0 0 / 15%),
        0 1px 1px rgb(0 0 0 / 6%);
}

.calendar-settings-toggle.active::after {
    transform: translateX(20px);
}

.calendar-settings-time-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.calendar-settings-time-label {
    font-size: 13px;
    color: var(--text-primary);
    min-width: 60px;
}

.calendar-settings-time-select {
    flex: 1;
    padding: 6px 10px;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 45%);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme='dark'] .calendar-settings-time-select {
    background: rgb(30 30 30 / 65%);
    border-color: rgb(255 255 255 / 8%);
}

.calendar-settings-time-select:focus {
    outline: none;
    border-color: rgba(var(--brand-primary-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1);
}

.calendar-settings-wrapper {
    position: relative;
}

/* Event Type Filter Toggle - Apple Segmented Control */
.calendar-event-type-filter {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgb(0 0 0 / 4%);
    border: 1px solid rgb(0 0 0 / 4%);
    border-radius: 9px;
    padding: 2px;
}

[data-theme='dark'] .calendar-event-type-filter {
    background: rgb(255 255 255 / 6%);
    border-color: rgb(255 255 255 / 4%);
}

.calendar-event-type-btn {
    padding: 5px 11px;
    background: transparent;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-event-type-btn:hover {
    color: var(--text-primary);
}

.calendar-event-type-btn.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow:
        0 1px 3px rgb(0 0 0 / 8%),
        0 1px 2px rgb(0 0 0 / 4%);
}

[data-theme='dark'] .calendar-event-type-btn.active {
    background: rgb(255 255 255 / 12%);
}

.calendar-event-type-btn.work-active {
    background: rgba(var(--brand-primary-rgb), 0.12);
    color: var(--brand-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(var(--brand-primary-rgb), 0.1);
}

.calendar-event-type-btn.personal-active {
    background: rgb(16 185 129 / 12%);
    color: var(--accent-green);
    font-weight: 600;
    box-shadow: 0 1px 3px rgb(16 185 129 / 10%);
}

.event-type-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.event-type-indicator.work {
    background: var(--brand-primary);
}

.event-type-indicator.personal {
    background: var(--accent-green);
}

@media (width <= 768px) {
    .calendar-week-header {
        padding: 6px 8px;
        flex-wrap: wrap;
        gap: 6px;

        /* Mobile lets the action row wrap onto a second line, so
           relax the desktop's fixed 52px header height. */
        height: auto;
        min-height: 52px;
        max-height: none;
    }

    .calendar-week-header-title {
        font-size: 13px;
    }

    .calendar-week-header-subtitle {
        font-size: 10px;
    }

    .calendar-timezone-dropdown {
        min-width: 280px;
        right: -50px;
    }
}

@media (width <= 480px) {
    .calendar-week-header-title {
        font-size: 12px;
    }

    .calendar-timezone-dropdown {
        min-width: 260px;
        right: -80px;
    }
}

/* ============================================================
   Inline task checkbox (day & week views). Shown on task blocks and
   all-day task pills so a task can be ticked complete / incomplete
   without opening it. currentColor keeps the empty box legible on the
   task's own fill; the done state fills with the brand colour.
   ============================================================ */

.calendar-task-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-right: 5px;
    vertical-align: middle;
    border: 1.5px solid currentcolor;
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
    opacity: 0.85;
    transition:
        background 0.12s ease,
        border-color 0.12s ease,
        opacity 0.12s ease;
}

.calendar-task-check:hover {
    opacity: 1;
}

.calendar-task-check svg {
    opacity: 0;
}

.calendar-task-check.is-done {
    background: var(--brand-primary, #1433d2);
    border-color: var(--brand-primary, #1433d2);
    color: #fff;
    opacity: 1;
}

.calendar-task-check.is-done svg {
    opacity: 1;
}

/* Completed tasks fade back in the day & week grids so finished work reads as
   done at a glance (the ticked checkbox already marks the state). */
.calendar-week-event-positioned.calendar-task-done,
.calendar-day-cell-event.calendar-task-done,
.calendar-allday-pill.calendar-task-done,
.calendar-day-allday-pill.calendar-task-done,
.calendar-agenda-event.calendar-task-done,
.calendar-event-badge.calendar-task-done {
    opacity: 0.5;
}

/* ============================================================================
   COMMAND PALETTE (⌘K) + KEYBOARD SHORTCUTS HELP (?)
   Self-contained surfaces mounted under <body> by CommandPalette.js. Mirrors
   the Projects tab's palette look; definition comes from the shadow (explicit
   hairline borders are used because the --glass-border / --border-light tokens
   are full "1px solid <color>" shorthands, not colours).
   ============================================================================ */
.cal-cmdk-backdrop,
.cal-shortcuts-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(15 17 23 / 35%);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 9999;
    animation: calCmdkFade 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes calCmdkFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.cal-cmdk {
    position: fixed;
    top: 18vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 32px));
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary, #fff);
    border: 1px solid rgb(0 0 0 / 8%);
    border-radius: 14px;
    box-shadow:
        0 24px 60px rgb(0 0 0 / 25%),
        0 6px 16px rgb(0 0 0 / 12%);
    z-index: 10000;
    animation: calCmdkIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes calCmdkIn {
    from {
        opacity: 0;
        transform: translate(-50%, -8px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

[data-theme='dark'] .cal-cmdk {
    border-color: rgb(255 255 255 / 12%);
}

.cal-cmdk-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgb(0 0 0 / 8%);
    color: var(--text-tertiary);
}

[data-theme='dark'] .cal-cmdk-search {
    border-bottom-color: rgb(255 255 255 / 10%);
}

.cal-cmdk-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
}

.cal-cmdk-kbd {
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 6px;
    border: 1px solid rgb(0 0 0 / 12%);
    border-radius: 4px;
    background: var(--bg-hover, rgb(0 0 0 / 4%));
    color: var(--text-tertiary);
    font-family: inherit;
    flex-shrink: 0;
}

[data-theme='dark'] .cal-cmdk-kbd {
    border-color: rgb(255 255 255 / 14%);
}

.cal-cmdk-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    flex: 1;
}

.cal-cmdk-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
}

.cal-cmdk-item.is-highlighted,
.cal-cmdk-item:hover {
    background: rgb(20 51 210 / 10%);
    color: var(--brand-primary);
}

.cal-cmdk-item-icon {
    width: 16px;
    text-align: center;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.cal-cmdk-item.is-highlighted .cal-cmdk-item-icon,
.cal-cmdk-item:hover .cal-cmdk-item-icon {
    color: var(--brand-primary);
}

.cal-cmdk-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-cmdk-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 13px;
}

/* Shortcuts help overlay */
.cal-shortcuts {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 32px));
    max-height: 80vh;
    overflow-y: auto;
    background: var(--bg-primary, #fff);
    border: 1px solid rgb(0 0 0 / 8%);
    border-radius: 14px;
    box-shadow:
        0 24px 60px rgb(0 0 0 / 25%),
        0 6px 16px rgb(0 0 0 / 12%);
    z-index: 10000;
    animation: calCmdkIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme='dark'] .cal-shortcuts {
    border-color: rgb(255 255 255 / 12%);
}

.cal-shortcuts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgb(0 0 0 / 8%);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

[data-theme='dark'] .cal-shortcuts-head {
    border-bottom-color: rgb(255 255 255 / 10%);
}

.cal-shortcuts-x {
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.cal-shortcuts-x:hover {
    color: var(--text-primary);
}

.cal-shortcuts-body {
    padding: 8px 16px 16px;
}

.cal-shortcuts-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
}

.cal-shortcuts-keys {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    min-width: 110px;
}

.cal-shortcuts-keys kbd {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border: 1px solid rgb(0 0 0 / 12%);
    border-radius: 5px;
    background: var(--bg-hover, rgb(0 0 0 / 4%));
    color: var(--text-secondary);
    font-family: inherit;
}

[data-theme='dark'] .cal-shortcuts-keys kbd {
    border-color: rgb(255 255 255 / 14%);
}

.cal-shortcuts-or {
    font-size: 10px;
    color: var(--text-tertiary);
}

.cal-shortcuts-desc {
    font-size: 13px;
    color: var(--text-primary);
}

/* ============================================================================
   "JOIN" BUTTON on day/week event blocks
   Hidden until the block carries .is-joinable, which CalendarWeekView.refresh-
   JoinButtons() toggles (on the live-time tick) while a meeting with a
   conferencing link is imminent / in progress.
   ============================================================================ */
.cal-join-btn {
    display: none;
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 2;
    align-items: center;
    padding: 1px 8px;
    border: none;
    border-radius: 5px;
    background: #0b8043; /* meeting green */
    color: #fff;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.6;
    cursor: pointer;
    box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
}

.cal-join-btn:hover {
    filter: brightness(1.08);
}

.calendar-week-event-positioned.is-joinable .cal-join-btn,
.calendar-day-cell-event.is-joinable .cal-join-btn {
    display: inline-flex;
}

/* A thin green ring draws the eye to a meeting you can join right now. */
.calendar-week-event-positioned.is-joinable,
.calendar-day-cell-event.is-joinable {
    outline: 1.5px solid #0b8043;
    outline-offset: -1.5px;
}

/* ============================================================
   Keyboard focus rings for the quick-create popover's buttons
   (the text inputs already show a brand border + glow on :focus).
   ============================================================ */
.kabiri-quick-create-cat:focus-visible,
.kabiri-quick-create-close:focus-visible,
.kabiri-quick-create-save:focus-visible,
.kabiri-quick-create-more:focus-visible,
.kabiri-quick-create-chip:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* ============================================================
   Reduced motion: collapse the calendar's transitions/animations
   for users who ask the OS to minimise movement. Scoped to the
   calendar surfaces this stylesheet owns.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .calendar-layout *,
    .calendar-layout *::before,
    .calendar-layout *::after,
    .kabiri-quick-create-popover *,
    .kabiri-mobile-drawer *,
    .calendar-mobile-stacked * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==== Timeline mode ====
   The timeline surface's outer shell. The calendar-grid <-> Gantt-timeline
   switcher is now the adaptive .calendar-view-menu control (.calendar-layout-menu)
   in the header's left cluster, styled alongside the other view menus above. */

/* ---- Timeline surface shell ----
   Flex column: a fixed toolbar strip on top, then a single scrollable body
   that owns the (future) time canvas. Fills .calendar-main's height. */
.calendar-timeline {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
}

.calendar-timeline-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    height: 40px;
    padding: 0 14px;
    background: var(--bg-secondary);

    /* --border-light is a full `1px solid ...` shorthand token. */
    border-bottom: var(--border-light);
}

.calendar-timeline-toolbar-hint {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.calendar-timeline-body {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.calendar-timeline-placeholder {
    max-width: 420px;
    margin: 12% auto 0;
    padding: 24px;
    text-align: center;
}

.calendar-timeline-placeholder-title {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.calendar-timeline-placeholder-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ---- Timeline toolbar: Day|Week|Month zoom segmented control ---- */
.calendar-timeline-zoom {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    gap: 2px;
    background: var(--bg-active);
    border: var(--glass-border);
    border-radius: 8px;
}

.calendar-timeline-zoom-btn {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.calendar-timeline-zoom-btn:hover {
    color: var(--text-primary);
}

.calendar-timeline-zoom-btn.active {
    color: var(--brand-primary);
    background: var(--bg-primary);
    box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

.calendar-timeline-zoom-btn:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

/* ---- Time canvas ----
   A single scroll container owning BOTH axes; the canvas is exactly
   `totalWidth` px wide so horizontal scrolling is native (no JS on scroll). */
.calendar-timeline-canvas {
    position: relative;
    min-height: 100%;
}

/* The lower body: the sticky left rail (in normal flow, so it drives the
   height) plus the absolutely-positioned time canvas offset past the rail. */
.calendar-timeline-lower {
    position: relative;
}

.calendar-timeline-canvas-lower {
    position: absolute;
    top: 0;
}

/* Sticky axis header: a corner spacer over the rail + the axis proper. Pins to
   the top on vertical scroll and rides the canvas horizontally. Height is fixed
   (22 + 34) because its children are absolutely positioned. */
.calendar-timeline-header {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 56px;
    background: var(--bg-secondary);
    border-bottom: var(--border-light);
}

/* Sticks to the left so it always covers the rail column at the top-left
   intersection; sits above the axis (which scrolls under it). */
.calendar-timeline-corner {
    position: sticky;
    left: 0;
    z-index: 4;
    height: 56px;
    background: var(--bg-secondary);
    border-right: var(--border-light);
}

.calendar-timeline-axis {
    position: absolute;
    top: 0;
    height: 56px;
}

.calendar-timeline-months {
    position: relative;
    height: 22px;
    border-bottom: var(--border-light);
}

.calendar-timeline-month {
    position: absolute;
    top: 0;
    height: 22px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 8px;
    overflow: hidden;
    border-left: var(--border-light);
}

.calendar-timeline-month-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.calendar-timeline-units {
    position: relative;
    height: 34px;
}

.calendar-timeline-unit {
    position: absolute;
    top: 0;
    height: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 1px;
    overflow: hidden;
    border-left: var(--border-light);
}

.calendar-timeline-unit.is-weekend {
    background: rgb(0 0 0 / 3%);
}

.calendar-timeline-unit-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-secondary);
    white-space: nowrap;
}

.calendar-timeline-unit-sub {
    font-size: 9px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.calendar-timeline-unit.is-today .calendar-timeline-unit-label,
.calendar-timeline-unit.is-today .calendar-timeline-unit-sub {
    color: var(--brand-primary);
}

.calendar-timeline-unit.is-today {
    background: rgb(20 51 210 / 6%);
}

/* ---- Background grid: weekend bands + today marker ---- */
.calendar-timeline-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.calendar-timeline-weekend {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgb(0 0 0 / 2.5%);
}

/* Day boundary seam at hour zoom - each day spans 1300+px there, so the grid
   needs a visible edge where one day ends and the next begins. */
.calendar-timeline-dayline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgb(0 0 0 / 8%);
}

/* The live "now" line: a vertical RED marker (matching the grid's horizontal
   red now-line, --calendar-clash) with a dot cap and a small time label. Its
   left edge is nudged live by CalendarTimelineView.startLiveTimeIndicator. */
.calendar-timeline-today {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--calendar-clash);
    z-index: 2;
}

.calendar-timeline-today-cap {
    position: absolute;
    top: 0;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--calendar-clash);
    transform: translate(-50%, -50%);
}

.calendar-timeline-today-label {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    color: #fff;
    background: var(--calendar-clash);
    border-radius: 4px;
    pointer-events: none;
}

/* Working-hours shading (hour zoom): a gentle dim over the off-hours slices of
   each day, mirroring the day/week grid's Notion-style dimming. */
.calendar-timeline-offhours {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgb(0 0 0 / 3.5%);
    pointer-events: none;
    z-index: 0;
}

[data-theme='dark'] .calendar-timeline-offhours {
    background: rgb(0 0 0 / 22%);
}

/* Click / drag-to-create selection band (hour zoom): a translucent brand-tinted
   column swept across the time the new event will span, with a floating time
   label. Spans the full canvas height and never intercepts pointer events (the
   create gesture runs off document-level listeners). */
.calendar-timeline-create-band {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(var(--brand-accent-rgb), 0.18);
    border: 1px solid rgba(var(--brand-accent-rgb), 0.55);
    border-radius: 4px;
    pointer-events: none;
    z-index: 3;
}

.calendar-timeline-create-band-label {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    color: #fff;
    background: var(--brand-accent);
    border-radius: 4px;
}

/* ---- Content region (Phase 2 placeholder / loading shimmer) ---- */
.calendar-timeline-content {
    position: relative;
    z-index: 1;
}

.calendar-timeline-content-hint {
    position: sticky;
    left: 0;
    display: inline-block;
    padding: 14px 16px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.calendar-timeline-content.is-loading {
    min-height: 240px;
}

.calendar-timeline-shimmer-row {
    position: absolute;
    left: 0;
    right: 0;
}

.calendar-timeline-shimmer-bar {
    position: absolute;
    top: 8px;
    height: 20px;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        var(--bg-active) 25%,
        var(--bg-secondary) 37%,
        var(--bg-active) 63%
    );
    background-size: 400% 100%;
    animation: calendar-timeline-shimmer 1.4s ease infinite;
}

@keyframes calendar-timeline-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-timeline-shimmer-bar {
        animation: none;
    }
}

/* Dark theme: the flat black-alpha bands read too heavy on a dark canvas, so
   swap to faint white washes. Tokens handle text/brand colours already. */
[data-theme='dark'] .calendar-timeline-unit.is-weekend,
[data-theme='dark'] .calendar-timeline-weekend {
    background: rgb(255 255 255 / 4%);
}

[data-theme='dark'] .calendar-timeline-dayline {
    background: rgb(255 255 255 / 10%);
}

[data-theme='dark'] .calendar-timeline-unit.is-today {
    background: rgb(255 255 255 / 6%);
}

/* ==== Timeline swimlanes, bars, rail + drawer (Phase 3) ====
   The left rail sticks to the scroll container's left edge; the canvas rows and
   rail cells are laid out from one ordered row list (matching top offsets) so a
   label always sits at the same Y as its bar. Colours flow through the design
   tokens; only a couple of dark-theme washes need an explicit override. */

/* ---- Sticky left rail ---- */
.calendar-timeline-rail {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-primary);
    border-right: var(--border-light);
}

.calendar-timeline-section {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.calendar-timeline-rail-row {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    padding: 0 10px;
    border-bottom: 1px solid rgb(0 0 0 / 3%);
}

.calendar-timeline-rail-row.is-group-header {
    padding: 0;
}

.calendar-timeline-group-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    margin: 0;
    font: inherit;
    text-align: left;
    color: var(--text-primary);
    background: transparent;
    border: none;
    cursor: pointer;
}

.calendar-timeline-group-toggle:hover {
    background: var(--bg-hover);
}

.calendar-timeline-group-toggle:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

.calendar-timeline-chevron {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--text-tertiary);
    transition: transform 0.15s ease;
}

.calendar-timeline-chevron.is-collapsed {
    transform: rotate(-90deg);
}

.calendar-timeline-group-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.calendar-timeline-group-name {
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-timeline-group-count {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--text-tertiary);
}

.calendar-timeline-rail-title {
    flex: 1 1 auto;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-timeline-rail-row.is-done .calendar-timeline-rail-title {
    color: var(--text-tertiary);
    text-decoration: line-through;
}

.calendar-timeline-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: var(--brand-accent);
}

/* ---- Canvas rows + bands ---- */
.calendar-timeline-row {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
}

.calendar-timeline-band {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
}

.calendar-timeline-band.is-group {
    background: rgb(0 0 0 / 1.5%);
}

/* ---- Task / event bars ---- */
.calendar-timeline-bar {
    position: absolute;
    top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    height: 24px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
    z-index: 1;
}

.calendar-timeline-bar:hover {
    filter: brightness(1.05);
    box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
}

.calendar-timeline-bar:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

.calendar-timeline-bar.is-overdue {
    box-shadow: inset 0 0 0 2px #e5484d;
}

.calendar-timeline-bar.is-done {
    opacity: 0.6;
}

/* ---- Drag / resize affordances (Phase 4) ---- */

/* A bar being dragged rides above its neighbours and skips the hover filter so
   the ghost tracks the pointer cleanly. */
.calendar-timeline-bar.is-dragging {
    z-index: 5;
    cursor: grabbing;
    box-shadow: 0 4px 14px rgb(0 0 0 / 30%);
    filter: none;
}

/* Edge resize grips: invisible until the bar is hovered, then a thin column at
   each end with a col-resize cursor. Sit above the bar body's pointerdown so
   the delegator's closest() match resolves to the grip when grabbing an edge. */
.calendar-timeline-resize {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    opacity: 0;
    z-index: 2;
}

.calendar-timeline-resize.is-start {
    left: -1px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.calendar-timeline-resize.is-end {
    right: -1px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.calendar-timeline-bar:hover .calendar-timeline-resize {
    opacity: 1;
    background: rgb(255 255 255 / 35%);
}

/* Drop target: a brand-tinted wash over the canvas while a backlog task is
   dragged across it, so it reads as a live drop surface. */
.calendar-timeline-canvas-lower.is-drop-target {
    background: rgba(var(--brand-accent-rgb), 0.08);
    box-shadow: inset 0 0 0 2px rgba(var(--brand-accent-rgb), 0.4);
}

.calendar-timeline-bar-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-timeline-bar-check {
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1;
}

.calendar-timeline-event-tick {
    flex: 0 0 auto;
    width: 3px;
    height: 14px;
    border-radius: 2px;
}

.calendar-timeline-bar-label-out {
    position: absolute;
    top: 6px;
    display: flex;
    align-items: center;
    height: 24px;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

/* Clipped-edge affordance: square off the run-off side + a soft fade chevron. */
.calendar-timeline-bar.is-clipped-left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.calendar-timeline-bar.is-clipped-left::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 10px;
    background: linear-gradient(to right, rgb(255 255 255 / 40%), transparent);
}

.calendar-timeline-bar.is-clipped-right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.calendar-timeline-bar.is-clipped-right::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 10px;
    background: linear-gradient(to left, rgb(255 255 255 / 40%), transparent);
}

/* Timed event at month zoom: a bare dot. */
.calendar-timeline-event-dot {
    position: absolute;
    top: 14px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
    z-index: 1;
}

/* ---- Milestone diamond ---- */
.calendar-timeline-milestone {
    position: absolute;
    top: 9px;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    transform: translateX(-50%) rotate(45deg);
    cursor: pointer;
    box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
    z-index: 1;
}

.calendar-timeline-milestone:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.calendar-timeline-milestone.is-overdue {
    box-shadow: inset 0 0 0 2px #e5484d;
}

.calendar-timeline-milestone.is-done {
    opacity: 0.5;
}

.calendar-timeline-milestone-label {
    position: absolute;
    top: 6px;
    display: flex;
    align-items: center;
    height: 24px;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    pointer-events: none;
}

/* ---- Collapsed-group summary dot strip ---- */
.calendar-timeline-summary-dot {
    position: absolute;
    top: 15px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    transform: translateX(-50%);
}

/* ---- Rail loading shimmer ---- */
.calendar-timeline-rail-shimmer {
    position: absolute;
    left: 12px;
    height: 12px;
    border-radius: 5px;
    background: linear-gradient(
        90deg,
        var(--bg-active) 25%,
        var(--bg-secondary) 37%,
        var(--bg-active) 63%
    );
    background-size: 400% 100%;
    animation: calendar-timeline-shimmer 1.4s ease infinite;
}

@media (prefers-reduced-motion: reduce) {
    .calendar-timeline-rail-shimmer {
        animation: none;
    }
}

/* ---- Empty state ---- */
.calendar-timeline-empty {
    position: sticky;
    left: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 460px;
    max-width: 90vw;
    margin: 60px 0 0 40px;
    padding: 24px;
    text-align: center;
}

.calendar-timeline-empty-title {
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.calendar-timeline-empty-desc {
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.calendar-timeline-empty-btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--brand-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.calendar-timeline-empty-btn:hover {
    filter: brightness(1.05);
}

/* ---- Bottom "Unscheduled" drawer ---- */
.calendar-timeline-drawer {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    max-height: 42%;
    background: var(--bg-secondary);
    border-top: var(--border-light);
}

.calendar-timeline-drawer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 36px;
    padding: 0 14px;
    font: inherit;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
}

.calendar-timeline-drawer-header:hover {
    color: var(--text-primary);
}

.calendar-timeline-drawer-header:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

.calendar-timeline-drawer-chevron {
    display: inline-flex;
    color: var(--text-tertiary);
    transition: transform 0.15s ease;
}

.calendar-timeline-drawer-chevron.is-open {
    transform: rotate(180deg);
}

.calendar-timeline-drawer-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.calendar-timeline-drawer-sep {
    color: var(--text-tertiary);
}

.calendar-timeline-drawer-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
}

.calendar-timeline-drawer-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    padding: 4px 10px 10px;
}

.calendar-timeline-drawer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-size: 13px;
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: grab;
    user-select: none;
}

.calendar-timeline-drawer-row:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.calendar-timeline-drawer-row:active {
    cursor: grabbing;
}

.calendar-timeline-drawer-grip {
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1;
    color: var(--text-tertiary);
}

.calendar-timeline-drawer-title {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-timeline-drawer-proj {
    flex: 0 0 auto;
    max-width: 42%;
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-timeline-drawer-empty {
    padding: 8px 2px;
    font-size: 12px;
    color: var(--text-tertiary);
}

/* ---- "N more items outside this view" cap footer row ---- */
.calendar-timeline-rail-row.is-more {
    padding: 0 12px;
    font-size: 11px;
    font-style: italic;
    color: var(--text-tertiary);
}

.calendar-timeline-band.is-more {
    position: absolute;
    left: 0;
    right: 0;
    background: rgb(0 0 0 / 2%);
}

/* ---- "No tasks" placeholder row (expanded, empty task swimlane) ---- */
.calendar-timeline-rail-row.is-empty {
    padding: 0 12px;
    font-size: 11px;
    font-style: italic;
    color: var(--text-tertiary);
}

.calendar-timeline-band.is-empty {
    position: absolute;
    left: 0;
    right: 0;
    background: rgb(0 0 0 / 2%);
}

/* ---- Dependency arrows (read-only, tasks only) ----
   One SVG overlays the scrolled canvas; pointer-events:none so it never
   intercepts a bar click. Elbow connectors run blocker-end -> blocked-start in
   a muted token colour; a late dependency (blocker ends after the blocked task
   starts) turns danger-red. */
.calendar-timeline-deps {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 3;
}

.calendar-timeline-dep {
    fill: none;
    stroke: var(--text-tertiary);
    stroke-width: 1.5;
    opacity: 0.75;
}

.calendar-timeline-dep.is-late {
    stroke: var(--km-danger);
    stroke-width: 1.75;
    opacity: 0.95;
}

.calendar-timeline-arrowhead-fill {
    fill: var(--text-tertiary);
}

.calendar-timeline-arrowhead-fill.is-late {
    fill: var(--km-danger);
}

/* ---- Mode-toggle fade (calendar grid <-> timeline) ----
   Mirrors EmailTab.setEmailLayoutMode: 210ms exit on the outgoing body, then a
   210ms entrance on the freshly-rendered one. Reduced-motion drops both. */
@keyframes calendar-body-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes calendar-body-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.calendar-body-exiting {
    animation: calendar-body-fade-out 0.21s ease forwards;
}

.calendar-body-entering {
    animation: calendar-body-fade-in 0.21s ease;
}

@media (prefers-reduced-motion: reduce) {
    .calendar-body-exiting,
    .calendar-body-entering {
        animation: none;
    }
}

/* Dark theme: soften the flat black washes on the dark canvas. */
[data-theme='dark'] .calendar-timeline-band.is-group {
    background: rgb(255 255 255 / 2%);
}

[data-theme='dark'] .calendar-timeline-rail-row {
    border-bottom-color: rgb(255 255 255 / 4%);
}

/* Dark theme: Phase 4 grip + drop-target washes read too hot on the dark
   canvas; dial the white grip overlay back and lift the drop tint / ring. */
[data-theme='dark'] .calendar-timeline-bar:hover .calendar-timeline-resize {
    background: rgb(255 255 255 / 22%);
}

[data-theme='dark'] .calendar-timeline-canvas-lower.is-drop-target {
    background: rgba(var(--brand-accent-rgb), 0.14);
    box-shadow: inset 0 0 0 2px rgba(var(--brand-accent-rgb), 0.55);
}

[data-theme='dark'] .calendar-timeline-band.is-more {
    background: rgb(255 255 255 / 3%);
}

/* The clipped-edge fade chevrons are hard-white on light fills; on dark bars a
   softer wash keeps them from blowing out. */
[data-theme='dark'] .calendar-timeline-bar.is-clipped-left::before {
    background: linear-gradient(to right, rgb(255 255 255 / 22%), transparent);
}

[data-theme='dark'] .calendar-timeline-bar.is-clipped-right::after {
    background: linear-gradient(to left, rgb(255 255 255 / 22%), transparent);
}