.report-flag { position: relative; margin: 12px 0 0; }

.rf-flag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--ds-text-13, 13px);
  color: var(--ds-color-text-muted, #6b7280);
}
.rf-flag:hover, .rf-flag:focus-visible { color: var(--ds-color-navy, #002244); text-decoration: underline; }
.rf-flag:focus-visible { outline: 2px solid var(--ds-color-shadow-focus, #4c8dff); outline-offset: 2px; }
.rf-flag-icon {
  width: 12px; height: 12px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1v14h1.5V9.5h8L10.5 6l2-3.5h-8V1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1v14h1.5V9.5h8L10.5 6l2-3.5h-8V1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rf-panel {
  position: absolute; z-index: 1100; left: 0; top: calc(100% + 6px);
  width: 360px; max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 18px 18px 14px;
  background: var(--ds-color-surface, #fff);
  color: var(--ds-color-text-body, #1f2937);
  border: 1px solid var(--ds-color-border-card, #e5e7eb);
  border-radius: var(--ds-radius-10, 10px);
  box-shadow: var(--ds-shadow-modal, 0 12px 32px rgba(0, 0, 0, .14));
  font-size: var(--ds-text-14, 14px);
}
.rf-panel:focus { outline: none; }
.rf-title { margin: 0 0 12px; font-size: var(--ds-text-16, 16px); color: var(--ds-color-text-heading, #111827); }

.rf-choices { margin: 0 0 12px; padding: 0; border: 0; }
.rf-choices legend { margin-bottom: 6px; font-weight: 600; }
.rf-choice {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 4px; cursor: pointer;
  border: 1px solid var(--ds-color-border-subtle, #eceff3);
  border-radius: var(--ds-radius-6, 6px);
}
.rf-choice:hover { background: var(--ds-color-surface-subtle, #f7f8fa); }
.rf-choice:has(input:checked) {
  border-color: var(--ds-color-navy, #002244);
  background: var(--ds-color-surface-accent-tint, #eef3fb);
}
.rf-choice input { margin: 0; accent-color: var(--ds-color-navy, #002244); }

.rf-label { display: block; margin: 8px 0 2px; font-weight: 600; }
.rf-hint { margin: 0 0 4px; font-size: var(--ds-text-12, 12px); color: var(--ds-color-text-muted, #6b7280); }
.rf-note, .rf-email {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit;
  color: inherit; background: var(--ds-color-surface, #fff);
  border: 1px solid var(--ds-color-border-control, #cfd5dd);
  border-radius: var(--ds-radius-6, 6px);
}
.rf-note { resize: vertical; min-height: 64px; }
.rf-note:focus, .rf-email:focus { outline: 2px solid var(--ds-color-shadow-focus, #4c8dff); outline-offset: 0; }

.rf-challenge {
  margin: 12px 0 0; padding: 10px;
  background: var(--ds-color-surface-note, #fff8e6);
  border: 1px solid var(--ds-color-border-accent-muted, #f1d9a6);
  border-radius: var(--ds-radius-6, 6px);
}
.rf-challenge[hidden] { display: none; }
.rf-challenge-text { margin: 0 0 8px; font-weight: 700; font-size: var(--ds-text-15, 15px); }

.rf-status { min-height: 1em; margin: 8px 0 0; color: var(--ds-color-danger, #b42318); }
.rf-sent { margin: 4px 0 12px; font-weight: 600; color: var(--ds-color-text-success, #067647); }
.rf-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.rf-send {
  padding: 8px 16px; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--ds-color-white, #fff); background: var(--ds-color-navy, #002244);
  border-radius: var(--ds-radius-6, 6px);
}
.rf-send:hover { background: var(--ds-color-navy-deep, #001a33); }
.rf-send:disabled { opacity: .6; cursor: default; }
.rf-cancel { padding: 0; border: 0; background: none; cursor: pointer; font: inherit;
             color: var(--ds-color-text-accent-link, #0b5cad); }
.rf-rights { margin: 12px 0 0; font-size: var(--ds-text-12, 12px); color: var(--ds-color-text-muted, #6b7280); }

@media (max-width: 600px) {
  .rf-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-width: none; max-height: 85vh; overflow-y: auto;
    border-radius: var(--ds-radius-12, 12px) var(--ds-radius-12, 12px) 0 0;
  }
}