/* Midnight-spanning event segments (today view) */
        .event-card.midnight-segment-start {
            border-bottom: 2px dashed var(--border-color);
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .event-card.midnight-segment-end {
            border-top: 2px dashed var(--border-color);
            border-top-right-radius: 0;
            border-top-left-radius: 0;
        }

        .event-card-header {
            display: flex;
            align-items: center;
            gap: var(--space-2-5);
            padding: var(--space-3) var(--space-4);
        }

        .event-meeting-type {
            width: 4px;
            align-self: stretch;
            border-radius: var(--radius-sm) 0 0 var(--radius-sm);
            flex-shrink: 0;
        }

        .event-meeting-type.video-call {
            background: #45B854;
        }

        .event-meeting-type.in-person {
            background: #9B6DB8;
        }

        .event-meeting-type.location {
            background: #FF9500;
        }

        .event-meeting-type.task {
            background: #4A90D9;
        }

        .event-card-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
            min-width: 0;
        }

        .event-title {
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 500;
            color: var(--text-primary);
            /* 1.5 (not 1.3) — Avenir Next's ascender in 14px takes ~12.6px
               of the line-box. At line-height:1.3 (18.2px line-box) that
               leaves only ~1px of buffer above the text, so sub-pixel
               rendering + overflow:hidden clips the tops of capitals F/S/K.
               1.5 gives ~2.5px top buffer which comfortably fits. */
            line-height: 1.5;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            text-align: left;
            display: block;
            white-space: nowrap;
        }

        /* Free time gap between events */
        .free-time-gap {
            position: absolute;
            left: 0;
            right: 0;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }

        .free-time-text {
            background: transparent;
            padding: 4px 12px;
            font-size: var(--font-size-12);
            font-weight: 400;
            color: var(--text-tertiary);
        }

        .calendar-event.dragging {
            opacity: 0.5;
            transform: scale(0.98);
        }

        /* Hide the inline time when dragging (drag preview shows the position instead) */
        .calendar-event.dragging .event-time-inline {
            opacity: 0;
        }

        /* Week timeline task dragging */
        .week-timeline-task.dragging {
            opacity: 0.3;
        }

        .week-timeline-task.dragging .week-timeline-time-label {
            opacity: 0;
        }

        /* Week timeline event dragging */
        .week-timeline-event.dragging {
            opacity: 0.3;
        }

        .week-timeline-event {
            cursor: grab;
        }

        .week-timeline-event:active {
            cursor: grabbing;
        }

        .event-time-label {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--text-secondary);
            flex-shrink: 0;
            width: 45px;
        }

        .event-content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
            min-width: 0;
        }

        .event-card.is-task {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: var(--space-2);
            padding: 6px 10px;
        }

        .task-left-col {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-2-5);
            flex-shrink: 0;
        }

        .task-right-col {
            flex: 1;
            min-width: 0;
            padding-right: 35px;
            display: flex;
            align-items: flex-start;
            padding-top: 1px;
        }

        .task-left-col .event-time-inline {
            font-size: var(--font-size-12);
        }

        .timeline-checkbox-wrapper {
            flex-shrink: 0;
            padding-top: 1px;
        }

        .timeline-checkbox {
            width: 18px;
            height: 18px;
            border: 2px solid var(--border-medium);
            border-radius: var(--radius-circle);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-fast);
            background: var(--bg-card);
        }

        .timeline-checkbox:hover {
            border-color: var(--accent-blue);
        }

        .timeline-checkbox svg {
            width: 10px;
            height: 10px;
            stroke: white;
            stroke-width: 2.5;
            opacity: 0;
            transform: scale(0.5);
            transition: all var(--transition-fast);
        }

        .timeline-checkbox.completing {
            border-color: var(--accent-blue);
            background: var(--accent-blue);
            animation: checkPulse var(--duration-slow) var(--ease-in-out);
        }

        .timeline-checkbox.completing svg {
            opacity: 1;
            transform: scale(1);
        }

        .calendar-event.completing {
            opacity: 0.6;
        }

        .calendar-event.completing .event-title {
            text-decoration: line-through;
            color: var(--text-tertiary);
        }

        .calendar-event.completed {
            animation: taskComplete var(--duration-slow) var(--ease-in-out) forwards;
        }

        /* Calendar color classes */
        .event-card.calendar-green {
            border-left-color: #34C759;
        }

        .event-card.calendar-blue {
            border-left-color: #007AFF;
        }

        .event-card.calendar-purple {
            border-left-color: #AF52DE;
        }

        .event-card.calendar-orange {
            border-left-color: #FF9500;
        }

        .event-card.calendar-red {
            border-left-color: #FF3B30;
        }

        /* Drag time pill indicator */
        .drag-time-pill {
            position: fixed;
            padding: 6px 12px;
            background: var(--accent-fill);
            color: white;
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 600;
            border-radius: var(--radius-xl);
            pointer-events: none;
            z-index: var(--z-layer-modal);
            display: none;
            box-shadow: 0 4px 12px var(--accent-blue-border);
            transform: translate(-50%, -50%);
        }

        .drag-time-pill.visible {
            display: block;
            letter-spacing: 0.3px;
        }

        /* Event duration gap indicator */
        .event-duration-gap {
            text-align: center;
            padding: 16px 0;
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
            font-weight: 500;
            margin: 0;
        }

        .event-duration {
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
            font-weight: 400;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .event-icons .event-meeting-type {
            width: 14px;
            height: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: opacity var(--transition-fast);
        }

        .event-icons .event-meeting-type:hover {
            opacity: 0.8;
        }

        .event-icons .event-meeting-type svg {
            width: 14px;
            height: 14px;
        }

        .event-notes-icon {
            width: 14px;
            height: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
        }

        .event-notes-icon svg {
            width: 14px;
            height: 14px;
        }

        .event-attendees {
            display: flex;
            align-items: center;
            gap: var(--space-half);
        }

        .attendee-dot {
            width: 8px;
            height: 8px;
            border-radius: var(--radius-circle);
        }

        .attendee-dot:first-child {
            margin-left: 0;
        }

        .attendee-extra {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            margin-left: 4px;
        }

        .event-attendees {
            display: flex;
            align-items: center;
            gap: var(--space-half);
        }

        .attendee-dot {
            width: 8px;
            height: 8px;
            border-radius: var(--radius-circle);
            border: 1px solid white;
        }

        .attendee-dot.green { background: #34C759; }
        .attendee-dot.yellow { background: #FFCC00; }
        .attendee-dot.red { background: #FF3B30; }
        .attendee-dot.blue { background: #007AFF; }
        .attendee-dot.purple { background: #AF52DE; }
        .attendee-dot.orange { background: #FF9500; }

        .event-duration {
            font-family: var(--font-family);
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
            white-space: nowrap;
            min-width: 32px;
            text-align: right;
        }

        /* Short duration meetings - title row with icons */
        .event-card.duration-15:not(.is-task),
        .event-card.duration-30:not(.is-task) {
            padding: 6px 10px;
            display: flex;
            flex-direction: column;
            gap: var(--space-half);
        }

        .event-title-row {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            width: 100%;
        }

        .event-title-row .event-title {
            flex: 1;
            min-width: 0;
            font-size: var(--font-size-sm);
        }

        .event-title-row .event-icons {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            flex-shrink: 0;
        }

        .event-title-row .event-duration {
            position: static;
            flex-shrink: 0;
            font-size: var(--font-size-xs);
        }

        .event-card.duration-15:not(.is-task) > .event-time-inline,
        .event-card.duration-30:not(.is-task) > .event-time-inline {
            font-size: var(--font-size-xs);
        }

        /* Ultra-short (15min): strip to title-only, preserving proportional timeline height.
           Slot is ~17.5px at PIXELS_PER_HOUR_DAY=70. Budget:
             2px (top+bottom border) + 2px (top+bottom padding) + ~12.1px (11px × 1.1 line)
             = 16.1px, leaving ~1.4px headroom inside the 17.5px wrapper.
           Earlier values (4px padding, 1.2 line-height) overflowed by ~1.7px, clipping
           character descenders via .calendar-event's overflow:hidden. */
        .event-card.duration-15:not(.is-task) {
            min-height: 0;
            padding: 1px 8px;
        }

        .event-card.duration-15:not(.is-task) .event-title {
            font-size: var(--font-size-xs);
            line-height: 1.1;
            white-space: nowrap;
        }

        .event-card.duration-15:not(.is-task) .event-icons,
        .event-card.duration-15:not(.is-task) .event-duration {
            display: none;
        }

        .event-card.duration-15:not(.is-task):hover {
            box-shadow: var(--shadow-2);
            border-color: #B0BAC9;
        }