/* ============================================================
   nav-filters.css — 左欄元件（兩頁共用）
   首頁：型態 / 搜尋 / 主題 / 等級 / 標籤
   文章頁：章節跳躍 / 同系列上下篇
   ============================================================ */

/* ---- 左欄區塊標題 ---- */
.side-block{ margin-bottom:24px; }
.side-block h4,
.rail-title{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--ink-soft); margin:0 0 10px; padding-bottom:6px; border-bottom:1.5px solid var(--line); }

/* ---- 型態分頁 ---- */
.type-switch{ display:flex; gap:4px; margin-bottom:22px; background: var(--paper-dark); padding:4px; border-radius:24px; }
.type-tab{ font-family: var(--font-mono); font-size:.8rem; background:none; border:none; color: var(--ink-soft);
  flex:1; padding:7px 8px; cursor:pointer; border-radius:20px; transition:all .15s; }
.type-tab:hover{ color: var(--ink); }
.type-tab.active{ background: var(--ink); color: var(--paper); }

/* ---- 搜尋框 ---- */
#search{ font-family: var(--font-sans); font-size:.92rem; padding:8px 12px; border:1.5px solid var(--line);
  border-radius: var(--radius); background: var(--paper); color: var(--ink); }
#search:focus{ outline:none; border-color: var(--teal); }
.shell-left #search{ width:100%; }

/* ---- 主題大類清單 ---- */
.cat-list{ display:flex; flex-direction:column; gap:2px; }
.cat-item{ text-align:left; font-family: var(--font-sans); font-size:.92rem; background:none; border:none;
  color: var(--ink-soft); padding:7px 10px; border-left:3px solid transparent; border-radius:0 var(--radius) var(--radius) 0; cursor:pointer; }
.cat-item:hover{ background: var(--paper-dark); color: var(--ink); }
.cat-item.active{ color: var(--teal-dark); border-left-color: var(--teal); background: var(--paper-dark); font-weight:600; }

/* ---- chip（等級 / 標籤，選中用 .on 或 .active）---- */
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ font-family: var(--font-mono); font-size:.78rem; border:1px dashed var(--line); background:transparent;
  color: var(--ink-soft); padding:3px 11px; border-radius:20px; cursor:pointer; transition:all .15s ease; }
.chip:hover{ border-style:solid; color: var(--ink); }
.chip.on, .chip.active{ background: var(--teal); border-color: var(--teal); border-style:solid; color:#fff; }
.chip.lv-GEPT.on, .chip.lv-GEPT.active{ background: var(--gold); border-color: var(--gold); }

/* ---- 文章頁左欄：章節跳躍 ---- */
.back-link{ display:inline-flex; align-items:center; gap:6px; font-family: var(--font-mono); font-size:.85rem;
  color: var(--teal-dark); text-decoration:none; margin-bottom:14px; }
.back-link:hover{ text-decoration:underline; }
.jump-nav{ display:flex; flex-direction:column; gap:2px; margin-bottom:22px; }
.jump{ font-family: var(--font-mono); font-size:.9rem; text-decoration:none; color: var(--ink-soft); padding:8px 12px;
  border-left:3px solid transparent; border-radius:0 var(--radius) var(--radius) 0; transition:all .15s ease; }
.jump:hover{ background: var(--paper-dark); color: var(--ink); }
.jump.active{ color: var(--teal-dark); border-left-color: var(--teal); background: var(--paper-dark); font-weight:600; }

/* ---- 文章頁左欄：同系列上/下篇 ---- */
.rail-nav{ display:flex; flex-direction:column; gap:8px; }
.nav-card{ border:1.5px solid var(--ink); padding:14px 16px; text-decoration:none; border-radius: var(--radius); background: var(--paper); }
.nav-card .lbl{ font-family: var(--font-mono); font-size:.7rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:1px; }
.nav-card .ttl{ font-family: var(--font-display); margin-top:4px; }
.nav-card:hover{ background: var(--paper-dark); }
.nav-card.next{ text-align:right; }

/* ---- 響應式：左欄收合時橫向排 ---- */
@media (max-width:960px){
  .type-switch{ max-width:340px; }
  .cat-list{ flex-direction:row; flex-wrap:wrap; }
  .cat-item{ border-left:none; border:1px solid var(--line); border-radius:20px; padding:5px 12px; }
  .cat-item.active{ border-left:none; border-color: var(--teal); }
  .jump-nav{ flex-direction:row; flex-wrap:wrap; }
  .jump{ border-left:none; border-bottom:3px solid transparent; border-radius: var(--radius) var(--radius) 0 0; }
  .jump.active{ border-left-color:transparent; border-bottom-color: var(--teal); }
}