/* issue 408（ADR 0021）：政策文件版型與原則列、流程圖、導言、宣言、索引、暖米白面板。
   只讀 design-tokens 的變數；新樣式都掛在新的 class／選項上，既有頁面不受影響。外觀以使用者確認的示意頁為準。
   漸進增強：沒有 JS、減少動態、暫停動態時全部內容照常可見。 */

/* ---------- 暖米白背景（一般版面：滿版淡暖底；政策文件版型：下面的圓角面板） ---------- */
.page-blocks .pp-section--warm { background: var(--warm); }

/* ---------- 導言：大字段落與重點標示 ---------- */
.page-blocks :is(.pp-split-copy, .pp-flow-copy) > p.pp-doc-lead { max-width: 42rem; margin: 0; color: var(--ink); font-size: clamp(1.1875rem, 1.9vw, 1.5rem); font-weight: 500; line-height: 1.9; text-wrap: pretty; text-spacing-trim: trim-start; }
.page-blocks :is(.pp-split-copy, .pp-flow-copy) > p.pp-doc-lead.pp-doc-lead--m { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); }
.page-blocks .pp-mark { font-style: normal; font-weight: 800; padding-inline: .05em; background: linear-gradient(to top, color-mix(in srgb, var(--cta) 45%, transparent) .42em, transparent .42em); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (forced-colors: active) { .page-blocks .pp-mark { background: none; text-decoration: underline; } }

/* ---------- 原則列：圖示、中文、英文 ---------- */
.page-blocks .pp-principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--paper); overflow: hidden; box-shadow: var(--elevation-card); }
.page-blocks .pp-principles li { position: relative; display: grid; gap: .25rem; align-content: start; padding: 1.5rem 1.25rem 1.375rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-wrap: wrap; transition: background var(--dur-base) var(--ease); }
.page-blocks .pp-principles li:nth-child(2n), .page-blocks .pp-principles li:last-child { border-right: 0; }
.page-blocks .pp-principles li:nth-last-child(-n+2) { border-bottom: 0; }
.page-blocks .pp-principles li::after { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; bottom: 0; height: 2px; background: var(--cta); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease); }
.page-blocks .pp-principles li:is(:hover, .is-lit) { background: var(--warm); }
.page-blocks .pp-principles li:is(:hover, .is-lit)::after { transform: scaleX(1); }
.pp-principle-icon { width: 2rem; height: 2rem; margin-bottom: .75rem; fill: none; stroke: var(--action); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-base) var(--ease); }
.page-blocks .pp-principles li:is(:hover, .is-lit) .pp-principle-icon { transform: translateY(-.1875rem); }
.page-blocks .pp-principles strong { color: var(--ink); font-size: 1.375rem; font-weight: 900; line-height: 1.25; }
.page-blocks .pp-principles span { color: var(--muted); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; }
@media (min-width: 48rem) {
  .page-blocks .pp-principles:not(:has(> li:nth-child(5))) { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
  .page-blocks .pp-principles:not(:has(> li:nth-child(5))) li, .page-blocks .pp-principles:not(:has(> li:nth-child(5))) li:nth-child(2n) { border-right: 1px solid var(--line); border-bottom: 0; }
  .page-blocks .pp-principles:not(:has(> li:nth-child(5))) li:last-child { border-right: 0; }
}

/* ---------- 條列樣式：宣言（深色面板上的大字，後半句強調色） ---------- */
.page-blocks .pp-list.pp-list--pledge { gap: 0; margin: clamp(1.75rem, 4vw, 2.75rem) 0 0; max-width: 42rem; }
.page-blocks .pp-list--pledge li { position: relative; padding: clamp(1.125rem, 2.4vw, 1.625rem) 0 clamp(1.125rem, 2.4vw, 1.625rem) 1.5rem; border-top: 1px solid var(--on-dark-line); color: var(--paper); font-size: clamp(1.3125rem, 2.5vw, 2rem); font-weight: 800; line-height: 1.45; letter-spacing: .01em; text-wrap: balance; }
.page-blocks .pp-list--pledge li:last-child { border-bottom: 1px solid var(--on-dark-line); }
.page-blocks .pp-list--pledge li::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 1.5em; translate: 0 -50%; border-radius: 0; background: var(--cta); }
.page-blocks .pp-list--pledge em { font-style: normal; color: var(--hero-em); white-space: nowrap; }
.page-blocks .pp-doc-rings { position: absolute; z-index: -1; right: -10rem; bottom: -9rem; width: 30rem; max-width: 80%; overflow: visible; fill: none; stroke: var(--on-dark-line); stroke-width: 1.5; pointer-events: none; }

/* ---------- 條列樣式：索引（無編號，細線分隔，寬螢幕兩欄由上往下讀） ---------- */
.page-blocks .pp-list.pp-list--index { gap: 0; margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; border-bottom: 1px solid var(--line); }
.page-blocks .pp-list--index li { position: relative; display: flex; align-items: baseline; gap: .875rem; padding: 1rem .25rem; border-top: 1px solid var(--line); color: var(--ink); font-size: 1.0625rem; font-weight: 600; line-height: 1.55; text-wrap: wrap; transition: padding-left var(--dur-base) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-base) var(--ease); }
.page-blocks .pp-list--index li::before { content: ""; position: static; flex: none; width: .625rem; height: 2px; translate: 0 -.3em; border-radius: 0; background: var(--cta); transition: width var(--dur-base) var(--ease); }
.page-blocks .pp-list--index li:hover { padding-left: .75rem; color: var(--action); background: var(--warm); }
.page-blocks .pp-list--index li:hover::before { width: 1.25rem; }
@media (min-width: 40rem) {
  .page-blocks .pp-list.pp-list--index { grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); border-bottom: 0; }
  .page-blocks .pp-list--index li.is-colend { border-bottom: 1px solid var(--line); }
  .page-blocks .pp-list--rows-1 { grid-template-rows: repeat(1, auto); }
  .page-blocks .pp-list--rows-2 { grid-template-rows: repeat(2, auto); }
  .page-blocks .pp-list--rows-3 { grid-template-rows: repeat(3, auto); }
  .page-blocks .pp-list--rows-4 { grid-template-rows: repeat(4, auto); }
  .page-blocks .pp-list--rows-5 { grid-template-rows: repeat(5, auto); }
  .page-blocks .pp-list--rows-6 { grid-template-rows: repeat(6, auto); }
  .page-blocks .pp-list--rows-7 { grid-template-rows: repeat(7, auto); }
  .page-blocks .pp-list--rows-8 { grid-template-rows: repeat(8, auto); }
}

/* ---------- 流程圖（循環／三角）：左文右圖，SVG 由節點產生 ---------- */
.pp-flow-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 48rem) { .pp-flow-grid { grid-template-columns: minmax(0, 1fr) 22rem; } }
.pp-flow--head-inside .pp-flow-grid { gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 52rem) { .pp-flow--head-inside .pp-flow-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); } }
.pp-flow-copy { min-width: 0; }
.page-blocks .pp-flow--head-inside .pp-head { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.pp-flow-fig { margin: 0; }
.pp-flow-svg { display: block; width: 100%; height: auto; margin-inline: auto; overflow: visible; }
.pp-flow--triangle .pp-flow-svg { max-width: 22rem; }
.pp-flow--cycle .pp-flow-svg { max-width: 26rem; }
.pp-flow-ring { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; }
.pp-flow-ring--in { stroke-dasharray: none; opacity: .7; }
.pp-flow-line { fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pp-flow--cycle .pp-flow-line { stroke: var(--action); stroke-width: 2.5; stroke-linecap: round; }
.pp-flow--triangle .pp-flow-line { stroke: var(--button-outline-line); stroke-width: 2; }
.pp-flow-tip { fill: var(--action); }
.pp-flow-node circle, .pp-flow-node rect { fill: var(--paper); stroke: var(--action); stroke-width: 2; }
.pp-flow-zh { fill: var(--ink); font-size: 21px; font-weight: 900; }
.pp-flow--triangle .pp-flow-zh { font-size: 22px; font-weight: 800; }
.pp-flow-en { fill: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.pp-flow-center { fill: var(--ink); font-size: 22px; font-weight: 900; letter-spacing: .06em; }
.pp-flow--triangle .pp-flow-center { font-size: 17px; font-weight: 800; }
.pp-flow-orbit { display: none; }

/* ---------- 政策文件版型：左側黏性章節目錄＋右側閱讀欄＋頂端閱讀進度 ---------- */
.page-blocks--doc .pp-doc { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); padding-block: clamp(1rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem); display: grid; gap: 0 clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .page-blocks--doc .pp-doc { grid-template-columns: 14.5rem minmax(0, 1fr); } }
.pp-doc-body { min-width: 0; }
.pp-doc-toc { display: none; }
@media (min-width: 64rem) { .pp-doc-toc { display: block; position: sticky; top: 6.5rem; align-self: start; padding-top: clamp(1.5rem, 3vw, 2.5rem); } }
.pp-doc-toc-label { margin: 0 0 1.25rem; padding-left: 1.25rem; color: var(--muted); font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.pp-doc-toc ol { position: relative; margin: 0; padding: 0; list-style: none; }
.pp-doc-toc ol::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); }
.pp-doc-toc a { position: relative; display: grid; gap: .125rem; padding: .625rem 0 .625rem 1.25rem; color: var(--muted); text-decoration: none; transition: color var(--dur-fast) var(--ease), padding-left var(--dur-base) var(--ease); }
.pp-doc-toc a::before { content: ""; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 2px; background: var(--cta); transform: scaleY(0); transform-origin: center; transition: transform var(--dur-base) var(--ease); }
.pp-doc-toc-zh { font-size: .9375rem; font-weight: 700; line-height: 1.4; }
.pp-doc-toc-en { color: var(--muted); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
.pp-doc-toc a:is(:hover, :focus-visible) { color: var(--ink); }
.pp-doc-toc a[aria-current] { color: var(--ink); padding-left: 1.5rem; }
.pp-doc-toc a[aria-current]::before { transform: scaleY(1); }
.pp-doc-toc a:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--radius-s); }
.pp-doc-progress { display: none; }

/* 章節：以細線分隔；沒有標題的區段是上一章的延續（沒有線、不加上間距） */
.page-blocks--doc .pp-docsec { padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); scroll-margin-top: 5rem; }
.page-blocks--doc .pp-doc-body > .pp-docsec:first-child { border-top: 0; padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.page-blocks--doc .pp-docsec--cont { padding-top: 0; border-top: 0; }
.page-blocks--doc .pp-docsec:has(+ .pp-docsec--cont) { padding-bottom: 0; }
.page-blocks--doc .pp-docsec .pp-container { max-width: none; margin: 0; padding-inline: 0; }
.page-blocks--doc .pp-docsec .pp-split { display: block; }
.page-blocks--doc .pp-docsec .pp-head { display: block; max-width: none; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.page-blocks--doc .pp-docsec .pp-head .pp-eyebrow { margin-bottom: .875rem; line-height: 1.8; }
.page-blocks--doc .pp-docsec .pp-head h2 { margin: 0; color: var(--ink); font-size: clamp(2rem, 3.8vw, 3.25rem); font-weight: 900; line-height: 1.15; letter-spacing: -.005em; font-feature-settings: "palt"; text-wrap: balance; }
.page-blocks--doc .pp-docsec .pp-split-copy > p:not(.pp-doc-lead), .page-blocks--doc .pp-docsec .pp-flow-copy > p:not(.pp-doc-lead) { max-width: 40rem; margin: 0; color: var(--table-cell-text); font-size: 1.0625rem; line-height: 1.95; text-wrap: pretty; text-spacing-trim: trim-start; }
.page-blocks--doc .pp-docsec .pp-split-copy > p + p, .page-blocks--doc .pp-docsec .pp-flow-copy > p + p, .page-blocks--doc .pp-docsec--cont .pp-split-copy > p:first-child { margin-top: 1.5rem; }
.page-blocks--doc .pp-docsec--cont:not(:has(.pp-principles)) { padding-top: 0; }
.page-blocks--doc .pp-docsec--cont .pp-split-copy > p:first-child:not(.pp-doc-lead) { margin-top: 1.5rem; }
.page-blocks--doc .pp-docsec p b { color: var(--ink); font-weight: 800; white-space: nowrap; background: linear-gradient(to top, color-mix(in srgb, var(--cta) 45%, transparent) 0, color-mix(in srgb, var(--cta) 45%, transparent) 0) no-repeat left bottom / 0 .42em; transition: background-size var(--dur-base) var(--ease); }
.page-blocks--doc .pp-docsec p b.is-lit { background-size: 100% .42em; }
.page-blocks--doc .pp-docsec .pp-flow-copy > p.pp-doc-lead, .page-blocks--doc .pp-docsec .pp-flow-copy > p.pp-doc-lead.pp-doc-lead--m { max-width: 42rem; }

/* 面板：深色（聲明）與暖米白（實施原則）是圓角面板，外距取代章節的上下內距 */
.page-blocks--doc .pp-docsec--dark, .page-blocks--doc .pp-docsec--warm { margin-block: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(2rem, 5vw, 4rem); border-top: 0; border-radius: var(--radius-xl); }
.page-blocks--doc .pp-docsec--warm { margin-block: clamp(1.5rem, 3vw, 2.5rem) clamp(.5rem, 2vw, 1.5rem); border: 1px solid var(--line); background: var(--warm); }
.page-blocks--doc .pp-docsec--dark { position: relative; isolation: isolate; overflow: hidden; color: var(--paper); background: linear-gradient(135deg, var(--dark-gradient-start), var(--dark-gradient-end)); }
.page-blocks--doc .pp-docsec--dark::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay; background-image: url("../assets/grain.svg"); }
.page-blocks--doc .pp-docsec--dark .pp-head .pp-eyebrow { color: var(--accent-dark); }
.page-blocks--doc .pp-docsec--dark .pp-head .pp-eyebrow::before { background: var(--cta); }
.page-blocks--doc .pp-docsec--dark .pp-head h2 { color: var(--paper); }
.page-blocks--doc .pp-docsec--dark .pp-split-copy > p:not(.pp-doc-lead) { color: var(--muted-on-dark); }
.page-blocks--doc .pp-docsec--dark :focus-visible { outline-color: var(--paper); }
.page-blocks--doc .pp-docsec--warm .pp-flow-grid { align-items: center; }

/* ---------- 動態（漸進增強；policy-doc.js 加上 pp-pre／pp-in） ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="off"]):has(.page-blocks--doc) { scroll-behavior: smooth; }
  html.js:not([data-motion="off"]) .pp-doc-progress { display: block; position: fixed; z-index: 70; inset: 0 0 auto; height: 3px; transform-origin: left; transform: scaleX(var(--pp-doc-p, 0)); background: linear-gradient(90deg, var(--cta), var(--soft)); pointer-events: none; }
  html.js:not([data-motion="off"]) .pp-flow-fig.pp-pre .pp-flow-line { stroke-dashoffset: 1; }
  html.js:not([data-motion="off"]) .pp-flow-fig.pp-pre :is(.pp-flow-node, .pp-flow-tip, .pp-flow-center, .pp-flow-ring) { opacity: 0; }
  html.js:not([data-motion="off"]) .pp-flow-fig.pp-pre.pp-in .pp-flow-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-in-out) .3s; }
  html.js:not([data-motion="off"]) .pp-flow-fig.pp-pre.pp-in :is(.pp-flow-node, .pp-flow-tip, .pp-flow-center, .pp-flow-ring) { opacity: 1; transition: opacity .7s var(--ease-out-expo) .2s; }
  /* 循環：圓點繞行，節點依序亮起（每個節點 2.5 秒，整圈 = 節點數 × 2.5 秒） */
  html.js:not([data-motion="off"]) .pp-flow--cycle.pp-in .pp-flow-orbit { display: block; transform-origin: 230px 230px; animation: pp-flow-orbit var(--pp-flow-dur, 10s) linear 1.2s infinite; }
  html.js:not([data-motion="off"]) .pp-flow--cycle.pp-in .pp-flow-dot { fill: var(--cta); }
  html.js:not([data-motion="off"]) .pp-flow--cycle.pp-in .pp-flow-node { animation-duration: var(--pp-flow-dur, 10s); animation-iteration-count: infinite; animation-timing-function: linear; }
  html.js:not([data-motion="off"]) .pp-flow--cycle.pp-in .pp-flow-node circle { animation: inherit; animation-name: var(--pp-flow-on); animation-delay: calc(var(--n, 0) * 2.5s + .75s); }
  html.js:not([data-motion="off"]) .pp-flow--cycle.pp-in .pp-flow-node :is(.pp-flow-zh, .pp-flow-en) { animation: inherit; animation-name: var(--pp-flow-on-text); animation-delay: calc(var(--n, 0) * 2.5s + .75s); }
  html.js:not([data-motion="off"]) .pp-flow--cycle.pp-in .pp-flow-node[data-i="0"] { --n: 0; }
  html.js:not([data-motion="off"]) .pp-flow--cycle.pp-in .pp-flow-node[data-i="1"] { --n: 1; }
  html.js:not([data-motion="off"]) .pp-flow--cycle.pp-in .pp-flow-node[data-i="2"] { --n: 2; }
  html.js:not([data-motion="off"]) .pp-flow--cycle.pp-in .pp-flow-node[data-i="3"] { --n: 3; }
  html.js:not([data-motion="off"]) .pp-flow--cycle.pp-in .pp-flow-node[data-i="4"] { --n: 4; }
  html.js:not([data-motion="off"]) .pp-flow--cycle.pp-in .pp-flow-node[data-i="5"] { --n: 5; }
  @keyframes pp-flow-orbit { to { transform: rotate(360deg); } }
  html.js:not([data-motion="off"]) .pp-flow--n3.pp-in { --pp-flow-dur: 7.5s; --pp-flow-on: pp-flow-on-3; --pp-flow-on-text: pp-flow-text-3; }
  @keyframes pp-flow-on-3 { 0% { fill: var(--paper); } 4% { fill: var(--action); } 29.33% { fill: var(--action); } 36%, 100% { fill: var(--paper); } }
  @keyframes pp-flow-text-3 { 0% { fill: var(--ink); } 4% { fill: var(--paper); } 29.33% { fill: var(--paper); } 36%, 100% { fill: var(--ink); } }
  html.js:not([data-motion="off"]) .pp-flow--n4.pp-in { --pp-flow-dur: 10s; --pp-flow-on: pp-flow-on-4; --pp-flow-on-text: pp-flow-text-4; }
  @keyframes pp-flow-on-4 { 0% { fill: var(--paper); } 3% { fill: var(--action); } 22% { fill: var(--action); } 27%, 100% { fill: var(--paper); } }
  @keyframes pp-flow-text-4 { 0% { fill: var(--ink); } 3% { fill: var(--paper); } 22% { fill: var(--paper); } 27%, 100% { fill: var(--ink); } }
  html.js:not([data-motion="off"]) .pp-flow--n5.pp-in { --pp-flow-dur: 12.5s; --pp-flow-on: pp-flow-on-5; --pp-flow-on-text: pp-flow-text-5; }
  @keyframes pp-flow-on-5 { 0% { fill: var(--paper); } 2.4% { fill: var(--action); } 17.6% { fill: var(--action); } 21.6%, 100% { fill: var(--paper); } }
  @keyframes pp-flow-text-5 { 0% { fill: var(--ink); } 2.4% { fill: var(--paper); } 17.6% { fill: var(--paper); } 21.6%, 100% { fill: var(--ink); } }
  html.js:not([data-motion="off"]) .pp-flow--n6.pp-in { --pp-flow-dur: 15s; --pp-flow-on: pp-flow-on-6; --pp-flow-on-text: pp-flow-text-6; }
  @keyframes pp-flow-on-6 { 0% { fill: var(--paper); } 2% { fill: var(--action); } 14.67% { fill: var(--action); } 18%, 100% { fill: var(--paper); } }
  @keyframes pp-flow-text-6 { 0% { fill: var(--ink); } 2% { fill: var(--paper); } 14.67% { fill: var(--paper); } 18%, 100% { fill: var(--ink); } }
}