/* ============================================================================
   research.css — Marketlens Research modules (content engine)
   ----------------------------------------------------------------------------
   Builds ON bi.css (bi-card, bi-badge, bi-stat-card, bi-empty-state,
   bi-bulk-bar, bi-detail-section, bi-btn, filter/facet) + Huddle tokens.
   Adds research-* (analysis), kw-* (Keywords Planner), cp-* (Content Planner),
   tb-* (Topics Bank). Single global CSS, vanilla-JS friendly.
   ========================================================================== */

/* intro line under the header */
.research-intro { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 0 18px; line-height: var(--leading-md); max-width: 80ch; }
.research-intro b { color: var(--text-primary); font-weight: var(--weight-medium); }

/* split card footer: freshness left, primary action right */
.bi-card-footer-split { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.research-when { font-size: 11px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.research-when svg { width: 13px; height: 13px; }
.research-when b { color: var(--text-secondary); font-weight: var(--weight-medium); }
.research-when__caps { color: var(--indigo-600); font-weight: var(--weight-semibold); }
[data-theme="dark"] .research-when__caps { color: var(--indigo-300); }
.research-never { font-size: 11px; color: var(--text-disabled); display: inline-flex; align-items: center; gap: 6px; font-style: italic; }
.research-never svg { width: 13px; height: 13px; }

/* run-state surfaces (detail) */
.research-runstate { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 32px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.research-runstate__icon { width: 56px; height: 56px; border-radius: var(--radius-xl); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; background: var(--primary-tint); color: var(--primary); }
.research-runstate__icon svg { width: 28px; height: 28px; }
.research-runstate__icon--danger { background: var(--danger-surface); color: var(--danger); }
.research-runstate__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); }
.research-runstate__desc { font-size: var(--text-sm); color: var(--text-muted); margin: 8px 0 0; max-width: 46ch; line-height: var(--leading-md); }
.research-runstate__actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; justify-content: center; }
.research-cost-note { font-size: var(--text-xs); color: var(--text-muted); margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; }
.research-cost-note svg { width: 14px; height: 14px; color: var(--amber-500); }

/* freshness banner */
.research-analyzed-banner { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--text-muted); background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 16px; }
.research-analyzed-banner svg { width: 14px; height: 14px; color: var(--success); }
.research-analyzed-banner b { color: var(--text-secondary); }

/* summary paragraph */
.research-summary { font-size: var(--text-md); color: var(--text-secondary); line-height: 1.6; margin: 0 0 18px; padding: 14px 16px; background: var(--primary-tint); border: 1px solid var(--indigo-100); border-radius: var(--radius-md); }
[data-theme="dark"] .research-summary { border-color: var(--primary-tint-2); }

/* result-row patterns */
.research-prose { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.65; }
.research-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.research-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-medium); padding: 4px 11px; border-radius: var(--radius-pill); background: var(--bg-subtle); border: 1px solid var(--border-subtle); color: var(--text-secondary); }
.research-chip b { color: var(--text-primary); font-weight: var(--weight-semibold); }

.research-rows { display: flex; flex-direction: column; }
.research-row { padding: 14px 0; border-bottom: 1px solid var(--border-subtle); }
.research-row:last-child { border-bottom: none; }
.research-row__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.research-row-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.research-row-desc { font-size: var(--text-xs); color: var(--text-muted); margin: 5px 0 0; line-height: 1.55; }
.research-prio { font-size: 10px; font-weight: var(--weight-bold); letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius-pill); }
.research-prio--high { background: var(--danger-surface); color: var(--danger); }
.research-prio--medium { background: var(--warning-surface); color: var(--warning); }
.research-prio--low { background: var(--gray-100); color: var(--text-muted); }
.research-tag { font-size: 10px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--gray-100); color: var(--text-secondary); }
.research-tag--intent { background: var(--info-surface); color: var(--info); }
.research-tag--conf { background: var(--primary-tint); color: var(--indigo-700); }
[data-theme="dark"] .research-tag--conf { color: var(--indigo-300); }

/* capture buttons */
.research-cap-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.research-cap-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: var(--weight-semibold); padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; font-family: var(--font-sans); }
.research-cap-btn svg { width: 12px; height: 12px; }
.research-cap-btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.research-cap-btn.is-captured { background: var(--success-surface); border-color: var(--success-border); color: var(--success); }

/* discovered entities (promote to BI) */
.research-discovered { display: flex; flex-direction: column; gap: 8px; }
.research-disc-card { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-card); }
.research-disc-card__main { flex: 1; min-width: 0; }
.research-disc-card__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.research-disc-card__sum { font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.research-promote { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: var(--weight-semibold); padding: 5px 11px; border-radius: var(--radius-md); border: 1px solid var(--indigo-200); background: var(--primary-tint); color: var(--indigo-700); cursor: pointer; white-space: nowrap; align-self: center; font-family: var(--font-sans); transition: background-color .12s; }
[data-theme="dark"] .research-promote { color: var(--indigo-300); border-color: var(--primary-tint-2); }
.research-promote:hover { background: var(--primary-tint-2); }
.research-promote svg { width: 13px; height: 13px; }
.research-promote.is-promoted { background: var(--success-surface); border-color: var(--success-border); color: var(--success); cursor: default; }
.research-promote.is-adding { opacity: .7; cursor: wait; }
.research-promote-note { font-size: 11px; color: var(--text-disabled); margin-top: 8px; }

/* progress readout in bulk bar */
.research-progress-read { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--indigo-700); }
[data-theme="dark"] .research-progress-read { color: var(--indigo-300); }

/* ============================================================================
   KEYWORDS PLANNER (kw-*)
   ========================================================================== */
.kw-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.kw-seg { display: inline-flex; gap: 2px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 3px; }
.kw-seg button { border: none; background: none; padding: 5px 11px; border-radius: 6px; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-muted); cursor: pointer; font-family: var(--font-sans); }
.kw-seg button.on { background: var(--bg-card); color: var(--primary); box-shadow: var(--shadow-xs); }
.kw-toolbar__search { flex: 1; min-width: 180px; max-width: 280px; }
.kw-table-wrap { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden; }
.kw-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.kw-table th { text-align: left; font-size: 11px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); padding: 11px 12px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; background: var(--bg-subtle); }
.kw-table td { padding: 11px 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.kw-table tbody tr:last-child td { border-bottom: none; }
.kw-table tbody tr:hover { background: var(--bg-subtle); }
.kw-table tbody tr.is-captured-row { box-shadow: inset 3px 0 0 var(--indigo-400); }
.kw-kw { font-weight: var(--weight-medium); color: var(--text-primary); display: inline-flex; align-items: center; gap: 7px; }
.kw-src-badge { font-size: 9px; font-weight: var(--weight-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--indigo-700); background: var(--primary-tint); border: 1px solid var(--indigo-100); padding: 1px 6px; border-radius: var(--radius-sm); }
[data-theme="dark"] .kw-src-badge { color: var(--indigo-300); border-color: var(--primary-tint-2); }
.kw-num { font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
.kw-gsc { font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
.kw-gsc b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.intent-badge { font-size: 10px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: var(--radius-pill); }
.intent-info { background: var(--info-surface); color: var(--info); }
.intent-commercial { background: var(--warning-surface); color: var(--warning); }
.intent-transactional { background: var(--success-surface); color: var(--success); }
.intent-navigational { background: var(--gray-100); color: var(--text-muted); }
.cluster-tag { font-size: 11px; color: var(--text-secondary); background: var(--gray-100); padding: 2px 8px; border-radius: var(--radius-sm); white-space: nowrap; }
.priority-badge { font-size: 10px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 4px; }
.priority-high { background: var(--danger-surface); color: var(--danger); }
.priority-medium { background: var(--warning-surface); color: var(--warning); }
.priority-low { background: var(--gray-100); color: var(--text-muted); }
.kw-inline-select { appearance: none; font-family: var(--font-sans); font-size: 11px; font-weight: var(--weight-semibold); padding: 3px 22px 3px 9px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 7px center; color: var(--text-secondary); cursor: pointer; }
.kw-actions { display: flex; align-items: center; gap: 2px; }
.kw-used { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kw-used--unused { color: var(--text-disabled); }

/* upload zone (import) */
.upload-zone { border: 1.5px dashed var(--border-default); border-radius: var(--radius-lg); background: var(--bg-subtle); padding: 48px 24px; text-align: center; cursor: pointer; transition: border-color .12s, background-color .12s; }
.upload-zone:hover { border-color: var(--border-strong); background: var(--gray-100); }
.upload-zone.is-dragover { border-color: var(--primary); background: var(--primary-tint); }
.upload-zone__icon { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.upload-zone__icon svg { width: 24px; height: 24px; }
.upload-zone__title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); }
.upload-zone__title b { color: var(--primary); }
.upload-zone__hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: 6px; }

/* ============================================================================
   CONTENT PLANNER (cp-*)
   ========================================================================== */
.cp-suggest-panel { background: var(--bg-card); border: 1px solid var(--indigo-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: 18px; margin-bottom: 18px; }
[data-theme="dark"] .cp-suggest-panel { border-color: var(--primary-tint-2); }
.cp-suggest-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cp-suggest-panel__title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.cp-suggest-panel__title svg { color: var(--primary); }
.cp-suggest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cp-status { appearance: none; font-family: var(--font-sans); font-size: 11px; font-weight: var(--weight-semibold); padding: 4px 24px 4px 11px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center; cursor: pointer; }
.cp-pagetype { font-size: 10px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--info-surface); color: var(--info); }

/* content planner pipeline progress (detail) */
.cp-pipeline { display: flex; align-items: flex-start; }
.cp-pipe-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; width: 72px; }
.cp-pipe-dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--bg-card); border: 1px solid var(--border-default); color: var(--text-muted); font-size: 11px; font-weight: var(--weight-bold); }
.cp-pipe-label { font-size: 10px; font-weight: var(--weight-semibold); color: var(--text-muted); text-align: center; }
.cp-pipe-step.is-active .cp-pipe-label { color: var(--text-primary); }
.cp-pipe-step.is-done .cp-pipe-label { color: var(--text-secondary); }
.cp-pipe-line { flex: 1; height: 1px; background: var(--border-default); margin-top: 13px; min-width: 8px; }
.cp-pipe-line.is-done { background: var(--indigo-400); }

/* ============================================================================
   TOPICS BANK (tb-*)
   ========================================================================== */
.tb-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 18px; }
.tb-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: none; background: none; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font-sans); }
.tb-tab:hover { color: var(--text-primary); }
.tb-tab--active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); }
.tb-tab__count { font-size: 11px; font-weight: var(--weight-semibold); background: var(--gray-100); color: var(--text-muted); padding: 0 7px; border-radius: var(--radius-pill); }
.tb-tab--active .tb-tab__count { background: var(--primary-tint); color: var(--indigo-700); }
[data-theme="dark"] .tb-tab--active .tb-tab__count { color: var(--indigo-300); }
.tb-src { font-size: 11px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
.tb-src svg { width: 12px; height: 12px; }
.tb-src--manual { font-style: italic; }

/* progress bar (article generator) */
.progress-bar { height: 8px; border-radius: var(--radius-pill); background: var(--gray-100); overflow: hidden; }
.progress-fill { height: 100%; border-radius: inherit; background: var(--primary); transition: width .3s cubic-bezier(.16,.84,.44,1); }
.progress-status { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 8px; display: flex; align-items: center; gap: 7px; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) { .progress-fill { transition: none; } }