/* styles.css — shared between index.html and results.html.
   Page-specific styles stay inline in each page. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: dark;
  --bg:          oklch(10.5% 0.010 60);
  --surface:     oklch(15% 0.012 60);
  --surface-hi:  oklch(21% 0.014 60);
  --border:      oklch(27% 0.014 60);
  --text-1:      oklch(92% 0.007 60);
  --text-2:      oklch(64% 0.010 60);
  --text-3:      oklch(42% 0.010 60);
  --accent:      oklch(72% 0.11 143);
  --accent-hi:   oklch(80% 0.13 143);
  --accent-ink:  oklch(12% 0.008 60);   /* text/icons on an accent fill */
  --gold:        oklch(78% 0.14 80);
  --danger:      oklch(58% 0.16 25);
  /* Soft accent surfaces: selected chips, hover borders. */
  --accent-soft:        oklch(18% 0.035 143);
  --accent-soft-border: oklch(35% 0.06 143);
  --accent-border:      oklch(38% 0.04 143);
  --danger-soft:        oklch(16% 0.04 25);
  --danger-border:      oklch(32% 0.06 25);
}

/* Light theme: same warm-neutral hue (60) and accent hues as dark, lightness
   inverted. Accent/gold/danger darkened so text on the paper bg clears WCAG AA. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:          oklch(96.5% 0.008 60);
  --surface:     oklch(99.3% 0.004 60);
  --surface-hi:  oklch(93% 0.010 60);
  --border:      oklch(88% 0.012 60);
  --text-1:      oklch(24% 0.014 60);
  --text-2:      oklch(43% 0.014 60);
  --text-3:      oklch(52% 0.012 60);
  --accent:      oklch(52% 0.13 143);
  --accent-hi:   oklch(45% 0.14 143);
  --accent-ink:  oklch(99% 0.015 143);  /* near-white ink on the darker light-theme green */
  --gold:        oklch(56% 0.13 80);
  --danger:      oklch(52% 0.18 25);
  --accent-soft:        oklch(94% 0.04 143);
  --accent-soft-border: oklch(78% 0.09 143);
  --accent-border:      oklch(74% 0.08 143);
  --danger-soft:        oklch(95% 0.035 25);
  --danger-border:      oklch(82% 0.10 25);
}

/* ---- Theme Toggle ---- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
/* Dark theme offers the sun (switch to light); light theme offers the moon. */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.theme-toggle-fixed { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 100; }

/* ---- Movie Card ---- */
.movie-card {
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.2s;
}

.movie-card:hover {
  transform: translateY(-3px);
  border-color: oklch(28% 0.055 143);
}

.movie-poster {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
  background: var(--surface-hi);
}

.movie-info {
  padding: 0.65rem 0.7rem 0.7rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
}

.meta {
  font-size: 0.7rem;
  color: var(--text-2);
}

.rating {
  font-size: 0.75rem;
  color: var(--gold);
  font-weight: 600;
}

.reason {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--text-3);
  line-height: 1.4;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.streaming-sec {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.platform {
  display: inline-block;
  font-size: 0.62rem;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}

.unavailable-note {
  font-size: 0.65rem;
  color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}