/* ==========================================================================
   TBEATZ Web — 基础层
   重置、文档默认值、排版基元。依赖 design/tokens/tokens.css。
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--tz-font-sans);
  font-size: var(--tz-text-base);
  line-height: var(--tz-leading-normal);
  font-weight: var(--tz-weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  transition: background-color var(--tz-duration-base) var(--tz-ease-out),
              color var(--tz-duration-base) var(--tz-ease-out);
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--tz-weight-semibold); line-height: var(--tz-leading-tight); }
p, ul, ol, dl, figure, pre, table { margin: 0; }
ul, ol { padding-left: var(--tz-space-5); }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--tz-space-6) 0; }

/* 焦点：只在键盘导航时显示，且永远不被裁掉 */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--tz-radius-sm);
}

::selection { background: var(--accent-quiet); color: var(--text-primary); }

/* hidden 必须真的隐藏。
   UA 样式表里 [hidden]{display:none} 的特异性只有 0-1-0，
   任何带 display 的类选择器（.tz-badge 的 inline-flex、
   .tz-filter-banner 的 flex）都会盖过它，于是 el.hidden = true 不起作用。
   这条是兜底，不是偷懒——把它去掉就会有元素该藏没藏。 */
[hidden] { display: none !important; }

/* 滚动条：暖调，不抢戏 */
* { scrollbar-width: thin; scrollbar-color: var(--surface-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--surface-strong);
  border-radius: var(--tz-radius-full);
  border: 2px solid var(--surface-page);
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ---- 排版基元 ----------------------------------------------------------- */

/* 展示级标题：衬线。这是"claude 气质"最集中的地方——
   界面用无衬线干活，但系统开口说话时用衬线。 */
.tz-display {
  font-family: var(--tz-font-serif);
  font-weight: var(--tz-weight-normal);
  letter-spacing: var(--tz-tracking-tight);
  line-height: var(--tz-leading-tight);
  text-wrap: balance;
}
.tz-display-1 { font-size: clamp(32px, 5.2vw, var(--tz-text-5xl)); }
.tz-display-2 { font-size: clamp(26px, 4vw, var(--tz-text-4xl)); }
.tz-display-3 { font-size: clamp(22px, 3vw, var(--tz-text-3xl)); }

/* 界面标题：无衬线 */
.tz-title { font-family: var(--tz-font-sans); font-weight: var(--tz-weight-semibold); letter-spacing: var(--tz-tracking-tight); }
.tz-title-lg { font-size: var(--tz-text-xl); }
.tz-title-md { font-size: var(--tz-text-lg); }
.tz-title-sm { font-size: var(--tz-text-md); }

/* 导语：衬线、次级色、限宽 */
.tz-lead {
  font-family: var(--tz-font-serif);
  font-size: var(--tz-text-lg);
  line-height: var(--tz-leading-relaxed);
  color: var(--text-secondary);
  max-width: var(--tz-measure-prose);
  text-wrap: pretty;
}

.tz-body { font-size: var(--tz-text-base); color: var(--text-secondary); max-width: var(--tz-measure-prose); text-wrap: pretty; }
.tz-small { font-size: var(--tz-text-sm); color: var(--text-muted); }
.tz-caption { font-size: var(--tz-text-xs); color: var(--text-muted); line-height: var(--tz-leading-snug); }

/* 眉标：全大写小字，用于分区。字距必须放开，否则大写字母会挤。 */
.tz-eyebrow {
  font-size: var(--tz-text-2xs);
  font-weight: var(--tz-weight-semibold);
  letter-spacing: var(--tz-tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* 数字：等宽 + 表格数字对齐。所有指标、哈希、路径都该用它。 */
.tz-num {
  font-family: var(--tz-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

.tz-link {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-border);
  transition: text-decoration-color var(--tz-duration-fast) var(--tz-ease-out),
              color var(--tz-duration-fast) var(--tz-ease-out);
}
.tz-link:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

.tz-prose { max-width: var(--tz-measure-prose); }
.tz-prose > * + * { margin-top: var(--tz-space-4); }
.tz-prose h2 { font-family: var(--tz-font-serif); font-size: var(--tz-text-2xl); font-weight: var(--tz-weight-normal); margin-top: var(--tz-space-10); }
.tz-prose h3 { font-size: var(--tz-text-lg); margin-top: var(--tz-space-8); }
.tz-prose code { font-family: var(--tz-font-mono); font-size: .9em; background: var(--surface-inset); padding: 2px 5px; border-radius: var(--tz-radius-xs); }

/* ---- 布局基元 ----------------------------------------------------------- */

.tz-container { width: 100%; max-width: var(--tz-width-content); margin-inline: auto; padding-inline: var(--tz-space-6); }
.tz-container-wide { max-width: var(--tz-width-wide); }

.tz-stack > * + * { margin-top: var(--tz-space-4); }
.tz-stack-sm > * + * { margin-top: var(--tz-space-2); }
.tz-stack-lg > * + * { margin-top: var(--tz-space-8); }

.tz-row { display: flex; align-items: center; gap: var(--tz-space-3); flex-wrap: wrap; }
.tz-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--tz-space-4); flex-wrap: wrap; }

.tz-grid { display: grid; gap: var(--tz-space-4); }
.tz-grid-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tz-grid-2 { grid-template-columns: repeat(2, 1fr); }
.tz-grid-3 { grid-template-columns: repeat(3, 1fr); }
.tz-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .tz-grid-3, .tz-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tz-grid-2, .tz-grid-3, .tz-grid-4 { grid-template-columns: 1fr; } }

.tz-section { padding-block: var(--tz-space-16); }
@media (max-width: 700px) { .tz-section { padding-block: var(--tz-space-10); } }

/* 宽内容（表格、代码、图表）必须自己横向滚动，页面 body 永不横向滚动 */
.tz-scroll-x { overflow-x: auto; overscroll-behavior-x: contain; min-width: 0; max-width: 100%; }

.tz-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}