/* 编程题三块分区：编程区 / 输入区 / 输出区。
   跟图形化那块（.pc-work-pick）一个调子——有边框、有标题栏，
   学生一眼能看出「这里写代码、这里填输入、这里看结果」 */

.rb { display: flex; flex-direction: column; gap: 10px; }

.rb-sec {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
}

.rb-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  flex-wrap: wrap;
}
.rb-hd > b { font-weight: 600; color: var(--text); }
.rb-note { font-size: 12px; color: var(--text-sub); }
.rb-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.rb-lang, .rb-lang-sel {
  font-size: 12px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text-sub);
}
.rb-lang-sel { color: var(--text); cursor: pointer; }
/* 题目只支持一种语言时，下拉旁边那句解释。下拉照留（结构不随数据变），
   但得让人知道「点开只有一行」不是页面坏了 */
.rb-lang-only { font-size: 11.5px; color: var(--text-sub); opacity: .85; }

.rb-mini {
  font-size: 12px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text-sub);
  cursor: pointer;
  line-height: 1.6;
}
.rb-mini:hover { border-color: var(--brand); color: var(--brand); }

/* 代码框。.pc-code-ta 这个类名三页都在用，事件绑定认的就是它，不能改 */
.rb-ta {
  width: 100%;
  min-height: 210px;
  border: 0;
  outline: none;
  padding: 12px 14px;
  font: 13.5px/1.7 "SF Mono", Menlo, Consolas, monospace;
  background: var(--card);
  color: var(--text);
  resize: vertical;
  tab-size: 4;
}

.rb-in {
  width: 100%;
  min-height: 76px;
  border: 0;
  outline: none;
  padding: 10px 14px;
  font: 13px/1.7 "SF Mono", Menlo, Consolas, monospace;
  background: var(--card);
  color: var(--text);
  resize: vertical;
}
.rb-in::placeholder { color: var(--text-sub); font-family: inherit; }

.rb-out {
  margin: 0;
  padding: 10px 14px;
  min-height: 58px;
  max-height: 300px;
  overflow: auto;
  font: 13px/1.7 "SF Mono", Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  background: var(--card);
}
.rb-out.is-empty { color: var(--text-sub); font-family: inherit; font-size: 13px; }
.rb-out.is-err { color: var(--danger, #d9534f); }

.rb-meta {
  padding: 0 14px 8px;
  font-size: 12px;
  color: var(--text-sub);
  min-height: 0;
}
.rb-meta:empty { display: none; }

.rb-run { min-width: 82px; }

@media (max-width: 640px) {
  .rb-ta { min-height: 170px; }
  .rb-hd { padding: 7px 10px; }
}

/* 自动识别语言后的那句提示。不显眼，但得看得见——
   偷偷改下拉比不改更让人困惑 */
.rb-lang-tip {
  font-size: 11.5px;
  color: var(--brand);
  opacity: .85;
  white-space: nowrap;
}
.rb-lang-tip[hidden] { display: none; }