/*
 * View styling for the AstraNET architecture stack block. Concrete loads
 * this file automatically whenever the block renders. Only theme CSS
 * variables with fallbacks are used — no fixed colors, fonts, or sizes
 * beyond the connector geometry — so the block inherits the site theme.
 *
 * The stack is a vertical column of centered layers; every layer after the
 * first is connected to its predecessor by a centered 1rem vertical line.
 */
.astranet-arch-stack {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.astranet-arch-stack__layer {
    border: 1px solid var(--border, #4e4e57);
    background: var(--surface, rgba(255, 255, 255, 0.04));
    border-radius: 10px;
    padding: 0.85rem 1rem;
    text-align: center;
}

.astranet-arch-stack__name {
    font-weight: 600;
}

.astranet-arch-stack__layer + .astranet-arch-stack__layer {
    position: relative;
}

.astranet-arch-stack__layer + .astranet-arch-stack__layer::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 2px;
    height: 1rem;
    /* Center the connector on the 0.75rem flex gap so it reaches both
     * adjacent layer borders. */
    transform: translate(-50%, -0.125rem);
    background: var(--border, #4e4e57);
}