/* ATAD Phone Kit v1 (8 Oct 2026) -- shared phone header/footer rules. Copy unchanged into every app.
   1. VIEWPORT: env(safe-area-inset-*) is 0 unless the page has
        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   2. SAFE AREAS: .atad-topbar keeps its buttons below the notch; .atad-tabbar keeps its tabs above the home bar.
      Apply to an app's OWN classes with one line each:
        .my-header{padding-top:calc(var(--atad-pad-top,10px) + var(--atad-sat,env(safe-area-inset-top,0px)))}
        .my-tabs{padding-bottom:calc(var(--atad-pad-bottom,6px) + var(--atad-sab,env(safe-area-inset-bottom,0px)))}
      (add the app's fixed header height on top of the notch too if it sets height).
   3. TEST HOOK: tests simulate a notch by setting  --atad-sat: 47px  (and --atad-sab: 34px) on :root.
   4. RETURN TO STAFF PORTAL: first row of the phone Me / More sheet, copy-paste:
        <a class="atad-portal-row" href="https://apps.atadtechnical.com/"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg><span>Return To Staff Portal</span></a>
   Reads the app's own tokens (--bg --surface --line --text --muted), never sets them; the fallbacks are the dark values. */
:root{--atad-sat:env(safe-area-inset-top,0px);--atad-sab:env(safe-area-inset-bottom,0px)}
.atad-topbar{display:flex;align-items:center;gap:8px;box-sizing:border-box;
  padding:calc(10px + var(--atad-sat,env(safe-area-inset-top,0px))) 16px 10px;
  background:var(--surface,#151C29);color:var(--text,#E9ECF2);border-bottom:1px solid var(--line,#263045)}
.atad-tabbar{display:flex;box-sizing:border-box;
  padding:6px 8px calc(6px + var(--atad-sab,env(safe-area-inset-bottom,0px)));
  background:var(--surface,#151C29);color:var(--text,#E9ECF2);border-top:1px solid var(--line,#263045)}
.atad-portal-row{display:flex;align-items:center;gap:12px;min-height:48px;box-sizing:border-box;padding:0 16px;
  color:var(--text,#E9ECF2);text-decoration:none;font:600 15px/1.2 var(--font,system-ui,sans-serif);
  border-bottom:1px solid var(--line,#263045)}
.atad-portal-row svg{width:20px;height:20px;flex:none;color:var(--muted,#9AA4B7)}