/* タイムラインのコンポーネント CSS（timeline.js とセットで使う）
 *
 * **ここにはページレイアウトの規則を書かない。**
 * カードの全幅化・2カラム・sticky などの「画面の組み方」は、組み込み側
 * （管理画面は web/styles.css、顧客UIは service 側）が持つ取り決め。
 * このファイルは timeline.js を動かすのに必要な見た目だけを持つ。
 *
 * 配色は design_spec のカスタムプロパティ（:root）を参照しているので、
 * 持ち込むときはトークンも一緒に。
 */

/* ページ全体ではなく、この部品の外周の余白だけを持つ */
.tl { margin: var(--space-3) 0 var(--space-4); }

/* ツールバー。**flex にしないと右寄せ（margin-left:auto）が効かない。**
   もとは web/styles.css にあり、timeline.css だけを読む顧客UIへ来ていなかった
   （.tl-grip と同じ移植漏れ）。web/styles.css へ書き戻さないこと（2026-08-15 移設）。 */
.tl-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
  font-size: 11px;
  color: var(--color-text-secondary);
}

.tl-snapbox { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* 削除予定の区間。焼く前なので「これから消える」ことが分かる見た目にする。
   **位置も背景もここにしか無い**ので、これが欠けると顧客UIでは灰色の帯が
   まったく見えない（同上の移植漏れ。2026-08-15 移設）。 */
.tl-cut {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg,
    rgba(90, 97, 114, 0.16) 0 5px, rgba(90, 97, 114, 0.30) 5px 10px);
  border-left: 1px solid var(--color-neutral);
  border-right: 1px solid var(--color-neutral);
  cursor: pointer;
  z-index: 2;
}

.tl-bar button {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11px;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.tl-bar button:hover:not(:disabled) { background: var(--color-bg-tertiary); }

.tl-bar button:disabled { opacity: .45; cursor: default; }

.tl-zoom-label { font-variant-numeric: tabular-nums; min-width: 30px; text-align: center; }

.tl-cutinfo { color: var(--color-accent); font-weight: var(--font-weight-semibold); }

/* 右寄せの操作群はここから始まる（追加・削除・元に戻す） */
.tl-bar button.tl-add { margin-left: auto; }

.tl-bar button.tl-add:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* 映像そのものを短くする操作なので、他のボタンと同じ見た目にしない */
.tl-bar button.tl-segcut:hover:not(:disabled) {
  border-color: var(--color-negative, #DC2626);
  color: var(--color-negative, #DC2626);
  background: var(--color-bg);
}

.tl-scroll { overflow-x: auto; overflow-y: hidden; }

/* 目盛り・波形・トラックのどこを押しても頭出しできる。
   「時間軸に見えるところは押せる」と分かるよう、まとめて crosshair にする。 */
.tl-inner { position: relative; min-width: 100%; cursor: crosshair; }

.tl-wave {
  display: block;
  width: 100%;
  height: 40px;
  color: #B9BFD0;                     /* 波の色（drawWave が読む） */
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.tl-wave.failed { display: none; }

.tl.v2 .tl-track { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

.tl-cut:hover { background: repeating-linear-gradient(45deg,
  rgba(90, 97, 114, 0.26) 0 5px, rgba(90, 97, 114, 0.42) 5px 10px); }

.tl-block.cut { opacity: .35; text-decoration: line-through; }

/* 文言を消したテロップ。**帯は残す**（番号がずれると焼き直しで別のキューに当たる）。
   場所が空いたことが分かる見た目にして、文字を打ち直せば戻せることを示す。 */
.tl-block.removed {
  opacity: .5;
  border-style: dashed;
}

.tl.lg .tl-block.removed { background: var(--color-bg-tertiary); color: var(--color-text-tertiary); }

.tl.lg .tl-block.removed .tl-grip { background: rgba(0, 0, 0, 0.14); }

/* ---- ゴースト段（消した帯の置き場。ghostLane を渡したときだけ出る）----
   ねらいは「メインの段が空いたと分かること」なので、**主役はあくまで空白**。
   ゴースト帯そのものは沈めて、消したものが残っていることだけ伝える。

   ⚠ 「映像ごと詰める」の灰色帯（.tl-cut）とは意味がまったく違う。
      あちら＝映像を短くする予告（斜めハッチ・帯の上下いっぱい）
      こちら＝動画に出さないテロップの置き場（一番下の段・破線の箱）
      取り違えると事故なので、ハッチは使わず破線の箱で見分けさせる。

   ⚠ この一連の規則は **.tl.lg .tl-block.removed より後ろに置くこと。**
      詳細度が同じ（クラス 4 つ）なので、前に置くと .removed に負けて
      文字が読めない灰色のままになる。 */
.tl { --tl-ghost-h: 26px; }            /* 既定の段の高さ（LANE_H と揃える） */
.tl.lg { --tl-ghost-h: 54px; }         /* size:'lg'（LANE_H_LG と揃える） */

.tl.has-ghost .tl-track {
  /* ゴースト段のぶんだけ下地を沈め、「ここから下は置き場」と分かるようにする */
  background-image: linear-gradient(to bottom,
    transparent calc(100% - var(--tl-ghost-h)),
    rgba(90, 97, 114, 0.06) calc(100% - var(--tl-ghost-h)));
}

.tl .tl-block.ghost,
.tl.lg .tl-block.ghost {
  opacity: 1;              /* .removed の .5 を戻す。読めないと「戻す」判断ができない */
  background: var(--color-bg-secondary);
  border: 1px dashed var(--color-border);
  color: var(--color-text-tertiary);
  cursor: pointer;
  z-index: 1;
}

.tl .tl-block.ghost:hover,
.tl.lg .tl-block.ghost:hover {
  border-color: var(--color-primary);
  border-style: solid;
  color: var(--color-primary-dark);
  background: var(--color-primary-tint);
}

/* 消した帯は再生位置で光らせない（動画には出ないテロップなので） */
.tl .tl-block.ghost.playing,
.tl.lg .tl-block.ghost.playing {
  background: var(--color-bg-secondary);
  color: var(--color-text-tertiary);
}

.tl .tl-block.ghost .tl-label { text-decoration: line-through; opacity: .75; }

/* 「戻す」。帯が細いと入りきらないが、はみ出しは .tl-block の overflow で切れる。
   切れても帯ごとクリックすれば戻せるので、動線は失われない。 */
.tl .tl-restore {
  flex: none;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-size: 10px;
  line-height: 16px;
  white-space: nowrap;
}

.tl .tl-block.ghost:hover .tl-restore { background: var(--color-primary); color: #fff; }

/* v2 は帯の中央ドラッグで移動できる。touch-action を切っておかないと、
   iPad では pointermove が横スクロールに奪われて移動できない（つまみ側も同じ理由で切ってある）。 */
.tl.v2 .tl-block { cursor: grab; touch-action: none; }

.tl.v2 .tl-block.dragging { cursor: grabbing; }

.tl-ruler {
  position: relative;
  height: 16px;
  margin-bottom: var(--space-1);
}

.tl-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  line-height: 1;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tl-tick.start { transform: none; }

.tl-tick.end { transform: translateX(-100%); }

.tl-tick.start::after { left: 0; }

.tl-tick.end::after { left: auto; right: 0; }

.tl-tick::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: 1px;
  height: 4px;
  background: var(--color-border);
}

/* min-height は保険。高さは html() がインラインで入れるが、その値が何らかの理由で
   効かないと、overflow:hidden のせいで**中の帯が全部クリップされて消える**
   （本番で「帯がどこにも見えない」として出た症状）。1 段ぶんは必ず残す。 */
.tl-track {
  position: relative;
  min-height: 28px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: crosshair;
}

/* 段の高さとトラックの高さを **CSS 側にも持たせる**（保険）。
   本番で「インラインの top が style から消えて全部 1 段に並ぶ／トラックの高さが効かない」
   事象が出たため、見た目の骨格をインライン頼みにしない。
   インラインが効いていればそちらが勝つ（同じ値）ので、二重でも矛盾しない。
   ⚠ 値は timeline.js の LANE_H_LG（54）と揃えること。 */
/* 高さは data-rows（＝重なりの段 ＋ ゴースト段）で決める。data-lanes は
   ドラッグの落とし先の上限に使う別の数なので、高さの保険には使わない。 */
.tl.lg .tl-track { min-height: 54px; }
.tl.lg[data-rows="2"] .tl-track { min-height: 114px; }
.tl.lg[data-rows="3"] .tl-track { min-height: 168px; }
.tl.lg[data-rows="4"] .tl-track { min-height: 222px; }
/* 同じ場所に帯を足し続けると段はもっと増える。保険が切れる所で
   「帯が overflow:hidden に飲まれて消える」に戻らないよう、6 段まで引く */
.tl.lg[data-rows="5"] .tl-track { min-height: 276px; }
.tl.lg[data-rows="6"] .tl-track { min-height: 330px; }

.tl.lg .tl-block[data-lane="1"] { top: 54px; }
.tl.lg .tl-block[data-lane="2"] { top: 108px; }
.tl.lg .tl-block[data-lane="3"] { top: 162px; }
.tl.lg .tl-block[data-lane="4"] { top: 216px; }
.tl.lg .tl-block[data-lane="5"] { top: 270px; }

.tl-block {
  position: absolute;
  height: 22px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: var(--color-primary-tint);
  border: 1px solid var(--color-primary);
  border-radius: 5px;
  color: var(--color-primary-dark);
  font-size: 10px;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.tl-block .tl-label {
  padding: 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* size:'lg'（顧客UI）。掴みやすさと**文字の読みやすさ**を優先する（Canva 参照）。
   高さは timeline.js の LANE_H_LG（54px）と揃えること（帯 48px + 隙間 6px）。

   帯の横幅はキューの長さで決まる＝短いキューは物理的に狭いので、幅は増やせない。
   ①2 行に折り返す ②中央揃え ③ベタ塗り＋白文字、の 3 点で読める文字数を稼ぐ。
   min-width は、短いキューでも「つまみ 2 つ＋掴める中央」が残るようにするため
   （無いと 1 秒未満の帯が左右のつまみで埋まり、移動ドラッグができなくなる）。 */
.tl.lg .tl-block {
  height: 48px;
  font-size: 12.5px;
  line-height: 1.25;
  border-radius: 8px;
  min-width: 42px;
  background: var(--color-primary);
  border-color: var(--color-primary-dark);
  color: #fff;
}

/* ⚠ ここで -webkit-line-clamp は使えない。ラベルは .tl-block（display:flex）の
   フレックスアイテムなので display が blockify されて -webkit-box が flow-root になり、
   clamp が黙って無効化される（実測: display=flow-root, clamp=2 でも 3 行目が覗く）。
   代わりに**高さを 2 行ぶんに固定**して、行の境目できれいに切る。 */
.tl.lg .tl-block .tl-label {
  width: 100%;
  height: 2.5em;                /* line-height 1.25 × 2 行ちょうど */
  padding: 0 7px;
  text-align: center;
  white-space: normal;          /* .tl-block の nowrap を解除して折り返す */
  word-break: break-word;
  overflow: hidden;
}

.tl.lg .tl-grip { width: 11px; background: rgba(255, 255, 255, 0.45); }

.tl.lg .tl-grip:hover { background: rgba(255, 255, 255, 0.85); }

/* ベタ塗りにしたぶん、状態の違いも塗りで出す */
.tl.lg .tl-block.edited { background: var(--color-accent); border-color: #B45309; color: #3B2606; }

.tl.lg .tl-block.edited .tl-grip { background: rgba(0, 0, 0, 0.22); }

.tl.lg .tl-block.playing {
  background: var(--color-primary-dark); border-color: var(--color-text-primary); color: #fff;
}

.tl.lg .tl-block.playing.edited { background: #B45309; border-color: #92400E; color: #fff; }

.tl.lg .tl-block.selected { outline: 3px solid var(--color-text-primary); outline-offset: -1px; }

.tl.lg .tl-hint { font-size: 12px; }

/* 帯の中で文言を直している最中。「直し済み（edited）」の琥珀色とは別の状態なので、
   白地＋太い枠で「いま打っている」ことが分かるようにする。 */
.tl .tl-block.editing {
  min-width: 140px;
  z-index: 6;
  background: var(--color-bg);
  border-color: var(--color-primary);
  border-width: 2px;
  color: var(--color-text-primary);   /* lg はベタ塗り＋白文字なので、白地に戻すとき色も戻す */
  cursor: text;
}

.tl.lg .tl-block.editing { min-width: 160px; }

.tl-edit {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: inherit;
  color: var(--color-text-primary);
  padding: 0 6px;
  outline: none;
}

.tl-block.edited { background: var(--color-accent-tint); border-color: var(--color-accent); color: #92400E; }

.tl-block.reverted { opacity: .5; }

.tl-block.selected { outline: 2px solid var(--color-primary-dark); outline-offset: -1px; z-index: 3; }

.tl-block.playing { background: var(--color-primary); border-color: var(--color-primary-dark); color: #fff; }

.tl-block.playing.edited { background: var(--color-accent); border-color: #B45309; color: #3B2606; }

.tl-block.dragging { z-index: 4; box-shadow: var(--shadow-card-hover); }

/* 端のつまみ。timeline.js の startDrag('start'|'end') の掴み手になる要素。
   **この寸法が無いと中身の無い span なので幅 0 になり、端ドラッグが物理的にできない。**
   もとは web/styles.css（管理画面専用のページCSS）にあり、app.css と timeline.css しか
   読まない顧客UIへ来ていなかった。部品の構成要素なのでこのファイルが持つのが正しい。
   web/styles.css へ書き戻さないこと（2026-08-15 移設）。 */
.tl-grip {
  flex: none;
  width: 7px;
  align-self: stretch;
  cursor: ew-resize;
  touch-action: none;   /* iPad でドラッグが横スクロールに奪われるのを防ぐ */
  background: rgba(79, 70, 229, 0.28);                                /* color-mix 非対応環境の下敷き */
  background: color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.tl-grip:hover { background: var(--color-primary); }

.tl-block.edited .tl-grip { background: rgba(245, 158, 11, 0.45); }

.tl-block.edited .tl-grip:hover { background: var(--color-accent); }

.tl-block.playing .tl-grip { background: rgba(255, 255, 255, 0.5); }

/* 再生位置。**目盛り・波形・帯を 1 本で貫く**（Canva 参照）。
   .tl-track の中に入れると overflow:hidden で切られるので、.tl-inner 直下に置いてある。 */
.tl-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--color-text-primary);
  pointer-events: none;
  z-index: 8;
}

.tl-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--color-text-primary);
}

.tl-hint {
  margin: var(--space-2) 0 0;
  font-size: 11px;
  color: var(--color-text-tertiary);
  line-height: 1.5;
}

/* データが無いときの案内（空のトラックを出すより理由を書く） */
.tl-empty {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  padding: var(--space-4);
  text-align: center;
}
.tl-empty p {
  margin: 0;
  font-size: var(--font-size-caption);
  color: var(--color-text-tertiary);
}