/* ==========================================================================
   Training Calendar
   Spec: roadmap/phase-05-training-and-calendar/artifacts/page-training-calendar-spec.md
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Section wrapper — Figma 10330:66540 layout_K4OIJZ
   column, gap 48, padding 112 80, width 1440
   --------------------------------------------------------------------------- */

.calendar {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);         /* 48px — Figma 10330:66540 layout_K4OIJZ */
	padding: 112px var(--space-20); /* 112px 80px — Figma 10330:66540 layout_K4OIJZ */
	max-width: 1440px;
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   Block 4 — Toolbar
   Figma 10330:66541 layout_BPIL45
   row, align-items center, gap 64, padding 8 0
   --------------------------------------------------------------------------- */

.calendar__toolbar {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 64px;                   /* Figma 10330:66541 layout_BPIL45 */
	padding: var(--space-2) 0;   /* 8px 0 — Figma 10330:66541 layout_BPIL45 */
}

/* Search wrapper — Figma 10330:66542 layout_D2WKQO */
.calendar__search {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 26px;                   /* untokenized: one-off — Figma 10330:66542 layout_D2WKQO */
	padding: 9px 0;
	flex: 1 1 0;
	min-width: 0;
}

/* Bordered field: icon + input — Figma 10330:66543 layout_QBLI76 */
.calendar__search-field {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-3);         /* 12px — Figma 10330:66543 layout_QBLI76 */
	flex: 1 1 0;
	min-width: 0;
	height: 48px;                /* Figma 10330:66543 layout_QBLI76 */
	padding: var(--space-2) var(--space-3); /* 8px 12px — Figma 10330:66543 layout_QBLI76 */
	border: 1px solid var(--color-navy-light); /* #545B68 — Figma 10330:66543 strokes fill_RUNXRA */
	border-radius: var(--radius-xs); /* 2px — Figma 10330:66543 borderRadius */
	background: transparent;     /* Figma 10330:66543 fill_UZBU9W */
}

.calendar__search-field:focus-within {
	border-color: var(--color-navy);
}

/* Search input — sits inside .calendar__search-field, no own border */
.calendar__search-input {
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 16px;             /* Figma I10330:66543;4179:9028 textStyle Text/Regular/Normal */
	color: var(--color-dark);
}

.calendar__search-input:focus {
	outline: none;
}

.calendar__search-input::placeholder {
	color: var(--color-dark-60); /* rgba(13,11,0,0.6) — Figma I10330:66543;4179:9028 fill_VPDUUG */
}

.calendar__search-icon {
	color: var(--color-navy-light);
	font-size: 24px;             /* Figma I10330:66543;7022:10221 layout_VDH41Q */
	flex-shrink: 0;
}

/* Find Courses button — Figma 10330:66544 layout_I26YKA
   Height raised from Figma's 44px to 48px so the search-field, submit, and
   view-tab pill share a single toolbar baseline (search-field is 48px). */
.calendar__search-submit {
	flex-shrink: 0;
	height: 48px;
	padding: 10px var(--space-6); /* 10px 24px — Figma 10330:66544 layout_I26YKA */
}

/* Default: show desktop label, hide mobile label. Mobile breakpoint flips this. */
.calendar__search-submit-label--mobile { display: none; }

/* Mobile-only toolbar elements — hidden by default, revealed at ≤768
   Figma 10523:6517 Mobile Only - Calendar Top, layout_E30LFM */
.calendar__toolbar-picker,
.calendar__search-toggle,
.calendar__icons-divider,
.calendar__view-switcher-icon {
	display: none;
}

/* Icons wrapper acts as a transparent container for the view-switcher on desktop;
   becomes the right-hand mobile cluster (search-toggle | divider | view pill) at ≤768.
   Figma 10523:6518 layout_Q3N2YE */
.calendar__icons-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-2);         /* 8px — derived from Figma 10523:6518 layout_Q3N2YE */
	flex-shrink: 0;
}

/* 3-segment view-tab pill — Figma 10330:66545 layout_8WTBRV
   Container: row gap 8, padding 4 8 (Figma) — vertical padding raised to 7px
   so the outer height (34 + 14) lines up with the 48px toolbar baseline. */
.calendar__view-tabs {
	flex-shrink: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);            /* 8px — Figma 10330:66545 layout_8WTBRV */
	padding: 7px var(--space-2);    /* 7px 8px — Figma container padding adjusted for 48px outer */
	background: var(--color-navy-lightest); /* #E6E7E9 — Figma 10330:66545 fill_BBQR0S */
	border-radius: var(--radius-xs); /* 2px — Figma 10330:66545 borderRadius */
}

/* Toggle item — Figma I10330:66545;10275:4164 layout_LNYP0M
   row gap 10, padding 10, height 34 fixed, radius 2. */
.calendar__view-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;                   /* Figma I10330:66545;10275:4164 layout_LNYP0M */
	padding: 0 10px;                /* Figma toggle-item padding 10 */
	border: none;
	border-radius: var(--radius-xs); /* 2px — Figma toggle-item borderRadius */
	background: transparent;
	font-family: inherit;
	font-size: 16px;                /* Figma I10330:66545;10275:4165 Text/Regular/Normal */
	font-weight: 400;               /* Figma inactive: Text/Regular/Normal */
	line-height: 1.4;
	color: #000000;                 /* Figma I10330:66545;10275:4165 fill_WGAGB5 */
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.calendar__view-tab:hover {
	background: color-mix(in srgb, var(--color-navy-light) 20%, transparent);
}

.calendar__view-tab.is-active {
	background: var(--color-navy-light); /* #545B68 — Figma I10330:66545;10275:4166 fill_HKN6I8 */
	color: var(--color-white);           /* Figma I10330:66545;10275:4167 fill_IGHTV2 */
	font-weight: 700;                    /* Figma Text/Regular/Bold */
}

.calendar__view-tab:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 2px;
}

/* Mobile-only view switcher (select) — Figma 10523:6672 layout_DGL862
   Hidden on desktop; revealed at ≤768 inside the icons-wrapper. */
.calendar__view-switcher {
	display: none;
	flex-shrink: 0;
	align-items: center;
}

.calendar__view-switcher select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: var(--color-navy-lightest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%230B1628' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center;
	border: none;
	border-radius: var(--radius-xs);
	height: 34px;
	padding: 0 32px 0 var(--space-3);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-navy);
	cursor: pointer;
}

.calendar__view-switcher select:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--color-navy);
}

/* ---------------------------------------------------------------------------
   View container shared rules
   --------------------------------------------------------------------------- */

.calendar__view {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);         /* 24px */
}

.calendar__view[hidden] {
	display: none;
}

/* View top (arrows + date label) — Figma 10330:66548 layout_ET4ID7 */
.calendar__view-top {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-6);         /* 24px — Figma 10330:66548 layout_ET4ID7 */
	padding-bottom: var(--space-9); /* 36px — Figma 10330:66548 layout_ET4ID7 */
	position: relative;
}

/* List & Day views: tighten the gap above the first divider so the month/time
   indicator sits higher (client comments 11735972 / 11735975). Month view keeps
   the full Figma 36px. */
.calendar__view--list .calendar__view-top,
.calendar__view--day .calendar__view-top {
	padding-bottom: var(--space-4); /* 16px (was 36px) */
}

.calendar__month-nav {
	display: flex;
	flex-direction: row;
	gap: 10px;                   /* Figma 10330:66549 layout_BTN4ZR */
}

/* Outlined chevron buttons — Figma "Arrows" SVG (10330:66549) renders each
   chevron inside its own bordered square. */
.calendar__nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: none;
	border: 1px solid var(--color-navy-light); /* #545B68 — Figma Arrows asset */
	border-radius: var(--radius-xs); /* 2px */
	cursor: pointer;
	color: var(--color-navy);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.calendar__nav-btn:hover {
	background: var(--color-navy);
	border-color: var(--color-navy);
	color: var(--color-white);
}

.calendar__nav-btn:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 2px;
}

/* Date picker trigger — Figma 10330:66552 layout_HWWRFZ */
.calendar__date-picker {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;                   /* --space-4 — Figma 10330:66553 layout_J2O0J2 */
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.calendar__date-label {
	font-size: 32px;             /* Figma 10330:66554 textStyle Heading/H4 */
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--color-navy);    /* #0B1628 — Figma 10330:66554 fill_QVTXO6 */
}

/* Date-picker popover */
.calendar__date-picker-popover {
	position: absolute;
	top: calc(100% - var(--space-9));
	left: 0;
	z-index: 100;
	background: var(--color-white);
	border: 1px solid var(--color-navy-lightest);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
	padding: var(--space-4);
	min-width: 280px;
}

.calendar__picker-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.calendar__picker-year {
	display: flex;
	gap: var(--space-2);
	justify-content: center;
}

.calendar__picker-months {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-1);
}

.calendar__picker-year-btn,
.calendar__picker-month-btn {
	padding: var(--space-1) var(--space-2);
	background: none;
	border: 1px solid transparent;
	border-radius: var(--radius-xs);
	cursor: pointer;
	font-size: 14px;
	color: var(--color-navy);
}

.calendar__picker-year-btn:hover,
.calendar__picker-month-btn:hover {
	background: var(--color-navy-lightest);
}

.calendar__picker-year-btn.is-active,
.calendar__picker-month-btn.is-active {
	background: var(--color-navy);
	color: var(--color-white);
}

/* ---------------------------------------------------------------------------
   Block 5 — Month View
   Figma 10330:66546 layout_FQ9MPI
   --------------------------------------------------------------------------- */

/* Days header — Figma 10330:66556 layout_0C3KWH */
.calendar__day-header {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	background: #FAFAFA;         /* untokenized: one-off — Figma 10330:66556 fill_0U3YOP */
	min-width: 0;
}

.calendar__day-name {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--space-3);     /* 12px — Figma 10330:66557 layout_FME7C3 */
	border: 1px solid #E8E8E8;  /* untokenized: one-off — Figma 10330:66557 strokes fill_SJ80UM */
	font-size: 20px;             /* Figma 10330:66558 textStyle Text/Large/Normal */
	font-weight: 400;
	color: #969696;              /* untokenized: one-off — Figma 10330:66558 fill_DSF12D */
	text-align: center;
}

.calendar__day-name abbr {
	text-decoration: none;
}

/* Month body grid — Figma 10330:66571 layout_HBLEFL */
.calendar__month-body {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	/* Each week: odd row = date cells, even row = event chips.
	   minmax(0, 1fr) ensures cells shrink below their content's min-content
	   instead of overflowing the parent on narrow viewports (bug-01). */
	min-width: 0;
}

/* Day cell — Figma 10330:66575 layout_MK7LDF */
.calendar__day-cell {
	display: flex;
	flex-direction: column;
	gap: 10px;                   /* Figma 10330:66575 layout_MK7LDF */
	padding: var(--space-3);     /* 12px — Figma 10330:66575 layout_MK7LDF */
	border: 1px solid #E8E8E8;  /* untokenized: one-off — Figma 10330:66575 strokes fill_SJ80UM */
	background: var(--color-white); /* Figma 10330:66575 fill_FBYZ0X */
	min-height: 192px;           /* Figma 10330:66575 layout_MK7LDF height (multi-day weeks grow via grid track) */
}

.calendar__day-cell--out-of-month {
	background: #F8F8F8;         /* untokenized: one-off — Figma 10330:66572 fill_DEVBVH */
}

.calendar__day-cell--today .calendar__day-number {
	color: var(--color-tangerine);
	font-weight: 700;
}

/* Keyboard focus ring for day cells (a11y — roving tabindex pattern) */
.calendar__day-cell:focus-visible {
	outline: 2px solid var(--color-tangerine);
	outline-offset: -2px;
	z-index: 1; /* lift above neighbouring cell borders so the ring isn't clipped */
}

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

.calendar__day-number {
	font-size: 20px;             /* Figma 10330:66576 textStyle Text/Large/Normal */
	font-weight: 400;
	color: #000000;              /* untokenized: one-off — Figma 10330:66576 fill_13VYZJ */
	line-height: 1.3;
}

/* Event base — single-day variant. Overlays the cell area via grid placement.
   All chips are top-pinned (align-self:start). Multi-day pills stack tight at
   the top under the date number; single-day cards stack below the multi-day
   block. The --multi-lanes CSS var is set per chip by JS (renderMonthView())
   so single-day cards in cells without their own multi-day pill still align
   below the multi-day strip horizontally across the whole week.

   Side margin 12px respects the cell's Figma 12px padding (events render as
   siblings of cells in the parent grid, not children — cell padding doesn't
   propagate). Matches Figma layout_M4AZ47 width 341 (spans 2×183 cells − 24px)
   and layout_P9WXK5 width 525 (spans 3×183 cells − 24px).

   Single-day stride 64px = 50px max chip height (clamped 2-line title + time
   + 4px gap) + ~14px breathing so adjacent chips don't visually merge when
   multiple stack in one week (client R3 2026-05-26 — was 52px, gap ~1px read
   as a single block). Top offset 44px clears the date number; +28px per
   multi-day lane in the week; +8px gap before the first single-day card.

   margin-bottom 12px reserves space below the LAST single-day chip — grid
   rows size to the tallest item's margin-box, so this also pushes the cell
   border 12px past the last chip (mirrors Figma cell padding-bottom 12px). */
.calendar__event {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);         /* 4px — Figma 10330:66640 layout_7T2U9W gap */
	margin: calc( 44px + var(--multi-lanes, 0) * 28px + 8px + var(--chip-idx, 0) * 64px ) var(--space-3) var(--space-3);
	border: none;
	background: none;            /* single-day events have no fill — Figma 10330:66640 */
	align-self: start;
	z-index: 2;
	cursor: pointer;
	text-align: left;
	min-width: 0;
	overflow: hidden;
	padding: 0;
	color: inherit;
}

/* Multi-day event chip (Tag) — pastel bg + dark text + bold title.
   Figma 10330:66639 fill_5A1193 #FFE0CC; text fill_FRIRRJ #CC5100.

   Top-pinned below the date number (client R2 2026-05-26). Independent lane
   pool (multiLanes in renderMonthView()) lets us use a tighter 28px stride
   without colliding with bottom-pinned single-day chips. Top offset 44px =
   cell padding-top 12 + .calendar__day-number ~26 (font 20 × line 1.3) + 6
   visual gap. */
.calendar__event--multi {
	flex-direction: row;
	align-items: center;
	padding: 2px var(--space-2); /* Figma 10330:66639 layout_P9WXK5 */
	border-radius: var(--radius-xs); /* 2px — Figma 10330:66639 borderRadius */
	background: var(--color-tangerine-lighter); /* Figma 10330:66639 fill_5A1193 #FFE0CC */
	color: var(--color-tangerine-dark);         /* Figma I10330:66639;10240:41242 fill_FRIRRJ #CC5100 */
	align-self: start;
	margin: calc( var(--chip-idx, 0) * 28px + 44px ) var(--space-3) 0;
}

/* Single-day event time — Figma 10330:66641 textStyle Text/Tiny/Normal */
.calendar__event-time {
	color: var(--color-navy-light); /* #545B68 — Figma 10330:66641 fill_RUNXRA */
	font-size: 12px;             /* Figma 10330:66641 Text/Tiny/Normal */
	font-weight: 400;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Single-day event title (course name) — Figma 10330:66642 textStyle Text/Tiny/Normal.
   Wraps to a max of 2 lines so long course names stay readable but the chip
   stays within the 64px lane stride (client R3 2026-05-26 — replaces previous
   nowrap+ellipsis; 3+ lines would overflow into the next lane). */
.calendar__event-title {
	color: var(--color-navy);    /* #0B1628 — Figma 10330:66642 fill_QVTXO6 */
	font-size: 12px;             /* Figma 10330:66642 Text/Tiny/Normal */
	font-weight: 400;            /* Regular per Figma — was incorrectly Bold */
	line-height: 1.3;
	overflow-wrap: anywhere;     /* break long words rather than overflow */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: calc( 12px * 1.3 * 2 ); /* hard cap @ 2 lines = 31.2px */
}

/* Multi-day Tag overrides — single-line bold 14px in derived dark hue.
   Figma I10330:66638;10240:41242 textStyle style_6BHZO9, fill_FRIRRJ */
.calendar__event--multi .calendar__event-time {
	display: none;               /* Tag shows course name only, no time row */
}

.calendar__event--multi .calendar__event-title {
	color: currentColor;         /* dark hue derived via color-mix from --strip-color */
	font-size: 12px;             /* client R3 2026-05-27 — was 14px (Figma style_6BHZO9), matched to single-day chips to curb cell-height growth in month view */
	font-weight: 700;            /* Figma style_6BHZO9 fontWeight */
	line-height: 1.2;            /* Figma style_6BHZO9 lineHeight 120% */
	/* Multi-day pills stay single-line — Figma design intent + keeps the
	   28px lane stride valid. Long titles get the same ellipsis treatment
	   that single-day chips had pre-Fix-2 (client R2 wrap request applied
	   only to the white single-day cards). */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	overflow-wrap: normal;
}

/* Mobile event dots (≤480 — spec §5 OQ1 resolution).
   Rendered into every month cell by JS; hidden on desktop, revealed at ≤480. */
.calendar__day-dots {
	display: none;
}

/* Mobile-only inline events list (≤480 — Figma 10523:6686).
   Hidden on desktop where chips render inside the grid cells. */
.calendar__mobile-events {
	display: none;
}

.calendar__day-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--strip-color, var(--color-tangerine));
	flex-shrink: 0;
}

/* Empty state */
.calendar__list-empty,
.calendar__day-empty {
	list-style: none;
	padding: var(--space-8) 0;
	color: var(--color-navy-light);
	font-size: 16px;
}

/* ---------------------------------------------------------------------------
   Block 6 — List View
   Figma 10330:66678 layout_IN7318
   --------------------------------------------------------------------------- */

.calendar__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);         /* 24px — client comment 11735972: less space above month divider (was 48px Figma 10330:66688) */
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Month group — flex column so the divider gets explicit space below it
   before its events (client comment 11735972: more space below). */
.calendar__list-month {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);         /* 24px below the month divider (was ~0) */
}

/* Month divider — Figma 10330:66689 layout_VGDT6D */
.calendar__list-divider {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.calendar__list-divider-label {
	font-size: 20px;             /* Figma 10330:66690 textStyle Heading/H6 */
	font-weight: 400;
	color: var(--color-navy-light); /* #545B68 — Figma 10330:66690 fill_RUNXRA */
	flex-shrink: 0;
	width: 264px;                /* Figma 10330:66690 layout_SKW7WT */
}

.calendar__list-divider-line {
	flex: 1;
	border: none;
	border-top: 1px solid var(--color-navy-lighter); /* #CED0D4 — Figma 10330:66691 strokes fill_9PMP6U */
	margin: 0;
}

.calendar__list-items {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);         /* 24px — Figma 10330:66692 layout_SK1PFM */
	list-style: none;
	padding: 0;
	margin: 0;
}

/* List item — Figma 10330:66693 layout_E2PVN0 */
.calendar__list-item {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	border: 1px solid var(--color-navy-lightest); /* #E6E7E9 — Figma 10330:66693 strokes fill_2JGVGN */
	border-radius: var(--radius-sm); /* 4px — Figma 10330:66693 borderRadius */
	overflow: hidden;
}

/* Date block — Figma 10330:66694 layout_RAI9JC */
.calendar__list-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);     /* 16px — Figma 10330:66694 layout_RAI9JC */
	background: var(--color-navy-lightest); /* #E6E7E9 — Figma 10330:66694 fill_2JGVGN */
	flex-shrink: 0;
	min-width: 80px;
}

.calendar__list-day-label {
	font-size: 18px;             /* Figma 10330:66695 textStyle Text/Medium/Bold */
	font-weight: 700;
	color: var(--color-navy);    /* #0B1628 — Figma 10330:66695 fill_QVTXO6 */
}

.calendar__list-day-number {
	font-size: 32px;             /* Figma 10330:66696 textStyle Heading/H4 */
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--color-navy);    /* Figma 10330:66696 fill_QVTXO6 */
	line-height: 1.3;
}

/* Info block — Figma 10330:66697 layout_5650LQ */
.calendar__list-info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-4);         /* 16px — Figma 10330:66697 layout_5650LQ */
	padding: var(--space-4) 36px; /* 16px 36px — Figma 10330:66697 layout_5650LQ */
	flex: 1;
	min-width: 0;
}

.calendar__list-info--colored {
	background: var(--color-tangerine-lightest); /* #FFEFE5 — Figma 10330:66697 fill_ZDVZE9 */
}

.calendar__list-text {
	display: flex;
	flex-direction: column;
	gap: 5px;                    /* Figma 10330:66698 layout_NY73UL */
}

.calendar__list-time {
	font-size: 16px;             /* client comment 11735921 (was 20px Figma 10330:66699) */
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-navy-light); /* #545B68 — default */
}

.calendar__list-item--colored .calendar__list-time {
	color: var(--color-tangerine-dark); /* #CC5100 — Figma 10330:66699 fill_FRIRRJ */
}

/* Multi-day course tag — sits inline right of the time in List & Day views.
   Client comment 11735960: Tangerine Light bg, white 12px text, small-radius
   rectangle (not a pill — per client mockup). */
.calendar__multiday-tag {
	display: inline-block;
	margin-left: var(--space-2);   /* 8px */
	padding: 2px var(--space-2);   /* 2px 8px */
	border-radius: var(--radius-sm); /* 4px — square-ish to match client mockup */
	background: var(--color-tangerine-light); /* #ff934c */
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	vertical-align: middle;
	white-space: nowrap;
}

.calendar__list-title {
	font-size: 18px;             /* client comment 11735918 (was 24px Figma 10330:66700) */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--color-navy);    /* default */
}

.calendar__list-item--colored .calendar__list-title {
	color: var(--color-tangerine-dark); /* #CC5100 — Figma 10330:66700 fill_FRIRRJ */
}

/* "View details" — text-link (no bg, no border, no padding) per Figma
   10330:66701 layout_XIQD85: row gap 8, hug, no fills. Text style_TQQOCL
   (Frutiger Bold 16px), default fill #0B1628 (navy) on plain rows,
   #662800 (tangerine-darker) on colored rows. */
.calendar__list-cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);         /* 8px — Figma 10330:66701 layout_XIQD85 */
	padding: 0;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 16px;             /* Figma style_TQQOCL fontSize */
	font-weight: 700;            /* Figma style_TQQOCL fontWeight */
	line-height: 1.5;
	color: var(--color-navy);    /* #0B1628 — Figma 10330:66793 fill_QVTXO6 */
	cursor: pointer;
	transition: color 0.15s ease;
}

.calendar__list-cta:hover {
	color: var(--color-tangerine);
}

.calendar__list-cta:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 2px;
}

.calendar__list-item--colored .calendar__list-cta {
	color: var(--color-tangerine-darker); /* #662800 — Figma I10330:66701;4179:8938 fill_WHE3Y6 */
}

.calendar__list-item--colored .calendar__list-cta:hover {
	color: var(--color-tangerine-dark);
}

/* ---------------------------------------------------------------------------
   Block 7 — Day View
   Figma 10330:66773 layout_IN7318
   --------------------------------------------------------------------------- */

.calendar__day-timeline {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);         /* 24px — client comment 11735975: less space above time divider (was 48px Figma 10330:66783) */
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Hour group — flex column so the divider gets explicit space below it
   before its events (client comment 11735975: more space below). */
.calendar__day-time-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);         /* 24px below the time divider (was ~0) */
}

/* Time row divider — Figma 10330:66784 layout_PJRFB3 */
.calendar__day-time-divider {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-4);
}

.calendar__day-time-label {
	font-size: 20px;             /* Figma 10330:66785 textStyle Heading/H6 */
	font-weight: 400;
	color: var(--color-navy-light); /* #545B68 — Figma 10330:66785 fill_RUNXRA */
	flex-shrink: 0;
}

.calendar__day-time-line {
	flex: 1;
	border: none;
	border-top: 1px solid var(--color-navy-lighter); /* #CED0D4 — Figma 10330:66786 strokes fill_9PMP6U */
	margin: 0;
}

.calendar__day-events {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);         /* 24px — Figma 10330:66787 layout_SK1PFM */
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Day event item — Figma 10330:66788 layout_8FJJVV */
.calendar__day-event {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: var(--space-9);         /* 36px — Figma 10330:66788 layout_8FJJVV */
	padding: var(--space-2) var(--space-6); /* 8px 24px — Figma 10330:66788 layout_8FJJVV */
	border: 1px solid var(--color-navy-lightest); /* Figma 10330:66788 strokes fill_2JGVGN */
	border-radius: var(--radius-sm); /* 4px — Figma 10330:66788 borderRadius */
	border-left: 4px solid var(--strip-color, var(--color-navy-lightest));
}

.calendar__day-event-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);         /* 16px — Figma 10330:66789 layout_ZWO3RI */
	padding: var(--space-4) 0;
	flex: 1;
	min-width: 0;
}

.calendar__day-event-text {
	display: flex;
	flex-direction: column;
	gap: 5px;                    /* Figma 10330:66790 layout_NY73UL */
}

.calendar__day-event-time {
	font-size: 16px;             /* client comments 11735963/11735965 (was 20px Figma 10330:66791) */
	font-weight: 400;            /* client comment 11735965 — not bold, to match List tab (was 700) */
	color: var(--color-navy-light); /* #545B68 — Figma 10330:66791 fill_RUNXRA */
}

.calendar__day-event-title {
	font-size: 18px;             /* client comments 11735963/11735965 (was 24px Figma 10330:66792) */
	font-weight: 700;            /* client comment 11735965 — bold, to match List tab (was 400) */
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--color-navy);    /* #0B1628 — Figma 10330:66792 fill_QVTXO6 */
}

/* Day-view "View details" — same text-link treatment as list-cta */
.calendar__day-event-cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);         /* 8px — Figma 10330:66701 layout_XIQD85 */
	padding: 0;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-navy);    /* Figma I10330:66793;4179:8938 fill_QVTXO6 */
	cursor: pointer;
	transition: color 0.15s ease;
}

.calendar__day-event-cta:hover {
	color: var(--color-tangerine);
}

.calendar__day-event-cta:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Bottom pager (List + Day views) — Figma 10330:66733 / 10533:7504
   layout_S5GFOZ: row, justify-content space-between, fill x hug
   Both buttons render as transparent text-links per Figma — neither carries
   visible fills or strokes; only the chevron position differentiates them.
   --------------------------------------------------------------------------- */

.calendar__pager {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
}

.calendar__pager-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);         /* 8px — Figma layout_XIQD85 */
	padding: 0;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 14px;             /* Figma Text/Small/Bold (115:3277) */
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-navy);    /* #0B1628 — Figma fill_QVTXO6 */
	cursor: pointer;
	transition: color 0.15s ease;
}

.calendar__pager-btn:hover {
	color: var(--color-tangerine);
}

.calendar__pager-btn:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 2px;
}

.calendar__pager-btn .material-symbols-outlined {
	font-size: 20px;
}

/* ---------------------------------------------------------------------------
   Block 8 — Event Popup
   Figma 10330:66805 layout_DBEDB5
   --------------------------------------------------------------------------- */

.calendar-popup {
	position: fixed;
	inset: 0;
	margin: auto;
	width: fit-content;
	height: fit-content;
	max-width: min(600px, calc(100vw - 32px));
	max-height: calc(100vh - 64px);
	overflow-y: auto;
	z-index: 500;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);         /* 16px — Figma 10330:66805 layout_DBEDB5 */
	padding: var(--space-9);     /* 36px — Figma 10330:66805 layout_DBEDB5 */
	background: var(--color-white); /* Figma 10330:66805 fills fill_FBYZ0X */
	border: 1px solid var(--color-navy-lightest); /* Figma 10330:66805 strokes fill_2JGVGN */
	border-radius: var(--radius-sm); /* 4px — Figma 10330:66805 borderRadius */
	box-shadow: var(--shadow-md); /* 0 3px 16px -4px rgba(0,0,0,0.09) — Figma 10330:66805 effects medium */
}

.calendar-popup[hidden] {
	display: none;
}

/* Backdrop */
.calendar-popup__backdrop {
	position: fixed;
	inset: 0;
	background: var(--color-dark-40); /* rgba(13,11,0,0.4) — Figma derived modal backdrop */
	z-index: 499;
}

.calendar-popup__backdrop[hidden] {
	display: none;
}

/* Popup top — Figma 10330:66806 layout_KBDSZ2 */
.calendar-popup__top {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--space-6);         /* 24px — Figma 10330:66806 layout_KBDSZ2 */
}

.calendar-popup__title-col {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);         /* 8px — Figma 10330:66807 layout_EERULF */
	flex: 1;
	min-width: 0;
}

.calendar-popup__tagline {
	font-size: 12px;             /* Figma 10330:66808 textStyle Tagline Small */
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	color: var(--color-tangerine); /* #FF6600 — Figma 10330:66808 fill_H58NP4 */
	text-transform: uppercase;
}

.calendar-popup__title {
	font-size: 24px;             /* Figma 10330:66809 textStyle Heading/H5 */
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #000000;              /* untokenized: one-off — Figma 10330:66809 fill_13VYZJ */
	margin: 0;
}

.calendar-popup__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;                 /* Figma 10330:66810 layout_VDH41Q */
	height: 24px;
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
	color: var(--color-navy);
}

/* Details panel — Figma 10330:66811 layout_2LK4XE */
.calendar-popup__details {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);         /* 16px — Figma 10330:66811 layout_2LK4XE */
	padding: 26px 34px;          /* Figma 10330:66811 layout_2LK4XE */
	background: var(--color-navy-lightest); /* #E6E7E9 — Figma 10330:66811 fills fill_2JGVGN */
	border-radius: var(--radius-sm); /* 4px — Figma 10330:66811 borderRadius */
}

.calendar-popup__info {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
}

/* Detail row — Figma 10330:66813 layout_F4HUOU */
.calendar-popup__row {
	display: flex;
	flex-direction: row;
	gap: 6px;                    /* untokenized: one-off — Figma 10330:66813 layout_F4HUOU */
}

.calendar-popup__row dt {
	font-size: 18px;             /* Figma 10330:66814 textStyle Text/Medium/Bold */
	font-weight: 700;
	line-height: 1.3;
	color: #000000;              /* untokenized: one-off — Figma 10330:66814 fill_13VYZJ */
	flex-shrink: 0;
}

.calendar-popup__row dd {
	font-size: 18px;             /* Figma 10330:66815 textStyle Text/Medium/Normal */
	font-weight: 400;
	line-height: 1.5;
	color: #000000;              /* Figma 10330:66815 fill_13VYZJ */
	margin: 0;
}

/* Buttons row — Figma 10330:66829 layout_06L4Q3 */
.calendar-popup__buttons {
	display: flex;
	flex-direction: row;
	gap: var(--space-4);         /* 16px — Figma 10330:66829 layout_06L4Q3 */
}

/* Enrol buttons — Figma 10330:66830/66831 layout_S4KJGI */
.calendar-popup__enrol-btn {
	height: 40px;                /* Figma 10330:66830 layout_S4KJGI */
	padding: var(--space-2) var(--space-5); /* 8px 20px — Figma 10330:66830 layout_S4KJGI */
	border-radius: var(--radius-xs); /* 2px — Figma 10330:66830 borderRadius */
}

/* ==========================================================================
   Media Queries — Desktop-first, after all desktop rules (css-architecture.md)
   ========================================================================== */

/* Toolbar intermediate breakpoint (spec §4 Breakpoint deviations) */
@media (max-width: 1024px) {
	.calendar__toolbar {
		gap: var(--space-6);     /* 24px — reduce from 64 */
		flex-wrap: wrap;
	}

	.calendar__search {
		gap: var(--space-3);     /* 12px — tightened from 26px so the input keeps width on narrow toolbars */
	}
}

/* Standard 768 mobile breakpoint */
@media (max-width: 768px) {
	.calendar {
		gap: var(--space-9);     /* reduce from 48 */
		padding: 64px var(--space-6); /* 64px 24px — spec §5 Layout 768 */
	}

	/* Mobile toolbar reflow — Figma 10523:6517 layout_E30LFM
	   row, space-between: [Month-picker] | [search-toggle | divider | view pill]
	   wrap allowed so the search field can drop to a second row under the icons
	   when revealed (designer comment #11 — "search opens BELOW the icon"). */
	.calendar__toolbar {
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--space-3);     /* 12px */
		padding: 0 0 var(--space-6); /* 0 0 24 — Figma 10523:6517 layout_E30LFM */
	}

	/* Reveal mobile toolbar date-picker (Figma 10523:6679) */
	.calendar__toolbar-picker {
		display: flex;
		flex-direction: column;
		position: relative;
		min-width: 0;
		flex-shrink: 1;
	}

	.calendar__toolbar-picker .calendar__date-label {
		font-size: 18px;         /* Figma 10523:6682 textStyle Text/Medium/Bold */
		font-weight: 700;
		line-height: 1.4;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Toolbar-picker has no padding-bottom, so override the view-top calc
	   and anchor popover directly under the trigger. */
	.calendar__toolbar-picker .calendar__date-picker-popover {
		top: 100%;
		margin-top: var(--space-2); /* 8px breathing room */
	}

	/* Search row — Figma 11084:4684 (client R2 2026-05-18). Always-visible
	   full-width row below the toolbar, with input + Find button side-by-side.
	   Supersedes the prior "expandable icon-only search" pattern at 10523:6670. */
	.calendar__search {
		display: flex;
		flex: 1 1 100%;
		order: 3;                /* drop below toolbar icons + month-picker */
		gap: var(--space-2);     /* 8px — Figma 11084:4684 */
		padding: 0;
	}

	.calendar__search-field {
		height: 44px;            /* match Find button height for clean baseline */
	}

	.calendar__search-submit {
		height: 44px;            /* Figma 11084:4686 layout_A0NNPO */
		min-width: 81px;         /* Figma 11084:4686 width fixed 81 */
		padding: 10px var(--space-6); /* 10px 24px — Figma 11084:4686 */
	}

	.calendar__search-submit-label--desktop { display: none; }
	.calendar__search-submit-label--mobile  { display: inline; }

	/* Search-toggle + divider redundant now that search is always visible. */
	.calendar__search-toggle,
	.calendar__icons-divider {
		display: none;
	}

	/* Icons wrapper becomes the right-hand cluster */
	.calendar__icons-wrapper {
		gap: var(--space-3);     /* 12px between toggle, divider, view pill */
	}

	.calendar__search-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		color: var(--color-navy);
	}

	.calendar__search-toggle .material-symbols-outlined {
		font-size: 24px;         /* Figma 10523:6670 layout_CQRM3X */
	}

	.calendar__search-toggle:focus-visible {
		outline: 2px solid var(--color-navy);
		outline-offset: 2px;
		border-radius: var(--radius-xs);
	}

	/* Vertical divider between search-toggle and view pill — Figma 10523:6678 */
	.calendar__icons-divider {
		display: inline-block;
		width: 1px;
		height: 24px;
		background: var(--color-navy-light);
	}

	/* Swap controls: hide desktop tab pill, show the mobile select pill */
	.calendar__view-tabs {
		display: none;
	}

	/* Mobile View pill — Figma 10523:6672 layout_DGL862
	   icon + select label + chevron, single inline group */
	.calendar__view-switcher {
		display: inline-flex;
		gap: var(--space-1);     /* 4px between icon and select */
	}

	.calendar__view-switcher-icon {
		display: inline-flex;
		font-size: 24px;         /* Figma 10523:6676 layout_CQRM3X */
		color: var(--color-navy);
	}

	.calendar__view-switcher select {
		background-color: transparent;
		height: auto;
		padding: 0 22px 0 4px;   /* trimmed for inline pill */
		font-size: 14px;         /* Figma I10523:6673 textStyle Text/Small/Normal */
	}

	/* Hide the in-view date-picker + arrows on mobile — moved into toolbar.
	   Figma mobile frames show no nav arrows; navigation goes via the
	   toolbar Month-picker only. */
	.calendar__view-top {
		display: none;
	}

	/* Month grid day-name: single letter on mobile */
	.calendar__day-name {
		font-size: 14px;
	}

	/* Day cell — keep desktop height to host multi-day chip stack.
	   With chip-idx N: chip top sits at row_height - (29 + 38·N) from row top, day
	   number ends at y=32. Lanes 0–2 require row_height ≥ 138; lane 3+ grows the
	   row track via margin-box contribution (working at 80px broke lane 1 onward). */
	.calendar__day-cell {
		min-height: 140px;
	}

	/* List item date block width */
	.calendar__list-date {
		min-width: 70px;
	}

	.calendar__list-info {
		padding: var(--space-4) var(--space-6); /* 16px 24px — spec §6 Layout 768 */
	}

	/* List item typography overrides — Figma mobile List (10523:6811 / 10524:7113)
	   uses Text/Tiny/Normal (12/400) for label/time/title and Text/Large/Bold
	   (18/700) for the date number. Desktop sizes (18/32/20/24) overflow at 402. */
	.calendar__list-day-label {
		font-size: 12px;             /* Figma 10524:7115 Text/Tiny/Normal (507:4473) */
		font-weight: 400;
	}

	.calendar__list-day-number {
		font-size: 18px;             /* Figma 10524:7116 Text/Large/Bold */
		font-weight: 700;
	}

	.calendar__list-time {
		font-size: 12px;             /* Figma 10524:7141 Text/Tiny/Normal (507:4473) */
		font-weight: 400;
		line-height: 1.3;
	}

	.calendar__list-title {
		font-size: 12px;             /* Figma 10524:7142 Text/Tiny/Normal (507:4473) */
		font-weight: 400;
		line-height: 1.3;
		letter-spacing: 0;
	}

	/* Multi-day variant — pastel info bg promotes title to bold (Figma style_UOGPRV) */
	.calendar__list-item--colored .calendar__list-title {
		font-weight: 700;            /* Figma 10524:7145 style_UOGPRV fontWeight */
		line-height: 1.2;            /* Figma style_UOGPRV lineHeight 120% */
	}

	/* Day view typography + card chrome — Figma 10530:7188 mobile Day View.
	   Mobile card is flat (no left strip), tight padding, compact fonts. */
	.calendar__day-time-label {
		font-size: 14px;             /* Figma 10530:7208 Text/Small/Bold (115:3277) */
		font-weight: 700;
		color: var(--color-navy);    /* fill_QVTXO6 */
	}

	.calendar__day-event {
		gap: 0;                      /* no inner row gap on mobile */
		padding: 0;                  /* Figma 10530:7218 layout_A2KID0 — inner Info owns padding */
		/* Figma 10530:7218 strokes fill_2JGVGN, strokeWeight 1px — uniform on all 4 sides.
		   Desktop sets a 4px colored left strip; mobile resets it to the same plain 1px. */
		border-left: 1px solid var(--color-navy-lightest);
	}

	/* Figma 10530:7207 Selected date wrapper holds only the time text — no
	   horizontal rule extends from it on mobile. */
	.calendar__day-time-line {
		display: none;
	}

	.calendar__day-event-info {
		padding: var(--space-2);     /* 8px — Figma 10530:7222 layout_X9B68I */
		gap: 2px;                    /* Figma 10530:7223 layout_H9S4KY */
	}

	.calendar__day-event-time {
		font-size: 12px;             /* Figma 10530:7224 Text/Tiny/Normal (507:4473) */
		font-weight: 400;
		line-height: 1.3;
	}

	.calendar__day-event-title {
		font-size: 12px;             /* Figma 10530:7225 Text/Tiny/Normal (507:4473) */
		font-weight: 400;
		line-height: 1.3;
		letter-spacing: 0;
	}

	/* Bottom pager — both list and day views.
	   Figma 10530:7479/7487 Text/Tiny/Normal (507:4473) #545B68. */
	.calendar__pager-btn {
		font-size: 12px;
		font-weight: 400;
		color: var(--color-navy-light); /* #545B68 — Figma fill_RUNXRA */
	}

	.calendar__pager-btn .material-symbols-outlined {
		font-size: 16px;             /* match the 12px text scale */
	}

	/* Popup responsive */
	.calendar-popup {
		padding: var(--space-6); /* 24px — spec §8 Layout 768 */
	}

	/* Mobile list + day views: no inline CTA — Figma 10523:6708 (List mobile),
	   10530:7205 (Day mobile). Both frames omit the "View details" link; the
	   whole row is the trigger via .calendar__list-item click. */
	.calendar__list-cta,
	.calendar__day-event-cta {
		display: none;
	}
}

/* 480 compact month + popup buttons (spec §5 + §8 breakpoint deviations) */
@media (max-width: 480px) {
	.calendar {
		padding: 50px 20px;      /* Figma 10523:6516 layout_13TAEZ */
	}

	/* Tight day-name padding so 7 columns fit in 375px viewport.
	   bug-01: at iPhone SE the default 12px side padding pushed SUN past viewport. */
	.calendar__day-name {
		padding: var(--space-2) 2px; /* 8px vertical, 2px horizontal */
		font-size: 11px;
		overflow: hidden;
	}

	/* Day cell compact — Figma 10523:6548 layout_WVE2V5 */
	.calendar__day-cell {
		min-height: 60px;
		padding: var(--space-3) var(--space-1);
		gap: var(--space-1);
	}

	/* Hide event chips on mobile; show dot indicators only */
	.calendar__event {
		display: none;
	}

	.calendar__day-cell {
		align-items: center;
		justify-content: flex-start;
	}

	.calendar__day-dots {
		display: flex;
		gap: 3px;
		justify-content: center;
		min-height: 6px;
	}

	.calendar__day-number {
		font-size: 16px;         /* Figma 10523:6552 textStyle Text/Regular/Normal */
		color: var(--color-navy); /* Figma 10523:6552 fill_QVTXO6 */
	}

	/* Selected day cell — pale tangerine bg, digit forced back to navy.
	   Figma 10523:6577 fill_ZDVZE9 = #FFEFE5. The override on .calendar__day-number
	   is needed because today's rule paints the digit tangerine — which would
	   blend into the pale-orange fill when today is also the selected day. */
	.calendar__day-cell--selected {
		background: var(--color-tangerine-lightest); /* #FFEFE5 — Figma 10523:6577 fill_ZDVZE9 */
	}

	.calendar__day-cell--selected .calendar__day-number {
		color: var(--color-navy);
	}

	/* Mobile Events Wrapper — Figma 10523:6686 layout_VO2XF4
	   column, gap 16, padding 24 0; fill width, hug height */
	.calendar__mobile-events {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);                /* 16px */
		padding: var(--space-6) 0;          /* 24px 0 */
	}

	.calendar__mobile-events[hidden],
	.calendar__mobile-events:empty {
		display: none;
	}

	/* Selected-date heading — Figma 10523:6689 textStyle Text/Small/Bold */
	.calendar__mobile-events-date {
		font-size: 14px;
		font-weight: 700;
		line-height: 1.4;
		color: var(--color-navy);           /* #0B1628 — Figma fill_QVTXO6 */
		margin: 0;
	}

	.calendar__mobile-events-empty {
		font-size: 14px;
		color: var(--color-navy-light);
	}

	/* Event row — Figma 10523:6616/6703/6699 layout_LQMZ6B
	   column gap 2, padding-left 8, left stroke 2px (color per category).
	   `border: none` first to wipe the default button border on all four sides;
	   only the left edge is then painted. */
	.calendar__mobile-event {
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding: 0 0 0 var(--space-2);       /* 8px — Figma layout_LQMZ6B */
		border: none;
		border-left: 2px solid var(--strip-color, var(--color-tangerine));
		background: none;
		text-align: left;
		font: inherit;
		color: inherit;
		cursor: pointer;
	}

	.calendar__mobile-event:focus-visible {
		outline: 2px solid var(--color-navy);
		outline-offset: 2px;
	}

	.calendar__mobile-event-time {
		font-size: 12px;                     /* Figma Text/Tiny/Normal */
		font-weight: 400;
		line-height: 1.3;
		color: var(--color-navy-light);      /* Figma fill_RUNXRA */
	}

	.calendar__mobile-event-title {
		font-size: 12px;                     /* Figma Text/Tiny/Normal */
		font-weight: 400;
		line-height: 1.3;
		color: var(--color-navy);            /* Figma fill_QVTXO6 */
	}

	/* Multi-day event in mobile list — pastel pill, matches the desktop month
	   chip. Figma 10523:6614 layout_P9WXK5 padding 2px 8px, bg fill_5A1193
	   #FFE0CC, text style_UOGPRV (12px Bold #CC5100). */
	.calendar__mobile-event--multi {
		flex-direction: row;
		align-items: center;
		padding: 2px var(--space-2);             /* 2px 8px — Figma layout_P9WXK5 */
		border: none;
		border-radius: var(--radius-xs);         /* 2px — Figma 10240:41240 borderRadius */
		background: var(--color-tangerine-lighter); /* Figma fill_5A1193 #FFE0CC */
		color: var(--color-tangerine-dark);         /* Figma style_UOGPRV #CC5100 */
	}

	.calendar__mobile-event--multi .calendar__mobile-event-time {
		display: none;
	}

	.calendar__mobile-event--multi .calendar__mobile-event-title {
		color: currentColor;
		font-size: 12px;                     /* Figma style_UOGPRV fontSize */
		font-weight: 700;                    /* Figma style_UOGPRV fontWeight */
		line-height: 1.2;                    /* Figma style_UOGPRV lineHeight 120% */
	}

	/* Popup buttons stack */
	.calendar-popup__buttons {
		flex-direction: column;
		gap: var(--space-3);     /* 12px — spec §8 Layout 402 */
	}

	.calendar-popup__enrol-btn {
		width: 100%;
		justify-content: center;
	}

	.calendar-popup__details {
		padding: 16px 20px;      /* spec §8 Layout 402 */
	}
}