/* ==========================================================================
   ui-kit.css — 按钮与页签的唯一规范层
   加载顺序：style.css → reference-layout.css → layout.css → ui-kit.css（本文件）
   覆盖原则：只覆盖「尺寸 / 状态 / 圆角 / 焦点」，不改配色令牌（配色仍由 layout.css 决定）。
   ========================================================================== */

/* ---------- 1. 规范令牌 ---------- */
:root {
  /* 圆角：全站按钮只用一档，old .btn-sm 的 8px 例外取消 */
  --ui-r: 10px;

  /* 尺寸：三档，36/44/52 是刻意的，不要临时加减 */
  --ui-h-sm: 36px;   /* 导航、行内小按钮（触屏自动升到 44） */
  --ui-h: 44px;      /* 默认 */
  --ui-h-lg: 52px;   /* 首屏主行动 */

  /* 状态时长：150–200ms，超过 250ms 会显得迟钝 */
  --ui-dur: 180ms;
  --ui-ease: cubic-bezier(.2, .7, .3, 1);

  /* hover / press 用显式令牌，不用硬编码颜色，深浅主题各给一份 */
  --accent-hover: #b23c10;
  --accent-press: #9c330c;
  /* 页签选中态：浅色主题往上提亮，深色主题也是往上提亮（都算「浮起来」） */
  --ui-raised: #ffffff;
}
[data-theme="dark"] {
  --accent-hover: #ffab63;
  --accent-press: #ee8636;
  --ui-raised: #2c2c2c;
}

/* ---------- 2. 按钮基类 ---------- */
.btn,
.button {                    /* .button 是旧类名，保留别名避免遗漏 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--ui-h);
  min-height: var(--ui-h);
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--ui-r);
  font: 500 14px/1 var(--font);
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background-color var(--ui-dur) var(--ui-ease),
    border-color var(--ui-dur) var(--ui-ease),
    color var(--ui-dur) var(--ui-ease),
    box-shadow var(--ui-dur) var(--ui-ease),
    transform var(--ui-dur) var(--ui-ease);
}
/* 旧的 globe 光斑 ::after 已被 layout.css 关掉，这里彻底移除，省一层合成 */
.btn::after { display: none !important; }
.btn span,
.button span { font-size: inherit; }

/* 尺寸 */
.btn-sm { height: var(--ui-h-sm); min-height: var(--ui-h-sm); padding: 0 14px; font-size: 13px; }
.btn-lg { height: var(--ui-h-lg); min-height: var(--ui-h-lg); padding: 0 26px; font-size: 15px; }
.btn-block { display: flex; width: 100%; height: var(--ui-h); }

/* ---------- 3. 三个变体，不再增加 ---------- */
/* 主：实心 */
.btn-solid,
.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn-solid:hover,
.button.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
}
.btn-solid:active,
.button.primary:active {
  background: var(--accent-press);
  border-color: var(--accent-press);
  transform: translateY(0) scale(.985);
}

/* 次：描边（透明底，不用灰底，避免和主按钮抢视觉） */
.btn-line,
.button.secondary {
  background: transparent;
  border-color: var(--outline);
  color: var(--ink);
}
.btn-line:hover,
.button.secondary:hover {
  background: var(--surface);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.btn-line:active,
.button.secondary:active {
  background: var(--surface);
  transform: translateY(0) scale(.985);
}

/* 第三：文字 */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.btn-ghost:hover {
  background: var(--surface);
  color: var(--ink);
  transform: none;
}
.btn-ghost:active { background: var(--surface); transform: scale(.985); }

/* ---------- 4. 状态：焦点 / 禁用 / 触屏 ---------- */
/* 焦点只能用 focus-visible，鼠标点击不弹环 */
.btn:focus-visible,
.button:focus-visible,
.theme-toggle:focus-visible,
.tabs [role="tab"]:focus-visible,
.nav-links a:focus-visible,
.link-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 禁用：统一转中性灰，不保留主色（半透明橙色会看着像坏了），且不再响应 hover */
.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled,
.button:disabled,
.button[aria-disabled="true"] {
  background: var(--surface);
  border-color: var(--outline);
  color: var(--muted);
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
  transform: none !important;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover,
.button:disabled:hover {
  background: var(--surface);
  border-color: var(--outline);
  color: var(--muted);
  transform: none !important;
}
.btn[aria-busy="true"] {
  cursor: progress;
  opacity: .8;
}

/* 触屏：所有可点元素垫到 44px，不靠 hover 传达信息 */
@media (pointer: coarse) {
  .btn,
  .btn-sm,
  .button,
  .theme-toggle,
  .nav-links a,
  .link-arrow {
    min-height: 44px;
  }
  .btn:hover,
  .btn-line:hover,
  .btn-solid:hover { transform: none; }
}

/* ---------- 5. 主题开关：和按钮同高同圆角，不再做胶囊 ---------- */
.theme-toggle {
  height: var(--ui-h-sm);
  min-height: var(--ui-h-sm);
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--ui-r);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  gap: 7px;
  transition: background-color var(--ui-dur) var(--ui-ease), color var(--ui-dur) var(--ui-ease);
}
.theme-toggle:hover { background: var(--outline); }
.theme-toggle:disabled { opacity: 1; cursor: progress; }
.theme-toggle svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---------- 6. 行内文字按钮（卡片底部） ---------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--ui-h-sm);
  min-height: var(--ui-h-sm);
  padding: 0;
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  transition: color var(--ui-dur) var(--ui-ease);
}
.link-arrow:hover { color: var(--accent); }
.link-arrow .i-arrow { transition: transform var(--ui-dur) var(--ui-ease); }

/* ==========================================================================
   7. 页签（tab）
   nav 里的是「页内导航」，语义用 <nav> + aria-current="location"，
   不加 role="tablist"（那表示切换面板，会让读屏器误报）。
   弹层里的是真页签，用标准 tablist / tab / tabpanel 三件套。
   ========================================================================== */

/* 7.1 导航页签 */
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--ui-h);      /* 触控热区 44px，视觉仍是文字 */
  padding: 0 2px;
  color: var(--muted);
  transition: color var(--ui-dur) var(--ui-ease);
}
/* 指示条贴着文字走，不贴盒子底边 */
.nav-links a::after {
  height: 2px;
  bottom: calc(50% - 11px);
  background: var(--accent);
  transition: transform var(--ui-dur) var(--ui-ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current] { color: var(--ink); }
.nav-links a[aria-current]::after { transform: scaleX(1); }

/* 7.2 分段式页签组件 */
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 18px;
  background: var(--surface);
  border-radius: 12px;
}
.tabs [role="tab"] {
  flex: 1 1 0;
  min-height: var(--ui-h-sm);
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: 500 13px/1 var(--font);
  cursor: pointer;
  transition: background-color var(--ui-dur) var(--ui-ease), color var(--ui-dur) var(--ui-ease);
}
.tabs [role="tab"]:hover { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] {
  background: var(--ui-raised);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
[data-theme="dark"] .tabs [role="tab"][aria-selected="true"] {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
}
[role="tabpanel"] { min-height: 96px; }
[role="tabpanel"][hidden] { display: none; }
[role="tabpanel"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.panel-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
}

/* ==========================================================================
   8. 弹层修正
   style.css 里 .dialog-top / .dialog-brand / .dialog-note / .dialog-actions
   漏写了前面的点，写成了 dialog-top{...} 这种元素选择器，等于完全没生效。
   这里补正确写法。
   ========================================================================== */
.dialog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.dialog-brand {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .02em;
}
.dialog-top button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--ui-r);
  background: var(--surface);
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  transition: background-color var(--ui-dur) var(--ui-ease), color var(--ui-dur) var(--ui-ease);
}
.dialog-top button:hover { background: var(--outline); color: var(--ink); }
.dialog-top button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dialog-note {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
/* 弹层里正文与后续控件的呼吸位；原来 p 直接贴着按钮 */
#panelBody > p { margin: 0 0 18px; }
#panelBody > p.dialog-note { margin: 20px 0 0; }
#panelBody > p:last-child:not(.dialog-note) { margin-bottom: 0; }
#panelBody > .tabs + [role="tabpanel"] > .btn { margin-top: 4px; }
/* 按钮组下方的结果行，别贴着按钮 */
#panelBody > .dialog-actions + p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.dialog-actions .btn,
.dialog-actions .button { height: var(--ui-h); min-height: var(--ui-h); font-size: 14px; }

.option-row {
  border-radius: var(--ui-r);
  transition: background-color var(--ui-dur) var(--ui-ease);
}
a.option-row:hover,
button.option-row:hover { background: var(--outline); }

/* 页脚链接在触屏上同样垫到 44 */
@media (pointer: coarse) {
  .foot-col a,
  .foot-col button,
  .theme-toggle,
  .dialog-top button { min-height: 44px; }
}