/* 先例網絡頁。
   原本註解寫「左欄沿用全站 .side/.ctl 樣式」，但那組樣式其實定義在 db.css，
   不在全站共用的 site.css，這一頁又沒載 db.css——左欄因此完全沒有樣式：
   側欄被撐到 464px、勾選框亂排、收合鈕變成一條細縫。外框那幾條補在這裡。 */

.sidetab{width:28px;min-width:28px;flex:none;cursor:pointer;border:0;padding:0;
 display:flex;align-items:center;justify-content:center;gap:9px;
 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:10px 12px;border-bottom:1px solid var(--line);
 display:flex;flex-direction:column;gap:8px}
.ctl .row{display:flex;gap:6px 10px;align-items:center;flex-wrap:wrap}
.ctl input[type=search]{flex:1;min-width:0;width:100%;padding:8px 11px;font:inherit;font-size:13.5px;
 border:1px solid var(--line);border-radius:7px;background:#fff}
.ctl input: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 .cnt{font-size:11.5px;color:var(--muted);margin-left:auto;white-space:nowrap}

.list{flex:1;overflow-y:auto;min-height:0}
.it{display:block;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer;
 text-decoration:none;color:inherit}
.it:hover{background:var(--soft)}
.it .z{font-weight:700;font-size:13.5px;color:var(--brand)}
.it .q{font-size:11.5px;color:var(--ink2);line-height:1.65;margin-top:2px}
.list .empty{padding:22px 16px;color:var(--muted);font-size:12.5px;line-height:1.7;text-align:center}

.doc{display:flex;min-width:0;height:calc(100vh - 52px)}
.gcol{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.gbar{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line);
  background:#fbfaf7;flex-wrap:wrap}
.gbar .ttl{font-weight:700}
.gbar .key{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:#6d675e}
.gbar .key span{display:inline-flex;align-items:center;gap:4px}
.gwrap{position:relative;flex:1 1 auto;min-height:0;background:#fdfcfa}
.gwrap canvas{width:100%;height:100%;display:block;cursor:grab}
.gwrap canvas.drag{cursor:grabbing}
.gtip{position:absolute;pointer-events:none;background:#2b2823;color:#f6f3ec;font-size:12px;
  padding:6px 9px;border-radius:6px;max-width:300px;line-height:1.5;z-index:5}

i.e{display:inline-block;width:16px;height:0;border-top:3px solid #999;vertical-align:middle}
i.e.chg{border-color:#b3403f}i.e.nar{border-color:#d9822b}i.e.sup{border-color:#5b87b0}
i.e.ext{border-color:#4a8f6d}i.e.dif{border-color:#9a7fb8}i.e.con{border-color:#d8d2c6}
i.n{display:inline-block;width:10px;height:10px;border-radius:50%}
i.n.si{background:#2e5570}i.n.hp{background:#3d6b4a}i.n.yz{background:#8c857c}

.ctl .kinds{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px}
.ctl .kinds label{display:inline-flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap}
.ctl .cb{font-size:12.5px;display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.list .it small{display:block;color:#8c857c}

/* 右欄：關係文字 */
.rcol{flex:0 0 340px;max-width:340px;border-left:1px solid var(--line);overflow-y:auto;
  padding:14px 16px;background:#fff;font-size:13px;line-height:1.7}
.rcol h3{margin:2px 0 8px;font-size:14.5px}
.rcol h4{margin:14px 0 6px;font-size:12.5px;color:#6d675e;border-bottom:1px solid var(--line);padding-bottom:4px}
.rcol .edge{margin:0 0 10px;padding-left:9px;border-left:3px solid #d8d2c6}
.rcol .edge.chg{border-left-color:#b3403f}.rcol .edge.nar{border-left-color:#d9822b}
.rcol .edge.sup{border-left-color:#5b87b0}.rcol .edge.ext{border-left-color:#4a8f6d}
.rcol .edge.dif{border-left-color:#9a7fb8}
.rcol .kb{display:inline-block;font-size:11px;padding:0 5px;border-radius:7px;background:#f1efe9;
  color:#6d675e;margin-right:5px;vertical-align:1px}
.rcol .kb.chg{background:#f6e4e3;color:#8f3231}.rcol .kb.nar{background:#f9ecdc;color:#96591a}
.rcol .kb.sup{background:#e6eef5;color:#3c5f80}.rcol .kb.ext{background:#e4f0e9;color:#356b4e}
.rcol .kb.dif{background:#ece6f4;color:#6b558c}
.rcol .xb{display:inline-block;font-size:11px;padding:0 5px;border-radius:7px;background:#2e5570;
  color:#fff;margin-right:5px;vertical-align:1px}
.rcol .h{color:#4c463e}
.rcol .mute{color:#8c857c}
.rcol .one{color:#6d675e;font-size:12.5px;margin:2px 0 4px}
/* 右欄的「以它為中心」「改以這一件為中心重畫」是按鈕，做成連結的樣子，
   不然會顯示成瀏覽器預設的灰框按鈕 */
.rcol .lnk{border:0;background:none;color:var(--brand);font:inherit;font-size:12.5px;
 cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}
.rcol .lnk:hover{color:#84202f}
@media (max-width:1100px){.rcol{flex-basis:300px;max-width:300px}}
@media (max-width:900px){.doc{flex-direction:column;height:auto}
  /* 直排時 .gcol／.gwrap 都要停止伸長，否則畫布會被拉到一兩千像素高，
     圖畫在正中央就跑到畫面外，看起來像「圖不見了」（2026-09 修） */
  .gcol{flex:none}
  .gwrap{height:60vh;min-height:320px;flex:none}
  .rcol{max-width:none;flex:none;border-left:0;border-top:1px solid var(--line)}}