/* The diagram scales as one canvas; its routes must stay attached to the nodes. */
.oripa-choice {
  max-width: var(--ds-container-article);
  margin: var(--ds-space-stack-md) auto;
  padding: var(--ds-space-stack-md) 0 var(--ds-space-stack-sm);
  background: var(--ds-color-bg);
  color: var(--ds-color-text);
  border-radius: 0;
}
.oripa-choice__head { text-align: center; padding: 0 var(--ds-space-inline-sm); }
.oripa-choice .oripa-choice__head h2 {
  margin: var(--ds-space-stack-xs) 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-color-text);
  font-size: var(--ds-text-h2-size);
  line-height: var(--ds-text-h2-lh);
  box-shadow: none;
}
.oripa-choice .oripa-choice__head h2::before,
.oripa-choice .oripa-choice__head h2::after { content: none; }
.oripa-choice__head p {
  margin: 0 0 var(--ds-space-stack-sm);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-lh);
}
.oripa-choice__chart { display: block; width: 100%; height: auto; }
.oripa-choice__chart text {
  text-anchor: middle;
  fill: var(--ds-color-text);
  font-weight: var(--ds-text-h3-weight);
  font-size: var(--ds-choice-type);
}
.oripa-choice__node rect {
  fill: var(--ds-color-bg);
  stroke: var(--ds-color-text);
  stroke-width: 4;
}
.oripa-choice__route { fill: none; stroke-width: 8; stroke-linejoin: round; }
.oripa-choice__route--yes { stroke: var(--ds-color-poll-a); marker-end: url(#choice-arrow-yes); }
.oripa-choice__route--no { stroke: var(--ds-color-poll-b); marker-end: url(#choice-arrow-no); }
#choice-arrow-yes path { fill: var(--ds-color-poll-a); }
#choice-arrow-no path { fill: var(--ds-color-poll-b); }
.oripa-choice__labels text { font-size: var(--ds-choice-label); paint-order: stroke; stroke: var(--ds-color-bg); stroke-width: 8; stroke-linejoin: round; }
.oripa-choice__start rect { fill: var(--ds-choice-pink); }
.oripa-choice__start text { font-size: var(--ds-choice-label); }
/* Result row below the chart: square logo + a raised "公式" button (same recipe as .article-btn). */
.oripa-choice__results-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--ds-space-stack-sm);
  max-width: var(--ds-container-article);
  margin: var(--ds-space-inline-xs) auto 0;
  padding: 0 var(--ds-space-inline-sm);
  list-style: none;
}
.oripa-choice__results-grid--4 { grid-template-columns: repeat(4, 1fr); }
.oripa-choice__results-grid li { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-stack-xs); }
.oripa-choice__logo { display: block; width: 70%; margin: 0 auto; }
.oripa-choice__logo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: var(--ds-radius-lg); }
.oripa-choice__official {
  --btn-depth: var(--ds-color-cta-blue-depth);
  display: block;
  width: 100%;
  text-align: center;
  min-height: var(--ds-touch-target-min);
  padding: var(--ds-space-inline-xs) var(--ds-space-stack-sm);
  background-color: var(--ds-color-cta-blue-bg);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%);
  color: var(--ds-color-text-inverse);
  font-weight: var(--ds-text-h3-weight);
  text-decoration: none;
  border-radius: var(--ds-radius-button);
  box-shadow: 0 4px 0 var(--btn-depth), var(--ds-shadow-popover);
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.oripa-choice__official:hover { background-color: var(--ds-color-cta-blue-bg-hover); color: var(--ds-color-text-inverse); text-decoration: none; opacity: 1; transform: translateY(1px); box-shadow: 0 3px 0 var(--btn-depth), var(--ds-shadow-card); }
.oripa-choice__official:active { transform: translateY(4px); box-shadow: 0 0 0 var(--btn-depth); }
@media (max-width: 480px) {
  .oripa-choice__results-grid { gap: var(--ds-space-inline-xs); padding: 0 var(--ds-space-inline-xs); }
  .oripa-choice__official { padding: var(--ds-space-inline-xs) var(--ds-space-inline-xs); font-size: var(--ds-text-caption-size); min-height: auto; }
}