/* ==========================================================================
   跨内核渲染基线
   --------------------------------------------------------------------------
   必须在所有业务样式之前引入。

   为什么需要它：
     1. WebKit 与 Blink 对 line-height:normal 的算法不同（约 1.18× vs 1.41×），
        不显式声明会让同一份界面在两个内核下高度不同 —— 这是"页面变形"的主因。
     2. -webkit-text-size-adjust 在 WebKit 侧默认 auto，窄容器下可能触发文字缩放。
     3. ui-monospace 在两个内核解析到不同字体（SF Mono / Menlo），等宽场景会错位。

   实测数据见 docs/rendering-parity.md。
   ========================================================================== */

/* ---------- 1. 文字缩放锁定 ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---------- 2. 行高：一个都不留给 normal ---------- */

body {
  line-height: 1.5;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { line-height: 1.25; }
h2 { line-height: 1.3; }
h3 { line-height: 1.35; }
h4, h5, h6 { line-height: 1.4; }

/* 小字号与等宽文字：行高必须整数化，避免半像素累积 */
small,
.tiny,
.caption { line-height: 1.45; }

code, pre, kbd, samp,
.mono {
  font-family: Menlo, "SF Mono", ui-monospace, monospace;
  line-height: 1.5;
}

/* 大号数字（统计卡片那种）：行高收紧，否则卡片会虚高 */
.stat,
.big,
.display { line-height: 1.1; }

/* ---------- 3. 字体：链必须写全 ---------- */
/* 只写 -apple-system 会让 Chrome 静默回退到默认字体，字宽差 7.5%。
   必须带上 BlinkMacSystemFont 和具体的 fallback。 */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Helvetica Neue", "Segoe UI", "Microsoft YaHei", sans-serif;
  --font-mono: Menlo, "SF Mono", ui-monospace, "Cascadia Mono",
               "DejaVu Sans Mono", monospace;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

/* ---------- 4. 盒模型与滚动 ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;              /* 桌面应用不该有整页滚动 */
}

/* 不要用 100vw：WKWebView 是 overlay 滚动条（0px），
   Windows/Linux 上传统滚动条会吃掉 15px，导致横向溢出。 */
.app-root {
  height: 100vh;
  height: 100dvh;
  display: flex;
  overflow: hidden;
}

/* ---------- 5. 无边框窗口拖动 ---------- */
/* Tauri 的 decorations:false 之后，靠这个属性让区域可拖动 */
[data-tauri-drag-region] {
  -webkit-app-region: drag;
  app-region: drag;
  user-select: none;
}
[data-tauri-drag-region] button,
[data-tauri-drag-region] input,
[data-tauri-drag-region] a {
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

/* ---------- 6. 减少动态 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- 7. 焦点可见性 ---------- */
:focus-visible {
  outline: 2px solid var(--accent, #5F9FD6);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- 8. 选中与滚动条 ---------- */
::selection {
  background: rgba(95, 159, 214, .32);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(143, 163, 186, .28);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(143, 163, 186, .48);
  background-clip: content-box;
}