/**
 * Resolve — the application shell and the authentication screens.
 *
 * Two surfaces, one stylesheet, because they are the same decision: what a
 * person sees when they are inside the product rather than being sold it.
 *
 * RULES THIS FILE KEEPS
 * ---------------------
 * 1. Logical properties only. No `left`, `right`, `margin-left`,
 *    `padding-right`, `text-align: left`. Arabic is a first-class locale here
 *    and the entire layout has to mirror without a second stylesheet.
 * 2. Every colour, size and space comes from resolve-tokens.css. A literal hex
 *    value in this file is a fifth copy of the palette waiting to drift.
 * 3. No layout depends on JavaScript. The account menu is a <details>; the
 *    sidebar becomes a wrapping row at narrow widths through CSS alone.
 * 4. No horizontal overflow at 1920, 1366, 768 or 390. The grid columns are
 *    minmax(0, 1fr) rather than 1fr for exactly this reason: a bare 1fr track
 *    has an automatic minimum size of min-content, so one wide table inside a
 *    module pushes the whole page sideways.
 */

/* ============================================================
 * 1. Document
 * ============================================================ */

.resolve-shell-standalone,
.resolve-login-standalone {
	margin: 0;
	background: var(--r-ground);
	color: var(--r-ink);
	font-family: var(--r-sans);
	font-size: var(--r-type-body);
	line-height: var(--r-type-body-lh);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.resolve-shell-standalone *,
.resolve-shell-standalone *::before,
.resolve-shell-standalone *::after,
.resolve-login-standalone *,
.resolve-login-standalone *::before,
.resolve-login-standalone *::after {
	box-sizing: border-box;
}

.resolve-shell-standalone img,
.resolve-login-standalone img {
	max-inline-size: 100%;
	block-size: auto;
}

/*
 * The skip link is the FIRST thing in the document and the first tab stop.
 *
 * It was not. The identity chip was emitted on wp_body_open ahead of
 * everything else, so on every platform page the first key a keyboard user
 * pressed opened an account menu instead of skipping the navigation.
 */
.rs-skip {
	position: absolute;
	inset-inline-start: -9999px;
	inset-block-start: 0;
	z-index: 100;
	padding: var(--r-space-3) var(--r-space-5);
	background: var(--r-ink);
	color: var(--r-paper);
	font-size: var(--r-type-support);
	text-decoration: none;
}

.rs-skip:focus {
	inset-inline-start: 0;
}

.rs-shell {
	display: flex;
	flex-direction: column;
	min-block-size: 100vh;
}

/* ============================================================
 * 2. Header
 * ============================================================ */

.rs-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: var(--r-space-4);
	min-block-size: var(--r-shell-header);
	padding-block: var(--r-space-2);
	padding-inline: var(--r-space-5);
	background: var(--r-ink);
	color: var(--r-paper);
}

.rs-brand {
	display: flex;
	align-items: center;
	gap: var(--r-space-3);
	color: inherit;
	text-decoration: none;
	min-inline-size: 0;
}

.rs-brand__parent {
	font-size: var(--r-type-label);
	line-height: var(--r-type-label-lh);
	letter-spacing: var(--r-type-label-tracking);
	text-transform: uppercase;
	color: var(--r-paper);
	opacity: 0.72;
	padding-inline-end: var(--r-space-3);
	border-inline-end: 1px solid rgba(255, 255, 255, 0.24);
	white-space: nowrap;
}

.rs-brand__stack {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

.rs-brand__name {
	font-size: 1.3125rem;
	line-height: 1.15;
	white-space: nowrap;
}

/* 1.16.0 — the tagline under the lockup keeps its own case and tracking. */
.rs-brand__descriptor.hk-tagline {
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 0.75rem;
	opacity: 0.86;
}

/* 1.16.0 — the footer identity block. */
.rs-footer__brand {
	max-inline-size: 1180px;
	margin-block-end: var(--r-space-4);
}

.rs-brand__descriptor {
	font-size: var(--r-type-label);
	line-height: var(--r-type-label-lh);
	letter-spacing: var(--r-type-label-tracking);
	text-transform: uppercase;
	opacity: 0.62;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rs-brand:focus-visible,
.rs-nav__link:focus-visible,
.rs-account__trigger:focus-visible,
.resolve-crumbs__link:focus-visible,
.rs-footer__link:focus-visible {
	outline: 2px solid var(--r-accent-soft);
	outline-offset: 2px;
}

/* ------------------------------------------------------------
 * Account menu — identity, in the header, in the flow.
 *
 * It used to be position: fixed in the bottom inline-end corner of the
 * viewport on every platform page, where it covered a card's "VIEW
 * OPPORTUNITY" at 1440, a table's row action at 768 and the "PENDING
 * VERIFICATION" status at 390. Nothing here is positioned over content: the
 * chip is a flex item, and only the menu it opens is absolute.
 * ------------------------------------------------------------ */

.rs-account {
	position: relative;
	margin-inline-start: auto;
	min-inline-size: 0;
}

.rs-account__trigger {
	display: flex;
	align-items: center;
	gap: var(--r-space-2);
	padding: var(--r-space-2);
	padding-inline-end: var(--r-space-3);
	border-radius: var(--r-radius);
	cursor: pointer;
	list-style: none;
	min-inline-size: 0;
}

.rs-account__trigger::-webkit-details-marker { display: none; }
.rs-account__trigger::marker { content: ""; }

.rs-account__trigger:hover {
	background: rgba(255, 255, 255, 0.08);
}

.rs-account__avatar {
	display: grid;
	place-items: center;
	inline-size: 30px;
	block-size: 30px;
	border-radius: 50%;
	background: var(--r-accent-2);
	color: var(--r-paper);
	font-size: var(--r-type-support);
	font-weight: 600;
	flex: 0 0 auto;
}

/* When the account avatar is a personal photo (an <img> carrying the class),
 * crop it to the circle rather than letting the 44px intrinsic size distort it. */
img.rs-account__avatar { object-fit: cover; }

.rs-account__who {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	text-align: start;
}

.rs-account__name {
	font-size: var(--r-type-support);
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-inline-size: 22ch;
}

.rs-account__sub {
	font-size: var(--r-type-label);
	line-height: var(--r-type-label-lh);
	letter-spacing: var(--r-type-label-tracking);
	text-transform: uppercase;
	opacity: 0.62;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-inline-size: 22ch;
}

.rs-account__caret {
	font-size: 10px;
	opacity: 0.7;
}

.rs-account__menu {
	position: absolute;
	inset-block-start: calc(100% + var(--r-space-2));
	inset-inline-end: 0;
	z-index: 40;
	inline-size: max-content;
	min-inline-size: 232px;
	max-inline-size: min(320px, calc(100vw - var(--r-space-6)));
	padding: var(--r-space-3);
	background: var(--r-paper);
	color: var(--r-ink);
	border: 1px solid var(--r-line);
	border-radius: var(--r-radius);
	box-shadow: var(--r-shadow-raised);
}

.rs-account__signedin,
.rs-account__company {
	margin: 0 0 var(--r-space-2);
	font-size: var(--r-type-support);
	line-height: var(--r-type-support-lh);
	color: var(--r-ink-3);
	overflow-wrap: anywhere;
}

.rs-account__companylabel {
	display: block;
	font-size: var(--r-type-label);
	letter-spacing: var(--r-type-label-tracking);
	text-transform: uppercase;
	color: var(--r-ink-4);
}

.rs-account__company {
	padding-block-start: var(--r-space-2);
	border-block-start: 1px solid var(--r-line);
	color: var(--r-ink-2);
}

.rs-account__items {
	margin: 0 0 var(--r-space-2);
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--r-line);
	padding-block-start: var(--r-space-2);
}

.rs-account__link,
.rs-account__signout {
	display: block;
	padding: var(--r-space-2) var(--r-space-2);
	color: var(--r-ink-2);
	font-size: var(--r-type-support);
	text-decoration: none;
	border-radius: var(--r-radius);
}

.rs-account__link:hover,
.rs-account__link:focus,
.rs-account__signout:hover,
.rs-account__signout:focus {
	background: var(--r-ground);
	color: var(--r-ink);
}

.rs-account__signout {
	border-block-start: 1px solid var(--r-line);
	padding-block-start: var(--r-space-3);
	color: var(--r-danger);
	font-weight: 600;
}

/* ============================================================
 * 3. Body, sidebar, main
 * ============================================================ */

.rs-body {
	display: grid;
	/* minmax(0, 1fr) — see the note at the top of this file. */
	grid-template-columns: var(--r-shell-nav) minmax(0, 1fr);
	flex: 1 1 auto;
	/*
	 * stretch, not start. With `align-items: start` the sidebar was only as
	 * tall as its links, so on any page longer than the nav the white column
	 * stopped partway down and the page ground showed through beneath it — a
	 * seam that reads as a rendering fault rather than as a design.
	 */
	align-items: stretch;
}

.rs-nav {
	padding: var(--r-space-5) var(--r-space-4);
	background: var(--r-paper);
	border-inline-end: 1px solid var(--r-line);
}

/*
 * The LIST is what sticks, not the column.
 *
 * The column has to stretch to full height to carry its background (above);
 * a stretched grid item has no room to move, so `position: sticky` on it does
 * nothing. Sticking the list inside the stretched column gives both: a
 * full-height sidebar and navigation that stays in view on a long page.
 */
.rs-nav__list {
	position: sticky;
	inset-block-start: calc(var(--r-shell-header) + var(--r-space-4));
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rs-nav__link {
	display: block;
	padding: var(--r-space-2) var(--r-space-3);
	color: var(--r-ink-2);
	font-size: var(--r-type-support);
	line-height: var(--r-type-support-lh);
	text-decoration: none;
	border-radius: var(--r-radius);
	border-inline-start: 2px solid transparent;
}

.rs-nav__link:hover,
.rs-nav__link:focus {
	background: var(--r-ground);
	color: var(--r-ink);
}

.rs-nav__link.is-current {
	background: var(--r-accent-soft);
	border-inline-start-color: var(--r-accent);
	color: var(--r-accent);
	font-weight: 600;
}

.rs-main {
	min-inline-size: 0;
	padding-block: var(--r-space-5) var(--r-space-7);
	padding-inline: var(--r-space-5);
}

.rs-content,
.rs-crumbs,
.rs-pagehead {
	max-inline-size: 1180px;
}

/*
 * The breadcrumb's own rules are GONE — it is `.resolve-crumbs` from
 * resolve-components.css now (§7).
 *
 * The shell had a breadcrumb trail and the administration panel had none at
 * all, so half the product told a reader where they were and half did not, and
 * the half that did used a component only it could see. Both now render the
 * shared one; Admin\Panel\Ui::breadcrumbs() is the panel's entry point to the
 * same markup and the same stylesheet.
 *
 * `.rs-crumbs` survives on the wrapping <nav> for the width constraint above,
 * which is the shell's business and not the component's.
 */


.rs-pagehead {
	margin-block-end: var(--r-space-5);
	padding-block-end: var(--r-space-4);
	border-block-end: 1px solid var(--r-line);
}

.rs-pagetitle {
	margin: 0;
	font-family: var(--r-serif);
	font-size: var(--r-type-page);
	line-height: var(--r-type-page-lh);
	font-weight: 400;
	color: var(--r-ink);
}

.rs-content > .resolve-dash,
.rs-content > .resolve-account,
.rs-content > .resolve-marketplace {
	margin-block-start: 0;
}

/* ============================================================
 * 4. Footer
 * ============================================================ */

.rs-footer {
	padding-block: var(--r-space-5);
	padding-inline: var(--r-space-5);
	background: var(--r-paper);
	border-block-start: 1px solid var(--r-line);
	font-size: var(--r-type-support);
	line-height: var(--r-type-support-lh);
	color: var(--r-ink-3);
}

.rs-footer__legal {
	max-inline-size: 1180px;
	margin-block-end: var(--r-space-4);
}

.rs-footer__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r-space-2) var(--r-space-5);
	align-items: baseline;
	max-inline-size: 1180px;
}

.rs-footer__link {
	color: var(--r-accent);
}

.rs-footer__copy {
	color: var(--r-ink-4);
}

/* ============================================================
 * 5. Authentication screens
 * ============================================================ */

.rl-shell {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 100vh;
	padding: var(--r-space-5);
	background:
		linear-gradient(180deg, var(--r-ink) 0 42%, var(--r-ground) 42% 100%);
}

.rl-page {
	inline-size: 100%;
	max-inline-size: 460px;
}

.rl-brand {
	margin-block-end: var(--r-space-5);
	text-align: center;
	color: var(--r-paper);
}

.rl-brand__parent {
	margin: 0 0 var(--r-space-3);
	font-size: var(--r-type-label);
	line-height: var(--r-type-label-lh);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0.75;
}

.rl-brand__name {
	margin: 0;
	font-family: var(--r-serif);
	font-size: var(--r-type-page);
	line-height: var(--r-type-page-lh);
}

.rl-brand__descriptor {
	margin: var(--r-space-1) 0 0;
	font-size: var(--r-type-label);
	line-height: var(--r-type-label-lh);
	letter-spacing: var(--r-type-label-tracking);
	text-transform: uppercase;
	opacity: 0.62;
}

.rl-card {
	padding: var(--r-space-6) var(--r-space-5);
	background: var(--r-paper);
	border: 1px solid var(--r-line);
	border-radius: var(--r-radius-lg);
	box-shadow: var(--r-shadow-raised);
}

.rl-title {
	margin: 0 0 var(--r-space-2);
	font-family: var(--r-serif);
	font-size: var(--r-type-page);
	line-height: var(--r-type-page-lh);
	font-weight: 400;
}

.rl-lede {
	margin: 0 0 var(--r-space-5);
	font-size: var(--r-type-support);
	line-height: var(--r-type-support-lh);
	color: var(--r-ink-3);
}

.rl-form {
	margin: 0;
}

.rl-field {
	margin-block-end: var(--r-space-4);
}

.rl-label {
	display: block;
	margin-block-end: var(--r-space-2);
	font-size: var(--r-type-label);
	line-height: var(--r-type-label-lh);
	letter-spacing: var(--r-type-label-tracking);
	text-transform: uppercase;
	color: var(--r-ink-3);
	font-weight: 600;
}

.rl-input {
	inline-size: 100%;
	padding: var(--r-space-3);
	font-family: inherit;
	font-size: var(--r-type-body);
	line-height: 1.4;
	color: var(--r-ink);
	background: var(--r-paper);
	border: 1px solid var(--r-line-strong);
	border-radius: var(--r-radius);
}

.rl-input:focus {
	outline: none;
	border-color: var(--r-accent);
	box-shadow: 0 0 0 3px var(--r-accent-soft);
}

/*
 * :user-invalid, not :invalid.
 *
 * `:invalid` matches a required field that is simply still EMPTY, so the very
 * first paint of the sign-in screen outlined both boxes in red before anybody
 * had typed anything — the form telling the reader they had made a mistake by
 * arriving. :user-invalid only matches after the field has been interacted
 * with or the form submitted, which is when the message is actually true.
 */
.rl-input:user-invalid {
	border-color: var(--r-danger);
}

.rl-hint {
	margin: var(--r-space-2) 0 0;
	font-size: var(--r-type-support);
	line-height: var(--r-type-support-lh);
	color: var(--r-ink-4);
}

.rl-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r-space-3);
	align-items: center;
	justify-content: space-between;
	margin-block-end: var(--r-space-5);
}

.rl-check {
	display: flex;
	align-items: center;
	gap: var(--r-space-2);
	font-size: var(--r-type-support);
	color: var(--r-ink-2);
	cursor: pointer;
}

.rl-link {
	color: var(--r-accent);
	font-size: var(--r-type-support);
}

.rl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--r-space-2);
	padding: var(--r-space-3) var(--r-space-5);
	font-family: inherit;
	font-size: var(--r-type-support);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	border: 1px solid transparent;
	border-radius: var(--r-radius);
	cursor: pointer;
	text-decoration: none;
}

.rl-btn--primary {
	background: var(--r-accent);
	color: var(--r-accent-ink);
}

.rl-btn--primary:hover {
	background: var(--r-accent-2);
}

.rl-btn--ghost {
	background: transparent;
	color: var(--r-accent);
	border-color: var(--r-line-strong);
}

.rl-btn--block {
	inline-size: 100%;
}

.rl-btn:focus-visible {
	outline: 2px solid var(--r-ink);
	outline-offset: 2px;
}

/* The loading state (§8). aria-disabled, never disabled — see templates/login.php. */
.rl-btn.is-busy,
.rl-btn[aria-disabled="true"] {
	opacity: 0.72;
	cursor: progress;
}

.rl-status:empty {
	display: none;
}

.rl-status {
	margin: var(--r-space-3) 0 0;
	font-size: var(--r-type-support);
	color: var(--r-ink-3);
	text-align: center;
}

.rl-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r-space-3);
	margin: var(--r-space-5) 0 0;
}

.rl-alt {
	margin: var(--r-space-5) 0 0;
	padding-block-start: var(--r-space-4);
	border-block-start: 1px solid var(--r-line);
	font-size: var(--r-type-support);
	line-height: var(--r-type-support-lh);
	color: var(--r-ink-3);
	text-align: center;
}

.rl-foot {
	margin-block-start: var(--r-space-5);
	text-align: center;
	font-size: var(--r-type-support);
	line-height: var(--r-type-support-lh);
	color: var(--r-ink-3);
}

.rl-foot__tagline {
	margin: 0 0 var(--r-space-3);
	font-family: var(--r-serif);
	font-size: var(--r-type-body);
	color: var(--r-ink-2);
}

.rl-foot__links {
	margin: 0 0 var(--r-space-2);
}

.rl-foot__links a {
	color: var(--r-accent);
}

.rl-foot__copy {
	margin: 0;
	font-size: var(--r-type-label);
	letter-spacing: var(--r-type-label-tracking);
	text-transform: uppercase;
	color: var(--r-ink-4);
}

/* ============================================================
 * 6. Responsive
 *
 * Verified at 1920, 1366, 768 and 390, in both directions.
 * ============================================================ */

@media (max-width: 1024px) {
	/*
	 * The sidebar becomes a wrapping row above the content.
	 *
	 * Deliberately NOT a collapsed drawer. A drawer needs either JavaScript or
	 * a <details> whose closed state UA stylesheets now control through
	 * ::details-content, and a navigation that a browser update can hide is a
	 * navigation that will one day be gone. A wrapping row shows every
	 * destination at every width, needs no script, and cannot overflow.
	 */
	.rs-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.rs-nav {
		padding: var(--r-space-3) var(--r-space-4);
		border-inline-end: 0;
		border-block-end: 1px solid var(--r-line);
	}

	.rs-nav__list {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--r-space-2);
	}

	.rs-nav__link {
		border-inline-start: 0;
		border: 1px solid var(--r-line);
		padding: var(--r-space-2) var(--r-space-3);
	}

	.rs-nav__link.is-current {
		border-color: var(--r-accent);
	}
}

@media (max-width: 767px) {
	.rs-header {
		padding-inline: var(--r-space-4);
		gap: var(--r-space-3);
	}

	.rs-brand__descriptor {
		display: none;
	}

	.rs-main {
		padding-inline: var(--r-space-4);
		padding-block: var(--r-space-4) var(--r-space-6);
	}

	.rs-footer {
		padding-inline: var(--r-space-4);
	}

	.rl-shell {
		padding: var(--r-space-4);
		background: linear-gradient(180deg, var(--r-ink) 0 30%, var(--r-ground) 30% 100%);
	}

	.rl-card {
		padding: var(--r-space-5) var(--r-space-4);
	}
}

@media (max-width: 479px) {
	.rs-brand__parent {
		padding-inline-end: var(--r-space-2);
	}

	/*
	 * The platform name must not break INSIDE a word.
	 *
	 * At 390px the header row is brand + language switcher + account chip, and
	 * the brand was the only one of the three that could shrink — so it did, to
	 * about 30px, and "Resolve Egypt" rendered as four stacked fragments:
	 * "Res / olve / Egy / pt". A brandmark broken mid-syllable is worse than a
	 * brandmark that has been truncated, because it reads as a rendering fault.
	 *
	 * `white-space: nowrap` forbids the break; `min-inline-size: 0` plus the
	 * ellipsis lets the element shrink and truncate cleanly if the row is
	 * genuinely too tight. The descriptor beneath is already handled that way.
	 */
	/*
	 * 1.16.0 — the lockup scales; it is never truncated. "HAYKALA | هيكلة"
	 * with an ellipsis would be the brand cut in half, which the brand
	 * standard forbids as firmly as it forbids either half alone.
	 *
	 * On a phone the bar's row is menu + brand + language switcher +
	 * notifications + account, and the brand used to be the one item allowed
	 * to shrink — to "R…". The lockup cannot shrink that far and stay the
	 * brand, so on a phone it takes a row of its own above the controls:
	 * whole, legible, and not under the menu button.
	 */
	.rs-header {
		flex-wrap: wrap;
		row-gap: var(--r-space-2);
	}

	.rs-brand {
		order: -1;
		flex: 1 0 100%;
	}

	/* …and the controls keep to ONE row beneath it: the account chip takes
	   what is left and shortens its name, as it did before. */
	.rs-header .rs-account {
		flex: 1 1 0;
		min-inline-size: 44px;
		justify-content: flex-end;
	}

	.rs-brand__name {
		font-size: 1.125rem;
		white-space: nowrap;
	}

	/*
	 * The parent-brand eyebrow steps aside on a phone.
	 *
	 * With "PANACEA" present, the 390px header is eyebrow + rule + platform
	 * name + language switcher + account chip, and the name — the only one of
	 * the five that is allowed to shrink — truncated to "R…". Losing the group
	 * name on the narrowest screen costs little: it is still in the footer of
	 * every page and in the copyright line. Losing the PLATFORM name means the
	 * header no longer says which product this is.
	 *
	 * The descriptor goes too, for the space; it is a tagline, not a label.
	 */
	.rs-brand__parent,
	.rs-brand__descriptor {
		display: none;
	}

	/*
	 * At 390 the name is the useful half of the chip, and two truncated lines
	 * of text beside a 30px circle is neither. The name survives, the role
	 * moves into the menu, and the avatar carries the identity visually.
	 */
	.rs-account__sub {
		display: none;
	}

	.rs-account__name {
		max-inline-size: 10ch;
	}

	.rs-account__menu {
		/*
		 * Anchored to the viewport rather than to the chip, so a menu wider
		 * than the space remaining beside it cannot push the page sideways.
		 */
		inset-inline-end: calc(-1 * var(--r-space-3));
		max-inline-size: calc(100vw - var(--r-space-5));
	}

	.rl-row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--r-space-2);
	}
}

@media (min-width: 1600px) {
	/*
	 * At 1920 the sidebar gets a little more room and the content stops
	 * stretching. A 1,700px line of table is unreadable however wide the
	 * monitor is.
	 */
	.rs-body {
		grid-template-columns: 280px minmax(0, 1fr);
	}
}

/* ============================================================
 * 7. Print and reduced motion
 * ============================================================ */

@media print {
	.rs-nav,
	.rs-account,
	.rs-skip {
		display: none;
	}

	.rs-header {
		position: static;
		background: none;
		color: var(--r-ink);
		border-block-end: 1px solid var(--r-line);
	}

	.rs-body {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.resolve-shell-standalone *,
	.resolve-login-standalone * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------------
 * The language switcher (§4)
 *
 * One control, two placements: the shell header and the sign-in card. It is a
 * form of real <button> elements, so it is in the tab order, it responds to
 * Enter and Space, and it works with JavaScript off — which matters here more
 * than almost anywhere else, because a reader who cannot read the interface is
 * exactly the reader least able to diagnose why a scripted control did
 * nothing.
 *
 * Both options are always shown, including the current one. A switcher that
 * hides the language you are in is a switcher you cannot use to confirm where
 * you are, and one that shows only "العربية" to an English reader — or only
 * "English" to an Arabic one — is a single unlabelled button.
 * ------------------------------------------------------------ */

.rs-lang,
.rl-lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 2px;
	border-radius: var(--resolve-radius, 0);
	/*
	 * LTR in both directions. The pair reads "English | العربية" wherever the
	 * document is going, so the button a reader aims at is in the same place
	 * before and after the switch — otherwise the control moves out from under
	 * the cursor at the exact moment it is used.
	 */
	direction: ltr;
}

/* Header placement: pushed to the trailing edge, ahead of the identity. */
.rs-lang {
	margin-inline-start: auto;
	background: rgba(255, 255, 255, 0.08);
}

.rs-header .rs-account {
	margin-inline-start: 0;
}

.rs-lang__option,
.rl-lang__option {
	appearance: none;
	border: 0;
	border-radius: var(--resolve-radius, 0);
	padding: 4px 12px;
	background: transparent;
	font: inherit;
	font-size: 12px;
	line-height: 1.6;
	cursor: pointer;
	color: inherit;
	/* Arabic glyphs are taller than Latin at the same size; without this the
	 * two options are different heights and the pill looks broken. */
	min-block-size: 24px;
}

.rs-lang__option {
	color: rgba(255, 255, 255, 0.72);
}

.rs-lang__option:hover,
.rs-lang__option:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
}

.rs-lang__option.is-current {
	background: var(--r-paper);
	color: var(--r-ink);
	font-weight: 600;
}

.rs-lang__option:focus-visible,
.rl-lang__option:focus-visible {
	outline: 2px solid var(--r-accent-soft);
	outline-offset: 2px;
}

/* Sign-in placement: below the card, centred, on the page ground. */
.rl-lang {
	display: flex;
	justify-content: center;
	margin: var(--r-space-4) auto 0;
	border: 1px solid var(--r-line);
	background: var(--r-paper);
}

.rl-lang__option {
	color: var(--r-ink-3);
}

.rl-lang__option:hover,
.rl-lang__option:focus-visible {
	color: var(--r-ink);
	background: var(--r-ground);
}

.rl-lang__option.is-current {
	background: var(--r-ink);
	color: var(--r-paper);
	font-weight: 600;
}

.rs-lang__legend,
.rl-lang__legend {
	padding-inline: 8px;
	font-size: 11px;
	letter-spacing: 0;
	text-transform: none;
	opacity: 0.7;
}

/*
 * At 390px the header is brand + language + identity and there is not room
 * for a legend. The options themselves stay — they are the control.
 */
@media (max-width: 600px) {
	.rs-lang__legend {
		display: none;
	}

	.rs-lang__option {
		padding-inline: 8px;
	}
}

/* ============================================================
 * 7. Navigation drawer (1.12.0, E3)
 *
 * With scripting, the shell navigation is a drawer: closed by default at
 * every width, opened by the "Menu" button, the content full width while it
 * is closed. Without scripting (no `rs-shell--drawer` class) everything above
 * applies unchanged: a sidebar on wide screens, a wrapping row on narrow ones.
 * ============================================================ */

.rs-menu-toggle,
.rs-nav__close {
	display: none;
}

.rs-shell--drawer .rs-menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--r-space-2);
	min-block-size: 44px;
	padding: var(--r-space-2) var(--r-space-3);
	border: 1px solid var(--r-line);
	border-radius: var(--r-radius);
	background: var(--r-paper);
	color: var(--r-ink);
	font: inherit;
	font-size: var(--r-type-support);
	font-weight: 600;
	cursor: pointer;
}

.rs-shell--drawer .rs-menu-toggle:focus-visible,
.rs-shell--drawer .rs-nav__close:focus-visible {
	outline: 2px solid var(--r-accent);
	outline-offset: 2px;
}

.rs-menu-toggle__icon,
.rs-menu-toggle__icon::before,
.rs-menu-toggle__icon::after {
	display: block;
	inline-size: 18px;
	block-size: 2px;
	background: currentColor;
	border-radius: 1px;
}

.rs-menu-toggle__icon {
	position: relative;
}

.rs-menu-toggle__icon::before,
.rs-menu-toggle__icon::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
}

.rs-menu-toggle__icon::before { inset-block-start: -6px; }
.rs-menu-toggle__icon::after { inset-block-start: 6px; }

.rs-shell--drawer .rs-body {
	grid-template-columns: minmax(0, 1fr);
}

.rs-shell--drawer .rs-nav {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 1000;
	inline-size: min(320px, 86vw);
	padding: var(--r-space-6) var(--r-space-4) var(--r-space-5);
	overflow-y: auto;
	border-inline-end: 1px solid var(--r-line);
	border-block-end: 0;
	box-shadow: 0 0 32px rgba(0, 0, 0, 0.18);
	transform: translateX(-105%);
	visibility: hidden;
	transition: transform 0.2s ease, visibility 0s linear 0.2s;
}

[dir="rtl"] .rs-shell--drawer .rs-nav {
	transform: translateX(105%);
}

.rs-shell--drawer.is-nav-open .rs-nav {
	transform: none;
	visibility: visible;
	transition: transform 0.2s ease;
}

.rs-shell--drawer .rs-nav__close {
	display: inline-flex;
	position: absolute;
	inset-block-start: var(--r-space-3);
	inset-inline-end: var(--r-space-3);
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	border: 1px solid var(--r-line);
	border-radius: var(--r-radius);
	background: var(--r-paper);
	color: var(--r-ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.rs-shell--drawer .rs-nav__list {
	position: static;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 2px;
}

.rs-shell--drawer .rs-nav__link {
	border: 0;
	border-inline-start: 2px solid transparent;
}

.rs-shell--drawer .rs-nav__link.is-current {
	border-inline-start-color: var(--r-accent);
}

.rs-nav-backdrop {
	display: none;
}

.rs-shell--drawer.is-nav-open .rs-nav-backdrop {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
	.rs-shell--drawer .rs-nav,
	.rs-shell--drawer.is-nav-open .rs-nav {
		transition: none;
	}
}


/* 1.12.0 (C3/F3): a signed-in reader on the sign-in page sees their own next steps. */
.rl-own-actions {
	list-style: none;
	margin: var(--r-space-4) 0 0;
	padding: 0;
	display: grid;
	gap: var(--r-space-2);
}

/* =====================================================================
 * 1.16.3.4 — the shell: one header row, a drawer that makes room, and a
 * page that uses the screen it is given.
 *
 * Three defects, one cause between them: the layout was written for the
 * width it was designed at and left to cope above and below it.
 *
 *  G  The header wrapped to two rows. Nothing in it was allowed to shrink,
 *     so the moment the brand, the tagline, the language switch, the bell
 *     and the account menu together exceeded the bar, the flex container
 *     did the only thing it could and wrapped. Now the brand block is
 *     allowed to shrink and the tagline is the first thing to go, so the
 *     row survives down to the width where a drawer takes over anyway.
 *
 *  J  Opening the menu covered the content and dimmed it. On a phone that
 *     is the right behaviour and it stays. On a wide screen there is room
 *     for both, so the drawer docks into a column and the content moves
 *     over to sit beside it — nothing is hidden, nothing is dimmed, and
 *     closing it puts the width back.
 *
 *     The blank strip down the right-hand side was not the drawer at all:
 *     .rs-content had a max width and no auto margin, so on anything wider
 *     than 1180px the page sat against the start edge and left the rest of
 *     the screen empty. It is centred now, and the ceiling is raised.
 *
 *  L  Icons are a set (Support\Icons): 24px grid, 1.5px stroke,
 *     currentColor. These rules size and align them; the drawings live in
 *     one file so the next icon matches the last one.
 * ===================================================================== */

/* --- L: the icon set ------------------------------------------------- */
.r-icon { display: inline-block; vertical-align: -0.2em; flex: 0 0 auto; }
.rs-bell__glyph { display: inline-flex; }
.rs-bell__glyph .r-icon { inline-size: 20px; block-size: 20px; }
.rs-menu-toggle .r-icon,
.rs-nav__close .r-icon { inline-size: 20px; block-size: 20px; }
/* The unread badge rides the bell instead of replacing it. */
.rs-bell__trigger { position: relative; }

/* --- G: the header is one row --------------------------------------- */
/*
 * ONE ROW IS A DESKTOP REQUIREMENT, SO THE RULE IS A DESKTOP RULE.
 *
 * An unconditional `nowrap` fixed the desktop and broke the phone: with
 * nothing allowed to wrap, the language switch, the bell and the account
 * chip were pushed past the right edge at 390px and the page scrolled
 * sideways — the header showed the brand and nothing else. Below the width
 * where a single row can hold the bar, wrapping is the correct behaviour and
 * is what the header did before this release.
 */
@media (min-width: 700px) {
	.rs-header { flex-wrap: nowrap; }
}
.rs-brand { min-inline-size: 0; }
.rs-brand__stack { min-inline-size: 0; }
.rs-brand__descriptor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Everything after the brand is pushed to the far end as one cluster. */
.rs-header > .rs-lang { margin-inline-start: auto; }
@media (max-width: 1100px) {
	/* The tagline is the first thing to go: it is the least load-bearing
	 * item in the bar, and losing it keeps the row. */
	.rs-header .rs-brand__descriptor { display: none; }
}

/* --- J: the page uses the screen ------------------------------------ */
.rs-content,
.rs-crumbs,
.rs-pagehead { max-inline-size: 1400px; margin-inline: auto; }

/* --- J: on a wide screen the drawer docks, it does not cover --------- */
@media (min-width: 1100px) {
	.rs-shell--drawer.is-nav-open .rs-body {
		display: grid;
		grid-template-columns: 300px minmax(0, 1fr);
		align-items: start;
	}
	.rs-shell--drawer.is-nav-open .rs-nav {
		position: sticky;
		inset-block-start: var(--r-shell-header);
		inset-inline-start: auto;
		z-index: 1;
		inline-size: auto;
		max-block-size: calc(100vh - var(--r-shell-header));
		transform: none;
		visibility: visible;
		box-shadow: none;
	}
	/* Docked, there is nothing to dim and nothing to close over. */
	.rs-shell--drawer.is-nav-open .rs-nav-backdrop { display: none; }
	.rs-shell--drawer.is-nav-open .rs-nav__close { display: none; }
}

/* Closing must leave no trace: no stale column, no stale offset. */
.rs-shell--drawer:not(.is-nav-open) .rs-body { grid-template-columns: minmax(0, 1fr); }

@media print {
	.rs-header, .rs-nav, .rs-menu-toggle, .rs-nav-backdrop { display: none !important; }
	.rs-content, .rs-crumbs, .rs-pagehead { max-inline-size: none; margin-inline: 0; }
}

/* --- K: one footer region, read as one ------------------------------ */
.rs-footer__disclosure { display: grid; gap: var(--r-space-2); max-inline-size: 1400px; margin-inline: auto; }
.rs-footer__disclosure .resolve-disclosure { margin: 0; }
.rs-footer__disclosure .rs-footer__legal { margin: 0; }
.rs-footer__meta { max-inline-size: 1400px; margin-inline: auto; }


/* HAYKALA 2.0.0 — normalize public Opportunities shell chrome when the Core shell is used.
   This is scoped to the standalone shell; public theme chrome is otherwise untouched. */
body.resolve-shell-standalone.resolve-shell-page-opportunities .rs-header {
  box-sizing: border-box; display: flex; flex-wrap: nowrap; align-items: center;
  gap: clamp(14px, 2vw, 30px); width: 100%; min-height: 88px;
  padding: 12px clamp(20px, 3.2vw, 48px);
}
body.resolve-shell-standalone.resolve-shell-page-opportunities .rs-header > .rs-brand {
  flex: 0 1 auto; min-width: 0; max-width: min(34vw, 420px); margin-inline-end: auto;
}
body.resolve-shell-standalone.resolve-shell-page-opportunities .rs-header .rs-brand__descriptor { display: none !important; }
body.resolve-shell-standalone.resolve-shell-page-opportunities .rs-header .rs-brand__name { color: #f8fafc; -webkit-text-fill-color: #f8fafc; }
body.resolve-shell-standalone.resolve-shell-page-opportunities .rs-header .rs-lang { flex: 0 0 auto; margin-inline-start: auto; }
@media (max-width: 900px) {
  body.resolve-shell-standalone.resolve-shell-page-opportunities .rs-header { min-height: 76px; padding-inline: 16px; gap: 12px; }
  body.resolve-shell-standalone.resolve-shell-page-opportunities .rs-header > .rs-brand { max-width: 45vw; }
}
@media (max-width: 600px) {
  body.resolve-shell-standalone.resolve-shell-page-opportunities .rs-header { flex-wrap: wrap; min-height: 0; padding-block: 12px; }
  body.resolve-shell-standalone.resolve-shell-page-opportunities .rs-header > .rs-brand { max-width: calc(100% - 100px); }
}