.screen-intro {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
}

.term-help-host {
  white-space: normal;
}

.term-help-host:not(label) {
  display: inline-block;
}

.term-help-wrap {
  display: inline;
  font: inherit;
}

.term-help-trigger {
  appearance: none;
  display: inline;
  width: auto;
  min-width: 0;
  margin: 0 0 0 0.3em;
  padding: 0.1em 0.2em;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--accent);
  background: transparent;
  font: inherit;
  font-weight: 600;
  line-height: inherit;
  cursor: help;
}

.term-help-trigger:hover,
.term-help-trigger:focus-visible {
  text-decoration: underline;
}

.term-help-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.term-help-popover {
  display: block;
  width: min(32rem, calc(100vw - 2rem));
  max-width: 100%;
  margin: 0.4rem 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid ButtonBorder;
  border-radius: var(--radius-control);
  background: Canvas;
  color: CanvasText;
  box-shadow: var(--shadow-card);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  white-space: normal;
}

.term-help-popover[hidden] {
  display: none;
}

/* ── #710 手机排版（共享部分）─────────────────────────────────────
   这个文件被**五块屏**共用，所以只放确实五块屏都该改的那一条。

   ⚠ 我一度把 `.term-help-trigger` 的窄屏尺寸也写在这里，**改坏了复核屏**：
   `test_issue_230` 的移动端几何断言当场红——那条 44px 的触达区把 `(?)` 撑开、
   连带让弹窗内容进了可视区。而 #710 的票里我自己写着「不改复核屏」。
   共享文件里的每一条都会波及五块屏，**范围红线要靠放哪个文件来守，不靠自觉**。
   那条规则现在放在四块屏各自的 `<style>` 里。

   `.screen-intro` 留在这里是对的：它是每块屏最上方那句「这一页是干什么的」，
   13px 在 390px 宽的屏上读不了，而复核屏也该读得清——五块屏同此一条。 */
@media (max-width: 600px) {
  .screen-intro { font-size: 14px; }
}