/**
 * App-style UI: single `post` pages AND the homepage, at every viewport below 1600px. Loaded on those
 * pages only and only applied in the theme's ONE app range, GNP_APP_MEDIA (inc/app-breakpoint.php):
 *   (max-width: 1599.98px)
 * The stylesheet is enqueued with that media query (inc/mobile-article-nav.php) and every rule below is also inside
 * it. On full desktop (the exact complement - 1600px and wider, whatever the pointer) none of this exists, so the
 * desktop UI is byte for byte what it was.
 *
 * Phones are the source of truth. Wider app layouts (600px and up: tablet portrait / landscape) keep the very same
 * UI and behaviour; section 4 only centres and caps it with the --gnp-app-* tokens below, so the bottom navigation,
 * the article column and the homepage deck sit in the middle of a wide screen instead of stretching edge to edge.
 *
 * Two scopes, both on <body>:
 *   - `body.gnp-mobile-app`     (articles + homepage): the simplified header, the bottom navigation, the Share
 *                               stack and the Profile menu. The one shared implementation;
 *   - `body.gnp-mobile-article` (articles only): the hero rebuild (headline above the image, author row, meta row).
 * The homepage content itself is never restyled here.
 *
 * What it changes on a phone:
 *   1. header: hamburger + logo + Join Free (visitors) / hamburger + logo (members). The theme toggle, search and
 *      account controls move to the bottom navigation;
 *   2. (articles) hero: no image overlay - headline on the page background, then author row (+ the compact Google
 *      trigger), then the rounded featured image with the category badge in its top-right corner, then the date /
 *      categories / reading-time row;
 *   3. the bottom navigation, the floating circular Share action above its last item, and the Share stack that rises
 *      from that button. They have no colour palette of their own: the
 *      surface, text, border and accent are the site's own tokens (--wp--preset--color--*), which the existing
 *      theme switch re-points (data-theme / prefers-color-scheme), so the bar follows Light and Dark live;
 *   4. (articles) the old fixed mobile share bar is hidden (the desktop rail is not shown below 1300px anyway).
 *
 * The Daily Game Guess strip is untouched. Layering uses the theme's existing scale: header 40, bottom nav 45
 * (same as the share bar it replaces), sidebar backdrop 55, drawer 60; native <dialog>s are in the top layer.
 */
@media (max-width: 1599.98px) {

	body.gnp-mobile-app {
		/* Wide app layouts (section 4): the centred column widths, the ONE place they are set. The nav and the article
		   reading column share the article body's own 720px measure (templates/single.html), so on a tablet the bar
		   lines up with the text above it; the homepage deck + preview sheet use a narrower card column (its 560px
		   picture is what the card / sheet image `sizes` describe - inc/mobile-home-deck.php, mobile-home-deck.js). */
		--gnp-app-nav-max: 45rem;
		--gnp-app-read-max: 45rem;
		--gnp-app-deck-max: 37rem;
		--gnp-mobile-nav-h: 3.75rem;
		--gnp-mobile-nav-gap: 0.75rem;
		--gnp-mobile-inset: 0.75rem;
		--gnp-mobile-text-inset: 0.3125rem;
		/* The nav's colours ARE the site tokens (re-pointed by the existing Light/Dark switch), never a palette of
		   its own: light = the white surface + dark text, dark = the dark surface + light text. Only the shadow
		   depth differs per theme (see the two dark blocks below). */
		--gnp-mobile-nav-bg: var(--wp--preset--color--surface);
		--gnp-mobile-nav-fg: var(--wp--preset--color--contrast);
		--gnp-mobile-nav-border: var(--wp--preset--color--border);
		--gnp-mobile-nav-accent: var(--wp--preset--color--accent);
		--gnp-mobile-nav-shadow: 0 8px 24px rgba(14, 14, 16, 0.12), 0 1px 3px rgba(14, 14, 16, 0.08);
		/* The floating Share action (a circle above the bar's last item): never larger than a nav tap target. */
		--gnp-mobile-fab-size: 2.75rem;
		--gnp-mobile-fab-gap: 0.625rem;
		/* Everything fixed at the bottom of the screen in the app layout (bar + floating Share + their gaps + the safe
		   area). The ONE token for "how much of the viewport bottom the app chrome covers": gnp-quiz's single-viewport
		   game screen subtracts it (var(--gnp-app-chrome-bottom, 0px)), so the nav never covers an answer. */
		--gnp-app-chrome-bottom: calc(var(--gnp-mobile-nav-h) + var(--gnp-mobile-nav-gap) + var(--gnp-mobile-fab-gap) + var(--gnp-mobile-fab-size) + env(safe-area-inset-bottom, 0px));
		/* The nav and the floating Share never cover the last article lines, comments or footer. */
		padding-bottom: calc(var(--gnp-app-chrome-bottom) + 1rem);
	}

	/* The old phone share bar is replaced by the nav's Share item. (The rail is already hidden below 1300px.) */
	body.gnp-mobile-article .gnp-share-bar-mobile {
		display: none;
	}

	/* ------------------------------------------------------------------
	   1. Header
	   ------------------------------------------------------------------ */

	body.gnp-mobile-app .gnp-header-actions #gnp-theme-toggle,
	body.gnp-mobile-app .gnp-header-actions .gnp-search-trigger-form,
	body.gnp-mobile-app .gnp-header-actions .gnp-account-control,
	body.gnp-mobile-app .gnp-header-actions .gnp-preferred-source {
		display: none;
	}

	/* Join Free keeps its implementation; only its phone size changes. 36px to the eye, 44px to a finger. */
	body.gnp-mobile-app .gnp-header-actions .gnp-join-free-trigger {
		position: relative;
		min-height: 2.25rem;
		padding: 0 1.1rem;
		font-size: 0.9375rem;
		font-weight: 700;
	}

	body.gnp-mobile-app .gnp-header-actions .gnp-join-free-trigger::after {
		content: "";
		position: absolute;
		inset: -0.25rem -0.125rem;
	}

	/* ------------------------------------------------------------------
	   2. Hero: title above the image, no overlay
	   ------------------------------------------------------------------ */

	body.gnp-mobile-article .gnp-article-hero-section {
		padding: 0.75rem var(--gnp-mobile-inset) 0.5rem;
	}

	body.gnp-mobile-article .gnp-article-hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"title title"
			"author ps"
			"media media"
			"facts facts"
			"chips chips";
		align-items: center;
		overflow: visible;
		border-radius: 0;
		background: transparent;
		aspect-ratio: auto;
		min-height: 0;
	}

	/* Non-semantic wrappers only: their children become grid items of the <article>. The <article> itself and
	   the <h1> keep their normal boxes. */
	body.gnp-mobile-article .gnp-article-hero .gnp-hero-body,
	body.gnp-mobile-article .gnp-article-hero .gnp-article-meta,
	body.gnp-mobile-article .gnp-article-hero .gnp-article-byline {
		display: contents;
	}

	body.gnp-mobile-article .gnp-article-hero .gnp-hero-body {
		position: static;
		min-height: 0;
		padding: 0;
	}

	body.gnp-mobile-article .gnp-hero-scrim {
		display: none;
	}

	body.gnp-mobile-article .gnp-article-hero .gnp-hero-title {
		--wp--preset--font-size--hero: 1.625rem;
		grid-area: title;
		max-width: none;
		margin: 0.25rem 0 0.75rem;
		padding: 0 var(--gnp-mobile-text-inset);
		color: var(--wp--preset--color--contrast);
		font-size: var(--wp--preset--font-size--hero);
		font-weight: 800;
		line-height: 1.12;
		letter-spacing: -0.02em;
		overflow-wrap: anywhere;
		text-wrap: balance;
	}

	/* Author row */
	body.gnp-mobile-article .gnp-article-hero .gnp-meta-item--author {
		grid-area: author;
		position: relative;
		min-width: 0;
		min-height: 2.75rem;
		margin: 0 0.75rem 0 0;
		padding: 0 var(--gnp-mobile-text-inset);
		gap: 0.625rem;
		color: var(--wp--preset--color--contrast);
	}

	body.gnp-mobile-article .gnp-article-hero .gnp-meta-item--author::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		height: 1.75rem;
		border-left: 1px solid var(--wp--preset--color--border);
		transform: translateY(-50%);
	}

	body.gnp-mobile-article .gnp-meta-avatar img {
		width: 2.375rem;
		height: 2.375rem;
		border: 0;
	}

	body.gnp-mobile-article .gnp-meta-item--author .wp-block-post-author-name {
		min-width: 0;
		font-size: 1.0625rem;
		font-weight: 500;
		line-height: 1.2;
	}

	body.gnp-mobile-article .gnp-meta-item--author .wp-block-post-author-name::before {
		content: none;
	}

	body.gnp-mobile-article .gnp-meta-item--author .wp-block-post-author-name a {
		display: block;
		overflow: hidden;
		color: inherit;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* The abbreviated label is what is seen; the full name stays in the link as its accessible name. */
	body.gnp-mobile-article .gnp-author-short {
		display: inline;
	}

	body.gnp-mobile-article .gnp-author-full {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* Compact Google Preferred Sources trigger (custom-trigger flow, see assets/js/preferred-source.js). */
	body.gnp-mobile-article .gnp-ps-byline {
		display: flex;
		grid-area: ps;
		justify-self: end;
		min-width: 0;
		margin: 0;
	}

	body.gnp-mobile-article .gnp-ps-trigger {
		position: relative;
		min-height: 2.5rem;
		padding: 0 0.875rem 0 0.75rem;
		gap: 0.5rem;
		font-size: 0.9375rem;
		font-weight: 500;
		background: var(--wp--preset--color--base);
	}

	body.gnp-mobile-article .gnp-ps-trigger::after {
		content: "";
		position: absolute;
		inset: -0.125rem;
	}

	body.gnp-mobile-article .gnp-ps-trigger:focus-visible {
		outline: 2px solid var(--wp--preset--color--accent);
		outline-offset: 2px;
	}

	/* Featured image: rounded, 16:9 like the existing artwork, existing crop focus, no overlay of any kind. */
	body.gnp-mobile-article .gnp-article-hero .gnp-hero-media {
		position: relative;
		inset: auto;
		grid-area: media;
		z-index: 0;
		margin-top: 0.25rem;
		overflow: hidden;
		border-radius: 1.125rem;
	}

	body.gnp-mobile-article .gnp-article-hero .gnp-media-frame--hero {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	/* Category badge: the existing display-category link (and its category colours), top-right over the image.
	   The Shortcode block wraps it in a <p>; that <p> is the grid item. */
	body.gnp-mobile-article .gnp-article-hero .gnp-hero-body > p {
		grid-area: media;
		z-index: 2;
		justify-self: end;
		align-self: start;
		margin: 0.875rem 0.875rem 0 0;
		line-height: 1;
	}

	body.gnp-mobile-article .gnp-article-hero .gnp-hero-badge {
		margin: 0;
		padding: 0.5rem 0.9rem;
		font-size: 0.8125rem;
		letter-spacing: 0.05em;
	}

	/* Date / categories / reading time. Max two categories are SHOWN; the post keeps every term and the schema
	   still lists them all - this only hides the rest visually, the same for every client. */
	/* One compact line: date (abbreviated, see below) | categories | reading time. Date and reading time never shrink;
	   the category item is the one flexible part, so an unusually long category name is clipped inside its own
	   item instead of wrapping the row or overflowing the page. */
	body.gnp-mobile-article .gnp-article-hero .gnp-article-facts {
		grid-area: facts;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		min-width: 0;
		margin: 0.875rem 0 0;
		padding: 0 var(--gnp-mobile-text-inset);
	}

	body.gnp-mobile-article .gnp-article-facts .gnp-meta-item {
		min-width: 0;
		gap: 0.25rem;
		padding: 0 0.375rem;
		border-left: 1px solid var(--wp--preset--color--border);
		color: var(--wp--preset--color--contrast);
		font-size: 0.8125rem;
		font-weight: 500;
		line-height: 1.2;
		white-space: nowrap;
	}

	body.gnp-mobile-article .gnp-article-facts .gnp-meta-item::before {
		width: 0.875rem;
		height: 0.875rem;
	}

	body.gnp-mobile-article .gnp-article-facts .gnp-meta-item--date,
	body.gnp-mobile-article .gnp-article-facts .gnp-meta-item--read {
		flex: 0 0 auto;
	}

	body.gnp-mobile-article .gnp-article-facts .gnp-meta-item--category {
		flex: 0 1 auto;
		overflow: hidden;
	}

	/* Compact date: the abbreviated aria-hidden label is what is seen; the full <time datetime="..."> stays in the
	   DOM untouched as the accessible name. */
	body.gnp-mobile-article .gnp-article-date {
		position: relative;
	}

	body.gnp-mobile-article .gnp-article-date time {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	body.gnp-mobile-article .gnp-article-date .gnp-date-short {
		display: inline;
	}

	body.gnp-mobile-article .gnp-article-facts .gnp-meta-item:first-child {
		padding-left: 0;
		border-left: 0;
	}

	body.gnp-mobile-article .gnp-article-facts .gnp-meta-item:last-child {
		padding-right: 0;
	}

	body.gnp-mobile-article .gnp-article-facts .gnp-meta-item p {
		margin: 0;
	}

	body.gnp-mobile-article .gnp-article-facts .gnp-meta-item::before {
		opacity: 0.75;
	}

	/* Reactions summary: not part of the approved phone row (the reactions section below the article has it). */
	body.gnp-mobile-article .gnp-article-facts .gnp-meta-item--reactions {
		display: none;
	}

	body.gnp-mobile-article .gnp-meta-item--category .wp-block-post-terms {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.625rem;
		min-width: 0;
		/* The clip edge is the padding box: the 2px of slack keeps the last glyph from being shaved by the sub-pixel
		   difference between a link's box and its text. */
		padding-right: 2px;
		overflow: hidden;
	}

	/* No text-overflow: ellipsis here on purpose: a link's box can be a fraction of a pixel narrower than its text
	   (verified in Chromium), which makes an ellipsis cut a perfectly fitting "Microsoft" to "Micros...". The
	   category item clips cleanly instead, and only an unusually long name ever reaches that edge. */
	body.gnp-mobile-article .gnp-meta-item--category .wp-block-post-terms a {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	body.gnp-mobile-article .gnp-meta-item--category .wp-block-post-terms__separator {
		display: none;
	}

	body.gnp-mobile-article .gnp-meta-item--category .wp-block-post-terms a:nth-of-type(n + 3) {
		display: none;
	}

	body.gnp-mobile-article .gnp-article-hero .gnp-hub-chips {
		grid-area: chips;
		margin-top: 0.75rem;
		padding: 0 var(--gnp-mobile-text-inset);
	}

	/* Very narrow phones (320-359px): give the author name more of the row and drop the dividers so the single
	   meta row spends its width on text (the category item clips first if it still cannot fit). */
	@media (max-width: 359.98px) {
		body.gnp-mobile-article .gnp-meta-avatar img {
			width: 2rem;
			height: 2rem;
		}

		body.gnp-mobile-article .gnp-article-hero .gnp-meta-item--author {
			gap: 0.5rem;
			margin-right: 0.5rem;
		}

		body.gnp-mobile-article .gnp-meta-item--author .wp-block-post-author-name {
			font-size: 1rem;
		}

		body.gnp-mobile-article .gnp-ps-trigger {
			padding: 0 0.625rem 0 0.5rem;
			gap: 0.375rem;
			font-size: 0.8125rem;
		}

		body.gnp-mobile-article .gnp-article-hero .gnp-article-facts {
			column-gap: 0.375rem;
		}

		body.gnp-mobile-article .gnp-article-facts .gnp-meta-item {
			font-size: 0.75rem;
		}

		body.gnp-mobile-article .gnp-article-facts .gnp-meta-item {
			padding: 0;
			border-left: 0;
		}
	}

	/* ------------------------------------------------------------------
	   3. Bottom navigation
	   ------------------------------------------------------------------ */

	body.gnp-mobile-app .gnp-mobile-nav {
		display: block;
		position: fixed;
		z-index: 45;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 0 max(var(--gnp-mobile-inset), env(safe-area-inset-right, 0px)) calc(var(--gnp-mobile-nav-gap) + env(safe-area-inset-bottom, 0px)) max(var(--gnp-mobile-inset), env(safe-area-inset-left, 0px));
		pointer-events: none;
	}

	body.gnp-mobile-app .gnp-mobile-nav__bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.125rem;
		box-sizing: border-box;
		min-height: var(--gnp-mobile-nav-h);
		padding: 0.375rem 0.5rem;
		border: 1px solid var(--gnp-mobile-nav-border);
		border-radius: 2rem;
		background: var(--gnp-mobile-nav-bg);
		color: var(--gnp-mobile-nav-fg);
		/* The token border + a soft shadow keep the floating bar separated from the page in both themes. */
		box-shadow: var(--gnp-mobile-nav-shadow);
		pointer-events: auto;
	}

	/* Dark: the same deeper shadow whether Dark was chosen (data-theme) or comes from the system preference. */
	:root[data-theme="dark"] body.gnp-mobile-app {
		--gnp-mobile-nav-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
	}

	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) body.gnp-mobile-app {
			--gnp-mobile-nav-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
		}
	}

	body.gnp-mobile-app .gnp-mobile-nav__item {
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.1875rem;
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		min-height: 2.75rem;
		margin: 0;
		padding: 0.25rem 0.125rem;
		border: 0;
		border-radius: 1.125rem;
		background: transparent;
		color: inherit;
		font: inherit;
		font-size: 0.75rem;
		font-weight: 500;
		line-height: 1.1;
		text-decoration: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	/* (:not(.gnp-theme-icon): the sun/moon pair keeps the theme's own show/hide rules.) */
	body.gnp-mobile-app .gnp-mobile-nav__item svg:not(.gnp-theme-icon) {
		display: block;
	}

	body.gnp-mobile-app .gnp-mobile-nav__item svg {
		flex: 0 0 auto;
		width: 1.5rem;
		height: 1.5rem;
	}

	body.gnp-mobile-app .gnp-mobile-nav__item:focus-visible {
		outline: 2px solid var(--gnp-mobile-nav-accent);
		outline-offset: -2px;
	}

	/* Active / open item (the current page's Home, Games on the Games hub and its games - aria-current "page" or "true",
	   an open Profile menu): the accent colours the ICON and a soft tint behind it; the label stays in the high-contrast
	   text colour, because the accent green alone is under 4.5:1 for 12px text on the light surface. Never a full-bar
	   colour. */
	body.gnp-mobile-app .gnp-mobile-nav__item[aria-current],
	body.gnp-mobile-app .gnp-mobile-account [data-gnp-account-trigger][aria-expanded="true"] {
		background: rgba(26, 155, 82, 0.12);
		background: color-mix(in srgb, var(--gnp-mobile-nav-accent) 14%, transparent);
		font-weight: 700;
	}

	body.gnp-mobile-app .gnp-mobile-nav__item[aria-current] svg,
	body.gnp-mobile-app .gnp-mobile-account [data-gnp-account-trigger][aria-expanded="true"] svg {
		color: var(--gnp-mobile-nav-accent);
	}

	/* Hover only where there is a real hover (a touch tap would leave it stuck). */
	@media (hover: hover) {
		body.gnp-mobile-app .gnp-mobile-nav__item:hover svg {
			color: var(--gnp-mobile-nav-accent);
		}
	}

	body.gnp-mobile-app .gnp-mobile-nav__label {
		display: block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.gnp-mobile-app .gnp-mobile-nav__form,
	body.gnp-mobile-app .gnp-mobile-account {
		display: flex;
		flex: 1 1 0;
		min-width: 0;
		margin: 0;
	}

	body.gnp-mobile-app .gnp-mobile-account {
		position: relative;
	}

	/* Dark Mode item: icon + label follow <html data-theme> / the system theme, same pairing as the header's. */
	body.gnp-mobile-app .gnp-mobile-nav .gnp-theme-toggle .gnp-mobile-nav__label--to-light {
		display: none;
	}

	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) body.gnp-mobile-app .gnp-mobile-nav .gnp-mobile-nav__label--to-dark {
			display: none;
		}

		:root:not([data-theme="light"]) body.gnp-mobile-app .gnp-mobile-nav .gnp-mobile-nav__label--to-light {
			display: block;
		}
	}

	:root[data-theme="dark"] body.gnp-mobile-app .gnp-mobile-nav .gnp-mobile-nav__label--to-dark {
		display: none;
	}

	:root[data-theme="dark"] body.gnp-mobile-app .gnp-mobile-nav .gnp-mobile-nav__label--to-light {
		display: block;
	}

	:root[data-theme="light"] body.gnp-mobile-app .gnp-mobile-nav .gnp-mobile-nav__label--to-dark {
		display: block;
	}

	:root[data-theme="light"] body.gnp-mobile-app .gnp-mobile-nav .gnp-mobile-nav__label--to-light {
		display: none;
	}

	/* ------------------------------------------------------------------
	   Floating Share action: a circle directly above the bar's last item

	   Technically outside the bar (its own fixed layer, never inside the bar's background), visually attached to it:
	   the wrapper repeats the nav's fixed full-width box and safe-area insets, and its shell repeats the bar's
	   centred max-width column (section 4), so the shell is exactly as wide as the bar. The button is then centred
	   over the bar's LAST item (Profile for members, Games for visitors) with the bar's own geometry: the last item's
	   centre sits (bar padding 0.5rem + 1px border) + half an item width from the bar's right edge, an item being
	   (bar width - 1rem padding - 2px border - the 0.125rem gaps) / item count (data-gnp-nav-count, printed by the
	   server). Layer 42: above the page; below the homepage preview sheet's backdrop (43) / sheet (44), the bar (45)
	   and the drawer (55/60). (The sticky header is 40 but never overlaps it.)
	   ------------------------------------------------------------------ */

	body.gnp-mobile-app .gnp-mobile-fab {
		--gnp-mobile-nav-count: 5;
		display: block;
		position: fixed;
		z-index: 42;
		right: 0;
		bottom: calc(var(--gnp-mobile-nav-h) + var(--gnp-mobile-nav-gap) + var(--gnp-mobile-fab-gap) + env(safe-area-inset-bottom, 0px));
		left: 0;
		padding: 0 max(var(--gnp-mobile-inset), env(safe-area-inset-right, 0px)) 0 max(var(--gnp-mobile-inset), env(safe-area-inset-left, 0px));
		pointer-events: none;
	}

	body.gnp-mobile-app .gnp-mobile-fab[data-gnp-nav-count="4"] {
		--gnp-mobile-nav-count: 4;
	}

	body.gnp-mobile-app .gnp-mobile-fab__shell {
		position: relative;
		box-sizing: border-box;
		height: var(--gnp-mobile-fab-size);
	}

	body.gnp-mobile-app .gnp-mobile-fab .gnp-mobile-share {
		position: absolute;
		right: calc(0.5rem + 1px + (100% - 1rem - 2px - (var(--gnp-mobile-nav-count) - 1) * 0.125rem) / (2 * var(--gnp-mobile-nav-count)));
		bottom: 0;
		width: var(--gnp-mobile-fab-size);
		height: var(--gnp-mobile-fab-size);
		margin: 0;
		transform: translateX(50%);
		pointer-events: auto;
	}

	body.gnp-mobile-app .gnp-mobile-fab__button {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 1px solid var(--gnp-mobile-nav-border);
		border-radius: 50%;
		background: var(--gnp-mobile-nav-bg);
		color: var(--gnp-mobile-nav-fg);
		box-shadow: var(--gnp-mobile-nav-shadow);
		font: inherit;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	body.gnp-mobile-app .gnp-mobile-fab__button svg {
		display: block;
		flex: 0 0 auto;
		width: 1.375rem;
		height: 1.375rem;
	}

	body.gnp-mobile-app .gnp-mobile-fab__button:focus-visible {
		outline: 2px solid var(--gnp-mobile-nav-accent);
		outline-offset: 2px;
	}

	/* Open: the same accent treatment as an active nav item (accent icon + soft accent tint over the surface). */
	body.gnp-mobile-app .gnp-mobile-fab__button[aria-expanded="true"] {
		background: var(--gnp-mobile-nav-bg);
		background: color-mix(in srgb, var(--gnp-mobile-nav-accent) 14%, var(--gnp-mobile-nav-bg));
	}

	body.gnp-mobile-app .gnp-mobile-fab__button[aria-expanded="true"] svg {
		color: var(--gnp-mobile-nav-accent);
	}

	@media (hover: hover) {
		body.gnp-mobile-app .gnp-mobile-fab__button:hover svg {
			color: var(--gnp-mobile-nav-accent);
		}
	}

	/* ------------------------------------------------------------------
	   Share: the stack that rises from the floating Share action
	   ------------------------------------------------------------------ */

	body.gnp-mobile-app .gnp-mobile-share__stack {
		position: absolute;
		z-index: 1;
		bottom: calc(100% + 0.875rem);
		left: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		box-sizing: border-box;
		padding: 0.5rem;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 2rem;
		background: var(--wp--preset--color--surface);
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
		transform: translateX(-50%);
		/* Short viewports: never taller than the room above the floating Share; scroll inside instead of clipping.
		   The global Follow Us bar above the header takes its own height off that room too. */
		max-height: calc(100vh - 14.5rem - var(--gnp-follow-bar-height, 0px));
		max-height: calc(100dvh - 14.5rem - var(--gnp-follow-bar-height, 0px));
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	body.gnp-mobile-app .gnp-mobile-share__stack[hidden] {
		display: none;
	}

	/* The pointer rising from the Share button: a rotated square outside the (scrolling) stack. */
	body.gnp-mobile-app .gnp-mobile-share.is-open::before {
		content: "";
		position: absolute;
		z-index: 2;
		bottom: calc(100% + 0.5rem);
		left: 50%;
		width: 0.75rem;
		height: 0.75rem;
		border-right: 1px solid var(--wp--preset--color--border);
		border-bottom: 1px solid var(--wp--preset--color--border);
		background: var(--wp--preset--color--surface);
		transform: translateX(-50%) rotate(45deg);
	}

	body.gnp-mobile-app .gnp-mobile-share__stack .gnp-share-btn {
		--gnp-share-size: 2.75rem;
		flex: 0 0 auto;
		width: var(--gnp-share-size);
		height: var(--gnp-share-size);
		border: 0;
		border-radius: 50%;
		color: #fff;
	}

	body.gnp-mobile-app .gnp-mobile-share__stack .gnp-share-btn svg {
		width: 1.375rem;
		height: 1.375rem;
	}

	body.gnp-mobile-app .gnp-mobile-share__stack .gnp-share-btn:hover,
	body.gnp-mobile-app .gnp-mobile-share__stack .gnp-share-btn:focus-visible {
		color: #fff;
		filter: brightness(1.08);
	}

	body.gnp-mobile-app .gnp-mobile-share__stack .gnp-share-btn:focus-visible {
		outline: 2px solid var(--wp--preset--color--accent);
		outline-offset: 2px;
	}

	body.gnp-mobile-app .gnp-mobile-share__stack .gnp-share-btn[data-network="facebook"] {
		background: #1877f2;
	}

	body.gnp-mobile-app .gnp-mobile-share__stack .gnp-share-btn[data-network="x"] {
		background: #000;
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
	}

	body.gnp-mobile-app .gnp-mobile-share__stack .gnp-share-btn[data-network="reddit"] {
		background: #ff4500;
	}

	body.gnp-mobile-app .gnp-mobile-share__stack .gnp-share-btn[data-network="whatsapp"] {
		background: #25d366;
	}

	body.gnp-mobile-app .gnp-mobile-share__stack .gnp-share-btn[data-network="native"] {
		background: var(--wp--preset--color--surface);
		box-shadow: inset 0 0 0 1px var(--wp--preset--color--border);
		color: var(--wp--preset--color--contrast);
	}

	body.gnp-mobile-app .gnp-mobile-share__stack .gnp-share-btn[data-network="native"]:hover,
	body.gnp-mobile-app .gnp-mobile-share__stack .gnp-share-btn[data-network="native"]:focus-visible {
		color: var(--wp--preset--color--contrast);
	}

	body.gnp-mobile-app .gnp-mobile-share__stack .gnp-share-btn[hidden] {
		display: none;
	}

	/* ------------------------------------------------------------------
	   Profile (members): the existing account menu, opened upward
	   ------------------------------------------------------------------ */

	body.gnp-mobile-app .gnp-mobile-account__menu {
		top: auto;
		right: 0;
		bottom: calc(100% + 0.875rem);
		left: auto;
		z-index: 1;
		min-width: 9rem;
	}

	body.gnp-mobile-app .gnp-mobile-account__menu[hidden] {
		display: none;
	}

	/* ------------------------------------------------------------------
	   4. Wider app layouts: tablet portrait and landscape (600px and up)

	   The same app UI as the phone, nothing re-designed: the extra width is left as clean space around centred,
	   capped columns. Plus the few desktop rules of style.css that start at 1000px / 1300px and would otherwise
	   reach a wide app viewport (header row, hero split + image fade, article grid + share rail, and the 1440px
	   desktop ad rail) are neutralised here, so a 1024-1599px viewport - tablet or laptop - renders exactly like a
	   768px one, only centred.
	   ------------------------------------------------------------------ */

	@media (min-width: 600px) {
		/* Bottom navigation: a centred bar, never wider than --gnp-app-nav-max. The fixed wrapper keeps its full-width
		   box (and its safe-area padding) but is pointer-transparent, so the empty space beside the bar never catches
		   a tap. */
		body.gnp-mobile-app .gnp-mobile-nav__bar {
			max-width: var(--gnp-app-nav-max);
			margin-inline: auto;
		}

		/* The floating Share follows the same centred column, so it stays above the bar's last item on a 1366px
		   tablet instead of drifting to the viewport edge. */
		body.gnp-mobile-app .gnp-mobile-fab__shell {
			max-width: var(--gnp-app-nav-max);
			margin-inline: auto;
		}

		/* Article: one centred reading column - headline, author row, meta row, featured image, body, poll, related
		   stories, reactions / comments and the end ad all share the 720px measure of the article text. (The block
		   layout's own margin-inline: auto !important centres every capped child.) */
		body.gnp-mobile-article .gnp-article-hero,
		body.gnp-mobile-article .gnp-related > *,
		body.gnp-mobile-article .gnp-community-section > *,
		body.gnp-mobile-article .gnp-article-end-ad > * {
			max-width: var(--gnp-app-read-max);
		}

		body.gnp-mobile-article .gnp-article-shell {
			display: block;
		}

		body.gnp-mobile-article .gnp-share-rail,
		body.gnp-mobile-article .gnp-desktop-rail {
			display: none;
		}

		/* The desktop hero fades the image's left edge into its black text panel (1000px+); the app hero has no panel. */
		body.gnp-mobile-article .gnp-article-hero .gnp-hero-media img {
			-webkit-mask-image: none;
			mask-image: none;
		}
	}

	/* The compact app header row (the 2.875rem row style.css already uses below 900px) for app layouts of 900px and
	   up, which style.css would otherwise give the taller desktop row. Re-stated on <body> (where the header reads
	   it), with the derived height token, so sticky offsets follow. */
	@media (min-width: 900px) {
		body.gnp-mobile-app {
			--gnp-header-pad-y: 1.1rem;
			--gnp-header-row-height: 2.875rem;
			--gnp-header-height: calc(var(--gnp-follow-bar-height) + var(--gnp-header-pad-y) * 2 + var(--gnp-header-row-height) + 1px);
		}

		body.gnp-mobile-app .gnp-header-row {
			min-height: var(--gnp-header-row-height);
		}

		body.gnp-mobile-app .gnp-header-row > .gnp-header-brand {
			gap: 0.5rem;
			min-width: 0;
		}

		body.gnp-mobile-app .gnp-brand-logo img {
			height: 1.5rem;
		}

		body.gnp-mobile-app .gnp-header-actions {
			gap: 0.5rem;
			min-width: 0;
		}

		body.gnp-mobile-app .gnp-header-actions > p {
			margin: 0;
		}
	}
}

@media (max-width: 1599.98px) {
	@media (prefers-reduced-motion: no-preference) {
		body.gnp-mobile-app .gnp-mobile-share__stack:not([hidden]) {
			animation: gnp-mobile-share-rise 160ms ease-out;
		}
	}
}

@keyframes gnp-mobile-share-rise {
	from {
		opacity: 0;
		translate: 0 0.5rem;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}