:root {
    /* Structure */
    --node-size: 40px;
    --gap-sm: 5px;
    --gap-md: 10px;
    --border-width: 2px;

    /* State tokens (override in theme.css) */
    --state-incomplete-bg: transparent;
    --state-complete-bg: #0a0;   /* override */
    --state-skipped-bg: #0a0;    /* override */
    --state-skipped-triangle: yellow; /* override */

    /* Neutral border */
    --node-border: #aaa; /* override */
}

/* Container holding all groups */
.chart {
    display: flex;
    flex-flow: row wrap;
    column-gap: var(--gap-md);
    row-gap: 50px;
    align-items: center;
    justify-content: center;
}

/* Group of nodes laid out left→right, 2 rows tall */
.node-group {
    display: grid;
    grid-template-rows: var(--node-size) var(--node-size);
    grid-auto-columns: var(--node-size);
    grid-auto-flow: column dense;
    grid-gap: var(--gap-sm);
    margin: 2px;

    /* interaction hygiene */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Single-item special case: center the lone node */
.node-group:has(> .node:only-child) {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Node box and image sizing */
.node-group > .node {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--node-size);
    height: var(--node-size);
    border: var(--border-width) solid var(--node-border);
}

.node-group > .node > img {
    width: var(--node-size);
    height: var(--node-size);
    object-fit: scale-down;
}

/* Skill sub-box */
.node-group > .node > .skill {
    width: var(--node-size);
    height: var(--node-size);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.node-group > .node > .skill > img {
    width: 20px;
    height: 20px;
    object-fit: scale-down;
}
.node-group > .node > .skill > span {
    font-size: .8rem;
}

/* States: only semantics; colors via variables */
.state-0 { background-color: var(--state-incomplete-bg); }
.state-1 { background-color: var(--state-complete-bg); }
.state-2 {
    background-color: var(--state-skipped-bg);
    position: relative; /* for triangle */
}
.state-2::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent var(--state-skipped-triangle) transparent transparent;
}

/* Arrow cell (→ between groups) */
.chart > .arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--node-size);
    height: var(--node-size);
    font-size: 30px;
}

/* Mobile: stack groups vertically; show down arrow between them */
@media (max-width: 600px) {
    .chart { display: grid; row-gap: 40px; }
    .node-group {
        display: grid;
        position: relative;
        grid-template-rows: var(--node-size);
        justify-content: center; align-items: center;
        width: 100vw;
    }
    .chart > .arrow { display: none; }
    .node-group:not(:last-child)::after {
        display: block;
        position: absolute; top: calc(var(--node-size) + 5px);
        width: 100vw; text-align: center; font-size: 25px;
        content: "↓";
    }
}