/* 設計語言 v1 共用元件（2026-10-23 用戶批樣板「新設計」；DESIGN.md「10-23 補」）—— 先用喺強積金／投連資料庫基金詳情，驗證咗先推其他頁。
   ─────────────────────────────────────────────────────────────────────────────
   三級控件（鐵律 1 收窄）：成頁轉模式＝.seg（shell.css，hero 右上）｜同頁轉內容＝.utabs 底線分頁｜改條件／期間＝.mseg 細分段掣。選中一律金色。
   · .utabs        文字＋選中下面 3px 金線，冇底色；撳範圍 44
   · .mseg         灰槽 36px、掣 32px（樣子），撳範圍照 44（::before 畫樣，掣本身透明 44 高 —— iPad 唔准細過 44）
   · button.act    次要動作：淺色掣（淺綠底深綠字＋icon，圓角 10，高 40／撳範圍 44）；hero 入面白 12% 底白字。淨係 button —— shell.css 有 a.act（客戶列）唔准撞
   · button.navlink 導航連結（返回一覽）：純綠字
   · .ibtn／.ipop  ⓘ＋原位說明框：撳開、再撳或 ✕ 收；全頁同一時間一個（ui-kit.js 管）
   · .lrow         可撳列表行：成行撳＋右邊 ›／＋；hover 淺底
   · .rscale       風險級別刻度條（連住，選中嗰格實色）
   · .rrow／.rexp  風險數字行（左標題｜中數值右對齊｜右期間｜›），撳開原位出走勢圖
   色一律 tokens.css；字級 var(--fs-*)；間距 8／12／16／24／32。 */

/* ── ② 區塊分頁：底線 ── */
.utabs{display:flex;gap:28px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.utabs button{position:relative;border:0;background:transparent;padding:0;min-height:44px;font:inherit;font-size:var(--fs-lg);font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap}
.utabs button:hover{color:var(--ink)}
.utabs button.on{color:var(--ink);font-weight:700}
.utabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:2px;background:var(--accent)}
.utabs button.na,.utabs button:disabled{color:var(--faint);cursor:not-allowed}
.utabs button:focus-visible{outline:2px solid var(--brand-green);outline-offset:2px}

/* ── ③ 條件選項：細分段掣（灰槽 36／掣 32 係樣；撳範圍 44） ── */
.mseg{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 2px;flex:none;isolation:isolate}
.mseg::before{content:"";position:absolute;left:0;right:0;top:4px;bottom:4px;background:var(--mseg-trough,#EEEFEC);border-radius:var(--r-md);z-index:-1}
.mseg button{position:relative;border:0;background:transparent;height:44px;padding:0 12px;font:inherit;font-size:var(--fs-sm);font-weight:500;color:var(--ink2);cursor:pointer;white-space:nowrap}
.mseg button::before{content:"";position:absolute;left:0;right:0;top:6px;bottom:6px;border-radius:8px;z-index:-1;background:transparent}
.mseg button:hover::before{background:var(--neutral-soft)}
.mseg button.on{color:var(--accent-ink);font-weight:700}
.mseg button.on::before{background:var(--accent)}
.mseg button .m{font-family:var(--mono);font-weight:500;margin-left:4px;color:var(--muted);font-size:var(--fs-xs)}
.mseg button.on .m{color:var(--accent-ink);opacity:.75}
.mseg button.na{opacity:.38;cursor:not-allowed}
.mseg button.na:hover::before{background:transparent}
.mseg button:focus-visible{outline:2px solid var(--brand-green);outline-offset:-4px;border-radius:8px}
/* 深底 hero 入面（模擬器條件：組合類型、期間、供款方式、性別…）：灰槽改白 12%、字白，選中照金色 */
.hero .mseg::before{background:rgba(255,255,255,.12)}
.hero .mseg button{color:rgba(255,255,255,.86)}
.hero .mseg button:hover::before{background:rgba(255,255,255,.1)}
.hero .mseg button.on{color:var(--accent-ink)}
.hero .mseg button.on:hover::before,.mseg button.on:hover::before{background:var(--accent)}
.mseg-since{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}

/* ── ⑤ 次要動作：淺色掣（Apple tinted；10-23 用戶指「＋ 加基金」似純文字唔似掣，#411 #413）──
   淺綠底＋深綠字＋icon、圓角 10、冇邊框、高 40（樣）／撳範圍 44（上下 2px 透明邊＋background-clip，邊唔見）；深底 hero 入面白 12% 底白字。
   全站 .act 一種樣；「返回一覽」呢類導航連結唔係動作 → button.navlink（純綠字）。 */
button.act{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;height:44px;padding:0 14px;border:2px solid transparent;border-left-width:0;border-right-width:0;background:rgba(0,112,60,.10);background-clip:padding-box;border-radius:10px / 12px;color:var(--brand-green-deep);font:inherit;font-weight:700;font-size:var(--fs-md);cursor:pointer;white-space:nowrap;position:relative}
button.act svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
button.act:hover{background-color:rgba(0,112,60,.16)}
button.act.on{background-color:rgba(0,112,60,.06);color:var(--ink2)}
button.act:disabled{background-color:var(--neutral-soft);color:var(--faint);cursor:not-allowed}
button.act sup{font-family:var(--mono);font-size:var(--fs-xs);font-weight:600;line-height:1;margin-left:-2px;align-self:flex-start;margin-top:9px;opacity:.85}
.hero button.act{background-color:rgba(255,255,255,.12);color:#fff}
.hero button.act:hover{background-color:rgba(255,255,255,.2)}
/* 導航連結（返回一覽）：純綠字＋icon，冇底 */
button.navlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:transparent;color:var(--link);font:inherit;font-weight:700;font-size:var(--fs-md);cursor:pointer;white-space:nowrap}
button.navlink svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
button.navlink:hover{color:var(--brand-deep)}
button.act:focus-visible,button.navlink:focus-visible,.ibtn:focus-visible,.lrow:focus-visible,.rrow:focus-visible{outline:2px solid var(--brand-green);outline-offset:2px}

/* ── 輔助說明：ⓘ＋原位說明框 ── */
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-14px -14px -14px -10px;border:0;background:transparent;color:var(--muted);cursor:pointer;flex:none;padding:0;vertical-align:middle}
.ibtn svg{width:16px;height:16px;stroke:currentColor;fill:none}
.ibtn:hover,.ibtn[aria-expanded="true"]{color:var(--link)}
.hero .ibtn{color:rgba(255,255,255,.55)}
.hero .ibtn:hover,.hero .ibtn[aria-expanded="true"]{color:#fff}
.ipop{position:relative;background:#EEF2EC;color:var(--ink);font-size:var(--fs-sm);line-height:1.6;font-weight:400;border-radius:var(--r-md);padding:10px 44px 10px 12px;margin:8px 0;max-width:600px;white-space:normal;text-align:left;font-family:var(--sans)}
.ipop[hidden]{display:none}
.ipop .x{position:absolute;right:0;top:0;width:44px;height:44px;border:0;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.ipop .x svg{width:14px;height:14px;stroke:currentColor;fill:none}
.ipop .x:hover{color:var(--ink)}
/* 標題＋ⓘ一行（小標題） */
.hd3{display:flex;align-items:center;gap:8px;min-height:28px;flex-wrap:wrap}
.hd3 h3,.hd3 h4{margin:0}
.hd3 h3{font-size:17px;font-weight:700}
.hd3 h4{font-size:var(--fs-md);font-weight:700}
.hd3 small{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.hd3 .pill.cur{color:var(--brand-gold-deep);background:var(--accent-soft)}

/* ── ⑥ 可撳嘅行 ── */
.lrow{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 8px;border:0;border-bottom:1px solid var(--line2);background:transparent;text-align:left;cursor:pointer;border-radius:0;font:inherit;color:var(--ink)}
.lrow:last-child{border-bottom:0}
.lrow:hover{background:var(--card2)}
.lrow .nm{flex:1 1 auto;min-width:0;font-size:var(--fs-md);font-weight:500;line-height:1.3}
.lrow .nm small{display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:400}
.lrow .r{font-family:var(--mono);font-size:var(--fs-sm)}
.lrow .plus{color:var(--link);width:28px;display:flex;justify-content:center;flex:none}
.lrow .plus svg,.lrow .chev svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lrow .chev{color:var(--faint);display:flex;flex:none}

/* ── ⑦ 風險級別：一條連住嘅刻度（hero 深底） ── */
.rscale{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-xs);color:rgba(255,255,255,.62)}
.rscale .track{display:flex;width:168px;height:8px;border-radius:999px;overflow:hidden;gap:1px;background:rgba(255,255,255,.06)}
.rscale .track i{flex:1;background:rgba(255,255,255,.16)}
.rscale .track i.on{background:var(--brand-gold)}
.rscale .n{font-family:var(--mono);color:#fff;font-size:var(--fs-sm)}
.rscale .n small{color:rgba(255,255,255,.5);font-size:var(--fs-xs)}

/* ── 並列數字：列表行（左標題｜中數值右對齊｜右期間｜›） ── */
.rlist{margin:0}
.rrow{display:grid;grid-template-columns:minmax(0,1fr) 128px 196px 20px;align-items:center;column-gap:24px;min-height:56px;border:0;border-bottom:1px solid var(--line2);padding:0 4px 0 8px;width:100%;background:transparent;text-align:left;cursor:pointer;border-radius:0;font:inherit;color:var(--ink)}
div.rrow{cursor:default;grid-template-columns:minmax(0,1fr) 128px 196px 20px}
button.rrow:hover,.rrow[aria-expanded="true"]{background:var(--card2)}
.rrow .cv{color:var(--faint);display:flex;justify-content:center;transition:transform .15s}
.rrow .cv svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}
.rrow[aria-expanded="true"] .cv{transform:rotate(90deg);color:var(--ink2)}
.rrow .t{font-size:var(--fs-md);color:var(--ink);line-height:1.35}
.rrow .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:17px;font-weight:500;text-align:right;white-space:nowrap}
.rrow .p{font-size:var(--fs-xs);color:var(--muted);text-align:right;white-space:nowrap}
/* 「從未試過連續 12 個月蝕錢」：數值欄闊啲（由標題欄攞位，右邊緣同其他行一樣） */
.rrow.nv,div.rrow.nv{grid-template-columns:minmax(0,1fr) 230px 196px 20px}
.rrow .v.never{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;color:var(--ok);white-space:normal;line-height:1.3;padding:6px 0}
.rrow .v.never small{display:block;font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;color:var(--muted)}
.rexp{border-bottom:1px solid var(--line2);padding:4px 0 8px}
.rlist>:last-child{border-bottom:0}
@media (max-width:760px){.rrow,div.rrow,.rrow.nv,div.rrow.nv{grid-template-columns:minmax(0,1fr) auto 20px;column-gap:12px}.rrow .p{grid-column:1/2;grid-row:2;text-align:left;padding-bottom:6px}.rrow .cv{grid-row:1/3;grid-column:3}}

@media (prefers-reduced-motion:no-preference){.mseg button::before,.utabs button::after{transition:background .15s}}

/* 「由高位最多跌咗幾多」走勢圖標記（UIKit.ddMarks；詳情頁風險行＋組合模擬器同一份，10-23 用戶） */
svg .fd-band{fill:var(--accent-soft)}
svg .rk-pt{fill:#fff;stroke:var(--brand-gold-deep);stroke-width:2}
svg .rk-pc{font-size:15px;font-weight:600;font-family:var(--mono);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
svg .rk-pc.neg{fill:var(--bad)}
svg .rk-pc.pos{fill:var(--ok)}
svg .rk-lb{font-size:var(--fs-xs);font-family:var(--mono);fill:var(--ink2);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}

/* ── 圖例清單（UIKit.legend；10-24 用戶：RADAR 往績圖例同基金比較頁同一個元件）——
   一行一條線：色點｜名＋pill＋名次格／計劃名｜大字賺幾多（條線嘅色 --c）＋細字｜由高位最多跌細掣｜✕。冇框；欄線逐行對齊（JS 統一鎖數字闊度）。 */
.uk-leg{display:flex;flex-direction:column;container-type:inline-size;container-name:ukleg}
.uk-leg .lg{display:grid;grid-template-columns:10px minmax(180px,300px) minmax(0,1fr) 44px;align-items:center;column-gap:var(--sp-3);min-height:52px;border-bottom:1px solid var(--line2)}
.uk-leg.has-dd .lg{grid-template-columns:10px minmax(180px,300px) minmax(0,1fr) var(--uk-ddw,auto) 44px}
.uk-leg .lg>.dot{width:10px;height:10px;border-radius:50%;background:var(--c)}
.uk-leg .lg>.dot.dash{width:12px;height:0;border-radius:0;background:transparent;border-top:2px dashed var(--c)}   /* 計劃平均＝虛線：畫一段短虛線（同圖條線一樣），唔畫虛線圈 */
.uk-leg .lg .nm{min-width:0;line-height:1.3}
.uk-leg .lg .n1{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.uk-leg .lg .n1 b{font-size:var(--fs-md);font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.uk-leg .lg .n1 .pill{flex:none;font-size:var(--fs-xs);color:var(--ink2);background:var(--neutral-soft);padding:0 8px;line-height:18px}
.uk-leg .lg .rkn{flex:none;display:inline-block;min-width:3.2em;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}   /* #415：固定闊度，冇名次 visibility 收埋，唔撐開 */
.uk-leg .lg .nm small{display:block;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uk-leg .lg .fig{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.uk-leg.has-dd .lg .fig{flex-direction:column;align-items:flex-start;gap:0;flex-wrap:nowrap;padding:4px 0}   /* 有跌幅欄：大字上、細字下（每行一樣，欄線對齊；唔會闊窄位一時一行一時兩行） */
.uk-leg.has-dd .lg .v{line-height:1.15}
.uk-leg .lg .v,.uk-leg .lg .s .n,.uk-leg .lg .dv{display:inline-block;font-variant-numeric:tabular-nums;white-space:nowrap}   /* #415：會變嘅數預留最長值闊度（JS 量真 px，所有行一樣） */
.uk-leg .lg .v{font-family:var(--mono);font-size:22px;font-weight:500;letter-spacing:-.01em;color:var(--c)}
.uk-leg .lg .s{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink2);white-space:nowrap;min-width:0}
.uk-leg .lg .s span{font-family:var(--sans);color:var(--muted)}
.uk-leg .lg .s span.n{font-family:var(--mono);color:var(--ink2)}
.uk-leg .lg .s span.n.pos{color:var(--ok)}.uk-leg .lg .s span.n.neg{color:var(--bad)}
.uk-leg .lg .s .xv.lt{font-family:var(--sans);color:var(--muted)}
.uk-leg .lg .na{font-size:var(--fs-xs);color:var(--warn)}
.uk-leg .lg .x{width:44px;height:44px;border:0;background:transparent;color:var(--faint);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.uk-leg .lg .x svg{width:14px;height:14px}
.uk-leg .lg .x:hover{color:var(--bad)}
/* 「由高位最多跌」細掣：撳＝走勢圖轉塗呢條線嘅回撤段（一次一條）；選中＝條線嘅色淺底＋色字（大細唔變，#415） */
.uk-leg .ddb{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;min-height:44px;height:44px;padding:0 10px;border:4px solid transparent;border-left-width:0;border-right-width:0;background:rgba(0,0,0,.045);background-clip:padding-box;border-radius:10px / 14px;font:inherit;font-size:var(--fs-xs);color:var(--muted);cursor:pointer;white-space:nowrap;box-sizing:border-box;width:var(--uk-ddw,auto)}
.uk-leg .ddb .dv{font-family:var(--mono);font-size:var(--fs-sm);font-weight:500;color:var(--ink2);text-align:right}
.uk-leg .ddb .dv.neg{color:var(--bad)}
.uk-leg .ddb:hover{background-color:rgba(0,0,0,.08)}
.uk-leg .ddb.on{background-color:color-mix(in srgb,var(--c) 16%,transparent);color:var(--ink)}
.uk-leg .ddb.on .dv{color:var(--c);font-weight:700}
.uk-leg .ddb:focus-visible{outline:2px solid var(--brand-green);outline-offset:2px}
.uk-leg .ddb.ph{background:transparent;cursor:default}
/* 窄位：名一行（右邊跌幅掣＋✕）、數字一行（全闊）。有跌幅欄要多位 → 800 以下就轉（iPad 820 直放英文：細字唔准撞跌幅掣） */
@container ukleg (max-width:800px){
  .uk-leg.has-dd .lg{grid-template-columns:10px minmax(0,1fr) auto 44px;row-gap:2px;padding:6px 0}
  .uk-leg.has-dd .lg .fig{grid-column:2/4;grid-row:2;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:2px 10px;padding:0}
  .uk-leg.has-dd .lg .ddb{grid-column:3;grid-row:1}
  .uk-leg.has-dd .lg>.x,.uk-leg.has-dd .lg>span:last-child{grid-column:4;grid-row:1/3}
}
@container ukleg (max-width:700px){
  .uk-leg:not(.has-dd) .lg{grid-template-columns:10px minmax(0,1fr) 44px;row-gap:2px;padding:6px 0}
  .uk-leg:not(.has-dd) .lg .fig{grid-column:2/3;grid-row:2}
  .uk-leg:not(.has-dd) .lg>.x,.uk-leg:not(.has-dd) .lg>span:last-child{grid-column:3;grid-row:1/3}
}
svg .lt-start{fill:#fff;stroke-width:2}   /* 遲上架比較線起點（UIKit.startDot） */
.uk-leg .lg .nm small .since{color:var(--ink2)}