/* Index Changes tab only -- shared tokens, page chrome, stat-strip, accordion,
   filter chips, and the generic sortable-table skeleton live in sp5.css. */

/* --- Event Log scroll region -- same pattern as Holdings' .sp5-ledger-scroll
   and Trade History's .sp5-th-scroll: filter chips + column headers stay
   pinned while events scroll beneath them. */
.sp5-ic-scroll {
  max-height: min(70vh, 640px);
  overflow: auto;
  border: 1px solid var(--sp5-border);
  border-radius: 8px;
}
.sp5-ic-scroll .sp5-filter-row {
  position: sticky; top: 0; left: 0; z-index: 2;
  background: var(--sp5-surface);
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--sp5-border);
}
/* Cancels sp5.css's base .sp5-table-wrap { overflow-x: auto } -- that alone
   makes this a second, nested scroll container that breaks the sticky
   header below it. Same bug, same fix, as .sp5-ledger-scroll .sp5-table-wrap. */
.sp5-ic-scroll .sp5-table-wrap { overflow-x: visible; }
/* Replaces a column-aligned header -- with 2 cards side by side, a header
   can't line up over either one, so this is just a flat row of "sort by"
   buttons instead. Same sticky-below-filter-row positioning as before. */
.sp5-ic-scroll .sp5-ic-sort-row {
  position: sticky; top: var(--sp5-ic-filter-row-h, 44px); z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  background: var(--sp5-surface);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--sp5-border);
  font-size: 0.72rem; color: var(--sp5-ink-faint);
}
.sp5-ic-sort-row .sp5-th-btn {
  border: 1px solid var(--sp5-border); border-radius: 999px; padding: 0.2rem 0.6rem;
}

/* --- Event cards, 2-up -- same single-expand <details> pattern as
   Performance's .sp5-tpnl-row/.sp5-tpnl-summary (Project.md UI-05: "same
   single-expand pattern already built for the Gain/Loss-by-Ticker ledger"),
   one card per event here rather than one row per ticker with nested trades.
   align-items:start so one card expanding (narrative shown) doesn't stretch
   its row-mate to match -- the shorter card just leaves space below it,
   standard behavior for a 2-up grid, not full masonry packing. */
.sp5-ic-list {
  display: grid; grid-template-columns: repeat(2, 1fr); align-items: start;
  gap: 0.6rem; padding: 0.5rem;
}
@media (max-width: 720px) { .sp5-ic-list { grid-template-columns: 1fr; } }
.sp5-ic-row { border: 1px solid var(--sp5-border); border-radius: 8px; background: var(--sp5-surface); }
.sp5-ic-summary {
  cursor: pointer; list-style: none;
  padding: 0.6rem 0.75rem; font-size: 0.85rem; border-radius: 8px;
}
.sp5-ic-summary:hover { background: var(--sp5-surface-alt); }
.sp5-ic-summary::-webkit-details-marker { display: none; }
.sp5-ic-summary-top { display: flex; align-items: center; gap: 0.4rem; }
.sp5-ic-summary-fields {
  display: flex; flex-wrap: wrap; gap: 0.15rem 1rem;
  margin-top: 0.5rem; font-size: 0.78rem;
}
.sp5-ic-field-label {
  display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--sp5-ink-faint);
}
.sp5-ic-caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; margin-left: auto;
  background: var(--sp5-accent-soft); color: var(--sp5-accent); border: 1.5px solid var(--sp5-accent);
  font-size: 0.7rem; transform: rotate(-90deg); transition: transform 200ms ease;
}
.sp5-ic-row[open] > .sp5-ic-summary .sp5-ic-caret { transform: rotate(0deg); }
.sp5-ic-body {
  padding: 0 0.75rem 0.75rem; border-top: 1px solid var(--sp5-border); margin-top: 0.1rem;
  font-size: 0.85rem; line-height: 1.5;
}
.sp5-ic-body p { margin: 0.6rem 0 0; }
.sp5-ic-source { font-size: 0.78rem; color: var(--sp5-ink-faint); word-break: break-all; }
.sp5-ic-source a { color: var(--sp5-accent); }

.sp5-ic-related { font-size: 0.72rem; color: var(--sp5-ink-faint); }

.sp5-ic-action-badge {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 4px; padding: 0.12rem 0.4rem; white-space: nowrap;
}
.sp5-ic-action-badge--added { background: var(--sp5-positive-soft); color: var(--sp5-positive); }
.sp5-ic-action-badge--removed { background: var(--sp5-negative-soft); color: var(--sp5-negative); }
.sp5-ic-action-badge--split { background: var(--sp5-accent-soft); color: var(--sp5-accent); }
.sp5-ic-action-badge--renamed { background: var(--sp5-surface-alt); color: var(--sp5-ink-muted); }
.sp5-ic-action-badge--exchange_transfer { background: var(--sp5-surface-alt); color: var(--sp5-ink-faint); }