/* 操作デモ専用。記事の共通スタイルや本番の回答フォームには影響させない。 */
.availability-demo {
  min-width: 0;
  margin: 24px 0;
  padding: 22px;
  border: 1px solid var(--pon-border);
  border-radius: 10px;
  background: var(--pon-bg);
}
.availability-demo[hidden] { display: none; }
.availability-demo h3 { margin: 0 0 10px; }
.availability-demo .availability-help { margin: 0 0 16px; font-size: 14px; }
.availability-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; }
.availability-presets button {
  max-width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--pon-secondary);
  border-radius: 8px;
  background: var(--pon-surface);
  color: var(--pon-secondary);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
}
.availability-presets button:hover { background: #E9EEEB; }
.availability-editor { display: grid; gap: 12px; }
.availability-person {
  min-width: 0;
  margin: 0;
  padding: 8px 14px 14px;
  border: 1px solid var(--pon-border);
  border-radius: 8px;
  background: var(--pon-surface);
}
.availability-person legend { padding-inline: 5px; font-size: 14px; font-weight: 700; }
.availability-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.availability-choice { min-width: 0; }
.availability-choice label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; }
.pon-site .availability-choice select { display: block; width: 100%; padding: 10px 6px; font-size: 14px; }
.availability-demo .availability-results-heading { margin: 24px 0 12px; }
.availability-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.availability-result { min-width: 0; padding: 14px; border: 1px solid var(--pon-border); border-radius: 8px; background: var(--pon-surface); }
.availability-result h4 { margin: 0 0 12px; font-size: 16px; line-height: 1.6; }
.availability-tally { margin: 0; }
.availability-tally > div { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0; font-size: 13px; line-height: 1.6; }
.availability-tally dt { min-width: 0; }
.availability-tally dd { flex: none; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.availability-tally-ok { color: var(--pon-ok); }
.availability-tally-maybe { color: #8A5718; }
.availability-tally-ng { color: var(--pon-ng); }
.availability-result p { font-size: 13px; line-height: 1.8; }
.availability-result .availability-answered-ok { padding-top: 12px; border-top: 1px solid var(--pon-border); }
.availability-result .availability-followup { margin-bottom: 0; }
.availability-demo .availability-status { margin: 16px 0 0; font-size: 14px; line-height: 1.8; }
.availability-status:empty { margin: 0; }
@media (max-width: 720px) {
  .availability-demo { padding: 16px 12px; }
  .availability-results { grid-template-columns: 1fr; }
  .availability-person { padding: 8px 10px 12px; }
  .availability-choices { grid-template-columns: 1fr; gap: 12px; }
  .availability-choice label { font-size: 14px; }
  .pon-site .availability-choice select { font-size: 16px; padding: 10px; }
  .availability-tally > div { font-size: 14px; }
}