/* Deadline picker in sidebar */
        .project-deadline-picker {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .project-deadline-picker:hover {
            border-color: var(--accent-blue);
            background: var(--accent-blue-light);
        }

        .project-deadline-picker svg {
            width: 14px;
            height: 14px;
            color: var(--text-tertiary);
        }

        .project-deadline-picker span {
            font-size: var(--font-size-sm);
            color: var(--text-primary);
        }

        .project-deadline-picker.empty span {
            color: var(--text-tertiary);
        }

        .project-deadline-picker input[type="date"] {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
            left: 0;
            top: 0;
        }

        [data-theme="dark"] #projectDeadlineInput,
        [data-theme="dark"] .project-deadline-picker input[type="date"] {
            color-scheme: dark;
        }

        /* Same defect as the archive checkbox: unguarded, a dark OS gave a user
           who had chosen light a dark native date-picker popup inside a light
           app. Guard only — a root-level `color-scheme` would repaint every
           native control app-wide. */
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) #projectDeadlineInput,
            :root:not([data-theme="light"]) .project-deadline-picker input[type="date"] {
                color-scheme: dark;
            }
        }

        .project-deadline-picker-wrapper {
            position: relative;
        }

        .project-deadline-clear {
            width: 18px;
            height: 18px;
            border: none;
            background: transparent;
            border-radius: var(--radius-circle);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            margin-left: auto;
            opacity: 0;
            transition: all var(--transition-fast);
        }

        .project-deadline-picker:hover .project-deadline-clear {
            opacity: 1;
        }

        .project-deadline-clear:hover {
            background: rgba(0,0,0,0.1);
            color: var(--text-primary);
        }

        .project-deadline-clear svg {
            width: 12px;
            height: 12px;
        }

        /* Project Sections (task groups) - Things 3 style */
        .project-task-section {
            margin-bottom: 16px;
        }

        .project-task-section-header {
            display: flex;
            align-items: flex-start;
            gap: var(--space-1-5);
            padding: 8px 0;
            cursor: default;
            user-select: none;
        }

        .project-task-section-header:hover {
            opacity: 0.9;
        }

        .project-task-section-header:hover .section-add-btn {
            opacity: 1;
        }

        .section-name {
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 600;
            color: var(--accent-blue);
            cursor: inherit;
            padding: var(--space-half) var(--space-1);
            margin: -2px -4px;
            border-radius: var(--radius-sm);
            transition: background var(--transition-fast);
        }

        .section-name.editing {
            outline: none;
            background: var(--accent-blue-opacity-10);
            cursor: text;
        }

        .section-count {
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 400;
            color: var(--text-tertiary);
            margin-left: 4px;
        }

        .section-add-btn {
            width: 20px;
            height: 20px;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            opacity: 0;
            transition: all var(--transition-normal);
            flex-shrink: 0;
        }

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

        .section-add-btn svg {
            width: 14px;
            height: 14px;
        }

        .section-tasks {
            padding: 0 16px;
            margin: 0 -16px;
            overflow: visible;
            transition: max-height var(--duration-slow) var(--ease-in-out),
                        opacity var(--duration-normal) var(--ease-in-out),
                        padding var(--duration-slow) var(--ease-in-out);
            max-height: 2000px;
            opacity: 1;
        }

        .project-task-section.collapsed .section-tasks {
            overflow: hidden;
        }

        .project-task-section.collapsed .section-tasks {
            max-height: 0;
            opacity: 0;
            padding-top: 0;
            padding-bottom: 0;
        }

        /* Section inline task input */
        .section-inline-input {
            display: flex;
            align-items: center;
            gap: var(--space-2-5);
            padding: 8px 0;
            overflow: hidden;
            max-height: 0;
            opacity: 0;
            transition: max-height var(--duration-normal) var(--ease-in-out),
                        opacity var(--duration-normal) var(--ease-in-out),
                        padding var(--duration-normal) var(--ease-in-out);
        }

        .section-inline-input.visible {
            max-height: 50px;
            opacity: 1;
            padding: 8px 0;
        }

        .section-inline-input .checkbox {
            opacity: 0.4;
        }

        /* Fix checkbox alignment in inline input rows */
        .section-inline-input .checkbox-wrapper,
        .inline-task-input-row .checkbox-wrapper,
        .unsectioned-drop-zone > .section-inline-input .checkbox-wrapper {
            align-self: center;
            margin-top: 0;
        }

        .section-inline-input input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            color: var(--text-primary);
        }

        .section-inline-input input::placeholder {
            color: var(--text-tertiary);
        }

        /* Task row animations - Things style */
        .task-row, .flat-task-row, .flat-project-row, .flat-area-row {
            overflow: hidden;
        }

        /* Staggered list entrance animation */
        .task-row.stagger-enter, .flat-task-row.stagger-enter, .flat-project-row.stagger-enter, .flat-area-row.stagger-enter {
            opacity: 0;
            transform: translateY(8px);
        }

        .task-row.stagger-animate, .flat-task-row.stagger-animate, .flat-project-row.stagger-animate, .flat-area-row.stagger-animate {
            transition: opacity var(--duration-slow) var(--ease-in-out),
                        transform var(--duration-slow) var(--ease-in-out);
            opacity: 1;
            transform: translateY(0);
        }

        /* Activity item slide-in (matches task-entering/task-animate for inbox) */
        .activity-item.activity-entering {
            max-height: 0;
            opacity: 0;
            padding-top: 0;
            padding-bottom: 0;
            margin: 0;
            transform: translateY(-4px);
            overflow: hidden;
        }

        .activity-item.activity-animate {
            transition: max-height var(--duration-slow) var(--ease-in-out),
                        opacity var(--duration-normal) var(--ease-in-out) 0.05s,
                        padding var(--duration-slow) var(--ease-in-out),
                        margin var(--duration-slow) var(--ease-in-out),
                        transform var(--duration-slow) var(--ease-in-out);
            max-height: 120px;
            opacity: 1;
            padding-top: 10px;
            padding-bottom: 10px;
            transform: translateY(0);
            overflow: visible;
        }

        /* Single task entrance animation (for new tasks) */
        .task-row.task-entering, .flat-task-row.task-entering {
            max-height: 0;
            opacity: 0;
            padding-top: 0;
            padding-bottom: 0;
            margin: 0;
            border-color: transparent;
            transform: translateY(-4px);
            overflow: hidden;
        }

        .task-row.task-animate, .flat-task-row.task-animate {
            transition: max-height var(--duration-slow) var(--ease-in-out),
                        opacity var(--duration-normal) var(--ease-in-out) 0.05s,
                        padding var(--duration-slow) var(--ease-in-out),
                        margin var(--duration-slow) var(--ease-in-out),
                        transform var(--duration-slow) var(--ease-in-out),
                        border-color var(--duration-slow) var(--ease-in-out);
            max-height: 80px;
            opacity: 1;
            padding-top: 16px;
            padding-bottom: 16px;
            transform: translateY(0);
            overflow: visible;
        }

        .task-row.completing, .flat-task-row.completing, .backlog-task-item.completing {
            opacity: 0.6;
        }

        .task-row.completing .task-title, .flat-task-row.completing .task-title,
        .backlog-task-item.completing .backlog-task-title {
            text-decoration: line-through;
            color: var(--text-tertiary);
        }

        .task-row.completed, .flat-task-row.completed, .backlog-task-item.completed {
            animation: taskComplete var(--duration-slow) var(--ease-in-out) forwards;
        }

        @keyframes taskComplete {
            0% {
                opacity: 0.6;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(0.98);
            }
        }

        /* Smooth collapse animation for completed tasks */
        .task-row.collapsing, .flat-task-row.collapsing {
            transition: height var(--duration-slow) var(--ease-in-out),
                        padding var(--duration-slow) var(--ease-in-out),
                        margin var(--duration-slow) var(--ease-in-out),
                        border-width var(--duration-slow) var(--ease-in-out),
                        opacity var(--duration-fast) var(--ease-in-out),
                        box-shadow var(--duration-normal) var(--ease-in-out),
                        border-radius var(--duration-normal) var(--ease-in-out);
            overflow: hidden;
            pointer-events: none;
            opacity: 0;
        }

        .task-row.collapsed, .flat-task-row.collapsed {
            height: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin: 0 !important;
            border-width: 0 !important;
        }

        /* Drag and drop styles for sections */
        .project-task-section[draggable="true"] {
            cursor: default;
        }

        .project-task-section.dragging {
            opacity: 0.5;
            background: var(--accent-blue-light);
        }

        .project-task-section.drag-over {
            border-top: 2px solid var(--accent-blue);
            margin-top: -2px;
        }

        /* Section heading - draggable */
        .project-task-section-header {
            cursor: grab;
            transition: background var(--transition-normal);
            position: relative;
            padding: 8px 0;
            margin: 0;
        }

        .project-task-section-header:hover {
            background: var(--hover-light);
            border-radius: var(--radius-md);
        }

        /* Section drag-ready highlight */
        .project-task-section-header.drag-ready {
            background: rgba(59, 130, 246, 0.12) !important;
            border-radius: var(--radius-md);
        }

        /* Section dragging state */
        .project-task-section-header.dragging {
            opacity: 0.3;
            cursor: grabbing;
        }

        /* Section drop indicator line - above */
        .project-task-section-header.drop-above::before {
            content: '';
            position: absolute;
            top: -2px;
            left: 0;
            right: 0;
            height: 3px;
            background: #4A90D9;
            border-radius: var(--radius-sm);
            z-index: 10;
        }

        /* Section drop indicator line - below */
        .project-task-section-header.drop-below::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 3px;
            background: #4A90D9;
            border-radius: var(--radius-sm);
            z-index: 10;
        }

        /* Entire section container */
        .project-task-section {
            border-radius: var(--radius-md);
        }

        /* Section tasks drop zone - minimal styling, indicators handle visual feedback */
        .section-tasks {
            min-height: 8px;
            border-radius: var(--radius-md);
            transition: background var(--transition-fast), min-height var(--duration-fast) var(--ease-in-out);
        }

        /* Empty section shows a drop zone when dragging */
        body.is-dragging .section-tasks:empty {
            min-height: 40px;
            background: var(--accent-blue-opacity-5);
            border: 2px dashed var(--accent-blue-border);
        }

        body.is-dragging .section-tasks:empty:hover {
            background: var(--accent-blue-opacity-12);
            border-color: var(--accent-blue);
        }