.card {
    background: #fff;
    border-radius: 16px;
    border: 0.5px solid #e8e8e8;
    padding: 24px 28px 20px;
    max-width: 60%;
    margin: 0 auto
}

.top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    /* Keep the title/total header clear of the chart + its outer labels so
       they never overlap the graph. */
    position: relative;
    z-index: 4;
}

.title {
    color: #000;
    font-weight: 700;
    font-size: 28px;
    line-height: 1
}

.subtitle {
    margin-top: 4px;
    font-weight: 600;
    font-size: 15px;
    color: #B62947
}

.total-label {
    font-size: 12px;
    color: #555;
    text-align: right
}

.total-val {
    font-size: 18px;
    font-weight: 700;
    color: #c0003c;
    text-align: right
}

.chart-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    /* Push the donut (and its top outer labels) down so they clear the
       title/header row above. */
    margin-top: 18px;
}

.canvas-wrap {
    position: relative;
    /* Size the donut to FILL the card's free height so it isn't lost in a sea of
       white space, capped three ways so it never overflows or hides the legend:
         • 600px        — hard maximum
         • 100svh-420px — the vertical room left after header + legend + margins,
                          PLUS a ~75px bottom safety gap so the legend never sits
                          under an auto-hide OS taskbar that pops up over a
                          maximized window (svh can't see the taskbar)
         • 60vw-220px   — the horizontal room inside the 60%-wide card (minus the
                          side gutters that hold the outer slice labels)
       The smallest wins, keeping the donut square and always fully visible. */
    width: min(600px, calc(100svh - 420px), calc(60vw - 220px));
    height: min(600px, calc(100svh - 420px), calc(60vw - 220px));
    margin: 16px 100px; /* side gutters leave room for the absolute slice labels */
}

@media (min-width: 1600px) {
    .canvas-wrap {
        margin: 16px 150px;
    }
}

#arbCanvas {
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.other-callout {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 3;
    transition: opacity 0.2s ease;
}

.total-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.info-block {
    /* The selected category is shown right here, under the Total Disbursed
       header — icon on the left, amount + name on the right. Toggled with
       opacity (space stays reserved) so the donut never jumps. */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 16px;
    min-height: 56px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.info-block.show {
    opacity: 1;
}

.info-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.info-icon svg {
    width: 46px;
    height: 56px;
    display: block;
}

.info-text {
    text-align: left;
}

/* When no icon is shown (every sector except "Other Services"), the amount and
   name sit flush-right under the Total Disbursed header. */
.info-block.no-icon .info-text {
    text-align: right;
}

.info-amount {
    font-size: 30px;
    font-weight: 800;
    color: #111;
    line-height: 1.05
}

.info-name {
    font-size: 15px;
    font-weight: 600;
    color: #555;
    margin-top: 2px
}

.legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    /* padding-top: 14px; */
    border-top: 0.5px solid #eee
}

.leg-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: opacity .2s
}

.leg-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transition: transform .15s;
    background: currentColor;
    border: 7px solid currentColor;
}

.leg-item.active .leg-dot {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}

.leg-label {
    font-size: 10px;
    color: #888;
    text-align: center;
    line-height: 1.3;
    white-space: pre
}

.leg-item.active .leg-label {
    color: #222;
    font-weight: 600
}

.chart_container {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 96px;
    transform: translate(-50%);
    /* Safety net for any wide-but-short viewport / zoom combo: never clip the
       card. If the donut + legend are taller than the space below the header,
       scroll inside the card instead of hiding the legend. (data-scroll is
       already set, so the overlay's wheel handler scrolls this first.) */
    max-height: calc(100svh - 96px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.chart_container::-webkit-scrollbar { display: none; }