/*
 * 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;

	/* The height of a bar at the head of a column: the rail's search box and
	   the timeline's own header are the two, in adjacent columns, and they are
	   read as one line across the page. */
	--mw-bar-h: 42px;

	/* And the gap under one. */
	--mw-bar-gap: 14px;

	/* How far below the top of the screen the rail comes to rest. The header
	   over the timeline reads against the search box at the top of that rail,
	   so it has to know the same number. */
	--mw-rail-top: 12px;
	--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 — and, unlike the feed, the rail can
 * be taller than the screen.
 *
 * A sticky column does not scroll. Once pinned, whatever hangs below the fold
 * stays there until the column reaches the end of its container, and on this
 * page that end never arrives: the news beside it loads more as you approach
 * the bottom. The last entries of "most read" were unreachable at every scroll
 * position on a short screen.
 *
 * So the rail is capped to the screen and laid out as a column, and the one
 * card with a list in it takes whatever height is left over. The scrolling
 * happens inside that card, against its own border — the same arrangement the
 * discussion rail uses, and for the same reason: an overflow on the column puts
 * a scrollbar down the outside of a card it does not belong to.
 */
.mena-home-grid__cal {
	position: sticky;
	top: 12px;
	max-height: calc(100vh - 24px);

	display: flex;
	flex-direction: column;
}

/* The calendar and the ad are the size they are; the list absorbs the rest. */
.mena-home-grid__cal > .cec-card,
.mena-home-grid__cal > .mw-ad { flex: none; }

/* min-height:0 or a flex item refuses to shrink below its content, which is
   the whole point of the line above it. */
.mena-home-grid__cal > .mw-trend { flex: 1 1 auto; min-height: 0; }

/*
 * The same rail, on a page whose masthead is pinned.
 *
 * The home page's header scrolls away, so 12px from the top of the viewport is
 * the right offset there. These three body classes are the ones that pin the
 * header — the selector is deliberately the same list as the sticky rule
 * itself — and a page can carry both: the profile is mena-home and
 * mena-postpage at once. Keyed to the class rather than applied everywhere,
 * because --mena-barh is published on every page whether the bar is pinned or
 * not, and reading it where it does not apply is what once left a 220px gap at
 * the top of a column.
 */
:is(.mena-article, .mena-innerpage, .mena-postpage) .mena-home-grid__cal {
	top: calc(var(--mena-barh, 0px) + 12px);
	max-height: calc(100vh - var(--mena-barh, 0px) - 24px);
}

/*
 * 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.
	 */
}



/*
 * The list's own scrollbar, made quiet.
 *
 * It runs inside the card, beside the border it is scrolling, and it is a
 * scrollbar on a page that already has one — so it is thin and it is the border
 * colour: present enough to grab, faint enough not to read as a second edge.
 */
.mw-trend__list {
	scrollbar-width: thin;
	scrollbar-color: var(--mena-border, #e6e6ec) transparent;
}

.mw-trend__list::-webkit-scrollbar { width: 6px; }
.mw-trend__list::-webkit-scrollbar-track { background: transparent; }

.mw-trend__list::-webkit-scrollbar-thumb {
	background: var(--mena-border, #e6e6ec);
	border-radius: 3px;
}

/* 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";
	}

	/*
	 * Above the columns and full width: in the flow, so the cap goes with the
	 * stickiness. A height cap on a rail that scrolls with the page turns a
	 * full-length column into a short box with a scrollbar, hiding exactly what
	 * the cap was added to reveal — and the list inside it goes back to being
	 * as long as it likes.
	 */
	.mena-home-grid__cal {
		position: static;
		display: block;
		max-height: none;
	}

	.mena-home-grid__cal > .mw-trend { min-height: auto; }

	/* 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;
	/*
	 * Tight, and no margin. The handle is the second half of the name, not the
	 * line after it — and at 1.7 the leading alone was putting most of a blank
	 * line between the two before the margin had said anything.
	 */
	line-height: 1.45 !important;
	max-width: 74ch;
	margin: 1px 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; }

	/*
	 * The menu sits straight under the header on a phone.
	 *
	 * 14px of breathing room is right on a desktop, where the menu is a wide
	 * strip of words that needs separating from the strapline above it. On a
	 * phone that same menu is one control — and a lone button floating below
	 * the text it belongs to reads as detached from the header rather than as
	 * part of it. The header already ends in its own padding; this was a second
	 * gap on top of it.
	 */
	.mena-home header.wp-block-template-part .wp-block-navigation {
		margin-top: 0 !important;
	}

	/* Same on every other page, where the strip is horizontally scrollable and
	   the room above it is doing even less. */
	header.wp-block-template-part .wp-block-navigation {
		margin-top: 0 !important;
	}

	/* The spacer the template puts between the two, which on a phone is simply
	   the same gap wearing a different name. */
	header.wp-block-template-part .wp-block-group > .wp-block-spacer:last-of-type {
		display: none !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;
	/*
	 * No padding above or below: the mark is what gives this bar its height
	 * now, and padding on top of a 40px image made a head taller than the
	 * composer under it.
	 */
	padding: 0 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;
}

/* ---- the highlighting layer behind the editor ---- */

/*
 * Two copies of the same text, one on top of the other.
 *
 * The wrapper takes the textarea's place in the layout and owns nothing else:
 * no padding, no border, no font. Everything that decides where a character
 * lands lives on the textarea and is copied onto the paint layer by the script,
 * so the two agree character for character however the text wraps.
 */
.mw-mirror {
	position: relative;
	width: 100%;
	min-width: 0;
}

/*
 * The visible copy. This layer carries the text the writer actually reads —
 * the textarea above it is the transparent one — so it takes the ordinary text
 * colour, and only the tags and handles inside it differ.
 */
.mw-mirror__paint {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;

	color: var(--mw-text);
	/* Selecting happens in the textarea above; selecting this copy as well
	   would hand back two of every character. */
	user-select: none;
	box-sizing: border-box;
}

/* The only things it is here to show. */
.mw-mirror__paint .mw-mirror__tag,
.mw-mirror__paint .mw-mirror__at {
	color: var(--mw-gold-deep);
	font-weight: 600;
}

/*
 * The real textarea, made invisible but not intangible: the caret and the
 * selection are still its own, and both have to stay visible or typing becomes
 * guesswork.
 */
.mw-mirror__real {
	position: relative;
	background: transparent !important;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
	caret-color: var(--mw-text);
}

.mw-mirror__real::selection { background: rgba(47, 111, 237, .28); }

/*
 * The placeholder is the one thing in this textarea that has to be seen.
 *
 * The box is made invisible so the paint layer behind it can show the text
 * with its tags picked out — but an empty box has no text to paint, and the
 * placeholder belongs to the textarea, which is transparent. `color` alone
 * does not bring it back: -webkit-text-fill-color overrides colour wherever
 * both are set, and it is set on the element and inherited by the pseudo.
 */
.mw-mirror__real::placeholder {
	color: var(--mw-muted);
	-webkit-text-fill-color: var(--mw-muted);
	opacity: 1;
}

/* A zero-width probe the script measures to find the caret. */
.mw-mirror__caret {
	display: inline-block;
	width: 0;
	height: 1em;
	vertical-align: baseline;
}

.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;
	/* The emoji panel hangs off this row rather than off the page. */
	position: relative;
}

.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); }

/* ---- the emoji panel ---- */

/*
 * Fixed to the viewport and parented to the page, not to the composer.
 *
 * Hung inside the tool row it was clipped by the feed card's overflow: hidden —
 * half a grid of faces cut off at the card's edge. Its coordinates are set by
 * the script, which puts it above the button, aligned to the composer's writing
 * edge, and pulls it back inside the screen on a narrow one.
 */
.mw-emoji {
	position: fixed;
	z-index: 100200;

	box-sizing: border-box;
	width: min(320px, calc(100vw - 40px));
	max-height: 260px;
	overflow-y: auto;
	padding: 8px 10px 10px;

	border: 1px solid var(--mw-border);
	border-radius: var(--mw-r);
	background: var(--mw-elevated);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}

.mw-emoji[hidden] { display: none; }

.mw-emoji__group {
	position: sticky;
	top: -8px;
	margin: 6px 0 4px;
	padding: 4px 0;
	background: var(--mw-elevated);
	font-size: .68rem;
	font-weight: 700;
	color: var(--mw-muted);
}

.mw-emoji__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
	gap: 2px;
}

.mw-emoji__one {
	border: 0;
	background: transparent;
	border-radius: 8px;
	padding: 4px 0;
	font-size: 1.15rem;
	line-height: 1.4;
	cursor: pointer;
	/* Emoji have their own colour; nothing here should tint them. */
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

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

/* The stand-in for a post that is not there. */
.mw-gone {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 56px 24px 64px;
	text-align: center;
}

.mw-gone .bi {
	font-size: 2rem;
	color: var(--mw-muted);
}

.mw-gone h2 {
	margin: 0 !important;
	font-size: 1.05rem !important;
	color: var(--mw-text) !important;
}

.mw-gone p {
	margin: 0;
	font-size: .82rem;
	color: var(--mw-muted);
}

.mw-gone .mw-btn { margin-top: 8px; }

/* ---- threads ---- */

/*
 * The parts of a thread, drawn as one column with a line running through it.
 *
 * The line is what makes three cards read as one piece of writing rather than
 * as three posts that happen to be adjacent. It runs down the middle of the
 * avatars — 39px from the reading edge, which is where their centres sit — and
 * stops at the last part shown, so the series has a visible end.
 *
 * Between parts there is only a hairline, and between threads the timeline's
 * ordinary rule: the heavier separator belongs between two different people
 * talking, not between one person's second and third sentence.
 */
.mw-thread { border-bottom: 1px solid var(--mw-border); }

/*
 * No rule between the parts of one thread.
 *
 * A horizontal line says "a different post starts here", which is the opposite
 * of what a thread is: the parts are one piece of writing and the only thing
 * that should separate them is the space between them. The rule stays on the
 * group, between one thread and the next.
 */
/*
 * Both classes, deliberately: this block sits above .mw-post in the file, and
 * with equal specificity the later rule would put the separator back. Naming
 * the element as well as the modifier settles it wherever the two end up.
 */
.mw-post.mw-post--part { border-bottom: 0; border-top: 0; }

/*
 * The line runs out of its own card and into the next.
 *
 * It starts under this part's avatar and ends 14px inside the card below —
 * which is exactly where that card's avatar begins, so the two segments meet
 * and the only thing interrupting the line down the column is the faces
 * themselves. Stopping at the card's own edge left a gap at every join, which
 * read as a series of separate posts that happened to have a tick beside them.
 */
.mw-post--joined::before {
	content: "";
	position: absolute;
	inset-inline-start: 39px;
	top: 62px;
	bottom: -24px;
	width: 2px;
	background: var(--mena-border-soft, var(--mw-border));
	border-radius: 1px;

	/*
	 * It runs a little further than it needs to, and no z-index.
	 *
	 * The card below is positioned and comes later in the document, so its
	 * content paints over this — the next avatar covers the overhang and the
	 * line appears to end exactly at the face. That is what lets one value work
	 * in both places the thread is drawn: the timeline pads its cards by 12px
	 * and the post page by 16, so an end point measured to the pixel would be
	 * two pixels short in one of them. A z-index here would put the line on top
	 * of the avatar instead, which is the same bug with a line through a face.
	 */
}

/*
 * No highlight on the part that was linked to.
 *
 * It was tinted to say "you came for this one", and on a page that shows the
 * whole series that reads as the other parts being greyed out instead — a
 * thread with one post lit up looks like a thread with a fault in it.
 */
.mw-post--here { background: transparent; }

/* The link at the foot of a group, where the series is longer than the peek. */
.mw-thread-more {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 10px 18px 14px 18px;
	/* Under the same column the line runs down, so it reads as the next thing
	   in the series rather than as a control belonging to the whole card. */
	padding-inline-start: 74px;

	border: 0;
	background: transparent;
	color: var(--mw-gold-deep);
	font-family: inherit;
	font-size: .78rem;
	font-weight: 600;
	text-align: start;
	cursor: pointer;
}

.mw-thread-more:hover { text-decoration: underline; }
.mw-thread-more .bi { font-size: .7rem; }

/* The same offer on a lead drawn by itself. */
.mw-thread-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mw-gold-deep);
	font-family: inherit;
	font-size: .76rem;
	font-weight: 600;
	cursor: pointer;
}

.mw-thread-link:hover { text-decoration: underline; }

/* ---- the parts of a thread being written ---- */

/*
 * A thread under construction, drawn as the thread it will be.
 *
 * Each part gets the writer's own face and a line running down from it to the
 * next — and from the last one into the composer itself, so the box being typed
 * in reads as the next part rather than as a separate control. The alternative,
 * a list of numbered chips, made the parts look like attachments.
 */
.mw-parts { display: block; }
.mw-parts[hidden] { display: none; }

.mw-part {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding-bottom: 14px;
	font-size: .85rem;
	line-height: 1.9;
}

.mw-part__pic {
	flex: none;
	display: block;
	width: 40px;
}

/*
 * The line: from just under this part's face to the top of the next one's.
 * Positioned on the avatar's centre — 20px into a 40px column — so it runs
 * through the middle of every face in the column, including the composer's.
 */
.mw-part::before {
	content: "";
	position: absolute;
	inset-inline-start: 19px;
	top: 46px;
	bottom: -2px;
	width: 2px;
	background: var(--mw-border);
}

.mw-part__body {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--mw-text);
	white-space: pre-wrap;
	overflow-wrap: break-word;
	/* Three lines of it: a reminder of what was written, not a second copy. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mw-part__pics {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--mw-muted);
	font-size: .72rem;
	margin-top: 6px;
}

.mw-part__x {
	flex: none;
	border: 0;
	background: transparent;
	color: var(--mw-muted);
	cursor: pointer;
	padding: 2px 4px;
	font-size: .8rem;
	line-height: 1;
	border-radius: 50%;
}

.mw-part__x:hover { color: var(--mw-rose, #f5365c); background: var(--mw-surface); }

/* And the run-on into the composer, which is where the next part is written. */
.mw-composer.has-parts .mw-composer__row { position: relative; }

.mw-composer.has-parts .mw-composer__row::before {
	content: "";
	position: absolute;
	inset-inline-start: 19px;
	top: -14px;
	height: 14px;
	width: 2px;
	background: var(--mw-border);
}

/* ---- hashtags, mentions, and the @ list ---- */

/*
 * The bar at the head of the timeline: a hashtag's name, or the timeline's own.
 *
 * Sticky, so the column always says what is in it — scroll far enough into a
 * tag and every post looks like an ordinary one. The height is the search
 * box's, taken from the same token, because the two sit at the same altitude
 * in adjacent columns and a few pixels between them reads as a mistake.
 *
 * The offset is a variable so a theme with a fixed header of its own can push
 * this down without editing the plugin.
 */
.mw-tagbar {
	position: sticky;
	top: var(--mw-stick-top, 0px);
	z-index: 5;

	/*
	 * Its padding counts inside its width.
	 *
	 * This stylesheet cannot assume a border-box default — the theme's reset
	 * does not reach every element here, which is why .mw-ad declares it too.
	 * The fixed variant is given an exact pixel width measured off the column,
	 * and without this its 16px of padding and its border were added to that
	 * number: a header three dozen pixels wider than the posts under it.
	 */
	box-sizing: border-box;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: var(--mw-bar-h);
	padding: 0 16px;
	border-bottom: 1px solid var(--mw-border);

	/*
	 * A rule, and nothing behind it, until it is actually holding the top of
	 * the screen.
	 *
	 * At rest the bar is the first thing in the column and a filled strip
	 * above a card is a second card — the border alone is enough to say the
	 * column starts here. Once it sticks, posts run underneath it and it needs
	 * something to be read against, which is where the backdrop comes in.
	 */
	background: transparent;
	transition: background-color .15s ease;
}

/*
 * Stuck: frosted, not painted.
 *
 * An opaque bar over a scrolling column reads as a lid; the blur keeps what is
 * underneath visible as movement while the text on top stays legible. The
 * colour is mixed from the theme's own surface, so it follows light and dark
 * without either being named here.
 */
.mw-tagbar.is-stuck,
.mw-tagbar--home {
	background: color-mix(in srgb, var(--mw-surface) 72%, transparent);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
}

/*
 * Where the blur cannot be had, the bar is opaque instead.
 *
 * A translucent background with nothing blurring behind it is text over
 * moving posts, which is the one outcome worse than a lid.
 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.mw-tagbar.is-stuck,
	.mw-tagbar--home {
		background: var(--mw-surface);
	}
}

/*
 * On the main timeline the bar arrives, it does not sit there.
 *
 * At rest the column already says what it is — the composer is right there,
 * and a header over it is a label on something the reader is looking at. It is
 * once the timeline itself has scrolled up to the top of the screen, and the
 * composer is gone, that a column of posts needs naming.
 *
 * Fixed, not sticky, and that is the whole reason: a sticky bar occupies its
 * place in the column whether or not it can be seen, so hiding it at rest
 * would leave an empty strip above the composer. Out of the flow it costs
 * nothing until it is wanted. The script gives it the column's width, which is
 * the one thing leaving the flow takes away.
 */
.mw-tagbar--home {
	position: fixed;
	top: var(--mw-stick-top, 0px);
	z-index: 6;
	margin: 0;

	/*
	 * Taller by exactly the rail's own offset.
	 *
	 * The rail comes to rest 12px below the top of the screen, so the search
	 * box's bottom edge is at 12 + the bar height while this one's was at the
	 * bar height alone — two rules across the page a centimetre apart. The bar
	 * starts at the very top, because a gap above a fixed header is a strip of
	 * scrolling posts, and carries the difference as height instead: the mark
	 * sits in the middle of the bar rather than being pushed down past a band
	 * of padding.
	 */
	min-height: calc(var(--mw-bar-h) + var(--mw-rail-top));

	transform: translateY(-110%);
	opacity: 0;
	pointer-events: none;
	transition: transform .18s ease, opacity .18s ease;
}

.mw-tagbar--home.is-here {
	transform: none;
	opacity: 1;
	pointer-events: auto;
}

/*
 * The hashtag bar holds the rail's gap under it.
 *
 * It is the one variant that stays in the flow — it is sticky, not fixed — so
 * the composer sat flush against it while the search box in the next column
 * kept 14px from the panel below. The rule goes with the gap: a border is how
 * a bar separates itself from something touching it.
 */
.mw-tagbar:not(.mw-tagbar--home) {
	margin-bottom: var(--mw-bar-gap);
	border-bottom: 0;

	/*
	 * The timeline header's height, at rest as well as stuck.
	 *
	 * The two are the same bar in two places and should be the same size, and
	 * growing into it on the way past would be the worse way to get there: a
	 * sticky box keeps its place in the flow, so changing its height mid-scroll
	 * moves everything under it by the difference, at the exact moment the
	 * reader is looking at it.
	 */
	min-height: calc(var(--mw-bar-h) + var(--mw-rail-top));
}

/*
 * Stuck, it is ruled off.
 *
 * At rest the gap under it is what separates it from the composer; once posts
 * are sliding underneath, a gap separates nothing and the edge has to be drawn.
 */
.mw-tagbar:not(.mw-tagbar--home).is-stuck {
	border-bottom: 1px solid var(--mw-border);
}

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

.mw-tagbar__out {
	font-size: .74rem;
	color: var(--mw-gold-deep);
	text-decoration: none;
}

.mw-tagbar__out:hover { text-decoration: underline; }

/*
 * A tag and a handle are the same kind of thing to a reader — a word in the
 * sentence that happens to lead somewhere — so they read as one style rather
 * than as two, and neither is underlined until it is pointed at.
 */
.mw-tag,
.mw-at {
	color: var(--mw-gold-deep);
	text-decoration: none;
	font-weight: 600;
}

.mw-tag:hover,
.mw-at:hover { text-decoration: underline; }

.mw-at-list {
	position: fixed;
	z-index: 100200;

	box-sizing: border-box;
	width: min(280px, calc(100vw - 32px));
	max-height: 244px;
	overflow-y: auto;
	padding: 4px;

	border: 1px solid var(--mw-border);
	border-radius: var(--mw-r);
	background: var(--mw-elevated);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}

.mw-at-list[hidden] { display: none; }

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

/* Hover and keyboard selection are one state: the list has one highlight, and
   which device moved it is not something the reader should have to track. */
.mw-at-list__row:hover,
.mw-at-list__row.is-on { background: var(--mw-surface); }

.mw-at-list__row img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.mw-at-list__who {
	display: grid;
	min-width: 0;
	line-height: 1.5;
}

.mw-at-list__who b {
	font-size: .78rem;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mw-at-list__who i {
	font-size: .7rem;
	font-style: normal;
	color: var(--mw-muted);
	direction: ltr;
	text-align: start;
}

/*
 * 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; }

/*
 * A post that no longer exists, folding out of the list.
 *
 * The height is pinned in JS and then set to zero; everything that would keep
 * the row occupying space once its content has collapsed — padding, the rule
 * under it — has to go with it, or the list is left with a 25px gap where the
 * post used to be.
 */
.mw-post--gone {
	overflow: hidden;
	opacity: 0;
	padding-block: 0;
	border-bottom-width: 0;
	pointer-events: none;
	transition: height .3s ease, opacity .22s ease, padding .3s ease;
}

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

.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; }

/*
 * The number beside it, rolling rather than swapping.
 *
 * inline-block so it can be moved at all — a bare text node cannot be — and
 * tabular figures so a count going from 9 to 10 does not shove the icon along
 * as the digits change width.
 */
.mw-stat [data-count],
.mw-post__stats [data-count] {
	display: inline-block;
	font-variant-numeric: tabular-nums;
}

@keyframes mw-roll-up {
	from { transform: translateY(70%); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

@keyframes mw-roll-down {
	from { transform: translateY(-70%); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

[data-count].is-up   { animation: mw-roll-up .24s cubic-bezier(.22, 1, .36, 1); }
[data-count].is-down { animation: mw-roll-down .24s cubic-bezier(.22, 1, .36, 1); }

/* 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;
}

/*
 * A story that arrived while you were looking at the strip.
 *
 * Instagram does not redraw the row, it opens a gap at the head of it and
 * drops the new ring into place, and that difference is the whole point: a
 * strip that silently gains a ring reads as a page reload, while one that
 * makes room in front of you reads as news arriving. So the width is part of
 * the animation — the siblings are pushed along by it rather than jumping.
 *
 * Only ever on rings the previous draw did not have. A first paint animates
 * nothing, because a page that has just loaded has not had anything arrive.
 */
@keyframes mw-ring-in {
	from {
		width: 0;
		opacity: 0;
		transform: scale(.66);
	}
	55% { opacity: 1; }
	to {
		width: 72px;
		opacity: 1;
		transform: none;
	}
}

.mw-ring--enter {
	animation: mw-ring-in .46s cubic-bezier(.22, 1, .36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.mw-ring--enter { animation: none; }
}

/*
 * 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;
	/* A face that is not square must never leave the circle. */
	overflow: hidden;
}

/*
 * Held square against the theme.
 *
 * The theme's global image rule (height: auto) beat the 100% height here, so a
 * portrait photograph kept its own proportions: taller than the ring, rounded
 * into an oval by the 50% radius, and hanging out over the name beneath it.
 * Square logos never showed it, which is why only some rings broke.
 */
.mw-ring .mw-ring__avatar {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	object-fit: cover;
	background: var(--mw-surface-2);
	display: block;
	margin: 0 !important;
}

.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);
}

/*
 * On a phone a story is the screen, not a card on it.
 *
 * The viewer is a 420px pane with rounded corners and a shadow, which is right
 * on a desktop where it floats over the page. On a phone that same pane left a
 * band of dimmed background down both sides and across the top — the frame of
 * something else showing around the edges of the story — and every app people
 * know this pattern from gives the picture the whole screen.
 *
 * So it fills the overlay: no radius for the corners to round, no shadow to
 * lift it off a background nobody can see, and 100% of a container that is
 * already `position: fixed; inset: 0`, which is the one height on a phone that
 * does not move when the address bar does.
 */
@media (max-width: 640px) {
	.mw-viewer {
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		border-radius: 0;
		box-shadow: none;
	}

	/*
	 * Clear of the notch and the home bar.
	 *
	 * Inset from the edge of a card, these controls were nowhere near either.
	 * Against the edge of the screen the progress bars slide under the status
	 * bar and the reply box under the home indicator, so each one is pushed in
	 * by whatever the device says it needs — zero on everything that has no
	 * cut-outs, which is why the fallback is 0px rather than a guess.
	 */
	.mw-viewer__bars { top: calc(8px + env(safe-area-inset-top, 0px)); }
	.mw-viewer__head { top: calc(22px + env(safe-area-inset-top, 0px)); }
	.mw-viewer__foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/*
 * Turning from one person's stories to the next.
 *
 * Instagram swings the whole frame away like a face of a cube, and that motion
 * is doing real work: it says "different person", where a cut says "next
 * picture". Moving between slides of the same ring stays a cut for exactly
 * that reason — only a change of author turns.
 *
 * It is one element, not two faces of a real cube: the frame swings away
 * around its leading edge, the content is swapped while it is edge-on and
 * unreadable, and it swings back from the other side. With the overlay holding
 * the perspective, the effect is the same and there is never a second copy of
 * the stage alive on the page.
 */
.mw-overlay { perspective: 1400px; }

.mw-viewer.is-cube-out-next,
.mw-viewer.is-cube-in-next,
.mw-viewer.is-cube-out-prev,
.mw-viewer.is-cube-in-prev {
	backface-visibility: hidden;
	will-change: transform, opacity;
}

/*
 * The cube turns the other way.
 *
 * It was swinging as if the strip ran left to right: moving forward carried the
 * frame off to the left and brought the next one in from the right. This is an
 * RTL page — the rings are read from the right, and forward is leftward — so
 * the turn was travelling against the reading direction, which is the one thing
 * a transition like this must not do. Both the pivot edge and the sign of the
 * angle are mirrored; the pairs still meet, so a frame always leaves on the
 * side its replacement arrives from.
 */
.mw-viewer.is-cube-out-next { transform-origin: 100% 50%; animation: mw-cube-out-next .19s ease-in  forwards; }
.mw-viewer.is-cube-in-next  { transform-origin: 0% 50%;   animation: mw-cube-in-next  .22s ease-out forwards; }
.mw-viewer.is-cube-out-prev { transform-origin: 0% 50%;   animation: mw-cube-out-prev .19s ease-in  forwards; }
.mw-viewer.is-cube-in-prev  { transform-origin: 100% 50%; animation: mw-cube-in-prev  .22s ease-out forwards; }

@keyframes mw-cube-out-next {
	from { transform: rotateY(0deg) scale(1); opacity: 1; }
	to   { transform: rotateY(70deg) scale(.88); opacity: .28; }
}

@keyframes mw-cube-in-next {
	from { transform: rotateY(-70deg) scale(.88); opacity: .28; }
	to   { transform: rotateY(0deg) scale(1); opacity: 1; }
}

@keyframes mw-cube-out-prev {
	from { transform: rotateY(0deg) scale(1); opacity: 1; }
	to   { transform: rotateY(-70deg) scale(.88); opacity: .28; }
}

@keyframes mw-cube-in-prev {
	from { transform: rotateY(70deg) scale(.88); opacity: .28; }
	to   { transform: rotateY(0deg) scale(1); opacity: 1; }
}

.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); }

/*
 * On a touch screen there is no "until".
 *
 * Hiding the arrows behind :hover is right with a mouse — the pointer is
 * already on the story when you want them. A finger never hovers, so the only
 * thing that revealed them was a tap, which the tap zones had already spent on
 * moving to the next slide: the controls appeared for the frame you had just
 * left. Where there is no hover at all, they are simply visible.
 */
@media (hover: none) {
	.mw-viewer__arrow { opacity: 1; }
}

/* 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;
	/* Enough that a reply's chip, when the row runs out of width and it wraps
	   onto its own line, does not sit against the name above it. */
	row-gap: 4px;
	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.
 */
/*
 * The chip on a reply naming what it answers.
 *
 * Beside the commenter's own handle and deliberately set apart from it — the
 * two are both @names sitting in the same row, and without the gap and the
 * frame the eye reads them as one string and the reply appears to be by the
 * person being replied to. The arrow is doing that work as much as the space
 * is: it points away from the name before it.
 */
.mw-replyto {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	/* The space that keeps it off the commenter's own handle. */
	margin-inline-start: 8px;
	padding: 1px 8px 2px;

	border: 1px solid var(--mena-border-soft, var(--mw-border));
	border-radius: 999px;
	background: var(--mw-surface);
	color: var(--mw-muted);

	font-family: inherit;
	font-size: .68rem;
	line-height: 1.7;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.mw-replyto:hover {
	border-color: var(--mw-gold-deep);
	color: var(--mw-gold-deep);
}

.mw-replyto .bi { font-size: .62rem; }

/*
 * A count that opens something.
 *
 * It sits inside the like button, so on its own it looks exactly like the
 * number beside every other heart on the page — the underline on hover is the
 * only thing telling the author that this one leads somewhere. Underlined here
 * and not on names for the same reason in reverse: a name is obviously a
 * person, and a bare number is obviously nothing.
 */
.mw-count-link {
	cursor: pointer;
	text-underline-offset: .22em;
}

.mw-count-link:hover { text-decoration: underline; }

/*
 * The comment a chip has just pointed at.
 *
 * A tint rather than an outline, and it goes on its own: this answers "which
 * one" and then stops being the answer to anything.
 */
.mw-comment.is-shown {
	/*
	 * A plain rgba rather than color-mix: the gold arrives here through two
	 * levels of custom property, and mixing it that way resolved to nothing at
	 * all — a highlight that highlighted nothing.
	 *
	 * And no transition on it either. A transition is a promise that a frame
	 * will be painted, and this mark is applied at the end of a smooth scroll
	 * in a tab that may not be painting at that instant — leaving the highlight
	 * stuck at its start value, which is transparent. It appears at once and is
	 * taken away at once; the thing being conveyed is "this one", and there is
	 * nothing about that worth easing.
	 */
	background: rgba(255, 208, 20, .18);
	border-radius: var(--mw-r-sm);
}

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

.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;
	/*
	 * Hidden by default: the script sets the height to the text and only turns
	 * a scrollbar back on past the cap. Left to itself a one-row textarea
	 * draws one over an empty field, because its content is a hair taller than
	 * the row it was given.
	 */
	overflow-y: hidden;
}

.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; }

/*
 * The chosen reason has to stay legible after the sheet has been scrolled past
 * it, so it is marked with the site's own gold rather than a checkmark glyph
 * that reads as decoration.
 */
.mw-reasons button.is-on {
	background: var(--mw-surface);
	border-color: var(--mw-gold, #ffd014);
	font-weight: 700;
}

.mw-reasons button.is-on::after {
	content: "\F26E";                        /* bi-check-lg */
	font-family: "bootstrap-icons";
	float: inline-end;
	color: var(--mw-gold, #ffd014);
}

/* the optional "what happened" box under the reasons */

.mw-report {
	padding: 4px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

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

/*
 * The theme sets `textarea { width: calc(100% - 40px) !important }` for its own
 * rounded fields, which leaves this one 40px short of the sheet it sits in.
 * The composer answers that the same way, and for the same reason: this box is
 * laid out by its container, not by the theme's control rules.
 */
.mw-report__more {
	width: 100% !important;
	box-sizing: border-box;
	resize: vertical;
	min-height: 74px;
	padding: 10px 12px !important;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-r-sm) !important;
	background: var(--mw-surface);
	color: var(--mw-text) !important;
	font-family: inherit;
	font-size: .8rem;
	line-height: 1.7;
}

.mw-report__more:focus {
	outline: none;
	border-color: var(--mw-gold, #ffd014);
}

.mw-report__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* Empty until the last hundred characters, so it holds no space in the row. */
.mw-report__left {
	font-size: .72rem;
	color: var(--mw-muted);
	font-variant-numeric: tabular-nums;
}

/* 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;
}

/*
 * One person per row: face, then name over handle, then when.
 *
 * The three text pieces used to share a single line, with the handle pushed to
 * the far end by a margin of its own — so a long name wrapped, the handle
 * floated away from the person it belongs to, and the timestamp landed wherever
 * there was room left. Stacked in a column of their own they stay together and
 * the row keeps one baseline.
 */
.mw-liker__main {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

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

/*
 * The viewers list is the likers list with one extra mark: a filled heart for
 * everyone who also liked, so the author reads reach and reaction in one pass
 * instead of opening two lists.
 *
 * On the face rather than at the end of the row. A heart floating in the right
 * margin belongs to the row and has to be traced back to a name; sitting on the
 * corner of the picture it belongs to the person, which is how every app that
 * shows this does it. It overflows the avatar deliberately — half on, half off
 * — with a ring in the sheet's own colour so it reads as applied to the
 * picture rather than as part of it.
 */
.mw-liker__pic {
	position: relative;
	flex: none;
	display: inline-flex;
}

.mw-liker__heart {
	position: absolute;
	/*
	 * Physical left, not inline-start. On this RTL list the avatar sits at the
	 * right of the row, so its left corner is the one facing the name — the
	 * inward corner, which is where every app puts this badge. inline-start
	 * would resolve to the right here and hang the heart off the outer edge.
	 */
	left: -3px;
	bottom: -3px;
	display: grid;
	place-items: center;
	color: var(--mw-rose, #f5365c);
	font-size: .72rem;
	line-height: 1;
	/*
	 * The mark itself, with nothing behind it.
	 *
	 * It sat on a white disc, which on a dark avatar read as a sticker someone
	 * had put on the photograph. A thin dark halo does the same job — keeps the
	 * red legible against a pale face or a light background — without adding a
	 * second shape to the row.
	 */
	filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .55));
}

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

.mw-viewers__guests {
	padding: 8px 16px 12px;
	color: var(--mw-muted);
	font-size: .75rem;
	border-top: 1px solid var(--mw-border);
}

/*
 * The count, as part of the heading rather than under it.
 *
 * Muted and a shade smaller than the word it follows, so it reads as "how
 * many" and not as a second title competing with the first.
 */
.mw-sheet__count {
	margin-inline-start: 6px;
	color: var(--mw-muted);
	font-size: .85em;
	font-weight: 600;
}

/* 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-viewer.is-cube-out-next,
	.mw-viewer.is-cube-in-next,
	.mw-viewer.is-cube-out-prev,
	.mw-viewer.is-cube-in-prev { animation: none; }
	.mw-skel__avatar,
	.mw-skel__ring,
	.mw-skel__block,
	.mw-skel__line { animation: none; }
	.mw-stat.is-popping .bi { animation: none; }
	[data-count].is-up,
	[data-count].is-down { 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; }
}

/*
 * Nothing here is ever wider than the column it sits in.
 *
 * border-box because the empty placeholder inside carries padding, and on a
 * content box that padding is added to the width rather than taken out of it.
 */
.mw-ad {
	box-sizing: border-box;
	max-width: 100%;
}

/* A leaderboard above the body: wide and shallow, so it introduces the article
   rather than delaying it. */
.mw-ad--banner {
	/*
	 * The width is stated, not left to the ratio.
	 *
	 * aspect-ratio and min-height together are a trap on a narrow screen: at
	 * 338px the 4/1 ratio wants 84px of height, min-height raises that to 90,
	 * and with an auto width the browser then re-derives the width FROM the
	 * height — 4 x 90 = 360px, in a 338px column, plus the placeholder's
	 * padding on top. Pinning the width to the column leaves min-height to do
	 * the only thing it was there for: stop the slot collapsing to a strip.
	 */
	width: 100%;
	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 */

/*
 * The card is a column: a heading that stays put and a list that can scroll.
 *
 * It only ever scrolls where something has given the card a height it has to
 * fit — the calendar rail capped to the screen is the one place today. Left to
 * itself the list is as long as it likes and no scrollbar appears, so this
 * costs nothing everywhere else the card is used.
 */
.mw-trend {
	margin-top: 16px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-r-md);
	background: var(--mw-elevated);
	overflow: hidden;

	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* The heading is the card's label; it does not scroll away from its own list. */
.mw-trend__title { flex: none; }

/*
 * min-height:0 again, for the same reason as on the card: without it a flex
 * item is floored at its content height and the overflow never engages.
 */
.mw-trend__list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.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;
}

/*
 * The chart's stand-in tile, matching the related list's.
 *
 * !important on the display for the same reason it is there: the tile is a
 * disc sized by a single-class rule further up, and a flex context is what
 * centres the mark inside it. The images are left to be blockified by the flex
 * container rather than given a display of their own — saying display:block
 * here would outrank the one-class rule in mena-theme.css that hides the
 * wrong colourway, and both wordmarks would sit in the tile side by side.
 */
.mw-trend__figure .mw-trend__thumb--blank {
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: var(--mw-surface-2);
	box-sizing: border-box;
	padding: 4px;
}

.mw-trend__thumb--blank img {
	width: auto;
	height: auto;
	max-width: 72%;
	max-height: 58%;
	object-fit: contain;
	opacity: .28;
	filter: grayscale(1);
}

/*
 * 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: var(--mw-rail-top);
}

/* The advert gives back the gap the cards around it keep, so the board below
   is a panel of its own rather than something stuck to the bottom of an ad. */
.mena-home-grid__side .mw-ad { margin-top: 0; margin-bottom: 18px; }

/*
 * 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 {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	/*
	 * Ruled off, like every other bar at the head of a column.
	 *
	 * It carries the mark now rather than a lone arrow, which makes it a
	 * header rather than a control floating over the first post — and a header
	 * with nothing under it runs into the conversation it is naming.
	 */
	padding: 10px 12px;
	border-bottom: 1px solid var(--mw-border);
}

/*
 * Centred on the bar, not centred in what is left of it.
 *
 * The back control is one side of a flex row, so a centred child would sit in
 * the middle of the remaining space — off-centre by half a button, which is
 * exactly the amount that reads as a mistake rather than as a choice. Taken
 * out of the flow and centred on the bar itself, it lands on the middle of the
 * page whatever is beside it.
 */
.mw-postpage__home {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);

	font-size: .95rem;
	font-weight: 700;
	color: var(--mw-text);
	text-decoration: none;
}

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

/* With a report or a confirmation over the conversation, the bar is that
   view's: its own title takes the middle. */
.mw-postpage.is-stacked .mw-postpage__home { display: none; }

.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; }

/*
 * Except the ones that go somewhere.
 *
 * This page turns hovering off for every card on it, which was right while
 * none of them led anywhere. The parts of a thread around the one being read
 * are posts of their own now, and a card that opens a page and looks exactly
 * like a card that does not is a thing readers find by accident.
 */
.mw-postpage .mw-post--opens { cursor: pointer; }
.mw-postpage .mw-post--opens:hover { background: var(--mw-surface-2); }
.mw-postpage .mw-post__body { font-size: .92rem; line-height: 2.05; }

/*
 * The reply box sits in the conversation now, not under it.
 *
 * It moved out of the page's footer and into the body, directly below the post
 * it answers — so it is a block in a column rather than a bar across the
 * bottom, and it wants a rule on both sides of it rather than only above.
 */
/*
 * Two lines to start with, on a page this wide.
 *
 * A single-line box here reads as a search field rather than as somewhere to
 * write a reply — the same reason the composer at the top of the timeline is
 * given room.
 */
.mw-postpage .mw-reply__input {
	min-height: 46px;
	max-height: 200px;
}

.mw-postpage .mw-sheet__foot {
	/*
	 * Ruled above only.
	 *
	 * Whatever follows it draws its own top edge — the rest of the thread, or
	 * the card this page sits in — and two hairlines against each other read
	 * as one thick smudge rather than as a seam.
	 */
	border-top: 1px solid var(--mw-border);
	padding: 12px 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;
}

/*
 * And the handle, which is not a block with a name.
 *
 * The masthead's "@menaChannels" is an ordinary paragraph somebody typed into
 * the header in the site editor, so unlike the title and the strapline above
 * there is no class to match on — every rule here keys off core block classes
 * precisely so it does not depend on how the header was authored, and this one
 * line cannot.
 *
 * Matched by where it sits instead: a paragraph that is a child of the group
 * holding the site title is part of the masthead, whatever it says. That group
 * introduces the front page; over an article or an inner page the whole of it
 * is height, and the three lines around this one are already gone.
 *
 * The same :has() the home rules use — see .mena-home header … :has(> .wp-block-site-title).
 */
:is(.mena-article, .mena-innerpage, .mena-postpage) header.wp-block-template-part
	.wp-block-group:has(> .wp-block-site-title) > p {
	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__main { grid-area: main; min-width: 0; }

.mena-article-grid__trend   { grid-area: trend; }
.mena-article-grid__related { grid-area: related; }

/*
 * Both rails stick, and both stick *under* the masthead.
 *
 * On an article the header is pinned (see the sticky rule further down), so a
 * rail offset 12px from the top of the viewport is offset 12px from the top of
 * the page — and spends the whole article with its first card behind the bar.
 * --mena-barh is what the pinned header actually leaves on screen, measured and
 * published by mena-menu.js because CSS cannot ask; the fallback of 0 degrades
 * to the old behaviour rather than to a gap.
 *
 * No height cap here, unlike the home page's calendar rail. An article ends,
 * so the rails reach the bottom of the grid and unstick, and everything in them
 * is reachable by scrolling — the trap on the home page is that infinite scroll
 * means that bottom never arrives. Capping these would only clip a skyscraper
 * ad that is taller than what is left of the screen.
 */
.mena-article-grid__trend,
.mena-article-grid__related {
	position: sticky;
	top: calc(var(--mena-barh, 0px) + 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);
}

/*
 * A rule under the heading, in both rail panels.
 *
 * The list below it already separates its own rows with a line, so without one
 * here the heading reads as the first row of the list rather than as its
 * title.
 */
.mw-trends > .mw-related__title,
.mw-board > .mw-related__title {
	padding-bottom: 10px;
	margin-bottom: 2px;
	border-bottom: 1px solid var(--mw-border);
}

.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) {
	/*
	 * 1rem, down from 1.08. The multipliers below are ems against this, so the
	 * base is the whole scale: at 1.08 the article opened a step above the size
	 * most readers would have chosen, and the control could only take them back
	 * to where it should have started. The steps in mena-article.js now reach
	 * further down than up, which is the direction people actually use it in.
	 */
	font-size: calc(1rem * 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;
}

/*
 * No underline on a name.
 *
 * A person's name and handle appear on every card, several times over, and
 * underlining them on hover puts a line under Arabic that the eye reads as part
 * of the script — the same reason the offset above had to be invented in the
 * first place. The name lifts instead: hovering it deepens the colour, which
 * says "this is pressable" without drawing anything through the text.
 */
.mena-user:hover,
.mena-user:focus-visible {
	text-decoration: none;
}

.mena-user:hover { opacity: .78; }

/*
 * 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 {
	color: var(--mw-muted);
	font-size: .68rem;
	line-height: 1.3;
	text-decoration: none;
}

/* 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 and gradient-filled, from the same sprite the verified tick comes
 * from: the artwork carries its own gold, so nothing here sets a fill. The
 * colour below is left in place for the drop shadow, which mixes against 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;
	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);
}

/*
 * The rows reach into the card's padding.
 *
 * A board row carries 8px of its own so its hover pill has somewhere to sit,
 * and inside a card that 8px lands on top of the card's 16px — the names would
 * start a quarter-inch further in than the tags in the panel above. Pulled
 * back out by exactly that much: the pill still overhangs, and both panels'
 * text starts on the same line.
 */
.mw-board .mw-board__list {
	margin-inline: -8px;
}

.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;
}

/* ---- the teaser in the news list ---- */

/*
 * The cut body of an article in the home list, and the link into it.
 *
 * The paragraph deliberately sets almost nothing: it sits inside the Post
 * Content block's own wrapper, which is where the theme keeps the measure, the
 * type size and the rhythm of an article body — and a teaser that reads in a
 * different voice from the article it opens is a teaser the eye distrusts.
 */
.mena-teaser {
	margin: 0;
}

/*
 * The link rides the end of the last line rather than sitting on one of its
 * own: that is what makes it read as the sentence continuing, which is the
 * whole promise of "أكمل القراءة". `nowrap` keeps the phrase and its chevron
 * from being split across the wrap.
 */
/*
 * Set smaller than the teaser it ends. The link is the quietest thing in the
 * paragraph — a reader who wants the story is already looking for it — and at
 * the body's own size, in bold and in the accent colour, it was competing with
 * the headline above for the eye.
 */
.mena-readmore {
	white-space: nowrap;
	font-size: .82em;
	font-weight: 700;
	color: var(--mena-accent);
	text-decoration: none;
}

.mena-readmore:hover,
.mena-readmore:focus-visible {
	text-decoration: underline;
}

/*
 * Pointing the way the language runs. Which glyph that is comes from is_rtl()
 * server-side — see Mena_Web_UI_Excerpt::link() for why it is an icon and not
 * an angle-quote character — so this only has to size and space it.
 */
.mena-readmore__chev {
	display: inline-block;
	margin-inline: .3em;
	font-size: .78em;
	font-weight: 400;
	vertical-align: baseline;
}

/* When the template holds a Post Excerpt block instead, the link is a line of
   its own under the excerpt — the block closes its paragraph before we get to
   it, so there is no last line to ride. */
.mena-teaser__more {
	margin: .4em 0 0;
}

/* ==================================================== the phone's home tabs */

/*
 * Off by default, and rendered on every home page rather than built by the
 * script — the bar is in the first paint instead of appearing a frame later,
 * and this one line is what keeps it out of the three-column desktop grid.
 */
.mena-home-tabs { display: none; }

@media (max-width: 900px) {

	/*
	 * The grid becomes the column. It used to dissolve into one.
	 *
	 * This was `display: contents` on the grid, so that its children and the
	 * pinned hero — a sibling of the grid — became children of the same flex
	 * column and one set of `order` values could interleave them. Elegant, and
	 * broken in WebKit: a sticky element whose containing block comes through a
	 * `display: contents` ancestor does not stick there. Chrome was fine, and
	 * iOS Safari and every in-app browser built on it (X's among them) put the
	 * tab bar down on top of the calendar and let it scroll away.
	 *
	 * So the grid is a real box again — an ordinary flex column, which every
	 * browser has agreed about for a decade — and the tab bar sticks inside it
	 * with nothing exotic between the two. The hero and the story rings, which
	 * start out elsewhere in the markup, are moved into this column by
	 * mena-home-tabs.js and put back on a wide screen; the order values below
	 * are what place them once they are here.
	 */
	.mena-home-wrap:not(.mena-home-wrap--timeline) {
		display: flex;
		flex-direction: column;
		/*
		 * Nothing between the pieces by default, and air added back only above
		 * the tab bar. The bar is the top edge of whichever list it switches
		 * to; a gap under it detaches the two and reads as the list having
		 * slipped down the page.
		 */
		gap: 0;
	}

	.mena-home-wrap:not(.mena-home-wrap--timeline) > .mena-home-grid {
		display: flex;
		flex-direction: column;
		gap: 0;

		/*
		 * Both of these undo something the desktop grid sets, and both have to
		 * be said out loud now that this element is a box rather than dissolved
		 * by display:contents.
		 *
		 * direction: the grid is ltr up there so the three columns read
		 * feed | news | cal from the left. Stacked, that same ltr packs the
		 * strip against the wrong edge and left-aligns the story rings on an
		 * Arabic page.
		 *
		 * align-items: `start` is right for three columns of unequal height, so
		 * the short rail does not stretch to the length of the news list. In a
		 * column it means every child shrinks to its own content width — which
		 * is what left the calendar short of the page, the tab bar a third of
		 * it, and the two tabs nowhere near half each.
		 */
		direction: rtl;
		align-items: stretch;
	}

	.mena-home-wrap:not(.mena-home-wrap--timeline) .mena-home-grid__cal {
		margin-bottom: 20px;
	}

	/*
	 * Descendant, not child. The hero is a sibling of the grid in the markup
	 * and a child of it once the script has moved it, and this has to hold
	 * either way — including in the moment before the script runs.
	 */
	.mena-home-wrap:not(.mena-home-wrap--timeline) .mw-pin {
		margin-top: 16px;
	}

	.mena-home-wrap:not(.mena-home-wrap--timeline) .mena-home-grid__cal  { order: 1; }
	.mena-home-wrap:not(.mena-home-wrap--timeline) .mw-stories           { order: 2; }
	.mena-home-wrap:not(.mena-home-wrap--timeline) .mena-home-tabs       { order: 3; }
	.mena-home-wrap:not(.mena-home-wrap--timeline) .mw-pin               { order: 4; }
	.mena-home-wrap:not(.mena-home-wrap--timeline) .mena-home-grid__news { order: 5; }
	.mena-home-wrap:not(.mena-home-wrap--timeline) .mena-home-grid__feed { order: 6; }

	/*
	 * The rings above the bar, and so on both tabs.
	 *
	 * They used to live at the top of the articles panel, which meant they were
	 * part of one tab: switch to menaSpace and the stories were gone, even
	 * though a story is not an article and belongs to neither list. Lifted out
	 * of the panel, they sit above the switch and stay put whichever side of it
	 * the reader is on.
	 */
	.mena-home-grid > .mw-stories {
		margin-bottom: 14px;
	}

	/*
	 * Only the calendar survives from the right rail. Stacked into one column
	 * the advert and the most-read list are a screen of furniture between the
	 * reader and the news, and the app shows neither on its home screen.
	 */
	.mena-home-grid__cal .mw-ad,
	.mena-home-grid__cal .mw-trend {
		display: none !important;
	}

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

	/*
	 * Full-bleed background, content-width buttons: the negative margin is the
	 * theme's own 5vw page padding, put back as padding on the same element so
	 * the rule under the tabs reaches the edges of the screen while the labels
	 * stay in line with everything above them.
	 */
	/*
	 * Pinned by script, not by position: sticky.
	 *
	 * Sticky was the obvious answer and it kept being the wrong one. Its
	 * containing block is decided by ancestors this bar does not control, every
	 * engine resolves that differently, and an in-app browser that moves its own
	 * toolbar around resizes the viewport underneath it — so on X's browser the
	 * bar pinned itself partway down the page and let the story rings scroll
	 * underneath it. A bar that lands in the middle of the strip is worse than
	 * one that does not stick at all.
	 *
	 * So it is relative until the script says otherwise, and `fixed` after that
	 * — which is the one positioning scheme every browser has agreed about for
	 * twenty years. .mena-home-tabs__hold keeps the space while it is out of
	 * flow, so nothing jumps at the moment it pins.
	 */
	.mena-home-tabs {
		display: flex;
		position: relative;
		z-index: 30;
		margin-inline: -5vw;
		padding-inline: 5vw;
		background: var(--mw-elevated);
		border-bottom: 1px solid var(--mw-border);
	}

	.mena-home-tabs.is-pinned {
		position: fixed;
		top: 0;
		inset-inline: 0;
		left: 0;
		right: 0;
		margin-inline: 0;
		z-index: 60;
		box-shadow: 0 1px 0 var(--mw-border), 0 6px 18px rgba(0, 0, 0, .06);
	}

	/* Zero until the bar leaves the flow, then exactly its height. */
	.mena-home-tabs__hold {
		order: 3;
		height: 0;
	}

	.mena-home-tabs__btn {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1 1 50%;
		min-height: 46px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--mw-muted);
		font-family: inherit;
		font-size: .9rem;
		font-weight: 600;
		line-height: 1.4;
		cursor: pointer;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		transition: color .15s ease;
	}

	.mena-home-tabs__btn.is-active { color: var(--mw-text); }

	/*
	 * The mark on the timeline tab, at the height of the word beside it.
	 *
	 * Centred in the button rather than left where an inline image would sit,
	 * and dimmed while the tab is not the one being read — the tab beside it
	 * says which is current with colour, and a mark at full strength next to
	 * greyed text reads as the selected one.
	 */
	.mena-home-tabs__mark {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		line-height: 0;
		opacity: .55;
		transition: opacity .15s ease;
	}

	.mena-home-tabs__btn.is-active .mena-home-tabs__mark { opacity: 1; }

	.mena-home-tabs__mark .mw-spacemark__img { height: 30px; }

	/* The underline is the tab, as on the app's own pager. */
	.mena-home-tabs__btn::after {
		content: "";
		position: absolute;
		inset-inline: 12%;
		bottom: -1px;
		height: 3px;
		border-radius: 3px 3px 0 0;
		background: var(--mw-gold-deep);
		opacity: 0;
		transition: opacity .15s ease;
	}

	.mena-home-tabs__btn.is-active::after { opacity: 1; }

	/* ---- one list at a time ---- */

	/* The hero belongs to the articles tab: it is an article. */
	.mena-home-wrap[data-mw-tab="feed"] .mw-pin,
	.mena-home-wrap[data-mw-tab="feed"] .mena-home-grid__news { display: none; }
	.mena-home-wrap[data-mw-tab="news"] .mena-home-grid__feed { display: none; }

	/*
	 * No rule above the rings. The strip draws one to close off the masthead
	 * above it, but on a phone what is above it is the tab bar's own border —
	 * so the page got two hairlines a few pixels apart, the second one inset
	 * from the edges, which reads as a mistake rather than as a separator.
	 */
	.mena-home-grid__news .mw-stories,
	.mena-home-grid > .mw-stories {
		border-top: 0;
		padding-top: 10px;
	}

	/* ---- the timeline, as a timeline rather than as a card ---- */

	/*
	 * A phone has no room for a card inside a page inside a padded group, and
	 * the app draws no card either — posts are rows on the page separated by a
	 * hairline. -5vw is the horizontal padding of the group this grid breaks
	 * out of, so the panel lands exactly on the edge of the screen.
	 */
	.mena-home-wrap:not(.mena-home-wrap--timeline) .mena-home-grid__feed {
		margin-inline: -5vw;
	}

	/*
	 * The timeline is the page here, not a panel on it.
	 *
	 * The home layout above already asks for this, but it asks earlier in the
	 * file than the .mw-feed rules that set the panel up as its own scroller —
	 * same specificity, later wins — so on a phone the list has been scrolling
	 * inside an 812px-tall box all along, with the page motionless behind it.
	 * Restated here, at the end, where it is the last word.
	 */
	.mena-home-grid__feed .mw-feed {
		border-inline: 0;
		border-radius: 0;
		max-height: none;
		overflow: visible;
	}

	.mena-home-grid__feed .mw-feed__scroll {
		overflow: visible;
		min-height: 0;
	}

	/*
	 * No panel header. It carried the name of the list and a link to the
	 * expanded view; the tab above now says the first, and the second is a
	 * page that would show exactly what this tab is already showing.
	 */
	.mena-home-wrap:not(.mena-home-wrap--timeline) .mena-home-grid__feed .mw-feed__head {
		display: none;
	}
}

/* --------------------------------------------- a tappable header menu */

/*
 * The header menu is a row of small links with no padding of their own: fine
 * for a pointer, and on a phone a 22px-tall strip that a fingertip misses more
 * often than it hits. Below the breakpoint each link is given a real target —
 * grown by padding rather than by pushing the items apart, so the row keeps
 * its shape.
 *
 * touch-action says there is no double-tap-to-zoom to wait for, so the tap
 * acts on release rather than a third of a second later.
 */
header.wp-block-template-part .wp-block-navigation-item__content {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

@media (max-width: 900px) {
	header.wp-block-template-part .wp-block-navigation-item__content {
		display: inline-flex;
		align-items: center;
		min-height: 38px;
	}

	/*
	 * Sideways room only on the front page, where the menu wraps onto two lines
	 * and has it to spare. On an inner page the same menu is a single strip that
	 * scrolls horizontally, and padding there buys nothing a taller target has
	 * not already bought — it only pushes items off the end of the strip.
	 */
	.mena-home header.wp-block-template-part .wp-block-navigation-item__content {
		padding-inline: 6px;
	}
}

/* ------------------------------ the expanded timeline and one post, on a phone */

/*
 * Both of these views are one thing on the screen: the timeline, or a post and
 * its replies. On a desktop the two rails beside them are what keep the page
 * reading as part of the site; stacked into one column they are neither beside
 * it nor part of it — the reader reaches the end of the conversation and the
 * next thing is an advert and a calendar. The app shows neither, and nor does
 * the mobile app's home screen, so neither does this.
 *
 * .mena-timeline is the body class for both views, and .mena-postpage narrows
 * to the second; the home grid keeps its own rail rules elsewhere.
 */
@media (max-width: 900px) {
	.mena-timeline .mena-home-grid__side,
	.mena-timeline .mena-home-grid__cal {
		display: none;
	}

	/*
	 * And everything left runs to the edges of the screen, for the same reason
	 * the home page's timeline tab does: -5vw is the horizontal padding of the
	 * group this grid breaks out of. No cards, because there is nothing left
	 * for a card to separate these from.
	 */
	.mena-timeline .mw-composer,
	.mena-timeline .mw-feed__scroll,
	.mena-timeline .mw-postpage {
		margin-inline: -5vw;
		border-inline: 0;
		border-radius: 0;
	}

	/*
	 * Composer and timeline as one surface, the way the app stacks them: the
	 * composer's own bottom hairline is the divider, so the list underneath
	 * does not draw a second one three pixels below it.
	 */
	.mena-timeline .mw-composer { margin-bottom: 0; border-top: 0; }
	.mena-timeline .mw-feed__scroll { border-top: 0; }
	.mena-timeline .mw-postpage { border: 0; }

	/*
	 * A rule between the rings and the composer.
	 *
	 * The strip closes itself off from the masthead above but ran straight into
	 * the box for writing a post, so the two read as one block with a row of
	 * faces on top of it. Full-bleed while it is at it: everything under it on
	 * this page reaches the edges of the screen, and a separator that stops
	 * short of them looks like it belongs to something else.
	 */
	.mena-timeline:not(.mena-postpage) .mw-stories {
		/*
		 * !important, because the strip is a child of a constrained group and
		 * WordPress gives every one of those "margin-left: auto !important;
		 * margin-right: auto !important" — the same rule .mena-home-wrap has to
		 * beat further up this file, and for the same reason.
		 */
		max-width: none !important;
		margin-inline: -5vw !important;
		margin-bottom: 0;
		padding: 14px 5vw 10px;
		border-bottom: 1px solid var(--mw-border);
	}

	/* And the composer comes straight after it, so the rule reads as the line
	   between the two rather than as one drawn under the rings. */
	.mena-timeline:not(.mena-postpage) .mw-stories + * {
		margin-block-start: 0 !important;
	}

	/*
	 * One way back, not two. The bar above now carries a back arrow, and this
	 * one sat a centimetre below it pointing the same direction.
	 *
	 * The whole row goes, not just the arrow. At rest the row holds the arrow
	 * and a title that is hidden until a sub-view is pushed over the post — so
	 * with the arrow gone it was an empty 12px strip of padding between the bar
	 * and the post, which is the gap this leaves behind.
	 *
	 * Only at rest. Once something IS stacked over the conversation the row is
	 * that view's header, and its arrow is the only way to pop back out.
	 */
	.mena-postpage .mw-postpage:not(.is-stacked) .mw-postpage__head { display: none; }
}

/* ---------------------------------------- the next page, while it is coming */

/*
 * Infinite scroll with nothing to show for itself is a page that simply stops:
 * the reader reaches the bottom, the request is in flight, and there is no
 * sign that anything is on its way. These are the same placeholder rows the
 * shell paints on first load — the shape of what is arriving, holding the
 * height it will take — appended at the end of the list and removed the moment
 * the real posts replace them.
 */
.mw-feed__pending { display: block; }

/* ================================= the news list's own placeholders */

/*
 * A page of articles, in outline, while it is being fetched. Same shapes and
 * the same shimmer the feed uses — see .mw-skel — laid out as the article
 * cards above them are: two lines of headline, a byline, a paragraph, the
 * picture, the date.
 *
 * The li carries the rule and the padding rather than an inner wrapper doing
 * it, because in the real card those come from an inline style the block
 * editor wrote and there is nothing here to inherit them from.
 */
.mena-artskel__in {
	border-top: 1px solid var(--mena-border);
	padding: 16px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mena-artskel__title { height: 18px; }

.mena-artskel__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 2px;
}

.mena-artskel__img {
	height: 190px;
	margin: 2px 0;
}

/* The sentinel: a box with no height, only a position in the list. */
.mena-artskel-mark {
	display: block;
	height: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mena-artend {
	list-style: none;
	margin: 0;
	padding: 22px 0;
	text-align: center;
	font-size: .75rem;
	color: var(--mena-muted);
	border-top: 1px solid var(--mena-border);
}

/* ============================================ the satellite bulletin */

/*
 * Air under the heading. The section draws no rule there on purpose — with its
 * own two lines a third would make the header read as a table caption — so the
 * separating is space's job, and eight pixels was not enough of it.
 */
.mw-sat__head { padding-bottom: 14px; }

@media (max-width: 900px) {
	/*
	 * The date onto its own line.
	 *
	 * In a 300px rail the stamp sits at the end of the row and the text flows
	 * beside it. At the full width of a phone the text is long enough to wrap,
	 * and a nowrap date pinned to the end of a three-line paragraph left a
	 * ragged column of white down the middle of every row. Below the text and
	 * aligned to it, it reads as the row's footer instead.
	 */
	.mw-sat__row { flex-wrap: wrap; }

	.mw-sat__text { flex: 1 1 0; }

	.mw-sat__when {
		order: 3;
		flex: 1 1 100%;
		margin: 3px 0 0;
		/*
		 * Physical, and it has to be. The <time> carries dir="ltr" in the
		 * markup so the date's digits and slashes keep their order — which
		 * means its own logical start is the left, the opposite end of the row
		 * from where the text it belongs to begins. 33px is the icon's disc
		 * plus the row's gap and padding, so the stamp lines up under the first
		 * word rather than under the disc.
		 */
		text-align: right;
		padding-right: 33px;
	}
}

/* =========================================== the calendar, on a phone */

/*
 * The widget is built for a 300px rail beside the news, where it has a column
 * to itself and vertical room is cheap. Stacked at the top of a phone it is the
 * first thing between the masthead and the headlines, and at full size it spent
 * a third of the screen saying there is nothing on today. Everything below is
 * the same card with the air taken out of it — no piece is removed.
 */
@media (max-width: 900px) {
	.mena-home-grid__cal .cec-col-left,
	.mena-home-grid__cal .cec-col-right { padding: 8px 12px !important; }

	.mena-home-grid__cal .cec-label { margin-bottom: 3px !important; }

	/* Twenty pixels of margin above one line of grey text saying the day is
	   empty was the single largest thing in the card. */
	.mena-home-grid__cal .cec-empty {
		margin-top: 4px !important;
		text-align: start;
	}

	.mena-home-grid__cal .cec-today-box {
		margin-top: 8px !important;
		padding: 9px 10px !important;
	}

	.mena-home-grid__cal .cec-upcoming-item { padding: 7px 2px !important; }

	.mena-home-grid__cal .cec-date-badge {
		width: 38px !important;
		padding: 4px 0 5px !important;
		border-radius: 8px !important;
	}

	.mena-home-grid__cal .cec-date-badge .cec-day { font-size: 15px !important; }
	.mena-home-grid__cal .cec-date-badge .cec-mon {
		margin-top: 2px !important;
		font-size: 8px !important;
	}

	.mena-home-grid__cal .cec-event-name { line-height: 1.55 !important; }
}

/* ==================================== the article page, on a phone */

@media (max-width: 900px) {
	/*
	 * The bar and the article, with nothing between them.
	 *
	 * Two margins were making the gap: the header's own, and WordPress's block
	 * gap on the group that follows it — which collapse together into the
	 * larger of the two rather than adding up, so both have to go. What is
	 * under the bar is the headline, and a headline needs no introduction.
	 */
	body:is(.mena-article, .mena-innerpage) header.wp-block-template-part {
		margin-bottom: 0 !important;
	}

	body:is(.mena-article, .mena-innerpage) .wp-site-blocks > .wp-block-group + .wp-block-group {
		margin-block-start: 0 !important;
	}

	/*
	 * Headline and byline centred.
	 *
	 * At full measure a headline set from the reading edge is a headline; in a
	 * 338px column it wraps to three lines with a ragged end and the byline
	 * hanging off one corner of it. Centred, the two read as a title block —
	 * which is what a phone has room for and what the app does with the same
	 * two pieces.
	 */
	.mena-article__head { text-align: center; }

	.mena-article__meta { justify-content: center; }

	/* A little more room above, now that the masthead is not providing any. */
	.mena-article__title { margin-top: 4px; }
}

/* ============================================ archives and search */

/*
 * A tag page is a list with a name on it, and the name is two things: a label
 * saying which kind of list ("الوسم:") and the term itself. WordPress prints
 * them as one string with the term in a span, which is exactly the split this
 * needs — the label recedes, the term is the heading.
 */
.mena-archive__title {
	margin: 6px 0 2px;
	font-size: .82rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--mena-muted);
}

.mena-archive__title span {
	display: block;
	margin-top: 2px;
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--mw-text, var(--mena-text));
}

.mena-archive__desc {
	margin: 8px 0 0;
	max-width: 68ch;
	font-size: .88rem;
	line-height: 1.9;
	color: var(--mena-text-2);
}

/* The list starts far enough below the name not to read as part of it — the
   first article draws its own rule, and a rule under a heading is a caption. */
.mena-archive__title + .wp-block-query,
.mena-archive__desc + .wp-block-query {
	margin-top: 18px;
}

/* ================================= the reading bar stays on screen */

/*
 * The compact bar is the way out of an article: back, the wordmark home, and
 * the menu. All three are useless at the top of a page the reader is four
 * screens down, so the bar travels with them.
 *
 * The negative offset is the point. The bar is two rows — the utility strip
 * with search and the account links, then back/wordmark/menu — and pinning all
 * of it would spend a seventh of a phone screen permanently. Sticking it by the
 * height of the first row lets that row scroll away and holds the second one,
 * which is the half with the navigation in it. --mena-topnav is measured and
 * set by mena-menu.js; the fallback of 0 simply pins the whole bar, which is
 * correct, just taller.
 */
/*
 * The group around the header sticks, not the header.
 *
 * A sticky box can only travel inside its own containing block, and the header
 * sits several groups deep in one exactly as tall as itself — so sticking it
 * there pins it for the nought pixels it has to move in, which looks precisely
 * like sticky not working. The outermost group is a child of .wp-site-blocks
 * and has the whole document to move through.
 */
/*
 * !important on both, and not for the usual reason.
 *
 * The rule further up this file that strips the article template's hardcoded
 * black slab does it with `background: none !important; position: static
 * !important` on EVERY group containing the header, because the colour could
 * be on any one of them. That is still right for the groups inside — the slab
 * has to go — but the outermost one is now the bar itself, and it needs a
 * position to stick with and something opaque behind it, or the article scrolls
 * through the pinned row.
 */
/*
 * Two selectors because the templates disagree about the header's depth: the
 * article wraps the header part in a group (the one that used to carry the
 * black slab), the archive drops it straight into .wp-site-blocks. Whichever
 * of the two is the direct child is the box with room to travel.
 */
:is(.mena-article, .mena-innerpage, .mena-postpage)
	.wp-site-blocks > header.wp-block-template-part,
:is(.mena-article, .mena-innerpage, .mena-postpage)
	.wp-site-blocks > .wp-block-group:has(header.wp-block-template-part) {
	position: sticky !important;
	top: calc(-1 * var(--mena-topnav, 0px));
	z-index: 40;
	background: var(--mena-elevated) !important;
}

/*
 * The login dialog lives inside the header block and is fixed to the viewport.
 * A fixed element inside a sticky one is still fixed — but the sticky ancestor
 * caps its stacking, so without this the overlay would slide under the page it
 * is meant to cover.
 */
:is(.mena-article, .mena-innerpage, .mena-postpage) header.wp-block-template-part .login-modal-overlay {
	z-index: 100000;
}

/* ------------------------------------- the profile borrows the timeline's feed */

/*
 * ...and must not also borrow its breakout.
 *
 * The profile page adds mena-timeline to the body so the discussion styles
 * apply to a member's own posts. That brings the -5vw the timeline uses to
 * escape the page gutter — but the profile has no gutter to escape: it removes
 * the padding at source (see csp-profile.css). Left in, the feed would hang
 *5vw off each side of the screen.
 */
@media (max-width: 900px) {
	.csp-page .mw-feed,
	.csp-page .mw-feed__scroll,
	.csp-page .mw-composer {
		margin-inline: 0;
	}
}

/* ------------------------------------------------- new posts, while reading */

/*
 * The pill that says the timeline has moved on.
 *
 * Sticky rather than pinned to the top of the list: a reader four screens down
 * is exactly who this is for, and a badge they have scrolled past is a badge
 * that does not exist. It sits under the bar the header leaves behind —
 * --mena-barh is published by mena-menu.js, which measures it — so it never
 * hides under the masthead on the way past.
 *
 * A button, not a banner. It has one job and tapping it is the whole
 * interaction, so it should look like the thing you press.
 */
/*
 * Under the composer, and it stays there.
 *
 * It starts in the flow, directly below the box you would write in, and pins to
 * the viewport once the reader scrolls past it — a badge announcing new posts
 * is for the person four screens down, and one they have scrolled past does not
 * exist.
 *
 * Fixed, driven from mena-web-ui.js, rather than sticky. Sticky cannot leave
 * its containing block and is clipped by any ancestor hiding overflow, and the
 * feed is inside both: a rounded card with overflow: hidden on the wide grid,
 * and a tab bar that pins above it on the narrow one. That is why the pill kept
 * arriving sliced in half or tucked behind the tabs. The script measures
 * whichever bar is actually resting at the top and puts the pill under it.
 */
/*
 * The slot holds a place without taking any room.
 *
 * It used to be a flex row the height of the pill, which pushed the whole
 * timeline down by fifty pixels and left a gap under the composer whenever
 * there was nothing to announce — furniture standing in the way of the thing
 * it is about. Zero height, and the pill floats over the first post instead:
 * the badge is a notice about the timeline, not a row in it.
 */
.mw-newposts__slot {
	position: relative;
	height: 0;
	z-index: 21;
}

.mw-newposts__slot > .mw-newposts {
	position: absolute;
	top: 8px;
	inset-inline-start: 50%;
	transform: translateX(50%);
}

/* Sliding in from above the timeline rather than out of the composer. */
@keyframes mw-pill-drop {
	from { opacity: 0; transform: translateX(50%) translateY(-8px) scale(.94); }
	to   { opacity: 1; transform: translateX(50%); }
}

.mw-newposts__slot > .mw-newposts { animation: mw-pill-drop .3s cubic-bezier(.22, 1, .36, 1) both; }

.mw-newposts__slot > .mw-newposts:hover,
.mw-newposts__slot > .mw-newposts:focus-visible {
	transform: translateX(50%) translateY(-1px);
}

.mw-newposts__slot > .mw-newposts:active { transform: translateX(50%); }

.mw-newposts.is-pinned {
	position: fixed;
	/* Above the tab bar it used to hide behind, below dialogs and overlays. */
	z-index: 60;
	margin: 0;
}

.mw-newposts {
	display: flex;
	align-items: center;
	gap: 7px;
	/* Clear of the composer above it, clear of the first post below it. */
	margin: 10px auto 12px;
	padding: 8px 18px;

	/*
	 * White, not gold.
	 *
	 * Pinned over the timeline it is a floating chip rather than a banner, and
	 * a solid gold lozenge riding over the posts was the loudest thing on the
	 * page. White with a hairline and a shadow reads as sitting above the
	 * column; the gold stays on the arrow, which is the part that says which
	 * way to go.
	 */
	border: 1px solid var(--mw-border);
	border-radius: 999px;
	background: #fff;
	color: #1a1a1a;

	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;

	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
	transition: transform .16s ease, box-shadow .16s ease;
	animation: mw-pill-in .3s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes mw-pill-in {
	from { opacity: 0; transform: translateY(-8px) scale(.94); }
	to   { opacity: 1; transform: none; }
}

.mw-newposts:hover,
.mw-newposts:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .24);
}

.mw-newposts:active { transform: translateY(0); }

.mw-newposts i {
	font-size: 14px;
	color: var(--mw-gold, #ffd014);
}

/* Nothing to announce, and nothing taking up a line saying so. */
.mw-newposts[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.mw-newposts { transition: none; animation: none; }
	.mw-newposts:hover,
	.mw-newposts:focus-visible { transform: none; }
}

/* ======================================================== adverts in a list */

/*
 * The three placements the script inserts: a tile in the stories row, a break
 * every twentieth post, and the space above the first reply.
 *
 * All three are silent when unsold — the script draws nothing rather than a
 * house card — so there is no empty state to style here. What these rules do is
 * make an advert sit in a list of posts the way a post does, and in a row of
 * stories the way a story does, so it reads as part of the page rather than as
 * something that landed on it.
 */
.mw-adslot { margin: 0; }

/*
 * The slot holds its shape before the picture arrives.
 *
 * --mw-ad-ratio is written onto the element by Mena_Ads::slot(), which knows
 * the placement's ratio — so this one rule covers the placements declared in
 * PHP and the ones made in the console, which have no stylesheet of their own
 * and never will. Without it an image advert is a 0px box that shoves the rest
 * of the page down the moment it loads.
 *
 * Only the picture is held to the shape. A network tag decides its own height,
 * and forcing a ratio onto one is how a Google unit ends up cropped.
 */
/*
 * Keyed to .mw-ad--slot, not to the wrapper.
 *
 * A placement reaches the page two ways: inserted by the script into a list of
 * cards, and printed by [mena_ad] wherever it was pasted. Both emit
 * .mw-ad--slot; only the first has .mw-adslot around it. Scoping the shape to
 * the wrapper meant a shortcode on /satellite/ rendered a slot 0px tall — the
 * advert was there and there was nothing to see.
 */
.mw-ad--slot {
	/* .mw-ad is square by default; a slot's shape comes from its placement. */
	aspect-ratio: auto;
	width: 100%;
}

.mw-adslot .mw-ad { margin: 0; }

.mw-ad--slot .mw-sold--image,
.mw-ad--slot .mw-sold--html {
	display: block;
	width: 100%;
	aspect-ratio: var(--mw-ad-ratio, 4 / 1);
}

.mw-ad--slot .mw-sold--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * In the timeline: full bleed, corner to corner.
 *
 * The posts around it are cards with a 16px gutter, and an advert inset to
 * match them was reading as one more card — a post with a picture in it. Taking
 * the gutter and the corners away is what separates the two: the break spans
 * the column edge to edge, which no post ever does, so it is obviously not one.
 * The hairline underneath stays, because it is still an item in a list.
 */
.mw-adslot--stream {
	padding: 0;
	border-bottom: 1px solid var(--mw-border-soft, var(--mw-border));
}

/*
 * The wrapper as well as the creative.
 *
 * .mw-ad — the slot Mena_Ads::slot() prints — carries `border-radius` and
 * `overflow: hidden` of its own, and a rounded box that clips its contents
 * rounds them whatever radius they were given. Squaring the picture alone left
 * the corners exactly as they were, because it was never the picture doing it.
 */
.mw-adslot--stream .mw-ad,
.mw-adslot--stream .mw-sold,
.mw-adslot--stream img {
	border-radius: 0;
}

/*
 * Above the replies: inset, unlike the timeline.
 *
 * Different problem, so a different answer. Here the advert is not competing
 * with a list of cards to be told apart from — it is one thing between a post
 * and its replies — and running it edge to edge between two things that keep a
 * 16px gutter read as the advert having escaped the column. A little more room
 * beneath than above: the gap under it is all that separates an advert from
 * the first person answering.
 */
.mw-adslot--comments { padding: 14px 16px 18px; }

.mw-adslot--comments .mw-sold {
	border-radius: var(--mw-r, 14px);
	overflow: hidden;
}

/* --------------------------------------------------- the advert as a story */

/*
 * A frame in the viewer, between two people's stories.
 *
 * It fills the stage the way a photograph does — same object-fit, same
 * rounding — so that what changes between a story and an advert is the content
 * and not the shape of the window. The word "إعلان" sits where the name goes,
 * and the button underneath is the only thing here that is not a story.
 */
.mw-viewer__ad {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #000;
}

.mw-viewer__ad .mw-sold,
.mw-viewer__ad .mw-sold--image,
.mw-viewer__ad .mw-sold--html {
	display: block;
	width: 100%;
	height: 100%;
	/* The stage already is the story's shape; the creative fills it rather
	   than imposing a second one. */
	aspect-ratio: auto;
	border-radius: 0;
}

.mw-viewer__ad img,
.mw-viewer__ad .mw-sold__cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A headline over a picture, at the size a story reads at rather than the size
   a banner does. */
.mw-viewer__ad .mw-sold__text { padding: 22px; }
.mw-viewer__ad .mw-sold__title { font-size: 1.3rem; line-height: 1.7; }
.mw-viewer__ad .mw-sold__sub { font-size: .9rem; }

/* ------------------------------------------------------------- the button */

.mw-viewer__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 13px 18px;
	border-radius: 999px;
	background: var(--mw-gold, #ffd014);
	color: var(--mw-on-gold, #1a1a1a) !important;
	font-size: .95rem;
	font-weight: 800;
	text-decoration: none !important;
	transition: filter .15s ease;
}

.mw-viewer__cta:hover { filter: brightness(.96); }

.mw-viewer__cta i { font-size: .9em; }

/* ---------------------------------------------- the break in the news list */

/*
 * The advert every tenth article, as a list item.
 *
 * It has to be an <li> to be legal inside the list and to survive the infinite
 * scroll, which lifts list items out of the fetched page and drops everything
 * else — but it is not an article, so it gives back the marker and the card
 * padding the articles carry from the block editor's inline styles.
 */
li.mena-news-ad {
	list-style: none;
	margin: 0;
	padding: 0;
}

li.mena-news-ad::marker { content: none; }

/* The house card brings its own 20px of margin; a sold one is a bare slot and
   needs the same air around it, or it butts against the article above. */
li.mena-news-ad > .mw-ad,
li.mena-news-ad > .mw-adslot { margin: 20px 0; }

/* ---------------------------------------------- the timeline search and trends */

/*
 * A search box at the top of the rail.
 *
 * A row rather than a field with an icon sitting on top of it: the icon, the
 * input and the clear button are three boxes in a flex line, so the input can
 * be handed the remaining width and nothing has to be positioned absolutely
 * against a padding value that changes with the font.
 *
 * The border lives on the wrapper and the input gives up its own, which is what
 * lets the focus ring surround the whole control including the icon.
 */
.mw-find { margin-bottom: var(--mw-bar-gap); }

.mw-find__form {
	/*
	 * Border-box, like the header bar it sits level with.
	 *
	 * Both take their height from --mw-bar-h, but a min-height is the height of
	 * the content box: this control has a border all the way round and that one
	 * has a border along the bottom, so content-box made them 44px and 43px —
	 * two bars at the top of adjacent columns, not quite level, for no reason a
	 * reader could name.
	 */
	box-sizing: border-box;

	display: flex;
	align-items: center;
	gap: 8px;
	min-height: var(--mw-bar-h);
	padding: 0 12px;
	background: var(--mw-surface);
	border: 1px solid var(--mw-border);
	border-radius: 999px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.mw-find__form:focus-within {
	border-color: var(--mw-gold-deep);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mw-gold-deep) 18%, transparent);
}

.mw-find__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	color: var(--mw-muted);
}

.mw-find__icon svg { width: 100%; height: 100%; }

.mw-find__input {
	flex: 1 1 auto;
	min-width: 0;
	background: none;
	border: 0;
	outline: 0;
	/*
	 * A line box with room under it, and declared loudly enough to win.
	 *
	 * Arabic descenders — the tail of ي, the bowl of ن — kept being cut off
	 * flat along the bottom of the field. Two things were doing it. An input
	 * clips its text to its content box, so the box has to be taller than the
	 * letters rather than the same height; and the theme styles bare inputs
	 * with rules of its own, which is why every other input in this file
	 * fights back with !important and this one was quietly losing.
	 *
	 * The wrapper still sets the control's height. This only has to make sure
	 * the line inside it is not the exact height of the glyphs.
	 */
	height: auto !important;
	line-height: 2 !important;
	padding: 5px 0 !important;
	font: inherit;
	font-size: .82rem;
	color: var(--mw-text);
}

.mw-find__input::placeholder { color: var(--mw-muted); }

/* The browser's own clear affordance, removed: the button beside it is the
   one that also resets the column, and two of them side by side do different
   things while looking identical. */
.mw-find__input::-webkit-search-cancel-button { display: none; }

.mw-find__clear {
	flex: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	width: 18px;
	height: 18px;
	line-height: 1;
	font-size: 1.05rem;
	color: var(--mw-muted);
}

.mw-find__clear:hover { color: var(--mw-text); }

/*
 * Trends: the same card the rest of the rail is made of.
 *
 * Two lines per row — the tag, then how many posts carry it — with the count
 * quiet underneath, so a column of them reads as a list of subjects rather
 * than a table of numbers.
 */
/*
 * One card, two panels.
 *
 * The board had no card at all — a heading and a list sitting directly on the
 * page between two bordered boxes, which read as something that had failed to
 * load rather than as a panel of its own. Declared together so the two cannot
 * drift apart again the next time one of them is touched.
 */
.mw-trends,
.mw-board {
	background: var(--mw-surface);
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-r-lg);
	padding: 14px 16px 6px;
	margin-bottom: 18px;
}

.mw-trends__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.05em;
	height: 1.05em;
	color: var(--mw-gold-deep);
}

.mw-trends__mark svg { width: 100%; height: 100%; }

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

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

.mw-trends__link {
	display: block;
	padding: 9px 0;
	text-decoration: none;
	color: inherit;
}

.mw-trends__link:hover .mw-trends__tag { color: var(--mw-gold-deep); }

.mw-trends__tag {
	display: block;
	font-size: .85rem;
	font-weight: 700;
	color: var(--mw-text);
	/* A tag can be one long word with nowhere to break: let it end in an
	   ellipsis rather than push the rail wider than its column. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mw-trends__count {
	display: block;
	margin-top: 2px;
	font-size: .7rem;
	color: var(--mw-muted);
}

/*
 * Where the thread goes next, under the replies.
 *
 * The same card and the same connecting line as the parts above the
 * conversation, because they are the same thing — just the ones this page is
 * not about. Spaced away from the replies so the heading is read as a break
 * rather than as another reply.
 */
.mw-thread-rest {
	/*
	 * Flush against the box above it.
	 *
	 * The rule is what separates this section from the reply box; a gap as
	 * well left the two ends of one seam a centimetre apart, and the border
	 * floating in between belonging to neither.
	 */
	border-top: 1px solid var(--mw-border);
}

/* ------------------------------------------------------------ the menaSpace mark */

/*
 * The timeline's wordmark, wherever its name used to be written.
 *
 * Centred in every one of them, and that takes two different mechanisms.
 * Where the mark is the bar's only content, the bar centres it. Where it
 * shares the bar with a control — the expand button on the home widget, the
 * back arrow on a post page — centring it as a flex child would put it in the
 * middle of what is left over, off by half a button, which is exactly the
 * amount that reads as a mistake. Those two take it out of the flow and centre
 * it on the bar itself.
 */
.mw-spacemark {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.mw-spacemark__img {
	height: 40px;
	width: auto;
	/* A wordmark on a narrow rail has to give way before the column does. */
	max-width: 100%;
	object-fit: contain;
}

/* The bar over the timeline holds the mark and nothing else. */
.mw-tagbar--home { justify-content: center; }

/*
 * The mark in that bar is a button, so it has a button's defaults to undo:
 * a background, a border, a font of its own, and padding around a picture
 * that is already the right size.
 */
.mw-tagbar__top {
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	color: inherit;
	font: inherit;
}

.mw-tagbar__top:hover { opacity: .85; }

/*
 * The home page's widget head: the mark centred on the head, the expand button
 * where it was.
 */
.mw-feed__head { position: relative; }

/* Out of the flow, the mark no longer holds the head open — so the head is
   told to be at least as tall as the mark it is carrying. */
/*
 * Out of the flow, the mark no longer holds the head open — so the head is
 * told to be as tall as the mark it is carrying, and no taller.
 */
.mw-feed__head:has(.mw-spacemark) { min-height: 40px; }

/* Smaller than the 40px it is elsewhere: this head sits inside a column of
   three on the home page rather than across the top of the timeline, so the
   mark is a label on a panel rather than the name of the page. */
.mw-feed__title .mw-spacemark__img { height: 30px; }

/*
 * The head's mark is a link to the timeline.
 *
 * Inline-flex with a zero line-height, so the anchor is exactly the picture
 * and no taller: a link that inherits the heading's line box has a band of
 * dead space above and below the mark that lights up on hover.
 */
.mw-feed__home {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	color: inherit;
	text-decoration: none;
}

.mw-feed__home:hover { opacity: .85; }

/*
 * The way out sits on the left, whatever the writing direction.
 *
 * It is the only child left in the flow once the mark is centred, so it landed
 * wherever the row started — the right, in Arabic. margin-inline-start pushes
 * it to the far end, which is the left here and the right in an LTR build,
 * without either of them being named.
 */
.mw-feed__head .mw-feed__expand { margin-inline-start: auto; }

.mw-feed__title:has(.mw-spacemark) {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	flex: none;
}

/*
 * Without :has(), every title is centred — including the ones that are words.
 *
 * Old Safari and Firefox before 121 drop the rule above entirely rather than
 * misapply it, which leaves the mark where it was: at the start of the head,
 * beside the button. Legible, just not centred, which is the right thing for a
 * browser to fall back to.
 */
.mw-feed__title .mw-spacemark { flex: none; }

/* The post page's header centres its own link already; the mark only has to
   be the right size inside it. */
.mw-postpage__home .mw-spacemark__img { height: 35px; }