/* ============================================================
   C1120 媽媽氣候行動聯盟 — 卡片元件語言（components.css）
   ------------------------------------------------------------
   用途：鏡像自 index.html 內聯 <style> 的「資訊卡」DNA——白卡容器
   （.infocard，地圖段點廠彈出的廠況卡）＋資料列（.prow）＋狀態
   chip（.chip）＋時間軸圓點（.pev）＋ coral CTA（.info-cta）。
   動機：su 回饋「內頁卡片要延續首頁風格，目前不連貫」；plant.html
   之後會 link 本檔換皮，讓內頁廠況卡與首頁地圖段彈出卡同語言。

   ✅ 2026-07-29 已收斂＝本檔為唯一正本：
   - index.html 與 plant.html 皆 link 本檔，兩頁共用同一份卡片樣式。
   - index.html 原本的內聯重複定義已於 2026-07-29 移除（首頁提案 A 經
     客戶定案後才動；在那之前首頁不能改，故本檔一度以鏡像形式並存）。
   - ⚠ 動本檔＝同時影響首頁地圖段彈出卡與內頁廠況卡，改前先確認兩頁
     都可接受，並兩頁都驗。

   ⚠ 外部依賴（本檔不自帶，需由引用頁面提供）：
   - tokens.css：--r-lg / --r-sm / --r-full / --c-bg / --c-bg-soft /
     --c-ink / --c-sub / --c-text / --c-primary-dark / --c-primary-mid /
     --c-coral / --c-coral-bg / --font-serif / --c-line / --chip-*-fg /
     --chip-*-bg / --chip-*-bd（全部已在 tokens.css 存在，見驗收記錄）。
   - --paper-lift（.infocard 陰影用）：⚠ 不在 tokens.css。index.html
     與 plant.html 目前「各自」在頁面 <style> 的 :root 覆寫這個變數
     （兩頁同值：0 6px 14px rgba(42,39,35,.12)），未收進 tokens.css。
     引用本檔的頁面必須自行提供這個變數，否則 .infocard 陰影不會生效
     ——不是本檔漏寫，是上游還沒收斂。未來建議把 --paper-lift 移入
     tokens.css 成為 canonical，兩頁重複定義才能一併退場。
   - .info-cta:hover 的 color:#fff 是原樣保留的寫死白字（見檔尾清單）。

   來源：index.html（2026-07-24 版本，各規則塊上方已註記行號）
   ============================================================ */

/* ── 白卡容器：資訊卡（地圖段點廠彈出的廠況卡） ── */
/* index.html:468-469 */
.infocard{ position:relative; border-radius:var(--r-lg); background:var(--c-bg); box-shadow:var(--paper-lift); padding:26px 26px 22px; overflow:hidden; }
.infocard h3{ font-family:var(--font-serif); font-size:24px; font-weight:700; color:var(--c-ink); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ── 電廠狀態 chip（走 tokens --chip-*；index.html 內聯版，與 tokens.css
   全域 .chip 定義不同值——見任務回報的變體清單，未擅自合併） ── */
/* index.html:495-502 */
.chip{ display:inline-block; font-size:12px; font-weight:600; padding:3px 11px; border-radius:var(--r-full); border:1px solid transparent; white-space:nowrap; }
.chip.st-op{    color:var(--chip-op-fg);    background:var(--chip-op-bg);    border-color:var(--chip-op-bd); }
.chip.st-deing{ color:var(--chip-deing-fg); background:var(--chip-deing-bg); border-color:var(--chip-deing-bd); }
.chip.st-de{    color:var(--chip-de-fg);    background:var(--chip-de-bg);    border-color:var(--c-line); }
.chip.st-seal{  color:var(--chip-seal-fg);  background:var(--chip-seal-bg);  border-color:var(--chip-seal-bd); }
.chip.st-store{ color:var(--chip-store-fg); background:var(--chip-store-bg); border-color:var(--chip-store-bd); }
.chip.st-review{color:var(--chip-review-fg);background:var(--chip-review-bg);border-color:var(--chip-review-bd); }

/* ── periwinkle 淡色圓角資料列（k/v 兩欄式，卡內容器 .panel-rows 包覆） ──
   紙雕卡風、k 灰 v 粉圓深字。2026-07-08 su 拍板：每列圓角矩形包覆＋去分隔線
   （呼應客戶「不喜歡線條分隔線」雷點，改留白＋色塊＋圓角容器）。 */
/* index.html:409-415 */
.panel-rows{ margin-top:16px; position:relative; z-index:1; }
.prow{ display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:11px 14px; margin-bottom:8px; border-radius:var(--r-sm); background:var(--c-bg-soft); font-size:14px; }
.prow:last-child{ margin-bottom:0; }
/* 2026-08-03 su 裁定：詳細資料欄位改「3 固定＋其餘後台自訂、總數上限 10」，
   本列因此須承接不定筆數與任意長度欄位名。列數本身無礙（flex 流式、無固定高度、
   :last-child 已處理尾距），真正的風險是欄位名變長時擠爆數值欄——故 .k 維持
   nowrap（欄位名不斷行是設計意圖），改由 .v 吸收：可收縮（min-width:0）、
   可換行（overflow-wrap），長值不再溢出容器。
   ⚠ 給客戶的欄位名建議 ≤6 字；再長會壓縮右側數值的可讀寬度。 */
.prow .k{ color:var(--c-sub); white-space:nowrap; flex:0 0 auto; }
.prow .v{ font-family:var(--font-serif); font-weight:700; color:var(--c-ink); text-align:right;
  flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }

/* ── 圓點時間軸（近期進度 events，卡內容器 .pc-events 包覆） ──
   ⚠ 定錨硬鎖：每廠固定 3 筆。日期粉圓深字、事件描述灰字。 */
/* index.html:416-433（⚠ 原檔 434-437 為 .pev::after／.pev.is-latest::after／
   .pev:not(.is-latest):not(:last-child)::after／.pev:last-child::after 四條規則的逐字重複
   區塊，判斷為複製貼上遺留，本檔僅鏡像一份，未重複收錄——見任務回報） */
.pc-events{ margin-top:18px; position:relative; z-index:1; }
.pc-events-h{ font-family:var(--font-serif); font-weight:700; font-size:13px; letter-spacing:.04em; color:var(--c-sub); margin-bottom:8px; }
.pev{ display:flex; gap:12px; align-items:baseline; padding:6px 0; position:relative; padding-left:17px; }
.pev .d{ font-family:var(--font-serif); font-weight:700; font-size:12.5px; color:var(--c-primary-dark); white-space:nowrap; min-width:54px; }
.pev .t{ font-size:13px; color:var(--c-text); line-height:1.55; }
/* 進度圓點 v4（su 2026-07-14 夜拍板）：舊筆＝灰紫小實心點（與日期同 token）、
   最新＝紫框白心「目前位置」游標（外徑 11px＋2px 框·空心形視覺重量輕，故比 8px
   實心大 3px 才「目測稍大」）；珊瑚退出時間軸＝卡內珊瑚焦點讓給底部 CTA。
   垂直 rail=--c-primary-mid 比點淡一階，只串首末點中心；點 z-index 壓線上（白心蓋線）。
   ⚠ rail 為時間軸連接線（結構語意），非 DESIGN.md §5 禁的 hairline 分隔線。
   ⚠ 所有點中心皆在 x=4px、y=calc(6px+0.46em+4px)（latest 的 -1.5px offsets 使中心
     重合），rail 常數勿分開改。 */
.pev::before{ content:""; position:absolute; z-index:1; left:0; top:calc(6px + 0.46em); width:8px; height:8px; border-radius:var(--r-full); background:var(--c-primary-dark); }
.pev.is-latest::before{ top:calc(6px + 0.46em - 1.5px); width:11px; height:11px; margin-left:-1.5px;
  box-sizing:border-box; border:2px solid var(--c-primary-dark); background:var(--c-bg); }
.pev::after{ content:""; position:absolute; left:3.25px; width:1.5px; background:var(--c-primary-mid); }
.pev.is-latest::after{ top:calc(6px + 0.46em + 4px); bottom:0; }                       /* 首筆：點心往下 */
.pev:not(.is-latest):not(:last-child)::after{ top:0; bottom:0; }                       /* 中段：貫穿 */
.pev:last-child::after{ top:0; height:calc(6px + 0.46em + 4px); bottom:auto; }         /* 末筆：頂到點心 */

/* ── coral 軟膠囊按鈕（CTA，hover 轉實心）＝B 版，su 2026-07-14 拍板 ── */
/* index.html:490-493 */
.info-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; padding:8px 18px; font-size:13px; font-weight:700;
  color:var(--c-coral); background:var(--c-coral-bg); border-radius:var(--r-full); cursor:pointer; position:relative; z-index:5; transition:background .2s,color .2s; }
.info-cta:hover{ background:var(--c-coral); color:#fff; }