/* Leadly 検索UI 専用 CSS (S1 Step 3 / Wireframe IA 統合版)
 *
 * メインの hfs-* クラスは
 *   /static/design-refs/leadly_iteration3_20260427/hifi-styles.css
 * で定義されている。本ファイルは Jinja2 実装固有の補足のみを定義する。
 *   - <details>/<summary> での折りたたみ補正(JSX の useState を <details> で代替)
 *   - 検索ページ特有の小コンポーネント(.hfs-rank-cell, .hfs-aside-head 等)
 *   - 768px 以下のモバイル対応(aside を縦積みに)
 */

/* ============================================================
 * 1. <details>/<summary> ベースの折りたたみ(JS不要)
 * ============================================================ */
.hfs-fsec[open] .hfs-chevron { transform: rotate(-135deg); }
.hfs-fsec-head { list-style: none; }
.hfs-fsec-head::-webkit-details-marker { display: none; }
.hfs-fsec-head-left { display: flex; align-items: center; gap: 8px; }

/* ============================================================
 * 2. aside ヘッダー(絞り込み + CLEAR ALL)
 * ============================================================ */
.hfs-aside-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hf-line);
}
.hfs-aside-title { font-weight: 700; font-size: 14px; color: var(--hf-ink); }
.hfs-clear-all {
  font-family: var(--hf-mono);
  font-size: 10.5px;
  color: var(--hf-muted);
  letter-spacing: 0.08em;
  text-decoration: none;
}
.hfs-clear-all:hover { color: var(--hf-ink); }

/* ============================================================
 * 3. ファセット内の form 要素(select, ヘルプテキスト)
 * ============================================================ */
.hfs-fsec-body select.hfin {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--hf-line-2);
  border-radius: 3px;
  background: #fff;
  color: var(--hf-ink);
}
.hfs-fsec-body select.hfin:focus {
  outline: none;
  border-color: var(--hf-accent);
  box-shadow: 0 0 0 2px var(--hf-accent-soft);
}
.hfs-rank-help { font-size: 11px; color: var(--hf-muted); margin-top: 10px; line-height: 1.55; }

/* Webサイト「なしのみ」選択時、診断スコア依存フィルタ(営業ランク/提案内容)を
   視覚的に無効化する(LEADLY-P2 相良FB #28)。選択値はクリアしないため、
   pointer-events: none で操作のみ抑止し、opacity で無効であることを示す。 */
.hfs-fsec.hfs-diag-disabled {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .hfs-fsec.hfs-diag-disabled { transition: none; }
}

/* aside チェックボックス行のレイアウト微調整(.hfcbx は hifi-styles.css 既定) */
.hfs-fsec-body .hfcbx {
  font-size: 13px;
}

/* ============================================================
 * 4. プレビュー表のランクセル(badge)
 * ============================================================ */
.hfs-rank-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  border-radius: 3px;
  font-family: var(--hf-mono);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

/* ============================================================
 * 5. プレビュー表の追加スタイル(hfs-tbl の Jinja2 用)
 * ============================================================ */
.hfs-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.hfs-tbl th,
.hfs-tbl td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--hf-line);
}
.hfs-tbl th {
  background: var(--hf-bg-2);
  font-family: var(--hf-mono);
  font-size: 10.5px;
  color: var(--hf-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.hfs-tbl tbody tr:last-child td { border-bottom: 0; }
.hfs-tbl tbody tr.locked td { background: #fff; }
.hfs-tbl tbody tr.locked:hover td { background: var(--hf-bg-2); }
/* SP で列が潰れないよう横スクロール可に(相良FB #34)。デスクトップは幅100%で従来通り。 */
.hfs-tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
 * 6. ランク棒グラフのレイアウト(縦棒)
 * ============================================================ */
.hfs-rankbars > div {
  height: 100%;
  justify-content: flex-end;
}
.hfs-rankbars > div.off { opacity: 0.32; }
.hfs-rank-n {
  font-family: var(--hf-mono);
  font-size: 10.5px;
  color: var(--hf-ink);
  font-variant-numeric: tabular-nums;
}
.hfs-rank-l {
  font-family: var(--hf-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--hf-muted);
}

/* ============================================================
 * 7. プレフィルバナー(/industry/ から遷移時)
 * ============================================================ */
.hfs-prefill-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 40px;
  background: var(--hf-accent-soft);
  border-bottom: 1px solid var(--hf-line);
  font-size: 13px;
  color: var(--hf-accent-ink);
}
.hfs-prefill-banner .icn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hf-accent);
  color: #fff;
  font-family: var(--hf-mono);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ============================================================
 * 8. ソートバー
 * ============================================================ */
.hfs-sortbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 40px;
  border-bottom: 1px solid var(--hf-line);
  background: #fff;
  flex-wrap: wrap;
}
.hfs-sort-pill {
  padding: 4px 10px;
  border: 1px solid var(--hf-line);
  border-radius: 3px;
  font-size: 12px;
  color: var(--hf-muted);
  cursor: pointer;
  background: #fff;
}
.hfs-sort-pill:hover {
  border-color: var(--hf-line-2);
  color: var(--hf-ink);
}
.hfs-sort-pill.on {
  background: var(--hf-ink);
  color: #fff;
  border-color: var(--hf-ink);
}
/* 並び順は固定のため、クリック可能に見える pill ではなく非インタラクティブな
   情報ラベルで表示する(高橋テスト指摘・偽アフォーダンス除去)。 */
.hfs-sort-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--hf-ink);
  cursor: default;
}

/* ============================================================
 * 9. モバイル aside ドロワー (≤768px)  Step 6
 * ============================================================ */
@media (min-width: 769px) {
  .hfs-mobile-toggle { display: none; }
  .hfs-aside-close    { display: none; }
  /* PC はチェックボックスの auto-reflect で即絞り込むため「結果を見る」CTA は不要。
     モバイル(≤768px)ではドロワーを閉じて結果へ戻る確定動線として表示。(2026-06-15) */
  .hfs-aside-cta-top  { display: none; }
  /* CTA を隠した PC では「絞り込み」見出しの下線が宙に浮くため除去。
     モバイルは下に「結果を見る」ボタンが続くため下線を残す。(2026-06-15) */
  .hfs-aside-head     { border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 768px) {
  /* ── オーバーレイ ── */
  .hfs-aside-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, .4);
    display: none;
  }
  .hfs-aside-overlay.is-open { display: block; }

  /* ── ドロワー本体 ── */
  .hfs-aside {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(85vw, 360px);
    z-index: 50;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .25s ease;
    background: var(--hf-bg);
    border-right: 1px solid var(--hf-line);
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
  }
  .hfs-aside.is-open { transform: translateX(0); }

  /* ── body スクロールロック ── */
  body.hfs-drawer-open { overflow: hidden; }

  /* ── モバイルトグルボタン ── */
  .hfs-mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin: 16px 16px 0;
    background: var(--hf-bg);
    border: 1px solid var(--hf-line);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: var(--hf-ink);
  }

  /* ── 閉じるボタン ── */
  .hfs-aside-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--hf-muted);
    margin-left: auto;
  }

  /* ── レスポンシブ調整 ── */
  .hfs-prefill-banner,
  .hfs-sortbar {
    padding-left: 16px;
    padding-right: 16px;
  }
  .hfs-hero { padding: 24px 16px 18px !important; }
  .hfs-count-row { gap: 10px; }
  .hfs-count-num { font-size: 48px !important; }
  .hfs-cta-row { flex-direction: column; align-items: stretch; }
  .hfs-cta-row .hfs-cta-price { margin-left: 0; }

  /* プレビュー表: SP で列を潰さず横スクロール(相良FB #34 2026-07-21)。
     min-width で自然幅を確保 → .hfs-tbl-scroll が横スクロールを提供。 */
  .hfs-tbl { min-width: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  .hfs-aside { transition: none; }
}

/* ============================================================
 * N. チップの × ボタン（相良FB No.44）
 *
 * × は元々 <span aria-hidden> で「見た目だけ・押しても無反応」だった。
 * ボタン化（キーボード操作・aria-label のため）に伴い、UA デフォルトの
 * border / background / padding / font が乗って「灰色の枠付きボックス」に
 * 見えてしまうためリセットする。
 *
 * 主定義は design-refs/leadly_iteration3_20260427/hifi-styles.css の
 * `.hfs-chip-x`（display/width/height/font-size/line-height/color/opacity と
 * :hover）。本ファイルは実装固有の補足を担う位置づけで、index.html の
 * link 順（hifi-styles → hifi-fixes → search）で最後に読まれるため上書きできる。
 * 同ファイル内の `.hfs-rank-seg button` も同種のリセットを行っており、それに倣う。
 * ============================================================ */
.hfs-chip-x {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* キーボード操作可能になったため、フォーカスリングを明示する
 * （UA デフォルトの outline は appearance:none で失われうる）。 */
.hfs-chip-x:focus-visible {
  outline: 2px solid var(--hf-accent, #b45309);
  outline-offset: 1px;
  opacity: 1;
}