/* Shared chart + feature block styles. Expects the page to define: --bg --ink --ink-2 --muted --grid --axis --bar --bar-on --latest --previous --older --up --down --warn --tip-bg --tip-ink --body --display --mono */
/* feature blocks */
.ep-feature { display: grid; gap: 14px; padding-block: 26px; border-bottom: 1px solid var(--grid); }
.ep-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ep-big { font: 600 36px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; flex: none; min-width: 2.4ch; }
.ep-ident { display: grid; gap: 1px; min-width: 0; }
.ep-ident h2 { font: 700 15px/1.3 var(--body); margin: 0; overflow-wrap: anywhere; }
.ep-sub { color: var(--ink-2); font-size: 13px; }
.ep-up { color: var(--up); font-weight: 500; }
.ep-down { color: var(--down); font-weight: 500; }
.ep-plot { position: relative; min-width: 0; }
.ep-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ep-chart text { font-family: var(--body); font-size: 11px; font-variant-numeric: tabular-nums; }
.ep-tick { fill: var(--muted); }
.ep-grid { stroke: var(--grid); stroke-width: 1; }
.ep-axis { stroke: var(--axis); stroke-width: 1; }
.ep-guide { stroke: var(--axis); stroke-width: 1; }
.ep-bar { fill: var(--bar); }
.ep-bar.on { fill: var(--bar-on); }
.ep-note { fill: var(--ink-2); font-size: 10.5px !important; }
.ep-removed { fill: var(--down); }
.ep-endlabel { fill: var(--ink-2); font-size: 11.5px !important; font-weight: 500; }
.ep-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ep-line.ep-latest, .ep-start.ep-latest { stroke: var(--latest); }
.ep-line.ep-previous, .ep-start.ep-previous { stroke: var(--previous); }
.ep-line.ep-older, .ep-start.ep-older { stroke: var(--older); }
.ep-start { fill: var(--bg); stroke-width: 2; }
.ep-end { stroke: var(--bg); stroke-width: 2; }
.ep-end.ep-latest, .ep-sw.ep-latest { fill: var(--latest); background: var(--latest); }
.ep-end.ep-previous, .ep-sw.ep-previous { fill: var(--previous); background: var(--previous); }
.ep-end.ep-older, .ep-sw.ep-older { fill: var(--older); background: var(--older); }
.ep-tip {
  position: absolute; pointer-events: none; background: var(--tip-bg); color: var(--tip-ink); font-size: 12px; padding: 8px 10px;
  border-radius: 6px; min-width: 176px; z-index: 2; font-variant-numeric: tabular-nums; line-height: 1.55; box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.ep-tip b { font-weight: 600; }
.ep-row { display: flex; justify-content: space-between; gap: 14px; }
.ep-sw { display: inline-block; width: 8px; height: 2px; vertical-align: middle; margin-right: 6px; border-radius: 2px; }
.ep-dim { opacity: .65; }
.ep-integrity { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 11px/1.5 var(--mono); color: var(--muted); }
.ep-integrity li { display: inline-flex; gap: 6px; align-items: center; }
.ep-integrity li::before { font-family: var(--body); font-size: 12px; }
.ep-integrity .ok::before { content: "✓"; color: var(--up); }
.ep-integrity .warn { color: var(--warn); }
.ep-integrity .warn::before { content: "!"; font-weight: 700; }
.ep-integrity .info::before { content: "↻"; }
.ep-integrity .link a { color: var(--ink-2); }