@layer components {
    .pending-spell {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs); /* Use gap instead of grid-gap for modern flex context */
        padding: var(--pad-md); /* Standard padding for a card/tile-like component */
        background-color: var(--color-background-surface);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm); /* Subtle elevation */
        border: var(--border-thickness-base) solid var(--color-border);
    }

    .pending-spell__task {
        /* Task summary here (Smaller in size, secondary color) */
        font-size: var(--font-size-sm);
        color: var(--color-foreground-secondary);
        text-align: start;
    }

    .pending-spell__detail {
        /* Container for the spell summary and the button */
        display: flex;
        align-items: center;
        gap: var(--space-md); /* Use standard separation */
    }

    .pending-spell__summary {
        /* Spell summary here (Bigger and more highlighted) */
        flex: 1; /* Allows the summary to take up all available space */
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        color: var(--color-foreground); /* Use the main foreground color for strong text */
        margin-block-start: var(--margin-none); /* Reset default <p> margin */
        margin-block-end: var(--margin-none);
        line-height: var(--line-height-tight);
    }

    /* Optional: Highlight the summary even more by using primary color */
    .pending-spell__summary.is-highlighted {
        color: var(--color-primary);
    }

    .pending-spell__btn {
        /* Container for the button - pushed to the right */
        flex-shrink: 0;
        margin-inline-start: auto; /* Pushes the element to the far right */
        /* Note: The button inside will handle its own sizing/font from .button classes */
    }
}