/* Progress page: one period control, the core stat tiles, one chart with its
   insights, the medals that moved and the breakdown. Mobile first. */

.progress-overview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.progress-overview[aria-busy="true"] .progress-tiles,
.progress-overview[aria-busy="true"] .progress-chart-card {
    opacity: .6;
    transition: opacity .15s;
}

/* The period name lives in its own row below the period choices. */
.progress-overview .header-actions {
    margin-left: auto;
}

/* The period control is a segmented control (components/segmented.css),
   a little tighter so it fits a phone; a narrow one swipes it without a
   scrollbar. */
.progress-period {
    gap: .3rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.progress-period::-webkit-scrollbar {
    display: none;
}

.progress-period .segmented__option {
    padding: 0 .5rem;
}

.progress-period__calendar {
    flex: none;
    width: 40px;
}

.progress-period__custom {
    display: flex;
    position: relative;
}

.progress-period__custom-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* The view switcher: below the title on a phone, beside the actions from 701px. */
.progress-overview .section-header {
    flex-wrap: wrap;
}

.progress-view {
    flex-basis: 100%;
    order: 2;
}

.progress-view__option {
    gap: .4rem;
}

.progress-view__option svg {
    flex: none;
}

/* Choices in the options menu, such as the stat marker. */
.progress-options__choices .segmented__option {
    min-height: 36px;
}

/* Detailed: tiles, charts, insights and medals, spaced as the page. */
.progress-detailed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Simple: the stat differences as on the share card, then the medals. The
   marker sets the text size, the layout how much larger the change is, so the
   change keeps its proportion to the name beside it. */
.progress-simple,
.progress-simple__medals,
.progress-share__card {
    --simple-text: .8rem;
    --simple-ratio: 1.2;
}

.progress-simple--boxes,
.progress-simple__medals--boxes {
    --simple-ratio: 1.3;
}

/* Beside a medal image the name is larger, and in a list the change with it;
   in boxes the change keeps the stats' size, so the boxes line up. */
.progress-simple__medals--marker-medal {
    --simple-text: .88rem;
}

.progress-simple__medals--boxes {
    --simple-delta-text: .8rem;
}

/* One card, as on the share card: the stats, then the medals under a divider. */
.progress-simple {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.progress-simple__stats {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.progress-simple__rows {
    display: flex;
    flex-direction: column;
}

/* In a list the first and last rows' padding would add to the card's own
   spacing; pulling it back keeps the space to the divider and the bottom as
   in Boxes. */
.progress-simple--list .progress-simple__rows {
    margin-block: -.7rem;
}

.progress-simple__medals--list .progress-medals__list {
    margin-block: -.6rem;
}

.progress-simple__row {
    --marker-size: 12px;
    display: grid;
    grid-template-columns: var(--marker-size) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: .65rem;
    row-gap: .1rem;
    min-width: 0;
    padding: .7rem 0;
}

.progress-simple__row + .progress-simple__row {
    border-top: 1px solid var(--border);
}

.progress-simple--icon .progress-simple__row {
    --marker-size: 30px;
}

/* No marker: the label and its line take the first column. */
.progress-simple--none .progress-simple__row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.progress-simple--none :is(.progress-simple__label, .progress-simple__journey) {
    grid-column: 1;
}

.progress-simple--none .progress-simple__delta {
    grid-column: 2;
}

/* Boxes: each stat in its own block, as on the share card. */
.progress-simple--boxes .progress-simple__rows {
    gap: .45rem;
}

.progress-simple--boxes .progress-simple__row {
    padding: .65rem .75rem;
    background: color-mix(in srgb, var(--surface-2) 42%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 8px;
}

.progress-simple__marker {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--marker-size);
    height: var(--marker-size);
}

/* In Boxes the icon has the thin border of the original summary card; a list stays lighter without it. */
.progress-simple--icon.progress-simple--boxes .progress-simple__marker {
    border: 1px solid color-mix(in srgb, var(--metric-color) 18%, var(--border));
}

.progress-simple--dot .progress-simple__marker {
    border-radius: 50%;
    background: var(--metric-color);
}

.progress-simple--icon .progress-simple__marker {
    border-radius: 8px;
    color: var(--metric-color);
    background: color-mix(in srgb, var(--metric-color) 9%, transparent);
}

.progress-simple__label,
.progress-simple__journey {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-simple__label {
    font-size: var(--simple-text);
    font-weight: 600;
    color: color-mix(in srgb, var(--text) 74%, var(--text-muted));
}

.progress-simple__since {
    margin-left: .4rem;
    font-weight: 400;
    color: var(--text-muted);
}

.progress-simple__journey {
    font-size: .74rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* As on the original summary card: the current value bold in the journey's colour. */
.progress-simple__journey strong {
    color: inherit;
    font-weight: 700;
}

.progress-simple__delta {
    grid-column: 3;
    grid-row: 1 / span 2;
    font-size: calc(var(--simple-delta-text, var(--simple-text)) * var(--simple-ratio));
    font-weight: 700;
    color: var(--metric-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.progress-simple--delta-neutral .progress-simple__delta {
    color: var(--text);
}

.progress-simple--delta-green .progress-simple__delta {
    color: var(--green);
}

.progress-simple__row--current .progress-simple__journey strong {
    color: var(--text);
}

.progress-simple__medals {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Simple view medals: a dot in the tier colour instead of the image. */
.progress-medal__dot {
    justify-self: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--tier-color, var(--text-muted));
}

.progress-medal--tier-bronze { --tier-color: var(--tier-bronze); --tier-text: var(--tier-bronze); }
.progress-medal--tier-silver { --tier-color: var(--tier-silver); --tier-text: var(--tier-silver-text); }
.progress-medal--tier-gold { --tier-color: var(--tier-gold); --tier-text: var(--tier-gold); }
.progress-medal--tier-platinum { --tier-color: var(--tier-platinum); --tier-text: var(--tier-platinum); }

/* The medals' change: green by default, or the tier colour or neutral. */
.progress-simple__medals--delta-own .progress-medal__delta {
    color: var(--tier-text, var(--text-muted));
}

.progress-simple__medals--delta-neutral .progress-medal__delta {
    color: var(--text);
}

.progress-simple__medals--marker-dot .progress-medal {
    grid-template-columns: 12px minmax(0, 1fr) auto;
}

.progress-simple__medals .progress-medal__name {
    font-size: var(--simple-text);
}

.progress-simple__medals .progress-medal__delta {
    font-size: calc(var(--simple-delta-text, var(--simple-text)) * var(--simple-ratio));
}

/* Without the image, the medals take the stats' line size too. */
.progress-simple__medals:is(.progress-simple__medals--marker-dot, .progress-simple__medals--marker-none) .progress-medal__journey {
    font-size: .74rem;
}

.progress-simple__medals--marker-none .progress-medal {
    grid-template-columns: minmax(0, 1fr) auto;
}

/* Boxes: each medal in its own block, as the stats can be. */
.progress-simple__medals--boxes .progress-medals__list {
    display: grid;
    gap: .45rem;
}

.progress-simple__medals--boxes .progress-medal {
    padding: .6rem .75rem;
    background: color-mix(in srgb, var(--surface-2) 42%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 8px;
}

/* Compact: small tiles in two columns, with the change under the name and no start and current values. */
.progress-simple__medals--compact {
    --simple-text: .76rem;
    --simple-delta-text: .76rem;
}

.progress-simple__medals--compact .progress-medals__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
}

.progress-simple__medals--compact .progress-medal-group {
    gap: .4rem;
}

.progress-simple__medals--compact .progress-medal {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .5rem;
    row-gap: 0;
    padding: .4rem .5rem;
    background: color-mix(in srgb, var(--surface-2) 42%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 8px;
}

.progress-simple__medals--compact.progress-simple__medals--marker-none .progress-medal {
    grid-template-columns: minmax(0, 1fr);
}

.progress-simple__medals--compact .progress-medal__image {
    grid-row: span 2;
    width: 28px;
    height: 28px;
}

.progress-simple__medals--compact .progress-medal__dot {
    grid-row: span 2;
}

.progress-simple__medals--compact .progress-medal__journey {
    display: none;
}

.progress-simple__medals--compact .progress-medal__delta {
    grid-column: -2;
}

/* Tiles: the delta per core stat; picking one picks the chart's metric. */
.progress-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.progress-tile {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
    padding: .8rem .85rem;
    text-align: left;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.progress-tile[aria-pressed="true"] {
    border-color: var(--metric-color);
    background: color-mix(in srgb, var(--metric-color) 7%, var(--surface));
}

.progress-tile__label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .74rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.progress-tile__dot {
    flex: none;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--metric-color);
}

.progress-tile__delta {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--metric-color);
    white-space: nowrap;
}

.progress-tile__pace,
.progress-tile__journey,
.progress-tile__since {
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-tile__journey,
.progress-tile__since {
    color: var(--text-muted);
}

/* Large totals wrap at the arrow rather than being cut off; each number stays whole. */
.progress-tile__journey {
    white-space: normal;
    overflow: visible;
}

.progress-tile__journey span,
.progress-tile__journey b {
    white-space: nowrap;
}

.progress-tile__journey b {
    color: var(--text);
    font-weight: 650;
}

/* The period against the earlier average: the mark is that average, a full bar twice it. */
.progress-tile__bar {
    position: relative;
    display: block;
    height: 6px;
    margin: .2rem 0;
    border-radius: 3px;
    background: var(--surface-2);
}

.progress-tile__bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 3px;
    background: var(--metric-color);
}

.progress-tile__bar-mark {
    position: absolute;
    left: 50%;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--text);
    opacity: .7;
}

.progress-tile--stale .progress-tile__delta {
    color: var(--text-muted);
}

/* Chart card. */
.progress-chart-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.progress-chart-card__head {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.progress-chart-card__title {
    font-size: 1rem;
    font-weight: 700;
}

.progress-chart-card__subtitle {
    font-size: .78rem;
    color: var(--text-muted);
}

.progress-chart {
    --progress-chart-headroom: 8px;
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 170px;
    padding-top: var(--progress-chart-headroom);
}

.progress-overview__charts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.progress-chart--total {
    height: 110px;
}

.progress-chart-card[hidden] {
    display: none;
}

.progress-chart__column {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.progress-chart__bar {
    width: 100%;
    border-radius: 3px 3px 0 0;
    background: var(--metric-color);
}

.progress-chart__bar--context {
    background: color-mix(in srgb, var(--metric-color) 35%, transparent);
}

.progress-chart__bar--spread,
.progress-chart__key--spread {
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--metric-color) 45%, transparent) 0 3px, color-mix(in srgb, var(--metric-color) 18%, transparent) 3px 6px);
}

/* Best day: that bar in full colour with its value, the others softer. */
.progress-chart--best .progress-chart__bar--measured:not(.progress-chart__bar--best) {
    opacity: .55;
}

.progress-chart__bar--best {
    position: relative;
}

.progress-chart__best {
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 5px;
    border-radius: 6px;
    background: var(--metric-color);
    color: var(--bg);
    font-size: .66rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
}

.progress-chart__average {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 2px dashed var(--text);
    opacity: .55;
    pointer-events: none;
}

/* Total mode: the SVG stretches to the box; dots and labels sit over it. */
.progress-chart__plot {
    position: relative;
    width: 100%;
    height: 100%;
    touch-action: pan-y;
}

.progress-chart__total {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.progress-chart__fill-top {
    stop-color: var(--metric-color);
    stop-opacity: .38;
}

.progress-chart__fill-bottom {
    stop-color: var(--metric-color);
    stop-opacity: 0;
}

.progress-chart__line {
    fill: none;
    stroke: var(--metric-color);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.progress-chart__line--gap {
    stroke-dasharray: 3 4;
}

.progress-chart__pace {
    fill: none;
    stroke: var(--text);
    stroke-opacity: .55;
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}

.progress-chart__point,
.progress-chart__end,
.progress-chart__cursor-dot {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.progress-chart__point {
    width: 6px;
    height: 6px;
    background: var(--surface);
    border: 1.5px solid var(--metric-color);
}

.progress-chart__end {
    width: 10px;
    height: 10px;
    background: var(--metric-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--metric-color) 22%, transparent);
}

.progress-chart__value {
    position: absolute;
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}

.progress-chart__value--start {
    transform: translateY(-160%);
    color: var(--text-muted);
}

.progress-chart__value--end {
    right: 0;
    transform: translateY(-190%);
    font-size: .82rem;
    font-weight: 700;
}

.progress-chart__value--running {
    right: auto;
    transform: translate(10px, -50%);
}

.progress-chart__cursor {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--text);
    opacity: .35;
    pointer-events: none;
}

.progress-chart__cursor-dot {
    width: 10px;
    height: 10px;
    background: var(--metric-color);
    border: 2px solid var(--surface);
}

.progress-chart__tip {
    position: absolute;
    top: -.5rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    margin-left: .5rem;
    padding: .35rem .5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}

.progress-chart__tip[hidden] {
    display: none;
}

.progress-chart__tip--end {
    margin-left: -.5rem;
    transform: translateX(-100%);
}

.progress-chart__tip-title {
    color: var(--text-muted);
}

/* Display options, in the page header next to the period name. */
.progress-options {
    position: relative;
    flex: none;
}

/* Actions, shaped like an unchosen segmented option; only an open menu takes
   the chosen look (components/segmented.css). */
.progress-share__button,
.progress-options__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.progress-share__button:hover,
.progress-options__button:hover {
    color: var(--text);
}

.progress-options__button[aria-expanded="true"] {
    background: var(--surface-2);
    border-color: var(--border-chosen);
    color: var(--text);
}

.progress-options__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: min(22rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 12rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.progress-options__menu[hidden] {
    display: none;
}

.progress-options__section {
    margin: 0;
    padding: .25rem 0 .35rem;
    border: 0;
}

.progress-options__section + .progress-options__section {
    border-top: 1px solid var(--border);
}

.progress-options__title {
    padding: .5rem .5rem .15rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.progress-options__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    padding: .4rem .5rem;
    border-radius: 7px;
    font-size: .875rem;
    cursor: pointer;
}

.progress-options__item:hover {
    background: var(--surface-2);
}

.progress-options__item--select {
    align-items: stretch;
    flex-direction: column;
    cursor: default;
}

.progress-options__hint {
    display: block;
    margin-top: .2rem;
    color: var(--text-muted);
    font-size: .75rem;
    line-height: 1.4;
}

.progress-options__tabs {
    padding: .25rem .25rem .5rem;
}

.progress-options__hint--section {
    margin-top: 0;
    padding-inline: .5rem;
}

.progress-options__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.progress-options__item input {
    accent-color: var(--accent);
}

.progress-options__select {
    width: auto;
    flex: none;
}

.progress-chart__axis {
    display: flex;
    gap: 4px;
}

.progress-chart__axis span {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: .66rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.progress-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
}

.progress-chart__legend:empty {
    display: none;
}

.progress-chart__legend-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .74rem;
    color: var(--text-muted);
}

.progress-chart__key {
    flex: none;
    width: .9rem;
    height: .6rem;
    border-radius: 2px;
}

.progress-chart__key--gap,
.progress-chart__key--pace {
    height: 0;
    border-top: 2px dotted var(--text-muted);
}

.progress-chart__key--pace {
    border-top-style: dashed;
    border-top-color: var(--text);
    opacity: .55;
}

.progress-chart__key--average {
    height: 0;
    border-top: 2px dashed var(--text);
    opacity: .55;
}

/* Insights under the chart. */
/* Insights about the period, shared by both charts. */
.progress-insights {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.progress-insights:empty {
    display: none;
}

.progress-insights__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .6rem 0;
}

.progress-insights__row + .progress-insights__row {
    border-top: 1px solid var(--border);
}

.progress-insights dt {
    font-size: .78rem;
    color: var(--text-muted);
}

.progress-insights dd {
    font-size: .88rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.progress-insights__value--up {
    color: var(--green);
}

.progress-insights__value--down {
    color: var(--red);
}

/* Medals that moved in the period. */
.progress-medals {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.progress-medals__list {
    list-style: none;
}

/* Medals of several categories: one list per category under a small label. */
.progress-medals__groups {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.progress-medal-group {
    display: flex;
    flex-direction: column;
}

.progress-medal-group__title {
    margin: 0;
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* The list's pull-back would run into the label above it. */
.progress-simple__medals--list .progress-medal-group .progress-medals__list {
    margin-block: 0 -.6rem;
}

.progress-simple__medals--boxes .progress-medal-group {
    gap: .45rem;
}

.progress-medal {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .6rem 0;
}

.progress-medal + .progress-medal {
    border-top: 1px solid var(--border);
}

.progress-medal__image {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.progress-medal__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.progress-medal__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    font-size: .88rem;
    font-weight: 650;
}

.progress-medal__tier {
    padding: 0 .35rem;
    border: 1px solid currentColor;
    border-radius: .3rem;
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.progress-medal__tier--bronze { color: var(--tier-bronze); }
.progress-medal__tier--silver { color: var(--tier-silver-text); }
.progress-medal__tier--gold { color: var(--tier-gold); }
.progress-medal__tier--platinum { color: var(--tier-platinum); }

.progress-medal__journey {
    font-size: .76rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* The current value bold, as on the stats. */
.progress-medal__journey strong {
    color: inherit;
    font-weight: 700;
}

.progress-medal__delta {
    font-size: .88rem;
    font-weight: 700;
    color: var(--green);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Breakdown table. */
.progress-table {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.progress-table__title {
    font-size: 1rem;
    font-weight: 700;
}

.progress-table .table-scroll {
    position: relative;
}

.progress-table__table th[scope],
.progress-table__table tbody th {
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.progress-table__row--muted {
    color: var(--text-muted);
}

/* Phones show the short column headings; the full ones stay for screen readers. */
.progress-table__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.progress-overview .section-header {
    align-items: center;
}

.is-nav-page .progress-overview .page-title {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.progress-overview .header-actions {
    flex-shrink: 0;
}

@media (min-width: 701px) {
    .progress-view {
        flex-basis: auto;
        order: 1;
        margin-left: auto;
    }

    .progress-overview .section-header .header-actions {
        order: 2;
        margin-left: 0;
    }

    /* Two columns on the page; the share card keeps one, so the image stays readable. */
    .progress-simple .progress-simple__rows {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.5rem;
    }

    .progress-simple.progress-simple--boxes .progress-simple__rows {
        column-gap: .45rem;
    }

    /* In a list the divider runs between the rows of each column. */
    .progress-simple.progress-simple--list .progress-simple__row + .progress-simple__row {
        border-top: 0;
    }

    .progress-simple.progress-simple--list .progress-simple__row:nth-child(n + 3) {
        border-top: 1px solid var(--border);
    }

    .progress-simple,
    .progress-simple .progress-simple__medals {
        --simple-ratio: 1.3;
    }

    .progress-simple.progress-simple--boxes,
    .progress-simple .progress-simple__medals--boxes {
        --simple-ratio: 1.5;
    }

    .progress-simple .progress-simple__medals .progress-medals__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .progress-simple .progress-simple__medals--list .progress-medals__list {
        column-gap: 2.5rem;
    }

    .progress-simple .progress-simple__medals--list .progress-medal + .progress-medal {
        border-top: 0;
    }

    .progress-simple .progress-simple__medals--list .progress-medal:nth-child(n + 3) {
        border-top: 1px solid var(--border);
    }

    .progress-table__label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
    }

    .progress-table__short {
        display: none;
    }

    /* Equal metric columns, so a short Total XP column does not skew the table. */
    .progress-table__table {
        table-layout: fixed;
    }

    .progress-table__table thead th:first-child {
        width: 14rem;
    }

    .progress-tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .progress-tile__delta {
        font-size: 1.4rem;
    }

    .progress-chart {
        height: 220px;
    }
}

@media (min-width: 901px) {
    /* Both charts side by side at the same height; Today has the first alone. */
    .progress-overview__charts:has(> .progress-chart-card:not([hidden]) + .progress-chart-card:not([hidden])) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The period sits top right, beside the chart's title. */
    .progress-chart-card__head {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
    }

    .progress-chart-card__subtitle {
        text-align: right;
    }

    /* Side by side, both charts take the same height, whatever their own
       default (the total chart is lower on a phone). */
    .progress-overview__charts .progress-chart {
        height: 190px;
    }

    /* The insights side by side, each label above its value. */
    .progress-insights {
        flex-direction: row;
        padding: 0;
    }

    .progress-insights__row {
        flex: 1;
        flex-direction: column;
        justify-content: flex-start;
        gap: .2rem;
        padding: .8rem 1rem;
    }

    .progress-insights__row + .progress-insights__row {
        border-top: 0;
        border-left: 1px solid var(--border);
    }

    .progress-insights dd {
        font-size: 1rem;
        text-align: left;
    }
}