/* The Planner timelines' folds and zoom (js/modules/timeline-window.js) */

/* A folded span of hours: "Before 9am · Gym 7:00am" */
.timeline-fold {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
    width: calc(100% - 16px);
    min-height: 32px;
    margin: var(--space-1, 4px) 8px;
    padding: var(--space-1, 4px) var(--space-3, 12px);
    border: 1px dashed var(--border-medium, rgba(0, 0, 0, 0.14));
    border-radius: var(--radius-md);
    background: var(--bg-secondary, #F6F6F7);
    color: var(--text-secondary, #495057);
    font: 500 var(--font-size-12) 'Avenir Next', -apple-system, sans-serif;
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-in-out);
}

.timeline-fold:hover {
    background: var(--hover-light, rgba(0, 0, 0, 0.04));
}

.timeline-fold:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

.timeline-fold-lead {
    flex-shrink: 0;
    color: var(--text-primary, #1A1A2E);
    font-weight: 600;
}

.timeline-fold.is-open .timeline-fold-lead {
    color: var(--text-secondary, #495057);
    font-weight: 500;
}

.timeline-fold-what {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The week's narrow columns: the hour and a count */
.timeline-fold.is-compact {
    width: calc(100% - 8px);
    margin: 2px 4px;
    padding: 2px var(--space-2, 8px);
    min-height: 24px;
    font-size: var(--font-size-xs);
    justify-content: space-between;
}

.timeline-fold.is-compact .timeline-fold-what {
    min-width: 18px;
    padding: 0 6px;
    border-radius: var(--radius-md);
    background: var(--hover-light, rgba(0, 0, 0, 0.06));
    color: var(--text-primary, #1A1A2E);
    font-weight: 600;
    text-align: center;
}

/* − / + zoom */
.timeline-zoom {
    display: inline-flex;
    align-items: center;
    margin-right: var(--space-3, 12px);
    border: 1px solid var(--border-medium, rgba(0, 0, 0, 0.12));
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.timeline-zoom button {
    width: 28px;
    height: 26px;
    border: none;
    background: var(--bg-primary, #FFFFFF);
    color: var(--text-secondary, #495057);
    font: 600 var(--font-size-14) 'Avenir Next', -apple-system, sans-serif;
    cursor: pointer;
}

.timeline-zoom button + button {
    border-left: 1px solid var(--border-medium, rgba(0, 0, 0, 0.12));
}

.timeline-zoom button:hover:not(:disabled) {
    background: var(--hover-light, rgba(0, 0, 0, 0.04));
}

.timeline-zoom button:disabled {
    opacity: 0.4;
    cursor: default;
}

.timeline-zoom button:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset-inset);
}

/* Short task cards (15 min, or 30 at the compact zoom): one row that fits the slot. The base
   .event-card min-height (32px) is taller than the slot, and .calendar-event hides the overflow,
   so the checkbox and title were cut off. */
.event-card.is-task.duration-15 {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
}

.event-card.is-task.duration-15 .timeline-checkbox-wrapper {
    padding-top: 0;
}

.event-card.is-task.duration-15 .timeline-checkbox {
    width: 16px;
    height: 16px;
}

/* Week: a short task gets the same one-row layout as a short event */
.week-timeline-task.compact {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    padding: 2px var(--space-2, 8px);
}

.week-timeline-task.compact .week-timeline-title {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.week-timeline-task.compact .week-timeline-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.week-timeline-task.compact .week-timeline-time-label {
    flex: 0 0 auto;
    margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
    .timeline-fold { transition: none; }
}