/* issue 193／323 場景 illumio-trace：失陷路徑追蹤。圖前面可放問題卡（淺底），圖本身是深色示範板，只讀官網 token 與 --accent*；
   沒有 JS 時畫靜態連線圖（起點已隔離）與節點名稱；圖有寬、窄兩張，窄版座標轉置。 */

/* ---------- 問題卡 ---------- */
.page-blocks .ilt-qs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .875rem; margin: 0 0 .875rem; padding: 0; list-style: none; }
.page-blocks .ilt-q { position: relative; display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding: 1.375rem 1.375rem 1.25rem; border: 1px solid var(--line); border-radius: 1.125rem; background: var(--paper); }
.page-blocks .ilt-qn { color: var(--accent); font-size: 1.75rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.page-blocks .ilt-q h3 { margin: .25rem 0 0; color: var(--ink); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.35; text-wrap: balance; }
.page-blocks .ilt-q p { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.75; }
.page-blocks .ilt-q.demo { border-color: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--paper)), var(--paper) 70%); }
.page-blocks .ilt-go { display: inline-flex; align-items: center; gap: .375rem; margin-top: auto; padding-top: .375rem; color: var(--accent-ink); font-size: .9375rem; font-weight: 800; text-decoration: none; }
.page-blocks .ilt-go span { display: inline-block; transition: translate .3s var(--ease); }
.page-blocks .ilt-go:hover span { translate: 0 .1875rem; }
.page-blocks .ilt-go:hover { text-decoration: underline; text-underline-offset: .25em; }
.page-blocks .ilt-go:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; border-radius: .25rem; }
/* 示範卡往下接到示範板的連接線（只有四欄並排時） */
.page-blocks .ilt-q.demo::after { content: ""; position: absolute; left: 50%; bottom: -.9375rem; width: 2px; height: .9375rem; background: var(--accent); }
@media (max-width: 63.99rem) { .page-blocks .ilt-qs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-blocks .ilt-q.demo::after { display: none; } }
@media (max-width: 39.99rem) {
  .page-blocks .ilt-qs { grid-template-columns: minmax(0, 1fr); gap: .625rem; }
  .page-blocks .ilt-q { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; row-gap: .25rem; padding: 1rem 1rem .875rem; }
  .page-blocks .ilt-qn { grid-row: span 3; font-size: 1.375rem; }
  .page-blocks .ilt-q h3 { margin: 0; font-size: 1rem; }
  .page-blocks .ilt-q p { font-size: .875rem; line-height: 1.65; }
  .page-blocks .ilt-go { margin-top: 0; }
}

/* ---------- 示範板 ---------- */
.page-blocks .ilt { scroll-margin-top: 5rem; padding: clamp(1rem, 2.5vw, 1.875rem); border: 1px solid var(--on-dark-line); border-radius: var(--r-card); background: var(--deeper); color: var(--muted-on-dark); box-shadow: var(--elevation-card); }
.page-blocks .ilt:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
.page-blocks .ilt-qs + .ilt { border: 2px solid var(--accent); }
.page-blocks .ilt-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .375rem 1rem; }
.page-blocks .ilt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; min-width: 0; }
.page-blocks .ilt-badge { color: var(--accent-dark); font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
.page-blocks .ilt-title { margin: 0; color: var(--paper); font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 800; line-height: 1.4; }
.page-blocks .ilt-title b { margin-right: .25rem; color: var(--accent-dark); }
.page-blocks .ilt-state { margin-left: auto; min-height: 3em; text-align: right; color: var(--paper); font-weight: 700; line-height: 1.5; }
.page-blocks .ilt-state b { color: var(--accent-dark); font-size: 1.25em; font-variant-numeric: tabular-nums; }
html:not(.js) .page-blocks .ilt-steps { display: none; }
.page-blocks .ilt-steps { display: flex; flex-wrap: wrap; gap: .375rem .625rem; margin: .875rem 0 0; padding: 0; list-style: none; }
.page-blocks .ilt-steps li { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .75rem .375rem .375rem; border: 1px solid var(--on-dark-line); border-radius: var(--r-pill); color: var(--muted-on-dark); font-size: .875rem; font-weight: 700; line-height: 1.35; transition: color .3s, border-color .3s; }
.page-blocks .ilt-sno { display: grid; flex: none; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--on-dark-line); font-size: .75rem; line-height: 1; }
.page-blocks .ilt-steps li.is-now { border-color: var(--accent); color: var(--paper); }
.page-blocks .ilt-steps li.is-now .ilt-sno { background: var(--accent); color: var(--accent-on); }

/* ---------- 圖：寬、窄兩張 ---------- */
.page-blocks .ilt-board { margin: 1rem 0 0; }
.page-blocks .ilt-view { position: relative; width: min(100%, 68.75rem); margin-inline: auto; aspect-ratio: 1000 / 300; }
.page-blocks .ilt-view--tall { display: none; width: 100%; max-width: 24rem; aspect-ratio: 400 / 500; }
@media (max-width: 55.99rem) { .page-blocks .ilt-view--wide { display: none; } .page-blocks .ilt-view--tall { display: block; } }
.page-blocks .ilt-view svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; font-family: inherit; }
.page-blocks .ilt-e { stroke: var(--on-dark-line); stroke-width: 2px; vector-effect: non-scaling-stroke; transition: stroke .3s; }
.page-blocks .ilt-e.hot { stroke: var(--accent-dark); stroke-width: 3px; }
.page-blocks .ilt-e.cut { stroke: var(--muted-on-dark); stroke-dasharray: 4 6; opacity: .5; }
.page-blocks .ilt-hit { fill: transparent; }
html.js .page-blocks .ilt-hit { cursor: pointer; }
.page-blocks .ilt-dot { fill: var(--deeper); stroke: var(--muted-on-dark); stroke-width: 2.5; transition: fill .3s, stroke .3s; }
.page-blocks .ilt-halo, .page-blocks .ilt-isor { fill: none; opacity: 0; transition: opacity .3s; }
.page-blocks .ilt-halo { fill: color-mix(in srgb, var(--accent) 28%, transparent); }
.page-blocks .ilt-isor { stroke: var(--paper); stroke-width: 2; stroke-dasharray: 4 5; }
.page-blocks .ilt-nm { fill: var(--muted-on-dark); font-size: 14px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: var(--deeper); stroke-width: 5px; stroke-linejoin: round; transition: fill .3s; }
.page-blocks .ilt-view--tall .ilt-nm { font-size: 19px; }
.page-blocks .ilt-hop rect { fill: var(--accent); }
.page-blocks .ilt-hop-t { fill: var(--accent-on); font-size: 12px; font-weight: 800; text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.page-blocks .ilt-view--tall .ilt-hop-t { font-size: 13px; }
.page-blocks .ilt-hop { opacity: 0; transition: opacity .3s; }
.page-blocks .ilt-sn.reach .ilt-dot { fill: color-mix(in srgb, var(--accent) 35%, var(--deeper)); stroke: var(--accent); }
.page-blocks .ilt-sn.reach .ilt-nm { fill: var(--paper); }
.page-blocks .ilt-sn.reach .ilt-hop { opacity: 1; }
.page-blocks .ilt-sn.src .ilt-dot { fill: var(--accent); stroke: var(--accent); }
.page-blocks .ilt-sn.src .ilt-halo { opacity: 1; }
.page-blocks .ilt-sn.src .ilt-nm { fill: var(--accent-dark); }
.page-blocks .ilt-sn.iso .ilt-isor { opacity: 1; }
.page-blocks .ilt-sn.iso .ilt-dot { fill: var(--accent); }
/* 沒有 JS 時按鈕不存在；有 JS 後每個節點有一顆透明按鈕（至少 44 像素）接住鍵盤與觸控，焦點環畫在按鈕上。 */
.page-blocks .ilt-nd { all: unset; box-sizing: border-box; position: absolute; left: calc(var(--x) - 1.375rem); top: calc(var(--y) - 1.375rem); width: 2.75rem; height: 2.75rem; border-radius: 50%; cursor: pointer; }
.page-blocks .ilt-nd:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
.page-blocks .ilt-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 1rem; margin-top: 1rem; }
.page-blocks .ilt-ctl { display: flex; flex-wrap: wrap; gap: .625rem; }
html:not(.js) .page-blocks .ilt-ctl { display: none; }
.page-blocks .ilt-next { margin: 0; color: var(--muted-on-dark); font-size: .9375rem; line-height: 1.6; }
.page-blocks .ilt-next b { color: var(--paper); }
.page-blocks .ilt-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding: 0 1.125rem; border: 2px solid var(--on-dark-line); border-radius: var(--r-pill); color: var(--paper); font-size: .9375rem; font-weight: 600; cursor: pointer; transition: border-color var(--dur-fast); }
.page-blocks .ilt-btn:hover { border-color: var(--paper); }
.page-blocks .ilt-btn:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
.page-blocks .ilt-switch { padding-right: .375rem; border-color: var(--paper); font-weight: 700; }
.page-blocks .ilt-knob { position: relative; box-sizing: border-box; width: 3.5rem; height: 1.75rem; border: 2px solid var(--accent-dark); border-radius: var(--r-pill); background: transparent; transition: background .3s, border-color .3s; }
.page-blocks .ilt-knob::before { content: attr(data-off); position: absolute; right: .5rem; top: 50%; translate: 0 -50%; color: var(--paper); font-size: .75rem; font-weight: 700; line-height: 1; }
.page-blocks .ilt-knob::after { content: ""; position: absolute; left: .125rem; top: .125rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--accent-dark); transition: transform .3s var(--ease), background .3s; }
.page-blocks .ilt-switch[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 28%, var(--deeper)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.page-blocks .ilt-switch:hover .ilt-knob { border-color: var(--paper); }
.page-blocks .ilt-switch[aria-pressed="true"] .ilt-knob { border-color: var(--accent); background: var(--accent); }
.page-blocks .ilt-switch[aria-pressed="true"] .ilt-knob::before { content: attr(data-on); right: auto; left: .5rem; color: var(--accent-on); }
.page-blocks .ilt-switch[aria-pressed="true"] .ilt-knob::after { background: var(--accent-on); transform: translateX(1.75rem); }
.page-blocks .ilt-text { margin-top: 1rem; font-size: .875rem; }
.page-blocks .ilt-text summary { cursor: pointer; color: var(--paper); font-weight: 600; }
.page-blocks .ilt-text summary:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
.page-blocks .ilt-text ul { margin: .5rem 0 0; padding-left: 1.25rem; line-height: 1.7; }
.page-blocks .ilt-cap { margin: 1rem 0 0; font-size: .75rem; letter-spacing: .1em; }
@media (max-width: 40rem) { .page-blocks .ilt-state { min-height: 3em; margin-left: 0; text-align: left; } }
@media (prefers-reduced-motion: reduce) { .page-blocks :is(.ilt-e, .ilt-dot, .ilt-halo, .ilt-isor, .ilt-nm, .ilt-hop, .ilt-btn, .ilt-knob, .ilt-knob::after, .ilt-steps li, .ilt-go span) { transition: none; } }
html[data-motion="off"] .page-blocks :is(.ilt-e, .ilt-dot, .ilt-halo, .ilt-isor, .ilt-nm, .ilt-hop, .ilt-btn, .ilt-knob, .ilt-knob::after, .ilt-steps li, .ilt-go span) { transition: none; }
/* issue 374：開始模擬的泡泡掛在絕對定位的節點按鈕上，不能被 .sg-host 的 relative 蓋掉。 */
.page-blocks .ilt-nd.sg-host { position: absolute; }