/* Profile Background — banner, lifted avatar, and the picker + edit modals.
   Dark theme + --ps-orange accent, matching profile-riftmana.css / the
   avatar-decoration modal. Loaded only on the [fast_profile] page. */

/* ══════════════════════════════════════════════════════════════════════
   HERO  — the banner is a background layer INSIDE the header, and the header
   content (avatar, name, stats) overlays it. The hero shape is ALWAYS applied
   on the fast profile (.rm-profile-hero); the banner shows a neutral default
   background until a domain colour is chosen, so nothing shifts when one is
   added or removed. A chosen domain paints a gradient via the `background`
   shorthand (inline, SSR or JS), which overrides the neutral default below.
   ══════════════════════════════════════════════════════════════════════ */
.rm-pbg-cover {
	position: absolute;
	inset: 0;
	z-index: 0;                     /* sits behind the header content */
	/* Neutral default hero background when no domain is chosen. A chosen domain
	   sets the `background` shorthand inline, overriding these — so the hero
	   SHAPE never changes; picking/clearing a colour only swaps the fill. */
	background-color: #15151c;
	background-image: linear-gradient(135deg, #262532 0%, #1a1922 55%, #131218 100%);
	border-radius: 16px;            /* soften the hero corners */
}
/* Readability scrim: darker on the left (where the content sits) and along the
   bottom, fading toward the top-right so the art still reads through. */
.rm-pbg-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: 16px;            /* match the banner's rounded corners */
	background:
		linear-gradient(90deg, rgba(8,8,11,.86) 0%, rgba(8,8,11,.48) 38%, rgba(8,8,11,.14) 72%, rgba(8,8,11,.06) 100%),
		linear-gradient(0deg, rgba(8,8,11,.72) 0%, rgba(8,8,11,0) 52%);
}
/* Soft shadow on the bio too (like the name) — keeps it legible now that colours
   reach further left across the banner. */
.rm-profile-hero .rm-profile-bio {
	text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
/* Ring guard: a soft dark disc behind the avatar (bottom-left on desktop), so a
   decoration ring always stays legible — even when its colour matches the domain
   background (e.g. a green Calm ring on a Calm banner). Only when a domain is set
   (data-bg non-empty); the neutral default is already dark enough. Sits ABOVE the
   scrim (z-index 1) to guarantee the darkening right where the ring sits. */
.rm-pbg-cover[data-bg]:not([data-bg=""])::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: 16px;
	background: radial-gradient(circle 150px at 92px calc(100% - 74px),
		rgba(6,6,9,.62) 0%, rgba(6,6,9,.34) 42%, transparent 66%);
}

/* Turn the header into a hero: fixed min-height, no bottom rule, content
   pinned to the bottom over the banner. */
.rm-profile-hero .rm-profile-header {
	position: relative;
	min-height: 240px;
	padding: 0;
	border-bottom: 0;
	/* No overflow:hidden — the banner layer is already exactly header-sized,
	   and clipping here would cut off the gear's dropdown menu. */
}
.rm-profile-hero .rm-profile-header-inner {
	position: relative;
	z-index: 1;                     /* above the .rm-pbg-cover layer */
	min-height: 240px;
	box-sizing: border-box;
	padding: 26px 30px;
	align-items: flex-end;          /* bottom-align avatar + info over the art */
}
/* Gear/actions pinned to the top-right of the content column. */
.rm-profile-hero .rm-profile-actions-wrapper {
	position: absolute;
	top: 16px;
	right: 30px;
	z-index: 2;
	margin: 0;
}
/* Light ring around the avatar so it reads as cut into the banner. Yield to a
   decoration ring when one is present (that ring becomes the visible edge). */
.rm-profile-hero .rm-profile-avatar:not(:has(.rm-avatar-ring)) img {
	border: 3px solid rgba(255, 255, 255, .85);
}
.rm-profile-hero .rm-profile-avatar img {
	box-shadow: 0 6px 20px rgba(0, 0, 0, .55);
}
/* Soft shadow on the name for legibility over brighter art. */
.rm-profile-hero .rm-profile-name {
	text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
/* Desktop hero: raise the whole info block (username + bio + socials) up a bit,
   and give the username an EXTRA lift so there's a gap between it and the bio.
   Because the name row's shift is on top of the block's, the gap is preserved
   while everything moves up together. Both are disabled on mobile (below),
   where the header stacks and a shift would collide with the follow stats.
   Tune the two values. */
.rm-profile-hero .rm-profile-info {
	transform: translateY(-18px);
}
.rm-profile-hero .rm-profile-name-row {
	transform: translateY(-16px);
}
/* Let a long single-word username wrap instead of forcing horizontal overflow
   on narrow screens. */
.rm-fast-profile .rm-profile-name {
	overflow-wrap: anywhere;
}

@media (max-width: 768px) {
	.rm-profile-hero .rm-profile-actions-wrapper { top: 12px; right: 16px; }
	/* Drop the desktop username/info lift from 768px down — the header starts
	   wrapping here, so the transform would collide with the stats/gear. */
	.rm-profile-hero .rm-profile-info,
	.rm-profile-hero .rm-profile-name-row { transform: none; }
}
@media (max-width: 600px) {
	.rm-profile-hero .rm-profile-header,
	.rm-profile-hero .rm-profile-header-inner { min-height: 200px; }
	.rm-profile-hero .rm-profile-header-inner {
		padding: 22px 18px;
		align-items: center;   /* center the stacked column */
		gap: 10px;
	}
	.rm-profile-hero .rm-profile-info { margin-top: 4px; gap: 10px; }
	/* Uniform vertical darken so centered text stays legible over bright art —
	   the desktop scrim is weighted to the left, where nothing sits on mobile. */
	.rm-pbg-cover::after {
		background: linear-gradient(180deg, rgba(8, 8, 11, .5) 0%, rgba(8, 8, 11, .32) 38%, rgba(8, 8, 11, .66) 100%);
	}
	/* Avatar centers here, so the bottom-left ring guard would land in empty
	   space — drop it; the vertical scrim above keeps the ring legible. */
	.rm-pbg-cover[data-bg]:not([data-bg=""])::before { background: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Settings (gear) dropdown — grouped style + click-to-open.
   Scoped to .rm-fast-profile so the auth pages / old UM template are untouched.
   ══════════════════════════════════════════════════════════════════════ */
/* Glass panel */
.rm-fast-profile .rm-settings-menu {
	min-width: 250px;
	padding: 7px;
	/* Near-opaque solid panel — do NOT use backdrop-filter/blur here: it makes
	   this a containing block for position:fixed descendants, which breaks the
	   currency dropdown's fixed-positioned list (positioned from viewport coords)
	   so its panel opens off-screen. */
	background: rgba(20, 20, 27, .98);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
	overflow: visible;
}
/* Click-to-open state (set by JS), layered on top of the base hover/focus-
   within open — so the menu is reachable on touch, where hover never fires. */
.rm-settings-menu.is-open { display: block; }

/* Groups + labels + separators */
.rm-settings-group { display: flex; flex-direction: column; gap: 2px; }
.rm-settings-group-label {
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: rgba(255, 255, 255, .4);
	padding: 8px 10px 4px;
}
.rm-settings-sep { height: 1px; background: rgba(255, 255, 255, .08); margin: 6px 8px; }

/* Menu items (links + button) with icon chips + orange hover */
.rm-fast-profile .rm-settings-menu .rm-menu-item {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 9px;
	background: none;
	color: #e9e9ec;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.rm-mi-ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, .06);
	color: #cfcfd4;
	transition: background .15s ease, color .15s ease;
}
.rm-fast-profile .rm-mi-ic svg { width: 15px; height: 15px; opacity: 1; }
.rm-fast-profile .rm-settings-menu .rm-menu-item:hover {
	background: rgba(255, 166, 0, .13);
	color: #fff;
}
.rm-fast-profile .rm-settings-menu .rm-menu-item:hover .rm-mi-ic {
	background: var(--ps-orange);
	color: #191512;
}
.rm-fast-profile .rm-settings-menu .rm-menu-item:focus-visible {
	outline: 2px solid var(--ps-orange);
	outline-offset: -2px;
}

/* Preference rows — drop the old bordered sections; clean spacing */
.rm-fast-profile .rm-settings-menu .rm-settings-menu-section {
	border: 0;
	padding: 6px 10px;
}
.rm-fast-profile .rm-settings-menu .rm-settings-menu-label {
	font-size: 11px;
	text-transform: none;
	letter-spacing: 0;
	color: rgba(255, 255, 255, .55);
	font-weight: 600;
	margin-bottom: 7px;
}
/* Pricing source → segmented pill group (active option highlighted) */
.rm-fast-profile .rm-settings-menu-section .global-market-buttons {
	display: flex;
	gap: 4px;
	padding: 3px;
	background: rgba(0, 0, 0, .28);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 9px;
}
.rm-fast-profile .rm-settings-menu-section .global-market-btn {
	flex: 1;
	padding: 7px 8px;
	border: 0;
	border-radius: 6px;
	background: none;
	cursor: pointer;
	transition: background .15s ease;
}
.rm-fast-profile .rm-settings-menu-section .global-market-btn:hover {
	background: rgba(255, 255, 255, .06);
}
.rm-fast-profile .rm-settings-menu-section .global-market-btn.active {
	background: rgba(255, 255, 255, .14);
}
.rm-fast-profile .rm-settings-menu-section .global-market-logo {
	height: 15px;
	display: block;
	margin: 0 auto;
}
/* Currency dropdown trigger — fill the panel width */
.rm-fast-profile .rm-settings-menu-section .global-currency-trigger {
	width: 100%;
	justify-content: space-between;
}

/* Gear button keyboard focus ring */
.rm-fast-profile .rm-settings-gear:focus-visible {
	outline: 2px solid var(--ps-orange);
	outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   MODAL SHELL  (.rm-pm-*) — shared by the background picker + edit popup.
   Mirrors the avatar-decoration modal so both feel like one system.
   ══════════════════════════════════════════════════════════════════════ */
.rm-pm-modal[hidden] { display: none; }
.rm-pm-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.rm-pm-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .65);
	animation: rm-pm-fade .15s ease;
}
.rm-pm-box {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #1a1a1a;
	color: #e0e0e0;
	border: 1px solid #2a2a2a;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
	padding: 28px;
	animation: rm-pm-pop .12s cubic-bezier(.2, .8, .2, 1);
}
.rm-pm-box--edit { max-width: 600px; padding: 0; }

@keyframes rm-pm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rm-pm-pop {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.rm-pm-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	background: transparent;
	border: 0;
	color: #888;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	border-radius: 6px;
	z-index: 3;
	transition: background .15s ease, color .15s ease;
}
.rm-pm-close:hover { background: #2a2a2a; color: #fff; }

.rm-pm-head { margin-bottom: 20px; }
.rm-pm-head h2 { margin: 0 0 4px; font-size: 18px; color: #fff; font-weight: 700; }
.rm-pm-sub {
	margin: 0;
	color: #888;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.rm-pm-foot {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding-top: 18px;
	margin-top: 4px;
	border-top: 1px solid #2a2a2a;
}
.rm-pm-btn {
	padding: 9px 18px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rm-pm-btn-primary { background: var(--ps-orange); color: #1a1a1a; border-color: var(--ps-orange); }
.rm-pm-btn-primary:hover { background: var(--ps-orange-2); border-color: var(--ps-orange-2); }
.rm-pm-btn-primary:disabled { opacity: .6; cursor: wait; }
.rm-pm-btn-ghost { background: transparent; color: #ccc; border-color: #3a3a3a; }
.rm-pm-btn-ghost:hover { background: #2a2a2a; color: #fff; border-color: #555; }

/* ── Background picker — domain colour chips ─────────────────────────────
   Two rows (primary + optional blend), each a wrap of pill chips carrying the
   domain colour in --dc (set inline per chip in the PHP). */
.rm-bg-domains { margin-bottom: 18px; }
.rm-bg-domains + .rm-bg-domains {
	margin-top: 2px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .07);
}
.rm-bg-domains-label {
	display: block;
	margin-bottom: 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .72);
}
.rm-bg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.rm-bg-chip {
	--dc: #6b6b78;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px 8px 11px;
	border: 1.5px solid #33333c;
	border-radius: 999px;
	background: #202027;
	color: #d9d9df;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.rm-bg-chip:hover { transform: translateY(-1px); border-color: var(--dc); }
.rm-bg-chip:focus-visible { outline: 2px solid var(--ps-orange); outline-offset: 2px; }
.rm-bg-chip-dot {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--dc);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .14), 0 0 9px -1px var(--dc);
	flex-shrink: 0;
}
.rm-bg-chip.is-selected {
	border-color: var(--dc);
	background: color-mix(in srgb, var(--dc) 22%, #1c1c22);
	box-shadow: 0 0 0 1px var(--dc) inset;
	color: #fff;
}
/* "None" chip: hollow, slashed dot; neutral (grey) selection. */
.rm-bg-chip-none { --dc: #6b6b78; }
.rm-bg-chip-none .rm-bg-chip-dot {
	position: relative;
	overflow: hidden;
	background: transparent;
	box-shadow: inset 0 0 0 1.5px #6b6b78;
}
.rm-bg-chip-none .rm-bg-chip-dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -2px;
	right: -2px;
	height: 1.5px;
	background: #8a8a94;
	transform: rotate(-45deg);
}
.rm-bg-chip-none.is-selected {
	border-color: #7a7a86;
	background: rgba(255, 255, 255, .06);
	box-shadow: 0 0 0 1px #6b6b78 inset;
}

/* Non-subscriber "try before you buy": the 2nd-colour row shows for everyone so the
   blend can be previewed live; this tag + note explain it only persists with a
   Recruit/Minion subscription. */
.rm-bg-preview-tag {
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ps-orange);
	border: 1px solid rgba(255, 166, 0, .5);
	border-radius: 4px;
	padding: 1px 5px;
	margin-left: 6px;
	vertical-align: middle;
}
.rm-bg-preview-note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: #9a9aa2;
}
.rm-bg-preview-note svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--ps-orange); }
.rm-bg-preview-note a { color: var(--ps-orange); font-weight: 600; text-decoration: none; }
.rm-bg-preview-note a:hover { text-decoration: underline; }

/* ── Edit-profile form inside the modal ─────────────────────────────────
   Strip the form's own centered-card chrome so it sits flush in the modal
   box (the modal already provides the card). The form markup + its secure
   save handler are otherwise untouched. */
.rm-pm-box--edit .rm-fast-edit {
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}
.rm-pm-box--edit .rm-fast-edit h2 { margin-top: 0; }

/* Sticky header + footer: the title and Save/Cancel stay put while the body
   scrolls. The box (.rm-pm-box) is the scroll container, so sticky anchors to
   it. Only in the modal — the ?edit=1 page keeps normal flow. */
.rm-pm-box--edit .rm-edit-head {
	position: sticky;
	top: 0;
	z-index: 2;
	margin: 0;
	padding: 22px 26px 16px;
	background: #1a1a1a;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.07 );
}
.rm-pm-box--edit .rm-edit-error { margin: 14px 26px 0; }
.rm-pm-box--edit .rm-edit-body { padding: 4px 26px 8px; }
.rm-pm-box--edit .rm-fast-edit-actions {
	position: sticky;
	bottom: 0;
	z-index: 2;
	margin-top: 0;
	padding: 15px 26px;
	background: #1a1a1a;
	border-top: 1px solid rgba( 255, 255, 255, 0.07 );
}

/* ── Motion / a11y ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.rm-pm-backdrop, .rm-pm-box { animation: none; }
	.rm-bg-chip { transition: none; }
}