/* issue 246 場景 cloudcoffer-utds-deploy：UTDS 旁接佈署 A／B／C 互動圖（inline SVG，不是圖片），放在內文。元件自己是深色面板。
   顏色只讀官網 token：品牌強調色 --accent-dark／--accent-on（依頁面品牌色組，不寫死色碼）、TLS 線＝--arch-sky、警示＝--arch-coral，底與字用 --deep／--deeper／--paper／--muted-on-dark／--arch-node。
   沒有 JS 或減少動態時直接是完整狀態（三個方案依序全部展開）；淡化、轉場、脈動全部在檔案最後的 no-preference 區塊內，由 JS 加在根節點的屬性啟動。
   每個方案有橫向（寬）與直向（窄）兩份 SVG，依視窗寬度（62rem）切換。節點文字大小由伺服器依字寬自動縮小，CSS 不設 SVG 字級。 */
.page-blocks .ud { --ud-gold: var(--accent-dark); --ud-gold-soft: color-mix(in srgb, var(--accent-dark) 70%, var(--paper)); --ud-on-gold: var(--accent-on); --ud-blue: var(--arch-sky); --ud-pale: color-mix(in srgb, var(--paper) 85%, var(--arch-sky)); --ud-grey: color-mix(in srgb, var(--muted-on-dark) 60%, var(--deeper)); --ud-warn: var(--arch-coral); --ud-node: var(--arch-node); --ud-line: color-mix(in srgb, var(--paper) 14%, transparent);
  position: relative; min-width: 0; padding: clamp(1rem, 3vw, 2rem); border: 1px solid color-mix(in srgb, var(--paper) 10%, transparent); border-radius: 1.5rem; background: linear-gradient(180deg, var(--deep), var(--deeper)); color: var(--paper); text-align: left; overflow: hidden; }
.page-blocks .ud > * { min-width: 0; }
.page-blocks .ud-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 分頁與按鈕：沒有 JS 時整列 hidden */
.page-blocks .ud-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.page-blocks .ud-tabs[hidden], .page-blocks .ud-tools[hidden], .page-blocks .ud-panel[hidden] { display: none; }
.page-blocks .ud-tab { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 1.1rem; border: 1.5px solid color-mix(in srgb, var(--paper) 24%, transparent); border-radius: var(--r-pill); color: var(--muted-on-dark); font-size: 1rem; font-weight: 700; line-height: 1.3; cursor: pointer; }
.page-blocks .ud-tab:hover { color: var(--paper); }
.page-blocks .ud-tab[aria-selected="true"] { border-color: var(--ud-gold); background: var(--ud-gold); color: var(--ud-on-gold); }
.page-blocks .ud-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem 1.1rem; border: 1px solid color-mix(in srgb, var(--paper) 28%, transparent); border-radius: var(--r-pill); background: color-mix(in srgb, var(--paper) 8%, transparent); color: var(--paper); font-size: .9375rem; line-height: 1.3; cursor: pointer; }
.page-blocks .ud-btn:hover { background: color-mix(in srgb, var(--paper) 16%, transparent); }
.page-blocks .ud-btn[aria-pressed="true"] { border-color: var(--ud-gold); background: color-mix(in srgb, var(--ud-gold) 26%, transparent); }
.page-blocks .ud-tab:focus-visible, .page-blocks .ud-btn:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }

/* 面板：沒有 JS 時三個方案依序展開；有 JS 只留一個，標題改成只給讀屏的文字 */
.page-blocks .ud-panel + .ud-panel { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--ud-line); }
.page-blocks .ud[data-ud-js] .ud-panel + .ud-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.page-blocks .ud-ptitle { margin: 0 0 .75rem; color: var(--ud-gold-soft); font-size: 1.25rem; line-height: 1.4; }
.page-blocks .ud[data-ud-js] .ud-ptitle { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page-blocks .ud-meta { max-width: 62rem; }
.page-blocks .ud-level { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .75rem; font-weight: 700; }
.page-blocks .ud-level-k { color: var(--muted-on-dark); font-weight: 500; }
.page-blocks .ud-bars { display: inline-flex; gap: .3rem; }
.page-blocks .ud-bar { display: block; width: 2.4rem; height: .6rem; border-radius: 999px; background: color-mix(in srgb, var(--paper) 16%, transparent); }
.page-blocks .ud-bar--f { background: var(--ud-gold); }
.page-blocks .ud-level-v { color: var(--ud-gold-soft); }
.page-blocks .ud-body { margin: 0 0 1rem; color: var(--ud-pale); font-size: 1.0625rem; line-height: 1.7; }
.page-blocks .ud-steps { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; counter-reset: ud-n; }
.page-blocks .ud-step { counter-increment: ud-n; display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem .35rem .4rem; border: 1.5px solid color-mix(in srgb, var(--ud-gold) 60%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--ud-gold) 10%, transparent); font-size: .95rem; font-weight: 600; line-height: 1.4; }
.page-blocks .ud-step::before { content: counter(ud-n); display: inline-grid; flex: none; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ud-gold); color: var(--ud-on-gold); font-size: .85rem; font-weight: 800; }
.page-blocks .ud-tools { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }

/* 舞台 */
.page-blocks .ud-stage { padding: .75rem; border: 1px solid color-mix(in srgb, var(--paper) 12%, transparent); border-radius: 1.25rem; background: color-mix(in srgb, var(--paper) 4%, transparent); }
.page-blocks .ud-svg { display: block; width: 100%; height: auto; overflow: visible; }
.page-blocks .ud-svg--v { display: none; max-width: 24rem; margin: 0 auto; }
.page-blocks .ud-route, .page-blocks .ud-tap-route { fill: none; stroke: none; }
.page-blocks .ud-node rect, .page-blocks .ud-relay rect, .page-blocks .ud-utds rect { fill: var(--ud-node); stroke: color-mix(in srgb, var(--paper) 40%, transparent); stroke-width: 1.6; }
.page-blocks .ud-node use, .page-blocks .ud-relay use, .page-blocks .ud-utds use { fill: none; stroke: var(--ud-pale); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.page-blocks .ud-node--dec rect { stroke: var(--ud-gold); stroke-width: 2; }
.page-blocks .ud-utds rect { stroke: var(--ud-gold); stroke-width: 2; }
.page-blocks .ud-utds use { stroke: var(--ud-gold-soft); }
.page-blocks .ud-nl, .page-blocks .ud-ns, .page-blocks .ud-tl { font-family: inherit; text-anchor: middle; }
.page-blocks .ud-nl { fill: var(--paper); font-weight: 700; }
.page-blocks .ud-ns { fill: var(--muted-on-dark); font-weight: 500; }
.page-blocks .ud-ns--a { fill: var(--ud-gold-soft); font-weight: 700; }
.page-blocks .ud-tl { fill: var(--ud-gold-soft); font-weight: 600; text-anchor: start; }
.page-blocks .ud-tl--e { text-anchor: end; }
.page-blocks .ud-tl--c { text-anchor: middle; }
.page-blocks .ud-tl--halo { paint-order: stroke; stroke: var(--deeper); stroke-width: 10px; stroke-linejoin: round; }
.page-blocks .ud-mk--tls { fill: var(--ud-blue); }
.page-blocks .ud-mk--clr { fill: var(--ud-pale); }
.page-blocks .ud-mk--tap { fill: var(--ud-gold); }
.page-blocks .ud-mk--off { fill: var(--ud-grey); }
.page-blocks .ud-line { fill: none; stroke-linecap: round; }
.page-blocks .ud-line--tls { stroke: var(--ud-blue); stroke-width: 7; marker-end: url(#ud-ar-tls); }
.page-blocks .ud-line--clr { stroke: var(--ud-pale); stroke-width: 4; stroke-dasharray: .1 9; marker-end: url(#ud-ar-clr); }
.page-blocks .ud-line--neu { stroke: var(--ud-pale); stroke-width: 3; marker-end: url(#ud-ar-clr); }
.page-blocks .ud-badge circle { fill: var(--ud-node); stroke-width: 2; }
.page-blocks .ud-badge use { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.page-blocks .ud-badge--tls circle, .page-blocks .ud-badge--tls use { stroke: var(--ud-blue); }
.page-blocks .ud-badge--clr circle, .page-blocks .ud-badge--clr use { stroke: var(--ud-pale); }
.page-blocks .ud-dec circle { stroke: var(--ud-gold); }
.page-blocks .ud-dec use { stroke: var(--ud-gold-soft); }
.page-blocks .ud-tap-line { fill: none; stroke: var(--ud-gold); stroke-width: 3.5; stroke-dasharray: 9 7; stroke-linecap: round; marker-end: url(#ud-ar-tap); }
.page-blocks .ud-x { display: none; }
.page-blocks .ud-x circle { fill: var(--ud-node); stroke: var(--ud-warn); stroke-width: 2; }
.page-blocks .ud-x path { fill: none; stroke: var(--ud-warn); stroke-width: 2.6; stroke-linecap: round; }
.page-blocks .ud-utds rect.ud-pulse { fill: none; stroke: var(--ud-gold); opacity: 0; transform-box: fill-box; transform-origin: center; }

/* 狀態：中斷 UTDS（根節點 data-ud-off）、後端重新加密（面板 data-ud-enc） */
.page-blocks .ud-v-enc, .page-blocks .ud-st-off, .page-blocks .ud-st-enc { display: none; }
.page-blocks .ud-panel[data-ud-enc] .ud-v-enc { display: inline; }
.page-blocks .ud-panel[data-ud-enc] .ud-v-clr { display: none; }
.page-blocks .ud[data-ud-off] .ud-st-on, .page-blocks .ud-panel[data-ud-enc] .ud-st-on { display: none; }
.page-blocks .ud-panel[data-ud-enc] .ud-st-enc { display: inline; }
.page-blocks .ud[data-ud-off] .ud-panel:not([data-ud-enc]) .ud-st-off { display: inline; }
.page-blocks .ud[data-ud-off] .ud-tap-line, .page-blocks .ud-panel[data-ud-enc] .ud-tap-line { stroke: var(--ud-grey); marker-end: url(#ud-ar-off); }
.page-blocks .ud[data-ud-off] .ud-tl, .page-blocks .ud-panel[data-ud-enc] .ud-tl { fill: var(--ud-grey); }
.page-blocks .ud[data-ud-off] .ud-x, .page-blocks .ud-panel[data-ud-enc] .ud-x { display: inline; }
.page-blocks .ud[data-ud-off] .ud-utds rect, .page-blocks .ud-panel[data-ud-enc] .ud-utds rect { stroke: var(--ud-grey); }
.page-blocks .ud[data-ud-off] .ud-utds use, .page-blocks .ud-panel[data-ud-enc] .ud-utds use { stroke: var(--ud-grey); }
.page-blocks .ud[data-ud-off] .ud-ns--a, .page-blocks .ud-panel[data-ud-enc] .ud-ns--a { fill: var(--ud-grey); }
.page-blocks .ud[data-ud-off] .ud-st-off { fill: var(--ud-warn); }
.page-blocks .ud-panel[data-ud-enc] .ud-st-enc { fill: var(--ud-warn); }
.page-blocks .ud-warn { margin: .9rem 0 0; padding: .7rem 1rem; border: 1.5px solid var(--ud-warn); border-radius: .8rem; background: color-mix(in srgb, var(--ud-warn) 12%, transparent); font-weight: 600; line-height: 1.6; }
.page-blocks .ud[data-ud-js] .ud-warn { display: none; }
.page-blocks .ud[data-ud-js] .ud-panel[data-ud-enc] .ud-warn { display: block; }

/* 光點 */
.page-blocks .ud-dot { fill: var(--paper); stroke: var(--ud-blue); stroke-width: 3; filter: drop-shadow(0 0 4px var(--ud-blue)); }
.page-blocks .ud-dot--tap { fill: var(--ud-gold-soft); stroke: var(--ud-gold); filter: drop-shadow(0 0 4px var(--ud-gold)); }

.page-blocks .ud-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1rem 0 0; padding: 0; list-style: none; color: var(--muted-on-dark); font-size: .9rem; line-height: 1.5; }
.page-blocks .ud-legend li { display: inline-flex; align-items: center; gap: .5rem; }
.page-blocks .ud-lg { flex: none; width: 2.75rem; height: .9rem; overflow: visible; }
.page-blocks .ud-lg .ud-line, .page-blocks .ud-lg .ud-tap-line { marker-end: none; }
.page-blocks .ud-dotkey { flex: none; width: .9rem; height: .9rem; border: 2.5px solid var(--ud-blue); border-radius: 50%; background: var(--paper); }
.page-blocks .ud-note { margin: 1rem 0 0; color: var(--ud-gold-soft); font-weight: 600; line-height: 1.6; }
.page-blocks .ud-note:empty { display: none; }

@media (max-width: 62rem) {
  .page-blocks .ud-svg--h { display: none; }
  .page-blocks .ud-svg--v { display: block; }
}
@media (max-width: 30rem) {
  .page-blocks .ud { padding: 1rem .75rem; border-radius: 1rem; }
  .page-blocks .ud-stage { padding: .5rem .25rem; }
  .page-blocks .ud-tab { padding: .4rem .8rem; font-size: .9rem; }
  .page-blocks .ud-bar { width: 1.8rem; }
}

/* 動態：只在允許動態時才淡化尚未走到的項目、轉場與脈動；沒有 JS 或減少動態時一律是完整狀態 */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .ud[data-ud-anim] [data-ud-at]:not(.ud-is-lit) { opacity: .25; }
  html:not([data-motion="off"]) .page-blocks .ud[data-ud-anim] .ud-step:not(.ud-is-lit) { opacity: .35; }
  html:not([data-motion="off"]) .page-blocks .ud[data-ud-anim] :is([data-ud-at], .ud-step) { transition: opacity .45s ease; }
  html:not([data-motion="off"]) .page-blocks .ud-utds.ud-is-hit rect.ud-pulse { animation: ud-pulse .8s ease-out 1; }
  @keyframes ud-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
}
/* issue 371：按鈕用 all: unset，補回 position 讓「可以點」泡泡與圓圈定位在鈕上；泡泡放在鈕下方（箭頭朝上），避免蓋住鈕上方的提示行，
   泡泡存在時於鈕列下方留出空間，第一次操作移除泡泡時一併收回。 */
.page-blocks .ud-btn.cfh-host { position: relative; }
.page-blocks .ud-btn .cfh-tip { bottom: auto; top: calc(100% + .625rem); }
.page-blocks .ud-btn .cfh-tip::after { top: auto; bottom: 100%; border-width: 0 .4375rem .4375rem; border-top-color: transparent; border-bottom-color: var(--accent-dark); }
.page-blocks .ud-tools:has(.cfh-tip) { margin-bottom: 3.25rem; }
@media (prefers-reduced-motion: no-preference) { .page-blocks .ud-tools { transition: margin-bottom .2s var(--ease); } }