/* ===========================================================
   components.css — 按钮 / 卡片 / 标签 / 芯片 / 命令块 / 图标瓦片 /
                    表格 / 问答 / 提示块 / 小标签 / 链接
   响应式覆盖写在定义该组件的同一文件里（放别处会被静默盖掉）。
   =========================================================== */

/* ---------------- 按钮 ----------------
   主按钮一律是 <a href>，不是 button：中键新标签、右键复制链接、无 JS 可用。
   主按钮永不进入禁用态 —— 链接失效是运维问题，不该由 UI 假装。 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  border-radius:var(--r-cta);height:52px;padding:0 var(--s-8);
  font-size:16px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur-base) var(--ease),
             color var(--dur-base) var(--ease),
             transform var(--dur-micro) var(--ease),
             box-shadow var(--dur-base) var(--ease);
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(0) scale(.985)}
.btn--primary{background:var(--brand);color:var(--text-invert)}
.btn--primary:active{background:var(--brand-active)}
.btn--soft{background:var(--brand-soft);color:var(--brand-text-on-soft)}
.btn--soft:active{background:var(--brand-soft-line);color:var(--b-900)}
.btn--ghost{background:transparent;color:var(--brand-text);box-shadow:inset 0 0 0 1px var(--line-control)}
.btn--sm{height:38px;padding:0 var(--s-5);font-size:14px;border-radius:var(--r-pill)}
.btn--sm:active{transform:scale(.985)}
.btn--block{width:100%}
.btn--card{width:100%;height:44px;font-size:15px}

@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{background:var(--brand-hover);transform:translateY(-1px)}
  .btn--soft:hover{background:var(--brand-soft-line)}
  .btn--ghost:hover{background:var(--brand-wash)}
  .btn--sm.btn--primary:hover{transform:none}
}

/* ---------------- 小标签 / 徽标 ---------------- */
.pill{
  display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--r-pill);
  background:var(--n-100);color:var(--text-heading);font-size:13px;font-weight:600;
  white-space:nowrap;
}
.pill--warn{background:var(--danger-soft);color:var(--danger-ink)}
.pill--gh{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
  border-radius:var(--r-pill);background:var(--n-100);color:var(--text-heading);
  font-size:13px;font-weight:600;white-space:nowrap;
  transition:background var(--dur-base) var(--ease)}
.pill--gh svg{flex:none}
.pill--gh:hover{text-decoration:none}
@media (hover:hover) and (pointer:fine){.pill--gh:hover{background:var(--n-200)}}

.eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:var(--s-3);
  font-size:var(--t-eyebrow);line-height:var(--t-eyebrow-lh);font-weight:600;
  letter-spacing:.02em;color:var(--brand-text)}
.eyebrow svg{flex:none}

/* ---------------- 卡片 ---------------- */
.card{
  background:var(--card);border-radius:var(--r-card);box-shadow:var(--e-1);
  padding:var(--s-6);
  transition:box-shadow var(--dur-base) var(--ease);
}
.card--pad{padding:var(--s-8)}
/* 不可点的卡片不许有 hover 抬升 —— 否则用户会去点，然后什么都没发生 */
@media (hover:hover) and (pointer:fine){
  .card--hoverable:hover{box-shadow:var(--e-2)}
}

/* 图标瓦片 */
.tile{
  width:44px;height:44px;border-radius:var(--r-md);background:var(--n-100);
  display:flex;align-items:center;justify-content:center;flex:none;
  color:var(--brand-text-on-soft);
}
.tile--ok{background:var(--success-soft);color:var(--success-ink)}

/* ---------------- 提示块 ----------------
   浅蓝底区域禁止嵌套白卡（#E5E7EB 描边在其上对比度仅 1.01，完全隐形）。 */
.note{border-radius:var(--r-panel);padding:var(--s-6);font-size:15px;line-height:28px}
.note h3,.note h4{margin-bottom:var(--s-3);color:inherit}
.note p+p{margin-top:var(--s-3)}
.note--soft{background:var(--brand-soft);color:var(--brand-text-on-soft)}
.note--info{background:var(--info-soft);color:var(--info-ink)}
.note--sand{background:var(--warning-soft);color:var(--warning-ink);
  border-left:3px solid var(--warning-ink);
  border-radius:0 var(--r-md) var(--r-md) 0}
.note__actions{margin-top:var(--s-5);display:flex;gap:var(--s-3);flex-wrap:wrap}

/* ---------------- 带勾 / 叉的要点行 ----------------
   🔴 这里**不能**用 display:flex/grid：元素子节点（正文里的 <code>、<span lang="en">）
   会各自变成独立的 flex / grid 项 —— 网格里那个 <code> 会被塞进 22px 那一列，逐字换行。
   改用「绝对定位图标 + 正常文本流」，行内元素照常内联。 */
.tick{position:relative;display:block;padding:9px 0 9px 26px;
  font-size:15px;line-height:27px}
.tick>svg{position:absolute;left:0;top:15px}
.tick--yes>svg{color:var(--success-ink)}
.tick--no>svg{color:var(--text-decor)}
.tick--mark{color:var(--brand-text-on-soft)}
/* 浅蓝底上的勾必须画在白底圆片上：
   success-ink #15803D 在 #DBEAFE 上只有 4.11，跌破 AA。 */
.tick__disc{position:absolute;left:0;top:13px;width:20px;height:20px;border-radius:50%;
  background:var(--n-0);display:flex;align-items:center;justify-content:center}
.tick code{background:var(--n-100);padding:1px 5px;border-radius:var(--r-xs);font-size:12px;
  overflow-wrap:anywhere}

/* ---------------- 命令块（唯一允许横向滚动的地方）---------------- */
.cmd{
  display:flex;align-items:center;gap:var(--s-3);height:40px;min-width:0;
  padding:0 var(--s-2) 0 var(--s-4);
  border-radius:var(--r-md);background:var(--bg-raise);box-shadow:var(--e-1);
}
.cmd code{flex:1;font-size:12px;color:var(--text-body);white-space:nowrap;
  overflow-x:auto;scrollbar-width:thin;user-select:text}
.cmd__copy{
  flex:none;width:32px;height:32px;border-radius:var(--r-sm);background:var(--n-100);
  display:flex;align-items:center;justify-content:center;color:var(--text-body);
  transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease);
}
.cmd__copy[data-state="ok"]{background:var(--success-soft);color:var(--success-ink)}
.cmd__copy[data-state="fail"]{background:var(--warning-soft);color:var(--warning-ink)}
@media (hover:hover) and (pointer:fine){.cmd__copy:hover{background:var(--n-200)}}
/* 无 JS 时按钮不出现（命令文本本身可选中，通路不丢）*/
html:not(.js) .cmd__copy{display:none}

/* ---------------- 表格 ---------------- */
.tbl{background:var(--card);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--e-1)}
.tbl th,.tbl td{padding:var(--s-4) var(--s-5);text-align:left;font-size:14px;
  border-bottom:1px solid var(--hairline)}
.tbl thead th{background:var(--bg-raise);font-weight:600;color:var(--text-heading);font-size:var(--t-meta)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td:first-child{color:var(--text-heading);font-weight:500}
.tbl .y{color:var(--success-ink);font-weight:600}
.tbl .n{color:var(--text-decor)}
.tbl .p{color:var(--warning-ink);font-weight:600}
/* ≤640 用纯 CSS 把表格转成卡片，不横向滚动 */
@media (max-width:640px){
  .tbl--cards thead{display:none}
  .tbl--cards,.tbl--cards tbody,.tbl--cards tr,.tbl--cards td{display:block;width:100%}
  .tbl--cards{box-shadow:none;background:none}
  .tbl--cards tr{background:var(--card);border-radius:var(--r-card);box-shadow:var(--e-1);
    margin-bottom:var(--s-4);padding:var(--s-2) 0}
  .tbl--cards td{border-bottom:0;padding:8px var(--s-5);display:flex;gap:var(--s-3);
    align-items:baseline;justify-content:space-between}
  .tbl--cards td::before{content:attr(data-label);font-size:var(--t-meta);
    color:var(--text-muted);font-weight:500}
  .tbl--cards td:first-child{font-weight:700;font-size:15px;color:var(--text-heading)}
}

/* ---------------- 问答手风琴（原生 <details>）----------------
   用原生元素：无 JS 可展开、答案在 HTML 里（SEO 可见）、键盘可用。 */
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  min-height:56px;padding:var(--s-4) 0;cursor:pointer;list-style:none;
  font-size:var(--t-h4);line-height:var(--t-h4-lh);font-weight:600;color:var(--text-heading);
  transition:color var(--dur-base) var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq h3{font-size:inherit;font-weight:inherit;color:inherit;display:inline}
.faq summary svg{flex:none;color:var(--brand-mark);
  transition:transform var(--dur-base) var(--ease)}
.faq details[open] summary{color:var(--brand-text)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq__a{padding-bottom:var(--s-5);font-size:15px;line-height:28px}
@media (hover:hover) and (pointer:fine){.faq summary:hover{color:var(--brand-text)}}

/* ---------------- 锚点行 ---------------- */
.anchors{display:flex;gap:var(--s-2);flex-wrap:wrap}
.anchors a{padding:8px 16px;border-radius:var(--r-pill);background:var(--n-100);
  color:var(--text-heading);font-size:14px;font-weight:600;
  transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
@media (hover:hover) and (pointer:fine){.anchors a:hover{text-decoration:none;background:var(--brand-soft);color:var(--brand-text-on-soft)}}

/* ---------------- 链接列表（整卡为链接时使用）----------------
   判据：目标数 = 1 → 整卡可点；目标数 ≥ 2 → 整卡不可点。 */
.linkcard{
  display:flex;align-items:center;gap:var(--s-3);min-width:0;
  padding:var(--s-4) var(--s-5);border-radius:var(--r-card);
  background:var(--card);box-shadow:var(--e-1);color:var(--text-heading);
  transition:box-shadow var(--dur-base) var(--ease),transform var(--dur-micro) var(--ease);
}
.linkcard:hover{text-decoration:none}
.linkcard:active{transform:scale(.99)}
.linkcard span{margin-left:auto;color:var(--text-decor);font-weight:400;font-size:13px}
.linkcard svg{flex:none;color:var(--n-400);
  transition:color var(--dur-base) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .linkcard:hover{box-shadow:var(--e-2);transform:translateY(-1px)}
  .linkcard:hover svg[data-p="android"]{color:var(--p-android-ink)}
  .linkcard:hover svg[data-p="windows"]{color:var(--p-windows-ink)}
  .linkcard:hover svg[data-p="apple"]{color:var(--p-apple-ink)}
  .linkcard:hover svg[data-p="ios"]{color:var(--p-ios-ink)}
  .linkcard:hover svg[data-p="linux"]{color:var(--p-linux-ink)}
}