/* The authority boundary: four stages of one decision, read left to right with
   the hand-off marked between them, then the mantra that names what just
   happened. Unstyled, the rubrics ran into the headings and the four stages
   stacked as eight loose paragraphs.
   Reconstructed against .dream-loop/r26-deck/slide-07.png. */
.command-boundary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: 2.1rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.boundary-stage {
    position: relative;
    padding: 0.95rem 1rem 1.05rem;
    border-top: 2px solid var(--day-rule);
    border-radius: var(--radius-sm);
    background: var(--surface-day);
    box-shadow: var(--membrane-day);
}

.boundary-stage > span {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--day-ink-soft);
}

.boundary-stage > h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--day-ink);
}

.boundary-stage > p {
    margin: 0.4rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--day-ink-soft);
}

/* The hand-off itself, sitting in the gap rather than inside either card. */
.boundary-stage + .boundary-stage::before {
    content: "→";
    position: absolute;
    left: -1.45rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--day-ink-faint);
    font-size: 0.9rem;
}

.boundary-mantra {
    max-width: 44ch;
    margin: 1.5rem auto 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--day-rule-soft);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    line-height: 1.45;
    text-align: center;
    color: var(--day-ink);
}

@media (max-width: 860px) {
    .command-boundary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The arrow only means anything on a single row. */
    .boundary-stage + .boundary-stage::before {
        content: none;
    }
}

@media (max-width: 560px) {
    .command-boundary {
        grid-template-columns: minmax(0, 1fr);
    }
}