/* ============================================================
   Capt. Jax Report — collapsed "generate" card redesign
   Direction 1: Pipeline (feeds → synthesized by AI → report).
   Additive + fully scoped to .cjx-card. To roll back: remove this
   file's <link> in index.html and restore buildAiFishingReportGenerateCard()
   in app.js (backup in checkpoints/2026-06-07-captjax/app.js).
   Uses the app's own tokens (--accent, --bg-card, --border, --text-*).
   ============================================================ */

.cjx-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Inline-SVG icon system (renders even if Font Awesome's webfont is slow). */
.cjx-card .cjx-ic {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}

.cjx-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--accent);
}
.cjx-head {
  margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.3px;
  line-height: 1.2; color: var(--text-primary); text-wrap: balance;
}
.cjx-sub {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-secondary);
}

.cjx-feedslab {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-dim);
}
.cjx-feeds { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.cjx-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; color: var(--text-primary);
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 9px;
}
.cjx-chip .cjx-ic { font-size: 12px; color: var(--text-secondary); }

/* feeds → AI → report connector */
.cjx-flow {
  display: flex; align-items: center; gap: 10px; margin: 1px 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px; color: var(--text-secondary);
}
.cjx-flow-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); }
.cjx-flow-node { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); white-space: nowrap; }
.cjx-flow-node .cjx-ic { font-size: 13px; }

/* solid (non-gradient) primary action */
.cjx-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px 18px; min-height: 46px;
  font: 700 14px/1 'Inter', -apple-system, sans-serif; color: #06182e;
  background: var(--accent); border: none; border-radius: 10px; cursor: pointer;
  transition: filter 140ms ease, transform 120ms ease;
}
.cjx-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cjx-cta:active { transform: translateY(0); }
.cjx-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cjx-cta .cjx-ic { font-size: 12px; }