/* The Progress pages (js/progress.js): this week's figure, the one chart and History. The primary and the quiet
   secondary under the chart are the shared .menu-actions (app.css). */

/* This week: the minutes with their caption close under them, then the streak. */
.week { display: grid; gap: 12px; }
.figure { display: grid; gap: 6px; }

/* The chart: its title, then the drawing. */
.chart { display: grid; gap: 12px; align-content: start; min-width: 0; }
.chart-title { margin: 0; font-weight: 600; }

/* A line over the answers or readings: the drawing is stretched to the width (the line keeps its width), and round
   dots are laid over it, placed in percent. */
.chart-plot { position: relative; height: 144px; }
.chart-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart-plot polyline { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-plot .base { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--red); }

/* Speaking time each day: 7 bars under a line at a whole number of minutes, today's in red, a day without speaking a
   short grey mark. */
.bars-box { display: grid; gap: 6px; }
.bars-scale { justify-self: end; }
.bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--line); }
.bar-col { display: grid; gap: 6px; justify-items: center; min-width: 0; }
.bar-track { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 144px; }
.bar { display: block; width: 100%; max-width: 36px; min-height: 4px; border-radius: 6px; background: var(--pink-300); }
.bar.zero { background: var(--line); }
.bar-col.today .bar { background: var(--red); }
.bar-col.today .bar.zero { background: var(--line); }
.bar-col.today .bar-day { color: var(--ink); font-weight: 600; }

/* History: two lines at most for a sentence read aloud, and the heading that takes the focus after a delete shows no
   ring (it is no control). */
.history .list-row { padding-block: 12px; }
.history .list-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.history-head h1:focus { outline: none; }
.foot-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* 'Delete all my recordings' sits on the page's grey, so its pill is white (grey under the pointer). */
.foot-actions > .btn.plain { background: var(--card); }
@media (hover: hover) { .foot-actions > .btn.plain:hover { background: var(--bg-hover); } }