/* issue 322 場景 cloudcoffer-record：一支 API 的盤點紀錄。只讀官網 token 與 --accent*；需處理的值淺底用 --arch-coral-fill、深色帶用 --arch-coral。
   預設（沒有 JS、減少動態、暫停動態）完整顯示；JS 加 .is-armed 後各類先暗、值先隱藏，進入畫面加 .is-play，
   CSS 動畫依 nth-child 延遲逐類填入並點亮進度（--d：第幾類；--r：類內第幾個值）。捲出畫面由 motion.css 的 is-offscreen 暫停。 */
.page-blocks .pp-scene--cloudcoffer-record { --cr-fg: var(--ink); --cr-mute: var(--muted); --cr-edge: var(--line); --cr-hi: var(--accent-ink); --cr-on: var(--accent); --cr-on-ink: var(--accent-on); --cr-hot: var(--arch-coral-fill);
  --cr-panel: var(--surface-sunken); --cr-head: color-mix(in srgb, var(--ink) 5%, var(--surface-sunken)); --cr-mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; }
.page-blocks :is(.pp-section--band, .pp-section--image) .pp-scene--cloudcoffer-record { --cr-fg: var(--paper); --cr-mute: var(--muted-on-dark); --cr-edge: var(--on-dark-line); --cr-hi: var(--accent-dark); --cr-hot: var(--arch-coral);
  --cr-panel: color-mix(in srgb, var(--paper) 5%, var(--deeper)); --cr-head: color-mix(in srgb, var(--deeper) 70%, black); }
/* issue 327：標題在格線內時只留一次全站標題下距。 */
.page-blocks .cr { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.page-blocks .cr > .pp-head { margin-bottom: 0; }
.page-blocks .cr-rec { overflow: hidden; border: 1px solid var(--cr-edge); border-radius: var(--radius-xl); background: var(--cr-panel); color: var(--cr-fg); }
.page-blocks .cr-hd { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; padding: 1rem 1.375rem; border-bottom: 1px solid var(--cr-edge); background: var(--cr-head); }
.page-blocks .cr-m { padding: .1875rem .625rem; border-radius: var(--radius-s); background: var(--cr-on); color: var(--cr-on-ink); font-family: var(--cr-mono); font-size: .8125rem; font-weight: 700; }
.page-blocks .cr-p { min-width: 0; font-family: var(--cr-mono); font-size: .9375rem; overflow-wrap: anywhere; }
.page-blocks .cr-st { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-left: auto; color: var(--cr-mute); font-size: .8125rem; font-weight: 700; }
.page-blocks .cr-c { display: inline-grid; }
.page-blocks .cr-c > span { grid-area: 1 / 1; background: var(--cr-head); color: var(--cr-fg); font-variant-numeric: tabular-nums; }
.page-blocks .cr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page-blocks .cr-bar { display: inline-flex; gap: 3px; width: 7.5rem; margin-left: .25rem; }
.page-blocks .cr-bar > i { flex: 1; height: 4px; border-radius: 2px; background: var(--cr-on); }
.page-blocks .cr-grp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-blocks .cr-g { min-width: 0; padding: 1.125rem 1.375rem 1rem; border-bottom: 1px solid var(--cr-edge); }
.page-blocks .cr-g:nth-child(odd) { border-right: 1px solid var(--cr-edge); }
.page-blocks .cr-g:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
/* 底線：最後一格不畫；總數為偶數時最後一列兩格都不畫（倒數第 2 格是奇數位才代表同一列）。 */
.page-blocks .cr-g:last-child, .page-blocks .cr-g:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.page-blocks .cr-t { display: flex; align-items: baseline; gap: .625rem; margin: 0 0 .5rem; color: var(--cr-fg); font-size: 1rem; line-height: 1.4; }
.page-blocks .cr-n { color: var(--cr-hi); font-size: .75rem; font-weight: 800; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.page-blocks .cr-g dl { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: .25rem .875rem; margin: 0; }
.page-blocks .cr-g:last-child:nth-child(odd) dl { grid-template-columns: minmax(0, 11em) minmax(0, 1fr) minmax(0, 11em) minmax(0, 1fr); }
.page-blocks .cr-g dt { color: var(--cr-mute); font-family: var(--cr-mono); font-size: .78125rem; line-height: 1.9; overflow-wrap: anywhere; }
.page-blocks .cr-g dt.cr-solo { grid-column: 1 / -1; }
.page-blocks .cr-g dd { margin: 0; color: var(--cr-fg); font-family: var(--cr-mono); font-size: .8125rem; line-height: 1.9; overflow-wrap: anywhere; }
.page-blocks .cr-g dd.is-hot { color: var(--cr-hot); font-weight: 700; }
.page-blocks .cr-g dd.is-hot::before, .page-blocks .cr-dot { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .375rem; border-radius: 50%; background: var(--cr-hot); vertical-align: .1em; }
.page-blocks .cr-ft { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: .875rem 1.375rem; border-top: 1px solid var(--cr-edge); color: var(--cr-mute); font-size: .8125rem; }

/* 逐類延遲：第 k 類（分組、進度格、進度數字）＝(k-1)×0.55 秒；類內第 n 個值再加 (n-1)×0.08 秒。 */
.page-blocks .cr-g:nth-child(1), .page-blocks .cr-c > span:nth-child(1), .page-blocks .cr-bar > i:nth-child(1) { --d: 0.0s; }
.page-blocks .cr-g:nth-child(2), .page-blocks .cr-c > span:nth-child(2), .page-blocks .cr-bar > i:nth-child(2) { --d: 0.55s; }
.page-blocks .cr-g:nth-child(3), .page-blocks .cr-c > span:nth-child(3), .page-blocks .cr-bar > i:nth-child(3) { --d: 1.1s; }
.page-blocks .cr-g:nth-child(4), .page-blocks .cr-c > span:nth-child(4), .page-blocks .cr-bar > i:nth-child(4) { --d: 1.65s; }
.page-blocks .cr-g:nth-child(5), .page-blocks .cr-c > span:nth-child(5), .page-blocks .cr-bar > i:nth-child(5) { --d: 2.2s; }
.page-blocks .cr-g:nth-child(6), .page-blocks .cr-c > span:nth-child(6), .page-blocks .cr-bar > i:nth-child(6) { --d: 2.75s; }
.page-blocks .cr-g:nth-child(7), .page-blocks .cr-c > span:nth-child(7), .page-blocks .cr-bar > i:nth-child(7) { --d: 3.3s; }
.page-blocks .cr-g:nth-child(8), .page-blocks .cr-c > span:nth-child(8), .page-blocks .cr-bar > i:nth-child(8) { --d: 3.85s; }
.page-blocks .cr-g dd:nth-of-type(1) { --r: 0.0s; }
.page-blocks .cr-g dd:nth-of-type(2) { --r: 0.08s; }
.page-blocks .cr-g dd:nth-of-type(3) { --r: 0.16s; }
.page-blocks .cr-g dd:nth-of-type(4) { --r: 0.24s; }
.page-blocks .cr-g dd:nth-of-type(5) { --r: 0.32s; }
.page-blocks .cr-g dd:nth-of-type(6) { --r: 0.4s; }
.page-blocks .cr-g dd:nth-of-type(7) { --r: 0.48s; }
.page-blocks .cr-g dd:nth-of-type(8) { --r: 0.56s; }

@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="off"]) .page-blocks .cr.is-armed .cr-g { opacity: .35; }
  html.js:not([data-motion="off"]) .page-blocks .cr.is-armed .cr-g dd, html.js:not([data-motion="off"]) .page-blocks .cr.is-armed .cr-c > span { opacity: 0; }
  html.js:not([data-motion="off"]) .page-blocks .cr.is-armed .cr-bar > i { background: var(--cr-edge); }
  html.js:not([data-motion="off"]) .page-blocks .cr.is-play .cr-g { animation: cr-group .5s var(--ease) var(--d) both; }
  html.js:not([data-motion="off"]) .page-blocks .cr.is-play .cr-g dd { animation: cr-value .35s var(--ease) calc(var(--d) + .15s + var(--r)) both; }
  html.js:not([data-motion="off"]) .page-blocks .cr.is-play .cr-c > span { animation: cr-count .01s linear calc(var(--d) + .5s) both; }
  html.js:not([data-motion="off"]) .page-blocks .cr.is-play .cr-bar > i { animation: cr-fill .3s var(--ease) calc(var(--d) + .4s) both; }
}
@keyframes cr-group { from { opacity: .35; } to { opacity: 1; } }
@keyframes cr-value { from { opacity: 0; translate: -.25rem 0; } to { opacity: 1; translate: 0 0; } }
@keyframes cr-count { from { opacity: 0; } to { opacity: 1; } }
@keyframes cr-fill { from { background: var(--cr-edge); } to { background: var(--cr-on); } }

/* 窄螢幕：一欄；最後一類不再四欄。 */
@media (max-width: 47.5rem) {
  .page-blocks .cr-grp { grid-template-columns: minmax(0, 1fr); }
  .page-blocks .cr-g, .page-blocks .cr-g:nth-child(odd) { border-right: 0; padding: .875rem 1rem .75rem; border-bottom: 1px solid var(--cr-edge); }
  .page-blocks .cr-g:last-child { border-bottom: 0; }
  .page-blocks .cr-g dl, .page-blocks .cr-g:last-child:nth-child(odd) dl { grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); }
  .page-blocks .cr-hd { padding: .875rem 1rem; }
  .page-blocks .cr-st { width: 100%; margin-left: 0; }
  .page-blocks .cr-bar { flex: 1; }
  .page-blocks .cr-ft { padding: .75rem 1rem; }
}
@media (max-width: 22.5rem) {
  .page-blocks .cr-g dl, .page-blocks .cr-g:last-child:nth-child(odd) dl { grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); column-gap: .625rem; }
}