/* issue 373 場景 checkmarx-engines：深色面板，左程式碼、中引擎、右單一風險視圖；寬螢幕三欄加箭頭，窄螢幕上下堆疊（箭頭改直線）。
   沒有 JS：引擎全亮、發現已排序。有 JS（is-live）：引擎暗、發現隱藏，由 JS 依序點亮；減少動態或 data-motion=off 時 JS 直接給最終狀態，這裡也關掉過渡。 */
.page-blocks .cxe { padding: clamp(1.25rem, 2.4vw, 2rem); border: 1px solid var(--on-dark-line); border-radius: 1.5rem; background: var(--deeper); color: var(--paper); }
.page-blocks .cxe-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.page-blocks .cxe-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0; font-size: 1.0625rem; font-weight: 800; }
.page-blocks .cxe-tag { padding: .0625rem .625rem; border: 1px solid var(--on-dark-line); border-radius: 999px; color: var(--muted-on-dark); font-size: .75rem; font-weight: 700; }
.page-blocks .cxe-replay { padding: .3125rem .875rem; border: 1.5px solid var(--on-dark-line); border-radius: 999px; background: transparent; color: var(--paper); font: inherit; font-size: .8125rem; font-weight: 800; cursor: pointer; }
.page-blocks .cxe-replay:hover { border-color: var(--accent-dark); }
.page-blocks .cxe-replay:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.page-blocks .cxe-grid { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 62rem) { .page-blocks .cxe-grid { grid-template-columns: minmax(0, .95fr) 2.25rem minmax(0, .75fr) 2.25rem minmax(0, 1.3fr); gap: 1.125rem; } }
.page-blocks .cxe-box { min-width: 0; padding: .875rem 1rem; border: 1px solid var(--on-dark-line); border-radius: 1rem; background: color-mix(in srgb, var(--paper) 4%, var(--deeper)); }
.page-blocks .cxe-h { margin: 0 0 .625rem; color: var(--accent-dark); font-size: .75rem; font-weight: 800; letter-spacing: .14em; }
.page-blocks .cxe-code { margin: 0; color: var(--muted-on-dark); font-size: .78125rem; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.page-blocks .cxe-code mark { padding: 0; border-radius: .1875rem; box-shadow: 0 0 0 .125rem color-mix(in srgb, var(--accent) 22%, transparent); background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--paper); }
.page-blocks .cxe-arrow { position: relative; display: block; height: 1.75rem; }
.page-blocks .cxe-arrow::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent, var(--accent-dark), transparent); background-size: 100% 200%; animation: cxe-v 1.4s linear infinite; }
@media (min-width: 62rem) { .page-blocks .cxe-arrow { height: 2px; } .page-blocks .cxe-arrow::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 2px; margin: 0; background: linear-gradient(90deg, transparent, var(--accent-dark), transparent); background-size: 200% 100%; animation-name: cxe-h; } }
@keyframes cxe-v { to { background-position: 0 -200%; } }
@keyframes cxe-h { to { background-position: -200% 0; } }
.page-blocks .cxe-engines { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.page-blocks .cxe-eng { display: flex; align-items: center; gap: .625rem; padding: .5625rem .75rem; border: 1.5px solid var(--accent-dark); border-radius: .75rem; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--paper); font-size: .875rem; font-weight: 800; transition: border-color .35s, color .35s, background .35s, box-shadow .35s; }
.page-blocks .cxe-eng small { margin-left: auto; color: var(--accent-dark); font-size: .6875rem; font-weight: 700; transition: opacity .35s; }
.page-blocks .cxe-d { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent-dark); transition: background .35s; }
.page-blocks .cxe.is-live .cxe-eng:not(.is-on) { border-color: var(--on-dark-line); background: transparent; color: var(--muted-on-dark); }
.page-blocks .cxe.is-live .cxe-eng:not(.is-on) small { opacity: 0; }
.page-blocks .cxe.is-live .cxe-eng:not(.is-on) .cxe-d { background: var(--on-dark-line); }
.page-blocks .cxe.is-live .cxe-eng.is-on { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.page-blocks .cxe-risk { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.page-blocks .cxe-rk { display: grid; grid-template-columns: 1.875rem minmax(0, 1fr) auto; gap: .625rem; align-items: center; padding: .5625rem .625rem; border: 1px solid var(--on-dark-line); border-radius: .625rem; background: color-mix(in srgb, var(--paper) 3%, var(--deeper)); font-size: .84375rem; transition: opacity .4s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.page-blocks .cxe.is-live .cxe-rk:not(.is-in) { opacity: 0; transform: translateY(.5rem); }
.page-blocks .cxe-no { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .5rem; background: var(--on-dark-line); font-size: .75rem; font-weight: 900; }
.page-blocks .cxe:not(.is-live) .cxe-rk:first-child .cxe-no, .page-blocks .cxe-rk.is-top .cxe-no { background: var(--accent-dark); color: var(--accent-on); }
.page-blocks .cxe-t { min-width: 0; }
.page-blocks .cxe-t small { display: block; color: var(--muted-on-dark); font-size: .71875rem; }
.page-blocks .cxe-src { padding: .0625rem .5rem; border: 1px solid color-mix(in srgb, var(--accent-dark) 55%, transparent); border-radius: 999px; color: var(--accent-dark); font-size: .6875rem; font-weight: 800; white-space: nowrap; }
.page-blocks .cxe-foot { margin: .875rem 0 0; color: var(--muted-on-dark); font-size: .78125rem; }
@media (prefers-reduced-motion: reduce) { .page-blocks .cxe-arrow::before { animation: none; } .page-blocks .cxe-eng, .page-blocks .cxe-eng small, .page-blocks .cxe-d, .page-blocks .cxe-rk { transition: none; } }
html[data-motion="off"] .page-blocks .cxe-arrow::before { animation: none; }
html[data-motion="off"] .page-blocks :is(.cxe-eng, .cxe-eng small, .cxe-d, .cxe-rk) { transition: none; }