Safe area 1.2.2

Padding utilities that respect env(safe-area-inset-*) on notched phones, plus breakpoint helpers for mobile-only and desktop-only blocks. Deutsch: Safe Area

Maturity: Documented as stable in VelinStyle 1.2.0. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

When to use

Pad for device safe areas (notches) on fixed headers/footers and bottom nav.

When not

Not a substitute for responsive breakpoints.

Safe-area padding

Each class uses max(var(--velin-space-4, 1rem), env(safe-area-inset-*)) so content clears system UI without hard-coded device offsets.

Class	Effect
`.velin-pt-safe`	Padding block-start (status bar / notch)
`.velin-pb-safe`	Padding block-end (home indicator)
`.velin-px-safe`	Padding inline (left/right insets)
`.velin-p-safe`	All sides

Safe-area padding applied (device insets when present).

<velin-bottom-nav class="velin-pb-safe">…</velin-bottom-nav>
<header class="velin-pt-safe">…</header>

Mobile / desktop visibility

Complements responsive display utilities. The layout audit flags velin-hidden without a matching show class at md.

Class	Default (< 48rem)	≥ 48rem
`.velin-mobile-only`	visible	hidden
`.velin-desktop-only`	hidden	visible