/* ==========================================================
   Base — reset / 排版 / 工具类 / 转场
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: var(--shell-gap);
  min-height: 100vh;
  background: var(--s-canvas);
  color: var(--t-primary);
  font-family: var(--f-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img, svg { max-width: 100%; }
svg { flex: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--b-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ---------- 工具类 ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 300;
  padding: 10px 16px;
  background: var(--roach-500); color: #fff;
  border-radius: var(--r-sm);
  transform: translateY(-180%);
  transition: transform var(--d-normal) var(--e-standard);
}
.skip-link:focus { transform: none; }

.row    { display: flex; align-items: center; gap: var(--gap, 8px); }
.stack  { display: grid; gap: var(--gap, 12px); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.grow   { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.mono { font-family: var(--f-mono); font-size: var(--fs-sm); letter-spacing: 0.01em; }
.muted  { color: var(--t-secondary); }
.dim    { color: var(--t-tertiary); }

/* ---------- 标题 ---------- */
.h-page {
  font-family: var(--f-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
}
.h-sec {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-heading);
}

/* ---------- 转场 ---------- */
@keyframes view-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}
.view-enter > * { animation: view-in var(--d-slow) var(--e-emphasized) both; }
.view-enter > *:nth-child(1) { animation-delay: 0ms; }
.view-enter > *:nth-child(2) { animation-delay: 40ms; }
.view-enter > *:nth-child(3) { animation-delay: 80ms; }
.view-enter > *:nth-child(4) { animation-delay: 120ms; }
.view-enter > *:nth-child(n+5) { animation-delay: 150ms; }

#route-progress {
  position: fixed; inset-inline: 0; top: 0; z-index: 250;
  height: 2px;
  background: var(--roach-500);
  transform-origin: left;
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
}
#route-progress.is-running { animation: route-bar 480ms var(--e-standard) forwards; }
@keyframes route-bar {
  0%   { transform: scaleX(0); opacity: 1; }
  70%  { transform: scaleX(0.86); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ---------- Toast ---------- */
#toast-region {
  position: fixed; left: 50%; bottom: 32px; z-index: 260;
  display: grid; gap: 8px; justify-items: center;
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--n-900); color: #fff;
  font-size: var(--fs-md);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-float);
  animation: toast-in var(--d-normal) var(--e-emphasized) both;
}
.toast[data-leaving] { animation: toast-out var(--d-normal) var(--e-standard) both; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(14px); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(8px); } }

/* ---------- 滚动条 ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}