/* Grypes Engagement: polls + the Relate reaction (1.1.0).
   Mobile-first, matches Grypes card aesthetic. */

.gyre-poll {
  margin: 10px 0 4px;
  padding: 12px;
  border: 1px solid #e3e8f0;
  border-radius: 12px;
  background: #f8fafc;
}
.gyre-poll-q {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: #0f172a;
}
.gyre-poll-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gyre-opt-vote {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  text-align: left;
  font-size: 15px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
}
.gyre-opt-vote:hover { border-color: #2563eb; }
.gyre-opt-vote.is-disabled { opacity: 0.75; cursor: pointer; }
.gyre-opt-result {
  position: relative;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gyre-opt-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: #dbeafe;
  border-radius: 10px 0 0 10px;
}
.gyre-opt-result.is-mine .gyre-opt-bar { background: #bfdbfe; }
.gyre-opt-label {
  position: relative;
  flex: 1;
  font-size: 15px;
  color: #0f172a;
}
.gyre-opt-pct {
  position: relative;
  font-weight: 700;
  font-size: 14px;
  color: #1e40af;
}
.gyre-poll-meta {
  margin: 10px 0 0;
  font-size: 13px;
  color: #64748b;
}
.gyre-poll-toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
}
.gyre-poll-signin {
  margin: 4px 0 0;
  font-size: 13px;
  color: #64748b;
}

/* Relate-only reactions (1.1.0): Disagree is retired. Its controls live in
   Platform markup (card kebab menu, comment reaction buttons, logged-out
   comment counts), so they are hidden here and rejected server-side by
   the reaction guard. Historical disagree data is untouched. */
.gyp-kebab-menu [data-reaction="disagree"],
.gyp-creact[data-reaction="disagree"],
.gyp-creact-static[aria-label$="disagrees"] {
  display: none !important;
}

/* Visible "Relate" word next to the count, injected by gyre.js into the
   Platform's relate buttons (card + comments). */
.gyre-relate-word {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

/* Composer poll builder */
.gyre-poll-builder {
  margin: 10px 0;
  padding: 12px;
  border: 1px dashed #93c5fd;
  border-radius: 12px;
  background: #eff6ff;
}
.gyre-poll-builder label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1e3a8a;
  margin: 8px 0 4px;
}
.gyre-poll-builder input[type="text"] {
  width: 100%;
  min-height: 44px;
  font-size: 16px; /* 16px+ avoids iOS zoom */
  padding: 8px 10px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}
.gyre-poll-add-toggle {
  min-height: 44px;
  padding: 8px 14px;
  font-size: 14px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #fff;
  color: #1d4ed8;
  cursor: pointer;
}
.gyre-poll-add-toggle.is-on {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}
.gyre-poll-opt-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.gyre-poll-opt-row input { flex: 1; }
.gyre-poll-opt-remove {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
}
.gyre-poll-add-opt {
  min-height: 44px;
  font-size: 14px;
  background: none;
  border: none;
  color: #1d4ed8;
  cursor: pointer;
  padding: 8px 0;
}