/* The question round: one considered question, with room for an honest answer. */
.question-round {
  --round-plum: #49354f;
  --round-paper: #fffdfa;
  --round-ink: #28232b;
  --round-muted: #706775;
  --round-line: #ded7e1;
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding: 60px 0 64px;
  border-top: 1px solid var(--round-line);
  scroll-margin-top: 24px;
  color: var(--round-ink);
}
.question-round *, .question-round *::before, .question-round *::after { box-sizing: border-box; }
.question-round .round-heading {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  padding: 0;
  margin: 0 auto 24px;
  border: 0;
  background: transparent;
}
.question-round .round-kicker {
  display: block;
  margin: 0 0 14px;
  color: var(--round-muted);
  font: 400 10px/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.question-round .round-title {
  margin: 0;
  color: var(--round-ink);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.question-round .round-intro {
  margin: 12px 0 0;
  color: var(--round-muted);
  font-size: 14px;
  line-height: 1.65;
}
.question-round .round-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  width: 100%;
  margin: 0 auto 20px;
}
.question-round .round-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  color: var(--round-muted);
  font-size: 12px;
}
.question-round #round-topic {
  display: block;
  width: auto;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 34px 10px 15px;
  margin: 0;
  border: 1px solid var(--round-line);
  border-radius: 999px;
  background-color: transparent;
  color: var(--round-plum);
  font: 400 13px/1.4 Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.question-round .round-resume {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 0;
  border: 0;
  background: transparent;
  color: var(--round-plum);
  font: 400 12px/1.4 Arial, Helvetica, sans-serif;
  text-underline-offset: 5px;
  cursor: pointer;
}
.question-round .round-resume:hover { text-decoration: underline; }
.question-round .round-stage {
  position: relative;
  isolation: isolate;
  width: calc(100% + 16px);
  padding: 8px 8px 15px;
  margin: -8px -8px 0;
  overflow: hidden;
  overflow: clip;
  touch-action: pan-y;
}
.question-round .round-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 24px 21px 7px;
  border: 1px solid #ded7e1b3;
  border-radius: 25px;
  background: #ede8ee;
  pointer-events: none;
}
.question-round .round-stage:has(.round-empty)::before,
.question-round .round-stage:has(.round-finish)::before { display: none; }
.question-round .round-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: max(490px, var(--round-card-height, 0px));
  padding: 27px clamp(24px, 4.3vw, 52px) 22px;
  margin: 0;
  border: 1px solid #d8ceddb8;
  border-radius: 24px;
  background: var(--round-paper);
  box-shadow: 0 4px 8px #49354f04, 0 1px 2px #49354f04;
  color: var(--round-ink);
  transform-origin: 50% 85%;
  touch-action: pan-y;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}
.question-round .round-card-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  margin: 0 0 17px;
}
.question-round .round-card-top > .category,
.question-round .round-card-top > span {
  padding: 0;
  background: transparent;
  color: var(--round-muted);
  font: 400 11px/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: .035em;
}
.question-round .question-menu {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  margin: -6px -12px -6px 0;
  z-index: 5;
}
.question-round .question-menu summary { color: #85748c; }
.question-round .question-menu-panel {
  right: 0;
  top: calc(100% + 2px);
  background: var(--round-paper);
}
.question-round .round-question {
  max-width: 29ch;
  min-height: 2.36em;
  margin: 0 auto 17px 0;
  color: var(--round-ink);
  font-size: clamp(29px, 3.4vw, 40px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.04em;
  text-wrap: pretty;
}
.question-round .round-context {
  max-width: 63ch;
  min-height: 3.3em;
  margin: 0 0 28px;
  color: var(--round-muted);
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0;
}
.question-round .round-background {
  max-width: 63ch;
  margin: 0;
  border: 0;
  background: transparent;
}
.question-round .round-background > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 7px 0;
  color: var(--round-plum);
  font: 400 14px/1.5 Arial, Helvetica, sans-serif;
  list-style: none;
  cursor: pointer;
  text-underline-offset: 4px;
}
.question-round .round-background > summary::-webkit-details-marker { display: none; }
.question-round .round-background > summary::marker { content: ''; }
.question-round .round-background > summary:hover { text-decoration: underline; }
.question-round .round-background > summary svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.question-round .round-background[open] > summary svg { transform: rotate(180deg); }
.question-round .round-background .round-background-close,
.question-round .round-background[open] .round-background-open { display: none; }
.question-round .round-background[open] .round-background-close { display: inline; }
.question-round .round-background > .round-context { padding-top: 6px; }
.question-round .round-result-help { margin: 0; max-width: 63ch; }
.question-round .round-result-help > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 7px 0;
  color: var(--round-plum);
  font: 400 14px/1.5 Arial, Helvetica, sans-serif;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.question-round .round-result-help > summary::-webkit-details-marker { display: none; }
.question-round .round-result-help > summary::marker { content: ''; }
.question-round .round-result-help > p { margin: 0 0 12px; color: var(--round-muted); font-size: 14px; line-height: 1.7; }
.question-round .round-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: auto 0 0;
}
.question-round .round-choices button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 57px;
  padding: 16px 23px;
  border: 1px solid #baaebf;
  border-radius: 999px;
  background: transparent;
  color: var(--round-plum);
  font: 400 17px/1.35 Arial, Helvetica, sans-serif;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.question-round .round-choices button span { font-size: 16px; line-height: 1; }
.question-round .round-choices button span:empty { display: none; }
.question-round .round-choices button.chosen,
.question-round .round-choices button[aria-pressed="true"] {
  border-color: var(--round-plum);
  background: var(--round-plum);
  color: #f7f5f2;
  box-shadow: 0 3px 10px #49354f0c;
}
.question-round .round-choices button:active { background: #e9e2ec; }
.question-round .round-choices button.chosen:active { background: #3b2b40; }
.question-round .round-choices button:disabled,
.question-round .round-choices button[aria-disabled="true"] { cursor: default; }
.question-round .round-feedback {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 112px;
  padding-top: 15px;
}
.question-round .round-confirmation {
  min-height: 20px;
  margin: 0 0 10px;
  color: var(--round-plum);
  font-size: 12px;
  line-height: 1.6;
}
.question-round .round-confirmation[data-error="true"],
.question-round .round-confirmation.vote-error { color: #8a403b; }
.question-round .round-result { width: 100%; }
.question-round .round-result-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 8px;
  color: var(--round-muted);
  font-size: 12px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.question-round .round-result-labels > span { display: inline-flex; align-items: baseline; gap: 8px; }
.question-round .round-result-labels strong { color: var(--round-plum); font-weight: 400; }
.question-round .round-result-track {
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: #e5dfe7;
  overflow: hidden;
}
.question-round .round-result-track > span {
  position: absolute;
  top: 0;
  display: block;
  height: 100%;
  background: #b5a6bd;
}
.question-round .round-result-yes { left: 0; }
.question-round .round-result-no { right: 0; }
.question-round [data-result-leader="yes"] .round-result-yes,
.question-round [data-result-leader="no"] .round-result-no,
.question-round [data-result-leader="tie"] .round-result-track > span { background: #49354f; }
.question-round .round-result-visual.result-line { width: 100%; height: auto; min-height: 0; padding: 0; margin: 0; }
.question-round .round-result-visual .result-line-numbers > div { flex-direction: row; align-items: baseline; gap: 7px; }
.question-round .round-result-visual .result-line-numbers strong { font-size: 18px; line-height: 1.3; letter-spacing: -.02em; margin-top: 0; }
.question-round .round-result-visual .result-line-label { font-size: 12px; letter-spacing: 0; }
.question-round .round-result-visual .result-line-choice,
.question-round .round-result-visual .result-line-caption { display: none; }
.question-round .round-result-visual .result-line-track { height: 5px; margin-top: 8px; }
.question-round .round-result-note {
  margin: 9px 0 0;
  color: var(--round-muted);
  font-size: 11px;
  line-height: 1.6;
}
.question-round .round-secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  min-height: 44px;
  margin: 4px 0 0;
  border-top: 1px solid #49354f0d;
}
.question-round .round-secondary button,
.question-round .round-secondary a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--round-muted);
  font: 400 12px/1.5 Arial, Helvetica, sans-serif;
  text-decoration: none;
  text-underline-offset: 4px;
  cursor: pointer;
}
.question-round .round-secondary button:disabled { opacity: .55; cursor: default; }
.question-round .round-secondary svg,
.question-round .round-resume svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.question-round .round-footer {
  display: block;
  width: 100%;
  padding: 0;
  margin: 17px auto 0;
  border: 0;
}
.question-round .round-progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 13px;
}
.question-round #round-progress-text {
  margin: 0;
  color: var(--round-plum);
  font-size: 12px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.question-round .round-swipe-hint { color: var(--round-muted); font-size: 11px; line-height: 1.5; }
.question-round .round-progress {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: #ded7e1;
}
.question-round .round-progress-fill {
  position: relative;
  display: block;
  width: var(--round-progress, 0%);
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #654a6e;
  box-shadow: 0 0 7px #795a8740;
  transition: width .42s cubic-bezier(.22, 1, .36, 1);
}
.question-round .round-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 17px;
}
.question-round .round-navigation button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid #cbbfcf;
  border-radius: 999px;
  background: transparent;
  color: var(--round-plum);
  font: 400 13px/1.4 Arial, Helvetica, sans-serif;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.question-round .round-navigation .round-prev { min-width: 46px; padding-inline: 13px; }
.question-round .round-navigation .round-next { min-width: 138px; }
.question-round .round-navigation button:disabled { color: #a99bae; border-color: #ded7e1; opacity: .6; cursor: default; }
.question-round .round-navigation svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.question-round .round-footnote {
  margin: 15px 0 0;
  color: var(--round-muted);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}
.question-round .round-finish,
.question-round .round-empty {
  padding: 45px clamp(24px, 4.3vw, 52px) 36px;
  border: 1px solid #d8ceddb8;
  border-radius: 24px;
  background: var(--round-paper);
  text-align: left;
}
.question-round .round-finish-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 24px;
  border: 1px solid #d8cedd;
  border-radius: 50%;
  color: var(--round-plum);
  background: #f0ebf2;
}
.question-round .round-finish-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.question-round .round-finish-title,
.question-round .round-empty h3 {
  margin: 0 0 13px;
  color: var(--round-ink);
  font-size: clamp(27px, 3vw, 37px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.question-round .round-finish-copy,
.question-round .round-empty p { margin: 0; color: var(--round-muted); font-size: 14px; line-height: 1.65; }
.question-round .round-summary { list-style: none; padding: 0; margin: 28px 0; }
.question-round .round-summary li { display: flex; flex-direction: column; gap: 7px; padding: 15px 0; border-top: 1px solid #e6dfe9; color: var(--round-ink); font-size: 14px; line-height: 1.5; }
.question-round .round-summary li:last-child { border-bottom: 1px solid #e6dfe9; }
.question-round .round-summary li > span { overflow-wrap: anywhere; }
.question-round .round-summary small { color: var(--round-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.question-round .round-finish-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 28px; }
.question-round .round-finish-actions button,
.question-round .round-finish-actions a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  margin: 0;
  padding: 12px 23px;
  border: 1px solid #baaebf;
  border-radius: 999px;
  background: transparent;
  color: var(--round-plum);
  font: 400 13px/1.5 Arial, Helvetica, sans-serif;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.question-round .round-finish-actions .primary,
.question-round .round-finish-actions [data-round-more] { border-color: var(--round-plum); background: var(--round-plum); color: #f7f5f2; }
.question-round .round-empty > .text-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin-top: 20px;
}
.question-round .round-finish-actions svg,
.question-round .round-empty > .text-button svg {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.question-round .round-stage.is-dragging .round-card { transition: none; user-select: none; cursor: grabbing; }
.question-round .round-stage.is-returning .round-card,
.question-round .round-card.is-returning { transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; }
.question-round .round-stage.is-moving .round-card { pointer-events: none; }
.question-round :is(button, a, select, summary):focus-visible { outline: 2px solid #765c80; outline-offset: 4px; }
/* Navigation focuses the heading for screen readers; controls retain visible focus. */
.question-round .round-question[tabindex="-1"]:focus,
.question-round .round-finish-title[tabindex="-1"]:focus,
.question-round .round-empty h3[tabindex="-1"]:focus { outline: none; }
.question-round .round-card:focus-visible { outline: 2px solid #765c80; outline-offset: -5px; }
.featured-round-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 44px;
  margin-top: 10px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: #49354f;
  font: 400 13px/1.5 Arial, Helvetica, sans-serif;
  text-decoration: none;
  text-underline-offset: 5px;
  cursor: pointer;
}
.featured-round-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.featured-round-link:focus-visible { outline: 2px solid #765c80; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .question-round .round-choices button:not(:disabled):not([aria-disabled="true"]):not(.chosen):hover { background: #f0ebf2; border-color: #85748c; }
  .question-round .round-choices button.chosen:not(:disabled):hover { background: #3d2c43; }
  .question-round .round-navigation button:not(:disabled):hover { background: #e9e2ec; border-color: #a899af; }
  .question-round .round-secondary button:not(:disabled):hover,
  .question-round .round-secondary a:hover,
  .featured-round-link:hover { color: #49354f; text-decoration: underline; }
  .question-round .round-finish-actions .primary:hover { background: #3d2c43; }
}
@media (max-width: 700px) {
  .question-round { padding: 36px 0 42px; scroll-margin-top: 16px; }
  .question-round .round-heading { margin-bottom: 20px; }
  .question-round .round-kicker { font-size: 9px; margin-bottom: 11px; }
  .question-round .round-title { font-size: 29px; letter-spacing: -.04em; }
  .question-round .round-intro { font-size: 13px; margin-top: 10px; }
  .question-round .round-toolbar { margin-bottom: 17px; gap: 8px; }
  .question-round .round-toolbar label { gap: 9px; font-size: 11px; max-width: 100%; }
  .question-round #round-topic { font-size: 13px; max-width: 235px; }
  .question-round .round-stage { width: calc(100% + 16px); margin-left: -8px; margin-right: -8px; }
  .question-round .round-card { min-height: max(465px, var(--round-card-height, 0px)); padding: 17px 22px 13px; border-radius: 20px; }
  .question-round .round-stage::before { border-radius: 20px; inset-inline: 19px; }
  .question-round .round-card-top { margin-bottom: 15px; }
  .question-round .round-card-top > .category,
  .question-round .round-card-top > span { font-size: 10px; }
  .question-round .round-question { font-size: clamp(23px, 6.7vw, 29px); min-height: 2.42em; line-height: 1.21; letter-spacing: -.035em; margin-bottom: 15px; max-width: none; }
  .question-round .round-context { font-size: 13px; line-height: 1.65; margin-bottom: 23px; }
  .question-round .round-choices { gap: 10px; }
  .question-round .round-choices button { min-height: 53px; padding: 14px 19px; font-size: 16px; }
  .question-round .round-feedback { min-height: 112px; padding-top: 13px; }
  .question-round .round-confirmation { font-size: 11px; }
  .question-round .round-result-note { font-size: 10px; }
  .question-round .round-secondary { margin-top: 2px; }
  .question-round .round-secondary button,
  .question-round .round-secondary a { font-size: 11px; }
  .question-round .round-footer { margin-top: 13px; padding: 0 2px; }
  .question-round .round-progress-meta { margin-bottom: 12px; }
  .question-round #round-progress-text { font-size: 11px; }
  .question-round .round-swipe-hint { font-size: 10px; }
  .question-round .round-navigation { margin-top: 15px; }
  .question-round .round-navigation button { font-size: 12px; }
  .question-round .round-footnote { font-size: 10px; margin-top: 13px; }
  .question-round .round-finish,
  .question-round .round-empty { padding: 29px 23px 27px; border-radius: 20px; }
  .question-round .round-finish-title,
  .question-round .round-empty h3 { font-size: 28px; }
  .question-round .round-finish-copy,
  .question-round .round-empty p { font-size: 13px; }
  .question-round .round-summary { margin: 23px 0; }
  .question-round .round-summary li { font-size: 13px; padding: 13px 0; }
  .question-round .round-summary small { font-size: 11px; }
  .question-round .round-finish-actions { gap: 10px; margin-top: 22px; }
  .question-round .round-finish-actions button,
  .question-round .round-finish-actions a { font-size: 12px; padding-inline: 19px; }
  .featured-round-link { font-size: 12px; }
}
@media (max-width: 370px) {
  .question-round .round-card { padding-inline: 18px; }
  .question-round .round-question { font-size: 23px; }
  .question-round .round-toolbar label { flex-wrap: wrap; gap: 5px; }
  .question-round .round-swipe-hint { flex-basis: 100%; }
  .question-round .round-finish-actions { align-items: stretch; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .question-round *, .question-round *::before, .question-round *::after { animation: none !important; transition: none !important; }
  .question-round .round-stage.is-dragging .round-card { transform: none !important; }
}



/* Keep journey progress inside the card without moving its controls. */
.question-round .round-card > .round-progress,
.question-round .round-finish > .round-progress {
  position: absolute;
  inset-inline: 24px;
  bottom: 10px;
  width: auto;
  height: 2px;
  pointer-events: none;
}
.question-round .round-finish { position: relative; }