body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 0 1rem 2rem;
  color: #222;
  background: #fafafa;
}

/* Browsers don't inherit color/font into form controls by default — every <button> here
   was relying on the browser's own native default text color instead. That default is
   usually dark and unremarkable, which is why this went unnoticed on desktop testing
   (including automated WebKit runs against real iPad/iPhone device profiles), but real
   device Safari can resolve it differently depending on the device's own accessibility/
   appearance state, which produced a genuinely invisible (white-on-white) "Log in"
   button on a real iPad and iPhone. Setting it explicitly removes that dependency. */
button {
  font: inherit;
  color: inherit;
}

header,
footer {
  text-align: center;
  padding: 1rem 0;
}

.attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 700px;
  margin: 0.5rem auto 0;
  font-size: 0.8rem;
  color: #595959;
}

.tmdb-logo {
  height: 14px;
  width: auto;
}

nav {
  max-width: 1200px;
  margin: 0 auto 1rem;
  padding: 0 0.5rem;
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.nav-link {
  background: none;
  border: none;
  font: inherit;
  color: #2563eb;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.25rem;
}

/* A button that reads as an inline text link — same look as .nav-link, but for actions
   embedded inside a form (e.g. "Forgot password?") rather than top-level navigation. */
.link-button {
  background: none;
  border: none;
  font-size: 0.85rem;
  color: #2563eb;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.25rem;
}

.account-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* :not([hidden]) rather than a plain selector — otherwise this display:flex would
   override the [hidden] attribute's own display:none and show both states at once.
   flex-wrap: wrap — without it, the email/password inputs and button don't shrink
   below their natural width on a narrow phone screen, so the row overflows the
   viewport and the button gets clipped down to an unreadable sliver. */
.login-form:not([hidden]),
.account-info:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.login-form input {
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.account-area button {
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
  cursor: pointer;
}

#account-email {
  font-size: 0.85rem;
  font-weight: bold;
  color: #444;
}

#data-status-message {
  max-width: 1200px;
  margin: 0.5rem auto 0;
  font-size: 0.85rem;
  color: #444;
}

#data-status-message:empty {
  display: none;
}

#back-to-shows-link {
  display: inline-block;
}

.show-title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto 1rem;
  padding: 0 0.5rem;
}

#current-show-name {
  margin: 0;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto 1.5rem;
  padding: 0 0.5rem;
}

.control {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.control label,
.control-label {
  font-size: 0.85rem;
  font-weight: bold;
}

.favourites-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto 1rem;
  padding: 0 0.5rem;
}

#account-view,
#reset-password-view {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 0.5rem;
  text-align: center;
}

#reset-password-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 0.75rem;
}

.account-view-hint {
  font-size: 0.85rem;
  color: #595959;
  text-align: left;
  margin: 0.5rem 0;
}

.account-danger-zone {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: left;
}

.account-danger-zone h3 {
  margin-top: 0;
}

.my-services-panel {
  max-width: 1200px;
  margin: 0 auto 1.5rem;
  padding: 0.5rem 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: left;
}

.my-services-panel summary {
  cursor: pointer;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 0.25rem 0;
}

.my-services-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 0.5rem;
  max-height: 220px;
  overflow-y: auto;
}

.service-checkbox {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

.control input,
.control select {
  padding: 0.4rem;
  font-size: 1rem;
}

.checkbox-control {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: normal;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
}

.checkbox-control input {
  padding: 0;
  width: auto;
}

#match-count,
#show-match-count {
  margin: 0;
  color: #444;
}

#status-message,
#shows-status-message {
  text-align: center;
  font-size: 1.1rem;
  color: #444;
}

#status-message:empty,
#shows-status-message:empty {
  display: none;
}

.shows-cache-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  max-width: 1200px;
  margin: 0 auto 1rem;
  padding: 0 0.5rem;
}

#shows-background-status {
  font-size: 0.8rem;
  color: #595959;
  text-align: center;
}

#shows-background-status:empty,
#availability-background-status:empty {
  display: none;
}

#availability-background-status {
  font-size: 0.8rem;
  color: #595959;
  text-align: center;
}

.load-shows-controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

#load-more-shows-btn:not([hidden]),
#load-all-shows-btn:not([hidden]) {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Secondary styling — "Load more" is the default/expected action, "Load all" is the
   more surprising one (renders everything remaining at once), so it reads as optional. */
#load-all-shows-btn:not([hidden]) {
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #444;
}

.episode-card:focus,
.show-card:focus,
#current-show-name:focus {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

#root {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Roughly half the size of the episode cards above — favourite cards were hard to see
   on a smaller display, and both lists read fine denser without needing a separate
   compact mode. The Shows grid gets the same treatment since it's usually showing far
   more cards on screen at once than Favourites. */
#shows-root,
.favourites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  max-width: 1200px;
  margin: 0 auto;
}

.favourites-grid .favourite-card {
  padding: 0.5rem;
  gap: 0.35rem;
}

.favourites-grid .show-image {
  height: 110px;
  object-fit: cover;
}

.favourites-grid .favourite-card h3,
.favourites-grid .favourite-streaming-on,
.favourites-grid .favourite-next-episode,
.favourites-grid .favourite-new-episode-badge {
  font-size: 0.75rem;
}

.favourites-grid .favourite-actions {
  flex-direction: column;
  gap: 0.25rem;
}

.favourites-grid .favourite-actions button {
  font-size: 0.7rem;
  padding: 0.3rem 0.4rem;
  width: 100%;
}

#shows-root .show-card {
  padding: 0.5rem;
  gap: 0.35rem;
}

#shows-root .show-card-header {
  margin-bottom: 0.25rem;
}

#shows-root .show-image {
  height: 110px;
  object-fit: cover;
}

#shows-root .show-card h2,
#shows-root .show-genres,
#shows-root .show-meta,
#shows-root .show-summary {
  font-size: 0.75rem;
}

#shows-root .show-meta {
  gap: 0.25rem 0.5rem;
  margin: 0.25rem 0;
}

#shows-root .favourite-toggle {
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
}

/* Without a clamp, a full synopsis at this card width would dwarf the rest of the
   card and make row heights wildly inconsistent across a dense grid. The "Show more"
   toggle below lifts the clamp on demand rather than losing the text entirely. */
/* Deliberately only the vendor-prefixed line-clamp technique here (no standard
   `line-clamp` alongside it) — pairing both on the same rule causes the two clamping
   mechanisms to visibly conflict (overlapping, doubled-up text) in current Chromium. */
#shows-root .show-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#shows-root .show-summary.expanded {
  display: block;
  overflow: visible;
}

#shows-root .show-summary-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  color: #2563eb;
  text-decoration: underline;
  cursor: pointer;
}

.favourites-group {
  max-width: 1200px;
  margin: 0 auto 2rem;
}

.favourites-group h3 {
  padding: 0 0.5rem;
}

.favourites-group-empty {
  padding: 0 0.5rem;
  color: #595959;
  font-size: 0.9rem;
}

.favourites-group-empty:empty {
  display: none;
}

.episode-card,
.show-card,
.favourite-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  background: white;
  display: flex;
  flex-direction: column;
}

.show-card.unconfirmed-availability,
.favourite-card.unconfirmed-availability {
  background: #fffbeb;
  border-color: #f59e0b;
}

.show-card.unconfirmed-availability .show-network,
.favourite-card.unconfirmed-availability .favourite-streaming-on {
  color: #92400e;
}

.episode-card.watched {
  background: #f0f4ff;
  border-color: #93c5fd;
}

.episode-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.watched-toggle,
.select-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
}

.bulk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  max-width: 1200px;
  margin: 0 auto 1rem;
  padding: 0 0.5rem;
}

.bulk-actions button {
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.bulk-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#episode-selection-count {
  font-size: 0.85rem;
  color: #444;
}

.episode-card.selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px #2563eb;
}

.episode-card h3 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}

.episode-code {
  font-weight: normal;
  color: #666;
}

.episode-image,
.show-image {
  width: 100%;
  border-radius: 4px;
}

.episode-summary,
.show-summary {
  font-size: 0.9rem;
  flex-grow: 1;
}

.episode-link {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.show-card h2,
.favourite-card h3 {
  font-size: 1.1rem;
  margin: 0;
}

.show-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.show-name-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: bold;
  color: #2563eb;
  text-decoration: underline;
  cursor: pointer;
}

.favourite-toggle {
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.favourite-toggle[aria-pressed="true"] {
  background: #fef3c7;
  border-color: #f59e0b;
}

.favourite-card .favourite-streaming-on {
  font-size: 0.85rem;
  color: #444;
  margin: 0;
}

.favourite-new-episode-badge {
  margin: 0;
  font-size: 0.85rem;
  font-weight: bold;
  color: #7c3aed;
}

.favourite-card .favourite-next-episode {
  font-size: 0.9rem;
  flex-grow: 1;
}

.favourite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.favourite-actions button {
  padding: 0.4rem 0.6rem;
  cursor: pointer;
}

.now-watching-toggle {
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.now-watching-toggle[aria-pressed="true"] {
  background: #dcfce7;
  border-color: #16a34a;
  color: #15803d;
  font-weight: bold;
}

.favourite-card.now-watching {
  background: #f0fdf4;
  border-color: #16a34a;
  box-shadow: 0 0 0 1px #16a34a;
}

.show-genres {
  font-size: 0.85rem;
  color: #666;
  margin: 0.25rem 0;
}

.show-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
  margin: 0.5rem 0;
}

.show-meta div {
  display: flex;
  flex-direction: column;
}

.show-meta dt {
  font-weight: bold;
  color: #444;
}

.show-meta dd {
  margin: 0;
}