.workout-history-screen .page-content { position: relative; isolation: isolate; }
.workout-history-screen .page-content > header,
.workout-history-screen .page-content > main,
.workout-history-screen .page-content > footer { position: relative; z-index: 1; }
.workout-history-screen .page-content > header { z-index: 40; }

.workout-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

#workoutSearch {
    width: 265px;
    padding: 11px 14px;
    background-color: var(--soft-bg);
    color: white;
    border: 1px solid var(--border);
    border-radius: 8px;
}

#workoutSearch:focus,
#workoutSort:focus {
    outline: none;
    border-color: var(--accent);
}

.workout-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.workout-filter {
    padding: 9px 14px;
    background-color: var(--soft-bg);
    color: #66667a;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
}

.workout-filter:hover,
.workout-filter.active {
    background-color: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
}

.workout-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: #66667a;
    font-size: 12px;
}

#workoutSort {
    padding: 9px 10px;
    background-color: var(--soft-bg);
    color: white;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.workout-list {
    width: 100%;
    max-width: 1280px;
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 20px;
}

.workout-card {
    --body-part-color: var(--accent);
    position: relative;
    background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--body-part-color) 11%, transparent), transparent 68%), color-mix(in srgb, var(--panel-bg) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--body-part-color) 30%, var(--border));
    border-radius: 12px;
    min-width: 0;
    padding: 20px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), 0 12px 28px rgb(0 0 0 / 8%);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

@media (hover: hover) {
    .workout-card:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--body-part-color) 54%, var(--border));
        box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 9%, transparent), 0 16px 34px color-mix(in srgb, var(--body-part-color) 14%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .workout-card { transition: none; }
    .workout-card:hover { transform: none; }
}

.workout-card-skeleton {
    display: grid;
    min-height: 190px;
    align-content: start;
    gap: 20px;
}

.workout-card-skeleton .skeleton-line:first-child { width: 45%; height: 18px; }
.workout-card-skeleton .skeleton-line:nth-child(2) { width: 82%; }
.workout-card-skeleton .skeleton-line:nth-child(3) { width: 64%; }


.workout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}

.workout-header h2 { font-size: 20px; text-transform: capitalize; color: var(--body-part-color); }
.workout-header span { color: #66667a; font-size: 14px; }
.workout-actions { display: flex; align-items: center; gap: 14px; }
.edit-workout-button,
.save-workout-button,
.cancel-edit-button,
.delete-workout-button {
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}
.edit-workout-button,
.cancel-edit-button { background-color: var(--soft-bg); color: white; }
.edit-workout-button:hover,
.cancel-edit-button:hover { border-color: var(--accent); color: var(--accent); }
a.edit-workout-button { text-decoration: none; font-size: 13px; }
.workout-private-note { display: grid; gap: 5px; margin-top: 13px; padding: 11px 12px; background: color-mix(in srgb, var(--accent) 6%, var(--muted-bg)); border-left: 2px solid var(--accent); color: #aaaabb; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.workout-private-note strong { color: var(--accent); font-size: 12px; }
.add-edit-exercise-button { align-self: flex-start; padding: 9px 12px; background-color: transparent; color: var(--accent); border: 1px dashed var(--accent); border-radius: 6px; cursor: pointer; font-weight: bold; }
.add-edit-exercise-button:hover { background-color: var(--soft-bg); }
.save-workout-button { background-color: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.delete-workout-button { background-color: transparent; color: #ff6b6b; border-color: #ff6b6b; font-size: 13px; }
.exercise-list { display: flex; flex-direction: column; }
.workout-exercise-group + .workout-exercise-group {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.workout-exercise-group h3 {
    margin-bottom: 4px;
    color: var(--body-part-color);
    font-size: 12px;
    font-weight: bold;
    text-transform: capitalize;
}
.exercise-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px 68px;
    padding: 11px 0;
    border-bottom: 1px solid var(--soft-bg);
    color: #aaaabb;
}
.exercise-row strong { color: white; }
.exercise-row-custom {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
.exercise-custom-sets,
.social-custom-sets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.exercise-custom-set,
.social-custom-set {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    background: var(--muted-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: #aaaabb;
    font-size: 12px;
    line-height: 1.3;
}
.exercise-custom-set-label { color: #858597; }
.exercise-custom-set-value { color: white; }
/* Set types: warm-ups are faded (they don't count), drop and failure sets get their own colour. */
.exercise-custom-set.is-warmup { opacity: .7; border-style: dashed; }
.exercise-custom-set.is-warmup .exercise-custom-set-label { color: #f2b84b; }
.exercise-custom-set.is-drop .exercise-custom-set-label { color: #7fb4ff; }
.exercise-custom-set.is-failure .exercise-custom-set-label { color: #ff6b6b; }
.workout-cardio-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: #aaaabb;
    font-size: 13px;
}
.workout-cardio-summary strong { color: #5ee28a; }
.workout-session-duration {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--muted-bg);
    border-radius: 6px;
    color: #aaaabb;
    font-size: 13px;
}
.workout-session-duration strong { color: var(--body-part-color); }
.no-workouts { color: #66667a; }

.run-results { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.run-results div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 15px;
    background-color: var(--muted-bg);
    border-radius: 8px;
}
.run-results strong { color: #66667a; font-size: 12px; }
.run-results span { color: white; font-size: 18px; font-weight: bold; }

/* Opening animation for the workout detail dialog. */
@keyframes workout-delete-enter {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1100px) {
    .workout-list {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

@media (max-width: 700px) {
    #workoutSearch { order: 1; width: auto; min-width: 0; flex: 1 1 0; }
    .workout-sort { order: 2; gap: 5px; margin-left: 0; font-size: 10px; }
    #workoutSort { max-width: 118px; padding: 9px 7px; font-size: 10px; }

    .workout-filters {
        order: 3;
        width: 100%;
        flex: 0 0 100%;
        flex-wrap: nowrap;
        gap: 7px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .workout-filters::-webkit-scrollbar { display: none; }
    .workout-filter { flex: 0 0 auto; min-height: 36px; padding: 8px 12px; scroll-snap-align: start; }

    .workout-list {
        grid-template-columns: 1fr;
    }

    .workout-sort {
        margin-left: 0;
    }
}

/* ----- Workout summary card: the whole card opens the workout ----- */
.workout-summary-card { display: grid; align-content: start; gap: 12px; cursor: pointer; }
.workout-summary-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.workout-summary-top time { color: var(--muted-text); font-size: 12px; font-weight: 600; }
.workout-best-badge { padding: 4px 9px; color: var(--accent-ink); background: var(--accent); border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .4px; box-shadow: none; }
.workout-pending-badge { padding: 4px 9px; color: var(--muted-text); background: var(--soft-bg); border: 1px dashed var(--border); border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .4px; }
.workout-summary-card h2 { margin: 0; font-size: 20px; line-height: 1.25; }
.workout-summary-open { padding: 0; color: var(--text); background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; text-align: left; text-transform: capitalize; }
/* Stretches the button over the card, so a tap anywhere opens it. */
.workout-summary-open::after { position: absolute; inset: 0; border-radius: inherit; content: ""; }
.workout-summary-open:focus-visible { outline: none; }
.workout-summary-card:has(.workout-summary-open:focus-visible) { outline: 2px solid var(--body-part-color); outline-offset: 3px; }
.workout-summary-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.workout-summary-stats li { display: grid; min-width: 0; gap: 2px; padding: 10px; background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid color-mix(in srgb, var(--text) 6%, transparent); border-radius: 8px; }
.workout-summary-stats strong { overflow: hidden; color: var(--text); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.workout-summary-stats span { color: var(--muted-text); font-size: 10px; }
.workout-summary-message { color: var(--muted-text); font-size: 13px; font-style: italic; line-height: 1.5; }
.workout-summary-more { justify-self: end; color: var(--body-part-color); font-size: 12px; font-weight: 700; opacity: .75; transition: opacity 160ms ease, transform 160ms ease; }
.workout-summary-card:hover .workout-summary-more { opacity: 1; transform: translateX(3px); }

/* ----- Workout details ----- */
.workout-detail-dialog { --body-part-color: var(--accent); width: min(640px, calc(100vw - 24px)); max-height: min(90vh, 860px); max-height: min(90dvh, 860px); margin: auto; padding: 0; overflow: hidden; color: var(--text); background: var(--panel-bg); border: 1px solid color-mix(in srgb, var(--body-part-color) 45%, var(--border)); border-radius: 16px; box-shadow: 0 24px 64px rgb(0 0 0 / 50%), 0 0 40px color-mix(in srgb, var(--body-part-color) 14%, transparent); }
.workout-detail-dialog::backdrop { background: rgb(7 9 13 / 72%); backdrop-filter: blur(5px); }
.workout-detail-dialog[open] { display: flex; animation: workout-delete-enter 220ms cubic-bezier(0.2, 0.75, 0.25, 1) both; }
.workout-detail-frame { position: relative; display: flex; width: 100%; min-height: 0; flex-direction: column; }
.workout-detail-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; color: var(--muted-text); background: color-mix(in srgb, var(--panel-bg) 80%, transparent); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 20px; line-height: 1; }
.workout-detail-close:hover { color: var(--text); }
.workout-detail-content { display: grid; min-height: 0; gap: 18px; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 22px; }
.workout-detail-hero { margin: 0 -24px; padding: 26px 64px 20px 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--body-part-color) 22%, transparent), transparent 70%); border-bottom: 1px solid color-mix(in srgb, var(--body-part-color) 25%, var(--border)); }
.workout-detail-kicker { color: var(--body-part-color); font-size: 12px; font-weight: 600; }
.workout-detail-hero h2 { margin-top: 6px; color: var(--text); font-size: 26px; line-height: 1.2; text-transform: capitalize; }
.workout-detail-date { margin-top: 4px; color: var(--muted-text); font-size: 13px; }
.workout-detail-message { padding: 14px 16px; color: var(--text); background: color-mix(in srgb, var(--body-part-color) 10%, transparent); border: 1px solid color-mix(in srgb, var(--body-part-color) 30%, var(--border)); border-radius: 10px; font-size: 15px; font-weight: 600; line-height: 1.45; }
.workout-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.workout-detail-stats li { display: grid; gap: 3px; padding: 12px 14px; background: var(--soft-bg); border: 1px solid var(--border); border-radius: 10px; }
.workout-detail-stats strong { color: var(--text); font-size: 20px; }
.workout-detail-stats span { color: var(--muted-text); font-size: 12px; }
.workout-detail-section { display: grid; gap: 8px; }
.workout-detail-section h3 { color: var(--muted-text); font-size: 12px; font-weight: 600; }
.workout-detail-section .workout-cardio-summary:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.workout-detail-section .workout-exercise-group h4 { margin-bottom: 4px; color: var(--body-part-color); font-size: 12px; font-weight: bold; text-transform: capitalize; }
.workout-detail-highlights { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.workout-detail-highlights li { position: relative; display: grid; gap: 2px; padding: 10px 12px 10px 38px; background: var(--soft-bg); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.workout-detail-highlights li::before { position: absolute; top: 10px; left: 12px; width: 18px; height: 18px; color: var(--muted-text); content: "•"; font-size: 15px; font-weight: 800; line-height: 18px; text-align: center; }
.workout-detail-highlights li span { color: var(--muted-text); font-size: 12px; }
.workout-detail-highlights .is-best,
.workout-detail-highlights .is-race { background: color-mix(in srgb, var(--accent) 8%, var(--soft-bg)); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.workout-detail-highlights .is-best::before,
.workout-detail-highlights .is-race::before { color: var(--accent); content: "★"; }
.workout-detail-highlights .is-up::before { color: var(--accent); content: "↑"; }
.workout-detail-highlights .is-down::before { content: "↓"; }
.workout-detail-highlights .is-streak::before { color: #ffb04d; content: "▲"; font-size: 12px; }
.workout-detail-highlights .is-first::before { color: #5ca7ff; content: "+"; }
.workout-detail-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--border); }
.workout-detail-actions .delete-workout-button { margin-right: auto; }

/* Half marathons and marathons: a medal on the card and in the detail, and a race card to share. */
.workout-summary-card.is-race { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), color-mix(in srgb, var(--panel-bg) 88%, transparent); }
.workout-race-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; font-size: 12px; font-weight: 600; }
.workout-race-badge svg,
.workout-race-medal svg,
.workout-race-share svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.workout-race-medal { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 7px 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 999px; font-size: 13px; font-weight: 700; }
.workout-race-medal svg { width: 18px; height: 18px; }
.workout-race-share:not(#race) { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent); border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: bold; }
.workout-race-share[hidden] { display: none !important; }
.workout-detail-done { padding: 8px 18px; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 8px; cursor: pointer; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
    .workout-detail-dialog[open] { animation: none; }
    .workout-summary-more { transition: none; }
}
@media (max-width: 600px) {
    .workout-detail-content { padding: 0 16px 18px; }
    .workout-detail-hero { margin: 0 -16px; padding: 22px 56px 16px 16px; }
    .workout-detail-hero h2 { font-size: 22px; }
    .workout-detail-actions { padding: 12px 16px; }
}