/* ============================================================================
   HLL Driver Licence — THE PROFILE TABS.

   Ultimate Member's add-ons each ship their own look, written for a white site:
   um-messaging is blue, EDD's download table is green, um-social-activity draws
   white cards. Stacked on a #23282e page they read as five different products
   bolted together, which is what they are.

   This file gives all of them one surface. It does not rebuild a single
   template — every rule here paints markup the add-ons already render, so
   deactivating this plugin returns every tab to exactly what it was.

   TRUCK RADIO IS NOT TOUCHED. It was built deliberately and it is finished. Every
   shared rule below is scoped `.um-profile-body:not(.truck-radio)` so nothing can
   reach it by accident; the per-tab sections name their own tab and cannot reach
   it at all. Any rule added to this file later must keep that guard.

   Scope: `.um-profile-body` and the `.um-popup` the chat opens in. Nothing else.
   ============================================================================ */

/* Tokens. Guarded like every other rule so Truck Radio inherits nothing from
   this file at all, not even a custom property. */
html body .um-profile-body:not(.truck-radio) {
	--t-bg: #23282e;
	--t-card: #2a3037;
	--t-card-2: #262c33;
	--t-line: rgba(255, 255, 255, .09);
	--t-line-2: rgba(255, 255, 255, .06);
	--t-fg: #eef2f7;
	--t-mut: #98a4b2;   /* was #8b97a6 = 4.42:1 on the page; this is 5.18:1 */
	--t-acc: #ff7d21;
	--t-ok: #35d07f;
	--t-bad: #ff5061;
	--t-off: #a8b2be;   /* disabled labels: 5.43:1 even on a lifted panel */
}

/* ============================================================ Shared shell */

/* THE TAB BODY'S OWN WIDTH.

   The add-ons each cap it differently and none of them agree:

       .um-profile-body.activity  { width:100%; max-width:600px; margin:0 auto }
       .um-profile-body.friends   { max-width:94% !important }
       .um-profile-body.followers { max-width:94% !important }

   So one tab is a narrow centred column, the next is 94% of the page and the
   rest are full width. Normalised, so every tab is the same width as the card
   above it. Truck Radio keeps whatever it had. */
html body .um-profile-body:not(.truck-radio) {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box !important;
}

/* The add-ons print their own wrappers inside the tab. Flattened, so the tab is
   one surface rather than a box inside a box inside a box. */
html body .um-profile-body:not(.truck-radio) > .um,
html body .um-profile-body:not(.truck-radio) > .um > .um-form,
html body .um-profile-body:not(.truck-radio) .um-ajax-items {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	max-width: none !important;
}

/* The heading HLL SEO Headings injects into a tab. It is a page title dropped
   into the middle of a profile, and at h1 scale it shouts over the content it is
   sitting on. Reduced to a section label here; the real fix is the per-page
   "No heading on this page" checkbox on that plugin's own screen. */
html body .um-profile-body:not(.truck-radio) .hll-sh-head {
	margin: 0 0 14px !important;
	padding: 0 !important;
	border: 0 !important;
}

html body .um-profile-body:not(.truck-radio) .hll-sh-heading,
html body .um-profile-body:not(.truck-radio) h1.entry-title {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--t-mut) !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
	line-height: 1.3 !important;
}

/* THE SITE'S OWN RULE, WHICH REACHES EVERYTHING IN HERE:

       html body p, span, a, li, div { color:#000 !important; text-shadow:... }

   Every add-on's labels, headings and helper text land black on a dark panel
   with a white halo. One baseline puts them right; every rule below this point
   carries more classes, so muted and accent colours still win where they are
   set deliberately. */
html body .um-profile-body:not(.truck-radio),
html body .um-profile-body:not(.truck-radio) p,
html body .um-profile-body:not(.truck-radio) span,
html body .um-profile-body:not(.truck-radio) li,
html body .um-profile-body:not(.truck-radio) div,
html body .um-profile-body:not(.truck-radio) td,
html body .um-profile-body:not(.truck-radio) th,
html body .um-profile-body:not(.truck-radio) label,
html body .um-profile-body:not(.truck-radio) strong,
html body .um-profile-body:not(.truck-radio) h1,
html body .um-profile-body:not(.truck-radio) h2,
html body .um-profile-body:not(.truck-radio) h3,
html body .um-profile-body:not(.truck-radio) h4 {
	color: var(--t-fg) !important;
	text-shadow: none !important;
}

html body .um-profile-body:not(.truck-radio) a {
	color: var(--t-fg) !important;
	text-shadow: none !important;
}

/* One button, everywhere. UM prints .um-button for every action an add-on has. */
html body .um-profile-body:not(.truck-radio) .um-button,
html body .um-profile-body:not(.truck-radio) a.um-button,
html body .um-profile-body:not(.truck-radio) input.um-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	min-height: 42px !important;
	padding: 0 18px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--t-acc) !important;
	background-image: none !important;
	color: #23282e !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	transition: background-color .15s, border-color .15s;
}

html body .um-profile-body:not(.truck-radio) .um-button:hover {
	background: #ff9147 !important;
	color: #23282e !important;
}

/* The quiet variant: everything destructive or secondary. */
html body .um-profile-body:not(.truck-radio) .um-button.um-alt,
html body .um-profile-body:not(.truck-radio) a.um-button.um-alt {
	background: rgba(255, 255, 255, .05) !important;
	border: 1px solid var(--t-line) !important;
	color: var(--t-fg) !important;
}

html body .um-profile-body:not(.truck-radio) .um-button.um-alt:hover {
	background: rgba(255, 255, 255, .09) !important;
	border-color: rgba(255, 255, 255, .18) !important;
	color: var(--t-fg) !important;
}

html body .um-profile-body:not(.truck-radio) .um-button.um-disabled,
html body .um-profile-body:not(.truck-radio) .um-button.disabled {
	background: rgba(255, 255, 255, .06) !important;
	color: var(--t-off) !important;
	cursor: not-allowed !important;
	pointer-events: none;
}

/* Every field an add-on prints: search boxes, comment boxes, deposit amounts. */
html body .um-profile-body:not(.truck-radio) input[type="text"],
html body .um-profile-body:not(.truck-radio) input[type="search"],
html body .um-profile-body:not(.truck-radio) input[type="number"],
html body .um-profile-body:not(.truck-radio) input[type="email"],
html body .um-profile-body:not(.truck-radio) textarea,
html body .um-profile-body:not(.truck-radio) select {
	width: 100% !important;
	padding: 12px 14px !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 11px !important;
	background: var(--t-bg) !important;
	background-image: none !important;
	color: var(--t-fg) !important;
	font-size: 14.5px !important;
	line-height: 1.45 !important;
	text-shadow: none !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

html body .um-profile-body:not(.truck-radio) input:focus,
html body .um-profile-body:not(.truck-radio) textarea:focus,
html body .um-profile-body:not(.truck-radio) select:focus {
	border-color: rgba(255, 125, 33, .55) !important;
	outline: none !important;
}

html body .um-profile-body:not(.truck-radio) ::placeholder {
	color: var(--t-mut) !important;
	opacity: 1;
}

/* Avatars, wherever an add-on drops one. */
html body .um-profile-body:not(.truck-radio) img.um-avatar,
html body .um-profile-body:not(.truck-radio) img.avatar {
	border-radius: 50% !important;
	object-fit: cover !important;
	background: var(--t-card-2) !important;
}

/* Pagination: UM's and EDD's, which look nothing like each other by default. */
html body .um-profile-body:not(.truck-radio) .page-numbers,
html body .um-profile-body:not(.truck-radio) a.page-numbers {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 40px !important;
	min-height: 40px !important;
	margin: 0 3px !important;
	padding: 0 10px !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, .03) !important;
	color: var(--t-fg) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

html body .um-profile-body:not(.truck-radio) span.page-numbers.current {
	border-color: transparent !important;
	background: var(--t-acc) !important;
	color: #23282e !important;
}

html body .um-profile-body:not(.truck-radio) .edd_pagination {
	display: flex !important;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
	margin-top: 16px !important;
	padding-top: 14px !important;
	border-top: 1px solid var(--t-line-2) !important;
}

html body .um-profile-body:not(.truck-radio) .um-load-items {
	margin-top: 14px !important;
	text-align: center !important;
}

/* ================================================================ Messages */

/* The conversation list was a bare column of links. It is a list of people, so
   it reads as rows: picture, name, and a dot that says whether they are online. */
/* What the add-on does, and has to be undone first:
       .um-message-conv      { float:left; width:200px; min-height:300px }
       .um-message-conv-item { height:56px; line-height:47px; padding-left:60px }
       .um-message-conv-pic  { position:absolute; left:8px; top:8px }
       .um-message-conv-name { display:inline-block; width:calc(100% - 10px) }
   A fixed 200px pane with the avatar absolutely positioned over the name — a
   desktop two-pane layout from another era. The grid below cannot take effect
   until the float, the fixed height and the absolute avatar are gone. */
html body .um-profile-body.messages .um-message-conv {
	float: none !important;
	width: auto !important;
	min-height: 0 !important;
	overflow-x: visible !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 16px !important;
	background: var(--t-card) !important;
	padding: 8px !important;
	/* 2.12.4: this was overflow:hidden, to clip the rounded corners. With a
	   height on the list — the add-on ships min-height:300px and its script sets
	   one — the last conversation was simply cut in half with no way to reach it.
	   A panel that clips its own content must scroll. */
	height: auto !important;
	max-height: min(62vh, 560px) !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

html body .um-profile-body.messages .um-message-conv::-webkit-scrollbar {
	width: 6px;
}

html body .um-profile-body.messages .um-message-conv::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: rgba(255, 255, 255, .18);
}

html body .um-profile-body.messages a.um-message-conv-item {
	position: relative !important;
	height: auto !important;
	line-height: 1.3 !important;
	padding-left: 12px !important;
	box-sizing: border-box !important;
	display: grid !important;
	grid-template-columns: 44px 1fr auto auto !important;
	grid-template-areas: "pic name new status" !important;
	align-items: center !important;
	gap: 12px !important;
	width: auto !important;
	min-height: 64px !important;
	margin: 0 !important;
	padding: 10px 12px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: transparent !important;
	color: var(--t-fg) !important;
	text-decoration: none !important;
	text-shadow: none !important;
	transition: background-color .14s;
}

html body .um-profile-body.messages a.um-message-conv-item:hover,
html body .um-profile-body.messages a.um-message-conv-item.active {
	background: rgba(255, 255, 255, .05) !important;
	color: var(--t-fg) !important;
}

html body .um-profile-body.messages .um-message-conv-pic {
	grid-area: pic;
	position: static !important;
	left: auto !important;
	top: auto !important;
	display: block !important;
	width: 44px !important;
	height: 44px !important;
	margin: 0 !important;
	line-height: 0 !important;
}

html body .um-profile-body.messages .um-message-conv-pic img {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
}

html body .um-profile-body.messages .um-message-conv-name {
	grid-area: name;
	width: auto !important;
	margin: 0 !important;
	line-height: 1.3 !important;
	display: block !important;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--t-fg) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-shadow: none !important;
}

/* The add-on positions this absolutely, which collapses it to 0x0 inside the
   grid. Put back in flow, it takes its own column. */
html body .um-profile-body.messages .um-online-status {
	grid-area: status;
	position: static !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	font-size: 0 !important;
}

/* The dot is drawn here rather than left to UM's icon font. A glyph gives no box
   until the font loads, so the status silently had no size; a background and a
   radius always do. */
html body .um-profile-body.messages .um-online-status::after {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--t-mut);
}

html body .um-profile-body.messages .um-online-status.online::after {
	background: var(--t-ok);
	box-shadow: 0 0 0 3px rgba(53, 208, 127, .16);
}

html body .um-profile-body.messages .um-online-status i {
	display: none !important;
}

/* An unread conversation earns the accent, and its name earns weight — the only
   two things a list like this needs to say. */
html body .um-profile-body.messages .um-message-conv-new {
	grid-area: new;
	position: static !important;
	right: auto !important;
	top: auto !important;
	margin: 0 8px 0 0 !important;
	display: inline-flex !important;
	align-items: center;
	font-size: 0 !important;
}

html body .um-profile-body.messages .um-message-conv-new::after {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--t-acc);
	box-shadow: 0 0 0 3px rgba(255, 125, 33, .18);
}

html body .um-profile-body.messages .um-message-conv-new i {
	display: none !important;
}

/* ------------------------------------------------------------- the chat --- */

/* The conversation opens in UM's popup, which is appended to the body — so these
   sit at body level, outside .um-profile-body, and are named for the messaging
   add-on alone. */
html body .um-popup-overlay {
	background: rgba(12, 14, 18, .72) !important;
}

html body .um-popup {
	border: 1px solid rgba(255, 255, 255, .1) !important;
	border-radius: 20px !important;
	background: #2a3037 !important;
	box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .95) !important;
	overflow: hidden !important;
}

html body .um-message-header,
html body .um-popup .um-popup-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 13px 15px !important;
	border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
	background: #262c33 !important;
	color: #eef2f7 !important;
}

html body .um-message-header .um-message-header-left {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	min-width: 0;
}

html body .um-message-header .um-message-header-left img {
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
}

html body .um-message-header .um-message-header-left a {
	color: #eef2f7 !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

html body .um-message-header .um-message-header-right {
	display: flex !important;
	align-items: center !important;
	gap: 2px !important;
	flex: none;
}

html body .um-message-header .um-message-header-right a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 38px !important;
	border-radius: 10px !important;
	background: transparent !important;
	color: #8b97a6 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	transition: background-color .14s, color .14s;
}

html body .um-message-header .um-message-header-right a:hover {
	background: rgba(255, 255, 255, .06) !important;
	color: #eef2f7 !important;
}

html body .um-message-header .um-message-blocku:hover,
html body .um-message-header .um-message-delconv:hover {
	background: rgba(255, 80, 97, .14) !important;
	color: #ff5061 !important;
}

html body .um-message-body {
	background: #23282e !important;
	padding: 14px !important;
}

/* ------------------------------------------------------------ the bubbles --- */

/* left_m is the other person, right_m is you. The add-on's own inline CSS paints
   both in its blue; these are three classes deep and win outright. */
html body .um-message-body .um-message-item {
	display: flex !important;
	align-items: flex-end !important;
	gap: 6px !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	max-width: 100% !important;
}

html body .um-message-body .um-message-item.left_m {
	flex-direction: row !important;
	justify-content: flex-start !important;
}

html body .um-message-body .um-message-item.right_m {
	flex-direction: row-reverse !important;
	justify-content: flex-start !important;
}

html body .um-message-body .um-message-item .um-message-item-data {
	display: block !important;
	max-width: 78% !important;
	min-width: 0 !important;
	padding: 10px 13px !important;
	border: 1px solid transparent !important;
	border-radius: 16px !important;
	background: none !important;
}

/* Theirs: the site's panel. Yours: the brand orange. Two speakers, told apart by
   side AND by colour, because on a narrow screen side alone is easy to misread. */
html body .um-message-body .um-message-item.left_m .um-message-item-data {
	border-color: rgba(255, 255, 255, .09) !important;
	border-bottom-left-radius: 5px !important;
	background: #2a3037 !important;
}

html body .um-message-body .um-message-item.right_m .um-message-item-data {
	border-bottom-right-radius: 5px !important;
	background: #ff7d21 !important;
}

html body .um-message-body .um-message-item .um-message-item-content,
html body .um-message-body .um-message-item.left_m .um-message-item-content {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: #eef2f7 !important;
	font-size: 14.5px !important;
	line-height: 1.5 !important;
	text-align: left !important;
	text-shadow: none !important;
	word-break: break-word;
}

html body .um-message-body .um-message-item.right_m .um-message-item-content {
	color: #23282e !important;
}

html body .um-message-body .um-message-item .um-message-item-content a {
	color: #ffc766 !important;
	text-decoration: underline !important;
}

html body .um-message-body .um-message-item.right_m .um-message-item-content a {
	color: #23282e !important;
}

html body .um-message-body .um-message-item .um-message-item-metadata {
	margin-top: 5px !important;
	/* was .5 alpha = 4.19:1 on the bubble; a timestamp still has to be readable */
	color: rgba(238, 242, 247, .72) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-shadow: none !important;
}

html body .um-message-body .um-message-item.right_m .um-message-item-metadata {
	color: rgba(35, 40, 46, .88) !important;
	text-align: right !important;
}

html body .um-message-body .um-message-item .um-message-item-actions a {
	color: var(--t-mut, #8b97a6) !important;
	text-shadow: none !important;
}

html body .um-message-notice {
	display: block !important;
	padding: 16px !important;
	color: #8b97a6 !important;
	text-align: center !important;
	text-shadow: none !important;
}

/* ---------------------------------------------------------- the composer --- */

html body .um-message-footer,
html body .um-popup .um-popup-footer {
	padding: 12px !important;
	border-top: 1px solid rgba(255, 255, 255, .08) !important;
	background: #262c33 !important;
}

html body .um-message-footer .um-message-textarea textarea,
html body div.um div.um-form .um-message-textarea textarea {
	width: 100% !important;
	min-height: 46px !important;
	padding: 12px 14px !important;
	border: 1px solid rgba(255, 255, 255, .12) !important;
	border-radius: 12px !important;
	background: #23282e !important;
	color: #eef2f7 !important;
	font-size: 14.5px !important;
	line-height: 1.45 !important;
	resize: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

html body .um-message-footer .um-message-textarea textarea:focus,
html body div.um div.um-form .um-message-textarea textarea:focus {
	border: 1px solid rgba(255, 125, 33, .6) !important;
	outline: none !important;
}

html body .um-message-footer .um-message-buttons {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin-top: 10px !important;
}

html body .um-message-footer .um-message-limit {
	margin: 0 auto 0 0 !important;
	color: #8b97a6 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-shadow: none !important;
}

html body .um-message-footer a.um-message-send,
html body .um-message-footer a.um-message-send.disabled {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	min-height: 44px !important;
	padding: 0 20px !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: #ff7d21 !important;
	color: #23282e !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

html body .um-message-footer a.um-message-send.disabled {
	background: rgba(255, 255, 255, .07) !important;
	color: #a8b2be !important;
}

html body .um-message-footer a.um-message-send:not(.disabled):hover {
	background: #ff9147 !important;
}

html body .um-message-emolist {
	border: 1px solid rgba(255, 255, 255, .12) !important;
	border-radius: 12px !important;
	background: #2a3037 !important;
	box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9) !important;
}

/* ================================================================ Activity */

html body .um-profile-body.activity .um-activity-widget {
	margin: 0 0 14px !important;
	padding: 14px !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 16px !important;
	background: var(--t-card) !important;
	box-shadow: none !important;
	color: var(--t-fg) !important;
}

html body .um-profile-body.activity .um-activity-widget.um-activity-new-post {
	background: linear-gradient(180deg, #2e353d, var(--t-card)) !important;
}

html body .um-profile-body.activity .um-activity-head,
html body .um-profile-body.activity .um-activity-body,
html body .um-profile-body.activity .um-activity-foot,
html body .um-profile-body.activity .um-activity-bodyinner,
html body .um-profile-body.activity .um-activity-comments {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}

html body .um-profile-body.activity .um-activity-textarea textarea {
	min-height: 74px !important;
	resize: vertical !important;
}

html body .um-profile-body.activity .um-activity-foot {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin-top: 10px !important;
}

html body .um-profile-body.activity .um-activity-right {
	margin-left: auto !important;
}

/* 2.17.0 — WE WERE THE SECOND CAMERA.
   The served DOM, read off the page in DevTools:

       <div class="um-activity-left um-activity-insert">
         <div class="ajax-upload-dragdrop">            <- the real control
           <div class="upload">
             <i class="um-faicon-camera"></i>
             <form …><input type="file" name="wall_img_upload" …></form>
         <a class="um-activity-insert-photo" style="display: none;">   <- dead

   UM's JS replaces the anchor with the dragdrop widget and hides the original
   inline. This file then set `display: inline-flex !important` on it, and an
   !important declaration beats a plain inline style — so we un-hid the very
   element UM had retired. That was the second camera, and it did nothing
   because nothing is bound to it any more.

   The display declaration is gone. The anchor now keeps whatever UM decides:
   hidden when the widget took over, visible and styled if it ever does not. */
html body .um-profile-body.activity .um-activity-insert-photo {
	align-items: center;
	justify-content: center;
	width: 42px !important;
	height: 42px !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, .03) !important;
	color: var(--t-acc) !important;
	text-decoration: none !important;
}

html body .um-profile-body.activity .um-activity-insert-photo:hover {
	background: rgba(255, 125, 33, .1) !important;
}

/* A wall item: who, when, what, then the actions. */
html body .um-profile-body.activity .um-activity-ava img {
	width: 42px !important;
	height: 42px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
}

html body .um-profile-body.activity .um-activity-author-url a,
html body .um-profile-body.activity .um-activity-author-meta a {
	color: var(--t-fg) !important;
	font-weight: 800 !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

html body .um-profile-body.activity .um-activity-metadata {
	color: var(--t-mut) !important;
	font-size: 12px !important;
	text-shadow: none !important;
}

html body .um-profile-body.activity .um-activity-bodyinner-txt {
	color: var(--t-fg) !important;
	font-size: 14.5px !important;
	line-height: 1.55 !important;
	text-shadow: none !important;
}

/* 2.17.0 — THE ENDLESS PICTURE WAS AN AVATAR, NOT A POST PHOTO.
   2.16.0 capped .um-activity-bodyinner-photo img and changed nothing, because
   that is the wrong element. DevTools measured the real one:

       img.gravatar.avatar.avatar-80.um-avatar.um-avatar-uploaded   80 x 2857.14

   and it sits inside .um-activity-bodyinner-txt — the inline face in a
   "Jeff Boss has just followed Else" item. It carries width="80" height="80" as
   attributes, and the only rule this file had for it set border-radius and
   object-fit with no dimensions, so something upstream stretched the height and
   nothing stopped it.

   Both axes are now pinned. An avatar in a line of text is 34px: big enough to
   recognise, small enough to sit on the line rather than become the line. */
html body .um-profile-body.activity .um-activity-bodyinner-txt img.um-avatar,
html body .um-profile-body.activity .um-activity-bodyinner-txt img.avatar,
html body .um-profile-body.activity .um-activity-bodyinner-txt img[class*="avatar-"] {
	display: inline-block !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 34px !important;
	max-height: 34px !important;
	margin: 0 4px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	vertical-align: middle !important;
}

/* 2.18.0 — THE OVALS WERE THIS SAFETY NET, AND IT IS GONE.
   2.17.0 added blanket rules pinning every img.avatar-NN to the size named in
   its class. They collided head-on with the per-context rules this file has
   always had — .um-activity-ava img is 42px, .um-friends-user-photo img is
   50px — and the collision measured, in DevTools:

       img.gravatar.avatar.avatar-80.um-avatar   42 x 80

   42 wide from the context rule, 80 tall from the blanket one. Every avatar an
   egg. A net that fights the rules it was meant to protect is not a net.

   So the blanket sizing is removed and the guarantee is expressed as a shape
   instead: an avatar is square. aspect-ratio only acts when a dimension is left
   to the browser, so it never argues with a context rule that sets both — it
   simply stops the one open axis running away, which is exactly what the 2857px
   stretch was. */
html body .um-profile-body:not(.truck-radio) img.um-avatar,
html body .um-profile-body:not(.truck-radio) img.avatar {
	aspect-ratio: 1 / 1 !important;
	max-height: 200px !important;
}

/* 2.16.0 — A CEILING, NOT JUST A WIDTH. max-width alone bounds a photo sideways
   and lets it run as far down as it likes: a tall portrait filled the width and
   then several thousand pixels of the tab. A max-height caps it, object-fit keeps
   the framing honest rather than squashing it, and the width is left to the
   element so a small image is not blown up to fit. */
html body .um-profile-body.activity .um-activity-bodyinner-photo img,
html body .um-profile-body.activity .um-activity-preview img {
	max-width: 100% !important;
	max-height: 460px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	border-radius: 12px !important;
}

/* The link the photo sits in is a block, so it inherits the same ceiling —
   otherwise the anchor keeps the old height and leaves a gap under the picture. */
html body .um-profile-body.activity .um-activity-bodyinner-photo {
	max-height: 460px !important;
	overflow: hidden !important;
	border-radius: 12px !important;
}

@media (max-width: 620px) {
	html body .um-profile-body.activity .um-activity-bodyinner-photo,
	html body .um-profile-body.activity .um-activity-bodyinner-photo img,
	html body .um-profile-body.activity .um-activity-preview img {
		max-height: 320px !important;
	}
}

/* UM prints the shared post as a bordered white card inside the item. */
html body .um-profile-body.activity .um-activity-bodyinner a[class*="um-activity-link"],
html body .um-profile-body.activity .um-activity-bodyinner .um-activity-bodyinner-link {
	display: block !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 12px !important;
	background: var(--t-card-2) !important;
	color: var(--t-fg) !important;
	text-decoration: none !important;
	overflow: hidden !important;
}

html body .um-profile-body.activity .um-activity-actions {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

html body .um-profile-body.activity .um-activity-like,
html body .um-profile-body.activity .um-activity-comment {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	padding: 8px 13px !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, .03) !important;
	color: var(--t-mut) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	cursor: pointer;
	text-shadow: none !important;
	transition: background-color .14s, color .14s;
}

html body .um-profile-body.activity .um-activity-like:hover,
html body .um-profile-body.activity .um-activity-comment:hover {
	background: rgba(255, 125, 33, .1) !important;
	color: var(--t-fg) !important;
}

html body .um-profile-body.activity .um-activity-like i,
html body .um-profile-body.activity .um-activity-comment i {
	color: var(--t-acc) !important;
}

html body .um-profile-body.activity .um-activity-comments {
	margin-top: 12px !important;
	padding-top: 12px !important;
	border-top: 1px solid var(--t-line-2) !important;
}

html body .um-profile-body.activity .um-activity-comment-avatar img {
	width: 34px !important;
	height: 34px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
}

html body .um-profile-body.activity .um-activity-comment-box textarea,
html body .um-profile-body.activity .um-activity-comment-textarea {
	min-height: 44px !important;
	border-radius: 11px !important;
}

html body .um-profile-body.activity .um-activity-commentwrap,
html body .um-profile-body.activity .um-activity-comments-loop .um-activity-bodyinner {
	padding: 10px 12px !important;
	border-radius: 12px !important;
	background: rgba(255, 255, 255, .035) !important;
	color: var(--t-fg) !important;
}

html body .um-profile-body.activity .um-activity-dialog {
	border: 1px solid var(--t-line) !important;
	border-radius: 12px !important;
	background: var(--t-card-2) !important;
	box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9) !important;
}

html body .um-profile-body.activity .um-activity-dialog a {
	color: var(--t-fg) !important;
	text-shadow: none !important;
}

html body .um-profile-body.activity .um-activity-trash:hover {
	color: var(--t-bad) !important;
}

/* =========================================================== My Downloads */

/* EDD's table ships a bright green header band. On a phone a two-column table of
   long product names is unreadable anyway, so below 640px each purchase becomes
   a card and the header is dropped — the labels are carried by the cells. */
html body .um-profile-body.my-downloads table.edd-table {
	width: 100% !important;
	margin: 0 !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 16px !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background: var(--t-card) !important;
	overflow: hidden !important;
}

html body .um-profile-body.my-downloads table.edd-table th {
	padding: 13px 15px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--t-line) !important;
	background: var(--t-card-2) !important;
	color: var(--t-mut) !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	text-align: left !important;
	text-shadow: none !important;
}

html body .um-profile-body.my-downloads table.edd-table td {
	padding: 14px 15px !important;
	border: 0 !important;
	border-top: 1px solid var(--t-line-2) !important;
	background: transparent !important;
	color: var(--t-fg) !important;
	font-size: 14px !important;
	vertical-align: middle !important;
	text-shadow: none !important;
}

html body .um-profile-body.my-downloads table.edd-table tr:first-child td {
	border-top: 0 !important;
}

html body .um-profile-body.my-downloads td.edd_download_download_name {
	font-weight: 700 !important;
	line-height: 1.4 !important;
}

html body .um-profile-body.my-downloads .edd_download_file {
	margin: 0 0 6px !important;
}

html body .um-profile-body.my-downloads .edd_download_file:last-child {
	margin-bottom: 0 !important;
}

/* A download is the point of the page, so it looks like something to press. */
html body .um-profile-body.my-downloads a.edd_download_file_link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	max-width: 100% !important;
	padding: 9px 14px !important;
	border: 1px solid rgba(255, 125, 33, .35) !important;
	border-radius: 10px !important;
	background: rgba(255, 125, 33, .1) !important;
	color: #ffb37a !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	word-break: break-all;
	transition: background-color .14s, color .14s;
}

html body .um-profile-body.my-downloads a.edd_download_file_link:hover {
	background: var(--t-acc) !important;
	border-color: transparent !important;
	color: #23282e !important;
}

html body .um-profile-body.my-downloads .edd_download_payment_status {
	display: inline-flex !important;
	align-items: center !important;
	padding: 5px 11px !important;
	border-radius: 999px !important;
	background: rgba(255, 176, 46, .13) !important;
	color: #ffc766 !important;
	font-size: 11.5px !important;
	font-weight: 800 !important;
	letter-spacing: .02em !important;
	text-shadow: none !important;
}

/* A two-column table of long product names does not work on a phone, and it did
   not work here either: this was behind @media (max-width: 640px) and he browses
   with Chrome's Desktop site on, so the CSS viewport is ~980px and the query
   never matched. It is unconditional now — a purchase reads as a card at any
   width, and the column headings are carried by the cells. */
html body .um-profile-body.my-downloads table.edd-table,
html body .um-profile-body.my-downloads table.edd-table tbody,
html body .um-profile-body.my-downloads table.edd-table tr,
html body .um-profile-body.my-downloads table.edd-table td {
	display: block !important;
	width: auto !important;
	/* Table parts default to content-box, so the card's own border and padding
	   pushed its right edge past the column and clipped the corner. */
	box-sizing: border-box !important;
}

html body .um-profile-body.my-downloads table.edd-table {
	border: 0 !important;
	background: transparent !important;
	overflow: visible !important;
}

html body .um-profile-body.my-downloads table.edd-table thead {
	display: none !important;
}

html body .um-profile-body.my-downloads table.edd-table tr {
	margin: 0 0 10px !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 14px !important;
	background: var(--t-card) !important;
	overflow: hidden !important;
}

html body .um-profile-body.my-downloads table.edd-table td {
	border-top: 0 !important;
	padding: 13px 15px !important;
}

html body .um-profile-body.my-downloads td.edd_download_download_name {
	padding-bottom: 4px !important;
	font-size: 15px !important;
}

html body .um-profile-body.my-downloads td.edd_download_download_files {
	padding-top: 0 !important;
}

/* ================================================================= Friends */

/* UM prints these in the order photo, BUTTON, name — so a plain flex row puts
   the Unfriend button between the face and the name. Grid areas put them in
   reading order without touching the markup. */
html body .um-profile-body.friends .um-friends-user {
	display: grid !important;
	grid-template-columns: 50px 1fr auto !important;
	/* 2.16.0 — THE FOURTH CHILD. A row is photo, button, name, bio — four elements
	   against three named areas, so the bio had nowhere to go and CSS Grid
	   auto-placed it, opening an implicit second row and dragging the face out of
	   its card. The bio now has an area of its own under the name, with the photo
	   spanning both rows; it is empty on every row here, so the second row
	   collapses to nothing and the card looks exactly as it did before the bug. */
	grid-template-areas: "pic name btn" "pic bio btn" !important;
	min-height: 74px !important;   /* 2.17.0 — 50px face + 12px padding either side */
	align-items: center !important;
	gap: 13px !important;
	width: auto !important;
	margin: 0 0 10px !important;
	padding: 12px 14px !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 14px !important;
	background: var(--t-card) !important;
	text-align: left !important;
	float: none !important;
}

/* 2.17.0 — THE ROW WAS 61.5px TALL AND THE FACE IS 50px.
   DevTools measured div.um-friends-user at 965 x 61.5. With 12px of padding top
   and bottom that leaves 37.5px of content — a 50px photo cannot fit, so it hung
   out of the card. A grid row sizes itself to its items, so the only way the row
   could come out shorter than its tallest child is if that child is not in the
   flow: the photo is taken out of it upstream, contributes no height, and then
   paints wherever it lands.

   So it is put back in the flow explicitly, grid-area is made !important rather
   than hoping nothing outranks it, and the row is given a floor of 74px
   (50 + 12 + 12) so it cannot collapse under its own face again whatever else
   changes. */
html body .um-profile-body.friends .um-friends-user-photo {
	grid-area: pic !important;
	position: static !important;
	float: none !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	align-self: center !important;
	flex: none !important;
	display: block !important;
	width: 50px !important;
	height: 50px !important;
	margin: 0 !important;
	line-height: 0 !important;
}

html body .um-profile-body.friends .um-friends-user-photo img {
	width: 50px !important;
	height: 50px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
}

/* 2.16.0 — the area the bio was missing. Hidden when empty, which it always is
   here, so the row it owns collapses and the card keeps its original height. */
html body .um-profile-body.friends .um-friends-user-bio {
	grid-area: bio;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 12px !important;
	line-height: 1.45 !important;
	color: var(--t-mut) !important;
	overflow: hidden;
}

html body .um-profile-body.friends .um-friends-user-bio:empty {
	display: none !important;
}

html body .um-profile-body.friends .um-friends-user-name {
	grid-area: name;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

html body .um-profile-body.friends .um-friends-user-name a {
	color: var(--t-fg) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

html body .um-profile-body.friends .um-friends-user-btn {
	grid-area: btn;
	flex: none !important;
	margin: 0 !important;
}

/* ================================================== Posts and Comments --- */

/* Both tabs print the same .um-item shape, so they get one treatment. */
/* Same problem: the order is TITLE, image, meta, so a flex row reads
   title-then-thumbnail-then-date. The thumbnail belongs first and the meta
   belongs under the title, which is two grid rows with the image spanning both.
   Comments have no image, so their single column collapses to nothing. */
html body .um-profile-body.posts .um-item,
html body .um-profile-body.comments .um-item {
	display: grid !important;
	grid-template-columns: min-content 1fr !important;
	grid-template-areas: "img title" "img meta" !important;
	align-items: center !important;
	column-gap: 13px !important;
	row-gap: 3px !important;
	width: auto !important;
	margin: 0 0 10px !important;
	padding: 12px 14px !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 14px !important;
	background: var(--t-card) !important;
	float: none !important;
	transition: border-color .14s, background-color .14s;
}

html body .um-profile-body.posts .um-item:hover,
html body .um-profile-body.comments .um-item:hover {
	border-color: rgba(255, 125, 33, .3) !important;
	background: #2e353d !important;
}

html body .um-profile-body.posts .um-item-img {
	grid-area: img;
	flex: none !important;
	width: 64px !important;
	height: 64px !important;
	margin: 0 !important;
	border-radius: 11px !important;
	overflow: hidden !important;
	line-height: 0 !important;
}

html body .um-profile-body.posts .um-item-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 11px !important;
}

html body .um-profile-body.posts .um-item-link,
html body .um-profile-body.comments .um-item-link {
	grid-area: title;
	display: block !important;
	margin: 0 !important;
	color: var(--t-fg) !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	text-shadow: none !important;
}

html body .um-profile-body.posts .um-item-link a,
html body .um-profile-body.comments .um-item-link a {
	color: var(--t-fg) !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

html body .um-profile-body.posts .um-item-meta,
html body .um-profile-body.comments .um-item-meta {
	grid-area: meta;
	margin: 0 !important;
	color: var(--t-mut) !important;
	font-size: 12.5px !important;
	text-shadow: none !important;
}

/* The icon UM puts in front of a comment row. */
html body .um-profile-body.comments .um-item i,
html body .um-profile-body.posts .um-item i {
	color: var(--t-acc) !important;
}

/* ================================================================== Photos */

html body .um-profile-body.photos .um-user-photos-add {
	margin: 0 0 14px !important;
	text-align: left !important;
}

html body .um-profile-body.photos .um-user-photos-albums-wrap {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 12px !important;
}

@media (min-width: 720px) {
	html body .um-profile-body.photos .um-user-photos-albums-wrap {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

html body .um-profile-body.photos .um-user-photos-album {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

html body .um-profile-body.photos a.um-user-photos-album-block {
	display: block !important;
	position: relative !important;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--t-line) !important;
	border-radius: 14px !important;
	background: var(--t-card-2) !important;
	overflow: hidden !important;
	text-decoration: none !important;
}

html body .um-profile-body.photos a.um-user-photos-album-block img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

html body .um-profile-body.photos .album-overlay {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	top: auto !important;
	padding: 10px 12px !important;
	background: linear-gradient(180deg, transparent, rgba(12, 14, 18, .88)) !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-shadow: none !important;
}

/* ================================================================= Reviews */

html body .um-profile-body.reviews .um-reviews-header {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	margin: 0 0 14px !important;
	padding: 15px 16px !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 16px !important;
	background: var(--t-card) !important;
}

html body .um-profile-body.reviews .um-reviews-avg {
	color: var(--t-fg) !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	text-shadow: none !important;
}

html body .um-profile-body.reviews .um-reviews-header-span,
html body .um-profile-body.reviews .um-reviews-details {
	color: var(--t-mut) !important;
	font-size: 12.5px !important;
	text-shadow: none !important;
}

html body .um-profile-body.reviews .um-reviews-none {
	padding: 26px 16px !important;
	border: 1px dashed var(--t-line) !important;
	border-radius: 14px !important;
	background: rgba(255, 255, 255, .02) !important;
	color: var(--t-mut) !important;
	text-align: center !important;
	text-shadow: none !important;
}

/* ================================================================== Groups */

html body .um-profile-body.groups_list .um-groups-directory-header {
	margin: 0 0 14px !important;
	padding: 14px !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 16px !important;
	background: var(--t-card) !important;
}

html body .um-profile-body.groups_list .um-groups-search-form .um-col-alt {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin-top: 10px !important;
}

html body .um-profile-body.groups_list .um-groups-search-form .um-left,
html body .um-profile-body.groups_list .um-groups-search-form .um-right {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

html body .um-profile-body.groups_list .um-right {
	margin-left: auto !important;
}

/* =========================================================== My Dashboard */

html body .um-profile-body.my-dashboard .steamy-wallet-container {
	padding: 16px !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 16px !important;
	background: var(--t-card) !important;
	color: var(--t-fg) !important;
}

html body .um-profile-body.my-dashboard .steamy-wallet-header {
	color: var(--t-mut) !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
}

html body .um-profile-body.my-dashboard .steamy-balance,
html body .um-profile-body.my-dashboard .edd-wallet-value {
	color: var(--t-fg) !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
	text-shadow: none !important;
}

html body .um-profile-body.my-dashboard .steamy-deposit-form {
	margin-top: 14px !important;
	padding-top: 14px !important;
	border-top: 1px solid var(--t-line-2) !important;
}

html body .um-profile-body.my-dashboard .edd_wallet_deposit_submit_wrapper {
	margin-top: 10px !important;
}

html body .um-profile-body.my-dashboard input.edd-submit,
html body .um-profile-body.my-dashboard .edd-submit.button {
	width: auto !important;
	min-height: 44px !important;
	padding: 0 20px !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: var(--t-acc) !important;
	color: #23282e !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer;
}

html body .um-profile-body:not(.truck-radio) .edd_errors,
html body .um-profile-body:not(.truck-radio) .edd-alert-error {
	margin: 0 0 12px !important;
	padding: 12px 14px !important;
	border: 1px solid rgba(255, 80, 97, .35) !important;
	border-radius: 12px !important;
	background: rgba(255, 80, 97, .1) !important;
	color: #ffb3ba !important;
	text-shadow: none !important;
}

/* ================================================================== Modder */

/* The tab is a shortcode's output with a heading above it. Nothing to restyle
   beyond the shared shell — this exists so the section is accounted for rather
   than silently skipped. */
html body .um-profile-body.modder {
	color: var(--t-fg) !important;
}

/* The add-on's right-hand pane, which this tab does not use — the conversation
   opens in the popup instead. Its 200px offset would indent everything. */
html body .um-profile-body.messages .um-message-conv-view {
	margin-left: 0 !important;
	min-height: 0 !important;
	border-left: 0 !important;
}

/* The bio is always empty on this site's forms and only adds a blank row. */
html body .um-profile-body.friends .um-friends-user-bio:empty {
	display: none !important;
}

/* The date-and-category line is supporting text, including its links. */
html body .um-profile-body.posts .um-item-meta a,
html body .um-profile-body.comments .um-item-meta a {
	color: var(--t-mut) !important;
	text-decoration: none !important;
}

html body .um-profile-body.posts .um-item-meta a:hover,
html body .um-profile-body.comments .um-item-meta a:hover {
	color: var(--t-acc) !important;
}

/* ============================================== What the screenshots showed */

/* ------------------------------------------------------------- Photos --- */

/* "New Album" is a.um-modal-btn, not .um-button, so the shared button rule did
   not reach it and it stayed the add-on's green. */
html body .um-profile-body.photos a.um-modal-btn,
html body .um-profile-body.photos .um-user-photos-add a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	min-height: 44px !important;
	padding: 0 20px !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: var(--t-acc) !important;
	color: #23282e !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

html body .um-profile-body.photos a.um-modal-btn i {
	color: #23282e !important;
}

/* The album caption sits under the tile, outside the link. */
html body .um-profile-body.photos .album-title {
	margin: 9px 0 0 !important;
	color: var(--t-fg) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	text-shadow: none !important;
}

html body .um-profile-body.photos .album-title strong {
	font-weight: 800 !important;
}

html body .um-profile-body.photos .album-title span,
html body .um-profile-body.photos .album-meta {
	display: block !important;
	color: var(--t-mut) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
}

/* The overlay UM draws over an album cover is empty markup, so a gradient band
   would be a dark bar over nothing. It earns its keep on hover only. */
html body .um-profile-body.photos .album-overlay {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	transition: background-color .15s;
}

html body .um-profile-body.photos a.um-user-photos-album-block:hover .album-overlay {
	background: rgba(255, 125, 33, .18) !important;
}

/* The Albums / Photos switch above the grid. It sits just outside the tab body,
   so it is named explicitly — and Truck Radio has no subnav to reach. */
html body .um-profile .um-profile-subnav {
	display: flex !important;
	gap: 8px !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

html body .um-profile .um-profile-subnav a {
	display: inline-flex !important;
	align-items: center !important;
	min-height: 40px !important;
	padding: 0 16px !important;
	border: 1px solid var(--t-line, rgba(255,255,255,.09)) !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, .03) !important;
	color: #eef2f7 !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

html body .um-profile .um-profile-subnav a.current,
html body .um-profile .um-profile-subnav a.active {
	border-color: transparent !important;
	background: #ff7d21 !important;
	color: #23282e !important;
}

/* ------------------------------------------------------------- Modder --- */

/* THE TWO POSTING BUTTONS. These are the most important controls on the tab —
   how a modder publishes paid and free work — so they get the weight of a
   primary action rather than the look of a link.

   They are not an add-on's markup. They are inline style attributes in the tab's
   own content:

       <p><a style="display:inline-block;padding:14px 28px;background:#27ae60;…"
             href="/vendor-dashboard/"><br/>💰 Paid Mods<br/></a></p>

   An inline style loses to !important, so they can be rebuilt without editing
   the post. The stray <br> inside each anchor is what made them so tall.

   2.13.2: the previous pass filled them with the brand orange and left them
   hugging the left edge. Orange is this site's accent, not its button colour,
   and two orange slabs beside an orange tab pill read as decoration rather than
   as actions. They are flat panels now — no fill, no gradient, no press — and
   they span the content rather than sitting in the corner. */

html body .um-profile-body.modder > div[style] {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	align-content: start !important;
	gap: 10px !important;
	padding: 0 !important;
	text-align: left !important;
}

/* Prose spans the full width; the two actions take a column each below it. */
html body .um-profile-body.modder > div[style] > h3,
html body .um-profile-body.modder > div[style] > p:not(:has(a[style])) {
	grid-column: 1 / -1 !important;
}

html body .um-profile-body.modder h3 {
	order: 0 !important;
	margin: 0 !important;
	color: var(--t-fg) !important;
	font-size: 19px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	text-shadow: none !important;
}

html body .um-profile-body.modder p {
	margin: 0 !important;
	color: var(--t-mut) !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	text-shadow: none !important;
}

html body .um-profile-body.modder p:not(:has(a[style])) {
	order: 1 !important;
}

/* Both actions move below the prose — say what it is, then offer the ways in. */
html body .um-profile-body.modder p:has(> a[style]) {
	order: 2 !important;
	display: block !important;
	margin: 0 !important;
}

html body .um-profile-body.modder p:has(> a[style]):first-of-type {
	margin-top: 6px !important;
}

html body .um-profile-body.modder a[style] {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 12px !important;
	width: 100% !important;
	min-height: 60px !important;
	padding: 0 16px !important;
	border: 1px solid rgba(255, 255, 255, .11) !important;
	border-radius: 12px !important;
	background: #2e353d !important;
	background-image: none !important;
	color: var(--t-fg) !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: left !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	transition: background-color .15s, border-color .15s;
}

html body .um-profile-body.modder a[style]:hover {
	background: #343c46 !important;
	border-color: rgba(255, 255, 255, .22) !important;
	color: #ffffff !important;
}

/* A chevron, drawn rather than typed, so it cannot depend on a font. */
html body .um-profile-body.modder a[style]::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: .45;
}

html body .um-profile-body.modder a[style] br {
	display: none !important;
}

/* Side by side once there is room for two readable labels. */
@media (min-width: 560px) {
	html body .um-profile-body.modder > div[style] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	html body .um-profile-body.modder p:has(> a[style]):first-of-type {
		margin-top: 6px !important;
	}
}

/* --------------------------------------------------------- My Dashboard --- */

/* The amount choices were bare browser radios with the label wrapping under
   them. Each becomes a row you can hit with a thumb. */
html body .um-profile-body.my-dashboard .edd_wallet_deposit_form label,
html body .um-profile-body.my-dashboard .steamy-deposit-form label {
	display: flex !important;
	align-items: center !important;
	gap: 11px !important;
	margin: 0 0 8px !important;
	padding: 12px 14px !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 11px !important;
	background: rgba(255, 255, 255, .03) !important;
	color: var(--t-fg) !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-shadow: none !important;
	cursor: pointer;
}

html body .um-profile-body.my-dashboard input[type="radio"] {
	flex: none !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	accent-color: var(--t-acc);
}

html body .um-profile-body.my-dashboard h2,
html body .um-profile-body.my-dashboard h3 {
	margin: 0 0 10px !important;
	color: var(--t-mut) !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
}

/* The gateway badge is an image button; it only needs room and a hit area. */
html body .um-profile-body.my-dashboard input[type="image"],
html body .um-profile-body.my-dashboard .edd_wallet_deposit_submit_wrapper img {
	display: block !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 4px 0 0 !important;
	border-radius: 10px !important;
}

/* ------------------------------------------------------------ Reviews --- */

/* The rating row is a label, five stars and a count on one line. */
html body .um-profile-body.reviews .um-reviews-header-span {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-wrap: wrap;
}

html body .um-profile-body.reviews .um-raty,
html body .um-profile-body.reviews .um-reviews-avg-rating {
	display: inline-flex !important;
	align-items: center !important;
	gap: 3px !important;
}

html body .um-profile-body.reviews img {
	width: auto !important;
	height: auto !important;
}

/* The bare horizontal rule UM prints between the header and the list. */
html body .um-profile-body.reviews hr,
html body .um-profile-body:not(.truck-radio) hr {
	height: 1px !important;
	margin: 14px 0 !important;
	border: 0 !important;
	background: var(--t-line) !important;
}

/* ============================================================================
   2.11.2 — what the live screenshots showed.
   ============================================================================ */

/* ------------------------------------------------ the chat row, cleaned up --- */

/* THE DARK PANEL BESIDE EVERY BUBBLE. UM lays a message out as a flex row:

       .um-message-item  { display:flex }          left_m row, right_m row-reverse
         .um-message-item-data      <- the bubble
         .um-message-item-actions   <- a Remove link, and nothing else

   The actions box is a flex sibling, so on this site's stylesheet — which paints
   UM's message surfaces — it filled the rest of the row and read as a second,
   empty bubble on the opposite side. It holds one hover link; it needs no width
   and no surface of its own. */
html body .um-message-body .um-message-item-actions {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 4px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
}

/* And the speech tails drawn onto the row by the same stylesheet, still in its
   blue. The bubble carries its own tail now, as a squared-off corner on the
   speaker's side, so these have nothing left to do. */
html body .um-message-body .um-message-item::before,
html body .um-message-body .um-message-item::after,
html body .um-message-body .um-message-item-data::before,
html body .um-message-body .um-message-item-data::after,
html body .um-message-body .um-message-item-content::before,
html body .um-message-body .um-message-item-content::after {
	content: none !important;
	display: none !important;
}

html body .um-message-body .um-message-item {
	padding: 0 !important;
	background: none !important;
	backdrop-filter: none !important;
}

html body .um-message-body .um-message-item .um-message-item-content {
	margin: 0 !important;
	border-radius: 0 !important;
}

/* A long thread scrolls inside the chat instead of growing the popup. */
html body .um-message-body {
	max-height: 58vh !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
}

/* The three header controls read as one set: same box, same weight, same hit
   area. One of them was arriving with a circle of its own. */
html body .um-message-header .um-message-header-right a,
html body .um-message-header .um-message-header-right a.um-message-hide {
	border: 0 !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, .04) !important;
	box-shadow: none !important;
}

/* The emoji key was a grey square from the add-on's own CSS. */
html body .um-message-footer .um-message-emoji {
	flex: 0 0 auto !important;
}

html body .um-message-footer .um-message-emo {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, .12) !important;
	border-radius: 11px !important;
	background: rgba(255, 255, 255, .04) !important;
	color: #eef2f7 !important;
	font-size: 19px !important;
	line-height: 1 !important;
	opacity: 1 !important;
}

html body .um-message-footer .um-message-emo:hover {
	background: rgba(255, 125, 33, .14) !important;
	border-color: rgba(255, 125, 33, .45) !important;
}

html body .um-message-emolist {
	background: #2a3037 !important;
	padding: 8px !important;
	width: auto !important;
	max-width: 280px !important;
}

/* ------------------------------------------------------- My Dashboard --- */

/* The balance arrived as a filled orange pill, which made a number the loudest
   thing on the page and left the label whispering. The figure is the hero; it
   does not need a badge to say so. */
html body .um-profile-body.my-dashboard .edd-wallet-value {
	display: block !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: var(--t-fg) !important;
	font-size: 34px !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	letter-spacing: -.01em !important;
	text-shadow: none !important;
}

/* "Deposit Funds" is an h4, which the label rule did not name — so it stayed a
   large white heading while "Account Balance" became a quiet label. */
html body .um-profile-body.my-dashboard h4 {
	margin: 0 0 10px !important;
	color: var(--t-mut) !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
}

html body .um-profile-body.my-dashboard .steamy-wallet-header {
	margin: 0 0 4px !important;
}

html body .um-profile-body.my-dashboard .steamy-balance {
	margin: 0 !important;
}

html body .um-profile-body.my-dashboard .edd_wallet_deposit_form ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

html body .um-profile-body.my-dashboard .edd_wallet_deposit_form li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* The chosen amount is stated, not just dotted. */
html body .um-profile-body.my-dashboard label:has(input:checked) {
	border-color: rgba(255, 125, 33, .5) !important;
	background: rgba(255, 125, 33, .09) !important;
}

/* ------------------------------------------------ the composer, at any width --- */

/* Measured: at 412px the foot pushed the Post button 53px past the edge of the
   tab. UM floats its two halves and gives the right one a width; a flex row over
   floated children with fixed widths cannot shrink. They wrap now instead. */
html body .um-profile-body.activity .um-activity-foot {
	flex-wrap: wrap !important;
	min-width: 0 !important;
}

/* Scoped to the FOOT. 2.11.3 applied this to every .um-activity-left, and a wall
   item's author block carries that class too — its padding-left:50px is what
   holds the absolutely positioned avatar clear of the name. Resetting it slid
   the avatar straight over "Tommy" and the date. */
html body .um-profile-body.activity .um-activity-foot .um-activity-left,
html body .um-profile-body.activity .um-activity-foot .um-activity-right {
	float: none !important;
	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
}

html body .um-profile-body.activity .um-activity-foot .um-activity-right {
	margin-left: auto !important;
}

html body .um-profile-body.activity .um-activity-foot .um-button {
	max-width: 100% !important;
}

/* The composer textarea is width:100% with padding, and table-era stylesheets
   leave it content-box — so it ran 17px past the footer at every width. */
html body .um-message-footer .um-message-textarea textarea,
html body .um-message-footer .um-message-textarea,
html body div.um div.um-form .um-message-textarea textarea {
	box-sizing: border-box !important;
	max-width: 100% !important;
}

/* ============================================================================
   2.12.0 — the white that CSS on the page could not reach.
   ============================================================================ */

/* ------------------------------------------ the post thumbnail's frame --- */

/* um-profile.css:509 puts a light picture-frame around every thumbnail:

       .um-item-img a { padding: 8px; border: 1px solid #ddd }

   I had styled the wrapper and the image and missed the link between them,
   which is the thing actually drawing the frame. */
html body .um-profile-body.posts .um-item-img a,
html body .um-profile-body.comments .um-item-img a {
	display: block !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: none !important;
	overflow: hidden !important;
	line-height: 0 !important;
}

html body .um-profile-body.posts .um-item-img a:hover {
	border: 0 !important;
}

/* ------------------------------------------------ the photo lightbox --- */

/* um-user-photos opens a photo in UM's modal, so this markup is appended to the
   body and sits outside .um-profile-body entirely — which is why the caption,
   the like bar and the comment box were still white after the Photos tab was
   done. Named for that add-on alone. */
html body .um-user-photos-body,
html body .um-user-photos-bodyinner,
html body .um-user-photos-foot,
html body .um-user-photos-disp,
html body .um-user-photos-comments,
html body .um-user-photos-comment,
html body .um-user-photos-commentl,
html body .um-user-photos-comment-box,
html body .um-user-photos-left,
html body .um-user-photos-right {
	background: transparent !important;
	border-color: rgba(255, 255, 255, .09) !important;
	color: #eef2f7 !important;
	text-shadow: none !important;
}

html body .um-user-photos-body {
	background: #2a3037 !important;
	border: 1px solid rgba(255, 255, 255, .1) !important;
	border-radius: 16px !important;
	padding: 14px !important;
}

html body .um-user-photos-bodyinner-txt,
html body .um-user-photos-disp-span,
html body .um-user-photos-post-likes,
html body .um-user-photos-post-comments {
	color: #eef2f7 !important;
	text-shadow: none !important;
}

html body .um-user-photos-foot {
	margin-top: 12px !important;
	padding-top: 12px !important;
	border-top: 1px solid rgba(255, 255, 255, .08) !important;
}

html body .um-user-photos-actions a,
html body .um-user-photos-disp a,
html body .um-user-photos-left a {
	color: #98a4b2 !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

html body .um-user-photos-actions a:hover,
html body .um-user-photos-left a:hover {
	color: #ff7d21 !important;
}

html body .um-user-photos-actions i,
html body .um-user-photos-disp i {
	color: #ff7d21 !important;
}

html body .um-user-photos-comment-avatar img {
	width: 34px !important;
	height: 34px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
}

html body .um-user-photos-comment-textarea,
html body .um-user-photos-comment-box textarea {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 11px 13px !important;
	border: 1px solid rgba(255, 255, 255, .12) !important;
	border-radius: 11px !important;
	background: #23282e !important;
	color: #eef2f7 !important;
	font-size: 14.5px !important;
	line-height: 1.45 !important;
	resize: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

html body .um-user-photos-comment-textarea:focus {
	border-color: rgba(255, 125, 33, .55) !important;
	outline: none !important;
}

/* The Comment button arrived in the add-on's green. */
html body .um-user-photos-comment-post,
html body a.um-user-photos-comment-post {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 42px !important;
	padding: 0 18px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: #ff7d21 !important;
	background-image: none !important;
	color: #23282e !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

html body .um-user-photos-comment-post.um-disabled,
html body a.um-user-photos-comment-post.um-disabled {
	background: rgba(255, 255, 255, .06) !important;
	color: #a8b2be !important;
}

/* ============================================================================
   2.12.1 — the wall item, and the card that replaced the iframe.
   ============================================================================ */

/* The author block: avatar left, name and time beside it. UM positions the
   avatar absolutely against this block's own padding, so the padding has to
   stay. */
html body .um-profile-body.activity .um-activity-author {
	position: relative !important;
	min-height: 42px !important;
	padding-left: 54px !important;
	margin: 0 !important;
	float: none !important;
	width: auto !important;
}

html body .um-profile-body.activity .um-activity-ava {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 42px !important;
	height: 42px !important;
}

html body .um-profile-body.activity .um-activity-head {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	margin: 0 0 10px !important;
}

html body .um-profile-body.activity .um-activity-author-url {
	font-size: 14.5px !important;
	line-height: 1.3 !important;
}

html body .um-profile-body.activity .um-activity-ticon {
	margin-left: auto !important;
	flex: none !important;
	color: var(--t-mut) !important;
}

/* The insert row. There are two tools here, not one duplicated icon: UM Social
   Activity prints its camera, and a second add-on adds its own through
   um_activity_pre_insert_tools. Both are given the same control so the pair
   reads as deliberate rather than as a glitch. */
html body .um-profile-body.activity .um-activity-insert {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* 2.17.0 — same reason: this also reached the hidden anchor and forced it back
   into view. Sizing and colour stay; the decision to be seen belongs to UM. */
html body .um-profile-body.activity .um-activity-insert > a {
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;
	padding: 0 !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, .03) !important;
	color: var(--t-acc) !important;
	text-decoration: none !important;
}

html body .um-profile-body.activity .um-activity-insert > a:hover {
	background: rgba(255, 125, 33, .1) !important;
	border-color: rgba(255, 125, 33, .4) !important;
}

html body .um-profile-body.activity .um-activity-insert .um-clear {
	display: none !important;
}

/* ============================================================================
   2.21.0 — THE PHOTO VIEWER, RESTYLED FROM THE PLUGIN'S OWN SOURCE.

   2.18.0, 2.19.0 and 2.20.0 were written from photographs of DevTools. The
   source has now been read, and it is nothing like what was assumed:

       .imgs-grid-modal
         .modal-close                 position:absolute
         .modal-inner       position:absolute, top/bottom 60px, width ~70%
           .modal-image     position:absolute, inset 0, left/right 70px
             img            max-width/height:100%, vertical-align:middle
             :before        height:100%   <- the vertical-centring trick
           .modal-control   the prev/next arrows
         .modal-caption     width:30%, float:right, height:100vh, background:#fff

   Three things that had been guessed wrong: the picture IS an <img>, not a
   background-image; .modal-caption is not a caption but the COMMENTS PANEL,
   which is why likes and replies appeared in it; and a media query restacks
   every one of those panes to position:static, height:auto on a phone.

   That geometry is load-bearing. A fixed height on .modal-inner orphans the
   absolutely-positioned .modal-image inside it, overflow:hidden clips the
   picture, and overriding the panes defeats the mobile restack — which is
   exactly the sequence of failures the last three versions produced.

   SO THIS BLOCK CHANGES COLOUR AND NOTHING ELSE. No width, height, position,
   display, float, overflow, inset or margin appears anywhere in it. The layout
   stays entirely the plugin's, on every screen size; only the light-theme
   palette is answered, because a white comments panel against a dark site was
   the actual complaint.
   ========================================================================= */

html body .imgs-grid-modal {
	background-color: rgba(7, 12, 18, .94) !important;
}

/* 2.22.0 — DRESSING THE VIEWER, STILL WITHOUT MOVING ANYTHING.

   The photo pane was a bare rectangle on a bare backdrop: correct, and empty.
   What follows gives it a stage — a panel behind the picture, a frame on the
   picture itself, a real button for the close, and arrows that can be seen
   against a bright photograph.

   The same rule as 2.21.0 holds and is checked the same way: not one of these
   declarations affects layout. Only background, border, border-radius,
   box-shadow, colour, opacity and filter appear. The plugin's geometry — the
   absolute panes, the :before centring trick, the 768px restack — is untouched,
   which is why the mobile view that now works keeps working.

   ONE THING THIS DELIBERATELY DOES NOT FIX. On desktop the plugin pins
   .modal-inner to the viewport (top:60px, bottom:60px), so on a tall narrow
   window a wide photograph leaves dead space above and below it. That is the
   plugin's own layout, not a fault; on an ordinary widescreen monitor it reads
   normally. Making the pane hug the picture instead means rewriting that
   geometry — which is exactly what broke the viewer three times — so it is left
   alone unless you want it changed knowingly. */

/* The stage the picture sits on. */
html body .imgs-grid-modal .modal-inner {
	background-color: rgba(255, 255, 255, .022) !important;
	border-radius: 16px !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important;
}

/* The picture itself: framed, lifted off the stage. */
html body .imgs-grid-modal .modal-inner .modal-image img {
	border-radius: 10px !important;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .55) !important;
	background-color: #0b1119 !important;
}

/* The arrows are a sprite that vanishes against a bright photograph. */
html body .imgs-grid-modal .modal-inner .modal-control {
	opacity: .55 !important;
}

html body .imgs-grid-modal .modal-inner:hover > .modal-control {
	opacity: 1 !important;
}

html body .imgs-grid-modal .modal-inner .modal-control .arrow {
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .85)) !important;
}

/* ============================================================================
   2.23.0 — THE ALBUM GRID AND THE VIEWER'S CONTROLS.

   Two things read as unfinished, and both are now understood rather than
   guessed at, because um-user-photos' own stylesheet has been read.

   THE PALE BARS BESIDE EVERY THUMBNAIL. images-grid.css paints a placeholder
   behind each cell:

       .imgs-grid .imgs-grid-image:before { background-color: #f0f0f0; }

   The image wrapper inside is an inline-block sized to the picture, so wherever
   a photo is narrower than its cell that light grey shows through at the sides.
   On a white theme it is invisible. On this one it is a pair of bright bars.
   One colour changes it.

   THE ARROWS. .modal-control is a 70px-wide strip running the FULL height of the
   pane — DevTools measured one at 70 x 738 — hidden until the pane is hovered,
   with a sprite PNG for the chevron. Two tall invisible columns either side of
   the photograph is not a control anyone recognises. They become round buttons,
   centred, always visible, with the chevron drawn in CSS rather than fetched as
   an image.

   The geometry here IS changed, unlike 2.21.0 and 2.22.0 — but only within
   .modal-control, which is an absolutely-positioned decoration that nothing else
   depends on, and only above 768px so the mobile layout that now works is never
   touched. The photo's own centring — the :before at height:100% plus
   vertical-align:middle — is left exactly alone.
   ========================================================================= */

/* The grid's light-theme placeholder, answered. */
html body .imgs-grid .imgs-grid-image:before {
	background-color: rgba(255, 255, 255, .035) !important;
}

html body .imgs-grid .imgs-grid-image .image-wrap {
	border-radius: 8px !important;
}

@media (min-width: 769px) {

	/* A round button, vertically centred, instead of a full-height column. */
	html body .imgs-grid-modal .modal-inner .modal-control {
		top: 50% !important;
		bottom: auto !important;
		width: 46px !important;
		height: 46px !important;
		transform: translateY(-50%) !important;
		border: 1px solid rgba(255, 255, 255, .16) !important;
		border-radius: 50% !important;
		background: rgba(11, 17, 25, .72) !important;
		-webkit-backdrop-filter: blur(4px) !important;
		backdrop-filter: blur(4px) !important;
		visibility: visible !important;
		opacity: .75 !important;
		transition: opacity .15s ease, background .15s ease, border-color .15s ease !important;
	}

	html body .imgs-grid-modal .modal-inner .modal-control.left  { left: 16px !important; }
	html body .imgs-grid-modal .modal-inner .modal-control.right { right: 16px !important; }

	html body .imgs-grid-modal .modal-inner:hover > .modal-control { opacity: 1 !important; }

	html body .imgs-grid-modal .modal-inner .modal-control:hover {
		background: rgba(255, 125, 33, .88) !important;
		border-color: rgba(255, 125, 33, .95) !important;
	}

	/* The sprite is dropped and the chevron drawn from two borders, so it stays
	   sharp at any size and needs no extra request. The .arrow keeps its role as
	   the click target — um-photo-modal-prev / -next are bound to it — and is
	   stretched to fill the button so the whole circle is clickable. */
	html body .imgs-grid-modal .modal-inner .modal-control .arrow {
		position: relative !important;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		background-image: none !important;
		transform: none !important;
	}

	html body .imgs-grid-modal .modal-inner .modal-control .arrow:before {
		content: "" !important;
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		width: 11px !important;
		height: 11px !important;
		border-top: 2px solid #fff !important;
		border-right: 2px solid #fff !important;
	}

	html body .imgs-grid-modal .modal-inner .modal-control .arrow.left:before {
		transform: translate(-35%, -50%) rotate(-135deg) !important;
	}

	html body .imgs-grid-modal .modal-inner .modal-control .arrow.right:before {
		transform: translate(-65%, -50%) rotate(45deg) !important;
	}

	/* The picture takes back the width the two strips were holding. */
	html body .imgs-grid-modal .modal-inner .modal-image {
		left: 20px !important;
		right: 20px !important;
	}
}

html body .imgs-grid-modal .modal-close {
	color: #eef2f7 !important;
	background: rgba(255, 255, 255, .08) !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .5) !important;
	text-shadow: none !important;
}

html body .imgs-grid-modal .modal-close:hover {
	color: var(--t-acc, #ff7d21) !important;
}

/* The comments panel. An inset shadow rather than a border, so the 30% float
   keeps the exact width the plugin gave it. */
html body .imgs-grid-modal .modal-caption {
	background: #1b2027 !important;
	color: #c3cdd9 !important;
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, .08) !important;
}

/* Every surface the plugin paints white or near-white inside that panel. */
html body .imgs-grid-modal .modal-caption .um-user-photos-widget,
html body .imgs-grid-modal .modal-caption .um-user-photos-head,
html body .imgs-grid-modal .modal-caption .um-user-photos-body,
html body .imgs-grid-modal .modal-caption .um-user-photos-foot,
html body .imgs-grid-modal .modal-caption .um-user-photos-foot.status,
html body .imgs-grid-modal .modal-caption .um-user-photos-comments {
	background: transparent !important;
	border-color: rgba(255, 255, 255, .09) !important;
	box-shadow: none !important;
}

html body .imgs-grid-modal .modal-caption .um-user-photos-comment-meta .um-user-photos-editc-d {
	background: #232a33 !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .5) !important;
}

/* Text the plugin sets in light-theme greys: #555, #444, #666. */
html body .imgs-grid-modal .modal-caption .um-user-photos-head,
html body .imgs-grid-modal .modal-caption .um-user-photos-bodyinner-txt,
html body .imgs-grid-modal .modal-caption .um-user-photos-comment-text,
html body .imgs-grid-modal .modal-caption .um-user-photos-head .um-user-photos-author-url a {
	color: #e3eaf3 !important;
}

/* And the quieter greys: #aaa, #999, #bbb. */
html body .imgs-grid-modal .modal-caption .um-user-photos-author-meta span.um-user-photos-metadata,
html body .imgs-grid-modal .modal-caption .um-user-photos-author-meta span.um-user-photos-metadata a,
html body .imgs-grid-modal .modal-caption .um-user-photos-comment-meta a,
html body .imgs-grid-modal .modal-caption .um-user-photos-comment-meta > span:after,
html body .imgs-grid-modal .modal-caption .um-user-photos-comment-meta .um-user-photos-editc a,
html body .imgs-grid-modal .modal-caption .um-user-photos-comment-hidden,
html body .imgs-grid-modal .modal-caption .um-user-photos-comment-hide,
html body .imgs-grid-modal .modal-caption .um-user-photos-disp-likes a span.um-user-photos-disp-span,
html body .imgs-grid-modal .modal-caption .um-user-photos-disp-comments a span.um-user-photos-disp-span {
	color: #8b97a6 !important;
}

html body .imgs-grid-modal .modal-caption .um-user-photos-disp-likes a,
html body .imgs-grid-modal .modal-caption .um-user-photos-disp-comments a,
html body .imgs-grid-modal .modal-caption .um-user-photos-actions a {
	color: #b9c6d4 !important;
}

html body .imgs-grid-modal .modal-caption .um-user-photos-actions a:hover {
	color: var(--t-acc, #ff7d21) !important;
}

/* Divider rules the plugin draws in #f6f6f6 / #e5e5e5. */
html body .imgs-grid-modal .modal-caption .um-user-photos-disp {
	border-top-color: rgba(255, 255, 255, .09) !important;
}

html body .imgs-grid-modal .modal-caption .um-user-photos-comment-child {
	border-left-color: rgba(255, 255, 255, .12) !important;
}

/* The comment box, which is a white field on a white panel by default. */
html body .imgs-grid-modal .modal-caption .um-user-photos-comment-textarea {
	background: rgba(255, 255, 255, .04) !important;
	border-color: rgba(255, 255, 255, .14) !important;
	color: #e3eaf3 !important;
}

html body .imgs-grid-modal .modal-caption .um-user-photos-comment-textarea::placeholder {
	color: #74808e !important;
}

/* ============================================================================
   2.18.0 — THE LOADER.

       <div class="um-activity-load" data-offset="0" title="Loading..."
            style="display: block;"></div>

   An empty div with no styling of ours, so it fell back to whatever it inherited
   and drew as a white slab across the feed. It is given a real spinner: a ring
   in the site's accent that turns, and nothing at all when the feed is idle.
   ========================================================================= */
html body .um-profile-body.activity .um-activity-load {
	display: block !important;
	width: 28px !important;
	height: 28px !important;
	margin: 18px auto !important;
	padding: 0 !important;
	border: 3px solid rgba(255, 255, 255, .12) !important;
	border-top-color: var(--t-acc, #ff7d21) !important;
	border-radius: 50% !important;
	background: none !important;
	box-shadow: none !important;
	font-size: 0 !important;
	animation: hll-dl-spin .75s linear infinite;
}

html body .um-profile-body.activity .um-activity-load[style*="display: none"],
html body .um-profile-body.activity .um-activity-load[style*="display:none"] {
	display: none !important;
}

@keyframes hll-dl-spin {
	to { transform: rotate(360deg); }
}

/* 2.17.0 — THE REAL PICKER, dressed as the button it should have been.
   .ajax-upload-dragdrop is UM's live widget: it holds the camera glyph and the
   <input type="file"> that actually uploads. It arrived unstyled, so it read as
   a bare icon beside our decorated one. It now wears the same 42px control the
   dead anchor wore, and the file input is stretched over the whole box — the JS
   sizes it 26x30 inline, which left most of the button unclickable. */
html body .um-profile-body.activity .um-activity-insert .ajax-upload-dragdrop {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, .03) !important;
	vertical-align: middle !important;
	overflow: hidden !important;
}

html body .um-profile-body.activity .um-activity-insert .ajax-upload-dragdrop:hover {
	background: rgba(255, 125, 33, .1) !important;
	border-color: rgba(255, 125, 33, .4) !important;
}

html body .um-profile-body.activity .um-activity-insert .ajax-upload-dragdrop .upload {
	position: static !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	cursor: pointer !important;
}

html body .um-profile-body.activity .um-activity-insert .ajax-upload-dragdrop i.um-faicon-camera {
	color: var(--t-acc) !important;
	font-size: 18px !important;
	line-height: 1 !important;
}

html body .um-profile-body.activity .um-activity-insert .ajax-upload-dragdrop form {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body .um-profile-body.activity .um-activity-insert .ajax-upload-dragdrop input[type="file"] {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	opacity: 0 !important;
	cursor: pointer !important;
	z-index: 100 !important;
}

/* An empty preview slot still renders its <img src=""> as a broken-image glyph. */
html body .um-profile-body.activity .um-activity-preview-spn img[src=""],
html body .um-profile-body.activity .um-activity-preview-spn img:not([src]) {
	display: none !important;
}

/* ============================================================================
   2.12.2 — the shared-post card, styled for what it actually is.

   Pulled off the server rather than assumed this time. um-social-activity writes
   the whole card into the activity's own content as plain markup:

       <span class="post-meta"><a href="…">
         <span class="post-image"><img class="um-activity-featured-img"></span>
         <span class="post-title">…</span>
         <span class="post-excerpt">…</span>
       </a></span>

   No oEmbed, no iframe. $wp_embed->autoembed() only converts a BARE url on its
   own line, and every link here is already an anchor — which is why the filter I
   wrote for it could never fire, and why the card stayed white however hard the
   iframe was styled. inc/activity-card.php has been deleted.

   post-meta, post-title and post-excerpt are generic names the theme paints, so
   these are scoped to the activity tab and nothing else.
   ============================================================================ */

html body .um-profile-body.activity .post-meta {
	display: block !important;
	margin: 10px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--t-fg) !important;
	font-size: inherit !important;
}

html body .um-profile-body.activity .post-meta > a {
	display: grid !important;
	grid-template-columns: 122px minmax(0, 1fr) !important;
	grid-template-areas: "img title" "img exc" !important;
	align-content: center !important;
	column-gap: 14px !important;
	row-gap: 3px !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 13px !important;
	background: var(--t-card-2) !important;
	overflow: hidden !important;
	text-decoration: none !important;
	transition: border-color .15s, background-color .15s;
}

html body .um-profile-body.activity .post-meta > a:hover {
	border-color: rgba(255, 125, 33, .4) !important;
	background: #2e353d !important;
}

html body .um-profile-body.activity .post-image {
	grid-area: img;
	display: block !important;
	width: 122px !important;
	height: 100% !important;
	min-height: 104px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #23282e !important;
	line-height: 0 !important;
}

html body .um-profile-body.activity .post-image img,
html body .um-profile-body.activity img.um-activity-featured-img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	object-fit: cover !important;
}

html body .um-profile-body.activity .post-title {
	grid-area: title;
	display: block !important;
	padding: 13px 14px 0 0 !important;
	color: var(--t-fg) !important;
	font-size: 14.5px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	text-shadow: none !important;
}

html body .um-profile-body.activity .post-excerpt {
	grid-area: exc;
	display: -webkit-box !important;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	/* without !important the theme's own overflow wins and the clamp does
	   nothing but hide the ellipsis — the fourth line ran past the card edge. */
	overflow: hidden !important;
	padding: 0 14px 13px 0 !important;
	color: var(--t-mut) !important;
	font-size: 12.5px !important;
	line-height: 1.5 !important;
	text-shadow: none !important;
}

@media (max-width: 460px) {
	html body .um-profile-body.activity .post-meta > a {
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-areas: "img" "title" "exc" !important;
	}

	html body .um-profile-body.activity .post-image {
		width: auto !important;
		height: 150px !important;
	}

	html body .um-profile-body.activity .post-title { padding: 12px 14px 0 !important; }
	html body .um-profile-body.activity .post-excerpt { padding: 0 14px 12px !important; }
}

/* The second "camera" was never a second tool — the served markup has exactly one
   a.um-activity-insert-photo and nothing hooks the insert actions. It is the
   preview slot's own <img src="">, which a browser draws as a picture glyph.
   Hidden at the slot, so no placeholder can survive it. */
html body .um-profile-body.activity .um-activity-preview:has(img[src=""]),
html body .um-profile-body.activity .um-activity-preview:has(img:not([src])) {
	display: none !important;
}

/* ============================================================================
   2.12.3 — the conversation, against the CSS editor's own message rules.

   Pulled from the server: hll-current-css.css carries 54 rules aimed at
   um-message / um-popup, layered from several past attempts and contradicting
   each other. The two that were beating this file:

       .um-message-item { background: rgba(255,255,255,.08);
                          backdrop-filter: blur(8px);
                          -webkit-backdrop-filter: blur(8px);
                          box-shadow: 0 4px 12px rgba(0,0,0,.12); }
       .um-message-body { padding: 12px; background: rgba(255,255,255,.03); }

   A BACKDROP-FILTER STILL PAINTS WITH A TRANSPARENT BACKGROUND. It frosts what
   is behind the box, so clearing `background` changes nothing — the panel beside
   every bubble was the row's own blur, plus its shadow. I had cleared
   `backdrop-filter` but not `-webkit-backdrop-filter`, and never the shadow.

   And the scroll: .um-message-body carries data-simplebar, so SimpleBar moves
   the messages into .simplebar-content-wrapper and scrolls THAT. A max-height on
   the element SimpleBar replaced was never going to hold the thread.
   ============================================================================ */

/* ------------------------------------------------- the row is not a bubble --- */

html body .um-message-item,
html body .um-popup .um-message-item,
html body .um-message-body .um-message-item,
html body .um-message-item.left_m,
html body .um-message-item.right_m,
html body .um-popup .um-message-item.left_m,
html body .um-popup .um-message-item.right_m {
	background: none !important;
	background-color: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 0 12px !important;
	max-width: 100% !important;
	align-self: auto !important;
	transform: none !important;
}

/* Their tails, in four different colours across four attempts. */
html body .um-message-item::before,
html body .um-message-item::after,
html body .um-popup .um-message-item::before,
html body .um-popup .um-message-item::after,
html body .um-message-item.left_m::before,
html body .um-message-item.left_m::after,
html body .um-message-item.right_m::before,
html body .um-message-item.right_m::after {
	content: none !important;
	display: none !important;
	border: 0 !important;
}

/* The bubble is the data block, and it is the only thing that paints. */
html body .um-message-body .um-message-item .um-message-item-data,
html body .um-popup .um-message-item .um-message-item-data {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: none !important;
}

html body .um-message-item .um-message-item-content,
html body .um-popup .um-message-item .um-message-item-content {
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	background-color: transparent !important;
	border-radius: 0 !important;
	font-size: 14.5px !important;
	line-height: 1.5 !important;
}

/* ------------------------------------------------------ the thread scrolls --- */

/* The popup gets a height budget of its own, so the thread can never run down
   the page: header and composer are fixed, the messages take what is left. */
html body .um-popup {
	display: flex !important;
	flex-direction: column !important;
	max-height: min(86vh, 760px) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	background: #2a3037 !important;
	overflow: hidden !important;
}

html body .um-popup .um-message-header,
html body .um-popup .um-message-footer {
	flex: 0 0 auto !important;
}

html body .um-message-body,
html body .um-popup .um-message-body {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	max-height: 62vh !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	padding: 14px !important;
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* SimpleBar is the real scroller once it has initialised. */
html body .um-message-body .simplebar-wrapper,
html body .um-message-body .simplebar-mask,
html body .um-message-body .simplebar-offset {
	max-height: 100% !important;
}

html body .um-message-body .simplebar-content-wrapper,
html body .um-popup .simplebar-content-wrapper {
	max-height: 62vh !important;
	overflow-y: auto !important;
	padding: 0 !important;
	overscroll-behavior: contain;
}

html body .um-message-body .simplebar-content {
	padding: 0 !important;
}

html body .um-message-body .simplebar-scrollbar::before {
	background: rgba(255, 255, 255, .28) !important;
}

/* ---------------------------------------------------------- the composer --- */

/* Their rule gives the box a 120px minimum and black text on a light glass
   panel, which is most of a screen gone before a word is typed. */
html body .um-message-textarea textarea.um_message_text,
html body .um-message-footer .um-message-textarea textarea.um_message_text,
html body div.um div.um-form .um-message-textarea textarea.um_message_text {
	min-height: 46px !important;
	max-height: 120px !important;
	padding: 12px 14px !important;
	border: 1px solid rgba(255, 255, 255, .12) !important;
	border-radius: 12px !important;
	background: #23282e !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	color: #eef2f7 !important;
	font-size: 14.5px !important;
	font-style: normal !important;
}

html body .um-message-textarea textarea.um_message_text::placeholder {
	color: #98a4b2 !important;
	font-style: normal !important;
}

html body .um-message-textarea textarea.um_message_text:focus {
	border: 1px solid rgba(255, 125, 33, .6) !important;
	box-shadow: none !important;
	background: #23282e !important;
}

/* Their .um-popup .um-button is the add-on green. */
html body .um-popup .um-button {
	background: #ff7d21 !important;
	color: #23282e !important;
	border-radius: 10px !important;
}

html body .um-popup .um-button:hover {
	background: #ff9147 !important;
	transform: none !important;
}

html body .um-message-emoji .um-message-emo {
	color: #eef2f7 !important;
}

/* ============================================================================
   2.12.4 — the chat window, sized for the device it is on.

   The popup had no width, position or margin from this file at all — it was
   taking whatever UM's modal script computed, which on a phone is full-bleed. So
   the bubbles ran to the screen edge with no gutter, and the panel was wider
   than the thread needed. (The :has(.um-message-header) guard this section
   originally carried was removed in 2.12.5 — see there.)
   ============================================================================ */

html body .um-popup {
	position: fixed !important;
	left: 50% !important;
	top: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%) !important;
	width: min(460px, calc(100vw - 24px)) !important;
	max-width: calc(100vw - 24px) !important;
	margin: 0 !important;
	max-height: min(88vh, 780px) !important;
	display: flex !important;
	flex-direction: column !important;
	border-radius: 18px !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

/* ------------------------------------------------------- the bubble size --- */

/* The bubble was as wide as its widest child, and that child was the timestamp:
   "January 27 at 10:05 am" on its own line is wider than most messages, so a
   two-word reply still produced a full-width block. The stamp is supporting
   detail — it gets a supporting size, and the bubble gets a hard ceiling in
   pixels as well as a percentage so it cannot sprawl on a wide screen. */
html body .um-message-body .um-message-item .um-message-item-data,
html body .um-popup .um-message-item .um-message-item-data {
	max-width: min(76%, 360px) !important;
	box-sizing: border-box !important;
	overflow-wrap: anywhere !important;
	word-break: normal !important;
}

html body .um-message-body .um-message-item .um-message-item-metadata,
html body .um-popup .um-message-item .um-message-item-metadata {
	margin-top: 4px !important;
	font-size: 10.5px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: .01em !important;
	opacity: .92;
}

/* Nothing in the thread may reach past the panel's own gutter. */
html body .um-message-body .um-message-ajax,
html body .um-popup .um-message-ajax {
	margin: 0 !important;
	padding: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

html body .um-message-body .um-message-item,
html body .um-popup .um-message-item {
	box-sizing: border-box !important;
	max-width: 100% !important;
}

html body .um-message-body .um-message-item .um-message-item-content {
	overflow-wrap: anywhere !important;
}

/* An emoji in a message is a character, not an illustration. */
html body .um-message-item-content img.emoji {
	width: 1.15em !important;
	height: 1.15em !important;
	max-height: 1.15em !important;
	vertical-align: -.2em !important;
	margin: 0 1px !important;
}

/* ------------------------------------------------------ the thread scrolls --- */

html body .um-popup .um-message-body {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow-y: auto !important;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

html body .um-popup .um-message-body::-webkit-scrollbar {
	width: 6px;
}

html body .um-popup .um-message-body::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: rgba(255, 255, 255, .2);
}

html body .um-popup .simplebar-content-wrapper {
	max-height: none !important;
	height: 100% !important;
}

/* The composer keeps its place at the bottom whatever the thread does. */
html body .um-popup .um-message-footer {
	flex: 0 0 auto !important;
	box-sizing: border-box !important;
}

html body .um-popup .um-message-header {
	flex: 0 0 auto !important;
	box-sizing: border-box !important;
}

/* On a short screen the composer is the thing worth protecting. */
@media (max-height: 620px) {
	html body .um-popup {
		max-height: calc(100vh - 16px) !important;
	}

	html body .um-popup .um-message-textarea textarea.um_message_text {
		min-height: 40px !important;
		max-height: 72px !important;
	}
}

/* ============================================================================
   2.12.5 — the chat window, without :has().

   2.12.4 scoped every popup rule with :has(.um-message-header), to keep the
   photo lightbox out of it. Checked on the server: the lightbox is
   .um-user-photos-modal, NOT .um-popup — so the guard protected nothing, and it
   was the one thing in those selectors that could stop the whole block applying.
   Gone. .um-popup belongs to um-messaging here, and is addressed plainly.

   Belt as well as braces: the bubble is now capped against the VIEWPORT too, so
   even if UM's modal script sizes the panel wider than the screen, no message
   can be pushed off the right edge.
   ============================================================================ */

html body .um-popup {
	position: fixed !important;
	left: 50% !important;
	top: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%) !important;
	width: min(440px, calc(100vw - 24px)) !important;
	min-width: 0 !important;
	max-width: calc(100vw - 24px) !important;
	margin: 0 !important;
	max-height: min(88vh, 760px) !important;
	display: flex !important;
	flex-direction: column !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	z-index: 10000 !important;
}

html body .um-popup * {
	box-sizing: border-box !important;
}

html body .um-message-body,
html body .um-popup .um-message-body {
	overflow-x: hidden !important;
	max-width: 100% !important;
}

/* Three ceilings, and the smallest wins: a share of the panel, a hard pixel cap
   so it never sprawls on a desktop, and a viewport cap so a mis-sized panel can
   still never push text off the screen. */
html body .um-message-body .um-message-item .um-message-item-data,
html body .um-popup .um-message-item .um-message-item-data {
	max-width: min(74%, 340px, calc(100vw - 96px)) !important;
}

/* ------------------------------------------------------- a smaller composer --- */

/* The send control was a full-height slab with a long label. It is one action in
   a row of three, so it reads as a compact pill instead. */
html body .um-message-footer,
html body .um-popup .um-message-footer {
	padding: 10px !important;
}

html body .um-message-footer .um-message-buttons {
	gap: 8px !important;
	margin-top: 8px !important;
}

html body .um-message-footer a.um-message-send,
html body .um-message-footer a.um-message-send.disabled,
html body .um-popup a.um-message-send {
	gap: 7px !important;
	min-height: 38px !important;
	height: 38px !important;
	padding: 0 16px !important;
	border-radius: 10px !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	letter-spacing: .01em !important;
	white-space: nowrap !important;
}

html body .um-message-footer a.um-message-send i {
	font-size: 14px !important;
	margin: 0 !important;
}

html body .um-message-footer .um-message-emo {
	width: 38px !important;
	height: 38px !important;
	min-width: 0 !important;
	font-size: 17px !important;
	border-radius: 10px !important;
}

html body .um-message-footer .um-message-limit {
	font-size: 11.5px !important;
	font-weight: 700 !important;
}

html body .um-message-textarea textarea.um_message_text,
html body .um-message-footer .um-message-textarea textarea.um_message_text {
	min-height: 42px !important;
	max-height: 110px !important;
	padding: 11px 13px !important;
	font-size: 14px !important;
}

/* The header controls shrink to match. */
html body .um-message-header,
html body .um-popup .um-message-header {
	padding: 10px 12px !important;
}

html body .um-message-header .um-message-header-right a {
	width: 34px !important;
	height: 34px !important;
	border-radius: 9px !important;
}

html body .um-message-header .um-message-header-left img {
	width: 34px !important;
	height: 34px !important;
}

html body .um-message-header .um-message-header-left a {
	font-size: 14.5px !important;
}

/* ---------------------------------------------- the photo lightbox, correctly --- */

/* Named for what it actually is. The um-user-photos-* rules above were right;
   the container never was. */
html body .um-user-photos-modal {
	background: #2a3037 !important;
	border: 1px solid rgba(255, 255, 255, .1) !important;
	border-radius: 18px !important;
	color: #eef2f7 !important;
	box-sizing: border-box !important;
	max-width: calc(100vw - 24px) !important;
}

html body .um-user-photos-modal-head,
html body .um-user-photos-modal-title {
	background: #262c33 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
	color: #eef2f7 !important;
	text-shadow: none !important;
}

html body .um-user-photos-modal-body,
html body .um-user-photos-modal-content {
	background: transparent !important;
	color: #eef2f7 !important;
	max-width: 100% !important;
}

/* ============================================================================
   2.13.0 — the loading state, so the cleaner can take theirs.

   hll-current-css styles .um-popup.loading with a white translucent panel and a
   green spinner. Those rules are now in the cleaner's sights, so the state needs
   an owner here first — otherwise removing theirs would leave a bare box while a
   conversation opens.
   ============================================================================ */

html body .um-popup.loading {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 120px !important;
	min-width: 0 !important;
	height: 120px !important;
	max-height: 120px !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, .1) !important;
	border-radius: 16px !important;
	background: #2a3037 !important;
	box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8) !important;
}

html body .um-popup.loading::before {
	content: "";
	display: block;
	width: 34px;
	height: 34px;
	border: 3px solid rgba(255, 255, 255, .14);
	border-top-color: #ff7d21;
	border-radius: 50%;
	animation: hll-dl-spin .9s linear infinite;
}

@keyframes hll-dl-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	html body .um-popup.loading::before {
		animation-duration: 2.4s;
	}
}

/* Their overlay rule is one of the ones being removed. */
html body .um-popup-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: rgba(12, 14, 18, .72) !important;
	z-index: 9999 !important;
}

/* ============================================================================
   2.13.3 — THE DEPOSIT FORM, USING THE WIDTH IT HAS.

   Read off the server rather than guessed. EDD prints the amounts as a plain
   list, one <li> per option, each holding a <label> with its radio:

       <ul>
         <li><label><input type="radio" value="100" checked>KSh 100.00</label></li>
         …
         <li><label><input type="radio" value="custom"> Enter Amount</label>
             <input type="number" id="edd_wallet_custom_deposit"
                    style="display:none" step=".01" min="1"></li>
       </ul>

   A list stacks, so four short amounts ran down the left edge and left most of
   the card empty. They are a set of equal choices, which is a grid.

   The custom field's inline display:none is EDD's, toggled by its own script.
   It was showing as an empty box with nothing selecting it, so its visibility is
   now tied to the radio that owns it — one rule, no script, and the field still
   submits exactly as before.
   ============================================================================ */

/* Four options, so the column count is fixed rather than left to auto-fit —
   auto-fit produced five tracks for four tiles at 980px and left a gap on the
   right. Two across on a phone and four across from 720px both divide evenly. */
html body .um-profile-body.my-dashboard #edd_wallet_deposit_amount_wrapper ul {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

@media (min-width: 720px) {
	html body .um-profile-body.my-dashboard #edd_wallet_deposit_amount_wrapper ul {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

html body .um-profile-body.my-dashboard #edd_wallet_deposit_amount_wrapper li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* The custom option sits in the grid like the rest, and only claims the full
   row once it is chosen and its field needs the width. */
html body .um-profile-body.my-dashboard
	#edd_wallet_deposit_amount_wrapper li:has(input[value="custom"]:checked) {
	grid-column: 1 / -1 !important;
}

/* Each amount is a tile the whole of which is the target, not just the dot. */
html body .um-profile-body.my-dashboard .edd_wallet_deposit_form label {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 11px !important;
	width: 100% !important;
	min-height: 58px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 1px solid var(--t-line) !important;
	border-radius: 12px !important;
	background: rgba(255, 255, 255, .03) !important;
	color: var(--t-fg) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}

html body .um-profile-body.my-dashboard .edd_wallet_deposit_form label:hover {
	border-color: rgba(255, 255, 255, .2) !important;
	background: rgba(255, 255, 255, .055) !important;
}

html body .um-profile-body.my-dashboard .edd_wallet_deposit_form label:has(input:checked) {
	border-color: rgba(255, 125, 33, .55) !important;
	background: rgba(255, 125, 33, .1) !important;
}

/* The custom field appears only when its own option is chosen. */
html body .um-profile-body.my-dashboard #edd_wallet_custom_deposit {
	display: none !important;
	width: 100% !important;
	margin: 10px 0 0 !important;
	box-sizing: border-box !important;
}

html body .um-profile-body.my-dashboard
	li:has(input[value="custom"]:checked) #edd_wallet_custom_deposit {
	display: block !important;
}

/* The action gets the full width of the card on a phone, and its own size once
   there is room beside it. */
html body .um-profile-body.my-dashboard .edd_wallet_deposit_submit_wrapper {
	margin-top: 14px !important;
	padding-top: 14px !important;
	border-top: 1px solid var(--t-line-2) !important;
}

html body .um-profile-body.my-dashboard input.edd-submit,
html body .um-profile-body.my-dashboard .edd-submit.button {
	width: 100% !important;
	min-height: 50px !important;
	font-size: 15px !important;
}

@media (min-width: 560px) {
	html body .um-profile-body.my-dashboard input.edd-submit,
	html body .um-profile-body.my-dashboard .edd-submit.button {
		width: auto !important;
		min-width: 220px !important;
	}
}

/* The balance and its label sit as one block with air under them. */
html body .um-profile-body.my-dashboard .steamy-wallet-header {
	margin: 0 0 16px !important;
	padding: 0 0 16px !important;
	border-bottom: 1px solid var(--t-line-2) !important;
}

/* ============================================================================
   2.13.4 — the deposit tiles were landing on top of each other.

   A grid item cannot overlap another unless it has been taken OUT of the grid:
   position:absolute/fixed removes it from flow, and a transform or an explicit
   inset then shifts it over its neighbour. Neither comes from this file or from
   EDD — it is the CSS editor's stylesheet, which is not readable from here.

   So the list item and its label are pinned back into normal flow explicitly.
   This is defensive rather than targeted, which I would normally avoid, but
   every property reset here is one this layout sets itself anyway.
   ============================================================================ */

html body .um-profile-body.my-dashboard #edd_wallet_deposit_amount_wrapper {
	position: relative !important;
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	transform: none !important;
}

html body .um-profile-body.my-dashboard #edd_wallet_deposit_amount_wrapper ul,
html body .um-profile-body.my-dashboard .edd_wallet_deposit_form ul {
	position: relative !important;
	float: none !important;
	inset: auto !important;
	transform: none !important;
	width: auto !important;
	max-width: none !important;
}

html body .um-profile-body.my-dashboard #edd_wallet_deposit_amount_wrapper li,
html body .um-profile-body.my-dashboard .edd_wallet_deposit_form li {
	position: relative !important;
	display: block !important;
	float: none !important;
	clear: none !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	box-sizing: border-box !important;
}

html body .um-profile-body.my-dashboard #edd_wallet_deposit_amount_wrapper li::before,
html body .um-profile-body.my-dashboard #edd_wallet_deposit_amount_wrapper li::marker {
	content: none !important;
	display: none !important;
}

html body .um-profile-body.my-dashboard .edd_wallet_deposit_form label {
	position: relative !important;
	float: none !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	max-width: none !important;
	height: auto !important;
}

/* The radio is a control, not a decorated span: whatever the site does to
   inputs, this one keeps its own box inside the tile. */
html body .um-profile-body.my-dashboard .edd_wallet_deposit_form input[type="radio"] {
	position: relative !important;
	flex: none !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	appearance: auto !important;
	-webkit-appearance: radio !important;
	opacity: 1 !important;
	accent-color: var(--t-acc);
}