/* The progress page: the charts, then every app's sessions. The page itself -
   dark mode, the small print - is common/page.css, shared with the overview.

   Every colour is a custom property so dark mode swaps them in
   one place below. Each bar takes its colour from --c, which its
   class sets by how hard the grade is. The period before is a thin line in the
   page ink across each bar - it has to show over every bar colour and
   over the page, and stay quieter than the bars themselves. */
.performance {
    --ink-muted: #5c5c63;
    --grid: rgba(0, 0, 0, 0.1);
    --band-easy: #2a9d4a;
    --band-medium: #eda100;
    --band-hard: #e34948;
    --band-vhard: #7b3fc4;
    --before: #2b2b30;
    width: 90%;
    max-width: var(--column);
    margin: 20px auto 30px;
    background: none;
    border-radius: 0;
}
/* Four ranges on one row, even on a narrow phone, and all four the same
   size: a flex row drops the gaps the markup's whitespace leaves between
   inline labels, and each label takes an equal share of it - up to a
   width that fits ALL TIME, so they stay buttons rather than a bar on a
   wide screen */
.range-picker {
    display: flex;
    justify-content: center;
    gap: 6px;
}
/* as specific as the shared .nice-radios rules, so these win - and the
   hidden radios out of the row, or each would add a gap of its own */
.range-picker .nice-radios {
    position: absolute;
}
.range-picker .nice-radios + label {
    flex: 1 1 0;
    box-sizing: border-box;
    max-width: 90px;
    min-width: 0;
    margin: 0 0 10px;
    padding: 8px 4px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
/* the chosen one has no border where the others have 1px, which left it
   2px narrower - a clear border evens them up */
.range-picker .nice-radios:checked + label {
    border: 1px solid transparent;
}
.performance figure {
    margin: 18px 0 26px;
}
.performance figcaption {
    font-weight: bold;
    font-size: 16px;
}
.performance .sessions-note {
    margin: 0 0 6px;
}
.chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.chart text {
    font-family: 'Hind', sans-serif;
    font-size: 11px;
    fill: var(--ink-muted);
}
.chart .count {
    fill: currentColor;
    font-weight: bold;
}
.chart .label {
    fill: currentColor;
}
.chart .grid { stroke: var(--grid); }
.chart .axis { stroke: var(--ink-muted); }
.chart .before {
    stroke: var(--before);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.75;
}
.chart .hit { fill: transparent; }
.chart .column:hover .hit { fill: var(--grid); }
.chart .bar {
    fill: var(--c);
}
.band-easy     { --c: var(--band-easy); }
.band-medium   { --c: var(--band-medium); }
.band-hard     { --c: var(--band-hard); }
.band-vhard    { --c: var(--band-vhard); }
.legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
    margin: 6px 0 0;
    font-size: 13px;
}
.legend-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.swatch {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 5px;
    border-radius: 3px;
    border: 1.5px solid var(--c);
    background: var(--c);
    box-sizing: border-box;
}
/* the line, as it looks on the chart */
.swatch.before {
    height: 2px;
    width: 14px;
    border: 0;
    border-radius: 1px;
    background: var(--before);
    opacity: 0.75;
}
.chart-empty {
    margin: 10px 0;
    padding: 24px 12px;
    font-size: 14px;
    opacity: 0.75;
    border: 1px dashed var(--grid);
    border-radius: 5px;
}
@media (prefers-color-scheme: dark) {
    .performance {
        --ink-muted: #a8a8ae;
        --grid: rgba(255, 255, 255, 0.14);
        --band-easy: #248a3c;
        --band-medium: #eda100;
        --band-hard: #e25550;
        --band-vhard: #9170e6;
        --before: #e8e8e8;
    }
}

/* Every app's log on one page. The table itself is .log-table from
   common/style.css, but an app only ever draws one inside a black overlay
   - out here it is on the page, so the stripe has to be the other way up:
   black over white, and white over black in dark mode. */
.sessions {
    width: 90%;
    max-width: var(--column);
    margin: 0 auto 40px;
    background: none;
    border-radius: 0;
}
.sessions h2 {
    margin: 0 0 6px;
    font-size: 18px;
}
.sessions .log-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.05);
}
/* The gold an earned star wears inside an app is 1.4:1 on a white page -
   on the dark panel it lives on there it is the brightest thing in the
   row. Out here it needs taking down to something that reads. */
.sessions .icon-star.active {
    color: #a97c00;
}
.log-app {
    white-space: nowrap;
}
.log-app a {
    color: #0b4fbf;
    text-decoration: none;
}
.log-app a:hover, .log-app a:focus {
    text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
    /* the stripe the log wears inside an app, now that the page behind it
       is the dark one */
    .sessions .log-table tbody tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.08);
    }
    .log-app a {
        color: #8FC2FF;
    }
    .sessions .icon-star.active {
        color: #FFD700;
    }
}