/* ============================================================
   nav-filters.css — 左欄元件（兩頁共用）
   首頁：情境 / 篩選卡（搜尋・主題・等級・標籤，手機收合）
   文章頁：章節跳躍 / 同系列上下篇
   ============================================================ */

.side-block{ margin-bottom:4px; }

/* ---- 情境切換（左欄直排 / 手機橫排） ---- */
.type-switch{ display:flex; flex-direction:column; gap:6px; }
.type-tab{ font-size:.9rem; font-weight:600; color: var(--ink-soft); padding:9px 14px; border-radius: var(--radius);
  cursor:pointer; border:none; background:none; text-align:left; font-family:inherit; }
.type-tab:hover{ background: var(--paper); }
.type-tab.active{ background: var(--teal); color:#fff; }
@media (max-width:960px){ .type-switch{ flex-direction:row; flex-wrap:wrap; } }

/* ---- 篩選卡（搜尋・主題・等級・標籤）
   桌機：.filter-card 隱形（display:contents），內部各自成卡
   手機：合併成一張卡，標題列可收合，區塊間虛線分隔 ---- */
.filter-card{ display:contents; }
.filter-toggle{ display:none; width:100%; align-items:center; justify-content:space-between;
  font-family:inherit; font-size:.9rem; font-weight:700; color: var(--ink);
  background:none; border:none; padding:13px 18px; cursor:pointer; }
.filter-toggle .hint{ font-size:.74rem; font-weight:600; color: var(--teal); }
@media (max-width:960px){
  .filter-card{ display:block; background: var(--card); border:1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom:12px; }
  .filter-toggle{ display:flex; }
  .filter-group{ display:none; }
  .filter-card.open .filter-group{ display:block; }
  /* 卡中卡攤平：各篩選區塊併入同一張卡，虛線分隔 */
  .filter-group .side-card{ border:none; box-shadow:none; border-radius:0; margin:0;
    padding:14px 18px 16px; border-top:1px dashed var(--line); }
}

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

/* ---- 主題清單（chip 風格） ---- */
.cat-list{ display:flex; flex-wrap:wrap; gap:8px; }
.cat-item{ font-size:.8rem; font-weight:600; padding:6px 13px; border-radius:20px; border:1.5px solid var(--line);
  color: var(--ink-soft); background:none; cursor:pointer; font-family:inherit; }
.cat-item:hover{ color: var(--ink); border-color: var(--ink-soft); }
.cat-item.active{ background: var(--teal); border-color: var(--teal); color:#fff; }

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

/* ---- 文章頁左欄：章節跳躍 ---- */
.back-link{ display:inline-flex; align-items:center; gap:6px; font-family: var(--font-mono); font-size:.82rem; font-weight:600;
  color: var(--teal); text-decoration:none; margin-bottom:14px; }
.back-link:hover{ text-decoration:underline; }
.jump-nav{ display:flex; flex-direction:column; gap:4px; margin-bottom:20px; }
.jump{ font-size:.9rem; font-weight:600; text-decoration:none; color: var(--ink-soft); padding:9px 14px;
  border-radius: var(--radius); transition:all .15s ease; }
.jump:hover{ background: var(--paper); color: var(--ink); }
.jump.active{ background: var(--teal); color:#fff; }
@media (max-width:960px){ .jump-nav{ flex-direction:row; flex-wrap:wrap; } }

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