/* The Planner's Day | 3 Days | Week and its Today button (js/modules/planner-scope.js) */

.planner-today-btn {
    flex-shrink: 0;
    height: 32px;
    padding: 0 var(--space-3, 12px);
    border: 1px solid var(--border-medium, rgba(0, 0, 0, 0.12));
    border-radius: var(--radius-md);
    background: var(--bg-primary, #FFFFFF);
    color: var(--text-primary, #1A1A2E);
    font: 500 var(--font-size-sm) 'Avenir Next', -apple-system, sans-serif;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-in-out);
}

.planner-today-btn:hover {
    background: var(--hover-light, rgba(0, 0, 0, 0.04));
}

.planner-today-btn:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

/* Day shows the full date, and its header also holds Tasks | Daily Note: the week number
   (for 3 Days and Week, where the range spans days) would crowd into it */
.today-scope .planner-page-header .week-number {
    display: none;
}

/* 3 Days is always three: 5d / 7d is the week's alone */
.three-scope .week-controls-bar .control-segment {
    display: none;
}

/* A narrow window: labels stay on one line, and Plan My Day keeps its icon (and tooltip) */
.planner-page-header .scope-toggle-btn,
.planner-page-header .current-date {
    white-space: nowrap;
}

/* Tasks | Daily Note lines up with the backlog's edge (220px) by the title's width, in the flow — pinned there
   absolutely, it took no room, and once the right-hand controls grew (the filter chip) they slid under it. In the
   flow the header wraps the controls to a second row when they don't fit, at any width, rather than overlapping. */
.planner-page-header { flex-wrap: wrap; row-gap: var(--space-2, 8px); }
.planner-page-header .page-title { min-width: calc(220px - 32px - var(--space-6)); } /* header padding, then the gap */
.planner-header-left .today-view-toggle { position: static; }
.planner-page-header .planner-header-right { margin-left: auto; }

/* Below 1360px (the desktop window opens at 1280) Plan My Day keeps its icon and tooltip, so the header stays on one row */
@media (max-width: 1360px) {
    .planner-page-header .plan-my-day-btn span { display: none; }
    .planner-page-header .plan-my-day-btn { padding-inline: var(--space-2, 8px); }
}

@media (max-width: 1100px) {
    .planner-page-header .scope-toggle-btn { padding-inline: var(--space-2, 8px); }
    .planner-page-header .week-number { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .planner-today-btn { transition: none; }
}