/* スーパー動画編集動丸君 — 画面の体裁 */

:root {
  --bg: #14161a;
  --panel: #1c1f25;
  --panel2: #23272e;
  --line: #333944;
  --fg: #e6e9ef;
  --sub: #99a1ad;
  --accent: #4c8dff;
  --accent2: #2f6fd0;
  --clip: #2f5c9e;
  --clipSel: #4c8dff;
  --audio: #2f7d5c;
  --danger: #e03131;

  /* トラック見出しの幅。ここが唯一の定義。JavaScript もここを読む */
  --head-w: 156px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 13px/1.6 system-ui, "Yu Gothic UI", "Meiryo", sans-serif;
  overflow: hidden;
}
body { display: flex; flex-direction: column; }
[hidden] { display: none !important; }

/* ---- 上のバー ---- */
.bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.logo { width: 22px; height: 22px; border-radius: 5px; }
.brand { font-weight: 700; margin-right: 6px; white-space: nowrap; }
.spacer { flex: 1; }

.btn {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel2);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: #2c313a; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: var(--accent2); }
.btn.ghost { background: transparent; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.block { display: block; width: 100%; margin-top: 8px; }

.toolbar {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
  border-radius: 9px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.tl {
  min-width: 32px; height: 32px;
  display: flex; align-items: center; gap: 5px;
  padding: 0 9px;
  border: none; border-radius: 8px;
  background: transparent; color: var(--fg);
  font: inherit; cursor: pointer;
}
.tl:hover { background: var(--panel2); }
.tl svg { width: 18px; height: 18px; display: block; }
.tlab { font-size: 11.5px; white-space: nowrap; }
.tl-sep { width: 1px; height: 20px; background: var(--line); margin: 0 3px; }
@media (max-width: 1100px) {
  .tlab { display: none; }
  .tl { padding: 0; justify-content: center; width: 32px; }
  .bar .spacer { flex-basis: 100%; height: 0; }
}

/* ---- 本体 ---- */
.wrap { display: flex; flex: 1; min-height: 0; }

/* 素材 */
.pool {
  width: 200px; flex: none;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 12px;
  overflow-y: auto;
}
.pool h3 {
  margin: 0 0 10px; font-size: 13px; color: var(--sub); font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.pool h3 .btn { font-weight: 500; }

/* 撮影時刻（2026-09-23）。ファイルの時刻で並んだものは、そう分かるようにする */
.pool-shot { color: var(--sub); font-size: 11px; }
.pool-shot .from { font-size: 10px; padding: 1px 4px; border-radius: 3px; margin-left: 4px; }
.pool-shot .from.shot { background: #1d3a4a; color: #7ecbe2; }
.pool-shot .from.file { background: #3a3a3a; color: #bbb; }
.pool-list { display: flex; flex-direction: column; gap: 6px; }
.pool-item {
  display: flex; gap: 8px; align-items: center;
  padding: 6px; border-radius: 7px;
  background: var(--panel2); border: 1px solid var(--line);
  cursor: grab; font-size: 12px;
}
.pool-item:hover { border-color: var(--accent); }
/* 素材を引っ張っている間（2026-09-22） */
.pool-item { user-select: none; }
.pool-ghost {
  position: fixed; z-index: 50; pointer-events: none;
  padding: 4px 10px; border-radius: 6px; font-size: 12px;
  background: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.4);
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.screen.drop-over { box-shadow: inset 0 0 0 3px var(--accent); }
.pool-thumb { width: 48px; height: 27px; border-radius: 3px; background: #000; flex: none; object-fit: cover; }
.pool-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-meta { color: var(--sub); font-size: 11px; }
.pool-path { font-size: 10px; padding: 1px 5px; border-radius: 3px; }
.pool-path.fast { background: #1d4a2e; color: #7ee2a8; }
.pool-path.element { background: #4a3b1d; color: #e2c87e; }
.pool-path.image { background: #2a3550; color: #9fb8ee; }
.pool-warn { color: #e2a05e; font-size: 11px; margin-top: 2px; }

/* 連結（映像と音の組。2026-09-23）。組になっているクリップに印を出す。
 * ★ 絵文字（⛓）は字体によって □ になるので、丸 2 つの鎖を文字で描く */
.clip-link {
  display: inline-block; width: 11px; height: 11px; margin-right: 4px;
  vertical-align: -1px; border-radius: 2px;
  background: rgba(255, 255, 255, .18);
  position: relative;
}
.clip-link::before, .clip-link::after {
  content: ''; position: absolute; top: 3px;
  width: 4px; height: 5px; border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 2px;
}
.clip-link::before { left: 1px; }
.clip-link::after { right: 1px; }
.clip.linked { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }

/* 下の帯のリンク（プライバシーポリシー。2026-09-23） */
.foot-link { color: var(--sub); text-decoration: underline; margin-left: 12px; }
.foot-link:hover { color: var(--accent); }

/* はじめの画面のボタンの並び（2026-09-23） */
.drop-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* クリップの右クリックメニュー（2026-09-23） */
.clip-menu {
  position: fixed; z-index: 9000; min-width: 210px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 4px; box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
}
.clip-menu button {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; color: var(--fg);
  font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 6px; cursor: pointer;
}
.clip-menu button:hover { background: var(--accent); color: #fff; }
.clip-menu-sep { height: 1px; margin: 4px 6px; background: var(--line); }

/* 中央 */
.stage { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.viewer { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.screen {
  flex: 1; min-height: 0;
  display: grid; place-items: center;
  /* ★ 行と列を「残りの広さ」に固定する。無いと行が映像の大きさまで伸び、
   *   max-height: 100% が効かずに下の操作の列へはみ出す（2026-09-21 ご本人の報告） */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  overflow: hidden;
  background: #000; padding: 10px;
}
.screen canvas { max-width: 100%; max-height: 100%; display: block; background: #000; }

.transport {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--panel); border-top: 1px solid var(--line);
  flex: none;
}
.tc { font-variant-numeric: tabular-nums; font-family: ui-monospace, Consolas, monospace; }
.tc.sub { color: var(--sub); }

/* 右 */
.side {
  width: 268px; flex: none;
  background: var(--panel);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  padding: 4px 12px 24px;
}
.sec { padding: 12px 0; border-bottom: 1px solid var(--line); }
.sec h3 { margin: 0 0 10px; font-size: 13px; color: var(--sub); font-weight: 600; }
.sec h4 { margin: 14px 0 8px; font-size: 12px; color: var(--sub); font-weight: 600; }
.row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.row.sub { padding-left: 14px; }
.lab { color: var(--sub); font-size: 12px; white-space: nowrap; min-width: 46px; }
.x { color: var(--sub); }
.num { color: var(--sub); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 12px; }

input[type=range] { flex: 1; min-width: 40px; accent-color: var(--accent); }
select, .numin, .txtin {
  background: var(--panel2); color: var(--fg);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 7px; font: inherit;
}
select { flex: 1; min-width: 0; }
.numin { width: 74px; font-variant-numeric: tabular-nums; }
.small-num { width: 62px; }
.note { color: var(--sub); font-size: 11.5px; margin: 6px 0 0; }

.fx-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.fx-item { background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; padding: 8px; }
.fx-item .fx-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.fx-item .fx-name { font-size: 12px; font-weight: 600; flex: 1; }
.fx-x { border: none; background: transparent; color: var(--sub); cursor: pointer; font-size: 14px; }
.fx-x:hover { color: var(--danger); }

/* ---- 読み込み前 ---- */
.drop { flex: 1; display: grid; place-items: center; padding: 24px; overflow-y: auto; }
.drop.on .drop-inner { border-color: var(--accent); background: #1b2330; }
.drop-inner {
  border: 2px dashed var(--line); border-radius: 14px;
  padding: 36px 40px; text-align: center; max-width: 660px;
}
.drop-icon { font-size: 40px; color: var(--sub); }
.drop-title { font-size: 17px; font-weight: 600; margin: 8px 0 6px; }
.drop-sub { color: var(--sub); margin: 0 0 20px; }
.limits { text-align: left; background: var(--panel); border-radius: 10px; padding: 14px 18px; margin: 0 0 16px; }
.limits-title { font-size: 12px; color: var(--sub); font-weight: 600; margin-bottom: 8px; }
.limits ul { margin: 0; padding-left: 1.2em; font-size: 12px; color: var(--sub); }
.limits li { margin-bottom: 6px; }
.limits b { color: var(--fg); }
.drop-note { color: var(--sub); font-size: 12px; margin: 0; }
/* 最近開いた作業ファイル（2026-09-23） */
.recent { text-align: left; background: var(--panel); border-radius: 10px; padding: 12px 16px; margin: 14px 0 0; }
.recent-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.recent-list .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- タイムライン ---- */
.track-area {
  flex: none; height: 268px;
  display: flex; flex-direction: column;
  background: var(--panel); border-top: 1px solid var(--line);
}
.track-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-bottom: 1px solid var(--line); flex: none;
}
.zoom { color: var(--sub); font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
.track-scroll { flex: 1; overflow: auto; position: relative; }
.track-inner { position: relative; min-width: 100%; }
.ruler { display: block; height: 24px; position: sticky; top: 0; z-index: 3; }
.tracks { position: relative; }

.trk { display: flex; border-bottom: 1px solid var(--line); position: relative; }
/* タイムラインでは文字を選ばない（引っ張ると画面が暗く見えていた。2026-09-22） */
.track-area { user-select: none; }
/* トラックの下の縁（高さを変える） */
.trk-resize { position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; cursor: row-resize; z-index: 3; }
.trk-resize:hover, body.resizing-row .trk-resize:active { background: var(--accent); }
body.resizing-row, body.resizing-row * { cursor: row-resize !important; }
/* 低いトラックは見出しのボタンを減らす */
.trk.h-s .trk-head { padding: 3px 8px; gap: 3px; }
.trk.h-s .trk-head .trk-btns + .trk-btns { display: none; }
.trk.h-xs .trk-head .trk-btns { display: none; }
.trk.h-xs .trk-head { padding: 0 8px; }
.trk.h-xs .clip-label { top: 0; }
/* 見出しの「長さ」（選んでいるクリップ。名前と同じ行。2026-09-22） */
.trk-top { display: flex; align-items: center; gap: 4px; min-width: 0; }
.trk-top .trk-name { flex: 1; min-width: 0; }
.trk-dur-in {
  flex: none; width: 66px; padding: 1px 4px; font: 11px/1.5 ui-monospace, Consolas, monospace;
  background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 4px;
  user-select: text;
}
.trk-dur-in:focus { border-color: var(--accent); outline: none; }

/* クリップを別のトラックへ引っ張っている間の、移る先の目印 */
.trk.drop-to { box-shadow: inset 0 0 0 2px var(--accent); background: rgba(90, 150, 255, .10); }
#tracks.drop-new { box-shadow: inset 0 3px 0 0 var(--accent); }
.trk-head {
  width: var(--head-w); flex: none; padding: 8px 10px;
  background: var(--panel2); border-right: 1px solid var(--line);
  position: sticky; left: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 6px;
  justify-content: center;
}
.trk-name {
  font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trk-btns { display: flex; gap: 5px; }
.trk-btns button {
  width: 30px; height: 26px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--sub);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0;
  display: grid; place-items: center;
}
.trk-btns button:hover { background: #2c313a; color: var(--fg); border-color: #4a5260; }
.trk-btns button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.trk-btns button.warn:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.trk-body { position: relative; flex: 1; }

.clip {
  position: absolute; top: 4px; bottom: 4px;
  background: var(--clip); border: 1px solid #4a7ac0; border-radius: 5px;
  overflow: hidden; cursor: grab; min-width: 4px;
}
.clip.audio { background: var(--audio); border-color: #4aa07a; }
.clip.sel { background: var(--clipSel); border-color: #a8caff; box-shadow: 0 0 0 1px #a8caff inset; }
.clip-label {
  position: absolute; left: 6px; top: 3px; right: 6px;
  font-size: 11px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; pointer-events: none; color: #fff;
}
.clip-edge { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; z-index: 1; }
.clip-edge.l { left: 0; }
.clip-edge.r { right: 0; }
.clip-edge:hover { background: rgba(255,255,255,.35); }

.playhead {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: #ff5252; pointer-events: none; z-index: 4;
}

/* 空いている所から引っ張って囲んで選ぶ四角（2026-09-23） */
.tl-marq {
  position: absolute; z-index: 5; pointer-events: none;
  border: 1px solid var(--accent); background: rgba(90, 150, 255, .16);
}
/* 素材を放せない段（ロック・調整レイヤー・音声の段）。放すと理由を出す（2026-09-23） */
.trk.drop-ng { box-shadow: inset 0 0 0 2px var(--danger); background: rgba(255, 82, 82, .10); }

/* 書き出す範囲（イン点・アウト点。2026-09-23） */
.range-box { display: flex; align-items: center; gap: 4px; }
.range-lab {
  color: var(--sub); font-variant-numeric: tabular-nums; font-size: 11.5px;
  min-width: 150px; text-align: center;
}
.range-lab.on { color: #4ad07a; font-weight: 600; }
.playhead::before {
  content: ''; position: absolute; top: 0; left: -5px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 8px solid #ff5252;
}

/* ---- 下 ---- */
.foot {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 14px; font-size: 11.5px; color: var(--sub);
  background: var(--panel); border-top: 1px solid var(--line); flex: none;
}

/* ---- ダイアログ・通知 ---- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: 50; }
.modal-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px 24px; width: min(460px, 92vw);
}
.modal-box h2 { margin: 0 0 6px; font-size: 16px; }
.modal-sub { margin: 0 0 14px; font-size: 12px; color: var(--sub); }
.modal-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.prog { height: 6px; background: var(--panel2); border-radius: 3px; overflow: hidden; }
.prog-fill { height: 100%; width: 0; background: var(--accent); transition: width .15s; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #000c; color: #fff; padding: 9px 16px; border-radius: 8px;
  font-size: 13px; z-index: 60; max-width: 80vw; text-align: center;
}

/* ---- 作業ファイルの動画の割り当て ---- */
.modal-box.wide { width: min(620px, 94vw); }
.relink {
  max-height: 46vh; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); padding: 8px; margin-top: 10px;
}
.relink-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
}
.relink-row + .relink-row { margin-top: 4px; }
.relink-main { flex: 1; min-width: 0; }
.relink-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relink-meta { font-size: 11px; color: var(--sub); }
.relink-state { font-size: 11px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.relink-state.ok { background: #1d4a2e; color: #7ee2a8; }
.relink-state.warn { background: #4a3b1d; color: #e2c87e; }
.relink-state.ng { background: #4a1d21; color: #e29a9a; }
#prjOpen2 { margin: 18px 0 4px; }

/* ---- 文字・図形の設定 ---- */
.txtin.area {
  width: 100%; resize: vertical; min-height: 56px;
  font: inherit; line-height: 1.5;
}
input[type=color] {
  width: 38px; height: 28px; padding: 2px;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 6px; cursor: pointer; flex: none;
}
.clip.gen { background: #6b4a9e; border-color: #8f6fc4; }
.clip.gen.sel { background: #8f6fc4; border-color: #d0b8f0; }

/* ---- キーフレームの印 ---- */
.kf {
  width: 22px; height: 22px; flex: none;
  border: 1px solid var(--line); border-radius: 5px;
  background: var(--bg); color: var(--sub);
  cursor: pointer; font-size: 11px; line-height: 1; padding: 0;
  display: grid; place-items: center;
}
.kf:hover { border-color: var(--accent); color: var(--fg); }
.kf.keyed { color: #ffd54a; border-color: #6b5a20; }
.kf.here { background: #ffd54a; border-color: #ffd54a; color: #201a00; }

/* ---- マスク ---- */
.fx-mask { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.fx-mask .row { margin-bottom: 5px; }

/* ================================================================ */
/* 波形（クリップの中）                                              */
/* ================================================================ */

.clip-wave {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 62%;
  pointer-events: none;
  opacity: .55;
}
.clip.audio .clip-wave { height: 78%; opacity: .65; }
.clip-label { position: relative; z-index: 1; }

/* ================================================================ */
/* セーフエリア（プレビューの上の目安。書き出しには入らない）        */
/* ================================================================ */

.screen { position: relative; }
.safe {
  position: absolute; pointer-events: none;
  left: 0; top: 0; width: 0; height: 0;
}
.safe-title, .safe-action {
  position: absolute; border: 1px dashed rgba(255,255,255,.5);
}
/* 文字が切れない目安（内側 10%）と、機能の目安（内側 5%） */
.safe-action { left: 5%; top: 5%; right: 5%; bottom: 5%; border-color: rgba(255,255,255,.32); }
.safe-title  { left: 10%; top: 10%; right: 10%; bottom: 10%; border-color: rgba(255,220,120,.55); }

/* ================================================================ */
/* 無音カットの下見（タイムラインに赤い帯）                          */
/* ================================================================ */

.sil-mark {
  position: absolute; top: 0; bottom: 0;
  background: rgba(220, 70, 70, .30);
  border-left: 1px solid rgba(255,120,120,.7);
  border-right: 1px solid rgba(255,120,120,.7);
  pointer-events: none; z-index: 2;
}

/* ================================================================ */
/* スコープ                                                          */
/* ================================================================ */

.scope {
  flex: none; height: 150px;
  background: #0b0d10; border-top: 1px solid var(--line);
  padding: 6px 14px;
}
.scope canvas { width: 100%; height: 100%; display: block; }

/* 失われた LUT・背景の知らせ */
.note.warn { color: #e2a05e; }

/* 証明が付かなかったときの知らせ（小さな「注意:」では見落とすため。2026-09-23） */
.exp-bad {
  margin: 10px 0 0; padding: 10px 12px;
  background: #3a1a1c; border: 1px solid var(--danger); border-radius: 6px;
  color: #ffc9c9; font-size: 13px; line-height: 1.6;
}

/* 調整レイヤー（下にある全部に効かせる段） */
.clip.adjust { background: #7a5a2a; border-color: #c39a4e; }
.clip.adjust.sel { background: #c39a4e; border-color: #f0d9a8; }

/* タイトルの定型 */
.title-list { display: grid; gap: 8px; margin: 12px 0; }
.title-list .btn { justify-content: flex-start; text-align: left; }

/* まとめ（ネスト） */
.clip.nest { background: #2f5f5a; border-color: #56a89e; }
.clip.nest.sel { background: #56a89e; border-color: #a8e0d8; }

/* ================================================================ */
/* 音のメーター                                                      */
/* ================================================================ */

.meter {
  flex: none; height: 62px;
  display: flex; gap: 12px; align-items: center;
  background: #0b0d10; border-top: 1px solid var(--line);
  padding: 6px 14px;
}
.meter canvas { flex: 1; height: 100%; display: block; }
.meter-side { flex: none; width: 150px; text-align: right; }
.meter-num { font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; color: #d8e2ee; }
.meter-lab { font-size: 10.5px; color: var(--sub); margin-bottom: 4px; }

/* ================================================================ */
/* 来歴（素材の証明・Content Credentials）                          */
/* 画蔵君の見た目を、動丸君の暗い色に合わせて写したもの             */
/* ================================================================ */

.prov-box { width: min(680px, 94vw); max-height: 88vh; overflow: auto; }
.prov-src { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); }
.prov-src h4 { margin: 0 0 6px; font-size: 13px; word-break: break-all; }
.prov-head { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.prov-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.prov-tbl th { width: 9.5em; text-align: left; vertical-align: top; color: var(--sub); font-weight: 600; padding: 3px 8px 3px 0; }
.prov-tbl td { padding: 3px 0; word-break: break-word; }
.prov-tbl .sub { color: var(--sub); font-size: 11px; }
.prov-tbl a { color: var(--accent); }
.prov-alert {
  margin: 8px 0 0;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(224, 49, 49, .14);
  color: #ff8787;
  font-size: 12px;
}
.prov-sub-h { margin: 10px 0 4px; font-size: 12px; color: var(--sub); }
.prov-list { margin: 0; padding-left: 1.4em; font-size: 12px; }
.prov-carry { margin: 10px 0 0; font-size: 12px; }
.warn-t { color: #e2a05e; }
.pill {
  display: inline-block;
  padding: 0 7px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid currentColor;
}
.pill.ok { color: #51cf66; }
.pill.ng { color: #ff6b6b; }
.pill.mid { color: #fcc419; }
.pill.none { color: var(--sub); }

/* 書き出しの画面の「引き継ぐ証明」一覧 */
.exp-carry { margin: 8px 0 0; font-size: 12px; }
.exp-carry ul { margin: 4px 0 0; padding-left: 1.2em; }
.exp-carry li { margin: 2px 0; word-break: break-all; }
.exp-carry ul { max-height: 28vh; overflow-y: auto; }

/* ================================================================ */
/* 作業画面の並び（workspace.js）。2026-09-21                        */
/* ================================================================ */

.side-bar {
  position: sticky; top: -4px; z-index: 5;
  display: flex; align-items: center; gap: 4px;
  margin: 0 -12px; padding: 6px 12px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.side-bar .lab { color: var(--sub); font-size: 12px; margin-right: 2px; }
.side-bar .btn.small { padding: 2px 8px; }
.side-bar .btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.side-cols { column-gap: 14px; column-rule: 1px solid var(--line); }
.side-cols .sec { break-inside: avoid; }
/* クリップの欄は長いので、列をまたいで流す（行の途中では切らない） */
.side-cols #clipSec { break-inside: auto; }
.side-cols #clipSec .row, .side-cols #clipSec label { break-inside: avoid; }
.side-cols #clipSec h4 { break-after: avoid; }
.sec-head { cursor: pointer; user-select: none; position: relative; padding-left: 14px; }
.sec-head::before { content: '▾'; position: absolute; left: 0; top: 0; font-size: 11px; }
.sec-head[draggable="true"] { cursor: grab; }
.sec.folded > :not(h3) { display: none !important; }
.sec.folded > .sec-head::before { content: '▸'; }
.sec.dragging { opacity: .4; }
.sec.drop-before { box-shadow: 0 -3px 0 0 var(--accent); }

/* 境目（引っ張って幅・高さを変える） */
.split { flex: none; background: var(--line); position: relative; z-index: 4; }
.split-v { width: 5px; cursor: col-resize; }
.split-h { height: 5px; cursor: row-resize; }
.split:hover, body.splitting .split { background: var(--accent); }
body.splitting { user-select: none; }
body.splitting.split-v, body.splitting.split-v * { cursor: col-resize !important; }
body.splitting.split-h, body.splitting.split-h * { cursor: row-resize !important; }
.side, .pool { min-width: 0; }

/* ================================================================ */
/* プレビューの上で直接さわる（direct.js）                           */
/* ================================================================ */

.dm-box { position: absolute; width: 0; height: 0; transform-origin: 0 0; pointer-events: none; z-index: 3; }
.dm-rect { position: absolute; border: 1.5px solid var(--accent); box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.dm-rect i {
  position: absolute; width: 11px; height: 11px; margin: -6px 0 0 -6px;
  background: #fff; border: 2px solid var(--accent); border-radius: 2px;
  pointer-events: auto;
}
.dm-rect i[data-k="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.dm-rect i[data-k="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
.dm-rect i[data-k="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.dm-rect i[data-k="sw"] { left: 0; top: 100%; cursor: nesw-resize; }
/* 辺のつまみは図形のときだけ（縦長・横長にする。2026-09-22） */
.dm-rect i.edge { display: none; }
.dm-box.shape .dm-rect i.edge { display: block; }
.dm-rect i[data-k="n"] { left: 50%; top: 0; cursor: ns-resize; }
.dm-rect i[data-k="s"] { left: 50%; top: 100%; cursor: ns-resize; }
.dm-rect i[data-k="e"] { left: 100%; top: 50%; cursor: ew-resize; }
.dm-rect i[data-k="w"] { left: 0; top: 50%; cursor: ew-resize; }

/* ★ 小さい図形は、つまみ（11px）が重なって掴めないので外側へ出す（2026-09-23）。
 *   枠の幅・高さが 34px より狭いとき（direct.js が tiny-x / tiny-y を付ける）だけ。
 *   ふだんは今までどおり角の真上に置く（見た目を変えない）。
 *   ★ 外へ出すのは margin だけ。left / top（つまみの位置の基準）は動かさないので、
 *     引っ張ったときの計算（direct.js の shape・scale）はそのままで合う */
.dm-rect.tiny-x i[data-k="nw"], .dm-rect.tiny-x i[data-k="sw"], .dm-rect.tiny-x i[data-k="w"] { margin-left: -15px; }
.dm-rect.tiny-x i[data-k="ne"], .dm-rect.tiny-x i[data-k="se"], .dm-rect.tiny-x i[data-k="e"] { margin-left: 4px; }
.dm-rect.tiny-y i[data-k="nw"], .dm-rect.tiny-y i[data-k="ne"], .dm-rect.tiny-y i[data-k="n"] { margin-top: -15px; }
.dm-rect.tiny-y i[data-k="sw"], .dm-rect.tiny-y i[data-k="se"], .dm-rect.tiny-y i[data-k="s"] { margin-top: 4px; }
/* 細い枠の真ん中のつまみは、角のつまみと重なるので出さない */
.dm-rect.tiny-x i[data-k="n"], .dm-rect.tiny-x i[data-k="s"] { display: none; }
.dm-rect.tiny-y i[data-k="e"], .dm-rect.tiny-y i[data-k="w"] { display: none; }
#view { cursor: default; }
.dm-edit {
  position: absolute; z-index: 4; box-sizing: border-box;
  padding: 0 4px; margin: 0; resize: none; overflow: hidden;
  color: #fff; background: rgba(0, 0, 0, .82);
  border: 2px solid var(--accent); border-radius: 3px; outline: none;
  white-space: pre;
}
/* 列を細くしても横にはみ出さない（はみ出す行は折り返す） */
.side { overflow-x: hidden; }
.side-cols .row { flex-wrap: wrap; }
.side-cols .btn { white-space: normal; max-width: 100%; }