/**
 * Red Bank Porchfest Schedule — grid styles.
 *
 * Every color and the column count come from custom properties set inline on
 * `.rbps-schedule`, so a schedule can be restyled without touching this file.
 */

.rbps-schedule {
	--rbps-cols: 4;
	--rbps-border: #111;
	--rbps-head: #f4f4f4;
	--rbps-text: #111;
	--rbps-accent: #0b5cab;
	--rbps-gap: 14px;
	--rbps-minw: 190px;

	/* The gap actually in play — the collapsed layout has none. */
	--rbps-gap-eff: 0px;

	/*
	 * One colour per start time. Held as raw RGB channels so the same value can
	 * be used at full strength for a marker and washed out for a background.
	 * Every one is dark enough to carry small text on its own tint.
	 */
	--rbps-t0: 37 99 235;
	--rbps-t1: 202 44 111;
	--rbps-t2: 4 120 87;
	--rbps-t3: 180 83 9;
	--rbps-t4: 109 40 217;
	--rbps-t5: 14 116 144;
	--rbps-t6: 190 30 45;
	--rbps-t7: 77 124 15;
	--rbps-t8: 155 42 165;
	--rbps-t9: 71 85 105;

	/* Falls back to the body text colour when time colouring is switched off. */
	--rbps-slot: var(--rbps-t9);

	box-sizing: border-box;
	color: var(--rbps-text);
	max-width: 100%;
	font-variant-numeric: tabular-nums;
}

.rbps-t0 { --rbps-slot: var(--rbps-t0); }
.rbps-t1 { --rbps-slot: var(--rbps-t1); }
.rbps-t2 { --rbps-slot: var(--rbps-t2); }
.rbps-t3 { --rbps-slot: var(--rbps-t3); }
.rbps-t4 { --rbps-slot: var(--rbps-t4); }
.rbps-t5 { --rbps-slot: var(--rbps-t5); }
.rbps-t6 { --rbps-slot: var(--rbps-t6); }
.rbps-t7 { --rbps-slot: var(--rbps-t7); }
.rbps-t8 { --rbps-slot: var(--rbps-t8); }
.rbps-t9 { --rbps-slot: var(--rbps-t9); }

.rbps-schedule *,
.rbps-schedule *::before,
.rbps-schedule *::after {
	box-sizing: inherit;
}

/* -------------------------------------------------- Title + intro */

.rbps-schedule__title {
	margin: 0 0 .5em;
	text-align: center;
	font-size: clamp(1.15rem, 2.4vw, 1.7rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.rbps-schedule__intro {
	margin: 0 auto 1em;
	max-width: 70ch;
	text-align: center;
}

.rbps-schedule__intro > *:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------- Grid */

/*
 * Columns are capped at `--rbps-cols` and floored at `--rbps-minw`: on a wide
 * screen you get exactly the requested count, and narrower viewports drop a
 * column at a time on their own — no media queries, so the inline
 * `--rbps-cols` never fights a breakpoint.
 */
.rbps-grid {
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			max(
				var(--rbps-minw),
				calc(
					(100% - (var(--rbps-cols) - 1) * var(--rbps-gap-eff)) / var(--rbps-cols) - 0.01px
				)
			),
			1fr
		)
	);
	align-items: stretch;
}

.rbps-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--rbps-border);
	page-break-inside: avoid;
	break-inside: avoid;
}

/* Collapsed: cards share a single hairline, spreadsheet style. */

.rbps-layout-collapsed .rbps-grid {
	gap: 0;
	border-top: 1px solid var(--rbps-border);
	border-left: 1px solid var(--rbps-border);
}

.rbps-layout-collapsed .rbps-card {
	border-width: 0 1px 1px 0;
}

/*
 * Subgrid keeps the header rule on the same line across a whole row, even
 * when one location carries a subtitle and its neighbours do not. Browsers
 * without subgrid simply get per-card heights, which still reads fine.
 */
@supports (grid-template-rows: subgrid) {
	.rbps-layout-collapsed .rbps-card {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
	}
}

/* Separated: individual cards with breathing room. */

.rbps-layout-spaced {
	--rbps-gap-eff: var(--rbps-gap);
}

.rbps-layout-spaced .rbps-grid {
	gap: var(--rbps-gap);
}

.rbps-layout-spaced .rbps-card {
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgb(0 0 0 / .06);
	transition: box-shadow .15s ease, transform .15s ease;
}

.rbps-layout-spaced .rbps-card:hover {
	box-shadow: 0 3px 10px rgb(0 0 0 / .1);
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.rbps-layout-spaced .rbps-card {
		transition: none;
	}

	.rbps-layout-spaced .rbps-card:hover {
		transform: none;
	}
}

/* -------------------------------------------------- Card head */

.rbps-card__head {
	display: flex;
	align-items: flex-start;
	gap: .5em;
	padding: .6em .7em;
	background: var(--rbps-head);
	border-bottom: 1px solid var(--rbps-border);
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* The number as a solid chip, so the eye lands on it first when someone is
   matching a porch against a printed map. */
.rbps-card__num {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: 1.75em;
	height: 1.75em;
	padding: 0 .35em;
	background: var(--rbps-text);
	color: #fff;
	border-radius: 5px;
	font-size: .8em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.rbps-card__id {
	min-width: 0;
}

.rbps-card__name {
	font-weight: 700;
	font-size: .95em;
	letter-spacing: .015em;
	text-transform: uppercase;
}

a.rbps-card__name {
	color: var(--rbps-accent);
	text-decoration: none;
}

a.rbps-card__name:hover,
a.rbps-card__name:focus {
	text-decoration: underline;
}

.rbps-card__address {
	display: block;
	margin-top: .15em;
	font-weight: 400;
	font-size: .85em;
	opacity: .8;
	text-transform: none;
}

/* -------------------------------------------------- Slots */

.rbps-card__slots {
	flex: 1 1 auto;
	margin: 0;
	padding: .55em .7em;
	list-style: none;
}

.rbps-slot {
	display: flex;
	align-items: baseline;
	gap: .5em;
	margin: 0 -.3em .15em;
	padding: .18em .3em;
	border-radius: 4px;
	line-height: 1.35;
	overflow-wrap: anywhere;
	transition: background-color .12s ease;
}

.rbps-slot:hover {
	background: rgb(var(--rbps-slot) / .07);
}

.rbps-slot:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.rbps-slot {
		transition: none;
	}
}

/*
 * The time is a tinted chip rather than plain text. Reading down a column you
 * follow one porch; reading across, the matching chips line up the acts that
 * start together — which is the thing a printed grid makes you hunt for.
 */
.rbps-slot__time {
	/* A shared minimum keeps the act names in a straight line down the card,
	   even though "3 PM" and "12:30 PM" are very different widths. */
	flex: 0 0 auto;
	min-width: 5.1em;
	padding: .1em .45em;
	background: rgb(var(--rbps-slot) / .13);
	color: rgb(var(--rbps-slot));
	border-radius: 3px;
	font-size: .88em;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
}

/* The dash only earned its place when the time was plain text. */
.rbps-slot__sep {
	display: none;
}

a.rbps-slot__performer {
	color: var(--rbps-accent);
	text-decoration: none;
}

a.rbps-slot__performer:hover,
a.rbps-slot__performer:focus {
	text-decoration: underline;
}

.rbps-card__note {
	margin: 0;
	padding: 0 .7em .6em;
	font-size: .85em;
	font-style: italic;
	opacity: .8;
}

/* -------------------------------------------------- View switcher */

/* A segmented control rather than a row of file tabs — it reads as one
   compact object and does not fight the grid's rectangles underneath. */
.rbps-tabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0 0 1.1em;
	padding: 3px;
	background: rgb(var(--rbps-t9) / .08);
	border-radius: 9px;
}

.rbps-tabs-wrap {
	display: flex;
	justify-content: center;
}

.rbps-tab {
	appearance: none;
	cursor: pointer;
	padding: .42em 1.05em;
	font: inherit;
	font-size: .9em;
	font-weight: 500;
	line-height: 1.4;
	color: rgb(var(--rbps-t9));
	background: transparent;
	border: 0;
	border-radius: 6px;
	transition: background .15s ease, color .15s ease;
}

.rbps-tab:hover {
	color: var(--rbps-text);
	background: rgb(255 255 255 / .6);
}

.rbps-tab:focus-visible {
	outline: 2px solid var(--rbps-accent);
	outline-offset: 1px;
}

.rbps-tab.is-active {
	font-weight: 600;
	color: var(--rbps-text);
	background: #fff;
	box-shadow: 0 1px 2px rgb(0 0 0 / .14);
}

@media (prefers-reduced-motion: reduce) {
	.rbps-tab {
		transition: none;
	}
}

/* Set while a PDF/JPEG capture is running — the tabs are UI, not content. */
.rbps-exporting .rbps-tabs {
	display: none !important;
}

/* Only surfaced when JavaScript is off and every panel shows at once. */
.rbps-panel__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------- Genre tag */

.rbps-genre {
	margin-left: .4em;
	font-size: .82em;
	opacity: .7;
}

.rbps-genre::before {
	content: "(";
}

.rbps-genre::after {
	content: ")";
}

.rbps-genre--also {
	font-style: italic;
}

/* -------------------------------------------------- List views (by time / by genre) */

.rbps-list {
	display: flex;
	flex-direction: column;
	gap: 1.4em;
}

.rbps-group {
	page-break-inside: avoid;
	break-inside: avoid;
}

.rbps-group__title {
	margin: 0 0 .45em;
	padding: 0 0 .3em;
	border-bottom: 2px solid rgb(var(--rbps-slot) / .35);
	font-size: 1.02em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .01em;
}

/*
 * The by-time view is a running order, so it is drawn as one: a rule down the
 * left with a dot at each start time, in that time's colour. Genre headings
 * stay plain — there is no sequence to imply.
 */
.rbps-view-time .rbps-group {
	position: relative;
	padding-left: 1.5em;
}

.rbps-view-time .rbps-group::before {
	content: "";
	position: absolute;
	top: .55em;
	bottom: -1.4em;
	left: .29em;
	width: 2px;
	background: rgb(var(--rbps-slot) / .22);
}

.rbps-view-time .rbps-group:last-child::before {
	bottom: auto;
	height: .6em;
}

.rbps-view-time .rbps-group::after {
	content: "";
	position: absolute;
	top: .3em;
	left: 0;
	width: .8em;
	height: .8em;
	background: rgb(var(--rbps-slot));
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgb(var(--rbps-slot) / .16);
}

.rbps-view-time .rbps-group__title {
	color: rgb(var(--rbps-slot));
	border-bottom-color: rgb(var(--rbps-slot) / .2);
}

/*
 * A table, so the em dash lines up down the whole group no matter how long the
 * act names are — the alignment is the point of these views.
 */
.rbps-group__table {
	width: auto;
	max-width: 100%;
	border: 0;
	border-collapse: collapse;
	table-layout: auto;
}

.rbps-group__table td {
	padding: 0 0 .15em;
	border: 0;
	line-height: 1.4;
	vertical-align: baseline;
	text-align: left;
}

.rbps-row__time {
	padding-right: .6em !important;
	white-space: nowrap;
}

.rbps-row__time span {
	display: inline-block;
	padding: .1em .45em;
	background: rgb(var(--rbps-slot) / .13);
	color: rgb(var(--rbps-slot));
	border-radius: 3px;
	font-size: .88em;
	font-weight: 600;
}

.rbps-row__sep {
	padding: 0 .5em !important;
	white-space: nowrap;
}

.rbps-row__venue {
	overflow-wrap: anywhere;
}

a.rbps-row__performer,
a.rbps-row__location {
	color: var(--rbps-accent);
	text-decoration: none;
}

a.rbps-row__performer:hover,
a.rbps-row__performer:focus,
a.rbps-row__location:hover,
a.rbps-row__location:focus {
	text-decoration: underline;
}

/*
 * In a narrow column the fixed chip width costs more than the alignment buys,
 * so let it shrink and give the act names the room instead.
 */
@media (max-width: 640px) {
	.rbps-slot__time {
		min-width: 0;
	}
}

/* Narrow screens: stop forcing three columns onto one line. */
@media (max-width: 480px) {
	.rbps-group__table,
	.rbps-group__table tbody,
	.rbps-group__table tr,
	.rbps-group__table td {
		display: block;
	}

	.rbps-row {
		margin-bottom: .5em;
	}

	.rbps-row__sep {
		display: none !important;
	}

	.rbps-row__venue {
		opacity: .8;
		font-size: .92em;
	}

	.rbps-row__time {
		font-weight: 600;
	}
}

/* -------------------------------------------------- Toolbar */

.rbps-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
}

.rbps-btn {
	appearance: none;
	cursor: pointer;
	padding: .45em .9em;
	font: inherit;
	font-size: .9em;
	line-height: 1.4;
	color: var(--rbps-text, #111);
	background: #fff;
	border: 1px solid currentColor;
	border-radius: 3px;
}

.rbps-btn:hover:not(:disabled),
.rbps-btn:focus-visible {
	background: #f2f2f2;
}

.rbps-btn:disabled {
	opacity: .55;
	cursor: default;
}

.rbps-toolbar__status {
	font-size: .85em;
	opacity: .8;
}

.rbps-notice {
	margin: 0;
	padding: .75em 1em;
	background: #fff8e5;
	border: 1px dashed #d6b656;
	font-size: .9em;
}

/* -------------------------------------------------- Print */

@media print {
	.no-print,
	.rbps-toolbar {
		display: none !important;
	}

	/* Paper is a known width — keep the requested column count exactly. */
	.rbps-grid {
		grid-template-columns: repeat(var(--rbps-cols), minmax(0, 1fr));
	}

	.rbps-schedule {
		font-size: 10pt;
	}

	.rbps-card {
		background: #fff !important;
	}

	/*
	 * Keep the time colours on paper — they are what makes the printed grid
	 * scannable, and they are the whole reason for the chips.
	 */
	.rbps-card__head,
	.rbps-slot__time,
	.rbps-row__time span,
	.rbps-group__title {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.rbps-layout-spaced .rbps-card {
		box-shadow: none;
	}
}