:root {
  --media-control-height: 42px;
  --media-control-radius: 12px;
}

.media-switcher {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(48px, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--field);
}

.media-switcher a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.media-switcher a:hover {
  color: var(--accent);
}

.media-switcher a.is-active {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 24%, transparent);
}

/* 电影页和图书页与剧集页同构，同一批窄屏问题也照样存在（真机截图确认）：
   标题被状态栏压住、「添加电影」被断成「添加电 / 影」、标题区吃掉大半个首屏。
   这两页不加载 styles-mobile.css，所以修复放在两页共用的这里。 */
@media (max-width: 760px) {
  /* 两页的 HTML 都写了 viewport-fit=cover，页面会铺到刘海下面，
     但都没有留顶部安全区，标题会被状态栏压住。 */
  body {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* 首屏要先出现内容。「个人观影档案」这类眉标每次打开都看一遍没有价值，
     标题也不需要占到 40px 以上。 */
  .movie-header .eyebrow,
  .book-header .eyebrow {
    display: none;
  }

  .movie-header h1,
  .book-header h1 {
    font-size: 22px;
  }

  /* 「添加电影」在 320px 下会被断成「添加电 / 影」。按钮文字一律不折行，
     宽度不够就让它自己收缩内边距，而不是把词拆开。 */
  .movie-header-actions button,
  .book-header-actions button,
  .movie-header-actions .primary-button,
  .book-header-actions .primary-button {
    white-space: nowrap;
  }
}