/* 2026-10-06 場景 checkpoint-collab：三個落點串成一條線，每個節點上方是圖示、下方是處置卡。圖示用 CSS 畫（信封、對話框、資料夾），都是裝飾。
   有 JS（.is-live）：未點亮的節點降低透明度並改虛線，捲進可視範圍後由左到右依序點亮；沒有 JS 或減少動態：全部點亮。 */
.page-blocks .cc { --cc-n: 3; display: grid; gap: 1.5rem; margin-top: clamp(2rem, 5vw, 3.5rem); color: var(--paper); }
.page-blocks .cc[data-count="2"] { --cc-n: 2; }
.page-blocks .cc[data-count="4"] { --cc-n: 4; }
.page-blocks .cc [hidden] { display: none; }
.page-blocks .cc-line { position: relative; display: grid; grid-template-columns: repeat(var(--cc-n), minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); margin: 0; padding: 0; list-style: none; }
.page-blocks .cc-line::before { content: ""; position: absolute; left: calc(50% / var(--cc-n)); right: calc(50% / var(--cc-n)); top: 2.5rem; border-top: 3px solid var(--accent); }
.page-blocks .cc-node { position: relative; display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 1rem; }
.page-blocks .cc-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 5rem; height: 5rem; border: 3px solid var(--accent); border-radius: 50%; background: var(--deeper); }
.page-blocks .cc-ico i { position: relative; display: block; width: 2.25rem; height: 1.625rem; border: 2px solid var(--paper); border-radius: .25rem; }
.page-blocks .cc-ico--mail i { overflow: hidden; }
.page-blocks .cc-ico--mail i::before { content: ""; position: absolute; left: 50%; top: -.7rem; width: 1.3rem; height: 1.3rem; translate: -50% 0; rotate: 45deg; border-right: 2px solid var(--paper); border-bottom: 2px solid var(--paper); }
.page-blocks .cc-ico--chat i { border-radius: .625rem; }
.page-blocks .cc-ico--chat i::after { content: ""; position: absolute; left: .375rem; bottom: -.5rem; width: .6rem; height: .6rem; background: var(--deeper); border-right: 2px solid var(--paper); border-bottom: 2px solid var(--paper); rotate: 45deg; skew: -8deg; }
.page-blocks .cc-ico--drive i { height: 1.5rem; margin-top: .2rem; }
.page-blocks .cc-ico--drive i::before { content: ""; position: absolute; left: -2px; top: -.55rem; width: 1rem; height: .5rem; border: 2px solid var(--paper); border-bottom: 0; border-radius: .25rem .25rem 0 0; }
.page-blocks .cc-card { display: grid; align-content: start; gap: .625rem; width: 100%; padding: clamp(1.25rem, 2.4vw, 1.75rem); border: 1px solid var(--on-dark-line); border-top: 3px solid var(--accent); border-radius: var(--r-card); background: color-mix(in srgb, var(--paper) 4%, var(--deeper)); text-wrap: pretty; }
.page-blocks .cc-h { margin: 0; color: var(--paper); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 800; line-height: 1.3; }
.page-blocks .cc-body { margin: 0; color: var(--muted-on-dark); font-size: 1.0625rem; line-height: 1.75; }
.page-blocks .cc-plan { display: grid; gap: .5rem; padding: 1rem 1.25rem; border-left: 3px solid var(--accent-spark, var(--accent)); background: color-mix(in srgb, var(--accent-spark, var(--accent)) 8%, transparent); }
.page-blocks .cc-plan .cc-h { font-size: 1.125rem; }
.page-blocks .cc-play { justify-self: start; 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 .cc-play:not([hidden]) { display: inline-flex; align-items: center; }
.page-blocks .cc-play:hover { border-color: var(--accent); color: var(--paper); }
.page-blocks .cc-play:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.page-blocks .cc.is-live .cc-node { transition: opacity .4s var(--ease); }
.page-blocks .cc.is-live .cc-node:not(.lit) { opacity: .35; }
.page-blocks .cc.is-live .cc-node:not(.lit) .cc-ico { border-style: dashed; }
@media (max-width: 47.99rem) {
  .page-blocks .cc-line { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .page-blocks .cc-line::before { left: 2.5rem; right: auto; top: 2.5rem; bottom: 2.5rem; border-top: 0; border-left: 3px solid var(--accent); }
  .page-blocks .cc-node { grid-template-columns: 5rem minmax(0, 1fr); align-items: start; justify-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { html .page-blocks .cc .cc-node { transition: none; } }
html[data-motion="off"] .page-blocks .cc .cc-node { transition: none; }
.page-blocks .pp-scene--checkpoint-collab .pp-eyebrow { font-size: .8125rem; }

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