/* ── Course schedule section (/next #nc-sessions) ─────────────────── */
/* The collapsible list/calendar of every meeting. Section chrome (eyebrow,
   title, lead, padding) is inherited from next-cohort.css `.nc-section*`;
   everything below only styles what is inside the panel.
   Three colours carry the whole thing: deep brand blue = a frontal meeting,
   the brand gradient's cyan = a live-online meeting, muted amber = a slot on
   the weekly grid with no meeting. Because the first two are neighbours on the
   wheel, every surface that uses them also differs in SHAPE - a square marker
   for the room you travel to, a round one for the broadcast - so the coding
   survives a colour-blind reader, a dimmed screen and a 6px dot. */

.cs-section {
	--cs-session: var(--primary-color);
	--cs-session-soft: rgba(0, 113, 227, 0.08);
	--cs-session-line: rgba(0, 113, 227, 0.22);
	/* The brand gradient's own cyan stop (#0894FF, the first stop of every
	   Logo10x gradient). There was no token for it - the hex is written out
	   ~100 times across public/css - so this is the first one. */
	--cs-online: #0894ff;
	--cs-online-soft: rgba(8, 148, 255, 0.1);
	--cs-online-line: rgba(8, 148, 255, 0.45);
	/* Text needs a deeper cyan: the brand stop is only 3.1:1 on white. Darkening
	   it along its own hue lands on the primary blue, which would erase the very
	   distinction this pair exists to draw, so it is pulled a few degrees toward
	   cyan on the way down - the same move --cs-gap makes on the brand orange.
	   4.9:1 on white. */
	--cs-online-ink: #0077b3;
	/* Deep enough to clear 4.5:1 on white - the brand orange itself does not. */
	--cs-gap: #a86000;
	--cs-gap-soft: rgba(255, 163, 4, 0.1);
	--cs-gap-line: rgba(255, 163, 4, 0.38);
	--cs-surface-quiet: rgba(0, 60, 130, 0.04);
	/* Finished meetings read as quieter but stay legible: 5.1:1 on white. The
	   obvious `opacity` route composites the text along with the background and
	   drops the secondary greys to ~2.2:1, and a past date is still information,
	   not decoration. */
	--cs-past: #6b6c78;
}

/* Screen-reader-only, scoped to this section so the component is portable. */
.cs-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Named `cs-range`, not `cs-summary`: contract-sign-view.css also defines a
   `.cs-summary` (its sticky blurred payment bar) and loads AFTER this file, so
   at equal specificity it won that tie and pinned this line to the top of the
   viewport on /next. Do not rename it back. */
.cs-range {
	margin: 0 0 var(--space-sm);
	font-size: 16px;
	color: var(--text-secondary);
}

.cs-stale {
	margin: 0 0 var(--space-sm);
	font-size: 13.5px;
	color: var(--text-tertiary);
}

/* ── Disclosure ───────────────────────────────────────────────────── */

.cs-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: var(--space-md);
	padding: 11px 22px;
	border: 1px solid rgba(0, 60, 130, 0.16);
	border-radius: var(--radius-full);
	background: var(--bg-surface);
	color: var(--text-color);
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.cs-toggle:hover {
	background: var(--fsp-hover-bg);
	border-color: var(--primary-border);
	box-shadow: var(--shadow-sm);
}

.cs-toggle:active {
	transform: translateY(1px);
}

.cs-toggle-caret {
	font-size: 12px;
	color: var(--text-tertiary);
	transition: transform 0.2s ease;
}

.cs-toggle[aria-expanded='true'] .cs-toggle-caret {
	transform: rotate(180deg);
}

.cs-panel {
	margin-top: var(--space-xl);
	animation: cs-slide-down 0.2s ease;
}

@keyframes cs-slide-down {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Toolbar: view switch + whole-program calendar file ───────────── */

.cs-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--border-light);
}

.cs-viewswitch {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border-radius: var(--radius-full);
	background: var(--cs-surface-quiet);
}

.cs-viewtab {
	padding: 7px 20px;
	border: none;
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 14.5px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.cs-viewtab:hover {
	color: var(--text-color);
}

.cs-viewtab.is-active {
	background: var(--bg-surface);
	color: var(--primary-color);
	box-shadow: var(--shadow-sm);
}

/* ── Calendar-file buttons ────────────────────────────────────────── */

.cs-ics {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border: 1px solid rgba(0, 60, 130, 0.16);
	border-radius: var(--radius-full);
	background: var(--bg-surface);
	color: var(--text-color);
	font-family: inherit;
	font-size: 14.5px;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.cs-ics:hover {
	background: var(--fsp-hover-bg);
	border-color: var(--primary-border);
}

.cs-ics > i {
	font-size: 16px;
	color: var(--primary-color);
}

/* The whole-program file is the lead action; the three per-block files repeat a
   subset of it and stay quiet. */
.cs-ics--lead {
	border-color: var(--cs-session-line);
	background: var(--cs-session-soft);
	color: var(--cs-session);
	font-weight: 500;
}

.cs-ics--lead:hover {
	background: rgba(0, 113, 227, 0.12);
	border-color: var(--cs-session);
}

.cs-ics--compact {
	padding: 6px 14px;
	border-color: transparent;
	background: var(--cs-surface-quiet);
	font-size: 13px;
}

.cs-ics--compact:hover {
	border-color: var(--primary-border);
}

.cs-ics--compact > i {
	font-size: 14px;
}

.cs-ics-label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* The course mark inside a calendar button's sentence. All three components'
   REGULAR variants are drawn on the same 105-unit grid over one 63.4-unit cap,
   so ONE box sizes the three identically - unlike the mastheads above, which
   mix bold / bold / light and therefore need a number each.

   1.42em puts those caps at 11.1px against the button's 13px text, whose Hebrew
   letters stand 8.0px and whose Latin caps would be 9.3px: a Latin proper noun
   in a Hebrew line has to sit a rung ABOVE the Hebrew to read as the same size,
   and the old 1.1em inline box left it visibly shrunken. Sized on the component
   ROOT (the family's own `svg { height: 100% }` fills it) rather than on the
   <svg>, which would tie with `.logo-10x svg` at equal specificity. */
.cs-ics-logo {
	block-size: 1.42em;
	inline-size: auto;
}

/* ── Legend ───────────────────────────────────────────────────────── */

.cs-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-lg);
	margin: 0 0 var(--space-md);
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--text-tertiary);
}

.cs-legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cs-legend-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: none;
}

/* Square: a place you go to. Radius derived from the token rather than picked -
   a quarter of --radius-sm is the softened corner at this size. A pixel down on
   the circle, the same optical correction the calendar marker makes. */
.cs-legend-dot--in_person {
	width: 8px;
	height: 8px;
	background: var(--cs-session);
	border-radius: calc(var(--radius-sm) / 4);
}

/* Round: a broadcast. */
.cs-legend-dot--online {
	background: var(--cs-online);
}

/* Hollow on purpose: an empty ring reads as "nothing happens here". */
.cs-legend-dot--gap {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--cs-gap);
}

/* ── Month map: density strip + legend ────────────────────────────── */
/* Rendered by the section itself, above the disclosure, so it stays on screen
   while the meeting list is collapsed. On desktop the ROW carries the deliberate
   hug from 717530a5 (fit-content + auto inline-end margin) so the card still
   sits on the text's start edge rather than floating in a 1120px section. Below
   1024 that hug is dropped and the card takes the whole column instead - see the
   responsive block. */

.cs-map-row {
	display: flex;
	align-items: center;
	gap: var(--space-xl);
	width: fit-content;
	max-width: 100%;
	margin-top: var(--space-lg);
	margin-inline-end: auto;
	margin-bottom: var(--space-md);
}

.cs-map {
	padding: var(--space-xl);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	background: var(--bg-surface);
	box-shadow: var(--shadow-sm);
}

/* The legend explains the map's colours, so it belongs inside the map's card
   rather than floating beside it as a sibling. */
.cs-map .cs-legend {
	margin: var(--space-lg) 0 0;
	padding-top: var(--space-md);
	border-top: 1px solid var(--border-light);
	justify-content: center;
}

/* Per month: name + year, a weekday header row, then one cell per day. A cell
   shows a dot, except on the 1st / 15th / 30th where the numeral takes the
   dot's place and the cell itself carries the colour - so the density read
   survives the anchor. Cell geometry rides on --cs-cell / --cs-cell-gap: the
   header row and the day rows are ONE grid and cannot drift. */

.cs-strip {
	--cs-cell: 17px;
	--cs-cell-gap: 3px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-lg);
}

.cs-strip-month {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.cs-strip-label {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 0;
	font-family: var(--font-mono);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.04em;
	color: var(--text-color);
	white-space: nowrap;
}

/* The year is a footnote to the month, not part of its name - and one size
   down is what keeps the label narrower than the grid under it. */
.cs-strip-label-year {
	font-size: 13px;
	color: var(--text-tertiary);
}

.cs-strip-grid {
	display: grid;
	grid-template-columns: repeat(7, var(--cs-cell));
	gap: var(--cs-cell-gap);
}

/* The height tracks the font size (1.3x) rather than the cell, so the header
   stays a single mono line box however big the grid under it gets. */
.cs-strip-head {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 14.3px;
	margin-bottom: 2px;
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 1;
	color: var(--text-tertiary);
}

/* The 7th header is Saturday - the one weekday the course never uses. Dimming
   it keeps the eye off a permanently dead column. Friday is NOT dimmed: the
   in-person meetings run on it. */
.cs-strip-head:nth-child(7) {
	opacity: 0.4;
}

.cs-strip-cell {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cs-cell);
	height: var(--cs-cell);
	/* Derived from the token: a full --radius-sm (8px) would round the cell into
	   a pill at every size this grid uses, so half of it is the soft square. */
	border-radius: calc(var(--radius-sm) / 2);
	font-family: var(--font-mono);
	font-size: 10px;
	line-height: 1;
}

/* 4/7 of the cell - the ratio the dot has always had (8px on a 14px cell), now
   expressed against the token so it rescales with every breakpoint instead of
   needing an override in each one. */
.cs-strip-cell::before {
	content: '';
	position: absolute;
	width: calc(var(--cs-cell) * 4 / 7);
	height: calc(var(--cs-cell) * 4 / 7);
	border-radius: 50%;
	background: rgba(0, 60, 130, 0.06);
}

/* Square marker for the day you travel to Mindspace, round for the day you dial
   in. At 10px the shape carries as far as the hue does, which matters here: the
   strip is aria-hidden decoration with no tooltip to fall back on. */
.cs-strip-cell--in_person::before {
	/* 3.6/7 rather than the round dot's 4/7: same optical correction as the
	   calendar marker, so the square does not out-weigh the circle beside it. */
	width: calc(var(--cs-cell) * 3.6 / 7);
	height: calc(var(--cs-cell) * 3.6 / 7);
	background: var(--cs-session);
	border-radius: calc(var(--radius-sm) / 4);
}

.cs-strip-cell--online::before {
	background: var(--cs-online);
}

/* Hollow on purpose: an empty ring reads as "nothing happens here". */
.cs-strip-cell--gap::before {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--cs-gap);
}

.cs-strip-cell.is-blank::before,
.cs-strip-cell.is-anchor::before {
	display: none;
}

.cs-strip-cell.is-anchor {
	background: rgba(0, 60, 130, 0.05);
	color: var(--text-tertiary);
}

.cs-strip-cell--in_person.is-anchor {
	background: var(--cs-session);
	color: #fff;
}

/* Dark ink, not white: the brand cyan is light enough that white on it is
   3.1:1, which a 10px mono numeral cannot carry. Against --text-color it is
   5.5:1, and the flip doubles as one more cue that this is the other mode. */
.cs-strip-cell--online.is-anchor {
	background: var(--cs-online);
	color: var(--text-color);
}

.cs-strip-cell--gap.is-anchor {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--cs-gap);
	color: var(--cs-gap);
}

/* ── How long the studying takes ──────────────────────────────────── */
/* Rendered by the section itself, under the density map and OUTSIDE the
   disclosure, for the same reason the map is: it answers the question the
   section title raises, so it may not depend on someone opening the panel, and
   it describes the whole intake rather than either view mode, so it may not
   live inside the list.
   Net and gross are the same measurement with the holiday weeks taken out and
   left in, so the two numbers sit side by side on one line per course and the
   reader sees the difference rather than being told about it. */

.cs-span {
	margin-top: var(--space-lg);
	margin-bottom: var(--space-md);
	padding: var(--space-lg) var(--space-xl);
	border: 1px solid var(--cs-session-line);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(560px 240px at 100% 0%, rgba(8, 148, 255, 0.06), transparent 62%),
		var(--bg-surface);
	box-shadow: var(--shadow-sm);
}

.cs-span-title {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--text-color);
}

.cs-span-lead {
	margin: 0 0 var(--space-lg);
	max-inline-size: 760px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--text-secondary);
}

.cs-span-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-span-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm) var(--space-xl);
	padding: 14px 0;
}

.cs-span-row + .cs-span-row {
	border-top: 1px solid var(--border-light);
}

.cs-span-mark {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 1 auto;
	min-inline-size: 0;
}

/* The whole program is the row people are actually costing out, so its numbers
   carry the brand blue while the two courses stay in text colour. */
.cs-span-program {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-color);
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* ── The bonus line ───────────────────────────────────────────────── */
/* An addition to the full track, not a third course: it is inset and tinted
   instead of sitting flush with the two course rows above it, and it carries a
   "+" where they carry a brand mark. Its meeting count stays in the same
   column as theirs, which is the whole point - 20 + 10 + 5 has to read as
   arithmetic straight down to the 35 on the total line. Same pale band as
   `.cs-block--bundle` uses in the list below, so the bonus looks like the same
   thing in both places. */

.cs-span-row--bonus {
	padding-inline: var(--space-md);
	border-radius: var(--radius-sm);
	background: linear-gradient(180deg, #f7faff 0%, #eef5ff 100%);
}

/* The tinted band is its own separator; a hairline on top of it as well reads
   as a mistake. Written as an adjacency so it outranks the row divider rule. */
.cs-span-row + .cs-span-row--bonus {
	border-top-color: transparent;
}

.cs-span-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 22px;
	block-size: 22px;
	border-radius: 50%;
	background: var(--cs-session-soft);
	color: var(--cs-session);
	font-family: var(--font-mono);
	font-size: 15px;
	line-height: 1;
}

.cs-span-bonus {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	min-inline-size: 0;
}

/* A rung lighter than `.cs-span-program`: the total line stays the heaviest
   thing in the card. */
.cs-span-bonus-title {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--text-color);
}

.cs-span-bonus-note {
	font-size: 12.5px;
	color: var(--text-tertiary);
}

/* One box per mark, three different numbers, same reason as .cs-block-logo:
   the bold Developer mark is drawn on an 86-unit grid, the bold Architect on
   83 and the light combined mark on 105, all over one 60.726-unit cap height.
   These render the letters at an identical 18.4px across the three rows. */
.cs-span-logo {
	block-size: 26px;
	inline-size: auto;
}

.cs-span-logo--arch {
	block-size: 25.1px;
}

.cs-span-logo--course {
	block-size: 31.8px;
}

.cs-span-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px var(--space-xl);
	font-size: 14.5px;
	color: var(--text-secondary);
}

.cs-span-fact {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	white-space: nowrap;
}

/* Mono, weight 400: a bold numeral is off-limits with the brand gradient and
   would out-shout the marks beside it anyway. */
.cs-span-num {
	font-family: var(--font-mono);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--text-color);
}

.cs-span-row--program .cs-span-num {
	color: var(--cs-session);
}

.cs-span-note {
	margin: var(--space-md) 0 0;
	padding-top: var(--space-md);
	border-top: 1px solid var(--border-light);
	font-size: 13.5px;
	color: var(--text-tertiary);
}

/* ── Course blocks ────────────────────────────────────────────────── */

/* No explicit focus ring existed anywhere in this section: it relied on the UA
   default while running a roving-tabindex tablist. */
.cs-toggle:focus-visible,
.cs-viewtab:focus-visible,
.cs-ics:focus-visible,
.cs-cal-arrow:focus-visible {
	outline: 2px solid var(--cs-session);
	outline-offset: 2px;
}

.cs-list {
	display: grid;
	gap: var(--space-lg);
}

.cs-cal {
	padding: var(--space-lg);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	background: var(--bg-surface);
	box-shadow: var(--shadow-sm);
}

.cs-block {
	padding: var(--space-lg);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	background: var(--bg-surface);
	box-shadow: var(--shadow-sm);
}

/* The bonus block is not a third course - a tinted band and a dashed edge say
   so before the note under the heading does. */
.cs-block--bundle {
	border-style: dashed;
	border-color: var(--border-default);
	background: linear-gradient(180deg, #f7faff 0%, #eef5ff 100%);
	box-shadow: none;
}

/* The block masthead: a mono kicker, then the course logo as the block's actual
   identity, then the date range. The logo gets a real box via block-size on the
   component ROOT - the family's own base rule (.logo-10x svg /
   .logo-10x-architect svg { height: 100% }) then fills it. Do NOT reach for
   .logo-10x-inline here: that class lives in logo-10x.css, which loads BEFORE
   logo-10x-architect.css, so the architect's own base rules win the
   equal-specificity tie and the mark collapses to 0x0. */

.cs-block-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--space-md);
	row-gap: var(--space-sm);
	/* Pulled out to the card's own edges so the header reads as a masthead
	   rather than as the first paragraph of the body. */
	margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-lg);
	padding: var(--space-lg);
	border-bottom: 1px solid var(--border-light);
	background: linear-gradient(180deg, rgba(0, 113, 227, 0.05) 0%, rgba(0, 113, 227, 0) 100%);
	border-start-start-radius: var(--radius-lg);
	border-start-end-radius: var(--radius-lg);
}

/* The bundle card already carries its own tinted band - a second one on the
   masthead double-tints it. */
.cs-block--bundle .cs-block-head {
	background: none;
}

.cs-block-title {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--text-color);
}

/* 13px, not the 11px this started at: at mono's small x-height an 11px kicker
   read as a caption rather than as the label of the mark under it, and it is
   the line that says WHICH kind of meetings the block lists. */
.cs-block-kicker {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.16em;
	line-height: 1;
	color: var(--text-tertiary);
}

/* One box per mark, and they are deliberately three different numbers. The three
   variants used here are drawn on three different grids - the no-terminal
   viewBox is 86 units tall for Logo10x, 83 for Logo10xArchitect and 105 for
   Logo10xCourse - while all three share a 60.726-unit cap height. Sizing each
   box to its own viewBox is what makes the letters themselves come out at an
   identical 24.23px across the masthead row; a single shared block-size would
   render three visibly different marks. Same ratio, smaller, on phones. */
.cs-block-logo {
	block-size: 34.3px;
	inline-size: auto;
}

.cs-block-logo--arch {
	block-size: 33.1px;
}

.cs-block-logo--course {
	block-size: 41.9px;
}

/* Blocks with no logo of their own (unknown course types). */
.cs-block-plain {
	font-size: clamp(19px, 2.2vw, 23px);
	line-height: 1.25;
}

/* Tracks the kicker above it - the two greys frame the mark between them and
   drift apart if only one of them moves. */
.cs-block-meta {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
	font-family: var(--font-mono);
	font-size: 13.5px;
	color: var(--text-tertiary);
}

.cs-block-ics {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	margin-inline-start: 0;
}

.cs-block-note {
	margin: 0 0 var(--space-md);
	padding-inline-start: 12px;
	border-inline-start: 2px solid var(--primary-border);
	font-size: 14px;
	color: var(--text-secondary);
}

/* ── Meeting rows ─────────────────────────────────────────────────── */

.cs-rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-row {
	display: grid;
	/* The date column fits the widest form, "27.11.2026", at the mono size below.
	   Anything narrower and the date runs into the time beside it.
	   Column 5 is sized for the widest mode chip, the in-person one, which now
	   also names the live broadcast: icon 15 + gap 7 + text 268 at 13.5px +
	   padding 16 = 306. A fixed track rather than max-content, because every
	   row is its own grid and content sizing would let the columns jitter from
	   row to row. Column 6 is slack that the "next meeting" flag starts in, so
	   the flag touches the row it labels instead of drifting to the far edge. */
	grid-template-columns: 40px 84px 104px 128px 306px minmax(0, 1fr);
	align-items: center;
	gap: var(--space-sm);
	padding: 10px var(--space-sm);
	border-bottom: 1px solid var(--border-light);
	font-size: 15px;
	transition: background 0.15s ease;
}

.cs-row:last-child {
	border-bottom: none;
}

/* Weekday + date + time are wrapped in one element ONLY so the phone layout can
   treat them as a single wrapping line. `display: contents` dissolves the
   wrapper here, so on desktop they remain direct children of the row grid and
   keep their own columns. */
.cs-row-when {
	display: contents;
}

.cs-row-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-sm);
	background: var(--cs-session-soft);
	color: var(--cs-session);
	font-family: var(--font-mono);
	font-size: 13px;
}

.cs-row-num--gap {
	background: var(--cs-gap-soft);
	color: var(--cs-gap);
	font-size: 12px;
}

.cs-row-day {
	color: var(--text-secondary);
}

.cs-row-date {
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--text-color);
	white-space: nowrap;
}

.cs-row-time {
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--text-secondary);
	/* LTR so the range reads 10:30 - 14:00, and nowrap so a narrow column
	   breaks the layout rather than silently splitting the range in two. */
	direction: ltr;
	text-align: start;
	white-space: nowrap;
}

.cs-row-mode {
	grid-column: 5;
	/* Hug the label instead of filling the track. The column is sized for the
	   longest chip ("פרונטלי במתחם Mindspace + מקוון בשידור חי"); a grid item
	   stretches by default, which would leave the short online chip as a mostly
	   empty 306px pill. */
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	background: var(--cs-surface-quiet);
	font-size: 13.5px;
	color: var(--text-secondary);
}

.cs-row-mode > i {
	font-size: 15px;
	color: var(--text-tertiary);
}

/* The chips carry the same two colours the calendar surfaces do, so a reader who
   learned the coding from the legend above does not have to relearn it here. */
.cs-row-mode--in_person {
	background: var(--cs-session-soft);
	color: var(--cs-session);
}

.cs-row-mode--in_person > i {
	color: var(--cs-session);
}

.cs-row-mode--online {
	background: var(--cs-online-soft);
	color: var(--cs-online-ink);
}

.cs-row-mode--online > i {
	color: var(--cs-online-ink);
}

.cs-row-flag {
	grid-column: 6;
	justify-self: start;
	padding: 3px 12px;
	border-radius: var(--radius-full);
	background: var(--cs-session);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}

.cs-row--session:hover {
	background: var(--cs-surface-quiet);
	border-radius: var(--radius-sm);
}

/* An inset box-shadow with a NEGATIVE x offset puts the rail on the physical
   RIGHT edge, which is the reading start in RTL. */
.cs-row--session.is-next {
	background: var(--cs-session-soft);
	border-radius: var(--radius-sm);
	box-shadow: inset -3px 0 0 0 var(--cs-session);
}

.cs-row--session.is-next:hover {
	background: var(--cs-session-soft);
}

.cs-row--session.is-next .cs-row-num {
	background: var(--cs-session);
	color: #fff;
}

.cs-row--session.is-next .cs-row-date {
	font-weight: 500;
}

.cs-row--session.is-past .cs-row-day,
.cs-row--session.is-past .cs-row-date,
.cs-row--session.is-past .cs-row-time,
.cs-row--session.is-past .cs-row-mode,
.cs-row--session.is-past .cs-row-mode > i {
	color: var(--cs-past);
}

.cs-row--session.is-past .cs-row-num {
	background: var(--cs-surface-quiet);
	color: var(--cs-past);
}

.cs-row--session.is-past .cs-row-mode {
	background: var(--cs-surface-quiet);
	color: var(--cs-past);
}

/* An empty grid slot is context, not an event: an inset start rail plus a fade
   instead of a filled band, so the meetings stay the loudest thing in the list.
   `to left` starts the tint at the physical RIGHT (the RTL reading start);
   `90deg` would put it on the wrong edge. The text colour is unchanged -
   --cs-gap is the 4.5:1-on-white value and still clears on the paler row. */
.cs-row--gap {
	background: linear-gradient(to left, var(--cs-gap-soft) 0%, transparent 55%);
	box-shadow: inset -3px 0 0 0 var(--cs-gap-line);
	border-radius: var(--radius-sm);
	border-bottom-color: transparent;
}

.cs-row-reason {
	grid-column: 4 / -1;
	color: var(--cs-gap);
	font-size: 14.5px;
}

/* ── Column header + month dividers ──────────────────────────────── */

.cs-row--head,
.cs-row--month {
	border-bottom: none;
	padding-block: 4px;
	font-family: var(--font-mono);
	color: var(--text-tertiary);
}

.cs-row--head {
	font-size: 10.5px;
	letter-spacing: 0.1em;
	border-bottom: 1px solid var(--border-light);
	padding-bottom: 8px;
}

.cs-row--head > span:nth-child(1) { grid-column: 1; }
.cs-row--head > span:nth-child(2) { grid-column: 2; }
.cs-row--head > span:nth-child(3) { grid-column: 3; }
.cs-row--head > span:nth-child(4) { grid-column: 4; }
.cs-row--head > span:nth-child(5) { grid-column: 5; }

.cs-row--month {
	grid-template-columns: 1fr;
	margin-top: var(--space-md);
	font-size: 12px;
	letter-spacing: 0.14em;
}

/* The first divider always follows the column header, so it needs no top gap.
   (:first-of-type would never match - the header <li> is the first of type.) */
.cs-row--head + .cs-row--month {
	margin-top: 0;
}

.cs-row-month {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
}

/* nowrap or the trailing rule squeezes "ספטמבר 2026" onto two lines on a phone,
   where the divider is the only landmark in twenty dated rows. */
.cs-row-month {
	white-space: nowrap;
}

.cs-row-month::after {
	content: '';
	flex: 1;
	block-size: 1px;
	inline-size: 120px;
	background: var(--border-light);
}

/* ── Calendar mode ────────────────────────────────────────────────── */

.cs-cal-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-lg);
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--border-light);
}

.cs-cal-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(0, 60, 130, 0.16);
	border-radius: 50%;
	background: var(--bg-surface);
	color: var(--text-color);
	font-size: 15px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.cs-cal-arrow:hover:not(:disabled) {
	background: var(--fsp-hover-bg);
	border-color: var(--primary-border);
}

.cs-cal-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.cs-cal-month {
	margin: 0;
	min-width: 168px;
	text-align: center;
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 500;
	color: var(--text-color);
}

.cs-cal-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 5px;
}

.cs-cal-table th {
	padding-bottom: var(--space-sm);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--text-tertiary);
}

/* Saturday, the one weekday the course never uses - same treatment as the month
   strip's 7th column. */
.cs-cal-table th:last-child {
	opacity: 0.4;
}

/* Saturday cells that carry nothing. `--none` is emitted for exactly the days
   with neither a meeting nor a gap (and for the leading blanks, which are
   invisible anyway), so this says the same thing the old triple `:not()` chain
   did without having to grow a clause per mode. */
.cs-cal-cell--none:last-child {
	opacity: 0.5;
}

.cs-cal-cell {
	height: 66px;
	padding: 6px 4px;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--cs-surface-quiet);
	text-align: center;
	vertical-align: top;
}

.cs-cal-cell.is-blank {
	background: transparent;
}

.cs-cal-cell--in_person {
	background: var(--cs-session-soft);
	border-color: var(--cs-session-line);
}

/* A slightly stronger tint and edge than the frontal cell's: the cyan is the
   lighter of the two, so at equal alpha it would read as the weaker day, which
   is not the distinction being drawn. */
.cs-cal-cell--online {
	background: var(--cs-online-soft);
	border-color: var(--cs-online-line);
}

.cs-cal-cell--gap {
	background: var(--cs-gap-soft);
	border-color: var(--cs-gap-line);
}

.cs-cal-cell.is-next {
	box-shadow: 0 0 0 2px var(--cs-session);
}

/* Same reasoning as .cs-row--session.is-past: mute the surface, not the text. */
.cs-cal-cell.is-past {
	background: var(--cs-surface-quiet);
	border-color: transparent;
}

.cs-cal-cell.is-past .cs-cal-num,
.cs-cal-cell.is-past .cs-cal-time {
	color: var(--cs-past);
}

.cs-cal-cell.is-past .cs-cal-dot {
	opacity: 0.45;
}

.cs-cal-num {
	display: block;
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--text-secondary);
}

.cs-cal-cell--in_person .cs-cal-num {
	color: var(--cs-session);
}

.cs-cal-cell--online .cs-cal-num {
	color: var(--cs-online-ink);
}

.cs-cal-cell--gap .cs-cal-num {
	color: var(--cs-gap);
}

/* 8px, not the 6 this started at: the marker now has to carry a SHAPE as well
   as a colour, and a 6px square and a 6px circle are the same blob. */
.cs-cal-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-top: 4px;
	border-radius: 50%;
}

/* Square / round / hollow ring - the same three markers the legend teaches.
   The square is a pixel smaller than the circle on purpose: at equal width a
   square carries about a quarter more ink, and the two would stop reading as
   one family. */
.cs-cal-dot--in_person {
	width: 7px;
	height: 7px;
	background: var(--cs-session);
	border-radius: calc(var(--radius-sm) / 4);
}

.cs-cal-dot--online {
	background: var(--cs-online);
}

.cs-cal-dot--gap {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--cs-gap);
}

.cs-cal-time {
	display: block;
	margin-top: 3px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-tertiary);
	direction: ltr;
}

.cs-cal-notes {
	margin: var(--space-md) 0 var(--space-lg);
	padding: 0;
	list-style: none;
}

.cs-cal-note {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	font-size: 14px;
	color: var(--cs-gap);
}

.cs-cal-note > i {
	font-size: 14px;
}

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	/* Every track narrows here except the mode chip: its font-size does not
	   shrink at this breakpoint, so the 306px the chip measures does not either. */
	.cs-row {
		grid-template-columns: 36px 76px 100px 122px 306px minmax(0, 1fr);
		font-size: 14.5px;
	}

	/* Below desktop the map stops hugging and takes the column. The hug reads as
	   deliberate only while there is a wide section for the card to sit at the
	   start of; once the section itself is narrow the leftover gutter just looks
	   like a mistake. Phones inherit this - the 767 block is nested inside. */
	.cs-map-row,
	.cs-map {
		width: 100%;
	}

	.cs-map {
		padding: var(--space-lg);
	}

	/* Grid, not the desktop flex row: auto-fit tracks share the extra width
	   evenly and keep the last (short) row aligned with the ones above it, where
	   flex + space-between would strand two months against opposite edges. */
	.cs-strip {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(137px, 1fr));
		justify-items: center;
	}
}

@media (max-width: 767px) {
	.cs-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.cs-viewswitch {
		justify-content: center;
	}

	.cs-viewtab {
		flex: 1;
	}

	.cs-ics {
		justify-content: center;
	}

	.cs-block-head {
		grid-template-columns: minmax(0, 1fr);
		margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-md);
		padding: var(--space-md);
	}

	.cs-block-ics {
		grid-column: 1;
		grid-row: 3;
		margin-inline-start: 0;
		width: 100%;
	}

	.cs-block-logo {
		block-size: 26.2px;
	}

	.cs-block-logo--arch {
		block-size: 25.3px;
	}

	.cs-block-logo--course {
		block-size: 32px;
	}

	.cs-block-kicker {
		font-size: 12px;
	}

	.cs-block-meta {
		font-size: 12.5px;
	}

	/* The duration card stacks: mark over facts, one line per band. Same
	   cap-height ratios as the desktop trio, two rungs down. The bonus band
	   keeps its inset padding - at this width it is the only thing separating
	   its tinted block from the card's own edge. */
	.cs-span {
		padding: var(--space-lg) var(--space-md);
	}

	.cs-span-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.cs-span-mark {
		flex-wrap: wrap;
		gap: 8px;
	}

	.cs-span-logo {
		block-size: 21px;
	}

	.cs-span-logo--arch {
		block-size: 20.3px;
	}

	.cs-span-logo--course {
		block-size: 25.7px;
	}

	.cs-span-facts {
		gap: 4px var(--space-md);
		font-size: 14px;
	}

	/* Force the break after the meeting count so the two month figures - the
	   pair the reader is comparing - always share a line instead of being split
	   wherever the text happens to run out of width. */
	.cs-span-fact:first-child {
		flex-basis: 100%;
	}

	.cs-span-num {
		font-size: 16.5px;
	}

	/* The 2-band phone row has no columns to head. */
	.cs-row--head {
		display: none;
	}

	.cs-cal {
		padding: var(--space-md);
	}

	/* Two bands per meeting, and only two columns to build them from:
	     band 1  [n]  weekday  date  time      <- when it is
	     band 2  the mode chip, full width     <- what kind of meeting it is
	   The old layout put the chip in a 1fr track next to the time, which left
	   it ~160px wide, so the longest chip broke over three ragged lines and the
	   row lost its shape. Given the whole width it sets on one line at 390px and
	   two at the narrowest phones. */
	.cs-row {
		grid-template-columns: 30px minmax(0, 1fr);
		align-items: center;
		column-gap: 10px;
		row-gap: 8px;
		padding: 12px 6px;
	}

	/* Band 1. Wrapping, not a fixed track each: at 390px the three sit on one
	   line with room to spare, and on a 320px phone the time drops to a second
	   line instead of pushing the row past the card edge. */
	.cs-row-when {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 9px;
		row-gap: 2px;
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
	}

	.cs-row-num {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		width: 30px;
		height: 30px;
	}

	.cs-row-date,
	.cs-row-time {
		font-size: 13px;
	}

	/* Band 2 spans the badge column too - a chip indented under the weekday
	   would wrap again, and the full-bleed edge lines up with the badge above
	   it, which reads as deliberate rather than as a stray indent. */
	.cs-row-mode {
		grid-column: 1 / -1;
		grid-row: 2;
		align-items: flex-start;
		padding: 5px 9px;
		font-size: 12.5px;
		line-height: 1.45;
	}

	.cs-row-mode > i {
		/* Optical: the icon centres on the first line of a wrapped chip. */
		margin-top: 1px;
	}

	.cs-row-flag {
		grid-column: 1 / -1;
		grid-row: 3;
		justify-self: start;
	}

	.cs-row-reason {
		grid-column: 1 / -1;
		grid-row: 2;
		font-size: 14px;
	}

	.cs-map {
		padding: var(--space-md);
	}

	/* 106 is exactly the month grid's own width (7 * 13 + 6 * 2.5), so a track
	   never squeezes one. Three fit per row from about 410px of viewport up;
	   narrower phones drop to two and auto-fit shares the width between them. */
	.cs-strip {
		--cs-cell: 13px;
		--cs-cell-gap: 2.5px;
		grid-template-columns: repeat(auto-fit, minmax(106px, 1fr));
		gap: var(--space-sm);
	}

	.cs-strip-label {
		font-size: 14px;
	}

	.cs-strip-label-year {
		font-size: 11.5px;
	}

	.cs-strip-head {
		height: 12.2px;
		font-size: 10px;
	}

	.cs-strip-cell {
		font-size: 9px;
	}

	.cs-cal-table {
		border-spacing: 3px;
	}

	.cs-cal-cell {
		height: 48px;
		padding: 4px 2px;
	}

	.cs-cal-num {
		font-size: 13px;
	}

	/* Tight but it fits, and the start time is the only thing in a calendar cell
	   that separates a Friday meeting from a Monday one. */
	.cs-cal-time {
		font-size: 10px;
		margin-top: 2px;
	}

	.cs-cal-dot {
		margin-top: 3px;
	}

	.cs-cal-month {
		min-width: 0;
		font-size: 17px;
	}

	.cs-legend {
		gap: var(--space-md);
		font-size: 12.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cs-panel {
		animation: none;
	}

	.cs-row,
	.cs-toggle,
	.cs-toggle-caret,
	.cs-viewtab,
	.cs-ics,
	.cs-cal-arrow {
		transition: none;
	}
}