/* ──────────────────────────────────────────────────────────────────────────
   BNB Member Portal — design system (ported verbatim from the approved mockup
   bnb-portal-export). Tokens + every component class. The SvelteKit shell and
   routes use these class names directly so the rendered portal matches the
   mockup's layout / HTML / CSS exactly. Tab-switching SPA bits from the mockup
   are replaced by SvelteKit routing; everything visual is preserved 1:1.
   ────────────────────────────────────────────────────────────────────────── */

:root {
	--teal: #2aa8b0;
	--teal-deep: #1e7f85;
	--teal-soft: #e6f4f5;
	--teal-xsoft: #f0f9fa;
	--orange: #f58220;
	--orange-deep: #d96c10;
	--orange-soft: #fdecd8;
	--gold: #c9973a;
	--gold-soft: #fbf3e4;
	--gold-light: #e8b96a;
	--navy: #004f59;
	--navy-soft: rgba(255, 255, 255, 0.08);
	--navy-border: rgba(255, 255, 255, 0.09);
	--charcoal: #1c2b2c;
	--ink: #2d3f40;
	--warm-white: #fdfaf7;
	--off-white: #f9f7f3;
	--panel-side: #faf8f4;
	--text-muted: #6b7f80;
	--border: rgba(30, 127, 133, 0.13);
	--border-soft: rgba(30, 127, 133, 0.07);
	--gray: #9a9691;
	--gray-soft: #efeee9;
	--gray-border: #e2ded9;
	--serif: 'Cormorant Garamond', Georgia, serif;
	--sans: 'DM Sans', system-ui, sans-serif;
	--label: 'Poppins', sans-serif;
	--sidebar-w: 236px;
	--nav-h: 64px;
	--panel-w: 320px;
	--shadow-sm: 0 1px 2px rgba(19, 32, 56, 0.04);
	--shadow-md: 0 10px 34px rgba(19, 32, 56, 0.06);
}

/* Global reset for the mockup's own markup. Clerk components (`.cl-rootBox` and
   everything inside — <UserProfile />, <SignIn />) are CARVED OUT: the blanket
   `margin:0; padding:0` was cascading into Clerk's internals and stripping every
   default spacing (headers collided, panels had no inner padding). The exclusion
   is wrapped in `:where()` so it contributes ZERO specificity — the selector
   stays at (0,1,0), identical to the original, so none of the mockup's own
   padding rules (`.profile-tab`, `.pfield`, …) shift. Do NOT hoist the exclusion
   out of `:where()` — a bare `:not(.cl-rootBox *)` raises specificity to (0,2,0)
   and the reset would start overriding every component's own padding. */
.portal-shell *:not(:where(.cl-rootBox, .cl-rootBox *)),
.portal-shell *:not(:where(.cl-rootBox, .cl-rootBox *))::before,
.portal-shell *:not(:where(.cl-rootBox, .cl-rootBox *))::after,
.login-screen *:not(:where(.cl-rootBox, .cl-rootBox *)),
.login-screen *:not(:where(.cl-rootBox, .cl-rootBox *))::before,
.login-screen *:not(:where(.cl-rootBox, .cl-rootBox *))::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ═══ LOGIN ═══ */
.login-screen {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100vh;
	font-family: var(--sans);
	background: var(--off-white);
	color: var(--charcoal);
	font-size: 0.9375rem;
}
.login-left {
	width: 52%;
	background: var(--charcoal);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 3.25rem 3.75rem;
}
.login-left-img {
	position: absolute;
	inset: 0;
	background-image: url('https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=900&q=80');
	background-size: cover;
	background-position: center;
	opacity: 0.2;
}
.login-left-grad {
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(42, 168, 176, 0.2) 0%, rgba(26, 40, 41, 0.9) 65%);
}
.login-brand {
	position: relative;
	z-index: 2;
}
.login-logo {
	font-family: var(--serif);
	font-size: 1.625rem;
	font-weight: 600;
	color: var(--warm-white);
	letter-spacing: 0.02em;
	margin-bottom: 0.625rem;
	display: block;
}
.login-logo span {
	color: var(--teal);
}
.login-tagline {
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(230, 244, 245, 0.4);
}
.login-hero-text {
	position: relative;
	z-index: 2;
}
.login-hero-text h2 {
	font-family: var(--serif);
	font-size: clamp(2.5rem, 3.8vw, 3.875rem);
	font-weight: 300;
	line-height: 1.08;
	color: var(--warm-white);
	margin-bottom: 1.25rem;
}
.login-hero-text h2 em {
	color: var(--teal);
	font-style: italic;
}
.login-hero-text p {
	font-size: 0.875rem;
	color: rgba(230, 244, 245, 0.45);
	line-height: 1.8;
	max-width: 340px;
}
.login-right {
	width: 48%;
	background: var(--warm-white);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3.75rem 3.5rem;
}
.login-form-wrap {
	width: 100%;
	max-width: 380px;
}
.login-form-wrap h3 {
	font-family: var(--serif);
	font-size: 2.125rem;
	font-weight: 400;
	color: var(--charcoal);
	margin-bottom: 0.375rem;
}
.login-form-wrap > p {
	font-size: 0.875rem;
	color: var(--text-muted);
	margin-bottom: 2.25rem;
}
.form-group {
	margin-bottom: 1.25rem;
}
.form-group label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.4375rem;
}
.form-group input {
	width: 100%;
	padding: 0.8125rem 1.0625rem;
	border: 1px solid var(--border);
	border-radius: 0.3125rem;
	font-family: var(--sans);
	font-size: 0.9375rem;
	color: var(--charcoal);
	background: white;
	outline: none;
	transition: border-color 0.2s;
}
.form-group input:focus {
	border-color: var(--teal);
}
.btn-primary {
	width: 100%;
	padding: 0.875rem;
	background: var(--teal-deep);
	color: white;
	border: none;
	border-radius: 0.3125rem;
	font-family: var(--sans);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.2s;
}
.btn-primary:hover {
	background: var(--teal);
}
.login-footer {
	margin-top: 1.625rem;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--text-muted);
}
.login-footer a {
	color: var(--teal-deep);
	text-decoration: none;
}

/* ═══ PORTAL SHELL ═══ */
.portal-shell {
	font-family: var(--sans);
	background: var(--off-white);
	color: var(--charcoal);
	font-size: 0.9375rem;
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.portal-nav {
	height: var(--nav-h);
	background: rgba(253, 250, 247, 0.97);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	padding: 0 1.75rem;
	gap: 1.25rem;
	flex-shrink: 0;
	z-index: 200;
}
.nav-logo {
	display: flex;
	align-items: center;
	margin-right: auto;
	text-decoration: none;
}
/* The logo is a wide wordmark (699x142). In the flex nav its box gets compressed
   on narrow viewports while `height` holds, which stretches the artwork.
   `object-fit: contain` keeps the 699:142 ratio no matter how the box is sized —
   it scales down and stays proportional instead of squashing. */
.nav-logo img {
	height: 2.25rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
}
.nav-right {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.nav-communities-btn {
	font-family: var(--label);
	font-size: 0.78125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: white;
	background: var(--orange);
	border: 1.5px solid var(--orange);
	padding: 0.5rem 1.25rem;
	border-radius: 100px;
	cursor: pointer;
	transition: background 0.2s;
	white-space: nowrap;
	text-decoration: none;
}
.nav-communities-btn:hover {
	background: var(--orange-deep);
	border-color: var(--orange-deep);
}
/* Sidebar copy of My Communities — hidden above 767px (the top bar's copy is
   shown instead); see the swap in the media query below. */
.sidebar-communities-btn {
	display: none;
}
@media (max-width: 767px) {
	.portal-nav .nav-communities-btn {
		display: none;
	}
	.sidebar-communities-btn {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-top: 0.25rem;
	}
}
.nav-name {
	font-family: var(--label);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--charcoal);
	white-space: nowrap;
}
.nav-icon-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--teal-xsoft);
	border: none;
	cursor: pointer;
	color: var(--teal-deep);
	flex-shrink: 0;
}
.nav-icon-btn svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.nav-hamburger {
	display: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	background: var(--teal-xsoft);
	border: none;
	cursor: pointer;
	color: var(--teal-deep);
	flex-shrink: 0;
}
.nav-hamburger svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}
.sidebar-backdrop {
	display: none;
}
.nav-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--teal), var(--teal-deep));
	border: 1.5px solid var(--teal);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8125rem;
	font-weight: 600;
	color: white;
	cursor: pointer;
	text-decoration: none;
	overflow: hidden; /* clips .avatar-photo to the circle */
}
/* The member's Clerk photo, rendered by $lib/components/MemberAvatar.svelte into
   whichever avatar wrapper is asking (top nav, dashboard greeting, profile
   card). One rule rather than three: the wrappers set their own size and the
   photo just fills whatever it lands in. `cover` because Clerk serves the
   uploaded aspect ratio unchanged — stretching would distort a portrait. Each
   wrapper needs `overflow: hidden` to clip it, and keeps its teal gradient as
   the placeholder showing through while the image loads. */
.avatar-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.portal-body {
	display: flex;
	flex: 1;
	overflow: hidden;
}
/* The routed shell's <main> — consolidated from webflow.css + custom.css
   (both retired); this is their combined computed result unchanged. */
.maincontent {
	gap: 0.5rem;
	background-color: #f4f0eb;
	flex-flow: column;
	width: 100%;
	height: 100%;
	padding: 2rem;
	display: flex;
	overflow-y: auto;
}
/* `.maincontent` is a height-constrained flex column, so its direct children are
   flex items that default to `flex-shrink: 1`. Any child whose `overflow` isn't
   `visible` also has its automatic min-height reset to 0 — so flexbox is free to
   squash it below its content height. The child then clips its own content, the
   column never exceeds its own height, and `overflow-y: auto` never produces a
   scrollbar: the page reads as if it were `overflow: hidden`. Pinning every page
   root to its content height is what makes this column actually scroll.
   A child that should instead fill the leftover height opts out with its own
   `flex` (see `.player-fullbleed`), declared later in this file so it wins. */
.maincontent > * {
	flex-shrink: 0;
}

/* ═══ SIDEBAR ═══ */
.sidebar {
	width: var(--sidebar-w);
	background: var(--navy);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}
.sidebar-top {
	flex: 1;
	padding: 1.375rem 0.875rem;
	overflow-y: auto;
}
.sidebar-bottom {
	padding: 0 0.875rem 0.875rem;
}
.sidebar-section-label {
	font-family: var(--label);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	padding: 1.125rem 0.5rem 0.4375rem;
}
.sidebar-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6875rem 1rem;
	margin-bottom: 0.125rem;
	border-radius: 0.625rem;
	font-family: var(--label);
	font-size: 0.84375rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.62);
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s;
	text-decoration: none;
}
.sidebar-link:hover {
	background: var(--navy-soft);
	color: white;
}
.sidebar-link.active {
	background: rgba(42, 168, 176, 0.28);
	color: white;
	font-weight: 500;
}
.sidebar-link svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
	opacity: 1;
}
.sidebar-badge {
	margin-left: auto;
	font-size: 0.625rem;
	font-weight: 700;
	padding: 0.125rem 0.5rem;
	border-radius: 0.625rem;
	background: var(--orange-soft);
	color: var(--orange-deep);
}
.sidebar-badge.live {
	background: var(--orange);
	color: white;
}
.sidebar-divider {
	height: 1px;
	background: var(--navy-border);
	margin: 0.75rem 0.75rem 0.875rem;
}
.sidebar-bottom-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6875rem 1rem;
	border-radius: 0.625rem;
	font-family: var(--label);
	font-size: 0.8125rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s;
	text-decoration: none;
	background: none;
	border: none;
	width: 100%;
	text-align: left;
}
.sidebar-bottom-link:hover {
	color: white;
	background: var(--navy-soft);
}
.sidebar-bottom-link.active {
	background: var(--navy-soft);
	color: white;
}
.sidebar-bottom-link svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

/* Member-card widget — visual placeholder only (ADR-0170 remix). No
   membership tier / session-count gs_net field exists yet, so this renders
   generic, non-numeric copy rather than fabricated stats (see AGENTS.md
   § "Do not embed business policy" — the same "no faked data" rule applies to
   any member-facing number, not just filters). Swap in real fields once a
   backend source lands; don't let this become the data model. */
.member-card {
	background: linear-gradient(135deg, var(--teal), var(--teal-deep));
	border-radius: 0.625rem;
	padding: 0.9375rem;
	color: white;
	box-shadow: var(--shadow-md);
	margin-bottom: 0.625rem;
}
.member-card-label {
	font-family: var(--label);
	font-size: 0.59375rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(230, 244, 245, 0.6);
	margin-bottom: 0.1875rem;
}
.member-card-tier {
	font-family: var(--serif);
	font-size: 1.1875rem;
	font-weight: 400;
	color: white;
}
.member-card-note {
	font-family: var(--label);
	font-size: 0.625rem;
	color: rgba(230, 244, 245, 0.5);
	margin-top: 0.1875rem;
}
.member-card-sessions {
	margin-top: 0.6875rem;
	padding-top: 0.6875rem;
	border-top: 1px solid rgba(230, 244, 245, 0.2);
	display: flex;
	justify-content: space-between;
}
.member-stat-val {
	font-family: var(--label);
	font-weight: 700;
	font-size: 1.1875rem;
	color: white;
	line-height: 1;
}
.member-stat-lbl {
	font-size: 0.59375rem;
	color: rgba(230, 244, 245, 0.55);
	margin-top: 0.125rem;
	font-family: var(--label);
}

/* Below 992px the sidebar folds into an off-canvas panel toggled by
   .nav-hamburger (hidden above this breakpoint, see above). */
@media (max-width: 991px) {
	.nav-hamburger {
		display: flex;
	}
	.sidebar {
		position: fixed;
		top: var(--nav-h);
		bottom: 0;
		left: 0;
		z-index: 250;
		transform: translateX(-100%);
		transition: transform 0.25s ease;
		box-shadow: 0.5rem 0 1.5rem rgba(26, 40, 41, 0.12);
	}
	.sidebar.open {
		transform: translateX(0);
	}
	.sidebar-backdrop.open {
		display: block;
		position: fixed;
		inset: var(--nav-h) 0 0 0;
		background: rgba(26, 40, 41, 0.4);
		border: none;
		padding: 0;
		cursor: default;
		z-index: 240;
	}
}

/* ═══ MAIN ═══ */
.main-content {
	flex: 1;
	overflow-y: auto;
	background: var(--off-white);
}
/* Typography ported from the design mockup v10 (h1.page-title) — bold
   Poppins instead of the retired webflow.css serif treatment. */
.page-title {
	font-family: var(--label);
	font-weight: 700;
	font-size: clamp(1.375rem, 2vw, 1.875rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--charcoal);
	margin-bottom: 1.3125rem;
}
.page-subtitle {
	font-size: 0.875rem;
	color: var(--text-muted);
	margin-bottom: 1.875rem;
}
/* PageTitle.svelte's sub-title label + italic accent — consolidated from
   webflow.css (retired). --teal is the same color webflow.css called
   --bright-blue (#2aa9b0 vs #2aa8b0 — imperceptible rounding difference). */
.page-sub-title {
	color: var(--teal);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	background-image: url('/images/blue.bar.h2.gif');
	background-position: 0%;
	background-repeat: no-repeat;
	background-size: 33px;
	padding-left: 40px;
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 1.4rem;
}
.title-em {
	color: var(--teal);
	font-style: normal;
}

/* ═══ DASHBOARD ═══ */
.welcome-avatar-lg {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--teal), var(--teal-deep));
	border: 3px solid var(--teal-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--label);
	font-size: 1.25rem;
	font-weight: 600;
	color: white;
	flex-shrink: 0;
	overflow: hidden; /* clips .avatar-photo to the circle */
}

/* Merged welcome + Aura Points card (mockup v10). The `flex-shrink: 0` below is
   now also covered by the `.maincontent > *` rule — kept explicit so the card
   survives being moved somewhere it isn't a direct child of that column. */
.welcome-aura-card {
	background: var(--warm-white);
	border: 1px solid var(--border);
	border-radius: 1.125rem;
	box-shadow: var(--shadow-sm);
	padding: 1.75rem 1.875rem;
	margin-bottom: 1.75rem;
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
}
.welcome-aura-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(to right, var(--teal), var(--gold), var(--orange));
}
.welcome-aura-top {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	margin-bottom: 1.375rem;
	flex-wrap: wrap;
}
.welcome-aura-divider {
	height: 1px;
	background: var(--border-soft);
	margin-bottom: 1.25rem;
}
.page-eyebrow {
	font-family: var(--label);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--teal);
	font-weight: 600;
	margin-bottom: 0.4375rem;
}
.welcome-title {
	font-family: var(--serif);
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	font-weight: 300;
	color: var(--charcoal);
	line-height: 1.1;
}
.welcome-title em {
	font-style: italic;
	color: var(--teal);
}
.welcome-sub {
	font-size: 0.78125rem;
	color: var(--text-muted);
	margin-top: 0.25rem;
	font-family: var(--label);
	letter-spacing: 0.01em;
}

/* Aura Points widget */
.aura-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin-bottom: 1.25rem;
}
.aura-title-wrap {
	display: flex;
	align-items: center;
	gap: 0.8125rem;
}
.aura-icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--gold-soft), var(--gold-light));
	border: 1px solid var(--gold-light);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.aura-icon svg {
	width: 18px;
	height: 18px;
	stroke: var(--gold);
	fill: none;
	stroke-width: 1.8;
}
.aura-eyebrow {
	font-family: var(--label);
	font-size: 0.65625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 700;
	margin-bottom: 0.125rem;
}
.aura-tier-name {
	font-family: var(--serif);
	font-size: 1.3125rem;
	font-weight: 400;
	color: var(--charcoal);
}
.aura-tier-name em {
	font-style: italic;
	color: var(--gold);
}
.aura-pts-wrap {
	text-align: right;
}
.aura-pts {
	font-family: var(--label);
	font-weight: 700;
	font-size: 1.875rem;
	line-height: 1;
	color: var(--gold);
}
.aura-pts-label {
	font-family: var(--label);
	font-size: 0.65625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 600;
	margin-top: 0.1875rem;
}
.aura-track {
	height: 9px;
	background: var(--off-white);
	border-radius: 100px;
	margin-bottom: 0.75rem;
	overflow: hidden;
	border: 1px solid var(--border);
}
.aura-fill {
	height: 100%;
	border-radius: 100px;
	background: linear-gradient(
		to right,
		#7c6fe0,
		#4e8fe0,
		#2ac1b0,
		#4fbf57,
		#e8c93a,
		#f58220,
		#e0526b
	);
	transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.aura-milestones {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.875rem;
}
.aura-milestone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3125rem;
	flex: 1;
	min-width: 70px;
}
.aura-milestone-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 1px solid transparent;
	opacity: 0.45;
	transition:
		opacity 0.2s,
		transform 0.2s;
}
.aura-milestone-dot.reached,
.aura-milestone-dot.current {
	opacity: 1;
}
.aura-milestone-dot.current {
	transform: scale(1.2);
}
.aura-milestone-dot.tier-silver {
	background: #b7c1c6;
	border-color: #b7c1c6;
}
.aura-milestone-dot.tier-gold {
	background: var(--gold);
	border-color: var(--gold);
}
.aura-milestone-dot.tier-platinum {
	background: #9fb0b8;
	border-color: #9fb0b8;
}
.aura-milestone-dot.tier-quantum {
	background: var(--navy);
	border-color: var(--navy);
}
.aura-milestone-dot.tier-silver.current {
	box-shadow: 0 0 0 4px rgba(183, 193, 198, 0.3);
}
.aura-milestone-dot.tier-gold.current {
	box-shadow: 0 0 0 4px rgba(201, 151, 58, 0.24);
}
.aura-milestone-dot.tier-platinum.current {
	box-shadow: 0 0 0 4px rgba(159, 176, 184, 0.32);
}
.aura-milestone-dot.tier-quantum.current {
	box-shadow: 0 0 0 4px rgba(0, 79, 89, 0.22);
}
.aura-milestone-name {
	font-family: var(--label);
	font-size: 0.71875rem;
	font-weight: 700;
	color: var(--charcoal);
}
.aura-milestone.active .aura-milestone-name {
	color: var(--gold);
}
.aura-milestone-pts {
	font-family: var(--label);
	font-size: 0.59375rem;
	color: var(--text-muted);
}
.aura-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.625rem;
	padding-top: 0.875rem;
	border-top: 1px solid var(--border-soft);
}
.aura-next-note {
	font-family: var(--label);
	font-size: 0.75rem;
	color: var(--text-muted);
}
.aura-next-note strong {
	color: var(--gold);
}
.aura-source-note {
	font-family: var(--label);
	font-size: 0.6875rem;
	color: var(--text-muted);
}

.dash-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 1.75rem;
}
.stat-card {
	background: var(--warm-white);
	border-radius: 0.875rem;
	padding: 1.375rem 1.5rem;
	border: 1px solid var(--border);
	box-shadow: var(--shadow-sm);
	transition:
		transform 0.2s,
		box-shadow 0.2s;
}
.stat-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
a.stat-card {
	cursor: pointer;
}
.stat-label {
	font-family: var(--label);
	font-size: 0.65625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.5625rem;
}
.stat-val {
	font-family: var(--label);
	font-weight: 700;
	font-size: 1.6875rem;
	color: var(--charcoal);
	line-height: 1;
	margin-bottom: 0.3125rem;
}
.stat-val.teal {
	color: var(--teal-deep);
}
.stat-val.orange {
	color: var(--orange-deep);
}
.stat-sub {
	font-family: var(--label);
	font-size: 0.71875rem;
	color: var(--text-muted);
}
.section-hdr {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.125rem;
}
.section-hdr.margin-top {
	margin-top: 1.125rem;
}
.section-hdr--upcoming {
	margin-top: 0.5rem;
}
.dash-note {
	color: var(--text-muted);
	font-size: 0.875rem;
}
.dash-note--spaced {
	margin-bottom: 1.75rem;
}
.section-hdr h3 {
	font-family: var(--serif);
	font-size: 1.375rem;
	font-weight: 300;
	color: var(--charcoal);
}
.section-hdr h3 em {
	font-style: italic;
	color: var(--teal);
}
.section-hdr a {
	font-family: var(--label);
	font-size: 0.8125rem;
	color: var(--teal-deep);
	text-decoration: none;
	cursor: pointer;
	font-weight: 600;
}
.session-list {
	display: flex;
	flex-direction: column;
	gap: 0.6875rem;
	margin-bottom: 1.75rem;
	max-width: 700px;
}
.session-card {
	background: white;
	border: 1px solid var(--border-soft);
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1.125rem;
}
.sdate {
	background: var(--teal-xsoft);
	border-radius: 0.375rem;
	padding: 0.5625rem 0.875rem;
	text-align: center;
	flex-shrink: 0;
	min-width: 58px;
}
.sdate .day {
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--teal-deep);
	letter-spacing: 0.08em;
}
.sdate .num {
	font-family: var(--serif);
	font-size: 1.625rem;
	font-weight: 400;
	color: var(--teal-deep);
	line-height: 1;
}
.sinfo {
	flex: 1;
}
.sinfo h4 {
	font-size: 0.9375rem;
	font-weight: 700;
	margin-bottom: 0.1875rem;
}
.sinfo p {
	font-size: 0.8125rem;
	color: var(--text-muted);
}
.spill {
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 0.25rem 0.625rem;
	border-radius: 0.75rem;
	background: var(--orange-soft);
	color: var(--orange-deep);
	flex-shrink: 0;
}
.spill.live {
	background: var(--orange);
	color: white;
}
/* ═══ COURSES LIBRARY ═══ */
.courses-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.courses-toolbar h2 {
	font-family: var(--serif);
	font-size: 2rem;
	font-weight: 400;
}
.sort-select {
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--border);
	border-radius: 0.3125rem;
	font-family: var(--sans);
	font-size: 0.8125rem;
	color: var(--ink);
	background: white;
	cursor: pointer;
	outline: none;
}
.sort-select--compact {
	font-size: 0.75rem;
	padding: 0.375rem 0.75rem;
}
.netflix-row {
	margin-bottom: 2.25rem;
}
.netflix-row-lbl {
	font-family: var(--label);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.875rem;
}
.course-cards-row {
	display: flex;
	gap: 1.125rem;
	flex-wrap: wrap;
}
.course-card {
	background: var(--warm-white);
	border-radius: 0.875rem;
	overflow: hidden;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition:
		box-shadow 0.25s,
		transform 0.25s;
	border: 1px solid var(--border);
	width: 260px;
	flex-shrink: 0;
	text-decoration: none;
	color: inherit;
	display: block;
}
.course-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}
.course-thumb {
	height: 154px;
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: 0.875rem;
}
.course-thumb-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.course-thumb-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(26, 40, 41, 0.8) 0%, rgba(26, 40, 41, 0.05) 60%);
}
.course-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -60%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s;
}
.course-play-btn svg {
	width: 18px;
	height: 18px;
	fill: white;
	margin-left: 0.125rem;
}
.course-card:hover .course-play-btn {
	opacity: 1;
}
.ct-teal {
	background: linear-gradient(135deg, #0d5a60, #2aa8b0);
}
.ct-gold {
	background: linear-gradient(135deg, #7a5820, #c9973a);
}
.ct-dark {
	background: linear-gradient(135deg, #1a2829, #4a6364);
}
.ct-purple {
	background: linear-gradient(135deg, #1a1060, #4a3a8a);
}
/* Both course-card badges ride the top edge of the thumbnail — format on the
   left, enrollment status on the right — kept small so they label the artwork
   instead of covering it. Every badge is filled and opaque rather than
   frosted: up here `.course-thumb-overlay` is at its lightest, so a
   translucent pill would wash out against a bright thumbnail. Color carries
   the format distinction (orange for live, teal for on-demand only) and the
   status ramp (teal / gold / muted), with the words as the primary signal.

   Text is WHITE — a deliberate design call, recorded here because it does not
   meet WCAG AA and a future reader would otherwise "fix" it back. On these
   mid-tone fills white measures 2.6:1 (orange), 2.6:1 (gold) and 2.9:1 (teal)
   against AA's 4.5:1, which applies in full: 9px bold is nowhere near the
   18.66px large-text exemption. The words are not the only carrier of this
   information — format and status both appear in the card body — which is what
   makes the tradeoff survivable rather than a blocker.

   If this needs to pass AA later, the cheaper lever is the FILL, not the text:
   darkening to roughly #a85a0f / #8f6a1f / var(--teal-deep) puts white at
   5.1 / 4.9 / 4.7 while keeping the color coding intact. */
.course-type-badge,
.course-status-badge {
	position: absolute;
	top: 0.75rem;
	z-index: 1;
	font-family: var(--label);
	font-size: 0.5625rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 0.1875rem 0.5rem;
	border-radius: 100px;
	color: white;
}
.course-type-badge {
	left: 0.75rem;
}
.course-type-badge.live {
	background: var(--orange);
}
.course-type-badge.ondemand {
	background: var(--teal);
}
.course-status-badge {
	right: 0.75rem;
}
.course-status-badge.active {
	background: rgba(42, 168, 176, 0.94);
}
.course-status-badge.expiring {
	background: var(--gold);
}
/* The one badge that reads better light-on-dark. Near-opaque for the same
   reason the others are filled: at the top edge the overlay barely darkens the
   thumbnail, and at 0.7 a bright photo showed through enough to lift the fill
   and mute the text. */
.course-status-badge.expired {
	background: rgba(28, 43, 44, 0.88);
	color: var(--teal-soft);
}
.course-body {
	padding: 0.9375rem 1.0625rem 1.0625rem;
}
.course-body h3 {
	font-family: var(--serif);
	font-size: 1.1875rem;
	font-weight: 400;
	margin-bottom: 0.5rem;
	line-height: 1.3;
}
.course-meta-row {
	display: flex;
	gap: 0.75rem;
}
.course-meta-row span {
	font-family: var(--label);
	font-size: 0.71875rem;
	color: var(--text-muted);
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}
.course-meta-row svg {
	width: 11px;
	height: 11px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	flex-shrink: 0;
}
.course-expiry {
	margin-top: 0.6875rem;
	padding-top: 0.6875rem;
	border-top: 1px solid var(--border-soft);
	font-family: var(--label);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 0.375rem;
}
.course-expiry svg {
	width: 11px;
	height: 11px;
	fill: none;
	stroke: var(--gold);
	stroke-width: 2;
	stroke-linecap: round;
	flex-shrink: 0;
}

/* ═══ COURSE PLAYER ═══ */
/* Grow into whatever height is left under `.player-back`, but never shrink below
   the panel's own height. `flex-basis: auto` (not 0) keeps the content height as
   the floor, so on a short viewport the column scrolls instead of the panel
   spilling out of this box: a descendant that overflows its flex item escapes
   `.maincontent`'s content box entirely, and a scroll container does NOT re-add
   its `padding-bottom` under overflow it did not size — which ate the 2rem
   bottom padding on every viewport under ~800px tall. */
.player-fullbleed {
	padding: 0;
	flex: 1 0 auto;
}
.player-page {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.player-back {
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--teal-deep);
	cursor: pointer;
	flex-shrink: 0;
	text-decoration: none;
	margin-bottom:.5rem
}
.player-back svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
}
.player-back:hover {
	opacity: 0.75;
}

/* ═══ COURSE DETAIL — nested panel + tabs (ADR-0170 remix) ═══ */
.nested-panel {
	display: flex;
	background: var(--warm-white);
	border: 1px solid var(--border);
	border-radius: 1rem;
	box-shadow: var(--shadow-md);
	overflow: hidden;
	min-height: 32rem;
}
.side-panel {
	width: 15rem;
	background: var(--panel-side);
	border-right: 1px solid var(--border);
	flex-shrink: 0;
	padding: 1.625rem 0.875rem;
}
.panel-title {
	font-family: var(--serif);
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--charcoal);
	padding: 0 0.25rem 1.25rem;
	line-height: 1.2;
}
.panel-title-bold {
	font-family: var(--label);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--text-muted);
	padding: 0 0.25rem 1.125rem;
}
.panel-title-bold em {
	font-style: normal;
	color: var(--teal);
}
.panel-nav-link {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.6875rem 1rem;
	margin-bottom: 0.125rem;
	border-radius: 0.625rem;
	font-family: var(--label);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--text-muted);
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s;
	white-space: nowrap;
}
.panel-nav-link:hover {
	background: rgba(42, 168, 176, 0.08);
	color: var(--teal-deep);
}
.panel-nav-link.active {
	background: var(--teal-soft);
	color: var(--teal-deep);
}
.panel-nav-link svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}
.live-dot-sm {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--orange);
	margin-left: auto;
	animation: pulse 1.8s ease-in-out infinite;
}
.panel-main {
	flex: 1;
	padding: 1.75rem 2rem;
	min-width: 0;
	overflow-y: auto;
}

/* Live Sessions tab — hero + session list. Shared with /live (global schedule). */
.live-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: minmax(15rem, auto);
	gap: 0;
	background: var(--warm-white);
	border: 1px solid var(--border);
	border-radius: 1rem;
	overflow: hidden;
	margin-bottom: 1.75rem;
	box-shadow: var(--shadow-sm);
	flex-shrink: 0;
}
.live-hero-text {
	padding: 1.75rem 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.live-hero-eyebrow {
	font-family: var(--label);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--orange-deep);
	font-weight: 700;
	margin-bottom: 0.625rem;
}
/* A control that reads as part of the eyebrow line rather than as chrome. It
   switches tabs — in-page state, no navigation — so it has to be a <button>;
   it used to be an <a href=""> styled by inheritance, which made it a link to
   nowhere (#88). These declarations reproduce that inherited look exactly, so
   the mockup's 1:1 appearance is preserved while the semantics get fixed. */
.live-hero-eyebrow .eyebrow-link {
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.live-hero-title {
	font-family: var(--serif);
	font-size: clamp(1.375rem, 2.6vw, 2rem);
	font-weight: 300;
	color: var(--charcoal);
	line-height: 1.15;
	margin-bottom: 0.5rem;
}
.live-hero-title em {
	font-style: italic;
	color: var(--teal);
}
/* Absolute "when is this" line, between the hero title and the relative
   countdown. Deliberately quieter than the countdown below it — it's reference
   detail, not the call to action. */
.live-hero-datetime {
	font-family: var(--label);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text-muted);
	margin-bottom: 0.375rem;
}
.live-hero-countdown {
	font-family: var(--label);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--orange-deep);
	margin-bottom: 0.75rem;
}
.live-hero-desc {
	font-size: 0.8125rem;
	color: var(--text-muted);
	margin-bottom: 1rem;
}
/* In-Person hero — address/phone/hours rows (mock, see /live's In-Person tab). */
.live-hero-detail-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--text-muted);
	margin-bottom: 0.375rem;
}
.live-hero-detail-row svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	fill: none;
	stroke: var(--teal-deep);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.live-hero-actions {
	display: flex;
	gap: 0.625rem;
	flex-wrap: wrap;
}
.btn-join-live {
	font-family: var(--label);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var(--orange);
	color: white;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: 100px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: background 0.2s;
}
.btn-join-live:hover {
	background: var(--orange-deep);
}
.btn-join-live:disabled {
	background: var(--border);
	color: var(--text-muted);
	cursor: default;
}
.btn-notify {
	font-family: var(--label);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: none;
	color: var(--orange-deep);
	border: 1.5px solid var(--orange);
	padding: 0.6875rem 1.25rem;
	border-radius: 100px;
	cursor: pointer;
	transition: background 0.2s;
}
.btn-notify:hover {
	background: var(--orange-soft);
}
.btn-notify:disabled {
	background: var(--teal-soft);
	color: var(--teal-deep);
	border-color: transparent;
	cursor: default;
}
.live-hero-img {
	position: relative;
	overflow: hidden;
	min-height: 15rem;
}
.live-hero-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.live-hero-badge {
	position: absolute;
	top: 1.125rem;
	left: 1.125rem;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	background: var(--orange);
	color: white;
	font-family: var(--label);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.375rem 0.8125rem;
	border-radius: 100px;
}
.live-hero-badge-dot {
	width: 7px;
	height: 7px;
	background: white;
	border-radius: 50%;
	animation: pulse 1.6s ease-in-out infinite;
}
.live-class-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.live-class-row {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	background: var(--warm-white);
	border: 1px solid var(--border);
	border-radius: 0.875rem;
	padding: 1rem 1.375rem;
	flex-wrap: wrap;
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.2s;
}
.live-class-row:hover {
	box-shadow: var(--shadow-md);
}
/* Already-ended class occurrence — no Join/Reserve action left to take.
   Desaturated gray treatment (not opacity) so the card reads as "done" rather
   than merely faded. */
.live-class-row.past {
	background: var(--gray-soft);
	border-color: var(--gray-border);
	box-shadow: none;
}
.live-class-row.past:hover {
	box-shadow: none;
}
.live-class-row.past .lc-date,
.live-class-row.past .lc-time,
.live-class-row.past .live-class-name,
.live-class-row.past .live-class-instructor {
	color: var(--gray);
}
.live-class-row.past .live-class-ava {
	background: var(--gray-border);
}
.live-class-row.past .live-class-ava svg {
	stroke: var(--gray);
}
.live-class-time {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	width: 6.5rem;
	flex-shrink: 0;
}
.live-class-time .lc-date {
	font-family: var(--label);
	font-weight: 600;
	font-size: 0.65625rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.live-class-time .lc-time {
	font-family: var(--label);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--teal-deep);
}
.live-class-time .lc-time.live-now {
	color: var(--orange-deep);
}
/* Generic placeholder — no instructor field exists on course sessions yet
   (see AGENTS.md § "no fake data"). Swap for a real photo/initials once
   gsnet-api-client exposes one; don't infer a name or image from anywhere. */
.live-class-ava {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--teal-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.live-class-ava svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--teal-deep);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.live-class-body {
	flex: 1;
	min-width: 9.375rem;
}
.live-class-name {
	font-family: var(--serif);
	font-size: 1rem;
	font-weight: 400;
	color: var(--charcoal);
}
.live-class-instructor {
	font-size: 0.75rem;
	color: var(--text-muted);
	font-family: var(--label);
}
.btn-rsvp {
	font-family: var(--label);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--orange);
	color: white;
	border: none;
	padding: 0.625rem 1.25rem;
	border-radius: 100px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s;
}
.btn-rsvp:hover {
	background: var(--orange-deep);
}
.btn-rsvp.done,
.btn-rsvp:disabled {
	background: var(--teal-soft);
	color: var(--teal-deep);
	cursor: default;
}
.btn-cancel {
	font-family: var(--label);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: none;
	color: var(--orange-deep);
	border: 1.5px solid var(--orange);
	padding: 0.5625rem 1rem;
	border-radius: 100px;
	cursor: pointer;
	transition: background 0.2s;
}
.btn-cancel:hover {
	background: var(--orange-soft);
}

.course-not-found {
	padding: 3rem 1.5rem;
	color: var(--text-muted);
}
.course-not-found h3 {
	font-family: var(--serif);
	font-size: 1.5rem;
	color: var(--charcoal);
	margin-bottom: 0.375rem;
}
.course-not-found a {
	color: var(--teal-deep);
}
.video-wrap {
	background: #000;
	border-radius: 0.625rem;
	overflow: hidden;
	aspect-ratio: 16/9;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.video-wrap iframe {
	width: 100%;
	height: 100%;
	border: none;
}
.video-el {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}
.video-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #0d1f20, #1a2829);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.875rem;
}
.vph-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(42, 168, 176, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
}
.vph-icon svg {
	width: 28px;
	height: 28px;
	fill: var(--teal);
	margin-left: 0.25rem;
}
.video-placeholder p {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.35);
}
.vid-btn {
	display: flex;
	align-items: center;
	gap: 0.4375rem;
	padding: 0.5rem 0.9375rem;
	background: white;
	border: 1px solid var(--border);
	border-radius: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	transition: all 0.15s;
	position: relative;
}
.vid-btn:hover {
	background: var(--teal-soft);
	border-color: var(--teal);
	color: var(--teal-deep);
}
.vid-btn svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}
.panel-empty-note {
	padding: 0.875rem 1rem;
	font-size: 0.75rem;
	color: var(--text-muted);
}

/* On-Demand tab — video + lesson sidebar (ADR-0170 remix, "mc-" = masterclass
   layout). `.video-wrap`/`.video-placeholder`/`.vph-icon`/`.vid-btn` above are
   shared with VideoModal.svelte — don't rename those, only this wrapper. */
.mc-layout {
	display: grid;
	grid-template-columns: 1fr 21.25rem;
	gap: 0;
	background: var(--warm-white);
	border: 1px solid var(--border);
	border-radius: 1rem;
	overflow: hidden;
	margin-bottom: 1.75rem;
	box-shadow: var(--shadow-sm);
}
.mc-player-col {
	display: flex;
	flex-direction: column;
}
/* /ondemand/[id] detail view — single-column variant of .mc-layout (no lesson
   sidebar): full-width player, title + details below, YouTube-style. */
.od-detail-panel {
	display: flex;
	flex-direction: column;
	background: var(--warm-white);
	border: 1px solid var(--border);
	border-radius: 1rem;
	overflow: hidden;
	margin-bottom: 1.75rem;
	box-shadow: var(--shadow-sm);
}
.mc-info {
	padding: 1.625rem 1.875rem;
}
.mc-lesson-num {
	font-family: var(--label);
	font-size: 0.65625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--teal-deep);
	font-weight: 700;
	margin-bottom: 0.5rem;
}
.mc-title {
	font-family: var(--serif);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--charcoal);
	margin-bottom: 0.625rem;
	line-height: 1.2;
}
.mc-desc {
	font-size: 0.8125rem;
	color: var(--text-muted);
	line-height: 1.75;
}
.mc-resources {
	margin-top: 1.375rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border-soft);
}
.mc-resources-lbl {
	font-family: var(--label);
	font-size: 0.65625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 700;
	margin-bottom: 0.75rem;
}
.mc-resource-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
	gap: 0.625rem;
}
.mc-resource-grid .res-card-sm {
	padding: 0.75rem;
	gap: 0.1875rem;
	border-radius: 0.625rem;
}
.mc-resource-grid .res-card-sm .res-card-icon {
	width: 1.75rem;
	height: 1.75rem;
	font-size: 0.5rem;
	border-radius: 0.4375rem;
	margin-bottom: 0.0625rem;
}
.mc-resource-grid .res-card-sm .res-card-name {
	font-size: 0.8125rem;
}
.mc-resource-grid .res-card-sm .res-card-meta {
	font-size: 0.59375rem;
	margin-top: 0;
}
.mc-sidebar {
	background: var(--panel-side);
	border-left: 1px solid var(--border);
	display: flex;
	flex-direction: column;
}
.mc-sidebar-top {
	padding: 1.25rem 1.375rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-bottom: 1px solid var(--border);
}
/* Generic placeholder — no instructor field on CourseItem yet, matching the
   same constraint as .live-class-ava. */
.mc-instr-ava {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--teal-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.mc-instr-ava svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--teal-deep);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.mc-instr-name {
	font-family: var(--serif);
	font-size: 1rem;
	font-weight: 400;
	color: var(--charcoal);
}
.mc-toggle {
	display: flex;
	border-bottom: 1px solid var(--border);
}
.mc-toggle-btn {
	flex: 1;
	font-family: var(--label);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.8125rem 0.5rem;
	background: none;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition:
		color 0.2s,
		border-color 0.2s;
}
.mc-toggle-btn.active {
	color: var(--teal-deep);
	border-bottom-color: var(--teal);
}
.mc-meta-line {
	padding: 0.8125rem 1.375rem;
	font-family: var(--label);
	font-size: 0.6875rem;
	color: var(--text-muted);
	border-bottom: 1px solid var(--border);
	font-weight: 500;
}
.mc-lesson-list {
	flex: 1;
	overflow-y: auto;
	max-height: 28.75rem;
}
.mc-lesson-item {
	display: flex;
	gap: 0.75rem;
	padding: 0.8125rem 1.375rem;
	cursor: pointer;
	transition: background 0.15s;
	border-bottom: 1px solid var(--border-soft);
}
.mc-lesson-item:hover {
	background: rgba(42, 168, 176, 0.05);
}
.mc-lesson-item.playing {
	background: var(--teal-soft);
}
.mc-lesson-thumb {
	position: relative;
	width: 4.625rem;
	height: 2.875rem;
	border-radius: 0.375rem;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.mc-lesson-thumb svg {
	width: 13px;
	height: 13px;
	fill: rgba(255, 255, 255, 0.85);
	position: relative;
	z-index: 1;
}
.mc-lesson-dur {
	position: absolute;
	bottom: 3px;
	right: 3px;
	background: rgba(0, 0, 0, 0.65);
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.5625rem;
	padding: 1px 4px;
	border-radius: 2px;
}
.mc-lesson-info {
	flex: 1;
	min-width: 0;
}
.mc-lesson-title {
	font-size: 0.78125rem;
	font-weight: 600;
	color: var(--charcoal);
	line-height: 1.4;
	margin-bottom: 0.125rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mc-lesson-item.playing .mc-lesson-title {
	color: var(--teal-deep);
}
.mc-lesson-sub {
	font-size: 0.65625rem;
	color: var(--text-muted);
	font-family: var(--label);
}

/* Resources tab — course-scoped file/handout cards. */
.resource-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr));
	gap: 1rem;
}
.res-card {
	background: var(--warm-white);
	border: 1px solid var(--border);
	border-radius: 0.875rem;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition:
		box-shadow 0.2s,
		transform 0.2s;
}
.res-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.res-card-icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.625rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--label);
	font-size: 0.625rem;
	font-weight: 700;
	color: white;
	margin-bottom: 0.25rem;
}
.res-card-icon.pdf {
	background: #c0392b;
}
.res-card-icon.ppt {
	background: var(--orange-deep);
}
.res-card-name {
	font-family: var(--serif);
	font-size: 1.03125rem;
	font-weight: 400;
	color: var(--charcoal);
}
.res-card-sub {
	font-size: 0.75rem;
	color: var(--text-muted);
	line-height: 1.55;
}
.res-card-meta {
	font-size: 0.65625rem;
	color: var(--text-muted);
	margin-top: 0.25rem;
	font-family: var(--label);
	font-weight: 500;
}

/* FAQ tab (course detail) — independent expand/collapse per question, not a
   single-open accordion. */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.faq-item {
	background: var(--warm-white);
	border: 1px solid var(--border);
	border-radius: 0.875rem;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.faq-question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--label);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--charcoal);
}
.faq-question.open {
	color: var(--teal-deep);
}
.faq-chevron {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s;
}
.faq-question.open .faq-chevron {
	transform: rotate(180deg);
}
.faq-answer {
	padding: 0 1.25rem 1.125rem;
	font-size: 0.8125rem;
	color: var(--text-muted);
	line-height: 1.7;
}

/* ═══ LIVE CLASSES ═══ */
@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
}
/* Global hero's teal→orange gradient fallback — LiveClass carries no image
   field, so the hero image slot is always this gradient, never a photo. */
.live-hero-img.live-gradient {
	background: linear-gradient(135deg, var(--orange), var(--orange-deep));
	display: flex;
	align-items: center;
	justify-content: center;
}
.week-pills {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}
.week-pill {
	font-family: var(--label);
	font-size: 0.78125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 0.625rem 1.375rem;
	border-radius: 100px;
	border: none;
	background: var(--teal-deep);
	color: white;
	cursor: pointer;
	transition:
		background 0.2s,
		transform 0.15s;
}
.week-pill:hover {
	transform: translateY(-1px);
}
.week-pill.active {
	background: var(--orange);
}
.week-nav {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.week-nav span {
	font-family: var(--label);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--charcoal);
	min-width: 140px;
	text-align: center;
}
.week-btn {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--warm-white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
}
.week-btn:hover {
	background: var(--teal-soft);
	border-color: var(--teal);
}
.week-btn:disabled {
	cursor: not-allowed;
	opacity: 0.35;
	pointer-events: none;
}
.week-btn svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
}

/* ═══ ON-DEMAND ═══ */
.od-filter-pill {
	padding: 0.375rem 0.875rem;
	border-radius: 1.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--border);
	background: white;
	color: var(--ink);
	transition: all 0.15s;
	flex-shrink: 0;
}
.od-filter-pill.active,
.od-filter-pill:hover {
	background: var(--teal-deep);
	color: white;
	border-color: var(--teal-deep);
}
.od-empty-note {
	color: var(--text-muted);
	font-size: 0.875rem;
}
.od-filter-toolbar {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	flex-wrap: wrap;
	margin-bottom: 1.375rem;
}
.od-filter-label {
	font-family: var(--label);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	white-space: nowrap;
}
.od-filter-divider {
	width: 1px;
	height: 20px;
	background: var(--border);
	margin: 0 0.25rem;
	flex-shrink: 0;
}

/* ═══ ON-DEMAND — Netflix-style container (ADR-0170 remix) ═══ */
.ondemand-container {
	background: var(--warm-white);
	border: 1px solid var(--border);
	border-radius: 1.125rem;
	overflow: hidden;
	box-shadow: var(--shadow-md);
}
.nf-hero {
	position: relative;
	height: 20.625rem;
	overflow: hidden;
	border-radius: 1.375rem;
	margin-bottom: 0;

}
.nf-hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.nf-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(0, 20, 25, 0.92) 8%, rgba(0, 20, 25, 0.6) 48%, transparent 92%);
}
.nf-hero-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.375rem 2.75rem;
	max-width: 33.75rem;
}
.nf-hero-tag {
	font-family: var(--label);
	font-size: 0.65625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--teal);
	font-weight: 700;
	margin-bottom: 0.6875rem;
}
.nf-hero-title {
	font-family: var(--serif);
	font-size: clamp(1.625rem, 3vw, 2.5rem);
	font-weight: 300;
	color: white;
	line-height: 1.15;
	margin-bottom: 0.8125rem;
}
.nf-hero-title em {
	font-style: italic;
	color: var(--teal);
}
.nf-hero-desc {
	font-size: 0.84375rem;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.75;
	margin-bottom: 1.375rem;
}
.nf-hero-actions {
	display: flex;
	gap: 0.6875rem;
	flex-wrap: wrap;
}
.btn-watch-now {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--label);
	font-size: 0.78125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--teal);
	color: white;
	border: none;
	padding: 0.875rem 1.75rem;
	border-radius: 100px;
	cursor: pointer;
	text-decoration: none;
	transition:
		background 0.2s,
		transform 0.15s;
}
.btn-watch-now:hover {
	background: var(--teal-deep);
	transform: translateY(-1px);
}
.btn-watch-now svg {
	width: 13px;
	height: 13px;
	fill: white;
}
.btn-save-later {
	font-family: var(--label);
	font-size: 0.78125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.12);
	color: white;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	padding: 0.8125rem 1.5rem;
	border-radius: 100px;
	cursor: pointer;
	transition: background 0.2s;
}
.btn-save-later:hover {
	background: rgba(255, 255, 255, 0.22);
}
.ondemand-rows {
	padding: 2rem 2.25rem 0.75rem;
}
.netflix-row {
	margin-bottom: 1.625rem;
}
.netflix-row-title {
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--charcoal);
	margin-bottom: 0.875rem;
}
.netflix-row-title a {
	color: inherit;
	text-decoration: none;
}
.netflix-scroll {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1rem;
}
@media (max-width: 1200px) {
	.netflix-scroll {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 768px) {
	.netflix-scroll {
		grid-template-columns: repeat(2, 1fr);
	}
}
.netflix-card {
	background: var(--warm-white);
	border: 1px solid var(--border);
	border-radius: 0.75rem;
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--shadow-sm);
	transition:
		box-shadow 0.2s,
		transform 0.2s;
}
.netflix-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.netflix-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
}
.netflix-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.netflix-play {
	/* Positioned so it paints above the absolutely-positioned thumbnail; without
	   this the image covers it, and without the rule above the image joins the
	   flex row and shrinks the button to 14px. */
	position: relative;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(253, 250, 247, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
}
.netflix-play svg {
	width: 12px;
	height: 12px;
	fill: var(--teal-deep);
	margin-left: 2px;
}
.netflix-dur {
	position: absolute;
	bottom: 6px;
	right: 6px;
	background: rgba(28, 43, 44, 0.75);
	color: rgba(230, 244, 245, 0.9);
	font-size: 0.5625rem;
	padding: 2px 5px;
	border-radius: 4px;
}
.netflix-info {
	padding: 0.75rem 0.875rem;
}
.netflix-cat {
	font-family: var(--label);
	font-size: 0.59375rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--teal);
	font-weight: 700;
	margin-bottom: 0.25rem;
}
.netflix-title {
	font-family: var(--serif);
	font-size: 0.90625rem;
	font-weight: 400;
	color: var(--charcoal);
	line-height: 1.25;
	margin-bottom: 0.25rem;
}
.netflix-meta {
	font-size: 0.65625rem;
	color: var(--text-muted);
	font-family: var(--label);
}

/* ═══ PROFILE ═══ */
.profile-hybrid {
	display: flex;
	flex-direction: column;
	gap: 1.375rem;
}
.profile-hybrid .profile-id-card {
	text-align: left;
	display: flex;
	align-items: center;
	gap: 1.125rem;
	padding: 1.25rem 1.5rem;
}
.profile-hybrid .profile-id-card .profile-avatar-lg {
	margin: 0;
	flex-shrink: 0;
}
.profile-id-text {
	min-width: 0;
}
.profile-id-text .profile-name {
	margin-bottom: 0.125rem;
}
.profile-email {
	font-size: 0.8125rem;
	color: var(--text-muted);
	word-break: break-all;
}
.profile-hybrid .profile-since {
	margin-top: 0.1875rem;
}
/* gs_net-owned entitlement summary — pushed to the right edge of the card. */
.profile-id-plan {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.3125rem;
	text-align: right;
	flex-shrink: 0;
	padding-left: 1.125rem;
}
.profile-plan-name {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--charcoal);
}
.profile-plan-access {
	font-size: 0.75rem;
	color: var(--text-muted);
}
.profile-plan-none {
	font-size: 0.8125rem;
	color: var(--text-muted);
}
/* No wrapper card — <UserProfile /> ships its own card. Wrapping produces a
   card-in-card. Position only. */
.profile-clerk-embed {
	background: transparent;
	border: 0;
	padding: 0;
}
/* Hide Clerk's sidebar navbar header — our page's `My Profile` heading +
   subtitle already announces this screen; Clerk's `Account | Manage your
   account info.` double-headlines it. Target Clerk's own `data-localization-key`
   attributes (stable across releases, tied to i18n) rather than internal
   `.cl-internal-*` hashed class names or `appearance.elements` overrides —
   in ClerkJS 5+ the navbar header is `userProfile.navbar.title/description`,
   which isn't a top-level `appearance.elements` key. */
.profile-clerk-embed [data-localization-key='userProfile.navbar.title'],
.profile-clerk-embed [data-localization-key='userProfile.navbar.description'] {
	display: none;
}
/* Let the embedded widget's own card take the width of our column instead of
   the fixed one ClerkJS sets inline. Scoped to the embed: /login renders
   <SignIn />, which has the same `.cl-cardBox`, and its width is not ours to
   change from here.

   `!important` because ClerkJS writes the width as an inline style, which no
   selector specificity can outrank. Note the CAPITAL B — Clerk derives its
   class names from the `appearance.elements` keys (`cardBox`, `rootBox`), and
   class selectors are case-sensitive in standards mode, so `.cl-cardbox`
   silently matches nothing. */
.profile-clerk-embed .cl-cardBox {
	width: auto !important;
}
.profile-clerk-embed .cl-rootBox {
	width: 100% !important;
}
/* Legacy 2-column profile layout (unused post ADR-0004; retained until
   follow-up prunes the tab/form CSS below). */
.profile-grid {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 1.375rem;
}
.profile-id-card {
	background: white;
	border: 1px solid var(--border-soft);
	border-radius: 0.625rem;
	padding: 1.625rem;
	text-align: center;
}
.profile-avatar-lg {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--teal), var(--teal-deep));
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	font-size: 1.75rem;
	font-weight: 300;
	color: white;
	margin: 0 auto 0.875rem;
	overflow: hidden; /* clips .avatar-photo to the circle */
}
.profile-name {
	font-family: var(--serif);
	font-size: 1.375rem;
	font-weight: 400;
	margin-bottom: 0.25rem;
}
.profile-since {
	font-size: 0.75rem;
	color: var(--text-muted);
}
.pdivider {
	height: 1px;
	background: var(--border-soft);
	margin: 1rem 0;
}
.profile-stats-row {
	display: flex;
	justify-content: space-around;
}
.pstat strong {
	display: block;
	font-family: var(--serif);
	font-size: 1.5rem;
	font-weight: 300;
}
.pstat span {
	font-size: 0.75rem;
	color: var(--text-muted);
}
.profile-right {
	background: white;
	border: 1px solid var(--border-soft);
	border-radius: 0.625rem;
	overflow: hidden;
}
.settings-panel {
	max-width: 580px;
}
.settings-panel-body {
	padding: 1.5rem;
}
.profile-right-tabs {
	display: flex;
	border-bottom: 1px solid var(--border-soft);
}
.profile-tab {
	padding: 0.8125rem 1.125rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--text-muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.profile-tab.active {
	color: var(--teal-deep);
	border-bottom-color: var(--teal-deep);
}
.profile-tab:hover:not(.active) {
	color: var(--charcoal);
}
.profile-tab-pane {
	display: none;
	padding: 1.5rem;
}
.profile-tab-pane.active {
	display: block;
}
.pf-section-title {
	font-size: 0.875rem;
	font-weight: 700;
	margin-bottom: 1rem;
	padding-bottom: 0.625rem;
	border-bottom: 1px solid var(--border-soft);
}
.pfield {
	display: flex;
	flex-direction: column;
	gap: 0.3125rem;
	margin-bottom: 1rem;
}
.pfield label {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--text-muted);
}
.pfield input {
	padding: 0.625rem 0.8125rem;
	border: 1px solid var(--border);
	border-radius: 0.3125rem;
	font-size: 0.875rem;
	color: var(--charcoal);
	font-family: var(--sans);
}
.pfield input:focus {
	outline: none;
	border-color: var(--teal);
}
.pfield input[readonly] {
	background: var(--off-white);
	color: var(--text-muted);
}
.btn-save {
	padding: 0.625rem 1.5rem;
	background: var(--teal-deep);
	color: white;
	border: none;
	border-radius: 0.3125rem;
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
}
.btn-save:hover {
	background: var(--teal);
}
.purchase-list {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}
.purchase-row {
	background: var(--off-white);
	border-radius: 0.4375rem;
	padding: 0.875rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.875rem;
}
.purchase-icon {
	width: 38px;
	height: 38px;
	border-radius: 0.375rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.purchase-icon.g1 {
	color: white;
}
.purchase-icon.neutral {
	background: var(--off-white);
	border: 1px solid var(--border);
	color: var(--text-muted);
}
.pt-empty {
	font-size: 0.8125rem;
	color: var(--text-muted);
}
.pf-section-title--spaced {
	margin-top: 1.5rem;
}
.purchase-icon svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}
.purchase-info {
	flex: 1;
}
.purchase-info h5 {
	font-size: 0.875rem;
	font-weight: 700;
	margin-bottom: 0.125rem;
}
.purchase-info p {
	font-size: 0.75rem;
	color: var(--text-muted);
}
.purchase-status {
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 0.1875rem 0.5625rem;
	border-radius: 0.625rem;
	flex-shrink: 0;
}
.purchase-status.active {
	background: #e8f5e9;
	color: #2e7d32;
}
.purchase-status.expiring {
	background: var(--gold-soft);
	color: #8a6520;
}
.purchase-status.expired {
	background: #fce4e4;
	color: #c62828;
}
.payment-method {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	background: var(--off-white);
	border-radius: 0.5rem;
	padding: 0.875rem 1rem;
	margin-bottom: 0.875rem;
}
.card-icon {
	font-size: 1.5rem;
}
.pm-info {
	flex: 1;
}
.pm-info h5 {
	font-size: 0.875rem;
	font-weight: 700;
}
.pm-info p {
	font-size: 0.75rem;
	color: var(--text-muted);
}
.btn-outline-sm {
	padding: 0.4375rem 0.875rem;
	background: white;
	border: 1.5px solid var(--border);
	border-radius: 0.3125rem;
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	color: var(--ink);
}
.btn-outline-sm:hover {
	border-color: var(--teal);
	color: var(--teal-deep);
}
.billing-history {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1.25rem;
}
.bill-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.625rem 0;
	border-bottom: 1px solid var(--border-soft);
}
.bill-row:last-child {
	border-bottom: none;
}
.bill-row span {
	font-size: 0.8125rem;
	color: var(--text-muted);
}
.bill-row strong {
	font-size: 0.8125rem;
	font-weight: 700;
}
.bill-row a,
.bill-row .receipt-link {
	font-size: 0.75rem;
	color: var(--teal-deep);
	text-decoration: none;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
}

/* ═══ SETTINGS ═══ */
.settings-section {
	margin-bottom: 1.625rem;
}
.settings-section h4 {
	font-size: 0.875rem;
	font-weight: 700;
	margin-bottom: 0.875rem;
	padding-bottom: 0.625rem;
	border-bottom: 1px solid var(--border-soft);
}
.setting-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.6875rem 0;
	border-bottom: 1px solid var(--border-soft);
}
.setting-row:last-child {
	border-bottom: none;
}
.setting-info h5 {
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.125rem;
}
.setting-info p {
	font-size: 0.8125rem;
	color: var(--text-muted);
}
.toggle {
	width: 44px;
	height: 24px;
	background: var(--border);
	border-radius: 0.75rem;
	position: relative;
	cursor: pointer;
	transition: background 0.2s;
	flex-shrink: 0;
}
.toggle.on {
	background: var(--teal-deep);
}
.toggle::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: white;
	transition: transform 0.2s;
}
.toggle.on::after {
	transform: translateX(20px);
}

/* ═══ CALENDAR MODAL ═══ */
.modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(26, 40, 41, 0.55);
	z-index: 500;
	align-items: center;
	justify-content: center;
}
.modal-overlay.open {
	display: flex;
}
.modal-dismiss {
	position: absolute;
	inset: 0;
	background: none;
	border: 0;
	padding: 0;
	cursor: default;
}
.cal-modal-hdr {
	padding: 1.25rem 1.5rem 0.875rem;
	border-bottom: 1px solid var(--border-soft);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}
.cal-modal-hdr h3 {
	font-size: 1.0625rem;
	font-weight: 700;
}
.cal-close {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--off-white);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	font-size: 1.125rem;
	line-height: 1;
}
/* ═══ VIDEO MODAL (shared — VideoModal.svelte) ═══ */
.video-modal {
	position: relative;
	z-index: 1;
	background: white;
	border-radius: 0.75rem;
	width: 640px;
	max-width: calc(100vw - 2rem);
	max-height: 85vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.video-modal-body {
	overflow-y: auto;
	padding: 1.25rem 1.5rem 1.5rem;
}
.video-modal-resources {
	margin-top: 1.25rem;
}
.video-modal-resources-lbl {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
}
.video-modal-resource {
	display: flex;
	align-items: center;
	gap: 0.5625rem;
	width: 100%;
	padding: 0.625rem 0.75rem;
	border-radius: 0.4375rem;
	border: 1px solid var(--border-soft);
	background: white;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	margin-bottom: 0.375rem;
}
.video-modal-resource:hover {
	background: var(--teal-xsoft);
	border-color: var(--border);
}
.video-modal-resource:disabled {
	color: var(--text-muted);
	cursor: default;
}
.video-modal-resource:disabled:hover {
	background: white;
	border-color: var(--border-soft);
}
.video-modal-resource svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	flex-shrink: 0;
}
.video-modal-ftr {
	padding: 0.875rem 1.5rem;
	border-top: 1px solid var(--border-soft);
	display: flex;
	justify-content: flex-end;
	flex-shrink: 0;
}
.vid-btn.bookmarked {
	background: var(--gold-soft);
	border-color: var(--gold);
	color: var(--gold);
}
.vid-btn.bookmarked:hover {
	background: var(--gold-soft);
}

/* ═══ THUMBNAIL GRADIENTS ═══ */
.g1 {
	background: linear-gradient(135deg, #0d5a60, #2aa8b0);
}
.g2 {
	background: linear-gradient(135deg, #2d3f40, #4a6364);
}
.g3 {
	background: linear-gradient(135deg, #7a5820, #c9973a);
}
.g4 {
	background: linear-gradient(135deg, #1a2829, #2aa8b0);
}
.g5 {
	background: linear-gradient(135deg, #4a1a60, #9b59b6);
}

/* Per-course community banner (course-detail's Community tab) — smaller,
   rounded-on-all-sides variant of the global page's full-bleed hero. Shares
   the accent-gradient fallback (.ct-teal etc.) with course cards when the
   course has no thumbnail_url. */
.comm-banner-simple {
	position: relative;
	height: 11.875rem;
	border-radius: 1rem;
	overflow: hidden;
	margin-bottom: 1.5rem;
	display: flex;
	align-items: flex-end;
}
.comm-banner-simple img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.comm-banner-simple::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(19, 32, 56, 0.55), transparent 55%);
}
.comm-banner-simple-text {
	position: relative;
	z-index: 1;
	padding: 0 0 1rem 1.5rem;
	color: white;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.comm-banner-simple-text .t {
	font-family: var(--serif);
	font-size: 1.625rem;
	font-weight: 300;
}
.comm-banner-simple-text .s {
	font-size: 0.71875rem;
	color: rgba(230, 244, 245, 0.7);
	font-family: var(--label);
}
.feed-post-badge {
	font-size: 0.5625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--teal-deep);
	background: var(--teal-soft);
	padding: 0.125rem 0.375rem;
	border-radius: 100px;
	font-weight: 700;
	margin-left: 0.375rem;
}

/* ═══ COMMUNITY (global, ADR-0170 remix) ═══ */
.comm-page-main {
	padding: 0;
}
.comm-hero-simple {
	position: relative;
	height: 14.375rem;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}
.comm-hero-simple-text {
	position: relative;
	z-index: 1;
	padding: 0 0 1.25rem 1.875rem;
	color: white;
}
.comm-hero-simple-text .t {
	font-family: var(--serif);
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	font-weight: 300;
}
.comm-uploads-section {
	padding: 1.5rem 2rem 0;
}
.uploads-hd {
	font-family: var(--serif);
	font-size: 1.1875rem;
	font-weight: 400;
	color: var(--charcoal);
	margin-bottom: 0.875rem;
}
.uploads-hd em {
	font-style: italic;
	color: var(--teal);
}
.comm-uploads-section .netflix-scroll {
	display: flex;
	gap: 0.875rem;
	overflow-x: auto;
	padding-bottom: 0.5rem;
}
.comm-uploads-section .netflix-card {
	flex-shrink: 0;
	width: 13.4375rem;
}
.comm-two-col {
	display: grid;
	grid-template-columns: 1fr 18.75rem;
	gap: 1.5rem;
	padding: 1.625rem 2rem 2.125rem;
	align-items: start;
}
.comm-right-col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.comm-panel {
	background: var(--warm-white);
	border: 1px solid var(--border);
	border-radius: 0.875rem;
	padding: 1.125rem 1.25rem;
	box-shadow: var(--shadow-sm);
}
.comm-panel-title {
	font-family: var(--serif);
	font-size: 1.03125rem;
	font-weight: 400;
	color: var(--charcoal);
	margin-bottom: 0.8125rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.comm-panel-title svg {
	width: 15px;
	height: 15px;
	stroke: var(--teal);
	fill: none;
	stroke-width: 1.8;
}
.chatroom-panel {
	background: linear-gradient(135deg, var(--teal-deep), var(--navy));
	color: white;
	text-align: center;
	padding: 1.5rem 1.25rem;
}
.chatroom-panel .z {
	color: var(--teal);
}
.chatroom-panel-title {
	font-family: var(--label);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.03em;
	margin-bottom: 0.875rem;
	text-transform: uppercase;
}
.btn-chatroom {
	font-family: var(--label);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var(--teal);
	color: white;
	border: none;
	padding: 0.75rem 1.375rem;
	border-radius: 100px;
	cursor: pointer;
	width: 100%;
	transition: background 0.2s;
}
.btn-chatroom:hover {
	background: var(--teal-deep);
}
.event-item {
	display: flex;
	align-items: center;
	gap: 0.6875rem;
	margin-bottom: 0.8125rem;
}
.event-item:last-child {
	margin-bottom: 0;
}
.event-date-box {
	width: 2.375rem;
	text-align: center;
	flex-shrink: 0;
	background: var(--orange-soft);
	border: 1px solid var(--orange);
	border-radius: 0.5rem;
	padding: 0.25rem 0.125rem;
}
.event-month {
	font-family: var(--label);
	font-size: 0.5rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--orange-deep);
	font-weight: 700;
}
.event-day {
	font-family: var(--label);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--orange-deep);
	line-height: 1.15;
}
.event-info {
	flex: 1;
	min-width: 0;
}
.event-name {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--charcoal);
	font-family: var(--label);
}
.event-meta {
	font-size: 0.65625rem;
	color: var(--text-muted);
	font-family: var(--label);
}
.pinned-panel {
	background: linear-gradient(135deg, var(--gold-soft), var(--warm-white));
	border-color: var(--gold-light);
}
.pinned-audio {
	display: flex;
	align-items: center;
	gap: 0.6875rem;
	margin-bottom: 0.75rem;
}
.pinned-audio-ico {
	width: 2.375rem;
	height: 2.375rem;
	border-radius: 50%;
	background: var(--gold);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.pinned-audio-ico svg {
	width: 15px;
	height: 15px;
	fill: white;
}
.pinned-audio-title {
	font-size: 0.78125rem;
	font-weight: 700;
	color: var(--charcoal);
	font-family: var(--label);
}
.pinned-audio-sub {
	font-size: 0.65625rem;
	color: var(--text-muted);
	font-family: var(--label);
}
.pinned-panel-note {
	font-size: 0.71875rem;
	color: var(--text-muted);
	line-height: 1.6;
	font-family: var(--label);
}
.pinned-promo-btn {
	font-family: var(--label);
	font-size: 0.71875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gold);
	background: none;
	border: 1.5px solid var(--gold);
	padding: 0.5625rem 0.875rem;
	border-radius: 100px;
	cursor: pointer;
	width: 100%;
	margin-top: 0.5rem;
	transition: background 0.2s;
}
.pinned-promo-btn:hover {
	background: var(--gold-soft);
}

/* Community feed — shared by the global page and (later) per-course tabs. */
.feed-compose {
	background: var(--warm-white);
	border: 1px solid var(--border);
	border-radius: 0.875rem;
	padding: 0.9375rem 1.125rem;
	margin-bottom: 1.125rem;
	display: flex;
	gap: 0.6875rem;
	box-shadow: var(--shadow-sm);
}
.feed-compose-ava,
.feed-post-ava {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	flex-shrink: 0;
}
.feed-compose-ava {
	background: var(--teal-soft);
	display: flex;
	align-items: center;
	justify-content: center;
}
.feed-compose-ava svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--teal-deep);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.feed-compose-box {
	flex: 1;
	border: 1px solid var(--border);
	border-radius: 1.125rem;
	padding: 0.5625rem 0.9375rem;
	font-family: var(--sans);
	font-size: 0.78125rem;
	color: var(--charcoal);
	background: var(--off-white);
	outline: none;
	resize: none;
}
.feed-post {
	background: var(--warm-white);
	border: 1px solid var(--border);
	border-radius: 0.875rem;
	padding: 1.125rem 1.25rem;
	margin-bottom: 0.875rem;
	box-shadow: var(--shadow-sm);
}
.feed-post-meta {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 0.6875rem;
}
.feed-post-name {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--charcoal);
	font-family: var(--label);
}
.feed-post-date {
	font-size: 0.65625rem;
	color: var(--text-muted);
	font-family: var(--label);
}
.feed-post-text {
	font-size: 0.84375rem;
	color: var(--charcoal);
	line-height: 1.65;
	margin-bottom: 0.6875rem;
}
.feed-post-footer {
	display: flex;
	gap: 0.25rem;
	padding-top: 0.625rem;
	border-top: 1px solid var(--border-soft);
}
.feed-react {
	display: flex;
	align-items: center;
	gap: 0.3125rem;
	font-family: var(--label);
	font-size: 0.71875rem;
	font-weight: 600;
	color: var(--text-muted);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.4375rem 0.6875rem;
	border-radius: 0.5rem;
	transition:
		background 0.15s,
		color 0.15s;
}
.feed-react:hover {
	background: var(--teal-soft);
	color: var(--teal-deep);
}
.feed-react.liked {
	color: var(--orange-deep);
}
.feed-react svg {
	width: 13px;
	height: 13px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
}
.feed-react.liked svg {
	fill: var(--orange-deep);
}

@media (max-width: 1024px) {
	.comm-two-col {
		grid-template-columns: 1fr;
	}
}

/* ═══ TOAST ═══ */
.toast {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	background: var(--navy);
	color: white;
	padding: 0.75rem 1.125rem;
	border-radius: 0.625rem;
	font-family: var(--label);
	font-size: 0.78125rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	z-index: 600;
	transform: translateY(20px);
	opacity: 0;
	transition:
		opacity 0.3s,
		transform 0.3s;
	pointer-events: none;
	box-shadow: var(--shadow-md);
}
.toast.show {
	opacity: 1;
	transform: translateY(0);
}
.toast-icon {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--teal);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.toast-icon svg {
	width: 9px;
	height: 9px;
	stroke: white;
	fill: none;
	stroke-width: 2.5;
}

/* ═══ COMING SOON ═══ */
.coming-soon-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6.25rem 1.25rem;
	background: var(--warm-white);
	border: 1px solid var(--border);
	border-radius: 1.25rem;
	box-shadow: var(--shadow-sm);
}
.coming-soon-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--teal-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.375rem;
}
.coming-soon-icon svg {
	width: 28px;
	height: 28px;
	stroke: var(--teal-deep);
	fill: none;
	stroke-width: 1.6;
}
.coming-soon-title {
	font-family: var(--serif);
	font-size: 2rem;
	font-weight: 400;
	color: var(--charcoal);
	margin-bottom: 1.625rem;
}
.coming-soon-title em {
	font-style: italic;
	color: var(--teal);
}
.coming-soon-sub {
	font-size: 0.875rem;
	color: var(--text-muted);
	max-width: 25rem;
	line-height: 1.7;
	margin-bottom: 1.625rem;
}
.coming-soon-btn {
	font-family: var(--label);
	font-size: 0.71875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: white;
	background: var(--teal);
	border: none;
	padding: 0.75rem 1.375rem;
	border-radius: 0.5rem;
	cursor: pointer;
	transition:
		background 0.2s,
		transform 0.15s;
	white-space: nowrap;
}
.coming-soon-btn:hover {
	background: var(--teal-deep);
	transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────────────────────
   Center locator — our own replacement for the embedded StoreRocket widget.
   The widget shipped its own Lato-based stylesheet and Google map, so it never
   belonged to this design system; these rules put the locator in the portal's
   own tokens. See src/lib/components/CenterLocator.svelte.
   ────────────────────────────────────────────────────────────────────────── */
.center-locator-shell {
	/* Size container — the tab panel this sits in is ~560px wide on a 1100px
	   viewport, so a viewport media query would choose the two-column layout
	   while there is nowhere near room for it. Query our own width instead. */
	container-type: inline-size;
}

/* Narrow (the default): map above, list below, each with its own height. A
   single stretched column would run the 65-row list to several thousand px. */
.center-locator {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 240px minmax(0, 420px);
	border: 1px solid var(--border);
	border-radius: 0.75rem;
	overflow: hidden;
	background: white;
}
.center-locator-map-wrap {
	grid-row: 1;
	min-height: 0;
	background: var(--off-white);
}
.center-locator-list {
	grid-row: 2;
	display: flex;
	flex-direction: column;
	/* Both needed: a grid item's default `min-height: auto` refuses to shrink
	   below its content, which is what lets an overflowing child blow the row
	   out instead of scrolling inside it. */
	min-width: 0;
	min-height: 0;
	border-top: 1px solid var(--border-soft);
}

@container (min-width: 700px) {
	.center-locator {
		grid-template-columns: minmax(280px, 1fr) minmax(0, 1.2fr);
		grid-template-rows: 560px;
	}
	.center-locator-list {
		grid-row: 1;
		grid-column: 1;
		border-top: 0;
		border-right: 1px solid var(--border-soft);
	}
	.center-locator-map-wrap {
		grid-row: 1;
		grid-column: 2;
	}
}

.center-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1rem;
	border-bottom: 1px solid var(--border-soft);
}
.center-search-icon {
	width: 1.05rem;
	height: 1.05rem;
	flex: none;
	fill: none;
	stroke: var(--text-muted);
	stroke-width: 2;
	stroke-linecap: round;
}
.center-search-field {
	flex: 1;
	min-width: 0;
	font-family: var(--sans);
	font-size: 0.9375rem;
	color: var(--charcoal);
	background: none;
	border: 0;
	padding: 0.25rem 0;
	outline: none;
}
.center-search-field::placeholder {
	color: var(--gray);
}
.center-search-clear,
.center-locate-btn {
	font-family: var(--label);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--teal-deep);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	white-space: nowrap;
}
.center-locate-btn:disabled {
	color: var(--gray);
	cursor: default;
}

.center-locator-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 0.625rem 1rem;
	font-family: var(--label);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	background: var(--off-white);
	border-bottom: 1px solid var(--border-soft);
}

.center-locator-note,
.center-locator-empty {
	font-family: var(--sans);
	font-size: 0.875rem;
	color: var(--text-muted);
	padding: 1rem;
	margin: 0;
}

.center-list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	flex: 1;
}
.center-list > li {
	border-bottom: 1px solid var(--border-soft);
}

.center-card {
	display: flex;
	flex-direction: column;
	gap: 0.1875rem;
	width: 100%;
	text-align: left;
	font-family: var(--sans);
	background: none;
	border: 0;
	padding: 0.875rem 1rem;
	cursor: pointer;
}
.center-card:hover {
	background: var(--teal-xsoft);
}
.center-card--active {
	background: var(--teal-soft);
	box-shadow: inset 3px 0 0 var(--teal);
}
.center-card-name {
	font-family: var(--label);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--charcoal);
}
.center-card-address {
	font-size: 0.8125rem;
	color: var(--text-muted);
	/* The upstream stores a multi-line postal address; keep its line breaks. */
	white-space: pre-line;
}
.center-card-phone {
	font-size: 0.8125rem;
	color: var(--text-muted);
}
.center-card-tags {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 0.25rem;
}
.center-tag {
	font-family: var(--label);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gray);
	background: var(--gray-soft);
	border-radius: 999px;
	padding: 0.125rem 0.5rem;
}
.center-tag--open {
	color: var(--teal-deep);
	background: var(--teal-soft);
}
.center-card-distance {
	font-size: 0.75rem;
	color: var(--text-muted);
}

.center-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	padding: 0 1rem 0.875rem;
}
.center-action {
	font-family: var(--label);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: white;
	background: var(--teal);
	border-radius: 0.375rem;
	padding: 0.4375rem 0.75rem;
	text-decoration: none;
}
.center-action:hover {
	background: var(--teal-deep);
}

/* Booking CTAs are secondary to Directions/Call/Email — outlined, not filled, so
   the contact row stays the obvious primary action. */
.center-action--secondary {
	color: var(--teal-deep);
	background: transparent;
	border: 1px solid var(--border);
}
.center-action--secondary:hover {
	color: white;
	background: var(--teal);
	border-color: var(--teal);
}

.center-booking {
	padding: 0 1rem 0.875rem;
}
.center-booking-summary {
	font-family: var(--label);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
	cursor: pointer;
	padding: 0.25rem 0;
	list-style: none;
}
/* Safari still paints the default triangle without this. */
.center-booking-summary::-webkit-details-marker {
	display: none;
}
.center-booking-summary::before {
	content: '▸';
	display: inline-block;
	margin-right: 0.375rem;
	transition: transform 0.15s ease;
}
.center-booking[open] > .center-booking-summary::before {
	transform: rotate(90deg);
}
.center-booking-summary:hover {
	color: var(--teal-deep);
}
/* The nested action row sits inside this container's padding already — cancel its
   own so the pills line up with the contact row above and the bottom gap is not
   applied twice. */
.center-booking .center-card-actions {
	padding: 0.5rem 0 0;
}
/* Tighten the contact row when a disclosure follows it, so the two read as one
   block rather than two separated sections. */
.center-card-actions:has(+ .center-booking) {
	padding-bottom: 0.375rem;
}

/* Google Maps draws its own controls; keep them under the portal's own overlays. */
.center-locator-map .gm-style {
	z-index: 1;
}

/* The map fills the wrapper; the wrapper is what the grid sizes. Markers are SVG
   data-URI icons built in the component — an image, not a DOM node — so there is
   no pin rule here to keep in sync with the portal tokens. */
.center-locator-map-wrap {
	position: relative;
	min-height: 0;
}
.center-locator-map {
	width: 100%;
	height: 100%;
}

/* Sits over the map rather than replacing it, so a map that recovers still has a
   container to render into. */
.center-locator-map-error {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
	padding: 0.625rem 1rem;
	font-size: 0.8125rem;
	color: var(--text-muted);
	background: rgba(255, 255, 255, 0.94);
	border-top: 1px solid var(--border-soft);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}