/* issue 334 場景 solution-ransom-path：加密勒索攻擊鏈的通行證路徑。只讀官網 token：三階段色 --cloudforce-blue／--arch-orange／--arch-coral，
   放行 --arch-teal。可讀性：圖上文字是 HTML、桌機 13–14px、手機 12px 以上；非目前列不淡化（外框與底色區分），被擋項目＝✕ 圖示＋正常字。
   data-s：all＝三列結果全顯示（沒有 JS／減少動態）；0–2＝目前列，已經過的列保留結果，之後的列為中性。step-player：.is-armed／.is-auto／.is-run，列表 .is-on。 */
.page-blocks .pp-scene--solution-ransom-path { --rp-panel: color-mix(in srgb, var(--paper) 4%, var(--deeper)); --rp-line: var(--on-dark-line); --rp-fg: var(--paper); --rp-mute: var(--muted-on-dark);
  --rp-ok: var(--arch-teal); --rp-hot: var(--arch-coral); --rp-no-fg: color-mix(in srgb, var(--arch-coral) 45%, var(--paper)); }
.page-blocks .rp-c1 { --rp-c: var(--cloudforce-blue); } .page-blocks .rp-c2 { --rp-c: var(--arch-orange); } .page-blocks .rp-c3 { --rp-c: var(--arch-coral); }
.page-blocks .rp { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "list"; row-gap: clamp(1.5rem, 3vw, 2rem); color: var(--rp-fg); }
.page-blocks .rp-head { grid-area: head; } .page-blocks .rp-head .pp-head { margin-bottom: 0; }
.page-blocks .rp-steps { grid-area: list; } .page-blocks .rp-fig { grid-area: fig; }
@media (min-width: 62rem) {
  .page-blocks .rp { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head fig" "list fig"; column-gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center; }
  .page-blocks .rp-head { align-self: end; } .page-blocks .rp-steps { align-self: start; }
}

/* 左：三階段 */
.page-blocks .rp-steps { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.page-blocks .rp-step { position: relative; padding: .875rem 1rem 1rem; border: 1px solid transparent; border-left: 3px solid transparent; border-radius: var(--radius-s) var(--radius-l) var(--radius-l) var(--radius-s); transition: background var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease); }
.page-blocks .rp-title { margin: 0; }
.page-blocks .rp-title button { all: unset; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; width: 100%; color: var(--rp-fg); font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 800; line-height: 1.3; cursor: pointer; border-radius: var(--radius-m); }
.page-blocks .rp-title button:focus-visible { outline: 3px solid var(--rp-c); outline-offset: 4px; }
.page-blocks .rp-n { color: var(--rp-c); font-size: clamp(1.5rem, 2.2vw, 1.75rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.page-blocks .rp-tag { padding: .0625rem .5625rem; border: 1px solid var(--rp-line); border-radius: var(--r-pill); color: var(--rp-c); font-size: .8125rem; font-weight: 800; }
.page-blocks .rp-step p { margin: .375rem 0 0 calc(clamp(1.5rem, 2.2vw, 1.75rem) * 1.5 + .75rem); color: var(--rp-mute); font-size: clamp(.875rem, 1.05vw, 1rem); line-height: 1.8; }
.page-blocks .rp-timer { position: absolute; left: 1rem; right: 1rem; bottom: .375rem; height: 2px; border-radius: 2px; background: var(--rp-c); opacity: 0; transform: scaleX(0); transform-origin: left; }
.page-blocks .rp-step:hover { border-color: var(--rp-line); }
.page-blocks .rp-step.is-on { border-color: color-mix(in srgb, var(--rp-c) 45%, transparent); border-left-color: var(--rp-c); background: color-mix(in srgb, var(--rp-c) 10%, transparent); }
/* 有 JS 輪播（含點選後）：只展開目前階段的說明；標題不淡化。 */
.page-blocks .rp.is-armed .rp-step:not(.is-on) p { display: none; }

/* 右：三列路徑面板 */
.page-blocks .rp-fig { container-type: inline-size; display: grid; margin: 0; }
.page-blocks .rp-row { position: relative; border: 1.5px solid var(--rp-line); border-radius: var(--radius-l); background: var(--rp-panel); transition: border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease); }
.page-blocks .rp-rh { position: absolute; z-index: 2; left: .875rem; top: .625rem; display: flex; gap: .5rem; align-items: baseline; color: var(--rp-mute); font-size: .8125rem; font-weight: 800; }
.page-blocks .rp-rh b { color: var(--rp-c); letter-spacing: .08em; }
.page-blocks .rp-fig:is([data-s="0"]) .rp-r1, .page-blocks .rp-fig:is([data-s="1"]) .rp-r2, .page-blocks .rp-fig:is([data-s="2"]) .rp-r3 { border-color: var(--rp-c); background: color-mix(in srgb, var(--rp-c) 9%, var(--rp-panel)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rp-c) 40%, transparent); }
.page-blocks .rp-fig:is([data-s="0"]) .rp-r1 .rp-rh, .page-blocks .rp-fig:is([data-s="1"]) .rp-r2 .rp-rh, .page-blocks .rp-fig:is([data-s="2"]) .rp-r3 .rp-rh { color: var(--rp-fg); }
.page-blocks .rp-join { height: 1.75rem; margin: 0 0 0 15%; padding: .25rem 0 0 .625rem; border-left: 2px dashed color-mix(in srgb, var(--rp-hot) 70%, transparent); color: var(--rp-no-fg); font-size: .8125rem; font-weight: 700; }
.page-blocks .rp-stage { position: relative; aspect-ratio: 560 / 170; }
.page-blocks .rp-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.page-blocks .rp-lnk { stroke: var(--rp-line); stroke-width: 2; transition: stroke .5s var(--ease); }
.page-blocks .rp-lnk--no { stroke-dasharray: 5 6; }
.page-blocks .rp-nd { fill: var(--deeper); stroke: var(--rp-mute); stroke-width: 2; }
.page-blocks .rp-gt { fill: var(--deeper); stroke: var(--rp-c); stroke-width: 2.5; }
.page-blocks .rp-xs { opacity: 0; transition: opacity .4s var(--ease); }
.page-blocks .rp-xs circle { fill: var(--deeper); stroke: var(--rp-hot); stroke-width: 2; }
.page-blocks .rp-xs path { stroke: var(--rp-hot); stroke-width: 2.2; stroke-linecap: round; }
.page-blocks .rp-ring { fill: none; stroke: var(--rp-c); stroke-width: 2; stroke-dasharray: 6 6; opacity: 0; transition: opacity .5s var(--ease); }
.page-blocks .rp-pulse { fill: none; stroke: var(--rp-hot); stroke-width: 2; opacity: 0; }
.page-blocks .rp-atk { fill: var(--rp-hot); opacity: 0; transition: opacity .4s var(--ease); }
.page-blocks :is(.rp-gate, .rp-from, .rp-say, .rp-out, .rp-time) { position: absolute; z-index: 1; white-space: nowrap; }
.page-blocks :is(.rp-from, .rp-say) { translate: -50% 0; text-align: center; }
.page-blocks .rp-from { color: var(--rp-fg); font-size: .875rem; font-weight: 700; }
.page-blocks .rp-say { color: var(--rp-mute); font-size: .8125rem; font-weight: 600; }
.page-blocks .rp-gate { translate: -50% -50%; padding: .1875rem .6875rem; border: 1.5px solid var(--rp-c); border-radius: var(--r-pill); background: var(--rp-panel); color: var(--rp-c); font-size: .84375rem; font-weight: 800; }
.page-blocks .rp-out { translate: 0 -50%; display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border: 1.5px solid var(--rp-line); border-radius: var(--radius-m); background: var(--rp-panel); color: var(--rp-fg); font-size: .84375rem; font-weight: 800; transition: border-color .4s var(--ease), color .4s var(--ease); }
.page-blocks .rp-x::before { content: "✕"; }
.page-blocks .rp-x { display: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--rp-hot); color: var(--deeper); font-size: .6875rem; font-style: normal; font-weight: 900; line-height: 1rem; text-align: center; }
.page-blocks .rp-time { display: grid; gap: .25rem; width: 28%; color: var(--rp-mute); font-size: .8125rem; font-weight: 700; }
.page-blocks .rp-time i { display: block; height: .375rem; border-radius: .375rem; background: var(--rp-line); overflow: hidden; }
.page-blocks .rp-time i::after { content: ""; display: block; height: 100%; width: 100%; background: var(--rp-ok); transition: width 1.2s var(--ease); }
/* 位置（百分比對應 SVG 560×170）。 */
.page-blocks .rp-p-g1 { left: 41%; top: 21%; } .page-blocks .rp-p-f1 { left: 14.3%; top: 65%; } .page-blocks .rp-p-s1 { left: 41%; top: 65%; } .page-blocks .rp-p-o1 { left: 67%; top: 30%; } .page-blocks .rp-p-n1 { left: 67%; top: 64%; }
.page-blocks .rp-p-g2 { left: 41%; top: 53%; } .page-blocks .rp-p-s2 { left: 41%; top: 68%; } .page-blocks .rp-p-f2 { left: 16%; top: 80%; } .page-blocks .rp-p-o2 { left: 67%; top: 29%; } .page-blocks .rp-p-n2 { left: 67%; top: 54%; } .page-blocks .rp-p-n3 { left: 67%; top: 79%; }
.page-blocks .rp-p-g3 { left: 41%; top: 26%; } .page-blocks .rp-p-f3 { left: 16%; top: 78%; } .page-blocks .rp-p-s3 { left: 41%; top: 78%; } .page-blocks .rp-p-o3 { left: 62%; top: 40%; } .page-blocks .rp-p-t3 { left: 62%; top: 62%; }
/* 結果：目前或已經過的列（all＝全部）。被擋＝✕ 圖示＋警示色正常字，不用刪除線。 */
.page-blocks .rp-fig:is([data-s="all"], [data-s="0"], [data-s="1"], [data-s="2"]) .rp-r1 .rp-xs, .page-blocks .rp-fig:is([data-s="all"], [data-s="1"], [data-s="2"]) .rp-r2 .rp-xs { opacity: 1; }
.page-blocks .rp-fig:is([data-s="all"], [data-s="0"], [data-s="1"], [data-s="2"]) .rp-r1 .rp-lnk--ok, .page-blocks .rp-fig:is([data-s="all"], [data-s="1"], [data-s="2"]) .rp-r2 .rp-lnk--ok, .page-blocks .rp-fig:is([data-s="all"], [data-s="2"]) .rp-r3 .rp-lnk--ok { stroke: var(--rp-ok); }
.page-blocks .rp-fig:is([data-s="all"], [data-s="0"], [data-s="1"], [data-s="2"]) .rp-r1 .rp-ok, .page-blocks .rp-fig:is([data-s="all"], [data-s="1"], [data-s="2"]) .rp-r2 .rp-ok, .page-blocks .rp-fig:is([data-s="all"], [data-s="2"]) .rp-r3 .rp-ok { border-color: var(--rp-ok); }
.page-blocks .rp-fig:is([data-s="all"], [data-s="0"], [data-s="1"], [data-s="2"]) .rp-r1 .rp-no, .page-blocks .rp-fig:is([data-s="all"], [data-s="1"], [data-s="2"]) .rp-r2 .rp-no { border-color: color-mix(in srgb, var(--rp-hot) 70%, transparent); color: var(--rp-no-fg); }
.page-blocks .rp-fig:is([data-s="all"], [data-s="0"], [data-s="1"], [data-s="2"]) .rp-r1 .rp-x, .page-blocks .rp-fig:is([data-s="all"], [data-s="1"], [data-s="2"]) .rp-r2 .rp-x { display: inline-block; }
.page-blocks .rp-fig:is([data-s="all"], [data-s="1"], [data-s="2"]) .rp-r2 .rp-ring, .page-blocks .rp-fig:is([data-s="all"], [data-s="2"]) .rp-r3 .rp-ring { opacity: 1; }
.page-blocks .rp-fig[data-s="0"] .rp-r1 .rp-atk, .page-blocks .rp-fig[data-s="1"] .rp-r2 .rp-atk, .page-blocks .rp-fig:is([data-s="2"], [data-s="all"]) .rp-r3 .rp-atk { opacity: 1; }
.page-blocks .rp-fig:is([data-s="2"], [data-s="all"]) .rp-time i::after { width: 28%; }
/* 進入一列時，結果依序出現。 */
.page-blocks .rp-fig[data-s="0"] .rp-r1 :is(.rp-xs, .rp-out) { transition-delay: 1s; }
.page-blocks .rp-fig[data-s="1"] .rp-r2 :is(.rp-xs, .rp-out) { transition-delay: 1.1s; }
.page-blocks .rp-fig[data-s="1"] .rp-r2 .rp-ring { transition-delay: 1.8s; }
.page-blocks .rp-fig[data-s="2"] .rp-r3 :is(.rp-lnk--ok, .rp-out), .page-blocks .rp-fig[data-s="2"] .rp-r3 .rp-time i::after { transition-delay: 1.2s; }
.page-blocks .rp-fig[data-s="2"] .rp-r3 .rp-ring { transition-delay: 1.8s; }

@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="off"]) .page-blocks .rp.is-auto.is-run .rp-step.is-on .rp-timer { opacity: .8; animation: rp-timer 3.8s linear forwards; }
  html.js:not([data-motion="off"]) .page-blocks .rp-fig[data-s="2"] .rp-r3 .rp-pulse { animation: rp-pulse 1.4s var(--ease) infinite; }
}
@keyframes rp-timer { to { transform: scaleX(1); } }
@keyframes rp-pulse { from { opacity: .9; r: 26; } to { opacity: 0; r: 46; } }
@media (prefers-reduced-motion: reduce) { .page-blocks .rp :is(.rp-step, .rp-row, .rp-lnk, .rp-xs, .rp-ring, .rp-atk, .rp-out), .page-blocks .rp .rp-time i::after { transition: none; } }
html[data-motion="off"] .page-blocks .rp :is(.rp-step, .rp-row, .rp-lnk, .rp-xs, .rp-ring, .rp-atk, .rp-out), html[data-motion="off"] .page-blocks .rp .rp-time i::after { transition: none; }

/* 窄：不縮小整張圖；每列改成撐滿寬度的文字流程（起點 → 控制點、說明、結果），連線圖形收起，字級 13px。 */
@container (max-width: 32.5rem) {
  .page-blocks .rp-stage { aspect-ratio: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .375rem; padding: 2.625rem .875rem .875rem; }
  .page-blocks .rp-stage svg { display: none; }
  .page-blocks .rp-stage :is(.rp-gate, .rp-from, .rp-say, .rp-out, .rp-time) { position: static; translate: none; }
  .page-blocks .rp-from { order: 1; font-size: .875rem; }
  .page-blocks .rp-gate { order: 2; font-size: .8125rem; }
  .page-blocks .rp-gate::before { content: "→ "; color: var(--rp-mute); }
  .page-blocks .rp-say { order: 3; flex: 0 0 100%; white-space: normal; text-align: left; }
  .page-blocks .rp-out { order: 4; font-size: .8125rem; }
  .page-blocks .rp-time { order: 5; width: 100%; }
}