/* 動画プレイヤー・サンプル・PDF・計測ページ。持ち主: S4。スマホ優先。色は原本に寄せた仮（ヘッダー #7a0000・ボタン赤） */
:root {
  --pl-red: #c00000;
  --pl-red-dark: #7a0000;
  --pl-ink: #222;
  --pl-muted: #666;
  --pl-line: #e3e3e3;
  --pl-bg-soft: #f6f6f6;
}

/* ---- 再生画面（共通） ---- */
.player-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.player-stage__poster,
.player-stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.player-stage__video { object-fit: contain; }
.player-stage__poster[hidden],
.player-stage__video[hidden],
.player-stage__play[hidden] { display: none; }
.player-stage__poster { cursor: pointer; }
.player-stage__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border: 0;
  border-radius: 50%;
  background: var(--pl-red);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.player-stage__play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.player-stage__play-icon {
  display: block;
  width: 0;
  height: 0;
  margin-left: 26px;
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
}
.player-stage__status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}
.player-stage__status:empty { display: none; }
.player-stage__status[data-kind="error"] { background: rgba(122, 0, 0, 0.88); }
.player-stage.is-busy .player-stage__status::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: bt-spin 0.8s linear infinite;
}
@keyframes bt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .player-stage.is-busy .player-stage__status::before { animation: none; }
}

/* ---- サンプル ---- */
.sample-player { margin: 0; }
.sample-player__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 8px 2px 0;
  color: var(--pl-ink);
}
.sample-player__badge {
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--pl-red);
  border-radius: 999px;
}
.sample-player__title { font-weight: 700; }
.sample-player__note { font-size: 13px; color: var(--pl-muted); }

/* ---- マイページのプレイヤー ---- */
.player { display: grid; gap: 12px; color: var(--pl-ink); }
.player__heading { margin: 0; font-size: 20px; }
.player__empty { margin: 0; padding: 16px; background: var(--pl-bg-soft); border-radius: 8px; }
.player__lessons { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.player__lesson {
  flex: 0 0 auto;
  padding: 8px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--pl-ink);
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: 999px;
  cursor: pointer;
}
.player__lesson[aria-pressed="true"] { color: #fff; background: var(--pl-red-dark); border-color: var(--pl-red-dark); }
.player__current { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0; font-weight: 700; }
.player__expires { font-weight: 400; font-size: 13px; color: var(--pl-muted); }

.player__slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) {
  .player__slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.player__slot {
  display: grid;
  width: 100%;
  gap: 2px;
  padding: 0 0 6px;
  font: inherit;
  text-align: left;
  color: var(--pl-ink);
  background: #fff;
  border: 2px solid var(--pl-line);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}
.player__slot:disabled { cursor: default; opacity: 0.6; }
.player__slot.is-selected { border-color: var(--pl-red); }
.player__slot:focus-visible { outline: 3px solid var(--pl-red-dark); outline-offset: 2px; }
.player__slot-thumb { display: block; aspect-ratio: 16 / 9; background: var(--pl-bg-soft); }
.player__slot-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.player__slot-thumb img[hidden] { display: none; }
.player__slot-label { padding: 0 8px; font-size: 14px; font-weight: 700; }
.player__slot-style { padding: 0 8px; font-size: 12px; color: var(--pl-muted); }
.player__slot-badge {
  justify-self: start;
  margin: 0 8px;
  padding: 1px 6px;
  font-size: 11px;
  color: #fff;
  background: var(--pl-muted);
  border-radius: 4px;
}
.player__slot-badge[hidden] { display: none; }

/* ---- PDF ---- */
.pdf-viewer { display: grid; gap: 8px; }
.pdf-viewer__heading { margin: 8px 0 0; font-size: 17px; }
.pdf-viewer__status { margin: 0; font-size: 14px; color: var(--pl-muted); }
.pdf-viewer__status[hidden],
.pdf-viewer__item[hidden] { display: none; }
.pdf-viewer__grid { display: grid; gap: 12px; }
@media (min-width: 960px) {
  .pdf-viewer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pdf-viewer__item { margin: 0; }
.pdf-viewer__caption { display: flex; justify-content: space-between; gap: 8px; padding: 0 0 4px; font-size: 14px; }
.pdf-viewer__open { color: var(--pl-red-dark); }
.pdf-viewer__frame {
  display: block;
  width: 100%;
  height: 70vh;
  min-height: 420px;
  border: 1px solid var(--pl-line);
  border-radius: 6px;
  background: var(--pl-bg-soft);
}

/* ---- /dev/video-bench（staging のみ） ---- */
.bench { margin: 0; font-family: system-ui, sans-serif; color: var(--pl-ink); }
.bench__main { display: grid; gap: 12px; max-width: 960px; margin: 0 auto; padding: 16px; }
.bench__form { display: grid; gap: 8px; }
.bench__form label { display: grid; gap: 4px; }
.bench__form fieldset label { display: inline-flex; gap: 4px; margin-right: 12px; }
.bench__video { width: 100%; max-width: 640px; background: #000; }
.bench__warn { margin: 0; padding: 8px 12px; border-left: 4px solid #c2410c; background: #fff7ed; color: #7c2d12; }
.bench__flags,
.bench__out { max-height: 50vh; overflow: auto; padding: 8px; font-size: 12px; background: var(--pl-bg-soft); border-radius: 6px; }