/* Report sheet (js/sheets/report*.js): reasons and comment with the MainButton, or for a new
   account the reporting rule with the block button. Every control is at least 44 px tall. */
.rp-lead {
  margin: 4px 0 10px;
  font-weight: 600;
}

.rp-reasons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.rp-reason {
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--separator);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rp-reason-on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  font-weight: 600;
}

.rp-field {
  margin-bottom: 12px;
  border-radius: 12px;
}

.rp-field .rp-reasons {
  margin-bottom: 0;
}

.rp-error {
  margin: 8px 0 0;
  color: var(--danger);
  font-size: 13px;
}

.rp-field-invalid .rp-reason {
  border-color: var(--danger);
}

.rp-note {
  margin: 6px 0 12px;
}

/* Rule for new accounts (report-gate.js) */
.rp-gate {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.rp-gate p {
  margin: 0;
}

.rp-gate-rule {
  font-weight: 600;
}

.rp-gate-block {
  color: var(--hint);
  font-size: 14px;
}

.rp-gate .btn {
  min-height: 44px;
}