/**
 * Text Report Styles
 * Styles for the formatted text report view
 */

/* ==========================================
   CONTAINER
   ========================================== */

.text-report-container {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-6);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  line-height: 1.7;
}

/* ==========================================
   HEADER
   ========================================== */

.text-report-header {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-6);
  gap: var(--space-2);
}

/* Top row: Brand + Domain + Time + Actions */
.text-report-header .header-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.text-report-header .header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.text-report-header .report-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-accent);
  white-space: nowrap;
}

.text-report-header .report-brand svg {
  width: 24px;
  height: 24px;
}

.text-report-header .report-domain {
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.text-report-header .report-time {
  font-size: var(--text-sm);
  color: var(--color-accent) !important;
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

/* Bottom row: Mode + Depth */
.text-report-header .header-row-bottom {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.text-report-header .report-type {
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Colorize Strict (orange) and Balanced (blue) badges */
.text-report-header .report-depth {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

.text-report-header .report-depth.strict {
  background: rgba(249, 115, 22, 0.15) !important;
  color: #f97316 !important;
}

.text-report-header .report-depth.balanced {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #3b82f6 !important;
}

.text-report-header .header-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.text-report-header .header-actions .btn-icon {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.text-report-header .header-actions .btn-icon:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  border-color: var(--color-accent);
}

.text-report-header .header-actions .btn-icon svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.text-report-header .report-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.text-report-header .report-actions .btn svg {
  width: 16px;
  height: 16px;
}

/* ==========================================
   REPORT CONTENT
   ========================================== */

.text-report-content {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.text-report-content p {
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
}

.text-report-content strong {
  color: var(--color-text-primary);
}

/* ==========================================
   VERDICT BANNER
   ========================================== */

.report-verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  background: rgba(254, 242, 242, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.report-verdict-critical {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03));
  border-left: 4px solid #ef4444;
}

.report-verdict-critical .verdict-icon svg {
  color: #ef4444;
}

.report-verdict-elevated {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(249, 115, 22, 0.03));
  border-left: 4px solid #f97316;
}

.report-verdict-elevated .verdict-icon svg {
  color: #f97316;
}

.report-verdict-caution {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.08), rgba(234, 179, 8, 0.03));
  border-left: 4px solid #eab308;
}

.report-verdict-caution .verdict-icon svg {
  color: #eab308;
}

.report-verdict-safe {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.03));
  border-left: 4px solid #22c55e;
}

.report-verdict-safe .verdict-icon svg {
  color: #22c55e;
}

/* Icon wrapper - contains icon and severity badge stacked vertically */
.verdict-icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  min-width: 70px;
}

.verdict-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.verdict-icon svg {
  width: 40px;
  height: 40px;
}

/* Severity badge centered under icon */
.verdict-level {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  text-align: center;
}

.report-verdict-critical .verdict-level {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.report-verdict-elevated .verdict-level {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
}

.report-verdict-caution .verdict-level {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.report-verdict-safe .verdict-level {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.verdict-content {
  flex: 1;
}

/* Title - large and bold */
.verdict-label {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin: 0 0 var(--space-3);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.verdict-summary {
  font-size: var(--text-sm);
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ==========================================
   VERDICT METERS - Confidence vs Evidence
   ========================================== */
.verdict-meters {
  display: flex;
  gap: var(--space-6);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
}

.verdict-meters .meter {
  flex: 1;
}

.verdict-meters .meter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.verdict-meters .meter-label {
  font-size: 11px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.verdict-meters .meter-value {
  font-size: 11px;
  font-weight: var(--font-semibold);
}

.verdict-meters .meter-value.high { color: #f87171; }
.verdict-meters .meter-value.medium { color: #fbbf24; }
.verdict-meters .meter-value.low { color: #a3e635; }

.verdict-meters .meter-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.verdict-meters .meter-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}

.verdict-meters .meter-fill.high {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.verdict-meters .meter-fill.medium {
  background: linear-gradient(90deg, #eab308, #fbbf24);
}

.verdict-meters .meter-fill.low {
  background: linear-gradient(90deg, #84cc16, #a3e635);
}

/* Mismatch indicator */
.mismatch-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--text-xs);
  color: #f87171;
}

.mismatch-indicator svg {
  flex-shrink: 0;
}

/* ==========================================
   SECTIONS
   ========================================== */

.report-section {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.report-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.section-header {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-accent);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

/* Category Headers (Constraint Awareness Gaps, Evidence Quality, etc.) */
.category-header {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: #60a5fa; /* Blue accent to differentiate from white text */
  margin: var(--space-6) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(96, 165, 250, 0.2);
}

/* Add spacing after verdict banner */
.report-verdict {
  margin-bottom: var(--space-8);
}

/* ==========================================
   SEVERITY TAGS
   ========================================== */

.severity-tag {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  margin-right: var(--space-2);
}

.severity-critical {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444; /* Red */
}

.severity-elevated {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316; /* Orange */
}

.severity-moderate {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308; /* Yellow */
}

.severity-minimal {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e; /* Green */
}

/* ==========================================
   IMPACT TAGS (for Evidence items)
   ========================================== */

.impact-tag {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
}

.impact-critical,
.impact-high {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444; /* Red */
}

.impact-elevated {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316; /* Orange */
}

.impact-medium,
.impact-moderate {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308; /* Yellow */
}

.impact-low,
.impact-minimal {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e; /* Green */
}

/* ==========================================
   RISK LEVEL BADGE
   ========================================== */

.risk-level-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin: var(--space-2) 0;
}

.risk-level-badge.risk-critical {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.risk-level-badge.risk-elevated {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
}

.risk-level-badge.risk-moderate {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.risk-level-badge.risk-minimal,
.risk-level-badge.risk-none-detected {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

/* ==========================================
   COUNT BADGES (8/8 unverified, etc.)
   ========================================== */

.count-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
}

/* ==========================================
   AI OVERREACH ITEMS
   ========================================== */

.overreach-item {
  margin: var(--space-2) 0;
}

/* Compact version for Executive Review (no description/quote) */
.overreach-item.compact {
  margin: 4px 0;
}

.overreach-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.overreach-title {
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  flex: 1;
}

.overreach-severity {
  flex-shrink: 0;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.overreach-severity.severity-critical {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.overreach-severity.severity-elevated {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
}

.overreach-severity.severity-moderate {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.overreach-severity.severity-minimal {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

/* Description under overreach header - same alignment as title */
.overreach-description {
  margin: var(--space-1) 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* Quote under description - same alignment */
.overreach-item .report-quote {
  margin-top: var(--space-1);
  margin-bottom: 0;
}

/* ==========================================
   LISTS
   ========================================== */

.report-list {
  margin: var(--space-2) 0;
  padding-left: var(--space-6);
  list-style: none;
}

.report-list li,
.report-list .report-item {
  position: relative;
  margin-bottom: 4px; /* Tight single-line spacing */
  padding-left: var(--space-3);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.report-list li::before,
.report-list .report-item::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: bold;
}

.numbered {
  list-style: none;
}

/* ==========================================
   FACTORS (Pros/Cons)
   ========================================== */

.factor-pro {
  color: #22c55e;
  font-weight: var(--font-bold);
}

.factor-con {
  color: #ef4444;
  font-weight: var(--font-bold);
}

/* ==========================================
   QUOTES
   ========================================== */

.report-quote {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-tertiary);
  border-left: 3px solid var(--color-text-muted);
  font-style: italic;
  color: var(--color-text-muted);
}

/* ==========================================
   INPUT DETAILS
   ========================================== */

.input-details-section {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}

.input-details-section summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  cursor: pointer;
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
}

.input-details-section summary:hover {
  color: var(--color-text-primary);
}

.input-details-section summary svg {
  width: 20px;
  height: 20px;
}

.input-details-section[open] summary {
  border-bottom: 1px solid var(--color-border);
}

.input-details-content {
  padding: var(--space-4);
}

.input-block {
  margin-bottom: var(--space-4);
}

.input-block:last-child {
  margin-bottom: 0;
}

.input-block h4 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.input-block p {
  margin: 0;
  color: var(--color-text-secondary);
}

.input-content-scroll {
  max-height: 300px;
  overflow-y: auto;
  background: var(--color-bg-tertiary);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
}

.input-content-scroll pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ==========================================
   FOOTER
   ========================================== */

.text-report-footer {
  text-align: center;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.text-report-footer .disclaimer {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.text-report-footer .brand {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
  .text-report-container {
    padding: var(--space-4);
  }

  .text-report-header .header-row-top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .text-report-header .header-left {
    width: 100%;
    flex-wrap: wrap;
  }

  .text-report-header .header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .verdict-icon svg {
    width: 36px;
    height: 36px;
  }

  .verdict-label {
    font-size: var(--text-xl);
  }

  .text-report-content {
    padding: var(--space-4);
  }
}

/* Ensure header stays clean on desktop */
@media (min-width: 769px) {
  .text-report-header .header-left {
    flex-wrap: nowrap;
  }
  
  .text-report-header .report-meta {
    flex-wrap: nowrap;
  }
}

/* ==========================================
   XML RENDERER - NEW STYLES
   ========================================== */

/* Executive Summary */
.exec-audience {
  margin-bottom: var(--space-2);
}

.exec-overview {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.exec-detail {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.exec-gaps {
  margin: var(--space-3) 0;
}

.gap-list {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
}

.gap-list li {
  margin-bottom: 4px;
  color: var(--color-text-secondary);
}

.exec-impact {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid #ef4444;
  border-radius: var(--radius-sm);
}

.exec-note {
  margin-top: var(--space-4);
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

/* AI Overreach - Updated */
.overreach-level {
  margin-bottom: var(--space-3);
}

.risk-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.risk-badge.risk-critical {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.risk-badge.risk-elevated {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
}

.risk-badge.risk-moderate {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.risk-badge.risk-none {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.overreach-summary {
  margin-bottom: var(--space-3);
  color: var(--color-text-secondary);
}

.overreach-indicators {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.overreach-item {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.overreach-item:last-child {
  border-bottom: none;
}

.overreach-item.compact {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
}

.overreach-desc {
  margin: var(--space-1) 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.overreach-quote {
  margin: var(--space-2) 0 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-left: 3px solid var(--color-accent);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.no-overreach {
  color: var(--color-text-tertiary);
  font-style: italic;
}

/* Core Analysis Cards */
.analysis-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
}

.card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

.card-stats .stat {
  color: var(--color-text-secondary);
}

.card-stats .stat.verified {
  color: #22c55e;
}

.card-stats .stat.unverified {
  color: #f97316;
}

.card-stats .stat.missing {
  color: #ef4444;
}

.severity-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.severity-badge.severity-critical {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.severity-badge.severity-elevated {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
}

.severity-badge.severity-moderate {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.severity-badge.severity-minimal {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.confidence-badge {
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.confidence-badge.confidence-low {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.confidence-badge.confidence-medium {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.confidence-badge.confidence-high {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

/* Gap Items */
.gap-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.gap-item {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.gap-item:last-child {
  border-bottom: none;
}

.gap-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.gap-item .gap-title {
  font-weight: var(--font-semibold);
  flex: 1;
}

.gap-severity {
  flex-shrink: 0;
}

.gap-title {
  font-weight: var(--font-semibold);
}

.gap-desc {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* Passed Checks Section (Constraint Gaps) */
/* Gaps Found Section - Red/Orange styling to contrast with green Passed */
.gaps-section {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: rgba(239, 68, 68, 0.04);
  border-left: 3px solid #f87171;
  border-radius: var(--radius-sm);
}

.gaps-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: #ef4444;
  margin-bottom: var(--space-2);
}

.gaps-heading svg {
  width: 16px;
  height: 16px;
}

/* Passed Section - Green styling */
.passed-section {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.passed-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: #22c55e;
  margin-bottom: var(--space-2);
}

.passed-heading svg {
  width: 16px;
  height: 16px;
}

.passed-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.passed-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  background: rgba(34, 197, 94, 0.08);
  border-radius: var(--radius-sm);
  border-left: 3px solid #22c55e;
}

.passed-icon {
  width: 14px;
  height: 14px;
  color: #22c55e;
  flex-shrink: 0;
  margin-top: 2px;
}

.passed-text {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

/* Unverified Section - Orange styling */
.unverified-section {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background: rgba(249, 115, 22, 0.04);
  border-left: 3px solid #f97316;
  border-radius: var(--radius-sm);
}

.unverified-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #ea580c !important;
}

.unverified-heading svg {
  width: 16px;
  height: 16px;
}

/* Missing Section - Yellow/Amber styling */
.missing-section {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background: rgba(234, 179, 8, 0.04);
  border-left: 3px solid #eab308;
  border-radius: var(--radius-sm);
}

.missing-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #ca8a04 !important;
}

.missing-heading svg {
  width: 16px;
  height: 16px;
}

/* Verified Section - Green styling (Evidence) */
.verified-section {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: rgba(34, 197, 94, 0.04);
  border-left: 3px solid #22c55e;
  border-radius: var(--radius-sm);
}

.verified-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #22c55e !important;
}

.verified-heading svg {
  width: 16px;
  height: 16px;
}

/* Evidence Section */
.evidence-section {
  margin-top: var(--space-3);
}

.evidence-section h5 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

/* Evidence Quality - Clean rebuild with eq- prefix */
.eq-section {
  margin-top: var(--space-3);
}

.eq-heading {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.eq-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.eq-row:last-child {
  border-bottom: none;
}

.eq-text {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.eq-badge {
  flex-shrink: 0;
  margin-left: var(--space-3);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.eq-badge-critical {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.eq-badge-elevated {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
}

.eq-badge-moderate {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.eq-badge-minimal {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

/* Verified Items Section (Evidence Quality) */
.verified-section {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.verified-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #22c55e !important;
}

.verified-heading svg {
  width: 16px;
  height: 16px;
}

.verified-row {
  background: rgba(34, 197, 94, 0.08);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3) !important;
  margin-bottom: var(--space-1);
  border-left: 3px solid #22c55e;
  justify-content: flex-start !important;
  gap: var(--space-2);
}

.verified-row:last-child {
  margin-bottom: 0;
}

.verified-icon {
  width: 14px;
  height: 14px;
  color: #22c55e;
  flex-shrink: 0;
}

/* Old boxed style - kept for compatibility */
.evidence-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-1);
}

/* New clean list style */
.evidence-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.evidence-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent !important;
}

.evidence-list-item:last-child {
  border-bottom: none;
}

.evidence-text {
  flex: 1;
  font-size: var(--text-sm);
}

.impact-badge,
.importance-badge {
  flex-shrink: 0;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.impact-badge.impact-critical,
.importance-badge.importance-critical {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.impact-badge.impact-high,
.importance-badge.importance-high {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
}

.impact-badge.impact-medium,
.importance-badge.importance-medium {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.impact-badge.impact-low {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

/* Domain Analysis */
.domain-risks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}

/* Domain Analysis - List layout (new) */
.domain-risks-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.domain-risk-item {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.domain-risk-item:last-child {
  border-bottom: none;
}

.risk-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.risk-item-title {
  font-weight: var(--font-semibold);
  flex: 1;
}

.risk-item-desc {
  margin: var(--space-1) 0 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.domain-risk-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.risk-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.risk-card-title {
  font-weight: var(--font-semibold);
}

.risk-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Cross-Domain */
.cross-domain-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cross-domain-item {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.cross-domain-item:last-child {
  border-bottom: none;
}

.cross-domain-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.cross-domain-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}

.cross-domain-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-accent);
  flex-shrink: 0;
}

.cross-domain-title {
  font-weight: var(--font-semibold);
}

.cross-domain-desc {
  margin: var(--space-1) 0 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Final Evaluation */
.eval-summary {
  margin-bottom: var(--space-4);
}

.critical-finding {
  background: rgba(239, 68, 68, 0.1);
  border-left: 4px solid #ef4444;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.critical-finding h4 {
  color: #ef4444;
  margin-bottom: var(--space-2);
}

.critical-finding .consequence {
  margin-top: var(--space-2);
  font-style: italic;
}

.critical-actions {
  margin-bottom: var(--space-4);
}

.critical-actions h4 {
  margin-bottom: var(--space-2);
}

.actions-list {
  padding-left: var(--space-5);
}

.actions-list li {
  margin-bottom: var(--space-2);
}

.bottom-line {
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
}

.bottom-line-text {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
}

/* ═══════════════════════════════════════════════════════════════
   QUESTIONS TO ASK
═══════════════════════════════════════════════════════════════ */

.questions-to-ask-section {
  margin-top: var(--space-5);
}

.questions-to-ask-section .section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
}

.questions-to-ask-section .section-header svg {
  width: 18px;
  height: 18px;
  color: #2563eb;
}

.questions-intro {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

.questions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.question-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(37, 99, 235, 0.04);
  border-left: 3px solid #2563eb;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: 1.5;
}

.question-item svg {
  width: 16px;
  height: 16px;
  color: #2563eb;
  flex-shrink: 0;
  margin-top: 2px;
}
}

.question-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.question-item span {
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════════
   OPTIONS
═══════════════════════════════════════════════════════════════ */

/* Options - Grid (legacy) */
.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* Options Section */
.options-section .section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
}

.options-section .section-header svg {
  width: 18px;
  height: 18px;
  color: #2563eb;
}

/* Options - List (new) */
.options-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.option-item {
  padding: var(--space-3);
  background: rgba(37, 99, 235, 0.04);
  border-left: 3px solid #2563eb;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--space-2);
}

.option-item:last-child {
  margin-bottom: 0;
}

.option-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.option-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.option-number {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: #fff;
  border-radius: 50%;
  font-weight: var(--font-bold);
  font-size: var(--text-xs);
  flex-shrink: 0;
}

.option-title {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}

.option-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  margin-left: calc(22px + var(--space-3));
}

.option-factors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-xs);
  margin-left: calc(22px + var(--space-3));
}

.option-pros,
.option-cons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.pros-label {
  color: #22c55e;
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
}

.cons-label {
  color: #ef4444;
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
}

.factor-item {
  color: var(--color-text-secondary);
}

.factor-item::after {
  content: ",";
  margin-right: 4px;
}

.factor-item:last-child::after {
  content: "";
}

.option-pros ul,
.option-cons ul {
  margin: var(--space-1) 0 0 var(--space-4);
  padding: 0;
}

.option-pros li,
.option-cons li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}

/* Raw Fallback */
.raw-fallback {
  padding: var(--space-4);
}

.fallback-notice {
  color: #f97316;
  margin-bottom: var(--space-3);
}

.raw-text {
  background: var(--color-bg-secondary);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: pre-wrap;
  overflow-x: auto;
}

/* Footer */
.text-report-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.text-report-footer .disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-2);
}

.text-report-footer .branding {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Original Input/Scenario Section */
.original-input-section {
  margin-bottom: var(--space-5);
}

.original-input-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.original-input-card .input-meta {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

.original-input-card .input-meta:last-child {
  margin-bottom: 0;
  margin-top: var(--space-3);
}

.original-input-card .meta-label {
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
}

.original-input-card .meta-value {
  color: var(--color-text-primary);
}

.original-input-card .input-content {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  max-height: 300px;
  overflow-y: auto;
}

.original-input-card .input-content pre {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   DOCUMENT MODE - Source Reference
═══════════════════════════════════════════════════════════════ */

.original-input-section.document-mode .source-reference {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.original-input-section.document-mode .source-file {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.original-input-section.document-mode .source-file svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.original-input-section.document-mode .filename {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  font-weight: var(--font-medium);
}

/* ═══════════════════════════════════════════════════════════════
   AI OUTPUT MODE - Question + Response Exchange
═══════════════════════════════════════════════════════════════ */

.original-input-section.ai-output-mode .ai-exchange {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.original-input-section.ai-output-mode .exchange-block {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.original-input-section.ai-output-mode .exchange-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.original-input-section.ai-output-mode .exchange-label svg {
  width: 14px;
  height: 14px;
}

.original-input-section.ai-output-mode .question-block .exchange-label {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.original-input-section.ai-output-mode .response-block .exchange-label {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.original-input-section.ai-output-mode .exchange-content {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: var(--space-3);
  max-height: 400px;
  overflow-y: auto;
}

.original-input-section.ai-output-mode .question-block .exchange-content {
  border-color: rgba(59, 130, 246, 0.3);
  border-top: none;
}

.original-input-section.ai-output-mode .response-block .exchange-content {
  border-color: rgba(139, 92, 246, 0.3);
  border-top: none;
}

.original-input-section.ai-output-mode .exchange-content pre {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   SCENARIO MODE - Default content display
═══════════════════════════════════════════════════════════════ */

.original-input-section.scenario-mode .input-content {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  max-height: 300px;
  overflow-y: auto;
}

.original-input-section.scenario-mode .input-content pre {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.5;
}
