/* translate 专用，依赖 /home.css 变量与 /tool.css */
/* 控制条：原文语言 ⇄ 译文语言 在一行，窄屏时「翻译」按钮换到下一行 */
.bar .langsel { flex: 1 1 8em; max-width: 16em; min-width: 0; }
.bar .swap { min-width: 34px; padding: 0 10px; font-size: 16px; }

/* 原文和译文是成段的文字，用无衬线字体；16px 也让 iOS 聚焦时不自动放大 */
#input, #output { font: 16px/1.65 var(--sans); }
#output { font-weight: 600; }
.meta.full { color: var(--accent); }
/* 拼音等读音：辅助信息，用次要文字色 */
.translit { margin: 8px 0 0; font: 13px/1.6 var(--mono); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* 翻译记录：每条第一行是时间、语言和操作，下面是原文（回显色）和译文（结果色），各最多显示 3 行 */
.hist-wrap { margin-top: 28px; }
.hist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.hist li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "when ops" "src src" "res res";
  align-items: center;
  gap: 6px 18px;
  padding: 10px;
  border-bottom: 1px solid var(--rule);
}
.hist li:hover { background: var(--hover); }
.hist .when { grid-area: when; min-width: 0; font: 12px/1.5 var(--mono); color: var(--ink-2); white-space: pre-wrap; }
.hist .ops { grid-area: ops; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.hist .src, .hist .res {
  margin: 0;
  font: 14px/1.6 var(--sans);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.hist .src { grid-area: src; color: var(--echo); }
.hist .res { grid-area: res; color: var(--result); font-weight: 600; }
.hint { margin: 8px 0 0; font: 12px/1.6 var(--sans); color: var(--ink-2); }