/*
 * 2026-10-02（issue 176 第二階段）情境群：總覽的篩選牆與情境頁的風險警示卡、控制框架節點圖、AI／API 鏈。
 * 沿用 inner.css 的語彙與 design-tokens.css 的 token，不出現色碼；規則用 #main.inner-main 加頁型屬性蓋過 inner.css。
 * 動態：靜態樣式永遠有效；位移、掃描與依序點亮只在 prefers-reduced-motion: no-preference 且 html.js:not([data-motion="off"]) 之內，
 * 沒有 JS 或動態關閉時，節點全部亮著、警示卡不掃描。
 */
@property --sx-p { syntax: "<number>"; inherits: true; initial-value: 1; }

#main.inner-main {
  /* ================= 情境總覽：篩選牆 ================= */
  .catalog-content[data-page-kind="solutionOverviewPage"] {
    .scenario-filter { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
    .scenario-chip { min-height: 2.75rem; padding: .5rem 1.375rem; border: 1px solid var(--field-border); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); }
    .scenario-chip:hover { border-color: var(--ink); }
    .scenario-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
    .scenario-chip:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
    .scenario-count { margin: 0 0 0 auto; color: var(--muted); font-size: .875rem; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
    .directory-empty { padding: 2.5rem; border: 1px dashed var(--field-border); border-radius: var(--r-card); color: var(--muted); }

    .tile-grid.scenario-grid { --gap: 1rem; padding: 0; list-style: none; }
    .tile-grid.scenario-grid > li { --mx: 50%; --my: 0%; position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 17rem; overflow: hidden; padding: clamp(1.5rem, 2.4vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }
    .tile-grid.scenario-grid > li::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; background: radial-gradient(22rem circle at var(--mx) var(--my), color-mix(in srgb, var(--cta) 38%, transparent), transparent 65%); transition: opacity .5s var(--ease); }
    .tile-grid.scenario-grid > li:is(:hover, :focus-within) { border-color: var(--deep-line); background: var(--deeper); }
    .tile-grid.scenario-grid > li:is(:hover, :focus-within)::after { opacity: 1; }
    .tile-grid.scenario-grid > li h2 a, .tile-grid.scenario-grid > li h3 a { color: inherit; text-decoration: none; }
    .tile-grid.scenario-grid > li h2 a::after, .tile-grid.scenario-grid > li h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
    .tile-grid.scenario-grid > li :is(h2, h3) { margin: 0 0 .75rem; }
    .tile-grid.scenario-grid > li > p:not(.eyebrow) { color: var(--muted); }
    .tile-grid.scenario-grid > li:is(:hover, :focus-within) > p:not(.eyebrow) { color: var(--muted-on-dark); }
    .tile-grid.scenario-grid > li .eyebrow { margin-bottom: 1rem; }
    .tile-grid.scenario-grid > li :focus-visible { outline: 0; }
    .tile-grid.scenario-grid > li:has(a:focus-visible) { outline: 3px solid var(--action); outline-offset: 3px; }
  }

  /* ================= 情境頁 ================= */
  .catalog-content[data-page-kind="solutionPage"] {
    /* ---- 風險訊號：警示卡 ---- */
    .signal-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.875rem, 1.6vw, 1.25rem); padding: 0; list-style: none; }
    .signal-cards > li { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 1.25rem; min-height: 9.5rem; padding: clamp(1.5rem, 2.4vw, 2rem) clamp(1.5rem, 2.4vw, 2rem) clamp(1.5rem, 2.4vw, 2rem) clamp(1.75rem, 2.8vw, 2.5rem); border: 1px solid var(--line); border-left: .375rem solid var(--notice-accent); border-radius: var(--r-card); background: var(--surface-sunken); transition: background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); }
    .signal-cards > li::after { content: ""; position: absolute; left: 0; right: 0; top: -40%; z-index: -1; height: 40%; opacity: 0; pointer-events: none; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--notice-accent) 22%, transparent) 70%, color-mix(in srgb, var(--notice-accent) 55%, transparent) 99%, transparent); }
    .signal-cards > li > p { margin: 0; color: var(--ink); font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); font-weight: 600; line-height: 1.65; }
    .signal-cards > li:is(:hover, :focus-within) { border-color: var(--notice-accent); background: var(--notice-bg); box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--notice-accent) 18%, transparent); }

    /* ---- 控制框架與 AI／API 鏈：深色節點圖 ---- */
    .solution-framework, .solution-chain { position: relative; isolation: isolate; color: var(--paper); }
    .solution-framework::before, .solution-chain::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); border-radius: var(--r-top) var(--r-top) 0 0; background: radial-gradient(60rem 28rem at 88% 0, color-mix(in srgb, var(--cta) 16%, transparent), transparent 70%), var(--deeper); }
    /* issue 189（B6）：控制框架後面緊接 AI／API 鏈時，兩段是同一條深色帶——同底色、不再用不同底色的圓角往上疊（接縫像階梯），
       中間只留一條細分隔線；內距與其他深色帶一致（上下各 var(--sec)）。 */
    .solution-framework + .solution-chain::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--deep-line); }
    .solution-framework + .solution-chain::before { border-radius: 0; background: var(--deeper); }
    .solution-framework + .solution-chain .chain > span { background: var(--deep); }
    .solution-framework :is(h2, h3), .solution-chain :is(h2, h3) { color: var(--paper); }
    .solution-framework .eyebrow, .solution-chain .eyebrow { color: var(--soft); }
    .solution-framework :is(.lead, p:not(.eyebrow)), .solution-chain :is(.lead, p:not(.eyebrow)) { color: var(--muted-on-dark); }
    .solution-framework :focus-visible, .solution-chain :focus-visible { outline-color: var(--soft); }

    .framework { --pl: clamp(2.5rem, 6vw, 4.5rem); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 1.8vw, 1.5rem); padding-left: var(--pl); }
    .framework::before { content: ""; position: absolute; top: 2rem; bottom: 2rem; left: calc(var(--pl) / 2 - 1px); width: 2px; border-radius: 1px; background: var(--deep-line); }
    .framework > article { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head body"; column-gap: clamp(1.5rem, 4vw, 4rem); align-items: start; padding: clamp(1.5rem, 2.6vw, 2.25rem); border: 1px solid var(--deep-line); border-radius: var(--r-card); background: var(--deep); transition: border-color .6s var(--ease), background .6s var(--ease), opacity .6s var(--ease), transform .7s var(--ease); }
    .framework > article::before { content: ""; position: absolute; top: calc(clamp(1.5rem, 2.6vw, 2.25rem) + .25rem); left: calc(var(--pl) / -2 - .5625rem - 2px); width: 1.125rem; height: 1.125rem; border: 2px solid var(--soft); border-radius: 50%; background: var(--deeper); transition: background .5s var(--ease), box-shadow .5s var(--ease); }
    .framework > article .eyebrow { grid-area: head; margin: 0 0 .75rem; color: var(--soft); }
    .framework > article h3 { grid-column: 1; margin: 0; color: var(--paper); }
    .framework > article > p:not(.eyebrow) { grid-column: 2; grid-row: 1 / span 2; margin: 0 0 1rem; color: var(--muted-on-dark); }
    .framework > article .text-link { grid-column: 2; color: var(--on-dark-card-link); }
    .framework > article:not(:has(.eyebrow)) h3 { grid-row: 1; }
    /* issue 195：步驟之間的連線逐段畫出——每張卡的線段從自己的節點往下接到下一張卡的節點；最後一張沒有線段。沒有 JS、減少動態、暫停動態時整條都在。 */
    .framework > article:not(:last-child)::after { content: ""; position: absolute; z-index: -1; top: calc(clamp(1.5rem, 2.6vw, 2.25rem) + .9375rem); left: calc(var(--pl) / -2 - 1px); width: 2px; height: calc(100% + clamp(1rem, 1.8vw, 1.5rem)); background: linear-gradient(180deg, var(--soft), var(--cta)); box-shadow: 0 0 .75rem color-mix(in srgb, var(--cta) 60%, transparent); transform-origin: top; transition: transform .9s var(--ease) .15s; }
    .framework > article.is-lit::before, .framework:not(.sx-ready) > article::before { background: var(--cta); box-shadow: 0 0 0 .3125rem color-mix(in srgb, var(--cta) 28%, transparent), 0 0 1.25rem var(--cta); }
    .framework > article:is(:hover, :focus-within) { border-color: var(--soft); }

    .chain { align-items: stretch; gap: 0; margin: 0; padding: 0; border-radius: 0; background: none; }
    .chain > span { position: relative; flex: 1 1 0; min-width: 0; padding: clamp(1.25rem, 2.2vw, 1.75rem); border: 1px solid var(--deep-line); border-radius: var(--r-card); background: var(--deeper); color: var(--paper); font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); font-weight: 800; line-height: 1.35; transition: border-color .6s var(--ease), opacity .6s var(--ease), box-shadow .6s var(--ease), transform .7s var(--ease); }
    .chain > span::before { content: ""; display: block; width: .75rem; height: .75rem; margin-bottom: 1rem; border-radius: 50%; background: var(--cta); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--cta) 28%, transparent); }
    .chain small { display: block; margin-top: .375rem; color: var(--chain-caption); font-size: .8125rem; font-weight: 500; }
    .chain > b { position: relative; flex: 0 0 clamp(2rem, 5vw, 4.5rem); align-self: center; height: 2px; font-size: 0; background: var(--deep-line); }
    .chain > b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--soft), var(--cta)); transform-origin: left; transition: transform .8s var(--ease) .2s; }
    .chain > b::before { content: ""; position: absolute; right: -1px; top: -4px; z-index: 1; width: 8px; height: 8px; border-top: 2px solid var(--soft); border-right: 2px solid var(--soft); rotate: 45deg; }
    .chain.sx-ready > b::after { transform: scaleX(0); }
    .chain.sx-ready > span.is-lit + b::after { transform: scaleX(1); }
    .solution-chain > .small { margin-top: 1.5rem; }

    /* ---- 交付成果 ---- */
    .solution-deliverable .wide-copy { max-width: 36em; margin: 0; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3.5vw, 3rem); border-left: .375rem solid var(--cta); border-radius: 0 var(--r-card) var(--r-card) 0; background: var(--wash); color: var(--ink); font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.6; }

    /* ---- 建議能力 ---- */
    .solution-capabilities .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .solution-capabilities .catalog-card { position: relative; background: var(--paper); transition: border-color .4s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); }
    .solution-capabilities .catalog-card:hover { border-color: var(--action); box-shadow: 0 1.25rem 2.5rem var(--shadow); }
    .solution-capabilities .catalog-card p { color: var(--ink); font-size: 1.0625rem; line-height: 1.75; }

    /* ---- 相關內容（CONNECT／IN CONTEXT） ---- */
    .shared-cards > div { padding: clamp(1.5rem, 2.6vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); transition: border-color .4s var(--ease), transform .5s var(--ease); }
    .shared-cards > div:hover { border-color: var(--action); }
  }

  /* ---------- 動態：只在允許時 ---------- */
  @media (prefers-reduced-motion: no-preference) {
    html.js:not([data-motion="off"]) & {
      .catalog-content[data-page-kind="solutionPage"] {
        /* 步驟卡由連線那一側（左）輕輕滑入——初始位移只往左或往下，絕不往右推（會讓載入當下水平溢出）。 */
        .framework.sx-ready > article:not(.is-lit) { opacity: .55; transform: translateX(-1rem); border-color: transparent; }
        .framework.sx-ready > article:not(.is-lit)::after { transform: scaleY(0); }
        .framework > article.is-lit::before { animation: sx-node 1.6s ease-out 1; }
        .chain.sx-ready > span:not(.is-lit) { opacity: .4; transform: translateY(.75rem); }
        .chain.sx-ready > span.is-lit { box-shadow: 0 0 0 1px var(--soft), 0 0 2rem color-mix(in srgb, var(--cta) 30%, transparent); border-color: var(--soft); }
        .signal-cards > li:is(:hover, :focus-within)::after { opacity: 1; animation: sx-scan 1.1s var(--ease-in-out) 1 forwards; }
      }
    }
  }
}
@keyframes sx-scan { from { top: -40%; } to { top: 100%; } }
@keyframes sx-node { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cta) 70%, transparent), 0 0 1.25rem var(--cta); } 100% { box-shadow: 0 0 0 1.25rem transparent, 0 0 1.25rem var(--cta); } }

@media (max-width: 61.25rem) {
  #main.inner-main .catalog-content[data-page-kind="solutionPage"] .solution-capabilities .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.5rem) {
  #main.inner-main .catalog-content[data-page-kind="solutionPage"] {
    .signal-cards { grid-template-columns: 1fr; }
    .solution-capabilities .catalog-grid { grid-template-columns: 1fr; }
    .framework > article { display: block; }
    .chain { flex-direction: column; align-items: stretch; padding-left: 1.5rem; }
    .chain > b { flex: 0 0 2rem; align-self: flex-start; width: 2px; height: 2rem; margin-left: 1.25rem; transform: none; }
    .chain > b::after { transform-origin: top; }
    .chain.sx-ready > b::after { transform: scaleY(0); }
    .chain.sx-ready > span.is-lit + b::after { transform: scaleY(1); }
    .chain > b::before { top: auto; bottom: -1px; right: -4px; rotate: 135deg; }
  }
  #main.inner-main .catalog-content[data-page-kind="solutionOverviewPage"] .tile-grid.scenario-grid > li { min-height: 0; }
  #main.inner-main .catalog-content[data-page-kind="solutionOverviewPage"] .scenario-count { flex-basis: 100%; margin: .25rem 0 0; }
}