/* ==========================================================================
   8. 検索結果レイアウト（サイドバー + 結果カラム）/ ツールバー / フィルターチップ
   デスクトップ（>=960px）はサイドバー常設の2カラム。960px 未満はサイドバーを
   オフキャンバスのドロワーにし、結果ツールバーの「条件・絞り込み」ボタンで開く。
   ========================================================================== */
.results-layout {
  padding-block: var(--space-5) var(--space-9);
}

@media (min-width: 960px) {
  .results-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
}

.results-main {
  min-width: 0;
}

/* 結果カラム内のグリッドは列幅に合わせて自動調整する（サイドバーの分だけ主カラムが
   狭くなるため、固定列数（§10 の .course-grid）ではなく auto-fill で詰める）。 */
.results-main .course-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* 空状態は grid を解除してカラム全幅の1ブロックにする（.empty-state 側が中央寄せ）。
   .course-grid.course-grid--empty で詳細度を上げ、後方の `.course-grid { display:grid }`
   にソース順で負けないようにする（負けると空状態が最初の1トラックに押し込まれ左寄せになる）。 */
.course-grid.course-grid--empty {
  display: block;
}

/* 結果カラム上部のツールバー: 件数サマリー / 条件・絞り込みボタン（モバイル）/ 並べ替え。 */
.results-toolbar {
  position: sticky;
  top: var(--header-height);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding-block: var(--space-2);
  background: rgba(247, 248, 246, 0.94);
  backdrop-filter: saturate(180%) blur(8px);
}

.results-toolbar__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.search-summary__text {
  font-size: var(--text-sm);
  color: var(--ink-700);
}

.search-summary__text strong {
  color: var(--ink-900);
  font-weight: 700;
}

/* ⛳スコア（既定ソート指標）の一言凡例（#17）。カードのバッジ「⛳ 広い (3.4)」・評価行の
   「★ 4.2」が何点満点か・出典を常時表示で伝える（検討リストの気温凡例 .decide-legend と
   同じトンマナ。ツールチップだとモバイルで読めないため常時表示にする）。 */
/* 「読み込み済みの候補が母数である」ことの注記（js/views/results-scope.js）。
   絞り込み（ナイター等サーバー側へ委譲できない条件）と並べ替え（スタート時間順・涼しい順）で
   最大2行になるため、各行を <span> のブロックで積む。 */
.results-sort-note {
  margin: calc(-1 * var(--space-1)) 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--ink-500);
  line-height: 1.5;
}
.results-sort-note span {
  display: block;
}
.results-sort-note[hidden] {
  display: none;
}

/* 「条件・絞り込み」ボタン。モバイルでサイドバードロワーを開く。デスクトップでは隠す。 */
.results-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* モバイルツールバーで隣り合う並べ替えpill（.select--sort）と文字サイズ・高さを揃える。
     btn--sm 既定（font-size --text-xs / line-height 1.2）は 12px・低めの行になり、pill 側の
     14px（--text-sm）・line-height normal と不一致だった。pill 側に合わせる（丸み・トーンが基準）。
     このボタンは <960px でのみ表示（下の @media で display:none）されるためデスクトップに影響しない。 */
  font-size: var(--text-sm);
  line-height: normal;
}

@media (min-width: 960px) {
  .results-filter-toggle {
    display: none;
  }
}

/* 可視ラベルは置かずドロップダウン単体で表示する（用途名は select の aria-label が担う。
   format.js sortDropdownHtml 参照）。 */
.sort-dropdown {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.select--sort {
  padding: var(--space-2) var(--space-6) var(--space-2) 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-pill);
}

/* マップ表示中は並べ替えが効かないため無効化される（js/views/results-map.js）。
   cursor は共通の [disabled] 規則が担うので、ここでは減光のみ。 */
.select--sort:disabled {
  opacity: 0.55;
}

/* ---------------------------- サイドバー本体 ---------------------------- */
.results-sidebar {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* デスクトップは sticky 固定（結果リストを下までスクロールしても絞り込みが視界に残る）。
   サイドバーがビューポートより長い場合（詳細絞り込みを開いた等）は max-height +
   .results-sidebar__scroll の内部スクロールで賄う。
   エリア/スタート時間のポップアップ（.sidebar-picker__popup、絶対配置オーバーレイ）は
   内部スクロールの overflow でクリップされるため、ポップアップ開放中だけ .is-popup-open
   （js/views/results-sidebar.js が bindMultiSelectPopup の onOpenChange で付け外し）で
   max-height と overflow を解除してクリップを外す。トグルはサイドバー上部にあり
   （開くとき scrollTop はほぼ0）、左カラムの下は空きスペースなので、解除中に
   サイドバーが自然高さへ伸びても他要素と重ならない。 */
@media (min-width: 960px) {
  .results-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    max-height: calc(100vh - var(--header-height) - var(--space-4) * 2);
    display: flex;
    flex-direction: column;
  }

  .results-sidebar__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color-strong) transparent;
  }

  .results-sidebar.is-popup-open {
    max-height: none;
  }

  .results-sidebar.is-popup-open .results-sidebar__scroll {
    overflow: visible;
  }
}

.results-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-color);
}

.results-sidebar__heading {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink-900);
}

.results-sidebar__close {
  display: none; /* モバイルドロワー時のみ表示 */
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--ink-500);
  padding: var(--space-1) var(--space-2);
}

.results-sidebar__scroll {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.results-sidebar__overlay {
  display: none;
}

/* ---------------------------- サイドバーのセクション ---------------------------- */
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sidebar-section__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-900);
}

.sidebar-section__apply {
  width: 100%;
  margin-top: var(--space-1);
}

.sidebar-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-field__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-500);
}

.sidebar-field__control {
  width: 100%;
}

/* プレー日: 自前カレンダー（.date-picker、§7参照）を .sidebar-picker のトグルで開く。
   旧 .sidebar-date（ネイティブ input[type=date] + showPicker）は廃止した。 */

/* プレー日 / エリア / スタート時間: レイアウトを押し下げないポップアップ型セレクト。 */
.sidebar-picker {
  position: relative;
}

.sidebar-picker__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: 8px var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--text-sm);
  color: var(--ink-700);
  text-align: left;
  cursor: pointer;
}

.sidebar-picker__toggle:hover,
.sidebar-picker__toggle[aria-expanded="true"] {
  border-color: var(--ink-400);
}

.sidebar-picker__label {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-500);
}

/* value（兵庫県 / 6時台 など）は右揃え。 */
.sidebar-picker__value {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 65%;
  text-align: right;
}

/* チェブロン: プレー日・エリア・スタート時間で共通（色・位置・大きさを揃える）。 */
.sidebar-picker__toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  margin-top: -2px;
  border-right: 2px solid var(--ink-400);
  border-bottom: 2px solid var(--ink-400);
  transform: rotate(45deg);
}

/* エリア/時間のポップアップ（絶対配置。開いても下のチップ/詳細を押し下げない）。 */
.sidebar-picker__popup {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  z-index: 40;
  max-height: min(420px, 60vh);
  overflow-y: auto;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.sidebar-picker__popup[hidden] {
  display: none;
}

/* アコーディオン（<details>）: 詳細絞り込み。 */
.sidebar-accordion {
  /* .sidebar-section の flex+gap を打ち消す。gap があると閉じた状態でも
     summary の下に12pxの隙間が入り、他のドロップダウンより高くなる。 */
  display: block;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.sidebar-accordion__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* プレー日/エリア/スタート時間（min-height:44px の border-box）と閉じた状態の
     高さを揃える。外枠の上下ボーダー2px分を引いた42px。 */
  min-height: 42px;
  padding: 8px var(--space-3);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.sidebar-accordion__summary::-webkit-details-marker {
  display: none;
}

.sidebar-accordion__summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--ink-400);
  border-bottom: 2px solid var(--ink-400);
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.sidebar-accordion[open] > .sidebar-accordion__summary::after {
  transform: rotate(-135deg);
}

.sidebar-accordion__value {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--ink-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
  text-align: right;
}

.sidebar-accordion__body {
  padding: var(--space-3);
  border-top: 1px solid var(--border-color);
}

/* 詳細絞り込みのオプション（§18 の .filter-modal__options を再利用）は、狭いサイドバー内では
   2列だと窮屈なため1列に落とす。 */
.results-sidebar .filter-modal__options {
  grid-template-columns: 1fr;
}

/* セクション区切り（余白＋区切り線）は共通の
   .filter-modal__section + .filter-modal__section（§18）で引く。 */

/* よく使う条件チップの並び（サイドバー内は折り返す）。 */
.sidebar-quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* 詳細絞り込みのアクション（クリア / N件を表示）。 */
.sidebar-detail__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.sidebar-detail__actions .btn--primary {
  flex: 1;
}

/* ---------------------------- モバイル: ドロワー ---------------------------- */
@media (max-width: 959px) {
  .results-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(360px, 88vw);
    z-index: 80;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
  }

  .results-sidebar.is-open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  .results-sidebar__scroll {
    flex: 1;
    overflow-y: auto;
  }

  .results-sidebar__close {
    display: inline-flex;
  }

  .results-sidebar__overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: var(--overlay);
  }

  .results-sidebar__overlay[hidden] {
    display: none;
  }

  body.sidebar-open {
    overflow: hidden;
  }
}

/* フィルターチップ（サイドバーの「よく使う条件」）。 */
.filter-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 高さはスケール値40pxで固定（従来39px・スケール外）。水平パディングのみ。 */
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color-strong);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-700);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.filter-pill:hover {
  border-color: var(--ink-400);
}

.filter-pill.is-active {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.filter-pill.is-active::before {
  content: "✓";
  font-weight: 700;
}

/* 適用数バッジ（結果ツールバーの「条件・絞り込み」ボタン / 詳細絞り込みの見出し）。
   実装は §9 の .badge / .badge--accent に統合済み（同一の見た目意図のため。
   マークアップ互換のためクラス名は .filter-trigger__badge のまま）。 */