/*!
 * printix-phone 1.0.0 — the one phone frame for every Printix product (UI-UX D31, 12.10.2026).
 * Source: printix3dc/UI-UX lib/printix-phone. Do not edit a copy inside a product: change it here and run tools/sync-phone.ps1.
 *
 * Baseline = P-Member 0.10.13's card editor preview (Tomer 12.10.2026):
 *   iPhone  : 393 x 852 pt screen (19.5:9), Dynamic Island 126 x 37 pt, side buttons, status bar 54 pt.
 *   Android : 412 x 915 dp screen (20:9), punch hole 24 dp, status bar 46 dp.
 * Mock OS chrome only: no images, no Apple / Google artwork, our own line SVG. Every size inside the screen is in
 * --pxphone-pt (1/393 or 1/412 of the screen width, container units), and the frame keeps its ratio at every width.
 *
 * Markup (PrintixPhone.html / .wrap build it; write it by hand only if you must):
 *   .pxphone [--android] [--dark] [--native | --vp] [--overlay] [--fit-h]
 *     .pxphone-dev                        the body: bezel, corners, side buttons
 *       .pxphone-k.k1 … .k4               side buttons
 *       .pxphone-scr                      the screen (aspect-ratio, corners, container for --pxphone-pt)
 *         .pxphone-sb                     status bar: .tm time, .isl island | .cam punch hole, .ic icons
 *         .pxphone-app                    what the phone shows (scrolls, no scrollbar)
 *           .pxphone-vp                   --vp only: the content at a real phone width (393 / 412 px), scaled by the JS
 *         .pxphone-home                   home indicator
 *
 * Sizing (set on .pxphone in the product's CSS):
 *   --pxphone-w   frame width, default 300px (never wider than its container)
 *   --pxphone-h   with .pxphone--fit-h: the frame height instead (e.g. min(760px, calc(100vh - 160px)))
 * Colours of the screen (PrintixPhone.tint sets them): --pxphone-bg (screen), --pxphone-ink (status bar, home bar).
 */
.pxphone {
	--pxphone-ratio: .47881; /* frame width / height, iPhone (screen 393/852 + bezel) */
	--pxphone-frame: #1C1C1E;
	--pxphone-key: #8E8E93;
	--pxphone-bg: #FFFFFF;
	--pxphone-ink: #000000;
	container-type: inline-size;
	position: relative;
	box-sizing: border-box;
	display: block;
	width: min(100%, var(--pxphone-w, 300px));
	margin: 0 auto;
	/* no direction here: the content keeps the page's (RTL); only the status bar and the address pill are LTR */
}
.pxphone *, .pxphone *::before, .pxphone *::after { box-sizing: border-box; }
.pxphone--android { --pxphone-ratio: .46352; --pxphone-frame: #202124; --pxphone-key: #5F6368; }
.pxphone--dark { --pxphone-bg: #000000; --pxphone-ink: #FFFFFF; }
.pxphone--android.pxphone--dark { --pxphone-bg: #131314; --pxphone-ink: #E3E3E3; }
.pxphone--fit-h { width: min(100%, calc(var(--pxphone-h, 760px) * var(--pxphone-ratio))); }

/* the body: 3.4% bezel (Android 2.6%) of the frame width, corners as a % of the body so they scale */
.pxphone-dev {
	position: relative;
	width: 100%;
	padding: 3.4cqw;
	border-radius: 16.4% / 7.9%;
	background: var(--pxphone-frame);
	box-shadow: inset 0 0 0 1.5px #55555A, inset 0 0 0 5px #0E0E10, 0 0 0 1px #A1A1A6, 0 12px 32px -8px rgba(25, 21, 18, .22), 0 2px 6px rgba(25, 21, 18, .06);
}
.pxphone--android .pxphone-dev {
	padding: 2.6cqw;
	border-radius: 11.1% / 5.16%;
	box-shadow: inset 0 0 0 1.5px #3C4043, inset 0 0 0 4px #0E0E10, 0 0 0 1px #5F6368, 0 12px 32px -8px rgba(25, 21, 18, .22), 0 2px 6px rgba(25, 21, 18, .06);
}

/* side buttons: iPhone = action button + volume up / down on the left, side button on the right; Android = volume + power on the right */
.pxphone-k { position: absolute; width: 3px; border-radius: 2px; background: var(--pxphone-key); }
.pxphone .pxphone-k.k1 { left: -3px; top: 17%; height: 3.6%; }
.pxphone .pxphone-k.k2 { left: -3px; top: 23.5%; height: 7%; }
.pxphone .pxphone-k.k3 { left: -3px; top: 32%; height: 7%; }
.pxphone .pxphone-k.k4 { right: -3px; top: 26%; height: 10.5%; }
.pxphone--android .pxphone-k.k1 { left: auto; right: -3px; top: 20%; height: 6.5%; }
.pxphone--android .pxphone-k.k2 { left: auto; right: -3px; top: 30%; height: 12.5%; }
.pxphone--android .pxphone-k.k3, .pxphone--android .pxphone-k.k4 { display: none; }

/* the screen */
.pxphone-scr {
	--pxphone-pt: calc(100cqw / 393);
	container-type: inline-size;
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	width: 100%;
	aspect-ratio: 393 / 852;
	border-radius: 14% / 6.46%;
	overflow: hidden;
	background: var(--pxphone-bg);
}
.pxphone--android .pxphone-scr { --pxphone-pt: calc(100cqw / 412); aspect-ratio: 412 / 915; border-radius: 9% / 4.05%; }
/* native mode: the content is drawn in --pxphone-pt and takes the phone's own font and colours */
.pxphone--native .pxphone-scr { color: var(--pxphone-ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Heebo, sans-serif; line-height: 1.25; }
.pxphone--native.pxphone--android .pxphone-scr { font-family: Roboto, "Segoe UI", Heebo, system-ui, sans-serif; }
.pxphone svg.pxphone-i { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* status bar (always LTR, like the baseline) */
.pxphone-sb {
	flex: none;
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: 1fr calc(var(--pxphone-pt) * 126) 1fr;
	align-items: center;
	height: calc(var(--pxphone-pt) * 54);
	padding-top: calc(var(--pxphone-pt) * 5);
	direction: ltr;
	color: var(--pxphone-ink);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Heebo, sans-serif;
	font-size: calc(var(--pxphone-pt) * 17);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.01em;
	pointer-events: none;
	user-select: none;
}
.pxphone-sb .tm { text-align: center; padding-left: calc(var(--pxphone-pt) * 10); }
.pxphone-sb .isl { height: calc(var(--pxphone-pt) * 37); border-radius: 999px; background: #000000; }
.pxphone-sb .ic { display: flex; align-items: center; justify-content: center; gap: calc(var(--pxphone-pt) * 6); padding-right: calc(var(--pxphone-pt) * 6); }
.pxphone-sb .s { width: calc(var(--pxphone-pt) * 18); height: calc(var(--pxphone-pt) * 12); stroke-width: 2.7; }
.pxphone-sb .w { width: calc(var(--pxphone-pt) * 17); height: calc(var(--pxphone-pt) * 12); stroke-width: 2.1; }
.pxphone-sb .b { width: calc(var(--pxphone-pt) * 27); height: calc(var(--pxphone-pt) * 13); stroke-width: 1.1; }
.pxphone--android .pxphone-sb { grid-template-columns: 1fr auto 1fr; height: calc(var(--pxphone-pt) * 46); padding: 0 calc(var(--pxphone-pt) * 22); font-family: Roboto, "Segoe UI", Heebo, system-ui, sans-serif; font-size: calc(var(--pxphone-pt) * 14); font-weight: 500; letter-spacing: .01em; }
.pxphone--android .pxphone-sb .tm { text-align: left; padding: 0; }
.pxphone--android .pxphone-sb .cam { width: calc(var(--pxphone-pt) * 24); height: calc(var(--pxphone-pt) * 24); border-radius: 50%; background: #000000; box-shadow: inset 0 0 0 calc(var(--pxphone-pt) * 4) #111111, inset 0 0 0 calc(var(--pxphone-pt) * 6) #262A30; }
.pxphone--android .pxphone-sb .ic { justify-content: flex-end; gap: calc(var(--pxphone-pt) * 5); padding: 0; }
.pxphone--android .pxphone-sb .s { width: calc(var(--pxphone-pt) * 15); height: calc(var(--pxphone-pt) * 15); }
.pxphone--android .pxphone-sb .w { width: calc(var(--pxphone-pt) * 16); height: calc(var(--pxphone-pt) * 12); }
.pxphone--android .pxphone-sb .b { width: calc(var(--pxphone-pt) * 11); height: calc(var(--pxphone-pt) * 15); stroke-width: 1.5; }
/* --overlay: the status bar floats over the content (a full-bleed page, a lock screen) */
.pxphone--overlay .pxphone-sb { position: absolute; top: 0; left: 0; right: 0; }

/* what the phone shows */
.pxphone-app { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; }
.pxphone-app::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* --vp: the content lives at a real phone width (393 / 412 CSS px) and is scaled to the screen by PrintixPhone (--pxphone-k) */
.pxphone--vp .pxphone-app { overflow: hidden; display: block; }
.pxphone-vp {
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	width: 393px;
	height: calc(100% / var(--pxphone-k, 1));
	margin: 0;
	border: 0;
	transform: scale(var(--pxphone-k, 1));
	transform-origin: 0 0;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior: contain;
}
.pxphone--android .pxphone-vp { width: 412px; }
.pxphone-vp::-webkit-scrollbar { display: none; width: 0; height: 0; }
iframe.pxphone-vp { display: block; background: #FFFFFF; }

/* home indicator */
.pxphone-home { position: absolute; z-index: 4; left: 50%; bottom: calc(var(--pxphone-pt) * 8); width: calc(var(--pxphone-pt) * 139); height: calc(var(--pxphone-pt) * 5); margin-left: calc(var(--pxphone-pt) * -69.5); border-radius: 999px; background: var(--pxphone-ink); pointer-events: none; }
.pxphone--android .pxphone-home { width: calc(var(--pxphone-pt) * 108); height: calc(var(--pxphone-pt) * 4); margin-left: calc(var(--pxphone-pt) * -54); opacity: .85; }

/* optional Safari address pill (bottom), e.g. a web page shown "in the browser" */
.pxphone-url { position: absolute; z-index: 3; left: calc(var(--pxphone-pt) * 14); right: calc(var(--pxphone-pt) * 14); bottom: calc(var(--pxphone-pt) * 26); display: flex; align-items: center; justify-content: center; gap: calc(var(--pxphone-pt) * 5); height: calc(var(--pxphone-pt) * 46); border-radius: calc(var(--pxphone-pt) * 23); background: rgba(255, 255, 255, .92); color: #000000; direction: ltr; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Heebo, sans-serif; font-size: calc(var(--pxphone-pt) * 16); box-shadow: 0 calc(var(--pxphone-pt) * 2) calc(var(--pxphone-pt) * 12) rgba(0, 0, 0, .16); pointer-events: none; }
.pxphone--dark .pxphone-url { background: rgba(44, 44, 46, .94); color: #FFFFFF; }
.pxphone-url .l { width: calc(var(--pxphone-pt) * 15); height: calc(var(--pxphone-pt) * 15); stroke-width: 2.2; }

@media (prefers-reduced-motion: no-preference) {
	.pxphone-scr { transition: background-color .3s cubic-bezier(.2, .7, .2, 1); }
}