/* =========================================================================
   Events Hub Shell — app shell styles

   Matched to the Life Time app, 2026-08-04. Colors below are SAMPLED from
   screenshots of the live app, not chosen. See hub-build-prd.md §2a for the
   evidence and for why the earlier light/serif interpretation was wrong:
   Tiffany's "very light, breathable" was said while screen-sharing a
   near-black app and described its spacing, not its color.

   The app's chrome is copied. Its editorial photo-rail content strategy is
   deliberately NOT copied — the hub is a functional tool for someone standing
   at the venue, so information leads and images only label links to features.

   Mobile-first. Fixed bottom nav.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Colour tokens, light and dark.

   The dark values are sampled from screenshots of the live LT app. The
   screenshots were taken with the phone in dark mode, which nobody realised
   until 2026-08-06 — the app's DEFAULT is light. So the hub follows the
   device rather than picking a side:

   - :root carries the LIGHT palette, which is the default
   - prefers-color-scheme: dark swaps in the sampled dark palette
   - [data-theme] on <html> overrides both, set by the toggle and persisted

   Every rule below this block references the tokens, never a literal, so
   adding a theme never means touching a component.
   ------------------------------------------------------------------------- */

:root {
	/* "loos-extended" is what lifetimegrandprix.com loads via Adobe Fonts
	   (Typekit kit ghc8jwx). Sans only: the app uses no serif anywhere, and
	   Tiffany said "LT Sands is the font, I think, throughout." */
	--font-sans: "loos-extended", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* LIGHT — the default, matching the app's default appearance. */
	--color-bg: #FFFFFF;
	--color-surface: #F4F3F1;
	--color-surface-hi: #EAE8E5;
	--color-text: #191919;
	--color-text-muted: #6A6A6E;
	--color-button: #191919;
	--color-button-text: #FBF8F1;
	--color-border: rgba(25, 25, 25, 0.10);
	--color-border-strong: rgba(25, 25, 25, 0.22);
	--color-accent: #8A6F55;
	--color-scrim: rgba(0, 0, 0, 0.45);
	/* Live. One red for the dot and the Watch Live card, dark enough to carry
	   white text at card size in both themes. */
	--color-live: #C8102E;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--space-6: 48px;
	--space-7: 64px;

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 20px;

	--bottom-nav-height: 64px;
}

/* DARK — sampled from the LT app screenshots, 2026-08-04. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--color-bg: #191919;
		--color-surface: #313131;
		--color-surface-hi: #3C3C3C;
		--color-text: #FFFFFF;
		--color-text-muted: #9A9A9E;
		--color-button: #FBF8F1;
		--color-button-text: #191919;
		--color-border: rgba(255, 255, 255, 0.10);
		--color-border-strong: rgba(255, 255, 255, 0.22);
		--color-accent: #A3896F;
		--color-scrim: rgba(0, 0, 0, 0.55);
		--color-live: #E23A4E;
	}
}

/* Explicit choice from the toggle beats the device preference in both
   directions, which is why dark is repeated here rather than relying on the
   media query alone. */
:root[data-theme="dark"] {
	--color-bg: #191919;
	--color-surface: #313131;
	--color-surface-hi: #3C3C3C;
	--color-text: #FFFFFF;
	--color-text-muted: #9A9A9E;
	--color-button: #FBF8F1;
	--color-button-text: #191919;
	--color-border: rgba(255, 255, 255, 0.10);
	--color-border-strong: rgba(255, 255, 255, 0.22);
	--color-accent: #A3896F;
	--color-scrim: rgba(0, 0, 0, 0.55);
	--color-live: #E23A4E;
}

* {
	box-sizing: border-box;
}

/* The live tab and the Watch Live card are printed hidden and revealed by the
   clock. Both carry a display of their own, and a CSS display always beats the
   browser's own [hidden] rule, so state it here once rather than per component. */
[hidden] {
	display: none !important;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	/* room for the fixed bottom nav + safe-area on notched phones */
	padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-4));
}

h1, h2, h3, h4 {
	font-family: var(--font-sans);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 var(--space-3);
	letter-spacing: -0.01em;
	color: var(--color-text);
}

p {
	margin: 0 0 var(--space-3);
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

/* ---------------------------------------------------------------------
   App shell wrapper
   --------------------------------------------------------------------- */

.ehs-app {
	max-width: 480px;
	margin: 0 auto;
	/* 100vh is the viewport height with mobile browser chrome hidden, so it
	   overflows while the address bar shows. dvh tracks the real height. */
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--color-bg);
	position: relative;
}

@media (min-width: 900px) {
	.ehs-app {
		max-width: 720px;
	}
}

.ehs-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-4) var(--space-3);
}

.ehs-topbar__brand {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text);
}

.ehs-topbar__brand span {
	color: var(--color-text-muted);
}

/* Inside a section of an event the wordmark is replaced by the way back out.
   Same slot, same height, so the shell does not shift between screens. */
.ehs-topbar__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin-left: -6px;
	padding: 0 6px;
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text);
}

.ehs-topbar__back-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}

.ehs-topbar__back-icon svg {
	width: 20px;
	height: 20px;
}

/* No bottom nav outside an event, so no reserved strip for one either. */
.ehs-no-bottom-nav {
	padding-bottom: var(--space-6);
}

.ehs-main {
	padding: 0 var(--space-4) var(--space-6);
}

/* Full-bleed escape hatch: lets a header image reach the shell edges while
   the rest of .ehs-main keeps its gutter. */
.ehs-bleed {
	margin-left: calc(var(--space-4) * -1);
	margin-right: calc(var(--space-4) * -1);
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

.ehs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	padding: 13px var(--space-4);
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-button);
	color: var(--color-button-text);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.ehs-btn--ghost {
	background: transparent;
	border: 1px solid var(--color-border-strong);
	color: var(--color-text);
}

/* ---------------------------------------------------------------------
   Section heading
   --------------------------------------------------------------------- */

.ehs-section {
	margin-bottom: var(--space-6);
}

.ehs-section__title,
.ehs-section-title {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 var(--space-3);
	color: var(--color-text);
}

.ehs-section__intro {
	font-size: 14px;
	color: var(--color-text-muted);
	margin: 0 0 var(--space-3);
}

/* ---------------------------------------------------------------------
   List row — the workhorse. Used in place of the app's photo rails, per
   the functionality-first direction. Optional thumbnail, title, meta,
   chevron.
   --------------------------------------------------------------------- */

.ehs-rows {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.ehs-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	width: 100%;
	text-align: left;
	border: 0;
	font-family: inherit;
	color: var(--color-text);
}

a.ehs-row:hover,
a.ehs-row:focus-visible,
button.ehs-row:hover,
button.ehs-row:focus-visible {
	background: var(--color-surface-hi);
}

.ehs-row__thumb {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	object-fit: cover;
	background: var(--color-surface-hi);
}

.ehs-row__body {
	flex: 1;
	min-width: 0;
}

/* Both are spans so the whole row can be a single <a>. They still need to
   stack, so state display explicitly rather than relying on margin. */
.ehs-row__title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	color: var(--color-text);
}

.ehs-row__meta {
	display: block;
	font-size: 13px;
	line-height: 1.35;
	color: var(--color-text-muted);
	margin: 3px 0 0;
}

.ehs-row__chevron {
	flex: 0 0 auto;
	color: var(--color-text-muted);
	display: inline-flex;
}

.ehs-row__chevron svg {
	width: 18px;
	height: 18px;
}

.ehs-row--muted .ehs-row__title {
	color: var(--color-text-muted);
	font-weight: 600;
}

/* ---------------------------------------------------------------------
   Event header — compact photo band, not a 40% editorial hero. Enough to
   carry brand identity, then straight into information.
   --------------------------------------------------------------------- */

.ehs-event-header {
	position: relative;
	margin-bottom: var(--space-4);
	background: var(--color-surface);
}

.ehs-event-header__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.ehs-event-header__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Scrim so the title stays legible over any photograph. */
.ehs-event-header__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, var(--color-scrim) 55%, var(--color-bg) 100%);
}

.ehs-event-header__overlay {
	position: absolute;
	left: var(--space-4);
	right: var(--space-4);
	bottom: var(--space-3);
	z-index: 1;
}

.ehs-event-header__eyebrow {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-text-muted);
	margin: 0 0 4px;
}

.ehs-event-header__title {
	font-size: 26px;
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.02em;
}

.ehs-event-header__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	font-size: 13px;
	color: var(--color-text-muted);
	padding: var(--space-3) var(--space-4) 0;
	margin: 0;
}

.ehs-event-header__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ehs-event-header__subtitle {
	font-size: 14px;
	color: var(--color-text-muted);
	padding: var(--space-2) var(--space-4) var(--space-3);
	margin: 0;
}

/* No image available: fall back to a plain band rather than a broken frame.
   The band supplies its own gutter, so the meta and subtitle must drop theirs
   or the text ends up double-indented. */
.ehs-event-header--noimage {
	padding: var(--space-5) var(--space-4) var(--space-4);
	background: var(--color-surface);
}

.ehs-event-header--noimage .ehs-event-header__title {
	font-size: 24px;
}

.ehs-event-header--noimage .ehs-event-header__meta,
.ehs-event-header--noimage .ehs-event-header__subtitle {
	padding-left: 0;
	padding-right: 0;
}

.ehs-event-header--noimage .ehs-event-header__subtitle {
	padding-bottom: 0;
}

/* ---------------------------------------------------------------------
   Generic blocks and page content
   --------------------------------------------------------------------- */

.ehs-block {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-bottom: var(--space-3);
}

.ehs-block h2 {
	font-size: 15px;
	margin-bottom: var(--space-2);
}

.ehs-block p {
	font-size: 14px;
	color: var(--color-text-muted);
}

.ehs-block p:last-child {
	margin-bottom: 0;
}

.ehs-page__title {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: var(--space-4);
}

.ehs-page__content > h2 {
	font-size: 17px;
	margin-top: var(--space-6);
	margin-bottom: var(--space-2);
}

.ehs-page__content > h2:first-child {
	margin-top: 0;
}

.ehs-page__content > p {
	font-size: 14px;
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

/* A note about build state, not event content. Deliberately looks like
   scaffolding so it is never mistaken for something an attendee should read. */
.ehs-placeholder-note {
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	font-size: 13px;
	color: var(--color-text-muted);
	margin-top: var(--space-4);
}

.ehs-placeholder-note strong {
	color: var(--color-text);
}

/* ---------------------------------------------------------------------
   Explore / hub home
   --------------------------------------------------------------------- */

.ehs-hero {
	padding: var(--space-2) 0 var(--space-5);
}

.ehs-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 11px;
	font-weight: 700;
	color: var(--color-text-muted);
	margin: 0 0 var(--space-2);
}

.ehs-hero__title {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-2);
}

.ehs-hero__subtitle {
	font-size: 15px;
	color: var(--color-text-muted);
	margin: 0;
}

/* ---------------------------------------------------------------------
   Fixed bottom nav
   --------------------------------------------------------------------- */

.ehs-bottom-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	display: flex;
	max-width: 480px;
	margin: 0 auto;
	background: var(--color-bg);
	border-top: 1px solid var(--color-border);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 900px) {
	.ehs-bottom-nav {
		max-width: 720px;
	}
}

.ehs-bottom-nav__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	color: var(--color-text-muted);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: var(--space-2) 0;
}

.ehs-bottom-nav__item:hover,
.ehs-bottom-nav__item:focus-visible {
	color: var(--color-text);
}

.ehs-bottom-nav__item.is-active {
	color: var(--color-text);
}

.ehs-bottom-nav__icon {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ehs-bottom-nav__icon svg {
	width: 22px;
	height: 22px;
}

.ehs-bottom-nav__label {
	line-height: 1;
}

/* ---------------------------------------------------------------------
   Live: the tab that appears by itself, and the card that goes with it

   Both are printed hidden and revealed by the clock in the browser. Nothing
   here may depend on a server-side decision: this page is served from a ten
   minute page cache, and the person who matters most on race morning is
   already sitting on it when the gun goes.
   --------------------------------------------------------------------- */

.ehs-bottom-nav__item--live {
	position: relative;
}

.ehs-bottom-nav__item--live .ehs-live-dot {
	position: absolute;
	top: 8px;
	left: 50%;
	margin-left: 8px;
}

.ehs-live-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-live);
	flex: 0 0 auto;
	animation: ehs-live-pulse 1.8s ease-in-out infinite;
}

@keyframes ehs-live-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.45; transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
	.ehs-live-dot {
		animation: none;
	}
}

.ehs-watch-live__card {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--color-live);
	color: #FFFFFF;
}

.ehs-watch-live__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	min-width: 0;
}

.ehs-watch-live__kicker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.9;
}

/* On the red card the dot has to read against red, not as red. */
.ehs-watch-live__kicker .ehs-live-dot {
	background: #FFFFFF;
}

.ehs-watch-live__title {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
}

.ehs-watch-live__meta {
	font-size: 13px;
	opacity: 0.9;
}

.ehs-watch-live__card .ehs-row__chevron {
	color: #FFFFFF;
}

/* ---------------------------------------------------------------------
   Desktop niceties (phone remains the target)
   --------------------------------------------------------------------- */

@media (min-width: 900px) {
	/* The area outside the phone-width shell. Slightly off the page colour in
	   both themes so the shell reads as a device rather than filling the
	   window. */
	body {
		background: var(--color-surface);
	}

	.ehs-app {
		box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
		background: var(--color-bg);
	}
}

/* ---------------------------------------------------------------------
   Light/dark toggle

   Shows the theme you would switch TO, not the one you are in, which is
   the convention people already read correctly on phones. Both icons are
   in the DOM and CSS picks one, so switching needs no re-render.
   --------------------------------------------------------------------- */

.ehs-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: transparent;
	color: var(--color-text-muted);
	cursor: pointer;
	flex: 0 0 auto;
}

.ehs-theme-toggle:hover,
.ehs-theme-toggle:focus-visible {
	color: var(--color-text);
	border-color: var(--color-border-strong);
}

.ehs-theme-toggle svg {
	width: 18px;
	height: 18px;
}

.ehs-theme-toggle__icon {
	display: none;
	line-height: 0;
}

/* Default (light, or device-light): offer dark, so show the moon. */
.ehs-theme-toggle__icon--moon {
	display: inline-flex;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .ehs-theme-toggle__icon--moon {
		display: none;
	}
	:root:not([data-theme="light"]) .ehs-theme-toggle__icon--sun {
		display: inline-flex;
	}
}

:root[data-theme="dark"] .ehs-theme-toggle__icon--moon {
	display: none;
}

:root[data-theme="dark"] .ehs-theme-toggle__icon--sun {
	display: inline-flex;
}

:root[data-theme="light"] .ehs-theme-toggle__icon--sun {
	display: none;
}

:root[data-theme="light"] .ehs-theme-toggle__icon--moon {
	display: inline-flex;
}

/* ---------------------------------------------------------------------
   Weekend picker

   The row of weekends above a results board, on the events that span
   several ChronoTrack events. Leadville is the only one today, with seven
   visible rows, which is well past what fits across a 390px phone, so the
   row scrolls sideways rather than wrapping into three stacked lines that
   push the board off the first screen.

   Plain links, so this works with JavaScript off and each weekend is its
   own cacheable URL. Tokens only, no new colours: the current pill borrows
   the same fill the primary button uses.
   --------------------------------------------------------------------- */

.ehs-pills {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-2);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* Hide the scrollbar. The pills cut off mid-shape at the edge, which is
	   the affordance; a bar under them costs a row of height on a phone. */
	scrollbar-width: none;
	margin-bottom: var(--space-3);
	/* Pull out to the shell edges and pad back in, so the first and last
	   pills sit on the column gutter but scroll edge to edge. */
	margin-left: calc(var(--space-4) * -1);
	margin-right: calc(var(--space-4) * -1);
	padding-left: var(--space-4);
	padding-right: var(--space-4);
}

.ehs-pills::-webkit-scrollbar {
	display: none;
}

.ehs-pill {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 12px;
	border: 1.5px solid var(--color-border-strong);
	border-radius: 999px;
	background: var(--color-bg);
	color: var(--color-text);
	text-decoration: none;
	white-space: nowrap;
}

.ehs-pill.is-current {
	background: var(--color-button);
	color: var(--color-button-text);
	border-color: var(--color-button);
}

.ehs-pill:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Plugin overrides

   Rules that reach into markup the theme does not own. Kept here, scoped to
   a theme wrapper, so the plugin's own stylesheet stays the plugin's.

   PROVISIONAL: the race tab strip inside a results board is the plugin's
   markup, and Sea Otter feeds it 25 tabs. Keep these two rules only if the
   390px check shows the strip overflowing the viewport; drop them if it
   already behaves.
   --------------------------------------------------------------------- */

.ehs-results .ltf-ct-results__tabs,
.ehs-evlive .ltf-ct-results__tabs {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}

.ehs-results .ltf-ct-results__tabs::-webkit-scrollbar,
.ehs-evlive .ltf-ct-results__tabs::-webkit-scrollbar {
	display: none;
}

.ehs-results .ltf-ct-results__tab,
.ehs-evlive .ltf-ct-results__tab {
	flex: 0 0 auto;
}

/* WordPress ships this class but a theme has to define it. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------
 * Event live module ([ctlive_event_live] from ltf-ctlive, 0.11.0).
 * The plugin is neutral by design; the hub maps its custom properties to
 * the shell tokens so it follows light and dark with everything else.
 * ------------------------------------------------------------------ */
.ehs-evlive .ltf-ct-evlive {
	--ltf-evlive-surface: var(--color-surface);
	--ltf-evlive-text: var(--color-text);
	--ltf-evlive-muted: var(--color-text-muted);
	--ltf-evlive-live: var(--color-live);
	--ltf-evlive-radius: 14px;
}
.ehs-evlive:has(> .ltf-ct-evlive[hidden]) { display: none; }
.ehs-evlive .ltf-ct-evlive__heading { color: var(--color-text); }

/* Sibling event link (Big Sugar <-> Little Sugar), 0.12.0. */
.ehs-sibling__note {
	margin: 10px 2px 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--color-text-muted);
}

/* Instagram block on the event home (ltf-ctlive [ctlive_instagram]), 0.13.0.
   Follow and Load More use the app's filled button; the header text follows
   the theme so it reads in light and dark. */
.ehs-instagram .ltf-ct-ig {
	--ltf-ig-follow-bg: var(--color-button);
	--ltf-ig-follow-text: var(--color-button-text);
	--ltf-ig-button-bg: var(--color-surface);
	--ltf-ig-button-text: var(--color-text);
	color: var(--color-text);
}
.ehs-instagram .ltf-ct-ig__tile { border-radius: 6px; background: var(--color-surface); }
.ehs-instagram .ltf-ct-ig__bio { color: var(--color-text-muted); opacity: 1; }
.ehs-instagram .ltf-ct-ig__ring .ltf-ct-ig__avatar { border-color: var(--color-bg); }

/* Schedule page (0.14.0): Up next sits above the calendar; the calendar gets
   its own heading with the same section spacing so the two read as summary
   then detail. */
.ehs-schedule__title { margin-top: 8px; }
.ehs-evlive .ltf-ct-evlive { --ltf-evlive-button: var(--color-button); --ltf-evlive-button-text: var(--color-button-text); }