/*
 * 責務：レビューページの見た目
 * 動作：PC とスマホの横持ちでは、左に動画、右にコメントのパネル、その下に再生操作と道具、最下段にタイムラインを並べる。
 *       スマホの縦持ちでは動画を上に固定して、その下に再生操作・道具・タイムライン・コメントのパネルを縦に流す。
 *       配色は端末のライト・ダーク設定に従う。
 */

:root {
  color-scheme: light dark;
  --background: #ffffff;
  --panel: #f2f2f2;
  --field: #ffffff;
  --text: #000000;
  --muted: #9a9a9a;
  /* タイムラインの目盛りの線と、目盛りの文字・帯のつまみ */
  --tick: #cccccc;
  --tick-label: #b3b3b3;
  --accent: #2f6fde;
  --active: #d0e4fb;
  /* 動画の下端の進み具合の線（再生済みと残り）と、タイムラインの再生位置の線 */
  --progress: #50a1f5;
  --progress-rest: #d2d2d2;
  --playhead: #91c5fb;
  /* 図形の線の色 */
  --ink: #ff3b30;
  /* 動画の上に出すラベルの地の色 */
  --label: #c8392b;
  /* 選択中の図形に重ねる枠とつまみの色 */
  --selection: #4f80ff;
  /* 動画以外（上下の余白、再生操作、タイムライン）に確保する高さ。動画が画面の縦に収まるよう幅の上限を決めるのに使う */
  --reserved: 110px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #121316;
    --panel: #1f2126;
    --field: #121316;
    --text: #ececec;
    --muted: #8a8f98;
    --tick: #4a4e57;
    --tick-label: #6f747d;
    --accent: #6ea0ff;
    --active: #24406b;
    --progress: #50a1f5;
    --progress-rest: #3a3d44;
    --playhead: #4f8fd6;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--background);
}

[hidden] {
  display: none !important;
}

button,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
}

/* アイコンの塗りと線は icons.svg の側で決まっていて、ここでは大きさだけを決める */
.icon {
  display: block;
  width: 20px;
  height: 20px;
}

button.round {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
}

@media (pointer: coarse) {
  button.round {
    width: 44px;
    height: 44px;
  }
}

button.round[aria-pressed="true"] {
  background: var(--text);
  color: var(--background);
}

/* 保存できていないときの知らせ。見落とさないよう、画面の上端に帯で出す */

.save-banner {
  margin: 0;
  padding: 10px 24px;
  background: var(--ink);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
}

/* 全体の並び。画面の高さちょうどに収め、ページ全体はスクロールさせない */

body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* スマホの縦持ち。上から順に積み、残った高さはコメントのパネルが使う。中身が多いときはパネルの中でスクロールさせる。
   見るだけのとき：動画、コメントの一覧、タイムライン、再生ボタン。
   編集できるとき：動画、再生ボタン、タイムライン、コメントの入力欄、道具。 */

.editor {
  /* 左右の余白。ノッチのある端末では、その内側まで下げる */
  --side-left: max(12px, env(safe-area-inset-left));
  --side-right: max(12px, env(safe-area-inset-right));
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px var(--side-right) 8px var(--side-left);
}

/* 動画は、左右の余白を打ち消して、画面の端から端まで広げる */
.viewer {
  flex: none;
  margin-left: calc(-1 * var(--side-left));
  margin-right: calc(-1 * var(--side-right));
}

.panel {
  order: 1;
  flex: 1;
  min-height: 72px;
  overflow-y: auto;
  /* 一覧の項目の位置（offsetTop）を、このパネルの中での位置として測れるようにする */
  position: relative;
}

.timeline {
  order: 2;
  flex: none;
  max-height: 26dvh;
  overflow-y: auto;
}

.transport {
  order: 3;
}

body.is-writable .transport {
  order: 1;
}

body.is-writable .panel {
  order: 3;
  margin-top: 8px;
}

.tools {
  order: 4;
}

/* 動画 */

.stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000000;
}

.stage {
  overflow: hidden;
  /* 中に置くものの大きさを、動画の幅に対する比率（cqw）で決められるようにする */
  container-type: inline-size;
}

.stage iframe,
.surface,
.surface svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 再生が始まった後は、YouTube が止めている間に映像へ重ねる表示のうち、題名・ロゴ・共有ボタンを見えなくする。
   埋め込みの設定にはこれらを消す項目が無く、プレーヤーの中身にはこのページの CSS が届かないので、プレーヤーの置き方で対処する。
   プレーヤーの高さを動画の 3 倍にして、上下にはみ出たぶんを切り落とす。題名は上端、ロゴと共有ボタンは下端に出るので見えなくなり、
   映像はプレーヤーの中央に元の大きさのまま置かれるので欠けない。
   中央の再生マークは映像の真ん中に出るため、この方法では切り落とせず、そのまま表示される。
   再生前のサムネイルはプレーヤー全体に引き伸ばされるため、再生が始まるまでは元の大きさのままにする */
.stage.is-started iframe {
  top: -100%;
  height: 300%;
}

/* 再生が始まるまでは YouTube 側の再生ボタンを直接押せるよう、上に重ねた面で操作を奪わない。
   スマホのブラウザは、最初の再生を動画自体へのタップでしか始めさせないため */
.surface {
  pointer-events: none;
  cursor: pointer;
  user-select: none;
}

.stage.is-started .surface,
.surface.is-drawing {
  pointer-events: auto;
}

.surface.is-drawing {
  cursor: crosshair;
  touch-action: none;
}

.surface svg {
  pointer-events: none;
}

/* 線の図形は、明るい床の上でも見分けられるよう影を付ける。地を持つラベルと、選択中の枠・つまみには付けない */
.surface svg > :not(.label):not(.selection) {
  filter: drop-shadow(0 0 3px rgb(0 0 0 / 0.7));
}

.surface path,
.surface polyline,
.surface rect,
.surface ellipse {
  fill: none;
  stroke: var(--ink);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.surface polygon {
  fill: var(--ink);
}

/* 選択中の図形に重ねる枠とつまみ。動画の表示の大きさにかかわらず、線は画面上で 1 ピクセルの太さにする */
.surface .selection-line {
  fill: none;
  stroke: var(--selection);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.surface .grip {
  fill: #ffffff;
  stroke: var(--selection);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

/* 動画の上に出すラベル（角丸の地に白い文字）。大きさは SVG の座標系（縦 900）での値 */
.surface .label rect {
  fill: var(--label);
  stroke: none;
}

.surface .label text {
  fill: #ffffff;
  font-size: 22px;
  font-weight: 600;
}

/* 文字を編集中のラベルは、上に重ねた入力欄が代わりに見えるので隠す */
.surface .is-editing {
  visibility: hidden;
}

/* ラベルの文字を動画の上で編集するための入力欄。ラベルと同じ見た目・同じ大きさになるよう、
   寸法は動画の幅に対する比率で決める。SVG の座標系は横 1600 なので、その 1 は動画の幅の 0.0625%（0.0625cqw）に当たる */
.label-editor {
  position: absolute;
  padding: calc(7 * 0.0625cqw) calc(13 * 0.0625cqw);
  border-radius: calc(8 * 0.0625cqw);
  background: var(--label);
  color: #ffffff;
  font-size: calc(22 * 0.0625cqw);
  font-weight: 600;
  line-height: 1.3;
  white-space: pre;
  outline: 2px solid #ffffff;
  cursor: text;
  user-select: text;
  pointer-events: auto;
}

/* 選択中の図形が表示されている間は、動画の上のドラッグでその図形を動かせる */
.surface.is-movable {
  pointer-events: auto;
  cursor: move;
  touch-action: none;
}

/* 表示区間に入った図形は、フェードで現れる */
.surface .is-entering {
  animation: shape-enter 0.15s ease-out;
}

@keyframes shape-enter {
  from {
    opacity: 0;
  }
}

.stage-message {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 16px;
  color: #ffffff;
  background: rgb(0 0 0 / 0.8);
  text-align: center;
}

/* 動画の下端の進み具合の線。線そのものは細くし、その下に見えない余白を取って押しやすい高さにする */
.progress {
  height: 12px;
  margin-bottom: -10px;
  padding-bottom: 10px;
  background: var(--progress-rest);
  background-clip: content-box;
  cursor: pointer;
  touch-action: none;
}

.progress-fill {
  width: 0;
  height: 2px;
  background: var(--progress);
}

/* 再生操作。スマホの縦持ちでは、ボタンだけを中央に置く。時刻はタイムラインの目盛りで分かるので出さない */
.transport {
  display: flex;
  justify-content: center;
  padding-bottom: 12px;
}

.time {
  display: none;
  margin-top: 8px;
  font-size: 10px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.time:last-child {
  text-align: right;
}

.transport-buttons {
  display: flex;
  align-items: center;
  gap: 36px;
  padding-top: 17px;
}

button.play {
  padding: 0;
  background: none;
}

button.play .icon {
  width: 28px;
  height: 28px;
}

/* 道具 */

.tools {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 17px;
  padding: 10px 0;
}

/* コメントのパネル */

.panel {
  padding: 16px;
  border-radius: 16px;
  background: var(--panel);
}

.inspector {
  display: grid;
  gap: 14px;
}

.field {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}

.field .icon {
  margin-top: 8px;
}

.field textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--field);
  resize: vertical;
}

.comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.comment {
  border-radius: 10px;
}

.comment.is-active {
  background: var(--active);
}

.comment-jump {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  width: 100%;
  padding: 10px;
  background: none;
  text-align: left;
}

.comment-time {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.comment-title {
  font-size: 16px;
}

.comment-detail {
  grid-column: 2;
  color: var(--muted);
  font-size: 13px;
  white-space: pre-wrap;
}

.empty {
  margin: 0;
  color: var(--muted);
}

/* スマホの縦持ちで見るだけのとき（body に is-compact が付き、is-writable が付いていないとき）の一覧。
   地の無い一覧にして、始まったコメントを濃く、これからのコメントを薄く出す。濃さはフェードで切り替える。
   一覧は再生に合わせて送られるので、上下の端はぼかして、流れていく項目が切れて見えないようにする */

body.is-compact:not(.is-writable) .panel {
  padding: 0;
  border-radius: 0;
  background: none;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000000 28px, #000000 calc(100% - 72px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000000 28px, #000000 calc(100% - 72px), transparent 100%);
}

/* 最後のコメントも先頭まで送れるよう、一覧の下に余白を取る */
body.is-compact:not(.is-writable) .comment-list {
  padding: 24px 0 40dvh;
}

body.is-compact:not(.is-writable) .comment {
  opacity: 0.3;
  transition: opacity 0.4s;
}

body.is-compact:not(.is-writable) .comment.is-started {
  opacity: 1;
}

body.is-compact:not(.is-writable) .comment.is-active {
  background: none;
}

body.is-compact:not(.is-writable) .comment-jump {
  column-gap: 16px;
  padding: 12px 4px;
}

body.is-compact:not(.is-writable) .comment-time {
  color: var(--progress);
}

/* タイムライン */

.timeline-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.timeline-content {
  position: relative;
  min-height: 150px;
}

/* スクロールで送り戻しする方式（スマホの縦持ち）。再生位置の線を画面の中央に固定し、タイムラインのほうを動かす。
   動画の先頭と末尾も中央の線まで持って来られるよう、中身の左右に、表示幅の半分ずつの余白を足す */
.timeline.is-scroll-seek .timeline-scroll {
  container-type: inline-size;
  scrollbar-width: none;
}

.timeline.is-scroll-seek .timeline-content {
  box-sizing: content-box;
  min-height: 96px;
  padding-inline: 50cqw;
}

.timeline.is-scroll-seek .playhead {
  left: 50cqw;
}

.timeline.is-scroll-seek .ruler {
  cursor: default;
  touch-action: auto;
}

/* 選択していない帯の上を払ってもスクロールできるようにする。選択した帯だけがドラッグで動く */
.timeline.is-scroll-seek .clip:not(.is-selected) {
  cursor: pointer;
  touch-action: auto;
}

/* 読み取り専用（見るだけのとき）のタイムライン。帯は、コメントのある場所を示す小さな印として出し、
   再生位置が区間に入っている印だけを濃くする。印を押すと、その場面へ移動する */

.timeline.is-read-only .timeline-content {
  min-height: 0;
}

.timeline.is-read-only .tracks {
  padding: 12px 0 8px;
}

.timeline.is-read-only .clip {
  justify-content: center;
  height: 14px;
  padding: 0;
  border-radius: 7px;
  background: var(--active);
  color: #ffffff;
  cursor: pointer;
  touch-action: auto;
  transition: background-color 0.4s;
}

.timeline.is-read-only .clip.is-active {
  background: var(--progress);
}

.timeline.is-read-only .clip .icon {
  width: 9px;
  height: 9px;
}

.ruler {
  position: relative;
  height: 24px;
  background-image: linear-gradient(to right, var(--tick) 1px, transparent 1px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: var(--minor-step) 6px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.ruler span {
  position: absolute;
  top: 0;
  height: 100%;
  padding-left: 4px;
  border-left: 1px solid var(--tick);
  color: var(--tick-label);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  line-height: 12px;
  pointer-events: none;
}

.tracks {
  padding-top: 17px;
}

.track {
  position: relative;
}

/* 高さは timeline.js の LANE_HEIGHT（30px）から下 6px の隙間を引いたもの */
.clip {
  position: absolute;
  display: flex;
  align-items: center;
  height: 24px;
  min-width: 4px;
  padding: 0 14px;
  border-radius: 5px;
  background: var(--panel);
  font-size: 11px;
  white-space: nowrap;
  cursor: grab;
  touch-action: none;
  user-select: none;
  /* 両端のつまみの、つかめる幅 */
  --handle: 10px;
}

.clip.is-selected {
  background: var(--active);
}

.clip span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
}

.clip .icon {
  width: 14px;
  height: 14px;
  flex: none;
}

/* 帯の両端のつまみ。見た目は短い縦線で、つかめる幅はそれより広く取る */
.clip .handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--handle);
  cursor: ew-resize;
}

.clip .handle::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 4px;
  width: 1px;
  background: var(--tick-label);
}

.clip .handle[data-edge="start"] {
  left: 0;
}

.clip .handle[data-edge="end"] {
  right: 0;
}

/* 短い帯では、つまみが帯を覆って本体をつかめなくなる。そこで、つまみを帯の外側に出して、
   本体（移動）と両端（伸び縮み）のどちらもつかめるようにする。文字と余白は、帯の幅が時間の長さどおりになるよう外す */
.clip.is-narrow {
  padding: 0;
}

.clip.is-narrow span {
  display: none;
}

.clip.is-narrow .handle[data-edge="start"] {
  left: calc(-1 * var(--handle));
}

.clip.is-narrow .handle[data-edge="end"] {
  right: calc(-1 * var(--handle));
}

@media (pointer: coarse) {
  .clip {
    --handle: 16px;
  }
}

.playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1.5px;
  margin-left: -0.75px;
  background: var(--playhead);
  pointer-events: none;
  z-index: 2;
}

/* 帯の端が他の帯の端に吸い付いている間、その時刻に出す縦の線 */
.snap-guide {
  position: absolute;
  top: 24px;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--ink);
  pointer-events: none;
  z-index: 2;
}

.timeline.is-scroll-seek .snap-guide {
  left: 50cqw;
}

/* PC とスマホの横持ち：左に動画、右にコメントのパネル、その下に再生操作と道具、最下段にタイムライン */

@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .editor {
    display: grid;
    /* 動画の幅は、画面の縦に収まる幅を上限にして、横幅が足りなければ縮める */
    grid-template-columns: minmax(0, calc((100dvh - var(--reserved)) * 16 / 9)) clamp(260px, 30vw, 420px);
    grid-template-rows: auto auto minmax(0, 1fr);
    justify-content: start;
    column-gap: 20px;
    padding: 24px 24px 16px;
  }

  .viewer {
    grid-area: 1 / 1;
    margin: 0;
  }

  /* パネルの高さは動画に揃え、中身が多いときはパネルの中でスクロールさせる。
     contain: size で中身の量を行の高さに影響させない */
  .panel {
    grid-area: 1 / 2;
    min-height: 0;
    margin-top: 0;
    contain: size;
  }

  /* 左右の端に時刻、中央にボタンを置く。時刻は動画のすぐ下、ボタンはそれより一段下げる */
  .transport {
    grid-area: 2 / 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    padding-bottom: 24px;
  }

  .time {
    display: block;
  }

  .tools {
    grid-area: 2 / 2;
    align-self: start;
    justify-content: flex-end;
    padding-top: 12px;
  }

  .timeline {
    grid-area: 3 / 1 / 4 / -1;
    min-height: 0;
    max-height: none;
  }

  /* 見るだけのときは、右のパネルの一覧がコメントへ飛ぶ手段になるので、タイムラインは出さない */
  .timeline.is-read-only {
    display: none;
  }
}

/* タイムラインが出ている PC では、そのぶん動画を小さくして 1 画面に収める */
@media (min-width: 900px) and (min-height: 501px) {
  body.is-writable {
    --reserved: 300px;
  }
}