/* pinky — "cosmique" theme.
   Skins the web client with the Cosmique design system (../cosmique-design):
   warm paper & ink, brick accent, hairline borders, sharp corners, print
   grain, uppercase kickers. Loaded after style.css via /theme.css, so it
   only overrides — the layout stays the classic one. Follows the OS
   light/dark preference (Cosmique defines both palettes). */

:root {
  --bg: #EBE6D7;          /* paper */
  --surface: #EFEBDD;     /* card */
  --surface-2: #E3DDCA;   /* recessed paper: inputs, wells */
  --border: #D6D0BE;      /* hairline */
  --accent: #BC4630;      /* brick */
  --accent-dim: #A03B28;
  --text: #26231C;        /* ink */
  --muted: #857F6E;
  --success: #5E7D4F;
  --warning: #C28A2B;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141312;
    --surface: #1B1A17;
    --surface-2: #24221E;
    --border: #302C26;
    --accent: #D2502F;
    --accent-dim: #B23B2C;
    --text: #E9E3D4;
    --muted: #8C8677;
    --success: #84A86E;
    --warning: #D9A441;
  }
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--bg); }

/* Print-grain overlay — the signature texture. Multiply on paper, screen on
   dark; parked while the video player is open. */
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  opacity: 0.07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  body::after { opacity: 0.05; mix-blend-mode: screen; }
}
body:has(#player-overlay)::after { display: none; }

/* --- controls: ink-block buttons, sharp corners --- */
button {
  background: var(--text);
  color: var(--bg);
  border-radius: 2px;
  letter-spacing: 0.05em;
}
button:hover { background: var(--accent); }
button.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
}
button.ghost:hover { background: transparent; border-color: var(--text); color: var(--text); }
button.danger { background: transparent; border: 1px solid var(--accent-dim); color: var(--accent); }
button.danger:hover { background: var(--accent-dim); color: var(--bg); }
input, select { border-radius: 2px; }

/* --- top bar: flat paper, label-tracked brand --- */
header#topbar { background: var(--bg); }
header#topbar h1 a { color: var(--text); letter-spacing: 0.16em; text-transform: uppercase; font-size: 1rem; }
#nav a { font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; }

/* --- kicker-style section headings: brick dot + tracking --- */
.section > h2, .toolbar h2 {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.section > h2::before, .toolbar h2::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  margin-right: 12px;
  flex: none;
  align-self: center;
}
.toolbar h2 { display: flex; align-items: center; }

/* --- cards: hairline frames, ink on hover, calmer corners --- */
.card .poster { border-radius: 2px; }
.card:hover .poster { transform: translateY(-4px) scale(1.0); border-color: var(--text); }
.card .sub, .file-info { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 0.7rem; }
.badge { border-radius: 2px; }

.login-box, .ep-row, .detail-hero { border-radius: 2px; }
.ep-row:hover { border-color: var(--text); }
.ep-row .still { border-radius: 2px; }
.detail-hero .backdrop { filter: brightness(0.45) sepia(0.15); }
.detail-hero .poster { border-radius: 2px; }
@media (prefers-color-scheme: light) {
  /* Backdrop photos sit behind ink text on paper — veil them harder. */
  .detail-hero .backdrop { filter: brightness(0.9) sepia(0.3) opacity(0.25); }
}

/* --- admin: chip-style tabs and pills --- */
.admin-tabs button, .season-tabs button {
  border-radius: 2px;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
}
.admin-tabs button.active, .season-tabs button.active {
  background: var(--text); border-color: var(--text); color: var(--bg);
}
.pill, button.lib-pill {
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.66rem;
}
button.lib-pill:hover { border-color: var(--text); color: var(--text); }
button.lib-pill.active { background: var(--text); border-color: var(--text); color: var(--bg); }
button.lib-pill.active:hover { background: var(--accent); border-color: var(--accent); }

#search-results { border-radius: 0 0 2px 2px; }