/* The picker: one selectable tile per item of a post with several media.
   It follows the download button at the form's own control gap (half of it
   comes from <main>'s gap) and its grid gets the height the page leaves, with
   room for a two-line error, so the page itself does not scroll on a 360x640
   phone; a long gallery scrolls inside the grid. */

.picker {
    container: picker / inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    margin-top: 0.375rem;
    text-align: left;
}

.picker[hidden] {
    display: none;
}

/* One label row, set like the form's "Tipo de descarga": back, how many
   items, and the hint or how many are selected. */
.picker-header {
    display: flex;
    align-items: center;
    min-height: 2rem;
}

.picker-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-selected {
    flex: none;
    padding-left: 0.5rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A bare arrow whose tip sits on the column's edge. Its target stays
   control-sized: the negative margins let it reach into the gutter, the gap
   below and the start of the title without making the row any taller, and it
   stacks above the title so that overlap still answers to it. */
.picker-back {
    position: relative;
    z-index: 1;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: flex-start;
    width: var(--control-height);
    height: var(--control-height);
    margin: -0.5rem -1rem -0.5rem -0.875rem;
    padding: 0 0 0 0.875rem;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
}

.picker-back .icon {
    width: 0.5rem;
    height: 1rem;
}

.picker-back[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
}

@media (hover: hover) and (pointer: fine) {
    .picker-back:not([aria-disabled="true"]):hover {
        color: var(--muted);
    }
}

/* The grid scrolls inside its own panel. The padding keeps focus rings clear
   of the clipping edge. */
.picker-scroll {
    max-height: clamp(12rem, calc(100vh - 15.75rem), 26rem);
    max-height: clamp(12rem, calc(100dvh - 15.75rem), 26rem);
    margin: -0.25rem;
    padding: 0.25rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* Tiles are spaced like the options of the choice row. */
.picker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    list-style: none;
}

@container picker (min-width: 24rem) {
    .picker-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* A short list keeps tiles thumbnail-sized instead of stretching them. */
.picker[data-count="2"] .picker-grid {
    grid-template-columns: repeat(2, minmax(0, 9.5rem));
    justify-content: center;
}

.picker[data-count="3"] .picker-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cell {
    min-width: 0;
}

.tile {
    --progress: 0;
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius);
    background: var(--surface-strong);
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    transition: opacity var(--motion-base) var(--ease);
}

/* The selection ring sits above the photo; an inset box-shadow would paint under it. */
.tile::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    border: 3px solid transparent;
    border-radius: inherit;
    pointer-events: none;
    transition: border-color var(--motion-fast) var(--ease);
}

.tile[data-selected="true"]::after {
    border-color: var(--accent);
}

.tile:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

.tile[aria-disabled="true"] {
    cursor: default;
}

.tile[data-state="preparing"],
.tile[data-state="downloading"] {
    cursor: progress;
}

/* While items download, the rest of the grid steps back. */
.picker[data-busy="true"] .tile:not([data-state="preparing"]):not([data-state="downloading"]) {
    opacity: 0.45;
}

.tile-media,
.tile-thumb {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.tile-thumb {
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
}

/* The type icon sits under the preview and stays when there is none. */
.tile-placeholder {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--muted);
}

/* Media badges sit on the photo itself, so they stay dark in both themes. */
.tile-badge {
    position: absolute;
    left: 0.375rem;
    bottom: 0.375rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    padding: 0.1875rem 0.375rem;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.62);
    color: #ffffff;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.tile-badge .icon {
    width: 0.625rem;
    height: 0.625rem;
}

/* The wash veils the tile while it works; during a measured download it is
   clipped from the left, so the photo is uncovered as the bytes arrive. */
.tile-wash {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--bg);
    opacity: 0;
    clip-path: inset(0 0 0 calc(var(--progress) * 100%));
    transition: opacity var(--motion-base) var(--ease), clip-path var(--motion-progress) linear;
}

.tile[data-state="preparing"] .tile-wash,
.tile[data-state="downloading"] .tile-wash {
    opacity: 0.62;
}

.tile-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    width: calc(var(--progress) * 100%);
    height: 0.1875rem;
    background: var(--accent);
    opacity: 0;
    transition: width var(--motion-progress) linear, opacity var(--motion-fast) var(--ease);
}

.tile[data-state="downloading"] .tile-bar {
    opacity: 1;
}

.tile[data-state="preparing"] .tile-bar {
    width: 32%;
    opacity: 0.45;
    transition: none;
    animation: sweep 900ms linear infinite;
}

.tile-center {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 1.875rem;
    height: 1.875rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.tile[data-state="preparing"] .tile-center,
.tile[data-state="downloading"] .tile-center {
    display: inline-flex;
}

.tile-center .icon {
    width: 0.875rem;
    height: 0.875rem;
}

.tile[data-state="downloading"] .tile-center .icon,
.tile[data-state="preparing"] .tile-center-percent {
    display: none;
}

/* The status mark: an empty circle while the tile can be selected, the accent
   with a check once selected, green after a download and red after an error.
   It hides while the tile shows its own progress. */
.tile-mark {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    color: #ffffff;
    transition: background-color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), opacity var(--motion-fast) var(--ease), transform var(--motion-base) var(--ease-emphasis);
}

.tile-mark .icon {
    display: none;
    width: 0.75rem;
    height: 0.75rem;
}

.tile[data-state="preparing"] .tile-mark,
.tile[data-state="downloading"] .tile-mark {
    opacity: 0;
    transform: scale(0.6);
}

.tile[data-state="done"] .tile-mark {
    border-color: var(--bg);
    background: var(--success);
    color: var(--bg);
}

.tile[data-state="error"] .tile-mark {
    border-color: var(--bg);
    background: var(--error);
    color: var(--bg);
}

/* Selection wins over a past outcome: a downloaded or failed tile picked again reads as selected. */
.tile[data-selected="true"] .tile-mark {
    border-color: var(--bg);
    background: var(--accent);
    color: var(--accent-text);
}

.tile[data-selected="true"] .mark-check,
.tile[data-selected="false"][data-state="done"] .mark-check,
.tile[data-selected="false"][data-state="error"] .mark-alert {
    display: block;
}

@media (forced-colors: active) {
    .picker-back:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: -3px;
    }

    .tile {
        border: 1px solid CanvasText;
    }

    .tile:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }

    /* The system palette replaces the accent, so the ring and mark of a
       selected tile take Highlight explicitly. */
    .tile[data-selected="true"]::after {
        forced-color-adjust: none;
        border-color: Highlight;
    }

    .tile[data-selected="true"] .tile-mark {
        forced-color-adjust: none;
        border-color: HighlightText;
        background: Highlight;
        color: HighlightText;
    }

    .tile-bar {
        forced-color-adjust: none;
        background: Highlight;
    }

    .tile-badge,
    .tile-center,
    .tile-mark {
        border: 1px solid CanvasText;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* A looping sweep frozen on its last frame would sit off-screen, so the
       indeterminate state becomes a still, faint full-width bar instead. */
    .tile[data-state="preparing"] .tile-bar {
        width: 100%;
        opacity: 0.2;
        animation: none;
    }

    .tile-mark {
        transform: none;
    }
}