/* ============================================================
   Claude Guard 样式
   设计理念：借鉴 Pico CSS 的 CSS 变量 / 间距 / 圆角系统 +
   HTML5 Boilerplate 的移动端最佳实践。
   所有颜色通过 --token 引用，暗色模式在 @media 内整体覆盖。
   ============================================================ */

/* ===== 设计 token（亮色默认） ===== */
:root {
  /* 颜色 */
  --primary: #c14a2b;
  --primary-hover: #a83d22;
  --surface: #ffffff;          /* 卡片/面板表面 */
  --surface-alt: #f5f6f8;      /* 页面背景 */
  --surface-sunken: #eef0f3;   /* 凹陷/骨架底色 */
  --border: #e6e8ec;
  --text: #1c2024;
  --muted: #6b7280;
  --red: #d21f3c;   --red-bg: #fdecef;
  --warn: #c77700;  --warn-bg: #fff6e6;
  --white: #12864b; --white-bg: #e9f7ef;   /* “通过” 用绿 */
  --info: #5b6470;  --info-bg: #eef0f3;    /* 中性 / 指纹熵 */
  --claude: #6b34c9; --claude-bg: #efe6ff;
  --sug-ink: #7a5b00;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 1px 3px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.05);

  /* 间距系统 4/8/12/16/24/32 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;

  /* 圆角系统 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* 字号系统 */
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 26px;
  --fs-score: 56px;

  /* 布局 */
  --container-max: 1100px;
  --tap: 44px;                 /* iOS HIG 最小触控区 */

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Roboto Mono", Menlo, monospace;
  --lang-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ===== 暗色模式：整体覆盖 token ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #e0623a;
    --primary-hover: #f0734a;
    --surface: #1a1d21;
    --surface-alt: #14171a;
    --surface-sunken: #0f1215;
    --border: #2c3036;
    --text: #e8eaed;
    --muted: #9aa0a8;
    --red: #ff5470;   --red-bg: #2d1418;
    --warn: #ffb020;  --warn-bg: #2a200a;
    --white: #34c77b; --white-bg: #0f2418;
    --info: #a0a8b4;  --info-bg: #1f2329;
    --claude: #b889ff; --claude-bg: #241834;
    --sug-ink: #d9a84a;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
    --shadow-md: 0 1px 3px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
    --lang-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%239aa0a8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  }
}

/* ===== 基础重置与移动适配（h5bp） ===== */
* { box-sizing: border-box; }
html {
  font-size: 16px;             /* 移动端正文 16px，防 iOS Safari 自动缩放 */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;   /* 防 Android WebKit / 微信 X5 缩放 */
  -webkit-tap-highlight-color: transparent;  /* 去除移动端点击高亮 */
}
body {
  margin: 0;
  background: var(--surface-alt);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  overflow-wrap: break-word;   /* 长字符串防撑破，替代 body 级 overflow-x 以保留 sticky 上下文 */
  text-size-adjust: 100%;
}
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
button {
  font-family: inherit;
  touch-action: manipulation;  /* 去除 300ms 点击延迟 */
}
::selection { background: rgba(193,74,43,.18); }

/* ===== 容器：流体布局，移动占满 / 桌面居中，含 safe-area 适配 ===== */
.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
  padding-top: max(var(--space-xl), env(safe-area-inset-top));
  padding-bottom: max(var(--space-2xl), env(safe-area-inset-bottom));
  padding-left: max(var(--space-lg), env(safe-area-inset-left));
  padding-right: max(var(--space-lg), env(safe-area-inset-right));
}

/* ===== hero ===== */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.brand { display: flex; align-items: center; gap: var(--space-md); min-width: 0; }
.logo { font-size: 34px; color: var(--primary); line-height: 1; flex: none; }
.hero h1 { margin: 0; font-size: var(--fs-2xl); letter-spacing: .5px; line-height: 1.2; }
.sub { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.btn {
  background: var(--primary);
  color: #fff;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  min-height: var(--tap);        /* 触控目标 ≥44px */
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, transform .05s;
  white-space: nowrap;
  touch-action: manipulation;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.98); }

/* ===== verdict card ===== */
.verdict-card {
  display: flex;
  gap: var(--space-2xl);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  border-left: 6px solid var(--border);
  margin-bottom: var(--space-xl);
}
.verdict-card.red { border-left-color: var(--red); }
.verdict-card.warn { border-left-color: var(--warn); }
.verdict-card.white { border-left-color: var(--white); }
.verdict-card.loading { border-left-color: #c9ccd2; }

.gauge { text-align: center; min-width: 120px; flex: none; }
.score { font-size: var(--fs-score); font-weight: 800; line-height: 1; }
.verdict-card.red .score { color: var(--red); }
.verdict-card.warn .score { color: var(--warn); }
.verdict-card.white .score { color: var(--white); }
.score-label { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--space-xs); }

.verdict-body { flex: 1; min-width: 0; }
.badge {
  display: inline-block;
  font-weight: 700;
  font-size: var(--fs-md);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-sm);
}
.badge.red { background: var(--red-bg); color: var(--red); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.white { background: var(--white-bg); color: var(--white); }
.badge.loading { background: var(--info-bg); color: var(--info); }

.headline { margin: var(--space-xs) 0 var(--space-md); font-size: var(--fs-md); line-height: 1.5; }
.mini-counts { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.mc {
  font-size: var(--fs-sm);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--info-bg);
  color: var(--info);
}
.mc.red { background: var(--red-bg); color: var(--red); }
.mc.warn { background: var(--warn-bg); color: var(--warn); }
.mc.white { background: var(--white-bg); color: var(--white); }

/* ===== panel ===== */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-xl);
}
.panel h2 { margin: 0 0 var(--space-lg); font-size: var(--fs-xl); }

/* 说明横幅（网页无法探测项）—— 警示色系，始终可见 */
.notice-panel {
  background: var(--warn-bg);
  border-color: var(--warn);
  border-left: 4px solid var(--warn);
}
.notice-panel h2 { color: var(--warn); margin-bottom: var(--space-sm); }
.notice-panel p { margin: 0; color: var(--text); line-height: 1.6; font-size: var(--fs-sm); }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.panel-head h2 { margin: 0; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--fs-sm); color: var(--muted); }
.lg::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.lg.red::before { background: var(--red); }
.lg.warn::before { background: var(--warn); }
.lg.white::before { background: var(--white); }
.lg.info::before { background: var(--info); }

/* ===== geo ===== */
.geo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.geo-item { background: var(--info-bg); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); }
.gk { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--space-xs); }
.gv { font-size: var(--fs-md); font-weight: 600; word-break: break-all; overflow-wrap: break-word; }
.geo-note {
  grid-column: 1 / -1;
  font-size: var(--fs-sm);
  color: var(--warn);
  background: var(--warn-bg);
  padding: var(--space-md);
  border-radius: var(--radius-md);
}
.skeleton {
  height: 56px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--surface-sunken), var(--surface-alt), var(--surface-sunken));
  background-size: 200% 100%;
  animation: sh 1.2s infinite;
}
@keyframes sh { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* ===== 分类标题 ===== */
.cat {
  font-size: var(--fs-base);
  margin: var(--space-xl) 0 var(--space-md);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 700;
}
.cat em {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 400;
  background: var(--info-bg);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
}

/* ===== 筛选栏：sticky 顶部，移动端横向滚动 ===== */
.filter-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  background: var(--surface);
  padding: var(--space-sm) var(--space-lg) var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}
.fbtn {
  font-size: var(--fs-sm);
  padding: var(--space-xs) var(--space-lg);
  min-height: 36px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s, color .15s;
  touch-action: manipulation;
}
.fbtn:hover { border-color: var(--primary); color: var(--primary); }
.fbtn.active { background: var(--text); color: var(--surface); border-color: var(--text); }

.sig.hidden { display: none; }

/* ===== 信号卡 grid（移动优先单列） ===== */
.sig-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  width: 100%;
}

/* ===== 信号卡 ===== */
.sig {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--surface);
  border-left: 4px solid var(--info);
}
.sig.red { border-left-color: var(--red); }
.sig.warn { border-left-color: var(--warn); }
.sig.white { border-left-color: var(--white); }
.sig.info { border-left-color: var(--info); }

.sig-top {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-xs);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--info); flex: none; }
.sig.red .dot { background: var(--red); }
.sig.warn .dot { background: var(--warn); }
.sig.white .dot { background: var(--white); }
.sig-name { font-weight: 700; font-size: var(--fs-base); }
.verdict-tag {
  font-size: var(--fs-xs);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
  font-weight: 600;
  margin-left: auto;
  flex: none;
}
.verdict-tag.red { background: var(--red-bg); color: var(--red); }
.verdict-tag.warn { background: var(--warn-bg); color: var(--warn); }
.verdict-tag.white { background: var(--white-bg); color: var(--white); }
.verdict-tag.info { background: var(--info-bg); color: var(--info); }
.tag.claude {
  font-size: 10px;
  background: var(--claude-bg);
  color: var(--claude);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.contrib { font-size: var(--fs-xs); color: var(--red); font-weight: 700; }

.sig-val {
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  color: var(--text);
  background: var(--info-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  margin: var(--space-xs) 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  word-break: break-all;
  max-width: 100%;
}
.sig-label { font-size: var(--fs-sm); color: var(--muted); }
.sig-sug {
  font-size: var(--fs-sm);
  color: var(--sug-ink);
  background: var(--warn-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  margin-top: var(--space-sm);
  line-height: 1.45;
  border-left: 2px solid var(--warn);
  overflow-wrap: break-word;
}

/* ===== footer ===== */
.foot {
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
  line-height: 1.7;
  padding-top: var(--space-md);
}

/* ===== Static documentation / intent pages ===== */
.static-page .hero {
  align-items: flex-start;
}
.static-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  font-size: var(--fs-sm);
}
.static-page .panel {
  max-width: 860px;
}
.static-page .panel h2 {
  margin-bottom: var(--space-md);
}
.static-page .panel h3 {
  margin: var(--space-lg) 0 var(--space-sm);
  font-size: var(--fs-lg);
}
.static-page p {
  margin: 0 0 var(--space-md);
}
.static-page code,
.static-page pre {
  font-family: var(--font-mono);
}
.static-page pre {
  overflow-x: auto;
  background: var(--info-bg);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.doc-table th,
.doc-table td {
  border-bottom: 1px solid var(--border);
  padding: var(--space-sm);
  text-align: left;
  vertical-align: top;
}
.doc-table th {
  color: var(--muted);
  font-weight: 700;
}

/* ============================================================
   响应式断点
   默认（移动优先）：单列
   577-768px：单列，加大左右 padding
   769-992px：信号卡 2 列
   ≥993px  ：信号卡 3 列，容器居中 max-width 1100
   ============================================================ */
@media (min-width: 577px) {
  .wrap {
    padding-left: max(var(--space-xl), env(safe-area-inset-left));
    padding-right: max(var(--space-xl), env(safe-area-inset-right));
  }
}
@media (min-width: 769px) {
  .sig-list { grid-template-columns: repeat(2, 1fr); }
  .sig { padding: var(--space-md) var(--space-lg); }
}
@media (min-width: 993px) {
  .sig-list { grid-template-columns: repeat(3, 1fr); }
}

/* ≤576px：紧凑、竖排、触控区加大、筛选栏横向滚动 */
@media (max-width: 576px) {
  .hero { flex-direction: column; align-items: stretch; gap: var(--space-md); }
  .btn { width: 100%; }
  .verdict-card {
    flex-direction: column;
    text-align: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
  }
  .gauge { min-width: 0; }
  .verdict-body { width: 100%; }
  .mini-counts { justify-content: center; }
  .verdict-tag { margin-left: 0; }
  .geo-grid { grid-template-columns: 1fr; }
  .panel { padding: var(--space-lg); }
  .panel-head { flex-direction: column; align-items: flex-start; }
  .legend { gap: var(--space-sm); }
  /* 筛选栏 sticky + 横向滚动（iOS 惯性滚动） */
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--border);
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .fbtn { flex: none; min-height: 40px; }
  .foot { font-size: var(--fs-xs); }
  .score { font-size: 48px; }
  .hero h1 { font-size: var(--fs-xl); }
  .static-nav { justify-content: flex-start; }
  .doc-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  * { transition: none !important; }
}

/* ============================================================
   i18n —— 按语言切换字体栈 + 语言选择器样式
   body class 由 i18n.js setLang 写入：lang-zh-CN / lang-zh-TW / lang-en
   zh-CN 复用 :root 默认字体栈，不单独覆盖
   ============================================================ */
body.lang-en {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
}
body.lang-zh-TW {
  --font-sans: "PingFang TC", "Microsoft JhengHei", "Source Han Sans TW", system-ui, sans-serif;
}

/* hero 右侧操作区：语言选择器 + 重新检测按钮横排 */
.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 语言选择器：下拉式，选项文本用该语言原文名 */
.lang-switcher {
  display: inline-flex;
}
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 32px 0 12px;
  height: var(--tap);
  min-height: var(--tap);
  font-size: var(--fs-sm);
  font-family: var(--font-sans);
  cursor: pointer;
  background-image: var(--lang-arrow);
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color .15s;
  touch-action: manipulation;
}
.lang-select:hover { border-color: var(--primary); }
.lang-select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* 移动端：hero 改竖排后，操作区横向占满，下拉弹性伸展 */
@media (max-width: 576px) {
  .hero-actions { width: 100%; justify-content: stretch; }
  .lang-switcher { flex: 1; min-width: 120px; }
  .lang-select { width: 100%; }
}