@layer components {
    .photo-start {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .photo-start__title {
        margin: 0;
        font-family: var(--font-heading);
        font-size: var(--text-h4);
        font-weight: var(--font-heading-weight);
    }

    .photo-start__optional {
        color: var(--color-text-muted);
        font-size: var(--text-s);
        font-weight: normal;
    }

    .photo-start__body {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .photo-start__lede,
    .photo-start__hint {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--text-s);
    }

    /* Two big targets side by side on a phone, wrapping when the words do not fit. */
    .photo-start__actions,
    .photo-start__card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        align-items: center;
    }

    .photo-start__pick,
    .photo-start__skip {
        min-block-size: 44px;
    }

    .photo-start__pick {
        cursor: pointer;
    }

    /* The input is the focusable control; its label is what the eye (and the finger) sees. */
    .photo-start__input:focus-visible + .photo-start__pick {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    /* Working on the photos: the button cannot start a second pick. */
    .photo-start[aria-busy='true'] .photo-start__pick {
        opacity: 0.6;
        pointer-events: none;
    }

    .photo-start__problems {
        margin: 0;
        padding-inline-start: var(--space-4);
        color: var(--danger);
        font-size: var(--text-s);
    }

    /* `hidden` wins over this (app.css base layer) — the section shows only with a card to date. */
    .photo-start__waiting {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .photo-start__waiting-title {
        margin: 0;
        font-size: var(--text-base);
    }

    .photo-start__cards {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .photo-start__card {
        display: grid;
        grid-template-columns: 72px 1fr;
        gap: var(--space-2) var(--space-3);
        align-items: start;
    }

    .photo-start__thumb {
        inline-size: 72px;
        block-size: 72px;
        object-fit: cover;
        border: 3px solid var(--color-bg);
        box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
    }

    .photo-start__when {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
        margin: 0;
        padding: 0;
        border: 0;
    }

    .photo-start__note {
        grid-column: 1 / -1;
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--text-xs);
    }

    .photo-start__card-actions {
        grid-column: 1 / -1;
    }

    /* Icon only, so the whole 44 px square is the target (QA: it rendered as a bare 14 px glyph):
       never shrunk by its row, a visible outline and an icon a finger can find. */
    .photo-start__drop {
        flex: none;
        min-inline-size: 44px;
        min-block-size: 44px;
        border-color: var(--color-divider);
        font-size: 1.25rem;
    }

    .photo-start__reopen {
        display: none;
        margin: 0;
    }

    /* "Kresliť bez fotiek": only the way back stays. */
    .photo-start[data-state='skipped'] {
        & .photo-start__body {
            display: none;
        }

        & .photo-start__reopen {
            display: block;
        }
    }
}