/* See ./help-me-choose-questions.md for design notes and rationale. */

.help-me-choose-questions {
  display: none;
}

body[data-ue-mode] .help-me-choose-questions {
  display: block;
  margin-block: 16px;
  padding: 16px;
  border: 1px dashed var(--ll-color-border-muted, currentcolor);
  background: var(--ll-color-bg-muted, transparent);
  color: var(--ll-color-text-primary, currentcolor);
  font-size: 14px;
}

body[data-ue-mode] .help-me-choose-questions::before {
  content: 'Help me choose — Questions (data only)';
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ll-color-text-secondary, currentcolor);
}

body[data-ue-mode] .help-me-choose-questions > [data-field]::before {
  content: attr(data-field);
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ll-color-text-secondary, currentcolor);
}

body[data-ue-mode] .help-me-choose-questions > [data-field] {
  margin-block: 8px;
  padding: 8px;
  background: var(--ll-color-surface-default, transparent);
}