/* ============================================================================
   開陽 Kaiyang · 樣式層
   ----------------------------------------------------------------------------
   全部 scope 在 [data-theme="kaiyang"] 之下，不外漏到 /app 其他畫面
   （luxe-kit 規則 10：全域只有 token，元件一律 scope）。

   顏色：本檔**不定義任何 hex**。開陽引入的新顏色數＝0。
   設計稿原本自帶一組色票（墨 #17140E / 金 #A87B2A / 硃 #A6432A / 紙 #F7F3EA），
   與 luxe-kit 的骨架色接近但不相同 —— 而 kit 明文寫著「紙與墨不動，那是這套
   語言的骨架」、「alert 只給超標與破壞性操作」。兩份色票並存的結果是同一個 App
   裡有兩種墨、兩種紙，使用者在頁面之間切換時會看到底色跳動。故一律指回 kit token：
     設計稿 --ink      → var(--ink)
     設計稿 --paper    → var(--paper)
     設計稿 --gold     → var(--metal)   （/app 現值，同一 App 只有一種金）
     設計稿 --verm     → var(--alert)   （反證與失效，用途與 kit 的 alert 一致）
     設計稿 --hairline → var(--hair)    （透明度式，疊在任何底上都成立）

   狀態不靠顏色堆疊，靠線型：正典＝實線墨、未熟＝金虛線、輔星草稿＝灰虛線。
   ========================================================================== */

[data-theme="kaiyang"]{
  /* 語意別名 —— 全部指回 kit token，這裡不產生新顏色 */
  --ky-gold: var(--metal);
  --ky-verm: var(--alert);
  --ky-gold-wash: rgba(216,178,92,.14);   /* metal 的淡洗，只當底不當字 */
  --ky-verm-wash: var(--alert-wash);
}

/* ---- 聲音規則：襯線＝人親手寫的話，黑體＝系統，數字＝Latin tabular ----
   設計稿的等寬是 IBM Plex Mono；kit 規定「數字一律 Latin ＋ tabular」，
   為了一個模組多載一支字體會讓四個 App 的數字長得不一樣，故沿用 kit 的 --latin。 */
[data-theme="kaiyang"] .ky-human{font-family:var(--serif-tc);line-height:1.95}
[data-theme="kaiyang"] .ky-reason{font-family:var(--serif-tc);font-style:italic;color:var(--ink-60);line-height:1.8}
[data-theme="kaiyang"] .ky-num{font-family:var(--latin);font-variant-numeric:tabular-nums}

/* ---- 指標帶 ---- */
[data-theme="kaiyang"] .ky-metrics{
  display:grid;grid-template-columns:repeat(6,1fr);
  border:1px solid var(--hair);border-radius:22px;overflow:clip;background:var(--paper)
}
[data-theme="kaiyang"] .ky-metric{padding:16px 18px;border-left:1px solid var(--hair)}
[data-theme="kaiyang"] .ky-metric:first-child{border-left:none}
[data-theme="kaiyang"] .ky-metric .lb{font-size:var(--fs-caps);color:var(--ink-60);letter-spacing:var(--tk-caps)}
[data-theme="kaiyang"] .ky-metric .v{font-family:var(--latin);font-variant-numeric:tabular-nums;
  font-size:var(--fs-2xl);font-weight:300;margin-top:4px;line-height:1.2}
[data-theme="kaiyang"] .ky-metric .v em{font-style:normal;font-size:var(--fs-sm);color:var(--ink-40)}
[data-theme="kaiyang"] .ky-metric .g{font-size:var(--fs-caps);color:var(--ink-40);margin-top:2px}
/* 一頁一個金色時刻：跨域邊佔比是「第二大腦的體徵」，金只給它 */
[data-theme="kaiyang"] .ky-metric.gold .v{color:var(--ky-gold)}

/* ---- 清單列 ---- */
[data-theme="kaiyang"] .ky-rows{border:1px solid var(--hair);border-radius:22px;overflow:clip}
[data-theme="kaiyang"] .ky-row{
  display:flex;align-items:center;gap:14px;padding:15px 18px;
  border-top:1px solid var(--hair);cursor:pointer;background:none;width:100%;text-align:left;
  transition:background var(--t-fast,.3s) var(--ease)
}
[data-theme="kaiyang"] .ky-row:first-child{border-top:none}
[data-theme="kaiyang"] .ky-row:hover{background:var(--paper-2)}
[data-theme="kaiyang"] .ky-row .bd{flex:1;min-width:0}
/* 標題與說明各自成行——兩者都是 span，不宣告 block 就會黏成一句話讀不開。 */
[data-theme="kaiyang"] .ky-row .ti{display:block;font-size:var(--fs-base);line-height:1.5}
[data-theme="kaiyang"] .ky-row .why{display:block;font-size:var(--fs-xs);color:var(--ink-60);margin-top:3px;line-height:1.6}
[data-theme="kaiyang"] .ky-row .mt{font-family:var(--latin);font-variant-numeric:tabular-nums;
  font-size:var(--fs-caps);color:var(--ink-40);white-space:nowrap}
[data-theme="kaiyang"] .ky-grouphead{
  padding:11px 18px;border-top:1px solid var(--hair);
  font-size:var(--fs-caps);letter-spacing:var(--tk-caps);color:var(--ink-60)
}
[data-theme="kaiyang"] .ky-grouphead:first-child{border-top:none}
[data-theme="kaiyang"] .ky-grouphead.gold{background:var(--ky-gold-wash);color:var(--ink)}
[data-theme="kaiyang"] .ky-grouphead.verm{background:var(--ky-verm-wash);color:var(--ky-verm)}

/* ---- 型別徽章與狀態（狀態靠線型，不靠色塊）---- */
[data-theme="kaiyang"] .ky-chip{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  font-size:var(--fs-caps);letter-spacing:var(--tk-label);text-indent:var(--tk-label);
  border:1px solid var(--hair);border-radius:999px;padding:3px 11px;color:var(--ink-60)
}
[data-theme="kaiyang"] .ky-chip.mech{background:var(--ky-gold-wash);border-color:transparent;color:var(--ink)}
[data-theme="kaiyang"] .ky-chip.claim{border-color:var(--ink);color:var(--ink)}
[data-theme="kaiyang"] .ky-chip.question{border-style:dashed}
[data-theme="kaiyang"] .ky-chip.rebuts{background:var(--ky-verm-wash);border-color:transparent;color:var(--ky-verm)}
[data-theme="kaiyang"] .ky-st{
  display:inline-flex;flex-shrink:0;font-size:var(--fs-caps);
  letter-spacing:var(--tk-label);text-indent:var(--tk-label);border-radius:999px;padding:3px 11px
}
[data-theme="kaiyang"] .ky-st.canonical{background:var(--ink);color:var(--paper)}
[data-theme="kaiyang"] .ky-st.unripe{border:1px dashed var(--ky-gold);color:var(--ink);background:var(--ky-gold-wash)}
[data-theme="kaiyang"] .ky-st.draft{border:1px dashed var(--ink-40);color:var(--ink-40)}
[data-theme="kaiyang"] .ky-st.archived{border:1px solid var(--hair);color:var(--ink-40)}
/* 費曼三格的缺格指示：有＝墨、缺＝硃刪除線位置。不用勾叉符號（kit 禁裝飾字）。 */
[data-theme="kaiyang"] .ky-slot{font-size:var(--fs-caps);color:var(--ink-40);white-space:nowrap}
[data-theme="kaiyang"] .ky-slot b{color:var(--ink);font-weight:500}
[data-theme="kaiyang"] .ky-slot i{color:var(--ky-verm);font-style:normal;text-decoration:line-through}

/* ---- 卡片頁 ---- */
[data-theme="kaiyang"] .ky-card{border:1px solid var(--hair);border-radius:22px;padding:26px 28px;background:var(--paper)}
[data-theme="kaiyang"] .ky-card.draft{border-style:dashed;border-color:var(--ink-40);opacity:.86}
[data-theme="kaiyang"] .ky-card-top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  padding-bottom:18px;border-bottom:1px solid var(--hair)
}
[data-theme="kaiyang"] .ky-card-top h3{font-family:var(--serif-tc);font-size:var(--fs-2xl);
  font-weight:600;letter-spacing:var(--tk-title);margin:8px 0 0}
[data-theme="kaiyang"] .ky-card-top .sub{font-size:var(--fs-caps);color:var(--ink-40);margin-top:6px}
[data-theme="kaiyang"] .ky-conf{text-align:right;flex-shrink:0}
[data-theme="kaiyang"] .ky-conf .n{font-family:var(--latin);font-variant-numeric:tabular-nums;
  font-size:var(--fs-3xl);font-weight:300;color:var(--ky-gold);line-height:1.1}
[data-theme="kaiyang"] .ky-conf .lb{font-size:var(--fs-caps);color:var(--ink-40);letter-spacing:var(--tk-caps)}

[data-theme="kaiyang"] .ky-feyn{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;
  border-bottom:1px solid var(--hair)}
[data-theme="kaiyang"] .ky-feyn>div{padding:20px 20px 22px;border-left:1px solid var(--hair)}
[data-theme="kaiyang"] .ky-feyn>div:first-child{border-left:none;padding-left:0}
[data-theme="kaiyang"] .ky-feyn .lb{font-size:var(--fs-caps);letter-spacing:var(--tk-caps);
  color:var(--ink-40);margin-bottom:9px}
/* 不成立情境是唯一用硃的地方——它就是「反證與失效」本身 */
[data-theme="kaiyang"] .ky-feyn .bound{background:var(--ky-verm-wash);
  border-left:2px solid var(--ky-verm);border-radius:0 12px 12px 0}
[data-theme="kaiyang"] .ky-feyn .bound .lb{color:var(--ky-verm)}
[data-theme="kaiyang"] .ky-sub{padding:20px 0;border-bottom:1px solid var(--hair)}
[data-theme="kaiyang"] .ky-sub:last-child{border-bottom:none;padding-bottom:0}
[data-theme="kaiyang"] .ky-sub h4{font-size:var(--fs-caps);letter-spacing:var(--tk-caps);
  color:var(--ink-40);margin:0 0 12px;font-weight:400}
[data-theme="kaiyang"] .ky-edge{display:flex;gap:12px;padding:12px 0;
  border-top:1px dashed var(--hair);align-items:flex-start}
[data-theme="kaiyang"] .ky-edge:first-of-type{border-top:none}
[data-theme="kaiyang"] .ky-edge .eb{flex:1;min-width:0}
[data-theme="kaiyang"] .ky-edge .tgt{font-size:var(--fs-sm)}
[data-theme="kaiyang"] .ky-edge .ky-reason{font-size:var(--fs-sm);margin-top:3px;display:block}
[data-theme="kaiyang"] .ky-edge .ky-reason::before{
  content:"理由 — ";font-style:normal;font-family:var(--sans);
  font-size:var(--fs-caps);letter-spacing:var(--tk-caps);color:var(--ink-40)
}
[data-theme="kaiyang"] .ky-ev{margin-top:10px;padding:12px 15px;background:var(--wash,var(--paper-2));
  border-radius:12px;font-size:var(--fs-sm)}
[data-theme="kaiyang"] .ky-ev b{display:block;font-size:var(--fs-caps);letter-spacing:var(--tk-caps);
  color:var(--ink-40);font-weight:400;margin-bottom:4px}

/* ---- S5 星圖 ---- */
[data-theme="kaiyang"] .ky-star-wrap{
  position:relative;height:460px;border:1px solid var(--hair);border-radius:22px;
  overflow:clip;background:var(--paper)
}
[data-theme="kaiyang"] .ky-star-wrap canvas{display:block;width:100%;height:100%}
[data-theme="kaiyang"] .ky-star-tip{
  position:absolute;left:16px;bottom:16px;right:16px;max-width:560px;
  background:var(--glass,var(--paper));backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--hair);border-radius:14px;padding:12px 16px;
  font-size:var(--fs-sm);line-height:1.6;pointer-events:none
}
html[data-view="mobile"] [data-theme="kaiyang"] .ky-star-wrap{height:340px}

/* ---- 信賴度履歷（S7）：帳本要對齊，數字跳動就不是精品 ---- */
[data-theme="kaiyang"] .ky-ledger .ky-led-row{
  display:flex;gap:16px;align-items:baseline;padding:8px 0;
  border-top:1px dashed var(--hair);font-size:var(--fs-sm)
}
[data-theme="kaiyang"] .ky-ledger .ky-led-row:first-child{border-top:none}
[data-theme="kaiyang"] .ky-ledger .d{color:var(--ink-40);width:46px;flex-shrink:0}
[data-theme="kaiyang"] .ky-ledger .t{flex:1;min-width:0}
[data-theme="kaiyang"] .ky-ledger .delta{width:44px;text-align:right;flex-shrink:0;color:var(--ink-60)}
/* 加分走金（值得慶祝的少數），扣分走硃（失效）——這兩個正是 metal 與 alert
   在本模組的合法語意，不是拿顏色當漲跌用。 */
[data-theme="kaiyang"] .ky-ledger .delta.up{color:var(--ky-gold)}
[data-theme="kaiyang"] .ky-ledger .delta.dn{color:var(--ky-verm)}

/* ---- 捕捉 / 連結儀式的表單元素 ---- */
[data-theme="kaiyang"] .ky-seg{display:inline-flex;border:1px solid var(--hair);
  border-radius:999px;overflow:clip;background:var(--paper)}
[data-theme="kaiyang"] .ky-seg button{padding:7px 16px;font-size:var(--fs-sm);color:var(--ink-60);
  min-height:34px;transition:background var(--t-fast,.3s) var(--ease),color var(--t-fast,.3s) var(--ease)}
[data-theme="kaiyang"] .ky-seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
/* 反駁選項選中時走硃——這是 alert 在本模組的合法用途（反證） */
[data-theme="kaiyang"] .ky-seg button[aria-pressed="true"][data-et="rebuts"]{background:var(--ky-verm)}
[data-theme="kaiyang"] .ky-ta{
  width:100%;border:1px solid var(--hair);border-radius:12px;background:var(--paper);
  padding:11px 14px;font-family:var(--serif-tc);font-style:italic;font-size:var(--fs-sm);
  line-height:1.7;color:var(--ink);resize:vertical;min-height:56px;margin-top:9px
}
[data-theme="kaiyang"] .ky-ta:focus{outline:none;border-color:var(--ky-gold)}
[data-theme="kaiyang"] .ky-ta.plain{font-style:normal}
[data-theme="kaiyang"] .ky-hint{font-size:var(--fs-caps);color:var(--ink-40)}
[data-theme="kaiyang"] .ky-hint.warn{color:var(--ky-verm)}
[data-theme="kaiyang"] .ky-src{font-family:var(--latin);font-size:var(--fs-caps);color:var(--ink-40);
  background:var(--paper-2);border-radius:12px;padding:9px 14px;margin-top:10px}

[data-theme="kaiyang"] .ky-cand{padding:14px 0;border-top:1px dashed var(--hair)}
[data-theme="kaiyang"] .ky-cand:first-child{border-top:none}
[data-theme="kaiyang"] .ky-cand-top{display:flex;align-items:center;gap:11px;cursor:pointer;
  width:100%;text-align:left;background:none}
[data-theme="kaiyang"] .ky-cb{width:17px;height:17px;border:1.5px solid var(--ink-40);
  border-radius:5px;flex-shrink:0;display:grid;place-items:center;
  transition:background var(--t-fast,.3s) var(--ease),border-color var(--t-fast,.3s) var(--ease)}
[data-theme="kaiyang"] .ky-cand[aria-selected="true"] .ky-cb{background:var(--ink);border-color:var(--ink)}
[data-theme="kaiyang"] .ky-cand[aria-selected="true"] .ky-cb::after{
  content:"";width:8px;height:4px;border-left:1.5px solid var(--paper);
  border-bottom:1.5px solid var(--paper);transform:rotate(-45deg) translate(1px,-1px)}
[data-theme="kaiyang"] .ky-cand-top .ti{flex:1;min-width:0;font-size:var(--fs-sm)}
[data-theme="kaiyang"] .ky-cand-detail{display:none;margin:10px 0 2px 28px}
[data-theme="kaiyang"] .ky-cand[aria-selected="true"] .ky-cand-detail{display:block}
[data-theme="kaiyang"] .ky-xd{font-size:var(--fs-caps);color:var(--ky-gold);white-space:nowrap}

/* ---- 空狀態：邀請，不是道歉 ---- */
[data-theme="kaiyang"] .ky-empty{padding:30px 4px;text-align:center}
[data-theme="kaiyang"] .ky-empty p{font-family:var(--serif-tc);font-size:var(--fs-base);margin:0 0 6px}
[data-theme="kaiyang"] .ky-empty span{font-size:var(--fs-xs);color:var(--ink-40);line-height:1.8}

/* 手機版型 —— key 在 html[data-view="mobile"]，不是 media query。
   這個 App 的版型切換是 setView() 寫在 <html> 上的屬性（luxe-kit DESIGN-SYSTEM §3：
   「不要用 media query 撐版型」），桌機視窗也可以切成手機版對照。
   初版寫成 @media (max-width:900px)：在 1568px 的桌機切到手機版時完全不觸發，
   六欄指標帶被壓進 375px 的欄寬，每個字直排成一條 —— 畫面直接壞掉。
   同時保留窄視窗的 media query 當保險（真的把瀏覽器縮窄時也該收欄）。 */
html[data-view="mobile"] [data-theme="kaiyang"] .ky-metrics,
[data-theme="kaiyang"] .ky-metrics{grid-template-columns:repeat(6,1fr)}
html[data-view="mobile"] [data-theme="kaiyang"] .ky-metrics{grid-template-columns:repeat(2,1fr)}
html[data-view="mobile"] [data-theme="kaiyang"] .ky-metric{border-top:1px solid var(--hair)}
html[data-view="mobile"] [data-theme="kaiyang"] .ky-metric:nth-child(-n+2){border-top:none}
html[data-view="mobile"] [data-theme="kaiyang"] .ky-metric:nth-child(odd){border-left:none}
html[data-view="mobile"] [data-theme="kaiyang"] .ky-feyn{grid-template-columns:1fr}
html[data-view="mobile"] [data-theme="kaiyang"] .ky-feyn>div{
  border-left:none;border-top:1px solid var(--hair);padding-left:0}
html[data-view="mobile"] [data-theme="kaiyang"] .ky-feyn>div:first-child{border-top:none}
html[data-view="mobile"] [data-theme="kaiyang"] .ky-feyn .bound{padding-left:16px}
html[data-view="mobile"] [data-theme="kaiyang"] .ky-row{flex-wrap:wrap}
html[data-view="mobile"] [data-theme="kaiyang"] .ky-row .mt{width:100%;padding-left:0}

@media (max-width:900px){
  [data-theme="kaiyang"] .ky-metrics{grid-template-columns:repeat(2,1fr)}
  [data-theme="kaiyang"] .ky-metric{border-top:1px solid var(--hair)}
  [data-theme="kaiyang"] .ky-metric:nth-child(-n+2){border-top:none}
  [data-theme="kaiyang"] .ky-metric:nth-child(odd){border-left:none}
  [data-theme="kaiyang"] .ky-feyn{grid-template-columns:1fr}
  [data-theme="kaiyang"] .ky-feyn>div{border-left:none;border-top:1px solid var(--hair);padding-left:0}
  [data-theme="kaiyang"] .ky-feyn>div:first-child{border-top:none}
  [data-theme="kaiyang"] .ky-feyn .bound{padding-left:16px}
}