/* Community polls (2026-11-08). Uses the site variables, so it fits both the classic and the osu!-style look. */
.poll-list { display: grid; gap: 4px; }
.poll-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 16px; background: var(--panel); border-radius: var(--radius-sm); color: var(--text); text-decoration: none;
}
.poll-row:hover { background: var(--panel-2); color: var(--text); }
.poll-row-title { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.poll-state, .poll-state-inline {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--panel-3); color: var(--muted); white-space: nowrap;
}
.poll-open .poll-state, .poll-state-inline.poll-open { background: #b3ff66; color: #1d2b0e; }
.poll-upcoming .poll-state, .poll-state-inline.poll-upcoming { background: #66ccff; color: #04202e; }
.poll-owner-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.poll-body, #vote, #comments { margin-bottom: 12px; }
.poll-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; line-height: 1.7; }
.poll-form { display: grid; gap: 6px; margin-top: 10px; }
.poll-form > .btn { justify-self: start; margin-top: 8px; }
.poll-option {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; overflow: hidden;
  background: var(--panel-2); border-radius: var(--radius-sm); cursor: pointer;
}
div.poll-option { cursor: default; }
.poll-option.is-mine { box-shadow: inset 3px 0 0 var(--accent); }
.poll-option input { position: relative; z-index: 1; accent-color: var(--accent); }
.poll-option-label { position: relative; z-index: 1; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.poll-option-count { position: relative; z-index: 1; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.poll-bar { position: absolute; left: 0; top: 0; bottom: 0; width: var(--pct, 0%); background: var(--accent); opacity: .18; }
.poll-comment-form { display: grid; gap: 8px; margin: 10px 0 16px; }
.poll-comment-form .btn { justify-self: start; }
.poll-comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.poll-comment { padding: 10px 14px; background: var(--panel-2); border-radius: var(--radius-sm); }
.poll-comment-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.poll-comment-delete { margin: 0 0 0 auto; }
.poll-new-form { display: grid; gap: 14px; }
.poll-new-form label { display: grid; gap: 6px; }
.poll-new-form .poll-check { display: flex; align-items: center; gap: 8px; }
.poll-new-form > .btn { justify-self: start; }
.poll-new-times { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.home-polls { display: grid; gap: 4px; margin: 0 0 16px; }
.home-poll {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--panel); color: var(--text); text-decoration: none; box-shadow: inset 4px 0 0 var(--accent);
}
.home-poll:hover { background: var(--panel-2); color: var(--text); }
.home-poll-label { color: var(--accent); font-weight: 700; white-space: nowrap; }
.home-poll-title { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.home-poll-meta { white-space: nowrap; }
@media (max-width: 600px) {
  .poll-row { grid-template-columns: auto minmax(0, 1fr); }
  .poll-row-meta { grid-column: 1 / -1; }
  .poll-new-times { grid-template-columns: 1fr; }
  .home-poll { flex-wrap: wrap; gap: 4px 10px; }
  .home-poll-meta { width: 100%; }
}