/* ========================================
   案例页（2026-09-28 起）
   叠在 style.css 之上，只作用于 body.case-page。
   案例页不加载 main.js：正文自然滚动、没有入场隐藏，禁用 JS 也能完整阅读。
   配色沿用首页四色：橙 --color-secondary / 深底 #050510 / 主文字 --text-primary / 次文字 --text-secondary
   ======================================== */

/* style.css 给首页 html 开了整屏吸附，案例页是长文，关掉 */
html:has(body.case-page) {
  scroll-snap-type: none;
}

.case-page {
  font-family: var(--font-cn);
}

.case-page .circuit-backdrop {
  opacity: 0.08;
}

/* ---------- 顶栏 ---------- */

.case-topbar {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.case-back,
.case-home {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.case-home {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-secondary);
}

.case-back:focus-visible,
.case-home:focus-visible,
.case-article a:focus-visible,
.case-qr summary:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .case-back:hover { color: var(--text-primary); }
}

/* ---------- 正文容器 ---------- */

.case-article {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 0 64px;
  color: rgba(var(--white-rgb), 0.82);
  font-size: 17px;
  line-height: 1.75;
}

.case-article > section {
  margin-top: 48px;
}

.case-article p + p,
.case-article p + ul,
.case-article p + ol,
.case-article ul + p,
.case-article ol + p {
  margin-top: 16px;
}

.case-article h2 {
  margin-bottom: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--white-rgb), 0.08);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
}

.case-article strong {
  color: var(--text-primary);
  font-weight: 600;
}

.case-article ul,
.case-article ol {
  padding-left: 24px;
}

.case-article li + li {
  margin-top: 8px;
}

.case-article li::marker {
  color: rgba(var(--accent-rgb), 0.8);
}

.case-article code {
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: #ffd76f;
  background: rgba(var(--white-rgb), 0.05);
  word-break: break-word;
}

.case-article a {
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- 标题区 ---------- */

.case-kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(var(--accent-rgb), 0.85);
}

.case-head h1 {
  margin-top: 16px;
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}

/* 前缀 .case-article：要压过上面 .case-article ul / li + li 的通用列表样式 */
.case-article .case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.case-article .case-meta li {
  margin: 0;
  padding: 4px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  border: 1px solid rgba(var(--white-rgb), 0.12);
}

.case-article .case-meta li.is-open {
  color: var(--text-primary);
  border-color: rgba(var(--accent-rgb), 0.45);
}

/* ---------- 摘要 ---------- */

.case-summary {
  margin-top: 32px;
  padding: 24px;
  border-left: 2px solid var(--color-secondary);
  background-color: rgba(5, 5, 16, 0.93);
  background-image: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), transparent 60%);
}

.case-summary p {
  color: var(--text-primary);
}

/* ---------- 步骤 ---------- */

.case-article .case-steps {
  counter-reset: step;
  list-style: none;
  padding-left: 0;
}

.case-steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 48px;
}

.case-article .case-steps > li + li {
  margin-top: 24px;
}

.case-steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--color-secondary);
}

.case-steps .step-title {
  display: block;
  margin-bottom: 4px;
  color: var(--text-primary);
  font-weight: 600;
}

/* ---------- 代码块 ---------- */

.case-article pre {
  margin-top: 16px;
  padding: 16px 24px;
  overflow-x: auto;
  border-left: 2px solid rgba(var(--accent-rgb), 0.6);
  background: rgba(5, 5, 16, 0.93);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
}

.case-article pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  background: none;
}

.case-article pre .c {
  color: var(--text-secondary);
}

/* ---------- 注释块 ---------- */

.case-note {
  margin-top: 16px;
  padding: 16px 24px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  border: 1px dashed rgba(var(--white-rgb), 0.18);
}

/* ---------- 表格：宽表只在容器内横向滚动 ---------- */

.case-table-wrap {
  margin-top: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.case-article table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
  background: rgba(5, 5, 16, 0.93);
}

.case-article th,
.case-article td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(var(--white-rgb), 0.08);
}

.case-article th {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.case-article td:first-child {
  color: var(--text-primary);
}

.case-table-scope td:first-child {
  white-space: nowrap;
}

/* 两列 / 三列的短表不需要 560px 下限，手机上直接换行，不必横滑 */
.case-article .case-table-scope,
.case-article .case-table-verify,
.case-article .case-table-frame {
  min-width: 0;
}

/* 步骤里嵌的表（CASE/02 帧格式比对）上下留白 */
.case-steps .case-table-wrap {
  margin: 16px 0;
}

/* 帧格式表四列都短，表头不换行的话手机上会撑到 495px 横滑（390 视口实测） */
.case-article .case-table-frame th {
  white-space: normal;
}

@media (max-width: 767px) {
  /* 手机上让这张表跳出步骤的 40px 缩进、字号降一档：
     缩进内只有 310px（390 视口）/ 280px（360 视口），而表的最小内容宽约 326px */
  .case-steps .case-table-wrap {
    margin-left: -40px;
  }

  .case-article .case-table-frame th,
  .case-article .case-table-frame td {
    padding: 8px 6px;
    font-size: 13px;
  }
}

/* ---------- 引述（客户原话等） ---------- */

.case-article blockquote {
  margin-top: 16px;
  padding: 16px 24px;
  border-left: 2px solid rgba(var(--accent-rgb), 0.6);
  background: rgba(5, 5, 16, 0.93);
  color: var(--text-primary);
}

.case-article blockquote + p {
  margin-top: 16px;
}

/* ---------- 证据类型标签 ---------- */

.ev {
  display: inline-block;
  padding: 0 8px;
  font-size: 12px;
  line-height: 22px;
  white-space: nowrap;
  border: 1px solid;
}

.ev-doc {
  color: var(--color-secondary);
  border-color: rgba(var(--accent-rgb), 0.55);
}

.ev-test {
  color: #050510;
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.ev-infer {
  color: var(--text-secondary);
  border-style: dashed;
  border-color: rgba(var(--white-rgb), 0.3);
}

.ev-open {
  color: var(--text-primary);
  border-style: dashed;
  border-color: rgba(var(--accent-rgb), 0.55);
}

/* ---------- 案例索引页（cases.html）---------- */

.case-article .case-list {
  list-style: none;
  padding-left: 0;
  border-top: 1px solid rgba(var(--white-rgb), 0.1);
}

.case-article .case-list > li + li {
  margin-top: 0;
}

.case-card {
  position: relative;
  display: block;
  padding: 24px;
  border-bottom: 1px solid rgba(var(--white-rgb), 0.08);
  background-color: rgba(5, 5, 16, 0.93);
  background-image: linear-gradient(90deg, rgba(var(--accent-rgb), 0.05), transparent 60%);
  transition: background-color 0.3s ease;
}

/* 左侧那条橙线与首页作品清单同一语言：常驻短、hover 拉满 */
.case-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-secondary);
  transform: scaleY(0.2);
  opacity: 0.6;
  transition: transform 0.3s var(--ease-smooth), opacity 0.3s ease;
}

.case-article a.case-card {
  color: inherit;
  text-decoration: none;
}

.case-article a.case-card:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
  .case-card:hover {
    background-color: rgba(var(--accent-rgb), 0.06);
  }

  .case-card:hover::before {
    transform: scaleY(1);
    opacity: 1;
  }

  .case-card:hover .case-card-title {
    color: var(--color-secondary);
  }
}

.case-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.case-card-code {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--color-secondary);
}

.case-card-type {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.case-card-title {
  display: block;
  margin-top: 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text-primary);
  transition: color 0.2s ease;
}

.case-card-desc {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(var(--white-rgb), 0.62);
}

.case-card-meta {
  display: block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

/* ---------- 联系 ---------- */

.case-contact {
  padding: 32px 24px;
  background-color: rgba(5, 5, 16, 0.93);
  background-image: radial-gradient(ellipse 70% 90% at 12% 30%, rgba(var(--accent-rgb), 0.06), transparent 66%);
  border-top: 1px solid rgba(var(--white-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--white-rgb), 0.1);
}

.case-contact h2 {
  padding-top: 0;
  border-top: 0;
}

.case-contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  margin-top: 24px;
}

.case-article .case-mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 24px;
  font-family: var(--font-mono);
  font-size: 15px;
  color: #050510;
  text-decoration: none;
  background: var(--color-secondary);
}

.case-qr summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 24px;
  font-size: 15px;
  color: var(--color-secondary);
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  cursor: pointer;
  list-style: none;
}

.case-qr summary::-webkit-details-marker {
  display: none;
}

.case-qr summary::after {
  content: '＋';
  margin-left: 8px;
}

.case-qr[open] summary::after {
  content: '－';
}

.case-qr img {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  margin-top: 16px;
  background: #fff;
}

/* ---------- 页脚 ---------- */

.case-foot {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 0 48px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--text-secondary);
}

.case-foot a {
  color: var(--text-secondary);
}

/* ---------- 手机 ---------- */

@media (max-width: 807px) {
  .case-topbar,
  .case-article,
  .case-foot {
    margin-left: 24px;
    margin-right: 24px;
  }
}

@media (max-width: 767px) {
  .case-topbar,
  .case-article,
  .case-foot {
    margin-left: 20px;
    margin-right: 20px;
  }

  .case-topbar {
    padding-top: 16px;
  }

  .case-article {
    padding-top: 32px;
    font-size: 16px;
  }

  .case-article > section {
    margin-top: 40px;
  }

  .case-summary,
  .case-contact,
  .case-card {
    padding: 24px 16px;
  }

  .case-card-title {
    font-size: 18px;
  }

  .case-article .case-steps > li {
    padding-left: 40px;
  }

  .case-article pre {
    padding: 16px;
    font-size: 13px;
  }

  .case-foot {
    flex-direction: column;
  }

  /* 对照表四列在 390px 下要横滑，「类型」列会落到屏外——手机端改成一行一张卡 */
  .case-article .case-table-evidence {
    min-width: 0;
  }

  .case-table-evidence thead {
    display: none;
  }

  .case-table-evidence tbody,
  .case-table-evidence td {
    display: block;
  }

  .case-table-evidence tr {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 8px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(var(--white-rgb), 0.08);
  }

  .case-article .case-table-evidence td {
    grid-column: 2;
    padding: 0;
    border: 0;
  }

  .case-article .case-table-evidence td:first-child {
    grid-column: 1;
    grid-row: 1 / span 3;
    font-family: var(--font-mono);
    color: var(--color-secondary);
  }

  .case-article .case-table-evidence td:nth-child(3) {
    margin-top: 8px;
    font-size: 14px;
    color: var(--text-secondary);
  }

  .case-table-evidence td[data-label]::before {
    content: attr(data-label) '：';
  }

  .case-article .case-table-evidence td:nth-child(4) {
    margin-top: 8px;
  }
}