/* issue 243 場景 solution-vibe-flow：Vibe 頁「資料出口」與「軟體風險」兩段動態流程圖（inline SVG，不是圖片），放在頁面內文。元件自己是深色面板。
   顏色只讀官網 token：藍＝--cloudforce-blue、琥珀＝--arch-orange、珊瑚＝--arch-coral，底與字用 --deep／--deeper／--paper／--muted-on-dark／--arch-node／--arch-line。
   沒有 JS 或減少動態時直接是完整狀態；淡化、轉場、命中與脈動、光點全部在檔案最後的 no-preference 區塊內，由 JS 加在根節點的屬性啟動。
   每段 SVG 有寬版與窄版兩份，依卡片寬度（container query）切換，不是依視窗。 */
.page-blocks .vf-chain { --vf-soft: color-mix(in srgb, var(--cloudforce-blue) 55%, var(--paper)); position: relative; display: grid; gap: .75rem; min-width: 0; padding: 1.25rem; 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); overflow: hidden; text-align: left; }
.page-blocks .vf-chain > * { min-width: 0; }
.page-blocks .vf-sr { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page-blocks .vf-tools { display: flex; justify-content: flex-end; }
.page-blocks .vf-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; cursor: pointer; }
.page-blocks .vf-btn[hidden] { display: none; }
.page-blocks .vf-btn:hover { background: color-mix(in srgb, var(--paper) 16%, transparent); }
.page-blocks .vf-btn:focus-visible, .page-blocks .vf-stage:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.page-blocks .vf-tools:has(.vf-btn[hidden]) { display: none; }
.page-blocks .vf-stages { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; }
.page-blocks .vf-stages > * { min-width: 0; }
.page-blocks .vf-col { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.page-blocks .vf-col > .vf-stage { flex: 1; }
.page-blocks .vf-next { margin: 0; padding-inline: .5rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.5; }
.page-blocks .vf-next a { display: inline-block; padding-block: .125rem; color: var(--paper); text-decoration: underline; text-decoration-color: var(--arch-coral); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.page-blocks .vf-col:has(.vf-c-blue) .vf-next a { text-decoration-color: var(--cloudforce-blue); }
.page-blocks .vf-next a:hover { text-decoration-thickness: 3px; }
.page-blocks .vf-next a:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; border-radius: .25rem; }
.page-blocks .vf-c-blue, .page-blocks .vf-k-blue { --vf-c: var(--cloudforce-blue); }
.page-blocks .vf-c-coral, .page-blocks .vf-k-coral { --vf-c: var(--arch-coral); }
.page-blocks .vf-k-amber { --vf-c: var(--arch-orange); }
.page-blocks .vf-k-soft { --vf-c: var(--vf-soft); }
.page-blocks .vf-k-faint { --vf-c: var(--arch-line); }

.page-blocks .vf-stage { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; padding: 1.5rem; border: 1.5px solid var(--vf-c); border-radius: 1.6rem; background: linear-gradient(160deg, color-mix(in srgb, var(--vf-c) 20%, var(--deep)), color-mix(in srgb, var(--vf-c) 5%, var(--deeper))); box-shadow: 0 0 1.75rem color-mix(in srgb, var(--vf-c) 22%, transparent); color: var(--paper); text-align: left; cursor: pointer; }
.page-blocks .vf-stage:disabled { cursor: default; }
.page-blocks .vf-stage > span { display: block; }
.page-blocks .vf-stage > .vf-badge { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: .75rem; padding: .4rem 1.1rem .4rem .5rem; border: 1.5px solid var(--vf-c); border-radius: 999px; background: color-mix(in srgb, var(--vf-c) 14%, transparent); font-size: 1.3rem; font-weight: 800; line-height: 1.3; }
.page-blocks .vf-num { display: inline-grid; flex: none; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--vf-c); color: var(--deeper); font-size: 1.1rem; font-weight: 800; }
.page-blocks .vf-stage > .vf-desc { margin-top: 1rem; color: var(--muted-on-dark); font-size: 1.05rem; font-weight: 500; line-height: 1.6; }
.page-blocks .vf-stage > .vf-scene { margin-top: 1.25rem; container-type: inline-size; }

/* SVG 零件 */
.page-blocks .vf-svg { display: block; width: 100%; height: auto; overflow: visible; }
.page-blocks .vf-svg--narrow { display: none; max-width: 24rem; margin: 0 auto; }
@container (max-width: 31rem) {
  .page-blocks .vf-svg--wide { display: none; }
  .page-blocks .vf-svg--narrow { display: block; }
}
.page-blocks .vf-circ { fill: color-mix(in srgb, var(--vf-c) 16%, var(--arch-node)); stroke: var(--vf-c); stroke-width: 2.2; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--vf-c) 55%, transparent)); }
.page-blocks .vf-ico { fill: none; stroke: var(--vf-c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.page-blocks .vf-tx { fill: var(--paper); font-weight: 700; }
.page-blocks .vf-tx-m { fill: var(--muted-on-dark); }
.page-blocks .vf-tx-r { font-weight: 500; }
.page-blocks .vf-tx-k { fill: var(--vf-c); font-weight: 800; }
.page-blocks .vf-chiprect { fill: color-mix(in srgb, var(--vf-c) 12%, var(--arch-node)); stroke: color-mix(in srgb, var(--vf-c) 80%, transparent); stroke-width: 1.8; }
.page-blocks .vf-pillrect { fill: color-mix(in srgb, var(--vf-c) 12%, var(--arch-node)); stroke: var(--vf-c); stroke-width: 1.6; }
.page-blocks .vf-pillrect--solid { fill: color-mix(in srgb, var(--vf-c) 22%, var(--arch-node)); }
.page-blocks .vf-pillrect--amber { fill: color-mix(in srgb, var(--vf-c) 16%, var(--arch-node)); stroke-width: 2; }
.page-blocks .vf-wire { fill: none; stroke: var(--vf-c); stroke-linecap: round; }
.page-blocks .vf-wire--faint { stroke: var(--arch-line); }
.page-blocks .vf-arrow { fill: var(--vf-c); }
.page-blocks .vf-ent { fill: color-mix(in srgb, var(--paper) 3%, transparent); stroke: var(--arch-line); stroke-width: 1.8; stroke-dasharray: 7 7; }
.page-blocks .vf-boxrect { fill: color-mix(in srgb, var(--vf-c) 8%, var(--arch-node)); stroke: var(--vf-c); stroke-width: 2.2; }
.page-blocks .vf-rc { fill: color-mix(in srgb, var(--vf-c) 16%, transparent); }
.page-blocks .vf-ring { fill: none; stroke: var(--arch-orange); stroke-width: 2.4; stroke-dasharray: 5 6; }
.page-blocks .vf-xc { fill: var(--arch-node); stroke: var(--arch-coral); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.page-blocks .vf-xp { fill: none; stroke: var(--arch-coral); stroke-width: 2.4; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }

/* 光點（只在 JS 播放時出現） */
.page-blocks .vf-dot { position: absolute; left: 0; top: 0; z-index: 5; width: 1rem; height: 1rem; margin: -.5rem 0 0 -.5rem; border-radius: 50%; background: var(--arch-coral); box-shadow: 0 0 .5rem var(--arch-coral), 0 0 1.4rem var(--arch-coral); opacity: 0; pointer-events: none; }
.page-blocks .vf-dot.vf-is-show { opacity: 1; }
.page-blocks .vf-dot--blue { background: var(--cloudforce-blue); box-shadow: 0 0 .5rem var(--cloudforce-blue), 0 0 1.4rem var(--cloudforce-blue); }
.page-blocks .vf-dot--amber { background: var(--arch-orange); box-shadow: 0 0 .5rem var(--arch-orange), 0 0 1.4rem var(--arch-orange); }
.page-blocks .vf-is-dim { opacity: .3; }

@media (max-width: 62rem) {
  .page-blocks .vf-stages { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .page-blocks .vf-stage { padding: 1.25rem; }
}
@media (max-width: 30rem) {
  .page-blocks .vf-chain { padding: .75rem; }
  .page-blocks .vf-btn { min-height: 2.5rem; }
  .page-blocks .vf-stage { padding: 1rem; }
  .page-blocks .vf-stage > .vf-badge { font-size: 1.15rem; }
  .page-blocks .vf-stage > .vf-desc { font-size: .95rem; }
}

/* 動態：只在允許動態時才淡化未點亮項目、轉場、命中與脈動；沒有 JS 或減少動態時一律是完整狀態 */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .vf-chain[data-vf-anim] [data-vf-lit]:not(.vf-is-lit) { opacity: .22; }
  html:not([data-motion="off"]) .page-blocks .vf-chain[data-vf-anim] .vf-next[data-vf-lit]:not(.vf-is-lit) { opacity: 0; visibility: hidden; }
  html:not([data-motion="off"]) .page-blocks .vf-chain[data-vf-anim] .vf-stage[data-vf-lit]:not(.vf-is-lit) { opacity: .5; box-shadow: none; }
  html:not([data-motion="off"]) .page-blocks .vf-chain[data-vf-anim] [data-vf-lit]:not(.vf-is-lit) .vf-circ { filter: none; }
  html:not([data-motion="off"]) .page-blocks .vf-chain[data-vf-motion] :is([data-vf-lit], .vf-stage) { transition: opacity .45s ease, visibility .45s; }
  html:not([data-motion="off"]) .page-blocks .vf-chain[data-vf-motion] .vf-xg.vf-is-hit .vf-xc { animation: vf-hit .5s ease-out; }
  html:not([data-motion="off"]) .page-blocks .vf-chain[data-vf-motion] .vf-xg.vf-is-hit .vf-xp { animation: vf-hit-p .5s ease-out; }
  html:not([data-motion="off"]) .page-blocks .vf-chain[data-vf-motion] .vf-pillrect--amber.vf-is-pulse { animation: vf-pulse 1s ease-in-out 2; transform-box: fill-box; transform-origin: center; }
  @keyframes vf-hit { 0% { transform: scale(1); fill: var(--arch-node); } 40% { transform: scale(1.5); fill: var(--arch-coral); } 100% { transform: scale(1); fill: var(--arch-node); } }
  @keyframes vf-hit-p { 0% { stroke: var(--arch-coral); } 40% { stroke: var(--arch-node); } 100% { stroke: var(--arch-coral); } }
  @keyframes vf-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
}

/* issue 371：圖本身是深色底，提示行改用淺藍（共用樣式只替深色區段換色）。 */
.page-blocks .vf-chain > .cfh-line { --cfh-line: var(--accent-dark); }