/* style.css — filmic-review-os フロント。ダーク基調・モノトーン＋アクセント1色・PC前提(最小1200px)。 */

:root {
  --bg: #14161a;
  --bg-2: #181b21;
  --panel: #1c1f26;
  --panel-2: #22262f;
  --panel-3: #2a2f39;
  --border: #313743;
  --border-2: #3d4553;
  --text: #e7e9ee;
  --text-2: #aab2bf;
  --muted: #7c8593;
  --accent: #cf9b52;        /* filmicのアクセント1色（温かみのある琥珀） */
  --accent-2: #e6b877;
  --accent-ink: #1a140a;

  --ok: #5bb98b;
  --info: #5aa2d6;
  --warn: #d8a24a;
  --danger: #d76a6a;
  --held: #b79a5e;

  --hl-review: rgba(216, 162, 74, 0.16);   /* needs_review 黄ハイライト */
  --hl-current: rgba(207, 155, 82, 0.22);  /* 再生中の行 */

  --radius: 8px;
  --radius-s: 5px;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

#app { min-height: 100vh; display: flex; flex-direction: column; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 650; line-height: 1.3; }
h1 { font-size: 20px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 .6em; }

/* ---------- 汎用 ---------- */
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; }
.spacer { flex: 1; }
.hidden { display: none !important; }
.center { text-align: center; }
.scroll { overflow: auto; }

/* ---------- ボタン ---------- */
button, .btn {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-s);
  padding: 6px 12px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
button:hover, .btn:hover { background: var(--panel-3); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-2); }
.btn-danger { border-color: color-mix(in srgb, var(--danger) 60%, var(--border-2)); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 22%, var(--panel-2)); }
.btn-ok { border-color: color-mix(in srgb, var(--ok) 55%, var(--border-2)); }
.btn-sm { padding: 3px 8px; font-size: 12px; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--panel-2); }

/* ---------- フォーム ---------- */
input[type=text], input[type=password], input[type=number], input[type=url], textarea, select {
  font: inherit;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-s);
  padding: 7px 9px;
  width: 100%;
}
textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 3px; }
.field { margin-bottom: 10px; }
.inline-field { display: flex; gap: 8px; align-items: center; }
.inline-field label { margin: 0; }

/* ---------- ナビ ---------- */
.topnav {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.topnav .brand { font-weight: 700; letter-spacing: .3px; color: var(--text); }
.topnav .brand .dot { color: var(--accent); }
.topnav nav { display: flex; gap: 6px; }
.topnav nav a { color: var(--text-2); padding: 5px 10px; border-radius: var(--radius-s); }
.topnav nav a:hover { background: var(--panel-2); text-decoration: none; }
.topnav nav a.active { color: var(--text); background: var(--panel-2); }
.topnav .who { color: var(--text-2); font-size: 12px; }
.topnav .who .role { color: var(--accent-2); }

.page { padding: 20px 24px; max-width: 1400px; width: 100%; }
.page.wide { max-width: none; }

/* ---------- カード/パネル ---------- */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.panel-pad { padding: 14px 16px; }
.card { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

/* ---------- バッジ ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  background: var(--panel-3); color: var(--text-2);
  border: 1px solid var(--border-2);
}
.badge.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--draft { color: var(--muted); }
.badge--shared { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, var(--border-2)); }
.badge--done_reported { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border-2)); }
.badge--verified { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--border-2)); }
.badge--reopened { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border-2)); }
.badge--adopted { color: var(--ok); }
.badge--adopted_modified { color: var(--accent-2); }
.badge--rejected { color: var(--danger); }
.badge--held { color: var(--held); }
.badge--undecided { color: var(--muted); }
.badge--objective { color: var(--info); }
.badge--subjective { color: var(--held); }
.badge--high { color: var(--ok); }
.badge--mid { color: var(--warn); }
.badge--low { color: var(--muted); }
.badge--actor-system { color: var(--info); }
.badge--actor-reviewer { color: var(--accent-2); }
.badge--actor-editor { color: var(--ok); }
.badge--ai { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 45%, var(--border-2)); }
.badge--addendum { color: var(--warn); }
.badge--stale { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border-2)); }

/* ---------- テーブル ---------- */
table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.grid th { color: var(--text-2); font-size: 12px; font-weight: 600; background: var(--panel-2); }
table.grid tr.clickable { cursor: pointer; }
table.grid tr.clickable:hover td { background: var(--panel-2); }

/* ---------- バナー ---------- */
.banner { padding: 10px 16px; border-radius: var(--radius-s); font-weight: 600; }
.banner--danger { background: color-mix(in srgb, var(--danger) 22%, var(--panel)); border: 1px solid var(--danger); color: #ffdcdc; }
.banner--warn { background: color-mix(in srgb, var(--warn) 18%, var(--panel)); border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--border)); }
.banner--info { background: color-mix(in srgb, var(--info) 16%, var(--panel)); border: 1px solid color-mix(in srgb, var(--info) 45%, var(--border)); }

/* ---------- ログイン ---------- */
.login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.login-card { width: 340px; }
.login-card h1 { text-align: center; }
.login-error { color: var(--danger); font-size: 13px; min-height: 18px; }

/* ---------- ステッパー(ジョブ) ---------- */
.stepper { display: flex; gap: 8px; flex-wrap: wrap; }
.step {
  flex: 1 1 140px; min-width: 130px;
  border: 1px solid var(--border-2); border-radius: var(--radius-s);
  padding: 8px 10px; background: var(--panel-2);
}
.step .step-name { font-weight: 600; font-size: 13px; }
.step .step-status { font-size: 12px; margin-top: 2px; }
.step .step-progress { font-size: 11px; color: var(--muted); margin-top: 4px; word-break: break-word; }
.step--queued { opacity: .7; }
.step--running { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.step--running .step-status { color: var(--accent-2); }
.step--done { border-color: color-mix(in srgb, var(--ok) 45%, var(--border-2)); }
.step--done .step-status { color: var(--ok); }
.step--skipped .step-status { color: var(--muted); }
.step--failed { border-color: var(--danger); }
.step--failed .step-status { color: var(--danger); }

/* ---------- レビュー画面レイアウト ---------- */
.review-top { padding: 12px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.review-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.review-head .ep { font-size: 16px; font-weight: 650; }
.review-head .vn { color: var(--accent-2); font-weight: 650; }
.review-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.review {
  flex: 1;
  display: grid;
  grid-template-columns: 250px minmax(420px, 1fr) 460px;
  gap: 0;
  min-height: 0;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.rv-left, .rv-center, .rv-right { min-height: 0; overflow: auto; }
.rv-left { border-right: 1px solid var(--border); padding: 12px; background: var(--bg-2); }
.rv-center { display: flex; flex-direction: column; }
.rv-right { border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }

/* 左：セクション */
.sec-item { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-s); margin-bottom: 6px; cursor: pointer; background: var(--panel); }
.sec-item:hover { background: var(--panel-2); }
.sec-item .sec-time { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.sec-item .sec-title { font-weight: 600; font-size: 13px; }
.sec-item .sec-role { font-size: 11px; color: var(--accent-2); }
.sec-item.active { border-color: var(--accent); }

/* 中央：文字起こし */
.tx-head { position: sticky; top: 0; background: var(--bg); z-index: 5; padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tabs { display: inline-flex; border: 1px solid var(--border-2); border-radius: var(--radius-s); overflow: hidden; }
.tabs button { border: none; border-radius: 0; background: transparent; padding: 5px 12px; }
.tabs button.active { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.tx-list { padding: 6px 14px 40vh; }
.seg { display: flex; gap: 10px; padding: 3px 6px; border-radius: var(--radius-s); align-items: baseline; }
.seg:hover { background: var(--panel-2); }
.seg .seg-t { font-family: var(--mono); font-size: 11px; color: var(--muted); cursor: pointer; flex: 0 0 auto; padding-top: 1px; }
.seg .seg-t:hover { color: var(--accent-2); }
.seg .seg-text { flex: 1; cursor: pointer; white-space: pre-wrap; }
.seg .seg-edit { visibility: hidden; }
.seg:hover .seg-edit { visibility: visible; }
.seg.needs-review { background: var(--hl-review); }
.seg.current { background: var(--hl-current); box-shadow: inset 3px 0 0 var(--accent); }
.seg .seg-human-mark { color: var(--ok); font-size: 10px; }

/* 右上：プレイヤー＋タイムライン */
.rv-player-wrap { padding: 10px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.rv-player-box { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-s); overflow: hidden; }
.rv-player-box iframe, .rv-player-box #player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rv-time { font-family: var(--mono); font-size: 12px; color: var(--text-2); margin-top: 6px; display: flex; gap: 12px; align-items: center; }
.rv-timeline-wrap { margin-top: 8px; }
canvas.timeline { width: 100%; height: 56px; display: block; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-s); cursor: pointer; }
.timeline-legend { display: flex; gap: 12px; font-size: 10px; color: var(--muted); margin-top: 4px; flex-wrap: wrap; }
.timeline-legend .k { display: inline-flex; align-items: center; gap: 4px; }
.timeline-legend .sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* 右下：タブパネル */
.rv-tabbar { display: flex; border-bottom: 1px solid var(--border); background: var(--panel); }
.rv-tabbar button { flex: 1; border: none; border-radius: 0; background: transparent; padding: 10px; border-bottom: 2px solid transparent; }
.rv-tabbar button.active { border-bottom-color: var(--accent); color: var(--text); font-weight: 600; }
.rv-tabbar .count { font-size: 11px; color: var(--muted); margin-left: 4px; }
.rv-panel { flex: 1; overflow: auto; padding: 12px; }

/* AI提案カード */
.sug { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-2); padding: 12px; margin-bottom: 10px; }
.sug.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sug.decided-adopted, .sug.decided-adopted_modified { opacity: .82; }
.sug.decided-rejected { opacity: .55; }
.sug .sug-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sug .sug-cat { font-weight: 650; }
.sug .sug-quote { border-left: 3px solid var(--accent); padding: 4px 10px; margin: 6px 0; color: var(--text-2); background: var(--bg-2); border-radius: 0 4px 4px 0; white-space: pre-wrap; }
.sug .sug-reason { white-space: pre-wrap; margin: 6px 0; }
.sug .sug-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 6px 0; }
.sug .sug-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sug .sug-decision { font-size: 12px; }
.no-issues { text-align: center; padding: 24px 10px; }
.no-issues .checked { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }

/* 指摘・指示 / スレッド */
.req { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-2); padding: 11px 12px; margin-bottom: 10px; }
.req.is-draft { border-style: dashed; }
.req .req-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.req .req-anchor { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.req .req-quote { border-left: 3px solid var(--border-2); padding: 3px 8px; color: var(--text-2); margin: 5px 0; white-space: pre-wrap; }
.req .req-body { white-space: pre-wrap; margin: 4px 0; }
.req .req-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.thread { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.thread .cm { font-size: 13px; padding: 4px 0; }
.thread .cm .cm-who { color: var(--accent-2); font-weight: 600; margin-right: 6px; }
.thread .cm .cm-at { color: var(--muted); font-size: 11px; margin-left: 6px; }
.thread .reply { display: flex; gap: 6px; margin-top: 6px; }
.thread .reply textarea { min-height: 34px; }

/* コメント作成フォーム */
.comment-form { border: 1px solid var(--border-2); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; background: var(--panel); }
.anchor-summary { font-size: 12px; color: var(--accent-2); font-family: var(--mono); }
.anchor-controls { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ---------- モーダル ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: var(--panel); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow); width: 520px; max-width: 92vw; max-height: 88vh; overflow: auto; }
.modal-head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
.modal-body { padding: 16px; }
.modal-foot { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- トースト ---------- */
.toast-stack { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { padding: 10px 14px; border-radius: var(--radius-s); background: var(--panel-3); border: 1px solid var(--border-2); box-shadow: var(--shadow); max-width: 380px; }
.toast--error { border-color: var(--danger); }
.toast--ok { border-color: var(--ok); }

/* ---------- 設定：glossary等の行 ---------- */
.kv-rows { display: flex; flex-direction: column; gap: 6px; }
.kv-row { display: flex; gap: 6px; align-items: center; }
.kv-row input { flex: 1; }
.list-rows { display: flex; flex-direction: column; gap: 6px; }

/* 空表示 */
.empty { color: var(--muted); text-align: center; padding: 28px; }

/* エピソード一覧の数値バッジ */
.count-pill { display: inline-flex; min-width: 20px; justify-content: center; padding: 1px 6px; border-radius: 999px; background: var(--panel-3); font-size: 12px; }
.count-pill.hot { background: color-mix(in srgb, var(--accent) 30%, var(--panel-3)); color: var(--accent-2); font-weight: 600; }

.confirm-msg { font-size: 14px; line-height: 1.7; padding: 4px 2px; }

/* ---------- レスポンシブ用の下地（デスクトップは従来どおり） ---------- */
/* テーブルは常に幅100%。モバイルでのみ横スクロールコンテナ化する（下のメディアクエリ）。 */
.table-wrap { width: 100%; }
/* 門井ビュー：プレイヤー列とリスト列（従来のインライン固定幅をクラス化。デスクトップの見た目は不変）。 */
.ed-player-col { flex: 0 0 480px; }
.ed-player-col .rv-player-box { max-width: 480px; }
.ed-list { flex: 1; min-width: 0; }
/* モバイル用パネル切替セグメントバー。デスクトップでは非表示（.review グリッドの4つ目の子だが display:none なので占有しない）。 */
.rv-mobtabs { display: none; }

/* ============================================================
 * レスポンシブ対応（タブレット・スマホ）
 * すべて max-width メディア内に限定 → デスクトップ(≥901px, 主要スクショ幅=1280)には一切干渉しない。
 * ============================================================ */

/* 中間帯 901–1180px：レビューの3カラムが body を溢れさせないよう列幅だけ圧縮。
   真のデスクトップ(≥1181px)は従来の 250 / minmax(420,1fr) / 460 のまま不変。 */
@media (min-width: 901px) and (max-width: 1180px) {
  .review { grid-template-columns: 200px minmax(300px, 1fr) 360px; }
}

@media (max-width: 900px) {
  /* ナビ：非sticky＋折返し（プレイヤーの上部sticky と top:0 で衝突させない） */
  .topnav { position: static; flex-wrap: wrap; gap: 8px 12px; padding: 8px 14px; }
  .topnav nav { flex-wrap: wrap; gap: 4px; }

  .page { padding: 12px 14px; }

  /* テーブルは横スクロールコンテナに（body 溢れ防止） */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table.grid { min-width: 560px; }
  table.grid th, table.grid td { padding: 8px 10px; }

  /* ---- レビュー画面：3カラム→縦積み、プレイヤーを上部sticky ---- */
  .review-top { padding: 10px 12px 0; }
  .review {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: auto;
    margin-top: 10px;
  }
  /* rv-right は box を消し、子(player/tabbar/panel)を .review 直下のフレックスアイテムへ。
     DOM は不変なので YouTube iframe は再読込されない。 */
  .rv-right { display: contents; }

  .rv-left, .rv-center {
    overflow: visible; min-height: 0;
    border: 0; background: transparent;
    order: 2;
  }
  .rv-left { padding: 12px 14px; }

  .review .rv-player-wrap {
    order: 0;
    position: sticky; top: 0; z-index: 12;
    border-bottom: 1px solid var(--border);
  }
  .review .rv-tabbar { display: none; }  /* モバイルはセグメントバーへ統合 */
  .review .rv-panel { order: 3; overflow: visible; flex: 0 0 auto; }

  /* モバイル用セグメントバー（JSで .review 直下に生成） */
  .review .rv-mobtabs {
    display: flex; order: 1;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
  }
  .rv-mobtabs button {
    flex: 1; border: none; border-radius: 0; background: transparent;
    padding: 11px 6px; min-height: 44px;
    border-bottom: 2px solid transparent; color: var(--text-2);
    font-size: 13px; white-space: nowrap;
  }
  .rv-mobtabs button.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
  .rv-mobtabs .count { font-size: 11px; color: var(--muted); margin-left: 2px; }

  /* 既定は切替パネルを隠す（プレイヤーとセグメントは常時表示）→ rvm-* クラスで1つだけ表示 */
  .review .rv-left,
  .review .rv-center,
  .review .rv-panel { display: none; }
  .review.rvm-sections .rv-left { display: block; }
  .review.rvm-transcript .rv-center { display: flex; }
  .review.rvm-suggest .rv-panel,
  .review.rvm-requests .rv-panel { display: block; }

  /* 文字起こしヘッダは非sticky（上部はプレイヤーが占有） */
  .tx-head { position: static; }
  .tx-list { padding: 6px 12px 30vh; }

  /* タイムライン：省スペース化 */
  .timeline-legend { display: none; }
  canvas.timeline { height: 44px; }

  /* ---- 門井ビュー（editor）：横並び→縦積み、プレイヤー上部sticky ---- */
  .ed-body { flex-direction: column; }
  .ed-player-col {
    flex: 0 0 auto; width: 100%;
    position: sticky; top: 0; z-index: 12;
    background: var(--bg);
  }
  .ed-player-col .rv-player-box { max-width: none; }
  .ed-list { width: 100%; }

  /* ---- ログイン ---- */
  .login-wrap { padding: 16px; }
  .login-card { width: 100%; max-width: 360px; }
}

@media (max-width: 560px) {
  h1 { font-size: 18px; }
  h2 { font-size: 16px; }

  /* タッチ標的：最低40px高 */
  button, .btn, select,
  input[type=text], input[type=password], input[type=number], input[type=url] { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .rv-mobtabs button { font-size: 12px; padding: 10px 4px; }

  .page { padding: 10px 12px; }

  /* トーストが画面幅を超えない */
  .toast-stack { left: 12px; right: 12px; bottom: 12px; }
  .toast { max-width: none; }

  /* モーダルのボタン列 */
  .modal-foot { flex-wrap: wrap; }

  .review-actions { gap: 6px; }
}