/* ============================================================================
 * components/search_bar.css
 *
 * 汎用「タイトル検索バー（debounce + turbo-frame target）」コンポーネント。
 * 元は ks-search-bar-* （ナレッジシェア起源）。2026-05-10 に共通コンポーネント化に
 * 伴い presentations.css から抽出。
 *
 * 利用元:
 *   - shared/components/_search_bar.html.erb
 *   - app/views/app/presentations（ナレッジシェア）
 *   - app/views/app/template_marketplace（必要に応じて）
 *
 * 【ジュニアエンジニア向け解説】
 *   - 主要セレクタは .ks-search-bar / -label / -icon / -input / -clear。
 *   - JS 側 (search_debounce_controller.js) と組み合わせて、入力 → 300ms debounce
 *     → turbo-frame の差し替えで検索ヒットだけを更新する設計。
 *   - WebKit の search 型ネイティブ × ボタンは ::-webkit-search-cancel-button で
 *     非表示にし、独自の .ks-search-bar-clear を使う。
 *   - .visually-hidden はスクリーンリーダー向けラベル（aria 補助）の常套手段。
 *
 * 【リファクタリング基準】（コメント行は行数カウントから除外）
 *   1. 500行未満:  完璧
 *   2. 800行未満:  問題なし
 *   3. 1200行未満: 注意喚起。リファクタリング要検討
 *   4. 1200行以上: リファクタリング必須
 *   現在の実コード行数: 約 71 行（コメント除く、2026-05-11 計測） → 判定: 完璧
 *
 * 変更履歴:
 *   2026-05-10: ヘッダコメントの末尾に残っていた孤立した閉じコメント記号の行を削除（構文残骸）。
 *   2026-05-11: リファクタリング基準・ジュニア向け解説セクションを追加。
 * ============================================================================ */

/* ----- 検索バー本体 ----- */
.ks-search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ks-search-bar:focus-within {
  border-color: var(--gold-primary);
  background: var(--bg-surface-hover);
  box-shadow: var(--gold-glow);
}

.ks-search-bar-label {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  pointer-events: none;
}

.ks-search-bar-icon {
  display: inline-flex;
  align-items: center;
}

.ks-search-bar-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
  padding: var(--space-xs) 0;
}

.ks-search-bar-input::placeholder {
  color: var(--text-muted);
}

/* WebKit が search 型に出すデフォルトの×を消す（独自クリアボタンを使うため） */
.ks-search-bar-input::-webkit-search-cancel-button,
.ks-search-bar-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.ks-search-bar-clear {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: none;
  background: transparent;
  transition: color 0.2s ease, background 0.2s ease;
}

.ks-search-bar-clear:hover {
  color: var(--text-primary);
  background: var(--bg-surface-hover);
}

/* スクリーンリーダー専用テキスト（視覚的に隠す） */
.ks-search-bar .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}