/**
 * PC builder — mobile shell (phases 2–3 of docs/todo/builder-mobile.md).
 *
 * Everything in this file is scoped to <=899px except the three rules that put
 * the desktop layout back exactly as it was (`display: contents` on the sheet
 * wrappers). Nothing here changes the build state, the storage keys, the API
 * payloads or the AI gate.
 *
 * The measured problem it answers (390px, before this file):
 *   - the picker list (z-index 30) opened UNDER `.nxl-bar` (56) and the
 *     accessibility bubble (62), so rows were half-covered;
 *   - the only way to send the quote was the summary in document flow, ~2 000px
 *     below the first picker;
 *   - `.nxl-bar` + `.sticky-legal-bar` took 152px of an 844px screen with
 *     nothing of the builder in them.
 */

:root {
	/*
	 * Heights this file depends on, declared once — and on `:root`, NOT on
	 * `.builder`: `body` needs `--builder-bar-h` for its bottom padding and does
	 * not inherit from `.builder`. Declared there, the `calc()` below was invalid
	 * at computed-value time and `body` silently fell back to 0, which is exactly
	 * the kind of "worked until you measure it" bug this file exists to avoid.
	 */
	--builder-bar-h: 3.5rem;
	/*
	 * The site's own stacking order, from whatsapp.css / accessibility.css /
	 * chatbot.css: legal bar 45, WhatsApp 55, consent + cart bar 60, a11y 62,
	 * **chat launcher 900**. The builder's modal surfaces therefore start at 940:
	 * measured, the chat launcher (900) painted straight over the open quote
	 * sheet and over the picker list, which is the one thing a modal may never
	 * allow. Builder modals > site widgets, consciously and in this order:
	 * sheet 940 < picker 960 < thinking 980 < warning 990.
	 */
	--builder-sheet-z: 940;
}

/* ---------- desktop: the wrappers must not exist ---------- */
/*
 * The summary sheet is always mounted (its lead form owns a Turnstile widget
 * and typed values, so it must never be re-created). On a desktop the sheet and
 * its panel are therefore `display: contents`: `.builder__summary` goes back to
 * being the second grid column and keeps its `position: sticky`, byte for byte
 * the layout it had before this file existed. The bar and the progress strip
 * are phone-only and are hidden outright.
 */
@media (min-width: 900px) {
	.builder-sheet,
	.builder-sheet__panel {
		display: contents;
	}

	.builder-sheet__close,
	.builder-sheet__backdrop,
	.builder-bar,
	.builder-progress {
		display: none;
	}
}

/* ---------- phones ---------- */
@media (max-width: 899px) {
	/*
	 * The site's quick-action bar (ניווט / חיוג / וואטסאפ) steps aside on the
	 * builder page only, and only on phones: its 68px are worth more to a build
	 * in progress, and both the phone and WhatsApp are one tap away in the
	 * builder's own sheet. `body` loses the bar's contribution to its bottom
	 * padding in the same breath, otherwise the page keeps a 68px hole.
	 */
	body:has(#xmods-builder-root) .nxl-bar {
		display: none;
	}

	html body:has(#xmods-builder-root) {
		padding-block-end: calc(var(--legal-bar-h) + var(--builder-bar-h));
	}

	/* ---------- progress strip ---------- */
	.builder-progress {
		position: sticky;
		inset-block-start: var(--header-h);
		z-index: 39;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 0.25rem 0.75rem;
		margin-block: 0 0.75rem;
		padding: 0.6rem 0.9rem 0.7rem;
		background: var(--bg-elev);
		border: 1px solid var(--border);
		border-radius: var(--radius-sm);
	}

	.builder-progress__label {
		font-size: 0.85rem;
		font-weight: 700;
		color: var(--text);
	}

	.builder-progress__count {
		font-size: 0.8rem;
		color: var(--text-dim);
		white-space: nowrap;
	}

	.builder-progress__bar {
		grid-column: 1 / -1;
		block-size: 6px;
		border-radius: 999px;
		background: var(--border);
		overflow: hidden;
	}

	.builder-progress__fill {
		display: block;
		block-size: 100%;
		background: var(--ok);
		transition: width var(--ease) 0.3s;
	}

	/* ---------- action bar ---------- */
	/*
	 * Docked ABOVE the legal bar, which is the lowest surface on the site. It is
	 * `fixed` rather than `sticky` because the two site bars are fixed: a sticky
	 * element would scroll over them instead of stopping above them.
	 */
	.builder-bar {
		position: fixed;
		inset-block-end: var(--legal-bar-h);
		inset-inline: 0;
		z-index: 45;
		display: flex;
		align-items: center;
		gap: 0.75rem;
		block-size: var(--builder-bar-h);
		padding-inline: 0.9rem;
		background: var(--bg-elev);
		border-block-start: 1px solid var(--border);
		box-shadow: 0 -8px 24px rgb(0 0 0 / 0.18);
	}

	.builder-bar__total {
		display: grid;
		line-height: 1.1;
	}

	.builder-bar__total-label {
		font-size: 0.7rem;
		color: var(--text-dim);
	}

	.builder-bar__total-value {
		font-size: 1rem;
		font-weight: 800;
		color: var(--accent-text);
		white-space: nowrap;
	}

	.builder-bar__cta {
		margin-inline-start: auto;
		min-block-size: 44px;
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		font-weight: 700;
	}

	.builder-bar__badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-inline-size: 1.35rem;
		block-size: 1.35rem;
		padding-inline: 0.3rem;
		border-radius: 999px;
		background: rgb(255 255 255 / 0.22);
		font-size: 0.78rem;
		font-weight: 800;
	}

	/* ---------- summary sheet ---------- */
	/*
	 * Always mounted, translated out of the viewport when closed so the lead
	 * form inside keeps its size (a Turnstile widget in a zero-size container
	 * is a widget that never renders). `main.js` adds `inert` while it is shut,
	 * which is what keeps the hidden form out of the tab order.
	 */
	.builder-sheet {
		position: fixed;
		inset: 0;
		z-index: var(--builder-sheet-z);
		pointer-events: none;
	}

	.builder-sheet__backdrop {
		position: absolute;
		inset: 0;
		background: rgb(0 0 0 / 0.45);
		opacity: 0;
		transition: opacity var(--ease) 0.2s;
	}

	.builder-sheet__panel {
		position: absolute;
		inset-block-end: 0;
		inset-inline: 0;
		max-block-size: 92vh;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0.5rem 0 1rem;
		background: var(--bg);
		border-start-start-radius: 1rem;
		border-start-end-radius: 1rem;
		transform: translateY(100%);
		transition: transform var(--ease) 0.24s;
	}

	.builder-sheet.is-open {
		pointer-events: auto;
	}

	.builder-sheet.is-open .builder-sheet__backdrop {
		opacity: 1;
	}

	.builder-sheet.is-open .builder-sheet__panel {
		transform: translateY(0);
	}

	/* Grab handle + close, in the sheet's own space above the summary. */
	.builder-sheet__panel::before {
		content: "";
		display: block;
		inline-size: 2.75rem;
		block-size: 0.3rem;
		margin: 0.25rem auto 0.35rem;
		border-radius: 999px;
		background: var(--border);
	}

	.builder-sheet__close {
		position: absolute;
		inset-block-start: 0.35rem;
		inset-inline-end: 0.6rem;
		inline-size: 44px;
		block-size: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		color: var(--text);
		font-size: 1.6rem;
		line-height: 1;
		cursor: pointer;
	}

	/* The summary keeps its own sticky behaviour for desktop only. */
	.builder-sheet .builder__summary {
		position: static;
		border: 0;
		border-radius: 0;
		background: transparent;
		padding: 0.25rem 1rem 0;
	}

	/* While the sheet is open the page behind it does not scroll. */
	body.builder-sheet-open {
		overflow: hidden;
	}

	/* Same for the full-screen studio: the page behind must not scroll. */
	body.builder-studio-fullscreen {
		overflow: hidden;
	}

	/* ---------- the picker becomes a sheet (phase 3) ---------- */
	/*
	 * Same DOM, same contract `{options, value, placeholder, onChange}`. Above
	 * every fixed surface on the site (`.nxl-bar` 56, `.nxa11y` 62) and above
	 * the builder's own bar (45). The thinking overlay and the warning popup are
	 * raised in the same breath, so their order still reads: sheet < thinking <
	 * warning.
	 */
	.builder-combo.is-open {
		position: fixed;
		inset: 0;
		z-index: 960;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		max-inline-size: none;
		max-block-size: none;
		margin: 0;
		padding: 0.75rem 0.9rem 0;
		background: var(--bg);
	}

	.builder-combo.is-open .builder-combo__input {
		flex: 0 0 auto;
		min-block-size: 48px;
		font-size: 16px; /* below 16px iOS zooms the page on focus */
	}

	.builder-combo.is-open .builder-combo__toggle {
		inset-block-start: 0.75rem;
		inset-inline-end: 0.9rem;
		inline-size: 44px;
		min-block-size: 44px;
		font-size: 1.3rem;
	}

	.builder-combo.is-open .builder-combo__list {
		position: static;
		flex: 1 1 auto;
		max-block-size: none;
		margin-block-end: 0.9rem;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.builder-combo__option {
		min-block-size: 48px;
		padding-block: 0.7rem;
		font-size: 1rem;
	}

	.builder-thinking {
		z-index: 980;
	}

	.builder-warn__backdrop {
		z-index: 990;
	}

	/* ---------- 3D studio (phase 6) ---------- */
	/*
	 * The stage keeps the scene's own ResizeObserver in charge; only its height
	 * changes. 560px of canvas under a 72px header leaves nothing on an 844px
	 * screen, so the phone gets a stage that fits and still scrolls.
	 */
	.builder-studio__stage {
		min-block-size: clamp(260px, 44vh, 420px);
	}

	/*
	 * Full-screen 3D (0.4.32, Valery): "כל הדיסקליימרים מהסוג הזה מסתירים את
	 * ה 3D … צריך פול סקרין … ולמעלה יש איקס לצאת". The studio itself becomes the
	 * viewport; the schematic notice is taken out of the flow (it returns the
	 * moment the visitor leaves full-screen), the slot chips dock to the bottom
	 * as one scrolling row, and the only chrome that stays is the HUD the visitor
	 * actually operates.
	 */
	.builder-studio.is-full {
		position: fixed;
		inset: 0;
		z-index: 930; /* above the site's chat (900), below the quote sheet (940) */
		display: block;
		background: var(--bg-elev);
	}

	.builder-studio.is-full .builder-studio__back,
	.builder-studio.is-full .builder-studio__enter,
	.builder-studio.is-full .builder-studio__hud-col,
	.builder-studio.is-full .builder-note {
		display: none;
	}

	.builder-studio.is-full .builder-studio__stage {
		position: absolute;
		inset: 0;
		min-block-size: 0;
		border: 0;
		border-radius: 0;
	}

	/*
	 * Phone guide (0.4.37): "חלק 3 מתוך 9 · מעבד · טרם נבחר  [בחירה] [המשך]"
	 * docked where the chips used to scroll. One slot at a time, so nothing has
	 * to be discovered by dragging a nine-item strip on a 390px screen.
	 */
	.builder-studio__guide {
		position: absolute;
		inset-block-end: 0;
		inset-inline: 0;
		z-index: 5;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 0.6rem calc(0.5rem + env(safe-area-inset-bottom));
		background: linear-gradient(
			to top,
			var(--bg-elev),
			color-mix(in srgb, var(--bg-elev) 78%, transparent)
		);
		border-block-start: 1px solid var(--border);
	}

	.builder-studio__guide-text {
		display: grid;
		gap: 0.05rem;
		flex: 1 1 auto;
		min-inline-size: 0;
	}

	.builder-studio__guide-step {
		font-size: 0.7rem;
		color: var(--text-dim);
	}

	.builder-studio__guide-name {
		font-size: 0.95rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.builder-studio__guide-picked {
		font-size: 0.75rem;
		color: var(--ok-text);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/*
	 * The 3D option panel becomes a sheet on a phone (0.4.37).
	 *
	 * It was an absolute box pinned to the stage's inline edge at `top: 3.6rem`,
	 * 320px wide with `max-height: calc(100% - 5.5rem)` — so the guide bar and the
	 * stage edges cut it, and the product list (measured: 8 rows of a 60-row
	 * catalogue) ran under the bar. Full width, above the guide by its own height,
	 * and it scrolls internally.
	 */
	.builder-studio .builder__panel {
		position: fixed;
		inset-block-start: auto;
		inset-block-end: calc(80px + env(safe-area-inset-bottom));
		inset-inline: 0;
		z-index: 6;
		width: 100%;
		max-block-size: min(70vh, 34rem);
		border-radius: var(--radius) var(--radius) 0 0;
		background: var(--bg);
		box-shadow: 0 -12px 32px rgb(0 0 0 / 0.35);
	}

	.builder-studio__guide .btn {
		min-block-size: 44px;
		flex: 0 0 auto;
	}

	/* The glass / exploded controls move up so the chips never sit on them, and
	 * are pinned to both edges so the two of them cannot run off the screen. */
	.builder-studio.is-full .builder-studio__hud--bot {
		inset-block-end: 5.25rem;
		inset-inline: 0.5rem;
		justify-content: flex-end;
		flex-wrap: wrap;
	}

	.builder-studio.is-full .builder-studio__chips {
		position: absolute;
		inset-block-end: 0;
		inset-inline: 0;
		z-index: 4;
		display: flex;
		flex-wrap: nowrap;
		gap: 0.4rem;
		margin: 0;
		padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
		background: linear-gradient(
			to top,
			var(--bg-elev),
			color-mix(in srgb, var(--bg-elev) 70%, transparent)
		);
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	/*
	 * One row, one line each: the chips are 9 items and a wrapping grid ate 55%
	 * of an 844px screen (measured), which is the same complaint as the notices —
	 * everything that is not the model had more room than the model.
	 */
	.builder-studio.is-full .builder-studio__chips > * {
		flex: 0 0 auto;
		min-inline-size: 8.5rem;
	}

	.builder-studio.is-full .builder-studio__chips::-webkit-scrollbar {
		display: none;
	}

	/*
	 * The status chip and the power meter are also the top HUD column, and in the
	 * takeover they were covering the top fifth of the model - the same complaint
	 * as the notices. They come back the moment the visitor leaves full-screen;
	 * the cameras, which are the controls he actually operates, stay.
	 */
	.builder-studio.is-full .builder-studio__hud--top {
		inset-block-start: 0.5rem;
		inset-inline-start: 3.75rem;
		inset-inline-end: 0.5rem;
		justify-content: flex-end;
		gap: 0.35rem;
	}

	/* The one way out, where a thumb expects it. */
	.builder-studio__exit {
		position: absolute;
		inset-block-start: 0.5rem;
		inset-inline-start: 0.5rem;
		z-index: 6;
		inline-size: 44px;
		block-size: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: color-mix(in srgb, var(--surface) 88%, transparent);
		backdrop-filter: blur(10px);
		border: 1px solid var(--border);
		border-radius: 999px;
		color: var(--text);
		font-size: 1.5rem;
		line-height: 1;
		cursor: pointer;
	}

	/* One camera strip that scrolls, instead of six tabs wrapped into the HUD. */
	.builder-studio__cams {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.builder-studio__cams::-webkit-scrollbar {
		display: none;
	}

	.builder-studio__cam {
		min-block-size: 40px;
		white-space: nowrap;
	}

	/* ---------- questionnaire + manual list tap sizes (phases 4–5) ---------- */
	.builder-q__brand-card {
		min-block-size: 64px;
		padding: 1rem;
	}

	.builder-q__title {
		font-size: 1.15rem;
	}

	/* A revealed picker inside a manual card is a sheet too, so the card only
	 * needs to stop clipping it. */
	.builder-man__add-wrap {
		overflow: visible;
	}

	.builder-chosen__remove,
	.builder-qty__btn {
		min-inline-size: 44px;
		min-block-size: 44px;
	}
}