/* Edit page of the display screen (#108). The screen itself: carousel.css. */
.carousel-table td:first-child { width: 3rem; }
.carousel-table input[type="checkbox"] { width: 1.25rem; height: 1.25rem; }
.carousel-row-title { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; cursor: pointer; }
.carousel-row-kind { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); margin-top: 2px; }
.carousel-position { width: 5.5rem; }
.carousel-row-actions { text-align: right; }
.carousel-row-actions .hint { display: inline-block; max-width: 22rem; text-align: left; margin: 0; }
.carousel-form-image { display: block; max-width: 280px; border-radius: var(--radius); margin-bottom: var(--space-2); }

/* #110: choose every item, approve it */
.carousel-pending-alert a { font-weight: 600; margin-left: var(--space-2); }
.carousel-item-group { border: 0; padding: 0; margin: 0; }
.carousel-item-group + .carousel-item-group { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.carousel-item-group legend { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; margin-bottom: var(--space-2); padding: 0; }
.carousel-item-list, .carousel-approve-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.carousel-item-list li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.carousel-item-list li:last-child { border-bottom: 0; }
.carousel-item-list input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin-top: 2px; flex-shrink: 0; }
.carousel-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; cursor: pointer; }
.carousel-item-title { font-weight: 600; }
.carousel-item-meta { font-size: var(--text-sm); overflow-wrap: anywhere; }
.carousel-item-list .badge, .carousel-approve-item .badge { flex-shrink: 0; }
.carousel-bulk { gap: var(--space-2); flex-wrap: wrap; }
.carousel-approve-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.carousel-approve-item:last-child { border-bottom: 0; }
.carousel-approve-item > input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin-top: 4px; flex-shrink: 0; }
.carousel-approve-text { flex: 1; min-width: 0; }
.carousel-approve-text p { margin: 0; }
.carousel-approve-kind { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: var(--text-sm); }
.carousel-approve-title { font-weight: 650; font-size: var(--text-lg); }
.carousel-approve-preview { color: var(--text-muted); overflow-wrap: anywhere; }
.carousel-approve-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); flex-shrink: 0; }
.carousel-approve-actions form { margin: 0; }
details.card > summary { cursor: pointer; display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 640px) {
    .carousel-approve-item { flex-wrap: wrap; }
    .carousel-approve-actions { width: 100%; padding-left: calc(1.25rem + var(--space-3)); }
}

/* The screen inside the website (pages/watch.php) */
.carousel-watch-frame { margin: var(--space-4) 0; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid rgb(127 127 127 / 0.3); background: #000; }
.carousel-watch-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.carousel-watch-post-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.carousel-watch-post-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.carousel-watch-post-list a { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .carousel-watch-frame { aspect-ratio: 3 / 4; } }