@layer components {
    .spell {
        display: flex;
        column-gap: var(--space-sm);
        row-gap: var(--space-xs);
        flex-wrap: wrap; /* Allow wrapping on narrow screens */
        align-items: baseline; /* Align text baselines for a tighter look */
    }

    .spell__heading {
        flex: 1 1 100%; /* Take full width so text wraps naturally to new line */
        display: block; /* Use inline flow inside to avoid indentation on wrap */
        text-align: start;
        white-space: normal; /* Allow wrapping when needed */
        min-width: 0;
    }

    .spell__detail {
        flex: 1 1 100%; /* Take the full row below heading */
        min-width: 0; /* Enable text to wrap instead of forcing overflow */
    }

    /* Ensure tokens have spacing when heading is block */
    .spell__range {
        margin-right: var(--space-sm);
    }

    .spell__dur {
        margin-right: var(--space-sm);
    }

    .spell__range {
        display: inline-flex;
        align-items: baseline;
        gap: var(--space-xs);
        padding: 0 var(--space-xs);
        border: var(--border-thickness-base) solid var(--color-border);
        border-radius: var(--radius-full);
        background: color-mix(in srgb, var(--color-background-surface) 60%, transparent);
        white-space: nowrap;
    }

    .spell__start,
    .spell__end {
        font-size: var(--font-size-sm);
        color: var(--color-foreground-secondary);
        white-space: nowrap;
    }

    .spell__sep {
        color: var(--color-foreground-secondary);
    }

    .spell__dur {
        padding-inline: var(--space-xs);
        box-shadow: var(--shadow-sm);
        border-radius: var(--radius-full);
        font-size: var(--font-size-xs);
        color: var(--color-foreground-secondary);
        white-space: nowrap;
    }

    .spell__summary {
        margin: 0;
        display: inline;
        font-size: var(--font-size-base);
        color: var(--color-foreground);
    }

    .spell__task {
        margin: var(--space-xs) 0 0 0;
        font-size: var(--font-size-sm);
        color: var(--color-foreground-secondary);
    }
}

@media (max-width: 520px) {
    @layer components {
        .spell {
            flex-direction: column; /* Stack for very small screens */
            align-items: stretch;
        }

        .spell__heading {
            white-space: normal; /* Allow wrap when stacked */
            margin-top: 0;
            width: 100%;
        }
    }
}