/* =====================================================================
 * 17 手表表径选择 · 视觉母题「表盘圆环 + 腕围刻度」
 * ---------------------------------------------------------------------
 * 色板：银灰（--wk-pri #4b5563）+ 钢青副色（--wk-pri2），
 * 基座中性色之外的「金属拉丝」质感；纯 CSS / SVG，零图片请求。
 * 版式：D 仪表盘中心舞台 —— 与 12 号共用原型，但这里用「表盘圆环 + 刻度尺」，
 *       左侧大表盘、右侧参数块，视觉语言完全不同（12 号是 3×3 环形参数 + 切分饼环）。
 * 本页只作用于 .b11--watch 容器，不外溢到其它任何页面。
 * ===================================================================== */

.b11--watch {
    --wk-pri: #4b5563;
    --wk-pri2: #7c8899;
    --wk-tint: #e6e9ed;
    --b11-pri: #4b5563;
    --b11-pri2: #7c8899;
    --b11-tint: #e6e9ed;
    --b11-bg: #eff1f3;
    --b11-bg2: #e2e5e9;
    --b11-card2: #f8f9fa;
    background-image:
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--b11-line2) 34%, transparent) 0 1px, transparent 1px 5px),
        linear-gradient(to bottom, color-mix(in srgb, var(--b11-line2) 20%, transparent) 1px, transparent 1px);
    background-size: 100% 100%, 100% 48px;
}
:root[data-theme="dark"] .b11.b11--watch {
    --wk-pri: #a8b3c2;
    --wk-pri2: #c6cedb;
    --wk-tint: #262b33;
    --b11-pri: #a8b3c2;
    --b11-pri2: #c6cedb;
    --b11-tint: #262b33;
    --b11-bg: #131619;
    --b11-bg2: #1a1e23;
    --b11-card2: #1e232a;
}

/* ---------- 首屏 ---------- */
.wk-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 32px; align-items: center; }
.wk-hero .b11-h1 em { color: var(--wk-pri); }
.wk-hero .b11-lead b { box-shadow: inset 0 -.42em 0 var(--wk-tint); }
.wk-dial-motif svg { display: block; width: 100%; max-width: 230px; height: auto; margin: 0 auto; }

/* ---------- 版式 D：表盘舞台 ---------- */
.wk-stage { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 20px; align-items: start; }

.wk-dial {
    background: var(--b11-card); border: 1.5px solid var(--wk-pri); box-shadow: var(--b11-shadow);
    padding: 16px; text-align: center;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
.wk-dial svg { display: block; width: 100%; height: auto; }
.wk-dial-cap {
    margin-top: 8px; font-size: var(--b11-xs); color: var(--b11-sub); font-family: var(--b11-mono);
    border-top: 1px dashed var(--b11-line2); padding-top: 9px; line-height: 1.7;
}

.wk-params { display: grid; gap: 12px; }
.wk-block {
    background: var(--b11-card); border: 1px solid var(--b11-line); box-shadow: var(--b11-shadow);
    padding: 15px 18px 14px; border-left: 4px solid var(--wk-pri);
}
.wk-block-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wk-block-hd .n {
    font-family: var(--b11-mono); font-size: var(--b11-xs); font-weight: 800; color: var(--b11-on);
    background: var(--wk-pri); padding: 1px 7px;
}
.wk-block-hd b { font-size: var(--b11-md); }
.wk-acts { display: flex; flex-wrap: wrap; gap: 9px; }

/* ---------- 腕围刻度尺 ---------- */
.wk-ruler {
    margin-top: 16px; position: relative; height: 78px;
    border: 1px solid var(--b11-line); background: var(--b11-card); padding: 10px 16px 8px;
    overflow-x: auto;
}
.wk-ruler-track { position: relative; height: 42px; min-width: 520px; }
.wk-ruler-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--wk-line2); }
.wk-ruler-tick { position: absolute; bottom: 0; width: 1px; background: var(--wk-line2); }
.wk-ruler-tick i {
    position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
    font-style: normal; font-family: var(--b11-mono); font-size: 10px; color: var(--b11-mute);
}
.wk-ruler-band {
    position: absolute; bottom: 2px; height: 22px; background: var(--wk-tint);
    border-left: 2px solid var(--wk-pri); border-right: 2px solid var(--wk-pri);
}
.wk-ruler-band b {
    position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
    font-family: var(--b11-mono); font-size: var(--b11-xs); color: var(--wk-pri); white-space: nowrap;
}
.wk-ruler-cap { font-size: var(--b11-xs); color: var(--b11-mute); margin-top: 2px; }

/* ---------- 佩戴感受 ---------- */
.wk-fit { list-style: none; margin: 0; padding: 0; }
.wk-fit li {
    position: relative; padding: 10px 0 10px 30px; font-size: var(--b11-sm); color: var(--b11-sub);
    border-bottom: 1px dotted var(--b11-line2); line-height: 1.78;
}
.wk-fit li:last-child { border-bottom: 0; }
.wk-fit li::before {
    content: "◔"; position: absolute; left: 0; top: 10px; width: 20px; height: 20px;
    display: grid; place-items: center; background: var(--wk-tint); color: var(--wk-pri);
    font-size: 12px; font-weight: 800;
}
.wk-fit li b { color: var(--b11-ink); }
.wk-fit li.warn::before { background: var(--b11-warnbg); color: var(--b11-warn); }
.wk-fit li.bad::before { background: var(--b11-badbg); color: var(--b11-bad); }

/* ---------- 批量清洗条 ---------- */
.wk-clean {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    margin-top: 14px; padding: 12px 14px; background: var(--b11-card2);
    border: 1px solid var(--b11-line); font-size: var(--b11-sm);
}
.wk-clean > b { color: var(--wk-pri); font-family: var(--b11-mono); font-size: var(--b11-xs); letter-spacing: .08em; }
.wk-clean code { margin-left: auto; }

/* ---------- 首屏紧凑化（主操作按钮留在首屏内） ---------- */
.wk-hero { gap: 24px; }
.wk-dial-motif svg { max-width: 186px; }
.wk-stage { gap: 16px; }
.wk-params { gap: 8px; }
.wk-block { padding: 11px 16px 9px; }
.wk-block-hd { margin-bottom: 9px; }
.wk-acts { gap: 8px; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
    .wk-hero { grid-template-columns: minmax(0, 1fr); }
    .wk-stage { grid-template-columns: minmax(0, 1fr); }
    .wk-dial { max-width: 380px; margin: 0 auto; }
    .wk-clean code { margin-left: 0; }
}