figure.chart-container {
        margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    display: flex;
    width: 92.5%;
    height: fit-content;
    flex-direction: column;
    background-color: var(--bg-component-primary-light);
    padding: var(--padding-lg);
    text-align: center;
    border: 1px solid var( --border-component-secondary-dark);    
    border-radius: var(--border-radius-xs);
    margin-inline: auto;
    justify-self: center;
}

.chart-title {
    display: flex;
    width: 100%;
    height: fit-content;
    align-items: center;
    justify-content: left;
    font-weight: var(--font-weight-bold);
  
    /* Darker text for title */
    margin-bottom: var(--margin-xl);
    line-height: 1.3;
    padding-inline: var(--padding-xl);
}

/* Container for the bars and their percentages */
.chart-bars-area {
    display: flex;
    align-items: flex-end;
    /* Align bars to the bottom of this container */
    justify-content: space-around;
    width: 100%;
    height: 100%;
    /* Set a specific max height for visual consistency */
    padding-bottom:var(--padding-xs);
    /* Small gap between bar bottom and X-axis line */
    /* This padding-bottom will be overridden by the x-axis-line's positioning */
    z-index: 2;
    /* Ensure bars are above the x-axis line */
    position: relative;
    /* To correctly stack with the line */
    flex-wrap: nowrap;
    border-radius: var(--border-radius-xs);
}

.bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* For positioning percentage */
    width: 20%;
    /* Fixed width for each bar item */
    text-align: center;
    gap: var(--spacing-sm);
    /* Small gap between percentage and bar (flexbox default) */
    justify-content: flex-end;
    /* Pushes percentage and bar to the bottom of its allocated space */
}

.percentage {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    /* No absolute positioning needed here, flexbox handles it */
}

.teal-text {
    color: #2287A5;
    /* Dark teal for percentage text */
}

.orange-text {
    color: #72537F;
    /* Orange for percentage text */
}

.bar {
    width: 58.03%;
    flex-shrink: 0;
    /* Prevent bars from shrinking */
    /* Margin-top for percentage now handled by gap on .bar-item. If using fixed top position, re-add. */
    /* The height attribute is set inline in the HTML */
}

.a-bar {
    background-color: #2287A5;
    /* Dark teal bar color */
}

.b-bar {
    background-color: #F4C865;
    /* Orange bar color */
}

.c-bar {
    background-color: #72537F;
    /* Dark teal bar color */
}

.d-bar {
    background-color: #A0D86B;
    /* Orange bar color */
}

.e-bar {
    background-color: #C84937;
    /* Orange bar color */
}

/* The X-axis line */
.x-axis-line {
    width: 100%;
    /* Span the width of the bars area, accounting for chart-container padding */
    height: 2px;
    background-color: #333;
    /* Light grey line */
    margin: 0 auto;
    /* Center the line horizontally */
    position: relative;
    /* To be positioned relative to its normal flow below chart-bars-area */
    top: -2px;
    /* Nudge it up slightly to sit just below the bars, visually integrating */
    z-index: 1;
    /* Ensure it's between bars and labels */
}

/* Container for the labels below the X-axis */
.x-axis-labels-area {
    display: flex;
    align-items: flex-start;
    /* Align bars to the bottom of this container */
    justify-content: space-around;
    width: 100%;
    height: fit-content;
    padding-bottom:var(--padding-s);
    /* Small gap between bar bottom and X-axis line */
    /* This padding-bottom will be overridden by the x-axis-line's positioning */
    z-index: 2;
    /* Ensure bars are above the x-axis line */
    position: relative;
    /* To correctly stack with the line */

}

.label {
    font-size: var(--font-size-xxs);
  
    line-height: 1.3;
    font-weight: var(--font-weight-medium);
    flex-shrink: 0;
    /* Prevent shrinking */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* For positioning percentage */
    width: 16%;
    /* Fixed width for each bar item */
    text-align: center;
    gap: var(--spacing-sm);
    /* Small gap between percentage and bar (flexbox default) */
    justify-content: flex-end;
    /* Pushes percentage and bar to the bottom of its allocated space */
 color: var(--text-title-primary-dark);

}

.legend-color {
    /* Hide on desktop */
    display: none;

    /* Base size for the colored square */
    width: 10px;
    height: 10px;
    margin-right: 8px;
    /* Space between color block and text */
    flex-shrink: 0;
    /* Prevents it from shrinking */
    border-radius: 2px;
}

/* Map the bar colors to the new legend class colors */
.a-color {
    background-color: #2287A5;
}

/* Matches .a-bar */
.b-color {
    background-color: #F4C865;
}

/* Matches .b-bar */
.c-color {
    background-color: #72537F;
}

/* Matches .c-bar */
.d-color {
    background-color: #A0D86B;
}

/* Matches .d-bar */
.e-color {
    background-color: #C84937;
}

/* Matches .e-bar */

/* Container for the labels below the X-axis */
.chart_analysis {
    display: flex;
    width: 100%;
    height: fit-content;
    align-items: center;
    justify-content: left;
    padding: var(  --padding-lg);
    flex-direction: column;
    border-radius: var(--border-radius-xs);
    background-color: var(--bg-component-secondary-light);
    margin-top:var(  --padding-base);
    border: 1px solid var( --border-component-secondary-dark);
}


.chart_analysis p {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column; 
    text-align: start;
}



@media (max-width: 768px) {

    figure.chart-container {
          width: 100%;}
          
.chart-title {
    width: 100%;
    padding-inline: 0;
}
}

@media print {
    .bar, .legend-color, .chart-container, .chart_analysis {
        -webkit-print-color-adjust: exact !important; /* For Chrome, Safari, Edge */
        print-color-adjust: exact !important;         /* Standard property */
    }

    .chart-container {   
        background-color: var(--white);    
        break-inside: avoid;
        
    }
    
}