/**
 * Mobile Apps Showcase — front-end styles.
 *
 * Ported from app-showcase.html. Everything lives under .mas-root so nothing
 * leaks into the theme, and the theme reset near the top stops the theme
 * reaching in. The reset strips controls hard with !important, so every
 * background, padding, radius and font the mockup actually wants on a
 * <button> or <a> is re-applied with !important further down — that is why
 * this file carries more !important than a normal stylesheet would.
 */

/* ------------------------------------------------------------------ fonts */

/*
 * Self-hosted rather than called from fonts.googleapis.com — no third-party
 * request, no IP handed to Google, no render-blocking round trip. The
 * reference build linked Google Fonts directly; this is the one deliberate
 * departure from it.
 *
 * Drop the .woff2 files into assets/fonts/ using exactly these names:
 *   space-grotesk-500.woff2, space-grotesk-600.woff2, space-grotesk-700.woff2
 *   inter-400.woff2, inter-500.woff2
 *   jetbrains-mono-400.woff2, jetbrains-mono-500.woff2, jetbrains-mono-700.woff2
 *
 * See assets/fonts/README.md. Until they are in place the stacks below fall
 * through to the system fonts, so nothing breaks.
 */

@font-face {
	font-family: "MAS Space Grotesk";
	src: url("../fonts/space-grotesk-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "MAS Space Grotesk";
	src: url("../fonts/space-grotesk-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "MAS Space Grotesk";
	src: url("../fonts/space-grotesk-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "MAS Inter";
	src: url("../fonts/inter-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "MAS Inter";
	src: url("../fonts/inter-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "MAS JetBrains Mono";
	src: url("../fonts/jetbrains-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "MAS JetBrains Mono";
	src: url("../fonts/jetbrains-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "MAS JetBrains Mono";
	src: url("../fonts/jetbrains-mono-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------- foundation */

.mas-root {
	--bg: #15161b;
	--bg-elev: #1c1e25;
	--border: rgba(255, 255, 255, 0.08);
	--text-primary: #f2f2f0;
	--text-muted: #93949e;
	--ios: #5e8bff;
	--android: #f2a93c;

	--mas-display: "MAS Space Grotesk", "Space Grotesk", system-ui, sans-serif;
	--mas-body: "MAS Inter", Inter, system-ui, sans-serif;
	--mas-mono: "MAS JetBrains Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

	font-family: var(--mas-body);
	color: var(--text-primary);
	box-sizing: border-box;
	display: flex;
	justify-content: center;

	/* No panel of its own — the widget is just the phone, sitting on whatever
	   the page background is. The bottom padding is only there to clear the
	   bezel's drop shadow, which reaches about 40px below the device. */
	background: transparent;
	padding: 0 0 44px;
	border-radius: 0;
}

.mas-root *,
.mas-root *::before,
.mas-root *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------ theme reset */

/* Themes attack by element selector. Everything here is !important, which
   beats anything a theme declares without it, and wrapped in :where() so the
   block contributes zero specificity — without that it would out-rank the
   mockup's own single-class rules and strip its buttons bare. !important
   still beats !important-free rules regardless of source order, so the
   mockup re-applies what it needs with !important below. */

.mas-root :where(button, input, a) {
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-style: normal !important;
	line-height: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	color: inherit;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	-webkit-appearance: none;
	appearance: none;
}

/* A display font pinned on h2 by the theme beats plain inheritance, so the
   family is sent back up the tree to the stack declared on .mas-root. */
.mas-root :where(h1, h2, h3, h4, h5, h6, p, span, div, ul, ol, li, strong, em, small) {
	font-family: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.mas-root :where(h1, h2, h3, h4, h5, h6) {
	text-transform: none !important;
	letter-spacing: normal !important;
	font-style: normal !important;
}

.mas-root :where(button, a)::before,
.mas-root :where(button, a)::after {
	content: none !important;
}

.mas-root :where(button, a):hover,
.mas-root :where(button, a):focus,
.mas-root :where(button, a):active {
	background: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}

.mas-root :where(img) {
	max-width: 100% !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* ------------------------------------------------------------------ shell */

.mas-root .asw-wrap {
	width: 100%;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mas-root .asw-eyebrow {
	font-family: var(--mas-mono) !important;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-muted);
	text-align: center;
	margin-bottom: 10px !important;
}

.mas-root .asw-eyebrow .i {
	color: var(--ios);
}

.mas-root .asw-eyebrow .dot {
	color: var(--text-muted);
	margin: 0 4px !important;
}

.mas-root .asw-eyebrow .a {
	color: var(--android);
}

.mas-root .asw-title {
	font-family: var(--mas-display) !important;
	font-size: clamp(22px, 3.4vw, 30px);
	font-weight: 600;
	text-align: center;
	margin: 0 0 30px !important;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

/* ----------------------------------------------------------------- toggle */

/* The !important is load-bearing: the theme reset above zeroes margin on every
   div, so without it this gap collapses and the toggle sits on the bezel. */
.mas-root .asw-toggle-row {
	display: flex;
	justify-content: center;
	margin-bottom: 34px !important;
}

.mas-root .asw-toggle {
	position: relative;
	display: inline-flex;
	background: var(--bg-elev) !important;
	border: 1px solid var(--border) !important;
	border-radius: 999px !important;
	padding: 4px !important;
	cursor: pointer;
	user-select: none;
}

.mas-root .asw-toggle:focus-visible {
	outline: 2px solid var(--ios);
	outline-offset: 3px;
}

.mas-root .asw-toggle-knob {
	position: absolute;
	top: 4px;
	left: 4px;
	width: calc(50% - 4px);
	height: calc(100% - 8px);
	border-radius: 999px;
	background: var(--ios);
	transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), background 0.5s ease;
	z-index: 0;
}

.mas-root.is-android .asw-toggle-knob {
	transform: translateX(100%);
	background: var(--android);
}

.mas-root .asw-toggle-opt {
	position: relative;
	z-index: 1;
	font-family: var(--mas-mono) !important;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.03em;
	padding: 9px 26px !important;
	border-radius: 999px;
	color: var(--text-muted);
	transition: color 0.4s ease;
	white-space: nowrap;
}

.mas-root:not(.is-android) .asw-toggle-opt.ios,
.mas-root.is-android .asw-toggle-opt.android {
	color: #0c0d10;
	font-weight: 600;
}

/* -------------------------------------------------------- flip mechanics */

.mas-root .asw-phone-stage {
	width: 280px;
	height: 580px;
	perspective: 1800px;
	margin: 0 auto !important;
}

.mas-root .asw-flip-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
	transform-style: preserve-3d;
}

.mas-root.is-android .asw-flip-inner {
	transform: rotateY(180deg);
}

.mas-root .asw-face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	pointer-events: none;
}

.mas-root .asw-face.back {
	transform: rotateY(180deg);
}

.mas-root:not(.is-android) .asw-face.front,
.mas-root.is-android .asw-face.back {
	pointer-events: auto;
}

/* The face that is rotated away must not swallow clicks meant for the visible
   one. `pointer-events: none` on .asw-face alone does not do it: .asw-homeview
   and .asw-dialerview each set `pointer-events: auto` when their screen is
   active, and a descendant opting back in beats the ancestor's none. The
   invisible face then hit-tests over the visible one — which is what stopped
   the Android "‹ Home" link from working. Nothing inside a hidden face should
   ever be interactive, so shut the whole subtree down. */
.mas-root:not(.is-android) .asw-face.back,
.mas-root:not(.is-android) .asw-face.back *,
.mas-root.is-android .asw-face.front,
.mas-root.is-android .asw-face.front * {
	pointer-events: none !important;
}

/* ----------------------------------------------------------------- bezels */

.mas-root .asw-bezel {
	width: 100%;
	height: 100%;
	background: #0b0c0f;
	border: 2px solid #303138;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
	position: relative;
	overflow: hidden;
}

.mas-root .asw-bezel.ios {
	border-radius: 46px;
}

.mas-root .asw-bezel.android {
	border-radius: 30px;
}

.mas-root .asw-screen {
	position: absolute;
	inset: 10px;
	border-radius: 38px;
	overflow: hidden;
}

.mas-root .asw-bezel.android .asw-screen {
	border-radius: 22px;
	inset: 8px;
}

.mas-root .asw-screen.is-ios {
	background: radial-gradient(circle at 28% 12%, rgba(94, 139, 255, 0.4), transparent 55%),
		linear-gradient(165deg, #1b1d26, #0d0e12);
}

.mas-root .asw-screen.is-android {
	background: radial-gradient(circle at 72% 10%, rgba(242, 169, 60, 0.35), transparent 55%),
		linear-gradient(165deg, #1b1d26, #0d0e12);
}

.mas-root .asw-dynamic-island {
	position: absolute;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	width: 90px;
	height: 26px;
	background: #000;
	border-radius: 16px;
	z-index: 5;
}

.mas-root .asw-punch-hole {
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	width: 12px;
	height: 12px;
	background: #000;
	border: 1.5px solid #222;
	border-radius: 50%;
	z-index: 5;
}

/* Both are <button> now — they close the keypad — so the fills need
   !important to survive the control reset. */
.mas-root .asw-home-indicator {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px !important;
	height: 4px !important;
	background: rgba(255, 255, 255, 0.5) !important;
	border-radius: 4px !important;
	z-index: 5;
	cursor: pointer;
}

.mas-root .asw-nav-pill {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 36px !important;
	height: 4px !important;
	background: rgba(255, 255, 255, 0.4) !important;
	border-radius: 4px !important;
	z-index: 5;
	cursor: pointer;
}

/* On the iOS keypad the screen turns white, so the bar has to invert. */
.mas-root .asw-screen.showing-dialer .asw-home-indicator {
	background: rgba(0, 0, 0, 0.55) !important;
}

.mas-root .asw-home-bar:focus-visible {
	outline: 2px solid var(--ios);
	outline-offset: 3px;
}

.mas-root .asw-side-btn {
	position: absolute;
	width: 3px;
	background: #303138;
	border-radius: 2px;
}

.mas-root .asw-side-btn.power {
	right: -3px;
	top: 130px;
	height: 60px;
}

.mas-root .asw-bezel.android .asw-side-btn.power {
	top: 120px;
	height: 70px;
}

.mas-root .asw-side-btn.vol-up {
	left: -3px;
	top: 110px;
	height: 34px;
}

.mas-root .asw-side-btn.vol-down {
	left: -3px;
	top: 154px;
	height: 34px;
}

/* -------------------------------------------------------------- home view */

.mas-root .asw-homeview,
.mas-root .asw-detailview {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.mas-root .asw-homeview {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
	height: 100%;
}

.mas-root .asw-detailview {
	opacity: 0;
	transform: scale(0.94);
	pointer-events: none;
}

.mas-root .asw-screen.showing-detail .asw-homeview {
	opacity: 0;
	transform: scale(1.06);
	pointer-events: none;
}

.mas-root .asw-screen.showing-detail .asw-detailview {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.mas-root .asw-statusbar {
	display: flex;
	justify-content: space-between;
	font-family: var(--mas-mono) !important;
	font-size: 9.5px;
	color: #fff;
	opacity: 0.6;
	padding: 8px 16px 0 !important;
}

.mas-root .asw-app-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px 6px;
	padding: 0 14px !important;
	flex: none;
}

.mas-root .asw-face.front .asw-app-grid {
	margin-top: 40px !important;
}

.mas-root .asw-face.back .asw-app-grid {
	margin-top: 34px !important;
}

.mas-root .asw-grid-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}

.mas-root .asw-grid-item:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	border-radius: 14px;
}

.mas-root .asw-grid-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	font-family: var(--mas-display) !important;
	font-size: 19px;
	font-weight: 700;
	color: #fff;
	box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.6);
}

/* Android launcher icons are round. 50% rather than a pixel radius so it stays
   circular if the icon size is ever changed. */
.mas-root .asw-face.back .asw-grid-icon {
	border-radius: 50%;
}

.mas-root .asw-grid-icon img {
	width: 100% !important;
	height: 100%;
	object-fit: cover;
	border-radius: 0 !important;
}

.mas-root .asw-grid-label {
	margin-top: 6px !important;
	font-size: 9px;
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	max-width: 58px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mas-root .asw-home-spacer {
	flex: 1;
}

/* iOS: a slim capsule, not the chunky bar the first pass had. The glyph is an
   inline SVG because the reference's ⌕ character is missing from most system
   fonts and fell back to a stray Greek rho. */
.mas-root .asw-search-pill {
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: auto;
	min-width: 96px;
	height: 22px;
	padding: 0 12px !important;
	background: rgba(255, 255, 255, 0.13);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 999px;
	font-size: 9.5px;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.72);
	margin-bottom: 12px !important;
}

.mas-root .asw-search-pill svg {
	width: 9px;
	height: 9px;
	flex: none;
	opacity: 0.75;
}

/* Android: the Pixel launcher's full-width Google bar, which sits below the
   dock rather than above it. */
.mas-root .asw-gsearch {
	display: flex;
	align-items: center;
	gap: 9px;
	height: 34px;
	margin: 0 14px 14px !important;
	padding: 0 13px !important;
	background: rgba(255, 255, 255, 0.94);
	border-radius: 999px;
	box-shadow: 0 3px 10px -4px rgba(0, 0, 0, 0.5);
}

.mas-root .asw-gsearch-spacer {
	flex: 1;
}

.mas-root .asw-gsearch svg {
	flex: none;
	display: block;
}

.mas-root .asw-gsearch-g svg {
	width: 15px;
	height: 15px;
}

.mas-root .asw-gsearch-mic svg,
.mas-root .asw-gsearch-lens svg {
	width: 14px;
	height: 14px;
}

/* ------------------------------------------------------------------- dock */

.mas-root .asw-dock {
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 24px;
	margin: 0 14px 16px !important;
	padding: 9px 10px !important;
}

.mas-root .asw-dock-icon {
	width: 44px !important;
	height: 44px !important;
	border-radius: 12px !important;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px !important;
	box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.5) !important;
}

.mas-root .asw-face.back .asw-dock-icon {
	border-radius: 50% !important;
}

/* An icon with no URL configured is decoration, not a control. */
.mas-root .asw-dock-icon.is-inert {
	cursor: default;
}

/* Dock icon fills. Inline styles in the reference build; classes here so the
   markup stays escapable and the two faces can differ. */
.mas-root .asw-dock-icon.dock-phone {
	background: #34c759 !important;
}

.mas-root .asw-dock-icon.dock-message {
	background: #30d158 !important;
}

.mas-root .asw-face.front .asw-dock-icon.dock-browser {
	background: radial-gradient(circle at 35% 35%, #7dd8ff, #0a84ff) !important;
}

.mas-root .asw-face.front .asw-dock-icon.dock-music {
	background: linear-gradient(135deg, #fa2c56, #ff5e9c) !important;
}

.mas-root .asw-face.back .asw-dock-icon.dock-browser {
	background: conic-gradient(from 0deg, #ea4335, #fbbc05, #34a853, #4285f4) !important;
}

.mas-root .asw-face.back .asw-dock-icon.dock-music {
	background: linear-gradient(135deg, #ff512f, #f09819) !important;
}

/* An uploaded icon replaces the stock fill entirely. The per-face rules above
   are five classes deep, so these have to match that weight and come later —
   otherwise a custom icon with any transparency sits on the Google conic
   gradient or the pink music one. */
.mas-root .asw-face.front .asw-dock-icon.has-image,
.mas-root .asw-face.back .asw-dock-icon.has-image {
	background: none !important;
	overflow: hidden;
}

.mas-root .asw-dock-icon.has-image img {
	width: 100% !important;
	height: 100%;
	max-width: none !important;
	object-fit: cover;
	border-radius: 0 !important;
}

/* ------------------------------------------------------------ detail view */

.mas-root .asw-detailview {
	padding: 40px 15px 26px !important;
	color: #fff;
}

.mas-root .asw-navrow-btn {
	text-align: left;
	cursor: pointer;
	font-family: var(--mas-mono) !important;
	font-size: 10.5px !important;
	color: #fff;
	opacity: 0.55;
	letter-spacing: 0.02em;
	margin-bottom: 14px !important;
	align-self: flex-start;
}

.mas-root .asw-navrow-btn:hover {
	opacity: 0.85;
}

.mas-root .asw-navrow-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.mas-root .asw-icon-row {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 12px !important;
}

.mas-root .asw-app-icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mas-display) !important;
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
	box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.mas-root .asw-face.back .asw-app-icon {
	border-radius: 50%;
}

.mas-root .asw-app-icon img {
	width: 100% !important;
	height: 100%;
	object-fit: cover;
	border-radius: 0 !important;
}

.mas-root .asw-icon-meta {
	flex: 1;
	min-width: 0;
}

.mas-root .asw-app-name-sm {
	font-family: var(--mas-display) !important;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mas-root .asw-app-dev {
	font-size: 10px;
	opacity: 0.5;
	margin-top: 2px !important;
}

/* A tight pill rather than the reference's chunky 13px-radius block: smaller
   type, tighter tracking, less padding, fully rounded — closer to the real
   store buttons and it stops competing with the app name beside it. */
.mas-root .asw-cta {
	flex: none;
	text-align: center;
	font-family: var(--mas-mono) !important;
	font-size: 9.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.09em;
	line-height: 1.7 !important;
	padding: 3px 15px !important;
	border-radius: 999px !important;
	text-indent: 0.09em; /* balances the trailing letter-space */
}

.mas-root .asw-cta.ios-cta {
	background: var(--ios) !important;
	color: #fff;
}

.mas-root .asw-cta.android-cta {
	background: var(--android) !important;
	color: #201502;
}

/* No store link on this platform yet — the button stays in place so the card
   keeps its shape, but reads as unavailable and is not focusable. */
.mas-root .asw-cta.is-unavailable {
	background: rgba(255, 255, 255, 0.14) !important;
	color: rgba(255, 255, 255, 0.55);
	cursor: default;
}

.mas-root .asw-category-pill {
	display: inline-block;
	width: fit-content;
	font-family: var(--mas-mono) !important;
	font-size: 9px;
	letter-spacing: 0.03em;
	padding: 3px 9px !important;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	opacity: 0.6;
	margin-bottom: 12px !important;
}

.mas-root .asw-category-pill:empty {
	display: none;
}

.mas-root .asw-divider {
	height: 1px;
	background: rgba(255, 255, 255, 0.08);
	margin-bottom: 12px !important;
}

.mas-root .asw-desc {
	font-size: 11.5px;
	line-height: 1.55;
	opacity: 0.78;
	margin: 0 0 14px !important;
}

.mas-root .asw-case-link {
	display: block;
	text-align: center;
	font-family: var(--mas-mono) !important;
	font-size: 10.5px !important;
	letter-spacing: 0.02em;
	color: #fff;
	opacity: 0.92;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 10px !important;
	padding: 9px !important;
	margin-bottom: 14px !important;
	transition: background 0.25s ease;
}

.mas-root .asw-case-link:hover {
	background: rgba(255, 255, 255, 0.08) !important;
}

.mas-root .asw-case-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.mas-root .asw-case-link.is-hidden {
	display: none;
}

.mas-root .asw-shots {
	margin-top: auto !important;
}

/* No screenshots — the reference build's gradient placeholder strip. */
.mas-root .asw-shots.is-empty {
	display: flex;
	gap: 6px;
}

.mas-root .asw-shots.is-empty span {
	flex: 1;
	height: 58px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--app-b, #0e1122), var(--app-a, #1d2440));
	opacity: 0.55;
	border: 1px solid rgba(255, 255, 255, 0.06);
}

/* The carousel. The track has the definite height and every slide is
   height:100% / width:auto against it, so each screenshot keeps its own
   aspect ratio instead of being cropped into a shared box — a tall phone
   capture stays tall and narrow, a wide one stays wide. */
.mas-root .asw-shots-track {
	display: flex;
	gap: 6px;
	height: 100px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.mas-root .asw-shots-track::-webkit-scrollbar {
	display: none;
}

.mas-root .asw-shot {
	height: 100%;
	width: auto !important;
	max-width: none !important;
	flex: none;
	object-fit: contain;
	border-radius: 9px !important;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(255, 255, 255, 0.04);
	scroll-snap-align: center;
}

/* One screenshot does not need a carousel — centre it instead. */
.mas-root .asw-shots:not(.has-carousel) .asw-shots-track {
	justify-content: center;
}

.mas-root .asw-shots-dots {
	display: flex;
	justify-content: center;
	gap: 5px;
	margin-top: 8px !important;
}

.mas-root .asw-shots-dot {
	width: 5px;
	height: 5px;
	padding: 0 !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.26) !important;
	cursor: pointer;
	transition: width 0.25s ease, background 0.25s ease;
}

.mas-root .asw-shots-dot.is-active {
	width: 13px;
	background: rgba(255, 255, 255, 0.85) !important;
}

.mas-root .asw-shots-dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ----------------------------------------------------------- dialer view */

.mas-root .asw-dialerview {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: scale(0.94);
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
	z-index: 4;
}

.mas-root .asw-screen.showing-dialer .asw-homeview {
	opacity: 0;
	transform: scale(1.06);
	pointer-events: none;
}

.mas-root .asw-screen.showing-dialer .asw-dialerview {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

/* The keypad is opaque — it is a different app, not an overlay. */
.mas-root .asw-face.front .asw-dialerview {
	background: #fff;
	color: #1c1c1e;
}

.mas-root .asw-face.back .asw-dialerview {
	background: #0d0d0d;
	color: #fff;
}

/* iOS turns the status bar dark on the white keypad. */
.mas-root .asw-face.front .asw-dialerview .asw-statusbar {
	color: #1c1c1e;
	opacity: 0.85;
}

/* Back link row. On iOS it is the row on its own; on Android it also carries
   the dialer's action icons on the right. */
.mas-root .asw-dial-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 14px 0 !important;
}

.mas-root .asw-dial-back {
	margin-bottom: 0 !important;
}

.mas-root .asw-face.front .asw-dial-back {
	color: #007aff;
	opacity: 1;
}

.mas-root .asw-face.front .asw-dial-back:hover {
	opacity: 0.7;
}

.mas-root .asw-face.back .asw-dial-back {
	color: #e8eaed;
	opacity: 0.85;
}

/* Android's dialer action icons, right of the back link. */
.mas-root .asw-dial-top {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 16px;
	color: #e8eaed;
}

.mas-root .asw-dial-top svg {
	width: 15px;
	height: 15px;
	display: block;
}

.mas-root .asw-dial-display {
	text-align: center;
	padding: 0 14px !important;
}

/* Trimmed from 30/40 to make room for the back-link row above. */
.mas-root .asw-face.front .asw-dial-display {
	margin-top: 16px !important;
}

.mas-root .asw-face.back .asw-dial-display {
	margin-top: 26px !important;
}

.mas-root .asw-dial-number {
	font-size: 22px;
	line-height: 1.25;
	min-height: 28px;
	word-break: break-all;
}

.mas-root .asw-face.front .asw-dial-number {
	color: #1c1c1e;
	font-weight: 400;
	letter-spacing: 0.01em;
}

.mas-root .asw-face.back .asw-dial-number {
	color: #fff;
	font-weight: 300;
	letter-spacing: 0.02em;
}

.mas-root .asw-dial-add {
	margin-top: 6px !important;
	font-size: 11px;
	color: #007aff;
}

/* ---- keypad ---- */

.mas-root .asw-dial-keys {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	justify-items: center;
	margin: 0 24px !important;
}

.mas-root .asw-face.front .asw-dial-keys {
	gap: 11px 16px;
	margin-top: 20px !important;
}

.mas-root .asw-face.back .asw-dial-keys {
	gap: 13px 16px;
	margin-top: 26px !important;
}

.mas-root .asw-dial-key {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	width: 50px !important;
	height: 50px !important;
}

/* iOS keys are grey circles; Android's are bare glyphs. */
.mas-root .asw-face.front .asw-dial-key {
	background: #e4e4e9 !important;
	border-radius: 50% !important;
}

.mas-root .asw-face.front .asw-dial-key:active {
	background: #cfcfd6 !important;
}

.mas-root .asw-face.back .asw-dial-key:active {
	background: rgba(255, 255, 255, 0.09) !important;
	border-radius: 50% !important;
}

.mas-root .asw-dial-key:focus-visible {
	outline: 2px solid var(--ios);
	outline-offset: 2px;
	border-radius: 50% !important;
}

.mas-root .asw-dial-digit {
	font-size: 22px !important;
	line-height: 1 !important;
}

.mas-root .asw-face.front .asw-dial-digit {
	color: #000;
	font-weight: 400 !important;
}

.mas-root .asw-face.back .asw-dial-digit {
	color: #fff;
	font-weight: 300 !important;
}

.mas-root .asw-dial-sub {
	margin-top: 2px !important;
	font-size: 7px !important;
	letter-spacing: 0.14em;
	line-height: 1 !important;
}

.mas-root .asw-face.front .asw-dial-sub {
	color: #3c3c43;
}

.mas-root .asw-face.back .asw-dial-sub {
	color: #9aa0a6;
	font-size: 8px !important;
}

.mas-root .asw-dial-vm svg {
	width: 13px;
	height: 9px;
	display: block;
	color: #9aa0a6;
}

/* ---- call row ---- */

.mas-root .asw-dial-actions {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	margin: 0 24px !important;
}

.mas-root .asw-face.front .asw-dial-actions {
	margin-top: 16px !important;
}

.mas-root .asw-face.back .asw-dial-actions {
	margin-top: 22px !important;
}

.mas-root .asw-dial-slot {
	display: flex;
	align-items: center;
}

.mas-root .asw-dial-slot-left {
	justify-content: flex-start;
}

.mas-root .asw-dial-slot-right {
	justify-content: flex-end;
}

.mas-root .asw-dial-call {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px !important;
	height: 50px !important;
	border-radius: 50% !important;
	background: #34c759 !important;
	color: #fff;
	cursor: pointer;
}

.mas-root .asw-face.back .asw-dial-call {
	background: #1ea952 !important;
}

.mas-root .asw-dial-call svg {
	width: 22px;
	height: 22px;
}

/* Nothing to dial — no href, so it is inert and unfocusable. */
.mas-root .asw-dial-call.is-unavailable {
	background: rgba(120, 120, 128, 0.35) !important;
	cursor: default;
}

.mas-root .asw-dial-call:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.mas-root .asw-dial-del {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	width: 26px !important;
	height: 26px !important;
}

.mas-root .asw-face.front .asw-dial-del {
	color: #c2c2c9;
}

.mas-root .asw-face.back .asw-dial-del {
	color: #bdc1c6;
	width: 30px !important;
	height: 30px !important;
}

.mas-root .asw-dial-del svg {
	width: 100%;
	height: 100%;
}

.mas-root .asw-dial-video {
	display: block;
	color: #34a853;
}

.mas-root .asw-dial-video svg {
	width: 26px;
	height: 26px;
}

/* ---- iOS tab bar ---- */

.mas-root .asw-dial-tabs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-items: end;
	margin-top: auto !important;
	padding: 7px 4px 14px !important;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	background: #f7f7fa;
}

.mas-root .asw-dial-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: #8e8e93;
	font-size: 6.5px;
	letter-spacing: 0.01em;
	text-align: center;
}

.mas-root .asw-dial-tab svg {
	width: 15px;
	height: 15px;
}

.mas-root .asw-dial-tab.is-active {
	color: #007aff;
}

/* ----------------------------------------------------------- empty state */

.mas-root .asw-empty {
	margin: 40px 14px 0 !important;
	text-align: center;
	font-family: var(--mas-mono) !important;
	font-size: 10.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
}

/* ------------------------------------------------------------ responsive */

/* The stage is a fixed 280px because it is a phone, not a fluid layout —
   scaling it would change the design. Only the surrounding padding gives way
   so it still clears a 320px viewport. */
@media (max-width: 420px) {
	.mas-root {
		padding: 40px 12px 44px;
		border-radius: 14px;
	}
}

/* --------------------------------------------------------- reduced motion */

/* Kill the flip and the detail-card scale for anyone who asked for less
   motion. The platform switch and the detail view still work — they cut
   instead of animating. */
@media (prefers-reduced-motion: reduce) {
	.mas-root *,
	.mas-root *::before,
	.mas-root *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	/* preserve-3d plus an instant rotateY leaves the far face showing through
	   on some engines, so the reduced-motion path swaps faces outright rather
	   than rotating the stage. */
	.mas-root .asw-flip-inner {
		transform: none !important;
		transform-style: flat;
	}

	.mas-root .asw-face.back {
		transform: none !important;
	}

	.mas-root .asw-face {
		backface-visibility: visible;
		-webkit-backface-visibility: visible;
		visibility: hidden;
	}

	.mas-root:not(.is-android) .asw-face.front,
	.mas-root.is-android .asw-face.back {
		visibility: visible;
	}
}