/* ==========================================================================
   Claude 指南 · 共享样式
   设计原则：内容优先、中性底色 + 卡片承载、每个分组一个强调色。
   ========================================================================== */

/* ---------- 设计令牌 ---------- */
:root {
  color-scheme: light dark;

  --bg: #f6f7f9;
  --bg-elev: #ffffff;
  --bg-subtle: #f1f3f7;
  --bg-code: #f5f6f9;
  --border: #e4e7ed;
  --border-strong: #cfd5df;

  --text: #1a1e26;
  --text-dim: #58606e;
  --text-faint: #8a92a0;
  --link: #3b5bdb;

  --accent-indigo: #4f46e5;
  --accent-sky: #0284c7;
  --accent-violet: #7c3aed;
  --accent-amber: #b45309;
  --accent-emerald: #047857;

  --ok-bg: #e6f6ec;
  --ok-fg: #12724a;
  --off-bg: #eef0f4;
  --off-fg: #6b7280;
  --enum-bg: #e9efff;
  --enum-fg: #2f4fd0;
  --warn-bg: #fdf3e3;
  --warn-fg: #96560a;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 2px 4px rgba(16, 24, 40, 0.05), 0 12px 32px rgba(16, 24, 40, 0.09);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", SF Mono, Menlo, Consolas,
    "Liberation Mono", monospace;

  --maxw: 1080px;
}

/* 深色令牌：既支持手动切换，也跟随系统 */
:root[data-theme="dark"] {
  --bg: #101317;
  --bg-elev: #171b21;
  --bg-subtle: #1c2128;
  --bg-code: #12161b;
  --border: #262c34;
  --border-strong: #384049;

  --text: #e8eaee;
  --text-dim: #a4acb9;
  --text-faint: #78818f;
  --link: #8ab0ff;

  --accent-indigo: #a5b4fc;
  --accent-sky: #7dd3fc;
  --accent-violet: #c4b5fd;
  --accent-amber: #fcd34d;
  --accent-emerald: #6ee7b7;

  --ok-bg: #123024;
  --ok-fg: #6ee7a8;
  --off-bg: #232830;
  --off-fg: #98a1af;
  --enum-bg: #1a2440;
  --enum-fg: #a8c0ff;
  --warn-bg: #33270f;
  --warn-fg: #f7c86a;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101317;
    --bg-elev: #171b21;
    --bg-subtle: #1c2128;
    --bg-code: #12161b;
    --border: #262c34;
    --border-strong: #384049;
    --text: #e8eaee;
    --text-dim: #a4acb9;
    --text-faint: #78818f;
    --link: #8ab0ff;
    --accent-indigo: #a5b4fc;
    --accent-sky: #7dd3fc;
    --accent-violet: #c4b5fd;
    --accent-amber: #fcd34d;
    --accent-emerald: #6ee7b7;
    --ok-bg: #123024;
    --ok-fg: #6ee7a8;
    --off-bg: #232830;
    --off-fg: #98a1af;
    --enum-bg: #1a2440;
    --enum-fg: #a8c0ff;
    --warn-bg: #33270f;
    --warn-fg: #f7c86a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

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

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- 顶部导航 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.01em;
}
.brand:hover {
  text-decoration: none;
}
.brand__mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent-indigo), var(--accent-sky));
  flex: none;
}
.brand__ver {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
}

.topnav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.topnav a {
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 14px;
}
.topnav a:hover {
  background: var(--bg-subtle);
  color: var(--text);
  text-decoration: none;
}
.topnav a[aria-current="page"] {
  background: var(--bg-subtle);
  color: var(--text);
  font-weight: 600;
}

.theme-toggle {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--sans);
}
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

/* ---------- 首屏 ---------- */
.hero {
  padding: 48px 0 28px;
}

.eyebrow {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-indigo);
  margin: 0 0 10px;
}

.hero h1 {
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: -0.022em;
  margin: 0 0 14px;
  font-weight: 700;
}

.lede {
  font-size: 16.5px;
  color: var(--text-dim);
  max-width: 62ch;
  margin: 0 0 8px;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.chip {
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 11px;
}
.chip strong {
  color: var(--text);
  font-weight: 600;
}

/* ---------- 通用区块 ---------- */
.section {
  padding: 26px 0;
}

.section > h2 {
  font-size: 21px;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  font-weight: 680;
}

.section__desc {
  color: var(--text-dim);
  margin: 0 0 20px;
  max-width: 68ch;
}

/* ---------- 分组 ---------- */
.group {
  margin: 34px 0 0;
  scroll-margin-top: 76px;
}

.group__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 18px;
}

.group__head h3 {
  font-size: 18px;
  margin: 0;
  font-weight: 670;
  letter-spacing: -0.01em;
}

.group__count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
  margin-left: auto;
  flex: none;
}

.group__desc {
  color: var(--text-dim);
  font-size: 14.5px;
  margin: -8px 0 20px;
  max-width: 70ch;
}

/* 分组强调色 */
.group[data-accent="indigo"] .group__head {
  border-bottom-color: var(--accent-indigo);
}
.group[data-accent="sky"] .group__head {
  border-bottom-color: var(--accent-sky);
}
.group[data-accent="violet"] .group__head {
  border-bottom-color: var(--accent-violet);
}
.group[data-accent="amber"] .group__head {
  border-bottom-color: var(--accent-amber);
}
.group[data-accent="emerald"] .group__head {
  border-bottom-color: var(--accent-emerald);
}

/* ---------- 配置表格 ---------- */

/* 外层容器负责圆角与横向滚动；table 用 fixed 布局锁定列宽，
   避免某一列内容长时把其它列挤变形。 */
.twrap {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}

.ctable {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
}

/* 列宽：文本列给足空间，标识符列保证 askUserQuestionTimeout
   这类长字段名不会被折断成两行。

   合计 1018px 是按内容实测调的：
   - c-val 给到 180px，刚好容纳最长的枚举值
     "Light mode (colorblind-friendly)" 折行前的主要部分；
     再窄就会把徽章挤出单元格（原先 122px 是溢出主因）。
   - c-key 保留 192px，projectInstructions / switchModelsOnFlag
     这类长字段名能整词显示。
   - 其余三列各让出十几像素，总宽不变，避免出现横向滚动条。 */
.ctable col.c-idx {
  width: 36px;
}
.ctable col.c-name {
  width: 150px;
}
.ctable col.c-val {
  width: 180px;
}
.ctable col.c-desc {
  width: 238px;
}
.ctable col.c-sug {
  width: 222px;
}
.ctable col.c-key {
  width: 192px;
}

/* 表头：浅底 + 下边框，明确「这一列是什么」 */
.ctable thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  background: var(--bg-subtle);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: bottom;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* 用左边框分隔各列，长文本并排时更容易对齐阅读 */
.ctable th + th,
.ctable td + td {
  border-left: 1px solid var(--border);
}

.ctable td {
  padding: 13px 12px;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  line-height: 1.62;
  /* 兜底：列宽固定，任何超长 token（长字段名、长枚举值、
     连写英文单词）都必须能在格内断开，不允许溢出到相邻列上。 */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ctable tbody tr:last-child td {
  border-bottom: 0;
}

/* 行悬浮：整行高亮，便于横向追读一行到底 */
.ctable tbody tr:hover {
  background: var(--bg-subtle);
}

.ctable tbody tr:target {
  background: color-mix(in srgb, var(--link) 11%, transparent);
  box-shadow: inset 3px 0 0 var(--link);
}

/* 分组强调色只染表格左边框，避免 39 行整片着色造成噪音 */
.group[data-accent="indigo"] .twrap {
  border-left: 3px solid var(--accent-indigo);
}
.group[data-accent="sky"] .twrap {
  border-left: 3px solid var(--accent-sky);
}
.group[data-accent="violet"] .twrap {
  border-left: 3px solid var(--accent-violet);
}
.group[data-accent="amber"] .twrap {
  border-left: 3px solid var(--accent-amber);
}
.group[data-accent="emerald"] .twrap {
  border-left: 3px solid var(--accent-emerald);
}

/* --- 单元格内部 --- */

.ctable .c-idx {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
  text-align: right;
  padding-right: 10px;
}

/* 中文名在上、面板英文名在下 */
.cname {
  display: block;
  font-weight: 650;
  letter-spacing: -0.008em;
}

.cen {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 3px;
  word-break: break-word;
}

.ctable .c-desc {
  color: var(--text);
}

.ctable .c-sug {
  color: var(--text-dim);
}

/* 枚举项在「当前值」列下方列出候选值 */
.opts {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.55;
}

.opts__label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.85;
}

.ctable .c-key code.kv {
  display: inline-block;
}

/* 复制按钮：常态低调，悬浮该行时变清晰，避免 39 个按钮抢注意力 */
.ctable .copy-btn {
  display: block;
  opacity: 0.45;
  font-size: 11px;
  padding: 1px 7px;
  margin-top: 6px;
}
.ctable tr:hover .copy-btn,
.ctable .copy-btn:focus-visible {
  opacity: 1;
}

.badge {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  padding: 3px 10px;
  /* 允许换行：列宽是固定的，而 "Light mode (colorblind-friendly)"
     这类长枚举值比列宽还长。不换行就会溢出到右边一列上去。
     圆角用 6px 而非 999px——胶囊形状一旦折成多行会很难看。 */
  white-space: normal;
  overflow-wrap: anywhere;
  display: inline-block;
  max-width: 100%;
  line-height: 1.45;
}
.badge--on {
  background: var(--ok-bg);
  color: var(--ok-fg);
}
.badge--off {
  background: var(--off-bg);
  color: var(--off-fg);
}
.badge--enum {
  background: var(--enum-bg);
  color: var(--enum-fg);
}

.kv {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--text);
  word-break: break-all;
}

.kv--none {
  color: var(--text-faint);
  font-style: italic;
  font-family: var(--sans);
  background: none;
  border-style: dashed;
}

.copy-btn {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-dim);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 9px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.copy-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.copy-btn.is-done {
  color: var(--ok-fg);
  border-color: var(--ok-fg);
  background: var(--ok-bg);
}

/* ---------- 工具条（搜索 / 筛选） ---------- */
.toolbar {
  position: sticky;
  top: 53px;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  padding: 14px 0 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.toolbar__row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.search {
  flex: 1 1 260px;
  position: relative;
  min-width: 200px;
}

.search input {
  width: 100%;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 34px 8px 12px;
}
/* input[type=search] 在 WebKit 上自带一个清除按钮，会和页面自建的
   .search__clear 同时出现，看起来就是两个 ×。
   隐藏原生的那个：自建按钮才能控制配色、深色模式和可访问标签。 */
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.search input:focus {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 18%, transparent);
}
.search input::placeholder {
  color: var(--text-faint);
}

.search__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: var(--text-faint);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  display: none;
}
.search__clear.is-visible {
  display: block;
}

.filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-dim);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
}
.filter:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.filter[aria-pressed="true"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
  font-weight: 600;
}

.result-count {
  font-size: 13px;
  color: var(--text-faint);
  margin: 14px 0 0;
}
.result-count strong {
  color: var(--text);
  font-family: var(--mono);
}

/* 窄屏下宽表格需要横向滑动，给一句提示。
   桌面端不显示（列全放得下），只在 720px 以下出现。 */
.scroll-hint {
  display: none;
  font-size: 13px;
  color: var(--text-faint);
  margin: 10px 0 0;
}

/* 搜索命中高亮 */
mark {
  background: color-mix(in srgb, var(--accent-amber) 32%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}

/* ---------- 空态 ---------- */
.empty {
  text-align: center;
  padding: 56px 20px;
  color: var(--text-dim);
  background: var(--bg-elev);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.empty__title {
  font-size: 16px;
  font-weight: 640;
  color: var(--text);
  margin: 0 0 6px;
}
.empty p {
  margin: 0;
  font-size: 14.5px;
}

/* ---------- 代码块 ---------- */
.codeblock {
  position: relative;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  overflow-x: auto;
}
.codeblock pre {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre;
}
.codeblock .copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* ---------- 提示条 ---------- */
.note {
  display: flex;
  gap: 11px;
  padding: 13px 16px;
  border-radius: var(--radius);
  font-size: 14.5px;
  background: var(--warn-bg);
  color: var(--warn-fg);
  border: 1px solid color-mix(in srgb, var(--warn-fg) 22%, transparent);
  margin: 18px 0;
}
.note p {
  margin: 0;
}
.note strong {
  color: inherit;
}
.note--info {
  background: var(--bg-subtle);
  color: var(--text-dim);
  border-color: var(--border);
}
.note--info strong {
  color: var(--text);
}

/* ---------- 首页卡片网格 ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 14px;
}

.tile {
  display: block;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.tile:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

.tile__status {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 9px;
  display: inline-block;
  margin-bottom: 11px;
}
.tile__status--done {
  background: var(--ok-bg);
  color: var(--ok-fg);
}
.tile__status--planned {
  background: var(--off-bg);
  color: var(--off-fg);
}

.tile h3 {
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 660;
  letter-spacing: -0.012em;
}
.tile p {
  margin: 0;
  font-size: 14px;
  color: var(--text-dim);
}

/* ---------- 页脚 ---------- */
.footer {
  margin-top: 56px;
  padding: 24px 0 40px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 13px;
}
.footer code {
  font-size: 12.5px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
  body {
    font-size: 14.5px;
  }
  .hero {
    padding: 32px 0 20px;
  }
  .hero h1 {
    font-size: 26px;
  }
  .toolbar {
    top: 51px;
  }
  .group__head {
    flex-wrap: wrap;
  }
  .group__count {
    margin-left: 0;
  }

  /* 窄屏下表格保留结构、改为横向滚动。
     表格的优势就是列头对齐，转成堆叠卡片会丢掉这个优势，
     所以这里不改成卡片，而是给一个滑动提示。 */
  .ctable th,
  .ctable td {
    padding: 10px 9px;
  }
  .ctable thead {
    top: 51px;
  }
  .scroll-hint {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .tile,
  .copy-btn,
  .filter {
    transition: none;
  }
  .tile:hover {
    transform: none;
  }
}

/* ---------- 打印 ---------- */
@media print {
  .topbar,
  .toolbar,
  .copy-btn,
  .theme-toggle,
  .scroll-hint {
    display: none;
  }
  .twrap {
    overflow: visible;
    box-shadow: none;
  }
  .ctable {
    min-width: 0;
    font-size: 11px;
  }
  .ctable thead th {
    position: static;
  }
  .ctable tr {
    break-inside: avoid;
  }
}