/* issue 193 場景 devaeye-flow：流程線（移植示意站 AppSec 頁 .flow）。issue 326：線只畫到最後一點；步驟可帶小示意卡；
   沒有 JS（或減少動態）：線填滿、所有節點與示意點亮的完成畫面。有 JS：.is-armed 先暗，進入畫面 .is-play 後 CSS 動畫依序點亮一次後停住
   （--d＝第幾步 × 1.1 秒；捲出畫面由 motion.css 的 is-offscreen 暫停）。只讀官網 token 與 --accent*。 */
.page-blocks .dv-flow { --dv-cols: 4; --dv-gap: 1.75rem; position: relative; display: grid; grid-template-columns: repeat(var(--dv-cols), minmax(0, 1fr)); column-gap: var(--dv-gap); margin: 0; padding: 2.25rem 0 0; list-style: none; }
.page-blocks .dv-flow[data-count="2"] { --dv-cols: 2; } .page-blocks .dv-flow[data-count="3"] { --dv-cols: 3; } .page-blocks .dv-flow[data-count="5"] { --dv-cols: 5; } .page-blocks .dv-flow[data-count="6"] { --dv-cols: 6; }
/* 線：從第一點到最後一點（最後一欄的左緣＝最後一點）。 */
.page-blocks .dv-flow::before, .page-blocks .dv-flow::after { content: ""; position: absolute; left: .5rem; top: .6875rem; height: 3px; right: 0; }
/* issue 335：線畫滿整排（每段從菱形畫滿該欄，最後一欄也一樣），不停在最後一點前。 */
.page-blocks .dv-flow[data-count="1"]::before, .page-blocks .dv-flow[data-count="1"]::after { display: none; }
.page-blocks .dv-flow::before { background: var(--line); }
.page-blocks .dv-flow::after { background: var(--accent); transform-origin: left; }
.page-blocks .dv-fstep { position: relative; min-width: 0; display: flex; flex-direction: column; }
.page-blocks .dv-fstep::before { content: ""; position: absolute; left: 0; top: -2.25rem; width: 1.5rem; height: 1.5rem; box-sizing: border-box; background: var(--paper); border: 3px solid var(--line); transform: rotate(45deg) scale(.7); transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.page-blocks .dv-fstep.is-on::before { background: var(--accent); border-color: var(--accent); transform: rotate(45deg) scale(.75); }
.page-blocks .dv-fnum { display: block; margin-bottom: .625rem; color: var(--accent-ink); font-size: clamp(2.75rem, 5vw, 4.5rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.page-blocks .dv-flow--vis .dv-fnum { margin-top: 1.25rem; font-size: clamp(2.25rem, 3.6vw, 3rem); }
.page-blocks .dv-ftitle { margin: 0 0 .625rem; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.3; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; transition: color .3s var(--ease); }
.page-blocks .dv-fbody { margin: 0; line-height: 1.75; }

/* 示意卡（淺底用 --surface-sunken；深色區段用半透明白）。 */
.page-blocks .dv-fvis { display: flex; flex-direction: column; gap: .625rem; height: 11.5rem; padding: 1rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: var(--radius-l); background: var(--surface-sunken); font-size: .8125rem; }
.page-blocks .dv-fvh { display: flex; justify-content: space-between; align-items: center; gap: .5rem; color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.page-blocks .dv-fvh b { padding: .125rem .5625rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink); font-size: .71875rem; letter-spacing: 0; }
.page-blocks .dv-fchips { display: flex; flex-wrap: wrap; gap: .375rem; }
.page-blocks .dv-fchip { padding: .25rem .625rem; border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--line)); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font-weight: 600; white-space: nowrap; }
.page-blocks .dv-fchip.is-out { border-style: dashed; border-color: var(--line); background: transparent; color: var(--muted); }
.page-blocks .dv-fchip s { text-decoration-color: var(--accent-ink); text-decoration-thickness: 2px; }
.page-blocks .dv-fchip em { margin-left: .375rem; padding: 0 .375rem; border-radius: var(--radius-s); background: var(--line); color: var(--muted); font-size: .6875rem; font-style: normal; }
.page-blocks .dv-fscan { display: grid; gap: .375rem; }
.page-blocks .dv-frow { display: flex; justify-content: space-between; gap: .5rem; padding: .375rem .625rem; border-radius: var(--radius-s); background: var(--paper); }
.page-blocks .dv-frow b { color: var(--accent-ink); font-size: .75rem; }
.page-blocks .dv-fbar { height: .375rem; border-radius: .375rem; background: var(--line); overflow: hidden; }
.page-blocks .dv-fbar i { display: block; height: 100%; background: var(--accent); transform-origin: left; }
.page-blocks .dv-fsplit { flex: 1; display: grid; grid-template-columns: minmax(0, .75fr) 1.5rem minmax(0, 1.25fr); align-items: center; }
.page-blocks .dv-fsrc { padding: .625rem .5rem; border-radius: var(--radius-m); background: var(--ink); color: var(--paper); font-weight: 800; text-align: center; line-height: 1.4; }
.page-blocks .dv-fbranch { width: 100%; height: 100%; overflow: visible; }
.page-blocks .dv-fbranch path { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.page-blocks .dv-fouts { display: grid; gap: .5rem; }
.page-blocks .dv-fout { padding: .375rem .625rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-s); background: var(--paper); line-height: 1.45; }
.page-blocks .dv-fout b { display: block; color: var(--accent-ink); font-size: .71875rem; letter-spacing: .06em; }

html.js .page-blocks .dv-flow.is-armed .dv-fstep:not(.is-on) .dv-ftitle { color: var(--muted); }
.page-blocks :is(.pp-section--band, .pp-section--image) .dv-flow::before { background: var(--on-dark-line); }
.page-blocks :is(.pp-section--band, .pp-section--image) .dv-flow::after { background: var(--accent-fill, var(--accent-dark)); }
.page-blocks :is(.pp-section--band, .pp-section--image) .dv-fstep::before { background: var(--deeper); border-color: var(--on-dark-line); }
.page-blocks :is(.pp-section--band, .pp-section--image) .dv-fstep.is-on::before { background: var(--accent-fill, var(--accent-dark)); border-color: var(--accent-dark); }
.page-blocks :is(.pp-section--band, .pp-section--image) .dv-fnum { color: var(--accent-dark); }

/* 依序點亮：第 n 步的延遲。 */
.page-blocks .dv-fstep:nth-child(1) { --d: 0.0s; }
.page-blocks .dv-fstep:nth-child(2) { --d: 1.1s; }
.page-blocks .dv-fstep:nth-child(3) { --d: 2.2s; }
.page-blocks .dv-fstep:nth-child(4) { --d: 3.3s; }
.page-blocks .dv-fstep:nth-child(5) { --d: 4.4s; }
.page-blocks .dv-fstep:nth-child(6) { --d: 5.5s; }
.page-blocks .dv-fchip:nth-child(1) { --c: 0.0s; }
.page-blocks .dv-fchip:nth-child(2) { --c: 0.08s; }
.page-blocks .dv-fchip:nth-child(3) { --c: 0.16s; }
.page-blocks .dv-fchip:nth-child(4) { --c: 0.24s; }
.page-blocks .dv-fchip:nth-child(5) { --c: 0.32s; }
.page-blocks .dv-fchip:nth-child(6) { --c: 0.4s; }
.page-blocks .dv-fchip:nth-child(7) { --c: 0.48s; }
.page-blocks .dv-fchip:nth-child(8) { --c: 0.56s; }
.page-blocks .dv-flow[data-count="2"] { --dv-line: 1.1s; } .page-blocks .dv-flow[data-count="3"] { --dv-line: 2.2s; } .page-blocks .dv-flow[data-count="4"] { --dv-line: 3.3s; } .page-blocks .dv-flow[data-count="5"] { --dv-line: 4.4s; } .page-blocks .dv-flow[data-count="6"] { --dv-line: 5.5s; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="off"]) .page-blocks .dv-flow.is-armed::after { transform: scaleX(0); }
  html.js:not([data-motion="off"]) .page-blocks .dv-flow.is-armed .dv-fstep::before { background: var(--paper); border-color: var(--line); }
  html.js:not([data-motion="off"]) .page-blocks .dv-flow.is-armed :is(.dv-fvis, .dv-fnum, .dv-ftitle) { opacity: .35; }
  html.js:not([data-motion="off"]) .page-blocks .dv-flow.is-armed :is(.dv-fchip, .dv-frow b, .dv-fout) { opacity: 0; }
  html.js:not([data-motion="off"]) .page-blocks .dv-flow.is-armed .dv-fbar i { transform: scaleX(0); }
  html.js:not([data-motion="off"]) .page-blocks .dv-flow.is-armed .dv-fbranch path { stroke-dasharray: 100; stroke-dashoffset: 100; }
  html.js:not([data-motion="off"]) .page-blocks .dv-flow.is-armed .dv-fchip s { text-decoration-color: transparent; }
  html.js:not([data-motion="off"]) .page-blocks .dv-flow.is-play::after { animation: dv-line var(--dv-line, 3.3s) cubic-bezier(.4, 0, .3, 1) .2s both; }
  html.js:not([data-motion="off"]) .page-blocks .dv-flow.is-play .dv-fstep::before { animation: dv-node .35s var(--ease) var(--d) both; }
  html.js:not([data-motion="off"]) .page-blocks .dv-flow.is-play :is(.dv-fvis, .dv-fnum, .dv-ftitle) { animation: dv-in .5s var(--ease) var(--d) both; }
  html.js:not([data-motion="off"]) .page-blocks .dv-flow.is-play .dv-fchip { animation: dv-pop .35s var(--ease) calc(var(--d) + .2s + var(--c, 0s)) both; }
  html.js:not([data-motion="off"]) .page-blocks .dv-flow.is-play .dv-fchip s { animation: dv-strike .4s linear calc(var(--d) + .9s) both; }
  html.js:not([data-motion="off"]) .page-blocks .dv-flow.is-play .dv-fbar i { animation: dv-bar .9s linear calc(var(--d) + .2s) both; }
  html.js:not([data-motion="off"]) .page-blocks .dv-flow.is-play .dv-frow b { animation: dv-pop .3s var(--ease) calc(var(--d) + 1s) both; }
  html.js:not([data-motion="off"]) .page-blocks .dv-flow.is-play .dv-fbranch path { animation: dv-draw .6s var(--ease) calc(var(--d) + .3s) both; }
  html.js:not([data-motion="off"]) .page-blocks .dv-flow.is-play .dv-fout { animation: dv-pop .4s var(--ease) calc(var(--d) + .7s) both; }
  html.js:not([data-motion="off"]) .page-blocks .dv-flow.is-play .dv-fout + .dv-fout { animation-delay: calc(var(--d) + .9s); }
}
@keyframes dv-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dv-node { from { background: var(--paper); border-color: var(--line); } to { background: var(--accent); border-color: var(--accent); } }
@keyframes dv-in { from { opacity: .35; } to { opacity: 1; } }
@keyframes dv-pop { from { opacity: 0; translate: 0 .25rem; } to { opacity: 1; translate: 0 0; } }
@keyframes dv-strike { from { text-decoration-color: transparent; } to { text-decoration-color: var(--accent-ink); } }
@keyframes dv-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dv-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

@media (max-width: 61.25rem) {
  .page-blocks .dv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.75rem; }
  .page-blocks .dv-flow::before, .page-blocks .dv-flow::after { display: none; }
}
/* 手機：一欄、不畫菱形節點；示意卡縮小（膠囊單行，範圍外排第一個、超出的淡出；掃描只留第一列與進度條）；編號與標題同一行。 */
@media (max-width: 32.5rem) {
  .page-blocks .dv-flow { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; padding-top: 0; }
  .page-blocks .dv-fstep::before { display: none; }
  .page-blocks .dv-fvis { height: auto; padding: .75rem; gap: .5rem; }
  .page-blocks .dv-fchips { flex-wrap: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, black 82%, transparent); mask-image: linear-gradient(90deg, black 82%, transparent); }
  .page-blocks .dv-fchip.is-out { order: -1; }
  .page-blocks .dv-fbar ~ .dv-frow { display: none; }
  .page-blocks .dv-fstep { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; align-items: baseline; }
  .page-blocks .dv-fstep > :is(.dv-fvis, .dv-fbody) { grid-column: 1 / -1; }
  .page-blocks .dv-ftitle { margin: 0 0 .375rem; }
  .page-blocks .dv-fsplit { grid-template-columns: minmax(0, .6fr) 1.25rem minmax(0, 1.4fr); }
  .page-blocks .dv-fout { padding: .25rem .5rem; }
  .page-blocks .dv-fnum, .page-blocks .dv-flow--vis .dv-fnum { margin: .75rem 0 .375rem; font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { .page-blocks :is(.dv-fstep::before, .dv-ftitle) { transition: none; } }
html[data-motion="off"] .page-blocks :is(.dv-fstep::before, .dv-ftitle) { transition: none; }