/*
Minimal layout rules for donut charts and their legend. The container uses
flexbox so the canvas and legend stay centered and adapt to any screen size.
Legend items sit below the chart in a responsive grid without media queries.
The container becomes transparent on /show pages. By avoiding breakpoints the
same CSS works for tiny iframes and large screens alike. On `/show` pages the
chart container fills the viewport and the JavaScript dynamically sizes the
canvas so the entire content (chart + legend + note) remains visible without
scrolling.
*/

.chart-container {
    background: #ffffff;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    flex: 1 1 300px;
    overflow: visible;
}

.show-page .chart-container {
    background: transparent;
    padding: 0;
    box-shadow: none;
    max-width: 100%;
    min-height: 100vh;
    margin: 0;
    justify-content: safe center;
    overflow-y: auto;
    overflow-x: hidden;
}

.chart-container canvas {
    display: block;
    margin: 0 auto;
}

.chart-legend { 
    margin-top: 12px; 
    width: 100%;
    flex-shrink: 0;
}
.chart-legend ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0px 16px;
}
.chart-legend li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.legend-circle { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.legend-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.legend-label {
    flex: 1;
    word-break: break-word;
    text-align: left;
}
.legend-percentage {
    font-size: 12px;
    color: #64748b;
    text-align: right;
}

.chart-note { 
    margin-top: 8px; 
    font-size: 12px; 
    color: #64748b; 
    text-align: center;
    flex-shrink: 0;
}