/* ============================================================
   百家姓寻根 bjx —— 姓氏详情页
   依赖 tokens.css + app.css。颜色一律用 --c-* 令牌（§3.3）。
   ============================================================ */

/* 原先这 52 行内联在 show.blade.php 的 <style> 里，且用的是硬编色
   （#8b1a1a / #888 / #333 / #fffdf8…）。迁出时一并换成站内令牌：
   硬编色在暗色模式与主题调整时不跟随，而 CssTokenTest 只扫未定义变量、
   扫不出「该用令牌却写了色值」这一类。 */

.sn-d { max-width: 820px; margin: 0 auto; }

/* ====================== 页头 ====================== */

/* 大字是视觉主体但**不承担标题语义**（H1 让给真实搜索词），故用 span + aria-hidden */
.sn-hd { display: flex; align-items: center; gap: 16px; margin: 8px 0 4px; flex-wrap: wrap; }
.sn-glyph {
  font-family: var(--font-serif); font-size: 3.2rem; font-weight: 800;
  color: var(--c-primary-deep); line-height: 1; flex: none;
}
.sn-hd-t { min-width: 0; flex: 1; }
.sn-hd-t h1 { font-size: var(--t-h1); margin: 0; line-height: 1.25; }
.sn-sub { margin: 4px 0 0; color: var(--c-ink-3); font-size: var(--t-sm); }
.sn-md { margin-left: auto; flex: none; }

/* 结论先行段：GEO 的摘录目标，视觉上要能一眼认出是「答案」 */
.sn-lead {
  background: var(--c-primary-soft); border-radius: var(--radius);
  padding: 12px 16px; margin: 12px 0 4px; line-height: 1.85; color: var(--c-ink);
}
.sn-lead b { color: var(--c-primary-deep); }

/* ====================== 正文分节 ====================== */

.sn-sec { margin: 18px 0; }
.sn-sec h2 {
  font-size: 1.12rem; margin: 0 0 8px; padding-left: 10px;
  border-left: 4px solid var(--c-primary-deep);
}
.sn-body { line-height: 1.95; color: var(--c-ink); }

/* ====================== 常见问题 ====================== */

.sn-faq details {
  border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 10px 14px; margin: 8px 0; background: var(--c-paper-card);
}
.sn-faq summary {
  cursor: pointer; font-weight: 700; color: var(--c-ink);
  list-style: none; position: relative; padding-right: 22px;
}
.sn-faq summary::-webkit-details-marker { display: none; }
.sn-faq summary::after {
  content: '＋'; position: absolute; right: 0; top: 0; color: var(--c-ink-3); font-weight: 400;
}
.sn-faq details[open] summary::after { content: '－'; }
.sn-faq .sn-body { margin-top: 8px; font-size: var(--t-sm); }

/* ====================== 姓氏配图（田字格） ====================== */

/* 自适应宽高：
   · `height:auto` + 元素自带的 width/height 属性 → 浏览器按真实比例预留版位，防 CLS，
     且**改了 config 里的出图尺寸也不用回头改 CSS**（属性值就是从 config 渲染的）；
   · ⚠️ **不能用 `object-fit:cover`**：这张图四个角放着生成关键词、站名网址和排名，
     cover 在窄容器下会把它们裁掉——而裁掉的部分恰好是溯源信息，图看着还挺正常。
     改 `contain` 即可，但配上 `height:auto` 后图本来就不会变形，连 object-fit 都不需要；
   · `max-width:100%` 保证在比画布窄的容器里缩小，不撑破版面。 */
.sn-fig { margin: 14px 0 6px; }
.sn-fig img {
  display: block; width: 100%; max-width: 100%; height: auto;
  border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-paper);
}
.sn-fig figcaption { margin-top: 6px; font-size: var(--t-xs); color: var(--c-ink-3); text-align: center; }

/* ====================== 字辈众包 ====================== */

.sn-ug {
  border: 1px solid var(--c-line); border-radius: 12px;
  padding: 14px 16px; margin: 10px 0; background: var(--c-paper-card);
}
.sn-ug-region { font-weight: 700; color: var(--c-primary-deep); margin: 0 0 6px; }
.sn-ug-count { font-weight: 400; color: var(--c-ink-3); font-size: var(--t-sm); }
.sn-ug-item { padding: 8px 0; border-top: 1px dashed var(--c-line); }
.sn-ug-item:first-of-type { border-top: 0; }
.sn-ug-loc { font-weight: 700; color: var(--c-ink); }
.sn-ug-gen { line-height: 1.9; white-space: pre-wrap; color: var(--c-ink); }
.sn-ug-from { font-size: var(--t-sm); color: var(--c-ink-2); margin-top: 4px; }
.sn-ug-from a { color: var(--c-primary-deep); }
.sn-ug-m { font-size: var(--t-xs); color: var(--c-ink-3); margin-top: 4px; }
.sn-from-banner {
  background: var(--c-primary-soft); border-radius: var(--radius);
  padding: 8px 12px; margin: 8px 0; font-size: var(--t-sm);
}
.sn-from-banner a { margin-left: 8px; color: var(--c-primary-deep); }

@media (max-width: 480px) {
  .sn-hd { gap: 10px; }
  .sn-glyph { font-size: 2.4rem; }
  .sn-hd-t h1 { font-size: 1.15rem; }
  .sn-sub { font-size: var(--t-xs); }
  .sn-md { margin-left: 0; width: 100%; }
}

/* ====================== 字辈提交表单 ====================== */

.sn-form {
  border: 1px solid var(--c-line); border-radius: 12px;
  padding: 16px; background: var(--c-paper); margin-top: 10px;
}
.sn-form .row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.sn-form input, .sn-form textarea, .sn-form select {
  padding: 9px 11px; border: 1px solid var(--c-line); border-radius: 8px; font-size: 15px;
}
.sn-form textarea { width: 100%; min-height: 80px; resize: vertical; font-family: inherit; }
.sn-form .fx { flex: 1; min-width: 130px; }
.sn-cas { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 220px; }
.sn-cas select { flex: 1; min-width: 92px; background: var(--c-paper-card); }
.sn-field-label { font-size: .82rem; color: var(--c-ink-3); margin: 2px 0 4px; }
.sn-cap { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--c-ink-2); }
.sn-cap input { width: 80px; }
.sn-msg { font-size: .88rem; margin-left: 8px; }

/* 蜜罐：必须在视口外且不可聚焦，不能用 display:none（部分机器人会跳过隐藏域） */
.sn-hp { position: absolute !important; left: -9999px !important; }

.sn-more { margin: 6px 0 10px; }
.sn-more > summary {
  cursor: pointer; color: var(--c-ink-3); font-size: .9rem; user-select: none; list-style: none;
}
.sn-more > summary::-webkit-details-marker { display: none; }
.sn-more > summary::before { content: '▸ '; color: var(--c-gold); }
.sn-more[open] > summary::before { content: '▾ '; }

/* ====================== 名人 / 相关姓氏 / 免责 ====================== */

.sn-people { display: flex; flex-wrap: wrap; gap: 8px; }
.sn-people a {
  display: flex; flex-direction: column; gap: 2px; padding: .45em .8em;
  background: var(--c-paper-card); border: 1px solid var(--c-line);
  border-radius: 8px; color: var(--c-ink); min-width: 64px;
}
.sn-people a:hover { background: var(--c-primary-soft); }
.sn-people a b { font-size: .98rem; color: var(--c-primary-deep); }
.sn-people a span { font-size: .74rem; color: var(--c-ink-3); }

.sn-related { display: flex; flex-wrap: wrap; gap: 8px; }
.sn-related a {
  width: 42px; height: 42px; line-height: 42px; text-align: center;
  border: 1px solid var(--c-line); border-radius: 8px;
  color: var(--c-primary-deep); font-family: var(--font-serif);
  font-size: 1.2rem; font-weight: 700;
}
.sn-related a:hover { background: var(--c-primary-soft); }

.sn-disc {
  margin-top: 14px; padding: 9px 13px;
  background: var(--c-paper); border: 1px solid var(--c-line);
  border-radius: 8px; color: var(--c-ink-2); font-size: .83rem; line-height: 1.7;
}
/* 验证码图：高度对齐输入框，防止换行错位 */
.sn-cap-q { height: 38px; border-radius: 6px; border: 1px solid var(--c-line); cursor: pointer; }

/* ====================== 速查表 ====================== */

/* 键值对网格。手机上 dt 不另起一行会挤成两列太窄，故 480 以下改上下堆叠。 */
.sn-facts {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
  margin: 12px 0 4px; padding: 12px 16px;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-paper-card); line-height: 1.8;
}
.sn-facts dt { color: var(--c-ink-3); font-size: var(--t-sm); white-space: nowrap; }
.sn-facts dd { margin: 0; color: var(--c-ink); }

@media (max-width: 480px) {
  .sn-facts { grid-template-columns: 1fr; gap: 2px; padding: 10px 12px; }
  .sn-facts dd { margin-bottom: 6px; }
}

/* ============================================================
   百家姓列表页（index）
   原先这 18 行内联在 index.blade.php 的 <style> 里，且全是硬编色
   （#8a1a1a / #888 / #fff / #eadfc6 / #c9a227…）。硬编色在暗色模式与主题调整时
   不跟随，而 CssTokenTest 只扫「未定义的变量」，扫不出「该用令牌却写了色值」。
   ============================================================ */

.sn-wrap { max-width: 960px; margin: 0 auto; }

/* 首屏封面条已改用公共部件 .ch-cover（app.css），此处不再重复定义 */

.sn-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.sn-search { display: flex; gap: 0; flex: 1; min-width: 200px; max-width: 340px; }
.sn-search input {
  flex: 1; padding: 9px 12px; font-size: 15px;
  border: 1px solid var(--c-line); border-radius: 8px 0 0 8px;
}
.sn-search button {
  border: 0; background: var(--c-primary-deep); color: #fff;
  padding: 0 16px; border-radius: 0 8px 8px 0; cursor: pointer;
}
.sn-sort a { font-size: .86rem; color: var(--c-ink-3); padding: 4px 10px; border-radius: 999px; }
.sn-sort a.on { background: var(--c-primary-deep); color: #fff; }

.sn-az { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 12px; }
.sn-az a {
  width: 26px; height: 26px; line-height: 26px; text-align: center;
  border: 1px solid var(--c-line); border-radius: 6px;
  color: var(--c-ink-2); font-size: .82rem; text-transform: uppercase;
}
.sn-az a.on { background: var(--c-gold); color: #fff; border-color: var(--c-gold); }
.sn-bh-lbl { font-size: .82rem; color: var(--c-ink-3); align-self: center; margin-right: 4px; }

.sn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.sn-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 8px; border: 1px solid var(--c-line); border-radius: 12px;
  background: var(--c-paper-card); color: var(--c-ink); transition: .2s;
}
.sn-card:hover {
  border-color: var(--c-primary); transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(160, 26, 26, .1);
}
.sn-card .sx { font-size: 1.9rem; font-weight: 700; color: var(--c-primary-deep); line-height: 1.2; }
.sn-card .py { font-size: .78rem; color: var(--c-ink-3); }
.sn-card .rk { font-size: .72rem; color: var(--c-gold); }
.sn-intro { color: var(--c-ink-2); line-height: 1.9; font-size: .92rem; margin: 0 0 10px; }

@media (max-width: 480px) {
  .sn-hero { padding: 16px 14px; }
  .sn-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .sn-card { padding: 10px 6px; }
  .sn-card .sx { font-size: 1.6rem; }
}

/* 字辈启用年代：与始迁祖同行，视觉上弱于字辈本身 */
.sn-ug-year {
  display: inline-block; margin-left: 8px;
  font-size: var(--t-xs); color: var(--c-ink-3);
}