/* Plex library browser (public, read-only). Every poster links to the "How to watch" steps. */
.plex-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: var(--space-5) 0 var(--space-4); }
.plex-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; flex: 1 1 100%; }
.plex-tab { font: inherit; font-size: var(--text-sm); min-height: 44px; padding: 0 var(--space-4); border-radius: 999px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); cursor: pointer; }
.plex-tab:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.plex-tab[aria-selected="true"] { background: var(--color-accent-subtle); border-color: var(--color-accent); color: var(--color-text-primary); }
.plex-tab .num { opacity: .65; margin-left: .4em; }
.plex-q, .plex-mode { font: inherit; font-size: 16px; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary); }
.plex-q { flex: 1 1 14rem; min-width: 0; }
.plex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--space-4); }
.plex-item { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: var(--color-text-primary); }
.plex-item .poster { position: relative; aspect-ratio: 2 / 3; background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); overflow: hidden; }
.plex-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plex-item .nopic { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-3); text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); }
.plex-item .nopic[hidden] { display: none; }
.plex-item:hover .poster, .plex-item:focus-visible .poster { border-color: var(--color-accent); }
.plex-item .t { font-size: var(--text-sm); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plex-item .y { font: 400 var(--text-xs)/1 var(--font-mono); color: var(--color-text-muted); }
#pj { scroll-margin-top: calc(var(--space-7) * 2); }
#pj:target { animation: plexPulse 1.6s ease-out; }
@keyframes plexPulse { 0% { color: var(--color-accent); text-shadow: 0 0 18px var(--color-accent); } 100% { text-shadow: none; } }
@media (prefers-reduced-motion: reduce) { #pj:target { animation: none; } }

/* Title landing page */
.plex-back { margin: var(--space-5) 0 var(--space-4); }
.plex-back a { color: var(--color-text-secondary); text-decoration: none; font-size: var(--text-sm); }
.plex-back a:hover { color: var(--color-text-primary); }
.plex-hero { display: grid; grid-template-columns: minmax(10rem, 20rem) 1fr; gap: var(--space-6); align-items: start; }
.plex-bigposter { aspect-ratio: 2 / 3; background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); overflow: hidden; }
.plex-bigposter img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plex-bigposter .nopic { height: 100%; display: grid; place-items: center; padding: var(--space-4); text-align: center; color: var(--color-text-muted); }
.plex-info h1 { margin: 0 0 var(--space-2); }
.plex-tag { font-style: italic; color: var(--color-text-secondary); margin: 0 0 var(--space-3); }
.plex-meta { font: 400 var(--text-sm)/1.4 var(--font-mono); color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.plex-rates { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.plex-rate { font-size: var(--text-sm); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: 999px; }
.plex-summary { max-width: 60ch; line-height: 1.6; margin: 0 0 var(--space-4); }
.plex-facts { display: grid; gap: var(--space-2); margin: 0 0 var(--space-5); }
.plex-facts > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--space-3); }
.plex-facts dt { color: var(--color-text-muted); font-size: var(--text-sm); }
.plex-facts dd { margin: 0; }
.plex-title + .reading, .plex-title ~ .reading { margin-top: var(--space-8, 4rem); }
@media (max-width: 640px) { .plex-hero { grid-template-columns: 1fr; } .plex-bigposter { max-width: 14rem; } .plex-facts > div { grid-template-columns: 1fr; gap: 0; } }