.date-navigation {
    display: grid;
    grid-template-columns: 64px minmax(180px, auto) 64px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 10px 0;
}

.date-navigation button {
    width: 64px;
    min-width: 64px;
    height: 56px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--surface);
    font-size: 0;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.date-navigation button::before {
    display: block;
    font-size: 24px;
    line-height: 1;
    font-family: Arial, sans-serif;
    color: var(--text);
}

.date-navigation #prevDay::before {
    content: "←";
}

.date-navigation #nextDay::before {
    content: "→";
}

.date-navigation button:disabled {
    background-color: var(--surface);
    opacity: 0.45;
}

.date-navigation #currentDate {
    min-width: 180px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .date-navigation {
        grid-template-columns: 58px minmax(150px, auto) 58px;
        gap: 10px;
    }

    .date-navigation button {
        width: 58px;
        min-width: 58px;
        height: 52px;
    }

    .date-navigation button::before {
        font-size: 22px;
    }

    .date-navigation #currentDate {
        min-width: 150px;
        min-height: 52px;
    }
}


/* Active-chain state: start pulses; current/end is outlined. */
.cell.current,.cubeCell.current,.boxCell.current{outline:4px solid var(--border);outline-offset:-4px}
.cell.activeChainPulse,.cubeCell.activeChainPulse,.boxCell.activeChainPulse{animation:active-cell-pulse 2.4s ease-in-out infinite;position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.cell.activeChainPulse,.cubeCell.activeChainPulse,.boxCell.activeChainPulse{animation:none}}