/* ------------------------------------------------------------------ *
 * 読者投票（templates/partials/poll.php）
 *
 * 値はすべて var(--ds-*) 経由（生hex / 生px 禁止・DESIGN.md）。
 * バーは CSS だけで描く（チャートライブラリを入れない）。
 * ------------------------------------------------------------------ */

/* 記事本文の汎用スタイル（media.css の .article__body ul / li / p）が
 * パーツ内に効いてしまうので打ち消す。記事外に置いたときと見た目を揃えるため。
 * layout.php は media.css より後に poll.css を読み込む。 */
.poll :is(ul, ol) {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.poll :is(li, p) { margin: 0; }

.poll {
  margin: var(--ds-space-stack-lg) 0;
  padding: var(--ds-space-stack-md);
  background: var(--ds-color-bg-subtle);
  border-radius: var(--ds-radius-card);
}

.poll .poll__question {
  margin: 0 0 var(--ds-space-stack-sm);
  font-size: var(--ds-text-h3-size);
  line-height: var(--ds-text-h3-lh);
  font-weight: var(--ds-text-h3-weight);
  color: var(--ds-color-text);
}

/* 選択肢は縦積み。価格帯の刻みは「安い→高い」の並びに意味があるので、
 * 横並びにして折り返させない（投票後の集計バーとも並びが揃う）。 */
.poll .poll__choices {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-stack-xs);
}

.poll .poll__choice {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--ds-touch-target-min);
  padding: var(--ds-space-stack-xs) var(--ds-space-inline-md);
  font-size: var(--ds-text-body-size);
  font-weight: var(--ds-text-h3-weight);
  color: var(--ds-color-text);
  background: var(--ds-color-bg);
  border: var(--ds-border-width) solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-button);
  cursor: pointer;
}

.poll .poll__choice:hover { background: var(--ds-color-bg-subtle); }

.poll .poll__choice[disabled] {
  cursor: default;
  opacity: 0.6;
}

/* 「投票すると結果が見られる」ことを明示して投票を促す一文 */
.poll .poll__lead {
  margin: var(--ds-space-stack-sm) 0 0;
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-lh);
  font-weight: var(--ds-text-h3-weight);
  color: var(--ds-color-text-muted);
  text-align: center;
}

.poll .poll__thanks {
  margin: 0 0 var(--ds-space-stack-xs);
  font-size: var(--ds-text-body-sm-size);
  color: var(--ds-color-state-positive-text);
}

.poll .poll__error {
  margin: var(--ds-space-stack-xs) 0 0;
  font-size: var(--ds-text-body-sm-size);
  color: var(--ds-color-state-danger-text);
}

.poll .poll__empty {
  margin: 0;
  font-size: var(--ds-text-body-sm-size);
  color: var(--ds-color-text-muted);
}

.poll .poll__note {
  margin: var(--ds-space-stack-sm) 0 0;
  font-size: var(--ds-text-micro-size);
  line-height: var(--ds-text-micro-lh);
  color: var(--ds-color-text-subtle);
}

/* ---------------------------------------------------------- 集計 */

.poll .poll-bars {
  margin: 0;
  padding: 0;
  list-style: none;
}

.poll .poll-bars__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-inline-sm);
  padding: var(--ds-space-stack-xs) var(--ds-space-inline-sm);
  overflow: hidden;
  background: var(--ds-color-bg);
  border-radius: var(--ds-radius-chip);
}

.poll .poll-bars__item + .poll-bars__item { margin-top: var(--ds-space-stack-xs); }

.poll .poll-bars__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ds-color-badge-bg-sky);
}

.poll .poll-bars__name,
.poll .poll-bars__pct {
  position: relative;
  font-size: var(--ds-text-body-sm-size);
  color: var(--ds-color-text);
}

.poll .poll-bars__pct { font-weight: var(--ds-text-h3-weight); }

/* 最多の選択肢だけ選択肢名も太字にする（色を足さずに「どこに寄っているか」を出す） */
.poll .poll-bars__item.is-top .poll-bars__name { font-weight: var(--ds-text-h3-weight); }

.poll .poll-stats__total {
  margin: var(--ds-space-stack-xs) 0 0;
  font-size: var(--ds-text-micro-size);
  color: var(--ds-color-text-subtle);
}