/* ==========================================================================
   12. 統合ビュー「検討リスト＝投票」（#/shortlist と #/s/<payload> 共通）

   js/views/decide.js + js/components/vote-card.js が描画する。旧・比較テーブル
   （.compare-table）と旧・投票カード（.vote-card）はこのビューに統合されて廃止。
   デザイン規律: アクセントは 緑=アクション / アンバー=1位強調 / 赤=警告・削除 の
   3役割のみ（docs/UI-GUIDE.md §10参照）。
   ========================================================================== */
/* タイトル行: 左にタイトル、右端に ellipsis（…）メニューボタン（名前を変更 / リストを削除）。
   375px幅でタイトルが折り返してもボタンは右上に留まる（flex-start + flex-shrink:0）。 */
.decide-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.decide-head__title {
  font-size: var(--text-xl);
}

.decide-head__menu {
  flex-shrink: 0;
  color: var(--ink-500);
}

/* 緑テキストのアクションリンク（GORAで予約 / 別の時間を追加 / 名前を変更）。
   赤（--danger）は削除系、グレー（--muted）は「プランを外す」（ホバーで赤）に使う。 */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: none;
  background: none;
  padding: var(--space-1);
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.link-action:hover {
  text-decoration: underline;
}

.link-action--danger {
  color: var(--danger);
}

.link-action--muted {
  color: var(--ink-400);
}

.link-action--muted:hover {
  color: var(--danger);
}

/* 所在地リンク（所在地テキスト全体を Google Maps 経路リンク化: 📍所在地↗。
   format.js の mapLinkHtml）。.link-action（アクセント緑・inline-flex + align-items:center）を
   ベースに、周囲のメタテキストの文字サイズになじむようインライン調整だけ加える。
   vertical-align: bottom が重要 — inline-flex の既定ベースラインは先頭フレックスアイテム
   （＝map-pinアイコン）由来になり、リンク全体が周囲のテキストより上にずれて見えるため、
   ボックス下端を行ボックス下端に揃える（リンク内テキストは同じ font-size / line-height を
   継承しているので、これでベースラインが一致する）。 */
.map-link {
  gap: 3px;
  padding: 0;
  font-size: inherit;
  vertical-align: bottom;
}

.map-link .map-link__pin,
.map-link .map-link__ext {
  flex: none;
}

.map-link .map-link__ext {
  color: var(--ink-400);
}

.map-link:hover .map-link__ext {
  color: inherit;
}

/* 検索結果カードの所在地: 既定は --ink-800、末尾の矢印はホバー時のみ表示（コース名リンクと
   同じホバー挙動＝色変更＋下線）。矢印は square-arrow-up-right（format.js の hoverArrow）。 */
.course-card__area .map-link--hover-arrow {
  color: var(--ink-800);
}
.course-card__area .map-link--hover-arrow .map-link__ext {
  color: inherit;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.course-card__area .map-link--hover-arrow:hover {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.course-card__area .map-link--hover-arrow:hover .map-link__ext {
  opacity: 1;
}

/* コース詳細ヒーロー（暗い写真の上）用: 緑リンクではコントラストが不足するため白にする */
.map-link--light,
.map-link--light .map-link__ext {
  color: #fff;
}

.map-link--light:hover,
.map-link--light:hover .map-link__ext {
  color: rgba(255, 255, 255, 0.85);
}

.decide-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.decide-toolbar__spacer {
  flex: 1;
}

/* 気温pillの定義を全員（モバイル含む）に伝える常時表示の凡例。ホバーtitleの遅延・
   モバイルでtitleが出ない問題を補う（タップでもトースト表示・decide.js）。 */
.decide-legend {
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  font-size: var(--text-xs);
  color: var(--ink-500);
  line-height: 1.5;
}

/* 「現在の1位」バナー（薄緑）。投票ゼロ/読み込み中はグレーのプレースホルダー表示 */
.decide-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--accent-light);
  border: 1px solid var(--accent-light-strong);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.decide-lead__text {
  font-size: var(--text-sm);
  color: var(--accent-darker);
}

.decide-lead__text b {
  font-size: var(--text-md);
}

.decide-lead__reserve {
  gap: 6px;
}

.decide-lead--empty,
.decide-lead--loading {
  background: var(--surface-sunken);
  border-color: var(--border-color);
}

.decide-lead--empty .decide-lead__text,
.decide-lead--loading .decide-lead__text {
  color: var(--ink-500);
}

/* 参加者→幹事CTA（#G2）。decide ビュー末尾の常設カード（参加者のみ・.decide-lead と同系の意匠）。
   本文（左）＋アクション群（右: 閉じる=secondary、作る=primary）の横並び。狭幅では折り返す。 */
.decide-host-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-top: var(--space-5);
  background: var(--accent-light);
  border: 1px solid var(--accent-light-strong);
  border-radius: var(--radius-lg);
}

.decide-host-cta__body {
  flex: 1 1 220px;
  min-width: 0;
}

.decide-host-cta__title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--accent-darker);
  margin: 0 0 var(--space-1);
}

.decide-host-cta__text {
  font-size: var(--text-sm);
  color: var(--accent-darker);
  margin: 0;
}

/* アクション群: 閉じる（secondary）を「作る」（primary）の左に並べる。狭幅では折り返す。 */
.decide-host-cta__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---- コースカード ---- */
.vote-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.vote-course {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.vote-course--winning {
  border: 2px solid var(--accent);
}

.vote-course__head {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  align-items: flex-start;
}

.vote-course__thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  flex: none;
  /* テーマの ::after テクスチャ（右下の暗い放射グラデ）が角丸からはみ出して
     右下だけ四角いグレーに見えるのを防ぐ。 */
  overflow: hidden;
}

.vote-course__main {
  flex: 1;
  min-width: 0;
}

.vote-course__name {
  font-size: var(--text-md);
  font-weight: 700;
}

.vote-course__meta {
  color: var(--ink-500);
  font-size: var(--text-xs);
  margin-top: 1px;
}

.vote-course__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* 写真上バッジ用の白背景（§9 .fairway-tag）をカード内トーンに合わせる */
.vote-course__badges .fairway-tag {
  background: var(--accent-light);
  box-shadow: none;
}

/* pillスロットは display:contents で自身をレイアウトから消し、中の実pillを
   親（.vote-course__badges / .course-card__badge）の直接の flex 子にする（gap がpill間に
   正しく効く。空スロットは何も描画されない）。fairwayスコア/気温のDOM差し替え先は
   この span（data-* 属性）。 */
.badge-slot {
  display: contents;
}

/* 気温pill（🌡 34℃）。評価pill（⛳広い）と同じ形状だが、色で別カテゴリと分かるようにする
   （暑さレベルで色分け＝「涼しさ」の視覚キーも兼ねる）。データ取得は
   js/data/weather-repository.js、マークアップは js/components/weather-tag.js。 */
.temp-tag {
  position: relative; /* 即時ホバーツールチップ（::after）の基準 */
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer; /* タップ/クリックで定義をトースト表示（decide.js） */
}

/* 気温pillの即時ツールチップ（nativeのtitle遅延を避けるためCSSで自作。ホバー可能な
   デバイスのみ・遅延ゼロ。モバイルはタップtoast＋凡例で担保）。pillの直下・左寄せで出し、
   写真上バッジ（overflow）でも横にはみ出して切れないようにする。 */
@media (hover: hover) {
  .temp-tag[data-tooltip]:hover::after,
  .card-metric[data-tooltip]:hover::after,
  .fairway-tag--inline[data-tooltip]:hover::after,
  .course-card__price[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    /* pill中央寄せ＋折り返し＋幅制限で、写真上バッジ（.course-card__media は overflow:hidden）
       の中に必ず収める（nowrapだとカード右端で見切れるため）。 */
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 150px;
    background: rgba(20, 24, 26, 0.96); /* --ink-900 ベースの半透明（ツールチップ） */
    color: var(--accent-contrast);
    padding: 5px 9px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
    box-shadow: var(--shadow-sm);
    z-index: 20;
    pointer-events: none;
  }
}

.temp-tag--cool {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8; /* 比較的すごしやすい（〜29℃） */
}

.temp-tag--warm {
  background: rgba(217, 119, 6, 0.14);
  color: #b45309; /* 真夏日（30〜34℃） */
}

.temp-tag--hot {
  background: rgba(220, 38, 38, 0.12);
  color: var(--danger); /* 猛暑日・危険（35℃〜） */
}

/* 右上の合計得票数（大きい緑数字。0票はグレー）。
   #20: マークアップ上は .vote-course__main の先頭に置き、float:right で右上に寄せる。
   こうすることでコース名・所在地・バッジは票数の高さを超えた行から全幅を取り戻し、
   375px幅で長いコース名が窮屈に2行折り返しするのを緩和する（従来は票数が独立した
   右カラムとして固定幅を占め、タイトル列が狭かった）。 */
.vote-course__votes {
  float: right;
  margin-left: var(--space-3);
  text-align: center;
  line-height: 1.15;
}

.vote-course__crown {
  color: var(--star); /* アンバー = 1位強調 */
}

.vote-course__votes-num {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--accent);
}

.vote-course__votes-num--zero {
  color: var(--ink-300);
}

.vote-course__votes-unit {
  font-size: var(--text-xs);
  color: var(--ink-500);
}

/* #20 モバイル: 票数を縦積みの大カラムから「👑 N票」の横並びコンパクトなピルに変え、
   コース名の1行目の右端に inline で載せる。float:right のため、票数ピルの高さ（約1行）を
   超えた行（所在地・バッジ・折り返した2行目のコース名）は全幅を取り戻す。 */
@media (max-width: 639px) {
  .vote-course__votes {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-left: var(--space-2);
    margin-bottom: 2px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--accent-light);
  }

  .vote-course__crown {
    align-self: center;
    display: inline-flex;
  }

  .vote-course__votes-num {
    font-size: var(--text-md);
  }
}

/* ---- プラン行 ----
   モバイルファースト: 1行目 = 時刻チップ + 価格/投票ボタン（横並び）、
   pill列・プラン名・投票者/リンク行はその下に縦積み。640px以上は時刻チップが
   2行分（pill列+プラン名）を受け、右端に価格/投票ボタンを縦積みする。 */
.vote-plan {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-areas:
    "time right"
    "pills pills"
    "name name"
    "foot foot";
  gap: 6px var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-color);
}

.vote-plan.is-voted {
  background: var(--accent-faint);
}

.vote-plan__time {
  grid-area: time;
  align-self: center;
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-2) 2px;
}

.vote-plan.is-voted .vote-plan__time {
  background: var(--accent-light-strong);
  color: var(--accent-dark);
}

/* 確定時刻でない（時台レンジ・早朝/薄暮/時間未定）チップは小さめ表示 */
.vote-plan__time--fuzzy {
  font-size: var(--text-xs);
  font-weight: 700;
}

.vote-plan__pills {
  grid-area: pills;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.vote-plan__right {
  grid-area: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.vote-plan__price {
  font-size: var(--text-md);
  font-weight: 800;
  white-space: nowrap;
}

.vote-plan__price small {
  font-size: var(--text-xs);
  color: var(--ink-500);
  font-weight: 500;
}

.vote-plan__name {
  grid-area: name;
  font-size: var(--text-xs);
  color: var(--ink-500);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 有効プランのプラン名はリンク（楽天GORAのそのプランへ）。既定はグレー、ホバーで緑＋
   外部リンクアイコンを表示。ellipsis は内側の -text に任せ、アイコンは常に見切れず出す。 */
a.vote-plan__name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  justify-self: start; /* グリッドセル幅に伸ばさず、ホバー領域を文字＋アイコンに限定 */
  overflow: visible;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-base);
}
.vote-plan__name-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vote-plan__name-icon {
  flex: none;
  display: inline-flex;
  color: var(--accent-dark);
}
/* ホバー可能デバイス: 既定はアイコン非表示、ホバーで緑＋アイコン表示。
   タッチ端末(hoverなし)はこのブロックが効かず、アイコン常時表示＝押せることが分かる。 */
@media (hover: hover) {
  .vote-plan__name-icon {
    opacity: 0;
    transition: opacity var(--transition-base);
  }
  a.vote-plan__name:hover {
    color: var(--accent-dark);
  }
  a.vote-plan__name:hover .vote-plan__name-icon {
    opacity: 1;
  }
}

.vote-plan__foot {
  grid-area: foot;
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  align-items: center;
}

.vote-plan__links {
  margin-left: auto;
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* 無効になった枠（planId がその日の販売プランに見つからない行）: 自動削除はせず、
   薄グレー背景＋文字色を薄めて「無効化された枠」と一目で分かる控えめな表示にする。
   料金/予約/投票は出さず、代替導線（別の時間を探す）とオーナーの整理導線のみ残す。 */
.vote-plan--gone {
  background: var(--surface-sunken);
}
.vote-plan--gone .vote-plan__time {
  color: var(--ink-400);
}
.vote-plan--gone .vote-plan__name {
  white-space: normal;
}
.vote-plan__gone-label {
  color: var(--ink-500);
  font-weight: 600;
}

.vote-plan__time-skeleton {
  height: 36px;
  border-radius: var(--radius-md);
}

/* オーナー専用フッター（破線区切り。参加者にはマークアップ自体が出力されない） */
.vote-course__foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px dashed var(--border-color);
}

.vote-course__remove {
  margin-left: auto;
}

/* 候補の取得失敗カード */
.vote-course--error {
  padding: var(--space-4);
}

.vote-course--error .vote-course__foot {
  border-top: none;
  padding: var(--space-2) 0 0;
}

.vote-course__error-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--ink-500);
}

@media (min-width: 640px) {
  .vote-plan {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "time pills right"
      "time name right"
      ". foot foot";
    gap: 4px var(--space-3);
  }

  /* サムネ幅を time 列（64px）に合わせ、コース名とプラン内容の左端を縦に揃える
     （ヘッダーとプラン行の横gapはどちらも var(--space-3) で共通）。 */
  .vote-course__thumb {
    width: 64px;
    height: 64px;
  }

  .vote-plan__time {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
  }

  .vote-plan__right {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
}