/* ==========================================================================
   Hongguo 壳层样式（app.css）
   --------------------------------------------------------------------------
   职责：基础 reset、壳层布局（页头 / 主区 / 页脚）、视图切换、Toast，
   以及 MASTER §6 定义的全局共享组件（Button / Input / Card / Tag /
   CodeBlock / Empty·Error State）。
   变量契约：web/css/tokens.css（TOKEN_SOT.md 冻结 --color-* 蓝系，禁止
   --hg-*）；规则契约：design-system/MASTER.md（§4 动效白名单、§5 布局、
   §6 组件规格）。组件内不写裸 hex；组件尺寸取 MASTER 规格值。
   P2-1：.empty-state / .error-state 通用定义收敛于本文件（唯一一处），
   search.css 只保留差异化补充（.empty-state__chips / .error-state__retry）。
   不重复定义 search.css 已落地的 .chip / .skeleton，避免级联打架。
   ========================================================================== */

/* ------------------------------------------------------------------
   1. 基础
   ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light; /* 本期仅亮色（MASTER §9：暗色主题边界外） */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.5; /* MASTER §3：正文行高 1.5 */
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg); /* 灰底衬白卡（MASTER §2.1） */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

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

button {
  cursor: pointer; /* MASTER §6：所有可点击元素 cursor:pointer */
  background: none;
  border: 0;
  padding: 0;
}

a {
  color: var(--color-accent-strong); /* 正文级链接用 accent-strong（§2.2） */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* 焦点环永远可见（MASTER §6 统一规则 / §8）
   搜索胶囊内的 input 由 .search-box:focus-within 统一画环，排除以免双框 */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--ring-width) var(--ring);
}

.search-box__input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ------------------------------------------------------------------
   2. 壳层布局（MASTER §5）
   ------------------------------------------------------------------ */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 吸顶头部：毛玻璃只许此处（§5） */
.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--color-border);
}

.app-header__inner {
  max-width: var(--container-max);
  height: var(--header-height);
  margin: 0 auto;
  padding: 0 var(--space-4); /* §5：容器两侧 padding space-4 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg); /* 头部 wordmark 17（§3 字阶表） */
  line-height: 1.25;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
}

.app-brand:hover {
  text-decoration: none;
}

.app-brand__mark {
  color: var(--color-accent);
  flex: none;
}

.app-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* 导航链接 = Ghost 按钮观感（§6.1 Ghost） */
.app-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard);
}

.app-nav__link:hover {
  background: var(--color-fill);
  color: var(--color-text); /* color 不在动效白名单（§4），瞬时切换 */
  text-decoration: none;
}

.app-main {
  flex: 1;
  width: 100%;
  max-width: var(--container-max); /* 单列内容容器（§5） */
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-12);
}

.view {
  width: 100%;
}

.view[hidden] {
  display: none;
}

.view:focus {
  outline: none; /* SPA 视图切换的程序性焦点不画环；键盘 :focus-visible 不受影响 */
}

/* 视图进场：淡入 + 上移，--dur-base（§4 位移 ≤4px 之外的入场 8px 为规格值） */
.view--enter {
  animation: app-view-in var(--dur-base) var(--ease-standard);
}

@keyframes app-view-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* 页脚：服务状态一行；圆点必配文字（§2.2 状态不只靠颜色） */
.app-footer {
  padding: var(--space-6) var(--space-4);
  display: flex;
  justify-content: center;
}

.app-footer__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-tertiary);
}

.status-dot {
  width: 8px; /* §6.4 状态圆点 8×8 规格值 */
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-text-tertiary);
  flex: none;
}

.status-dot--pending {
  background: var(--color-warning);
}

.status-dot--ok {
  background: var(--color-success);
}

.status-dot--bad {
  background: var(--color-danger);
}

.noscript {
  max-width: var(--container-max);
  margin: var(--space-8) auto;
  padding: 0 var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  text-align: center;
}

/* ------------------------------------------------------------------
   3. 共享组件（MASTER §6）
   ------------------------------------------------------------------ */

/* ---- Button（§6.1） ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2); /* 图标与文字间距（§6.1） */
  height: var(--control-height);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1; /* 单行 UI 文字行高 1（§3） */
  white-space: nowrap;
  user-select: none;
  transition: background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.btn:disabled,
.btn.is-disabled {
  opacity: 0.45; /* §6.1 禁用态 */
  cursor: default;
  pointer-events: none;
}

.btn--primary {
  background: var(--color-accent-strong);
  color: var(--color-toast-text);
  font-weight: 600; /* 600 只给标题与 Primary（§3） */
}

.btn--primary:hover {
  background: var(--color-accent-hover);
  box-shadow: var(--shadow-card);
}

.btn--primary:active {
  transform: scale(0.98); /* §6.1 Primary 按下 */
}

.btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn--secondary:hover {
  border-color: var(--color-text-tertiary);
  box-shadow: var(--shadow-card);
}

.btn--secondary:active {
  background: var(--color-fill);
}

.btn--ghost {
  color: var(--color-text-secondary);
}

.btn--ghost:hover {
  background: var(--color-fill);
  color: var(--color-text);
}

.btn--ghost:active {
  background: var(--color-fill-strong);
}

.btn--danger {
  background: var(--color-surface);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.btn--danger:hover {
  background: var(--color-fill);
}

.btn--danger:active {
  background: var(--color-fill-strong);
}

/* 行内小号按钮（§6.1）；.btn--sm 为 detail.js 实际使用的等价别名 */
.btn--small,
.btn--sm {
  height: var(--control-height-sm);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}

/* loading 防重：脚本侧加 .is-loading 并内嵌 .spinner（§6.1 加载态） */
.btn.is-loading {
  pointer-events: none;
}

.btn .btn-icon {
  display: inline-flex;
  flex: none;
}

/* 加载指示器：16px、2px 描边 accent、1s 线性无限（§6.1 规格） */
.spinner {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex: none;
  border: 2px solid var(--color-accent);
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: app-spin 1s linear infinite;
}

@keyframes app-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- 输入框（§6.2 同款表面与聚焦规则） ---- */
.input {
  display: block;
  width: 100%;
  height: var(--control-height-lg);
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.input::placeholder {
  color: var(--color-text-tertiary);
}

.input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 var(--ring-width) var(--ring);
}

.input--hero {
  height: var(--search-hero-height);
  border-radius: var(--radius-full); /* §6.2：搜索框胶囊圆角 */
}

/* ---- 卡片（§6.5 整行卡片同款表面；§6.3 悬停浮起） ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard);
}

.card--hover:hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(-2px); /* §6.3 悬停位移规格 */
}

.card:focus-visible {
  box-shadow: var(--shadow-card), 0 0 0 var(--ring-width) var(--ring);
}

/* ---- Badge / Tag（§6.4） ---- */
.tag {
  display: inline-flex;
  align-items: center;
  height: 20px; /* §6.4 徽章高 20 规格值 */
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-fill);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

/* 选中态（详情页变体单选，§6.4） */
.tag--active {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  border-color: var(--color-accent);
}

/* ---- CodeBlock 密钥 / 命令块（§6.6） ---- */
.code-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* 单行：横向滚动 + user-select:all；同时覆盖 detail.js 的 .code-chip > code */
.code-chip__text,
.code-chip > code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap; /* 禁止自动折行，保证完整可复制（§6.6） */
  font-family: var(--font-mono);
  font-feature-settings: var(--font-feature-tnum); /* 数字/hex 等宽（§3） */
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
  user-select: all; /* §6.6 单行密钥规格 */
}

/* ---- Empty / Error State（§6.9，全站唯一通用定义，P2-1） ---- */
.empty-state,
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 400px; /* §6.9 居中窄栏 */
  margin: 0 auto;
  padding: var(--space-12) var(--space-4);
  text-align: center;
}

.empty-state__icon,
.error-state__icon {
  display: flex;
  width: 48px; /* §7：空态固定 48px 规格值 */
  height: 48px;
  color: var(--color-text-tertiary);
}

.empty-state__icon svg,
.error-state__icon svg {
  width: 100%;
  height: 100%;
}

.empty-state__title,
.error-state__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.25; /* 标题行高 1.25（§3） */
  color: var(--color-text);
}

/* __hint / __reason 为 search.js 实际使用的等价别名 */
.empty-state__desc,
.empty-state__hint,
.error-state__reason {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.empty-state__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}

/* ---- Toast（§6.7，对接 web/js/toast.js） ---- */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: min(420px, calc(100vw - var(--space-8)));
  padding: var(--space-2) var(--space-4);
  background: var(--color-toast-bg); /* 深色胶囊，全站唯一反色元素（§2.1） */
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-overlay);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-toast-text);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease-spring),
    transform var(--dur-slow) var(--ease-spring); /* spring 仅 Toast（§4） */
}

.toast--in {
  opacity: 1;
  transform: translateY(0);
}

.toast--out {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard);
}

/* 左侧 14px 线性图标，色 --color-toast-text；形状区分类型不靠颜色（§6.7）。
   mask 图形为 Lucide check / alert-circle（data-uri 内 stroke 只是蒙版形状，
   着色全部来自 token）。 */
.toast--success::before,
.toast--error::before {
  content: "";
  width: 14px; /* §6.7 图标 14px 规格值 */
  height: 14px;
  flex: none;
  background: var(--color-toast-text);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.toast--success::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.toast--error::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
   4. 工具类
   ------------------------------------------------------------------ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.num {
  font-feature-settings: var(--font-feature-tnum);
}