/* Schools ( inc/school-public.php, inc/school-dashboard.php ): a school's public page, its join and invitation pages, and the School section of the guide
   dashboard. MEETR tokens with their values as fallbacks, so it reads right on a page that did not load them. px, not rem: this theme's rem is 10px.
   Text is at least 12px; body copy 16px. Buttons are .meetr-btn ( meetr-buttons.css ); cards inside the dashboard are the shell's .mch-card. */

.msc {
	--msc-ink: var(--meetr-summit, #0C1A24);
	--msc-muted: var(--meetr-text-muted, #4A5A66);
	--msc-line: var(--meetr-line, #D5DEE4);
	--msc-mist: var(--meetr-mist, #EAF1F5);
	--msc-blue: var(--meetr-alpine-deep, #2260C3);
	color: var(--msc-ink);
	font-family: var(--meetr-font-body, "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif);
	font-size: 16px;
	line-height: 1.5;
}

/* ---- Public page and link pages ------------------------------------------------- */
.msc--public,
.msc--link {
	max-width: 1120px;
	margin: 0 auto;
	padding: 32px 16px 56px;
	box-sizing: border-box;
}
.msc--link { max-width: 640px; padding-top: 104px; } /* the site header is laid over the top of the page: start below it */

.msc-hero {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--msc-line);
	margin-bottom: 28px;
}
.msc-eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--msc-muted);
}
.msc-title {
	margin: 0 0 8px;
	font-size: 34px;
	line-height: 1.15;
	font-weight: 700;
	color: var(--msc-ink);
}
.msc-mark { margin: 0 0 8px; }
.msc-meta { margin: 0 0 16px; font-size: 16px; color: var(--msc-muted); }
.msc-h2 { margin: 0 0 16px; font-size: 24px; line-height: 1.2; color: var(--msc-ink); }
.msc-empty { margin: 0; padding: 16px 0; color: var(--msc-muted); }
.msc-lede { margin: 12px 0 16px; font-size: 18px; }

.msc-share,
.msc-copy__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
}
.msc-url,
.msc-input {
	flex: 1 1 240px;
	min-width: 0;
	min-height: 44px;
	padding: 8px 12px;
	box-sizing: border-box;
	border: 1px solid var(--msc-line);
	border-radius: 8px;
	background: #FFFFFF;
	color: var(--msc-ink);
	font: inherit;
	font-size: 16px;
}
.msc-copied { align-self: center; font-size: 14px; font-weight: 600; color: #1E6B3A; }
.msc-copied[hidden] { display: none; }

.msc-grid { margin-top: 4px; }

.msc-card {
	max-width: 640px;
	margin: 0 auto;
	padding: 24px;
	border: 1px solid var(--msc-line);
	border-radius: 12px;
	background: #FFFFFF;
}
.msc-form { margin: 16px 0 0; }
.msc-pick { margin: 0; padding: 0; border: 0; }
.msc-pick__row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	min-height: 44px;
	padding: 10px 12px;
	margin: 0 0 8px;
	border: 1px solid var(--msc-line);
	border-radius: 8px;
	cursor: pointer;
}
.msc-pick__row.is-off { opacity: 0.65; cursor: default; }
.msc-pick__row em { font-size: 14px; color: var(--msc-muted); }
.msc-note { margin: 12px 0; font-size: 14px; line-height: 1.5; color: var(--msc-muted); }
.msc-note--strong { font-size: 16px; color: var(--msc-ink); }
.msc-note--warn { padding: 10px 12px; border-radius: 8px; background: #FFF4D6; color: #5A4300; }

.msc-notice {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 16px;
}
.msc-notice--ok { background: #E3F4E8; color: #14502A; }
.msc-notice--error { background: #FBE7E4; color: #7A1D12; }

/* ---- The dashboard section ---------------------------------------------------------- */
.msc--dash { display: block; }
.msc--dash .msc-card { max-width: none; margin: 0 0 16px; }
.msc--dash .mch-h2 { margin-top: 0; }
.msc-label { display: block; margin: 12px 0 6px; font-size: 14px; font-weight: 600; }
.msc-season { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.msc-season .msc-label { flex: 0 0 100%; margin: 0; }
.msc-inline { display: inline-block; margin: 0; }
.msc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.msc-fresh { border-color: var(--msc-blue); }
.msc-more { margin-top: 16px; }
.msc-more summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

.msc-switch ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.msc-switch a { display: inline-block; padding: 8px 14px; border: 1px solid var(--msc-line); border-radius: 999px; color: var(--msc-ink); text-decoration: none; font-size: 14px; }
.msc-switch a[aria-current="page"] { background: var(--msc-blue); border-color: var(--msc-blue); color: #FFFFFF; }

.msc-roster { margin: 0; padding: 0; list-style: none; }
.msc-roster__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-top: 1px solid var(--msc-line);
}
.msc-roster__row:first-child { border-top: 0; }
.msc-roster__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.msc-roster__who > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msc-roster__who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.msc-roster__acts { display: flex; flex-wrap: wrap; gap: 8px; }

.msc-pill {
	display: inline-block;
	align-self: flex-start;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--msc-mist);
	color: var(--msc-ink);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
}
.msc-pill--active,
.msc-pill--confirmed { background: #E3F4E8; color: #14502A; }
.msc-pill--review,
.msc-pill--pending,
.msc-pill--reschedule_proposed { background: #FFF4D6; color: #5A4300; }
.msc-pill--removed,
.msc-pill--left { background: #EEEEEE; color: #444444; }
.msc-pill--paid { background: #E4ECFB; color: #1B3F85; }

.msc-reqs { margin: 0; padding: 0; list-style: none; }
.msc-req { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--msc-line); }
.msc-req:first-child { border-top: 0; }
.msc-req__main span { margin-left: 6px; color: var(--msc-muted); }
.msc-req__meta { font-size: 14px; color: var(--msc-muted); }
.msc-req__side { display: flex; flex-wrap: wrap; gap: 6px; }

@media (min-width: 720px) {
	.msc-title { font-size: 44px; }
	.msc-req { grid-template-columns: 1.2fr 1.4fr auto; align-items: center; gap: 12px; }
}

/* ---- Inside the guide shell: say fonts and colours again, over ListingPro's rules ( the Client Book's way ) -------------------- */
.mch .msc {
	--msc-ink: var(--c-ink, #16222B);
	--msc-muted: var(--c-muted, #5B6773);
	--msc-line: var(--c-line, #D5DEE4);
	--msc-blue: var(--c-blue-dark, #2260C3);
	color: var(--c-ink, #16222B);
	font-size: 16px;
	line-height: 1.55;
}
.mch .msc :where(span, p, a, li, div, label, input, select, textarea, button, small, strong, em, summary, legend) { font-family: var(--c-sans, "Hanken Grotesk", system-ui, sans-serif); }
.mch .msc :where(p, span, li, label, em, small, strong, summary, legend) { color: inherit; }
.mch .msc a { color: var(--c-blue-dark, #2260C3); }
.mch .msc h2, .mch .msc h3 { color: var(--c-ink, #16222B); }
.mch .msc .mch-h3 { color: var(--c-muted, #5B6773); }
.mch .msc .msc-note { color: var(--c-muted, #5B6773); }
.mch .msc .msc-note--strong { color: var(--c-ink, #16222B); }
.mch .msc .msc-pill--active, .mch .msc .msc-pill--confirmed { color: #14502A; }
.mch .msc .msc-notice--ok { color: #14502A; }
.mch .msc .msc-notice--error { color: #7A1D12; }
.mch .msc .msc-label { font-weight: 600; color: var(--c-ink, #16222B); }
.mch .msc .mch-h3 { margin: 20px 0 8px; }

/* Tap targets: every button in a school page or section is at least 44 px tall ( meetr-buttons.css makes .meetr-btn 31 px; this is the one place that needs more ). */
html body .msc .meetr-btn,
html body .msc button.meetr-btn {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding-top: 8px;
	padding-bottom: 8px;
}

/* ---- "Our Instructors" on a school's listing page ( inc/school-instructors.php ) ----------------------------------
   The page is ListingPro's, so every rule is anchored with `html body` and sets its own font, size and colour: nothing here relies on what the
   listing template or its stylesheet would have inherited. Photos have a fixed shape ( 4 by 5 ) so nothing moves as lazy images arrive. */
html body .msi {
	clear: both;
	margin: 32px 0;
	padding: 0;
	font-family: var(--meetr-font-body, "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif);
	font-size: 16px;
	line-height: 1.5;
	color: #0C1A24;
}
html body .msi .msi-h {
	margin: 0 0 16px;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	color: #0C1A24;
}
html body .msi .msi-count {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	background: #EAF1F5;
	font-size: 14px;
	font-weight: 600;
	color: #4A5A66;
	vertical-align: middle;
}
html body .msi .msi-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) {
	html body .msi .msi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
	html body .msi .msi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
html body .msi .msi-tile { margin: 0; padding: 0; list-style: none; }
html body .msi .msi-tile__link {
	display: block;
	text-decoration: none;
	color: #0C1A24;
	border: 1px solid #D5DEE4;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	height: 100%;
}
html body .msi .msi-tile__link:hover,
html body .msi .msi-tile__link:focus-visible { border-color: #2260C3; }
html body .msi .msi-tile__link:focus-visible { outline: 3px solid #2260C3; outline-offset: 2px; }
html body .msi .msi-tile__photo {
	display: block;
	aspect-ratio: 4 / 5;
	background: #EAF1F5;
	overflow: hidden;
}
html body .msi .msi-tile__img,
html body .msi .msi-tile__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
html body .msi .msi-tile__name {
	display: block;
	padding: 10px 12px 0;
	font-size: 16px;
	line-height: 1.3;
	font-weight: 700;
	color: #0C1A24;
}
html body .msi .msi-tile__spec {
	display: block;
	padding: 2px 12px 12px;
	font-size: 14px;
	line-height: 1.4;
	color: #4A5A66;
}
html body .msi .msi-more { margin: 20px 0 0; text-align: center; }
html body .msi .msi-more .meetr-btn { min-height: 44px; }

/* the line under a member's name */
html body .msi-with {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.4;
	font-style: normal;
	font-weight: 500;
	color: #4A5A66;
}
html body .msi-with .msi-with__link {
	color: #2260C3;
	font-weight: 700;
	font-style: normal;
	text-decoration: underline;
}

/* the dashboard's central booking card and the messages list */
.msc-emails { width: 100%; max-width: 560px; min-height: 88px; padding: 10px 12px; box-sizing: border-box; border: 1px solid var(--msc-line); border-radius: 8px; font: inherit; }
.msc-msgs { list-style: none; margin: 0; padding: 0; }
.msc-msg { padding: 12px 0; border-top: 1px solid var(--msc-line); }
.msc-msg:first-child { border-top: 0; }
.msc-msg__who { font-weight: 700; }
.msc-msg__text { margin: 4px 0 0; color: var(--msc-ink); overflow-wrap: anywhere; }
.msc-msg__meta { margin: 4px 0 0; font-size: 14px; color: var(--msc-muted); }
.msc-stub { padding: 12px 0; border-top: 1px solid var(--msc-line); }
.msc-stub:first-of-type { border-top: 0; }

/* The instructor link's QR code: the review QR card's own look, without its box, inside the Invite card */
.msc-qr.meetr-qr-card { border: 0; box-shadow: none; padding: 12px 0 0; margin: 0; background: transparent; }
.msc-qr .meetr-qr-card__actions { margin-top: 8px; }
.msc-note--warn { margin-top: 8px; }