/* ---------- Base / variables ---------- */
:root {
  --bg: #ffffff;
  --fg: #0f172a;             /* slate-900 */
  --muted: #334155;          /* slate-700 */
  --border: #e5e7eb;         /* slate-200 */
  --card-bg: #ffffff;
  --link: #0a58ca;           /* accessible blue */
  --link-visited: #6f42c1;
  --focus: #ffab00;          /* amber for high-contrast ring */
  --accent: #f1f5f9;         /* slate-100 */
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue",
        Noto Sans, "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji";
}

/* ---------- Links: distinguishable and accessible ---------- */
a {
  color: var(--link);
  text-decoration: underline;             /* fixes “links rely on color” */
  text-underline-offset: 2px;
}
a:visited { color: var(--link-visited); }
a:hover, a:focus { text-decoration-thickness: 2px; }

/* Visible focus for all interactive elements */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ---------- Layout ---------- */
main { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: center;
  margin-bottom: 1rem;
  background: var(--bg);
  color: var(--fg);
}
.toolbar input[type="search"],
.toolbar select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .5rem .75rem;
  min-width: 240px;
}
.counter { margin-left: auto; }

.shows-grid, .episode-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

/* Cards */
.show-card, .episode-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}
.show-card h2,
.episode-card h3 {
  margin: 0 0 .5rem 0;
  font-size: 1.05rem;
}

/* Image area: avoid CLS with a fixed aspect ratio box */
.show-card img, .episode-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 210 / 295; /* TVMaze medium is typically 210x295 */
  object-fit: cover;
  border-radius: 8px;
}

/* Back nav */
.nav-back { margin: .5rem 0 1rem; }

/* Alerts / helpers */
.help-text { color: var(--muted); margin: 0; font-size: .875rem; }
.no-js {
  margin: 1rem 0;
  padding: .75rem 1rem;
  background: #fff3cd;
  color: #664d03;
  border: 1px solid #ffecb5;
  border-radius: 8px;
}

/* Screen-reader only utility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Optional intro animation minimal guard */
.intro-animation { pointer-events: none; }

/* Small devices */
@media (max-width: 480px) {
  .counter { width: 100%; order: 3; margin-left: 0; }
}