/**
 * This CSS is just to get you started.
 * Feel free to modify any of it for your own app.
 */

@import "lucide/lucide.css";

:root {
	--html-bg-color: #FAFAF5;
	--content-bg-color: #FFFFFF;

	--column-bg-color: #FFF8EC;
	--column-title-bg-color: #FFFFFF;
	--column-title-color: #5B8C5A;

	--dashboard-main-bg-color: #F2A922;
	--dashboard-main-bg-color-to: #D9921E;
	--dashboard-main-font-color: #FFFFFF;
	--dashboard-main-color: rgba(255, 255, 255, 0.85);
	--dashboard-current-bg-color: #FFFFFF;
	--dashboard-current-font-color: #5B8C5A;
	--dashboard-contextual-border: #C4A265;
	--dashboard-contextual-selected-bg: #FFF3D6;
	--dashboard-contextual-selected-text: #5B8C5A;

	--dashboard-mobile-bg-color: #F2A922;
	--dashboard-mobile-bg-color-to: #D9921E;
	--dashboard-mobile-color: rgba(255, 255, 255, 0.85);
	--dashboard-mobile-current-color: #FFFFFF;
	--dashboard-current-icon-bg: none;
	--dashboard-mobile-current-icon-bg: none;

	--button-bg-color: #F2A922;
	--button-bg-color-secondary: #fff;
	--button-bg-color-to: #D9921E;
	--button-bg-color-active: #D9921E;
	--button-border-color: #F2A922;
	--button-shadow-color: #F2A922;
	--button-text-color: white;
	--button-text-color-secondary: #030303;

	--dialog-title-bg-color: #F2A922;
	--dialog-title-text-color: #3D2800;

	--chat-bg-color: #F2A922;
	--chat-text-color: #3D2800;

	--h1-font-color: #5B8C5A;

	--Q-aspect-where-text-color: #000;
	--Q-aspect-where-border-color: #000;

	--Q-aspect-what-text-color: #000;
	--Q-aspect-what-border-color: #000;

	--Q-aspect-people-text-color: #000;
	--Q-aspect-people-border-color: #000;

	--Q-aspect-when-text-color: #000;
	--Q-aspect-when-border-color: #000;

	--Q-aspect-deals-text-color: #000;
	--Q-aspect-deals-border-color: #000;

	--interests-bg-main: #5B8C5A;
	--interests-text-color: #fff;
	--interests-text-secondary-color: #000;
	--interests-text-selected-color: #000;
	--interests-bg-selected: #FFF3D6;

	--expandable-bg-expanded: #5B8C5A;
}

#dashboard, #notices, #content { margin: auto; text-align: left; }

.Q_mobile #notices_slot { width: 100%; position: fixed; left: 0; }
.Q_mobile .Q_overlay { width: 90%; }

/**
 * This CSS is just to get you started.
 * Feel free to modify any of it for your own app.
 */
* { font-family: 'Fredoka', sans-serif; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }
a { text-decoration: none; color: #2E7D32; }
a:visited { color: #6D8B74; }
body { height: 100%; overflow: auto; touch-action: none; }
h1 { margin: 0; font-size: 32px; text-align: center; font-family: 'Fredoka', sans-serif; }
h2, .Communities_tab { margin: 0; font-family: 'Fredoka', sans-serif; font-weight: 700; }
/* Ensure inactive me-column tabs are readable. Communities.css sets them to
   var(--html-color) (#fff) via `.Communities_tabs[data-style="icons"] .Communities_tab`,
   which we match in specificity here so the labels show on the cream background. */
.Communities_me_column .Communities_tabs[data-style="icons"] .Communities_tab,
.Communities_me_column .Communities_tabs[data-style="icons"] .Communities_tab::before {
	color: #333;
}
*, *:before, *:after { box-sizing: inherit; }

#dashboard .Q_tabs_tab.Q_current,
#dashboard .Q_tabs_tab.Q_current * {
	font-weight: 500;
}
.Q_button {
	font-weight: 500;
}
.Calendars_event_preview_foreground,
.Calendars_event_preview_tool .Calendars_event_title {
	font-weight: 500;
}

/* The various slot containers */
#notices_slot {
	text-align: center;
}
#content_slot {
	position: relative;
	padding: 10px;
	overflow-x: auto;
	background: #fff;
	box-shadow: #aaa 0 0 4px;
	-webkit-box-shadow: #aaa 0 0 4px;
	-moz-box-shadow: #aaa 0 0 4px;
}
.Q_notMobile.Q_layout_sidebar #dashboard_slot {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
#dashboard_slot h1 {
	line-height: 30px;
	margin-top: 10px;
}
#dashboard_slot input,
#dashboard_slot textarea { color: black; }
#page {
	position: absolute; left: 0%; width: 100%; top:50px; bottom: 0;
}
/*
 * Communities replaced JS-driven adjustHeight with CSS Flexbox in
 * Apr 2026 (Communities ddf3149). #content_slot uses `flex: 1` to fill
 * available height — which only works if #page is a flex container.
 *
 * Communities/dashboard.css has higher-specificity #page rules
 * (.Q_notMobile.Q_layout_widebar #page) that don't set display, so
 * the plain `#page { display: flex }` would lose. We match the same
 * specificity selectors here so Yoga.css (which loads last) wins.
 */
.Q_notMobile.Q_layout_widebar #page,
.Q_notMobile.Q_layout_sidebar #page,
.Q_mobile #page {
	display: flex;
	flex-direction: column;
}
.Q_mobile #page { overflow: auto; -webkit-overflow-scrolling: touch; z-index: 0; }
#dashboard_slot .Q_inplace_tool .Q_hover .Q_inplace_tool_static,
#dashboard_slot .Q_inplace_tool .Q_hover .Q_inplace_tool_blockstatic {
	background: white;
	color: #333;
}

#content { position: relative; }

/* Notices contents */
#notices_slot { text-align: center; margin: auto; padding: 0; z-index: 5000; }
#notices { margin: auto; }
#notices_slot div.container { overflow: hidden; overflow-y: auto; }
#notices_slot ul { list-style-type: none; padding: 0; margin: auto; width: 700px; max-width: 100%; border: solid 1px #555; border-top: solid 1px #aaa; box-shadow: 0 0 5px #222; -moz-box-shadow: 0 0 5px #222; -webkit-box-shadow: 0 0 5px #222; cursor: pointer; }
#notices_slot li { list-style-type: none; padding: 0; margin: 0; text-align: center; background: #ffd4aa; border: 0; border-bottom: solid 1px #aaa; line-height: 30px; min-height: 30px; }
#notices_slot ul.Q_errors * { background-color: #ebb; color: #500; }
#notices_slot ul.Q_errors li { text-align: left; padding: 0 10px 0 10px; }
#notices_slot .Q_field_name { float: right; font-size: 12px; padding-right: 10px; font-family: 'Fredoka', sans-serif; }
#notices_slot button
{
	display: inline-block;
	vertical-align: top;
	margin-left: 5px;
	padding: 2px 10px;
	color: #69552e;
	background: #F1E2C6;
	box-shadow: 1px 1px 1px 0 #CCC;
	border: none;
}
.Q_notTouchscreen #notices_slot button:active {
	background: #f0d298;
	margin-left: 6px;
	box-shadow: none;
}
#notices_slot ul li .Q_field_name {
	font-size: 12px;
	line-height: 26px;
	font-family: 'Fredoka', sans-serif;
}

body .Q_tabs_contextual .Q_listing li { text-align: left; }
html .Q_listing img { height: 30px; }

/* inputs */

input[type=text],
input[type=email],
input[type=tel],
input[type=password],
input[type=number],
input.text,
input.email,
input.tel,
input.password,
input.number,
textarea { border: 1px solid #ccc; border-bottom: 1px solid #aaa; background-color: #fefefe; cursor: text; font-family: "Trebuchet MS"; }
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=password]:focus,
input[type=number]:focus,
input.text:focus,
input.email:focus,
input.tell:focus,
input.password:focus,
input.number:focus,
textarea:focus { background: white; box-shadow: 0 1px 10px rgba(0,0,0,.15); -webkit-box-shadow: 0 1px 4px rgba(0,0,100,.15); -moz-box-shadow: 0 1px 4px rgba(0,0,100,.15); }
input.placeholder,
textarea.placeholder { color: #aaa; font-style: italic; }
select:focus { outline: dotted 1px #779; }
/* select { margin-top: 0.75em; } */
input[type=text],
input[type=password],
input[type=tel],
input[type=password],
input[type=number],
input.text,
input.email,
input.tel,
input.password,
input.number,
textarea { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding: 0 4px 0 4px; }
input[type=checkbox],
input[type=radio] { margin-right: 5px; }
html .Q_inplace_tool_fieldinput { padding: 0; }

.Q_overlay {
	border: none;
	background: #fff;
	box-shadow: 0 2px 5px rgba(0,0,0,.2), 0 5px 40px -5px rgba(0,0,0,.5);
}

/* The following lines are for cordova on iOS */


/* The following lines are for a flatter look */
html .Q_listing li { font-size: 18px; padding: 0 10px; line-height: 40px; text-align: left; border-top: solid 1px white; border-bottom: solid 1px #CCC; background: #FAFAF5; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; white-space: nowrap; overflow: hidden;
}

html.Yoga_notFound #content,
html.Yoga_errors #content { padding: 30px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
html.Yoga_notFound .url,
html.Yoga_errors .url { font-weight: bold; text-decoration: underline; }

span.c3 { font-weight: bold; }

#Q_columns-Communities_tool .Q_column_event .Q_title_slot,
.Calendars_event_tool .Calendars_event_title,
.Calendars_event_tool .Calendars_event_title *,
.Calendars_event_tool .Calendars_event_description,
.Calendars_event_tool .Calendars_event_description * {
	font-family: inherit;
}

.Q_button,
.Q_big_prompt .Q_button,
.Q_notTouchscreen .Q_big_prompt .Q_button,
.Q_notTouchscreen .Q_big_prompt .Q_button:active {
	font-weight: 500;
	background: var(--button-bg-color);
	color: var(--button-text-color);
}
.Q_big_prompt .Q_button,
.Q_notTouchscreen .Q_big_prompt .Q_button,
.Q_notTouchscreen .Q_big_prompt .Q_button:active {
	line-height: 40px;
	padding: 0 10px;
}

.Q_button.Q_aspect_when,
.Q_button.Q_aspect_when:before {
	background: #88C906;
	background-image: linear-gradient(to right, #A9BD08, #88C906);
	border: 1px solid #A9BD08;
	border-radius: 5px;
	box-shadow: 0 7px 20px -5px #A9BD08;
}

.Q_button.Streams_aspect_chats,
.Q_button.Streams_aspect_chats:before {
	background: #009dbc;
	background-image: linear-gradient(to right, #00b3c2, #009dbc);
	border: 1px solid #00adbc;
	border-radius: 5px;
	box-shadow: 0 7px 20px -5px #00b3c2;
}

.Q_button.Q_aspect_info,
.Q_button.Q_aspect_where,
.Q_button.Q_aspect_info:before,
.Q_button.Q_aspect_where:before {
	background: #868d93;
	background-image: linear-gradient(to right, #868d93, #808791);
	border: 1px solid #808791;
	border-radius: 5px;
	box-shadow: 0 7px 20px -5px #808791;
}

.Q_button.Streams_aspect_interests,
.Q_button.Streams_aspect_interests:before {
	background: #E07A5F;
	background-image: linear-gradient(to right, #E07A5F, #C96A4F);
	border: 1px solid #C96A4F;
	border-radius: 5px;
	box-shadow: 0 7px 20px -5px #C96A4F;
}

.Communities_buttons { margin: 15px 0; }
.Calendars_event_preview_tool { margin: 20px 0; }

.Calendars_event_preview_background {
	box-shadow: 0 7px 20px -5px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3);
	filter: none !important;
}

.Calendars_event_foreground,
.Calendars_event_preview_foreground {
	font-size: 24px;
	text-shadow: 0 0 10px #000, 0 2px 3px #000;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.15) 50%, transparent 100%) !important;
}

.Streams_participants_tool .Streams_participants_summary {
	width: 46px;
	border-radius: 0 0 5px 5px;
	font-size: 13px;
	font-family: 'Fredoka', sans-serif;
	background: #5B8C5A;
	color: white;
	margin-top: 10px;
	text-align: center;
	overflow: hidden;
	margin-right: 10px;
	font-weight: 400;
	text-shadow: none;
}

.Streams_participants_tool .Users_avatar_icon {
	box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 5px 20px -5px rgba(0,0,0,.3);
	border: 2px solid #fff;
}

/* Customize dashboard */
.Q_mobile #dashboard[data-style=icons] .Q_tabs_tabs .Q_tab_me .Users_status_tool {
	display: none;
}
.Q_mobile #dashboard[data-style=classic] .Q_tabs_tool {
	max-width: none;
}
/*----------------------*/

.Communities_me_column_tabContent .Communities_buttons .Communities_people_link,
.streamName_streams_user_height,
.streamName_streams_user_affiliation,
.streamName_streams_user_dating {
	display: none;
}

.Q_tab_me img,
.Users_avatar_tool img,
.Streams_participants_invite img {
	border-radius: 2px;
}

.Q_columns_title,
.Q_columns_column .Q_columns_title {
	border: none;
	background: #FFFFFF;
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
	position: relative;
	z-index: 100;
}

.Q_columns_column.Q_column_profile .Q_columns_title {
	box-shadow: none !important;
	background: transparent;
}

.Communities .Q_columns_title .Q_title_slot {
	font-weight: bold;
	font-size: 25px;
	font-family: 'Fredoka', sans-serif;
}

.Calendars_event_preview_tool .Calendars_event_title {
	padding: 5px;
}

.Communities_me_column_tabContent {
	border-radius: 5px;
	border: 1px solid #d4d4d4;
}

/* Hide the Social expandable when its content is empty (no supported socials configured
   or XIDs not loaded). :has() is supported in all modern evergreen browsers. */
.Q_expandable_tool:has(> .Q_expandable_content > .Communities_profile[data-val=social]:empty) {
	display: none;
}

/* Make the Streams inplace-editor save button look like an actual button instead of
   a ghosted floppy-disk icon that's easy to miss. */
.Communities_me_column .Streams_inplace_tool .Q_inplace_tool_buttons .Q_inplace_tool_save {
	padding: 6px 14px;
	background: #D9921E;
	color: #fff;
	border-radius: 4px;
	font-weight: 500;
	font-size: 14px;
	border: 0;
	cursor: pointer;
}
.Communities_me_column .Streams_inplace_tool .Q_inplace_tool_buttons .Q_inplace_tool_save::before {
	filter: brightness(0) invert(1);
}

/* Relabel floating user ID in bottom-right so it reads as a deliberate element, not debug noise.
   Also move it up out of the way of the feedback chat bubble. */
.Communities_profile_userId {
	bottom: 60px;
	padding: 4px 8px;
	font-family: monospace;
	font-size: 11px;
	color: #888;
	background: rgba(255,255,255,0.8);
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	opacity: 0.6;
	transition: opacity 0.15s;
}
.Communities_profile_userId:hover {
	opacity: 1;
}
/* The label is user-facing copy, so it comes from text/Yoga/content/en.json
   (cssLabels.UserId) via a custom property that Yoga_before_Q_responseExtras
   emits into an inline <style>. The literal here is only the fallback for a
   response that skipped that handler. See #90. */
.Communities_profile_userId::before {
	content: var(--Yoga-label-userId, "User ID: ");
	color: #555;
}

.Communities_tab.Q_current {
	border: 1px solid #d4d4d4;
	border-bottom: solid 1px transparent;
	border-radius: 5px 5px 0 0;
	font-weight: 500;
}
.Communities_schedule_column_tabContent {
	border-top: 1px solid #d4d4d4;
}
.Users_list_tool .Users_avatar_tool {
	margin: 0px;
	box-shadow: 0 0 0px silver;
}

.Users_list_tool .Users_avatar_icon {
	border-radius: 10px;
}

.Users_list_tool .Users_avatar_name {
	font-size: 15px;
	margin-top: 5px;
}

.Travel_aspect_trips,
.Q_button.Travel_aspect_trips,
.Travel_trips_needoffer .Q_dialog_content {
	background-size: 8px auto;
	padding: 10px 15px;
	color: white;
}

.Q_big_prompt { padding: 20px 10px; }

.Calendars_going {
	display: inline-flex;
	box-shadow: 0 10px 40px -15px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.2);
	border-radius: 5px;
	margin-left: 10px;
}

.Calendars_going span {
	display: inline-block;
	padding: 10px;
	cursor: pointer;
	border-left: solid 1px #e3e3e3 !important;
	color: #8f8f8f;
	background: #fff;
	min-width: 60px;
}

.Calendars_going span.Calendars_yes { padding: 10px; }

.Calendars_yes.Q_selected {
	color: #fff;
	background: #88C906;
	background-image: linear-gradient(to bottom, #A9BD08, #88C906);
	border: 1px solid #A9BD08;
	box-shadow: 0 2px 25px -2px #A9BD08, 0 0 10px 2px #fff;
	z-index: 1;
	position: relative;
}

.Calendars_yes.Q_selected {
	color: #fff;
	background: #88C906;
	background-image: linear-gradient(to bottom, #A9BD08, #88C906);
	border-color: #A9BD08;
	box-shadow: 0 2px 25px -2px #A9BD08, 0 0 10px 2px #fff;
	z-index: 1;
	position: relative;
}

.Calendars_maybe.Q_selected {
	color: #fff;
	/*background: #88C906;*/
	/*background-image: linear-gradient(to bottom, #A9BD08, #88C906);*/
	border-color: #4953d0;
	box-shadow: 0 2px 25px -2px #4953d0, 0 0 10px 2px #fff;
	z-index: 1;
	position: relative;
}

.Calendars_no.Q_selected {
	color: #fff;
	/*background: #88C906;*/
	/*background-image: linear-gradient(to bottom, #A9BD08, #88C906);*/
	border-color: #777;
	box-shadow: 0 0 10px 2px #fff;
	z-index: 1;
	position: relative;
}

.Q_contextual {
	box-shadow: 0 10px 40px -10px rgba(10,30,130, .7), 0 3px 5px rgba(0,0,0,.2);
}

.Q_contextual .Q_listing li.Q_selected *,
.Q_contextual .Q_listing li,
.Q_contextual .Q_listing li * {
	background: transparent;
	border-color: transparent;
}

.Q_contextual .Q_listing li.Q_selected {
	border-color: transparent;
	background: #D9921E;
	box-shadow: 0 0 20px -5px #F2A922;
	position: relative;
	z-index: 5;
}

.Q_contextual .Q_contextual_top_arrow {
	border-style: solid;
	border-width: 0 20px 16px 20px;
	border-color: transparent transparent var(--dashboard-contextual-border) transparent;
	background: none;
}

div#Calendars_event_composer_tool {
	padding: 20px 0;
}

.Communities_conversation_author .Users_avatar_name { margin-left: 10px; }

.Communities_conversation_content {
	border-radius: 10px;
	margin: 10px 0 20px 0;
}

.Q_columns_column.Communities_column_chat {
	overflow-y: auto !important;
	overscroll-behavior: contain;
}

.Streams_chat_bubble { font-size: 14px; }

.Streams_chat_messages .Streams_chat_from_me .Streams_chat_bubble {
	border-radius: 6px;
	background-color: var(--chat-bg-color);
	color: var(--chat-text-color);
	box-shadow: 0 5px 15px -5px var(--chat-bg-color);
	border: none;
}
.Streams_chat_from_me .Streams_chat_tick {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6.5px 0 6.5px 9px;
	border-color: transparent transparent transparent var(--chat-bg-color);
	background: none;
}

.Streams_chat_to_me .Streams_chat_bubble {
	border-radius: 6px;
	background-color: #d2d3d5;
	box-shadow: 0 5px 15px -8px #afb9c8;
	border: none;
	background-image: linear-gradient(to right, #d2d3d5, #e5e5e5);
	color: #222;
}
.Streams_chat_to_me .Streams_chat_tick {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6.5px 9px 6.5px 0;
	border-color: transparent #d2d3d5 transparent transparent;
	background: none;
}

.Streams_chat_bubble.Streams_chat_overflowed:after {
	content: '';
	position: absolute;
	bottom: 5px;
	width: 100%;
	height: 28px;
	left: 0;
	background: inherit;
	-webkit-mask-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgba(0,0,0,1)), color-stop(0.4, rgba(0,0,0,1)), color-stop(1.00, rgba(0,0,0,0)));
}

.Streams_chat_overflowed_indicator { display: none; }

.Streams_chat_tool .Streams_chat_bubble .Users_avatar_name { opacity: .8; }

.Streams_chat_timestamp {
	margin-right: 20px;
	margin-top: 5px;
	color: #777777;
	font-size: 11px;
	font-family: 'Fredoka', sans-serif;
}

.Streams_chat_vote_container img { filter: hue-rotate(40deg); }

.Q_placeholders_container {
	min-height: 40px;
	vertical-align: middle;
}
.Q_placeholders_container .Q_placeholder {
	display: flex;
	align-items: center;
	top: 0 !important;
}

.Q_buttons input,
.Q_placeholders_container input {
	padding: 5px;
	min-height: 40px;
}

.Streams_chat_more {
	cursor: pointer;
	background-color: #dfdfdf;
	color: #555;
	text-align: center;
	padding: 5px 0;
	font-size: 11pt;
	font-family: 'Fredoka', sans-serif;
	margin: 20px 0;
	/*background-image: linear-gradient(to bottom, #f3f3f3, #eaeaea);*/
	/*border: 1px solid #d7d7d7;*/
}

.Streams_preview_container.Streams_preview_view {
	display: flex;
	align-items: center;
}

.Users_avatar_tool img,
.Streams_participants_invite img,
.Streams_preview_tool .Streams_preview_icon,
.Streams_preview_tool .Streams_preview_add {
	border: 2px solid #fff;
	border-radius: 5px;
}

.Q_columns_title_container .Streams_preview_tool .Streams_preview_icon {
	border: none;
}

.Streams_preview_tool .Streams_preview_icon,
.Streams_preview_tool .Streams_preview_add {
	margin-right: 10px;
}


.Streams_dialog_interests, .Communities_filter_location {
	border: 1px solid var(--button-bg-color);
	box-shadow: 0 7px 10px -5px var(--button-bg-color);
	background: var(--interests-bg-main);
	color: var(--button-text-color);
	border-radius: 12px;
}

.Q_overlay {
	border-radius: 10px;
}

.Q_overlay .Q_close,
.Q_fullscreen_dialog .Q_close {
	background-image: none;
	background-color: #e8f0e8;
	border-radius: 50%;
	font-family: 'lucide' !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--column-title-color);
	text-decoration: none;
}
.Q_overlay .Q_close::before,
.Q_fullscreen_dialog .Q_close::before {
	content: "\e1b2";
}

.Q_dialog_title {
	background: var(--dialog-title-bg-color);
	border-bottom: 1px solid var(--dialog-title-bg-color);
	color: var(--dialog-title-text-color);
	border-radius: 10px 10px 0 0;
	font-size: 18px;
	font-family: 'Fredoka', sans-serif;
}

.Q_button.Q_aspect_who,
.Q_button.Users_aspect_communities,
.Q_button.Users_aspect_account {
	background: var(--button-bg-color);
	background: -webkit-gradient(linear, left top, right top, from(var(--button-bg-color-from)), to(var(--button-bg-color)));
	background: -moz-linear-gradient(left, var(--button-bg-color-from), var(--button-bg-color));
	background-image: linear-gradient(to right, var(--button-bg-color-from), var(--button-bg-color));
	box-shadow: 0 5px 20px -5px var(--button-bg-color);
	border: none;
}


.Communities_me_column_tabContent[data-val="interests"],
.Communities_me_column_tabContent[data-val="interests"] .Streams_interests_anything {
	background: var(--button-bg-color);
	background: -webkit-gradient(linear, left top, right top, from(var(--button-bg-color)), to(var(--button-bg-color-to)));
	background: -moz-linear-gradient(left, var(--button-bg-color), var(--button-bg-color-to));
	background-image: linear-gradient(to right, var(--button-bg-color), var(--button-bg-color-to));
	color: var(--button-text-color);
}

.Communities_me_column_tabContent[data-val="credits"] {
	text-align: center;
}

.Communities_me_column_tabContent[data-val="interests"] .Streams_interests_choseAnything .Streams_interests_anything,
.Communities_me_column_tabContent[data-val="interests"] .Q_expandable_count,
.Communities_me_column_tabContent[data-val="interests"] .Q_expandable_tool .Q_selected,
.Communities_me_column_tabContent[data-val="interests"] .Streams_interests_tool .Q_selected {
	background: rgba(255, 230, 180, 0.9);
	color: #220;
	text-shadow: none;
}

#page .Calendars_info .Q_button i {
	color: inherit !important;
}

.Calendars_info .Travel_trips_buttons span { color: #D9921E; }

.Travel_trips_tool[data-userId]:not([data-userId=""]) .Travel_trips_notGoing { background: none; padding-left: 0; text-align: left; }

.Travel_trips_tool[data-userId]:not([data-userId=""]) .Travel_trips_notGoing:before {
	font-family: 'lucide' !important;
	font-style: normal;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 28px;
	vertical-align: middle;
	line-height: 1;
	display: inline-block;
	content: "\e084";
	margin-right: 15px;
}

.Q_selected,
.Places_location_tool .Places_location_preview_tool.Q_selected {
	background: #FFF3D6;
	border: 1px solid #D9921E;
	margin: -1px;
	box-shadow: 0 0 6px 1px rgba(242, 169, 34, 0.5), inset 0 0 3px #C4A265;
}

.Q_expandable_count {
	background-color: rgba(255, 34, 34, 0.9);
	color: #fff;
}

.Communities_filter_location .Q_dialog_content { padding: 10px; }

.Communities_me_column .Communities_me_icon:before {
	color: #919191;
	font-size: 24px;
}
.Q_tool.Streams_chat_tool .Streams_chat_composer .Streams_chat_subscription {
	width: 40px;
	height: 40px;
}
.Q_tool.Streams_chat_tool .Streams_chat_composer .Streams_chat_submit,
.Q_tool.Streams_chat_tool .Streams_chat_composer .Streams_chat_call {
	top: 2px;
	right: 3px;
	width: 35px;
	height: 35px;
	filter: contrast(150%) hue-rotate(40deg) brightness(90%);
}

.Q_tool.Streams_chat_tool .Streams_chat_composer input { padding-right: 40px; margin-left: 45px; width: calc(100% - 45px); height: 40px; }
.Q_tool.Streams_chat_tool .Streams_chat_composer ~ hr { display: none; }

.Communities_tabs[data-style=icons] .Communities_tab:before { color: #D9921E; }

.Calendars_event_composer_tool .Calendars_event_composer > div:before { color: #9e9e9e !important; }

.Communities_filter_location .Places_location_tool div[data-location=current],
.Communities_filter_location .Places_location_preview_tool,
.Communities_filter_location .Communities_filter_location_all,
.Communities_filter_location .Places_location_tool .Places_location_preview_tool,
.Communities_filter_location .Places_location_tool div[data-location=address],
.Communities_filter_location .Places_location_tool div[data-location=current],
.Communities_filter_location .Places_location_tool .Places_areas_tool {
	background-color: rgba(255, 255, 255, 0.2);
}

.Yoga_counts {
	padding: 10px;
	text-align: center;
}

.Yoga_getStarted {
	font-size: 30px;
	font-weight: bold;
}

.Yoga_answer .Q_dialog_content {
	padding: 10px;
}
.Yoga_answer .Q_dialog_content h2 {
	margin-bottom: 20px;
}
.Yoga_answer .Q_dialog_content tr {
	display: block;
}
.Yoga_answer .Q_dialog_content tr:not(:last-child) {
	margin-bottom: 10px;
}
.Yoga_answer .Q_dialog_content input[type=checkbox] {
	width: 30px;
	height: 30px;
}

.Yoga_welcome #content_slot {
	overflow: auto !important;
}

.Yoga_welcome #content {
	height: auto !important;
}

/* Dashboard tab icons — Lucide overrides */
#dashboard .Q_tabs_tab::before,
.Q_listing_wrapper .Q_tabs_tab::before {
	font-family: 'lucide' !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-right: 4px;
}
#dashboard .Q_tab_events::before, .Q_listing_wrapper .Q_tab_events::before,
#dashboard .Q_tab_classes::before, .Q_listing_wrapper .Q_tab_classes::before {
	content: "\e063" !important; /* calendar */
}
#dashboard .Q_tab_conversations::before, .Q_listing_wrapper .Q_tab_conversations::before {
	content: "\e116" !important; /* message-circle */
}
#dashboard .Q_tab_teachers::before, .Q_listing_wrapper .Q_tab_teachers::before {
	content: "\e234" !important; /* graduation-cap */
}
#dashboard .Q_tab_community::before, .Q_listing_wrapper .Q_tab_community::before {
	content: "\e1a4" !important; /* users */
}
#dashboard .Q_tab_me::before, .Q_listing_wrapper .Q_tab_me::before,
#dashboard .Q_tab_login::before, .Q_listing_wrapper .Q_tab_login::before {
	content: "\e461" !important; /* circle-user */
}
#dashboard .Q_tab_watch::before, .Q_listing_wrapper .Q_tab_watch::before,
.Q_listing_wrapper .Communities_aspect_watch::before {
	content: "\e0ba" !important; /* eye */
}
#dashboard .Q_tab_welcome::before, .Q_listing_wrapper .Q_tab_welcome::before {
	content: "\e0f5" !important; /* home */
}
html.Yoga_teachers #content_slot {
	padding: 0;
}

/*
 * Communities ddf3149 (Apr 2026) replaced the JS Communities.adjustHeight()
 * with a pure-CSS flex chain, but scoped every rule of that replacement to
 * `.Communities` — the html class Q derives from the *page's module*:
 *
 *   .Communities #content, .Communities #content_slot { display: flex; flex: 1 }
 *   .Communities #columns_slot { display: flex; flex: 1 }
 *   .Communities .Q_columns_tool, .Communities .Q_columns_column { flex: 1 }
 *   .Communities .Q_column_slot { flex: 1; overflow-y: auto }
 *
 * /teachers is routed to {"module": "Yoga"} (config/app.json), so its html
 * class is `Yoga_teachers` and it gets NONE of the above, even though its
 * handler renders Communities' own columns view. The height chain
 * #content_slot -> #content -> #columns_slot -> .Q_columns_tool then resolves
 * to 0, and columns.js's desktop branch (heightToBottom, measured from
 * $(tool.element).height()) bakes that 0 into an inline `height: 0px` on the
 * column — a blank page with the teacher list present but unrendered. Mobile
 * escapes it only because that branch measures the window instead.
 *
 * Replicate the block for this app's own columns page. Scoped to
 * html.Yoga_teachers, not `.Yoga`, because the module's other pages
 * (welcome, terms) are not columns pages and set their own height rules
 * above. Any future Yoga-module page rendering Communities/content/columns.php
 * must be added to these selectors. See docs/qbix-gotchas.md § "Desktop column
 * pages blank when the page's module isn't Communities".
 */
html.Yoga_teachers #content,
html.Yoga_teachers #content_slot {
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
}
html.Yoga_teachers #columns_slot {
	display: flex;
	flex: 1;
	margin-top: auto;
	margin-bottom: auto;
}
html.Yoga_teachers .Q_columns_tool,
html.Yoga_teachers .Q_columns_column {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 500px;
}
html.Yoga_teachers .Q_column_slot {
	flex: 1;
	overflow-y: auto;
}
html.Q_mobile.Yoga_teachers .Q_columns_column.Q_column_0 {
	height: 100% !important;
}
html.Q_mobile.Yoga_teachers .Q_columns_column.Q_column_1,
html.Q_mobile.Yoga_teachers .Q_columns_column.Q_column_2,
html.Q_mobile.Yoga_teachers .Q_columns_column.Q_column_3 {
	height: calc(100% + 70px) !important;
}

.Yoga .Q_column_0 .Q_columns_title {
	display: none;
}

/*
 * Neutralise leaked Q/columns click-blockers.
 *
 * Q's columns.js drops a transparent `position:absolute; inset:0;
 * z-index:9999` .Q_columns_mask over a column while it opens, to swallow
 * clicks for delay.duration (300ms) — and removes it from exactly one place,
 * a five-way Q.pipe() with no timeout (Q/js/tools/columns.js:577-586). Any
 * unfilled gate — most reachably a $div.stop() from a second open() on a
 * reused column element (:695) cancelling the first animation's jQuery
 * complete callback — leaves the mask behind forever. It is invisible, logs
 * nothing, and eats every click on the column underneath (#79).
 *
 * columns.js adds and removes Q_columns_loading in lockstep with the mask
 * (:690/:705 and :578-579), so "mask present on a column that is not
 * loading" is a sound orphan test. Enforce it in CSS as well as in JS
 * (Yoga.js `_reapStaleColumnMasks`): CSS wins even before the reaper runs,
 * and it cannot itself be defeated by a timing race.
 */
.Q_columns_column:not(.Q_columns_loading) > .Q_columns_mask {
	display: none;
	pointer-events: none;
}

/*
 * Communities ddf3149 added `display: none` to .Q_columns_title on
 * hideTitle columns. This kills the absolutely-positioned close X
 * inside the title (which Q's columns.css intentionally keeps visible
 * via `.Q_columns_hideTitle .Q_close { opacity: 1 }`).
 *
 * Restore the close X by overlaying just the title element in the
 * top-right corner with pointer-events:none, so it's invisible but
 * lets the X (pointer-events:auto) remain clickable.
 *
 * TODO: file upstream PR — Andrey's display:none is too aggressive.
 */
.Communities .Q_columns_column.Q_columns_hideTitle .Q_columns_title {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	z-index: 200;
	pointer-events: none;
	background: none;
	box-shadow: none;
}
.Communities .Q_columns_column.Q_columns_hideTitle .Q_columns_title .Q_close {
	pointer-events: auto;
}
/*
 * The X itself is an icon-font glyph, not the <img> inside .Q_close —
 * Communities.css hides that img for every column and draws \e91c from
 * qplatform-communities instead, so the img legitimately stays at Q's
 * lazy-load placeholder (transparent.gif, naturalWidth 1). That is not a
 * broken lazy-load; don't "fix" it. Reuse the same glyph here so hideTitle
 * columns match the visible-title ones, with white + a shadow because this
 * X sits over the column's photo header rather than a title bar.
 */
.Communities .Q_columns_column.Q_columns_hideTitle .Q_close::before {
	content: '\e91c';
	font-size: 40px;
	color: #fff;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
	line-height: 1;
	display: block;
}

/* Customise event/preview */
.Calendars_event_preview_info {
	font-size: 14px;
	bottom: 0;
	position: absolute;
	padding: 5px;
}
.Calendars_event_preview_time {
	float: none;
	position: static;
}
.Calendars_event_preview_time:before,
.Calendars_event_preview_venue:before {
	line-height: normal;
}
/*---------------------------*/
/* Customise event/preview */
#content .Calendars_event_tool h1 {
	text-align: center;
	margin: 10px 0;
}
#content .Calendars_event_tool > .Users_avatar_tool {
	display: block;
	text-align: left;
	padding-left: 20px;
}
/*---------------------------*/

html.Communities .Q_controls_trigger,
html.Communities.Q_notTouchscreen .Q_controls_trigger:hover {
	background: transparent;
	color: white;
	border: none;
	box-shadow: none;
}

#page .Q_columns_column.Q_columns_hideTitle .Q_controls_slot {
	top: -50px;
}
.Calendars_event_preview_venue {
	width: 100%;
}

/* Communities event column */
.Communities_event_reservation .Q_dialog_content {
	padding: 10px;
}
.Communities_event_reservation .Q_dialog_content h1 {
	text-align: center;
	font-size: 20px;
	margin: 10px 0;
}
.Communities_event_reservation .Q_dialog_content .Communities_event_reservation_desc {
	margin-bottom: 20px;
}
.Communities_event_reservation .Q_dialog_content .Communities_event_reservation_date,
.Communities_event_reservation .Q_dialog_content .Communities_event_reservation_time {
	text-align: center;
	font-weight: bold;
}
.Communities_event_reservation .Q_dialog_content .Communities_event_reservation_time {
	margin-bottom: 20px;
}
.Communities_event_reservation .Q_dialog_content button {
	display: block;
	margin: 0 auto 20px;
}
.Communities_event_reservation .Q_dialog_content .Communities_event_reservation_footer {
	border-top: 1px solid silver;
	font-size: 14px;
}
.Communities_event_reservation .Q_dialog_content .Communities_event_reservation_price {
	text-align: center;
	margin-bottom: 10px;
	font-size: 30px;
	font-weight: bold;
}
.Communities_event_reservation .Q_dialog_content .Communities_event_reservation_credits {
	text-transform: lowercase;
	text-align: center;
	margin-bottom: 20px;
}
.Communities_event_reservation .Q_dialog_content .Communities_event_reservation_title {
	text-align: center;
	font-size: 20px;
	margin-bottom: 10px;
}
.Communities_event_reservation .Q_dialog_content button[name=invite] {
	margin: 10px auto 0;
}
.Communities_event_reservation .Q_dialog_content .Communities_event_reservation_price:empty {
	display: none;
}
.Communities_event_reservation .Q_dialog_content .Communities_event_reservation_back {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	opacity: 0.2;
	z-index: -1;
}
.Users_list_tool .Users_avatar_tool {
	width: auto;
}
#dashboard .Q_tab_login::before, .Q_mobile #dashboard[data-style=icons] .Q_tab_login::before, .Q_listing_wrapper .Q_tab_login::before {
	content: "\e0fd";
	font-family: 'lucide' !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 30px;
	width: 45px;
}
body .Streams_chat_tool .Streams_chat_addons {
	width: 40px;
	height: 40px;
	line-height: 40px;
}

.Q_notMobile .Streams_invite_dialog .Streams_invite_social_buttons .Streams_invite_button_email,
.Q_notMobile .Streams_invite_dialog .Streams_invite_social_buttons .Streams_invite_button_text {
	display: none;
}
body .Q_dialog_content .Q_expandable_tool h2 {
	padding: 5px 10px;
}

.Calendars_event_preview_tool[data-mode=services] .Streams_participants_tool .Users_avatar_tool,
.Calendars_event_tool[data-mode=services] .Streams_participants_tool .Users_avatar_tool {
	display: none;
}
.Calendars_event_preview_tool[data-mode=services] .Streams_participants_tool .Users_avatar_tool[data-staff=true],
.Calendars_event_tool[data-mode=services] .Streams_participants_tool .Users_avatar_tool[data-staff=true] {
	display: inline-block;
}

#feedback-button-container {
	display: flex;
	justify-content: center; /* Centers children horizontally in the container */
	width: 100%; /* Full width of the container */
	align-items: center; /* Centers children vertically in the container */
}

#feedback-button-container a {
	font-size: 1.2rem;
	padding: 10px 20px;
}

#footer {
    background-color: #FAFAF5;
    padding: 20px;
    text-align: center;
}

#footer_links a {
    margin-right: 10px;
    color: #333;
    text-decoration: none;
}

#footer_links a:hover {
    text-decoration: underline;
}

#footer_copyright {
    margin-top: 20px;
    font-size: 0.8rem;
    color: #666;
}

/* Override dark mode — Yoga uses a light theme */
:root {
	color-scheme: light only;
}
@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: light only;
	}
	#content_slot, #content, .Q_columns_column, .Q_big_prompt {
		color: #333;
	}
	.Q_overlay:not(.Streams_dialog_interests):not(.Communities_filter_location),
	.Q_fullscreen_dialog {
		background: #fff;
		color: #333;
	}
	.Q_overlay select,
	.Q_overlay input,
	.Q_overlay textarea,
	.Q_fullscreen_dialog select,
	.Q_fullscreen_dialog input,
	.Q_fullscreen_dialog textarea {
		color: #333;
		background-color: #fefefe;
		border: 1px solid #ccc;
	}
	.Q_overlay input::placeholder,
	.Q_fullscreen_dialog input::placeholder,
	.Q_overlay textarea::placeholder,
	.Q_fullscreen_dialog textarea::placeholder {
		color: #aaa;
	}
}

/* Hide broken images gracefully */
.Yoga_img_broken { display: none !important; }

/* Gradient fallback for event detail pages with broken images */
.Calendars_event_curtain {
	background: linear-gradient(135deg, #F2A922 0%, #E8850C 50%, #5B8C5A 100%);
	min-height: 200px;
}
.Calendars_event_curtain .Streams_preview_container {
	background: linear-gradient(135deg, #F2A922 0%, #E8850C 50%, #5B8C5A 100%);
	min-height: 200px;
}
/* Hide broken image icons in event curtain so gradient fallback shows */
.Calendars_event_curtain img.Yoga_img_broken {
	display: none !important;
}

/* Overlay the event title on the curtain gradient.
   The title lives inside the Streams image preview tool (not as a plain h1).
   It's hidden by default; unhide and position it over the gradient. */
.Calendars_event_curtain .Streams_image_preview_title {
	display: flex !important;
	position: absolute;
	inset: 0;
	padding: 20px 24px;
	z-index: 2;
	align-items: center;
	justify-content: center;
	text-align: center;
	pointer-events: auto;
}
.Calendars_event_curtain .Streams_preview_title,
.Calendars_event_curtain .Streams_preview_title * {
	color: #fff !important;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.25;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65), 0 0 18px rgba(0, 0, 0, 0.45);
	margin: 0;
	background: transparent !important;
}

/* ================================== */
/* Lucide icon overrides for platform */
/* ================================== */

/* Override event preview icons (set by platform's eventPreview.css) */
.Calendars_event_preview_time:before {
	font-family: 'lucide' !important;
	content: "\e087" !important;
}
.Calendars_event_preview_venue:before {
	font-family: 'lucide' !important;
	content: "\e111" !important;
}

/* Override Communities filter bar icons */
.qp-communities-people::before {
	font-family: 'lucide' !important;
	content: "\e19f" !important;
}
.qp-communities-interests::before {
	font-family: 'lucide' !important;
	content: "\e0f2" !important;
}
.qp-communities-location::before {
	font-family: 'lucide' !important;
	content: "\e111" !important;
}
.qp-communities-search::before {
	font-family: 'lucide' !important;
	content: "\e151" !important;
	-webkit-text-stroke: 0.5px;
}
.qp-communities-close::before {
	font-family: 'lucide' !important;
	content: "\e1b2" !important;
}
.qp-communities-people,
.qp-communities-interests,
.qp-communities-location,
.qp-communities-search,
.qp-communities-close {
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	filter: none !important;
	color: var(--column-title-color) !important;
	background: #e8f0e8 !important;
}

/* Override Filter by Relationship popup icons with Lucide */
.Communities_dialog_labels .Users_labels_icon {
	display: none !important;
}
.Communities_dialog_labels .Users_labels_label::before,
.Communities_dialog_labels .Users_labels_action::before {
	font-family: 'lucide' !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #e8f0e8;
	color: var(--column-title-color);
	margin: 0 auto 5px;
	content: "\e19f"; /* default: user icon */
}
.Communities_dialog_labels li[data-label="*"]::before {
	content: "\e151"; /* search */
}
.Communities_dialog_labels li[data-label="Users/friends"]::before {
	content: "\e1a4"; /* users */
}
.Communities_dialog_labels li[data-label="Users/invited"]::before {
	content: "\e1a2"; /* user-plus */
}
.Communities_dialog_labels li[data-label="Users/invitedMe"]::before {
	content: "\e1a0"; /* user-check */
}
.Communities_dialog_labels .Users_labels_add::before {
	content: "\e081"; /* circle-plus */
}

input[name=query].Communities_eventChooser_input,
input[name=query].Communities_eventChooser_input:focus {
	border-color: var(--column-title-color);
}

/* Remove drop shadows on buttons and nav bar */
.Q_button,
button,
input[type="submit"],
.Calendars_event_tool .Q_button,
#dashboard_slot,
.Q_mobile #dashboard_slot,
.Q_mobile #dashboard,
.Q_mobile #dashboard .Q_tabs_tabs,
.Q_mobile #dashboard .Q_tabs_tab,
#dashboard_community_contextual {
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
}

/* ============================================ */
/* Event detail panel refinements               */
/* ============================================ */

/* Consistent row padding + subtle dividers instead of loose margin */
#page .Calendars_event_tool .Calendars_info > .Q_button {
	padding: 14px 12px;
	margin-bottom: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 0;
	background: transparent;
	color: inherit;
	transition: background-color 0.15s ease;
	position: relative;
	min-height: unset;
}
#page .Calendars_event_tool .Calendars_info > .Q_button + .Q_button.Streams_aspect_interests,
#page .Calendars_event_tool .Calendars_info > .Q_button:last-of-type {
	border-bottom: none;
}

/* Make clickable rows feel clickable — hover state + right chevron.
   Exclude interests (hidden) */
.Q_notTouchscreen #page .Calendars_event_tool .Calendars_info > .Q_button[data-invoke]:not(.Streams_aspect_interests):hover {
	background: rgba(91, 140, 90, 0.06);
	cursor: pointer;
}
#page .Calendars_event_tool .Calendars_info > .Q_button[data-invoke]:not(.Streams_aspect_interests)::after {
	content: "›";
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 26px;
	color: rgba(0, 0, 0, 0.3);
	line-height: 1;
	font-weight: 300;
}

/* Icons — consistent size, muted color so they support the label rather than scream */
#page .Calendars_event_tool .Calendars_info_icon {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 14px;
	color: var(--column-title-color);
	font-size: 20px;
	flex-shrink: 0;
}
#page .Calendars_event_tool .Calendars_info_icon i {
	color: inherit !important;
}

/* Content typography */
#page .Calendars_event_tool .Calendars_info_content {
	font-size: 15px;
	line-height: 1.4;
	padding-right: 24px;
}

/* Hide the interests/roles/topics row */
#page .Calendars_event_tool .Calendars_info > .Streams_aspect_interests {
	display: none;
}

/* Hide the admin-editable title block — h1 at top already shows the title */
.Calendars_event_tool .Calendars_event_title {
	display: none;
}

/* Reorder: description first, then time, then location, then other actions */
#page .Calendars_event_tool .Calendars_info {
	display: flex;
	flex-direction: column;
}
#page .Calendars_event_tool .Calendars_info > .Calendars_event_description {
	order: -3;
}
#page .Calendars_event_tool .Calendars_info > .Q_aspect_when {
	order: -2;
}
#page .Calendars_event_tool .Calendars_info > .Q_aspect_where {
	order: -1;
}

/* Wrap the description as a card with a heading */
.Calendars_event_tool .Calendars_event_description {
	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	padding: 14px 16px 16px;
	margin-top: 8px;
	margin-bottom: 16px;
	position: relative;
}
/* Same as .Communities_profile_userId::before above: the heading is copy, so
   it lives in text/Yoga/content/en.json (cssLabels.AboutThisEvent) and arrives
   as a custom property. The fallback below is deliberately the app's wording
   ("class"), not the platform's ("event"). */
.Calendars_event_tool .Calendars_event_description::before {
	content: var(--Yoga-label-aboutThisEvent, "About this class");
	display: block;
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--column-title-color);
	margin-bottom: 10px;
}

/* Admin-editable title block — softer, grouped with description */
.Calendars_event_tool .Calendars_event_title {
	margin-top: 24px;
	padding: 10px 16px;
	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
}

/* Floating feedback / help button — opens the user's mail app. */
#feedback_button {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--button-bg-color);
	color: var(--button-text-color);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	font-size: 22px;
	z-index: 1000;
	transition: transform 0.15s ease;
}
#feedback_button:hover,
#feedback_button:focus {
	transform: scale(1.05);
}
#feedback_button:active {
	transform: scale(0.97);
}
/* On mobile the dashboard tab bar is pinned to the bottom of the viewport,
   so lift the button above it. */
.Q_mobile #feedback_button {
	bottom: calc(72px + env(safe-area-inset-bottom, 0px));
	right: 12px;
	width: 42px;
	height: 42px;
	font-size: 20px;
}

/* ==========================================================================
   Event composer: gated steps (issue #74)

   Calendars/event/composer's prepareSteps() gates a step by writing inline
   `opacity: 0.5; pointer-events: none` on it. That also kills the cursor
   change and swallows the click, so a gated step — including the Share
   button, gated on the location-OR-livestream step — is indistinguishable
   from a broken control.

   Give the step container its pointer events back (so it can be clicked and
   can show a not-allowed cursor) while keeping every control inside it
   inert. Yoga.js mirrors the platform's inline style into
   .Yoga_composer_locked and handles the click; note that !important here
   does not change element.style, so that mirroring stays reliable.
   ========================================================================== */
.Calendars_event_composer_tool .Calendars_step.Yoga_composer_locked {
	pointer-events: auto !important;
	cursor: not-allowed;
	position: relative;
	filter: grayscale(0.7);
}
.Calendars_event_composer_tool .Calendars_step.Yoga_composer_locked * {
	pointer-events: none !important;
}

/* The step the user actually has to fill in, called out on a blocked click. */
.Calendars_event_composer_tool .Calendars_step.Yoga_composer_blocking {
	outline: 2px solid var(--button-bg-color);
	outline-offset: 4px;
	border-radius: 6px;
}
@keyframes Yoga_composer_flash {
	0%, 100% { box-shadow: 0 0 0 0 rgba(242, 169, 34, 0); }
	35% { box-shadow: 0 0 0 6px rgba(242, 169, 34, 0.35); }
}
.Calendars_event_composer_tool .Calendars_step.Yoga_composer_flash {
	animation: Yoga_composer_flash 0.9s ease-in-out 2;
}
.Calendars_event_composer_tool .Yoga_composer_hint {
	display: block;
	margin: 8px 0 2px;
	padding: 6px 10px;
	background: var(--dashboard-contextual-selected-bg, #FFF3D6);
	border-left: 3px solid var(--button-bg-color);
	border-radius: 4px;
	color: #3D2800;
	font-size: 0.9em;
	line-height: 1.35;
	cursor: default;
}
@media (prefers-reduced-motion: reduce) {
	.Calendars_event_composer_tool .Calendars_step.Yoga_composer_flash {
		animation: none;
	}
}

/* ===========================================================================
   Issue #81 — Invite dialog: the three method icons were white-on-white
   ---------------------------------------------------------------------------
   Mechanism (same family as the "Dark mode causes white-on-white" gotcha):
   Q.css's `@media (prefers-color-scheme: dark)` block (Q.css:1186-1222) sets
   BOTH `color: white` and `fill: white` on `.Q_overlay` / `.Q_fullscreen_dialog`.
   The Yoga dark-mode override earlier in this file re-lights `background` and
   `color` for those dialogs but never re-lights `fill` — so with OS dark mode
   on, the dialog body is forced back to #fff while inherited `fill: white`
   survives. The captions stayed readable (they follow `color`) and only the
   icons vanished, which is exactly what #81 reports.

   The three icons are inline <svg> in
   Streams/views/Streams/templates/invite/modernDialog.handlebars, and none of
   their <path> elements carry a fill attribute — so `fill` inherits from the
   wrapper and one declaration colors all three.

   Declared unconditionally (not inside a prefers-color-scheme query) so the
   icons are correct in both schemes; specificity 0,2,x beats Q.css's 0,1,0.
   =========================================================================== */
.Streams_invite_modern_dialog .Streams_invite_option_icon,
.Streams_invite_modern_dialog .Streams_invite_option_icon svg,
.Streams_invite_modern_dialog .Streams_invite_option_icon svg path {
	fill: #333;
}

/* ===========================================================================
   Issue #82 — Footer (Terms of Use + copyright) on mobile and tablet
   ---------------------------------------------------------------------------
   `#footer_slot` is now emitted by all three layouts, not just desktop.php.
   `#page` is a flex column on every form factor (Q_initialExtras.php always
   adds Q_layout_sidebar or Q_layout_widebar, and .Q_mobile #page is flexed
   above), and `.Communities #content_slot` is `flex: 1` — so the footer must
   declare itself non-flexible or the column will squash it to nothing on the
   short viewports where it was missing in the first place.
   =========================================================================== */
#footer_slot {
	flex: 0 0 auto;
}

/* On mobile the whole shell is fixed-height (html has overflow:hidden and
   #page is sized to the viewport minus the dashboard), so the footer cannot
   be scrolled to — it is either on screen or unreachable. Keep it on screen
   but make it cost one line instead of the ~90px the desktop styling takes. */
.Q_mobile #footer {
	padding: 6px 10px;
}
.Q_mobile #footer_content {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 12px;
}
.Q_mobile #footer_links a {
	margin-right: 0;
	font-size: 0.8rem;
}
.Q_mobile #footer_copyright {
	margin-top: 0;
	font-size: 0.7rem;
}
/* ---------------------------------------------------------------------------
   /me profile header (issue #85)

   Communities/column/me.php wraps the avatar in .Communities_avatar_section,
   a flex row. Two things then go wrong on this page, and neither is visible
   from the markup alone:

   1. Communities/css/columns/me.css still styles the avatar through
      `.Communities_me_column > .Users_avatar_tool > .Users_avatar_name` — a
      *direct child* chain that the .Communities_avatar_section wrapper broke,
      so the 10px gap it intends between icon and name is silently dropped.
      The only rules from that file still landing on the header are
      `#Users_avatar-Communities_me_tool .Streams_username / .Streams_firstName
      / .Streams_lastName { display: block }`, which is precisely why the
      header reads as three bare stacked lines of equal weight.

   2. Yoga.js flags any <img> that fails to load with .Yoga_img_broken and the
      rule above hides it with `display: none !important`. That is right for
      event curtains and list rows, but for the single 80px avatar this page is
      built around it turns "broken icon" into "no icon at all" and collapses
      the row onto the text.

   Fixed in the app rather than the plugin: give the section a real row layout,
   keep a broken avatar as a neutral placeholder box instead of removing it,
   and give the three name lines a hierarchy so the block reads as a profile
   header. Scoped to the /me column, so nothing else inherits it.
--------------------------------------------------------------------------- */
.Communities_me_column .Communities_avatar_section .Users_avatar_tool {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 80px;
}
.Communities_me_column .Communities_avatar_section .Users_avatar_icon {
	flex: 0 0 80px;
	width: 80px;
	height: 80px;
	border-radius: 8px;
	object-fit: cover;
}
/* Keep the avatar's box when its src 404s: the element stays laid out as an
   empty tile so the header doesn't collapse. `display` needs !important to
   beat `.Yoga_img_broken`; `color: transparent` suppresses the alt text. */
.Communities_me_column .Communities_avatar_section img.Yoga_img_broken {
	display: block !important;
	color: transparent;
	background: var(--column-bg-color, #FFF8EC);
	border: 1px solid rgba(0, 0, 0, 0.08);
}
.Communities_me_column .Communities_avatar_section .Users_avatar_name {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	min-width: 0;
}
.Communities_me_column .Communities_avatar_section .Streams_firstName,
.Communities_me_column .Communities_avatar_section .Streams_lastName {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}
/* DOM order is username, firstName, lastName (the tool is rendered with
   show => 'u f l'), so reorder the username to read as the subtitle. */
.Communities_me_column .Communities_avatar_section .Streams_username {
	font-size: 14px;
	opacity: 0.7;
	order: 1;
}

/* ---------------------------------------------------------------------------
   #91 (2): the sender's name inside a received chat bubble is near-invisible.

   Two independent causes stack:

   1. chat.css declares its bubble text colors as :root variables and flips
      them in an @media (prefers-color-scheme: dark) block:
        --chat-to-me-text-color: black    (light scheme)
        --chat-to-me-text-color: white    (dark scheme)
      then paints every descendant with
        .Streams_chat_messages .Streams_chat_to_me * { color: var(...) }
      That selector is 0,2,1. This app's dark-mode antidote higher up in this
      file is `#content_slot, #content, .Q_columns_column { color: #333 }` at
      0,1,0, so it loses — and the app's own
      `.Streams_chat_to_me .Streams_chat_bubble { color: #222 }` is 0,2,0,
      which loses too and in any case only colors the bubble, not the
      descendants the * rule reaches. With the OS in dark mode the received
      bubble therefore paints white text on this app's light grey
      (#d2d3d5 - #e5e5e5) bubble. Yoga is a light-only app; that whole
      flip is unwanted here.

   2. `.Streams_chat_tool .Streams_chat_bubble .Users_avatar_name { opacity: .8 }`
      further up in this file fades the name, and nothing distinguishes it
      from the message text otherwise, so even at full contrast it does not
      read as a name.

   Fixed by pinning the variables for both schemes (app CSS loads after the
   plugin's, and a media query adds no specificity, so a later :root wins in
   both) and then re-stating the name explicitly at 0,4,0 — high enough to
   beat the platform's * rule no matter what order the tool's stylesheet
   happens to load in.
--------------------------------------------------------------------------- */
:root {
	--chat-to-me-text-color: #222;
	--chat-from-me-text-color: var(--chat-text-color, #3D2800);
}

.Streams_chat_messages .Streams_chat_item .Streams_chat_bubble .Users_avatar_name,
.Streams_chat_messages .Streams_chat_item .Streams_chat_bubble .Users_avatar_name * {
	opacity: 1;
	font-weight: 600;
}
.Streams_chat_messages .Streams_chat_to_me .Streams_chat_bubble .Users_avatar_name,
.Streams_chat_messages .Streams_chat_to_me .Streams_chat_bubble .Users_avatar_name * {
	color: #1c2a3a;
}
.Streams_chat_messages .Streams_chat_from_me .Streams_chat_bubble .Users_avatar_name,
.Streams_chat_messages .Streams_chat_from_me .Streams_chat_bubble .Users_avatar_name * {
	color: var(--chat-text-color, #3D2800);
}

/* #91 (3): the timestamp now carries a title with the absolute date and time,
   so give it the affordance that says so. */
.Streams_chat_item .Streams_chat_timestamp[title] {
	cursor: help;
}

/* ---------------------------------------------------------------------------
 * Accessibility (#92)
 *
 * Tap targets that are divs with pointer handlers, not buttons. Without
 * user-select:none a slightly draggy tap on a class card starts a text
 * selection on the date instead of activating the card, and iOS pops its
 * callout menu on a long press. Scoped to the card/control chrome only —
 * never to inputs, chat messages or event descriptions, where selecting text
 * is the point.
 * ------------------------------------------------------------------------ */
.Calendars_event_preview_tool,
.Calendars_event_preview_tool .Calendars_event_preview_container,
.Calendars_event_preview_tool .Calendars_event_title,
.Calendars_event_preview_tool .Calendars_event_info,
#dashboard .Q_tabs_tab,
#dashboard .Q_tabs_tab .Q_tabs_title,
#dashboard_user .Users_status_avatar,
.Users_status_login,
#feedback_button {
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*
 * These elements only became focusable in Yoga.js's a11y shim (role=button +
 * tabindex), so nothing had ever given them a focus ring. :focus-visible keeps
 * it off for pointer users, who already get the platform's press effects.
 */
#dashboard .Q_tabs_tab > a:focus-visible,
[data-Yoga-a11y]:focus-visible {
	outline: 3px solid var(--dashboard-main-bg-color, #F2A922);
	outline-offset: 2px;
	border-radius: 4px;
}

/*
 * aria-disabled is the only signal a screen reader gets for a gated composer
 * step (the platform communicates it with opacity alone). Give it a cursor
 * that agrees, so the state is not opacity-only for sighted users either. The
 * step keeps its click handler — Yoga/composer uses it to explain what is
 * blocking — so pointer-events stays untouched here.
 */
.Calendars_step [aria-disabled="true"],
.Calendars_step[aria-disabled="true"] .Q_button {
	cursor: not-allowed;
}

/*
 * Read-only Streams/inplace: no placeholder (#90).
 *
 * A viewer cannot edit the event title or description, but Streams/inplace
 * still substitutes placeholder markup for an empty value on every field
 * change — and with no child Q/inplace tool to read the text from, it
 * interpolates null and prints the word "null"
 * (Streams/web/js/tools/inplace.js:87-92). Yoga.js marks those tools
 * .Yoga_inplace_readonly; the rule has to live in CSS rather than in that
 * shim because the markup is rebuilt from scratch each time.
 */
.Yoga_inplace_readonly .Q_placeholder {
	display: none;
}

/* ---------------------------------------------------------------------------
   #93 -- Event detail column polish

   Four independent defects on the Calendars/event column, grouped here
   because they all show up on the same screen. The 100-empty-avatar-slots
   half of #93 is NOT here: it is a config override in
   apps/yoga/Yoga/config/app.json (Calendars/events/defaults/participants),
   because the count is a tool option, not a style.
--------------------------------------------------------------------------- */

/* (1) The participants strip escapes its container.

   Streams/participants lays its avatars out as inline-blocks inside
   .Streams_participants_container (Streams.css:190-201). Inline-block wraps,
   so the strip grows downward as attendees are added, and because
   .Users_avatar_tool boxes have unequal heights -- a blank avatar contributes
   a "&nbsp;" name (Users/avatar.js:216) while a real one contributes a name
   that may wrap to two lines -- rows of a wrapped strip sit at different
   baselines, which is the "names above/below their icons" symptom.

   Make the strip one non-wrapping row that scrolls horizontally, and give
   every item the same fixed-width column box so the icon is always above its
   name. Then the strip's height is constant no matter how many attendees
   there are, and it cannot push past its container. */
#page .Calendars_event_tool .Calendars_event_participants .Streams_participants_container {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 4px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-bottom: 4px;
	max-width: 100%;
}
#page .Calendars_event_tool .Calendars_event_participants .Streams_participants_avatars,
#page .Calendars_event_tool .Calendars_event_participants .Streams_participants_blanks {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 4px;
}
#page .Calendars_event_tool .Calendars_event_participants .Users_avatar_tool,
#page .Calendars_event_tool .Calendars_event_participants .Streams_participants_invite {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	flex: 0 0 auto;
	width: 56px;
	max-width: 56px;
	padding: 3px;
	box-sizing: border-box;
}
/* The invite BUTTON (a separate element from .Streams_participants_invite --
   participants.js builds both) carries a text label, so it keeps its natural
   width and only opts out of shrinking. */
#page .Calendars_event_tool .Calendars_event_participants .Streams_participants_invite_button {
	flex: 0 0 auto;
	align-self: flex-start;
}
#page .Calendars_event_tool .Calendars_event_participants .Streams_invite_icon {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
}
#page .Calendars_event_tool .Calendars_event_participants .Users_avatar_icon {
	width: 40px;
	height: 40px;
	object-fit: cover;
	flex: 0 0 auto;
}
#page .Calendars_event_tool .Calendars_event_participants .Users_avatar_name {
	width: 100%;
	line-height: 1.2;
	max-height: 2.4em;
	overflow: hidden;
	text-align: center;
}
/* The tool's own "See All" control animates the tool's HEIGHT
   (participants.js:407-427) to reveal a wrapped strip. A strip that scrolls
   sideways has nothing to reveal, so the control would only ever collapse the
   row to zero. It also ships with no stylesheet anywhere in the platform --
   it renders as a bare expand.png next to the words "See All". Drop it here;
   horizontal scrolling is the affordance now. */
#page .Calendars_event_tool .Calendars_event_participants .Streams_participants_controls {
	display: none;
}

/* (2) The close X floats over the column's content.

   The event column is opened with Q_columns_hideTitle (app.json,
   Q/columns/classes/event), and the block further up this file restores its
   close X by turning .Q_columns_title into a 50x50 corner overlay. That
   overlay is absolutely positioned against the COLUMN, while the content
   scrolls inside .Q_column_slot (columns.css:120-127, overflow-y: auto). So
   the X is pinned at the top-right while the About card and everything else
   slides underneath it -- and the X is white-on-white the moment the photo
   header has scrolled away.

   Fixing the overlap by reserving space would mean reserving it on every
   element that can ever scroll past, so instead make the X legible against
   anything: a small translucent chip that reads on the photo header and on
   white content alike. */
.Communities .Q_columns_column.Q_columns_hideTitle .Q_columns_title .Q_close {
	width: 36px;
	height: 36px;
	min-width: 36px;
	margin: 7px;
	padding: 0;
	top: 0;
	right: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.4);
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.Communities .Q_columns_column.Q_columns_hideTitle .Q_close::before {
	font-size: 26px;
}

/* (3) Host/admin rows carry an unfinished red debug outline.

   Calendars/web/css/event.css:439 puts `border: 1px solid red` on every
   .Calendars_aspect_admin row, and :450 puts a second `border: solid 1px
   #bf1118` on the Cancel Class row. The event-detail refinements above set
   only `border-bottom`, so the plugin's top/left/right red edges survive and
   the rows read as half-styled. Neutralise both, then give Cancel Class a
   deliberate destructive treatment (red label and icon) rather than a red
   box, so the signal stays without the debug look. */
#page .Calendars_event_tool .Calendars_info > .Q_button.Calendars_aspect_admin,
#page .Calendars_event_tool .Calendars_info > .Q_button.Calendars_aspect_checkin,
#page .Calendars_event_tool .Calendars_info > .Q_button.Calendars_aspect_close {
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	background: transparent;
	color: inherit;
}
#page .Calendars_event_tool .Calendars_info > .Q_button.Calendars_aspect_close,
#page .Calendars_event_tool .Calendars_info > .Q_button.Calendars_aspect_close .Calendars_info_content,
#page .Calendars_event_tool .Calendars_info > .Q_button.Calendars_aspect_close .Calendars_info_icon {
	color: #bf1118;
}

/* (4) Cancel Class renders a giant washed-out X behind its label.

   Every other row's icon is an icon-font glyph, but the closeEvent row is
   `<img src="Calendars/img/white/close.png">` (Calendars event.js template).
   That file is 128x128 and its artwork is WHITE. The .Calendars_info_icon box
   is 32x32 inline-flex with no sizing on the img and no overflow clip, so the
   image renders at its natural 128px, spills across the row behind the text,
   and is near-invisible on the light background.

   Hide the img and draw the same \e91c glyph the column close X uses -- the
   qplatform-communities face is declared in Communities/css/icons.css:41-43,
   which Communities loads on every page. The max-width guard below stops any
   other oversized <img> icon doing the same thing. */
#page .Calendars_event_tool .Calendars_info_icon img {
	max-width: 100%;
	max-height: 100%;
}
#page .Calendars_event_tool .Calendars_aspect_close .Calendars_info_icon img {
	display: none;
}
#page .Calendars_event_tool .Calendars_aspect_close .Calendars_info_icon::before {
	content: "\e91c";
	font-family: 'qplatform-communities';
	font-size: 24px;
	line-height: 1;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	color: inherit;
}

/* ---------------------------------------------------------------------------
   #94 -- Community page polish

   Four defects on the /community column. The overlapping role tiles are fixed
   in apps/yoga/Yoga/web/js/Yoga.js (Q.Tool.define.options for
   Communities/roles) because the overlap is produced by a running JS timer,
   not by a style; the sizing for the mode it switches into is here.
--------------------------------------------------------------------------- */

/* (1) The member-search placeholder is invisible.

   `Streams/userChooser`'s input takes `color: var(--content-fg-color)`
   (Communities/css/Communities.css:288-295, and the same for the /people
   column at Communities/css/columns/people.css:22). Q.css declares that
   variable as `black` at :root (Q.css:14) and re-declares it as **white**
   inside `@media (prefers-color-scheme: dark)` (Q.css:1186-1188).

   The dark-mode block further up this file re-lights `color` on a fixed list
   of containers, but a custom property is not `color` -- it is a third
   inherited thing to re-light, alongside `color` and `fill` (see #81). So with
   OS dark mode on, this input's text and placeholder computed to white on the
   cream column.

   Declare it unconditionally: Yoga.css loads after Q.css, and a plain :root
   rule beats an earlier one inside a media query at equal specificity. */
:root {
	--content-fg-color: #333;
}
/* And make the placeholder read as a placeholder rather than as faint body
   text -- the input has no border box of its own, so this is the only thing
   telling the user it is a field. */
input[name=query].Streams_userChooser_input::placeholder,
input[name=query].Communities_conversationChooser_input::placeholder,
input[name=query].Communities_eventChooser_input::placeholder {
	color: #8A8A8A;
	opacity: 1;
}

/* (2) The bottom filter bar mixes two unrelated palettes.

   "Everyone" is `.Q_aspect_who`, which Q.css:450 hard-codes to #394ad5 --
   note it does NOT read --Q-aspect-people-text-color, so the app palette
   value for that aspect is a no-op here. "All Interests" is
   `.Streams_aspect_interests`, which Communities.css:245-248 sets from
   --Q-aspect-interests-text-color and then immediately overrides at :253-257
   with --Q-aspect-what-text-color (#000 in this app). Their two `<i>` icons
   pick up a third and fourth colour from Communities/css/icons.css.

   Give the whole bar one treatment, scoped to the community column's controls
   so no other column's triggers change. */
.Q_controls_slot .Communities_community_controls .Q_controls_trigger,
.Q_controls_slot .Communities_community_controls .Communities_filter_value,
.Q_controls_slot .Communities_community_controls .Communities_filter_value.Q_aspect_who,
.Q_controls_slot .Communities_community_controls .Communities_filter_value.Streams_aspect_interests,
.Q_controls_slot .Communities_community_controls .Q_controls_trigger > i {
	color: var(--column-title-color);
	border-color: transparent;
}
.Q_controls_slot .Communities_community_controls .Q_controls_trigger {
	font-size: 15px;
}
.Q_controls_slot .Communities_community_controls .Q_controls_trigger > i {
	margin-right: 4px;
}

/* (3) The member grid does not reflow.

   `#Communities_community_column` is `white-space: nowrap`
   (Communities/css/columns/community.css:79-84). The rescue for the avatar
   list is `html #Users_list_tool { white-space: normal }`
   (Communities/css/columns/people.css:43-49) -- keyed to the element **id**,
   which only exists when the tool is rendered without one. The /people column
   does exactly that, but the /community column renders
   `Q::tool('Users/list', ..., "communityProfile")`, so its element is
   `#Users_list-communityProfile_tool` and the rescue misses it. The avatars
   are inline-blocks (Streams.css:190) inside a nowrap ancestor, in a column
   slot that is `overflow: hidden` (community.css:64-66).

   Lay the list out as a real wrapping grid instead of relying on inline-block
   flow: equal-width tiles, top-aligned so a two-line name cannot drag its
   whole row down, and white-space reset so the inherited nowrap stops
   mattering whatever the tool's id happens to be. */
.Q_column_community #Communities_profile_people .Users_list_tool {
	white-space: normal;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	gap: 12px 10px;
	padding: 10px;
	overflow-y: auto;
	/* community.css:143-146 already gives this `flex: 1` inside the section's
	   column flexbox; min-height: 0 is what lets it actually scroll rather
	   than stretch its parent. */
	min-height: 0;
}
.Q_column_community #Communities_profile_people .Users_list_tool .Users_avatar_tool {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 auto;
	width: 88px;
	max-width: 88px;
	margin: 0;
}
.Q_column_community #Communities_profile_people .Users_list_tool .Users_avatar_icon {
	width: 80px;
	height: 80px;
	object-fit: cover;
	flex: 0 0 auto;
}
.Q_column_community #Communities_profile_people .Users_list_tool .Users_avatar_name {
	width: 100%;
	text-align: center;
	line-height: 1.2;
	max-height: 2.4em;
	overflow: hidden;
	word-break: break-word;
}

/* (4) Role tiles -- sizing for the all-at-once mode Yoga.js switches on.

   With `transition: false` the tool keeps its own wrapping flex row
   (Communities/css/tools/roles.css:1-9) and drops the fixed 80x80 box, so the
   tiles no longer overlap. The remaining problem is the label width: this
   community's role titles are "Calendars Admins" and "Calendars Staff", and
   the shipped `max-width: 70px` with `overflow: hidden` cuts them. Widen and
   let them wrap under their icon. */
.Q_column_community .Communities_roles_tool {
	justify-content: flex-start;
	margin-bottom: 6px;
}
.Q_column_community .Communities_roles_tool .Communities_roles_label {
	min-width: 56px;
	max-width: 92px;
	overflow: visible;
	white-space: normal;
	word-break: break-word;
}