/* ==========================================================================
   Connect 2026 - quick poll                                             T-38
   --------------------------------------------------------------------------
   Lives inside the rail's pale blue panel (.cn-panel--blue) on Home and
   Research - the panel p1 / p13 caption "Data pull outs and polls". The
   panel's ground, pad and heading colour are the board's; nothing inside it
   is drawn, so the rows use the design system: the body face, the panel's
   own blue family for the bars, cyan for the reader's answer.

   Two states on the section:
     (none)     open - answers are buttons, no numbers
     .is-voted  answers are bars, percentages shown, buttons disabled
   poll.js flips the first into the second and sets each bar's width from
   data-pct (no inline styles in the views).
   ========================================================================== */

.cn-poll {
  text-align: left;
  color: var(--cn-ink-body);
}

/* Cyan eyebrow - the rail heading's colour at the label size, so it reads
   as the panel's title without competing with the question. */
.cn-poll__eyebrow {
  margin: 0 0 var(--cn-space-2);
  font-size: var(--cn-text-label);
  font-weight: var(--cn-fw-semibold);
  letter-spacing: var(--cn-tracking-label);
  text-transform: uppercase;
  color: var(--cn-cyan);
}

.cn-poll__question {
  margin: 0 0 var(--cn-space-4);
  font-size: var(--cn-text-card);
  font-weight: var(--cn-fw-medium);
  line-height: var(--cn-lh-snug);
  color: var(--cn-ink);
}

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

/* ------------------------------------------------------------- a row ---- */
/*
   One button = one answer. It is position:relative so the bar can sit
   underneath the label as a full-height fill, growing from the left. The
   label and the percentage are above it (z-index), the bar below.
*/
.cn-poll__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--cn-space-2) var(--cn-space-4);
  border: 1px solid var(--cn-surface);
  border-radius: var(--cn-radius-md);
  background: var(--cn-surface);
  font: inherit;
  font-size: var(--cn-text-body);
  line-height: var(--cn-lh-snug);
  color: var(--cn-ink);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--cn-dur) var(--cn-ease),
              box-shadow var(--cn-dur) var(--cn-ease);
}
.cn-poll:not(.is-voted) .cn-poll__option:hover,
.cn-poll:not(.is-voted) .cn-poll__option:focus-visible {
  border-color: var(--cn-cyan);
  box-shadow: 0 0 0 2px rgba(28, 183, 252, 0.25);
  outline: none;
}
.cn-poll__option:disabled { cursor: default; }

.cn-poll__label {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The number - hidden until voted. */
.cn-poll__pct {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  font-weight: var(--cn-fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--cn-ink-muted);
  display: none;
}

/* The fill - width set by poll.js, 0 until voted. */
.cn-poll__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--cn-panel-blue);
  transition: width 500ms var(--cn-ease);
}

/* ------------------------------------------------------------- voted ---- */
.cn-poll.is-voted .cn-poll__pct { display: inline; }
.cn-poll.is-voted .cn-poll__option { color: var(--cn-ink-body); }

/* The reader's own answer: cyan bar, navy ink, a tick before the label. */
.cn-poll.is-voted .cn-poll__option.is-chosen {
  border-color: var(--cn-cyan);
  color: var(--cn-ink);
  font-weight: var(--cn-fw-semibold);
}
.cn-poll.is-voted .cn-poll__option.is-chosen .cn-poll__bar { background: var(--cn-cyan-alt); }
.cn-poll.is-voted .cn-poll__option.is-chosen .cn-poll__pct { color: var(--cn-ink); }
.cn-poll.is-voted .cn-poll__option.is-chosen .cn-poll__label::before {
  content: "\2713\00a0";   /* check mark, non-breaking space */
}

/* --------------------------------------------------------------- meta ---- */
.cn-poll__meta {
  margin: var(--cn-space-3) 0 0;
  font-size: var(--cn-text-label);
  color: var(--cn-ink-muted);
}

/* Signed out and pressed an answer: the line that says how to vote. */
.cn-poll__signin {
  margin-top: var(--cn-space-4);
  padding-top: var(--cn-space-4);
  border-top: 1px solid rgba(0, 28, 100, 0.15);
}
.cn-poll__signin[hidden] { display: none; }
.cn-poll__signin-copy {
  margin: 0 0 var(--cn-space-3);
  font-size: var(--cn-text-label);
  color: var(--cn-ink);
}
.cn-poll__signin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cn-space-2);
}
.cn-poll__signin-actions .cn-btn { flex: 1 1 auto; }

/* Feedback line: "Thanks - counted", or why not. Empty most of the time. */
.cn-poll__note {
  margin: var(--cn-space-2) 0 0;
  min-height: 0;
  font-size: var(--cn-text-label);
  color: var(--cn-ink);
}
.cn-poll__note:empty { display: none; }
.cn-poll__note.is-error { color: var(--cn-fam-orange); }

/* While a vote is in flight - no double presses. */
.cn-poll.is-busy .cn-poll__option { pointer-events: none; opacity: 0.7; }

/* --------------------------------------------------- inside the panels --- */
/* With a poll in it the panel is content, not a reserved gap: the caption
   heading goes (the poll has its own eyebrow), Research's panel loses its
   forced floor and centring, Home's keeps filling to the column foot. */
.cn-panel--polls.has-poll { min-height: 0; text-align: left; }

@media (max-width: 767px) {
  .cn-poll__option { min-height: 48px; }   /* comfortable thumb target */
}