/* ═══════════════════════════════════════════════════════════════
   RupeeCase Learn | Reusable Infographic Components
   Navy-only palette, non-AI look, Indian-market semantics.
   Use on any module that wants module-1.1-class density.
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared vars (fallback if module does not define its own) ── */
.rc-infographic{
  --rc-navy: var(--navy, #0D1F3C);
  --rc-ink:  var(--text, #0F172A);
  --rc-mute: var(--text-3, #6B7280);
  --rc-rule: var(--rule, #E5E7EB);
  --rc-bg:   var(--white, #fff);
  --rc-ice:  var(--ice, #F3F6FB);
  --rc-accent: #F5D76E;
  --rc-green: #059669;
  --rc-red:  #B42318;
  margin: 32px 0;
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── Caption (small mono eyebrow above any infographic) ── */
.rc-ig-caption{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rc-mute);
  margin-bottom: 10px;
}
.rc-ig-title, .rc-infographic-title{
  font-size: 18px;
  font-weight: 600;
  color: var(--rc-navy);
  line-height: 1.35;
  margin-bottom: 14px;
  font-family: 'Inter', system-ui, sans-serif;
}
.rc-ig-sub, .rc-infographic-note{
  font-size: 13px;
  color: var(--rc-mute);
  line-height: 1.55;
  margin-top: 14px;
  font-family: 'Inter', system-ui, sans-serif;
}
.rc-ig-source{
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--rc-mute);
  margin-top: 10px;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════
   1. STAT ROW (4 columns of Indian-data facts)
   ═══════════════════════════════════════════════════════════════ */
.rc-stat-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 24px 0;
}
.rc-stat{
  background: var(--rc-bg);
  border: 1px solid var(--rc-rule);
  border-radius: 12px;
  padding: 18px 20px;
  position: relative;
}
.rc-stat::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rc-navy);
  border-radius: 12px 12px 0 0;
}
.rc-stat-num{
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px;
  font-weight: 500;
  color: var(--rc-navy);
  line-height: 1;
  margin-bottom: 6px;
}
.rc-stat-lbl{
  font-size: 12px;
  color: var(--rc-mute);
  line-height: 1.4;
}
.rc-stat-src{
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--rc-mute);
  margin-top: 6px;
  letter-spacing: 0.03em;
}
@media(max-width:720px){
  .rc-stat-row{ grid-template-columns: repeat(2,1fr); }
  .rc-stat-num{ font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   2. PIE CHART (SVG-based, navy palette with subtle tonal shifts)
   ═══════════════════════════════════════════════════════════════ */
.rc-pie-wrap{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: center;
  background: var(--rc-bg);
  border: 1px solid var(--rc-rule);
  border-radius: 14px;
  padding: 24px 28px;
  margin: 24px 0;
}
.rc-pie-svg{ width: 220px; height: 220px; flex-shrink: 0; }
.rc-pie-svg circle{ transition: stroke-dashoffset 0.6s ease; }
.rc-pie-legend{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.rc-pie-legend li{
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  color: var(--rc-ink);
  padding: 6px 0;
  border-bottom: 1px dashed var(--rc-rule);
}
.rc-pie-legend li:last-child{ border-bottom: none; }
.rc-pie-swatch{ width: 14px; height: 14px; border-radius: 3px; }
.rc-pie-pct{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--rc-navy);
  font-variant-numeric: tabular-nums;
}
@media(max-width:720px){
  .rc-pie-wrap{ grid-template-columns: 1fr; text-align: left; }
  .rc-pie-svg{ justify-self: center; }
}

/* ═══════════════════════════════════════════════════════════════
   3. FLOW CHART (horizontal process flow with arrows)
   ═══════════════════════════════════════════════════════════════ */
.rc-flow{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin: 24px 0;
  background: var(--rc-ice);
  border: 1px solid var(--rc-rule);
  border-radius: 14px;
  padding: 22px;
  position: relative;
}
.rc-flow-node{
  background: var(--rc-bg);
  border: 1px solid var(--rc-rule);
  border-radius: 10px;
  padding: 14px 14px 14px 14px;
  text-align: center;
  position: relative;
  margin: 0 8px;
}
.rc-flow-step{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--rc-accent);
  margin-bottom: 6px;
  text-transform: uppercase;
  background: var(--rc-navy);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}
.rc-flow-title{
  font-size: 13px;
  font-weight: 600;
  color: var(--rc-navy);
  line-height: 1.3;
  margin-bottom: 4px;
}
.rc-flow-sub{
  font-size: 11px;
  color: var(--rc-mute);
  line-height: 1.4;
}
.rc-flow-node::after{
  content: '→';
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rc-navy);
  font-size: 18px;
  font-weight: 700;
  z-index: 2;
}
.rc-flow-node:last-child::after{ display: none; }
@media(max-width:720px){
  .rc-flow{ grid-template-columns: 1fr; }
  .rc-flow-node{ margin: 6px 0; }
  .rc-flow-node::after{ content: '↓'; right: 50%; transform: translate(50%, 14px); top: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   4. COMPARISON BARS (horizontal bar chart, navy + muted gradient)
   ═══════════════════════════════════════════════════════════════ */
.rc-barchart{
  background: var(--rc-bg);
  border: 1px solid var(--rc-rule);
  border-radius: 14px;
  padding: 24px 28px;
  margin: 24px 0;
}
.rc-bar{
  display: grid;
  grid-template-columns: 160px 1fr 80px;
  gap: 16px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--rc-rule);
}
.rc-bar:last-child{ border-bottom: none; }
.rc-bar-label{
  font-size: 13px;
  color: var(--rc-ink);
  font-weight: 500;
}
.rc-bar-label small{ font-size: 11px; color: var(--rc-mute); display: block; margin-top: 2px; }
.rc-bar-track{
  height: 10px;
  background: var(--rc-ice);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.rc-bar-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--rc-navy), #3A5C99);
  border-radius: 5px;
  transition: width 0.6s ease;
}
.rc-bar-fill.red{ background: linear-gradient(90deg, #B42318, #E67A7A); }
.rc-bar-fill.green, .rc-bar-fill.good{ background: linear-gradient(90deg, var(--rc-green), #3DD68C); }
.rc-bar-fill.amber{ background: linear-gradient(90deg, #B67A00, var(--rc-accent)); }
.rc-bar-val{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--rc-navy);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media(max-width:720px){
  .rc-bar{ grid-template-columns: 1fr; gap: 6px; }
  .rc-bar-val{ text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════
   5. TIMELINE (vertical, events along a line)
   ═══════════════════════════════════════════════════════════════ */
.rc-timeline{
  border-left: 2px solid var(--rc-navy);
  padding: 8px 0 8px 22px;
  margin: 24px 0 24px 12px;
}
.rc-timeline-item{
  position: relative;
  padding: 10px 0 18px;
}
.rc-timeline-item::before{
  content: '';
  position: absolute;
  left: -30px;
  top: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rc-bg);
  border: 3px solid var(--rc-navy);
}
.rc-timeline-date{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--rc-navy);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.rc-timeline-title{
  font-size: 14px;
  font-weight: 600;
  color: var(--rc-ink);
  margin-bottom: 4px;
}
.rc-timeline-sub{
  font-size: 13px;
  color: var(--rc-mute);
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════
   6. KV GRID (key-value cards: 2-col, for "what matters / what does not")
   ═══════════════════════════════════════════════════════════════ */
.rc-kv{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 24px 0;
  border: 1px solid var(--rc-rule);
  border-radius: 14px;
  overflow: hidden;
}
.rc-kv-side{
  padding: 22px 24px;
}
.rc-kv-side + .rc-kv-side{
  border-left: 1px solid var(--rc-rule);
}
.rc-kv-side.good{ background: #F0FDF4; }
.rc-kv-side.bad{  background: #FEF2F2; }
.rc-kv-side.neutral{ background: var(--rc-ice); }
.rc-kv-head{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.rc-kv-side.good .rc-kv-head{ color: var(--rc-green); }
.rc-kv-side.bad  .rc-kv-head{ color: var(--rc-red); }
.rc-kv-side.neutral .rc-kv-head{ color: var(--rc-navy); }
.rc-kv-side ul{ list-style: none; padding: 0; margin: 0; }
.rc-kv-side li{
  font-size: 13px;
  color: var(--rc-ink);
  line-height: 1.55;
  padding: 8px 0;
  padding-left: 22px;
  position: relative;
  border-bottom: 1px dashed var(--rc-rule);
}
.rc-kv-side li:last-child{ border-bottom: none; }
.rc-kv-side.good li::before{ content: '✓'; position: absolute; left: 0; top: 8px; color: var(--rc-green); font-weight: 700; }
.rc-kv-side.bad li::before{  content: '×'; position: absolute; left: 0; top: 6px; color: var(--rc-red); font-weight: 700; font-size: 16px; }
.rc-kv-side.neutral li::before{ content: '•'; position: absolute; left: 2px; top: 4px; color: var(--rc-navy); font-size: 18px; }
@media(max-width:720px){
  .rc-kv{ grid-template-columns: 1fr; }
  .rc-kv-side + .rc-kv-side{ border-left: none; border-top: 1px solid var(--rc-rule); }
}

/* ═══════════════════════════════════════════════════════════════
   7. PROCESS STEPS (vertical, numbered)
   ═══════════════════════════════════════════════════════════════ */
.rc-steps{
  margin: 24px 0;
  border: 1px solid var(--rc-rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--rc-bg);
}
.rc-step{
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--rc-rule);
  align-items: start;
}
.rc-step:last-child{ border-bottom: none; }
.rc-step-num{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--rc-navy);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-step-body h4{
  font-size: 15px;
  font-weight: 600;
  color: var(--rc-navy);
  margin: 4px 0 4px;
  line-height: 1.35;
}
.rc-step-body p{
  font-size: 13px;
  color: var(--rc-mute);
  line-height: 1.6;
  margin: 0;
}
.rc-step-body p strong{ color: var(--rc-ink); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   8. ENTITY CHIP ROW (NSE / BSE / SEBI / RBI / AMFI badges)
   ═══════════════════════════════════════════════════════════════ */
.rc-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.rc-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border: 1px solid var(--rc-rule);
  background: var(--rc-bg);
  color: var(--rc-navy);
}
.rc-chip::before{
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rc-navy);
}
.rc-chip.nse::before{ background: #003087; }
.rc-chip.bse::before{ background: #C0392B; }
.rc-chip.sebi::before{ background: #2E7D32; }
.rc-chip.rbi::before{ background: #6A1B9A; }
.rc-chip.amfi::before{ background: #B67A00; }
.rc-chip.nsdl::before{ background: #14458B; }
.rc-chip.cdsl::before{ background: #B42318; }

/* ═══════════════════════════════════════════════════════════════
   9. CALLOUT BOX (key insight or TK-voice note)
   ═══════════════════════════════════════════════════════════════ */
.rc-callout{
  border-left: 4px solid var(--rc-navy);
  background: var(--rc-ice);
  padding: 16px 20px;
  margin: 20px 0;
  border-radius: 0 10px 10px 0;
}
.rc-callout-label{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rc-navy);
  margin-bottom: 6px;
}
.rc-callout p{
  font-size: 14px;
  color: var(--rc-ink);
  line-height: 1.65;
  margin: 0;
}
.rc-callout.tk{ border-left-color: var(--rc-accent); background: #FFFBEB; }
.rc-callout.tk .rc-callout-label{ color: #B67A00; }

/* ═══════════════════════════════════════════════════════════════
   Dark-mode overrides
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .rc-stat,
html[data-theme="dark"] .rc-pie-wrap,
html[data-theme="dark"] .rc-barchart,
html[data-theme="dark"] .rc-steps,
html[data-theme="dark"] .rc-flow-node,
html[data-theme="dark"] .rc-chip{
  background: var(--rc-card, #1A2942);
  border-color: rgba(255,255,255,0.1);
}
html[data-theme="dark"] .rc-flow,
html[data-theme="dark"] .rc-callout{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
html[data-theme="dark"] .rc-stat-num,
html[data-theme="dark"] .rc-pie-pct,
html[data-theme="dark"] .rc-bar-val,
html[data-theme="dark"] .rc-step-body h4,
html[data-theme="dark"] .rc-timeline-date,
html[data-theme="dark"] .rc-flow-title,
html[data-theme="dark"] .rc-ig-title{
  color: #E5E7EB;
}
html[data-theme="dark"] .rc-bar-track{ background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .rc-timeline{ border-left-color: #60A5FA; }
html[data-theme="dark"] .rc-timeline-item::before{ border-color: #60A5FA; background: #0D1F3C; }
html[data-theme="dark"] .rc-kv-side.good{ background: rgba(5,150,105,0.08); }
html[data-theme="dark"] .rc-kv-side.bad{ background: rgba(180,35,24,0.08); }
html[data-theme="dark"] .rc-kv-side.neutral{ background: rgba(255,255,255,0.03); }
html[data-theme="dark"] .rc-callout.tk{ background: rgba(245,215,110,0.08); }

@media (prefers-reduced-motion: reduce){
  .rc-pie-svg circle, .rc-bar-fill{ transition: none; }
}