/* ==========================================================================
   Octus Network — Data-dossier charts
   Reusable, dependency-free chart styling. Works on dark (.oc-dark) and
   light (.oc-light) section backgrounds. Animation is driven by the .oc-in
   class added by charts.js when the chart scrolls into view (draw-on),
   after which charts settle into a quiet idle state.
   ========================================================================== */

.oc-chart {
  --oc-ink: var(--warm-cream);
  --oc-muted: #8A8580;
  --oc-grid: rgba(255, 248, 238, 0.10);
  --oc-axis: rgba(255, 248, 238, 0.22);
  --oc-surface: rgba(255, 248, 238, 0.02);
  --oc-hair: rgba(255, 248, 238, 0.10);
  margin: 0;
  position: relative;
}
.oc-chart.oc-light {
  --oc-ink: #1A1314;
  --oc-muted: #6E6760;
  --oc-grid: rgba(26, 19, 20, 0.08);
  --oc-axis: rgba(26, 19, 20, 0.20);
  --oc-surface: rgba(26, 19, 20, 0.015);
  --oc-hair: rgba(26, 19, 20, 0.12);
}

/* ---- Frame / header ---- */
.oc-chart-frame {
  border: 1px solid var(--oc-hair);
  border-radius: 12px;
  background: var(--oc-surface);
  padding: 28px 30px 30px;
}
.oc-light .oc-chart-frame { background: #FFFFFF; }

.oc-chart-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 22px; margin-bottom: 26px;
  border-bottom: 1px solid var(--oc-hair);
}
.oc-chart-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; line-height: 1.15; letter-spacing: -0.015em;
  color: var(--oc-ink); max-width: 30ch;
}
.oc-chart-kicker {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--signal); display: block; margin-bottom: 12px;
}
.oc-chart-note {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--oc-muted); text-align: right;
  max-width: 26ch;
}

/* ---- MCE / generic badges ---- */
.oc-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
}
.oc-badge .oc-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.oc-badge.m { color: #2FB179; background: rgba(47,177,121,0.12); border: 1px solid rgba(47,177,121,0.34); }
.oc-badge.c { color: var(--gold); background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.34); }
.oc-badge.e { color: var(--signal-light); background: rgba(212,85,58,0.12); border: 1px solid rgba(212,85,58,0.34); }
.oc-light .oc-badge.m { color: #1A6B3C; background: rgba(31,138,91,0.1); border-color: rgba(31,138,91,0.3); }
.oc-light .oc-badge.c { color: #8A5B05; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.38); }
.oc-light .oc-badge.e { color: #7A4A2E; background: rgba(212,85,58,0.1); border-color: rgba(212,85,58,0.32); }

/* ==================== CONFIDENCE — stacked bar ==================== */
.oc-conf-bar {
  display: flex; width: 100%; height: 64px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--oc-hair); background: var(--oc-surface);
}
.oc-conf-seg {
  position: relative; height: 100%; width: 0;
  display: flex; align-items: center; justify-content: center;
  transition: width 1100ms var(--ease-emphasized);
  overflow: hidden;
}
.oc-conf-seg .oc-seg-pct {
  font-family: var(--font-mono); font-weight: 700; font-size: 18px;
  letter-spacing: -0.01em; color: #0C0C0F; opacity: 0;
  transition: opacity 400ms ease 700ms;
  font-feature-settings: 'tnum' 1;
}
.oc-in .oc-conf-seg .oc-seg-pct { opacity: 1; }
.oc-conf-seg.m { background: linear-gradient(180deg, #36C089, #1F8A5B); }
.oc-conf-seg.c { background: linear-gradient(180deg, #F6B43A, #E0890A); }
.oc-conf-seg.e { background: linear-gradient(180deg, #E8735A, #C4422C); }
.oc-conf-seg + .oc-conf-seg { border-left: 1px solid rgba(12,12,15,0.25); }

.oc-conf-ticks {
  display: flex; justify-content: space-between; margin-top: 10px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
  color: var(--oc-muted);
}
.oc-conf-legend {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px;
}
.oc-conf-legend .oc-leg {
  border-top: 1px solid var(--oc-hair); padding-top: 16px;
}
.oc-conf-legend .oc-leg .oc-leg-val {
  font-family: var(--font-mono); font-weight: 500; font-size: 30px; line-height: 1;
  letter-spacing: -0.02em; color: var(--oc-ink); margin: 12px 0 8px;
  font-feature-settings: 'tnum' 1;
}
.oc-conf-legend .oc-leg .oc-leg-desc {
  font-size: 13px; line-height: 20px; color: var(--oc-muted);
}
@media (max-width: 640px) { .oc-conf-legend { grid-template-columns: 1fr; gap: 14px; } }

/* ==================== DONUT ==================== */
.oc-donut-wrap { display: grid; grid-template-columns: auto 1fr; gap: 44px; align-items: center; }
.oc-donut { position: relative; width: 220px; height: 220px; flex: none; }
.oc-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.oc-donut .oc-arc {
  fill: none; stroke-width: 18; stroke-linecap: butt;
  transition: stroke-dashoffset 1200ms var(--ease-emphasized);
}
.oc-donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.oc-donut-center .oc-d-num {
  font-family: var(--font-mono); font-weight: 500; font-size: 46px; line-height: 1;
  letter-spacing: -0.02em; color: var(--oc-ink); font-feature-settings: 'tnum' 1;
}
.oc-donut-center .oc-d-label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--oc-muted); margin-top: 8px;
}
.oc-donut-legend { display: flex; flex-direction: column; gap: 2px; }
.oc-donut-legend .oc-dleg {
  display: grid; grid-template-columns: 14px 1fr auto; gap: 14px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--oc-hair);
}
.oc-donut-legend .oc-dleg:last-child { border-bottom: none; }
.oc-donut-legend .oc-swatch { width: 11px; height: 11px; border-radius: 3px; align-self: center; }
.oc-donut-legend .oc-dleg-label { font-family: var(--font-body); font-size: 15px; color: var(--oc-ink); }
.oc-donut-legend .oc-dleg-val {
  font-family: var(--font-mono); font-weight: 500; font-size: 16px; color: var(--oc-ink);
  font-feature-settings: 'tnum' 1;
}
.oc-donut-legend .oc-dleg-val .oc-pct { color: var(--oc-muted); font-size: 12px; margin-left: 8px; }
@media (max-width: 620px) { .oc-donut-wrap { grid-template-columns: 1fr; justify-items: center; gap: 32px; } }

/* ==================== LINE / TREND ==================== */
.oc-line-canvas { position: relative; width: 100%; }
.oc-line-canvas svg { width: 100%; height: auto; display: block; overflow: visible; }
.oc-grid-line { stroke: var(--oc-grid); stroke-width: 1; }
.oc-axis-line { stroke: var(--oc-axis); stroke-width: 1; }
.oc-area { opacity: 0; transition: opacity 900ms ease 500ms; }
.oc-in .oc-area { opacity: 1; }
.oc-trend {
  fill: none; stroke: var(--sun-orange); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke-dashoffset 1500ms var(--ease-emphasized);
}
.oc-pt { opacity: 0; transition: opacity 320ms ease; }
.oc-in .oc-pt { opacity: 1; }
.oc-pt-ring { fill: var(--black); stroke: var(--sun-orange); stroke-width: 2; }
.oc-light .oc-pt-ring { fill: #FFFFFF; }
.oc-pt-core { fill: var(--sun-orange); }
.oc-pt.is-last .oc-pt-glow { fill: var(--gold); opacity: 0.0; transform-box: fill-box; transform-origin: center; }
.oc-in .oc-pt.is-last .oc-pt-glow { animation: oc-pulse 2.6s ease-in-out 1700ms infinite; }
.oc-pt.is-last .oc-pt-ring { stroke: var(--gold); }
.oc-pt.is-last .oc-pt-core { fill: var(--gold); }
@keyframes oc-pulse { 0%,100% { opacity: 0.0; transform: scale(0.6); } 50% { opacity: 0.35; transform: scale(1.5); } }
.oc-tick-x, .oc-tick-y {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  fill: var(--oc-muted);
}
.oc-pt-val {
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  fill: var(--oc-ink); opacity: 0; transition: opacity 400ms ease 1200ms;
}
.oc-in .oc-pt-val { opacity: 1; }
.oc-line-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--oc-hair);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--oc-muted);
}
.oc-line-foot .oc-delta { color: var(--gold); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .oc-conf-seg, .oc-arc, .oc-trend, .oc-area, .oc-pt, .oc-pt-val, .oc-seg-pct { transition: none !important; }
  .oc-pt.is-last .oc-pt-glow { animation: none !important; }
}