/**
 * Q&A Detail. Loaded only on single jdev_question.
 */

.qa-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-8);
  align-items: start;
  margin-top: var(--space-4);
}
.qa-detail__main { min-width: 0; }

.qa-detail__rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: calc(64px + var(--space-4));
  min-width: 0;
}

/* ---- Question ---- */
/* Flat on the page, not a card. The reference has the question sitting
   directly on the background with the engagement row as its only
   divider — boxing it competes visually with the answer cards below,
   which are the things that genuinely are separate objects. */
/* One DOM order, two layouts, via grid areas — so the mobile order in
   the reference (badge, title, byline, body, tags, actions, engagement)
   and the desktop one (actions lifted beside the byline) share the same
   markup. Duplicating the action row for the two cases would mean two
   sets of forms and nonces to keep in step. */
.qa-detail__question {
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "status  status"
    "title   title"
    "byline  actions"
    "context context"
    "body    body"
    "showmore showmore"
    "tags    tags"
    "engage  engage";
  align-items: start;
  column-gap: var(--space-4);
}

.qa-detail__question > .qa-status      { grid-area: status; justify-self: start; }
.qa-detail__title                      { grid-area: title; }
.qa-area-byline                        { grid-area: byline; }
.qa-area-actions                       { grid-area: actions; justify-self: end; }
.qa-detail__question > .tech-context   { grid-area: context; }
.qa-detail__body                       { grid-area: body; }
.qa-detail__showmore                   { grid-area: showmore; justify-self: start; }
.qa-detail__tags                       { grid-area: tags; }
.qa-detail__engagement                 { grid-area: engage; }

.qa-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.qa-status--answered   { background: #DCFCE7; color: #15803D; }
.qa-status--open       { background: #DBEAFE; color: #1D4ED8; }
.qa-status--unanswered { background: var(--color-surface); color: var(--color-text-muted); }

.qa-detail__title {
  font-size: var(--fs-2xl);
  margin: var(--space-3) 0 var(--space-4);
  overflow-wrap: anywhere;
}

.qa-detail__byline { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.qa-detail__byline img { border-radius: 999px; flex-shrink: 0; }
.qa-detail__byline-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.qa-detail__author { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.qa-detail__author a { color: inherit; }
.qa-detail__role { font-weight: normal; color: var(--color-text-muted); font-size: var(--fs-xs); display: block; }
.qa-detail__meta { font-size: var(--fs-xs); color: var(--color-text-muted); }

.qa-detail__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; flex-wrap: wrap; }
.qa-detail__actions form { margin: 0; }

.qa-detail__body { margin-top: var(--space-5); }
.qa-detail__body.is-clamped {
  max-height: 14em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
  mask-image: linear-gradient(180deg, #000 72%, transparent);
}
/* Code blocks scroll inside themselves, never widening the page (§6). */
.qa-detail__body pre { overflow-x: auto; max-width: 100%; }
.qa-detail__body img { max-width: 100%; height: auto; }

.qa-detail__tags { margin-top: var(--space-4); }

.qa-detail__engagement {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}

.qa-helpful {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.qa-helpful:hover:not(:disabled) { border-color: var(--color-secondary); color: var(--color-secondary-text); }
.qa-helpful.is-active { border-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-white)); }
.qa-helpful:disabled { opacity: .6; cursor: not-allowed; }

.qa-engagement-stat { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-muted); }
.qa-engagement-stat--muted { margin-left: auto; }

/* ---- Tabs ---- */
.qa-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin: var(--space-8) 0 var(--space-6);
  /* NOT overflow-x here. Scrolling belongs to the tab group below, so
     the sort control stays anchored at the right instead of being
     pushed out of view along with the tabs. */
  min-width: 0;
}

.qa-tabs__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.qa-tabs__list::-webkit-scrollbar { display: none; }
.qa-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.qa-tab.is-active { color: var(--color-secondary-text); border-bottom-color: var(--color-secondary); font-weight: var(--fw-semibold); }
.qa-tab__short { display: none; }

.qa-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
}
.qa-sort label { white-space: nowrap; }
.qa-sort label { font-size: var(--fs-sm); color: var(--color-text-muted); }
.qa-sort select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  min-height: 40px;
  background: var(--color-white);
  /* A <select> sizes to its widest option by default, so a longer
     translation of "Most Helpful" would otherwise widen the whole row. */
  max-width: 180px;
  min-width: 0;
}

/* Every panel visible without JS; qa-detail.js opts in to tab filtering. */
.qa-panel + .qa-panel { margin-top: var(--space-10); }
.qa-detail.is-tabbed .qa-panel { display: none; }
.qa-detail.is-tabbed .qa-panel.is-active { display: block; }
.qa-detail.is-tabbed .qa-panel + .qa-panel { margin-top: 0; }

.qa-panel__title { font-size: var(--fs-lg); margin: 0 0 var(--space-4); }

/* ---- Activity / followers ---- */
.qa-activity, .qa-follower-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.qa-activity__row { display: flex; align-items: flex-start; gap: var(--space-3); }
.qa-activity__icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}
.qa-activity__row > span:last-child { display: flex; flex-direction: column; }

.qa-follower { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); }
.qa-follower img { border-radius: 999px; }

.qa-answer-form { margin-top: var(--space-8); }
.qa-answer-form textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--fs-sm);
  resize: vertical;
  margin-bottom: var(--space-3);
}
.qa-signin-prompt { margin-top: var(--space-6); font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ---- Ask CTA ---- */
.qa-ask-cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-10);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.qa-ask-cta__icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-primary);
}
.qa-ask-cta > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qa-ask-cta span { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ---- Right rail ---- */
.qa-rail-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.qa-rail-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.qa-rail-card__title { font-size: var(--fs-base); margin: 0; }
.qa-rail-card__action { font-size: var(--fs-xs); color: var(--color-secondary-text); display: inline-flex; align-items: center; gap: var(--space-1); }

.qa-context { margin: 0; }
.qa-context__row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; font-size: var(--fs-sm); }
.qa-context dt { color: var(--color-text-muted); margin: 0; flex-shrink: 0; }
.qa-context dd { margin: 0; font-weight: var(--fw-medium); text-align: right; overflow-wrap: anywhere; }

.qa-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }

.qa-rail-resource { display: flex; align-items: flex-start; gap: var(--space-3); }
.qa-rail-resource__icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
}
.qa-rail-resource__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qa-rail-resource__body a { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-ink); }
.qa-rail-resource__body a:hover { color: var(--color-secondary-text); }
.qa-rail-resource__meta { font-size: var(--fs-xs); color: var(--color-text-muted); }
.qa-rail-resource__dl {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; min-width: 44px; min-height: 44px;
  flex-shrink: 0; color: var(--color-text-muted);
}
.qa-rail-resource__dl:hover { color: var(--color-primary); }

.qa-rail-question { display: flex; flex-direction: column; gap: 2px; }
.qa-rail-question a { font-size: var(--fs-sm); color: var(--color-secondary-text); }
.qa-rail-question__meta { font-size: var(--fs-xs); color: var(--color-text-muted); }

.qa-rail-person { display: flex; align-items: center; gap: var(--space-3); }
.qa-rail-person img { border-radius: 999px; flex-shrink: 0; }
.qa-rail-person__body { display: flex; flex-direction: column; min-width: 0; }
.qa-rail-person__body a { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-ink); }
.qa-rail-person__meta { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---- Sticky mobile CTA ---- */
.qa-sticky { display: none; }

/* ---- Tabs + sort below desktop -------------------------------------
   The reference's tab row holds tabs and nothing else. Keeping the sort
   in that row is what produced the overlap and the scroll strip: the
   two together simply do not fit once the full "Solutions & Responses"
   label is in play. Below 1024 the tabs take the row on their own and
   the sort drops beneath them — still available, never colliding. */
@media (max-width: 1023px) {
  .qa-tabs { gap: 0; flex-wrap: wrap; }

  .qa-tabs__list {
    flex: 1 1 100%;
    overflow-x: visible;
    gap: 0;
  }

  .qa-tab {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: var(--space-3) var(--space-2);
    font-size: var(--fs-sm);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Short labels from here down, not just on phones — the full wording
     is what overflows at tablet width too. */
  .qa-tab__full { display: none; }
  .qa-tab__short { display: inline; }

  .qa-sort {
    flex: 1 1 100%;
    justify-content: flex-end;
    margin: 0;
    padding: var(--space-3) 0 var(--space-2);
  }
  .qa-sort select { max-width: 200px; }
}

@media (max-width: 1023px) {
  /* Flex column, not a one-column grid — a grid keeps track-sizing that
     can reintroduce a second column (see the Resources detail page for
     the same reasoning). */
  .qa-detail__layout { display: flex; flex-direction: column; gap: var(--space-6); }
  .qa-detail__layout > * { min-width: 0; width: 100%; }
  .qa-detail__rail { position: static; order: 2; }
  .qa-detail__main { order: 1; }
}

@media (max-width: 767px) {
  .qa-detail__question {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "status"
      "title"
      "byline"
      "context"
      "body"
      "showmore"
      "tags"
      "actions"
      "engage";
    column-gap: 0;
  }
  .qa-area-actions { justify-self: stretch; }

  .qa-tab { padding: var(--space-3) var(--space-1); font-size: var(--fs-xs); }
  .qa-sort { justify-content: space-between; }
  .qa-sort select { flex: 1; min-width: 0; max-width: none; }

  .qa-detail__question { padding: var(--space-4); }
  .qa-detail__title { font-size: var(--fs-xl); overflow-wrap: anywhere; }

  /* Byline stacks so a long role line cannot squeeze the avatar or push
     the action row off the edge. */
  .qa-detail__byline { gap: var(--space-3); }
  .qa-detail__byline-text { flex: 1 1 100%; min-width: 0; }
  .qa-detail__meta { overflow-wrap: anywhere; }

  /* Actions wrap onto their own full-width row and share it evenly.
     flex:1 with a zero basis stops the longest label ("Following")
     from stealing width from the others. */
  .qa-detail__actions {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .qa-detail__actions > form,
  .qa-detail__actions > .btn { flex: 1 1 0; min-width: 0; }
  .qa-detail__actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    padding-inline: var(--space-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* The overflow menu and bookmark are icon-sized, not stretched. */
  .qa-detail__actions .post-actions,
  .qa-detail__actions .bookmark-form { flex: 0 0 44px; }

  /* Helpful + response count share a line; last activity drops below so
     it never collides with them. */
  .qa-detail__engagement { gap: var(--space-3); }
  .qa-engagement-stat--muted { margin-left: 0; flex: 1 1 100%; }

  .qa-context__row { flex-direction: column; gap: 2px; }
  .qa-context dd { text-align: left; }
  .qa-ask-cta { flex-direction: column; align-items: flex-start; }
  .qa-ask-cta .btn { width: 100%; justify-content: center; }

  /* Answer cards: the vote column narrows so the response text keeps a
     readable measure instead of being crushed into a ribbon. */
  .qa-answer { padding: var(--space-4); gap: var(--space-3); }
  .qa-answer .vote-widget { flex: 0 0 32px; }
  .qa-answer__body { min-width: 0; }
  .qa-answer__body pre { overflow-x: auto; max-width: 100%; }
  .qa-answer__body img { max-width: 100%; height: auto; }
  .qa-answer__meta { flex-wrap: wrap; gap: var(--space-2); }

  /* Rail cards match the question card's tighter padding. */
  .qa-rail-card { padding: var(--space-4); }

  .qa-sticky {
    display: flex;
    position: fixed;
    left: 0; right: 0;
    /* Clears the bottom nav rather than covering it (§6). */
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: calc(var(--z-header) - 1);
    padding: var(--space-3) var(--space-4);
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
  }
  .qa-sticky__cta { flex: 1; justify-content: center; min-height: 48px; }

  /* Room to scroll clear of the sticky bar. */
  .qa-detail { padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .qa-detail__body { transition: none; }
}


/* ---- Nothing on this page may exceed the viewport ------------------- */
.qa-detail,
.qa-detail__main,
.qa-detail__question,
.qa-panel,
.qa-answer,
.qa-rail-card { min-width: 0; max-width: 100%; }

.qa-detail__title,
.qa-panel__title,
.qa-rail-card__title,
.qa-rail-question a,
.qa-rail-resource__body a,
.qa-rail-person__body a { overflow-wrap: anywhere; }

/* Tags wrap rather than pushing the page wide (spec §6). */
.qa-detail__tags { flex-wrap: wrap; }

@media (max-width: 360px) {
  .qa-detail__actions .btn { font-size: var(--fs-xs); padding-inline: var(--space-1); }
  .qa-tab { font-size: 10px; }
  .qa-answer .vote-widget { flex: 0 0 28px; }
}


/* ---- Desktop refinements to match the reference --------------------- */

/* Rail width and gap tuned so the main column keeps a comfortable
   measure at the 1440 reference width and does not stretch at 1920. */
@media (min-width: 1600px) {
  .qa-detail__layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-10); }
  .qa-detail__main { max-width: 900px; }
}

/* Engagement row: Helpful is a bordered control, the response count is
   plain text beside it, last activity sits right. */
.qa-detail__engagement { border-top: 1px solid var(--color-border-soft); }
.qa-detail__engagement > form { margin: 0; }

/* Add tag: only rendered for someone who can actually edit, so it is a
   real route into the editor rather than a decorative affordance. */
.qa-add-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  border-radius: 999px;
  padding: 2px var(--space-3);
  min-height: 28px;
}
.qa-add-tag:hover { border-color: var(--color-secondary); color: var(--color-secondary-text); }

/* ---- Solution Summary ------------------------------------------------ */
.qa-summary {
  margin: var(--space-4) 0 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.qa-summary__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  list-style: none;
}
.qa-summary__head::-webkit-details-marker { display: none; }
.qa-summary__head svg:first-child { color: var(--color-primary); flex-shrink: 0; }

.qa-summary__chevron {
  margin-left: auto;
  transform: rotate(90deg);
  transition: transform .15s ease;
  color: var(--color-text-muted);
}
.qa-summary[open] .qa-summary__chevron { transform: rotate(-90deg); }

.qa-summary__body {
  margin: 0;
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  overflow-wrap: anywhere;
}

/* Accepted answer reads positive but not certified (spec §9.1): a tint
   and a left rule, not a badge-heavy treatment. */
.qa-answer--accepted {
  border-left: 3px solid var(--color-positive);
  background: color-mix(in srgb, var(--color-positive) 4%, var(--color-white));
}

@media (prefers-reduced-motion: reduce) {
  .qa-summary__chevron { transition: none; }
}

/* ---- Answer card: head / footer ------------------------------------- */

.qa-answer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.qa-answer__head .qa-author { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.qa-answer__head .qa-author img { border-radius: 999px; flex-shrink: 0; }
.qa-author__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qa-author__line { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.qa-author__name { font-weight: var(--fw-semibold); color: var(--color-ink); }
.qa-author__name:hover { color: var(--color-secondary-text); }

.qa-author__badge {
  padding: 1px var(--space-2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

/* Credentials read as one dotted line without needing separator markup. */
.qa-author__signals { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-xs); color: var(--color-text-muted); }
.qa-author__signals > span + span::before { content: '·'; margin-right: var(--space-2); }

.qa-answer__head-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; font-size: var(--fs-xs); color: var(--color-text-muted); }

.qa-answer__footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
}
.qa-answer__footer form { margin: 0; }

.qa-answer__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.qa-answer__action:hover:not(:disabled) { color: var(--color-secondary-text); }
.qa-answer__action.is-active { color: var(--color-primary); font-weight: var(--fw-semibold); }
.qa-answer__action:disabled { opacity: .6; cursor: not-allowed; }
.qa-answer__accept { margin-left: auto; }

@media (max-width: 767px) {
  .qa-answer__head { flex-direction: column; gap: var(--space-2); }
  .qa-answer__head-right { align-self: flex-start; }
  .qa-answer__footer { gap: var(--space-2); }
  .qa-answer__action { font-size: var(--fs-xs); padding: 0 var(--space-1); }
  .qa-answer__accept { margin-left: 0; flex: 1 1 100%; }
}

/* ---- Poll ------------------------------------------------------------ */
.poll {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.poll__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--fs-base);
}
.poll__heading svg { color: var(--color-primary); flex-shrink: 0; }
.poll__total { margin-left: auto; font-size: var(--fs-xs); font-weight: normal; color: var(--color-text-muted); }

.poll__options { border: 0; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }

.poll__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.poll__option:hover { border-color: var(--color-secondary); }
.poll__option input { flex-shrink: 0; }

.poll__results { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.poll__result-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-sm); margin-bottom: var(--space-1); }
.poll__result-text { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; overflow-wrap: anywhere; }
.poll__result-text svg { color: var(--color-positive); flex-shrink: 0; }
.poll__result-pct { font-weight: var(--fw-semibold); flex-shrink: 0; }
.poll__result.is-mine .poll__result-text { font-weight: var(--fw-semibold); }

.poll__bar { display: block; height: 8px; border-radius: 999px; background: var(--color-border-soft); overflow: hidden; }
.poll__bar-fill { display: block; height: 100%; background: var(--color-primary); }
.poll__result.is-mine .poll__bar-fill { background: var(--color-positive); }

.poll__note { margin: 0 0 var(--space-3); font-size: var(--fs-xs); color: var(--color-text-muted); }

@media (max-width: 767px) {
  .poll { padding: var(--space-4); }
  .poll__heading { flex-wrap: wrap; }
  .poll__total { margin-left: 0; flex: 1 1 100%; }
}