/*
 * 受け手のページ。PC は「映像とデッキ | インスペクター（380）」、スマホは縦に積む。
 * 板は窓の縁から 8px、板どうしは 6px。板の中の文字は端から 16px。
 */

/* 1 本の映像を中心に確認する。コメントと情報は右の同じ場所で切り替える。 */
.watch {
  --watch-toolbar: calc(var(--sp-xxl) + var(--sp-xl));
  --inspector-open: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  width: 100%; max-width: 2400px;
  margin: 0 auto;
  padding: var(--slab-outer);
}
.watch-bar { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; min-height: var(--watch-toolbar); margin-bottom: var(--slab-gap); }
.watch-files-link { margin-right: auto; }
.watch-files-link[hidden] { display: none; }
/* 納品リンクのモーダルの中では、題名・クリップ・期限はモーダルの一番上の帯に出す（2026-10-12）ので、この板は出さない */
.embedded [data-role="summary"] { display: none; }
/* モーダルの中ではロゴも出さない（受け手ページの下に同じロゴがある）。2026-10-12 */
body.embedded .foot { display: none; }
/* タブの名前は折り返さない（CLIPS 1 / 2 が 3 行に折れていた） */
.inspector-tab { white-space: nowrap; }
/* モーダルの中では上の帯（ファイル一覧へ戻る）も要らない。映像とインスペクターを一番上から並べる（2026-10-12「ここの空白がもったいない」） */
.watch.embedded { --watch-toolbar: 0px; }
.embedded .watch-bar { display: none; }
/* インスペクターの開け閉めはデッキの道具の中のアイコン。開いている間は 709・LUT と同じ「オン」の塗り（2026-10-12、薄すぎたので統一） */
.icon-btn.inspector-btn[aria-expanded="true"] { color: var(--on-selection); background: var(--selection-fill); }
/* 版の選択と比較は CLIPS タブの一番上（たまにしか使わないので映像の周りに置かない）。比較の詳細は開いたときだけ */
.review-card { display: grid; gap: var(--sp-md); padding: var(--sp-sm) var(--sp-md) var(--sp-md); margin-bottom: var(--sp-sm); border-bottom: 1px solid var(--line); }
.review-card[hidden] { display: none; }
.review-bar { display: flex; align-items: end; gap: var(--sp-md); }
.review-field { display: grid; gap: var(--sp-xs); min-width: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.review-field .field { min-width: 0; width: 100%; padding: var(--sp-sm) var(--sp-md); font-size: var(--fs-sm); }
.review-bar .review-field { flex: 1; max-width: calc(var(--sidebar) + var(--sp-xxl)); }
.review-bar .btn { flex: none; }
.compare-controls { display: flex; align-items: end; flex-wrap: wrap; gap: var(--sp-md) var(--sp-lg); padding: var(--sp-md); background: var(--recess); border-radius: var(--r-md); }
.compare-controls .review-field:first-child { flex: 1; min-width: min(100%, calc(var(--sp-xxl) * 7)); }
.compare-controls input[type="number"] { width: calc(var(--sp-xxl) * 4); }
.compare-opacity { flex: 1; min-width: calc(var(--sp-xxl) * 5); }
.compare-opacity input { width: 100%; accent-color: var(--accent); cursor: pointer; }
.compare-note, .compare-status { flex-basis: 100%; margin: 0; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.6; }
.compare-status:empty { display: none; }
.player:fullscreen .review-bar, .player:fullscreen .compare-controls,
.player.pseudo-fullscreen .review-bar, .player.pseudo-fullscreen .compare-controls { display: none; }
.watch-main { min-width: 0; display: grid; gap: var(--slab-gap); align-content: start; }
/* 板の中身は縮めず、見える領域だけを畳む。閉じる途中もガラスと文字を保つ。 */
.watch-side-slot { min-width: 0; overflow: clip; margin-top: calc(var(--slab-gap) * var(--inspector-open)); }
.watch-side {
  min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(calc(100% * (1 - var(--inspector-open))));
}
.inspector-head { display: flex; align-items: center; gap: var(--sp-sm); padding: var(--sp-md); border-bottom: 1px solid var(--line); flex: none; }
.inspector-tabs { display: flex; align-items: center; gap: var(--sp-xxs); padding: var(--sp-xxs); background: var(--recess); border-radius: var(--r-md); flex: 1; min-width: 0; }
.inspector-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm); flex: 1;
  min-height: calc(var(--sp-xl) * 2); padding: var(--sp-sm) var(--sp-md);
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: var(--fs-engraved); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-engraved);
  transition: background-color var(--motion-small) var(--ease-spring), color var(--motion-small) var(--ease-spring);
}
.inspector-tab:hover { background: var(--glass-top); color: var(--text); }
.inspector-tab[aria-selected="true"] { background: var(--glass-hi); color: var(--text); }
.inspector-close { width: calc(var(--sp-xl) * 2); height: calc(var(--sp-xl) * 2); flex: none; }
.inspector-panel { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
.watch.inspector-ready .watch-side-slot { height: calc(var(--inspector-height) * var(--inspector-open)); }
@media (min-width: 1024px) {
  .watch { grid-template-columns: minmax(0, 1fr) calc(var(--sidebar) * var(--inspector-open)); column-gap: calc(var(--slab-gap) * var(--inspector-open)); }
  .watch .watch-side-slot, .watch.inspector-ready .watch-side-slot {
    position: sticky; top: var(--slab-outer);
    margin-top: 0;
    height: var(--inspector-height, calc(100svh - var(--pv-strip, 0px) - var(--watch-toolbar) - var(--slab-outer) * 2 - var(--slab-gap)));
  }
  .watch.embedded .watch-side-slot, .watch.embedded.inspector-ready .watch-side-slot { height: var(--inspector-height, calc(100svh - var(--pv-strip, 0px) - var(--slab-outer) * 2)); }
  .watch-side { width: var(--sidebar); height: 100%; transform: none; }
  .watch .player:not(:fullscreen, .pseudo-fullscreen) { --chrome: calc(var(--tray-h) + var(--signal-strip) + var(--watch-toolbar) + var(--sp-xxl) * 5); }
  .watch-side > .inspector-panel { flex: 1; }
  .watch-side .comments { display: flex; flex-direction: column; }
  .watch-side .comment-list { flex: 1; min-height: 0; max-height: none; }
  .watch-side .comment-form, .watch-side .comments-empty { flex: none; }
}

.side-card { padding: var(--sp-xl) var(--text-inset) var(--sp-lg); }
/* プロジェクト名はタイトルの上に小さく（空なら出さない）。タイトルが主役 */
.side-project { margin: 0 0 2px; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-muted); }
/* プロジェクトのアイコン（絵文字か小さな画像。データの表示なので枠も影も付けない。2026-10-12）: 名前の左に 1.25em 角、文字の中心にそろえる。
   overflow: hidden で下端を基準線にし、絵文字と画像の高さをそろえる。角丸は 6px に一番近いトークン（--r-sm）。
   再生ページの横（.side-project）とファイル一覧（.delivery-project）の両方で使う。 */
.project-icon { display: inline-block; min-width: 1.25em; height: 1.25em; margin-right: var(--sp-sm); border-radius: var(--r-sm); overflow: hidden;
  vertical-align: -.28em; line-height: 1.25em; text-align: center; }
img.project-icon { width: 1.25em; object-fit: cover; }
/* プロジェクトのサムネ（2026-10-12「プロジェクトサムネも設定できるように」）: 見出しの上に 16:9 の帯。板の文字と同じ幅いっぱい、
   角丸は板（--r-xl）の中の部品と同じ --r-md。データの表示なので枠・影・押せる見た目は付けない。透ける画像（SVG など）の下地は窪みの色。
   再生ページの横（.side-card）とファイル一覧（.delivery-slab）の両方で使う。中身は検査済みの data URI の <img> だけ。 */
.project-thumb { margin: 0 0 var(--sp-lg); aspect-ratio: 16 / 9; max-height: min(30vh, 260px); width: 100%; border-radius: var(--r-md); overflow: hidden; background: var(--recess); }
.project-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.side-title { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-title); line-height: 1.3; letter-spacing: .1px; overflow-wrap: anywhere; }
.side-message { margin: var(--sp-lg) 0 0; color: var(--text-muted); white-space: pre-wrap; line-height: 1.75; overflow-wrap: anywhere; }
.side-meta { margin: var(--sp-lg) 0 0; font-size: var(--fs-caption); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.side-download { display: flex; align-items: center; gap: var(--sp-md); flex-wrap: wrap; margin-top: var(--sp-lg); }
.side-download-note { font-size: var(--fs-caption); color: var(--text-faint); }

/* INFO（静かな値の一覧。値は操作ボタンと区別して箱に入れない） */
.info-panel { padding: var(--sp-lg) var(--text-inset) var(--sp-xl); }
.info-source-title { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text); }
.info-playback-notice { margin: var(--sp-sm) 0 var(--sp-xl); font-size: var(--fs-caption); line-height: 1.7; color: var(--text-muted); }
.info-playback { margin-top: var(--sp-xl); padding-top: var(--sp-lg); border-top: 1px solid var(--line); }
.info-group + .info-group { margin-top: var(--sp-lg); }
.info-group > .engraved { display: block; margin-bottom: var(--sp-sm); }
.info-row { display: grid; gap: 1px; padding: 4px 0; }
.info-key { font-size: var(--fs-xs); color: var(--text-faint); }
.info-val { font-size: var(--fs-sm); color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.info-val .est { margin-left: 6px; font-size: var(--fs-xs); color: var(--text-faint); }
.info-note { margin: var(--sp-sm) 0 0; font-size: var(--fs-xs); line-height: 1.7; color: var(--text-muted); }

/* STAFF は操作ではなくクレジット。INFO と同じ文字階層で、行をボタンの枠にしない。 */
.staff-panel { padding: var(--sp-lg) var(--text-inset) var(--sp-xl); }
.staff-title { margin: 0; color: var(--text); font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.staff-project { margin: var(--sp-sm) 0 0; color: var(--text-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.staff-list { list-style: none; margin: var(--sp-lg) 0 0; padding: 0; }
.staff-row { display: grid; gap: var(--sp-xs); padding: var(--sp-lg) 0; overflow-wrap: anywhere; }
.staff-row + .staff-row { border-top: 1px solid var(--line-subtle); }
.staff-role { color: var(--text-faint); font-size: var(--fs-xs); }
.staff-name { color: var(--text); font-size: var(--fs-base); }
.staff-company { color: var(--text-muted); font-size: var(--fs-sm); }

/* CLIPS（同じ共有の中の動画） */
.clips { padding: var(--sp-sm) var(--sp-sm) var(--sp-lg); }
.clips-count { font-size: var(--fs-xs); color: var(--text-faint); }
.clip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.clip {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-lg); align-items: center;
  width: 100%; padding: 6px var(--sp-md);
  background: transparent; border: 0; border-radius: var(--r-md);
  text-align: left; cursor: pointer; color: var(--text);
}
.clip:hover { background: var(--glass-top); }
.clip[aria-current="true"] { background: var(--selection-fill); color: var(--on-selection); }
.clip[aria-current="true"] .clip-sub { color: var(--on-selection-muted); }
.clip-thumb { width: 96px; aspect-ratio: 16 / 9; background: var(--well); border-radius: 0; overflow: hidden; display: grid; place-items: center; }
.clip-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.clip-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-sub { font-size: var(--fs-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* COMMENTS（拡張）。位置は TC の窓と同じ数字の書体。解決済みは薄く */
.comments { padding: var(--sp-md) var(--text-inset) var(--sp-lg); }
.comments-count { font-size: var(--fs-xs); color: var(--text-faint); }
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 2px; max-height: 420px; overflow-y: auto; }
.comment { padding: 8px 0; border-top: 1px solid var(--line-subtle); }
.comment:first-child { border-top: 0; }
.comment.resolved { opacity: .55; }
.comment-head { display: flex; align-items: baseline; gap: var(--sp-md); flex-wrap: wrap; }
.comment-tc {
  padding: 1px 6px; margin-left: -6px; border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text);
}
.comment-tc:hover { background: var(--glass-top); }
.comment.resolved .comment-tc { color: var(--text-muted); }
.comment-who { font-size: var(--fs-sm); color: var(--text); }
.comment.sender .comment-who { font-weight: var(--fw-semibold); }
.comment-when { margin-left: auto; font-size: var(--fs-xs); color: var(--text-faint); }
.comment-body { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; font-size: var(--fs-sm); color: var(--text-muted); }
.comments-empty { margin: 0 0 var(--sp-md); font-size: var(--fs-sm); color: var(--text-faint); }
.comment-form { margin-top: var(--sp-md); border-top: 1px solid var(--line); padding-top: var(--sp-md); display: grid; gap: var(--sp-sm); }
.comment-form textarea.field { min-height: 64px; }
.comment-form-row { display: flex; align-items: center; gap: var(--sp-md); }
.comment-at { font-size: var(--fs-xs); color: var(--text-muted); }
.comment-range input { accent-color: var(--accent); }
.comment-range { margin-left: auto; font-size: var(--fs-xs); color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.comment-name { flex: 1; min-width: 0; }
.comment-field { display: contents; }

/* 狭い画面: 映像は端から端まで。インスペクター（タブ・クリップ）も詰める（2026-10-12） */
@media (max-width: 640px) {
  .watch { padding: 0 0 var(--slab-outer); }
  .watch-side-slot { margin-top: 6px; }
  .inspector-head { padding: 6px 6px 6px 8px; gap: 4px; }
  .inspector-tabs { padding: 2px; }
  .inspector-tab { min-height: 30px; padding: 4px 6px; gap: 4px; font-size: 10px; letter-spacing: .4px; }
  .inspector-close { width: 30px; height: 30px; }
  .clips { padding: 4px 4px 8px; }
  .clip { grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-md); padding: 4px 8px; }
  .clip-thumb { width: 64px; }
  .clip-title { font-size: 13px; }
  .clip-sub { font-size: 11px; }
  .review-card { padding: 4px 8px 8px; gap: 6px; }
  .info-panel, .staff-panel { padding: var(--sp-md) var(--sp-lg) var(--sp-lg); }
  .watch-bar { padding-inline: var(--slab-outer); }
  .watch-side-slot, .watch-main > .side-card { margin-inline: var(--slab-outer); }
  .side-title { font-size: var(--fs-lg); }
  /* 長い操作名を折り返し、一覧カードが映像を画面幅より広げないようにする。 */
  .side-download .btn { max-width: 100%; white-space: normal; }
}

/* スマホは下のタブを常時表示。開閉の道具を省いて再生操作とタブに場所を渡す。横向きのタッチ端末も1列表示では同じ。 */
@media (max-width: 640px), (max-width: 1023px) and (hover: none) and (pointer: coarse) {
  .icon-btn.inspector-btn, .icon-btn.inspector-close { display: none; }
  .comment-form .field { font-size: var(--fs-input-mobile); }
  /* 内部は16pxでフォーカス時の拡大を避け、見た目は従来の本文13pxにそろえる。枠や余白は縮めない。 */
  .comment-field {
    --comment-field-height: calc(var(--sp-xl) * 2 + var(--sp-xxs));
    --comment-field-pad-y: var(--sp-sm); --comment-field-pad-x: calc(var(--sp-md) + var(--sp-xxs));
    display: block; position: relative; min-width: 0; height: var(--comment-field-height);
    overflow: hidden; overflow: clip; border-radius: var(--r-input);
  }
  .comment-name-field { flex: 1; }
  .comment-body-field { --comment-field-height: calc(var(--fs-input-mobile) * 3.2 + var(--sp-lg)); }
  .comment-form .comment-field > .field {
    position: absolute; top: 0; left: 0; margin: 0;
    width: calc(100% / var(--input-mobile-scale)); height: calc(100% / var(--input-mobile-scale)); min-height: 0;
    padding: calc(var(--comment-field-pad-y) / var(--input-mobile-scale)) calc(var(--comment-field-pad-x) / var(--input-mobile-scale));
    border-width: calc(1px / var(--input-mobile-scale)); border-radius: calc(var(--r-input) / var(--input-mobile-scale));
    transform: scale(var(--input-mobile-scale)); transform-origin: top left; resize: none;
  }

  /* COMMENTS だけを画面内の二段に分ける。映像の要素は移動せず、下の一覧だけをスクロールする。 */
  html.mobile-comments-page, body.mobile-comments-page { overflow: hidden; overscroll-behavior-y: none; }
  body.mobile-comments-page > .foot { display: none; }
  .watch.mobile-comments {
    position: fixed; inset-inline: 0; top: var(--comments-top, 0px); z-index: 2;
    height: var(--comments-height, 100dvh); padding: 0 0 env(safe-area-inset-bottom);
    display: flex; flex-direction: column; align-items: stretch; overflow: hidden;
  }
  .watch.mobile-comments.embedded { padding-bottom: 0; }
  .watch.mobile-comments .watch-bar { flex: none; margin-bottom: 0; }
  .watch.mobile-comments .watch-main { flex: none; }
  .watch.mobile-comments .watch-main > .side-card { display: none; }
  .watch.mobile-comments .player:not(:fullscreen, .pseudo-fullscreen) { width: 100%; }
  .watch.mobile-comments .player:not(:fullscreen, .pseudo-fullscreen) .screen {
    width: min(100%, calc(var(--comments-picture-height) * var(--ar) + var(--comments-screen-edge, 0px))); min-width: 0;
  }
  .watch.mobile-comments .watch-side-slot, .watch.mobile-comments.inspector-ready .watch-side-slot {
    flex: none; min-height: 0; height: var(--comments-panel-height, auto); margin: var(--slab-gap) var(--slab-outer) 0;
  }
  .watch.mobile-comments .watch-side { width: auto; height: 100%; }
  .watch.mobile-comments .comments { display: flex; flex: 1; flex-direction: column; padding: var(--sp-sm) var(--sp-lg); }
  .watch.mobile-comments .comment-list { flex: 1; min-height: 0; max-height: none; overscroll-behavior-y: contain; }
  .watch.mobile-comments .comment-form, .watch.mobile-comments .comments-empty { flex: none; }
  .watch.mobile-comments .comment-form { margin-top: var(--sp-xs); padding-top: var(--sp-xs); gap: var(--sp-xs); }
  .watch.mobile-comments .comment-form .dlg-hint { margin: 0; }

  /* キーボード表示中・横向きでは、再生とシークを残して入力欄へ高さを渡す。 */
  .watch.mobile-comments-compact .player:not(:fullscreen, .pseudo-fullscreen) :is(.signal, .playback-source, .tcw, .tools) { display: none; }
  .watch.mobile-comments-compact .player:not(:fullscreen, .pseudo-fullscreen) .deck { padding: var(--sp-xs) var(--sp-md) var(--sp-sm); }
  .watch.mobile-comments-compact .player:not(:fullscreen, .pseudo-fullscreen) .scrubber { margin-bottom: var(--sp-xs); }
  .watch.mobile-comments-compact .player:not(:fullscreen, .pseudo-fullscreen) .deck-row { display: flex; justify-content: center; }
  .watch.mobile-comments-compact .player:not(:fullscreen, .pseudo-fullscreen) .transport { width: 100%; height: calc(var(--sp-xl) * 2 + var(--sp-xs)); justify-content: space-between; }
  .watch.mobile-comments-compact .player:not(:fullscreen, .pseudo-fullscreen) .disc { width: calc(var(--sp-xl) * 2); height: calc(var(--sp-xl) * 2); }
  .watch.mobile-comments-compact .player:not(:fullscreen, .pseudo-fullscreen) .icon-btn { width: calc(var(--sp-xl) * 2); height: calc(var(--sp-xl) * 2); }
  .watch.mobile-comments-compact .comment-field { --comment-field-pad-y: var(--sp-xs); --comment-field-pad-x: var(--sp-md); }
  .watch.mobile-comments-compact .comment-form .dlg-hint { display: none; }

  /* 横向き＋キーボードで極端に低いときも、動画・再生・シークと入力する一行を残す。 */
  .watch.mobile-comments-short .player:not(:fullscreen, .pseudo-fullscreen) .deck { display: flex; align-items: center; gap: var(--sp-md); }
  .watch.mobile-comments-short .player:not(:fullscreen, .pseudo-fullscreen) .scrubber { flex: 1; min-width: 0; margin-bottom: 0; }
  .watch.mobile-comments-short .player:not(:fullscreen, .pseudo-fullscreen) .deck-row { flex: none; }
  .watch.mobile-comments-short .player:not(:fullscreen, .pseudo-fullscreen) .transport { width: auto; }
  .watch.mobile-comments-short .player:not(:fullscreen, .pseudo-fullscreen) .transport > :not(.disc) { display: none; }
  .watch.mobile-comments-short .comment-body-field { --comment-field-height: calc(var(--fs-input-mobile) * 1.6 + var(--sp-md) + var(--sp-xxs)); }
  .watch.mobile-comments-minimal .inspector-head { display: none; }
  .watch.mobile-comments-minimal .player:not(:fullscreen, .pseudo-fullscreen) .start-disc { display: none; }
  .watch.mobile-comments-minimal .player:not(:fullscreen, .pseudo-fullscreen) { gap: 0; --scrub-ruler: var(--sp-lg); --scrub-groove: var(--sp-sm); }
  .watch.mobile-comments-minimal .watch-bar { display: none; }
  .watch.mobile-comments-minimal .player:not(:fullscreen, .pseudo-fullscreen) .deck { padding-block: var(--sp-xxs); }
  .watch.mobile-comments-minimal .player:not(:fullscreen, .pseudo-fullscreen) :is(.transport, .disc) { height: calc(var(--sp-xl) * 2); }
  .watch.mobile-comments-minimal .player:not(:fullscreen, .pseudo-fullscreen) .disc { width: calc(var(--sp-xl) * 2); }
  .watch.mobile-comments-minimal .watch-side-slot { margin-top: var(--sp-xxs); }
  .watch.mobile-comments-minimal .comments { padding-block: 0; }
  .watch.mobile-comments-minimal .comment-body-field { --comment-field-height: calc(var(--sp-xl) * 2); }
}

@media (prefers-reduced-motion: reduce) { .inspector-tab { transition: none; } }

/* パスワード・期限切れなどの一枚の板 */
.center-page { min-height: calc(100svh - 120px); display: grid; place-items: center; padding: var(--sp-xxl) var(--sp-xl) 0; }
.narrow-slab { width: min(560px, 100%); padding: var(--sp-xxl) var(--sp-xxl) var(--sp-xl); }
.state-heading { margin: 0 0 var(--sp-md); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.state-detail { margin: 0; color: var(--text-muted); line-height: 1.7; }
.video-preparing-progress { display: block; width: 100%; height: var(--sp-sm); margin-block: var(--sp-xl); accent-color: var(--text); }
.state-detail code { font-size: var(--fs-sm); background: var(--recess); padding: 1px 6px; border-radius: 4px; }
.pw-row { display: flex; gap: var(--sp-md); margin-top: var(--sp-lg); }
.pw-row .field { flex: 1; }
.pw-error { margin: var(--sp-md) 0 0; font-size: var(--fs-sm); }

.noscript { margin: var(--sp-xl); color: var(--text-muted); }

/* キー操作の一覧 */
.keys { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.keys th { text-align: left; font-weight: var(--fw-semibold); color: var(--text); padding: 5px 12px 5px 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.keys td { color: var(--text-muted); padding: 5px 0; }
.keys tr + tr { border-top: 1px solid var(--line-subtle); }
.dlg-sub { margin-left: 6px; font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-muted); }
.dlg-hint { margin: var(--sp-sm) 0 0; font-size: var(--fs-xs); color: var(--text-faint); }
.dlg-error { margin: var(--sp-sm) 0 0; font-size: var(--fs-sm); }