/* research.css — deep research sessions view (.rs-*) */

.rs-wrap { padding: var(--space-gutter); }
.rs-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.rs-header h2 { font-size: 22px; font-weight: 700; }
.rs-filters { display: flex; gap: var(--space-base); margin-bottom: var(--space-sm); }
.rs-search { flex: 1; background: var(--bg2); border: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent); border-radius: var(--radius-default); padding: 8px 12px; color: var(--text); font-size: 14px; }
.rs-status-filter { background: var(--bg2); border: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent); border-radius: var(--radius-default); padding: var(--space-base); color: var(--text); font-size: 14px; }
.rs-btn { background: var(--btn); color: var(--btn-text); border: none; border-radius: var(--radius-default); padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.rs-btn:active { opacity: 0.8; }
.rs-btn.rs-delete { background: var(--color-error); }
.rs-btn.rs-pause { background: var(--color-warning); color: var(--color-on-warning); }
.rs-btn.rs-resume { background: var(--color-success); }
.rs-btn.rs-complete { background: var(--color-primary); }
.rs-btn.rs-cancel { background: var(--bg2); color: var(--text); }
/* .rs-list → .base-stack-tight in pwa/styles/base.css. Markup composes both. */
.rs-card-host { cursor: pointer; }
.rs-card-host:active { opacity: 0.85; }
.rs-card-meta { display: flex; gap: var(--space-sm); font-size: 12px; color: var(--hint); margin-top: var(--space-tight); }
.rs-card-mode { font-size: 11px; color: var(--hint); margin-top: var(--space-xs); }
.rs-loading { text-align: center; color: var(--hint); padding: 40px 0; }
/* Bespoke create form fallback (used only when uxBottomSheet is missing). */
.rs-create-form { background: var(--bg2); border-radius: var(--radius-md); padding: var(--space-roomy); margin-bottom: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-base); }
.rs-input { background: var(--bg); border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent); border-radius: var(--radius-default); padding: 8px 12px; color: var(--text); font-size: 14px; width: 100%; box-sizing: border-box; }
.rs-textarea { background: var(--bg); border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent); border-radius: var(--radius-default); padding: 8px 12px; color: var(--text); font-size: 14px; resize: vertical; width: 100%; box-sizing: border-box; }
.rs-select { background: var(--bg); border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent); border-radius: var(--radius-default); padding: var(--space-base); color: var(--text); font-size: 13px; }
.rs-create-row { flex-wrap: wrap; }
.rs-detail-header { display: flex; align-items: flex-start; gap: var(--space-snug); margin-bottom: var(--space-sm); }
.rs-back { background: none; border: none; color: var(--link); font-size: 20px; cursor: pointer; padding: 4px 8px; }
.rs-detail-title-wrap { flex: 1; }
.rs-detail-title { font-size: 20px; font-weight: 700; word-break: break-word; }
.rs-detail-meta { display: flex; gap: var(--space-snug); align-items: center; font-size: 12px; color: var(--hint); margin-top: var(--space-xs); flex-wrap: wrap; }
/* Live progress pulse — preserved verbatim (WebSocket-driven animation). */
.rs-progress { min-height: 0; }
.rs-progress-bar { display: flex; align-items: center; gap: var(--space-base); padding: 8px 12px; background: color-mix(in srgb, var(--color-primary) 10%, transparent); border-radius: var(--radius-default); font-size: 13px; color: var(--link); margin-bottom: var(--space-base); }
.rs-progress-pulse { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--link); animation: rs-pulse 1s infinite; }
@keyframes rs-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.rs-tabs { display: flex; gap: var(--space-xs); margin-bottom: var(--space-sm); overflow-x: auto; }
.rs-tab { background: none; border: none; color: var(--hint); font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-default); cursor: pointer; white-space: nowrap; }
.rs-tab.active { background: var(--btn); color: var(--btn-text); }
.rs-round-group { margin-bottom: var(--space-gutter); }
/* Findings inside uxAccentCard get the secondary accent — text styles below. */
.rs-finding-text { font-size: 13px; color: var(--hint); line-height: 1.5; }
.rs-finding-url { font-size: 12px; color: var(--link); display: block; margin-top: var(--space-xs); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Claim card — preserved (rich composition without primitive equivalent). */
/* .rs-claims-list → .base-stack-tight in pwa/styles/base.css. Markup composes both. */
.rs-claim { background: var(--bg2); border-radius: var(--radius-snug); padding: var(--space-sm); border: 1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent); }
.rs-claim.conflicted { border-color: color-mix(in srgb, var(--color-error) 30%, transparent); }
.rs-claim-text { font-size: 14px; line-height: 1.5; margin-bottom: var(--space-base); }
.rs-claim-meta { display: flex; align-items: center; gap: var(--space-snug); margin-bottom: var(--space-base); }
.rs-claim-stance { font-size: 12px; font-weight: 600; }
.rs-conflict-flag { font-size: 10px; background: color-mix(in srgb, var(--color-error) 15%, transparent); color: var(--color-error); padding: 2px 6px; border-radius: var(--radius-sm); }
.rs-claim-actions { display: flex; gap: var(--space-tight); align-items: center; flex-wrap: wrap; }
.rs-claim-btn { background: var(--bg); border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent); color: var(--hint); border-radius: var(--radius-tight); padding: 4px 10px; font-size: 12px; cursor: pointer; }
.rs-claim-btn.active { background: var(--btn); color: var(--btn-text); border-color: var(--btn); }
.rs-claim-note { flex: 1; min-width: 120px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent); border-radius: var(--radius-tight); padding: 4px 8px; color: var(--text); font-size: 12px; }
.rs-claim-sources { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-tight); }
.rs-claim-src { font-size: 11px; background: color-mix(in srgb, var(--color-on-surface) 5%, transparent); padding: 2px 6px; border-radius: var(--radius-sm); color: var(--hint); }
.rs-sources-list { display: flex; flex-direction: column; gap: var(--space-tight); }
.rs-source { background: var(--bg2); border-radius: var(--radius-snug); padding: var(--space-sm); border: 1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent); }
/* .rs-source-top → .base-row in pwa/styles/base.css. Markup composes both. */
.rs-source-title { font-size: 14px; color: var(--link); text-decoration: none; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-source-scores { display: flex; gap: var(--space-sm); font-size: 12px; color: var(--hint); margin-top: var(--space-tight); }
.rs-controls { display: flex; flex-direction: column; gap: var(--space-roomy); }
.rs-control-group label { font-size: 13px; color: var(--hint); margin-bottom: var(--space-xs); display: block; }
.rs-steer-row { display: flex; gap: var(--space-base); }
.rs-steer-row .rs-input { flex: 1; }
.rs-steer-current { font-size: 13px; color: var(--link); background: color-mix(in srgb, var(--color-primary) 10%, transparent); padding: 8px 12px; border-radius: var(--radius-default); }
.rs-control-buttons { display: flex; gap: var(--space-base); flex-wrap: wrap; }

/* Confidence-bar primitive — replaces 4 inline `style="..."` declarations
   in confidenceBar(). Uses a CSS custom property for per-claim percentage. */
.rs-conf-bar {
  display: flex; align-items: center; gap: var(--space-tight);
}
.rs-conf-track {
  flex: 1; height: 4px;
  background: color-mix(in srgb, var(--color-on-surface) 10%, transparent);
  border-radius: var(--radius-sm); overflow: hidden;
}
.rs-conf-fill {
  width: var(--rs-conf-pct, 0%);
  height: 100%;
  border-radius: var(--radius-sm);
}
.rs-conf-fill.rs-conf-high { background: var(--color-success); }
.rs-conf-fill.rs-conf-mid  { background: var(--color-warning); }
.rs-conf-fill.rs-conf-low  { background: var(--color-error); }
.rs-conf-pct {
  font-size: 11px; color: var(--color-on-surface-variant, var(--hint));
}

/* Claim-stance tone classes — drop inline `style="color:..."` switch. */
.rs-claim-stance.rs-stance-supporting  { color: var(--color-success); }
.rs-claim-stance.rs-stance-conflicting { color: var(--color-error); }
.rs-claim-stance.rs-stance-neutral     { color: var(--color-warning); }

/* Tight-spacing utilities for the create-form layout. */
.rs-textarea.rs-textarea-tight { margin-top: var(--space-base); }
.rs-create-row.rs-create-row-tight { margin-top: var(--space-base); }