.xac-chart {
    position: relative;
    font-family: var(--font-sans, 'Encode Sans', system-ui, sans-serif);
}

.xac-axis {
    font: 500 10.5px var(--font-condensed, 'Encode Sans Condensed', sans-serif);
    fill: var(--xa-ink-400, #928fa1);
    letter-spacing: 0.02em;
}

.xac-rowlabel {
    font: 500 12px var(--font-semicondensed, 'Encode Sans Semi Condensed', sans-serif);
    fill: var(--xa-ink-800, #2c2a38);
}

.xac-valuelabel {
    font: 600 11px var(--font-condensed, 'Encode Sans Condensed', sans-serif);
    fill: var(--xa-ink-500, #6f6b80);
}

.xac-endlabel {
    font: 600 11.5px var(--font-semicondensed, 'Encode Sans Semi Condensed', sans-serif);
}

.xac-pielabel {
    font: 500 11px var(--font-semicondensed, 'Encode Sans Semi Condensed', sans-serif);
    fill: var(--xa-ink-800, #2c2a38);
}

.xac-pielabel-inside {
    font: 600 11.5px var(--font-condensed, 'Encode Sans Condensed', sans-serif);
    fill: #fff;
}

.xac-center-value {
    font: 700 26px var(--font-wide, 'Encode Sans Expanded', sans-serif);
    fill: var(--xa-ink-950, #15141c);
    letter-spacing: -0.015em;
}

.xac-center-label {
    font: 500 11px var(--font-sans, 'Encode Sans', sans-serif);
    fill: var(--xa-ink-500, #6f6b80);
    letter-spacing: 0.04em;
}

.xac-bargroup rect {
    transition: opacity 120ms;
}

.xac-bargroup:hover rect:not([fill="transparent"]) {
    opacity: 0.88;
}

.xac-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 6px 0;
}

.xac-legend-column {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}

.xac-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: none;
    padding: 3px 2px;
    font: 500 12px var(--font-sans, 'Encode Sans', system-ui, sans-serif);
    color: var(--xa-ink-800, #2c2a38);
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
}

    .xac-legend-item:hover {
        background: var(--xa-ink-50, #f7f6fa);
    }

.xac-legend-static {
    cursor: default;
}

    .xac-legend-static:hover {
        background: none;
    }

.xac-legend-off {
    opacity: 0.38;
}

    .xac-legend-off .xac-swatch {
        background: var(--xa-ink-300, #bcb9c6) !important;
    }

.xac-legend-label {
    flex: 1;
    white-space: nowrap;
}

.xac-legend-value {
    font: 600 12px var(--font-condensed, 'Encode Sans Condensed', sans-serif);
    color: var(--xa-ink-950, #15141c);
    margin-left: 18px;
}

.xac-swatch {
    width: 9px;
    height: 9px;
    border-radius: 2.5px;
    flex: none;
    display: inline-block;
}

.xac-tip {
    position: fixed;
    z-index: 2147483000;
    pointer-events: none;
    min-width: 130px;
    background: var(--xa-ink-950, #15141c);
    color: #fff;
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 12px 28px rgba(21,20,28,0.25);
}

.xac-tip-title {
    font: 600 11px var(--font-sans, 'Encode Sans', sans-serif);
    color: rgba(255,255,255,0.66);
    margin-bottom: 5px;
}

.xac-tip-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 1.5px 0;
}

.xac-tip-label {
    font: 500 11.5px var(--font-sans, 'Encode Sans', sans-serif);
    color: rgba(255,255,255,0.85);
    flex: 1;
    padding-right: 14px;
}

.xac-tip-value {
    font: 600 11.5px var(--font-condensed, 'Encode Sans Condensed', sans-serif);
    color: #fff;
}

/* Layout helpers (inline styles in the reference) */
.xac-svg {
    display: block;
}
/*
   * Horizontal-scroll viewport for x-axis zoom. Lays the SVG out as a
   * non-shrinking flex item so it keeps its (wider) attribute width and the
   * container actually overflows/scrolls instead of squashing the SVG to fit.
   * 'align-items: flex-start' pins the SVG at its full intrinsic height: under
   * the default 'stretch', the horizontal scrollbar shrinks the flex line's
   * cross-size and drags the SVG height down with it, clipping the x-axis
   * labels (and the bottom of the plot) along the scrollbar edge.
   */
.xac-scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
}

    .xac-scroll-x > .xac-svg {
        flex: 0 0 auto;
    }
/* Plot wrapper only spans the visible viewport so the pinned axis sits correctly. */
.xac-plot-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.xac-yaxis {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.xac-flex {
    display: flex;
    align-items: center;
    gap: 24px;
}

.xac-flex-column {
    flex-direction: column;
}

.xac-donut-arc {
    transition: stroke-width 140ms cubic-bezier(0.2, 0, 0, 1);
    cursor: pointer;
}

.xac-pie-wedge {
    transition: transform 140ms cubic-bezier(0.2, 0, 0, 1);
    cursor: pointer;
}

/* Visually-hidden data-table fallback (screen readers) */
.xac-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}