/* ════════════════════════════════════════════════════════════
   4. 公司與供應鏈頁：上方篩選區、下方結果區（公司清單/角色概覽）
   ════════════════════════════════════════════════════════════ */

/* ── 篩選區：一個緊湊的區塊 ── */
.sc-tools{display:grid;gap:14px;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:26px}
.sc-tools[hidden]{display:none}          /* 沒有資料時整塊不顯示（display:grid 會蓋過 hidden，要另外寫）*/
.sc-row{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:flex-end}
.sc-field{display:grid;gap:4px}
.sc-f-q{flex:1 1 200px;max-width:260px}
.sc-f-wide{flex:1 1 210px}
.sc-field label{font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.sc-field input,.sc-field select{box-sizing:border-box;height:40px;font:inherit;font-size:var(--fs-sm);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:0 10px;width:100%}
.sc-field input{font-size:var(--fs-input)}
.sc-field input:focus,.sc-field select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px var(--accbg)}
.sc-field select:disabled{color:var(--muted);opacity:.7}

/* 第二排：掛牌市場（勾選）、更多篩選、清除篩選 */
.sc-row2{align-items:center;gap:10px 24px}
.sc-checks{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:var(--fs-sm)}
.sc-checks legend{float:left;margin-right:10px;font-size:var(--fs-xs);font-weight:600;color:var(--muted);padding:0}
.sc-checks label{display:inline-flex;gap:5px;align-items:center;cursor:pointer;white-space:nowrap}
.sc-more{font-size:var(--fs-sm)}
.sc-more summary{cursor:pointer;color:var(--accent);font-weight:600}
.sc-more summary:focus:not(:focus-visible){outline:none}
.sc-more>div{display:grid;gap:10px;padding:12px 0 2px}
.sc-clear,.sc-clear-inline{font:inherit;font-size:var(--fs-sm);color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sc-clear{margin-left:auto}
.sc-clear[hidden]{display:none}

/* ── 結果區標頭：公司數＋目前條件、檢視切換 ── */
.sc-reshead{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.sc-conds{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.sc-count{font-size:var(--fs-md)}
.sc-of{font-size:var(--fs-sm);color:var(--muted);margin-right:4px}
.sc-cond{display:inline-flex;gap:6px;align-items:center;font:inherit;font-size:var(--fs-xs);color:var(--ink);background:var(--accbg);border:0;border-radius:20px;padding:2px 10px;cursor:pointer}
.sc-cond span{color:var(--muted);font-size:var(--fs-sm);line-height:1}
.sc-cond:hover span{color:var(--ink)}
/* 檢視切換：導覽樣式（未選細框、選取實心）*/
.sc-view{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sc-view button{font:inherit;font-size:var(--fs-sm);background:var(--panel);color:var(--ink);border:0;padding:5px 14px;cursor:pointer}
.sc-view button+button{border-left:1px solid var(--line)}
.sc-view button[aria-pressed="true"]{background:var(--accent);color:var(--panel)}
.sc-note{margin:6px 0 12px;font-size:var(--fs-xs);color:var(--muted)}

/* ── 空狀態：只出現一次 ── */
.sc-empty{max-width:40em;padding:22px 24px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);font-size:var(--fs-md)}
.sc-empty p{margin:0 0 6px}
.sc-empty p:last-child{margin:0;color:var(--muted);font-size:var(--fs-sm)}
.sc-empty .sc-empty-text{margin:0 0 10px;font-size:var(--fs-sm);line-height:1.8;color:var(--ink)}
.sc-clear-inline{margin-right:10px}

.sc-right{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.sc-sort{display:inline-flex;gap:6px;align-items:center;font-size:var(--fs-xs);color:var(--muted)}
.sc-sort select{font:inherit;font-size:var(--fs-sm);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:4px 6px}

/* ── 共用：提供什麼、現況 ── */
.sc-off{font-weight:600;color:var(--ink)}
.sc-meta{font-size:var(--fs-xs);color:var(--muted)}
.sc-state{color:var(--ink);font-weight:600}
.sc-mk{margin-left:8px;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}

/* ── 公司清單：一家公司一列（公司｜角色與技術｜現況｜更新）；整列可點開預覽 ── */
.sc-list{border-top:1px solid var(--line);container-type:inline-size}   /* 依清單本身的寬度換排法（右側預覽打開時清單會變窄）*/
.sc-colhead,.sc-co{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr) 92px;gap:4px 24px}
.sc-colhead{padding:8px 10px;font-size:var(--fs-xs);font-weight:600;color:var(--muted);border-bottom:1px solid var(--line)}
.sc-colhead>span:last-child,.sc-c-date{text-align:right}
.sc-co{position:relative;padding:12px 10px;border-bottom:1px solid var(--line);scroll-margin-top:110px;font-size:var(--fs-sm)}   /* 跳到某家公司時，不被頂欄蓋住 */
.sc-co:hover,.sc-co:has(.sc-peek[aria-expanded="true"]){background:var(--accbg)}
.sc-c-name{display:grid;gap:1px;align-content:start}
.sc-name{position:relative;z-index:1;font-size:var(--fs-md);font-weight:700;color:var(--ink);text-decoration:none;justify-self:start}
.sc-name:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.sc-sub{font-size:var(--fs-xs);color:var(--muted)}
.sc-c-roles{display:grid;gap:8px}
.sc-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 24px}
.sc-c-role{display:grid;gap:1px;align-content:start}
.sc-c-state{line-height:1.6;overflow-wrap:anywhere}
.sc-c-role{overflow-wrap:anywhere}
.sc-c-date{font-size:var(--fs-xs);color:var(--muted);padding-top:2px}
/* 蓋住整列的預覽按鈕（公司名稱浮在它上面，仍然是連結）*/
.sc-peek{position:absolute;inset:0;width:100%;background:none;border:0;padding:0;cursor:pointer}
.sc-peek:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sc-jump{font:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-align:left}

/* ── 角色概覽：依角色分組；每列只有公司與現況 ── */
.sc-ov{border-top:1px solid var(--line)}
.sc-ov-group{border-bottom:1px solid var(--line);padding:4px 0}
.sc-ov-group>summary{cursor:pointer;font-size:var(--fs-md);font-weight:700;padding:10px 0}
.sc-ov-group>summary:focus:not(:focus-visible){outline:none}
.sc-ov-group small,.sc-ov-role small{margin-left:10px;font-weight:400;font-size:var(--fs-xs);color:var(--muted)}
.sc-ov-role{margin:0 0 12px 18px}
.sc-ov-role h4{margin:0 0 2px;font-size:var(--fs-sm);color:var(--muted)}
.sc-ov-role ul{list-style:none;margin:0;padding:0}
.sc-ov-role li{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);gap:2px 24px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.sc-ov-role li:first-child{border-top:0}

/* ── 公司預覽（右側抽屜；抽屜外框在 2-base.css）── */
.pv-sub{margin:0;font-size:var(--fs-xs);color:var(--muted)}
.pv-sum{margin:8px 0 0;color:var(--muted)}
.pv-off{margin:0 0 6px;font-size:var(--fs-md);font-weight:700}
.pv-state{margin:0 0 4px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.pv-state span{font-size:var(--fs-xs);color:var(--muted)}
.dr h4{margin:14px 0 4px;font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.dr h4 small{margin-left:8px;font-weight:400}
.pv-prog{list-style:none;margin:0;padding:0}
.pv-prog li{display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline;padding:2px 0}
.pv-prog li>span{color:var(--accent);width:1em}
.pv-prog .pv-plan>span,.pv-prog .pv-plan b{color:var(--muted);font-weight:400}
.pv-prog small{color:var(--muted);font-size:var(--fs-xs)}
.pv-prog .pv-lapsed{font-style:normal;font-size:var(--fs-xs);color:var(--warn, #9a5b00);font-weight:700}
.pv-prog em{font-style:normal;font-size:var(--fs-pill);background:var(--accent);color:var(--panel);border-radius:var(--r);padding:0 6px}
.pv-list{margin:0;padding-left:1.2em}
.pv-src{margin:0;font-size:var(--fs-xs);color:var(--muted)}
.pv-src b{color:var(--ink);font-weight:600}
.pv-claim{margin:2px 0 0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* ── 分類與證據說明：預設收起 ── */
.sc-help{margin-top:40px;padding-top:12px;border-top:1px solid var(--line);font-size:var(--fs-sm);max-width:52em}
.sc-help summary{cursor:pointer;color:var(--muted);font-weight:600}
.sc-help summary:focus:not(:focus-visible){outline:none}
.sc-help h3{font-size:var(--fs-sm);margin:16px 0 4px}
.sc-help p{margin:6px 0;color:var(--muted)}
.sc-help dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:6px 0}
.sc-help dt{font-weight:600}
.sc-help dd{margin:0;color:var(--muted)}

@media (max-width:640px){
  .sc-tools{padding:14px}
  .sc-f-q,.sc-f-wide{flex:1 1 100%;max-width:none}
  .sc-clear{margin-left:0}
  .sc-ov-role{margin-left:0}
  .sc-ov-role li{grid-template-columns:1fr}
  /* 手機：四欄疊成一格 */
  .sc-colhead{display:none}
  .sc-co{grid-template-columns:minmax(0,1fr) auto;padding:12px 4px}
  .sc-c-roles{grid-column:1 / -1;grid-row:2}
  .sc-r{grid-template-columns:1fr}
}

/* 清單變窄時（右側預覽打開、或平板寬度）：公司與更新日一行，下面每個角色一段，角色與現況上下排 */
@container (max-width:820px){
  .sc-colhead{display:none}
  .sc-co{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px}
  .sc-c-roles{grid-column:1 / -1;grid-row:2;gap:12px}
  .sc-r{grid-template-columns:1fr;gap:2px}
  .sc-c-date{max-width:9em}
}