/* Project roadmap scroll viewport.
   Kept separate from style.css so the fix stays isolated and easy to remove. */
.project-roadmap-board {
    position: relative;
    height: min(68vh, 680px);
    min-height: 440px;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    align-content: start;
    align-items: start;
    padding: 0 10px 12px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(36, 230, 255, .52) rgba(255, 255, 255, .045);
}

.project-roadmap-board .roadmap-column {
    align-self: start;
}

/* The columns live inside their own scroll container. Do not let the global
   reveal animation leave them invisible while the roadmap itself is scrolled. */
html.js .project-roadmap-board .roadmap-column.reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

.project-roadmap-board::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.project-roadmap-board::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(151, 213, 255, .08);
}

.project-roadmap-board::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(36, 230, 255, .68), rgba(0, 141, 255, .62));
    border: 2px solid #06101a;
}

.project-roadmap-board::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(92, 240, 255, .88), rgba(35, 158, 255, .82));
}

@media (max-width: 900px) {
    .project-roadmap-board {
        height: min(70vh, 640px);
        min-height: 400px;
    }
}

@media (max-width: 620px) {
    .project-roadmap-board {
        height: min(72vh, 600px);
        min-height: 360px;
        overflow-x: auto;
        overflow-y: auto;
        padding-right: 8px;
    }
}