/* components-charts.css — CSS-only charts (bar chart, maturity bar, progress ring; spec §3.12).
   Owner: Phase 7 (stats). Created empty in Phase 4a so the <link> and SW precache exist up front.
   Dynamic values arrive as data-v / data-pct and are applied with js/css-vars.js (--v / --pct). */

/* ---------- Bar charts (forecast, reviews per day) ---------- */
.bar-max {
    font-size: var(--fs-xs);
    color: var(--text-3);
    margin-bottom: var(--space-2);
}

.bar-chart {
    --chart-h: 160px;
}

.bar-cols {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: var(--chart-h);
    border-bottom: 1px solid var(--chart-grid);
    background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), var(--chart-grid) calc(25% - 1px), var(--chart-grid) 25%);
}

.bar-col {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 4px 4px 0 0;
}

.bar-col:hover { background: var(--surface-2); }

.bar {
    height: calc(var(--v, 0) * 100%);
    min-height: 0;
    background: var(--chart-1);
    border-radius: 4px 4px 0 0;
}

.bar-col.is-today .bar { background: var(--gradient-brand); }

/* Stacked reviews: remembered at the bottom, forgotten on top (both heights are shares of the tallest day) */
.bar-seg {
    height: calc(var(--v, 0) * 100%);
    flex: none;
}

.seg-pass { background: var(--chart-1); }
/* hairline below the red segment: stacked chart colours are < 3:1 apart, so they need a separator */
.seg-again { background: var(--rate-again); border-radius: 4px 4px 0 0; box-shadow: inset 0 -1px 0 var(--surface-1); } /* inset: invisible when the segment is 0 high */
.bar-col.is-today .seg-pass { background: var(--brand-1); }

.bar-axis {
    display: flex;
    gap: 3px;
    margin-top: var(--space-1);
}

.bar-axis > * {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    height: 1.2em;
}

.bar-axis-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--fs-xs);
    color: var(--text-3);
    white-space: nowrap;
}

/* ---------- Legends / swatches ---------- */
.chart-legend, .maturity-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--text-2);
}

.chart-legend li, .maturity-legend li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.legend-share { color: var(--text-3); }
.legend-label { color: var(--text-2); }
.maturity-legend strong { color: var(--text-1); font-variant-numeric: tabular-nums; }

.swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex: none;
    display: inline-block;
}

/* ---------- Maturity bar ---------- */
.maturity-bar {
    display: flex;
    gap: 2px;
    width: 100%;
    height: 16px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--surface-3);
}

.maturity-seg {
    flex: var(--v, 0) 1 0;
    min-width: 0;
}

.mat-new { background: var(--state-new); }
.mat-learning { background: var(--state-learning); }
.mat-young { background: var(--state-young); }
.mat-mature { background: var(--state-review); }
.mat-suspended { background: var(--state-suspended); }

/* ---------- Accessible data-table alternative ---------- */
.chart-table {
    margin-top: var(--space-3);
    font-size: var(--fs-sm);
}

.chart-table > summary {
    cursor: pointer;
    color: var(--text-brand);
    font-weight: var(--fw-semibold);
    padding: var(--space-1) 0;
    width: fit-content;
}

.chart-table-scroll {
    max-height: 280px;
    overflow: auto;
    margin-top: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.chart-table table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.chart-table caption {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    color: var(--text-3);
}

.chart-table th, .chart-table td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    border-top: 1px solid var(--border);
}

.chart-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface-2);
    color: var(--text-1);
}

.chart-table tbody th { font-weight: var(--fw-medium); color: var(--text-1); }
.chart-table td { color: var(--text-2); }

@media (max-width: 767px) {
    .bar-cols, .bar-axis { gap: 2px; }
    .bar-chart { --chart-h: 132px; }
}