.poll-admin-panel,
.article-poll {
  --poll-navy: #061d3b;
  --poll-red: #e20b07;
  --poll-soft: #eef2f5;
  --poll-line: #d5dee8;
}

.poll-admin-panel {
  scroll-margin-top: 1.5rem;
}

.poll-admin-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.poll-admin-heading h2,
.poll-save-first h2 {
  margin: .15rem 0 .45rem;
}

.poll-admin-heading p,
.poll-save-first p {
  margin: 0;
  color: #657187;
}

.poll-status {
  flex: 0 0 auto;
  padding: .55rem .8rem;
  border-radius: 999px;
  background: var(--poll-soft);
  color: var(--poll-navy);
  font-size: .8rem;
  font-weight: 900;
}

.poll-status-open { background: #daf3e4; color: #116334; }
.poll-status-closed,
.poll-status-inactive { background: #fce4e3; color: #9f1d18; }
.poll-status-pending { background: #fff2cc; color: #765a00; }

.poll-admin-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.poll-admin-form .wide { grid-column: 1 / -1; }
.poll-option-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.poll-admin-form label { display: grid; gap: .45rem; color: var(--poll-navy); font-weight: 800; }
.poll-admin-form input,
.poll-admin-form select { width: 100%; min-height: 46px; padding: .7rem .8rem; border: 1px solid #c8d4e1; background: #fff; color: var(--poll-navy); font: inherit; }
.poll-admin-form small { color: #657187; font-weight: 600; }
.poll-admin-form .poll-active { display: flex; align-items: center; align-self: end; min-height: 46px; }
.poll-admin-form .poll-active input { width: 20px; min-height: 20px; }

.poll-admin-results {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--poll-line);
}

.poll-admin-results h3 { margin: 0 0 1rem; }
.poll-admin-results > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; margin-top: .8rem; }
.poll-admin-results span { font-weight: 800; }
.poll-admin-results i { grid-column: 1 / -1; height: 9px; overflow: hidden; border-radius: 999px; background: var(--poll-soft); }
.poll-admin-results i b { display: block; height: 100%; border-radius: inherit; background: var(--poll-red); }
.poll-delete-form { margin-top: 1.25rem; }

.article-poll {
  margin: 2.25rem 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-top: 6px solid var(--poll-red);
  background: var(--poll-soft);
  color: var(--poll-navy);
}

.article-poll .eyebrow {
  margin: 0 0 .45rem;
  color: var(--poll-red);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.article-poll h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.12; }
.poll-state { margin: .65rem 0 1.15rem; color: #657187; font-weight: 700; }
.poll-notice,
.poll-waiting { margin: 1rem 0; padding: .85rem 1rem; border-left: 4px solid var(--poll-red); background: #fff; font-weight: 800; }

.poll-vote-form fieldset { display: grid; gap: .7rem; margin: 0; padding: 0; border: 0; }
.poll-vote-form label { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border: 2px solid #cbd6e2; background: #fff; cursor: pointer; font-weight: 800; }
.poll-vote-form label:has(input:checked) { border-color: var(--poll-red); box-shadow: 0 0 0 2px rgba(226,11,7,.1); }
.poll-vote-form input { width: 20px; height: 20px; accent-color: var(--poll-red); }
.poll-vote-form button { margin-top: 1rem; padding: .85rem 1.4rem; border: 0; background: var(--poll-red); color: #fff; font: inherit; font-weight: 900; cursor: pointer; }
.poll-vote-form > small { display: block; margin-top: .75rem; color: #657187; }

.poll-results { display: grid; gap: 1rem; }
.poll-result > div { display: flex; justify-content: space-between; gap: 1rem; font-weight: 800; }
.poll-result i { display: block; height: 12px; margin: .35rem 0; overflow: hidden; border-radius: 999px; background: #d4dde7; }
.poll-result i b { display: block; height: 100%; border-radius: inherit; background: var(--poll-navy); }
.poll-result.is-selected i b { background: var(--poll-red); }
.poll-result small { color: #657187; }
.poll-total { margin: .25rem 0 0; font-weight: 900; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 720px) {
  .poll-admin-heading { display: grid; }
  .poll-admin-form,
  .poll-option-fields { grid-template-columns: 1fr; }
  .poll-admin-form .wide { grid-column: auto; }
}