/* ============================================================================
   DHI Breeding — App Shell / 高保真元件（Phase C）
   依 design-handoff/docs/design-system.md §4–§7 與 responsive-spec.md
   本檔只加新樣式，不刪既有規則；載入順序在 tokens.css 之後。
   ========================================================================== */

/* ------------------------------------------------------------------ 響應式圖片
   官方媒體套件（ui-media.js）產出的都是 <picture><source><img>。既有版面全部是
   針對「容器 > img」寫的（例如 .hx-hero__ph img { width:100%; height:100% }），
   若 <picture> 佔一層 box，那些規則的父子關係就斷了。display:contents 讓
   <picture> 不產生自己的 box，<img> 直接成為原容器的子項，既有 CSS 全數沿用。 */
picture { display: contents; }

/* ---------------------------------------------------------- <s> 不是刪除線
   這個庫把 <s> 當「次要文字」的標記用了 93 處（單位、分母、名次、NAAB 下的
   牛名…），但 <s> 的瀏覽器預設樣式是 **line-through**。

   原本的做法是逐容器補 `#xxx .yyy s { text-decoration: none }` —— 補到 68 條，
   而且每加一個新容器就漏一個。實測正式環境仍有多處露出刪除線（個別母牛抽屜的
   標題「1123 胎 · 統一編號 11040266」就是其中之一）。那是永遠追不完的。

   全庫 grep `line-through` **零命中** —— 沒有任何一處是真的想要刪除線。
   所以在這裡一次關掉。真的要刪除線的話明確加 class，不要靠 <s> 的預設。

   ⚠️ 底下那 68 條逐容器的重設現在是多餘的（但不是錯的，它們同時帶著
      font-size/color，不能整條刪）。**不要再新增第 69 條。** */
s { text-decoration: none; }

/* ---------------------------------------------------------------- 線性圖示 */
.ic { flex: none; display: block; }
.ic-btn {                       /* 純圖示按鈕：觸控目標 ≥44px（§9） */
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--ink-600); cursor: pointer; border-radius: var(--radius-pill);
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast);
}
.ic-btn:hover { background: var(--surface-soft); color: var(--ink-950); }
.ic-btn:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 1px; }

/* ------------------------------------------------------------------ 頁首 */
header { gap: 10px; }
.brand-logo {                   /* 乳牛 Logo：SVG 用 currentColor，靠 color 控深淺版本 */
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-900); color: #fff;
}
.brand-logo svg { width: 26px; height: 26px; }
header .htxt b { letter-spacing: .2px; }

/* 頁首右側工具列：取代原本鬆散的 emoji */
.hdr-tools { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.hdr-tools .badge-dot { position: relative; }
.hdr-tools .badge-dot::after {
  content: ""; position: absolute; top: 10px; right: 11px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--coral-500); border: 2px solid var(--canvas);
}
.fs-ind { font-weight: 800; font-size: 15px; line-height: 1; }

/* -------------------------------------------------------------- 英雄卡 */
/* 照片滿版 + 左側深綠漸層遮罩；文字一律疊在 HTML，不烤進圖片（§7） */
.page-hero {
  position: relative; overflow: hidden; border-radius: var(--radius-xl);
  min-height: 200px; display: flex; align-items: stretch;
  background: var(--brand-900); box-shadow: var(--shadow-sm); margin-bottom: 14px;
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block; }
/* 稿上左側是「實色深綠面板」而非半透明遮罩：前段必須完全不透明，
   否則照片透出來會讓標題區糊掉（先前版本 44% 處仍有 .80，是錯的）。 */
.page-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgb(5 51 40) 0%, rgb(5 51 40) 30%,
    rgb(5 51 40 / .72) 40%, rgb(5 51 40 / .22) 52%, transparent 62%);
}
.page-hero__content { position: relative; z-index: 1; padding: 18px 18px 16px; color: #fff; width: 100%; }
.page-hero__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: rgb(255 255 255 / .78); }
.page-hero__title { font-size: 21px; font-weight: 800; line-height: 1.25; margin-top: 2px; }
.page-hero__desc { font-size: 12.5px; line-height: 1.6; color: rgb(255 255 255 / .82); margin-top: 4px; max-width: 30ch; }
/* 手機：焦點改上下漸層，保留牛臉（responsive-spec §7 攝影規範） */
@media (max-width: 520px) {
  .page-hero__scrim {
    background: linear-gradient(180deg, rgb(5 51 40 / .58) 0%, rgb(5 51 40 / .86) 52%, rgb(5 51 40 / .95) 100%);
  }
  .page-hero__media img { object-position: center 30%; }
}

/* ------------------------------------------------------------ 評分環（§5）
   稿：270° 開口弧（底部留缺口），色帶由橘經琥珀到綠，填到分數為止、其餘為軌道色。
   原本是單色綠的整圈 conic-gradient，看不出「幾分算好」。
   作法：兩層 conic-gradient —— 底層鋪滿色帶、上層用軌道色把超過分數的部分蓋掉。
   from 225deg 讓弧從左下 7:30 起算，順時針 270°（= 圓的 75%）收在右下 4:30，
   缺口 90° 正對下方；分數 v 對應 v*0.75%。
   （用 135deg 會讓缺口偏到右side，不是稿上的對稱底部缺口。） */
.gauge {
  background:
    conic-gradient(from 225deg,
      transparent 0 calc(var(--v) * 0.75%),
      var(--track) 0 75%,
      transparent 0),
    conic-gradient(from 225deg,
      #e2603c 0%, #dfa333 20%, #9dc46f 45%, var(--brand-500) 66%, var(--brand-800) 75%,
      transparent 0);
}
.gauge::after { inset: 9px; }

/* 英雄卡內的評分區（沿用既有 .gauge，改為白字版） */
/* flex-wrap:雙圈(同期+歷年)加定位文字在窄螢幕排不下時折行,而不是擠爆圓環 */
.hero-score { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.hero-score .gauge { width: 84px; height: 84px; }
.hero-score .gauge::after { background: rgb(6 56 45 / .92); }
.hero-score .gauge b { color: #fff; }
.hero-score .gauge s { color: rgb(255 255 255 / .7); }
/* 儀表數字的「贏過」前綴。縮小是為了讓「贏過 99%」塞得進 84px 的圓環內圈
   （實測不縮小時文字 89px > 內圈可用 86px）。 */
.hero-score .gauge i { font-style: normal; font-size: 11px; font-weight: 600;
  opacity: .82; margin-right: 2px; letter-spacing: .02em; }
.hero-grade { line-height: 1.2; }
.hero-grade .g { font-size: 24px; font-weight: 800; color: #fff; }
.hero-grade .r { font-size: 12.5px; color: rgb(255 255 255 / .84); margin-top: 3px; }
.hero-grade .r b { color: #fff; font-size: 15px; }

/* ------------------------------------------------------- KPI／決策卡圖示 */
/* 40–48px 柔色圓形容器（§5 KPI 卡） */
.ic-orb {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-100); color: var(--brand-800);
}
.ic-orb--coral { background: var(--coral-100); color: var(--coral-700); }
.ic-orb--amber { background: var(--amber-100); color: var(--amber-700); }
.ic-orb--danger { background: var(--danger-100); color: var(--danger-700); }
.ic-orb svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------ KPI 卡（§5）
   稿：白底、1px 暖灰邊線、柔色圓形圖示容器在左、標籤在上數值在下、數值依語意上色。 */
/* 只套用在有 .kb 包層與圖示的新版 KPI。
   .kpi/.kpis 全站 19 處共用（配種/採精/全國/熱緊迫/明細），
   若直接改 .kpi 的排列，其他頁沒有 .kb 的舊結構會被拆成左右並排而壞版。 */
/* minmax 下限決定每列排幾張。158px 在平板(內容寬約 706px)會排成 4 欄 ×170px，
   文字欄只剩 84px 而「NT$3,399」在 24px 需 111px → 溢位。改 178px 後平板排 3 欄 ×229px。 */
.kpis--ic { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
.kpi--ic {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--surface-0); border: 1px solid var(--line-1);
  border-radius: var(--radius-md); padding: 14px 15px; box-shadow: var(--shadow-sm);
}
.kpi--ic .kb { min-width: 0; }
.kpi--ic .kb small { display: block; color: var(--ink-600); font-size: 12px; font-weight: 600; margin: 0 0 2px; }
.kpi--ic b { display: block; font-size: 24px; font-weight: 800; line-height: 1.15; }
.kpi--ic .kb em { display: block; font-style: normal; color: var(--ink-500); font-size: 10.5px; margin-top: 3px; }
/* 窄螢幕：orb 44px + gap + padding 會把文字欄壓到 85px，"NT$3,399" 在 24px 下要 111px 而溢出。
   縮 orb 與級數把可用寬度拉到 ~99px，數值降到 19px（約 88px）才收得住。 */
@media (max-width: 430px) {
  .kpis--ic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi--ic { padding: 12px; gap: 10px; }
  .kpi--ic .ic-orb { width: 38px; height: 38px; }
  .kpi--ic .ic-orb svg { width: 19px; height: 19px; }
  .kpi--ic b { font-size: 19px; letter-spacing: -.01em; }
  .kpi--ic .kb small { font-size: 11.5px; }
  .kpi--ic .kb em { font-size: 10px; }
}

/* ---------------------------------------------------------- 決策卡（§5）
   稿：大圖示 orb + 決策句 + 影響數量 + CTA 鈕；高風險用淡紅底，主操作仍是珊瑚橘。 */
.action.act { align-items: flex-start; padding: 15px 16px; border-radius: var(--radius-md); }
.act .act-body { flex: 1; min-width: 0; }
.act .act-cta {
  display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700;
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--coral-500); background: var(--coral-100); color: var(--coral-700);
  white-space: nowrap;
}
.act .act-cta.brand { border-color: var(--brand-300); background: var(--brand-100); color: var(--brand-800); }
.act .chev { align-self: center; }
/* 高風險決策：淡紅表面。不靠顏色單獨傳達 —— 圖示與文案本身已說明風險（§9） */
.act.act--risk { background: var(--surface-risk); border-color: var(--danger-100); }

/* -------------------------------------------------------------- 底部導覽 */
nav button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 56px; justify-content: center; }
nav button .ic { width: 21px; height: 21px; }
nav button.on { color: var(--brand-700); }
nav button.on .ic { stroke-width: 2.1; }
/* 選取指示：稿上是圖示下方的短線 */
nav button.on::after {
  content: ""; position: absolute; bottom: 4px; width: 18px; height: 3px;
  border-radius: 2px; background: var(--brand-500);
}
nav button { position: relative; }

/* ---------------------------------------------------------- 減少動態 */
/* ================================================ 觸控目標（§9 ≥44×44 CSS px）
   全斷點掃描發現多處不足：牛號切換 75×24、牧場選擇器關閉鈕 17×22、
   各式 chip 33px、電話連結 15–18px。手機是主要使用情境，優先修手機。

   §5 寫「Chips 高 32–38px」、§9 寫「觸控目標至少 44px」，兩者在手機上互斥。
   取折衷：chip 視覺高度提到 40px（仍在 §5 上限附近），其餘控制項一律補滿 44px。 */
@media (max-width: 767px) {
  .pchip { min-height: 40px; display: inline-flex; align-items: center; }
  /* 牛號切換：外框補到 44px 高，內部 pill 維持原本的小尺寸不變形 */
  .idsw { min-height: 44px; padding: 2px 3px; }
  .idsw > span { padding: 6px 9px; }
  .pk-close {
    width: 44px; height: 44px; display: inline-flex;
    align-items: center; justify-content: center; margin-left: auto;
  }
  /* 代理商電話舊補丁（inline-block 34px）已移除：採精頁改版後，#procbody 裡的
     連結全部是 .pr-ag__tel / .pr-alt 撥號膠囊，本身就是 44px 觸控目標。
     舊規則的 [href^="tel:"] 是 (1,1,1)，會蓋掉頁面自己的 (1,1,0) 膠囊樣式，
     反而把 44px 壓回 34px，故不留。 */
}

/* range 滑桿的 thumb 有 20px 寬，width:100% 會讓 thumb 半徑溢出容器約 4px。
   給軌道左右各留 10px，thumb 才不會被裁到。 */
.slrow input[type=range] { width: calc(100% - 20px); margin: 0 10px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 頁首在窄螢幕的收斂：標題兩行會把工具列擠掉，故縮字並限制行數 */
@media (max-width: 430px) {
  header { padding: 14px 14px 10px; gap: 8px; }
  .brand-logo { width: 36px; height: 36px; }
  .brand-logo svg { width: 23px; height: 23px; }
  .htxt b { font-size: 13.5px; line-height: 1.2; }
  .htxt small { font-size: 10.5px; }
  /* 曾為了讓窄螢幕頁首塞得下而收到 38px，但那違反 §9 的 44px 觸控下限。
     實算 390px：logo 36 + 3 顆 44 + gap ≈ 180px，標題仍有約 200px，塞得下。
     （這個違規先前躲過稽核，因為 audit.py 的掃描範圍不含 header。） */
  .ic-btn { width: 44px; height: 44px; }
  /* 品牌列同時是牧場切換入口，點擊區要有 44px 高 */
  .htxt { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
  .hdr-tools { gap: 0; }
}

/* ============================================================ 側欄 / 響應式框架
   稿：桌機 248px 深綠側欄、平板 80px 圖示軌、手機底部導覽（responsive-spec §響應式模式）
   關鍵作法：三種型態共用同一個 <nav> 元素，只靠 media query 換樣式。
   如此 tab()/go() 與 data-v 完全不動，不必維護兩套導覽 markup 與選取狀態。
   ========================================================================== */

/* 側欄品牌區：手機隱藏（品牌在 header），平板／桌機才顯示 */
.side-brand { display: none; }
.crumb { display: none; }

/* ------------------------------------------- 手機底部導覽：固定五項 +「更多」
   規格硬性要求手機為 健檢/留種淘汰/配種/熱緊迫/更多，
   自訂指數、全國、切換牧場收進「更多」面板（不可省略，只是換位置）。 */
@media (max-width: 767px) {
  /* 泌乳性能也收進「更多」：規格硬性要求手機底欄五格。button 本身不能拿掉 ——
     syncCrumb 唯一的頁名來源是 nav button 的 textContent。 */
  nav button[data-v="custom"], nav button[data-v="report"],
  nav button[data-v="market"], nav button[data-v="sim"],
  nav button[data-v="lact"] { display: none; }
}
.navmore { display: none; }
@media (max-width: 767px) { .navmore { display: flex; } }
.more-hd { font-size: 16px; font-weight: 800; padding: 2px 4px 10px; }
.more-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 4px;
  border-top: 1px solid var(--line-1); cursor: pointer; min-height: 44px;
}
.more-row b { flex: 1; font-size: 15px; font-weight: 700; }
.more-row .chev { color: var(--ink-500); font-size: 20px; line-height: 1; }
.more-row .ic-orb { width: 38px; height: 38px; }
/* 預設隱藏須放在 media query 之前：同權重下後寫的勝出，寫在後面會把桌機規則蓋掉。
   .crumb-farm 也必須列入，否則手機會同時出現品牌列與牧場膠囊兩個切換入口；
   .side-guide 同理，手機沒有側欄，不隱藏會擠進底部導覽列。 */
.yearpill, .crumb-farm, .side-guide { display: none; }

/* ---------------------------------------------- 平板：80px 圖示軌（768–1179） */
@media (min-width: 768px) {
  .phone {
    display: grid;
    grid-template-columns: var(--sidebar-rail) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "side head" "side main";
    height: 100vh; min-height: 100vh;
  }
  header  { grid-area: head; }
  .scroll { grid-area: main; padding-bottom: 32px; }

  nav {
    grid-area: side; position: static; inset: auto;
    flex-direction: column; align-items: center;
    background: var(--brand-950); border-top: 0; backdrop-filter: none;
    padding: 0 8px 16px; gap: 4px; overflow-y: auto;
  }
  nav button {
    flex: none; width: 100%; min-height: 62px; gap: 5px; padding: 8px 2px;
    border-radius: var(--radius-md); font-size: 10.5px; line-height: 1.25;
    color: rgb(255 255 255 / .82); white-space: normal; text-align: center;
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast);
  }
  nav button .i { margin: 0; }
  nav button:hover { background: rgb(255 255 255 / .08); color: #fff; }
  /* 選取＝暖白圓角面 + 珊瑚橘圖示文字（design-system.md §4 側欄） */
  nav button.on { background: var(--surface-0); color: var(--coral-600); }
  nav button.on::after { content: none; }   /* 底部導覽的短線指示在側欄不適用 */

  .side-brand {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 16px 4px 14px; color: #fff; width: 100%;
  }
  .side-brand .mark {
    width: 46px; height: 46px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-800);
    /* 官方 brand-dhi-cow 自帶稿上那圈圓角外框，容器再加 border 會變成雙層框 */
  }
  .side-brand .mark svg { width: 30px; height: 30px; }
  .side-brand .nm { display: none; }

  /* 側欄底部使用指南：內容未定稿，停用態（不可點、不 hover、不進 tab 序） */
  .side-guide {
    margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 12px 6px 4px; width: 100%; text-align: center;
    color: rgb(255 255 255 / .42); cursor: default; user-select: none;
    border-top: 1px solid rgb(255 255 255 / .10);
  }
  .side-guide b { font-size: 10.5px; font-weight: 700; }
  .side-guide s { text-decoration: none; font-size: 9px; letter-spacing: .04em; }
  .side-guide .i svg { width: 18px; height: 18px; }

  /* 頁首改為麵包屑；品牌已移入側欄 */
  header { padding: 0 20px; min-height: var(--topbar-h); border-bottom: 1px solid var(--line-1); }
  header .brand-logo, header .htxt { display: none; }
  .crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
  .crumb .root { color: var(--ink-600); font-weight: 600; cursor: pointer; }
  .crumb .sep  { color: var(--line-strong); }
  .crumb .cur  { color: var(--ink-950); }
  /* 牧場切換移到頁首右側，做成可點的膠囊 */
  .crumb-farm {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
    background: var(--surface-0); color: var(--ink-950); font-size: 13.5px; font-weight: 700;
  }
  .crumb-farm:hover { border-color: var(--brand-300); }
  /* 圖示已由 chevron-right 換成官方 chevron-down；原本 rotate(90deg) 是把「右」轉成「下」，
     不歸零的話真正的向下箭頭會被再轉 90 度變成朝左（實測 transform matrix(0,1,-1,0,0,0)）。 */
  .crumb-farm .i svg { width: 15px; height: 15px; color: var(--ink-500); }
  .hdr-tools { margin-left: 6px; }
  /* .demoflag 是 .phone 的直接子元素，若改 position:static 會變成 grid item 撐破版面；
     桌機的年度已由頁首年度膠囊呈現，故此處隱藏而非重新定位。 */
  .demoflag { display: none; }
  .yearpill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
    background: var(--surface-0); color: var(--ink-950); font-size: 13.5px; font-weight: 700;
  }
}

/* ------------------------------------------- 桌機：248px 完整側欄（≥1180） */
@media (min-width: 1180px) {
  .phone { grid-template-columns: var(--sidebar-wide) minmax(0, 1fr); max-width: var(--content-max); }
  nav { align-items: stretch; padding: 0 14px 20px; gap: 5px; }
  nav button {
    flex-direction: row; justify-content: flex-start; text-align: left;
    min-height: 50px; gap: 12px; padding: 0 14px; font-size: 14.5px; font-weight: 700;
  }
  nav button .i { width: 22px; height: 22px; }
  nav button .i svg { width: 22px; height: 22px; }

  .side-brand { padding: 14px 6px; gap: 8px; }
  .side-brand .mark {
    width: 112px; height: 112px; border-radius: 28px; box-sizing: border-box;
    border: 1px solid rgb(255 255 255 / .22);
  }
  .side-brand .mark svg { width: 46px; height: 46px; }
  .side-brand .nm { display: block; text-align: center; }
  .side-brand .nm b {
    display: block; max-width: 150px; margin: 0 auto;
    font-size: 15px; line-height: 1.35; font-weight: 800; letter-spacing: .2px;
  }
  .side-brand .nm s {
    display: block; text-decoration: none; margin-top: 3px;
    font-size: 9.5px; font-weight: 600; letter-spacing: .14em;
    color: rgb(255 255 255 / .58);
  }
  .scroll { padding-left: 28px; padding-right: 28px; }
  header  { padding: 0 28px; }

  .side-guide { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 14px 14px 4px; text-align: left; }
  .side-guide b { font-size: 13px; }
  .side-guide s { margin-left: auto; font-size: 10px; padding: 2px 7px; border-radius: 999px;
    background: rgb(255 255 255 / .10); }
}

/* 英雄卡在寬螢幕：稿的高度 220–280px（§5），文字區限在左半不壓到牛 */
@media (min-width: 768px) {
  .page-hero { min-height: 240px; margin-bottom: 18px; }
  .page-hero__content { padding: 26px 28px; max-width: 62%; }
  .page-hero__title { font-size: 27px; }
  .page-hero__desc  { font-size: 13.5px; max-width: 34ch; }
  .hero-score { gap: 18px; margin-top: 16px; }
  .hero-score .gauge { width: 104px; height: 104px; }
  /* 稿上評分環與等級之間有一道細分隔線 */
  .hero-grade { padding-left: 18px; border-left: 1px solid rgb(255 255 255 / .22); }
  .hero-grade .g { font-size: 28px; }
  .hero-pills { margin-top: 14px; }
}

/* ====================================================== 明細容器（§5 Drawer）
   桌機抽屜寬度是從稿量出來的，不是估的：對 08-cow-detail-desktop.png（2560px）
   取多條掃描線的平均亮度剖面，找「被壓暗的來源頁 → 全亮抽屜」那次躍升，
   邊界在 x=1204 → 抽屜 1356px ＝ 視窗的 53%。換算 1900px 視窗約 1006px。
   原本寫 820px 是低估，直接後果是「四張編號圖表卡」排不成稿的一列四張
   （每欄不到 200px），只好退成 2×2 —— 版面差異的根源是寬度抓錯，不是排法選錯。
   稿：桌機為右側抽屜（保留左側脈絡）、平板為最寬 720px 側板、
   手機取代 drawer 成為全螢幕內容頁。
   現況是三個斷點都用置中／底部 modal，故在此改寫 .sheet/.sheetc。
   6 個明細（sheet/matesheet/procsheet/cixsheet/heatsheet/bullsheet）共用這組樣式，
   逐頁 CSS 不該各自重定義容器，否則會出現六種不一致的行為。 */

/* ---- 手機：全螢幕內容頁（§5 手機明細）---- */
@media (max-width: 767px) {
  .sheet { align-items: stretch; background: var(--canvas); }
  .sheetc {
    max-height: 100%; height: 100%; border-radius: 0; border-top: 0;
    padding: 8px 16px calc(28px + env(safe-area-inset-bottom));
    animation: sheet-rise .22s var(--ease-standard);
  }
  /* 全螢幕時「下拉把手」失去語意（沒有可拖曳的底部卡片），改為關閉列 */
  .sheetc .grab { display: none; }
}

/* ---- 平板／桌機：右側抽屜 ---- */
@media (min-width: 768px) {
  .sheet { align-items: stretch; justify-content: flex-end; }
  .sheetc {
    max-width: 720px; width: 100%; margin: 0; max-height: 100%; height: 100%;
    border-radius: 0; border-top: 0; border-left: 1px solid var(--line-1);
    box-shadow: var(--shadow-panel);
    padding: 10px 24px 32px;
    animation: sheet-slide .24s var(--ease-standard);
  }
  .sheetc .grab { display: none; }
}
@media (min-width: 1180px) {
  .sheetc { max-width: 1010px; padding: 12px 28px 36px; }
}
/* 稿：公牛抽屜桌機 816px（視窗 64%）、平板 571px（70%）。
   ⚠️ 只能寫成 #bullsheet > .sheetc（特異度 1,1,0）—— 上面那兩條掛在裸 .sheetc，
      另外六個抽屜（#sheet / #siresheet / #srbullsheet / #heatsheet / #lactsheet /
      #moresheet）都吃它，改共用規則會一次縮掉全部。
   註：#bullsheet 內部約 200 條規則是照「820px 抽屜、內容寬 763px」校準的
      （shell.css 3747 / 3860 有明文記錄）。816−56=760 幾乎完全對上；
      平板 571−48=523 對上的卻是原設計的 720，所以平板那一格另外收窄內距。 */
@media (min-width: 768px) {
  #bullsheet > .sheetc { max-width: 571px; padding-left: 18px; padding-right: 18px; }
  #bullsheet .sheet-hd { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
}
@media (min-width: 1180px) {
  #bullsheet > .sheetc { max-width: 816px; padding-left: 28px; padding-right: 28px; }
  #bullsheet .sheet-hd { margin-left: -28px; margin-right: -28px; padding-left: 28px; padding-right: 28px; }
}
@keyframes sheet-slide { from { transform: translateX(28px); opacity: .5 } to { transform: none; opacity: 1 } }
@keyframes sheet-rise  { from { transform: translateY(20px); opacity: .5 } to { transform: none; opacity: 1 } }

/* 抽屜頁首：稿上每個明細都有「圖示＋標題＋關閉」，且捲動時固定 */
.sheet-hd {
  position: sticky; top: 0; z-index: 2; margin: 0 -24px 12px; padding: 12px 24px 11px;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-0); border-bottom: 1px solid var(--line-1);
}
.sheet-hd .ic-orb { width: 34px; height: 34px; }
.sheet-hd .ic-orb svg { width: 19px; height: 19px; }
.sheet-hd b { font-size: 16.5px; font-weight: 800; flex: 1; min-width: 0; }
.sheet-hd .x {
  width: 44px; height: 44px; flex: none; border: 0; background: none; cursor: pointer;
  color: var(--ink-600); font-size: 22px; line-height: 1; border-radius: var(--radius-pill);
}
.sheet-hd .x:hover { background: var(--surface-soft); color: var(--ink-950); }
.sheet-hd .x:focus-visible { outline: 3px solid rgb(43 138 104 / .35); }
@media (max-width: 767px) { .sheet-hd { margin: 0 -16px 12px; padding: 10px 16px; } }
@media (min-width: 1180px) { .sheet-hd { margin: 0 -28px 14px; padding: 12px 28px 11px; } }

/* 優劣性狀 pill 移入英雄卡：改為半透明白底，配深綠照片背景 */
.hero-pills { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.hero-pills .pill {
  margin: 0 !important; background: rgb(255 255 255 / .16) !important;
  color: #fff !important; border: 1px solid rgb(255 255 255 / .26);
  backdrop-filter: blur(2px);
}
/* ============================================================================
   熱緊迫頁（#v-heat）— 高保真稿套用
   ----------------------------------------------------------------------------
   全部規則都掛在 #v-heat 底下：.card/.kpi/.chart-t/.cow 等 class 全站共用，
   任何裸選擇器都會外溢到其他五頁（.kpi 全站 19 處），故一律加頁面 id 前綴。
   版面照稿、數據照現況：稿上的牛號/建議行動/四段 THI 分級在 bundle 內不存在，
   一律不補假資料（見 notes）。
   ========================================================================== */

/* ---------------------------------------------------------------- 頁面節奏 */
#v-heat .card {
  border-radius: var(--radius-lg); border: 1px solid var(--line-1);
  box-shadow: var(--shadow-sm); padding: 16px 18px; margin-bottom: 14px;
}
#v-heat .card.chart { padding: 16px 16px 14px; }
#v-heat .chart-t {
  font-size: 14.5px; font-weight: 800; color: var(--ink-950);
  margin: 0 0 10px; line-height: 1.35;
}
/* .chart-cap 全域寫死 #7d8ea0（偏藍灰），在暖白畫布上偏冷、暗色主題下也不對 */
#v-heat .chart-cap { font-size: 11.5px; color: var(--ink-500); margin: 10px 2px 0; line-height: 1.6; }
#v-heat .chart-cap b { color: var(--ink-800); }
#v-heat > .note { margin: 0 0 16px; }

/* 段落標題：稿上是深色粗體 + 前導色點（環境層＝綠、遺傳層＝琥珀），
   取代原本的 🟢/🟡 emoji（design-system §6：不混用 emoji 與線性圖示）。
   色點只是重複文字已表達的層級，不單獨承載資訊。 */
#v-heat .heat-sec {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 800; color: var(--ink-950);
  letter-spacing: 0; margin: 22px 4px 12px;
}
#v-heat .heat-sec::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand-500);
}
#v-heat .heat-sec--gen::before { background: var(--amber-500); }

/* -------------------------------------------------------------- 熱風險英雄卡
   沿用 shell.css 的 .page-hero 幾何，但稿上這張是「白卡＋照片從右側淡入」，
   與健檢頁的深綠面板相反：故關掉 scrim，改用 mask 讓照片自己淡出，
   左側直接露出卡片底色 —— 這樣深／淺主題都不必各寫一組漸層。 */
#v-heat .heat-hero {
  display: block; min-height: 0; margin-bottom: 16px;
  background: var(--surface-0); border: 1px solid var(--line-1);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
}
#v-heat .heat-hero .page-hero__scrim { display: none; }
#v-heat .heat-hero .page-hero__media {
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, rgb(0 0 0 / .55) 50%, #000 70%);
          mask-image: linear-gradient(90deg, transparent 30%, rgb(0 0 0 / .55) 50%, #000 70%);
}
#v-heat .heat-hero .page-hero__media img { object-position: center 42%; }
#v-heat .heat-hero .page-hero__content {
  color: var(--ink-950); padding: 20px 18px 18px; max-width: none;
}

#v-heat .heat-hero__title { font-size: 17px; font-weight: 800; line-height: 1.3; display: block; }
#v-heat .heat-hero__figs { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
#v-heat .heat-hero__score { flex: none; text-align: center; min-width: 92px; }
#v-heat .heat-hero__score > b {
  display: block; font-size: 54px; font-weight: 800; line-height: .95;
  letter-spacing: -.02em; color: var(--ink-500); font-variant-numeric: tabular-nums;
}
/* 風險等級膠囊：外框與文字同色，顏色由 JS 依風險等級寫在 style.color 上 */
#v-heat .heat-hero__tag {
  display: inline-block; margin-top: 10px; padding: 5px 14px;
  font-size: 12.5px; font-weight: 800; line-height: 1.2;
  border: 1.5px solid currentColor; border-radius: var(--radius-pill);
  background: var(--surface-0);
}
#v-heat .heat-hero__stats {
  display: flex; flex-direction: column; gap: 12px;
  padding-left: 18px; border-left: 1px solid var(--line-1);
}
#v-heat .heat-hero__stats .hs small { display: block; font-size: 12px; font-weight: 600; color: var(--ink-600); }
#v-heat .heat-hero__stats .hs b {
  display: block; font-size: 23px; font-weight: 800; line-height: 1.2;
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
#v-heat .heat-hero__stats .hs-amber { color: var(--amber-700); }
#v-heat .heat-hero__stats .hs-green { color: var(--brand-700); }

/* 風險刻度：--p 由 renderHeatFarm() 以真實 risk(0–100) 設定；
   --mk 預設 none，資料還沒到就不畫指針（避免「0＝低風險」的錯誤暗示）。 */
#v-heat .heat-scale { --p: 50%; --mk: none; margin-top: 18px; max-width: 430px; }
#v-heat .heat-scale__bar {
  position: relative; height: 8px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #1f7d5c 0%, #57a06a 26%, #dfa333 52%, #ee8a4a 74%, #d94f34 100%);
}
#v-heat .heat-scale__bar::after {
  content: ""; display: var(--mk); position: absolute; left: var(--p); top: -11px;
  transform: translateX(-50%); width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 8px solid var(--ink-950);
}
#v-heat .heat-scale__lab {
  display: flex; justify-content: space-between; margin-top: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-600);
}
#v-heat .heat-hero__why {
  margin-top: 14px; font-size: 12px; line-height: 1.7; color: var(--ink-600); max-width: 54ch;
}
#v-heat .heat-hero__why b { color: var(--ink-950); }

/* 主操作：珊瑚橘（全頁唯一）。手機在流內滿版，平板／桌機浮在卡片右上角。 */
#v-heat .heat-cta {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 18px 18px; width: calc(100% - 36px); min-height: 44px; padding: 0 18px;
  font-family: inherit; font-size: 13.5px; font-weight: 800; color: #fff;
  background: var(--coral-solid); border: 0; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
#v-heat .heat-cta:hover { background: var(--coral-600); }
#v-heat .heat-cta:focus-visible { outline: 3px solid rgb(241 107 77 / .45); outline-offset: 2px; }
#v-heat .heat-cta .ic { width: 18px; height: 18px; }

/* ------------------------------------------------------------ 未來 3 天預警 */
#v-heat #heat-forecast { font-size: 12.5px; color: var(--ink-600); line-height: 1.65; }
#v-heat #heat-forecast b { color: var(--ink-950); }
#v-heat .fc-days { display: flex; gap: 10px; }
#v-heat .fc-day {
  flex: 1; min-width: 0; text-align: center;
  background: var(--surface-soft); border: 1px solid var(--line-1);
  border-radius: var(--radius-md); padding: 12px 6px 12px;
}
#v-heat .fc-d { font-size: 11.5px; font-weight: 600; color: var(--ink-600); }
#v-heat .fc-thi {
  display: block; margin-top: 4px; font-size: 26px; font-weight: 800;
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
#v-heat .fc-lv {
  display: inline-block; margin-top: 6px; padding: 2px 10px;
  font-size: 11px; font-weight: 800; line-height: 1.45;
  border: 1px solid currentColor; border-radius: var(--radius-pill);
}
#v-heat .fc-src { margin-top: 10px; font-size: 11px; color: var(--ink-500); line-height: 1.55; }

/* ------------------------------------------------------------ THI 月曆圖例
   色票與 chCalendar() 內的 col() 完全一致（綠 #33ab6f／橙 #bd8730／紅 #c05a4a），
   分箱也照實際三段，不採用稿上那組本系統沒有的四段分級。 */
#v-heat .heat-lgd { margin: 10px 2px 0; gap: 14px; }
#v-heat .heat-lgd span { font-size: 11px; color: var(--ink-600); }
#v-heat .heat-lgd i { width: 11px; height: 11px; border-radius: 3px; }

/* ------------------------------------------------------------ 熱損失估算卡 */
#v-heat .heat-loss .kpis--ic { margin-top: 12px; }
#v-heat .heat-loss .kpi--ic { box-shadow: none; background: var(--surface-soft); }
#v-heat .heat-photo {
  display: block; width: 100%; height: 128px; object-fit: cover; object-position: center 46%;
  border-radius: var(--radius-md); margin-top: 14px;
}
#v-heat .heat-fine { margin-top: 12px; font-size: 11.5px; color: var(--ink-500); line-height: 1.65; }
#v-heat .heat-fine b { color: var(--ink-800); }

/* -------------------------------------------------------- 本場最怕熱的牛 */
#v-heat .heat-top__hd { display: flex; align-items: center; gap: 10px; }
#v-heat .heat-top__hd .chart-t { flex: 1; margin: 0; }
#v-heat #heat-sens-list { margin-top: 6px; }
#v-heat #heat-sens-list .cow {
  gap: 12px; padding: 13px 8px; border-bottom: 1px solid var(--line-1); border-radius: 12px;
}
#v-heat #heat-sens-list .cow:last-child { border-bottom: 0; }
#v-heat #heat-sens-list .cow:hover { background: var(--surface-soft); }
#v-heat #heat-sens-list .rank {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-soft); color: var(--ink-600); font-size: 11.5px; font-weight: 800;
}
#v-heat #heat-sens-list .cid b { font-size: 15px; font-weight: 800; }
#v-heat #heat-sens-list .cid div { margin-top: 3px; font-size: 11.5px; color: var(--ink-600); }
/* 掉乳量是「損失」，稿上用珊瑚色系；t-amber 的琥珀在白卡上對比也不足 */
#v-heat #heat-sens-list .tag {
  padding: 7px 12px; border-radius: 12px; font-size: 10.5px; font-weight: 700; line-height: 1.45;
  background: var(--coral-100); color: var(--coral-700);
}
#v-heat #heat-sens-list .tag .money { color: var(--coral-700); font-size: 13.5px; }

/* =============================================================== 平板以上 */
@media (min-width: 768px) {
  #v-heat .heat-hero { min-height: 244px; margin-bottom: 20px; }
  #v-heat .heat-hero .page-hero__content { padding: 26px 28px 24px; max-width: 58%; }
  #v-heat .heat-hero__title { font-size: 19px; }
  #v-heat .heat-hero__score { min-width: 108px; }
  #v-heat .heat-hero__score > b { font-size: 62px; }
  #v-heat .heat-hero__stats { padding-left: 22px; gap: 14px; }
  #v-heat .heat-hero__stats .hs b { font-size: 26px; }
  /* 稿上 CTA 固定在卡片右上；.page-hero 已是 position:relative，故直接掛絕對定位 */
  #v-heat .heat-cta { position: absolute; top: 22px; right: 24px; width: auto; margin: 0; }
  #v-heat .heat-sec { font-size: 17px; margin: 26px 4px 14px; }
  #v-heat .card { padding: 18px 20px; }
  #v-heat .card.chart { padding: 18px 18px 15px; }
}

/* =============================================================== 桌機 */
@media (min-width: 1180px) {
  #v-heat .heat-hero { min-height: 262px; }
  #v-heat .heat-hero .page-hero__content { max-width: 54%; }
  #v-heat .heat-hero__score > b { font-size: 70px; }
  #v-heat .heat-hero__score { min-width: 118px; }
  #v-heat .heat-hero__stats .hs b { font-size: 28px; }
  #v-heat .heat-photo { height: 148px; }
}

/* =============================================================== 手機
   稿上手機仍是「照片在右、文字在左」，但 390px 下文字欄只剩 ~210px，
   數值與說明會壓在牛身上。改成照片從右上角斜向淡出、文字在左下，
   CTA 落到卡片底部滿版（維持 44px 觸控目標）。 */
@media (max-width: 767px) {
  #v-heat .heat-hero .page-hero__media {
    -webkit-mask-image: linear-gradient(212deg, #000 0 24%, rgb(0 0 0 / .38) 50%, transparent 68%);
            mask-image: linear-gradient(212deg, #000 0 24%, rgb(0 0 0 / .38) 50%, transparent 68%);
  }
  #v-heat .heat-hero .page-hero__media img { object-position: 70% 32%; }
  #v-heat .heat-hero__figs { gap: 14px; }
  #v-heat .heat-hero__score { min-width: 84px; }
  #v-heat .heat-hero__score > b { font-size: 46px; }
  #v-heat .heat-hero__stats { gap: 10px; padding-left: 14px; }
  #v-heat .heat-hero__stats .hs b { font-size: 20px; }
  #v-heat .heat-scale { max-width: none; }
  #v-heat .fc-days { gap: 8px; }
  #v-heat .fc-day { padding: 10px 4px; }
  #v-heat .fc-thi { font-size: 22px; }
  #v-heat .fc-lv { padding: 2px 8px; font-size: 10.5px; }
  #v-heat #heat-sens-list .cow { padding: 12px 4px; gap: 10px; }
  #v-heat #heat-sens-list .tag { padding: 6px 10px; }
}

/* ============================================================================
   留種淘汰頁（#v-cull）— 高保真稿套用
   ----------------------------------------------------------------------------
   全部規則都掛在 #v-cull 底下：.card/.cow/.tag/.note/.chev 等 class 全站共用，
   裸選擇器會外溢到其他五頁，故一律加頁面 id 前綴。
   版面照稿、數據照現況：稿上的假牛號、43 頭、NT$13,600／頭、篩選器、
   「查看完整清單」子頁在 bundle 內都不存在，一律不補（見 notes）。
   ========================================================================== */

#v-cull {
  /* 四層決策色。實測對卡片底的對比（WCAG 1.4.11 非文字需 ≥3:1）：
       --danger-500  light 4.63 / dark 5.00  ✓
       --amber-500   light 2.23 / dark 8.74  ✗ 淺色不及格 → 改用 --amber-700 (4.38/7.63)
       --brand-700   light 6.43 / dark 2.57  ✗ 深色不及格（該 token 在深色主題根本沒重新定義）
                                                → 改用 --brand-500 (4.25/5.65)
       --pal-you     light 8.05 / dark 7.96  ✓ 給對比最強的「遺傳優秀」
     相鄰兩層的可分辨度：light 1.89、dark 1.41。 */
  --cull-red: var(--danger-500);
  --cull-amber: var(--amber-700);
  --cull-green: var(--brand-500);
  /* 第四層「遺傳優秀牛」。加了這一層卻沒定義顏色，於是圓餅那一段的
     stroke: var(--cull-top) 在計算值階段失效（整段沒畫出來，看到的是底層 track），
     圖例的點也因為沒有 color 規則而繼承成黑色——畫面上圓餅與圖例對不起來。
     用 --brand-500 而非更深的 --brand-900：後者在深色主題沒有重新定義。 */
  --cull-top:   var(--pal-you);
}

/* 卡片節奏與熱緊迫頁一致 */
#v-cull .card {
  border-radius: var(--radius-lg); border: 1px solid var(--line-1);
  box-shadow: var(--shadow-sm); padding: 16px 18px; margin-bottom: 0;
}
#v-cull .chart-t { font-size: 14.5px; font-weight: 800; color: var(--ink-950); margin: 0 0 10px; line-height: 1.35; }
#v-cull .chart-cap { font-size: 11.5px; color: var(--ink-500); margin: 10px 2px 0; line-height: 1.6; }
#v-cull .chart-cap b { color: var(--ink-800); }

/* ------------------------------------------------------------ 頁首列 + 主操作 */
#v-cull .cull-pagehd {
  display: flex; align-items: flex-start; gap: 12px; margin: 2px 2px 14px;
}
#v-cull .cull-pagehd__t { flex: 1; min-width: 0; }
#v-cull .cull-pagehd__t b { display: block; font-size: 24px; font-weight: 800; color: var(--ink-950); line-height: 1.2; }
#v-cull .cull-pagehd__t span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-600); line-height: 1.5; }
/* 全頁唯一的珊瑚橘主操作 */
#v-cull .cull-dl {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; font-family: inherit; font-size: 13.5px; font-weight: 800;
  color: #fff; background: var(--coral-solid); border: 0; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
#v-cull .cull-dl:hover { background: var(--coral-600); }
#v-cull .cull-dl:focus-visible { outline: 3px solid rgb(241 107 77 / .45); outline-offset: 2px; }
#v-cull .cull-dl .ic { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- 英雄卡 */
#v-cull .cull-hero { min-height: 190px; margin-bottom: 14px; }
#v-cull .cull-hero .page-hero__media img { object-position: center 46%; }
#v-cull .cull-hero__badge {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .26);
  color: #fff; font-size: 12.5px; font-weight: 700; backdrop-filter: blur(2px);
}
#v-cull .cull-hero__badge .ic { width: 15px; height: 15px; }

/* ------------------------------------------------------------ 四張決策卡 */
/* 原本寫死 repeat(3)，加上第四張「遺傳優秀牛」之後會排成 3+1 的孤兒列
   （sweep 實測 776–2536px 共 56 個寬度都中）。
   欄數用量的：4 欄要到 1600px 卡高才降到 123px（與 2×2 相當），
   1408px 時 4 欄是 140px、1024px 時 195px、768px 時 514px。故 2×2 為主。 */
#v-cull .cull-decisions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (min-width: 1600px) { #v-cull .cull-decisions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#v-cull .cdec {
  display: flex; align-items: center; gap: 13px; text-align: left; width: 100%;
  background: var(--surface-0); border: 1px solid var(--line-1); border-radius: var(--radius-lg);
  padding: 15px 16px; box-shadow: var(--shadow-sm); cursor: pointer; font-family: inherit;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast);
}
#v-cull .cdec:hover { border-color: var(--line-strong); }
#v-cull .cdec:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; }
/* 選取＝清單已篩到這個決策。不只靠顏色：邊框加粗且 aria-pressed 已標示狀態 */
#v-cull .cdec.on { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor, var(--shadow-sm); }
#v-cull .cdec--red.on   { color: var(--cull-red);   background: var(--surface-risk); }
#v-cull .cdec--amber.on { color: var(--cull-amber); background: var(--amber-100); }
#v-cull .cdec--green.on { color: var(--cull-green); background: var(--brand-100); }
#v-cull .cdec .ic-orb { width: 48px; height: 48px; }
#v-cull .cdec .ic-orb .ic { width: 26px; height: 26px; }
#v-cull .cdec__b { flex: 1; min-width: 0; }
#v-cull .cdec__n { display: block; font-size: 27px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
#v-cull .cdec__n s { text-decoration: none; font-size: 13px; font-weight: 700; margin-left: 4px; color: var(--ink-600); }
#v-cull .cdec--red   .cdec__n { color: var(--cull-red); }
#v-cull .cdec--amber .cdec__n { color: var(--cull-amber); }
#v-cull .cdec--green .cdec__n { color: var(--cull-green); }
#v-cull .cdec__t { display: block; margin-top: 3px; font-size: 14px; font-weight: 800; color: var(--ink-950); }
#v-cull .cdec__s { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-500); line-height: 1.5; }
#v-cull .cdec .chev { flex: none; color: var(--ink-500); font-size: 20px; }

/* ---------------------------------------------------------------- 主版面 */
#v-cull .cull-grid { display: flex; flex-direction: column; gap: 14px; }
#v-cull .cull-main, #v-cull .cull-side { display: contents; }
#v-cull .cull-listcard { order: 1; padding: 16px 16px 10px; }
#v-cull .cull-donut    { order: 2; }
#v-cull .cull-field    { order: 3; }
#v-cull .cull-dist     { order: 4; }
#v-cull .cull-advice   { order: 5; }

/* ------------------------------------------------------------------ 清單 */
#v-cull .cull-listhd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
#v-cull .cull-listhd__t { flex: 1; min-width: 0; }
#v-cull .cull-listhd__t b { display: block; font-size: 16px; font-weight: 800; color: var(--ink-950); }
#v-cull .cull-listhd__t small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-500); }
#v-cull .cull-listhd .idsw { margin-left: 0; }

#v-cull .cull-cols {
  display: none; align-items: center; gap: 12px; padding: 0 8px 8px;
  border-bottom: 1px solid var(--line-1); font-size: 11.5px; font-weight: 700; color: var(--ink-500);
}
#v-cull #cull-list { max-height: none; }
#v-cull #cull-list .cow {
  gap: 12px; padding: 12px 8px; border-bottom: 1px solid var(--line-1);
  border-radius: 12px; cursor: pointer;
}
#v-cull #cull-list .cow:last-child { border-bottom: 0; }
#v-cull #cull-list .cow:hover { background: var(--surface-soft); }
#v-cull #cull-list .rank {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-100); color: var(--brand-800); font-size: 11.5px; font-weight: 800;
}
#v-cull #cull-list .cid { flex: 1; min-width: 0; }
#v-cull #cull-list .cid b { font-size: 15px; font-weight: 800; color: var(--ink-950); }
#v-cull #cull-list .cid div { margin-top: 3px; font-size: 11.5px; color: var(--ink-600); }
/* 決策膠囊：淡底 + 同色字，和決策卡／甜甜圈同一組語意色 */
#v-cull #cull-list .tag {
  flex: none; margin-left: 0; text-align: center; white-space: nowrap;
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 800; line-height: 1.35;
}
#v-cull #cull-list .tag.t-red   { background: var(--surface-risk); color: var(--cull-red); }
#v-cull #cull-list .tag.t-amber { background: var(--amber-100);    color: var(--amber-700); }
#v-cull #cull-list .tag.t-green { background: var(--brand-100);    color: var(--cull-green); }
/* 第四層（遺傳優秀）的標籤色。加了 tone='top' 卻沒有對應規則的話，
   標籤會退回無背景、字色繼承——與另外三層看起來不是同一組元件。 */
#v-cull #cull-list .tag.t-top   { background: var(--brand-100); color: var(--cull-top); }
#v-cull #cull-list .econ {
  flex: none; text-align: right; font-size: 14.5px; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#v-cull #cull-list .econ.neg { color: var(--cull-red); }
#v-cull #cull-list .econ.pos { color: var(--cull-green); }
#v-cull #cull-list .chev { flex: none; color: var(--ink-500); font-size: 18px; }
#v-cull .cull-empty { padding: 26px 8px; text-align: center; font-size: 12.5px; color: var(--ink-500); }

/* ------------------------------------------------------------ 決策分布甜甜圈 */
#v-cull .cull-donut__row { display: flex; align-items: center; gap: 16px; }
#v-cull .cull-donut__c { position: relative; flex: none; width: 120px; height: 120px; }
#v-cull .cull-donut__mid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
#v-cull .cull-donut__mid b { font-size: 27px; font-weight: 800; color: var(--ink-950); line-height: 1.1; font-variant-numeric: tabular-nums; }
#v-cull .cull-donut__mid small { font-size: 11px; color: var(--ink-600); margin-top: 1px; }
#v-cull .cull-donut__lg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* 圖例圓點由 CSS 畫的實心圓改為官方 status-dot：欄寬 9→14px，.dot 不再自己畫圓，
   否則會出現「圓中有圓」。顏色仍由 .cull-lg--red/amber/green 的 color 繼承。 */
#v-cull .cull-lg { display: grid; grid-template-columns: 14px minmax(0, 1fr); grid-template-rows: auto auto; gap: 5px 8px; align-items: center; }
#v-cull .cull-lg .dot { width: 14px; height: 14px; border-radius: 0; background: none;
  display: inline-flex; align-items: center; justify-content: center; }
/* 原本這裡還有一條 .dot { width:9px; border-radius:50%; background:currentColor }，
   在新規則之後、同特異性，會把 14px 蓋回 9px —— svg 需要 12px，audit 回報溢出 3px。已移除。 */
#v-cull .cull-lg .l { font-size: 12.5px; font-weight: 700; color: var(--ink-950); }
#v-cull .cull-lg .bar { grid-column: 2; height: 6px; border-radius: var(--radius-pill); background: var(--track); overflow: hidden; }
#v-cull .cull-lg .bar i { display: block; height: 100%; border-radius: var(--radius-pill); background: currentColor; }
#v-cull .cull-lg .v { grid-column: 2; font-size: 11.5px; color: var(--ink-600); font-variant-numeric: tabular-nums; }
#v-cull .cull-lg .v b { font-size: 13px; font-weight: 800; color: var(--ink-950); }
#v-cull .cull-lg--red   { color: var(--cull-red); }
#v-cull .cull-lg--amber { color: var(--cull-amber); }
#v-cull .cull-lg--green { color: var(--cull-green); }

/* --------------------------------------------------------- 把決策帶到現場 */
#v-cull .cull-field { position: relative; overflow: hidden; padding: 0; background: var(--brand-900); border-color: var(--brand-800); }
#v-cull .cull-field__media { position: absolute; inset: 0; }
#v-cull .cull-field__media img { width: 100%; height: 100%; object-fit: cover; object-position: 76% 40%; display: block; }
#v-cull .cull-field__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(6 56 45) 0%, rgb(6 56 45 / .92) 42%, rgb(6 56 45 / .35) 68%, transparent 88%);
}
#v-cull .cull-field__body { position: relative; z-index: 1; padding: 18px; max-width: 68%; }
#v-cull .cull-field__body b { display: block; font-size: 16px; font-weight: 800; color: #fff; }
#v-cull .cull-field__body p { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: rgb(255 255 255 / .84); }
#v-cull .cull-field__cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  min-height: 44px; padding: 0 16px; font-family: inherit; font-size: 13px; font-weight: 800;
  color: var(--brand-900); background: #fff; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
#v-cull .cull-field__cta:hover { background: var(--brand-100); }
#v-cull .cull-field__cta:focus-visible { outline: 3px solid rgb(255 255 255 / .6); outline-offset: 2px; }
#v-cull .cull-field__cta .chev { color: inherit; font-size: 17px; }

/* ------------------------------------------------------------------ 專業建議 */
#v-cull .cull-advice { display: flex; align-items: flex-start; gap: 12px; }
#v-cull .cull-advice__b { flex: 1; min-width: 0; }
#v-cull .cull-advice__b > b { display: block; font-size: 15px; font-weight: 800; color: var(--ink-950); }
/* 警語保留原文，只把外框拿掉讓它讀起來像卡片內文（內容一字未刪） */
#v-cull .cull-advice .note {
  background: none; border: 0; padding: 0; margin: 7px 0 0;
  font-size: 12.5px; line-height: 1.7; color: var(--ink-600);
}
#v-cull .cull-advice .note b { color: var(--ink-950); }

/* -------------------------------------------------------- 經濟淨益分布圖 */
#v-cull .cull-disthd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#v-cull .cull-disthd .chart-t { flex: 1; margin: 0; }
#v-cull .cull-base {
  flex: none; padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--brand-800); color: #fff; font-size: 11.5px; font-weight: 800; white-space: nowrap;
}

/* =============================================================== 平板以上 */
@media (min-width: 768px) {
  #v-cull .cull-pagehd { margin: 4px 2px 18px; align-items: center; }
  #v-cull .cull-pagehd__t b { font-size: 27px; }
  #v-cull .cull-hero { min-height: 232px; margin-bottom: 18px; }
  #v-cull .cull-decisions { gap: 14px; margin-bottom: 18px; }
  #v-cull .card { padding: 18px 20px; }

  /* 平板不做左右分欄：內容寬僅 754px，扣掉 330px 側欄後清單只剩 338px，
     而 .cow 的固定欄（30+92+116+16 ＋4 個 10px gap ＝294px）幾乎吃光，
     牛號欄被壓到 28px 而裁字。分欄留到 ≥1180 才做。 */
  #v-cull .cull-main, #v-cull .cull-side { display: flex; flex-direction: column; gap: 16px; }
  #v-cull .cull-listcard { padding: 18px 18px 10px; }

  /* 表頭：與 .cow 用同一組欄寬，數字才會對齊 */
  #v-cull .cull-cols { display: grid; gap: 10px; grid-template-columns: 30px minmax(0, 1fr) 92px 116px 16px; }
  #v-cull .cull-cols span:nth-child(3) { text-align: center; }
  #v-cull .cull-cols span:nth-child(4) { text-align: right; }
  #v-cull #cull-list .cow { display: grid; gap: 10px; grid-template-columns: 30px minmax(0, 1fr) 92px 116px 16px; align-items: center; }
  #v-cull #cull-list .cow > * { min-width: 0; }
  #v-cull #cull-list .cow .tag { justify-self: center; }
  #v-cull #cull-list .cow .econ { justify-self: end; }
  #v-cull #cull-list { max-height: 52vh; overflow-y: auto; }
}

/* =============================================================== 桌機 */
@media (min-width: 1180px) {
  #v-cull .cull-hero { min-height: 254px; }
  /* 稿：左欄清單＋分布圖，右欄決策分布／現場卡／專業建議（桌機才有足夠寬度） */
  #v-cull .cull-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 18px; align-items: start; }
  #v-cull .cull-pagehd__t b { font-size: 30px; }
  #v-cull .cull-donut__c { width: 132px; height: 132px; }
}

/* =============================================================== 手機
   稿上三張決策卡是可左右滑的輪播；390px 下直排會把清單推到兩屏以外，
   故保留橫向捲動（容器內捲，不造成頁面橫向捲動），並維持 44px 觸控目標。 */
@media (max-width: 767px) {
  #v-cull .cull-pagehd { align-items: center; }
  #v-cull .cull-pagehd__t b { font-size: 21px; }
  #v-cull .cull-pagehd__t span { font-size: 11.5px; }
  #v-cull .cull-dl { padding: 0 14px; font-size: 12.5px; }

  #v-cull .cull-decisions {
    display: flex; gap: 10px; margin: 0 -16px 16px; padding: 2px 16px 6px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  #v-cull .cull-decisions::-webkit-scrollbar { display: none; }
  #v-cull .cdec { flex: 0 0 82%; scroll-snap-align: start; padding: 14px; gap: 11px; }
  #v-cull .cdec .ic-orb { width: 42px; height: 42px; }
  #v-cull .cdec .ic-orb .ic { width: 23px; height: 23px; }
  #v-cull .cdec__n { font-size: 24px; }
  #v-cull .cdec__t { font-size: 13.5px; }

  #v-cull #cull-list .cow { flex-wrap: wrap; row-gap: 4px; padding: 12px 6px; gap: 10px; }
  #v-cull #cull-list .cid { flex: 1 1 40%; }
  #v-cull #cull-list .econ { font-size: 14px; }
  #v-cull .cull-field__body { max-width: 74%; padding: 16px; }
  #v-cull .cull-donut__row { gap: 12px; }
  #v-cull .cull-donut__c { width: 108px; height: 108px; }
  #v-cull .cull-donut__c svg { width: 108px; height: 108px; }
  #v-cull .cull-base { font-size: 11px; padding: 5px 10px; }
}

/* ============================================================ 健檢頁（01-health）
   逐項比對稿後補上的三個區塊：英雄卡等級、優勢/待加強卡、遺傳可靠度總覽。 */

/* ---- 英雄卡：評分環下方的「品質指數」與排名徽章、右側等級字母 ---- */
#v-health .hero-score { align-items: flex-start; }
#v-health .hero-gwrap { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#v-health .hero-gcap { font-size: 11px; color: rgb(255 255 255 / .78); font-weight: 600; }
#v-health .hero-gbadge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .16); color: #fff; border: 1px solid rgb(255 255 255 / .24);
}
#v-health .hero-gbadge svg { width: 13px; height: 13px; }
#v-health .hero-grade { padding-left: 16px; border-left: 1px solid rgb(255 255 255 / .22); align-self: stretch; }
#v-health .hero-grade__lab { font-size: 11.5px; color: rgb(255 255 255 / .74); font-weight: 600; }
#v-health .hero-grade .g { font-size: 34px; font-weight: 800; line-height: 1.05; margin-top: 1px; color: #7fd4a8; }
#v-health .hero-grade__word { font-size: 14px; font-weight: 700; color: #fff; margin-top: 2px; }
#v-health .hero-grade .r { font-size: 12px; line-height: 1.55; color: rgb(255 255 255 / .82); margin-top: 5px; max-width: 26ch; }

/* ---- 優勢 / 待加強卡 ---- */
#v-health .hl-card { margin-top: 12px; }
#v-health .hl-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; }
#v-health .hl-lab { flex: none; width: 44px; font-size: 12.5px; font-weight: 700; padding-top: 6px; }
#v-health .hl-lab--good { color: var(--brand-700); }
#v-health .hl-lab--bad  { color: var(--amber-700); }
#v-health .hl-chips { display: flex; flex-wrap: wrap; gap: 7px; }
#v-health .hl-chip {
  font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: var(--radius-pill);
  border: 1px solid transparent; white-space: nowrap;
}
#v-health .hl-chip--good { background: var(--brand-100); color: var(--brand-800); border-color: var(--brand-300); }
#v-health .hl-chip--bad  { background: var(--amber-100); color: var(--amber-700); border-color: #e8cf95; }
/* 「· 同期贏過X%」後綴:同 chip 內的第二把尺(現役場互比),降權重免得跟歷年主數字打架 */
#v-health .hl-chip__pct  { font-weight: 500; opacity: .75; }
#v-health .hl-none { font-size: 12px; color: var(--ink-500); padding: 6px 0; }
#v-health .hl-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-1); }
#v-health .hl-note b { font-size: 12.5px; font-weight: 700; color: var(--ink-950); }
#v-health .hl-note div { font-size: 12.5px; line-height: 1.65; color: var(--ink-600); margin-top: 4px; }

/* ---- 遺傳可靠度總覽 ---- */
#v-health .rel-row { display: flex; align-items: center; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
#v-health .rel-donut { flex: none; }
/* min-width 決定何時換行到甜甜圈下方。150px 太小，5 欄版面下卡寬只有 300px、
   圖例分到 170px，「中（50–79%）」與「0 頭」都會折行。設 200px 讓它乾脆換到下一列。 */
#v-health .rel-legend { flex: 1 1 200px; min-width: 200px; display: flex; flex-direction: column; gap: 9px; }
#v-health .rel-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
#v-health .rel-item i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
#v-health .rel-item .rel-l { color: var(--ink-600); }
#v-health .rel-item b { margin-left: auto; font-weight: 800; color: var(--ink-950); }
#v-health .rel-item s { text-decoration: none; color: var(--ink-500); font-size: 11.5px; width: 36px; text-align: right; }

@media (max-width: 430px) {
  #v-health .hero-grade .g { font-size: 28px; }
  #v-health .hero-grade { padding-left: 12px; }
  #v-health .hl-lab { width: 40px; font-size: 12px; }
}

/* ---- 優勢卡 ｜ 決策卡 並排（稿上是同一列）---- */
#v-health .hl-deck { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
#v-health .hl-card { margin-top: 0; }
#v-health .hl-acts {
  background: var(--surface-0); border: 1px solid var(--line-1);
  border-radius: var(--radius-lg); padding: 16px 16px 14px; box-shadow: var(--shadow-sm);
}
/* #health-decisions 帶著全域 .cardgrid，在半寬容器內會沿用外層的 2–3 欄設定而過窄；
   在此重新宣告，手機單欄、寬螢幕才三欄。 */
/* align-items 必須明寫 stretch：.cardgrid 的 align-items:start 在 flex 直向下
   會讓三張卡各自縮成內容寬（實測 237/164/178px），而不是等寬。 */
#v-health .hl-acts #health-decisions {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 10px;
}
#v-health .hl-acts .action.act { border-radius: var(--radius-md); padding: 13px 14px; }

@media (min-width: 768px) {
  #v-health .hl-deck { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 14px; align-items: start; }
  #v-health .hl-acts .action.act { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px; }
  #v-health .hl-acts .action.act .ic-orb { width: 40px; height: 40px; }
  #v-health .hl-acts .action.act .ic-orb svg { width: 21px; height: 21px; }
  #v-health .hl-acts .action.act .act-body b { font-size: 13.5px; line-height: 1.4; display: block; }
  #v-health .hl-acts .action.act .act-body > div { font-size: 11.5px; line-height: 1.55; margin-top: 4px; }
  #v-health .hl-acts .action.act .act-cta { margin-top: 10px; font-size: 12px; padding: 6px 12px; }
  /* 直向排列後右側箭頭失去對位意義，改放在標題列尾端 */
  #v-health .hl-acts .action.act .chev { display: none; }
}
@media (min-width: 1180px) {
  #v-health .hl-deck { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 16px; }
  /* 稿上三張決策卡在卡片內是並排的一列——但要有足夠寬度。
     平板(834px)算下來每張只有 109px，CTA「查看推薦公牛」需 98px 而溢出，
     故三欄留到桌機；平板維持直向堆疊。 */
  #v-health .hl-acts #health-decisions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

/* ==================================================== 寬螢幕：內容區與圖表列
   使用者回報「橫向寬度還夠，卻排不成參考稿那樣」。實測兩個原因：
   1) --content-max: 1680px 把 .phone 鎖死——1900/2200/2560px 的視窗，內容區
      都只有 1432px。規格 §4 寫 1680px，但參考稿本身是 2560px 寬、內容約 2250px，
      規格與稿互相矛盾；此處照稿的實際觀感放寬到 2200px。
   2) .cardgrid 在 ≥1024 寫死 repeat(3,...)，所以 5 張圖表永遠排成 3+2，
      與螢幕多寬無關。改用 auto-fit：能塞幾欄就幾欄，卡片數少時空軌道會塌陷、
      不會留下空欄。 */
:root { --content-max: 2200px; }

/* 分兩段而非直接 auto-fit：5 張卡要排成一列需要內容寬 ≥ 5×300+4×14 ＝ 1556px，
   對應視窗約 1860px。在 1180–1859 之間 auto-fit 會給出 4 軌，5 張卡變成 4+1 的
   孤兒排列（實測 1680px 視窗正是如此），比 3+2 難看。故該區間維持 3 欄。 */
@media (min-width: 1180px) and (max-width: 1859px) {
  .cardgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
}
@media (min-width: 1860px) {
  .cardgrid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 14px; }
}
/* .g2 是「刻意兩欄」的版位（左右對照用），不受上面兩段影響 */
@media (min-width: 1180px) {
  .cardgrid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================== 圖表說明：短句 + ⓘ 收合細節
   稿的註腳都只有一行（「* 與全國 1,892 場比較」），本系統的說明長到 3 句，
   版面因此比稿雜亂。但那些是避免誤讀的科學限制，不能直接刪。
   折衷：主句留在版面上，限制與方法學收進 ⓘ——稿的「本場指數分布」本來就有 ⓘ，
   屬同一套設計語彙。 */
.chart-t { display: flex; align-items: center; gap: 6px; }
/* 外層 button 只負責觸控區（手機 44×44，§9），視覺上的圓由內層 <i> 畫，
   維持 18px 以免蓋過圖表標題。 */
.cap-i {
  flex: none; border: 0; background: none; padding: 0; cursor: pointer;
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
}
.cap-i > i {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong);
  color: var(--ink-500); font-size: 11px; font-weight: 700; font-style: normal; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}
.cap-i:hover > i,
.cap-i[aria-expanded="true"] > i { border-color: var(--brand-500); color: var(--brand-700); background: var(--brand-100); }
/* ⓘ 已改用官方 info-circle。原本的 .cap-i > i 是 CSS 畫圓＋文字 i，對 svg 完全不適用，
   只改 HTML 不補這段的話按鈕會失去顏色與 hover 回饋（規則仍保留，供 icon() 不可用時的 fallback）。 */
.cap-i > svg { width: 18px; height: 18px; color: var(--ink-500); transition: color var(--duration-fast); }
.cap-i:hover > svg,
.cap-i[aria-expanded="true"] > svg { color: var(--brand-700); }
.cap-i:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 1px; border-radius: 50%; }
@media (max-width: 767px) { .cap-i { width: 44px; height: 44px; margin: -11px 0; } }
.cap-more {
  display: none; margin: 8px 2px 0; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-soft); border: 1px solid var(--line-1);
  font-size: 11.5px; line-height: 1.7; color: var(--ink-600);
}
.cap-more.open { display: block; }
.cap-more b { color: var(--ink-800); }

/* KPI 卡若嵌在 .card 內（熱緊迫的熱損失估算等），還要再扣一層卡片 padding，
   手機下每張只有 154px，文字欄剩 80px 而「~NT$4,000」在 19px 需 96px。
   此情境再收緊 orb 與級數。 */
@media (max-width: 430px) {
  .card .kpi--ic { padding: 10px; gap: 8px; }
  .card .kpi--ic .ic-orb { width: 32px; height: 32px; }
  .card .kpi--ic .ic-orb svg { width: 17px; height: 17px; }
  .card .kpi--ic b { font-size: 17.5px; }
}

/* 載入失敗提示（loadFarm 的 catch）。原本錯誤只進 console，使用者會看到
   半渲染的頁面卻不知情——甚至把上一個牧場的圖表數字當成自己的。 */
.loaderr {
  display: none; margin: 4px 0 12px; padding: 12px 14px;
  border-radius: var(--radius-md); background: var(--surface-risk);
  border: 1px solid var(--danger-100); color: var(--ink-950);
}
.loaderr b { font-size: 14px; font-weight: 800; color: var(--danger-700); }
.loaderr div { font-size: 12.5px; line-height: 1.6; color: var(--ink-600); margin-top: 3px; }
.loaderr-d { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); }

/* ============================================================================
   配種頁（#v-mate）— 高保真稿套用
   ----------------------------------------------------------------------------
   全部規則都掛在 #v-mate 底下：.card/.cow/.kpi/.chart-t/.chev/.note 等 class
   全站共用（.kpi 一站 19 處），裸選擇器會外溢到其他五頁，故一律加頁面 id 前綴。

   版面照稿、數據照現況。稿上這些欄位在 bundle 內不存在，一律不補：
   假牛號／假 NAAB／43 頭（真實 24 頭待配、55 頭在群）／「較上期 +2 頭」（無上期快照）／
   F% 的 99 與 sex 型式膠囊（逐頭是否選性由 SEXPCT 經營假設推出、非實測）／
   預產日與配種日（mating.cows 24 頭全為 wait，無任何日期欄位）／
   逐頭母牛照片（無此資產，改用中性圖示圓章）。
   ========================================================================== */

#v-mate {
  --mate-green: var(--brand-700);
  --mate-amber: var(--amber-700);
  --mate-red: var(--danger-700);
  /* 代理商甜甜圈配色。renderMateSide() 以 var(--mdo-0..4) 取用，
     這五個變數原本從未被定義過 → SVG stroke 解析失敗，整張圖只剩灰色底環。 */
  --mdo-0: var(--brand-800);
  --mdo-1: var(--coral-500);
  --mdo-2: var(--amber-500);
  --mdo-3: #7cc0a3;
  --mdo-4: #9aa8a2;
}

/* 卡片節奏與留種淘汰／熱緊迫頁一致 */
#v-mate .card {
  border-radius: var(--radius-lg); border: 1px solid var(--line-1);
  box-shadow: var(--shadow-sm); padding: 16px 18px; margin-bottom: 0;
}
#v-mate .chart-t { font-size: 14.5px; font-weight: 800; color: var(--ink-950); margin: 0 0 10px; line-height: 1.35; }
#v-mate .chart-cap { font-size: 11.5px; color: var(--ink-500); margin: 10px 2px 0; line-height: 1.6; }
#v-mate .chart-cap b { color: var(--ink-800); }
/* 列內的 <s> 是次要文字（NAAB 下的牛名、風險數值），不是刪除線 */
#v-mate s { text-decoration: none; }

/* ------------------------------------------------------------------ 頁首列 */
#v-mate .mate-pagehd { display: flex; align-items: flex-start; gap: 12px; margin: 2px 2px 14px; }
#v-mate .mate-pagehd__t { flex: 1; min-width: 0; }
#v-mate .mate-pagehd__t b { display: block; font-size: 24px; font-weight: 800; color: var(--ink-950); line-height: 1.2; }
#v-mate .mate-pagehd__t span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-600); line-height: 1.5; }

/* -------------------------------------------------------------------- 英雄卡 */
#v-mate .mate-hero { min-height: 190px; margin-bottom: 14px; border-radius: var(--radius-lg); }
#v-mate .mate-hero .page-hero__media img { object-position: center 44%; }
/* 稿：左側深綠實色承載文字，往右淡出成照片。共用的 .page-hero__scrim 是由下往上的
   直向遮罩，文字壓在照片亮部上會讀不清，這裡改成橫向。 */
#v-mate .mate-hero .page-hero__scrim {
  background: linear-gradient(90deg, rgb(6 56 45) 0%, rgb(6 56 45 / .94) 34%, rgb(6 56 45 / .42) 60%, rgb(6 56 45 / .05) 82%);
}
#v-mate .mate-hero .page-hero__content { padding: 22px 20px; max-width: 58%; }
#v-mate .mate-hero .page-hero__title { font-size: 23px; }
#v-mate .mate-hero .page-hero__desc { max-width: 42ch; margin-top: 8px; font-size: 12.5px; line-height: 1.65; }
/* 育種目標徽章：與留種淘汰頁的 .cull-hero__badge 同一語彙。
   內容是「文字＋<b>＋文字」三段，用 flex 會讓每段各自成為 flex item，
   窄螢幕下在段與段之間硬斷行（「育種目／標：」），故用 inline-block 走正常文字流。 */
#v-mate .mate-hero__goal {
  display: inline-block; margin-top: 14px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .26);
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4; backdrop-filter: blur(2px);
}
#v-mate .mate-hero__goal b { font-weight: 800; }

/* ------------------------------------------------------------------ KPI 四張 */
#v-mate .mate-kpis { gap: 12px; margin-bottom: 8px; }
#v-mate .mate-kpis .kpi--ic {
  position: relative; border-radius: var(--radius-lg); border: 1px solid var(--line-1);
  box-shadow: var(--shadow-sm); padding: 15px 16px; align-items: flex-start;
}
#v-mate .mate-kpis .kpi--ic b { font-size: 26px; }
#v-mate .mate-kpis .kb em { margin-top: 5px; line-height: 1.5; padding-right: 46px; }
/* 稿：分層占比膠囊釘在卡片右下 */
#v-mate .mate-pct {
  position: absolute; right: 14px; bottom: 13px; font-style: normal;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 800; line-height: 1.45; font-variant-numeric: tabular-nums;
}
#v-mate .mate-pct:empty { display: none; }
#v-mate .mate-pct--green { background: var(--brand-100); color: var(--mate-green); }
#v-mate .mate-pct--amber { background: var(--amber-100); color: var(--mate-amber); }
#v-mate .mate-pct--red   { background: var(--surface-risk); color: var(--mate-red); }
#v-mate .mate-kpicap { margin: 0 4px 16px; font-size: 11px; color: var(--ink-500); line-height: 1.6; }
#v-mate .mate-kpicap b { color: var(--ink-800); }

/* ------------------------------------------------------- 策略模式／來源／採購 */
#v-mate .mate-ctrls { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
#v-mate .mate-ctrl__hd {
  display: flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 800; color: var(--ink-950); margin-bottom: 12px;
}
#v-mate .mate-ctrl__i {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong);
  color: var(--ink-500); font-size: 10px; font-weight: 700; cursor: help;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
#v-mate .mate-modes { display: flex; flex-wrap: wrap; gap: 10px; }
/* 稿的模式鈕是等寬白底方塊、選取態淡綠底＋綠框。.pchip/.mchip 全站共用，只在本頁改寫。 */
#v-mate .mate-modes .pchip,
#v-mate .mate-modes .mchip {
  flex: 1 1 128px; min-height: 46px; padding: 9px 12px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--surface-0); border: 1px solid var(--line-1); color: var(--ink-800);
  font-size: 13px; font-weight: 700; line-height: 1.35; text-align: center; cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
#v-mate .mate-modes .pchip .ic,
#v-mate .mate-modes .mchip .ic { width: 18px; height: 18px; flex: none; color: var(--ink-500); }
#v-mate .mate-modes .pchip:hover,
#v-mate .mate-modes .mchip:hover { border-color: var(--line-strong); background: var(--surface-soft); }
#v-mate .mate-modes .pchip.on,
#v-mate .mate-modes .mchip.on {
  background: var(--brand-100); border-color: var(--brand-500); color: var(--brand-800);
}
#v-mate .mate-modes .pchip.on .ic,
#v-mate .mate-modes .mchip.on .ic { color: var(--brand-700); }
#v-mate .mate-modes .pchip:focus-visible,
#v-mate .mate-modes .mchip:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; }

#v-mate #mode-hint, #v-mate #mate-summary {
  margin-top: 12px; font-size: 11.5px; line-height: 1.65; color: var(--ink-500);
}
#v-mate #mode-hint b, #v-mate #mate-summary b { color: var(--ink-800); }
#v-mate .mate-src { margin-top: 12px; font-size: 12px; }
/* summary 的 display 一旦不是 list-item，它就不再是 <details> 的揭露控制項，
   collapsed 狀態下整個篩選面板仍會被排版出來（audit 會抓到 13×13 的 checkbox）。
   這裡只能改 padding／字級，display 必須留給瀏覽器。 */
#v-mate .mate-src > summary {
  cursor: pointer; padding: 7px 0 7px 2px; margin-left: 14px;
  font-size: 12px; font-weight: 700; color: var(--brand-700);
}
#v-mate .mate-src > summary:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; border-radius: 6px; }
#v-mate #src-filter { margin-top: 8px; padding: 11px 12px; border-radius: var(--radius-sm);
  background: var(--surface-soft); border: 1px solid var(--line-1); font-size: 12px; color: var(--ink-800); }
/* 來源勾選膠囊。瀏覽器預設 checkbox 只有 13×13，遠低於 §9 的 44px；
   這裡把 input 透明鋪滿整個 label，觸控目標就等於膠囊本身，
   勾選記號改由 <i> 繪製（:has 判斷 checked）。 */
#v-mate #src-filter .srcbox {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  /* 46px：input 以 inset:0 疊在 padding box 上，會比 label 少掉上下各 1px 邊框，
     取 46 才能讓實際觸控目標剛好 ≥44（§9）。 */
  min-height: 46px; margin: 3px 8px 3px 0; padding: 0 13px 0 11px;
  border-radius: var(--radius-pill); background: var(--surface-0);
  border: 1px solid var(--line-1); color: var(--ink-800);
  font-size: 12px; font-weight: 600; line-height: 1.35; cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
#v-mate #src-filter .srcbox input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
#v-mate #src-filter .srcbox > i {
  flex: none; width: 17px; height: 17px; border-radius: 5px;
  border: 1.5px solid var(--line-strong); background: var(--surface-0);
  position: relative; transition: background var(--duration-fast), border-color var(--duration-fast);
}
#v-mate #src-filter .srcbox > i::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); opacity: 0;
}
#v-mate #src-filter .srcbox:hover { border-color: var(--line-strong); background: var(--surface-soft); }
#v-mate #src-filter .srcbox:has(input:checked) { border-color: var(--brand-500); background: var(--brand-100); color: var(--brand-800); }
#v-mate #src-filter .srcbox:has(input:checked) > i { background: var(--brand-700); border-color: var(--brand-700); }
#v-mate #src-filter .srcbox:has(input:checked) > i::after { opacity: 1; }
#v-mate #src-filter .srcbox:has(input:focus-visible) { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; }
@media (max-width: 767px) { #v-mate .mate-src > summary { padding: 12px 0 12px 2px; } }

/* 採購計畫卡：全頁唯一的珊瑚橘主操作 */
#v-mate .mate-proc__kpis { display: flex; flex-wrap: wrap; gap: 10px 22px; }
#v-mate .mate-proc__kpis > div { min-width: 84px; }
#v-mate .mate-proc__kpis small { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-600); }
#v-mate .mate-proc__kpis b {
  display: block; margin-top: 3px; font-size: 20px; font-weight: 800; color: var(--ink-950);
  line-height: 1.2; font-variant-numeric: tabular-nums;
}
#v-mate .mate-proc__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px;
  min-height: 46px; padding: 0 18px; font-family: inherit; font-size: 13.5px; font-weight: 800;
  color: #fff; background: var(--coral-solid); border: 0; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
#v-mate .mate-proc__cta:hover { background: var(--coral-600); }
#v-mate .mate-proc__cta:focus-visible { outline: 3px solid rgb(241 107 77 / .45); outline-offset: 2px; }
#v-mate .mate-proc__cta .ic { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- 主版面 */
#v-mate .mate-grid { display: flex; flex-direction: column; gap: 16px; }
#v-mate .mate-main, #v-mate .mate-side { display: flex; flex-direction: column; gap: 16px; }
#v-mate .mate-listcard { padding: 16px 16px 10px; }
#v-mate .mate-main > .note { margin: 0; }

/* -------------------------------------------------------------- 待配種清單 */
#v-mate .mate-listhd { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
#v-mate .mate-listhd__t { flex: 1; min-width: 0; }
#v-mate .mate-listhd__t b { display: block; font-size: 16px; font-weight: 800; color: var(--ink-950); }
#v-mate .mate-listhd__t small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-500); }
#v-mate .mate-listhd__sw {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-600);
}

#v-mate .mate-cols {
  display: none; align-items: center; gap: 10px; padding: 0 8px 8px;
  border-bottom: 1px solid var(--line-1); font-size: 11.5px; font-weight: 700; color: var(--ink-500);
}
#v-mate #mate-list { max-height: 56vh; overflow-y: auto; }
#v-mate #mate-list.mate-list--all { max-height: none; overflow-y: visible; }
#v-mate #mate-list .cow {
  gap: 10px; padding: 11px 8px; border-bottom: 1px solid var(--line-1);
  border-radius: 12px; cursor: pointer;
}
#v-mate #mate-list .cow:last-child { border-bottom: 0; }
#v-mate #mate-list .cow:hover { background: var(--surface-soft); }
#v-mate #mate-list .cow.mno { cursor: default; }
#v-mate #mate-list .cow.mno:hover { background: none; }

/* 中性圖示圓章（非該頭牛的相片，見檔頭說明） */
#v-mate #mate-list .mavat {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-100); color: var(--brand-700);
}
#v-mate #mate-list .mavat .ic { width: 18px; height: 18px; }

#v-mate #mate-list .cid { flex: 1; min-width: 0; }
#v-mate #mate-list .cid b { font-size: 14.5px; font-weight: 800; color: var(--ink-950); }
#v-mate #mate-list .cid div {
  margin-top: 3px; font-size: 11.5px; color: var(--ink-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 近親風險：稿是盾牌圖示＋分級＋括號數值 */
#v-mate #mate-list .mrisk {
  flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12.5px; font-weight: 800; color: var(--ink-600);
}
#v-mate #mate-list .mrisk > i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
#v-mate #mate-list .mrisk > s { font-size: 11.5px; font-weight: 600; color: var(--ink-500); font-variant-numeric: tabular-nums; }
#v-mate #mate-list .mrisk--low  { color: var(--mate-green); }
#v-mate #mate-list .mrisk--mid  { color: var(--mate-amber); }
#v-mate #mate-list .mrisk--high { color: var(--mate-red); }

/* 建議公牛：NAAB 碼在上、牛名在下 */
#v-mate #mate-list .mbull { min-width: 0; display: block; }
#v-mate #mate-list .mbull b {
  display: block; font-size: 12.5px; font-weight: 800; color: var(--ink-950);
  font-family: var(--font-mono); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#v-mate #mate-list .mbull s {
  display: block; margin-top: 2px; font-size: 11px; color: var(--ink-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#v-mate #mate-list .mnm {
  flex: none; font-size: 14px; font-weight: 800; color: var(--mate-green);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 狀態：稿是圓點＋文字 */
#v-mate #mate-list .mst {
  flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700;
}
#v-mate #mate-list .mst > i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
#v-mate #mate-list .mst--wait { color: var(--coral-600); }
#v-mate #mate-list .mst--done { color: var(--mate-green); }
#v-mate #mate-list .mst--preg { color: var(--brand-800); }
#v-mate #mate-list .chev { flex: none; color: var(--ink-500); font-size: 18px; }
#v-mate #mate-list .mchev-off { opacity: 0; }
#v-mate .mate-empty { padding: 26px 8px; text-align: center; font-size: 12.5px; color: var(--ink-500); }

/* 查看全部／收合 */
/* .mate-more 系列已隨「查看全部 N 頭」改為分頁而移除（見 index.html renderMatePager）。 */

/* ------------------------------------------------------ 代理商／公司分布 */
#v-mate .mate-donut__row { display: flex; align-items: center; gap: 16px; }
#v-mate .mate-donut__c { position: relative; flex: none; width: 120px; height: 120px; }
#v-mate .mate-donut__mid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
#v-mate .mate-donut__mid b { font-size: 27px; font-weight: 800; color: var(--ink-950); line-height: 1.1; font-variant-numeric: tabular-nums; }
#v-mate .mate-donut__mid small { font-size: 11px; color: var(--ink-600); margin-top: 1px; }
#v-mate .mate-donut__lg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
#v-mate .mate-lg { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 3px 9px; align-items: center; }
#v-mate .mate-lg > i { width: 9px; height: 9px; border-radius: 50%; }
#v-mate .mate-lg .l {
  font-size: 12.5px; font-weight: 700; color: var(--ink-950);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#v-mate .mate-lg .v { grid-column: 2; font-size: 11.5px; color: var(--ink-600); font-variant-numeric: tabular-nums; }
#v-mate .mate-lg .v b { font-size: 13px; font-weight: 800; color: var(--ink-950); }

/* -------------------------------------------------------- 近親風險安全總覽 */
#v-mate .minb-hd { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
#v-mate .minb-hd .ic-orb { flex: none; width: 52px; height: 52px; }
#v-mate .minb-hd .ic-orb .ic { width: 26px; height: 26px; }
#v-mate .minb-hd__b { flex: 1; min-width: 0; }
#v-mate .minb-hd__b small { display: block; font-size: 12px; font-weight: 600; color: var(--ink-600); }
#v-mate .minb-hd__v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 3px; font-size: 15px; font-weight: 700; color: var(--ink-950); }
#v-mate .minb-hd__v b { font-size: 28px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
#v-mate .minb-hd__v em {
  font-style: normal; padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 800; line-height: 1.4;
}
#v-mate .minb-hd__v em.ok    { background: var(--brand-100); color: var(--mate-green); }
#v-mate .minb-hd__v em.watch { background: var(--amber-100); color: var(--mate-amber); }

#v-mate .minb-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px;
  align-items: center; padding: 9px 0; border-top: 1px solid var(--line-1);
}
/* DOM 順序是 .l → .bar → .v，若交給自動配置，.v 會被擠到長條下一列，
   讀起來像是下一個級別的頭數。三者一律明確指定格位。 */
#v-mate .minb-row .l { grid-column: 1; grid-row: 1; font-size: 12.5px; font-weight: 700; color: var(--ink-950); }
#v-mate .minb-row .l > s { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--ink-500); font-variant-numeric: tabular-nums; }
#v-mate .minb-row .v { grid-column: 2; grid-row: 1; justify-self: end; font-size: 11.5px; color: var(--ink-600); white-space: nowrap; font-variant-numeric: tabular-nums; }
#v-mate .minb-row .v b { font-size: 16px; font-weight: 800; }
#v-mate .minb-row .bar {
  grid-column: 1 / -1; grid-row: 2; height: 6px; border-radius: var(--radius-pill);
  background: var(--track); overflow: hidden;
}
#v-mate .minb-row .bar > i { display: block; height: 100%; border-radius: var(--radius-pill); background: currentColor; }
#v-mate .minb-row--high { color: var(--mate-red); }
#v-mate .minb-row--mid  { color: var(--mate-amber); }
#v-mate .minb-row--low  { color: var(--mate-green); }
#v-mate .minb-row--high .v b { color: var(--mate-red); }
#v-mate .minb-row--mid  .v b { color: var(--mate-amber); }
#v-mate .minb-row--low  .v b { color: var(--mate-green); }

/* ============================================================== 平板以上 */
@media (min-width: 768px) {
  #v-mate .mate-pagehd { margin: 4px 2px 18px; }
  #v-mate .mate-pagehd__t b { font-size: 27px; }
  #v-mate .mate-hero { min-height: 232px; margin-bottom: 18px; }
  #v-mate .mate-hero .page-hero__content { padding: 26px 24px; max-width: 54%; }
  #v-mate .card { padding: 18px 20px; }
  #v-mate .mate-listcard { padding: 18px 18px 10px; }

  /* 稿：策略模式與精液來源並排，採購計畫獨立一張（桌機才移到同一列） */
  #v-mate .mate-ctrls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  #v-mate .mate-proc { grid-column: 1 / -1; }
  #v-mate .mate-proc__cta { width: auto; min-width: 220px; }

  /* 表頭與資料列共用同一組欄寬，數字才對得齊 */
  /* 稿：來源三選一排成一列（策略模式有 4 個真實模式，維持 2×2） */
  #v-mate .mate-modes--src .mchip { flex: 1 1 118px; }

  #v-mate .mate-cols,
  #v-mate #mate-list .cow {
    display: grid; gap: 10px; align-items: center;
    grid-template-columns: 34px minmax(0, 1fr) 104px minmax(0, 1.45fr) 62px 86px 14px;
  }
  #v-mate .mate-cols { display: grid; }
  #v-mate #mate-list .cow > * { min-width: 0; }
  #v-mate .mate-cols span:nth-child(5) { text-align: right; }
  #v-mate #mate-list .cow .mnm { justify-self: end; }
}

/* ================================================================== 桌機 */
@media (min-width: 1180px) {
  #v-mate .mate-hero { min-height: 254px; }
  #v-mate .mate-pagehd__t b { font-size: 30px; }
  /* 稿：左欄待配清單，右欄代理商分布／近親總覽 */
  #v-mate .mate-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 18px; align-items: start; }
  /* 三張控制卡在桌機並排成一列（稿上就是這樣） */
  #v-mate .mate-ctrls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 300px); }
  #v-mate .mate-proc { grid-column: auto; }
  #v-mate .mate-donut__c { width: 132px; height: 132px; }
}

/* 超寬：內容區已放寬到 2200px，清單欄再寬也不需要更多欄位，把側欄放大以免右側留白 */
@media (min-width: 1860px) {
  #v-mate .mate-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
  #v-mate .mate-donut__c { width: 140px; height: 140px; }
}

/* ================================================================== 手機
   390px 下 7 欄一列一定裁字（audit 已回報 div.cow 需 435px 只有 324px）。
   稿的手機版就是卡片列：左圓章，右側三行分別放 牛號/狀態、建議公牛、風險/NM$。 */
@media (max-width: 767px) {
  #v-mate .mate-pagehd__t b { font-size: 21px; }
  #v-mate .mate-pagehd__t span { font-size: 11.5px; }
  #v-mate .mate-hero { min-height: 220px; }
  /* 稿的手機版仍是左文右牛，不是整張壓黑，故維持橫向漸層、只把不透明段拉長 */
  #v-mate .mate-hero .page-hero__content { max-width: 74%; padding: 18px 16px; }
  #v-mate .mate-hero .page-hero__scrim {
    background: linear-gradient(96deg, rgb(6 56 45) 0%, rgb(6 56 45 / .94) 52%, rgb(6 56 45 / .58) 76%, rgb(6 56 45 / .12) 100%);
  }
  #v-mate .mate-hero .page-hero__title { font-size: 20px; }
  #v-mate .mate-hero .page-hero__desc { max-width: none; }
  #v-mate .mate-hero__goal { padding: 7px 11px; font-size: 11.5px; }

  #v-mate .mate-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #v-mate .mate-kpis .kpi--ic { padding: 13px 12px; }
  #v-mate .mate-kpis .kpi--ic b { font-size: 21px; }
  #v-mate .mate-kpis .kb em { padding-right: 0; }
  /* 手機改回正常文字流：絕對定位會讓沒有 pill 的「在群」卡留一塊空白 */
  #v-mate .mate-pct { position: static; display: inline-block; margin-top: 7px; }

  #v-mate .mate-modes .pchip,
  #v-mate .mate-modes .mchip { flex: 1 1 calc(50% - 5px); justify-content: center; min-height: 48px; padding: 9px 8px; }
  #v-mate .mate-proc__kpis { gap: 10px 18px; }
  #v-mate .mate-proc__kpis b { font-size: 18px; }

  #v-mate .mate-listcard { padding: 15px 14px 8px; }
  #v-mate .mate-listhd__sw { width: 100%; }
  #v-mate #mate-list .cow {
    display: grid; align-items: center; gap: 4px 10px;
    grid-template-columns: 34px minmax(0, 1fr) auto 14px;
    grid-template-areas:
      "av id   st   chev"
      "av bull bull chev"
      "av risk nm   chev";
    padding: 12px 6px;
  }
  #v-mate #mate-list .cow > * { min-width: 0; }
  #v-mate #mate-list .mavat { grid-area: av; align-self: start; margin-top: 2px; }
  #v-mate #mate-list .cid   { grid-area: id; }
  #v-mate #mate-list .mst   { grid-area: st; justify-self: end; font-size: 12px; }
  #v-mate #mate-list .mbull { grid-area: bull; }
  #v-mate #mate-list .mrisk { grid-area: risk; }
  #v-mate #mate-list .mnm   { grid-area: nm; justify-self: end; font-size: 13px; }
  #v-mate #mate-list .chev  { grid-area: chev; justify-self: end; }
  #v-mate #mate-list .cid div { margin-top: 2px; }

  #v-mate .mate-donut__row { flex-direction: column; align-items: stretch; gap: 14px; }
  #v-mate .mate-donut__c { align-self: center; width: 128px; height: 128px; }
  #v-mate .minb-hd .ic-orb { width: 46px; height: 46px; }
  #v-mate .minb-hd__v b { font-size: 24px; }
}

/* ============================================================================
   自訂指數頁（#v-custom）— 高保真稿套用
   ----------------------------------------------------------------------------
   全部規則掛在 #v-custom 底下：.card/.kpi/.chart-t/.pchip/.slrow 等 class 全站共用，
   裸選擇器會弄壞其他頁。
   稿與現況的差異處理原則「版面照稿、數據照現況」：
   · 稿的金額尺度（NTM$ 18,420）與 43 頭、逐頭牛照片都是編的 → 一律改用本系統既有的
     指數尺度（100 ＝ 全國平均）、真實頭數與圖示頭像。
   · 稿只有 3 顆情境鈕、6 條滑桿；本系統有 5 組情境、8 條性狀（含配種用 PL），全部保留。
   ========================================================================== */
#v-custom .card {
  background: var(--surface-0); border: 1px solid var(--line-1);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 18px 18px 16px; margin-bottom: 14px;
}
#v-custom .card.chart { padding: 16px 16px 14px; }
#v-custom .chart-t {
  font-size: 14.5px; font-weight: 800; color: var(--ink-950);
  margin: 0 0 12px; line-height: 1.35;
}
#v-custom .cix-hd__sub { font-size: 12px; font-weight: 600; color: var(--ink-500); }
#v-custom .chart-cap { font-size: 11.5px; color: var(--ink-500); margin: 10px 2px 0; line-height: 1.6; }
#v-custom .chart-cap b { color: var(--ink-800); }
#v-custom .cix-empty { font-size: 12px; color: var(--ink-500); padding: 18px 4px; }
/* 列內的 <s> 是次要文字（官方名次、單位），不是刪除線 */
#v-custom s { text-decoration: none; }
#v-custom > .note { margin: 4px 0 0; }

/* ------------------------------------------------------------------ 頁首列 */
#v-custom .cix-pagehd { display: flex; align-items: flex-start; gap: 12px; margin: 2px 2px 14px; }
#v-custom .cix-pagehd__t b { display: block; font-size: 24px; font-weight: 800; color: var(--ink-950); line-height: 1.2; }
#v-custom .cix-pagehd__t span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-600); line-height: 1.5; }

/* -------------------------------------------------------------------- 英雄卡 */
#v-custom .cix-hero { min-height: 200px; margin-bottom: 14px; border-radius: var(--radius-lg); }
#v-custom .cix-hero .page-hero__media img { object-position: center 46%; }
/* 稿：左側深綠實色承載文字與情境鈕，往右淡出成照片（同配種頁語彙） */
#v-custom .cix-hero .page-hero__scrim {
  background: linear-gradient(90deg, rgb(6 56 45) 0%, rgb(6 56 45 / .94) 34%, rgb(6 56 45 / .42) 62%, rgb(6 56 45 / .05) 84%);
}
#v-custom .cix-hero .page-hero__content { padding: 22px 20px; max-width: 62%; }
#v-custom .cix-hero .page-hero__title { font-size: 23px; }
#v-custom .cix-hero .page-hero__desc { max-width: 44ch; margin-top: 8px; font-size: 12.5px; line-height: 1.65; }
#v-custom .cix-hero .page-hero__desc b { color: #fff; font-weight: 700; }

/* 情境鈕（#presets 的 .pchip）：稿上是照片上的半透明膠囊，選取態為珊瑚橘實心 */
#v-custom .presets { display: flex; flex-wrap: wrap; gap: 9px; margin: 16px 0 0; }
#v-custom .presets .pchip {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 15px; border-radius: var(--radius-sm);
  background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .34);
  color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.35;
  cursor: pointer; backdrop-filter: blur(2px);
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
#v-custom .presets .pchip .i { width: 18px; height: 18px; flex: none; display: inline-flex; }
#v-custom .presets .pchip .ic { width: 18px; height: 18px; }
#v-custom .presets .pchip:hover { background: rgb(255 255 255 / .22); border-color: rgb(255 255 255 / .5); }
#v-custom .presets .pchip.on {
  /* 稿是 #f1541a 但白字僅 3.49:1；--coral-cta 為同色相同彩度、仍 ≥4.5:1 的最亮值 */
  background: var(--coral-cta); border-color: var(--coral-cta); color: #fff;
}
#v-custom .presets .pchip:focus-visible { outline: 3px solid rgb(255 255 255 / .6); outline-offset: 2px; }

/* ------------------------------------------------- 權重卡 ｜ 說明卡 ｜ 變動速覽 */
#v-custom .cix-top { display: flex; flex-direction: column; }

/* 權重列：色點 + 名稱 + 滑桿 + 數值框（稿的四欄結構） */
#v-custom .sliders { margin-top: 2px; }
#v-custom .slrow {
  display: grid; align-items: center; gap: 0 10px; margin: 0;
  grid-template-columns: 10px minmax(0, 1fr) 62px;
  grid-template-areas: "dot lab val" "sl sl sl";
  padding: 7px 0; border-bottom: 1px solid var(--line-1);
}
#v-custom .slrow:last-child { border-bottom: 0; }
#v-custom .sldot { grid-area: dot; width: 10px; height: 10px; border-radius: 50%; }
#v-custom .sllab { grid-area: lab; display: block; margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-950); }
#v-custom .sllab .sln { display: block; }
#v-custom .sllab .slhint { display: block; margin-top: 1px; font-size: 11px; font-weight: 600; color: var(--ink-500); line-height: 1.35; }
#v-custom .slval {
  grid-area: val; justify-self: end; min-width: 62px; min-height: 34px;
  display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  border: 1px solid var(--line-1); border-radius: var(--radius-sm); background: var(--surface-0);
  font-size: 13.5px; font-weight: 800; color: var(--ink-950); font-variant-numeric: tabular-nums;
}
#v-custom .slval s { font-size: 11px; font-weight: 700; color: var(--ink-500); margin-left: 2px; }
#v-custom .slval i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-500); }
#v-custom .slrow input[type=range] {
  grid-area: sl; width: 100%; height: 26px; margin: 0; padding: 0;
  background: none; -webkit-appearance: none; appearance: none;
}
/* 軌道與拉桿：稿上是珊瑚橘已選段 + 白色圓鈕。-webkit / -moz 必須分開寫，
   合併選擇器只要有一個不認得，整條規則會被整組丟掉。 */
#v-custom .slrow input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--coral-500) 0 var(--p, 0%), var(--track) var(--p, 0%) 100%);
}
#v-custom .slrow input[type=range]::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--coral-500) 0 var(--p, 0%), var(--track) var(--p, 0%) 100%);
}
#v-custom .slrow input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: var(--coral-500); border: 3px solid var(--surface-0); box-shadow: var(--shadow-sm); cursor: pointer;
}
#v-custom .slrow input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--coral-500); border: 3px solid var(--surface-0); box-shadow: var(--shadow-sm); cursor: pointer;
}
#v-custom .slrow input[type=range]:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; border-radius: 6px; }

#v-custom .cix-wsum {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 12px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-1);
}
#v-custom .cix-wsum__ok {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--brand-700);
}
#v-custom .cix-wsum__ok .ic { width: 15px; height: 15px; }
#v-custom .cix-wsum__ok b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
#v-custom .cix-wsum__n { margin-right: auto; font-size: 11.5px; color: var(--ink-500); }

/* 說明卡 + 平均可靠度環 */
#v-custom .cix-about__row { display: flex; align-items: flex-start; gap: 16px; }
#v-custom .cix-about__b { flex: 1; min-width: 0; }
#v-custom .cix-about__b p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.7; color: var(--ink-600); }
#v-custom .cix-about__b p:last-child { margin-bottom: 0; }
#v-custom .cix-about__b p b { color: var(--ink-950); font-weight: 700; }
#v-custom .cix-about__b > b { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 800; color: var(--ink-950); }
#v-custom .cix-relgauge { flex: none; text-align: center; }
#v-custom .cix-relgauge .gauge { --v: 0; width: 96px; height: 96px; margin: 0 auto; }
#v-custom .cix-relgauge .gauge::after { inset: 10px; background: var(--surface-0); }
#v-custom .cix-relgauge .gauge b { font-size: 24px; }
#v-custom .cix-relgauge small { display: block; margin-top: 7px; font-size: 11.5px; color: var(--ink-600); }

/* 排名變動速覽 */
#v-custom .cix-lgd { margin: -4px 2px 12px; gap: 14px; }
#v-custom .cix-lgd span { font-size: 11.5px; color: var(--ink-600); }
#v-custom .cix-d { width: 9px; height: 9px; border-radius: 50%; }
#v-custom .cix-d.up { background: var(--brand-500); }
#v-custom .cix-d.dn { background: var(--coral-500); }
#v-custom .cix-d.fl { background: var(--line-strong); }
#v-custom .cix-moves__row { display: flex; flex-wrap: wrap; gap: 10px; }
#v-custom .cix-move {
  /* basis 要小於「右欄寬 ÷ 5」，否則第 5 張會掉到第二列（實測右欄約 590px） */
  flex: 1 1 92px; min-width: 0; min-height: 72px; padding: 10px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--surface-0); border: 1px solid var(--line-1); border-radius: var(--radius-md);
  font-family: inherit; cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
#v-custom .cix-move:hover { border-color: var(--line-strong); background: var(--surface-soft); }
#v-custom .cix-move:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; }
#v-custom .cix-move__r {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-size: 19px; font-weight: 800; color: var(--ink-500); font-variant-numeric: tabular-nums;
}
#v-custom .cix-move__r i { font-style: normal; font-size: 13px; color: var(--ink-500); }
#v-custom .cix-move__r .to { color: var(--ink-950); }
#v-custom .cix-move__n {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--ink-600); font-variant-numeric: tabular-nums;
}
#v-custom .cix-move__n em { font-style: normal; font-size: 11.5px; font-weight: 800; }
#v-custom .cix-move--up .cix-move__n em { color: var(--brand-700); }
#v-custom .cix-move--dn .cix-move__n em { color: var(--coral-700); }
#v-custom .cix-move--fl .cix-move__n em { color: var(--ink-500); }
#v-custom .cix-move--up { border-color: rgb(43 138 104 / .35); }
#v-custom .cix-move--dn { border-color: rgb(241 107 77 / .35); }

/* ------------------------------------------------------------------ 圖表列 */
#v-custom .cix-donut__row { display: flex; align-items: center; gap: 16px; }
#v-custom .cix-donut__c { position: relative; flex: none; width: 120px; height: 120px; }
#v-custom .cix-donut__lg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
#v-custom .cix-lg { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 0 9px; align-items: center; }
#v-custom .cix-lg > i { width: 9px; height: 9px; border-radius: 50%; }
#v-custom .cix-lg .l { font-size: 12.5px; font-weight: 700; color: var(--ink-950); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#v-custom .cix-lg .v { font-size: 12.5px; font-weight: 800; color: var(--ink-600); font-variant-numeric: tabular-nums; }
#v-custom .cix-stats {
  display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 2px 0; padding-top: 10px;
  border-top: 1px solid var(--line-1); font-size: 11.5px; color: var(--ink-600);
}
#v-custom .cix-stats b { font-size: 14px; font-weight: 800; color: var(--ink-950); font-variant-numeric: tabular-nums; margin-left: 4px; }

/* -------------------------------------------------------------------- 排名表 */
#v-custom .cix-tablecard { padding: 18px 16px 14px; }
#v-custom .cixhead { margin: 0 2px 12px; align-items: center; gap: 10px; }
#v-custom .cixhead .chart-t { margin: 0; }
#v-custom .cixhead .muted2 { flex: 1; min-width: 0; font-size: 11.5px; color: var(--ink-500); }
#v-custom .cix-thead { display: none; }
#v-custom #cixlist { max-height: none; }
#v-custom .cixrow {
  display: grid; align-items: center; gap: 4px 10px; padding: 11px 6px;
  border-bottom: 1px solid var(--line-1); cursor: pointer;
  grid-template-columns: 30px 34px minmax(0, 1fr) auto 14px;
  grid-template-areas:
    "rk av nm   val  chev"
    "rk av move tei  chev"
    "rk av top  rel  chev";
  transition: background var(--duration-fast) var(--ease-standard);
}
#v-custom .cixrow:hover { background: var(--surface-soft); }
#v-custom .cixrow:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: -2px; border-radius: var(--radius-sm); }
#v-custom .cixrow > * { min-width: 0; }
#v-custom .cixrow .rk {
  grid-area: rk; width: 30px; height: 30px; border-radius: 50%; align-self: center;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-100); color: var(--brand-800);
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
#v-custom .cixavat {
  grid-area: av; width: 34px; height: 34px; border-radius: 50%; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-soft); border: 1px solid var(--line-1); color: var(--ink-600);
}
#v-custom .cixavat .ic { width: 18px; height: 18px; }
#v-custom .cixrow .nm { grid-area: nm; font-size: 13.5px; font-weight: 800; color: var(--ink-950); width: auto; }
#v-custom .cixval {
  grid-area: val; justify-self: end; width: auto; text-align: right;
  font-size: 16px; font-weight: 800; color: var(--brand-700); font-variant-numeric: tabular-nums;
}
#v-custom .cixmove { grid-area: move; display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-500); }
#v-custom .cixmove em { font-style: normal; font-weight: 800; }
#v-custom .cixmove em.up { color: var(--brand-700); }
#v-custom .cixmove em.dn { color: var(--coral-700); }
#v-custom .cixmove em.fl { color: var(--ink-500); }
#v-custom .cixtei { grid-area: tei; justify-self: end; font-size: 12.5px; color: var(--ink-600); font-variant-numeric: tabular-nums; }
#v-custom .cixtei::before { content: "官方 "; font-size: 11px; color: var(--ink-500); }
#v-custom .cixtop { grid-area: top; font-size: 11.5px; color: var(--ink-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#v-custom .cixtop b { color: var(--brand-700); font-weight: 800; font-variant-numeric: tabular-nums; }
#v-custom .cixtop s { color: var(--ink-500); }
#v-custom .cixrel { grid-area: rel; justify-self: end; display: flex; align-items: center; gap: 7px; }
#v-custom .cixrel b { font-size: 12.5px; font-weight: 800; color: var(--ink-950); font-variant-numeric: tabular-nums; }
#v-custom .cixrel__b { width: 54px; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
#v-custom .cixrel__b i { display: block; height: 100%; border-radius: 3px; background: var(--brand-700); }
#v-custom .cixrow .chev { grid-area: chev; justify-self: end; align-self: center; color: var(--ink-500); }

/* ==================================================================== 平板以上 */
@media (min-width: 768px) {
  #v-custom .cix-pagehd__t b { font-size: 27px; }
  #v-custom .cix-hero { min-height: 230px; }
  #v-custom .cix-hero .page-hero__content { padding: 26px 28px; max-width: 60%; }
  #v-custom .cix-hero .page-hero__title { font-size: 26px; }

  /* 稿：左欄權重卡整段落地，右欄上說明、下變動速覽 */
  /* 稿上這一列是「權重面板 ｜ 指數說明＋可靠度」兩張，排名變動速覽另成整列。
     先前把速覽塞進右欄第二格，右欄總高被左欄權重卡決定 —— 權重面板拆成
     「母牛排序 7 項＋公牛偏好 4 項」後左欄長到 817px，速覽卡被撐成 585px
     而內容只有約 120px，中間就出現一大片空白。改為兩欄一列。 */
  #v-custom .cix-top {
    display: grid; gap: 14px; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-areas: "w about" "w bull";
  }
  #v-custom .cix-wcard   { grid-area: w; }
  #v-custom .cix-about   { grid-area: about; }
  #v-custom .cix-bullpref{ grid-area: bull; }

  /* 權重列：稿上是「名稱 ｜ 滑桿 ｜ 數值框」同一列 */
  #v-custom .slrow {
    grid-template-columns: 10px minmax(76px, 0.9fr) minmax(0, 1.6fr) 62px;
    grid-template-areas: "dot lab sl val";
    padding: 9px 0;
  }

  /* 平板（內容寬約 720px）欄位放不下九欄——實測九欄需 811px。
     此區間維持堆疊式列，只把上排拉寬；表格型態留到桌機。 */
  #v-custom .cixrow { grid-template-columns: 34px 36px minmax(0, 1fr) auto 14px; }
  #v-custom #cixlist { max-height: 62vh; }
}

@media (min-width: 1180px) {
  /* 排名表回到稿上的表格型態 */
  #v-custom .cix-thead,
  #v-custom .cixrow {
    display: grid; align-items: center; gap: 0 10px;
    grid-template-columns: 42px 36px minmax(64px, 1fr) 84px 104px 88px minmax(92px, 1.1fr) 112px 14px;
    grid-template-areas: none;
  }
  #v-custom .cix-thead {
    padding: 0 6px 8px; border-bottom: 1px solid var(--line-1);
    font-size: 11px; font-weight: 700; color: var(--ink-500);
  }
  #v-custom .cix-thead > span:nth-child(4),
  #v-custom .cix-thead > span:nth-child(6),
  #v-custom .cix-thead > span:nth-child(8) { text-align: right; }
  /* 手機版的 grid-area 具名值在這裡的模板下無效，且各自的選擇器比 `> *` 更精確，
     必須逐一還原成 auto，否則會被自動配置排到奇怪的欄位（實測牛號跑到最右欄）。 */
  #v-custom .cixrow > *,
  #v-custom .cixrow .rk, #v-custom .cixavat, #v-custom .cixrow .nm, #v-custom .cixval,
  #v-custom .cixmove, #v-custom .cixtei, #v-custom .cixtop, #v-custom .cixrel,
  #v-custom .cixrow .chev { grid-area: auto; }
  #v-custom .cixrow .rk { justify-self: start; }
  #v-custom .cixval { justify-self: end; }
  #v-custom .cixtei { justify-self: end; }
  #v-custom .cixtei::before { content: none; }
  #v-custom .cixrel { justify-self: start; width: 100%; }
  #v-custom .cixrel__b { flex: 1; width: auto; }

  #v-custom .cix-hero { min-height: 250px; }
  #v-custom .cix-hero .page-hero__content { max-width: 56%; }
  #v-custom .cix-top { gap: 0 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  /* 四張圖表在 1180–1859 之間排成 2×2；全域規則會給 3 欄而留下 3+1 的孤兒 */
  #v-custom .cix-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1860px) {
  /* 內容夠寬時四張圖表一列（全域 auto-fit 已可，明寫避免落回 2 欄） */
  #v-custom .cix-charts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ====================================================================== 手機 */
@media (max-width: 767px) {
  #v-custom .cix-pagehd { margin-bottom: 12px; }
  #v-custom .cix-pagehd__t b { font-size: 21px; }
  #v-custom .cix-hero { min-height: 186px; }
  #v-custom .cix-hero .page-hero__scrim {
    background: linear-gradient(180deg, rgb(6 56 45 / .1) 0%, rgb(6 56 45 / .72) 44%, rgb(6 56 45 / .96) 100%),
                linear-gradient(90deg, rgb(6 56 45 / .86) 0%, rgb(6 56 45 / .3) 72%, rgb(6 56 45 / 0) 100%);
  }
  #v-custom .cix-hero .page-hero__content { max-width: 100%; padding: 18px 16px 16px; }
  #v-custom .cix-hero .page-hero__title { font-size: 20px; }
  #v-custom .presets .pchip { flex: 1 1 calc(50% - 5px); }
  #v-custom .cix-about__row { flex-direction: column; align-items: stretch; gap: 14px; }
  #v-custom .cix-relgauge { align-self: center; }
  #v-custom .cix-move { flex: 1 1 calc(50% - 5px); }
  #v-custom .cix-donut__row { flex-direction: column; align-items: stretch; gap: 14px; }
  #v-custom .cix-donut__c { align-self: center; }
  #v-custom .cixrow { padding: 12px 4px; }
  #v-custom .cixrel__b { width: 44px; }
}

/* ============================================================================
   全國頁（#v-report）— 高保真稿套用
   ----------------------------------------------------------------------------
   規則一律掛 #v-report 前綴：.card/.kpi/.chart-t/.lgd/.chev/.note 全站共用，
   裸選擇器會外溢到其他五頁。
   版面照稿、數據照現況：稿上的 1,302 場／10,842 頭／A2A2·BB 單倍型／公牛照片
   在 bundle 內都不存在，一律不補（見 notes）。
   ========================================================================== */

/* ---------------------------------------------------------------- 頁面節奏 */
#v-report .card {
  border-radius: var(--radius-lg); border: 1px solid var(--line-1);
  box-shadow: var(--shadow-sm); padding: 16px 18px; margin-bottom: 14px;
}
#v-report .card.chart { padding: 16px 16px 14px; }
/* 稿把卡片標題拆成兩段字級：主段 16px/800，括號裡的限定語退成 12px/600。
   用既有的 `.chart-t s` 副標慣例（#matesheet / #cixsheet / #bullsheet 都是這樣寫），
   不新增 class。`.chart-t` 全站是 flex（為了讓 capSplit 的 ⓘ 垂直置中），
   所以 <s> 自成一個 flex item，靠 gap 拉開，不需要 margin。 */
#v-report .chart-t {
  font-size: 16px; font-weight: 800; color: var(--ink-950);
  margin: 0 0 10px; line-height: 1.35;
}
/* 不要改成 align-items:baseline —— 量過：16px 主段配 12px 副段對齊基線後，
   標題列從 22px 長到 25.1px，而 capSplit 的 ⓘ 是個沒有文字基線的 <button>，
   瀏覽器拿它的下緣當基線，於是整顆往上浮。全站另外四處 .chart-t s 都吃全域的
   center，維持一致。 */
#v-report .chart-t s {
  text-decoration: none; font-size: 12px; font-weight: 600; color: var(--ink-500);
}
/* .chart-cap 全域寫死 #7d8ea0（偏藍灰），在暖白畫布上偏冷 */
#v-report .chart-cap { font-size: 11.5px; color: var(--ink-500); margin: 10px 2px 0; line-height: 1.6; }
/* 主句留空的卡（趨勢圖）不要留一行空的灰字高度——capSplit 仍需要這個節點當
   .cap-more 的插入錨點與 ⓘ 的宿主，所以是收掉、不是刪掉。 */
#v-report .chart-cap:empty { display: none; }
#v-report .chart-cap b { color: var(--ink-800); }
#v-report .lgd { margin: 0 2px 8px; gap: 14px; }
/* 趨勢圖圖例：稿把它從「三個色塊」改成「一條虛線說明 + 一顆數字膠囊 + 一句尾語」。
   膠囊裡的兩個數字由 renderNational() 從 CD.trend 算出來填，不寫死。
   ⚠️ 稿順手刪掉了「世代標準差」那一條，但圖上那條淺綠帶還在（而且 4-6 把它從
   半透明改成實色、更顯眼）—— 這張圖現在有一個沒有任何文字解釋的視覺元素。
   這是稿的決定，記在這裡免得日後當成漏寫。 */
#v-report .rep-lgd { align-items: center; gap: 10px; }
#v-report .rep-lgd i.dsh { width: 24px; border-top-width: 1px; border-top-color: var(--refline); }
/* 底色與圖上的世代標準差帶同一個 token —— 稿的膠囊底 #DCE8DD 與帶的 #D8E5D9
   差 4 階，肉眼看不出來，但同色才說得通（膠囊講的就是這條線走了多遠）。
   深色主題下 --band-sd 是深綠，字色必須跟著翻，不能寫死深綠字。 */
#v-report .rep-lgd__pill {
  padding: 3px 9px; border-radius: 5px; background: var(--band-sd); color: var(--num-strong);
  font-size: 11px; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums;
}
#v-report .rep-lgd em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-700); }
#v-report > .note { margin: 4px 0 12px; }

#v-report .rep-pagehd { margin: 2px 2px 14px; }
/* 這組頁首在 #v-report / #v-market / #v-sim 三個分頁都用。原本只寫給 #v-report，
   #v-market 後來只補了 b（見檔尾 6097 附近），#v-sim 則從來沒補過——結果它的標題是
   內文字級、副標退回瀏覽器預設而出現刪除線。三個宿主一次寫齊，別再漏。 */
#v-report .rep-pagehd__t b, #v-sim .rep-pagehd__t b { display: block; font-size: 24px; font-weight: 800; color: var(--ink-950); line-height: 1.2; }
#v-report .rep-pagehd__t span, #v-sim .rep-pagehd__t span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-600); line-height: 1.5; }
/* 副標裡的即時數字（公牛總數）。<em> 只是為了讓 JS 有個好抓的節點，不要斜體。 */
#v-sim .rep-pagehd__t span em { font-style: normal; font-weight: 700; color: var(--ink-900); }

#v-report .rep-sec {
  font-size: 16px; font-weight: 800; color: var(--ink-950);
  letter-spacing: 0; margin: 20px 4px 12px;
}

/* -------------------------------------------------------------------- 英雄卡 */
#v-report .rep-hero { min-height: 220px; margin-bottom: 0; border-radius: var(--radius-lg); }
#v-report .rep-hero .page-hero__media img { object-position: center 40%; }
#v-report .rep-hero .page-hero__scrim {
  background: linear-gradient(90deg, rgb(6 56 45) 0%, rgb(6 56 45 / .94) 36%, rgb(6 56 45 / .46) 62%, rgb(6 56 45 / .05) 86%);
}
#v-report .rep-hero .page-hero__content { padding: 20px 20px 18px; }
#v-report .rep-hero .page-hero__desc { max-width: 26ch; }

/* 稿：英雄卡內半透明深色數據帶 */
#v-report .rep-herostats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; margin-top: 14px; border-radius: var(--radius-md); overflow: hidden;
  background: rgb(255 255 255 / .14);
}
#v-report .rhs { background: rgb(4 42 33 / .82); padding: 11px 14px; min-width: 0; }
#v-report .rhs small { display: block; font-size: 11.5px; font-weight: 600; color: rgb(255 255 255 / .74); }
#v-report .rhs b {
  display: block; font-size: 23px; font-weight: 800; color: #fff;
  line-height: 1.15; margin-top: 3px; letter-spacing: -.01em;
}
#v-report .rhs em { display: block; font-style: normal; font-size: 10.5px; color: rgb(255 255 255 / .62); margin-top: 3px; }
#v-report .rep-herocap {
  margin-top: 12px; font-size: 11.5px; line-height: 1.6; color: rgb(255 255 255 / .78); max-width: 52ch;
}
#v-report .rep-herocap b { color: #fff; }

/* ------------------------------------------------------------ 可靠度分布卡 */
#v-report .rep-rel { display: flex; flex-direction: column; margin-bottom: 0; }
/* 桌機時這張卡與英雄卡等高，四列若擠在上緣會留一大塊白：讓列組撐滿並平均分布 */
#v-report .rep-rel #ch-rel { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
#v-report .rep-rel__hd {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11.5px; font-weight: 700; color: var(--ink-500); margin: 2px 2px 10px;
}
/* 欄寬全部 auto/minmax(0,…)：平板時這張卡只有 ~250px，任何最小寬都會撐破卡片 */
#v-report .rep-relrow {
  display: grid; grid-template-columns: 9px auto minmax(0, 1fr) auto;
  align-items: center; gap: 8px; padding: 7px 2px;
}
#v-report .rep-relrow i { width: 9px; height: 9px; border-radius: 50%; background: var(--rc); }
/* 四級色階用變數，深色主題另行覆蓋：brand-800 在深底卡片上幾乎看不見 */
#v-report .rep-relrow.t1 { --rc: var(--brand-800); }
#v-report .rep-relrow.t2 { --rc: var(--brand-500); }
#v-report .rep-relrow.t3 { --rc: var(--brand-300); }
#v-report .rep-relrow.t4 { --rc: var(--coral-500); }
html[data-theme="dark"] #v-report .rep-relrow.t1 { --rc: #7fe0b8; }
html[data-theme="dark"] #v-report .rep-relrow.t2 { --rc: #43a884; }
html[data-theme="dark"] #v-report .rep-relrow.t3 { --rc: #3c7565; }
#v-report .rr-l { font-size: 11.5px; font-weight: 700; color: var(--ink-800); white-space: nowrap; }
#v-report .rr-b { height: 9px; border-radius: 999px; background: var(--track); overflow: hidden; }
#v-report .rr-b em { display: block; height: 100%; border-radius: 999px; background: var(--rc); }
#v-report .rr-n {
  font-size: 12.5px; font-weight: 800; color: var(--ink-950);
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
#v-report .rr-n small { font-weight: 600; color: var(--ink-500); font-size: 11px; }
#v-report .rep-rel__tot {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; padding-top: 11px; border-top: 1px solid var(--line-1);
  font-size: 12.5px; font-weight: 700; color: var(--ink-600);
}
#v-report .rep-rel__tot b { font-size: 15px; font-weight: 800; color: var(--ink-950); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- 指數分布卡側統計 */
/* 稿的兩張圖表卡靠得比全站的 14px 更近。只覆寫這一列，.cardgrid 全站共用不要動。
   （基礎宣告要寫在 @media 之前——檔尾 5620 起還有各斷點的 grid-template-columns，
   那些只設欄數不設 gap，所以這一條在每個斷點都成立。） */
#v-report .rep-r2 { column-gap: 9px; align-items: stretch; }
/* 兩張卡等高：趨勢圖比 TEI 分布高 82px，不拉齊 TEI 那格下方就是死白
   （sweep 在 1128–1352 共 7 個寬度回報過）。原本這兩條只寫在 768–1359 的
   @media 裡，因為 ≥1360 當時是三欄各自處理；pool 搬走後所有 ≥768 都是兩欄，
   必須提升成基礎規則。 */
#v-report .rep-r2 > .card { height: 100%; display: flex; flex-direction: column; }
#v-report .rep-r2 > .card > .chart-cap { margin-top: auto; }

/* 稿的三組統計是沿著長條圖高度散開、靠左對齊，不是擠成一疊靠右。
   用 stretch + space-evenly 讓它自己跟著圖高分配，而不是寫死間距——
   圖高會隨 chHist 的膠囊層數變（170 + (層數−1)×16），寫死就會對不齊。 */
#v-report .rep-dist { display: flex; align-items: stretch; gap: 14px; }
#v-report .rep-dist__c { flex: 1; min-width: 0; }
#v-report .rep-dist__s {
  flex: none; display: flex; flex-direction: column; justify-content: space-evenly;
  align-items: flex-start; gap: 8px; padding: 6px 22px 6px 0;
}
#v-report .rep-dist__s small { display: block; font-size: 10px; font-weight: 600; color: var(--ink-600); }
#v-report .rep-dist__s b {
  display: block; font-size: 16.5px; font-weight: 800; color: var(--num-strong);
  line-height: 1.15; margin-top: 3px; font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- 公牛池設定 */
/* 稿：滿寬卡、左操作右圖。左欄 37.8% / 右欄 59% / 欄距 3.2%。 */
#v-report .rep-pool__2c { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
/* 雙欄只在放得下的寬度才成立。右欄的 NM$ 分布圖 viewBox 是 620 寬，
   擠進手機的 182px 會縮到 0.29 倍、8 單位的刻度字只剩 2.3px。 */
@media (min-width: 1024px) {
  #v-report .rep-pool__2c { grid-template-columns: minmax(0, 37.8fr) minmax(0, 59fr); gap: 3.2%; }
}
/* 窄版與同頁另外三張圖同樣處理：維持原尺寸，卡片內橫向捲動 */
@media (max-width: 1023px) {
  #v-report .rep-pool__r > #ch-nm { overflow-x: auto; margin: 0 -4px; }
  #v-report .rep-pool__r > #ch-nm > svg { min-width: 560px; }
}
#v-report .rep-pool__l { min-width: 0; display: flex; flex-direction: column; }
#v-report .rep-pool__r { min-width: 0; }
#v-report .rep-pool__hd { display: flex; align-items: center; gap: 12px; margin: 2px 2px 12px; }
#v-report .rep-pool__hd > span { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-600); font-weight: 600; }
/* 膠囊移到標題列最右端（稿），改白底橘框橘字 —— 它是「你選了多少」的即時回饋，
   與滑桿同一個珊瑚橘色系，不是中性狀態標籤。 */
#v-report .rep-pool .chart-t { justify-content: space-between; }
#v-report .rep-pool__chip {
  flex: none; min-width: 73px; text-align: center;
  border: 1.5px solid var(--coral-500); border-radius: var(--radius-pill);
  background: var(--surface-0); color: var(--coral-600);
  font-size: 13.5px; font-weight: 800; padding: 4px 12px; font-variant-numeric: tabular-nums;
}
#v-report .rep-pool__sl { display: flex; align-items: center; gap: 10px; margin: 0 2px; min-height: 44px; }
#v-report .rep-pool__sl > span { flex: none; font-size: 11.5px; font-weight: 600; color: var(--ink-500); }
#v-report .rep-pool__sl input[type=range] { flex: 1; min-width: 0; }
/* 稿上的滑桿是珊瑚橘（本頁是「選多少」的操作，不是狀態指示） */
#v-report .rep-pool__sl input[type=range] {
  background: linear-gradient(90deg, var(--coral-500) 0 var(--fill, 20%), var(--track) var(--fill, 20%) 100%);
}
#v-report .rep-pool__sl input[type=range]::-webkit-slider-thumb { background: var(--coral-500); }
#v-report .rep-pool__sl input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--coral-500);
  border: 3px solid var(--card); box-shadow: var(--shadow-sm); cursor: pointer;
}
#v-report .rep-pool__box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 4px; }
/* 稿把數值框從灰綠底改成白底暖灰邊（與卡片同色，只靠邊框分界） */
#v-report .rpb {
  border: 1px solid var(--line-1); border-radius: 10px;
  background: var(--surface-0); padding: 12px 14px 13px; min-width: 0;
}
#v-report .rpb small { display: block; font-size: 11px; font-weight: 600; color: var(--ink-600); }
#v-report .rpb b {
  display: block; font-size: 25.5px; font-weight: 800; color: var(--num-strong);
  line-height: 1.15; margin-top: 5px; font-variant-numeric: tabular-nums;
}
/* 「頭」與大數字同 baseline，緊貼右側 —— nm-cnt 的內容是「3,375 頭」一整串，
   靠 tabular-nums 對齊即可，不另外拆節點。 */
#v-report .rpb em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-500); margin-top: 4px; }

/* ------------------------------------------------------------- 公牛排名表 */
#v-report .rep-tablecard { padding: 16px 16px 14px; }
#v-report .rep-thead { display: none; }
#v-report #nat-top { max-height: none; }
#v-report .repbull {
  display: grid; align-items: center; gap: 4px 12px; padding: 12px 6px;
  border-bottom: 1px solid var(--line-1); cursor: pointer; min-height: 56px;
  grid-template-columns: 30px minmax(0, 1fr) auto 14px;
  grid-template-areas: "rk nm nmv chev" "rk co co chev" "rk ag ag chev";
  border-radius: var(--radius-sm);
}
/* 稿的分隔線由左往右漸淡，而且最後一列下方也有線。用 background-image 疊，
   不能用 border-bottom（做不出漸層），也不能只用 background（會和 :hover 的
   底色互斥 —— 疊在 background-image 這一層就能並存）。 */
#v-report .repbull:last-child { border-bottom: 0; }
#v-report .repbull {
  border-bottom: 0;
  background-image: linear-gradient(90deg, var(--line-1), transparent);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}
#v-report .repbull:hover { background: var(--surface-soft); }
#v-report .repbull:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: -2px; }
#v-report .rb-rk {
  grid-area: rk; font-size: 13px; font-weight: 800; color: var(--ink-500);
  text-align: center; font-variant-numeric: tabular-nums;
}
#v-report .rb-nm { grid-area: nm; min-width: 0; }
#v-report .rb-nm b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-950); line-height: 1.3; }
#v-report .rb-nm small { display: block; font-size: 11px; color: var(--ink-500); margin-top: 2px; }
#v-report .rb-co { grid-area: co; font-size: 11.5px; color: var(--ink-600); min-width: 0; }
#v-report .rb-ag { grid-area: ag; font-size: 11.5px; color: var(--ink-600); min-width: 0; }
#v-report .rb-co::before, #v-report .rb-ag::before {
  content: attr(data-l) "："; color: var(--ink-500);
}
#v-report .rb-v { font-size: 12.5px; font-weight: 700; color: var(--ink-800); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 稿把 NM$ 從綠色降成與其他欄同色，只留字級差一階 —— 它跟旁邊的 kg 與月不同尺，
   用顏色強調它會鼓勵讀者拿它跟別欄比大小（卡底說明正好在講不要這樣做）。 */
#v-report .rb-nmv { grid-area: nmv; font-size: 13.5px; font-weight: 800; color: var(--ink-950); text-align: right; }
/* 單位小字，只出現在該頁第 1 列 */
#v-report .repbull u.rb-u { text-decoration: none; font-size: .84em; font-weight: 600; color: var(--ink-500); margin-left: 2px; }
/* 手機/平板窄版把乳量與 PL 收在名稱下方那兩行的右側，避免擠成八欄 */
#v-report .rb-milk { grid-area: co; justify-self: end; }
#v-report .rb-pl   { grid-area: ag; justify-self: end; }
#v-report .rb-milk::before, #v-report .rb-pl::before {
  content: attr(data-l) " "; color: var(--ink-500); font-weight: 600;
}
#v-report .repbull .chev { grid-area: chev; }

#v-report .rep-src {
  margin: 2px 4px 4px; font-size: 11px; line-height: 1.7; color: var(--ink-500);
}

/* ================================================================= 平板以上 */
@media (min-width: 768px) {
  #v-report .rep-pagehd__t b, #v-sim .rep-pagehd__t b { font-size: 27px; }
  #v-report .rep-hero { min-height: 240px; }
  #v-report .rep-hero .page-hero__content { padding: 24px 26px; max-width: 74%; }
  #v-report .rep-hero .page-hero__title { font-size: 26px; }
  #v-report .rep-hero .page-hero__desc { max-width: 34ch; }
  /* 稿：英雄卡與可靠度卡並排（平板 ~1.6 : 1） */
  #v-report .rep-top {
    display: grid; gap: 14px; align-items: stretch; margin-bottom: 14px;
    grid-template-columns: minmax(0, 1.55fr) minmax(250px, 1fr);
  }
  #v-report .rep-top > .card { margin-bottom: 0; }
}

/* 平板：英雄卡欄只有 ~430px，若沿用 auto-fit minmax(150px) 四格會疊成一直行、
   把英雄卡拉到 537px 高，右邊可靠度卡跟著被撐開留一大片白。固定兩欄。 */
@media (min-width: 768px) and (max-width: 1179px) {
  #v-report .rep-hero .page-hero__content { max-width: 84%; }
  #v-report .rep-herostats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #v-report .rhs { padding: 10px 12px; }
  #v-report .rhs b { font-size: 20px; }
}

/* ================================================================== 桌機 */
@media (min-width: 1180px) {
  #v-report .rep-top { grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); }
  #v-report .rep-hero { min-height: 268px; }
  #v-report .rep-hero .page-hero__content { max-width: 68%; }

  /* 稿的表格型態：九欄一列 */
  #v-report .rep-thead,
  #v-report .repbull {
    display: grid; align-items: center; gap: 0 12px;
    grid-template-columns: 46px minmax(140px, 1.5fr) minmax(84px, 1fr) minmax(84px, 1fr) 84px 96px 68px 14px;
    grid-template-areas: none;
  }
  #v-report .rep-thead {
    padding: 0 6px 9px; border-bottom: 1px solid var(--line-1);
    font-size: 11px; font-weight: 700; color: var(--ink-500);
  }
  #v-report .rep-thead > span:nth-child(5),
  #v-report .rep-thead > span:nth-child(6),
  #v-report .rep-thead > span:nth-child(7) { text-align: right; }
  /* 窄版的具名 grid-area 在此模板下無效，必須逐一還原成 auto，
     否則自動配置會把欄位排到錯的位置（自訂指數頁踩過同一個坑）。 */
  #v-report .repbull > *,
  #v-report .rb-rk, #v-report .rb-nm, #v-report .rb-co, #v-report .rb-ag,
  #v-report .rb-v, #v-report .rb-nmv, #v-report .rb-milk, #v-report .rb-pl,
  #v-report .repbull .chev { grid-area: auto; }
  #v-report .rb-co::before, #v-report .rb-ag::before,
  #v-report .rb-milk::before, #v-report .rb-pl::before { content: none; }
  #v-report .repbull > .rb-v { justify-self: end; }
  #v-report .rb-co, #v-report .rb-ag { font-size: 12px; }
}

@media (min-width: 1180px) {
  /* 公司比較卡的 SVG 高度固定，跟旁邊含直方圖的公牛池卡差 ~300px，
     .cardgrid 的 align-items:start 會留一大塊白。改為等高並讓長條圖垂直置中。 */
  #v-report .rep-r3 { align-items: stretch; }
  #v-report .rep-r3 > .card { display: flex; flex-direction: column; }
  #v-report .rep-r3 #ch-co { flex: 1; display: flex; align-items: center; }
  #v-report .rep-r3 #ch-co svg { width: 100%; }
}

/* 這裡原本有一條 ≥1860 的 `rep-top: 2fr 1fr`。設計包 v1 的稿只有一種欄寬
   （1282:770 ＝ 5:3），沒有第三段斷點，所以整條移除 —— 留著會被檔尾那條
   ≥1180 的 5fr:3fr 靜默蓋掉，變成永遠不會生效卻看得到的規則。 */

/* ==================================================================== 手機 */
@media (max-width: 767px) {
  #v-report .rep-pagehd { margin-bottom: 12px; }
  #v-report .rep-pagehd__t b, #v-sim .rep-pagehd__t b { font-size: 21px; }
  #v-report .rep-hero { min-height: 196px; margin-bottom: 14px; }
  #v-report .rep-hero .page-hero__scrim {
    background: linear-gradient(180deg, rgb(6 56 45 / .12) 0%, rgb(6 56 45 / .74) 42%, rgb(6 56 45 / .96) 100%),
                linear-gradient(90deg, rgb(6 56 45 / .84) 0%, rgb(6 56 45 / .3) 74%, rgb(6 56 45 / 0) 100%);
  }
  #v-report .rep-hero .page-hero__content { padding: 18px 16px 16px; }
  #v-report .rep-hero .page-hero__title { font-size: 20px; }
  #v-report .rep-hero .page-hero__desc { max-width: 100%; }
  #v-report .rep-herostats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #v-report .rhs b { font-size: 19px; }
  /* 稿上的指數分布側統計在手機改成橫排三格，圖表才有足夠寬度 */
  /* 10-1 稿：手機仍是左右並排 78:22，統計改成三個帶框圓角小盒**直排**。
     ⚠️ 375px 下 78% ≈ 265px 要塞 20 根柱，每根 13px、柱間縫消失 —— 所以只在
        ≥400px 才並排，更窄的機型退回堆疊，寧可與稿差一階也不要糊成一片。 */
  #v-report .rep-dist { flex-direction: column; align-items: stretch; gap: 10px; }
  /* 橫排時要把桌機那個「右邊留白」的 padding 收掉，否則第三格會被推歪。
     （手機稿其實是左右並排 78:22、統計改成三個帶框小盒直排，與這裡相反——
       那是批 10 的事，這裡只先擋掉 padding 漏出去。） */
  #v-report .rep-dist__s { flex-direction: row; justify-content: space-between; gap: 10px; padding-right: 0; }
  #v-report .rep-dist__s > div { flex: 1; min-width: 0; }
  #v-report .rep-dist__s b { font-size: 17px; }
  #v-report .rep-dist__s > div { border: 1px solid var(--line-1); border-radius: 8px; padding: 6px 8px; text-align: center; }
  /* 10-2 稿：手機維持兩欄、比例 40:60（門檻盒窄）。
     ⚠️ 負門檻（−$1,200）在 40% 欄會溢出 —— 用 minmax(0,…) 讓它縮而不是撐破，
        數字本身用 tabular-nums 對齊，必要時換行。 */
  #v-report .rep-pool__box { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 8px; }
  #v-report .rpb { padding: 9px 10px 10px; }
  #v-report .rpb b { font-size: 20px; overflow-wrap: anywhere; }
  #v-report .rep-relrow { grid-template-columns: 9px minmax(70px, auto) minmax(24px, 1fr) auto; gap: 8px; }
}

/* ============================================================================
   個別母牛明細（#sheet）— 高保真稿 08 套用
   ----------------------------------------------------------------------------
   全部規則掛在 #sheet 底下。.card/.kpi/.bar/.tag/.chart-t 等 class 全站共用
   （.kpi 就有 19 處），寫裸選擇器會整站壞版，故一律加 #sheet 前綴。
   ========================================================================== */

/* 麵包屑：稿的平板／桌機版在抽屜頂端有一條路徑，手機沒有 */
#sheet .cd-crumb { display: none; }
@media (min-width: 768px) {
  #sheet .cd-crumb {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: 12px; font-weight: 600; color: var(--brand-700); margin: 0 0 14px;
  }
  #sheet .cd-crumb i { font-style: normal; color: var(--ink-500); }
  #sheet .cd-crumb b { color: var(--ink-950); font-weight: 700; }
}

/* --------------------------------------------------------------- 照片英雄卡
   稿：白卡內一張母牛照從右側淡入，左側疊牛號、決策 chip、胎次與場別。
   照片是設計包提供的單一張示意圖（非逐頭實拍），故 alt 留空並 aria-hidden，
   當純背景處理，不讓螢幕報讀器誤以為是這頭牛本人的照片。 */
#sheet .cd-hero {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--line-1); border-radius: var(--radius-lg);
  background: var(--surface-0); min-height: 168px;
  display: flex; align-items: flex-end; margin-bottom: 14px;
}
#sheet .cd-hero__media { position: absolute; inset: 0 0 0 34%; }
#sheet .cd-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 34%; display: block;
}
#sheet .cd-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #fff 0%, #fff 34%, rgb(255 255 255 / .72) 48%, rgb(255 255 255 / 0) 66%);
}
#sheet .cd-hero__c { position: relative; z-index: 1; padding: 20px 18px; max-width: 62%; }
#sheet .cd-hero__no {
  font-size: 30px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; color: var(--ink-950);
}
#sheet .cd-hero__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
#sheet .cd-hero__tag { margin-left: 0 !important; font-size: 12px; }
#sheet .cd-hero__par { font-size: 13px; font-weight: 700; color: var(--ink-800); }
#sheet .cd-hero__meta { font-size: 12.5px; color: var(--ink-600); margin-top: 6px; line-height: 1.5; }

/* ------------------------------------------------------------------- KPI 列
   共用 .kpi--ic 是「小標在上、數字在下」；稿 08 反過來（數字大字在上）。
   只在 #sheet 內調整間距，不動共用規則。 */
#sheet .cd-kpis { margin: 0 0 14px; }
#sheet .cd-kpis .kpi--ic { text-align: left; padding: 14px 15px; }
#sheet .cd-kpis .kb small { margin: 3px 0 0; }
#sheet .cd-kpis .kb b { font-size: 25px; }
#sheet .cd-kpis .kb .cd-u { font-size: 15px; font-weight: 700; margin-left: 1px; font-style: normal; display: inline; }
#sheet .cd-kpis .kpi.red   .kb b { color: var(--danger-700); }
#sheet .cd-kpis .kpi.amber .kb b { color: var(--amber-700); }
#sheet .cd-kpis .kpi.green .kb b { color: var(--brand-500); }

/* --------------------------------------------------- 育種價卡（bars ＋ 為什麼） */
#sheet .cd-ebv { padding: 16px 18px 14px; margin-bottom: 14px; }
#sheet .cd-h { font-size: 16px; font-weight: 800; color: var(--ink-950); margin: 0 0 10px; }
#sheet .cd-h s { text-decoration: none; font-size: 12px; font-weight: 600; color: var(--ink-500); margin-left: 8px; }
#sheet .cd-ebv .bar { gap: 10px; margin: 11px 0; }
#sheet .cd-ebv .bar .n { width: 52px; font-size: 12.5px; color: var(--ink-800); font-weight: 600; }
#sheet .cd-ebv .bar .v { width: 62px; font-size: 12.5px; }
#sheet .cd-bi { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--brand-700); }
#sheet .cd-bi svg { width: 17px; height: 17px; }
#sheet .cd-ebv .rel { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-1); }
#sheet .cd-ebv .rel .n { width: auto; flex: none; white-space: nowrap; }
#sheet .cd-ebv .relbar { height: 9px; border-radius: 5px; }
#sheet .cd-relw { color: var(--ink-600); font-weight: 700; }

/* 為什麼面板：稿是右側珊瑚色淺底方塊 */
#sheet .cd-why {
  background: var(--surface-risk); border: 1px solid var(--coral-100);
  border-radius: var(--radius-md); padding: 14px 15px; align-self: start;
}
#sheet .cd-why__hd {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 800; color: var(--coral-700); margin-bottom: 9px;
}
#sheet .cd-why__hd svg { width: 16px; height: 16px; }
#sheet .cd-why p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.7; color: var(--ink-800); }
#sheet .cd-why p:last-child { margin-bottom: 0; }
#sheet .cd-why__sep { height: 1px; background: var(--coral-100); margin: 11px 0 10px; }

@media (min-width: 768px) {
  #sheet .cd-ebv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 288px); gap: 20px; align-items: start; }
}

/* ------------------------------------------------------------- 四張編號圖表卡
   稿：桌機四欄一列。抽屜寬度更正為 1010px（見上方量測）後，四欄每欄約 230px，
   與稿上的比例相同，故改回稿的一列四張；平板 2×2、手機單欄（390 寬雙欄不可讀）。 */
#sheet .cd-grid { margin-bottom: 14px; }
#sheet .cd-grid .card.chart { background: var(--surface-0); border-radius: var(--radius-md); padding: 15px 15px 13px; }
#sheet .cd-grid .chart-t { font-size: 13.5px; font-weight: 800; color: var(--ink-950); margin: 0 0 10px; }
#sheet .cd-grid .chart-cap { font-size: 11.5px; color: var(--ink-500); margin: 10px 2px 0; line-height: 1.6; }
#sheet .cd-grid .chart-cap b { color: var(--ink-800); }
#sheet .cd-n {
  flex: none; width: 20px; height: 20px; border-radius: var(--radius-pill);
  background: var(--brand-100); color: var(--brand-800);
  font-size: 11.5px; font-weight: 800; line-height: 20px; text-align: center;
}
@media (min-width: 768px) {
  #sheet .cd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
}
/* 桌機回到稿的一列四張。門檻取抽屜達到滿寬 1010px 的視窗寬：
   1010 ＋ 側欄 248 ＋ 頁面留白 ≈ 1300。低於此抽屜會被壓窄，維持 2×2。 */
@media (min-width: 1300px) {
  #sheet .cd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------- 時機建議底條
   稿右側是「下載此牛決策清單」。系統沒有逐頭匯出，只有整場的
   downloadCullCsv()，故標成「下載決策清單」接真實行為，不做假入口。 */
#sheet .cd-time { background: var(--brand-100); border-color: var(--brand-300); margin-bottom: 12px; }
#sheet .cd-time .ic-orb { background: var(--surface-0); color: var(--brand-700); flex: none; }
#sheet .cd-time .act-body b { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink-950); }
#sheet .cd-time .act-body p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--brand-800); font-weight: 600; }
#sheet .cd-dl {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--radius-pill);
  background: var(--coral-600); color: #fff; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
#sheet .cd-dl:hover { background: var(--coral-700); }
#sheet .cd-dl:focus-visible { outline: 3px solid rgb(241 107 77 / .4); outline-offset: 2px; }
#sheet .cd-dl svg { width: 17px; height: 17px; }
#sheet .cd-foot { text-align: center; font-size: 11.5px; color: var(--ink-500); padding: 2px 0 4px; }

/* ==================================================================== 手機 */
@media (max-width: 767px) {
  #sheet .cd-hero { min-height: 200px; align-items: flex-end; }
  #sheet .cd-hero__media { inset: 0; }
  #sheet .cd-hero__scrim {
    background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .72) 46%, #fff 78%);
  }
  #sheet .cd-hero__c { max-width: 100%; padding: 16px; }
  #sheet .cd-hero__no { font-size: 26px; }
  #sheet .cd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #sheet .cd-kpis .kpi--ic:first-child { grid-column: 1 / -1; }
  #sheet .cd-ebv { padding: 14px 15px 12px; }
  #sheet .cd-ebv .bar .n { width: 46px; font-size: 12px; }
  #sheet .cd-ebv .bar .v { width: 56px; font-size: 12px; }
  #sheet .cd-why { margin-top: 14px; }
  #sheet .cd-time { flex-direction: column; align-items: stretch; }
  #sheet .cd-dl { width: 100%; justify-content: center; margin-top: 4px; }
}

/* ============================================================================
   配種建議明細（#matesheet）— 高保真稿 09 套用
   ----------------------------------------------------------------------------
   全部規則掛在 #matesheet 底下。.card/.kpi/.chart-t/.act/.chip 等 class 全站共用
   （光 .kpi 就有 19 處），寫裸選擇器會整站壞版，故一律加 #matesheet 前綴。
   容器本身（右側抽屜／全螢幕、.sheet-hd）沿用共用的 §5 明細樣式，不在此重定義。
   ========================================================================== */

/* 麵包屑：稿的平板／桌機版在抽屜頂端有一條路徑，手機沒有（同 #sheet） */
#matesheet .mt-crumb { display: none; }
@media (min-width: 768px) {
  #matesheet .mt-crumb {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: 12px; font-weight: 600; color: var(--brand-700); margin: 0 0 14px;
  }
  #matesheet .mt-crumb i { font-style: normal; color: var(--ink-500); }
  #matesheet .mt-crumb b { color: var(--ink-950); font-weight: 700; }
}

/* --------------------------------------------------------------- 照片英雄卡
   稿：白卡內母牛照從右側淡入，左側疊牛號、近親風險 chip、胎次／狀態／目標三欄。
   照片是設計包提供的單一張示意圖（非逐頭實拍），故 alt 留空並 aria-hidden，
   當純背景處理，不讓螢幕報讀器誤以為是這頭牛本人的照片。 */
#matesheet .mt-hero {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--line-1); border-radius: var(--radius-lg);
  background: var(--surface-0); min-height: 196px;
  display: flex; align-items: flex-end; margin-bottom: 14px;
}
#matesheet .mt-hero__media { position: absolute; inset: 0 0 0 38%; }
#matesheet .mt-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 34%; display: block;
}
#matesheet .mt-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #fff 0%, #fff 38%, rgb(255 255 255 / .72) 52%, rgb(255 255 255 / 0) 70%);
}
#matesheet .mt-hero__c { position: relative; z-index: 1; padding: 20px 18px; max-width: 64%; }
#matesheet .mt-hero__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#matesheet .mt-hero__no {
  font-size: 30px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; color: var(--ink-950);
}
/* 近親風險 chip：綠／琥珀／紅三態，門檻與系統既有分級一致（3.13 / 6.25） */
#matesheet .mt-frisk {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  background: var(--brand-100); color: var(--brand-800); border: 1px solid var(--brand-300);
}
#matesheet .mt-frisk svg { width: 15px; height: 15px; }
#matesheet .mt-frisk.warn { background: var(--amber-100); color: var(--amber-700); border-color: var(--amber-500); }
#matesheet .mt-frisk.bad  { background: var(--danger-100); color: var(--danger-700); border-color: var(--danger-500); }

#matesheet .mt-facts { display: flex; gap: 0; margin-top: 16px; flex-wrap: wrap; }
#matesheet .mt-facts > div {
  padding: 0 18px 0 0; margin-right: 18px; border-right: 1px solid var(--line-1); min-width: 0;
}
#matesheet .mt-facts > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
#matesheet .mt-facts small { display: block; font-size: 11.5px; color: var(--ink-500); font-weight: 600; }
#matesheet .mt-facts b { display: block; margin-top: 3px; font-size: 17px; font-weight: 800; color: var(--ink-950); }
#matesheet .mt-facts b.is-wait { color: var(--coral-700); }

/* ------------------------------------------------- KPI 列（稿：在英雄卡「內」）
   稿的 5 格是母牛表型（乳脂率／DPR…）。台灣 DHI 沒有 DPR、個別牛也沒有
   乳脂率／乳蛋白率百分比，只有子指數，故改印指數；尺度說明放在卡下方一行。
   版面照稿收進英雄卡：胎次／狀態／目標下方一條分隔線，再排 5 格 label/value。 */
#matesheet .mt-hero__kpis {
  /* 第一格是 5 位數＋單位，比 3 位數指數寬，故給 1.3fr（稿也是第一欄較寬） */
  display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 4px 8px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-1);
}
#matesheet .mt-hero__kpis > div { min-width: 0; }
#matesheet .mt-hero__kpis small {
  display: block; font-size: 11px; font-weight: 600; color: var(--ink-500);
  line-height: 1.35; overflow-wrap: anywhere; line-break: anywhere;
}
#matesheet .mt-hero__kpis b {
  display: block; margin-top: 3px; font-size: 17px; font-weight: 800;
  color: var(--ink-950); line-height: 1.2; white-space: nowrap;   /* 數字與單位不拆行 */
}
#matesheet .mt-hero__kpis b em {
  font-size: 10.5px; font-weight: 700; font-style: normal; margin-left: 2px; color: var(--ink-600);
}
/* 平板抽屜 720px：英雄文字欄 64% ≈ 430px，5 格各 ~72px，17px 的「12,497公斤」會差 3px
   而溢出格外（實測）。此區間收一號字，桌機 820px 抽屜才用滿版字級。 */
@media (min-width: 768px) and (max-width: 1179px) {
  #matesheet .mt-hero__kpis b { font-size: 15px; }
  #matesheet .mt-hero__kpis b em { font-size: 9.5px; }
  #matesheet .mt-hero__kpis small { font-size: 10.5px; }
}
#matesheet .mt-kpis__note { font-size: 11.5px; color: var(--ink-500); margin: 0 2px 14px; line-height: 1.6; }
/* 「為什麼這格是空的」—— 緊貼 KPI，農民不必往下捲三屏才知道原因 */
#matesheet .mt-kpis__note.is-warn {
  color: var(--ink-700); background: var(--surface-risk);
  border-radius: var(--radius-sm); padding: 9px 11px; margin-bottom: 10px;
}
#matesheet .mt-kpis__note.is-warn b { color: var(--ink-900); font-weight: 750; }

/* -------------------------------------------------------- 近親安全把關綠底卡 */
#matesheet .mt-safe { background: var(--brand-100); border-color: var(--brand-300); margin-bottom: 18px; }
#matesheet .mt-safe .ic-orb { background: var(--surface-0); color: var(--brand-700); flex: none; }
#matesheet .mt-safe .act-body > b { display: block; font-size: 14px; font-weight: 800; color: var(--ink-950); }
#matesheet .mt-safe .act-body p b { color: var(--brand-900); }
#matesheet .mt-safe .act-body p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--brand-800); font-weight: 600; }

/* --------------------------------------------------------------- 區段標題列 */
#matesheet .mt-sec { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 2px 11px; }
#matesheet .mt-sec h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink-950); }
#matesheet .mt-sec s { text-decoration: none; font-size: 12px; font-weight: 600; color: var(--ink-500); }

/* ------------------------------------------------------------------ 公牛卡
   稿是三欄並排。抽屜最寬 820px，三欄每欄約 250px 仍可讀（卡內字級最大 20px）。
   手機單欄；平板 720px 抽屜下降為兩欄，避免公牛名（最長 21 字元）換三行。 */
#matesheet .mt-bulls { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; }
/* 稿在平板也是三欄。原本平板降兩欄是怕長公牛名換三行讓卡片高度錯開，
   但那正是下面 subgrid 解掉的問題；而兩欄會讓第 3 張卡變成 2＋1 的孤兒排列。
   故 ≥768 一律三欄，只有 700–767（手機全螢幕的寬端）維持兩欄。 */
@media (min-width: 700px) { #matesheet .mt-bulls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { #matesheet .mt-bulls { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

#matesheet .mtb {
  position: relative; background: var(--surface-0);
  border: 1px solid var(--line-1); border-radius: var(--radius-md);
  padding: 30px 15px 14px; display: flex; flex-direction: column; gap: 11px;
}
/* 稿的三張公牛卡「橫向對齊」：公司列、數字列、按鈕列都在同一水平線。
   公牛名長度差很多（最長會排到三行），純 flex 會讓後面的列各自錯位。
   用 subgrid 讓三張卡共用同一組列高，就不必截斷公牛名或 NAAB。
   不支援 subgrid 的瀏覽器自動退回原本的 flex 版面（僅是不對齊，不會壞）。 */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    #matesheet .mt-bulls { grid-auto-rows: auto; }
    #matesheet .mtb {
      display: grid; grid-row: span 4; grid-template-rows: subgrid;
      row-gap: 11px; align-content: start;
    }
    /* 卡片一律有 4 個子節點（沒有 PTA 時 openMate 會補一個空的 .mtb__more-x），
       否則 span 4 與 span 3 混在同一列會讓卡片掉到下一個列帶。 */
  }
}
#matesheet .mtb__rank {
  position: absolute; top: -1px; left: -1px;
  padding: 5px 12px 6px; border-radius: var(--radius-md) 0 var(--radius-md) 0;
  background: var(--brand-800); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
}
#matesheet .mtb__hd { display: flex; align-items: flex-start; gap: 10px; }
#matesheet .mtb__id { flex: 1; min-width: 0; }
#matesheet .mtb__id b {
  display: block; font-size: 15px; font-weight: 800; color: var(--ink-950); line-height: 1.35;
  overflow-wrap: anywhere;
}
#matesheet .mtb__id s {
  display: block; text-decoration: none; margin-top: 3px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-500); overflow-wrap: anywhere;
}
#matesheet .mtb__f {
  flex: none; text-align: center; padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--brand-100); border: 1px solid var(--brand-300);
}
#matesheet .mtb__f small { display: block; font-size: 10.5px; font-weight: 700; color: var(--brand-800); }
#matesheet .mtb__f b { display: block; margin-top: 1px; font-size: 16px; font-weight: 800; color: var(--brand-800); }
#matesheet .mtb__f.warn { background: var(--amber-100); border-color: var(--amber-500); }
#matesheet .mtb__f.warn small, #matesheet .mtb__f.warn b { color: var(--lbl-warn); }

#matesheet .mtb__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; padding-bottom: 11px; border-bottom: 1px solid var(--line-1); }
#matesheet .mtb__chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-600); min-width: 0;
}
#matesheet .mtb__chip svg { width: 14px; height: 14px; flex: none; color: var(--brand-700); }

#matesheet .mtb__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: end; }
#matesheet .mtb__n.is-lead { grid-column: 1 / -1; }
#matesheet .mtb__n small { display: block; font-size: 10.5px; font-weight: 600; color: var(--ink-500); line-height: 1.4; }
#matesheet .mtb__n b { display: block; margin-top: 3px; font-size: 15px; font-weight: 800; color: var(--ink-950); }
#matesheet .mtb__n b em { font-size: 11px; font-weight: 700; font-style: normal; margin-left: 2px; color: var(--ink-600); }
#matesheet .mtb__n.is-lead b { font-size: 20px; }

/* 女兒預估算不出來時的說明。只印一個「—」等於沒說話 —— 農民分不出
   「資料不足」與「這支公牛不好」。實測 4 場（母牛只有 1/4/1/8 頭）整頁都是破折號。 */
#matesheet .mtb__why {
  grid-column: 1 / -1; margin-top: -2px;
  font-size: 11.5px; line-height: 1.5; color: var(--ink-600);
  background: var(--surface-1); border-radius: var(--radius-sm); padding: 7px 9px;
}
#matesheet .mtb__why b { font-weight: 700; color: var(--ink-800); }

/* 稿的「查看完整評估 ›」在本系統沒有對應的公牛頁，改成同卡展開真實 PTA */
#matesheet .mtb__more { margin-top: auto; }
#matesheet .mtb__more > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 700; color: var(--brand-800);
}
#matesheet .mtb__more > summary::-webkit-details-marker { display: none; }
#matesheet .mtb__more > summary::after { content: "▾"; font-size: 11px; }
#matesheet .mtb__more[open] > summary::after { content: "▴"; }
#matesheet .mtb__more > summary:hover { background: var(--surface-soft); }
#matesheet .mtb__more > summary:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; }
#matesheet .mtb__pta { padding: 10px 2px 2px; }
#matesheet .mtb__pr { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin: 6px 2px; }
#matesheet .mtb__pr span { color: var(--ink-500); }
#matesheet .mtb__pr b { color: var(--ink-950); font-weight: 700; }

/* ------------------------------------------------------------ 兩張圖表卡
   稿是左右兩欄。抽屜最寬 820px，兩欄各約 380px，SVG viewBox 寬 340 仍完整，
   故照稿排兩欄；平板 720px 抽屜與手機單欄。 */
/* 不用共用的 .cardgrid.g2：它在平板就切兩欄，每欄只剩 327px，
   圖表 SVG（viewBox 寬 340）會被裁掉。改由本頁自訂，≥1180 才兩欄。 */
#matesheet .mt-grid { margin-bottom: 16px; }
#matesheet .mt-grid > .card { margin-bottom: 14px; }
#matesheet .mt-grid .card.chart { background: var(--surface-0); border-radius: var(--radius-md); padding: 16px 16px 14px; }
#matesheet .mt-grid .chart-t { font-size: 15px; font-weight: 800; color: var(--ink-950); margin: 0 0 12px; }
#matesheet .mt-grid .chart-t s { text-decoration: none; font-size: 11.5px; font-weight: 600; color: var(--ink-500); margin-left: 7px; }
#matesheet .mt-grid .chart-cap { font-size: 11.5px; color: var(--ink-500); margin: 10px 2px 0; line-height: 1.6; }
#matesheet .mt-grid .chart-cap b { color: var(--ink-800); }
@media (min-width: 1180px) {
  /* align-items:start（非 stretch）：左卡是固定長寬比的 SVG，被拉高後底下會多出
     一大片空白；讓兩卡各自依內容收高，版面比等高更接近稿。 */
  #matesheet .mt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
  #matesheet .mt-grid > .card { margin-bottom: 0; }
}

/* ------------------------------------------------------------- P ＝ G ＋ E
   稿：母牛盒 ｜ 公式 ｜ 預估女兒盒。抽屜窄，三欄在 <560px 內文會擠成一字一行，
   故手機改為母牛／女兒兩欄、公式獨立一列。 */
#matesheet .mt-pge {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px;
}
@media (min-width: 560px) { #matesheet .mt-pge { grid-template-columns: 1fr minmax(120px, .9fr) 1fr; align-items: stretch; } }
#matesheet .mt-pge__box {
  background: var(--surface-soft); border: 1px solid var(--line-1);
  border-radius: var(--radius-md); padding: 12px 13px;
}
#matesheet .mt-pge__box--dau { background: var(--brand-100); border-color: var(--brand-300); }
#matesheet .mt-pge__hd { font-size: 12.5px; font-weight: 800; color: var(--ink-950); }
#matesheet .mt-pge__hd s { display: block; text-decoration: none; font-size: 10.5px; font-weight: 600; color: var(--ink-500); margin-top: 2px; }
#matesheet .mt-pge__v { margin-top: 9px; }
#matesheet .mt-pge__v b { font-size: 22px; font-weight: 800; color: var(--brand-700); }
#matesheet .mt-pge__v em { font-size: 11.5px; font-weight: 700; font-style: normal; margin-left: 3px; color: var(--ink-600); }
#matesheet .mt-pge__k { font-size: 11px; color: var(--ink-500); margin-top: 1px; }
#matesheet .mt-pge__r {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  font-size: 11.5px; color: var(--ink-500); margin-top: 7px;
  padding-top: 7px; border-top: 1px solid var(--line-1);
}
#matesheet .mt-pge__r b { color: var(--ink-950); font-weight: 700; }
#matesheet .mt-pge__r b .up { color: var(--brand-500); }
#matesheet .mt-pge__r b .dn { color: var(--ink-600); }
#matesheet .mt-pge__eq {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 8px 6px;
}
#matesheet .mt-pge__f { font-size: 22px; font-weight: 800; color: var(--ink-950); letter-spacing: .02em; }
#matesheet .mt-pge__f .g { color: var(--amber-700); }
#matesheet .mt-pge__f .e { color: var(--brand-500); }
#matesheet .mt-pge__ft { font-size: 11.5px; font-weight: 700; color: var(--ink-600); margin-top: 6px; }
#matesheet .mt-pge__ft2 { font-size: 11px; color: var(--ink-500); margin-top: 8px; line-height: 1.65; }
#matesheet .mt-pge__ft2 b { color: var(--ink-800); }
#matesheet .mt-pge__ft2 .g { color: var(--amber-700); }

/* ------------------------------------------------------- 回歸平均／重要提醒 */
#matesheet .mt-notes { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
@media (min-width: 560px) { #matesheet .mt-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#matesheet .mt-note { border-radius: var(--radius-md); padding: 12px 13px; }
#matesheet .mt-note__hd { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; margin-bottom: 7px; }
#matesheet .mt-note__hd svg { width: 16px; height: 16px; flex: none; }
#matesheet .mt-note p { margin: 0; font-size: 12px; line-height: 1.75; color: var(--ink-800); }
#matesheet .mt-note--ok { background: var(--brand-100); border: 1px solid var(--brand-300); }
#matesheet .mt-note--ok .mt-note__hd { color: var(--brand-800); }
#matesheet .mt-note--warn { background: var(--surface-risk); border: 1px solid var(--coral-100); }
#matesheet .mt-note--warn .mt-note__hd { color: var(--coral-700); }

/* P＝G＋E 長篇說明：稿沒有這塊，但科學限制不可刪，維持既有收合 */
#matesheet .mt-det { margin-top: 12px; border-top: 1px solid var(--line-1); padding-top: 4px; }
#matesheet .mt-det > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
  min-height: 44px; font-size: 12.5px; font-weight: 700; color: var(--brand-700);
}
#matesheet .mt-det > summary::-webkit-details-marker { display: none; }
#matesheet .mt-det > summary::after { content: "▾"; font-size: 11px; }
#matesheet .mt-det[open] > summary::after { content: "▴"; }
#matesheet .mt-det > summary:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; }
#matesheet .mt-det #ba-pge { font-size: 12px; color: var(--ink-600); line-height: 1.85; padding: 2px 2px 8px; }

/* ------------------------------------------------------------------ 底部列
   稿：左側資料來源 meta、右側「匯出評估報告」與珊瑚色「制定精液採購計畫」。
   系統沒有報告產生器，左鈕接真實的配種清單 CSV；右鈕接既有的 openProc()。 */
#matesheet .mt-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--line-1); padding-top: 14px; margin-top: 4px;
}
#matesheet .mt-foot__meta { flex: 1; min-width: 200px; font-size: 11.5px; color: var(--ink-500); line-height: 1.7; }
#matesheet .mt-foot__meta i { font-style: normal; margin: 0 7px; color: var(--line-strong); }
#matesheet .mt-foot__act { display: flex; gap: 10px; flex-wrap: wrap; }
#matesheet .mt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 17px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: var(--surface-0); color: var(--ink-950);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
#matesheet .mt-btn svg { width: 17px; height: 17px; }
#matesheet .mt-btn:hover { background: var(--surface-soft); }
#matesheet .mt-btn:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; }
#matesheet .mt-btn--cta { border-color: var(--coral-600); background: var(--coral-600); color: #fff; }
#matesheet .mt-btn--cta:hover { background: var(--coral-700); border-color: var(--coral-700); }
#matesheet .mt-btn--cta:focus-visible { outline: 3px solid rgb(241 107 77 / .4); }

/* ==================================================================== 手機 */
@media (max-width: 767px) {
  #matesheet .mt-hero { min-height: 216px; }
  #matesheet .mt-hero__media { inset: 0; }
  #matesheet .mt-hero__scrim {
    background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .74) 44%, #fff 76%);
  }
  #matesheet .mt-hero__c { max-width: 100%; padding: 16px; }
  #matesheet .mt-hero__no { font-size: 26px; }
  #matesheet .mt-facts { margin-top: 13px; }
  #matesheet .mt-facts > div { padding-right: 14px; margin-right: 14px; }
  #matesheet .mt-facts b { font-size: 15.5px; }
  /* 手機 354px 內排 5 格：字級與間距收一號，讓「乳蛋白指數」與 5 位數金額都不被裁 */
  #matesheet .mt-hero__kpis { gap: 4px 5px; margin-top: 12px; padding-top: 11px; }
  #matesheet .mt-hero__kpis small { font-size: 10px; }
  #matesheet .mt-hero__kpis b { font-size: 13.5px; }
  #matesheet .mt-hero__kpis b em { font-size: 9px; margin-left: 1px; }
  #matesheet .mt-safe { flex-direction: row; }
  #matesheet .mt-foot__act { width: 100%; }
  #matesheet .mt-foot__act .mt-btn { flex: 1; }
}

/* 桌機抽屜（820px）把兩張圖表卡並排後，每張只剩約 380px：
   稿的「母牛｜公式｜女兒」三欄在這個寬度會把公式壓成兩行。
   故 ≥1180 改為公式獨立一列、母牛與女兒兩欄；提醒卡也改單欄。
   560–1179 是單欄圖表卡（約 660px），維持稿的三欄配置。 */
@media (min-width: 1180px) {
  #matesheet .mt-pge { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #matesheet .mt-pge__eq { grid-column: 1 / -1; order: -1; padding: 0 4px 4px; }
  #matesheet .mt-pge__f { font-size: 19px; }
  #matesheet .mt-pge__ft2 { max-width: 46ch; }
  #matesheet .mt-notes { grid-template-columns: 1fr; }
}

/* ============================================================================
   精液採購計畫明細（#procsheet）— 高保真稿 10 套用
   ----------------------------------------------------------------------------
   全部規則掛在 #procsheet 底下。.card/.kpi/.chart-t/.note 等 class 全站共用
   （光 .kpi 就有 19 處），寫裸選擇器會整站壞版，故一律加 #procsheet 前綴。
   容器本身（右側抽屜／全螢幕、.sheet-hd）沿用共用的 §5 明細樣式，不在此重定義。

   版面說明：稿 10 的桌機版是「左清單 ＋ 右側三張控制卡」的整頁兩欄工作台，
   但本頁在本系統是明細抽屜（最寬 820px），拆兩欄後每欄只剩約 380px，
   七欄的採購表會被壓爛。故採用稿的**手機版流程順序**（英雄 → 比例控制 →
   採購清單 → 三格總計 → 預算優化器 → 提醒），在 ≥768 才把控制卡與總計卡並排。
   ========================================================================== */

/* 麵包屑：稿的平板／桌機版在抽屜頂端有一條路徑，手機沒有（同 #matesheet） */
#procsheet .pr-crumb { display: none; }
@media (min-width: 768px) {
  #procsheet .pr-crumb {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: 12px; font-weight: 600; color: var(--brand-700); margin: 0 0 12px;
  }
  #procsheet .pr-crumb i { font-style: normal; color: var(--ink-500); }
  #procsheet .pr-crumb b { color: var(--ink-950); font-weight: 700; }
}

/* ------------------------------------------------- 頂列：脈絡 chip ＋ 匯出鈕 */
#procsheet .pr-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px;
}
#procsheet .pr-ctx {
  /* 稿上是貼齊標題的緊湊 chip，不是撐滿的長條；用 auto margin 把匯出鈕推到右邊 */
  margin-right: auto; min-width: 0;
  display: inline-flex; align-items: center; padding: 9px 14px;
  border-radius: var(--radius-pill); background: var(--brand-100); color: var(--brand-800);
  font-size: 12.5px; font-weight: 700;
}
#procsheet .pr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: var(--surface-0); color: var(--ink-950);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
#procsheet .pr-btn svg { width: 17px; height: 17px; }
#procsheet .pr-btn:hover { background: var(--surface-soft); }
#procsheet .pr-btn:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; }

/* ------------------------------------------------------- 替換需求引擎英雄卡
   稿：深森林綠底、牛舍照從右側淡入、左側白字算式，右下疊一張白色分派浮卡。
   照片是設計包提供的示意圖（非本場實拍），故 alt 留空並 aria-hidden。 */
#procsheet .pr-hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-lg); background: var(--brand-950);
  margin-bottom: 16px; padding: 18px 18px 18px;
}
#procsheet .pr-hero__media { position: absolute; inset: 0 0 0 34%; }
#procsheet .pr-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block;
}
#procsheet .pr-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--brand-950) 0%, var(--brand-950) 36%,
              rgb(6 56 45 / .82) 54%, rgb(6 56 45 / .32) 78%, rgb(6 56 45 / .18) 100%);
}
#procsheet .pr-hero__c { position: relative; z-index: 1; max-width: 62%; }
#procsheet .pr-hero__t {
  display: flex; align-items: center; gap: 9px;
  font-size: 17px; font-weight: 800; color: #fff;
}
#procsheet .pr-hero__t svg { width: 22px; height: 22px; flex: none; }
#procsheet .pr-hero__d { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: rgb(255 255 255 / .82); }
#procsheet .pr-hero__d2 {
  margin: 12px 0 0; font-size: 11.5px; line-height: 1.7; color: rgb(255 255 255 / .72); max-width: 46ch;
}
#procsheet .pr-hero__d2 b { color: #fff; }

#procsheet .pr-eq { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
#procsheet .pr-eq__i { min-width: 0; }
#procsheet .pr-eq__i small { display: block; font-size: 11.5px; font-weight: 600; color: rgb(255 255 255 / .72); }
#procsheet .pr-eq__i b {
  display: block; margin-top: 2px; font-size: 28px; font-weight: 800; line-height: 1.1;
  color: #fff; white-space: nowrap;   /* 數字與單位不拆行 */
}
#procsheet .pr-eq__i b em { font-size: 12.5px; font-weight: 700; font-style: normal; margin-left: 3px; }
#procsheet .pr-eq__i.is-out b { color: var(--amber-500); }
#procsheet .pr-eq__o { font-size: 19px; font-weight: 700; color: rgb(255 255 255 / .6); padding-bottom: 6px; }

/* 分派浮卡：稿在英雄卡右下角疊白卡；抽屜較窄，改為卡內下緣整條白卡（同稿手機版） */
#procsheet .pr-alloc {
  position: relative; z-index: 1; margin-top: 16px;
  background: var(--surface-0); border-radius: var(--radius-md); padding: 12px 14px;
  box-shadow: var(--shadow-card, 0 6px 18px rgb(6 56 45 / .18));
}
#procsheet .pr-alloc__hd { font-size: 12.5px; font-weight: 800; color: var(--ink-950); margin-bottom: 10px; }
#procsheet .pr-alloc__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#procsheet .pr-alloc__i { min-width: 0; border-left: 1px solid var(--line-1); padding-left: 11px; }
#procsheet .pr-alloc__i:first-child { border-left: 0; padding-left: 0; }
#procsheet .pr-alloc__k {
  display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-600);
  overflow-wrap: anywhere;
}
#procsheet .pr-alloc__k em { font-style: normal; font-weight: 800; color: var(--ink-950); margin-left: auto; }
#procsheet .pr-alloc__i b {
  display: block; margin-top: 5px; font-size: 20px; font-weight: 800; color: var(--ink-950); white-space: nowrap;
}
#procsheet .pr-alloc__i b s { text-decoration: none; font-size: 11.5px; font-weight: 700; margin-left: 2px; color: var(--ink-600); }
#procsheet .pr-alloc__i > span { display: block; font-size: 11px; color: var(--ink-500); margin-top: 1px; }

/* 型式色點：與 mixBar／TCOL 同一組語意色（選性／一般／肉牛） */
#procsheet .pr-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
#procsheet .pr-dot.is-sex  { background: var(--brand-800); }
#procsheet .pr-dot.is-conv { background: var(--amber-500); }
#procsheet .pr-dot.is-beef { background: var(--coral-600); }

/* ---------------------------------------------- 控制列：比例滑桿 ＋ 假設提醒 */
#procsheet .pr-ctrl { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
@media (min-width: 620px) { #procsheet .pr-ctrl { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

#procsheet .pr-card { background: var(--surface-0); border: 1px solid var(--line-1); border-radius: var(--radius-md); padding: 15px 16px 16px; margin: 0; }
#procsheet .pr-card__t {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 15px; font-weight: 800; color: var(--ink-950);
}
#procsheet .pr-card__t .ic-orb { width: 32px; height: 32px; flex: none; }
#procsheet .pr-card__t .ic-orb svg { width: 18px; height: 18px; }
#procsheet .pr-card__r { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ink-500); }

#procsheet .pr-big { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 12px 0 10px; }
#procsheet .pr-big b { font-size: 32px; font-weight: 800; line-height: 1; color: var(--brand-700); }
#procsheet .pr-big s { text-decoration: none; font-size: 12px; font-weight: 600; color: var(--ink-500); }

#procsheet .pr-range { width: 100%; display: block; }
#procsheet .pr-range__ends {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-500); margin-top: 4px;
}
/* 兩端的數字下面各掛一行小標，說明左端＝守後備下限、右端＝完整計畫，
   讓「拉到底各是什麼」一眼可讀。 */
#procsheet .pr-range__ends span { display: flex; flex-direction: column; }
#procsheet .pr-range__ends span:last-child { align-items: flex-end; text-align: right; }
#procsheet .pr-range__ends em {
  font-style: normal; font-size: 10px; font-weight: 600;
  color: var(--ink-400); margin-top: 1px;
}

#procsheet .pr-warncard {
  background: var(--surface-risk); border: 1px solid var(--coral-100);
  border-radius: var(--radius-md); padding: 15px 16px; margin: 0;
}
#procsheet .pr-warncard__t {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 800; color: var(--coral-700);
}
#procsheet .pr-warncard__t svg { width: 18px; height: 18px; flex: none; }
#procsheet .pr-warncard p { margin: 8px 0 0; font-size: 12px; line-height: 1.75; color: var(--ink-800); }
#procsheet .pr-warncard p b { color: var(--ink-950); }

/* ------------------------------------------------------------- 採購清單表格
   稿是七欄表格（代理商欄跨列）。抽屜最寬 820px，代理商欄再吃掉 150px 後
   公牛名（最長 21 字元＋NAAB）會被擠到換三行，故把代理商抽成每組的標題列，
   其餘六欄照稿排。手機改為 label/value 卡片列（§9：表格不可縮到無法閱讀）。 */
#procsheet .pr-list { background: var(--surface-0); border: 1px solid var(--line-1); border-radius: var(--radius-md); padding: 15px 16px 6px; margin: 0 0 16px; }
#procsheet .pr-list__t { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }
#procsheet .pr-list__t h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink-950); }
#procsheet .pr-list__t s { text-decoration: none; font-size: 12px; font-weight: 600; color: var(--ink-500); }

#procsheet .pr-th { display: none; }
#procsheet .pr-ag { border-top: 1px solid var(--line-1); padding: 12px 0 10px; }
#procsheet .pr-ag__hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
#procsheet .pr-ag__hd .ic-orb { width: 32px; height: 32px; flex: none; }
#procsheet .pr-ag__hd .ic-orb svg { width: 18px; height: 18px; }
#procsheet .pr-ag__id { flex: 1; min-width: 0; }
#procsheet .pr-ag__id b { display: block; font-size: 14px; font-weight: 800; color: var(--ink-950); overflow-wrap: anywhere; }
#procsheet .pr-ag__id s { display: block; text-decoration: none; margin-top: 1px; font-size: 11.5px; font-weight: 600; color: var(--ink-500); overflow-wrap: anywhere; }
/* 查無台灣代理商時，標題那格放的是「原廠名」而不是代理商——沒有標記的話
   農民會把 CRV 這種育種公司當成可以打電話訂貨的代理商。 */
#procsheet .pr-ag__kind {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-style: normal; font-size: 10px; font-weight: 700; vertical-align: middle;
  background: var(--surface-2); color: var(--ink-600); border: 1px solid var(--line-2);
}
#procsheet .pr-ag__tel {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 13px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: var(--surface-0);
  font-size: 12.5px; font-weight: 700; color: var(--brand-700); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
#procsheet .pr-ag__tel:hover { background: var(--surface-soft); }
#procsheet .pr-ag__tel:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; }
#procsheet .pr-ag__tel.is-off { color: var(--ink-500); border-style: dashed; }
#procsheet .pr-ag__sub {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--ink-500);
  border-top: 1px dashed var(--line-1); padding-top: 9px; margin-top: 4px;
}
#procsheet .pr-ag__sub b { font-size: 14px; font-weight: 800; color: var(--brand-700); }

#procsheet .pr-tag {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
#procsheet .pr-tag.is-sex  { background: var(--brand-100); color: var(--brand-800); }
#procsheet .pr-tag.is-conv { background: var(--amber-100); color: var(--amber-700); }
#procsheet .pr-tag.is-beef { background: var(--coral-100); color: var(--coral-700); }

/* 展開：同原廠其他可詢價業者與代理商提醒（稿右側 ▾ 的真實內容） */
#procsheet .pr-more { margin-top: 6px; }
#procsheet .pr-more > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  min-height: 44px; font-size: 12px; font-weight: 700; color: var(--brand-700);
}
#procsheet .pr-more > summary::-webkit-details-marker { display: none; }
#procsheet .pr-more > summary::after { content: "▾"; font-size: 11px; }
#procsheet .pr-more[open] > summary::after { content: "▴"; }
#procsheet .pr-more > summary:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; }
#procsheet .pr-more__b {
  background: var(--surface-soft); border: 1px solid var(--line-1);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
#procsheet .pr-more__b p { margin: 0 0 7px; font-size: 11.5px; line-height: 1.7; color: var(--ink-600); }
#procsheet .pr-more__b p:last-child { margin-bottom: 0; }
#procsheet .pr-more__b b { color: var(--ink-950); }
/* 同原廠其他可詢價業者：稿沒有這塊（本系統獨有的詢價名單）。
   原本是逗號串起來的行內連結，手機上高度只有 36px、按不到；改成撥號膠囊。 */
#procsheet .pr-alts { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 9px; }
#procsheet .pr-alts .pr-alt {
  display: inline-flex; flex-direction: column; justify-content: center;
  min-height: 44px; padding: 5px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface-0);
  text-decoration: none; min-width: 0;
}
#procsheet .pr-alts .pr-alt b { font-size: 12px; font-weight: 700; color: var(--ink-950); overflow-wrap: anywhere; }
#procsheet .pr-alts .pr-alt s { text-decoration: none; font-size: 11px; font-weight: 700; color: var(--brand-700); font-variant-numeric: tabular-nums; }
#procsheet .pr-alts a.pr-alt:hover { background: var(--surface-soft); }
#procsheet .pr-alts a.pr-alt:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; }
#procsheet .pr-alts .pr-alt.is-off { border-style: dashed; }
#procsheet .pr-alts .pr-alt.is-off s { color: var(--ink-500); }
#procsheet .pr-more__warn { color: var(--amber-700) !important; display: flex; gap: 6px; }
#procsheet .pr-more__warn svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }

/* ---- 手機／窄抽屜：每一行變成 label／value 卡片（不縮成讀不了的表格）---- */
#procsheet .pr-tr {
  background: var(--surface-soft); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 8px;
}
#procsheet .pr-c { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ink-600); padding: 3px 0; }
#procsheet .pr-c::before { content: attr(data-l); color: var(--ink-500); font-weight: 600; flex: none; }
/* 值一律包在 .pr-v 裡：否則「6」與「頭 × 2.9 次」會被 space-between 拆到兩端 */
#procsheet .pr-c .pr-v { text-align: right; }
#procsheet .pr-c b { color: var(--ink-950); font-weight: 800; }
#procsheet .pr-c--bull { display: block; padding: 0 0 7px; }
#procsheet .pr-c--bull::before { display: none; }
#procsheet .pr-c--bull b { display: block; font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
#procsheet .pr-c--bull s { display: block; text-decoration: none; margin-top: 2px; font-size: 11px; color: var(--ink-500); }
#procsheet .pr-c--bull em {
  display: flex; gap: 5px; margin-top: 4px; font-style: normal;
  font-size: 11px; line-height: 1.6; color: var(--amber-700);
}
#procsheet .pr-c--bull em svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
#procsheet .pr-c--sum b, #procsheet .pr-c--sum { color: var(--ink-950); font-weight: 700; }

/* ---- ≥768：回到稿的六欄表格 ---- */
@media (min-width: 768px) {
  #procsheet .pr-th,
  #procsheet .pr-tr {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) 78px minmax(0, 1.1fr) 66px 68px 78px;
    gap: 10px; align-items: baseline;
  }
  #procsheet .pr-th {
    padding: 0 2px 8px; border-bottom: 1px solid var(--line-1);
    font-size: 11px; font-weight: 700; color: var(--ink-500);
  }
  #procsheet .pr-th > span { overflow-wrap: anywhere; }
  #procsheet .pr-th > span:nth-child(n+4) { text-align: right; }
  #procsheet .pr-tr { background: none; padding: 9px 2px; margin: 0; border-radius: 0; }
  #procsheet .pr-tr + .pr-tr { border-top: 1px dashed var(--line-1); }
  #procsheet .pr-c { display: block; padding: 0; }
  #procsheet .pr-c::before { display: none; }
  #procsheet .pr-c--n { text-align: right; font-variant-numeric: tabular-nums; }
  #procsheet .pr-c--bull { padding: 0; }
  #procsheet .pr-ag { padding: 14px 0 12px; }
}

/* ------------------------------------------------------------ 三格年度總計 */
#procsheet .pr-sum3 { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 8px; }
@media (min-width: 620px) { #procsheet .pr-sum3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 平板抽屜內寬只有 671px，三格各約 214px；共用的 .kpi--ic 預設 orb 44px＋padding 14px
   會讓「肉牛收益預估（年度）」那格差 5px 溢出（audit 實測）。此處收一號。 */
#procsheet .pr-sum3 .kpi--ic { margin: 0; padding: 12px; gap: 9px; }
#procsheet .pr-sum3 .kpi--ic .ic-orb { width: 34px; height: 34px; flex: none; }
#procsheet .pr-sum3 .kpi--ic .ic-orb svg { width: 18px; height: 18px; }
#procsheet .pr-sum3 .kpi--ic small { overflow-wrap: anywhere; }
#procsheet .pr-sum3 .kpi--ic b { white-space: nowrap; font-size: 18px; }
#procsheet .pr-beef b { color: var(--coral-700); }
#procsheet .pr-sum3__note { font-size: 11.5px; line-height: 1.7; color: var(--ink-500); margin: 0 2px 16px; }

/* -------------------------------------------------------- 預算上限優化器 */
#procsheet .pr-opt { margin-bottom: 16px; }
#procsheet .pr-opt .pr-big b { color: var(--brand-800); }
#procsheet .pr-opt__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line-1);
}
#procsheet .pr-opt__stats > div { min-width: 0; }
#procsheet .pr-opt__stats small { display: block; font-size: 11px; font-weight: 600; color: var(--ink-500); overflow-wrap: anywhere; }
#procsheet .pr-opt__stats b { display: block; margin-top: 3px; font-size: 16px; font-weight: 800; color: var(--ink-950); white-space: nowrap; }
#procsheet .pr-opt__stats s { text-decoration: none; font-size: 11px; color: var(--ink-500); }
#procsheet .pr-opt__lead { font-size: 12px; font-weight: 600; color: var(--ink-600); margin: 14px 0 9px; line-height: 1.6; }
#procsheet .pr-opt__rows { display: grid; gap: 8px; }
#procsheet .pr-opt__r { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12px; }
#procsheet .pr-opt__r > span { font-weight: 600; color: var(--ink-800); }
#procsheet .pr-opt__r > b { font-weight: 800; color: var(--ink-950); font-variant-numeric: tabular-nums; }
#procsheet .pr-opt__r > b.dn { color: var(--coral-700); }
#procsheet .pr-opt__r > b.up { color: var(--brand-700); }
#procsheet .pr-opt__r > s { text-decoration: none; color: var(--ink-500); }
#procsheet .pr-opt__ft { font-size: 11px; line-height: 1.7; color: var(--ink-500); margin-top: 12px; }
#procsheet .pr-opt__ft b { color: var(--ink-800); }
#procsheet .pr-opt__warn {
  display: flex; gap: 7px; margin-top: 11px; padding: 9px 11px;
  /* --amber-100 在深色主題沒有被覆寫（仍是淺米色），大面積色塊要用會跟著主題走的
     --surface-warm，否則深色模式下淺底配亮字對比不足。 */
  border-radius: var(--radius-sm); background: var(--surface-warm);
  border: 1px solid var(--amber-500); color: var(--amber-700);
  font-size: 11.5px; font-weight: 700; line-height: 1.6;
}
#procsheet .pr-opt__warn svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
/* 說明文字佔滿 icon 以外的整條寬度並在其內部正常換行；
   min-width:0 讓它在 flex 容器裡縮得下去（否則長中文會撐破版位）。 */
#procsheet .pr-opt__warn-tx { flex: 1; min-width: 0; }

/* 沒有可壓縮空間的場（實測 15 場中有 5 場）：不給滑桿，改出這段說明。
   用中性的資訊色而非警示色——這不是錯誤，是這個場本來就沒得調。 */
#procsheet .pr-opt__noroom {
  display: flex; gap: 7px; margin: 2px 0 4px; padding: 9px 11px;
  border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--line-2); color: var(--ink-700);
  font-size: 11.5px; font-weight: 600; line-height: 1.6;
}
#procsheet .pr-opt__noroom svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
#procsheet .pr-opt__noroom b { font-weight: 800; color: var(--ink-900); }

/* ------------------------------------------------- 資料來源與庫存提醒（琥珀條）
   稿只有一句。方法學、代號規則與資料來源是避免誤讀的科學限制，不能刪，
   照 capSplit 的精神收進 <details>。 */
#procsheet .pr-note {
  background: var(--surface-warm); border: 1px solid var(--amber-500);
  border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 4px;
}
#procsheet .pr-note__t { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--amber-700); }
#procsheet .pr-note__t svg { width: 18px; height: 18px; flex: none; }
#procsheet .pr-note p { margin: 7px 0 0; font-size: 12px; line-height: 1.75; color: var(--ink-800); }
#procsheet .pr-note p b { color: var(--ink-950); }
#procsheet .pr-det { margin-top: 4px; }
#procsheet .pr-det > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  min-height: 44px; font-size: 12px; font-weight: 700; color: var(--amber-700);
}
#procsheet .pr-det > summary::-webkit-details-marker { display: none; }
#procsheet .pr-det > summary::after { content: "▾"; font-size: 11px; }
#procsheet .pr-det[open] > summary::after { content: "▴"; }
#procsheet .pr-det > summary:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; }
#procsheet .pr-det__b {
  background: var(--surface-0); border: 1px solid var(--line-1);
  border-radius: var(--radius-sm); padding: 11px 13px;
  font-size: 11.5px; line-height: 1.8; color: var(--ink-600);
}
#procsheet .pr-det__b b { color: var(--ink-950); }

/* ==================================================================== 手機 */
@media (max-width: 767px) {
  #procsheet .pr-hero { padding: 16px; }
  /* 手機沒有足夠寬度做「左字右照」，改為稿手機版的上下漸層 */
  #procsheet .pr-hero__media { inset: 0; }
  #procsheet .pr-hero__scrim {
    background: linear-gradient(180deg, rgb(6 56 45 / .74) 0%, rgb(6 56 45 / .9) 46%, var(--brand-950) 78%);
  }
  #procsheet .pr-hero__c { max-width: 100%; }
  #procsheet .pr-eq { gap: 9px; }
  #procsheet .pr-eq__i b { font-size: 23px; }
  #procsheet .pr-alloc__row { grid-template-columns: 1fr; gap: 0; }
  #procsheet .pr-alloc__i { border-left: 0; padding: 9px 0; border-top: 1px solid var(--line-1); display: flex; align-items: baseline; gap: 10px; }
  #procsheet .pr-alloc__i:first-child { padding-top: 0; border-top: 0; }
  #procsheet .pr-alloc__k { flex: 1; min-width: 0; }
  #procsheet .pr-alloc__k em { margin-left: 8px; }
  #procsheet .pr-alloc__i b { margin-top: 0; font-size: 17px; }
  #procsheet .pr-top .pr-btn { width: 100%; }
  #procsheet .pr-opt__stats { grid-template-columns: 1fr; gap: 9px; }
  #procsheet .pr-opt__stats > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  #procsheet .pr-opt__stats b { margin-top: 0; }
}

/* ---- 深色主題修正（#procsheet）----
   tokens.css 的深色主題沒有覆寫 --brand-100 以外的 100 級色階：
   --amber-100/--coral-100 仍是淺色，配同樣淺的 --amber-700 會變成淺底淺字；
   --brand-100（深色 #1e3a30）配 --brand-800（深色 #0f5b47）則是深底深字。
   本頁的型式標籤與脈絡 chip 都是純文字，必須在深色下另給一組對比色。 */
:root[data-theme="dark"] #procsheet .pr-ctx { background: var(--brand-100); color: var(--brand-300); }
:root[data-theme="dark"] #procsheet .pr-tag.is-sex  { background: var(--brand-100); color: #7fd1b0; }
:root[data-theme="dark"] #procsheet .pr-tag.is-conv { background: rgb(232 180 85 / .18); color: var(--amber-500); }
:root[data-theme="dark"] #procsheet .pr-tag.is-beef { background: rgb(255 127 99 / .18); color: var(--coral-500); }
:root[data-theme="dark"] #procsheet .pr-alloc { box-shadow: none; border: 1px solid var(--line-1); }
:root[data-theme="dark"] #procsheet .pr-det__b { background: var(--surface-soft); }

/* ============================================================================
   自訂指數個別牛明細（#cixsheet）— 高保真稿 11 套用
   ----------------------------------------------------------------------------
   全部規則掛在 #cixsheet 底下。.card/.kpi/.chart-t/.chart-cap/.chip 全站共用
   （光 .kpi 就有 19 處），寫裸選擇器會整站壞版，故一律加 #cixsheet 前綴。
   容器本身（右側抽屜／全螢幕、.sheet-hd）沿用共用的 §5 明細樣式，不在此重定義。

   與稿的差異（版面照稿、數據照現況）：
   · 稿的貢獻欄單位是 NTM$，本系統無逐性狀經濟權重換算 → 用指數點，caption 說明。
   · 稿的右欄大照片＋出生日期／泌乳天數 meta：台灣 DHI 無這兩個欄位，
     改為稿手機／平板版的圓形頭像 ＋ 我們真的有的 meta（牛群／評估群體／胎次／305 天乳量）。
   · 稿的「43 頭」是示意數；此處一律用實際評估頭數。
   ========================================================================== */

#cixsheet .chart-cap { font-size: 11.5px; color: var(--ink-500); margin: 10px 2px 0; line-height: 1.6; }
#cixsheet .chart-cap b { color: var(--ink-800); }

/* 麵包屑：稿的平板／桌機版在抽屜頂端有一條路徑，手機沒有（同 #sheet／#matesheet） */
#cixsheet .cx-crumb { display: none; }
@media (min-width: 768px) {
  #cixsheet .cx-crumb {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: 12px; font-weight: 600; color: var(--brand-700); margin: 0 0 14px;
  }
  #cixsheet .cx-crumb i { font-style: normal; color: var(--ink-500); }
  #cixsheet .cx-crumb b { color: var(--ink-950); font-weight: 700; }
}

/* ------------------------------------------------------------------- 英雄列
   稿：圓形母牛頭像 ＋ 牛號 ＋ 屬性 chips，右側「返回排名／上一頭／下一頭」。
   照片是設計包提供的單張示意圖（非逐頭實拍），故 alt 留空並 aria-hidden。 */
#cixsheet .cx-hero {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin: 0 0 14px;
}
#cixsheet .cx-hero__main { display: flex; align-items: center; gap: 14px; flex: 1 1 260px; min-width: 0; }
#cixsheet .cx-hero__ph {
  flex: none; width: 68px; height: 68px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--surface-0); box-shadow: 0 2px 10px rgb(6 56 45 / .16);
  background: var(--surface-soft);
}
#cixsheet .cx-hero__ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; }
#cixsheet .cx-hero__c { min-width: 0; }
#cixsheet .cx-hero__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#cixsheet .cx-hero__no {
  font-size: 28px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; color: var(--ink-950);
}
#cixsheet .cx-hero__lb { font-size: 13px; font-weight: 600; color: var(--ink-600); }
#cixsheet .cx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
#cixsheet .cx-chip {
  display: inline-flex; align-items: center; padding: 5px 11px;
  border-radius: var(--radius-pill); border: 1px solid var(--line-1);
  background: var(--surface-0); color: var(--ink-600);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}

/* 牛號切換列：返回排名 ＋ 上一頭／下一頭（觸控目標 ≥44px） */
#cixsheet .cx-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#cixsheet .cx-back,
#cixsheet .cx-step {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 44px; padding: 0 15px; border-radius: var(--radius-pill);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface-0); color: var(--ink-950);
}
#cixsheet .cx-back { border-color: var(--brand-300); color: var(--brand-800); background: var(--brand-100); }
#cixsheet .cx-steps { display: flex; gap: 8px; }
#cixsheet .cx-back:hover, #cixsheet .cx-step:hover { background: var(--surface-soft); }
#cixsheet .cx-back:focus-visible,
#cixsheet .cx-step:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; }
#cixsheet .cx-nav svg { width: 16px; height: 16px; flex: none; }
#cixsheet .cx-rev { display: inline-flex; transform: rotate(180deg); }

/* 底部 meta 條（稿桌機版在右欄下方；此處鋪成整條，只放我們真的有的欄位） */
#cixsheet .cx-meta {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px 0;
  padding: 11px 14px; border: 1px solid var(--line-1); border-radius: var(--radius-md);
  background: var(--surface-soft);
}
#cixsheet .cx-meta > div { padding: 0 16px; border-right: 1px solid var(--line-1); min-width: 0; }
#cixsheet .cx-meta > div:first-child { padding-left: 0; }
#cixsheet .cx-meta > div:last-child { border-right: 0; }
#cixsheet .cx-meta small { font-size: 11px; font-weight: 600; color: var(--ink-500); }
#cixsheet .cx-meta b { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--ink-950); }

/* --------------------------------------------------------------- 三格 KPI 卡
   稿：單張白卡切三欄、欄間細分隔線；每格為 標籤／大數字／註腳（含可靠度條）。 */
#cixsheet .cx-kpis {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; padding: 16px 4px; margin-bottom: 14px;
}
#cixsheet .cx-kpi { padding: 0 14px; border-right: 1px solid var(--line-1); min-width: 0; }
#cixsheet .cx-kpi:last-child { border-right: 0; }
#cixsheet .cx-kpi__k {
  font-size: 12px; font-weight: 700; color: var(--ink-600); line-height: 1.4;
  overflow-wrap: anywhere;
}
#cixsheet .cx-kpi__k s { text-decoration: none; font-weight: 600; color: var(--ink-500); margin-left: 4px; font-size: 11px; }
#cixsheet .cx-kpi__v {
  margin: 6px 0 8px; font-size: 34px; font-weight: 800; line-height: 1.05;
  color: var(--ink-950); white-space: nowrap;
}
#cixsheet .cx-kpi__v.is-green { color: var(--brand-700); }
#cixsheet .cx-kpi__v s { text-decoration: none; font-size: 16px; font-weight: 700; color: var(--ink-500); margin-left: 3px; }
#cixsheet .cx-kpi__f { font-size: 11.5px; font-weight: 600; color: var(--ink-600); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#cixsheet .cx-kpi__f b { color: var(--ink-950); font-weight: 800; }
#cixsheet .cx-relbar {
  flex: 1 1 54px; min-width: 44px; height: 7px; border-radius: 4px;
  background: var(--line-1); overflow: hidden;
}
#cixsheet .cx-relbar i { display: block; height: 100%; border-radius: 4px; background: var(--brand-500); }

/* ------------------------------------------------------------- 編號徽章與卡 */
#cixsheet .cx-card { margin-bottom: 14px; }
#cixsheet .cx-card .chart-t { align-items: flex-start; flex-wrap: wrap; font-size: 14.5px; font-weight: 800; margin-bottom: 12px; }
#cixsheet .cx-card .chart-t s {
  /* 副標另起一行：basis 要扣掉左縮排，否則 100% + 28px margin 會撐破卡片 */
  display: block; flex: 1 1 calc(100% - 28px); min-width: 0; text-decoration: none;
  margin: 4px 0 0 28px; font-size: 11.5px; font-weight: 600; color: var(--ink-600);
  /* capSplit 的 ⓘ 鈕是 .chart-t 的最後一個子節點；副標排最後，ⓘ 才會貼在主標右邊 */
  order: 2;
}
#cixsheet .cx-n {
  flex: none; width: 22px; height: 22px; border-radius: var(--radius-pill);
  background: var(--brand-800); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 22px; text-align: center;
}

/* --------------------------------------------------------- 貢獻分解表（稿 ①）
   欄位：性狀｜子指數｜權重｜高於/低於全國（雙向條 + SD 標籤）｜貢獻 */
#cixsheet .cx-th,
#cixsheet .cx-r {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: minmax(66px, 1.2fr) 40px 38px minmax(86px, 1.9fr) 50px;
}
#cixsheet .cx-th {
  font-size: 10.5px; font-weight: 600; color: var(--ink-500);
  padding-bottom: 7px; border-bottom: 1px solid var(--line-1);
}
#cixsheet .cx-th span:nth-child(2),
#cixsheet .cx-th span:nth-child(3),
#cixsheet .cx-th span:nth-child(5) { text-align: right; }
#cixsheet .cx-th span:nth-child(4) { text-align: center; }
#cixsheet .cx-r { padding: 9px 0; border-bottom: 1px solid var(--line-1); font-size: 13px; }
#cixsheet .cx-r:last-child { border-bottom: 0; }
#cixsheet .cx-r__n { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; color: var(--ink-950); }
#cixsheet .cx-r__n > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cixsheet .cx-r__n .ic-orb { width: 28px; height: 28px; flex: none; }
#cixsheet .cx-r__n .ic-orb svg { width: 16px; height: 16px; }
#cixsheet .cx-r__s { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
#cixsheet .cx-r__s.is-up { color: var(--brand-700); }
#cixsheet .cx-r__s.is-dn { color: var(--coral-700); }
#cixsheet .cx-r__w { text-align: right; color: var(--ink-600); font-variant-numeric: tabular-nums; }
#cixsheet .cx-r__c { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
#cixsheet .cx-r__c.is-up { color: var(--brand-700); }
#cixsheet .cx-r__c.is-dn { color: var(--coral-700); }
/* 稿把 SD 標籤緊貼在條的末端；抽屜最窄只有 115px 可用，緊貼會溢位，
   故固定成右側一欄（條 ＋ 標籤兩段），資訊不變、永不裁切。 */
#cixsheet .cx-r__bar { display: flex; align-items: center; gap: 6px; min-width: 0; }
#cixsheet .cx-r__bar .tr { position: relative; flex: 1 1 auto; min-width: 0; height: 26px; }
#cixsheet .cx-r__bar .mid {
  position: absolute; left: 50%; top: 3px; width: 1px; height: 20px;
  background: var(--line-strong);
}
#cixsheet .cx-r__bar .fill {
  position: absolute; left: 50%; top: 9px; height: 8px; border-radius: 4px;
}
#cixsheet .cx-r__bar .fill.is-up { background: var(--brand-800); }
#cixsheet .cx-r__bar .fill.is-dn { background: var(--coral-600); transform: translateX(-100%); }
#cixsheet .cx-r__bar em {
  flex: none; width: 46px; text-align: right;
  font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--ink-500); white-space: nowrap;
}

#cixsheet .cx-total {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding-top: 11px; border-top: 1px solid var(--line-strong);
  font-size: 12.5px; font-weight: 700; color: var(--ink-800);
}
#cixsheet .cx-total b { font-size: 22px; font-weight: 800; color: var(--brand-700); }

/* --------------------------------------------------------- 強項／弱項 chips */
#cixsheet .cx-sw {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-1);
}
#cixsheet .cx-sw__c { border-left: 3px solid var(--brand-700); padding-left: 12px; min-width: 0; }
#cixsheet .cx-sw__c.is-weak { border-left-color: var(--coral-600); }
#cixsheet .cx-sw__h { font-size: 13px; font-weight: 800; color: var(--brand-700); letter-spacing: .08em; }
#cixsheet .cx-sw__c.is-weak .cx-sw__h { color: var(--coral-700); }
#cixsheet .cx-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
#cixsheet .cx-tag {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 12px;
  border-radius: var(--radius-sm); background: var(--brand-100); color: var(--brand-800);
  font-size: 12.5px; font-weight: 700;
}
#cixsheet .cx-sw__c.is-weak .cx-tag { background: var(--coral-100); color: var(--coral-700); }
#cixsheet .cx-tag em { font-style: normal; font-size: 11px; font-weight: 600; opacity: .8; }
#cixsheet .cx-sw__c .cx-tag.is-none { background: var(--surface-soft); color: var(--ink-500); font-weight: 600; }
@media (min-width: 560px) {
  #cixsheet .cx-sw { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

/* ------------------------------------------------------ 官方 vs 你的目標（②） */
#cixsheet .cx-vs {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch; gap: 10px;
}
#cixsheet .cx-vs__c {
  border: 1px solid var(--line-1); border-radius: var(--radius-md);
  padding: 12px 13px; background: var(--surface-0); min-width: 0;
}
#cixsheet .cx-vs__c.is-you { border-color: var(--brand-300); background: var(--brand-100); }
#cixsheet .cx-vs__c small { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-800); overflow-wrap: anywhere; }
#cixsheet .cx-vs__c em { display: block; margin-top: 7px; font-style: normal; font-size: 11px; color: var(--ink-500); font-weight: 600; }
#cixsheet .cx-vs__c b {
  display: block; margin-top: 2px; font-size: 30px; font-weight: 800; line-height: 1.1;
  color: var(--brand-700); white-space: nowrap;
}
#cixsheet .cx-vs__c b s { text-decoration: none; font-size: 15px; font-weight: 700; color: var(--ink-500); margin-left: 3px; }
#cixsheet .cx-vs__c > span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-600); font-weight: 600; }
#cixsheet .cx-vs__a {
  align-self: center; font-size: 20px; font-weight: 700; color: var(--ink-500);
}
#cixsheet .cx-vs__note {
  grid-column: 1 / -1; display: flex; gap: 9px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius-md); background: var(--brand-100);
}
#cixsheet .cx-vs__note svg { width: 18px; height: 18px; flex: none; color: var(--brand-700); margin-top: 1px; }
#cixsheet .cx-vs__note p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--brand-800); }
#cixsheet .cx-vs__note b { font-weight: 800; }
@media (min-width: 768px) {
  #cixsheet .cx-vs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1.35fr); }
  #cixsheet .cx-vs__note { grid-column: auto; align-items: center; }
}

/* 低可靠度警語（不可刪，只是換了樣式） */
#cixsheet .cx-warn {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--amber-100); color: var(--amber-700);
  font-size: 11.5px; font-weight: 600; line-height: 1.6;
}
#cixsheet .cx-warn svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* ------------------------------------------------------- 原始育種價收合（稿底） */
#cixsheet .cx-ebv {
  border: 1px solid var(--line-1); border-radius: var(--radius-md);
  background: var(--surface-0); overflow: hidden;
}
#cixsheet .cx-ebv > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 52px; padding: 0 16px; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 700; color: var(--ink-950);
}
#cixsheet .cx-ebv > summary::-webkit-details-marker { display: none; }
#cixsheet .cx-ebv__cv { display: inline-flex; color: var(--ink-500); transform: rotate(90deg); transition: transform .16s ease; }
#cixsheet .cx-ebv[open] .cx-ebv__cv { transform: rotate(-90deg); }
#cixsheet .cx-ebv__b { padding: 4px 16px 14px; }
#cixsheet .cx-ebv__r {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--line-1); font-size: 12.5px;
}
#cixsheet .cx-ebv__r span { color: var(--ink-600); }
#cixsheet .cx-ebv__r b { font-weight: 800; color: var(--ink-950); font-variant-numeric: tabular-nums; }
#cixsheet .cx-ebv__c {
  margin: 10px 0 0; font-size: 11px; line-height: 1.7; color: var(--ink-500);
}

/* --------------------------------------------------------------------- 手機 */
@media (max-width: 767px) {
  #cixsheet .cx-hero { gap: 12px; }
  #cixsheet .cx-hero__no { font-size: 24px; }
  #cixsheet .cx-hero__ph { width: 58px; height: 58px; }
  #cixsheet .cx-nav { flex: 1 1 100%; }
  #cixsheet .cx-back { flex: 1 1 100%; }
  #cixsheet .cx-steps { flex: 1 1 100%; }
  #cixsheet .cx-step { flex: 1 1 0; }
  #cixsheet .cx-meta { display: none; }   /* 稿手機版沒有這條 meta；資訊已在 chips 與各卡內 */
  #cixsheet .cx-kpis { padding: 14px 0; }
  #cixsheet .cx-kpi { padding: 0 9px; }
  #cixsheet .cx-kpi__k { font-size: 11.5px; }
  #cixsheet .cx-kpi__f { font-size: 11px; }
  #cixsheet .cx-kpi__v { font-size: 26px; }
  #cixsheet .cx-kpi__v s { font-size: 13px; }
  #cixsheet .cx-th, #cixsheet .cx-r {
    grid-template-columns: minmax(58px, 1.1fr) 34px 34px minmax(76px, 1.5fr) 44px; gap: 5px;
  }
  #cixsheet .cx-r { font-size: 12.5px; }
  #cixsheet .cx-r__n .ic-orb { width: 24px; height: 24px; }
  #cixsheet .cx-r__n .ic-orb svg { width: 14px; height: 14px; }
  #cixsheet .cx-r__bar em { font-size: 9.5px; width: 40px; }
  #cixsheet .cx-vs__c b { font-size: 25px; }
}

/* ═══════════════════════════════════════════════ 12 · 個別耐熱明細 #heatsheet
   稿：12-heat-cow-detail（桌機／平板／手機）。
   容器本身（右側抽屜／全螢幕、.sheet-hd）沿用共用的 §5 明細樣式，不在此重定義。
   全部選擇器都掛在 #heatsheet 底下：.kpi/.card/.chip 等是全站共用類別，
   在此寫裸選擇器會波及其他頁。 */

#heatsheet .hx-crumb {
  display: none; align-items: center; gap: 7px;
  margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--ink-600);
}
@media (min-width: 1180px) { #heatsheet .hx-crumb { display: flex; } }
#heatsheet .hx-crumb i { font-style: normal; color: var(--ink-500); }
#heatsheet .hx-crumb b { color: var(--ink-950); font-weight: 700; }

/* ------------------------------------------------------------------ 英雄卡
   稿：白卡，左為圓形頭像＋牛號＋chips，中／右為耐熱指數與可靠度，
   右上角照片自右淡入（不把文字烤在圖上，故文字區與圖分欄）。 */
#heatsheet .hx-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr; gap: 14px;
  padding: 16px; margin: 0 0 12px;
  border: 1px solid var(--line-1); border-radius: var(--radius-lg);
  background: var(--card); box-shadow: var(--shadow-sm);
}
#heatsheet .hx-hero__media { display: none; }
@media (min-width: 768px) {
  #heatsheet .hx-hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, .95fr) minmax(0, .9fr); align-items: center; }
}
/* 稿的照片自右淡入。抽屜只有 720–820px，若讓照片壓到 40%，「資料可靠度」那欄的字會
   疊在牛身上（實測不可讀），故照片只佔最右 22%，並用 padding-right 把文字擋在照片左邊。
   平板抽屜更窄，直接不放照片（圓形頭像已提供品牌視覺）。 */
@media (min-width: 1180px) {
  #heatsheet .hx-hero { padding-right: calc(16px + 22%); }
  #heatsheet .hx-hero__media {
    display: block; position: absolute; inset: 0 0 auto auto; width: 26%; height: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
    mask-image: linear-gradient(90deg, transparent, #000 55%);
    opacity: .62; pointer-events: none;
  }
  #heatsheet .hx-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; display: block; }
  #heatsheet .hx-hero__meta { position: relative; z-index: 1; }
}
#heatsheet .hx-hero__id { display: flex; align-items: center; gap: 13px; min-width: 0; }
#heatsheet .hx-hero__ph {
  flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--surface-0); box-shadow: 0 2px 10px rgb(6 56 45 / .16);
  background: var(--surface-soft);
}
#heatsheet .hx-hero__ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; }
#heatsheet .hx-hero__top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
#heatsheet .hx-hero__no { font-size: 27px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--ink-950); }
#heatsheet .hx-hero__lb { font-size: 12.5px; font-weight: 600; color: var(--ink-600); }
#heatsheet .hx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#heatsheet .hx-chip {
  display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: var(--radius-pill); border: 1px solid var(--line-1);
  background: var(--surface-0); color: var(--ink-600);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
#heatsheet .hx-chip.is-red { border-color: var(--coral-100); background: var(--coral-100); color: var(--coral-700); }
#heatsheet .hx-chip.is-green { border-color: var(--brand-100); background: var(--brand-100); color: var(--brand-800); }

#heatsheet .hx-hero__fig { min-width: 0; position: relative; z-index: 1; }
@media (min-width: 768px) { #heatsheet .hx-hero__fig { border-left: 1px solid var(--line-1); padding-left: 16px; } }
#heatsheet .hx-hero__fig small { display: block; font-size: 12px; font-weight: 700; color: var(--ink-600); }
#heatsheet .hx-hero__fig small s { text-decoration: none; font-weight: 600; font-size: 11px; color: var(--ink-500); margin-left: 5px; }
#heatsheet .hx-big {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px;
  margin: 5px 0 4px; font-size: 36px; font-weight: 800; line-height: 1.05; color: var(--ink-950);
}
#heatsheet .hx-pill {
  padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; white-space: nowrap;
  background: var(--surface-soft); color: var(--ink-600);
}
#heatsheet .hx-pill.is-red { background: var(--coral-100); color: var(--coral-700); }
#heatsheet .hx-pill.is-green { background: var(--brand-100); color: var(--brand-800); }
#heatsheet .hx-hero__fig em { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ink-600); line-height: 1.6; }
#heatsheet .hx-rel {
  display: flex; align-items: center; gap: 7px; margin: 6px 0 4px;
  font-size: 24px; font-weight: 800; color: var(--brand-700);
}
#heatsheet .hx-rel svg { width: 22px; height: 22px; flex: none; }

/* 底部 meta 條：只放我們真的有的欄位（稿上的品種／泌乳天數／首產次無資料） */
#heatsheet .hx-meta {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 0;
  padding: 11px 14px; border: 1px solid var(--line-1); border-radius: var(--radius-md);
  background: var(--surface-soft); position: relative; z-index: 1;
}
#heatsheet .hx-meta > div { padding: 0 16px; border-right: 1px solid var(--line-1); min-width: 0; }
#heatsheet .hx-meta > div:first-child { padding-left: 0; }
#heatsheet .hx-meta > div:last-child { border-right: 0; }
#heatsheet .hx-meta small { font-size: 11px; font-weight: 600; color: var(--ink-500); }
#heatsheet .hx-meta b { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--ink-950); }
/* 「為什麼沒有數字」—— 裸的破折號與捏造的數字一樣糟 */
#heatsheet .hx-meta__q { display: block; margin-top: 3px; font-size: 10.5px; font-style: normal;
  font-weight: 500; line-height: 1.45; color: var(--ink-500); white-space: normal; }

/* ------------------------------------------------------------- 牛號切換列 */
#heatsheet .hx-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
#heatsheet .hx-back,
#heatsheet .hx-step {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 44px; padding: 0 15px; border-radius: var(--radius-pill);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface-0); color: var(--ink-950);
}
#heatsheet .hx-back { border-color: var(--brand-300); color: var(--brand-800); background: var(--brand-100); }
#heatsheet .hx-steps { display: flex; gap: 8px; margin-left: auto; }
#heatsheet .hx-back:hover, #heatsheet .hx-step:hover { background: var(--surface-soft); }
#heatsheet .hx-back:focus-visible,
#heatsheet .hx-step:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; }
#heatsheet .hx-nav svg { width: 16px; height: 16px; flex: none; }
#heatsheet .hx-rev { display: inline-flex; transform: rotate(180deg); }

/* --------------------------------------------------------------- 卡片格線
   稿桌機：① ② 一列、③ 與（④⑤）一列、⑥ 整條。
   單欄時順序為 ①②③④⑤⑥，與手機稿一致。 */
#heatsheet .hx-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
#heatsheet .hx-col { display: grid; grid-template-columns: 1fr; gap: 12px; align-content: start; }
@media (min-width: 768px) {
  #heatsheet .hx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #heatsheet .hx-src { grid-column: 1 / -1; }
}

#heatsheet .hx-card { margin: 0; }
#heatsheet .hx-card .chart-t { align-items: flex-start; flex-wrap: wrap; font-size: 14.5px; font-weight: 800; margin-bottom: 12px; }
#heatsheet .hx-card .chart-t s {
  display: block; flex: 1 1 100%; text-decoration: none;
  font-size: 12px; font-weight: 600; color: var(--ink-600); margin-top: 3px;
}
/* 章節序號由「文字數字 + CSS 圓框」改為官方 step-1…step-5 圖示。
   圖示自帶圓框，故容器不再畫 border（否則雙層圓），尺寸也要跟著放大到 24px：
   原本 21px 裝 24px 的 svg 會溢出 3px（audit 在三種裝置各回報 3 次）。 */
#heatsheet .hx-n {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-right: 8px; color: var(--brand-700);
}
#heatsheet .hx-n svg { width: 24px; height: 24px; }

/* ------------------------------------------------- ① 為什麼她怕熱：小卡列 */
#heatsheet .hx-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
@media (min-width: 1180px) { #heatsheet .hx-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#heatsheet .hx-mini {
  padding: 12px 12px 11px; border: 1px solid var(--line-1);
  border-radius: var(--radius-md); background: var(--surface-0); min-width: 0;
}
#heatsheet .hx-mini__k { font-size: 11.5px; font-weight: 700; color: var(--ink-600); line-height: 1.4; overflow-wrap: anywhere; }
#heatsheet .hx-mini__k s { text-decoration: none; font-weight: 600; color: var(--ink-500); margin-left: 4px; }
#heatsheet .hx-mini__v { margin: 7px 0 8px; font-size: 15px; font-weight: 700; color: var(--ink-500); }
#heatsheet .hx-mini__v em {
  font-style: normal; font-size: 27px; font-weight: 800; color: var(--ink-950);
  margin-right: 4px; line-height: 1.05;
}
#heatsheet .hx-mini__v em.is-red { color: var(--coral-700); }
#heatsheet .hx-mini__v em.is-green { color: var(--brand-700); }
#heatsheet .hx-mini__v em.is-amber { color: var(--amber-700); }
#heatsheet .hx-mini__v s { text-decoration: none; font-size: 11.5px; font-weight: 600; color: var(--ink-500); }
#heatsheet .hx-mini__c {
  display: inline-block; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--surface-soft); color: var(--ink-600); font-size: 11.5px; font-weight: 700;
}
#heatsheet .hx-mini__c.is-red { background: var(--coral-100); color: var(--coral-700); }
#heatsheet .hx-mini__c.is-green { background: var(--brand-100); color: var(--brand-800); }
#heatsheet .hx-mini__c.is-amber { background: var(--amber-100); color: var(--amber-700); }
#heatsheet .hx-mini__f { margin-top: 9px; font-size: 11.5px; font-weight: 600; color: var(--ink-600); line-height: 1.6; }

/* --------------------------------------------------- ② 散點：圖例與定位條 */
#heatsheet .hx-lgd { margin: 2px 0 6px; }
#heatsheet .hx-quad {
  margin-top: 10px; padding: 10px 13px; border-left: 3px solid var(--ink-600);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-soft);
  font-size: 12.5px; font-weight: 600; color: var(--ink-800); line-height: 1.7;
}
#heatsheet .hx-quad b { display: block; font-weight: 800; }

/* ------------------------------------------------------- ③ 反應曲線下統計 */
#heatsheet .hx-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  margin-top: 12px; padding: 12px 0;
  border: 1px solid var(--line-1); border-radius: var(--radius-md); background: var(--surface-soft);
}
/* padding 12px 時，格子 116px 只留 92px 給數值，而 21px 字級下最寬的真實字串
   （'−0.02'／'−2.00'／'−99.9'）需要 95px —— 溢出 3px。這是資料相依的：
   '−0.2' 只要 82px 不會溢出，所以只有部分牛會踩到，目視很難發現。
   全 199 場實測上界：herMag 最大 2.00、每日掉乳最大 13.4，都是 5 字元，
   量得最寬 95px。改 8px 留 5px 餘裕（10px 只餘 1px，字型微調就會再溢出）。 */
#heatsheet .hx-stats > div { padding: 0 8px; border-right: 1px solid var(--line-1); min-width: 0; }
#heatsheet .hx-stats > div:last-child { border-right: 0; }
#heatsheet .hx-stats small { display: block; font-size: 11px; font-weight: 600; color: var(--ink-600); line-height: 1.5; }
#heatsheet .hx-stats b { display: block; margin-top: 5px; font-size: 21px; font-weight: 800; color: var(--ink-950); white-space: nowrap; }
#heatsheet .hx-stats b.is-red { color: var(--coral-700); }
#heatsheet .hx-stats b s { text-decoration: none; font-size: 11.5px; font-weight: 600; color: var(--ink-500); margin-left: 3px; }

/* ------------------------------------------------------------- ④ 預估損失 */
#heatsheet .hx-loss { grid-template-columns: 1fr; gap: 9px; margin: 0; }

/* ------------------------------------------------------------- ⑤ 建議行動 */
#heatsheet .hx-acts { display: grid; gap: 12px; }
#heatsheet .hx-act { display: flex; gap: 11px; align-items: flex-start; min-width: 0; }
#heatsheet .hx-act .ic-orb { flex: none; width: 34px; height: 34px; }
#heatsheet .hx-act .ic-orb svg { width: 20px; height: 20px; }
#heatsheet .hx-act b { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink-950); }
#heatsheet .hx-act span { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--ink-600); line-height: 1.7; }

/* ------------------------------------------------------- ⑥ 可靠度與資料來源 */
#heatsheet .hx-src__g { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { #heatsheet .hx-src__g { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
#heatsheet .hx-src__rel { display: flex; gap: 11px; align-items: flex-start; }
#heatsheet .hx-src__rel .ic-orb { flex: none; width: 34px; height: 34px; }
#heatsheet .hx-src__rel .ic-orb svg { width: 20px; height: 20px; }
#heatsheet .hx-src__rel b { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink-950); }
#heatsheet .hx-src__rel span { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--ink-600); line-height: 1.7; }
#heatsheet .hx-src__l { margin: 0; padding: 0 0 0 18px; display: grid; gap: 7px; }
#heatsheet .hx-src__l li { font-size: 12px; font-weight: 600; color: var(--ink-600); line-height: 1.6; }
@media (min-width: 700px) { #heatsheet .hx-src__l { border-left: 1px solid var(--line-1); padding-left: 26px; margin-left: 4px; } }

/* 低可靠度警語（不可刪，只是換了樣式） */
#heatsheet .hx-warn {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 14px;
  padding: 10px 13px; border-radius: var(--radius-sm);
  background: var(--amber-100); color: var(--amber-700);
  font-size: 12px; font-weight: 600; line-height: 1.7;
}
#heatsheet .hx-warn svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

#heatsheet .hx-foot { margin-top: 14px; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--ink-500); }

/* 無乳量指數的牛（fallback）用的兩格 KPI */
#heatsheet .hx-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 16px 4px; }
#heatsheet .hx-kpi { padding: 0 14px; border-right: 1px solid var(--line-1); min-width: 0; }
#heatsheet .hx-kpi:last-child { border-right: 0; }
#heatsheet .hx-kpi__k { font-size: 12px; font-weight: 700; color: var(--ink-600); }
#heatsheet .hx-kpi__k s { text-decoration: none; font-weight: 600; color: var(--ink-500); margin-left: 4px; font-size: 11px; }
#heatsheet .hx-kpi__v { margin: 6px 0 6px; font-size: 32px; font-weight: 800; color: var(--ink-950); white-space: nowrap; }
#heatsheet .hx-kpi__v.is-red { color: var(--coral-700); }
#heatsheet .hx-kpi__v s { text-decoration: none; font-size: 15px; font-weight: 700; color: var(--ink-500); margin-left: 3px; }
#heatsheet .hx-kpi__f { font-size: 11.5px; font-weight: 600; color: var(--ink-600); }

/* --------------------------------------------------------------------- 手機 */
@media (max-width: 767px) {
  #heatsheet .hx-hero { padding: 14px; }
  #heatsheet .hx-hero__no { font-size: 24px; }
  #heatsheet .hx-hero__ph { width: 56px; height: 56px; }
  #heatsheet .hx-hero__fig { border-top: 1px solid var(--line-1); padding-top: 12px; }
  #heatsheet .hx-big { font-size: 32px; }
  #heatsheet .hx-meta { display: none; }   /* 手機稿沒有這條；資訊已在 chips 與 ⑥ 資料來源內 */
  #heatsheet .hx-nav { gap: 8px; }
  #heatsheet .hx-back { flex: 1 1 100%; }
  #heatsheet .hx-steps { flex: 1 1 100%; margin-left: 0; }
  #heatsheet .hx-step { flex: 1 1 0; }
  #heatsheet .hx-mini__v em { font-size: 23px; }
  #heatsheet .hx-stats > div { padding: 0 8px; }
  #heatsheet .hx-stats b { font-size: 17px; }
}
@media (min-width: 768px) { #heatsheet .hx-hero--min { grid-template-columns: 1fr; } }

/* Leaflet 的 pane 自帶 z-index 400+，而 #ch-thimap 只有 position:relative（不成 stacking
   context），因此地圖會蓋在 z-index 40 的明細抽屜之上（開啟個別耐熱明細時地圖浮在卡片上）。
   給地圖容器一個自有 stacking context 即可，不動全站 .sheet 的層級。 */
#v-heat #ch-thimap { position: relative; z-index: 0; }

/* ⓘ 按鈕要跟在標題後面，不要被整行寬的副標題 <s> 擠到第三行 */
#heatsheet .hx-card .chart-t .cap-i { order: 1; }
#heatsheet .hx-card .chart-t s { order: 2; }
#heatsheet .hx-rel.is-low { color: var(--amber-700); }

/* 平板抽屜只有 720px：兩欄後每張卡約 330px，③ 的三格統計橫排會互相重疊，
   故在此改成「標籤在左、數字在右」的三列。（放在檔尾才會贏過上面的基準規則） */
@media (min-width: 768px) and (max-width: 1179px) {
  #heatsheet .hx-stats { grid-template-columns: 1fr; gap: 9px; padding: 12px 14px; }
  #heatsheet .hx-stats > div {
    padding: 0; border-right: 0; display: flex; align-items: baseline;
    justify-content: space-between; gap: 10px;
  }
  #heatsheet .hx-stats small { flex: 1 1 auto; }
  #heatsheet .hx-stats b { margin-top: 0; font-size: 19px; flex: none; }
}

/* ============================================================================
   進口公牛明細（#bullsheet）— 高保真稿 13 套用
   ----------------------------------------------------------------------------
   全部規則掛在 #bullsheet 底下。.card/.chart-t/.chart-cap/.lgd/.ic-orb 全站共用
   （光 .card 就是全站基準類別），寫裸選擇器會整站壞版。
   容器本身（桌機 820px／平板 720px 右側抽屜、手機全螢幕、.sheet-hd）沿用共用的
   §5 明細樣式，不在此重定義。
   稿上的可靠度％、A2A2／BB／無角、基因條件、haplotype 安全性、PTAT／UDC／F&L、
   DPR、DCE、電話／庫存／到貨日在資料層都不存在，故沒有對應的樣式區塊。
   ========================================================================== */

#bullsheet .card { background: var(--surface-0); border-color: var(--line-1); border-radius: var(--radius-lg); }
#bullsheet .chart-t {
  font-size: 14.5px; font-weight: 800; color: var(--ink-950);
  margin: 0 0 12px; flex-wrap: wrap; gap: 4px 8px;
}
#bullsheet .chart-t s { text-decoration: none; font-size: 11.5px; font-weight: 600; color: var(--ink-500); }
#bullsheet .chart-cap { font-size: 11.5px; color: var(--ink-500); margin: 10px 2px 0; line-height: 1.6; }
#bullsheet .chart-cap b { color: var(--ink-800); }

/* 麵包屑：本頁的稿在三個裝置都有（手機稿也印「全國 / 公牛明細」），故不隱藏 */
#bullsheet .bs-crumb {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12px; font-weight: 600; color: var(--brand-700); margin: 0 0 12px;
}
#bullsheet .bs-crumb i { font-style: normal; color: var(--ink-500); }
#bullsheet .bs-crumb b { color: var(--ink-950); font-weight: 700; }

/* ------------------------------------------------------------- 照片英雄卡
   稿：左照片、中間牛名／NAAB／公司／代理、右 NM$ 大數字。
   照片是設計包提供的示意圖（非本牛實拍），故 alt 留空並 aria-hidden 當背景處理，
   另在圖上明標「示意圖」，避免被當成這頭公牛本人的照片。 */
#bullsheet .bs-hero {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  background: var(--surface-0); border: 1px solid var(--line-1);
  border-radius: var(--radius-lg); padding: 14px; margin-bottom: 12px;
}
#bullsheet .bs-hero__ph {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--surface-soft);
}
#bullsheet .bs-hero__ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block; }
#bullsheet .bs-hero__ph s {
  position: absolute; left: 8px; bottom: 8px; text-decoration: none;
  padding: 4px 9px; border-radius: var(--radius-pill);
  background: rgb(8 18 11 / .62); color: #fff; font-size: 10.5px; font-weight: 700;
}
#bullsheet .bs-hero__nm {
  display: block; font-size: 21px; font-weight: 800; line-height: 1.25;
  color: var(--ink-950); letter-spacing: -.01em; overflow-wrap: anywhere;
}
/* 三個欄位在 820px 抽屜排得下一行（稿的樣子），窄一點就會斷成
   「NAAB｜(空)」的破格，故 <1180 改用 auto-fit 網格、不畫直線分隔。 */
#bullsheet .bs-hero__meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px 14px; margin-top: 14px;
}
#bullsheet .bs-hero__meta > div { min-width: 0; }
@media (min-width: 1180px) {
  #bullsheet .bs-hero__meta { display: flex; flex-wrap: wrap; gap: 0; }
  #bullsheet .bs-hero__meta > div {
    padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--line-1);
  }
  #bullsheet .bs-hero__meta > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
}
#bullsheet .bs-hero__meta small { display: block; font-size: 11px; font-weight: 600; color: var(--ink-500); }
#bullsheet .bs-hero__meta b {
  display: block; margin-top: 3px; font-size: 14px; font-weight: 800;
  color: var(--ink-950); overflow-wrap: anywhere;
}
#bullsheet .bs-hero__meta b.none { color: var(--amber-700); }
#bullsheet .bs-hero__score {
  border-top: 1px solid var(--line-1); padding-top: 12px;
}
#bullsheet .bs-hero__score small { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-500); }
#bullsheet .bs-hero__score > b {
  display: block; margin-top: 2px; font-size: 34px; font-weight: 800;
  line-height: 1.1; color: var(--brand-800); letter-spacing: -.02em;
}
#bullsheet .bs-hero__bar {
  margin-top: 10px; height: 7px; border-radius: 999px; background: var(--surface-soft);
  border: 1px solid var(--line-1); overflow: hidden;
}
#bullsheet .bs-hero__bar i { display: block; height: 100%; background: var(--brand-700); }
#bullsheet .bs-hero__score s {
  display: block; text-decoration: none; margin-top: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-600);
}

/* --------------------------------------------------------------------- CTA
   稿的「加入配種候選」是本系統沒有的功能，不做假入口；這顆是真的會跳到配種頁。 */
#bullsheet .bs-cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 48px; padding: 12px 16px; margin-bottom: 14px;
  border: 0; border-radius: var(--radius-md); cursor: pointer;
  background: var(--coral-solid); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1.4; text-align: left;
}
#bullsheet .bs-cta:hover { background: var(--coral-600); }
#bullsheet .bs-cta:focus-visible { outline: 3px solid rgb(241 107 77 / .45); outline-offset: 2px; }
#bullsheet .bs-cta svg { width: 18px; height: 18px; flex: none; }

/* ---------------------------------------------------------------- KPI 條
   稿是 7 格橫排（含 DPR／DCE）。台灣端與 CDCB 公牛庫都沒有 DPR／DCE，
   故做 5 格真實欄位；不足者不補。 */
/* 5 格用 auto-fit 會在 820px 抽屜排成 4+1 的孤兒列；改成寫死欄數：
   手機 2 欄（最後一格跨滿，不留半格）／平板 720px 抽屜 3 欄（3+2）／
   桌機 820px 抽屜 5 欄一列（同稿）。 */
#bullsheet .bs-kpis {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px;
}
#bullsheet .bs-kpis > .bs-kpi:last-child:nth-child(odd) { grid-column: span 2; }
@media (min-width: 700px) {
  #bullsheet .bs-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #bullsheet .bs-kpis > .bs-kpi:last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 1180px) {
  /* KPI 由 5 格增為 6 格（補上 DPR 女兒懷胎率）後，5 欄會排成 5+1 孤兒列
     —— sweep 在 1192–2536px 共 43 個寬度都回報。這個抽屜的內容寬固定 763px，
     不隨視窗變化，所以 6 欄每格只有 119px，「女兒懷胎率 DPR」擠不下；
     改 3 欄兩列，每格 248px，兩列都填滿。 */
  #bullsheet .bs-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #bullsheet .bs-kpi { padding: 11px; gap: 8px; }
  #bullsheet .bs-kpi .ic-orb { width: 32px; height: 32px; }
  #bullsheet .bs-kpi .ic-orb svg { width: 17px; height: 17px; }
  #bullsheet .bs-kpi b { font-size: 19px; }
  #bullsheet .bs-kpi small { font-size: 11px; }
}
#bullsheet .bs-kpi {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: var(--surface-0); border: 1px solid var(--line-1);
  border-radius: var(--radius-md); padding: 12px 13px;
}
#bullsheet .bs-kpi .ic-orb { flex: none; width: 36px; height: 36px; }
#bullsheet .bs-kpi .kb { min-width: 0; }
#bullsheet .bs-kpi small { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-600); }
#bullsheet .bs-kpi b {
  display: block; margin-top: 2px; font-size: 21px; font-weight: 800;
  line-height: 1.15; color: var(--ink-950); white-space: nowrap;
}
#bullsheet .bs-kpi em { display: block; font-style: normal; font-size: 10.5px; color: var(--ink-500); margin-top: 2px; }

/* ------------------------------------------------------------- 卡片兩欄網格
   抽屜最寬 820px：兩欄各約 390px，性狀輪廓的條與 NM$ 直方圖都還讀得動。
   手機與平板 720px 抽屜的窄端維持單欄，避免條圖被壓到看不出長短。 */
/* 單欄也要 minmax(0,1fr)：`1fr` 等同 minmax(auto,1fr)，auto 會取子項的 min-content，
   內容一長軌道就被撐開（實測手機軌道變成 554px，而容器只有 358px）。
   這在 820px 抽屜時剛好不會爆，改成工作台、手機吃滿全寬後才顯現。 */
#bullsheet .bs-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 700px) { #bullsheet .bs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#bullsheet .bs-grid > .card { margin-bottom: 0; }

/* --------------------------------------------------------- 性狀表現輪廓
   稿的 −2…+2 橫軸就是標準差；圓點停在 ±2.5 的端點，實際值以右側文字為準。 */
#bullsheet .bs-prof__hd,
#bullsheet .bs-prof__sc {
  display: flex; justify-content: space-between; padding-left: 30px;
  font-size: 10.5px; color: var(--ink-500); font-weight: 600;
}
#bullsheet .bs-prof__hd { margin-bottom: 6px; }
#bullsheet .bs-prow {
  display: grid; grid-template-columns: minmax(0, 1fr) 62px;
  gap: 0 8px; padding: 7px 0;
}
#bullsheet .bs-prow__i {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  display: inline-flex; color: var(--brand-700);
}
#bullsheet .bs-prow__i svg { width: 17px; height: 17px; }
/* 標籤允許折兩行（稿 8-8）—— 原本 nowrap，在 250px 的欄裡會把軌道擠掉 */
#bullsheet .bs-prow__l {
  grid-column: 1; font-size: 12.5px; font-weight: 700; color: var(--ink-800);
  line-height: 1.3; overflow-wrap: anywhere;
}
#bullsheet .bs-prow__t {
  grid-column: 1 / span 2; grid-row: 2; position: relative; height: 14px; margin-top: 4px;
}
/* 中線＝可進口池平均 */
#bullsheet .bs-prow__t::before {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px;
  background: var(--line-1); border-radius: 2px;
}
#bullsheet .bs-prow__t::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-strong);
}
#bullsheet .bs-prow__t em {
  position: absolute; top: 5px; height: 4px; border-radius: 2px; background: var(--brand-700);
}
#bullsheet .bs-prow__t i {
  position: absolute; top: 1px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--brand-800); border: 2px solid var(--surface-0);
}
#bullsheet .bs-prow.neg .bs-prow__t em { background: var(--amber-500); }
#bullsheet .bs-prow.neg .bs-prow__t i { background: var(--amber-700); }
#bullsheet .bs-prow__v {
  grid-column: 2; grid-row: 1; text-align: right; align-self: center;
  font-size: 13px; font-weight: 800; color: var(--brand-800); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#bullsheet .bs-prow.neg .bs-prow__v { color: var(--amber-700); }
#bullsheet .bs-prof__sc { margin-top: 8px; }
#bullsheet .bs-prof__sc .u { color: var(--ink-400, var(--ink-500)); font-weight: 700; }
/* 百分位卡的表頭只剩兩端，要各自貼齊軌道兩側 */
#bullsheet .bs-pct__hd { justify-content: space-between; }
#bullsheet .lgd.bs-lgd { margin: 12px 2px 0; gap: 14px; }
#bullsheet .lgd.bs-lgd span { font-size: 11px; color: var(--ink-600); }
#bullsheet .lgd.bs-lgd i { width: 10px; height: 10px; border-radius: 50%; }
#bullsheet .lgd.bs-lgd i.d1 { background: var(--brand-800); }
#bullsheet .lgd.bs-lgd i.d2 { background: var(--line-strong); }

/* ---------------------------------------------------- 代理與供應資訊定義列 */
#bullsheet .bs-dl { display: grid; gap: 10px; }
#bullsheet .bs-dl > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 9px; border-bottom: 1px solid var(--line-1);
}
#bullsheet .bs-dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
#bullsheet .bs-dl small { font-size: 12px; font-weight: 600; color: var(--ink-500); flex: none; }
#bullsheet .bs-dl b {
  font-size: 13px; font-weight: 800; color: var(--ink-950); text-align: right; overflow-wrap: anywhere;
  /* flex 項目的預設 min-width 是 auto（＝內容寬），不設 0 的話長字串會把整列撐開，
     overflow-wrap 也失效。原本在 820px 抽屜裡剛好不會爆，改成工作台後手機全寬才顯現：
     實測 .bs-dl 撐到 520px、卡片 554px，而視窗只有 358px。 */
  min-width: 0;
}
#bullsheet .bs-dl > div { min-width: 0; }
#bullsheet .bs-fine { margin-top: 11px; font-size: 11.5px; color: var(--ink-500); line-height: 1.65; }
#bullsheet .bs-fine b { color: var(--ink-800); }
#bullsheet .bs-t2 { margin-top: 18px; }

/* ------------------------------------------------------------------- chips */
#bullsheet .bs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#bullsheet .bs-chip {
  display: inline-flex; align-items: center; padding: 7px 12px;
  border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; line-height: 1.4;
  background: var(--brand-100); color: var(--brand-800); border: 1px solid var(--brand-300);
}
#bullsheet .bs-chip.warn { background: var(--coral-100); color: var(--coral-700); border-color: var(--coral-100); }

/* -------------------------------------------------------------- 同級公牛表
   7 欄在 390px 手機一定放不下；表格自己橫向捲，頁面本身不捲（§9）。
   每列可點＝直接換到那頭公牛，手機列高 ≥44px。 */
#bullsheet .bs-cmp { margin-top: 12px; }
#bullsheet .bs-cmp__sc { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
#bullsheet .bs-cmp table { width: 100%; min-width: 520px; border-collapse: collapse; }
#bullsheet .bs-cmp th {
  text-align: right; font-size: 11px; font-weight: 700; color: var(--ink-500);
  padding: 0 8px 8px; white-space: nowrap; border-bottom: 1px solid var(--line-1);
}
#bullsheet .bs-cmp th:nth-child(1) { text-align: center; }
#bullsheet .bs-cmp th:nth-child(2) { text-align: left; }
#bullsheet .bs-cmp td {
  text-align: right; font-size: 12.5px; font-weight: 700; color: var(--ink-800);
  padding: 9px 8px; border-bottom: 1px solid var(--line-1); white-space: nowrap;
}
#bullsheet .bs-cmp tr { cursor: pointer; }
#bullsheet .bs-cmp tbody tr:hover td { background: var(--surface-soft); }
#bullsheet .bs-cmp tbody tr:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: -3px; }
#bullsheet .bs-cmp tbody tr.on td { background: var(--brand-100); }
#bullsheet .bs-cmp tbody tr.on .nm2 b { color: var(--brand-900); }
#bullsheet .bs-cmp td.rk { text-align: center; color: var(--ink-500); font-size: 11.5px; width: 30px; }
#bullsheet .bs-cmp td.nm2 { text-align: left; white-space: normal; min-width: 190px; }
#bullsheet .bs-cmp td.nm2 b { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink-950); }
#bullsheet .bs-cmp td.nm2 s {
  display: block; text-decoration: none; margin-top: 2px;
  font-size: 10.5px; font-weight: 600; color: var(--ink-500);
}
@media (max-width: 767px) { #bullsheet .bs-cmp td { padding: 12px 8px; } }

/* -------------------------------------------------------------------- 頁尾 */
#bullsheet .bs-foot {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-1);
  font-size: 11.5px; font-weight: 600; color: var(--ink-500); line-height: 1.7;
}
#bullsheet .bs-foot s { display: block; text-decoration: none; margin-top: 3px; font-weight: 400; }

/* 稿的桌機版英雄卡是三欄（照片｜文字｜NM$）。抽屜 ≥700px 才排得下。 */
@media (min-width: 700px) {
  #bullsheet .bs-hero { grid-template-columns: 168px minmax(0, 1fr) 168px; gap: 16px; align-items: center; }
  #bullsheet .bs-hero__ph { aspect-ratio: 1 / 1; }
  #bullsheet .bs-hero__nm { font-size: 19px; }
  #bullsheet .bs-hero__score { border-top: 0; border-left: 1px solid var(--line-1); padding: 0 0 0 16px; }
  #bullsheet .bs-hero__score > b { font-size: 30px; }
  #bullsheet .bs-cta { width: auto; }

  /* 稿的輪廓列是「名稱｜條｜數值」同一行；手機寬度放不下，只有 ≥700 才並行 */
  /* ⚠️ 這裡原本有一組「名稱｜軌道｜數值」擠成單行的覆寫，是為舊版寬抽屜寫的。
     抽屜改成 816px 三欄之後每欄只有 230px，單行會把軌道壓到 66px、底軸的
     刻度黏成「−2.50+2.5」一串。稿之所以放得下單行，是因為它把右側數值欄整個
     刪掉了（8-7）；本實作保留數值（截斷的列沒有數字就分不出 +2.3 與 +4.1），
     所以改回兩行：第 1 行名稱 + 數值，第 2 行整寬軌道。軌道從 66px 變約 200px。 */
  #bullsheet .bs-prof__hd, #bullsheet .bs-prof__sc { padding-left: 0; padding-right: 0; }
}
@media (min-width: 1180px) {
  #bullsheet .bs-hero { grid-template-columns: 200px minmax(0, 1fr) 180px; gap: 18px; }
  #bullsheet .bs-hero__nm { font-size: 21px; }
  #bullsheet .bs-hero__score > b { font-size: 34px; }
}

/* ==========================================================================
   07 牧場選擇器（.picker）— 稿：暗底 scrim + 白色圓角對話框
   --------------------------------------------------------------------------
   規則：本區所有選擇器一律以 .picker 開頭。.pchip / .pk-row / .pk-nm 等
   類名在別頁另有用途（.pchip 也用於自訂指數頁的預設組），裸選擇器會全站壞版。

   稿與現況的差異，已按「版面照稿、數據照現況」處理：
   · 稿的每列有各場實景縮圖 —— 系統沒有逐場照片，放通用牛照會讓人以為那是該場，
     故改用畜舍線性圖示的圓形標記（.pk-av）。
   · 稿的縣市／鄉鎮 chips 與筆數是編的（1,302 場／128 場）；此處全部接
     /api/farms 的真實索引（目前 199 場），計數即時跟著篩選走。
   ========================================================================== */
.picker { position: fixed; inset: 0; z-index: 60; }
.picker .pk-scrim { position: absolute; inset: 0; background: rgb(6 20 16 / .58); }

.picker .pk-dialog {
  position: absolute; inset: 56px 0 0; display: flex; flex-direction: column;
  background: var(--surface-0); animation: up .22s var(--ease-standard);
  border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);
}
.picker .pk-grab {
  flex: none; width: 42px; height: 4px; border-radius: 999px;
  background: var(--line-strong); margin: 8px auto 2px;
}

/* ------------------------------------------------------------------ 標題列 */
.picker .pk-hd {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 10px 18px 12px; border-bottom: 1px solid var(--line-1);
}
.picker .pk-hd b { font-size: 20px; font-weight: 800; color: var(--ink-950); }
.picker .pk-hd .ic-orb { flex: none; width: 34px; height: 34px; }
.picker .pk-close {
  margin-left: auto; flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--surface-soft); color: var(--ink-600);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.picker .pk-close::before {
  content: ""; width: 15px; height: 15px; display: block;
  background: currentColor;
  -webkit-mask: no-repeat center/15px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'><path d='M5.5 5.5l13 13M18.5 5.5l-13 13'/></svg>");
          mask: no-repeat center/15px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'><path d='M5.5 5.5l13 13M18.5 5.5l-13 13'/></svg>");
}
.picker .pk-close:hover { background: var(--line-1); color: var(--ink-950); }
.picker .pk-close:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; }

/* ------------------------------------------------------------ 可捲動的本體 */
.picker .pk-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: 14px 18px 4px;
}

/* -------------------------------------------------------------------- 搜尋 */
.picker .pk-searchwrap { position: relative; margin-bottom: 12px; }
.picker .pk-searchic {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: var(--ink-500); pointer-events: none;
}
.picker .pk-search {
  width: 100%; min-height: 48px; padding: 12px 14px 12px 42px;
  border-radius: var(--radius-md); border: 1px solid var(--line-strong);
  background: var(--surface-0); color: var(--ink-950);
  font-family: inherit; font-size: 14.5px; outline: none;
}
.picker .pk-search::placeholder { color: var(--ink-500); }
.picker .pk-search:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgb(43 138 104 / .16); }

/* ----------------------------------------------------------- 縣市／鄉鎮 chips
   一列橫向捲動；列尾的「更多」箭頭由 pkArrows() 量測後才顯示（捲不動就不出現）。*/
.picker .pk-chiprow { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.picker .pk-regions {
  display: flex; gap: 8px; overflow-x: auto; white-space: nowrap;
  padding: 2px 2px 4px; scrollbar-width: none;
}
.picker .pk-regions::-webkit-scrollbar { display: none; }
.picker .pchip {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--surface-0); border: 1px solid var(--line-strong); color: var(--ink-800);
  font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
}
.picker .pchip:hover { border-color: var(--brand-300); }
.picker .pchip.on { background: var(--brand-800); border-color: var(--brand-800); color: #fff; }
.picker .pchip.sm { min-height: 44px; padding: 8px 14px; font-size: 13px; }
/* 計數做成 pill（稿的「全部 1,302」）；選取態要在深綠底上看得見 */
.picker .pchip > i {
  font-style: normal; font-size: 11.5px; font-weight: 800; line-height: 1;
  padding: 4px 8px; border-radius: var(--radius-pill);
  background: var(--surface-soft); color: var(--ink-600);
}
.picker .pchip.on > i { background: rgb(255 255 255 / .18); color: #fff; }
.picker .pk-nextchip {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface-0);
  color: var(--ink-600); display: none; align-items: center; justify-content: center; cursor: pointer;
}
.picker .pk-nextchip:hover { border-color: var(--brand-300); color: var(--brand-700); }

/* ------------------------------------------------------- 筆數列＋清除篩選 */
.picker .pk-countbar {
  display: flex; align-items: center; gap: 12px; margin: 6px 2px 8px;
}
.picker .pk-count { font-size: 13px; font-weight: 600; color: var(--ink-600); }
.picker .pk-count b { font-size: 16px; font-weight: 800; color: var(--ink-950); }
.picker .pk-reset {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 6px 4px; border: 0; background: none; cursor: pointer;
  color: var(--brand-700); font-family: inherit; font-size: 13px; font-weight: 700;
}
.picker .pk-reset:hover { color: var(--brand-900); text-decoration: underline; }

/* -------------------------------------------------------------------- 列
   手機＝白卡列（照片｜場名／DHI・地區｜輔導員／頭數）；
   ≥768 展開成表格欄（.pk-meta 用 display:contents 讓兩個子項變成獨立欄）。 */
.picker .pk-list {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px;
}
.picker .pk-row {
  display: grid; align-items: center;
  grid-template-columns: 26px 40px minmax(0, 1fr) auto 20px;
  gap: 0 10px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--line-1); border-radius: var(--radius-md);
  background: var(--surface-0);
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.picker .pk-row:hover { border-color: var(--brand-300); background: var(--surface-soft); }
.picker .pk-row:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; }
.picker .pk-row.on { border-color: var(--brand-700); background: var(--brand-100); }
.picker .pk-check {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; color: #fff;
}
.picker .pk-row.on .pk-check { background: var(--brand-700); }
.picker .pk-av {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-soft); border: 1px solid var(--line-1); color: var(--brand-700);
}
.picker .pk-row.on .pk-av { background: var(--surface-0); border-color: var(--brand-300); }
.picker .pk-nm { min-width: 0; }
 /* 場名不截字：真實索引裡有「晟順農牧場股份有限公司」這種長名，
    ellipsis 會讓農民看不出是哪一場，改為換行（列高跟著長） */
.picker .pk-nm b {
  display: block; font-size: 14.5px; font-weight: 800; color: var(--ink-950);
  line-height: 1.4; overflow-wrap: anywhere;
}
.picker .pk-row.on .pk-nm b { color: var(--brand-800); }
.picker .pk-nm s {
  display: block; text-decoration: none; margin-top: 2px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picker .pk-id, .picker .pk-county, .picker .pk-town { display: none; }
.picker .pk-meta { text-align: right; min-width: 0; }
.picker .pk-adv {
  display: block; font-size: 13px; font-weight: 700; color: var(--ink-950); white-space: nowrap;
}
.picker .pk-adv.self { color: var(--ink-500); font-weight: 600; }
.picker .pk-n {
  display: block; margin-top: 2px; font-size: 13px; font-weight: 800;
  color: var(--brand-700); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.picker .pk-chev { display: inline-flex; color: var(--ink-500); }
.picker .pk-more {
  text-align: center; color: var(--ink-500); font-size: 12.5px; font-weight: 600;
  padding: 18px 12px; line-height: 1.7;
}

/* 表頭：手機不出現（欄位已排進列內），≥768 才顯示 */
.picker .pk-thead { display: none; }
.picker .pk-thead .pk-av { background: none; border: 0; }
.picker .pk-thead .pk-check { background: none; }
.picker .pk-thead .cap-i { margin-left: 4px; }
.picker #pk-nhelp { margin: 6px 2px 8px; }

/* ------------------------------------------------------- 最近使用的牧場
   來源是使用者自己的選擇紀錄（localStorage），沒有紀錄就整塊不出現。 */
.picker .pk-recent:empty { display: none; }
.picker .pk-recent {
  flex: none; padding: 14px 18px 8px; border-top: 1px solid var(--line-1); background: var(--surface-0);
}
.picker .pk-recent__hd { display: flex; align-items: center; margin-bottom: 10px; }
.picker .pk-recent__hd b { font-size: 15px; font-weight: 800; color: var(--ink-950); }
.picker .pk-clear {
  margin-left: auto; min-height: 44px; padding: 6px 4px; border: 0; background: none; cursor: pointer;
  color: var(--brand-700); font-family: inherit; font-size: 13px; font-weight: 700;
}
.picker .pk-clear:hover { color: var(--brand-900); text-decoration: underline; }
.picker .pk-recent__sc {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.picker .pk-recent__sc::-webkit-scrollbar { display: none; }
.picker .pk-rc {
  flex: none; width: 230px; display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--line-1); border-radius: var(--radius-md);
  background: var(--surface-0); font-family: inherit;
}
.picker .pk-rc:hover { border-color: var(--brand-300); background: var(--surface-soft); }
.picker .pk-rc.on { border-color: var(--brand-700); background: var(--brand-100); }
.picker .pk-rc__t { min-width: 0; }
.picker .pk-rc__t b {
  display: block; font-size: 13px; font-weight: 800; color: var(--ink-950);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picker .pk-rc__t s {
  display: block; text-decoration: none; margin-top: 2px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-500); white-space: nowrap;
}
.picker .pk-rc__t em {
  display: block; font-style: normal; margin-top: 2px;
  font-size: 12px; font-weight: 800; color: var(--brand-700); font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- 手機底部確認列
   稿的珊瑚橘 CTA。手機是兩段式（點列標記→按 CTA 進場），桌機／平板點列即進場，
   故 ≥768 這條整列不顯示。 */
.picker .pk-foot { display: none; }
.picker .pk-foot.on {
  display: block; flex: none; padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-1); background: var(--surface-0);
}
.picker .pk-cta {
  width: 100%; min-height: 52px; padding: 14px 16px; border: 0; cursor: pointer;
  border-radius: var(--radius-md); background: var(--coral-solid); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 800; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picker .pk-cta:hover { background: var(--coral-600); }
.picker .pk-cta:focus-visible { outline: 3px solid rgb(241 107 77 / .45); outline-offset: 2px; }

/* ============================================ 平板／桌機：置中對話框 + 表格 */
@media (min-width: 768px) {
  .picker .pk-dialog {
    inset: auto; position: relative; margin: max(24px, 5vh) auto;
    width: min(1080px, calc(100vw - 64px)); max-height: min(88vh, 940px);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
    overflow: hidden;
  }
  .picker { overflow-y: auto; }
  .picker .pk-grab { display: none; }
  .picker .pk-hd { padding: 20px 28px 16px; }
  .picker .pk-hd b { font-size: 22px; }
  .picker .pk-body { padding: 18px 28px 24px; }
  .picker .pk-foot { display: none !important; }   /* 桌機／平板點列即進場，無二段確認 */

  /* 列 → 表格欄。.pk-meta display:contents 讓輔導員與有效牛數各自成欄。
     768–1023 的抽屜只有約 770px，硬塞 6 欄會把場名壓成一字一行（實測過），
     故此段只開「場名｜輔導員｜有效牛數」，DHI 與地區留在場名下方副標；
     ≥1024 才展開成稿上的完整六欄。 */
  .picker .pk-list { gap: 0; }
  .picker .pk-row {
    grid-template-columns: 30px 40px minmax(0, 1fr) minmax(0, 132px) 92px 22px;
    gap: 0 12px; padding: 10px 12px; border: 0; border-radius: var(--radius-md);
    border-bottom: 1px solid var(--line-1);
  }
  .picker .pk-row:last-child { border-bottom: 0; }
  .picker .pk-meta { display: contents; }
  .picker .pk-adv { font-size: 13.5px; font-weight: 600; color: var(--ink-800);
    overflow: hidden; text-overflow: ellipsis; }
  .picker .pk-n { margin-top: 0; text-align: right; font-size: 14px; color: var(--ink-950); }
  .picker .pk-chev { justify-content: flex-end; }

  .picker .pk-thead {
    display: grid; padding: 0 12px 10px; margin-bottom: 2px; cursor: default;
    background: none; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  }
  .picker .pk-thead:hover { background: none; border-color: var(--line-strong); }
  /* id／county／town 的顯示由 ≥1024 段統一開，這裡開了會與列的欄數對不上 */
  .picker .pk-thead .pk-nm,
  .picker .pk-thead .pk-adv,
  .picker .pk-thead .pk-n {
    display: block; font-size: 12px; font-weight: 700; color: var(--ink-500);
    white-space: nowrap; margin-top: 0;
  }
  .picker .pk-thead .pk-n { display: inline-flex; align-items: center; justify-content: flex-end; }
  .picker .pk-rc { width: 250px; }
}

/* ≥1024：抽屜寬到放得下稿上的六欄（牧場名稱／DHI／縣市／鄉鎮／輔導員／有效牛數） */
@media (min-width: 1024px) {
  .picker .pk-row {
    grid-template-columns: 30px 40px minmax(0, 1.5fr) 92px 96px 104px minmax(0, 116px) 92px 22px;
  }
  .picker .pk-nm s { display: none; }             /* DHI／地區已各自成欄，不重複 */
  .picker .pk-id, .picker .pk-county, .picker .pk-town {
    display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-800);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .picker .pk-thead .pk-id,
  .picker .pk-thead .pk-county,
  .picker .pk-thead .pk-town { font-size: 12px; font-weight: 700; color: var(--ink-500); }
}

@media (min-width: 1180px) {
  .picker .pk-dialog { width: min(1160px, calc(100vw - 120px)); }
  .picker .pk-row { grid-template-columns: 32px 44px minmax(0, 1.6fr) 104px 108px 116px minmax(0,124px) 104px 22px; }
}
/* 超寬螢幕不再放大對話框：表格欄位已足夠，再拉寬只會讓每欄之間出現大片空白 */

/* ============================================ donut 置中修正（三頁共通缺陷）
   留種淘汰／配種／自訂指數的甜甜圈都寫成
     <svg viewBox="0 0 120 120" width="120" height="120" style="transform:rotate(-90deg)">
   而容器 .*-donut__c 會被 media query 改成 132 / 140 / 128 / 108px。
   svg 尺寸寫死不跟著變，環就固定在容器左上角，中央文字（position:absolute;inset:0）
   卻對齊容器中心——兩者最多差 10px，視覺上整個圈是歪的。
   讓 svg 填滿容器即可：viewBox 會等比縮放，CSS rotate 的 transform-origin
   也才會落在真正的圓心。 */
#v-cull   .cull-donut__c > svg,
#v-mate   .mate-donut__c > svg,
#v-custom .cix-donut__c  > svg { width: 100%; height: 100%; display: block; }

/* ============================================================================
   熱緊迫（#v-heat）— 逐項對稿：版面分組、日級 THI 月曆、預警圖示、最怕熱三欄
   ----------------------------------------------------------------------------
   全部 scope 在 #v-heat 底下。
   版面空洞的成因與處理：原本五張卡共用一個 .cardgrid，月曆／預警卡矮、地圖卡高，
   grid 以最高者定列高 → 矮卡下方留大片空白，第五張被擠成孤兒列。
   改為：環境列固定三張等高卡（預警／月曆／定位），第四、五張合併為一張整列寬的
   「夏季熱損失估算」（三 KPI 橫排 ＋ 照片），與稿一致；1440/1900/2560 都是同一組
   3 欄，不會因 auto-fit 在寬螢幕變成 4 欄而再度出現孤兒。
   ========================================================================== */

/* ---- 環境列：三欄等高（不吃全域 .cardgrid 的 auto-fit / align-items:start）---- */
#v-heat .heat-envgrid { align-items: stretch; }
#v-heat .heat-envgrid > .card { display: flex; flex-direction: column; }
/* 三張卡等高後，內容較少的卡不能把說明釘在底部（會在中間留一個大洞）：
   讓主要內容區 flex:1 並垂直置中，剩餘空隙平均分攤在上下，說明緊跟內容。 */
#v-heat .heat-envgrid > .card > .chart-cap { padding-top: 10px; }
#v-heat .heat-calcard #ch-cal.is-daily,
#v-heat .heat-fccard #heat-forecast { flex: 1; display: flex; flex-direction: column; justify-content: center; }
#v-heat .heat-fccard #heat-forecast .fc-src { flex: none; }
@media (min-width: 1024px) {
  #v-heat .heat-envgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- 未來 3 天預警：天氣圖示 ＋ 依 THI 分級產生的行動建議 ---- */
#v-heat .fc-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
#v-heat .fc-day {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 6px 13px; text-align: center;
  background: var(--surface-soft); border-radius: 14px;
}
#v-heat .fc-day .fc-d { font-size: 12px; font-weight: 700; color: var(--ink-700); }
#v-heat .fc-day .fc-thi { font-size: 19px; font-weight: 800; line-height: 1.15; }
#v-heat .fc-day .fc-lv {
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  border: 1px solid currentColor; background: var(--card);
}
#v-heat .fc-ic { display: block; margin: 4px 0 2px; }
#v-heat .fc-ic .ic { width: 30px; height: 30px; }
#v-heat .fc-act { font-size: 11px; line-height: 1.55; color: var(--ink-600); }
#v-heat .fc-act b { display: block; font-size: 11.5px; margin-bottom: 1px; }

/* ---- 夏季 THI 月曆（日級）：5 列 × 31 格等寬網格 ---- */
#v-heat #ch-cal.is-daily { margin-top: 12px; }
#v-heat .cal-d { display: flex; flex-direction: column; gap: 3px; }
#v-heat .cal-d__hd, #v-heat .cal-d__row { display: flex; align-items: center; gap: 7px; }
#v-heat .cal-d__mlab {
  flex: none; width: 28px; text-align: right;
  font-size: 11px; font-weight: 700; color: var(--ink-600);
}
#v-heat .cal-d__ticks, #v-heat .cal-d__cells {
  flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 2px;
}
#v-heat .cal-d__ticks { height: 13px; }
#v-heat .cal-d__ticks i {
  text-align: center; font-size: 10px; font-weight: 600; font-style: normal;
  color: var(--ink-500); line-height: 13px;
}
#v-heat .cal-d__cells i { height: 18px; border-radius: 3px; opacity: .92; }
#v-heat .cal-d { gap: 4px; }
#v-heat .cal-d__cells i.na { background: none; opacity: 0; }   /* 不存在的日期（6/31、9/31）不畫格 */

/* ---- 全國 THI 定位：地圖 ＋ 右側色階圖例（刻度為資料真值，非稿上的 55–85）---- */
#v-heat .thimap-wrap { display: flex; align-items: stretch; gap: 10px; margin-top: 10px; }
#v-heat #ch-thimap { flex: 1; min-width: 0; }
#v-heat #ch-thimap.is-leaflet { height: 252px; }
/* 色階條與刻度並排：兩欄 grid，刻度靠 space-between 對齊漸層端點 */
#v-heat .thimap-lgd {
  flex: none; display: grid;
  grid-template-columns: auto auto; grid-template-rows: auto 1fr;
  column-gap: 4px; row-gap: 4px; align-items: stretch; padding-bottom: 2px;
}
#v-heat .thimap-lgd > b { grid-column: 1 / -1; text-align: center; font-size: 10.5px; font-weight: 700; color: var(--ink-600); }
#v-heat .thimap-lgd__bar { grid-column: 1; grid-row: 2; width: 11px; border-radius: 4px; }
#v-heat .thimap-lgd__ticks {
  grid-column: 2; grid-row: 2;
  display: flex; flex-direction: column; justify-content: space-between;
}
#v-heat .thimap-lgd__ticks i {
  font-size: 10px; font-style: normal; font-weight: 600; color: var(--ink-500); line-height: 1;
}

/* ---- 夏季熱損失估算：三 KPI 橫排 ＋ 照片（整列寬，吸收原「降溫投資回本」卡）---- */
#v-heat .heat-loss { margin-top: 14px; }
#v-heat .heat-loss__body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
#v-heat .heat-loss__figs { min-width: 0; }
#v-heat .heat-loss .kpis--ic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#v-heat .heat-roi { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
#v-heat .heat-roi__t { display: block; font-size: 13px; font-weight: 800; color: var(--ink-900); margin-bottom: 4px; }
#v-heat .heat-loss .heat-photo { width: 100%; height: 100%; min-height: 168px; max-height: 232px; object-fit: cover; border-radius: 14px; margin: 0; }

/* ---- 本場最怕熱的牛：牛號／耐熱指數／預估每日泌乳損失／建議行動 四欄 ---- */
#v-heat .hs-thead, #v-heat .hs-row {
  display: grid;
  grid-template-columns: 30px minmax(72px, 1fr) 78px 128px minmax(120px, 1.5fr) 20px;
  align-items: center; gap: 10px;
}
#v-heat .hs-thead {
  grid-template-columns: 30px minmax(72px, 1fr) 78px 128px minmax(120px, 1.5fr) 20px;
  margin-top: 10px; padding: 0 4px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700; color: var(--ink-500);
}
#v-heat .hs-thead::before { content: ""; }   /* 對齊列內的 .rank 欄 */
#v-heat .hs-thead .hs-idx, #v-heat .hs-thead .hs-loss { text-align: center; }
#v-heat #heat-sens-list .cow.hs-row { padding: 11px 4px; }
#v-heat .hs-row .hs-no b { font-size: 15px; font-weight: 800; }
#v-heat .hs-row .hs-idx { text-align: center; font-size: 14px; font-weight: 700; color: var(--ink-800); font-variant-numeric: tabular-nums; }
#v-heat .hs-row .hs-loss { text-align: center; }
#v-heat .hs-row .hs-loss__v {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--coral-050, rgb(241 107 77 / .10)); color: var(--red);
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
#v-heat .hs-row .hs-act { font-size: 12.5px; line-height: 1.5; color: var(--ink-700); }
#v-heat .hs-row .hs-chev { justify-self: end; }

/* ---- 平板：環境列兩欄（定位卡自成一列），最怕熱表頭欄寬收緊 ---- */
@media (max-width: 1023px) {
  #v-heat .heat-envgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #v-heat .heat-envgrid > .heat-mapcard { grid-column: 1 / -1; }
  #v-heat .heat-envgrid > .heat-mapcard .thimap-wrap { min-height: 0; }
  #v-heat #ch-thimap.is-leaflet { height: 300px; }
  /* 平板：稿是三 KPI 橫排一整列、照片在下（左右分欄時左欄只剩 ~400px，三張 KPI 擠不下）*/
  #v-heat .heat-loss__body { grid-template-columns: minmax(0, 1fr); }
  #v-heat .heat-loss .heat-photo { max-height: 190px; }
  #v-heat .hs-thead, #v-heat .hs-row {
    grid-template-columns: 26px minmax(64px, 1fr) 66px 112px minmax(104px, 1.2fr) 18px;
  }
}

/* ---- 手機：全部單欄；四欄表格改為兩行卡片列（欄名內嵌），不縮到讀不了 ---- */
@media (max-width: 767px) {
  #v-heat .heat-envgrid { grid-template-columns: minmax(0, 1fr); }
  #v-heat .heat-loss__body { grid-template-columns: minmax(0, 1fr); }
  #v-heat .heat-loss .heat-photo { max-height: 172px; }
  #v-heat .heat-loss .kpis--ic { grid-template-columns: minmax(0, 1fr); }
  #v-heat .fc-day { padding: 11px 4px 12px; }
  #v-heat .fc-day .fc-thi { font-size: 17px; }
  #v-heat .cal-d__cells i { height: 13px; }
  #v-heat .cal-d__ticks i.on b { font-size: 9px; }
  #v-heat .hs-thead { display: none; }
  #v-heat .hs-row {
    grid-template-columns: 26px minmax(0, 1fr) auto 18px;
    grid-template-areas:
      "rank no   loss chev"
      ".    act  act  act";
    row-gap: 6px;
  }
  #v-heat .hs-row .rank { grid-area: rank; }
  #v-heat .hs-row .hs-no { grid-area: no; }
  #v-heat .hs-row .hs-loss { grid-area: loss; text-align: right; }
  #v-heat .hs-row .hs-act { grid-area: act; }
  #v-heat .hs-row .hs-chev { grid-area: chev; }
  /* 手機隱藏表頭後，耐熱指數改貼在牛號下方（欄名內嵌，避免只剩裸數字看不懂）*/
  #v-heat .hs-row .hs-idx { display: none; }
  #v-heat .hs-row .hs-no::after {
    content: "耐熱指數 " attr(data-idx);
    display: block; margin-top: 2px;
    font-size: 11.5px; font-weight: 600; color: var(--ink-500);
  }
}

/* ====================================================== 工作台型明細（.sheet--ws）
   稿判定：09 配種明細／10 精液採購計畫／11 自訂指數明細在桌機與平板上
   **不是**覆蓋式抽屜——底下沒有被壓暗的來源頁、沒有遮罩、沒有浮起側板，
   而是佔滿內容區的工作台（側欄與頁首麵包屑照常全亮）。
   08 母牛明細／12 個別耐熱在稿上確為抽屜，維持共用的 .sheet 樣式不動。
   13 進口公牛我原先也判成抽屜，是錯的：重看稿 13-bull-detail-desktop.png，
   它佔視窗約 65%（x 從 665 起、寬約 1290/2000），底下的全國頁沒有被壓暗，
   而且第 3、4 列都是三欄（輪廓｜百分位｜基因條件）——820px 的抽屜排不出來。
   已改為 .sheet--ws。

   做法：≥768px 時把 .sheet--ws 從 fixed 疊層改成 .phone 網格的 main 格，
   與 .scroll 同格堆疊（DOM 在後 → 蓋在上面），背景用不透明 canvas。
   手機（<768）不套用，維持既有的全螢幕內容頁。
   只加樣式，未動任何 id／class／函式名。 */
.sheet--ws .ws-side { display: none; }

@media (min-width: 768px) {
  .sheet.sheet--ws {
    position: static; grid-area: main; z-index: 3;
    background: var(--canvas); box-shadow: none;
    align-items: stretch; justify-content: flex-start;
    overflow: hidden; min-width: 0; min-height: 0;
  }
  /* 明細本體：吃滿剩餘寬度，不再是右側固定寬側板，也不再有左緣陰影 */
  .sheet.sheet--ws > .sheetc {
    flex: 1 1 auto; width: auto; min-width: 0; max-width: none;
    border-left: 0; box-shadow: none;
    animation: sheet-rise .2s var(--ease-standard);
  }
}

/* ---- 左欄常駐清單 ----
   稿上平板的 09 是「整頁式明細」（側欄之外整塊都是明細、沒有清單欄），
   只有桌機才是左清單＋右明細，故本欄只在 ≥1180 出現；平板／手機維持整頁明細。
   稿 10 採購計畫與 11 自訂指數明細畫面上沒有來源清單，不替它們虛構一個。 */
@media (min-width: 1180px) {
  .sheet--ws .ws-side {
    display: flex; flex-direction: column; flex: none;
    width: 300px; min-width: 0; overflow: hidden;
    background: var(--surface-0); border-right: 1px solid var(--line-1);
  }
  .sheet--ws .ws-side__hd {
    display: flex; align-items: baseline; gap: 8px;
    padding: 16px 18px 13px; border-bottom: 1px solid var(--line-1);
  }
  .sheet--ws .ws-side__hd b { font-size: 14.5px; font-weight: 800; color: var(--ink-950); }
  .sheet--ws .ws-side__hd s { text-decoration: none; font-size: 12px; font-weight: 600; color: var(--ink-500); }
  .sheet--ws .ws-side__l { flex: 1 1 auto; overflow-y: auto; padding: 8px; }
  .sheet--ws .ws-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px;
    width: 100%; text-align: left; cursor: pointer;
    font-family: inherit; background: none; border: 0;
    border-radius: var(--radius-sm); padding: 10px; min-height: 48px;
  }
  .sheet--ws .ws-row:hover { background: var(--surface-soft); }
  .sheet--ws .ws-row:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: -2px; }
  .sheet--ws .ws-row.is-on { background: var(--brand-100); }
  .sheet--ws .ws-row__id { font-size: 13.5px; font-weight: 800; color: var(--ink-950); }
  .sheet--ws .ws-row__nm { font-size: 12px; font-weight: 800; color: var(--brand-700); text-align: right; }
  .sheet--ws .ws-row__p,
  .sheet--ws .ws-row__b {
    grid-column: 1 / -1;
    font-size: 11px; font-weight: 600; color: var(--ink-500); line-height: 1.45;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sheet--ws .ws-row__b { color: var(--ink-600); font-weight: 700; }
}

/* ---- 推薦公牛：稿為 3 張並排；不足 3 支時整齊縮成 1／2 張，不留空卡 ---- */
@media (min-width: 768px) {
  #matesheet .mt-bulls:has(.mtb:first-child:last-child) { grid-template-columns: minmax(0, 520px); }
  #matesheet .mt-bulls:has(.mtb:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 配種明細底部常駐操作條（稿 09 有）----
   兩顆鈕都接既有函式（downloadMateCsv / openProc），沒有對應行為的按鈕不做。
   不用負邊界做滿版：負邊界會讓 #matebody 的 scrollWidth 大於容器，觸發溢位。 */
@media (min-width: 768px) {
  #matesheet.sheet--ws .mt-foot {
    position: sticky; bottom: 0; z-index: 2;
    margin: 16px 0 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
    background: var(--surface-0); border-top: 1px solid var(--line-1);
  }
}

/* ============================================================================
   自訂指數頁與明細 — 對稿修正（04-custom-index / 11-custom-cow-detail）
   ----------------------------------------------------------------------------
   全部 scope 在 #v-custom / #cixsheet 底下，不外溢其他五頁。
   ========================================================================== */

/* ---- 權重列行首：稿是 trait-* 線性圖示，不是色點 ----
   .sldot--ic 沿用 .sldot 的 grid-area(dot)，只是把 10px 色塊換成 18px 圖示。
   欄寬由 10px 放寬到 18px（見下方 min-width:768px 覆寫），圖示以 color 染成該性狀色，
   顏色仍與權重 donut 圖例一一對應。 */
#v-custom .sldot--ic {
  width: 18px; height: 18px; border-radius: 0; background: none;
  display: inline-flex; align-items: center; justify-content: center;
}
#v-custom .sldot--ic .ic { width: 18px; height: 18px; }

/* ---- 清單縮圖：稿是母牛照片，不是線框圖示 ----
   同一張裝飾性預設照（非該頭牛本人），故 alt="" + aria-hidden，
   螢幕閱讀器不會把它念成「這頭牛的照片」。 */
#v-custom .cixavat { background: var(--surface-soft); overflow: hidden; padding: 0; }
#v-custom .cixavat img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 32%;
}

/* ---- 名次變動箭頭：稿用 trend-up / trend-down 圖示，原本是 ▲▼ 文字字元 ---- */
#v-custom .cixmove em { display: inline-flex; align-items: center; gap: 3px; }
#v-custom .cixmove em .ic { width: 13px; height: 13px; }

/* ---- 分頁列（稿：顯示第 a–b 筆，共 N 筆 ＋ ‹ n ›）---- */
/* 分頁器元件由三處共用：自訂指數排名、最怕熱的牛、可引進公牛排名。
   原本選擇器綁死 #v-custom，另外兩處套不到樣式 —— 手機版的上一頁／下一頁鈕
   量到 33×23，低於 §9 的 44×44 觸控下限（audit 抓到）。改為不限頁面。 */
.cixpg {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 12px 2px 0; padding-top: 12px; border-top: 1px solid var(--line-1);
}
.cixpg:empty { display: none; }
.cixpg__n { flex: 1; min-width: 0; font-size: 11.5px; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.cixpg__b { display: inline-flex; align-items: center; gap: 6px; }
.cixpg__x {
  width: 34px; height: 34px; flex: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-0); border: 1px solid var(--line-1); border-radius: var(--radius-sm);
  color: var(--ink-600); font-family: inherit;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.cixpg__x:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-soft); }
.cixpg__x:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 2px; }
/* 首頁／末頁時真的停用（不是只變灰），避免點了沒反應 */
.cixpg__x:disabled { opacity: .38; cursor: default; }
/* 手機觸控下限 44×44（§9）。桌機維持 34px 的視覺比例，手機才放大——
   自訂指數頁一直也是 34×34，只是那頁的分頁列在手機被收起來，audit 掃不到，
   直到最怕熱的牛與公牛排名共用同一組元件才暴露出來。 */
@media (max-width: 767px) {
  .cixpg__x { width: 44px; height: 44px; }
}
.cixpg__p {
  min-width: 34px; height: 34px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-800); color: #fff; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.cixpg__t { font-style: normal; font-size: 11.5px; color: var(--ink-500); font-variant-numeric: tabular-nums; }
/* 手機：觸控區補到 44×44（§9），並讓「顯示第 a–b 筆」自己一行 */
@media (max-width: 767px) {
  .cixpg__n { flex: 1 0 100%; }
  .cixpg__b { margin-left: auto; }
  #v-custom .cixpg__x { width: 44px; height: 44px; }
  #v-custom .cixpg__p { min-width: 44px; height: 44px; }
  /* 稿的手機縮圖是橫向圓角矩形（寬>高），不是正圓 */
  #v-custom .cixavat { width: 56px; height: 44px; border-radius: 11px; }
  #v-custom .cixrow { grid-template-columns: 30px 56px minmax(0, 1fr) auto 14px; }
}

/* ---- 可靠度儀表：稿是「單色深綠環 + 灰底環」，全域 .gauge 是黃→橘→綠漸層弧 ----
   漸層在這裡會被誤讀成「可靠度低＝橘色警示」，但 44% 只是資料完整度，不是風險分級。 */
#v-custom .cix-relgauge .gauge {
  background:
    conic-gradient(from 225deg,
      transparent 0 calc(var(--v) * 0.75%),
      var(--track) 0 75%,
      transparent 0),
    conic-gradient(from 225deg, var(--brand-800) 0 75%, transparent 0);
}
/* 深色模式：--brand-800 沒有提亮版，深綠弧在深色卡上幾乎看不見，改用已提亮的 --brand-500 */
[data-theme="dark"] #v-custom .cix-relgauge .gauge {
  background:
    conic-gradient(from 225deg,
      transparent 0 calc(var(--v) * 0.75%),
      var(--track) 0 75%,
      transparent 0),
    conic-gradient(from 225deg, var(--brand-500) 0 75%, transparent 0);
}

/* ---- 指數數值／可靠度條：稿的深綠比 --brand-700 再深一階 ----
   稿取樣約 #0B4A2A，最接近的既有 token 是 --brand-800(#0f5b47)；
   不另立一次性色值，維持設計系統單一色階。
   只在淺色模式加深：--brand-700/800 沒有深色模式覆寫（tokens.css 只提亮了 500/300/100），
   在深色卡片上再往下壓一階會掉到對比不足，故深色模式維持原本的 --brand-700。 */
:root:not([data-theme="dark"]) #v-custom .cixval,
:root:not([data-theme="dark"]) #v-custom .cixtop b { color: var(--brand-800); }
:root:not([data-theme="dark"]) #v-custom .cixrel__b i { background: var(--brand-800); }

/* ============================================================================
   自訂指數第 2 列骨架（對稿）
   稿：3 張圖表卡橫排在左半 ＋ 排名表在右半。本系統多一張「各性狀在牛群的分布」
   （橫向 box plot，既有科學圖，不刪），已在 HTML 移到排名表下方整列寬。

   兩個舊問題一起收掉：
   (1) 權重分布卡只有 214px 高、鄰卡 300–400px，同列 align-items:start 會在它下方
       留一大片畫布空洞。改為整列等高（stretch），矮卡多出來的空間變成卡片內留白
       ——稿上的權重分布卡本來就是這樣（甜甜圈上半、下方留白）。
   (2) .cix-top 右欄（說明卡＋變動速覽）比左欄權重卡矮 ~140px，同樣留下畫布空洞。
       同一套做法：速覽卡撐滿右欄、內容垂直置中。
   ========================================================================== */

/* 短卡撐滿軌道時：標題固定在頂端，主體在剩餘空間垂直置中，說明文字沉底。
   （只在 stretch 的情境下才生效，窄螢幕堆疊時卡片本來就是自然高度。） */
#v-custom .cix-fill { display: flex; flex-direction: column; }
#v-custom .cix-fill > .chart-t { flex: none; }
#v-custom .cix-fill > .chart-cap { flex: none; margin-top: auto; }
/* 主體長高後，靠各自的 align-items:center 讓內容在多出來的高度裡垂直置中
   （兩者都是 row 方向的 flex，cross axis 才是垂直軸——不可用 justify-content）。 */
#v-custom .cix-fill > .cix-donut__row { flex: 1 1 auto; align-items: center; }
/* .cix-fill 的速覽變體已移除（該卡不再被撐高，無需垂直置中補空） */

/* 平板（768–1179）：全域 .cardgrid 是 2 欄，3 張圖表會變成 2＋1 孤兒卡。
   稿的平板是 3 張橫排，但實測 834px 下每張只剩 231px，直方圖與散點的軸標籤糊掉；
   改為「前兩張並排、第三張整列寬」——沒有孤兒卡，散點也拿到看得懂的寬度。 */
@media (min-width: 768px) and (max-width: 1179px) {
  #v-custom .cix-charts { align-items: stretch; }
  #v-custom .cix-charts > .card { height: 100%; }
  #v-custom .cix-charts > .card:nth-child(3) { grid-column: 1 / -1; }
}

@media (min-width: 1180px) {
  /* 圖表列固定 3 欄且整列等高（全域 .cardgrid 的 align-items:start 會讓矮卡留洞） */
  #v-custom .cix-charts { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  #v-custom .cix-charts > .card { height: 100%; }
}
/* 右欄速覽卡撐滿。**必須從 768 起就生效**：原本寫在 min-width:1180 內，
   1024–1179 之間右欄不被拉伸，速覽卡下方留 145px 死白（1120px 實測：
   左欄底 995 vs 右欄底 850）。這個缺陷之所以漏掉，是因為驗證只測
   1440/1900/834/390 四個固定寬度，剛好跨過這個區間——固定斷點測不到斷點「之間」。 */
@media (min-width: 768px) {
  /* 速覽卡已移出右欄、自成整列，高度由內容決定，不再需要 stretch 補洞。 */
}
/* 頂列搜尋鈕：稿的手機頂列沒有它，且 ≤430px 時 .ic-btn 收到 38px（<44 觸控下限），
   故手機直接不顯示；切換牧場在 .htxt 與「更多 → 切換牧場」都到得了。 */
@media (max-width: 767px) { #searchbtn { display: none; } }

/* 左右並排（稿的第 2 列骨架）的門檻。兩個硬條件：
   ① 排名表的九欄版實測需 843px（表格 811 ＋ 卡片左右 padding 32），塞不下就會退回
      窄版堆疊列——那比空洞更傷；
   ② 左半 3 張圖表每張要 ≥300px，否則直方圖與散點的軸標籤糊成一團（1900px 實測只剩
      215px，已確認不可讀）。
   兩條合起來需內容寬 ≈1800px → 視窗 ≥2100px。1440/1900 給不到，故維持上下堆疊：
   圖表 3 張整列橫排（369/523px）＋ 排名表整列寬，這是本頁真實內容下最接近稿的排法。 */
@media (min-width: 2100px) {
  #v-custom .cix-work {
    display: grid; gap: 16px; align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    grid-template-areas: "charts table" "charts sub";
  }
  #v-custom .cix-work > .cix-charts    { grid-area: charts; align-content: stretch; }
  #v-custom .cix-work > .cix-tablecard { grid-area: table; }
  #v-custom .cix-work > .cix-subcard   { grid-area: sub; }
}

/* 「各性狀在牛群的分布」原本自成一整列。它是 SVG 自適應圖，實測縮到 260px 都不會溢出
   （量測要排除 SVG 內部的 <text>：那是座標系不是版面，第一次量成「最小 1620px」就是
   把它算進去了），所以並列的門檻只由排名表決定 —— 表格九欄版實測最小 760px。
   兩欄各半 → 內容寬需 ≥1536（760×2 ＋ gap 16），換算視窗 ≥1836px。
   1440 給不到（內容寬 1136），故該區間仍整列，不硬塞。 */
@media (min-width: 1836px) and (max-width: 2099.98px) {
  #v-custom .cix-work {
    display: grid; gap: 16px; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "charts charts" "table sub";
  }
  #v-custom .cix-work > .cix-charts    { grid-area: charts; }
  #v-custom .cix-work > .cix-tablecard { grid-area: table; }
  #v-custom .cix-work > .cix-subcard   { grid-area: sub; }
}

/* ---- 平板以上：行首欄由 10px 放寬到 18px 以容納 trait 圖示 ---- */
@media (min-width: 768px) {
  #v-custom .slrow { grid-template-columns: 18px minmax(76px, 0.9fr) minmax(0, 1.6fr) 62px; }
}

/* ============================== 明細（#cixsheet）============================ */
/* summary 的 chevron 已由 chevron-right 換成 chevron-down（稿上就是朝下的），
   原本 rotate(90deg) 是為了把「右」轉成「下」，換圖後必須歸零，否則會朝左。 */
#cixsheet .cx-ebv__cv { transform: rotate(0deg); }
#cixsheet .cx-ebv[open] .cx-ebv__cv { transform: rotate(180deg); }

/* 手機頭像：稿上明顯比桌機大（量測 ≈76 CSS px），現況 58px 反而更小 */
@media (max-width: 767px) {
  #cixsheet .cx-hero__ph { width: 72px; height: 72px; }
}


/* ================================================ 兩欄版位的等高（.cardgrid.g2）
   全域 .cardgrid 帶 align-items:start，兩張高度不同的卡並排時矮的那張下方留白。
   sweep 掃出來的落差：熱緊迫 133–147px、全國 81–185px（808–1256 之間）。
   .g2 是「刻意兩欄的左右對照」版位，兩張本來就該等高，改為 stretch 並讓卡片撐滿。 */
.cardgrid.g2 { align-items: stretch; }
.cardgrid.g2 > .card { height: 100%; display: flex; flex-direction: column; }
/* 圖表撐開、說明沉底，避免卡片變高後內容黏在頂端 */
.cardgrid.g2 > .card > .chart-cap { margin-top: auto; }


/* ==================================================================== 健檢頁
   sweep（--step=32）在此頁掃出 120 項，成因有三個，都在下面處理。
   量到的容器寬度（#v-health 的實際內容寬）不是視窗寬的單調函數：
     視窗 <768   → .phone 被 max-width:430px 夾住 → 內容寬 328–398（431–767 全部都是 398）
     視窗 768–1179 → 內容寬 ＝ 視窗 −112
     視窗 ≥1180  → 側欄出現 → 內容寬 ＝ 視窗 −304（上限 1896）
   1180 那一跳是「變寬反而變窄」（1160→1048、1200→896），所以凡是跟「卡片實際
   有多寬」有關的判斷，一律用 @container 讀容器寬，不用 @media 讀視窗寬。 */

/* ---------------------------------------------------- 牛群概況 KPI（4 張卡）
   曾經是 5 張（多一格「後備群基準」，後來改成「平均可靠度」）。5 在 2/3/4 欄下
   都排不成完整矩形，最後一列必留空格（落差 95–122px），所以當時把第一張
   「同業排名」升為整列橫幅來湊整除。
   現在第 5 格已移除——「平均可靠度」與下方圖表列的「遺傳可靠度總覽」是同一個數字，
   重複顯示；稿的 KPI 本來就只有四格（同業排名／在群／低留種／本場指數）。
   4 張在 2 欄與 4 欄都整除，橫幅那條規則因此不再需要，一併還原成與稿相同的一排四格。 */
#v-health .kpis--ic {
  container-type: inline-size;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
/* 4 欄的門檻取內容寬 876（＝視窗 988 與所有 ≥1180 的情形），此時每張 210px，
   文字欄 124px > NT$3,399 所需的 111px，不會再溢出。 */
@media (min-width: 988px) {
  #v-health .kpis--ic { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 級數依「容器寬」收斂，不用 overflow 蓋掉。
   2 欄時每張 ≈(C−12)/2，扣掉左右內距＋orb＋間距後才是文字欄；
   NT$3,399 的寬度約 4.63×字級，下面兩段就是照這個關係取的。 */
@container (max-width: 420px) {
  #v-health .kpi--ic { padding: 12px; gap: 10px; }
  #v-health .kpi--ic .ic-orb { width: 38px; height: 38px; }
  #v-health .kpi--ic .ic-orb svg { width: 19px; height: 19px; }
  #v-health .kpi--ic b { font-size: 18px; letter-spacing: -.01em; }
  #v-health .kpi--ic .kb small { font-size: 11.5px; }
  #v-health .kpi--ic .kb em { font-size: 10px; }
  /* 整列橫幅那張不受欄寬限制，維持原級數 */
}
@container (min-width: 420.05px) and (max-width: 620px) {
  #v-health .kpi--ic { padding: 13px 14px; gap: 11px; }
  #v-health .kpi--ic .ic-orb { width: 40px; height: 40px; }
  #v-health .kpi--ic .ic-orb svg { width: 20px; height: 20px; }
  #v-health .kpi--ic b { font-size: 20px; }
}

/* ------------------------------------------- 優勢卡 ｜ 決策卡 並排（.hl-deck）
   死白 261px（視窗 776–1160）：768 就切成 320px + 剩餘 的兩欄，右欄只剩 330–714px，
   三張決策卡塞不下只好直向堆疊 → 右欄 585px 高、左欄 324px，左欄底下空一大塊。
   ≥1180 決策卡改三欄後右欄只剩 246–264px，落差自然收到 21–58px（在容忍值內）。
   所以問題不是對齊方式，是「這個寬度根本不該分兩欄」：768–1179 維持直向堆疊，
   決策卡拿到整個內容寬就排得下三欄（每張 212–349px，CTA 需 98px，綽綽有餘）。 */
@media (min-width: 768px) and (max-width: 1179px) {
  #v-health .hl-deck { display: flex; flex-direction: column; }
  #v-health .hl-acts #health-decisions {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  }
}

/* ------------------------------------------------ 指標圖表列（#v-health .cardgrid）
   全域 .cardgrid 帶 align-items:start，同一列五張圖表高度 199–284px 不等，
   矮的下面就是死白（≥1860 五欄同列落差 82px）。比照既有的 .cardgrid.g2 改等高。 */
#v-health .cardgrid { align-items: stretch; }
#v-health .cardgrid > .card { height: 100%; display: flex; flex-direction: column; }
#v-health .cardgrid > .card > .chart-cap { margin-top: auto; }

/* 圖表列的空格：這頁有 5 張圖表卡（第 5 張「遺傳可靠度總覽」只有 API 有逐頭
   rel 時才由 fillChrome 顯示，示範資料下是 4 張），5 不能被 2 或 3 整除，
   最後一列必定缺角——2 欄是 2+2+1、3 欄是 3+2，量到的空洞 209–355px。
   用 span 把最後一列補滿，而不是把矮卡拉高假裝填滿。
   :has() 判斷第 5 張是否可見，4 張與 5 張各走各的排法。 */
#v-health .cardgrid:not(#health-decisions) { grid-auto-flow: row; }

/* 2 欄（視窗 768–1023）：5 張 → 第 1 張整列 ＋ 2＋2；4 張 → 本來就是 2＋2，不動。 */
@media (min-width: 768px) and (max-width: 1023px) {
  #v-health .cardgrid:not(#health-decisions):has(> .card:nth-child(5):not([style*="none"]))
    > .card:first-child { grid-column: 1 / -1; }
}
/* 3 欄（視窗 ≥1024）：改用 6 軌。5 張 → 前三張各佔 2 軌（維持稿上的三欄首列），
   後兩張各佔 3 軌把第二列填滿；4 張 → 前三張各佔 2 軌，第 4 張佔滿 6 軌。 */
@media (min-width: 1024px) {
  #v-health .cardgrid:not(#health-decisions) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  #v-health .cardgrid:not(#health-decisions) > .card { grid-column: span 2; }
  #v-health .cardgrid:not(#health-decisions):has(> .card:nth-child(5):not([style*="none"]))
    > .card:nth-child(n+4) { grid-column: span 3; }
  #v-health .cardgrid:not(#health-decisions):has(> .card:nth-child(5)[style*="none"])
    > .card:nth-child(4) { grid-column: span 6; }
}
/* ≥1860 內容寬 ≥1556，5 張排得下一整列，回到單軌一張 */
@media (min-width: 1860px) {
  #v-health .cardgrid:not(#health-decisions) {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  #v-health .cardgrid:not(#health-decisions) > .card,
  #v-health .cardgrid:not(#health-decisions):has(> .card:nth-child(5):not([style*="none"]))
    > .card:nth-child(n+4),
  #v-health .cardgrid:not(#health-decisions):has(> .card:nth-child(5)[style*="none"])
    > .card:nth-child(4) { grid-column: auto; }
}

/* 升為整列的第一張卡在寬螢幕會變成 1100px 寬、內容全擠在左邊。
   把 .kb 改成一列基線對齊，說明推到最右，整條寬度才有東西可讀
   （sweep 量不到卡內的白，但人看得到）。 */
@media (min-width: 768px) {
    flex: 1 1 auto; display: flex; align-items: baseline; flex-wrap: wrap;
    column-gap: 12px; row-gap: 2px;
  }
}

/* 卡片改等高後，內容天生較矮的卡（可靠度甜甜圈）會把白留在下緣。
   比照熱緊迫頁的做法讓內容區撐開並垂直置中，白就平均分在上下而不是積在底下。 */
#v-health .cardgrid:not(#health-decisions) > .card > .rel-row { flex: 1 1 auto; }

/* ══════════════════════════════════════════════════════════════════════════
   sweep.py（--screen=配種）掃出的版面缺陷修正
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- 1) 配種頁四張 KPI：中段寬度被 auto-fit 排成 3 欄 → 3＋1 孤兒列 ----
   .kpis--ic 是 auto-fit minmax(178px,1fr)。內容寬 558–747px 時剛好排 3 欄，
   四張卡就變成 3＋1：第二列只剩一張，右側兩格全空，欄底落差 129px。
   對應視窗約 670–859px。此區間改回 2×2，兩列都是滿的。
   下界取 660 是為了不動到「本來就只排 2 欄」的更窄寬度（那裡沒有孤兒問題），
   上界取 879 是四欄開始成立的前一格（880px 時每欄 183px > 178px 下限）。 */
@media (min-width: 660px) and (max-width: 879px) {
  #v-mate .mate-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 2) 待配種清單在 1180–1359px 被壓爛 ----
   1180px 這一刀同時發生兩件事：桌機左側導覽（248px）出現，而且 .mate-grid
   切成「清單 1fr ＋ 側欄 360px」。主欄因此從 1064px 直接掉到 498px，
   七欄列裡的 .cid 只剩 39px（牛號本身就要 55px）、公牛名只剩 57px。
   量過清單列真正需要的寬度：固定欄 34+104+62+86+14 = 300，六個 gap = 60，
   可壓縮的 .cid 與 .mbull 至少要 117+147 = 264 → 列寬 ≥624 → 主欄 ≥662。
   主欄 = 視窗 − 682，故 1344px 以上才夠。取 1360 當分欄點，
   1180–1359 維持單欄（此時主欄有 1068–1247px，非常寬鬆）。 */
@media (min-width: 1180px) and (max-width: 1359px) {
  #v-mate .mate-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 3) 清單七欄的比例與級數 ----
   原本 .cid : .mbull = 1 : 1.45，但兩者真正需要的內容寬是
   「2 胎 · STgenetics-TX」117px 對「GENOSOURCE MARKEL-ET」147px，也就是 1 : 1.26，
   舊比例讓 .cid 永遠先被餓死（768px 與 1352px 都量到 .cid 副行溢出）。
   改成 1 : 1.28，並把兩行副標各收一級（11.5→11、11→10.5），
   在最窄的多欄寬度 768px（列寬 618px）也放得下，不靠裁切。 */
@media (min-width: 768px) {
  #v-mate .mate-cols,
  #v-mate #mate-list .cow {
    grid-template-columns: 34px minmax(0, 1fr) 104px minmax(0, 1.28fr) 62px 86px 14px;
  }
  #v-mate #mate-list .cid div { font-size: 11px; }
  #v-mate #mate-list .mbull s { font-size: 10.5px; }
}

/* ---- 4) 配種明細「推薦公牛」在 700–767px 是 2＋1 孤兒列 ----
   檔內原註解已經寫過「兩欄會讓第 3 張卡變成 2＋1 的孤兒排列」，
   所以 ≥768 改成三欄；但 700–767 這一段當初留著兩欄，孤兒仍在
   （量到第 3 張卡右側 334px 全空，欄底落差 313px）。
   註解自己也說長公牛名換行的問題已由 subgrid 解掉，故一併改三欄。
   公牛不足 3 支時比照 ≥768 的既有規則收成 1／2 欄，不留空格。 */
@media (min-width: 700px) and (max-width: 767px) {
  #matesheet .mt-bulls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #matesheet .mt-bulls:has(.mtb:first-child:last-child) { grid-template-columns: minmax(0, 520px); }
  #matesheet .mt-bulls:has(.mtb:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 5) 配種明細兩張圖表卡：左右高度差 526–721px ----
   左卡「公牛比較」只有 277–330px 高；右卡「這頭母牛 vs 她的女兒」有 976–998px
   （P＝G＋E 三個盒、圖、兩則提醒、說明摺疊）。這不是可以靠等高解決的落差：
   對左卡下 align-self:stretch 只會把同樣 650px 的白搬進卡內（裡面是固定長寬比的
   SVG，撐高後底下就是空的），那是換個地方留白而不是修好。
   高度比 1:3 的兩張卡本來就不該並排，改為上下堆疊：
   左卡拿到整個抽屜寬度，右卡接在下面，沒有任何一欄短一截。 */
@media (min-width: 1180px) {
  #matesheet .mt-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================ sweep：自訂指數頁
   以下三條都來自 sweep.py --step=16 的實測，不是目視推測。 */

/* ---------------------------------------------- (1) 圖表列在 1040–1179 的空軌道
   768–1179 那段只寫了「第 3 張卡 grid-column: 1 / -1」，欄數卻交給全域 .cardgrid
   的 repeat(auto-fit, minmax(300px, 1fr))。內容寬 ≥928px（視窗約 1040）時 auto-fit
   會給出 3 軌，但第 1 列只有 2 張卡 → 右上角留下一個 319×311px 的空格
   （1096px 實測：卡 1/卡 2 各 319 寬佔第 1、2 軌，第 3 軌整格空著）。
   欄數必須跟著那條 span 一起釘死成 2，否則 span 的前提就不成立。 */
@media (min-width: 768px) and (max-width: 1179px) {
  #v-custom .cix-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------- (2) 性狀名括號註解被裁掉 3–5px
   「（飼養效率·低較佳）」「（代謝健康·低較佳）」單行需 105px。當標籤欄寬落在
   99–102px 時，Chrome 的 CJK 斷行會把前 9 個字（94.5px）排進該行，而 UAX #14
   不允許在收尾全形括號「）」之前斷行 —— 於是「）」掛在行尾溢出 3–5px。
   實測 word-break:break-all / overflow-wrap:anywhere / text-wrap:balance|pretty
   都救不了（收尾括號規則優先），縮字級也只是把壞掉的區間平移，不是消掉。

   根因是標籤欄用 0.9fr 連續變寬，一定會掃過那 4px 的壞區間（1088–1104 與
   1312–1328 兩次，正是 sweep 抓到的 1096 與 1320）。改法是讓欄寬「跳過」它：
   平板到中桌機把標籤欄夾在 76–96px（註解穩定斷成兩行 83+22），
   寬到 0.9fr 已經站在 112px 以上時再放它繼續長。文字一字不改。 */
@media (min-width: 768px) {
  #v-custom .slrow { grid-template-columns: 18px minmax(76px, 96px) minmax(0, 1.6fr) 62px; }
}
@media (min-width: 1420px) {
  #v-custom .slrow { grid-template-columns: 18px minmax(112px, 0.9fr) minmax(0, 1.6fr) 62px; }
}

/* ------------------------------------------ (3) 明細「官方 vs 你的目標」的箭頭
   ≥768 時 .cx-vs 是「卡｜箭頭｜卡｜說明」四欄同列，但箭頭 align-self:center
   讓它的 top 比另外三個低 46px，量測上會被切成獨立的一列 → 看起來像 3+1 孤兒。
   箭頭是兩張卡中間的分隔符，本來就屬於同一列；改成撐滿軌道、內容自己置中，
   外觀完全不變（→ 仍在垂直正中），量得到的列結構才與看得到的一致。
   只在 ≥768 生效：<768 時說明卡是 grid-column:1/-1 的第二列，若箭頭在此也撐滿，
   第一列會變成 3 張、第二列 1 張，反而製造出真的孤兒排法。 */
@media (min-width: 768px) {
  #cixsheet .cx-vs__a {
    align-self: stretch;
    display: flex; align-items: center; justify-content: center;
  }
}

/* ============================================================================
   sweep 修正：熱緊迫（#v-heat）— 內容溢出兩處
   sweep.py --screen=熱緊迫 --step=32 原報 36 項，實測後歸為兩類真缺陷
   （預警卡標題、熱損失三 KPI）加一類工具盲點（見本檔最後的說明）。
   ========================================================================== */

/* ---- (1) 未來 3 天預警卡標題：1024–1256px 需 261px 只有 255px ----
   .chart-t 全站是 display:flex（為了讓 .cap-i 的 ⓘ 垂直置中）。這一來標題被拆成
   三個 flex item（文字節點／#fc-town／文字節點），彈性行預設不換行，鄉鎮名一長
   就頂出容器。本卡標題沒有 ⓘ 鈕，flex 對它沒有用途；改回一般行內流，文字自然
   折行，不裁字也不縮級數。 */
#v-heat .heat-fccard .chart-t { display: block; }

/* ---- (2) 夏季熱損失估算的三張 KPI：最窄處需 194px 只有 161px ----
   兩段成因分開處理，都不用 overflow:hidden（那只是把裁切當修好）。

   2a. 尺度收斂：orb 44→40、gap 12→10、左右 padding 15→13，共讓出 12px。
       數值級數維持全站 KPI 的 24px，不特例縮小。 */
#v-heat .heat-loss .kpi--ic { padding: 13px; gap: 10px; }
#v-heat .heat-loss .kpi--ic .ic-orb { width: 40px; height: 40px; }
#v-heat .heat-loss .kpi--ic .ic-orb svg { width: 20px; height: 20px; }

/*   2b. 版位門檻：.heat-loss__body 原本 ≥1024 就切成「數值欄 1.55fr｜照片 1fr」，
       但左欄要塞三張 KPI 橫排，1024–1400 只分到 161–202px，而一張 KPI 在 24px
       數值下最少要 199px（40 orb ＋ 10 gap ＋ 123 數值 ＋ 26 padding）——
       版位本身就開得太早。門檻移到 1440（＝三張各 ~210px，仍有 8px 餘裕），
       以下沿用平板既有作法：三 KPI 佔滿整列、照片移到下方。稿的「左數值右照片」
       在真的放得下的寬度才成立。 */
@media (max-width: 1439px) {
  #v-heat .heat-loss__body { grid-template-columns: minmax(0, 1fr); }
  #v-heat .heat-loss .heat-photo { max-height: 190px; }
}

/*   2c. 768–850px：即使整列寬，卡片本身仍窄（每張 KPI 196px、文字欄 120px），
       「~NT$4,000」在 24px 要 123px。此區間把數值收到 21px（約 108px）。 */
@media (min-width: 768px) and (max-width: 850px) {
  #v-heat .heat-loss .kpi--ic b { font-size: 21px; }
}

/* ============================================================================
   sweep 修正：全國（#v-report）
   sweep.py --screen=全國 --step=32 原報 21 項，實測後歸為兩處真缺陷，
   而且兩處都在英雄卡內的數據帶（.rep-herostats，四格）上。
   ========================================================================== */

/* 數據帶的實寬不是視窗寬的單調函數：
     視窗 <768    → .phone 被 max-width:430 夾住 → 帶寬 296–367
     視窗 768–1179 → 帶寬隨 rep-top 的 1.55fr 欄與 max-width:84% 走
     視窗 ≥1180   → 側欄出現，帶寬先縮再放；1860 起 rep-top 改 2fr 又跳一次
   量到的值：1440→434、1512→465、1824→600、1860→647。
   所以下面兩條都用 @container 讀「這條帶到底多寬」，不用 @media 讀視窗寬。
   （英雄卡內容欄本來就是 position:relative，加 container-type 不改變定位行為。） */
#v-report .rep-hero .page-hero__content { container: rephero / inline-size; }

/* ---- (1) 孤兒列 3+1 ＋ 隨之而來的 86px 欄底死白（視窗 1512–1856，sweep 報 20 項）
   四格只有「2 欄」或「4 欄」排得滿；原本的 auto-fit minmax(150px, 1fr) 在帶寬
   465–600 時剛好排出 3 欄，第四格自己佔一列 → 第一欄比第二、三欄多出一整格
   （86px）的死白。改成只在真的放得下四格時才排四欄，其餘一律兩欄（2+2 永遠排滿）。
   門檻取帶寬 620px：四欄時每格 (620−3)/4 ≈ 154px，扣掉左右內距 28px 還有 126px，
   大於 em「乳量育種價（2020 基準）」所需的 123px，不會為了消孤兒列換來新的溢出。 */
#v-report .rep-herostats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container rephero (min-width: 620px) {
  #v-report .rep-herostats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- (2) 內容溢出：360px 時 .rhs em 需 123px 只有 120px ----
   帶寬 296 → 每格 147.5px，扣 14+14 內距只剩 119.5px；而「乳量育種價（2020 基準）」
   在 10.5px 下要 123px，且這串在該寬度下不換行（換行點落在（之前，第二行反而更長），
   於是字尾頂出內容框。不用 overflow:hidden（那是把裁切當修好）：
   內距 14→12 讓出 4px，字級 10.5→10 讓需求降到 ~117px，兩者相加留 6px 餘裕。
   門檻 336px 只涵蓋 ~400px 以下的手機（431 起 .phone 已被 430 夾住、帶寬固定 367）。 */
/* ---- (2) 360px「.rhs em 需 123 只有 120」＝ sweep 的量測盲點，不改 CSS ----
   實測（360px、每格 147.5px、內距 14+14 → 內容框 119.5px）：
     · 字串「乳量育種價（2020 基準）」scrollWidth 123、clientWidth 120，差 3.5px；
     · 把結尾的全形「）」拿掉後 scrollWidth 正好 120 —— 溢出量就是那一個右括號；
     · 把 em 的寬度手動壓到 110px 時它會換成兩行（高 15→30），代表換行點存在；
       但在 119.5px 卻仍是一行 —— Chrome 依 text-spacing-trim 讓行尾的全形右括號
       懸出內容框（行盒判定為「放得下」），所以 overflow-wrap:anywhere /
       word-break:break-all / line-break:anywhere 三種都試過，scrollWidth 一樣是 123。
   換句話說：版面沒有裁字、沒有捲動，只有 3.5px 的括號 ink 落在 14px 的內距裡
   （放大 4 倍截圖確認「）」完整可見，離卡片邊界還有 11px）。
   反向驗證過兩種「讓數字好看」的改法，都不該採用：
     · 縮字級到 10px → 需求降到 117px，但 768px 時內容框只有 113px，
       同一個懸出行為改在那裡發作（原本 113px 會換行、反而是乾淨的）；
     · 改內距 → 失效窗口只是平移（內距 12 時窗口落在帶寬 287–294，即視窗 ~800px）。
   任何內距／字級都留得下一段約 4px 寬的窗口，這正說明它是量測與行盒判定的落差，
   不是版面缺陷。同頁 #nm-tot「（共 31,704 頭可引進）」在 768px 是同一個簽名
   （需 112 只有 108，差 4px、同樣結尾全形右括號），一併歸此類。 */

/* ========================================================== 08 牧場選擇器（.picker）
   sweep --screen=牧場選擇器 在 360／376px 回報 [內容溢出] `s 需 143 只有 120`。
   sweep 每個寬度只印前 2 筆，實際規模要自己量：360px 時整份清單有 199 個元素溢出，
   其中 195 個是 .pk-nm 的第二行 <s>（「DHI 10502 ｜ 彰化縣 福興鄉」這種），
   最嚴重的差 28px（需 148 只有 120）。

   ---- (1) .pk-nm s：被 ellipsis 截掉的是 DHI 編號與鄉鎮 ----
   原本這行是 white-space:nowrap + overflow:hidden + text-overflow:ellipsis。
   360px 下 .pk-nm 只分到 120–133px（見下），而最長的字串要 148px，
   於是「彰化縣 福興鄉」被截成「彰化縣 福…」—— 農民用來認場的鄉鎮就沒了。
   這正是 sweep 註解說的「把裁切當成修好」，只是它已經先被寫進 CSS 裡。

   .pk-nm b（場名）上面那條註解已經替同一個問題做過決定：
   「場名不截字…ellipsis 會讓農民看不出是哪一場，改為換行（列高跟著長）」。
   第二行裝的是 DHI 編號＋縣市＋鄉鎮，辨識性一樣關鍵，沿用同一個結論：改成換行。
   只改 white-space 還不夠：CJK 預設可在任意字之間斷行，實際截圖是
   「DHI 5067 ｜ 桃園市 新屋 / 區」—— 鄉鎮名被拆開、末行只剩一個「區」字。
   加 word-break:keep-all 禁止在 CJK 連續字之間斷行，斷點就被逼回半形空格，
   變成「DHI 5067 ｜ 桃園市 / 新屋區」，鄉鎮名保持完整。
   keep-all 的風險是「單一不可斷字串比容器寬就會溢出」，這裡最長的連續 CJK 串
   是四字鄉鎮名（約 46px），遠小於 120px 的最窄可用寬，量過 360–1000px 皆 0 溢出。
   放得下時仍是一行（392px 起就收回單行），只有原本會被截的列才變兩行。

   為什麼不縮字級：148→120 要乘 0.81，11.5px 會掉到 9.3px，
   這是農民在手機上要讀的編號，不能為了讓 sweep 數字好看就縮到讀不了。
   為什麼不動 .pk-row 欄寬：.pk-meta 是 auto 欄，寬度隨輔導員姓名長短變動
   （同一個 360px 下 .pk-nm 會是 120／131／133px 三種），把它壓窄只是把溢出
   轉嫁給 .pk-adv，而且最寬的 148px 需求就算全給也仍差 15px，補不滿。
   ≥1024px 這行本來就 display:none（DHI／地區各自成欄），故本條實際只作用於 <1024。 */
.picker .pk-nm s {
  white-space: normal;
  word-break: keep-all;
  overflow: visible;
  text-overflow: clip;
}

/* ---- (2) 剩下 4 筆（.pk-nm b 及其父 .pk-nm）＝ 已知的全形右括號量測盲點，不改 ----
   360px 時「吉利兒牧場（12112）」「義昌畜牧場（12951）」回報 需 137／140 只有 133。
   與本檔上一段 .rhs em 記錄的是同一個簽名，這裡重跑過同樣的驗證：
     · 把結尾的全形「）」拿掉，scrollWidth 137→133，正好等於 clientWidth —— 溢出量就是那個右括號；
     · line-break:anywhere / word-break:break-all 兩種都試過，scrollWidth 仍是 137，
       代表不是「斷不了行」，是 Chrome 讓行尾全形右括號懸出內容框後仍判定行盒放得下。
   這兩個元素 overflow 都是 visible，沒有裁字；.pk-row 左右內距 12px 接得住那 4px ink。
   放著不修，不為了歸零而在這裡加 overflow:hidden（那才是真的把裁切當修好）。 */

/* ---- 採精規劃：sweep 的 2 筆內容溢出＝同一個全形右括號量測盲點，不改 ----
   sweep --step=32 --screen=採精規劃 回報：
     · 776px  #procsheet .pr-c--bull（及其 b）  「和牛 Wagyu（Beef Add On）」   需 185 只有 180
     · 400px  #procsheet .pr-ag__id（及其 s）   「STgenetics 和牛（Beef／Wagyu）」需 185 只有 180
       （400px 那筆 --step=32/16 掃不到，step=8 才落點；一併記在這裡）

   與本檔前兩段 .rhs em、.pk-nm b 記錄的是同一個簽名。逐項重驗過：
     · 把結尾的全形「）」拿掉，兩者 scrollWidth 都是 185→180，正好等於 clientWidth
       —— 溢出量就是那一個右括號，不是別的字被擠出去；
     · 全形「（）」換成半形「()」，scrollWidth 同樣回到 180，確認是全形字符的量測差；
     · 不是斷不了行：同一串字把可用寬壓到 ≤176px 就會正常折成兩行（148＋32），
       代表內容有斷點、Chrome 只是在 178–185 這個帶狀區間讓行尾全形右括號懸出後仍判定行盒放得下；
     · 兩者 overflow 都是 visible，沒有裁字。右鄰間隙 10px、ink 只探出 4.6／5.4px，
       .pr-c--bull 右邊是 5.4px 淨空，.pr-ag__id 的撥號膠囊在 flex-wrap 後根本不同列，都不相撞；
     · 776px／400px 各截圖確認：「和牛 Wagyu（Beef Add On）」與
       「STgenetics 和牛（Beef／Wagyu）」都完整顯示，結尾括號沒被切。

   所以這是量測假影不是版面缺陷。不為了讓 sweep 歸零而去加寬欄或縮字級——
   那會為了一個看不見的 5px 去動真的版位；更不加 overflow:hidden（那是把裁切當修好）。 */

/* ---- 耐熱明細：③ 三格統計在窄手機（≤400px）改成「標籤左／數字右」三列 ----
   360px 實測：三格橫排時每格內容寬只有 84–100px，「夏季峰值 THI 80.6」的標籤
   會折成兩行，把該格的「−1.8 kg/日」整整壓低一行——三格數字的基線變成
   高、低、高的鋸齒（截圖確認）。這是真的版面缺陷，sweep 的四類檢查抓不到。
   修法沿用本檔上面 768–1179px 平板抽屜那段既有的同一套處理（原因相同：
   欄寬不足以橫排三格），不另發明版位。單欄斷點下 .hx-grid 只有一欄，
   卡片變高不會產生新的死白。 */
@media (max-width: 400px) {
  #heatsheet .hx-stats { grid-template-columns: 1fr; gap: 9px; padding: 12px 14px; }
  #heatsheet .hx-stats > div {
    padding: 0; border-right: 0; display: flex; align-items: baseline;
    justify-content: space-between; gap: 10px;
  }
  #heatsheet .hx-stats small { flex: 1 1 auto; }
  #heatsheet .hx-stats b { margin-top: 0; font-size: 19px; flex: none; }
}

/* ---- 耐熱明細：sweep 的兩筆都是量測假影，不改版位 ----

   [1] 360px「small 需 88 只有 84」＝「場內平均（峰值）」結尾的全形右括號。
   與本檔前面 .rhs em、.pk-nm b、#procsheet 那幾段記錄的是同一個簽名，逐項重驗：
     · 把結尾的「）」拿掉 → scrollWidth 88→84，正好等於 clientWidth；
       換成半形「)」也是 84；全形括號整組拿掉還是 84。溢出量就是那一個右括號。
     · overflow 是 visible，沒有裁字。360px 量到：文字 ink 右緣 326，
       內容盒右緣 322、padding 盒右緣 330、.hx-stats 內緣 331 —— 括號的
       advance 只探進自己的 8px 右內距，離容器邊還有 5px，右邊也沒有鄰居
       （它是 :last-child，border-right 已關掉）。
     · 360px 截圖確認「場內平均（峰值）」完整顯示，結尾括號沒被切。
   （上面 ≤400px 那段改成單欄後這筆會一併消失，但那段是為了鋸齒基線改的，
     不是為了消掉這筆數字；就算不改，這筆本來就不該算缺陷。）

   [2] 776–2552px「div.hx-grid 欄底落差 248px（2 欄）」＝ sweep 依 left 分欄時，
   把 grid-column:1/-1 的 ⑥「可靠度與資料來源」也算進左欄。實測各寬度：
     · 1440px：①② 底 873／873，③ 與 .hx-col 底 1400／1400 —— 兩欄逐列完全等高，
       一個 px 的死白都沒有；
     · ⑥ 是整條跨欄卡（高 236px），左緣與左欄相同，於是「左欄最低點」被算成
       1648、右欄 1400，落差 248 ＝ 236 + 12px gap，正好是 ⑥ 自己的高度加間距。
   要讓這筆消失只能把 ⑥ 拆成不跨欄，那是為了遷就量測去破壞版位。
   真正該修的是 sweep 分欄時略過「寬度≈容器寬」的跨欄子層，但那是改判準，
   本次不動 sweep.py。 */

/* ---- 公牛明細：KPI 條 3 欄帶的尾列破洞 ----

   sweep 在 712–1160px 量到 .bs-kpis「欄底落差 95px（3 欄）」。這筆是真的。
   5 格 KPI 在 3 欄下排成 3+2，第二列右邊空一格 —— 實測 900px 時那個洞是
   217×85px，就在卡片群右下角，旁邊三張卡都有邊框底色，洞看起來像漏排。

   前面 2 欄帶已經用「最後一格跨滿」把 2+2+1 補成整齊三列（見上方 :last-child
   :nth-child(odd) 那條），3 欄帶當初把它 reset 成 auto，破洞就是這樣來的。
   同一招套回 3 欄即可：第 5 格跨 2 欄，第二列變成 1+2 剛好填滿 6 格。

   選擇器寫死 nth-child(5) 而不沿用 :nth-child(odd)：KPI 目前固定 5 格，但若
   之後改成 3 格，:nth-child(odd) 會讓第 3 格在 3 欄下跨成 4 格而換行，反而
   製造新破洞。綁死格數，改格數時會自然失效而不是默默壞掉。 */
@media (min-width: 700px) and (max-width: 1179.98px) {
  /* 原本綁死「第 5 格且是最後一格」，就是為了 5 格時補滿 3 欄的孤兒列。
     現在是 6 格（3 欄剛好兩列滿），這條規則自然不再匹配 —— 當初綁死格數
     而非用 :nth-child(odd)，正是為了讓它在格數改變時失效而不是默默排錯。
     保留註記，別再加回通用選擇器。 */
  #bullsheet .bs-kpis > .bs-kpi:nth-child(5):last-child { grid-column: span 2; }
}

/* ---- 留種淘汰：右側輔欄尾端 367px 死白 ----

   sweep 在留種淘汰頁回報 0 項，但這筆死白是真的，只是 sweep 結構上看不到：
   .cull-grid 的兩個直接子層 .cull-main / .cull-side 是「透明包裝層」——
   沒有底色、沒有邊框、沒有 shadow，於是 cardish() 一個都不算，
   kids.filter(cardish).length 是 0 < need 2，整個容器在分欄前就被濾掉了。
   往下一層的 .cull-main / .cull-side 各自量到的是「單欄堆疊」（cols=1），
   而落差檢查要 cols >= 2 才跑，所以兩層都合法地什麼也沒回報。

   實測 #v-cull .cull-grid（min-width:1180 起 grid + align-items:start）：
     寬度      左欄底   右欄底   落差
     1180px    1565     1251     314
     1280px    1615     1251     364
     1440px    1601     1234     367
     ≥1600px   1601     1234     367（版心已鎖寬，之後不再變）
   都遠超 sweep 自己的 80px 容忍值。目視也確認：右欄「專業建議」卡收在
   螢幕中段，其下到左欄「經濟淨益分布」卡底之間整片背景色，是標準的死白。

   修法沒有沿用「讓輔欄最後一張卡 align-self:stretch」——這裡最後一張是
   .cull-advice（純文字警語）。把它撐高 367px 只是把死白從卡片外搬到卡片內，
   等於用長高當成修好；而且會讓一段警語變成全欄最巨大的區塊，權重完全失衡。
   真正能「吃掉」高度的是 .cull-field：它的 .cull-field__media 是
   position:absolute inset:0 + object-fit:cover 的照片，長高只是露出更多草地，
   是這欄唯一內容會隨高度自然延展的卡。故讓它當彈性項吸收剩餘空間。

   min-height 綁 203px（＝1440px 下的自然高度）：避免哪天右欄變得比左欄高時，
   flex 反過來把這張照片卡壓扁到只剩文字區。 */
@media (min-width: 1180px) {
  #v-cull .cull-side  { align-self: stretch; }
  #v-cull .cull-field { flex: 1 1 auto; min-height: 203px; }
}

/* 這裡曾加過 `.picker .pk-nm { overflow-wrap: anywhere; }`，當時判斷 360px 的
   4–7px 溢出來自「DHI 12951 ｜ 雲林縣 台西鄉」的全形直線不可斷行。該判斷是錯的：
   實測加與不加，.pk-nm 的 scrollWidth/clientWidth 完全相同（137/133、140/133），
   而 <s> 那行本來就是 133/133 不溢出 —— 溢出全在 <b>，且是本檔上面 (2) 記錄的
   全形右括號懸掛假影，overflow-wrap 對它無效。規則已移除，別再加回來。 */

/* ============================================================================
   官方媒體套件 v3：清單縮圖欄
   加入縮圖等於在每一列多一個 grid 子項。這幾個清單都是**固定欄數**的 grid，
   而且表頭與資料列共用同一組欄寬 —— 只加子項不加欄，整排欄位會往右錯一格。
   實測（1440px，加縮圖後、改 CSS 前）：
     留種淘汰列 6 子項 / 5 欄、熱緊迫列 7 / 6、公牛排行列 9 / 8 —— 全部錯位。
   表頭沒有縮圖可放，故一律以 ::before 補一個空格子；用偽元素而非真的 <span>，
   是為了不動到既有的 :nth-child() 對齊規則（偽元素不計入 nth-child）。
   ========================================================================== */

/* ---- 縮圖本體：三種形狀，對應設計包 crop_shape（circle / square / rounded）---- */
.cavat, .hs-av, .rb-av, #v-mate #mate-list .mavat {
  flex: none; overflow: hidden; background: var(--surface-soft);
  display: inline-flex; align-items: center; justify-content: center;
}
.cavat  { width: 32px; height: 32px; border-radius: 50%; }
.hs-av  { width: 40px; height: 40px; border-radius: 10px; }   /* 稿上是方形 */
.rb-av  { width: 39px; height: 26.5px; border-radius: 3px; }  /* 稿：3:2 橫幅、幾乎直角 */
/* 後代選擇器，不能用 >：MediaKit 產出的是 <picture><img>，picture 雖然
   display:contents 不產生 box，但**選擇器比對的是 DOM 樹**，img 的父層仍是
   picture。寫成 `.cavat > img` 會完全不匹配 —— 圖片就保持原始尺寸把容器撐破
   （實測 .mavat 容器 34px、圖片要 37px，被裁掉）。 */
.cavat img, .hs-av img, .rb-av img,
#v-mate #mate-list .mavat img, .picker .pk-av img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 配種列的圓章原本是圖示底色，換成照片後要拿掉底色與內距，否則圖片周圍有一圈綠 */
#v-mate #mate-list .mavat { background: var(--surface-soft); padding: 0; border-radius: 50%; }

/* ---- 留種淘汰：30px ｜ 32px 縮圖 ｜ 內容 ｜ 決策 ｜ 淨益 ｜ chev ---- */
@media (min-width: 768px) {
  #v-cull .cull-cols,
  #v-cull #cull-list .cow { grid-template-columns: 30px 32px minmax(0, 1fr) 92px 116px 16px; }
  /* 表頭沒有縮圖那一格。這裡不能用 ::before 補格子 —— 偽元素會被排進第 1 欄，
     把「排名」整個往右推一欄（實測表頭「排名」跑到 343，資料列的名次在 303）。
     改為明確指定每個表頭 span 的欄位，跳過第 2 欄即可。 */
  #v-cull .cull-cols > span:nth-child(1) { grid-column: 1; }
  #v-cull .cull-cols > span:nth-child(2) { grid-column: 3; }
  #v-cull .cull-cols > span:nth-child(3) { grid-column: 4; }
  #v-cull .cull-cols > span:nth-child(4) { grid-column: 5; }
  #v-cull .cull-cols > span:nth-child(5) { grid-column: 6; }
}

/* ---- 熱緊迫：表頭原本已用 ::before 補「名次」欄，現在要補兩格 ---- */
@media (min-width: 768px) {
  #v-heat .hs-thead, #v-heat .hs-row {
    grid-template-columns: 30px 40px minmax(72px, 1fr) 78px 128px minmax(120px, 1.5fr) 20px;
  }
  #v-heat .hs-thead::before { grid-column: span 2; }   /* 表頭沒有名次與縮圖，補兩格 */
  /* 表頭與資料列的欄距必須相同，否則欄位會隨欄數累積偏移。
     這裡是既有缺陷（非本次改動造成）：#v-heat .hs-thead, .hs-row 設 gap:10px，
     但 #v-heat #heat-sens-list .cow（兩個 id，特異性較高）把資料列蓋成 12px。
     六個間隙差 2px，到最後一欄累積 12px —— 表頭「建議行動」與列內容對不齊。
     溢出與空白檢查抓不到這類偏移，只有逐欄比對格線才看得出來。 */
  #v-heat #heat-sens-list .cow.hs-row { column-gap: 10px; }
}
@media (max-width: 767px) {
  /* 手機版是 grid-template-areas，縮圖要具名，否則自動配置會插進 no 的位置 */
  #v-heat .hs-row {
    grid-template-columns: 26px 40px minmax(0, 1fr) auto 18px;
    grid-template-areas:
      "rank av no   loss chev"
      ".    .  act  act  act";
  }
  #v-heat .hs-row .hs-av { grid-area: av; }
}

/* ---- 公牛排行 ----
   這頁有兩套版面：<1180 用 grid-template-areas（名稱／公司／代理三行），
   ≥1180 是八欄平鋪且把所有 grid-area 還原成 auto。本檔追加在檔尾，
   同特異性下後者勝 —— 若寫成不帶條件的規則，會反過來蓋掉 1180 那組。
   故兩段都各自綁定條件，不留無條件版本。 */
@media (max-width: 1179px) {
  #v-report .repbull {
    grid-template-columns: 30px 40px minmax(0, 1fr) auto 14px;
    grid-template-areas: "rk av nm nmv chev" "rk av co co chev" "rk av ag ag chev";
  }
  #v-report .rb-av { grid-area: av; align-self: center; }
}
@media (min-width: 1180px) {
  #v-report .repbull {
    grid-template-columns: 46px 39px minmax(140px, 1.5fr) minmax(84px, 1fr) minmax(84px, 1fr) 84px 96px 68px 14px;
    /* 稿的列高 36px（原本 min-height:56 是為了窄版三行卡片留的，寬版用不到）。
       ⚠️ 只在 ≥1180 收：<1180 仍是三行 grid-template-areas，收到 36 會疊字。 */
    min-height: 36px; padding: 4px 6px; gap: 0 12px;
  }
  #v-report .rb-av { grid-area: auto; }
  /* 寬版每欄各自成行，名稱與 NAAB 併回一格顯示（表頭是「公牛名稱／NAAB」） */
  #v-report .rb-nm b { font-size: 12.5px; }
  #v-report .rb-nm small { display: inline; margin: 0 0 0 6px; font-size: 10.5px; }
  #v-report .rep-thead { grid-template-columns: 46px 40px minmax(140px, 1.5fr) minmax(84px, 1fr) minmax(84px, 1fr) 84px 96px 68px 14px; }
  /* 同 .cull-cols：::before 會被排進第 1 欄、把「排名」推到縮圖那一欄
     （實測表頭落點 [1,2,3…]，資料列的名次在第 0 欄）。改為明確指定欄位跳過第 2 欄。 */
  #v-report .rep-thead > span:nth-child(1) { grid-column: 1; }
  #v-report .rep-thead > span:nth-child(2) { grid-column: 3; }
  #v-report .rep-thead > span:nth-child(3) { grid-column: 4; }
  #v-report .rep-thead > span:nth-child(4) { grid-column: 5; }
  #v-report .rep-thead > span:nth-child(5) { grid-column: 6; }
  #v-report .rep-thead > span:nth-child(6) { grid-column: 7; }
  #v-report .rep-thead > span:nth-child(7) { grid-column: 8; }
  #v-report .rep-thead > span:nth-child(8) { grid-column: 9; }
}

/* ============================================================================ */

/* ---------------------------------------- 公牛明細：繁殖・健康・效率（Format 38 全性狀）*/
#bullsheet .bs-extra { margin-top: 14px; }
#bullsheet .bs-xg { margin-top: 14px; }
#bullsheet .bs-xg:first-of-type { margin-top: 10px; }
#bullsheet .bs-xg__t {
  display: block; font-size: 12px; font-weight: 800; color: var(--ink-700);
  letter-spacing: .02em; margin-bottom: 8px;
}
#bullsheet .bs-xg__l {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
}
#bullsheet .bs-x {
  background: var(--surface-soft); border-radius: 12px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
#bullsheet .bs-x small { font-size: 11px; font-weight: 600; color: var(--ink-600); }
#bullsheet .bs-x b {
  font-size: 17px; font-weight: 800; color: var(--brand-700);
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
#bullsheet .bs-x b.neg  { color: var(--danger-700); }
#bullsheet .bs-x b.none { color: var(--ink-400); font-weight: 700; }
#bullsheet .bs-x em { font-size: 10.5px; font-style: normal; color: var(--ink-500); }

/* 公牛名在窄版會被縮圖欄擠掉：加入 40px 的 .rb-av 後，360px 下名稱欄只剩 104px，
   而 'STGEN JUSTIFICATION-ET' 斷在空白處後，'JUSTIFICATION-ET' 單字仍要 108px。
   參考圖的手機版有公牛縮圖（而且是 120×90 的卡片式），所以不隱藏縮圖，改為允許
   長字在必要時斷行。實測：加此規則前 1 個元素溢出 4px，加後 0 —— 與 .pk-nm 那條
   已移除的無作用規則不同，這裡確實有效（拉丁長字，不是全形標點懸掛假影）。 */
@media (max-width: 1179px) {
  #v-report .rb-nm b { overflow-wrap: anywhere; }
}

/* ------------------------------------------- 公牛明細：性狀百分位分布（稿右欄）*/
#bullsheet .bs-pct__hd, #bullsheet .bs-pct__sc {
  display: flex; justify-content: space-between; font-size: 10.5px;
  color: var(--ink-500); font-weight: 600;
}
/* padding-left 152px 是舊版寬抽屜留給「圖示 + 標籤 + 數字」三欄的縮排。
   軌道改成整寬之後不需要縮排，留著會讓「低（差）高（佳）」溢出卡片 12px。 */
#bullsheet .bs-pct__hd { margin: 8px 0 6px; padding-left: 0; }
#bullsheet .bs-pct__sc { margin-top: 6px; padding-left: 0; }
#bullsheet .bs-prow__q {
  grid-column: 2; grid-row: 1; align-self: center;
  text-align: right; font-size: 12.5px; font-weight: 800;
  color: var(--ink-800); font-variant-numeric: tabular-nums;
}
/* 百分位軌道：0 在左端起算，故不像 SD 圖那樣以中線為原點 */
#bullsheet .bs-prow__t--q > em { left: 0; }

/* 次要性狀卡：列較多，級數收小一點，避免比主圖搶眼 */
#bullsheet .bs-prof--2 .bs-prow__l { font-size: 12px; }

/* 其他育種目標（FM$／CM$／GM$）*/
#bullsheet .bs-alt__l {
  display: grid; gap: 10px; margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
#bullsheet .bs-alt__i {
  background: var(--surface-soft); border-radius: 12px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
#bullsheet .bs-alt__i small { font-size: 11px; font-weight: 600; color: var(--ink-600); }
#bullsheet .bs-alt__i b {
  font-size: 19px; font-weight: 800; color: var(--brand-700); font-variant-numeric: tabular-nums;
}
#bullsheet .bs-alt__i em { font-size: 10.5px; font-style: normal; color: var(--ink-500); }

/* ------------------------------------------- 全國：排名表頁尾（只剩分頁列）
   原本這裡還有 .rep-more（「查看完整公牛排名 ›」／「收合」）。稿改成常駐分頁，
   NBOPEN 與那兩顆按鈕一起移除，這組規則沒有 markup 了 —— 連宣告一起刪，
   不留看得到卻永遠不生效的規則。column/center 也跟著拿掉：只剩一列分頁時
   置中堆疊沒有意義。 */
#v-report .rep-topfoot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-1); }

/* ============================================================================
   熱緊迫底部三欄（對齊稿）：夏季熱損失估算｜遺傳·你的牛群耐熱｜本場最怕熱的牛

   門檻是量出來的，不是估的。第一版我憑感覺寫 ≥1752px，實測隨即打臉：
     · 三欄時「最怕熱的牛」只分到 441–467px，但它 7 個格線欄實際需要 542px
       （sweep 在 2104–2552px 共 29 個寬度回報溢出）；
     · 熱損失欄的三張 KPI 橫排需要 263px，只分到 192px。
   照 542px 換算，1fr+2fr+1fr 共 4 個單位要 4×542＋2gap ≈ 2200px 內容寬，
   換算視窗超過 2500px —— 幾乎沒有人用得到。

   稿之所以塞得下，是因為它那欄的清單本來就是精簡列。故三欄版一併把
   「最怕熱的牛」切成手機用的雙行版位（名次／縮圖／牛號／掉乳 一行，建議行動
   另起一行），量到 467px 就放得下，門檻因此可以拉到 1752px 而不是 2500px。
   ========================================================================== */
.cardgrid.heat-botgrid { align-items: stretch; }
.cardgrid.heat-botgrid > .card { height: 100%; display: flex; flex-direction: column; min-width: 0; }

#v-heat .heat-gencard__t { display: flex; align-items: center; gap: 8px; }
#v-heat .heat-gencard__l { display: grid; gap: 12px; margin-top: 10px; flex: 1 1 auto; }
#v-heat .heat-gencard__l > .card {
  border: 1px solid var(--line-1); border-radius: 14px; padding: 12px 14px; box-shadow: none;
}

/* 窄：整列單欄 */
@media (max-width: 1179px) {
  .cardgrid.heat-botgrid { grid-template-columns: minmax(0, 1fr); }
  #v-heat .heat-gencard__l { grid-template-columns: minmax(0, 1fr); }
}
/* 中：熱損失＋遺傳並排，最怕熱獨立整列（它需要 542px，這裡給不起） */
@media (min-width: 1180px) and (max-width: 1751px) {
  .cardgrid.heat-botgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  #v-heat .heat-topcard { grid-column: 1 / -1; }
  #v-heat .heat-gencard__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 寬：稿的三欄一列 */
@media (min-width: 1752px) {
  .cardgrid.heat-botgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
  #v-heat .heat-gencard__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 窄欄版清單：與手機同一組版位，建議行動另起一行 */
  #v-heat .heat-topcard .hs-thead { display: none; }
  #v-heat .heat-topcard .hs-row {
    grid-template-columns: 26px 40px minmax(0, 1fr) auto 18px;
    grid-template-areas:
      "rank av no   loss chev"
      ".    .  act  act  act";
    row-gap: 6px;
  }
  #v-heat .heat-topcard .hs-row .rank    { grid-area: rank; }
  #v-heat .heat-topcard .hs-row .hs-av   { grid-area: av; }
  #v-heat .heat-topcard .hs-row .hs-no   { grid-area: no; }
  #v-heat .heat-topcard .hs-row .hs-loss { grid-area: loss; text-align: right; }
  #v-heat .heat-topcard .hs-row .hs-act  { grid-area: act; }
  #v-heat .heat-topcard .hs-row .hs-chev { grid-area: chev; }
  #v-heat .heat-topcard .hs-row .hs-idx  { display: none; }
  #v-heat .heat-topcard .hs-row .hs-no::after {
    content: "耐熱指數 " attr(data-idx);
    display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--ink-500);
  }
}
/* 熱損失卡只要進到 grid（≥1180）就是窄欄：374–467px 塞不下三張橫排 KPI
   （實測需 263px，給 192px）。改直排，照片維持在卡片下緣但受高度上限。 */
@media (min-width: 1180px) {
  #v-heat .heat-loss__body { grid-template-columns: minmax(0, 1fr); }
  #v-heat .heat-loss .kpis--ic { grid-template-columns: minmax(0, 1fr); }
  /* min-height 也要一起放低：原本 168 是為「左數值右照片」的等高版位設的，
     只改 max-height 會被 min-height 蓋過去（實測仍是 168），變成寫了沒作用的規則。 */
  #v-heat .heat-loss .heat-photo { min-height: 132px; max-height: 150px; }
}

/* 留種淘汰清單的數值欄改為「指數 · 距基準」兩層：主體是指數，下方小字是與基準的差距。
   原本只有一個金額，現在把「她多少」與「離門檻多遠」分開，兩件事都看得到。 */
#v-cull #cull-list .econ { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
#v-cull #cull-list .econ b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
#v-cull #cull-list .econ s {
  text-decoration: none; font-size: 11px; font-weight: 700; opacity: .78;
  font-variant-numeric: tabular-nums;
}

/* 權重面板的分區標題（.slgrp__*）已隨「拆成兩張卡」移除：
   兩組滑桿現在各有自己的卡片標題（母牛排序權重／公牛挑選偏好），
   不再需要卡內的次標題與分隔線。 */

/* 手機頁首「· 切換 ▾」的 Unicode 箭頭已換成官方 chevron-down（硬性規則禁用 Unicode 箭頭）。*/
.htxt-chev { display: inline-flex; vertical-align: -1px; }
.htxt-chev svg { width: 12px; height: 12px; }

/* 專業建議卡的 ⚠️ emoji 已換成 status-warning-triangle（硬性規則禁用 emoji）。
   .note 是文字段落，不設對齊的話 svg 會貼齊 baseline 而撞到行高。 */
#v-cull .cull-advice .note .note-warn {
  display: inline-flex; vertical-align: -3px; margin-right: 5px; color: var(--cull-amber);
}

/* 自訂指數明細 KPI 標題旁的說明鈕（官方 help-circle）與它控制的說明區塊。
   我第一次只補了按鈕樣式，漏掉 .cx-kpi__x —— 那個區塊沒有 display:none，
   三段說明就永遠攤開在數字上方，把 KPI 卡撐得又長又亂（使用者回報「被改壞」）。
   按鈕本身也曾因為沒有尺寸而只有 31×21，低於 §9 的 44×44 觸控下限。 */
#cixsheet .cx-kpi { display: flex; flex-direction: column; }
#cixsheet .cx-kpi__x {
  /* 寫在 __k 之後，用 order 推到最後：視覺順序是 標籤 / 大數字 / 註腳 / 說明 */
  order: 3; display: none; margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  background: var(--surface-soft); font-size: 11.5px; font-weight: 600;
  line-height: 1.6; color: var(--ink-600); overflow-wrap: anywhere;
}
#cixsheet .cx-kpi__x.open { display: block; }
#cixsheet .cx-kpi__x b { color: var(--ink-950); font-weight: 800; }
#cixsheet .cx-help {
  flex: none; border: 0; background: none; padding: 0; cursor: pointer; margin-left: 5px;
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-500); border-radius: 50%;
  transition: color var(--duration-fast) var(--ease-standard);
}
#cixsheet .cx-help svg { width: 15px; height: 15px; }
#cixsheet .cx-help:hover,
#cixsheet .cx-help[aria-expanded="true"] { color: var(--brand-700); }
#cixsheet .cx-help:focus-visible { outline: 3px solid rgb(43 138 104 / .35); outline-offset: 1px; }
@media (max-width: 767px) {
  #cixsheet .cx-help { width: 44px; height: 44px; margin: -11px 0 -11px 2px; }
}

/* 清單列尾的 › 由 Unicode 字元改成官方 chevron-right（硬性規則禁用 Unicode 箭頭）。
   既有規則全都是用 font-size 控制這個字元的大小（.chev { font-size: 18px } 之類，
   散在十多處），改成 svg 後那些規則會失效。用 1em 讓 svg 跟著既有的 font-size 走，
   十多條規則一條都不用動。 */
/* 用 1em 讓 svg 跟著既有 font-size 走，但有些 .chev 的容器寬度另有寫死（例如配種列
   的 grid 欄是 14px，font-size 卻是 18px）——svg 是實體盒子、文字字元不是，
   照 1em 給 18px 會撐破 14px 的欄（audit 抓到 15 次）。故再夾一層 max-width:100%。 */
.chev svg { width: 1em; height: 1em; max-width: 100%; max-height: 100%; display: block; }
.chev { display: inline-flex; align-items: center; justify-content: center; }

/* 全國英雄區「乳量改良」的向上趨勢圖示（nat-gain 由 S() 硬寫 '+' 號，恆為正向，
   故用固定的 trend-up 不會與資料矛盾）。 */
#v-report .rhs em .rhs-tr { display: inline-flex; vertical-align: -2px; margin-right: 4px; color: var(--green); }
#v-report .rhs em .rhs-tr svg { width: 13px; height: 13px; }

/* 排名變動速覽：整列一排 5 張卡（對齊稿）。窄螢幕自動換行，不設固定欄數。 */
#v-custom .cix-moves { margin-top: 14px; }
#v-custom .cix-moves .cix-moves__row > * { flex: 1 1 150px; min-width: 0; }

/* 公牛挑選偏好卡：與母牛排序卡同一種滑桿版位，但數值欄顯示「強度／關」而非百分比
   （這幾項不參與 100% 換算 —— 它們不進母牛排名）。 */
#v-custom .cix-bullpref .slval { color: var(--ink-700); }
#v-custom .cix-bullpref .chart-cap b { color: var(--coral-700); font-variant-numeric: tabular-nums; }
#v-custom .cix-bullpref .chart-cap a { color: var(--brand-700); font-weight: 700; }
#v-custom .cix-bullpref .chart-cap i { font-style: normal; color: var(--ink-500); }

/* ============================================================================
   自訂指數明細：對齊稿的兩欄版面
   稿上左欄是 KPI ＋「① 她為什麼排這名」＋ 原始育種價，右欄是「② 官方 vs 你的目標」
   ＋一張大照片＋底部 meta 列。原本全部整列堆疊，右側完全空著 ——
   使用者回報的「照片位置不同」也是同一個成因：稿的頭部只有小圓頭像，
   大照片在右欄，我們卻把照片放在頂部橫幅。
   門檻取 1180：右欄放大照片與 ② 卡至少要 ~430px，左欄的性狀表五欄需 ~640px。
   ========================================================================== */
#cixsheet .cx-grid { display: grid; gap: 14px; }
#cixsheet .cx-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

@media (min-width: 1180px) {
  #cixsheet .cx-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
}

/* 右欄大照片：用套件的 cow/detail 情境照，與頭部小圓頭像不同張，
   避免同一張圖在同一頁出現兩次。 */
#cixsheet .cx-photo {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--surface-soft);
}
#cixsheet .cx-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#cixsheet .cx-photo__n {
  position: absolute; left: 10px; bottom: 10px; text-decoration: none;
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: rgb(8 18 11 / .62); color: #fff; font-size: 10.5px; font-weight: 700;
}

/* 明細 meta：泌乳天數要標明是「最近月報」而非即時值（月報每月更新一次）。
   稿上還有「出生日期」，上游資料沒有這個欄位（只有分娩日），不編造。 */
#cixsheet .cx-meta__q {
  font-style: normal; margin-left: 4px; padding: 1px 5px; border-radius: var(--radius-pill);
  background: var(--surface-0); border: 1px solid var(--line-1);
  font-size: 9.5px; font-weight: 700; color: var(--ink-500);
}
#cixsheet .cx-meta__ym { font-style: normal; margin-left: 5px; font-size: 10.5px; font-weight: 600; color: var(--ink-500); }
/* 兩欄版時 meta 改為直排（右欄只有 440–620px，四格橫排會擠成一行字） */
@media (min-width: 1180px) {
  #cixsheet .cx-col--side .cx-meta { flex-direction: column; gap: 10px; }
  #cixsheet .cx-col--side .cx-meta > div { padding: 0; border-right: 0; }
}

/* ============================================================================
   全國頁：對齊稿的三段版面
     第 1 列 主視覺 ｜ 可靠度分布          （原本就對）
     第 2 列 基因改良趨勢 ｜ TEI 分布 ｜ 可引進公牛池設定   （原本只有兩欄）
     第 3 列 公司比較 ｜ 可引進高排名公牛                  （原本兩者各佔整列）
   門檻由實測最小寬決定（量測排除 SVG 內部的 <text>，那是座標系不是版面）：
     公牛池設定 340px、排名表 800px、其餘 ≤240px。
     · 第 2 列三欄：340×3 ＋ 2×14 gap ＝ 1048 內容寬 → 視窗 ≥1348
     · 第 3 列：公司比較 ≥240 ＋ 排名表 ≥800 ＋ gap ＝ 1054 → 視窗 ≥1354
   兩者都取 1360，低於此維持既有的兩欄／整列排法，不硬塞。
   ========================================================================== */
/* 兩列的門檻不同，必須分開設。第一版我把兩者都放在 1360，結果排名表在 1440
   只分到 693px（實需 748），sweep 在 1480–1544 連續回報溢出 ——
   算門檻時要用「該欄實際分到多少」，不是「整列有多寬」。
     · 第 2 列三欄：公牛池最小 340 → 340×3 ＋ 2×14 ＝ 1048 內容寬 → 視窗 ≥1352
     · 第 3 列 0.62fr/1fr：門檻是「逐一寬度實測」出來的 1600px，不是換算的。
       我先量卡片得 748 → 算出 1530；sweep 說還在溢出，改量真正會溢出的 .repbull
       得 758 → 算出 1550；sweep 仍然回報。逐點實測才發現 1550 時列只分到 727、
       1600 才剛好 757 —— 中間差在側欄、頁面 padding 與 gap 的實際值，
       換算時漏掉的那幾十 px 就是誤差來源。門檻用量的，不要用推的。 */
/* 公牛池卡搬到 CDCB 段之後，rep-r2 只剩兩張卡。
   ⚠️ 不能只是刪掉這條落回預設 —— 全域 .cardgrid 在 ≥1024 也是 repeat(3,…)，
      一樣會在右邊留一整欄死白。必須明寫兩欄。 */
@media (min-width: 1360px) {
  #v-report .rep-r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
  /* 稿的第 3 列左窄右寬：公司比較是條狀圖（窄即可讀），排名表要放八欄 */
  #v-report .rep-r3 { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); }
}
@media (min-width: 768px) and (max-width: 1359.98px) {
  #v-report .rep-r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1599.98px) {
  /* 排名表分不到 748px，兩張各自整列 */
  #v-report .rep-r3 { grid-template-columns: minmax(0, 1fr); }
}

/* 稿的公牛表有獨立的 NAAB 欄；本實作把 NAAB 放在牛名下方的小字（欄位總數已達 8，
   再拆一欄會讓每欄不足可讀寬）。表頭同步標註，讓兩者對得上。 */
#v-report .rep-thead .rb-th__s {
  display: block; margin-top: 1px; text-decoration: none;
  font-size: 9.5px; font-weight: 600; color: var(--ink-400);
}

/* 公牛明細：稿的三欄（第 3、4 列）。原本是 820px 抽屜排兩欄，改成工作台後才排得下。
   右欄較窄：稿上放的是「基因條件＋haplotype」這種輔助判讀資訊；本系統沒有基因型資料，
   改放同性質的 NM$ 池位置與其他育種目標，欄位結構與稿一致。 */
@media (min-width: 1180px) {
  #bullsheet .bs-grid--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.78fr); }
}
#bullsheet .bs-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ══════════════════════════════════════════════════════════════════════
   批 8：公牛抽屜依高保真設計包重做
   ⚠️ 這一段全部掛 #bullsheet。抽屜已在批 8-1 拿掉 .sheet--ws 改回覆蓋式，
      幾何來自共用的 .sheet/.sheetc，寬度由本檔前段的 #bullsheet > .sheetc 覆寫。
   ══════════════════════════════════════════════════════════════════════ */
/* 8-2 頁首：麵包屑 ⇄ 捲動後的牛名兩行 */
#bullsheet .bs-hd { display: flex; align-items: center; gap: 10px; min-height: 46px; }
#bullsheet .bs-hd__crumb { flex: 1; min-width: 0; font-size: 15px; color: var(--ink-600); }
#bullsheet .bs-hd__crumb i { font-style: normal; margin: 0 10px; color: var(--ink-400, var(--ink-500)); }
#bullsheet .bs-hd__crumb b { color: var(--ink-950); font-weight: 700; }
#bullsheet .bs-hd__bull { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#bullsheet .bs-hd__bull b { font-size: 15.5px; font-weight: 800; color: var(--num-strong); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bullsheet .bs-hd__bull s { text-decoration: none; font-size: 11.5px; font-weight: 600; color: var(--ink-500); }
#bullsheet .bs-hd .x { margin-left: auto; }

/* 8-3/8-4 英雄區：去卡片化，改用一條直立線分欄 */
#bullsheet .bs-hero { border: 0; border-radius: 0; padding: 4px 0 16px; background: none; }
#bullsheet .bs-hero__ph { aspect-ratio: 4 / 3; border-radius: 16px; }
#bullsheet .bs-hero__score { border-left: 2px solid var(--line-1); padding-left: 20px; }
#bullsheet .bs-hero__score > b { font-size: 46px; line-height: 1.05; font-variant-numeric: tabular-nums; }
#bullsheet .bs-hero__bar { height: 13px; border: 0; border-radius: 999px; background: var(--track); overflow: hidden; }
#bullsheet .bs-hero__bar i { display: block; height: 100%; border-radius: 999px; background: var(--div-up); }
#bullsheet .bs-hero__score s { text-decoration: none; }
#bullsheet .bs-hero__score s em { font-style: normal; font-weight: 700; color: var(--num-strong); font-size: 1.15em; }

/* 8-5 主 CTA：稿改深綠實心（原本是珊瑚橘） */
#bullsheet .bs-cta { background: var(--num-strong); border-radius: 14px; min-height: 56px; }

/* 8-6 KPI：一張卡六欄、直線分欄、無圖示 */
#bullsheet .card.bs-kpis {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 0; overflow: hidden;
}
#bullsheet .bs-kpi {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 13px 6px 14px; text-align: center; min-width: 0;
  border-left: 1px solid var(--line-1);
}
#bullsheet .bs-kpi:first-child { border-left: 0; }
#bullsheet .bs-kpi small { font-size: 11px; font-weight: 600; color: var(--ink-600); }
#bullsheet .bs-kpi b { font-size: 21px; font-weight: 800; color: var(--ink-950); line-height: 1.15; font-variant-numeric: tabular-nums; }
#bullsheet .bs-kpi b u { text-decoration: none; font-size: .58em; font-weight: 700; color: var(--ink-500); margin-left: 3px; }
#bullsheet .bs-kpi em { font-style: normal; font-size: 10px; color: var(--ink-500); }

/* 8-9 繁殖與健康細項：純數值表（名稱 ｜ 值 ｜ · ｜ 百分位） */
#bullsheet .bs-exr { display: flex; align-items: baseline; gap: 8px; padding: 7px 2px; border-top: 1px solid var(--line-1); }
#bullsheet .bs-exr:first-of-type { border-top: 0; }
#bullsheet .bs-exr__l { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: var(--ink-800); }
#bullsheet .bs-exr__v { font-size: 13px; font-weight: 800; color: var(--num-strong); font-variant-numeric: tabular-nums; }
#bullsheet .bs-exr__d { color: var(--ink-400, var(--ink-500)); }
#bullsheet .bs-exr__p { min-width: 30px; text-align: right; font-size: 12px; font-weight: 700; color: var(--ink-950); font-variant-numeric: tabular-nums; }

/* 8-10 其他育種目標：三個等寬淺綠方塊，每格兩行置中 */
#bullsheet .bs-alt__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#bullsheet .bs-alt__i {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 96px; padding: 10px 6px; border-radius: 14px; background: var(--band-sd); min-width: 0;
}
#bullsheet .bs-alt__i small { font-size: 15px; font-weight: 600; color: var(--ink-950); }
#bullsheet .bs-alt__i b { font-size: 27px; font-weight: 800; color: var(--num-strong); font-variant-numeric: tabular-nums; }

/* 8-11 代理卡：標籤改近黑、列間細線、末列無線 */
#bullsheet .bs-dl > div { border-top: 1px solid var(--line-1); padding: 9px 0; }
#bullsheet .bs-dl > div:first-child { border-top: 0; }
#bullsheet .bs-dl small { color: var(--ink-950); font-weight: 600; }

/* 8-12 適合／注意事項：適合＝兩欄等寬圓角矩形；警示＝同寬橘框無底 */
#bullsheet .bs-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 9px; }
#bullsheet .bs-chip {
  display: flex; align-items: center; justify-content: center; min-height: 28.5px;
  padding: 4px 8px; border: 0; border-radius: 5px; background: var(--band-sd);
  font-size: 10.75px; font-weight: 700; color: var(--ink-800); text-align: center;
}
#bullsheet .bs-chips--w { grid-template-columns: max-content; gap: 7px; }
#bullsheet .bs-chip.warn {
  min-height: 26px; padding: 3px 14px; border: 1px solid var(--coral-600); border-radius: 5px;
  background: none; color: var(--coral-700);
}
#bullsheet .bs-sep { height: 1px; background: var(--line-1); margin: 14px 0; }

/* 8-13/8-14 同級公牛比較：五欄置中、選中列圓角色塊、卡內頁尾一行兩塊 */
#bullsheet .bs-cmp td:not(.rk):not(.nm2), #bullsheet .bs-cmp th:not(:first-child):not(:nth-child(2)) { text-align: center; }
#bullsheet .bs-cmp thead th { border-bottom: 0; color: var(--ink-950); }
#bullsheet .bs-cmp tr.on > td { background: var(--band-sd); color: var(--num-strong); }
#bullsheet .bs-cmp tr.on > td:first-child { border-radius: 5px 0 0 5px; }
#bullsheet .bs-cmp tr.on > td:last-child { border-radius: 0 5px 5px 0; }
#bullsheet .bs-cmp tbody tr { cursor: pointer; }
#bullsheet .bs-cmp tbody tr:hover > td { background: var(--surface-2); }
#bullsheet .bs-cfoot {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; font-size: 11px; line-height: 1.6; color: var(--ink-500);
}

/* 8-16 三欄比例：第一列 1.04:1:1.24（稿的第三欄最寬）、第二列三等欄 */
@media (min-width: 1180px) {
  #bullsheet .bs-grid--3.bs-r1 { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr) minmax(0, 1.24fr); gap: 10px; }
  #bullsheet .bs-grid--3.bs-r2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
/* 8-17 抽屜內卡片圓角與標題字級 */
#bullsheet .card { border-radius: 8.5px; }
#bullsheet .bs-card .chart-t { font-size: 13.5px; }
#bullsheet .bs-card .chart-t s { font-size: 10.5px; }
/* .bs-col 裡的卡同時吃 .card 的 margin-bottom:12 與 .bs-col 的 gap:14 → 26px；
   左欄只有 12px。歸零讓兩欄一致。 */
#bullsheet .bs-col > .card { margin-bottom: 0; }

/* 10-7／10-8：抽屜在平板與手機。#bullsheet 內部約 200 條規則是照「820px 抽屜、
   內容寬 763px」校準的；桌機 816−56=760 幾乎完全對上，平板 571−36=535 對不上，
   所以這裡把幾個會擠爆的地方收窄，而不是照稿刪整張卡（刪掉等於在平板砍掉
   6 個真實性狀，資訊落差太大）。 */
@media (min-width: 768px) and (max-width: 1179px) {
  #bullsheet .card.bs-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #bullsheet .bs-kpi:nth-child(4) { border-left: 0; }
  #bullsheet .bs-kpi:nth-child(n+4) { border-top: 1px solid var(--line-1); }
  #bullsheet .bs-hero__score > b { font-size: 34px; }
  #bullsheet .bs-alt__i { min-height: 78px; }
  #bullsheet .bs-alt__i b { font-size: 22px; }
}
@media (max-width: 767px) {
  #bullsheet .card.bs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #bullsheet .bs-kpi:nth-child(odd) { border-left: 0; }
  #bullsheet .bs-kpi:nth-child(n+3) { border-top: 1px solid var(--line-1); }
  #bullsheet .bs-hero__score { border-left: 0; border-top: 2px solid var(--line-1); padding: 14px 0 0; }
  #bullsheet .bs-hero__score > b { font-size: 38px; }
  #bullsheet .bs-chips { grid-template-columns: minmax(0, 1fr); }
  #bullsheet .bs-chips--w { grid-template-columns: minmax(0, 1fr); }
  #bullsheet .bs-cfoot { flex-direction: column; gap: 6px; }
  /* 手機只留身份卡下方那一顆 CTA —— 底部有 tab bar，sticky CTA 會打架 */
  #bullsheet .bs-cta { min-height: 48px; border-radius: 8px; }
}

/* ============================================================================
   精液採購計畫：對齊稿的兩欄（10-procurement-desktop）
     左欄 替換需求引擎 ＋ 精液採購清單 ＋ 年度合計
     右欄 選性乳用比例調整 ＋ 經營假設提醒 ＋ 預算上限優化器
   原本全部整列堆疊、右側完全沒有內容。
   門檻由左欄的採購清單決定：它有 6 欄（種公牛／型式／頭數×次數／劑量／單價／小計）。
   ========================================================================== */
#procsheet .pr-grid { display: grid; gap: 14px; }
#procsheet .pr-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 1180px) {
  #procsheet .pr-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
}
/* 右欄變窄後，比例調整與警語卡不再並排 */
@media (min-width: 1180px) {
  #procsheet .pr-col--side .pr-card,
  #procsheet .pr-col--side .pr-warncard { width: 100%; }
}

/* 肉牛收益預估：稿上是右欄的獨立卡（原本是左欄底部第三個 KPI）。 */
#procsheet .pr-beefcard__r {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line-1); font-size: 12px;
}
#procsheet .pr-beefcard__r span { color: var(--ink-600); font-weight: 600; min-width: 0; }
#procsheet .pr-beefcard__r b { color: var(--ink-950); font-weight: 800; font-variant-numeric: tabular-nums; min-width: 0; }
#procsheet .pr-beefcard__big { margin-top: 10px; }
#procsheet .pr-beefcard__big small { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-600); }
#procsheet .pr-beefcard__big b {
  display: block; margin-top: 2px; font-size: 24px; font-weight: 800;
  color: var(--coral-700); font-variant-numeric: tabular-nums;
}
#procsheet .pr-beefcard__n { margin-top: 8px; font-size: 10.5px; line-height: 1.6; color: var(--ink-500); }
#procsheet .pr-beefcard__n b { color: var(--ink-800); font-variant-numeric: tabular-nums; }

/* 增益為負時（雜交犢價低於損益平衡）整張卡改中性色——
   維持珊瑚色會讓「虧損」看起來像「收益」。 */
#procsheet .pr-beefcard.is-neg .pr-beefcard__big b { color: var(--bad-700, #a2432a); }

#procsheet .pr-why {
  font-size: 10px; font-weight: 700; color: var(--ink-600);
  background: var(--surface-2); border-radius: 4px; padding: 1px 5px; margin-left: 6px;
  font-style: normal; white-space: nowrap; flex: none;
}
#procsheet .pr-beefcard__be {
  margin-top: 9px; padding: 7px 9px; border-radius: 7px;
  background: var(--surface-2); font-size: 11px; color: var(--ink-700);
}
#procsheet .pr-beefcard__be b { font-weight: 800; color: var(--ink-950); font-variant-numeric: tabular-nums; }
#procsheet .pr-beefcard__be s { display: block; margin-top: 2px; text-decoration: none; font-size: 10px; color: var(--ink-600); }
#procsheet .pr-beefcard__warn {
  display: flex; gap: 6px; margin-top: 9px; padding: 8px 9px; border-radius: 7px;
  background: var(--warn-50, #fdf4e3); color: var(--lbl-warn); font-size: 11px; line-height: 1.6;
}
#procsheet .pr-beefcard__warn svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
#procsheet .pr-editbtn {
  display: inline-block; margin-top: 6px; padding: 5px 10px; min-height: 32px;
  border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface-1);
  font: inherit; font-size: 11px; font-weight: 700; color: var(--ink-800); cursor: pointer;
}
#procsheet .pr-editbtn:hover { background: var(--surface-2); }

/* ---- 後備平衡（替換引擎 hero 內）---- */
/* 需求算出來卻不跟供給對帳，那個數字就只是裝飾；這一塊才是農民要的答案。 */
#procsheet .pr-bal {
  margin-top: 12px; padding: 10px 12px; border-radius: 9px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
}
#procsheet .pr-bal__r {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12px; color: rgba(255,255,255,.82); padding: 2px 0;
}
#procsheet .pr-bal__r b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
#procsheet .pr-bal__o {
  display: flex; gap: 6px; margin-top: 7px; padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: 11.5px; line-height: 1.6; color: rgba(255,255,255,.90);
}
#procsheet .pr-bal__o b { color: #fff; font-weight: 800; }
#procsheet .pr-bal__o svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
#procsheet .pr-bal.is-short { background: rgba(226,120,80,.22); border-color: rgba(240,164,136,.45); }
#procsheet .pr-bal.is-thin  { background: rgba(255,255,255,.07); }

#procsheet .pr-opt__warn.is-cap { background: var(--warn-50, #fdf4e3); color: var(--lbl-warn); }
#procsheet .pr-opt__warn.is-cap b { font-weight: 800; }

/* ---- 經營假設面板 ---- */
#procsheet .as-card .pr-card__t { position: relative; }
#procsheet .as-reset {
  margin-left: auto; padding: 4px 9px; min-height: 30px;
  border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface-1);
  font: inherit; font-size: 10.5px; font-weight: 700; color: var(--ink-600); cursor: pointer;
}
#procsheet .as-lead { margin: 6px 0 10px; font-size: 11px; line-height: 1.6; color: var(--ink-600); }
#procsheet .as-grp { margin-bottom: 10px; }
#procsheet .as-grp h4 {
  margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--ink-600); text-transform: none;
}
#procsheet .as-row { display: grid; gap: 3px; margin-bottom: 9px; }
#procsheet .as-k {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 700; color: var(--ink-800); min-width: 0;
}
#procsheet .as-src {
  font-style: normal; font-size: 9.5px; font-weight: 800; padding: 1px 5px;
  border-radius: 4px; white-space: nowrap;
}
#procsheet .as-src.is-def  { background: var(--surface-2); color: var(--ink-600); }
#procsheet .as-src.is-user { background: var(--you-50, #e3f2ea); color: var(--lbl-good); }
#procsheet .as-src.is-gov  { background: var(--info-50, #e6f0f8); color: var(--lbl-info); }
#procsheet .as-src.is-farm { background: var(--info-50, #e6f0f8); color: var(--lbl-info); }
#procsheet .as-in { display: flex; align-items: center; gap: 6px; min-width: 0; }
#procsheet .as-in input {
  flex: 1 1 auto; min-width: 0; padding: 7px 9px; min-height: 38px;
  border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface-0);
  font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-950);
  font-variant-numeric: tabular-nums;
}
#procsheet .as-in input:focus-visible { outline: 2px solid var(--you-600, #2f7d5d); outline-offset: 1px; }
#procsheet .as-in s { text-decoration: none; font-size: 10.5px; color: var(--ink-600); white-space: nowrap; flex: none; }
#procsheet .as-h { font-size: 10px; line-height: 1.55; color: var(--ink-600); }
#procsheet .as-adv { margin-top: 4px; border-top: 1px solid var(--line-1); padding-top: 8px; }
#procsheet .as-adv > summary {
  display: flex; align-items: center; gap: 5px; cursor: pointer; list-style: none;
  font-size: 11px; font-weight: 800; color: var(--ink-700); min-height: 32px;
}
#procsheet .as-adv > summary::-webkit-details-marker { display: none; }
#procsheet .as-adv[open] > summary .as-adv__cv { transform: rotate(180deg); }
#procsheet .as-adv__cv { display: inline-flex; transition: transform .15s; }
#procsheet .as-adv__cv svg { width: 14px; height: 14px; }
#procsheet .as-adv__b { padding-top: 6px; }
#procsheet .as-ft {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-1);
  font-size: 10.5px; line-height: 1.6; color: var(--ink-600);
}
#procsheet .as-ft b { color: var(--ink-800); font-variant-numeric: tabular-nums; }

/* 手機：假設輸入框要撐滿，觸控目標維持 44px */
@media (max-width: 767px) {
  #procsheet .as-in input { min-height: 44px; }
  #procsheet .as-reset { min-height: 44px; }
  #procsheet .pr-editbtn { min-height: 44px; }
}

/* ================================================================
   行情頁（#v-market）
   天氣類刻意不放這頁 —— 熱緊迫頁已有 THI 預報與定位邏輯，
   兩頁都講熱只會讓頁名被迫變成「行情與天氣」，與其他六個頁名不同調。
   ================================================================ */
#v-market .mk-cards {
  display: grid; gap: 12px; margin-bottom: 14px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { #v-market .mk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { #v-market .mk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

#v-market .mk-card { padding: 14px 15px 12px; display: flex; flex-direction: column; min-width: 0; }
#v-market .mk-card__k {
  font-size: 12px; font-weight: 700; color: var(--ink-600);
  overflow-wrap: anywhere; min-width: 0;
}
#v-market .mk-card__v {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin-top: 4px; min-width: 0;
}
#v-market .mk-card__v b {
  font-size: 27px; font-weight: 800; color: var(--ink-950);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
#v-market .mk-card__v s { text-decoration: none; font-size: 11.5px; color: var(--ink-600); }
#v-market .mk-na { text-decoration: none; font-size: 16px; font-weight: 700; color: var(--ink-600); }
#v-market .mk-d {
  font-style: normal; font-size: 11px; font-weight: 800; margin-left: auto;
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px;
  white-space: nowrap; flex: none;
}
#v-market .mk-d svg { width: 13px; height: 13px; }
#v-market .mk-d.is-up   { background: var(--you-50, #e3f2ea); color: var(--lbl-good); }
#v-market .mk-d.is-dn   { background: var(--bad-50, #fbeae3); color: var(--lbl-bad); }
#v-market .mk-d.is-flat { background: var(--surface-2); color: var(--ink-600); }
#v-market .mk-spark { display: block; width: 100%; height: 56px; margin: 8px 0 2px; }
#v-market .mk-card__f {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: auto; padding-top: 8px; font-size: 10.5px; color: var(--ink-600);
}
#v-market .mk-card__f i { font-style: normal; margin-left: auto; color: var(--ink-600); }
#v-market .mk-old {
  font-weight: 800; color: var(--lbl-warn);
  background: var(--warn-50, #fdf4e3); padding: 1px 6px; border-radius: 4px;
}
/* 陳舊：數字轉灰、不顯示變化箭頭（陳舊資料算出的變化率沒有意義） */
#v-market .mk-card.is-stale .mk-card__v b { color: var(--ink-600); }
/* 個別品項停更：數字同樣轉灰（它不是當日價），但保留變化率——那是有效數字，
   只是錨在它自己的最後報價日，基準日寫在 .mk-basis 裡。 */
#v-market .mk-card.is-dim .mk-card__v b { color: var(--ink-600); }
/* 個別品項停更的理由（來源標「無報導」）。價格本身有值，所以不能靠 .mk-na
   那條降級路徑；這行必須跟數字同框，讓 12 天沒動的價格不會被讀成當日價。 */
#v-market .mk-card__note {
  margin-top: 6px; padding: 5px 8px; border-radius: 6px;
  background: var(--warn-50, #fdf4e3); border-left: 2px solid var(--lbl-warn);
  font-size: 10.5px; line-height: 1.55; color: var(--ink-700, var(--ink-600));
}

/* ---- 全品項表 ---- */
/* 圖與表成對。寬螢幕左圖右表，窄螢幕上下堆疊。
   圖給的是「走勢」，表給的是「現在的數字」，兩者互補，缺一都得靠腦補。 */
#v-market .mk-sec {
  display: grid; gap: 12px; margin-bottom: 14px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1240px) {
  #v-market .mk-sec { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}
#v-market .mk-chartcard { padding: 15px 16px 12px; min-width: 0; }
#v-market .chart-sub {
  margin: 4px 0 8px; font-size: 11px; line-height: 1.65; color: var(--ink-600);
}
#v-market .chart-sub b { color: var(--ink-800); }
#v-market .mk-chart { display: block; width: 100%; height: auto; }
#v-market .mk-org {
  font-style: normal; font-size: 9.5px; font-weight: 700; margin-left: 5px;
  padding: 1px 5px; border-radius: 4px; background: var(--surface-2); color: var(--ink-600);
}
#v-market .mk-org.is-stale { background: var(--warn-50, #fdf4e3); color: var(--lbl-warn); }
#v-market .mk-na2 { text-decoration: none; font-size: 11px; font-weight: 700; color: var(--ink-600); }
#v-market .chart-cap .mk-cap-warn { display: block; margin-top: 4px; color: var(--lbl-warn); }

#v-market .mk-tbl { padding: 15px 16px 13px; min-width: 0; }
#v-market .mk-th, #v-market .mk-tr {
  display: grid; align-items: center; gap: 10px;
  /* 「較前一週」放的是 +12.3% 這種膠囊，量到最寬需 68px；表格與圖並排後
     整體變窄，原本的 .8fr 只分到 65px 就溢位。改用 minmax 給硬下限，
     欄寬用量的、不要用推的。 */
  /* 實測 1440 桌機下表卡只有 523px：扣掉 padding 32 與 4 個 10px gap 剩 451px。
     原本走勢欄固定吃掉 130px，品項欄只分到 130px，而最長品名「乳公架仔牛150-200公斤」
     需要約 190px，於是每一列都換行、列高多一倍。走勢欄縮到 92px 把空間讓回品項。 */
  grid-template-columns:
    minmax(0, 2.1fr) minmax(52px, .7fr) minmax(44px, .6fr) minmax(70px, .8fr) minmax(72px, 100px);
}
#v-market .mk-th {
  padding: 8px 0; border-bottom: 1px solid var(--line-2);
  font-size: 11px; font-weight: 800; color: var(--ink-600);
}
#v-market .mk-tr { padding: 10px 0; border-bottom: 1px solid var(--line-1); font-size: 12.5px; }
#v-market .mk-tr:last-of-type { border-bottom: 0; }
#v-market .mk-c { min-width: 0; overflow-wrap: anywhere; }
#v-market .mk-c--n { font-weight: 700; color: var(--ink-900); }
#v-market .mk-c--v b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-950); }
#v-market .mk-c--sp .mk-spark { height: 30px; margin: 0; }
/* 其他頁的 .chart-cap 都是逐頁定義的，#v-market 沒有就會落到通用值。
   逐頁慣例用 --ink-500，但那在白底只有 4.07:1（小字需 4.5），故本頁用 --ink-600。 */
#v-market .chart-cap { font-size: 11.5px; color: var(--ink-600); margin: 10px 2px 0; line-height: 1.6; }
#v-market .chart-cap b { color: var(--ink-800); }
#v-market .mk-tbl .chart-cap { margin-top: 10px; }

/* 手機：每列兩行。
   稿上是一行五欄，但實測參考圖的等效 CSS 寬度約 864px（由文字帶高 20px ÷ 12px 字級
   反推縮放 1.67x），在真實的 390px 手機上排不下五欄。
   原本改成「每格一行、各自帶欄名」則是另一個極端——每列變 5 行、整頁 4,169px。
   折衷成兩行：上行品項＋價格＋單位，下行走勢＋變化。 */
@media (max-width: 767px) {
  #v-market .mk-th { display: none; }
  #v-market .mk-tr {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "nm val unit" "sp chg chg";
    gap: 3px 8px; align-items: center; padding: 10px 0;
  }
  #v-market .mk-c::before { content: none; }
  #v-market .mk-c--n { grid-area: nm; font-size: 13px; align-self: end; }
  #v-market .mk-c--v { grid-area: val; align-self: end; }
  #v-market .mk-tr > .mk-c:nth-child(3) { grid-area: unit; align-self: end; font-size: 11px; }
  #v-market .mk-tr > .mk-c:nth-child(4) { grid-area: chg; justify-self: end; }
  #v-market .mk-c--sp { grid-area: sp; display: block; }
  #v-market .mk-c--sp .mk-spark { width: 100%; height: 26px; }
}

/* ---- 空狀態與說明 ---- */
#v-market .mk-empty { padding: 22px 18px; text-align: center; }
#v-market .mk-empty svg { width: 20px; height: 20px; color: var(--ink-600); }
#v-market .mk-empty b { display: block; margin: 6px 0 4px; font-size: 14px; color: var(--ink-900); }
#v-market .mk-empty p {
  margin: 0 auto; max-width: 46ch; font-size: 12px; line-height: 1.7; color: var(--ink-600);
}
/* 稿：左側直排標題 + 三欄圖示說明的橫向卡（原本是一段直式文字） */
#v-market .mk-note {
  margin-top: 14px; padding: 16px 18px;
  display: grid; gap: 14px 18px; align-items: start;
  grid-template-columns: minmax(0, 1fr);
  background: var(--surface-soft);
}
@media (min-width: 900px) { #v-market .mk-note { grid-template-columns: 108px minmax(0, 1fr); } }
#v-market .mk-note__t {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 800; color: var(--ink-900); line-height: 1.35;
}
@media (min-width: 900px) {
  #v-market .mk-note__t {
    flex-direction: column; align-items: flex-start; gap: 7px;
    padding-right: 16px; border-right: 1px solid var(--line-2); height: 100%;
  }
}
#v-market .mk-note__ic { color: var(--ink-600); flex: none; }
#v-market .mk-note__ic svg { width: 26px; height: 26px; }
#v-market .mk-note__g {
  display: grid; gap: 14px 20px; min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { #v-market .mk-note__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { #v-market .mk-note__g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#v-market .mk-note__c { display: flex; gap: 11px; min-width: 0; }
#v-market .mk-note__cic { flex: none; color: var(--brand-700); }
#v-market .mk-note__cic svg { width: 30px; height: 30px; }
#v-market .mk-note__cb { min-width: 0; }
#v-market .mk-note__cb b {
  display: block; margin-bottom: 3px; font-size: 12.5px; font-weight: 800; color: var(--ink-900);
}
#v-market .mk-note__cb p {
  margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--ink-600); overflow-wrap: anywhere;
}

#procsheet .pr-bal.is-even { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.30); }

/* 單價被農民覆蓋時在清單上標出來，否則他會以為那還是系統預設價 */
#procsheet .pr-px {
  font-style: normal; font-size: 9px; font-weight: 800; margin-left: 5px;
  padding: 1px 4px; border-radius: 4px;
  background: var(--you-50); color: var(--lbl-good); white-space: nowrap;
}
/* 劑數的拆解（理論劑量 ＋損耗）。放在劑數下面一行當註腳，
   讓「頭 × 次」與最終劑數之間的差額看得見、農民能自己核對。 */
#procsheet .pr-step {
  display: block; font-style: normal; font-size: 10px; font-weight: 600;
  color: var(--ink-500); margin-top: 1px; white-space: nowrap;
}

/* ---- 行情圖的粒度切換與翻頁 ---- */
#v-market .mk-ctl {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 6px 0 8px; min-width: 0;
}
#v-market .mk-ctl.is-busy { opacity: .55; }
#v-market .mk-gran { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--surface-2); }
#v-market .mk-gb {
  min-width: 38px; min-height: 30px; padding: 4px 10px;
  border: 0; border-radius: 6px; background: transparent;
  font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ink-600); cursor: pointer;
}
#v-market .mk-gb.on { background: var(--surface-0); color: var(--ink-950); box-shadow: var(--shadow-sm); }
#v-market .mk-gb:disabled { cursor: default; }
#v-market .mk-gb:focus-visible { outline: 2px solid var(--you-600); outline-offset: 1px; }

#v-market .mk-nav { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
#v-market .mk-nb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface-0);
  color: var(--ink-700); cursor: pointer;
}
#v-market .mk-nb svg { width: 16px; height: 16px; }
#v-market .mk-nb:hover:not(:disabled) { background: var(--surface-2); }
/* 到底時明確 disable —— 讓人一直點卻毫無回饋，比講清楚更糟 */
#v-market .mk-nb:disabled { opacity: .32; cursor: default; }
#v-market .mk-nb:focus-visible { outline: 2px solid var(--you-600); outline-offset: 1px; }
#v-market .mk-win {
  font-size: 11.5px; font-weight: 700; color: var(--ink-800);
  font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 0;
}
#v-market .mk-win s { text-decoration: none; margin-left: 6px; font-weight: 600; color: var(--ink-600); }
#v-market .mk-full {
  font-size: 10px; color: var(--ink-600); margin-left: auto; white-space: nowrap;
}

@media (max-width: 767px) {
  #v-market .mk-gb { min-height: 44px; min-width: 46px; }
  #v-market .mk-nb { width: 44px; height: 44px; }
  #v-market .mk-full { margin-left: 0; width: 100%; }
}

/* ---- 行情圖的游標讀值區 ---- */
#v-market .mk-hit { cursor: crosshair; }
/* auto-fit 依「容器」實際寬度排欄，不用視窗斷點 —— 這塊在圖卡裡，
   圖卡寬度隨左右分欄變動，用 viewport media query 會排錯欄數。 */
#v-market .mk-read {
  display: grid; gap: 3px 14px; align-content: start;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  margin-top: 6px; padding: 8px 10px; border-radius: 8px;
  background: var(--surface-2); font-size: 11px; line-height: 1.5; color: var(--ink-800);
}
/* 日期不再獨佔一整列：五個品項＋日期共 6 格，3 欄剛好兩列，比原本少一列 */
#v-market .mk-read__d {
  font-size: 11.5px; font-weight: 800; color: var(--ink-950);
  font-variant-numeric: tabular-nums; align-self: center;
}
#v-market .mk-read__r { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
#v-market .mk-read__r i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
#v-market .mk-read__r em { font-style: normal; color: var(--ink-600); min-width: 0; overflow-wrap: anywhere; }
/* 數值欄即使沒有值也佔位。不佔位的話，hover 時數值擠進來會把品項名推到換行，
   列高改變 → 讀值區高度跟著變 → 游標一進圖表整頁就往下推。 */
#v-market .mk-read__r s {
  text-decoration: none; margin-left: auto; flex: none; min-width: 78px; text-align: right;
  font-weight: 800; color: var(--ink-950); font-variant-numeric: tabular-nums;
}
#v-market .mk-read__hint { font-weight: 600; color: var(--ink-600); }

/* ================================================================
   行情頁「本週市場脈動」橫幅（design-handoff-market）
   規格高度：桌機 124px、平板 184px、手機 156px。
   色彩刻意用固定深綠而非主題 token —— 文字疊在照片上，兩個主題都必須是
   白字深底才讀得到；跟著主題翻成淺色反而在照片上消失。
   ================================================================ */
#v-market .market-pulse {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 124px; margin: 0 0 16px;
  border-radius: var(--radius-md); background: #003f35;   /* token radius_px.banner = 16，與同頁卡片一致 */
  box-shadow: var(--shadow-sm);
}
#v-market .market-pulse__media { position: absolute; inset: 0; z-index: -3; }
#v-market .market-pulse__media picture { display: contents; }
#v-market .market-pulse__media img {
  display: block; width: 100%; height: 100%;
  /* 焦點 58%（原 48%）：容器 9.16:1 而來源 21:9，cover 只保留來源高度的 25.4%，
     牛耳與飼料堆無法同時容納。使用者選擇保飼料堆。 */
  object-fit: cover; object-position: 78% 58%;
}
/* 左側 42% 是原圖預留的文字安全區，scrim 只補足對比、不整片壓暗 */
#v-market .market-pulse__scrim {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, #003f35 0%, rgba(0,63,53,.94) 34%, rgba(0,63,53,.55) 56%, rgba(0,63,53,0) 74%);
}
#v-market .market-pulse__content {
  position: relative; z-index: 1; max-width: 46%;
  padding: 17px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
}
#v-market .market-pulse__title {
  margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: #fff;
}
#v-market .market-pulse__desc {
  margin: 0; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.88);
}
#v-market .market-pulse__badge {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.38); background: rgba(255,255,255,.10);
  font-size: 11.5px; font-weight: 700; color: #fff; white-space: nowrap;
}
/* 「更新行情」鈕與它的結果訊息。原本這裡是同一個 badge 的純裝飾外觀，
   現在按得下去，所以要有 hover／active／disabled 三態與可見的 focus 框。 */
#v-market .market-pulse__act {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px;
}
#v-market .market-pulse__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.38); background: rgba(255,255,255,.10);
  font-size: 11.5px; font-weight: 700; color: #fff; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
#v-market .market-pulse__btn:hover:not(:disabled) {
  background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.6);
}
#v-market .market-pulse__btn:active:not(:disabled) { background: rgba(255,255,255,.28); }
#v-market .market-pulse__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#v-market .market-pulse__btn:disabled { opacity: .6; cursor: default; }
/* 抓取中讓 icon 轉，讓「有在動」看得出來 */
#v-market .market-pulse__btn.is-busy svg { animation: mkspin .9s linear infinite; }
@keyframes mkspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #v-market .market-pulse__btn.is-busy svg { animation: none; opacity: .6; }
}
#v-market .market-pulse__note {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.88);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
/* 觸控目標要夠大。同時用 pointer:coarse 與寬度斷點：前者才是語意正確的判準，
   但無頭瀏覽器不會回報 coarse，稽核腳本量不到——加上寬度斷點才驗證得了。
   桌機拉窄時按鈕變高，無害。 */
@media (pointer: coarse), (max-width: 767px) {
  #v-market .market-pulse__btn { min-height: 44px; padding: 6px 16px; }
}
#v-market .market-pulse__badge svg { width: 14px; height: 14px; flex: none; }

@media (min-width: 768px) and (max-width: 1199px) {
  #v-market .market-pulse { min-height: 184px; }
  #v-market .market-pulse__content { max-width: 52%; padding: 22px; }
  #v-market .market-pulse__title { font-size: 23px; }
}
@media (max-width: 767px) {
  #v-market .market-pulse { min-height: 156px; }
  /* 手機換 3:1 art direction，焦點右移才留得住乳牛臉 */
  #v-market .market-pulse__media img { object-position: 78% 50%; }
  #v-market .market-pulse__scrim {
    background: linear-gradient(90deg, #003f35 0%, rgba(0,63,53,.92) 46%, rgba(0,63,53,.42) 70%, rgba(0,63,53,0) 88%);
  }
  #v-market .market-pulse__content { max-width: 69%; padding: 16px 16px 18px; gap: 5px; }
  #v-market .market-pulse__title { font-size: 19px; }
  #v-market .market-pulse__desc { font-size: 12px; }
  #v-market .market-pulse__badge { min-height: 32px; }
}

/* 稿的手機版：乳公犢卡跨兩欄，玉米粒與黃豆粉各占一欄。
   三張都單欄會讓乳公犢那張的走勢線被壓成短短一段，看不出趨勢。 */
@media (max-width: 639px) {
  #v-market .mk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #v-market .mk-cards > .mk-card:first-child { grid-column: 1 / -1; }
  #v-market .mk-cards > .mk-card:not(:first-child) .mk-card__v b { font-size: 22px; }
}

/* ================================================================
   核對交付包時抓到的四個實測缺陷
   ================================================================ */

/* 1. 手機底部導覽初次載入看不到。
   .phone 只有 min-height:100vh 而沒有確定高度，於是 .scroll 的
   flex:1 + overflow-y:auto 從未生效——捲動的是整份文件，而 nav
   （position:absolute; bottom:0，包含塊是 .phone）被推到文件最底。
   實測 390×844：docH 3153px、nav top 3080，捲到頂完全看不到導覽。
   給 .phone 一個確定高度，.scroll 才會變成捲動容器、nav 才會釘在視窗底。
   用 100dvh 而非 100vh：行動瀏覽器的網址列會伸縮，100vh 會讓底部被切掉。 */
@media (max-width: 767px) {
  .phone { height: 100vh; height: 100dvh; }
}

/* 2. 行情頁頁名只有 16px。
   .rep-pagehd__t b 的字級規則只寫給 #v-report，#v-market 沿用了
   全域 <b> 的 16px —— 稿上是 30px，視覺層級第 1 級整個塌掉。 */
#v-market .rep-pagehd__t b {
  display: block; font-size: 30px; font-weight: 800;
  line-height: 1.18; letter-spacing: -.02em; color: var(--ink-950);
}
@media (max-width: 1439px) { #v-market .rep-pagehd__t b { font-size: 27px; } }
@media (max-width: 767px)  { #v-market .rep-pagehd__t b { font-size: 21px; } }

/* 3. 手機圖表的座標軸文字實際只有 4.26 CSS px。
   SVG 用 viewBox 0 0 760 250 縮放到 324px 寬（係數 0.426），
   宣告 font-size:10 的 <text> 有效字級就只剩 4.26px，根本讀不到。
   字級要用 user unit 反推：要 10 CSS px 就得宣告 10 ÷ 0.426 ≈ 23.5。 */
@media (max-width: 767px) {
  #v-market .mk-chart text { font-size: 23px; }
}
@media (min-width: 768px) and (max-width: 1239px) {
  /* 平板單欄時 SVG 渲染寬約 912px，係數 1.2 —— 反而偏大，收回來 */
  #v-market .mk-chart text { font-size: 9px; }
}

/* 4. 深色主題下焦點環看不見。
   --you-600 是我先前補的別名，指向 --brand-700，而 --brand-700 在深色主題
   沒有重新定義，於是兩個主題都是 #176b53，在深底上對比不足。
   改用本來就會隨主題翻色的 --brand-500（light #2b8a68 / dark #43a884）。 */
#v-market .mk-gb:focus-visible,
#v-market .mk-nb:focus-visible { outline-color: var(--brand-500); }

/* 5. 平板（1024）三張摘要卡排成 2+1、分析區未並列。
   tokens 的 summary_columns_tablet = 3、analytics_columns_tablet = 1.35fr/1fr。
   斷點原本卡在 1100 與 1240，1024×1366 這個規格指定的平板尺寸都沒吃到。 */
@media (min-width: 1000px) { #v-market .mk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) and (max-width: 1239px) {
  #v-market .mk-sec { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); align-items: start; }
  /* 表格卡在平板只剩約 383px，品項欄會被壓到換 4 行。走勢欄讓位、字級收一級。 */
  #v-market .mk-th, #v-market .mk-tr {
    /* 「較前一週」放 +12.3% 膠囊，量到最寬需 68px；原本 minmax(64px,...) 差 4px 就溢出 */
    grid-template-columns: minmax(0, 2.1fr) minmax(44px, .7fr) minmax(38px, .5fr) minmax(70px, .85fr) minmax(52px, 66px);
    gap: 8px; font-size: 11.5px;
  }
  #v-market .mk-tbl { padding: 14px 13px 12px; }
}

/* 6. 觸控目標 44px 的規則只寫在 max-width:767px，
   但 1024×1366 是平板（觸控裝置），那裡的按鈕實測只有 38×30 與 30×30。
   改用 pointer:coarse，讓所有觸控裝置一致命中，而不是綁螢幕寬度。 */
@media (pointer: coarse) {
  #v-market .mk-gb { min-height: 44px; min-width: 46px; }
  #v-market .mk-nb { width: 44px; height: 44px; }
}

/* A12：手機表格「較前一週」補回欄名——只補這一欄。
   +0.7% 旁邊沒有基期說明，使用者無從得知比的是什麼期間；
   品項／價格／單位三欄有自我語意，補標籤只會把列高再拉高一倍。 */
@media (max-width: 767px) {
  #v-market .mk-tr > .mk-c--chg::before {
    content: attr(data-l); font-size: 10px; font-weight: 600;
    color: var(--ink-600); margin-right: 5px;
  }
}
/* A13：more-row 改成 <button> 後要蓋掉瀏覽器預設外觀 */
.more-row { width: 100%; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
.more-row:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; border-radius: 10px; }

/* 第四層決策卡與圖例的配色（補齊 red/amber/green 已有、top 缺漏的那一組） */
#v-cull .cdec--top.on   { color: var(--cull-top); background: var(--brand-100); }
#v-cull .cdec--top .cdec__n { color: var(--cull-top); }
#v-cull .cull-lg--top   { color: var(--cull-top); }
#v-market .mk-basis {
  font-weight: 600; color: var(--ink-600); margin-left: 8px;
  padding-left: 8px; border-left: 1px solid var(--line-1); white-space: nowrap;
}
#v-cull .cull-donut__note {
  grid-column: 1 / -1; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--line-1); font-size: 10.5px; line-height: 1.6; color: var(--ink-600);
}

/* ═══════════════ 自選公牛（CDCB 全目錄挑選器）═══════════════
   疊在配種建議明細之上的工作台。沿用 .sheet--ws 的整頁式外觀，
   內部版位自成一套，不與 matesheet 共用 class 以免互相污染。 */

/* ---- 英雄卡 ----
   .page-hero 的幾何全部沿用，只調整這一頁的高度與遮罩落點：
   照片主體（公牛的頭）在右側 68%，遮罩要在 58% 之前收乾淨才不會壓到牛臉。 */
#v-sim .sim-hero { min-height: 232px; }
#v-sim .sim-hero .page-hero__content { padding: 26px 28px; align-self: center; }
#v-sim .sim-hero .page-hero__title { font-size: 27px; letter-spacing: .01em; }
#v-sim .sim-hero .page-hero__desc { max-width: 42ch; font-size: 13.5px; margin-top: 8px; }
/* 膠囊是「這頁能做什麼」的三句話，不是按鈕——所以用線框而非實心，
   也不做 hover 反應，免得農民一直點它。 */
#v-sim .sim-hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
/* gap 不是排版留白，是**詞距**：flex 容器會把匿名文字項前後的空白吃掉，
   「98,241」與「支公牛」會黏成一團。 */
#v-sim .sim-chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 20px;
  border-radius: var(--radius-pill); border: 1px solid rgb(255 255 255 / .42);
  background: rgb(255 255 255 / .06);
  font-size: 13px; font-weight: 700; color: #fff;
}
#v-sim .sim-chip em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  #v-sim .sim-hero { min-height: 286px; }
  #v-sim .sim-hero .page-hero__content { padding: 20px; }
  #v-sim .sim-hero .page-hero__title { font-size: 23px; }
  #v-sim .sim-hero .page-hero__desc br { display: none; }
  /* 全站的手機英雄遮罩是上→下的深綠（.page-hero__scrim 的 520px 斷點），
     那組是給「主體在畫面中央」的照片用的。這張的主體是右側那頭公牛，
     蓋上去牠就整隻不見了（實測手機版只剩一團暗影）。改成左上→右下的斜向，
     文字區照樣壓得住，右下角把牛留出來。 */
  #v-sim .sim-hero .page-hero__scrim {
    background: linear-gradient(155deg,
      rgb(5 51 40 / .94) 0%, rgb(5 51 40 / .88) 42%,
      rgb(5 51 40 / .55) 68%, rgb(5 51 40 / .18) 100%);
  }
  /* 公牛的頭在原圖最右緣。手機容器只看得到 667px 中的 375px，
     焦點放 74% 時窗口收在 89%，剛好把頭切掉，畫面上只剩四條腿。 */
  #v-sim .sim-hero .page-hero__media img { object-position: 95% 46%; }
}
#bpsheet .bp-crumb, #v-sim .bp-crumb {
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
  /* --ink-500 對白底只有 4.07:1，小字達不到 WCAG 1.4.3 的 4.5:1。
     整個自選公牛區塊的次要文字一律用 --ink-600（5.44:1）。 */
  font-size: 11.5px; font-weight: 600; color: var(--ink-600);
}
/* 分隔符與其他六個麵包屑一致用 --ink-500。它是純裝飾（層級由版位傳達），
   HTML 端加 aria-hidden 讓螢幕閱讀器不會念出「斜線」。 */
#bpsheet .bp-crumb i, #v-sim .bp-crumb i { font-style: normal; color: var(--ink-500); }
#bpsheet .bp-crumb b, #v-sim .bp-crumb b { color: var(--ink-900); }

#bpsheet .bp-hd, #v-sim .bp-hd { margin-bottom: 12px; }
#bpsheet .bp-hd__t, #v-sim .bp-hd__t { font-size: 17px; font-weight: 800; color: var(--ink-950); }
#bpsheet .bp-hd__t s, #v-sim .bp-hd__t s {
  display: block; text-decoration: none; margin-top: 3px;
  font-size: 12px; font-weight: 600; color: var(--ink-600);
}

/* 搜尋列：搜尋框（自帶深綠送出鈕）＋ 獨立的排序下拉。
   兩者不共用同一顆膠囊——排序不是搜尋條件，黏在一起會讓人以為它是。 */
#bpsheet .bp-searchrow, #v-sim .bp-searchrow {
  display: flex; align-items: stretch; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
#bpsheet .bp-search, #v-sim .bp-search {
  flex: 1 1 320px; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  padding-left: 14px; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--surface-0);
}
#bpsheet .bp-search:focus-within, #v-sim .bp-search:focus-within { border-color: var(--brand-700); }
#bpsheet .bp-search > [data-ic], #v-sim .bp-search > [data-ic] {
  flex: none; display: inline-flex; color: var(--ink-500);
}
#bpsheet .bp-search input, #v-sim .bp-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  min-height: 48px; font-size: 14px; font-weight: 600; color: var(--ink-950);
}
/* 送出鈕貼齊膠囊右緣（稿）：用 margin 負值吃掉 input 的內距，而不是拿掉
   .bp-search 的 padding——那會讓左側放大鏡也貼邊。 */
#bpsheet .bp-search__go, #v-sim .bp-search__go {
  flex: none; align-self: stretch; width: 54px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-900); color: #fff;
}
#bpsheet .bp-search__go:hover, #v-sim .bp-search__go:hover { background: var(--brand-800); }
#bpsheet .bp-search__go:focus-visible, #v-sim .bp-search__go:focus-visible { outline: 2px solid var(--brand-700); outline-offset: -3px; }
#bpsheet .bp-sort, #v-sim .bp-sort {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 0 14px; border-radius: var(--radius-md);
  border: 1px solid var(--line-strong); background: var(--surface-0);
}
#bpsheet .bp-sort s, #v-sim .bp-sort s {
  text-decoration: none; font-size: 11px; font-weight: 700; color: var(--ink-600); white-space: nowrap;
}
#bpsheet .bp-sort select, #v-sim .bp-sort select {
  border: 0; outline: 0; background: transparent; min-width: 0;
  min-height: 48px; font-size: 12.5px; font-weight: 700; color: var(--brand-800);
}

/* 篩選與「找到 N 支」同一塊白卡（稿）：數字是篩選的即時回饋。 */
#bpsheet .bp-filterbar, #v-sim .bp-filterbar {
  margin-bottom: 12px; padding: 11px 14px 10px; border-radius: var(--radius-md);
  border: 1px solid var(--line-1); background: var(--surface-0);
}
#bpsheet .bp-filters, #v-sim .bp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 14px; }
#bpsheet .bp-filters label, #v-sim .bp-filters label { display: flex; align-items: center; gap: 5px; }
#bpsheet .bp-filters s, #v-sim .bp-filters s {
  text-decoration: none; font-size: 11px; font-weight: 700; color: var(--ink-600);
}
#bpsheet .bp-filters select, #v-sim .bp-filters select {
  min-height: 36px; padding: 0 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: var(--surface-0);
  font-size: 12px; font-weight: 600; color: var(--ink-900);
  /* <select> 預設依「最長選項」決定寬度。原廠有 66 個選項，最長的會把它撐到
     413px，在 375px 的手機上直接被裁掉。夾住寬度，選項文字由瀏覽器自行截斷。 */
  max-width: 46vw; min-width: 0;
}
#bpsheet .bp-filters label, #v-sim .bp-filters label { min-width: 0; max-width: 100%; }
/* 勾選項比照配種建議頁的 .srcbox：整塊可點，觸控目標是膠囊本身 */
#bpsheet .bp-chk, #v-sim .bp-chk { position: relative; cursor: pointer; }
#bpsheet .bp-chk input, #v-sim .bp-chk input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#bpsheet .bp-chk i, #v-sim .bp-chk i {
  width: 15px; height: 15px; flex: none; border-radius: 4px;
  border: 1.5px solid var(--line-strong); background: var(--surface-0);
}
#bpsheet .bp-chk input:checked + i, #v-sim .bp-chk input:checked + i {
  background: var(--brand-700); border-color: var(--brand-700);
  box-shadow: inset 0 0 0 2px var(--surface-0);
}
#bpsheet .bp-chk input:focus-visible + i, #v-sim .bp-chk input:focus-visible + i { outline: 2px solid var(--brand-700); outline-offset: 2px; }
#bpsheet .bp-chk span, #v-sim .bp-chk span { font-size: 12px; font-weight: 600; color: var(--ink-800); }

#bpsheet .bp-count, #v-sim .bp-count {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-1);
  font-size: 12.5px; font-weight: 600; color: var(--ink-600);
}
#bpsheet .bp-count b, #v-sim .bp-count b {
  color: var(--ink-950); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}
/* 只在真的動過篩選時出現：預設狀態下按「清除」什麼也不會變，
   一顆按了沒反應的鈕比沒有那顆鈕更糟。 */
#bpsheet .bp-clearf, #v-sim .bp-clearf {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 0 14px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface-0);
  font-size: 12px; font-weight: 700; color: var(--ink-800);
}
#bpsheet .bp-clearf:hover:not(:disabled), #v-sim .bp-clearf:hover:not(:disabled) { background: var(--surface-soft); }
#bpsheet .bp-clearf:disabled, #v-sim .bp-clearf:disabled { opacity: .45; cursor: default; }
#bpsheet .bp-clearf:focus-visible, #v-sim .bp-clearf:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; }
/* 有分頁鈕時它先吃掉 margin-left:auto，清除鈕就得自己靠右 */
#bpsheet .bp-pager ~ .bp-clearf, #v-sim .bp-pager ~ .bp-clearf { margin-left: 0; }
#bpsheet .bp-note, #v-sim .bp-note { font-style: normal; color: var(--lbl-warn); font-weight: 700; }
#bpsheet .bp-pager, #v-sim .bp-pager { margin-left: auto; display: flex; gap: 6px; }
#bpsheet .bp-pager button, #v-sim .bp-pager button {
  min-width: 44px; min-height: 44px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface-0);
  font-size: 16px; font-weight: 800; color: var(--brand-700); cursor: pointer;
}
#bpsheet .bp-pager button:disabled, #v-sim .bp-pager button:disabled { opacity: .4; cursor: default; }

/* 浮動比較列（稿：白色膠囊浮在清單上方、置中）。
   sticky 而不是 fixed —— 整個 App 裝在 .phone 容器裡（桌機 1180px、左側欄
   240px），fixed 會錨到視窗而跑進側欄底下。sticky 保留自己在流程中的位置，
   所以捲到底時不會蓋住最後一列。
   bottom 要避開手機的底部導覽（56px + 安全區）。 */
#bpsheet .bp-cmpbar, #v-sim .bp-cmpbar {
  position: sticky; z-index: 6; bottom: calc(84px + env(safe-area-inset-bottom));
  /* max-content 不是 fit-content：fit-content 在會換行的 flex 容器上會塌成
     min-content（實測整條變成 24px 寬、353px 高的直條）。max-content 先算出
     不換行的寬度，再由 max-width 夾住並允許換行。 */
  width: max-content; max-width: 100%; margin: 14px auto 4px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 10px 9px 12px; border-radius: var(--radius-pill);
  background: var(--surface-0); border: 1px solid var(--line-1);
  box-shadow: var(--shadow-md);
  font-size: 13px; color: var(--ink-900);
}
#bpsheet .bp-cmpbar b, #v-sim .bp-cmpbar b { font-weight: 700; color: var(--ink-800); }
#bpsheet .bp-cmpbar__ph, #v-sim .bp-cmpbar__ph { display: flex; }
#bpsheet .bp-cmpbar__ph span, #v-sim .bp-cmpbar__ph span {
  width: 42px; height: 34px; flex: none; border-radius: 8px; overflow: hidden;
  border: 2px solid var(--surface-0); background: var(--surface-soft);
  margin-left: -8px; box-shadow: 0 1px 2px rgb(18 38 30 / .12);
}
#bpsheet .bp-cmpbar__ph span:first-child, #v-sim .bp-cmpbar__ph span:first-child { margin-left: 0; }
#bpsheet .bp-cmpbar__ph img, #v-sim .bp-cmpbar__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
#bpsheet .bp-cmpbar__ph .is-more, #v-sim .bp-cmpbar__ph .is-more {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-100); color: var(--brand-800);
  font-size: 12px; font-weight: 800;
}
@media (min-width: 768px) {
  #bpsheet .bp-cmpbar, #v-sim .bp-cmpbar { bottom: 20px; }
}
/* 手機：整條必須排成一行（稿 M01）。換成兩行時 CTA 會掉下去蓋住候選卡的
   「詳情」，正是 README 驗收項目明文禁止的。所以縮小內距與縮圖、禁止換行。 */
@media (max-width: 767px) {
  #bpsheet .bp-cmpbar, #v-sim .bp-cmpbar {
    flex-wrap: nowrap; width: 100%; gap: 8px; padding: 8px 8px 8px 10px; font-size: 12.5px;
  }
  #bpsheet .bp-cmpbar b, #v-sim .bp-cmpbar b { white-space: nowrap; }
  #bpsheet .bp-cmpbar__ph span, #v-sim .bp-cmpbar__ph span { width: 34px; height: 28px; margin-left: -10px; }
  #bpsheet .bp-cmpbar .bp-btn, #v-sim .bp-cmpbar .bp-btn { white-space: nowrap; padding: 0 12px; }
  #bpsheet .bp-cmpbar .bp-btn.is-coral, #v-sim .bp-cmpbar .bp-btn.is-coral { padding: 0 14px; font-size: 12.5px; }
}

#bpsheet .bp-btn, #v-sim .bp-btn {
  min-height: 36px; padding: 0 12px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid var(--brand-700); background: var(--brand-700);
  font-size: 12px; font-weight: 700; color: #fff;
}
#bpsheet .bp-btn.is-ghost, #v-sim .bp-btn.is-ghost { background: transparent; color: var(--brand-700); }
/* 珊瑚橘＝全站唯一的主要行動色（design-system §4）。這一頁只有「開啟規格比較」
   與明細抽屜的「採用這支公牛」用它，其餘一律深綠，否則主行動就不再顯眼。 */
#bpsheet .bp-btn.is-coral, #v-sim .bp-btn.is-coral {
  min-height: 42px; padding: 0 20px; font-size: 13.5px; font-weight: 800;
  background: var(--coral-cta); border-color: var(--coral-cta);
}
#bpsheet .bp-btn.is-coral:hover, #v-sim .bp-btn.is-coral:hover { background: var(--coral-solid); border-color: var(--coral-solid); }
/* 只給螢幕閱讀器的欄名（「操作」欄視覺上不需要標題，但表格需要） */
#bpsheet .bp-sr, #v-sim .bp-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
#bpsheet .bp-btn.is-cta, #v-sim .bp-btn.is-cta { min-height: 44px; padding: 0 18px; font-size: 13px; }
#bpsheet .bp-btn.is-on, #v-sim .bp-btn.is-on {
  min-height: 44px; padding: 0 18px; font-size: 13px;
  background: var(--surface-2); border-color: var(--line-strong); color: var(--ink-700);
}
#bpsheet .bp-btn, #v-sim .bp-btn:focus-visible { outline: 2px solid var(--brand-800); outline-offset: 2px; }

/* ---- 候選公牛表 ----
   稿上是一張有欄頭的表格（比較／公牛／NM$／乳量 PTA／女兒預估／配對近親／操作），
   不是一疊卡片：農民在這裡做的事是**跨列比同一個數字**，欄頭寫一次、
   數字對齊同一條垂直線，才掃得動。手機改回卡片（見檔尾 @media）。 */
#bpsheet .bp-list, #v-sim .bp-list {
  border-radius: var(--radius-md); border: 1px solid var(--line-1);
  background: var(--surface-0); overflow: hidden;
}
#bpsheet .bp-tbl, #v-sim .bp-tbl { width: 100%; border-collapse: collapse; }
#bpsheet .bp-tbl thead th, #v-sim .bp-tbl thead th {
  padding: 11px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line-1); background: var(--surface-warm);
  font-size: 11.5px; font-weight: 700; color: var(--ink-600);
}
#bpsheet .bp-tbl thead th:first-child, #v-sim .bp-tbl thead th:first-child,
#bpsheet .bp-tbl thead th:nth-child(2), #v-sim .bp-tbl thead th:nth-child(2) { text-align: left; }
/* 欄寬寫死，只留「公牛」那欄彈性。不釘住的話，NAAB 碼一次掛三個
   （實測最長「007HO17419 / 507HO17419 / 509HO17419」）會把身分欄撐開，
   右邊的數字欄與「詳情」被擠到換行成「詳／情」兩個字疊起來。 */
#bpsheet .bp-tbl thead th:first-child, #v-sim .bp-tbl thead th:first-child { padding-left: 14px; width: 56px; }
#bpsheet .bp-tbl thead th:nth-child(3), #v-sim .bp-tbl thead th:nth-child(3) { width: 92px; }
#bpsheet .bp-tbl thead th:nth-child(4), #v-sim .bp-tbl thead th:nth-child(4),
#bpsheet .bp-tbl thead th:nth-child(5), #v-sim .bp-tbl thead th:nth-child(5) { width: 116px; }
#bpsheet .bp-tbl thead th:nth-child(6), #v-sim .bp-tbl thead th:nth-child(6) { width: 124px; }
#bpsheet .bp-tbl thead th:last-child, #v-sim .bp-tbl thead th:last-child { padding-right: 14px; width: 92px; }
#bpsheet .bp-empty, #v-sim .bp-empty {
  padding: 26px 12px; text-align: center;
  font-size: 12.5px; font-weight: 600; color: var(--ink-600);
}
#bpsheet .bp-row > *, #v-sim .bp-row > * {
  padding: 10px; border-bottom: 1px solid var(--line-1); vertical-align: middle;
}
#bpsheet .bp-tbl tbody tr:last-child > *, #v-sim .bp-tbl tbody tr:last-child > * { border-bottom: 0; }
#bpsheet .bp-row:hover > *, #v-sim .bp-row:hover > * { background: var(--surface-warm); }
/* 勾選中的列**不**整列上色（稿也沒有）：--brand-100 正好是近親徽章的底色，
   整列鋪上去徽章就消失了，而那顆徽章是這一頁最該看見的東西。
   選取狀態由深綠實心的核取方塊與底部浮動列負責，已經夠明確。 */
#bpsheet .bp-row.is-cmp > *, #v-sim .bp-row.is-cmp > * { box-shadow: inset 3px 0 0 var(--brand-900); }
#bpsheet .bp-row.is-cmp > * ~ *, #v-sim .bp-row.is-cmp > * ~ * { box-shadow: none; }
#bpsheet .bp-row__pickc, #v-sim .bp-row__pickc { padding-left: 14px !important; width: 56px; }
#bpsheet .bp-row__pick, #v-sim .bp-row__pick { position: relative; display: flex; cursor: pointer; }
#bpsheet .bp-row__pick input, #v-sim .bp-row__pick input { position: absolute; inset: -11px; opacity: 0; cursor: pointer; }
#bpsheet .bp-row__pick i, #v-sim .bp-row__pick i {
  width: 20px; height: 20px; border-radius: 5px;
  border: 1.5px solid var(--line-strong); background: var(--surface-0);
}
/* 勾選＝深綠實心＋白勾（稿）。白勾用 ::after 的兩條邊框畫，
   不另外塞一個 <svg>——否則每列都要多跑一次 paintIcons。 */
#bpsheet .bp-row__pick i, #v-sim .bp-row__pick i { position: relative; }
#bpsheet .bp-row__pick input:checked + i, #v-sim .bp-row__pick input:checked + i {
  background: var(--brand-900); border-color: var(--brand-900);
}
#bpsheet .bp-row__pick input:checked + i::after, #v-sim .bp-row__pick input:checked + i::after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
#bpsheet .bp-row__pick input:focus-visible + i, #v-sim .bp-row__pick input:focus-visible + i {
  outline: 2px solid var(--brand-700); outline-offset: 2px;
}
#bpsheet .bp-row__idc, #v-sim .bp-row__idc {
  text-align: left; font-weight: 400;
}
#bpsheet .bp-row__idc > *, #v-sim .bp-row__idc > * { vertical-align: middle; }
#bpsheet .bp-row__ph, #v-sim .bp-row__ph {
  display: inline-block; width: 54px; height: 42px; margin-right: 11px; flex: none;
  border-radius: 8px; overflow: hidden; background: var(--surface-soft);
}
#bpsheet .bp-row__ph img, #v-sim .bp-row__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
#bpsheet .bp-row__id, #v-sim .bp-row__id { display: inline-block; min-width: 0; max-width: calc(100% - 68px); }
#bpsheet .bp-row__id b, #v-sim .bp-row__id b {
  display: block; font-size: 13.5px; font-weight: 800; color: var(--ink-950);
  letter-spacing: .01em; overflow-wrap: anywhere;
}
#bpsheet .bp-row__id em, #v-sim .bp-row__id em {
  display: block; font-style: normal; margin-top: 2px;
  font-size: 11px; font-weight: 600; color: var(--ink-600); overflow-wrap: anywhere;
}
#bpsheet .bp-row__id em i, #v-sim .bp-row__id em i { font-style: normal; color: var(--ink-500); }
#bpsheet .bp-row__n, #v-sim .bp-row__n {
  text-align: right; white-space: nowrap;
  font-size: 15px; font-weight: 800; color: var(--ink-950); font-variant-numeric: tabular-nums;
}
#bpsheet .bp-row__n u, #v-sim .bp-row__n u {
  text-decoration: none; font-size: 11px; font-weight: 600; color: var(--ink-600);
}
#bpsheet .bp-row__f, #v-sim .bp-row__f { text-align: right; white-space: nowrap; }
#bpsheet .bp-row__act, #v-sim .bp-row__act { text-align: right; padding-right: 14px !important; }
#bpsheet .bp-row__more, #v-sim .bp-row__more {
  min-height: 38px; padding: 0 16px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface-0);
  font-size: 12.5px; font-weight: 700; color: var(--brand-800); white-space: nowrap;
}
#bpsheet .bp-row__more:hover, #v-sim .bp-row__more:hover { background: var(--brand-100); border-color: var(--brand-700); }
#bpsheet .bp-row__more:focus-visible, #v-sim .bp-row__more:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; }

/* 近親徽章。色階與配種建議頁的公牛卡一致（fTone），同一個 F 不會兩種顏色。
   is-na＝系譜查無：不上色也不寫數字，那是「沒查到」不是「沒有近親」。 */
#bpsheet .bp-f, #v-sim .bp-f {
  display: inline-flex; align-items: baseline; gap: 5px;
  margin-top: 1px; padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--brand-100); color: var(--brand-800);
}
/* 低／注意／高。WCAG 1.4.1：風險不能只用顏色講，所以三個色階各帶一個字。 */
#bpsheet .bp-f i, #v-sim .bp-f i { font-style: normal; font-size: 11.5px; font-weight: 700; opacity: .92; }
/* --amber-700 在 --amber-100 上只有 3.93:1，小字達不到 4.5。改用語意相同、
   對比 5.01:1 的 --lbl-warn。既有的 .mtb__f.warn 也是同一組配色，一併修。 */
#bpsheet .bp-f.warn, #v-sim .bp-f.warn { background: var(--amber-100); color: var(--lbl-warn); }
#bpsheet .bp-f.bad, #v-sim .bp-f.bad { background: var(--bad-50); color: var(--bad-700); }
#bpsheet .bp-f.is-na, #v-sim .bp-f.is-na, #bpsheet .bp-f.is-wait, #v-sim .bp-f.is-wait {
  background: var(--surface-2); color: var(--ink-600); font-weight: 700; font-size: 11px;
}

#bpsheet .bp-panel, #v-sim .bp-panel {
  margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-md);
  border: 1px solid var(--line-strong); background: var(--surface-0);
}

/* ---- 明細／比較的伸縮頁（只在獨立分頁）----
   稿是「內容區右側的 slide-over」。只套 #v-sim，不套 #bpsheet：後者本身
   已經是一層覆蓋層，在裡面再開一層抽屜會疊成兩層遮罩。
   :has() 用來偵測「面板有沒有內容」——host 由 bpRender 產生、內容由
   bpPanelPaint/bpComparePaint 事後寫入，沒有一個時機點可以在 host 上加 class
   而不動到那兩個函式的回傳契約。 */
#v-sim .bp-panelhost:has(.bp-panel) {
  position: fixed; inset: 0; z-index: 60;
  display: flex; justify-content: flex-end;
  background: rgb(6 40 32 / .36);
  animation: bpFade var(--duration-fast, .18s) var(--ease-standard, ease-out);
}
/* 1180px 是 README 的建議寬；68vw 是給 1280–1600 螢幕的夾子——不夾住的話
   在 1600 寬的筆電上抽屜會吃掉 76% 的畫面，背後的候選清單完全看不到，
   而「還能看到自己剛才在挑什麼」正是側邊抽屜相對於整頁的唯一好處。 */
#v-sim .bp-panelhost:has(.bp-panel) > .bp-panel {
  width: min(1180px, 68vw); max-width: 100%; height: 100%;
  margin: 0; border: 0; border-radius: 0; overflow-y: auto;
  padding: 20px 26px calc(20px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-panel);
  animation: bpSlideIn 220ms var(--ease-standard, ease-out);
}
/* 採用／加入比較固定在抽屜底部（稿 D02）：明細有 5,000 多字，
   把主要行動留在最後一行等於要農民先讀完才准決定。 */
#v-sim .bp-panelhost:has(.bp-panel) .bp-panel__act {
  position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); z-index: 2;
  margin: 16px -26px calc(-20px - env(safe-area-inset-bottom));
  padding: 14px 26px calc(14px + env(safe-area-inset-bottom));
  background: var(--surface-0); border-top: 1px solid var(--line-1);
}
#v-sim .bp-panelhost:has(.bp-panel) .bp-panel__act .bp-btn { flex: 1; min-height: 48px; font-size: 14px; }
#v-sim .bp-panelhost:has(.bp-panel) .bp-panel__act .bp-btn.is-cta {
  background: var(--coral-cta); border-color: var(--coral-cta); font-weight: 800;
}
#v-sim .bp-panelhost:has(.bp-panel) .bp-panel__act .bp-btn.is-ghost {
  border-color: var(--brand-700); background: var(--surface-0);
}
/* 標題列黏在抽屜頂端：內容有 5,000+ 字，捲到一半時「這是哪支公牛」與
   關閉鈕都不能消失。 */
#v-sim .bp-panelhost:has(.bp-panel) .bp-panel__hd {
  position: sticky; top: -20px; z-index: 2;
  margin: -20px -26px 12px; padding: 18px 26px 12px;
  background: var(--surface-0);
}
@keyframes bpFade { from { opacity: 0; } }
@keyframes bpSlideIn { from { transform: translateX(28px); opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  #v-sim .bp-panelhost:has(.bp-panel),
  #v-sim .bp-panelhost:has(.bp-panel) > .bp-panel { animation: none; }
}
/* 手機是接近全螢幕的底部 sheet（稿 M02/M03），並讓出底部導覽的高度。 */
@media (max-width: 767px) {
  #v-sim .bp-panelhost:has(.bp-panel) { align-items: flex-end; justify-content: center; }
  #v-sim .bp-panelhost:has(.bp-panel) > .bp-panel {
    width: 100%; height: 94vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  }
  #v-sim .bp-panelhost:has(.bp-panel) .bp-panel__hd {
    top: -16px; margin: -16px -16px 12px; padding: 14px 16px 12px;
  }
}
/* 抽屜開著時鎖住背景捲動（否則滾輪會捲到下面那張表）。 */
.scroll.is-bplock { overflow: hidden; }
#bpsheet .bp-panel__hd, #v-sim .bp-panel__hd {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line-2);
}
#bpsheet .bp-panel__hd > div, #v-sim .bp-panel__hd > div { flex: 1; min-width: 0; }
#bpsheet .bp-panel__hd b, #v-sim .bp-panel__hd b { display: block; font-size: 15px; font-weight: 800; color: var(--ink-950); }
#bpsheet .bp-panel__hd s, #v-sim .bp-panel__hd s {
  display: block; text-decoration: none; margin-top: 2px;
  font-size: 11.5px; font-weight: 700; color: var(--brand-700);
}
#bpsheet .bp-panel__hd .x, #v-sim .bp-panel__hd .x {
  flex: none; width: 36px; height: 36px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface-0);
  font-size: 18px; font-weight: 700; color: var(--ink-600);
}
#bpsheet .bp-panel__kpi, #v-sim .bp-panel__kpi { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 10px; }
#bpsheet .bp-panel__kpi small, #v-sim .bp-panel__kpi small { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-600); }
#bpsheet .bp-panel__kpi b, #v-sim .bp-panel__kpi b {
  display: block; margin-top: 2px; font-size: 17px; font-weight: 800;
  color: var(--ink-950); font-variant-numeric: tabular-nums;
}
#bpsheet .bp-panel__cx, #v-sim .bp-panel__cx {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-600);
}
#bpsheet .bp-panel__cx b, #v-sim .bp-panel__cx b { color: var(--ink-900); font-variant-numeric: tabular-nums; }
#bpsheet .bp-panel__ags, #v-sim .bp-panel__ags {
  margin-bottom: 10px; font-size: 11.5px; font-weight: 600; color: var(--ink-600);
}
#bpsheet .bp-panel__ags i, #v-sim .bp-panel__ags i {
  display: inline-block; font-style: normal; margin: 2px 4px 0 0; padding: 2px 8px;
  border-radius: 999px; background: var(--surface-2); color: var(--ink-800); font-weight: 700;
}
#bpsheet .bp-panel__ags em, #v-sim .bp-panel__ags em {
  display: block; font-style: normal; margin-top: 4px; font-size: 10.5px; color: var(--ink-600);
}
#bpsheet .bp-spec, #v-sim .bp-spec { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
#bpsheet .bp-spec__g h4, #v-sim .bp-spec__g h4 {
  margin: 0 0 4px; font-size: 11px; font-weight: 800; color: var(--ink-600);
  letter-spacing: .04em;
}
#bpsheet .bp-spec__r, #v-sim .bp-spec__r {
  display: flex; justify-content: space-between; gap: 10px; padding: 3px 0;
  border-bottom: 1px dashed var(--line-2); font-size: 12px;
}
#bpsheet .bp-spec__r span, #v-sim .bp-spec__r span { color: var(--ink-600); font-weight: 600; }
#bpsheet .bp-spec__r b, #v-sim .bp-spec__r b {
  color: var(--ink-950); font-weight: 800; font-variant-numeric: tabular-nums;
  text-align: right; overflow-wrap: anywhere;
}
#bpsheet .bp-panel__act, #v-sim .bp-panel__act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* 規格比較表。欄數隨選取數量變動，一定要能橫向捲動而不是把頁面撐破。 */
#bpsheet .bp-cmp__scroll, #v-sim .bp-cmp__scroll { overflow-x: auto; }
#bpsheet .bp-cmp__t, #v-sim .bp-cmp__t { width: 100%; border-collapse: collapse; font-size: 12px; }
#bpsheet .bp-cmp__t th, #v-sim .bp-cmp__t th,
#bpsheet .bp-cmp__t td, #v-sim .bp-cmp__t td {
  padding: 5px 8px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line-2);
}
#bpsheet .bp-cmp__t th:first-child, #v-sim .bp-cmp__t th:first-child,
#bpsheet .bp-cmp__t td:first-child, #v-sim .bp-cmp__t td:first-child {
  text-align: left; position: sticky; left: 0; background: var(--surface-0);
  color: var(--ink-600); font-weight: 600; white-space: normal; min-width: 118px;
}
#bpsheet .bp-cmp__t thead th, #v-sim .bp-cmp__t thead th { vertical-align: bottom; }
#bpsheet .bp-cmp__t thead b, #v-sim .bp-cmp__t thead b { display: block; font-size: 12px; font-weight: 800; color: var(--ink-950); }
#bpsheet .bp-cmp__t thead s, #v-sim .bp-cmp__t thead s {
  display: block; text-decoration: none; font-size: 10.5px; color: var(--brand-700); font-weight: 700;
}
#bpsheet .bp-cmp__t td, #v-sim .bp-cmp__t td { font-variant-numeric: tabular-nums; color: var(--ink-900); }
#bpsheet .bp-cmp__t td.is-best, #v-sim .bp-cmp__t td.is-best { background: var(--you-50); font-weight: 800; color: var(--ink-950); }
/* 「最佳」二字（WCAG 1.4.1：不可只用顏色）。跟數字同一格、字級退一階，
   讓數字仍是主角。 */
#bpsheet .bp-cmp__t td.is-best i, #v-sim .bp-cmp__t td.is-best i {
  font-style: normal; margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--brand-800);
}
/* 比較欄頭的公牛縮圖與「移除這一欄」（稿 D03） */
#bpsheet .bp-cmp__t thead th, #v-sim .bp-cmp__t thead th { position: relative; }
#bpsheet .bp-cmp__ph, #v-sim .bp-cmp__ph {
  display: block; width: 86px; height: 64px; margin: 0 0 7px auto;
  border-radius: 8px; overflow: hidden; background: var(--surface-soft);
}
#bpsheet .bp-cmp__ph img, #v-sim .bp-cmp__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
#bpsheet .bp-cmp__x, #v-sim .bp-cmp__x {
  position: absolute; top: 4px; right: 2px; width: 30px; height: 30px; cursor: pointer;
  border: 0; border-radius: 50%; background: transparent;
  font-size: 17px; line-height: 1; color: var(--ink-600);
}
#bpsheet .bp-cmp__x:hover, #v-sim .bp-cmp__x:hover { background: var(--surface-soft); color: var(--ink-950); }
#bpsheet .bp-cmp__x:focus-visible, #v-sim .bp-cmp__x:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 1px; }
#bpsheet .bp-cmp__ft, #v-sim .bp-cmp__ft {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-1);
}
#bpsheet .bp-cmp__ft p, #v-sim .bp-cmp__ft p {
  flex: 1; min-width: 220px; margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-600);
}
#bpsheet .bp-cmp__t tr.is-hi td, #v-sim .bp-cmp__t tr.is-hi td { background: var(--brand-100); font-weight: 700; }
#bpsheet .bp-cmp__t tr.is-hi td:first-child, #v-sim .bp-cmp__t tr.is-hi td:first-child { background: var(--brand-100); }
#bpsheet .bp-cmp__g td, #v-sim .bp-cmp__g td {
  background: var(--surface-2); font-weight: 800; font-size: 11px;
  color: var(--ink-600); text-align: left !important;
}

/* 配種建議明細裡的入口與「已採用」提示 */
#matesheet .mt-pickbtn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid var(--brand-700); background: var(--surface-0);
  font-size: 12.5px; font-weight: 700; color: var(--brand-700);
}
#matesheet .mt-pickbtn:hover { background: var(--brand-100); }
#matesheet .mt-pickbtn:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; }
#matesheet .mt-manual {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--you-50); border: 1px solid var(--you-600);
  font-size: 12.5px; font-weight: 600; color: var(--ink-900);
}
#matesheet .mt-manual b { font-weight: 800; }
#matesheet .mt-manual button {
  margin-left: auto; min-height: 36px; padding: 0 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--you-600); background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--you-600);
}

@media (max-width: 767px) {
  /* 手機：七欄的表格在 390px 上排不出來（光是四個數字欄就要 312px）。
     整張表退成單欄卡片——tbody 的 tr 變卡片，td 變成「欄名：值」兩端對齊的一行，
     欄名由 data-l 用 ::before 帶出（thead 在這裡看不見，但仍留給螢幕閱讀器）。
     稿上的手機版正是這個排法。 */
  #bpsheet .bp-list, #v-sim .bp-list { border: 0; background: transparent; overflow: visible; }
  #bpsheet .bp-tbl, #v-sim .bp-tbl,
  #bpsheet .bp-tbl tbody, #v-sim .bp-tbl tbody { display: block; }
  #bpsheet .bp-tbl thead, #v-sim .bp-tbl thead { display: none; }
  #bpsheet .bp-row, #v-sim .bp-row {
    display: grid; align-items: center; gap: 0 10px; margin-bottom: 8px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-areas: "pick id act" "n n n";
    padding: 11px 12px; border-radius: var(--radius-md);
    border: 1px solid var(--line-1); background: var(--surface-0);
  }
  #bpsheet .bp-row > *, #v-sim .bp-row > * { display: block; padding: 0; border-bottom: 0; }
  #bpsheet .bp-row:hover > *, #v-sim .bp-row:hover > * { background: transparent; }
  /* 卡片維持白底：--brand-100 正是近親徽章的底色，鋪滿整張卡徽章就消失了。
     選取狀態改由 2px 深綠外框表示（桌機那條 inset 左邊線在卡片版會變成
     一小截浮在核取方塊旁的綠條，看起來像壞掉，故清掉）。 */
  #bpsheet .bp-row.is-cmp, #v-sim .bp-row.is-cmp {
    border-color: var(--brand-900); box-shadow: inset 0 0 0 1px var(--brand-900);
  }
  #bpsheet .bp-row.is-cmp > *, #v-sim .bp-row.is-cmp > * { background: transparent; box-shadow: none; }
  #bpsheet .bp-row__pickc, #v-sim .bp-row__pickc { grid-area: pick; padding-left: 0 !important; width: auto; }
  #bpsheet .bp-row__idc, #v-sim .bp-row__idc { grid-area: id; }
  #bpsheet .bp-row__act, #v-sim .bp-row__act { grid-area: act; padding-right: 0 !important; }
  #bpsheet .bp-row__ph, #v-sim .bp-row__ph { width: 46px; height: 38px; margin-right: 9px; }
  #bpsheet .bp-row__id, #v-sim .bp-row__id { max-width: calc(100% - 58px); }
  /* 四個數值欄合成一條，欄名走 ::before —— thead 隱藏後它們就沒有標題了。
     用 flex-end + ::before 吃 auto margin，不用 space-between：後者會把
     「+704」和它的單位「kg」當成兩個獨立項推到兩端（實測就是這樣裂開的）。 */
  #bpsheet .bp-row__n, #v-sim .bp-row__n, #bpsheet .bp-row__f, #v-sim .bp-row__f {
    grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: flex-end; gap: 3px;
    margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line-1) !important;
    text-align: right; font-size: 14px;
  }
  #bpsheet .bp-row__n::before, #v-sim .bp-row__n::before,
  #bpsheet .bp-row__f::before, #v-sim .bp-row__f::before {
    content: attr(data-l); margin-right: auto;
    font-size: 11.5px; font-weight: 700; color: var(--ink-600);
  }
  #matesheet .mt-pickbtn { margin-left: 0; width: 100%; justify-content: center; min-height: 44px; }
}

/* ---- 自選公牛（獨立分頁版）----
   與抽屜版共用 #bpsheet 的 .bp-* 版位，故整組選擇器要同時涵蓋 #v-sim。
   差別只有：分頁版多一列「選哪頭母牛」，且沒有麵包屑與抽屜標題。 */
/* 母牛脈絡列。這一頁的每一個數字都是「這頭母牛 × 這支公牛」，
   所以誰是那頭母牛必須一眼看得到——稿上把牠做成一條有頭像的橫幅。 */
#v-sim .bp-cowbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 12px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--line-1); background: var(--surface-0);
}
#v-sim .bp-cowbar__av {
  flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  background: var(--surface-soft); border: 2px solid var(--brand-100);
}
#v-sim .bp-cowbar__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
#v-sim .bp-cowbar__sel { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#v-sim .bp-cowbar__sel s {
  text-decoration: none; padding-left: 11px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-600); white-space: nowrap;
}
/* 牛號本身就是標題級的資訊，所以 select 拿掉外框、只留下拉箭頭；
   外框改由整條 .bp-cowbar 提供。 */
#v-sim .bp-cowbar__sel select {
  max-width: min(52vw, 300px); min-width: 0; padding: 0 4px 0 8px;
  border: 0; background: transparent;
  font-size: 17px; font-weight: 800; color: var(--ink-950); letter-spacing: .01em;
}
#v-sim .bp-cowbar__sel select:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; border-radius: 6px; }
#v-sim .bp-cowbar__nav { display: flex; align-items: center; gap: 6px; margin-left: 6px; }
#v-sim .bp-cowbar__nav button {
  min-width: 44px; min-height: 44px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface-0);
  font-size: 16px; font-weight: 800; color: var(--brand-800);
}
#v-sim .bp-cowbar__nav button:hover:not(:disabled) { background: var(--brand-100); }
#v-sim .bp-cowbar__nav button:disabled { opacity: .4; cursor: default; }
#v-sim .bp-cowbar__nav span {
  min-width: 62px; text-align: center; font-size: 13px; font-weight: 700;
  color: var(--ink-800); font-variant-numeric: tabular-nums;
}
/* KPI 做成兩張小白框（稿），不是裸文字：它們是「這頭母牛的事實」，
   與左邊的身分區、右邊的採用狀態是三件不同的事，要看得出分界。 */
#v-sim .bp-cowbar__kpi { display: flex; gap: 10px; margin-left: auto; }
#v-sim .bp-cowbar__kpi > div {
  min-width: 96px; padding: 6px 14px; text-align: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line-1); background: var(--surface-warm);
}
#v-sim .bp-cowbar__kpi small { display: block; font-size: 11px; font-weight: 600; color: var(--ink-600); }
#v-sim .bp-cowbar__kpi b {
  display: block; margin-top: 1px; font-size: 17px; font-weight: 800;
  color: var(--ink-950); font-variant-numeric: tabular-nums;
}
#v-sim .bp-cowbar__kpi u { text-decoration: none; font-size: 11.5px; font-weight: 600; color: var(--ink-600); }
/* 沒有實測時，在整條牛號列下方補一行原因（943 頭 / 129 場會走到）。
   放在 kpi 小白框裡會擠爆 96px，所以獨立成一行、佔滿寬度。 */
#v-sim .bp-cowbar__why {
  flex-basis: 100%; margin-top: 8px; padding: 8px 10px;
  font-size: 11.5px; line-height: 1.5; color: var(--ink-700);
  background: var(--surface-risk); border-radius: var(--radius-sm);
}
#v-sim .bp-cowbar__on {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 8px 8px 14px; border-radius: var(--radius-pill);
  background: var(--brand-100); border: 1px solid var(--brand-100);
  font-size: 12.5px; font-weight: 600; color: var(--brand-800);
}
#v-sim .bp-cowbar__on b { font-weight: 800; color: var(--brand-900); }
#v-sim .bp-cowbar__on button {
  width: 28px; height: 28px; flex: none; margin-left: 2px; cursor: pointer;
  border: 0; border-radius: 50%; background: transparent;
  font-size: 17px; line-height: 1; color: var(--brand-800);
}
#v-sim .bp-cowbar__on button:hover { background: rgb(6 56 45 / .10); }
#v-sim .bp-cowbar__on button:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 1px; }

@media (max-width: 767px) {
  #v-sim .bp-cowbar { gap: 10px; padding: 11px 12px; }
  /* 牛號與上下一頭要在同一行（稿 M01）：把 select 的上限放寬成可壓縮，
     不然 min(52vw,300px) 會把 nav 擠到第二行。 */
  #v-sim .bp-cowbar__sel { flex: 1 1 auto; }
  #v-sim .bp-cowbar__sel select { max-width: 100%; }
  #v-sim .bp-cowbar__nav { margin-left: auto; gap: 4px; }
  #v-sim .bp-cowbar__nav button { min-width: 40px; }
  #v-sim .bp-cowbar__nav span { min-width: 52px; }
  #v-sim .bp-cowbar__kpi { margin-left: 0; flex: 1 1 100%; }
  #v-sim .bp-cowbar__kpi > div { flex: 1; min-width: 0; padding: 6px 8px; }
  #v-sim .bp-cowbar__on { flex: 1 1 100%; }
}

/* ---- 模式切換（單頭挑選／批次試算）＋ 流程步驟指示 ---- */
#v-sim .bp-moderow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
#v-sim .bp-modebar {
  display: inline-flex; gap: 4px; padding: 4px;
  border-radius: var(--radius-pill); border: 1px solid var(--line-1);
  background: var(--surface-0);
}
#v-sim .bp-modebar button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 26px; border: 0; cursor: pointer;
  border-radius: var(--radius-pill); background: transparent;
  font-size: 13.5px; font-weight: 700; color: var(--ink-600);
}
#v-sim .bp-modebar button [data-ic] { display: inline-flex; }
#v-sim .bp-modebar button:hover:not(.is-on) { background: var(--surface-soft); }
/* 選中＝深綠實心白字（稿）。原本是白底綠字，在暖白頁面上兩個分頁看起來
   幾乎一樣重，看不出現在在哪個模式。 */
#v-sim .bp-modebar button.is-on {
  background: var(--brand-950); color: #fff; font-weight: 800;
  box-shadow: 0 1px 3px rgb(18 38 30 / .18);
}
#v-sim .bp-modebar button:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 1px; }
#v-sim .bp-step { margin-left: auto; display: flex; align-items: baseline; gap: 8px; }
#v-sim .bp-step s { text-decoration: none; font-size: 12px; font-weight: 600; color: var(--ink-600); }
#v-sim .bp-step b { font-size: 14.5px; font-weight: 800; color: var(--ink-950); }
@media (max-width: 767px) {
  /* 手機兩顆各佔一半（稿 M01）：靠字寬決定寬度時「單頭挑選」會比
     「批次試算」窄一截，看起來像是誤觸了選中狀態。 */
  #v-sim .bp-modebar { display: flex; width: 100%; }
  #v-sim .bp-modebar button { flex: 1; padding: 0 10px; }
  #v-sim .bp-step { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* ---- 批次試算：N 頭母牛 × 這場候選公牛 ---- */
#v-sim .bp-batchbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 9px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--line-strong); background: var(--surface-0);
}
#v-sim .bp-batchbar__n { font-size: 12.5px; font-weight: 600; color: var(--ink-600); }
#v-sim .bp-batchbar__n b { font-weight: 800; color: var(--ink-950); }
#v-sim .bp-batchbar__b { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
#v-sim .bp-batchbar__b button {
  min-height: 38px; padding: 0 12px; cursor: pointer;
  border-radius: var(--radius-pill); border: 1px solid var(--brand-700);
  background: var(--surface-0); font-size: 12.5px; font-weight: 700; color: var(--brand-700);
}
#v-sim .bp-batchbar__b button:hover { background: var(--brand-100); }
#v-sim .bp-batchbar__b button:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; }

/* 欄數 8~11 固定，列數 1~451。橫向捲動由這層負責，頁面本體不得橫捲。
   刻意用獨立的 .bp-grid__* 而不是沿用 .bp-cmp__*：那組是規格比較表，
   欄是公牛、列是規格項，與這裡列是母牛剛好相反，共用會兩邊互相牽制。 */
/* position:relative + z-index:0 是為了**建立堆疊脈絡**，不是為了定位。
   底下的 sticky th 要用 z-index 讓表頭壓過儲存格，但底部導覽列是
   position:absolute; z-index:auto——沒有這層脈絡的話，th 的 z-index:1
   會贏過導覽列，母牛欄就直接畫在「配種建議／耐熱育種／更多」上面（實測如此）。 */
#v-sim .bp-grid__scroll {
  position: relative; z-index: 0;
  overflow: auto; max-height: 70vh;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
}
#v-sim .bp-grid__t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
#v-sim .bp-grid__t th, #v-sim .bp-grid__t td {
  padding: 6px 8px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2);
}
/* 表頭與首欄都要黏住：451 列捲下去之後看不到公牛名就沒法讀了。
   角落那一格是兩軸交會，z-index 要比單軸的高一級才不會被蓋掉。 */
#v-sim .bp-grid__t thead th {
  position: sticky; top: 0; z-index: 2; vertical-align: bottom;
  background: var(--surface-2); text-align: right;
}
#v-sim .bp-grid__t thead th:first-child,
#v-sim .bp-grid__t tbody th { position: sticky; left: 0; background: var(--surface-0); text-align: left; }
#v-sim .bp-grid__t thead th:first-child { z-index: 3; background: var(--surface-2); }
#v-sim .bp-grid__t tbody th { z-index: 1; min-width: 132px; }
#v-sim .bp-grid__t th b { display: block; font-size: 12px; font-weight: 800; color: var(--ink-950); }
#v-sim .bp-grid__t th s { display: block; text-decoration: none; font-size: 10.5px; font-weight: 600; color: var(--ink-600); }
#v-sim .bp-grid__t th u { display: block; text-decoration: none; font-size: 11.5px; font-weight: 800; color: var(--brand-700); font-variant-numeric: tabular-nums; }
#v-sim .bp-grid__t tbody th label { display: flex; align-items: center; gap: 6px; }
#v-sim .bp-grid__t tbody th input { width: 17px; height: 17px; accent-color: var(--brand-700); flex: none; }
#v-sim .bp-grid__t td { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-900); }
/* 色階與 .bp-f 徽章同一組（fTone：<3.125 綠／<6.25 琥珀／以上紅），
   --amber-700 在 --amber-100 上只有 3.93:1，所以警示色用 --lbl-warn。 */
#v-sim .bp-grid__t td.f-good { background: var(--brand-100); color: var(--brand-800); }
#v-sim .bp-grid__t td.f-warn { background: var(--amber-100); color: var(--lbl-warn); }
#v-sim .bp-grid__t td.f-bad  { background: var(--bad-50); color: var(--bad-700); }
#v-sim .bp-grid__t td.is-na  { color: var(--ink-500); font-weight: 400; }
/* 目前的配種安排。整格描外框在手機上太重（451 列同一欄全是綠框），
   改成左緣一條重點線＋格內的 ●，兩個訊號都在但不搶版面。 */
#v-sim .bp-grid__t td.is-cur { box-shadow: inset 3px 0 0 var(--you-600); }
#v-sim .bp-grid__t td i { font-style: normal; margin-left: 3px; color: var(--you-600); }
/* 圖例列（稿 D04）：色票在左、匯出在右。 */
#v-sim .bp-grid__bar {
  display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap;
  margin-top: 12px; padding: 11px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--line-1); background: var(--surface-0);
}
#v-sim .bp-lg { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-800); }
#v-sim .bp-lg i { width: 14px; height: 14px; flex: none; border-radius: 4px; }
#v-sim .bp-lg i.f-good { background: var(--brand-100); }
#v-sim .bp-lg i.f-warn { background: var(--amber-100); }
#v-sim .bp-lg i.f-bad  { background: var(--bad-50); }
#v-sim .bp-lg i.is-cur { width: 10px; height: 10px; border-radius: 50%; background: var(--you-600); }
#v-sim .bp-lg i.is-na  { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-500); opacity: .55; }
#v-sim .bp-grid__bar .bp-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
}
#v-sim .bp-grid__lg { margin-top: 10px; font-size: 12px; line-height: 1.65; color: var(--ink-600); }
#v-sim .bp-grid__lg p { margin: 0 0 6px; }
#v-sim .bp-grid__lg b { color: var(--ink-900); font-weight: 700; }
#v-sim .bp-grid__lg .f-good { color: var(--brand-800); font-weight: 700; }
#v-sim .bp-grid__lg .f-warn { color: var(--lbl-warn); font-weight: 700; }
#v-sim .bp-grid__lg .f-bad  { color: var(--bad-700); font-weight: 700; }

@media (max-width: 767px) {
  /* 手機把首欄縮窄，換取多看到一欄公牛 */
  #v-sim .bp-grid__t tbody th { min-width: 104px; }
  #v-sim .bp-grid__t th, #v-sim .bp-grid__t td { padding: 6px; }
  #v-sim .bp-batchbar__b { margin-left: 0; }
  /* 70vh 起算點在頁面中段，表格底緣會落到底部導覽列之下（實測 889px > 812px 視窗）。
     手機收到 52vh，讓整張表連同圖例都留在導覽列上方。 */
  #v-sim .bp-grid__scroll { max-height: 52vh; }
}

/* 篩選下拉桌機 36px 夠用，觸控裝置要 44px。
   **必須放在檔尾**：同權重時後寫的勝出，寫在 .bp-filters select 的 36px 之前
   會被蓋掉（實測過）。同時用 pointer:coarse 與寬度斷點——前者語意正確，
   但無頭瀏覽器不回報 coarse，稽核腳本量不到。 */
@media (pointer: coarse), (max-width: 767px) {
  #bpsheet .bp-filters select, #v-sim .bp-filters select,
  #v-sim .bp-cowbar__sel select { min-height: 44px; }
  /* 勾選框：視覺方塊只有 15~16px，但可點區是覆蓋式的透明 input。
     把 label 撐到 44px 高、input 用負 inset 蓋滿，視覺不變而觸控達標。 */
  #bpsheet .bp-chk, #v-sim .bp-chk { min-height: 44px; }
  #bpsheet .bp-row__pick, #v-sim .bp-row__pick { min-height: 44px; align-items: center; }
  #bpsheet .bp-row__pick input, #v-sim .bp-row__pick input { inset: -8px -6px; }
  /* 稿把「詳情」「清除篩選」「比較」畫成 27–37px，低於 README 自己訂的 44px
     觸控下限。指標裝置上維持稿的高度（滑鼠精度夠），觸控裝置一律撐到 44。
     這是對稿的**刻意偏離**。 */
  #bpsheet .bp-row__more, #v-sim .bp-row__more,
  #bpsheet .bp-clearf, #v-sim .bp-clearf,
  #bpsheet .bp-cmpbar .bp-btn, #v-sim .bp-cmpbar .bp-btn,
  #v-sim .bp-batchbar__b button,
  #v-sim .bp-grid__bar .bp-btn { min-height: 44px; }
  #v-sim .bp-cowbar__on button { width: 44px; height: 44px; }
  #bpsheet .bp-cmp__x, #v-sim .bp-cmp__x { width: 44px; height: 44px; }
}

/* 近親計算失敗的橫幅與徽章。靜默失敗會讓徽章永遠停在「計算中」，
   農民以為還在算、其實永遠不會來，而且那個狀態下還能按採用。 */
#bpsheet .bp-errbar, #v-sim .bp-errbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--surface-warm); border: 1px solid var(--amber-500);
  font-size: 12.5px; font-weight: 700; color: var(--amber-700);
}
#bpsheet .bp-errbar__t, #v-sim .bp-errbar__t { flex: 1; min-width: 0; }
#bpsheet .bp-f.is-err, #v-sim .bp-f.is-err {
  background: var(--surface-warm); color: var(--amber-700);
  font-weight: 700; font-size: 11px;
}

/* ---- 自選公牛：四性狀的女兒預估表 ----
   抽屜與分頁兩個宿主都要寫（這組樣式漏寫宿主是本檔踩過 40 次的坑，
   有 tools/check_css_selector_groups.py 在擋）。 */
#bpsheet .bp-dau, #v-sim .bp-dau { margin-top: 12px; }
#bpsheet .bp-dau h4, #v-sim .bp-dau h4 {
  margin: 0 0 6px; font-size: 12.5px; font-weight: 800; color: var(--ink-950);
}
#bpsheet .bp-dau__t, #v-sim .bp-dau__t { width: 100%; border-collapse: collapse; font-size: 12px; }
#bpsheet .bp-dau__t th, #v-sim .bp-dau__t th,
#bpsheet .bp-dau__t td, #v-sim .bp-dau__t td {
  padding: 5px 8px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums;
}
#bpsheet .bp-dau__t thead th, #v-sim .bp-dau__t thead th {
  font-size: 10.5px; font-weight: 700; color: var(--ink-600);
}
#bpsheet .bp-dau__t tbody th, #v-sim .bp-dau__t tbody th {
  text-align: left; font-weight: 700; color: var(--ink-900);
}
#bpsheet .bp-dau__t td b, #v-sim .bp-dau__t td b { font-weight: 800; color: var(--ink-950); }
/* 誤差帶壓在預估值後面，字級與顏色都退一階——它是限定條件不是主要數字 */
#bpsheet .bp-dau__t td s, #v-sim .bp-dau__t td s {
  margin-left: 4px; text-decoration: none; font-size: 10.5px; font-weight: 600; color: var(--ink-600);
}
#bpsheet .bp-dau__t td.is-up, #v-sim .bp-dau__t td.is-up { color: var(--brand-800); font-weight: 800; }
#bpsheet .bp-dau__t td.is-dn, #v-sim .bp-dau__t td.is-dn { color: var(--bad-700); font-weight: 800; }
#bpsheet .bp-dau p, #v-sim .bp-dau p {
  margin: 6px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-600);
}
#bpsheet .bp-dau p b, #v-sim .bp-dau p b { color: var(--ink-900); font-weight: 700; }

/* ---- 自選公牛：近親來源拆解 ---- */
#bpsheet .bp-src__act, #v-sim .bp-src__act { margin-top: 12px; }
#bpsheet .bp-src__act button, #v-sim .bp-src__act button {
  min-height: 40px; padding: 0 14px; cursor: pointer;
  border-radius: var(--radius-pill); border: 1px solid var(--brand-700);
  background: var(--surface-0); font-size: 12.5px; font-weight: 700; color: var(--brand-700);
}
#bpsheet .bp-src__act button:hover, #v-sim .bp-src__act button:hover { background: var(--brand-100); }
#bpsheet .bp-src__act button:focus-visible, #v-sim .bp-src__act button:focus-visible {
  outline: 2px solid var(--brand-700); outline-offset: 2px;
}
#bpsheet .bp-src, #v-sim .bp-src {
  margin-top: 10px; padding: 12px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--line-strong); background: var(--surface-2);
  font-size: 12px; line-height: 1.65; color: var(--ink-600);
}
#bpsheet .bp-src h4, #v-sim .bp-src h4 {
  margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--ink-950);
}
#bpsheet .bp-src h5, #v-sim .bp-src h5 {
  margin: 12px 0 5px; font-size: 12px; font-weight: 800; color: var(--ink-900);
}
#bpsheet .bp-src p, #v-sim .bp-src p { margin: 5px 0 0; }
#bpsheet .bp-src b, #v-sim .bp-src b { color: var(--ink-950); font-weight: 800; }
/* 組成長條：可指認的用品牌綠，系譜斷點用中性灰——灰色是刻意的，
   那一段不是「查到的血緣」而是「查不到所以用族群平均頂替」，
   給它警示色會讓農民以為那是實際存在的近親風險。 */
#bpsheet .bp-src__bar, #v-sim .bp-src__bar {
  display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface-3, var(--line-2));
}
#bpsheet .bp-src__bar i, #v-sim .bp-src__bar i { display: block; height: 100%; }
#bpsheet .bp-src__bar i.is-real, #v-sim .bp-src__bar i.is-real { background: var(--brand-700); }
#bpsheet .bp-src__bar i.is-gap, #v-sim .bp-src__bar i.is-gap { background: var(--ink-400, var(--ink-500)); }
#bpsheet .bp-src__lg, #v-sim .bp-src__lg { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 7px; font-size: 11.5px; }
#bpsheet .bp-src__lg span, #v-sim .bp-src__lg span { display: inline-flex; align-items: center; gap: 5px; }
#bpsheet .bp-src__lg i, #v-sim .bp-src__lg i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
#bpsheet .bp-src__lg i.is-real, #v-sim .bp-src__lg i.is-real { background: var(--brand-700); }
#bpsheet .bp-src__lg i.is-gap, #v-sim .bp-src__lg i.is-gap { background: var(--ink-400, var(--ink-500)); }
#bpsheet .bp-src__anc, #v-sim .bp-src__anc { margin: 0; padding: 0; list-style: none; }
#bpsheet .bp-src__anc li, #v-sim .bp-src__anc li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 5px 0; border-bottom: 1px solid var(--line-2);
}
#bpsheet .bp-src__anc b, #v-sim .bp-src__anc b { font-size: 12.5px; }
#bpsheet .bp-src__anc s, #v-sim .bp-src__anc s {
  text-decoration: none; font-size: 10.5px; color: var(--ink-500); font-variant-numeric: tabular-nums;
}
#bpsheet .bp-src__anc em, #v-sim .bp-src__anc em { font-style: normal; font-size: 11px; color: var(--ink-600); }
#bpsheet .bp-src__anc u, #v-sim .bp-src__anc u {
  margin-left: auto; text-decoration: none; font-weight: 800;
  color: var(--brand-800); font-variant-numeric: tabular-nums;
}
#bpsheet .bp-src__brk, #v-sim .bp-src__brk { margin: 0; padding-left: 18px; }
#bpsheet .bp-src.is-wait, #v-sim .bp-src.is-wait,
#bpsheet .bp-src.is-err, #v-sim .bp-src.is-err { padding: 10px 14px; }
#bpsheet .bp-src.is-err button, #v-sim .bp-src.is-err button {
  margin-left: 8px; min-height: 32px; padding: 0 10px; cursor: pointer;
  border-radius: var(--radius-pill); border: 1px solid var(--brand-700);
  background: var(--surface-0); font-size: 12px; font-weight: 700; color: var(--brand-700);
}

/* 近親來源的第 ④ 軌：與 CDCB 外部對照 */
#bpsheet .bp-src__cdcb, #v-sim .bp-src__cdcb { margin: 0; padding: 0; list-style: none; }
#bpsheet .bp-src__cdcb li, #v-sim .bp-src__cdcb li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 4px 0; border-bottom: 1px solid var(--line-2);
}
#bpsheet .bp-src__cdcb b, #v-sim .bp-src__cdcb b {
  margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-950);
}

/* ---- 系譜樹 ----
   SVG 本身用固定 px 尺寸（節點要對齊，不能縮放），橫向捲動由 __scroll 負責。
   Pig_Breeding 是用 overflow:auto 橫捲不縮放，這裡沿用——在 375px 上把
   1,300px 的圖縮到 0.29 倍，字只剩 3px，等於沒畫。 */
#bpsheet .bp-tree, #v-sim .bp-tree {
  margin-top: 10px; padding: 12px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--line-strong); background: var(--surface-2);
}
#bpsheet .bp-tree__gen, #v-sim .bp-tree__gen {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: 12px; font-weight: 700; color: var(--ink-900);
}
#bpsheet .bp-tree__gen select, #v-sim .bp-tree__gen select {
  min-height: 36px; padding: 0 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface-0);
  font-size: 12.5px; font-weight: 700; color: var(--ink-950);
}
#bpsheet .bp-tree__scroll, #v-sim .bp-tree__scroll {
  overflow: auto; max-height: 68vh; background: var(--surface-0);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
}
#bpsheet .bp-tree__scroll svg, #v-sim .bp-tree__scroll svg { display: block; }
#bpsheet .bp-tree__wait, #v-sim .bp-tree__wait {
  padding: 20px; text-align: center; font-size: 12.5px; color: var(--ink-600);
}
#bpsheet .bp-tree__lg, #v-sim .bp-tree__lg {
  margin-top: 9px; font-size: 11.5px; line-height: 1.65; color: var(--ink-600);
}
#bpsheet .bp-tree__lg p, #v-sim .bp-tree__lg p { margin: 0 0 5px; }
#bpsheet .bp-tree__lg b, #v-sim .bp-tree__lg b { color: var(--ink-950); font-weight: 700; }
#bpsheet .bp-tree__note, #v-sim .bp-tree__note {
  padding-top: 6px; border-top: 1px solid var(--line-2); color: var(--ink-500);
}
@media (max-width: 767px) {
  #bpsheet .bp-tree__scroll, #v-sim .bp-tree__scroll { max-height: 52vh; }
}

/* ---- 近親分級的「系譜不足」狀態 ----
   分級改吃 f_real（只算可指認的近親）之後，母牛系譜太淺（CGE < 1）的配對
   不能給綠燈——那會把「假警報」換成「假安心」。灰色是刻意的中性色：
   它既不是安全也不是危險，是「我們沒有足夠的系譜可以判斷」。
   不要換成警示色，那會變成另一種假警報。 */
#bpsheet .bp-f.thin, #v-sim .bp-f.thin {
  background: var(--surface-2); color: var(--ink-600); font-weight: 700;
}
#v-sim .bp-grid__t td.f-thin { background: var(--surface-2); color: var(--ink-500); font-weight: 400; }
#v-sim .bp-grid__t td.f-na   { background: var(--surface-2); color: var(--ink-500); font-weight: 400; }
#matesheet .mt-frisk.thin {
  background: var(--surface-2); color: var(--ink-600); border-color: var(--line-strong);
}
#matesheet .mt-frisk.na {
  background: var(--surface-2); color: var(--ink-500); border-color: var(--line-2);
}


/* ══════════════════════════════════════════════════════════════════════
   泌乳性能（全場表型）#v-lact
   實測頁。與遺傳評估頁刻意用同一套卡片/圖表骨架，只有「時點」與「非本月」
   這兩件事需要自己的視覺語彙 —— 它們是這一頁最容易被誤讀的地方。
   ══════════════════════════════════════════════════════════════════════ */
#v-lact .ld-hd { margin: 4px 0 14px; }
#v-lact .ld-hd__when {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-700, var(--ink-600)); margin-bottom: 8px;
}
#v-lact .ld-hd__when b { color: var(--ink-900, var(--ink-800)); font-weight: 800; }
/* 資料超過 3 個月沒更新：整條轉琥珀。使用者決定「停在最後有資料的時間」是對的，
   但那個時間必須跟數字一樣顯眼，不能是頁尾的小字。 */
#v-lact .ld-hd__when.is-old { color: var(--lbl-warn); }
#v-lact .ld-hd__when.is-old b { color: var(--lbl-warn); }
#v-lact .ld-hd__line {
  font-size: 12.5px; line-height: 1.75; color: var(--ink-600);
  padding: 10px 13px; border-radius: 9px; background: var(--surface-2);
  border-left: 3px solid var(--green, #33ab6f);
}
#v-lact .ld-hd__line b { color: var(--ink-800); }
#v-lact .kpi--ic .kb em { display: flex; align-items: center; gap: 6px; min-height: 16px; }
/* 單位用 <s>（沿用 mk-card 的慣例），但 .kpi--ic 的原始骨架是 small/b/em、從來沒有
   <s>，所以沒人寫過重設 —— 六個 KPI 的單位全部被瀏覽器加上刪除線，「千/mL」
   這種長字串最明顯。 */
#v-lact .kpi--ic .kb b s {
  text-decoration: none; font-size: 12.5px; font-weight: 700;
  margin-left: 2px; color: var(--ink-600);
}
#v-lact .ld-note { font-style: normal; font-size: 10.5px; color: var(--ink-500, var(--ink-600)); }
#v-lact .ld-d { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 4px; }
#v-lact .ld-d.is-up   { background: var(--you-50, #e3f2ea); color: var(--lbl-good); }
#v-lact .ld-d.is-dn   { background: var(--bad-50, #fbeae3); color: var(--lbl-bad); }
#v-lact .ld-d.is-flat { background: var(--surface-2); color: var(--ink-600); }
#v-lact .ld-mom { margin: 10px 0 4px; }
#v-lact .ld-sec { display: grid; gap: 12px; grid-template-columns: minmax(0,1fr); margin-bottom: 14px; }
@media (min-width: 1240px) { #v-lact .ld-sec { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; } }

/* ── 月趨勢（設計包 02-monthly-trends）────────────────────────────────────
   兩張圖等寬（設計稿是 1:1，不是 1.3:1），圖內有圓點、數值標籤與浮層卡。 */
#v-lact .ld-ctxbar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; font-size: 12.5px;
  background: var(--surface-0); border: 1px solid var(--line-1); color: var(--ink-600);
}
#v-lact .ld-ctxbar b { color: var(--ink-900, var(--ink-800)); font-weight: 700; font-variant-numeric: tabular-nums; }
#v-lact .ld-ctxbar i { color: var(--ink-400, var(--ink-500)); font-style: normal; }
#v-lact .ld-ctxbar [data-ic] { color: var(--ink-500); flex: none; }

#v-lact .chart-t { display: flex; align-items: center; gap: 7px; }
#v-lact .ld-i { color: var(--ink-400, var(--ink-500)); display: inline-flex; cursor: help; }
#v-lact .ld-rchip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600;
  background: var(--surface-2); color: var(--ink-600); border: 1px solid var(--line-1);
}
#v-lact .ld-rchip [data-ic] { color: var(--ink-500); }

.ld-chwrap { position: relative; margin-top: 4px; }
.ld-hit { fill: transparent; }
.ld-tip {
  position: absolute; z-index: 2; pointer-events: none; white-space: nowrap;
  padding: 8px 12px 9px; border-radius: 10px; transform: translateX(-6px);
  background: var(--surface-0); border: 1px solid var(--line-1);
  box-shadow: 0 6px 20px rgb(16 32 24 / .14);
}
/* 右錨時往右溢出 30px：卡片緊貼引線會蓋掉前一、兩個點的數值標籤 */
.ld-tip.is-right { transform: translateX(calc(-100% + 30px)); }
.ld-tip .th { font-size: 11.5px; font-weight: 800; color: var(--ink-900, var(--ink-800)); margin-bottom: 5px; }
.ld-tip .r { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 11.5px; line-height: 1.85; }
.ld-tip .r i { display: inline-flex; align-items: center; gap: 5px; font-style: normal; color: var(--ink-600); }
.ld-tip .r i em { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.ld-tip .r b { font-weight: 800; color: var(--ink-900, var(--ink-800)); font-variant-numeric: tabular-nums; }
.ld-tip .r b s { font-weight: 600; font-size: 10px; color: var(--ink-500); margin-left: 2px; }
.ld-tip .nb { font-size: 11px; color: var(--ink-500); margin-top: 3px; }
.ld-tip__pill {
  margin-top: 6px; display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 700; background: var(--you-50, #e3f2ea); color: var(--lbl-good);
}
.ld-tip__pill.is-bad { background: var(--bad-50, #fbeae3); color: var(--lbl-bad); }

/* 圖表底部摘要條 —— 設計稿把「這個月怎麼樣」壓成一行帶色的結論 */
#v-lact .ld-sum {
  display: flex; align-items: flex-start; gap: 11px; margin-top: 12px;
  padding: 11px 13px; border-radius: 12px; background: var(--surface-soft, #f2f6f3); border: 1px solid var(--line-1);
}
#v-lact .ld-sum .ic-orb { width: 34px; height: 34px; flex: none; }
#v-lact .ld-sum .ic-orb svg { width: 18px; height: 18px; }
#v-lact .ld-sum b { display: block; font-size: 13px; font-weight: 700; color: var(--ink-900, var(--ink-800)); line-height: 1.7; }
#v-lact .ld-sum p { margin: 3px 0 0; font-size: 11.5px; color: var(--ink-500); line-height: 1.6; }
#v-lact .ld-sum em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
#v-lact .ld-sum em.up, #v-lact .ld-sum b.up { color: var(--lbl-good); }
#v-lact .ld-sum em.dn, #v-lact .ld-sum b.dn { color: var(--lbl-warn); }
#v-lact .ld-sum--3 { align-items: center; gap: 0; }
#v-lact .ld-sum__a { display: flex; align-items: center; gap: 10px; padding-right: 16px; }
#v-lact .ld-sum__i { padding: 0 16px; border-left: 1px solid var(--line-1); text-align: center; }
#v-lact .ld-sum__i small { display: block; font-size: 11px; color: var(--ink-500); margin-bottom: 2px; }
#v-lact .ld-sum__i b { font-size: 15px; }

/* 「怎麼讀」兩張卡 —— 取代原本壓在圖下的長段落 */
#v-lact .ld-how { display: grid; gap: 12px; grid-template-columns: minmax(0,1fr); margin-bottom: 12px; }
@media (min-width: 900px) { #v-lact .ld-how { grid-template-columns: repeat(2, minmax(0,1fr)); } }
#v-lact .ld-how > div {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  border-radius: var(--radius-md); background: var(--surface-0); border: 1px solid var(--line-1);
}
#v-lact .ld-how .ic-orb { width: 40px; height: 40px; flex: none; }
#v-lact .ld-how b { display: block; font-size: 13px; color: var(--ink-900, var(--ink-800)); margin-bottom: 3px; }
#v-lact .ld-how p { margin: 0; font-size: 12px; color: var(--ink-600); line-height: 1.75; }

/* 期間切換 */
#v-lact .ld-range { display: flex; justify-content: center; gap: 4px; margin: 4px 0 20px; }
#v-lact .ld-range button {
  padding: 9px 22px; border: 1px solid var(--line-1); background: var(--surface-0);
  color: var(--ink-600); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background var(--duration-fast, .15s) ease, color var(--duration-fast, .15s) ease;
}
#v-lact .ld-range button:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
#v-lact .ld-range button:last-child  { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
#v-lact .ld-range button + button { border-left: none; }
#v-lact .ld-range button:hover { background: var(--surface-2); }
#v-lact .ld-range button.on { background: var(--brand-800); border-color: var(--brand-800); color: #fff; }

/* 乳價卡：說明改放三步路徑右側（設計包 01），不再壓一段長文在卡片下方 */
#v-lact .ld-price__note { padding-left: 18px; border-left: 1px solid var(--line-1); max-width: 260px; }
#v-lact .ld-price__note b { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-900, var(--ink-800)); line-height: 1.75; }
#v-lact .ld-price__note p { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-500); line-height: 1.65; }
#v-lact .ld-price__cap { margin-top: 12px; font-size: 12px; color: var(--ink-600); }

/* 行動卡尾註：一行代碼對應 + 右側母體宣告 */
#v-lact .ld-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 2px 0 20px; padding: 11px 15px; border-radius: 12px; font-size: 12px; line-height: 1.7;
  background: var(--surface-0); border: 1px solid var(--line-1); color: var(--ink-600);
}
#v-lact .ld-foot [data-ic] { color: var(--ink-500); flex: none; }
#v-lact .ld-foot b { color: var(--ink-900, var(--ink-800)); font-weight: 700; }
#v-lact .ld-foot em { margin-left: auto; font-style: normal; }
/* 畫不出來時的兩態：不畫空圖，印原因。這一頁有三處會走到（月趨勢、乳房四象限、個別牛曲線）*/
#v-lact .ld-na, #lactsheet .ld-na {
  padding: 22px 16px; text-align: center; font-size: 12.5px; line-height: 1.7;
  color: var(--ink-600); background: var(--surface-2); border-radius: 9px;
}
#v-lact .ld-empty { display: flex; gap: 12px; align-items: flex-start; padding: 20px; font-size: 13px; }
#v-lact .ld-empty b { display: block; margin-bottom: 4px; }

/* ── 乳房健康四象限 ── */
#v-lact .ld-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 4px 0 8px; }
/* 設計包 04：每格三欄 —— 圖示｜標籤+百分比+分子分母｜說明+國際位置。
   直排版本（原本的）在寬螢幕會把說明擠到百分比下面，跟稿子長得不一樣。 */
#v-lact .ld-q {
  padding: 13px 14px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--line-1); display: flex; align-items: center; gap: 13px;
  cursor: pointer; transition: box-shadow var(--duration-fast, .15s) ease;
}
#v-lact .ld-q:hover { box-shadow: 0 2px 10px rgb(16 32 24 / .1); }
#v-lact .ld-q.is-picked { outline: 2px solid var(--brand-800); outline-offset: 1px; }
#v-lact .ld-q__ic { flex: none; }
#v-lact .ld-q__m { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#v-lact .ld-q__r { margin-left: auto; text-align: right; display: flex; flex-direction: column;
  align-items: flex-end; gap: 6px; }
#v-lact .ld-q b { font-size: 30px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
#v-lact .ld-q s { text-decoration: none; font-size: 11.5px; color: var(--ink-600); }
#v-lact .ld-q em { font-style: normal; font-size: 12.5px; font-weight: 800; }
#v-lact .ld-q i { font-style: normal; font-size: 11.5px; line-height: 1.5; color: var(--ink-600); }
@media (max-width: 1023px) {
  #v-lact .ld-q { flex-wrap: wrap; }
  #v-lact .ld-q__r { margin-left: 0; width: 100%; align-items: flex-start; text-align: left; }
}
#v-lact .ld-q.is-new { background: var(--bad-50, #fbeae3); border-color: var(--lbl-bad); }
#v-lact .ld-q.is-new b, #v-lact .ld-q.is-new em { color: var(--lbl-bad); }
#v-lact .ld-q.is-chr { background: var(--warn-50, #fdf4e3); border-color: var(--lbl-warn); }
#v-lact .ld-q.is-chr b, #v-lact .ld-q.is-chr em { color: var(--lbl-warn); }
#v-lact .ld-q.is-ok b { color: var(--lbl-good); }

/* ── 胎次 × 泌乳階段交叉表 ── */
#v-lact .ld-cross { overflow-x: auto; }
#v-lact .ld-x { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 420px; }
#v-lact .ld-x th { text-align: left; font-size: 11px; color: var(--ink-600); padding: 6px 8px; font-weight: 700; }
#v-lact .ld-x tbody th { white-space: nowrap; }
#v-lact .ld-x td {
  padding: 8px; border: 1px solid var(--line-1); border-radius: 6px; text-align: center;
  background: var(--surface-2); font-variant-numeric: tabular-nums;
}
#v-lact .ld-x td b { display: block; font-size: 16px; font-weight: 800; }
#v-lact .ld-x td s { display: block; text-decoration: none; font-size: 10.5px; color: var(--ink-600); }
#v-lact .ld-x td em { font-style: normal; font-size: 10px; color: var(--ink-500, var(--ink-600)); }
#v-lact .ld-x td.is-warn { background: var(--warn-50, #fdf4e3); }
#v-lact .ld-x td.is-warn s { color: var(--lbl-warn); font-weight: 800; }
#v-lact .ld-x td.is-thin { color: var(--ink-500, var(--ink-600)); font-size: 11px; }

/* 交叉表色階（設計包 03）：整表最低→琥珀、最高→綠，五級。
   連續透明度在淺色底幾乎分不出來，所以切成離散級距。 */
#v-lact .ld-x td { position: relative; padding: 11px 8px 10px; }
#v-lact .ld-x td.is-a3 { background: color-mix(in oklab, var(--warn-50, #fdf4e3) 100%, transparent); }
#v-lact .ld-x td.is-a2 { background: color-mix(in oklab, var(--warn-50, #fdf4e3) 72%, var(--surface-0)); }
#v-lact .ld-x td.is-a1 { background: color-mix(in oklab, var(--warn-50, #fdf4e3) 40%, var(--surface-0)); }
#v-lact .ld-x td.is-g1 { background: color-mix(in oklab, var(--you-50, #e3f2ea) 55%, var(--surface-0)); }
#v-lact .ld-x td.is-g2 { background: color-mix(in oklab, var(--you-50, #e3f2ea) 100%, transparent); }
#v-lact .ld-x td.is-mk-best  { border: 2px solid var(--brand-800); }
#v-lact .ld-x td.is-mk-worst { border: 2px solid var(--coral-700); }
#v-lact .ld-x td em { display: inline-flex; align-items: center; gap: 4px; justify-content: center; margin-top: 3px; }
#v-lact .ld-x td em [data-ic] { color: var(--ink-500); }
#v-lact .ld-x__tag {
  position: absolute; top: -9px; right: 6px; font-style: normal; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: var(--radius-pill); color: #fff; white-space: nowrap;
}
#v-lact .ld-x__tag.is-best  { background: var(--brand-800); }
#v-lact .ld-x__tag.is-worst { background: var(--coral-700); }

/* 交叉表的欄位說明：全域 .chart-sub 是 16px，在這裡讀起來像第二個標題 */
#v-lact .ld-cross .chart-sub { font-size: 11.5px; color: var(--ink-500); margin: 2px 0 12px; font-weight: 400; }

/* 交叉表下的兩張結論卡 —— 表格自己不會說話 */
#v-lact .ld-xsum { display: grid; gap: 12px; grid-template-columns: minmax(0,1fr); margin: 16px 0 10px; }
@media (min-width: 820px) { #v-lact .ld-xsum { grid-template-columns: repeat(2, minmax(0,1fr)); } }
#v-lact .ld-xsum > div {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-radius: var(--radius-md); border: 1px solid var(--line-1);
}
#v-lact .ld-xsum .is-good, #v-lact .ld-xsum > .is-good { background: var(--you-50, #e3f2ea); border-color: color-mix(in oklab, var(--lbl-good) 30%, transparent); }
#v-lact .ld-xsum > .is-bad { background: var(--bad-50, #fbeae3); border-color: color-mix(in oklab, var(--coral-700) 28%, transparent); }
#v-lact .ld-xsum b { font-size: 14.5px; font-weight: 700; }
#v-lact .ld-xsum > .is-good b { color: var(--brand-800); }
#v-lact .ld-xsum > .is-bad b { color: var(--coral-700); }
#v-lact .ld-xsum b s { text-decoration: none; font-size: 11.5px; font-weight: 600; }
#v-lact .ld-xsum .ic-orb { width: 38px; height: 38px; flex: none; background: var(--surface-0); }

/* 單行 ⓘ 註（取代原本壓在圖下的整段文字）*/
#v-lact .ld-cap1 {
  display: flex; align-items: center; gap: 7px; justify-content: center;
  margin-top: 12px; font-size: 11.5px; color: var(--ink-500);
}
#v-lact .ld-cap1 [data-ic] { flex: none; }
/* 圖表標題列右上的警示藥丸（超過 305 天 N 頭・X%）*/
#v-lact .ld-pillw {
  margin-left: auto; display: inline-block; padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 700; background: var(--warn-50, #fdf4e3); color: var(--lbl-warn);
}
/* 區段標題 + 副標（設計包把「牛群結構」換成一句提問）*/
/* 設計稿把這一段的標題放大成一句提問（不是區段標籤），字級跟著放大 */
#v-lact h2.ld-sec2 { margin-bottom: 3px; font-size: 26px; letter-spacing: -.01em; }
@media (max-width: 767px) { #v-lact h2.ld-sec2 { font-size: 21px; } }
#v-lact .ld-sec2__d { margin: 0 0 14px; font-size: 13px; color: var(--ink-600); }
#v-lact .ld-sec2__d b { color: var(--ink-900, var(--ink-800)); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════
   泌乳性能：主視覺（高保真設計包 v1）
   照片是獨立資產、文字全在 HTML 層 —— 數字不烤進圖，換場才不會圖文打架。
   ══════════════════════════════════════════════════════════════════════ */
/* 泌乳性能沿用 .page-hero，只加這一頁特有的資料時點 chips。 */
#v-lact .ld-hero { min-height: 210px; }
#v-lact .page-hero__content { padding: 22px 24px; }
#v-lact .page-hero__title { font-size: 25px; }
#v-lact .page-hero__desc { max-width: 46ch; }
#v-lact .ld-hero__chips { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
/* chip 內是「標籤 + 數字 + 單位」三段。數字與單位必須同一行 —— 用 column 排會把
   「203」和「頭」拆成兩行，chip 變高又變窄（實測擠成兩排）。改成標籤在上、
   數字與單位在下的同一列。 */
#v-lact .ld-chipx {
  display: inline-flex; flex-direction: column; gap: 1px; padding: 7px 13px; border-radius: 10px;
  background: rgb(255 255 255 / .13); border: 1px solid rgb(255 255 255 / .2);
  font-size: 12.5px; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap;
}
#v-lact .ld-chipx small { font-size: 10.5px; color: rgb(255 255 255 / .72); }
#v-lact .ld-chipx b { font-size: 15px; font-weight: 750; }
#v-lact .ld-hero__tag {
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgb(198 240 217 / .93); color: #0d3a2a;
}
#v-lact .ld-hero__tag.is-old { background: rgb(253 226 178 / .95); color: #6b4106; }

/* 界線說明條。原本是主視覺裡的一段長散文，設計包把它拉出來成獨立提示列 —— */
#v-lact .ld-note-bar {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px;
  padding: 11px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.75;
  background: var(--surface-soft, #f2f6f3); border: 1px solid var(--line-1); color: var(--ink-700, var(--ink-600));
}
#v-lact .ld-note-bar [data-ic] { flex: none; margin-top: 2px; color: var(--ink-500, var(--ink-600)); }

/* KPI 的月對月改成藥丸（設計包）。ld-d 由 ldMoM() 產生，這裡只換外觀。 */
/* 設計包是一列六張。auto-fit minmax(178px) 在 1280 寬只排得下 5 張，第六張掉行 ——
   桌機固定六欄，平板 3×2，手機 2 欄。 */
@media (min-width: 1180px) { #v-lact .ld-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1179px) { #v-lact .ld-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#v-lact .ld-kpis .kpi--ic { padding: 13px 14px; gap: 11px; }
#v-lact .ld-kpis .kpi--ic .ic-orb { width: 38px; height: 38px; }
#v-lact .ld-kpis b { font-size: 22px; }
#v-lact .ld-kpis .ld-d {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#v-lact .ld-kpis .ld-d.is-up   { background: color-mix(in oklab, var(--lbl-ok) 14%, transparent);   color: var(--lbl-ok); }
#v-lact .ld-kpis .ld-d.is-dn   { background: color-mix(in oklab, var(--lbl-warn) 16%, transparent); color: var(--lbl-warn); }
#v-lact .ld-kpis .ld-d.is-flat { background: var(--surface-soft, #f2f6f3); color: var(--ink-500, var(--ink-600)); }

/* 月對月摘要條 */
#v-lact .ld-mombar {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
  margin: 12px 0 0; padding: 10px 8px 10px 12px; border-radius: 13px;
  background: var(--card); border: 1px solid var(--line-1);
}
#v-lact .ld-mombar__ic { flex: none; width: 34px; height: 34px; margin-right: 12px; }
#v-lact .ld-mombar__i {
  display: flex; align-items: baseline; gap: 7px; padding: 2px 18px;
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-700, var(--ink-600));
  border-left: 1px solid var(--line-1);
}
#v-lact .ld-mombar__i:first-of-type { border-left: 0; padding-left: 0; }
#v-lact .ld-mombar__i small { font-size: 11.5px; color: var(--ink-500, var(--ink-600)); }
#v-lact .ld-mombar__i b { font-size: 14px; font-weight: 750; color: var(--ink-900, var(--ink-800)); }
#v-lact .ld-mombar__i.is-warn { color: var(--lbl-warn); margin-left: auto; }
#v-lact .ld-mombar__i.is-warn b { color: var(--lbl-warn); }

@media (max-width: 767px) {
  #v-lact .ld-hero { min-height: 200px; }
  #v-lact .page-hero__content { padding: 16px; align-self: flex-end; }
  #v-lact .page-hero__title { font-size: 20px; }
  #v-lact .ld-chipx { padding: 6px 10px; font-size: 12px; }
  #v-lact .ld-mombar { gap: 4px 0; padding: 10px 12px; }
  #v-lact .ld-mombar__ic { display: none; }
  #v-lact .ld-mombar__i { border-left: 0; padding: 2px 0; width: 100%; justify-content: space-between; }
  #v-lact .ld-mombar__i.is-warn { margin-left: 0; }
}

/* 四格：圖示在左、數字在右。ld-q 原本是純文字堆疊，加圖示後要變兩欄。 */
#v-lact .ld-q { display: flex; gap: 12px; align-items: flex-start; }
#v-lact .ld-q__ic { flex: none; width: 40px; height: 40px; }
#v-lact .ld-q__b { min-width: 0; flex: 1; }
#v-lact .ld-q.is-new .ld-q__ic { background: color-mix(in oklab, var(--lbl-warn) 15%, transparent); color: var(--lbl-warn); }
#v-lact .ld-q.is-chr .ld-q__ic { background: color-mix(in oklab, #d98324 16%, transparent); color: #b06a12; }
#v-lact .ld-q.is-cur .ld-q__ic,
#v-lact .ld-q.is-ok  .ld-q__ic { background: color-mix(in oklab, var(--lbl-ok) 14%, transparent); color: var(--lbl-ok); }
/* 行動卡：設計包桌機一列四張 */
@media (min-width: 1180px) { #v-lact .ld-acts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1179px) { #v-lact .ld-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── 名冊工具列：編號口徑切換 + 搜尋（設計包 05/06）── */
#v-lact .ld-tools { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
#v-lact .ld-seg { display: inline-flex; background: var(--surface-soft, #f2f6f3); border-radius: 999px; padding: 3px; }
#v-lact .ld-seg__b {
  border: 0; background: none; cursor: pointer; padding: 5px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 650; color: var(--ink-600);
}
#v-lact .ld-seg__b.on { background: var(--brand-900, #12362a); color: #fff; }
#v-lact .ld-search {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-1); background: var(--card); color: var(--ink-500, var(--ink-600));
}
#v-lact .ld-search input {
  border: 0; background: none; outline: none; font: inherit; font-size: 12.5px;
  width: 120px; color: var(--ink-900, var(--ink-800));
}
#v-lact .ld-list__hd { gap: 10px 14px; }
#v-lact #ld-pg { margin-top: 10px; }

/* ── 乳房健康：左四格 + 右管理解讀（設計包）── */
#v-lact .ld-udder2 { display: grid; grid-template-columns: minmax(0,1.62fr) minmax(0,1fr); gap: 14px; align-items: start; }
#v-lact .ld-udder2 .ld-udder { margin: 0; }
#v-lact .ld-udder__side {
  background: var(--card); border: 1px solid var(--line-1); border-radius: var(--radius-lg, 14px);
  padding: 15px 16px; display: flex; flex-direction: column; gap: 10px;
}
#v-lact .ld-adv {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px 13px; border-radius: 12px;
}
#v-lact .ld-adv .ic-orb { flex: none; width: 38px; height: 38px; }
#v-lact .ld-adv b { display: block; font-size: 13.5px; font-weight: 750; margin-bottom: 3px; }
#v-lact .ld-adv p { margin: 0; font-size: 12px; line-height: 1.7; color: var(--ink-600); }
#v-lact .ld-adv.is-new {
  background: color-mix(in oklab, var(--lbl-warn) 7%, transparent);
  border: 1px solid color-mix(in oklab, var(--lbl-warn) 22%, transparent);
}
#v-lact .ld-adv.is-new .ic-orb { background: color-mix(in oklab, var(--lbl-warn) 15%, transparent); color: var(--lbl-warn); }
#v-lact .ld-adv.is-chr {
  background: color-mix(in oklab, #d98324 8%, transparent);
  border: 1px solid color-mix(in oklab, #d98324 24%, transparent);
}
#v-lact .ld-adv.is-chr .ic-orb { background: color-mix(in oklab, #d98324 16%, transparent); color: #b06a12; }
#v-lact .ld-udder__foot {
  display: flex; gap: 8px; align-items: flex-start; margin-top: auto; padding-top: 4px;
  font-size: 11.5px; line-height: 1.7; color: var(--ink-500, var(--ink-600));
}
#v-lact .ld-udder__foot [data-ic] { flex: none; margin-top: 2px; }
/* ⚠️ 註腳要 block 不能 flex：裡面的 <b> 在 flex 容器下會各自變成 flex item，
   每個佔一欄 —— 實測印成「四個百分 / 分母 / 不能直接相 / Fauteux et」四直行。
   這一段必須排在上面 .ld-udder__foot 的 flex 規則**之後**才蓋得掉（同特異度看順序）。 */
#v-lact .ld-udder__foot { display: block; }
#v-lact .ld-udder__foot [data-ic] { float: left; margin: 3px 7px 0 0; }

/* 四格內文：標籤 → 大數字 → 分子/分母 → 說明 → 國際位置，各自成行。
   ld-q 改成 flex 之後這些 inline 元素會全部黏成一行（實測「7.1%11 / 156 頭新感染率…」）。 */
#v-lact .ld-q__b > b,
#v-lact .ld-q__b > s,
#v-lact .ld-q__b > em,
#v-lact .ld-q__b > i { display: block; }
#v-lact .ld-q__b > em { order: -1; font-size: 12.5px; font-weight: 700; margin-bottom: 2px; }
#v-lact .ld-q__b { display: flex; flex-direction: column; }
#v-lact .ld-q__b > b { font-size: 27px; font-weight: 800; line-height: 1.15; }
#v-lact .ld-q__b > s { font-size: 11.5px; color: var(--ink-500, var(--ink-600)); margin-top: 1px; }
#v-lact .ld-q__b > i { font-style: normal; font-size: 11.5px; color: var(--ink-600); margin-top: 4px; line-height: 1.6; }
#v-lact .ld-q__b .ld-fau { align-self: flex-start; margin-top: 7px; }

@media (max-width: 1179px) { #v-lact .ld-udder2 { grid-template-columns: 1fr; } }

/* ── 行動清單 ── */
#v-lact .ld-acts .action.is-none { opacity: .55; cursor: default; }
#v-lact .ld-n { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* 對應農民手上那張紙的哪個代號。只在查得到官方定義時才有這一行 —— 見 LD_FLAGS
   的註解：牛乳品質檢驗報告頁尾有印 (A)–(E)，性能檢定月報表沒印。 */
#v-lact .ld-mo {
  margin-top: 5px; padding-left: 8px; font-size: 11px; line-height: 1.5;
  color: var(--ink-500, var(--ink-600)); border-left: 2px solid var(--line-1);
}
/* 跟全國同年比。錨定場自己的資料年，見 ldNatFlag。 */
#v-lact .ld-nat {
  margin-top: 6px; font-size: 11.5px; display: flex; gap: 8px;
  align-items: baseline; flex-wrap: wrap; color: var(--ink-600);
  font-variant-numeric: tabular-nums;
}
#v-lact .ld-nat b { font-size: 13px; color: var(--ink-900, var(--ink-800)); }
#v-lact .ld-nat u,
#v-lact .ld-fau {
  text-decoration: none; font-size: 10.5px; font-weight: 700; padding: 1px 7px;
  border-radius: 999px; background: var(--chip, var(--card));
  border: 1px solid var(--line-1); color: var(--ink-600);
}
#v-lact .ld-nat u.is-good, #v-lact .ld-fau.is-good { color: var(--lbl-ok);   border-color: currentColor; }
#v-lact .ld-nat u.is-bad,  #v-lact .ld-fau.is-bad  { color: var(--lbl-warn); border-color: currentColor; }
#v-lact .ld-fau { display: inline-block; margin-top: 6px; }

/* 配種頁的候選來源標示。is-warn＝正在用資料包內建的 8 支（乳量預選），
   不是依農民的育種目標從全目錄挑的 —— 兩者差很多，要看得出來。 */
#v-mate .note.is-warn, .note#mate-src.is-warn {
  background: color-mix(in oklab, var(--lbl-warn) 8%, transparent);
  border-left: 3px solid color-mix(in oklab, var(--lbl-warn) 45%, transparent);
  padding: 9px 12px; border-radius: 8px;
}

/* ── 乳價（官方計價表）── */
#v-lact .ld-price__hd {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 4px 0 12px;
}
/* 三步查表路徑（設計包）：農民手上有同一張表，看得到路徑才對得起來。 */
#v-lact .ld-price__path {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto;
}
#v-lact .ld-step {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 14px; border-radius: 11px; white-space: nowrap;
  background: var(--surface-soft, #f2f6f3); border: 1px solid var(--line-1);
  font-size: 11.5px; color: var(--ink-600); font-variant-numeric: tabular-nums;
}
#v-lact .ld-step small { font-size: 10.5px; color: var(--ink-500, var(--ink-600)); }
#v-lact .ld-step b { font-size: 14px; font-weight: 750; color: var(--ink-900, var(--ink-800)); }
#v-lact .ld-step.is-out {
  background: color-mix(in oklab, var(--lbl-ok) 12%, transparent);
  border-color: color-mix(in oklab, var(--lbl-ok) 34%, transparent);
}
#v-lact .ld-step.is-out b { color: var(--lbl-ok); }
#v-lact .ld-arrow { color: var(--ink-400, var(--ink-500)); flex: none; }
#v-lact .ld-price__season {
  margin-left: 8px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: color-mix(in oklab, var(--lbl-ok) 13%, transparent); color: var(--lbl-ok);
}
@media (max-width: 1179px) { #v-lact .ld-price__path { margin-left: 0; width: 100%; } }
#v-lact .ld-price__v { display: flex; align-items: baseline; gap: 5px; }
#v-lact .ld-price__v b {
  font-size: 34px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink-900, var(--ink-800));
}
#v-lact .ld-price__v s { text-decoration: none; font-size: 12px; color: var(--ink-600); }
#v-lact .ld-price__g { display: flex; gap: 16px; flex-wrap: wrap; }
#v-lact .ld-price__g small { display: block; font-size: 10.5px; color: var(--ink-500, var(--ink-600)); }
#v-lact .ld-price__g b { font-size: 14px; font-variant-numeric: tabular-nums; }
/* 不予計價 —— 這是結論不是缺資料，所以是警示樣式不是中性的 ld-na */
#v-lact .ld-price__rej {
  padding: 12px 14px; border-radius: 11px; font-size: 13px; line-height: 1.75;
  background: color-mix(in oklab, var(--lbl-warn) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--lbl-warn) 34%, transparent);
}
#v-lact .ld-price__rej > b:first-child { display: block; color: var(--lbl-warn); margin-bottom: 3px; }
#v-lact .ld-price__act {
  margin-top: 9px; display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--brand, var(--ink-900));
}
#v-lact .ld-price__cap {
  margin: 9px 0 2px; padding: 9px 11px; border-radius: 10px; font-size: 12px; line-height: 1.6;
  background: color-mix(in oklab, var(--lbl-warn) 9%, transparent);
  border: 1px solid color-mix(in oklab, var(--lbl-warn) 26%, transparent);
}

/* ── 個別牛清單 ── */
#v-lact .ld-list { padding: 15px 16px 13px; }
#v-lact .ld-list__hd { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
#v-lact .ld-chips { display: flex; gap: 6px; flex-wrap: wrap; }
#v-lact .ld-chip {
  font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--line-1); background: var(--card); color: var(--ink-700, var(--ink-600)); cursor: pointer;
}
#v-lact .ld-chip.on { background: var(--green, #33ab6f); color: #fff; border-color: transparent; }
#v-lact .ld-chip s { text-decoration: none; opacity: .7; margin-left: 3px; }
#v-lact .ld-chip.is-clr { color: var(--ink-600); }
#v-lact .ld-th, #v-lact .ld-tr {
  display: grid; grid-template-columns: 1.35fr .5fr .8fr .85fr .95fr .8fr 1.25fr 26px;
  gap: 8px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--line-1);
}
#v-lact .ld-th { font-size: 11px; color: var(--ink-600); border-top: none; }
#v-lact .ld-tr { cursor: pointer; font-size: 12.5px; font-variant-numeric: tabular-nums; }
#v-lact .ld-tr:hover { background: var(--surface-2); }
#v-lact .ld-c--n { font-weight: 800; }
#v-lact .ld-c--v b { font-size: 14px; font-weight: 800; }
#v-lact .ld-c--ym em { font-style: normal; font-size: 10px; margin-left: 5px; color: var(--lbl-warn); }
/* 非本月受檢：整列轉淡。她顯示的是自己最後一次的資料，不是本月的數字 —— 
   實測全國 39.1% 的牛落在這一類，逐場中位 36.4%、最差場 89.3%。 */
#v-lact .ld-tr.is-old { color: var(--ink-500, var(--ink-600)); }
#v-lact .ld-tr.is-old .ld-c--v b { font-weight: 700; }

/* 名冊列：頭像、狀態徽章、高風險整列著色（設計包 05/06）。
   ⚠️ 頭像是**圖示不是照片** —— 我們沒有 313 頭的實拍，放示意寫真會讓農民
   以為那是她自己的牛。用線性牛頭圖示保留設計稿的視覺節奏，但不假裝是實照。 */
#v-lact .ld-av {
  width: 28px; height: 28px; border-radius: 50%; margin-right: 10px; flex: none;
  object-fit: cover; object-position: 52% 40%; background: var(--surface-2);
}
#v-lact .ld-tr.is-old .ld-av { filter: grayscale(1); opacity: .55; }
#v-lact .ld-c--n { display: flex; align-items: center; }
#v-lact .ld-tr .ld-c.is-bad { color: var(--lbl-bad); font-weight: 800; }
#v-lact .ld-c--go { color: var(--ink-400, var(--ink-500)); display: flex; justify-content: flex-end; }
#v-lact .ld-tr.is-risk { background: color-mix(in oklab, var(--bad-50, #fbeae3) 62%, transparent); }
#v-lact .ld-tr.is-risk:hover { background: color-mix(in oklab, var(--bad-50, #fbeae3) 85%, transparent); }
#v-lact .ld-b {
  display: inline-block; font-style: normal; font-size: 10.5px; font-weight: 700; white-space: nowrap;
  padding: 3px 9px; border-radius: var(--radius-pill); border: 1px solid currentColor;
  background: var(--surface-0);
}
#v-lact .ld-b.is-green  { color: var(--lbl-good); }
#v-lact .ld-b.is-red    { color: var(--lbl-bad); }
#v-lact .ld-b.is-amber  { color: var(--lbl-warn); }
#v-lact .ld-b.is-violet { color: #7c5cbf; }
#v-lact .ld-b.is-blue   { color: #3b7fc4; }
#v-lact .ld-b.is-teal   { color: #2f8f88; }
#v-lact .ld-b.is-brown  { color: #96693a; }
#v-lact .ld-b.is-grey   { color: var(--ink-500); border-color: var(--line-strong, var(--line-1)); }
/* 匯出鈕 */
#v-lact .ld-exp {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; cursor: pointer;
  border-radius: var(--radius-pill); border: 1px solid var(--line-strong, var(--line-1));
  background: var(--surface-0); color: var(--ink-700, var(--ink-600)); font-size: 12.5px; font-weight: 600;
}
#v-lact .ld-exp:hover { background: var(--surface-2); }
#v-lact .ld-cap1--l { justify-content: flex-start; width: 100%; margin-top: 4px; }
/* 編號式分頁 */
#v-lact .cixpg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
#v-lact .cixpg__b { display: inline-flex; align-items: center; gap: 4px; }
#v-lact .cixpg__p {
  min-width: 30px; height: 30px; padding: 0 8px; cursor: pointer; font-size: 12.5px; font-weight: 700;
  border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ink-600);
}
#v-lact .cixpg__p:hover { background: var(--surface-2); }
#v-lact .cixpg__p.on { background: var(--brand-800); color: #fff; }
#v-lact .cixpg__t { color: var(--ink-400, var(--ink-500)); font-style: normal; padding: 0 2px; }
#v-lact .cixpg__n { font-size: 12px; color: var(--ink-500); }
@media (max-width: 767px) {
  #v-lact .ld-th { display: none; }
  #v-lact .ld-tr { grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  #v-lact .ld-tr .ld-c::before { content: attr(data-l) '　'; font-size: 10px; color: var(--ink-500, var(--ink-600)); }
  #v-lact .ld-quad { grid-template-columns: 1fr; }
}

/* ── 個別牛抽屜 ── */
#lactsheet .ld-alerts { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
#lactsheet .ld-alert {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; background: var(--warn-50, #fdf4e3); color: var(--lbl-warn);
}
#lactsheet .ld-when { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-600); margin-top: 3px; }
#lactsheet .ld-when.is-old { color: var(--lbl-warn); font-weight: 700; }
#lactsheet .ld-cv { margin-top: 12px; }

/* ══════════════════════════════════════════════════════════════════════
   個別母牛抽屜（設計包 07 / tablet-04 / mobile-05）
   ══════════════════════════════════════════════════════════════════════ */
#lactsheet .sheet-hd { gap: 10px; }
#lactsheet .ld-nav { display: flex; align-items: center; gap: 7px; margin-left: auto; }
#lactsheet .ld-nav__b {
  display: inline-flex; align-items: center; gap: 3px; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--line-1); background: var(--card); color: var(--ink-700, var(--ink-600));
  font-size: 12px; font-weight: 650; cursor: pointer;
}
#lactsheet .ld-nav__b:hover:not(:disabled) { background: var(--surface-soft, #f2f6f3); }
#lactsheet .ld-nav__b:disabled { opacity: .38; cursor: default; }
#lactsheet .ld-nav em {
  font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--ink-600); min-width: 46px; text-align: center;
}

/* 主視覺：照片是共用示意資產，牛號等一律留在 HTML 層 */
#lactsheet .ldc-hero {
  position: relative; overflow: hidden; border-radius: 14px; min-height: 132px;
  display: flex; align-items: flex-end; background: var(--brand-900, #12362a); margin-bottom: 12px;
}
#lactsheet .ldc-hero__ph { position: absolute; inset: 0; }
#lactsheet .ldc-hero__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 34%; display: block; }
#lactsheet .ldc-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(5 51 40 / .96) 0%, rgb(5 51 40 / .88) 34%,
              rgb(5 51 40 / .42) 56%, transparent 72%);
}
#lactsheet .ldc-hero__in { position: relative; z-index: 1; padding: 15px 16px; color: #fff; }
#lactsheet .ldc-hero__id { display: block; font-size: 27px; font-weight: 800; line-height: 1.1; }
#lactsheet .ldc-hero__sub { display: block; font-size: 12.5px; color: rgb(255 255 255 / .82); margin-top: 2px; }
#lactsheet .ldc-hero__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
#lactsheet .ldc-chip {
  padding: 4px 10px; border-radius: 8px; font-size: 11.5px;
  background: rgb(255 255 255 / .15); border: 1px solid rgb(255 255 255 / .2);
}
#lactsheet .ldc-chip.is-old { background: rgb(253 226 178 / .92); color: #6b4106; border-color: transparent; }
#lactsheet .ldc-hero__alerts { position: absolute; z-index: 1; right: 12px; top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }

/* 八項實測 4×2；只有被旗標命中的那幾項標紅（判準仍在 td.rule） */
#lactsheet .ld-kv { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
#lactsheet .ld-kv > div {
  background: var(--card); border: 1px solid var(--line-1); border-radius: 12px; padding: 11px 12px;
}
#lactsheet .ld-kv small { display: block; font-size: 11.5px; color: var(--ink-600); margin-bottom: 3px; }
#lactsheet .ld-kv b { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
#lactsheet .ld-kv > div.is-bad { border-color: color-mix(in oklab, var(--lbl-warn) 42%, transparent);
  background: color-mix(in oklab, var(--lbl-warn) 6%, transparent); }
#lactsheet .ld-kv > div.is-bad b { color: var(--lbl-warn); }

/* 兩張排名卡 */
#lactsheet .ld-rank { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 12px 0; }
#lactsheet .ld-rank__m { background: var(--card); border: 1px solid var(--line-1); border-radius: 12px; padding: 13px 14px; }
#lactsheet .ld-rank__m > small { display: block; font-size: 12px; color: var(--ink-600); margin-bottom: 5px; }
#lactsheet .ld-rank__v { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
#lactsheet .ld-rank__v b { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
#lactsheet .ld-rank__m i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-500, var(--ink-600)); margin-top: 6px; }
#lactsheet .ld-rank__tag {
  padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: var(--surface-soft, #f2f6f3); color: var(--ink-600);
}
#lactsheet .ld-rank__tag.is-bad  { background: color-mix(in oklab, var(--lbl-warn) 14%, transparent); color: var(--lbl-warn); }
#lactsheet .ld-rank__tag.is-good { background: color-mix(in oklab, var(--lbl-ok) 14%, transparent); color: var(--lbl-ok); }
/* 全國位置刻度條：她 / 中位 / 前 25% 三個錨 */
#lactsheet .ld-scaleb { position: relative; height: 3px; border-radius: 2px; background: var(--line-1); margin: 14px 0 6px; }
#lactsheet .ld-scaleb__t { position: absolute; top: 50%; transform: translate(-50%,-50%); }
#lactsheet .ld-scaleb__t i {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink-500, var(--ink-600)); border: 2px solid var(--card);
}
#lactsheet .ld-scaleb__t i.is-me  { background: var(--lbl-warn); width: 11px; height: 11px; }
#lactsheet .ld-scaleb__t i.is-top { background: var(--lbl-ok); }
#lactsheet .ld-scaleb__lab { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-500, var(--ink-600)); font-variant-numeric: tabular-nums; }
#lactsheet .ld-scaleb__lab .is-me  { color: var(--lbl-warn); font-weight: 700; }
#lactsheet .ld-scaleb__lab .is-top { color: var(--lbl-ok); }

/* 「為什麼跟月報名次不一樣」改成帶圖示的說明卡 */
#lactsheet .ld-scale {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in oklab, var(--lbl-ok) 7%, transparent);
  border: 1px solid color-mix(in oklab, var(--lbl-ok) 22%, transparent);
  font-size: 12px; line-height: 1.75; color: var(--ink-700, var(--ink-600)); margin-bottom: 12px;
}
#lactsheet .ld-scale .ic-orb { flex: none; width: 34px; height: 34px;
  background: color-mix(in oklab, var(--lbl-ok) 14%, transparent); color: var(--lbl-ok); }
#lactsheet .ld-scale b { display: block; font-size: 13px; color: var(--ink-900, var(--ink-800)); margin-bottom: 3px; }

/* 曲線下方的體細胞列：與曲線的點一一對齊（等分欄） */
#lactsheet .ld-cv__scc { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
#lactsheet .ld-cv__scc > small { flex: none; width: 52px; font-size: 10.5px; color: var(--ink-500, var(--ink-600)); line-height: 1.35; }
#lactsheet .ld-cv__sccr { flex: 1; display: flex; justify-content: space-around; gap: 4px; }
#lactsheet .ld-cv__sccr span {
  flex: 1; text-align: center; padding: 3px 4px; border-radius: 7px; font-size: 11px;
  font-variant-numeric: tabular-nums; background: var(--surface-soft, #f2f6f3); color: var(--ink-600);
}
/* 定位模式：JS 依 chLine 的座標把每個 chip 放到對應的點下方（見 ldCowCurve 尾端）。
   沒有這一段就是 space-around 平均散開，與依 DIM 落點的曲線對不上。 */
#lactsheet .ld-cv__sccr.is-pos { position: relative; display: block; height: 22px; }
#lactsheet .ld-cv__sccr.is-pos span {
  position: absolute; top: 0; transform: translateX(-50%); flex: none; min-width: 44px;
}
#lactsheet .ld-cv__sccr span.is-bad {
  background: color-mix(in oklab, var(--lbl-warn) 13%, transparent); color: var(--lbl-warn); font-weight: 700;
}

@media (max-width: 767px) {
  #lactsheet .ld-kv { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #lactsheet .ld-rank { grid-template-columns: 1fr; }
  /* ⚠️ 表頭在 375px 放不下「圖示＋標題＋上一頭／1 of N／下一頭＋✕」。
     不設 min-width:0 的話 flex 會先壓縮標題那個 <b>，「個別母牛泌乳明細」被擠成
     一個字一行的直排（實測）。改成標題不收縮、導覽換到第二行。 */
  #lactsheet .sheet-hd { flex-wrap: wrap; row-gap: 8px; }
  #lactsheet .sheet-hd > b { flex: 1 0 auto; white-space: nowrap; }
  #lactsheet .ld-nav { order: 3; width: 100%; margin-left: 0; justify-content: space-between; }
  #lactsheet .ld-nav__b { padding: 7px 12px; font-size: 12px; }
  #lactsheet .ldc-hero__scrim {
    background: linear-gradient(180deg, rgb(5 51 40 / .3) 0%, rgb(5 51 40 / .8) 48%, rgb(5 51 40 / .96) 100%);
  }
}


/* 抽屜裡的曲線浮層（設計包 07）：比主頁那兩張小一號，內容是「這一次 vs 上一次」 */
#lactsheet .ldc-tip { min-width: 0; }
#lactsheet .ldc-tip .th { font-size: 12px; margin-bottom: 2px; }
#lactsheet .ldc-tip .nb { margin-top: 0; font-size: 11.5px; }
#lactsheet .ldc-tip .nb.is-bad { color: var(--lbl-bad); font-weight: 700; }
/* 體細胞列的膠囊：正常是描邊，超標才填色 —— 設計稿讓 551.2 那顆自己跳出來 */
#lactsheet .ld-cv__sccr span {
  background: var(--surface-0); border: 1px solid var(--line-1); color: var(--ink-700, var(--ink-600));
}

/* 「為什麼跟月報不一樣」那張卡：句中的 <b> 只是強調，不能是 block ——
   變成 block 會把一句話拆成五行，讀起來像五個條目。 */
#lactsheet .ld-scale div b { display: inline; }
#lactsheet .ld-scale div > b:first-child { display: block; margin-bottom: 4px; font-size: 13px; }
/* 異常 KPI：設計稿用紅色（不是琥珀）標「這個數字有問題」 */
#lactsheet .ld-kv > div.is-bad b { color: var(--lbl-bad); }

/* ── 手機版趨勢圖（設計包 mobile 02）──────────────────────────────────────
   手機不放浮層卡：317px 寬的圖被 128px 的卡片蓋掉四成，最後四個點全看不到。
   設計稿改成在標題右下印最新值，兩者互斥。 */
.ld-onlynarrow { display: none; }
#v-lact .ld-latest {
  display: none; align-items: baseline; justify-content: flex-end; gap: 14px;
  margin: -4px 2px 2px; font-variant-numeric: tabular-nums;
}
#v-lact .ld-latest b { font-size: 26px; font-weight: 800; color: var(--brand-800); }
#v-lact .ld-latest b.is-amber { color: var(--lbl-warn); }
#v-lact .ld-latest i { font-style: normal; font-size: 19px; font-weight: 700; color: var(--ink-500); }
#v-lact .ld-latest s { text-decoration: none; font-size: 12px; font-weight: 600; margin-left: 3px; color: var(--ink-500); }

@media (max-width: 767px) {
  .ld-onlywide { display: none; }
  .ld-onlynarrow { display: block; }
  #v-lact .ld-tip, #v-lact .ld-lead { display: none; }
  #v-lact .ld-latest { display: flex; }
  #v-lact .chart-t { flex-wrap: wrap; }
  #v-lact .ld-rchip { margin-left: auto; }
  /* 設計稿手機版只留「連續 N 個月上升」那顆膠囊，門檻與月差在窄screen 是雜訊 */
  #v-lact .ld-sum--3 { justify-content: flex-end; }
  #v-lact .ld-sum--3 .ld-sum__i { display: none; }
  #v-lact .ld-sum--3 .ld-sum__a { padding-right: 0; }
}
/* 交叉表在手機要能左右滑，並且說出來 */
#v-lact #ld-crosstab { overflow-x: auto; }
/* ⚠️ 基礎規則要排在 media query **之前** —— 同特異度時後面的贏。
   這個順序踩過兩次（.ld-latest 與這裡），寫的時候很容易反過來。 */
#v-lact .ld-xscroll { display: none; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px; font-size: 11.5px; color: var(--ink-500); }
@media (max-width: 767px) { #v-lact .ld-xscroll { display: flex; } }

/* 交叉表格子可點 → 篩名冊 */
#v-lact .ld-x td[role="button"] { cursor: pointer; }
#v-lact .ld-x td[role="button"]:hover { filter: brightness(.97); }
#v-lact .ld-x td.is-picked { outline: 2px solid var(--brand-800); outline-offset: -2px; }
/* 「N 頭這個月沒出現」從純文字改成可點的篩選 */
#v-lact .ld-mombar__i.is-act {
  border: none; background: none; font: inherit; cursor: pointer; color: inherit;
  border-radius: var(--radius-pill); padding: 4px 10px;
}
#v-lact .ld-mombar__i.is-act:hover { background: var(--warn-50, #fdf4e3); }
#v-lact .ld-mombar__i.is-act.is-picked { background: var(--lbl-warn); color: #fff; }
#v-lact .ld-mombar__i.is-act.is-picked b { color: #fff; }

/* 行動卡：條件一行 + ⓘ（來由收進 title），設計包 04 的卡片就這麼窄 */
#v-lact .ld-cond { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-600); }
#v-lact .ld-nat i { font-style: normal; color: var(--ink-400, var(--ink-500)); margin: 0 3px; }
#v-lact .ld-nat u { text-decoration: none; display: block; margin-top: 3px; font-weight: 700; color: var(--ink-600); }
#v-lact .ld-nat u.is-bad { color: var(--lbl-bad); }
#v-lact .ld-nat u.is-good { color: var(--lbl-good); }

/* 行動卡：設計包 04 是 4 欄等寬（7 張＝4＋3，最後一格留白）。
   auto-fit 會把每列剩下的空間分給最後一張，於是同一頁出現三種卡寬。 */
@media (min-width: 1240px) { #v-lact .ld-acts { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 900px) and (max-width: 1239px) { #v-lact .ld-acts { grid-template-columns: repeat(3, minmax(0,1fr)); } }
#v-lact .ld-acts .act-body > b { line-height: 1.5; }
/* 四象限：說明欄依內容取寬，不要被中間欄擠到換行（「上次高 → 本月降下來」）*/
@media (min-width: 1024px) {
  #v-lact .ld-q__m { flex: 1 1 auto; min-width: 0; }
  #v-lact .ld-q__r { flex: 0 0 auto; }
  #v-lact .ld-q i { white-space: nowrap; }
}

/* 期間列：分段鈕（設計稿）+ 起算年份下拉。26 個年份做成按鈕會排三行。 */
#v-lact .ld-rangebar { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 20px; }
#v-lact .ld-rangebar .ld-range { margin: 0; }
#v-lact .ld-yearsel { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-600); }
#v-lact .ld-yearsel select {
  padding: 7px 10px; border-radius: var(--radius-pill); border: 1px solid var(--line-1);
  background: var(--surface-0); color: var(--ink-800, var(--ink-700)); font: inherit; font-size: 12.5px; cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════
   我過去的配種決策（遺傳評估頁的入口卡 + 抽屜報告）
   版面依高保真設計包 v1（desktop 01–06 / tablet 01–03 / mobile 01–06）。
   ⚠️ 本段所有基礎宣告都寫在檔尾的 @media 之前 —— 相同權重下後寫的贏，
      基礎規則寫在 @media 後面會把 RWD 靜默蓋掉（這個坑在泌乳性能踩過兩次）。
   ⚠️ #v-lact 底下那批 .ld-* 工具樣式（.ld-seg/.ld-search/.ld-yearsel/
      .ld-exp/.ld-th/.ld-tr/.ld-cap1/.cixpg…）在 #siresheet 裡**拿不到**，
      要用就得在這裡自己給一份基礎宣告。
   ══════════════════════════════════════════════════════════════════════ */
#v-health .hh-sires { cursor: pointer; transition: box-shadow var(--duration-fast, .15s) ease; }
#v-health .hh-sires:hover { box-shadow: 0 3px 14px rgb(16 32 24 / .12); }
#v-health .hh-sires .act-cta { margin-top: 6px; display: inline-block; }
#v-health .hh-sires.is-over .kb em { color: var(--lbl-warn); font-weight: 700; }
#v-health .hh-sires.is-over .ic-orb { background: var(--warn-50, #fdf4e3); color: var(--lbl-warn); }

/* ── 標題列：資料區間膠囊。兩態 —— 有報告顯示 2002–2026，沒有就顯示原因 ── */
#siresheet .sheet-hd b { flex: none; }
#siresheet .sr-span {
  margin-right: auto; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--surface-2); font-size: 12.5px; font-weight: 700;
  color: var(--ink-700, var(--ink-600)); font-variant-numeric: tabular-nums;
}
#siresheet .sr-span.is-none {
  background: none; padding: 0 0 0 12px; font-weight: 400; font-size: 12.5px;
  color: var(--ink-500); border-left: 1px solid var(--line-1);
}

/* ── ① 主視覺 ─────────────────────────────────────────────────────── */
#siresheet .sr-hero { min-height: 178px; margin-bottom: 14px; border-radius: var(--radius-lg, 14px); }
#siresheet .sr-hero .page-hero__media img { object-position: 72% 44%; }
/* 共用的 __scrim 是由下往上的黑幕；這張稿是左側深綠實色往右淡出，要改寫 */
#siresheet .sr-hero .page-hero__scrim {
  background: linear-gradient(90deg, var(--brand-950, #0c2a1f) 0%, rgb(12 42 31 / .97) 34%,
              rgb(12 42 31 / .72) 52%, rgb(12 42 31 / .12) 74%, rgb(12 42 31 / 0) 88%);
}
#siresheet .sr-hero .page-hero__content { padding: 20px 22px; max-width: 66%; }
#siresheet .sr-hero .page-hero__title { font-size: 23px; }
#siresheet .sr-hero .page-hero__desc { font-size: 12.5px; max-width: none; margin-top: 6px; }
#siresheet .sr-hero__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
#siresheet .sr-hero__chips span {
  padding: 7px 13px; border-radius: var(--radius-pill); font-size: 12px;
  background: rgb(255 255 255 / .13); border: 1px solid rgb(255 255 255 / .24);
  color: rgb(255 255 255 / .88); font-variant-numeric: tabular-nums;
}
#siresheet .sr-hero__chips b { font-size: 14.5px; font-weight: 800; color: #fff; }

/* ── ② 結論三卡 ───────────────────────────────────────────────────── */
#siresheet .sr-lead3 {
  display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.1fr) minmax(0, 1.18fr);
  gap: 12px; margin-bottom: 12px;
}
#siresheet .sr-avg, #siresheet .sr-top {
  border-radius: var(--radius-lg, 14px); padding: 15px 17px;
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
}
#siresheet .sr-avg { background: var(--card); border: 1px solid var(--line-1); }
#siresheet .sr-avg__n { display: flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; }
#siresheet .sr-avg__n b { font-size: 34px; font-weight: 800; line-height: 1; color: var(--ink-900, var(--ink-800)); }
#siresheet .sr-avg__n s { text-decoration: none; font-size: 13px; color: var(--ink-500); }
#siresheet .sr-avg em { font-style: normal; font-size: 11.5px; color: var(--ink-500); }
#siresheet .sr-top.is-up { background: var(--you-50, #eef7f1); border: 1px solid color-mix(in oklab, var(--lbl-good) 20%, transparent); }
#siresheet .sr-top.is-dn { background: var(--coral-050, #fdf1eb); border: 1px solid color-mix(in oklab, var(--coral-600) 22%, transparent); }
#siresheet .sr-top small { font-size: 12.5px; color: var(--ink-600); }
#siresheet .sr-top small b { font-weight: 750; }
#siresheet .sr-top.is-up small b { color: var(--lbl-good); }
#siresheet .sr-top.is-dn small b { color: var(--lbl-bad); }
#siresheet .sr-top__r { display: flex; align-items: baseline; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
#siresheet .sr-top__r > * { padding: 0 13px; }
#siresheet .sr-top__r > :first-child { padding-left: 0; }
#siresheet .sr-top__r > * + * { border-left: 1px solid color-mix(in oklab, var(--ink-500) 22%, transparent); }
#siresheet .sr-top__r i { font-style: normal; font-size: 12.5px; color: var(--ink-700, var(--ink-600)); }
#siresheet .sr-top__r em { font-style: normal; font-size: 21px; font-weight: 800; }
#siresheet .sr-top__r em s { text-decoration: none; font-size: 12.5px; font-weight: 600; }
#siresheet .sr-top.is-up .sr-top__r em { color: var(--lbl-good); }
#siresheet .sr-top.is-dn .sr-top__r em { color: var(--lbl-bad); }
#siresheet .sr-top__r u { text-decoration: none; font-size: 11.5px; color: var(--ink-500); }
#siresheet .sr-divcard { margin-bottom: 4px; }
#siresheet .sr-divcap {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; font-size: 11.5px; color: var(--ink-500);
}

/* ── 區段標題 ─────────────────────────────────────────────────────── */
#siresheet .sr-h3 {
  margin: 18px 0 10px; font-size: 15.5px; font-weight: 800;
  color: var(--ink-900, var(--ink-800)); display: flex; align-items: center; gap: 9px;
}
#siresheet .sr-cnt {
  padding: 4px 12px; border-radius: var(--radius-pill); background: var(--surface-2);
  font-size: 12.5px; font-weight: 700; color: var(--ink-700, var(--ink-600));
  font-variant-numeric: tabular-nums;
}

/* ── ③ 為什麼會這樣 ───────────────────────────────────────────────── */
#siresheet .sr-why3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#siresheet .sr-w { padding: 13px 14px 15px; border-radius: 13px; border: 1px solid transparent; }
#siresheet .sr-w.is-g { background: var(--you-50, #eef7f1); border-color: color-mix(in oklab, var(--lbl-good) 16%, transparent); }
#siresheet .sr-w.is-a { background: var(--surface-warm, #faf5ea); border-color: color-mix(in oklab, var(--lbl-warn) 18%, transparent); }
#siresheet .sr-w.is-r { background: var(--coral-050, #fdf1eb); border-color: color-mix(in oklab, var(--coral-600) 18%, transparent); }
#siresheet .sr-w b { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 750; line-height: 1.45; }
#siresheet .sr-w b i { font-style: normal; margin-right: 6px; font-weight: 800; color: var(--ink-500); }
#siresheet .sr-w .ic-orb { flex: none; width: 38px; height: 38px; background: var(--surface-0); }
#siresheet .sr-w.is-g .ic-orb { color: var(--lbl-good); }
#siresheet .sr-w.is-a .ic-orb { color: var(--lbl-warn); }
#siresheet .sr-w.is-r .ic-orb { color: var(--lbl-bad); }
#siresheet .sr-w p { margin: 9px 0 0; font-size: 12px; line-height: 1.75; color: var(--ink-600); }

/* ── ④ 集中度：標題右上的四顆藥丸 + 圖例 ──────────────────────────── */
#siresheet .sr-cardhd { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#siresheet .sr-pills { display: flex; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
#siresheet .sr-pills span {
  padding: 7px 14px; border-radius: var(--radius-pill); background: var(--surface-2);
  font-size: 12px; font-weight: 650; color: var(--ink-600);
}
#siresheet .sr-pills .is-y { background: var(--brand-900, #12362a); color: #fff; font-weight: 750; }
#siresheet .sr-pills .is-over { background: var(--coral-050, #fdf1eb); color: var(--lbl-bad); }
#siresheet .sr-pills b { font-weight: 800; }
#siresheet .sr-lgd { display: flex; gap: 20px; align-items: center; margin: 10px 0 2px; font-size: 11.5px; color: var(--ink-500); }
#siresheet .sr-lgd span { display: inline-flex; align-items: center; gap: 7px; }
#siresheet .sr-lgd i.sq { width: 13px; height: 13px; border-radius: 3px; background: color-mix(in oklab, var(--pal-you) 26%, transparent); }
#siresheet .sr-lgd i.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pal-bad); }

/* ── 兩欄版面。左右比例兩處相反，所以 --q 另給一組 ─────────────────── */
#siresheet .sr-two { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; align-items: start; }
#siresheet .sr-two--q { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
#siresheet .sr-two--q > .card:last-child { display: flex; flex-direction: column; }

/* ── ⑤ 下一次怎麼做 ───────────────────────────────────────────────── */
#siresheet .sr-next { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
#siresheet .sr-n { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 13px; }
#siresheet .sr-n.is-g { background: var(--you-50, #eef7f1); }
#siresheet .sr-n.is-r { background: var(--coral-050, #fdf1eb); }
#siresheet .sr-n em {
  flex: none; width: 27px; height: 27px; border-radius: 50%; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
}
#siresheet .sr-n.is-g em { background: var(--brand-700, #1f6b4e); }
#siresheet .sr-n.is-r em { background: var(--coral-600, #d4653a); }
#siresheet .sr-n b { display: block; font-size: 13px; font-weight: 750; }
#siresheet .sr-n p { margin: 3px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-600); }
#siresheet .sr-n .ic-orb { margin-left: auto; flex: none; width: 40px; height: 40px; background: var(--surface-0); }
#siresheet .sr-n.is-g .ic-orb { color: var(--lbl-good); }
#siresheet .sr-n.is-r .ic-orb { color: var(--lbl-bad); }
#siresheet .sr-warn {
  display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; padding: 13px 15px;
  border-radius: 13px; font-size: 13px; line-height: 1.6; color: var(--ink-700, var(--ink-600));
  background: var(--coral-050, #fdf1eb); border: 1px solid color-mix(in oklab, var(--coral-600) 22%, transparent);
}
#siresheet .sr-warn .ic-orb { flex: none; width: 36px; height: 36px; }

/* ── ⑥ 公牛清單 ───────────────────────────────────────────────────── */
#siresheet .sr-list__hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#siresheet .sr-list__hd .sr-h3 { margin: 18px 0 10px; }
#siresheet .sr-list__hd em { font-style: normal; font-size: 12.5px; color: var(--ink-500); }
#siresheet .sr-list { padding: 15px 16px 13px; }
#siresheet .sr-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
#siresheet .ld-search {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-1); background: var(--card); color: var(--ink-500, var(--ink-600));
}
#siresheet .ld-search input {
  border: 0; background: none; outline: none; font: inherit; font-size: 12.5px;
  width: 170px; color: var(--ink-900, var(--ink-800));
}
#siresheet .ld-seg { display: inline-flex; background: var(--surface-soft, #f2f6f3); border-radius: 999px; padding: 3px; }
#siresheet .ld-seg__b {
  border: 0; background: none; cursor: pointer; padding: 6px 16px; border-radius: 999px;
  font-size: 12px; font-weight: 650; color: var(--ink-600);
}
#siresheet .ld-seg__b.on { background: var(--brand-900, #12362a); color: #fff; }
#siresheet .ld-yearsel { margin-left: auto; display: inline-flex; align-items: center; }
#siresheet .ld-yearsel select {
  padding: 8px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line-1);
  background: var(--surface-0); color: var(--ink-800, var(--ink-700)); font: inherit; font-size: 12.5px; cursor: pointer;
}
#siresheet .sr-th, #siresheet .sr-tr {
  display: grid; grid-template-columns: 2.1fr .6fr .85fr .92fr 1fr .95fr .66fr .82fr 24px;
  gap: 8px; align-items: center; padding: 11px 4px; border-top: 1px solid var(--line-1);
}
#siresheet .sr-th { font-size: 11.5px; color: var(--ink-600); border-top: none; }
#siresheet .sr-th > span { text-align: center; }
#siresheet .sr-th > :first-child { text-align: left; }
#siresheet .sr-tr { font-size: 12.5px; font-variant-numeric: tabular-nums; cursor: pointer; }
#siresheet .sr-tr:hover { background: var(--surface-2); }
#siresheet .sr-tr:hover .ld-c--go { color: var(--brand-700, #1f6b4e); }
#siresheet .sr-tr .ld-c { display: flex; align-items: center; justify-content: center; min-width: 0; }
#siresheet .sr-tr .ld-c--n {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  font-size: 13px; font-weight: 700; color: var(--ink-900, var(--ink-800));
}
#siresheet .sr-tr .ld-c--n i { font-style: normal; font-size: 11px; font-weight: 400; color: var(--ink-500); }
#siresheet .sr-tr .ld-c--v { font-size: 13.5px; font-weight: 800; }
#siresheet .sr-tr .ld-c--v.is-up { color: var(--lbl-good); }
#siresheet .sr-tr .ld-c--v.is-dn { color: var(--lbl-bad); }
#siresheet .sr-tr .ld-c--v.is-mute { color: var(--ink-400, var(--ink-500)); font-weight: 600; }
#siresheet .sr-tr .ld-c.is-neg { color: var(--lbl-bad); }
#siresheet .sr-tr .ld-c--d u { text-decoration: none; font-size: 12px; color: var(--ink-700, var(--ink-600)); }
/* 女兒 1–9 頭：琥珀膠囊寫明「樣本少」。不用降透明度取代文字 ——
   看得懂的是字，看不懂的是灰階，而這件事必須看得懂。 */
#siresheet .sr-tr .ld-c--d u.is-thin {
  padding: 4px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700;
  background: var(--amber-100, #fbf0d9); color: var(--amber-700, #96690f);
}
#siresheet .sr-tr .ld-c--d u.is-non { color: var(--ink-400, var(--ink-500)); }
#siresheet .sr-tr .ld-c--go { color: var(--ink-400, var(--ink-500)); justify-content: flex-end; }
#siresheet .ld-na {
  padding: 22px 16px; text-align: center; font-size: 12.5px; line-height: 1.7;
  color: var(--ink-600); background: var(--surface-2); border-radius: 9px;
}
#siresheet .ld-cap1 { display: flex; align-items: center; gap: 7px; justify-content: center; margin-top: 12px; font-size: 11.5px; color: var(--ink-500); }
#siresheet .ld-cap1 [data-ic] { flex: none; }
#siresheet .ld-cap1--l { justify-content: flex-start; width: 100%; margin-top: 8px; }
#siresheet .ld-i { color: var(--ink-400, var(--ink-500)); display: inline-flex; cursor: help; }
#siresheet .cixpg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
#siresheet .cixpg__b { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
#siresheet .cixpg__p {
  min-width: 32px; height: 32px; padding: 0 8px; cursor: pointer; font-size: 12.5px; font-weight: 700;
  border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--ink-600);
}
#siresheet .cixpg__p:hover { background: var(--surface-2); }
#siresheet .cixpg__p.on { border-color: var(--brand-700, #1f6b4e); color: var(--brand-700, #1f6b4e); }

/* ── ⑦ 資料品質 ───────────────────────────────────────────────────── */
#siresheet .sr-q4 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 11px; }
#siresheet .sr-q { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 13px; background: var(--surface-2); }
#siresheet .sr-q.is-r { background: var(--coral-050, #fdf1eb); }
#siresheet .sr-q .ic-orb { flex: none; width: 42px; height: 42px; background: var(--surface-0); }
#siresheet .sr-q b { display: block; font-size: 25px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
#siresheet .sr-q small { font-size: 11.5px; color: var(--ink-500); }
#siresheet .sr-bar { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 4px 6px 4px 14px; }
#siresheet .sr-bar > small { font-size: 12.5px; font-weight: 700; color: var(--ink-700, var(--ink-600)); }
#siresheet .sr-bar__r { display: flex; align-items: center; gap: 11px; }
#siresheet .sr-bar__t { flex: 1; height: 9px; border-radius: 999px; background: var(--track); overflow: hidden; }
#siresheet .sr-bar__t i { display: block; height: 100%; border-radius: 999px; background: var(--brand-700, #1f6b4e); }
#siresheet .sr-bar__r b { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
#siresheet .sr-bar em { font-style: normal; font-size: 11px; color: var(--ink-500); }
#siresheet .sr-note {
  display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 12px 15px; border-radius: 11px;
  font-size: 12.5px; color: var(--amber-700, #96690f);
  background: var(--warn-50, #fdf4e3); border: 1px solid color-mix(in oklab, var(--lbl-warn) 24%, transparent);
}
#siresheet .sr-note [data-ic] { flex: none; }

/* 對不上的代碼：分類上色。缺資料用琥珀、確認無效才用珊瑚橘，不把全部塗紅 */
#siresheet .sr-ug { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-top: 6px; }
#siresheet .sr-uc { padding: 12px 13px; border-radius: 12px; border: 1px solid var(--line-1); background: var(--surface-0); }
#siresheet .sr-uc b {
  display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-900, var(--ink-800));
  overflow-wrap: anywhere;
}
#siresheet .sr-uc > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
#siresheet .sr-uc i { font-style: normal; font-size: 11.5px; color: var(--ink-500); font-variant-numeric: tabular-nums; }
#siresheet .sr-uc u { text-decoration: none; text-align: right; font-size: 11px; line-height: 1.55; color: var(--ink-500); }
#siresheet .sr-uc.is-junk u { color: var(--lbl-bad); font-weight: 700; }
#siresheet .sr-uc.is-half u { color: var(--amber-700, #96690f); font-weight: 700; }

#siresheet .sr-guess { display: flex; align-items: flex-start; gap: 13px; padding: 14px; border-radius: 13px; background: var(--you-50, #eef7f1); margin-top: 4px; }
#siresheet .sr-guess .ic-orb { flex: none; width: 44px; height: 44px; background: var(--surface-0); color: var(--lbl-good); }
#siresheet .sr-guess b { display: block; font-size: 13.5px; font-weight: 750; line-height: 1.55; }
#siresheet .sr-guess p { margin: 8px 0 0; font-size: 12px; line-height: 1.8; color: var(--ink-600); }
#siresheet .sr-steps { counter-reset: srs; list-style: none; margin: 4px 0 0; padding: 0; }
#siresheet .sr-steps li { position: relative; padding: 9px 0 9px 36px; }
#siresheet .sr-steps li::before {
  counter-increment: srs; content: counter(srs);
  position: absolute; left: 0; top: 9px; width: 25px; height: 25px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-700, #1f6b4e); color: #fff; font-size: 11.5px; font-weight: 800;
}
#siresheet .sr-steps b { font-size: 13px; font-weight: 750; }
#siresheet .sr-steps p { margin: 3px 0 0; font-size: 11.5px; line-height: 1.65; color: var(--ink-600); }
#siresheet .ld-exp {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; cursor: pointer;
  border-radius: var(--radius-pill); border: 1px solid var(--line-strong, var(--line-1));
  background: var(--surface-0); color: var(--ink-700, var(--ink-600)); font-size: 12.5px; font-weight: 600;
}
#siresheet .ld-exp:hover { background: var(--surface-2); }
#siresheet .sr-exp { align-self: flex-end; margin-top: 10px; }

/* ── 空狀態（設計包 §4）─────────────────────────────────────────────── */
#siresheet .sr-empty { text-align: center; padding: 6px 0 20px; }
#siresheet .sr-empty img { display: block; width: min(300px, 62%); height: auto; margin: 10px auto 0; }
#siresheet .sr-empty h3 { margin: 14px 0 10px; font-size: 22px; font-weight: 800; color: var(--ink-900, var(--ink-800)); }
#siresheet .sr-empty > p { margin: 0 0 22px; font-size: 13px; line-height: 1.85; color: var(--ink-600); }
#siresheet .sr-steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: left; }
#siresheet .sr-s3 { padding: 14px; border-radius: 13px; border: 1px solid var(--line-1); background: var(--surface-0); }
#siresheet .sr-s3 b { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 750; }
#siresheet .sr-s3 b i { font-style: normal; margin-right: 6px; font-weight: 800; color: var(--ink-500); }
#siresheet .sr-s3 .ic-orb { flex: none; width: 38px; height: 38px; background: var(--you-50, #eef7f1); color: var(--lbl-good); }
#siresheet .sr-s3 p { margin: 9px 0 0; font-size: 11.5px; line-height: 1.75; color: var(--ink-600); }
#siresheet .sr-close {
  margin-top: 22px; padding: 8px 18px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--brand-700, #1f6b4e); text-decoration: underline;
}
/* 有配種紀錄、但一頭在群女兒都還沒有 —— 這是「還沒到」不是「壞掉」 */
#siresheet .sr-partial {
  display: flex; align-items: flex-start; gap: 13px; text-align: left;
  margin: 20px 0 12px; padding: 15px 16px; border-radius: 13px;
  background: var(--warn-50, #fdf4e3); border: 1px solid color-mix(in oklab, var(--lbl-warn) 22%, transparent);
}
#siresheet .sr-partial .ic-orb { flex: none; width: 42px; height: 42px; background: var(--surface-0); }
#siresheet .sr-partial b { display: block; margin-bottom: 5px; font-size: 13.5px; font-weight: 750; }
#siresheet .sr-partial p { margin: 0; font-size: 12px; line-height: 1.8; color: var(--ink-600); }

/* ══ RWD（基礎宣告全部在上面，這裡才是覆寫）══════════════════════════ */
@media (max-width: 1179px) {
  #siresheet .sr-hero .page-hero__content { max-width: 70%; }
  #siresheet .sr-lead3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #siresheet .sr-lead3 .sr-avg { grid-column: 1 / -1; }
  #siresheet .sr-two, #siresheet .sr-two--q { grid-template-columns: minmax(0, 1fr); }
  #siresheet .sr-ug { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #siresheet .sr-q4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #siresheet .sr-bar { grid-column: 1 / -1; padding: 2px 6px 6px; }
  #siresheet .sr-th, #siresheet .sr-tr { grid-template-columns: 2.2fr .62fr .95fr .95fr 1.05fr .66fr .82fr 22px; }
}
@media (max-width: 767px) {
  #siresheet .sr-hero { min-height: 168px; }
  #siresheet .sr-hero .page-hero__content { max-width: 100%; padding: 16px; }
  #siresheet .sr-hero .page-hero__scrim {
    background: linear-gradient(90deg, var(--brand-950, #0c2a1f) 0%, rgb(12 42 31 / .92) 46%, rgb(12 42 31 / .30) 100%);
  }
  #siresheet .sr-hero .page-hero__title { font-size: 20px; }
  #siresheet .sr-hero .page-hero__desc { display: none; }
  #siresheet .sr-hero__chips { gap: 6px; }
  #siresheet .sr-hero__chips span { padding: 6px 10px; font-size: 11.5px; }
  #siresheet .sr-hero__chips b { font-size: 13px; }
  /* 兩張「拉高／拉低最多」在 375px 併排會把公牛名折成三行，卡片高度也對不齊。
     改成整寬堆疊：牛名回到一行，數值列也不再換行。 */
  #siresheet .sr-lead3 { grid-template-columns: minmax(0, 1fr); }
  #siresheet .sr-avg__n b { font-size: 30px; }
  #siresheet .sr-top__r > * { padding: 0 11px; }
  #siresheet .sr-top__r em { font-size: 19px; }
  /* 集中度圖有 24 個年份欄，縮到 340px 會糊成一團 —— 設計包 §3.3 的
     「可水平捲動安全區」。發散條走 srDiv(narrow) 的窄版，不需要捲動。 */
  #siresheet #ch-srdiv, #siresheet #ch-srconc { overflow-x: auto; margin: 0 -4px; }
  #siresheet #ch-srconc > svg { min-width: 700px; }
  #siresheet .sr-why3 { gap: 8px; }
  #siresheet .sr-w { padding: 11px 10px 13px; }
  #siresheet .sr-w b { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 12px; }
  #siresheet .sr-w p { font-size: 11.5px; }
  #siresheet .sr-ug, #siresheet .sr-q4, #siresheet .sr-steps3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #siresheet .sr-q4 .sr-q:first-child { grid-column: 1 / -1; }
  #siresheet .ld-yearsel { margin-left: 0; }
  #siresheet .ld-search { flex: 1 1 100%; }
  #siresheet .ld-search input { width: 100%; }
  /* 名冊改成卡片：上排是牛名，下排六格「標籤在上、數值在下」（設計包 mobile 05）*/
  #siresheet .sr-th { display: none; }
  #siresheet .sr-tr {
    /* 六格不能等寬 —— 「2018–2022」和「+34.4 kg」比「28 次」長一截，
       等寬會讓它們各折成兩行，一列卡片就長成三行高。 */
    grid-template-columns: .66fr 1.3fr 1.04fr 1.16fr .74fr .92fr;
    grid-template-areas: 'n n n n n g' 'a b c d e f';
    gap: 0; padding: 13px 2px 11px; margin-bottom: 10px;
    font-size: 11.5px; border: 1px solid var(--line-1); border-radius: 14px;
  }
  #siresheet .sr-tr > :nth-child(1) { grid-area: n; padding: 0 10px 11px; }
  #siresheet .sr-tr > :nth-child(2) { grid-area: a; }
  #siresheet .sr-tr > :nth-child(3) { grid-area: b; }
  #siresheet .sr-tr > :nth-child(4) { grid-area: c; }
  #siresheet .sr-tr > :nth-child(5) { grid-area: d; }
  #siresheet .sr-tr > :nth-child(6) { grid-area: e; }
  #siresheet .sr-tr > :nth-child(7) { grid-area: f; }
  #siresheet .sr-tr > :nth-child(8) { grid-area: g; padding: 0 10px 11px; align-items: flex-start; }
  #siresheet .sr-tr > :nth-child(n+2):nth-child(-n+7) {
    flex-direction: column; gap: 7px; padding: 11px 2px 2px;
    border-top: 1px solid var(--line-1); border-left: 1px solid var(--line-1);
  }
  #siresheet .sr-tr > :nth-child(2) { border-left: 0; }
  #siresheet .sr-tr > :nth-child(n+2):nth-child(-n+7)::before {
    content: attr(data-l); font-size: 10px; font-weight: 400; color: var(--ink-500); white-space: nowrap;
  }
  #siresheet .sr-tr > :nth-child(n+2):nth-child(-n+7) { text-align: center; white-space: nowrap; }
  #siresheet .sr-tr .ld-c--n { font-size: 14px; }
  #siresheet .sr-tr .ld-c--v { font-size: 12px; }
  #siresheet .sr-tr .ld-c--d u { font-size: 11px; }
  #siresheet .sr-tr .ld-c--d u.is-thin { padding: 3px 6px; font-size: 10px; }
  #siresheet .cixpg__b { margin-left: 0; }
  #siresheet .sr-empty h3 { font-size: 19px; }
}

/* ══════════════════════════════════════════════════════════════════════
   單支公牛明細（#srbullsheet）
   ⚠️ 不要叫 #bullsheet —— 全國概況已經有一個 id="bullsheet"（openNatBull），
      同 id 兩個元素會讓 getElementById 只拿到前面那個，把既有抽屜劫走。
      類名同理不用 .bs-*，那是配種建議公牛卡的命名空間（.bs-kpi 是 display:flex）。—— 從配種決策名冊那個 ❯ 進來，疊在上一層抽屜之上
   ══════════════════════════════════════════════════════════════════════ */
#srbullsheet { z-index: 45; }
/* 公牛名有 27 個字元，廠牌又是「Accelerated Genetics」這種長度：
   flex:none 會把 ✕ 整顆推出畫面外（375px 實測 right=434），手機就關不掉了。
   名稱可縮可截斷、廠牌可被擠掉，✕ 永遠不縮。 */
#srbullsheet .sheet-hd b { flex: 0 1 auto; min-width: 0; font-size: 15.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#srbullsheet .sheet-hd .x { flex: none; }
#srbullsheet .sr-span { flex: none; margin-right: auto; padding: 4px 12px; white-space: nowrap; border-radius: var(--radius-pill);
  background: var(--surface-2); font-size: 12px; font-weight: 650; color: var(--ink-600); }
#srbullsheet .sr-span.is-none { background: none; padding: 0 0 0 12px; font-weight: 400;
  color: var(--ink-500); border-left: 1px solid var(--line-1); }
#srbullsheet .sr-h3 { margin: 18px 0 10px; font-size: 15.5px; font-weight: 800; color: var(--ink-900, var(--ink-800)); }
#srbullsheet .ld-na { padding: 20px 16px; text-align: center; font-size: 12.5px; line-height: 1.7;
  color: var(--ink-600); background: var(--surface-2); border-radius: 9px; }
#srbullsheet .ld-cap1 { display: flex; align-items: flex-start; gap: 7px; margin-top: 12px;
  font-size: 11.5px; line-height: 1.65; color: var(--ink-500); }
#srbullsheet .ld-cap1 [data-ic] { flex: none; margin-top: 1px; }
#srbullsheet .ld-cap1 strong { color: var(--ink-700, var(--ink-600)); font-weight: 700; }

/* ① 本場使用 */
#srbullsheet .sb-hd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#srbullsheet .sb-kpi { padding: 15px 17px; border-radius: var(--radius-lg, 14px);
  background: var(--card); border: 1px solid var(--line-1); font-variant-numeric: tabular-nums; }
#srbullsheet .sb-kpi b { font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--ink-900, var(--ink-800)); }
#srbullsheet .sb-kpi s { text-decoration: none; font-size: 13px; color: var(--ink-500); margin-left: 4px; }
#srbullsheet .sb-kpi em { display: block; margin-top: 5px; font-style: normal; font-size: 11.5px; color: var(--ink-500); }
#srbullsheet .sb-yrs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#srbullsheet .sb-yrs span { padding: 5px 11px; border-radius: var(--radius-pill); background: var(--surface-2);
  font-size: 11.5px; font-weight: 650; color: var(--ink-600); font-variant-numeric: tabular-nums; }

/* ② 對全場的影響 */
#srbullsheet .sb-big { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
#srbullsheet .sb-big b { font-size: 36px; font-weight: 800; line-height: 1; }
#srbullsheet .sb-big s { text-decoration: none; font-size: 14px; color: var(--ink-500); }
#srbullsheet .sb-big em { flex: 1 1 100%; margin-top: 5px; font-style: normal; font-size: 12px; color: var(--ink-500); }
#srbullsheet .sb-big.is-up b { color: var(--lbl-good); }
#srbullsheet .sb-big.is-dn b { color: var(--lbl-bad); }
/* 把恆等式攤開讓農民對帳 —— 這是整份報告可信度的來源 */
#srbullsheet .sb-calc { counter-reset: bsc; list-style: none; margin: 14px 0 0; padding: 0;
  font-variant-numeric: tabular-nums; }
#srbullsheet .sb-calc li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--line-1); font-size: 12.5px; }
#srbullsheet .sb-calc li span { color: var(--ink-600); }
#srbullsheet .sb-calc li b { font-weight: 700; color: var(--ink-900, var(--ink-800)); white-space: nowrap; }
#srbullsheet .sb-calc li.is-eq { border-top: 2px solid var(--line-strong, var(--line-1)); margin-top: 2px; }
#srbullsheet .sb-calc li.is-eq b { font-size: 15px; font-weight: 800; }
#srbullsheet .sb-calc li.is-eq b.is-up { color: var(--lbl-good); }
#srbullsheet .sb-calc li.is-eq b.is-dn { color: var(--lbl-bad); }
#srbullsheet .sr-warn { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 13px 15px;
  border-radius: 13px; font-size: 13px; line-height: 1.6; color: var(--ink-700, var(--ink-600));
  background: var(--coral-050, #fdf1eb); border: 1px solid color-mix(in oklab, var(--coral-600) 22%, transparent); }
#srbullsheet .sr-warn .ic-orb { flex: none; width: 36px; height: 36px; }
/* 沒有在群女兒：不給貢獻數字，改回答「為什麼是 —」 */
#srbullsheet .sb-none { display: flex; align-items: flex-start; gap: 13px; }
#srbullsheet .sb-none .ic-orb { flex: none; width: 44px; height: 44px; background: var(--surface-0); }
#srbullsheet .sb-none b { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 750; }
#srbullsheet .sb-none p { margin: 0; font-size: 12.5px; line-height: 1.85; color: var(--ink-600); }
#srbullsheet .sb-none strong { color: var(--ink-900, var(--ink-800)); font-weight: 700; }
#srbullsheet .sb-ev { margin-top: 13px; padding: 13px 15px; border-radius: 12px; background: var(--surface-2); }
#srbullsheet .sb-ev b { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 750; }
#srbullsheet .sb-ev p { margin: 0; font-size: 12px; line-height: 1.85; color: var(--ink-600); }
#srbullsheet .sb-ev u { text-decoration: none; font-weight: 800; color: var(--ink-900, var(--ink-800));
  font-variant-numeric: tabular-nums; }
#srbullsheet .sr-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 12px 15px;
  border-radius: 11px; font-size: 12.5px; line-height: 1.7; color: var(--amber-700, #96690f);
  background: var(--warn-50, #fdf4e3); border: 1px solid color-mix(in oklab, var(--lbl-warn) 24%, transparent); }
#srbullsheet .sr-note [data-ic] { flex: none; margin-top: 2px; }

/* ③ CDCB 評估 */
#srbullsheet .sb-pta { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
#srbullsheet .sb-pta > div { padding: 12px 10px; border-radius: 12px; background: var(--surface-2);
  text-align: center; font-variant-numeric: tabular-nums; }
#srbullsheet .sb-pta s { display: block; text-decoration: none; font-size: 11px; color: var(--ink-500); margin-bottom: 5px; }
#srbullsheet .sb-pta b { font-size: 17px; font-weight: 800; color: var(--ink-900, var(--ink-800)); }
#srbullsheet .sb-pta b i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-500); }
#srbullsheet .sb-pta > div.is-na b { color: var(--ink-400, var(--ink-500)); font-weight: 600; }

/* ④ 代碼 */
#srbullsheet .sb-naab { display: flex; flex-wrap: wrap; gap: 8px; }
#srbullsheet .sb-naab span { padding: 7px 13px; border-radius: 10px; border: 1px solid var(--line-1);
  background: var(--surface-0); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--ink-900, var(--ink-800)); }
#srbullsheet .sb-id { display: flex; align-items: baseline; gap: 10px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line-1); }
#srbullsheet .sb-id s { text-decoration: none; font-size: 12px; color: var(--ink-500); }
#srbullsheet .sb-id b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  font-weight: 600; color: var(--ink-700, var(--ink-600)); overflow-wrap: anywhere; }

@media (max-width: 1179px) {
  #srbullsheet .sb-pta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  #srbullsheet .sheet-hd b { font-size: 14px; }
  /* 手機放不下廠牌膠囊 —— 廠牌在④代碼卡裡一定看得到，這裡讓位給 ✕ */
  #srbullsheet .sheet-hd .sr-span { display: none; }
  #srbullsheet .sb-hd { grid-template-columns: minmax(0, 1fr); }
  #srbullsheet .sb-kpi b { font-size: 24px; }
  #srbullsheet .sb-big b { font-size: 30px; }
  #srbullsheet .sb-pta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #srbullsheet .sb-calc li { flex-direction: column; gap: 3px; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════
   全國的配種決策（#v-report 的 #natsires）
   ⚠️ 基礎宣告全部寫在檔尾的 @media 之前 —— 相同權重下後寫的贏，基礎規則寫在
      @media 後面會把 RWD 靜默蓋掉（這個坑在泌乳性能踩過兩次）。
   類名用 .ns-*，不要沾 .rep-*（那組有 grid 對齊規則會誤傷）也不要沾 .sr-*
      （那是場級抽屜的命名空間，scope 在 #siresheet 底下拿不到這裡）。
   ══════════════════════════════════════════════════════════════════════ */
/* gap 從 14 收到 9（稿的列距）。第一列的雙欄間距另外由 .ns-r1 的 column-gap 給。 */
#v-report #natsires { display: flex; flex-direction: column; gap: 9px; }
/* ⚠️ 選擇器要用 .card.ns-card 而不是 .ns-card。markup 是 class="card chart ns-card"，
   而 #v-report .card.chart（本檔 1926）特異度 (1,2,0) 壓過 (1,1,0) —— 原本這裡與
   767 斷點的兩條 .ns-card padding 都是死碼，不管視窗多寬都吃 16px 16px 14px。 */
#v-report .card.ns-card { padding: 16px 18px 14px; }

/* 第一列：散布圖卡 + 解讀卡。1.463:1 是稿量的欄寬比。 */
#v-report .ns-r1 { display: grid; grid-template-columns: minmax(0, 1.463fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
#v-report .ns-r1 > .card { min-width: 0; }
#v-report .ns-agree { display: flex; flex-direction: column; }
#v-report .ns-agree > #ch-nsagree { flex: 1; display: flex; align-items: center; }
#v-report .ns-agree > #ch-nsagree > svg { width: 100%; }
#v-report .ns-cap1 { font-size: 11px; color: var(--ink-500); margin: 8px 2px 0; }

/* 解讀卡。左文右圖，插圖靠卡片右內距、與大標／badge 垂直重疊。 */
#v-report .card.ns-explain {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 18px 18px 16px 20px;
}
#v-report .ns-explain__c { min-width: 0; }
#v-report .ns-explain__k { font-size: 15px; font-weight: 700; color: var(--ink-950); }
/* 小標與大標之間那一大段留白是稿的節奏（量到 74px），不是漏寫。
   ⚠️ 只在桌機雙欄時成立 —— 疊成單欄後卡片變矮，74px 會把內容擠出去。 */
#v-report .ns-explain__h { margin-top: 74px; font-size: 25px; font-weight: 800; color: var(--num-strong); line-height: 1.2; letter-spacing: -.01em; }
#v-report .ns-explain__b {
  display: inline-block; margin-top: 10px; padding: 4px 11px; border-radius: 10px;
  background: var(--div-up); color: #fff; font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#v-report .ns-explain__l { list-style: none; margin: 14px 0 0; padding: 0; }
#v-report .ns-explain__l li { font-size: 11.65px; line-height: 24.5px; color: var(--ink-600); }
/* 插圖與大標／badge 垂直重疊（稿）。用 align-self 置中而不是寫死 margin-top ——
   卡片高度是被左邊那張散布圖撐出來的，寫死的話換個斷點就對不齊。 */
#v-report .ns-explain__i { flex: none; align-self: center; width: 142px; max-width: 42%; height: auto; }

/* ② 貢獻卡底部的色帶。天平圖示 + 一句話，取代原本兩欄小字的 .sr-divcap。 */
#v-report .ns-strip {
  display: flex; align-items: center; gap: 16px;
  margin: 12px 10.5px 2px; padding: 0 14px; min-height: 36px;
  background: var(--band-sd); border-radius: 9px;
  font-size: 13px; line-height: 1.5; color: var(--ink-800);
}
#v-report .ns-strip [data-ic] { flex: none; color: var(--num-strong); display: inline-flex; }

/* 共用：分段鈕、圖例、卡片標題列（#siresheet 那份 scope 在抽屜裡，拿不到）*/
#v-report .sr-cardhd { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* 稿把分段鈕從「灰底膠囊軌道 + 全圓鈕」改成「白底外框 + 方角鈕 + 鈕間細分隔線」。 */
#v-report .ns-seg {
  display: inline-flex; background: var(--surface-0); border: 1px solid var(--line-1);
  border-radius: 7px; padding: 2px;
}
#v-report .ns-seg .ld-seg__b {
  border: 0; background: none; cursor: pointer; padding: 4px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 650; color: var(--ink-600); font-variant-numeric: tabular-nums;
}
/* 分隔線只畫在「兩顆都沒被選中」之間 —— 選中的那顆是實心塊，本身就是分界，
   再加一條線會變成雙重邊。用 inset shadow 而不是 border，免得選中時寬度跳動。 */
#v-report .ns-seg .ld-seg__b:not(.on) + .ld-seg__b:not(.on) { box-shadow: inset 1px 0 0 var(--line-1); }
#v-report .ns-seg .ld-seg__b.on { background: var(--brand-900, #12362a); color: #fff; }
#v-report .sr-lgd { display: flex; gap: 20px; align-items: center; margin: 10px 0 2px; font-size: 11.5px; color: var(--ink-500); }
#v-report .sr-lgd span { display: inline-flex; align-items: center; gap: 7px; }
/* 兩個系列都改成折線之後，圖例也要跟著改：短線中間一顆實心圓，不再用色塊／裸點。
   .sq / .dot 兩個舊 class 在 #v-report 已無 markup 使用（#siresheet 那份是另一條）。 */
#v-report .sr-lgd i.ln {
  position: relative; width: 20px; height: 2.2px; border-radius: 2px; background: currentColor;
}
#v-report .sr-lgd i.ln::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
  margin: -3px 0 0 -3px; border-radius: 50%; background: currentColor;
}
#v-report .sr-lgd i.ln--b { color: var(--num-strong); }
#v-report .sr-lgd i.ln--o { color: var(--pal-amber); }
#v-report .ld-cap1 { display: flex; align-items: flex-start; gap: 7px; margin-top: 12px; font-size: 11.5px; line-height: 1.7; color: var(--ink-500); }
#v-report .ld-cap1 [data-ic] { flex: none; margin-top: 1px; }
#v-report .ld-cap1 strong { color: var(--ink-700, var(--ink-600)); font-weight: 700; }
#v-report .ld-cap1--l { justify-content: flex-start; width: 100%; }
/* ⓘ 現在同時掛 .chit（共用浮層的命中類）。.chit 的 fill 規則是給 SVG rect 用的，
   對 span 無效，所以 hover/作用中的視覺回饋要自己給。 */
#v-report .ld-i { color: var(--ink-400, var(--ink-500)); display: inline-flex; cursor: pointer; border-radius: 50%; }
#v-report .ld-i:hover, #v-report .ld-i.on { color: var(--brand-700); }
#v-report .ld-i:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
#v-report .ld-na { padding: 22px 16px; text-align: center; font-size: 12.5px; line-height: 1.7; color: var(--ink-600); background: var(--surface-2); border-radius: 9px; }

/* ══════════════════════════════════════════════════════════════════════
   批 9：降級態。**只在有模組降級時出現**，正常資料下這一整段都看不到。
   驗證方式：用 file:// 開 index.html（loadFarm 對 file: 協定直接 return，
   CD 保持檔頭的內建示範字面量 —— 那份沒有 bulls 也沒有 sires_nat）。
   ⚠️ 不沿用 .ld-na：那是全站四個 scope 各自複製的「一句話」樣式。
   ══════════════════════════════════════════════════════════════════════ */
#v-report .ld-dg {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 26px 18px 22px; gap: 0;
}
#v-report .ld-dg__i { width: 120px; height: auto; opacity: .9; }
#v-report .ld-dg__t { margin-top: 23px; font-size: 17.9px; font-weight: 800; color: var(--ink-950); }
#v-report .ld-dg__d { margin-top: 12px; display: flex; flex-direction: column; gap: 3px; }
#v-report .ld-dg__d span { font-size: 12.7px; line-height: 21.5px; color: var(--ink-600); }
#v-report .ld-dg__p {
  display: inline-flex; align-items: center; gap: 11px; margin-top: 23.5px;
  min-height: 31px; padding: 0 15px 0 13px; border-radius: 6.5px;
  background: var(--surface-warm); color: var(--ink-950);
  font-size: 14.3px; font-weight: 700;
}
#v-report .ld-dg__p.is-warn { background: var(--coral-100, #fdf0e4); color: var(--coral-solid); }
#v-report .ld-dg__p [data-ic] { display: inline-flex; }
#v-report .ld-dg__c {
  display: inline-flex; align-items: center; gap: 15px; margin-top: 22px;
  min-height: 40px; padding: 0 6px; border: 0; background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 700; color: var(--brand-700);
}
#v-report .ld-dg__c:hover { text-decoration: underline; }
/* 9-4 降級總說明橫幅 */
#v-report .nat-dgb {
  display: flex; align-items: center; gap: 15px;
  min-height: 42.5px; margin: 0 0 14px; padding: 6px 18.5px;
  border-radius: 16px; background: var(--band-sd);
  font-size: 13px; line-height: 1.5; color: var(--ink-800);
}
#v-report .nat-dgb [data-ic] { flex: none; display: inline-flex; color: var(--num-strong); }

/* ① 美台一致性的三個統計量。稿改成三個等寬的淺灰盒、整組水平置中、盒內兩行置中。 */
#v-report .ns-stat {
  display: flex; justify-content: center; gap: 18.5px;
  margin: 14px 0 4px; font-variant-numeric: tabular-nums;
}
#v-report .ns-stat > div {
  flex: 0 1 136px; min-width: 0; padding: 5px 8px; border-radius: 7px;
  background: var(--surface-2); text-align: center;
}
#v-report .ns-stat small { display: block; font-size: 10px; font-weight: 400; color: var(--ink-600); }
#v-report .ns-stat b { display: block; font-size: 17px; font-weight: 800; color: var(--num-strong); line-height: 1.35; }

/* ② 原本這裡有一條 #v-report .sr-divcap（決策卡的頁尾兩欄小字），已由 .ns-strip
   取代、markup 也拿掉了，所以連宣告一起刪。#siresheet 那份是各自獨立的另一條
   （本檔 8144），不受影響 —— 場級抽屜還在用這個 class。 */

/* ③ 女兒表現名冊 */
#v-report .sr-list__hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* 段落標題升級（取平板稿的層級）。膠囊改深綠實心白字。 */
#v-report .ns-listhd .sr-h3 { margin: 2px 0; font-size: 26px; font-weight: 800; color: var(--num-strong); display: flex; align-items: center; gap: 12px; }
#v-report .ns-listhd .sr-cnt {
  padding: 5px 15px; border-radius: var(--radius-pill); background: var(--num-strong);
  color: var(--surface-0); font-size: 13px; font-weight: 700;
}
#v-report .sr-list__hd em { font-style: normal; font-size: 13px; color: var(--ink-500); }
/* 分隔線要滿版（由卡緣到卡緣）—— 用負 margin 把列往外推，再把內距補回列上。 */
#v-report .ns-list { padding: 15px 0 0; overflow: hidden; }
#v-report .ns-th, #v-report .ns-tr {
  display: grid; grid-template-columns: 40px 2.2fr .9fr .93fr 1.12fr 1.2fr 1.17fr 1.1fr 1fr;
  gap: 8px; align-items: center; padding: 7px 18px; border-top: 1px solid var(--line-1);
}
/* 表頭與內文同字級同色（稿）—— 原本是 11.5px 的小灰字。 */
#v-report .ns-th { font-size: 13px; color: var(--ink-950); font-weight: 400; border-top: none; padding-top: 0; }
#v-report .ns-th > span { text-align: center; }
#v-report .ns-th > :nth-child(2) { text-align: left; }
#v-report .ns-tr { font-size: 13px; font-variant-numeric: tabular-nums; }
#v-report .ns-c--i { color: var(--ink-500); font-variant-numeric: tabular-nums; }
/* 單位小字（只出現在該頁第 1 列）與台灣可靠度上標 */
#v-report .ns-tr u.ns-u { font-size: .86em; color: var(--ink-600); margin-left: 2px; }
#v-report .ns-tr u.ns-rel { font-size: 9.5px; color: var(--ink-500); margin-left: 4px; }
#v-report .ns-tr:hover { background: var(--surface-2); }
#v-report .ns-tr .ld-c { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; }
#v-report .ns-tr .ld-c--n { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--ink-900, var(--ink-800)); }
#v-report .ns-tr .ld-c--n i { font-style: normal; font-size: 11px; font-weight: 400; color: var(--ink-500); }
#v-report .ns-tr .ld-c--v { font-size: 13.5px; font-weight: 800; }
#v-report .ns-tr .ld-c--v.is-up { color: var(--lbl-good); }
#v-report .ns-tr .ld-c--v.is-dn { color: var(--lbl-bad); }
#v-report .ns-tr .ld-c.is-mute { color: var(--ink-500); }
#v-report .ns-tr u { text-decoration: none; font-size: 10.5px; color: var(--ink-500); }

/* 名冊卡底的滿版色帶（取代原本的 .ld-cap1 長段）。隨卡片底部圓角切齊。 */
#v-report .ns-foot {
  margin-top: 6px; padding: 9px 18px 10px; border-top: 1px solid var(--line-1);
  background: var(--surface-warm); font-size: 12.5px; line-height: 1.6; color: var(--ink-700, var(--ink-600));
}
#v-report .ns-foot b { display: block; font-weight: 700; color: var(--ink-950); font-size: 13px; }
#v-report .ns-foot span { display: block; margin-top: 2px; color: var(--ink-500); font-size: 11.5px; }
/* 女兒集中在少數幾場 → 同場內差值仍成立，但代表性差，標出來 */
#v-report .ns-tr u.is-thin { padding: 2px 7px; border-radius: var(--radius-pill); background: var(--amber-100, #fbf0d9); color: var(--amber-700, #96690f); font-weight: 700; }
#v-report .cixpg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
#v-report .cixpg__n { flex: 1; min-width: 0; font-size: 11.5px; color: var(--ink-500); }
#v-report .cixpg__b { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
/* 稿把每一顆（含 ‹ › …）都改成白底 + 1px 淺框 + 8px 圓角的方鈕，當前頁實心深綠。
   ⚠️ .cixpg__x（上下頁）在本檔 4598 是**未 scope 的全域規則**，#v-custom /
      #v-lact / #siresheet 的分頁器都吃它 —— 只能在 #v-report 底下覆寫，不能改全域。 */
#v-report .cixpg__p, #v-report .cixpg__x {
  min-width: 30px; height: 26px; padding: 0 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; border-radius: 8px;
  border: 1px solid var(--line-1); background: var(--surface-0); color: var(--ink-600);
  display: inline-flex; align-items: center; justify-content: center;
}
#v-report .cixpg__p:hover, #v-report .cixpg__x:not([disabled]):hover { background: var(--surface-2); }
#v-report .cixpg__p.on { border-color: var(--num-strong); background: var(--num-strong); color: var(--surface-0); }
/* 排名表的當前頁用橘框白底（稿）—— 與女兒名冊的實心深綠分開，兩張表在同一頁上
   各有自己的分頁器，同樣的實心綠會讓人以為是同一組控制。 */
#v-report .rep-topfoot .cixpg__p.on {
  border-color: var(--coral-500); background: var(--surface-0); color: var(--coral-600);
}
#v-report .cixpg__t {
  min-width: 30px; height: 26px; border-radius: 8px; border: 1px solid var(--line-1);
  background: var(--surface-0);
  font-style: normal; font-size: 12.5px; color: var(--ink-500);
  display: inline-flex; align-items: center; justify-content: center;
}
#v-report .cixpg__b { gap: 8px; }
#v-report .cixpg__n { font-size: 14px; }

/* ④ 多樣性的前後對照 */
/* 2000→2025 對照：稿改成三張等寬的淺米卡（原本是一條 flex 小字列）。
   年份格刪掉 —— 年份已經寫在卡片標題列與圖的 x 軸上。 */
#v-report .ns-delta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 14px; }
#v-report .ns-dc {
  min-width: 0; padding: 10px 13px 11px 15px; border-radius: 10px;
  background: var(--surface-warm); font-variant-numeric: tabular-nums;
}
#v-report .ns-dc small { display: block; font-size: 12px; color: var(--ink-600); }
/* flex-wrap 是刻意的：「22,610 → 31,842 +41%」在 1380px 的三欄裡差幾個 px 放不下，
   與其讓數字被截斷或整排縮到看不清，不如讓百分比掉到第二行靠右。三張卡在 grid 下
   等高，掉行不會讓版面歪。 */
#v-report .ns-dc__v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; }
#v-report .ns-dc__v b { font-size: 14.5px; font-weight: 700; color: var(--ink-950); white-space: nowrap; }
#v-report .ns-dc__v em { font-style: normal; font-size: 14.5px; font-weight: 800; margin-left: auto; }
/* 顏色是**語意**不是方向：稿的「+ 橘 / − 綠」在這一張卡會把「使用公牛 −35%」
   說成好消息，與旁邊「但配種量增加、使用公牛數減少」打架。理由見 nsYears 的註解。 */
#v-report .ns-dc__v em.is-flat { color: var(--ink-600); }
#v-report .ns-dc__v em.is-warn { color: var(--lbl-warn); }

/* ── 多樣性列：左圖右「集中度怎麼看」，稿的欄寬 7:5 ───────────────────── */
#v-report .ns-r2 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 11px; align-items: stretch; }
#v-report .ns-r2 > .card { min-width: 0; }
#v-report .card.ns-conc { display: flex; flex-direction: column; padding: 18px 20px 16px; }
#v-report .ns-conc__t { font-size: 22px; font-weight: 800; color: var(--ink-950); line-height: 1.25; }
#v-report .ns-conc__n {
  margin-top: 18px; text-align: center; font-size: 54px; font-weight: 800;
  color: var(--num-strong); line-height: 1.05; font-variant-numeric: tabular-nums;
}
#v-report .ns-conc__n i { font-style: normal; font-size: .66em; font-weight: 800; margin-left: 2px; }
#v-report .ns-conc__s { margin-top: 6px; text-align: center; font-size: 15px; color: var(--ink-600); }
#v-report .ns-conc__l { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
#v-report .ns-conc__l li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.5; color: var(--ink-800); }
/* 實心圓 + 白勾。sprite 的 status-check-circle 是線性描邊版，做不出這個造型，
   所以圓由 CSS 畫、裡面塞一個 check 圖示反白。 */
#v-report .ns-tick {
  flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
  background: var(--num-strong); color: var(--surface-0);
  display: inline-flex; align-items: center; justify-content: center;
}
#v-report .ns-tick .ic { stroke-width: 3; }
#v-report .ns-conc__f {
  display: flex; align-items: flex-start; gap: 8px; margin: 18px 2px 0; padding-top: 14px;
  border-top: 1px solid var(--line-1); font-size: 12.5px; line-height: 1.6; color: var(--ink-500);
}
#v-report .ns-conc__f [data-ic] { flex: none; margin-top: 1px; display: inline-flex; }

@media (max-width: 1179px) {
  /* ⚠️ 這條在批 6 把名冊從 7 欄改成 9 欄時漏改，仍是 7 格 —— 多出來的「台灣乳量 EBV」
     與「美國 NM$」會被擠到自動產生的第二列，768–1179 整段平板寬度都排錯。
     欄序與基礎規則一致：序號｜公牛｜在群女兒｜牧場｜同場內差值｜305 天｜PTA｜EBV｜NM$ */
  #v-report .ns-th, #v-report .ns-tr {
    grid-template-columns: 32px 1.9fr .8fr .8fr .95fr 1.05fr 1fr .95fr .85fr;
    gap: 6px; padding-left: 12px; padding-right: 12px;
  }
  #v-report .ns-stat { gap: 12px; }
  /* 雙欄變單欄：解讀卡疊到散布圖底下。（稿的平板版是把解讀卡退化成散布圖卡內
     一條 ✓ 單行 strip，那是批 10 的形態，這裡先給不會壞的堆疊。） */
  #v-report .ns-r1, #v-report .ns-r2 { grid-template-columns: minmax(0, 1fr); }
  #v-report .card.ns-explain { align-items: center; }
  /* 疊成單欄後卡片只有內容高，桌機那 74px 的留白會把版面撐爛 */
  #v-report .ns-explain__h { margin-top: 14px; }
}
@media (max-width: 767px) {
  #v-report .card.ns-card { padding: 14px 12px 12px; }
  #v-report .ns-stat { gap: 8px; }
  #v-report .ns-stat > div { flex: 1 1 0; padding: 6px 4px; }
  #v-report .ns-stat b { font-size: 15.5px; }
  #v-report .ns-stat small { font-size: 9.5px; }
  #v-report .ns-seg .ld-seg__b { padding: 5px 10px; font-size: 11.5px; }
  /* 解讀卡在手機改成「左圖示磚、右文字」的橫排，插圖縮小、badge 保留
     （稿說手機刪 badge，但斜率是這張卡唯一的量化依據，刪了只剩形容詞）*/
  #v-report .card.ns-explain { gap: 12px; padding: 14px 12px; }
  #v-report .ns-explain__i { width: 86px; }
  #v-report .ns-explain__h { margin-top: 8px; font-size: 20px; }
  #v-report .ns-explain__l { margin-top: 8px; }
  #v-report .ns-explain__l li { line-height: 20px; }
  #v-report .ns-strip { margin: 10px 0 2px; gap: 10px; padding: 8px 11px; font-size: 12px; }
  /* 散布圖與雙軸圖在 375px 縮到看不見刻度 —— 卡片內橫向捲動，圖維持原尺寸 */
  #v-report #ch-nsagree, #v-report #ch-nsyear, #v-report #ch-nsdec { overflow-x: auto; margin: 0 -4px; }
  #v-report #ch-nsagree > svg { min-width: 620px; }
  #v-report #ch-nsyear > svg { min-width: 720px; }
  /* 蝴蝶圖窄版的 viewBox 是 620（見 nsFly 的 narrow 分支）。與另外兩張圖同樣
     處理：維持原尺寸，卡片內橫向捲動，不要縮到字看不見。 */
  #v-report #ch-nsdec > svg { min-width: 620px; }
  /* 名冊改卡片：上排序號＋牛名，下排七格「標籤在上、數值在下」。
     ⚠️ 這一段是**位置驅動**的（nth-child + attr(data-l)），欄數從 7 變 9 之後
        每一條的序號都要重算：第 1 格是序號、第 2 格是牛名（兩者組成標題列），
        資料格從第 3 格起算，每列 3 格 → 去左框的是 3、6、9。
        nsRows 的 span 順序與數量若再變動，這裡必須跟著改，否則桌機看起來永遠
        正常、只有手機會爛。 */
  #v-report .ns-list { padding: 12px 12px 0; }
  #v-report .ns-th { display: none; }
  #v-report .ns-tr {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0; padding: 12px 2px 10px; margin-bottom: 10px;
    border: 1px solid var(--line-1); border-radius: 14px; font-size: 12px;
  }
  #v-report .ns-tr > :nth-child(1) { justify-content: flex-start; padding: 0 0 10px 10px; color: var(--ink-500); }
  #v-report .ns-tr > :nth-child(2) { grid-column: 2 / -1; padding: 0 10px 10px 0; }
  #v-report .ns-tr > :nth-child(n+3) {
    flex-direction: column; gap: 5px; padding: 9px 2px 2px; text-align: center;
    border-top: 1px solid var(--line-1); border-left: 1px solid var(--line-1);
  }
  #v-report .ns-tr > :nth-child(3),
  #v-report .ns-tr > :nth-child(6),
  #v-report .ns-tr > :nth-child(9) { border-left: 0; }
  /* 七格分不完三欄（3+3+1），最後一格 NM$ 拉滿寬，不要留兩個空洞 */
  #v-report .ns-tr > :nth-child(9) { grid-column: 1 / -1; }
  #v-report .ns-tr > :nth-child(n+3)::before {
    content: attr(data-l); font-size: 10px; font-weight: 400; color: var(--ink-500); white-space: nowrap;
  }
  /* 卡片版每一格都有自己的標籤，單位再自成一行就是三行（71 / 頭 / 標籤）。
     單位改掛在 data-l 上（見 nsRows 的註解）。 */
  #v-report .ns-tr u.ns-u { display: none; }
  #v-report .ns-listhd .sr-h3 { font-size: 20px; }
  #v-report .ns-foot { padding: 9px 12px 10px; }
  #v-report .ns-tr .ld-c--v { font-size: 12.5px; }
  #v-report .cixpg__b { margin-left: 0; }
  #v-report .ns-delta { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #v-report .ns-dc { padding: 9px 14px 10px 16px; }
  #v-report .card.ns-conc { padding: 14px 14px 12px; }
  #v-report .ns-conc__n { margin-top: 10px; font-size: 44px; }
  #v-report .ns-conc__l { margin-top: 14px; gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════
   .ld-cap1 裡的 <strong> 被當成 flex item
   ══════════════════════════════════════════════════════════════════════
   .ld-cap1 原本是 display:flex（為了讓 ⓘ 圖示不被壓縮）。flex 容器裡，每一段
   連續文字會各自變成匿名 flex item，而 <strong> 這種行內元素會**自成一個
   flex item** —— 於是粗體字的前後被 gap 撐開，讀起來像被切成好幾欄。
   實測「斜率接近 1 代表 | 排序轉得過來 | ：美國高 100 kg…」中間出現兩個空隙。
   改成 block + 行內圖示：文字回到正常斷行，圖示靠 vertical-align 對齊第一行。
   ⚠️ 這條要放在 #siresheet / #v-report 各自的 .ld-cap1 宣告**之後**才蓋得掉。
   ══════════════════════════════════════════════════════════════════════ */
#siresheet .ld-cap1, #v-report .ld-cap1 { display: block; }
#siresheet .ld-cap1 > [data-ic], #v-report .ld-cap1 > [data-ic] {
  display: inline-block; vertical-align: -3px; margin-right: 6px;
}
#siresheet .ld-cap1 strong, #v-report .ld-cap1 strong { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════
   全國概況（#v-report）依高保真設計包 v1 重做 — 批 2/3
   ⚠️ 基礎宣告全部在檔尾的 @media 之前（同一個坑在泌乳性能踩過兩次）。
   ⚠️ 只在 #v-report 底下覆寫，不動 token、也不碰 .rep-pagehd__t 那條與
      #v-sim 共用的選擇器 —— 改字級會連帶動到模擬頁。
   ══════════════════════════════════════════════════════════════════════ */
/* 2-1 頁標題（把與 #v-sim 共用的那條拆開，只放大這一頁）*/
#v-report .rep-pagehd__t b { font-size: 28px; font-weight: 800; color: var(--ink-950); letter-spacing: -.01em; }
#v-report .rep-pagehd__t span { font-size: 13px; }

/* 2-2 三章節捷徑列 */
#v-report .rep-tabs {
  display: inline-flex; gap: 2px; margin: 14px 0 16px; padding: 4px;
  background: var(--surface-2); border-radius: var(--radius-pill);
}
#v-report .rep-tabs__b {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 20px; border: 0; border-radius: var(--radius-pill);
  background: none; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-600);
}
#v-report .rep-tabs__b [data-ic] { display: inline-flex; color: var(--ink-500); }
#v-report .rep-tabs__b:hover { color: var(--ink-900, var(--ink-800)); }
#v-report .rep-tabs__b.on { background: var(--surface-0); color: var(--coral-700); box-shadow: var(--shadow-sm); }
#v-report .rep-tabs__b.on [data-ic] { color: var(--coral-600); }

/* 2-3 / 2-4 段落標題列：主標 + 灰副標 + 右側藥丸 */
#v-report .rep-sec2 {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 26px 0 12px;
}
#v-report .rep-sec2__t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#v-report .rep-sec2__t b { font-size: 19px; font-weight: 800; color: var(--ink-950); }
#v-report .rep-sec2--big .rep-sec2__t b { font-size: 25px; }
#v-report .rep-sec2__t i { font-style: normal; font-size: 12px; color: var(--ink-500); }
#v-report .rep-sec2__p {
  padding: 5px 13px; border-radius: var(--radius-pill); background: var(--surface-2);
  font-size: 12px; font-weight: 650; color: var(--ink-600); font-variant-numeric: tabular-nums;
}
#v-report .rep-sec2__p:empty { display: none; }

/* 2-5 下一章導覽條 */
#v-report .rep-nextch {
  display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer;
  margin: 16px 0 0; padding: 13px 16px; text-align: left;
  border: 1px solid var(--line-1); border-radius: 12px;
  background: var(--surface-warm, #f7f3ed); font: inherit; font-size: 13.5px; color: var(--ink-700, var(--ink-600));
}
#v-report .rep-nextch:hover { border-color: var(--line-strong, var(--line-1)); }
#v-report .rep-nextch__ic { flex: none; display: inline-flex; color: var(--brand-700, #1f6b4e); }
#v-report .rep-nextch__t { flex: 1; min-width: 0; }
#v-report .rep-nextch__t b { font-weight: 800; color: var(--ink-950); }
#v-report .rep-nextch__go { flex: none; display: inline-flex; color: var(--ink-400, var(--ink-500)); }

/* 3-1 首屏兩張卡：稿量 1282:770 ＝ 5:3；≥1860 那條 2fr:1fr 的規則要停用 */
#v-report .rep-top { gap: 12px; }
/* 3-2 卡片圓角。--radius-lg 是全站 token，只在這一頁覆寫 */
#v-report .card, #v-report .rep-hero { border-radius: 11px; }
/* 3-3 hero 的 KPI 帶：固定 2×2，不要 auto-fit（641px 寬的卡會攤成四欄一列）*/
#v-report .rep-herostats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; padding: 1px; border-radius: 8px;
  background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .16);
}
#v-report .rhs { border-radius: 7px; padding: 10px 16px; min-width: 0; }
/* 3-5 可靠度四級色（稿量） */
#v-report .rep-relrow.t1 i, #v-report .rep-relrow.t1 .rr-b em { background: #04372d; }
#v-report .rep-relrow.t2 i, #v-report .rep-relrow.t2 .rr-b em { background: #4c785e; }
#v-report .rep-relrow.t3 i, #v-report .rep-relrow.t3 .rr-b em { background: #b8cfbd; }
#v-report .rep-relrow.t4 i, #v-report .rep-relrow.t4 .rr-b em { background: #fe6423; }
/* 3-6 軌道拿掉，白底直接畫條 */
#v-report .rep-rel .rr-b { background: none; height: 8px; }
#v-report .rep-relrow { min-height: 30px; }
/* 3-7 字級放大一階 */
#v-report .rep-rel .rr-l { font-size: 12px; }
#v-report .rep-rel .rr-n { font-size: 14px; }
#v-report .rep-rel .rr-n small { font-size: 12px; }
#v-report .rep-rel__tot { font-size: 14.5px; }
#v-report .rep-rel__tot b { font-size: 16.5px; }
/* 3-8 ⓘ 縮小（.cap-i 是 capSplit 的共用樣式，只在這張卡覆寫） */
#v-report .rep-rel .cap-i { width: 13px; height: 13px; font-size: 9px; }

/* 3-4 這張 hero 的漸層烤在圖裡（原圖左 1/3 已是深綠），CSS scrim 再疊一層
   會把整張卡壓成死綠一片，照片完全看不到。關掉這一張的 scrim。 */
#v-report .rep-hero--baked .page-hero__scrim { display: none; }

/* 1-14 頁尾第二行（稿刪掉了出處與時效，降級成小字保留） */
#v-report .rep-src--2 { margin-top: 4px; font-size: 11px; color: var(--ink-400, var(--ink-500)); line-height: 1.7; }

@media (min-width: 1180px) {
  /* 稿量 1282:770。原本 1.75fr:1fr、且 ≥1860 又跳成 2fr:1fr —— 稿沒有第三段 */
  #v-report .rep-top { grid-template-columns: minmax(320px, 5fr) minmax(280px, 3fr); }
}
@media (max-width: 767px) {
  #v-report .rep-pagehd__t b { font-size: 23px; }
  #v-report .rep-tabs { display: flex; width: 100%; }
  #v-report .rep-tabs__b { flex: 1; justify-content: center; padding: 8px 6px; font-size: 12.5px; gap: 5px; }
  #v-report .rep-tabs__b [data-ic] { display: none; }
  #v-report .rep-sec2--big .rep-sec2__t b { font-size: 21px; }
  #v-report .rep-nextch { font-size: 12.5px; padding: 12px 13px; }
}