/* server-dsh · 基础样式
 *
 * 职责：重置、排版基线、移动端视口修正、无障碍降级。
 * 不包含任何具体组件样式（那些在 login.css / admin.css）。
 *
 * 三个关键点（都是移动端踩过坑的地方）：
 *   1. 高度用 100dvh 而非 100vh —— 移动端地址栏伸缩会让 100vh 溢出
 *   2. env(safe-area-inset-*) 处理刘海与手势条
 *   3. touch-action: manipulation 去掉 300ms 点击延迟
 */

/* ── 重置 ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* 防止 iOS 横屏时自动放大字号 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* 去掉移动端点击高亮（我们用自己的 focus/hover 反馈） */
button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── 文档基线 ─────────────────────────────────────────── */
html,
body {
  height: 100%;
}

body {
  min-height: 100dvh;                 /* 动态视口高度，见头部注释 */
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-normal);

  /* 移动端安全区：刘海、圆角、手势条 */
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);

  /* 禁用横向滚动（移动端最常见的布局事故） */
  overflow-x: hidden;
}

/* ── 排版 ─────────────────────────────────────────────── */
h1 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

p {
  line-height: var(--line-height-base);
}

small,
.text-muted {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

code,
pre {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}

/* ── 链接 ─────────────────────────────────────────────── */
a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ── 表单控件（统一外观，供 login/admin 复用）───────────── */
label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-3);
  background: var(--input-bg);
  color: var(--color-text);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-control);
  transition: border-color var(--dur-fast) var(--ease-standard);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-faint);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-focus);
}

/* 禁用态：降低不透明度并改光标，避免"点了没反应"的困惑 */
input:disabled,
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── 按钮 ─────────────────────────────────────────────── */
button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);        /* 触控目标下限 */
  padding: var(--space-3) var(--space-4);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-instant) var(--ease-standard);
}

button:hover:not(:disabled),
.btn:hover {
  border-color: var(--color-border-strong);
}

/* 按下时轻微下沉，给出触觉反馈（移动端尤其重要） */
button:active:not(:disabled),
.btn:active {
  transform: translateY(1px);
}

.btn-primary,
button.primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-bg);
}

.btn-primary:hover:not(:disabled),
button.primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.btn-block {
  width: 100%;
}

/* ── 卡片 ─────────────────────────────────────────────── */
.card {
  padding: var(--space-5);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
}

/* ── 焦点可见性（键盘可达性）─────────────────────────────
 * 只在键盘导航时显示焦点环，鼠标点击不显示（避免视觉噪声）。
 */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* 仅供读屏器使用的文本 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── 跳到主内容（键盘可达性）────────────────────────────
 * 平时移出视口，仅在键盘聚焦时滑入。
 * ⚠️ 若缺少这段样式，"跳到主内容"链接会**可见地显示在每页顶部**，
 *    看起来像布局事故。base.html 引用了该类名，务必保持成对。
 */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-bg);
  border-radius: var(--radius-control);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-standard);
}

.skip-link:focus {
  top: env(safe-area-inset-top, 0px);
  margin-top: var(--space-3);
  text-decoration: none;
}

/* ── 无障碍：减少动效偏好 ───────────────────────────────
 * 用户在系统里开启"减少动态效果"时，把一切动画压到近似瞬时。
 * 登录页的台灯动画也会据此降级（见 login.css 与 media.js）。
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 无障碍：高对比度偏好 ───────────────────────────────
 * 颜色覆盖**不在此处定义**——按「tokens.css 是颜色的唯一真源」原则，
 * 该媒体查询的色值全部写在 tokens.css 末尾，此处只登记约定。
 */

/* ── 响应式断点参考（PLAN.md 第 2.5 章）───────────────────
 *   ≤480px    移动（华为 Mate 60 Pro 428×926、Redmi K90 Pro Max 412×893）
 *   481–1024  平板
 *   >1024     桌面
 * 具体布局在各组件 CSS 内实现，此处只登记断点约定。
 */