/* 同传字幕屏。开着麦克风、两个人隔着一张会议桌看它 —— 可读性压过一切,不做装饰。
   色值从 ios/Sources/UI/DesignSystem.swift 的深色一版搬过来:暖中性,不是纯黑纯白。 */

:root {
  color-scheme: dark;

  --ground: #161310;
  --surface: #211d19;
  --ink: #f2ece4;
  --muted: #a89f94;
  --faint: #857c72;
  --accent: #cb9374;
  --warn: #b79d5b;
  --on-accent: #191713;
  --hairline: rgb(242 236 228 / 8%);
  --track: rgb(242 236 228 / 12%);

  --xs: 4px;
  --sm: 8px;
  --md: 12px;
  --lg: 16px;
  --xl: 24px;
  --xxl: 32px;

  --lead-size: 1.75rem;
  --echo-size: 1.0625rem;
  --caption-size: 0.8125rem;
  --micro-size: 0.6875rem;

  --han: "PingFang SC", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif;
  --kana: "Hiragino Sans", "Noto Sans CJK JP", "Yu Gothic", system-ui, sans-serif;
  --latin: "Charter", "Iowan Old Style", "Palatino", Georgia, serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--han);
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 页壳:工具栏 + 流 + 一颗浮在流上的胶囊。胶囊不通栏,所以它是绝对定位的岛。 */

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--md);
  padding: var(--md) var(--lg);
  border-bottom: 1px solid var(--hairline);
  background: var(--ground);
}

.brand {
  margin: 0;
  font-size: var(--echo-size);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.tools {
  display: flex;
  align-items: baseline;
  gap: var(--md);
}

.viewers {
  color: var(--faint);
  font-size: var(--caption-size);
}

.tool {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: var(--caption-size);
  cursor: pointer;
}

.tool:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 流。短内容贴底(锚点在底部),长内容照常滚。 */

.stream {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--xl);
  min-height: 100%;
  padding: var(--xl) var(--lg) 104px;
}

.anchor { height: 0; }

.empty {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sm);
  text-align: center;
}

.guide-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
}

.guide-body {
  margin: 0;
  max-width: 26em;
  color: var(--muted);
  font-size: var(--echo-size);
  line-height: 1.7;
  white-space: pre-line;
}

/* 一条字幕:三格,中→日→英。**没有气泡、没有边框、没有语种徽标** ——
   语种由字形自明,句与句之间只靠间距分开。

   **句间距必须明显大于行高。** 2026-09-03 实测:句间距 24px、大字格行高 24.65px,
   两者一样大,于是任何一格换行时「哪儿到哪儿是一句」就没法看出来
   (iOS 正是在这一步改成了一句一张卡:现场一句能占四行)。40px ≈ 1.6 倍行高。 */

.lines {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.line {
  display: flex;
  flex-direction: column;
  gap: var(--xs);
}

.cell {
  margin: 0;
  font-size: var(--echo-size);
  line-height: 1.55;
  color: var(--muted);
}

.cell.lead {
  color: var(--ink);
  font-size: var(--lead-size);
  font-weight: 600;
  line-height: 1.45;
}

.cell.japanese { font-family: var(--kana); }
.cell.english { font-family: var(--latin); }

.cell rt:empty { display: none; }

.mark {
  font-size: 0.75em;
  vertical-align: 0.1em;
}

.cell.unserved {
  color: var(--faint);
  font-size: var(--echo-size);
  font-weight: 400;
}

.cell.waiting { line-height: 1; padding: var(--xs) 0; }

/* 骨架:静态,**不做 shimmer**。每条可见字幕挂一个每帧动的渐变,会把电平表绕开
   重绘所省下的那点开销原样吐回去。高 10px 是 callout 的字高,宽取容器六成。 */

.skeleton {
  display: block;
  width: 60%;
  height: 10px;
  border-radius: 3px;
  background: var(--track);
}

.metrics {
  margin: var(--xs) 0 0;
  color: var(--faint);
  font-size: var(--micro-size);
  font-variant-numeric: tabular-nums;
}

.stream.dim .cell.lead { color: var(--muted); }
.stream.dim .cell.echo { color: var(--faint); }

/* 流末尾的提示。和字幕不共用版式:字幕是内容,它们是关于内容的话。 */

.tail {
  display: flex;
  flex-direction: column;
  gap: var(--md);
}

.notice {
  display: flex;
  align-items: center;
  gap: var(--sm);
  width: 100%;
  margin: 0;
  padding: var(--md);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
}

.notice.unreachable,
.notice.lowDataMode,
.notice.serverStiff,
.notice.quotaHit { border-color: rgb(183 157 91 / 50%); }

.notice.entry { cursor: pointer; }
.notice.entry:hover { border-color: var(--accent); }

.notice-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--xs);
}

.notice-title {
  margin: 0;
  font-size: var(--echo-size);
}

.notice-body {
  margin: 0;
  color: var(--muted);
  font-size: var(--caption-size);
  line-height: 1.6;
}

.chevron {
  color: var(--faint);
  font-size: 1.25rem;
  line-height: 1;
}

.notice-plain {
  margin: 0;
  color: var(--warn);
  font-size: var(--caption-size);
}

/* 底部胶囊:开关兼状态指示器。停着是一枚麦克风,听着是九根电平条 ——
   同一个位置、同一颗胶囊,按下去是同一件事。 */

.dock {
  position: absolute;
  right: 0;
  bottom: var(--sm);
  left: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.capsule {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 32px;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  pointer-events: auto;
  transition: width 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.capsule.expanded { width: 124px; }
.capsule.offline { color: var(--muted); }
.capsule:disabled { cursor: default; }
.capsule[data-state="stopping"] { color: var(--muted); }

.capsule .wave { display: none; }
.capsule.expanded svg { display: none; }

.capsule.expanded .wave {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 64px;
}

.wave .bar {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: currentcolor;
  transition: height 0.06s linear;
}

.capsule.offline .bar { opacity: 0.5; }

.capsule[data-state="connecting"] .bar {
  animation: travel 1.05s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.07s);
}

@keyframes travel {
  0%, 100% { height: 4px; }
  50% { height: calc(4px + 10px * var(--shape)); }
}

@media (prefers-reduced-motion: reduce) {
  .capsule, .bar { transition: none; }
  .capsule[data-state="connecting"] .bar { animation-duration: 2.1s; }
}

/* 状态画廊(gallery.html)。每一档摆一张卡,卡底下标它叫什么。 */

.gallery {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--xxl) var(--lg) 96px;
}

.gallery > header { margin-bottom: var(--xl); }

.gallery h1 {
  margin: 0 0 var(--sm);
  font-size: 1.375rem;
  font-weight: 600;
}

.gallery p {
  margin: 0;
  max-width: 44em;
  color: var(--muted);
  font-size: var(--caption-size);
  line-height: 1.7;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--xl);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sm);
  margin: 0;
}

.frame {
  height: 560px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 18px;
}

.frame > div { height: 100%; }

.card figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--xs) var(--sm);
}

.card .name {
  font-size: var(--caption-size);
}

.card .note {
  color: var(--faint);
  font-size: var(--micro-size);
}