/*
 * L2.5 擴充層：規範沒有涵蓋的中性色與狀態色
 * ===========================================================================
 * Rating 的 Components/ 裡有 203 個 distinct 色碼、754 處使用，其中只有 16 個
 * 落在規範色階內。本檔的任務是替「規範沒有、但畫面上確實需要」的色值提供
 * **單一、受控、有登記**的落點，讓後續每一頁的色碼替換都有地方可去。
 *
 * ---------------------------------------------------------------------------
 * 本檔只建立變數，不含任何 selector 規則，也沒有任何頁面引用它。
 * 因此上線後視覺變化必須是零——這是本階段（#9）唯一的驗收方式。
 * 頁面的色碼替換屬 backlog，由 #12 產出。
 * ---------------------------------------------------------------------------
 *
 * 三條規則
 *   1. 能對應到規範的值，右值一律寫成 var(--yc-*)，不複製字面值。
 *      規範日後若調整色階，這裡自動跟著動。
 *   2. 不得重新定義任何品牌色（藍／綠／紅／黃）。品牌色只能指向 var(--yc-*)。
 *   3. 規範未涵蓋而必須自訂的值，每一條都要標 `EXT`——這個標記可被 grep 統計，
 *      供日後回報規範維護者「Rating 實際需要而規範缺少的值有哪些」。
 *      統計方式： grep -c "EXT" yc-extensions.css
 *
 * 不採用的規範 token（依 Spec 附錄 B.13 分級）
 *   --yc-color-text-secondary / -tertiary / -muted / -note / -alert、
 *   --yc-color-bg-light 六條皆為 T3（只存在於 Figma，ASPNexV2 從未實作），
 *   依 Spec §2.1 不得直接用。本檔的深色階因此走 EXT 而非指向這些 token。
 *
 * 載入順序：yc-radzen-bridge.css 之後、app.css 之前。見 App.razor。
 */

:root {
  --rating-risk-summary-action-width: 9.5rem; /* EXT: 2026-10-21 widened for the longer "計算評估結果" label; still fits Download in both languages. */
  /* EXT: preserve reviewed button wording. Bootstrap _reboot.scss:418–420; CompanyView.vue:83; user decision 2026-10-19. */
  --rating-button-text-transform: none;

  /* ==== 中性色階 =========================================================
   *
   * 124 個中性色（無彩或藍灰）收斂成 10 階，加上白與黑共 12 條。
   * 其中 8 條指向規範 token，4 條為 EXT。
   *
   * 分階依據是 **WCAG 相對亮度**，切點取在實測分布的視覺斷層，不是等距。
   * 用相對亮度而非 HSL 明度：前者才反映「看起來多深」，也直接決定對比度。
   *
   * 中性／有彩的切分是**語意判定，不是單一數值門檻**。實測兩種數值做法都會
   * 在某一端失效：HSL 飽和度在近白處爆掉（#fbfdff 算出 100%），絕對通道差
   * 在近白處又太小（warn 底色 #fffaeb 只有 20，會被誤收為中性）。
   * 因此改為：無彩、或藍灰（hue 185–255）才算中性；暖色／綠／紅一律歸狀態色。
   *
   * 每階下方列出「原本有哪些色碼會落到這裡」，格式為 色碼x使用次數。
   * 這份清單是 #12 做頁面替換時的對照表。
   */

  /* 白。103 處使用，全站最常見的單一色值。 */
  --rating-neutral-0: var(--yc-color-white);

  /* 近白表面。26 個色碼、80 處。規範在這一帶有 --yc-gray-100(#f4f6f9) 與
     --yc-color-table-stripe(#f7f7f7) 兩個值，取 T1 的 gray-100 為準。
     這一端的收斂是**改善**：亮度 0.90–0.99 之間擠了 26 個肉眼分不出的近白。
     #f8f9fax20 #f8fafcx7 #eff8ffx6 #f9fafbx5 #f0f8ffx4 #eff6ffx4 #fcfcfdx3
     #f4f9fdx3 #f7f7f7x3 #f2f4f7x3 #f4f5f7x3 #f5f7fax2 #eef6fcx2 #f6f8fax2
     #f5f5f5x2 #f8fbfdx1 #f7fbfex1 #f8fcffx1 #fbfdffx1 #fbfcfdx1 #f1f5f9x1
     #f6f7f9x1 #eef8ffx1 #f5fbffx1 #fafafax1 #f0f4ffx1
     注意 #eff8ff 同時是 info 狀態底色（見下方 --rating-status-info-bg）。
     替換時要先判斷它在該處是「表面」還是「資訊底色」，不可一律代換。 */
  --rating-neutral-50: var(--yc-gray-100);

  /* 淺灰表面／表格 hover。11 個色碼、30 處。
     #f1f1f1x10 #f0f0f0x5 #eef1f5x3 #eef2f7x3 #e9f4fbx3 #e9f5fdx1 #e9f0fbx1
     #eeeeeex1 #edf0f2x1 #eef1f4x1 #eef0f8x1 */
  --rating-neutral-100: var(--yc-color-table-hover);

  /* 邊框。21 個色碼、77 處——這是分歧最嚴重的一階，光是 #e2e6ea/#e3e7eb/
     #e4e7ec/#e5e7eb/#e2e7ee 五個就差不到 3 個階調值。
     #dee2e6x13 #d8dee8x12 #e2e6eax8 #e4e7ecx7 #e2e8f0x5 #e5e7ebx5 #e3e7ebx4
     #e2e7eex4 #e0f0ffx3 #e0e0e0x3 #e9ecefx2 #e5e9efx2 #ecececx1 #e9e9e9x1
     #ddddddx1 #dfeaf4x1 #dbe3ecx1 #dfe5ebx1 #d7e2edx1 #dfe6eex1 #d9e1eax1 */
  --rating-neutral-200: var(--yc-color-border);

  /* 較深邊框／停用態。5 個色碼、25 處。
     #d0d5ddx11 #cececex7 #cbd5e1x3 #ccccccx3 #d0d0d0x1 */
  --rating-neutral-300: var(--yc-gray-200);

  /* EXT — 次要文字／icon。規範在相對亮度 0.28–0.55 這一帶**完全空白**
     （gray-200 是 0.63，gray-300 是 0.23，中間跳過一整階）。
     取 #98a2b3：它與本檔 600/800/900 階同屬 codebase 裡使用最密集的那組冷灰，
     排在一起才是連續的色階。另一個候選 #999999 用得更多（13 次）但為純灰，
     夾在冷灰之間會偏黃。兩者相對亮度 0.358 vs 0.319，差異在此階內可忽略。
     #999999x13 #98a2b3x8 #adb5bdx2 #94a3b8x2 */
  --rating-neutral-400: #98a2b3;

  /* 次要文字。3 個色碼、10 處。
     #888888x8 #7f7f7fx1 #7a8699x1 */
  --rating-neutral-500: var(--yc-gray-300);

  /* 內文次要色。7 個色碼、61 處——使用量最大的深色階，且規範的
     --yc-gray-500(#6c757d) 正好落在正中間，是本檔對應度最好的一階。
     #667085x35 #64748bx11 #6c757dx9 #617187x3 #6f7680x1 #6b7280x1 #687385x1 */
  --rating-neutral-600: var(--yc-gray-500);

  /* EXT — 內文。規範最深的中性色是 gray-500（相對亮度 0.174），再往下沒有了，
     但 Rating 從 0.15 一路用到 0（純黑）。此階取 #495057（用得最多）。
     #495057x6 #666666x4 #555555x2 #475569x2 #5f6b78x1 #475467x1 #52657ax1 */
  --rating-neutral-700: #495057;

  /* EXT — 標題。10 個色碼、45 處。取 #344054（20 次，遠多於其他）。
     #344054x20 #343a40x8 #334155x6 #333333x3 #374151x2 #2c3e50x2 #444444x1
     #24364bx1 #2d3748x1 #25364ax1 */
  --rating-neutral-800: #344054;

  /* EXT — 主標題／最深文字。10 個色碼、48 處。
     #243044x14 #212529x13 #111111x7 #0f172ax4 #263238x3 #172033x2 #1f2937x2
     #273236x1 #1f2f42x1 #1e293bx1 */
  --rating-neutral-900: #212529;

  /* 純黑。5 處。多數情況應該用 900 而非純黑（純黑在白底上刺眼），
     但既有用法保留對應點，替換與否由各頁自行判斷。 */
  --rating-neutral-1000: var(--yc-color-black);


  /* ==== 狀態色 ===========================================================
   *
   * **規範一條都沒有。** 四種語意色（primary/success/danger/warning）只給了
   * 實色按鈕用的兩階，沒有 banner／pill 需要的「淺底 + 深字 + 中間邊框」三件組。
   *
   * 下列三組是從 codebase 實際成對出現的用法歸納的，不是新設計：
   * 每組的底／邊框／文字都在同一批元件裡一起出現（多數在 CarbonIntensityPage
   * 的 readiness banner 與 status pill）。
   *
   * 為什麼不指向品牌色：本階段的驗收條件是視覺零變化，而
   * --rating-status-info-text(#175cd3) 與規範 primary(#0170c2) 並不相同。
   * 要不要收斂到品牌色是**頁面層的決定**，屬 #12 的 backlog，不在本檔決定。
   * 這些值全部標 EXT，日後回報規範維護者時就是「Rating 需要而規範缺少」的清單。
   */

  /* warn — 待補資料、資料不足。CarbonIntensityPage 的 Insufficient Data 系列。 */
  --rating-status-warn-bg: #fffaeb;      /* EXT — x8 */
  --rating-status-warn-border: #fedf89;  /* EXT — x7 */
  --rating-status-warn-text: #b54708;    /* EXT — x10 */

  /* info — 提示、說明。 */
  --rating-status-info-bg: #eff8ff;      /* EXT — x6，同時被當近白表面用，見 neutral-50 */
  --rating-status-info-border: #b2ddff;  /* EXT — x4 */
  --rating-status-info-text: #175cd3;    /* EXT — x6 */

  /* ok — 完成、就緒。CarbonIntensityPage 的 Ready 系列。 */
  --rating-status-ok-bg: #ecfdf3;        /* EXT — x2 */
  --rating-status-ok-border: #abefc6;    /* EXT — x1 */
  --rating-status-ok-text: #027a48;      /* EXT — x4 */

  /* error — **刻意不完整。**
     只有文字色 #b42318（x3）是明確成立的用法。底色與邊框沒有穩定的成對證據：
     候選 #fef2f2(x1)、#fff0f0(x1)、#ffc7c7(x1)、#f1c3c3(x1) 各只出現一次，
     分屬不同頁面、不同色系（Tailwind red-50 與手調紅），湊不成一組。
     依 Spec「不臆測尚未定義的樣式規則」，這裡只定義有證據的那一條，
     底色留給 #12 在盤點各頁 error 呈現方式之後補齊。 */
  --rating-status-error-text: #b42318;   /* EXT — x3 */
}

/*
 * ===========================================================================
 * 已盤點但**不在本檔定義**的東西
 *
 * 1. 陰影／遮罩的半透明黑白（18 個 distinct alpha 值）
 *      #000000 的 alpha 有 0.05/0.075/0.08/0.1/0.12/0.15/0.2/0.3/0.5/0.55 十種，
 *      另有 #101828 三種與 #263238 一種，以及 #ffffff 的 0.2/0.8/0.9/0.92。
 *    不定義的理由：規範的 --yc-shadow-navbar/sidebar/popup 三條依 Spec 附錄 B
 *    分級為 T3（只存在於 Figma），不得直接用；而陰影是「一組 box-shadow 配方」
 *    不是單一色值，收斂成色票變數並不能解決問題。屬 #12 的 backlog。
 *
 * 2. 圖表配色（Spec 附錄 D.4）
 *      RatingIt 的 series 藍 #008FFB、標記紅 #E74C3C、甜甜圈四色。
 *    三者互相牽動，需一次處理，屬圖表配色票。
 *
 * 3. 品牌色的既有硬編值
 *      #0170c2 在 ThemePage 就有 21 處字面寫死（與 --yc-color-primary 同值）。
 *    這些是直接改成 var(--yc-color-primary) 即可的零風險替換，但動的是頁面，
 *    不在本票範圍。
 * ===========================================================================
 */

/*
 * ===========================================================================
 * 殼層（sidebar／header）—— Phase 3：YcSidebar／YcHeader 取代 RadzenSidebar／
 * RadzenHeader，重現 ASPNexV2 的側欄與頂列外觀
 * ===========================================================================
 * 規範（yc-design-tokens.css／yc-components.css）沒有殼層專用的尺寸與中性色——
 * 側欄寬度、Header 高度、hover／選中底色都不在規範範圍內。下列值取自兩個來源：
 *   - AdminLTE 4.0.0-beta2 light theme 的 .app-sidebar／.app-header 規則本體
 *     （偏離登記 D-04 明訂不引入 AdminLTE 元件，這裡只借用其像素值供比對，
 *     不載入 AdminLTE 套件本身）
 *   - ASPNexV2 Sidebar.vue 的 <style scoped>（.logo 區塊高）
 * 能對應到規範 token 的（白、黑、邊框）一律指向 var(--yc-*)，其餘標 EXT。
 */

:root {
  /* 側欄展開寬。AdminLTE --lte-sidebar-width。 */
  --rating-shell-sidebar-width: 250px;              /* EXT */

  /* 側欄收合寬（僅圖示）。AdminLTE 收合態。 */
  --rating-shell-sidebar-width-collapsed: 4.6rem;   /* EXT */

  /* Header 高。2026-09-18 由 2.75rem(44px) 改為 3.5625rem(57px)，對齊 ASPNexV2
     **實際跑出來的高度**——不是 Figma 稿，兩者對不上（稿上那塊只有 21px）。
     先前這行寫「AdminLTE .app-header 的 max-height」是錯的：實查
     node_modules/admin-lte/dist/css/adminlte.min.css，.app-header 只有
     z-index/grid-area/max-width/border-bottom，沒有 height 也沒有 max-height。
     高度是內容撐出來的：
       .navbar padding-y 0.5rem×2                = 16px
       最高子元素 .nav-link：16px×1.5 + 0.5rem×2 = 40px
       .app-header border-bottom                 =  1px
                                                   ----
                                                    57px
     我方 .yc-header 是 border-box、邊框算在高度內，所以直接取 57px。
     ASPNexV2 的 Navbar.vue <style> 是空的，整塊吃 Bootstrap 5.3 + AdminLTE 4
     預設值——這個高度是預設的結果，不是對方刻意設計的尺寸。 */
  --rating-shell-header-height: 3.5625rem;          /* EXT */

  /* 工作流列高（專案清單→填報→編輯→查證）。卡片 1px 邊框 + 1rem padding + 步驟 6rem
     + 1rem padding + 1px 邊框 = 130px，再加卡片與內容之間的 0.5rem = 138px = 8.625rem。
     2026-09-14 由 3.45rem 改成這個值：色塊改為對照 ASPNexV2 .small-box 的尺寸
     （實測 102px 高、2.2rem 粗體字），外面再包一張卡片。
     頁面不要直接扣這個，扣 --rating-shell-chrome-height——這列只出現在部分頁面，
     由 MainLayout 的 .yc-shell--with-flow 決定要不要計入。 */
  --rating-shell-flow-height: 8.625rem;             /* EXT */

  /* 側欄 logo 區塊高。ASPNexV2 Sidebar.vue 的 .logo。 */
  --rating-shell-logo-height: 120px;                /* EXT */

  /* 側欄文字。AdminLTE --lte-sidebar-color。 */
  --rating-shell-text: #343a40;                     /* EXT */

  /* 側欄 hover 文字。AdminLTE --lte-sidebar-hover-color。 */
  --rating-shell-hover-text: #212529;               /* EXT */

  /* 側欄 hover 底。AdminLTE --lte-sidebar-hover-bg。 */
  --rating-shell-hover-bg: rgba(0, 0, 0, 0.1);      /* EXT */

  /* 選中文字。規範有對應，指向黑（T1），不複製字面值。 */
  --rating-shell-active-text: var(--yc-color-black);

  /* 選中底。AdminLTE --lte-sidebar-menu-active-bg——與 hover-bg 同值是 AdminLTE
     原始定義如此，不是本檔筆誤；各自登記以便日後其中一階要單獨調整時不必牽動另一個。 */
  --rating-shell-active-bg: rgba(0, 0, 0, 0.1);     /* EXT */

  /* 子選單文字。AdminLTE --lte-sidebar-submenu-color。 */
  --rating-shell-submenu-text: #777;                /* EXT */

  /* 側欄收合／展開、選單展開的過場。AdminLTE 標準過場時間。 */
  --rating-shell-transition: .3s ease-in-out;       /* EXT */

  /* 側欄／Header 底色。規範有對應。 */
  --rating-shell-surface: var(--yc-color-white);

  /* 側欄右緣／Header 底部的分隔線。規範有對應（T1）。Spec §2.1／附錄 B.13：
     --yc-shadow-navbar／-sidebar／-popup 是 T3（只存在 Figma，ASPNexV2 從未
     實作過），不得使用；殼層的分隔一律用 1px border 達成，不用陰影。 */
  --rating-shell-border: var(--yc-color-border);

  /* Disabled（未授權模組）文字／圖示色。並非自訂色值——指向 Radzen material
     主題既有的語意變數 --rz-text-disabled-color（定義為 var(--rz-base-400)，
     Radzen 自己的 dropdown／listbox／chat 等元件也用它表示停用態文字，非本專案
     新造）。查證見 YC.UI 專案參照的 Radzen.Blazor 11.1.4 套件
     staticwebassets/css/material-base.css。Spec 附錄 B「Disabled」的處置正是
     「由 L1 評估對應到 --rz-* disabled 變數；移除頁面自訂 opacity:.5」——
     側欄的未授權項目改用這個既有色階表示停用，不再用 opacity 模擬。 */
  --rating-shell-disabled-text: var(--rz-text-disabled-color);

  /* 工作流列下拉選單的懸浮陰影。取自 ASPNexV2 ContentHeader.vue 的
     `.nav-list { box-shadow: 0 2px 4px #d0d0d0 }`，以 rgba 表達等效值
     （#d0d0d0 疊在白底上約等於 rgba(0,0,0,.18)），順帶避開色碼 lint。

     **這一條不牴觸上面 --rating-shell-border 那句「殼層的分隔一律用 1px border，
     不用陰影」。** 那句講的是側欄右緣與 header 底部的「分隔」——兩塊相鄰的平面，
     一條線就夠。這裡是一個必須浮在頁面內容之上的覆蓋層：沒有陰影就分不出前後層，
     使用者 2026-09-14 的原話是「要做浮在畫面上的」「要懸浮視窗」。
     仍然不使用 --yc-shadow-popup（T3，只存在 Figma、ASPNexV2 從未實作）。 */
  --rating-flow-menu-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);   /* EXT */
}

/*
 * ===========================================================================
 * 卡片圓角 —— 取代 --yc-radius-card（Spec 附錄 E.2、偏離 D-07，2026-10-08）
 * ===========================================================================
 * --yc-radius-card（8px）來自 ASPNexV2 app.css 的 .el-card，但該 class 在 Vue
 * 畫面上 0 處使用；Vue 實際的卡片是 AdminLTE .card（74 個 .vue），圓角是
 * Bootstrap 5.3 的 --bs-border-radius = .375rem
 * （node_modules/admin-lte/dist/css/adminlte.css:109）。
 * Rating 的 Bootstrap 是 5.1.0（D-02），沒有 --bs-border-radius 變數可指向，
 * 規範 token 也沒有 6px 這一階，故以字面值 EXT。
 * --yc-radius-card 留在凍結的 yc-design-tokens.css 裡，但 Rating 不再使用。
 */

:root {
  --rating-radius-card: .375rem;   /* EXT */
  /* EXT: shared climate filling table geometry, aligned to transition controls. */
  --rating-risk-table-header-height: 4rem;
  --rating-risk-table-control-height: 2.375rem;
  --rating-risk-table-actions-width: 8rem;
  --rating-risk-table-action-width: 6rem;
  /* EXT: 2026-10-13 user ranking layout: compact item column, wider strategy paragraphs. */
    --rating-risk-ranking-measure-width: 45%;
    --rating-risk-ranking-item-width: 16%;
    /* EXT: 2026-10-21 select column now carries a visible "納入報告" label, not just the checkbox. */
    --rating-risk-ranking-select-width: 7%;
    --rating-risk-ranking-rank-width: 6%;
    --rating-risk-ranking-score-width: 4%;
    --rating-risk-ranking-amount-width: 14%;
  /* EXT: ranking-specific scroll layout; preserve title and table headings while reading strategies. */
    --rating-risk-ranking-heading-height: 3rem;
    /* EXT: Strategy editor keeps the confirm footer visible while reading full paragraphs. */
    --rating-risk-strategy-body-height: 60vh;
}