/* ============================================================
   MOBILE BOTTOM BAR

   Ported from ui_kits/emirae-mobile-bottom-bar (bottom-bar.css in the design
   project). Three changes against the kit, all forced by the move out of a
   showcase card and into a window:

     1. `position: absolute` becomes `position: fixed`. In the kit the bar is
        pinned to the bottom of a phone frame; here it is pinned to the bottom
        of the viewport.

     2. `@container (max-width: 340px)` becomes `@media (max-width: 340px)`.
        The kit needs a container query because the narrow thing inside that
        page is the frame, not the window. Here the window is the narrow thing.

     3. The open state moves off `.phone.sheet-open` and onto the sheet and the
        backdrop themselves. There is no frame to carry it.

   Everything else - the metrics, the raised action button, the icon stroke,
   the share tiles - is the kit's, unchanged.

   ---- Where it shows ----

   Below 1024px only. There is no desktop variant, by decision. The ceiling is
   chosen to sit under the 1080px breakpoint where the header swaps its burger
   for the full navigation: the bar's Menu button opens that burger's panel, so
   showing the bar where the burger is gone would offer a control the header
   has already put away.

   ---- Stacking ----

   The bar sits at 60, the same layer the two panels it replaces used. Every
   drawer, rail, scrim and modal in this theme lives at 88-120 and the mobile
   menu at 90, so all of them cover the bar rather than fighting it. The
   sheet and its backdrop stay in the bar's own band (61, 62) for the same
   reason.
   ============================================================ */

/* Off above the breakpoint, and stated first so it is the default rather than
   an override. Everything else in this file lives inside the media query, and
   without this line the markup - which the server prints on desktop too, since
   the breakpoint is a CSS decision - rendered as an unstyled 206px block of
   buttons at the very foot of the page. Measured on a 1265px window before the
   rule existed. */
.uaec-bb-root { display: none; }

@media (max-width: 1023px) {

	/* ---- 1. THE BAR ---------------------------------------------------- */

	.uaec-bb-root { display: block; }

	/* max-width: 100vw is not belt and braces, it is load-bearing.
	   `html` carries `overflow-x: clip` site-wide, and on a page whose content
	   already overflows - the cost calculator's summary card and the footer
	   watermark both do at 320px - the initial containing block widens with it.
	   A fixed element pinned left:0/right:0 then stretches to the overflowing
	   width, and the last button in the bar ends up past the right edge of a
	   viewport that, because of the clip, cannot be scrolled to reach it.
	   Measured: 362px of bar in a 320px window, Top sitting 33px off-screen.
	   The clamp pins the bar to the window instead of to the document.
	   100vw is exactly clientWidth here - the clip means there is no
	   scrollbar to account for. */
	.uaec-bb-root {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		max-width: 100vw;
		z-index: 60;
		pointer-events: none;
	}

	.uaec-bb {
		position: relative;
		z-index: 1;
		margin: 0 8px 8px;
		display: flex;
		align-items: flex-end;
		gap: 2px;
		padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius-xl);
		box-shadow: var(--shadow-lg);
		pointer-events: auto;
	}

	.uaec-bb__btn {
		flex: 1 1 0;
		min-width: 44px;
		min-height: 48px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 4px 2px;
		border: 0;
		background: none;
		border-radius: var(--radius-md);
		color: var(--text-secondary);
		font-family: var(--font-sans);
		text-decoration: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
	}

	.uaec-bb__btn svg {
		display: block;
		flex: none;
		stroke: currentColor;
		fill: none;
		stroke-width: 1.7;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.uaec-bb__label {
		font-size: 10px;
		line-height: 12px;
		font-weight: var(--fw-medium);
		white-space: nowrap;
		letter-spacing: -0.01em;
	}

	.uaec-bb__btn:hover { color: var(--accent); }

	.uaec-bb__btn:active,
	.uaec-bb__btn.is-pressed {
		background: var(--accent-soft);
		color: var(--accent-hover);
	}

	.uaec-bb__btn:focus-visible {
		outline: 2px solid var(--focus-ring);
		outline-offset: 2px;
	}

	/* The page's target action, slot 3. */
	.uaec-bb__btn--action {
		flex: 1.35 1 0;
		min-height: 58px;
		margin-top: -14px;
		padding: 8px 4px 6px;
		background: var(--accent);
		color: var(--accent-on);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-accent);
	}

	.uaec-bb__btn--action .uaec-bb__label {
		font-size: 11px;
		line-height: 13px;
		font-weight: var(--fw-bold);
	}

	.uaec-bb__btn--action:hover {
		background: var(--accent-hover);
		color: var(--accent-on);
	}

	.uaec-bb__btn--action:active,
	.uaec-bb__btn--action.is-pressed {
		background: var(--accent-pressed);
		color: var(--accent-on);
		box-shadow: var(--shadow-sm);
	}

	/* ---- 2. THE SHARE SHEET -------------------------------------------- */

	/* Same clamp as the bar, same reason. */
	.uaec-bb-backdrop {
		position: fixed;
		inset: 0;
		max-width: 100vw;
		z-index: 61;
		background: color-mix(in srgb, var(--navy-900) 46%, transparent);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--dur) var(--ease);
	}

	.uaec-bb-backdrop.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	.uaec-bb-sheet {
		position: fixed;
		left: 8px;
		right: 8px;
		bottom: 8px;
		max-width: calc(100vw - 16px);
		z-index: 62;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius-xl);
		box-shadow: var(--shadow-xl);
		padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
		transform: translateY(112%);
		transition: transform var(--dur-slow) var(--ease-out);
		touch-action: none;
		pointer-events: auto;
	}

	.uaec-bb-sheet.is-open { transform: translateY(0); }

	.uaec-bb-sheet__grip {
		display: block;
		width: 36px;
		height: 4px;
		border-radius: var(--radius-pill);
		background: var(--border-strong);
		margin: 6px auto var(--space-3);
	}

	.uaec-bb-sheet__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: var(--space-3);
	}

	.uaec-bb-sheet__title {
		font-size: var(--fs-sm);
		line-height: var(--lh-sm);
		font-weight: var(--fw-medium);
		color: var(--text-strong);
	}

	.uaec-bb-sheet__close {
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 0;
		border-radius: var(--radius-pill);
		background: var(--surface-alt);
		color: var(--text-secondary);
		cursor: pointer;
	}

	.uaec-bb-sheet__close svg {
		display: block;
		stroke: currentColor;
		fill: none;
		stroke-width: 1.7;
		stroke-linecap: round;
	}

	.uaec-bb-sheet__grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-3) var(--space-2);
	}

	.uaec-bb-share {
		min-height: 64px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		padding: 6px 2px;
		border: 0;
		background: none;
		border-radius: var(--radius-md);
		color: var(--text-secondary);
		font-family: var(--font-sans);
		text-decoration: none;
		cursor: pointer;
	}

	.uaec-bb-share__tile {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--radius-lg);
		background: var(--surface-alt);
		border: 1px solid var(--border);
		color: var(--ink);
	}

	.uaec-bb-share__tile svg { display: block; }

	.uaec-bb-share__label {
		font-size: 10px;
		line-height: 13px;
		font-weight: var(--fw-medium);
		text-align: center;
	}

	/* The native sheet exists only where the browser has the API.
	   assets/js/pages/article-share.js adds .is-native to every
	   [data-share-block] when navigator.share is present - the same class the
	   article share rows use. */
	.uaec-bb-share--native { display: none; }
	.uaec-bb-sheet.is-native .uaec-bb-share--native { display: flex; }

	/* Copy link: article-share.js swaps the label text and adds .is-copied,
	   exactly as it does for the rows. The kit calls this state .is-done.

	   Two classes on the left of every one of these, not one. `.uaec-ds :is(img,
	   svg)` forces display:block site-wide and `.uaec-bb-share__tile svg` above
	   repeats it; a bare `.uaec-bb-share__ico--check` is one class against one
	   class plus one type and loses. The first screenshot of the open sheet had
	   the chain link and the tick sitting side by side in the Copy link tile. */
	.uaec-bb-share .uaec-bb-share__ico--check { display: none; }
	.uaec-bb-share.is-copied .uaec-bb-share__ico--link { display: none; }
	.uaec-bb-share.is-copied .uaec-bb-share__ico--check { display: block; }

	.uaec-bb-share.is-copied .uaec-bb-share__tile {
		background: var(--success-50);
		border-color: var(--success-500);
		color: var(--success-700);
	}

	.uaec-bb-share.is-copied .uaec-bb-share__label { color: var(--success-700); }

	/* ---- 3. NARROW PHONES ---------------------------------------------- */
	/* The kit's @container (max-width: 340px), verbatim except for the query. */

	@media (max-width: 340px) {
		.uaec-bb {
			margin: 0 4px 4px;
			gap: 0;
			padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
		}
		.uaec-bb__label {
			font-size: 9px;
			letter-spacing: -0.02em;
		}
		.uaec-bb__btn { padding: 4px 1px; }
	}

	@media (prefers-reduced-motion: reduce) {
		.uaec-bb__btn,
		.uaec-bb-sheet,
		.uaec-bb-backdrop { transition: none; }
	}
}

/* ---- 4. THE STRIP THE PAGE HAS TO LEAVE FREE --------------------------
   On <body>, which is outside .uaec-ds - so plain pixels only. A token used
   here resolves to nothing at all and the footer quietly slides under the bar.
   Same trap the .mcta rule above it documents.
   ---------------------------------------------------------------------- */

@media (max-width: 1023px) {
	body.has-uaec-bottom-bar {
		padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	}
}

/* ---- 5. THE AI CONCIERGE LAUNCHER CLEARS THE BAR ----------------------
   The ai-emirae plugin pins .emirae-ai-widget--floating to bottom: 24px,
   and to 16px under 600px. Both land inside the strip section 4 reserves,
   so the launcher sits on top of the right-hand bar button.

   The bar is the theme's object, so the theme lifts the launcher instead
   of the plugin lowering itself: the plugin files stay byte-identical to
   the ones on the live stack, which is what lets us diff them.

   88px is the same figure section 4 uses for the strip, plus a 10px gap.
   Outside .uaec-ds - plain pixels only, a token resolves to nothing here.

   Scoped to the closed state on purpose: when the panel is open the plugin
   takes the widget full-screen with bottom: 0, and that must not be moved.
   ---------------------------------------------------------------------- */

@media (max-width: 1023px) {
	body.has-uaec-bottom-bar .emirae-ai-widget--floating:not(:has(.emirae-ai-panel:not([hidden]))) {
		bottom: calc(98px + env(safe-area-inset-bottom, 0px));
	}
}