/* OnlyShows 0.9.0: compact mobile layout, list view and changelog. */
.profile-identity > div {
  align-items: end;
}

.profile-identity input,
.profile-identity #saveProfile {
  box-sizing: border-box;
  height: 48px;
}

.profile-identity #saveProfile {
  align-self: end;
  padding-inline: 20px;
}

.theme-options {
  gap: 10px;
}

.theme-options button {
  min-height: 86px;
  padding: 10px 8px;
  gap: 7px;
}

.theme-options i {
  width: 36px !important;
  height: 36px !important;
}

.card-view-toggle {
  display: none;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  background: var(--surface-container-low);
  color: var(--on-surface);
  align-items: center;
  justify-content: center;
  font: 650 12px/1 var(--font-ui);
  cursor: pointer;
}

.card-view-toggle .material-symbols-rounded {
  font-size: 19px;
}

.updates-summary {
  margin: 2px 0 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--primary-container);
  color: var(--on-primary-container);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.updates-summary strong {
  font-size: 15px;
}

.updates-summary span {
  color: var(--on-surface-variant);
  font-size: 12px;
}

.updates-list {
  display: grid;
  gap: 12px;
  padding-bottom: 8px;
}

.update-entry {
  padding: 17px 18px;
  border-radius: 20px;
  background: var(--surface-container-low);
}

.update-entry header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.update-entry h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
}

.update-entry time {
  display: block;
  margin-top: 4px;
  color: var(--on-surface-variant);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.update-version {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  font-size: 11px;
  font-weight: 750;
}

.update-entry ul {
  margin: 13px 0 0;
  padding-left: 20px;
  color: var(--on-surface-variant);
  font-size: 13px;
  line-height: 1.65;
}

.update-entry li::marker {
  color: var(--primary);
}

@media (max-width: 719px) {
  .hero {
    padding: 22px 0 18px !important;
  }

  .hero h1 {
    font-size: clamp(34px, 10vw, 44px) !important;
    line-height: 1.08 !important;
  }

  .stats {
    margin-top: 15px !important;
    gap: 7px !important;
  }

  .stats > div {
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 9px !important;
    border-radius: 14px !important;
  }

  .stats strong {
    font-size: 22px !important;
  }

  .stats span {
    font-size: 10px !important;
  }

  .more-data-button {
    height: 36px !important;
    margin-top: 10px !important;
  }

  .controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px !important;
    margin-bottom: 12px !important;
  }

  .search {
    grid-column: 1;
    order: 1 !important;
    width: auto !important;
    height: 44px !important;
  }

  .card-view-toggle {
    display: inline-flex;
    grid-column: 2;
    order: 1;
    height: 44px;
    padding: 0 11px;
    gap: 5px;
  }

  .tabs {
    grid-column: 1 / -1;
    order: 2 !important;
  }

  .search-scope {
    grid-column: 1 / -1;
    order: 3 !important;
  }

  .show-grid.mobile-list-view {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .mobile-list-view .show-card {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr);
    min-height: 142px;
    overflow: hidden;
  }

  .mobile-list-view .poster-frame {
    grid-column: 1;
    grid-row: 1;
    min-height: 142px;
    height: 100%;
    aspect-ratio: auto !important;
    border-radius: 17px 0 0 17px !important;
  }

  .mobile-list-view .poster,
  .mobile-list-view .poster-placeholder {
    width: 100%;
    height: 100% !important;
    min-height: 142px;
    object-fit: cover;
    border-radius: 17px 0 0 17px !important;
  }

  .mobile-list-view .card-content {
    grid-column: 2;
    grid-row: 1;
    min-height: 142px;
    padding: 12px 13px !important;
    display: flex;
    flex-direction: column;
  }

  .mobile-list-view .card-episode-row {
    flex: 1;
  }

  .mobile-list-view .progress-row,
  .mobile-list-view .upcoming-air-date {
    margin-top: auto !important;
  }

  .profile-identity > div {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 8px !important;
  }

  .profile-identity label {
    grid-column: 1 / -1 !important;
  }

  .profile-identity input {
    width: 100%;
    min-width: 0;
  }

  .profile-identity #saveProfile {
    width: auto !important;
    min-width: 92px;
    height: 48px !important;
    padding: 0 14px !important;
  }

  .profile-stats {
    grid-auto-rows: 94px !important;
    gap: 8px !important;
  }

  .profile-stat {
    height: 94px !important;
    min-height: 94px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    gap: 2px !important;
  }

  .profile-stat strong {
    font-size: clamp(23px, 6.2vw, 29px) !important;
  }

  .profile-stat span {
    min-height: 0 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .theme-options {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .theme-options button {
    min-height: 76px !important;
    padding: 7px 3px !important;
    border-radius: 15px !important;
  }

  .theme-options i {
    width: 30px !important;
    height: 30px !important;
  }

  .theme-options span {
    font-size: 11px !important;
  }

  .updates-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .update-entry {
    padding: 15px;
  }
}