/* A numbered, rail-connected list of one-line actions.
   See `Lang.Components.GuideSteps`. */

.guide-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
    counter-reset: guide-step;
}

.guide-step {
    /* Centres the number on the card's single line of text: one border, one
       card padding, and half a line down from the top of the row. Everything
       below is positioned off this, so the rail never has to know how tall a
       card is. */
    --guide-step-marker-top: 15px;

    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: var(--space-5);
    counter-increment: guide-step;
}

/* The rail joining each marker to the next one: from just under this step's
   number to just above the next one's. */
.guide-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(var(--guide-step-marker-top) + 28px + var(--space-2));
    bottom: calc(var(--space-2) - var(--space-3) - var(--guide-step-marker-top));
    left: 13.5px;
    width: 1px;
    background: var(--color-border-light);
}

.guide-step-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin-top: var(--guide-step-marker-top);
    border-radius: var(--radius-pill);
    background: var(--color-hover);
    color: var(--color-primary);
    font-size: var(--fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.guide-step-marker::after {
    content: counter(guide-step);
}

.guide-step-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    box-sizing: border-box;
    min-width: 0;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.guide-step-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px var(--color-shadow);
    transform: translateY(-1px);
    color: var(--color-primary);
}

.guide-step-label {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.45;
}

.guide-step-card svg {
    flex: none;
    transition: transform var(--transition-fast);
}

.guide-step-card:hover svg {
    transform: translateX(3px);
}

/* `.post-content` indents lists by 2rem and spaces their items apart, both of
   which outrank the plain class selectors above. The steps are cards rather
   than prose, so they line up with the paragraphs and space themselves with
   the container's `gap`. */
.post-content .guide-steps {
    margin: var(--space-8) 0 0;
    padding: 0;
}

.post-content .guide-step {
    margin: 0;
}

@media (max-width: 640px) {
    .guide-step {
        --guide-step-marker-top: 13px;
        grid-template-columns: 24px minmax(0, 1fr);
        column-gap: var(--space-4);
    }

    .guide-step:not(:last-child)::before {
        top: calc(var(--guide-step-marker-top) + 24px + var(--space-2));
        left: 11.5px;
    }

    .guide-step-marker {
        width: 24px;
        height: 24px;
    }

    .guide-step-card {
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .guide-step-label {
        font-size: var(--fs-base);
    }
}