/* 意見書檢索 /optable。版面與主資料庫同一套：
   最左緣一條收合標籤、然後篩選欄與案件清單、右邊是選中那一件的內容。
   骨架樣式與 db.css 對齊，兩頁的操作方式才會一樣。 */

.sidetab{width:28px;min-width:28px;flex:none;cursor:pointer;border:0;padding:0;
 display:flex;align-items:center;justify-content:center;
 writing-mode:vertical-rl;letter-spacing:3px;font-family:inherit;font-size:12px;
 font-weight:600;background:var(--soft);color:var(--brand);
 border-right:1px solid var(--line)}
.sidetab:hover{background:#ece4d8}
main.folded .sidetab{background:var(--brand);color:#fff;border-right-color:var(--brand)}

.side{width:296px;min-width:296px;flex:none;display:flex;flex-direction:column;
 border-right:1px solid var(--line);background:#fff;overflow:hidden}
main.folded .side{width:0;min-width:0;border-right:0}

.ctl{flex:none;padding:9px 10px;border-bottom:1px solid var(--line);
 display:flex;flex-direction:column;gap:5px}
.ctl .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ctl .srch{flex-wrap:nowrap}
.ctl input[type=search]{flex:1;min-width:0;padding:8px 11px;font:inherit;
 font-size:13.5px;border:1px solid var(--line);border-radius:7px;background:#fff;
 color:var(--ink)}
.ctl input[type=text]{flex:0 1 106px;min-width:0;padding:5px 9px;font:inherit;
 font-size:12.5px;border:1px solid var(--line);border-radius:7px;background:#fff;
 color:var(--ink)}
.ctl input:focus{outline:0;border-color:var(--brand)}
.ctl select{font:inherit;font-size:12px;padding:3px 5px;height:26px;border-radius:6px;
 border:1px solid var(--line);background:#fff;color:var(--ink2);max-width:100%}
.ctl select:focus{outline:0;border-color:var(--brand)}
.ctl .lnk{border:0;background:none;color:var(--brand);font:inherit;font-size:12px;
 cursor:pointer;padding:2px 0;text-decoration:underline;text-underline-offset:2px}
.ctl .lnk:hover{color:#84202f}
.ctl .cnt{font-size:11.5px;color:var(--muted);margin-left:auto;white-space:nowrap}
.ctl .cnt b{color:var(--brand);font-weight:700;font-size:12.5px}

/* 立場與角色兩組核取方塊排在同一列，之間不留大空隙 */
.ctl .chk{gap:3px 9px;font-size:12px;color:var(--ink2)}
.ctl .chk b{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.04em}
.ctl .chk span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.ctl .chk input{margin:0}

/* 案件清單 */
.list{flex:1;overflow-y:auto;min-height:0}
.list .it{display:block;padding:9px 12px;border-bottom:1px solid var(--line);
 cursor:pointer;text-decoration:none;color:inherit}
.list .it:hover{background:var(--soft)}
.list .it.on{background:var(--brand-soft)}
.list .it .z{font-weight:700;font-size:13.5px;color:var(--brand)}
.list .it .m{display:flex;align-items:baseline;gap:8px;margin-top:2px}
.list .it .d{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.list .it .tag{margin-left:auto;font-size:11px;color:var(--ink2);background:var(--soft);
 border-radius:9px;padding:1px 8px;white-space:nowrap}
.list .empty{padding:26px 16px;color:var(--muted);font-size:13px;text-align:center}

/* 右欄內容 */
.doc{flex:1;min-width:0;overflow-y:auto;background:#fff}
.doc .inner{max-width:1180px;margin:0 auto;padding:22px 26px 60px}
.doc .hd{display:flex;align-items:flex-start;gap:16px;padding-bottom:14px;
 border-bottom:1px solid var(--line)}
.doc .hd h1{margin:0 0 4px;font-size:21px;line-height:1.45}
.doc .hd .sub{font-size:12.5px;color:var(--muted);line-height:1.8}
.doc .hd .sub a{color:var(--brand);text-decoration:none}
.doc .hd .sub a:hover{text-decoration:underline}
.doc .hd .acts{margin-left:auto;flex:none}
.doc code{background:var(--soft);border-radius:4px;padding:1px 6px;font-size:12.5px}

/* 結果摘要 */
.sum{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin:16px 0 10px;
 font-size:12.5px;color:var(--ink2)}
.sum .n{font-size:19px;font-weight:700;color:var(--brand);font-family:var(--serif)}
.sum .mix{display:flex;gap:14px;flex-wrap:wrap}
.sum .mix span{display:inline-flex;align-items:center;gap:6px}
.sum .mix i{width:10px;height:10px;border-radius:3px}
.sum .drill{background:var(--brand-soft);color:var(--brand);border-radius:6px;
 padding:3px 10px;font-size:12px}

/* 立場配色。原本叫 .cy/.cn/.cp/.co，其中 .cp 撞到全站頁尾的版權段落，
   害頁尾被塗成黃底。改成不會撞名的前綴。 */
.stc-y{background:#4a7c59}.stc-n{background:#9a3b3b}
.stc-p{background:#c9a227}.stc-o{background:#ddd6cb}

.bar{display:flex;height:12px;border-radius:3px;overflow:hidden;background:var(--soft);min-width:90px}
.bar i{display:block;height:100%}

/* 結果表 */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:9px}
table.g{border-collapse:collapse;width:100%;font-size:12.5px;min-width:900px}
table.g th,table.g td{padding:8px 11px;text-align:left;border-bottom:1px solid var(--line);
 vertical-align:top}
table.g th{background:var(--soft);color:var(--ink2);font-weight:700;font-size:11.5px;
 letter-spacing:.03em;position:sticky;top:0;z-index:2;white-space:nowrap}
table.g tbody tr:hover{background:var(--brand-soft)}
table.g tbody tr:last-child td{border-bottom:0}
table.g td.no{white-space:nowrap;font-weight:700}
table.g td.no a{color:var(--brand);text-decoration:none}
table.g td.no a:hover{text-decoration:underline}
table.g td.no small{display:block;font-weight:400;color:var(--muted);font-size:10.5px}
table.g td.w{white-space:nowrap;font-weight:700}
table.g td.q{line-height:1.6;min-width:230px}
table.g td.who{color:var(--ink2);line-height:1.6;font-size:11.5px;min-width:200px}
table.g td.c{white-space:nowrap}
.pill{display:inline-block;font-size:11px;font-weight:700;line-height:18px;padding:0 9px;
 border-radius:9px;white-space:nowrap;color:#fff}
.pill.y{background:#4a7c59}.pill.n{background:#9a3b3b}
.pill.p{background:#b8930f}.pill.o{background:#b4aa9c}
.role{display:inline-block;font-size:11px;line-height:18px;padding:0 8px;border-radius:9px;
 background:var(--soft);color:var(--ink2);white-space:nowrap;border:1px solid var(--line)}
.role.j{background:#eef3ef;color:#2f5d3a;border-color:#d3e2d7}
.role.p{background:var(--warn-bg);color:var(--warn);border-color:#ecdcb4}

.more{margin:14px 0 0;text-align:center}
.more button{border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:7px;
 font:inherit;font-size:12.5px;padding:7px 20px;cursor:pointer}
.more button:hover{border-color:var(--brand);color:var(--brand)}
.empty{padding:34px 16px;text-align:center;color:var(--muted);font-size:13px}

@media(max-width:820px){
  .opt{padding:24px 16px 60px}
  .flt .act{margin-left:0;width:100%}
}

/* 逐格新增的兩欄 */
table.g td.maj{color:var(--ink2);line-height:1.6;min-width:120px}
table.g td.why{line-height:1.85;min-width:280px;color:var(--ink2)}
table.g td.why .mute{font-size:11.5px}
table.g td.why a{color:var(--brand);text-decoration:none;white-space:nowrap}
table.g td.why a:hover{text-decoration:underline}

/* 逐案：整件案子的對照表。樣式對齊主資料庫的同一張表，
   兩邊看到的要是同一個東西，不能一邊寬鬆一邊緊湊。 */
.kase{border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:16px 0;
 background:#fdfaf0;border-color:#efe4c8}
.kase h3{margin:0 0 12px;font-size:16px;font-family:var(--serif);color:var(--brand)}
.kase h3 a{color:inherit;text-decoration:none}
.kase h3 a:hover{text-decoration:underline}
.kase h3 small{font-weight:400;font-size:11.5px;color:var(--muted);margin-left:10px;
 font-family:var(--sans)}
.stwrap{overflow-x:auto;margin:8px 0}
.stmx,.strows{border-collapse:collapse;font-size:12.8px;min-width:100%}
.stmx th,.stmx td,.strows th,.strows td{border:1px solid var(--line);
 padding:6px 9px;vertical-align:top;line-height:1.7;background:#fff}
.stmx th,.strows th{background:#faf4e6;font-size:12px;white-space:nowrap}
.stmx td{text-align:center;white-space:nowrap}
.stmx td.q{text-align:left;white-space:normal;min-width:13em}
.stmx td.maj{text-align:left;white-space:nowrap;color:var(--ink2)}
.stmx th.hi,.stmx td.hi{background:var(--brand-soft)}
.strows td.obj{width:19%;font-weight:700}
.strows td.obj small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.strows td.maj{width:24%;color:var(--ink2)}
.strows td.st{width:8%;text-align:center;white-space:nowrap}
.strows td.why{line-height:1.9}
.stb{display:inline-block;font-size:11px;font-weight:700;line-height:19px;
 padding:0 8px;border-radius:9px;white-space:nowrap}
.stb.y{background:#dcead9;color:#2f5d3a}
.stb.n{background:#f3d9d5;color:#8f2b2b}
.stb.p{background:#f7ecd4;color:#8a6217}
.stb.o{background:#eceae4;color:#8c857c}
/* 概括表態：只有整體性表態、對該爭點沒有自己理由的格，畫淡一點 */
.stb.wk{opacity:.5;outline:1px dashed currentColor;outline-offset:-1px}
.pill.wk{opacity:.55}
.suptag{display:inline-block;margin-left:4px;font-size:10px;line-height:16px;padding:0 5px;
  border-radius:8px;background:#f1efe9;color:#8c857c;vertical-align:middle;white-space:nowrap}
.ocrnote{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:400;line-height:16px;
  padding:0 6px;border-radius:8px;background:#fbeee0;color:#9a5b1c;border:1px solid #efd3b4;vertical-align:middle}

.stdet{border:1px solid var(--line);border-radius:8px;margin:8px 0;background:#fff}
.stdet>summary{cursor:pointer;padding:8px 12px;font-weight:700;font-size:13.5px;
 list-style:none}
.stdet>summary::-webkit-details-marker{display:none}
.stdet>summary::before{content:"▸ ";color:var(--muted)}
.stdet[open]>summary::before{content:"▾ "}
.stdet[open]>summary{border-bottom:1px solid var(--line)}
.stdet .stwrap{margin:0;padding:0 12px 12px}
.aisrc{font-size:11.5px;color:var(--muted);line-height:1.8;margin:10px 0 0}

/* 頁首那一行：標題與使用說明鈕 */
.opt .hdrow{display:flex;align-items:flex-start;gap:16px}
.opt .hdrow h1{flex:1;min-width:0}
.opt .hdrow .btn{flex:none;margin-top:2px}
.opt .lnk{border:0;background:none;color:var(--brand);font:inherit;font-size:inherit;
 cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}

/* 依爭點時，左欄每一項是一段爭點文字，不是短案號，所以要能折行、限行數 */
.list .it .qt{font-size:12.8px;line-height:1.6;color:var(--ink);
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.list .it.on .qt{color:var(--brand);font-weight:700}
.list .it .m .d{color:var(--brand);font-weight:700;font-size:11.5px}

/* 表頭的 h1 已經寫著「某某 大法官」，側寫再寫一次姓名是重複的 */
#profwrap .phd #pname{display:none}
#profwrap .phd{margin-top:14px}

/* ── 篩選列 ──────────────────────────────────────────────
   下拉改成左右切換鈕：選項只有兩三個時，攤開來比點開下拉快，
   而且看得到「另一邊是什麼」。 */
.seg{display:inline-flex;flex:none;border:1px solid var(--line);border-radius:7px;
 overflow:hidden;background:#fff}
.seg button{border:0;background:none;font:inherit;font-size:12.5px;padding:5px 13px;
 cursor:pointer;color:var(--ink2);white-space:nowrap}
.seg button + button{border-left:1px solid var(--line)}
.seg button:hover{background:var(--soft)}
.seg button[aria-pressed=true]{background:var(--brand);color:#fff}
.seg[aria-disabled=true]{opacity:.45}
.seg[aria-disabled=true] button{cursor:not-allowed}

/* 搜尋框不必佔滿整列——左邊已經有切換鈕了 */
.ctl .srch{gap:8px}
.ctl .srch input[type=search]{flex:1;min-width:0}

/* 立場、角色、支撐各自成列。原本三組共用一個 flex-wrap 容器，
   排不下時下一組的標題會被吸到前一列的尾巴，看起來像跑錯行。 */
.ctl .grp{display:flex;align-items:flex-start;gap:8px;flex-wrap:nowrap}
.ctl .grp > b{flex:none;width:52px;font-size:12px;color:var(--ink2);
 font-weight:600;padding-top:2px}
.ctl .grp .cks{display:flex;flex-wrap:wrap;gap:4px 10px;min-width:0}
.ctl .grp .cks span{display:flex;align-items:center;gap:3px;font-size:12px;
 color:var(--ink2);white-space:nowrap}
.ctl .grp .seg{margin-top:-1px}

/* 個人側寫的立場配色。全站的 .cy/.cn/.cp/.co 定義在 analysis.css，
   而且限定在 .ana 底下——這一頁不是那個容器，所以色塊原本是透明的。
   這裡限定在 #profwrap 底下重新給一次，才不會撞到頁尾那個 .cp。 */
#profwrap .cy{background:#4a7c59}
#profwrap .cn{background:#9a3b3b}
#profwrap .cp{background:#c9a227}
#profwrap .co{background:#ddd6cb}
#profwrap .bigbar .bar{height:16px}
#profwrap .key{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:12px;color:var(--ink2)}
#profwrap .key span{display:flex;align-items:center;gap:5px}
#profwrap .key i{width:11px;height:11px;border-radius:2px;display:block}

/* 警語裡那張兩列小表，只是把「差在哪」排齊，不要看起來像資料表 */
#profwrap .warn table.tiny{width:100%;border-collapse:collapse;margin:7px 0}
#profwrap .warn table.tiny th{width:104px;text-align:left;vertical-align:top;
 font-weight:700;padding:4px 10px 4px 0;white-space:nowrap}
#profwrap .warn table.tiny td{vertical-align:top;padding:4px 0;line-height:1.7}

/* 分頁列（2026-09 取代「再顯示 N 列」的無限往下疊） */
.pager{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:14px 0 4px}
.pager .pg{border:1px solid var(--line);background:#fff;color:var(--ink);
 border-radius:5px;padding:4px 10px;font-size:12.5px;cursor:pointer;font-family:inherit}
.pager .pg:hover:not([disabled]){border-color:var(--brand);color:var(--brand)}
.pager .pg.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.pager .pg[disabled]{opacity:.4;cursor:default}
.pager .gap{color:var(--muted);padding:0 2px}
.pager .rng{margin-left:8px;font-size:12px;color:var(--muted)}

/* 立場格的四色計數不隨「顯示單位」改變（單位換的是列怎麼併，格數不變），
   所以標一個小字說明它算的是什麼，免得看起來像沒跟著切換。 */
.sum .mix em{font-style:normal;color:var(--muted);margin-right:6px;font-size:11.5px}