/* Single product stage. Page rails and widths remain owned by the site system. */
.cv-explorer{--cv-accent:var(--wt-s-blue);--cv-surface:rgba(255,255,255,.015);background:var(--cv-surface);border:1px solid var(--wt-s-line)}
.cv-explorer[data-product="endpoint"]{--cv-accent:var(--wt-s-green)}
.cv-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:22px 40px;border-bottom:1px solid var(--wt-s-line)}
.cv-view-label{font-size:11px;color:var(--wt-s-soft);letter-spacing:.12em;white-space:nowrap}
.cv-tabs{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:416px;padding:5px;border:1px solid #293b4f;border-radius:2px;background:#08111c}
.cv-tabs::before{content:"";z-index:-1;position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 7px);border:1px solid #405975;border-radius:2px;background:#1a2a3c;box-shadow:0 1px 3px #050b1266;transition:transform .24s cubic-bezier(.22,1,.36,1),background .24s,border-color .24s}
.cv-explorer[data-product="endpoint"] .cv-tabs::before{transform:translateX(calc(100% + 4px));background:#192d2c;border-color:#3d5f58}
.cv-tab{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 18px;margin:0;border:0;border-radius:2px;background:none;color:var(--wt-s-soft);font:inherit;font-size:16px;font-weight:500;line-height:1.4;cursor:pointer;transition:color .2s}
.cv-tab[aria-selected="true"]{color:var(--wt-s-ink)}
.cv-tab-dot{width:6px;height:6px;border:1px solid #718398;border-radius:50%;transition:background .2s,border-color .2s}
.cv-tab[aria-selected="true"] .cv-tab-dot{border-color:var(--cv-accent);background:var(--cv-accent)}
.cv-tab:hover{color:var(--wt-s-ink)}
.cv-tab:focus-visible,.cv-play:focus-visible,.cv-product-link:focus-visible{outline:2px solid var(--cv-accent);outline-offset:5px}
.cv-panel{padding:34px 40px 24px;outline:none}
.cv-panel[hidden]{display:none!important}
.cv-panel:focus-visible{outline:1px solid var(--cv-accent);outline-offset:-6px}
.cv-panel-heading{display:flex;justify-content:space-between;align-items:center;gap:32px}
.cv-title-phrase{white-space:nowrap}
#coverage .cv-panel-heading h3{font-size:23px!important;font-weight:500;letter-spacing:-.035em;line-height:1.5!important;margin:0 0 9px;color:var(--wt-s-ink);text-wrap:balance}
#coverage .cv-panel-heading p{margin:0;color:var(--wt-s-muted);font-size:14px!important;line-height:1.8!important;max-width:820px}
.cv-product-link{display:inline-flex;gap:14px;align-items:center;flex-shrink:0;color:var(--wt-s-muted);font-size:13px;text-decoration:none!important;transition:color .2s}
.cv-product-link span{font-size:19px;color:var(--cv-accent)}
.cv-product-link:hover{color:var(--cv-accent)}
.cv-scene{margin:38px auto 14px;width:100%;max-width:1240px}
.cv-scene svg{display:block;width:100%;height:auto;overflow:visible}
.cv-diagram-narrow{display:none}
.cv-stage-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0 0;border-top:1px solid var(--wt-s-line)}
.cv-story{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.cv-story span{color:var(--wt-s-soft);font-size:12px;white-space:nowrap;transition:color .25s}
.cv-story b{font-size:10px;letter-spacing:.12em;font-weight:500;color:var(--wt-s-dim);margin-right:9px}
.cv-play{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex-shrink:0;min-height:34px;padding:6px 0 6px 10px;border:0;background:none;color:var(--wt-s-muted);font:inherit;font-size:12px;cursor:pointer}
.cv-play:hover{color:var(--wt-s-ink)}
.cv-play-icon{width:10px;height:12px;position:relative}
.cv-play-icon::before{content:"";position:absolute;left:1px;top:1px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid currentColor}
.cv-play[aria-pressed="true"] .cv-play-icon::before{left:1px;top:1px;width:8px;height:10px;border:0;border-left:2px solid currentColor;border-right:2px solid currentColor}
#coverage .cv-boundary{margin:15px 0 0;color:var(--wt-s-soft);font-size:11px!important;line-height:1.8!important}
.cv-panel[data-phase="0"] [data-flow="0"],.cv-panel[data-phase="1"] [data-flow="1"],.cv-panel[data-phase="2"] [data-flow="2"],.cv-panel[data-phase="3"] [data-flow="3"]{animation:cg-flow var(--flow-duration,1.15s) linear var(--flow-delay,0s) 1 both}
.cv-panel.is-paused .cg-packet{animation-play-state:paused}
/* Optional response destinations remain visible, but only the selected pair animates. */
.cv-panel[data-response-target="workstation"] .cg-packet[data-response-path="server"],
.cv-panel[data-response-target="server"] .cg-packet[data-response-path="workstation"]{animation:none;opacity:0}
.cv-panel[data-phase="1"] .cg-core,.cv-panel[data-phase="1"] .cg-governance,.cv-panel[data-phase="3"] .cg-audit{stroke:var(--cv-accent);transition:stroke .3s}
.cv-panel[data-phase="0"] [data-step="0"],.cv-panel[data-phase="1"] [data-step="1"],.cv-panel[data-phase="2"] [data-step="2"],.cv-panel[data-phase="3"] [data-step="3"]{color:var(--cv-accent)}
@keyframes cg-flow{0%{stroke-dashoffset:var(--flow-head,5);opacity:0}8%,80%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}}
@media(max-width:1100px){
 .cv-toolbar{padding:20px 24px}.cv-panel{padding:28px 24px 24px}.cv-story{gap:20px}
 #coverage .cv-panel-heading p{min-height:76px}
 .cv-scene{margin-top:32px}
}
/* 窄版拓扑图从 900 起就在用了，字号得跟着「用哪版图」走，不能只在 700 以下才收 */
@media(max-width:900px){
 .cv-diagram-wide{display:none}.cv-diagram-narrow{display:block}.cv-scene{max-width:420px}
 .cv-scene .cg text{font-size:14px}.cv-scene .cg .cg-title{font-size:15px}
 .cv-scene .cg .cg-governance-label{font-size:16px}.cv-scene .cg .cg-core-title{font-size:23px}
 .cv-scene .cg .cg-small{font-size:12px}.cv-scene .cg .cg-caption{font-size:10px;letter-spacing:1px}
}
@media(max-width:700px){
 .cv-toolbar{display:block;padding:18px 20px}.cv-view-label{display:none}.cv-tabs{width:100%}.cv-tab{padding:10px 8px;min-height:44px;font-size:15px;gap:8px}
 .cv-panel{padding:26px 16px 22px}.cv-panel-heading{display:block;padding:0 4px}
 /* 短语级 nowrap 只用来控制宽屏断句；窄屏必须放开，否则长标题顶出卡片 */
 .cv-title-phrase{white-space:normal}
 #coverage .cv-panel-heading h3{font-size:21px!important;letter-spacing:-.035em}
 #coverage .cv-panel-heading p{font-size:13px!important;min-height:71px}
 .cv-product-link{margin-top:16px;font-size:12px}
 .cv-diagram-wide{display:none}.cv-diagram-narrow{display:block}
 .cv-scene{max-width:420px;margin:30px auto 8px}
 .cv-stage-foot{align-items:flex-start;gap:10px;padding-top:16px}.cv-story{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 18px}.cv-story span{font-size:11px}.cv-story b{margin-right:5px;font-size:10px}
 .cv-play{min-height:44px;align-self:center;padding:6px 0;font-size:11px}
 #coverage .cv-boundary{font-size:10px!important;margin-top:18px;min-height:54px}
}
@media(prefers-reduced-motion:reduce){
 .cv-panel .cg-packet{animation:none!important;opacity:0}.cv-play{display:none}.cv-tabs::before,.cv-tab,.cv-tab-dot,.cv-story span{transition:none}
}

/* Finish: tactile selection, steady type alignment and restrained panel entry. */
.cv-tabs{padding:6px;gap:4px;border-color:#31455c;background:#09131f;box-shadow:inset 0 1px 3px #03081199}
.cv-tabs::before{top:6px;bottom:6px;left:6px;width:calc(50% - 8px);background:linear-gradient(180deg,#223950,#17283b);border-color:#526c88;box-shadow:inset 0 1px 0 #9cbad31a,0 2px 5px #03080f55;transition:transform .28s cubic-bezier(.22,1,.36,1),background .28s,border-color .28s}
.cv-explorer[data-product="endpoint"] .cv-tabs::before{background:linear-gradient(180deg,#223c38,#172b28);border-color:#496e62}
.cv-tab{gap:0;min-height:48px;padding:10px 16px;font-weight:600}
.cv-tab-top{display:flex;align-items:center;justify-content:center;gap:9px}
.cv-tab:focus-visible{outline-offset:1px;border-radius:2px}
.cv-panel:not([hidden]){animation:cv-panel-enter .24s cubic-bezier(.22,1,.36,1) both}
@keyframes cv-panel-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.cg-core,.cg-governance,.cg-audit{transition:stroke .3s}
.cv-story span{display:inline-flex;align-items:center;gap:7px}
.cv-story b{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;margin:0;border:1px solid var(--wt-s-line);border-radius:50%;font-size:10px;letter-spacing:.04em;transition:color .2s,border-color .2s,background .2s}
.cv-panel[data-phase="0"] [data-step="0"] b,.cv-panel[data-phase="1"] [data-step="1"] b,.cv-panel[data-phase="2"] [data-step="2"] b,.cv-panel[data-phase="3"] [data-step="3"] b{color:var(--cv-accent);border-color:var(--cv-accent);background:#162638}
.cv-play{min-height:36px;padding:8px 12px;border:1px solid var(--wt-s-line-strong);border-radius:2px;background:#0d1925;transition:border-color .2s,background .2s}
.cv-play:hover{border-color:#60758c;background:#142435}
@media(max-width:700px){
 .cv-tab{min-height:44px;padding:8px 6px;gap:0}
 .cv-stage-foot{flex-wrap:wrap;gap:16px}.cv-story{width:100%}.cv-story b{width:21px;height:21px;margin:0}.cv-play{margin-left:auto;min-height:40px}
}
@media(prefers-reduced-motion:reduce){
 .cv-panel:not([hidden]){animation:none}.cv-tabs::before,.cv-story b,.cg-core,.cg-governance,.cg-audit{transition:none}
}

/* Give PC diagrams more horizontal room without scaling up the nodes.
   Headings and controls stay on the established 40px content inset. */
@media(min-width:1101px){
 .cv-panel{padding-left:24px;padding-right:24px}
 .cv-panel-heading{padding-left:16px;padding-right:16px}
 .cv-stage-foot{margin-left:16px;margin-right:16px}
 #coverage .cv-boundary{margin-left:16px;margin-right:16px}
}
.cv-diagram-wide{--flow-duration:1.3s}

/* Final optical pass: flatter controls, precise type and quiet navigation cues. */
.cv-tabs{width:384px;border-color:#293e54;box-shadow:inset 0 1px 2px #03081166}
.cv-tabs::before{background:linear-gradient(180deg,#20344a,#17283a);border-color:#425e7b;box-shadow:inset 0 1px 0 #aac8e218,0 1px 3px #03080f44}
.cv-explorer[data-product="endpoint"] .cv-tabs::before{background:linear-gradient(180deg,#203933,#172b27);border-color:#41675a}
.cv-tab{font-size:15px;letter-spacing:.01em;min-height:46px}
#coverage .cv-panel-heading h3{font-weight:550;letter-spacing:-.025em}
#coverage .cv-panel-heading p{color:var(--wt-s-muted);line-height:1.85!important}
.cv-product-link{font-size:12px;gap:10px}
.cv-product-link span{display:inline-flex;justify-content:center;align-items:center;width:26px;height:26px;border:1px solid var(--wt-s-line-strong);border-radius:50%;font-size:15px;transition:transform .2s,border-color .2s}
.cv-product-link:hover span{transform:translate(2px,-2px);border-color:var(--cv-accent)}
.cv-play{color:var(--wt-s-muted);border-color:var(--wt-s-line-strong);box-shadow:inset 0 1px 0 #8aa7c40b}
.cv-story b{border-color:var(--wt-s-line)}
@media(max-width:700px){.cv-tabs{width:100%}.cv-tab{font-size:15px;min-height:44px}.cv-product-link span{width:24px;height:24px}.cv-scene .cg .cg-caption{letter-spacing:.6px}}
@media(prefers-reduced-motion:reduce){.cv-product-link span{transition:none}}

/* Compact autoplay stage: tabs left, current product's phases right. */
.cv-explorer[data-autoplay="true"] .cv-toolbar{grid-template-columns:280px minmax(0,1fr);gap:32px;padding:16px 32px}
.cv-explorer[data-autoplay="true"] .cv-tabs{width:100%}
.cv-explorer[data-autoplay="true"] .cv-tab{min-height:40px;padding:8px 12px;font-size:14px}
.cv-explorer[data-autoplay="true"] .cv-story{justify-content:flex-end;flex-wrap:nowrap;gap:24px}
.cv-story[hidden]{display:none!important}
.cv-explorer[data-autoplay="true"] .cv-story span{font-size:11px;gap:7px}
.cv-explorer[data-autoplay="true"] .cv-story b{width:21px;height:21px;font-size:9px}
.cv-story[data-phase="0"] [data-step="0"],.cv-story[data-phase="1"] [data-step="1"],.cv-story[data-phase="2"] [data-step="2"],.cv-story[data-phase="3"] [data-step="3"]{color:var(--cv-accent)}
.cv-story[data-phase="0"] [data-step="0"] b,.cv-story[data-phase="1"] [data-step="1"] b,.cv-story[data-phase="2"] [data-step="2"] b,.cv-story[data-phase="3"] [data-step="3"] b{color:var(--cv-accent);border-color:var(--cv-accent);background:#162638}
.cv-explorer[data-autoplay="true"] .cv-panel{padding-bottom:14px}
.cv-explorer[data-autoplay="true"] .cv-scene{margin-bottom:0}
#coverage .cv-explorer[data-autoplay="true"] .cv-boundary{min-height:0;margin-top:0;font-size:10px!important;line-height:1.8!important}
/* Extend the stage to the site's existing rails only at desktop widths. */
@media(min-width:1200px){
 #coverage .cv-explorer[data-autoplay="true"]{margin-inline:calc(-1 * var(--site-rail-inset,30px));border-inline:0}
 .cv-explorer[data-autoplay="true"] .cv-toolbar{padding-inline:var(--site-rail-inset,30px)}
 .cv-explorer[data-autoplay="true"] .cv-panel{padding-inline:var(--site-rail-inset,30px)}
 .cv-explorer[data-autoplay="true"] .cv-panel-heading{padding-inline:0}
 #coverage .cv-explorer[data-autoplay="true"] .cv-boundary{margin-inline:0}
}
@media(max-width:1100px){
 .cv-explorer[data-autoplay="true"] .cv-toolbar{grid-template-columns:240px minmax(0,1fr);padding-inline:24px;gap:20px}
 .cv-explorer[data-autoplay="true"] .cv-story{gap:14px}
}
@media(max-width:900px){
 .cv-explorer[data-autoplay="true"] .cv-toolbar{grid-template-columns:1fr;gap:16px}
 .cv-explorer[data-autoplay="true"] .cv-tabs{max-width:320px}
 .cv-explorer[data-autoplay="true"] .cv-story{justify-content:space-between}
 .cv-explorer[data-autoplay="true"] .cv-scene{margin-bottom:0}
}
@media(max-width:700px){
 .cv-explorer[data-autoplay="true"] .cv-toolbar{padding:16px 20px}
 .cv-explorer[data-autoplay="true"] .cv-tabs{max-width:none}
 .cv-explorer[data-autoplay="true"] .cv-tab{min-height:44px}
 .cv-explorer[data-autoplay="true"] .cv-story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.cv-explorer[data-autoplay="true"] .cv-panel{padding-bottom:12px}
}

/* Quiet canvas texture; horizontal edges close the stage against the site rails. */
#coverage .cv-explorer[data-autoplay="true"]{
 border-block:1px solid var(--wt-s-line);
 background-image:radial-gradient(circle,rgba(114,176,232,.11) .75px,transparent 1px);
 background-size:20px 20px;
 background-position:10px 10px;
}

/* Full-frame technical keyword strip, with the reference's 128px desktop rhythm. */
#coverage:has(.cv-keywords){padding-bottom:0}
#coverage:has(.cv-keywords) .wt-sec-rails{bottom:0}
.cv-keywords{
 position:relative;isolation:isolate;height:128px;margin-top:0;
 margin-inline:calc(-1 * var(--site-rail-inset,30px));
 border-top:0;
 background:transparent;outline:none;
}
.cv-keywords-dots{position:absolute;inset:var(--wt-dots-inset,8px);width:calc(100% - 2 * var(--wt-dots-inset,8px));height:calc(100% - 2 * var(--wt-dots-inset,8px));pointer-events:none}
.cv-keywords-window{
 position:relative;display:flex;align-items:center;height:100%;overflow:hidden;
 mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.cv-keywords-track{display:flex;width:max-content;flex:none;animation:cv-keyword-scroll var(--keyword-duration,400s) linear infinite;animation-play-state:paused}
.cv-keywords.is-running .cv-keywords-track{animation-play-state:running}
#coverage .cv-keywords-list{display:flex;align-items:center;flex:none;gap:64px;list-style:none;margin:0;padding:0 64px 0 0}
#coverage .cv-keywords-list li{margin:0;padding:0;white-space:nowrap;color:#e7eaf0;font-size:24px;font-weight:550;letter-spacing:.015em;line-height:1.4}
.cv-keywords:focus-visible{outline:1px solid var(--wt-s-blue);outline-offset:-4px}
.cv-keywords:focus-visible .cv-keywords-window{overflow-x:auto;scrollbar-width:none}
.cv-keywords:focus-visible .cv-keywords-track{animation:none}
.cv-keywords-window::-webkit-scrollbar{display:none}
@keyframes cv-keyword-scroll{to{transform:translateX(-50%)}}
@media(max-width:700px){
 .cv-keywords{height:112px}
 #coverage .cv-keywords-list{gap:40px;padding-right:40px}
 #coverage .cv-keywords-list li{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
 .cv-keywords-window{overflow-x:auto;scrollbar-width:none}
 .cv-keywords-track{animation:none}
 .cv-keywords-list[aria-hidden="true"]{display:none!important}
}


/* ==========================================================================
   分段控件（.cv-tabs）——从模块 03 提升为全站共用件
   模块 06 的「E-ITDR 横向移动 / Web ITDR 异常访问」用的就是这一套，
   交互与观感与模块 03 完全一致，不另发明第二种切换。
   原来这里写死了一套深色控件色阶（规范 §九 的已知例外），现在改成令牌：
   深色值保持不变，浅色区块换一套，版式一个字不动。
   ========================================================================== */

.cv-tabs {
  --seg-track-bg: #09131f;
  --seg-track-line: #293e54;
  --seg-track-shadow: inset 0 1px 2px #03081166;
  --seg-thumb-bg: linear-gradient(180deg, #20344a, #17283a);
  --seg-thumb-line: #425e7b;
  --seg-thumb-shadow: inset 0 1px 0 #aac8e218, 0 1px 3px #03080f44;
  --seg-dot-line: #718398;
  /* .cv-explorer 之外没人定义强调色，兜个底，否则选中的圆点填不上颜色 */
  --cv-accent: var(--wt-s-blue);
  border-color: var(--seg-track-line);
  background: var(--seg-track-bg);
  box-shadow: var(--seg-track-shadow);
}

/* 浅色区块：轨道由「凹进去的深槽」变成「凹进去的浅槽」，滑块仍然是抬起来的那一块。
   深色版的对比度直接搬到白底上会很生硬——控件坐在纯白面板上，深槽是整块里最重的一处，
   反而把注意力从内容上拉走了。所以浅色这一档整体压平：槽只比面板暗一点点，
   滑块靠一道极轻的投影浮起来，强调色交给那枚小圆点。 */
.wt-sec[data-tone="light"] .cv-tabs {
  --seg-track-bg: #f2f5fa;
  --seg-track-line: rgba(19, 55, 96, .12);
  --seg-track-shadow: inset 0 1px 2px rgba(19, 55, 96, .05);
  --seg-thumb-bg: #fff;
  --seg-thumb-line: rgba(19, 55, 96, .14);
  --seg-thumb-shadow: 0 1px 2px rgba(19, 55, 96, .08), 0 2px 6px rgba(19, 55, 96, .06);
  --seg-dot-line: rgba(19, 55, 96, .3);
}

.cv-tabs::before {
  border-color: var(--seg-thumb-line);
  background: var(--seg-thumb-bg);
  box-shadow: var(--seg-thumb-shadow);
}

.cv-tab-dot { border-color: var(--seg-dot-line); }

/* --- 模块 06 上的那一对 -------------------------------------------------- */

/* 模块 03 靠 .cv-explorer[data-product] 推滑块（脚本设的）。这里没有那个容器，
   直接问「是不是第二段被选中」，同一个位移公式。 */
.wt-case .cv-tabs:has(.cv-tab:last-child[aria-selected="true"])::before {
  transform: translateX(calc(100% + 4px));
}

/* 标签比模块 03 长，让两段按内容等分，不套 384px 的定宽 */
.wt-case .cv-tabs { width: max-content; max-width: 100%; }

/* 滑块与圆点跟着当前产品换色——和模块 03 蓝 / 绿两档对应。
   注意这里两段的顺序与模块 03 相反：第一段是 E-ITDR。 */
.wt-case:has(#case-tab-eitdr[aria-selected="true"]) .cv-tabs {
  --cv-accent: var(--wt-s-green);
  --seg-thumb-bg: linear-gradient(180deg, #203933, #172b27);
  --seg-thumb-line: #41675a;
}

.wt-case:has(#case-tab-web[aria-selected="true"]) .cv-tabs {
  --cv-accent: var(--wt-s-blue);
}

/* 浅底不给滑块染色：白底上一染就成了色块。产品的区分交给那枚圆点和文字。 */
.wt-sec[data-tone="light"] .wt-case:has(#case-tab-eitdr[aria-selected="true"]) .cv-tabs,
.wt-sec[data-tone="light"] .wt-case:has(#case-tab-web[aria-selected="true"]) .cv-tabs {
  --seg-thumb-bg: #fff;
  --seg-thumb-line: rgba(19, 55, 96, .16);
}

@media (max-width: 700px) {
  .wt-case .cv-tabs { width: 100%; }
}