/* ─── Timetable ────────────────────────────────────────── */

.timetable										{	max-width: var(--layout-wide); margin-bottom: 0; position: relative; }
.timetable-intro								{	margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Plate schematic — dial/reticle in the empty canvas right of the intro. */
.timetable-plate								{	position: absolute; top: -1em; right: 0;
													width: clamp(210px, 22vw, 340px);

	@media (max-width: 1100px)					{	display: none; }
}

/* Home embed keeps a smaller heading via .timetable-intro--home in home.css */

.timetable-intro--home .lede a, .timetable-footnote a	{	color: var(--color-brand); }


/* ─── Legend (mono key strip) ────────────────────────────── */

.timetable-legend								{	display: flex; flex-wrap: wrap; gap: 0.5em 1.75em;
													margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem); padding: 0.85em 0;
													border-top: 1px solid var(--color-rule);
													border-bottom: 1px solid var(--color-rule);
													font-family: var(--font-mono); font-size: 11px; font-weight: 500;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													color: var(--color-paper-mute); line-height: 1;

	li											{	display: inline-flex; align-items: center; gap: 0.6em; }

	.timetable-legend-swatch					{	width: 10px; height: 10px; background: currentColor; }
}


/* ─── Grid (6-day matrix — genuine 2-axis, stays grid) ───── */

.timetable-grid									{	counter-reset: timetable-day; display: grid;
													grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0;
													border-top: 3px solid var(--color-brand);

	@media screen and (max-width: 1100px)		{	grid-template-columns: repeat(3, minmax(0, 1fr)); }

	@media screen and (max-width: 650px)		{	grid-template-columns: 1fr; }
}

.timetable-day									{	counter-increment: timetable-day;
													padding: 1.5em clamp(0.85rem, 1.25vw, 1.25rem);
													border-right: 1px solid var(--color-rule);
	&:first-child								{	padding-left: 0; }
	&:last-child								{	padding-right: 0; border-right: none; }

	/* Day header */
	h2											{	display: flex; flex-direction: column; gap: 0.5em;
													margin: 0 0 1.5em; padding: 0;
													border: none;
													font-family: var(--font-display);
													font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 700;
													line-height: 1; letter-spacing: -0.005em; text-transform: uppercase;
													color: var(--color-paper);
		&::before								{	content: counter(timetable-day, decimal-leading-zero);
													font-family: var(--font-mono); font-size: 11px; font-weight: 500;
													letter-spacing: var(--track-mono); color: var(--color-brand);
													line-height: 1;
		}
	}

	.timetable-day-empty						{	margin: 0;
													font-family: var(--font-mono); font-size: 10px;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													color: var(--color-paper-low);
	}

	/* Class entry */
	article										{	margin: 0 0 1.25em; padding: 0 0 1.25em;
													border-bottom: 1px solid var(--color-rule);
		&:last-child							{	margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
	}

	time										{	margin: 0 0 0.5em;
													font-family: var(--font-mono); font-size: 11px; font-weight: 500;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													color: var(--color-paper-low); line-height: 1;
	}

	h3											{	margin: 0 0 0.5em;
													font-family: var(--font-display);
													font-size: clamp(1.05rem, 1.4vw, 1.8rem); font-weight: 500;
													line-height: 1; letter-spacing: -0.015em; word-break: break-word;
	}

	span										{	margin: 0;
													font-family: var(--font-mono); font-size: 10px; font-weight: 500;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													line-height: 1.3; color: var(--color-paper-quiet);
													word-break: break-word;

		b										{	color: var(--color-paper-low); }
	}

	/* Tablet — 3-up: reset edge padding per row, rule above wrapped rows */
	@media screen and (max-width: 1100px)		{	padding: 1.5em 1.25rem;
		&:first-child, &:nth-child(3n+1)		{	padding-left: 0; }
		&:nth-child(3n), &:last-child			{	padding-right: 0; border-right: none; }
		&:nth-child(n+4)						{	border-top: 1px solid var(--color-rule); }
	}

	/* Mobile — single column, stacked with bottom rules */
	@media screen and (max-width: 650px)		{

		&, &:first-child, &:nth-child(3n+1)		{	padding: 1.5em 0;
													border-right: none; border-bottom: 1px solid var(--color-rule);
		}
		&:nth-child(n+4)						{	border-top: none; }
		&:last-child							{	border-bottom: none; }

		h2										{	flex-direction: row; align-items: baseline; gap: 0.85em;
													margin-bottom: 1.25em;
													font-size: 1.5rem;
		}

		h3										{	font-size: var(--fs-3); }
	}
}


/* ─── Live state (today / on now / next) ─────────────────── */

/* Marked server-side in timetable-grid.php from Sydney time. Today's column
   carries a solid brand tab planted on the grid's red top rule, plus a
   brand-red day name. The session running right now gets a filled "ON NOW"
   pill with a radar pulse; the first session still to come gets an outlined
   "UP NEXT" pill. Pills hang off the top-left of the entry, slightly into
   the gutter, like inspection tags. */

.timetable-day--today							{	position: relative; }

.timetable-day--today h2						{	color: var(--color-brand); }

/* Tab above the red line — header for the live column.
   span. prefix beats the generic `.timetable-day span` coach-line colour. */
span.timetable-day-flag							{	position: absolute; bottom: 100%; left: 0;
															display: inline-flex; align-items: center; gap: 0.6em;
															margin-bottom: 3px; padding: 0.6em 0.85em;
															background: var(--color-brand); color: var(--color-paper);
															font-family: var(--font-mono); font-size: 10px; font-weight: 700;
															letter-spacing: var(--track-mono); text-transform: uppercase;
															line-height: 1;

	&::before										{	content: ""; flex: 0 0 auto; width: 6px; height: 6px;
															background: currentColor;
															animation: timetable-pulse 1.6s ease-in-out infinite;
	}
}

/* Inspection-tag pills on the live entries. */
/* article. prefix outguns the `.timetable-day article` padding reset */
article.timetable-class--now,
article.timetable-class--next					{	position: relative;

	time										{	color: var(--color-brand); }

	&::before									{	position: absolute; top: -0.55em; right: -0.6em; z-index: 1;
													padding: 0.55em 0.8em; border-radius: 999px;
													font-family: var(--font-mono); font-size: 10px; font-weight: 700;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													line-height: 1;
	}
}

.timetable-class--now::before					{	content: "On now";
													background: var(--color-brand); color: var(--color-ink-0);
													animation: timetable-radar 1.8s var(--ease-out) infinite;
}

.timetable-class--next::before					{	content: "Up next";
													background: var(--color-ink-0);
													border: 1px solid var(--color-brand); color: var(--color-brand);
}

@keyframes timetable-pulse						{
	0%, 100%									{	opacity: 1; }
	50%											{	opacity: 0.2; }
}

@keyframes timetable-radar						{
	from										{	box-shadow: 0 0 0 0 var(--color-brand-mute); }
	to											{	box-shadow: 0 0 0 12px transparent; }
}

@media (prefers-reduced-motion: reduce)			{
	.timetable-day-flag::before					{	animation: none; }
	.timetable-class--now::before				{	animation: none; }
}

/* Mobile single-column: no side gutters, keep pills inboard. */
@media screen and (max-width: 650px)			{
	.timetable-class--now::before,
	.timetable-class--next::before				{	right: 0; }
	span.timetable-day-flag						{	position: static; align-self: flex-start;
															display: inline-flex; margin: 0 0 1em;
	}
	.timetable-day--today						{	border-top: 3px solid var(--color-brand); }
}


/* ─── Empty state ────────────────────────────────────────── */

.timetable-empty								{	padding: 2em;
													font-family: var(--font-mono); font-size: 11px;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													text-align: center; color: var(--color-paper-mute);

	a											{	color: var(--color-brand); }
}


/* ─── Footnote (notes block under grid) ──────────────────── */

.timetable-footnote								{	margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5em;
													border-top: 3px solid var(--color-brand);

	.timetable-footnote-eyebrow					{	margin: 0 0 1em;
													font-family: var(--font-mono); font-size: 11px; font-weight: 500;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													color: var(--color-brand); line-height: 1;
	}

	.timetable-footnote-list					{	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
													gap: clamp(1rem, 2vw, 2rem) clamp(2rem, 4vw, 3rem);
													margin: 0;

		@media screen and (max-width: 1100px)	{	grid-template-columns: 1fr; }
	}

	.timetable-footnote-item					{	display: grid;
													grid-template-columns: minmax(120px, 0.4fr) minmax(0, 1fr);
													gap: 0.75em 1.5em; align-items: baseline;

		dt										{	margin: 0;
													font-family: var(--font-display);
													font-size: clamp(0.95rem, 1.2vw, 1.05rem); font-weight: 700;
													letter-spacing: 0.02em; text-transform: uppercase;
													color: var(--color-paper);
		}

		dd										{	margin: 0;
													font-size: var(--fs-5); line-height: 1.55;
													color: var(--color-paper-mute);
		}

		@media screen and (max-width: 650px)	{	grid-template-columns: 1fr; gap: 0.35em; }
	}
}


/* ─── Home embed shim ────────────────────────────────────── */

.timetable--home								{	margin-top: 5em; }