/* 2026-10-05 場景 acronis-incident：左欄四個步驟、右欄事件主控台（窄螢幕主控台在上）。主控台五格：可疑活動、事件、攻擊鏈（整列）、遏制、還原。
   有 JS（.is-live）時，標 data-at 的元素在對應步驟才點亮（.on）：可疑活動標「已中止」、攻擊鏈依序亮起並以 → 串接、遏制打 ✓、還原列出做法與條件。
   不只靠顏色：未點亮＝虛線框＋弱字，點亮＝實線＋強調色＋符號。沒有 JS：全部是點亮狀態。 */
.page-blocks .ai { --ai-panel: color-mix(in srgb, var(--paper) 5%, var(--deeper)); --ai-dim: color-mix(in srgb, var(--muted-on-dark) 80%, var(--deeper));
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(2rem, 5vw, 3.5rem); color: var(--paper); }
.page-blocks .ai :is(.ai-btn, .ai-say, .ai-replay)[hidden] { display: none; }
.page-blocks .ai-steps { display: grid; margin: 0; padding: 0; list-style: none; border-block: 1px solid var(--on-dark-line); }
.page-blocks .ai-step { padding: 1.25rem 0; border-bottom: 1px solid var(--on-dark-line); }
.page-blocks .ai-step:last-child { border-bottom: 0; }
.page-blocks .ai-step-h { display: flex; gap: .75rem; margin: 0 0 .5rem; color: var(--paper); font-size: clamp(1.25rem, 2vw, 1.5rem); }
.page-blocks :is(.ai-step-h, .ai-btn) b { color: var(--accent); font-family: "Inter Tight", var(--font-body); }
.page-blocks .ai-step p { margin: 0; color: var(--muted-on-dark); }
.page-blocks .ai.is-live .ai-step-h { display: none; }
.page-blocks .ai-btn { display: flex; width: 100%; gap: .75rem; align-items: baseline; min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--paper); font: inherit; font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 800; text-align: left; cursor: pointer; }
.page-blocks .ai-btn:hover span { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--accent); }
.page-blocks .ai-btn[aria-disabled="true"] { color: var(--ai-dim); cursor: default; }
.page-blocks .ai-btn[aria-disabled="true"]:hover span { text-decoration: none; }
.page-blocks :is(.ai-btn, .ai-replay):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.page-blocks .ai.is-live .ai-step p { display: none; margin-top: .5rem; }
.page-blocks .ai.is-live .ai-step.on p { display: block; }
.page-blocks .ai.is-live .ai-step.on .ai-btn span { color: var(--accent); }
.page-blocks .ai.is-live .ai-step.done .ai-btn b::after { content: " ✓"; }
.page-blocks .ai.is-live .ai-step.on:not(.done) .ai-btn::after { content: attr(data-cue); align-self: center; margin-left: auto; padding: .25rem .75rem; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-on); font-size: .8125rem; font-weight: 700; }
.page-blocks .ai-say { margin: 1.25rem 0 0; padding: .875rem 1.125rem; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--paper); }
.page-blocks .ai-say:empty { display: none; }
.page-blocks .ai-replay { margin-top: 1.25rem; min-height: 2.75rem; padding: 0 1.25rem; border: 1px solid var(--on-dark-line); border-radius: var(--r-pill); background: none; color: var(--muted-on-dark); font: inherit; cursor: pointer; }
.page-blocks .ai-replay:hover { border-color: var(--accent); color: var(--paper); }
/* 主控台 */
.page-blocks .ai-con { border: 1px solid var(--on-dark-line); border-radius: var(--r-card); background: var(--ai-panel); overflow: hidden; align-self: start; }
.page-blocks .ai-top { display: flex; align-items: center; gap: .375rem; padding: .75rem 1rem; border-bottom: 1px solid var(--on-dark-line); font-size: .8125rem; }
.page-blocks .ai-top > span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--on-dark-line); }
.page-blocks .ai-top b { margin-left: .5rem; }
.page-blocks .ai-host { margin-left: auto; padding: .125rem .625rem; border: 1px solid var(--on-dark-line); border-radius: var(--r-pill); color: var(--muted-on-dark); font-style: normal; }
.page-blocks .ai-host--iso { margin-left: .375rem; border-color: var(--accent); background: var(--accent); color: var(--accent-on); font-weight: 800; }
.page-blocks .ai.is-live .ai-host--iso:not(.on) { display: none; }
.page-blocks .ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding: 1rem; }
.page-blocks .ai-box { min-width: 0; padding: .875rem 1rem; border: 1px solid var(--on-dark-line); border-radius: var(--radius-m); background: color-mix(in srgb, var(--accent-on) 45%, transparent); }
.page-blocks .ai-chain { grid-column: 1 / -1; }
.page-blocks .ai-lab { margin: 0 0 .625rem; color: var(--muted-on-dark); font-family: "Inter Tight", var(--font-body); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.page-blocks .ai-box ul, .page-blocks .ai-box ol { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.page-blocks .ai-feed li { display: flex; justify-content: space-between; gap: .75rem; font-size: .875rem; }
.page-blocks .ai-feed i { color: var(--accent); font-size: .8125rem; font-style: normal; font-weight: 800; white-space: nowrap; }
.page-blocks .ai-event dl { display: grid; gap: .625rem; margin: 0; }
.page-blocks .ai-event dl div { display: grid; gap: .25rem; }
.page-blocks .ai-event dt { color: var(--muted-on-dark); font-size: .8125rem; }
.page-blocks .ai-event dd { margin: 0; font-size: .9375rem; font-weight: 700; }
.page-blocks .ai-meter { display: block; height: .5rem; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent) 0 78%, var(--on-dark-line) 78%); }
.page-blocks .ai-chain ol { grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); gap: .5rem; }
.page-blocks .ai-chain li { position: relative; padding: .625rem .75rem; border: 1px solid var(--accent); border-radius: var(--radius-s); background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: .875rem; font-weight: 800; text-align: center; }
.page-blocks .ai-chain li:not(:last-child)::after { content: "→" / ""; position: absolute; right: -.5rem; top: 50%; z-index: 1; translate: 50% -50%; color: var(--accent); font-weight: 800; }
.page-blocks .ai-contain li { font-size: .875rem; }
.page-blocks .ai-contain li::before { content: "✓ " / ""; color: var(--accent); font-weight: 800; }
.page-blocks .ai-restore li { display: grid; gap: .125rem; font-size: .875rem; }
.page-blocks .ai-restore span { color: var(--muted-on-dark); font-size: .8125rem; }
/* 有 JS：未到的元素是虛線框＋弱字 */
.page-blocks .ai.is-live [data-at] { transition: opacity .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease); }
.page-blocks .ai.is-live :is(.ai-feed li, .ai-contain li, .ai-restore li):not(.on) { color: var(--muted-on-dark); }
.page-blocks .ai.is-live .ai-event:not(.on) { border-style: dashed; }
.page-blocks .ai.is-live .ai-event:not(.on) dd { color: var(--muted-on-dark); font-weight: 500; }
.page-blocks .ai.is-live .ai-restore li:not(.on) b { font-weight: 500; }
.page-blocks .ai.is-live .ai-chain li:not(.on) { border-style: dashed; border-color: var(--on-dark-line); background: none; color: var(--muted-on-dark); font-weight: 500; }
.page-blocks .ai.is-live .ai-feed li:not(.on) i, .page-blocks .ai.is-live .ai-contain li:not(.on)::before { visibility: hidden; }
.page-blocks .ai.is-live .ai-event:not(.on) .ai-meter { background: var(--on-dark-line); }
@media (max-width: 61.99rem) { .page-blocks .ai { grid-template-columns: minmax(0, 1fr); } .page-blocks .ai.is-live .ai-con { order: -1; } }
@media (max-width: 30rem) {
  .page-blocks .ai-grid { grid-template-columns: minmax(0, 1fr); }
  .page-blocks .ai-chain ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-blocks .ai-chain li:nth-child(2n)::after { display: none; }
}
@media (prefers-reduced-motion: no-preference) { html:not([data-motion="off"]) .page-blocks .ai.is-live .ai-step.on:not(.done) .ai-btn::after { animation: ai-ping 1.8s var(--ease) infinite; } }
@keyframes ai-ping { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 .5rem transparent; } }
@media (prefers-reduced-motion: reduce) { html .page-blocks .ai [data-at] { transition: none; } }
html[data-motion="off"] .page-blocks .ai [data-at] { transition: none; }

/* 段落換行更平均，窄螢幕不留一兩個字的短尾行。 */
.page-blocks [data-scene] p { text-wrap: pretty; }