/* 代码块「一键复制」按钮（index/docs/bench 共用） */
.copyable { position: relative; }
.copy-btn {
  position: absolute; top: .45rem; right: .45rem;
  font: inherit; font-size: .74rem; line-height: 1;
  padding: .32rem .55rem; border-radius: 3px; cursor: pointer;
  color: #cfd8e3; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  opacity: .55; transition: opacity .15s, background .15s;
}
.copyable:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: rgba(255,255,255,.12); }
.copy-btn.ok { color: #9fe0b8; border-color: #3f7f5a; }
@media (max-width: 640px) { .copy-btn { opacity: 1; } }
/* 一行提示（接入步骤里用） */
.hint { color: var(--color-muted, #8b9aa8); font-size: .86rem; margin: .2rem 0 .6rem; }
h3 > b, h3 > span.num { color: #e8b98a; font-weight: 600; margin-right: .4rem; }

/* 避免按钮压住长行代码 */
pre.copyable { padding-right: 3.4rem; }

/* ── 2026-10-04 目审 P0-4：窄屏代码块自动折行（原来要横滑，scrollWidth 441 > 358） ── */
@media (max-width: 640px) {
  pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  pre.copyable { padding-right: 3.2rem; }
}
/* ── 2026-10-04 目审 P0-3：窄屏把三列表格变成卡片（原来"含义"列被压成一字一行） ── */
@media (max-width: 640px) {
  table.cards-sm, table.cards-sm tbody, table.cards-sm tr, table.cards-sm td { display: block; width: auto; }
  table.cards-sm thead { display: none; }
  table.cards-sm { border: 0; }
  table.cards-sm tr {
    border: 1px solid rgba(255,255,255,.13); border-radius: 7px;
    padding: .6rem .75rem; margin: 0 0 .55rem;
  }
  table.cards-sm td { border: 0; padding: .14rem 0; }
  table.cards-sm td:first-child { font-weight: 600; text-align: left; }
  table.cards-sm td.num { text-align: right; }
  table.cards-sm td[data-label]::before {
    content: attr(data-label) "："; color: #8b9aa8; font-size: .8rem;
  }
}

/* ── 2026-10-04 目审 P2：无障碍 ── */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 99; padding: .5rem .9rem;
  background: #e8b98a; color: #0b1520; border-radius: 0 0 6px 0; font-size: .9rem; }
.skip-link:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
