/* issue 244 場景 about-platform-arch：關於頁平台架構互動圖（HTML 排版），放在頁面內文。元件自己是深色面板。
   顏色只讀官網 token：藍＝--cloudforce-blue、淺藍由藍混白、薄荷由 --arch-teal 與 --arch-green 混成，底與字用 --deep／--deeper／--paper／--muted-on-dark／--arch-node／--arch-line。
   沒有 JS 或減少動態時直接是完整狀態；淡化、轉場、光點全部由 JS 加在根節點的屬性啟動，動態規則集中在檔案最後的 no-preference 區塊。
   寬螢幕五格欄位（來源、連線、平台、連線、輸出），≤62rem 上下直排，≤40rem 模組堆疊。 */
.page-blocks .ab-arch { --ab-soft: color-mix(in srgb, var(--cloudforce-blue) 55%, var(--paper)); --ab-mint: color-mix(in srgb, var(--arch-teal) 50%, var(--arch-green)); --ab-link: 3.5rem; position: relative; display: grid; gap: .75rem; min-width: 0; padding: 1.5rem; border: 1px solid color-mix(in srgb, var(--paper) 10%, transparent); border-radius: 1.5rem; background: radial-gradient(60% 50% at 50% 38%, color-mix(in srgb, var(--cloudforce-blue) 10%, transparent), transparent), linear-gradient(180deg, var(--deep), var(--deeper)); color: var(--paper); overflow: hidden; text-align: left; }
.page-blocks .ab-arch > * { min-width: 0; }
.page-blocks .ab-sr { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page-blocks .ab-tools { display: flex; justify-content: flex-end; }
.page-blocks .ab-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem 1.1rem; border: 1px solid color-mix(in srgb, var(--paper) 28%, transparent); border-radius: var(--r-pill); background: color-mix(in srgb, var(--paper) 8%, transparent); color: var(--paper); font-size: .9375rem; font-weight: 700; cursor: pointer; }
.page-blocks .ab-btn[hidden] { display: none; }
.page-blocks .ab-btn:hover { background: color-mix(in srgb, var(--paper) 16%, transparent); }
.page-blocks .ab-btn:focus-visible, .page-blocks .ab-card:focus-visible, .page-blocks .ab-mod:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.page-blocks .ab-tools:has(.ab-btn[hidden]) { display: none; }
.page-blocks .ab-title { margin: 0 0 .75rem; text-align: center; font-size: clamp(1.0625rem, 2.4vw, 1.6rem); font-weight: 800; color: var(--ab-soft); line-height: 1.5; text-wrap: balance; }
.page-blocks .ab-k-blue { --ab-c: var(--cloudforce-blue); }
.page-blocks .ab-k-soft { --ab-c: var(--ab-soft); }
.page-blocks .ab-k-mint { --ab-c: var(--ab-mint); }

.page-blocks .ab-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; align-items: stretch; min-width: 0; }
.page-blocks .ab-grid > * { min-width: 0; }
.page-blocks .ab-colhead { margin: 0; padding: .25rem 0 .75rem; text-align: center; font-size: 1.15rem; font-weight: 700; color: var(--ab-soft); align-self: end; }
.page-blocks .ab-h-out { padding-top: 1.25rem; }

/* 來源／輸出卡片 */
.page-blocks .ab-card { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .8rem; width: 100%; padding: .9rem; border: 1.5px solid var(--ab-c); border-radius: 1.25rem; background: linear-gradient(160deg, color-mix(in srgb, var(--ab-c) 18%, var(--deep)), color-mix(in srgb, var(--ab-c) 5%, var(--deeper))); box-shadow: 0 0 1.5rem color-mix(in srgb, var(--ab-c) 18%, transparent); cursor: pointer; }
.page-blocks .ab-card:disabled, .page-blocks .ab-mod:disabled { cursor: default; }
.page-blocks .ab-card[aria-pressed="true"] { border-width: 2.5px; box-shadow: 0 0 2rem color-mix(in srgb, var(--ab-c) 50%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--ab-c) 32%, var(--deep)), color-mix(in srgb, var(--ab-c) 10%, var(--deeper))); }
.page-blocks .ab-ibox { flex: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 1.8px solid var(--ab-c); background: color-mix(in srgb, var(--ab-c) 14%, var(--arch-node)); box-shadow: 0 0 .9rem color-mix(in srgb, var(--ab-c) 40%, transparent); }
.page-blocks .ab-ico { width: 1.9rem; height: 1.9rem; fill: none; stroke: var(--ab-c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.page-blocks .ab-txt { display: block; min-width: 0; }
.page-blocks .ab-name { display: block; font-size: 1.15rem; font-weight: 800; line-height: 1.3; color: var(--paper); overflow-wrap: anywhere; }
.page-blocks .ab-sub { display: block; margin-top: .15rem; color: var(--muted-on-dark); font-size: .95rem; font-weight: 500; line-height: 1.45; text-wrap: balance; }

/* 平台 */
.page-blocks .ab-plat { display: flex; flex-direction: column; margin: 0; padding: 1.5rem 1.25rem 1.25rem; border: 1.8px solid var(--ab-soft); border-radius: 1.6rem; background: linear-gradient(170deg, color-mix(in srgb, var(--cloudforce-blue) 24%, var(--deep)), color-mix(in srgb, var(--cloudforce-blue) 6%, var(--deeper))); box-shadow: 0 0 2.5rem color-mix(in srgb, var(--cloudforce-blue) 30%, transparent); }
.page-blocks .ab-plat-head { display: flex; justify-content: center; align-items: center; gap: .75rem; color: var(--paper); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.3; }
.page-blocks .ab-plat-head .ab-ico { width: 2.2rem; height: 2.2rem; }
.page-blocks .ab-plat-sub { margin: .75rem 0 1rem; padding-top: .9rem; border-top: 1px solid color-mix(in srgb, var(--ab-soft) 35%, transparent); text-align: center; color: var(--ab-soft); font-weight: 700; font-size: 1.05rem; line-height: 1.5; }
.page-blocks .ab-mods { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.page-blocks .ab-mod { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: 1rem .5rem; border: 1.5px solid color-mix(in srgb, var(--ab-soft) 30%, transparent); border-radius: 1.1rem; background: color-mix(in srgb, var(--paper) 4%, transparent); cursor: pointer; }
.page-blocks .ab-mod[aria-pressed="true"] { border-color: var(--ab-soft); background: color-mix(in srgb, var(--cloudforce-blue) 22%, transparent); box-shadow: 0 0 1.4rem color-mix(in srgb, var(--cloudforce-blue) 45%, transparent); }
.page-blocks .ab-mod .ab-ibox { width: 3.75rem; height: 3.75rem; }
.page-blocks .ab-mod .ab-name { font-size: 1.1rem; }
.page-blocks .ab-mod .ab-sub { font-size: .9rem; }
.page-blocks .ab-note { margin: .9rem 0 0; min-height: 3rem; padding: .6rem .9rem; border: 1px dashed color-mix(in srgb, var(--ab-soft) 50%, transparent); border-radius: .8rem; background: color-mix(in srgb, var(--deeper) 60%, transparent); color: var(--paper); font-size: .95rem; line-height: 1.55; text-align: center; text-wrap: balance; }
.page-blocks .ab-note[hidden] { display: none; }
/* issue 371 修正：說明框一直佔位（JS 保留最長說明的高度），空白時只隱藏外框與內容，點選來源時圖不會被撐高。 */
.page-blocks .ab-note.is-empty { visibility: hidden; }
.page-blocks .ab-plat > :last-child:not(.ab-note) { margin-bottom: 0; }

/* 連線：窄螢幕直向、寬螢幕橫向 */
.page-blocks .ab-link { position: relative; min-height: 2.25rem; }
.page-blocks .ab-link::before { content: ""; position: absolute; left: 50%; top: .2rem; bottom: .7rem; width: 2px; margin-left: -1px; background: var(--ab-c); box-shadow: 0 0 .6rem var(--ab-c); }
.page-blocks .ab-link::after { content: ""; position: absolute; left: 50%; bottom: .2rem; margin-left: -.4rem; border: .4rem solid transparent; border-top: .7rem solid var(--ab-c); border-bottom: 0; }

/* 底列 */
.page-blocks .ab-foot { margin: 1.25rem 0 0; padding: 1rem 1.25rem; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; border: 1px solid color-mix(in srgb, var(--paper) 12%, transparent); border-radius: 1.2rem; background: color-mix(in srgb, var(--paper) 4%, transparent); }
.page-blocks .ab-foot li { display: flex; align-items: center; justify-content: flex-start; gap: .75rem; min-width: 0; color: var(--paper); font-size: 1.1rem; font-weight: 800; }
.page-blocks .ab-foot .ab-ibox { width: 2.6rem; height: 2.6rem; }
.page-blocks .ab-foot .ab-ico { width: 1.4rem; height: 1.4rem; }
.page-blocks .ab-foot .ab-t { min-width: 0; overflow-wrap: anywhere; }

/* 光點（只在 JS 播放時出現） */
.page-blocks .ab-dot { position: absolute; left: 0; top: 0; z-index: 5; width: .9rem; height: .9rem; margin: -.45rem 0 0 -.45rem; border-radius: 50%; background: var(--ab-soft); box-shadow: 0 0 .5rem var(--ab-soft), 0 0 1.4rem var(--cloudforce-blue); opacity: 0; pointer-events: none; }
.page-blocks .ab-dot.ab-is-show { opacity: 1; }
.page-blocks .ab-dot--mint { background: var(--ab-mint); box-shadow: 0 0 .5rem var(--ab-mint), 0 0 1.4rem var(--ab-mint); }
.page-blocks .ab-is-dim { opacity: .3; }

@media (min-width: 62.0625rem) {
  .page-blocks .ab-arch { padding: 1.5rem; }
  .page-blocks .ab-grid { grid-template-columns: minmax(0, 1fr) var(--ab-link) minmax(0, 1.15fr) var(--ab-link) minmax(0, 1fr); row-gap: 1rem; }
  .page-blocks .ab-colhead, .page-blocks .ab-h-out { padding: 0 0 .25rem; }
  .page-blocks .ab-h-src { grid-column: 1; grid-row: 1; }
  .page-blocks .ab-h-out { grid-column: 5; grid-row: 1; }
  .page-blocks .ab-s1 { grid-column: 1; grid-row: 2; } .page-blocks .ab-s2 { grid-column: 1; grid-row: 3; } .page-blocks .ab-s3 { grid-column: 1; grid-row: 4; } .page-blocks .ab-s4 { grid-column: 1; grid-row: 5; }
  .page-blocks .ab-a1 { grid-column: 2; grid-row: 2; } .page-blocks .ab-a2 { grid-column: 2; grid-row: 3; } .page-blocks .ab-a3 { grid-column: 2; grid-row: 4; } .page-blocks .ab-a4 { grid-column: 2; grid-row: 5; }
  .page-blocks .ab-b1 { grid-column: 4; grid-row: 2; } .page-blocks .ab-b2 { grid-column: 4; grid-row: 3; } .page-blocks .ab-b3 { grid-column: 4; grid-row: 4; } .page-blocks .ab-b4 { grid-column: 4; grid-row: 5; }
  .page-blocks .ab-o1 { grid-column: 5; grid-row: 2; } .page-blocks .ab-o2 { grid-column: 5; grid-row: 3; } .page-blocks .ab-o3 { grid-column: 5; grid-row: 4; } .page-blocks .ab-o4 { grid-column: 5; grid-row: 5; }
  .page-blocks .ab-plat { grid-column: 3; }
  .page-blocks .ab-n1 .ab-plat { grid-row: 2 / 3; } .page-blocks .ab-n2 .ab-plat { grid-row: 2 / 4; } .page-blocks .ab-n3 .ab-plat { grid-row: 2 / 5; } .page-blocks .ab-n4 .ab-plat { grid-row: 2 / 6; }
  .page-blocks .ab-foot { grid-column: 1 / -1; margin-top: .5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: center; }
  .page-blocks .ab-n1 .ab-foot { grid-row: 3; } .page-blocks .ab-n2 .ab-foot { grid-row: 4; } .page-blocks .ab-n3 .ab-foot { grid-row: 5; } .page-blocks .ab-n4 .ab-foot { grid-row: 6; }
  .page-blocks .ab-foot li { justify-content: center; }
  .page-blocks .ab-foot li + li { border-left: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); }
  .page-blocks .ab-card { gap: 1rem; padding: 1.1rem 1.25rem; }
  .page-blocks .ab-name { font-size: 1.3rem; }
  .page-blocks .ab-link::before { left: .2rem; right: .7rem; top: 50%; bottom: auto; width: auto; height: 2px; margin: -1px 0 0; }
  .page-blocks .ab-link::after { left: auto; right: .2rem; top: 50%; bottom: auto; margin: -.4rem 0 0; border: .4rem solid transparent; border-left: .7rem solid var(--ab-c); border-right: 0; }
}
@media (max-width: 62rem) {
  .page-blocks .ab-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .page-blocks .ab-arch { padding: 1rem .75rem; }
  .page-blocks .ab-mods { grid-template-columns: minmax(0, 1fr); }
  .page-blocks .ab-mod { flex-direction: row; text-align: left; padding: .75rem; gap: .9rem; }
  .page-blocks .ab-mod .ab-txt { flex: 1; }
  .page-blocks .ab-name { font-size: 1.1rem; }
  .page-blocks .ab-foot { grid-template-columns: minmax(0, 1fr); }
  .page-blocks .ab-plat { padding: 1.25rem .9rem; }
}

/* 動態：只在允許動態時才淡化未點亮項目與轉場；沒有 JS 或減少動態時一律是完整狀態 */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .ab-arch[data-ab-anim] [data-ab-lit]:not(.ab-is-lit) { opacity: .2; }
  html:not([data-motion="off"]) .page-blocks .ab-arch[data-ab-anim] :is(.ab-card, .ab-plat)[data-ab-lit]:not(.ab-is-lit) { box-shadow: none; }
  html:not([data-motion="off"]) .page-blocks .ab-arch[data-ab-motion] :is([data-ab-lit], .ab-is-dim) { transition: opacity .45s ease; }
}

/* issue 371：共用提示行取代平台框裡原本的小字提示。圖是深色底，提示行改用淺藍；卡片用 all: unset，補回 position 讓泡泡與圓圈定位在卡片上。
   泡泡靠右、壓在卡片上緣（不蓋住上方欄標），點按圓圈在卡片中央。 */
.page-blocks .ab-arch > .cfh-line { --cfh-line: var(--accent-dark); margin: 0; }
.page-blocks .ab-card.cfh-host { position: relative; }
.page-blocks .ab-card .cfh-tip { left: auto; right: .625rem; bottom: calc(100% - .5rem); }
.page-blocks .ab-card .cfh-tip::after { left: auto; right: 1.25rem; }