/*
 * The point sheet: a bottom sheet over the page, as in the design. Hidden until a point is chosen —
 * by the controller (data-open + data-active) or, without JavaScript, by the :target panel.
 */
@layer components {
    .point-sheet {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 20;
        display: none;
        max-block-size: 80dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--color-bg);
        box-shadow: var(--shadow-lg);
        /* Vertical scrolling stays the browser's; horizontal swipes are the sheet's. */
        touch-action: pan-y;
    }

    .point-sheet[data-open],
    .point-sheet:has(.point-sheet__panel:target) {
        display: block;
    }

    .point-sheet__panel {
        display: none;
        flex-direction: column;
        gap: var(--space-3);
        max-inline-size: 36rem;
        margin-inline: auto;
        padding: var(--space-3) var(--space-4) var(--space-5, 25px);
    }

    .point-sheet__panel[data-active],
    .point-sheet:not([data-open]) .point-sheet__panel:target {
        display: flex;
    }

    .point-sheet__head {
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

    .point-sheet__counter {
        flex: 1;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-neutral-700);
    }

    .point-sheet__nav {
        min-inline-size: 44px;
        min-block-size: 44px;
    }

    .point-sheet__nav[aria-disabled='true'] {
        opacity: 0.35;
        pointer-events: none;
    }

    .point-sheet__body {
        display: flex;
        align-items: flex-end;
        gap: var(--space-3);
    }

    .point-sheet__photo {
        display: flex;
        flex: none;
        align-items: flex-end;
        inline-size: 104px;
        block-size: 128px;
        margin: 0;
        background: var(--color-neutral-300);
    }

    .point-sheet__photo[aria-busy='true'] {
        animation: point-sheet-pulse 1.2s ease-in-out infinite alternate;
    }

    .point-sheet__img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
    }

    /*
     * With a photo (or a video's poster) the picture leads the panel: the full width of the sheet,
     * as tall as leaves room for the facts and the sentence on a 390 px phone, and plainly a way
     * into the fullscreen viewer — a zoom (or play) label on it, a pointer, a focus ring.
     */
    .point-sheet__body--photo {
        flex-direction: column;
        align-items: stretch;
    }

    .point-sheet__body--photo .point-sheet__photo {
        position: relative;
        inline-size: 100%;
        block-size: auto;
        aspect-ratio: 4 / 3;
        max-block-size: 42dvh;
    }

    .point-sheet__picture {
        display: block;
        inline-size: 100%;
        block-size: 100%;
    }

    .point-sheet__photo-link {
        position: relative;
        display: block;
        inline-size: 100%;
        block-size: 100%;
        color: var(--color-bg);
        cursor: zoom-in;
    }

    .point-sheet__photo-link--video {
        cursor: pointer;
    }

    .point-sheet__photo-link:focus-visible {
        outline: 2px solid var(--color-focus);
        outline-offset: 3px;
    }

    .point-sheet__zoom-hint {
        position: absolute;
        inset-inline-end: var(--space-2);
        inset-block-end: var(--space-2);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-block-size: 36px;
        padding: 4px 12px;
        border-radius: 999px;
        background: color-mix(in srgb, #141312 74%, transparent);
        color: var(--color-bg);
        font-size: var(--text-s);
        font-weight: 600;
    }

    .point-sheet__zoom-hint svg {
        inline-size: 18px;
        block-size: 18px;
    }

    .point-sheet__play {
        position: absolute;
        inset: 50% auto auto 50%;
        display: grid;
        place-items: center;
        inline-size: 64px;
        block-size: 64px;
        border-radius: 50%;
        background: color-mix(in srgb, #141312 74%, transparent);
        color: var(--color-bg);
        transform: translate(-50%, -50%);
    }

    .point-sheet__play svg {
        inline-size: 32px;
        block-size: 32px;
    }

    .point-sheet__photo-link:hover .point-sheet__zoom-hint,
    .point-sheet__photo-link:hover .point-sheet__play {
        background: #141312;
    }

    .point-sheet__photo-missing,
    .point-sheet__photo-failed {
        padding: 6px;
        font-size: 10px;
        color: var(--color-neutral-800);
    }

    .point-sheet__photo-failed {
        position: absolute;
        inset-block-end: 0;
        background: var(--color-bg);
    }

    .point-sheet__facts {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .point-sheet__date {
        font-size: 14px;
    }

    .point-sheet__big {
        margin: 0;
        font-size: 34px;
        font-weight: 600;
        line-height: 1.05;
    }

    .point-sheet__big:focus {
        outline: none;
    }

    .point-sheet__big:focus-visible {
        outline: 2px solid var(--color-focus);
        outline-offset: 2px;
    }

    .point-sheet__sentence {
        margin: 0;
    }

    .point-sheet__sentence p {
        margin: 0;
        font-size: 19px;
        font-style: italic;
        line-height: 1.4;
        text-wrap: pretty;
    }

    .point-sheet__locked {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin: 0;
        padding: var(--space-3);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        font-size: var(--text-s);
        line-height: 1.35;
    }

    .point-sheet__locked-text {
        flex: 1;
    }

    .point-sheet__lock {
        flex: none;
        font-size: 20px;
        color: var(--color-neutral-700);
    }

    .point-sheet__note {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .point-sheet__note-title {
        margin: 0;
        color: var(--color-accent-700);
    }

    .point-sheet__note-text {
        margin: 0;
        text-wrap: pretty;
    }

    @keyframes point-sheet-pulse {
        from { opacity: 1; }
        to { opacity: 0.6; }
    }

    @media (prefers-reduced-motion: reduce) {
        .point-sheet__photo[aria-busy='true'] {
            animation: none;
        }
    }
}