/* zone-access.css：access区的样式（H229 ⑤）。每条规则以 .zn[data-zone="access"] 开头，不归区的路由用 body[data-page="<本单路由名>"]（spec §2-1）。类名前缀 z-access-。 */
/* 版式照交互稿 pages-access.js / proto.css（选哪条路三页、凭据怎么选、按平台接入、下载与安装）；按钮、卡片、标签、分段、键值、提示条、代码块用共用层 k- 件。
   块与行内的分法照稿子：对照工具按 innerText 逐行比文字，flex 子项、display:block 的 code 都会各占一行。
   页标题 h1 同时带 .page-title：check.mjs H160 ④ 认它比对侧栏叫法。 */

/* ── 通用小件（稿子 .row / .stack / .grid / .muted …） ── */
.zn[data-zone="access"] .z-access-row { display: flex; align-items: center; gap: 8px; }
.zn[data-zone="access"] .z-access-row.wrap { flex-wrap: wrap; }
.zn[data-zone="access"] .z-access-row.between { justify-content: space-between; flex-wrap: wrap; }
.zn[data-zone="access"] .z-access-stack { display: flex; flex-direction: column; gap: 12px; }
.zn[data-zone="access"] .z-access-grid { display: grid; gap: 20px; }
.zn[data-zone="access"] .z-access-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zn[data-zone="access"] .z-access-muted { color: var(--ink-2); }
.zn[data-zone="access"] .z-access-faint { color: var(--ink-3); }
.zn[data-zone="access"] .z-access-small { font-size: 12.5px; line-height: 20px; }
.zn[data-zone="access"] .z-access-mono { font-family: var(--f-mono); font-size: 12.5px; }
.zn[data-zone="access"] .z-access-p { margin: 0; }
.zn[data-zone="access"] .z-access-h3 { font-size: 16px; font-weight: 600; margin: 0; }
.zn[data-zone="access"] .z-access-h4 { font-size: 14px; font-weight: 600; margin: 24px 0 10px; }
.zn[data-zone="access"] .z-access-sec { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0; color: var(--ink); }
.zn[data-zone="access"] .z-access-sec.gap { margin: 36px 0 14px; }
.zn[data-zone="access"] .z-access-lede { margin: 0 0 14px; }
.zn[data-zone="access"] .z-access-lede.narrow { max-width: 80ch; }
.zn[data-zone="access"] .z-access-ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; list-style: disc; }
.zn[data-zone="access"] .z-access-ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; list-style: decimal; }
.zn[data-zone="access"] .k-card.pad.z-access-stack { gap: 14px; }
.zn[data-zone="access"] .k-note .ic { flex: 0 0 auto; margin-top: 2px; font-size: 16px; }
.zn[data-zone="access"] .k-note.z-access-mt { margin-top: 12px; }
/* 行内代码照稿子：只换等宽字体，不带底色（base.css 的 code 有灰底） */
.zn[data-zone="access"] code { font-family: var(--f-mono); font-size: 12.5px; background: none; padding: 0; border-radius: 0; }

/* ── 页头（稿子 .page-hd：24/600 标题 + 灰字副标题，右侧按钮或分段） ── */
.zn[data-zone="access"] .z-access-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.zn[data-zone="access"] .z-access-title { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.zn[data-zone="access"] .z-access-sub { margin: 6px 0 0; color: var(--ink-2); max-width: 70ch; }
.zn[data-zone="access"] .z-access-fork { gap: 6px; align-items: flex-end; }
.zn[data-zone="access"] .k-seg.z-access-tabs { margin-bottom: 24px; }

/* ── 表格（稿子 .table-wrap / table.t） ── */
.zn[data-zone="access"] .z-access-tw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.zn[data-zone="access"] .z-access-t { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 13.5px; }
.zn[data-zone="access"] .z-access-t th, .zn[data-zone="access"] .z-access-t td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.zn[data-zone="access"] .z-access-t th { font-size: 12.5px; color: var(--ink-3); font-weight: 500; background: var(--bg-soft); }
.zn[data-zone="access"] .z-access-t tr:last-child td { border-bottom: 0; }
.zn[data-zone="access"] .z-access-t td.end { text-align: right; }
.zn[data-zone="access"] .z-access-t td.nw { white-space: nowrap; }
.zn[data-zone="access"] .z-access-t tbody tr[data-tool] { cursor: pointer; transition: background-color var(--t1); }
.zn[data-zone="access"] .z-access-t tbody tr[data-tool]:hover { background: var(--bg-soft); }

/* ── 手风琴（稿子 details.card，右侧「展开 / 收起」） ── */
.zn[data-zone="access"] .z-access-acc > summary { cursor: pointer; font-weight: 600; list-style: none; }
.zn[data-zone="access"] .z-access-acc > summary::-webkit-details-marker { display: none; }
.zn[data-zone="access"] .z-access-acc > summary::after { content: "展开"; float: right; font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
.zn[data-zone="access"] .z-access-acc[open] > summary::after { content: "收起"; }
.zn[data-zone="access"] .z-access-acc-bd { margin-top: 14px; }

/* ── 选哪条路：两张选卡（稿子 .pick-card） ── */
.zn[data-zone="access"] .z-access-pick { gap: 12px; padding: 24px; cursor: pointer; transition: border-color var(--t2), box-shadow var(--t2); }
.zn[data-zone="access"] .z-access-pick:hover { border-color: var(--primary-line); }
.zn[data-zone="access"] .z-access-pick.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.zn[data-zone="access"] .z-access-pick .z-access-h3 { font-size: 20px; }
.zn[data-zone="access"] .z-access-pick input { accent-color: var(--primary); }
.zn[data-zone="access"] .z-access-pick .k-btn { align-self: flex-start; margin-top: auto; }

/* ── 两条链路（稿子 .path / .path-step） ── */
.zn[data-zone="access"] .z-access-path { display: flex; align-items: stretch; overflow-x: auto; padding-bottom: 6px; }
.zn[data-zone="access"] .z-access-step { flex: 1 0 170px; min-width: 150px; padding: 16px 16px 16px 20px; border: 1px solid var(--line); background: var(--surface); margin-right: -1px; transition: background-color var(--t2); }
.zn[data-zone="access"] .z-access-step:first-child { border-radius: 16px 0 0 16px; }
.zn[data-zone="access"] .z-access-step:last-child { border-radius: 0 16px 16px 0; }
.zn[data-zone="access"] .z-access-step:hover { background: var(--bg-soft); }
.zn[data-zone="access"] .z-access-step .n { font: 12px var(--f-mono); color: var(--ink-3); }
.zn[data-zone="access"] .z-access-step code { display: block; margin: 6px 0 4px; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.zn[data-zone="access"] .z-access-step small { color: var(--ink-2); font-size: 12.5px; }
.zn[data-zone="access"] .z-access-step.srv { background: var(--primary-soft); }
.zn[data-zone="access"] .z-access-step.opt { border-style: dashed; }
.zn[data-zone="access"] .z-access-step.gate { background: var(--k-brand-soft); }
.zn[data-zone="access"] .z-access-step.gate code { color: var(--k-brand); }

/* ── 搜索框（共用 .k-search 的胶囊，限宽） ── */
.zn[data-zone="access"] .z-access-find { width: 240px; max-width: 100%; }
.zn[data-zone="access"] .z-access-find .k-input { height: 34px; }

/* ── 凭据怎么选 ── */
.zn[data-zone="access"] .z-access-sym { gap: 10px; margin-bottom: 24px; background: var(--warn-soft); border-color: transparent; }
.zn[data-zone="access"] .z-access-sym > .z-access-row { gap: 10px; }
.zn[data-zone="access"] .z-access-sym .ic { color: var(--warn); font-size: 18px; }
.zn[data-zone="access"] .z-access-sy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; padding: 10px 0; border-top: 1px solid rgba(0, 0, 0, .06); }
:root[data-theme="dark"] .zn[data-zone="access"] .z-access-sy { border-top-color: rgba(255, 255, 255, .08); }
.zn[data-zone="access"] .z-access-cred { gap: 12px; }
.zn[data-zone="access"] .z-access-cred.is-rec { border-color: var(--primary-line); }
.zn[data-zone="access"] .z-access-line { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.zn[data-zone="access"] .z-access-line > .k-tag { min-width: 26px; justify-content: center; }
.zn[data-zone="access"] .z-access-line > .z-access-stack { gap: 6px; flex: 1; min-width: 0; }
.zn[data-zone="access"] .z-access-way { padding: 12px 14px; }
.zn[data-zone="access"] .z-access-way p { margin: 6px 0 0; }
.zn[data-zone="access"] .z-access-way-g { gap: 10px; }

/* ── 按平台接入 ── */
.zn[data-zone="access"] .z-access-cx { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
.zn[data-zone="access"] .z-access-cx-side { gap: 16px; position: sticky; top: 20px; }
.zn[data-zone="access"] .z-access-plats { padding: 8px; }
.zn[data-zone="access"] .z-access-plat { width: 100%; color: var(--ink); display: flex; gap: 12px; align-items: center; padding: 12px 10px; border-radius: 12px; border: 0; background: none;
  text-align: left; cursor: pointer; font: inherit; text-decoration: none; transition: background-color var(--t1); }
.zn[data-zone="access"] .z-access-plat:hover { background: var(--bg-mute); text-decoration: none; }
.zn[data-zone="access"] .z-access-plat + .z-access-plat { box-shadow: 0 -1px 0 var(--line); }
.zn[data-zone="access"] .z-access-plat > span:first-child { flex: 1; min-width: 0; }
.zn[data-zone="access"] .z-access-plat b { display: block; font-size: 14px; font-weight: 600; }
.zn[data-zone="access"] .z-access-plat small { display: block; color: var(--ink-3); font-size: 12.5px; }
.zn[data-zone="access"] .z-access-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; flex: 0 0 auto; }
.zn[data-zone="access"] .z-access-dot.green { color: var(--ok); }
.zn[data-zone="access"] .z-access-dot.amber { color: var(--warn); }
.zn[data-zone="access"] .z-access-dot.gray { color: var(--ink-3); }
.zn[data-zone="access"] .z-access-eps { gap: 8px; overflow-wrap: anywhere; }
.zn[data-zone="access"] .z-access-body { gap: 18px; padding: 24px; }
.zn[data-zone="access"] .z-access-cstep { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; }
.zn[data-zone="access"] .z-access-cstep + .z-access-cstep { border-top: 1px solid var(--line); }
.zn[data-zone="access"] .z-access-cstep > .k-tag { width: 26px; justify-content: center; padding: 0; flex: 0 0 auto; }
.zn[data-zone="access"] .z-access-cstep > span:last-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.zn[data-zone="access"] .z-access-snip { gap: 6px; }
.zn[data-zone="access"] .z-access-code { position: relative; white-space: pre-wrap; overflow-wrap: anywhere; padding-right: 72px; }
.zn[data-zone="access"] .z-access-copy { position: absolute; top: 10px; right: 10px; height: 26px; padding: 0 10px; border-radius: var(--pill); border: 1px solid var(--night-line); background: var(--night-2);
  color: var(--night-ink-2); font: 12px var(--f-sans); cursor: pointer; transition: color var(--t1); }
.zn[data-zone="access"] .z-access-copy:hover { color: var(--night-ink); }
.zn[data-zone="access"] .z-access-hs-g { margin-top: 16px; gap: 12px; }
.zn[data-zone="access"] .z-access-chk { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.zn[data-zone="access"] .z-access-chk input { accent-color: var(--primary); margin-top: 4px; }
.zn[data-zone="access"] .z-access-chk .z-access-small { display: block; }

/* ── 下载与安装 ── */
.zn[data-zone="access"] .k-seg.z-access-caps { margin-bottom: 8px; }
.zn[data-zone="access"] .z-access-capnote { margin: 0 0 20px; }
.zn[data-zone="access"] .z-access-way-card { overflow: hidden; }
.zn[data-zone="access"] .z-access-way-hd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; padding: 20px; border-bottom: 1px solid var(--line); }
.zn[data-zone="access"] .z-access-way-hd .z-access-stack { gap: 8px; }
.zn[data-zone="access"] .z-access-way-hd .z-access-row { gap: 10px; }
.zn[data-zone="access"] .z-access-way-t { font-size: 16px; }
.zn[data-zone="access"] .k-kv.z-access-kv56 { grid-template-columns: 56px minmax(0, 1fr); font-size: 12.5px; }
.zn[data-zone="access"] .z-access-how { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; list-style: decimal; }
.zn[data-zone="access"] .z-access-lbl { padding: 12px 20px 0; }
.zn[data-zone="access"] .z-access-it { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--line); }
.zn[data-zone="access"] .z-access-it + .z-access-it, .zn[data-zone="access"] .z-access-lbl + .z-access-it { border-top: 1px solid var(--line); }
.zn[data-zone="access"] .z-access-it-m { flex: 1; min-width: 200px; overflow-wrap: anywhere; }
.zn[data-zone="access"] .z-access-it.is-off { opacity: .6; }
.zn[data-zone="access"] .z-access-final { margin-top: 20px; gap: 10px; }
.zn[data-zone="access"] .z-access-final.is-ok { border-color: var(--ok-soft); }
.zn[data-zone="access"] .z-access-final > .z-access-row { gap: 10px; }
.zn[data-zone="access"] .z-access-final .z-access-more { margin-left: auto; }
.zn[data-zone="access"] .z-access-foot { margin-top: 20px; }

/* ── 窄屏（稿子 ≤ 860：两栏收一栏） ── */
@media (max-width: 860px) {
  .zn[data-zone="access"] .z-access-g2, .zn[data-zone="access"] .z-access-cx, .zn[data-zone="access"] .z-access-way-hd { grid-template-columns: minmax(0, 1fr); }
  .zn[data-zone="access"] .z-access-cx-side { position: static; }
  .zn[data-zone="access"] .z-access-sy { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .zn[data-zone="access"] .z-access-it-m { min-width: 180px; }
}
/* 稿子 ≤ 520：键值表键在上、值在下（链路条照稿子保持横向滚动） */
@media (max-width: 520px) {
  .zn[data-zone="access"] .k-kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .zn[data-zone="access"] .k-kv dd + dt { margin-top: 8px; }
}

/* ── 授权连接页 #/connect/<编号>（不归区，H42 ③ 内容与行为不变，只换外观）：左侧说明面板 + 右侧居中卡片，照稿子 .login / .login-art / .login-card ── */
body[data-page="connect-auth"] .lg-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--bg); gap: 0; padding: 0; }
body[data-page="connect-auth"] .lg-pitch { background: var(--bg-soft); padding: 48px; border-radius: 0; gap: 20px; }
body[data-page="connect-auth"] .lg-h1 { font-size: 36px; line-height: 46px; font-weight: 600; letter-spacing: -.03em; }
body[data-page="connect-auth"] .lg-h1 em { font-style: normal; background: var(--grad-brand-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
body[data-page="connect-auth"] .lg-lead { color: var(--ink-2); max-width: 440px; }
body[data-page="connect-auth"] .lg-side { padding: 32px 16px; background: var(--bg); }
body[data-page="connect-auth"] .lg-card { width: 100%; max-width: 440px; padding: 28px; border-radius: var(--r-2xl); border: 1px solid var(--line); background: var(--surface); box-shadow: none; }
body[data-page="connect-auth"] .lg-title { font-size: 20px; line-height: 28px; font-weight: 600; }
body[data-page="connect-auth"] .lg-sub { color: var(--ink-2); font-size: 13px; }
body[data-page="connect-auth"] .lg-next { border-radius: var(--r-m); background: var(--primary-soft); color: var(--ink-1); padding: 10px 12px; font-size: 13px; }
body[data-page="connect-auth"] .ac-input { border-radius: var(--r-m); border-color: var(--line); background: var(--surface); }
body[data-page="connect-auth"] .ac-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
body[data-page="connect-auth"] [data-connect-pick] .ac-field { border: 1px solid var(--line); border-radius: 14px; padding: 12px; transition: border-color var(--t2); }
body[data-page="connect-auth"] [data-connect-pick] .ac-field:hover { border-color: var(--primary-line); }
body[data-page="connect-auth"] [data-connect-pick] .ac-field:has(input[type="radio"]:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
body[data-page="connect-auth"] [data-connect-pick] input[type="radio"] { accent-color: var(--primary); }
body[data-page="connect-auth"] .lg-submit { height: 44px; border-radius: var(--pill); background: var(--ink); color: var(--bg); border-color: transparent; }
body[data-page="connect-auth"] .lg-submit:hover:not(:disabled) { background: var(--ink); opacity: .88; }
body[data-page="connect-auth"] .ac-tabs button.is-on { color: var(--ink); }
@media (max-width: 860px) {
  body[data-page="connect-auth"] .lg-page { grid-template-columns: minmax(0, 1fr); }
  body[data-page="connect-auth"] .lg-pitch { padding: 28px 20px; }
  body[data-page="connect-auth"] .lg-h1 { font-size: 24px; line-height: 34px; }
}