/*
 * ==============================================
 * Steps css
 * ==============================================
 */

/*
 * --------------------------------------
 * zh-CN
 */
.zh-CN .prereq:before{
   content:"前提条件";
	font-weight:bold;
}
.zh-CN .steps:before{
   content:"操作步骤";
	font-weight:bold;
}
.zh-CN .result:before{
    content:"结果说明";
	font-weight:bold;
}
.zh-CN .stepxmp:before{
    content:"示例";
	font-weight:bold;
}
.zh-CN .example:before{
    content:"示例";
	font-weight:bold;
}
.zh-CN .postreq:before{
    content:"后续处理";
	font-weight:bold;
}


/*
 * --------------------------------------
 * en-US
 */
.en-US .prereq:before{
    content:"Before You Start";
	font-weight:bold;
}
.en-US .steps:before{
    content:"Steps";
	font-weight:bold;
}
.en-US .result:before{
    content:"Result";
	font-weight:bold;
}
.en-US .stepxmp:before{
    content:"Example";
	font-weight:bold;
}
.en-US .example:before{
    content:"Example";
	font-weight:bold;
}
.en-US .postreq:before{
    content:"What to do next";
	font-weight:bold;
}


/*
 * --------------------------------------
 * nl-NL
 */
.nl-NL .prereq:before{
   content:"Voordat u begint";
	font-weight:bold;
}
.nl-NL .steps:before{
   content:"Stappen";
	font-weight:bold;
}
.nl-NL .result:before{
    content:"Resultaat";
	font-weight:bold;
}
.nl-NL .stepxmp:before{
    content:"Voorbeeld";
	font-weight:bold;
}
.nl-NL .example:before{
    content:"Voorbeeld";
	font-weight:bold;
}
.nl-NL .postreq:before{
    content:"Wat nu te doen";
	font-weight:bold;
}

/*
 * --------------------------------------
 * fr-FR
 */
.fr-FR .prereq:before{
   content:"Avant de commencer";
	font-weight:bold;
}
.fr-FR .steps:before{
   content:"Procédure";
	font-weight:bold;
}
.fr-FR .result:before{
    content:"Résultat";
	font-weight:bold;
}
.fr-FR .stepxmp:before{
    content:"Exemple";
	font-weight:bold;
}
.fr-FR .example:before{
    content:"Exemple";
	font-weight:bold;
}
.fr-FR .postreq:before{
    content:"Que faire ensuite";
	font-weight:bold;
}

/*
 * --------------------------------------
 * de-DE
 */
.de-DE .prereq:before{
   content:"Bevor Sie beginnen";
	font-weight:bold;
}
.de-DE .steps:before{
   content:"Schritte";
	font-weight:bold;
}
.de-DE .result:before{
    content:"Ergebnis";
	font-weight:bold;
}
.de-DE .stepxmp:before{
    content:"Beispiel";
	font-weight:bold;
}
.de-DE .example:before{
    content:"Beispiel";
	font-weight:bold;
}
.de-DE .postreq:before{
    content:"Was folgt als Nächstes";
	font-weight:bold;
}

/*
 * --------------------------------------
 * hu-HU
 */
.hu-HU .prereq:before{
   content:"A kezdés előtt";
	font-weight:bold;
}
.hu-HU .steps:before{
   content:"Lépések";
	font-weight:bold;
}
.hu-HU .result:before{
    content:"Eredmény";
	font-weight:bold;
}
.hu-HU .stepxmp:before{
    content:"Példa";
	font-weight:bold;
}
.hu-HU .example:before{
    content:"Példa";
	font-weight:bold;
}
.hu-HU .postreq:before{
    content:"Következő lépések";
	font-weight:bold;
}

/*
 * --------------------------------------
 * it-IT
 */
.it-IT .prereq:before{
   content:"Prima di iniziare";
	font-weight:bold;
}
.it-IT .steps:before{
   content:"Procedura";
	font-weight:bold;
}
.it-IT .result:before{
    content:"Risultati";
	font-weight:bold;
}
.it-IT .stepxmp:before{
    content:"Esempio";
	font-weight:bold;
}
.it-IT .example:before{
    content:"Esempio";
	font-weight:bold;
}
.it-IT .postreq:before{
    content:"Come continuare";
	font-weight:bold;
}

/*
 * --------------------------------------
 * pt-BR
 */
.pt-BR .prereq:before{
   content:"Antes de Iniciar";
	font-weight:bold;
}
.pt-BR .steps:before{
   content:"Etapas";
	font-weight:bold;
}
.pt-BR .result:before{
    content:"Resultado";
	font-weight:bold;
}
.pt-BR .stepxmp:before{
    content:"Exemplo";
	font-weight:bold;
}
.pt-BR .example:before{
    content:"Exemplo";
	font-weight:bold;
}
.pt-BR .postreq:before{
    content:"O que fazer em seguida";
	font-weight:bold;
}

/*
 * --------------------------------------
 * es-MX
 */
.es-MX .prereq:before{
   content:"Antes de comenzar";
	font-weight:bold;
}
.es-MX .steps:before{
   content:"Pasos";
	font-weight:bold;
}
.es-MX .result:before{
    content:"Resultado";
	font-weight:bold;
}
.es-MX .stepxmp:before{
    content:"Ejemplo";
	font-weight:bold;
}
.es-MX .example:before{
    content:"Ejemplo";
	font-weight:bold;
}
.es-MX .postreq:before{
    content:"Qué hacer a continuación";
	font-weight:bold;
}

/*
 * --------------------------------------
 * es-ES
 */
.es-ES .prereq:before{
   content:"Antes de comenzar";
	font-weight:bold;
}
.es-ES .steps:before{
   content:"Pasos";
	font-weight:bold;
}
.es-ES .result:before{
    content:"Resultado";
	font-weight:bold;
}
.es-ES .stepxmp:before{
    content:"Ejemplo";
	font-weight:bold;
}
.es-ES .example:before{
    content:"Ejemplo";
	font-weight:bold;
}
.es-ES .postreq:before{
    content:"Qué hacer a continuación";
	font-weight:bold;
}

/*
 * --------------------------------------
 * tr-TR
 */
.tr-TR .prereq:before{
   content:"Başlamadan Önce";
	font-weight:bold;
}
.tr-TR .steps:before{
   content:"Adımlar";
	font-weight:bold;
}
.tr-TR .result:before{
    content:"Sonuç";
	font-weight:bold;
}
.tr-TR .stepxmp:before{
    content:"Örnek";
	font-weight:bold;
}
.tr-TR .example:before{
    content:"Örnek";
	font-weight:bold;
}
.tr-TR .postreq:before{
    content:"Sonra ne yapmalı";
	font-weight:bold;
}

/*
 * --------------------------------------
 * ru-RU
 */
.ru-RU .prereq:before{
   content:"Перед началом работы";
	font-weight:bold;
}
.ru-RU .steps:before{
   content:"Порядок действий";
	font-weight:bold;
}
.ru-RU .result:before{
    content:"Результат";
	font-weight:bold;
}
.ru-RU .stepxmp:before{
    content:"Пример";
	font-weight:bold;
}
.ru-RU .example:before{
    content:"Пример";
	font-weight:bold;
}
.ru-RU .postreq:before{
    content:"Что далее";
	font-weight:bold;
}

/*
 * --------------------------------------
 * pl-PL
 */
.pl-PL .prereq:before{
   content:"Zanim zaczniesz";
	font-weight:bold;
}
.pl-PL .steps:before{
   content:"Kroki";
	font-weight:bold;
}
.pl-PL .result:before{
    content:"Wynik";
	font-weight:bold;
}
.pl-PL .stepxmp:before{
    content:"Przykład";
	font-weight:bold;
}
.pl-PL .example:before{
    content:"Przykład";
	font-weight:bold;
}
.pl-PL .postreq:before{
    content:"Co dalej";
	font-weight:bold;
}


/* ============================================================================
   2026-10-13 更新点：新增 outputclass="learning-path" 学习路径组件。
   DITA 源约定：li 第一个直接 ph 为阶段标题；后续 ph 为竖向小标题，
   每个小标题关联其后的第一个 ul/ol；无小标题列表显示在阶段标题右侧。
   JS 规范化后使用 marker/main/head/section 稳定结构；PC 端链接一行最多 4 个，移动端一行 3 个。
   容器支持 ol 与 ul（outputclass="learning-path"，不可追加色值类）。
   ============================================================================ */

@keyframes wt-learning-path-fallback-show {
	 0%, 99% { visibility: hidden; }
	 100% { visibility: visible; }
}

/* 防止扁平 DITA 列表在 DOM 规范化前短暂显示；JS 失败时 1.5 秒后恢复可读。 */
ol.learning-path:not(.wt_learning_path_ready),
ul.learning-path:not(.wt_learning_path_ready) {
	 visibility: hidden;
	 animation: wt-learning-path-fallback-show 1.5s step-end forwards;
}

/* 容器：纵向路径，无边框无背景。 */
ol.ol.learning-path,
ol.steps.learning-path,
ul.ul.learning-path {
	 position: relative;
	 margin: 32px 0;
	 padding: 0;
	 list-style: none;
}

/* 阶段：marker 列与内容列使用同一个 grid 坐标系。 */
ol.learning-path > li.wt_learning_path_item , ul.learning-path > li.wt_learning_path_item {
	 display: grid;
	 grid-template-columns: 32px minmax(0, 1fr);
	 column-gap: 24px;
	 position: relative;
	 margin: 0 !important;
	 padding: 0 0 40px !important;
	 list-style: none;
}

ol.learning-path > li.wt_learning_path_item:last-child , ul.learning-path > li.wt_learning_path_item:last-child {
	 padding-bottom: 0 !important;
}

/* 图标标记：作者上传图片或 JS 生成的占位圆。 */
ol.learning-path .wt_learning_path_marker , ul.learning-path .wt_learning_path_marker {
	 grid-column: 1;
	 grid-row: 1;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 align-self: start;
	 /* 2026-10-14 更新点：32px 图标与阶段标题(28px 行高)垂直居中；
	    有小标题时第二列首行是 24px 行高的小标题，由下面规则单独校正。 */
	 margin-top: -2px;
	 position: relative;
	 z-index: 1;
	 width: 32px;
	 height: 32px;
}

ol.learning-path .wt_learning_path_marker > img.image , ul.learning-path .wt_learning_path_marker > img.image {
	 display: block;
	 width: 32px;
	 height: 32px;
	 max-width: none;
	 object-fit: contain;
}

ol.learning-path .wt_learning_path_marker_placeholder , ul.learning-path .wt_learning_path_marker_placeholder {
	 display: block;
	 width: 32px;
	 height: 32px;
	 border-radius: 50%;
	 background-color: var(--wt-learning-path-accent, #F0F2F5);
	 opacity: 0.6;
}

/* 连接线固定在 32px marker 列中心，只在本阶段内部绘制：
   从图标底部 (32px + 4px 空隙) 到阶段底边 (bottom:0，不越界伸入下一阶段图标)。 */
ol.learning-path > li.wt_learning_path_item:not(:last-child)::after , ul.learning-path > li.wt_learning_path_item:not(:last-child)::after {
	 content: "";
	 position: absolute;
	 top: 36px;
	 left: 15.5px;
	 bottom: 0;
	 width: 1px;
	 background-color: #E8E8E8;
	 z-index: 0;
}

/* 2026-10-14 更新点：图标与第一行内容（阶段标题/小标题/链接）中心对齐——
   按 head 第二列首元素类型切换 32px 图标的垂直偏移。 */
ol.learning-path > li.wt_learning_path_item:has(.wt_learning_path_head > .wt_learning_path_sections > .wt_learning_path_section:first-child > .wt_learning_path_section_title:first-child) > .wt_learning_path_marker , ul.learning-path > li.wt_learning_path_item:has(.wt_learning_path_head > .wt_learning_path_sections > .wt_learning_path_section:first-child > .wt_learning_path_section_title:first-child) > .wt_learning_path_marker {
	 margin-top: 4px;
}

ol.learning-path > li.wt_learning_path_item:has(.wt_learning_path_head > .wt_learning_path_head_links:first-child) > .wt_learning_path_marker , ul.learning-path > li.wt_learning_path_item:has(.wt_learning_path_head > .wt_learning_path_head_links:first-child) > .wt_learning_path_marker {
	 margin-top: 6px;
}

ol.learning-path .wt_learning_path_main , ul.learning-path .wt_learning_path_main {
	 grid-column: 2;
	 min-width: 0;
}

/* 头部：阶段标题在左；右侧区放默认链接组和各小标题分组（整体在标题右侧）。
   两列基线对齐，保证标题与右侧第一行文字水平对齐。 */
ol.learning-path .wt_learning_path_head , ul.learning-path .wt_learning_path_head {
	 display: grid;
	 grid-template-columns: max-content minmax(0, 1fr);
	 align-items: baseline;
	 /* 2026-10-14 更新点：PC 端阶段标题与右侧内容的间距拉大。 */
	 column-gap: 100px;
	 min-height: 32px;
}

ol.learning-path .wt_learning_path_title , ul.learning-path .wt_learning_path_title {
	 margin: 0 !important;
	 color: var(--font-color-section-title);
	 font-size: 18px;
	 font-weight: 600;
	 line-height: 28px;
}

ol.learning-path .wt_learning_path_section_links , ul.learning-path .wt_learning_path_section_links {
	 display: block;
	 width: 100%;
	 min-width: 0;
}

ol.learning-path .wt_learning_path_head_links , ul.learning-path .wt_learning_path_head_links {
	 min-width: 0;
}

/* 小标题分组区：位于阶段标题右侧的第二列；有默认链接组时排在其下，
   各分组之间竖向排列，每组内小标题在上、链接在下。 */
ol.learning-path .wt_learning_path_sections , ul.learning-path .wt_learning_path_sections {
	 grid-column: 2;
	 display: flex;
	 flex-direction: column;
	 gap: 16px;
	 /* 2026-10-14 更新点：拉大阶段标题与小标题分组区的间距。 */
	 margin-top: 12px;
	 padding-left: 0;
	 min-width: 0;
}

/* 只有默认链接组时（无小标题），链接组占第二列。 */
ol.learning-path .wt_learning_path_head:has(> .wt_learning_path_head_links) > .wt_learning_path_sections , ul.learning-path .wt_learning_path_head:has(> .wt_learning_path_head_links) > .wt_learning_path_sections {
	 margin-top: 12px;
}

ol.learning-path .wt_learning_path_section , ul.learning-path .wt_learning_path_section {
	 display: block;
	 margin: 0;
	 padding: 0;
}

/* 小标题独立于正文：字号更大、字重更高、颜色更浅，链接始终另起一行。 */
ol.learning-path span.ph.wt_learning_path_section_title , ul.learning-path span.ph.wt_learning_path_section_title {
	 display: block;
	 margin: 0 0 10px !important;
	 color: var(--font-color-section-title3, #7A7F8A) !important;
	 font-size: 16px !important;
	 font-weight: 600 !important;
	 line-height: 24px !important;
}

/* 所有链接组使用三列 grid；重置全局 ul/ol 默认缩进。 */
ol.learning-path .wt_learning_path_head_links > ul, ul.learning-path .wt_learning_path_head_links > ul,
ol.learning-path .wt_learning_path_head_links > ol, ul.learning-path .wt_learning_path_head_links > ol,
ol.learning-path .wt_learning_path_section_links > ul, ul.learning-path .wt_learning_path_section_links > ul,
ol.learning-path .wt_learning_path_section_links > ol , ul.learning-path .wt_learning_path_section_links > ol {
	 display: grid;
	 /* 2026-10-14 更新点：PC 端链接一行最多 4 个（移动端一行三个）。 */
	 grid-template-columns: repeat(4, minmax(0, 1fr));
	 column-gap: 24px;
	 row-gap: 8px;
	 margin: 0;
	 padding: 0;
	 list-style: none;
}

/* 高特异性 scoped reset：覆盖正文全局 .ol/.ul/li li/p 的 !important 间距。 */
ol.learning-path .wt_learning_path_head_links > ul > li, ul.learning-path .wt_learning_path_head_links > ul > li,
ol.learning-path .wt_learning_path_head_links > ol > li, ul.learning-path .wt_learning_path_head_links > ol > li,
ol.learning-path .wt_learning_path_section_links > ul > li, ul.learning-path .wt_learning_path_section_links > ul > li,
ol.learning-path .wt_learning_path_section_links > ol > li , ul.learning-path .wt_learning_path_section_links > ol > li {
	 min-width: 0;
	 margin: 0 !important;
	 padding: 0 !important;
	 list-style: none;
	 font-size: 14px;
	 line-height: 20px;
}

ol.learning-path .wt_learning_path_head_links > ul > li > .p, ul.learning-path .wt_learning_path_head_links > ul > li > .p,
ol.learning-path .wt_learning_path_head_links > ol > li > .p, ul.learning-path .wt_learning_path_head_links > ol > li > .p,
ol.learning-path .wt_learning_path_section_links > ul > li > .p, ul.learning-path .wt_learning_path_section_links > ul > li > .p,
ol.learning-path .wt_learning_path_section_links > ol > li > .p , ul.learning-path .wt_learning_path_section_links > ol > li > .p {
	 margin: 0 !important;
	 padding: 0 !important;
}

/* 链接纯文本、允许中文换行；无箭头，hover/focus 变蓝。 */
ol.learning-path .xref , ul.learning-path .xref {
	 display: inline;
	 color: var(--font-color-section-title);
	 font-size: 14px;
	 font-weight: 400;
	 line-height: 20px;
	 overflow-wrap: anywhere;
	 text-decoration: none;
	 transition: color 160ms ease;
}

ol.learning-path .xref:focus-visible , ul.learning-path .xref:focus-visible {
	 color: var(--font-color-link-web); /* 2026-10-14 更新点：悬浮/聚焦色与其他正文链接一致，不再依赖主题按钮红。 */
	 outline: 2px solid var(--font-color-link-web);
	 outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
	 ol.learning-path .xref:hover , ul.learning-path .xref:hover {
		 color: var(--font-color-link-web); /* 2026-10-14 更新点：悬浮/聚焦色与其他正文链接一致，不再依赖主题按钮红。 */
	 }
}

/* 非标准输入仍放入显式 fallback 区，确保内容可见且不混入主 grid。 */
ol.learning-path .wt_learning_path_fallback , ul.learning-path .wt_learning_path_fallback {
	 margin-top: 12px;
}

@media only screen and (max-width: 768px) {
	 ol.ol.learning-path,
	 ol.steps.learning-path,
	 ul.ul.learning-path {
		 margin: 24px 0;
	 }

	 ol.learning-path > li.wt_learning_path_item , ul.learning-path > li.wt_learning_path_item {
		 grid-template-columns: 32px minmax(0, 1fr);
		 column-gap: 16px;
		 padding-bottom: 32px !important;
	 }

/* 移动端：阶段标题独占一行；小标题分组与默认链接落到标题下方（PC 端才在右侧），链接一行两个。 */
	 ol.learning-path .wt_learning_path_head , ul.learning-path .wt_learning_path_head {
		 grid-template-columns: minmax(0, 1fr);
		 row-gap: 12px;
	 }

	 ol.learning-path .wt_learning_path_sections , ul.learning-path .wt_learning_path_sections {
		 grid-column: 1;
	 }

	 ol.learning-path .wt_learning_path_marker , ul.learning-path .wt_learning_path_marker {
		 margin-top: 0;
	 }

	 ol.learning-path .wt_learning_path_head_links > ul, ul.learning-path .wt_learning_path_head_links > ul,
	 ol.learning-path .wt_learning_path_head_links > ol, ul.learning-path .wt_learning_path_head_links > ol,
	 ol.learning-path .wt_learning_path_section_links > ul, ul.learning-path .wt_learning_path_section_links > ul,
	 ol.learning-path .wt_learning_path_section_links > ol , ul.learning-path .wt_learning_path_section_links > ol {
		 /* 2026-10-14 更新点：移动端链接一行三个，减少空白。 */
		 grid-template-columns: repeat(3, minmax(0, 1fr));
		 column-gap: 12px;
	 }
}

@media only screen and (max-width: 480px) {
	 ol.learning-path .wt_learning_path_head_links > ul, ul.learning-path .wt_learning_path_head_links > ul,
	 ol.learning-path .wt_learning_path_head_links > ol, ul.learning-path .wt_learning_path_head_links > ol,
	 ol.learning-path .wt_learning_path_section_links > ul, ul.learning-path .wt_learning_path_section_links > ul,
	 ol.learning-path .wt_learning_path_section_links > ol , ul.learning-path .wt_learning_path_section_links > ol {
		 grid-template-columns: repeat(2, minmax(0, 1fr));
	 }
}

/*
 * --------------------------------------
 *
 */

/* 2026-08-11 更新点：支持通过 outputclass=flow-timeline 将普通有序列表和 Steps 显示为时间流卡片。 */
ol.ol:is(.flow-timeline, .timeline),
ol.steps:is(.flow-timeline, .timeline) {
	 margin: 32px 0 32px 14px;
	 padding: 0;
	 color: var(--font-color-topic-content);
	 list-style: none;
}

ol.steps:is(.flow-timeline, .timeline)::before {
	 display: block;
	 margin: 0 0 16px -14px;
	 color: var(--font-color-section-title3);
	 font-size: 14px;
	 line-height: 24px;
}

ol.ol:is(.flow-timeline, .timeline) > li,
ol.steps:is(.flow-timeline, .timeline) > li {
	 position: relative;
	 margin: 0 !important;
	 padding: 0 0 24px 32px;
	 list-style: none;
}

ol.ol:is(.flow-timeline, .timeline) > li:last-child,
ol.steps:is(.flow-timeline, .timeline) > li:last-child {
	 padding-bottom: 0;
}

ol.ol:is(.flow-timeline, .timeline) > li::before,
ol.steps:is(.flow-timeline, .timeline) > li::before {
	 content: counter(list-item);
	 position: absolute;
	 top: 0;
	 left: -14px;
	 z-index: 1;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 width: 28px;
	 height: 28px;
	 border-radius: 50%;
	 color: var(--wt-timeline-dot-color, var(--font-color-section-title3));
	 background-color: var(--wt-timeline-dot-bg, #F0F2F5);
	 font-size: 14px;
	 font-weight: 600;
	 line-height: 28px;
	 box-sizing: border-box;
}

ol.ol:is(.flow-timeline, .timeline) > li:not(:last-child)::after,
ol.steps:is(.flow-timeline, .timeline) > li:not(:last-child)::after {
	 content: "";
	 position: absolute;
	 top: 32px;
	 bottom: 8px;
	 left: 0;
	 width: 1px;
	 background-color: #E8E8E8;
}

/* 2026-08-11 更新点：纵向时间轴末项保留略短于卡片高度的渐隐尾线，避免流程在节点处突兀结束。 */
ol.ol:is(.flow-timeline, .timeline) > li:last-child::after,
ol.steps:is(.flow-timeline, .timeline) > li:last-child::after {
	 content: "";
	 position: absolute;
	 top: 32px;
	 bottom: 8px;
	 left: 0;
	 width: 1px;
	 background: linear-gradient(to bottom, #E8E8E8 0%, #E8E8E8 calc(100% - 32px), rgba(232, 232, 232, 0) 100%);
}

ol.ol:is(.flow-timeline, .timeline) > li > .ph:first-child,
ol.steps:is(.flow-timeline, .timeline) > li > .cmd {
	 display: block;
	 margin: 0 0 8px;
	 color: var(--font-color-section-title);
	 font-size: 18px;
	 font-weight: 600;
	 line-height: 28px;
}

/* 2026-08-18 更新点：timeline 标题链接继承标题颜色并取消下划线，保持普通链接点击行为。 */
ol.ol:is(.flow-timeline, .timeline) > li > .ph:first-child a,
ol.steps:is(.flow-timeline, .timeline) > li > .cmd a,
ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li > .ph:first-child a,
ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li > .cmd a {
	 color: inherit;
	 text-decoration: none;
}

/* 2026-08-18 更新点：普通 Timeline 节点悬浮或 ph 标题链接聚焦时，显示 pointer 箭头。 */
ol.ol:is(.flow-timeline, .timeline, .flow-timeline-horizontal, .timeline-h) > li > .ph:first-child a::after {
	 content: "";
	 display: inline-block;
	 width: 20px;
	 height: 20px;
	 margin-left: 4px;
	 background-color: currentColor;
	 vertical-align: -4px;
	 opacity: 0;
	 transform: translateX(-4px);
	 transition: opacity 160ms ease, transform 160ms ease;
	 -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z'/%3E%3C/svg%3E") center / contain no-repeat;
	 mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

ol.ol:is(.flow-timeline, .timeline, .flow-timeline-horizontal, .timeline-h) > li:hover > .ph:first-child a::after,
ol.ol:is(.flow-timeline, .timeline, .flow-timeline-horizontal, .timeline-h) > li > .ph:first-child a:focus-visible::after {
	 opacity: 1;
	 transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	 ol.ol:is(.flow-timeline, .timeline, .flow-timeline-horizontal, .timeline-h) > li > .ph:first-child a::after {
		 transition: none;
	 }
}

/* 2026-08-19 更新点：普通 Timeline 中除首个 ph 标题外，所有直属内容块均生成卡片，支持 p、ol、ul 等标记。 */
ol.ol:is(.flow-timeline, .timeline) > li > :not(.ph:first-child),
ol.steps:is(.flow-timeline, .timeline) > li > .info {
	 margin: 0 0 8px !important;
	 padding: 12px 16px;
	 border: var(--border-normal);
	 border-radius: 10px;
	 color: var(--font-color-topic-content);
	 background-color: var(--background-color-normal);
	 line-height: 24px;
	 box-sizing: border-box;
}

/* ol、ul 需要为列表符号预留比普通内容卡片更宽的起始侧内边距。 */
ol.ol:is(.flow-timeline, .timeline, .flow-timeline-horizontal, .timeline-h) > li > :not(.ph:first-child):is(ol, ul) {
	 padding-inline-start: 36px;
}

ol.ol:is(.flow-timeline, .timeline) > li > :not(.ph:first-child):last-child,
ol.steps:is(.flow-timeline, .timeline) > li > .info:last-child {
	 margin-bottom: 0 !important;
}

ol.steps:is(.flow-timeline, .timeline) > li > .info > :first-child {
	 margin-top: 0 !important;
}

ol.steps:is(.flow-timeline, .timeline) > li > .info > :last-child {
	 margin-bottom: 0 !important;
}

/* 2026-08-11 更新点：增加 outputclass=flow-timeline-horizontal，桌面端使用包含末端连线的完整横向轴线，移动端自动切换为纵向时间流。 */
ol.ol:is(.flow-timeline-horizontal, .timeline-h),
ol.steps:is(.flow-timeline-horizontal, .timeline-h) {
	 position: relative;
	 display: grid;
	 grid-auto-flow: column;
	 grid-auto-columns: minmax(220px, 1fr);
	 align-items: start;
	 column-gap: 24px;
	 margin: 32px 0;
	 padding: 0 0 8px;
	 color: var(--font-color-topic-content);
	 list-style: none;
	 overflow-x: auto;
	 scroll-snap-type: x proximity;
	 scrollbar-width: thin;
	 -webkit-overflow-scrolling: touch;
	 counter-reset: flow-timeline-horizontal-item;
}

ol.steps:is(.flow-timeline-horizontal, .timeline-h) {
	 padding-top: 40px;
}

ol.steps:is(.flow-timeline-horizontal, .timeline-h)::before {
	 position: absolute;
	 top: 0;
	 left: 0;
	 display: block;
	 color: var(--font-color-section-title3);
	 font-size: 14px;
	 line-height: 24px;
}

ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li,
ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li {
	 position: relative;
	 display: flex;
	 flex-direction: column;
	 min-width: 0;
	 margin: 0 !important;
	 padding: 44px 0 0;
	 list-style: none;
	 scroll-snap-align: start;
	 counter-increment: flow-timeline-horizontal-item;
}

ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li::before,
ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li::before {
	 content: counter(flow-timeline-horizontal-item);
	 position: absolute;
	 top: 0;
	 left: 0;
	 z-index: 1;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 width: 28px;
	 height: 28px;
	 border-radius: 50%;
	 color: var(--wt-timeline-dot-color, var(--font-color-section-title3));
	 background-color: var(--wt-timeline-dot-bg, #F0F2F5);
	 font-size: 14px;
	 font-weight: 600;
	 line-height: 28px;
	 box-sizing: border-box;
}

ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li::after,
ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li::after {
	 content: "";
	 position: absolute;
	 top: 14px;
	 right: 0;
	 left: 32px;
	 height: 1px;
	 background-color: #E8E8E8;
}

ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li:not(:last-child)::after,
ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li:not(:last-child)::after {
	 right: -20px;
}

ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li > .ph:first-child,
ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li > .cmd {
	 display: block;
	 margin: 0 0 8px;
	 color: var(--font-color-section-title);
	 font-size: 18px;
	 font-weight: 600;
	 line-height: 28px;
}

ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li > :not(.ph:first-child),
ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li > .info {
	 width: 100%;
	 margin: 0 !important;
	 padding: 12px 16px;
	 border: var(--border-normal);
	 border-radius: 10px;
	 color: var(--font-color-topic-content);
	 background-color: var(--background-color-normal);
	 line-height: 24px;
	 box-sizing: border-box;
}

/* 2026-08-19 更新点：横向时间流的多个直属内容块始终纵向排列，并分别占满所在时间节点。 */
ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li > :not(.ph:first-child):not(:last-child) {
	 margin-bottom: 8px !important;
}

ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li > .info > :first-child {
	 margin-top: 0 !important;
}

ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li > .info > :last-child {
	 margin-bottom: 0 !important;
}

/* 2026-08-11 更新点：悬浮时间流的 li 或 step 时，对应数字圆点使用蓝色高亮背景。 */
ol:is(.ol, .steps):is(.flow-timeline, .timeline, .flow-timeline-horizontal, .timeline-h) > li::before {
	 transition: color 0.2s ease, background-color 0.2s ease;
}

ol:is(.ol, .steps):is(.flow-timeline, .timeline, .flow-timeline-horizontal, .timeline-h) > li:hover::before {
	 /* 2026-09-28 更新点：悬浮圆点颜色改用 CSS 变量，可通过颜色类自定义，默认改用 --background-color-primary-button。 */
	 color: var(--wt-timeline-dot-hover-color, #FFFFFF);
	 background-color: var(--wt-timeline-dot-hover-bg, var(--background-color-primary-button));
}

/* 2026-09-28 更新点：timeline/timeline-h 数字圆点悬浮颜色支持动态自定义。
   用法：DITA 源 ol 的 outputclass 直接追加色值类（#FFFFFF 色值去掉 #），
   如 outputclass="timeline 0055FF" 或 outputclass="timeline-h 0055FF"，
   JS（wt_topic.js 的 initTimelineDotColors）读取该类后将颜色写入下方 CSS 变量，
   仅悬浮态生效，默认态保持灰底 #F0F2F5；不写颜色类时悬浮默认 --background-color-primary-button。 */

/* 2026-08-11 更新点：增加 timeline、timeline-h 和 cards-h 简写，其中 cards-h 仅用于纵向时间流的多卡片横排。 */
ol.ol:is(.flow-timeline, .timeline).cards-h {
	 counter-reset: flow-timeline-cards-item;
}

ol.ol:is(.flow-timeline, .timeline).cards-h > li {
	 counter-increment: flow-timeline-cards-item;
}

ol.ol:is(.flow-timeline, .timeline).cards-h > li::before {
	 content: counter(flow-timeline-cards-item);
}

ol.ol:is(.flow-timeline, .timeline).cards-h > li:has(> :not(.ph:first-child) ~ :not(.ph:first-child)) {
	 display: flex;
	 flex-direction: row;
	 flex-wrap: wrap;
	 justify-content: flex-start;
	 gap: 8px;
}

ol.ol:is(.flow-timeline, .timeline).cards-h > li:has(> :not(.ph:first-child) ~ :not(.ph:first-child)) > .ph:first-child {
	 flex: 0 0 100%;
}

/* 2026-08-19 更新点：多卡片支持所有直属内容块，最多三列且换行后保持左对齐；仅一个内容块时仍占满整行。 */
ol.ol:is(.flow-timeline, .timeline).cards-h > li:has(> :not(.ph:first-child) ~ :not(.ph:first-child)) > :not(.ph:first-child) {
	 flex: 0 1 calc((100% - 16px) / 3);
	 width: auto;
	 min-width: min(180px, 100%);
	 max-width: calc((100% - 16px) / 3);
	 margin: 0 !important;
}

ol.ol:is(.flow-timeline, .timeline).cards-h > li:has(> :not(.ph:first-child) ~ :not(.ph:first-child)):not(:has(> :not(.ph:first-child) ~ :not(.ph:first-child) ~ :not(.ph:first-child))) > :not(.ph:first-child) {
	 flex-basis: calc((100% - 8px) / 2);
	 max-width: calc((100% - 8px) / 2);
}

@media only screen and (max-width: 768px) {
	 ol.ol:is(.flow-timeline, .timeline),
	 ol.steps:is(.flow-timeline, .timeline) {
		 margin: 24px 0 24px 12px;
	 }

	 ol.steps:is(.flow-timeline, .timeline)::before {
		 margin: 0 0 12px -12px;
	 }

	 ol.ol:is(.flow-timeline, .timeline) > li,
	 ol.steps:is(.flow-timeline, .timeline) > li {
		 padding: 0 0 18px 28px;
	 }

	 ol.ol:is(.flow-timeline, .timeline) > li:last-child,
	 ol.steps:is(.flow-timeline, .timeline) > li:last-child {
		 padding-bottom: 0;
	 }

	 ol.ol:is(.flow-timeline, .timeline) > li::before,
	 ol.steps:is(.flow-timeline, .timeline) > li::before {
		 left: -12px;
		 width: 24px;
		 height: 24px;
		 font-size: 12px;
		 line-height: 24px;
	 }

	 ol.ol:is(.flow-timeline, .timeline) > li:not(:last-child)::after,
	 ol.steps:is(.flow-timeline, .timeline) > li:not(:last-child)::after {
		 top: 28px;
		 bottom: 6px;
	 }

	 ol.ol:is(.flow-timeline, .timeline) > li:last-child::after,
	 ol.steps:is(.flow-timeline, .timeline) > li:last-child::after {
		 top: 28px;
		 bottom: 6px;
	 }

	 ol.ol:is(.flow-timeline, .timeline) > li > .ph:first-child,
	 ol.steps:is(.flow-timeline, .timeline) > li > .cmd {
		 margin-bottom: 6px;
		 font-size: 16px;
		 line-height: 24px;
	 }

	 ol.ol:is(.flow-timeline, .timeline) > li > :not(.ph:first-child),
	 ol.steps:is(.flow-timeline, .timeline) > li > .info {
		 padding: 10px 12px;
		 border-radius: 8px;
		 font-size: 13px;
		 line-height: 20px;
	 }

	 ol.ol:is(.flow-timeline, .timeline, .flow-timeline-horizontal, .timeline-h) > li > :not(.ph:first-child):is(ol, ul) {
		 padding-inline-start: 32px;
	 }

	 ol.ol:is(.flow-timeline-horizontal, .timeline-h),
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) {
		 display: block;
		 margin: 24px 0 24px 12px;
		 padding: 0;
		 overflow: visible;
		 scroll-snap-type: none;
	 }

	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) {
		 padding-top: 0;
	 }

	 ol.steps:is(.flow-timeline-horizontal, .timeline-h)::before {
		 position: static;
		 display: block;
		 margin: 0 0 12px -12px;
	 }

	 ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li,
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li {
		 display: block;
		 min-width: 0;
		 padding: 0 0 18px 28px;
		 scroll-snap-align: none;
	 }

	 ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li:last-child,
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li:last-child {
		 padding-bottom: 0;
	 }

	 ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li::before,
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li::before {
		 top: 0;
		 left: -12px;
		 width: 24px;
		 height: 24px;
		 font-size: 12px;
		 line-height: 24px;
	 }

	 ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li::after,
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li::after {
		 display: none;
	 }

	 ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li:not(:last-child)::after,
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li:not(:last-child)::after {
		 display: block;
		 top: 28px;
		 right: auto;
		 bottom: 6px;
		 left: 0;
		 width: 1px;
		 height: auto;
	 }

	 /* 2026-08-11 更新点：横向时间轴在移动端转为纵向后，末项同样显示渐隐尾线。 */
	 ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li:last-child::after,
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li:last-child::after {
		 display: block;
		 top: 28px;
		 right: auto;
		 bottom: 6px;
		 left: 0;
		 width: 1px;
		 height: auto;
		 background: linear-gradient(to bottom, #E8E8E8 0%, #E8E8E8 calc(100% - 32px), rgba(232, 232, 232, 0) 100%);
	 }

	 ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li > .ph:first-child,
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li > .cmd {
		 margin-bottom: 6px;
		 font-size: 16px;
		 line-height: 24px;
	 }

	 ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li > :not(.ph:first-child),
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li > .info {
		 width: auto;
		 margin-bottom: 8px !important;
		 padding: 10px 12px;
		 border-radius: 8px;
		 font-size: 13px;
		 line-height: 20px;
	 }

	 ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li > :not(.ph:first-child):last-child,
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li > .info:last-child {
		 margin-bottom: 0 !important;
	 }

	 ol.ol:is(.flow-timeline, .timeline).cards-h > li:has(> :not(.ph:first-child) ~ :not(.ph:first-child)) {
		 display: block;
	 }

	 ol.ol:is(.flow-timeline, .timeline).cards-h > li > :not(.ph:first-child) {
		 width: auto;
		 min-width: 0;
		 max-width: none;
		 margin-bottom: 8px !important;
	 }

	 ol.ol:is(.flow-timeline, .timeline).cards-h > li > :not(.ph:first-child):last-child {
		 margin-bottom: 0 !important;
	 }
}


/*
 * --------------------------------------
 *
 */