/**
 * flagged-review.css
 *
 * Theming: every color is a CSS custom property with a Pentecost-matched
 * default. To reuse this component for the Theologian Agent (Pillar 3a),
 * either override these variables on a wrapping element, or leave the
 * defaults — they're generic enough (maroon/gold) to work for either
 * surface without change.
 */

/**
 * flagged-review.css
 *
 * Theming: every --fr-* variable now points at pentecost-app's real
 * design tokens (public/style.css's :root block — --ink, --ember,
 * --gold, --paper, --line, --ok/--warn/--danger, --text-ink/--text-mist,
 * --body, --zh, --radius) via var(--real-token, fallback), so this
 * component matches the live site instead of an approximated palette.
 * The fallback hex after each comma only applies if this file is used
 * somewhere those tokens don't exist (e.g. reused for the Theologian
 * Agent on different infrastructure) — on pentecost-app itself, the real
 * tokens always win.
 */

.fr-root {
  --fr-surface: var(--paper, #ffffff);
  --fr-surface-muted: var(--paper-2, #faf6ef);
  --fr-border: var(--line, #e6ddc8);
  --fr-text-primary: var(--text-ink, #2a1a1a);
  --fr-text-secondary: var(--text-mist, #6b5f52);
  --fr-text-muted: var(--mist, #9c9184);

  --fr-danger-bg: var(--paper-2, #fbeaea);
  --fr-danger-bg: color-mix(in srgb, var(--danger, #a33636) 12%, var(--paper, #fff));
  --fr-danger-text: var(--danger, #9c2b2b);
  --fr-warning-bg: var(--paper-2, #f8ecd2);
  --fr-warning-bg: color-mix(in srgb, var(--warn, #b08a3e) 16%, var(--paper, #fff));
  --fr-warning-text: var(--warn, #8a6412);
  --fr-success-bg: var(--paper-2, #e9f2e6);
  --fr-success-bg: color-mix(in srgb, var(--ok, #3f6b4a) 12%, var(--paper, #fff));
  --fr-success-text: var(--ok, #3c6b31);

  --fr-primary-bg: var(--ember, #5c1a1a);
  --fr-primary-bg-hover: var(--ink, #4a1414);
  --fr-primary-text: var(--paper, #ffffff);

  --fr-radius: var(--radius, 10px);
  --fr-radius-sm: 6px;

  font-family: inherit;
  color: var(--fr-text-primary);
}

.fr-panel {
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  border-radius: var(--fr-radius);
  overflow: hidden;
}

.fr-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--fr-border);
}

.fr-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 2px;
}

.fr-subtitle {
  font-size: 13px;
  color: var(--fr-text-secondary);
  margin: 0;
}

.fr-card {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--fr-border);
}

.fr-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.fr-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fr-text-secondary);
}

.fr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--fr-radius-sm);
  white-space: nowrap;
}

.fr-badge i {
  font-size: 12px;
}

.fr-badge-danger {
  background: var(--fr-danger-bg);
  color: var(--fr-danger-text);
}

.fr-badge-warning {
  background: var(--fr-warning-bg);
  color: var(--fr-warning-text);
}

.fr-badge-success {
  background: var(--fr-success-bg);
  color: var(--fr-success-text);
}

.fr-excerpt {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 10px;
  color: var(--fr-text-primary);
}

.fr-excerpt-muted {
  color: var(--fr-text-muted);
}

.fr-reasoning {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: var(--fr-surface-muted);
  border-radius: var(--fr-radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--fr-text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.fr-reasoning i {
  margin-top: 3px;
  flex-shrink: 0;
}

.fr-error {
  font-size: 12px;
  color: var(--fr-danger-text);
  margin: 0 0 10px;
}

.fr-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.fr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: var(--fr-radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.fr-btn i {
  font-size: 14px;
}

.fr-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.fr-btn-secondary {
  border-color: var(--fr-border);
  color: var(--fr-text-primary);
}

.fr-btn-secondary:hover:not(:disabled) {
  background: var(--fr-surface-muted);
}

.fr-btn-primary {
  background: var(--fr-primary-bg);
  color: var(--fr-primary-text);
}

.fr-btn-primary:hover:not(:disabled) {
  background: var(--fr-primary-bg-hover);
}

.fr-btn-ghost {
  color: var(--fr-text-secondary);
  border-color: var(--fr-border);
  font-size: 13px;
  padding: 6px 12px;
}

.fr-btn-ghost:hover {
  background: var(--fr-surface-muted);
}

.fr-footer {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--fr-surface-muted);
}

.fr-count {
  font-size: 13px;
  color: var(--fr-text-secondary);
}

.fr-btn-publish {
  white-space: nowrap;
}

/* --- v2 additions: inline editor for decision + notes --- */

.fr-editor {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fr-editor-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--fr-text-primary);
}

.fr-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fr-text-secondary);
  margin-top: 6px;
}

.fr-textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--fr-border);
  border-radius: var(--fr-radius-sm);
  background: var(--fr-surface);
  color: var(--fr-text-primary);
  resize: vertical;
  margin-bottom: 4px;
}

.fr-textarea:focus {
  outline: 2px solid var(--fr-primary-bg);
  outline-offset: 1px;
}