/* Dedicated Service Status header action.
 *
 * Desktop contract:
 *   What's New  >  Service Status  >  Search
 *
 * This stylesheet owns the Service Status layout completely. It does not
 * depend on the generic Header Badge stylesheet or on a particular theme's
 * incidental margins. The fixed action widths mirror the previously-working
 * desktop composition while the breadcrumb/start side remains the flexible
 * portion of the IPS 5 secondary header.
 */

@media (min-width: 681px) {
	/* Phase 4 fixed-geometry contract.
	 *
	 * The pre-paint bootstrap creates this row as soon as native Search is parsed.
	 * From that point onward the row has the SAME three columns and the SAME outer
	 * width whether What's New has mounted yet or not. Only the contents of column
	 * one are allowed to change later; Search remains in column three throughout.
	 */
	.ppxServiceStatusActionHost[data-ppx-service-status-host='1'] {
		display: flex !important;
		flex-flow: row nowrap !important;
		align-items: center !important;
		justify-content: flex-end !important;
		width: auto !important;
		max-width: none !important;
		min-width: 26.625rem !important;
		min-height: 2.3rem !important;
		margin-inline-start: auto !important;
	}

	.ppxServiceStatusRow[data-ppx-service-status-geometry='fixed'],
	.ppxHeaderBadgeRow[data-ppx-service-status-geometry='fixed']:has(> .ppxServiceStatusMount) {
		--ppx-service-actions-whats-new-width: 7.5rem;
		--ppx-service-actions-status-width: 8.375rem;
		--ppx-service-actions-search-width: 9.5rem;
		--ppx-service-actions-gap: 0.625rem;
		--ppx-service-actions-height: 2.3rem;
		display: grid !important;
		grid-template-columns:
			var(--ppx-service-actions-whats-new-width)
			var(--ppx-service-actions-status-width)
			var(--ppx-service-actions-search-width) !important;
		grid-template-rows: var(--ppx-service-actions-height) !important;
		column-gap: var(--ppx-service-actions-gap) !important;
		row-gap: 0 !important;
		align-items: stretch !important;
		justify-content: end !important;
		box-sizing: border-box !important;
		flex: 0 0 26.625rem !important;
		width: 26.625rem !important;
		min-width: 26.625rem !important;
		max-width: 26.625rem !important;
		height: var(--ppx-service-actions-height) !important;
		min-height: var(--ppx-service-actions-height) !important;
		max-height: var(--ppx-service-actions-height) !important;
		margin: 0 !important;
		margin-inline-start: auto !important;
		padding: 0 !important;
		position: relative !important;
		transform: translateX(var(--ppx-service-status-inline-nudge, 0px)) !important;
		overflow: visible !important;
		order: 2;
	}

	/* Keep column one physically occupied even before Catch Up publishes its
	 * desktop mount. The pseudo-slot shares the same grid cell once What's New
	 * arrives, so adding the real control cannot alter track sizing or Search x/y. */
	.ppxServiceStatusRow[data-ppx-service-status-geometry='fixed']::before,
	.ppxHeaderBadgeRow[data-ppx-service-status-geometry='fixed']:has(> .ppxServiceStatusMount)::before {
		content: '';
		grid-column: 1 !important;
		grid-row: 1 !important;
		width: 100% !important;
		height: 100% !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.ppxServiceStatusRow[data-ppx-service-status-geometry='fixed'] > .catchupWhatsNewMount,
	.ppxHeaderBadgeRow[data-ppx-service-status-geometry='fixed']:has(> .ppxServiceStatusMount) > .catchupWhatsNewMount {
		grid-column: 1 !important;
		grid-row: 1 !important;
		display: flex !important;
		align-items: stretch !important;
		justify-content: stretch !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 100% !important;
		margin: 0 !important;
		visibility: visible !important;
		order: 1 !important;
	}

	/* Fail closed on desktop. A stale mount is never allowed to appear in page
	 * content while the persistent runtime is finding/rebuilding the real row. */
	.ppxServiceStatusMount {
		display: none !important;
	}

	.ppxServiceStatusRow[data-ppx-service-status-geometry='fixed'] > .ppxServiceStatusMount,
	.ppxHeaderBadgeRow[data-ppx-service-status-geometry='fixed']:has(> .ppxServiceStatusMount) > .ppxServiceStatusMount {
		grid-column: 2 !important;
		grid-row: 1 !important;
		display: flex !important;
		align-items: stretch !important;
		justify-content: stretch !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 100% !important;
		margin: 0 !important;
		order: 2 !important;
	}

	.ppxServiceStatusRow[data-ppx-service-status-geometry='fixed'] > :is(.ipsSearchPseudo, button[commandfor='ipsSearchDialog']),
	.ppxHeaderBadgeRow[data-ppx-service-status-geometry='fixed']:has(> .ppxServiceStatusMount) > :is(.ipsSearchPseudo, button[commandfor='ipsSearchDialog']) {
		grid-column: 3 !important;
		grid-row: 1 !important;
		box-sizing: border-box !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 100% !important;
		min-height: 0 !important;
		max-height: 100% !important;
		margin: 0 !important;
		align-self: stretch !important;
		order: 3 !important;
	}

	/* Phase 6 native Search lifecycle. Once the PPX row exists, an IPS/theme
	 * replacement Search trigger can be inserted beside the row for a fraction of
	 * a task before MutationObserver reconciliation. Hide only those transient
	 * direct siblings; the actual native node inside column three remains visible.
	 * This prevents a one-frame duplicate without cloning or restyling Search. */
	html:is([data-ppx-service-status-prepaint='mounted'], [data-ppx-service-status-prepaint='adopted'])
		[data-ips-header-content='search'] > :is(.ipsSearchPseudo, button[commandfor='ipsSearchDialog']),
	html:is([data-ppx-service-status-prepaint='mounted'], [data-ppx-service-status-prepaint='adopted'])
		.ppxServiceStatusActionHost[data-ppx-service-status-host='1'] > :is(.ipsSearchPseudo, button[commandfor='ipsSearchDialog']) {
		visibility: hidden !important;
	}

	html:is([data-ppx-service-status-prepaint='mounted'], [data-ppx-service-status-prepaint='adopted'])
		.ppxServiceStatusRow[data-ppx-service-status-geometry='fixed'] > :is(.ipsSearchPseudo, button[commandfor='ipsSearchDialog']),
	html:is([data-ppx-service-status-prepaint='mounted'], [data-ppx-service-status-prepaint='adopted'])
		.ppxHeaderBadgeRow[data-ppx-service-status-geometry='fixed']:has(> .ppxServiceStatusMount) > :is(.ipsSearchPseudo, button[commandfor='ipsSearchDialog']) {
		visibility: visible !important;
	}


	.ppxServiceStatusRow[data-ppx-service-status-geometry='fixed'] .catchupWhatsNewButton,
	.ppxHeaderBadgeRow[data-ppx-service-status-geometry='fixed']:has(> .ppxServiceStatusMount) .catchupWhatsNewButton,
	.ppxServiceStatusRow[data-ppx-service-status-geometry='fixed'] .ppxServiceStatus,
	.ppxHeaderBadgeRow[data-ppx-service-status-geometry='fixed']:has(> .ppxServiceStatusMount) .ppxServiceStatus {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;
		max-height: 100% !important;
		margin: 0 !important;
	}

	/* A late Catch Up runtime can create a transient mount elsewhere in the IPS
	 * header. Hide only that transient copy. The reconciler moves the chosen mount
	 * into column one in the same pre-paint microtask. */
	:is(#ipsLayout_header, #elHeader, .ipsHeader__secondary, .ipsHeaderExtra, .ipsHeader)
		.catchupWhatsNewMount {
		visibility: hidden;
	}

	.ppxServiceStatusRow[data-ppx-service-status-geometry='fixed'] > .catchupWhatsNewMount,
	.ppxHeaderBadgeRow[data-ppx-service-status-geometry='fixed']:has(> .ppxServiceStatusMount) > .catchupWhatsNewMount {
		visibility: visible !important;
	}

	/* Phase 7 theme matrix: never rewrite the geometry of .ipsHeaderExtra,
	 * .ipsHeader__secondary, breadcrumb/search content owners, or other theme-owned
	 * ancestors. PON New deliberately fixes HeaderExtra at 48px; Focus styles its
	 * secondary row as tabs; the lightweight themes use flex alignment. The
	 * dedicated app-owned host is the only surrounding surface we normalise. */
	.ppxServiceStatusActionHost[data-ppx-service-status-host='1'][data-ppx-service-status-profile='header-extra'],
	.ppxServiceStatusActionHost[data-ppx-service-status-host='1'][data-ppx-service-status-profile='secondary'],
	.ppxServiceStatusActionHost[data-ppx-service-status-host='1'][data-ppx-service-status-profile='primary'],
	.ppxServiceStatusActionHost[data-ppx-service-status-host='1'][data-ppx-service-status-profile='layout-header'] {
		align-self: center !important;
		box-sizing: border-box !important;
	}
}

.ppxServiceStatus {
	--ppx-service-status-accent: var(--ppx-service-status-light, var(--i-primary, #1b6cf0));
	--ppx-service-status-text: var(--i-primary-contrast, #ffffff);
	--ppx-service-status-muted: color-mix(in srgb, var(--ppx-service-status-text) 76%, transparent);
	--ppx-service-status-bg: linear-gradient(135deg, color-mix(in srgb, var(--ppx-service-status-accent) 84%, var(--i-background_3, #0f172a) 16%) 0%, color-mix(in srgb, var(--ppx-service-status-accent) 58%, var(--i-background_root, #08111e) 42%) 100%);
	--ppx-service-status-border: color-mix(in srgb, var(--ppx-service-status-accent) 78%, transparent);
	--ppx-service-status-shadow: color-mix(in srgb, var(--ppx-service-status-accent) 34%, transparent);
	--ppx-service-status-icon-bg: color-mix(in srgb, var(--ppx-service-status-text) 16%, transparent);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.46rem;
	width: 100%;
	max-width: 100%;
	min-height: 2.3rem;
	padding: 0.32rem 0.58rem 0.32rem 0.44rem;
	box-sizing: border-box;
	border: 1px solid var(--ppx-service-status-border);
	border-radius: 999px;
	background: var(--ppx-service-status-bg);
	box-shadow: 0 8px 18px var(--ppx-service-status-shadow), inset 0 1px 0 color-mix(in srgb, var(--ppx-service-status-text) 14%, transparent);
	color: var(--ppx-service-status-text);
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ppxServiceStatus::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--ppx-service-status-text) 16%, transparent) 0%, transparent 48%, color-mix(in srgb, var(--ppx-service-status-accent) 24%, transparent) 100%);
	pointer-events: none;
	z-index: -1;
}

.ppxServiceStatus:hover,
.ppxServiceStatus:active {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--ppx-service-status-text) 22%, var(--ppx-service-status-accent) 78%);
	box-shadow: 0 14px 26px color-mix(in srgb, var(--ppx-service-status-accent) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ppx-service-status-text) 20%, transparent);
	color: var(--ppx-service-status-text);
	text-decoration: none;
}

.ppxServiceStatus:focus-visible {
	outline: 2px solid var(--ppx-service-status-accent);
	outline-offset: 2px;
	text-decoration: none;
}

.ppxServiceStatus__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.42rem;
	height: 1.42rem;
	border: 1px solid color-mix(in srgb, var(--ppx-service-status-text) 18%, transparent);
	border-radius: 999px;
	background: var(--ppx-service-status-icon-bg);
	color: var(--ppx-service-status-text);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ppx-service-status-text) 14%, transparent);
	font-size: 0.7rem;
}

.ppxServiceStatus__body {
	min-width: 0;
	display: grid;
	gap: 0.02rem;
	line-height: 1;
}

.ppxServiceStatus__title,
.ppxServiceStatus__subtext {
	display: block;
	white-space: nowrap;
	text-wrap: nowrap;
	overflow-wrap: normal;
}

.ppxServiceStatus__title {
	font-size: 0.72rem;
	font-weight: 700;
}

.ppxServiceStatus__subtext {
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.015em;
	color: var(--ppx-service-status-muted);
}

html[data-ips-scheme='dark'] .ppxServiceStatus {
	--ppx-service-status-accent: var(--ppx-service-status-dark, color-mix(in srgb, var(--i-primary, #76c5ff) 88%, var(--i-background_1, #101827) 12%));
	--ppx-service-status-bg: linear-gradient(135deg, color-mix(in srgb, var(--ppx-service-status-accent) 44%, var(--i-background_2, #111827) 56%) 0%, color-mix(in srgb, var(--ppx-service-status-accent) 24%, var(--i-background_root, #020617) 76%) 100%);
	--ppx-service-status-border: color-mix(in srgb, var(--ppx-service-status-accent) 34%, var(--i-background_1, #101827) 66%);
	--ppx-service-status-shadow: color-mix(in srgb, var(--ppx-service-status-accent) 18%, transparent);
	--ppx-service-status-muted: color-mix(in srgb, var(--ppx-service-status-text) 64%, transparent);
	--ppx-service-status-icon-bg: color-mix(in srgb, var(--ppx-service-status-text) 10%, transparent);
}

@media (max-width: 900px) and (min-width: 681px) {
	.ppxServiceStatusActionHost[data-ppx-service-status-host='1'] {
		min-width: 25rem !important;
	}

	.ppxServiceStatusRow[data-ppx-service-status-geometry='fixed'],
	.ppxHeaderBadgeRow[data-ppx-service-status-geometry='fixed']:has(> .ppxServiceStatusMount) {
		--ppx-service-actions-status-width: 7.75rem;
		--ppx-service-actions-search-width: 8.75rem;
		--ppx-service-actions-gap: 0.5rem;
		grid-template-columns: 7.5rem 7.75rem 8.75rem !important;
		column-gap: var(--ppx-service-actions-gap) !important;
		flex-basis: 25rem !important;
		width: 25rem !important;
		min-width: 25rem !important;
		max-width: 25rem !important;
	}

	.ppxServiceStatus {
		gap: 0.36rem;
		padding-inline: 0.4rem;
	}

	.ppxServiceStatus__icon {
		width: 1.28rem;
		height: 1.28rem;
		font-size: 0.64rem;
	}

	.ppxServiceStatus__title {
		font-size: 0.68rem;
	}

	.ppxServiceStatus__subtext {
		font-size: 0.54rem;
	}
}

@media (max-width: 680px) {
	.ppxServiceStatusRow > .catchupWhatsNewMount {
		display: none !important;
	}
	/* Desktop header action is never allowed to leak into the mobile drawer.
	 * Mobile Chrome owns the dedicated mobile Service Status control. */
	.ppxServiceStatusMount {
		display: none !important;
	}

	.ppxServiceStatusRow {
		width: 100%;
		max-width: 100%;
		gap: 0;
	}

	.ppxServiceStatusRow > .ipsSearchPseudo,
	.ppxServiceStatusRow > button[commandfor='ipsSearchDialog'] {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		max-width: none;
	}
}