/* Public card layout and selected 2D expansion. */
html.card-current { scrollbar-gutter: auto; }
.card-current { --card-top: 16px; }
.card-current .view-layer { transition: none; transform-origin: 50% 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
html.card-current #view-cover,html.card-current #view-profile,html.card-current #view-qr { transform: none; }
.card-current .cover-wrapper { border-radius: 32px; }
.card-current .bento-container { max-width: 480px; padding-top: var(--card-top); gap: 16px; transform: none !important; opacity: 1 !important; }
.card-current .bento-profile { padding-top: 48px; border-radius: 32px; }
.card-current .view-header { max-width: 480px; height: auto; align-items: flex-start; padding: calc(var(--card-top) + 16px) 32px 0; }
.card-current .bento-qr { border-radius: 32px; }
.card-current .toast-container { pointer-events: none; }
.card-current .toast.show { pointer-events: auto; }
@media(prefers-reduced-motion:reduce) { .card-current .view-layer { animation: none; } }

@media(max-width:768px) { .card-current { --card-top: 24px; } }

/* Chrome desktop only: blur image pixels once, without a live backdrop dependency. */
html.card-current.chrome-cover-raster .cover-wrapper::before {
 content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
 background: inherit; filter: blur(10px); transform: translateZ(0); will-change: filter;
 mask-image: linear-gradient(to bottom,
   transparent var(--card-glass-start, 50%),
   rgba(0,0,0,.04) calc(var(--card-glass-start, 50%) + var(--card-glass-height, 50%) * .15),
   rgba(0,0,0,.18) calc(var(--card-glass-start, 50%) + var(--card-glass-height, 50%) * .30),
   rgba(0,0,0,.4) calc(var(--card-glass-start, 50%) + var(--card-glass-height, 50%) * .48),
   rgba(0,0,0,.72) calc(var(--card-glass-start, 50%) + var(--card-glass-height, 50%) * .68),
   #000 calc(var(--card-glass-start, 50%) + var(--card-glass-height, 50%) * .90));
}
html.card-current.chrome-cover-raster .cover-glass::before { content: none; }

/* Layers are promoted only while the selected 2D expansion runs. */
html.card-current body, .card-current .app-viewport { perspective:none; }
.card-current .view-layer { will-change:auto; backface-visibility:visible; -webkit-backface-visibility:visible; }
.card-current .view-layer.card-view-moving { will-change:transform,opacity; }
.card-current .cover-wrapper, .card-current .bento-container { will-change:auto; }