/*
 * VMWEB — MobileApp component (port of MobileApp.dc.html).
 * Every visual rule lives in the inline styles of the template part; this file
 * holds the runtime's host shell, the style-active / style-focus classes
 * (declarations get !important, like the design runtime) and the sc-if helper.
 * Keyframes are in assets/css/pages/mobile-app.css (the page helmet).
 */

/* The runtime's #dc-root > .sc-host is full height; so is our host. */
.vmm-host { height: 100%; }

/* <sc-if> blocks toggled with the hidden attribute (some carry inline display). */
.vmm-root [hidden] { display: none !important; }

/* style-active="scale:…" */
.vmm-a90:active { scale: .9 !important; }
.vmm-a92:active { scale: .92 !important; }
.vmm-a94:active { scale: .94 !important; }
.vmm-a95:active { scale: .95 !important; }
.vmm-a96:active { scale: .96 !important; }
.vmm-a97:active { scale: .97 !important; }
.vmm-a98:active { scale: .98 !important; }

/* style-focus="border-color:#c1ed00" */
.vmm-fo:focus { border-color: #c1ed00 !important; }

/* ---------------------------------------------------------------------------
 * App at every URL (inc/app.php)
 * ------------------------------------------------------------------------- */

/* Warm start: the splash already played this session — go straight in. */
.vm-app-warm .vmm-root [data-ref="splash"] { display: none !important; }
.vm-app-warm .vmm-root [style*="animation:mUp"] { animation-delay: .05s !important; }

/* Skeleton while an in-app screen loads. */
.vmm-skel {
	display: block;
	background: linear-gradient(90deg, #16171a 25%, #202226 37%, #16171a 63%);
	background-size: 400% 100%;
	animation: vmmSkel 1.3s ease infinite;
}
@keyframes vmmSkel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* FAQ accordions inside screens (native <details>, styled like the Studio FAQ). */
.vmm-qa > summary::-webkit-details-marker { display: none; }
.vmm-qa > summary::marker { content: ''; }
.vmm-qa > summary { transition: color .3s; }
.vmm-qa[open] > summary { color: #c1ed00; }
.vmm-qa[open] .vmm-qa-ic { rotate: 90deg; }

/* Reading screen: WordPress content set in the app's type. */
.vmm-doc { padding: 22px 20px 0; font-size: 17px; line-height: 1.7; color: #c9ccd0; -webkit-user-select: text; user-select: text; overflow-wrap: anywhere; }
.vmm-doc > * { margin: 0 0 1.1em; }
.vmm-doc h2, .vmm-doc h3, .vmm-doc h4 { font-family: 'Archivo', sans-serif; color: #edf0ea; text-transform: uppercase; letter-spacing: -.02em; line-height: .98; margin: 1.6em 0 .6em; }
.vmm-doc h2 { font-weight: 800; font-size: 30px; font-stretch: 80%; }
.vmm-doc h3 { font-weight: 800; font-size: 23px; font-stretch: 84%; }
.vmm-doc h4 { font-weight: 700; font-size: 18px; }
.vmm-doc a { color: #c1ed00; text-underline-offset: 3px; }
.vmm-doc img, .vmm-doc video, .vmm-doc iframe { max-width: 100%; height: auto; border-radius: 18px; }
.vmm-doc figure { margin: 1.4em 0; }
.vmm-doc figcaption { font-size: 13px; color: #8e9399; margin-top: 8px; }
.vmm-doc blockquote { margin: 1.4em 0; padding: 18px 20px; border-left: 3px solid #c1ed00; border-radius: 0 18px 18px 0; background: #16171a; color: #edf0ea; font: 600 19px/1.4 'Archivo', sans-serif; }
.vmm-doc ul, .vmm-doc ol { padding-left: 1.2em; }
.vmm-doc li { margin: .35em 0; }
.vmm-doc li::marker { color: #c1ed00; }
.vmm-doc pre, .vmm-doc code { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 14px; }
.vmm-doc pre { padding: 16px; border-radius: 16px; background: #0b0c0e; border: 1px solid rgba(255,255,255,.08); overflow-x: auto; }
.vmm-doc :not(pre) > code { padding: 2px 6px; border-radius: 6px; background: #16171a; }
.vmm-doc table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.vmm-doc th, .vmm-doc td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
.vmm-doc hr { border: 0; height: 1px; background: rgba(255,255,255,.1); margin: 2em 0; }
.vmm-doc .wp-block-button__link, .vmm-doc .vmm-doc-submit, .vmm-doc input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border-radius: 16px; border: 0; background: #c1ed00; color: #0e0f11; font: 700 15px/1 'Archivo', sans-serif; text-decoration: none; cursor: pointer; }
.vmm-doc input[type="text"], .vmm-doc input[type="email"], .vmm-doc input[type="url"], .vmm-doc input[type="password"], .vmm-doc input[type="search"], .vmm-doc textarea { width: 100%; box-sizing: border-box; background: #16171a; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 14px; font: 500 16px/1.4 'Instrument Sans', sans-serif; color: #edf0ea; outline: none; }
.vmm-doc input:focus, .vmm-doc textarea:focus { border-color: #c1ed00; }
.vmm-doc label { display: block; font: 600 13px/1.4 'Instrument Sans', sans-serif; color: #a3a7ad; margin-bottom: 6px; }
.vmm-doc .alignleft { float: left; margin: 0 1em 1em 0; }
.vmm-doc .alignright { float: right; margin: 0 0 1em 1em; }
.vmm-doc .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.vmm-doc .alignwide, .vmm-doc .alignfull { margin-left: -20px; margin-right: -20px; width: calc(100% + 40px); max-width: none; border-radius: 0; }
.vmm-doc-comments h2 { margin-top: 0; }
.vmm-doc-comments .comment { padding: 14px 0; border-top: 1px solid rgba(255,255,255,.06); }
.vmm-doc-comments .comment-author { display: flex; align-items: center; gap: 10px; font: 700 15px/1.2 'Archivo', sans-serif; color: #edf0ea; }
.vmm-doc-comments .avatar { border-radius: 50%; }
.vmm-doc-comments .comment-metadata, .vmm-doc-comments .says { font-size: 12px; color: #8e9399; }
.vmm-doc-comments .comment-metadata a { color: #8e9399; text-decoration: none; }
.vmm-doc-comments .children { padding-left: 16px; }
.vmm-doc-pager a { display: inline-flex; align-items: center; height: 46px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); color: #edf0ea; text-decoration: none; font: 600 14px/1 'Instrument Sans', sans-serif; }

/* Studio tab: the studio reel (photos of what we do), one every 6 seconds. */
.vmm-reel { position: absolute; inset: 0; }
.vmm-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: grayscale(1) contrast(1.05); opacity: 0; animation: vmmReel 30s linear infinite both; }
@keyframes vmmReel { 0% { opacity: 0; scale: 1.14; } 4%, 20% { opacity: 1; } 24% { opacity: 0; scale: 1; } 100% { opacity: 0; scale: 1; } }
@media (prefers-reduced-motion: reduce) {
	.vmm-reel img { animation: none; opacity: 0; }
	.vmm-reel img:first-child { opacity: 1; }
}