/*
 * ce3.css - Bootstrap 5 layer for the CE3 template set (/smarty/bootstrap/).
 *
 * Loaded LAST by /smarty/bootstrap/common/MainTemplate.tpl, after both
 * cssLoader.php (ce_style_modern-min.css) and the Bootstrap 5 CDN bundle.
 *
 * Two jobs only:
 *   1. neutralise the legacy fixed-width rules that pre-date the responsive
 *      layout, since they are ID selectors and would otherwise beat Bootstrap;
 *   2. carry the handful of widths/looks the grid alone cannot express
 *      (the fixed-size ad rails).
 *
 * The legacy sheets are still served to the old /smarty/desktop/ and
 * /smarty/mobile/ template sets, so nothing here may be moved into them.
 */

/* --- 1. legacy overrides ------------------------------------------------- */

/* ce_style_modern-min.css caps #container with `max-width: var(--ce-maxSize)`,
   a var it steps down at 1600/1440/1366/1280px. That is the legacy responsive
   system, and being an id selector it beats .container-fluid. Let Bootstrap own
   the page width instead - swap container-fluid for container in
   MainTemplate.tpl if a capped width is wanted. */
#container {
	width: auto;
	max-width: none;
	margin: 0;
}

/* Phones: narrower side gutters, so the content gets the width. The page
   edge goes from 12px to 4px (the grid rows inside cancel their own gutter,
   so content lands at the container padding), the navbar keeps a little more
   inside it for the burger, and cards drop from 16px to 12px of padding.
   The grid gutter shrinks with the padding, to 8px: a row pulls out by half
   its gutter, and at the default 16-24px that is more than the 4px edge, so
   the page scrolled sideways. Rows set to no gutter (g-0 / gx-0) keep it. */
@media (max-width: 575.98px) {
	#container.ce3 {
		padding-left: 4px;
		padding-right: 4px;
	}
	.ce3 .row:not(.g-0):not(.gx-0) {
		--bs-gutter-x: .5rem;
	}
	.ce3 .navbar > .container-fluid {
		padding-left: 8px;
		padding-right: 8px;
	}
	.ce3 .card-body {
		padding-left: .75rem;
		padding-right: .75rem;
	}
}

/* the old layout painted a header strip onto <body> as a background image;
   the CE3 header-top paints its own background. */
body {
	background-image: none;
}

#header {
	width: auto;
	/* the menu and the content sat flush against the navbar; the row that
	   follows uses .g-3, whose negative top margin and column padding
	   cancel out, so this margin is the whole gap. */
	margin-bottom: 3px;
}

/* Phone anchor ad, pinned to the bottom of the viewport.

   The mobile set gets this from jQuery Mobile - its layouts use
   <div data-role="footer" data-position="fixed"> and mobile/common/footer.tpl
   pads the page by 150px so the content clears it. CE3 has no jQuery Mobile,
   so both halves are here.

   z-index 1030 is Bootstrap's fixed-bottom level: above the page, below the
   offcanvas menu (1045) and modals (1055), so the bar never covers either.

   The markup is emitted only for phones with ads on, so there is no media
   query here - the server has already decided. */
.ce3-ad-anchor {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1030;
	background-color: var(--bs-body-bg, #fff);
	box-shadow: 0 -1px 4px rgba(0, 0, 0, .15);
	text-align: center;
	padding: 2px 0;
	line-height: 0;    /* no stray descender gap under the creative */
}

/* 100px creative + the bar's 4px padding, plus room for the iOS home
   indicator so the last line of content is not sitting under it. */
.ce3-ad-anchor-spacer {
	height: calc(110px + env(safe-area-inset-bottom, 0px));
}

/* --- 2. CE3 layout ------------------------------------------------------- */

/* Ad rails are sized by their creative, not by the grid: 300x600 on the left,
   160x600 on the right. Both collapse away below their breakpoint. */
@media (min-width: 992px) {
	.ce3-rail-left {
		flex: 0 0 auto;
		width: 310px;
	}
}

/* Below lg the left rail holds the .offcanvas-lg, which must stay displayable -
   so the column is collapsed to nothing rather than hidden with d-none. The
   offcanvas itself is position:fixed at this width, so it escapes the zero box. */
@media (max-width: 991.98px) {
	.ce3-rail-left {
		width: 0;
		padding: 0;
	}
}

/* The centre column must be allowed to shrink below its own min-content width.
   Flex items default to min-width:auto, and the 970x250 ad slot inside puts that
   floor at 970px - with the two rails (310 + 176) that exceeds the row, and
   flexbox wraps the ad rail to the bottom of the page instead of keeping it as a
   sidebar. Reproduced in both LTR and RTL between about 1300px and 1500px. */
.ce3-main {
	min-width: 0;
}

/* The 970x250 creative needs a centre column at least 970px wide. With both ad
   rails present (310 + 176) plus gutters that only happens from about 1479px of
   viewport up, so the slot is shown from 1500px and hidden below it - a clipped
   or side-scrolling billboard is worse than no billboard.
   NB when hidden the slot is display:none, so it stops contributing to the
   centre column's min-content width entirely; .ce3-main's min-width:0 above
   stays as the safety net for any other wide content (tables, <pre>, creatives
   added later). */
.ce3-ad-wide {
	display: none;
}

@media (min-width: 1500px) {
	.ce3-ad-wide {
		display: block;
	}
}
/* Unread/pending counters: plain text spans, empty at zero. See the note in
   common/left_menu_new.tpl for why these are not Bootstrap badges. */
.ce3-count {
	font-weight: 700;
	color: var(--bs-danger);
	white-space: nowrap;
}

@media (min-width: 1200px) {
	.ce3-rail-right {
		flex: 0 0 auto;
		width: 176px;
	}
}

/* Sidebar menu: submenus are collapses, so give the toggles a caret that
   flips when open. */
.ce3-menu .ce3-caret {
	transition: transform .2s ease-in-out;
}

.ce3-menu [aria-expanded="true"] .ce3-caret {
	transform: rotate(90deg);
}

.ce3-menu .nav-link {
	color: var(--bs-body-color);
}

.ce3-menu .nav-link:hover,
.ce3-menu .nav-link:focus {
	background-color: var(--bs-secondary-bg);
}

.ce3-menu .nav-link.active {
	color: var(--bs-white);
}

/* Flags in the language submenu keep their intrinsic size. */
.ce3-menu img {
	width: 16px;
	height: auto;
}

/* --- 3. jQuery UI widgets inside CE3 pages -------------------------------
   The shared page scripts attach jQuery UI 1.11.4 widgets to our markup at
   runtime and we are not touching those scripts (they are shared with the
   legacy templates). So skin the widgets to read as Bootstrap controls.
     - update-min.js runs $("select").selectmenu() on EVERY select, so signup
       and update never show a native <select> at all
     - it also calls .buttonset() on #Gender and #mailing_list
     - login-min.js / signup-min.js / signupFirstStage.js call .button()
   Everything here is scoped to .ce3 so the legacy pages are untouched. */

/* NB: in jQuery UI 1.11.4 the selectmenu button is
   <span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-all">
   - it is NOT a .ui-button, so do not qualify the selector with that class.
   Its width is set inline from the underlying <select>'s width, which is why
   the per-field widths further down are applied to the selects, not here. */
.ce3 .ui-selectmenu-button {
	max-width: 100%;
	padding: 0;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--bs-body-color);
	background: var(--bs-body-bg);
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	vertical-align: inherit;
}

.ce3 .ui-selectmenu-button:hover,
.ce3 .ui-selectmenu-button:focus {
	background: var(--bs-body-bg);
	border-color: var(--bs-primary-border-subtle);
}

.ce3 .ui-selectmenu-button span.ui-selectmenu-text {
	padding: .375rem .75rem;
	margin-right: 1.5rem;
}

/* Field widths carried over from the legacy signup/update page CSS. jQuery UI
   copies the select's width onto its widget, so these have to sit on the
   select and keep the !important the legacy used (they beat nothing otherwise:
   the widget's own width is inline). */
.ce3 #Day { width: 9em !important; }
.ce3 #Month { width: 13.5em !important; }
.ce3 #Year { width: 8em !important; }
.ce3 #face_to_face,
.ce3 #penpal { width: 7em !important; }
.ce3 #chatsoft { width: 20em !important; }
.ce3 [id^='Nlg'],
.ce3 [id^='Plg'] { width: 15em !important; }
.ce3 [id^='PLlevel'] { width: 12em !important; }

.ce3 .ui-selectmenu-menu .ui-menu {
	font-family: inherit;
	font-size: 1rem;
}

/* .overflow is added by update-min.js to the #Day/#Year/#Country menus */
.ce3 .ui-selectmenu-menu .overflow {
	height: 300px;
	overflow-y: scroll;
}

/* jQuery UI buttons: let the Bootstrap .btn beneath them show through. */
.ce3 .ui-button.btn {
	font-family: inherit;
	font-size: inherit;
	background-image: none;
	text-shadow: none;
}

.ce3 .ui-buttonset .ui-button {
	font-family: inherit;
}

/* jquery-ui-flat paints .ui-state-active WHITE, which reads as *unselected*
   against its blue .ui-state-default - the chosen option looks like the one you
   did not pick. signup.tpl and update.tpl each corrected this in their own
   inline <style>; the rule is scoped to those two buttonsets here so the active
   TAB on messages/search keeps the flat theme's look, and so the search page's
   own more specific .exchCtrlGroup/#sortRadio active colours still win.
   (The legacy rule set only the background, leaving dark text on dark blue;
   the explicit white here is a legibility fix.) */
.ce3 #Gender .ui-state-active,
.ce3 #mailing_list .ui-state-active {
	background: var(--ce-blu-dark, #356094);
	color: #fff;
	font-weight: bold;
}

/* The language rows update-min.js appends into #optNL / #optPL are raw markup
   with no Bootstrap classes, so give those selects the form-control look. */
.ce3 #optNL p,
.ce3 #optPL p {
	margin: 0 0 .5rem 0;
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}

.ce3 [name="plusImg"],
.ce3 [name="deleteImg"] {
	border: 0;
	color: var(--bs-secondary-color) !important;
	font-size: 1.25rem;
}

/* --- 4. mailbox ----------------------------------------------------------
   Was an inline <style> in members/messages.tpl. The row state classes are
   applied by ce3/messages.js, so the names are fixed. */

/* The .ce3 .ui-tabs .ui-tabs-panel padding reset that used to sit here went
   with the widget - members/messages.tpl is a Bootstrap vertical pill set
   now, and .tab-pane has no padding of its own to undo.

   Bootstrap paints an active pill with its own --bs-primary (#0d6efd), a
   second blue next to the CE3 palette that only measures 4.50:1 on white.
   Use --ce3-brand-dark, the colour every solid CE3 button uses, at 5.80:1 -
   the same reasoning as the .btn-check:checked rule in section 7. */
.ce3 .nav-pills .nav-link.active {
	background-color: var(--ce3-brand-dark);
	color: #fff;
}
.ce3 .nav-pills .nav-link {
	color: var(--ce3-brand-dark);
}

/* ---- tab strips (search.tpl's Search / Saved searches / Results) ----
   Stock .nav-tabs marks the selected tab with a white fill and a hairline
   border, which on this near-white page left it barely distinguishable from
   the other two. Underline instead: the selected tab is ink-dark and bold over
   a brand-blue rule, the rest muted - readable without adding a third blue
   block to a page that already carries buttons, toggles and cards.
   The 3px underline sits on the strip's 2px rule, hence the negative margin. */
.ce3 .nav-tabs {
	border-bottom: 2px solid var(--ce3-line);
}
.ce3 .nav-tabs .nav-link {
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	padding: .6rem 1.1rem;
	font-weight: 500;
	color: var(--ce3-body);
}
.ce3 .nav-tabs .nav-link:hover,
.ce3 .nav-tabs .nav-link:focus {
	color: var(--ce3-brand-dark);
	border-bottom-color: var(--ce3-line);
	isolation: auto;	/* stock .nav-tabs sets this for its border overlap, which is gone here */
}
.ce3 .nav-tabs .nav-link.active {
	background: transparent;
	color: var(--ce3-ink);
	font-weight: 700;
	border-bottom-color: var(--ce3-brand);
}

/* From md up the avatar page (members/change_avatar.tpl) stands its strip
   VERTICALLY beside the panel (the mailbox did too; it is horizontal
   everywhere now),
   and there an underline marks the wrong edge: it lands beneath one row of a
   stack, and the strip's own rule ends up floating under the last item where
   it means nothing. Same idea turned ninety degrees - the rule runs down the
   strip and the marker is a bar on the leading edge of the selected item.

   Hooked on .flex-md-column rather than on #tabs. That id is NOT unique:
   search.tpl and members/readConversation.tpl both wrap their strips in one
   too, and in both the .nav-tabs is a direct child, so an #tabs > .nav-tabs
   rule turns their horizontal tabs sideways from md up. The class says
   exactly what this block is for - vertical from md - and it is the same
   breakpoint as the query, so markup and stylesheet cannot drift apart
   silently: move one and the other stops matching visibly.

   border-inline-start rather than border-left: the RTL block at the end of
   this file flips the layout for Arabic, and a logical property follows the
   text direction on its own instead of needing a second rule there. */
@media (min-width: 768px) {
	.ce3 .nav-tabs.flex-md-column {
		border-bottom: 0;
		border-inline-start: 2px solid var(--ce3-line);
	}
	.ce3 .nav-tabs.flex-md-column .nav-link {
		border-bottom: 0;
		border-inline-start: 3px solid transparent;
		margin-bottom: 0;
		margin-inline-start: -2px;	/* sit the 3px marker on the strip's 2px rule */
	}
	.ce3 .nav-tabs.flex-md-column .nav-link:hover,
	.ce3 .nav-tabs.flex-md-column .nav-link:focus {
		border-inline-start-color: var(--ce3-line);
	}
	.ce3 .nav-tabs.flex-md-column .nav-link.active {
		border-inline-start-color: var(--ce3-brand);
	}
}

/* The tab strip and the panels sit in a flex row, and a flex item defaults to
   min-width:auto - it refuses to shrink below its content. A message preview
   is a long unbroken string, so without this the panel grows to fit it, the
   page scrolls sideways and .text-truncate never truncates anything. */
.ce3 #tabs > .tab-content {
	min-width: 0;
}

.ce3 .rowHeight { height: 50px; }

/* the select-all header between the toolbar and the list (it used to sit
   among the toolbar buttons and pushed them out of line on a phone): the
   transparent border matches the list border, so its checkbox lines up
   with the row checkboxes below. display:flex is set here, not with
   .d-flex: that one is !important and would beat the display:none Alpine
   uses to hide the row in an empty folder */
.ce3 .ce3-msg-selectall {
	display: flex;
	border: 1px solid transparent;
}

.ce3 .ce3-msg-names {
	min-width: 150px;
	max-width: 220px;
}

.ce3 .readMessage,
.ce3 .selectedMessage,
.ce3 .unreadMessage,
.ce3 .unreadMessageSelected {
	border-bottom: 1px solid #cccccc;
	cursor: pointer;
}

/* read rows alternate #e8e8ef / #e9e9fd (the legacy .alt_col0 / .alt_col1
   pair). Counted by position in the whole list, so the stripe does not shift
   when a row turns unread. nth-of-type, not nth-child: the rows follow the
   Alpine <template> they are rendered from, which nth-child would count as the
   first row. Unread (green) and selected (blue) rows keep their own colours -
   lightSelChkBox() swaps readMessage out on selection, so the stripe never
   covers the selection highlight. */
.ce3 .readMessage:nth-of-type(odd) {
	background-color: #e8e8ef;
}
.ce3 .readMessage:nth-of-type(even) {
	background-color: #e9e9fd;
}

/* contacts and blocked lists (members/contactsList.tpl): the same pair.
   Each contact is its own <tbody> (Alpine x-for), so the stripe counts tbodies;
   the <thead> and the <template> are other element types and are not counted.
   On the td because contacts_desk.css paints the selection colour there, and
   :not(.selectedRow) so a ticked row still shows it. tr.not_sel skips the
   hidden detail row under each contact. */
.ce3 #contacts_table > tbody:nth-of-type(odd) > tr.not_sel:not(.selectedRow) > td {
	background-color: #e8e8ef;
}
.ce3 #contacts_table > tbody:nth-of-type(even) > tr.not_sel:not(.selectedRow) > td {
	background-color: #e9e9fd;
}

.ce3 .selectedRow {
	background-color: #c8e9fb;
	border-bottom: 1px solid #cccccc;
}

.ce3 .unreadMessage {
	font-weight: bold;
	background: #00ba8e;
}

.ce3 .unreadMessageSelected {
	font-weight: bold;
	background: #c8e9fb;
}

.ce3 .replied {
	background-image: url(../images/replied.png);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 25px;
}

.ce3 .mvFolderDD { width: 10em; }

.ce3 .spinner {
	position: absolute;
	padding: 2% 30%;
	content: url(/images/ajax_spinner_bar.gif);
}

/* --- 5. search -----------------------------------------------------------
   Was an inline <style> in search.tpl. The searchTbl* CSS-table classes are
   gone (the template uses the Bootstrap grid now); what remains is the bits
   search-min.js and the jSmart result cards still depend on. */

/* the pale banded heading the legacy search box used throughout */
.ce3 .ce3-panel-heading {
	font-weight: bold;
	text-align: center;
	background: linear-gradient(#c5c5f1, #e2e2fb);
	color: #03038d;
}

.ce3 .advance { display: none; }

/* Scoped to the results tab on purpose. This came from search.tpl's inline
   <style>, and search.php ships no stylesheet of its own - but the contacts
   page DOES (/CSS/contacts_desk.css sets .iconsChat to 30px with a margin) and
   ce3.css loads after it, so an unscoped rule here would silently restyle the
   contacts icons. #tab3 is where search-min.js renders searchResults.tpl. */
.ce3 #tab3 .iconsChat {
	border: 0;
	height: 28px;
	width: auto;
}

/* .imgAvatar is the search result avatar; #imgAvatar the profile one. Same
   treatment, and both came from a page-level inline <style> in the legacy.
   NB member_details renders inside readConversation's profile tab too, which
   defines its own smaller .avatarsImgContactsSmall - different class, no clash. */
.ce3 .imgAvatar,
.ce3 #imgAvatar {
	width: 170px;
	height: 170px;
	border: 2px solid #ff0;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
}

.ce3 .lblTxt { margin: 0 .5em 0 0; }

/* profile detail list: keep the label column from crowding the value */
.ce3 .ce3-profile dt { font-weight: normal; }
.ce3 .ce3-profile dd { margin-bottom: .35rem; }

/* The exchange toggles and the Sort radios are Bootstrap btn-check controls
   now, not jQuery UI buttons - so the .ui-button / .ui-state-* rules that
   used to live here are gone with the widget.

   Still scoped to #SearchForm on purpose: members/filters.tpl reuses the SAME
   .exchCtrlGroup class name with different values (min-height 25px, no forced
   full width) in its own inline <style>. That page is off jQuery UI now too,
   but it still wants the shorter toggle, and unscoped these would out-specify
   it and silently restyle it. */
.ce3 #SearchForm .exchCtrlGroup {
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* ...except "include contacted", which sits in the action bar at the foot of
   the form beside the sort buttons and Search: at its natural .btn height it
   matches them (38px) instead of standing 12px taller, and it drops the 8px
   vertical margin the flex bar does not need. */
.ce3 #SearchForm label[for="includeContacted"] {
	min-height: 0;
	margin: 0;
}

/* Bootstrap checkboxes (.form-check): the legacy sheet gives EVERY label
   margin: .5em 0, which pushed the label text 8px below its box - "Remember
   me" on login.tpl, and the two options on notifications.tpl. .form-check
   already spaces the row; the label needs no margin of its own. */
.ce3 .form-check-label {
	margin: 0;
}

/* Bootstrap paints a checked btn-check with its own --bs-primary (#0d6efd),
   which is a second blue next to the CE3 palette and only measures 4.50:1
   against white - right on the AA boundary. Use --ce3-brand-dark instead,
   the same colour every solid CE3 button uses, at 5.80:1.

   Deliberately NOT scoped to one page: it applies to every btn-check group
   in the CE3 set (the search exchange toggles and Sort radios, signup's
   Gender and mailing-list groups, members/filters.tpl's female/male/other/
   lgMatch toggles and members/update.tpl's Gender radios) so they cannot
   drift apart. filters.tpl and update.tpl are covered ON PURPOSE: since their
   conversion off jQuery UI they carry .btn-check too, and this rule is what
   keeps their checked toggles on brand-dark (5.80:1) instead of letting them
   fall back to Bootstrap's blue. */
.ce3 .btn-check:checked + .btn {
	background-color: var(--ce3-brand-dark);
	border-color: var(--ce3-brand-dark);
	color: #fff;
}

/* check mark on a selected btn-check toggle: the colour change alone did not
   make the state clear. Opt-in - a label gets it by carrying
   <i class="fas fa-check ce3-check" aria-hidden="true"></i> (filters.tpl,
   search.tpl). visibility, not display: the hidden icon keeps its space, so a
   button does not change width as it is toggled. */
.ce3 .ce3-check { margin-right: .4em; }
.ce3 .btn-check:not(:checked) + .btn .ce3-check { visibility: hidden; }

/* saved searches */
.ce3 .nameSavedSearch { width: 100%; text-align: left; }

/* Two rules were removed here on 2026-09-10:

   .nameSavedSearch > .ui-button-text sized a span that only jQuery UI's
   button widget created, and nothing creates it now.

   .modDelSavedSearch matched nothing even before that. The class exists only
   in the inline <style> of the LEGACY smarty/desktop/search.tpl; no CE3
   template has ever rendered it, so it came across in the port and sat dead.
   searchList.tpl uses .modSearch and .deleteSearch, which are Bootstrap
   .btn-sm outline buttons. */


.ce3 .ui-selectmenu-button { vertical-align: inherit; }
.ce3 .ui-tabs .ui-tabs-panel { padding: .5em; }

/* --- 6. home page -------------------------------------------------------- */

.ce3-splash {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* News items are click targets handled by /javaScript/index.js. */
.ce3-news-item {
	cursor: pointer;
}

/* --- 7. visual refresh ---------------------------------------------------
   Depth and rhythm on top of Bootstrap's defaults, keeping the existing brand
   blue (--ce-blu: #507CD3 in ce_style_modern-min.css) so the site still reads
   as itself.

   Everything here is scoped to .ce3, which sits on #container in
   MainTemplate.tpl, so a legacy page cannot pick any of it up. It is also
   purely additive - deleting this section returns the CE3 pages to stock
   Bootstrap without touching a single template.

   Deliberately NOT restyled: the jQuery UI widgets in section 3. They are
   skinned by jquery-ui-flat and driven by scripts that add and remove state
   classes; re-colouring them here is how the "active looks unselected" bug in
   section 3 happened in the first place.
   --------------------------------------------------------------------------- */

/* ---- site font: Inter ----
   'MainFont Web' is Inter, declared in smarty/bootstrap/common/MainTemplate.tpl.
   Bootstrap loads after ce_style_modern and sets body { font-family:
   var(--bs-body-font-family) }, which beat ce_style_modern's own body rule - so
   before this, CE3 text was in the system font and 'MainFont Web' only reached
   the few elements that name it. Putting it at the front of Bootstrap's own
   variable reaches everything: body, headings, buttons, and the modals and
   tooltips Bootstrap appends outside .ce3 (hence :root, not .ce3 - this file is
   only linked from the CE3 template, so it cannot reach a legacy page).
   The rest is Bootstrap's stock stack (the same in 5.3.3 and 5.3.8), unchanged: it is what Arabic, CJK
   and anything else Inter lacks falls through to. */
:root {
	--bs-font-sans-serif: "MainFont Web", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.ce3 {
	--ce3-brand:        #507CD3;	/* the existing brand blue */
	--ce3-brand-dark:   #3a63b4;	/* hover / active */
	--ce3-brand-soft:   #eef3fc;	/* tinted fills */
	--ce3-ink:          #1b2b4b;	/* headings */
	--ce3-body:         #46536d;	/* body copy */
	--ce3-line:         #e3e9f4;	/* hairlines */
	--ce3-amber:        #a04e00;	/* .instruction / .important1 - see section below */
	--ce3-amber-soft:   #fdf4e7;	/* the callout fill behind p.instruction */
	--ce3-radius:       12px;
	--ce3-shadow:       0 1px 2px rgba(16, 35, 77, .05), 0 6px 20px rgba(16, 35, 77, .07);
	--ce3-shadow-lift:  0 2px 4px rgba(16, 35, 77, .07), 0 12px 32px rgba(16, 35, 77, .12);
}

/* ---- typography: a real scale, and headings that carry weight ---- */
.ce3 h1, .ce3 .h1, .ce3 h2, .ce3 .h2, .ce3 h3, .ce3 .h3, .ce3 h4, .ce3 .h4 {
	color: var(--ce3-ink);
	font-weight: 600;
	letter-spacing: -.015em;
}
.ce3 h1, .ce3 .h1 { line-height: 1.15; }
.ce3 p { color: var(--ce3-body); }

/* Give the first heading on a page room to breathe - the legacy pages ran
   straight from the navbar into an <h1>. */
.ce3-main > h1:first-child,
.ce3-main > .h1:first-child {
	margin-bottom: .75rem;
}

/* ---- cards: the single biggest change. Soft border + shadow + hover lift ---- */
/* !important is needed, not lazy: most CE3 templates carry `card shadow-sm`,
   and every Bootstrap 5 utility class is declared !important, so a plain
   `.ce3 .card { box-shadow: ... }` loses to it however specific it is. The
   alternative is stripping shadow-sm from ~30 templates. */
.ce3 .card {
	border: 1px solid var(--ce3-line);
	border-radius: var(--ce3-radius);
	box-shadow: var(--ce3-shadow) !important;
	transition: transform .18s ease, box-shadow .18s ease;
}
.ce3 .card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ce3-shadow-lift) !important;
}
/* A card that is a form or a static panel should not wobble under the cursor -
   only cards that are themselves links or results get the lift. */
.ce3 form .card:hover,
.ce3 .card.ce3-static:hover {
	transform: none;
	box-shadow: var(--ce3-shadow);
}
.ce3 .card-header,
.ce3 .ce3-panel-heading {
	background: var(--ce3-brand-soft);
	border-bottom: 1px solid var(--ce3-line);
	color: var(--ce3-ink);
	font-weight: 600;
}
.ce3 .card-header:first-child {
	border-radius: calc(var(--ce3-radius) - 1px) calc(var(--ce3-radius) - 1px) 0 0;
}

/* ---- .cebox: the legacy content box, as a card ----
   The pale lilac panel (#e9e9fd, 1px #7b79aa, square corners) that wraps the
   link lists and text on the resources pages, and also appears on the
   signup-success panels, member_details and several db_page rows.

   It has to be done HERE rather than in the templates: those ~126 content
   templates under resources/ are SHARED with the legacy set - ce_smarty
   searches smarty/bootstrap/ then smarty/desktop/ - so editing their markup
   would change the legacy site too. Restyling the class under .ce3 leaves
   legacy exactly as it was.

   No !important needed: `.cetable, .cebox` in ce_style_modern-min.css is
   (0,1,0), this is (0,2,0). .cetable gets the same treatment just below.

   No hover lift, unlike .card above: these are static content, not links. */
.ce3 .cebox {
	background-color: #fff;
	border: 1px solid var(--ce3-line);
	border-radius: var(--ce3-radius);
	box-shadow: var(--ce3-shadow);
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
	color: var(--ce3-body);
}
/* the box's own padding provides the spacing; the first and last child
   otherwise add a stray margin inside it */
/* The stored content of the conversation-topics page (all 11 languages) ships
   its own <style> that sets .cebox AND .cebox > div to #e2e2fb, so the card
   came out white with a lilac panel inside it. That rule is (0,1,1) and this
   is (0,2,1). It is the only stored page that tints a box child - checked
   against all 174 lg_pages rows - so nothing else loses a fill. */
.ce3 .cebox > div { background-color: transparent; }
.ce3 .cebox > :first-child { margin-top: 0; }
.ce3 .cebox > :last-child  { margin-bottom: 0; }
/* ---- .cetable: the same treatment, for the table version of that panel ----
   Same reasoning as .cebox above: the templates are shared with legacy, so
   this is CSS only. Three things worth knowing:

   1. Bootstrap's reboot sets `border-collapse: collapse` on every table, and a
      collapsed table IGNORES border-radius - the corners stay square however
      large the radius. Hence separate + zero spacing. Safe here because no
      .cetable in the tree draws cell borders (none carries border="1"), so
      nothing doubles up; and `overflow: hidden` is what actually clips the
      corner cells to the radius.
   2. The row hairline is on td, not on tr: the CE3 list templates emit one
      <tbody> per row (Alpine x-for), so tr:first-child matches the first row
      of EVERY tbody - which is exactly what keeps the contacts list, whose
      rows already carry their own bottom border, from gaining a second one.
   3. .alt_col0/.alt_col1 are the legacy zebra fills (#e8e8ef / #e9e9fd) and
      .table-heading is a lilac gradient; both are re-tinted here so a striped
      table does not reintroduce the colour scheme the card replaces. */
.ce3 .cetable {
	background-color: #fff;
	border: 1px solid var(--ce3-line);
	border-radius: var(--ce3-radius);
	box-shadow: var(--ce3-shadow);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin: 1.5rem 0;
	color: var(--ce3-body);
}
.ce3 .cetable td {
	padding: .55rem .9rem;
	border-top: 1px solid var(--ce3-line);
}
.ce3 .cetable tr:first-child td { border-top: 0; }
/* column labels (the contacts list's "added on" / "last login"): same side
   padding as td so they sit over their values, and the separator the first
   row does not draw, because of the rule just above */
.ce3 .cetable thead th {
	padding: .4rem .9rem;
	border-bottom: 1px solid var(--ce3-line);
}
/* contacts "added on" / "last login" dates on one line. contacts_desk.css fixes
   the columns at 90px / 100px, which the .9rem side padding above leaves too
   narrow for a date; nowrap lets the auto table layout widen them to fit. Only
   the values - the header labels may still wrap if a translation is long. */
.ce3 #contacts_table td.td9,
.ce3 #contacts_table td.td10 {
	white-space: nowrap;
}
/* overflow: clip, not the hidden above: both round the corners, but hidden
   also makes the table a scroll container, and the sticky details card
   (ce3FitContactDetails() in ce3/contacts.js) then pins itself to the table
   instead of to the .table-responsive box that scrolls on a phone. */
.ce3 #contacts_table {
	overflow: clip;
}
/* the very last row would otherwise draw its separator across the rounded
   bottom edge; tbody:last-child keeps the per-row borders of the multi-tbody
   lists intact */
.ce3 .cetable tbody:last-child tr:last-child td { border-bottom: 0; }
.ce3 .cetable .alt_col0 { background-color: #fff; }
.ce3 .cetable .alt_col1 { background-color: var(--ce3-brand-soft); }
.ce3 .table-heading td {
	background: var(--ce3-brand-soft);
	color: var(--ce3-ink);
	border-top: 0;
	border-bottom: 1px solid var(--ce3-line);
}
/* ---- .instruction and .important1: the legacy orange ----
   Both come with the content (db_page rows for .instruction, ~21 templates
   plus content for .important1), so like .cebox/.cetable this is CSS only.

   The legacy colours are unreadable rather than merely dated: DarkOrange
   (.instruction) is 2.33:1 on white and #ea8032 (.important1) is 2.75:1, both
   far under the 4.5:1 minimum. --ce3-amber is the same orange family at
   5.86:1 on white and 5.26:1 on the --ce3-brand-soft tint, so it still reads
   as a warning wherever it sits.

   Only a PARAGRAPH becomes a callout. .important1 is inline in most of its
   uses (26 <p>, 6 <span> in the templates, spans in the db content), and
   .instruction appears in content this repo cannot enumerate, so the
   block treatment is limited to p.instruction and everything else just takes
   the colour.

   border-inline-start, not border-left: ar renders the CE3 shell with
   dir="rtl" and the accent has to sit on the leading edge. */
.ce3 .instruction,
.ce3 .important1 {
	color: var(--ce3-amber);
	font-weight: 600;
}
.ce3 .instruction { font-size: 1.05rem; }
.ce3 p.instruction {
	background: var(--ce3-amber-soft);
	border-inline-start: 3px solid var(--ce3-amber);
	border-radius: var(--ce3-radius);
	padding: .75rem 1rem;
	margin: 1.25rem 0;
}
/* ---- content photos with an inline height:100% ----
   12 templates under resources/phrases/{es,fr,it} carry
   <img style="height: 100%; width: 100%; object-fit: contain">.

   Legacy gets away with it: there the containing block's height is auto, a
   percentage height against an auto height resolves to auto, and the photo
   keeps its aspect ratio (865x576 for meeting_people.jpg). In CE3 the centre
   column is a flex item that the row STRETCHES to the height of the tallest
   column - usually the left rail with its 300x600 ad - so its height is
   definite, 100% resolved against it, and object-fit:contain letterboxed a
   563x375 photo inside an 875x2163 box: a screenful of blank space between
   the heading and the phrase table.

   height:auto restores the legacy proportions and leaves width:100% alone, so
   the photo still fills the column as it does on the old page. !important is
   unavoidable against an inline style, and object-fit keeps the selector off
   the other inline height:100% in the tree (an overlay div, an iframe and a
   table). The templates are shared with legacy, so this cannot be a markup
   fix. */
.ce3 .ce3-main img[style*="height: 100%"][style*="object-fit"] {
	height: auto !important;
}
/* ---- .testimonial: cards instead of the tiled panel ----
   testimonials.php is a db_page: all 60 quotes live in ONE lg_pages row
   (id 234, lg='*', shared by every language) as
   <div class="testimonial"><p>...</p><p class="name-date">Name - date</p></div>,
   and that row carries its own <style> - a repeating background image, 35px
   side padding and two 3em quotation marks in :before/:after. So the markup
   cannot be changed into <div class="card"> without changing the legacy page
   too, and these rules (0,2,0 / 0,2,1) simply out-rank the content's (0,1,0 /
   0,1,1).

   The opening quote is kept as a watermark because it is what says
   "testimonial" at a glance; the closing one goes, since a card edge already
   closes the quote. The text clears the watermark through padding-left. */
.ce3 .testimonial {
	position: relative;
	background: #fff;
	border: 1px solid var(--ce3-line);
	border-radius: var(--ce3-radius);
	box-shadow: var(--ce3-shadow);
	/* logical, not left: the ar shell is dir=rtl and the watermark leads the text */
	padding: 1.1rem 1.4rem .9rem;
	padding-inline-start: 3.1rem;
	margin: 0 0 1rem;
	color: var(--ce3-body);
}
.ce3 .testimonial:before {
	content: "\201C";
	font-size: 3.2rem;
	line-height: 1;
	font-family: Georgia, "Times New Roman", serif;
	color: var(--ce3-brand);
	opacity: .22;
	top: .35rem;
	inset-inline-start: .9rem;
}
.ce3 .testimonial:after { content: none; }
.ce3 .testimonial > p:first-of-type { margin-top: 0; }
.ce3 .testimonial .name-date {
	margin-bottom: 0;
	padding-top: .5rem;
	border-top: 1px solid var(--ce3-line);
	color: var(--ce3-ink);
	font-style: normal;
	font-weight: 600;
}
/* ---- buttons ---- */
.ce3 .btn {
	border-radius: 9px;
	font-weight: 500;
	padding-inline: 1.1em;
}
/* Solid buttons take the DARKER blue, not the brand blue: white on #507CD3 is
   only 4.05:1, under the 4.5:1 AA needs for normal text, while white on
   #3a63b4 is 5.70:1.

   The colour is forced with a:link/a:visited specificity because
   ce_style_modern-min.css carries `a:link, a:visited { color: #004080 }`,
   which is (0,1,1) and therefore beats Bootstrap's `.btn-primary`. Every CE3
   button that is an anchor has been rendering dark navy on blue - about 2.5:1,
   failing AA - since the port began. */
.ce3 .btn-primary,
.ce3 a.btn-primary:link,
.ce3 a.btn-primary:visited {
	background-color: var(--ce3-brand-dark);
	border-color: var(--ce3-brand-dark);
	color: #fff;
}
.ce3 .btn-primary:hover,
.ce3 .btn-primary:focus,
.ce3 a.btn-primary:hover,
.ce3 a.btn-primary:focus {
	background-color: #2f5296;
	border-color: #2f5296;
	color: #fff;
}
/* Same correction for the other solid variants used in the CE3 set. */
.ce3 a.btn-success:link,   .ce3 a.btn-success:visited,
.ce3 a.btn-danger:link,    .ce3 a.btn-danger:visited,
.ce3 a.btn-secondary:link, .ce3 a.btn-secondary:visited {
	color: #fff;
}

/* The home page's "Sign up now" is .btn-warning - the same amber as the
   ** TEST ** pill in the navbar (.text-bg-warning). It could not join the list
   above because Bootstrap's label for this variant is BLACK, not white.

   The :hover pair is not decoration: ce_style_modern-min.css carries
   `a:hover { color: #f78302 }`, so without it the label turned orange on amber
   the moment the cursor touched it. */
.ce3 a.btn-warning:link,
.ce3 a.btn-warning:visited,
.ce3 a.btn-warning:hover,
.ce3 a.btn-warning:focus {
	color: #000;
}
/* ...and the two in the navbar, which the block above never covered. They are
   the only anchor-buttons in the set whose right colour is not #fff, so they
   could not simply join that list:

     .btn-outline-light  label on the bar itself  -> light
     .btn-light          label on a near-white fill -> black

   Measured before this rule: BOTH rendered #004080 - the outline one at about
   2.5:1 on the chrome, which is the contrast bug; the solid one merely the
   wrong colour, since navy on #f8f9fa is perfectly readable.

   #fff rather than Bootstrap's #f8f9fa for the outline variant: it is the same
   white as the nav links sitting beside it, and buys a little contrast
   (4.07:1 against 3.86:1). Still under AA - see the --ce3-chrome note in the
   chrome section for the one knob that would fix that properly.

   The :hover/:focus/:active pair is NOT optional. An a:link rule is (0,3,1)
   and out-ranks Bootstrap's own .btn-outline-light:hover at (0,2,0), so
   without it the label would keep its resting colour while hovered - white on
   the white fill the hover paints. The btn-primary block above needs its own
   :hover rule for exactly this reason. */
.ce3 a.btn-outline-light:link,
.ce3 a.btn-outline-light:visited {
	color: #fff;
}
.ce3 a.btn-outline-light:hover,
.ce3 a.btn-outline-light:focus,
.ce3 a.btn-outline-light:active {
	color: #000;
}
/* .btn-light is black in every state, so one rule covers it. */
.ce3 a.btn-light:link,
.ce3 a.btn-light:visited {
	color: #000;
}
.ce3 .btn-outline-primary {
	color: var(--ce3-brand);
	border-color: #c3d3ee;
}
.ce3 .btn-outline-primary:hover,
.ce3 .btn-outline-primary:focus {
	background-color: var(--ce3-brand);
	border-color: var(--ce3-brand);
	color: #fff;
}

/* ---- links ----
   :not(.btn) is load-bearing. Plenty of CE3 buttons are anchors
   (<a class="btn btn-primary">), and a bare `.ce3-main a` colour rule is more
   specific than `.btn-primary`, so it repaints their label brand-blue: invisible
   on a blue button, and simply wrong on the green "Sign up now!". */
.ce3-main a:not(.btn) {
	color: var(--ce3-brand);
	text-decoration-color: rgba(80, 124, 211, .35);
	text-underline-offset: .15em;
}
.ce3-main a:not(.btn):hover {
	color: var(--ce3-brand-dark);
	text-decoration-color: currentColor;
}
/* ...except .alert-link, which takes its alert's own dark shade (red in a
   danger alert, brown in a warning) as Bootstrap intends; brand blue on those
   backgrounds reads as a stray colour. Weighted to beat both rules above and
   the dark-mode hover rule further down, whatever the order. */
.ce3-main .alert a.alert-link:not(.btn),
.ce3-main .alert a.alert-link:not(.btn):hover {
	color: var(--bs-alert-link-color);
	text-decoration-color: currentColor;
}
/* Hands off anchors that are part of a jQuery UI widget. The rule above is a
   descendant selector, so it reached inside them: it repainted the search
   page's tab labels brand-blue on jquery-ui-flat's #3399FF inactive tab,
   which is all but unreadable. Widget internals are skinned by
   jquery-ui-flat and by section 3 - let them own their own colours. */
.ce3-main .ui-widget a,
.ce3-main .ui-tabs-nav a,
.ce3-main .ui-selectmenu-menu a {
	color: #004080;			/* the legacy a:link colour, restored verbatim */
	text-decoration: none;
}
/* NB `color: inherit` was tried here first and was worse than doing nothing:
   on the inactive tab it resolved to white over jquery-ui-flat's #3399FF, 2.94:1,
   against 3.93:1 for the legacy colour. That 3.93:1 is still under AA and is a
   pre-existing jquery-ui-flat weakness - fixing it means restyling the widget
   theme, which section 3 exists to warn against. */

/* ---- page chrome: the navbar and the sidebar menu, on one colour ----

   The header and the menu are required to match, so the colour is ONE token
   that both read. Writing the same hex in two places is the version that
   drifts the first time only one of them is edited.

   The value is --ce3-brand (#507CD3), the blue this stylesheet already used
   for solid brand fills - so the chrome now matches the buttons rather than
   Bootstrap's default primary.

   WHY THE WHOLE BLOCK CHANGED. The previous rules were written for a white
   ground and none of them survive the move: the hover fill was
   --ce3-brand-soft (#eef3fc, a near-white tint) and the active fill was
   --ce3-brand (#507CD3) - a lighter blue than the new ground, so the current
   item would have read as a slightly paler smudge rather than a selection.
   Both are translucent white now, which keeps the ground exactly #0d6efd and
   works whatever it is changed to later.

   SPECIFICITY. These need .ce3 in front. .ce3-menu is a .nav-pills, and
   section 2 above carries `.ce3 .nav-pills .nav-link` (three classes) for the
   message-folder tabs, which would otherwise out-rank a bare `.ce3-menu
   .nav-link` and paint these links --ce3-brand-dark.

   CONTRAST. White on #507CD3 is 4.07:1, a little under AA's 4.5:1 for normal
   text - and a little under the 4.24:1 the navbar had on Bootstrap's #0d6efd,
   so this is a small step down rather than a new problem. The navbar has been
   white-on-primary since the CE3 chrome was built and the menu now matches it.

   --ce3-chrome is the single knob if that is ever revisited. --ce3-brand-dark
   (#3a63b4) is the obvious candidate: it reaches 5.80:1, reads as the same
   blue, and is already what every solid CE3 button and checked btn-check uses
   - see the notes in sections 2 and 7. */

.ce3 {
	--ce3-chrome:        var(--ce3-brand);         /* #507CD3 */
	--ce3-chrome-hover:  rgba(255, 255, 255, .16);
	--ce3-chrome-active: rgba(255, 255, 255, .28);
}

/* THE NAVBAR. common/header-top.tpl writes class="navbar ... bg-primary", and
   Bootstrap resolves that utility as

     .bg-primary{ background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important }

   so re-pointing --bs-primary-rgb ON THIS ELEMENT retints it with no
   !important needed and no template change. Scoped to the navbar on purpose:
   set on .ce3 it would also move .text-primary, .border-primary and
   .link-primary across every CE3 page, which is not what was asked.
   Nothing inside the bar rides along - its own controls are .btn-light and
   .btn-outline-light, and Bootstrap's .btn-primary carries literal hex rather
   than the rgb token, so it would not follow this even if one appeared. */
.ce3 .navbar.bg-primary {
	--bs-primary-rgb: 80, 124, 211;                /* #507CD3 */
}

/* Off production (header-top.tpl adds .ce3-navbar-test) the bar is orange, so a
   dev or local page cannot be mistaken for the live site. #c2410c keeps the
   bar's white text at 5.2:1. It replaced a "** TEST **" badge. */
.ce3 .navbar.bg-primary.ce3-navbar-test {
	--bs-primary-rgb: 194, 65, 12;                 /* #c2410c */
}

/* Below lg this element IS the slide-in panel, and the id is enough to beat
   Bootstrap's .offcanvas-lg background. */
#ce3MenuOffcanvas {
	background-color: var(--ce3-chrome);
}

/* From lg up the same element is laid out inline as the rail - and Bootstrap
   ships this for every responsive offcanvas variant:

     @media (min-width:992px){ .offcanvas-lg{ background-color:transparent!important } }

   An id does not out-rank an !important, so the rule above was being thrown
   away at exactly the width where the menu is most visible. The !important
   here is answering Bootstrap's, not decorating: it is confined to the same
   media query and to this one id.

   Rounded and inset only here, too. A full-height slide-in panel with rounded
   corners and a gap down its edge looks broken. */
@media (min-width: 992px) {
	#ce3MenuOffcanvas {
		background-color: var(--ce3-chrome) !important;
		border-radius: var(--ce3-radius);
		padding: .5rem;
	}
}

.ce3 .ce3-menu .nav-link {
	border-radius: 8px;
	color: #fff;
}

/* Tighter rows, and a hairline between them.
   Bootstrap's .nav-link is .5rem 1rem, which on a rail of 8 top-level entries
   (14 when logged in) reads as a loose list rather than a menu. Only the
   VERTICAL padding moves - the horizontal keeps the icons aligned with the
   panel - and only on top-level links: the submenu entries already carry the
   py-1 utility, which is !important and would win anyway.

   The separator goes on the item rather than the link, so the link keeps its
   rounded hover pill and the line runs the full width of the panel; and on
   .nav-item + .nav-item so there is no stray line above the first entry or
   below the last. White at .18 alpha because it sits on the blue chrome, not
   on a page background - --ce3-line would be invisible there. */
.ce3 .ce3-menu > .nav-item > .nav-link {
	padding-top: .3rem;
	padding-bottom: .3rem;
}

/* Compact menu (2026-10-03): smaller type, a tighter line and less padding,
   top level and submenus alike - about a quarter less height. The submenu
   links carry Bootstrap's py-1 (!important), so their padding is matched with
   !important here too. Touch targets stay at least 24px tall. */
.ce3 .ce3-menu .nav-link {
	font-size: .9rem;
	line-height: 1.3;
}
.ce3 .ce3-menu > .nav-item > .nav-link {
	padding: .25rem .65rem;
}
.ce3 .ce3-menu .nav .nav-link {
	padding: .2rem .65rem !important;
	font-size: .85rem;
}
@media (min-width: 992px) {
	#ce3MenuOffcanvas { padding: .35rem; }
}
.ce3 .ce3-menu > .nav-item + .nav-item {
	border-top: 1px solid rgba(255, 255, 255, .18);
}
.ce3 .ce3-menu .nav-link:hover,
.ce3 .ce3-menu .nav-link:focus {
	background: var(--ce3-chrome-hover);
	color: #fff;
}
.ce3 .ce3-menu .nav-link.active {
	background: var(--ce3-chrome-active);
	color: #fff;
}

/* The unread/pending counters were var(--bs-danger) on white: #dc3545 on
   #0d6efd is 1.43:1, which is not a colour so much as a rumour. They become a
   white pill with the red kept INSIDE it, so the "you have unread" signal
   survives and the text is read against white instead of against blue.

   :not(:empty) is what makes this safe. messages-min.js and chatCommon-min.js
   clear these with .html(""), and common/left_menu_new.tpl explains that they
   are deliberately NOT .badge elements because an emptied badge still renders
   as a coloured pill. An empty span matches :empty, so it gets no pill here
   and that contract is intact - the parentheses stay plain text in the span. */
.ce3 .ce3-menu .ce3-count:not(:empty) {
	background: #fff;
	color: var(--bs-danger);
	border-radius: 10rem;
	padding: 0 .45rem;
}

/* Below lg the offcanvas header sits on the blue too, and its .btn-close is a
   black SVG - invisible there. This is exactly what Bootstrap's own
   .btn-close-white does, applied here so common/3-columns.tpl does not have to
   carry a second class.

   The header's hairline needs nothing: --bs-border-color is #dee2e6, light
   enough to read against the blue. (A rule for it would have been dead anyway -
   the template uses the .border-bottom utility, which is !important.) */
#ce3MenuOffcanvas .btn-close {
	filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---- form labels: always on their own line, above the control ----
   Bootstrap's .form-label is inline-block, and a jQuery UI selectmenu replaces
   its <select> with an inline-block button. So label and control flow on the
   SAME line whenever they happen to fit, and wrap onto two lines when they do
   not - which is why the search form had "Speaks" sitting beside its dropdown
   while "Learning" sat above its own, in columns of identical width. Worse,
   when they share a line they are baseline-aligned, so the taller widget's top
   edge ends up ABOVE the label and the field reads as mislabelled.

   Making the label a block settles it: every label sits above its control with
   their left edges aligned, whatever the label's length or the control's
   height. */
.ce3 .form-label {
	display: block;
	margin-bottom: .35rem;
}

/* The From/To rows inside the Learning Level and Time Zone panels are a
   deliberate label-beside-field grid, but their labels are plain text in a
   col-3, not .form-label, so the rule above does not reach them. */

/* ---- vertical rhythm between the stacked blocks on a page ---- */
.ce3-main > .card,
.ce3-main > .row {
	margin-bottom: 1.25rem;
}

/* ---- the TinyMCE message editor (members/readConversation) ----
   Framed like a Bootstrap form control: CeSkin draws a square #ccc border
   and oxide-dark a 2px one with its own 10px radius, so each read as a
   foreign widget next to the page's rounded inputs. Bootstrap's own width,
   colour and radius variables follow the theme on their own.
   TinyMCE injects its skin stylesheet AFTER this file, so the selector has
   to out-rank the skin's .tox-tinymce rather than rely on order. The skin
   already clips its content (overflow: hidden), which is what rounds the
   blue toolbar's top corners too. Fullscreen stays edge to edge. */
.ce3 .tox.tox-tinymce:not(.tox-fullscreen) {
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
}

/* The plain-text box, when the rich editor is switched off. Its beige used
   to be inline in the template, where the dark theme could not reach it: the
   text turned white on beige and could not be read. Colours per theme now. */
.ce3 #emailMessage {
	background-color: #f0efe1;
	color: #212529;
}
[data-bs-theme="dark"] .ce3 #emailMessage {
	background-color: var(--ce3-brand-soft);
	color: var(--ce3-ink);
	border-color: var(--ce3-line);
}
[data-bs-theme="dark"] .ce3 #emailMessage::placeholder {
	color: var(--ce3-body);
	opacity: .7;
}

/* Respect a reduced-motion preference: keep the depth, drop the movement. */
@media (prefers-reduced-motion: reduce) {
	.ce3 .card { transition: none; }
	.ce3 .card:hover { transform: none; }
}

/* ---- result & profile cards ----
   The seven templates that render a .ce3-profile <dl> - search results,
   contacts, friend requests, member_details, lgMismatch and the learn map -
   are drawing the same object, so they are styled together rather than one
   page at a time. Everything here overrides the legacy comDesk bundle, which
   loads before ce3.css, so plain class specificity is enough. */

/* Labels. .ce_entry is `font-style: oblique` in comDesk, which asks the
   browser to slant a face that ships no italic - a synthesised, smeary slant.
   Small uppercase carries the label job better and stops the label column
   competing with the value it is labelling. */
.ce3 .ce3-profile dt .ce_entry {
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .78rem;
	font-weight: 600;
	color: var(--ce3-body);
}
/* the smaller label needs nudging back onto the value's baseline */
.ce3 .ce3-profile dt { padding-top: .12rem; }
.ce3 .ce3-profile dd { color: var(--ce3-ink); }
.ce3 .ce3-profile .description,
.ce3 .ce3-profile .interests { line-height: 1.55; }

/* Language proficiency meter. The legacy .bar is 20px x 6px with a #444
   border, a dark-green fill on pale yellow. At that size the fill is a few
   pixels wide and reads as a smudge rather than as a level. */
.ce3 .bar {
	width: 84px;
	height: 8px;
	border: 0;
	border-radius: 999px;
	background: var(--ce3-line);
	overflow: hidden;
}
.ce3 .barfill {
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--ce3-brand), var(--ce3-brand-dark));
}

/* Avatar: the legacy 2px pure-yellow ring becomes a white cut-out plus a
   hairline, so the photo sits on the card instead of being fenced off it. */
.ce3 .imgAvatar,
.ce3 #imgAvatar {
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--ce3-line), var(--ce3-shadow);
}

/* The card header centres its text via .ce3-panel-heading. The name is the one
   thing someone scanning a result list is looking for, so it gets size, weight
   and the start edge - `start`, not `left`, so the Arabic RTL build mirrors
   it rather than stranding the name on the wrong side. */
.ce3 .ce3-result-name {
	text-align: start;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ce3-ink);
}

/* likes count, as a pill rather than a loose number beside an icon */
.ce3 .ce3-likes {
	gap: .3rem;
	padding: .1rem .6rem;
	border: 1px solid var(--ce3-line);
	border-radius: 999px;
	background: #fff;
	font-weight: 600;
	color: var(--ce3-ink);
}

/* Exchange types and chat clients were <br>-separated running text. As chips
   they scan at a glance. #3a63b4 on #eef3fc measures 5.2:1, so the chip text
   clears AA for normal text even at this size. */
.ce3 .ce3-chip {
	display: inline-block;
	padding: .25em .7em;
	border-radius: 999px;
	background: var(--ce3-brand-soft);
	color: var(--ce3-brand-dark);
	font-size: .82rem;
	font-weight: 600;
}
/* --- 8. contacts --------------------------------------------------------
   members/contacts.tpl is off jQuery UI; these two rules replace what the
   widgets used to provide. The page also loads CSS/contacts_desk.css, which
   is SHARED with the legacy desktop page and so must not be edited. --- */

/* The bulk-action icons are greyed out while nothing is selected. That was
   jQuery UI's ui-state-disabled (opacity .35, measured) plus the button
   widget's own click handler, which called stopImmediatePropagation().

   pointer-events is the load-bearing half, not the opacity. The widget only
   suppressed handlers bound after itself, so the inline onclick on the bin
   icon still fired while greyed out - harmless only because delManyBuddy()
   self-guards. .blockUnBlockMultipleUsers had no such guard: its handler is
   bound after the widget, and blockUnBlockUser() with no argument posts an
   empty selection. This blocks all of them uniformly. */
.ce3 .optionButtons.ce3-disabled {
	opacity: .35;
	pointer-events: none;
	cursor: default;
}

/* contacts_desk.css sizes #order_by-button at 80% - the element the
   selectmenu widget generated, which nothing generates now. Bootstrap's
   .form-select is width:100%, which would stretch the real select across the
   whole column, so cap it instead. */
.ce3 #order_by {
	width: auto;
	max-width: 14em;
}

/* --- 9. the shared dialog -----------------------------------------------
   #ce3Dialog is built by javaScript/ce3/commonLib.js, the fork of the
   site-wide common-min.js, and replaces the jQuery UI dialog that showMsg()
   and openFrmMltPrp() used to open on #dialogmsg. --- */

/* openFrmMltPrp() is called with sizes that were chosen for the old widget
   (860x550 for the FAQ, 650x550, 620x520...). Those numbers covered the
   dialog INCLUDING its title and button bars, whereas here they size the
   modal and its iframe, so the result is taller. Cap the body rather than
   rewrite every call site: a popup that would overflow scrolls instead. */
.ce3 #ce3Dialog .modal-body,
#ce3Dialog .modal-body {
	max-height: calc(100vh - 12rem);
	overflow: auto;
	padding: 0;
}

/* the iframe fills the body; showMsg()'s text needs its own padding back */
#ce3Dialog .modal-body > :not(iframe) {
	display: block;
	padding: 1rem;
}
#ce3Dialog .modal-body > iframe {
	display: block;
}

/* The sign-up avatar picker: members/change_avatar.php in #frmChgAvt, opened
   by ce3/signup.js. An iframe has no height of its own - its height:100% has
   no sized parent to resolve against - so it came out at the default 150px,
   showing the tabs and a sliver of the list. avatarFrameLoaded() sets it to
   the picker's own height on every load; this is the start value and the cap,
   the window less the title and button bars (the body scrolls past that).
   :has() keys the phone rules below to this one dialog without the shared
   #ce3Dialog code having to know about it. */
#ce3Dialog #frmChgAvt {
	height: 560px;
	max-height: calc(100vh - 12rem);
}
/* on a phone, full screen: the picker gets everything between the title bar
   and the close button */
@media (max-width: 575.98px) {
	#ce3Dialog .modal-dialog:has(#frmChgAvt) {
		margin: 0;
		height: 100%;
		min-height: 100%;
	}
	#ce3Dialog .modal-dialog:has(#frmChgAvt) .modal-content {
		height: 100%;
		border: 0;
		border-radius: 0;
	}
	#ce3Dialog .modal-dialog:has(#frmChgAvt) .modal-body {
		max-height: none;
		flex: 1 1 auto;
		position: relative;
	}
	#ce3Dialog .modal-dialog:has(#frmChgAvt) #winChgAvt,
	#ce3Dialog .modal-dialog:has(#frmChgAvt) #frmChgAvt {
		position: absolute;
		inset: 0;
		height: 100% !important;
		max-height: none;
	}
}

/* --- 10. right-to-left (Arabic) -------------------------------------------
   common/MainTemplate.tpl sets dir="rtl" and swaps in Bootstrap's RTL build for
   lg='ar'. That mirrors everything expressed with Bootstrap's logical utilities
   (ms-*/me-*, text-start/end, float-start/end, offcanvas-start) and the grid, so
   the templates themselves need no changes.

   What it does NOT mirror is (a) the physical left/right properties in the CE3
   rules above, and (b) jQuery UI 1.11.4, which has no RTL support at all. Both
   are patched here.

   NB .ce3-rail-left / .ce3-rail-right keep their names but swap sides visually,
   because the flex row direction flips - they only carry widths, so that is
   correct rather than something to undo. */

/* the sidebar caret is a fa-chevron-right: point it left when collapsed,
   and still down when the submenu is open */
[dir="rtl"] .ce3-menu .ce3-caret {
	transform: rotate(180deg);
}

[dir="rtl"] .ce3-menu [aria-expanded="true"] .ce3-caret {
	transform: rotate(90deg);
}

/* the replied-arrow glyph sits before the preview text, so it moves to the right */
[dir="rtl"] .ce3 .replied {
	background-position: right center;
	padding-left: 0;
	padding-right: 25px;
}

[dir="rtl"] .ce3 .lblTxt {
	margin: 0 0 0 .5em;
}

[dir="rtl"] .ce3 .nameSavedSearch {
	text-align: right;
}

/* --- jQuery UI has no RTL build; mirror the parts that are visible here --- */

/* selectmenu: text gap is on the opposite side of the dropdown arrow */
[dir="rtl"] .ce3 .ui-selectmenu-button span.ui-selectmenu-text {
	margin-right: 0;
	margin-left: 1.5rem;
}

[dir="rtl"] .ce3 .ui-selectmenu-button span.ui-selectmenu-icon {
	float: left;
	margin-left: 0;
	margin-right: .3em;
}

/* tab strips (mailbox, search, avatar, conversation) run the other way */
[dir="rtl"] .ce3 .ui-tabs .ui-tabs-nav li {
	float: right;
}

[dir="rtl"] .ce3 .ui-buttonset .ui-button {
	float: right;
}

/* jQuery UI button icons/labels */
[dir="rtl"] .ce3 .ui-button-icon-primary {
	left: auto;
	right: .5em;
}

/* ===========================================================================
   12. DARK THEME
   ---------------------------------------------------------------------------
   Switched by <html data-bs-theme="dark">, which MainTemplate.tpl writes from
   the ce3_theme cookie (or from the device setting, before first paint) and
   ce3ToggleTheme() in ce3/commonLib.js flips. Bootstrap 5.3 recolours its own
   components off the same attribute; everything here is what Bootstrap does
   NOT know about:

     a) the --ce3-* tokens above, restated for a dark ground;
     b) the places this file hardcodes a colour (white card fills, the message
        and contact stripes, the lilac panel heading, the unread/selected rows);
     c) ce_style_modern-min.css, which CE3 pages also load - its light link,
        heading, .cebox/.cetable and .bar colours would otherwise sit as bright
        patches on a dark page. Overridden here rather than edited there,
        because that file is shared with the legacy site.

   Scoped to [data-bs-theme="dark"] throughout, so the light theme is untouched.
   Contrast: body text #c2cbdb on #141a24 is 11.4:1, headings 14.8:1, and the
   lightened brand #7aa2e8 on the same ground is 7.3:1 - all above AA.
   =========================================================================== */

/* BOTH selectors are load-bearing. The light palette above is declared on .ce3,
   which sits on #container - so a copy of these tokens declared only on <html>
   loses to it for everything inside the page, and the content keeps its light
   values on a dark ground. Measured before this fix: card text computed
   #46536d (the light --ce3-body) on #1a2230, 2.07:1. The bare attribute is kept
   for what Bootstrap appends outside #container: modals, offcanvas, tooltips. */
[data-bs-theme="dark"],
[data-bs-theme="dark"] .ce3 {
	/* a) the CE palette, dark. Brand lightens: #507CD3 on a dark ground is too
	   low-contrast for text, though it stays fine as a button fill. */
	--ce3-brand:        #7aa2e8;
	/* --ce3-brand-dark is a FILL here (checked toggles, active pills, button
	   hover), so it has to stay dark enough for white text: #3a63b4 is 5.80:1
	   against white, where a lightened blue measured 3.60:1. The handful of
	   places that use the same token as TEXT are pointed at --ce3-brand below. */
	--ce3-brand-dark:   #3a63b4;
	--ce3-brand-soft:   #1e2a3d;
	--ce3-ink:          #e8edf7;
	--ce3-body:         #c2cbdb;
	--ce3-line:         #2c3648;
	--ce3-amber:        #f0a860;
	--ce3-amber-soft:   #2a2216;
	--ce3-shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
	--ce3-shadow-lift:  0 2px 4px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .5);
	/* surfaces, used by the rules below */
	/* the menu rail and navbar. --ce3-chrome follows --ce3-brand in the light
	   theme, but the lightened dark brand only gives white 2.57:1; this is
	   7.59:1 and still reads as the same blue family. */
	--ce3-chrome:       #2f5296;
	/* the hover/active overlays are translucent WHITE in the light theme, which
	   on this rail lifts the ground to ~#6982b4 and drops the label to 2.9:1.
	   Darkening instead keeps the highlight visible and the label at 7.6:1. */
	--ce3-chrome-hover:  rgba(0, 0, 0, .18);
	--ce3-chrome-active: rgba(0, 0, 0, .28);
	--ce3-surface:      #1a2230;	/* cards, tables, dialogs */
	--ce3-surface-alt:  #141a24;	/* page ground, zebra row 0 */
	--ce3-row-alt:      #1b2334;	/* zebra row 1 */
}

/* the four places --ce3-brand-dark is used as TEXT rather than as a fill: on a
   dark ground that value is 2.2:1, so they take the lightened brand instead */
/* .ce3-menu is excluded: the left menu is ALSO a .nav-pills, but it sits on the
   brand-coloured rail and its links are white. Without the :not() this rule
   painted them --ce3-brand on a --ce3-brand ground - the same colour, so the
   whole menu read as blank. */
[data-bs-theme="dark"] .ce3 .nav-pills:not(.ce3-menu) .nav-link:not(.active),	/* :not(.active) - the ACTIVE pill is brand-filled and keeps its white text */
[data-bs-theme="dark"] .ce3 .nav-tabs .nav-link:hover,
[data-bs-theme="dark"] .ce3 .nav-tabs .nav-link:focus,
[data-bs-theme="dark"] .ce3-main a:not(.btn):hover,
[data-bs-theme="dark"] .ce3 .ce3-chip {
	color: var(--ce3-brand);
}

/* b) ---- this stylesheet's own hardcoded colours ---- */

[data-bs-theme="dark"] .ce3 .cebox,
[data-bs-theme="dark"] .ce3 .cetable,
[data-bs-theme="dark"] .ce3 .cetable .alt_col0,
[data-bs-theme="dark"] .ce3 .ce3-card,
[data-bs-theme="dark"] .ce3 .card {
	background-color: var(--ce3-surface);
	color: var(--ce3-body);
}
[data-bs-theme="dark"] .ce3 .cetable .alt_col1 {
	background-color: var(--ce3-row-alt);
}

/* message list + contacts: the zebra pair, the unread row and the selection */
[data-bs-theme="dark"] .ce3 .readMessage:nth-of-type(odd),
[data-bs-theme="dark"] .ce3 #contacts_table > tbody:nth-of-type(odd) > tr.not_sel:not(.selectedRow) > td {
	background-color: var(--ce3-surface-alt);
}
[data-bs-theme="dark"] .ce3 .readMessage:nth-of-type(even),
[data-bs-theme="dark"] .ce3 #contacts_table > tbody:nth-of-type(even) > tr.not_sel:not(.selectedRow) > td {
	background-color: var(--ce3-row-alt);
}
[data-bs-theme="dark"] .ce3 .readMessage,
[data-bs-theme="dark"] .ce3 .unreadMessage,
[data-bs-theme="dark"] .ce3 .selectedMessage,
[data-bs-theme="dark"] .ce3 .unreadMessageSelected,
[data-bs-theme="dark"] .ce3 .selectedRow,
[data-bs-theme="dark"] tr.not_sel td,
[data-bs-theme="dark"] tr.selectedRow td {
	border-bottom-color: var(--ce3-line);
}
/* unread keeps its green identity, darkened so white text sits on it */
[data-bs-theme="dark"] .ce3 .unreadMessage {
	background: #0c6f57;
	color: #eafaf5;
}
[data-bs-theme="dark"] .ce3 .selectedRow,
[data-bs-theme="dark"] .ce3 .unreadMessageSelected,
[data-bs-theme="dark"] tr.selectedRow td {
	background-color: #26456a;
	color: var(--ce3-ink);
}

/* the lilac banded heading the search/member boxes use */
[data-bs-theme="dark"] .ce3 .ce3-panel-heading {
	background: linear-gradient(#2b3350, #222a42);
	color: #cdd6ff;
}

/* avatar ring and the white borders around images */
[data-bs-theme="dark"] .ce3 .avatarsImgContactsBig,
[data-bs-theme="dark"] .ce3 .avatarsImgContactsSmall {
	border-color: var(--ce3-line);
}

/* c) ---- ce_style_modern-min.css bleed-through ---- */

[data-bs-theme="dark"] .ce3 h1,
[data-bs-theme="dark"] .ce3 h2,
[data-bs-theme="dark"] .ce3 h3,
[data-bs-theme="dark"] .ce3 h4 {
	color: var(--ce3-ink);
}
[data-bs-theme="dark"] .ce3 a:link,
[data-bs-theme="dark"] .ce3 a:visited {
	color: var(--ce3-brand);
}
[data-bs-theme="dark"] .ce3 a:hover {
	color: #ffb266;	/* the legacy hover orange, lifted off #f78302 for contrast */
}
/* Links that are buttons keep the BUTTON's colour, not the link colour and not
   inherit: inherit took the white from the header's .text-white wrapper and put
   white on .btn-light (1.05:1), and the CE body colour on .btn-success (1.7:1).
   --bs-btn-color is what each Bootstrap variant sets for itself. */
[data-bs-theme="dark"] .ce3 a.btn:link,
[data-bs-theme="dark"] .ce3 a.btn:visited {
	color: var(--bs-btn-color);
}
[data-bs-theme="dark"] .ce3 a.button-link:link,
[data-bs-theme="dark"] .ce3 a.button-link:visited,
[data-bs-theme="dark"] .ce3 .nav-link:link,
[data-bs-theme="dark"] .ce3 .nav-link:visited {
	color: inherit;
}
[data-bs-theme="dark"] .ce3 .ce_entry { color: #9fc3e6; }
[data-bs-theme="dark"] .ce3 .keyInfo  { color: var(--ce3-body); }
[data-bs-theme="dark"] .ce3 .important1,
[data-bs-theme="dark"] .ce3 .instruction { color: var(--ce3-amber); }
[data-bs-theme="dark"] .ce3 .line1-col { color: #6fd39b; }
[data-bs-theme="dark"] .ce3 .verb-ending,
[data-bs-theme="dark"] .ce3 .infinitive { background-color: var(--ce3-brand-soft); }
[data-bs-theme="dark"] .ce3 .alt_col0 { background-color: var(--ce3-surface-alt); }
[data-bs-theme="dark"] .ce3 .alt_col1 { background-color: var(--ce3-row-alt); }
[data-bs-theme="dark"] .ce3 .table-heading td {
	background: linear-gradient(#2b3350, #222a42);
	color: #cdd6ff;
}
/* the language-level bars on profiles and search results */
[data-bs-theme="dark"] .ce3 .bar {
	background-color: #222b3c;
	border-color: var(--ce3-line);
}
[data-bs-theme="dark"] .ce3 .barfill { background-color: #2e9e6b; }
/* site notice box */
[data-bs-theme="dark"] .ce3 .ce_msgbox,
[data-bs-theme="dark"] .ce_msgbox {
	background-color: #2a2616;
	border-color: #4a422a;
	color: #f0e6c8;
}
[data-bs-theme="dark"] .ce_msgbox a.closeX {
	color: var(--ce3-body);
	background-color: var(--ce3-surface);
	border-color: var(--ce3-line);
}
[data-bs-theme="dark"] #footer,
[data-bs-theme="dark"] #footer a:link,
[data-bs-theme="dark"] #footer a:visited {
	color: #8d99ae;
}
[data-bs-theme="dark"] #footer { border-top-color: var(--ce3-line); }

/* the dialog built by ce3/commonLib.js, and anything else still painted white */
[data-bs-theme="dark"] #ce3Dialog .modal-content,
[data-bs-theme="dark"] .ce3 .ce3-white {
	background-color: var(--ce3-surface);
	color: var(--ce3-body);
}

/* ---- dark theme, second pass ----
   The rest of ce_style_modern-min.css, plus (until 2026-09-30) star-rating.css, and
   contacts_desk.css, which CE3 pages also load. Same reasoning as above: these
   files are shared with the legacy site, so they are overridden here, never
   edited. Anything that only set a light BACKGROUND left dark text on a dark
   ground once the page went dark; anything that only set a dark COLOUR did the
   opposite. Both directions are handled below. */

/* boxed notices */
[data-bs-theme="dark"] .ce3 .warning_box,
[data-bs-theme="dark"] .warning_box {
	background-color: #3a2140;
	color: #f6dcff;
}
[data-bs-theme="dark"] .ce3 .abuse_box,
[data-bs-theme="dark"] .abuse_box {
	background-color: #40261a;
	color: #ffd9c4;
}
[data-bs-theme="dark"] .ce3 .confmessage {
	background-color: #14301f;
	color: #cdf0dc;
}

/* the legacy menus: CE3 has its own chrome, but these still render inside
   submenus/*.tpl and the resources pages */
[data-bs-theme="dark"] .ce3 #menu,
[data-bs-theme="dark"] .ce3 #header-bottom,
[data-bs-theme="dark"] .ce3 .dropdown_1column,
[data-bs-theme="dark"] .ce3 .dropdown_1clarge,
[data-bs-theme="dark"] .ce3 .dropdown_1halfcolumns,
[data-bs-theme="dark"] .ce3 .dropdown_2columns,
[data-bs-theme="dark"] .ce3 .dropdown_3columns,
[data-bs-theme="dark"] .ce3 .dropdown_4columns,
[data-bs-theme="dark"] .ce3 .dropdown_5columns {
	background: var(--ce3-surface);
	border-color: var(--ce3-line);
	color: var(--ce3-body);
}
[data-bs-theme="dark"] .ce3 #menu li a,
[data-bs-theme="dark"] .ce3 #menu li:hover a { color: var(--ce3-ink); }
[data-bs-theme="dark"] .ce3 #menu li:hover { background: var(--ce3-brand-soft); border-color: var(--ce3-line); }
[data-bs-theme="dark"] .ce3 #menu li:hover div a { color: var(--ce3-brand); }
[data-bs-theme="dark"] .ce3 #menu h3 { border-bottom-color: var(--ce3-line); color: var(--ce3-ink); }
[data-bs-theme="dark"] .ce3 #vert-menu {
	background-color: var(--ce3-surface);
	border-color: var(--ce3-line);
	color: var(--ce3-body);
}
[data-bs-theme="dark"] .ce3 #vert-menu li { border-bottom-color: var(--ce3-line); }

/* form furniture the legacy sheet colours */
[data-bs-theme="dark"] .ce3 legend { color: var(--ce3-ink); }
[data-bs-theme="dark"] .ce3 .errors { color: #ff8f8f; }

/* the full-screen ajax spinner overlay is pure white in ce_style_modern */
[data-bs-theme="dark"] #ajaxloading,
[data-bs-theme="dark"] .ce3 .overlay {
	background: #0b0f16 !important;	/* the legacy rule is inline-level specific */
}

/* contacts_desk.css paints the selected row light blue on the td */
[data-bs-theme="dark"] tr.selectedRow td { background-color: #26456a; }

/* testimonials.php: the lg_pages row ships its own <style> - a light tiled
   background image with #313131 text and a #666 by-line. Measured in dark
   before this: 1.17:1. Our selector is (0,3,0) against the row's (0,1,0), so it
   wins without !important; the tile is dropped and the quote marks lifted. */
[data-bs-theme="dark"] .ce3 .testimonial {
	background-image: none;
	background-color: var(--ce3-surface);
	color: var(--ce3-body);
	border: 1px solid var(--ce3-line);
	border-radius: var(--ce3-radius);
}
[data-bs-theme="dark"] .ce3 .testimonial .name-date { color: var(--ce3-ink); }

/* the likes pill on search results and profiles is hardcoded #fff */
[data-bs-theme="dark"] .ce3 .ce3-likes { background: var(--ce3-surface); }
[data-bs-theme="dark"] .ce3 .testimonial:before,
[data-bs-theme="dark"] .ce3 .testimonial:after { color: #6b7890; }

/* last resort for content that comes out of the lg_pages table: those rows are
   authored HTML and some carry their own white fills and near-black text. */
[data-bs-theme="dark"] .ce3 [style*="background:#fff"],
[data-bs-theme="dark"] .ce3 [style*="background: #fff"],
[data-bs-theme="dark"] .ce3 [style*="background-color:#fff"],
[data-bs-theme="dark"] .ce3 [style*="background-color: #fff"],
[data-bs-theme="dark"] .ce3 [bgcolor="#ffffff"],
[data-bs-theme="dark"] .ce3 [bgcolor="#FFFFFF"],
[data-bs-theme="dark"] .ce3 [bgcolor="white"] {
	background-color: var(--ce3-surface) !important;
	color: var(--ce3-body);
}

/* Cookie notice (MainTemplate.tpl): a fixed bar at the bottom, above the page
   and ArrowChat's bar (9999) but under an open chat window (10011). */
.ce3-cookie-banner { z-index: 10000; box-shadow: 0 -2px 8px rgba(0,0,0,.25); }
/* ---- blog (blog/*.php, smarty/bootstrap/blog/) ---- */
/* list thumbnails: a fixed shape, so cards line up whatever the picture */
.ce3 .ce3-blog-thumb {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 140px;
	max-height: 240px;
	object-fit: cover;
}
.ce3 .ce3-blog-avatar { object-fit: cover; }
.ce3 .ce3-blog-image {
	display: block;
	max-width: 100%;
	height: auto;
}
.ce3 .ce3-blog-preview { max-width: 240px; height: auto; }
.ce3 .ce3-blog-topics .nav-link:not(.active) { background: var(--bs-tertiary-bg); }
/* the post text: the tags ce_blog::cleanBody() keeps */
.ce3 .ce3-blog-body {
	line-height: 1.65;
	overflow-wrap: anywhere;
}
.ce3 .ce3-blog-body h2 { font-size: 1.35rem; margin-top: 1.5rem; }
.ce3 .ce3-blog-body h3 { font-size: 1.15rem; margin-top: 1.25rem; }
.ce3 .ce3-blog-body blockquote {
	margin: 1rem 0;
	padding: .25rem 0 .25rem 1rem;
	border-inline-start: 4px solid var(--bs-border-color);
	color: var(--bs-secondary-color);
}
/* comments: plain text with line breaks; long words/links must not widen the page */
.ce3 .ce3-blog-comment-text { overflow-wrap: anywhere; }
.ce3 .ce3-blog-comment .min-w-0 { min-width: 0; }