/* =============================================================================
   合流 MergePad · base.css — reset, typography, figures, utilities, icons, focus
   Spec: docs/05-design-system.md §2.2, §2.10, §2.11
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--bg-0);
  scroll-padding-top: calc(var(--topbar-h) + var(--s-4));
}
body {
  margin: 0; min-width: 320px; min-height: 100vh; min-height: 100dvh;
  background: var(--bg-0); color: var(--fg-1);
  font: var(--w-4) var(--t-13)/var(--lh-13) var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  display: flex; flex-direction: column;
}
body > main { flex: 1 0 auto; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-weight: var(--w-6); text-wrap: balance; }
p, li { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: not-allowed; }
input, textarea { border-radius: 0; }
input::-webkit-search-cancel-button { display: none; }
img, svg, canvas, video { display: block; }
img { max-width: 100%; }
table { border-collapse: separate; border-spacing: 0; }
hr { border: 0; height: 1px; background: var(--line-1); margin: var(--s-1) 0; }
[hidden] { display: none !important; }
::selection { background: var(--accent-a32); color: var(--fg-1); }

/* focus — one rule for every control (spec §2.10) */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#main:focus-visible { outline: none; }

/* scrollbars: quiet */
* { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 4px; border: 2px solid var(--bg-0); }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Typography helpers ---------- */
.t-11 { font-size: var(--t-11); line-height: var(--lh-11); }
.t-12 { font-size: var(--t-12); line-height: var(--lh-12); }
.t-13 { font-size: var(--t-13); line-height: var(--lh-13); }
.t-14 { font-size: var(--t-14); line-height: var(--lh-14); }
.t-16 { font-size: var(--t-16); line-height: var(--lh-16); }
.t-20 { font-size: var(--t-20); line-height: var(--lh-20); }
.t-24 { font-size: var(--t-24); line-height: var(--lh-24); }
.w-5 { font-weight: var(--w-5); } .w-6 { font-weight: var(--w-6); }
.prose { font-size: var(--t-14); line-height: 24px; color: var(--fg-2); max-width: min(720px, 64ch); }
:lang(zh-CN) .prose { max-width: min(720px, 36em); }
.t-lead { font-size: var(--t-16); line-height: 28px; color: var(--fg-2); }
:lang(en) .t-lead { line-height: 24px; }
.h1 { font-size: var(--t-28); line-height: var(--lh-28); font-weight: var(--w-6); letter-spacing: var(--track-tight); }
.h2 { font-size: var(--t-20); line-height: var(--lh-20); font-weight: var(--w-6); letter-spacing: -0.01em; }
:lang(zh-CN) .h1, :lang(zh-CN) .h2 { letter-spacing: -0.01em; }

/* Kicker: mono caps with an accent square */
.kicker {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font: var(--w-5) var(--t-11)/var(--lh-11) var(--font-mono);
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-3);
}
.kicker::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--accent); flex: none; }
.kicker.plain::before { display: none; }

/* ---------- Figures (spec §2.2 "Figures — .num") ---------- */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; white-space: nowrap; letter-spacing: 0; }
.num sub { font-size: .72em; line-height: 0; vertical-align: -0.28em; color: var(--fg-3); margin: 0 1px; }
.u { font-family: var(--font-sans); font-size: .86em; font-weight: var(--w-4); color: var(--fg-3); margin-left: .25em; letter-spacing: 0; }
.is-pre { font-family: var(--font-sans); font-size: var(--t-12); line-height: var(--lh-12); font-weight: var(--w-4); color: var(--fg-3); letter-spacing: 0; white-space: nowrap; }
.is-na { color: var(--fg-3); }
.up { color: var(--up); } .down { color: var(--down); } .acc { color: var(--accent); }
.fg1 { color: var(--fg-1); } .fg2 { color: var(--fg-2); } .fg3 { color: var(--fg-3); } .fg4 { color: var(--fg-4); }
.flash-up { color: var(--up) !important; } .flash-down { color: var(--down) !important; }
[data-flash] { transition: color var(--t-3) var(--ease-out); }

/* ---------- Layout utilities ---------- */
.wrap { width: 100%; max-width: var(--page-max); margin: 0 auto; padding-inline: var(--gutter); }
.row { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.col { display: flex; flex-direction: column; min-width: 0; }
.grow { flex: 1 1 auto; min-width: 0; }
.ml-auto { margin-left: auto; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vsep { width: 1px; align-self: stretch; background: var(--line-2); flex: none; }
.dotsep { color: var(--fg-4); }

/* ---------- Icons (Lucide sprite, spec §2.11) ---------- */
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-12 { width: 12px; height: 12px; stroke-width: 2.25; }
.i-14 { width: 14px; height: 14px; }
.i-18 { width: 18px; height: 18px; }
.i-20 { width: 20px; height: 20px; stroke-width: 1.75; }
.spin { animation: spin 800ms linear infinite; }

/* ---------- Dots ---------- */
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; display: inline-block; }
.live-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--up); flex: none; display: inline-block; }
.live-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--up); opacity: 0; animation: ping 2000ms var(--ease-out) infinite; }
.live-dot.is-down { background: var(--down); } .live-dot.is-down::after { border-color: var(--down); }
.live-dot.is-idle { background: var(--fg-3); } .live-dot.is-idle::after, .live-dot.still::after { display: none; }
.page-hidden .live-dot::after { animation: none; }

/* ---------- Skip link ---------- */
.skip {
  position: fixed; left: var(--s-4); top: -64px; z-index: var(--z-skip);
  height: var(--ctl); padding: 0 var(--s-3); display: inline-flex; align-items: center;
  background: var(--accent); color: var(--accent-ink); border-radius: var(--r-2); font-weight: var(--w-6);
  transition: top var(--t-1) var(--ease-out);
}
.skip:focus { top: var(--s-2); }

.noscript { padding: var(--s-4) var(--gutter); background: var(--accent-a08); border-bottom: 1px solid var(--accent-a16); color: var(--fg-1); font-size: var(--t-13); }