/* =============================================================================
 * dir-search.css — 站內搜尋「即時前層 + 語意後層」下拉面板樣式
 * 建立 2026-07-13 by Claude · 全 var(--tl-*) token（禁自創色）· RWD@375
 *
 * 前層 = Pagefind 即時候選（as-you-type·全靜態庫）；後層 = semanticSearchContent
 * 「相關主題」（DGX bge-m3·fail-open）。面板懸浮於 .search-container 之下（該容器
 * position:relative）。深色主題（directory navy 底）沿用 tl-tokens 語意層。
 * ============================================================================= */

/* 面板：懸浮在搜尋框下方 */
.dir-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: var(--tl-z-toggle); /* 940 · 蓋住主區內容、低於 modal */
  display: none;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--tl-bg-elevated);
  border: 1px solid var(--tl-border-strong);
  border-radius: var(--tl-radius-lg);
  box-shadow: var(--tl-shadow-xl);
  padding: 6px;
  -webkit-overflow-scrolling: touch;
}
.dir-search-panel.is-open { display: block; }

/* 區塊標題（前層 / 後層） */
.dss-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 6px;
  font-size: var(--tl-text-xs);
  font-weight: var(--tl-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tl-text-subtle);
}
.dss-section-label i { color: var(--tl-primary); }
.dss-section--semantic .dss-section-label i { color: var(--tl-accent); }
.dss-section { border-top: 1px solid var(--tl-border-subtle); }
.dss-section:first-child { border-top: 0; }

/* 單筆候選（前層文章/頁面） */
.dss-item {
  display: block;
  padding: 9px 12px;
  border-radius: var(--tl-radius-md);
  color: var(--tl-text);
  text-decoration: none;
  cursor: pointer;
}
.dss-item:hover,
.dss-item.is-active {
  background: var(--tl-bg-elevated-2);
}
.dss-item.is-active { outline: 2px solid var(--tl-ring); outline-offset: -2px; }
.dss-item__title {
  font-size: var(--tl-text-sm);
  font-weight: var(--tl-weight-bold);
  line-height: var(--tl-leading-snug);
  color: var(--tl-text);
}
.dss-item__title mark {
  background: color-mix(in srgb, var(--tl-primary) 30%, transparent);
  color: var(--tl-text);
  border-radius: 3px;
  padding: 0 1px;
}
.dss-item__excerpt {
  margin-top: 3px;
  font-size: var(--tl-text-xs);
  line-height: var(--tl-leading-normal);
  color: var(--tl-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dss-item__excerpt mark {
  background: color-mix(in srgb, var(--tl-primary) 24%, transparent);
  color: var(--tl-text);
  border-radius: 3px;
}
.dss-item__meta {
  margin-top: 3px;
  font-size: var(--tl-text-xs);
  color: var(--tl-text-subtle);
}
.dss-item__meta i { margin-right: 4px; }

/* 相關主題（後層·語意）以 chip 呈現 */
.dss-related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px 12px;
}
.dss-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: var(--tl-radius-full);
  background: var(--tl-line-bloom-bg);
  border: 1px solid var(--tl-line-bloom-border);
  color: var(--tl-text);
  font-size: var(--tl-text-xs);
  font-weight: var(--tl-weight-medium);
  text-decoration: none;
  line-height: var(--tl-leading-snug);
}
.dss-chip:hover { background: color-mix(in srgb, var(--tl-accent) 22%, transparent); }
.dss-chip i { color: var(--tl-accent); flex: 0 0 auto; }
.dss-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 狀態列（載入 / 空 / 建置中 / 無結果） */
.dss-status {
  padding: 10px 12px;
  font-size: var(--tl-text-xs);
  color: var(--tl-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dss-status i { color: var(--tl-text-subtle); }
.dss-empty {
  padding: 16px 12px;
  text-align: center;
  font-size: var(--tl-text-sm);
  color: var(--tl-text-muted);
}
.dss-empty i { color: var(--tl-text-subtle); margin-right: 6px; }

/* RWD@375：面板全寬、字級維持 ≥ tap 目標 */
@media (max-width: 768px) {
  .dir-search-panel {
    max-height: min(64vh, 460px);
  }
  .dss-item { padding: 11px 12px; } /* 稍大 tap 目標 */
}

/* 尊重減少動態偏好（tl-tokens 已全站中和 transition，此處無額外動畫） */