/* =============================================================
   ABST — Abstract Machine Index
   ============================================================= */

.abst-wrap {
    padding-top: 2.4rem;
}

.page-wrap.abst-wrap {
    max-width: none;
    width: 100%;
    padding: 0 var(--side-pad) var(--section-pad-b);
}

.abst-tree {
    width: 100%;
}

/* NODE — wrapper per page */
.abst-node {
    border: 0.1rem solid color-mix(in srgb, var(--abst-color, #333) 20%, #1c1c1c);
    margin-bottom: 4px;
    min-height: unset !important;
    padding: 0;
    background: color-mix(in srgb, var(--abst-color, #333) 4%, #0d0d0d);
}

/* ROW — badge (title) + description always inline; if text exceeds box, wraps as paragraph */
.abst-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 10px;
    border-left: none;
    border-top: none;
    border-right: none;
    min-height: unset !important;
    margin: 0;
    text-decoration: none;
    transition: background 0.15s ease;
    text-align: left;
}

/* DEPTH BACKGROUNDS — deeper = more saturated */
.abst-depth-0 > .abst-row {
    background: color-mix(in srgb, var(--abst-color, #333) 8%, #111111);
}
.abst-depth-1 > .abst-row {
    background: color-mix(in srgb, var(--abst-color, #333) 15%, #0f0f0f);
}
.abst-depth-2 > .abst-row {
    background: color-mix(in srgb, var(--abst-color, #333) 5%, #0d0d0d);
}
.abst-depth-3 > .abst-row,
.abst-depth-4 > .abst-row,
.abst-depth-5 > .abst-row {
    background: color-mix(in srgb, var(--abst-color, #333) 35%, #0a0a0a);
}

/* HOVER — linked rows only */
.abst-row--linked:hover {
    background: color-mix(in srgb, var(--abst-color, #333) 40%, #0a0a0a);
    cursor: pointer;
}

/* BADGE — no vertical padding so title and description first lines align */
.abst-row__badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    max-width: 100%;
    background: color-mix(in srgb, var(--abst-color, #333) 15%, #1c1c1c);
    padding: 0 5px;
    flex-shrink: 0;
    line-height: 1.2;
}

/* Title uses --abst-color but lightened so it stays readable on dark backgrounds */
.abst-row__title {
    font-family: 'Roboto', Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--abst-color, #333) 65%, #ffffff 35%);
    margin: 0;
    padding: 0;
    line-height: 1.2;
    display: inline;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Description — same line-height as title so first lines align; no top offset */
.abst-row__description {
    font-family: 'Roboto', Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--abst-color, #333) 65%, #ffffff 35%);
    margin: 0;
    padding: 0;
    line-height: 1.2;
    flex: 1 1 0%;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    transition: color 0.15s ease;
}

.abst-row--linked:hover .abst-row__description {
    color: color-mix(in srgb, var(--abst-color, #333) 40%, #cccccc 60%);
}

/* CHILDREN — nested inside parent */
.abst-children {
    border-top: 1px solid color-mix(in srgb, var(--abst-color, #333) 30%, #161616);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Row: max 4 columns, then wrap to next row; left-aligned */
.abst-children--row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
}

/* 1 child = 100%, 2 = 50%, 3 = 33.33%, 4 = 25%; 5+ wrap to next row */
.abst-children--row > .abst-node {
    flex: 1 1 calc((100% - 18px) / 4);
    min-width: 100px;
    margin-bottom: 0;
}

/* Stack: vertical rows only; left-aligned, no center */
.abst-children--stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.abst-children--stack > .abst-node {
    width: 100%;
}

/* NO ANIMATION — unlinked rows are dimmer */
.abst-row:not(.abst-row--linked) .abst-row__badge {
    opacity: 1;
}

.abst-row:not(.abst-row--linked) .abst-row__title {
    color: color-mix(in srgb, var(--abst-color, #333) 65%, #ffffff 35%);
}

/* Reference-like subtle hover even when bg is already set by depth */
.abst-row--linked:hover {
    filter: brightness(1.02);
}

/* MOBILE — full-width nodes so row has room; text always visible; left alignment */
@media (max-width: 768px) {
    .abst-children--row {
        flex-direction: column;
    }

    .abst-children--row > .abst-node {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
    }

    .abst-row {
        min-width: 0;
    }

    .abst-row__description {
        min-width: 0;
    }
}

/* Animation template: fullscreen content wrapper */
.abst-animation-content {
    position: relative;
    z-index: 1;
    padding: var(--side-pad);
    padding-top: calc(var(--header-h) + var(--content-top));
}

/* Animation template: ensure footer is visible above fullscreen canvas */
.layout-immersive .anim-content {
    min-height: 100vh;
}

.layout-immersive .site-footer {
    position: relative;
    z-index: 1;
}