/* issue 431：場景 red-supply-ways——兩張深色編號卡，底部各一個小動畫。色碼只在 design-tokens.css（--rs-*）。
   沒有 JS（沒有 .is-armed）、減少動態或暫停動態：壞套件直接紅框、掃描線不顯示、防火牆停住。 */
.pp-scene--red-supply-ways .rw-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.pp-scene--red-supply-ways .rw-way { container-type: inline-size; position: relative; display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.75rem, 3.2vw, 2.75rem); overflow: hidden; border: 1px solid var(--rs-line); border-radius: 1.75rem; background: var(--rs-card); color: var(--rs-muted); transition: border-color .3s, translate .3s; }
.pp-scene--red-supply-ways .rw-way:hover { translate: 0 -4px; border-color: var(--rs-line-hi); }
.pp-scene--red-supply-ways .rw-way:nth-child(1):hover { border-color: rgb(var(--rs-red-rgb) / .6); }
.pp-scene--red-supply-ways .rw-way:nth-child(2):hover { border-color: rgb(var(--rs-blue-rgb) / .6); }
.pp-scene--red-supply-ways .rw-head { display: flex; align-items: center; gap: 1rem; }
.pp-scene--red-supply-ways .rw-badge { flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: .9rem; color: var(--paper); font: 800 1.6rem ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; }
.pp-scene--red-supply-ways .rw-icon { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pp-scene--red-supply-ways .rw-badge--1 { background: var(--accent-ink); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--accent-ink) 70%, transparent); }
.pp-scene--red-supply-ways .rw-badge--2 { background: var(--rs-blue-fill); box-shadow: 0 8px 24px -8px rgb(var(--rs-blue-rgb) / .6); }
.pp-scene--red-supply-ways .rw-title { margin: 0; color: var(--paper); font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 900; line-height: 1.25; letter-spacing: 0; text-wrap: balance; }
.pp-scene--red-supply-ways .rw-title code { padding: 0; background: none; color: inherit; font: 700 .9em ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; overflow-wrap: anywhere; }
.pp-scene--red-supply-ways .rw-sub { margin: .25rem 0 0; font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 800; }
.pp-scene--red-supply-ways .rw-way:nth-child(1) .rw-sub { color: var(--accent-dark); }
.pp-scene--red-supply-ways .rw-way:nth-child(2) .rw-sub { color: var(--rs-blue); }
.pp-scene--red-supply-ways .rw-body { margin: 0; color: var(--rs-muted); font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.75; }
.pp-scene--red-supply-ways .rw-body strong { color: var(--paper); font-weight: 800; }
/* 底部小動畫容器 */
.pp-scene--red-supply-ways .rw-gate, .pp-scene--red-supply-ways .rw-scan { position: relative; margin-top: auto; border: 1px solid var(--rs-line); border-radius: .9rem; background: var(--rs-well); overflow: hidden; }
.pp-scene--red-supply-ways .rw-gate { height: 4.75rem; }
.pp-scene--red-supply-ways .rw-gate::before { content: ""; position: absolute; inset: 50% .75rem auto; height: 1px; background: var(--rs-line); }
.pp-scene--red-supply-ways .rw-lane { display: contents; }
.pp-scene--red-supply-ways .rw-pkg, .pp-scene--red-supply-ways .rw-tag { padding: .35rem .6rem; border-radius: .5rem; background: var(--rs-pkg-bg); color: var(--rs-pkg-ink); font: 600 .78rem / 1 ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; white-space: nowrap; }
.pp-scene--red-supply-ways .rw-pkg { position: absolute; left: 0; translate: -120% 0; animation: rw-pass 7.5s linear infinite; animation-delay: calc(var(--d, 0) * -2.5s); }
.pp-scene--red-supply-ways .rw-lane:nth-child(1) .rw-pkg { top: .55rem; }
.pp-scene--red-supply-ways .rw-lane:nth-child(1) .rw-pkg:nth-child(1) { --d: 0; } .pp-scene--red-supply-ways .rw-lane:nth-child(1) .rw-pkg:nth-child(2) { --d: 1; } .pp-scene--red-supply-ways .rw-lane:nth-child(1) .rw-pkg:nth-child(3) { --d: 2; }
.pp-scene--red-supply-ways .rw-lane:nth-child(2) .rw-pkg { bottom: .55rem; animation-name: rw-stop; animation-delay: calc(var(--d, 0) * -3.75s); }
.pp-scene--red-supply-ways .rw-lane:nth-child(2) .rw-pkg:nth-child(2) { --d: 1; }
.pp-scene--red-supply-ways .rw-pkg--bad { background: rgb(var(--rs-red-rgb) / .18); color: var(--rs-red-soft); }
.pp-scene--red-supply-ways .rw-pkg--warn { background: rgb(var(--rs-warn-rgb) / .14); color: var(--rs-warn); }
.pp-scene--red-supply-ways .rw-wall { position: absolute; left: 60%; top: 50%; bottom: .4rem; width: .3rem; border-radius: 9px; background: var(--rs-red); box-shadow: 0 0 14px rgb(var(--rs-red-rgb) / .45); }
@keyframes rw-pass { from { left: 0; translate: -120% 0; } to { left: 100%; translate: 20% 0; } }
@keyframes rw-stop { 0% { left: 0; translate: -120% 0; opacity: 1; } 45% { left: 60%; translate: -112% 0; opacity: 1; } 50% { translate: -122% 0; } 55%, 85% { left: 60%; translate: -112% 0; opacity: 1; } 100% { left: 60%; translate: -112% 0; opacity: 0; } }
/* 掃描：格狀等寬欄；壞套件預設紅框（沒有 JS 的最終畫面），JS 啟用後（.is-armed）先看起來正常，掃描線經過才標紅並閃一下 */
.pp-scene--red-supply-ways .rw-scan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: .45rem; min-height: 4.75rem; padding: .7rem .75rem; }
.pp-scene--red-supply-ways .rw-tag { min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 0 0 1px transparent; transition: background .25s, color .25s, box-shadow .25s; }
.pp-scene--red-supply-ways .rw-tag.is-bad { background: rgb(var(--rs-red-rgb) / .18); color: var(--rs-red-soft); box-shadow: inset 0 0 0 1px rgb(var(--rs-red-rgb) / .6); }
.pp-scene--red-supply-ways .rw-scan.is-armed .rw-tag.is-bad:not(.is-hit) { background: var(--rs-pkg-bg); color: var(--rs-pkg-ink); box-shadow: inset 0 0 0 1px transparent; }
.pp-scene--red-supply-ways .rw-tag.is-bad.is-flash { background: rgb(var(--rs-red-rgb) / .36); color: var(--rs-red-pale); box-shadow: inset 0 0 0 1px rgb(var(--rs-red-rgb) / .95), 0 0 18px rgb(var(--rs-red-rgb) / .6); }
.pp-scene--red-supply-ways .rw-scanline { position: absolute; top: 0; bottom: 0; left: 0; display: none; width: 2px; background: var(--rs-blue); box-shadow: 0 0 12px rgb(var(--rs-blue-rgb) / .8); animation: rw-scan 5s linear infinite; }
.pp-scene--red-supply-ways .rw-scan.is-armed .rw-scanline { display: block; }
@keyframes rw-scan { 0% { left: 0; } 70% { left: 100%; opacity: 1; } 71%, 100% { left: 100%; opacity: 0; } }
@container (min-width: 17rem) { .pp-scene--red-supply-ways .rw-scan { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 38rem) { .pp-scene--red-supply-ways .rw-scan { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 52rem) { .pp-scene--red-supply-ways .rw-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pp-scene--red-supply-ways .rw-pkg, .pp-scene--red-supply-ways .rw-scanline { animation: none; } .pp-scene--red-supply-ways .rw-way { transition: none; } .pp-scene--red-supply-ways .rw-way:hover { translate: none; } }
html[data-motion="off"] .pp-scene--red-supply-ways .rw-pkg, html[data-motion="off"] .pp-scene--red-supply-ways .rw-scanline { animation: none; }
html[data-motion="off"] .pp-scene--red-supply-ways .rw-way { transition: none; }