/* Stack visualizer */
@media (min-width: 600px) {
    .infob301-columns {
        display: flex;
        gap: 16px;
    }

    .infob301-columns > * {
        flex: 1;
    }
}

.infob301-line {
    display: inline-block;
    width: 100%;
    background-color: #ffff0080;
}

@media (prefers-color-scheme: dark) {
    .infob301-line {
        background-color: #ffff0040;
    }
}

/* Cryptography diagrams */
.infob301-crypto2,
.infob301-crypto3 {
    display: grid;
    place-items: center;
    background-color: #f6f7f6;
    padding: 16px 0;
}

@media (prefers-color-scheme: dark) {
    .infob301-crypto2,
    .infob301-crypto3 {
        background-color: #1d1f21;
    }
}

.infob301-crypto2 {
    grid-template-columns: repeat(2, 1fr);
}

.infob301-crypto3 {
    grid-template-columns: repeat(3, 1fr);
}

.infob301-span2 {
    grid-column: span 2;
}

.infob301-span3 {
    grid-column: span 3;
}

.infob301-larr,
.infob301-rarr {
    position: relative;
    border-bottom: 1px solid var(--fg);
    min-width: 128px;
    margin-bottom: 16px;
}

.infob301-larr::after,
.infob301-rarr::after {
    position: absolute;
    bottom: -11px;
}

.infob301-larr::after {
    left: -8px;
    content: "\25c4";
}

.infob301-rarr::after {
    right: -8px;
    content: "\25ba";
}

/* Cryptography protocol */
.infob301-cell {
    background-color: #ffff0080;
}

@media (prefers-color-scheme: dark) {
    .infob301-cell {
        background-color: #ffff0040;
    }
}