/* issue 193 場景 devaeye-board：告警看板（移植示意站 .board）。issue 326：不釘住；左列階段（標題＋時效常駐）、右看板＋時效軸，step-player 輪播。
   沒有 JS、減少動態、暫停動態：看板停在最後階段（data-stage＝階段數）、說明全展開。只讀官網 token 與 --accent*。 */
.page-blocks .dv-sla { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.page-blocks .dv-steps { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.page-blocks .dv-step { position: relative; padding: .875rem 1.125rem 1.125rem; border: 1px solid transparent; border-left: 3px solid transparent; border-radius: var(--radius-s) var(--radius-l) var(--radius-l) var(--radius-s); transition: background var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease); }
.page-blocks .dv-st { margin: 0; }
.page-blocks .dv-btn { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: .25rem 1rem; cursor: pointer; border-radius: var(--radius-m); }
.page-blocks .dv-btn:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 4px; }
.page-blocks .dv-n { color: var(--accent-ink); font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; transition: color .4s var(--ease); }
.page-blocks .dv-t { font-size: clamp(1.0625rem, 1.6vw, 1.375rem); font-weight: 800; line-height: 1.3; transition: color .4s var(--ease); }
.page-blocks .dv-time { color: var(--accent-ink); font-size: .8125rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.page-blocks .dv-d { margin: .375rem 0 0; padding-left: calc(clamp(1.375rem, 2.2vw, 1.875rem) * 1.4 + 1rem); color: var(--muted); font-size: clamp(.875rem, 1.05vw, 1rem); line-height: 1.75; }
.page-blocks .dv-timer { position: absolute; left: 1.125rem; right: 1.125rem; bottom: .375rem; height: 2px; border-radius: 2px; background: var(--accent); opacity: 0; transform: scaleX(0); transform-origin: left; }
.page-blocks .dv-step:hover { border-color: var(--line); }
.page-blocks .dv-step.is-on { border-color: color-mix(in srgb, var(--accent) 40%, transparent); border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.page-blocks .dv-sla.is-armed .dv-step:not(.is-on) :is(.dv-n, .dv-time) { color: var(--muted); }
.page-blocks .dv-sla.is-armed .dv-step:not(.is-on) .dv-t { color: var(--muted); }
.page-blocks :is(.pp-section--band, .pp-section--image) .dv-step:hover { border-color: var(--on-dark-line); }
.page-blocks :is(.pp-section--band, .pp-section--image) :is(.dv-n, .dv-time) { color: var(--accent-dark); }
.page-blocks :is(.pp-section--band, .pp-section--image) .dv-d { color: var(--muted-on-dark); }
.page-blocks :is(.pp-section--band, .pp-section--image) .dv-btn:focus-visible { outline-color: var(--accent-dark); }
.page-blocks :is(.pp-section--band, .pp-section--image) .dv-step.is-on { border-left-color: var(--accent-dark); }
.page-blocks :is(.pp-section--band, .pp-section--image) .dv-sla.is-armed .dv-step:not(.is-on) :is(.dv-n, .dv-time, .dv-t) { color: var(--muted-on-dark); }

/* 看板：一律深色。 */
.page-blocks .dv-board { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--on-dark-line); border-radius: var(--radius-l); background: color-mix(in srgb, var(--paper) 4%, var(--navy)); color: var(--paper); }
.page-blocks .dv-board::before, .page-blocks .dv-board::after { content: ""; position: absolute; width: 1.375rem; height: 1.375rem; border: 3px solid var(--accent-dark); }
.page-blocks .dv-board::before { left: -3px; top: -3px; border-right: 0; border-bottom: 0; }
.page-blocks .dv-board::after { right: -3px; bottom: -3px; border-left: 0; border-top: 0; }
.page-blocks .dv-bhead { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; color: var(--muted-on-dark); font-size: .75rem; letter-spacing: .14em; }
.page-blocks .dv-bhead b { color: var(--paper); font-size: .875rem; letter-spacing: .04em; }
.page-blocks .dv-bhead em { color: var(--accent-dark); font-style: normal; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.page-blocks .dv-grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: clamp(.25rem, .6vw, .375rem); }
.page-blocks .dv-grid i { aspect-ratio: 1; border-radius: .25rem; background: var(--accent); opacity: .42; transition: opacity .5s var(--ease), transform .5s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); }
.page-blocks .dv-grid i:nth-child(3n) { opacity: .62; }
.page-blocks .dv-grid i:nth-child(4n) { opacity: .26; }
/* 1：可疑的幾格發亮。 */
.page-blocks .dv-board[data-stage="1"] .dv-grid i.k { opacity: 1; box-shadow: 0 0 .625rem var(--accent); }
/* 2 起：其他格退暗，只留被標記的那一筆；2 框成警示色（隔離），3 起轉回強調色（已處理）。 */
.page-blocks .dv-board:not([data-stage="1"]) .dv-grid i { opacity: .16; }
.page-blocks .dv-board:not([data-stage="1"]) .dv-grid i.o { opacity: 1; transform: scale(1.1); box-shadow: 0 0 0 3px var(--navy), 0 0 0 5px var(--accent-dark); }
.page-blocks .dv-board[data-stage="2"] .dv-grid i.o { background: var(--arch-coral); box-shadow: 0 0 0 3px var(--navy), 0 0 0 5px var(--arch-coral); }
.page-blocks .dv-acts { display: flex; flex-wrap: wrap; gap: .375rem; }
.page-blocks .dv-acts span { padding: .25rem .6875rem; border: 1px solid var(--on-dark-line); border-radius: var(--r-pill); color: var(--muted-on-dark); font-size: .75rem; font-weight: 700; transition: all .4s var(--ease); }
.page-blocks .dv-board:is([data-stage="1"]) .dv-acts span[data-k="1"],
.page-blocks .dv-board:is([data-stage="2"]) .dv-acts span[data-k="2"],
.page-blocks .dv-board:is([data-stage="3"]) .dv-acts span[data-k="3"],
.page-blocks .dv-board:is([data-stage="4"]) .dv-acts span[data-k="4"],
.page-blocks .dv-board:is([data-stage="5"]) .dv-acts span[data-k="5"] { border-color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--paper); }
/* 時效軸：等距的點，每格一段線（從上一點畫到這一點）；有 JS 時只點亮到目前階段（JS 依 data-from 加 is-on），沒有 JS 時全亮。 */
.page-blocks .dv-axis { display: grid; grid-template-columns: repeat(var(--dv-marks, 3), minmax(0, 1fr)); padding-top: .25rem; border-top: 1px solid var(--on-dark-line); }
.page-blocks .dv-axis--1 { --dv-marks: 1; } .page-blocks .dv-axis--2 { --dv-marks: 2; } .page-blocks .dv-axis--4 { --dv-marks: 4; } .page-blocks .dv-axis--5 { --dv-marks: 5; }
.page-blocks .dv-mk { position: relative; display: grid; justify-items: end; gap: .125rem; padding-top: 1.75rem; text-align: right; }
.page-blocks .dv-mk::after { content: ""; position: absolute; left: 0; right: .375rem; top: .9375rem; height: 3px; border-radius: 3px; background: var(--accent-fill, var(--accent-dark)); transition: background .4s var(--ease); }
.page-blocks .dv-mk::before { content: ""; position: absolute; right: 0; top: .625rem; z-index: 1; width: .75rem; height: .75rem; border-radius: 50%; border: 2px solid var(--accent-dark); background: var(--accent-fill, var(--accent-dark)); transition: all .4s var(--ease); }
.page-blocks .dv-mk b { color: var(--accent-dark); font-size: .75rem; letter-spacing: .02em; white-space: nowrap; transition: color .4s var(--ease); }
.page-blocks .dv-mk span { color: var(--muted-on-dark); font-size: .6875rem; }
.page-blocks .dv-sla.is-armed .dv-mk:not(.is-on)::after { background: var(--on-dark-line); }
.page-blocks .dv-sla.is-armed .dv-mk:not(.is-on)::before { border-color: var(--muted-on-dark); background: color-mix(in srgb, var(--paper) 4%, var(--navy)); }
.page-blocks .dv-sla.is-armed .dv-mk:not(.is-on) b { color: var(--muted-on-dark); }

@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="off"]) .page-blocks .dv-sla.is-auto.is-run .dv-step.is-on .dv-timer { opacity: .75; animation: dv-timer 3.4s linear forwards; }
}
@keyframes dv-timer { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .page-blocks :is(.dv-step, .dv-grid i, .dv-acts span, .dv-mk::before, .dv-mk::after, .dv-mk b, .dv-n, .dv-t) { transition: none; } }
html[data-motion="off"] .page-blocks :is(.dv-step, .dv-grid i, .dv-acts span, .dv-mk::before, .dv-mk::after, .dv-mk b, .dv-n, .dv-t) { transition: none; }

/* 窄螢幕：看板在上、階段在下；輪播時只展開目前階段的說明。 */
@media (max-width: 61.99rem) {
  .page-blocks .dv-sla { grid-template-columns: minmax(0, 1fr); }
  .page-blocks .dv-board { order: -1; }
  .page-blocks .dv-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .page-blocks .dv-sla.is-armed .dv-step:not(.is-on) .dv-d { display: none; }
  .page-blocks .dv-step { padding: .75rem .875rem 1rem; }
}
@media (max-width: 30rem) {
  .page-blocks .dv-btn { grid-template-columns: auto minmax(0, 1fr); }
  .page-blocks .dv-time { grid-column: 2; }
  .page-blocks .dv-d { padding-left: 0; }
  .page-blocks .dv-mk b { font-size: .6875rem; white-space: normal; }
  .page-blocks .dv-mk span { display: none; }
}