/* =========================================================================
   Workouts: the editor of the trainer environment (design 05-training, 1440 px), the Trainingen tab and library,
   and the Trainingen screens of the member app (390 px). Tokens: app.css :root.
   ========================================================================= */

:root {
    --tbm-violet: #8B3DFF;
    --tbm-violet-bg: rgba(139, 61, 255, 0.16);
    --tbm-row-a: rgba(231, 50, 114, 0.13);
    --tbm-row-b: rgba(10, 143, 184, 0.16);
    /* The third member of a trio: green. */
    --tbm-row-c: rgba(47, 191, 143, 0.15);
    --tbm-trio: #2FBF8F;
    --tbm-trio-fill: #11795A;
}

/* ---- Editor: header and three columns ----------------------------------- */

.tbm-weditor__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.tbm-weditor__titles .tbm-chips {
    margin-top: 14px;
}

.tbm-weditor__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tbm-weditor__save {
    min-width: 230px;
}

.tbm-weditor {
    display: grid;
    grid-template-columns: minmax(200px, 225px) minmax(0, 1fr) minmax(250px, 290px);
    gap: 20px;
    align-items: start;
}

.tbm-weditor__middle,
.tbm-weditor__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* A template: the blocks wide, the library as a narrow column on the right; the preview opens as a pop-up */
.tbm-weditor--template {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
}

.tbm-weditor--template .tbm-wlib {
    order: 2;
    position: sticky;
    top: 16px;
}

.tbm-weditor__name {
    min-width: 0;
    width: min(100%, 22ch);
    padding: 0 2px;
    border: 0;
    border-bottom: 2px dashed rgba(231, 50, 114, 0.45);
    background: transparent;
    color: var(--tbm-pink-accent);
    font: inherit;
    text-transform: inherit;
}

.tbm-weditor__name:focus {
    border-bottom-style: solid;
    outline: none;
}

.tbm-weditor__summary {
    margin: 6px 0 0;
    color: var(--tbm-text-secondary);
}

@media (max-width: 1279.98px) {
    .tbm-weditor {
        grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
    }

    .tbm-weditor--template {
        grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
    }

    .tbm-weditor__side {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

@media (max-width: 767.98px) {
    .tbm-weditor,
    .tbm-weditor--template {
        grid-template-columns: minmax(0, 1fr);
    }

    .tbm-weditor--template .tbm-wlib {
        position: static;
    }
}

.tbm-chip--muted {
    background: rgba(var(--tbm-overlay), 0.06);
    color: var(--tbm-text-secondary);
}

.tbm-winfo {
    padding: 12px 16px;
    border: 1px solid rgba(34, 211, 255, 0.35);
    border-radius: var(--tbm-radius);
    background: var(--tbm-blue-bg);
    font-size: 1.1rem;
}

.tbm-weditor__middle .tbm-admin-alert ul {
    margin: 0;
    padding-left: 18px;
}

/* ---- Library ---------------------------------------------------------- */

.tbm-wlib {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 16px;
    max-height: calc(100dvh - 32px);
}

.tbm-wlib .tbm-tcard__title {
    margin-bottom: 6px;
}

.tbm-wlib__label {
    font-weight: 700;
    font-size: 1.1rem;
}

.tbm-wlib__search {
    min-height: 44px;
    font-size: 1.15rem;
}

.tbm-wlib__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tbm-wpill {
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--tbm-radius-pill);
    background: var(--tbm-input-raised);
    color: var(--tbm-text);
    font-family: var(--tbm-font);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
}

.tbm-wpill--active {
    background: var(--tbm-text);
    color: var(--tbm-bg);
}

.tbm-wlib__list {
    flex: 1;
    min-height: 120px;
    margin: 4px 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.tbm-wlib__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--tbm-border);
    cursor: grab;
}

.tbm-wlib__item strong {
    display: block;
    font-size: 1.15rem;
}

.tbm-wlib__item .tbm-muted {
    font-size: 1rem;
}

.tbm-wlib__add {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--tbm-border-strong);
    border-radius: var(--tbm-radius);
    background: transparent;
    color: var(--tbm-pink-accent);
    cursor: pointer;
}

.tbm-wlib__add:hover {
    border-color: var(--tbm-pink-accent);
}

.tbm-wlib__empty {
    padding: 14px 0;
}

.tbm-wlib__new {
    align-self: flex-start;
    font-size: 1.1rem;
}

.tbm-wlib__hint {
    margin: 0;
    font-size: 0.98rem;
}

/* ---- Name and planning ------------------------------------------------ */

.tbm-wmeta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.tbm-wmeta__name {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tbm-wmeta__name-input {
    text-transform: uppercase;
}

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

.tbm-wmeta__who {
    align-self: flex-start;
}

.tbm-wplan {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tbm-wplan__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tbm-wseg {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--tbm-border);
    border-radius: var(--tbm-radius);
    background: var(--tbm-bg);
}

.tbm-wseg__item {
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--tbm-radius);
    background: transparent;
    color: var(--tbm-text);
    font-family: var(--tbm-font);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
}

.tbm-wseg__item--active {
    background: var(--tbm-text);
    color: var(--tbm-bg);
    font-weight: 700;
}

.tbm-wplan__days {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tbm-wday {
    width: 46px;
    height: 38px;
    border: 1px solid var(--tbm-border-strong);
    border-radius: var(--tbm-radius-pill);
    background: transparent;
    color: var(--tbm-text);
    font-family: var(--tbm-font);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
}

.tbm-wday--on {
    border-color: var(--tbm-pink);
    background: var(--tbm-pink);
    color: var(--tbm-on-pink);
}

.tbm-wplan__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tbm-wplan__field {
    display: flex;
    flex: 1 1 150px;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    color: var(--tbm-text-secondary);
    font-size: 1rem;
    font-weight: 600;
}

.tbm-wplan__field--small {
    flex: 0 1 120px;
}

.tbm-wplan__field .tbm-input,
.tbm-wplan__field .tbm-select {
    min-height: 42px;
    font-size: 1.1rem;
}

.tbm-wplan__switch {
    padding: 0;
    border: 0;
    background: none;
    color: var(--tbm-text-secondary);
    font: inherit;
    cursor: pointer;
}

.tbm-wplan__switch--on {
    color: var(--tbm-text);
    text-decoration: underline;
}

.tbm-wplan__summary {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--tbm-radius);
    background: rgba(var(--tbm-overlay), 0.04);
    font-size: 1.1rem;
    font-weight: 600;
}

/* ---- Voor wie --------------------------------------------------------- */

.tbm-wwho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    font-size: 1.15rem;
}

.tbm-wwho__option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border: 0;
    border-radius: var(--tbm-radius);
    background: none;
    color: var(--tbm-text-secondary);
    font: inherit;
    cursor: pointer;
}

.tbm-wwho__option--on {
    color: var(--tbm-text);
    font-weight: 700;
    background: rgba(var(--tbm-overlay), 0.05);
}

.tbm-wwho__dot {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.tbm-wwho__dot--both {
    background: var(--tbm-input-raised);
    border: 1px solid var(--tbm-border-strong);
}

.tbm-wwho__dot--a {
    background: var(--tbm-pink);
}

.tbm-wwho__dot--b {
    background: var(--tbm-chart-blue);
}

.tbm-wwho__dot--c {
    background: var(--tbm-trio);
}

/* ---- Blocks and rows -------------------------------------------------- */

.tbm-wblock {
    padding: 18px 20px 20px;
    border: 1px solid var(--tbm-border);
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
}

.tbm-wblock--active {
    border-color: var(--tbm-border-strong);
}

.tbm-wblock--drop {
    border-color: var(--tbm-pink);
}

.tbm-wblock__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* "2 oef." and the guideline of the TBM block behind ⓘ (hover or focus) */
.tbm-wblock__count {
    color: var(--tbm-text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.tbm-wblock__info {
    display: inline-flex;
    color: var(--tbm-text-secondary);
    cursor: help;
}

.tbm-wblock__info:hover,
.tbm-wblock__info:focus-visible {
    color: var(--tbm-pink-accent);
}

.tbm-wblock__handle,
.tbm-wrow__handle {
    color: var(--tbm-text-secondary);
    cursor: grab;
    user-select: none;
}

.tbm-wblock__number {
    color: var(--tbm-pink-accent);
    font-size: 1.7rem;
}

.tbm-wblock__title {
    flex: 1;
    min-width: 0;
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--tbm-text);
    font-family: var(--tbm-font);
    font-size: 1.7rem;
    font-weight: 700;
    text-transform: uppercase;
    transform: var(--tbm-skew);
    outline: none;
}

.tbm-wblock__title:hover,
.tbm-wblock__title:focus {
    border-color: var(--tbm-border-strong);
}

.tbm-wblock__duration {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--tbm-text-secondary);
    font-size: 1.1rem;
}

.tbm-wblock__duration input {
    width: 46px;
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--tbm-text-secondary);
    font: inherit;
    text-align: right;
    -moz-appearance: textfield;
}

.tbm-wblock__duration input:hover,
.tbm-wblock__duration input:focus {
    border-color: var(--tbm-border-strong);
    outline: none;
}

.tbm-wtable__head,
.tbm-wrow {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) 70px 104px minmax(0, 1.5fr) 50px 28px;
    gap: 8px;
    align-items: center;
}

/* A template: Oefening · Sets × reps · Rust */
.tbm-wtable--template .tbm-wtable__head,
.tbm-wtable--template .tbm-wrow {
    grid-template-columns: minmax(0, 1fr) 104px 64px 28px;
}

.tbm-wtable__head {
    padding: 0 4px 8px 11px;
    color: var(--tbm-text-secondary);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tbm-wrow {
    position: relative;
    margin-bottom: 8px;
    padding: 10px 4px 10px 8px;
    border-left: 3px solid transparent;
    border-radius: var(--tbm-radius);
    background: rgba(var(--tbm-overlay), 0.035);
}

.tbm-wrow--a {
    border-left-color: var(--tbm-pink);
    background: var(--tbm-row-a);
}

.tbm-wrow--b {
    border-left-color: var(--tbm-chart-blue);
    background: var(--tbm-row-b);
}

.tbm-wrow--c {
    border-left-color: var(--tbm-trio);
    background: var(--tbm-row-c);
}

.tbm-wrow--dragging {
    opacity: 0.4;
}

.tbm-wrow__exercise {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.tbm-wrow__name {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tbm-wrow__name strong {
    font-size: 1.15rem;
    line-height: 1.25;
}

.tbm-wrow__inactive {
    align-self: flex-start;
    min-height: 22px;
    font-size: 0.9rem;
}

.tbm-wrow__note {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tbm-text-secondary);
    font-family: var(--tbm-font);
    font-size: 1rem;
    outline: none;
}

.tbm-wrow__note:focus {
    color: var(--tbm-text);
}

.tbm-winput {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--tbm-text);
    font-family: var(--tbm-font);
    font-size: 1.15rem;
    -moz-appearance: textfield;
}

.tbm-winput::-webkit-outer-spin-button,
.tbm-winput::-webkit-inner-spin-button,
.tbm-wblock__duration input::-webkit-outer-spin-button,
.tbm-wblock__duration input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tbm-winput:hover,
.tbm-winput:focus {
    border-color: var(--tbm-border-strong);
    background: var(--tbm-input);
    outline: none;
}

.tbm-winput::placeholder {
    color: var(--tbm-text-secondary);
}

.tbm-winput--sets {
    width: 34px;
    text-align: center;
}

.tbm-winput--value {
    width: 46px;
}

.tbm-winput--unit {
    width: 38px;
    padding: 0 2px;
    border-color: var(--tbm-border);
    background: var(--tbm-input);
    font-size: 1rem;
    text-align: center;
    appearance: none;
}

.tbm-wrow__dose,
.tbm-wrow__rest {
    display: flex;
    align-items: center;
    gap: 2px;
}

.tbm-wrow__times,
.tbm-wrow__unit {
    color: var(--tbm-text-secondary);
    font-size: 1.05rem;
}

.tbm-wrow__loads {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tbm-wrow__load {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tbm-wrow__load span {
    flex: none;
    width: 50px;
    color: var(--tbm-text-secondary);
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tbm-wrow__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--tbm-text-secondary);
    cursor: pointer;
}

.tbm-wrow__menu:hover {
    background: rgba(var(--tbm-overlay), 0.06);
    color: var(--tbm-text);
}

.tbm-for-chip {
    max-width: 100%;
    min-height: 30px;
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 0;
    border-radius: var(--tbm-radius-pill);
    font-family: var(--tbm-font);
    font-size: 1.02rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.tbm-for-chip:disabled {
    cursor: default;
}

.tbm-for-chip--both {
    background: #050507;
    color: var(--tbm-text);
}

.tbm-for-chip--a {
    background: var(--tbm-pink);
    color: #FFFFFF;
}

.tbm-for-chip--b {
    background: var(--tbm-chart-blue);
    color: #FFFFFF;
}

.tbm-for-chip--c {
    background: var(--tbm-trio-fill);
    color: #FFFFFF;
}

.tbm-wblock__add,
.tbm-wblock-add {
    margin-top: 4px;
    padding: 8px 16px;
    border: 1px dashed var(--tbm-pink);
    border-radius: var(--tbm-radius);
    background: transparent;
    color: var(--tbm-pink-accent);
    font-family: var(--tbm-font);
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
}

.tbm-wblock-add {
    align-self: flex-start;
    border-color: var(--tbm-border-strong);
    color: var(--tbm-text);
}

@media (max-width: 1023.98px) {
    .tbm-wtable__head {
        display: none;
    }

    .tbm-wrow {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }
}

/* ---- Right column ----------------------------------------------------- */

.tbm-wpreview {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.tbm-wpreview--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tbm-wpreview--trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 767.98px) {
    .tbm-wpreview--trio {
        grid-template-columns: minmax(0, 1fr);
    }
}

.tbm-wpreview__column {
    padding: 12px;
    border-radius: var(--tbm-radius);
    background: rgba(var(--tbm-overlay), 0.04);
}

.tbm-wpreview__column--a {
    background: var(--tbm-row-a);
}

.tbm-wpreview__column--b {
    background: var(--tbm-row-b);
}

.tbm-wpreview__column--c {
    background: var(--tbm-row-c);
}

.tbm-wpreview__name {
    margin: 0 0 6px;
    font-size: 1.2rem;
    font-weight: 700;
}

.tbm-wpreview__column--a .tbm-wpreview__name {
    color: var(--tbm-pink-accent);
}

.tbm-wpreview__column--b .tbm-wpreview__name {
    color: var(--tbm-carbs);
}

.tbm-wpreview__column--c .tbm-wpreview__name {
    color: var(--tbm-trio);
}

.tbm-wpreview ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbm-wpreview li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 2px 0;
    font-size: 0.98rem;
    line-height: 1.35;
}

.tbm-wpreview__check {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border: 1.5px solid var(--tbm-violet);
    border-radius: 50%;
}

.tbm-wpreview__empty {
    margin: 0;
    font-size: 1rem;
}

.tbm-wpreview__hint {
    margin: 8px 0 0;
    font-size: 0.98rem;
}

.tbm-wupcoming {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbm-wupcoming li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--tbm-border);
}

.tbm-wupcoming__day {
    flex: none;
    font-size: 1.15rem;
    font-weight: 700;
}

.tbm-wupcoming .tbm-chip {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbm-wcopy-menu__heading {
    margin: 6px 16px 2px;
    color: var(--tbm-text-secondary);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

.tbm-wexercise-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.tbm-wexercise-form__text {
    min-height: 96px;
    padding: 10px 14px;
    font-size: 1.1rem;
    resize: vertical;
}

/* Demo video of an exercise: preview in the dialog, looping like the member sees it */
.tbm-wexercise-video {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tbm-wexercise-video__preview {
    width: 100%;
    max-height: 220px;
    border-radius: var(--tbm-radius);
    background: #000;
    object-fit: contain;
}

.tbm-wexercise-video__file {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.tbm-wexercise-video__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tbm-wexercise-video__actions label {
    cursor: pointer;
}

/* Member: the demo video above the instructions in the exercise sheet */
.tbm-msheet__video {
    width: 100%;
    max-height: 45vh;
    border-radius: var(--tbm-radius);
    background: #000;
    object-fit: contain;
}

/* ---- Trainingen tab of the member profile ----------------------------- */

.tbm-wtab {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.tbm-wtab__main,
.tbm-wtab__side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.tbm-wtab__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 1023.98px) {
    .tbm-wtab {
        grid-template-columns: minmax(0, 1fr);
    }
}

.tbm-wlist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbm-wlist__row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto 34px;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--tbm-border);
}

.tbm-wlist__row--cancelled .tbm-wlist__name,
.tbm-wlist__row--cancelled .tbm-wlist__date {
    color: var(--tbm-text-secondary);
    text-decoration: line-through;
}

.tbm-wlist__date {
    font-size: 1.2rem;
    font-weight: 700;
}

.tbm-wlist__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tbm-wlist__name {
    color: var(--tbm-text);
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
}

.tbm-wlist__name:hover {
    color: var(--tbm-pink-accent);
}

.tbm-wlist__main .tbm-muted {
    font-size: 1rem;
}

.tbm-wlist__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.tbm-wlist__more {
    margin-top: 12px;
}

.tbm-chip--violet {
    background: var(--tbm-violet-bg);
    color: #B48CFF;
}

@media (max-width: 767.98px) {
    .tbm-wlist__row {
        grid-template-columns: minmax(0, 1fr) 34px;
    }

    .tbm-wlist__chips {
        grid-column: 1;
        justify-content: flex-start;
    }
}

.tbm-wself__score {
    margin: 0 0 14px;
    font-size: 1.3rem;
}

.tbm-wself__score strong {
    font-size: 1.6rem;
}

.tbm-wself__weeks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.tbm-wself__week {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--tbm-text-secondary);
}

.tbm-wself__bar {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 56px;
    border-radius: 4px;
    background: rgba(var(--tbm-overlay), 0.06);
    overflow: hidden;
}

.tbm-wself__bar span {
    width: 100%;
    background: var(--tbm-violet);
}

/* Training history on the profile overview */
.tbm-whistory {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.15rem;
}

.tbm-whistory th,
.tbm-whistory td {
    padding: 12px 8px 12px 0;
    border-bottom: 1px solid var(--tbm-border);
    text-align: left;
    white-space: nowrap;
}

.tbm-whistory th {
    font-weight: 700;
}

.tbm-whistory td:nth-child(2) {
    width: 45%;
    white-space: normal;
}

/* ---- /trainer/trainingen: templates and exercise library -------------- */

.tbm-wlist__row--template {
    grid-template-columns: minmax(0, 1fr) auto;
}

.tbm-wlibrary__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.tbm-wlibrary__search {
    flex: 1 1 260px;
    min-height: 44px;
    font-size: 1.15rem;
}

.tbm-wlibrary__category {
    flex: 0 1 220px;
    min-height: 44px;
    font-size: 1.15rem;
}

.tbm-wlibrary__inactive {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.1rem;
}

.tbm-wlibrary__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.15rem;
}

.tbm-wlibrary__table th {
    padding: 0 10px 8px 0;
    color: var(--tbm-text-secondary);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
}

.tbm-wlibrary__table td {
    padding: 6px 10px 6px 0;
    border-top: 1px solid var(--tbm-border);
}

.tbm-wlibrary__row--inactive td {
    color: var(--tbm-text-secondary);
}

.tbm-wlibrary__name {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.tbm-wlibrary__name:hover {
    color: var(--tbm-pink-accent);
}

/* ---- Member app: Mijn trainingen (390 px) ----------------------------- */

.tbm-mtrain__top {
    padding: 16px var(--tbm-gutter) 18px;
    background: var(--tbm-panel);
}

.tbm-mtrain__title {
    font-size: 2.5rem;
}

.tbm-mtrain__accent {
    color: var(--tbm-carbs);
}

.tbm-mtrain__segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 18px;
    padding: 4px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
}

.tbm-mtrain__segment {
    min-height: 44px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--tbm-text-secondary);
    font-family: var(--tbm-font);
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
}

.tbm-mtrain__segment--active {
    background: var(--tbm-text);
    color: var(--tbm-bg);
}

.tbm-mtrain__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px var(--tbm-gutter) 0;
}

.tbm-mtrain__week {
    margin: 10px 0 0;
    color: var(--tbm-text-secondary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tbm-mtrain__week:first-child {
    margin-top: 0;
}

.tbm-mtrain__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 16px;
    border: 1px dashed var(--tbm-border-strong);
    border-radius: var(--tbm-radius);
    color: var(--tbm-text-secondary);
    font-size: 1.2rem;
    text-align: center;
}

.tbm-mtrain__empty .mud-icon-root {
    font-size: 2rem;
}

.tbm-mtrain__empty p {
    margin: 0;
}

.tbm-mtrain__more {
    align-self: center;
    margin: 6px 0;
    font-size: 1.15rem;
}

.tbm-mcard {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 18px 16px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
    color: var(--tbm-text);
    text-decoration: none;
}

/* A session card with its actions: one card, the link on top and "Afzeggen of verzetten" below a hairline */
.tbm-mcard-group {
    overflow: hidden;
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
}

.tbm-mcard-group > .tbm-mcard {
    border-radius: 0;
    background: transparent;
}

.tbm-mcard__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px 12px;
    border-top: 1px solid var(--tbm-border);
}

.tbm-mcard__hint,
.tbm-mcard__requested {
    min-width: 0;
    color: var(--tbm-text-secondary);
    font-size: 1.05rem;
    line-height: 1.2;
}

.tbm-mcard__requested {
    color: var(--tbm-warning);
    font-weight: 600;
}

.tbm-mcard__change {
    flex: none;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--tbm-pink);
    border-radius: var(--tbm-radius-pill);
    background: transparent;
    color: var(--tbm-pink-accent);
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
}

/* "Afzeggen of verzetten" sheet (not .tbm-change: that is the trend chip in trainer.css) */
.tbm-session-change__sub {
    margin: 2px 0 0;
    color: var(--tbm-text-secondary);
}

.tbm-session-change__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tbm-session-change__choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--tbm-border-strong);
    border-radius: var(--tbm-radius);
    background: transparent;
    color: var(--tbm-text);
    text-align: left;
    cursor: pointer;
}

.tbm-session-change__choice strong {
    font-size: 1.2rem;
}

.tbm-session-change__choice span {
    color: var(--tbm-text-secondary);
    font-size: 0.95rem;
    line-height: 1.2;
}

.tbm-session-change__choice .mud-icon-root {
    color: var(--tbm-pink);
}

.tbm-session-change__choice--on {
    border-color: var(--tbm-pink);
    box-shadow: 0 0 0 1px var(--tbm-pink);
}

.tbm-session-change__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.tbm-session-change__parts {
    display: flex;
    gap: 8px;
}

.tbm-session-change__part {
    width: auto;
    padding: 0 14px;
}

.tbm-session-change__info {
    margin: 4px 0;
    font-size: 0.95rem;
}

.tbm-mcard__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.tbm-mcard__day small {
    color: var(--tbm-pink);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
}

.tbm-mcard__day strong {
    margin-top: 6px;
    font-size: 2.4rem;
    font-weight: 700;
}

.tbm-mcard__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tbm-mcard__text strong {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.15;
}

.tbm-mcard__text span {
    color: var(--tbm-text-secondary);
    font-size: 1.25rem;
    line-height: 1.2;
}

.tbm-mcard__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.tbm-mcard__progress {
    color: var(--tbm-text-secondary);
    font-size: 1.05rem;
    font-weight: 700;
}

.tbm-mbadge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: var(--tbm-radius-pill);
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
}

.tbm-mbadge--duo {
    background: rgba(34, 211, 255, 0.14);
    color: var(--tbm-carbs);
}

.tbm-mbadge--grey {
    background: rgba(var(--tbm-overlay), 0.08);
    color: var(--tbm-text-secondary);
}

.tbm-mbadge--self {
    background: var(--tbm-violet-bg);
    color: var(--tbm-violet);
    filter: brightness(1.35);
}

/* Gedaan: the latest training expanded, then the history */
.tbm-mdone {
    padding: 20px 16px 18px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
}

.tbm-mdone__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.tbm-mdone__header .tbm-muted {
    font-size: 1.15rem;
}

.tbm-mdone__title {
    font-size: 1.9rem;
}

.tbm-mdone__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbm-mdone__items li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--tbm-border);
    font-size: 1.3rem;
    font-weight: 600;
}

.tbm-mdone__items li .tbm-muted {
    font-weight: 500;
    text-align: right;
}

.tbm-mdone__note {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: var(--tbm-radius);
    background: rgba(231, 50, 114, 0.15);
    font-size: 1.2rem;
}

.tbm-mdone__note blockquote {
    display: inline;
    margin: 0;
}

.tbm-mdone__note blockquote p {
    display: inline;
    margin: 0;
}

.tbm-mdone__note blockquote::before {
    content: '“';
}

.tbm-mdone__note blockquote::after {
    content: '”';
}

.tbm-mdone__note figcaption {
    display: inline;
    margin-left: 6px;
    color: var(--tbm-text-secondary);
}

.tbm-mrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
    color: var(--tbm-text);
    text-decoration: none;
}

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

.tbm-mrow__text strong {
    font-size: 1.4rem;
}

.tbm-mrow__text span {
    color: var(--tbm-text-secondary);
    font-size: 1.2rem;
}

.tbm-mrow .mud-icon-root {
    color: var(--tbm-text-secondary);
}

/* Detail of a training */
.tbm-mdetail {
    padding: 0 var(--tbm-gutter);
}

.tbm-mdetail--self {
    padding-bottom: 150px;
}

.tbm-mdetail__top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0 12px;
}

.tbm-mdetail__heading {
    min-width: 0;
}

.tbm-mdetail__title {
    font-size: 2rem;
    line-height: 1.05;
}

.tbm-mdetail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 8px 0 0;
    color: var(--tbm-text-secondary);
    font-size: 1.2rem;
}

.tbm-mdetail__hint {
    margin: 0 0 6px;
    color: var(--tbm-text-secondary);
    font-size: 1.15rem;
}

.tbm-mblock {
    margin-top: 14px;
}

.tbm-mblock__title {
    margin-bottom: 6px;
    font-size: 1.4rem;
}

.tbm-mblock__number {
    margin-right: 6px;
    color: var(--tbm-pink);
}

.tbm-mblock__items {
    margin: 0;
    padding: 0;
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
    list-style: none;
}

.tbm-mitem {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--tbm-border);
}

.tbm-mitem:last-child {
    border-bottom: 0;
}

.tbm-mcheck {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--tbm-violet);
    border-radius: 50%;
    background: transparent;
    color: #FFFFFF;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.tbm-mcheck:active:not(:disabled) {
    transform: scale(0.92);
}

.tbm-mcheck--on {
    background: var(--tbm-violet);
}

.tbm-mcheck:disabled {
    opacity: 0.45;
    cursor: default;
}

.tbm-mitem--checked .tbm-mcheck:disabled {
    opacity: 0.75;
}

.tbm-mcheck .mud-icon-root {
    font-size: 1.6rem;
}

.tbm-mitem__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tbm-mitem__name {
    padding: 0;
    border: 0;
    background: none;
    color: var(--tbm-text);
    font-family: var(--tbm-font);
    font-size: 1.3rem;
    font-weight: 700;
    text-align: left;
}

.tbm-mitem__name--link {
    align-self: flex-start;
    text-decoration: underline dotted var(--tbm-text-secondary);
    text-underline-offset: 4px;
    cursor: pointer;
}

.tbm-mitem--checked .tbm-mitem__name {
    color: var(--tbm-text-secondary);
}

.tbm-mitem__dose {
    color: var(--tbm-text-secondary);
    font-size: 1.15rem;
}

.tbm-mitem__note {
    color: var(--tbm-text-secondary);
    font-size: 1.05rem;
    font-style: italic;
}

.tbm-mdetail__sticky {
    position: fixed;
    left: 50%;
    /* Above the bottom navigation and its raised "Eten" button. */
    bottom: calc(var(--tbm-bottom-nav-height) + env(safe-area-inset-bottom) + 26px);
    z-index: 20;
    width: min(100%, var(--tbm-content-width));
    padding: 22px var(--tbm-gutter) 10px;
    background: linear-gradient(to top, var(--tbm-bg) 82%, transparent);
    text-align: center;
    transform: translateX(-50%);
}

.tbm-mdetail__window,
.tbm-mdetail__done {
    margin: 6px 0 0;
    color: var(--tbm-text-secondary);
    font-size: 1.1rem;
}

.tbm-mdetail__window--above {
    margin: 0 0 8px;
}

.tbm-mdetail__done {
    color: var(--tbm-success);
    font-size: 1.3rem;
    font-weight: 700;
}

/* Bottom sheet with the instructions of an exercise */
.tbm-msheet {
    position: fixed;
    inset: 0;
    z-index: 1400;
}

.tbm-msheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 5, 0.7);
}

.tbm-msheet__panel {
    position: absolute;
    left: 50%;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(100%, var(--tbm-content-width));
    max-height: 80dvh;
    padding: 10px var(--tbm-gutter) calc(16px + env(safe-area-inset-bottom));
    border-radius: 14px 14px 0 0;
    background: var(--tbm-card);
    overflow-y: auto;
    transform: translateX(-50%);
    animation: tbm-sheet-in 0.2s ease-out;
}

.tbm-msheet__handle {
    align-self: center;
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: var(--tbm-border-strong);
}

.tbm-msheet__title {
    font-size: 1.7rem;
}

.tbm-msheet__body {
    font-size: 1.2rem;
}

@keyframes tbm-sheet-in {
    from {
        transform: translate(-50%, 100%);
    }
}

/* Confetti after completing */
.tbm-confetti {
    position: fixed;
    inset: 0;
    z-index: 1500;
    overflow: hidden;
    pointer-events: none;
}

.tbm-confetti span {
    position: absolute;
    top: -12px;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    animation: tbm-confetti 1.6s ease-in forwards;
}

@keyframes tbm-confetti {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0);
    }

    100% {
        opacity: 0;
        transform: translate(var(--drift), 100dvh) rotate(var(--rotate));
    }
}

@media (prefers-reduced-motion: reduce) {
    .tbm-confetti {
        display: none;
    }
}

/* Vandaag: one line with today's training */
.tbm-today-training {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px var(--tbm-gutter);
    padding: 12px 14px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
    color: var(--tbm-text);
    text-decoration: none;
    font-size: 1.2rem;
}

.tbm-today-training__kicker {
    color: var(--tbm-pink);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tbm-today-training__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbm-today-training__progress {
    color: var(--tbm-text-secondary);
    font-weight: 700;
}

.tbm-today-training__progress--done {
    color: var(--tbm-success);
}

.tbm-today-training .mud-icon-root {
    color: var(--tbm-text-secondary);
}

/* ---- Exercise library (RepDB): animation, player and muscles ---------- */
.tbm-wlib__thumb {
    flex: none;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.tbm-wlib__text {
    flex: 1;
    min-width: 0;
}

.tbm-wexercise-library {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.tbm-wexercise-library__animation {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
}

.tbm-wexercise-library__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tbm-wexercise-library__source {
    font-size: 0.95rem;
    color: var(--tbm-text-secondary);
}

@media (max-width: 480px) {
    .tbm-wexercise-library {
        grid-template-columns: minmax(0, 1fr);
    }

    .tbm-wexercise-library__animation {
        max-width: 200px;
        justify-self: center;
    }
}

.tbm-msheet__dose {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: -6px 0 0;
    font-size: 1.1rem;
    color: var(--tbm-text-secondary);
}

.tbm-msheet__equipment {
    padding: 2px 10px;
    border-radius: var(--tbm-radius-pill);
    background: var(--tbm-input-raised);
    color: var(--tbm-text);
    font-size: 0.95rem;
}

.tbm-msheet__note {
    margin: 0;
    padding: 2px 0 2px 10px;
    border-left: 3px solid var(--tbm-chart-blue);
    font-size: 1.1rem;
}

.tbm-msheet__note small {
    display: block;
    font-size: 0.85rem;
    color: var(--tbm-text-secondary);
}

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

.tbm-msheet__label {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tbm-text-secondary);
}

/* The player: the transparent animation straight on the sheet, the controls in a card below it. */
.tbm-player {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tbm-player__media {
    position: relative;
    display: flex;
    justify-content: center;
}

/* The height on the image itself: a percentage of the media box does not resolve and lets it run over the panel. */
.tbm-player__animation {
    display: block;
    width: auto;
    max-width: 100%;
    height: min(38dvh, 300px);
    object-fit: contain;
    transition: opacity 0.2s;
}

.tbm-player__media--rest .tbm-player__animation {
    opacity: 0.3;
}

.tbm-player__rest {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
}

.tbm-player__rest span {
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tbm-player__rest strong {
    font-family: var(--tbm-font);
    font-size: 4rem;
    line-height: 1;
    color: var(--tbm-chart-blue);
    font-variant-numeric: tabular-nums;
}

.tbm-player__panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--tbm-border);
    border-radius: 12px;
    background: var(--tbm-input);
}

.tbm-player__status {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.tbm-player__big {
    display: block;
    font-family: var(--tbm-font);
    font-size: 2.8rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tbm-player__big--done {
    color: var(--tbm-pink);
}

.tbm-player__sub {
    display: block;
    font-size: 1rem;
    color: var(--tbm-text-secondary);
}

.tbm-player__dots {
    display: flex;
    gap: 5px;
}

.tbm-player__dots span {
    width: 22px;
    height: 6px;
    border-radius: 3px;
    background: var(--tbm-border-strong);
}

.tbm-player__dots .tbm-player__dot--done {
    background: var(--tbm-pink);
}

.tbm-player__dots .tbm-player__dot--now {
    background: var(--tbm-chart-blue);
}

.tbm-player__bar {
    height: 6px;
    border-radius: 3px;
    background: var(--tbm-border-strong);
    overflow: hidden;
}

.tbm-player__bar div {
    height: 100%;
    background: var(--tbm-chart-blue);
    transition: width 0.25s linear;
}

.tbm-player__actions {
    display: flex;
    gap: 8px;
}

.tbm-player__actions .tbm-btn-primary {
    flex: 1;
}

.tbm-player__modes {
    display: flex;
    gap: 6px;
}

.tbm-player__modes button {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--tbm-border-strong);
    border-radius: var(--tbm-radius);
    background: transparent;
    color: var(--tbm-text-secondary);
    font: inherit;
    font-size: 0.95rem;
    cursor: pointer;
}

.tbm-player__modes button[aria-pressed="true"] {
    border-color: var(--tbm-chart-blue);
    color: var(--tbm-text);
}

@media (prefers-reduced-motion: reduce) {
    .tbm-player__bar div,
    .tbm-player__animation {
        transition: none;
    }
}

/* Muscles: the main ones as pictures, the helping ones as chips. */
.tbm-muscles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tbm-muscles__primary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.tbm-muscle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--tbm-border);
    border-radius: 10px;
    text-align: center;
}

.tbm-muscle__image {
    width: 100%;
    max-width: 130px;
    aspect-ratio: 1;
    object-fit: contain;
}

.tbm-muscle small {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tbm-pink-accent);
}

.tbm-muscles__secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbm-muscle-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 3px;
    border-radius: var(--tbm-radius-pill);
    background: var(--tbm-input-raised);
    font-size: 0.95rem;
}

.tbm-muscle-chip img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: contain;
}

.tbm-player__hint {
    margin: 0;
    font-size: 1rem;
    color: var(--tbm-text-secondary);
}

.tbm-wexercise-library__model {
    max-width: 220px;
}