/*
 * 共通ダーク系ターミナルパネル: .tc-terminal-panel
 * tmux / 生ターミナル出力などダーク背景のパネル用。
 *
 * 【事故防止】
 * application.html.erb には白背景白文字事故対策として
 *   [style*="color: #c9d1d9"] { color: #1a1a1a !important }
 * のようなワイルドカードがある。テンプレート側でダーク前提の
 * `style="color: #c9d1d9"` や `style="color: white"` をインラインで
 * 書くと、この !important ルールに掴まれて黒文字化し、暗背景の上で
 * 読めなくなる（/step2/tmux の #current-target が黒背景黒文字になった事故）。
 *
 * ダーク系パネルを作るときはインラインで background / color を書かず、
 * 必ずこのクラス群を使うこと。子要素の色はクラスに集約してあり、
 * インラインで上書きすると上記グローバルルールに潰される恐れがある。
 */
.tc-terminal-panel {
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 1rem;
  color: #c9d1d9;
}
.tc-terminal-panel .tc-terminal-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #10b981;
  margin: 0;
}
.tc-terminal-panel .tc-terminal-title .tc-terminal-target {
  color: #10b981;
  font-weight: 600;
}
.tc-terminal-panel .tc-terminal-title.tc-terminal-title-yellow {
  color: #fbbf24;
}
.tc-terminal-panel .tc-terminal-title.tc-terminal-title-cyan {
  color: #06b6d4;
}
.tc-terminal-panel .tc-terminal-output {
  background: #0d1117;
  color: #c9d1d9;
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.tc-terminal-panel .tc-terminal-input {
  background: #0d1117;
  color: #c9d1d9;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 0.625rem 0.75rem;
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 0.85rem;
  outline: none;
}
.tc-terminal-panel .tc-terminal-input:focus {
  border-color: #2563eb;
}
.tc-terminal-panel .tc-terminal-muted {
  color: #9ca3af;
}