/* One Piece View — the "add to home screen" banner (pwa.js), and nothing else.
 *
 * Its own file, deliberately, because this is the ONE plugin stylesheet that
 * loads on every logged-out page of the MAIN site (opv_enqueue_pwa() in
 * includes/assets.php). It used to live in ui.css, which meant pulling the whole
 * ~50KB VOD stylesheet — grid, cards, sidebar, arc posters — onto every blog
 * post and homepage view to style one fixed bar, and broke ui.css's own promise
 * never to load site-wide. Everything added here is paid for by every visitor
 * to the main site; keep it to the banner.
 *
 * Only the two tokens the banner paints with, NOT the full block from ui.css:
 * on a main-site page ui.css is absent, so these must stand alone. The values
 * are identical to ui.css / player.css, so on a VOD page where both load the
 * cascade order between them does not matter. Keep them in sync. */
:root {
	--opv-brand: #002282;
	--opv-on-brand: #fff;
}

/* Built in JS and appended to <body>, so it is never in the full-page cache and
 * never flashes for the installed or already-dismissed majority.
 *
 * Pinned to the BOTTOM, not the top: the Jannah theme has a fixed mobile header
 * and this must not fight it, and the bottom of a phone screen is the reachable
 * end. Direction-agnostic (inset-inline, logical padding) so it mirrors under
 * dir="rtl" with no second rule. */
.opv-install {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	/* 110, NOT the 9999 this shipped with. Jannah's off-canvas mobile menu
	 * (.side-aside) is 111, and the banner sits on the same phone screen: at 9999
	 * it painted OVER the open menu and covered its bottom links, so a viewer who
	 * opened the menu to navigate had to dismiss an install offer first. 110 still
	 * clears all of the theme's page chrome — #tie-wrapper is a stacking context
	 * at 108, so the sticky header's own 999 never escapes it — while letting the
	 * menu the viewer deliberately opened sit on top. */
	z-index: 110;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	box-sizing: border-box;
	padding: 0.85rem 1rem;
	/* Respect the iPhone home-indicator strip: without this the "Not now" button
	 * sits under the gesture bar and is genuinely hard to hit. The fallback keeps
	 * it a plain padding value on every other browser. */
	padding-block-end: calc( 0.85rem + env( safe-area-inset-bottom, 0px ) );
	background: var(--opv-brand);
	color: var(--opv-on-brand);
	box-shadow: 0 -2px 12px rgba( 0, 0, 40, 0.35 );
}

/* WCAG 2.4.11 Focus Not Obscured. A fixed bottom bar sits over the page, so
 * tabbing down a long episode page moved focus onto links that were scrolled
 * into view UNDER the banner — the focused control was on screen and invisible.
 * scroll-padding tells the browser's focus/anchor scrolling that the bottom
 * strip is not usable viewport, so it scrolls the target clear of the bar.
 * Gated on :has() so it only exists while the banner does; a browser without
 * :has() drops the rule and is no worse off than before.
 *
 * ponytail: a fixed estimate of the banner's WRAPPED phone height (two text
 * lines + a 44px button row + padding) plus the home-indicator inset, not its
 * measured height. Over-reserving only scrolls a little further than needed;
 * if the banner copy grows past two lines, raise it or have pwa.js set a
 * --opv-install-h custom property from offsetHeight. */
html:has(.opv-install) {
	scroll-padding-block-end: calc( 8rem + env( safe-area-inset-bottom, 0px ) );
}

.opv-install__text {
	flex: 1 1 14rem;
	min-inline-size: 0; /* flex items default to min-width:auto — see .opv-continue__text in ui.css. */
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.35;
}

.opv-install__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.5rem;
}

/* Both controls are sized at the 44px touch minimum from the start rather than
 * in a ≤600px block: this banner is a phone feature, so the phone case is the
 * default case, not the exception. */
.opv-install__go,
.opv-install__close {
	min-block-size: 44px;
	padding: 0.4rem 1rem;
	border-radius: 6px;
	font: inherit;
	cursor: pointer;
}

.opv-install__go {
	color: var(--opv-brand) !important;
	background: var(--opv-on-brand) !important;
	border: 1px solid var(--opv-on-brand) !important;
}

/* Outline style. The border is full-strength white rather than a translucent
 * tint so it still reads as a control against the brand navy — a 0.25-alpha
 * border here measured well under the 3:1 non-text floor. */
.opv-install__close {
	color: var(--opv-on-brand) !important;
	background: transparent !important;
	border: 1px solid var(--opv-on-brand) !important;
}

.opv-install__go:focus-visible,
.opv-install__close:focus-visible {
	outline: 2px solid var(--opv-on-brand);
	outline-offset: 2px;
}

/* Windows High Contrast / forced-colors: the banner is a brand-navy plate, and
 * in this mode its background is replaced by the user's palette, so give it an
 * edge or it merges into the page it is overlaying. Moved here from ui.css's
 * forced-colors block along with the rest of the banner's rules. */
@media ( forced-colors: active ) {
	.opv-install {
		border-block-start: 1px solid CanvasText;
	}
}