/* AI Theater. One dark theme, tuned for a large screen at a distance. */

:root {
  --bg: #08090c;
  --bg-raised: #12141a;
  --bg-hover: #1b1e27;
  --line: #262a35;
  --text: #f2f4f8;
  --text-dim: #9aa2b4;
  --accent: #ff4d4d;
  --accent-ink: #ffffff;
  --radius: 10px;
  --row-gap: clamp(1.75rem, 4vw, 3rem);
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --card-width: clamp(190px, 21vw, 300px);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: #fff; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0.9rem var(--gutter);
  background: linear-gradient(to bottom, rgba(8, 9, 12, 0.96), rgba(8, 9, 12, 0.72) 70%, transparent);
  backdrop-filter: blur(10px);
}

.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; letter-spacing: -0.01em; }
.brand-mark {
  width: 1.1rem; height: 1.1rem; border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.16);
}
.brand-name { font-size: 1.05rem; }

.site-nav { display: flex; gap: clamp(0.75rem, 2vw, 1.5rem); font-size: 0.95rem; color: var(--text-dim); }
.site-nav a:hover { color: var(--text); }

.search { margin-left: auto; }
.search input {
  width: clamp(130px, 18vw, 240px);
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text);
  font: inherit; font-size: 0.9rem;
}
.search input::placeholder { color: var(--text-dim); }

/* ---------- Hero ---------- */

.hero { position: relative; min-height: clamp(380px, 56vh, 620px); display: flex; align-items: flex-end; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(8, 9, 12, 0.35) 55%, rgba(8, 9, 12, 0.7)),
    linear-gradient(to right, rgba(8, 9, 12, 0.92) 8%, transparent 62%);
}
.hero-copy { position: relative; padding: 0 var(--gutter) clamp(2rem, 5vw, 4rem); max-width: min(680px, 90vw); }
.hero-eyebrow { margin: 0 0 0.5rem; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.hero-title { margin: 0 0 0.6rem; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; }
.hero-meta { margin: 0 0 0.75rem; color: var(--text-dim); font-size: 0.95rem; }
.hero-blurb { margin: 0 0 1.4rem; color: #d6dae4; }
.hero-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }

/* ---------- Buttons ---------- */

.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.62rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-raised);
  color: var(--text);
  font: inherit; font-size: 0.95rem; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.button:hover { background: var(--bg-hover); border-color: #3a404f; color: #fff; }
.button:active { transform: translateY(1px); }
.button-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.button-primary:hover { background: #ff6262; border-color: #ff6262; color: #fff; }
.button-small { padding: 0.35rem 0.7rem; font-size: 0.82rem; }
.button-lg { padding: 0.8rem 1.6rem; font-size: 1.02rem; }
.button .glyph { flex: none; margin-right: 0.5rem; }
.button-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* ---------- Rows ---------- */

.rows { padding: clamp(1.5rem, 4vw, 2.5rem) 0 4rem; display: flex; flex-direction: column; gap: var(--row-gap); }
.row { position: relative; }

.row-heading {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 0 var(--gutter) 0.7rem;
}
.row-heading h2 { margin: 0; font-size: clamp(1.05rem, 2vw, 1.4rem); letter-spacing: -0.01em; }
.row-more { font-size: 0.82rem; color: var(--text-dim); opacity: 0; transition: opacity 0.15s; }
a.row-heading:hover .row-more { opacity: 1; }
.row-description { margin: -0.4rem 0 0.6rem; padding: 0 var(--gutter); color: var(--text-dim); font-size: 0.88rem; }

.row-track {
  display: flex; gap: 0.75rem;
  padding: 0.25rem var(--gutter) 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Without this the snap point sits at the track's content edge, so a row that
     overflows starts scrolled by the gutter and its cards sit flush against the
     viewport while the heading above keeps its margin. */
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.row-track::-webkit-scrollbar { height: 6px; }
.row-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

/* ---------- Cards ---------- */

.card {
  flex: 0 0 var(--card-width);
  scroll-snap-align: start;
  transition: transform 0.18s ease;
}
.card:hover, .card:focus-visible { transform: scale(1.04); z-index: 2; }

.card-art {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid var(--line);
}
.card-art img { width: 100%; height: 100%; object-fit: cover; }
.card-art-empty { width: 100%; height: 100%; background: linear-gradient(135deg, #1b1e27, #0d0f14); }

.card-duration, .card-source {
  position: absolute; bottom: 0.45rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.78);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
}
.card-duration { right: 0.45rem; }
.card-source { left: 0.45rem; color: var(--text-dim); }

.card-body { padding: 0.55rem 0.15rem 0; }
.card-title {
  margin: 0; font-size: 0.92rem; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta {
  margin: 0.2rem 0 0; color: var(--text-dim); font-size: 0.78rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Grid and generic pages ---------- */

.grid {
  display: grid; gap: 1.25rem 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.grid .card { flex: initial; }

.page { padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) 5rem; max-width: 1500px; margin: 0 auto; }
.page h1 { margin: 0 0 0.5rem; font-size: clamp(1.6rem, 4vw, 2.5rem); letter-spacing: -0.02em; }
.lede { margin: 0 0 1.25rem; color: var(--text-dim); max-width: 60ch; }
.count { margin: 0 0 1.25rem; color: var(--text-dim); font-size: 0.88rem; }
.empty { color: var(--text-dim); }
.empty-state { padding: 6rem var(--gutter); text-align: center; }

.prose { max-width: 70ch; }
.prose h2 { margin: 2rem 0 0.6rem; font-size: 1.2rem; }
.prose p, .prose li { color: #d6dae4; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.4rem; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose code { background: var(--bg-raised); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.88em; }

.chip-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.9rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-raised); font-size: 0.9rem;
}
.chip:hover { background: var(--bg-hover); }
.chip span { color: var(--text-dim); font-size: 0.78rem; }
.browse-group h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }

.pager { display: flex; gap: 0.6rem; margin-top: 2rem; }

.creator-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.creator-list a {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-raised);
}
.creator-list a:hover { background: var(--bg-hover); }
.creator-count { color: var(--text-dim); font-size: 0.82rem; }
.creator-header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* ---------- Details: everything about one film ---------- */

/* Two columns: the still on the left, the copy and the Play button on the
   right. The still is where the muted snippet plays before settling back. */
.details-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
  max-width: 1500px; margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.5rem) var(--gutter);
}

.details-stage {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden;
  background: #000; border: 1px solid var(--line);
}
.stage-still { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease; }
.stage-still-empty { background: linear-gradient(135deg, #1b1e27, #0d0f14); }
.details-stage.is-previewing .stage-still { opacity: 0; }

/* Injected by preview.js, never by the server: a visitor who gets no snippet
   gets no third-party request either. */
.stage-preview {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; border: 0;
  opacity: 0; transition: opacity 0.5s ease;
  /* The snippet is a preview, not a player. The link over it is the only
     control, so the frame itself never takes a click. */
  pointer-events: none;
}
.details-stage.is-previewing .stage-preview { opacity: 1; }

.stage-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.stage-play-badge {
  display: grid; place-items: center;
  width: clamp(54px, 7vw, 76px); aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(8, 9, 12, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  transition: background 0.15s, border-color 0.15s, transform 0.15s, opacity 0.3s;
}
.stage-play-badge .glyph { width: 38%; height: auto; margin: 0 0 0 8%; }
.stage-play:hover .stage-play-badge,
.stage-play:focus-visible .stage-play-badge {
  background: var(--accent); border-color: var(--accent); transform: scale(1.06);
}
/* While the snippet runs the badge steps back, so the film is what you see.
   It returns the moment a pointer looks for it. */
.details-stage.is-previewing .stage-play-badge { opacity: 0.25; }
.details-stage.is-previewing .stage-play:hover .stage-play-badge { opacity: 1; }

.details-copy { min-width: 0; }
.details-title { margin: 0 0 0.5rem; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.08; letter-spacing: -0.02em; }
.details-meta { margin: 0 0 0.35rem; color: var(--text-dim); font-size: 0.92rem; }
.details-creator { margin: 0 0 1rem; font-size: 0.95rem; }
.details-creator a { border-bottom: 1px solid var(--line); }
.details-creator a:hover { border-bottom-color: var(--accent); }
.details-blurb { margin: 0 0 1.5rem; color: #d6dae4; max-width: 56ch; }
.details-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }

.details-body { max-width: 1500px; margin: 0 auto; padding: 0 var(--gutter) 2rem; }
/* The wrapper, not the row: .rows is a flex column, and auto margins on a flex
   item shrink it to its content width instead of centring it at full width. */
.details .rows { max-width: 1500px; margin: 0 auto; }

/* ---------- Watch: the film, filling the viewport ---------- */

body.watching { background: #000; }

.watch-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem);
  padding: 0.8rem var(--gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
  /* The bar spans the full width but must not swallow clicks meant for the
     host's own player chrome. Only its own controls take the pointer back;
     the scrim below is a pseudo-element and inherits the none. */
  pointer-events: none;
}
.watch-bar > * { pointer-events: auto; }

/* Over the player a scrim is enough to keep the text legible without hiding
   the frame. It runs past the bar's own box, because the creator line sits on
   the bottom edge and a gradient that ends there leaves it on bare film. */
.watch-bar::after {
  content: ""; position: absolute; z-index: -1;
  left: 0; right: 0; top: 0; bottom: -3.5rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.5) 55%, transparent);
  transition: opacity 0.2s;
}

/* Scrolled past the film there is nothing to sit on, so the bar takes a plate
   of its own and the text can drop the shadows it needed over the picture. */
.watch-bar.is-detached {
  background: rgba(8, 9, 12, 0.94);
  border-bottom-color: var(--line);
  backdrop-filter: blur(10px);
}
.watch-bar.is-detached::after { opacity: 0; }
.watch-bar.is-detached .watch-bar-title,
.watch-bar.is-detached .watch-bar-creator { text-shadow: none; }
.watch-bar.is-detached .watch-bar-creator { color: var(--text-dim); }

.watch-back {
  display: inline-flex; align-items: center; gap: 0.35rem; flex: none;
  padding: 0.5rem 0.95rem 0.5rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(20, 22, 28, 0.72);
  font-size: 0.92rem; font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}
.watch-back:hover { background: rgba(44, 48, 60, 0.92); border-color: rgba(255, 255, 255, 0.3); color: #fff; }

.watch-bar-text { min-width: 0; }
.watch-bar-title {
  margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
.watch-bar-creator {
  display: block; font-size: 0.82rem; color: #cdd3e0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
a.watch-bar-creator:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

.watch-stage {
  position: relative; width: 100%; background: #000;
  /* svh, not vh: on a phone vh counts the space under the browser's own
     toolbars, so the film would run off the bottom of the screen. The few
     rems taken off leave the top of the details showing, which is the hint
     that there is more below. */
  height: 100vh;
  height: calc(100svh - 3.5rem);
  min-height: 55vh;
}
.watch-stage iframe { width: 100%; height: 100%; border: 0; display: block; }

.watch-cue {
  display: block; width: fit-content; margin: 0.9rem auto 0;
  padding: 0.4rem 1rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text-dim); font-size: 0.82rem;
}
.watch-cue:hover { background: var(--bg-hover); color: var(--text); }

.watch-details {
  max-width: 1240px; margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--gutter) 0;
  /* The overlay bar is fixed, so an anchor jump has to stop short of it. */
  scroll-margin-top: 4.5rem;
}
.watch-details h1 { margin: 0 0 0.35rem; font-size: clamp(1.4rem, 3.5vw, 2.2rem); letter-spacing: -0.02em; }
.watch-meta { margin: 0 0 1.25rem; color: var(--text-dim); font-size: 0.92rem; }
.watch-more { margin: 0 0 2.5rem; font-size: 0.9rem; }
.watch-more a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.watch .rows { max-width: 1240px; margin: 0 auto; }

/* The outward links every page that plays a film carries. */
.host-links { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.25rem; }

.source-note {
  margin: 0 0 1.5rem; padding: 0.75rem 1rem;
  border-left: 3px solid var(--line); border-radius: 0 6px 6px 0;
  background: var(--bg-raised);
  color: var(--text-dim); font-size: 0.86rem; max-width: 70ch;
}

.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0; margin: 0 0 1.5rem; }
.tag-list a {
  display: inline-block; padding: 0.3rem 0.7rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-raised); font-size: 0.8rem; color: var(--text-dim);
}
.tag-list a:hover { color: var(--text); background: var(--bg-hover); }

.curator-note {
  margin: 0 0 1.5rem; padding: 1rem 1.25rem;
  border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0;
  background: var(--bg-raised); max-width: 70ch;
}
.curator-note p { margin: 0 0 0.4rem; }
.curator-note cite { color: var(--text-dim); font-size: 0.78rem; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }

.description { max-width: 70ch; color: #c8cdd9; font-size: 0.94rem; margin-bottom: 2rem; }
.description p { margin: 0 0 0.8rem; }

.report { max-width: 50ch; margin-bottom: 2.5rem; }
.report summary { cursor: pointer; color: var(--text-dim); font-size: 0.88rem; }
.report form { display: grid; gap: 0.4rem; margin-top: 0.8rem; }
.report label { font-size: 0.82rem; color: var(--text-dim); }

select, textarea, input[type="text"], input[type="url"], input[type="password"], input[type="search"], input[type="number"] {
  padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-raised); color: var(--text); font: inherit; font-size: 0.9rem;
  width: 100%;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 2rem var(--gutter) 3rem;
  color: var(--text-dim); font-size: 0.85rem;
}
.footer-note { margin: 0 0 0.8rem; max-width: 70ch; }
.footer-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-nav a:hover { color: var(--text); }

/* ---------- Admin ---------- */

.admin { background: #0b0d11; }
.admin-header {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.8rem 1.5rem; border-bottom: 1px solid var(--line); background: var(--bg-raised);
}
.admin-nav { display: flex; gap: 1rem; font-size: 0.9rem; color: var(--text-dim); }
.admin-nav a.is-active { color: var(--text); font-weight: 600; }
.admin-header form { margin-left: auto; }
.admin-main { padding: 1.75rem; max-width: 1400px; margin: 0 auto; }
.admin-main h1 { font-size: 1.5rem; margin: 0 0 0.3rem; }
.admin-main h2 { font-size: 1.05rem; margin: 0 0 0.75rem; }

.admin-login { display: grid; place-items: center; min-height: 100vh; }
.login-card {
  display: grid; gap: 0.6rem; width: min(360px, 90vw);
  padding: 2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raised);
}
.login-card h1 { margin: 0 0 0.5rem; font-size: 1.2rem; }

.stat-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1.5rem; }
.stat {
  padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raised);
}
.stat strong { display: block; font-size: 1.7rem; line-height: 1.1; }
.stat span { color: var(--text-dim); font-size: 0.8rem; }

.panel {
  padding: 1.25rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-raised); margin-bottom: 1.25rem;
}
.panel fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 1rem; padding: 0.75rem 1rem; }
.panel legend { color: var(--text-dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.panel textarea, .panel select { margin-bottom: 1rem; }

.meter { height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; margin-bottom: 0.5rem; }
.meter-fill { height: 100%; background: var(--accent); }

.muted { color: var(--text-dim); font-size: 0.85rem; }
.notice { padding: 0.75rem 1rem; border-radius: 8px; background: #17301f; border: 1px solid #2c5a3a; margin-bottom: 1.25rem; font-size: 0.9rem; }
.error { color: #ff8080; }
.badge { padding: 0.1rem 0.4rem; border-radius: 4px; background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 700; }

.inline-form { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.inline-form input[type="url"] { flex: 1 1 320px; width: auto; }
.inline-form label { font-size: 0.88rem; color: var(--text-dim); display: flex; gap: 0.5rem; align-items: center; }
.field-row { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 1rem; }
.field-row label { display: grid; gap: 0.3rem; font-size: 0.8rem; color: var(--text-dim); }
.checkbox-grid { display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); font-size: 0.88rem; }
.checkbox-grid label { display: flex; gap: 0.45rem; align-items: center; }

/* The category form shows keywords or a length range, whichever the chosen
   kind sorts on. Without :has() both show, and the server ignores the other. */
.category-form textarea { margin-bottom: 0; }
.category-form:has(option[value="runtime"]:checked) .category-terms { display: none; }
.category-form:not(:has(option[value="runtime"]:checked)) .category-runtime { display: none; }
/* Only genres and moods nest, and a child's parent must be the same kind. */
.category-form:has(select[name="kind"] option[value="runtime"]:checked) .category-parent,
.category-form:has(select[name="kind"] option[value="collection"]:checked) .category-parent { display: none; }
.category-form:has(select[name="kind"] option[value="genre"]:checked) optgroup[data-kind="mood"],
.category-form:has(select[name="kind"] option[value="mood"]:checked) optgroup[data-kind="genre"] { display: none; }
.category-form:not(:has(select[name="kind"] option[value="collection"]:checked)) .collection-only { display: none; }

/* A collection's editor: its fields and rules stay in view beside the long list of links. */
.category-editor { display: grid; gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
.category-editor:has(select[name="kind"] option[value="collection"]:checked) {
  grid-template-columns: minmax(300px, 1fr) minmax(0, 1.4fr);
}
.category-editor > .panel { margin: 0; }
.category-editor-main { position: sticky; top: 1rem; }
.rules-summary { margin: 0.25rem 0 1rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.rules-summary h2 { font-size: 0.95rem; }
.rules-summary p { margin: 0 0 0.5rem; }
.link-tools { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.5rem; }
.link-tools input[type="search"] { flex: 1; width: auto; }
.link-tools label { display: flex; gap: 0.4rem; align-items: center; font-size: 0.85rem; color: var(--text-dim); white-space: nowrap; }
.link-group h3 { margin: 1rem 0 0.35rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }
.link-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.3rem 0 0.3rem calc(var(--depth, 0) * 1.2rem); border-bottom: 1px solid var(--line);
}
.link-row[hidden] { display: none; }
.collection-links:has(.linked-only:checked) .link-row:has(input[value="off"]:checked) { display: none; }
.link-name { display: flex; gap: 0.4rem; min-width: 0; font-size: 0.9rem; }
.segmented { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: 0.25rem 0.6rem; font-size: 0.78rem; color: var(--text-dim); }
.segmented label + label span { border-left: 1px solid var(--line); }
.segmented input:checked + span { background: var(--bg-hover); color: var(--text); }
.segmented input[value="optional"]:checked + span { background: #33290f; color: #f0c86a; }
.segmented input[value="required"]:checked + span { background: #17301f; color: #7fe0a0; }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The Categories table shows children under their parent. */
.tree-name { display: flex; gap: 0.4rem; padding-left: calc(var(--depth, 0) * 1.1rem); }
.tree-mark { color: var(--text-dim); }

.table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.table th, .table td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { color: var(--text-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.table tr.is-off { opacity: 0.5; }
.table code { font-size: 0.82em; color: var(--text-dim); }
.row-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.snippet { color: var(--text-dim); font-size: 0.82rem; max-width: 40ch; }

.review-day { margin-top: 1.5rem; }
.review-day h2 {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 0 0.6rem; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--text-dim);
}
.review-day-count {
  padding: 0.05rem 0.45rem; border-radius: 99px; background: var(--bg-hover); font-size: 0.72rem; color: var(--text);
}
/* The queue takes 80% of a wide screen, and never less room than the other
   admin pages. Cards run up to six across, fewer where they would get narrow. */
.admin-main:has(.review-list, .editor-grid) { max-width: max(1400px, 80vw); }
.review-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(max(210px, (100% - 4.5rem) / 6), 1fr));
}
.review-item {
  display: flex; flex-direction: column; gap: 0.6rem; min-width: 0;
  padding: 0.5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-raised);
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.review-item:hover { border-color: #3a404f; background: var(--bg-hover); }
/* No overflow: hidden here. It would clip the confidence badge's tooltip. */
.review-art { position: relative; aspect-ratio: 16 / 9; border-radius: 5px; background: #000; }
.review-art img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* The body grows, so every card in a grid row has its buttons on one line. */
.review-body { flex: 1; min-width: 0; }
.review-body h3 {
  margin: 0 0 0.2rem; font-size: 0.92rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.review-meta, .review-signals { margin: 0; color: var(--text-dim); font-size: 0.78rem; }
.review-body .review-signals { margin-top: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; }
.review-actions { gap: 0.3rem; flex-wrap: nowrap; }
.review-actions > * { flex: 1 1 0; min-width: 0; }
.review-actions .button { width: 100%; padding-inline: 0.3rem; }

.confidence {
  min-width: 2.3rem; padding: 0.15rem 0.4rem; border-radius: 6px; text-align: center;
  font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.confidence-high, .status-published { background: #17301f; border-color: #2c5a3a; color: #7fe0a0; }
.confidence-mid, .status-pending { background: #33290f; border-color: #5f4b1a; color: #f0c86a; }
.confidence-low, .status-hidden { background: var(--bg-hover); border-color: var(--line); color: var(--text-dim); }
.status-rejected { background: #3a1618; border-color: #6e2a2e; color: #ff9a9a; }

.status-badges { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.status {
  padding: 0.15rem 0.5rem; border-radius: 6px; border: 1px solid transparent;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}

/* The confidence badge explains itself on hover or keyboard focus. */
.confidence[data-tip] { position: relative; cursor: help; }
.confidence[data-tip]::after {
  content: attr(data-tip);
  position: absolute; z-index: 20; top: calc(100% + 6px); right: 0;
  width: max-content; max-width: min(18rem, 80vw);
  padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 6px;
  background: #1b1e27; color: var(--text); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  font-size: 0.78rem; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal;
  font-variant-numeric: normal; letter-spacing: 0;
  opacity: 0; visibility: hidden; transition: opacity 0.12s; pointer-events: none;
}
.confidence[data-tip]:hover::after, .confidence[data-tip]:focus-visible::after { opacity: 1; visibility: visible; }
.review-art .confidence { position: absolute; top: 0.35rem; right: 0.35rem; }

.review-modal {
  width: min(1280px, 94vw); max-height: 92vh; padding: 0;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raised); color: var(--text);
}
.review-modal::backdrop { background: rgba(0, 0, 0, 0.72); }
.review-loading { padding: 2rem; margin: 0; }
.review-panel { padding: 1.1rem 1.25rem 1.25rem; }
.review-panel-head { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.9rem; }
.review-panel-head h2 { flex: 1; margin: 0; font-size: 1.1rem; line-height: 1.3; }
.review-panel-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 1.25rem; align-items: start; }
.review-panel-film { display: grid; gap: 0.6rem; min-width: 0; }
.review-player { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.review-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.review-description {
  max-height: 9rem; overflow: auto; padding: 0.6rem 0.75rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
  color: var(--text-dim); font-size: 0.8rem; white-space: pre-line; overflow-wrap: anywhere;
}
.review-panel-form { margin: 0; }
.review-modal .review-panel-form { max-height: calc(92vh - 5rem); overflow: auto; }
.review-panel-form h2 { font-size: 0.9rem; }
.review-panel-form textarea { width: 100%; }

/* The full editor: the modal's two columns at page size. */
.editor-head { display: flex; align-items: center; gap: 0.5rem 0.9rem; flex-wrap: wrap; margin-bottom: 1rem; }
.editor-head h1 { margin: 0; }
.editor-grid .review-description { max-height: 24rem; }
.category-add { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
.category-add input[type="text"] { flex: 1; width: auto; min-width: 0; padding-block: 0.35rem; }
.panel .category-add select { flex: 0 1 auto; width: auto; min-width: 0; margin: 0; padding-block: 0.35rem; }
.review-panel-form fieldset > .muted { margin: 0; }

/* The category tree in both editors. A parent's toggle sits at the end of
   its own line, so opening it and ticking it are separate targets. */
.cat-item { display: flex; align-items: center; gap: 0.2rem 0.45rem; flex-wrap: wrap; min-width: 0; }
.cat-node { grid-column: 1 / -1; position: relative; }
.cat-node > .cat-item { padding-right: 5.5rem; }
.cat-node > details > summary {
  position: absolute; top: 0; right: 0;
  padding: 0 0.5rem; border: 1px solid var(--line); border-radius: 99px;
  list-style: none; cursor: pointer; font-size: 0.75rem; color: var(--text-dim); white-space: nowrap;
}
.cat-node > details > summary::-webkit-details-marker { display: none; }
.cat-node > details > summary::before { content: "▸ "; }
.cat-node > details[open] > summary::before { content: "▾ "; }
.cat-node > details > summary:hover { color: var(--text); border-color: #3a404f; }
.cat-children { margin: 0.4rem 0 0.2rem 0.55rem; padding-left: 0.9rem; border-left: 1px solid var(--line); }
.cat-linked { color: #7fe0a0; font-size: 0.75rem; }
.cat-rules, .link-button {
  padding: 0; border: 0; background: none; font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.cat-rules { font-size: 0.75rem; color: var(--text-dim); }
.cat-rules:hover { color: var(--text); }
.link-button { font-size: 0.82rem; color: var(--accent); }

@media (max-width: 900px) {
  .category-editor:has(select[name="kind"] option[value="collection"]:checked) { grid-template-columns: 1fr; }
  .category-editor-main { position: static; }
  .review-panel-grid { grid-template-columns: 1fr; }
  .review-modal .review-panel-form { max-height: none; }
}

@media (max-width: 720px) {
  /* The nav is not hidden here. Hiding it with no replacement made /browse and
     /creators unreachable on a phone. It wraps to its own line instead. */
  .site-header { flex-wrap: wrap; row-gap: 0.6rem; }
  .site-nav { order: 3; width: 100%; justify-content: space-between; font-size: 0.9rem; }
  .search { margin-left: auto; }
  .search input { width: clamp(140px, 42vw, 220px); }
  /* Six tabs do not fit beside the brand and Sign out, and the nav did not
     wrap, so every admin page scrolled sideways. The nav takes its own row. */
  .admin-header { flex-wrap: wrap; row-gap: 0.6rem; padding: 0.8rem 1rem; }
  .admin-nav { order: 3; width: 100%; flex-wrap: wrap; gap: 0.4rem 1rem; }
  .admin-main { padding: 1.25rem 1rem; }
  /* The header was hiding a second overflow: the dashboard, catalog, sources,
     creators and reports tables are wider than a phone. They scroll on their
     own so the page does not. */
  .admin-main .table { display: block; overflow-x: auto; }
  .hero { min-height: 340px; }
}

@media (max-width: 900px) {
  .details-hero { grid-template-columns: 1fr; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .button { transition: none; }
}