.calendarColorSettingsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0}.calendarColorSetting{min-width:0;border:1px solid var(--line);border-radius:12px;padding:12px;margin:0}.calendarColorSetting legend{font-weight:750;padding:0 5px}.calendarColorSetting .typographyControls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.calendarColorPreview{padding:10px;border-radius:8px;margin:10px 0;overflow-wrap:anywhere}.calendarColorSetting .btn{white-space:normal;max-width:100%}
.calendarWrap [data-calendar-tone="planned"]{--calendar-bg:var(--calendar-planned-bg);--calendar-ink:var(--calendar-planned-text)}
.calendarWrap [data-calendar-tone="pending"]{--calendar-bg:var(--calendar-pending-bg);--calendar-ink:var(--calendar-pending-text)}
.calendarWrap [data-calendar-tone="completed"]{--calendar-bg:var(--calendar-completed-bg);--calendar-ink:var(--calendar-completed-text)}
.calendarWrap [data-calendar-tone="noshow"]{--calendar-bg:var(--calendar-noshow-bg);--calendar-ink:var(--calendar-noshow-text)}
.calendarWrap [data-calendar-tone="attention"]{--calendar-bg:var(--calendar-attention-bg);--calendar-ink:var(--calendar-attention-text)}
.calendarWrap [data-calendar-tone="cancelled"]{--calendar-bg:var(--calendar-cancelled-bg);--calendar-ink:var(--calendar-cancelled-text)}
.calendarWrap [data-calendar-tone="available"]{--calendar-bg:var(--calendar-available-bg);--calendar-ink:var(--calendar-available-text)}
.calendarWrap [data-calendar-tone="unavailable"]{--calendar-bg:var(--calendar-unavailable-bg);--calendar-ink:var(--calendar-unavailable-text)}
:root .calendarWrap :is(.calendarWeekEvent,.dayBadge,.eventItem)[data-calendar-tone]{background:var(--calendar-bg);color:var(--calendar-ink);border-color:var(--calendar-ink)}
.calendarWrap .dot[data-calendar-tone]{background:var(--calendar-ink)}
:root .calendarWrap [data-calendar-tone] :is(.weekSessionPerson,.weekSessionGroups,.weekSessionDescription,.calendarCancelledLabel,.calendarBookingLabel,.eventStudent,.eventSessionTitle,.eventTitle,.eventMeta){color:inherit}
@media(max-width:600px){.calendarColorSettingsGrid{grid-template-columns:minmax(0,1fr)}}

:root .calendarWrap [data-calendar-tone] .calendarConflict{color:var(--calendar-ink)!important}

/* Use the active palette for details opened from either calendar interface. */
#modal:has(>.calendarEventDetailTitle){background:var(--bg);border-color:var(--line);color:var(--text)}
#modal>.calendarEventDetailTitle{color:var(--text);margin:0 0 10px}
#modal:has(>.calendarEventDetailTitle)>p{color:var(--text);line-height:1.4;overflow-wrap:anywhere}
#modal .eventStudentWithPhoto{display:flex;align-items:center;gap:10px;min-width:0}
#modal .eventStudentWithPhoto>.eventStudentAvatar{display:flex;flex:none}
#modal .eventStudentWithPhoto .personAvatar{width:40px;height:40px;overflow:hidden}
#modal .eventStudentWithPhoto>span:last-child{min-width:0;overflow-wrap:anywhere}
/* Uniform muscle figure sizing for current and previous session details.
   More than three figures wrap instead of shrinking individual illustrations. */
#modal .muscleFigures{
 --muscle-figure-size:76px;--muscle-figure-gap:10px;
 display:flex;flex-wrap:wrap;width:100%;
 max-width:calc(3 * var(--muscle-figure-size) + 2 * var(--muscle-figure-gap));
 margin:8px auto 10px;justify-content:center;align-items:center;gap:6px var(--muscle-figure-gap);
}
#modal .muscleFigures>.muscleFigure{
 box-sizing:border-box;display:grid;place-items:center;
 flex:0 0 var(--muscle-figure-size);
 width:var(--muscle-figure-size);height:var(--muscle-figure-size);
 min-width:var(--muscle-figure-size);max-width:var(--muscle-figure-size);
 padding:0;border:0;background:transparent;
}
#modal .muscleFigures>.muscleFigure>.muscleImage{
 display:block;width:100%;height:100%;max-width:none;aspect-ratio:1;
}