/*
 * The schedule page (templates/pages/schedule.php + templates/components/schedule-week.php),
 * on tokens.css and components.css. The rows, tabs, label line and timezone line are the
 * shared components; this file lays out the page around them.
 *
 * Ported from Schedule-A2 (.wnav, .wbtn, .wlab, .ghost, .tabs-box, .acc, .note),
 * Schedule-MobileLive / Schedule-Mobile (.s-wnav, .s-stick, .s-date, .s-acc, .s-note) and
 * Obit-States (.skdr-obit-paused); BRIEF §10–§10o, §25b. Cut-outs stand on their rule as
 * the components draw them (§4g): nothing here offsets them.
 */

.skdr-sched {
	box-sizing: border-box;
	max-width: var(--skdr-container);
	margin: 0 auto;
	padding: var(--skdr-sp-32) var(--skdr-gutter) var(--skdr-sp-40);
	color: var(--skdr-gray);
	font-family: var(--skdr-font);
}

.skdr-sched *,
.skdr-sched *::before,
.skdr-sched *::after {
	box-sizing: border-box;
}

/* The theme sets its own fonts and button chrome on bare elements; the boards are Poppins only (§1) */
.skdr-sched :is(h1, h2, h3, p, a, button, summary, li, span, time) {
	font-family: var(--skdr-font);
}

.skdr-sched button {
	transition: none;
}

.skdr-sched [hidden] {
	display: none !important;
}

/* The week-change announcement ("Week of 19 October") is for screen readers only */
.skdr-sched__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Loading the next week in place: a light fade, nothing moves */
.skdr-sched__week[aria-busy="true"] .skdr-sched__stick,
.skdr-sched__week[aria-busy="true"] .skdr-sched__day {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.skdr-sched__week[aria-busy="true"] {
	cursor: progress;
}

/* ---------------------------------------------------------------- head: page head + timezone line */

.skdr-sched__tz {
	margin-top: var(--skdr-sp-8);
}

/* The clock line the timezone script fills (Schedule-A2 .sub--tz, §7g revised) */
.skdr-sched__clock {
	margin: 2px 0 0;
	color: var(--skdr-gray);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
}

/* ---------------------------------------------------------------- week nav (Schedule-A2 .wnav) */

.skdr-wnav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--skdr-sp-16);
	min-height: 56px;
	margin-top: var(--skdr-sp-24);
	padding: 6px 0;
	border-bottom: 1px solid var(--skdr-line);
}

.skdr-wnav__l {
	display: flex;
	align-items: center;
	gap: var(--skdr-sp-12);
}

/*
 * The arrows and Today are links: the theme colours every a, a:visited and a:hover
 * (0,1,1), so their colours are set inside .skdr-wnav (0,2,0 and up).
 */
.skdr-wnav .skdr-wbtn {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--skdr-white);
	box-shadow: var(--skdr-shadow-ring);
	color: var(--skdr-ink);
	text-decoration: none;
}

.skdr-wnav .skdr-wbtn:hover {
	background: var(--skdr-fill);
	color: var(--skdr-ink);
}

/* At the window's edges the arrow is left out; the empty slot keeps the label centred (§10o) */
.skdr-wbtn--none {
	visibility: hidden;
}

.skdr-wnav__lab {
	min-width: 230px;
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-body);
	line-height: 24px;
	font-weight: var(--skdr-fw-semibold);
	text-align: center;
}

.skdr-wnav .skdr-today {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 var(--skdr-sp-16);
	border: 2px solid var(--skdr-ink);
	border-radius: var(--skdr-r-pill);
	background: var(--skdr-white);
	color: var(--skdr-ink);
	font: var(--skdr-fw-semibold) 14px/1 var(--skdr-font);
	text-decoration: none;
	white-space: nowrap;
}

/* 44px tap target around the 36px pill */
.skdr-today::after {
	content: "";
	position: absolute;
	inset: -6px 0;
}

.skdr-wnav .skdr-today:hover {
	background: var(--skdr-fill);
	color: var(--skdr-ink);
}

:is(.skdr-wbtn, .skdr-today, .skdr-sched__acc, .skdr-wnav__lab):focus-visible {
	outline: var(--skdr-focus-outline);
	outline-offset: var(--skdr-focus-offset);
	box-shadow: var(--skdr-focus-shadow);
}

/* ---------------------------------------------------------------- day tabs + date bar (§10d, §10j) */

.skdr-sched__stick {
	margin-top: var(--skdr-sp-24);
}

/* Desktop reads the date from the selected tab; the heading is for screen readers (Schedule-A2 h2.sr) */
.skdr-sched__date {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
	color: var(--skdr-ink);
}

.skdr-sched__today {
	color: var(--skdr-red);
}

/* ---------------------------------------------------------------- Earlier today (Schedule-A2 .acc) */

.skdr-sched__earlier {
	margin: 0;
}

.skdr-sched__acc {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 48px;
	padding: 0 var(--skdr-sp-16);
	background: var(--skdr-fill);
	color: var(--skdr-ink);
	font: var(--skdr-fw-semibold) 14px/1 var(--skdr-font);
	list-style: none;
	cursor: pointer;
}

.skdr-sched__acc::-webkit-details-marker {
	display: none;
}

.skdr-sched__acc::marker {
	content: "";
}

.skdr-sched__acc:hover {
	background: var(--skdr-line);
}

.skdr-sched__acc svg {
	flex: none;
	margin-left: auto;
	transition: transform 0.2s ease;
}

.skdr-sched__earlier[open] > .skdr-sched__acc svg {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------- notes and messages */

.skdr-sched__note {
	margin: var(--skdr-sp-16) 0 var(--skdr-sp-12);
	color: var(--skdr-gray);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
}

.skdr-sched__msg {
	margin: var(--skdr-sp-24) 0 0;
	color: var(--skdr-gray);
	font-size: var(--skdr-fs-body);
	line-height: var(--skdr-lh-body);
}

/* OBIT: the calm "schedule is paused" note (Obit-States .skdr-obit-paused, §25b) */
.skdr-sched__paused {
	display: flex;
	align-items: flex-start;
	gap: var(--skdr-sp-12);
	margin-top: var(--skdr-sp-24);
	padding: 20px var(--skdr-sp-24);
	border: 1px solid var(--skdr-line);
	border-radius: var(--skdr-r-card);
	background: var(--skdr-white);
	color: var(--skdr-gray);
}

.skdr-sched__paused svg {
	flex: none;
	margin-top: 3px;
}

.skdr-sched__paused p {
	margin: 0;
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-body);
	line-height: var(--skdr-lh-body);
}

@media (prefers-reduced-motion: reduce) {
	.skdr-sched__acc svg,
	.skdr-sched__week[aria-busy="true"] .skdr-sched__stick,
	.skdr-sched__week[aria-busy="true"] .skdr-sched__day {
		transition: none;
	}
}

/* ---------------------------------------------------------------- phones (Schedule-Mobile, Schedule-MobileLive, §10f, §10h, §10j) */

@media (max-width: 760px) {
	/* Full-bleed whatever the theme's container: rows and bars run edge to edge, text keeps 16px */
	.skdr-sched {
		max-width: none;
		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
		padding: var(--skdr-sp-8) 0 var(--skdr-sp-24);
	}

	.skdr-sched__head {
		padding: 0 var(--skdr-gutter-phone);
	}

	.skdr-sched__tz {
		margin-top: var(--skdr-sp-4);
		font-size: var(--skdr-fs-caption);
	}

	.skdr-sched__tz .skdr-coming-tz__b {
		font-size: var(--skdr-fs-caption);
	}

	.skdr-sched__clock {
		margin-top: 0;
		font-size: var(--skdr-fs-caption);
		line-height: var(--skdr-lh-caption);
	}

	.skdr-wnav {
		flex-wrap: nowrap;
		gap: 6px;
		min-height: 44px;
		margin-top: 6px;
		padding: 0 var(--skdr-gutter-phone);
		border-bottom: 0;
	}

	.skdr-wnav__l {
		flex: 1;
		min-width: 0;
		gap: 6px;
	}

	.skdr-wnav .skdr-wbtn {
		width: 36px;
		height: 36px;
	}

	/* 44px tap target around the 36px arrows */
	.skdr-wbtn::after {
		content: "";
		position: absolute;
		inset: -4px;
	}

	.skdr-wnav__lab {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		font-size: var(--skdr-fs-small);
		line-height: 20px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.skdr-wnav .skdr-today {
		flex: none;
		height: 32px;
		padding: 0 var(--skdr-sp-12);
		font-size: var(--skdr-fs-caption);
	}

	/* Tabs + red bar + date bar: one sticky block while the list scrolls (§10j) */
	.skdr-sched__stick {
		position: sticky;
		top: 0;
		z-index: 3;
		margin-top: 0;
		padding-top: 6px;
		background: var(--skdr-page);
	}

	.skdr-sched__tabs .skdr-tabs {
		width: max-content;
		min-width: 100%;
		padding: 0 var(--skdr-gutter-phone);
	}

	.skdr-sched__tabs .skdr-dtab {
		flex: none;
		width: 64px;
		min-width: 64px;
		scroll-snap-align: center;
	}

	.skdr-sched__date {
		position: static;
		display: flex;
		align-items: center;
		width: auto;
		height: 40px;
		margin: 0;
		padding: 0 var(--skdr-gutter-phone);
		overflow: visible;
		clip: auto;
		border-bottom: 1px solid var(--skdr-line);
		background: var(--skdr-white);
		color: var(--skdr-ink);
		font-size: 15px;
		line-height: 22px;
		font-weight: var(--skdr-fw-bold);
	}

	.skdr-sched__today {
		color: var(--skdr-red);
		white-space: pre;
	}

	.skdr-sched__acc {
		height: 44px;
	}

	.skdr-sched__note {
		margin: 0;
		padding: var(--skdr-sp-12) var(--skdr-gutter-phone) var(--skdr-sp-8);
		font-size: var(--skdr-fs-caption);
		line-height: var(--skdr-lh-caption);
	}

	.skdr-sched__msg {
		padding: 0 var(--skdr-gutter-phone);
	}

	.skdr-sched__paused {
		margin: var(--skdr-sp-16);
		padding: var(--skdr-sp-16);
	}

	.skdr-sched__paused p {
		font-size: 15px;
		line-height: 24px;
	}
}

/* Logged-in phones wider than 600px keep WordPress's fixed admin bar above the sticky block */
@media (min-width: 601px) and (max-width: 760px) {
	.admin-bar .skdr-sched__stick {
		top: 46px;
	}
}