/* ============================================================================ */

        /* Inbox task wrapper - full width within column layout */
        .inbox-task-wrapper {
            width: 100%;
        }

        /* Archive content wrapper - constrained width, always centered */
        .archive-content-wrapper {
            width: 100%;
            max-width: 1100px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Center content wrappers on large screens */
        @media (min-width: 1440px) {
            /* Settings tabs and content - center the 900px container */
            .settings-tabs,
            .settings-content {
                margin-left: auto;
                margin-right: auto;
            }

            /* Inbox task wrapper - left-aligned with max-width */
            .inbox-task-wrapper {
            }

            /* Archive content wrapper - center 1100px content */
            .archive-content-wrapper {
                margin-left: auto;
                margin-right: auto;
            }

            /* Today view - center the main task area */
            .today-view-content .main-content-area {
                margin-left: auto;
                margin-right: auto;
            }
        }

        .page-title {
            font-family: var(--font-family);
            font-size: var(--font-size-2xl);
            font-weight: 700;
            letter-spacing: -0.3px;
            margin-bottom: 24px;
        }

        /* Calendar Disconnected Banner */
        .calendar-disconnected-banner {
            background: rgba(245, 158, 11, 0.12);
            border: 1px solid var(--color-amber);
            border-radius: var(--radius-md);
            padding: var(--space-3) var(--space-4);
            margin-bottom: var(--space-4);
        }

        .calendar-disconnected-banner .banner-content {
            display: flex;
            align-items: center;
            gap: var(--space-3);
        }

        .calendar-disconnected-banner svg {
            width: 20px;
            height: 20px;
            color: var(--color-amber-text);
            flex-shrink: 0;
        }

        .calendar-disconnected-banner span {
            flex: 1;
            font-size: var(--font-size-sm);
            color: var(--color-amber-text);
            font-weight: 500;
        }

        .reconnect-calendar-btn {
            background: var(--color-amber-fill);
            color: var(--color-on-amber);
            border: none;
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-md);
            font-size: var(--font-size-xs);
            font-weight: 600;
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .reconnect-calendar-btn:hover {
            background: var(--color-amber-fill-hover);
        }

        /* Planner Page Header — two-zone layout */
        .planner-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 32px 12px 32px;
            background: var(--bg-primary);
            flex-shrink: 0;
            position: relative;
        }

        .planner-header-left {
            display: flex;
            align-items: center;
            gap: var(--space-6);
        }

        /* Align Tasks/Daily Note toggle with right edge of backlog panel */
        .planner-header-left .today-view-toggle {
            position: absolute;
            left: 220px;
        }

        .planner-page-header .page-title {
            font-size: var(--font-size-2xl);
            font-weight: 700;
            letter-spacing: -0.5px;
            color: var(--text-primary);
            margin: 0;
        }

        .planner-header-right {
            display: flex;
            align-items: center;
            gap: var(--space-3);
        }

        .planner-header-right .week-number {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }

        /* Week-view-controls: hidden in Today scope, animated reveal in Week scope */
        .week-view-controls {
            display: flex;
            align-items: center;
            overflow: hidden;
            max-width: 0;
            opacity: 0;
            transition: max-width var(--duration-normal) var(--ease-in-out),
                        opacity var(--duration-normal) var(--ease-in-out);
        }

        .today-view.week-scope .week-view-controls {
            max-width: 120px;
            opacity: 1;
        }

        /* Hide Tasks/Daily Note toggle in week view */
        .today-view.week-scope .today-view-toggle {
            display: none !important;
        }

        /* Date header — no longer used */
        .date-header {
            display: none !important;
        }

        /* Week view: hide Today view elements and show week-planner full width */
        .today-view.week-scope .main-content-area,
        .today-view.week-scope .today-calendar {
            display: none !important;
        }

        .today-view.week-scope .week-planner {
            display: flex !important;
            flex: 1;
            flex-direction: column;
        }

        .week-number {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            font-weight: 500;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            line-height: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            opacity: 0.6;
        }

        .planner-scope-toggle {
            display: flex;
            gap: 0;
            background: #E8ECF0;
            border-radius: var(--radius-md);
            padding: 3px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            overflow: hidden;
            box-sizing: border-box;
        }

        .scope-toggle-btn {
            padding: var(--space-1-5) var(--space-4);
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 500;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-spring);
            line-height: 1;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .scope-toggle-btn:hover:not(.active) {
            color: var(--text-secondary);
            background: rgba(0, 0, 0, 0.03);
        }

        .scope-toggle-btn:active {
            transform: scale(0.97);
        }

        .scope-toggle-btn.active {
            background: #FFFFFF;
            color: var(--text-primary);
            font-weight: 600;
            box-shadow: var(--shadow-1);
        }

        .scope-toggle-btn:focus-visible {
            outline: var(--focus-outline);
            outline-offset: var(--focus-outline-offset);
            border-radius: var(--radius-sm);
        }

        .date-nav {
            display: flex;
            align-items: center;
            gap: 0;
            height: 24px;
        }

        .date-nav-btn {
            width: 24px;
            height: 24px;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            transition: all var(--transition-fast);
            padding: 0;
        }

        .date-nav-btn:hover {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
        }

        .date-nav-btn svg {
            width: 18px;
            height: 18px;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .date-nav-btn:focus-visible {
            outline: var(--focus-outline);
            outline-offset: var(--focus-outline-offset);
            border-radius: var(--radius-sm);
        }

        .current-date {
            font-family: var(--font-family);
            font-size: var(--font-size-md);
            font-weight: 600;
            color: var(--text-primary);
            letter-spacing: 0.3px;
            min-width: 100px;
            text-align: center;
            line-height: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .planner-title-section {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            width: 100%;
            margin-top: 4px;
        }

        .today-label {
            font-family: var(--font-family);
            font-size: var(--font-size-2xl);
            font-weight: 700;
            letter-spacing: -0.3px;
            color: var(--text-primary);
        }

        .today-label.is-today {
            color: var(--text-primary);
        }

        .planner-count-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            height: 32px;
            padding: 0 10px;
            background: var(--accent-fill);
            color: white;
            border-radius: var(--radius-xl);
            font-size: var(--font-size-16);
            font-weight: 600;
        }

        /* Today View Layout */
        .today-view {
            display: flex;
            flex-direction: column;
            height: calc(100vh - 120px);
            gap: 0;
            overflow: hidden;
            position: relative;
        }

        .today-view-content {
            display: flex;
            flex: 1;
            gap: 0;
            overflow: hidden;
            box-sizing: border-box;
            position: relative;
        }

        /* Main Content Area - wraps tasks/notes and their toggle */
        .main-content-area {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
            box-sizing: border-box;
            max-width: 1100px;
            width: 100%;
        }

        /* Backlog Drawer */
        .backlog-drawer {
            width: 380px;
            flex: 0 0 380px;
            box-sizing: border-box;
            background: var(--bg-primary);
            border-right: 1px solid var(--border-light);
            display: flex;
            flex-direction: column;
            /* Premium but QUICK open/close: a snappy eased expand (drawer pushes
               the plan), paired with a fast content reveal (.anim-open). The box
               is sized by flex-basis (flex: 0 0 380px), so the transition MUST
               target flex-basis — transitioning `width` alone does nothing
               (flex-basis wins) and the drawer just jumps. */
            transition: flex-basis var(--duration-normal) var(--ease-in-out),
                        width var(--duration-normal) var(--ease-in-out);
        }
        /* Clip only while the open animation runs so the 380px content never
           spills past the still-narrow drawer mid-expand (reverts to visible
           after, so drag ghosts aren't clipped). */
        .backlog-drawer.anim-open { overflow: hidden; }
        @keyframes backlogDrawerReveal {
            from { opacity: 0; transform: translateX(-14px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        .backlog-drawer.anim-open .backlog-drawer-content {
            animation: backlogDrawerReveal var(--duration-normal) var(--ease-in-out) 30ms both;
        }

        .backlog-drawer.collapsed {
            width: 44px;
            flex-basis: 44px;
        }

        .backlog-drawer.collapsed .backlog-drawer-content,
        .backlog-drawer.collapsed .backlog-drawer-title {
            display: none;
        }