.ap,
.ap-transcript {
  color: var(--ink);
  font-family: var(--font-sans);
  font-style: normal;
}

.ap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.ap-stage {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 10.67;
  overflow: hidden;
  border-radius: var(--radius-8);
  background: var(--paper);
}

.ap-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--paper);
}

.ap-message {
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  padding: 16px;
  color: var(--ink-strong);
  background: var(--surface);
}

.ap-chapters,
.ap-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.ap-chapters li + li {
  border-top: 1px solid var(--rule);
}

.ap-chapters button,
.ap-line,
.ap-current {
  box-sizing: border-box;
  font: inherit;
  font-style: normal;
  color: var(--ink);
  cursor: pointer;
}

.ap-chapters button {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: var(--surface);
  text-align: left;
  font-size: var(--fs-caption);   /* チャプター札。再生面の脇で本文より一段小さく */
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.ap-chapters button[aria-current="true"] {
  border-left-color: var(--accent);
  background: var(--surface-2);
}

.ap-ts {
  color: var(--ink-mute);
  font-family: var(--font-en), sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ap-transcript {
  margin-block: 32px;
}

.ap-search {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-4);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-style: normal;
}

.ap-search::placeholder {
  color: var(--ink-soft);
}

.ap-count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
  font-size: var(--fs-caption);
}

.ap-current {
  padding: 5px 10px;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-4);
  background: var(--surface);
  font-size: var(--fs-caption);
}

.ap-current:disabled {
  color: var(--ink-mute);
  cursor: default;
}

.ap-lines {
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  border-block: 1px solid var(--rule);
}

.ap-lines li[hidden] {
  display: none;
}

.ap-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  font-size: var(--fs-body);
  line-height: 1.9;
}

.ap-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ap-line.is-now {
  background: var(--accent-muted);
}

.ap-line mark {
  background: transparent;
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
}

.ap button:focus-visible,
.ap-video:focus-visible,
.ap-transcript button:focus-visible,
.ap-search:focus-visible,
.ap-seek:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

@media (hover: hover) {
  .ap-chapters button:hover,
  .ap-current:not(:disabled):hover {
    background: var(--surface-2);
  }

  .ap-line:not(.is-now):hover {
    background: var(--surface-2);
  }
}

@media (min-width: 1101px) {
  .ap {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

@media (max-width: 640px) {
  .ap-chapters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-block: 4px;
  }

  .ap-chapters li {
    flex: 0 0 auto;
    max-width: 260px;
  }

  .ap-chapters li + li {
    border-top: 0;
  }

  .ap-chapters button {
    height: 100%;
    grid-template-columns: auto;
    gap: 2px;
    border-radius: var(--radius-4);
  }

  .ap-line {
    gap: 8px;
    padding-inline: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap,
  .ap *,
  .ap-transcript,
  .ap-transcript *,
  .ap-seek {
    scroll-behavior: auto;
    animation: none;
    transition: none;
  }
}

/* desktop: the chapter list never runs past the video; it scrolls inside instead */
@media (min-width: 1101px) {
  .ap { align-items: stretch; }
  .ap-chapters { height: 0; min-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
}

/* search clear button in the site's ink instead of the browser's default blue */
.ap-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  cursor: pointer;
  background: var(--ink-soft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 字幕: ページ側で描く（.ap-cap）。書体はサイトと同じ Noto Sans JP、色は answer-warm-dark の本文色、地は暖黒の半透明。
   ブラウザ既定の字幕は OS の書体で、再生面の幅に対して大きすぎ、スライドの文字にかぶっていた（2026-10-20 西村さん指示）。
   全画面ではページの要素が見えないので、ブラウザの字幕（::cue）に戻す。そのときも書体と色だけはそろえる */
.ap-stage{container-type:inline-size;}
.ap-cap{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);z-index:2;max-width:86%;width:max-content;pointer-events:none;
  padding:.28em .7em;border-radius:var(--radius-4,4px);background:rgba(14,13,12,.78);color:#F2EFE9;
  font-family:var(--font-sans);font-weight:500;font-size:clamp(13px,2.3cqi,22px);line-height:1.6;letter-spacing:.02em;text-align:center;word-break:normal;
  opacity:0;transition:opacity .12s linear;}
.ap-cap.on{opacity:1;}
.ap-cap[hidden]{display:none;}
@media (prefers-reduced-motion:reduce){.ap-cap{transition:none;}}
.ap-video::cue{font-family:"Noto Sans JP","Noto Sans JP Fallback","Hiragino Sans",sans-serif;font-weight:500;color:#F2EFE9;background-color:rgba(14,13,12,.78);}