/* issue 245 場景 devaeye-service-line：頁首右側的「一條服務線」互動圖（開發階段看組件、單一窗口、上線後看行為；HTML 排版，不是圖片）。
   元件自己是深色面板，放在頁首右欄（.hero-aside，寬約 520–680px）也放得進內文；欄數依步數（dvl-n3..5），窄版改直排「依容器寬度」判斷，不依視窗，
   所以不必動任何頁首的斷點。顏色只讀官網 token：藍＝--devaeye-blue、青綠＝--arch-green，底與字用 --deep／--deeper／--paper／--muted-on-dark／--arch-node。
   沒有 JS 或減少動態時直接是完整狀態；淡化、轉場、脈動與光點全部在檔案最後的 no-preference 區塊內，由 JS 加在根節點的屬性啟動。
   類別一律用 dvl- 前綴（issue 228：chrome.css 的全站游標佔用通用類別名稱）。 */
.page-blocks .dvl { --dvl-circle: 3.4rem; --dvl-pad: 1rem; position: relative; display: block; min-width: 0; padding: var(--dvl-pad); border: 1px solid color-mix(in srgb, var(--paper) 12%, transparent); border-radius: 1.4rem; background: linear-gradient(180deg, var(--deep), var(--deeper)); box-shadow: 0 0 3rem color-mix(in srgb, var(--devaeye-blue) 14%, transparent); color: var(--paper); overflow: hidden; text-align: left; container-type: inline-size; }
.page-blocks .dvl [hidden] { display: none; }
.page-blocks .dvl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.page-blocks .dvl-tools:not(:has(.dvl-btn:not([hidden]))) { display: none; }
.page-blocks .dvl-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 2.75rem; padding: .3rem 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; cursor: pointer; }
.page-blocks .dvl-btn:hover { background: color-mix(in srgb, var(--paper) 16%, transparent); }
.page-blocks .dvl-btn[aria-pressed="true"] { border-color: var(--devaeye-blue); background: color-mix(in srgb, var(--devaeye-blue) 30%, transparent); }
.page-blocks .dvl-btn:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.page-blocks .dvl-replay { margin-left: auto; }
.page-blocks .dvl-btn:first-child.dvl-replay { margin-left: 0; }
.page-blocks .dvl-status { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.page-blocks .dvl-c-blue { --dvl-c: var(--devaeye-blue); }
.page-blocks .dvl-c-teal { --dvl-c: var(--arch-green); }
.page-blocks .dvl-panel { padding: .8rem var(--dvl-pad) 1rem; border: 1.5px solid var(--dvl-c); border-radius: 1.1rem; background: linear-gradient(160deg, color-mix(in srgb, var(--dvl-c) 16%, var(--deep)), color-mix(in srgb, var(--dvl-c) 4%, var(--deeper))); box-shadow: 0 0 1.4rem color-mix(in srgb, var(--dvl-c) 18%, transparent); }
.page-blocks .dvl-phead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .75rem; margin-bottom: .9rem; }
.page-blocks .dvl-ptitle { margin: 0; color: var(--paper); font-size: 1.15rem; font-weight: 800; line-height: 1.4; }
.page-blocks .dvl-ptitle span { color: var(--dvl-c); }
.page-blocks .dvl-chip { display: inline-flex; align-items: center; padding: .25rem .8rem; border: 1.5px solid color-mix(in srgb, var(--dvl-c) 75%, transparent); border-radius: var(--r-pill); background: color-mix(in srgb, var(--dvl-c) 12%, transparent); color: var(--paper); font-size: .875rem; font-weight: 700; line-height: 1.4; }

.page-blocks .dvl-steps { display: grid; grid-template-columns: repeat(var(--dvl-n, 5), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.page-blocks .dvl-n1 { --dvl-n: 1; } .page-blocks .dvl-n2 { --dvl-n: 2; } .page-blocks .dvl-n3 { --dvl-n: 3; } .page-blocks .dvl-n4 { --dvl-n: 4; } .page-blocks .dvl-n5 { --dvl-n: 5; }
.page-blocks .dvl-step { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; text-align: center; }
.page-blocks .dvl-circle { position: relative; display: grid; place-items: center; width: var(--dvl-circle); height: var(--dvl-circle); border: 2px solid var(--dvl-c); border-radius: 50%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--dvl-c) 20%, var(--arch-node)), var(--arch-node)); box-shadow: 0 0 1.2rem color-mix(in srgb, var(--dvl-c) 40%, transparent); }
.page-blocks .dvl-ico, .page-blocks .dvl-hubico { flex: none; width: 1.7rem; height: 1.7rem; fill: none; stroke: var(--dvl-c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.page-blocks .dvl-tx { display: block; min-width: 0; padding-inline: .15rem; }
.page-blocks .dvl-label { display: block; margin-top: .55rem; color: var(--paper); font-size: .95rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.page-blocks .dvl-sub { display: block; margin-top: .1rem; color: var(--muted-on-dark); font-size: .8125rem; line-height: 1.35; overflow-wrap: anywhere; }
/* 步驟之間的連線與箭頭：畫在後一步的左側，長度＝一欄寬減圓點直徑 */
.page-blocks .dvl-step + .dvl-step::before { content: ""; position: absolute; top: calc(var(--dvl-circle) / 2 - 1.5px); left: calc(-50% + var(--dvl-circle) / 2 + .35rem); width: calc(100% - var(--dvl-circle) - .7rem); height: 0; border-top: 3px solid var(--dvl-c); }
.page-blocks .dvl-step + .dvl-step::after { content: ""; position: absolute; top: calc(var(--dvl-circle) / 2 - .45rem); left: calc(50% - var(--dvl-circle) / 2 - .75rem); border-top: .45rem solid transparent; border-bottom: .45rem solid transparent; border-left: .6rem solid var(--dvl-c); }
.page-blocks .dvl-step--gate .dvl-circle { border-style: dashed; }
.page-blocks .dvl-step--gate::before { border-top-style: dashed; }

/* 單一窗口：上下各一條短線，對齊相鄰那段的最後一步（上）與第一步（下）的圓心 */
.page-blocks .dvl-hubwrap { --dvl-c: var(--paper); }
.page-blocks .dvl-drop { display: flex; height: 1.3rem; padding: 0 calc(var(--dvl-pad) + (100% - 3px - 2 * var(--dvl-pad)) / (2 * var(--dvl-n, 5))); }
.page-blocks .dvl-drop--in { justify-content: flex-end; --dvl-c: var(--devaeye-blue); }
.page-blocks .dvl-drop--out { justify-content: flex-start; --dvl-c: var(--arch-green); }
.page-blocks .dvl-drop b { position: relative; display: block; width: 3px; height: 100%; background: var(--dvl-c); }
.page-blocks .dvl-drop--out b::after { content: ""; position: absolute; left: -.4rem; bottom: -.05rem; border-top: .6rem solid var(--dvl-c); border-right: .5rem solid transparent; border-left: .5rem solid transparent; }
.page-blocks .dvl-hub { position: relative; display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .7rem 1rem; border: 2px solid color-mix(in srgb, var(--devaeye-blue) 55%, var(--paper)); border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--devaeye-blue) 30%, var(--arch-node)), color-mix(in srgb, var(--arch-green) 26%, var(--arch-node))); box-shadow: 0 0 1.6rem color-mix(in srgb, var(--devaeye-blue) 40%, transparent); color: var(--paper); font-size: 1.1rem; font-weight: 800; line-height: 1.4; text-align: center; }
.page-blocks .dvl-hubico { stroke: var(--paper); stroke-width: 1.8; }
.page-blocks .dvl-nw { display: inline-block; }
.page-blocks .dvl-hub i { position: absolute; top: 50%; width: 1px; height: 1px; }
.page-blocks .dvl-hub .dvl-wp-r { right: calc(1.5px + var(--dvl-pad) + (100% - 3px - 2 * var(--dvl-pad)) / (2 * var(--dvl-n, 5))); }
.page-blocks .dvl-hub .dvl-wp-l { left: calc(1.5px + var(--dvl-pad) + (100% - 3px - 2 * var(--dvl-pad)) / (2 * var(--dvl-n, 5))); }

/* 光點（只在允許動態且 JS 播放時顯示，見檔尾） */
.page-blocks .dvl-dot { position: absolute; top: 0; left: 0; z-index: 5; display: none; width: 1rem; height: 1rem; margin: -.5rem 0 0 -.5rem; border-radius: 50%; background: var(--paper); box-shadow: 0 0 .5rem color-mix(in srgb, var(--devaeye-blue) 55%, var(--paper)), 0 0 1.4rem var(--devaeye-blue); pointer-events: none; }

/* 按下切換鈕後，另一段淡化（使用者主動操作，不算動態） */
.page-blocks .dvl .dvl-is-dim { opacity: .3; }

/* 窄版（容器寬不足）：步驟直排，連線改垂直；依容器寬度，不依視窗 */
@container (max-width: 26rem) {
  .page-blocks .dvl-steps { grid-template-columns: minmax(0, 1fr); }
  .page-blocks .dvl-step { flex-direction: row; align-items: center; gap: .85rem; margin-top: 1.2rem; text-align: left; }
  .page-blocks .dvl-step:first-child { margin-top: 0; }
  .page-blocks .dvl-circle { flex: none; }
  .page-blocks .dvl-label { margin-top: 0; }
  .page-blocks .dvl-step + .dvl-step::before { top: -1.2rem; left: calc(var(--dvl-circle) / 2 - 1.5px); width: 0; height: 1.2rem; border-top: 0; border-left: 3px solid var(--dvl-c); }
  .page-blocks .dvl-step + .dvl-step::after { top: -.3rem; left: calc(var(--dvl-circle) / 2 - .5rem); border-top: .6rem solid var(--dvl-c); border-right: .5rem solid transparent; border-bottom: 0; border-left: .5rem solid transparent; }
  .page-blocks .dvl-step--gate::before { border-top-style: none; border-left-style: dashed; }
  .page-blocks .dvl-drop, .page-blocks .dvl-drop--in, .page-blocks .dvl-drop--out { justify-content: flex-start; padding: 0 0 0 calc(var(--dvl-pad) + var(--dvl-circle) / 2); }
  .page-blocks .dvl-hub { border-radius: 1.4rem; font-size: 1rem; }
  .page-blocks .dvl-hub .dvl-wp-r, .page-blocks .dvl-hub .dvl-wp-l { right: auto; left: calc(1px + var(--dvl-pad) + var(--dvl-circle) / 2); }
}
@container (max-width: 34rem) {
  .page-blocks .dvl-ptitle { font-size: 1.05rem; }
}

/* 動態：只在允許動態時才淡化未點亮項目、轉場與脈動、顯示光點；沒有 JS 或減少動態時一律是完整狀態 */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .dvl[data-dvl-anim] [data-dvl-lit]:not(.dvl-is-lit) { opacity: .26; }
  html:not([data-motion="off"]) .page-blocks .dvl[data-dvl-anim] .dvl-step[data-dvl-lit]:not(.dvl-is-lit) .dvl-circle { box-shadow: none; }
  html:not([data-motion="off"]) .page-blocks .dvl[data-dvl-anim] .dvl-hub[data-dvl-lit]:not(.dvl-is-lit) { box-shadow: none; }
  html:not([data-motion="off"]) .page-blocks .dvl[data-dvl-anim] .dvl-is-dim [data-dvl-lit]:not(.dvl-is-lit) { opacity: 1; }
  html:not([data-motion="off"]) .page-blocks .dvl[data-dvl-motion] [data-dvl-lit], html:not([data-motion="off"]) .page-blocks .dvl[data-dvl-motion] [data-dvl-part] { transition: opacity .45s ease; }
  html:not([data-motion="off"]) .page-blocks .dvl[data-dvl-motion] .dvl-dot.dvl-is-show { display: block; }
  html:not([data-motion="off"]) .page-blocks .dvl[data-dvl-motion] .dvl-hub.dvl-is-pulse { animation: dvl-pulse 1.1s ease-out 2; }
  @keyframes dvl-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }
}
/* issue 371：切換鈕用 all: unset，補回 position 讓「可以點」泡泡與圓圈定位在鈕上。外框會裁切超出的內容，所以泡泡改放在鈕下方（箭頭朝上），
   並在泡泡存在時於鈕列下方留出空間，不蓋住第一段的標題；第一次操作移除泡泡時空間一併收回。 */
.page-blocks .dvl-btn.cfh-host { position: relative; }
.page-blocks .dvl-btn .cfh-tip { bottom: auto; top: calc(100% + .625rem); }
.page-blocks .dvl-btn .cfh-tip::after { top: auto; bottom: 100%; border-width: 0 .4375rem .4375rem; border-top-color: transparent; border-bottom-color: var(--accent-dark); }
.page-blocks .dvl-tools:has(.cfh-tip) { margin-bottom: 3rem; }
@media (prefers-reduced-motion: no-preference) { .page-blocks .dvl-tools { transition: margin-bottom .2s var(--ease); } }