html, body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.l3r-boot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100vh;
}

.l3r-boot__name {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #1f2a44;
}

.l3r-boot__bar {
    width: 160px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #e3e8f2 0%, #3a5bd9 50%, #e3e8f2 100%);
    background-size: 200% 100%;
    animation: l3r-boot 1.2s linear infinite;
}

@keyframes l3r-boot {
    from { background-position: 200% 0; }
    to { background-position: 0 0; }
}

.l3r-card-title {
    font-weight: 600;
}

.l3r-no-caps {
    text-transform: none;
}

.l3r-session-time {
    font-variant-numeric: tabular-nums;
}

#blazor-error-ui {
    background: #fff4e5;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.l3r-row-link {
    cursor: pointer;
}

.l3r-pre {
    white-space: pre-wrap;
    word-break: break-word;
}

.l3r-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* Media library (Pages/Coach/Media*.razor). Thumbnails and the player keep a 16:9 frame; portrait videos are letterboxed. */
.l3r-video-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #10151f;
    border-radius: 8px;
    object-fit: contain;
    display: block;
}

.l3r-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #e3e8f2;
    display: block;
}

.l3r-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5b6478;
}

.l3r-media-card {
    cursor: pointer;
    height: 100%;
}

/* Exercise library (Pages/Coach/Exercise*.razor, Components/Exercises, Components/Media/MediaPicker.razor). */
.l3r-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.l3r-narrow-field {
    max-width: 320px;
}

.l3r-row-thumb {
    width: 96px;
    flex: none;
    border-radius: 6px;
    overflow: hidden;
}

.l3r-picker-thumb {
    width: 128px;
    flex: none;
    border-radius: 6px;
    overflow: hidden;
}

.l3r-picker-preview {
    max-width: 640px;
}

.l3r-exercise-row {
    cursor: pointer;
}

/* Program editor (Components/Program): weeks of seven day columns, a side panel for the selected workout. */
.l3r-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.l3r-editor--panel {
    grid-template-columns: minmax(0, 1fr) minmax(560px, 60%);
}

@media (max-width: 1100px) {
    .l3r-editor--panel {
        grid-template-columns: minmax(0, 1fr);
    }
}

.l3r-editor-side {
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
}

.l3r-title-field {
    min-width: 260px;
    max-width: 520px;
}

.l3r-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(80px, 1fr));
    gap: 6px;
    overflow-x: auto;
}

.l3r-week-label {
    max-width: 260px;
}

.l3r-day {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 4px;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.l3r-day-head {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 2px;
}

.l3r-workout-card {
    position: relative;
    text-align: left;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 4px;
    background: var(--mud-palette-background);
    padding: 4px 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font: inherit;
    color: inherit;
}

.l3r-workout-card:hover {
    background: var(--mud-palette-action-default-hover);
}

.l3r-workout-card--selected {
    outline: 2px solid var(--mud-palette-primary);
}

.l3r-workout-card__title {
    font-weight: 600;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.l3r-workout-card__line {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.l3r-workout-card__todo {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.7rem;
    background: var(--mud-palette-warning);
    color: #fff;
    border-radius: 8px;
    padding: 0 5px;
}

.l3r-add-workout {
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.4;
}

.l3r-add-workout:hover {
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.l3r-sets td,
.l3r-sets th {
    padding: 2px 4px !important;
    vertical-align: middle;
}

.l3r-drop-row td {
    background: var(--mud-palette-background-gray);
}

.l3r-set-number {
    width: 24px;
    text-align: center;
}

.l3r-cell-int {
    width: 74px;
}

.l3r-cell-decimal {
    width: 88px;
}

.l3r-cell-unit {
    width: 80px;
}

.l3r-cell-mode {
    width: 116px;
}

.l3r-cell-role {
    width: 124px;
}

.l3r-cell-kind {
    width: 210px;
}

.l3r-cell-sides {
    width: 240px;
}

.l3r-cell-text {
    width: 160px;
}

.l3r-field-small {
    max-width: 200px;
}

.l3r-field-medium {
    max-width: 260px;
}

.l3r-item-letter {
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.l3r-row-actions {
    white-space: nowrap;
}

.l3r-picker-list {
    max-height: 52vh;
    overflow-y: auto;
}

.l3r-picker-current {
    background: var(--mud-palette-action-default-hover);
}

.l3r-picker-instructions {
    max-height: 30vh;
    overflow-y: auto;
}

.l3r-checklist-list {
    max-height: 40vh;
    overflow-y: auto;
}

.l3r-cell-conv {
    width: 136px;
}

.l3r-sets-scroll {
    overflow-x: auto;
}

.l3r-sets {
    min-width: max-content;
}

/* ---------------------------------------------------------------- published workouts, publication preview */
.l3r-pre-line { white-space: pre-line; }
.l3r-video-small { max-width: 480px; }
.l3r-view-block { border-left: 3px solid var(--mud-palette-lines-default); padding-left: 8px; }
.l3r-view-sets { margin: 2px 0 2px 1.5rem; padding: 0; font-size: 0.875rem; }
.l3r-view-drop { list-style: none; margin-left: -0.75rem; }
.l3r-view-drop::before { content: "↳ "; color: var(--mud-palette-text-secondary); }
.l3r-plan-table td { vertical-align: top; }
.l3r-plan-title { font-weight: 500; min-width: 10rem; }
.l3r-plan-media { margin: 4px 0 0 1.25rem; padding: 0; font-size: 0.875rem; }
.l3r-history { margin: 4px 0 0 1.25rem; padding: 0; font-size: 0.875rem; }

/* ---------------------------------------------------------------- the client's month calendar (Monday first) */
.l3r-month {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--mud-palette-lines-default);
    border-left: 1px solid var(--mud-palette-lines-default);
}
.l3r-month-head {
    padding: 4px 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}
.l3r-month-day {
    min-height: 96px;
    padding: 2px 4px 4px;
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.l3r-month-day--out { background: var(--mud-palette-background-gray); }
.l3r-month-day--out .l3r-month-date { opacity: 0.5; }
.l3r-month-day--today .l3r-month-date {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-radius: 999px;
    padding: 0 6px;
    align-self: flex-start;
}
.l3r-month-date { font-size: 0.75rem; font-weight: 600; }
.l3r-chip {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    padding: 1px 4px;
    border: 0;
    border-left: 4px solid var(--l3r-chip-colour);
    border-radius: 4px;
    background: color-mix(in srgb, var(--l3r-chip-colour) 14%, transparent);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.75rem;
    text-align: left;
    cursor: pointer;
}
.l3r-chip:hover { background: color-mix(in srgb, var(--l3r-chip-colour) 26%, transparent); }
.l3r-chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l3r-chip-mark { font-size: 0.9rem !important; flex: none; }
.l3r-chip--cancelled, .l3r-chip--skipped { background: transparent; opacity: 0.65; }
.l3r-chip--cancelled .l3r-chip-title { text-decoration: line-through; }
.l3r-chip--skipped .l3r-chip-title { font-style: italic; }
.l3r-chip--completed { border-left-style: double; }
.l3r-chip--overdue { box-shadow: inset 0 0 0 1px var(--mud-palette-warning); }
.l3r-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; }
.l3r-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--l3r-chip-colour); }
.l3r-c0 { --l3r-chip-colour: #1e88e5; }
.l3r-c1 { --l3r-chip-colour: #43a047; }
.l3r-c2 { --l3r-chip-colour: #8e24aa; }
.l3r-c3 { --l3r-chip-colour: #f4511e; }
.l3r-c4 { --l3r-chip-colour: #00897b; }
.l3r-c5 { --l3r-chip-colour: #c0ca33; }
@media (max-width: 700px) {
    .l3r-month-day { min-height: 64px; padding: 1px 2px; }
    .l3r-chip-title { white-space: normal; }
}