/* ==========================================================================
   基础样式：重置、排版、按钮、输入、滚动条
   只用 tokens.css 里的变量，不写死色值。
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }

.is-hidden { display: none !important; }

/* ---- 等宽小标签 ----
   全项目三十来处分区标题都走这个类：「问题清单 · 点击定位」、
   「措辞与法律风险」、「条款原文 · 整条标注」、「必备条款点卡」……

   原取值是 10px + .14em 字距 + --ink3，三样都往「淡」的方向走，
   叠起来在瓷白底上对比度约 2.6:1，远低于可读线。装饰性文字这样
   没问题，但这些**是导航层级** —— 看不清就等于没有分区，用户得靠
   猜哪块是哪块。12px + --ink2 约 5.2:1，过得去。

   字距从 .14em 收到 .08em：字号大了之后原来的字距会显得散，
   中文尤其明显（中文本身没有词间空隙，字距一大就断成一个个字）。

   第一版只提到 12px/--ink2,看着跟没改一样 —— 2px 的差在一堆
   13/14px 的正文里读不出来。13px 是这一档能站住的下限,再往上
   就跟正文平了、分区标题反而失去「标题」的性质。

   真装饰性的用法（登录页那个「或」）在各自文件里单独降回 --ink3。 */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  letter-spacing: .08em;
  color: var(--ink2);
  text-transform: uppercase;
}

/* ---- 按钮 ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 6px 13px;
  background: transparent;
  color: var(--ink2);
  border: 1px solid var(--line-s);
  border-radius: var(--radius-pill);
  letter-spacing: .03em;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.btn:hover { color: var(--ink); border-color: var(--line); background: var(--surface-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { padding: 4px 10px; font-size: var(--fs-xs); }
.btn-primary { color: var(--brass); border-color: var(--line); }
.btn-primary:hover { color: var(--brass); border-color: var(--brass); }

.icon-btn {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  color: var(--ink2);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.icon-btn:hover { color: var(--ink); background: var(--surface-2); }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn.is-on { color: var(--brass); }

/* ---- 输入 ---- */
.input, .area, .sel {
  width: 100%;
  padding: 7px 10px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-s);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--fs-base);
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.input:focus, .area:focus, .sel:focus { border-color: var(--brass); }
.area { min-height: 72px; resize: vertical; line-height: 1.75; }

.field { margin-bottom: var(--sp-3); }
.field-label {
  display: block; margin-bottom: var(--sp-1);
  font-size: var(--fs-xs); color: var(--ink2); letter-spacing: .04em;
}

/* ---- 分节标题：文字 + 延伸细线 ---- */
.sec-head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-5) 0 var(--sp-3);
}
.sec-head .line { flex: 1; height: 1px; background: var(--line-s); }

/* ---- 黄铜菱形分隔符 ---- */
.orn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
}
.orn span { height: 1px; width: 34px; background: var(--line); }
.orn i { width: 4px; height: 4px; background: var(--brass); transform: rotate(45deg); }

/* ---- 徽标 ---- */
.mark-logo {
  display: grid; place-items: center;
  width: 22px; height: 22px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--brass); font-size: var(--fs-xs);
}

/* ---- 滚动条 ---- */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-s); border-radius: 5px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--line); background-clip: content-box; }

/* ---- 风险等级文字色 ---- */
.lv-high { color: var(--high); }
.lv-medium { color: var(--mid); }
.lv-low { color: var(--low); }

/* ==========================================================================
   可访问性与动效偏好
   ========================================================================== */

/**
 * 键盘焦点环。用 :focus-visible 而非 :focus ——
 * 鼠标点按钮不该出现焦点环，键盘 Tab 过去必须出现，
 * 否则纯键盘操作的人看不出自己在哪。
 */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* 输入框自己用边框变色表示焦点，再叠一圈就太吵 */
.input:focus-visible,
.area:focus-visible,
.composer-input:focus-visible,
[contenteditable]:focus-visible {
  outline: none;
}

/* 跳过所有装饰性动效。前庭功能障碍的用户会因视差与位移不适，
   这是系统级偏好，不该由页面决定要不要尊重。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* 流式光标是状态指示而非装饰，保留闪烁但放慢 */
  .caret { animation: blink 1.6s steps(2, start) infinite !important; }
}