/*
 * Mena Web UI — the app's home screen, on the web.
 *
 * Every value here traces back to the Android app: the palette is
 * ui/theme/Color.kt (both schemes), the corner radii are MenaShapes, the
 * spacing and icon sizes are the ones PostCard and StoriesStrip use. Where the
 * two diverge it is because a mouse needs a bigger hit target than a thumb.
 */

:root {
	/*
	 * Aliases of the shared tokens in mena-theme.css. The component rules below
	 * only ever speak --mw-*, so the whole feed and stories UI follows the
	 * light/dark switch without a single duplicated rule.
	 */
	--mw-bg: var(--mena-bg);
	--mw-surface: var(--mena-surface);
	--mw-surface-2: var(--mena-surface-2);
	--mw-elevated: var(--mena-elevated);
	--mw-text: var(--mena-text);
	--mw-muted: var(--mena-muted);
	--mw-muted-strong: var(--mena-text-2);
	--mw-border: var(--mena-border);

	--mw-gold: var(--mena-gold);
	--mw-gold-deep: var(--mena-gold-text);
	--mw-mint: #6becae;
	--mw-rose: var(--mena-rose);
	--mw-pink: var(--mena-pink);
	--mw-pink-deep: var(--mena-pink-deep);
	--mw-green: var(--mena-green);
	--mw-blue: #2f6fed;
	--mw-on-gold: var(--mena-on-gold);
	--mw-ok: #0f8a4d;

	/* MenaShapes */
	--mw-r-xs: 6px;
	--mw-r-sm: 10px;
	--mw-r-md: 14px;
	--mw-r-lg: 20px;
	--mw-r-xl: 28px;

	--mw-shadow: var(--mena-shadow);
	--mw-shadow-lg: var(--mena-shadow-lg);

	/*
	 * Placeholder tints.
	 *
	 * Translucent rather than fixed colours, so a placeholder reads the same
	 * whether it sits on the page, on a card, or inside a dialog — each of
	 * which has a different background. Tying them to --mena-surface, as this
	 * once did, made them all but invisible in dark: surface and surface-2 are
	 * #1a1a1a and #262626, and a dialog's own background is surface.
	 */
	--mw-skel-a: rgba(0, 0, 0, .055);
	--mw-skel-b: rgba(0, 0, 0, .105);
}

:root[data-mena-theme="dark"] {
	--mw-skel-a: rgba(255, 255, 255, .06);
	--mw-skel-b: rgba(255, 255, 255, .14);
}

/*
 * [hidden] is a bare attribute selector, so ANY class rule that sets `display`
 * silently overrules it and the element stays on screen. That is what left an
 * empty image-preview box (and its stray close button) floating in the reply
 * bar, and the load-more button showing next to "no more posts".
 *
 * Restated once at class-beating specificity for both namespaces, rather than
 * patched rule by rule as each one is noticed. Scoped rather than global so it
 * cannot reach into other plugins' markup.
 */
[hidden][class*="mw-"],
[hidden][class*="mena-"] { display: none !important; }

.mw-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ------------------------------------------------------------- home layout */

/*
 * The homepage's post loop lives inside a 660px-constrained group, so the grid
 * has to step outside it. Two elements do that job:
 *
 *   .mena-home-wrap  inherits the document's direction and handles the breakout
 *   .mena-home-grid  forces LTR so the feed is the left column in either script
 *
 * They cannot be merged. Logical margins resolve against the *element's own*
 * direction, but the over-constrained rule (CSS 2.1 §10.3.3) discards the END
 * margin as decided by the *containing block's* direction. Put direction:ltr on
 * the same element that carries the margin and, inside an RTL parent, the
 * parent throws away the very margin the element just set — which is what sent
 * the whole grid off the left edge of the page.
 *
 * WordPress gives every child of a constrained group:
 *
 *     max-width: <content-size>;  margin-left: auto !important;
 *                                 margin-right: auto !important;
 *
 * max-width was clamping the two-column grid to the 660px meant for one, and
 * auto margins can't centre an overflowing box (the spec treats them as zero
 * once the box is wider than its container), so the offset is computed here.
 * Both overrides beat WordPress on specificity: its selectors are :where(),
 * which scores zero.
 *
 * The width is 660 + gap + feed on purpose: the article measure is exactly what
 * it was before the feed existed, so the news column does not move.
 */
.mena-home-wrap {
	--mw-grid-w: min(var(--mena-page, 1364px), 96vw);
	width: var(--mw-grid-w);
	max-width: none;
	/* Half the overhang, on whichever side this writing mode calls the start. */
	margin-inline-start: calc((100% - var(--mw-grid-w)) / 2) !important;
	margin-inline-end: 0 !important;
}

/*
 * Three rails: the users feed, the news timeline, the calendar. Named areas
 * rather than line numbers, so the breakpoints below only restate the shape and
 * never have to recount columns. The grid is direction:ltr, so "feed news cal"
 * really is left-to-right whatever the document does.
 */
.mena-home-grid {
	direction: ltr;
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr) 300px;
	grid-template-areas: "feed news cal";
	gap: 32px;
	align-items: start;
}

/* No calendar on the page: the rail collapses rather than leaving a gap. */
.mena-home-grid--nocal {
	grid-template-columns: 340px minmax(0, 1fr);
	grid-template-areas: "feed news";
}

.mena-home-grid__feed { grid-area: feed; }
.mena-home-grid__news { grid-area: news; }
.mena-home-grid__cal  { grid-area: cal; }

.mena-home-grid__feed,
.mena-home-grid__news,
.mena-home-grid__cal {
	min-width: 0;
}

/* The calendar rides along like the feed. */
.mena-home-grid__cal {
	position: sticky;
	top: 12px;
}

/*
 * The calendar card is a two-up row by default. In a 300px rail that has to
 * stack — which is the same shape its own 600px media query produces, but keyed
 * to the column it is sitting in rather than to the viewport.
 */
.mena-home-grid__cal .cec-card {
	flex-direction: column;
	margin: 0 !important;
}

.mena-home-grid__cal .cec-col-left {
	border-left: none !important;
	border-bottom: 1px solid var(--mena-border) !important;
}

.mena-home-grid__cal .cec-col-right { flex: none; }

/*
 * The feed tracks the page while the much longer news column scrolls past.
 *
 * The scrolling itself belongs to the panel, not to this column — see
 * .mw-feed__scroll. Putting overflow here left the scrollbar running down the
 * outside of the card, detached from the rounded border it was scrolling.
 */
.mena-home-grid__feed {
	position: sticky;
	top: 12px;

	/*
	 * Two panels in one sticky column, and the column has to fit the screen.
	 *
	 * The discussion used to take the whole viewport height on its own. With a
	 * bulletin under it, anything that does not fit is unreachable — a sticky
	 * column does not scroll, so whatever hangs below the fold stays below it
	 * for the whole page. The gap is the grid's own.
	 */
}



/* Too narrow for three rails: the calendar goes back over the top, full width. */
@media (max-width: 1199px) {
	.mena-home-grid {
		grid-template-columns: 320px minmax(0, 1fr);
		grid-template-areas:
			"cal  cal"
			"feed news";
	}

	.mena-home-grid--nocal {
		grid-template-columns: 320px minmax(0, 1fr);
		grid-template-areas: "feed news";
	}

	.mena-home-grid__cal { position: static; }

	/* Full width again, so the card goes back to its two-up row. */
	.mena-home-grid__cal .cec-card { flex-direction: row; }
	.mena-home-grid__cal .cec-col-left {
		border-left: 1px solid var(--mena-border) !important;
		border-bottom: none !important;
	}
}

@media (max-width: 900px) {
	/* Undoing the breakout means beating the same !important margins. */
	.mena-home-wrap {
		--mw-grid-w: 100%;
		width: 100%;
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
	}

	/* One column, in the order the page had before the feed existed. */
	.mena-home-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "cal" "news" "feed";
		gap: 24px;
	}

	.mena-home-grid--nocal {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "news" "feed";
	}

	.mena-home-grid__feed { position: static; }

	.mw-feed { max-height: none; }
	.mw-feed__scroll { overflow: visible; }
}

@media (max-width: 600px) {
	.mena-home-grid__cal .cec-card { flex-direction: column; }
	.mena-home-grid__cal .cec-col-left {
		border-left: none !important;
		border-bottom: 1px solid var(--mena-border) !important;
	}
}

/* ------------------------------------------------ one measure for the page */

/*
 * The masthead, the calendar, the stories strip and the two columns below all
 * resolve to the same width, so the page reads as one system rather than a
 * narrow header sitting on a wide body.
 *
 * Overriding WordPress's own content-size token is what makes that work without
 * editing a template: every constrained block on the page already reads it,
 * whether it was authored in the theme's files or in the site editor. Scoped to
 * the front page, so article pages keep their 660px reading measure.
 *
 * The news column is the flexible track, so narrowing --mena-page takes width
 * from the article measure and leaves the two rails alone.
 */
.mena-home {
	/* 340 feed + 660 article measure + 300 calendar + two 32px gaps. */
	--mena-page: 1364px;
	--wp--style--global--content-size: var(--mena-page);
}

/* --------------------------------------------------------- compact masthead */

/*
 * The masthead was built like a title page — a 110px logo, the tagline at body
 * size, two spacers and the nav — spending most of the first screen before a
 * single headline. On a news homepage that is the most valuable space there is.
 *
 * This restyles it into a band: logo beside the wordmark, tagline as one quiet
 * line, nav underneath. Everything keys off core block classes, which are
 * emitted no matter how the header was authored, so it holds whether that
 * markup comes from the theme file or from an edit made in the site editor.
 * Only the front page is touched; inner pages keep the full masthead.
 */
.mena-home header.wp-block-template-part .wp-block-spacer {
	display: none !important;
}

.mena-home header.wp-block-template-part > .wp-block-group {
	padding-top: 22px !important;
	padding-bottom: 14px !important;
}

.mena-home header.wp-block-template-part .wp-block-group .wp-block-group {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* The logo stays centred on its own line; only the air around it goes. */
.mena-home header.wp-block-template-part .wp-block-group:has(> .wp-block-site-logo) {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 10px !important;
}

.mena-home header.wp-block-template-part .wp-block-site-logo {
	padding: 0 !important;
	margin: 0 !important;
	flex: none;
}

.mena-home header.wp-block-template-part .wp-block-site-logo img {
	width: 66px !important;
	height: auto !important;
}

/*
 * The wordmark and the handle are one unit, so the block gap between them is
 * removed outright rather than reduced — @menaChannels reads as part of the
 * name, not as the next item in a list.
 */
.mena-home header.wp-block-template-part .wp-block-group:has(> .wp-block-site-title) {
	gap: 0 !important;
	row-gap: 0 !important;
	align-items: center;
}

.mena-home header.wp-block-template-part .wp-block-site-title {
	font-size: 1.5rem !important;
	line-height: 1.25 !important;
	margin: 0 !important;
	text-align: center;
}

.mena-home header.wp-block-template-part .wp-block-post-author-name {
	font-size: .8rem !important;
	line-height: 1.35 !important;
	margin: 0 !important;
	text-align: center;
}

/*
 * The tagline stays, but sized as a strapline rather than as body copy — that
 * is where most of the masthead's old height came from, not from the line
 * existing. The post author's biography has no meaning on a homepage listing
 * many authors, so that one stays hidden.
 */
.mena-home header.wp-block-template-part .wp-block-site-tagline {
	display: block !important;
	font-size: .76rem !important;
	line-height: 1.7 !important;
	max-width: 74ch;
	margin: 6px auto 0 !important;
	text-align: center;
	opacity: .8;
}

/*
 * The site description. It lives in the author-biography block on this header,
 * not in the tagline, so both are shown and both are sized as a strapline —
 * whichever one the site actually fills in is the one that appears.
 */
.mena-home header.wp-block-template-part .wp-block-post-author-biography {
	display: block !important;
	font-size: .76rem !important;
	line-height: 1.7 !important;
	max-width: 74ch;
	margin: 4px auto 0 !important;
	text-align: center;
	opacity: .8;
}

.mena-home header.wp-block-template-part .wp-block-navigation {
	margin-top: 14px !important;
	font-size: .84rem;
}

@media (max-width: 640px) {
	.mena-home header.wp-block-template-part .wp-block-site-logo img { width: 54px !important; }
	.mena-home header.wp-block-template-part .wp-block-site-title { font-size: 1.25rem !important; }
}

/* -------------------------------------------------------------------- feed */

/*
 * A column: the header and composer stay put, only the posts move. The card's
 * own overflow:hidden clips the scrollbar to the rounded corner, so it reads as
 * part of the panel rather than as a rail beside it.
 */
.mw-feed {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 24px);
	background: var(--mw-elevated);
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-r-lg);
	overflow: hidden;
	font-family: inherit;
}

.mw-feed__head,
.mw-composer { flex: none; }

.mw-feed__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;

	/*
	 * Deliberately NOT overscroll-behavior: contain.
	 *
	 * Contain stops the wheel chaining to the page, so reaching the end of the
	 * list left the pointer in a dead zone: the panel had no more to give and
	 * the page was not allowed to take over. Hovering the discussion meant the
	 * wheel did nothing at all. Chaining at the boundary is the behaviour a
	 * reader expects from a panel inside a page.
	 */
	scrollbar-width: thin;
	scrollbar-color: var(--mw-border) transparent;
}

.mw-feed__scroll::-webkit-scrollbar { width: 6px; }
.mw-feed__scroll::-webkit-scrollbar-thumb {
	background: var(--mw-border);
	border-radius: 3px;
}

.mw-feed__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--mw-border);
	background: var(--mw-surface);
}

.mw-feed__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	flex: 1;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--mw-text);
}

.mw-feed__title .bi { color: var(--mw-gold-deep); font-size: 1rem; }

.mw-feed__refresh {
	border: 0;
	background: transparent;
	color: var(--mw-muted);
	cursor: pointer;
	font-size: 1rem;
	padding: 4px;
	line-height: 1;
	border-radius: 50%;
	transition: color .2s ease, transform .5s ease;
}

.mw-feed__refresh:hover { color: var(--mw-text); }
.mw-feed__refresh.is-spinning { animation: mw-spin .9s linear infinite; }


.mw-feed__list { display: block; }

.mw-feed__end {
	margin: 0;
	padding: 16px;
	text-align: center;
	font-size: .72rem;
	color: var(--mw-muted);
}

.mw-more {
	display: block;
	width: calc(100% - 32px);
	margin: 12px 16px 16px;
	padding: 9px 0;
	border: 1px solid var(--mw-border);
	border-radius: 999px;
	background: var(--mw-elevated);
	color: var(--mw-text);
	font-family: inherit;
	font-size: .78rem;
	font-weight: 500;
	cursor: pointer;
	transition: background .2s ease;
}

.mw-more:hover { background: var(--mw-surface); }
.mw-more[disabled] { opacity: .5; cursor: default; }

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

.mw-composer {
	padding: 12px 16px;
	border-bottom: 1px solid var(--mw-border);
}

.mw-composer__row { display: flex; gap: 12px; align-items: flex-start; }
.mw-composer__main { flex: 1; min-width: 0; }

.mw-composer__input {
	width: 100% !important;
	box-sizing: border-box;
	border: 0 !important;
	background: transparent !important;
	color: var(--mw-text) !important;
	font-family: inherit;
	font-size: .85rem;
	line-height: 1.9;
	padding: 6px 0 !important;
	resize: none;
	overflow: hidden;
	min-height: 38px;
	border-radius: 0 !important;
}

.mw-composer__input::placeholder { color: var(--mw-muted); }
/* Guests get a readonly box, not a disabled one — see the render class. */
.mw-composer__input[readonly] { cursor: pointer; }

.mw-composer__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

.mw-composer__spacer { flex: 1; }

.mw-composer__note {
	margin: 8px 0 0;
	font-size: .72rem;
	line-height: 1.7;
	color: var(--mw-muted-strong);
}

.mw-composer__note.is-error { color: var(--mw-rose); }
.mw-composer__note.is-ok { color: var(--mw-ok); }

/*
 * Every staged image on one row, whatever the count — the script sets the
 * column count to match. Four across is the point: seeing all of them at once
 * is what tells you what you are about to post.
 */
.mw-composer__previews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 4px;
	margin-top: 8px;
	border-radius: var(--mw-r-md);
	overflow: hidden;
}

.mw-composer__preview {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--mw-surface-2);
}

.mw-composer__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mw-composer__drop {
	position: absolute;
	top: 4px;
	inset-inline-end: 4px;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: .7rem;
	line-height: 1;
	cursor: pointer;
}

.mw-composer__quoted { margin-top: 8px; }

.mw-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: var(--mw-gold-deep);
	cursor: pointer;
	font-size: 1rem;
	transition: background .2s ease;
}

.mw-iconbtn:hover { background: rgba(217, 159, 0, .12); }

/*
 * Frozen while a post is on its way out. The text stays black and selectable —
 * only readOnly, never disabled — so it still reads as the thing being sent
 * rather than as something that failed.
 */
.mw-composer.is-sending .mw-composer__input,
.mw-qc.is-sending .mw-qc__input { cursor: progress; }

.mw-composer.is-sending .mw-composer__previews,
.mw-qc.is-sending .mw-qc__previews { opacity: .6; }

.mw-iconbtn.is-locked,
.mw-qc__tool.is-locked,
.mw-composer__drop.is-locked {
	opacity: .4;
	pointer-events: none;
}

.mw-btn {
	font-family: inherit;
	border: 0;
	border-radius: 999px;
	padding: 7px 20px;
	font-size: .78rem;
	font-weight: 700;
	cursor: pointer;
	line-height: 1.6;
	transition: filter .2s ease, opacity .2s ease;
}

/*
 * Working state. The label is hidden rather than replaced, so the button keeps
 * the width it had — a button that resizes the moment you press it moves the
 * one next to it, and on a narrow composer that reflows the whole bar.
 */
.mw-btn.is-busy {
	position: relative;
	pointer-events: none;
}

.mw-btn.is-busy .mw-btn__label { visibility: hidden; }

.mw-btn.is-busy::after {
	content: '';
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 15px;
	height: 15px;
	margin-block-start: -8px;
	margin-inline-start: -8px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	animation: mw-spin .7s linear infinite;
}

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

.mw-btn:disabled { opacity: .45; cursor: default; }
.mw-btn.is-busy { opacity: 1; }

.mw-btn--gold { background: var(--mw-gold); color: var(--mw-on-gold); }
.mw-btn--gold:hover { filter: brightness(.94); }
.mw-btn--ghost {
	background: transparent;
	color: var(--mw-muted-strong);
	border: 1px solid var(--mw-border);
}
.mw-btn--danger { background: var(--mw-rose); color: #fff; }
.mw-btn[disabled] { opacity: .45; cursor: default; filter: none; }

/* --------------------------------------------------------------- post card */

.mw-post {
	display: flex;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--mw-border);
	position: relative;
	cursor: pointer;
	transition: background .15s ease;
}

.mw-post:hover { background: var(--mw-surface); }
.mw-post:last-child { border-bottom: 0; }

.mw-avatar {
	flex: none;
	border-radius: 50%;
	object-fit: cover;
	background: var(--mw-surface-2);
	display: block;
}

.mw-avatar--44 { width: 44px; height: 44px; }
.mw-avatar--40 { width: 40px; height: 40px; }
.mw-avatar--32 { width: 32px; height: 32px; }
.mw-avatar--28 { width: 28px; height: 28px; }

.mw-avatar--empty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--mw-muted);
}

.mw-post__main { flex: 1; min-width: 0; }

.mw-post__head {
	display: flex;
	align-items: center;
	gap: 3px;
	padding-inline-end: 26px;

	/*
	 * A size of its own, because of what is INSIDE it.
	 *
	 * .mw-post__name declares .82rem and was always right. The verified tick
	 * beside it is a SIBLING of the name, not a child, so its .95em resolved
	 * against this element — which set no size and inherited the page's. Inside
	 * wp:post-content this theme runs at 1.6rem, so the badge came out around
	 * 24px: a gold disc taller than the name it was marking, on the profile and
	 * anywhere else the feed is embedded in page content.
	 *
	 * Every other row that carries a badge (.mw-quote__head, .mw-liker,
	 * .mw-comment__head, .mw-ring__label) already declares one. This was the
	 * only one that did not.
	 */
	font-size: .82rem;
}

.mw-post__name {
	font-size: .82rem;
	font-weight: 500;
	color: var(--mw-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/*
 * The verified tick: the gold gradient badge, drawn from the <symbol> the script
 * injects once per page. Identical in both themes on purpose — the app tints
 * VerifiedBadge with MenaGold regardless of scheme, and a badge that changes
 * colour with the theme stops reading as a badge. The artwork carries its own
 * dark gradient stops, so it holds its shape on white without extra treatment.
 *
 * Sized in em so it tracks whatever text it sits beside: 13px in a post header,
 * 10px in a story ring label, without a rule for each.
 */
.mw-verified {
	/*
	 * 1.1em, not .95em. The artwork carries margin inside its own viewBox, so a
	 * box the same height as the text renders a mark noticeably smaller than the
	 * letters beside it. Slightly over the em box is what makes the two read as
	 * the same weight.
	 */
	width: 1.1em;
	height: 1.1em;
	flex: none;
	display: inline-block;
	vertical-align: -.22em;
}
.mw-pending { color: var(--mw-gold-deep); font-size: .72rem; margin-inline-start: 4px; flex: none; }

.mw-post__handle {
	font-size: .68rem;
	color: var(--mw-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.8;
}

.mw-post__body {
	margin: 4px 0 0;
	font-size: .82rem;
	line-height: 1.85;
	color: var(--mw-text);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.mw-post__more {
	position: absolute;
	top: 12px;
	inset-inline-end: 14px;
	border: 0;
	background: transparent;
	color: var(--mw-muted);
	font-size: .85rem;
	cursor: pointer;
	padding: 2px 4px;
	line-height: 1;
	border-radius: var(--mw-r-xs);
}

.mw-post__more:hover { color: var(--mw-text); background: var(--mw-surface-2); }

/* image grid — the four layouts PostImageGrid draws */

.mw-grid {
	margin-top: 10px;
	display: grid;
	gap: 3px;
	border-radius: var(--mw-r-md);
	overflow: hidden;
}

.mw-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: var(--mw-surface-2);
	cursor: zoom-in;

	/*
	 * Required, not tidiness. A grid item's min-height defaults to auto, so a
	 * 1fr row grows to fit its content — and an image's content is its natural
	 * height. A tall photo therefore stretched its row past the container's
	 * ratio, height:100% resolved cyclically to auto, and the second row was
	 * pushed out of the box and clipped: a four-image post rendered two.
	 * Allowing the item to shrink below its content is what makes 1fr mean 1fr.
	 */
	min-width: 0;
	min-height: 0;
}

/*
 * Four arrangements, one per count, the way X lays them out: one image at its
 * own proportions, two side by side, three as a tall one beside a stacked
 * pair, four as a square of four.
 *
 * Sized by ratio, never by pixels. The old fixed heights — 180px for two,
 * 240px for four — were picked against the full-width timeline and collapsed
 * to letterbox slots in the 340px feed column beside the news. An aspect ratio
 * holds its shape at any width, which is the whole point of having one.
 */
.mw-grid--1 { grid-template-columns: 1fr; }

/* The single image keeps its own proportions, capped so a tall photo cannot
   push the rest of the post off the screen. */
.mw-grid--1 img {
	height: auto;
	max-height: 420px;
	object-fit: cover;
}

.mw-grid--2 {
	grid-template-columns: 1fr 1fr;
	aspect-ratio: 16 / 9;
}

.mw-grid--3 {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	aspect-ratio: 16 / 9;
}

/* The odd one out gets the height, so three never reads as four with a gap. */
.mw-grid--3 > :first-child { grid-row: span 2; }

.mw-grid--4 {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	aspect-ratio: 16 / 9;
}

/* quoted original */

/* Opens the post it quotes — so it points, like anything else that navigates. */
.mw-quote[data-open-quoted] { cursor: pointer; }

.mw-quote[data-open-quoted]:hover { border-color: var(--mw-muted); }

.mw-quote {
	margin-top: 10px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-r-md);
	padding: 10px 12px;
	background: var(--mw-surface);
}

.mw-quote__head {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .72rem;
	color: var(--mw-muted);
}

.mw-quote__name { color: var(--mw-text); font-weight: 500; }

/*
 * Pushed to the far edge of the card. Sitting in the flow it read as part of
 * the author line — as though the name itself had a dismiss button.
 */
.mw-quote__drop {
	margin-inline-start: auto;
	border: 0;
	background: transparent;
	color: var(--mw-muted);
	font-size: .72rem;
	line-height: 1;
	padding: 4px;
	cursor: pointer;
	border-radius: 50%;
	transition: background .2s ease, color .2s ease;
}

.mw-quote__drop:hover {
	background: var(--mw-surface-2);
	color: var(--mw-rose);
}

.mw-quote__body {
	margin: 4px 0 0;
	font-size: .76rem;
	line-height: 1.8;
	color: var(--mw-muted-strong);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mw-quote__thumb {
	margin-top: 6px;
	width: 100%;
	max-height: 140px;
	object-fit: cover;
	border-radius: var(--mw-r-sm);
	display: block;
}

/* action row */

.mw-actions {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 10px;
}

.mw-stat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: transparent;
	padding: 2px;
	color: var(--mw-muted);
	font-family: inherit;
	font-size: .72rem;
	cursor: pointer;
	line-height: 1;
	border-radius: var(--mw-r-xs);
	transition: color .2s ease;
	font-variant-numeric: tabular-nums;
}

.mw-stat .bi { font-size: .95rem; }
.mw-stat:hover { color: var(--mw-text); }
.mw-stat[data-static] { cursor: default; }
.mw-stat[data-static]:hover { color: var(--mw-muted); }

.mw-stat.is-liked { color: var(--mw-rose); }
.mw-stat.is-liked:hover { color: var(--mw-rose); }
.mw-stat.is-reposted { color: var(--mw-green); }
.mw-stat.is-reposted:hover { color: var(--mw-green); }

.mw-stat--views { margin-inline-start: auto; }

/* The like pop, matching the app's LikeBump. */
@keyframes mw-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

.mw-stat.is-popping .bi { animation: mw-pop .32s ease; }

/* dropdown menu */

/*
 * Above every overlay, and positioned in viewport coordinates — this menu can
 * be opened from a card inside a modal, where anything below the backdrop is
 * both invisible and in the wrong place.
 */
.mw-menu {
	position: fixed;
	z-index: 100100;
	opacity: 0;
	transform: translateY(-4px) scale(.98);
	transform-origin: top center;
	transition: opacity .14s ease, transform .16s cubic-bezier(.34, 1.25, .64, 1);
	min-width: 180px;
	padding: 6px;
	background: var(--mw-elevated);
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-r-md);
	box-shadow: var(--mw-shadow);
}

.mw-menu.is-open {
	opacity: 1;
	transform: none;
}

.mw-menu button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 9px 10px;
	border-radius: var(--mw-r-sm);
	font-family: inherit;
	font-size: .78rem;
	color: var(--mw-text);
	cursor: pointer;
	text-align: start;
}

.mw-menu button:hover { background: var(--mw-surface); }
.mw-menu button.is-danger { color: var(--mw-rose); }

/* ------------------------------------------------- counts that open a list */

/*
 * A count with a list behind it is a link, and has to look like one, or nobody
 * finds it. Underlined on hover rather than always: at rest the actions row
 * should still read as a row of counts, not as a row of links.
 */
.mw-stat [data-open] {
	cursor: pointer;
	text-underline-offset: 3px;
}

.mw-stat:hover [data-open],
.mw-stat [data-open]:hover {
	text-decoration: underline;
}

/* Focusing the stat by keyboard should show the same affordance. */
.mw-stat:focus-visible [data-open] { text-decoration: underline; }

/* An empty count is nothing to click, and must not offer a caret either. */
.mw-stat [data-open]:empty { cursor: inherit; }

/* ------------------------------------------------------- repost as a dialog */

/*
 * Modelled on X's quote composer, where most of the design is in what is left
 * out: no dialog title, no box around the field, no counter until there is
 * something to count. What remains is your avatar, somewhere to write, the post
 * being quoted, and one button.
 */

/*
 * No title. The head is a close button and nothing else, at the start of the
 * bar — X puts it there, and the dialog needs no label when its whole body is
 * a compose field with the quoted post under it.
 */
.mw-sheet--compose .mw-sheet__head {
	border-bottom: 0;
	padding-bottom: 0;
}

/*
 * No title, but the close stays where it sits on every other sheet — at the
 * far edge — rather than moving to the near one just because it is now alone
 * on the row. A control that changes sides between dialogs is a control you
 * have to look for.
 */
.mw-sheet--compose .mw-sheet__title { display: none; }
.mw-sheet--compose .mw-sheet__close {
	margin-inline-start: auto;
	font-size: 1.15rem;
}

.mw-sheet--compose .mw-sheet__body { padding: 0; }

.mw-qc { display: block; }

.mw-qc__row {
	display: flex;
	gap: 12px;
	padding: 6px 16px 4px;
}

.mw-qc__main { flex: 1; min-width: 0; }

/*
 * Borderless and transparent: the dialog is the container, so a second frame
 * inside it is one frame too many. Larger than body copy, as a compose field
 * is on every platform that does this well — it is the thing you came here for.
 */
.mw-qc__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 0;
	background: transparent;
	color: var(--mw-text);
	font: inherit;
	font-size: 1.12rem;
	line-height: 1.75;
	padding: 8px 0;
	margin: 0;
	resize: none;
	overflow-y: auto;
	min-height: 52px;
}

.mw-qc__input::placeholder { color: var(--mw-muted); }
.mw-qc__input:focus { outline: none; }

.mw-qc__previews { margin-top: 10px; }

/* Context, not a target — nothing in here opens anything. */
.mw-quote--static { cursor: default; }
.mw-quote--static .mw-quote__body { -webkit-line-clamp: 6; }

.mw-qc__note { margin: 10px 0 0; font-size: .78rem; }
.mw-qc__note.is-error { color: var(--mw-rose); }

/* ---- the bar along the bottom ---- */

.mw-qc__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px 14px;
	margin-top: 4px;
	border-top: 1px solid var(--mw-border);
}

.mw-qc__tools { display: flex; align-items: center; gap: 2px; }

.mw-qc__tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--mw-gold);
	font-size: 1.02rem;
	cursor: pointer;
	transition: background .2s ease;
}

.mw-qc__tool:hover { background: rgba(255, 208, 20, .14); }

/* Labelled for screen readers without putting the words on screen. */
.mw-qc__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.mw-qc__end {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-inline-start: auto;
}

/* ---- the counter ring ---- */

/*
 * Shared by the feed composer and the quote dialog. A ring that fills as you
 * type, absent until there is something to count, and only giving up the exact
 * figure in the last stretch — which is the only point at which the number is
 * worth reading.
 */

.mw-count {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

.mw-count svg {
	width: 100%;
	height: 100%;
	/* Starts the sweep at 12 o'clock rather than 3. */
	transform: rotate(-90deg);
}

.mw-count circle {
	fill: none;
	stroke-width: 2.2;
}

.mw-count__track { stroke: var(--mw-border); }

.mw-count__fill {
	stroke: var(--mw-gold);
	stroke-linecap: round;
	transition: stroke-dashoffset .18s ease, stroke .18s ease;
}

/* Near the limit the ring grows and gives up the exact number, because that is
   the only point at which the figure is worth reading. */
.mw-count.is-low { width: 30px; height: 30px; }
.mw-count.is-low .mw-count__fill { stroke: #e0a800; }

.mw-count.is-over { width: 30px; height: 30px; }
.mw-count.is-over .mw-count__fill { stroke: var(--mw-rose); }
.mw-count.is-over .mw-count__left { color: var(--mw-rose); }

.mw-count__left {
	position: absolute;
	font-size: .62rem;
	font-weight: 600;
	color: var(--mw-muted);
	line-height: 1;
}

.mw-composer__sep {
	width: 1px;
	height: 28px;
	background: var(--mw-border);
}

.mw-qc__submit {
	border: 0;
	border-radius: 999px;
	padding: 9px 22px;
	font: inherit;
	font-size: .85rem;
	font-weight: 700;
	cursor: pointer;
	background: var(--mw-gold);
	color: #14161a;
	transition: opacity .2s ease;
}

.mw-qc__submit:hover:not(:disabled) { opacity: .88; }
.mw-qc__submit:disabled { opacity: .45; cursor: default; }

@media (max-width: 520px) {
	.mw-qc__input { font-size: 1.02rem; }
	.mw-qc__row { padding-inline: 12px; }
	.mw-qc__bar { padding-inline: 12px; }
}

/* The quotes list is a stack of real posts, so they keep their own dividers. */
.mw-sheet__body > .mw-post + .mw-post { border-top: 1px solid var(--mw-border); }

/* ----------------------------------------------------------------- stories */

/*
 * The rule sits ABOVE the rings: the strip reads as the first thing inside the
 * content area rather than as the last thing tacked onto the masthead.
 */
.mw-stories {
	margin: 0 0 6px;
	padding: 16px 0 4px;
	border-top: 1px solid var(--mw-border);
}

/*
 * At the head of the middle column the strip keeps its own rule, closing off
 * the header above it. The first article's top border then separates the two,
 * which is the same separator every other article gets.
 */
.mena-home-grid__news .mw-stories {
	margin-bottom: 0;
}

.mw-stories__rail {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding: 0 2px 8px;
	scrollbar-width: none;
}

.mw-stories__rail::-webkit-scrollbar { display: none; }

.mw-ring {
	flex: none;
	width: 72px;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

/*
 * The ring is the frame's PADDING, and that is the whole trick.
 *
 * This was previously an .mw-ring__inner sized at 100% of the frame — which, on
 * a frame with no padding, covered the gradient completely. Whatever band was
 * visible came from stray borders, which is why widening it did nothing.
 * The gradient now shows through the padding, so ring width is one number.
 */
.mw-ring__frame {
	position: relative;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	box-sizing: border-box;
	padding: 2px;                    /* watched: a thin, quiet band */
	background: var(--mw-border);
}

/* Unwatched: a warm gold-to-orange sweep. Identical in both themes — orange
   holds against white and against #131415. */
.mw-ring--unseen .mw-ring__frame {
	padding: 3px;
	background: conic-gradient(
		from 200deg,
		var(--mena-ring-a) 0%,
		var(--mena-ring-b) 30%,
		var(--mena-ring-c) 50%,
		var(--mena-ring-b) 70%,
		var(--mena-ring-a) 100%
	);
}

/* The gap between band and avatar — the frame's own background must not show. */
.mw-ring__inner {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--mw-elevated);
	padding: 2px;
	box-sizing: border-box;
	display: grid;
	place-items: center;
}

.mw-ring__avatar {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	background: var(--mw-surface-2);
	display: block;
}

.mw-ring__tile {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--mw-surface);
	color: var(--mw-gold-deep);
	font-size: 1.3rem;
	box-sizing: border-box;
}

/* The events tile is editorial, so it is pink rather than gold. */
.mw-ring__tile--events {
	background: linear-gradient(135deg, var(--mw-pink-deep), var(--mw-pink));
	color: #fff;
	position: relative;
}

.mw-ring__day {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1;
	font-family: inherit;
}

.mw-ring__month {
	position: absolute;
	top: 60%;
	font-size: .55rem;
	font-weight: 600;
	letter-spacing: .06em;
	opacity: .9;
}

.mw-ring__badge {
	position: absolute;
	bottom: 0;
	inset-inline-end: 0;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--mw-gold);
	color: #000;
	display: grid;
	place-items: center;
	font-size: .55rem;
	box-shadow: 0 0 0 2px var(--mw-elevated);
}

.mw-ring__label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	max-width: 100%;
	font-size: .63rem;
	line-height: 1.6;
	color: var(--mw-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mw-ring--unseen .mw-ring__label { color: var(--mw-text); }
.mw-ring__label span {
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * The ring label runs at 10px, and a badge sized in em off that is too small to
 * register as anything. It is a status mark, not punctuation — pinned to a
 * legible size instead of tracking the caption.
 */
.mw-ring__label .mw-verified {
	width: 15px;
	height: 15px;
	vertical-align: -.25em;
}

/* ------------------------------------------------------------- story viewer */

/*
 * Every layer shares one motion vocabulary: the backdrop fades, the panel on it
 * rises and settles with a slight overshoot. Same durations and same curve for
 * sheets, the story viewer and the composer, so opening any of them feels like
 * the same gesture.
 */
.mw-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(12, 14, 18, .92);
	backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .2s ease;
	font-family: inherit;
}

.mw-overlay.is-open { opacity: 1; }

.mw-sheet,
.mw-viewer,
.mw-cs,
.mw-lightbox {
	opacity: 0;
	transform: translateY(14px) scale(.97);
	transition:
		opacity .18s ease,
		transform .24s cubic-bezier(.34, 1.2, .64, 1);
}

.mw-overlay.is-open .mw-sheet,
.mw-overlay.is-open .mw-viewer,
.mw-overlay.is-open .mw-cs,
.mw-overlay.is-open .mw-lightbox {
	opacity: 1;
	transform: none;
}

.mw-viewer {
	position: relative;
	width: min(420px, 96vw);
	height: min(88vh, 780px);
	background: #000;
	border-radius: var(--mw-r-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--mw-shadow-lg);
}

.mw-viewer__bars {
	position: absolute;
	top: 8px;
	inset-inline: 8px;
	display: flex;
	gap: 4px;
	z-index: 4;
}

.mw-viewer__bar {
	flex: 1;
	height: 2.5px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .3);
	overflow: hidden;
}

.mw-viewer__fill {
	display: block;
	height: 100%;
	width: 0;
	background: #fff;
	border-radius: 2px;
}

.mw-viewer__head {
	position: absolute;
	top: 22px;
	inset-inline: 12px;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
}

.mw-viewer__head .mw-avatar { border: 1.5px solid rgba(255, 255, 255, .8); }
.mw-viewer__who { flex: 1; min-width: 0; }
.mw-viewer__name {
	font-size: .78rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 3px;
}
.mw-viewer__time { font-size: .62rem; opacity: .75; }

/*
 * Desktop navigation. The tap zones behind these still work — they are the
 * touch gesture — but a pointer needs something to aim at.
 */
.mw-viewer__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: .88rem;
	line-height: 1;
	display: grid;
	place-items: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity .18s ease, background .18s ease;
}

/* Out of the way until the pointer is over the story. */
.mw-viewer:hover .mw-viewer__arrow { opacity: 1; }
.mw-viewer__arrow:hover { background: rgba(255, 255, 255, .34); }

/* Physical sides: in RTL, "previous" is to the right. */
.mw-viewer__arrow--prev { right: 10px; }
.mw-viewer__arrow--next { left: 10px; }

.mw-viewer__arrow[disabled] {
	opacity: 0 !important;
	pointer-events: none;
}

.mw-viewer__close,
.mw-viewer__nav {
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-size: 1.2rem;
	line-height: 1;
	padding: 4px;
}

.mw-viewer__stage {
	flex: 1;
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.mw-viewer__stage img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.mw-viewer__text {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	padding: 12% 10%;
	box-sizing: border-box;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 2;
	overflow-wrap: anywhere;
}

.mw-viewer__caption {
	position: absolute;
	bottom: 0;
	inset-inline: 0;
	padding: 40px 16px 16px;
	color: #fff;
	font-size: .82rem;
	line-height: 1.9;
	background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
	pointer-events: none;
}

.mw-viewer__tapzone {
	position: absolute;
	inset: 0;
	display: flex;
	z-index: 2;
}

.mw-viewer__tapzone > button {
	flex: 1;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.mw-viewer__foot {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
}

.mw-viewer__foot .mw-stat { color: rgba(255, 255, 255, .85); }
.mw-viewer__foot .mw-stat:hover { color: #fff; }
.mw-viewer__foot .mw-stat.is-liked { color: var(--mw-rose); }

.mw-viewer__reply {
	flex: 1;
	min-width: 0;
	display: flex;
	gap: 6px;
	align-items: center;
}

.mw-viewer__reply input {
	flex: 1;
	min-width: 0;
	width: auto !important;
	height: auto !important;
	background: rgba(255, 255, 255, .12) !important;
	border: 1px solid rgba(255, 255, 255, .25) !important;
	color: #fff !important;
	border-radius: 999px;
	padding: 7px 14px !important;
	font-family: inherit;
	font-size: .74rem;
}

.mw-viewer__reply input::placeholder { color: rgba(255, 255, 255, .6); }

/* ------------------------------------------------------------------ sheets */

.mw-sheet {
	width: min(600px, 96vw);
	max-height: 88vh;
	background: var(--mw-elevated);
	border-radius: var(--mw-r-lg);
	box-shadow: var(--mw-shadow-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: var(--mw-text);
}

.mw-sheet__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--mw-border);
}

.mw-sheet__title { flex: 1; margin: 0; font-size: .9rem; font-weight: 700; }

.mw-sheet__close {
	border: 0;
	background: transparent;
	color: var(--mw-muted);
	font-size: 1.1rem;
	cursor: pointer;
	line-height: 1;
	padding: 4px;
}

.mw-sheet__body {
	flex: 1;
	overflow-y: auto;
	padding: 4px 0;
}

.mw-sheet__foot {
	border-top: 1px solid var(--mw-border);
	padding: 10px 16px;
	background: var(--mw-surface);
}

.mw-empty {
	padding: 28px 16px;
	text-align: center;
	color: var(--mw-muted);
	font-size: .78rem;
}

/* comments */

.mw-comment {
	display: flex;
	gap: 10px;
	padding: 10px 16px;
	position: relative;
}

.mw-comment--reply { padding-inline-start: 46px; }

.mw-comment__main { flex: 1; min-width: 0; }

/*
 * Unchanged but for one line: `flex-wrap`.
 *
 * The row is still name, tick and time, centred, at the same gap it always
 * was. What was missing is that the handle below is set to `flex-basis: 100%`
 * to take a line of its own — and a 100% basis in a row that cannot wrap is
 * not a new line. It is one item asking for the whole width and then shrinking
 * to whatever is left, which is what flung it to the far end and folded the
 * date in half beside it.
 */
.mw-comment__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	row-gap: 1px;
	font-size: .74rem;
}

/*
 * The name gives way, the date does not.
 *
 * A display name can be any length and the date is four short words; if either
 * has to break it should be the one that can still be read from half of it.
 * `min-width: 0` is what lets an ellipsis happen at all inside a flex row.
 */
.mw-comment__name {
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The head runs at .74rem, so the badge's own .95em would render it around
   11px — visibly smaller than the same badge on the post above. Sized up here
   to match, rather than by growing the text around it. */
.mw-comment__head .mw-verified {
	width: 1.3em;
	height: 1.3em;
	vertical-align: -.28em;
}
/* Never broken across lines: "منذ 4 أيام" split after the numeral reads as two
   separate facts. */
.mw-comment__time {
	flex: none;
	white-space: nowrap;
	color: var(--mw-muted);
	font-size: .64rem;
}

.mw-comment__body {
	margin: 2px 0 0;
	font-size: .78rem;
	line-height: 1.85;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

.mw-comment__img {
	margin-top: 6px;
	max-width: 220px;
	width: 100%;
	border-radius: var(--mw-r-sm);
	display: block;
	cursor: zoom-in;
}

.mw-comment__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 4px;
}

.mw-comment__actions button {
	border: 0;
	background: transparent;
	padding: 0;
	font-family: inherit;
	font-size: .68rem;
	color: var(--mw-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.mw-comment__actions button:hover { color: var(--mw-text); }
.mw-comment__actions button.is-liked { color: var(--mw-rose); }

/* the reply composer at the bottom of the detail sheet */

.mw-reply {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.mw-reply__input {
	flex: 1;
	min-width: 0;
	width: 100% !important;
	box-sizing: border-box;
	background: var(--mw-elevated) !important;
	border: 1px solid var(--mw-border) !important;
	color: var(--mw-text) !important;
	border-radius: var(--mw-r-lg) !important;
	padding: 8px 14px !important;
	font-family: inherit;
	font-size: .78rem;
	line-height: 1.8;
	resize: none;
	min-height: 20px;
	max-height: 120px;
}

.mw-reply__to {
	font-size: .68rem;
	color: var(--mw-muted);
	margin: 0 0 6px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.mw-reply__to button {
	border: 0;
	background: transparent;
	color: var(--mw-rose);
	cursor: pointer;
	font-size: .68rem;
	font-family: inherit;
	padding: 0;
}

.mw-reply__preview {
	position: relative;
	display: inline-block;
	margin-bottom: 6px;
}

.mw-reply__preview img {
	max-height: 70px;
	border-radius: var(--mw-r-sm);
	display: block;
}

/* report reasons */

.mw-reasons__lead {
	margin: 0;
	padding: 16px 16px 4px;
	font-size: .74rem;
	line-height: 1.8;
	color: var(--mw-muted);
}

.mw-reasons { padding: 8px; }

.mw-reasons button {
	display: block;
	width: 100%;
	text-align: start;
	border: 1px solid transparent;
	background: transparent;
	padding: 11px 12px;
	border-radius: var(--mw-r-sm);
	font-family: inherit;
	font-size: .8rem;
	color: var(--mw-text);
	cursor: pointer;
}

.mw-reasons button:hover { background: var(--mw-surface); border-color: var(--mw-border); }
.mw-reasons button[disabled] { opacity: .5; cursor: default; }

/* confirmations */

.mw-confirm {
	margin: 0;
	padding: 24px 16px 8px;
	text-align: center;
	font-size: .82rem;
	line-height: 1.9;
	color: var(--mw-muted-strong);
}

.mw-confirm__row {
	display: flex;
	gap: 10px;
	padding: 8px 16px 18px;
	justify-content: center;
}

/* likers list */

.mw-liker {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	font-size: .8rem;
}

.mw-liker__name { display: flex; align-items: center; gap: 4px; }

/* lightbox */

.mw-lightbox {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.mw-lightbox img {
	max-width: 94vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: var(--mw-r-sm);
	display: block;
}

.mw-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.1rem;
}

.mw-lightbox__nav--prev { inset-inline-start: 16px; }
.mw-lightbox__nav--next { inset-inline-end: 16px; }

/* toast */

.mw-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(12px);
	z-index: 100010;
	max-width: min(420px, 92vw);
	background: #1a1a1a;
	color: #fff;
	padding: 11px 18px;
	border-radius: 999px;
	font-size: .78rem;
	line-height: 1.7;
	box-shadow: var(--mw-shadow-lg);
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
	text-align: center;
}

.mw-toast.is-open { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------------------------------------------------------- skeleton */

.mw-skel { display: flex; }

.mw-skel--post {
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--mw-border);
}

.mw-skel__avatar,
.mw-skel__ring,
.mw-skel__block,
.mw-skel__line {
	background: linear-gradient(90deg, var(--mw-skel-a) 25%, var(--mw-skel-b) 37%, var(--mw-skel-a) 63%);
	background-size: 400% 100%;
	animation: mw-shimmer 1.4s ease infinite;
}

@keyframes mw-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

.mw-skel__avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.mw-skel__avatar--32 { width: 32px; height: 32px; }
.mw-skel__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.mw-skel__line { height: 10px; border-radius: 5px; width: 100%; }
.mw-skel__line--40 { width: 40%; }
.mw-skel__line--70 { width: 70%; }

/* Stands in for a post's image, so the height a photo will take is held too. */
.mw-skel__block {
	height: 180px;
	border-radius: var(--mw-r-md);
	margin: 4px 0;
}

/*
 * A row in one of the lists a stat opens — likers, replies. Same pieces as the
 * post placeholder at the size those rows actually are, and divided the way the
 * real rows will be so the list does not visibly re-draw when it arrives.
 */
.mw-skel--liker {
	gap: 10px;
	padding: 12px 16px;
	align-items: flex-start;
}

/* .mw-skel--post already draws its own bottom rule, so only the liker rows
   need one — two borders meeting would read as a 2px line. */
.mw-skel--liker + .mw-skel--liker {
	border-top: 1px solid var(--mw-border);
}

.mw-skel--ring {
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 72px;
	flex: none;
}

.mw-skel__ring { width: 66px; height: 66px; border-radius: 50%; }
.mw-skel__line--ring { width: 46px; height: 8px; }

/* Reduced motion: keep the information, drop the movement. */
@media (prefers-reduced-motion: reduce) {
	.mw-overlay,
	.mw-sheet,
	.mw-viewer,
	.mw-cs,
	.mw-lightbox,
	.mw-menu {
		transition: none;
		transform: none;
	}
	.mw-viewer__arrow { transition: none; opacity: 1; }
	.mw-skel__avatar,
	.mw-skel__ring,
	.mw-skel__block,
	.mw-skel__line { animation: none; }
	.mw-stat.is-popping .bi { animation: none; }
	.mw-feed__refresh.is-spinning { animation: none; }
	.mw-overlay,
	.mw-viewer,
	.mw-sheet,
	.mw-toast { transition: none; }
}


/*
 * The toast is a fixed dark pill; on a dark page it has to lift off the
 * background rather than blend into it.
 */
:root[data-mena-theme="dark"] .mw-toast {
	background: #2c2c2e;
	border: 1px solid #3c3c3c;
}


/* ------------------------------------------------------- story composer */

/*
 * A port of the app's StoryComposer, not a form. The canvas IS the story: you
 * type straight onto the board, the backdrop swatches change it live, and the
 * only chrome is a close button, the mode toggle and the send key. Same
 * backdrops, same prompt, same layout as StoryComposer.kt — someone who posts
 * from the phone should recognise this instantly.
 */
.mw-cs {
	position: relative;
	width: min(400px, 94vw);
	height: min(84vh, 720px);
	border-radius: var(--mw-r-lg);
	overflow: hidden;
	box-shadow: var(--mw-shadow-lg);
	display: flex;
	flex-direction: column;
	background: #1a1a1a;
	font-family: inherit;
}

.mw-cs__canvas {
	position: absolute;
	inset: 0;
	background: #1a1a1a;
	transition: background .25s ease;
}

.mw-cs__photo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	background: #000;
}

/* Keeps the top controls readable over any photo, exactly as the app does. */
.mw-cs__scrim {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 110px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent);
	pointer-events: none;
}

.mw-cs__top,
.mw-cs__bottom {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
}

.mw-cs__bottom {
	margin-top: auto;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	padding-bottom: 14px;
}

.mw-cs__row { display: flex; align-items: center; gap: 10px; }

.mw-cs__icon {
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 1.05rem;
	line-height: 1;
	padding: 6px;
	cursor: pointer;
	border-radius: 50%;
	transition: background .2s ease;
}

.mw-cs__icon:hover { background: rgba(255, 255, 255, .16); }

.mw-cs__quota {
	margin-inline-start: auto;
	font-size: .68rem;
	color: rgba(255, 255, 255, .85);
	font-variant-numeric: tabular-nums;
}

.mw-cs__quota.is-out { color: var(--mw-rose); }

/* The board: a text field with no chrome, sitting on the canvas itself. */
.mw-cs__board {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	min-height: 0;
}

.mw-cs--photo .mw-cs__board {
	align-items: flex-end;
	padding-bottom: 8px;
}

.mw-cs__text {
	width: 100% !important;
	box-sizing: border-box;
	background: transparent !important;
	border: 0 !important;
	outline: none;
	resize: none;
	color: #fff !important;
	font-family: inherit;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.9;
	text-align: center;
	padding: 0 !important;
	max-height: 100%;
	overflow-y: auto;
	scrollbar-width: none;
	border-radius: 0 !important;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

.mw-cs__text::-webkit-scrollbar { display: none; }
.mw-cs__text::placeholder { color: rgba(255, 255, 255, .45); }

/* Over a photo the caption is a caption: smaller, and lifted off the image. */
.mw-cs--photo .mw-cs__text {
	font-size: .9rem;
	font-weight: 500;
	line-height: 1.8;
	padding: 30px 4px 10px !important;
	background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent) !important;
	border-radius: var(--mw-r-md) !important;
}

.mw-cs__swatches {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	flex-wrap: wrap;
}

.mw-cs--photo .mw-cs__swatches { visibility: hidden; }

.mw-cs__swatch {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .3);
	padding: 0;
	cursor: pointer;
	transition: transform .15s ease, border-color .15s ease;
}

.mw-cs__swatch[aria-pressed="true"] {
	border: 2px solid #fff;
	transform: scale(1.12);
}

.mw-cs__send {
	flex: none;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--mw-gold);
	color: var(--mw-on-gold);
	font-size: 1.05rem;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: filter .2s ease;
}

.mw-cs__send:hover { filter: brightness(.94); }

/* Never near-invisible when disabled: it isn't broken, it's just not ready. */
.mw-cs__send[disabled] {
	background: rgba(255, 255, 255, .25);
	color: rgba(255, 255, 255, .6);
	cursor: default;
	filter: none;
}

.mw-cs__error {
	margin: 0;
	text-align: center;
	font-size: .74rem;
	line-height: 1.7;
	color: #fff;
	background: rgba(245, 54, 92, .9);
	border-radius: var(--mw-r-sm);
	padding: 7px 10px;
}

@media (prefers-reduced-motion: reduce) {
	.mw-cs,
	.mw-cs__canvas,
	.mw-cs__swatch,
	.mw-cs__send { transition: none; }
}


/* ----------------------------------------------------- post detail sheet */

/* A post being read deserves more than list-density type. */
.mw-sheet .mw-post {
	cursor: default;
	padding: 16px;
}

.mw-sheet .mw-post:hover { background: transparent; }
.mw-sheet .mw-post__body { font-size: .9rem; line-height: 2.05; }
.mw-sheet .mw-post__name { font-size: .88rem; }

/*
 * The absolute timestamp, ruled off above and below. dir="ltr" on the element
 * itself keeps the Latin date from being reordered by the RTL sheet.
 */
.mw-detail__stamp {
	padding: 11px 16px;
	border-top: 1px solid var(--mw-border);
	border-bottom: 1px solid var(--mw-border);
	font-size: .72rem;
	color: var(--mw-muted);
	text-align: left;
	font-variant-numeric: tabular-nums;
}

.mw-comments__head {
	padding: 12px 16px 4px;
	font-size: .74rem;
	font-weight: 600;
	color: var(--mw-muted-strong);
	display: flex;
	align-items: center;
	gap: 6px;
}

.mw-comments__head span {
	background: var(--mw-surface-2);
	color: var(--mw-muted-strong);
	border-radius: 999px;
	padding: 1px 8px;
	font-size: .68rem;
	font-variant-numeric: tabular-nums;
}

.mw-empty--replies {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 34px 16px;
}

.mw-empty--replies .bi {
	font-size: 1.6rem;
	opacity: .45;
}

/* ---- the reply bar ---- */

.mw-sheet__foot .mw-reply { align-items: flex-end; gap: 8px; }

/*
 * A round send key rather than a wide button: it is one action on a single
 * line, and the app draws it the same way.
 */
/*
 * An arrow, not a paper plane.
 *
 * bi-send-fill points up and to the RIGHT, which in an RTL interface aims back
 * at the text the reader just wrote — it reads as "undo" rather than "send".
 * An upward arrow carries the same meaning in both directions, which is why
 * every chat application that ships in Arabic uses one.
 */
.mw-reply__send i,
.mw-cs__send i { font-weight: 700; }

.mw-reply__send {
	flex: none;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--mw-gold);
	color: var(--mw-on-gold);
	font-size: .92rem;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: filter .2s ease;
}

.mw-reply__send:hover { filter: brightness(.94); }

.mw-reply__send[disabled] {
	background: var(--mw-surface-2);
	color: var(--mw-muted);
	cursor: default;
	filter: none;
}

.mw-sheet__foot .mw-iconbtn {
	width: 40px;
	height: 40px;
	flex: none;
}

.mw-reply__to {
	justify-content: space-between;
	background: var(--mw-surface-2);
	border-radius: 999px;
	padding: 5px 12px;
}

.mw-reply__preview img {
	border: 1px solid var(--mw-border);
}


/* ------------------------------------------------------- rail: advert slot */

.mw-ad {
	display: block;
	margin-top: 16px;
	aspect-ratio: 1 / 1;
	border-radius: var(--mw-r-md);
	overflow: hidden;
	background: var(--mw-surface);
}

/*
 * A skyscraper is tall, not square: 300x600 is the slot every network sells.
 * Declared AFTER .mw-ad deliberately — same specificity, so source order is
 * what decides, and placed before it the square ratio simply won.
 */
.mw-ad--sky { aspect-ratio: 1 / 2; }

/* At narrow widths the rail sits under the article, where a 600px-tall column
   of advertisement is a wall between the reader and whatever follows. */
@media (max-width: 899px) {
	.mw-ad--sky { aspect-ratio: 3 / 1; }
}

/* A leaderboard above the body: wide and shallow, so it introduces the article
   rather than delaying it. */
.mw-ad--banner {
	aspect-ratio: 8 / 1;
	min-height: 90px;
	margin-top: 0;
	margin-bottom: 18px;
}

@media (max-width: 599px) {
	.mw-ad--banner { aspect-ratio: 4 / 1; }
}

/* An empty slot may as well sell itself, so the placeholder is an offer. */
.mw-ad--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border: 1px dashed var(--mw-border);
	background: var(--mw-surface);
	text-decoration: none !important;
	text-align: center;
	padding: 16px;
	transition: border-color .2s ease, background .2s ease;
}

.mw-ad--empty:hover {
	border-color: var(--mw-gold-deep);
	background: var(--mw-surface-2);
}

.mw-ad__label {
	font-size: .6rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mw-muted);
}

.mw-ad__cta {
	font-size: .92rem;
	font-weight: 700;
	color: var(--mw-text);
}

.mw-ad__sub { font-size: .68rem; color: var(--mw-muted); }

/*
 * A slot holds its creative; it does not get held open by it.
 *
 * Networks serve at fixed pixel sizes — a 728x90 leaderboard is 728px whatever
 * the column beneath it measures — so in a three-column layout the banner ran
 * past its box and over the text beside it. Two halves to the fix: nothing
 * inside a slot may exceed the slot's width, and a slot that actually has a
 * creative in it takes that creative's height instead of a declared ratio,
 * which is what was cropping the tall ones.
 */
.mw-ad > *,
.mw-ad iframe,
.mw-ad img,
.mw-ad ins,
.mw-ad canvas,
.mw-ad video {
	max-width: 100% !important;
	margin-inline: auto;
}

/* Not iframes: height:auto on a frame means 150px, not "whatever it asked for",
   which would crush an ad that set its own height attribute. */
.mw-ad img,
.mw-ad video { height: auto; }

.mw-ad:not(.mw-ad--empty) {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: auto;
	min-height: 0;
}

/* ------------------------------------------------------- rail: most read */

.mw-trend {
	margin-top: 16px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-r-md);
	background: var(--mw-elevated);
	overflow: hidden;
}

.mw-trend__title {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 11px 14px;
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--mw-text);
	background: var(--mw-surface);
	border-bottom: 1px solid var(--mw-border);
}

.mw-trend__title .bi { color: var(--mw-rose); font-size: .95rem; }

.mw-trend__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: trend;
}

.mw-trend__item { border-bottom: 1px solid var(--mw-border); }
.mw-trend__item:last-child { border-bottom: 0; }

.mw-trend__link {
	display: flex;
	align-items: center;
	gap: 14px;
	/* Room on the leading edge for the rank, which hangs off the disc. */
	padding: 11px 14px;
	text-decoration: none !important;
	color: inherit;
	transition: background .15s ease;
}

.mw-trend__link:hover { background: var(--mw-surface); }

.mw-trend__figure {
	position: relative;
	flex: none;
	width: 56px;
	height: 56px;
}

.mw-trend__thumb {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	background: var(--mw-surface-2);
	border: 1px solid var(--mw-border);
	box-sizing: border-box;
	display: block;
}

.mw-trend__thumb--blank { background: var(--mw-surface-2); }

/*
 * The rank sits in the disc's bottom-left corner, its baseline flush with the
 * bottom of the image rather than hanging below it, and is deliberately larger
 * than the circle can contain — it is the ranking that makes this a chart
 * rather than a list of links, so it reads first.
 *
 * The outline is eight offset shadows rather than -webkit-text-stroke, which
 * draws its stroke centred over the glyph and thins the numeral. This keeps the
 * digit legible where it crosses the photo AND where it crosses the panel.
 */
.mw-trend__rank {
	position: absolute;
	left: -5px;
	bottom: 0;
	font-size: 1.85rem;
	font-weight: 800;
	line-height: 1;
	color: var(--mw-text);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
	text-shadow:
		-2px -2px 0 var(--mw-elevated), 0 -2px 0 var(--mw-elevated),
		 2px -2px 0 var(--mw-elevated), 2px  0   0 var(--mw-elevated),
		 2px  2px 0 var(--mw-elevated), 0  2px 0 var(--mw-elevated),
		-2px  2px 0 var(--mw-elevated), -2px 0  0 var(--mw-elevated);
}

.mw-trend__item:first-child .mw-trend__rank { color: var(--mw-gold); }

/* Against a hovered row the outline has to follow the row, not the panel. */
.mw-trend__link:hover .mw-trend__rank {
	text-shadow:
		-2px -2px 0 var(--mw-surface), 0 -2px 0 var(--mw-surface),
		 2px -2px 0 var(--mw-surface), 2px  0   0 var(--mw-surface),
		 2px  2px 0 var(--mw-surface), 0  2px 0 var(--mw-surface),
		-2px  2px 0 var(--mw-surface), -2px 0  0 var(--mw-surface);
}

/* Full headline, however many lines it takes — a half-shown title is a worse
   answer than a taller row. */
.mw-trend__text {
	font-size: .76rem;
	line-height: 1.7;
	color: var(--mw-text);
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------ expanded timeline */

.mw-feed__expand {
	color: var(--mw-muted);
	font-size: .92rem;
	line-height: 1;
	padding: 4px;
	border-radius: 50%;
	text-decoration: none !important;
	transition: color .2s ease, background .2s ease;
}

.mw-feed__expand:hover {
	color: var(--mw-text);
	background: var(--mw-surface-2);
}

/*
 * The shortcut view: the discussion feed at reading width with the rail beside
 * it. Twitter's proportions — a main column around 600px and a fixed rail —
 * which is also why the feed here is a page-length column rather than the
 * viewport-height panel it is on the home grid.
 */
/*
 * Same container as the home page — 300 + 700 + 300 with the two gaps — so the
 * two views line up edge to edge instead of the timeline being its own width.
 * Splitting three ways keeps the feed near Twitter's 600-700px measure rather
 * than letting it sprawl across the whole 1364.
 */
.mena-timeline .mena-home-grid--timeline {
	grid-template-columns: 300px minmax(0, 1fr) 300px;
	grid-template-areas: "side news cal";
}

.mena-timeline .mena-home-grid__news { grid-area: news; }
.mena-home-grid__side { grid-area: side; min-width: 0; }

.mena-home-grid__side {
	position: sticky;
	top: 12px;
}

.mena-home-grid__side .mw-ad { margin-top: 0; }

/*
 * Two cards, not one: composing is its own act and does not belong inside the
 * list of what has already been posted. The section becomes a plain stack and
 * the composer and the timeline each take the card treatment.
 */
.mena-timeline .mw-feed {
	display: block;
	max-height: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.mena-timeline .mw-composer {
	background: var(--mw-elevated);
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-r-lg);
	margin-bottom: 16px;
}

.mena-timeline .mw-feed__scroll {
	overflow: hidden;             /* clips the last row to the rounded corner */
	background: var(--mw-elevated);
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-r-lg);
}

/* At full width the timeline is the page, so it reads at article size. */
.mena-timeline .mw-post { padding: 14px 18px; }
.mena-timeline .mw-post__body { font-size: .88rem; line-height: 2; }
/* The head goes with the name, so the badge beside it stays in proportion. */
.mena-timeline .mw-post__head { font-size: .86rem; }
.mena-timeline .mw-post__name { font-size: .86rem; }
.mena-timeline .mw-composer { padding: 14px 18px; }
.mena-timeline .mw-composer__input { font-size: .92rem; }
.mena-timeline .mw-grid--1 { max-height: 420px; }
.mena-timeline .mw-grid--1 img { max-height: 420px; }

/* The masthead is a link back to the site, not a banner to scroll past. */
.mena-timeline header.wp-block-template-part > .wp-block-group {
	padding-top: 14px !important;
	padding-bottom: 8px !important;
}

/*
 * A post is an article, so it gets the article masthead.
 *
 * /timeline/post/N/ resolves to the blog query, so the body carries mena-home
 * as well and the full masthead above would otherwise apply to it. This narrows
 * it to what single.html shows: the logo at 35px, the navbar, a hairline. The
 * wordmark, the strapline and the site navigation introduce a front page; over
 * a single post they are just height.
 *
 * Keyed off core block classes for the same reason the home rules are — they
 * are emitted whether the header was authored in the theme file or edited in
 * the site editor.
 */
.mena-postpage header.wp-block-template-part .wp-block-site-title,
.mena-postpage header.wp-block-template-part .wp-block-post-author-name,
.mena-postpage header.wp-block-template-part .wp-block-site-tagline,
.mena-postpage header.wp-block-template-part .wp-block-post-author-biography {
	display: none !important;
}

/*
 * The wordmark and the site menu on one line, which is what the header part's
 * own outer group already contains — it is only stacked vertically. Turning it
 * into a row, with the descriptive blocks above hidden, leaves exactly those
 * two.
 */
.mena-postpage header.wp-block-template-part .wp-block-navigation {
	margin: 0 !important;
	font-size: .82rem;
}

.mena-postpage header.wp-block-template-part .wp-block-navigation .wp-block-navigation__container {
	gap: 18px;
}

.mena-postpage header.wp-block-template-part {
	border-bottom: 1px solid var(--mena-border);
}

/* Logo at the reading edge with the menu beside it, not centred on a line of
   its own. This is the group that holds both. */
.mena-postpage header.wp-block-template-part .wp-block-group:has(> .wp-block-site-logo) {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 20px !important;
}

/* Both colourways are printed; only one is displayed. Inline-flex so the two
   images cannot add a baseline gap under the link. */
.mena-wordmark__link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

/* The 35px single.html uses, not the 66px the front page does. */
.mena-postpage header.wp-block-template-part .wp-block-site-logo img {
	width: auto !important;
	height: 35px !important;
}

@media (max-width: 768px) {
	.mena-postpage header.wp-block-template-part .wp-block-site-logo img {
		height: 25px !important;
	}
}


@media (max-width: 1199px) {
	/* The advert folds under the timeline before the calendar does. */
	.mena-timeline .mena-home-grid--timeline {
		grid-template-columns: minmax(0, 1fr) 300px;
		grid-template-areas:
			"news cal"
			"side cal";
	}
	.mena-home-grid__side { position: static; }
}

@media (max-width: 900px) {
	.mena-timeline .mena-home-grid--timeline {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "news" "cal" "side";
	}
}


/* --------------------------------------------------- post as its own page */

.mw-postpage {
	background: var(--mw-elevated);
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-r-lg);
	overflow: hidden;
}

/*
 * Two states, one row.
 *
 * At rest it is a back arrow and nothing else — no title strip repeating what
 * the URL already says, no rule cutting the post off from the masthead above
 * it. Once a sub-view is pushed over the conversation the same row becomes
 * that view's header: the title appears and the rule with it, because now
 * there is a second thing on the page that needs naming.
 */
.mw-postpage__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px 2px;
}

.mw-postpage__head .mw-postpage__title { display: none; }

.mw-postpage.is-stacked .mw-postpage__head {
	padding: 12px 16px;
	border-bottom: 1px solid var(--mw-border);
	background: var(--mw-surface);
}

.mw-postpage.is-stacked .mw-postpage__title { display: block; }

/* Doubles as the view stack's back control: a link at rest, a "pop" once a
   report or confirmation has been pushed over the conversation. */
.mw-postpage__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	color: var(--mw-muted);
	font-size: 1rem;
	line-height: 1;
	border-radius: 50%;
	text-decoration: none !important;
	transition: color .2s ease, background .2s ease;
}

.mw-postpage__back:hover {
	color: var(--mw-text);
	background: var(--mw-surface-2);
}

.mw-postpage__title {
	margin: 0;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--mw-text);
}

.mw-postpage .mw-post { cursor: default; padding: 16px; }
.mw-postpage .mw-post:hover { background: transparent; }
.mw-postpage .mw-post__body { font-size: .92rem; line-height: 2.05; }

.mw-postpage .mw-sheet__foot {
	border-top: 1px solid var(--mw-border);
	padding: 10px 16px;
	background: var(--mw-surface);
}

/* Two lines of room to write in: on a page this wide a single-line box reads
   as a search field rather than as somewhere to compose. */
.mena-timeline .mw-composer__input {
	min-height: 62px;
}

/* ========================================================= THE ARTICLE ===

   The reading page, given the home page's shape: headline and stamp across the
   full measure, picture beneath, then three columns.

   Every selector below keys off a core block class rather than off this theme's
   markup. That is deliberate and load-bearing: these templates were edited in
   the site editor, so they render from the database and the theme's own files
   are no longer what is on screen. Core emits .wp-block-post-title and its
   siblings either way.
*/

/* ---- the masthead, matching the post page ---- */

/*
 * The article template's header bar is a group with its background hardcoded to
 * #121314ed — a dark-theme leftover that became a black slab in the light one.
 * The real header part now renders inside it, so the wrapper's own colour and
 * padding are stripped back rather than the bar being hidden.
 *
 * Every group that contains the header is caught, because the bar is two or
 * three groups deep and any one of them may be carrying the colour. They hold
 * nothing else — the article's own content lives in a different branch.
 */
:is(.mena-article, .mena-innerpage) .wp-block-group:has(header.wp-block-template-part) {
	background-color: transparent !important;
	background: none !important;
	border: 0 !important;
	position: static !important;

	/*
	 * Stripped back to nothing, width included. On the post page the header
	 * part is a direct child of .wp-site-blocks and runs edge to edge; here it
	 * was buried inside the article template's constrained group, so it came
	 * out narrower than the page and offset from it. Removing the wrappers'
	 * padding, measure and centring leaves the part itself to set the inset —
	 * which is what makes the two pages render the same header.
	 */
	padding: 0 !important;

	/*
	 * margin, not margin-inline. WordPress's global styles put a block margin
	 * above every direct child of .wp-site-blocks:
	 *
	 *   :where(.wp-site-blocks) > * { margin-block-start: 24px }
	 *
	 * which is where the band of white between the navbar and the menu came
	 * from. Clearing only the inline margins left it standing.
	 */
	margin: 0 !important;
	max-width: none !important;
	width: auto !important;

	/*
	 * The one that actually mattered.
	 *
	 * The header's immediate parent is is-layout-flex, so the header is a FLEX
	 * ITEM — and a flex item with width:auto is sized to its CONTENT, not to
	 * its container. Every max-width and margin override written before this
	 * was correct and had no effect, because the width was never coming from
	 * those properties at all. Making the wrappers block containers is what
	 * lets the header fill them.
	 */
	display: block !important;
}

/* Anything left of the old bar — a stray logo image outside the part. */
.mena-article header.wp-block-template-part ~ p:has(> a > .header-logo-mena) { display: none !important; }

/*
 * There used to be a rule here hiding the header part's [top_navbar] on article
 * pages, on the grounds that the article template already had a bar of its own
 * above it and the part brought a second one.
 *
 * That is no longer true, and it is worth writing down why, because the rule
 * looked correct right up until it took the navbar off the site.
 *
 * Mena_Web_UI_Article::render_block does not ADD the header part above the
 * article's bar — it REPLACES the paragraph that held the old logo WITH the
 * part. So there is one bar on an article page, not two, and it is the part's.
 * single.html carries no [top_navbar] of its own; nothing in the theme's files
 * does. The navbar the site actually shows comes from the header part, and the
 * part is on every template that matters — the front page, ordinary pages, and
 * now the article.
 *
 * Hiding it here left article pages with no search box, no sign-in link, no
 * sign-out link and no login modal, since the modal is printed by the same
 * shortcode. Nothing replaces it, so nothing hides it.
 */

/* The same compact treatment the post page gives this part. */
:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-site-title,
:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-post-author-name,
:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-site-tagline,
:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-post-author-biography,
:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-post-title {
	display: none !important;
}

/*
 * The measure is imposed on the header itself, not on its wrappers.
 *
 * WordPress's constrained layout does not narrow the group — it narrows the
 * group's CHILDREN:
 *
 *   :where(.wp-block-group.is-layout-constrained) > :where(:not(.alignfull)…) {
 *       max-width: var(--wp--style--global--content-size);
 *       margin-left: auto !important;
 *       margin-right: auto !important;
 *   }
 *
 * So stripping the ancestors' padding and width did nothing to the header, and
 * it kept rendering ~860px wide and centred while the post page's ran edge to
 * edge. The override has to land here, on the child, and it has to out-shout
 * two !important margins.
 */
:is(.mena-article, .mena-innerpage) header.wp-block-template-part {
	border-bottom: 1px solid var(--mena-border);
	margin-bottom: 14px;
	display: block;
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-group:has(> .wp-block-site-logo) {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 20px !important;
}

:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-site-logo img,
:is(.mena-article, .mena-innerpage) header.wp-block-template-part .mena-wordmark__img {
	width: auto !important;
	height: 35px !important;
}

:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-navigation {
	margin: 0 !important;
	font-size: .82rem;
}

@media (max-width: 768px) {
	:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-site-logo img,
	:is(.mena-article, .mena-innerpage) header.wp-block-template-part .mena-wordmark__img { height: 25px !important; }
}

/*
 * The vertical air inside the header.
 *
 * The part is authored for a front-page masthead: its inner group carries
 * padding-top:4vh, and .is-layout-flow puts a 24px margin above every child.
 * That is right for a banner and far too much for a bar, so the padding and the
 * flow margins are cleared and one modest band is given back at the top level.
 *
 * padding-block, not padding: the horizontal padding is what insets the logo
 * and menu from the page edge, and it stays.
 */
:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-group,
.mena-postpage header.wp-block-template-part .wp-block-group {
	padding-block: 0 !important;
	margin-block: 0 !important;
}

:is(.mena-article, .mena-innerpage) header.wp-block-template-part .is-layout-flow > *,
.mena-postpage header.wp-block-template-part .is-layout-flow > * {
	margin-block-start: 0 !important;
}

:is(.mena-article, .mena-innerpage) header.wp-block-template-part > .wp-block-group,
.mena-postpage header.wp-block-template-part > .wp-block-group {
	padding-block: 9px !important;
}

/*
 * The spacers and the author biography inside the header exist to give the
 * front page's masthead its height. On a compact bar they are just gaps.
 */
:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-spacer,
.mena-postpage header.wp-block-template-part .wp-block-spacer,
:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-post-author-biography,
.mena-postpage header.wp-block-template-part .wp-block-post-author-biography { display: none !important; }

/*
 * The wordmark and the menu are NOT siblings: the part nests the menu inside a
 * second vertical group beside the logo. So the logo's row is made horizontal
 * and the group holding the menu is flattened to a plain block — which puts the
 * two on one line without needing them to be siblings.
 */
:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-group:has(.wp-block-navigation):not(:has(.wp-block-site-logo)),
.mena-postpage header.wp-block-template-part .wp-block-group:has(.wp-block-navigation):not(:has(.wp-block-site-logo)) {
	display: block !important;
	margin: 0 !important;
	gap: 0 !important;
	flex: 1 1 auto;
	min-width: 0;
}

/* ---- one row, both pages ----

   Written against the group that holds the NAVIGATION rather than the one that
   holds the logo. That is the reliable anchor: the logo is a site-logo block on
   one page and a plain image on the other, so keying off it matched in one
   place and missed in the other — which is why the wordmark sat above the menu
   here and beside it there. Both live in the same group, so the menu finds it
   either way.
*/
:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-group:has(> .wp-block-navigation),
.mena-postpage header.wp-block-template-part .wp-block-group:has(> .wp-block-navigation) {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 24px !important;
}

/* The menu takes the room the wordmark does not, and scrolls rather than wraps. */
:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-navigation,
.mena-postpage header.wp-block-template-part .wp-block-navigation {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * The menu, centred on the PAGE rather than on what the wordmark leaves.
 *
 * In the flex row above the menu is a sibling of the logo, so it centres inside
 * the remaining track — which means the wider the wordmark the further left the
 * menu sits, and it is never actually in the middle of anything. Taking it out
 * of flow and pinning it across the row centres it against the row's full
 * width, with the logo still occupying its own end of the same line.
 *
 * inset-inline:0 + width:max-content + margin-inline:auto is the absolute
 * centring trick: with both edges pinned and an intrinsic width, auto margins
 * split the slack evenly. Direction-agnostic, so RTL needs no second rule.
 *
 * Desktop only. Below this the menu is wide enough relative to the bar that
 * centring it would put it under the wordmark, so the in-flow row — where the
 * menu scrolls sideways instead — stays.
 */
/*
 * The menu, centred on the PAGE rather than on what the wordmark leaves.
 *
 * The nav block already centres its own items — it carries WordPress's
 * is-content-justification-center. The trouble is what it centres them IN: the
 * nav is a block inside the group beside the logo, so its box starts where the
 * logo ends, and the items are centred on 1236px of a 1426px row. Off by half
 * the wordmark plus the gap, every time, whatever the viewport.
 *
 * So the fix is not to move the menu. It is to give the nav the whole row to
 * centre inside, by lifting the WORDMARK out of flow. The group holding the
 * menu is the row's only remaining in-flow child, it stretches to the full
 * width, and the nav — and the items inside it — line up with the page.
 *
 * An earlier attempt did the opposite, positioning the NAV absolutely, and the
 * menu vanished from the bar: the nav is not a child of the group that was
 * being made the positioning context, so it was pinned against the wrong box
 * entirely. The wordmark IS a child of that group, which is what makes this
 * version work.
 *
 * min-height because the row's height would otherwise come from the 21px menu
 * alone once the 35px wordmark stops taking part in layout.
 */
@media (min-width: 1100px) {
	:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-group:has(> .wp-block-site-logo),
	.mena-postpage header.wp-block-template-part .wp-block-group:has(> .wp-block-site-logo) {
		position: relative;
		min-height: 35px;
	}

	:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-group > .wp-block-site-logo,
	.mena-postpage header.wp-block-template-part .wp-block-group > .wp-block-site-logo {
		position: absolute;
		/* Logical, so RTL puts it on the right without a second rule. */
		inset-inline-start: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
	}
}

:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-navigation__container,
.mena-postpage header.wp-block-template-part .wp-block-navigation__container {
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scrollbar-width: none;
}

:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-navigation__container::-webkit-scrollbar,
.mena-postpage header.wp-block-template-part .wp-block-navigation__container::-webkit-scrollbar { display: none; }

:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-navigation-item__content,
.mena-postpage header.wp-block-template-part .wp-block-navigation-item__content { white-space: nowrap; }

/* Whatever draws the wordmark — a site-logo block, our two-colourway pair, or
   the template's own <img> — is the same height in both places. */
:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-site-logo img,
:is(.mena-article, .mena-innerpage) header.wp-block-template-part .mena-wordmark__img,
:is(.mena-article, .mena-innerpage) header.wp-block-template-part .header-logo-mena,
.mena-postpage header.wp-block-template-part .wp-block-site-logo img,
.mena-postpage header.wp-block-template-part .mena-wordmark__img,
.mena-postpage header.wp-block-template-part .header-logo-mena {
	height: 35px !important;
	width: auto !important;
	max-width: none !important;
}

:is(.mena-article, .mena-innerpage) header.wp-block-template-part .wp-block-site-logo,
.mena-postpage header.wp-block-template-part .wp-block-site-logo {
	flex: none;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0;
}

/* ---- headline, byline, stamp, picture ---- */

/*
 * The article sets the same measure the home page does, so the headline above
 * the columns and the columns themselves are one container rather than two of
 * different widths.
 */
/*
 * An inner page is an article as far as the masthead is concerned.
 *
 * Every rule that trims this header down was written against .mena-article, so
 * rather than a second copy of thirty selectors, the class joins them. The
 * article's own grid and typography rules are left alone — those need markup a
 * page does not have, so they simply never match.
 */
:is(.mena-article, .mena-innerpage) {
	--mena-page: 1364px;
	--wp--style--global--content-size: var(--mena-page);
}

.mena-article__head { margin-bottom: 20px; }

.mena-article__title {
	margin: 0 0 6px;
	line-height: 1.4;
	/* Semi-bold and a step larger: at this size the weight was doing the work
	   the size should do, and heavy Arabic display type closes its counters. */
	font-weight: 600;
	font-size: clamp(1.55rem, 2.9vw, 2.35rem);
	color: var(--mw-text);
}

/* Author and stamp on one line, divided the way the site menu divides itself. */
.mena-article__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
	font-size: .76rem;
	color: var(--mw-muted);
}

.mena-article__sep { color: var(--mw-gold-deep); font-size: .6rem; }

/* Latin numerals and an English meridiem, reading left to right on their own. */
.mena-article__stamp {
	direction: ltr;
	font-variant-numeric: tabular-nums;
}

/*
 * Before the words, and capped. At full measure an uncapped photograph fills
 * the screen and pushes the opening paragraph below the fold — which on a news
 * page is the one thing the picture exists to introduce.
 */
.mena-article__hero {
	margin: 16px 0 0;
	border-radius: var(--mw-r-lg);
	overflow: hidden;
	line-height: 0;
}

.mena-article__hero img {
	width: 100%;
	height: auto;
	max-height: min(64vh, 560px);
	object-fit: cover;
	display: block;
}

/* ---- the three columns ---- */

/* No rails to show, so the article keeps the measure to itself. */
.mena-article-wrap--solo .mena-article-grid__main { max-width: 820px; margin-inline: auto; }

.mena-article-grid {
	direction: ltr;
	display: grid;
	/*
	 * Two rails, one width.
	 *
	 * They were 260 and 290 — the asymmetry came from squeezing 30px out of the
	 * left rail so the reading column could hold a 728px leaderboard. It works
	 * and it is visible: a page framed by two columns of different widths looks
	 * off-centre even when the middle is exactly centred.
	 *
	 * 275 each keeps the same total, so the reading column is the width it was
	 * and the leaderboard still fits. The ad slots are sized by aspect-ratio
	 * rather than in pixels, so neither rail cares which number it gets.
	 */
	grid-template-columns: 275px minmax(0, 1fr) 275px;
	grid-template-areas: "trend main related";
	gap: 24px;
	align-items: start;
}

.mena-article-grid__trend   { grid-area: trend; position: sticky; top: 12px; }
.mena-article-grid__main    { grid-area: main; min-width: 0; }
.mena-article-grid__related { grid-area: related; position: sticky; top: 12px; }

.mena-article-grid__main > * { direction: rtl; }

/*
 * A page standing in the article's grid.
 *
 * Anything that gave itself a reading measure of its own — a poll card is the
 * first — has to give it up here: the grid's middle column IS the measure now,
 * and a 720px card centred inside an 766px column reads as a mistake in a way a
 * 720px card centred on the page does not.
 */
.mena-page-wrap .mena-article-grid__main > * { max-width: none; }

/*
 * All three columns start on the same line.
 *
 * The rail sections carry margin-block-start: 16px, which is right on an
 * article — they hang below the headline block that spans the page. Here there
 * is nothing above them, so that margin is 16px of daylight on the rails and
 * none in the middle, and the three columns read as three different heights.
 */
.mena-page-wrap .mena-article-grid > * > :first-child { margin-block-start: 0 !important; }

/* The rails fold away before the article does: the words are the page. */
@media (max-width: 1199px) {
	.mena-article-grid {
		grid-template-columns: minmax(0, 1fr) 300px;
		grid-template-areas:
			"main related"
			"main trend";
	}
	.mena-article-grid__trend,
	.mena-article-grid__related { position: static; }
}

@media (max-width: 899px) {
	.mena-article-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "main" "related" "trend";
		gap: 22px;
	}
}

/* ---- related articles ---- */

.mw-related {
	background: var(--mw-elevated);
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-r-lg);
	padding: 14px 16px 6px;
	margin-top: 16px;
}

.mw-related__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: .9rem;
	font-weight: 700;
	color: var(--mw-text);
}

.mw-related__title .bi { color: var(--mw-gold-deep); }

.mw-related__list { list-style: none; margin: 0; padding: 0; }

.mw-related__item + .mw-related__item { border-top: 1px solid var(--mw-border); }

/* The same lift the trending list gives a row, for the same reason. */
.mw-related__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 8px;
	margin-inline: -8px;
	border-radius: var(--mw-r-sm);
	text-decoration: none !important;
	color: inherit;
	transition: background .15s ease;
}

.mw-related__link:hover { background: var(--mw-surface); }

.mw-related__figure { flex: none; width: 64px; height: 48px; }

/*
 * An article with no picture: the wordmark, sunk into the tile rather than
 * printed on it. Both colourways are present and CSS picks, so it reads in
 * either theme; the opacity is what keeps it a placeholder instead of a logo
 * competing with the headline beside it.
 */
/*
 * Written with the figure in front of it on purpose. The tile carries BOTH
 * classes, and .mw-related__thumb — declared below, at equal specificity —
 * therefore won on source order and set the tile back to display:block. With
 * no flex context the centring had nothing to act on and the wordmark sat
 * against the starting edge. This outranks it instead of relying on order.
 */
.mw-related__figure .mw-related__thumb--blank {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--mw-surface-2);
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-r-sm);
	box-sizing: border-box;
	padding: 4px;
}

/*
 * No display here, and that is the whole fix.
 *
 * The tile holds BOTH colourways and mena-theme.css hides the wrong one with
 * `.mena-logo--dark { display: none }` — a single class, which a two-class
 * selector like this one outranks. Setting display:block put both wordmarks
 * back on the page, side by side inside the flex tile, which is why the
 * visible one sat off to one side of a box it was supposedly centred in.
 * Flex items are blockified anyway, so nothing was gained by saying it.
 */
.mw-related__thumb--blank img {
	width: auto;
	max-width: 76%;
	max-height: 62%;
	height: auto;
	object-fit: contain;
	opacity: .28;
	filter: grayscale(1);
}

.mw-related__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: var(--mw-r-sm);
	background: var(--mw-surface-2);
}

/*
 * flex:1, which it was missing — and that is why the date wandered.
 *
 * Without it the body is only as wide as its own text, so the date, which is
 * aligned to the left of whatever contains it, landed under the left edge of
 * the TITLE rather than the left edge of the card. A three-line headline put
 * it where it belonged and a one-word one left it stranded in the middle.
 */
.mw-related__body { flex: 1; min-width: 0; }

.mw-related__text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .76rem;
	line-height: 1.65;
	color: var(--mw-text);
}

.mw-related__link:hover .mw-related__text { color: var(--mw-gold-deep); }

.mw-related__when {
	display: block;
	margin-top: 3px;
	font-size: .64rem;
	color: var(--mw-muted);
	text-align: start;
	font-variant-numeric: tabular-nums;
}

/* ---- the reading bar ---- */

.mena-article__tools {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--mw-border);
}

.mena-article__sizes { display: flex; align-items: center; gap: 4px; }

.mena-article__tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px;
	min-width: 32px;
	padding: 0 8px;
	border: 1px solid var(--mw-border);
	border-radius: 999px;
	background: transparent;
	color: var(--mw-muted);
	font: inherit;
	font-size: .74rem;
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.mena-article__tool:hover:not(:disabled) {
	color: var(--mw-text);
	border-color: var(--mw-text);
}

/* Disabled at the ends of the scale, so the control says where it stops. */
.mena-article__tool:disabled { opacity: .4; cursor: default; }

/* Sharing is the wider affordance of the two, so it takes the far edge. */
.mena-article__tool--wide { margin-inline-start: auto; padding: 0 14px; }

.mena-article__aa { font-weight: 700; font-size: 1.05rem; line-height: 1; }
.mena-article__aa--sm { font-size: .78rem; }

/*
 * The reader's own size — and the one declaration on this page that has to be
 * !important.
 *
 * The Post Content block in this site's template carries a font size set in
 * the editor, which WordPress emits as an INLINE style on the wrapper:
 *   style="font-size:clamp(1.039rem, 1.039rem + ((1vw - 0.2rem) * 1.32), 1.6rem)"
 * An inline declaration outranks every selector in every stylesheet, so no
 * amount of specificity here was ever going to move it. That is why the
 * control appeared dead while the script behind it was working correctly the
 * whole time: --mena-read changed on every click and nothing read it.
 *
 * The base is a reading size rather than that clamp's 1.6rem ceiling. At the
 * old size the em multipliers below put headings near 40px, which is what
 * "the text is huge" was.
 */
.mena-article-grid__main :is(.wp-block-post-content, .entry-content) {
	font-size: calc(1.08rem * var(--mena-read, 1)) !important;
	line-height: 2;
	transition: font-size .15s ease;
}

.mena-article-grid__main :is(.wp-block-post-content, .entry-content)
:where(p, li, dd, dt, blockquote, address, table, .wp-block-quote) {
	font-size: 1em;
}

/*
 * !important here too, for the same reason: a heading given a size in the
 * editor carries its own inline clamp, and one that ignores the control while
 * the paragraphs around it obey reads as the control being broken.
 */
.mena-article-grid__main :is(.wp-block-post-content, .entry-content) :where(h1) { font-size: 1.7em !important; }
.mena-article-grid__main :is(.wp-block-post-content, .entry-content) :where(h2) { font-size: 1.42em !important; }
.mena-article-grid__main :is(.wp-block-post-content, .entry-content) :where(h3) { font-size: 1.24em !important; }
.mena-article-grid__main :is(.wp-block-post-content, .entry-content) :where(h4) { font-size: 1.12em !important; }
.mena-article-grid__main :is(.wp-block-post-content, .entry-content) :where(h5) { font-size: 1.02em !important; }
.mena-article-grid__main :is(.wp-block-post-content, .entry-content) :where(h6) { font-size: .94em !important; }

.mena-article-grid__main :is(.wp-block-post-content, .entry-content) :where(figcaption) {
	font-size: .82em !important;
	color: var(--mw-muted);
}

/*
 * Air above a heading, none of consequence below it.
 *
 * A subheading belongs to what follows it, so the space has to separate it
 * from the section it ends rather than sit between it and its own first
 * paragraph. Logical properties, because the block gap this overrides is
 * written the same way and a physical margin-top would settle the tie by
 * declaration order instead of by specificity.
 */
.mena-article-grid__main :is(.wp-block-post-content, .entry-content) :where(h1, h2, h3, h4, h5, h6) {
	margin-block-start: 1.7em;
	margin-block-end: .55em;
	line-height: 1.5;
}

/* Nothing to separate it from at the top of the article. */
.mena-article-grid__main :is(.wp-block-post-content, .entry-content) > :where(h1, h2, h3, h4, h5, h6):first-child {
	margin-block-start: 0;
}

/* ---- the conversation ---- */

/*
 * Drawn with the feed's own .mw-comment and .mw-reply classes, so the article's
 * comments and a discussion post's replies are the same component rather than
 * two that resemble each other. Only the container is described here.
 */
.mw-conv {
	background: var(--mw-elevated);
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-r-lg);
	padding: 14px 16px 16px;
	margin-top: 22px;
}

.mw-conv__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	font-size: .95rem;
	font-weight: 700;
	color: var(--mw-text);
}

.mw-conv__title b {
	font-size: .72rem;
	font-weight: 700;
	color: var(--mw-muted);
}

/*
 * A stack, and belt-and-braces about it.
 *
 * Something upstream makes lists flex on this site, and declaring the list a
 * block was not enough to win — the comments still came out in columns. So
 * this stops fighting over which display wins and makes the outcome the same
 * either way: if the list is a block, each row is a block-level flex line; if
 * something forces the list back to flex, `flex: 0 0 100%` gives every row the
 * full width anyway and the column direction keeps them stacked.
 */
.mw-conv__list,
.mw-conv__list .children {
	display: block !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Every row, at any depth — not just the list's own children.
 *
 * The rule below used to read `.mw-conv__list > li`, which reaches a top-level
 * comment and no reply, because a reply is a child of the nested <ol> and not
 * of the list. So replies came out as plain list items: no avatar column, no
 * row, nothing.
 *
 * flex-wrap is the other half of the fix. WordPress's walker closes a comment
 * AFTER its replies, so the nested <ol> is markup INSIDE the parent <li> —
 * which is this flex row. A third flex item sits alongside the first two, and
 * that is precisely the reported symptom: the reply appearing next to the
 * comment rather than under it. Wrapping the row, and giving that nested list
 * the whole of the next line, puts the thread back where it belongs.
 */
.mena-article .mw-conv .mw-conv__list li.mw-comment,
.mw-conv__list li.mw-comment {
	display: flex !important;
	flex-wrap: wrap !important;
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	gap: 10px;
	padding: 12px 0;
	border-top: 1px solid var(--mw-border);
	list-style: none;
	text-align: start;
}

.mw-conv__list .children {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: none !important;
	/* Lined up with the parent's text, past the 40px avatar and its 10px gap.
	   border-box, or the indent is added to a full-width row and the thread
	   hangs 50px off the edge of the article instead of sitting inside it. */
	box-sizing: border-box !important;
	padding-inline-start: 50px !important;
}

/* A reply's indent is the nested list's job; the row must not add a second. */
.mw-conv .mw-comment--reply { padding-inline-start: 0; }

/* Two rows deep is a conversation; five is a staircase. */
.mw-conv__list .children .children { padding-inline-start: 24px !important; }

/* The head is a line, not a stack: name, then when. */
.mw-conv .mw-comment__head {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.mw-conv .mw-comment__main { flex: 1; min-width: 0; text-align: start; }

.mw-conv .mw-comment__body p { margin: 4px 0 0; }

.mw-conv .mw-avatar--32 {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	background: var(--mw-surface-2);
}

.mw-conv__list > .mw-comment:first-child { border-top: 0; }

.mw-conv .mw-comment__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 4px;
	font-size: .7rem;
}

.mw-conv .comment-reply-link,
.mw-conv .mw-comment__act {
	border: 0;
	background: transparent;
	padding: 0;
	font: inherit;
	font-size: .7rem;
	color: var(--mw-muted);
	text-decoration: none;
	cursor: pointer;
}

.mw-conv .comment-reply-link:hover,
.mw-conv .mw-comment__act:hover { color: var(--mw-gold-deep); }

/* Asked once, in place — a browser confirm() over an article is a jolt. */
.mw-conv .mw-comment__act--del:hover,
.mw-conv .mw-comment__act--del.is-armed { color: var(--mw-rose); }
.mw-conv .mw-comment__act--del.is-armed { font-weight: 600; }

.mw-conv .mw-comment.is-going { opacity: .45; pointer-events: none; }

/* A deleted comment that still has answers under it: the row goes, the thread
   stays, and nothing is left behind to mark the gap. */
.mw-conv .mw-comment--gone {
	padding: 0;
	border-top: 0;
	gap: 0;
}
.mw-conv .mw-comment--gone > .children { padding-inline-start: 0 !important; }

.mw-conv__hidden { display: none; }

/* Who the box is answering, with a way out of it. */
.mw-conv__to {
	display: flex !important;
	align-items: center;
	gap: 8px;
	font-size: .72rem;
	color: var(--mw-muted);
}

.mw-conv__to[hidden] { display: none !important; }
.mw-conv__to b { color: var(--mw-text); font-weight: 600; }

.mw-conv__to button {
	border: 0;
	background: transparent;
	color: var(--mw-muted);
	cursor: pointer;
	font-size: .68rem;
	line-height: 1;
	padding: 2px;
}

.mw-conv__to button:hover { color: var(--mw-rose); }

/* What came back from posting. */
.mw-conv__note {
	margin: 10px 0 0;
	font-size: .74rem;
	line-height: 1.7;
}

.mw-conv__note.is-error { color: var(--mw-rose); }
.mw-conv__note.is-ok { color: var(--mw-ok); }
.mw-conv__note[hidden] { display: none !important; }
.mw-conv__pages { margin-top: 10px; font-size: .74rem; }

/* The box, shaped like the reply bar under a discussion post.
 *
 * comment_form() is not a fixed shape: WordPress adds author and email fields
 * for guests, a cookie-consent checkbox, moderation notes, and any plugin on
 * the site may inject a captcha into the same form. Sizing this by assuming
 * two children left the textarea squeezed to nothing while the button stretched
 * across the page.
 *
 * So the row is written to survive company. The field and the button are given
 * sizes that cannot be argued with, and ANYTHING else is pushed onto a line of
 * its own rather than being allowed to compete for the row. Nothing is hidden:
 * a captcha that does not render is a comment that cannot be posted.
 */
.mw-conv__form {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--mw-border);
}

.mw-conv__form .mw-reply__input {
	flex: 1 1 220px !important;
	/* auto, not 100%: the basis above is what sizes it, and a 100% width in a
	   flex row makes it fight its own siblings for space. */
	width: auto !important;
	min-width: 0;
	box-sizing: border-box;
	border: 1px solid var(--mw-border) !important;
	border-radius: 999px !important;
	background: var(--mw-elevated) !important;
	color: var(--mw-text) !important;
	font: inherit;
	font-size: .82rem;
	line-height: 1.8;
	padding: 9px 16px !important;
	resize: none;
	min-height: 40px;
	max-height: 140px;
}

.mw-conv__form .mw-reply__input:focus {
	outline: none;
	border-color: var(--mw-gold) !important;
}

/* The circle stays a circle whatever the theme does to buttons. */
.mw-conv__form .mw-reply__send {
	flex: 0 0 40px !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--mw-gold) !important;
	color: var(--mw-on-gold) !important;
	display: grid !important;
	place-items: center;
	cursor: pointer;
	font-size: .92rem;
}

.mw-conv__form .mw-reply__send:hover { filter: brightness(.94); }

/* Everything else — consent, notes, guest fields, a captcha — gets its own row. */
.mw-conv__form > *:not(.mw-reply__input):not(.mw-reply__send) {
	flex: 1 0 100%;
	margin: 0;
	font-size: .74rem;
	color: var(--mw-muted);
}

.mw-conv__form > input[type="hidden"] { display: none; }

.mw-conv__form label { font-size: .74rem; color: var(--mw-muted); }

.mw-conv__form input[type="text"],
.mw-conv__form input[type="email"],
.mw-conv__form input[type="url"] {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-r-md);
	background: var(--mw-surface);
	color: var(--mw-text);
	font: inherit;
	font-size: .8rem;
	padding: 8px 12px;
	margin-top: 4px;
}

/* ==========================================================================
   Members, wherever they are named
   ========================================================================== */

/*
 * A person's name is a link, and looks like one only when reached for.
 *
 * Every byline, commenter, liker and avatar on the site now points at
 * /profile/<handle>/. Colouring or underlining all of them would turn a feed
 * into a page of blue text — the name is content first and a destination
 * second. So they inherit the colour of the text around them and say what they
 * are on hover and on keyboard focus, which is when somebody is asking.
 *
 * The underline is offset and drawn thin: these sit on Arabic, and a
 * text-decoration on the baseline cuts through the descenders of ج، ح، ي.
 */
.mena-user {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.mena-user:hover,
.mena-user:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .28em;
	text-decoration-skip-ink: auto;
}

/*
 * An avatar is a link too — and a link is a box, which the picture was not.
 *
 * The avatars in a post and a comment sit as direct children of a flex row, and
 * carried `flex: none` and a fixed size themselves. Wrapping one in an anchor
 * made the anchor the flex item instead, with neither — so it stretched to the
 * full height of the card and became a 44px strip down the side of every post
 * that went to the author's profile when the post was clicked anywhere near it.
 *
 * The anchor takes on what the picture had: no growing, no stretching, and the
 * size of what is inside it. No underline either — a line under a photograph is
 * a stray mark; it lifts instead.
 */
a.mena-user:has(> img),
a.mena-user:has(> .mw-avatar) {
	display: inline-flex;
	flex: none;
	align-self: flex-start;
	text-decoration: none !important;
	transition: opacity .15s ease;
}

a.mena-user:has(> img):hover,
a.mena-user:has(> .mw-avatar):hover { opacity: .85; }

.mena-user:focus-visible {
	outline: 2px solid var(--mw-gold, #ffd014);
	outline-offset: 2px;
	border-radius: 4px;
}

/*
 * The handle under a comment.
 *
 * Display names are not unique — people choose them, and two members may pick
 * the same one — so a name alone does not say who left a remark. The handle
 * does, and it is also what the address reads, so the two agree.
 *
 * On its own line under the name: the row above is name, tick and time, and a
 * fourth thing on it pushes the date off the end. `flex-basis: 100%` only means
 * "a line of my own" in a row that wraps — the head above is wrapped for
 * exactly this, and was not, which is how the handle ended up in the far corner
 * with the date folded in half beside it.
 */
.mw-comment__at {
	flex-basis: 100%;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 0;
	color: var(--mw-muted);
	font-size: .68rem;
	font-weight: 500;

	/*
	 * `isolate` alone — not `direction: ltr`.
	 *
	 * The handle is a full-width item on its own line, and `direction: ltr` on
	 * a full-width box puts its text at the box's LEFT edge: the handle ended
	 * up in the far corner of the byline, nowhere near the name it belongs to.
	 * The ordering inside the run is handled by the LTR isolate the markup now
	 * carries, so this element can keep the page's direction and the text lands
	 * under the name where it belongs.
	 */
	unicode-bidi: isolate;
}

.mw-conv .mw-comment__head { row-gap: 0; }

/* In the feed's own rows the handle already has a line of its own, beside the
   timestamp — it needs no break, only the isolation any Latin handle needs
   inside an Arabic line. */
.mw-post__at,
.mw-liker__at,
.mw-quote__at {
	direction: ltr;
	unicode-bidi: isolate;
}

.mw-liker__at {
	margin-inline-start: auto;
	color: var(--mw-muted);
	font-size: .72rem;
}

/* The article byline is a Latin handle in an Arabic line, as it always was. */
.mena-article__by { direction: ltr; unicode-bidi: isolate; }

/* ------------------------------------------------------------ the scoop mark */

/*
 * A post the newsroom singled out.
 *
 * Gold, because gold is what this site already spends on the things it wants
 * looked at — the button, the console's own marked state — and a second accent
 * introduced for one badge is an accent the palette has to carry forever.
 *
 * A pill beside the name rather than a ribbon across the card: the post is
 * still a post in a list of posts, and the thing being marked is the writing,
 * which is where the eye already is.
 */
/*
 * The scoop mark: a gold star, and nothing else.
 *
 * No pill, no word, and no wash across the card. The post is still a post in a
 * column of posts — the mark says an editor picked it out, which is a note
 * beside the name, not a change of category. A tinted card claimed the second
 * and read as a different kind of thing entirely.
 *
 * Filled, so `fill: currentColor` and no stroke: at this size an outlined star
 * is indistinguishable from the small grey glyphs either side of it.
 */
.mw-scoop {
	display: inline-flex;
	align-items: center;
	flex: none;
	margin-inline-start: 3px;
	color: var(--mena-gold, #ffd014);
	line-height: 0;
}

.mw-scoop svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	stroke: none;
	/* The gold is bright against a light surface and can wash out at the edges;
	   a hairline of the same colour, darkened, keeps the points crisp. */
	filter: drop-shadow(0 0 .5px color-mix(in srgb, var(--mena-gold, #ffd014) 70%, #000));
}

/* -------------------------------------------------------------- the repost */

/*
 * The same size as the glyphs beside it.
 *
 * `.95rem` — the exact value `.mw-stat .bi` is set to above, in the same unit.
 * The first attempt used `1.05em`, which resolves against the button's own
 * .72rem and came out a third smaller than the heart and the reply bubble
 * either side of it. Written as the same measure so the two cannot drift.
 */
.mw-stat .mw-repost {
	width: .95rem;
	height: .95rem;
	flex: none;
}

.mw-stat.is-reposted .mw-repost { color: var(--mena-green, #17bf63); }

/* ------------------------------------------------------- the pinned article */

/*
 * One story across the top of the home page.
 *
 * A picture with the headline on it, at the container's full width — the shape
 * a front page has had since front pages existed, and the reason it is worth
 * giving one story the space three columns share below it.
 *
 * Sized by aspect-ratio rather than by a height, so it keeps its proportions
 * from a phone to a wide desktop instead of turning into a letterbox at one end
 * and a poster at the other. The photograph fills that box with `cover`; a
 * hero is a crop, and a hero that letterboxes to fit is not a hero.
 */
.mw-pin {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	margin: 0 0 26px;
	aspect-ratio: 21 / 9;
	border-radius: 18px;
	background: var(--mena-surface, #f7f7f9);
	text-decoration: none;
	isolation: isolate;
}

.mw-pin__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.mw-pin:hover .mw-pin__img,
.mw-pin:focus-visible .mw-pin__img { transform: scale(1.03); }

/*
 * Black to transparent, up from the bottom.
 *
 * Three stops rather than two: a straight linear ramp reads as a grey haze
 * across the middle of the picture, because perceived lightness does not move
 * linearly with the alpha value. Holding it dark over the bottom third and
 * letting it fall away quickly above keeps the type on solid ground and leaves
 * most of the photograph untouched.
 *
 * `inset: 0` rather than a bottom strip: a wash that ends part-way up leaves a
 * visible edge where it stops, and the headline's height is not known here.
 */
.mw-pin__wash {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .88) 0%,
		rgba(0, 0, 0, .72) 22%,
		rgba(0, 0, 0, .34) 48%,
		rgba(0, 0, 0, 0) 78%
	);
}

.mw-pin__text {
	position: absolute;
	z-index: 2;
	inset-inline: 0;
	bottom: 0;
	display: grid;
	justify-items: start;
	gap: 10px;
	padding: 28px clamp(20px, 3.5vw, 44px) clamp(22px, 3vw, 36px);
	direction: rtl;
	text-align: right;
}

/*
 * The headline, large — and clamped.
 *
 * clamp() rather than breakpoints because this box is fluid at every width, and
 * a headline stepping between three fixed sizes looks wrong at two of them. The
 * shadow is there for the picture the gradient cannot save: a photograph with a
 * bright sky at the bottom of the frame is rare but not impossible, and white
 * type on it is unreadable without one.
 */
.mw-pin__title {
	max-width: 24ch;
	color: #fff;
	font-size: clamp(1.35rem, 3.1vw, 2.6rem);
	font-weight: 800;
	line-height: 1.35;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
	text-wrap: balance;
}

.mw-pin__when {
	color: rgba(255, 255, 255, .82);
	font-size: .8rem;
	font-weight: 600;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

/* Taller on a phone: 21/9 at 380px is a strip about a hundred pixels high, and
   a headline does not fit on it. */
@media (max-width: 780px) {
	.mw-pin { aspect-ratio: 4 / 3; margin-bottom: 18px; border-radius: 14px; }
	.mw-pin__title { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mw-pin__img { transition: none; }
	.mw-pin:hover .mw-pin__img { transform: none; }
}

/* ------------------------------------------------------------- the ladder */

/*
 * The members with the most points, on the timeline's side rail.
 *
 * Gold and down, as five metals. The colour is the classification — it is what
 * a reader takes from the column without reading a number — so each grade is
 * one custom property set on the row and then used three times: the cup, the
 * ring around the picture, and the rank tint behind it. Setting them separately
 * is how a silver cup ends up on a bronze ring.
 *
 * Every value here is a fixed colour rather than a theme token, because a
 * medal that changes hue with the theme is not a medal. They are chosen to hold
 * against both the light surface and the dark one.
 */
.mw-board {
	--mw-rank: #b9bec9;
	--mw-rank-soft: rgba(185, 190, 201, .16);

	margin-bottom: 18px;
}

.mw-board__row--gold   { --mw-rank: #e0a800; --mw-rank-soft: rgba(224, 168, 0, .16); }
.mw-board__row--silver { --mw-rank: #8e99a8; --mw-rank-soft: rgba(142, 153, 168, .18); }
.mw-board__row--bronze { --mw-rank: #b1702f; --mw-rank-soft: rgba(177, 112, 47, .16); }
.mw-board__row--copper { --mw-rank: #9a6a52; --mw-rank-soft: rgba(154, 106, 82, .15); }
.mw-board__row--steel  { --mw-rank: #7b8794; --mw-rank-soft: rgba(123, 135, 148, .14); }

/* The heading's cup, at the size the icon font's glyphs render at, so the
   heading keeps its rhythm whether or not that font ever arrives. */
.mw-board__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.05em;
	height: 1.05em;
	color: #e0a800;
}

.mw-board__mark svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mw-board__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.mw-board__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: 10px;
	transition: background .15s ease;
}

.mw-board__row:hover { background: var(--mw-rank-soft); }

/* The picture, with room outside it for the cup to sit on the corner. */
.mw-board__pic {
	position: relative;
	flex: none;
	display: block;
	width: 44px;
	height: 44px;
}

.mw-board__pic img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	/* The ring is the rank too — a reader who cannot make out a 16px cup still
	   sees which of five colours this row is. */
	box-shadow: 0 0 0 2px var(--mw-rank);
}

/*
 * The cup, on the corner.
 *
 * Overlapping the picture rather than beside it: the rail is 300px wide and a
 * badge in its own column costs a name's worth of it. The ring in the page's
 * own background is what keeps it legible over a dark photograph.
 */
.mw-board__cup {
	position: absolute;
	inset-block-end: -3px;
	inset-inline-end: -4px;
	display: grid;
	place-items: center;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--mw-rank);
	box-shadow: 0 0 0 2px var(--mena-elevated, #fff);
}

.mw-board__cup svg {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: #fff;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mw-board__who {
	display: grid;
	gap: 1px;
	min-width: 0;
	margin-inline-end: auto;
}

/* Both links, one truncation rule: a long display name must not push the score
   off the rail. */
.mw-board__name,
.mw-board__at {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-decoration: none;
}

.mw-board__name {
	font-size: .85rem;
	font-weight: 700;
	color: var(--mw-text, #1a1a1a);
}

.mw-board__at {
	font-size: .74rem;
	color: var(--mena-muted, #8898aa);
	unicode-bidi: isolate;
}

.mw-board__name:hover,
.mw-board__name:focus-visible,
.mw-board__at:hover,
.mw-board__at:focus-visible { text-decoration: underline; }

.mw-board__score {
	flex: none;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--mw-rank-soft);
	color: var(--mw-rank);
	font-size: .74rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	unicode-bidi: isolate;
}

@media (prefers-reduced-motion: reduce) {
	.mw-board__row { transition: none; }
}

/* -------------------------------------------------- the satellite bulletin */

/*
 * التحديثات الفضائية — what has appeared, left, opened up or gone encrypted.
 *
 * A card in the same idiom as the discussion above it: same surface, same
 * border, same radius, so the column reads as two panels of one thing rather
 * than as a panel and a stray list.
 *
 * Each line is a mark, a sentence and a date. The mark carries the colour and
 * the colour carries the meaning — arrived and free are green, gone is rose,
 * encrypted is amber — because a dozen of these sentences differ from one
 * another by a word in the middle, which nobody reads while scanning.
 */
/*
 * A break in the news column, under the lead story.
 *
 * It used to be a second panel in the left column, competing with the
 * discussion for one screen's height — whatever split the two were given, one
 * of them was short. Here it has the column to itself and takes the height of
 * what is in it, so the list is not a scroller inside a scroller.
 */
/*
 * The <li> itself carries nothing.
 *
 * It is an item in the post template's own list, so every rule that dresses an
 * article in that list reaches it too — a separator on the item, a card
 * background, padding. The section inside already draws its own line above and
 * below, and the list's line landed a few pixels under it: two rules where one
 * was asked for.
 *
 * `!important` for the same reason as the rows below: the site's stylesheet
 * loads after this one, and out-specifying a rule you cannot see is guesswork.
 * The margin is left ordinary — only the decoration is being defended.
 */
li.mena-home-break {
	list-style: none;
	margin: 0 0 var(--mw-gap, 18px);
	padding: 0;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/*
 * The article after the break gives up its top border.
 *
 * That was the doubled edge, and neither of the two lines was wrong on its own:
 * the bulletin closes with a rule, and every article in this list opens with
 * one. Stacked with the list's gap between them they read as one thick, badly
 * drawn border.
 *
 * The bulletin's is the one that stays — it belongs to the block being set
 * apart, and it is there whatever follows it. The article's is redundant the
 * moment something else has already drawn the line above it.
 *
 * The `> *` matters as much as the `+ li`.
 *
 * The page dump settles where the break actually sits:
 *
 *     </li><li class="mena-home-break"><section class="mw-sat" …
 *
 * so the two ARE adjacent and `+ li` does match — which means the surviving
 * line was never on the <li> at all. A block-theme post item wraps its content
 * in a group div, and the rule is on that. Clearing the item and its immediate
 * children covers both without having to know which.
 *
 * Weighted as well as !important: the article's own border is !important here,
 * so !important alone does not settle it — specificity does, and two rounds of
 * out-specifying by one class each lost to a rule a class deeper. The long
 * selector is built from three wrappers this plugin emits itself — .mena-home-
 * wrap, .mena-home-grid, .mena-home-grid__news — so it is (0,4,2) and (0,4,3)
 * rather than a guess one notch above whatever was last seen.
 */
li.mena-home-break + li,
li.mena-home-break + li > *,
.mena-home-wrap .mena-home-grid .mena-home-grid__news li.mena-home-break + li,
.mena-home-wrap .mena-home-grid .mena-home-grid__news li.mena-home-break + li > * {
	border-top: 0 !important;
}

/*
 * Two rules, not a box.
 *
 * The articles above and below it are cards, and a third card between them read
 * as another article rather than as a break in the list. A line above and a
 * line below is what an interruption in a column of stories looks like: the
 * thing is set apart without pretending to be one of them.
 */
.mw-sat {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: transparent !important;
	/* The block's only two rules, stated last and defended, so they are the
	   only two horizontal lines anywhere in it. */
	border: 0 !important;
	border-top: 1px solid var(--mw-border, var(--mena-border, #e6e6ec)) !important;
	border-bottom: 1px solid var(--mw-border, var(--mena-border, #e6e6ec)) !important;
	border-radius: 0 !important;
	overflow: hidden;
}

/* No rule under the heading: with the section's own two lines a third would
   make the header look like a table caption. Space does the separating. */
.mw-sat__head {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 2px 8px;
}

.mw-sat__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: .9rem;
	font-weight: 700;
	color: var(--mw-text, var(--mena-text, #1a1a1a));
}

.mw-sat__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.15em;
	height: 1.15em;
	color: var(--mena-rose, #f5365c);
}

.mw-sat__mark svg,
.mw-sat__ico svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
 * The arrow is filled, not stroked.
 *
 * It is Bootstrap Icons' own `arrow-left` path — the glyph the discussion
 * header renders as a font character — and those are solid shapes. Stroked
 * like the marks above it came out visibly heavier than the arrow it is meant
 * to match.
 */
.mw-sat__all svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
	stroke: none;
}

/* The way through to the chart, on the heading's line and at the far corner —
   the same arrangement the calendar widget's arrow uses. */
.mw-sat__all {
	margin-inline-start: auto;
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-block: -5px;
	border-radius: 7px;
	color: var(--mena-muted, #8898aa);
	text-decoration: none;
	transition: color .15s ease, background .15s ease;
}

.mw-sat__all svg { width: 15px; height: 15px; }

.mw-sat__all:hover,
.mw-sat__all:focus-visible {
	color: var(--mena-rose, #f5365c);
	background: color-mix(in srgb, var(--mena-rose, #f5365c) 12%, transparent);
}

/* Seven at most, and the server sends seven, so there is nothing to scroll. */
.mw-sat__list {
	flex: none;
	list-style: none;
	margin: 0;
	padding: 0 0 10px;
}

/*
 * The rows and the list carry no border of their own. `!important`, deliberately.
 *
 * This is a <ul> of <li>s dropped into the middle of the news column, so every
 * rule the site has for list items in flowed content reaches it. The last row's
 * bottom border landed a few pixels above the section's own — the doubled edge
 * — and out-specifying it did not hold: the site's stylesheet loads after this
 * one, so anything at equal weight wins, and there is no way from here to know
 * what selector the next rule will use.
 *
 * A blanket reset on elements this file owns outright is what !important is
 * actually for. The separators are then drawn back below, once, deliberately.
 */
.mw-sat__list,
.mw-sat__list > li.mw-sat__row {
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.mw-sat__row {
	--mw-sat-ink: var(--mena-muted, #8898aa);

	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 8px 2px;
	font-size: .78rem;
	line-height: 1.75;
}

.mw-sat__row--ok   { --mw-sat-ink: var(--mena-accent, #0b7a55); }
.mw-sat__row--bad  { --mw-sat-ink: var(--mena-rose, #f5365c); }
.mw-sat__row--warn { --mw-sat-ink: var(--mena-warn, #b26a00); }

/* A tinted disc rather than a bare glyph: at this size a loose stroke beside
   text reads as part of the sentence. */
.mw-sat__ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--mw-sat-ink) 14%, transparent);
	color: var(--mw-sat-ink);
}

.mw-sat__ico svg { width: 13px; height: 13px; }

.mw-sat__text {
	min-width: 0;
	margin-inline-end: auto;
	color: var(--mw-text, var(--mena-text, #1a1a1a));
	overflow-wrap: break-word;
}

.mw-sat__when {
	flex: none;
	margin-top: 2px;
	font-size: .68rem;
	font-weight: 600;
	color: var(--mena-faint, #c1c7d2);
	white-space: nowrap;
	unicode-bidi: isolate;
}

/* Between rows, and only between them: never above the first or below the
   last, where the section's own two rules already are. `!important` to survive
   the blanket reset above, which is the only thing it is overriding. */
.mw-sat__list > li.mw-sat__row + li.mw-sat__row {
	border-top: 1px solid var(--mena-border-soft, var(--mw-border, #f0f0f4)) !important;
}

@media (max-width: 1199px) { .mw-sat__list { overflow: visible; } }

@media (prefers-reduced-motion: reduce) { .mw-sat__all { transition: none; } }

/* Stacked: the column is no longer a viewport-tall sticky thing, so neither
   panel needs a cap and both scroll with the page. */
/* ------------------------------------------- the signed-out reply bar */

/*
 * An article's comment box, for a reader who is not signed in.
 *
 * WordPress replaces the whole form with a sentence when registration is
 * required, so every visitor — which is most readers — met a line of unstyled
 * text where the discussion view shows a bar. This is that bar: the same
 * shape, the same measure, standing in for the field it would be.
 */
.mw-reply--out { align-items: center; }

/* A <span>, not a disabled <textarea>: there is nothing to type into, and a
   disabled control announces itself to a screen reader as one that could be
   used if only it were enabled — which is not what is going on here. */
.mw-reply__input--out {
	display: block;
	color: var(--mw-muted) !important;
	cursor: default;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mw-reply__in {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--mena-gold, #ffd014);
	color: #1a1a1a !important;
	font-size: .76rem;
	font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
}

.mw-reply__in:hover,
.mw-reply__in:focus-visible { background: #f0c412; }

/* The empty state, given the room a line of type needs rather than sitting on
   the border above it. */
.mw-conv .mw-empty {
	margin: 0 0 14px;
	padding: 18px 12px;
	text-align: center;
	color: var(--mw-muted);
	font-size: .8rem;
}


/* ------------------------------------------------------- a placement, sold */

/*
 * The creative inside an advert slot.
 *
 * Deliberately not `.mw-ad`: every slot on the site already wraps whatever the
 * filter returns in one of those, and `.mw-ad:not(.mw-ad--empty)` drops its own
 * aspect ratio so the creative decides the height. `.mw-sold` is what goes in
 * that box — one class, four kinds, no second ratio arguing with the first.
 */

.mw-sold {
	display: block;
	width: 100%;
	max-width: 100%;
	text-decoration: none !important;
	border-radius: inherit;
}

.mw-sold--image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- a headline over a picture ---- */

.mw-sold--html {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border-radius: var(--mw-r-md);
	background: var(--mw-surface-2);
}

.mw-sold__cover {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/*
 * A scrim, for the same reason the pinned article has one: a photograph cannot
 * be relied on to be dark where the type sits, and white text on a pale sky is
 * not a design decision anybody made.
 */
.mw-sold__wash {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .88) 0%,
		rgba(0, 0, 0, .55) 45%,
		rgba(0, 0, 0, .05) 100%
	);
}

.mw-sold__text {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 4px;
	width: 100%;
	padding: 14px 16px;
}

/*
 * Sized to the slot rather than to a fixed figure: the same advert runs in a
 * 1:1 square in the rail and a 5:1 strip between news items, and a headline set
 * for one is either lost or overflowing in the other.
 */
.mw-sold__title {
	font-size: clamp(.95rem, 2.6cqw, 1.35rem);
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
}

.mw-sold__sub {
	font-size: clamp(.7rem, 1.7cqw, .85rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, .82);
}

/* `cqw` needs something to be a container; without this the clamp falls back to
   its minimum and every slot gets the small size. */
.mw-sold--html { container-type: inline-size; }

/* ---- a network's own tag ---- */

.mw-sold--net {
	width: 100%;
	text-align: center;
}

.mw-sold--net > * { max-width: 100%; }

/*
 * The break between news items, when it has been sold.
 *
 * The house card carries its own <style> block in the theme; the sold branch
 * returns markup only, so the wrapper's width and spacing live here — which is
 * also the only stylesheet guaranteed to be present when that branch can fire
 * at all, since it fires from this plugin's filter.
 */
.adv-banner-wrap--sold {
	width: 100%;
	margin: 20px 0;
}