/* dashboard-saved-polls.css
   The "Saved polls" card — build up to eight reusable polls here and fire
   them from the annotation toolbar in class. Own file so the feature can
   change without touching dashboard.css. Colour variables come from
   dashboard.css. */

.spoll-name { font-weight: 600; color: var(--ink, #F4F6FA); }
.spoll-del.poll-del-arm {
  background: var(--red-soft, rgba(232, 67, 31, .13)) !important;
  border-color: var(--red, #E8431F) !important;
  color: var(--red-2, #FF6A45) !important;
}

/* Editor ----------------------------------------------------------------- */
.spoll-editor {
  border: 1px solid var(--line, #1F2733); border-radius: 12px;
  background: var(--bg-2, #0B0F16); padding: 14px 16px; margin-top: 14px;
}
.spoll-ed-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.spoll-ed-head h3 { font-size: 15px; font-weight: 700; }
.spoll-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.spoll-field label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint, #909AAB);
}
.spoll-qs { display: flex; flex-direction: column; gap: 12px; }
.spoll-q {
  border: 1px solid var(--line, #1F2733); border-radius: 11px;
  background: var(--card, #131926); padding: 12px;
  display: flex; flex-direction: column; gap: 9px;
}
.spoll-q-head { display: flex; align-items: center; justify-content: space-between; }
.spoll-q-num {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--red-2, #FF6A45);
}
.spoll-q-rm {
  flex: 0 0 auto; width: 28px; height: 28px; border: none; border-radius: 8px;
  background: transparent; color: var(--faint, #909AAB); font-size: 17px;
  line-height: 1; cursor: pointer; padding: 0;
}
.spoll-q-rm:hover { background: rgba(255, 255, 255, .06); color: var(--ink, #F4F6FA); }

.spoll-seg {
  display: flex; border: 1px solid var(--line-2, #2B3543);
  border-radius: 9px; overflow: hidden;
}
.spoll-segbtn {
  flex: 1 1 0; border: none; background: transparent; color: var(--muted, #A7B0BE);
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  padding: 7px 4px; cursor: pointer;
}
.spoll-segbtn:hover { background: rgba(255, 255, 255, .04); color: var(--ink, #F4F6FA); }
.spoll-segbtn.active { background: var(--grad, #DE3A18); color: #fff; }

.spoll-opts { display: flex; flex-direction: column; gap: 6px; }
.spoll-opt { display: flex; align-items: center; gap: 7px; }
.spoll-opt-letter {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .06);
  font-size: 11.5px; font-weight: 800; color: var(--muted, #A7B0BE);
}
.spoll-tf-lab { flex: 1 1 auto; font-size: 14px; font-weight: 600; }

/* Marking the right answer. Green, never the site's accent — "correct" must
   not read as "branded". */
.spoll-correct {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--line-2, #2B3543); border-radius: 8px;
  background: transparent; color: var(--faint, #909AAB);
  font-size: 13px; font-weight: 900; line-height: 1; cursor: pointer;
}
.spoll-correct:hover { border-color: var(--green, #3ECF8E); color: var(--green, #3ECF8E); }
.spoll-correct.on { background: var(--green, #3ECF8E); border-color: var(--green, #3ECF8E); color: #07090E; }

.spoll-add {
  display: block; width: 100%; margin-top: 10px;
  border: 1px dashed var(--line-2, #2B3543); border-radius: 9px;
  background: transparent; color: var(--muted, #A7B0BE);
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  padding: 9px; cursor: pointer;
}
.spoll-add:hover { border-color: var(--red-2, #FF6A45); color: var(--red-2, #FF6A45); }
.spoll-add-opt { margin-top: 4px; padding: 7px; }