html {
    scroll-snap-type: y proximity;
}

header {
    margin-bottom: 10vh;
}

#contentWrapper {
    display: grid;
    column-gap: 1rem;
    grid-template-areas:
        "instructions instructions instructions"
        "chart1 gearbox chart2";
    grid-template-columns: .6fr 1fr .5fr;
    grid-template-rows: auto 90vh;
    align-items: top;
    justify-items: center;
    max-height: 95vh;
    padding-inline: 2rem;
    width: 100%;

    scroll-snap-align: center;
    scroll-snap-stop: always;
    user-select: none;

    --reticle_color: rgb(0, 200, 100);
}

#gearboxWrapper {
    grid-area: gearbox;
    display: flex;
    flex-direction: column;
    height: fit-content;
    width: 100%;
    max-height: 100%;
    place-items: center;
}

#gearboxInstructions {
    grid-column: 2 / 3;
    text-align: center;
    font-size: .8rem;
    transition: transform .3s ease-in-out;
}

#gearbox {
    border-radius: var(--border_rad);
    border: solid var(--border_weight) var(--border_color);
    object-fit: cover;
}

.svgWrapper {
    max-height: 90vh;
    width: 100%;
    display: grid;
    justify-items: center;
}

#chart1 {
    grid-area: chart1;
}

#chart2 {
    grid-area: chart2;
}


/* ---------- */
/* SVG STYLES */
/* ---------- */

.tile {
    pointer-events: none;
}

.tile:not(.activeTile) {
    display: none;
}

.tile.activeTile {
    display: block;
}

.selectable {
    fill: var(--dark_accent);
    fill-opacity: 0;
    stroke: var(--btc_blue);
    stroke-opacity: 0;
    stroke-width: 8px;
    transition: all .3s ease-in-out;
    cursor: grab;
}

.selectable:active {
    cursor: grabbing;
}



.selectable:hover {
    fill-opacity: .25;
    stroke-opacity: .8;
    transition: all .3s ease-in-out;
}

.badgeGroup {
    fill-opacity: 0;
    stroke-opacity: 0;
    transition: all .3s ease-in-out;
    pointer-events: none;

}

.selectable:focus-visible>.badgeGroup,
.selectable:hover>.badgeGroup {
    fill-opacity: 1;
    stroke-opacity: 1;
    transition: all .3s ease-in-out;
}


.selectable:focus {
    outline: none;
}

.selectable:focus-visible {
    outline: none;
    stroke: var(--btc_blue);
    stroke-opacity: 1;
    stroke-width: 8px;
}

.clear {
    opacity: 0;
}

.hidden {
    display: none;
}

.chart {
    object-fit: cover;
    max-height: 100%;
    overflow: visible;
}

.reticle {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1);
    opacity: 1;
    pointer-events: none;
    stroke: var(--reticle_color);
    stroke-opacity: .8;
    fill: none;
    stroke-width: 5px;
    vector-effect: non-scaling-stroke;
    transition: all .3s ease-in-out;
    visibility: hidden;
}

.reticle.invalid {
    opacity: 0;
    transform: scale(2);
}