/* lab.css: 録画(試作。開発側の呼び名は「長めの録画」)の画面。通常のページ(index.html)では読み込まない。
   デザインポリシー: 色は状態だけ(赤はLIVEとRECの帯だけ。ボタンは白とグレー)、文字は13px以上・主な言葉は24px前後、押せる範囲は48px以上、
   動きと手応えは css/style.css の共通の値と部品(.press など)を使う。新しい部品は作らず、既存の .help-sheet・.state-band・.toast などを使い回す。 */
[hidden] { display: none !important; }
.lab-root { font-family: 'Murecho', system-ui, sans-serif; color: var(--text); }

/* ---- 状態の帯: REC(赤地・白文字)と、映像受信中・まとめ中(グレー) ---- */
.state-band[data-state="rec"] { background: var(--accent-live); color: #fff; }
.state-band[data-state="rec"]::before { content: ''; width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; }
.state-band[data-state="collect"] { background: var(--surface-2); color: var(--text); }
.state-band { font-variant-numeric: tabular-nums; }

/* ---- 下の操作(画面の絵 Rec-Main の1・4・5・7): 同じ段のボタンは同じ大きさ(幅は等分、高さ64px)。アイコン+言葉、24px・800。
   録画前は「VAR」(白)と「録画」(グレー)。録画中は「録画停止」(白)と「VAR」(グレー)。映像受信中・まとめ中は「中止」だけ ---- */
body.mode-monitor #monitorArea:not(.replaying) .primary-actions { gap: 12px; }
body.mode-monitor #monitorArea:not(.replaying) .primary-actions > #btnRewind,
body.mode-monitor #monitorArea:not(.replaying) .primary-actions > .lab-rec-btn,
body.mode-monitor #monitorArea:not(.replaying) .primary-actions > .lab-cancel-btn {
  flex: 1 1 0; min-width: 0; min-height: 64px; margin: 0; padding: 0 8px; gap: 8px; flex-direction: row;
  font-family: inherit; font-size: 1.5rem; font-weight: 800; line-height: 1; white-space: nowrap;
  border: 0; border-radius: 14px; background: var(--surface-2); color: var(--text);
}
body.mode-monitor #monitorArea:not(.replaying) .primary-actions > * svg { width: 32px; height: 32px; flex: none; }
body.mode-monitor #monitorArea:not(.replaying) .primary-actions > #btnRewind { background: var(--text); color: #000; }
body.mode-monitor #monitorArea.lab-recording:not(.replaying) .primary-actions > #btnRewind { background: var(--surface-2); color: var(--text); }
body.mode-monitor #monitorArea:not(.replaying) .primary-actions > .lab-rec-btn.is-recording { order: -1; background: var(--text); color: #000; }
body.mode-monitor #monitorArea.lab-busy:not(.replaying) .primary-actions > #btnRewind { display: none !important; }
.lab-cancel-btn[hidden], .lab-rec-btn[hidden] { display: none !important; }
/* リプレイ中は、録画していないときは出さない。録画中は、右上に「録画停止」を出し続ける(主要な操作なので高さ56px・文字24px) */
body.mode-monitor #monitorArea.replaying:not(.lab-recording) .lab-rec-btn { display: none !important; }
body.mode-monitor #monitorArea.replaying.lab-recording .lab-rec-btn {
  position: fixed; z-index: 30; flex: none; margin: 0; display: flex; flex-direction: row; align-items: center; gap: 8px;
  top: calc(env(safe-area-inset-top) + 12px); right: max(12px, env(safe-area-inset-right));
  min-height: 56px; padding: 0 18px; font-family: inherit; font-size: 1.5rem; font-weight: 800; line-height: 1; white-space: nowrap;
  background: var(--text); color: #000; border: 0; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
body.mode-monitor #monitorArea.replaying.lab-recording .lab-rec-btn svg { width: 24px; height: 24px; }
body.mode-monitor #monitorArea.replaying.lab-recording .zoom-badge { top: calc(env(safe-area-inset-top) + 76px); }

/* 横向きの撮影画面では、下のボタンは右の列(幅144px)に縦に並べる(css/style.css の「親機の撮影画面(LIVE中)」)。同じ段のボタンは同じ大きさ */
@media (orientation: landscape) and (max-height: 540px) {
  body.mode-monitor #monitorArea:not(.replaying) .primary-actions > #btnRewind,
  body.mode-monitor #monitorArea:not(.replaying) .primary-actions > .lab-rec-btn,
  body.mode-monitor #monitorArea:not(.replaying) .primary-actions > .lab-cancel-btn {
    flex: 0 0 auto; width: 100%; height: clamp(56px, 18dvh, 96px); min-height: 56px; padding: 0 4px; gap: 6px;
  }
  body.mode-monitor #monitorArea:not(.replaying) .primary-actions > * svg { width: 28px; height: 28px; }
}

/* ---- 映像受信中・まとめ中の進み具合(映像の下の端の白いバー) ---- */
.lab-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 3; pointer-events: none; background: rgba(255,255,255,0.15); }
.lab-progress[hidden] { display: none; }
.lab-progress i { display: block; height: 100%; width: 0; background: var(--text); transition: width var(--dur-base) var(--ease-out); }

/* ---- 録画のシート(.help-sheet を使い回す)。画面の絵の2・3・6 ---- */
.lab-sheet { z-index: 60; max-height: 85vh; max-height: 85dvh; }
.lab-sheet h3 { font-weight: 800; }
.lab-startbox { display: flex; flex-direction: column; gap: 14px; }
.lab-startbox[hidden] { display: none; }
.lab-startleft, .lab-startright { display: flex; flex-direction: column; gap: 10px; }
.help-sheet p.lab-cap { margin: 0; font-size: 1rem; font-weight: 800; color: var(--text-soft); }
.lab-sel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lab-opt { min-height: 56px; margin: 0; padding: 0; border: 0; border-radius: 12px; font-family: inherit; font-size: 1.5rem; font-weight: 800; background: var(--surface-2); color: var(--text); }
.lab-opt:nth-child(5) { grid-column: span 2; }
.lab-opt.on { background: var(--text); color: #000; }
.help-sheet p.lab-remain { margin: 0; font-size: 1.125rem; font-weight: 800; color: var(--text); }
.help-sheet p.lab-remain.is-warn { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.lab-big { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 72px; margin: 0; padding: 0; border: 0; border-radius: 16px; font-family: inherit; font-size: 1.75rem; font-weight: 900; background: var(--text); color: #000; }
.lab-big svg { width: 32px; height: 32px; flex: none; }
.lab-takes { list-style: none; margin: 4px 0 0; padding: 0; }
.lab-takes li { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px solid var(--hairline); }
.lab-startbox:not([hidden]) + .lab-note + .lab-takes, .lab-startbox:not([hidden]) ~ #labListNote { margin-top: 18px; }
.help-sheet p.lab-take-info { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 1.125rem; font-weight: 800; color: var(--text); }
.lab-take-info span { font-size: 1rem; font-weight: 500; color: var(--text-soft); }
.lab-take-info em { font-style: normal; font-size: 0.8125rem; font-weight: 800; background: var(--glass-strong); padding: 3px 10px; border-radius: 8px; }
.lab-take-btns { display: flex; gap: 10px; }
.lab-act { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 56px; margin: 0; padding: 0; border: 0; border-radius: 14px; background: var(--surface-2); color: var(--text); }
.lab-act svg { width: 30px; height: 30px; }
.lab-act:disabled { opacity: 0.4; }
.lab-resume { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; margin: 0; border: 0; border-radius: 14px; background: var(--surface-2); color: var(--text); font-family: inherit; font-size: 1.5rem; font-weight: 800; }
.lab-resume svg { width: 28px; height: 28px; }
.help-sheet p.lab-take-wait { margin: 0; font-size: 1.125rem; font-weight: 800; color: var(--text-soft); }
.lab-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.lab-link { min-height: 48px; margin: 0; padding: 0 14px; background: transparent; border-color: transparent; color: var(--text-soft); font-size: 1rem; text-decoration: underline; }
.lab-close { flex: 1; min-height: 56px; margin: 0; font-size: 1.5rem; }
#labTestSheet .lab-close { width: 100%; margin-top: 14px; }
@media (orientation: landscape) and (max-height: 540px) {
  body.mode-monitor #monitorArea:not(.replaying) .primary-actions > #btnRewind,
  body.mode-monitor #monitorArea:not(.replaying) .primary-actions > .lab-rec-btn,
  body.mode-monitor #monitorArea:not(.replaying) .primary-actions > .lab-cancel-btn { min-height: 56px; }
  /* 録画開始のシートは、左に最長、右に開始(画面の絵 Rec-Landscape の9) */
  .lab-startbox { flex-direction: row; gap: 24px; align-items: stretch; }
  .lab-startleft { flex: 1; min-width: 0; }
  .lab-startright { width: 44%; justify-content: flex-end; }
  .lab-sheet .help-sheet-handle { margin-bottom: 6px; }
  .lab-takes li { padding: 8px 0; }
  .lab-foot { margin-top: 8px; }
  body.mode-monitor #monitorArea.replaying.lab-recording .lab-rec-btn { top: 8px; }
  body.mode-monitor #monitorArea.replaying.lab-recording .zoom-badge { top: 72px; }
}

/* ---- 試験用のシート ---- */
.lab-opts { display: grid; gap: 10px; margin: 8px 0; }
.lab-opts label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 1rem; font-weight: 800; }
.lab-opts select { min-height: 48px; max-width: 62%; background: var(--surface-2); color: var(--text); border: 1px solid var(--hairline); border-radius: var(--radius-md); font: inherit; font-weight: 500; padding: 0 10px; }
.lab-note { color: var(--text-soft); font-size: 0.8125rem; font-weight: 500; line-height: 1.5; margin: 6px 0; }
.lab-table { display: block; overflow-x: auto; border-collapse: collapse; margin: 8px 0; }
.lab-table th, .lab-table td { border-bottom: 1px solid var(--hairline); padding: 6px 8px; text-align: left; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.lab-table th { font-weight: 800; }
.lab-table tr.is-alarm td { color: var(--text-soft); text-decoration: underline; }
.lab-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.lab-actions button { min-height: 48px; margin: 0; font-size: 1rem; font-weight: 800; }
#labTestSheet .lab-note { font-size: 1rem; }
.lab-text { width: 100%; box-sizing: border-box; background: #0c0c0c; color: #ddd; border: 1px solid var(--hairline); border-radius: 8px; font-size: 0.8125rem; }

/* ---- 録画を見る画面(全カメラを並べる。VARの「並べて見る」と同じ見え方) ---- */
.lab-viewer { position: fixed; inset: 0; z-index: 320; background: #000; display: flex; flex-direction: column; }
.lab-canvas { flex: 1; width: 100%; height: auto; min-height: 0; border-radius: 0; }
.lab-vhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(env(safe-area-inset-top) + 8px) max(12px, env(safe-area-inset-right)) 8px env(safe-area-inset-left); }
.lab-vhead .state-band { box-shadow: none; }
.lab-vtop { display: flex; gap: 10px; }
.lab-vbtn { min-height: 52px; margin: 0; padding: 0 18px; font-size: 1.25rem; background: rgba(28, 28, 30, 0.82); border-color: rgba(255, 255, 255, 0.22); }
.lab-vbar { padding: 8px max(16px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 12px) max(16px, env(safe-area-inset-left)); background: #000; }
.lab-vseek { display: flex; align-items: center; gap: 10px; }
.lab-vseek input[type="range"] { flex: 1; margin: 0; border: 0; height: 48px; }
.lab-vseek .time-readout { margin: 0; min-width: 96px; text-align: right; font-size: 0.9rem; color: var(--text-soft); }
.lab-vrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.lab-vrow .speed-btn { height: 56px; min-width: 76px; margin: 0; padding: 0 12px; font-size: 1rem; border-radius: 28px; background: rgba(28, 28, 30, 0.82); border-color: rgba(255, 255, 255, 0.22); }
.lab-vrow .step-btn { width: 56px; min-width: 56px; padding: 0; display: flex; align-items: center; justify-content: center; }
.lab-vrow .step-btn svg { width: 22px; height: 22px; }
.lab-vrow .icon-btn-primary { width: 64px; height: 64px; margin: 0; }
.lab-vinfo { font-size: 0.8125rem; font-weight: 500; color: var(--text-soft); margin: 8px 0 0; text-align: center; }
@media (orientation: landscape) and (max-height: 540px) {
  .lab-vhead { padding-top: calc(env(safe-area-inset-top) + 4px); padding-bottom: 4px; }
  .lab-vbtn { min-height: 48px; }
  .lab-vbar { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
  .lab-vseek { flex: 1; min-width: 0; }
  .lab-vrow { margin-top: 0; flex: none; }
  .lab-vinfo { display: none; }
}

/* ---- 警報(録画が止まったとき): 赤い帯。音と振動も出る ---- */
.lab-alarm {
  position: fixed; left: 0; right: 0; top: 0; z-index: 400; background: var(--accent-live); color: #fff; font-weight: 900;
  font-size: 1.125rem; line-height: 1.4; padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px 14px; text-align: center;
}

/* ---- 消したあとの「元に戻す」(トーストの形を使い回す) ---- */
.lab-undo { display: flex; align-items: center; gap: 12px; z-index: 90; padding: 8px 8px 8px 18px; text-align: left; }
.lab-undo.show { pointer-events: auto; }
.lab-undo button { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 56px; padding: 0 20px; background: var(--text); color: #000; border-color: var(--text); font-size: 1.5rem; white-space: nowrap; }
.lab-undo button svg { width: 24px; height: 24px; flex: none; }