/* ============================================================
   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)
   ============================================================ */

/* ============================================================
   0. Shared measurements
   ============================================================ */

:root {
    /* How far an event block stops short of the right edge of its day
       column, in the day and week views.

       This strip is not decoration - it is the only empty grid left on a
       busy day, and clicking empty grid is how a new event gets started at
       a particular time. Blocks used to run the full width of the column,
       so a day of back-to-back meetings had nowhere left to click and the
       New event button was the only way in.

       The events overlay is pointer-events:none and the blocks opt back in,
       so the gap falls straight through to the hour cell beneath with no
       extra wiring. */
    --cal-event-gutter: 10px;
}

/* ============================================================
   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;

    /* Positioning context for the sidebar's collapse handle, which is
       absolutely placed against this row's right edge. */
    position: relative;

    /* One source for the sidebar's width: .calendar-sidebar's flex-basis and
       the handle's offset both read it, so they cannot drift apart. */
    --cal-sidebar-w: 256px;
}

/* Collapsed: the whole right-hand panel goes and the grid takes the width.
   The handle stays - it is a sibling of the panel, not a child, so there is
   always something left to bring it back with. */
.calendar-body.is-sidebar-collapsed .calendar-sidebar {
    display: none;
}

/* The collapse handle: a tab, not a puck.

   Its right edge is flat and butts against whatever edge it belongs to -
   the panel's left edge while the panel is open, the content panel's own
   right edge once it is closed - so it reads as attached to that edge and
   pulled out from it, rather than floating over the grid. Rounded on the
   left, square and border-less on the right, because the edge it meets
   draws that line already.

   `right` is the only thing that moves between the two states, and it
   transitions, so the tab slides across as the panel goes. */
.calendar-sidebar-toggle {
    position: absolute;
    right: var(--cal-sidebar-w);
    bottom: 16px;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;

    /* 42px - half again on the 28 it was, which was itself a widening of the
       18 the tab first shipped at. The height carries the tab's identity, so
       widening costs nothing: it still reads as a tab pulled out from the
       edge, with more of it to aim at.

       None of that width comes off the grid. The tab is absolutely positioned
       against .calendar-body, so it is out of flow entirely and overhangs the
       view rather than making the grid give up space for it - widening it
       moves nothing else on screen. */
    width: 42px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--border-color, #e5e7eb);
    border-right: none;
    border-radius: 8px 0 0 8px;
    background: var(--bg-primary, #fff);
    color: var(--text-tertiary);
    cursor: pointer;

    /* Cast to the LEFT: the tab overhangs the grid on that side, and a
       centred shadow would bleed out from under the flat edge it is
       supposed to be flush against. */
    box-shadow: -2px 0 8px rgb(0 0 0 / 8%);
    transition:
        right 0.24s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease;
}

.calendar-sidebar-toggle:hover {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    background: var(--bg-hover, #f3f4f6);
}

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

/* The chevron points the way the sidebar will go: right to push it away,
   left to bring it back. Targeted by class, not as a bare `svg` descendant:
   this sheet carries plenty of later `... svg` rules, and a high-specificity
   element selector this early in the file trips no-descending-specificity
   against every one of them. */
.calendar-sidebar-toggle-chevron {
    /* Up from 12px with the tab's widening - the glyph was sized for a 28px
       tab and read small once it grew. */
    width: 15px;
    height: 15px;
    transition: transform 0.24s ease;
}

.calendar-body.is-sidebar-collapsed .calendar-sidebar-toggle-chevron {
    transform: rotate(180deg);
}

[data-theme='dark'] .calendar-sidebar-toggle {
    background: var(--bg-elevated, #1f2937);
    border-color: rgb(255 255 255 / 12%);
    box-shadow: -2px 0 8px rgb(0 0 0 / 30%);
}

/* Collapsed state last: it outranks every base rule above, and ordering it
   the other way round trips no-descending-specificity. Closed, there is
   nothing to the right of the grid, so the tab sits on the content panel's
   own right edge. */
.calendar-body.is-sidebar-collapsed .calendar-sidebar-toggle {
    right: 0;
}

/* The stacked mobile view replaces the sidebar entirely, so there is nothing
   for the handle to collapse. */
@media (width <= 768px) {
    .calendar-sidebar-toggle {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-sidebar-toggle,
    .calendar-sidebar-toggle-chevron {
        transition: none;
    }
}

.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: 14.7px;
        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: 12.6px;
        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: 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: 16.8px;
        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: 10.5px !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: 12.6px !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: 8.4px !important;
    }

    .mobile-month-section .calendar-event-more {
        font-size: 8.4px !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: 16.8px;
    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: 12.6px;
    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: 14.7px;
    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: 12.6px;
    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: 13.65px;
    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 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. Desktop takes the cut-out's
       height instead (see the @media block below) - that is what the email
       bar actually measures there, and 44px left this one a pixel short. */
    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 {
        /* Same height as the Email tab's bar, which pins itself to the
           cut-out's full border-box height rather than the compact 44px (see
           .email-list-header.compact in EmailStyles). Two things ride on it:
           the bar's 1px bottom divider lands EXACTLY on the cut-out's bottom
           edge instead of a hairline above it, and Create - stretched to the
           bar - comes out the same 44px tall as Compose rather than 43. */
        height: var(--nav-cutout-height, 45px);
        min-height: var(--nav-cutout-height, 45px);
        max-height: var(--nav-cutout-height, 45px);
        padding-right: calc(var(--topbar-cutout-w, 210px) + 10px);

        /* Keep the reserve in step with the notch's glide when the cut-out
           resizes. Per-consumer, because transitioning --topbar-cutout-w
           itself restyled the whole document each frame. */
        transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

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

    /* Full bar height, so Create can stretch to the divider. */
    align-self: stretch;
    gap: 6px;

    /* Fixed width, so the centred cluster is the only thing that gives when
       the header runs short. If flex is allowed to take from either end
       cluster the date stops being centred between them, which is the one
       thing the middle cluster is for. */
    flex: 0 0 auto;
}

/* Date + year and the two steps that move it - parked just right of Create,
   at a fixed offset from the panel's left edge.

   It used to be centred in the gap the end clusters leave (flex: 1 on the
   middle child of a space-between row). That made the one label you read on
   every glance at this bar the one thing that never held still: it slid
   whenever the space around it changed - the left nav rail pinned or
   unpinned, the top-right cut-out collapsing or expanding (the bar's
   padding-right tracks --topbar-cutout-w and transitions with it), or the
   view switcher simply widening to a longer view name.

   flex: 0 1 auto + margin-right: auto is what pins it: the auto margin
   swallows ALL the free space on the right, so the group's position depends
   on nothing but Create's width - which is fixed (--tab-primary-action-w).
   The right-hand cluster still rides the cut-out reserve; only this group is
   held still. */
.calendar-week-header-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex: 0 1 auto;
    margin-left: 10px;
    margin-right: auto;

    /* Without this a flex item refuses to shrink below its content, and the
       long titles (agenda's "Tue, May 11 - Mon, May 17") would push the
       right-hand cluster towards the cut-out bay instead. Auto margins take
       only POSITIVE free space, so on a bar that tight the pin gives way and
       the group shrinks rather than overrunning the cut-out. */
    min-width: 0;
}

/* 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 {
    /* 15.75px (15 x the tab's 1.05 scale) until it moved to the head of its
       own centred cluster - the label the arrows act on, so it carries a
       little more weight than it did tucked behind them. */
    font-size: 16.8px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.calendar-week-nav-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);

    /* Light mode reads this border against a near-white bar, so a white one at
       45% was invisible and the two buttons had no edge at all - they read as
       loose glyphs rather than controls. A soft dark line at 14% draws the
       shape without turning them into hard-outlined boxes. Dark mode keeps its
       own light border below, where the contrast already works. */
    border: 1px solid rgb(0 0 0 / 14%);
    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);
}

/* Today sits between the search magnifier and the view switcher
   (agenda/day/week/month/year) - it and the switcher are the two controls that
   together answer "which slice of time am I looking at". */
.calendar-week-today-btn {
    height: 24px;
    padding: 0 9px;
    border-radius: 7px;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);
    border: 1px solid var(--brand-primary);
    cursor: pointer;
    font-size: 11.55px;
    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 "Create" new-event button - the tab's primary action, labelled
   rather than a bare "+" glyph so it says what it does, and matched to the
   Email tab's "Compose" button (.email-compose-icon-btn: 34px tall, 0 14px
   padding, 9px radius) so the two tabs' primary actions read as the same
   control. (Class name is historical - it was the "+" icon button.) */

/* Create fills the content panel's TOP-LEFT CORNER rather than floating as a
   pill inset from it - the mirror of the Email tab's Compose (see
   .email-compose-icon-btn in EmailStyles): out through the header's own 12px
   left padding to the panel's edge, and stretched to the bar's full height so
   it meets the divider at the bottom. Square corners, because the corner it
   sits in is square - except when the sidebar is fully collapsed and the
   panel's top-left rounds off, which it follows below.

   It grows up, down and LEFT only; the width is otherwise the label's, so
   "Create" reads exactly as it did. */
.calendar-week-add-btn {
    flex-shrink: 0;
    box-sizing: border-box;

    /* Stretched by .calendar-week-header-title-row, itself stretched to the bar. */
    align-self: stretch;
    height: auto;

    /* Cancels the header's padding: 0 12px so the left edge lands on the
       panel's. The header is a flex row, so this moves the button alone. */
    margin-left: -12px;
    padding: 0 14px;

    /* The corner block is the same size in every tab - see
       --tab-primary-action-w (TemplateBuilder) and the Email tab's
       .email-compose-icon-btn, which carries the same floor. Without it
       "Create" sized to its own label and came out 19px narrower than
       "Compose", so the block visibly changed shape between the two tabs.
       A floor, not a fixed width: a longer label still sizes the button. */
    min-width: var(--tab-primary-action-w, 98px);
    border-radius: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    font-size: 13.65px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    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;
}

/* The panel rounds its own top-left when the sidebar is un-anchored and not
   hover-revealed (the .app-main rule in TemplateBuilder's desktop block). The
   button is in that corner, so it takes the same 14px or it squares off the
   curve the panel just drew. */
body.sidebar-autohide:not(.sidebar-revealed) .calendar-week-add-btn {
    border-top-left-radius: 14px;
}

.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, so restyling here keeps the switcher 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: 13.13px;
    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 (the layout + range switchers, ahead of the
   "More" menu) right-align their overlay: a left-aligned pop would open toward
   the header's edge and clip. */
.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 event form 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: 11.55px;
    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: 12.6px;
    color: var(--text-tertiary);
}

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

    /* Same reason as the title row above: both ends hold their width so the
       centred date group is the only thing that gives. */
    flex: 0 0 auto;
}

/* Header search: a bare magnifier at the head of the RIGHT cluster, first in
   the row and immediately left of Today. 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).

   It used to be a labelled grey pill beside Create, sized to match it (34px).
   Icon only now: the magnifier says search on its own, and the label was the
   widest thing in the left cluster, so dropping it hands that width to the
   centred date group. Squared to 30px, quiet and transparent at rest, it
   matches the settings gear at the other end of the same cluster rather than
   Create - the cluster's own icon-button treatment. title / aria-label carry
   the name for screen readers and on hover. */
.calendar-week-search-btn {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 8px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    background: transparent;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

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

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

.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: 14.7px;
    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%);
}

.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: 11.55px;
    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: 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: 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: 10.5px;
    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: 12.6px;
    color: var(--text-primary);
}

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

.timezone-item-offset {
    font-size: 11.55px;
    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: 13.13px;
    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;
}

/* The docked create/edit form is repositionable by its header - wired up in
   CalendarActions._enableInlineFormDrag, so the class is only present on the
   inline presentation, which is the one where dragging works. */
.event-modal-header.is-draggable {
    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;
}

.event-modal-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;
}

/* ============================================================
   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: var(--border-light);
    flex-shrink: 0;
}

.kabiri-mobile-drawer-title {
    font-size: 15.75px;
    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: 11.55px;
    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: 13.65px;
    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: 14.7px;
    color: var(--text-primary);
}

.kabiri-mobile-drawer-tz-list {
    max-height: 50vh;
    overflow-y: auto;
    border-radius: 10px;
    border: 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: 10.5px;
    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: 13.65px;
    border-bottom: 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: 11.55px;
    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: 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: 11.55px;
    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: 13.65px;
    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: 13.65px;
    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: 12.6px;
    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: 12.6px;
    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: 13.65px;
    }

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

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

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

    .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;
}

/* ============================================================================
   KEYBOARD SHORTCUTS HELP (?)
   A self-contained surface mounted under <body> by ShortcutsHelp.js.
   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-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;
    }
}

/* 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: 13.65px;
    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: 21px;
    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: 11.55px;
    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: 10.5px;
    color: var(--text-tertiary);
}

.cal-shortcuts-desc {
    font-size: 13.65px;
    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: 11.03px;
    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;
}

/* ============================================================
   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-mobile-drawer *,
    .calendar-mobile-stacked * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}