.index-chart {
  /* Design tokens. Defaults are the PatrickNeilBradley.com patriotic-editorial
     palette (docs/claude-design-system-spec.md). A host may override any token
     on the .index-chart node or an ancestor to re-theme the component. */
  --ic-bg:        #FFFFFF;   /* paper-card */
  --ic-fg:        #1A1A2E;   /* ink */
  --ic-muted:     #5C5C6E;   /* ink-muted */
  --ic-axis:      #5C5C6E;   /* ink-muted */
  --ic-grid:      #E2DBC8;   /* rule */
  --ic-border:    #E2DBC8;   /* rule */
  --ic-btn-bg:    transparent;
  --ic-btn-fg:    #3D3D52;   /* ink-soft */
  --ic-btn-on:    #3C3B6E;   /* Old Glory Blue */
  --ic-btn-on-bg: rgba(60, 59, 110, 0.08);
  --ic-btn-on-fg: #3C3B6E;
  --ic-focus:     #3C3B6E;
  --ic-accent:    #B22234;   /* Old Glory Red -- emphasis only, never a fill default */

  /* series colors -- blue carries the accent work; red is not a series default */
  --ic-s1: #3C3B6E;   /* Old Glory Blue */
  --ic-s2: #4B92DB;   /* Infantry Blue */
  --ic-s3: #A07D2C;   /* antique brass */
  --ic-s4: #4B6DAA;   /* blue-bright */

  /* categorical palette -- a blue-anchored editorial ramp for pie / multi-series */
  --ic-cat1: #3C3B6E;
  --ic-cat2: #4B6DAA;
  --ic-cat3: #6E78A8;
  --ic-cat4: #A07D2C;
  --ic-cat5: #4B92DB;
  --ic-cat6: #2C2C44;
  --ic-cat7: #93939F;
  --ic-cat8: #C2B98F;

  position: relative;
  box-sizing: border-box;
  background: var(--ic-bg);
  color: var(--ic-fg);
  border: 1px solid var(--ic-border);
  border-radius: 8px;
  padding: 16px 18px 14px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
}
.index-chart * { box-sizing: border-box; }

.index-chart__header { margin-bottom: 12px; }
.index-chart__title {
  font-size: 17px; font-weight: 700; color: var(--ic-fg);
  margin: 0; line-height: 1.3;
}
.index-chart__source {
  font-size: 12px; color: var(--ic-muted); margin: 3px 0 0;
}

.index-chart__controls {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-bottom: 14px;
}
.index-chart__switcher,
.index-chart__toggle { display: flex; flex-wrap: wrap; gap: 6px; }

.index-chart__btn {
  font: inherit; font-size: 13px; cursor: pointer;
  background: var(--ic-btn-bg); color: var(--ic-btn-fg);
  border: 1px solid var(--ic-border); border-radius: 5px;
  padding: 5px 11px; transition: background .12s, border-color .12s, color .12s;
}
.index-chart__btn:hover { border-color: var(--ic-btn-on); color: var(--ic-btn-on); }
.index-chart__btn.is-active {
  background: var(--ic-btn-on-bg); color: var(--ic-btn-on-fg);
  border-color: var(--ic-btn-on); font-weight: 500;
}
.index-chart__btn:focus-visible,
.index-chart__dimsel select:focus-visible {
  outline: 2px solid var(--ic-focus); outline-offset: 2px;
}

.index-chart__dimsel { font-size: 13px; color: var(--ic-muted); }
.index-chart__dimsel select {
  font: inherit; font-size: 13px; margin-left: 4px;
  border: 1px solid var(--ic-border); border-radius: 5px;
  padding: 4px 6px; background: var(--ic-bg); color: var(--ic-fg);
}

.index-chart__plot { position: relative; min-height: 160px; }
.index-chart__svg { display: block; overflow: visible; }

/* marks + emphasis */
.index-chart__bar,
.index-chart__dot,
.index-chart__pt,
.index-chart__slice { cursor: pointer; }
.index-chart__slice { stroke: var(--ic-bg); stroke-width: 1.5; }

.index-chart__bar.is-hover,
.index-chart__dot.is-hover,
.index-chart__pt.is-hover { stroke: var(--ic-fg); stroke-width: 1.5; }
.index-chart__slice.is-hover { stroke: var(--ic-fg); stroke-width: 2; }

.index-chart__bar.is-selected,
.index-chart__dot.is-selected,
.index-chart__pt.is-selected,
.index-chart__slice.is-selected { fill: var(--ic-accent); }

.index-chart__line { stroke-linecap: round; stroke-linejoin: round; }

.index-chart__label {
  font-size: 11px; font-weight: 600; fill: var(--ic-fg); pointer-events: none;
}
.index-chart__label--pie { font-size: 10.5px; fill: var(--ic-muted); }

.index-chart__axis text { font-size: 11px; }
.index-chart__axis-title { font-size: 12px; font-weight: 600; }
.index-chart__grid line { stroke-dasharray: 2 3; }

.index-chart__bar:focus-visible,
.index-chart__dot:focus-visible,
.index-chart__pt:focus-visible,
.index-chart__slice:focus-visible { outline: 2px solid var(--ic-focus); }

.index-chart__msg { padding: 32px 16px; text-align: center; color: var(--ic-muted); }
.index-chart__msg strong { display: block; color: var(--ic-fg); font-size: 15px; }
.index-chart__msg-detail { margin-top: 6px; font-size: 13px; }
.index-chart__msg.is-error strong { color: var(--ic-accent); }

.index-chart__legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  margin-top: 12px; font-size: 12px; color: var(--ic-muted);
}
.index-chart__legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--ic-fg); }
.index-chart__swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.index-chart__legend-note { font-style: italic; }

.index-chart__tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--ic-fg); color: #fff;
  padding: 6px 9px; border-radius: 5px; font-size: 12px; line-height: 1.4;
  max-width: 240px; transition: opacity .1s;
}

.index-chart__pivot-wrap { overflow-x: auto; }
.index-chart__pivot { border-collapse: collapse; width: 100%; font-size: 13px; }
.index-chart__pivot th,
.index-chart__pivot td {
  border: 1px solid var(--ic-border); padding: 6px 10px; text-align: right;
}
.index-chart__pivot thead th,
.index-chart__pivot tbody th { background: rgba(60, 59, 110, 0.06); font-weight: 600; }
.index-chart__pivot tbody th { text-align: left; }
.index-chart__pivot td.is-empty { color: var(--ic-muted); }

.index-chart__dt { margin-top: 12px; font-size: 13px; }
.index-chart__dt summary { cursor: pointer; color: var(--ic-muted); }
.index-chart__dt summary:focus-visible { outline: 2px solid var(--ic-focus); }
.index-chart__dt table { border-collapse: collapse; margin-top: 8px; width: 100%; }
.index-chart__dt th,
.index-chart__dt td {
  border: 1px solid var(--ic-border); padding: 5px 9px; text-align: left;
}
.index-chart__dt td { text-align: right; }
.index-chart__dt-note { color: var(--ic-muted); margin: 8px 0 0; }

/* v0.3.0 -- breadcrumb (drill-down) */
.index-chart__breadcrumb {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  margin-bottom: 10px; font-size: 13px;
}
.index-chart__crumb {
  background: none; border: none; padding: 0; font: inherit; font-size: 13px;
  color: var(--ic-btn-on); cursor: pointer;
}
.index-chart__crumb:hover { text-decoration: underline; }
.index-chart__crumb:focus-visible { outline: 2px solid var(--ic-focus); outline-offset: 2px; }
.index-chart__crumb[disabled] {
  color: var(--ic-fg); cursor: default; font-weight: 600; text-decoration: none;
}
.index-chart__crumb-sep { color: var(--ic-muted); }

/* v0.3.0 -- filter / segment chips */
.index-chart__filter {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 12px; font-size: 12px;
}
.index-chart__filter-label { color: var(--ic-muted); }
.index-chart__chip {
  font: inherit; font-size: 12px; cursor: pointer;
  border: 1px solid var(--ic-btn-on); border-radius: 999px; padding: 3px 11px;
  background: var(--ic-btn-on-bg); color: var(--ic-btn-on-fg);
}
.index-chart__chip.is-off {
  background: transparent; color: var(--ic-muted); border-color: var(--ic-border);
}
.index-chart__chip:focus-visible { outline: 2px solid var(--ic-focus); outline-offset: 1px; }
.index-chart__filter-reset {
  background: none; border: none; font: inherit; font-size: 12px;
  color: var(--ic-btn-on); cursor: pointer; text-decoration: underline;
}
.index-chart__filter-reset:focus-visible { outline: 2px solid var(--ic-focus); }

/* v0.4.0 -- accessibility: the mark layer is one focusable composite widget */
.index-chart__marks:focus { outline: none; }
.index-chart__marks [tabindex="0"]:focus-visible { outline: 2px solid var(--ic-focus); outline-offset: 1px; }

/* v0.5.0 -- error bars (confidence intervals) */
.index-chart__err { stroke: var(--ic-fg); stroke-width: 1.4; stroke-opacity: 0.72; }

@media (prefers-reduced-motion: reduce) {
  .index-chart__btn { transition: none; }
}
@media (max-width: 560px) {
  .index-chart__controls { gap: 8px; }
  .index-chart__btn { padding: 5px 8px; }
  .index-chart__title { font-size: 16px; }
}