@layer components {
    .prompt-hints {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .prompt-hints__title {
        margin: 0;
        font-size: var(--text-h4);
    }

    .prompt-hints__lede {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--text-s);
    }

    .prompt-hints__list {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Questions read as italic prose, the book's voice; left-aligned, full-width touch rows. */
    /* Two classes: the shared .btn (app.css, loaded later) centres its content. */
    .prompt-hints .prompt-hints__ask {
        justify-content: flex-start;
        inline-size: 100%;
        font-family: var(--font-body);
        font-size: var(--text-m);
        font-style: italic;
        font-weight: 400;
        text-align: start;
    }

    /* An answered question (its point is in the drawing): a check instead of the bulb and a quiet
       note — still a button, pressing it again finds the point. The icon is scoped to the item so
       it outranks `.btn svg { display: block }` of the same layer. */
    .prompt-hints__item .prompt-hints__icon--used,
    .prompt-hints__used {
        display: none;
    }

    .prompt-hints__item[data-used] {
        .prompt-hints__icon--open {
            display: none;
        }

        .prompt-hints__icon--used {
            display: inline-block;
            color: var(--color-text-muted);
        }

        .prompt-hints__used {
            display: inline;
            color: var(--color-text-muted);
            font-size: var(--text-s);
            font-style: normal;
        }
    }
}