/* Grid container for recording thumbnails */
.recordings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

/* Full-width divider marking a year boundary in the recordings grid --
   spans every column regardless of how many the grid currently has,
   so it works the same at any viewport width. The first one (right at
   the top of the grid) skips its top border/margin so it doesn't add
   an orphaned rule above the very first year. */
.year-separator {
    grid-column: 1 / -1;
    margin: 1.5rem 0 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--accent);
}

.year-separator:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* One grid cell: a video thumbnail (optional), title, and/or audio players.
   Bordered and boxed so it's clear which caption/thumbnail/player go
   together in a dense grid, rather than just relying on the gap between cells. */
.recording-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.75rem;
    background: rgba(250, 248, 244, 0.85);
}

/* YouTube thumbnail play-button overlay for recordings */
.recording-thumb {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
}

.recording-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
}

.recording-thumb .play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: var(--font-size-base);
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    transition: background 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.recording-thumb:hover .play-overlay {
    background: rgba(200, 0, 0, 0.85);
    transform: translate(-50%, -50%) scale(1.1);
}

.request-video-form {
    margin: 0.5rem 0;
}

.request-video-button {
    width: 100%;
    font-size: var(--font-size-sm);
    padding: 0.25rem 0.75rem;
}

.recording-title {
    margin: 0 0 6px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.audio-recordings-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.audio-recordings-list li {
    margin-top: 0.4rem;
}

.audio-recordings-list audio {
    display: block;
    width: 100%;
    height: 32px;
    background: #c4c4c4;
    border-radius: 4px;
}

/* Chrome renders its own inner control panel with its own default
   background, separate from the element's own CSS background above --
   without this, only the corners (outside the panel) show our color,
   leaving a lighter rectangle showing through the middle. */
.audio-recordings-list audio::-webkit-media-controls-panel {
    background-color: #c4c4c4;
}

.audio-piece {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.audio-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--muted);
    margin-bottom: 0.15rem;
}

.audio-unavailable,
.no-media {
    font-size: var(--font-size-sm);
    color: var(--muted);
}

:root {
    --visibility-private: #f0b8b8;
    --visibility-presto: #f5e2a0;
    --visibility-public: #a5d6a7;
}

/* Private/Presto/Public visibility dropdown above each of the member's own recordings on My Recordings */
.visibility-form {
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Select's background reinforces the current state, same colors the old toggle button used */
.visibility-select {
    color: #1a1a1a;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-sm);
}

.visibility-select.visibility-private {
    background: var(--visibility-private);
}

.visibility-select.visibility-presto {
    background: var(--visibility-presto);
}

.visibility-select.visibility-public {
    background: var(--visibility-public);
}

/* Explains the three visibility options once, above the grid, rather than
   repeating the explanation on every card */
.visibility-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin: 0 0 1rem;
    font-size: var(--font-size-sm);
    color: var(--muted);
}

.visibility-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.35rem;
}

.visibility-legend-swatch.visibility-private {
    background: var(--visibility-private);
}

.visibility-legend-swatch.visibility-presto {
    background: var(--visibility-presto);
}

.visibility-legend-swatch.visibility-public {
    background: var(--visibility-public);
}

/* Performer byline shown on Shared Recordings cards, since it's no longer implicitly "you" */
.recording-performer {
    font-size: var(--font-size-sm);
    color: var(--muted);
    margin: -4px 0 6px;
}

/* Lost & Found claim mini-form under each unclaimed recording's player */
.claim-form {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.claim-form label {
    font-size: var(--font-size-sm);
    color: var(--muted);
}

.claim-form select,
.claim-form textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Wider cards than the video/audio grid -- these need room for the
   select/textarea/button of the claim form, not just a thumbnail. */
.lost-and-found-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* "Possibly yours" / "Everyone's" scope toggle on Unclaimed Recordings */
.scope-toggle {
    display: flex;
    gap: 0.5rem;
}

.scope-tab {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    text-decoration: none;
    color: var(--muted);
    font-size: var(--font-size-sm);
}

.scope-tab-active {
    background: var(--line);
    color: #1a1a1a;
    font-weight: 600;
}

/* Prev/Next paging under the shared-recordings grid */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem 0 1rem;
    font-size: var(--font-size-sm);
    color: var(--muted);
}

.pagination a {
    font-size: var(--font-size-base);
}

.pagination-current {
    color: var(--accent);
    font-weight: 600;
    font-size: var(--font-size-base);
}