From dff02641156d662a43ce31d2b4af8d1b318083a5 Mon Sep 17 00:00:00 2001
From: lorentz <lorentz@wulfconsulting.com>
Date: Sun, 3 May 2026 13:56:21 -0400
Subject: [PATCH] feat(01-02): add pt-safe and pb-safe @utility blocks for
 safe-area insets
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Append @utility pt-safe { padding-top: env(safe-area-inset-top); }
- Append @utility pb-safe { padding-bottom: env(safe-area-inset-bottom); }
- Co-located with existing brand utilities; brand.css already imported by globals.css
- Closes PWA-04 (REQUIREMENTS.md) and ROADMAP Phase 1 SC #3
- Phase 2 sticky header → pt-safe; fixed bottom nav → pb-safe
---
 app/styles/brand.css | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/app/styles/brand.css b/app/styles/brand.css
index 4cdc148..391ae85 100644
--- a/app/styles/brand.css
+++ b/app/styles/brand.css
@@ -139,6 +139,29 @@
   letter-spacing: 0.01em;
 }
 
+/* === Safe-area insets =================================================
+ *
+ * Opt-in padding helpers for sticky top / fixed bottom bars on devices
+ * with notches, dynamic islands, or gesture home indicators.  Pair with
+ * the viewport-fit=cover viewport meta (set in app/layout.tsx) — without
+ * that, env(safe-area-inset-*) resolves to 0 and these utilities are
+ * no-ops, which is the desired fallback on non-PWA / non-mobile contexts.
+ *
+ * Usage:
+ *   <header class="sticky top-0 pt-safe ...">      // header clears notch
+ *   <nav class="fixed bottom-0 pb-safe ...">       // bottom bar clears home bar
+ *
+ * Closes PWA-04 (REQUIREMENTS.md) and ROADMAP Phase 1 SC #3.
+ * ==================================================================== */
+
+@utility pt-safe {
+  padding-top: env(safe-area-inset-top);
+}
+
+@utility pb-safe {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
 /* === Wolf-mark watermark ============================================
  *
  * Apply .has-mark-watermark to a positioned container; place a child