/* ============================================================
   The Final Cut Review — App Styles
   ============================================================ */

/* Smooth transitions for dark mode */
*, *::before, *::after {
    transition-property: background-color, border-color, color;
    transition-duration: 150ms;
    transition-timing-function: ease;
}

/* ── Prose styles for review body ─── */
.prose {
    color: #d1d5db;
    line-height: 1.8;
    font-size: 1.05rem;
}
.prose p {
    margin-bottom: 1.25em;
}
.prose strong {
    color: #f9fafb;
}
.prose em {
    color: #e5e7eb;
}

/* ── Stars ─── */
.stars {
    color: #fbbf24;
    letter-spacing: 0.05em;
    font-size: 1.1em;
}

/* ── Spoiler blur ─── */
.blur-content {
    filter: blur(8px);
    user-select: none;
    pointer-events: none;
}

/* ── List view for review cards ─── */
#reviewsContainer.list-view {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#reviewsContainer.list-view .review-card {
    display: flex;
    flex-direction: row;
}

#reviewsContainer.list-view .review-card a {
    display: flex;
    width: 100%;
}

#reviewsContainer.list-view .review-card .relative.aspect-\[2\/3\] {
    width: 4rem;
    height: 6rem;
    aspect-ratio: unset;
    flex-shrink: 0;
}

#reviewsContainer.list-view .review-card .p-3 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #111827; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* ── Line clamp ─── */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ── Focus styles ─── */
input:focus, select:focus, textarea:focus, button:focus-visible {
    outline: 2px solid #e50914;
    outline-offset: 2px;
}

/* ── Light mode overrides ─── */
html:not(.dark) body {
    background-color: #f9fafb;
    color: #111827;
}
html:not(.dark) header {
    background-color: #ffffff;
    border-color: #e5e7eb;
}
html:not(.dark) .bg-gray-900  { background-color: #ffffff !important; }
html:not(.dark) .bg-gray-800  { background-color: #f3f4f6 !important; }
html:not(.dark) .bg-gray-950  { background-color: #f9fafb !important; }
html:not(.dark) .border-gray-800 { border-color: #e5e7eb !important; }
html:not(.dark) .text-gray-300 { color: #374151 !important; }
html:not(.dark) .text-gray-400 { color: #6b7280 !important; }
html:not(.dark) .text-gray-500 { color: #9ca3af !important; }
html:not(.dark) .text-white    { color: #111827 !important; }
html:not(.dark) .prose         { color: #374151; }

/* ── Aspect ratio fallback ─── */
.aspect-\[2\/3\] { aspect-ratio: 2/3; }
.aspect-video    { aspect-ratio: 16/9; }