/* ---------- Button ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--touch-target);
    padding: 10px 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    background: none;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: var(--tracking-normal);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* Motion is only added for people who haven't asked their system for less of it */
@media (prefers-reduced-motion: no-preference) {
    .btn {
        transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition-medium);
    }

    .btn:not(:disabled):active {
        transform: scale(0.985);
    }
}

.btn .icon {
    width: 14px;
    height: 14px;
}

.btn--primary {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn--ghost {
    color: var(--color-text-muted);
    border-color: var(--color-border-subtle);
}

.btn--danger {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn--sm {
    padding: 0 14px;
    font-size: 12px;
}

.btn--lg {
    min-height: 52px;
    padding: 12px 26px;
    font-size: 15px;
}

.btn--full {
    width: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
}

/* Hover only on devices with a real pointer, otherwise a tapped button stays filled on a phone */
@media (hover: hover) {
    .btn--primary:hover {
        background: var(--color-accent-fill);
        color: var(--color-on-accent-fill);
    }

    .btn--ghost:hover {
        color: var(--color-text);
        border-color: var(--color-text-muted);
    }

    .btn--danger:hover {
        background: var(--color-danger);
        color: var(--color-on-accent);
    }
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-row .btn {
    flex: 1;
}

/* Icon-only button: always paired with an aria-label, since it has no visible text */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target);
    height: var(--touch-target);
    border: 0;
    border-radius: var(--radius-btn);
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
}

.icon-btn .icon {
    width: 18px;
    height: 18px;
}

@media (hover: hover) {
    .icon-btn:hover {
        background: var(--color-surface-raised);
        color: var(--color-text);
    }
}

/* ---------- Text links ---------- */

.link-strong {
    display: inline-flex;
    align-items: center;
    padding: 12px 0;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: var(--tracking-normal);
    text-transform: uppercase;
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
}

.text-btn--danger {
    color: var(--color-danger);
}

.text-btn {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

@media (hover: hover) {
    .text-btn:hover {
        color: var(--color-text);
    }
}

/* ---------- Page header ---------- */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}

.page-header__text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.page-header__eyebrow {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-accent);
}

.page-header__title {
    font-family: var(--font-display);
    font-size: clamp(36px, 6vw, 60px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    text-wrap: balance;
}

.page-header__desc {
    max-width: 560px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-text-muted);
}

/* The phone designs drop the rule under the header, the page starts straight on the content */
@media (max-width: 767px) {
    .page-header {
        padding-bottom: 0;
        border-bottom: 0;
    }
}

.page-header__desc p {
    margin: 0;
}

.page-header__search {
    width: 100%;
}

@media (min-width: 768px) {
    .page-header__search {
        width: 420px;
    }
}

/* Wraps on a phone, the workout page has Save, Copy and Start and three never fit on one line at 390px */
.page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* On a phone the main button gets its own full row, wrapped on its own it sat half as wide under the smaller ones */
@media (max-width: 767px) {
    .page-header__actions > .btn--primary {
        flex: 1 1 100%;
    }
}

/* ---------- Section heading ---------- */

/* Sits above the card it names, never inside it */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.section-head__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: var(--tracking-open);
    text-transform: uppercase;
}

.section-head__meta {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Negative margin gives the link a full touch target without pushing the heading down */
.section-head__link {
    margin: -12px 0;
    padding: 12px 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    text-decoration: none;
}

@media (hover: hover) {
    .section-head__link:hover {
        color: var(--color-accent);
    }
}

/* ---------- Card ---------- */

.card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.card--tight {
    padding: 16px;
}

@media (max-width: 767px) {
    .card {
        padding: 16px;
    }
}

/* ---------- Field ---------- */

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.field__label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}

/* 16px text stops iOS Safari from zooming in when the field gets focus */
.field__input {
    width: 100%;
    min-height: var(--touch-target);
    padding: 11px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sharp);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.3;
}

@media (prefers-reduced-motion: no-preference) {
    .field__input {
        transition: border-color var(--transition);
    }
}

.field__input::placeholder {
    color: var(--color-text-placeholder);
}

.field__input:focus-visible {
    border-color: var(--color-accent);
    box-shadow: none;
}

.field__hint {
    font-size: 13px;
    color: var(--color-text-muted);
}

.field__error {
    font-size: 13px;
    color: var(--color-danger);
}

.field--invalid .field__input {
    border-color: var(--color-danger);
}

.search {
    position: relative;
}

.search .icon {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.search .field__input {
    padding-left: 42px;
}

/* ---------- States: loading, error, not found ---------- */

.state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 0 24px;
    text-align: center;
}

/* The icon sits in a filled circle, the padding is inside the svg box so no wrapper element is needed */
.state > .icon {
    box-sizing: border-box;
    width: 64px;
    height: 64px;
    padding: 18px;
    border-radius: var(--radius-round);
    background: var(--color-accent-subtle);
    color: var(--color-accent);
}

.state--error > .icon {
    background: var(--color-danger-subtle);
    color: var(--color-danger);
}

.state__code {
    font-family: var(--font-display);
    font-size: 120px;
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: var(--tracking-tight);
    color: var(--color-accent);
}

.state__title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
}

.state__text {
    max-width: 340px;
    font-size: 15px;
    color: var(--color-text-muted);
}

.state .btn-row {
    width: 100%;
    max-width: 360px;
}

/* Skeleton blocks stand in for content while it loads, sized inline by each view to match what replaces them */
.skeleton {
    display: block;
    background: var(--color-surface-raised);
    border-radius: var(--radius-btn);
}

@media (prefers-reduced-motion: no-preference) {
    .skeleton {
        animation: skeleton-pulse 1.4s ease-in-out infinite;
    }
}

@keyframes skeleton-pulse {
    50% {
        opacity: 0.5;
    }
}

/* ---------- Small text ---------- */

.muted {
    font-size: 13px;
    color: var(--color-text-muted);
}

.numeric {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.source-link {
    font-size: 13px;
    color: var(--color-text-muted);
}

.source-link a {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--color-border-subtle);
    text-underline-offset: 3px;
}

/* ---------- Chip ---------- */

/* A label, never a button. Filters use .filter-chip instead */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-btn);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

.chip--format {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
}

.chip--tag {
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
}

.chip--beginner {
    background: var(--color-badge-beginner-bg);
    color: var(--color-badge-beginner-text);
}

.chip--intermediate {
    background: var(--color-badge-intermediate-bg);
    color: var(--color-badge-intermediate-text);
}

.chip--advanced {
    background: var(--color-badge-advanced-bg);
    color: var(--color-badge-advanced-text);
}

.chips-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ---------- List card ---------- */

.list-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

@media (prefers-reduced-motion: no-preference) {
    .list-card {
        transition: border-color var(--transition);
    }
}

/* Only the border changes on hover, so a grid of cards doesn't jump around under the cursor */
@media (hover: hover) {
    .list-card:hover:not(.is-selected) {
        border-color: var(--color-border-subtle);
    }
}

.list-card.is-selected {
    border-color: var(--color-accent);
}

.list-card__thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    object-fit: cover;
    background: var(--color-surface-raised);
    border-radius: var(--radius-btn);
}

.list-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.list-card__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
}

.list-card__link {
    color: inherit;
    text-decoration: none;
}

/* Stretched link: the whole card is clickable, but there is still only one link for screen readers */
.list-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
}

.list-card__link:focus-visible {
    box-shadow: none;
}

.list-card:has(.list-card__link:focus-visible) {
    box-shadow: var(--focus-ring);
}

.list-card__meta {
    overflow: hidden;
    font-size: 13px;
    color: var(--color-text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.list-card__meta .numeric {
    font-size: 12px;
}

.list-card__muscles {
    font-size: 12px;
    color: var(--color-text-muted);
}

.list-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.list-page__more {
    align-self: center;
}

.list-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------- Stats ---------- */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.stat__label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-accent);
}

.stat__value {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

/* A word like "weeks" needs a gap after the number, 2px from the design read as one word */
.stat__unit {
    margin-left: 5px;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Strip: the same stats inside one card, split by hairlines instead of separate boxes */
.stats--strip {
    display: flex;
    gap: 0;
    padding: 16px 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.stats--strip .stat {
    flex: 1;
    padding: 0 20px;
    background: none;
    border: 0;
}

.stats--strip .stat + .stat {
    border-left: 1px solid var(--color-border);
}

@media (max-width: 767px) {
    .stats--strip .stat {
        padding: 0 12px;
    }
}

/* ---------- Nav rows ---------- */

.nav-rows {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.nav-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto 16px;
    align-content: center;
    align-items: center;
    column-gap: 14px;
    min-height: 60px;
    padding: 10px 16px;
    color: var(--color-text);
    text-decoration: none;
}

.nav-row + .nav-row {
    border-top: 1px solid var(--color-border);
}

.nav-row > .icon:first-child {
    width: 22px;
    height: 22px;
    color: var(--color-accent);
}

/* With a sub line the icon spans both lines, so it sits in the middle of the row and not next to the label only */
.nav-row:has(.nav-row__sub) > .icon:first-child {
    grid-row: 1 / span 2;
}

.nav-row__label {
    font-size: 15px;
    font-weight: 500;
}

.nav-row__sub {
    grid-column: 2;
    font-size: 12px;
    color: var(--color-text-muted);
}

.nav-row__meta {
    grid-row: 1 / span 2;
    grid-column: 3;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-text-muted);
}

.nav-row > .icon:last-child {
    grid-row: 1 / span 2;
    grid-column: 4;
    color: var(--color-text-muted);
}

/* A nav row can also be a button, Log out on the You page, so the browser's button look is taken off */
button.nav-row {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.nav-row--danger,
.nav-row--danger > .icon:first-child {
    color: var(--color-danger);
}

/* Three across on desktop, the hairline moves from the top to the left side */
@media (min-width: 900px) {
    .nav-rows--wide {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nav-rows--wide .nav-row + .nav-row {
        border-top: 0;
        border-left: 1px solid var(--color-border);
    }
}

/* ---------- Filters ---------- */

/* The row scrolls sideways on a phone, the negative margin lets it run to the screen edge */
.filters {
    display: flex;
    gap: 8px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
}

.filter-chip {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    min-height: var(--touch-target);
    padding: 0 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text);
    font: 500 13px var(--font-body);
    white-space: nowrap;
    cursor: pointer;
}

.filter-chip .icon {
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
}

.filter-chip[aria-pressed="true"],
.filter-chip.is-on,
.filter-chip:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
}

/* The options are real checkboxes for keyboard and screen readers, the chip around them is what you see */
.filter-chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.filter-chip:has(input:focus-visible) {
    box-shadow: var(--focus-ring);
}

.filter-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.filter-panel[hidden] {
    display: none;
}

.result-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--touch-target);
    font-size: 13px;
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .filters {
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        overflow: visible;
    }
}

/* ---------- Media ---------- */

.media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
}

.media__image,
.media__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.media .btn {
    position: relative;
    background: var(--color-surface);
}

/* ---------- Steps and notes ---------- */

.steps {
    display: flex;
    flex-direction: column;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.steps__item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.55;
}

.steps__item + .steps__item {
    border-top: 1px solid var(--color-border);
}

.steps__n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-surface-raised);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-accent);
}

.note-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.note-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.note-card__title .icon {
    width: 18px;
    height: 18px;
}

.note-card--tips .note-card__title .icon {
    color: var(--color-success);
}

.note-card--mistakes .note-card__title .icon {
    color: var(--color-danger);
}

.note-card__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.55;
}

/* ---------- Workout structure ---------- */

.structure {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.structure__row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    min-height: 60px;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}

.structure > :first-child {
    border-top: 0;
}

@media (hover: hover) {
    .structure__row:hover .structure__name {
        color: var(--color-accent);
    }
}

.structure__n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-surface-raised);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-text-muted);
}

.structure__name {
    font-size: 14px;
    font-weight: 500;
}

.structure__sub {
    grid-column: 2;
    font-size: 12px;
    color: var(--color-text-muted);
}

.structure__rx {
    grid-row: 1 / span 2;
    grid-column: 3;
    font-family: var(--font-mono);
    font-size: 13px;
    text-align: right;
    white-space: nowrap;
}

.structure__rx small {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
}

/* A superset: one accent rule down the side groups the exercises that are done back to back */
.structure__group {
    border-top: 1px solid var(--color-border);
    border-left: 2px solid var(--color-accent);
}

.structure__group .structure__row:first-of-type {
    border-top: 0;
}

.structure__group-label {
    display: block;
    padding: 8px 14px 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-accent);
}

/* ---------- Weeks (program plan) ---------- */

.weeks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.program-week {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

/* <summary> is the clickable head, the default triangle is replaced by the chevron that turns when open */
.program-week__head {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto 16px;
    align-items: center;
    column-gap: 12px;
    min-height: 56px;
    padding: 8px 16px;
    color: var(--color-text);
    list-style: none;
    cursor: pointer;
}

.program-week__head::-webkit-details-marker {
    display: none;
}

.program-week__head > .icon {
    color: var(--color-text-muted);
}

.program-week[open] .program-week__head > .icon {
    transform: rotate(90deg);
}

.program-week__n {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-text-muted);
}

.program-week__title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
}

.program-week__meta {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text-muted);
}

.program-week__day {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    min-height: 52px;
    padding: 8px 16px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}

.program-week__day-name {
    font-size: 14px;
    font-weight: 500;
}

.program-week__day-sub {
    grid-column: 1;
    font-size: 12px;
    color: var(--color-text-muted);
}

.program-week__day-end {
    grid-row: 1 / span 2;
    grid-column: 2;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text-muted);
}

.program-week__day--rest .program-week__day-name {
    font-weight: 400;
    color: var(--color-text-muted);
}

/* A followed program puts a box in front of each day, so the columns shift one step right */
.program-week__day--tracked {
    grid-template-columns: 24px minmax(0, 1fr) auto;
}

.program-week__day--tracked .program-week__day-sub {
    grid-column: 2;
}

.program-week__day--tracked .program-week__day-end {
    grid-column: 3;
}

.program-week.is-current {
    border-color: var(--color-accent);
}

.program-week__check {
    display: flex;
    grid-row: 1 / span 2;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--color-border-subtle);
}

.program-week__check .icon {
    width: 14px;
    height: 14px;
}

/* A rest day keeps the column so the names line up, but has nothing to tick */
.program-week__check--rest {
    border-color: transparent;
}

.program-week__day.is-done .program-week__check {
    background: var(--color-logged-bg);
    border-color: var(--color-logged);
    color: var(--color-logged);
}

.program-week__day.is-next .program-week__check {
    border-color: var(--color-accent);
}

.progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.progress-meta b {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--color-text);
}

.program__leave {
    align-self: center;
    color: var(--color-text-muted);
}

/* On a phone the progress comes before the plan, and Up next and the header buttons move to the bar at the bottom */
@media (max-width: 767px) {
    .program__desk-actions,
    .program__next {
        display: none;
    }

    [data-program] .split__side {
        order: -1;
    }
}

@media (min-width: 768px) {
    .program__leave {
        display: none;
    }
}

.program__completed-date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.program__completed-date .icon {
    flex: 0 0 auto;
    color: var(--color-logged);
}

.program__completed-date a {
    color: inherit;
}

.program__completed .muted {
    margin: 0;
}

/* A small button like the one on Train, the text link sat in a 44 px touch box and looked loose under the text */
.program__completed .btn {
    align-self: flex-start;
}

.program__progress,
.train-program {
    gap: 10px;
}

/* A plain link and not the stretched card link, this card is no .list-card and the stretched area covered the cards above it */
.train-program__link {
    color: var(--color-text);
    text-decoration: none;
}

@media (hover: hover) {
    .train-program__link:hover {
        text-decoration: underline;
    }
}

/* ---------- Muscle map ---------- */

.muscle-map {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.muscle-map__bodies {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.muscle-map__view {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.muscle-map__svg {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    overflow: visible;
}

/* Stacked below the desktop side column, the bodies stay small so the numbers under them are still on screen */
@media (max-width: 899px) {
    .muscle-map__svg {
        max-width: 116px;
    }
}

.muscle-map__caption {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}

/* paint-order puts the outline under the fill, so neighbouring muscles meet at a thin line in the body colour */
.muscle-map__base,
.muscle-map__m {
    fill: var(--color-muscle-0);
    stroke: var(--color-muscle-body);
    stroke-width: 1.5px;
    stroke-linejoin: round;
    paint-order: stroke;
    vector-effect: non-scaling-stroke;
}

.muscle-map__m[data-level="1"] {
    fill: var(--color-muscle-1);
}

.muscle-map__m[data-level="2"] {
    fill: var(--color-muscle-2);
}

.muscle-map__m[data-level="3"] {
    fill: var(--color-muscle-3);
}

.muscle-map__m[data-level="4"] {
    fill: var(--color-muscle-4);
}

.muscle-map__link:focus-visible {
    box-shadow: none;
}

.muscle-map__link:focus-visible .muscle-map__m {
    stroke: var(--color-accent);
}

@media (hover: hover) {
    .muscle-map__link:hover .muscle-map__m {
        fill: var(--color-muscle-2);
    }
}

/* Muscles are too small to hit with a finger, so on a phone or tablet the map is only a picture and the links below it do the work */
@media (max-width: 767px), (pointer: coarse) {
    .muscle-map__link {
        pointer-events: none;
    }
}

.muscle-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.muscle-links .filter-chip {
    text-decoration: none;
}

.muscle-links .numeric {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Bodies left and numbers right, only in the desktop side column where both have room */
@media (min-width: 900px) {
    .muscle-map--row {
        display: grid;
        grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
        align-items: center;
        gap: 16px;
    }
}

.muscle-map__data {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.muscle-map__text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.muscle-map__text b {
    font-weight: 600;
    color: var(--color-text);
}

.muscle-map__list {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.muscle-map__list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--color-border);
    font-size: 13px;
}

/* The rows past the first four are hidden until "Show all" is pressed, display: flex above would show them anyway */
.muscle-map__list li[hidden] {
    display: none;
}

.muscle-map__list .numeric {
    color: var(--color-text-muted);
}

.muscle-map__legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.muscle-map__swatch {
    width: 14px;
    height: 10px;
    border: 1px solid var(--color-border-subtle);
}

.muscle-map__swatch--primary {
    background: var(--color-muscle-4);
}

.muscle-map__swatch--secondary {
    margin-left: 8px;
    background: var(--color-muscle-2);
}

/* ---------- Empty state ---------- */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 24px;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.empty-state__title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.empty-state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-round);
    background: var(--color-accent-subtle);
    color: var(--color-accent);
}

.empty-state__icon .icon {
    width: 22px;
    height: 22px;
}

.empty-state__text {
    max-width: 360px;
    font-size: 14px;
    color: var(--color-text-muted);
}

/* ---------- Forms ---------- */

.field--group {
    margin: 0;
    padding: 0;
    border: 0;
}

.field--group .field__label {
    margin-bottom: 6px;
}

.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

/* Month names are longer than days, so the middle select gets the most room */
.field-row--date {
    grid-template-columns: 1fr 1.4fr 1.2fr;
}

select.field__input {
    appearance: none;
    padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

/* Chromium's customizable select gives every open list the site's look, other browsers keep their own list under the same boxes */
/* Covers the form fields, the filter chips and the rest timer, so all dropdowns open the same list */
@supports (appearance: base-select) {
    :is(select.field__input, .filter-chip--select select, .set-log-card__rest-select),
    :is(select.field__input, .filter-chip--select select, .set-log-card__rest-select)::picker(select) {
        appearance: base-select;
    }

    /* The chips draw their own chevron, a second arrow would show through */
    .filter-chip--select select::picker-icon {
        display: none;
    }

    /* The site's chevron replaces the drawn triangle, it is the same icon the chips and the rest timer use */
    select.field__input {
        display: flex;
        align-items: center;
        padding-right: 14px;
        background-image: none;
    }

    :is(select.field__input, .set-log-card__rest-select)::picker-icon {
        content: "";
        width: 16px;
        height: 16px;
        background: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    select.field__input::picker-icon {
        margin-left: auto;
        color: var(--color-text-muted);
    }

    @media (prefers-reduced-motion: no-preference) {
        :is(select.field__input, .set-log-card__rest-select)::picker-icon {
            transition: rotate var(--transition);
        }
    }

    :is(select.field__input, .set-log-card__rest-select):open::picker-icon {
        rotate: 180deg;
    }

    .set-log-card__rest-select::picker-icon {
        width: 12px;
        height: 12px;
        margin-left: 4px;
    }

    /* opacity 0 would hide the open list too, so the chip's select is see-through by colour instead */
    .filter-chip--select select {
        padding: 0;
        background: transparent;
        border: 0;
        color: transparent;
        opacity: 1;
    }

    .set-log-card__rest-select {
        display: inline-flex;
        align-items: center;
        min-height: 0;
    }

    /* Flips up or to the other side instead of running off the screen, and is never wider than the screen */
    :is(select.field__input, .filter-chip--select select, .set-log-card__rest-select)::picker(select) {
        min-width: min(180px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
        max-height: min(320px, 50vh);
        margin-block: 4px;
        position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
        padding: 4px;
        overflow-y: auto;
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border);
        color: var(--color-text);
    }

    :is(select.field__input, .filter-chip--select select, .set-log-card__rest-select) option {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 40px;
        padding: 8px 12px;
        background: none;
        color: var(--color-text);
        font: 400 15px var(--font-body);
    }

    :is(select.field__input, .filter-chip--select select, .set-log-card__rest-select) option:hover,
    :is(select.field__input, .filter-chip--select select, .set-log-card__rest-select) option:focus-visible {
        background: var(--color-surface);
        outline: none;
    }

    :is(select.field__input, .filter-chip--select select, .set-log-card__rest-select) option:checked {
        color: var(--color-accent);
    }

    /* The site's check icon instead of the font's tick, drawn as a mask so it takes the option's colour */
    :is(select.field__input, .filter-chip--select select, .set-log-card__rest-select) option::checkmark {
        content: "";
        order: 1;
        width: 16px;
        height: 16px;
        margin-left: auto;
        background: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}

/* The show/hide button sits inside the input's right edge, the input gets room so text never runs under it */
.field--password {
    position: relative;
}

.field--password .field__input {
    padding-right: var(--touch-target);
}

.field__toggle {
    position: absolute;
    top: 23px;
    right: 0;
}

.field__hint--ok,
.field__hint--error {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.field__hint--ok {
    color: var(--color-logged);
}

.field__hint--error {
    color: var(--color-danger);
}

.field__hint .icon {
    width: 14px;
    height: 14px;
}

.password-rules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    margin-top: 2px;
    list-style: none;
    font-size: 12px;
    color: var(--color-text-muted);
}

.password-rules li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.password-rules li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-round);
    background: var(--color-border-subtle);
}

.password-rules li.is-met {
    color: var(--color-text);
}

.password-rules li.is-met::before {
    background: var(--color-logged);
}

/* The real checkbox stays in place but invisible, so it still gets focus, clicks and the required check */
.check {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: var(--touch-target);
    padding: 10px 0;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

.check input {
    position: absolute;
    top: 10px;
    left: 0;
    width: 22px;
    height: 22px;
    margin: 0;
    opacity: 0;
}

.check__box {
    display: flex;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    color: transparent;
}

.check__box .icon {
    width: 14px;
    height: 14px;
}

.check input:checked + .check__box {
    background: var(--color-accent-fill);
    border-color: var(--color-accent);
    color: var(--color-on-accent-fill);
}

/* A hint under a checkbox lines up with the label text and not with the box, 22 px box plus the 12 px gap */
.check + .field__hint {
    padding-left: 34px;
}

.check input:focus-visible + .check__box {
    box-shadow: var(--focus-ring);
}

.check__text a {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: 3px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.form-error {
    padding: 12px 14px;
    background: var(--color-set-failure-bg);
    border-left: 2px solid var(--color-danger);
    font-size: 14px;
    color: var(--color-text);
}

.form-error[hidden] {
    display: none;
}

/* Off screen rather than display: none, some bots skip fields they can tell are hidden */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.or-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    color: var(--color-text-muted);
}

.or-line a {
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}

/* The ways in on log in and sign-up, stacked full width like the form buttons that replace them */
.auth-choice {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-choice[hidden],
.group[hidden] {
    display: none;
}

.auth-choice__back {
    align-self: center;
}

.state__text--small {
    font-size: 13px;
}

.state__text b {
    font-weight: 500;
    color: var(--color-text);
}

/* ---------- Notice ---------- */

/* One line of news at the top of the page, with its action on the same line */
.notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: 14px;
    line-height: 1.45;
}

.notice > .icon {
    width: 18px;
    height: 18px;
    color: var(--color-accent);
}

/* The offline notice has no icon from the sprite, a plain dot in the warning colour keeps the same grid */
.notice__dot {
    width: 10px;
    height: 10px;
    margin: 0 4px;
    border-radius: var(--radius-round);
    background: var(--color-warning);
}

.notice small {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
}

.notice .text-btn {
    font-weight: 600;
    color: var(--color-accent);
}

/* ---------- Avatar and menus ---------- */

.top-nav__avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-round);
    background: var(--color-accent-subtle);
    color: var(--color-accent);
    font: 700 14px/1 var(--font-display);
    text-decoration: none;
    cursor: pointer;
}

/* The tap area is larger than the drawn size, the look stays the same */
.top-nav__avatar::before {
    content: "";
    position: absolute;
    inset: -6px;
}

/* A ring marks the avatar on the You pages, the same job the underline does for Train, Library and Feed */
.top-nav__avatar[aria-current] {
    box-shadow: 0 0 0 2px var(--color-accent);
}

/* The touch target is bigger than the round avatar, a 32px circle is too small to hit reliably with a thumb */
.top-nav__avatar::after {
    content: '';
    position: absolute;
    inset: -6px;
}

.account-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: var(--z-dropdown);
    width: 260px;
    padding: 8px 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-md);
}

.account-menu[hidden] {
    display: none;
}

.account-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: var(--touch-target);
    padding: 0 16px;
    background: none;
    border: 0;
    color: var(--color-text);
    font: 14px var(--font-body);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

@media (hover: hover) {
    .account-menu__item:hover {
        background: var(--color-surface-raised);
    }
}

.account-menu__item .icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
}

.account-menu__item--danger,
.account-menu__item--danger .icon {
    color: var(--color-danger);
}

/* Something that can't be undone sits apart from the safe choices above it */
.account-menu__item:not(.account-menu__item--danger) + .account-menu__item--danger {
    margin-top: 6px;
    border-top: 1px solid var(--color-border);
    padding-top: 6px;
    min-height: calc(var(--touch-target) + 6px);
}

/* ---------- Training chips and live card ---------- */

.chip .icon {
    width: 12px;
    height: 12px;
}

.chip--pr {
    background: var(--color-pr-bg);
    color: var(--color-pr);
}

.chip--logged {
    background: var(--color-logged-bg);
    color: var(--color-logged);
}

.chip--live {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
}

.chip--live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-round);
    background: currentColor;
}

/* The accent line on top marks the one card that is happening right now */
.card--live {
    position: relative;
}

.card--live::before {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    left: -1px;
    height: 2px;
    background: var(--color-accent-fill);
}

.card--live.is-done::before {
    background: var(--color-logged);
}

/* Above the card's stretched link, so Start can be tapped without opening the card */
.list-card__action {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* ---------- Set log card ---------- */

.set-log-card {
    padding: 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.set-log-card.is-collapsed {
    padding-top: 14px;
    padding-bottom: 14px;
}

.set-log-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.set-log-card.is-collapsed .set-log-card__header {
    margin-bottom: 0;
}

.set-log-card__header-main {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.set-log-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: var(--tracking-snug);
}

.set-log-card__title a {
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    .set-log-card__title a:hover {
        color: var(--color-accent);
    }
}

.set-log-card__header-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 2px;
}

.set-log-card__done {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-logged);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.set-log-card__done .icon {
    width: 14px;
    height: 14px;
}

/* The options menu opens under its button, the account menu's look is reused */
.set-log-card__menu-wrap {
    position: relative;
}

.set-log-card__menu {
    top: calc(100% + 4px);
    width: 200px;
}

.set-log-card__meta {
    margin: 0 0 6px;
    color: var(--color-text-muted);
    font-size: 13px;
}

.set-log-card__meta--last {
    font-style: italic;
}

.set-log-card__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
}

.set-log-card__rest-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: var(--color-accent);
    font: 500 13px var(--font-body);
    cursor: pointer;
}

.set-log-card__rest-btn .icon {
    width: 16px;
    height: 16px;
}

/* A real select keeps the keyboard and screen reader behaviour, only its box is removed to look like the design's text button */
.set-log-card__rest-select {
    align-self: stretch;
    padding: 0 2px;
    background: none;
    border: 0;
    color: inherit;
    font: 500 13px var(--font-mono);
    cursor: pointer;
}

.set-log-card__rest-select option {
    background: var(--color-surface);
    color: var(--color-text);
}

/* The side padding gives the focus ring and the tap area room, the negative margin keeps the words where they were */
.set-log-card__add-note,
.set-log-card__tool {
    min-height: 44px;
    margin: 0 -12px;
    padding: 0 12px;
    background: none;
    border: 0;
    color: var(--color-text-muted);
    font: 13px var(--font-body);
    cursor: pointer;
}

.set-log-card__note {
    flex: 1 1 100%;
}

.set-log-card__note-input {
    min-height: 0;
    font-size: 14px;
}

.set-log-card__rows {
    max-width: 560px;
    margin: 16px 0 4px;
}

.set-log-card__cols {
    display: grid;
    grid-template-columns: 44px 1fr 1fr 44px;
    gap: 8px;
    margin-bottom: 4px;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
}

.set-log-card__cols--single {
    grid-template-columns: 44px 1fr 44px;
}

/* The negative margin lets the green background of a logged set reach past the columns without moving them */
.set-log-card__row {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 8px;
    margin: 0 -6px 4px;
    padding: 6px;
    border-radius: var(--radius-btn);
}

.set-log-card__row.is-done {
    background: var(--color-logged-bg);
}

.set-log-card__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-surface-raised);
    border: 0;
    border-radius: var(--radius-btn);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.set-log-card__badge:disabled {
    cursor: default;
}

.set-log-card__badge[data-type="warmup"] {
    background: var(--color-set-warmup-bg);
    color: var(--color-set-warmup);
}

.set-log-card__badge[data-type="drop"] {
    background: var(--color-set-drop-bg);
    color: var(--color-set-drop);
}

.set-log-card__badge[data-type="failure"] {
    background: var(--color-set-failure-bg);
    color: var(--color-set-failure);
}

.set-log-card__row-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.set-log-card__row-fields--single {
    grid-template-columns: 1fr;
}

.set-log-card__row-fields--pr {
    position: relative;
}

/* 16px text stops iPhones from zooming in when a field is tapped */
.set-log-card__row-input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 10px;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-btn);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.set-log-card__row-input::placeholder {
    color: var(--color-text-placeholder);
}

.set-log-card__row-input:focus-visible {
    border-color: var(--color-accent);
    outline: none;
}

.set-log-card__row.is-done .set-log-card__row-input {
    background: transparent;
    border-color: transparent;
}

.set-log-card__pr-badge {
    position: absolute;
    top: 50%;
    right: 6px;
    padding: 5px;
    transform: translateY(-50%);
}

.set-log-card__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-btn);
    color: var(--color-text-muted);
    cursor: pointer;
}

.set-log-card__check .icon {
    width: 17px;
    height: 17px;
}

.set-log-card__check.is-done {
    background: var(--color-logged);
    border-color: var(--color-logged);
    color: var(--color-on-accent);
}

.set-log-card__error {
    margin: 4px 0 8px;
}

.set-log-card__row-actions {
    display: flex;
    gap: 8px;
    max-width: 560px;
}

.set-log-card__row-actions .btn {
    flex: 1;
}

@media (max-width: 767px) {
    .set-log-card {
        padding: 16px;
    }

    .set-log-card__title {
        font-size: 16px;
    }
}

/* ---------- Superset block ---------- */

.superset {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 12px;
    border-left: 2px solid var(--color-accent);
}

.superset__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
}

.superset__tag {
    color: var(--color-accent);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.superset__meta {
    color: var(--color-text-muted);
    font-size: 12px;
}

.superset__meta b {
    color: var(--color-text);
    font-family: var(--font-mono);
    font-weight: 500;
}

/* ---------- Log page ---------- */

.log__add {
    margin-top: 12px;
}

.clock {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    line-height: 1;
}

.clock__t {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.rest-card__t {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 34px;
    font-weight: 500;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.card--live.is-done .rest-card__t {
    color: var(--color-logged);
}

.rest-card__acts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.rest-card__acts .active-bar__step {
    width: 100%;
}

/* The slot and not only the card inside it, an empty slot still took a gap and left a hole under the title */
.log__side > [data-rest-card]:empty {
    display: none;
}

/* Phones get the clock, Finish and rest controls in the bars at the bottom, desktop has them on the page */
@media (max-width: 767px) {
    .log__desk-actions,
    .train__desk-actions,
    .builder__desk-actions,
    .my-workouts__desk-actions,
    .my-exercises__desk-actions,
    .body__desk-actions,
    .my-workout__desk-start,
    .log__side > [data-rest-card] {
        display: none;
    }

    /* The session numbers come first on a phone, as in the design, so the side column moves above the exercises */
    .log__side {
        order: -1;
    }
}

/* ---------- Train page ---------- */

.train-live {
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.train-live__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.train-live__head .list-card__title {
    font-size: 22px;
}

/* The strip's own box is dropped inside the live card, the card already frames it */
.train-live__stats {
    padding: 0;
    background: none;
    border: 0;
}

/* The clock grows to hours, a column never gets narrower than its number so it can't run into the next one */
.train-live__stats .stat {
    min-width: max-content;
}

/* Flush with the title above, the strip's own side padding only belongs between the columns */
.train-live__stats .stat:first-child {
    padding-left: 0;
}

.week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.week__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.week__name {
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

.week__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    background: var(--color-surface-raised);
    border: 1px solid transparent;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
}

.week__day.is-trained .week__mark {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent);
}

.week__day.is-today .week__name {
    color: var(--color-text);
}

.week__day.is-today .week__mark {
    border-color: var(--color-text-muted);
}

.week__day.is-today.is-trained .week__mark {
    border-color: var(--color-accent);
}

.week-sum {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    color: var(--color-text-muted);
    font-size: 13px;
}

.week-sum b {
    color: var(--color-text);
    font-family: var(--font-mono);
    font-weight: 500;
}

/* ---------- Records ---------- */

.records {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.record {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    min-height: 56px;
    padding: 10px 16px;
}

.record + .record {
    border-top: 1px solid var(--color-border);
}

.record > .icon {
    width: 18px;
    height: 18px;
    color: var(--color-pr);
}

.record__name {
    overflow: hidden;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record__what {
    grid-column: 2;
    color: var(--color-text-muted);
    font-size: 12px;
}

/* The value spans both lines on the right, so name and label stay in their own column on the left */
.record__val {
    grid-row: 1 / span 2;
    grid-column: 3;
    font-family: var(--font-mono);
    font-size: 13px;
    text-align: right;
    white-space: nowrap;
}

/* ---------- Finished workout ---------- */

.finish__saved {
    align-self: flex-start;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hero-stat__label {
    color: var(--color-accent);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.hero-stat__value {
    font-family: var(--font-mono);
    font-size: 40px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--tracking-tighter);
    font-variant-numeric: tabular-nums;
}

.hero-stat__value small {
    margin-left: 4px;
    color: var(--color-text-muted);
    font-size: 16px;
    letter-spacing: 0;
}

.hero-stat__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 13px;
}

.hero-stat__row b {
    color: var(--color-text);
    font-weight: 500;
}

.exercise-summary {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.exercise-summary__item {
    padding: 14px 16px 10px;
}

.exercise-summary__item + .exercise-summary__item {
    border-top: 1px solid var(--color-border);
}

.exercise-summary__title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
}

.exercise-summary__title a {
    color: inherit;
    text-decoration: none;
}

.set-line {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.set-line__type {
    color: var(--color-text-muted);
    font-weight: 500;
}

.set-line__type--warmup {
    color: var(--color-set-warmup);
}

.set-line__type--drop {
    color: var(--color-set-drop);
}

.set-line__type--failure {
    color: var(--color-set-failure);
}

.set-line .chip {
    justify-self: end;
}

/* ---------- Bottom bars: rest timer and page actions ---------- */

.action-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px var(--gutter);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}

.action-bar .btn {
    flex: 1;
}

.action-bar__lead {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.action-bar__label,
.active-bar__label {
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.action-bar__value {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.active-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px var(--gutter);
    background: var(--color-bg);
    border-top: 1px solid var(--color-accent);
}

.active-bar.is-rest-done {
    border-top-color: var(--color-logged);
}

.active-bar__link {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: var(--touch-target);
    color: inherit;
    text-decoration: none;
}

.active-bar__link > .icon {
    color: var(--color-accent);
}

.active-bar.is-rest-done .active-bar__link > .icon,
.active-bar.is-rest-done .active-bar__label {
    color: var(--color-logged);
}

.active-bar__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.active-bar__line {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.active-bar__time {
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.active-bar.is-resting .active-bar__time {
    color: var(--color-accent);
}

.active-bar__sub {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-bar__actions {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
}

.active-bar__step {
    height: var(--touch-target);
    padding: 0 12px;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-btn);
    color: var(--color-text);
    font: 500 13px var(--font-mono);
    cursor: pointer;
}

.active-bar__step--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target);
    padding: 0;
}

.active-bar__step .icon {
    width: 14px;
    height: 14px;
}

/* On desktop the bar floats in the corner as a small card, the log page has its own rest card there instead */
@media (min-width: 768px) {
    .active-bar {
        position: relative;
        gap: 16px;
        padding: 8px 8px 8px 16px;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
    }

    .active-bar::before {
        content: '';
        position: absolute;
        top: -1px;
        right: -1px;
        left: -1px;
        height: 2px;
        background: var(--color-accent-fill);
    }

    .active-bar.is-rest-done::before {
        background: var(--color-logged);
    }

    .active-bar__step {
        height: 44px;
        padding: 0 10px;
    }

    .active-bar__step--icon {
        width: 44px;
        padding: 0;
    }

    .active-bar__time {
        font-size: 18px;
    }

    .active-bar__link {
        min-height: 44px;
    }

    .active-bar--on-log {
        display: none;
    }
}

/* ---------- Segmented control ---------- */

.segmented {
    display: flex;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.segmented__item {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target);
    margin: 0;
    padding: 0 12px;
    background: none;
    border: 0;
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: var(--tracking-normal);
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

/* A single digit was 28px wide, the weekly goal 1-7 gets room for a thumb on a normal phone, a 320px one has no room for it */
@media (min-width: 380px) {
    .segmented--digits .segmented__item {
        min-width: 40px;
    }
}

.segmented__item + .segmented__item {
    border-left: 1px solid var(--color-border);
}

/* A neutral fill and not the accent, the orange is kept for actions and records */
.segmented__item[aria-current],
.segmented__item[aria-pressed="true"],
.segmented__item:has(input:checked) {
    background: var(--color-surface-raised);
    color: var(--color-text);
}

@media (hover: hover) {
    .segmented__item:not([aria-current], [aria-pressed="true"]):hover {
        color: var(--color-text);
    }
}

.segmented--sm .segmented__item {
    padding: 0 8px;
    font-size: 12px;
    letter-spacing: var(--tracking-wide);
}

/* ---------- History list and panel ---------- */

.list-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.list-panel__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.list-panel__panel {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}

.history__back,
.my-workouts__back,
.my-exercises__back {
    align-self: flex-start;
}

/* Desktop shows the list and the chosen workout side by side, phones show one of them depending on the address */
@media (min-width: 900px) {
    .list-panel {
        grid-template-columns: var(--list-column) minmax(0, 1fr);
    }

    .list-panel__panel {
        padding-left: 40px;
        border-left: 1px solid var(--color-border);
    }

    .history__back,
    .my-workouts__back,
    .my-exercises__back {
        display: none;
    }
}

@media (max-width: 899px) {
    [data-view="list"] .session-card.is-selected,
    [data-view="list"] .list-card.is-selected {
        border-color: var(--color-border);
    }

    [data-view="list"] .list-panel__panel,
    [data-view="detail"] .list-panel__list,
    [data-view="detail"] .history__header,
    [data-view="detail"] .my-workouts__header,
    [data-view="detail"] .my-exercises__header,
    .calendar__panel {
        display: none;
    }
}

.month {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 12px;
}

.month__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.month__stats {
    display: flex;
    gap: 12px;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
}

.session-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}

@media (hover: hover) {
    .session-card:hover {
        border-color: var(--color-border-subtle);
    }
}

.session-card.is-selected {
    border-color: var(--color-accent);
}

.session-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.session-card__tags {
    display: flex;
    gap: 6px;
}

.session-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
}

.session-card__stats {
    display: flex;
    gap: 12px;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
}

.session-card__muscles,
.session-card__more {
    color: var(--color-text-muted);
    font-size: 12px;
}

.session-card__lines {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
}

.session-card__line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    line-height: 1.9;
}

.session-card__line span:last-child {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
}

/* The desktop panel already shows the chosen workout in full, so the cards there drop their preview lines */
@media (min-width: 900px) {
    .list-panel__list .session-card__lines {
        display: none;
    }
}

.exercise-summary__delta {
    margin: -2px 0 6px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.source-link a {
    color: var(--color-text);
}

.danger-link {
    display: inline-flex;
    align-self: center;
    align-items: center;
    gap: 8px;
    min-height: var(--touch-target);
    padding: 0;
    background: none;
    border: 0;
    color: var(--color-danger);
    font: 500 14px var(--font-body);
    cursor: pointer;
}

.danger-link .icon {
    width: 16px;
    height: 16px;
}

.session-list {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.session-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 16px;
    align-items: center;
    column-gap: 12px;
    min-height: 56px;
    padding: 10px 16px;
    color: var(--color-text);
    text-decoration: none;
}

.session-row + .session-row {
    border-top: 1px solid var(--color-border);
}

.session-row__date {
    font-size: 14px;
    font-weight: 500;
}

.session-row__sub {
    grid-column: 1;
    color: var(--color-text-muted);
    font-size: 12px;
}

/* Value and arrow span both lines on the right, the date and the sets stay in the left column */
.session-row__val {
    grid-row: 1 / span 2;
    grid-column: 2;
    font-family: var(--font-mono);
    font-size: 13px;
    text-align: right;
    white-space: nowrap;
}

.session-row__val .chip {
    margin-left: 6px;
}

.session-row > .icon {
    grid-row: 1 / span 2;
    grid-column: 3;
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
}

.stat__value--text {
    font-size: 15px;
}

/* ---------- Calendar ---------- */

.calendar {
    gap: 10px;
}

.calendar__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calendar__nav .icon-btn {
    color: var(--color-text-muted);
}

.calendar__label {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
}

.calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.calendar__wd {
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-align: center;
    text-transform: uppercase;
}

.calendar__day {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: var(--touch-target);
    background: var(--color-surface-raised);
    border: 1px solid transparent;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 13px;
    text-decoration: none;
}

.calendar__day--blank {
    background: none;
}

/* The same four steps as the muscle map, so "more" looks the same everywhere in the app */
.calendar__day--1 {
    background: var(--color-muscle-1);
    color: var(--color-text);
}

.calendar__day--2 {
    background: var(--color-muscle-2);
    color: var(--color-text);
}

.calendar__day--3 {
    background: var(--color-muscle-3);
    color: var(--color-text);
}

.calendar__day--4 {
    background: var(--color-muscle-4);
    color: var(--color-on-accent-fill);
}

.calendar__day--today {
    border-color: var(--color-text-muted);
}

.calendar__day.is-selected {
    border-color: var(--color-text);
    box-shadow: inset 0 0 0 1px var(--color-text);
}

.calendar__legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.calendar__swatch {
    display: block;
    width: 14px;
    height: 10px;
    min-height: 0;
    aspect-ratio: auto;
}

/* ---------- Charts ---------- */

.chart {
    gap: 12px;
}

.chart__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.chart__value {
    font-family: var(--font-mono);
    white-space: nowrap;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
}

.chart__value small {
    margin-left: 2px;
    color: var(--color-text-muted);
    font-size: 13px;
}

.chart__delta {
    color: var(--color-text-muted);
    font-size: 12px;
    text-align: right;
}

.chart__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.chart__grid {
    stroke: var(--color-border);
    stroke-width: 1;
}

.chart__axis {
    fill: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
}

.chart__line {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart__area {
    fill: var(--color-accent-subtle);
}

.chart__dot {
    fill: var(--color-accent);
    stroke: var(--color-surface);
    stroke-width: 2;
}

/* Invisible circles bigger than the line, so a pointer can find a point and see its value */
.chart__hit {
    fill: transparent;
}

.chart__bar {
    fill: var(--color-muscle-2);
}

/* The bar chart's wide drawing is scaled down to about half on a phone, so its labels are drawn twice as big to stay readable */
@media (max-width: 767px) {
    .chart__svg--bars .chart__axis {
        font-size: 18px;
    }
}

.chart__bar--last {
    fill: var(--color-accent);
}

.chart__bar--now {
    fill: var(--color-accent-subtle);
    stroke: var(--color-accent);
    stroke-width: 1;
    stroke-dasharray: 3 2;
}

/* ---------- Exercise page ---------- */

/* A member who has logged the exercise sees their own numbers and the muscles first in one column, a guest starts with how to do it */
/* 899px is where the split goes to one column, a lower breakpoint put the muscles last on a tablet but first on a phone */
@media (max-width: 899px) {
    .exercise__side--first {
        order: -1;
    }
}

/* ---------- Progress ---------- */

.progress__periods {
    width: 320px;
    max-width: 100%;
}

/* The same width as the tabs in History's list column, below 900px they are full width on all three pages */
@media (min-width: 900px) {
    .progress__tabs {
        max-width: var(--list-column);
    }
}

/* On a phone the period choice gets its own full-width row under the title instead of squeezing in beside it */
@media (max-width: 767px) {
    .progress__header-actions,
    .progress__periods {
        flex: 1 1 100%;
        width: 100%;
    }
}

.exercise-rows {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.exercise-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px auto;
    align-items: center;
    column-gap: 16px;
    min-height: 60px;
    padding: 10px 16px;
    color: var(--color-text);
    text-decoration: none;
}

.exercise-row + .exercise-row {
    border-top: 1px solid var(--color-border);
}

.exercise-row__name {
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exercise-row__sub {
    grid-column: 1;
    color: var(--color-text-muted);
    font-size: 12px;
}

.exercise-row__spark {
    grid-row: 1 / span 2;
    grid-column: 2;
    width: 64px;
    height: 24px;
    overflow: visible;
}

.exercise-row__val {
    display: flex;
    grid-row: 1 / span 2;
    grid-column: 3;
    flex-direction: column;
    align-items: flex-end;
    font-family: var(--font-mono);
    font-size: 14px;
    white-space: nowrap;
}

.exercise-row__val small {
    color: var(--color-text-muted);
    font-size: 12px;
}

.hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--color-surface-raised);
    font-size: 13px;
    line-height: 1.5;
}

.hint .icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--color-accent);
}

/* ---------- Rename in place ---------- */

.title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.title-row .page-header__title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.title-row .icon-btn {
    flex: 0 0 auto;
}

.title-row[hidden] {
    display: none;
}

.rename {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 480px;
}

.rename .btn-row .btn {
    flex: 0 0 auto;
}

/* ---------- My workouts ---------- */

.you-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}

.you-card > .icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--color-logged);
}

/* The chevron at the end is the same element type as the check in front, so last-child tells them apart */
.you-card > .icon:last-child {
    flex-basis: 16px;
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
}

.you-card__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    font-size: 14px;
    line-height: 1.4;
}

.you-card__text small {
    color: var(--color-text-muted);
    font-size: 12px;
}

@media (hover: hover) {
    .you-card:hover {
        border-color: var(--color-border-subtle);
    }
}

.train__mine-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.finish__changed {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.finish__changed-done {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
}

.finish__changed-done .icon {
    width: 20px;
    height: 20px;
    color: var(--color-logged);
}

/* ---------- Builder ---------- */

.builder__add {
    margin-top: 12px;
}

.builder-exercise {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.builder-exercise.is-open {
    border-color: var(--color-border-subtle);
}

/* Title and summary stacked on the left, the two buttons span both lines on the right */
.builder-exercise__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 4px;
    min-height: 60px;
    padding: 8px 8px 8px 16px;
}

.builder-exercise__title {
    grid-row: 1;
    grid-column: 1;
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
}

.builder-exercise__sum {
    grid-row: 2;
    grid-column: 1;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
}

.builder-exercise__head .icon-btn {
    grid-row: 1 / span 2;
}

.builder-exercise__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-top: 1px solid var(--color-border);
}

.builder-exercise__mode .segmented {
    max-width: 200px;
}

/* Sets, reps and rest fit side by side even on a phone, a superset member without rest just has two */
.builder-exercise__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 12px;
}

.builder-exercise__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.builder-exercise__tools .btn-row .btn {
    flex: 0 0 auto;
}

/* ---------- Exercise picker ---------- */

/* The page behind an open picker stays put, a scroll inside the list must not move it */
:root:has(.sheet[open]) {
    overflow: hidden;
}

/* A bottom sheet on phones, a centred dialog from 768px, both are the same <dialog> */
.sheet {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    margin: 0;
    padding: 20px var(--gutter) 24px;
    background: var(--color-surface);
    border: 0;
    border-top: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-lg);
    color: var(--color-text);
}

.sheet[open] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sheet::backdrop {
    background: var(--color-scrim);
}

@media (min-width: 768px) {
    .sheet {
        inset: 0;
        width: 600px;
        max-height: calc(100dvh - 160px);
        margin: 80px auto auto;
        padding: 28px;
        border: 1px solid var(--color-border-subtle);
    }

    .sheet::backdrop {
        background: var(--color-scrim);
    }
}

.sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sheet__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
}

.sheet__actions {
    flex: 0 0 auto;
}

/* The list is the only part that scrolls, search and the buttons stay in view */
.pick-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 120px;
    /* Room between the round check and the scrollbar, the gutter stays reserved so rows don't shift when it appears */
    padding-right: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.pick {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    margin: 0;
    padding: 8px 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pick:first-child {
    border-top: 0;
}

.pick__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
}

.pick__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pick__thumb .icon {
    width: 20px;
    height: 20px;
}

.pick__name {
    display: block;
    font-size: 15px;
    font-weight: 500;
}

.pick__sub {
    display: block;
    color: var(--color-text-muted);
    font-size: 12px;
}

/* The check is drawn in the background colour until the row is picked, so the dot keeps its size */
.pick__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-round);
    color: transparent;
}

.pick__dot .icon {
    width: 14px;
    height: 14px;
}

.pick.is-on .pick__dot {
    background: var(--color-accent-fill);
    border-color: var(--color-accent);
    color: var(--color-on-accent-fill);
}

.pick.is-on .pick__name {
    color: var(--color-accent);
}

/* An invisible select over the whole chip, the phone's own list opens and the chip shows the choice */
/* 16px keeps iOS from zooming the page when the select gets focus, it is never seen */
.filter-chip--select select {
    position: absolute;
    inset: 0;
    width: 100%;
    font-size: 16px;
    opacity: 0;
    cursor: pointer;
}

.filter-chip--select:has(select:focus-visible) {
    box-shadow: var(--focus-ring);
}

.chip--yours {
    background: var(--color-surface-raised);
    color: var(--color-text);
}

/* The chip takes the video link's place in a Builder card, an own exercise has no page to open */
.builder-exercise__yours {
    grid-row: 1 / span 2;
    align-self: center;
}

.sheet__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

.sheet__body[hidden] {
    display: none;
}

/* The form is taller than a phone screen with the keyboard up, so it scrolls inside the sheet */
.sheet__body--form {
    overflow-y: auto;
}

.sheet__create {
    align-self: flex-start;
}

/* ---------- Own exercises ---------- */

.my-exercises__body {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
/* A container, the history sits in a narrow side column on desktop but is full width on a tablet */
.exercise-history {
    display: flex;
    flex-direction: column;
    gap: 32px;
    container-type: inline-size;
}

.exercise-history__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* Kept about as tall as the graph next to it, full width the figures made the card twice the graph's height */
.exercise-history__beside .muscle-map__bodies {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
}

/* The muscles get a card like the graph, so the two columns start and end on the same lines */
.exercise-history__beside .muscle-map {
    flex: 1;
    justify-content: space-between;
    padding: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

@container (min-width: 560px) {
    .exercise-history__pair {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
    }

    .exercise-history__pair > section,
    .exercise-history__beside,
    .exercise-history__beside > section {
        display: flex;
        flex-direction: column;
    }

    .exercise-history__beside,
    .exercise-history__beside > section,
    .exercise-history__pair > section > .chart {
        flex: 1;
    }

    /* The period buttons sit at the bottom of a stretched card, level with the muscle list next to it */
    .exercise-history__pair .chart > .segmented:last-child {
        margin-top: auto;
    }
}

.my-exercise__note {
    margin: 0;
    max-width: 60ch;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.5;
}

.exercise-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
}

/* Inside the picker the sheet is already the surface, a second box would look nested */
.sheet .exercise-form {
    padding: 0;
    background: none;
    border: 0;
}

.exercise-form .danger-link {
    align-self: flex-start;
}

.field__optional {
    color: var(--color-text-muted);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* ---------- Plate calculator ---------- */

.plates {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--color-surface-raised);
}

.plates__field {
    display: grid;
    grid-template-columns: 96px auto;
    align-items: center;
    gap: 6px 10px;
    font-size: 13px;
}

.plates__label {
    grid-column: 1 / -1;
}

.plates__label,
.plates__unit {
    color: var(--color-text-muted);
}

.plates__input {
    width: 96px;
}

.plates__side {
    margin: 0;
    font-size: 14px;
}

.plates__side b {
    font-family: var(--font-mono);
    font-weight: 500;
}

.plates__note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* One sleeve of the bar, plates drawn taller the heavier they are, so the picture reads like the real thing */
.plates__bar {
    display: flex;
    align-items: center;
    gap: 3px;
    min-height: 72px;
    overflow-x: auto;
}

.plates__collar {
    flex: 0 0 10px;
    height: 28px;
    background: var(--color-text-muted);
}

.plates__sleeve {
    flex: 1 0 24px;
    max-width: 120px;
    height: 10px;
    background: var(--color-border-subtle);
}

.plates__plate {
    display: flex;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    height: 40px;
    background: var(--color-accent-fill);
    color: var(--color-on-accent-fill);
    font-family: var(--font-mono);
    font-size: 12px;
    writing-mode: vertical-rl;
}

/* data-size comes from the plate's weight in kg, so a 45 lb plate is drawn like a 20 kg one */
.plates__plate[data-size="xl"] {
    height: 72px;
}

.plates__plate[data-size="l"] {
    height: 64px;
}

.plates__plate[data-size="m"] {
    height: 56px;
}

.plates__plate[data-size="s"] {
    flex-basis: 18px;
    height: 44px;
}

.plates__plate[data-size="xs"] {
    flex-basis: 14px;
    height: 32px;
    background: var(--color-text-muted);
    color: var(--color-bg);
}

.plates__change {
    align-self: flex-start;
}

.text-btn--center {
    align-self: center;
}

/* ---------- You ---------- */

.menu-label {
    margin: 0 0 8px;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.avatar-lg {
    display: flex;
    flex: 0 0 64px;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-round);
    background: var(--color-accent-subtle);
    color: var(--color-accent);
    font: 800 28px/1 var(--font-display);
}

/* The avatar sits in front of the name on every screen size, the page header would otherwise wrap it above */
.page-header.you__header {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

.you__header .page-header__text {
    flex: 1;
    min-width: 0;
}

.you__layout .split__main,
.you__layout .split__side {
    gap: 32px;
}

/* One column on phones in the design's order, numbers first and Account last, the two columns are flattened into one grid */
@media (max-width: 899px) {
    .you__layout {
        gap: 32px;
    }

    .you__layout .split__main,
    .you__layout .split__side {
        display: contents;
    }

    .you__stats {
        order: -1;
    }

    .you__account {
        order: 1;
    }
}

/* ---------- Saved ---------- */

.save-btn {
    border: 1px solid var(--color-border-subtle);
}

.save-btn.is-on {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* The bookmark is filled when saved, the outline alone is too close to the empty one at a glance */
.save-btn.is-on .icon {
    fill: currentColor;
}

/* ---------- Share button ---------- */

/* Same outline as the save button next to it, the two sit side by side in a page header */
.share-btn {
    position: relative;
    border: 1px solid var(--color-border-subtle);
}

/* Centred under the button, the button sits at either edge of a header depending on the screen width */
.share-btn__tip {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-dropdown);
    padding: 4px 8px;
    border-radius: var(--radius-btn);
    background: var(--color-surface-raised);
    color: var(--color-text);
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition);
}

.share-btn.is-copied .share-btn__tip {
    opacity: 1;
}

.share-btn.is-copied {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.saved__filters {
    align-self: flex-start;
}

/* ---------- Body ---------- */

.body__main {
    gap: 16px;
}

.body__metric {
    width: auto;
    align-self: flex-start;
}

/* The rows are buttons that open the measurement, so the browser's button look is taken off */
button.session-row {
    width: 100%;
    border: 0;
    border-radius: var(--radius-sharp);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.body__consent-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

.body__consent-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    color: var(--color-text-muted);
    font-size: 14px;
}

.body-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.body-form__lengths {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.body-form__lengths[hidden] {
    display: none;
}

.body-form__delete {
    align-self: center;
}

.disclose {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--touch-target);
    padding: 0;
    border: 0;
    border-top: 1px solid var(--color-border);
    background: none;
    color: var(--color-text);
    font: 600 14px var(--font-body);
    cursor: pointer;
}

.disclose .icon {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    transition: transform var(--transition);
}

.disclose[aria-expanded="true"] .icon {
    transform: rotate(180deg);
}

/* ---------- Account settings ---------- */

.account__layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* One row of chips that scrolls sideways on a phone, bled to the screen edge so the first chip lines up with the page */
.account__nav {
    display: flex;
    gap: 8px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
}

.account__nav .filter-chip {
    flex: none;
    text-decoration: none;
}

.account__groups {
    display: flex;
    flex-direction: column;
    gap: 48px;
    min-width: 0;
}

.account__group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-margin-top: calc(var(--header-height) + 16px);
}

.account__group:focus {
    outline: none;
}

.account__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: 16px;
    align-items: start;
}

.account__group-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

@media (min-width: 900px) {
    .account__layout {
        display: grid;
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 64px;
        align-items: start;
    }

    .account__nav {
        position: sticky;
        top: calc(var(--header-height) + 24px);
        flex-direction: column;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .account__nav .filter-chip {
        justify-content: flex-start;
    }
}

/* Theme, weight and length side by side where they fit, each choice is only two buttons wide */
.account__segs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
}

.set-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

/* The plate calculator links here with #plates, focus lands on the card and shows where it is */
.set-card:focus {
    outline: none;
}

.set-card:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.set-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.set-card__desc {
    margin: -6px 0 0;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.55;
}

.set-card .segmented {
    align-self: flex-start;
}

.plate-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.plate-chips .filter-chip {
    min-width: 56px;
    justify-content: center;
    font-family: var(--font-mono);
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--touch-target);
    font-size: 14px;
}

.toggle-row__text {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

.toggle-row__text small {
    color: var(--color-text-muted);
    font-size: 12px;
}

/* The knob is a pseudo-element, the button itself is the 44px tap area around the drawn track */
.switch {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg);
    cursor: pointer;
}

.switch::before {
    content: "";
    position: absolute;
    inset: -9px 0;
}

.switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--color-text-muted);
}

@media (prefers-reduced-motion: no-preference) {
    .switch::after {
        transition: left var(--transition), background var(--transition);
    }
}

/* The frame stays grey when on, the tint and the knob are enough, an orange frame too was one signal more than needed */
.switch[aria-checked="true"] {
    background: var(--color-accent-subtle);
}

.switch[aria-checked="true"]::after {
    left: 21px;
    background: var(--color-accent-fill);
}

.switch:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.account__confirm {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    font-size: 14px;
}

.account__confirm[hidden] {
    display: none;
}

.account__confirm p {
    margin: 0;
}

/* ---------- Avatar photo ---------- */

/* The round avatars clip the square photo, the same element shows a letter when there is none */
.top-nav__avatar,
.avatar-lg {
    overflow: hidden;
}

.avatar__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-lg.is-loading {
    opacity: 0.5;
}

/* ---------- Account settings, 7b ---------- */

.account__slot {
    display: contents;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.account-form .btn,
.account__left {
    align-self: flex-start;
}

.photo-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Buttons keep their own width in the settings cards, the shared .btn-row stretches them to fill a phone row */
.set-card .btn-row .btn {
    flex: 0 0 auto;
}

.photo-row__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* The real file input is hidden inside the label, so the button look and the keyboard focus both come from the label */
.photo-row__pick {
    position: relative;
    cursor: pointer;
}

.photo-row__pick:has(input:focus-visible) {
    box-shadow: var(--focus-ring);
}

.account__email {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
}

.device {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 12px;
    padding: 10px 0;
    border-top: 1px solid var(--color-border);
    font-size: 14px;
}

.device small {
    grid-column: 1;
    color: var(--color-text-muted);
    font-size: 12px;
}

.device .btn,
.device .chip {
    grid-row: 1 / span 2;
    grid-column: 2;
}

.set-card--danger {
    border-color: var(--color-danger-border);
}

.set-card--danger .btn {
    align-self: flex-start;
}

/* ---------- Import ---------- */

/* The import dialog is wider than the other sheets on desktop, the match list reads better on one line */
@media (min-width: 768px) {
    .sheet.sheet--wide {
        width: 720px;
        max-width: calc(100vw - 48px);
    }
}

.import__intro {
    margin: 0;
}

.import__step {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.import__how {
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.import__how .disclosure {
    color: var(--color-text);
    font-weight: 600;
}

/* Wide enough to read as two buttons, at 8 px padding kg and lb looked like one small box */
.import__upload .segmented__item {
    min-width: 56px;
}

.import__how p {
    margin: 8px 0 0;
}

.import__upload .segmented {
    align-self: flex-start;
}

.steps-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.steps-bar li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.steps-bar li::before {
    content: "";
    height: 3px;
    background: var(--color-surface-raised);
}

.steps-bar li.is-done::before,
.steps-bar li[aria-current]::before {
    background: var(--color-accent-fill);
}

.steps-bar li[aria-current] {
    color: var(--color-text);
}

.file-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: 14px;
}

.file-card > .icon {
    width: 22px;
    height: 22px;
    color: var(--color-text-muted);
}

.file-card span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-card small {
    display: block;
    color: var(--color-text-muted);
    font-size: 12px;
}

.match {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 0;
    border-top: 1px solid var(--color-border);
}

.match__from {
    display: flex;
    flex-direction: column;
    font-size: 15px;
    font-weight: 500;
}

.match__from small {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 400;
}

/* ---------- File picker ---------- */

/* The whole row is the label, so a tap on the name opens the picker too */
.file-pick {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    cursor: pointer;
}

.file-pick .btn {
    flex: 0 0 auto;
    pointer-events: none;
}

/* A long file name is cut with an ellipsis instead of pushing the sheet wider than the phone */
.file-pick__name {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The input itself is hidden, so the keyboard focus ring is drawn on the button the label shows */
.file-pick:has(input:focus-visible) .btn {
    box-shadow: var(--focus-ring);
}

@media (hover: hover) {
    .file-pick:hover .btn {
        border-color: var(--color-text-muted);
        color: var(--color-text);
    }
}

.account__bio {
    min-height: 104px;
}

/* ---------- People ---------- */

.avatar {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: var(--radius-round);
    background: var(--color-surface-raised);
    color: var(--color-text);
    font: 800 17px/1 var(--font-display);
    text-decoration: none;
}

.avatar--sm {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.people {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.person {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 10px 16px;
}

.person + .person {
    border-top: 1px solid var(--color-border);
}

.person__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.person__name {
    overflow: hidden;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.person__sub {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The follow button keeps one width through Follow, Requested and Following, so the row doesn't jump */
.follow-btn {
    min-width: 104px;
}

.btn--on {
    border-color: var(--color-border-subtle);
    color: var(--color-text);
}

.find {
    gap: 32px;
}

/* No search yet, so the empty slot must not add a second gap under the field */
.find__results:empty {
    display: none;
}

/* A back link above a page title belongs to it, the page gap would push them apart */
.back-link {
    align-self: flex-start;
    margin-bottom: -16px;
}

/* From 768px the Feed tab in the top nav is the way back, the phone has no top menu and keeps the link */

@media (min-width: 768px) {
    .back-link--phone {
        display: none;
    }
}

.people-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- Bell ---------- */

.icon-btn--dot {
    position: relative;
}

.icon-btn--dot::after {
    content: "";
    position: absolute;
    top: 11px;
    right: 11px;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-round);
    background: var(--color-accent-fill);
    box-shadow: 0 0 0 2px var(--color-bg);
}

/* The panel is placed against this wrapper, so it opens right under the bell */
.top-nav__bell-wrap {
    position: relative;
    display: inline-flex;
}

/* Phones get the link to the Activity page, from 768px the button opens the panel instead */
.top-nav__bell--panel {
    display: none;
}

@media (min-width: 768px) {
    .top-nav__bell--link {
        display: none;
    }

    .top-nav__bell--panel {
        display: inline-flex;
    }
}

.top-nav__bell--panel[aria-expanded="true"] {
    color: var(--color-accent);
}

/* Anchored under the bell, wide enough for a comment line and capped so a long list scrolls inside */
.activity-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: -8px;
    z-index: var(--z-dropdown);
    display: flex;
    flex-direction: column;
    width: 400px;
    max-height: min(72vh, 600px);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-md);
}

.activity-panel[hidden] {
    display: none;
}

.activity-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--color-border);
}

.activity-panel__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
}

.activity-panel__title:focus {
    outline: none;
}

.activity-panel__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 16px 8px 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* The empty state is made for a page, in the panel it loses its box and most of its height */
.activity-panel__body .empty-state {
    padding: 16px 0;
    border: 0;
    background: none;
}

.activity-panel__note {
    margin: 0;
}

.top-nav__bell[aria-current] {
    color: var(--color-accent);
}

/* ---------- Activity ---------- */

.activity-list {
    display: flex;
    flex-direction: column;
}

.activity-item {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--color-border);
}

.activity-item:first-child {
    border-top: 0;
}

/* The dot sits in the gutter left of the avatar, so new rows line up with the read ones */
.activity-item.is-new::before {
    content: "";
    position: absolute;
    top: 30px;
    left: -12px;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-round);
    background: var(--color-accent-fill);
}

.activity-item__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.activity-item__text a {
    color: var(--color-text);
    text-decoration: none;
}

.activity-item__text b {
    font-weight: 600;
}

.activity-item__time {
    display: block;
    color: var(--color-text-muted);
    font-size: 12px;
}

.activity-item__answer {
    margin-top: 10px;
}

.activity-item__answer .btn {
    flex: 0 0 auto;
}

.activity-item__done {
    display: block;
    margin-top: 8px;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* ---------- Profile ---------- */

/* Avatar in front of the name, like the You page header */
.page-header--person {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

.page-header--person .page-header__text {
    flex: 1;
    min-width: 0;
}

.profile__bio {
    margin: 6px 0 0;
    max-width: 60ch;
    font-size: 15px;
    line-height: 1.5;
}

.profile-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
    color: var(--color-text-muted);
    font-size: 13px;
}

.profile-counts b {
    color: var(--color-text);
    font-family: var(--font-mono);
    font-weight: 500;
}

/* text-btn is inline-flex, which drops the space between number and word, so the gap puts it back */
.profile-counts__btn {
    gap: 0.3em;
    padding: 0;
    color: inherit;
    font: inherit;
    text-transform: none;
    letter-spacing: 0;
}

.profile__actions {
    align-self: center;
}

.profile__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* The counts follow .split: under the name while it is one column, under the stats once the side column exists */
.profile-counts--side {
    display: none;
}

@media (min-width: 900px) {
    .profile-counts--head {
        display: none;
    }

    .profile-counts--side {
        display: flex;
        margin-top: 0;
    }
}

.profile__more {
    position: relative;
}

.profile__more-btn {
    border: 1px solid var(--color-border-subtle);
}

/* The avatar, name and button wrap under each other on a phone, the name would be squeezed next to them */
@media (max-width: 767px) {
    .profile .page-header--person {
        flex-wrap: wrap;
    }

    .profile .page-header--person .page-header__text {
        flex: 1 1 calc(100% - 80px);
    }

    .profile__actions {
        flex: 1 1 100%;
        flex-wrap: nowrap;
    }

    .profile__actions .follow-btn {
        flex: 1;
    }
}

/* While .split is one column the stats come before Recent, the phone design reads numbers first */
@media (max-width: 899px) {
    .profile .split__side {
        order: -1;
    }
}

/* ---------- Posts ---------- */

.feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feed__more {
    align-self: center;
}

/* Bottom padding is small because the action row has its own touch height */
.post {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 16px 4px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.post__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: center;
}

.post__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.post__who > a {
    color: var(--color-text);
    text-decoration: none;
}

.post__meta {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.post__meta a {
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
}

.post__more {
    position: relative;
    margin-right: -10px;
}

.post__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    text-wrap: balance;
}

.post__title a {
    color: inherit;
    text-decoration: none;
}

.post__caption {
    margin: -4px 0 0;
    font-size: 15px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.mention {
    color: var(--color-accent);
    text-decoration: none;
}

/* The strip keeps its dividers but sits flat inside the card, it has no box of its own here */
.post__stats {
    padding: 0;
    background: none;
    border: 0;
}

.post__record {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-pr-bg);
    font-size: 14px;
}

.post__record .icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: var(--color-pr);
}

.post__record b {
    font-weight: 600;
}

.post__record-more {
    color: var(--color-text-muted);
    font-size: 13px;
}

.post__record-val {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-pr);
    white-space: nowrap;
}

/* Bleeds to the card edges like the design, the negative margin matches .post padding */
.post__media {
    position: relative;
    margin: 0 -16px;
}

.post__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.post__track::-webkit-scrollbar {
    display: none;
}

.post__track:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.post__slide {
    flex: 0 0 100%;
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-surface-raised);
    scroll-snap-align: start;
}

.post__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post__slide--workout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 16px;
    overflow-y: auto;
}

.post__count {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-scrim);
    color: var(--color-on-scrim);
    font: 500 12px/1.5 var(--font-mono);
}

.post__nav {
    display: none;
    position: absolute;
    top: calc(50% - 30px);
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-round);
    background: var(--color-scrim);
    color: var(--color-on-scrim);
    cursor: pointer;
}

.post__nav .icon {
    width: 18px;
    height: 18px;
}

.post__nav--prev {
    left: 12px;
}

.post__nav--next {
    right: 12px;
}

/* Arrows only for a mouse, a finger swipes, and [hidden] still wins at the first and last slide */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .post__nav:not([hidden]) {
        display: flex;
    }
}

.post__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px 0 0;
}

.post__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-round);
    background: var(--color-border-subtle);
}

.post__dot.is-on {
    background: var(--color-accent-fill);
}

.post-exercise {
    display: flex;
    flex-direction: column;
}

.post-exercise__head {
    margin: 0 0 4px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}

.post-exercise__row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
    padding: 8px 0;
    border-top: 1px solid var(--color-border);
    font-size: 14px;
}

.post-exercise__sets,
.post-exercise__best {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.post-exercise__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-exercise__best.is-pr {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-pr);
}

.post-exercise__best .icon {
    width: 12px;
    height: 12px;
}

.post-exercise__more {
    align-self: flex-start;
    padding: 6px 0 0;
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: none;
}

/* The row runs to the card edges, the -8px pulls the first button's padding back in line with the text */
.post__actions {
    display: flex;
    align-items: center;
    margin: 0 -8px;
    border-top: 1px solid var(--color-border);
}

.reaction {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--touch-target);
    padding: 0 10px;
    border: 0;
    background: none;
    color: var(--color-text-muted);
    font: 500 13px var(--font-body);
    text-decoration: none;
    cursor: pointer;
}

.reaction .icon {
    width: 18px;
    height: 18px;
}

.reaction__n {
    font-family: var(--font-mono);
    color: var(--color-text);
}

.reaction.is-on,
.reaction.is-on .reaction__n {
    color: var(--color-accent);
}

.reaction--end {
    margin-left: auto;
    color: var(--color-text);
}

.reaction:disabled {
    cursor: default;
    opacity: 0.6;
}

.post__status:empty {
    display: none;
}

.post__status {
    margin: -6px 0 6px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.post__comments {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 12px;
    font-size: 14px;
    line-height: 1.45;
}

.comment-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.comment-list:empty {
    display: none;
}

.comment {
    margin: 0;
    overflow-wrap: anywhere;
}

.comment a {
    color: var(--color-text);
    text-decoration: none;
}

.comment b {
    font-weight: 600;
}

.comment .mention {
    color: var(--color-accent);
}

/* On the post page each comment is avatar plus text, with the time and actions on a quiet line underneath */
.comment--full {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
}

.comment--full + .comment--full {
    border-top: 1px solid var(--color-border);
}

.comment__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.comment__text {
    margin: 0;
}

.comment__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 14px;
    margin: 0;
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Small text, but the padding keeps a touch target of 32px around it */
.comment__action {
    min-height: 44px;
    margin: -12px 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--color-text-muted);
    font: 600 12px var(--font-body);
    cursor: pointer;
}

.comment__action--danger[data-confirming],
.comment__action--danger:focus-visible {
    color: var(--color-danger);
}

@media (hover: hover) {
    .comment__action:hover {
        color: var(--color-text);
    }

    .comment__action--danger:hover {
        color: var(--color-danger);
    }
}

.post__all {
    align-self: flex-start;
    min-height: 0;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
}

.comment-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment-form .field__input {
    flex: 1;
    min-width: 0;
    min-height: var(--touch-target);
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 14px;
}

.comment-form__post {
    padding: 0 4px;
    color: var(--color-accent);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.post-mini {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}

.post-mini__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
}

.post-mini__meta {
    grid-row: 2;
    font-size: 13px;
    color: var(--color-text-muted);
}

.post-mini__respect {
    display: inline-flex;
    grid-row: 1 / 3;
    grid-column: 2;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 13px;
}

.post-mini__respect .icon {
    width: 18px;
    height: 18px;
}

.post-respect {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

.post-respect .icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: var(--color-accent);
}

.post-respect a {
    color: var(--color-text);
    text-decoration: none;
}

/* ---------- Share ---------- */

.share-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

/* The preview only earns its place next to the form, on a phone it would double the page */
.share-layout__preview {
    display: none;
}

@media (min-width: 900px) {
    .share-layout {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .share-layout__preview {
        position: sticky;
        top: calc(var(--header-height) + 24px);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
}

/* Inert already blocks clicks, the cursor says the same */
.share-preview {
    cursor: default;
}

.share-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.share-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.share-photo {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-surface-raised);
}

.share-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.share-photo__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-round);
    background: var(--color-scrim);
    color: var(--color-on-scrim);
    cursor: pointer;
}

/* The tap area is larger than the drawn size, the look stays the same */
.share-photo__remove::before {
    content: "";
    position: absolute;
    inset: -6px;
}

.share-photo__remove .icon {
    width: 16px;
    height: 16px;
}

.share-photo--add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px dashed var(--color-border-subtle);
    background: none;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.share-photo--add .icon {
    width: 22px;
    height: 22px;
    color: var(--color-accent);
}

/* The real file input is hidden, so the tile shows the focus ring for keyboard users */
.share-photo--add:has(input:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.share-form__caption {
    min-height: 112px;
}

.share-place {
    position: relative;
}

.share-place > .icon {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    color: var(--color-text-muted);
}

.share-place .field__input {
    width: 100%;
    padding-left: 42px;
}

.share-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.share-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--touch-target);
    padding: 0 4px 0 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    font-size: 14px;
}

.share-tag__remove {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
}

/* The tap area is larger than the drawn size, the look stays the same */
.share-tag__remove::before {
    content: "";
    position: absolute;
    inset: -6px;
}

.share-tag__remove .icon {
    width: 16px;
    height: 16px;
}

.share-form__actions .btn {
    flex: 1;
}

.share-form .field__error:empty {
    display: none;
}

/* ---------- Activity, 8b ---------- */

.activity-item__faces {
    position: relative;
    width: 48px;
    height: 40px;
}

/* The second face sits behind and to the right, the ring keeps the two apart on any background */
.activity-item__faces .avatar {
    position: absolute;
    top: 0;
    left: 14px;
    box-shadow: 0 0 0 2px var(--color-bg);
}

.activity-item__faces .avatar:first-child {
    left: 0;
    z-index: 1;
}

.activity-item__post {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.activity-item__quote {
    color: var(--color-text-muted);
}

/* ---------- Badges ---------- */

/* Badges are typographic like the design, a number and a unit, no pictures of medals */
.badge-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    aspect-ratio: 1;
    min-width: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
}

.badge-tile b {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: var(--tracking-snug);
    color: var(--color-text-disabled);
}

.badge-tile small {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.badge-tile.is-earned {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent);
}

.badge-tile.is-earned b {
    color: var(--color-accent);
}

.badge-tile .icon {
    width: 16px;
    height: 16px;
    margin-bottom: 2px;
    color: var(--color-text-disabled);
}

.badge-tile.is-earned .icon {
    color: var(--color-accent);
}

/* Four digits like 1000 need a smaller number to stay inside the square on a phone */
.badge-tile--long b {
    font-size: 26px;
}

/* The small one takes an avatar's place in Activity and in a feed card */
.badge-tile--sm {
    width: 40px;
    flex: 0 0 40px;
}

/* No room for an icon in the small tile, the number says enough */
.badge-tile--sm .icon {
    display: none;
}

.badge-tile--sm b {
    font-size: 17px;
}

.badge-tile--sm small {
    display: none;
}

/* As many tiles as fit, four on a phone, so a group of six fills a wide row instead of wrapping at four */
.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 20px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.badge-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.badge-cell__name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.badge-cell__sub {
    font-size: 12px;
    line-height: 1.3;
    color: var(--color-text-muted);
}

.badge-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.badge-strip .badge-tile b {
    font-size: 24px;
}

.badge-strip .badge-tile small {
    font-size: 12px;
}

.badge-next {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.badge-next .badge-tile b {
    font-size: 24px;
}

.badge-next .badge-tile small {
    font-size: 12px;
}

.badge-next__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.badge-next__title {
    margin: 0;
    font-weight: 600;
}

.badge-next__text .muted {
    margin: 0;
    font-size: 13px;
}

.meter {
    display: block;
    height: 6px;
    background: var(--color-surface-raised);
}

.meter--thin {
    height: 4px;
}

.meter__fill {
    display: block;
    height: 100%;
    background: var(--color-accent-fill);
}

/* The next badge comes first on a phone, the side column with it is below the groups otherwise */
@media (max-width: 899px) {
    .badges-page .split__side {
        order: -1;
    }
}

/* Feed card for a badge: tile, one sentence, respect, the same box as a workout post but one row */
.post--badge {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
}

.post--badge .badge-tile b {
    font-size: 20px;
}

.post--badge .badge-tile small {
    font-size: 12px;
    letter-spacing: var(--tracking-wide);
}

.post__badge-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.post__badge-line {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
}

.post__badge-line a {
    color: var(--color-text);
    text-decoration: none;
}

.post__badge-line b {
    font-weight: 600;
}

.post--badge .post__more {
    margin-right: -10px;
}

/* ---------- Challenges ---------- */

.challenge-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.challenge-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.challenge-card__title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-text);
    text-decoration: none;
}

.challenge-card__meta {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.challenge-card__meta b {
    font-weight: 500;
    color: var(--color-text);
}

.challenge-card__desc,
.challenge-card__sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.challenge-card .btn-row .btn {
    flex: 0 0 auto;
}

/* One cell per workout of the target, a target over 30 still fits because the cells shrink */
.challenge-bar {
    display: flex;
    gap: 4px;
}

.challenge-bar__cell {
    flex: 1;
    min-width: 2px;
    height: 8px;
    background: var(--color-surface-raised);
}

.challenge-bar__cell.is-on {
    background: var(--color-accent-fill);
}

.challenge-page .challenge-bar__cell {
    height: 26px;
}

.challenge-you {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--color-text-muted);
}

.challenge-you b {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-text);
}

.challenge-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-text-muted);
}

.challenge-facts b {
    font-weight: 500;
    color: var(--color-text);
}

.challenge-weeks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.challenge-week {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.challenge-week__label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}

.challenge-week__count {
    font-family: var(--font-mono);
    font-size: 16px;
}

.challenge-week__count {
    white-space: nowrap;
}

/* Four weeks side by side on a phone, "120 / 120" has to fit a quarter of 390px */
@media (max-width: 767px) {
    .challenge-week {
        padding: 10px 8px;
    }

    .challenge-week__count {
        font-size: 13px;
    }
}

.challenge-week__unit {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
}

.challenge-week.is-kept .challenge-week__count {
    color: var(--color-logged);
}

.challenge-week.is-current {
    border-color: var(--color-accent);
}

.challenge-person__meter {
    width: 72px;
    height: 4px;
}

.challenge-leave {
    align-self: flex-start;
}

.challenge-meter {
    height: 8px;
}

.challenge-page .challenge-meter {
    height: 26px;
}

.challenge-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.challenge-side > .btn {
    align-self: flex-start;
}

/* The place sits outside the person row, so the row keeps the same grid as every other list of people */
.challenge-rank {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.challenge-rank__row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
}

.challenge-rank__row + .challenge-rank__row {
    border-top: 1px solid var(--color-border);
}

.challenge-rank__row .person {
    padding-left: 0;
}

.challenge-rank__row.is-self {
    background: var(--color-surface-raised);
}

.challenge-rank__place {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    color: var(--color-text-muted);
}

.challenge-rank__row.is-first .challenge-rank__place {
    color: var(--color-accent);
}

.challenge-rank + .muted {
    margin-top: 10px;
}

.challenge-rank__percent {
    font-family: var(--font-mono);
    font-size: 15px;
}

.challenge-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* .field is a flex column, which would otherwise win over the hidden attribute on the fields the rule doesn't use */
.challenge-form .field[hidden] {
    display: none;
}

.challenge-form__rules {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Same filled options as the report sheet, the fill is on the options so it doesn't run up behind the legend */
.challenge-form__rules .option {
    min-height: 60px;
    padding-block: 10px;
    background: var(--color-surface);
}

.option__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.option__text small {
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.challenge-form__exercise {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--touch-target);
    padding: 0 6px 0 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: 14px;
}

.challenge-form__summary {
    margin: 0;
    padding: 12px 14px;
    border-left: 2px solid var(--color-accent);
    background: var(--color-surface);
    font-size: 14px;
    line-height: 1.5;
}

.challenge-form__summary:empty {
    display: none;
}

.challenge-form__actions .btn {
    flex: 1;
}

/* On a phone the joined challenge sits above the posts, from 900px it is in the side column instead */
@media (min-width: 900px) {
    .feed__challenge {
        display: none;
    }
}

/* ---------- Invite ---------- */

.invite {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.invite .muted {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
}

.invite__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.invite__url {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-text-muted);
}

.invite__row .btn {
    flex: 0 0 auto;
}

/* ---------- Report ---------- */

.report {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.report__quote {
    margin: 0;
    padding: 12px 14px;
    background: var(--color-surface-raised);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.report__quote cite {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-style: normal;
}

.report__reasons {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 0;
}

.report__reasons legend {
    margin-bottom: 10px;
    padding: 0;
}

/* The fill is on the options and not the fieldset, otherwise it runs up behind the legend */
.report__reasons .option {
    background: var(--color-surface-raised);
}

.option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 14px;
    font-size: 14px;
    cursor: pointer;
}

.option + .option {
    border-top: 1px solid var(--color-border);
}

/* The real radio stays in the page for keyboards and screen readers, the dot next to it is what is seen */
.option input {
    position: absolute;
    margin: 0;
    opacity: 0;
}

.option__dot {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-round);
    background: var(--color-surface);
}

.option input:checked + .option__dot {
    border: 6px solid var(--color-accent);
}

.option input:focus-visible + .option__dot {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.report .btn-row .btn {
    flex: 1;
}

.activity-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-round);
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
}

/* ---------- Format clock (EMOM, AMRAP, interval, flow) ---------- */

/* The clock is the page on a timed workout, so it gets the size a timer on a gym wall would have */
.format-clock {
    gap: 14px;
}

.format-clock__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.format-clock__slot {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}

.format-clock__time {
    font-family: var(--font-mono);
    font-size: 52px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--tracking-tighter);
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
}

.format-clock__time.is-rest {
    color: var(--color-text-muted);
}

.format-clock__now {
    font-size: 18px;
}

.format-clock__next,
.format-clock__left {
    font-size: 13px;
}

.format-clock__score {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

.format-clock__rounds {
    display: flex;
    align-items: center;
    gap: 12px;
}

.format-clock__rounds-n b {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 500;
}

.format-clock__reps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 160px;
}

@media (min-width: 768px) {
    .format-clock__time {
        font-size: 64px;
    }
}

/* ---------- Disclosure ---------- */

/* The <summary> of a <details>, the browser opens and closes it itself, the site's own arrow turns instead of the browser's triangle */
.disclosure {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    min-height: var(--touch-target);
    cursor: pointer;
    list-style: none;
}

.disclosure::-webkit-details-marker {
    display: none;
}

.disclosure > .icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    transition: transform var(--transition);
}

[open] > .disclosure > .icon {
    transform: rotate(180deg);
}

/* As big as a section heading, for a list folded away at the end of a page */
.disclosure--title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: var(--tracking-normal);
    text-transform: uppercase;
}

/* ---------- Hover and motion ---------- */

/* Hover only where there is a mouse, a phone would keep the hover look on whatever was tapped last */
@media (hover: hover) {
    .nav-row:hover {
        background: var(--color-surface-raised);
    }

    /* A chip that is on keeps its accent border */
    .filter-chip:hover:not(.is-on, [aria-pressed="true"], :has(input:checked)) {
        border-color: var(--color-text-muted);
    }

    .segmented__item:hover {
        color: var(--color-text);
    }

    .pick:hover .pick__dot {
        border-color: var(--color-text-muted);
    }

    .link-strong:hover {
        color: var(--color-text);
    }

    /* The card already gets a lighter border, the title in the accent says which part of it is the link */
    .list-card:hover .list-card__title,
    .challenge-card__title:hover,
    .person__name:hover {
        color: var(--color-accent);
    }
}

/* Pressed is hover's counterpart for a finger: it shows the moment the press lands, so it never eases in, and where
   hover already changes something it goes one step further. Without a mouse it is the only sign that a tap arrived */
.nav-row:active,
.account-menu__item:active,
.icon-btn:active {
    background: var(--color-border);
}

.list-card:active:not(:has(.btn:active)),
.session-card:active,
.you-card:active {
    background: var(--color-surface-raised);
}

.filter-chip:active:not(.is-on, [aria-pressed="true"], :has(input:checked)) {
    border-color: var(--color-text);
}

.segmented__item:active:not([aria-current], [aria-pressed="true"]),
.set-log-card__check:not(.is-done):active {
    background: var(--color-surface-raised);
    color: var(--color-text);
}

.bottom-nav__item:active,
.top-nav__item:active,
.text-btn:active,
.link-strong:active,
.site-footer__link:active,
.comment__action:active {
    color: var(--color-text);
}

.section-head__link:active {
    color: var(--color-accent);
}

/* Our own pressed state replaces the browser's grey flash on these */
.nav-row,
.account-menu__item,
.icon-btn,
.list-card,
.session-card,
.you-card,
.filter-chip,
.segmented__item,
.set-log-card__check,
.top-nav__item,
.text-btn,
.link-strong,
.site-footer__link,
.comment__action,
.section-head__link {
    -webkit-tap-highlight-color: transparent;
}

/* Every control eases the same way, and one system setting for less motion turns all of it off */
@media (prefers-reduced-motion: no-preference) {
    .icon-btn,
    .text-btn,
    .link-strong,
    .nav-row,
    .filter-chip,
    .segmented__item,
    .pick__dot,
    .list-card__title,
    .challenge-card__title,
    .person__name,
    .top-nav__item,
    .section-head__link,
    .bottom-nav__item,
    .session-card,
    .you-card,
    .account-menu__item,
    .comment__action,
    .site-footer__link,
    .set-log-card__title a,
    .structure__name,
    .set-log-card__check,
    .switch,
    .plates__plate {
        transition: background-color var(--transition), border-color var(--transition), color var(--transition);
    }

    /* A small control gives a little under the press, the same 0.985 idea as the buttons but more, it has less surface to show it */
    .icon-btn,
    .set-log-card__check {
        transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
    }

    .icon-btn:active,
    .set-log-card__check:active {
        transform: scale(0.94);
    }

    .muscle-map__m {
        transition: fill var(--transition);
    }

    /* Just logged: the check lands instead of appearing, the list is drawn again on every change so only a keyframe can show it */
    .set-log-card__check.is-new {
        animation: check-pop var(--transition-medium);
    }

    /* No fill mode, so the page keeps no transform afterwards, a transform would make it the box that fixed and sticky children follow */
    #app > .page {
        animation: page-in var(--transition-medium);
    }

    .sheet[open] {
        animation: sheet-in 220ms cubic-bezier(0.2, 0, 0, 1);
    }

    .sheet[open]::backdrop {
        animation: fade-in 220ms ease-out;
    }

    /* Out the way it came in. A browser without discrete transitions closes at once, as before */
    .sheet {
        transition: opacity 160ms ease-in, transform 160ms ease-in, overlay 160ms allow-discrete, display 160ms allow-discrete;
    }

    .sheet:not([open]) {
        opacity: 0;
        transform: translateY(24px);
        pointer-events: none;
    }

    .sheet::backdrop {
        transition: opacity 160ms ease-in, overlay 160ms allow-discrete, display 160ms allow-discrete;
    }

    .sheet:not([open])::backdrop {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .sheet:not([open]) {
        transform: scale(0.97);
    }
}

@keyframes page-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

/* Up from the bottom edge like a phone's own sheets, from 768px the dialog in the middle grows a little instead */
@keyframes sheet-in {
    from {
        transform: translateY(24px);
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes check-pop {
    from {
        transform: scale(0.86);
    }
}

@media (min-width: 768px) {
    @keyframes sheet-in {
        from {
            transform: scale(0.97);
            opacity: 0;
        }
    }
}