/* Overdue work pinned above today's list in the Planner (js/modules/overdue-rail.js) */
/* Rows inset like #todayTaskList's (8px 16px) */
.overdue-rail-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    padding: var(--space-1, 4px) 16px 0;
}

.overdue-rail {
    /* #C62828 on the Planner's grey clears AA at 12px (5.3:1); the error red #EF4444 doesn't */
    --overdue-rail-red: #C62828;
    margin: 0 0 var(--space-2, 8px);
}

[data-theme="dark"] .overdue-rail { --overdue-rail-red: #F87171; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .overdue-rail { --overdue-rail-red: #F87171; }
}

.overdue-rail-header {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) 20px var(--space-1, 4px);
}

.overdue-rail-toggle,
.overdue-rail-move {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-height: 32px;
    padding: 0;
    background: none;
    border: none;
    font-family: 'Avenir Next', -apple-system, sans-serif;
    font-size: var(--font-size-12);
    font-weight: 600;
    cursor: pointer;
}

.overdue-rail-toggle {
    flex: 1;
    color: var(--overdue-rail-red);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.overdue-rail-toggle svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    transition: transform var(--duration-fast) var(--ease-in-out);
}

.overdue-rail.is-collapsed .overdue-rail-toggle svg {
    transform: rotate(-90deg);
}

.overdue-rail-count {
    color: var(--text-tertiary, #868E96);
    font-weight: 500;
}

.overdue-rail-move {
    color: var(--primary-hover, #2d6aa3);
}

.overdue-rail-move:hover {
    text-decoration: underline;
}

.overdue-rail-toggle:focus-visible,
.overdue-rail-move:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
    border-radius: var(--radius-sm);
}

.overdue-rail-today {
    padding: var(--space-4, 16px) 20px 0;
    color: var(--text-tertiary, #868E96);
    font: 600 var(--font-size-12) 'Avenir Next', -apple-system, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    .overdue-rail-toggle svg { transition: none; }
}