/* issue 325 場景 trellix-chain：同一條鏈，五個控制點。只讀官網 token 與 --accent*；攻擊點與鏈尾用 --accent-spark（沒有時退回 --accent-dark）。
   版面：寬螢幕標題與引言在上一列、下方列表與圖等高（issue 339）；窄螢幕依序標題區、圖、列表。圖 data-s：all＝全亮（沒有 JS／減少動態），0–4＝目前控制點。 */
.page-blocks .pp-scene--trellix-chain { --tc-fg: var(--ink); --tc-mute: var(--muted); --tc-edge: var(--line); --tc-hi: var(--accent-ink); --tc-glow: var(--accent); --tc-pick: color-mix(in srgb, var(--accent) 12%, transparent);
  --tc-panel: var(--deeper); --tc-pfg: var(--paper); --tc-pmute: var(--muted-on-dark); --tc-pedge: var(--on-dark-line); --tc-on: var(--accent-dark); --tc-atk: var(--accent-spark, var(--accent-dark)); }
.page-blocks :is(.pp-section--band, .pp-section--image) .pp-scene--trellix-chain { --tc-fg: var(--paper); --tc-mute: var(--muted-on-dark); --tc-edge: var(--on-dark-line); --tc-hi: var(--accent-dark); }
/* issue 339：寬螢幕標題與引言在上一列（標題左、引言右），下方列表與圖兩欄等高（原本左欄約 900px、右圖 516px 垂直置中，上下大片空白）。 */
.page-blocks .tc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head head" "list fig"; column-gap: clamp(2rem, 4vw, 4.5rem); row-gap: clamp(1.75rem, 3vw, 3rem); align-items: stretch; }
.page-blocks .tc-head { grid-area: head; }
.page-blocks .tc-head .pp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(2rem, 4vw, 4.5rem); align-items: end; max-width: none; margin-bottom: 0; }
.page-blocks .tc-head .pp-head > :not(.pp-intro) { grid-column: 1; }
.page-blocks .tc-head .pp-head > .pp-intro { grid-column: 2; grid-row: 1 / span 4; align-self: end; margin: 0; }
.page-blocks .tc-steps { grid-area: list; display: grid; gap: .25rem; align-content: space-between; margin: 0; padding: 0; list-style: none; }
.page-blocks .tc-fig { grid-area: fig; }

.page-blocks .tc-step { position: relative; padding: .875rem 1.125rem 1.125rem; border: 1px solid transparent; border-radius: var(--radius-l); transition: background var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease); }
.page-blocks .tc-step:hover { border-color: var(--tc-edge); }
.page-blocks .tc-step.is-on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--tc-pick); }
.page-blocks .tc-title { margin: 0; }
.page-blocks .tc-title button { all: unset; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem .75rem; color: var(--tc-fg); font-size: clamp(1.125rem, 1.7vw, 1.375rem); font-weight: 800; line-height: 1.3; cursor: pointer; border-radius: var(--radius-m); }
.page-blocks .tc-title button:focus-visible { outline: 3px solid var(--tc-hi); outline-offset: 6px; }
.page-blocks .tc-num { color: var(--tc-hi); font-size: clamp(1.625rem, 2.4vw, 2.125rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.page-blocks .tc-tag { padding: .125rem .5625rem; border: 1px solid var(--tc-edge); border-radius: var(--r-pill); color: var(--tc-atk); font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.page-blocks .pp-scene--trellix-chain:not(:is(.pp-section--band, .pp-section--image) *) .tc-tag { color: var(--tc-hi); }
.page-blocks .tc-step p { margin: .375rem 0 0 calc(clamp(1.625rem, 2.4vw, 2.125rem) * 1.5 + .75rem); color: var(--tc-mute); font-size: clamp(.875rem, 1.05vw, 1rem); line-height: 1.75; }
.page-blocks .tc-timer { position: absolute; left: 1.125rem; right: 1.125rem; bottom: .4375rem; height: 2px; border-radius: 2px; background: var(--tc-on); opacity: 0; transform: scaleX(0); transform-origin: left; }
.page-blocks .tc.is-armed .tc-step:not(.is-on) .tc-title button { color: var(--tc-mute); }
.page-blocks .tc.is-armed .tc-step:not(.is-on) .tc-num { color: color-mix(in srgb, var(--tc-hi) 55%, transparent); }

/* 圖：一律深色面板，內容以 container 單位縮放；比例固定 6:5（與 SVG viewBox 一致，HTML 標籤的百分比位置才對得上）。 */
.page-blocks .tc-fig { position: relative; display: grid; align-items: center; margin: 0; overflow: hidden; border: 1px solid var(--tc-pedge); border-radius: var(--r-card); background: radial-gradient(70% 60% at 50% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), var(--tc-panel); color: var(--tc-pfg); }
/* 畫布固定 6:5（與 SVG viewBox 一致），HTML 標籤的百分比位置才對得上；外框被列高撐高時畫布垂直置中。 */
.page-blocks .tc-canvas { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 6 / 5; }
.page-blocks .tc-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-blocks .tc-bar { fill: color-mix(in srgb, var(--paper) 4%, var(--deeper)); stroke: var(--tc-pedge); stroke-width: 1.5; transition: stroke .5s var(--ease), fill .5s var(--ease); }
.page-blocks :is(.tc-fd, .tc-cl) { stroke: var(--tc-pedge); stroke-width: 1.5; stroke-dasharray: 3 5; transition: stroke .5s var(--ease); }
.page-blocks .tc-path { fill: none; stroke: color-mix(in srgb, var(--tc-atk) 45%, transparent); stroke-width: 2; stroke-dasharray: 6 7; }
.page-blocks .tc-tgt { fill: color-mix(in srgb, var(--tc-atk) 12%, transparent); stroke: var(--tc-atk); stroke-width: 1.5; stroke-dasharray: 4 4; }
.page-blocks .tc-ring { fill: var(--deeper); stroke: color-mix(in srgb, var(--accent) 35%, transparent); stroke-width: 2; transition: stroke .5s var(--ease), fill .5s var(--ease); }
.page-blocks .tc-core { fill: color-mix(in srgb, var(--accent) 35%, transparent); transition: fill .5s var(--ease); }
.page-blocks .tc-atk { fill: var(--tc-atk); filter: drop-shadow(0 0 6px var(--tc-atk)); transform: translateX(384px); opacity: .5; transition: transform 1s var(--ease), opacity .5s var(--ease); }
.page-blocks :is(.tc-lb, .tc-bl, .tc-target, .tc-stamp) { position: absolute; z-index: 1; white-space: nowrap; }
.page-blocks .tc-lb { top: 56%; display: grid; justify-items: center; gap: .125rem; translate: -50% 0; text-align: center; }
.page-blocks .tc-lb b { color: var(--tc-pfg); font-size: clamp(.6875rem, 2.4cqi, .9375rem); transition: color .5s var(--ease); }
.page-blocks .tc-lb span { color: var(--tc-pmute); font-size: clamp(.625rem, 2cqi, .8125rem); font-weight: 700; }
.page-blocks .tc-lb--0 { left: 16%; } .page-blocks .tc-lb--1 { left: 40%; } .page-blocks .tc-lb--2 { left: 64%; }
.page-blocks .tc-target { left: 88%; top: 56%; translate: -50% 0; color: var(--tc-atk); font-size: clamp(.625rem, 2cqi, .8125rem); font-weight: 800; }
.page-blocks .tc-bl { left: 50%; translate: -50% -50%; display: flex; align-items: baseline; gap: .5rem; color: var(--tc-pmute); font-size: clamp(.6875rem, 2.3cqi, .9375rem); transition: color .5s var(--ease); }
.page-blocks .tc-bl b { color: var(--tc-pfg); }
.page-blocks .tc-bl--top { top: 15%; } .page-blocks .tc-bl--bot { top: 85%; }
.page-blocks .tc-stamp { left: 50%; top: 70%; translate: -50% 0; padding: .3125rem .75rem; border: 1.5px solid var(--tc-on); border-radius: var(--r-pill); background: color-mix(in srgb, var(--deeper) 92%, transparent); color: var(--tc-on); font-size: clamp(.625rem, 2.1cqi, .8125rem); font-weight: 800; opacity: 0; transition: opacity .5s var(--ease); }

/* 全亮（沒有 JS／減少動態）：三個控制點、兩層都亮，攻擊點淡停在第三點。 */
.page-blocks .tc-fig[data-s="all"] :is(.tc-ring) { stroke: var(--tc-on); }
.page-blocks .tc-fig[data-s="all"] .tc-core { fill: var(--tc-on); }
.page-blocks .tc-fig[data-s="all"] :is(.tc-fd, .tc-cl) { stroke: color-mix(in srgb, var(--tc-on) 60%, transparent); }
.page-blocks .tc-fig[data-s="all"] .tc-bar { stroke: color-mix(in srgb, var(--tc-on) 60%, transparent); }
.page-blocks .tc-fig[data-s="all"] .tc-stamp { opacity: 1; }
/* 0–2：攻擊點沿鏈前進，停在該控制點；該點亮。 */
.page-blocks .tc-fig[data-s="0"] .tc-atk { transform: translateX(96px); opacity: 1; }
.page-blocks .tc-fig[data-s="1"] .tc-atk { transform: translateX(240px); opacity: 1; }
.page-blocks .tc-fig[data-s="2"] .tc-atk { transform: translateX(384px); opacity: 1; }
.page-blocks :is(.tc-fig[data-s="0"] .tc-node--0, .tc-fig[data-s="1"] .tc-node--1, .tc-fig[data-s="2"] .tc-node--2) .tc-ring { stroke: var(--tc-on); fill: color-mix(in srgb, var(--accent) 18%, var(--deeper)); }
.page-blocks :is(.tc-fig[data-s="0"] .tc-node--0, .tc-fig[data-s="1"] .tc-node--1, .tc-fig[data-s="2"] .tc-node--2) .tc-core { fill: var(--tc-on); }
.page-blocks :is(.tc-fig[data-s="0"] .tc-lb--0, .tc-fig[data-s="1"] .tc-lb--1, .tc-fig[data-s="2"] .tc-lb--2) b { color: var(--tc-on); }
/* 3：情資層餵進每個控制點；4：各控制點收進調查層、標出敘事。 */
.page-blocks .tc-fig[data-s="3"] :is(.tc-fd) { stroke: var(--tc-on); }
.page-blocks .tc-fig[data-s="3"] .tc-bar--top { stroke: var(--tc-on); fill: color-mix(in srgb, var(--accent) 12%, var(--deeper)); }
.page-blocks .tc-fig[data-s="3"] .tc-ring { stroke: color-mix(in srgb, var(--tc-on) 70%, transparent); }
.page-blocks .tc-fig[data-s="3"] :is(.tc-bl--top, .tc-bl--top b) { color: var(--tc-on); }
.page-blocks .tc-fig[data-s="4"] .tc-cl { stroke: var(--tc-on); }
.page-blocks .tc-fig[data-s="4"] .tc-bar--bot { stroke: var(--tc-on); fill: color-mix(in srgb, var(--accent) 12%, var(--deeper)); }
.page-blocks .tc-fig[data-s="4"] :is(.tc-bl--bot, .tc-bl--bot b) { color: var(--tc-on); }
.page-blocks .tc-fig[data-s="4"] .tc-stamp { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="off"]) .page-blocks .tc.is-auto.is-run .tc-step.is-on .tc-timer { opacity: .75; animation: tc-timer 3.4s linear forwards; }
}
@keyframes tc-timer { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .page-blocks :is(.tc-step, .tc-atk, .tc-ring, .tc-core, .tc-bar, .tc-fd, .tc-cl, .tc-stamp, .tc-bl, .tc-lb b) { transition: none; } }
html[data-motion="off"] .page-blocks :is(.tc-step, .tc-atk, .tc-ring, .tc-core, .tc-bar, .tc-fd, .tc-cl, .tc-stamp, .tc-bl, .tc-lb b) { transition: none; }

/* 窄螢幕：標題區、圖、列表上下排；輪播時只展開目前這點的說明。 */
@media (max-width: 61.99rem) {
  .page-blocks .tc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "list"; }
  .page-blocks .tc-head .pp-head { display: flex; flex-direction: column; }
  .page-blocks .tc-head .pp-head > .pp-intro { margin-top: 1rem; }
  .page-blocks .tc-steps { align-content: start; }
  .page-blocks .tc.is-armed .tc-step:not(.is-on) p { display: none; }
  .page-blocks .tc-step { padding: .75rem .875rem 1rem; }
}
/* 手機：圖約 18–22rem 寬，節點下只留位置名（產品名在列表裡），避免相鄰標籤相疊。 */
@media (max-width: 40rem) {
  .page-blocks .tc-lb span { display: none; }
  .page-blocks .tc-step p { margin-left: 0; }
}