/* Loyalty Portal front-end styles - deliberately light-touch so it layers
   cleanly on top of whatever theme/Elementor page it's placed on. Swap the
   variables below to match final branding. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap');

:root {
	/* EBCG rebrand, third pass - replaces the first two passes' guesses
	   (ebcg.com's own site colors, then a hand-tuned navy/indigo/yellow
	   system) with Kat's actual design manual: exact hex values, an
	   explicit "gold = value/action/recognition, navy = structure, white =
	   content" usage rule, and a warmer, more restrained executive-club
	   feel rather than a SaaS-dashboard one. Variable names below still say
	   "gold"/"dark"/"cream" from the very first Levera version - kept as-is
	   rather than renamed sitewide (every template class name would need
	   touching for zero visual difference), but the values now ARE exactly
	   the manual's Gold/Deep Navy/Champagne. --llp-yellow from the previous
	   pass is gone entirely: the manual's single gold accent already covers
	   both "value" (credit amounts, badges) and "action" (links, CTAs)
	   roles at once, so the earlier blue/yellow split was solving a problem
	   that doesn't exist once gold is an actual gold. */
	--llp-cream: #F5EBD2;              /* champagne - tags/badges/selected filters/subtle highlights */
	--llp-dark: #071C36;                /* EBCG deep navy - structure, headings, primary buttons */
	--llp-navy-2: #123B68;              /* secondary navy - hover states, secondary panels, gradients */
	--llp-gold: #D6A52E;                /* EBCG gold - value/action/recognition ONLY, not a background */
	--llp-gold-ink: #9A7217;            /* darker gold, for gold text/labels that need to read on white */
	--llp-border: #E5E7EB;
	/* Sidebar matches the manual's own worked example - deep navy panel,
	   #163A62 active-item fill, gold left indicator. */
	--llp-sidebar: #071C36;
	--llp-sidebar-active: #163A62;
	/* Warm white main canvas (manual's "Background") - notably not pure
	   white, which is what pushes the whole app toward "premium" instead of
	   "generic SaaS." --llp-cream (champagne) stays reserved for small
	   accents (tags, badges, highlights), never a full-page background. */
	--llp-canvas: #FAFAF8;
	--llp-heading: #10233A;
	--llp-body: #657284;
	--llp-muted: #98A1AC;
	/* Kept as an alias of --llp-heading - many existing rules reference
	   --llp-ink for "text inside the app shell"; same color, one fewer
	   value to keep in sync. */
	--llp-ink: #10233A;
	--llp-dark-tint-05: rgba(7,28,54,0.05);
	--llp-dark-tint-12: rgba(7,28,54,0.12);
	--llp-success: #2F7D5B;
	--llp-warning: #C98A22;
	--llp-error: #B94A48;
}

/* Widened from 900px - on a wide viewport the content column was leaving a
   noticeably empty right-hand gutter next to the sidebar (flagged directly
   in the manual's layout section). 1200px lets the credit-row/conference
   grid breathe into an extra column instead of just adding side-margin. */
.llp-settings-form,
.llp-dashboard {
	max-width: 1200px;
	margin: 0 auto;
	font-family: inherit;
}
/* In bloom mode (see LLP_Auth::nav_style()) the classic sidebar's 264px is
   gone, but this 1200px cap - tuned for when it was still there - stayed
   the same, so the page just floated in a big empty gutter on both sides
   (Kat: "very empty"). :has(.llp-quick-nav) targets bloom mode positively
   via its own distinctive wrapper - NOT :not(:has(.llp-app-sidebar)),
   which would misfire: .llp-app-sidebar's real markup is now ALSO present
   in bloom mode's DOM (just off-canvas inside the "peek at the full menu"
   overlay - see app-quick-nav.php), so its mere presence no longer means
   "classic sidebar mode." 1600px was Kat's pick among 3 mocked-up widths. */
.llp-app-shell:has(.llp-quick-nav) .llp-dashboard,
.llp-app-shell:has(.llp-quick-nav) .llp-settings-form {
	max-width: 1600px;
}

/* Upcoming Events (List/Calendar) - Kat, v0.46.2: "it does not fill the page
   nicely" - the 1200px/1600px caps above are tuned for the Dashboard's
   card-grid layout, but this page's 7-column calendar grid just stretches
   to fill whatever width it's given, so on a wide monitor it was sitting in
   the same 1200-1600px column and leaving a big empty gutter on both sides
   (measured live: 160px each side at a 1920px viewport, in the default
   "bloom" nav style). llp-conf-page carries higher specificity than the
   shared rules above (two classes, or three with :has()) so it wins in
   both classic and bloom nav modes without touching the actual Dashboard
   or Settings pages, which Kat already signed off on at 1200/1600. */
.llp-app-shell .llp-conf-page.llp-dashboard,
.llp-app-shell:has(.llp-quick-nav) .llp-conf-page.llp-dashboard {
	max-width: 1800px;
}

/* Split-screen auth layout: form on the left, branding/photo panel on the right.
   Wraps whatever the theme/Elementor page already provides - this deliberately
   breaks out of the theme's normal content width so it can go edge-to-edge, and
   fills the full browser window (see the .llp-auth-fullscreen body rules below,
   which strip away the theme's header/title/footer on these two pages only). */
.llp-auth-page {
	display: grid;
	grid-template-columns: 40% 60%;
	min-height: 100vh;
	margin: 0 calc(50% - 50vw); /* full-bleed regardless of theme content width */
}
.llp-auth-page.llp-auth-page-wide {
	grid-template-columns: 45% 55%;
}
@media (max-width: 900px) {
	.llp-auth-page { grid-template-columns: 1fr; min-height: 100vh; }
	.llp-auth-right { display: none; } /* keep it simple on small screens */
}

/* Hide the theme's chrome: added to <body> automatically (see LLP_Shortcodes::
   maybe_add_fullscreen_class) on every portal page - Log In, Register,
   Dashboard, My Profile. Hides the theme's header, the page title WordPress
   prints automatically, and the footer, and removes their wrapper's padding,
   so the plugin's own layout (the auth split-screen, or the app shell/sidebar
   further below) is all that's visible - no "My Blog" menu, no WooCommerce
   Shop/Cart links, nothing that doesn't belong in a private members' portal.
   Selectors cover both block themes (e.g. Twenty Twenty-Five) and common
   classic-theme markup; harmless no-ops on themes that don't use them. */
body.llp-hide-theme-chrome {
	margin: 0;
}
body.llp-hide-theme-chrome .wp-site-blocks > header,
body.llp-hide-theme-chrome .wp-site-blocks > footer,
body.llp-hide-theme-chrome header.wp-block-template-part,
body.llp-hide-theme-chrome footer.wp-block-template-part,
body.llp-hide-theme-chrome header#masthead,
body.llp-hide-theme-chrome footer#colophon,
body.llp-hide-theme-chrome h1.wp-block-post-title,
body.llp-hide-theme-chrome .entry-title,
body.llp-hide-theme-chrome .entry-header,
body.llp-hide-theme-chrome .page-header {
	display: none !important;
}
body.llp-hide-theme-chrome .wp-site-blocks,
body.llp-hide-theme-chrome .wp-site-blocks > main,
body.llp-hide-theme-chrome .entry-content,
body.llp-hide-theme-chrome .wp-block-post-content,
body.llp-hide-theme-chrome #content,
body.llp-hide-theme-chrome #primary,
body.llp-hide-theme-chrome main {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
}

/* Log In / Register additionally go true full-screen (position: fixed,
   filling the entire window) - they're a single form with nothing else to
   navigate to, so there's no reason not to use the whole screen for them.
   Belt-and-braces: some themes nest the page content inside several layers of
   width-constrained wrapper divs (block-theme "Group" blocks, container
   divs, etc.), and the negative-margin bleed trick on .llp-auth-page can't
   reach through all of them. Pinning the panel directly to the viewport with
   `fixed` sidesteps that entirely - it no longer matters how many wrappers it
   sits inside, it always covers the full window on any screen size. */
body.llp-auth-fullscreen {
	overflow: hidden; /* the fixed panel below handles its own scrolling */
}
body.llp-auth-fullscreen .llp-auth-page {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	margin: 0;
	z-index: 9999;
}

/* App shell: Dashboard and My Profile use this instead - a dark sidebar for
   navigation (logo, Dashboard, My Profile, Log out) alongside the scrollable
   content area, rather than a single full-screen form. Plain flexbox rather
   than position:fixed, so the sidebar naturally stretches to match however
   tall the page's content is, and long pages just scroll normally.
   fullscreen-reparent.php moves this to be a direct child of <body> (same
   containing-block problem, and same fix, as the auth panel above) - once
   there, the negative-margin bleed trick is unnecessary and would actually
   introduce a slight horizontal scrollbar (viewport width vs body's content
   width differ by the scrollbar's own size), so it's zeroed out below. */
.llp-app-shell {
	display: flex;
	align-items: stretch;
	min-height: 100vh;
	margin: 0 calc(50% - 50vw); /* fallback full-bleed if JS reparenting can't run */
	/* Clean sans throughout the app shell (Dashboard/News/My Profile/People/
	   Team) for the fresher v4 look - scoped here rather than on body so the
	   Log In/Register pages keep inheriting the theme's own font, same as
	   before. */
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--llp-body);
}
body.llp-hide-theme-chrome .llp-app-shell {
	margin: 0;
}
/* Manrope for headings/titles/big numbers, Inter everywhere else - the
   manual calls for a "modern grotesk" on headings specifically so the page
   feels considered rather than every weight of the same font doing every
   job. Confident, not playful: -0.01em tracking reads tighter/more composed
   than Inter's own default heading metrics. */
.llp-app-shell h1, .llp-app-shell h2, .llp-app-shell h3,
.llp-welcome-name, .llp-card-title, .llp-page-title,
.llp-credit-amount, .llp-rank-gauge-value,
.llp-wl-rank-gauge-tier, .llp-brand-lockup .llp-brand-name,
.llp-wl-detail-body h3, .llp-spk-detail-header h3 {
	font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	letter-spacing: -0.01em;
}
.llp-app-sidebar {
	flex: 0 0 264px;
	background: var(--llp-sidebar);
	padding: 36px 24px 28px;
	position: relative; /* positioning context for .llp-sidebar-arc-clip */
}
/* Wraps just the decorative arc (below) so its intentional left:-60px bleed
   still gets clipped to the sidebar's own box, WITHOUT .llp-app-sidebar
   itself carrying overflow:hidden - that used to sit directly on
   .llp-app-sidebar, and silently broke .llp-app-sidebar-inner's
   position:sticky just below (Kat: "if the side menu is set, My Profile
   and Log out move as you scroll - it should be static"). Per the CSS
   Position spec, a sticky element sticks relative to the NEAREST ANCESTOR
   with a scroll mechanism, and overflow:hidden counts as one even though
   nothing there ever actually scrolls - .llp-app-sidebar is stretched tall
   (flex align-items:stretch, matching whatever height .llp-app-main's page
   content needs) so once it became that ancestor, "sticky" was computing
   relative to a box hundreds of pixels tall instead of the viewport, i.e.
   not sticking at all. Isolating the clip to a sibling of
   .llp-app-sidebar-inner instead of their shared parent keeps the sticky
   descendant's ancestor search from ever finding it again. */
.llp-sidebar-arc-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.llp-app-sidebar-inner {
	position: sticky;
	top: 32px;
	display: flex;
	flex-direction: column;
	/* Tall enough to reach the bottom of the viewport (minus the sticky
	   offset above and the sidebar's own vertical padding) so the "Account"
	   section below can be pinned to the bottom via margin-top:auto rather
	   than just trailing wherever the nav content happens to end. */
	min-height: calc(100vh - 64px);
}
.llp-app-main {
	flex: 1;
	min-width: 0;
	padding: 40px 48px;
	background: var(--llp-canvas);
}
@media (max-width: 900px) {
	.llp-app-shell { flex-direction: column; }
	.llp-app-sidebar { flex: 0 0 auto; }
	/* The sidebar stacks above the page content here instead of sitting
	   beside it, so the bottom-pinning above (min-height: calc(100vh - 64px)
	   + margin-top: auto on the last section) would just force a viewport's
	   worth of empty space before "Account" - drop both and let the nav's
	   sections stack naturally, same as before that was added. */
	.llp-app-sidebar-inner { position: static; min-height: 0; }
	.llp-app-nav { flex: none; }
	.llp-nav-section:last-child { margin-top: 0; }
	.llp-app-main { padding: 32px 24px; }
}

/* Pop-out "flower bloom" quick-nav (templates/partials/app-quick-nav.php) -
   the alternative to the sidebar above, picked per-member in My Profile
   (see LLP_Auth::nav_style()). Fixed to the viewport (not the page), so it
   stays put on scroll and sits above page content rather than taking up
   .llp-app-shell layout space - app-sidebar.php simply doesn't render the
   <aside> at all when this is in use, so .llp-app-main naturally fills the
   width that would otherwise be reserved for it. */
.llp-quick-nav-scrim {
	position: fixed; inset: 0; background: rgba(7,28,54,0.25);
	opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 39;
}
.llp-quick-nav.is-open .llp-quick-nav-scrim { opacity: 1; pointer-events: auto; }

.llp-quick-nav-bud {
	position: fixed; left: 28px; bottom: 28px; z-index: 41; width: 58px; height: 58px; border-radius: 50%;
	background: var(--llp-dark); border: 2px solid var(--llp-gold); cursor: pointer; padding: 0;
	display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(7,28,54,0.35);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.llp-quick-nav-bud:hover { transform: scale(1.05); }
.llp-quick-nav-bud svg { width: 22px; height: 22px; color: var(--llp-gold); }
.llp-quick-nav.is-open .llp-quick-nav-bud { opacity: 0; pointer-events: none; transform: scale(0.7); }

/* Sized to the real artwork's own 248.23:219.07 aspect ratio, so the bloom
   never stretches the logo. transform-origin is the bottom-left corner
   (where the closed bud sits) so it visibly grows out from the bud rather
   than from its own center.

   opacity: 0 while closed - Kat: "the logo is showing from under the
   button". Shrunk down (scale(0.135)) the bloom's own box is ~57x50px,
   about the same footprint as the round 58x58 bud that sits on top of it
   (z-index 41 vs this layer's 40), but the flower artwork itself isn't a
   circle, so without this its opaque corners poked out past the bud's
   round edge instead of being cleanly covered. Opacity was the only thing
   missing - already just pointer-events:none, never actually hidden. */
.llp-quick-nav-bloom {
	position: fixed; left: 28px; bottom: 28px; z-index: 40;
	width: 420px; height: 371px;
	transform-origin: 0% 100%;
	transform: scale(0.135);
	opacity: 0;
	transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.4, 1), opacity 0.18s ease;
	pointer-events: none;
}
.llp-quick-nav.is-open .llp-quick-nav-bloom { transform: scale(1); opacity: 1; pointer-events: auto; }
.llp-quick-nav-bloom .llp-nav-flower-svg {
	position: absolute; inset: 0; width: 100%; height: 100%; display: block;
	filter: drop-shadow(0 14px 30px rgba(7,28,54,0.28));
}

.llp-quick-nav-petal {
	position: absolute; width: 64px; height: 64px; margin-left: -32px; margin-top: -32px;
	border-radius: 50%; background: var(--llp-dark); border: 2px solid var(--llp-gold);
	display: flex; align-items: center; justify-content: center; text-decoration: none;
	box-shadow: 0 8px 20px rgba(7,28,54,0.3); opacity: 0; transform: scale(0.3);
	transition: opacity 0.22s ease, transform 0.22s ease;
}
.llp-quick-nav.is-open .llp-quick-nav-petal { opacity: 1; transform: scale(1); }
.llp-quick-nav-petal-icon { display: flex; }
.llp-quick-nav-petal-icon svg { width: 22px; height: 22px; color: var(--llp-gold); stroke-width: 1.8; }
.llp-quick-nav-petal.is-locked { background: var(--llp-gold); border-color: var(--llp-dark); }
.llp-quick-nav-petal.is-locked .llp-quick-nav-petal-icon svg { color: var(--llp-dark); }
.llp-quick-nav-petal.is-active { box-shadow: 0 0 0 3px rgba(214,165,46,0.45), 0 8px 20px rgba(7,28,54,0.3); }
/* Staggered bloom timing per petal, closest-to-the-bud first - the order
   here follows this partial's own DOM order (Dashboard, Watch & Learn, My
   Profile, Upcoming Events, Speaker Spotlight, News). */
.llp-quick-nav-petal:nth-of-type(1) { transition-delay: 0s; }
.llp-quick-nav-petal:nth-of-type(2) { transition-delay: 0.03s; }
.llp-quick-nav-petal:nth-of-type(3) { transition-delay: 0.08s; }
.llp-quick-nav-petal:nth-of-type(4) { transition-delay: 0.13s; }
.llp-quick-nav-petal:nth-of-type(5) { transition-delay: 0.08s; }
.llp-quick-nav-petal:nth-of-type(6) { transition-delay: 0.03s; }

.llp-quick-nav-petal-label {
	position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
	background: var(--llp-dark); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 9px;
	border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.llp-quick-nav-petal:hover .llp-quick-nav-petal-label,
.llp-quick-nav-petal:focus-visible .llp-quick-nav-petal-label { opacity: 1; }

@media (max-width: 480px) {
	/* Smaller viewport, smaller bloom - same aspect ratio, just scaled down
	   so it comfortably fits without the outer petals running off-screen. */
	.llp-quick-nav-bloom { width: 300px; height: 265px; }
	.llp-quick-nav-petal { width: 52px; height: 52px; margin-left: -26px; margin-top: -26px; }
}

/* "Peek at the full menu" - a slim always-there tab on the left edge that
   slides the real classic sidebar (partials/app-sidebar-classic.php) in
   over the page as a temporary overlay, for anyone in bloom mode who wants
   the full menu (People/Post News included) without switching nav styles
   in My Profile. Kat picked this over two other concepts (an extra petal in
   the bloom itself, and an always-visible icon-only strip) precisely
   because it stays out of the way until tapped. z-indexes sit above the
   bloom's own (39-41, see .llp-quick-nav-scrim/-bud/-bloom above) so the
   peek overlay always wins if both were ever open at once, though
   app-quick-nav.php's script keeps that from actually happening. */
/* Hidden until the bloom itself is open (or the peek sidebar it controls is
   already open) - see app-quick-nav.php's updatePeekTabVisibility(). Kat's
   call: showing this arrow alongside the collapsed bud gave a member two
   visible nav entry points before they'd touched either one, which undercut
   the "small button that blooms open" idea the bud is built around - so this
   only reveals itself once the flower has actually bloomed. */
.llp-quick-nav-peek-tab {
	position: fixed; left: 0; top: 50%; transform: translateY(-50%);
	width: 26px; height: 72px; z-index: 45;
	background: var(--llp-dark); border: 2px solid var(--llp-gold); border-left: none; border-radius: 0 10px 10px 0;
	display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
	box-shadow: 4px 0 14px rgba(7,28,54,0.25); transition: transform 0.2s ease, opacity 0.2s ease;
	opacity: 0; pointer-events: none;
}
.llp-quick-nav-peek-tab.is-visible { opacity: 1; pointer-events: auto; }
.llp-quick-nav-peek-tab:hover { transform: translateY(-50%) scale(1.06); }
.llp-quick-nav-peek-tab svg { width: 16px; height: 16px; color: var(--llp-gold); }
.llp-quick-nav-peek-scrim {
	position: fixed; inset: 0; z-index: 43; background: rgba(7,28,54,0.35);
	opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.llp-quick-nav-peek-scrim.is-open { opacity: 1; pointer-events: auto; }
.llp-quick-nav-peek-sidebar {
	position: fixed; left: 0; top: 0; height: 100vh; z-index: 44;
	transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.34, 1.1, 0.4, 1);
	box-shadow: 8px 0 30px rgba(7,28,54,0.4); overflow-y: auto;
}
.llp-quick-nav-peek-sidebar.is-open { transform: translateX(0); }
/* The real .llp-app-sidebar is normally a flex child sized by its parent
   .llp-app-shell - as a fixed-position overlay here it has no such parent,
   so it needs its own explicit height. .llp-app-sidebar's own box-sizing is
   the default content-box (see the base rule, which never needed
   border-box before - it was never given an explicit height until now), so
   an un-adjusted height:100% here would mean "100% of the parent, plus
   this element's own 64px of vertical padding on top" - overflowing its
   already-exact-100vh parent by exactly that 64px and triggering a
   permanent scrollbar on the overlay even though nothing here actually
   needs to scroll (Kat: "the ugly line to move up and down"). border-box
   makes height:100% mean the full rendered box, padding included. */
/* overflow-y: auto here is this overlay's own explicit scroll behavior (the
   base rule no longer sets overflow on .llp-app-sidebar itself - see
   .llp-sidebar-arc-clip above) so a short viewport can still scroll to
   reach Log out rather than silently losing it past the bottom edge -
   overflow-x stays hidden so the arc itself never pokes out the side. */
.llp-quick-nav-peek-sidebar .llp-app-sidebar { height: 100%; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; }
/* .llp-app-sidebar-inner's own position:sticky + min-height:calc(100vh-64px)
   (see the base rule) is a "keep pace with the page as it scrolls" trick
   for the normal in-flow sidebar - irrelevant here, since this overlay is
   already pinned to the viewport and .llp-app-sidebar above is already an
   exact 100% match for it. Swapped for a plain height:100% so this can
   never drift out of sync with its own already-exact parent via a second,
   independent vh calculation - same fix already used for the <900px
   responsive layout below, just height:100% here instead of static flow. */
.llp-quick-nav-peek-sidebar .llp-app-sidebar-inner {
	position: static;
	min-height: 0;
	height: 100%;
}

/* Brand lockup, but readable on the dark sidebar instead of the cream panel -
   small uppercase treatment rather than the larger auth-page lockup, since
   the sidebar is a much narrower column. Scoped to .llp-app-sidebar so the
   auth pages' own brand lockup (still the larger, non-uppercase style) is
   untouched. */
.llp-app-sidebar .llp-brand-lockup { margin-bottom: 40px; }
/* Same specificity (2 class selectors) as .llp-brand-lockup .llp-brand-name
   below, which sets color: var(--llp-dark) for the auth-page lockup - with
   --llp-dark and --llp-sidebar now the same navy, a source-order tie here
   made this text invisible (navy on navy). Matching the 3-class selector
   used by the very next rule (for size/weight) instead of a 2-class one
   fixes the tie for good rather than depending on which rule happens to be
   declared later in the file. */
.llp-on-dark .llp-brand-lockup .llp-brand-name { color: var(--llp-cream); }
.llp-on-dark .llp-brand-lockup .llp-brand-name {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.35;
}
.llp-on-dark .llp-brand-tagline { color: rgba(245,235,210,0.65); }
.llp-on-dark .llp-brand-lockup .llp-brand-tagline {
	font-size: 11px;
	letter-spacing: 0.02em;
	color: rgba(245,235,210,0.55);
	margin-top: 6px;
}
.llp-on-dark .llp-brand-bar { background: var(--llp-gold); }

.llp-app-nav {
	margin-top: 48px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	flex: 1; /* fills the rest of .llp-app-sidebar-inner so the last section can be pinned to the bottom below */
}
/* Small labeled groups (Content / Admin / Account) rather than one long flat
   list of links - see templates/partials/app-sidebar.php's docblock. Each
   section's own links keep the original tight 2px stacking; the visual
   separation comes from the gap between .llp-nav-section blocks above.
   The last section is always "Account" (My Profile / Log out) regardless of
   whether "Admin" rendered before it, so pinning it to the bottom of the
   sidebar via :last-child + margin-top:auto - rather than just letting it
   trail after Admin - keeps sign-out/profile links in a stable, predictable
   spot instead of drifting depending on how many links are above them. */
.llp-nav-section { display: flex; flex-direction: column; gap: 2px; }
.llp-nav-section:last-child { margin-top: auto; }
.llp-nav-section-label {
	font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
	color: rgba(255,255,255,0.38); font-weight: 700; padding: 0 12px 6px;
}
.llp-app-nav-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-left: 2px solid transparent;
	border-radius: 10px;
	color: rgba(255,255,255,0.72);
	text-decoration: none;
	font-weight: 500;
	font-size: 13px;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.llp-app-nav-link:hover { background: rgba(18,59,104,0.45); color: #fff; }
/* Manual's own worked example for this exact block: solid #163A62 fill (not
   a translucent tint) + gold left rule for "you are here." */
.llp-app-nav-link.is-active {
	background: var(--llp-sidebar-active);
	border-left-color: var(--llp-gold);
	color: #fff;
	font-weight: 600;
}
/* Small feather-style icon in front of each nav link's label (see
   templates/partials/app-sidebar.php) - gold per the manual's sidebar spec,
   at reduced opacity so it reads as a considered accent rather than "every
   icon is gold" (the thing the manual explicitly warns against elsewhere -
   card/badge icons stay navy, this is the one place gold icons are called
   out by name). */
.llp-nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; display: inline-flex; color: var(--llp-gold); }
.llp-nav-icon svg { width: 16px; height: 16px; stroke-width: 1.6; }
.llp-app-nav-link.is-active .llp-nav-icon,
.llp-app-nav-link:hover .llp-nav-icon { opacity: 1; }

/* Faint decorative arc sitting low in the sidebar, behind the nav - purely
   ambient texture, not interactive, so it's marked aria-hidden in the
   markup and pointer-events are disabled here as a second guard. */
.llp-sidebar-arc { position: absolute; left: -60px; bottom: 90px; width: 220px; height: 220px; opacity: 0.14; pointer-events: none; }

/* The "buy your ticket" card that replaces the old fixed-threshold messaging
   on a member's Dashboard - one link per event they're interested in. */
.llp-ticket-card .llp-ticket-links {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.llp-auth-left {
	/* Warm-white canvas, not champagne - champagne is reserved for small
	   accents (tags/badges/highlights) per the manual, not a full-panel
	   background. */
	background: var(--llp-canvas);
	padding: 56px 48px;
	display: flex;
	flex-direction: column;
	/* v0.66.0 - was justify-content:center, which on a screen shorter than
	   the registration form pushed the top of the form above the panel's
	   scroll area, where nobody could scroll to it (two colleagues had to
	   zoom out to register). Centering via the inner block's auto margins
	   instead only centers when there's room to spare. */
	overflow-y: auto; /* so a long registration form scrolls within its own panel */
	max-height: 100vh;
	/* On a short viewport this panel still needs to scroll even after the
	   Event(s)-of-interest fix above shortened the form - Kat separately
	   flagged the raw OS scrollbar that showed up next to the flat dark
	   .llp-auth-right panel as looking "ugly". A thin, brand-colored bar
	   reads as designed rather than as a leftover default; Firefox gets the
	   same treatment via scrollbar-width/-color, WebKit/Chromium via the
	   pseudo-elements below. */
	scrollbar-width: thin;
	scrollbar-color: var(--llp-border) transparent;
}
.llp-auth-left::-webkit-scrollbar { width: 8px; }
.llp-auth-left::-webkit-scrollbar-track { background: transparent; }
.llp-auth-left::-webkit-scrollbar-thumb { background-color: var(--llp-border); border-radius: 999px; border: 2px solid var(--llp-canvas); }
.llp-auth-left::-webkit-scrollbar-thumb:hover { background-color: #CBD1DB; }
.llp-auth-left-inner { max-width: 400px; margin: auto; width: 100%; }

/* Date of Birth: Day + Month together, optional Year a little apart (v0.66.0). */
.llp-dob-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.llp-dob-date { display: flex; gap: 8px; flex: 1 1 220px; }
.llp-dob-date select { flex: 1 1 0; min-width: 0; }
.llp-dob-year { flex: 0 0 150px; width: 150px; }
.llp-email-to { border: 0; padding: 0; margin-left: 0; margin-right: 0; }
.llp-email-to legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.llp-email-to .llp-checkbox { display: flex; margin: 4px 0; }
.llp-email-to[hidden] { display: none; }

.llp-auth-right {
	position: relative;
	/* Navy -> secondary navy only, no gold stop - the manual is explicit
	   that gold shouldn't appear as a background/large fill, only as a
	   small accent, so a big gradient panel is exactly where it shouldn't
	   show up even faintly. */
	background: linear-gradient(160deg, var(--llp-dark) 0%, var(--llp-navy-2) 100%);
	background-size: cover;
	background-position: center;
}
.llp-auth-right.llp-has-photo { background-image: var(--llp-auth-photo); }
.llp-auth-right::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(7,28,54,0.55), rgba(7,28,54,0.05));
}

.llp-brand-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 48px; }
.llp-brand-lockup img { height: 44px; width: auto; }
.llp-brand-lockup .llp-brand-bar { width: 3px; height: 36px; background: var(--llp-gold); }
.llp-brand-lockup .llp-brand-name { font-size: 20px; font-weight: 700; color: var(--llp-dark); letter-spacing: 0.02em; }
.llp-brand-lockup .llp-brand-tagline { font-size: 12px; color: #657284; line-height: 1.3; }

.llp-auth-form h2 { font-size: 26px; margin-bottom: 24px; color: var(--llp-dark); }

/* Status badge for the "plain text, no form" auth screens - Check Your
   Email, Verify Email, the sent/expired branches of Forgot & Reset
   Password. Those used to be just an h2 and a couple of paragraphs, which
   read as unfinished next to the rest of the app's icon language (sidebar
   nav, reach-out card, settings). Reuses the exact navy+gold circle recipe
   already established by .llp-quick-nav-bud, so it reads as the same
   brand rather than a new one - see also .llp-check-tile below for the
   sibling small green success dot, distinct from this pattern - this is
   sized for a hero position above an h2, not inline. */
.llp-auth-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--llp-dark);
	border: 2px solid var(--llp-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	box-shadow: 0 8px 20px rgba(7,28,54,0.18);
}
.llp-auth-icon svg { width: 24px; height: 24px; color: var(--llp-gold); }
/* Same yellow used by .llp-notice-warning, for the "link expired/invalid"
   branches - a gleaming gold-on-navy badge reads as celebratory, wrong
   tone for "that link isn't valid". */
.llp-auth-icon.llp-auth-icon-warn {
	background: #fdf3e3;
	border-color: #f0dba8;
	box-shadow: none;
}
.llp-auth-icon.llp-auth-icon-warn svg { color: var(--llp-warning); }

.llp-confirm-page {
	max-width: 720px;
	margin: 0 auto;
	font-family: inherit;
}

.llp-field { margin-bottom: 22px; }
.llp-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #657284;
}
.llp-field input[type="text"],
.llp-field input[type="email"],
.llp-field input[type="password"],
.llp-field input[type="url"],
.llp-field input[type="tel"],
.llp-field input[type="number"],
.llp-field input[type="file"],
.llp-field select,
.llp-field textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--llp-border);
	border-radius: 10px;
	font-size: 16px;
	font-weight: 500;
	color: var(--llp-dark);
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}
/* News post / person-detail-style single-column forms sit inside a plain
   .llp-card, which has no width cap of its own - so at the wider bloom
   width, a one-line "Email" or "Job title" box was stretching out to
   1500px+. Textareas/selects/file pickers are left alone (a wide textarea
   is fine, arguably better); it's specifically the short single-line
   inputs that read as broken at full width. */
.llp-field input[type="text"],
.llp-field input[type="email"],
.llp-field input[type="password"],
.llp-field input[type="url"],
.llp-field input[type="tel"],
.llp-field input[type="number"] {
	max-width: 640px;
}
.llp-field input:focus,
.llp-field select:focus,
.llp-field textarea:focus {
	outline: none;
	border-color: var(--llp-dark);
	box-shadow: 0 0 0 3px var(--llp-dark-tint-12);
}
.llp-field input[disabled] { color: #657284; background: #fafaf7; }
.llp-field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .llp-field-grid-2 { grid-template-columns: 1fr; } }

.llp-checkbox-grid { border: none; padding: 0; margin-bottom: 16px; }
.llp-checkbox-grid legend { font-weight: 600; margin-bottom: 8px; }
/* Any plain native checkbox/radio in the plugin's own pages (most are
   custom-drawn tiles/chips elsewhere in this file, but a few plain ones
   remain, e.g. Registration's Notifications/Privacy Policy/Labels) picks up
   the gold accent instead of the browser/OS default blue, same reasoning as
   .llp-lb-mode-input below. Scoped to the plugin's own containers so this
   doesn't leak into the rest of the WordPress site. */
.llp-app-shell input[type="checkbox"], .llp-app-shell input[type="radio"],
.llp-auth-page input[type="checkbox"], .llp-auth-page input[type="radio"],
.llp-confirm-page input[type="checkbox"], .llp-confirm-page input[type="radio"] {
	accent-color: var(--llp-gold);
}
.llp-checkbox { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; margin-bottom: 8px; font-weight: normal; }
/* .llp-field label above is styled as a small uppercase eyebrow (for labels
   sitting above a text input), but a checkbox's label wraps its own input
   AND its sentence-case description text - it needs to look like normal
   body copy, not a field eyebrow, even when it's nested inside a .llp-field
   wrapper (Notifications, Privacy Policy consent, Labels). Needs the extra
   specificity of "label.llp-checkbox" to win over ".llp-field label" above. */
.llp-field label.llp-checkbox {
	text-transform: none;
	letter-spacing: normal;
	font-size: 15px;
	color: inherit;
	font-weight: 400;
	margin-bottom: 0;
}

/* Chip-style selectable cards for event interests (My Profile, Registration) -
   a long vertical checkbox list reads as "settings page"; two-column pill
   cards with a checkmark indicator read as an intentional, premium choice.
   Keeps a real, keyboard-operable checkbox input (just visually hidden) so
   nothing about how the form submits changes - only how it looks.
   This class already existed in the stylesheet but had never actually been
   wired into a template (Kat: "choosing event of interests looks
   horrible") - registration-form.php was still using the older plain
   .llp-checkbox-grid list (kept as the fieldset wrapper here too, for its
   border-reset/legend styling - only the row-of-checkboxes part inside it
   is now this chip grid instead). Fixed by switching its markup to this - which
   surfaced a second, previously-latent bug: .llp-chip is itself a <label>
   sitting inside .llp-field, and ".llp-field label" (0,1,1 specificity)
   outranks plain ".llp-chip" (0,1,0), so its display:block + uppercase
   eyebrow styling was winning and collapsing the chip into a stacked,
   shouty mess instead of the flex row it's built as. Same fix already
   applied to .llp-checkbox below for the exact same reason - just needed
   for .llp-chip too now that it's actually in use for the first time. */
.llp-field label.llp-chip {
	display: flex;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 500;
	margin-bottom: 0;
	color: var(--llp-dark);
}
.llp-chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media (max-width: 600px) { .llp-chip-grid { grid-template-columns: 1fr; } }
.llp-chip {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1.5px solid var(--llp-border);
	border-radius: 10px;
	padding: 14px 16px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.llp-chip:hover { border-color: #CBD1DB; }
.llp-chip-input { position: absolute; opacity: 0; width: 0; height: 0; }
.llp-chip-dot {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--llp-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: #fff;
	transition: background-color .15s ease, border-color .15s ease;
}
.llp-chip-dot::after { content: "\2713"; opacity: 0; transform: scale(0.6); transition: opacity .15s ease, transform .15s ease; }
.llp-chip-label { font-weight: 500; color: var(--llp-dark); }
.llp-chip:has( .llp-chip-input:checked ) { border-color: var(--llp-dark); background: var(--llp-dark-tint-05); }
.llp-chip:has( .llp-chip-input:checked ) .llp-chip-dot { background: var(--llp-dark); border-color: var(--llp-dark); }
.llp-chip:has( .llp-chip-input:checked ) .llp-chip-dot::after { opacity: 1; transform: scale(1); }
.llp-chip:has( .llp-chip-input:focus-visible ) { outline: 2px solid var(--llp-gold); outline-offset: 2px; }
/* "All" chip on Register's Event(s) of interest grid (see
   registration-form.php) - spans the full grid width and gets a dashed
   border so it visually reads as "select every chip below" rather than
   just one more category sitting in the grid. */
.llp-chip-all { grid-column: 1 / -1; border-style: dashed; }

.llp-btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 8px;
	border: none;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s cubic-bezier(.4,0,.2,1);
}
.llp-btn-primary { background: var(--llp-dark); color: #fff; }
.llp-btn-primary:hover { opacity: 0.92; color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(7,28,54,0.4); }
/* Secondary "Edit" action on view-mode cards (e.g. My Profile's Personal
   Information card) - the manual's own "Secondary" button spec: white/
   transparent fill, gold border, dark-gold text (not full-brightness gold,
   which is too low-contrast to read as text on white). */
.llp-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid var(--llp-gold);
	color: var(--llp-gold-ink);
	font-size: 12px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
}
.llp-btn-ghost:hover { border-color: var(--llp-gold-ink); background: var(--llp-cream); }
.llp-btn-ghost svg { width: 13px; height: 13px; }
.llp-form-footer { display: flex; justify-content: flex-end; margin-top: 8px; }

.llp-notice { padding: 14px 16px; border-radius: 6px; margin-bottom: 20px; }
.llp-notice-error { background: #fdecea; border: 1px solid #f5c2c0; color: var(--llp-error); }
.llp-notice-error ul { margin: 0; padding-left: 20px; }
.llp-notice-success { background: #eaf6ec; border: 1px solid #c3e6c8; color: var(--llp-success); }
.llp-notice-warning { background: #fdf3e3; border: 1px solid #f0dba8; color: var(--llp-warning); }

.llp-muted { color: #657284; font-size: 14px; }
.llp-bold { font-weight: 700; }
.llp-gold-link { color: var(--llp-gold); text-decoration: none; font-weight: 600; }
.llp-gold-link:hover { text-decoration: underline; }

/* Dashboard/My Profile page background is set directly on .llp-app-main
   above (var(--llp-canvas), near-white) - kept here only as a marker for
   where that decision lives, since previous versions of this file set it
   as a separate cream override at this point in the stylesheet. */

.llp-welcome-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 36px; gap: 16px; flex-wrap: wrap; }
.llp-welcome-header .llp-eyebrow { margin-bottom: 6px; }
.llp-welcome-name { font-size: 32px; font-weight: 700; margin: 0; color: var(--llp-ink); }
.llp-page-subtitle { margin: 8px 0 0; color: #657284; font-size: 15px; }
.llp-avatar-block { display: flex; align-items: center; gap: 12px; }
.llp-avatar-circle {
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--llp-dark); color: var(--llp-gold);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 15px; flex-shrink: 0;
	border: 1.5px solid var(--llp-gold);
}
/* A member's own uploaded photo, shown instead of .llp-avatar-circle
   wherever one's set (see LLP_Auth::profile_photo_url()) - same footprint
   so it drops into the same markup slot without any layout shift. */
.llp-avatar-photo {
	width: 44px; height: 44px; border-radius: 50%;
	object-fit: cover; flex-shrink: 0; display: block;
}
/* My Profile's photo upload row, above the name fields on the Personal
   Information card. */
.llp-photo-field { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; }
.llp-photo-field .llp-avatar-circle,
.llp-photo-field .llp-avatar-photo { flex-shrink: 0; }

/* Generic premium card: soft shadow instead of a hard border, more interior
   air than the earlier flat/bordered boxes - this one visual change is most
   of what makes the whole portal read as "expensive" rather than a stock
   admin panel. Section headers inside a card (icon + title) use
   .llp-card-header/.llp-card-icon/.llp-card-title below. */
/* Near-zero-shadow + hairline border + hover-elevation reads closer to a
   premium SaaS dashboard than the earlier soft-shadow-only cards. */
.llp-card {
	background: #fff;
	border-radius: 12px;
	border: 1px solid #E5E7EB;
	box-shadow: 0 4px 16px rgba(7,28,54,0.06);
	padding: 32px;
	margin-bottom: 32px;
}
.llp-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }

/* Filter bar (People directory) - a compact row rather than the full
   .llp-field treatment used on My Profile, since these are quick narrow-it-
   down controls, not a form someone fills in carefully. */
.llp-filter-card { padding: 20px 24px; }
.llp-filter-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.llp-filter-form input[type="search"],
.llp-filter-form select {
	padding: 10px 14px;
	border: 1px solid var(--llp-border);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--llp-dark);
	box-sizing: border-box;
}
.llp-filter-form input[type="search"] { flex: 1 1 220px; min-width: 200px; }
.llp-filter-form input:focus,
.llp-filter-form select:focus {
	outline: none;
	border-color: var(--llp-dark);
	box-shadow: 0 0 0 3px var(--llp-dark-tint-12);
}
.llp-filter-form .llp-btn { padding: 10px 20px; }

/* Pagination footer - shown under any filterable list. */
.llp-pagination { display: flex; justify-content: space-between; align-items: center; margin: 20px 0 8px; }
.llp-card-icon {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--llp-cream);
	color: var(--llp-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}
.llp-card-icon svg { width: 18px; height: 18px; }
.llp-card-title { font-size: 16px; font-weight: 700; color: var(--llp-dark); margin: 0; }
.llp-card-subtitle { font-size: 13px; color: #657284; margin: 2px 0 0; }

/* Conference Credit + Watch & Learn Rank + the Watch & Learn CTA card
   (v0.28.0, card 3 reworked in v0.40.0 - see templates/dashboard.php) - all
   3 shown together, always (see templates/dashboard.php's docblock), so
   this is a 3-up row on wide screens rather than the 2-up "credit-card-OR-
   rank-card plus ticket-card" layout it used to be. */
/* align-items: stretch (v0.40.0, Kat: "all 3 'squares' at the top should be
   the same size") - Conference Credit and Your Rank have very different
   amounts of content (the Rank card's flower graphic makes it taller), so
   stretching does leave empty space in the shorter cards; the flex rule
   right below centers each card's content vertically in that space instead
   of leaving it pinned to the top with a dead gap underneath. */
.llp-credit-row { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: stretch; gap: 22px; margin-bottom: 32px; }
/* Scoped to .llp-credit-row rather than added to .llp-credit-card/
   .llp-progress-card directly - both classes are reused elsewhere (People,
   Person detail, News) outside this stretched-height row, where this rule
   would be a no-op anyway (box height == content height there) but scoping
   it keeps the intent local to this one row. */
.llp-credit-row > .llp-credit-card,
.llp-credit-row > .llp-progress-card { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 980px) {
	.llp-credit-row { grid-template-columns: 1fr 1fr; }
	/* At 2 columns, 3 items leaves the 3rd (the Watch & Learn CTA) orphaned
	   alone in column 1 with an empty gap beside it - span it across both
	   columns instead so it reads as a clean full-width row under the two
	   cards above. */
	.llp-credit-row > :nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .llp-credit-row { grid-template-columns: 1fr; } }
/* Soft light sheen top-right (a second, non-interactive background layer -
   the plain color in the final layer still works as this rule's background-
   color) so the navy card reads as a lit panel instead of a flat fill -
   same premium-glass touch used on .llp-conf-photo/.llp-auth-right below. */
.llp-credit-card {
	position: relative;
	background: radial-gradient(120% 140% at 100% -20%, rgba(255,255,255,0.10), transparent 55%), var(--llp-dark);
	color: #fff; border-radius: 12px; padding: 28px; box-shadow: 0 16px 32px -14px rgba(0,17,85,0.30);
}
.llp-credit-card .llp-label { font-size: 12px; letter-spacing: 0.08em; opacity: 0.7; margin-bottom: 8px; }
/* v0.42.0, Kat: "Conference credit" and "Your Rank" should both be "a tad
   more visible" - opacity bumped from the base .llp-label's 0.7 to 0.92 for
   these two labels specifically (both already shared the same class, so
   one override covers both rather than needing two separate rules). */
.llp-credit-card .llp-label.llp-label-bright { opacity: 0.92; }
/* Yellow, not the interactive blue - this is the one number on the card
   meant to read as "the thing you've earned," not something to click. */
.llp-credit-card .llp-credit-amount { font-size: 34px; font-weight: 800; letter-spacing: -0.01em; color: var(--llp-gold); margin-bottom: 6px; }
.llp-credit-card .llp-muted { color: rgba(255,255,255,0.7); }

/* Mini "recent activity" preview tucked into the Conference Credit card
   (v0.42.0, Kat: "under that, you can put the recent activity - last two or
   3 rows... only show the reason and the amount") - deliberately minimal,
   no icon/date, since the full record is one click away via "Credit
   history" below it (see .llp-credit-history-* further down for that full
   list, on My Profile). */
.llp-credit-mini-activity { margin: 16px 0 2px; }
.llp-credit-mini-row {
	display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
	padding: 7px 0; font-size: 12.5px; color: rgba(255,255,255,0.85);
	border-top: 1px solid rgba(255,255,255,0.12);
}
.llp-credit-mini-row .reason { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.llp-credit-mini-row .amount { font-weight: 700; color: var(--llp-gold); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.llp-credit-history-link {
	display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 700;
	color: var(--llp-gold); text-decoration: none;
}
.llp-credit-history-link:hover { text-decoration: underline; }

/* Rank card (v0.19.0) - shown on the Dashboard alongside the Credit card,
   always (v0.28.0 - see class-llp-shortcodes.php render_dashboard()).
   Reuses .llp-credit-card's dark panel styling; .llp-rank-amount just
   shrinks the font since rank labels ("Engaged Learner") run much longer
   than a euro figure and would otherwise overflow the card at 34px. */
.llp-rank-card .llp-rank-amount { font-size: 22px; margin-bottom: 4px; }

/* 6-petal "flower" rank-progress graphic (v0.29.0, replacing v0.22.0's
   Delta SkyMiles-style semi-donut gauge) - the EBCG logo's own pinwheel
   mark, per Kat's direct reference image: "the further you are, the more
   color will load up. Once you color it all, you move to next rank." Each
   petal is a single curved stroke (see LLP_Points::RANK_FLOWER_PETALS/
   rank_flower_svg()) drawn twice - once as a static translucent "track" in
   its unfilled state, then again in its real brand color with
   stroke-dasharray/dashoffset revealing only as much of that petal's length
   as the member's progress through its 1/6 slice covers, so color visibly
   grows outward from the center as points come in. A petal's tip dot only
   switches to full color once that petal is completely filled.
   The big number + "pts" caption are plain HTML absolutely centered over
   the SVG (not SVG <text>) so they inherit the card's normal font stack -
   same approach the old gauge used, just centered on the flower's small
   clear hub instead of a donut hole. */
.llp-rank-card .llp-rank-amount { text-align: center; }
.llp-rank-flower { position: relative; width: 190px; max-width: 100%; margin: 10px auto 0; }
.llp-rank-flower-svg { width: 100%; height: auto; display: block; }
.llp-rank-flower-center {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	text-align: center; width: 100%; pointer-events: none;
}
.llp-rank-gauge-value { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.llp-rank-gauge-unit { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.75); margin-top: 2px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.llp-rank-next-label { margin-top: 10px; font-size: 12px; text-align: center; }

/* Watch & Learn CTA card, "has completed a session" state (v0.42.0, per
   Kat's own sketch) - rank name leads the card the same way a rank/badge
   would, a ribbon-medal icon (reuses LLP_Points::icon_svg('trophy') -
   already used for the "5 Sessions"/"First Session" badge chips elsewhere,
   not a new icon) sits below it, then the progress line and CTA link. Card
   itself is still the plain white .llp-progress-card, not the dark
   .llp-credit-card treatment - centering these rules rather than reusing
   the Rank card's own classes keeps this card's white background legible
   with them. */
.llp-learn-cta-rank-title { font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 19px; font-weight: 700; color: var(--llp-ink); letter-spacing: -0.01em; text-align: center; }
.llp-learn-cta-ribbon {
	width: 60px; height: 60px; border-radius: 50%; background: var(--llp-cream); color: var(--llp-gold-ink);
	display: flex; align-items: center; justify-content: center; margin: 14px auto;
}
.llp-learn-cta-ribbon svg { width: 28px; height: 28px; }
.llp-learn-cta-progress { text-align: center; margin: 0 0 16px; }
.llp-learn-cta-link-row { display: flex; justify-content: center; }

/* "Newest session" row appended below the rank/progress block above
   (v0.47.0, Kat: "add something like watch the newest video" - the
   "Stacked" option from the mockup she picked: existing block untouched,
   this new row just tacked on underneath it). Deliberately its own <a>
   wrapping the whole row rather than a small text link, so the thumbnail
   itself is clickable too - matches how every other Watch & Learn card
   already behaves (see .llp-wl-card). */
.llp-learn-cta-divider { border: none; border-top: 1px dashed var(--llp-border); margin: 16px 0; }
.llp-learn-cta-newest { display: block; text-decoration: none; color: inherit; }
.llp-learn-cta-new-tag {
	display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--llp-gold-ink); background: var(--llp-cream); border-radius: 999px; padding: 2px 8px; margin-bottom: 8px;
}
.llp-learn-cta-newest-row { display: flex; gap: 10px; align-items: center; }
.llp-learn-cta-newest-thumb {
	width: 52px; height: 52px; border-radius: 8px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
}
.llp-learn-cta-newest-info { min-width: 0; }
.llp-learn-cta-newest-title {
	font-size: 12.5px; font-weight: 700; color: var(--llp-ink); line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.llp-learn-cta-newest:hover .llp-learn-cta-newest-title { color: var(--llp-gold-ink); }
.llp-learn-cta-newest-meta { font-size: 11px; color: var(--llp-muted); margin-top: 2px; }

/* Small "!" note on a member's own credit balance - explains that credit is
   added manually after invoices are paid, and offers a way to flag a
   balance that looks wrong without needing to know who to email. Pure
   CSS+one-line-onclick toggle, no framework, consistent with the rest of
   this stylesheet's approach (see the news filter toggle). */
.llp-credit-info-btn {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.5);
	background: rgba(255,255,255,0.12);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.llp-credit-info-btn:hover { background: rgba(255,255,255,0.22); }
.llp-credit-info-popover {
	display: none;
	position: absolute;
	top: 44px;
	right: 16px;
	z-index: 5;
	width: 260px;
	background: #fff;
	color: #10233A;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.25);
	padding: 16px;
}
.llp-credit-info-popover.is-open { display: block; }
.llp-credit-info-popover p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
.llp-credit-info-popover p:last-child { margin-bottom: 0; }
.llp-credit-info-popover textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--llp-border);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	resize: vertical;
	margin-bottom: 8px;
}
.llp-credit-info-popover .llp-btn-link { font-size: 13px; }
.llp-progress-card {
	background: #fff;
	border-radius: 12px;
	border: 1px solid #E5E7EB;
	box-shadow: 0 4px 16px rgba(7,28,54,0.06);
	padding: 28px;
	transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s cubic-bezier(.4,0,.2,1), border-color 0.2s cubic-bezier(.4,0,.2,1);
}
.llp-progress-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(7,28,54,0.10);
	border-color: #CBD1DB;
}

.llp-section-header { display: flex; justify-content: space-between; align-items: center; margin: 40px 0 16px; }
/* Small uppercase section/eyebrow label - kept at its original size/weight
   since this class is reused across many pages (People, Person detail,
   section headers), not just the ones covered by the v4 redesign; only the
   color shifts slightly to sit better on the new near-white canvas. */
.llp-eyebrow { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #657284; }

/* Recent activity (Dashboard) and every result row on the People directory
   share this list. Each row is just a name/amount on the left and a status
   pill on the right (justify-content: space-between below) - at the wider
   1600px bloom cap that turned into one huge dead gap stretched across the
   middle of every row. Rows read as a list either way, so they don't need
   the full content width the way a card grid or a 2-column form does;
   capping at 900px keeps them left-anchored and readable instead of
   stretched edge to edge. */
.llp-activity-list {
	background: #fff;
	border-radius: 12px;
	border: 1px solid #E5E7EB;
	box-shadow: 0 4px 16px rgba(7,28,54,0.06);
	overflow: hidden;
	margin-bottom: 20px;
	max-width: 900px;
}
.llp-activity-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--llp-border); }
.llp-activity-row:last-child { border-bottom: none; }
.llp-activity-amount { font-weight: 700; color: var(--llp-gold); }
/* Optional icon on a ledger entry (see LLP_Points::icon_options()) - set
   from the "Add / adjust points" form, shown next to the reason wherever a
   member's activity list appears. */
.llp-activity-icon {
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--llp-cream); color: var(--llp-dark);
}
.llp-activity-icon svg { width: 15px; height: 15px; }
.llp-activity-footer { padding: 12px 18px; text-align: right; }

/* Credit history (v0.42.0, Kat) - a collapsible card on My Profile, reached
   via the "Credit history" link on the Dashboard's Conference Credit card.
   Collapsed by default (just the header + balance + chevron); clicking
   rolls the full statement-style list open in place. Same max-height/
   opacity accordion technique as .llp-nav-petals-field elsewhere in this
   file (Settings' Navigation style petal picker) rather than a new pattern -
   600px there was headroom for a handful of chips, 2000px here is headroom
   for a long ledger; neither is a real content-driven height, just enough
   that nothing ever actually clips before the transition finishes. */
.llp-credit-history-toggle {
	width: 100%; background: none; border: none; padding: 0; margin: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; text-align: left; font: inherit;
}
.llp-credit-history-toggle-left { display: flex; align-items: center; gap: 14px; }
.llp-credit-history-chevron { width: 18px; height: 18px; color: #657284; flex-shrink: 0; transition: transform 0.25s ease; }
.llp-credit-history-toggle.is-open .llp-credit-history-chevron { transform: rotate(180deg); }
.llp-credit-history-body {
	max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
	transition: max-height 0.32s ease, opacity 0.22s ease, margin-top 0.32s ease;
}
.llp-credit-history-body.is-open { max-height: 2000px; opacity: 1; margin-top: 20px; }
/* Statement-style rows (Kat picked this over a plain table/grouped-by-month
   after an earlier icon-per-row version read as "messy") - date, reason,
   a dotted leader line, then the amount, all on one compact row. */
.llp-credit-history-list { border-top: 1px solid var(--llp-border); }
.llp-credit-history-row { display: flex; align-items: baseline; padding: 9px 2px; border-bottom: 1px solid var(--llp-border); font-size: 13px; }
.llp-credit-history-date { color: #98A1AC; font-size: 11.5px; width: 64px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.llp-credit-history-reason { color: var(--llp-ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.llp-credit-history-dots { flex: 0 1 40px; border-bottom: 1px dotted #CBD1DB; margin: 0 8px 3px; min-width: 12px; }
.llp-credit-history-amount { font-weight: 700; color: var(--llp-gold); font-variant-numeric: tabular-nums; flex-shrink: 0; }

.llp-status-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.llp-status-pill.llp-approved, .llp-status-pill.llp-approved { background: #eaf6ec; color: var(--llp-success); }
.llp-status-pill.llp-pending { background: #fdf3e3; color: #C98A22; }

/* News feed - short posts (e.g. speaker announcements) for events matching
   the member's interests; see LLP_News / Loyalty Portal -> News. */
.llp-news-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.llp-news-item {
	background: #fff;
	border-radius: 12px;
	border: 1px solid #E5E7EB;
	box-shadow: 0 4px 16px rgba(7,28,54,0.06);
	padding: 20px;
}
.llp-news-item p.llp-muted { margin: 6px 0; }
/* Category tag + "mark as read" dismiss button share a row (v0.43.0, Kat:
   "the client can click read to remove them from dashboard") - the tag's own
   margin-bottom is zeroed out here since the row itself carries that
   spacing instead, so the row's height doesn't end up taller than its
   shorter sibling (the button) intended. */
.llp-news-item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.llp-news-item-top .llp-category-tag { margin-bottom: 0; }
.llp-news-item-dismiss {
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 26px; height: 26px; border-radius: 50%; padding: 0;
	background: none; border: 1px solid #E5E7EB; color: #98A1AC; cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.llp-news-item-dismiss:hover { background: var(--llp-gold); border-color: var(--llp-gold); color: var(--llp-dark); }
.llp-news-item-dismiss svg { width: 12px; height: 12px; }
/* Optional image, set from Loyalty Portal -> News / the front-end Post News
   page - sits above everything else on the card, edge-to-edge, pulled back
   out of the card's own padding. */
.llp-news-item-image { width: 100%; max-height: 220px; object-fit: cover; display: block; border-radius: 10px 10px 0 0; margin: -20px -20px 16px; width: calc(100% + 40px); }
/* The body itself now comes from a rich-text editor - reset the default
   browser spacing on whatever block tags it produced (paragraphs/lists/
   links) so it reads like the rest of the card instead of like pasted-in
   editor output. */
/* Editorial preview, not a full blog excerpt - clamp to 3 lines so the
   Dashboard's News card stays a glance, not a wall of text; the section's
   own "See more ->" link (rendered above the list) is still there for
   anyone who wants the rest. */
.llp-news-item-body {
	margin: 6px 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.llp-news-item-body p { margin: 0 0 8px; }
.llp-news-item-body p:last-child { margin-bottom: 0; }
.llp-news-item-body ul, .llp-news-item-body ol { margin: 0 0 8px; padding-left: 20px; }
.llp-news-item-body a { color: var(--llp-gold); }
.llp-news-item-body img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
/* v0.61.7 - assets/js/news-expand.js toggles this on the News page (see
   .llp-news-expandable) once it's confirmed the 3-line clamp above is
   actually cutting the post off; "unset" (not "none") is required to make a
   -webkit-line-clamp'd box stop clamping. */
.llp-news-item-body.is-expanded { -webkit-line-clamp: unset; overflow: visible; }
.llp-news-read-more { display: inline-block; margin: 2px 0 6px; }

/* auto-fill (not auto-fit) reserves empty phantom tracks once the row has
   more room than items to fill them - with few events and the wider bloom
   cap (see the 1600px rule above), those invisible tracks silently ate the
   1fr distribution and left every card bunched at its 240px floor with a
   dead void on the right (Kat: "all parts need to fit better"). auto-fit
   collapses empty tracks to 0, so the real cards' tracks pick up that width
   instead - paired with a per-card max-width + justify-items:center so 2-3
   events don't stretch into absurdly wide cards, they just get breathing
   room distributed evenly around them instead of dumped in one corner. */
.llp-conf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; justify-items: center; }
.llp-conf-card {
	background: #fff;
	border-radius: 12px;
	border: 1px solid #E5E7EB;
	box-shadow: 0 4px 16px rgba(7,28,54,0.06);
	overflow: hidden;
	transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s cubic-bezier(.4,0,.2,1), border-color 0.2s cubic-bezier(.4,0,.2,1);
	width: 100%;
	max-width: 380px;
}
.llp-conf-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(7,28,54,0.10);
	border-color: #CBD1DB;
}
/* Soft light sheen top-left over the navy-to-indigo gradient - a plain
   two-stop diagonal read as a flat color block; this one small highlight
   layer is most of the difference between "CSS gradient" and "designed
   surface." */
/* Navy-to-secondary-navy, not navy-to-gold - the manual is explicit that
   gold shouldn't cover any real area of the screen, only appear as a small
   accent, so a card-header-sized gold fill was exactly backwards. Taller
   than before (100px -> 132px) to read closer to the manual's "~40% of the
   card, not a decorative strip" guidance. This is still a gradient
   placeholder, not photography - see the note sent with these screenshots
   about adding a real per-event image field for actual venue/speaker
   photos, which the plugin doesn't have yet. */
.llp-conf-photo { height: 132px; background: radial-gradient(130% 160% at 10% -20%, rgba(255,255,255,0.18), transparent 55%), linear-gradient(135deg, var(--llp-dark), var(--llp-navy-2)); }
.llp-conf-card-body { padding: 16px; }
/* "Almost like a luxury hotel label," per the manual: white fill, a hairline
   champagne border instead of a filled champagne background, and a dark-gold
   ink rather than the card's ordinary navy/gray text. */
.llp-category-tag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: #fff; color: var(--llp-gold-ink); border: 1px solid var(--llp-cream); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; }
.llp-gold-link-btn { display: inline-block; margin-top: 10px; color: var(--llp-gold); font-weight: 700; text-decoration: none; background: none; border: none; cursor: pointer; font-size: 14px; padding: 0; }
.llp-gold-link-btn.llp-pending { color: #C98A22; cursor: default; }

/* Secondary "also see the public website" link shown alongside the agenda
   PDF once a request is approved (v0.24.0) - deliberately smaller/muted so
   the agenda PDF stays the primary CTA. */
.llp-secondary-link { display: block; margin-top: 6px; color: #657284; font-weight: 500; text-decoration: none; font-size: 12px; }
.llp-secondary-link:hover { text-decoration: underline; }

/* Category tag + "Request agenda" sharing one row (v0.61.0, Kat: "put
   request agenda next to the label") - used by both conferences-grid.php's
   card markup and conferences.php's JS-built detail modal. Webinar events
   have no agenda action, so the row just holds the tag alone there - same
   markup either way, nothing conditional needed in CSS. */
.llp-conf-tag-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.llp-conf-tag-row .llp-category-tag { margin-bottom: 0; }
.llp-conf-tag-row .llp-gold-link-btn { margin-top: 0; white-space: nowrap; }

/* "Secure my seat" credit popup (v0.61.0, Kat: "fix the design" / "create
   the popup") - replaces the old always-visible "Use my credit on this"
   <details>/<summary> disclosure with a small modal that only ever exists
   when there's actually credit to offer. Pure CSS for the overlay/panel
   look; assets/js/credit-popup.js only toggles [hidden] and .is-open - see
   that file's docblock for why every control inside still works with JS
   off. */
.llp-credit-popup { position: fixed; inset: 0; z-index: 10000; display: none; }
.llp-credit-popup.is-open { display: block; }
.llp-credit-popup-backdrop { position: absolute; inset: 0; background: rgba(7,28,54,0.45); }
.llp-credit-popup-panel {
	position: relative; z-index: 1; width: calc(100% - 32px); max-width: 340px; margin: 10vh auto 0;
	background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 12px 32px rgba(7,28,54,0.25);
}
.llp-credit-popup-panel h4 { margin: 0 0 6px; font-size: 15px; color: var(--llp-dark); }
.llp-credit-popup-panel .llp-muted { font-size: 12px; margin: 0 0 12px; }
.llp-credit-popup-panel label { font-size: 12px; color: var(--llp-dark); display: block; margin-bottom: 6px; }
.llp-credit-popup-panel .llp-redeem-row { margin: 0 0 12px; }
.llp-credit-popup-submit { width: 100%; }
.llp-credit-popup-submit:disabled { opacity: 0.75; cursor: default; }
.llp-credit-popup-skip { display: block; text-align: center; margin-top: 10px !important; }
.llp-credit-popup-x { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 18px; color: var(--llp-body); cursor: pointer; line-height: 1; padding: 6px; }

/* "Your credit is on hold" note (v0.61.4) - the event-card version (next to
   "Secure my seat", conferences-grid.php/conferences.php) and the Dashboard
   Conference Credit card's own hold list (dashboard.php) share these same
   classes; .llp-release-own-form just keeps its "Free it up now" button
   inline with the sentence next to it rather than dropping to its own line. */
.llp-credit-hold-note { margin-top: 6px; }
.llp-credit-hold-row { font-size: 12px; margin: 0 0 6px; }
.llp-release-own-form { display: inline; }
.llp-release-own-form .llp-btn-link { font-size: inherit; margin-left: 4px; }
.llp-credit-hold-list { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--llp-border); }
.llp-credit-hold-list .llp-credit-hold-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.llp-credit-hold-list .llp-credit-hold-row .llp-muted { font-size: 12px; }

/* Slides up from the bottom instead of centering on a small screen - the
   one concession to phone width; everything else about the popup (gating,
   pre-filled amount, one-click continue) is identical (see the canvas
   walkthrough Kat asked for, "create more visuals" -> mobile view). */
@media (max-width: 480px) {
	.llp-credit-popup-panel { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; width: 100%; max-width: none; border-radius: 16px 16px 0 0; padding: 22px 20px 28px; }
}

/* Conferences page List/Calendar toggle (v0.36.0, replaces the standalone
   page's old always-on card grid - templates/partials/conferences-grid.php
   is untouched and still powers the Dashboard's smaller teaser section, see
   that file's docblock). Both views + the shared event detail modal are
   built entirely client-side from one JSON blob embedded by
   templates/conferences.php, same "render data once, do everything else in
   JS" approach as Watch & Learn/Speaker Spotlight - see those templates. */
.llp-conf-view-toggle { display: flex; gap: 8px; margin-bottom: 18px; }
.llp-cal-card { background: #fff; border: 1px solid var(--llp-border); border-radius: 16px; padding: 22px 24px 26px; }

.llp-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.llp-cal-month-label { font-size: 18px; margin: 0; color: var(--llp-dark); }
.llp-cal-nav { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--llp-border); background: #fff; color: var(--llp-dark); cursor: pointer; font-size: 15px; }
.llp-cal-nav:hover { border-color: var(--llp-gold); }
.llp-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--llp-muted); padding-bottom: 8px; border-bottom: 1px solid var(--llp-border); margin-bottom: 6px; }
/* grid-auto-rows fixes every row (empty or not) to the same height - a plain
   "min-height" on the cell only sets each CELL's own floor, but a CSS grid
   still auto-sizes each ROW to its tallest cell, so a week with an event
   chip in it visibly grew taller than an empty week (Kat, v0.44.1: "the
   size should be the same for every field - empty or written"). Cells with
   more chips than fit at that fixed height scroll internally rather than
   growing the row. */
/* 100px here is only the fallback for the instant before JS runs (or if it
   doesn't) - v0.46.4 hardcoded 125px instead, which filled a tall monitor
   nicely but gave Kat a vertical scrollbar on a shorter screen ("I fear
   it's too big"). v0.46.5 replaces the fixed guess with
   fitCalendarRowHeight() in conferences.php, which measures the actual
   space available on THIS screen every time the calendar is shown and sets
   grid-auto-rows inline - see that function's own comment. */
.llp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 100px; gap: 6px; }
/* min-width: 0 overrides the grid item's default "automatic minimum size",
   which is based on its CONTENT's width (min-content) unless told otherwise -
   without it, a cell holding a long, unbreakable chip can force its own grid
   track wider than its fair 1fr share, which is exactly the kind of
   mismatch that lets a chip visually spill past its neighbors. Same idea as
   the chip's own min-width: 0 below, one level up. */
/* box-sizing: border-box is the actual fix for the row-to-row "overlap at
   the top, not the sides" Kat reported (v0.46.1): the cell's 1px border and
   6px padding were being added on TOP of its 100px height (browsers default
   to content-box), so every cell rendered 114px tall against a 100px grid
   row track - 14px taller than its own row, eating the 6px row-gap and then
   overlapping the row below by 8px. Columns never showed this because their
   width comes from a flexible "1fr" track that absorbs padding/border
   automatically; only the fixed-height rows were affected. border-box keeps
   the border+padding inside the declared height, so it matches the track
   exactly and the 6px gap is even on all four sides again. */
.llp-cal-cell { height: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--llp-border); border-radius: 10px; padding: 6px; background: var(--llp-canvas); display: flex; flex-direction: column; gap: 3px; cursor: default; overflow-x: hidden; overflow-y: auto; }
.llp-cal-cell-empty { background: none; border-color: transparent; }
.llp-cal-cell.is-today { border-color: var(--llp-gold); background: #fffaeb; }
.llp-cal-daynum { font-size: 12px; font-weight: 700; color: var(--llp-ink); }
.llp-cal-cell.is-today .llp-cal-daynum { color: var(--llp-gold-ink); }
/* max-width/box-sizing/min-width all pin the chip's own box to the cell's
   width, several independent ways at once - Kat reported a long event title
   rendering wide enough to visually spill across neighboring day cells (grid
   cells don't clip each other's overflow by default, so an unclipped chip
   paints right over the next day(s)). The cell's own "overflow-x: hidden"
   above already stops that in most browsers, but on its own relies on (a) a
   CSS quirk (setting only overflow-y forces overflow-x to compute as "auto"
   too) that's easy to undo by accident later, and (b) every engine
   correctly shrinking a flex item below its content width, which Safari in
   particular has a known history of getting wrong without an explicit
   "min-width: 0" - flex/grid items default to a content-based automatic
   minimum size that silently overrides "overflow: hidden" otherwise. Belt,
   suspenders, and a second belt. */
.llp-cal-chip { font-size: 10.5px; font-weight: 600; line-height: 1.3; color: #fff; background: var(--llp-dark); border-radius: 5px; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; max-width: 100%; min-width: 0; box-sizing: border-box; }
.llp-cal-chip-webinar { background: var(--llp-gold); color: var(--llp-dark); }
/* A later day of a multi-day conference - same chip, dialed back (softer
   weight, italic, lower opacity) so the eye still lands on the conference's
   start-day chip first, while every day it runs still reads as clearly
   marked. Deliberately NOT trying to visually fuse each day's chip into one
   continuous bar across cell boundaries - .llp-cal-cell's grid sits in a
   CSS Grid with real gaps and rounded-corner cells between them, so a "bar"
   would need to bridge that gap with absolutely-positioned overlays, which
   .llp-cal-cell's overflow-x: hidden (see the long note above) would clip
   anyway, and event order can differ day-to-day when a day has more than
   one event, so a bridge could misalign with the wrong chip. A softened
   repeat of the same chip is the robust version of the same idea. */
.llp-cal-chip-continues { font-weight: 500; font-style: italic; opacity: .62; }
.llp-cal-legend { display: flex; gap: 20px; margin-top: 18px; font-size: 12px; color: var(--llp-body); }
.llp-cal-legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.llp-cal-legend-conf { background: var(--llp-dark); }
.llp-cal-legend-talk { background: var(--llp-gold); }

.llp-agenda-card { padding: 24px 26px; }
.llp-agenda-month-label { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--llp-gold-ink); margin: 22px 0 12px; }
.llp-agenda-month-label:first-child { margin-top: 0; }
.llp-agenda-row { display: flex; align-items: center; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--llp-border); cursor: pointer; }
.llp-agenda-row:last-child { border-bottom: none; }
.llp-agenda-datebox { flex: none; width: 56px; height: 56px; border-radius: 10px; background: var(--llp-dark); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.llp-agenda-datebox-webinar { background: var(--llp-cream); color: var(--llp-dark); }
.llp-agenda-day { font-size: 15px; font-weight: 800; line-height: 1.1; }
.llp-agenda-weekday { font-size: 10px; font-weight: 600; text-transform: uppercase; opacity: 0.75; }
.llp-agenda-body { flex: 1; min-width: 0; }
.llp-agenda-title { font-size: 15px; margin: 2px 0 3px; color: var(--llp-dark); }
.llp-agenda-type-pill { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; background: var(--llp-dark); color: #fff; border-radius: 999px; padding: 4px 10px; }
.llp-agenda-type-pill-webinar { background: var(--llp-gold); color: var(--llp-dark); }

/* Event detail modal (opened from a List row or Calendar chip) - same
   .llp-modal-overlay/.llp-modal-panel/.llp-modal-close chrome as Speaker
   Spotlight's profile modal (templates/speakers.php), scoped to its own
   #llp-conf-overlay id the same way #llp-wl-overlay/#llp-spk-overlay are. */
.llp-conf-detail-photo { height: 180px; border-radius: 16px 16px 0 0; background-size: cover; background-position: center; }
.llp-conf-detail-photo-fallback { background: radial-gradient(130% 160% at 10% -20%, rgba(255,255,255,0.18), transparent 55%), linear-gradient(135deg, var(--llp-dark), var(--llp-navy-2)); }
.llp-conf-detail-body { padding: 20px 26px 26px; }
.llp-conf-detail-body h3 { font-size: 20px; margin: 10px 0 4px; color: var(--llp-dark); }
/* white-space: pre-line - Kat: typing blank lines between paragraphs in the
   admin's event description field did nothing on the front end. The value
   IS saved with those line breaks intact (sanitize_textarea_field() in
   LLP_Events keeps newlines, unlike sanitize_text_field()) and the JS here
   never strips them either - the whole description just lands in a single
   <p>, and plain HTML collapses newlines/blank lines to nothing by default.
   pre-line renders the newlines Kat already typed as real line breaks
   (a blank line becomes a paragraph gap) while still wrapping long lines
   normally and collapsing incidental runs of spaces within a line. */
.llp-conf-detail-desc { font-size: 13.5px; line-height: 1.6; color: var(--llp-ink); margin: 14px 0 18px; white-space: pre-line; }

/* "Add to calendar" row in the event detail modal (see conferences.php) -
   sits below whatever CTA (Request agenda / Attend on LinkedIn / ...)
   ctaHtml rendered above it, so it always reads as a secondary action. */
.llp-add-to-cal { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--llp-border); }
.llp-add-to-cal-label { font-size: 12px; font-weight: 600; color: var(--llp-muted); }
.llp-cal-add-btn { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--llp-dark); background: #fff; border: 1.5px solid var(--llp-border); border-radius: 999px; padding: 5px 14px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.llp-cal-add-btn:hover { border-color: var(--llp-gold); background: var(--llp-cream); }

.llp-confirm-page { text-align: center; padding: 60px 20px; }

.llp-profile-photo-preview img { border-radius: 50%; margin-bottom: 16px; }

.llp-redeem-widget { background: var(--llp-cream); border: 1px solid var(--llp-border); border-radius: 14px; padding: 20px; margin-bottom: 24px; }
.llp-redeem-balance { font-size: 16px; margin-bottom: 10px; }
.llp-redeem-balance strong { color: var(--llp-dark); }
.llp-redeem-row { display: flex; gap: 10px; margin: 8px 0; }
.llp-redeem-row input[type="number"] { flex: 1; padding: 10px 12px; border: 1px solid var(--llp-border); border-radius: 6px; }
.llp-btn-link { background: none; border: none; padding: 0; color: var(--llp-gold); font-weight: 600; text-decoration: underline; cursor: pointer; font-size: 14px; }
.llp-btn-link.llp-pending-text { color: #C98A22; text-decoration: none; cursor: default; }

/* Generic small eyebrow label, used inside white cards (People/Person detail)
   as well as the dark credit card above - .llp-credit-card overrides the
   opacity/color further where it sits on a dark background. */
.llp-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: #657284; margin-bottom: 8px; }

/* Front-end People directory (see templates/people-directory.php) - reuses
   .llp-activity-list/.llp-activity-row but as clickable links through to a
   person's detail view. */
.llp-people-row {
	display: flex;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.llp-people-row:hover { background: var(--llp-cream); }

/* Meet the Team page (templates/team.php) + the Dashboard's "your person"
   card (templates/dashboard.php) - both share the reach-out buttons block
   below via templates/partials/reach-out.php. Team cards are centered and
   photo-forward - a more editorial "about us" feel than the dense data-row
   look used elsewhere in the portal (People, Requests), which is the right
   fit here since this page is a handful of people, not a list to scan. */
/* auto-fit + a capped card width, same fix and same reasoning as
   .llp-conf-grid above - a handful of people shouldn't turn into two
   giant cards with a canyon of white space past them at the wider bloom
   width. */
.llp-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; justify-items: center; }
.llp-team-card {
	text-align: center;
	padding: 32px 28px;
	transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s cubic-bezier(.4,0,.2,1), border-color 0.2s cubic-bezier(.4,0,.2,1);
	width: 100%;
	max-width: 340px;
}
.llp-team-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(7,28,54,0.10);
	border-color: #CBD1DB;
}
.llp-team-card-header { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 4px; }
.llp-team-photo {
	width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
	margin-bottom: 14px;
	border: 1.5px solid var(--llp-gold);
}
.llp-team-photo-fallback { width: 96px; height: 96px; font-size: 28px; margin-bottom: 14px; border: 1.5px solid var(--llp-gold); }
.llp-team-role { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--llp-gold); margin-top: 2px; }
.llp-team-card .llp-muted { max-width: 320px; margin-left: auto; margin-right: auto; }
.llp-reachout-card { padding: 24px; }
.llp-reachout-card .llp-team-card-header { flex-direction: row; align-items: center; text-align: left; }
.llp-reachout-card .llp-team-photo,
.llp-reachout-card .llp-team-photo-fallback { width: 56px; height: 56px; margin-bottom: 0; font-size: 18px; }
.llp-reachout-card .llp-reachout-buttons { justify-content: flex-start; }
/* v0.61.7 (Kat: "waaay too big, needs to be a bit more tucked in") - the
   Dashboard's own "Your person at EBCG" card, specifically: smaller photo,
   tighter padding, and capped width so it reads as a quiet strip rather than
   a second full-width hero card - stacked on top of .llp-reachout-compact's
   existing icon-only-buttons treatment (see that rule below) rather than a
   whole new button style. */
.llp-reachout-card.llp-reachout-compact { padding: 14px 18px; max-width: 380px; }
.llp-reachout-card.llp-reachout-compact .llp-team-card-header { gap: 12px; margin-bottom: 0; }
.llp-reachout-card.llp-reachout-compact .llp-team-photo,
.llp-reachout-card.llp-reachout-compact .llp-team-photo-fallback { width: 40px; height: 40px; font-size: 14px; }

/* Reach-out actions - a stripped-down icon + uppercase label, no pill/badge
   chrome, reading closer to Linear/Stripe-style quiet actions than the
   earlier filled-pill buttons. Hover is just a color shift (gold-ish),
   matching the rest of the v4 system's restrained hover treatment. */
.llp-reachout-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 16px; }
.llp-reachout-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	border: none;
	background: none;
	color: var(--llp-ink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s ease;
}
.llp-reachout-btn:hover { background: none; color: var(--llp-gold); }
.llp-reachout-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto; height: auto;
	border-radius: 0;
	background: none;
	color: inherit;
	flex-shrink: 0;
}
.llp-reachout-btn:hover .llp-reachout-icon { background: none; color: inherit; }
.llp-reachout-icon svg { width: 15px; height: 15px; }

/* Compact icon-only variant for tight spaces - e.g. the Meet the Team
   preview widget on My Profile, where full label+icon buttons would be too
   wide for a narrow sidebar card. Same markup (.llp-reachout-btn +
   .llp-reachout-label), the label is just visually hidden here. */
.llp-reachout-compact .llp-reachout-buttons { gap: 6px; justify-content: flex-start; }
.llp-reachout-compact .llp-reachout-btn {
	width: 30px; height: 30px; border-radius: 8px;
	background: var(--llp-canvas); border: 1px solid rgba(20,20,15,0.08);
	display: inline-flex; align-items: center; justify-content: center;
}
.llp-reachout-compact .llp-reachout-btn:hover { background: var(--llp-dark); border-color: var(--llp-dark); }
.llp-reachout-compact .llp-reachout-btn:hover svg { color: var(--llp-gold); }
.llp-reachout-compact .llp-reachout-label { display: none; }
.llp-reachout-compact .llp-reachout-icon svg { width: 14px; height: 14px; }

/* The "Leave a quick message" form - deliberately its own distinct shape (an
   expanding panel, not a link) so it doesn't read as a second "Email"
   button - see the docblock in partials/reach-out.php for why. */
.llp-reachout-message-form {
	display: none;
	margin-top: 12px;
	padding: 14px;
	background: var(--llp-cream);
	border: 1px solid var(--llp-border);
	border-radius: 12px;
}
.llp-reachout-message-form.is-open { display: block; }
.llp-reachout-message-form p { margin: 0 0 10px; font-size: 13px; }
.llp-reachout-message-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--llp-border);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 13px;
	font-family: inherit;
	resize: vertical;
	margin-bottom: 10px;
}
.llp-reachout-message-form .llp-btn { padding: 8px 18px; font-size: 13px; }

/* ===================================================================
   v4 visual system - structural classes new to this round: view/edit
   Personal Information card, row-style Events of Interest, tile-style
   Notifications checkboxes, the slim top bar, and My Profile's two-column
   layout with a compact Meet the Team preview. Grouped here since they're
   genuinely new markup, not overrides of something that existed before.
   =================================================================== */

/* ---- View-then-edit field display (My Profile's "Personal Information"
   card) - a static label/value pair instead of a live input, editable only
   after pressing the card's Edit button. The underlying <form> and its
   inputs stay in the DOM either way; only their visibility toggles (see
   settings-form.php's inline script), so llp_update_profile's submission
   handling is unaffected. ---- */
.llp-view-field { margin-bottom: 22px; }
.llp-view-field-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #657284; font-weight: 600; margin-bottom: 5px; }
.llp-view-field-value { font-size: 15px; font-weight: 600; color: var(--llp-ink); }
.llp-view-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 600px) { .llp-view-field-grid { grid-template-columns: 1fr; } }
.llp-view-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.llp-view-card-header .llp-card-header { margin-bottom: 0; }
.llp-view-field-linkedin { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.llp-view-field-linkedin .llp-btn-icon-only {
	width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
	background: var(--llp-dark); color: var(--llp-gold);
	display: flex; align-items: center; justify-content: center; border: none;
}
.llp-view-field-linkedin .llp-btn-icon-only svg { width: 15px; height: 15px; }

/* ---- Events of Interest as a selectable row list instead of the chip
   grid used elsewhere (Registration) - a filled check-circle + tinted row
   when selected. Still a real checkbox input under the hood (just visually
   hidden), same interests[] submission as before. ---- */
.llp-select-row {
	position: relative;
	display: flex; align-items: center; gap: 12px;
	padding: 13px 16px; margin-bottom: 8px;
	border: 1px solid rgba(20,20,15,0.09); border-radius: 12px;
	font-size: 13px; font-weight: 600; color: var(--llp-ink);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.llp-select-row-input { position: absolute; opacity: 0; width: 0; height: 0; }
.llp-select-row:has( .llp-select-row-input:checked ) { background: rgba(0,17,85,0.045); border-color: rgba(0,17,85,0.22); }
.llp-select-row:has( .llp-select-row-input:focus-visible ) { outline: 2px solid var(--llp-gold); outline-offset: 2px; }
.llp-select-row-check {
	width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
	border: 1.5px solid rgba(20,20,15,0.18);
	display: flex; align-items: center; justify-content: center;
	transition: background-color .15s ease, border-color .15s ease;
}
.llp-select-row:has( .llp-select-row-input:checked ) .llp-select-row-check { background: var(--llp-dark); border-color: var(--llp-dark); color: #fff; }
.llp-select-row-check svg { width: 11px; height: 11px; opacity: 0; transform: scale(0.6); transition: opacity .15s ease, transform .15s ease; }
.llp-select-row:has( .llp-select-row-input:checked ) .llp-select-row-check svg { opacity: 1; transform: scale(1); }

/* ---- Notification checkboxes: square check tile instead of the default
   browser checkbox, filled dark-green + white tick when on. Same idea as
   .llp-select-row above - a real checkbox input, just visually hidden. ---- */
.llp-check-row { position: relative; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; font-size: 13px; color: #657284; line-height: 1.5; cursor: pointer; }
.llp-check-row:last-child { margin-bottom: 0; }
.llp-check-row-input { position: absolute; opacity: 0; width: 0; height: 0; }
.llp-check-tile {
	width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; margin-top: 1px;
	border: 1.5px solid rgba(20,20,15,0.18);
	display: flex; align-items: center; justify-content: center;
	transition: background-color .15s ease, border-color .15s ease;
}
.llp-check-row:has( .llp-check-row-input:checked ) .llp-check-tile { background: var(--llp-dark); border-color: var(--llp-dark); }
.llp-check-tile svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity .15s ease; }
.llp-check-row:has( .llp-check-row-input:checked ) .llp-check-tile svg { opacity: 1; }

/* ---- Slim top bar (avatar + name, linking through to My Profile) so page
   content no longer needs to repeat that block at the top of every single
   page. The notification bell next to it arrived in v0.62.0 - see the
   "Notification bell" section near the end of this file. ---- */
.llp-app-topbar {
	display: flex; align-items: center; justify-content: flex-end; gap: 18px;
	padding: 20px 48px 0;
}
.llp-topbar-user-wrap { position: relative; }
/* v0.61.7: was a plain <a>, now a real dropdown toggle button (see
   assets/js/topbar-menu.js) - reset to look exactly like the old link. */
.llp-topbar-user {
	display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none;
	background: none; border: none; padding: 0; font: inherit; cursor: pointer;
}
.llp-topbar-user .llp-avatar-circle,
.llp-topbar-user .llp-avatar-photo { width: 32px; height: 32px; font-size: 12px; }
.llp-topbar-user-name { font-size: 13px; font-weight: 600; color: var(--llp-ink); }
.llp-topbar-chevron { width: 14px; height: 14px; color: #98A1AC; flex-shrink: 0; transition: transform 0.15s ease; }
.llp-topbar-user[aria-expanded="true"] .llp-topbar-chevron { transform: rotate(180deg); }
/* The dropdown panel itself - My Profile / Contact my EBCG contact / Log
   out (see app-topbar.php). Right-aligned under the avatar+name, same card
   chrome (radius/border/shadow) as the rest of this v4 system's popovers
   (c.f. .llp-credit-info-popover). */
.llp-topbar-menu {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; /* above the bloom quick-nav's own 39-45 range, below the credit popup's 10000 */
	min-width: 220px; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
	box-shadow: 0 12px 32px rgba(7,28,54,0.14); padding: 6px; display: flex; flex-direction: column;
}
/* v0.61.8 fix (Kat: "this does not hide") - the browser's own default
   stylesheet is what makes the `hidden` attribute (see topbar-menu.js's
   open()/close()) actually hide an element via `[hidden] { display: none }`
   - but that's a USER-AGENT rule, and this file's own `display: flex` above
   is an AUTHOR rule, so ours always won regardless of selector specificity,
   permanently overriding `hidden` and leaving the menu visibly open all the
   time. This explicit [hidden] override (same specificity fight, but now on
   our side) is what actually lets JS's `menu.hidden = true` hide it. */
.llp-topbar-menu[hidden] { display: none; }
.llp-topbar-menu-item {
	display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
	color: var(--llp-ink); text-decoration: none; font-size: 13px; font-weight: 600;
	transition: background 0.15s ease;
}
.llp-topbar-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; color: #98A1AC; }
.llp-topbar-menu-item:hover { background: #F5F6F8; }
/* A hairline instead of a second popover-in-a-popover for "this one's
   different" - Log out always sorts last (see app-topbar.php's markup
   order) so this rule just targets the final item rather than needing its
   own dedicated modifier class to detect "last". */
.llp-topbar-menu-logout { border-top: 1px solid #E5E7EB; margin-top: 4px; padding-top: 13px; }

/* ---- My Profile: two-column layout (wide left, narrow right), the left
   column stacking a view-mode Personal Information card above a compact
   Meet-the-Team preview. ---- */
.llp-profile-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .llp-profile-grid { grid-template-columns: 1fr; } }
.llp-profile-grid .llp-card { margin-bottom: 24px; }
.llp-profile-grid .llp-card:last-child { margin-bottom: 0; }

.llp-team-preview-row { display: flex; gap: 18px; }
.llp-team-preview-item { flex: 1; text-align: left; }
.llp-team-preview-photo {
	width: 52px; height: 52px; border-radius: 50%; margin-bottom: 10px;
	border: 1.5px solid var(--llp-gold); object-fit: cover; display: block;
}
.llp-team-preview-photo-fallback {
	width: 52px; height: 52px; border-radius: 50%; margin-bottom: 10px;
	border: 1.5px solid var(--llp-gold); font-size: 16px;
}
.llp-team-preview-name { font-size: 13px; font-weight: 700; color: var(--llp-ink); margin-bottom: 2px; }
.llp-team-preview-role { font-size: 11px; font-weight: 600; color: var(--llp-gold); margin-bottom: 12px; }

.llp-pagination-dots { display: flex; gap: 6px; justify-content: center; margin-top: 22px; }
.llp-pagination-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(20,20,15,0.14); display: block; }
.llp-pagination-dots span.is-active { background: var(--llp-gold); }

.llp-profile-footer { display: flex; justify-content: flex-end; margin-top: 24px; }

/* Leaderboard visibility - 3-way choice (v0.19.0), replacing the old single
   checkbox + nickname field. Each option is a clickable card built from a
   wrapping <label> around a visually-hidden-by-default radio, matching the
   rest of this stylesheet's card-based selection pattern rather than a bare
   radio-button list. */
.llp-lb-mode-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.llp-lb-mode-choice {
	display: block; position: relative; cursor: pointer;
	border: 1.5px solid var(--llp-border); border-radius: 12px; padding: 14px 16px 14px 40px;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.llp-lb-mode-choice:hover { border-color: var(--llp-gold); }
.llp-lb-mode-choice.is-selected { border-color: var(--llp-gold); background: var(--llp-cream); }
/* accent-color so this native radio picks up the gold accent instead of the
   browser/OS default blue - everything else selectable on this page (the
   Events chips, the Notification tiles) is custom-drawn and already on
   brand; this was the one control still showing stock blue. */
.llp-lb-mode-input { position: absolute; top: 16px; left: 14px; margin: 0; accent-color: var(--llp-gold); }
.llp-lb-mode-title { display: block; font-size: 13.5px; font-weight: 700; color: var(--llp-ink); margin-bottom: 3px; }
.llp-lb-mode-desc { display: block; font-size: 12px; color: #657284; line-height: 1.5; }
.llp-lb-mode-field { display: none; margin-top: 10px; }
.llp-lb-mode-field input[type="text"] {
	width: 100%; max-width: 280px; padding: 8px 12px; border-radius: 8px;
	border: 1.5px solid var(--llp-border); font-size: 13px; font-family: inherit;
}

/* My Profile's "Navigation style" choice (sidebar vs. pop-out bloom menu) -
   same card-based radio pattern as .llp-lb-mode-choice above, just under its
   own name rather than reusing that leaderboard-specific one. Kept as a
   small, separate copy rather than a shared/renamed class - low risk of
   drift for two rows of CSS, versus renaming a class already used elsewhere
   on this same page. */
.llp-nav-style-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.llp-nav-style-choice {
	display: block; position: relative; cursor: pointer;
	border: 1.5px solid var(--llp-border); border-radius: 12px; padding: 14px 16px 14px 40px;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.llp-nav-style-choice:hover { border-color: var(--llp-gold); }
.llp-nav-style-choice.is-selected { border-color: var(--llp-gold); background: var(--llp-cream); }
.llp-nav-style-input { position: absolute; top: 16px; left: 14px; margin: 0; accent-color: var(--llp-gold); }
.llp-nav-style-title { display: block; font-size: 13.5px; font-weight: 700; color: var(--llp-ink); margin-bottom: 3px; }
.llp-nav-style-desc { display: block; font-size: 12px; color: #657284; line-height: 1.5; }
/* Quick-access bloom's choice card is a <div> here, not a plain <label>
   wrapping everything like Classic sidebar above - the small Edit button
   (settings-form.php) needs to live inside this same card without also
   toggling the radio, since clicking anywhere inside a <label> activates
   its associated control, buttons included. Only the title/desc text below
   is wrapped in its own <label for="...">, keeping the same click-to-select
   behavior as before for that part; .llp-nav-style-choice above still
   supplies the shared border/padding/is-selected look for both cards. */
.llp-nav-style-choice-bloom { padding-right: 76px; }
.llp-nav-style-choice-label { display: block; cursor: pointer; }
.llp-nav-petals-edit-toggle { position: absolute; top: 12px; right: 12px; padding: 5px 12px; font-size: 12px; }
/* The petal checklist (.llp-chip-grid, shared with Register's Event(s) of
   interest and Person detail's Labels - see those for the base .llp-chip
   rules), right below the Navigation style card's two choices - collapsed
   (0 height, invisible) by default and opened only by the small Edit
   button inside the Quick-access bloom choice above (see settings-form.php's
   inline script), not merely by picking that radio. Still animates
   open/closed via max-height rather than a flat display:none/block swap, so
   it doesn't just pop in and out. max-height's ceiling (600px) is just
   generous headroom for up to 8 short chips' worth of content, not a real
   content-driven height - this never actually clips. */
.llp-nav-petals-field {
	max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
	transition: max-height 0.32s ease, opacity 0.22s ease, margin-top 0.32s ease;
}
.llp-nav-petals-field.is-open { max-height: 600px; opacity: 1; margin-top: 16px; }
/* A chip whose checkbox has been disabled (the 5-picked cap, see
   settings-form.php's updatePetalCheckLimit()) reads as unavailable rather
   than just inert - same idea as a disabled <option>, adapted to a chip. */
.llp-chip:has( .llp-chip-input:disabled ) { opacity: 0.45; cursor: not-allowed; }

/* "Symbols" library picker for a points-ledger entry's icon (v0.13.0) -
   clickable tiles showing the actual icon, same idea as an emoji picker,
   replacing the old plain <select> of icon names. Shared by the front-end
   Person-detail "Add / adjust points" and "Edit this entry" forms - see
   templates/partials/icon-picker.php. */
.llp-icon-picker-grid {
	display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; margin-bottom: 4px;
}
.llp-icon-picker-tile {
	width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
	border: 1.5px solid var(--llp-border); border-radius: 8px; background: #fff;
	color: var(--llp-dark); cursor: pointer; padding: 0;
}
.llp-icon-picker-tile svg { width: 18px; height: 18px; }
.llp-icon-picker-tile:hover { border-color: var(--llp-gold); }
.llp-icon-picker-tile.is-selected {
	border-color: var(--llp-gold); background: var(--llp-cream);
	box-shadow: 0 0 0 2px rgba(41,69,232,0.35);
}

/* "Watch & Learn" (v0.16.0) - Netflix-style browse/search/filter for the
   on-demand library of past conference sessions. Filtering happens entirely
   client-side (see templates/watch-learn.php's inline script) against the
   full video list rendered into the page as JSON, so all of this is styling
   only - no server round trip on filter/search interactions. */
.llp-mockup-banner {
	font-size: 12.5px; color: #C98A22; background: #fdf3e3; border: 1px solid #f0d9ad;
	border-radius: 10px; padding: 10px 16px; margin-bottom: 20px;
}
.llp-wl-tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.llp-wl-tab-pill {
	font-size: 13px; font-weight: 700; color: var(--llp-ink);
	background: var(--llp-cream); border: 1.5px solid var(--llp-border);
	padding: 8px 18px; border-radius: 999px; cursor: pointer;
}
.llp-wl-tab-pill.is-active { background: var(--llp-dark); border-color: var(--llp-dark); color: #fff; }
.llp-wl-tab-pill.is-disabled { color: #98A1AC; cursor: default; }
.llp-wl-soon { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.7; margin-left: 5px; }

.llp-wl-search-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.llp-wl-search-box {
	display: flex; align-items: center; gap: 8px;
	background: #fff; border: 1.5px solid var(--llp-border); border-radius: 999px;
	padding: 8px 14px; flex: 1; min-width: 220px; max-width: 380px;
}
.llp-wl-search-box svg { flex: none; opacity: 0.4; }
.llp-wl-search-box input { border: none; outline: none; font-size: 13px; width: 100%; background: transparent; }

.llp-wl-filters-toggle {
	display: flex; align-items: center; gap: 6px;
	font-size: 12.5px; font-weight: 600; color: var(--llp-ink);
	background: #fff; border: 1.5px solid var(--llp-border); border-radius: 999px;
	padding: 8px 15px; cursor: pointer;
}
.llp-wl-filters-toggle:hover { border-color: var(--llp-dark); }
.llp-wl-filters-count {
	background: var(--llp-gold); color: var(--llp-dark); font-size: 10px; font-weight: 700;
	border-radius: 999px; padding: 1px 6px; display: none;
}
.llp-wl-filters-toggle.has-active .llp-wl-filters-count { display: inline-block; }

.llp-wl-filters {
	display: none; background: #fff; border: 1px solid var(--llp-border);
	border-radius: 10px; padding: 12px 16px; margin-bottom: 14px;
}
.llp-wl-filters.is-open { display: block; }
.llp-wl-filter-group { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--llp-cream); flex-wrap: wrap; }
.llp-wl-filter-group:last-child { border-bottom: none; }
.llp-wl-filter-group-label {
	font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
	color: #657284; font-weight: 700; flex: none; width: 62px;
}
.llp-wl-chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.llp-wl-chip {
	font-size: 11.5px; font-weight: 600; color: var(--llp-ink);
	background: var(--llp-cream); border: 1px solid var(--llp-border);
	padding: 4px 11px; border-radius: 999px; cursor: pointer; user-select: none;
}
.llp-wl-chip:hover { border-color: var(--llp-dark); }
.llp-wl-chip.is-selected { background: var(--llp-dark); border-color: var(--llp-dark); color: #fff; }

.llp-wl-soon-panel {
	text-align: center; padding: 70px 20px; color: #657284; font-size: 13.5px;
	border: 1.5px dashed var(--llp-border); border-radius: 12px; display: flex; flex-direction: column; gap: 6px;
}
.llp-wl-soon-panel strong { color: var(--llp-ink); font-size: 15px; }

.llp-wl-results-count { font-size: 12.5px; color: #657284; margin-bottom: 14px; }
.llp-wl-results-count strong { color: var(--llp-ink); }

/* My Library folders (v0.61.7, Kat: "Videos will be in 'folders'") - one
   collapsible section per event, see renderMyLibrary() in watch-learn.php.
   Plain button + classList-free show/hide (aria-expanded drives the chevron
   rotation and next-sibling display toggle directly from JS) - same
   lightweight toggle pattern as this plugin's other small disclosures. */
.llp-wl-folder { margin-bottom: 28px; }
.llp-wl-folder-head {
	display: flex; align-items: center; gap: 10px; width: 100%;
	background: none; border: none; padding: 0 0 14px; margin: 0; cursor: pointer; text-align: left;
	border-bottom: 1px solid var(--llp-border);
}
.llp-wl-folder-icon { width: 18px; height: 18px; color: var(--llp-gold); flex-shrink: 0; }
.llp-wl-folder-title { font-size: 15px; font-weight: 700; color: var(--llp-ink); }
.llp-wl-folder-count {
	font-size: 12px; font-weight: 600; color: #657284; background: #F5F6F8;
	border-radius: 20px; padding: 2px 10px; margin-left: 2px;
}
.llp-wl-folder-chevron { width: 16px; height: 16px; color: #98A1AC; flex-shrink: 0; margin-left: auto; transition: transform 0.15s ease; }
.llp-wl-folder-head[aria-expanded="false"] .llp-wl-folder-chevron { transform: rotate(-90deg); }
.llp-wl-folder-grid { margin-top: 20px; }

/* auto-fit, same reasoning as .llp-conf-grid/.llp-team-grid above - matters
   most here on a narrow filtered/searched result (2-3 sessions matching),
   where auto-fill's phantom tracks used to leave the results stranded on
   the left of the wider bloom-mode row. */
.llp-wl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; justify-items: center; }
.llp-wl-card {
	background: #fff; border: 1px solid var(--llp-border); border-radius: 12px;
	overflow: hidden; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease;
	width: 100%; max-width: 300px;
}
.llp-wl-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(0,17,85,0.25); }
.llp-wl-thumb { height: 110px; position: relative; display: flex; align-items: flex-end; padding: 10px; }
.llp-wl-event-badge {
	font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
	background: rgba(0,0,0,0.35); color: #fff; padding: 3px 9px; border-radius: 999px;
}
.llp-wl-event-badge-light { background: var(--llp-cream); color: var(--llp-dark); border: 1px solid var(--llp-border); display: inline-block; margin-bottom: 10px; }
.llp-wl-new-badge {
	position: absolute; top: 8px; left: 8px;
	font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
	background: var(--llp-gold); color: var(--llp-dark); padding: 3px 9px; border-radius: 999px;
}
.llp-wl-mockup-badge {
	/* bottom-RIGHT, not bottom-left - the event badge already lives in the
	   thumb's bottom-left corner (it's an in-flow flex child, not absolutely
	   positioned, so it sits wherever .llp-wl-thumb's flex-end alignment
	   puts it) and top-right is taken by the material badge, so bottom-right
	   is the only corner free on a card that has both. */
	position: absolute; bottom: 8px; right: 8px;
	font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
	background: rgba(0,0,0,0.55); color: #fff; padding: 2px 8px; border-radius: 999px;
}
/* Top-right corner badges (material/quiz/completed) - a card can carry any
   combination of these three at once, so rather than each claiming a fixed
   pixel offset (which only worked for two badges), they're flex children of
   one positioned wrapper that stacks however many are actually present. */
.llp-wl-corner-badges {
	position: absolute; top: 8px; right: 8px;
	display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.llp-wl-corner-badges > span {
	width: 24px; height: 24px; border-radius: 50%; flex: none;
	display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.llp-wl-material-badge {
	background: var(--llp-gold); color: var(--llp-dark);
}
.llp-wl-quiz-badge {
	background: #3b4d9c; color: #fff;
}
.llp-wl-play-icon {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
	width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.85);
	display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s;
}
.llp-wl-card:hover .llp-wl-play-icon { opacity: 1; }
/* My Library (v0.38.0) - a locked card's thumbnail is dimmed and its
   lock icon (swapped in by cardHtml() in place of the play triangle - see
   templates/watch-learn.php) stays visible at all times rather than only
   on hover, so "this one's locked" reads at a glance across the grid, not
   just when a member happens to hover it. */
.llp-wl-card.is-locked .llp-wl-thumb { filter: grayscale(0.35) brightness(0.72); }
.llp-wl-card .llp-wl-play-icon.is-locked-icon { opacity: 1; }
.llp-wl-card-body { padding: 12px 14px 14px; }
.llp-wl-card-title { font-size: 13.5px; font-weight: 700; color: var(--llp-ink); margin-bottom: 4px; line-height: 1.3; }
.llp-wl-card-presenter { font-size: 11.5px; color: #657284; margin-bottom: 8px; }
.llp-wl-tag-row { display: flex; flex-wrap: wrap; gap: 5px; }
.llp-wl-tag {
	font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
	background: var(--llp-cream); color: var(--llp-dark); border: 1px solid var(--llp-border);
}
.llp-wl-tag-lang { background: #eef1fb; color: #3b4d9c; border-color: #d9deed; }

/* Discovery shelves (v0.52.0) - Top 10 / Top Picks in Your Country / Popular
   in Your Industry, each a labeled horizontally-scrolling row of the exact
   same .llp-wl-card markup used everywhere else on this page (see
   templates/watch-learn.php's shelfRowHtml()), just narrower so several fit
   in view at once. Kat's call: one consistent shelf treatment for all three
   rather than three different widgets, so this is the only new grid-layout
   CSS needed here - .llp-wl-rank-badge below is the one visual difference,
   Top 10 only. */
.llp-wl-shelf { margin-bottom: 34px; }
.llp-wl-shelf-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.llp-wl-shelf-flag { width: 28px; height: 19px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); flex: none; }
.llp-wl-shelf-flag svg { display: block; width: 100%; height: 100%; }
.llp-wl-shelf-icon {
	width: 30px; height: 30px; border-radius: 50%; background: var(--llp-dark); flex: none;
	display: flex; align-items: center; justify-content: center;
}
.llp-wl-shelf-icon svg { width: 15px; height: 15px; color: var(--llp-gold); }
.llp-wl-shelf-title { font-size: 15px; font-weight: 700; color: var(--llp-ink); }
.llp-wl-shelf-sub { font-size: 11.5px; color: #98A1AC; margin-top: 1px; }
.llp-wl-shelf-row { display: flex; gap: 18px; overflow-x: auto; padding: 4px 4px 12px; }
.llp-wl-shelf-row::-webkit-scrollbar { height: 6px; }
.llp-wl-shelf-row::-webkit-scrollbar-thumb { background: var(--llp-border); border-radius: 999px; }
/* Narrower + non-shrinking, so several sit side by side in a scrolling row
   instead of stretching to fill it the way the main .llp-wl-grid's cards do. */
.llp-wl-shelf-row .llp-wl-card { flex: 0 0 200px; width: 200px; max-width: none; }

/* Rank badge (Top 10 shelf only - Kat: "looks like [the numbered-badge
   card], but is in [its] own separate part... no watched numbers") - top-
   left corner, opposite the top-right corner badges cluster
   (.llp-wl-corner-badges) so the two never collide even when a card has
   both. */
.llp-wl-rank-badge {
	position: absolute; top: 8px; left: 8px; z-index: 2;
	width: 24px; height: 24px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: 'Manrope', 'Inter', sans-serif; font-weight: 800; font-size: 11.5px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.llp-wl-rank-badge.is-top3 { background: var(--llp-gold); color: var(--llp-dark); }
.llp-wl-rank-badge.is-rest { background: rgba(0,0,0,0.55); color: #fff; }

/* Generic full-screen modal chrome - originally built for Watch & Learn's
   session detail view, reused as-is by Speaker Spotlight's profile view
   (see templates/speakers.php) rather than duplicating this ~30 lines of
   overlay/panel/close-button CSS a second time under a different prefix. */
.llp-modal-overlay {
	display: none; position: fixed; inset: 0; background: rgba(15,32,25,0.55);
	align-items: center; justify-content: center; padding: 30px; z-index: 500;
}
.llp-modal-overlay.is-open { display: flex; }
.llp-modal-panel {
	background: #fff; border-radius: 16px; max-width: 640px; width: 100%;
	max-height: 88vh; overflow-y: auto; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4); position: relative;
}
.llp-modal-close {
	position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
	background: rgba(0,0,0,0.35); color: #fff; border: none; cursor: pointer; font-size: 14px;
	display: flex; align-items: center; justify-content: center; z-index: 1;
}
/* Report a problem (v0.52.0) - same shape/position as .llp-modal-close right
   next to it, 40px to its left (30px button + 10px gap) so both sit in the
   modal's top-right corner without touching. Only ever appears inside the
   Watch & Learn detail modal (#llp-wl-overlay, which goes dark - see below),
   so it's styled dark-native from the start rather than needing a light-
   theme default plus an override, the way a couple of older pieces of this
   modal did before Kat caught them unreadable (see the quiz-area comment
   further down). */
.llp-modal-report-btn {
	position: absolute; top: 14px; right: 54px; width: 30px; height: 30px; border-radius: 50%;
	background: rgba(255,255,255,0.16); color: #fff; border: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center; z-index: 1;
}
.llp-modal-report-btn:hover { background: rgba(255,255,255,0.28); }

.llp-wl-detail-video { height: 280px; border-radius: 16px 16px 0 0; overflow: hidden; background: radial-gradient(130% 160% at 10% -20%, rgba(255,255,255,0.22), transparent 55%), linear-gradient(135deg, var(--llp-dark), var(--llp-navy-2)); }
.llp-wl-detail-video iframe { width: 100%; height: 100%; display: block; border: none; }
.llp-wl-detail-video-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.llp-wl-play-icon-lg { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; }
.llp-wl-detail-body { padding: 22px 26px 26px; }
.llp-wl-detail-body h3 { font-size: 20px; margin: 0 0 6px; color: var(--llp-dark); }
.llp-wl-about-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: #657284; font-weight: 700; margin-bottom: 6px; }
.llp-wl-about { font-size: 13.5px; line-height: 1.6; color: var(--llp-ink); margin-bottom: 18px; }
.llp-mockup-note {
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
	color: #C98A22; background: #fdf3e3; border: 1px solid #f0d9ad; border-radius: 999px;
	padding: 4px 12px; display: inline-block; margin-bottom: 12px;
}
.llp-wl-extra-material {
	display: flex; align-items: center; gap: 10px;
	border: 1.5px solid var(--llp-border); border-radius: 10px; padding: 12px 14px;
	background: var(--llp-cream);
}
.llp-wl-extra-material svg { flex: none; color: var(--llp-dark); }
.llp-wl-extra-material-label { font-size: 12.5px; font-weight: 600; color: var(--llp-ink); }

@media (max-width: 640px) {
	.llp-wl-filter-group { flex-direction: column; align-items: flex-start; }
	.llp-wl-filter-group-label { width: auto; }
}

/* Speaker Spotlight (v0.17.0) - roster grid + profile modal (reuses the
   generic .llp-modal-* chrome above). Sessions shown inside a speaker's
   profile reuse .llp-wl-card/.llp-wl-grid/.llp-wl-tag as-is - same visual
   language as the Watch & Learn library they're pulled from. */
/* auto-fit, same reasoning as the other card grids above - the roster is
   typically just a handful of speakers. */
.llp-spk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; justify-items: center; }
.llp-spk-card {
	background: #fff; border: 1px solid var(--llp-border); border-radius: 12px;
	padding: 18px; text-align: center; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease;
	width: 100%; max-width: 260px;
}
.llp-spk-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(0,17,85,0.25); }
.llp-spk-photo, .llp-spk-photo-fallback {
	width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 12px; display: block;
	border: 1.5px solid var(--llp-gold); object-fit: cover;
}
.llp-spk-photo-fallback { display: flex; align-items: center; justify-content: center; font-size: 20px; }
.llp-spk-name { font-size: 14px; font-weight: 700; color: var(--llp-ink); margin-bottom: 2px; }
.llp-spk-company { font-size: 12px; color: #657284; }

/* Nationality ribbon (v0.46.0, Kat: "a little ribbon to speakers to show
   their nationalities" - picked from 5 mockup directions, "idea 4") - a
   small round flag badge sitting on the photo's own edge, the same "status
   dot on an avatar" pattern as any chat app's online indicator. .llp-spk-
   photo-wrap is the shared positioning anchor for both places this shows:
   the grid cards and the profile popup header - see speakerCardHtml()/
   llpSpkOpenDetail() in templates/speakers.php. Its margin-bottom (not the
   photo's own, see below) is what actually spaces the photo from the name/
   company text under it now that the photo is wrapped. */
.llp-spk-photo-wrap { position: relative; display: inline-block; margin-bottom: 12px; }
.llp-spk-photo-wrap .llp-spk-photo,
.llp-spk-photo-wrap .llp-spk-photo-fallback { margin: 0; }
.llp-spk-flag-ribbon {
	position: absolute; bottom: 0; right: -2px; width: 22px; height: 22px;
	border-radius: 50%; overflow: hidden; border: 2.5px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3); z-index: 2;
}
.llp-spk-flag-ribbon-svg { display: block; width: 100%; height: 100%; }

/* Spotlight card treatment (v0.40.0, Kat: "really make those in spotlight
   look like they are in spotlight"). Featured cards flip to the same
   deep-navy gradient used elsewhere in the app (login screen, video
   thumbnails) so they read as a clearly different tier from the plain
   white "All Speakers" cards below them, with a bigger gold-ringed photo.
   No separate "Spotlight" badge - Kat felt the section header above the
   grid already makes that obvious. */
.llp-spk-card.is-featured {
	background: linear-gradient(160deg, var(--llp-dark) 0%, var(--llp-navy-2) 100%);
	border: none;
	padding: 26px 18px;
}
.llp-spk-card.is-featured .llp-spk-photo,
.llp-spk-card.is-featured .llp-spk-photo-fallback {
	width: 84px; height: 84px; font-size: 22px; border: 2px solid var(--llp-gold);
}
.llp-spk-card.is-featured .llp-spk-name { color: #fff; }
.llp-spk-card.is-featured .llp-spk-company { color: rgba(255,255,255,0.6); }

.llp-spk-detail-header { display: flex; align-items: center; gap: 16px; padding: 26px 26px 0; }
.llp-spk-detail-header .llp-spk-photo,
.llp-spk-detail-header .llp-spk-photo-fallback { width: 72px; height: 72px; margin: 0; flex: none; }
/* .llp-spk-photo-wrap's own margin-bottom (spacing under the card's centered
   photo, see that rule above) would otherwise throw off vertical centering
   here, where the photo sits beside the name/company text instead of above
   it - gap on the flex row already provides the spacing this needs. */
.llp-spk-detail-header .llp-spk-photo-wrap { margin-bottom: 0; flex: none; }
.llp-spk-detail-header h3 { font-size: 20px; margin: 0 0 2px; color: var(--llp-dark); }
.llp-spk-detail-body { padding: 20px 26px 26px; }
.llp-spk-bio { font-size: 13.5px; line-height: 1.6; color: var(--llp-ink); margin: 16px 0; }
.llp-spk-sessions-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: #657284; font-weight: 700; margin: 22px 0 10px; }

/* Speaker history (v0.40.0, Kat) - the curated per-speaker "past events"
   list, shown only in the profile popup, see templates/speakers.php. */
.llp-spk-history-list { list-style: none; margin: 0 0 4px; padding: 0; }
.llp-spk-history-item { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--llp-border); font-size: 13px; color: var(--llp-ink); }
.llp-spk-history-item:last-child { border-bottom: none; }
.llp-spk-history-year { font-weight: 700; color: var(--llp-gold-ink); flex-shrink: 0; min-width: 42px; }

/* Watch & Learn gamification (v0.18.0) - completion checkmark on cards,
   in-modal quiz, Leaderboard tab, and the Dashboard progress card. See
   includes/class-llp-watch-learn-progress.php for the data side. */
.llp-wl-completed-badge {
	/* Same corner-collision reasoning as .llp-wl-mockup-badge above - a card
	   can have a completed badge alongside the New/Example/material/quiz
	   badges, so this is just another flex child of .llp-wl-corner-badges
	   rather than claiming its own corner. */
	background: var(--llp-dark); color: #fff;
}
.llp-wl-completed-label { color: var(--llp-dark); font-weight: 700; }

.llp-wl-quiz { padding: 0 26px 26px; border-top: 1px solid var(--llp-cream); margin-top: 4px; }
.llp-wl-quiz-intro { font-size: 12.5px; color: var(--llp-ink); margin: 18px 0 14px; }
.llp-wl-quiz-question { margin-bottom: 16px; }
.llp-wl-quiz-question-text { font-size: 13px; font-weight: 700; color: var(--llp-ink); margin-bottom: 8px; }
.llp-wl-quiz-choice {
	display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--llp-ink);
	padding: 6px 0; cursor: pointer;
}
.llp-wl-quiz-result { font-size: 12.5px; font-weight: 600; margin-bottom: 12px; padding: 8px 12px; border-radius: 8px; }
.llp-wl-quiz-result.is-wrong { background: #fdeceb; color: var(--llp-error); border: 1px solid #f4c7c0; }
.llp-wl-quiz-passed {
	display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
	color: var(--llp-dark); padding: 18px 0;
}
.llp-wl-quiz-locked {
	display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
	color: var(--llp-muted); padding: 18px 0;
}

.llp-wl-leaderboard-status { margin-bottom: 16px; }
.llp-wl-leaderboard-list { display: flex; flex-direction: column; gap: 6px; max-width: 480px; }
.llp-wl-leaderboard-row {
	display: flex; align-items: center; gap: 12px; background: #fff;
	border: 1px solid var(--llp-border); border-radius: 10px; padding: 10px 16px;
}
/* "This is you" on the leaderboard is an achievement highlight, same
   yellow-not-blue reasoning as the credit amount/rank gauge above; the
   background tint is warmed just slightly off pure yellow rather than the
   old cream tone, so it still reads as "highlighted row" against the cool
   canvas instead of a leftover warm swatch. */
.llp-wl-leaderboard-row.is-me { border-color: var(--llp-gold); background: #fffaeb; }
.llp-wl-leaderboard-rank { font-size: 12.5px; font-weight: 700; color: #657284; width: 30px; flex: none; }
.llp-wl-leaderboard-name { font-size: 13px; font-weight: 600; color: var(--llp-ink); flex: 1; }
.llp-wl-leaderboard-count { font-size: 12px; color: #657284; }
.llp-wl-leaderboard-rank-chip {
	font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
	color: var(--llp-dark); background: var(--llp-cream); border: 1px solid var(--llp-border);
	border-radius: 999px; padding: 3px 10px; flex: none;
}
/* Per-tier graphic (Kat: "add a 'graphic' to the hourly ranking") - only
   rendered on the "Time spent watching" ranking, and only when that row's
   tier actually has one set (see watch_time_leaderboard()'s rankImageUrl
   and renderLeaderboard() in templates/watch-learn.php). Sits right before
   the rank chip it illustrates, so the two always read as one unit. */
.llp-wl-leaderboard-rank-image {
	width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex: none;
}

/* ===================================================================
   Standalone Leaderboards page (v0.36.0) - see templates/leaderboards.php.
   Reuses the .llp-wl-tab-pill/.llp-wl-chip/.llp-wl-leaderboard-row classes
   above as-is, in their plain light-card form (this page never gets the
   .llp-wl-page dark reskin further below) - approved as Concept from the
   mockup round, "make it grand" pass. */
.llp-lb-page { max-width: 920px; margin: 0 auto; }
.llp-lb-tabs-center { justify-content: center; }

.llp-lb-scope-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.llp-lb-scope-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #657284; font-weight: 700; }

/* Small hand-drawn SVG flag chip (see LLP_Countries::flag_svg()) - replaces
   Unicode flag emoji, which render inconsistently (or not at all - some
   Windows configurations show a raw country code instead) across OS/browser.
   Same footprint wherever it's used: inline in a chip, a leaderboard row, or
   the podium's nameplate. */
.llp-lb-flag-icon {
	width: 20px; height: 14px; border-radius: 3px; flex: none;
	box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset; vertical-align: middle;
}
.llp-wl-chip .llp-lb-flag-icon { margin-right: 5px; margin-bottom: -2px; box-shadow: 0 0 0 1px var(--llp-border) inset; }
.llp-wl-leaderboard-row .llp-lb-flag-icon { box-shadow: 0 0 0 1px var(--llp-border) inset; }

.llp-lb-filter-group-center { justify-content: center; }

/* The card holding scope/rank filters + the #4-and-down ranked list -
   deliberately calmer than the stage above it, so the stage stays the one
   moment that pulls the eye first. */
.llp-lb-card {
	background: #fff; border: 1px solid var(--llp-border); border-radius: 16px;
	padding: 22px 26px 26px;
}
.llp-lb-card .llp-wl-leaderboard-list { margin: 0 auto; }
.llp-lb-card .llp-wl-leaderboard-row { max-width: 620px; margin: 0 auto; }

/* ---- The stage: a real hero moment, not another card ---- */
.llp-lb-stage {
	position: relative; overflow: hidden; text-align: center;
	background: radial-gradient(120% 160% at 50% -10%, #1a3d68 0%, var(--llp-dark) 55%, #051426 100%);
	border-radius: 22px; padding: 44px 30px 0; margin-bottom: 22px;
	box-shadow: 0 30px 60px -24px rgba(7,28,54,0.55), 0 1px 0 rgba(255,255,255,0.06) inset;
}
.llp-lb-stage-glow {
	position: absolute; top: -20%; left: 50%; width: 620px; height: 620px;
	transform: translateX(-50%); border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, rgba(214,165,46,0.35) 0%, rgba(214,165,46,0.12) 38%, transparent 68%);
}
.llp-lb-stage-rays {
	position: absolute; top: -10%; left: 50%; width: 1000px; height: 1000px;
	transform: translateX(-50%); pointer-events: none; opacity: 0.5;
	background: repeating-conic-gradient(from 0deg at 50% 50%,
		rgba(255,255,255,0.05) 0deg 4deg, transparent 4deg 16deg);
	-webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 60%);
	mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 60%);
}
.llp-lb-stage-eyebrow {
	position: relative; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--llp-gold); margin-bottom: 30px;
}
.llp-lb-stage-empty {
	position: relative; color: rgba(255,255,255,0.7); font-size: 13.5px; padding-bottom: 44px;
}

/* Olympic-style top-3 podium - gold centered/tallest, silver left, bronze
   right. Each place is one visually fused object: nameplate on top, a
   ribbon-medal badge pinned on the avatar, the avatar's own bottom edge
   overlapping into the riser below it, and the riser carries a large
   watermark numeral of its own. Scaled up and lifted onto the dark stage so
   it reads as the centerpiece of the page rather than a component in it. */
.llp-lb-podium {
	position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 34px; flex-wrap: wrap;
}
.llp-lb-podium-place { display: flex; flex-direction: column; align-items: center; width: 208px; text-align: center; }
.llp-lb-crown { width: 40px; height: 25px; margin-bottom: 6px; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4)); }
.llp-lb-podium-name { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.25; margin-bottom: 4px; }
.llp-lb-podium-meta { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: rgba(255,255,255,0.6); margin-bottom: 14px; }

.llp-lb-podium-figure { position: relative; margin-bottom: -20px; z-index: 2; }
.llp-lb-podium-avatar {
	width: 84px; height: 84px; font-size: 24px; border-width: 2.5px;
	box-shadow: 0 10px 22px -6px rgba(0,0,0,0.6);
}
.llp-lb-medal-svg {
	position: absolute; width: 38px; height: 50px; right: -12px; bottom: -8px; z-index: 3;
	filter: drop-shadow(0 3px 5px rgba(0,0,0,0.45));
}

.llp-lb-podium-step {
	width: 100%; border-radius: 12px 12px 0 0; box-shadow: inset 0 2px 0 rgba(255,255,255,0.35);
	display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; position: relative; z-index: 1;
}
.llp-lb-podium-step-num {
	font-family: 'Manrope', 'Inter', sans-serif; font-size: 38px; font-weight: 800;
	color: rgba(255,255,255,0.42); line-height: 1;
}
.llp-lb-podium-place.is-gold .llp-lb-podium-avatar { border-color: var(--llp-gold); }
.llp-lb-podium-place.is-gold .llp-lb-podium-step { height: 118px; background: linear-gradient(180deg, #E7C25C, var(--llp-gold)); }
.llp-lb-podium-place.is-gold .llp-lb-podium-name { font-size: 18px; }
.llp-lb-podium-place.is-gold .llp-lb-podium-avatar { width: 96px; height: 96px; font-size: 27px; }
.llp-lb-podium-place.is-silver .llp-lb-podium-avatar { border-color: #A7B0BC; }
.llp-lb-podium-place.is-silver .llp-lb-podium-step { height: 82px; background: linear-gradient(180deg, #C7CDD6, #A7B0BC); }
.llp-lb-podium-place.is-bronze .llp-lb-podium-avatar { border-color: #C3803F; }
.llp-lb-podium-place.is-bronze .llp-lb-podium-step { height: 58px; background: linear-gradient(180deg, #D69C63, #C3803F); }

@media (max-width: 700px) {
	.llp-lb-podium { gap: 14px; }
	.llp-lb-podium-place { width: 30%; }
}

/* "My Progress" tab (v0.20.0) - rank ladder + full badge gallery, see
   renderMyProgress() in templates/watch-learn.php. */
.llp-wl-progress-section { margin-bottom: 36px; }
.llp-wl-progress-section-head { margin-bottom: 18px; }
.llp-wl-progress-section-head h3 { font-size: 15px; margin: 0 0 4px; color: var(--llp-ink); }
.llp-wl-progress-section-head p { margin: 0; }

/* Rank flower card (v0.22.0, shape replaced in v0.29.0 - see .llp-rank-flower's
   docblock further down this file) - the same flower graphic as the
   Dashboard's Rank card, just wrapped in a plain white card instead of the
   Dashboard's dark navy one, since this tab's page background is cream.
   .is-light swaps the center label to dark-on-light instead of white-on-dark
   (the flower's own "track" color is already baked in as translucent navy
   for this variant - see llpWlRenderRankFlowerSvg() in
   templates/watch-learn.php) - built in llpWlRenderRankFlower() there. */
.llp-wl-rank-gauge-card {
	background: #fff; border: 1px solid var(--llp-border); border-radius: 14px;
	padding: 22px; max-width: 280px; text-align: center; margin-bottom: 28px;
}
.llp-wl-rank-gauge-tier { font-size: 18px; font-weight: 800; color: var(--llp-dark); margin-bottom: 4px; }
.llp-rank-flower.is-light .llp-rank-gauge-value { color: var(--llp-ink); text-shadow: none; }
.llp-rank-flower.is-light .llp-rank-gauge-unit { color: #98A1AC; text-shadow: none; }

.llp-wl-rank-ladder { display: flex; align-items: flex-start; max-width: 760px; }
/* box-sizing: border-box so each step's horizontal padding counts toward its
   flex-basis instead of adding on top of it - without this, 3 steps at
   33.33% + padding each add up to just over 100% of the row, and the mobile
   3-per-row layout below silently wraps to 2 per row instead. */
.llp-wl-rank-step { position: relative; flex: 1; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 4px; }
/* Each step's marker is the same medal glyph used for the ring meter's
   center badge on the Dashboard (see .llp-rank-ring-badge in this file) and
   for the "trophy" ledger icon (LLP_Points::icon_svg()) - a locked tier
   still shows its medal, just faded, rather than swapping to a bare number,
   so the whole ladder reads as "which medals have I got" the way an airline
   status ladder shows every tier's badge whether you've reached it or not. */
.llp-wl-rank-step-dot {
	width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
	background: #fff; border: 2px solid var(--llp-border); color: #98A1AC;
	margin-bottom: 8px; position: relative; z-index: 1;
}
.llp-wl-rank-step-dot svg { width: 18px; height: 18px; }
.llp-wl-rank-step.is-unlocked .llp-wl-rank-step-dot { border-color: var(--llp-dark); background: var(--llp-dark); color: #fff; }
.llp-wl-rank-step.is-current .llp-wl-rank-step-dot {
	border-color: var(--llp-gold); background: var(--llp-gold); color: var(--llp-dark);
	box-shadow: 0 0 0 4px rgba(214,165,46,0.28);
}
.llp-wl-rank-step-label { font-size: 11.5px; font-weight: 700; color: #98A1AC; line-height: 1.3; }
.llp-wl-rank-step.is-unlocked .llp-wl-rank-step-label,
.llp-wl-rank-step.is-current .llp-wl-rank-step-label { color: var(--llp-ink); }
.llp-wl-rank-step.is-current .llp-wl-rank-step-label { color: var(--llp-dark); font-weight: 800; }
.llp-wl-rank-step-points { font-size: 10.5px; color: #98A1AC; margin-top: 2px; }
.llp-wl-rank-step.is-unlocked .llp-wl-rank-step-points,
.llp-wl-rank-step.is-current .llp-wl-rank-step-points { color: #657284; }
.llp-wl-rank-step-connector {
	position: absolute; top: 18px; left: 50%; width: 100%; height: 2px; background: var(--llp-border); z-index: 0;
}
.llp-wl-rank-step-connector.is-unlocked { background: var(--llp-dark); }
@media (max-width: 640px) {
	.llp-wl-rank-ladder { flex-wrap: wrap; row-gap: 20px; }
	.llp-wl-rank-step { flex: 0 0 33.33%; }
	.llp-wl-rank-step-connector { top: 18px; }
	/* 3 steps per row here (see flex-basis above) - the connector for the
	   3rd step in each row would otherwise stretch out past the row edge
	   toward a tier that's actually down on the next row, not beside it. */
	.llp-wl-rank-step:nth-child(3n) .llp-wl-rank-step-connector { display: none; }
}

.llp-wl-badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-width: 760px; }
.llp-wl-badge-card {
	background: #fff; border: 1px solid var(--llp-border); border-radius: 12px; padding: 16px 14px; text-align: center;
}
.llp-wl-badge-card.is-locked { opacity: 0.55; }
.llp-wl-badge-card-icon {
	width: 40px; height: 40px; border-radius: 999px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;
	background: var(--llp-cream); color: var(--llp-dark);
}
.llp-wl-badge-card.is-locked .llp-wl-badge-card-icon { background: var(--llp-border); color: #98A1AC; }
.llp-wl-badge-card-icon svg { width: 18px; height: 18px; }
.llp-wl-badge-card-label { font-size: 12.5px; font-weight: 700; color: var(--llp-ink); margin-bottom: 2px; }
.llp-wl-badge-card-points { font-size: 11px; color: #657284; margin-bottom: 10px; }
.llp-wl-badge-earned-date { font-size: 10.5px; font-weight: 600; color: var(--llp-dark); }
.llp-wl-badge-progress-track { height: 5px; border-radius: 999px; background: var(--llp-cream); overflow: hidden; margin-bottom: 4px; }
.llp-wl-badge-progress-fill { height: 100%; background: var(--llp-gold); border-radius: 999px; }
.llp-wl-badge-progress-label { font-size: 10.5px; color: #98A1AC; }

/* ============================================================
   Watch & Learn dark theme (Kat: "there I'd like to have dark background
   for more of a 'Netflix' feel"). Scoped to .llp-wl-page, which is set
   ONLY on watch-learn.php's own .llp-dashboard wrapper (see that
   template) - nothing else in the portal is touched, including Speaker
   Spotlight even though it reuses .llp-wl-card/.llp-wl-grid/.llp-wl-tag
   directly (templates/speakers.php): those keep their original light
   styling there, since this is Watch & Learn's own identity, not a
   shared component restyle.

   Reuses the same "designed surface" gradient already used for
   .llp-conf-photo/.llp-credit-card (a soft radial sheen over a
   var(--llp-dark) -> var(--llp-navy-2) diagonal) rather than inventing a
   new palette or reaching for Netflix's literal black-and-red - the goal
   is a premium dark surface in the portal's own navy/gold language, not
   a knockoff of another brand's look.

   Kept as one block at the very end of the file (rather than editing
   each rule above in place) so every override wins the cascade on
   source order alone, without having to out-specificity each of the
   dozens of individual light-theme rules it's replacing. :has() is the
   same technique already relied on for the bloom-mode width fix above -
   it needs .llp-app-main to reach in and check its .llp-dashboard
   child's class, since the page-identifying class lives on the
   descendant, not on .llp-app-main itself. */
.llp-app-main:has(.llp-wl-page) {
	background:
		radial-gradient(130% 90% at 15% -10%, rgba(255,255,255,0.07), transparent 55%),
		linear-gradient(160deg, var(--llp-dark), var(--llp-navy-2) 130%);
}
.llp-app-main:has(.llp-wl-page) .llp-topbar-user-name { color: #fff; }
.llp-app-main:has(.llp-wl-page) .llp-topbar-chevron { color: rgba(255,255,255,0.5); }
/* v0.61.7: the dropdown panel itself (.llp-topbar-menu) always renders as a
   normal light popover - like any menu, it sits on top of the page rather
   than adopting the page's own background - so nothing inside it (including
   .llp-topbar-menu-logout, replacing the old standalone .llp-topbar-logout
   link this dark-mode override used to target) needs a dark-page variant. */

.llp-wl-page .llp-welcome-name,
.llp-wl-page .llp-wl-progress-section-head h3 { color: #fff; }
.llp-wl-page .llp-page-subtitle,
.llp-wl-page .llp-wl-results-count,
.llp-wl-page .llp-wl-progress-section-head p { color: rgba(255,255,255,0.55); }
.llp-wl-page .llp-wl-results-count strong { color: #fff; }

/* v0.61.7 - My Library folder headers on the Watch & Learn page's own dark
   background, same treatment as the other dark-mode overrides just above. */
.llp-wl-page .llp-wl-folder-head { border-bottom-color: rgba(255,255,255,0.14); }
.llp-wl-page .llp-wl-folder-title { color: #fff; }
.llp-wl-page .llp-wl-folder-count { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }
.llp-wl-page .llp-wl-folder-chevron { color: rgba(255,255,255,0.5); }

.llp-wl-page .llp-mockup-banner { background: rgba(214,165,46,0.14); border-color: rgba(214,165,46,0.35); color: var(--llp-gold); }

/* Tabs - unselected pills move from the light theme's cream fill to
   translucent white (a solid light fill would fight the dark canvas);
   the active pill goes gold instead of navy, since navy would all but
   disappear against this background. */
.llp-wl-page .llp-wl-tab-pill { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.85); }
.llp-wl-page .llp-wl-tab-pill.is-active { background: var(--llp-gold); border-color: var(--llp-gold); color: var(--llp-dark); }
.llp-wl-page .llp-wl-tab-pill.is-disabled { color: rgba(255,255,255,0.35); }

.llp-wl-page .llp-wl-search-box,
.llp-wl-page .llp-wl-filters-toggle,
.llp-wl-page .llp-wl-filters { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }
.llp-wl-page .llp-wl-search-box input { color: #fff; }
.llp-wl-page .llp-wl-search-box input::placeholder { color: rgba(255,255,255,0.45); }
.llp-wl-page .llp-wl-search-box svg { color: #fff; opacity: 0.6; }
.llp-wl-page .llp-wl-filters-toggle { color: #fff; }
.llp-wl-page .llp-wl-filters-toggle:hover { border-color: var(--llp-gold); }
.llp-wl-page .llp-wl-filter-group { border-bottom-color: rgba(255,255,255,0.10); }
.llp-wl-page .llp-wl-filter-group-label { color: rgba(255,255,255,0.55); }
.llp-wl-page .llp-wl-chip { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); color: #fff; }
.llp-wl-page .llp-wl-chip:hover { border-color: var(--llp-gold); }
.llp-wl-page .llp-wl-chip.is-selected { background: var(--llp-gold); border-color: var(--llp-gold); color: var(--llp-dark); }

.llp-wl-page .llp-wl-soon-panel { border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.55); }
.llp-wl-page .llp-wl-soon-panel strong { color: #fff; }

/* Session cards deliberately keep their existing white card body -
   thumbnails/badges/the hover play-icon already read fine on either
   background, and a light card floating on a dark canvas is exactly the
   Netflix pattern too (their rows aren't dark-on-dark either). Only the
   hover shadow is deepened so it still shows up against a dark page
   instead of nearly vanishing the way the light-theme shadow would. */
.llp-wl-page .llp-wl-card:hover { box-shadow: 0 14px 34px -10px rgba(0,0,0,0.6); }

.llp-wl-page .llp-wl-leaderboard-row { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.llp-wl-page .llp-wl-leaderboard-row.is-me { background: rgba(214,165,46,0.16); border-color: var(--llp-gold); }
.llp-wl-page .llp-wl-leaderboard-name { color: #fff; }
.llp-wl-page .llp-wl-leaderboard-rank,
.llp-wl-page .llp-wl-leaderboard-count { color: rgba(255,255,255,0.55); }
.llp-wl-page .llp-wl-leaderboard-rank-chip { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); color: #fff; }

.llp-wl-page .llp-wl-rank-gauge-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.llp-wl-page .llp-wl-rank-gauge-tier { color: #fff; }

.llp-wl-page .llp-wl-rank-step-dot { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.55); }
.llp-wl-page .llp-wl-rank-step-connector { background: rgba(255,255,255,0.18); }
.llp-wl-page .llp-wl-rank-step-label { color: rgba(255,255,255,0.4); }
.llp-wl-page .llp-wl-rank-step.is-unlocked .llp-wl-rank-step-label,
.llp-wl-page .llp-wl-rank-step.is-current .llp-wl-rank-step-label { color: #fff; }
.llp-wl-page .llp-wl-rank-step.is-current .llp-wl-rank-step-label { color: var(--llp-gold); }
.llp-wl-page .llp-wl-rank-step-points { color: rgba(255,255,255,0.32); }
.llp-wl-page .llp-wl-rank-step.is-unlocked .llp-wl-rank-step-points,
.llp-wl-page .llp-wl-rank-step.is-current .llp-wl-rank-step-points { color: rgba(255,255,255,0.6); }

.llp-wl-page .llp-wl-badge-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.llp-wl-page .llp-wl-badge-card-icon { background: rgba(255,255,255,0.1); color: var(--llp-gold); }
.llp-wl-page .llp-wl-badge-card.is-locked .llp-wl-badge-card-icon { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.3); }
.llp-wl-page .llp-wl-badge-card-label { color: #fff; }
.llp-wl-page .llp-wl-badge-card-points { color: rgba(255,255,255,0.5); }
.llp-wl-page .llp-wl-badge-progress-track { background: rgba(255,255,255,0.14); }
.llp-wl-page .llp-wl-badge-progress-label { color: rgba(255,255,255,0.4); }

/* Discovery shelves (Top 10 / Top Picks in Your Country / Popular in Your
   Industry, v0.52.0) - .llp-wl-shelf-* above was written with light-page
   colors (var(--llp-ink) text, var(--llp-dark) icon circle), but this whole
   page is ALSO dark-reskinned (see .llp-app-main:has(.llp-wl-page) above),
   so those choices landed as near-invisible dark-on-dark - the exact bug
   already fixed once in the quiz area (see #llp-wl-overlay note below).
   Caught in QA before shipping; overridden here the same way every other
   .llp-wl-page element on this page already is. */
.llp-wl-page .llp-wl-shelf-title { color: #fff; }
.llp-wl-page .llp-wl-shelf-sub { color: rgba(255,255,255,0.55); }
.llp-wl-page .llp-wl-shelf-icon { background: rgba(255,255,255,0.1); }
.llp-wl-page .llp-wl-shelf-flag { box-shadow: 0 0 0 1px rgba(255,255,255,0.18); }
.llp-wl-page .llp-wl-shelf-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); }

/* Video detail modal ("episode" overlay) - goes dark too, scoped to this
   page's own overlay id (#llp-wl-overlay, set in templates/watch-learn.php)
   so Speaker Spotlight's identical .llp-modal-panel markup for its own
   profile modal (templates/speakers.php, a different overlay id) is
   completely untouched. */
#llp-wl-overlay .llp-modal-panel { background: var(--llp-dark); }
#llp-wl-overlay .llp-wl-detail-body h3 { color: #fff; }
#llp-wl-overlay .llp-wl-about-label { color: rgba(255,255,255,0.5); }
#llp-wl-overlay .llp-wl-about { color: rgba(255,255,255,0.8); }
#llp-wl-overlay .llp-wl-extra-material { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
#llp-wl-overlay .llp-wl-extra-material-label { color: #fff; }
#llp-wl-overlay .llp-modal-close { background: rgba(255,255,255,0.16); }
/* The quiz area (.llp-wl-quiz and its children) was missed when this modal
   went dark - Kat: "change color of quiz". Its text was still var(--llp-ink),
   a near-black navy meant for a white card, so on this dark panel it was
   all but unreadable. Same light-on-dark treatment as .llp-wl-about above. */
#llp-wl-overlay .llp-wl-quiz { border-top-color: rgba(255,255,255,0.18); }
#llp-wl-overlay .llp-wl-quiz-intro { color: rgba(255,255,255,0.8); }
#llp-wl-overlay .llp-wl-quiz-question-text { color: #fff; }
#llp-wl-overlay .llp-wl-quiz-choice { color: rgba(255,255,255,0.8); }
#llp-wl-overlay .llp-wl-quiz-passed { color: #fff; }
#llp-wl-overlay .llp-wl-quiz-locked { color: rgba(255,255,255,0.6); }

/* Report a problem panel (v0.52.0) - built dark-native (see the
   .llp-modal-report-btn comment above), not a light-theme default that
   needed overriding, so this one never has the "unreadable dark text on a
   dark panel" bug the quiz area above had before Kat caught it. Reuses
   .llp-field's label/select/textarea markup as-is (their light backgrounds
   read fine as form controls sitting on a dark panel), just recolors the
   label text - .llp-field label's own rule is a tie in specificity, so
   this one winning is purely "declared later in the file," which is fine
   since both only ever apply within this one panel. */
.llp-wl-report-panel { padding: 18px 26px 22px; border-top: 1px solid rgba(255,255,255,0.18); }
.llp-wl-report-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.llp-wl-report-panel-head strong { color: #fff; font-size: 14.5px; }
.llp-wl-report-panel-close {
	width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.16);
	color: #fff; border: none; cursor: pointer; font-size: 11px;
	display: flex; align-items: center; justify-content: center;
}
.llp-wl-report-panel label { color: rgba(255,255,255,0.6); }
.llp-wl-report-panel-error { color: #ffb4b2; font-size: 12.5px; margin-bottom: 10px; }
.llp-wl-report-panel-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---- Notification bell (v0.62.0) - top bar, left of the account menu. See
   partials/app-topbar.php / assets/js/notifications.js. The dropdown is the
   same card chrome as .llp-topbar-menu, and needs the same explicit
   [hidden] rule (an author display:flex beats the browser's [hidden]). ---- */
.llp-topbar-bell-wrap { position: relative; }
.llp-topbar-bell {
	position: relative; display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%; color: var(--llp-ink);
	text-decoration: none; transition: background 0.15s ease;
}
.llp-topbar-bell:hover { background: #F5F6F8; color: var(--llp-ink); }
.llp-topbar-bell svg { width: 20px; height: 20px; }
.llp-topbar-bell-count {
	position: absolute; top: 1px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px;
	border-radius: 9px; background: var(--llp-error); color: #fff;
	font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
	box-shadow: 0 0 0 2px var(--llp-canvas);
}
.llp-notif-menu {
	position: absolute; top: calc(100% + 8px); right: -60px; z-index: 50; /* same layer as .llp-topbar-menu */
	width: 360px; max-width: calc(100vw - 32px); max-height: 70vh; overflow-y: auto;
	background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
	box-shadow: 0 12px 32px rgba(7,28,54,0.14); padding: 6px; display: flex; flex-direction: column;
}
.llp-notif-menu[hidden] { display: none; }
.llp-notif-head { padding: 8px 10px 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #98A1AC; }
.llp-notif-empty { margin: 0; padding: 6px 10px 12px; font-size: 13px; color: #657284; }
.llp-notif-item { border-radius: 8px; padding: 4px; }
.llp-notif-item + .llp-notif-item { margin-top: 2px; }
.llp-notif-item.is-unread { background: var(--llp-cream); }
.llp-notif-link { display: flex; align-items: flex-start; gap: 10px; padding: 6px; border-radius: 8px; color: var(--llp-ink); text-decoration: none; font-size: 13px; line-height: 1.45; }
.llp-notif-link:hover { background: rgba(7,28,54,0.04); color: var(--llp-ink); }
.llp-notif-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; font-size: 12px; }
.llp-notif-text { display: block; }
.llp-notif-time { display: block; margin-top: 2px; font-size: 11px; color: #98A1AC; }
.llp-notif-actions { display: flex; gap: 8px; padding: 2px 6px 8px 50px; }
.llp-notif-actions form { margin: 0; }
/* Dark Watch & Learn page - the bell itself sits on the dark canvas there
   (the dropdown stays white, same as the account menu). */
.llp-app-main:has(.llp-wl-page) .llp-topbar-bell { color: #fff; }
.llp-app-main:has(.llp-wl-page) .llp-topbar-bell:hover { background: rgba(255,255,255,0.1); color: #fff; }
.llp-app-main:has(.llp-wl-page) .llp-topbar-bell-count { box-shadow: none; }
@media (max-width: 600px) {
	.llp-notif-menu { position: fixed; top: 64px; left: 16px; right: 16px; width: auto; max-width: none; }
}

/* Sidebar count pill (Peer Sphere requests waiting for an answer). */
.llp-nav-count {
	margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 10px;
	background: var(--llp-gold); color: var(--llp-dark); font-size: 11px; font-weight: 700; text-align: center;
}

/* ---- Peer Sphere (v0.62.0) - templates/peer-sphere.php ---- */
.llp-peer-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 28px; }
.llp-peer-tab {
	display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
	border: 1px solid #E5E7EB; background: #fff; color: var(--llp-ink); text-decoration: none;
	font-size: 13px; font-weight: 600; transition: border-color 0.15s ease, background 0.15s ease;
}
.llp-peer-tab:hover { border-color: var(--llp-gold); color: var(--llp-ink); }
.llp-peer-tab.is-active { background: var(--llp-dark); border-color: var(--llp-dark); color: #fff; }
.llp-peer-count { min-width: 20px; padding: 1px 7px; border-radius: 10px; background: var(--llp-error); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.llp-peer-count.is-quiet { background: var(--llp-cream); color: var(--llp-gold-ink); }
.llp-peer-tab.is-active .llp-peer-count.is-quiet { background: rgba(255,255,255,0.16); color: #fff; }

.llp-peer-hint { font-size: 12px; color: #98A1AC; line-height: 1.5; }
.llp-peer-hint a { color: var(--llp-gold-ink); }
.llp-peer-btn-sm { padding: 8px 16px; font-size: 12px; }
.llp-peer-inline-form { display: inline; margin: 0; }
.llp-peer-room-intro { margin: 0 0 16px; }

.llp-peer-join { max-width: 640px; }
.llp-peer-join .llp-card-title { margin-bottom: 12px; }
.llp-peer-share-rows { margin: 18px 0 22px; }

.llp-peer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.llp-peer-card {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	padding: 26px 20px 22px; margin-bottom: 0;
	transition: box-shadow 0.2s cubic-bezier(.4,0,.2,1), border-color 0.2s cubic-bezier(.4,0,.2,1);
}
.llp-peer-card:hover { box-shadow: 0 8px 24px rgba(7,28,54,0.10); border-color: #CBD1DB; }
.llp-peer-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; font-size: 22px; border: 1.5px solid var(--llp-gold); }
.llp-peer-avatar.is-small { width: 44px; height: 44px; font-size: 15px; }
.llp-peer-card .llp-peer-avatar { margin-bottom: 12px; }
.llp-peer-name { font-size: 15px; font-weight: 700; color: var(--llp-ink); }
.llp-peer-title { font-size: 13px; color: #657284; margin-top: 2px; }
.llp-peer-company { font-size: 13px; color: #657284; }
.llp-peer-role {
	display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 999px;
	font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	background: #F1F3F6; color: #4A5868;
}
.llp-peer-role.is-speaker { background: var(--llp-cream); color: var(--llp-gold-ink); }
.llp-peer-role.is-sponsor { background: var(--llp-dark); color: var(--llp-gold); }
.llp-peer-role.is-moderator { background: #E6EEF7; color: var(--llp-navy-2); }
.llp-peer-role.is-organizer { background: #E7F3ED; color: var(--llp-success); }
.llp-peer-actions { margin-top: auto; padding-top: 16px; width: 100%; }
.llp-peer-state { display: inline-block; font-size: 12px; font-weight: 600; color: #98A1AC; }
.llp-peer-state.is-connected { color: var(--llp-success); text-decoration: none; }
.llp-peer-state.is-incoming { display: block; margin-bottom: 8px; color: var(--llp-gold-ink); }
.llp-peer-respond { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* "Connect" opens its note form with a native <details> - no JS needed. */
.llp-peer-connect summary { list-style: none; display: inline-block; }
.llp-peer-connect summary::-webkit-details-marker { display: none; }
.llp-peer-connect[open] summary { display: none; }
.llp-peer-connect form { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.llp-peer-connect textarea,
.llp-peer-note-form textarea {
	width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #E5E7EB; border-radius: 8px;
	font: inherit; font-size: 13px; color: var(--llp-ink); resize: vertical; background: #fff;
}
.llp-peer-connect textarea:focus,
.llp-peer-note-form textarea:focus { outline: none; border-color: var(--llp-gold); box-shadow: 0 0 0 3px rgba(214,165,46,0.18); }
.llp-peer-connect .llp-btn { align-self: flex-end; }

/* Requests view - one row per person. */
.llp-peer-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-top: 1px solid #EEF0F3; }
.llp-peer-row:first-of-type { border-top: none; padding-top: 0; }
.llp-peer-row-body { flex: 1; min-width: 0; }
.llp-peer-row .llp-peer-respond { justify-content: flex-end; }
.llp-peer-note {
	margin-top: 8px; padding: 10px 12px; border-left: 3px solid var(--llp-gold); border-radius: 6px;
	background: var(--llp-cream); font-size: 13px; line-height: 1.55; color: var(--llp-ink);
}

/* My Connections. */
.llp-peer-conn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-bottom: 32px; }
.llp-peer-conn { margin-bottom: 0; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.llp-peer-conn-head { display: flex; align-items: center; gap: 14px; }
.llp-peer-conn-head .llp-peer-avatar { width: 56px; height: 56px; font-size: 18px; }
.llp-peer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.llp-peer-contact li { display: flex; gap: 10px; font-size: 13px; }
.llp-peer-contact-label { width: 64px; flex-shrink: 0; color: #98A1AC; }
.llp-peer-contact a { color: var(--llp-gold-ink); font-weight: 600; text-decoration: none; word-break: break-all; }
.llp-peer-contact a:hover { text-decoration: underline; }
.llp-peer-met { border-top: 1px solid #EEF0F3; padding-top: 14px; }
.llp-peer-met-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--llp-gold-ink); }
.llp-peer-met-event { margin: 4px 0 10px; font-size: 13px; font-weight: 600; color: var(--llp-ink); }
.llp-peer-note-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.llp-peer-note-form .llp-btn { align-self: flex-end; }
.llp-peer-share-card { max-width: 640px; }

@media (max-width: 600px) {
	.llp-peer-row { flex-wrap: wrap; }
	.llp-peer-row .llp-peer-respond { width: 100%; justify-content: flex-start; padding-left: 58px; }
	.llp-peer-conn-list { grid-template-columns: 1fr; }
}

/* ---- Membership levels (v0.64.0) - see LLP_Membership. ---- */

/* Watch & Learn: "You're on the free plan" banner (page canvas) - light
   default plus the dark .llp-wl-page variant, since that's the only page
   it appears on. */
.llp-wl-free-banner {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	padding: 16px 20px; margin-bottom: 24px; border-radius: 12px;
	background: var(--llp-cream); border: 1px solid rgba(214,165,46,0.45); color: var(--llp-ink); font-size: 14px;
}
.llp-wl-page .llp-wl-free-banner { background: rgba(214,165,46,0.12); border-color: rgba(214,165,46,0.35); color: #fff; }
.llp-wl-page .llp-wl-free-banner strong { color: var(--llp-gold); }
.llp-wl-free-banner .llp-btn { padding: 10px 18px; white-space: nowrap; }
.llp-wl-page .llp-wl-free-banner .llp-btn-primary { background: var(--llp-gold); color: var(--llp-dark); }

/* Inside a locked session's detail view (the white panel). */
.llp-wl-locked-cta {
	display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	padding: 14px 16px; margin-bottom: 18px; border-radius: 10px;
	background: var(--llp-cream); border-left: 3px solid var(--llp-gold); font-size: 14px; color: var(--llp-ink);
}
.llp-wl-locked-cta .llp-btn { padding: 9px 16px; }

/* My Library: a folder's locked recordings are only counted, never shown. */
.llp-wl-folder-locked {
	display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 12px 14px; border-radius: 10px;
	background: #F5F6F8; color: #657284; font-size: 13px;
}
.llp-wl-folder-locked svg { flex-shrink: 0; }
.llp-wl-page .llp-wl-folder-locked { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }

/* Membership page - templates/membership.php. */
.llp-ms-heading { margin: 8px 0 16px; font-size: 18px; color: var(--llp-ink); }
.llp-ms-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); gap: 20px; margin-bottom: 32px; }
.llp-ms-plan { position: relative; display: flex; flex-direction: column; margin-bottom: 0; padding: 28px; }
.llp-ms-plan.is-featured { border: 2px solid var(--llp-gold); }
.llp-ms-plan-flag {
	position: absolute; top: -12px; left: 24px; padding: 3px 10px; border-radius: 999px;
	background: var(--llp-gold); color: var(--llp-dark); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.llp-ms-plan-name { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--llp-gold-ink); }
.llp-ms-plan-price { margin: 8px 0 10px; font-size: 28px; font-weight: 700; color: var(--llp-ink); }
.llp-ms-plan-price del { font-size: 16px; color: #98A1AC; margin-right: 6px; }
.llp-ms-plan-note { flex: 1; margin: 0 0 18px; }
.llp-ms-plan-btn { text-align: center; }

/* ---- Peer Sphere room, v0.65.0 (Kat: "It should really be clear, that
   it's made for connecting") - header with counts, the 3-step strip, the
   "waiting for you" line, role chips, left-aligned cards with a full-width
   Connect button and the "wants to talk about" line. Overrides the v0.62.0
   centred card above. ---- */
.llp-peer-ico { width: 18px; height: 18px; flex-shrink: 0; vertical-align: -3px; }
.llp-peer-eyebrow { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--llp-gold-ink); }
.llp-peer-eyebrow .llp-peer-ico { width: 15px; height: 15px; }
.llp-peer-stats { display: flex; gap: 10px; }
.llp-peer-stat {
	display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 10px 14px;
	background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; text-decoration: none; color: var(--llp-ink);
}
.llp-peer-stat strong { font-size: 22px; line-height: 1.1; color: var(--llp-dark); }
.llp-peer-stat span { font-size: 12px; color: #657284; }
a.llp-peer-stat:hover { border-color: var(--llp-gold); color: var(--llp-ink); }

.llp-peer-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.llp-peer-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; min-width: 0; }
.llp-peer-step-ico { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--llp-cream); color: var(--llp-gold-ink); flex-shrink: 0; }
.llp-peer-steps strong { display: block; font-size: 14px; color: var(--llp-ink); }
.llp-peer-steps small { display: block; font-size: 12px; color: #657284; }

.llp-peer-waiting {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	margin-bottom: 18px; padding: 12px 16px; border-radius: 12px; text-decoration: none;
	background: var(--llp-cream); border: 1px solid rgba(214,165,46,0.5); color: var(--llp-gold-ink); font-size: 14px;
}
.llp-peer-waiting:hover { border-color: var(--llp-gold); color: var(--llp-gold-ink); }
.llp-peer-waiting strong { color: var(--llp-ink); }
.llp-peer-waiting-cta { font-weight: 700; }

.llp-peer-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.llp-peer-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.llp-peer-chip {
	display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
	border: 1px solid #D9DDE3; background: #fff; color: var(--llp-ink); font-size: 13px; font-weight: 600; text-decoration: none;
}
.llp-peer-chip span { font-weight: 500; color: #98A1AC; }
.llp-peer-chip:hover { border-color: var(--llp-gold); color: var(--llp-ink); }
.llp-peer-chip.is-active { background: var(--llp-dark); border-color: var(--llp-dark); color: #fff; }
.llp-peer-chip.is-active span { color: rgba(255,255,255,0.7); }
.llp-peer-search { position: relative; display: flex; align-items: center; flex: 0 1 280px; min-width: 200px; margin: 0; }
.llp-peer-search .llp-peer-ico { position: absolute; left: 12px; color: #98A1AC; width: 16px; height: 16px; }
.llp-peer-search input[type="search"] {
	width: 100%; box-sizing: border-box; padding: 9px 12px 9px 36px; border: 1px solid #D9DDE3; border-radius: 999px;
	font: inherit; font-size: 13px; background: #fff; color: var(--llp-ink);
}
.llp-peer-search input[type="search"]:focus { outline: none; border-color: var(--llp-gold); box-shadow: 0 0 0 3px rgba(214,165,46,0.18); }

.llp-peer-card { align-items: stretch; text-align: left; gap: 10px; padding: 20px; }
.llp-peer-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.llp-peer-card .llp-peer-avatar { width: 52px; height: 52px; margin-bottom: 0; font-size: 17px; }
.llp-peer-card-who { min-width: 0; }
.llp-peer-card .llp-peer-title { margin-top: 1px; }
.llp-peer-card .llp-peer-role { align-self: flex-start; margin-top: 0; }
.llp-peer-card.is-incoming { border: 2px solid var(--llp-gold); background: #FFFDF6; }
.llp-peer-topics { margin: 0; font-size: 13px; line-height: 1.5; color: var(--llp-ink); }
.llp-peer-topics span { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--llp-gold-ink); margin-bottom: 1px; }
.llp-peer-card .llp-peer-actions { padding-top: 6px; }
.llp-peer-card .llp-peer-state { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 0; }
.llp-peer-card .llp-peer-state.is-incoming { justify-content: flex-start; padding: 0; margin-bottom: 6px; }
.llp-peer-card .llp-peer-note { margin: 0 0 10px; }
.llp-peer-card .llp-peer-respond { justify-content: stretch; }
.llp-peer-card .llp-peer-respond .llp-peer-inline-form { flex: 1; display: block; }
.llp-peer-card .llp-peer-respond .llp-btn { width: 100%; }
.llp-peer-connect { width: 100%; }
.llp-peer-connect-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; }
.llp-peer-empty { text-align: center; }

.llp-peer-field-label { display: block; margin: 6px 0 6px; font-size: 13px; font-weight: 600; color: var(--llp-ink); }
.llp-peer-input {
	width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #D9DDE3; border-radius: 8px;
	font: inherit; font-size: 14px; color: var(--llp-ink); background: #fff;
}
.llp-peer-input:focus { outline: none; border-color: var(--llp-gold); box-shadow: 0 0 0 3px rgba(214,165,46,0.18); }

@media (max-width: 700px) {
	.llp-peer-steps { grid-template-columns: 1fr; }
	.llp-peer-stats { width: 100%; }
	.llp-peer-stat { flex: 1; }
	.llp-peer-search { flex: 1 1 100%; }
}

/* ---- Watch & Learn cards, v0.65.3 (Kat picked "b" from a live preview) -
   pictures in the standard 16:9 video shape so they're never cropped
   (the old fixed 110px band cut off faces and titles), and narrower cards
   (5 per row on a wide screen, fewer as it gets smaller). Picture size to
   upload: 1280 x 720 px. Also applies wherever these cards are reused
   (Speaker Spotlight, My Library folders). ---- */
.llp-wl-thumb { height: auto; aspect-ratio: 16 / 9; }
.llp-wl-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.llp-wl-grid .llp-wl-card { max-width: 230px; }

/* Phones - Kat: "on phones, i need it to behave like netflix does":
   the shelves (Top 10, picks for your country/industry) become swipe
   rows that snap card by card, with the next card peeking in from the
   right edge so it's obvious there's more; the full lists (Sessions,
   New & Hot, My Library folders) become a compact 2-column grid of
   pictures + titles. */
@media (max-width: 640px) {
	.llp-wl-shelf-row {
		gap: 10px; margin: 0 -16px; padding: 4px 16px 12px; scroll-padding-left: 16px;
		scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.llp-wl-shelf-row::-webkit-scrollbar { display: none; }
	.llp-wl-shelf-row .llp-wl-card { flex: 0 0 44%; width: 44%; scroll-snap-align: start; }
	.llp-wl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
	.llp-wl-grid .llp-wl-card { max-width: none; }
	.llp-wl-card:hover { transform: none; }
	.llp-wl-card-body { padding: 8px 10px 10px; }
	.llp-wl-card-title { font-size: 12.5px; margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.llp-wl-card .llp-wl-card-presenter,
	.llp-wl-card .llp-wl-tag-row { display: none; }
	.llp-wl-thumb { padding: 6px; }
	.llp-wl-event-badge { font-size: 9px; }
}

/* ---------------------------------------------------------------------
   Community Board (v0.67.0, redesigned v0.68.0 - "naozaj take welcoming")
   See templates/board.php: welcome + starters, Question of the week,
   room tiles, compact post box, tabs, feed.
   --------------------------------------------------------------------- */
.llp-board-page { max-width: 980px; }
.llp-board-ico { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -4px; }

/* Room colours - light tile, darker ink (light/dark pairs from one hue). */
.llp-room-teal   { --room-bg: #E1F5EE; --room-ink: #04342C; --room-sub: #0F6E56; --room-accent: #1D9E75; }
.llp-room-purple { --room-bg: #EEEDFE; --room-ink: #26215C; --room-sub: #534AB7; --room-accent: #7F77DD; }
.llp-room-blue   { --room-bg: #E6F1FB; --room-ink: #042C53; --room-sub: #185FA5; --room-accent: #378ADD; }
.llp-room-amber  { --room-bg: #FAEEDA; --room-ink: #412402; --room-sub: #854F0B; --room-accent: #BA7517; }
.llp-room-coral  { --room-bg: #FAECE7; --room-ink: #4A1B0C; --room-sub: #993C1D; --room-accent: #D85A30; }
.llp-room-navy   { --room-bg: #E9EDF3; --room-ink: #071C36; --room-sub: #3B4F6B; --room-accent: #071C36; }

/* A + B: welcome banner and Question of the week, side by side when both. */
.llp-board-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 28px; align-items: stretch; }
.llp-board-hero.has-question { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.llp-board-welcome { background: #F5EBD2; border-radius: 18px; padding: 26px 28px; color: #412402; }
.llp-board-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9A7217; }
.llp-board-welcome h1 { margin: 6px 0 6px; font-size: 30px; line-height: 1.15; color: var(--llp-dark); }
.llp-board-welcome > p { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: #633806; max-width: 520px; }
.llp-board-starters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.llp-board-starter {
	display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: 14px; background: #fff;
	color: var(--llp-dark); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s;
}
.llp-board-starter:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(7, 28, 54, 0.10); color: var(--llp-dark); }
.llp-board-starter .llp-board-ico { width: 22px; height: 22px; color: #BA7517; margin-bottom: 6px; }
.llp-board-starter strong { font-size: 14px; }
.llp-board-starter span { font-size: 12px; color: #854F0B; }

.llp-board-question { background: var(--llp-dark); color: #fff; border-radius: 18px; padding: 24px 24px 14px; display: flex; flex-direction: column; }
.llp-board-question-label { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--llp-gold); }
.llp-board-question-text { font-size: 19px; line-height: 1.4; font-weight: 600; margin: 10px 0 16px; color: #fff; }
.llp-board-question-foot { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #B5C3D6; margin-top: auto; }
.llp-board-faces { display: inline-flex; }
.llp-board-faces .llp-board-avatar.is-face { width: 28px; height: 28px; font-size: 10px; border: 2px solid var(--llp-dark); margin-left: -8px; background: #F5EBD2; color: var(--llp-dark); display: inline-flex; align-items: center; justify-content: center; }
.llp-board-faces .llp-board-avatar.is-face.is-anon { background: #CBD3DE; color: #4B5563; }
.llp-board-faces .llp-board-avatar.is-face:first-child { margin-left: 0; }
.llp-board-question-cta {
	align-self: flex-start; margin-top: 16px; padding: 9px 18px; border-radius: 999px; background: var(--llp-gold); color: var(--llp-dark);
	font-size: 13.5px; font-weight: 700; text-decoration: none; transition: filter 0.15s;
}
.llp-board-question-cta:hover { color: var(--llp-dark); filter: brightness(1.06); }

/* The answers open here, full width under the hero (v0.68.1) - the question card itself never grows. */
.llp-board-answers { background: #fff; border: 1px solid var(--llp-gold); border-radius: 16px; padding: 18px 20px 8px; margin: -12px 0 28px; }
.llp-board-answers-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.llp-board-answers-head p { margin: 4px 0 8px; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--llp-ink); }
.llp-board-answers .llp-board-comments > summary { pointer-events: none; }

/* C: rooms. */
.llp-board-section-title { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--llp-muted); margin: 0 0 12px; }
.llp-board-rooms-wrap { margin-bottom: 28px; }
.llp-board-rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.llp-board-room {
	display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 16px; min-height: 150px;
	background: var(--room-bg); color: var(--room-ink); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s;
}
.llp-board-room:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(7, 28, 54, 0.10); color: var(--room-ink); }
.llp-board-room-ico { width: 38px; height: 38px; border-radius: 11px; background: #fff; color: var(--room-accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.llp-board-room-ico .llp-board-ico { width: 20px; height: 20px; vertical-align: 0; }
.llp-board-room strong { font-size: 15.5px; line-height: 1.3; font-weight: 700; }
.llp-board-room-desc { font-size: 12.5px; line-height: 1.45; color: var(--room-sub); }
.llp-board-room-stat { margin-top: auto; padding-top: 10px; font-size: 12px; font-weight: 600; color: var(--room-sub); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.llp-board-live { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--room-ink); }
.llp-board-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--room-accent); }

/* Inside a room. */
.llp-board-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--llp-muted); text-decoration: none; margin-bottom: 12px; }
.llp-board-back:hover { color: var(--llp-ink); }
.llp-board-roomhead { display: flex; align-items: center; gap: 16px; background: var(--room-bg); color: var(--room-ink); border-radius: 18px; padding: 22px 24px; margin-bottom: 22px; }
.llp-board-roomhead h1 { margin: 0; font-size: 26px; color: var(--room-ink); }
.llp-board-roomhead p { margin: 4px 0 0; color: var(--room-sub); font-size: 14px; }
.llp-board-roomhead .llp-board-room-ico { margin: 0; width: 48px; height: 48px; flex: 0 0 auto; }
.llp-board-roomhead .llp-board-room-stat { margin: 0 0 0 auto; padding: 0; }

/* Compact post box - a <details> that opens on click. */
.llp-board-composer { background: #fff; border: 1px solid var(--llp-border); border-radius: 16px; padding: 14px 16px; margin-bottom: 18px; }
.llp-board-composer > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.llp-board-composer > summary::-webkit-details-marker { display: none; }
.llp-board-composer-pill { flex: 1 1 auto; padding: 11px 16px; border: 1px solid #D9DDE3; border-radius: 999px; color: var(--llp-muted); font-size: 14px; transition: border-color 0.15s, background 0.15s; }
.llp-board-composer > summary:hover .llp-board-composer-pill { border-color: var(--llp-gold); background: #FFFDF6; }
.llp-board-composer[open] > summary { display: none; }
.llp-board-composer textarea,
.llp-board-comment-form textarea {
	width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #D9DDE3; border-radius: 12px;
	font: inherit; font-size: 15px; line-height: 1.55; color: var(--llp-ink); background: #fff; resize: vertical;
}
.llp-board-composer textarea:focus,
.llp-board-comment-form textarea:focus { outline: none; border-color: var(--llp-gold); box-shadow: 0 0 0 3px rgba(214,165,46,0.18); }
.llp-board-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.llp-board-select { padding: 8px 12px; border: 1px solid #D9DDE3; border-radius: 999px; font: inherit; font-size: 13px; background: #fff; color: var(--llp-ink); max-width: 260px; }
.llp-board-post-btn { margin-left: auto; }
.llp-board-privacy { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--llp-muted); }
.llp-board-privacy .llp-board-ico { width: 14px; height: 14px; margin-top: 2px; }

/* "Post as" - one segmented row. */
.llp-board-seg { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.llp-board-seg-label { font-size: 12px; font-weight: 600; color: var(--llp-muted); }
.llp-board-seg-opt { position: relative; cursor: pointer; }
.llp-board-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.llp-board-seg-opt span { display: inline-block; padding: 6px 12px; border: 1px solid #D9DDE3; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #4B5563; background: #fff; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.llp-board-seg-opt input:checked + span { background: var(--llp-dark); border-color: var(--llp-dark); color: #fff; }
.llp-board-seg-opt input:focus-visible + span { box-shadow: 0 0 0 3px rgba(214,165,46,0.35); }
.llp-board-seg-opt.is-disabled { cursor: not-allowed; opacity: 0.45; }

.llp-board-locked { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #fff; border: 1px solid var(--llp-border); border-radius: 16px; padding: 14px 18px; margin-bottom: 18px; }
.llp-board-locked p { margin: 0; }

/* Tabs. */
.llp-board-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--llp-border); margin-bottom: 16px; overflow-x: auto; }
.llp-board-tabs a { padding: 10px 0; font-size: 14px; font-weight: 600; color: var(--llp-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.llp-board-tabs a:hover { color: var(--llp-ink); }
.llp-board-tabs a.is-active { color: var(--llp-ink); border-bottom-color: var(--llp-gold); }

.llp-board-empty { text-align: center; padding: 36px 20px; background: #fff; border: 1px dashed #D9DDE3; border-radius: 16px; color: var(--llp-muted); }
.llp-board-empty .llp-board-ico { width: 30px; height: 30px; color: var(--llp-gold); }
.llp-board-empty p { margin: 6px 0 0; }
.llp-board-empty strong { color: var(--llp-ink); font-size: 16px; }

/* Post cards. */
.llp-board-post { background: #fff; border: 1px solid var(--llp-border); border-radius: 16px; padding: 18px 20px 10px; margin-bottom: 14px; }
.llp-board-post.is-question { border-color: var(--llp-gold); }
.llp-board-head { display: flex; align-items: center; gap: 12px; }
.llp-board-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; font-size: 15px; }
.llp-board-avatar.is-anon { background: #E9ECF0; color: #7A8594; display: flex; align-items: center; justify-content: center; }
.llp-board-avatar.is-anon svg { width: 55%; height: 55%; }
.llp-board-avatar.is-team { background: var(--llp-gold); color: var(--llp-dark); }
.llp-board-who { min-width: 0; flex: 1 1 auto; }
.llp-board-name { font-size: 15px; line-height: 1.3; font-weight: 700; color: var(--llp-ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.llp-board-comment .llp-board-name { font-size: 13.5px; }
.llp-board-meta { font-size: 12.5px; color: var(--llp-muted); font-weight: 400; }
.llp-board-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: #F5EBD2; color: var(--llp-gold-ink); }
.llp-board-tag.is-you { background: #E7EEF8; color: #2A4A7A; }
.llp-board-roomchip { flex: 0 0 auto; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--room-bg); color: var(--room-ink); text-decoration: none; white-space: nowrap; }
.llp-board-roomchip:hover { color: var(--room-ink); filter: brightness(0.97); }
.llp-board-body { margin: 12px 0 10px; font-size: 15px; line-height: 1.6; color: var(--llp-ink); overflow-wrap: anywhere; }
.llp-board-summary { display: flex; gap: 12px; font-size: 12.5px; color: var(--llp-muted); padding: 2px 0 8px; }
.llp-board-count { display: inline-flex; align-items: center; gap: 4px; }
.llp-board-count .llp-board-ico { width: 15px; height: 15px; color: var(--llp-gold-ink); vertical-align: 0; }

.llp-board-reactbar { display: flex; gap: 2px; border-top: 1px solid var(--llp-border); padding: 4px 0; }
.llp-board-reactbar form { margin: 0; flex: 1 1 0; min-width: 0; }
.llp-board-react { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: none; border: 0; border-radius: 10px; padding: 8px 4px; font: inherit; font-size: 13px; font-weight: 600; color: #4B5563; cursor: pointer; white-space: nowrap; }
.llp-board-react:hover { background: #F3F4F6; }
.llp-board-react.is-active { color: var(--llp-gold-ink); background: #FBF5E6; }
.llp-board-react .llp-board-ico { vertical-align: 0; }

.llp-board-comments { border-top: 1px solid var(--llp-border); }
.llp-board-comments > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 600; color: #4B5563; padding: 10px 0; list-style: none; }
.llp-board-comments > summary::-webkit-details-marker { display: none; }
.llp-board-comments > summary:hover { color: var(--llp-ink); }
.llp-board-comment { display: flex; gap: 10px; margin: 10px 0; }
.llp-board-comment .llp-board-avatar { width: 34px; height: 34px; font-size: 12px; }
.llp-board-comment-bubble { background: #F4F5F7; border-radius: 14px; padding: 9px 13px; min-width: 0; flex: 1 1 auto; }
.llp-board-comment-bubble .llp-board-body { margin: 3px 0 2px; font-size: 14px; }
.llp-board-comment-form { margin: 10px 0 8px; }
.llp-board-comment-foot { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 8px; }

.llp-board-small-actions { display: flex; gap: 12px; }
.llp-board-small-actions form { margin: 0; }
.llp-board-post-actions { justify-content: flex-end; margin: 2px 0 4px; }
.llp-board-link { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--llp-muted); cursor: pointer; }
.llp-board-link:hover { color: var(--llp-ink); text-decoration: underline; }
.llp-board-pager { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 24px; }

@media (max-width: 1100px) {
	.llp-board-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.llp-board-hero.has-question { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.llp-board-welcome { padding: 20px 18px; }
	.llp-board-welcome h1 { font-size: 24px; }
	.llp-board-starters { grid-template-columns: minmax(0, 1fr); }
	.llp-board-starter { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
	.llp-board-starter .llp-board-ico { margin: 0; }
	.llp-board-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.llp-board-room { min-height: 0; padding: 14px; }
	.llp-board-room-desc { display: none; }
	.llp-board-roomhead { flex-wrap: wrap; padding: 18px; }
	.llp-board-post { padding: 14px 14px 8px; }
	.llp-board-head { flex-wrap: wrap; }
	.llp-board-react span { display: none; }
	.llp-board-post-btn { margin-left: 0; width: 100%; }
}

/* Pop-up success messages (v0.69.0) - see assets/js/toasts.js. */
.llp-toasts { position: fixed; top: 20px; right: 20px; z-index: 100000; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.llp-toast {
	pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px 13px 16px; border-radius: 14px;
	background: var(--llp-dark); color: #fff; font-size: 14px; line-height: 1.45; box-shadow: 0 12px 30px rgba(7, 28, 54, 0.25);
	border-left: 4px solid var(--llp-gold); opacity: 0; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease;
}
.llp-toast.is-in { opacity: 1; transform: none; }
.llp-toast.is-leaving { opacity: 0; transform: translateY(-8px); }
.llp-toast span { flex: 1 1 auto; }
.llp-toast-close { background: none; border: 0; color: rgba(255,255,255,0.6); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.llp-toast-close:hover { color: #fff; }
@media (max-width: 640px) {
	.llp-toasts { top: auto; bottom: 16px; right: 16px; left: 16px; max-width: none; }
}


/* v0.71.0 - Log in / Register / Forgot / Reset / Check email / Verify: one
   white card centred on the navy page (Kat picked design "B"). Replaces the
   old split screen, whose right half was an empty navy block whenever no
   photo was set in Settings. A photo, if set, now sits behind the card
   (.llp-auth-right becomes the page background) - so no template changes. */
.llp-auth-page,
.llp-auth-page.llp-auth-page-wide {
	display: flex;
	grid-template-columns: none;
	background: var(--llp-dark);
	padding: 40px 16px;
	box-sizing: border-box;
	overflow-y: auto;
}
body.llp-auth-fullscreen .llp-auth-page { overflow-y: auto; }
.llp-auth-right,
.llp-auth-right.llp-has-photo {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 0;
	opacity: 0.35;
}
.llp-auth-left {
	position: relative;
	z-index: 1;
	margin: auto;
	width: 100%;
	max-width: 460px;
	max-height: none;
	overflow: visible;
	padding: 40px 40px 36px;
	border-radius: 18px;
	box-sizing: border-box;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.llp-auth-page-wide .llp-auth-left { max-width: 600px; }
.llp-auth-left-inner { max-width: none; margin: 0; }
.llp-auth-left .llp-brand-lockup { margin-bottom: 28px; }
.llp-auth-form h2 { margin-bottom: 20px; }
@media (max-width: 600px) {
	.llp-auth-page, .llp-auth-page.llp-auth-page-wide { padding: 16px; }
	.llp-auth-left { padding: 28px 20px 24px; border-radius: 14px; }
}

/* Registration steps (v0.71.0). */
.llp-reg-steps {
	list-style: none;
	display: flex;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
}
.llp-reg-steps[hidden] { display: none; }
.llp-reg-steps li {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 10px;
	border-top: 3px solid var(--llp-border);
	font-size: 13px;
	font-weight: 600;
	color: #8A94A6;
	cursor: default;
}
.llp-reg-steps li.is-done { border-top-color: var(--llp-gold); color: var(--llp-dark); cursor: pointer; }
.llp-reg-steps li.is-current { border-top-color: var(--llp-gold); color: var(--llp-dark); }
.llp-reg-step-num {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	background: #EEF0F4;
	color: #657284;
}
.llp-reg-steps li.is-current .llp-reg-step-num,
.llp-reg-steps li.is-done .llp-reg-step-num { background: var(--llp-dark); color: #fff; }
.llp-reg-step[hidden] { display: none; }
.llp-reg-actions {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-top: 8px;
}
.llp-reg-actions[hidden], .llp-reg-back[hidden] { display: none; }
.llp-reg-actions .llp-reg-next,
.llp-reg-actions button[type="submit"] { margin-left: auto; }
.llp-reg-actions-final { margin-top: 20px; }
.llp-reg-interest-error { color: #B32D2E; font-size: 13px; margin: 8px 0 0; }
.llp-reg-interest-error[hidden] { display: none; }
@media (max-width: 420px) {
	.llp-reg-step-name { font-size: 12px; }
}

/* v0.71.1, Kat: "ten font mi tam nesedi" - Log in / Register used to keep
   the theme's own font (see .llp-app-shell above); they now use the same
   Inter body + Manrope headings as the rest of the portal. */
.llp-auth-page {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--llp-body);
}
.llp-auth-page h1, .llp-auth-page h2, .llp-auth-page h3 {
	font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	letter-spacing: -0.01em;
	font-weight: 700;
}
.llp-auth-page input, .llp-auth-page select, .llp-auth-page button, .llp-auth-page textarea {
	font-family: inherit;
}

/* v0.72.1 - the little maze on the "Page not found" card. */
.llp-maze { margin: 20px 0 4px; text-align: center; }
.llp-maze[hidden] { display: none; }
.llp-maze-status { margin: 0 0 10px; font-size: 14px; min-height: 1.4em; }
.llp-maze canvas {
	display: block;
	width: 100%;
	max-width: 280px;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--llp-border);
	border-radius: 12px;
	touch-action: none;
}
.llp-maze.is-won canvas { border-color: var(--llp-gold); box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.25); }
.llp-maze.is-won .llp-maze-status { color: var(--llp-dark); font-weight: 600; }
.llp-maze-pad {
	display: grid;
	grid-template-columns: repeat(3, 44px);
	grid-template-areas: ". up ." "left down right";
	gap: 6px;
	justify-content: center;
	margin: 12px 0 6px;
}
.llp-maze-btn {
	height: 40px;
	border: 1px solid var(--llp-border);
	border-radius: 10px;
	background: #fff;
	color: var(--llp-dark);
	font-size: 18px;
	cursor: pointer;
}
.llp-maze-btn:hover { border-color: var(--llp-gold); }
.llp-maze-btn[data-move="0"] { grid-area: up; }
.llp-maze-btn[data-move="3"] { grid-area: left; }
.llp-maze-btn[data-move="2"] { grid-area: down; }
.llp-maze-btn[data-move="1"] { grid-area: right; }
.llp-maze-new {
	background: none;
	border: 0;
	color: var(--llp-gold-ink, #8A6A22);
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

/* v0.72.2 - a little shake when the leader walks into a wall. */
@media (prefers-reduced-motion: no-preference) {
	.llp-maze.is-bump canvas { animation: llp-maze-bump 0.25s ease; }
}
@keyframes llp-maze-bump {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}

/* v0.72.3, Kat: "nech tam nemame len random stock photo alebo len farbu".
   v0.72.4: the dotted "network" read as constellations ("pri tejto farbe sa
   tomu nevyhneme"), so it's fine gold contour lines, like a terrain map -
   one static SVG, still one CSS rule (no template changes). A photo set in
   Settings still wins, dimmed. */
.llp-auth-right {
	opacity: 1;
	background-color: var(--llp-dark);
	background-image: none;
	background-size: cover;
	background-position: center;
}
.llp-auth-right::after { display: none; }
.llp-auth-right.llp-has-photo { background-image: var(--llp-auth-photo); opacity: 0.35; }

/* v0.73.3 - the card stays centred on the navy page (v0.71.0 rules above);
   behind it, the EBCG flower made of dots (assets/js/auth-flower.js), on the
   same soft navy glow as ebcg.com. Kat kept "simple, minimum text" from
   v0.73.1: no extra lines of copy. */
.llp-auth-right {
	background-color: var(--llp-dark);
	background-image: radial-gradient(circle at 50% 50%, #0E3A6E 0%, #0B1F3A 62%, #071528 100%);
}
.llp-auth-right.llp-has-photo { background-image: var(--llp-auth-photo); opacity: 1; }
.llp-auth-flower { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.llp-login-form .llp-btn-primary[type="submit"] { width: 100%; justify-content: center; }

/* v0.73.4 - "that code doesn't work", right under the field. */
.llp-reg-field-error { color: #B32D2E; font-size: 13px; margin: 6px 0 0; }
.llp-reg-field-error[hidden] { display: none; }

/* v0.73.5, Kat: the pink box "je strasne skareda" - on the Log in / Register /
   password pages a message is a calm white strip with a coloured line: gold for
   "here's your next step", red for a real error, green for done. */
.llp-auth-page .llp-notice {
	background: #FFFFFF;
	border: 1px solid #E6E8EE;
	border-left: 3px solid var(--llp-gold);
	border-radius: 0;
	padding: 12px 14px;
	color: var(--llp-dark);
	font-size: 14px;
	line-height: 1.45;
}
.llp-auth-page .llp-notice-error { border-left-color: var(--llp-error); }
.llp-auth-page .llp-notice-success { border-left-color: var(--llp-success); }
.llp-auth-page .llp-notice ul { list-style: none; margin: 0; padding: 0; }
.llp-auth-page .llp-notice li + li { margin-top: 4px; }
.llp-auth-page .llp-notice p { margin: 0; }
.llp-auth-page .llp-notice form { margin: 4px 0 0; }
.llp-notice-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: var(--llp-gold-ink, #8A6A22);
	text-decoration: underline;
	cursor: pointer;
}

/* v0.74.0 - Membership as a member's card (templates/membership.php). */
.llp-ms-column { max-width: 560px; margin-bottom: 32px; }
.llp-ms-pass {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	min-height: 210px;
	padding: 26px 28px;
	border-radius: 18px;
	background: linear-gradient(150deg, #0F2A4D 0%, #0B1F3A 70%);
	color: #FFFFFF;
	box-shadow: 0 16px 36px rgba(11, 31, 58, 0.18);
}
.llp-ms-pass-brand {
	position: relative;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--llp-gold);
}
.llp-ms-pass-name {
	position: relative;
	margin-top: 14px;
	padding-right: 110px;
	font-family: 'Manrope', 'Inter', sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.llp-ms-pass-access {
	position: absolute;
	left: 28px;
	right: 100px;
	bottom: 24px;
	font-size: 14px;
	color: #D6DCE6;
}
.llp-ms-pass-dot { position: absolute; border-radius: 50%; opacity: 0.9; }
.llp-ms-pass-dot.is-orange { width: 96px; height: 96px; right: -22px; top: -26px; background: #E95617; }
.llp-ms-pass-dot.is-pink { width: 54px; height: 54px; right: 74px; top: 34px; background: #DF005B; }
.llp-ms-pass-dot.is-green { width: 70px; height: 70px; right: 22px; bottom: -14px; background: #B9DB01; }
.llp-ms-pass.is-free .llp-ms-pass-dot { opacity: 0.35; }
.llp-ms-manage { margin: 12px 0 0; font-size: 14px; }
.llp-ms-code { margin: 18px 0 22px; }
.llp-ms-code summary {
	display: inline-block;
	list-style: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--llp-gold-ink);
	text-decoration: underline;
	cursor: pointer;
}
.llp-ms-code summary::-webkit-details-marker { display: none; }
.llp-ms-code-form { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.llp-ms-code-form input[type="text"] {
	flex: 1 1 200px;
	box-sizing: border-box;
	padding: 11px 14px;
	border: 1px solid var(--llp-border);
	border-radius: 10px;
	background: #FFFFFF;
	font-size: 15px;
	font-weight: 500;
	color: var(--llp-dark);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.llp-ms-code-form input[type="text"]::placeholder { text-transform: none; letter-spacing: normal; }
.llp-ms-code-form input[type="text"]:focus { outline: none; border-color: var(--llp-dark); box-shadow: 0 0 0 3px var(--llp-dark-tint-12); }
.llp-ms-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.llp-ms-tile { padding: 14px; background: #FFFFFF; border: 1px solid var(--llp-border); border-radius: 12px; }
.llp-ms-tile strong { display: block; margin-bottom: 4px; font-size: 14px; color: var(--llp-ink); }
.llp-ms-tile span { display: block; font-size: 13px; line-height: 1.35; color: #657284; }
@media (max-width: 600px) {
	.llp-ms-tiles { grid-template-columns: 1fr; }
	.llp-ms-pass { min-height: 190px; padding: 22px; }
	.llp-ms-pass-access { left: 22px; right: 22px; bottom: 20px; }
	.llp-ms-pass-dot.is-green { display: none; } /* The longer access line needs that corner on a phone. */
	.llp-ms-pass-name { font-size: 22px; }
}

/* v0.74.1 - Peer Sphere: the card form is folded away once it's been filled in. */
.llp-peer-card-line { display: block; margin: 0 0 16px; font-size: 14px; color: #657284; overflow-wrap: anywhere; }
.llp-peer-share-card summary {
	position: relative;
	display: block;
	list-style: none;
	padding-right: 56px;
	cursor: pointer;
}
.llp-peer-share-card summary::-webkit-details-marker { display: none; }
.llp-peer-share-card summary .llp-card-title { display: block; margin: 0 0 4px; }
.llp-peer-share-card summary .llp-peer-card-line { margin: 0; }
.llp-peer-card-edit {
	position: absolute;
	right: 0;
	top: 2px;
	font-size: 14px;
	font-weight: 600;
	color: var(--llp-gold-ink);
	text-decoration: underline;
}
.llp-peer-share-card[open] .llp-peer-card-edit { display: none; }
.llp-peer-share-card[open] summary { margin-bottom: 18px; }

/* v0.74.4 - the welcome on a member's first log in (assets/js/first-welcome.js). */
html.llp-first-welcome-open { overflow: hidden; }
.llp-first-welcome {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	background: radial-gradient(circle at 50% 50%, #0E3A6E 0%, #0B1F3A 62%, #071528 100%);
	cursor: pointer;
	transition: opacity 0.6s ease;
}
.llp-first-welcome.is-leaving { opacity: 0; }
.llp-first-welcome canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.llp-first-welcome-words {
	position: relative;
	font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: clamp(40px, 8vw, 104px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	text-align: center;
	color: #FFFFFF;
	opacity: 0;
	transform: translateY(14px) scale(0.98);
	transition: opacity 0.9s ease, transform 0.9s ease;
}
.llp-first-welcome-words span { color: #B9DB01; }
.llp-first-welcome.has-words .llp-first-welcome-words { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.llp-first-welcome, .llp-first-welcome-words { transition: none; }
}

/* v0.74.5 - code accepted: the dots build the card (assets/js/code-unlocked.js).
   The delayed animation is the safety net: the card shows by itself even if
   that script never runs. */
.llp-ms-pass.is-gathering { animation: llp-ms-pass-safety 0.4s ease 2.5s both; }
@keyframes llp-ms-pass-safety {
	from { opacity: 0; }
	to { opacity: 1; }
}
.llp-ms-pass.is-unlocked { animation: llp-ms-pass-glow 1.4s ease; }
@keyframes llp-ms-pass-glow {
	0% { opacity: 0; transform: scale(0.985); box-shadow: 0 0 0 0 rgba(201, 162, 74, 0); }
	30% { opacity: 1; transform: none; box-shadow: 0 0 0 5px rgba(201, 162, 74, 0.55), 0 16px 36px rgba(11, 31, 58, 0.18); }
	100% { box-shadow: 0 0 0 0 rgba(201, 162, 74, 0), 0 16px 36px rgba(11, 31, 58, 0.18); }
}
.llp-ms-pass-dots { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 99999; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
	.llp-ms-pass.is-gathering { animation: none; }
	.llp-ms-pass.is-unlocked { animation: none; box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.55), 0 16px 36px rgba(11, 31, 58, 0.18); }
}

/* v0.76.0 - the picture on a recording's card, see LLP_TalkTile. Kat chose navy
   with one ring ("velmi jednoduche, ciste", like ebcg.com/about-us). The badges
   that used to float on the picture sit in one row now, or under the picture,
   because they would fight with the ring in the corner. */
.llp-talk-tile {
	display: block;
	overflow: hidden;
	background: #12325C;
	padding: 11px 13px;
	box-sizing: border-box;
}
.llp-talk-ring {
	position: absolute;
	top: -22%;
	right: -9%;
	width: 42%;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	border: 10px solid #8F96C8;
	border-radius: 50%;
	pointer-events: none;
}
.llp-talk-top {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px 7px;
	max-width: 68%;
}
.llp-talk-tile .llp-wl-event-badge {
	padding: 0;
	background: none;
	color: #C7CFDB;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
}
.llp-talk-tile .llp-wl-new-badge,
.llp-talk-tile .llp-wl-mockup-badge,
.llp-talk-tile .llp-wl-rank-badge { position: static; }
.llp-talk-tile .llp-wl-new-badge,
.llp-talk-tile .llp-wl-mockup-badge { padding: 2px 7px; font-size: 9px; }
.llp-talk-tile .llp-wl-rank-badge { width: 20px; height: 20px; font-size: 10.5px; box-shadow: none; }
.llp-talk-tile .llp-wl-rank-badge.is-rest { background: rgba(255, 255, 255, 0.16); }
.llp-talk-title {
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: 10px;
	font-family: 'Manrope', 'Inter', sans-serif;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.17;
	color: #FFFFFF;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
}
.llp-talk-title.is-s { font-size: 15px; }
.llp-talk-title.is-m { font-size: 13.5px; }
.llp-talk-title.is-l { font-size: 12px; }
/* Play and lock sit in the ring. */
.llp-talk-tile .llp-wl-play-icon {
	top: 6px;
	right: 6px;
	left: auto;
	width: 26px;
	height: 26px;
	transform: none;
}
.llp-talk-tile .llp-wl-play-icon svg { width: 11px; height: 11px; }
.llp-talk-meta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}
.llp-talk-meta .llp-wl-card-presenter { min-width: 0; }
.llp-talk-meta .llp-wl-corner-badges {
	position: static;
	flex: none;
	flex-direction: row;
	gap: 4px;
	margin-bottom: 6px;
}
.llp-talk-meta .llp-wl-corner-badges > span { width: 20px; height: 20px; box-shadow: none; }
.llp-talk-placeholder {
	position: relative;
	overflow: hidden;
	background: #12325C;
}
.llp-talk-placeholder .llp-talk-ring { width: 26%; border-width: 18px; top: -18%; right: -5%; }
.llp-talk-placeholder > :not(.llp-talk-ring) { position: relative; }
.llp-learn-cta-newest-thumb {
	position: relative;
	overflow: hidden;
	background: #12325C;
}
.llp-learn-cta-newest-thumb .llp-talk-ring { width: 62%; border-width: 5px; top: -20%; right: -18%; }
.llp-learn-cta-newest-thumb svg { position: relative; }
@media (max-width: 640px) {
	.llp-talk-tile { aspect-ratio: 4 / 3; padding: 9px 10px; }
	.llp-talk-ring { border-width: 8px; top: -18%; }
	.llp-talk-title { left: 10px; right: 10px; bottom: 8px; }
	.llp-talk-title.is-s { font-size: 14px; }
	.llp-talk-title.is-m { font-size: 12.5px; }
	.llp-talk-title.is-l { font-size: 11.5px; }
	.llp-talk-tile .llp-wl-event-badge { font-size: 10px; }
	/* The title moved onto the picture, so the name is what's left under it. */
	.llp-wl-card .llp-talk-meta .llp-wl-card-presenter {
		display: block;
		margin-bottom: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.llp-talk-meta .llp-wl-corner-badges { margin-bottom: 0; }
}
.llp-wl-card.is-locked .llp-talk-tile { filter: saturate(0.6) brightness(0.85); }

/* v0.77.0 - a short explanation under a form field. */
.llp-field-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--llp-muted); }

/* v0.77.2, Kat: the Meet the Team cards overlapped and cut off their text: padding was added on top of width: 100%, so each card was wider than its column. */
.llp-team-card { box-sizing: border-box; }